noctemyth 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/dist/css/noctemyth-skelton.css +3126 -5336
  2. package/dist/css/noctemyth-skelton.css.map +1 -1
  3. package/dist/css/noctemyth-skelton.min.css +3126 -5336
  4. package/dist/css/noctemyth-skelton.min.css.map +1 -1
  5. package/dist/css/noctemyth-utilities.css +38455 -77487
  6. package/dist/css/noctemyth-utilities.css.map +1 -1
  7. package/dist/css/noctemyth-utilities.min.css +38455 -77487
  8. package/dist/css/noctemyth-utilities.min.css.map +1 -1
  9. package/dist/css/noctemyth.css +22250 -37070
  10. package/dist/css/noctemyth.css.map +1 -1
  11. package/dist/css/noctemyth.min.css +5326 -22994
  12. package/dist/css/noctemyth.min.css.map +1 -1
  13. package/package.json +8 -8
  14. package/src/backgrounds/dot.scss +39 -15
  15. package/src/backgrounds/gingham.scss +35 -18
  16. package/src/backgrounds/rhombus.scss +58 -19
  17. package/src/backgrounds/stripe.scss +30 -9
  18. package/src/backgrounds/zigzag.scss +43 -18
  19. package/src/base/dub.scss +15 -2
  20. package/src/base/element.scss +1 -1
  21. package/src/components/accordion.scss +254 -88
  22. package/src/components/badge.scss +215 -63
  23. package/src/components/blockquote.scss +74 -25
  24. package/src/components/breadcrumbs.scss +66 -15
  25. package/src/components/button.scss +204 -76
  26. package/src/components/card.scss +204 -47
  27. package/src/components/dialogue.scss +209 -140
  28. package/src/components/div.scss +1 -1
  29. package/src/components/footer.scss +28 -5
  30. package/src/components/hamburger.scss +89 -50
  31. package/src/components/header.scss +71 -5
  32. package/src/components/heading.scss +6 -6
  33. package/src/components/image.scss +1 -0
  34. package/src/components/input.scss +141 -69
  35. package/src/components/label.scss +51 -3
  36. package/src/components/link.scss +72 -9
  37. package/src/components/list.scss +2 -2
  38. package/src/components/loader.scss +18 -7
  39. package/src/components/main.scss +1 -1
  40. package/src/components/message.scss +142 -23
  41. package/src/components/modal.scss +26 -7
  42. package/src/components/nav.scss +655 -279
  43. package/src/components/paragraph.scss +1 -1
  44. package/src/components/progress.scss +40 -15
  45. package/src/components/section.scss +1 -1
  46. package/src/components/span.scss +1 -1
  47. package/src/css-variables/color.scss +582 -465
  48. package/src/css-variables/components/dialogue.scss +2 -2
  49. package/src/css-variables/miscellaneous.scss +1 -1
  50. package/src/functions/color.scss +13 -0
  51. package/src/functions/index.scss +1 -0
  52. package/src/functions/string.scss +12 -0
  53. package/src/layouts/centering.scss +1 -1
  54. package/src/layouts/columns.scss +3 -2
  55. package/src/layouts/container.scss +1 -1
  56. package/src/mixins/color.scss +0 -32
  57. package/src/mixins/element.scss +2 -2
  58. package/src/mixins/responsive.scss +2 -1
  59. package/src/utilities/color.scss +2 -6
  60. package/src/variables/color.scss +949 -909
  61. package/src/variables/components/dialogue.scss +2 -2
  62. package/src/variables/miscellaneous.scss +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noctemyth",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "design system by kaminoctem",
5
5
  "main": "src/noctemyth.scss",
6
6
  "scripts": {
@@ -50,13 +50,13 @@
50
50
  },
51
51
  "homepage": "https://github.com/kaminoctem/noctemyth#readme",
52
52
  "devDependencies": {
53
- "autoprefixer": "^10.4.23",
54
- "baseline-browser-mapping": "^2.9.19",
55
- "caniuse-lite": "^1.0.30001766",
56
- "cssnano": "^7.1.2",
57
- "postcss": "^8.5.6",
53
+ "autoprefixer": "^10.4.27",
54
+ "baseline-browser-mapping": "^2.10.8",
55
+ "caniuse-lite": "^1.0.30001780",
56
+ "cssnano": "^7.1.3",
57
+ "postcss": "^8.5.8",
58
58
  "postcss-cli": "^11.0.1",
59
- "rimraf": "^6.1.2",
60
- "sass": "^1.97.3"
59
+ "rimraf": "^6.1.3",
60
+ "sass": "^1.98.0"
61
61
  }
62
62
  }
package/src/backgrounds/dot.scss CHANGED
@@ -2,9 +2,10 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .dot {
5
+ :where(.dot) {
6
6
  --#{variables.$prefix}dot-color-fore: oklch(
7
- var(--#{variables.$prefix}color-default-dot-fore-oklch) / 0.5
7
+ from var(--#{variables.$prefix}color-default-dot-fore) l c h /
8
+ 0.5
8
9
  );
9
10
  --#{variables.$prefix}dot-color-back: var(
10
11
  --#{variables.$prefix}color-default-dot-back
@@ -13,7 +14,8 @@
13
14
 
14
15
  @include mixins.element();
15
16
  background-color: var(--#{variables.$prefix}dot-color-back);
16
- background-image: radial-gradient(
17
+ background-image:
18
+ radial-gradient(
17
19
  var(--#{variables.$prefix}dot-color-fore)
18
20
  var(--#{variables.$prefix}dot-size),
19
21
  transparent calc(var(--#{variables.$prefix}dot-size) + 3%)
@@ -23,28 +25,50 @@
23
25
  var(--#{variables.$prefix}dot-size),
24
26
  transparent calc(var(--#{variables.$prefix}dot-size) + 3%)
25
27
  );
26
- background-position: 0 0, 1rem 1rem;
28
+ background-position:
29
+ 0 0,
30
+ 1rem 1rem;
27
31
  background-repeat: repeat;
28
32
  background-size: 2rem 2rem;
29
33
 
30
- &.is-coin {
31
- --#{variables.$prefix}dot-size: 30%;
32
- }
34
+ @if (not variables.$is-skelton) {
35
+ &.is-coin {
36
+ --#{variables.$prefix}dot-size: 30%;
37
+ }
33
38
 
34
- &.is-polka {
35
- --#{variables.$prefix}dot-size: 20%;
36
- }
39
+ &.is-polka {
40
+ --#{variables.$prefix}dot-size: 20%;
41
+ }
37
42
 
38
- &.is-pin {
39
- --#{variables.$prefix}dot-size: 10%;
40
- }
43
+ &.is-pin {
44
+ --#{variables.$prefix}dot-size: 10%;
45
+ }
41
46
 
42
- @if (not variables.$is-skelton) {
43
47
  @each $color in variables.$colors {
44
48
  $colorName: map.get($color, "name");
45
49
  &.is-#{$colorName} {
46
50
  --#{variables.$prefix}dot-color-fore: oklch(
47
- var(--#{variables.$prefix}color-#{$colorName}-dot-fore-oklch) / 0.5
51
+ from var(--#{variables.$prefix}color-#{$colorName}-dot-fore)
52
+ l
53
+ c
54
+ h /
55
+ 0.5
56
+ );
57
+ --#{variables.$prefix}dot-color-back: var(
58
+ --#{variables.$prefix}color-#{$colorName}-dot-back
59
+ );
60
+ }
61
+ }
62
+
63
+ @each $semanticColor in variables.$semanticColors {
64
+ $colorName: map.get($semanticColor, "name");
65
+ &.is-#{$colorName} {
66
+ --#{variables.$prefix}dot-color-fore: oklch(
67
+ from var(--#{variables.$prefix}color-#{$colorName}-dot-fore)
68
+ l
69
+ c
70
+ h /
71
+ 0.5
48
72
  );
49
73
  --#{variables.$prefix}dot-color-back: var(
50
74
  --#{variables.$prefix}color-#{$colorName}-dot-back
package/src/backgrounds/gingham.scss CHANGED
@@ -2,9 +2,9 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .gingham {
5
+ :where(.gingham) {
6
6
  --#{variables.$prefix}gingham-color-fore: oklch(
7
- var(--#{variables.$prefix}color-default-gingham-fore-oklch) / 0.5
7
+ from var(--#{variables.$prefix}color-default-gingham-fore) l c h / 0.5
8
8
  );
9
9
  --#{variables.$prefix}gingham-color-back: var(
10
10
  --#{variables.$prefix}color-default-gingham-back
@@ -14,38 +14,55 @@
14
14
  @include mixins.element();
15
15
  background-size: auto auto;
16
16
  background-color: var(--#{variables.$prefix}gingham-color-back);
17
- background-image: repeating-linear-gradient(
17
+ background-image:
18
+ repeating-linear-gradient(
18
19
  var(--#{variables.$prefix}gingham-degree),
19
20
  transparent,
20
21
  transparent 0.75rem,
21
- var(--#{variables.$prefix}gingham-color-fore)
22
- 0.75rem,
23
- var(--#{variables.$prefix}gingham-color-fore)
24
- 1.5rem
22
+ var(--#{variables.$prefix}gingham-color-fore) 0.75rem,
23
+ var(--#{variables.$prefix}gingham-color-fore) 1.5rem
25
24
  ),
26
25
  repeating-linear-gradient(
27
26
  calc(var(--#{variables.$prefix}gingham-degree) + 90deg),
28
27
  transparent,
29
28
  transparent 0.75rem,
30
- var(--#{variables.$prefix}gingham-color-fore)
31
- 0.75rem,
32
- var(--#{variables.$prefix}gingham-color-fore)
33
- 1.5rem
29
+ var(--#{variables.$prefix}gingham-color-fore) 0.75rem,
30
+ var(--#{variables.$prefix}gingham-color-fore) 1.5rem
34
31
  );
35
32
 
36
- @for $n from 0 through 6 {
37
- $degree: $n * 15deg;
38
- &.is-#{$degree} {
39
- --#{variables.$prefix}gingham-degree: #{$degree};
33
+ @if (not variables.$is-skelton) {
34
+ @for $n from 0 through 6 {
35
+ $degree: $n * 15deg;
36
+ &.is-#{$degree} {
37
+ --#{variables.$prefix}gingham-degree: #{$degree};
38
+ }
40
39
  }
41
- }
42
40
 
43
- @if (not variables.$is-skelton) {
44
41
  @each $color in variables.$colors {
45
42
  $colorName: map.get($color, "name");
46
43
  &.is-#{$colorName} {
47
44
  --#{variables.$prefix}gingham-color-fore: oklch(
48
- var(--#{variables.$prefix}color-#{$colorName}-gingham-fore-oklch) / 0.5
45
+ from var(--#{variables.$prefix}color-#{$colorName}-gingham-fore)
46
+ l
47
+ c
48
+ h /
49
+ 0.5
50
+ );
51
+ --#{variables.$prefix}gingham-color-back: var(
52
+ --#{variables.$prefix}color-#{$colorName}-gingham-back
53
+ );
54
+ }
55
+ }
56
+
57
+ @each $semanticColor in variables.$semanticColors {
58
+ $colorName: map.get($semanticColor, "name");
59
+ &.is-#{$colorName} {
60
+ --#{variables.$prefix}gingham-color-fore: oklch(
61
+ from var(--#{variables.$prefix}color-#{$colorName}-gingham-fore)
62
+ l
63
+ c
64
+ h /
65
+ 0.5
49
66
  );
50
67
  --#{variables.$prefix}gingham-color-back: var(
51
68
  --#{variables.$prefix}color-#{$colorName}-gingham-back
package/src/backgrounds/rhombus.scss CHANGED
@@ -2,12 +2,9 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- @mixin rhombus($fore, $back) {
6
- }
7
-
8
- .rhombus {
5
+ :where(.rhombus) {
9
6
  --#{variables.$prefix}rhombus-color-fore: oklch(
10
- var(--#{variables.$prefix}color-default-rhombus-fore-oklch) / 0.5
7
+ from var(--#{variables.$prefix}color-default-rhombus-fore) l c h / 0.5
11
8
  );
12
9
  --#{variables.$prefix}rhombus-color-back: var(
13
10
  --#{variables.$prefix}color-default-rhombus-back
@@ -17,28 +14,70 @@
17
14
  @include mixins.element();
18
15
 
19
16
  background-color: var(--#{variables.$prefix}rhombus-color-back);
20
- background-image: linear-gradient(135deg, var(--#{variables.$prefix}rhombus-color-fore) 25%, transparent 25%),
21
- linear-gradient(225deg, var(--#{variables.$prefix}rhombus-color-fore) 25%, transparent 25%),
22
- linear-gradient(45deg, var(--#{variables.$prefix}rhombus-color-fore) 25%, transparent 25%),
23
- linear-gradient(315deg, var(--#{variables.$prefix}rhombus-color-fore) 25%, var(--#{variables.$prefix}rhombus-color-back) 25%);
24
- background-position: var(--#{variables.$prefix}rhombus-size) 0, var(--#{variables.$prefix}rhombus-size) 0, 0 0, 0 0;
25
- background-size: var(--#{variables.$prefix}rhombus-size) var(--#{variables.$prefix}rhombus-size);
17
+ background-image:
18
+ linear-gradient(
19
+ 135deg,
20
+ var(--#{variables.$prefix}rhombus-color-fore) 25%,
21
+ transparent 25%
22
+ ),
23
+ linear-gradient(
24
+ 225deg,
25
+ var(--#{variables.$prefix}rhombus-color-fore) 25%,
26
+ transparent 25%
27
+ ),
28
+ linear-gradient(
29
+ 45deg,
30
+ var(--#{variables.$prefix}rhombus-color-fore) 25%,
31
+ transparent 25%
32
+ ),
33
+ linear-gradient(
34
+ 315deg,
35
+ var(--#{variables.$prefix}rhombus-color-fore) 25%,
36
+ var(--#{variables.$prefix}rhombus-color-back) 25%
37
+ );
38
+ background-position:
39
+ var(--#{variables.$prefix}rhombus-size) 0,
40
+ var(--#{variables.$prefix}rhombus-size) 0,
41
+ 0 0,
42
+ 0 0;
43
+ background-size: var(--#{variables.$prefix}rhombus-size)
44
+ var(--#{variables.$prefix}rhombus-size);
26
45
  background-repeat: repeat;
27
46
 
28
- &.is-small {
29
- --#{variables.$prefix}rhombus-size: 0.5rem;
30
- }
47
+ @if (not variables.$is-skelton) {
48
+ &.is-small {
49
+ --#{variables.$prefix}rhombus-size: 0.5rem;
50
+ }
31
51
 
32
- &.is-large {
33
- --#{variables.$prefix}rhombus-size: 2rem;
34
- }
52
+ &.is-large {
53
+ --#{variables.$prefix}rhombus-size: 2rem;
54
+ }
35
55
 
36
- @if (not variables.$is-skelton) {
37
56
  @each $color in variables.$colors {
38
57
  $colorName: map.get($color, "name");
39
58
  &.is-#{$colorName} {
40
59
  --#{variables.$prefix}rhombus-color-fore: oklch(
41
- var(--#{variables.$prefix}color-#{$colorName}-rhombus-fore-oklch) / 0.5
60
+ from var(--#{variables.$prefix}color-#{$colorName}-rhombus-fore)
61
+ l
62
+ c
63
+ h /
64
+ 0.5
65
+ );
66
+ --#{variables.$prefix}rhombus-color-back: var(
67
+ --#{variables.$prefix}color-#{$colorName}-rhombus-back
68
+ );
69
+ }
70
+ }
71
+
72
+ @each $semanticColor in variables.$semanticColors {
73
+ $colorName: map.get($semanticColor, "name");
74
+ &.is-#{$colorName} {
75
+ --#{variables.$prefix}rhombus-color-fore: oklch(
76
+ from var(--#{variables.$prefix}color-#{$colorName}-rhombus-fore)
77
+ l
78
+ c
79
+ h /
80
+ 0.5
42
81
  );
43
82
  --#{variables.$prefix}rhombus-color-back: var(
44
83
  --#{variables.$prefix}color-#{$colorName}-rhombus-back
package/src/backgrounds/stripe.scss CHANGED
@@ -2,9 +2,10 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .stripe {
5
+ :where(.stripe) {
6
6
  --#{variables.$prefix}stripe-color-fore: oklch(
7
- var(--#{variables.$prefix}color-default-stripe-fore-oklch) / 0.5
7
+ from var(--#{variables.$prefix}color-default-stripe-fore) l c h /
8
+ 0.5
8
9
  );
9
10
  --#{variables.$prefix}stripe-color-back: var(
10
11
  --#{variables.$prefix}color-default-stripe-back
@@ -22,19 +23,39 @@
22
23
  var(--#{variables.$prefix}stripe-color-fore) 1.5rem
23
24
  );
24
25
 
25
- @for $n from 0 through 24 {
26
- $degree: $n * 15deg;
27
- &.is-#{$degree} {
28
- --#{variables.$prefix}stripe-degree: #{$degree};
26
+ @if (not variables.$is-skelton) {
27
+ @for $n from 0 through 24 {
28
+ $degree: $n * 15deg;
29
+ &.is-#{$degree} {
30
+ --#{variables.$prefix}stripe-degree: #{$degree};
31
+ }
29
32
  }
30
- }
31
33
 
32
- @if (not variables.$is-skelton) {
33
34
  @each $color in variables.$colors {
34
35
  $colorName: map.get($color, "name");
35
36
  &.is-#{$colorName} {
36
37
  --#{variables.$prefix}stripe-color-fore: oklch(
37
- var(--#{variables.$prefix}color-#{$colorName}-stripe-fore-oklch) / 0.5
38
+ from var(--#{variables.$prefix}color-#{$colorName}-stripe-fore)
39
+ l
40
+ c
41
+ h /
42
+ 0.5
43
+ );
44
+ --#{variables.$prefix}stripe-color-back: var(
45
+ --#{variables.$prefix}color-#{$colorName}-stripe-back
46
+ );
47
+ }
48
+ }
49
+
50
+ @each $semanticColor in variables.$semanticColors {
51
+ $colorName: map.get($semanticColor, "name");
52
+ &.is-#{$colorName} {
53
+ --#{variables.$prefix}stripe-color-fore: oklch(
54
+ from var(--#{variables.$prefix}color-#{$colorName}-stripe-fore)
55
+ l
56
+ c
57
+ h /
58
+ 0.5
38
59
  );
39
60
  --#{variables.$prefix}stripe-color-back: var(
40
61
  --#{variables.$prefix}color-#{$colorName}-stripe-back
package/src/backgrounds/zigzag.scss CHANGED
@@ -2,10 +2,11 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .zigzag {
5
+ :where(.zigzag) {
6
6
  --#{variables.$prefix}zigzag-size: 1rem;
7
7
  --#{variables.$prefix}zigzag-color-fore: oklch(
8
- var(--#{variables.$prefix}color-default-zigzag-fore-oklch) / 0.5
8
+ from var(--#{variables.$prefix}color-default-zigzag-fore) l c h /
9
+ 0.5
9
10
  );
10
11
  --#{variables.$prefix}zigzag-color-back: var(
11
12
  --#{variables.$prefix}color-default-zigzag-back
@@ -14,7 +15,8 @@
14
15
  @include mixins.element();
15
16
 
16
17
  background-color: var(--#{variables.$prefix}zigzag-color-back);
17
- background-image: linear-gradient(
18
+ background-image:
19
+ linear-gradient(
18
20
  calc(45deg * 3),
19
21
  var(--#{variables.$prefix}zigzag-color-fore) 25%,
20
22
  transparent 25%
@@ -34,33 +36,56 @@
34
36
  var(--#{variables.$prefix}zigzag-color-fore) 25%,
35
37
  var(--#{variables.$prefix}zigzag-color-back) 25%
36
38
  );
37
- background-position: var(--#{variables.$prefix}zigzag-size) 0,
38
- var(--#{variables.$prefix}zigzag-size) 0, 0 0, 0 0;
39
+ background-position:
40
+ var(--#{variables.$prefix}zigzag-size) 0,
41
+ var(--#{variables.$prefix}zigzag-size) 0,
42
+ 0 0,
43
+ 0 0;
39
44
  background-size: calc(var(--#{variables.$prefix}zigzag-size) * 2)
40
45
  calc(var(--#{variables.$prefix}zigzag-size) * 2);
41
46
  background-repeat: repeat;
42
47
 
43
- &.is-small {
44
- --#{variables.$prefix}zigzag-size: 0.5rem;
45
- }
48
+ @if (not variables.$is-skelton) {
49
+ &.is-small {
50
+ --#{variables.$prefix}zigzag-size: 0.5rem;
51
+ }
46
52
 
47
- &.is-large {
48
- --#{variables.$prefix}zigzag-size: 4rem;
49
- }
53
+ &.is-large {
54
+ --#{variables.$prefix}zigzag-size: 4rem;
55
+ }
50
56
 
51
- @for $n from 0 through 24 {
52
- $degree: $n * 15deg;
53
- &.is-#{$degree} {
54
- --#{variables.$prefix}zigzag-degree: #{$degree};
57
+ @for $n from 0 through 24 {
58
+ $degree: $n * 15deg;
59
+ &.is-#{$degree} {
60
+ --#{variables.$prefix}zigzag-degree: #{$degree};
61
+ }
55
62
  }
56
- }
57
63
 
58
- @if (not variables.$is-skelton) {
59
64
  @each $color in variables.$colors {
60
65
  $colorName: map.get($color, "name");
61
66
  &.is-#{$colorName} {
62
67
  --#{variables.$prefix}zigzag-color-fore: oklch(
63
- var(--#{variables.$prefix}color-#{$colorName}-zigzag-fore-oklch) / 0.5
68
+ from var(--#{variables.$prefix}color-#{$colorName}-zigzag-fore)
69
+ l
70
+ c
71
+ h /
72
+ 0.5
73
+ );
74
+ --#{variables.$prefix}zigzag-color-back: var(
75
+ --#{variables.$prefix}color-#{$colorName}-zigzag-back
76
+ );
77
+ }
78
+ }
79
+
80
+ @each $semanticColor in variables.$semanticColors {
81
+ $colorName: map.get($semanticColor, "name");
82
+ &.is-#{$colorName} {
83
+ --#{variables.$prefix}zigzag-color-fore: oklch(
84
+ from var(--#{variables.$prefix}color-#{$colorName}-zigzag-fore)
85
+ l
86
+ c
87
+ h /
88
+ 0.5
64
89
  );
65
90
  --#{variables.$prefix}zigzag-color-back: var(
66
91
  --#{variables.$prefix}color-#{$colorName}-zigzag-back
package/src/base/dub.scss CHANGED
@@ -1,9 +1,22 @@
1
1
  @use "../variables/index.scss" as variables;
2
2
 
3
- .dub {
3
+ :where(.dub) {
4
+ --#{variables.$prefix}dub-color-fore: var(
5
+ --#{variables.$prefix}color-default-fore
6
+ );
7
+ --#{variables.$prefix}dub-color-back: var(
8
+ --#{variables.$prefix}color-default-back
9
+ );
10
+ --#{variables.$prefix}dub-color-selection-fore: var(
11
+ --#{variables.$prefix}color-default-selection-fore
12
+ );
13
+ --#{variables.$prefix}dub-color-selection-back: var(
14
+ --#{variables.$prefix}color-default-selection-back
15
+ );
16
+
4
17
  color: var(--#{variables.$prefix}color-default-fore);
5
18
  background-color: var(--#{variables.$prefix}color-default-back);
6
19
  font-family: var(--#{variables.$prefix}font-family-main);
7
- z-index: var(--#{variables.$prefix}z-index-tabula);
20
+ z-index: var(--#{variables.$prefix}z-index-dub);
8
21
  text-size-adjust: 100%;
9
22
  }
package/src/base/element.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use "../mixins/index.scss" as mixins;
2
2
 
3
- .element {
3
+ :where(.element) {
4
4
  @include mixins.element();
5
5
  }