@viasat/beam-tokens 2.0.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 (134) hide show
  1. package/README.md +275 -0
  2. package/components/Accordion.css +108 -0
  3. package/components/ActionList.css +150 -0
  4. package/components/Alert.css +244 -0
  5. package/components/Avatar.css +124 -0
  6. package/components/Badge.css +542 -0
  7. package/components/BadgeDot.css +150 -0
  8. package/components/BatchActions.css +34 -0
  9. package/components/Breadcrumb.css +44 -0
  10. package/components/Button.css +466 -0
  11. package/components/Card.css +102 -0
  12. package/components/Chip.css +102 -0
  13. package/components/CloseButton.css +42 -0
  14. package/components/DataTable.css +214 -0
  15. package/components/Dialog.css +150 -0
  16. package/components/Divider.css +32 -0
  17. package/components/EmptyState.css +56 -0
  18. package/components/FileUpload.css +204 -0
  19. package/components/Header.css +94 -0
  20. package/components/HelperText.css +100 -0
  21. package/components/Input.css +328 -0
  22. package/components/Label.css +46 -0
  23. package/components/Link.css +102 -0
  24. package/components/List.css +22 -0
  25. package/components/Menu.css +14 -0
  26. package/components/Pagination.css +58 -0
  27. package/components/Panel.css +74 -0
  28. package/components/Popover.css +56 -0
  29. package/components/ProgressBar.css +78 -0
  30. package/components/SegmentedControl.css +56 -0
  31. package/components/SideNav.css +28 -0
  32. package/components/Slider.css +78 -0
  33. package/components/Spinner.css +120 -0
  34. package/components/Stepper.css +248 -0
  35. package/components/Tabs.css +106 -0
  36. package/components/Toast.css +190 -0
  37. package/components/Tooltip.css +70 -0
  38. package/index.cjs +2 -0
  39. package/index.js +2258 -0
  40. package/package.json +63 -0
  41. package/themes/blue.css +32 -0
  42. package/themes/green.css +44 -0
  43. package/themes/neutral.css +32 -0
  44. package/themes/onefi.css +6069 -0
  45. package/themes/orange.css +32 -0
  46. package/themes/pink.css +32 -0
  47. package/themes/violet.css +32 -0
  48. package/tokens.css +3573 -0
  49. package/tokens.scss +3889 -0
  50. package/types/configs/colors/colors.format.d.ts +11 -0
  51. package/types/configs/colors/colors.transformers.d.ts +9 -0
  52. package/types/configs/colors/colors.utils.d.ts +21 -0
  53. package/types/configs/colors/index.d.ts +5 -0
  54. package/types/configs/colors/sd.colors.config.d.ts +7 -0
  55. package/types/configs/components/components.format.css.d.ts +16 -0
  56. package/types/configs/components/components.transformers.d.ts +4 -0
  57. package/types/configs/components/index.d.ts +2 -0
  58. package/types/configs/components/sd.components.config.d.ts +11 -0
  59. package/types/configs/dimensions/dimension.format.css.d.ts +8 -0
  60. package/types/configs/dimensions/dimensions.transformers.d.ts +9 -0
  61. package/types/configs/dimensions/dimensions.utils.d.ts +55 -0
  62. package/types/configs/dimensions/index.d.ts +7 -0
  63. package/types/configs/dimensions/sd.dimension.config.d.ts +15 -0
  64. package/types/configs/expressive/expressive.format.d.ts +11 -0
  65. package/types/configs/expressive/index.d.ts +3 -0
  66. package/types/configs/expressive/sd.expressive.config.d.ts +6 -0
  67. package/types/configs/index.d.ts +7 -0
  68. package/types/configs/js/index.d.ts +4 -0
  69. package/types/configs/js/js.formatters.d.ts +3 -0
  70. package/types/configs/js/js.transformers.d.ts +10 -0
  71. package/types/configs/js/js.utils.d.ts +2 -0
  72. package/types/configs/js/sd.js.config.d.ts +6 -0
  73. package/types/configs/language/formatters/css.d.ts +17 -0
  74. package/types/configs/language/formatters/index.d.ts +3 -0
  75. package/types/configs/language/index.d.ts +6 -0
  76. package/types/configs/language/sd.language.config.d.ts +7 -0
  77. package/types/configs/language/transformers/attribute.d.ts +10 -0
  78. package/types/configs/language/transformers/index.d.ts +5 -0
  79. package/types/configs/product-type/index.d.ts +5 -0
  80. package/types/configs/product-type/product-type.format.css.d.ts +8 -0
  81. package/types/configs/product-type/product-type.transformers.d.ts +2 -0
  82. package/types/configs/product-type/sd.product-tokens.config.d.ts +7 -0
  83. package/types/configs/shadows/index.d.ts +7 -0
  84. package/types/configs/shadows/sd.shadow.config.d.ts +9 -0
  85. package/types/configs/shadows/shadow.transformers.d.ts +7 -0
  86. package/types/configs/shadows/shadows.format.css.d.ts +8 -0
  87. package/types/configs/shadows/shadows.utils.d.ts +11 -0
  88. package/types/configs/storybook/index.d.ts +4 -0
  89. package/types/configs/storybook/js.formatters.d.ts +3 -0
  90. package/types/configs/storybook/js.transformers.d.ts +5 -0
  91. package/types/configs/storybook/js.utils.d.ts +2 -0
  92. package/types/configs/storybook/sd.storybook.config.d.ts +6 -0
  93. package/types/configs/themes/generateThemes.d.ts +2 -0
  94. package/types/configs/themes/index.d.ts +1 -0
  95. package/types/configs/themes/sd.theme.config.d.ts +3 -0
  96. package/types/configs/themes/theme.utils.d.ts +18 -0
  97. package/types/configs/typography/formatters/css.d.ts +20 -0
  98. package/types/configs/typography/formatters/index.d.ts +3 -0
  99. package/types/configs/typography/helpers.d.ts +84 -0
  100. package/types/configs/typography/index.d.ts +6 -0
  101. package/types/configs/typography/sd.typography.config.d.ts +5 -0
  102. package/types/configs/typography/transformers/attribute.d.ts +16 -0
  103. package/types/configs/typography/transformers/index.d.ts +5 -0
  104. package/types/configs/typography/transformers/value.d.ts +4 -0
  105. package/types/lib/index.d.ts +8 -0
  106. package/types/lib/js/tokens.d.ts +1462 -0
  107. package/types/lib/js/tokensObj.d.ts +15888 -0
  108. package/types/lib/storybook-token-table/tokens.d.ts +9980 -0
  109. package/types/utils/build-tokens.d.ts +1 -0
  110. package/types/utils/constants/class-names.d.ts +19 -0
  111. package/types/utils/constants/index.d.ts +7 -0
  112. package/types/utils/constants/math.d.ts +1 -0
  113. package/types/utils/constants/paths.d.ts +27 -0
  114. package/types/utils/constants/theme.d.ts +24 -0
  115. package/types/utils/constants/token-types.d.ts +48 -0
  116. package/types/utils/constants/types.d.ts +114 -0
  117. package/types/utils/constants/typography.d.ts +39 -0
  118. package/types/utils/dataviz.d.ts +68 -0
  119. package/types/utils/files/cleanup.d.ts +11 -0
  120. package/types/utils/files/index.d.ts +5 -0
  121. package/types/utils/files/merge.d.ts +20 -0
  122. package/types/utils/files/paths.d.ts +25 -0
  123. package/types/utils/files/scan.d.ts +38 -0
  124. package/types/utils/files/validate.d.ts +13 -0
  125. package/types/utils/formatters/className.d.ts +13 -0
  126. package/types/utils/formatters/format.css.d.ts +19 -0
  127. package/types/utils/formatters/format.scss.d.ts +12 -0
  128. package/types/utils/formatters/index.d.ts +4 -0
  129. package/types/utils/formatters/token.utils.css.d.ts +50 -0
  130. package/types/utils/functions.d.ts +13 -0
  131. package/types/utils/index.d.ts +8 -0
  132. package/types/utils/occurrences.d.ts +32 -0
  133. package/types/utils/tokens.d.ts +34 -0
  134. package/types/utils/transformers.d.ts +11 -0
package/themes/orange.css ADDED
@@ -0,0 +1,32 @@
1
+ .bm-orange,
2
+ .bm-light.bm-orange,
3
+ [data-bm-theme~="bm-light"][data-bm-theme~="bm-orange"] {
4
+ --bm-theme-color-brand-100: var(--bm-primitive-color-warm-100, #fff6e1);
5
+ --bm-theme-color-brand-200: var(--bm-primitive-color-warm-200, #ffe9b3);
6
+ --bm-theme-color-brand-300: var(--bm-primitive-color-warm-300, #ffdb7d);
7
+ --bm-theme-color-brand-400: var(--bm-primitive-color-warm-400, #ffb029);
8
+ --bm-theme-color-brand-500: var(--bm-primitive-color-warm-500, #fe9110);
9
+ --bm-theme-color-brand-600: var(--bm-primitive-color-warm-600, #df6901);
10
+ --bm-theme-color-brand-650: var(--bm-primitive-color-warm-650, #cb4e01);
11
+ --bm-theme-color-brand-700: var(--bm-primitive-color-warm-700, #a82200);
12
+ --bm-theme-color-brand-800: var(--bm-primitive-color-warm-800, #941e00);
13
+ --bm-theme-color-brand-900: var(--bm-primitive-color-warm-900, #86090f);
14
+ --bm-theme-color-brand-1000: var(--bm-primitive-color-warm-1000, #5b060a);
15
+ --bm-theme-color-brand-1100: var(--bm-primitive-color-warm-1100, #3a0406);
16
+ }
17
+ .bm-orange,
18
+ .bm-dark.bm-orange,
19
+ [data-bm-theme~="bm-dark"][data-bm-theme~="bm-orange"] {
20
+ --bm-theme-color-brand-100: var(--bm-primitive-color-warm-100, #fff6e1);
21
+ --bm-theme-color-brand-200: var(--bm-primitive-color-warm-200, #ffe9b3);
22
+ --bm-theme-color-brand-300: var(--bm-primitive-color-warm-300, #ffdb7d);
23
+ --bm-theme-color-brand-400: var(--bm-primitive-color-warm-400, #ffb029);
24
+ --bm-theme-color-brand-500: var(--bm-primitive-color-warm-500, #fe9110);
25
+ --bm-theme-color-brand-600: var(--bm-primitive-color-warm-600, #df6901);
26
+ --bm-theme-color-brand-650: var(--bm-primitive-color-warm-650, #cb4e01);
27
+ --bm-theme-color-brand-700: var(--bm-primitive-color-warm-700, #a82200);
28
+ --bm-theme-color-brand-800: var(--bm-primitive-color-warm-800, #941e00);
29
+ --bm-theme-color-brand-900: var(--bm-primitive-color-warm-900, #86090f);
30
+ --bm-theme-color-brand-1000: var(--bm-primitive-color-warm-1000, #5b060a);
31
+ --bm-theme-color-brand-1100: var(--bm-primitive-color-warm-1100, #3a0406);
32
+ }
package/themes/pink.css ADDED
@@ -0,0 +1,32 @@
1
+ .bm-pink,
2
+ .bm-light.bm-pink,
3
+ [data-bm-theme~="bm-light"][data-bm-theme~="bm-pink"] {
4
+ --bm-theme-color-brand-100: var(--bm-primitive-color-pink-100, #fef5fc);
5
+ --bm-theme-color-brand-200: var(--bm-primitive-color-pink-200, #fdddf4);
6
+ --bm-theme-color-brand-300: var(--bm-primitive-color-pink-300, #fccfef);
7
+ --bm-theme-color-brand-400: var(--bm-primitive-color-pink-400, #f9aae4);
8
+ --bm-theme-color-brand-500: var(--bm-primitive-color-pink-500, #fa83dc);
9
+ --bm-theme-color-brand-600: var(--bm-primitive-color-pink-600, #dc5bbc);
10
+ --bm-theme-color-brand-650: var(--bm-primitive-color-pink-650, #cf3fac);
11
+ --bm-theme-color-brand-700: var(--bm-primitive-color-pink-700, #ad258b);
12
+ --bm-theme-color-brand-800: var(--bm-primitive-color-pink-800, #931f76);
13
+ --bm-theme-color-brand-900: var(--bm-primitive-color-pink-900, #661652);
14
+ --bm-theme-color-brand-1000: var(--bm-primitive-color-pink-1000, #570a46);
15
+ --bm-theme-color-brand-1100: var(--bm-primitive-color-pink-1100, #360c2b);
16
+ }
17
+ .bm-pink,
18
+ .bm-dark.bm-pink,
19
+ [data-bm-theme~="bm-dark"][data-bm-theme~="bm-pink"] {
20
+ --bm-theme-color-brand-100: var(--bm-primitive-color-pink-100, #fef5fc);
21
+ --bm-theme-color-brand-200: var(--bm-primitive-color-pink-200, #fdddf4);
22
+ --bm-theme-color-brand-300: var(--bm-primitive-color-pink-300, #fccfef);
23
+ --bm-theme-color-brand-400: var(--bm-primitive-color-pink-400, #f9aae4);
24
+ --bm-theme-color-brand-500: var(--bm-primitive-color-pink-500, #fa83dc);
25
+ --bm-theme-color-brand-600: var(--bm-primitive-color-pink-600, #dc5bbc);
26
+ --bm-theme-color-brand-650: var(--bm-primitive-color-pink-650, #cf3fac);
27
+ --bm-theme-color-brand-700: var(--bm-primitive-color-pink-700, #ad258b);
28
+ --bm-theme-color-brand-800: var(--bm-primitive-color-pink-800, #931f76);
29
+ --bm-theme-color-brand-900: var(--bm-primitive-color-pink-900, #661652);
30
+ --bm-theme-color-brand-1000: var(--bm-primitive-color-pink-1000, #570a46);
31
+ --bm-theme-color-brand-1100: var(--bm-primitive-color-pink-1100, #360c2b);
32
+ }
package/themes/violet.css ADDED
@@ -0,0 +1,32 @@
1
+ .bm-violet,
2
+ .bm-light.bm-violet,
3
+ [data-bm-theme~="bm-light"][data-bm-theme~="bm-violet"] {
4
+ --bm-theme-color-brand-100: var(--bm-primitive-color-violet-100, #f8f6fe);
5
+ --bm-theme-color-brand-200: var(--bm-primitive-color-violet-200, #eae5fb);
6
+ --bm-theme-color-brand-300: var(--bm-primitive-color-violet-300, #dcd3f8);
7
+ --bm-theme-color-brand-400: var(--bm-primitive-color-violet-400, #c8baf3);
8
+ --bm-theme-color-brand-500: var(--bm-primitive-color-violet-500, #b4a0ee);
9
+ --bm-theme-color-brand-600: var(--bm-primitive-color-violet-600, #977de8);
10
+ --bm-theme-color-brand-650: var(--bm-primitive-color-violet-650, #8263e3);
11
+ --bm-theme-color-brand-700: var(--bm-primitive-color-violet-700, #6e49df);
12
+ --bm-theme-color-brand-800: var(--bm-primitive-color-violet-800, #592fda);
13
+ --bm-theme-color-brand-900: var(--bm-primitive-color-violet-900, #3f1da6);
14
+ --bm-theme-color-brand-1000: var(--bm-primitive-color-violet-1000, #2d1475);
15
+ --bm-theme-color-brand-1100: var(--bm-primitive-color-violet-1100, #1c0d4a);
16
+ }
17
+ .bm-violet,
18
+ .bm-dark.bm-violet,
19
+ [data-bm-theme~="bm-dark"][data-bm-theme~="bm-violet"] {
20
+ --bm-theme-color-brand-100: var(--bm-primitive-color-violet-100, #f8f6fe);
21
+ --bm-theme-color-brand-200: var(--bm-primitive-color-violet-200, #eae5fb);
22
+ --bm-theme-color-brand-300: var(--bm-primitive-color-violet-300, #dcd3f8);
23
+ --bm-theme-color-brand-400: var(--bm-primitive-color-violet-400, #c8baf3);
24
+ --bm-theme-color-brand-500: var(--bm-primitive-color-violet-500, #b4a0ee);
25
+ --bm-theme-color-brand-600: var(--bm-primitive-color-violet-600, #977de8);
26
+ --bm-theme-color-brand-650: var(--bm-primitive-color-violet-650, #8263e3);
27
+ --bm-theme-color-brand-700: var(--bm-primitive-color-violet-700, #6e49df);
28
+ --bm-theme-color-brand-800: var(--bm-primitive-color-violet-800, #592fda);
29
+ --bm-theme-color-brand-900: var(--bm-primitive-color-violet-900, #3f1da6);
30
+ --bm-theme-color-brand-1000: var(--bm-primitive-color-violet-1000, #2d1475);
31
+ --bm-theme-color-brand-1100: var(--bm-primitive-color-violet-1100, #1c0d4a);
32
+ }