@microsoft/atlas-css 3.19.0 → 3.21.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 (22) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.css.map +1 -1
  3. package/dist/tokens.json +1 -1
  4. package/dist/tokens.ts +11 -3
  5. package/package.json +1 -1
  6. package/src/atomics/background-pattern.scss +3 -0
  7. package/src/atomics/colors.scss +9 -0
  8. package/src/atomics/index.scss +1 -0
  9. package/src/atomics/typography.scss +5 -1
  10. package/src/atomics/width.scss +1 -1
  11. package/src/components/form/form.scss +4 -1
  12. package/src/components/form/input.scss +0 -2
  13. package/src/components/hero.scss +140 -0
  14. package/src/components/index.scss +2 -0
  15. package/src/components/pagination.scss +183 -0
  16. package/src/components/scroll.scss +15 -0
  17. package/src/mixins/index.scss +2 -1
  18. package/src/mixins/layout-gap.scss +7 -0
  19. package/src/tokens/colors.scss +1 -0
  20. package/src/tokens/layout.scss +4 -0
  21. package/src/tokens/palette.scss +5 -0
  22. package/src/tokens/themes.scss +6 -0
package/src/components/scroll.scss CHANGED
@@ -9,3 +9,18 @@
9
9
  overflow-y: auto;
10
10
  -webkit-overflow-scrolling: touch;
11
11
  }
12
+
13
+ .scroll-snap-container {
14
+ gap: 1rem;
15
+ height: max-content;
16
+ margin-block: 1rem;
17
+ scroll-behavior: smooth;
18
+ scroll-snap-type: x mandatory;
19
+ }
20
+
21
+ .scroll-snap-item {
22
+ flex-basis: 90%;
23
+ min-width: 80%;
24
+ height: auto;
25
+ scroll-snap-align: center;
26
+ }
package/src/mixins/index.scss CHANGED
@@ -1,9 +1,10 @@
1
+ @import './media-queries.scss';
1
2
  @import './code-block.scss';
2
3
  @import './control.scss';
3
4
  @import './center.scss';
4
5
  @import './focus.scss';
5
6
  @import './loader.scss';
6
- @import './media-queries.scss';
7
+ @import './layout-gap.scss';
7
8
  @import './font-size.scss';
8
9
  @import './force-colors.scss';
9
10
  @import './transparency.scss';
package/src/mixins/layout-gap.scss ADDED
@@ -0,0 +1,7 @@
1
+ %layout-gap {
2
+ padding-inline: $layout-gap;
3
+
4
+ @include widescreen {
5
+ padding-inline: $layout-widescreen-gap;
6
+ }
7
+ }
package/src/tokens/colors.scss CHANGED
@@ -16,6 +16,7 @@ $box-shadow-color-extra-heavy: var(--theme-box-shadow-extra-heavy);
16
16
 
17
17
  $body-background: var(--theme-body-background);
18
18
  $body-background-medium: var(--theme-body-background-medium);
19
+ $body-background-accent: var(--theme-body-background-accent);
19
20
 
20
21
  $alternate-background: var(--theme-alternate-background);
21
22
  $alternate-background-medium: var(--theme-alternate-background-medium);
package/src/tokens/layout.scss CHANGED
@@ -5,4 +5,8 @@
5
5
  $column-gap: 0.75rem !default;
6
6
  $large-column-gap: 1.5rem !default;
7
7
  $reading-max-width: 50rem;
8
+
9
+ $layout-gap: 16px !default;
10
+ $layout-widescreen-width: $breakpoint-widescreen - $layout-gap * 2 !default;
11
+ $layout-widescreen-gap: calc(50% - #{$layout-widescreen-width} / 2) !default;
8
12
  //@end-sass-export-section
package/src/tokens/palette.scss CHANGED
@@ -84,6 +84,8 @@ $palette-blue-100: #000a13 !default;
84
84
  $palette-blue-opacity-30: hsl(206deg 100% 35% / 30%);
85
85
  $palette-blue-opacity-70: hsl(206deg 100% 35% / 70%);
86
86
 
87
+ $palette-blue-black: #091f2c !default;
88
+
87
89
  // Navy
88
90
 
89
91
  $palette-navy-10: #dfe5ee !default;
@@ -164,6 +166,8 @@ $palette-yellow-100: #2d1703 !default;
164
166
  $palette-yellow-opacity-30: hsl(44deg 100% 50% / 30%) !default;
165
167
  $palette-yellow-opacity-70: hsl(44deg 100% 50% / 70%) !default;
166
168
 
169
+ $palette-yellow-sand: #e8e6df !default;
170
+
167
171
  // Red
168
172
 
169
173
  $palette-red-10: #fde7e9 !default;
@@ -185,4 +189,5 @@ $palette-red-opacity-70: hsl(0deg 100% 33% / 70%) !default;
185
189
  $palette-yellow-high-contrast: #ff0 !default;
186
190
  $palette-yellow-high-contrast-hover: #ff3 !default;
187
191
  $palette-visited-high-contrast: #3cff00 !default;
192
+
188
193
  //@end-sass-export-section
package/src/tokens/themes.scss CHANGED
@@ -14,9 +14,11 @@ $themes: (
14
14
  'overlay': $palette-black-opacity-70,
15
15
  'overlay-invert': $palette-white,
16
16
  'body-background': $palette-white,
17
+ 'body-background-accent': $palette-yellow-sand,
17
18
  'body-background-medium': $palette-grey-20,
18
19
  'alternate-background': $palette-grey-120,
19
20
  'alternate-background-medium': $palette-grey-110,
21
+ 'card-background': $palette-white,
20
22
  'border': $palette-grey-30,
21
23
  'table-header': $palette-grey-30,
22
24
  'table-row': $palette-grey-20,
@@ -111,10 +113,12 @@ $themes: (
111
113
  'overlay': $palette-black-opacity-70,
112
114
  'overlay-invert': $palette-white,
113
115
  'body-background': $palette-grey-120,
116
+ 'body-background-accent': $palette-blue-black,
114
117
  'body-background-medium': $palette-grey-110,
115
118
  'alternate-background': $palette-grey-20,
116
119
  'alternate-background-medium': $palette-grey-10,
117
120
  'border': $palette-grey-100,
121
+ 'card-background': $palette-blue-black,
118
122
  'table-header': $palette-grey-100,
119
123
  'table-row': $palette-grey-110,
120
124
  'table-row-header': $palette-grey-110,
@@ -208,10 +212,12 @@ $themes: (
208
212
  'overlay': $palette-grey-100,
209
213
  'overlay-invert': $palette-white,
210
214
  'body-background': $palette-black,
215
+ 'body-background-accent': $palette-black,
211
216
  'body-background-medium': $palette-black,
212
217
  'alternate-background': $palette-white,
213
218
  'alternate-background-medium': $palette-white,
214
219
  'border': $palette-white,
220
+ 'card-background': $palette-black,
215
221
  'table-header': $palette-grey-90,
216
222
  'table-row': $palette-black,
217
223
  'table-row-header': $palette-grey-120,