@microsoft/atlas-css 3.43.0 → 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 -27
  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 -128
  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/popover.scss CHANGED
@@ -1,42 +1,42 @@
1
- $popover-background-color: $body-background !default;
2
- $popover-border: $border-width solid $border !default;
3
- $popover-border-radius: $border-radius !default;
4
- $popover-shadow: $box-shadow-heavy !default;
5
- $popover-width: 224px !default;
6
-
7
- .popover {
8
- display: inline-block;
9
- position: relative;
10
-
11
- summary {
12
- list-style: none;
13
-
14
- &::-webkit-details-marker {
15
- display: none;
16
- }
17
- }
18
-
19
- .popover-content {
20
- position: absolute;
21
- width: $popover-width;
22
- margin-block-start: $spacer-3;
23
- padding: $spacer-5;
24
- border: $popover-border;
25
- border-radius: $popover-border-radius;
26
- background-color: $popover-background-color;
27
- box-shadow: $popover-shadow;
28
- z-index: $zindex-popover;
29
- }
30
-
31
- &.popover-right {
32
- .popover-content {
33
- inset-inline-end: 0;
34
- }
35
- }
36
-
37
- &.popover-center {
38
- .popover-content {
39
- inset-inline-start: -25%;
40
- }
41
- }
42
- }
1
+ $popover-background-color: $body-background !default;
2
+ $popover-border: $border-width solid $border !default;
3
+ $popover-border-radius: $border-radius !default;
4
+ $popover-shadow: $box-shadow-heavy !default;
5
+ $popover-width: 224px !default;
6
+
7
+ .popover {
8
+ display: inline-block;
9
+ position: relative;
10
+
11
+ summary {
12
+ list-style: none;
13
+
14
+ &::-webkit-details-marker {
15
+ display: none;
16
+ }
17
+ }
18
+
19
+ .popover-content {
20
+ position: absolute;
21
+ width: $popover-width;
22
+ margin-block-start: $spacer-3;
23
+ padding: $spacer-5;
24
+ border: $popover-border;
25
+ border-radius: $popover-border-radius;
26
+ background-color: $popover-background-color;
27
+ box-shadow: $popover-shadow;
28
+ z-index: $zindex-popover;
29
+ }
30
+
31
+ &.popover-right {
32
+ .popover-content {
33
+ inset-inline-end: 0;
34
+ }
35
+ }
36
+
37
+ &.popover-center {
38
+ .popover-content {
39
+ inset-inline-start: -25%;
40
+ }
41
+ }
42
+ }
package/src/components/scroll.scss CHANGED
@@ -1,26 +1,26 @@
1
- .scroll-horizontal {
2
- overflow-x: auto;
3
- overflow-y: hidden;
4
- -webkit-overflow-scrolling: touch;
5
- }
6
-
7
- .scroll-vertical {
8
- overflow-x: hidden;
9
- overflow-y: auto;
10
- -webkit-overflow-scrolling: touch;
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
- }
1
+ .scroll-horizontal {
2
+ overflow-x: auto;
3
+ overflow-y: hidden;
4
+ -webkit-overflow-scrolling: touch;
5
+ }
6
+
7
+ .scroll-vertical {
8
+ overflow-x: hidden;
9
+ overflow-y: auto;
10
+ -webkit-overflow-scrolling: touch;
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/components/segmented-control.scss CHANGED
@@ -1,128 +1,128 @@
1
- $sc-padding-sm: 0.5em 1em !default;
2
- $sc-padding: 0.75em 1.25em !default;
3
- $sc-padding-lg: 1em 1.5em !default;
4
-
5
- $sc-font-color: $primary !default;
6
- $sc-border: $border-width solid $border !default;
7
- $sc-border-radius-rounded: $border-radius-rounded;
8
- $sc-hover-background-color: $primary-background !default;
9
- $sc-hover-border: $border-width solid $border !default;
10
- $sc-hover-border-color: $primary-hover !default;
11
- $sc-active-hover-background-color: $primary-hover !default;
12
- $sc-active-hover-border-color: $primary-hover !default;
13
- $sc-active-background-color: $primary !default;
14
- $sc-active-border-color: $primary !default;
15
- $sc-active-color: $text-invert !default;
16
-
17
- .segmented-controls {
18
- display: grid;
19
- justify-content: center;
20
- width: 100%;
21
- grid-gap: $spacer-3;
22
- grid-template-columns: max-content auto max-content;
23
- font-size: $font-size-7;
24
- white-space: nowrap;
25
-
26
- .segmented-control-previous,
27
- .segmented-control-next {
28
- display: flex;
29
- align-items: center;
30
- padding: $sc-padding-sm;
31
- border: $sc-border;
32
- border-radius: $sc-border-radius-rounded;
33
- background-color: $sc-active-background-color;
34
- color: $sc-active-color;
35
- font-weight: $weight-semibold;
36
- cursor: pointer;
37
-
38
- &:hover {
39
- background-color: $sc-active-hover-background-color;
40
-
41
- @include forced-colors {
42
- border-color: Highlight;
43
- background-color: Highlight;
44
- color: HighlightText;
45
- forced-color-adjust: none;
46
- }
47
- }
48
-
49
- @include focus-visible() {
50
- outline-color: $text-invert;
51
- outline-offset: -$focus-outline-offset;
52
- }
53
- }
54
-
55
- .segmented-control-list {
56
- grid-column: 2;
57
- display: flex;
58
- align-items: center;
59
- justify-content: flex-start;
60
- border: $sc-border;
61
- border-radius: $sc-border-radius-rounded;
62
- overflow-x: hidden;
63
- }
64
-
65
- .segmented-control {
66
- display: flex;
67
- position: relative;
68
- align-items: center;
69
- justify-content: center;
70
- padding: $sc-padding-sm;
71
- border: none;
72
- border-radius: $sc-border-radius-rounded;
73
- background-color: transparent;
74
- color: $sc-font-color;
75
- font-weight: $weight-semibold;
76
- cursor: pointer;
77
- appearance: none;
78
- vertical-align: top;
79
-
80
- @include focus-visible() {
81
- outline-color: $text-invert;
82
- outline-offset: -$focus-outline-offset;
83
- }
84
-
85
- &:hover {
86
- background-color: $sc-hover-background-color;
87
- z-index: $zindex-hover;
88
-
89
- @include forced-colors {
90
- background-color: Highlight !important;
91
- color: HighlightText !important;
92
- forced-color-adjust: none;
93
- }
94
- }
95
-
96
- &[aria-selected='true'] {
97
- background-color: $sc-active-background-color;
98
- color: $sc-active-color;
99
- z-index: $zindex-active;
100
-
101
- &:hover {
102
- background-color: $sc-active-hover-background-color;
103
- z-index: $zindex-hover;
104
- }
105
-
106
- @include forced-colors {
107
- background-color: SelectedItem;
108
- color: SelectedItemText;
109
- forced-color-adjust: none;
110
- }
111
- }
112
- }
113
-
114
- @include tablet {
115
- .segmented-control,
116
- .segmented-previous,
117
- .segmented-next {
118
- padding: $sc-padding;
119
- }
120
- }
121
- @include desktop {
122
- .segmented-control,
123
- .segmented-previous,
124
- .segmented-next {
125
- padding: $sc-padding-lg;
126
- }
127
- }
128
- }
1
+ $sc-padding-sm: 0.5em 1em !default;
2
+ $sc-padding: 0.75em 1.25em !default;
3
+ $sc-padding-lg: 1em 1.5em !default;
4
+
5
+ $sc-font-color: $primary !default;
6
+ $sc-border: $border-width solid $border !default;
7
+ $sc-border-radius-rounded: $border-radius-rounded;
8
+ $sc-hover-background-color: $primary-background !default;
9
+ $sc-hover-border: $border-width solid $border !default;
10
+ $sc-hover-border-color: $primary-hover !default;
11
+ $sc-active-hover-background-color: $primary-hover !default;
12
+ $sc-active-hover-border-color: $primary-hover !default;
13
+ $sc-active-background-color: $primary !default;
14
+ $sc-active-border-color: $primary !default;
15
+ $sc-active-color: $text-invert !default;
16
+
17
+ .segmented-controls {
18
+ display: grid;
19
+ justify-content: center;
20
+ width: 100%;
21
+ grid-gap: $spacer-3;
22
+ grid-template-columns: max-content auto max-content;
23
+ font-size: $font-size-7;
24
+ white-space: nowrap;
25
+
26
+ .segmented-control-previous,
27
+ .segmented-control-next {
28
+ display: flex;
29
+ align-items: center;
30
+ padding: $sc-padding-sm;
31
+ border: $sc-border;
32
+ border-radius: $sc-border-radius-rounded;
33
+ background-color: $sc-active-background-color;
34
+ color: $sc-active-color;
35
+ font-weight: $weight-semibold;
36
+ cursor: pointer;
37
+
38
+ &:hover {
39
+ background-color: $sc-active-hover-background-color;
40
+
41
+ @include forced-colors {
42
+ border-color: Highlight;
43
+ background-color: Highlight;
44
+ color: HighlightText;
45
+ forced-color-adjust: none;
46
+ }
47
+ }
48
+
49
+ @include focus-visible() {
50
+ outline-color: $text-invert;
51
+ outline-offset: -$focus-outline-offset;
52
+ }
53
+ }
54
+
55
+ .segmented-control-list {
56
+ grid-column: 2;
57
+ display: flex;
58
+ align-items: center;
59
+ justify-content: flex-start;
60
+ border: $sc-border;
61
+ border-radius: $sc-border-radius-rounded;
62
+ overflow-x: hidden;
63
+ }
64
+
65
+ .segmented-control {
66
+ display: flex;
67
+ position: relative;
68
+ align-items: center;
69
+ justify-content: center;
70
+ padding: $sc-padding-sm;
71
+ border: none;
72
+ border-radius: $sc-border-radius-rounded;
73
+ background-color: transparent;
74
+ color: $sc-font-color;
75
+ font-weight: $weight-semibold;
76
+ cursor: pointer;
77
+ appearance: none;
78
+ vertical-align: top;
79
+
80
+ @include focus-visible() {
81
+ outline-color: $text-invert;
82
+ outline-offset: -$focus-outline-offset;
83
+ }
84
+
85
+ &:hover {
86
+ background-color: $sc-hover-background-color;
87
+ z-index: $zindex-hover;
88
+
89
+ @include forced-colors {
90
+ background-color: Highlight !important;
91
+ color: HighlightText !important;
92
+ forced-color-adjust: none;
93
+ }
94
+ }
95
+
96
+ &[aria-selected='true'] {
97
+ background-color: $sc-active-background-color;
98
+ color: $sc-active-color;
99
+ z-index: $zindex-active;
100
+
101
+ &:hover {
102
+ background-color: $sc-active-hover-background-color;
103
+ z-index: $zindex-hover;
104
+ }
105
+
106
+ @include forced-colors {
107
+ background-color: SelectedItem;
108
+ color: SelectedItemText;
109
+ forced-color-adjust: none;
110
+ }
111
+ }
112
+ }
113
+
114
+ @include tablet {
115
+ .segmented-control,
116
+ .segmented-previous,
117
+ .segmented-next {
118
+ padding: $sc-padding;
119
+ }
120
+ }
121
+ @include desktop {
122
+ .segmented-control,
123
+ .segmented-previous,
124
+ .segmented-next {
125
+ padding: $sc-padding-lg;
126
+ }
127
+ }
128
+ }