Skip to content

Commit 304b883

Browse files
agligaagliga
committed
chore: fixed all sass deprecated warnings
1 parent f1f5ff6 commit 304b883

File tree

107 files changed

+1431
-1155
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

107 files changed

+1431
-1155
lines changed

‎packages/skin/.stylelintrc

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,9 @@
3737
],
3838
"plugins": ["stylelint-order"],
3939
"rules": {
40-
"scss/at-mixin-argumentless-call-parentheses": null,
41-
"at-rule-descriptor-value-no-unknown": null,
4240
"scss/dollar-variable-pattern": null,
4341
"nesting-selector-no-missing-scoping-root": null,
4442
"order/properties-alphabetical-order": true,
45-
"declaration-property-value-no-unknown": null,
4643
"value-keyword-case": [
4744
"lower",
4845
{

‎packages/skin/dist/drawer-dialog/drawer-dialog.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/*! DEPRECATED COMPONENT. Will be removed next major version */
2+
/*! DEPRECATED COMPONENT. Will be removed next major version */
23
:root {
34
--dialog-scrim-color-hide: rgb(17 24 32 / 0);
45
--dialog-scrim-color-show: rgb(17 24 32 / 0.7);

‎packages/skin/dist/fullscreen-dialog/fullscreen-dialog.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/*! DEPRECATED COMPONENT. Will be removed next major version */
2+
/*! DEPRECATED COMPONENT. Will be removed next major version */
23
:root {
34
--dialog-scrim-color-hide: rgb(17 24 32 / 0);
45
--dialog-scrim-color-show: rgb(17 24 32 / 0.7);

‎packages/skin/dist/mixins/_typography-mixins.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
}
2424

2525
@mixin typography-large-2-secondary() {
26-
@include typography-large-2();
26+
@include typography-large-2;
2727

2828
color: var(--color-foreground-secondary);
2929
}
@@ -35,7 +35,7 @@
3535
}
3636

3737
@mixin typography-large-1-secondary() {
38-
@include typography-large-1();
38+
@include typography-large-1;
3939

4040
color: var(--color-foreground-secondary);
4141
}
@@ -46,13 +46,13 @@
4646
}
4747

4848
@mixin typography-medium-bold() {
49-
@include typography-medium();
49+
@include typography-medium;
5050

5151
font-weight: var(--font-weight-bold);
5252
}
5353

5454
@mixin typography-medium-secondary() {
55-
@include typography-medium();
55+
@include typography-medium;
5656

5757
color: var(--color-foreground-secondary);
5858
}
@@ -63,13 +63,13 @@
6363
}
6464

6565
@mixin typography-regular-bold() {
66-
@include typography-regular();
66+
@include typography-regular;
6767

6868
font-weight: var(--font-weight-bold);
6969
}
7070

7171
@mixin typography-regular-secondary() {
72-
@include typography-regular();
72+
@include typography-regular;
7373

7474
color: var(--color-foreground-secondary);
7575
}
@@ -80,13 +80,13 @@
8080
}
8181

8282
@mixin typography-small-bold() {
83-
@include typography-small();
83+
@include typography-small;
8484

8585
font-weight: var(--font-weight-bold);
8686
}
8787

8888
@mixin typography-small-secondary() {
89-
@include typography-small();
89+
@include typography-small;
9090

9191
color: var(--color-foreground-secondary);
9292
}

‎packages/skin/dist/variables/_variables.scss

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,26 @@
33
/* Mobile-first means the default layout applies to mobile and there should be no mimimums even though */
44
/* most mobile devices would be higher in screen width than the smallest viewport width. */
55

6-
/* The variables with underscores are to be considered constants. They can be read, but should not be modified. */
6+
/* The variables are to be considered constants. They can be read, but should not be modified. */
7+
$screen-size-XS: 320px;
8+
$screen-size-SM: 512px;
9+
$screen-size-MD: 768px;
10+
$screen-size-LG: 1024px;
11+
$screen-size-XL: 1280px;
12+
$screen-size-XL2: 1440px;
13+
$screen-size-XL3: 1680px;
14+
$screen-size-XL4: 1920px;
15+
$page-grid-max-width: 1584px;
16+
$page-grid-number-cols-small: 8;
17+
$page-grid-number-cols-large: 16;
18+
$page-grid-outside-margins-small: 16px;
19+
$page-grid-outside-margins-large: 32px;
20+
$page-grid-outside-margins-max: 48px;
21+
$page-grid-column-gaps-small: var(--spacing-100);
22+
$page-grid-column-gaps-large: var(--spacing-200);
23+
$page-grid-row-gaps-small: var(--spacing-100);
24+
$page-grid-row-gaps-large: var(--spacing-200);
25+
/* Deprecated when using variables with _ or - with @use, they are not accessable */
726
$_screen-size-XS: 320px;
827
$_screen-size-SM: 512px;
928
$_screen-size-MD: 768px;

‎packages/skin/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
"lint": "npm run lint:sass && npm run lint:css && npm run lint:js",
5555
"lint:css": "stylelint dist --config .stylelintrc",
5656
"lint:js": "eslint 'src/routes/main.js' > lint.log && eslint 'src/sass/**/stories/*.js' >> lint.log ",
57-
"lint:sass": "stylelint docs/src/sass src/sass --config .stylelintrc",
57+
"lint:sass": "stylelint src/routes/**/*.scss src/sass --config .stylelintrc",
5858
"postcss": "postcss dist/**/*.css -r ",
5959
"prepublishOnly": "node scripts gen",
6060
"preview": "marko-run preview",

‎packages/skin/src/components/site-header.style.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "../sass/variables/variables";
1+
@use "../sass/variables/variables";
22

33
header {
44
background-color: var(--color-background-accent);
@@ -296,7 +296,7 @@ svg.icon.mobile-menu__close {
296296
display: block;
297297
}
298298

299-
@media screen and (min-width: $_screen-size-SM) {
299+
@media screen and (min-width: variables.$screen-size-SM) {
300300
.app-bar {
301301
grid-area: 1 / 1 / span 1 / span 16;
302302
}
@@ -306,7 +306,7 @@ svg.icon.mobile-menu__close {
306306
}
307307
}
308308

309-
@media screen and (min-width: $_screen-size-MD) {
309+
@media screen and (min-width: variables.$screen-size-MD) {
310310
header {
311311
box-shadow: none;
312312
position: static;
@@ -369,13 +369,13 @@ svg.icon.mobile-menu__close {
369369
}
370370
}
371371

372-
@media screen and (min-width: $_screen-size-XL) {
372+
@media screen and (min-width: variables.$screen-size-XL) {
373373
#about dl {
374374
column-count: 2;
375375
}
376376
}
377377

378-
@media screen and (min-width: $_screen-size-XL3) {
378+
@media screen and (min-width: variables.$screen-size-XL3) {
379379
.app-bar {
380380
padding-left: 0;
381381
padding-right: 0;

‎packages/skin/src/routes/_index/+layout.style.scss

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
@import "../../sass/variables/variables";
2-
@import "../../sass/mixins/public/typography-mixins";
3-
@import "../../sass/mixins/public/utility-mixins";
4-
@import "../static/sass/pygments";
5-
@import "../static/sass/demo-colors";
6-
@import "../static/sass/page-grid";
7-
@import "../static/sass/color-schemes";
8-
@import "../../sass/bundles/skin-full";
1+
@use "../../sass/variables/variables";
2+
@use "../../sass/mixins/public/typography-mixins";
3+
@use "../../sass/mixins/public/utility-mixins";
4+
@use "../static/sass/pygments";
5+
@use "../static/sass/demo-colors";
6+
@use "../static/sass/page-grid";
7+
@use "../static/sass/color-schemes";
8+
@use "../../sass/bundles/skin-full";
99

1010
:root {
1111
--color-menu-background: #f2f2f2;
12-
--color-code-scrollbar: rgba(255, 255, 255, 0.2);
13-
--color-code-scrollbar-thumb: rgba(255, 255, 255, 0.4);
12+
--color-code-scrollbar: rgb(255 255 255 / 0.2);
13+
--color-code-scrollbar-thumb: rgb(255 255 255 / 0.4);
1414
}
1515

1616
@media (prefers-color-scheme: dark) {
@@ -21,7 +21,7 @@
2121

2222
/* stylelint-disable no-descending-specificity */
2323

24-
/*
24+
/*
2525
Some browsers, especially within mobile devices, include an automatic mechanism for inflating text to help readability. We're turning that off here to get to a consistent baseline.
2626
*/
2727
html {
@@ -67,7 +67,7 @@ nav h2 {
6767
display: none;
6868
}
6969

70-
@media screen and (min-width: $_screen-size-SM) {
70+
@media screen and (min-width: variables.$screen-size-SM) {
7171
.site-nav {
7272
height: calc(100vh - 60px);
7373
margin-bottom: var(--spacing-800);
@@ -112,7 +112,7 @@ nav h2 {
112112
}
113113
}
114114

115-
@media screen and (min-width: $_screen-size-MD) {
115+
@media screen and (min-width: variables.$screen-size-MD) {
116116
.site-nav {
117117
display: block;
118118
}
@@ -126,7 +126,7 @@ nav h2 {
126126
}
127127
}
128128

129-
@media screen and (min-width: $_screen-size-XL) {
129+
@media screen and (min-width: variables.$screen-size-XL) {
130130
.demo-color-primitive {
131131
column-count: 4;
132132
}
@@ -137,7 +137,7 @@ nav h2 {
137137
}
138138
}
139139

140-
@media screen and (min-width: $_screen-size-XL3) {
140+
@media screen and (min-width: variables.$screen-size-XL3) {
141141
.demo-color-primitive {
142142
column-count: 5;
143143
}
@@ -160,8 +160,8 @@ span.highlight {
160160

161161
/* fix for long attributes values that don't wrap right */
162162
.s {
163+
overflow-wrap: break-word;
163164
word-break: break-all;
164-
word-wrap: break-word;
165165
}
166166
}
167167

@@ -354,67 +354,67 @@ span.demo__inner {
354354
}
355355

356356
.demo-typography-giant-3 {
357-
@include typography-giant-3();
357+
@include typography-mixins.typography-giant-3;
358358
}
359359

360360
.demo-typography-giant-2 {
361-
@include typography-giant-2();
361+
@include typography-mixins.typography-giant-2;
362362
}
363363

364364
.demo-typography-giant-1 {
365-
@include typography-giant-1();
365+
@include typography-mixins.typography-giant-1;
366366
}
367367

368368
.demo-typography-large-2 {
369-
@include typography-large-2();
369+
@include typography-mixins.typography-large-2;
370370
}
371371

372372
.demo-typography-large-2-secondary {
373-
@include typography-large-2-secondary();
373+
@include typography-mixins.typography-large-2-secondary;
374374
}
375375

376376
.demo-typography-large-1 {
377-
@include typography-large-1();
377+
@include typography-mixins.typography-large-1;
378378
}
379379

380380
.demo-typography-large-1-secondary {
381-
@include typography-large-1-secondary();
381+
@include typography-mixins.typography-large-1-secondary;
382382
}
383383

384384
.demo-typography-medium-bold {
385-
@include typography-medium-bold();
385+
@include typography-mixins.typography-medium-bold;
386386
}
387387

388388
.demo-typography-medium {
389-
@include typography-medium();
389+
@include typography-mixins.typography-medium;
390390
}
391391

392392
.demo-typography-medium-secondary {
393-
@include typography-medium-secondary();
393+
@include typography-mixins.typography-medium-secondary;
394394
}
395395

396396
.demo-typography-regular-bold {
397-
@include typography-regular-bold();
397+
@include typography-mixins.typography-regular-bold;
398398
}
399399

400400
.demo-typography-regular {
401-
@include typography-regular();
401+
@include typography-mixins.typography-regular;
402402
}
403403

404404
.demo-typography-regular-secondary {
405-
@include typography-regular-secondary();
405+
@include typography-mixins.typography-regular-secondary;
406406
}
407407

408408
.demo-typography-small-bold {
409-
@include typography-small-bold();
409+
@include typography-mixins.typography-small-bold;
410410
}
411411

412412
.demo-typography-small {
413-
@include typography-small();
413+
@include typography-mixins.typography-small;
414414
}
415415

416416
.demo-typography-small-secondary {
417-
@include typography-small-secondary();
417+
@include typography-mixins.typography-small-secondary;
418418
}
419419

420420
/* ICON SECTION */

‎packages/skin/src/routes/guide-examples/+layout.style.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
// Dependencies common to full page (no site layout) examples
2-
@import "../../../src/tokens/evo-core.css";
3-
@import "../../../src/sass/page-grid/page-grid";
2+
@use "../../../src/tokens/evo-core.css";
3+
@use "../../../src/sass/page-grid/page-grid";

0 commit comments

Comments
 (0)