@microsoft/atlas-css 3.57.1 → 3.58.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 (10) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.css.map +1 -1
  3. package/package.json +3 -3
  4. package/src/components/button.scss +3 -4
  5. package/src/components/gradient.scss +2 -4
  6. package/src/components/hero.scss +1 -2
  7. package/src/components/layout.scss +66 -40
  8. package/src/components/segmented-control.scss +1 -0
  9. package/src/components/site-header.scss +6 -2
  10. package/src/core/themes.scss +2 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/atlas-css",
3
- "version": "3.57.1",
3
+ "version": "3.58.0",
4
4
  "description": "Styles backing the Atlas Design System used by Microsoft's Developer Relations.",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",
@@ -83,9 +83,9 @@
83
83
  "quicktype-core": "^23.0.48",
84
84
  "grass": "^1.0.2",
85
85
  "sass-export": "^2.1.2",
86
- "stylelint": "^15.9.0",
86
+ "stylelint": "^16.10.0",
87
87
  "stylelint-config-prettier": "^9.0.5",
88
88
  "stylelint-prettier": "^3.0.0",
89
- "wireit": "^0.9.5"
89
+ "wireit": "0.14.9"
90
90
  }
91
91
  }
package/src/components/button.scss CHANGED
@@ -31,8 +31,7 @@ $button-font-weight: $weight-semibold !default;
31
31
  @include unselectable;
32
32
 
33
33
  justify-content: center;
34
- padding-block-start: $button-padding-vertical;
35
- padding-block-end: $button-padding-vertical;
34
+ padding-block: $button-padding-vertical;
36
35
  border-width: $button-border-width;
37
36
  border-radius: $button-border-radius;
38
37
  border-color: $button-border-color;
@@ -42,8 +41,7 @@ $button-font-weight: $weight-semibold !default;
42
41
  text-align: center;
43
42
  text-decoration: none;
44
43
  cursor: pointer;
45
- padding-inline-start: $button-padding-horizontal;
46
- padding-inline-end: $button-padding-horizontal;
44
+ padding-inline: $button-padding-horizontal;
47
45
 
48
46
  strong {
49
47
  color: inherit;
@@ -172,6 +170,7 @@ $button-clear-hover-background-color: transparentize(#8e8e8e, 0.95) !default;
172
170
 
173
171
  &.button-#{$name} {
174
172
  color: $base;
173
+
175
174
  @if $name == 'warning' {
176
175
  color: $dark;
177
176
  }
package/src/components/gradient.scss CHANGED
@@ -35,16 +35,14 @@ $border-gradient-direction: (
35
35
 
36
36
  @if $direction == 'right' {
37
37
  border-image-slice: 0 128 0 0;
38
- inset-block-start: 0;
39
- inset-block-end: 0;
38
+ inset-block: 0;
40
39
  inset-inline-end: 0;
41
40
  }
42
41
 
43
42
  @if $direction == 'bottom' {
44
43
  border-image-slice: 0 0 128 0;
45
44
  inset-block-end: 0;
46
- inset-inline-start: 0;
47
- inset-inline-end: 0;
45
+ inset-inline: 0;
48
46
  }
49
47
 
50
48
  @include forced-colors {
package/src/components/hero.scss CHANGED
@@ -54,8 +54,7 @@ $hero-image-width-widescreen: calc((100% - 2 * $layout-widescreen-gap) * 0.55) !
54
54
  @include desktop {
55
55
  min-height: $hero-min-height-default;
56
56
  padding-block: $hero-padding-default;
57
- padding-inline-start: $hero-padding-sm;
58
- padding-inline-end: $hero-padding-sm;
57
+ padding-inline: $hero-padding-sm;
59
58
  }
60
59
 
61
60
  .hero-details-card {
package/src/components/layout.scss CHANGED
@@ -104,13 +104,15 @@ $default-flyout-width-widescreen: 480px;
104
104
  .layout,
105
105
  .layout.layout-single {
106
106
  .layout-body {
107
- grid-template: auto auto auto 1fr auto auto / minmax(0, 1fr);
107
+ grid-template: minmax(auto, max-content) auto auto 1fr auto auto / minmax(0, 1fr);
108
108
  grid-template-areas: 'header' 'hero' 'menu' 'main' 'aside' 'footer';
109
109
  }
110
110
 
111
111
  &.layout-flyout-active .layout-body {
112
112
  @include desktop {
113
- grid-template: auto auto auto 1fr auto auto / minmax(0, 1fr) var(#{$layout-flyout-width-name});
113
+ grid-template: minmax(auto, max-content) auto auto 1fr auto auto / minmax(0, 1fr) var(
114
+ #{$layout-flyout-width-name}
115
+ );
114
116
  grid-template-areas: 'header header' 'hero flyout' 'menu flyout' 'main flyout' 'aside flyout' 'footer footer';
115
117
  }
116
118
  }
@@ -118,14 +120,13 @@ $default-flyout-width-widescreen: 480px;
118
120
 
119
121
  .layout.layout-holy-grail {
120
122
  .layout-body {
121
- grid-template: auto auto auto 1fr auto auto / minmax(0, 1fr);
123
+ grid-template: minmax(auto, max-content) auto auto 1fr auto auto / minmax(0, 1fr);
122
124
  grid-template-areas: 'header' 'hero' 'menu' 'main' 'aside' 'footer';
123
125
 
124
126
  @include tablet {
125
- grid-template: auto auto var(--atlas-contained-height) auto auto / minmax(0, 1fr) minmax(
126
- 0,
127
- 2fr
128
- );
127
+ grid-template:
128
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto auto / minmax(0, 1fr)
129
+ minmax(0, 2fr);
129
130
  grid-template-areas:
130
131
  'header header'
131
132
  'hero hero'
@@ -135,10 +136,12 @@ $default-flyout-width-widescreen: 480px;
135
136
  }
136
137
 
137
138
  @include desktop {
138
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 2fr) minmax(
139
+ grid-template:
140
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
139
141
  0,
140
- 1fr
141
- );
142
+ 2fr
143
+ )
144
+ minmax(0, 1fr);
142
145
  grid-template-areas:
143
146
  'header header header'
144
147
  'hero hero hero'
@@ -147,7 +150,7 @@ $default-flyout-width-widescreen: 480px;
147
150
  }
148
151
 
149
152
  @include widescreen {
150
- grid-template: auto auto var(--atlas-contained-height) auto / auto #{$quarter-widescreen} #{$half-widescreen} #{$quarter-widescreen} auto;
153
+ grid-template: minmax(auto, max-content) auto var(--atlas-contained-height) auto / auto #{$quarter-widescreen} #{$half-widescreen} #{$quarter-widescreen} auto;
151
154
  grid-template-areas:
152
155
  'header header header header header'
153
156
  'hero hero hero hero hero'
@@ -187,11 +190,13 @@ $default-flyout-width-widescreen: 480px;
187
190
  }
188
191
 
189
192
  .layout-body {
190
- grid-template: auto auto auto 1fr auto / minmax(0, 1fr);
193
+ grid-template: minmax(auto, max-content) auto auto 1fr auto / minmax(0, 1fr);
191
194
  grid-template-areas: 'header' 'hero' 'menu' 'main' 'footer';
192
195
 
193
196
  @include tablet {
194
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 2fr);
197
+ grid-template:
198
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr)
199
+ minmax(0, 2fr);
195
200
  grid-template-areas:
196
201
  'header header'
197
202
  'hero hero'
@@ -200,7 +205,9 @@ $default-flyout-width-widescreen: 480px;
200
205
  }
201
206
 
202
207
  @include desktop {
203
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 3fr);
208
+ grid-template:
209
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr)
210
+ minmax(0, 3fr);
204
211
  grid-template-areas:
205
212
  'header header'
206
213
  'hero hero'
@@ -209,7 +216,7 @@ $default-flyout-width-widescreen: 480px;
209
216
  }
210
217
 
211
218
  @include widescreen {
212
- grid-template: auto auto var(--atlas-contained-height) auto / auto #{$quarter-widescreen} #{$three-quarters-widescreen} auto;
219
+ grid-template: minmax(auto, max-content) auto var(--atlas-contained-height) auto / auto #{$quarter-widescreen} #{$three-quarters-widescreen} auto;
213
220
  grid-template-areas:
214
221
  'header header header header'
215
222
  'hero hero hero hero'
@@ -220,19 +227,26 @@ $default-flyout-width-widescreen: 480px;
220
227
 
221
228
  &.layout-flyout-active .layout-body {
222
229
  @include desktop {
223
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 3fr) var(
224
- #{$layout-flyout-width-name}
225
- );
230
+ grid-template:
231
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
232
+ 0,
233
+ 3fr
234
+ )
235
+ var(#{$layout-flyout-width-name});
226
236
  grid-template-areas:
227
237
  'header header header'
228
238
  'hero hero flyout'
229
239
  'menu main flyout'
230
240
  'footer footer footer';
231
241
  }
242
+
232
243
  @include widescreen {
233
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 3fr) var(
234
- #{$layout-flyout-width-name}
235
- );
244
+ grid-template:
245
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
246
+ 0,
247
+ 3fr
248
+ )
249
+ var(#{$layout-flyout-width-name});
236
250
  grid-template-areas:
237
251
  'header header header'
238
252
  'hero hero flyout'
@@ -248,11 +262,13 @@ $default-flyout-width-widescreen: 480px;
248
262
  }
249
263
 
250
264
  .layout-body {
251
- grid-template: auto auto auto 1fr auto / minmax(0, 1fr);
265
+ grid-template: minmax(auto, max-content) auto auto 1fr auto / minmax(0, 1fr);
252
266
  grid-template-areas: 'header' 'hero' 'main' 'aside' 'footer';
253
267
 
254
268
  @include tablet {
255
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 2fr) minmax(0, 1fr);
269
+ grid-template:
270
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 2fr)
271
+ minmax(0, 1fr);
256
272
  grid-template-areas:
257
273
  'header header'
258
274
  'hero hero'
@@ -261,7 +277,9 @@ $default-flyout-width-widescreen: 480px;
261
277
  }
262
278
 
263
279
  @include desktop {
264
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 3fr) minmax(0, 1fr);
280
+ grid-template:
281
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 3fr)
282
+ minmax(0, 1fr);
265
283
  grid-template-areas:
266
284
  'header header'
267
285
  'hero hero'
@@ -270,7 +288,7 @@ $default-flyout-width-widescreen: 480px;
270
288
  }
271
289
 
272
290
  @include widescreen {
273
- grid-template: auto auto var(--atlas-contained-height) auto / auto #{$three-quarters-widescreen} #{$quarter-widescreen} auto;
291
+ grid-template: minmax(auto, max-content) auto var(--atlas-contained-height) auto / auto #{$three-quarters-widescreen} #{$quarter-widescreen} auto;
274
292
  grid-template-areas:
275
293
  'header header header header'
276
294
  'hero hero hero hero'
@@ -281,9 +299,12 @@ $default-flyout-width-widescreen: 480px;
281
299
 
282
300
  &.layout-flyout-active .layout-body {
283
301
  @include desktop {
284
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 3fr) minmax(0, 1fr) var(
285
- #{$layout-flyout-width-name}
286
- );
302
+ grid-template:
303
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 3fr) minmax(
304
+ 0,
305
+ 1fr
306
+ )
307
+ var(#{$layout-flyout-width-name});
287
308
  grid-template-areas:
288
309
  'header header header'
289
310
  'hero hero flyout'
@@ -292,9 +313,12 @@ $default-flyout-width-widescreen: 480px;
292
313
  }
293
314
 
294
315
  @include widescreen {
295
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 3fr) minmax(0, 1fr) var(
296
- #{$layout-flyout-width-name}
297
- );
316
+ grid-template:
317
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 3fr) minmax(
318
+ 0,
319
+ 1fr
320
+ )
321
+ var(#{$layout-flyout-width-name});
298
322
  grid-template-areas:
299
323
  'header header header'
300
324
  'hero hero flyout'
@@ -310,12 +334,14 @@ $default-flyout-width-widescreen: 480px;
310
334
  }
311
335
 
312
336
  .layout-body {
313
- grid-template: auto auto auto 1fr auto / minmax(0, 1fr);
337
+ grid-template: minmax(auto, max-content) auto auto 1fr auto / minmax(0, 1fr);
314
338
  grid-template-areas: 'header' 'hero' 'main' 'aside' 'footer';
315
339
 
316
340
  // note that to make some extra room this layout is not constrained by the widescreen breakpoint like others
317
341
  @include tablet {
318
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 1fr);
342
+ grid-template:
343
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr)
344
+ minmax(0, 1fr);
319
345
  grid-template-areas:
320
346
  'header header'
321
347
  'hero hero'
@@ -326,9 +352,12 @@ $default-flyout-width-widescreen: 480px;
326
352
 
327
353
  &.layout-flyout-active .layout-body {
328
354
  @include desktop {
329
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 1fr) var(
330
- #{$layout-flyout-width-name}
331
- );
355
+ grid-template:
356
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
357
+ 0,
358
+ 1fr
359
+ )
360
+ var(#{$layout-flyout-width-name});
332
361
  grid-template-areas:
333
362
  'header header header'
334
363
  'hero hero flyout'
@@ -343,8 +372,7 @@ $default-flyout-width-widescreen: 480px;
343
372
  @mixin constrained-layout-child {
344
373
  position: sticky;
345
374
  inset-block-start: 0;
346
- overflow-x: hidden;
347
- overflow-y: auto;
375
+ overflow: hidden auto;
348
376
  -webkit-overflow-scrolling: touch;
349
377
  }
350
378
 
@@ -363,7 +391,6 @@ $default-flyout-width-widescreen: 480px;
363
391
  &.layout-twin,
364
392
  &.layout-sidecar-left,
365
393
  &.layout-sidecar-right {
366
- // 👇 minus a pixel at the end to account for percentage points and rounding
367
394
  --atlas-contained-height: calc(
368
395
  var(--window-inner-height) - var(--atlas-header-height) - var(--atlas-footer-height) - 1px
369
396
  );
@@ -389,7 +416,6 @@ $default-flyout-width-widescreen: 480px;
389
416
  // Because the holy grail has two rows (containing menu main, menu aside) on tablet, we cannot apply height constraints at that size
390
417
  @include desktop {
391
418
  .layout.layout-constrained.layout-holy-grail {
392
- // 👇 minus a pixel at the end to account for percentage points and rounding
393
419
  --atlas-contained-height: calc(
394
420
  var(--window-inner-height) - var(--atlas-header-height) - var(--atlas-footer-height) - 1px
395
421
  );
package/src/components/segmented-control.scss CHANGED
@@ -118,6 +118,7 @@ $sc-active-color: $text-invert !default;
118
118
  padding: $sc-padding;
119
119
  }
120
120
  }
121
+
121
122
  @include desktop {
122
123
  .segmented-control,
123
124
  .segmented-previous,
package/src/components/site-header.scss CHANGED
@@ -37,8 +37,7 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
37
37
  position: absolute;
38
38
  content: '';
39
39
  border-block-end: $site-header-hover-underline-border;
40
- inset-inline-start: 0;
41
- inset-inline-end: 0;
40
+ inset-inline: 0;
42
41
  inset-block-end: -$site-header-hover-underline-border-width;
43
42
  }
44
43
  }
@@ -75,6 +74,7 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
75
74
  .site-header-button {
76
75
  @include control;
77
76
  @include unselectable;
77
+
78
78
  @extend %site-header-control;
79
79
 
80
80
  justify-content: center;
@@ -113,6 +113,8 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
113
113
  &:hover,
114
114
  &.is-hovered,
115
115
  &:focus-visible {
116
+ text-decoration: none;
117
+
116
118
  &:not([aria-expanded='true']) {
117
119
  @extend %site-header-hover-underline;
118
120
  }
@@ -153,6 +155,8 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
153
155
  &.is-hovered,
154
156
  &:focus-visible {
155
157
  @extend %site-header-hover-underline;
158
+
159
+ text-decoration: none;
156
160
  }
157
161
 
158
162
  @include tablet {
package/src/core/themes.scss CHANGED
@@ -29,8 +29,10 @@ $theme-names: map.keys($themes);
29
29
  // Validation: ensure all properties in non-root themes exist in root
30
30
  @each $theme-name in $theme-names {
31
31
  $theme: map.get($themes, $theme-name);
32
+
32
33
  @if $theme-name != $root-theme {
33
34
  $root: map.get($themes, $root-theme);
35
+
34
36
  @each $color-name, $val in $theme {
35
37
  @if map.has-key($root, $color-name) != true {
36
38
  @error '#{$color-name} from #{$theme-name} does not exist in theme: #{$theme-name}.';