@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/banner.scss CHANGED
@@ -1,69 +1,69 @@
1
- $banner-background: $info-background !default;
2
- $banner-padding: $spacer-5 !default;
3
-
4
- $banner-font-size: $font-size-7 !default;
5
- $banner-color: $info-dark !default;
6
-
7
- $banner-border-color: $border-white-high-contrast !default;
8
- $banner-border-width: $border-width !default;
9
-
10
- $banner-dismiss-margin: $spacer-2 !default;
11
-
12
- .banner {
13
- @extend %layout-gap;
14
-
15
- display: grid;
16
- position: relative;
17
- grid-template: auto / 1fr auto;
18
- grid-template-areas: 'banner-content dismiss';
19
- outline-color: $text;
20
- background-color: $banner-background;
21
- color: $banner-color;
22
- font-size: $banner-font-size;
23
- line-height: $line-height-normal;
24
- padding-block: $banner-padding;
25
- word-wrap: break-word;
26
- word-break: break-word;
27
- border-block: $banner-border-width solid $banner-border-color;
28
-
29
- &.is-loading {
30
- color: transparent;
31
-
32
- > :first-child {
33
- margin-inline-start: calc($banner-padding + 0.375em);
34
- }
35
-
36
- &::before {
37
- @include loader;
38
-
39
- position: absolute;
40
- inset-block-start: $banner-padding;
41
- inset-inline-start: $layout-gap;
42
- border-color: transparent transparent $banner-color $banner-color;
43
-
44
- @include widescreen {
45
- inset-inline-start: $layout-widescreen-gap;
46
- }
47
- }
48
- }
49
-
50
- .banner-content {
51
- grid-area: banner-content;
52
-
53
- a:not(.button) {
54
- color: currentColor;
55
- font-weight: $weight-semibold;
56
-
57
- .theme-high-contrast & {
58
- color: $hyperlink;
59
- }
60
- }
61
- }
62
-
63
- .banner-dismiss {
64
- @include dismiss-square;
65
-
66
- grid-area: dismiss;
67
- margin-inline-start: $banner-dismiss-margin;
68
- }
69
- }
1
+ $banner-background: $info-background !default;
2
+ $banner-padding: $spacer-5 !default;
3
+
4
+ $banner-font-size: $font-size-7 !default;
5
+ $banner-color: $info-dark !default;
6
+
7
+ $banner-border-color: $border-white-high-contrast !default;
8
+ $banner-border-width: $border-width !default;
9
+
10
+ $banner-dismiss-margin: $spacer-2 !default;
11
+
12
+ .banner {
13
+ @extend %layout-gap;
14
+
15
+ display: grid;
16
+ position: relative;
17
+ grid-template: auto / 1fr auto;
18
+ grid-template-areas: 'banner-content dismiss';
19
+ outline-color: $text;
20
+ background-color: $banner-background;
21
+ color: $banner-color;
22
+ font-size: $banner-font-size;
23
+ line-height: $line-height-normal;
24
+ padding-block: $banner-padding;
25
+ word-wrap: break-word;
26
+ word-break: break-word;
27
+ border-block: $banner-border-width solid $banner-border-color;
28
+
29
+ &.is-loading {
30
+ color: transparent;
31
+
32
+ > :first-child {
33
+ margin-inline-start: calc($banner-padding + 0.375em);
34
+ }
35
+
36
+ &::before {
37
+ @include loader;
38
+
39
+ position: absolute;
40
+ inset-block-start: $banner-padding;
41
+ inset-inline-start: $layout-gap;
42
+ border-color: transparent transparent $banner-color $banner-color;
43
+
44
+ @include widescreen {
45
+ inset-inline-start: $layout-widescreen-gap;
46
+ }
47
+ }
48
+ }
49
+
50
+ .banner-content {
51
+ grid-area: banner-content;
52
+
53
+ a:not(.button) {
54
+ color: currentColor;
55
+ font-weight: $weight-semibold;
56
+
57
+ .theme-high-contrast & {
58
+ color: $hyperlink;
59
+ }
60
+ }
61
+ }
62
+
63
+ .banner-dismiss {
64
+ @include dismiss-square;
65
+
66
+ grid-area: dismiss;
67
+ margin-inline-start: $banner-dismiss-margin;
68
+ }
69
+ }
package/src/components/breadcrumbs.scss CHANGED
@@ -1,37 +1,37 @@
1
- $breadcrumb-font-size: $font-size-8 !default;
2
- $breadcrumb-spacing-horizontal: 0.25em !default;
3
- $breadcrumb-spacing-vertical: 0.375em !default;
4
- $breadcrumb-separator: '\00200B/' !default;
5
-
6
- %breadcrumbs-slash {
7
- display: inline-block;
8
- color: $text-subtle;
9
- content: $breadcrumb-separator;
10
- }
11
-
12
- .breadcrumbs {
13
- font-size: $breadcrumb-font-size;
14
-
15
- .breadcrumbs-item {
16
- display: inline-block;
17
- padding-block: $breadcrumb-spacing-vertical;
18
-
19
- &:not(.breadcrumbs-item-slashless)::after {
20
- @extend %breadcrumbs-slash;
21
-
22
- margin-inline: $breadcrumb-spacing-horizontal;
23
- }
24
- }
25
-
26
- // stylelint-disable selector-max-specificity
27
-
28
- &.breadcrumbs-initial-slash {
29
- .breadcrumbs-item:first-child::before,
30
- .breadcrumbs-item[hidden] + .breadcrumbs-item::before {
31
- @extend %breadcrumbs-slash;
32
-
33
- margin-inline: 0.0625em $breadcrumb-spacing-horizontal;
34
- }
35
- }
36
- // stylelint-enable
37
- }
1
+ $breadcrumb-font-size: $font-size-8 !default;
2
+ $breadcrumb-spacing-horizontal: 0.25em !default;
3
+ $breadcrumb-spacing-vertical: 0.375em !default;
4
+ $breadcrumb-separator: '\00200B/' !default;
5
+
6
+ %breadcrumbs-slash {
7
+ display: inline-block;
8
+ color: $text-subtle;
9
+ content: $breadcrumb-separator;
10
+ }
11
+
12
+ .breadcrumbs {
13
+ font-size: $breadcrumb-font-size;
14
+
15
+ .breadcrumbs-item {
16
+ display: inline-block;
17
+ padding-block: $breadcrumb-spacing-vertical;
18
+
19
+ &:not(.breadcrumbs-item-slashless)::after {
20
+ @extend %breadcrumbs-slash;
21
+
22
+ margin-inline: $breadcrumb-spacing-horizontal;
23
+ }
24
+ }
25
+
26
+ // stylelint-disable selector-max-specificity
27
+
28
+ &.breadcrumbs-initial-slash {
29
+ .breadcrumbs-item:first-child::before,
30
+ .breadcrumbs-item[hidden] + .breadcrumbs-item::before {
31
+ @extend %breadcrumbs-slash;
32
+
33
+ margin-inline: 0.0625em $breadcrumb-spacing-horizontal;
34
+ }
35
+ }
36
+ // stylelint-enable
37
+ }
package/src/components/button-reset.scss CHANGED
@@ -1,8 +1,8 @@
1
- .button-reset {
2
- @include transparent-effects;
3
-
4
- display: inline-block;
5
- padding: 0;
6
- border: 0;
7
- cursor: pointer;
8
- }
1
+ .button-reset {
2
+ @include transparent-effects;
3
+
4
+ display: inline-block;
5
+ padding: 0;
6
+ border: 0;
7
+ cursor: pointer;
8
+ }