Skip to content

Commit d2ff73d

Browse files
renovate[bot]ashharrison90
renovate[bot]
and
ashharrison90
authored
Update dependency stylelint-config-sass-guidelines to v10 (grafana#71632)
* 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 <[email protected]>
1 parent bc3d22e commit d2ff73d

17 files changed

+89
-121
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@
237237
"style-loader": "3.3.1",
238238
"stylelint": "15.10.1",
239239
"stylelint-config-prettier": "9.0.5",
240-
"stylelint-config-sass-guidelines": "9.0.1",
240+
"stylelint-config-sass-guidelines": "10.0.0",
241241
"terser-webpack-plugin": "5.3.6",
242242
"testing-library-selector": "0.2.1",
243243
"ts-jest": "29.1.1",

‎packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
66

77
export const darkThemeVarsTemplate = (theme: GrafanaTheme2) =>
88
`${renderGeneratedFileBanner('grafana-ui/src/themes/dark.ts', 'grafana-ui/src/themes/_variables.dark.scss.tmpl.ts')}
9+
@use 'sass:color';
910
// Global values
1011
// --------------------------------------------------
1112
@@ -181,7 +182,7 @@ $btn-primary-bg: $blue-base;
181182
$btn-primary-bg-hl: $blue-shade;
182183
183184
$btn-secondary-bg: $dark-6;
184-
$btn-secondary-bg-hl: lighten($dark-6, 4%);
185+
$btn-secondary-bg-hl: color.adjust($dark-6, $lightness: 4%);
185186
186187
$btn-success-bg: $green-base;
187188
$btn-success-bg-hl: $green-shade;
@@ -190,7 +191,7 @@ $btn-danger-bg: $red-base;
190191
$btn-danger-bg-hl: $red-shade;
191192
192193
$btn-inverse-bg: $dark-6;
193-
$btn-inverse-bg-hl: lighten($dark-6, 4%);
194+
$btn-inverse-bg-hl: color.adjust($dark-6, $lightness: 4%);
194195
$btn-inverse-text-color: $link-color;
195196
$btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1);
196197
@@ -380,9 +381,9 @@ $panel-editor-viz-item-border-hover: 1px solid $blue-light;
380381
$panel-editor-viz-item-bg: $input-bg;
381382
$panel-editor-tabs-line-color: #e3e3e3;
382383
383-
$panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
384+
$panel-editor-viz-item-bg-hover: color.adjust($blue-base, $lightness: -46%);
384385
385-
$panel-grid-placeholder-bg: darken(${theme.v1.palette.blue77}, 30%);
386+
$panel-grid-placeholder-bg: color.adjust(${theme.v1.palette.blue77}, $lightness: -30%);
386387
$panel-grid-placeholder-shadow: 0 0 4px ${theme.v1.palette.blue80};
387388
388389
// logs

‎packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { styleMixins } from '.';
88

99
export const lightThemeVarsTemplate = (theme: GrafanaTheme2) =>
1010
`${renderGeneratedFileBanner('grafana-ui/src/themes/light.ts', 'grafana-ui/src/themes/_variable.light.scss.tmpl.ts')}
11+
@use 'sass:color';
1112
// Global values
1213
// --------------------------------------------------
1314
@@ -297,7 +298,7 @@ $popover-shadow: ${theme.shadows.z3};
297298
$graph-tooltip-bg: $gray-5;
298299
299300
$tooltipArrowWidth: 5px;
300-
$tooltipLinkColor: lighten($tooltipColor, 5%);
301+
$tooltipLinkColor: color.adjust($tooltipColor, $lightness: 5%);
301302
$tooltipExternalLinkColor: #6E9FFF;
302303
303304
$popover-error-bg: $btn-danger-bg;
@@ -379,9 +380,9 @@ $panel-editor-viz-item-border-hover: 1px solid $blue-light;
379380
$panel-editor-viz-item-bg: $card-background;
380381
$panel-editor-tabs-line-color: $dark-2;
381382
382-
$panel-editor-viz-item-bg-hover: lighten($blue-base, 45%);
383+
$panel-editor-viz-item-bg-hover: color.adjust($blue-base, $lightness: 45%);
383384
384-
$panel-grid-placeholder-bg: lighten(${theme.v1.palette.blue95}, 30%);
385+
$panel-grid-placeholder-bg: color.adjust(${theme.v1.palette.blue95}, $lightness: 30%);
385386
$panel-grid-placeholder-shadow: 0 0 4px ${theme.v1.palette.blue95};
386387
387388
// logs

‎public/sass/_variables.dark.generated.scss‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
99
*/
1010

11+
@use 'sass:color';
1112
// Global values
1213
// --------------------------------------------------
1314

@@ -183,7 +184,7 @@ $btn-primary-bg: $blue-base;
183184
$btn-primary-bg-hl: $blue-shade;
184185

185186
$btn-secondary-bg: $dark-6;
186-
$btn-secondary-bg-hl: lighten($dark-6, 4%);
187+
$btn-secondary-bg-hl: color.adjust($dark-6, $lightness: 4%);
187188

188189
$btn-success-bg: $green-base;
189190
$btn-success-bg-hl: $green-shade;
@@ -192,7 +193,7 @@ $btn-danger-bg: $red-base;
192193
$btn-danger-bg-hl: $red-shade;
193194

194195
$btn-inverse-bg: $dark-6;
195-
$btn-inverse-bg-hl: lighten($dark-6, 4%);
196+
$btn-inverse-bg-hl: color.adjust($dark-6, $lightness: 4%);
196197
$btn-inverse-text-color: $link-color;
197198
$btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1);
198199

@@ -382,9 +383,9 @@ $panel-editor-viz-item-border-hover: 1px solid $blue-light;
382383
$panel-editor-viz-item-bg: $input-bg;
383384
$panel-editor-tabs-line-color: #e3e3e3;
384385

385-
$panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
386+
$panel-editor-viz-item-bg-hover: color.adjust($blue-base, $lightness: -46%);
386387

387-
$panel-grid-placeholder-bg: darken(#1f60c4, 30%);
388+
$panel-grid-placeholder-bg: color.adjust(#1f60c4, $lightness: -30%);
388389
$panel-grid-placeholder-shadow: 0 0 4px #3274d9;
389390

390391
// logs

‎public/sass/_variables.light.generated.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
99
*/
1010

11+
@use 'sass:color';
1112
// Global values
1213
// --------------------------------------------------
1314

@@ -297,7 +298,7 @@ $popover-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);
297298
$graph-tooltip-bg: $gray-5;
298299

299300
$tooltipArrowWidth: 5px;
300-
$tooltipLinkColor: lighten($tooltipColor, 5%);
301+
$tooltipLinkColor: color.adjust($tooltipColor, $lightness: 5%);
301302
$tooltipExternalLinkColor: #6E9FFF;
302303

303304
$popover-error-bg: $btn-danger-bg;
@@ -379,9 +380,9 @@ $panel-editor-viz-item-border-hover: 1px solid $blue-light;
379380
$panel-editor-viz-item-bg: $card-background;
380381
$panel-editor-tabs-line-color: $dark-2;
381382

382-
$panel-editor-viz-item-bg-hover: lighten($blue-base, 45%);
383+
$panel-editor-viz-item-bg-hover: color.adjust($blue-base, $lightness: 45%);
383384

384-
$panel-grid-placeholder-bg: lighten(#5794f2, 30%);
385+
$panel-grid-placeholder-bg: color.adjust(#5794f2, $lightness: 30%);
385386
$panel-grid-placeholder-shadow: 0 0 4px #5794f2;
386387

387388
// logs

‎public/sass/components/_buttons.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'sass:color';
2+
@use 'sass:map';
13
//
24
// Buttons
35
// --------------------------------------------------
@@ -177,8 +179,8 @@ $btn-service-icon-width: 35px;
177179
}
178180

179181
@each $service, $data in $external-services {
180-
$serviceBgColor: map-get($data, bgColor);
181-
$serviceBorderColor: map-get($data, borderColor);
182+
$serviceBgColor: map.get($data, bgColor);
183+
$serviceBorderColor: map.get($data, borderColor);
182184

183185
.btn-service--#{$service} {
184186
background-color: $serviceBgColor;
@@ -251,7 +253,7 @@ $btn-service-icon-width: 35px;
251253
}
252254

253255
&.active {
254-
background-color: lighten($input-label-bg, 5%);
256+
background-color: color.adjust($input-label-bg, $lightness: 5%);
255257
color: $link-color;
256258
&:hover {
257259
cursor: default;

‎public/sass/components/_infobox.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use 'sass:map';
12
.grafana-info-box {
23
position: relative;
34
padding: $space-lg;
@@ -33,7 +34,7 @@
3334
}
3435

3536
&--max-lg {
36-
max-width: map-get($grid-breakpoints, 'lg');
37+
max-width: map.get($grid-breakpoints, 'lg');
3738
}
3839
}
3940

‎public/sass/components/_panel_heatmap.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use 'sass:color';
12
$font-size-heatmap-tick: 11px;
23

34
.heatmap-canvas-wrapper {
@@ -44,7 +45,7 @@ $font-size-heatmap-tick: 11px;
4445

4546
.heatmap-crosshair {
4647
line {
47-
stroke: darken($red, 15%);
48+
stroke: color.adjust($red, $lightness: -15%);
4849
stroke-width: 1;
4950
}
5051
}

‎public/sass/components/_tags.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use 'sass:color';
12
// Base classes
23
.label,
34
.badge {
@@ -16,7 +17,7 @@
1617
// Labels & Badges
1718
.label-tag {
1819
background-color: $purple;
19-
color: darken($white, 5%);
20+
color: color.adjust($white, $lightness: -5%);
2021
white-space: nowrap;
2122
border-radius: 3px;
2223
text-shadow: none;
@@ -37,13 +38,13 @@
3738

3839
&.muted {
3940
opacity: 0.85;
40-
background-color: darken($purple, 10%);
41+
background-color: color.adjust($purple, $lightness: -10%);
4142
color: $text-muted;
4243
}
4344

4445
&:hover {
4546
opacity: 0.85;
46-
background-color: darken($purple, 10%);
47+
background-color: color.adjust($purple, $lightness: -10%);
4748
}
4849

4950
&--gray {

‎public/sass/mixins/_breakpoints.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'sass:list';
2+
@use 'sass:map';
13
// Breakpoint viewport sizes and media queries.
24
//
35
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
@@ -15,7 +17,7 @@
1517
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
1618
// md
1719
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
18-
$n: index($breakpoint-names, $name);
20+
$n: list.index($breakpoint-names, $name);
1921
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
2022
}
2123

@@ -24,7 +26,7 @@
2426
// >> breakpoint-min(sm, (xs: 0, sm: 544px, md: 768px))
2527
// 544px
2628
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
27-
$min: map-get($breakpoints, $name);
29+
$min: map.get($breakpoints, $name);
2830
@return if($min != 0, $min, null);
2931
}
3032

0 commit comments

Comments
 (0)