reshaped 3.8.3 → 3.8.4-canary.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 (232) hide show
  1. package/dist/bundle.css +1 -1
  2. package/dist/bundle.js +8 -8
  3. package/dist/components/Accordion/Accordion.d.ts +1 -6
  4. package/dist/components/Accordion/Accordion.js +0 -4
  5. package/dist/components/Accordion/index.d.ts +8 -1
  6. package/dist/components/Accordion/index.js +7 -1
  7. package/dist/components/Actionable/Actionable.types.d.ts +1 -1
  8. package/dist/components/Autocomplete/Autocomplete.d.ts +2 -4
  9. package/dist/components/Autocomplete/Autocomplete.js +1 -2
  10. package/dist/components/Autocomplete/index.d.ts +5 -1
  11. package/dist/components/Autocomplete/index.js +4 -1
  12. package/dist/components/Autocomplete/tests/Autocomplete.stories.d.ts +1 -1
  13. package/dist/components/Badge/Badge.d.ts +2 -1
  14. package/dist/components/Badge/Badge.js +0 -2
  15. package/dist/components/Badge/Badge.types.d.ts +1 -6
  16. package/dist/components/Badge/index.d.ts +6 -1
  17. package/dist/components/Badge/index.js +5 -1
  18. package/dist/components/Badge/tests/Badge.stories.d.ts +3 -1
  19. package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +1 -4
  20. package/dist/components/Breadcrumbs/Breadcrumbs.js +0 -2
  21. package/dist/components/Breadcrumbs/index.d.ts +6 -1
  22. package/dist/components/Breadcrumbs/index.js +5 -1
  23. package/dist/components/Button/Button.d.ts +14 -1
  24. package/dist/components/Button/Button.js +0 -4
  25. package/dist/components/Button/Button.module.css +1 -1
  26. package/dist/components/Button/Button.types.d.ts +1 -7
  27. package/dist/components/Button/index.d.ts +8 -1
  28. package/dist/components/Button/index.js +7 -1
  29. package/dist/components/Button/tests/Button.stories.d.ts +16 -1
  30. package/dist/components/Carousel/Carousel.types.d.ts +2 -1
  31. package/dist/components/Carousel/CarouselControl.d.ts +2 -1
  32. package/dist/components/ContextMenu/ContextMenu.d.ts +1 -8
  33. package/dist/components/ContextMenu/ContextMenu.js +0 -5
  34. package/dist/components/ContextMenu/index.d.ts +10 -1
  35. package/dist/components/ContextMenu/index.js +9 -1
  36. package/dist/components/DropdownMenu/DropdownMenu.d.ts +7 -15
  37. package/dist/components/DropdownMenu/DropdownMenu.js +7 -14
  38. package/dist/components/DropdownMenu/index.d.ts +12 -1
  39. package/dist/components/DropdownMenu/index.js +11 -1
  40. package/dist/components/DropdownMenu/tests/DropdownMenu.stories.d.ts +5 -5
  41. package/dist/components/FileUpload/FileUpload.d.ts +2 -4
  42. package/dist/components/FileUpload/FileUpload.js +1 -2
  43. package/dist/components/FileUpload/index.d.ts +5 -1
  44. package/dist/components/FileUpload/index.js +4 -1
  45. package/dist/components/FileUpload/tests/FileUpload.stories.d.ts +1 -1
  46. package/dist/components/Flyout/Flyout.d.ts +1 -6
  47. package/dist/components/Flyout/Flyout.js +0 -4
  48. package/dist/components/Flyout/index.d.ts +8 -1
  49. package/dist/components/Flyout/index.js +7 -1
  50. package/dist/components/FormControl/FormControl.d.ts +1 -8
  51. package/dist/components/FormControl/FormControl.js +0 -6
  52. package/dist/components/FormControl/index.d.ts +10 -1
  53. package/dist/components/FormControl/index.js +9 -1
  54. package/dist/components/Grid/Grid.d.ts +4 -4
  55. package/dist/components/Grid/Grid.js +1 -2
  56. package/dist/components/Grid/index.d.ts +5 -1
  57. package/dist/components/Grid/index.js +4 -1
  58. package/dist/components/Grid/tests/Grid.stories.d.ts +2 -4
  59. package/dist/components/MenuItem/MenuItem.d.ts +12 -1
  60. package/dist/components/MenuItem/MenuItem.js +0 -2
  61. package/dist/components/MenuItem/MenuItem.types.d.ts +1 -6
  62. package/dist/components/MenuItem/index.d.ts +6 -1
  63. package/dist/components/MenuItem/index.js +5 -1
  64. package/dist/components/MenuItem/tests/MenuItem.stories.d.ts +13 -1
  65. package/dist/components/Modal/Modal.d.ts +3 -6
  66. package/dist/components/Modal/Modal.js +2 -4
  67. package/dist/components/Modal/index.d.ts +6 -1
  68. package/dist/components/Modal/index.js +5 -1
  69. package/dist/components/Modal/tests/Modal.stories.d.ts +2 -2
  70. package/dist/components/Popover/Popover.d.ts +2 -7
  71. package/dist/components/Popover/Popover.js +1 -4
  72. package/dist/components/Popover/index.d.ts +8 -1
  73. package/dist/components/Popover/index.js +7 -1
  74. package/dist/components/Popover/tests/Popover.stories.d.ts +1 -1
  75. package/dist/components/Resizable/Resizable.d.ts +2 -4
  76. package/dist/components/Resizable/Resizable.js +4 -5
  77. package/dist/components/Resizable/index.d.ts +7 -1
  78. package/dist/components/Resizable/index.js +6 -1
  79. package/dist/components/Resizable/tests/Resizable.stories.d.ts +2 -2
  80. package/dist/components/Select/Select.d.ts +1 -8
  81. package/dist/components/Select/Select.js +0 -6
  82. package/dist/components/Select/index.d.ts +10 -1
  83. package/dist/components/Select/index.js +9 -1
  84. package/dist/components/Stepper/Stepper.d.ts +2 -4
  85. package/dist/components/Stepper/Stepper.js +1 -2
  86. package/dist/components/Stepper/index.d.ts +5 -1
  87. package/dist/components/Stepper/index.js +4 -1
  88. package/dist/components/Stepper/tests/Stepper.stories.d.ts +1 -4
  89. package/dist/components/Table/Table.d.ts +6 -12
  90. package/dist/components/Table/Table.js +5 -10
  91. package/dist/components/Table/index.d.ts +9 -1
  92. package/dist/components/Table/index.js +8 -1
  93. package/dist/components/Table/tests/Table.stories.d.ts +5 -5
  94. package/dist/components/Tabs/Tabs.d.ts +1 -8
  95. package/dist/components/Tabs/Tabs.js +0 -6
  96. package/dist/components/Tabs/index.d.ts +10 -1
  97. package/dist/components/Tabs/index.js +9 -1
  98. package/dist/components/TextArea/TextArea.d.ts +1 -4
  99. package/dist/components/TextArea/TextArea.js +0 -2
  100. package/dist/components/TextArea/index.d.ts +6 -1
  101. package/dist/components/TextArea/index.js +5 -1
  102. package/dist/components/TextField/TextField.d.ts +1 -4
  103. package/dist/components/TextField/TextField.js +0 -2
  104. package/dist/components/TextField/index.d.ts +6 -1
  105. package/dist/components/TextField/index.js +5 -1
  106. package/dist/components/Timeline/Timeline.d.ts +2 -4
  107. package/dist/components/Timeline/Timeline.js +1 -2
  108. package/dist/components/Timeline/index.d.ts +5 -1
  109. package/dist/components/Timeline/index.js +4 -1
  110. package/dist/components/Timeline/tests/Timeline.stories.d.ts +1 -1
  111. package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.d.ts +4 -0
  112. package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.js +15 -0
  113. package/dist/components/View/View.d.ts +4 -4
  114. package/dist/components/View/View.js +1 -2
  115. package/dist/components/View/index.d.ts +5 -1
  116. package/dist/components/View/index.js +4 -1
  117. package/dist/components/View/tests/View.stories.d.ts +2 -4
  118. package/dist/components/_private/Portal/Portal.d.ts +3 -5
  119. package/dist/components/_private/Portal/Portal.js +1 -2
  120. package/dist/components/_private/Portal/index.d.ts +5 -1
  121. package/dist/components/_private/Portal/index.js +4 -1
  122. package/dist/config/postcss.js +3 -0
  123. package/package.json +5 -6
  124. package/dist/cjs/cli/theming/index.d.ts +0 -4
  125. package/dist/cjs/cli/theming/index.js +0 -40
  126. package/dist/cjs/cli/theming/reshaped.config.d.ts +0 -3
  127. package/dist/cjs/cli/theming/reshaped.config.js +0 -25
  128. package/dist/cjs/cli/theming/tailwind.d.ts +0 -2
  129. package/dist/cjs/cli/theming/tailwind.js +0 -83
  130. package/dist/cjs/config/postcss.d.ts +0 -28
  131. package/dist/cjs/config/postcss.js +0 -33
  132. package/dist/cjs/config/tailwind.d.ts +0 -2
  133. package/dist/cjs/config/tailwind.js +0 -86
  134. package/dist/cjs/constants/breakpoints.d.ts +0 -6
  135. package/dist/cjs/constants/breakpoints.js +0 -7
  136. package/dist/cjs/themes/_generator/constants.d.ts +0 -2
  137. package/dist/cjs/themes/_generator/constants.js +0 -11
  138. package/dist/cjs/themes/_generator/definitions/figma.d.ts +0 -3
  139. package/dist/cjs/themes/_generator/definitions/figma.js +0 -197
  140. package/dist/cjs/themes/_generator/definitions/reshaped.d.ts +0 -3
  141. package/dist/cjs/themes/_generator/definitions/reshaped.js +0 -210
  142. package/dist/cjs/themes/_generator/definitions/slate.d.ts +0 -3
  143. package/dist/cjs/themes/_generator/definitions/slate.js +0 -12
  144. package/dist/cjs/themes/_generator/tokens/color/color.transforms.d.ts +0 -4
  145. package/dist/cjs/themes/_generator/tokens/color/color.transforms.js +0 -44
  146. package/dist/cjs/themes/_generator/tokens/color/color.types.d.ts +0 -33
  147. package/dist/cjs/themes/_generator/tokens/color/color.types.js +0 -2
  148. package/dist/cjs/themes/_generator/tokens/color/utilities/a11y.d.ts +0 -20
  149. package/dist/cjs/themes/_generator/tokens/color/utilities/a11y.js +0 -64
  150. package/dist/cjs/themes/_generator/tokens/color/utilities/convert.d.ts +0 -11
  151. package/dist/cjs/themes/_generator/tokens/color/utilities/convert.js +0 -33
  152. package/dist/cjs/themes/_generator/tokens/color/utilities/generateColors.d.ts +0 -4
  153. package/dist/cjs/themes/_generator/tokens/color/utilities/generateColors.js +0 -152
  154. package/dist/cjs/themes/_generator/tokens/color/utilities/generateMetaColors.d.ts +0 -4
  155. package/dist/cjs/themes/_generator/tokens/color/utilities/generateMetaColors.js +0 -68
  156. package/dist/cjs/themes/_generator/tokens/color/utilities/tests/a11y.test.d.ts +0 -1
  157. package/dist/cjs/themes/_generator/tokens/color/utilities/tests/a11y.test.js +0 -38
  158. package/dist/cjs/themes/_generator/tokens/color/utilities/tests/convert.test.d.ts +0 -1
  159. package/dist/cjs/themes/_generator/tokens/color/utilities/tests/convert.test.js +0 -48
  160. package/dist/cjs/themes/_generator/tokens/color/utilities/tests/generateColors.test.d.ts +0 -1
  161. package/dist/cjs/themes/_generator/tokens/color/utilities/tests/generateColors.test.js +0 -21
  162. package/dist/cjs/themes/_generator/tokens/css.d.ts +0 -6
  163. package/dist/cjs/themes/_generator/tokens/css.js +0 -52
  164. package/dist/cjs/themes/_generator/tokens/duration/duration.transforms.d.ts +0 -4
  165. package/dist/cjs/themes/_generator/tokens/duration/duration.transforms.js +0 -11
  166. package/dist/cjs/themes/_generator/tokens/duration/duration.types.d.ts +0 -4
  167. package/dist/cjs/themes/_generator/tokens/duration/duration.types.js +0 -2
  168. package/dist/cjs/themes/_generator/tokens/easing/easing.transforms.d.ts +0 -4
  169. package/dist/cjs/themes/_generator/tokens/easing/easing.transforms.js +0 -11
  170. package/dist/cjs/themes/_generator/tokens/easing/easing.types.d.ts +0 -7
  171. package/dist/cjs/themes/_generator/tokens/easing/easing.types.js +0 -2
  172. package/dist/cjs/themes/_generator/tokens/font/font.transforms.d.ts +0 -4
  173. package/dist/cjs/themes/_generator/tokens/font/font.transforms.js +0 -43
  174. package/dist/cjs/themes/_generator/tokens/font/font.types.d.ts +0 -11
  175. package/dist/cjs/themes/_generator/tokens/font/font.types.js +0 -2
  176. package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.transforms.d.ts +0 -4
  177. package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.transforms.js +0 -11
  178. package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.types.d.ts +0 -4
  179. package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.types.js +0 -2
  180. package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.transforms.d.ts +0 -4
  181. package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.transforms.js +0 -11
  182. package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.types.d.ts +0 -4
  183. package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.types.js +0 -2
  184. package/dist/cjs/themes/_generator/tokens/radius/radius.transforms.d.ts +0 -4
  185. package/dist/cjs/themes/_generator/tokens/radius/radius.transforms.js +0 -11
  186. package/dist/cjs/themes/_generator/tokens/radius/radius.types.d.ts +0 -4
  187. package/dist/cjs/themes/_generator/tokens/radius/radius.types.js +0 -2
  188. package/dist/cjs/themes/_generator/tokens/shadow/shadow.transforms.d.ts +0 -4
  189. package/dist/cjs/themes/_generator/tokens/shadow/shadow.transforms.js +0 -22
  190. package/dist/cjs/themes/_generator/tokens/shadow/shadow.types.d.ts +0 -13
  191. package/dist/cjs/themes/_generator/tokens/shadow/shadow.types.js +0 -2
  192. package/dist/cjs/themes/_generator/tokens/transforms.d.ts +0 -13
  193. package/dist/cjs/themes/_generator/tokens/transforms.js +0 -30
  194. package/dist/cjs/themes/_generator/tokens/types.d.ts +0 -62
  195. package/dist/cjs/themes/_generator/tokens/types.js +0 -2
  196. package/dist/cjs/themes/_generator/tokens/unit/unit.transforms.d.ts +0 -4
  197. package/dist/cjs/themes/_generator/tokens/unit/unit.transforms.js +0 -11
  198. package/dist/cjs/themes/_generator/tokens/unit/unit.types.d.ts +0 -5
  199. package/dist/cjs/themes/_generator/tokens/unit/unit.types.js +0 -2
  200. package/dist/cjs/themes/_generator/tokens/unit/utilities/generate.d.ts +0 -5
  201. package/dist/cjs/themes/_generator/tokens/unit/utilities/generate.js +0 -16
  202. package/dist/cjs/themes/_generator/tokens/viewport/viewport.transforms.d.ts +0 -4
  203. package/dist/cjs/themes/_generator/tokens/viewport/viewport.transforms.js +0 -27
  204. package/dist/cjs/themes/_generator/tokens/viewport/viewport.types.d.ts +0 -9
  205. package/dist/cjs/themes/_generator/tokens/viewport/viewport.types.js +0 -2
  206. package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.transforms.d.ts +0 -4
  207. package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.transforms.js +0 -11
  208. package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.types.d.ts +0 -4
  209. package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.types.js +0 -2
  210. package/dist/cjs/themes/_generator/transform.d.ts +0 -8
  211. package/dist/cjs/themes/_generator/transform.js +0 -108
  212. package/dist/cjs/themes/_generator/types.d.ts +0 -15
  213. package/dist/cjs/themes/_generator/types.js +0 -2
  214. package/dist/cjs/themes/_generator/utilities/mergeDefinitions.d.ts +0 -3
  215. package/dist/cjs/themes/_generator/utilities/mergeDefinitions.js +0 -19
  216. package/dist/cjs/themes/figma/media.css +0 -1
  217. package/dist/cjs/themes/figma/tailwind.css +0 -1
  218. package/dist/cjs/themes/figma/theme.css +0 -1
  219. package/dist/cjs/themes/fragments/twitter/tailwind.css +0 -1
  220. package/dist/cjs/themes/fragments/twitter/theme.css +0 -1
  221. package/dist/cjs/themes/index.d.ts +0 -23
  222. package/dist/cjs/themes/index.js +0 -21
  223. package/dist/cjs/themes/reshaped/media.css +0 -1
  224. package/dist/cjs/themes/reshaped/tailwind.css +0 -1
  225. package/dist/cjs/themes/reshaped/theme.css +0 -1
  226. package/dist/cjs/themes/slate/media.css +0 -1
  227. package/dist/cjs/themes/slate/tailwind.css +0 -1
  228. package/dist/cjs/themes/slate/theme.css +0 -1
  229. package/dist/cjs/types/config.d.ts +0 -20
  230. package/dist/cjs/types/config.js +0 -2
  231. package/dist/cjs/utilities/string.d.ts +0 -2
  232. package/dist/cjs/utilities/string.js +0 -15
@@ -1,68 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const string_1 = require("../../../../../utilities/string");
4
- const constants_1 = require("../../../constants");
5
- const convert_1 = require("./convert");
6
- const a11y_1 = require("./a11y");
7
- const whiteColor = (0, convert_1.hexToOklch)("#ffffff");
8
- const blackColor = (0, convert_1.hexToOklch)("#000000");
9
- const generateMetaColors = (definition, themeOptions = {}) => {
10
- if (!definition.color)
11
- return;
12
- const { onColorValues = {}, colorContrastAlgorithm } = themeOptions;
13
- const result = {};
14
- Object.keys(definition.color).forEach((tokenName) => {
15
- const bgToken = definition.color?.[tokenName];
16
- const generatedForegroundName = `on${(0, string_1.capitalize)(tokenName)}`;
17
- const generatedRGBName = `rgb${(0, string_1.capitalize)(tokenName)}`;
18
- const generateOnColorsFor = [
19
- ...constants_1.bgWithDynamicForeground,
20
- ...(themeOptions?.generateOnColorsFor || []),
21
- ];
22
- const needsDynamicForeground = generateOnColorsFor.includes(tokenName) && !definition.color?.[generatedForegroundName];
23
- const needsRGB = tokenName.startsWith("background") ||
24
- tokenName.endsWith("black") ||
25
- tokenName.endsWith("white");
26
- if (!bgToken)
27
- return;
28
- const oklchBgToken = (0, convert_1.tokenToOklchToken)(bgToken);
29
- if (needsDynamicForeground) {
30
- const overrideKeys = Object.keys(onColorValues);
31
- const onColorKey = overrideKeys.find((key) => tokenName.toLowerCase().includes(key));
32
- const onColor = onColorKey && onColorValues[onColorKey];
33
- const lightColor = onColor && "hexLight" in onColor
34
- ? (0, convert_1.hexToOklch)(onColor.hexLight)
35
- : onColor?.oklchLight || whiteColor;
36
- const darkColor = onColor && "hexDark" in onColor
37
- ? (0, convert_1.hexToOklch)(onColor.hexDark)
38
- : onColor?.oklchDark || blackColor;
39
- const light = (0, a11y_1.getOnColor)({
40
- bgColor: oklchBgToken.oklch,
41
- lightColor: { ...lightColor, mode: "oklch" },
42
- darkColor: { ...darkColor, mode: "oklch" },
43
- algorithm: colorContrastAlgorithm,
44
- });
45
- const dark = oklchBgToken.oklchDark &&
46
- (0, a11y_1.getOnColor)({
47
- bgColor: oklchBgToken.oklchDark,
48
- lightColor: { ...lightColor, mode: "oklch" },
49
- darkColor: { ...darkColor, mode: "oklch" },
50
- algorithm: colorContrastAlgorithm,
51
- });
52
- result[generatedForegroundName] = {
53
- oklch: light,
54
- oklchDark: dark,
55
- };
56
- }
57
- if (needsRGB) {
58
- const rgb = (0, convert_1.oklchToRgb)(oklchBgToken.oklch);
59
- const rgbDark = oklchBgToken.oklchDark && (0, convert_1.oklchToRgb)(oklchBgToken.oklchDark);
60
- result[generatedRGBName] = {
61
- hex: `${rgb.r * 255}, ${rgb.g * 255}, ${rgb.b * 255}`,
62
- hexDark: rgbDark && `${rgbDark.r * 255}, ${rgbDark.g * 255}, ${rgbDark.b * 255}`,
63
- };
64
- }
65
- });
66
- return result;
67
- };
68
- exports.default = generateMetaColors;
@@ -1,38 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const vitest_1 = require("vitest");
4
- const a11y_1 = require("../a11y");
5
- const white = { l: 1, c: 0, h: 0, mode: "oklch" };
6
- const black = { l: 0, c: 0, h: 0, mode: "oklch" };
7
- const blue = { l: 0.55, c: 0.24, h: 262.67, mode: "oklch" };
8
- const rose = { l: 0.64, c: 0.2, h: 16.5, mode: "oklch" };
9
- (0, vitest_1.describe)("themes/tokens/color/utilities/a11y", () => {
10
- (0, vitest_1.describe)("wcag", () => {
11
- (0, vitest_1.test)("returns white for black background", () => {
12
- (0, vitest_1.expect)((0, a11y_1.getOnColor)({ bgColor: black, lightColor: white, darkColor: black })).toBe(white);
13
- });
14
- (0, vitest_1.test)("returns black for white background", () => {
15
- (0, vitest_1.expect)((0, a11y_1.getOnColor)({ bgColor: white, lightColor: white, darkColor: black })).toBe(black);
16
- });
17
- (0, vitest_1.test)("returns white for blue background", () => {
18
- (0, vitest_1.expect)((0, a11y_1.getOnColor)({ bgColor: blue, lightColor: white, darkColor: black })).toBe(white);
19
- });
20
- (0, vitest_1.test)("returns black for rose background", () => {
21
- (0, vitest_1.expect)((0, a11y_1.getOnColor)({ bgColor: rose, lightColor: white, darkColor: black })).toBe(black);
22
- });
23
- });
24
- (0, vitest_1.describe)("apca", () => {
25
- (0, vitest_1.test)("returns white for black background", () => {
26
- (0, vitest_1.expect)((0, a11y_1.getOnColor)({ bgColor: black, lightColor: white, darkColor: black, algorithm: "apca" })).toBe(white);
27
- });
28
- (0, vitest_1.test)("returns black for white background", () => {
29
- (0, vitest_1.expect)((0, a11y_1.getOnColor)({ bgColor: white, lightColor: white, darkColor: black, algorithm: "apca" })).toBe(black);
30
- });
31
- (0, vitest_1.test)("returns white for blue background", () => {
32
- (0, vitest_1.expect)((0, a11y_1.getOnColor)({ bgColor: blue, lightColor: white, darkColor: black, algorithm: "apca" })).toBe(white);
33
- });
34
- (0, vitest_1.test)("returns white for rose background", () => {
35
- (0, vitest_1.expect)((0, a11y_1.getOnColor)({ bgColor: rose, lightColor: white, darkColor: black, algorithm: "apca" })).toBe(white);
36
- });
37
- });
38
- });
@@ -1,48 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const vitest_1 = require("vitest");
4
- const convert_1 = require("../convert");
5
- const white = (0, convert_1.hexToOklch)("#ffffff");
6
- const black = (0, convert_1.hexToOklch)("#000000");
7
- const red = (0, convert_1.hexToOklch)("#ff0000");
8
- (0, vitest_1.describe)("themes/tokens/color/utilities/convert", () => {
9
- (0, vitest_1.describe)("hexToOklch", () => {
10
- (0, vitest_1.test)("white", () => {
11
- (0, vitest_1.expect)(white).toMatchSnapshot();
12
- });
13
- (0, vitest_1.test)("black", () => {
14
- (0, vitest_1.expect)(black).toMatchSnapshot();
15
- });
16
- (0, vitest_1.test)("red", () => {
17
- (0, vitest_1.expect)(red).toMatchSnapshot();
18
- });
19
- (0, vitest_1.test)("white, short", () => {
20
- (0, vitest_1.expect)((0, convert_1.hexToOklch)("#fff")).toEqual(white);
21
- });
22
- });
23
- (0, vitest_1.describe)("oklchToRgb", () => {
24
- (0, vitest_1.test)("white", () => {
25
- (0, vitest_1.expect)((0, convert_1.oklchToRgb)(white)).toMatchSnapshot();
26
- });
27
- (0, vitest_1.test)("black", () => {
28
- (0, vitest_1.expect)((0, convert_1.oklchToRgb)(black)).toMatchSnapshot();
29
- });
30
- (0, vitest_1.test)("red", () => {
31
- (0, vitest_1.expect)((0, convert_1.oklchToRgb)(red)).toMatchSnapshot();
32
- });
33
- });
34
- (0, vitest_1.describe)("tokenToOklchToken", () => {
35
- (0, vitest_1.test)("hex", () => {
36
- (0, vitest_1.expect)((0, convert_1.tokenToOklchToken)({ hex: "#ffffff" })).toMatchSnapshot();
37
- });
38
- (0, vitest_1.test)("hex and hexDark", () => {
39
- (0, vitest_1.expect)((0, convert_1.tokenToOklchToken)({ hex: "#ffffff", hexDark: "#000000" })).toMatchSnapshot();
40
- });
41
- (0, vitest_1.test)("oklch", () => {
42
- (0, vitest_1.expect)((0, convert_1.tokenToOklchToken)({ oklch: white })).toMatchSnapshot();
43
- });
44
- (0, vitest_1.test)("oklch and oklchDark", () => {
45
- (0, vitest_1.expect)((0, convert_1.tokenToOklchToken)({ oklch: white, oklchDark: black })).toMatchSnapshot();
46
- });
47
- });
48
- });
@@ -1,21 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const vitest_1 = require("vitest");
7
- const generateColors_1 = __importDefault(require("../generateColors"));
8
- (0, vitest_1.describe)("themes/tokens/color/utilities/generateColors", () => {
9
- (0, vitest_1.test)("with default values", () => {
10
- (0, vitest_1.expect)((0, generateColors_1.default)()).toMatchSnapshot();
11
- });
12
- (0, vitest_1.test)("with a passed value", () => {
13
- const black = { l: 0, c: 0, h: 0 };
14
- const colors = (0, generateColors_1.default)({ primary: { oklch: black } });
15
- (0, vitest_1.expect)(colors).toMatchSnapshot();
16
- (0, vitest_1.expect)(colors.backgroundPrimary).toEqual({
17
- oklch: { ...black, mode: "oklch" },
18
- oklchDark: { ...black, l: 1, mode: "oklch" },
19
- });
20
- });
21
- });
@@ -1,6 +0,0 @@
1
- import type * as T from "./types";
2
- export declare const getVariableName: (tokenName: string, tokenType?: string) => string;
3
- export declare const createVariable: (token: T.TransformedToken) => string;
4
- export declare const createMedia: (token: T.TransformedToken) => string;
5
- export declare const variablesTemplate: (themeName: string, tokens: T.TransformedToken[]) => string;
6
- export declare const mediaTemplate: (tokens: T.TransformedToken[]) => string;
@@ -1,52 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.mediaTemplate = exports.variablesTemplate = exports.createMedia = exports.createVariable = exports.getVariableName = void 0;
4
- const string_1 = require("../../../utilities/string");
5
- const getVariableName = (tokenName, tokenType) => {
6
- const value = ["rs", tokenType && (0, string_1.camelToKebab)(tokenType), (0, string_1.camelToKebab)(tokenName)]
7
- .filter(Boolean)
8
- .join("-");
9
- return `--${value}`;
10
- };
11
- exports.getVariableName = getVariableName;
12
- const createVariable = (token) => {
13
- const variableName = (0, exports.getVariableName)(token.name, token.tokenType);
14
- return `${variableName}: ${token.value};`;
15
- };
16
- exports.createVariable = createVariable;
17
- const createMedia = (token) => `@custom-media ${(0, exports.getVariableName)(token.name, token.tokenType)} ${token.value};`;
18
- exports.createMedia = createMedia;
19
- const variablesTemplate = (themeName, tokens) => {
20
- const filteredTokens = {
21
- root: [],
22
- light: [],
23
- dark: [],
24
- };
25
- tokens.forEach((token) => {
26
- if (token.mode === "light")
27
- filteredTokens.light.push(token);
28
- if (token.mode === "dark")
29
- filteredTokens.dark.push(token);
30
- if (!token.mode)
31
- filteredTokens.root.push(token);
32
- });
33
- let code = "";
34
- Object.entries(filteredTokens).forEach(([type, tokens]) => {
35
- const selector = type === "root"
36
- ? `[data-rs-theme="${themeName}"],[data-rs-theme*=" ${themeName} "]`
37
- : `[data-rs-theme="${themeName}"][data-rs-color-mode="${type}"],[data-rs-theme*=" ${themeName} "][data-rs-color-mode="${type}"]`;
38
- if (!tokens.length)
39
- return;
40
- code += `
41
- ${selector} {
42
- ${tokens.map((token) => (0, exports.createVariable)(token)).join("\n")}
43
- }
44
- `;
45
- });
46
- return code;
47
- };
48
- exports.variablesTemplate = variablesTemplate;
49
- const mediaTemplate = (tokens) => `
50
- ${tokens.map((token) => (0, exports.createMedia)(token)).join("\n")}
51
- `;
52
- exports.mediaTemplate = mediaTemplate;
@@ -1,4 +0,0 @@
1
- import type * as T from "./duration.types";
2
- import type { Transformer } from "../types";
3
- declare const transformToken: Transformer<T.Token>;
4
- export default transformToken;
@@ -1,11 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const transformToken = (name, token) => [
4
- {
5
- name,
6
- tokenType: "duration",
7
- type: "variable",
8
- value: `${token.ms}ms`,
9
- },
10
- ];
11
- exports.default = transformToken;
@@ -1,4 +0,0 @@
1
- export type Name = "rapid" | "fast" | "medium" | "slow";
2
- export type Token = {
3
- ms: number;
4
- };
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,4 +0,0 @@
1
- import type * as T from "./easing.types";
2
- import type { Transformer } from "../types";
3
- declare const transformToken: Transformer<T.Token>;
4
- export default transformToken;
@@ -1,11 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const transformToken = (name, token) => [
4
- {
5
- name,
6
- tokenType: "easing",
7
- type: "variable",
8
- value: `cubic-bezier(${token.x1}, ${token.y1}, ${token.x2}, ${token.y2})`,
9
- },
10
- ];
11
- exports.default = transformToken;
@@ -1,7 +0,0 @@
1
- export type Name = "standard" | "accelerate" | "decelerate";
2
- export type Token = {
3
- x1: number;
4
- y1: number;
5
- x2: number;
6
- y2: number;
7
- };
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,4 +0,0 @@
1
- import type * as T from "./font.types";
2
- import type { Transformer } from "../types";
3
- declare const transformToken: Transformer<T.Token>;
4
- export default transformToken;
@@ -1,43 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const css_1 = require("../css");
4
- const BASE_REM_SIZE = 16;
5
- const transformToken = (name, token) => {
6
- const result = [];
7
- result.push({
8
- name,
9
- tokenType: "fontSize",
10
- type: "variable",
11
- value: `${token.fontSize.px / BASE_REM_SIZE}rem`,
12
- });
13
- result.push({
14
- name,
15
- tokenType: "lineHeight",
16
- type: "variable",
17
- value: `${token.lineHeight.px / BASE_REM_SIZE}rem`,
18
- });
19
- if (token.fontFamilyToken) {
20
- result.push({
21
- name,
22
- tokenType: "fontFamily",
23
- type: "variable",
24
- value: `var(${(0, css_1.getVariableName)(token.fontFamilyToken, "fontFamily")})`,
25
- });
26
- }
27
- if (token.fontWeightToken) {
28
- result.push({
29
- name,
30
- tokenType: "fontWeight",
31
- type: "variable",
32
- value: `var(${(0, css_1.getVariableName)(token.fontWeightToken, "fontWeight")})`,
33
- });
34
- }
35
- result.push({
36
- name,
37
- tokenType: "letterSpacing",
38
- type: "variable",
39
- value: token.letterSpacing ? `${token.letterSpacing.px}px` : "normal",
40
- });
41
- return result;
42
- };
43
- exports.default = transformToken;
@@ -1,11 +0,0 @@
1
- import type * as TUnit from "../unit/unit.types";
2
- import type * as TFontWeight from "../fontWeight/fontWeight.types";
3
- import type * as TFontFamily from "../fontFamily/fontFamily.types";
4
- export type Name = "title1" | "title2" | "title3" | "title4" | "title5" | "title6" | "featured1" | "featured2" | "featured3" | "body1" | "body2" | "body3" | "caption1" | "caption2";
5
- export type Token = {
6
- fontSize: TUnit.Token;
7
- lineHeight: TUnit.Token;
8
- fontFamilyToken?: TFontFamily.Name;
9
- fontWeightToken?: TFontWeight.Name;
10
- letterSpacing?: TUnit.Token;
11
- };
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,4 +0,0 @@
1
- import type * as T from "./fontFamily.types";
2
- import type { Transformer } from "../types";
3
- declare const transformToken: Transformer<T.Token>;
4
- export default transformToken;
@@ -1,11 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const transformToken = (name, token) => [
4
- {
5
- name,
6
- tokenType: "fontFamily",
7
- type: "variable",
8
- value: `${token.family}`,
9
- },
10
- ];
11
- exports.default = transformToken;
@@ -1,4 +0,0 @@
1
- export type Name = "title" | "body" | "monospace";
2
- export type Token = {
3
- family: string;
4
- };
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,4 +0,0 @@
1
- import type * as T from "./fontWeight.types";
2
- import type { Transformer } from "../types";
3
- declare const transformToken: Transformer<T.Token>;
4
- export default transformToken;
@@ -1,11 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const transformToken = (name, token) => [
4
- {
5
- name,
6
- tokenType: "fontWeight",
7
- type: "variable",
8
- value: token.weight.toString(),
9
- },
10
- ];
11
- exports.default = transformToken;
@@ -1,4 +0,0 @@
1
- export type Name = "regular" | "medium" | "semibold" | "bold" | "extrabold" | "black";
2
- export type Token = {
3
- weight: number;
4
- };
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,4 +0,0 @@
1
- import type * as T from "./radius.types";
2
- import type { Transformer } from "../types";
3
- declare const transformToken: Transformer<T.Token>;
4
- export default transformToken;
@@ -1,11 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const transformToken = (name, token) => [
4
- {
5
- name,
6
- tokenType: "radius",
7
- type: "variable",
8
- value: `${token.px}px`,
9
- },
10
- ];
11
- exports.default = transformToken;
@@ -1,4 +0,0 @@
1
- export type Name = "small" | "medium" | "large";
2
- export type Token = {
3
- px: number;
4
- };
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,4 +0,0 @@
1
- import type { Transformer } from "../types";
2
- import type * as T from "./shadow.types";
3
- declare const transformToken: Transformer<T.Token>;
4
- export default transformToken;
@@ -1,22 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const convert_1 = require("../color/utilities/convert");
4
- const transformToken = (name, token, { theme }) => [
5
- {
6
- name,
7
- tokenType: "shadow",
8
- type: "variable",
9
- value: token
10
- .map((value) => {
11
- const blur = ` ${value.blurRadius || 0}px`;
12
- const spread = ` ${value.spreadRadius || 0}px`;
13
- const colorRef = theme.color[value.colorToken];
14
- const rgb = (0, convert_1.oklchToRgb)((0, convert_1.hexToOklch)(colorRef?.hex || "#000000"));
15
- const rgbString = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
16
- const color = `rgba(${rgbString}, ${value.opacity || 1})`;
17
- return `${value.offsetX}px ${value.offsetY}px${blur}${spread} ${color}`;
18
- })
19
- .join(", "),
20
- },
21
- ];
22
- exports.default = transformToken;
@@ -1,13 +0,0 @@
1
- import type * as TColor from "../color/color.types";
2
- export type Name = "raised" | "overlay";
3
- export type Token = Array<{
4
- offsetX: number;
5
- offsetY: number;
6
- blurRadius?: number;
7
- spreadRadius?: number;
8
- colorToken: TColor.Name;
9
- opacity: number;
10
- }>;
11
- export type ResolvedToken = Array<Omit<Token[0], "colorToken"> & {
12
- color: TColor.Token;
13
- }>;
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,13 +0,0 @@
1
- export declare const css: {
2
- color: import("./types").Transformer<import("./color/color.types").Token>;
3
- duration: import("./types").Transformer<import("./duration/duration.types").Token>;
4
- easing: import("./types").Transformer<import("./easing/easing.types").Token>;
5
- font: import("./types").Transformer<import("./font/font.types").Token>;
6
- fontFamily: import("./types").Transformer<import("./fontFamily/fontFamily.types").Token>;
7
- fontWeight: import("./types").Transformer<import("./fontWeight/fontWeight.types").Token>;
8
- shadow: import("./types").Transformer<import("./shadow/shadow.types").Token>;
9
- unit: import("./types").Transformer<import("./unit/unit.types").Token>;
10
- radius: import("./types").Transformer<import("./radius/radius.types").Token>;
11
- viewport: import("./types").Transformer<import("./viewport/viewport.types").Token | import("./viewport/viewport.types").SToken>;
12
- zIndex: import("./types").Transformer<import("./zIndex/zIndex.types").Token>;
13
- };
@@ -1,30 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.css = void 0;
7
- const color_transforms_1 = __importDefault(require("./color/color.transforms"));
8
- const duration_transforms_1 = __importDefault(require("./duration/duration.transforms"));
9
- const easing_transforms_1 = __importDefault(require("./easing/easing.transforms"));
10
- const font_transforms_1 = __importDefault(require("./font/font.transforms"));
11
- const fontFamily_transforms_1 = __importDefault(require("./fontFamily/fontFamily.transforms"));
12
- const fontWeight_transforms_1 = __importDefault(require("./fontWeight/fontWeight.transforms"));
13
- const shadow_transforms_1 = __importDefault(require("./shadow/shadow.transforms"));
14
- const unit_transforms_1 = __importDefault(require("./unit/unit.transforms"));
15
- const radius_transforms_1 = __importDefault(require("./radius/radius.transforms"));
16
- const viewport_transforms_1 = __importDefault(require("./viewport/viewport.transforms"));
17
- const zIndex_transforms_1 = __importDefault(require("./zIndex/zIndex.transforms"));
18
- exports.css = {
19
- color: color_transforms_1.default,
20
- duration: duration_transforms_1.default,
21
- easing: easing_transforms_1.default,
22
- font: font_transforms_1.default,
23
- fontFamily: fontFamily_transforms_1.default,
24
- fontWeight: fontWeight_transforms_1.default,
25
- shadow: shadow_transforms_1.default,
26
- unit: unit_transforms_1.default,
27
- radius: radius_transforms_1.default,
28
- viewport: viewport_transforms_1.default,
29
- zIndex: zIndex_transforms_1.default,
30
- };
@@ -1,62 +0,0 @@
1
- import type * as TColor from "./color/color.types";
2
- import type * as TDuration from "./duration/duration.types";
3
- import type * as TEasing from "./easing/easing.types";
4
- import type * as TFont from "./font/font.types";
5
- import type * as TFontFamily from "./fontFamily/fontFamily.types";
6
- import type * as TFontWeight from "./fontWeight/fontWeight.types";
7
- import type * as TShadow from "./shadow/shadow.types";
8
- import type * as TUnit from "./unit/unit.types";
9
- import type * as TRadius from "./radius/radius.types";
10
- import type * as TViewport from "./viewport/viewport.types";
11
- import * as TZIndex from "./zIndex/zIndex.types";
12
- import { PartialDeep, PrivateOptions } from "../types";
13
- export type TokenType = "fontFamily" | "fontWeight" | "unit" | "radius" | "viewport" | "font" | "color" | "duration" | "easing" | "shadow" | "zIndex";
14
- type TokenSet<Name extends string, Token> = Record<Name, Token> & {
15
- [tokenName: string]: Token;
16
- };
17
- /**
18
- * Internal theme definition with all required tokens
19
- */
20
- export type ThemeDefinition = {
21
- unit: TokenSet<TUnit.Name, TUnit.Token>;
22
- radius: TokenSet<TRadius.Name, TRadius.Token>;
23
- fontFamily: TokenSet<TFontFamily.Name, TFontFamily.Token>;
24
- fontWeight: TokenSet<TFontWeight.Name, TFontWeight.Token>;
25
- font: TokenSet<TFont.Name, TFont.Token>;
26
- color: TokenSet<TColor.Name, TColor.PassedToken>;
27
- duration: TokenSet<TDuration.Name, TDuration.Token>;
28
- easing: TokenSet<TEasing.Name, TEasing.Token>;
29
- shadow: TokenSet<TShadow.Name, TShadow.Token>;
30
- viewport: Record<Exclude<TViewport.Name, "s">, TViewport.Token>;
31
- zIndex: Record<TZIndex.Name, TZIndex.Token>;
32
- };
33
- /**
34
- * Externally configured theme which might override just some of the tokens
35
- * but also might include custom "on" colors
36
- */
37
- export type PassedThemeDefinition = Omit<PartialDeep<ThemeDefinition>, "color"> & {
38
- color?: Partial<TokenSet<TColor.Name | TColor.GeneratedOnName, TColor.PassedToken>>;
39
- };
40
- /**
41
- * Theme generation output which includes all generated tokens
42
- * but might not include some of the tokens when used for theme fragments
43
- */
44
- export type GeneratedThemeDefinition = Omit<PassedThemeDefinition, "color" | "unit" | "viewport"> & {
45
- color: Partial<TokenSet<TColor.GeneratedOnName | TColor.GeneratedRGBName | TColor.Name, TColor.Token>>;
46
- unit: Partial<TokenSet<TUnit.GeneratedName | TUnit.Name, TUnit.Token>>;
47
- viewport: Partial<TokenSet<TViewport.Name, TViewport.Token | TViewport.SToken>>;
48
- };
49
- export type TransformedToken = {
50
- name: string;
51
- tokenType: TokenType | "fontSize" | "lineHeight" | "letterSpacing";
52
- value: string;
53
- type: "variable" | "media";
54
- mode?: "light" | "dark";
55
- private?: boolean;
56
- viewport?: string;
57
- };
58
- export type Transformer<Token> = (name: string, token: Token, options: {
59
- theme: GeneratedThemeDefinition;
60
- themeOptions: PrivateOptions["themeOptions"];
61
- }) => TransformedToken[];
62
- export {};
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,4 +0,0 @@
1
- import type * as T from "./unit.types";
2
- import type { Transformer } from "../types";
3
- declare const transformToken: Transformer<T.Token>;
4
- export default transformToken;