@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/layout.scss CHANGED
@@ -1,189 +1,189 @@
1
- @use 'sass:math';
2
-
3
- $quarter-widescreen: math.div($breakpoint-widescreen, 4);
4
- $half-widescreen: math.div($breakpoint-widescreen, 2);
5
- $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
6
-
7
- .layout {
8
- display: flex;
9
- flex-direction: column;
10
- max-inline-size: 100vw;
11
- overflow-x: hidden;
12
-
13
- // --layout-gutter by default, see tokens/layout.scss
14
- #{$layout-gap-custom-property-name}: $layout-gap;
15
- #{$layout-gap-scalable-custom-property-name}: $layout-gap;
16
-
17
- @include widescreen {
18
- #{$layout-gap-scalable-custom-property-name}: $layout-widescreen-gap;
19
- }
20
- }
21
-
22
- .layout-padding {
23
- padding-inline: var(#{$layout-gap-custom-property-name}) !important;
24
- }
25
-
26
- .layout-margin {
27
- margin-inline: var(#{$layout-gap-scalable-custom-property-name}) !important;
28
- }
29
-
30
- .layout-body {
31
- display: grid;
32
- width: 100%;
33
- max-width: 100%;
34
- }
35
-
36
- // grid-area values
37
-
38
- .layout-body-header {
39
- grid-area: header;
40
- }
41
-
42
- .layout-body-hero {
43
- grid-area: hero;
44
- }
45
-
46
- .layout-body-menu {
47
- grid-area: menu;
48
- }
49
-
50
- .layout-body-main {
51
- grid-area: main;
52
- }
53
-
54
- .layout-body-aside {
55
- grid-area: aside;
56
- }
57
-
58
- .layout-body-footer {
59
- grid-area: footer;
60
- }
61
-
62
- .layout-body-hero,
63
- .layout-body-main,
64
- .layout-body-footer,
65
- .layout-body-aside,
66
- .layout-body-menu {
67
- &:empty {
68
- display: none;
69
- }
70
- }
71
-
72
- .layout,
73
- .layout.layout-single {
74
- .layout-body {
75
- grid-template: auto auto auto 1fr auto auto / 1fr;
76
- grid-template-areas: 'header' 'hero' 'menu' 'main' 'aside' 'footer';
77
- }
78
- }
79
-
80
- .layout.layout-holy-grail {
81
- .layout-body {
82
- grid-template: auto auto auto 1fr auto auto / 1fr;
83
- grid-template-areas: 'header' 'hero' 'menu' 'main' 'aside' 'footer';
84
-
85
- @include tablet {
86
- grid-template: auto auto 1fr auto auto / 1fr 2fr;
87
- grid-template-areas:
88
- 'header header'
89
- 'hero hero'
90
- 'menu main'
91
- 'menu aside'
92
- 'footer footer';
93
- }
94
-
95
- @include desktop {
96
- grid-template: auto auto 1fr auto / 1fr 2fr 1fr;
97
- grid-template-areas:
98
- 'header header header'
99
- 'hero hero hero'
100
- 'menu main aside'
101
- 'footer footer footer';
102
- }
103
-
104
- @include widescreen {
105
- grid-template: auto auto 1fr auto / auto #{$quarter-widescreen} #{$half-widescreen} #{$quarter-widescreen} auto;
106
- grid-template-areas:
107
- 'header header header header header'
108
- 'hero hero hero hero hero'
109
- '. menu main aside .'
110
- 'footer footer footer footer footer';
111
- }
112
- }
113
- }
114
-
115
- .layout.layout-sidecar-left {
116
- .layout-body-aside {
117
- display: none;
118
- }
119
-
120
- .layout-body {
121
- grid-template: auto auto auto 1fr auto / 1fr;
122
- grid-template-areas: 'header' 'hero' 'menu' 'main' 'footer';
123
-
124
- @include tablet {
125
- grid-template: auto auto 1fr auto / 1fr 2fr;
126
- grid-template-areas:
127
- 'header header'
128
- 'hero hero'
129
- 'menu main'
130
- 'footer footer';
131
- }
132
-
133
- @include desktop {
134
- grid-template: auto auto 1fr auto / 1fr 3fr;
135
- grid-template-areas:
136
- 'header header'
137
- 'hero hero'
138
- 'menu main'
139
- 'footer footer';
140
- }
141
-
142
- @include widescreen {
143
- grid-template: auto auto 1fr auto / auto #{$quarter-widescreen} #{$three-quarters-widescreen} auto;
144
- grid-template-areas:
145
- 'header header header header'
146
- 'hero hero hero hero'
147
- '. menu main .'
148
- 'footer footer footer footer';
149
- }
150
- }
151
- }
152
-
153
- .layout.layout-sidecar-right {
154
- .layout-body-menu {
155
- display: none;
156
- }
157
-
158
- .layout-body {
159
- grid-template: auto auto auto 1fr auto / 1fr;
160
- grid-template-areas: 'header' 'hero' 'main' 'aside' 'footer';
161
-
162
- @include tablet {
163
- grid-template: auto auto 1fr auto / 2fr 1fr;
164
- grid-template-areas:
165
- 'header header'
166
- 'hero hero'
167
- 'main aside '
168
- 'footer footer';
169
- }
170
-
171
- @include desktop {
172
- grid-template: auto auto 1fr auto / 3fr 1fr;
173
- grid-template-areas:
174
- 'header header'
175
- 'hero hero'
176
- 'main aside '
177
- 'footer footer';
178
- }
179
-
180
- @include widescreen {
181
- grid-template: auto auto 1fr auto / auto #{$three-quarters-widescreen} #{$quarter-widescreen} auto;
182
- grid-template-areas:
183
- 'header header header header'
184
- 'hero hero hero hero'
185
- '. main aside .'
186
- 'footer footer footer footer';
187
- }
188
- }
189
- }
1
+ @use 'sass:math';
2
+
3
+ $quarter-widescreen: math.div($breakpoint-widescreen, 4);
4
+ $half-widescreen: math.div($breakpoint-widescreen, 2);
5
+ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
6
+
7
+ .layout {
8
+ display: flex;
9
+ flex-direction: column;
10
+ max-inline-size: 100vw;
11
+ overflow-x: hidden;
12
+
13
+ // --layout-gutter by default, see tokens/layout.scss
14
+ #{$layout-gap-custom-property-name}: $layout-gap;
15
+ #{$layout-gap-scalable-custom-property-name}: $layout-gap;
16
+
17
+ @include widescreen {
18
+ #{$layout-gap-scalable-custom-property-name}: $layout-widescreen-gap;
19
+ }
20
+ }
21
+
22
+ .layout-padding {
23
+ padding-inline: var(#{$layout-gap-custom-property-name}) !important;
24
+ }
25
+
26
+ .layout-margin {
27
+ margin-inline: var(#{$layout-gap-scalable-custom-property-name}) !important;
28
+ }
29
+
30
+ .layout-body {
31
+ display: grid;
32
+ width: 100%;
33
+ max-width: 100%;
34
+ }
35
+
36
+ // grid-area values
37
+
38
+ .layout-body-header {
39
+ grid-area: header;
40
+ }
41
+
42
+ .layout-body-hero {
43
+ grid-area: hero;
44
+ }
45
+
46
+ .layout-body-menu {
47
+ grid-area: menu;
48
+ }
49
+
50
+ .layout-body-main {
51
+ grid-area: main;
52
+ }
53
+
54
+ .layout-body-aside {
55
+ grid-area: aside;
56
+ }
57
+
58
+ .layout-body-footer {
59
+ grid-area: footer;
60
+ }
61
+
62
+ .layout-body-hero,
63
+ .layout-body-main,
64
+ .layout-body-footer,
65
+ .layout-body-aside,
66
+ .layout-body-menu {
67
+ &:empty {
68
+ display: none;
69
+ }
70
+ }
71
+
72
+ .layout,
73
+ .layout.layout-single {
74
+ .layout-body {
75
+ grid-template: auto auto auto 1fr auto auto / 1fr;
76
+ grid-template-areas: 'header' 'hero' 'menu' 'main' 'aside' 'footer';
77
+ }
78
+ }
79
+
80
+ .layout.layout-holy-grail {
81
+ .layout-body {
82
+ grid-template: auto auto auto 1fr auto auto / 1fr;
83
+ grid-template-areas: 'header' 'hero' 'menu' 'main' 'aside' 'footer';
84
+
85
+ @include tablet {
86
+ grid-template: auto auto 1fr auto auto / 1fr 2fr;
87
+ grid-template-areas:
88
+ 'header header'
89
+ 'hero hero'
90
+ 'menu main'
91
+ 'menu aside'
92
+ 'footer footer';
93
+ }
94
+
95
+ @include desktop {
96
+ grid-template: auto auto 1fr auto / 1fr 2fr 1fr;
97
+ grid-template-areas:
98
+ 'header header header'
99
+ 'hero hero hero'
100
+ 'menu main aside'
101
+ 'footer footer footer';
102
+ }
103
+
104
+ @include widescreen {
105
+ grid-template: auto auto 1fr auto / auto #{$quarter-widescreen} #{$half-widescreen} #{$quarter-widescreen} auto;
106
+ grid-template-areas:
107
+ 'header header header header header'
108
+ 'hero hero hero hero hero'
109
+ '. menu main aside .'
110
+ 'footer footer footer footer footer';
111
+ }
112
+ }
113
+ }
114
+
115
+ .layout.layout-sidecar-left {
116
+ .layout-body-aside {
117
+ display: none;
118
+ }
119
+
120
+ .layout-body {
121
+ grid-template: auto auto auto 1fr auto / 1fr;
122
+ grid-template-areas: 'header' 'hero' 'menu' 'main' 'footer';
123
+
124
+ @include tablet {
125
+ grid-template: auto auto 1fr auto / 1fr 2fr;
126
+ grid-template-areas:
127
+ 'header header'
128
+ 'hero hero'
129
+ 'menu main'
130
+ 'footer footer';
131
+ }
132
+
133
+ @include desktop {
134
+ grid-template: auto auto 1fr auto / 1fr 3fr;
135
+ grid-template-areas:
136
+ 'header header'
137
+ 'hero hero'
138
+ 'menu main'
139
+ 'footer footer';
140
+ }
141
+
142
+ @include widescreen {
143
+ grid-template: auto auto 1fr auto / auto #{$quarter-widescreen} #{$three-quarters-widescreen} auto;
144
+ grid-template-areas:
145
+ 'header header header header'
146
+ 'hero hero hero hero'
147
+ '. menu main .'
148
+ 'footer footer footer footer';
149
+ }
150
+ }
151
+ }
152
+
153
+ .layout.layout-sidecar-right {
154
+ .layout-body-menu {
155
+ display: none;
156
+ }
157
+
158
+ .layout-body {
159
+ grid-template: auto auto auto 1fr auto / 1fr;
160
+ grid-template-areas: 'header' 'hero' 'main' 'aside' 'footer';
161
+
162
+ @include tablet {
163
+ grid-template: auto auto 1fr auto / 2fr 1fr;
164
+ grid-template-areas:
165
+ 'header header'
166
+ 'hero hero'
167
+ 'main aside '
168
+ 'footer footer';
169
+ }
170
+
171
+ @include desktop {
172
+ grid-template: auto auto 1fr auto / 3fr 1fr;
173
+ grid-template-areas:
174
+ 'header header'
175
+ 'hero hero'
176
+ 'main aside '
177
+ 'footer footer';
178
+ }
179
+
180
+ @include widescreen {
181
+ grid-template: auto auto 1fr auto / auto #{$three-quarters-widescreen} #{$quarter-widescreen} auto;
182
+ grid-template-areas:
183
+ 'header header header header'
184
+ 'hero hero hero hero'
185
+ '. main aside .'
186
+ 'footer footer footer footer';
187
+ }
188
+ }
189
+ }
package/src/components/link-button.scss CHANGED
@@ -1,34 +1,34 @@
1
- /*
2
- * For use on <button> elements to emulate the appearance of standard <a> tags.
3
- */
4
-
5
- .link-button {
6
- @include transparent-effects;
7
-
8
- display: inline-block;
9
- padding: 0;
10
- border: none;
11
- color: $hyperlink;
12
- cursor: pointer;
13
-
14
- &:active,
15
- &.is-active {
16
- text-decoration: underline !important;
17
- }
18
-
19
- &.is-focused,
20
- &:hover,
21
- &.is-hovered {
22
- color: $primary-hover;
23
- text-decoration: underline !important;
24
- }
25
-
26
- @include focus-visible {
27
- color: $primary-hover;
28
- text-decoration: underline !important;
29
- }
30
-
31
- &:visited {
32
- color: $visited;
33
- }
34
- }
1
+ /*
2
+ * For use on <button> elements to emulate the appearance of standard <a> tags.
3
+ */
4
+
5
+ .link-button {
6
+ @include transparent-effects;
7
+
8
+ display: inline-block;
9
+ padding: 0;
10
+ border: none;
11
+ color: $hyperlink;
12
+ cursor: pointer;
13
+
14
+ &:active,
15
+ &.is-active {
16
+ text-decoration: underline !important;
17
+ }
18
+
19
+ &.is-focused,
20
+ &:hover,
21
+ &.is-hovered {
22
+ color: $primary-hover;
23
+ text-decoration: underline !important;
24
+ }
25
+
26
+ @include focus-visible {
27
+ color: $primary-hover;
28
+ text-decoration: underline !important;
29
+ }
30
+
31
+ &:visited {
32
+ color: $visited;
33
+ }
34
+ }