@microsoft/atlas-css 5.0.0-test.1 → 5.0.0-test.3

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 (93) hide show
  1. package/dist/index.css.map +1 -1
  2. package/package.json +2 -2
  3. package/src/atomics/aspect-ratio.scss +0 -3
  4. package/src/atomics/background.scss +0 -3
  5. package/src/atomics/border.scss +26 -26
  6. package/src/atomics/colors.scss +53 -53
  7. package/src/atomics/display.scss +9 -9
  8. package/src/atomics/flex.scss +2 -3
  9. package/src/atomics/gap.scss +14 -14
  10. package/src/atomics/height.scss +0 -3
  11. package/src/atomics/image.scss +0 -3
  12. package/src/atomics/line-clamp.scss +5 -6
  13. package/src/atomics/list.scss +0 -3
  14. package/src/atomics/overflow.scss +2 -3
  15. package/src/atomics/position.scss +6 -6
  16. package/src/atomics/shadow.scss +5 -6
  17. package/src/atomics/spacing-auto.scss +4 -5
  18. package/src/atomics/spacing.scss +14 -14
  19. package/src/atomics/typography.scss +39 -39
  20. package/src/atomics/visually-hidden.scss +2 -3
  21. package/src/atomics/width.scss +3 -4
  22. package/src/components/accordion.scss +18 -17
  23. package/src/components/badge.scss +20 -21
  24. package/src/components/banner.scss +18 -18
  25. package/src/components/breadcrumbs.scss +3 -4
  26. package/src/components/button-reset.scss +2 -3
  27. package/src/components/button.scss +54 -55
  28. package/src/components/buttons.scss +9 -9
  29. package/src/components/card.scss +30 -30
  30. package/src/components/code-block.scss +18 -18
  31. package/src/components/form/checkbox.scss +18 -18
  32. package/src/components/form/form.scss +15 -15
  33. package/src/components/form/help.scss +5 -6
  34. package/src/components/form/input.scss +26 -26
  35. package/src/components/form/label.scss +4 -5
  36. package/src/components/form/radio.scss +18 -18
  37. package/src/components/form/select.scss +28 -26
  38. package/src/components/form/textarea.scss +27 -27
  39. package/src/components/gradient-card.scss +7 -7
  40. package/src/components/gradient.scss +10 -10
  41. package/src/components/hero.scss +31 -31
  42. package/src/components/icon.scss +0 -3
  43. package/src/components/image.scss +3 -4
  44. package/src/components/layout.scss +66 -72
  45. package/src/components/link-button.scss +8 -8
  46. package/src/components/markdown.scss +14 -14
  47. package/src/components/media.scss +2 -3
  48. package/src/components/message.scss +13 -14
  49. package/src/components/notification.scss +21 -21
  50. package/src/components/pagination.scss +28 -28
  51. package/src/components/persona.scss +13 -14
  52. package/src/components/popover.scss +15 -15
  53. package/src/components/progress-bar.scss +13 -13
  54. package/src/components/reading-width.scss +4 -4
  55. package/src/components/scroll.scss +0 -3
  56. package/src/components/segmented-control.scss +31 -31
  57. package/src/components/site-header.scss +36 -36
  58. package/src/components/steps.scss +5 -6
  59. package/src/components/stretched-link.scss +2 -3
  60. package/src/components/table.scss +18 -18
  61. package/src/components/tag.scss +36 -37
  62. package/src/components/timeline.scss +15 -16
  63. package/src/components/toggle.scss +17 -17
  64. package/src/core/animations.scss +3 -4
  65. package/src/core/bare-elements.scss +5 -6
  66. package/src/core/focus.scss +6 -6
  67. package/src/core/font-stack.scss +7 -8
  68. package/src/core/minireset.scss +0 -3
  69. package/src/core/normalize.scss +0 -3
  70. package/src/core/themes.scss +19 -20
  71. package/src/mixins/center.scss +0 -2
  72. package/src/mixins/chevron.scss +5 -5
  73. package/src/mixins/code-block.scss +9 -9
  74. package/src/mixins/colors.scss +0 -2
  75. package/src/mixins/control.scss +5 -5
  76. package/src/mixins/dismiss.scss +4 -4
  77. package/src/mixins/focus.scss +5 -5
  78. package/src/mixins/font-size.scss +4 -4
  79. package/src/mixins/force-colors.scss +0 -2
  80. package/src/mixins/gradient.scss +0 -2
  81. package/src/mixins/layout-gap.scss +5 -5
  82. package/src/mixins/line-clamp.scss +0 -2
  83. package/src/mixins/loader.scss +3 -3
  84. package/src/mixins/media-queries.scss +5 -5
  85. package/src/mixins/overlay.scss +0 -2
  86. package/src/mixins/transparency.scss +0 -2
  87. package/src/mixins/unselectable.scss +0 -2
  88. package/src/mixins/visually-hidden.scss +0 -2
  89. package/src/tokens/colors.scss +2 -2
  90. package/src/tokens/layout.scss +2 -2
  91. package/src/tokens/shadow.scss +9 -8
  92. package/src/tokens/themes.scss +473 -473
  93. package/tokens/index.js +4 -1
package/src/atomics/spacing.scss CHANGED
@@ -1,5 +1,5 @@
1
- @use '../tokens/index.scss' as *;
2
- @use '../mixins/index.scss' as *;
1
+ @use '../tokens/index.scss' as tokens;
2
+ @use '../mixins/index.scss' as mixins;
3
3
 
4
4
  $separator: '-' !default;
5
5
  $logical-spacing-properties: (
@@ -20,15 +20,15 @@ $logical-spacing-properties: (
20
20
  ) !default;
21
21
 
22
22
  $layout-sizes: (
23
- ('xxs', $layout-1),
24
- ('xs', $layout-2),
25
- ('sm', $layout-3),
26
- ('md', $layout-4),
27
- ('lg', $layout-5),
28
- ('xl', $layout-6),
29
- ('xxl', $layout-7),
30
- ('xxxl', $layout-8),
31
- ('none', $layout-0)
23
+ ('xxs', tokens.$layout-1),
24
+ ('xs', tokens.$layout-2),
25
+ ('sm', tokens.$layout-3),
26
+ ('md', tokens.$layout-4),
27
+ ('lg', tokens.$layout-5),
28
+ ('xl', tokens.$layout-6),
29
+ ('xxl', tokens.$layout-7),
30
+ ('xxxl', tokens.$layout-8),
31
+ ('none', tokens.$layout-0)
32
32
  );
33
33
 
34
34
  @function sizeValue($key, $value) {
@@ -52,7 +52,7 @@ $layout-sizes: (
52
52
  }
53
53
  }
54
54
 
55
- @include tablet {
55
+ @include mixins.tablet {
56
56
  @each $property in $logical-spacing-properties {
57
57
  $classicProp: nth($property, 1);
58
58
  $logicalProp: nth($property, 2);
@@ -68,7 +68,7 @@ $layout-sizes: (
68
68
  }
69
69
  }
70
70
 
71
- @include desktop {
71
+ @include mixins.desktop {
72
72
  @each $property in $logical-spacing-properties {
73
73
  $classicProp: nth($property, 1);
74
74
  $logicalProp: nth($property, 2);
@@ -84,7 +84,7 @@ $layout-sizes: (
84
84
  }
85
85
  }
86
86
 
87
- @include widescreen {
87
+ @include mixins.widescreen {
88
88
  @each $property in $logical-spacing-properties {
89
89
  $classicProp: nth($property, 1);
90
90
  $logicalProp: nth($property, 2);
package/src/atomics/typography.scss CHANGED
@@ -1,148 +1,148 @@
1
- @use '../tokens/index.scss' as *;
2
- @use '../mixins/index.scss' as *;
1
+ @use '../tokens/index.scss' as tokens;
2
+ @use '../mixins/index.scss' as mixins;
3
3
 
4
4
  // Font family
5
5
 
6
6
  .font-family-monospace {
7
- font-family: $monospace-font-stack !important;
7
+ font-family: tokens.$monospace-font-stack !important;
8
8
  -moz-osx-font-smoothing: auto;
9
9
  -webkit-font-smoothing: auto;
10
10
  }
11
11
 
12
12
  .font-family-quote {
13
- font-family: $quote-font-stack !important;
13
+ font-family: tokens.$quote-font-stack !important;
14
14
  }
15
15
 
16
16
  // Heading sizes
17
17
 
18
18
  .font-size-h0 {
19
- font-size: $font-size-0 !important;
19
+ font-size: tokens.$font-size-0 !important;
20
20
  }
21
21
 
22
22
  .font-size-h1 {
23
- font-size: $font-size-1 !important;
23
+ font-size: tokens.$font-size-1 !important;
24
24
  }
25
25
 
26
26
  .font-size-h2 {
27
- font-size: $font-size-2 !important;
27
+ font-size: tokens.$font-size-2 !important;
28
28
  }
29
29
 
30
30
  .font-size-h3 {
31
- font-size: $font-size-3 !important;
31
+ font-size: tokens.$font-size-3 !important;
32
32
  }
33
33
 
34
34
  .font-size-h4 {
35
- font-size: $font-size-4 !important;
35
+ font-size: tokens.$font-size-4 !important;
36
36
  }
37
37
 
38
38
  .font-size-h5 {
39
- font-size: $font-size-5 !important;
39
+ font-size: tokens.$font-size-5 !important;
40
40
  }
41
41
 
42
42
  .font-size-h6 {
43
- font-size: $font-size-6 !important;
43
+ font-size: tokens.$font-size-6 !important;
44
44
  }
45
45
 
46
- @include tablet {
46
+ @include mixins.tablet {
47
47
  .font-size-h0-tablet {
48
- font-size: $font-size-0 !important;
48
+ font-size: tokens.$font-size-0 !important;
49
49
  }
50
50
 
51
51
  .font-size-h1-tablet {
52
- font-size: $font-size-1 !important;
52
+ font-size: tokens.$font-size-1 !important;
53
53
  }
54
54
 
55
55
  .font-size-h2-tablet {
56
- font-size: $font-size-2 !important;
56
+ font-size: tokens.$font-size-2 !important;
57
57
  }
58
58
 
59
59
  .font-size-h3-tablet {
60
- font-size: $font-size-3 !important;
60
+ font-size: tokens.$font-size-3 !important;
61
61
  }
62
62
 
63
63
  .font-size-h4-tablet {
64
- font-size: $font-size-4 !important;
64
+ font-size: tokens.$font-size-4 !important;
65
65
  }
66
66
 
67
67
  .font-size-h5-tablet {
68
- font-size: $font-size-5 !important;
68
+ font-size: tokens.$font-size-5 !important;
69
69
  }
70
70
 
71
71
  .font-size-h6-tablet {
72
- font-size: $font-size-6 !important;
72
+ font-size: tokens.$font-size-6 !important;
73
73
  }
74
74
  }
75
75
 
76
76
  // Non-heading sizes
77
77
 
78
78
  .font-size-xxl {
79
- font-size: $font-size-4 !important;
79
+ font-size: tokens.$font-size-4 !important;
80
80
  }
81
81
 
82
82
  .font-size-xl {
83
- font-size: $font-size-5 !important;
83
+ font-size: tokens.$font-size-5 !important;
84
84
  }
85
85
 
86
86
  .font-size-lg {
87
- font-size: $font-size-6 !important;
87
+ font-size: tokens.$font-size-6 !important;
88
88
  }
89
89
 
90
90
  .font-size-md {
91
- font-size: $font-size-7 !important;
91
+ font-size: tokens.$font-size-7 !important;
92
92
  }
93
93
 
94
94
  .font-size-sm {
95
- font-size: $font-size-8 !important;
95
+ font-size: tokens.$font-size-8 !important;
96
96
  }
97
97
 
98
98
  .font-size-xs {
99
- font-size: $font-size-9 !important;
99
+ font-size: tokens.$font-size-9 !important;
100
100
  }
101
101
 
102
102
  // Non-heading sizes
103
103
 
104
- @include tablet {
104
+ @include mixins.tablet {
105
105
  .font-size-xl-tablet {
106
- font-size: $font-size-5 !important;
106
+ font-size: tokens.$font-size-5 !important;
107
107
  }
108
108
 
109
109
  .font-size-lg-tablet {
110
- font-size: $font-size-6 !important;
110
+ font-size: tokens.$font-size-6 !important;
111
111
  }
112
112
 
113
113
  .font-size-md-tablet {
114
- font-size: $font-size-7 !important;
114
+ font-size: tokens.$font-size-7 !important;
115
115
  }
116
116
 
117
117
  .font-size-sm-tablet {
118
- font-size: $font-size-8 !important;
118
+ font-size: tokens.$font-size-8 !important;
119
119
  }
120
120
 
121
121
  .font-size-xs-tablet {
122
- font-size: $font-size-9 !important;
122
+ font-size: tokens.$font-size-9 !important;
123
123
  }
124
124
  }
125
125
 
126
126
  // Weight
127
127
 
128
128
  .font-weight-light {
129
- font-weight: $weight-light !important;
129
+ font-weight: tokens.$weight-light !important;
130
130
  }
131
131
 
132
132
  .font-weight-semilight {
133
- font-weight: $weight-semilight !important;
133
+ font-weight: tokens.$weight-semilight !important;
134
134
  }
135
135
 
136
136
  .font-weight-normal {
137
- font-weight: $weight-normal !important;
137
+ font-weight: tokens.$weight-normal !important;
138
138
  }
139
139
 
140
140
  .font-weight-semibold {
141
- font-weight: $weight-semibold !important;
141
+ font-weight: tokens.$weight-semibold !important;
142
142
  }
143
143
 
144
144
  .font-weight-bold {
145
- font-weight: $weight-bold !important;
145
+ font-weight: tokens.$weight-bold !important;
146
146
  }
147
147
 
148
148
  // Case
@@ -162,7 +162,7 @@
162
162
  // Letter Spacing
163
163
 
164
164
  .letter-spacing-wide {
165
- letter-spacing: $letter-spacing-wide !important;
165
+ letter-spacing: tokens.$letter-spacing-wide !important;
166
166
  }
167
167
 
168
168
  .text-transform-uppercase {
@@ -183,7 +183,7 @@
183
183
  text-align: end !important;
184
184
  }
185
185
 
186
- @include tablet {
186
+ @include mixins.tablet {
187
187
  .text-align-left-tablet {
188
188
  text-align: start !important;
189
189
  }
@@ -210,7 +210,7 @@
210
210
  // Line height
211
211
 
212
212
  .line-height-normal {
213
- line-height: $line-height-normal !important;
213
+ line-height: tokens.$line-height-normal !important;
214
214
  }
215
215
 
216
216
  // White space
package/src/atomics/visually-hidden.scss CHANGED
@@ -1,7 +1,6 @@
1
- @use '../tokens/index.scss' as *;
2
- @use '../mixins/index.scss' as *;
1
+ @use '../mixins/index.scss' as mixins;
3
2
 
4
3
  .visually-hidden,
5
4
  ::part(visually-hidden) {
6
- @include visually-hidden();
5
+ @include mixins.visually-hidden();
7
6
  }
package/src/atomics/width.scss CHANGED
@@ -1,6 +1,5 @@
1
1
  @use 'sass:list';
2
- @use '../tokens/index.scss' as *;
3
- @use '../mixins/index.scss' as *;
2
+ @use '../mixins/index.scss' as mixins;
4
3
 
5
4
  $universal-widths: auto, fit-content, 100, 150, 200, 250, 300, 350 !default;
6
5
  $mobile-incompatible-widths: 400, 450, 500, unset !default;
@@ -19,7 +18,7 @@ $all-widths: list.join($universal-widths, $mobile-incompatible-widths);
19
18
  }
20
19
  }
21
20
 
22
- @include tablet {
21
+ @include mixins.tablet {
23
22
  .width-full-tablet {
24
23
  width: 100% !important;
25
24
  }
@@ -32,7 +31,7 @@ $all-widths: list.join($universal-widths, $mobile-incompatible-widths);
32
31
  }
33
32
  }
34
33
 
35
- @include desktop {
34
+ @include mixins.desktop {
36
35
  .width-full-desktop {
37
36
  width: 100% !important;
38
37
  }
package/src/components/accordion.scss CHANGED
@@ -1,14 +1,14 @@
1
- @use '../tokens/index.scss' as *;
2
- @use '../mixins/index.scss' as *;
1
+ @use '../tokens/index.scss' as tokens;
2
+ @use '../mixins/index.scss' as mixins;
3
3
 
4
- $accordion-font-size-sm: $font-size-9 !default;
5
- $accordion-font-size-md: $font-size-8 !default;
6
- $accordion-font-size-lg: $font-size-7 !default;
7
- $accordion-font-size-xl: $font-size-6 !default;
8
- $accordion-font-size-xxl: $font-size-5 !default;
4
+ $accordion-font-size-sm: tokens.$font-size-9 !default;
5
+ $accordion-font-size-md: tokens.$font-size-8 !default;
6
+ $accordion-font-size-lg: tokens.$font-size-7 !default;
7
+ $accordion-font-size-xl: tokens.$font-size-6 !default;
8
+ $accordion-font-size-xxl: tokens.$font-size-5 !default;
9
9
 
10
- $accordion-gap: $layout-2 !default;
11
- $accordion-spacing: $spacer-4 !default;
10
+ $accordion-gap: tokens.$layout-2 !default;
11
+ $accordion-spacing: tokens.$spacer-4 !default;
12
12
  $accordion-transition: transform 0.15s !default;
13
13
 
14
14
  // Spacing and font-size
@@ -62,48 +62,49 @@ $accordion-transition: transform 0.15s !default;
62
62
 
63
63
  &:not(.accordion-icon-end) {
64
64
  summary::before {
65
- @include chevron-right;
65
+ @include mixins.chevron-right;
66
66
 
67
67
  transition: $accordion-transition;
68
68
  }
69
69
 
70
70
  &:dir(rtl) summary::before {
71
- @include chevron-right-rtl;
71
+ @include mixins.chevron-right-rtl;
72
72
  }
73
73
  }
74
74
 
75
75
  &.accordion-icon-end {
76
76
  summary::after {
77
- @include chevron-down;
77
+ @include mixins.chevron-down;
78
78
 
79
79
  transition: $accordion-transition;
80
80
  }
81
81
 
82
82
  &:dir(rtl) summary::after {
83
- @include chevron-down-rtl;
83
+ @include mixins.chevron-down-rtl;
84
84
  }
85
85
  }
86
86
 
87
87
  &[open] {
88
88
  &:not(.accordion-icon-end) {
89
89
  summary::before {
90
- transform: $chevron-down-rotate translate(calc($chevron-arrow-size / 2), 0);
90
+ transform: mixins.$chevron-down-rotate translate(calc(mixins.$chevron-arrow-size / 2), 0);
91
91
  }
92
92
 
93
93
  /* stylelint-disable-next-line selector-max-specificity, rule-empty-line-before */
94
94
  &:dir(rtl) summary::before {
95
- transform: $chevron-down-rotate-rtl translate(calc($chevron-arrow-size / 2 * -1), 0);
95
+ transform: mixins.$chevron-down-rotate-rtl
96
+ translate(calc(mixins.$chevron-arrow-size / 2 * -1), 0);
96
97
  }
97
98
  }
98
99
 
99
100
  &.accordion-icon-end {
100
101
  summary::after {
101
- transform: $chevron-up-rotate-scale-xy;
102
+ transform: mixins.$chevron-up-rotate-scale-xy;
102
103
  }
103
104
 
104
105
  /* stylelint-disable-next-line selector-max-specificity, rule-empty-line-before */
105
106
  &:dir(rtl) summary::after {
106
- transform: $chevron-up-rotate-scale-xy-rtl;
107
+ transform: mixins.$chevron-up-rotate-scale-xy-rtl;
107
108
  }
108
109
  }
109
110
  }
package/src/components/badge.scss CHANGED
@@ -1,5 +1,4 @@
1
- @use '../tokens/index.scss' as *;
2
- @use '../mixins/index.scss' as *;
1
+ @use '../tokens/index.scss' as tokens;
3
2
 
4
3
  $badge-icon-padding-block: 0.5em !default;
5
4
  $badge-padding-block: 0.25em !default;
@@ -7,35 +6,35 @@ $badge-padding-inline: 0.5em !default;
7
6
 
8
7
  $badge-gap-size: 0.375em !default;
9
8
 
10
- $badge-font-size: $font-size-8 !default;
11
- $badge-font-size-sm: $font-size-9 !default;
12
- $badge-font-size-lg: $font-size-7 !default;
13
- $badge-font-size-xl: $font-size-6 !default;
14
- $badge-font-weight: $weight-semibold !default;
9
+ $badge-font-size: tokens.$font-size-8 !default;
10
+ $badge-font-size-sm: tokens.$font-size-9 !default;
11
+ $badge-font-size-lg: tokens.$font-size-7 !default;
12
+ $badge-font-size-xl: tokens.$font-size-6 !default;
13
+ $badge-font-weight: tokens.$weight-semibold !default;
15
14
 
16
15
  $badge-icon-size: 1.3em !default;
17
16
 
18
- $badge-border-width: $border-width !default;
19
- $badge-border-radius: $border-radius-rounded !default;
17
+ $badge-border-width: tokens.$border-width !default;
18
+ $badge-border-radius: tokens.$border-radius-rounded !default;
20
19
 
21
20
  .badge {
22
21
  display: inline-flex;
23
22
  align-items: center;
24
23
  justify-content: center;
25
24
  padding: $badge-padding-block $badge-padding-inline;
26
- border: $badge-border-width solid $border-white-high-contrast;
25
+ border: $badge-border-width solid tokens.$border-white-high-contrast;
27
26
  border-radius: $badge-border-radius;
28
27
  font-size: $badge-font-size;
29
28
  font-weight: $badge-font-weight;
30
- line-height: $line-height-normal;
29
+ line-height: tokens.$line-height-normal;
31
30
  white-space: nowrap;
32
31
  gap: $badge-gap-size;
33
32
 
34
- @each $name, $color-set in $colors {
35
- $base: nth($color-set, $color-index-base);
36
- $invert: nth($color-set, $color-index-invert);
37
- $dark: nth($color-set, $color-index-dark);
38
- $background: nth($color-set, $color-index-background);
33
+ @each $name, $color-set in tokens.$colors {
34
+ $base: nth($color-set, tokens.$color-index-base);
35
+ $invert: nth($color-set, tokens.$color-index-invert);
36
+ $dark: nth($color-set, tokens.$color-index-dark);
37
+ $background: nth($color-set, tokens.$color-index-background);
39
38
 
40
39
  @if $name == 'secondary' {
41
40
  border-color: $dark;
@@ -56,11 +55,11 @@ $badge-border-radius: $border-radius-rounded !default;
56
55
  }
57
56
 
58
57
  &.badge-filled {
59
- @each $name, $color-set in $colors {
60
- $base: nth($color-set, $color-index-base);
61
- $invert: nth($color-set, $color-index-invert);
62
- $dark: nth($color-set, $color-index-dark);
63
- $background: nth($color-set, $color-index-background);
58
+ @each $name, $color-set in tokens.$colors {
59
+ $base: nth($color-set, tokens.$color-index-base);
60
+ $invert: nth($color-set, tokens.$color-index-invert);
61
+ $dark: nth($color-set, tokens.$color-index-dark);
62
+ $background: nth($color-set, tokens.$color-index-background);
64
63
 
65
64
  @if $name == 'secondary' {
66
65
  border-color: $base;
package/src/components/banner.scss CHANGED
@@ -1,16 +1,16 @@
1
- @use '../tokens/index.scss' as *;
2
- @use '../mixins/index.scss' as *;
1
+ @use '../tokens/index.scss' as tokens;
2
+ @use '../mixins/index.scss' as mixins;
3
3
 
4
- $banner-background: $info-background !default;
5
- $banner-padding: $spacer-5 !default;
4
+ $banner-background: tokens.$info-background !default;
5
+ $banner-padding: tokens.$spacer-5 !default;
6
6
 
7
- $banner-font-size: $font-size-7 !default;
8
- $banner-color: $info-dark !default;
7
+ $banner-font-size: tokens.$font-size-7 !default;
8
+ $banner-color: tokens.$info-dark !default;
9
9
 
10
- $banner-border-color: $border-white-high-contrast !default;
11
- $banner-border-width: $border-width !default;
10
+ $banner-border-color: tokens.$border-white-high-contrast !default;
11
+ $banner-border-width: tokens.$border-width !default;
12
12
 
13
- $banner-dismiss-margin: $spacer-2 !default;
13
+ $banner-dismiss-margin: tokens.$spacer-2 !default;
14
14
 
15
15
  .banner {
16
16
  @extend %layout-gap;
@@ -19,11 +19,11 @@ $banner-dismiss-margin: $spacer-2 !default;
19
19
  position: relative;
20
20
  grid-template: auto / 1fr auto;
21
21
  grid-template-areas: 'banner-content dismiss';
22
- outline-color: $text;
22
+ outline-color: tokens.$text;
23
23
  background-color: $banner-background;
24
24
  color: $banner-color;
25
25
  font-size: $banner-font-size;
26
- line-height: $line-height-normal;
26
+ line-height: tokens.$line-height-normal;
27
27
  padding-block: $banner-padding;
28
28
  word-wrap: break-word;
29
29
  word-break: break-word;
@@ -37,15 +37,15 @@ $banner-dismiss-margin: $spacer-2 !default;
37
37
  }
38
38
 
39
39
  &::before {
40
- @include loader;
40
+ @include mixins.loader;
41
41
 
42
42
  position: absolute;
43
43
  inset-block-start: $banner-padding;
44
- inset-inline-start: $layout-gap;
44
+ inset-inline-start: tokens.$layout-gap;
45
45
  border-color: transparent transparent $banner-color $banner-color;
46
46
 
47
- @include widescreen {
48
- inset-inline-start: $layout-widescreen-gap;
47
+ @include mixins.widescreen {
48
+ inset-inline-start: tokens.$layout-widescreen-gap;
49
49
  }
50
50
  }
51
51
  }
@@ -55,11 +55,11 @@ $banner-dismiss-margin: $spacer-2 !default;
55
55
 
56
56
  a:not(.button) {
57
57
  color: currentColor;
58
- font-weight: $weight-semibold;
58
+ font-weight: tokens.$weight-semibold;
59
59
  text-decoration: underline;
60
60
 
61
61
  .theme-high-contrast & {
62
- color: $hyperlink;
62
+ color: tokens.$hyperlink;
63
63
  }
64
64
 
65
65
  &:hover {
@@ -69,7 +69,7 @@ $banner-dismiss-margin: $spacer-2 !default;
69
69
  }
70
70
 
71
71
  .banner-dismiss {
72
- @include dismiss-square;
72
+ @include mixins.dismiss-square;
73
73
 
74
74
  grid-area: dismiss;
75
75
  margin-inline-start: $banner-dismiss-margin;
package/src/components/breadcrumbs.scss CHANGED
@@ -1,14 +1,13 @@
1
- @use '../tokens/index.scss' as *;
2
- @use '../mixins/index.scss' as *;
1
+ @use '../tokens/index.scss' as tokens;
3
2
 
4
- $breadcrumb-font-size: $font-size-8 !default;
3
+ $breadcrumb-font-size: tokens.$font-size-8 !default;
5
4
  $breadcrumb-spacing-horizontal: 0.25em !default;
6
5
  $breadcrumb-spacing-vertical: 0.375em !default;
7
6
  $breadcrumb-separator: '\00200B/' !default;
8
7
 
9
8
  %breadcrumbs-slash {
10
9
  display: inline-block;
11
- color: $text-subtle;
10
+ color: tokens.$text-subtle;
12
11
  content: $breadcrumb-separator;
13
12
  }
14
13
 
package/src/components/button-reset.scss CHANGED
@@ -1,8 +1,7 @@
1
- @use '../tokens/index.scss' as *;
2
- @use '../mixins/index.scss' as *;
1
+ @use '../mixins/index.scss' as mixins;
3
2
 
4
3
  .button-reset {
5
- @include transparent-effects;
4
+ @include mixins.transparent-effects;
6
5
 
7
6
  display: inline-block;
8
7
  padding: 0;