@microsoft/atlas-css 5.0.0-test.3 → 5.0.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.
- package/dist/class-names.json +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/tokens.json +1 -1
- package/dist/tokens.ts +14 -24
- package/package.json +2 -2
- package/src/components/index.scss +0 -1
- package/src/components/layout.scss +144 -28
- package/src/components/markdown.scss +1 -1
- package/src/components/site-header.scss +3 -3
- package/src/tokens/breakpoints.scss +1 -1
- package/src/tokens/layout.scss +1 -3
- package/src/tokens/themes.scss +1 -1
- package/src/tokens/typography.scss +1 -5
- package/src/components/reading-width.scss +0 -10
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
$quarter-widescreen: math.div(tokens.$breakpoint-widescreen, 4);
|
|
6
6
|
$half-widescreen: math.div(tokens.$breakpoint-widescreen, 2);
|
|
7
7
|
$three-quarters-widescreen: math.div(tokens.$breakpoint-widescreen, 4) * 3;
|
|
8
|
-
$default-flyout-width-desktop: 320px
|
|
9
|
-
$default-flyout-width-widescreen: 480px
|
|
10
|
-
$
|
|
11
|
-
$
|
|
12
|
-
$
|
|
13
|
-
$
|
|
8
|
+
$default-flyout-width-desktop: 320px;
|
|
9
|
+
$default-flyout-width-widescreen: 480px;
|
|
10
|
+
$default-aside-min-width: 300px;
|
|
11
|
+
$eighth-widescreen: math.div(tokens.$breakpoint-widescreen, 8); // 225px
|
|
12
|
+
$five-eighths-widescreen: math.div(tokens.$breakpoint-widescreen, 8) * 5; // 1125px
|
|
13
|
+
$layout-menu-collapsed-width: 96px !default;
|
|
14
14
|
|
|
15
15
|
:root {
|
|
16
16
|
--window-inner-height: 100vh; // to be overwritten by JS
|
|
@@ -33,8 +33,9 @@ $spacer-width: calc(275px - var(#{tokens.$layout-menu-collapsed-width-name})) !d
|
|
|
33
33
|
#{tokens.$layout-flyout-width-desktop-custom-property-name}
|
|
34
34
|
);
|
|
35
35
|
#{tokens.$layout-menu-collapsed-width-name}: $layout-menu-collapsed-width;
|
|
36
|
-
#{tokens.$layout-menu-
|
|
37
|
-
|
|
36
|
+
#{tokens.$layout-menu-collapsed-width-widescreen-spacer-width-name}: calc(
|
|
37
|
+
$quarter-widescreen - var(#{tokens.$layout-menu-collapsed-width-name})
|
|
38
|
+
);
|
|
38
39
|
|
|
39
40
|
@include mixins.widescreen {
|
|
40
41
|
#{tokens.$layout-gap-scalable-custom-property-name}: tokens.$layout-widescreen-gap;
|
|
@@ -138,8 +139,8 @@ $spacer-width: calc(275px - var(#{tokens.$layout-menu-collapsed-width-name})) !d
|
|
|
138
139
|
|
|
139
140
|
@include mixins.tablet {
|
|
140
141
|
grid-template:
|
|
141
|
-
minmax(auto, max-content) auto var(--atlas-contained-height) auto auto /
|
|
142
|
-
minmax(0,
|
|
142
|
+
minmax(auto, max-content) auto var(--atlas-contained-height) auto auto / minmax(0, 1fr)
|
|
143
|
+
minmax(0, 2fr);
|
|
143
144
|
grid-template-areas:
|
|
144
145
|
'header header'
|
|
145
146
|
'hero hero'
|
|
@@ -150,16 +151,26 @@ $spacer-width: calc(275px - var(#{tokens.$layout-menu-collapsed-width-name})) !d
|
|
|
150
151
|
|
|
151
152
|
@include mixins.desktop {
|
|
152
153
|
grid-template:
|
|
153
|
-
minmax(auto, max-content) auto var(--atlas-contained-height) auto /
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
154
|
+
minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
|
|
155
|
+
0,
|
|
156
|
+
2fr
|
|
157
|
+
)
|
|
158
|
+
minmax(0, 1fr);
|
|
157
159
|
grid-template-areas:
|
|
158
160
|
'header header header'
|
|
159
161
|
'hero hero hero'
|
|
160
162
|
'menu main aside'
|
|
161
163
|
'footer footer footer';
|
|
162
164
|
}
|
|
165
|
+
|
|
166
|
+
@include mixins.widescreen {
|
|
167
|
+
grid-template: minmax(auto, max-content) auto var(--atlas-contained-height) auto / auto #{$quarter-widescreen} #{$half-widescreen} #{$quarter-widescreen} auto;
|
|
168
|
+
grid-template-areas:
|
|
169
|
+
'header header header header header'
|
|
170
|
+
'hero hero hero hero hero'
|
|
171
|
+
'. menu main aside .'
|
|
172
|
+
'footer footer footer footer footer';
|
|
173
|
+
}
|
|
163
174
|
}
|
|
164
175
|
|
|
165
176
|
&.layout-menu-collapsed .layout-body {
|
|
@@ -179,23 +190,48 @@ $spacer-width: calc(275px - var(#{tokens.$layout-menu-collapsed-width-name})) !d
|
|
|
179
190
|
|
|
180
191
|
@include mixins.desktop {
|
|
181
192
|
grid-template:
|
|
182
|
-
minmax(auto, max-content) auto var(--atlas-contained-height) auto /
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
minmax(0,
|
|
186
|
-
minmax(0,
|
|
193
|
+
minmax(auto, max-content) auto var(--atlas-contained-height) auto / var(
|
|
194
|
+
#{tokens.$layout-menu-collapsed-width-name}
|
|
195
|
+
)
|
|
196
|
+
minmax(0, 4fr)
|
|
197
|
+
minmax(0, 23fr) minmax(0, 10fr);
|
|
187
198
|
grid-template-areas:
|
|
188
199
|
'header header header header'
|
|
189
200
|
'hero hero hero hero'
|
|
190
201
|
'menu . main aside'
|
|
191
202
|
'footer footer footer footer';
|
|
192
203
|
}
|
|
204
|
+
|
|
205
|
+
@include mixins.widescreen {
|
|
206
|
+
grid-template:
|
|
207
|
+
minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, auto) var(
|
|
208
|
+
#{tokens.$layout-menu-collapsed-width-name}
|
|
209
|
+
)
|
|
210
|
+
minmax(0, var(#{tokens.$layout-menu-collapsed-width-widescreen-spacer-width-name}))
|
|
211
|
+
$half-widescreen minmax(0, #{$quarter-widescreen}) minmax(0, auto);
|
|
212
|
+
grid-template-areas:
|
|
213
|
+
'header header header header header header'
|
|
214
|
+
'hero hero hero hero hero hero'
|
|
215
|
+
'. menu . main aside .'
|
|
216
|
+
'footer footer footer footer footer footer';
|
|
217
|
+
}
|
|
193
218
|
}
|
|
194
219
|
|
|
195
220
|
&.layout-flyout-active .layout-body {
|
|
196
221
|
@include mixins.desktop {
|
|
197
222
|
grid-template:
|
|
198
|
-
auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0,
|
|
223
|
+
auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr)
|
|
224
|
+
var(#{tokens.$layout-flyout-width-name});
|
|
225
|
+
grid-template-areas:
|
|
226
|
+
'header header header header'
|
|
227
|
+
'hero hero hero flyout'
|
|
228
|
+
'menu main aside flyout'
|
|
229
|
+
'footer footer footer footer';
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
@include mixins.widescreen {
|
|
233
|
+
grid-template:
|
|
234
|
+
auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr)
|
|
199
235
|
var(#{tokens.$layout-flyout-width-name});
|
|
200
236
|
grid-template-areas:
|
|
201
237
|
'header header header header'
|
|
@@ -211,8 +247,21 @@ $spacer-width: calc(275px - var(#{tokens.$layout-menu-collapsed-width-name})) !d
|
|
|
211
247
|
auto auto var(--atlas-contained-height) auto / var(
|
|
212
248
|
#{tokens.$layout-menu-collapsed-width-name}
|
|
213
249
|
)
|
|
214
|
-
minmax(0, 1fr)
|
|
215
|
-
|
|
250
|
+
minmax(0, 2fr) minmax(0, 1fr)
|
|
251
|
+
var(#{tokens.$layout-flyout-width-name});
|
|
252
|
+
grid-template-areas:
|
|
253
|
+
'header header header header'
|
|
254
|
+
'hero hero hero flyout'
|
|
255
|
+
'menu main aside flyout'
|
|
256
|
+
'footer footer footer footer';
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
@include mixins.widescreen {
|
|
260
|
+
grid-template:
|
|
261
|
+
auto auto var(--atlas-contained-height) auto / var(
|
|
262
|
+
#{tokens.$layout-menu-collapsed-width-name}
|
|
263
|
+
)
|
|
264
|
+
minmax(0, 2fr) minmax(0, 1fr)
|
|
216
265
|
var(#{tokens.$layout-flyout-width-name});
|
|
217
266
|
grid-template-areas:
|
|
218
267
|
'header header header header'
|
|
@@ -246,13 +295,22 @@ $spacer-width: calc(275px - var(#{tokens.$layout-menu-collapsed-width-name})) !d
|
|
|
246
295
|
@include mixins.desktop {
|
|
247
296
|
grid-template:
|
|
248
297
|
minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr)
|
|
249
|
-
minmax(0,
|
|
298
|
+
minmax(0, 3fr);
|
|
250
299
|
grid-template-areas:
|
|
251
300
|
'header header'
|
|
252
301
|
'hero hero'
|
|
253
302
|
'menu main'
|
|
254
303
|
'footer footer';
|
|
255
304
|
}
|
|
305
|
+
|
|
306
|
+
@include mixins.widescreen {
|
|
307
|
+
grid-template: minmax(auto, max-content) auto var(--atlas-contained-height) auto / auto #{$quarter-widescreen} #{$three-quarters-widescreen} auto;
|
|
308
|
+
grid-template-areas:
|
|
309
|
+
'header header header header'
|
|
310
|
+
'hero hero hero hero'
|
|
311
|
+
'. menu main .'
|
|
312
|
+
'footer footer footer footer';
|
|
313
|
+
}
|
|
256
314
|
}
|
|
257
315
|
|
|
258
316
|
&.layout-menu-collapsed .layout-body {
|
|
@@ -274,13 +332,28 @@ $spacer-width: calc(275px - var(#{tokens.$layout-menu-collapsed-width-name})) !d
|
|
|
274
332
|
minmax(auto, max-content) auto var(--atlas-contained-height) auto / var(
|
|
275
333
|
#{tokens.$layout-menu-collapsed-width-name}
|
|
276
334
|
)
|
|
277
|
-
minmax(0,
|
|
335
|
+
minmax(0, 4fr)
|
|
336
|
+
minmax(0, 23fr) minmax(0, 10fr);
|
|
278
337
|
grid-template-areas:
|
|
279
338
|
'header header header header'
|
|
280
339
|
'hero hero hero hero'
|
|
281
340
|
'menu . main main'
|
|
282
341
|
'footer footer footer footer';
|
|
283
342
|
}
|
|
343
|
+
|
|
344
|
+
@include mixins.widescreen {
|
|
345
|
+
grid-template:
|
|
346
|
+
minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, auto) var(
|
|
347
|
+
#{tokens.$layout-menu-collapsed-width-name}
|
|
348
|
+
)
|
|
349
|
+
minmax(0, var(#{tokens.$layout-menu-collapsed-width-widescreen-spacer-width-name}))
|
|
350
|
+
#{$three-quarters-widescreen} minmax(0, auto);
|
|
351
|
+
grid-template-areas:
|
|
352
|
+
'header header header header header'
|
|
353
|
+
'hero hero hero hero hero'
|
|
354
|
+
'. menu . main .'
|
|
355
|
+
'footer footer footer footer footer';
|
|
356
|
+
}
|
|
284
357
|
}
|
|
285
358
|
|
|
286
359
|
&.layout-flyout-active .layout-body {
|
|
@@ -288,7 +361,21 @@ $spacer-width: calc(275px - var(#{tokens.$layout-menu-collapsed-width-name})) !d
|
|
|
288
361
|
grid-template:
|
|
289
362
|
minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
|
|
290
363
|
0,
|
|
291
|
-
|
|
364
|
+
3fr
|
|
365
|
+
)
|
|
366
|
+
var(#{tokens.$layout-flyout-width-name});
|
|
367
|
+
grid-template-areas:
|
|
368
|
+
'header header header'
|
|
369
|
+
'hero hero flyout'
|
|
370
|
+
'menu main flyout'
|
|
371
|
+
'footer footer footer';
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
@include mixins.widescreen {
|
|
375
|
+
grid-template:
|
|
376
|
+
minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
|
|
377
|
+
0,
|
|
378
|
+
3fr
|
|
292
379
|
)
|
|
293
380
|
var(#{tokens.$layout-flyout-width-name});
|
|
294
381
|
grid-template-areas:
|
|
@@ -313,6 +400,21 @@ $spacer-width: calc(275px - var(#{tokens.$layout-menu-collapsed-width-name})) !d
|
|
|
313
400
|
'menu main flyout'
|
|
314
401
|
'footer footer footer';
|
|
315
402
|
}
|
|
403
|
+
|
|
404
|
+
@include mixins.widescreen {
|
|
405
|
+
grid-template:
|
|
406
|
+
auto auto var(--atlas-contained-height) auto / var(
|
|
407
|
+
#{tokens.$layout-menu-collapsed-width-name}
|
|
408
|
+
)
|
|
409
|
+
minmax(0, var(#{tokens.$layout-menu-collapsed-width-widescreen-spacer-width-name}))
|
|
410
|
+
minmax(0, 1fr)
|
|
411
|
+
var(#{tokens.$layout-flyout-width-name});
|
|
412
|
+
grid-template-areas:
|
|
413
|
+
'header header header header'
|
|
414
|
+
'hero hero hero flyout'
|
|
415
|
+
'menu . main flyout'
|
|
416
|
+
'footer footer footer footer';
|
|
417
|
+
}
|
|
316
418
|
}
|
|
317
419
|
}
|
|
318
420
|
|
|
@@ -327,7 +429,7 @@ $spacer-width: calc(275px - var(#{tokens.$layout-menu-collapsed-width-name})) !d
|
|
|
327
429
|
|
|
328
430
|
@include mixins.tablet {
|
|
329
431
|
grid-template:
|
|
330
|
-
minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0,
|
|
432
|
+
minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 2fr)
|
|
331
433
|
minmax(0, 1fr);
|
|
332
434
|
grid-template-areas:
|
|
333
435
|
'header header'
|
|
@@ -338,7 +440,7 @@ $spacer-width: calc(275px - var(#{tokens.$layout-menu-collapsed-width-name})) !d
|
|
|
338
440
|
|
|
339
441
|
@include mixins.desktop {
|
|
340
442
|
grid-template:
|
|
341
|
-
minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0,
|
|
443
|
+
minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 3fr)
|
|
342
444
|
minmax(0, 1fr);
|
|
343
445
|
grid-template-areas:
|
|
344
446
|
'header header'
|
|
@@ -360,7 +462,21 @@ $spacer-width: calc(275px - var(#{tokens.$layout-menu-collapsed-width-name})) !d
|
|
|
360
462
|
&.layout-flyout-active .layout-body {
|
|
361
463
|
@include mixins.desktop {
|
|
362
464
|
grid-template:
|
|
363
|
-
minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0,
|
|
465
|
+
minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 3fr) minmax(
|
|
466
|
+
0,
|
|
467
|
+
1fr
|
|
468
|
+
)
|
|
469
|
+
var(#{tokens.$layout-flyout-width-name});
|
|
470
|
+
grid-template-areas:
|
|
471
|
+
'header header header'
|
|
472
|
+
'hero hero flyout'
|
|
473
|
+
'main aside flyout'
|
|
474
|
+
'footer footer footer';
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
@include mixins.widescreen {
|
|
478
|
+
grid-template:
|
|
479
|
+
minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 3fr) minmax(
|
|
364
480
|
0,
|
|
365
481
|
1fr
|
|
366
482
|
)
|
|
@@ -72,9 +72,9 @@ $site-header-panel-featured-section-border: 1px solid tokens.$table-border-dark
|
|
|
72
72
|
gap: $site-header-inline-gap;
|
|
73
73
|
padding-inline: tokens.$layout-gap;
|
|
74
74
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
75
|
+
@include mixins.widescreen {
|
|
76
|
+
padding-inline: tokens.$layout-widescreen-gap;
|
|
77
|
+
}
|
|
78
78
|
|
|
79
79
|
.site-header-button {
|
|
80
80
|
@include mixins.control;
|
package/src/tokens/layout.scss
CHANGED
|
@@ -22,7 +22,5 @@ $layout-flyout-width-name: '--layout-flyout-width' !default;
|
|
|
22
22
|
$layout-flyout-width-desktop-custom-property-name: '--layout-flyout-width-desktop' !default;
|
|
23
23
|
$layout-flyout-width-widescreen-custom-property-name: '--layout-flyout-width-widescreen' !default;
|
|
24
24
|
$layout-menu-collapsed-width-name: '--layout-menu-collapsed-width' !default;
|
|
25
|
-
$layout-menu-collapsed-spacer-
|
|
26
|
-
$layout-menu-max-width-name: '--layout-menu-max-width' !default;
|
|
27
|
-
$layout-aside-max-width-name: '--layout-aside-max-width' !default;
|
|
25
|
+
$layout-menu-collapsed-width-widescreen-spacer-width-name: '--layout-menu-collapsed-width-widescreen' !default;
|
|
28
26
|
//@end-sass-export-section
|
package/src/tokens/themes.scss
CHANGED
|
@@ -18,7 +18,7 @@ $themes: (
|
|
|
18
18
|
'overlay-invert': palette.$palette-white,
|
|
19
19
|
'body-background': palette.$palette-white,
|
|
20
20
|
'body-background-accent': palette.$palette-yellow-sand,
|
|
21
|
-
'body-background-medium': palette.$palette-grey-
|
|
21
|
+
'body-background-medium': palette.$palette-grey-20-deprecated,
|
|
22
22
|
'alternate-background': palette.$palette-grey-120-deprecated,
|
|
23
23
|
'alternate-background-medium': palette.$palette-grey-110-deprecated,
|
|
24
24
|
'card-background': palette.$palette-white,
|
|
@@ -28,10 +28,6 @@ $letter-spacing-medium: 0.125rem;
|
|
|
28
28
|
$letter-spacing-wide: 0.225rem;
|
|
29
29
|
|
|
30
30
|
// Line height
|
|
31
|
-
$line-height-normal: 1.
|
|
31
|
+
$line-height-normal: 1.3;
|
|
32
32
|
|
|
33
|
-
// Reading width
|
|
34
|
-
$optimal-reading-width: 688px;
|
|
35
|
-
$reading-width-padding: 24px;
|
|
36
|
-
$reading-width-padded: $optimal-reading-width + ($reading-width-padding * 2);
|
|
37
33
|
//@end-sass-export-section
|