IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Update dependency stylelint-config-sass-guidelines to v10 (#71632)

Browse Source 
* Update dependency stylelint-config-sass-guidelines to v10

* fixes

* fix typo

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
This commit is contained in:
renovate[bot]
2023-07-19 16:05:06 +01:00
committed by GitHub
parent bc3d22ec48
commit d2ff73d455
17 changed files with 90 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -237,7 +237,7 @@
"style-loader": "3.3.1",
"stylelint": "15.10.1",
"stylelint-config-prettier": "9.0.5",
"stylelint-config-sass-guidelines": "9.0.1",
"stylelint-config-sass-guidelines": "10.0.0",
"terser-webpack-plugin": "5.3.6",
"testing-library-selector": "0.2.1",
"ts-jest": "29.1.1",

9
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
View File

@@ -6,6 +6,7 @@ import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
export const darkThemeVarsTemplate = (theme: GrafanaTheme2) =>
`${renderGeneratedFileBanner('grafana-ui/src/themes/dark.ts', 'grafana-ui/src/themes/_variables.dark.scss.tmpl.ts')}
@use 'sass:color';
// Global values
// --------------------------------------------------
@@ -181,7 +182,7 @@ $btn-primary-bg: $blue-base;
$btn-primary-bg-hl: $blue-shade;
$btn-secondary-bg: $dark-6;
$btn-secondary-bg-hl: lighten($dark-6, 4%);
$btn-secondary-bg-hl: color.adjust($dark-6, $lightness: 4%);
$btn-success-bg: $green-base;
$btn-success-bg-hl: $green-shade;
@@ -190,7 +191,7 @@ $btn-danger-bg: $red-base;
$btn-danger-bg-hl: $red-shade;
$btn-inverse-bg: $dark-6;
$btn-inverse-bg-hl: lighten($dark-6, 4%);
$btn-inverse-bg-hl: color.adjust($dark-6, $lightness: 4%);
$btn-inverse-text-color: $link-color;
$btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1);
@@ -380,9 +381,9 @@ $panel-editor-viz-item-border-hover: 1px solid $blue-light;
$panel-editor-viz-item-bg: $input-bg;
$panel-editor-tabs-line-color: #e3e3e3;
$panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
$panel-editor-viz-item-bg-hover: color.adjust($blue-base, $lightness: -46%);
$panel-grid-placeholder-bg: darken(${theme.v1.palette.blue77}, 30%);
$panel-grid-placeholder-bg: color.adjust(${theme.v1.palette.blue77}, $lightness: -30%);
$panel-grid-placeholder-shadow: 0 0 4px ${theme.v1.palette.blue80};
// logs

7
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
View File

@@ -8,6 +8,7 @@ import { styleMixins } from '.';
export const lightThemeVarsTemplate = (theme: GrafanaTheme2) =>
`${renderGeneratedFileBanner('grafana-ui/src/themes/light.ts', 'grafana-ui/src/themes/_variable.light.scss.tmpl.ts')}
@use 'sass:color';
// Global values
// --------------------------------------------------
@@ -297,7 +298,7 @@ $popover-shadow: ${theme.shadows.z3};
$graph-tooltip-bg: $gray-5;
$tooltipArrowWidth: 5px;
$tooltipLinkColor: lighten($tooltipColor, 5%);
$tooltipLinkColor: color.adjust($tooltipColor, $lightness: 5%);
$tooltipExternalLinkColor: #6E9FFF;
$popover-error-bg: $btn-danger-bg;
@@ -379,9 +380,9 @@ $panel-editor-viz-item-border-hover: 1px solid $blue-light;
$panel-editor-viz-item-bg: $card-background;
$panel-editor-tabs-line-color: $dark-2;
$panel-editor-viz-item-bg-hover: lighten($blue-base, 45%);
$panel-editor-viz-item-bg-hover: color.adjust($blue-base, $lightness: 45%);
$panel-grid-placeholder-bg: lighten(${theme.v1.palette.blue95}, 30%);
$panel-grid-placeholder-bg: color.adjust(${theme.v1.palette.blue95}, $lightness: 30%);
$panel-grid-placeholder-shadow: 0 0 4px ${theme.v1.palette.blue95};
// logs

9
public/sass/_variables.dark.generated.scss
View File

@@ -8,6 +8,7 @@
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
*/
@use 'sass:color';
// Global values
// --------------------------------------------------
@@ -183,7 +184,7 @@ $btn-primary-bg: $blue-base;
$btn-primary-bg-hl: $blue-shade;
$btn-secondary-bg: $dark-6;
$btn-secondary-bg-hl: lighten($dark-6, 4%);
$btn-secondary-bg-hl: color.adjust($dark-6, $lightness: 4%);
$btn-success-bg: $green-base;
$btn-success-bg-hl: $green-shade;
@@ -192,7 +193,7 @@ $btn-danger-bg: $red-base;
$btn-danger-bg-hl: $red-shade;
$btn-inverse-bg: $dark-6;
$btn-inverse-bg-hl: lighten($dark-6, 4%);
$btn-inverse-bg-hl: color.adjust($dark-6, $lightness: 4%);
$btn-inverse-text-color: $link-color;
$btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1);
@@ -382,9 +383,9 @@ $panel-editor-viz-item-border-hover: 1px solid $blue-light;
$panel-editor-viz-item-bg: $input-bg;
$panel-editor-tabs-line-color: #e3e3e3;
$panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
$panel-editor-viz-item-bg-hover: color.adjust($blue-base, $lightness: -46%);
$panel-grid-placeholder-bg: darken(#1f60c4, 30%);
$panel-grid-placeholder-bg: color.adjust(#1f60c4, $lightness: -30%);
$panel-grid-placeholder-shadow: 0 0 4px #3274d9;
// logs

7
public/sass/_variables.light.generated.scss
View File

@@ -8,6 +8,7 @@
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
*/
@use 'sass:color';
// Global values
// --------------------------------------------------
@@ -297,7 +298,7 @@ $popover-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);
$graph-tooltip-bg: $gray-5;
$tooltipArrowWidth: 5px;
$tooltipLinkColor: lighten($tooltipColor, 5%);
$tooltipLinkColor: color.adjust($tooltipColor, $lightness: 5%);
$tooltipExternalLinkColor: #6E9FFF;
$popover-error-bg: $btn-danger-bg;
@@ -379,9 +380,9 @@ $panel-editor-viz-item-border-hover: 1px solid $blue-light;
$panel-editor-viz-item-bg: $card-background;
$panel-editor-tabs-line-color: $dark-2;
$panel-editor-viz-item-bg-hover: lighten($blue-base, 45%);
$panel-editor-viz-item-bg-hover: color.adjust($blue-base, $lightness: 45%);
$panel-grid-placeholder-bg: lighten(#5794f2, 30%);
$panel-grid-placeholder-bg: color.adjust(#5794f2, $lightness: 30%);
$panel-grid-placeholder-shadow: 0 0 4px #5794f2;
// logs

8
public/sass/components/_buttons.scss
View File

@@ -1,3 +1,5 @@
@use 'sass:color';
@use 'sass:map';
//
// Buttons
// --------------------------------------------------
@@ -177,8 +179,8 @@ $btn-service-icon-width: 35px;
}
@each $service, $data in $external-services {
$serviceBgColor: map-get($data, bgColor);
$serviceBorderColor: map-get($data, borderColor);
$serviceBgColor: map.get($data, bgColor);
$serviceBorderColor: map.get($data, borderColor);
.btn-service--#{$service} {
background-color: $serviceBgColor;
@@ -251,7 +253,7 @@ $btn-service-icon-width: 35px;
}
&.active {
background-color: lighten($input-label-bg, 5%);
background-color: color.adjust($input-label-bg, $lightness: 5%);
color: $link-color;
&:hover {
cursor: default;

3
public/sass/components/_infobox.scss
View File

@@ -1,3 +1,4 @@
@use 'sass:map';
.grafana-info-box {
position: relative;
padding: $space-lg;
@@ -33,7 +34,7 @@
}
&--max-lg {
max-width: map-get($grid-breakpoints, 'lg');
max-width: map.get($grid-breakpoints, 'lg');
}
}

3
public/sass/components/_panel_heatmap.scss
View File

@@ -1,3 +1,4 @@
@use 'sass:color';
$font-size-heatmap-tick: 11px;
.heatmap-canvas-wrapper {
@@ -44,7 +45,7 @@ $font-size-heatmap-tick: 11px;
.heatmap-crosshair {
line {
stroke: darken($red, 15%);
stroke: color.adjust($red, $lightness: -15%);
stroke-width: 1;
}
}

7
public/sass/components/_tags.scss
View File

@@ -1,3 +1,4 @@
@use 'sass:color';
// Base classes
.label,
.badge {
@@ -16,7 +17,7 @@
// Labels & Badges
.label-tag {
background-color: $purple;
color: darken($white, 5%);
color: color.adjust($white, $lightness: -5%);
white-space: nowrap;
border-radius: 3px;
text-shadow: none;
@@ -37,13 +38,13 @@
&.muted {
opacity: 0.85;
background-color: darken($purple, 10%);
background-color: color.adjust($purple, $lightness: -10%);
color: $text-muted;
}
&:hover {
opacity: 0.85;
background-color: darken($purple, 10%);
background-color: color.adjust($purple, $lightness: -10%);
}
&--gray {

6
public/sass/mixins/_breakpoints.scss
View File

@@ -1,3 +1,5 @@
@use 'sass:list';
@use 'sass:map';
// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
@@ -15,7 +17,7 @@
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
// md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
$n: list.index($breakpoint-names, $name);
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}
@@ -24,7 +26,7 @@
// >> breakpoint-min(sm, (xs: 0, sm: 544px, md: 768px))
// 544px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
$min: map.get($breakpoints, $name);
@return if($min != 0, $min, null);
}

10
public/sass/mixins/_buttons.scss
View File

@@ -1,3 +1,5 @@
@use 'sass:color';
// Button backgrounds
// ------------------
@mixin buttonBackground($startColor, $endColor, $text-color: #fff, $textShadow: 0px 1px 0 rgba(0, 0, 0, 0.1)) {
@@ -53,8 +55,8 @@
&:focus,
&.focus {
color: $white;
background-color: darken($color, 17%);
border-color: darken($color, 25%);
background-color: color.adjust($color, $lightness: -17%);
border-color: color.adjust($color, $lightness: -25%);
}
}
@@ -62,10 +64,10 @@
&:disabled {
&:focus,
&.focus {
border-color: lighten($color, 20%);
border-color: color.adjust($color, $lightness: 20%);
}
@include hover {
border-color: lighten($color, 20%);
border-color: color.adjust($color, $lightness: 20%);
}
}
}

4
public/sass/mixins/_forms.scss
View File

@@ -1,3 +1,5 @@
@use 'sass:color';
@mixin form-control-validation($color) {
// Color the label and help text
.text-help,
@@ -22,7 +24,7 @@
.input-group-addon {
color: $color;
border-color: $color;
background-color: lighten($color, 40%);
background-color: color.adjust($color, $lightness: 40%);
}
// Optional feedback icon
.form-control-feedback {

14
public/sass/mixins/_grid.scss
View File

@@ -1,3 +1,5 @@
@use 'sass:math';
/// Grid system
//
// Generate semantic grid columns with these mixins.
@@ -39,27 +41,27 @@
padding-left: calc($grid-gutter-width / 2);
@if $enable-flex {
flex: 0 0 percentage(calc($size / $columns));
flex: 0 0 math.percentage(calc($size / $columns));
// Add a `max-width` to ensure content within each column does not blow out
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
// do not appear to require this.
max-width: percentage(calc($size / $columns));
max-width: math.percentage(calc($size / $columns));
} @else {
float: left;
width: percentage(calc($size / $columns));
width: math.percentage(calc($size / $columns));
}
}
@mixin make-col-offset($size, $columns: $grid-columns) {
margin-left: percentage(calc($size / $columns));
margin-left: math.percentage(calc($size / $columns));
}
@mixin make-col-push($size, $columns: $grid-columns) {
left: if($size > 0, percentage(calc($size / $columns)), auto);
left: if($size > 0, math.percentage(calc($size / $columns)), auto);
}
@mixin make-col-pull($size, $columns: $grid-columns) {
right: if($size > 0, percentage(calc($size / $columns)), auto);
right: if($size > 0, math.percentage(calc($size / $columns)), auto);
}
@mixin make-col-modifier($type, $size, $columns) {

12
public/sass/mixins/_mixins.scss
View File

@@ -1,3 +1,5 @@
@use 'sass:color';
@mixin clearfix() {
&::after {
content: '';
@@ -254,10 +256,10 @@
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent {
@mixin background($color: $white, $alpha: 1) {
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
background-color: hsla(color.hue($color), color.saturation($color), color.lightness($color), $alpha);
}
@mixin border($color: $white, $alpha: 1) {
border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
border-color: hsla(color.hue($color), color.saturation($color), color.lightness($color), $alpha);
@include background-clip(padding-box);
}
}
@@ -278,7 +280,7 @@
}
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
background-color: mix($startColor, $endColor, 60%);
background-color: color.mix($startColor, $endColor, 60%);
background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
background-repeat: repeat-x;
}
@@ -290,13 +292,13 @@
}
@mixin gradient-horizontal-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
background-color: mix($midColor, $endColor, 80%);
background-color: color.mix($midColor, $endColor, 80%);
background-image: linear-gradient(to right, $startColor, $midColor $colorStop, $endColor);
background-repeat: no-repeat;
}
@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
background-color: mix($midColor, $endColor, 80%);
background-color: color.mix($midColor, $endColor, 80%);
background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
background-repeat: no-repeat;
}

5
public/sass/utils/_spacings.scss
View File

@@ -1,3 +1,4 @@
@use 'sass:map';
// Margin and Padding
.m-x-auto {
@@ -7,8 +8,8 @@
@each $prop, $abbrev in (margin: m, padding: p) {
@each $size, $lengths in $spacers {
$length-x: map-get($lengths, x);
$length-y: map-get($lengths, y);
$length-x: map.get($lengths, x);
$length-y: map.get($lengths, y);
.#{$abbrev}-a-#{$size} {
#{$prop}: $length-y $length-x !important;

2
stylelint.config.js
View File

@@ -26,8 +26,6 @@ module.exports = {
'length-zero-no-unit': null,
'max-nesting-depth': null,
'number-no-trailing-zeros': null,
'order/order': null,
'order/properties-alphabetical-order': null,
'property-no-vendor-prefix': null,
'rule-empty-line-before': null,
'scss/at-function-pattern': null,

104
yarn.lock
View File

@@ -19555,7 +19555,7 @@ __metadata:
style-loader: 3.3.1
stylelint: 15.10.1
stylelint-config-prettier: 9.0.5
stylelint-config-sass-guidelines: 9.0.1
stylelint-config-sass-guidelines: 10.0.0
symbol-observable: 4.0.0
terser-webpack-plugin: 5.3.6
test: "link:./public/test"
@@ -24221,15 +24221,6 @@ __metadata:
languageName: node
linkType: hard
"nanoid@npm:^3.1.30, nanoid@npm:^3.3.4":
version: 3.3.4
resolution: "nanoid@npm:3.3.4"
bin:
nanoid: bin/nanoid.cjs
checksum: 2fddd6dee994b7676f008d3ffa4ab16035a754f4bb586c61df5a22cf8c8c94017aadd360368f47d653829e0569a92b129979152ff97af23a558331e47e37cd9c
languageName: node
linkType: hard
"nanoid@npm:^3.3.1":
version: 3.3.1
resolution: "nanoid@npm:3.3.1"
@@ -24239,6 +24230,15 @@ __metadata:
languageName: node
linkType: hard
"nanoid@npm:^3.3.4":
version: 3.3.4
resolution: "nanoid@npm:3.3.4"
bin:
nanoid: bin/nanoid.cjs
checksum: 2fddd6dee994b7676f008d3ffa4ab16035a754f4bb586c61df5a22cf8c8c94017aadd360368f47d653829e0569a92b129979152ff97af23a558331e47e37cd9c
languageName: node
linkType: hard
"nanoid@npm:^3.3.6":
version: 3.3.6
resolution: "nanoid@npm:3.3.6"
@@ -26164,7 +26164,7 @@ __metadata:
languageName: node
linkType: hard
"postcss-scss@npm:4.0.6":
"postcss-scss@npm:4.0.6, postcss-scss@npm:^4.0.6":
version: 4.0.6
resolution: "postcss-scss@npm:4.0.6"
peerDependencies:
@@ -26173,15 +26173,6 @@ __metadata:
languageName: node
linkType: hard
"postcss-scss@npm:^4.0.2":
version: 4.0.2
resolution: "postcss-scss@npm:4.0.2"
peerDependencies:
postcss: ^8.3.3
checksum: b6506c1d9bc86f056e34c537447a35d2a90bc9f6afcffea9c5a8bf265334234592150c862351db9334e9b9109209ada023783ce22e56ca51221c1106591423d4
languageName: node
linkType: hard
"postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.0.13":
version: 6.0.13
resolution: "postcss-selector-parser@npm:6.0.13"
@@ -26192,7 +26183,7 @@ __metadata:
languageName: node
linkType: hard
"postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.5, postcss-selector-parser@npm:^6.0.6":
"postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.5":
version: 6.0.6
resolution: "postcss-selector-parser@npm:6.0.6"
dependencies:
@@ -26202,15 +26193,6 @@ __metadata:
languageName: node
linkType: hard
"postcss-sorting@npm:^7.0.1":
version: 7.0.1
resolution: "postcss-sorting@npm:7.0.1"
peerDependencies:
postcss: ^8.3.9
checksum: 79cca6703ef7c60ea913c3bfb91f85bd7adce35e60b834a40cadd1c7e18f37961d63f0e641387651ee3bf1df1996e952d8fe443f93a271aa2d23f239ea3145bc
languageName: node
linkType: hard
"postcss-svgo@npm:^6.0.0":
version: 6.0.0
resolution: "postcss-svgo@npm:6.0.0"
@@ -26259,17 +26241,6 @@ __metadata:
languageName: node
linkType: hard
"postcss@npm:^8.3.11":
version: 8.3.11
resolution: "postcss@npm:8.3.11"
dependencies:
nanoid: ^3.1.30
picocolors: ^1.0.0
source-map-js: ^0.6.2
checksum: 1a230553d74c66aa9585c90781ed8ea75f19cefea405d2117b67fbeb24b5b5e0e17be2e0c5a07db31dd085643a13394127ab2222e940771b70498331bf20f35e
languageName: node
linkType: hard
"postcss@npm:^8.4.24":
version: 8.4.25
resolution: "postcss@npm:8.4.25"
@@ -29980,13 +29951,6 @@ __metadata:
languageName: node
linkType: hard
"source-map-js@npm:^0.6.2":
version: 0.6.2
resolution: "source-map-js@npm:0.6.2"
checksum: 9c8151a29e00fd8d3ba87709fdf9a9ce48313d653f4a29a39b4ae53d346ac79e005de624796ff42eff55cbaf26d2e87f4466001ca87831d400d818c5cf146a0e
languageName: node
linkType: hard
"source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2":
version: 1.0.2
resolution: "source-map-js@npm:1.0.2"
@@ -30736,44 +30700,30 @@ __metadata:
languageName: node
linkType: hard
"stylelint-config-sass-guidelines@npm:9.0.1":
version: 9.0.1
resolution: "stylelint-config-sass-guidelines@npm:9.0.1"
"stylelint-config-sass-guidelines@npm:10.0.0":
version: 10.0.0
resolution: "stylelint-config-sass-guidelines@npm:10.0.0"
dependencies:
postcss-scss: ^4.0.2
stylelint-order: ^5.0.0
stylelint-scss: ^4.0.0
postcss-scss: ^4.0.6
stylelint-scss: ^4.4.0
peerDependencies:
postcss: ^8.3.3
stylelint: ^14.0.1
checksum: 9844e0858b1175b30786cbca873cc5856313475de4b3cf3e4a8504d19f2673899f0fe4d56bef5cf73c93d0ed6c7c8c3d5a3dd91b7a9586aa52ddab12ef52a64b
postcss: ^8.4.21
stylelint: ^15.2.0
checksum: 1fbd55d780bc60c46ee9bdd9f2bb8097ff890791704faaaaecf6a0542250006a94d6726fd781d7fee68c831cd33093953d1f441c73b27471e76828d100446597
languageName: node
linkType: hard
"stylelint-order@npm:^5.0.0":
version: 5.0.0
resolution: "stylelint-order@npm:5.0.0"
"stylelint-scss@npm:^4.4.0":
version: 4.7.0
resolution: "stylelint-scss@npm:4.7.0"
dependencies:
postcss: ^8.3.11
postcss-sorting: ^7.0.1
peerDependencies:
stylelint: ^14.0.0
checksum: fa3ace3cc65486b9f94165603bd04983636fda5ac959cd29bf87847a95b32f366b16faf612bd49e3b9f96073f8fe28a22a5c5727cc08c8f9d7327c89084b3f30
languageName: node
linkType: hard
"stylelint-scss@npm:^4.0.0":
version: 4.0.0
resolution: "stylelint-scss@npm:4.0.0"
dependencies:
lodash: ^4.17.15
postcss-media-query-parser: ^0.2.3
postcss-resolve-nested-selector: ^0.1.1
postcss-selector-parser: ^6.0.6
postcss-value-parser: ^4.1.0
postcss-selector-parser: ^6.0.11
postcss-value-parser: ^4.2.0
peerDependencies:
stylelint: ^14.0.0
checksum: 98f835547b7f60dcd1f3725d4d67dafaae89fd38e7fb62fb59afba5e8511b8552ca658908ced7421a83b2a6ef4174f575625e4e56113ec9a54aa42435ceae5cc
stylelint: ^14.5.1 || ^15.0.0
checksum: 7818e7dd402864ae27dda9ea28213e0b25454f3dbe1524abf894050e677686614f7ca26437d45db1af9a352cc78466320741e91cc8694f9271a672db609319d9
languageName: node
linkType: hard