@microsoft/atlas-css 3.4.0 → 3.8.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 (36) hide show
  1. package/dist/index.css +2 -4
  2. package/dist/index.css.map +1 -1
  3. package/dist/tokens.json +1 -1
  4. package/dist/tokens.ts +2 -0
  5. package/package.json +10 -14
  6. package/src/atomics/border.scss +18 -2
  7. package/src/atomics/flex.scss +2 -0
  8. package/src/atomics/image.scss +7 -0
  9. package/src/atomics/index.scss +4 -0
  10. package/src/atomics/list.scss +3 -0
  11. package/src/atomics/overflow.scss +9 -0
  12. package/src/atomics/position.scss +2 -2
  13. package/src/atomics/spacing-auto.scss +51 -0
  14. package/src/atomics/spacing.scss +41 -16
  15. package/src/atomics/typography.scss +54 -0
  16. package/src/components/breadcrumbs.scss +20 -3
  17. package/src/components/button.scss +6 -6
  18. package/src/components/buttons.scss +9 -9
  19. package/src/components/index.scss +1 -0
  20. package/src/components/markdown.scss +21 -19
  21. package/src/components/popover.scss +5 -2
  22. package/src/components/scroll.scss +11 -0
  23. package/src/components/table.scss +1 -1
  24. package/src/core/animations.scss +4 -0
  25. package/src/core/bare-elements.scss +5 -0
  26. package/src/core/index.scss +3 -2
  27. package/src/core/minireset.scss +79 -0
  28. package/src/core/normalize.scss +353 -0
  29. package/src/core/themes.scss +5 -0
  30. package/src/index.scss +0 -1
  31. package/src/mixins/control.scss +2 -4
  32. package/src/mixins/focus.scss +1 -0
  33. package/src/tokens/border.scss +2 -1
  34. package/src/tokens/direction.scss +7 -0
  35. package/src/tokens/palette.scss +42 -42
  36. package/src/patterns/index.scss +0 -1
package/src/index.scss CHANGED
@@ -2,5 +2,4 @@
2
2
  @import './mixins/index.scss';
3
3
  @import './core/index.scss';
4
4
  @import './components/index.scss';
5
- @import './patterns/index.scss';
6
5
  @import './atomics/index.scss';
package/src/mixins/control.scss CHANGED
@@ -13,10 +13,8 @@ $control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default;
13
13
  align-items: center;
14
14
  justify-content: flex-start;
15
15
  min-height: 2.25em;
16
- padding-top: $control-padding-vertical;
17
- padding-right: $control-padding-horizontal;
18
- padding-bottom: $control-padding-vertical;
19
- padding-left: $control-padding-horizontal;
16
+ padding-block: $control-padding-vertical;
17
+ padding-inline: $control-padding-horizontal;
20
18
  border: $control-border-width solid transparent;
21
19
  border-radius: $control-radius;
22
20
  font-size: $control-font-size;
package/src/mixins/focus.scss CHANGED
@@ -1,3 +1,4 @@
1
+ // stylelint-disable declaration-block-no-redundant-longhand-properties
1
2
  @mixin focus() {
2
3
  outline-color: inherit;
3
4
  outline-offset: $focus-outline-offset;
package/src/tokens/border.scss CHANGED
@@ -2,7 +2,8 @@
2
2
  * @sass-export-section="border"
3
3
  */
4
4
  $border-width: 1px !default;
5
- $border-width-lg: 0.5rem !default;
5
+ $border-width-md: 0.125rem !default;
6
+ $border-width-lg: 0.25rem !default;
6
7
  $border-radius: 0.25rem !default;
7
8
  $border-radius-lg: 0.5rem !default;
8
9
  //@end-sass-export-section
package/src/tokens/direction.scss CHANGED
@@ -16,3 +16,10 @@ $directions: (
16
16
  'left': $user-left
17
17
  );
18
18
  //@end-sass-export-section
19
+
20
+ $logical-directions: (
21
+ 'top': 'block-start',
22
+ 'right': 'inline-end',
23
+ 'bottom': 'block-end',
24
+ 'left': 'inline-start'
25
+ );
package/src/tokens/palette.scss CHANGED
@@ -28,45 +28,45 @@ $palette-grey-120: #171717 !default;
28
28
 
29
29
  $palette-black: #000 !default;
30
30
 
31
- $palette-black-opacity-90: hsla(0, 0%, 0%, 0.9) !default;
32
- $palette-black-opacity-80: hsla(0, 0%, 0%, 0.8) !default;
33
- $palette-black-opacity-70: hsla(0, 0%, 0%, 0.7) !default;
34
- $palette-black-opacity-60: hsla(0, 0%, 0%, 0.6) !default;
35
- $palette-black-opacity-50: hsla(0, 0%, 0%, 0.5) !default;
36
- $palette-black-opacity-40: hsla(0, 0%, 0%, 0.4) !default;
37
- $palette-black-opacity-30: hsla(0, 0%, 0%, 0.3) !default;
38
- $palette-black-opacity-20: hsla(0, 0%, 0%, 0.2) !default;
39
- $palette-black-opacity-10: hsla(0, 0%, 0%, 0.1) !default;
40
- $palette-black-opacity-0: hsla(0, 0%, 0%, 0) !default;
31
+ $palette-black-opacity-90: hsl(0deg 0% 0% / 90%) !default;
32
+ $palette-black-opacity-80: hsl(0deg 0% 0% / 80%) !default;
33
+ $palette-black-opacity-70: hsl(0deg 0% 0% / 70%) !default;
34
+ $palette-black-opacity-60: hsl(0deg 0% 0% / 60%) !default;
35
+ $palette-black-opacity-50: hsl(0deg 0% 0% / 50%) !default;
36
+ $palette-black-opacity-40: hsl(0deg 0% 0% / 40%) !default;
37
+ $palette-black-opacity-30: hsl(0deg 0% 0% / 30%) !default;
38
+ $palette-black-opacity-20: hsl(0deg 0% 0% / 20%) !default;
39
+ $palette-black-opacity-10: hsl(0deg 0% 0% / 10%) !default;
40
+ $palette-black-opacity-0: hsl(0deg 0% 0% / 0%) !default;
41
41
 
42
42
  // White
43
43
 
44
44
  $palette-white: #fff !default;
45
45
 
46
- $palette-white-opacity-0: hsla(0, 0%, 100%, 0);
47
- $palette-white-opacity-10: hsla(0, 0%, 100%, 0.1);
48
- $palette-white-opacity-20: hsla(0, 0%, 100%, 0.2);
49
- $palette-white-opacity-30: hsla(0, 0%, 100%, 0.3);
50
- $palette-white-opacity-40: hsla(0, 0%, 100%, 0.4);
51
- $palette-white-opacity-50: hsla(0, 0%, 100%, 0.5);
52
- $palette-white-opacity-60: hsla(0, 0%, 100%, 0.6);
53
- $palette-white-opacity-70: hsla(0, 0%, 100%, 0.7);
54
- $palette-white-opacity-80: hsla(0, 0%, 100%, 0.8);
55
- $palette-white-opacity-90: hsla(0, 0%, 100%, 0.9);
46
+ $palette-white-opacity-0: hsl(0deg 0% 100% / 0%);
47
+ $palette-white-opacity-10: hsl(0deg 0% 100% / 10%);
48
+ $palette-white-opacity-20: hsl(0deg 0% 100% / 20%);
49
+ $palette-white-opacity-30: hsl(0deg 0% 100% / 30%);
50
+ $palette-white-opacity-40: hsl(0deg 0% 100% / 40%);
51
+ $palette-white-opacity-50: hsl(0deg 0% 100% / 50%);
52
+ $palette-white-opacity-60: hsl(0deg 0% 100% / 60%);
53
+ $palette-white-opacity-70: hsl(0deg 0% 100% / 70%);
54
+ $palette-white-opacity-80: hsl(0deg 0% 100% / 80%);
55
+ $palette-white-opacity-90: hsl(0deg 0% 100% / 90%);
56
56
 
57
57
  // Values used for shadows
58
58
 
59
- $palette-black-opacity-108: hsla(0, 0%, 0%, 0.11) !default;
60
- $palette-black-opacity-132: hsla(0, 0%, 0%, 0.13) !default;
59
+ $palette-black-opacity-108: hsl(0deg 0% 0% / 11%) !default;
60
+ $palette-black-opacity-132: hsl(0deg 0% 0% / 13%) !default;
61
61
 
62
- $palette-black-opacity-22: hsla(0, 0%, 0%, 0.22) !default;
63
- $palette-black-opacity-18: hsla(0, 0%, 0%, 0.18) !default;
62
+ $palette-black-opacity-22: hsl(0deg 0% 0% / 22%) !default;
63
+ $palette-black-opacity-18: hsl(0deg 0% 0% / 18%) !default;
64
64
 
65
- $palette-white-opacity-108: hsla(0, 0%, 100%, 0.11) !default;
66
- $palette-white-opacity-132: hsla(0, 0%, 100%, 0.13) !default;
65
+ $palette-white-opacity-108: hsl(0deg 0% 100% / 11%) !default;
66
+ $palette-white-opacity-132: hsl(0deg 0% 100% / 13%) !default;
67
67
 
68
- $palette-white-opacity-22: hsla(0, 0%, 100%, 0.22) !default;
69
- $palette-white-opacity-18: hsla(0, 0%, 100%, 0.18) !default;
68
+ $palette-white-opacity-22: hsl(0deg 0% 100% / 22%) !default;
69
+ $palette-white-opacity-18: hsl(0deg 0% 100% / 18%) !default;
70
70
 
71
71
  // Blue
72
72
 
@@ -81,8 +81,8 @@ $palette-blue-80: #004173 !default;
81
81
  $palette-blue-90: #002b4d !default;
82
82
  $palette-blue-100: #000a13 !default;
83
83
 
84
- $palette-blue-opacity-30: hsla(206, 100%, 35%, 0.3);
85
- $palette-blue-opacity-70: hsla(206, 100%, 35%, 0.7);
84
+ $palette-blue-opacity-30: hsl(206deg 100% 35% / 30%);
85
+ $palette-blue-opacity-70: hsl(206deg 100% 35% / 70%);
86
86
 
87
87
  // Navy
88
88
 
@@ -97,8 +97,8 @@ $palette-navy-80: #14294c !default;
97
97
  $palette-navy-90: #061329 !default;
98
98
  $palette-navy-100: #000910 !default;
99
99
 
100
- $palette-navy-opacity-30: hsla(262, 46%, 17%, 0.3) !default;
101
- $palette-navy-opacity-70: hsla(262, 46%, 17%, 0.7) !default;
100
+ $palette-navy-opacity-30: hsl(262deg 46% 17% / 30%) !default;
101
+ $palette-navy-opacity-70: hsl(262deg 46% 17% / 70%) !default;
102
102
 
103
103
  // Turqoise
104
104
 
@@ -113,8 +113,8 @@ $palette-turqoise-80: #19474f !default;
113
113
  $palette-turqoise-90: #0f2a2f !default;
114
114
  $palette-turqoise-100: #050e0f !default;
115
115
 
116
- $palette-navy-opacity-30: hsla(189, 52%, 12%, 0.3) !default;
117
- $palette-navy-opacity-70: hsla(189, 52%, 12%, 0.7) !default;
116
+ $palette-navy-opacity-30: hsl(189deg 52% 12% / 30%) !default;
117
+ $palette-navy-opacity-70: hsl(189deg 52% 12% / 70%) !default;
118
118
 
119
119
  // Green
120
120
 
@@ -129,8 +129,8 @@ $palette-green-80: #054b16 !default;
129
129
  $palette-green-90: #05350c !default;
130
130
  $palette-green-100: #061a00 !default;
131
131
 
132
- $palette-green-opacity-30: hsla(120, 37%, 45%, 0.3) !default;
133
- $palette-green-opacity-70: hsla(120, 37%, 45%, 0.7) !default;
132
+ $palette-green-opacity-30: hsl(120deg 37% 45% / 30%) !default;
133
+ $palette-green-opacity-70: hsl(120deg 37% 45% / 70%) !default;
134
134
 
135
135
  // Purple
136
136
 
@@ -145,8 +145,8 @@ $palette-purple-80: #3b2e58 !default;
145
145
  $palette-purple-90: #201843 !default;
146
146
  $palette-purple-100: #03002c !default;
147
147
 
148
- $palette-purple-opacity-30: hsla(251, 47%, 18%, 0.3) !default;
149
- $palette-purple-opacity-70: hsla(251, 47%, 18%, 0.7) !default;
148
+ $palette-purple-opacity-30: hsl(251deg 47% 18% / 30%) !default;
149
+ $palette-purple-opacity-70: hsl(251deg 47% 18% / 70%) !default;
150
150
 
151
151
  // Yellow
152
152
 
@@ -161,8 +161,8 @@ $palette-yellow-80: #6a4b16 !default;
161
161
  $palette-yellow-90: #4f340e !default;
162
162
  $palette-yellow-100: #2d1703 !default;
163
163
 
164
- $palette-yellow-opacity-30: hsla(44, 100%, 50%, 0.3) !default;
165
- $palette-yellow-opacity-70: hsla(44, 100%, 50%, 0.7) !default;
164
+ $palette-yellow-opacity-30: hsl(44deg 100% 50% / 30%) !default;
165
+ $palette-yellow-opacity-70: hsl(44deg 100% 50% / 70%) !default;
166
166
 
167
167
  // Red
168
168
 
@@ -177,8 +177,8 @@ $palette-red-80: #630001 !default;
177
177
  $palette-red-90: #470001 !default;
178
178
  $palette-red-100: #290001 !default;
179
179
 
180
- $palette-red-opacity-30: hsla(0, 100%, 33%, 0.3) !default;
181
- $palette-red-opacity-70: hsla(0, 100%, 33%, 0.7) !default;
180
+ $palette-red-opacity-30: hsl(0deg 100% 33% / 30%) !default;
181
+ $palette-red-opacity-70: hsl(0deg 100% 33% / 70%) !default;
182
182
 
183
183
  // High Contrast
184
184
 
package/src/patterns/index.scss DELETED
@@ -1 +0,0 @@
1
- // TBD