@microsoft/atlas-css 3.42.1 → 3.44.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 (110) hide show
  1. package/README.md +42 -42
  2. package/dist/class-names.json +1 -1
  3. package/dist/index.css +1 -1
  4. package/dist/index.css.map +1 -1
  5. package/package.json +91 -91
  6. package/src/atomics/README.md +56 -56
  7. package/src/atomics/aspect-ratio.scss +13 -13
  8. package/src/atomics/background.scss +11 -11
  9. package/src/atomics/border.scss +113 -113
  10. package/src/atomics/colors.scss +204 -204
  11. package/src/atomics/display.scss +33 -33
  12. package/src/atomics/flex.scss +74 -71
  13. package/src/atomics/gap.scss +60 -60
  14. package/src/atomics/image.scss +15 -15
  15. package/src/atomics/index.scss +18 -18
  16. package/src/atomics/line-clamp.scss +15 -15
  17. package/src/atomics/list.scss +3 -3
  18. package/src/atomics/overflow.scss +9 -9
  19. package/src/atomics/position.scss +19 -19
  20. package/src/atomics/shadow.scss +19 -19
  21. package/src/atomics/spacing-auto.scss +52 -52
  22. package/src/atomics/spacing.scss +98 -98
  23. package/src/atomics/typography.scss +203 -203
  24. package/src/atomics/visually-hidden.scss +4 -4
  25. package/src/atomics/width.scss +44 -44
  26. package/src/components/README.md +69 -69
  27. package/src/components/banner.scss +69 -69
  28. package/src/components/breadcrumbs.scss +37 -37
  29. package/src/components/button-reset.scss +8 -8
  30. package/src/components/button.scss +241 -241
  31. package/src/components/buttons.scss +93 -93
  32. package/src/components/card.scss +252 -252
  33. package/src/components/form/checkbox.scss +141 -141
  34. package/src/components/form/form.scss +67 -67
  35. package/src/components/form/help.scss +18 -18
  36. package/src/components/form/index.scss +8 -8
  37. package/src/components/form/input.scss +143 -143
  38. package/src/components/form/label.scss +14 -14
  39. package/src/components/form/radio.scss +121 -121
  40. package/src/components/form/select.scss +116 -116
  41. package/src/components/form/textarea.scss +82 -82
  42. package/src/components/gradient-card.scss +14 -14
  43. package/src/components/gradient.scss +85 -85
  44. package/src/components/hero.scss +197 -197
  45. package/src/components/icon.scss +20 -20
  46. package/src/components/image.scss +44 -44
  47. package/src/components/index.scss +27 -26
  48. package/src/components/layout.scss +189 -189
  49. package/src/components/link-button.scss +34 -34
  50. package/src/components/markdown.scss +158 -158
  51. package/src/components/media.scss +22 -22
  52. package/src/components/message.scss +74 -74
  53. package/src/components/notification.scss +101 -101
  54. package/src/components/pagination.scss +183 -183
  55. package/src/components/persona.scss +60 -60
  56. package/src/components/popover.scss +42 -42
  57. package/src/components/scroll.scss +26 -26
  58. package/src/components/segmented-control.scss +128 -0
  59. package/src/components/site-header.scss +255 -255
  60. package/src/components/stretched-link.scss +8 -8
  61. package/src/components/table.scss +114 -114
  62. package/src/components/toggle.scss +86 -86
  63. package/src/core/animations.scss +55 -55
  64. package/src/core/bare-elements.scss +38 -38
  65. package/src/core/focus.scss +45 -45
  66. package/src/core/font-stack.scss +28 -28
  67. package/src/core/index.scss +7 -7
  68. package/src/core/minireset.scss +79 -79
  69. package/src/core/normalize.scss +353 -353
  70. package/src/core/themes.scss +91 -91
  71. package/src/index.scss +5 -5
  72. package/src/mixins/center.scss +11 -11
  73. package/src/mixins/code-block.scss +43 -43
  74. package/src/mixins/colors.scss +6 -6
  75. package/src/mixins/control.scss +43 -43
  76. package/src/mixins/dismiss.scss +22 -22
  77. package/src/mixins/focus.scss +23 -23
  78. package/src/mixins/font-size.scss +35 -35
  79. package/src/mixins/force-colors.scss +5 -5
  80. package/src/mixins/gradient.scss +11 -11
  81. package/src/mixins/index.scss +17 -17
  82. package/src/mixins/layout-gap.scss +7 -7
  83. package/src/mixins/line-clamp.scss +15 -15
  84. package/src/mixins/loader.scss +16 -16
  85. package/src/mixins/media-queries.scss +61 -61
  86. package/src/mixins/overlay.scss +12 -12
  87. package/src/mixins/transparency.scss +15 -15
  88. package/src/mixins/unselectable.scss +13 -13
  89. package/src/mixins/visually-hidden.scss +12 -12
  90. package/src/tokens/animation.scss +8 -8
  91. package/src/tokens/border.scss +12 -12
  92. package/src/tokens/breakpoints.scss +11 -11
  93. package/src/tokens/colors.scss +239 -239
  94. package/src/tokens/direction.scss +25 -25
  95. package/src/tokens/display.scss +5 -5
  96. package/src/tokens/focus.scss +9 -9
  97. package/src/tokens/font-stack.scss +10 -10
  98. package/src/tokens/index.scss +17 -17
  99. package/src/tokens/layout.scss +17 -17
  100. package/src/tokens/palette.scss +200 -200
  101. package/src/tokens/position.scss +5 -5
  102. package/src/tokens/schemes.scss +14 -14
  103. package/src/tokens/shadow.scss +11 -11
  104. package/src/tokens/spacing.scss +25 -25
  105. package/src/tokens/themes.scss +318 -318
  106. package/src/tokens/typography.scss +33 -33
  107. package/src/tokens/z-index.scss +20 -20
  108. package/tokens/README.md +34 -34
  109. package/tokens/index.js +246 -246
  110. package/tokens/types.d.ts +35 -35
package/src/components/site-header.scss CHANGED
@@ -1,255 +1,255 @@
1
- $site-header-height: 3.375em !default;
2
- $site-header-inline-gap: $spacer-3 !default;
3
- $site-header-border: 1px solid $border !default;
4
-
5
- $site-header-font-size: $font-size-7 !default;
6
- $site-header-brand-font-size: 1.25em !default;
7
- $site-header-brand-font-size-sm: 1.15em !default;
8
-
9
- $site-header-control-color: $text !default;
10
-
11
- $site-header-button-font-size: 0.875em !default;
12
- $site-header-button-icon-font-size: 0.875em !default;
13
- $site-header-button-icon-spacing: 0.375em !default;
14
-
15
- $site-header-hover-underline-border-width: 2px !default;
16
- $site-header-hover-underline-border: $site-header-hover-underline-border-width solid
17
- $site-header-control-color !default;
18
-
19
- $site-header-logo-width: 1.625em !default;
20
- $site-header-divider-height: 1.5em !default;
21
-
22
- $site-header-panel-background-color: $body-background-medium !default;
23
- $site-header-panel-min-height: 350px !default;
24
- $site-header-panel-block-padding: $layout-4 !default;
25
- $site-header-panel-gap: $layout-2 !default;
26
- $site-header-panel-content-gap: $spacer-3 !default;
27
- $site-header-panel-shadow: $box-shadow-medium !default;
28
- $site-header-panel-border: 1px solid $border-white-high-contrast !default;
29
- $site-header-panel-featured-section-border: 1px solid $table-border-dark !default;
30
-
31
- %site-header-hover-underline {
32
- > :not(.icon):not(.image) {
33
- position: relative;
34
-
35
- &::after {
36
- display: block;
37
- position: absolute;
38
- content: '';
39
- border-block-end: $site-header-hover-underline-border;
40
- inset-inline-start: 0;
41
- inset-inline-end: 0;
42
- inset-block-end: -$site-header-hover-underline-border-width;
43
- }
44
- }
45
- }
46
-
47
- %site-header-control {
48
- outline-offset: -$focus-width;
49
- color: $site-header-control-color;
50
- text-decoration: none;
51
- white-space: nowrap;
52
- cursor: pointer;
53
- padding-block: $button-padding-vertical;
54
- padding-inline: $site-header-inline-gap;
55
-
56
- &:visited {
57
- color: $site-header-control-color;
58
- }
59
- }
60
-
61
- .site-header {
62
- display: flex;
63
- position: relative;
64
- align-items: center;
65
- height: $site-header-height;
66
- font-size: $site-header-font-size;
67
- border-block-end: $site-header-border;
68
- gap: $site-header-inline-gap;
69
- padding-inline: $layout-gap;
70
-
71
- @include widescreen {
72
- padding-inline: $layout-widescreen-gap;
73
- }
74
-
75
- .site-header-button {
76
- @include control;
77
- @include unselectable;
78
- @extend %site-header-control;
79
-
80
- justify-content: center;
81
- height: 100%;
82
- border: none;
83
- border-radius: 0;
84
- background-color: transparent;
85
- font-size: $site-header-button-font-size;
86
- font-weight: $weight-normal;
87
- text-align: center;
88
-
89
- &[aria-expanded='true'] {
90
- background-color: $site-header-panel-background-color;
91
- }
92
-
93
- .icon {
94
- font-size: $site-header-button-icon-font-size;
95
-
96
- &:only-child {
97
- margin: 0;
98
- }
99
-
100
- /* stylelint-disable-next-line selector-max-specificity, rule-empty-line-before */
101
- &:first-child:not(:only-child) {
102
- margin-inline-end: $site-header-button-icon-spacing;
103
- }
104
-
105
- /* stylelint-disable-next-line selector-max-specificity, rule-empty-line-before */
106
- &:last-child:not(:only-child) {
107
- margin-inline-start: $site-header-button-icon-spacing;
108
- }
109
- }
110
-
111
- &:active,
112
- &.is-active,
113
- &:hover,
114
- &.is-hovered,
115
- &:focus-visible {
116
- &:not([aria-expanded='true']) {
117
- @extend %site-header-hover-underline;
118
- }
119
- }
120
- }
121
-
122
- .site-header-logo {
123
- > svg,
124
- > img {
125
- display: block;
126
- width: $site-header-logo-width;
127
- height: auto;
128
- }
129
-
130
- &.site-header-logo-centered {
131
- position: absolute;
132
- inset-inline-start: calc(50% - $site-header-logo-width / 2);
133
- }
134
- }
135
-
136
- .site-header-divider {
137
- display: inline-block;
138
- height: $site-header-divider-height;
139
- border-inline-start: 2px solid $text-subtle;
140
- margin-inline-start: $site-header-inline-gap;
141
- }
142
-
143
- .site-header-brand {
144
- @extend %site-header-control;
145
-
146
- display: inline-block;
147
- font-size: $site-header-brand-font-size-sm;
148
- font-weight: $weight-semibold;
149
-
150
- &:active,
151
- &.is-active,
152
- &:hover,
153
- &.is-hovered,
154
- &:focus-visible {
155
- @extend %site-header-hover-underline;
156
- }
157
-
158
- @include tablet {
159
- font-size: $site-header-brand-font-size;
160
- }
161
- }
162
-
163
- .site-header-nav {
164
- display: flex;
165
- align-self: center;
166
- width: 100%;
167
- height: 100%;
168
- }
169
-
170
- .site-header-panel {
171
- display: grid;
172
- position: absolute;
173
- width: 100%;
174
- min-height: $site-header-panel-min-height;
175
- grid-gap: $site-header-panel-gap;
176
- grid-template-areas: 'panel-content' 'panel-featured-section';
177
- background-color: $site-header-panel-background-color;
178
- text-wrap: wrap;
179
- box-shadow: $site-header-panel-shadow;
180
- z-index: $zindex-dropdown;
181
- inset-inline-start: 0;
182
- inset-block-start: calc($site-header-height - 1px);
183
- border-block-start: $site-header-panel-border;
184
- border-block-end: $site-header-panel-border;
185
- padding-block: $site-header-panel-block-padding;
186
- padding-inline: $layout-gap;
187
-
188
- @include tablet {
189
- grid-template-columns: auto 33.333%;
190
- grid-template-areas: 'panel-content panel-featured-section';
191
- }
192
-
193
- @include desktop {
194
- grid-template-columns: auto 25%;
195
- }
196
-
197
- @include widescreen {
198
- padding-inline: $layout-widescreen-gap;
199
- }
200
-
201
- .site-header-panel-featured-content {
202
- grid-area: panel-featured-section;
203
- border-block-start: $site-header-panel-featured-section-border;
204
- padding-block-start: $site-header-panel-gap;
205
- display: flex;
206
- gap: $site-header-panel-gap;
207
- flex-direction: column;
208
-
209
- @include tablet {
210
- border-inline-start: $site-header-panel-featured-section-border;
211
- border-block-start: 0;
212
- padding-block-start: 0;
213
- padding-inline-start: $site-header-panel-gap;
214
- }
215
- }
216
-
217
- .site-header-panel-content {
218
- grid-area: panel-content;
219
- display: grid;
220
- align-content: space-between;
221
- }
222
-
223
- .site-header-panel-links {
224
- display: grid;
225
- grid-gap: $site-header-panel-content-gap;
226
-
227
- @include tablet {
228
- grid-auto-flow: column;
229
- grid-template-columns: repeat(2, 1fr);
230
- grid-template-rows: repeat(11, auto);
231
- }
232
-
233
- @include desktop {
234
- grid-template-columns: repeat(3, 1fr);
235
- grid-template-rows: repeat(7, auto);
236
- }
237
- }
238
-
239
- .site-header-panel-cards {
240
- display: grid;
241
- grid-gap: $site-header-panel-content-gap;
242
-
243
- @include tablet {
244
- grid-auto-flow: column;
245
- grid-template-columns: repeat(2, 1fr);
246
- grid-template-rows: repeat(5, auto);
247
- }
248
-
249
- @include desktop {
250
- grid-template-columns: repeat(3, 1fr);
251
- grid-template-rows: repeat(3, auto);
252
- }
253
- }
254
- }
255
- }
1
+ $site-header-height: 3.375em !default;
2
+ $site-header-inline-gap: $spacer-3 !default;
3
+ $site-header-border: 1px solid $border !default;
4
+
5
+ $site-header-font-size: $font-size-7 !default;
6
+ $site-header-brand-font-size: 1.25em !default;
7
+ $site-header-brand-font-size-sm: 1.15em !default;
8
+
9
+ $site-header-control-color: $text !default;
10
+
11
+ $site-header-button-font-size: 0.875em !default;
12
+ $site-header-button-icon-font-size: 0.875em !default;
13
+ $site-header-button-icon-spacing: 0.375em !default;
14
+
15
+ $site-header-hover-underline-border-width: 2px !default;
16
+ $site-header-hover-underline-border: $site-header-hover-underline-border-width solid
17
+ $site-header-control-color !default;
18
+
19
+ $site-header-logo-width: 1.625em !default;
20
+ $site-header-divider-height: 1.5em !default;
21
+
22
+ $site-header-panel-background-color: $body-background-medium !default;
23
+ $site-header-panel-min-height: 350px !default;
24
+ $site-header-panel-block-padding: $layout-4 !default;
25
+ $site-header-panel-gap: $layout-2 !default;
26
+ $site-header-panel-content-gap: $spacer-3 !default;
27
+ $site-header-panel-shadow: $box-shadow-medium !default;
28
+ $site-header-panel-border: 1px solid $border-white-high-contrast !default;
29
+ $site-header-panel-featured-section-border: 1px solid $table-border-dark !default;
30
+
31
+ %site-header-hover-underline {
32
+ > :not(.icon):not(.image) {
33
+ position: relative;
34
+
35
+ &::after {
36
+ display: block;
37
+ position: absolute;
38
+ content: '';
39
+ border-block-end: $site-header-hover-underline-border;
40
+ inset-inline-start: 0;
41
+ inset-inline-end: 0;
42
+ inset-block-end: -$site-header-hover-underline-border-width;
43
+ }
44
+ }
45
+ }
46
+
47
+ %site-header-control {
48
+ outline-offset: -$focus-width;
49
+ color: $site-header-control-color;
50
+ text-decoration: none;
51
+ white-space: nowrap;
52
+ cursor: pointer;
53
+ padding-block: $button-padding-vertical;
54
+ padding-inline: $site-header-inline-gap;
55
+
56
+ &:visited {
57
+ color: $site-header-control-color;
58
+ }
59
+ }
60
+
61
+ .site-header {
62
+ display: flex;
63
+ position: relative;
64
+ align-items: center;
65
+ height: $site-header-height;
66
+ font-size: $site-header-font-size;
67
+ border-block-end: $site-header-border;
68
+ gap: $site-header-inline-gap;
69
+ padding-inline: $layout-gap;
70
+
71
+ @include widescreen {
72
+ padding-inline: $layout-widescreen-gap;
73
+ }
74
+
75
+ .site-header-button {
76
+ @include control;
77
+ @include unselectable;
78
+ @extend %site-header-control;
79
+
80
+ justify-content: center;
81
+ height: 100%;
82
+ border: none;
83
+ border-radius: 0;
84
+ background-color: transparent;
85
+ font-size: $site-header-button-font-size;
86
+ font-weight: $weight-normal;
87
+ text-align: center;
88
+
89
+ &[aria-expanded='true'] {
90
+ background-color: $site-header-panel-background-color;
91
+ }
92
+
93
+ .icon {
94
+ font-size: $site-header-button-icon-font-size;
95
+
96
+ &:only-child {
97
+ margin: 0;
98
+ }
99
+
100
+ /* stylelint-disable-next-line selector-max-specificity, rule-empty-line-before */
101
+ &:first-child:not(:only-child) {
102
+ margin-inline-end: $site-header-button-icon-spacing;
103
+ }
104
+
105
+ /* stylelint-disable-next-line selector-max-specificity, rule-empty-line-before */
106
+ &:last-child:not(:only-child) {
107
+ margin-inline-start: $site-header-button-icon-spacing;
108
+ }
109
+ }
110
+
111
+ &:active,
112
+ &.is-active,
113
+ &:hover,
114
+ &.is-hovered,
115
+ &:focus-visible {
116
+ &:not([aria-expanded='true']) {
117
+ @extend %site-header-hover-underline;
118
+ }
119
+ }
120
+ }
121
+
122
+ .site-header-logo {
123
+ > svg,
124
+ > img {
125
+ display: block;
126
+ width: $site-header-logo-width;
127
+ height: auto;
128
+ }
129
+
130
+ &.site-header-logo-centered {
131
+ position: absolute;
132
+ inset-inline-start: calc(50% - $site-header-logo-width / 2);
133
+ }
134
+ }
135
+
136
+ .site-header-divider {
137
+ display: inline-block;
138
+ height: $site-header-divider-height;
139
+ border-inline-start: 2px solid $text-subtle;
140
+ margin-inline-start: $site-header-inline-gap;
141
+ }
142
+
143
+ .site-header-brand {
144
+ @extend %site-header-control;
145
+
146
+ display: inline-block;
147
+ font-size: $site-header-brand-font-size-sm;
148
+ font-weight: $weight-semibold;
149
+
150
+ &:active,
151
+ &.is-active,
152
+ &:hover,
153
+ &.is-hovered,
154
+ &:focus-visible {
155
+ @extend %site-header-hover-underline;
156
+ }
157
+
158
+ @include tablet {
159
+ font-size: $site-header-brand-font-size;
160
+ }
161
+ }
162
+
163
+ .site-header-nav {
164
+ display: flex;
165
+ align-self: center;
166
+ width: 100%;
167
+ height: 100%;
168
+ }
169
+
170
+ .site-header-panel {
171
+ display: grid;
172
+ position: absolute;
173
+ width: 100%;
174
+ min-height: $site-header-panel-min-height;
175
+ grid-gap: $site-header-panel-gap;
176
+ grid-template-areas: 'panel-content' 'panel-featured-section';
177
+ background-color: $site-header-panel-background-color;
178
+ text-wrap: wrap;
179
+ box-shadow: $site-header-panel-shadow;
180
+ z-index: $zindex-dropdown;
181
+ inset-inline-start: 0;
182
+ inset-block-start: calc($site-header-height - 1px);
183
+ border-block-start: $site-header-panel-border;
184
+ border-block-end: $site-header-panel-border;
185
+ padding-block: $site-header-panel-block-padding;
186
+ padding-inline: $layout-gap;
187
+
188
+ @include tablet {
189
+ grid-template-columns: auto 33.333%;
190
+ grid-template-areas: 'panel-content panel-featured-section';
191
+ }
192
+
193
+ @include desktop {
194
+ grid-template-columns: auto 25%;
195
+ }
196
+
197
+ @include widescreen {
198
+ padding-inline: $layout-widescreen-gap;
199
+ }
200
+
201
+ .site-header-panel-featured-content {
202
+ grid-area: panel-featured-section;
203
+ border-block-start: $site-header-panel-featured-section-border;
204
+ padding-block-start: $site-header-panel-gap;
205
+ display: flex;
206
+ gap: $site-header-panel-gap;
207
+ flex-direction: column;
208
+
209
+ @include tablet {
210
+ border-inline-start: $site-header-panel-featured-section-border;
211
+ border-block-start: 0;
212
+ padding-block-start: 0;
213
+ padding-inline-start: $site-header-panel-gap;
214
+ }
215
+ }
216
+
217
+ .site-header-panel-content {
218
+ grid-area: panel-content;
219
+ display: grid;
220
+ align-content: space-between;
221
+ }
222
+
223
+ .site-header-panel-links {
224
+ display: grid;
225
+ grid-gap: $site-header-panel-content-gap;
226
+
227
+ @include tablet {
228
+ grid-auto-flow: column;
229
+ grid-template-columns: repeat(2, 1fr);
230
+ grid-template-rows: repeat(11, auto);
231
+ }
232
+
233
+ @include desktop {
234
+ grid-template-columns: repeat(3, 1fr);
235
+ grid-template-rows: repeat(7, auto);
236
+ }
237
+ }
238
+
239
+ .site-header-panel-cards {
240
+ display: grid;
241
+ grid-gap: $site-header-panel-content-gap;
242
+
243
+ @include tablet {
244
+ grid-auto-flow: column;
245
+ grid-template-columns: repeat(2, 1fr);
246
+ grid-template-rows: repeat(5, auto);
247
+ }
248
+
249
+ @include desktop {
250
+ grid-template-columns: repeat(3, 1fr);
251
+ grid-template-rows: repeat(3, auto);
252
+ }
253
+ }
254
+ }
255
+ }
package/src/components/stretched-link.scss CHANGED
@@ -1,8 +1,8 @@
1
- .stretched-link {
2
- &::before {
3
- position: absolute;
4
- content: '';
5
- z-index: $zindex-stretched-link;
6
- inset: 0;
7
- }
8
- }
1
+ .stretched-link {
2
+ &::before {
3
+ position: absolute;
4
+ content: '';
5
+ z-index: $zindex-stretched-link;
6
+ inset: 0;
7
+ }
8
+ }