@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/README.md CHANGED
@@ -1,42 +1,42 @@
1
- # Atlas CSS
2
-
3
- Welcome to the Atlas CSS framework, the code backing the Atlas design system. This framework is built and maintained by the Developer Relations web team for use across Microsoft.
4
-
5
- ## Use atlas-css on Code Pen
6
-
7
- [Using CodePen as a sandbox](https://codepen.io/wibjorn/pen/JjEzrQN), you can try out the framework.
8
-
9
- ## Installation
10
-
11
- Use NPM to add `@microsoft/atlas-css` to your project.
12
-
13
- ```sh
14
- # install with NPM
15
- npm install --save @microsoft/atlas-css
16
- ```
17
-
18
- Alternatively, you may access our scss directly for prototyping purposes at the following url:
19
-
20
- ```http
21
- https://unpkg.com/browse/@microsoft/atlas-css/index.scss
22
- ```
23
-
24
- ## Project Structure
25
-
26
- Each folder has an index file and a README that explains the nature of the folder. Each folder contains an `index.scss` file that imports all files within that folder. All folders can be imported at once via the [top-level index.scss file](.\index.scss).
27
-
28
- ```txt
29
- css
30
- └───src
31
- ├───tokens/
32
- ├───mixins/
33
- ├───core/
34
- ├───atomics/
35
- └───components/
36
- ```
37
-
38
- ### Tokens
39
-
40
- The tokens folder is the place where we define variables for use. This folder produces no output when included by itself. It's primary purpose is to provide a central place to define shared values used across the framework.
41
-
42
- All variable declarations in the tokens folder make use of the [`!default`](https://sass-lang.com/documentation/variables#default-values) flag, so you can override them by defining your own values before importing atlas-css.
1
+ # Atlas CSS
2
+
3
+ Welcome to the Atlas CSS framework, the code backing the Atlas design system. This framework is built and maintained by the Developer Relations web team for use across Microsoft.
4
+
5
+ ## Use atlas-css on Code Pen
6
+
7
+ [Using CodePen as a sandbox](https://codepen.io/wibjorn/pen/JjEzrQN), you can try out the framework.
8
+
9
+ ## Installation
10
+
11
+ Use NPM to add `@microsoft/atlas-css` to your project.
12
+
13
+ ```sh
14
+ # install with NPM
15
+ npm install --save @microsoft/atlas-css
16
+ ```
17
+
18
+ Alternatively, you may access our scss directly for prototyping purposes at the following url:
19
+
20
+ ```http
21
+ https://unpkg.com/browse/@microsoft/atlas-css/index.scss
22
+ ```
23
+
24
+ ## Project Structure
25
+
26
+ Each folder has an index file and a README that explains the nature of the folder. Each folder contains an `index.scss` file that imports all files within that folder. All folders can be imported at once via the [top-level index.scss file](.\index.scss).
27
+
28
+ ```txt
29
+ css
30
+ └───src
31
+ ├───tokens/
32
+ ├───mixins/
33
+ ├───core/
34
+ ├───atomics/
35
+ └───components/
36
+ ```
37
+
38
+ ### Tokens
39
+
40
+ The tokens folder is the place where we define variables for use. This folder produces no output when included by itself. It's primary purpose is to provide a central place to define shared values used across the framework.
41
+
42
+ All variable declarations in the tokens folder make use of the [`!default`](https://sass-lang.com/documentation/variables#default-values) flag, so you can override them by defining your own values before importing atlas-css.