reshaped 3.6.0-canary.3 → 3.6.0-canary.5

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 (150) hide show
  1. package/CHANGELOG.md +3 -0
  2. package/dist/bundle.css +1 -1
  3. package/dist/bundle.d.ts +1 -0
  4. package/dist/bundle.js +5 -5
  5. package/dist/cjs/cli/theming/index.d.ts +3 -3
  6. package/dist/cjs/cli/theming/index.js +2 -2
  7. package/dist/cjs/cli/theming/tailwind.d.ts +2 -3
  8. package/dist/cjs/themes/_generator/definitions/slate.js +1 -1
  9. package/dist/cjs/themes/_generator/tokens/color/color.transforms.d.ts +2 -2
  10. package/dist/cjs/themes/_generator/tokens/color/color.transforms.js +29 -7
  11. package/dist/cjs/themes/_generator/tokens/color/color.types.d.ts +28 -3
  12. package/dist/cjs/themes/_generator/tokens/color/utilities/a11y.d.ts +20 -0
  13. package/dist/cjs/themes/_generator/tokens/color/utilities/a11y.js +64 -0
  14. package/dist/cjs/themes/_generator/tokens/color/utilities/convert.d.ts +11 -0
  15. package/dist/cjs/themes/_generator/tokens/color/utilities/convert.js +33 -0
  16. package/dist/cjs/themes/_generator/tokens/color/utilities/generateColors.d.ts +4 -0
  17. package/dist/cjs/themes/_generator/tokens/color/utilities/generateColors.js +152 -0
  18. package/dist/cjs/themes/_generator/tokens/color/utilities/generateMetaColors.d.ts +4 -0
  19. package/dist/cjs/themes/_generator/tokens/color/utilities/generateMetaColors.js +68 -0
  20. package/dist/cjs/themes/_generator/tokens/color/utilities/tests/a11y.test.js +38 -0
  21. package/dist/cjs/themes/_generator/tokens/color/utilities/tests/convert.test.d.ts +1 -0
  22. package/dist/cjs/themes/_generator/tokens/color/utilities/tests/convert.test.js +48 -0
  23. package/dist/cjs/themes/_generator/tokens/color/utilities/tests/generateColors.test.d.ts +1 -0
  24. package/dist/cjs/themes/_generator/tokens/color/utilities/tests/generateColors.test.js +21 -0
  25. package/dist/{themes/_generator/utilities → cjs/themes/_generator/tokens}/css.d.ts +1 -1
  26. package/dist/cjs/themes/_generator/tokens/duration/duration.transforms.d.ts +2 -2
  27. package/dist/cjs/themes/_generator/tokens/duration/duration.transforms.js +2 -2
  28. package/dist/cjs/themes/_generator/tokens/easing/easing.transforms.d.ts +2 -2
  29. package/dist/cjs/themes/_generator/tokens/easing/easing.transforms.js +2 -2
  30. package/dist/cjs/themes/_generator/tokens/font/font.transforms.d.ts +2 -2
  31. package/dist/cjs/themes/_generator/tokens/font/font.transforms.js +3 -3
  32. package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.transforms.d.ts +2 -2
  33. package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.transforms.js +2 -2
  34. package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.transforms.d.ts +2 -2
  35. package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.transforms.js +2 -2
  36. package/dist/cjs/themes/_generator/tokens/radius/radius.transforms.d.ts +2 -2
  37. package/dist/cjs/themes/_generator/tokens/radius/radius.transforms.js +2 -2
  38. package/dist/cjs/themes/_generator/tokens/shadow/shadow.transforms.d.ts +2 -2
  39. package/dist/cjs/themes/_generator/tokens/shadow/shadow.transforms.js +4 -4
  40. package/dist/cjs/themes/_generator/tokens/types.d.ts +19 -17
  41. package/dist/cjs/themes/_generator/tokens/unit/unit.transforms.d.ts +2 -2
  42. package/dist/cjs/themes/_generator/tokens/unit/unit.transforms.js +2 -2
  43. package/dist/cjs/themes/_generator/tokens/unit/utilities/generate.d.ts +5 -0
  44. package/dist/cjs/themes/_generator/{utilities/generateUnits.js → tokens/unit/utilities/generate.js} +5 -4
  45. package/dist/cjs/themes/_generator/tokens/viewport/viewport.transforms.d.ts +2 -2
  46. package/dist/cjs/themes/_generator/tokens/viewport/viewport.transforms.js +2 -2
  47. package/dist/cjs/themes/_generator/transform.d.ts +3 -2
  48. package/dist/cjs/themes/_generator/transform.js +39 -11
  49. package/dist/cjs/themes/_generator/types.d.ts +4 -8
  50. package/dist/cjs/themes/_generator/utilities/mergeDefinitions.d.ts +1 -3
  51. package/dist/cjs/themes/_generator/utilities/mergeDefinitions.js +6 -4
  52. package/dist/cjs/themes/figma/theme.css +1 -1
  53. package/dist/cjs/themes/fragments/twitter/theme.css +1 -1
  54. package/dist/cjs/themes/index.d.ts +4 -11
  55. package/dist/cjs/themes/index.js +2 -5
  56. package/dist/cjs/themes/reshaped/theme.css +1 -1
  57. package/dist/cjs/themes/slate/theme.css +1 -1
  58. package/dist/cjs/types/config.d.ts +11 -7
  59. package/dist/cli/theming/index.d.ts +3 -3
  60. package/dist/cli/theming/index.js +2 -2
  61. package/dist/cli/theming/tailwind.d.ts +2 -3
  62. package/dist/components/Avatar/Avatar.module.css +1 -1
  63. package/dist/components/FormControl/FormControl.context.d.ts +1 -1
  64. package/dist/components/Reshaped/Reshaped.js +2 -2
  65. package/dist/components/Reshaped/Reshaped.types.d.ts +1 -0
  66. package/dist/components/Reshaped/tests/Reshaped.stories.d.ts +1 -0
  67. package/dist/components/Reshaped/tests/Reshaped.stories.js +20 -0
  68. package/dist/components/Theme/GlobalColorMode.js +6 -11
  69. package/dist/components/Theme/Theme.types.d.ts +1 -0
  70. package/dist/components/Theme/index.d.ts +1 -1
  71. package/dist/index.d.ts +1 -0
  72. package/dist/tests/ThemesPlayground.d.ts +2 -0
  73. package/dist/tests/ThemesPlayground.js +90 -0
  74. package/dist/tests/themes.stories.d.ts +16 -0
  75. package/dist/{themes/_generator/tests → tests}/themes.stories.js +74 -15
  76. package/dist/themes/_generator/definitions/slate.js +1 -1
  77. package/dist/themes/_generator/tokens/color/color.transforms.d.ts +2 -2
  78. package/dist/themes/_generator/tokens/color/color.transforms.js +29 -7
  79. package/dist/themes/_generator/tokens/color/color.types.d.ts +28 -3
  80. package/dist/themes/_generator/tokens/color/utilities/a11y.d.ts +20 -0
  81. package/dist/themes/_generator/tokens/color/utilities/a11y.js +58 -0
  82. package/dist/themes/_generator/tokens/color/utilities/convert.d.ts +11 -0
  83. package/dist/themes/_generator/tokens/color/utilities/convert.js +27 -0
  84. package/dist/themes/_generator/tokens/color/utilities/generateColors.d.ts +4 -0
  85. package/dist/themes/_generator/tokens/color/utilities/generateColors.js +150 -0
  86. package/dist/themes/_generator/tokens/color/utilities/generateMetaColors.d.ts +4 -0
  87. package/dist/themes/_generator/tokens/color/utilities/generateMetaColors.js +66 -0
  88. package/dist/{cjs/themes/_generator/utilities → themes/_generator/tokens}/css.d.ts +1 -1
  89. package/dist/themes/_generator/tokens/duration/duration.transforms.d.ts +2 -2
  90. package/dist/themes/_generator/tokens/duration/duration.transforms.js +2 -2
  91. package/dist/themes/_generator/tokens/easing/easing.transforms.d.ts +2 -2
  92. package/dist/themes/_generator/tokens/easing/easing.transforms.js +2 -2
  93. package/dist/themes/_generator/tokens/font/font.transforms.d.ts +2 -2
  94. package/dist/themes/_generator/tokens/font/font.transforms.js +3 -3
  95. package/dist/themes/_generator/tokens/fontFamily/fontFamily.transforms.d.ts +2 -2
  96. package/dist/themes/_generator/tokens/fontFamily/fontFamily.transforms.js +2 -2
  97. package/dist/themes/_generator/tokens/fontWeight/fontWeight.transforms.d.ts +2 -2
  98. package/dist/themes/_generator/tokens/fontWeight/fontWeight.transforms.js +2 -2
  99. package/dist/themes/_generator/tokens/radius/radius.transforms.d.ts +2 -2
  100. package/dist/themes/_generator/tokens/radius/radius.transforms.js +2 -2
  101. package/dist/themes/_generator/tokens/shadow/shadow.transforms.d.ts +2 -2
  102. package/dist/themes/_generator/tokens/shadow/shadow.transforms.js +4 -4
  103. package/dist/themes/_generator/tokens/types.d.ts +19 -17
  104. package/dist/themes/_generator/tokens/unit/unit.transforms.d.ts +2 -2
  105. package/dist/themes/_generator/tokens/unit/unit.transforms.js +2 -2
  106. package/dist/themes/_generator/tokens/unit/utilities/generate.d.ts +5 -0
  107. package/dist/themes/_generator/{utilities/generateUnits.js → tokens/unit/utilities/generate.js} +4 -5
  108. package/dist/themes/_generator/tokens/viewport/viewport.transforms.d.ts +2 -2
  109. package/dist/themes/_generator/tokens/viewport/viewport.transforms.js +2 -2
  110. package/dist/themes/_generator/transform.d.ts +3 -2
  111. package/dist/themes/_generator/transform.js +39 -11
  112. package/dist/themes/_generator/types.d.ts +4 -8
  113. package/dist/themes/_generator/utilities/mergeDefinitions.d.ts +1 -3
  114. package/dist/themes/_generator/utilities/mergeDefinitions.js +6 -4
  115. package/dist/themes/figma/theme.css +1 -1
  116. package/dist/themes/fragments/twitter/theme.css +1 -1
  117. package/dist/themes/index.d.ts +4 -11
  118. package/dist/themes/index.js +1 -4
  119. package/dist/themes/reshaped/theme.css +1 -1
  120. package/dist/themes/slate/theme.css +1 -1
  121. package/dist/types/config.d.ts +11 -7
  122. package/dist/types/global.d.ts +3 -0
  123. package/package.json +11 -11
  124. package/dist/cjs/themes/_generator/utilities/color.d.ts +0 -105
  125. package/dist/cjs/themes/_generator/utilities/color.js +0 -409
  126. package/dist/cjs/themes/_generator/utilities/generateBackgroundColors.d.ts +0 -4
  127. package/dist/cjs/themes/_generator/utilities/generateBackgroundColors.js +0 -59
  128. package/dist/cjs/themes/_generator/utilities/generateColors.d.ts +0 -11
  129. package/dist/cjs/themes/_generator/utilities/generateColors.js +0 -178
  130. package/dist/cjs/themes/_generator/utilities/generateUnits.d.ts +0 -4
  131. package/dist/cjs/themes/_generator/utilities/mergeDeep.d.ts +0 -5
  132. package/dist/cjs/themes/_generator/utilities/mergeDeep.js +0 -24
  133. package/dist/cjs/themes/_generator/utilities/resolveTokenReference.d.ts +0 -3
  134. package/dist/cjs/themes/_generator/utilities/resolveTokenReference.js +0 -18
  135. package/dist/cjs/themes/_generator/utilities/tests/color.test.js +0 -81
  136. package/dist/themes/_generator/tests/themes.stories.d.ts +0 -16
  137. package/dist/themes/_generator/utilities/color.d.ts +0 -105
  138. package/dist/themes/_generator/utilities/color.js +0 -377
  139. package/dist/themes/_generator/utilities/generateBackgroundColors.d.ts +0 -4
  140. package/dist/themes/_generator/utilities/generateBackgroundColors.js +0 -57
  141. package/dist/themes/_generator/utilities/generateColors.d.ts +0 -11
  142. package/dist/themes/_generator/utilities/generateColors.js +0 -176
  143. package/dist/themes/_generator/utilities/generateUnits.d.ts +0 -4
  144. package/dist/themes/_generator/utilities/mergeDeep.d.ts +0 -5
  145. package/dist/themes/_generator/utilities/mergeDeep.js +0 -22
  146. package/dist/themes/_generator/utilities/resolveTokenReference.d.ts +0 -3
  147. package/dist/themes/_generator/utilities/resolveTokenReference.js +0 -16
  148. /package/dist/cjs/themes/_generator/{utilities/tests/color.test.d.ts → tokens/color/utilities/tests/a11y.test.d.ts} +0 -0
  149. /package/dist/cjs/themes/_generator/{utilities → tokens}/css.js +0 -0
  150. /package/dist/themes/_generator/{utilities → tokens}/css.js +0 -0
@@ -1,11 +0,0 @@
1
- import type { ThemeDefinition } from "../tokens/types";
2
- import type { Color } from "../types";
3
- declare const generate: (args?: {
4
- primary?: Color;
5
- critical?: Color;
6
- warning?: Color;
7
- positive?: Color;
8
- neutral?: Color;
9
- brand?: Color;
10
- }) => ThemeDefinition["color"];
11
- export default generate;
@@ -1,176 +0,0 @@
1
- import { parseHex, convertOklabToOkhsl, convertLrgbToOklab, convertRgbToLrgb, convertOkhslToOklab, convertOklabToLrgb, convertLrgbToRgb, serializeHex, serializeHex8, } from "culori/fn";
2
- const hexToOkHsl = (hex) => {
3
- const rgb = parseHex(hex);
4
- if (!rgb)
5
- throw new Error(`[Reshaped] Can't generate rgb from ${hex} color`);
6
- const lrgb = convertRgbToLrgb(rgb);
7
- const oklab = convertLrgbToOklab(lrgb);
8
- const okhsl = convertOklabToOkhsl(oklab);
9
- return okhsl;
10
- };
11
- const okhslToHex = (okhsl) => {
12
- const oklab = convertOkhslToOklab(okhsl);
13
- const lrgb = convertOklabToLrgb(oklab);
14
- const rgb = convertLrgbToRgb(lrgb);
15
- return !okhsl.alpha || okhsl.alpha === 1 ? serializeHex(rgb) : serializeHex8(rgb);
16
- };
17
- const getDarkModeColor = (hsl) => {
18
- const { l } = hsl;
19
- const mid = 0.5;
20
- const lDelta = 1 - (l - mid) / (1 - mid);
21
- return { ...hsl, l: l < mid ? l : 1 - l * lDelta };
22
- };
23
- const generateColorValues = (args) => {
24
- const { key, hex, hexDark } = args;
25
- const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
26
- const okhsl = hexToOkHsl(hex);
27
- /**
28
- * Calculate hue perceptual lighness (yellow, cyan, )
29
- */
30
- const hueStep = 120;
31
- const normalizedHue = ((okhsl.h + 150) % 360) / 360;
32
- const hueLightness = Math.cos((2 * Math.PI) / hueStep) * normalizedHue;
33
- const okhslDark = key === "neutral"
34
- ? { ...okhsl, l: 1 - okhsl.l + 0.16, s: 0.1 }
35
- : (hexDark && hexToOkHsl(hexDark)) || getDarkModeColor(okhsl);
36
- /**
37
- * Background
38
- */
39
- const bgHex = hex;
40
- const bgHexDark = okhslToHex(okhslDark);
41
- const bgFadedHsl = key === "neutral" ? { ...okhsl, l: 0.96 } : { ...okhsl, l: 0.94 + 0.045 * hueLightness };
42
- const bgFadedHslDark = key === "neutral" ? { ...okhslDark, l: 0.15 } : { ...okhslDark, l: 0.16, s: okhslDark.s / 2 };
43
- const bgFadedHex = okhslToHex(bgFadedHsl);
44
- const bgFadedHexDark = okhslToHex(bgFadedHslDark);
45
- /**
46
- * Foreground
47
- */
48
- const fgOkhsl = key === "neutral" ? { ...okhsl, l: 0.2 } : { ...okhsl, l: 0.45 };
49
- // Lighter colors need smaller lightness increase for fg colors
50
- const fgDarkLDelta = 0.16 / (1 + Math.max(0, okhslDark.l - 0.5));
51
- const fgOkhslDark = key === "neutral"
52
- ? { ...okhsl, l: 0.96 }
53
- : { ...okhslDark, l: okhslDark.l + fgDarkLDelta, s: 0.7 };
54
- const fgHex = okhslToHex(fgOkhsl);
55
- const fgHexDark = okhslToHex(fgOkhslDark);
56
- /**
57
- * Border
58
- */
59
- const bdHex = key === "neutral" ? okhslToHex({ ...fgOkhsl, l: 0, alpha: 0.12 }) : fgHex;
60
- const bdHexDark = key === "neutral" ? okhslToHex({ ...fgOkhslDark, l: 1, alpha: 0.14 }) : fgHexDark;
61
- const bdFadedHex = key === "neutral"
62
- ? okhslToHex({
63
- ...bgFadedHsl,
64
- l: 0,
65
- alpha: 0.08,
66
- })
67
- : okhslToHex({
68
- ...bgFadedHsl,
69
- s: 0.6 - 0.2 * hueLightness,
70
- l: bgFadedHsl.l - 0.07,
71
- });
72
- const bdFadedHexDark = key === "neutral"
73
- ? okhslToHex({
74
- ...bgFadedHslDark,
75
- l: 1,
76
- alpha: 0.08,
77
- })
78
- : okhslToHex({
79
- ...bgFadedHslDark,
80
- l: bgFadedHslDark.l + 0.1,
81
- });
82
- const output = {
83
- [`background${capitalizedKey}`]: {
84
- hex: bgHex,
85
- hexDark: bgHexDark,
86
- },
87
- [`background${capitalizedKey}Faded`]: {
88
- hex: bgFadedHex,
89
- hexDark: bgFadedHexDark,
90
- },
91
- [`border${capitalizedKey}`]: {
92
- hex: bdHex,
93
- hexDark: bdHexDark,
94
- },
95
- [`border${capitalizedKey}Faded`]: {
96
- hex: bdFadedHex,
97
- hexDark: bdFadedHexDark,
98
- },
99
- [`foreground${capitalizedKey}`]: {
100
- hex: fgHex,
101
- hexDark: fgHexDark,
102
- },
103
- };
104
- if (key === "neutral") {
105
- output[`foreground${capitalizedKey}Faded`] = {
106
- hex: okhslToHex({ ...fgOkhsl, l: fgOkhsl.l + 0.25 }),
107
- hexDark: okhslToHex({ ...fgOkhslDark, l: fgOkhslDark.l - 0.15 }),
108
- };
109
- output[`backgroundDisabled`] = {
110
- hex: okhslToHex({ ...okhsl, s: 0.04, l: 0.94 }),
111
- hexDark: okhslToHex({ ...okhslDark, s: 0.04, l: 0.16 }),
112
- };
113
- output[`backgroundDisabledFaded`] = {
114
- hex: okhslToHex({ ...okhsl, l: 0.97, s: 0.04 }),
115
- hexDark: okhslToHex({ ...okhslDark, l: 0.12, s: 0.04 }),
116
- };
117
- output[`borderDisabled`] = {
118
- hex: okhslToHex({ ...okhsl, l: 0.9, s: 0.04 }),
119
- hexDark: okhslToHex({ ...okhslDark, l: 0.17, s: 0.04 }),
120
- };
121
- output[`foregroundDisabled`] = {
122
- hex: okhslToHex({ ...okhsl, l: 0.82, s: 0.04 }),
123
- hexDark: okhslToHex({ ...okhslDark, l: 0.32, s: 0.04 }),
124
- };
125
- output[`backgroundElevationBase`] = {
126
- hex: "#ffffff",
127
- hexDark: okhslToHex({ ...okhslDark, s: 0.03, l: 0.1 }),
128
- };
129
- output[`backgroundElevationRaised`] = {
130
- hex: "#ffffff",
131
- hexDark: okhslToHex({ ...okhslDark, s: 0.04, l: 0.11 }),
132
- };
133
- output[`backgroundElevationOverlay`] = {
134
- hex: "#ffffff",
135
- hexDark: okhslToHex({ ...okhslDark, s: 0.04, l: 0.13 }),
136
- };
137
- output[`backgroundPage`] = {
138
- hex: "#ffffff",
139
- hexDark: okhslToHex({ ...okhslDark, l: 0.07, s: 0.02 }),
140
- };
141
- output[`backgroundPageFaded`] = {
142
- hex: okhslToHex({ ...okhsl, l: 0.985 }),
143
- hexDark: okhslToHex({ ...okhslDark, l: 0.09, s: 0.02 }),
144
- };
145
- }
146
- return output;
147
- };
148
- const validateHexColor = (color) => {
149
- const hexColorRegex = /^#([A-Fa-f0-9]{3}){2}$/;
150
- if (!hexColorRegex.test(color)) {
151
- throw new Error(`[Reshaped] Invalid hex color: ${color}`);
152
- }
153
- return color;
154
- };
155
- const generate = (args = {}) => {
156
- const { primary = "#2563eb", critical = "#e22c2c", warning = "#facc15", positive = "#118850", neutral = "#e3e4e8", brand, } = args;
157
- const generateFor = (key, color) => {
158
- return generateColorValues({
159
- key,
160
- hex: validateHexColor(typeof color === "string" ? color : color.hex),
161
- hexDark: validateHexColor(typeof color === "string" ? color : (color.hexDark ?? color.hex)),
162
- });
163
- };
164
- const brandColor = brand || primary;
165
- return {
166
- ...generateFor("primary", primary),
167
- ...generateFor("critical", critical),
168
- ...generateFor("warning", warning),
169
- ...generateFor("positive", positive),
170
- ...generateFor("neutral", neutral),
171
- brand: typeof brandColor === "string" ? { hex: brandColor } : brandColor,
172
- white: { hex: "#ffffff" },
173
- black: { hex: "#000000" },
174
- };
175
- };
176
- export default generate;
@@ -1,4 +0,0 @@
1
- import type * as T from "../types";
2
- import type { FullThemeDefinition } from "../tokens/types";
3
- declare const generateUnits: (definition: T.PartialDeep<FullThemeDefinition>) => void;
4
- export default generateUnits;
@@ -1,5 +0,0 @@
1
- type Obj = {
2
- [key: string]: unknown;
3
- };
4
- declare const mergeDeep: (target: Obj, ...sources: Obj[]) => Obj;
5
- export default mergeDeep;
@@ -1,22 +0,0 @@
1
- const isObject = (item) => {
2
- return !!item && typeof item === "object" && !Array.isArray(item);
3
- };
4
- const mergeDeep = (target, ...sources) => {
5
- if (!sources.length)
6
- return target;
7
- const source = sources.shift();
8
- if (isObject(target) && isObject(source)) {
9
- Object.keys(source).forEach((key) => {
10
- if (isObject(source[key]) && isObject(target[key])) {
11
- if (!target[key])
12
- Object.assign(target, { [key]: {} });
13
- mergeDeep(target[key], source[key]);
14
- }
15
- else {
16
- Object.assign(target, { [key]: source[key] });
17
- }
18
- });
19
- }
20
- return mergeDeep(target, ...sources);
21
- };
22
- export default mergeDeep;
@@ -1,3 +0,0 @@
1
- import type * as T from "../tokens/types";
2
- declare const resolveTokenReference: <ReferencedToken>(theme: T.ThemeDefinition, tokenType: T.TokenType, ref: string) => ReferencedToken;
3
- export default resolveTokenReference;
@@ -1,16 +0,0 @@
1
- const resolveTokenReference = (theme, tokenType, ref) => {
2
- const tokenGroup = theme[tokenType];
3
- let referencedToken = null;
4
- Object.keys(tokenGroup).forEach((tokenName) => {
5
- if (referencedToken)
6
- return;
7
- // Relaxed runtime group resolving
8
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
9
- if (tokenName === ref)
10
- referencedToken = tokenGroup[tokenName];
11
- });
12
- if (!referencedToken)
13
- throw new Error(`[Reshaped] Referenced token not found for: ${ref}`);
14
- return referencedToken;
15
- };
16
- export default resolveTokenReference;