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,24 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const isObject = (item) => {
4
- return !!item && typeof item === "object" && !Array.isArray(item);
5
- };
6
- const mergeDeep = (target, ...sources) => {
7
- if (!sources.length)
8
- return target;
9
- const source = sources.shift();
10
- if (isObject(target) && isObject(source)) {
11
- Object.keys(source).forEach((key) => {
12
- if (isObject(source[key]) && isObject(target[key])) {
13
- if (!target[key])
14
- Object.assign(target, { [key]: {} });
15
- mergeDeep(target[key], source[key]);
16
- }
17
- else {
18
- Object.assign(target, { [key]: source[key] });
19
- }
20
- });
21
- }
22
- return mergeDeep(target, ...sources);
23
- };
24
- exports.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,18 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const resolveTokenReference = (theme, tokenType, ref) => {
4
- const tokenGroup = theme[tokenType];
5
- let referencedToken = null;
6
- Object.keys(tokenGroup).forEach((tokenName) => {
7
- if (referencedToken)
8
- return;
9
- // Relaxed runtime group resolving
10
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
11
- if (tokenName === ref)
12
- referencedToken = tokenGroup[tokenName];
13
- });
14
- if (!referencedToken)
15
- throw new Error(`[Reshaped] Referenced token not found for: ${ref}`);
16
- return referencedToken;
17
- };
18
- exports.default = resolveTokenReference;
@@ -1,81 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const vitest_1 = require("vitest");
4
- const color_1 = require("../color");
5
- (0, vitest_1.describe)("cli/utilities/color", () => {
6
- (0, vitest_1.describe)("wcag", () => {
7
- (0, vitest_1.test)("returns white for black background", () => {
8
- (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#000000", mode: "light" })).toBe("#ffffff");
9
- });
10
- (0, vitest_1.test)("returns white for dark colored background", () => {
11
- (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#aa0000", mode: "light" })).toBe("#ffffff");
12
- });
13
- (0, vitest_1.test)("returns black for white background", () => {
14
- (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#ffffff", mode: "light" })).toBe("#000000");
15
- });
16
- (0, vitest_1.test)("returns white for light colored background", () => {
17
- (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#dedede", mode: "light" })).toBe("#000000");
18
- });
19
- (0, vitest_1.test)("returns #999 for white background", () => {
20
- (0, vitest_1.expect)((0, color_1.getOnColor)({
21
- bgHexColor: "#ffffff",
22
- lightHexColor: "#eeeeee",
23
- darkHexColor: "#999999",
24
- mode: "dark",
25
- })).toBe("#999999");
26
- });
27
- (0, vitest_1.test)("returns #eee for black background", () => {
28
- (0, vitest_1.expect)((0, color_1.getOnColor)({
29
- bgHexColor: "#000000",
30
- lightHexColor: "#eeeeee",
31
- darkHexColor: "#999999",
32
- mode: "dark",
33
- })).toBe("#eeeeee");
34
- });
35
- (0, vitest_1.test)("returns black for muted green background", () => {
36
- (0, vitest_1.expect)((0, color_1.getOnColor)({
37
- bgHexColor: "#1abc9c",
38
- mode: "dark",
39
- })).toBe("#000000");
40
- });
41
- });
42
- (0, vitest_1.describe)("apca", () => {
43
- (0, vitest_1.test)("returns white for black background", () => {
44
- (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#000000", mode: "light", algorithm: "apca" })).toBe("#ffffff");
45
- });
46
- (0, vitest_1.test)("returns white for dark colored background", () => {
47
- (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#aa0000", mode: "light", algorithm: "apca" })).toBe("#ffffff");
48
- });
49
- (0, vitest_1.test)("returns black for white background", () => {
50
- (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#ffffff", mode: "light", algorithm: "apca" })).toBe("#000000");
51
- });
52
- (0, vitest_1.test)("returns white for light colored background", () => {
53
- (0, vitest_1.expect)((0, color_1.getOnColor)({ bgHexColor: "#dedede", mode: "light", algorithm: "apca" })).toBe("#000000");
54
- });
55
- (0, vitest_1.test)("returns #999 for white background", () => {
56
- (0, vitest_1.expect)((0, color_1.getOnColor)({
57
- bgHexColor: "#ffffff",
58
- lightHexColor: "#eeeeee",
59
- darkHexColor: "#999999",
60
- mode: "dark",
61
- algorithm: "apca",
62
- })).toBe("#999999");
63
- });
64
- (0, vitest_1.test)("returns #eee for black background", () => {
65
- (0, vitest_1.expect)((0, color_1.getOnColor)({
66
- bgHexColor: "#000000",
67
- lightHexColor: "#eeeeee",
68
- darkHexColor: "#999999",
69
- mode: "dark",
70
- algorithm: "apca",
71
- })).toBe("#eeeeee");
72
- });
73
- (0, vitest_1.test)("returns white for muted green background", () => {
74
- (0, vitest_1.expect)((0, color_1.getOnColor)({
75
- bgHexColor: "#1abc9c",
76
- mode: "dark",
77
- algorithm: "apca",
78
- })).toBe("#ffffff");
79
- });
80
- });
81
- });
@@ -1,16 +0,0 @@
1
- import React from "react";
2
- declare const _default: {
3
- title: string;
4
- parameters: {
5
- iframe: {
6
- url: string;
7
- };
8
- a11y: {
9
- disable: boolean;
10
- };
11
- };
12
- };
13
- export default _default;
14
- export declare const base: () => React.JSX.Element;
15
- export declare const generation: () => React.JSX.Element;
16
- export declare const onColors: () => React.JSX.Element;
@@ -1,105 +0,0 @@
1
- /**
2
- * Some of the color conversion utilities are taken from https://github.com/hsluv/hsluv-javascript
3
- * They have been rewritten for easier color transformations in the theme generation case
4
- */
5
- type RgbColor = {
6
- r: number;
7
- g: number;
8
- b: number;
9
- };
10
- type HslColor = {
11
- h: number;
12
- s: number;
13
- l: number;
14
- };
15
- type XyzColor = {
16
- x: number;
17
- y: number;
18
- z: number;
19
- };
20
- type LuvColor = {
21
- l: number;
22
- u: number;
23
- v: number;
24
- };
25
- type LchColor = {
26
- l: number;
27
- c: number;
28
- h: number;
29
- };
30
- type BoundingLines = {
31
- r0s: number;
32
- r0i: number;
33
- r1s: number;
34
- r1i: number;
35
- g0s: number;
36
- g0i: number;
37
- g1s: number;
38
- g1i: number;
39
- b0s: number;
40
- b0i: number;
41
- b1s: number;
42
- b1i: number;
43
- };
44
- /**
45
- * Color utilities
46
- */
47
- export declare const calculateBoundingLines: (l: number) => BoundingLines;
48
- export declare const distanceFromOriginAngle: (slope: number, intercept: number, angle: number) => number;
49
- export declare const calcMaxChromaHsluv: (h: number, boundingLines: BoundingLines) => number;
50
- export declare function hexToRgb(hex: string): RgbColor;
51
- export declare const rgbToHsl: ({ r, g, b }: RgbColor) => HslColor;
52
- export declare const hslToRgb: ({ h, s, l }: HslColor) => RgbColor;
53
- export declare const rgbToHex: ({ r, g, b }: RgbColor) => string;
54
- export declare const toLinear: (c: number) => number;
55
- export declare const fromLinear: (c: number) => number;
56
- export declare const rgbToXyz: ({ r, g, b }: RgbColor) => {
57
- x: number;
58
- y: number;
59
- z: number;
60
- };
61
- export declare const xyzToRgb: ({ x, y, z }: XyzColor) => RgbColor;
62
- export declare const yToL: (y: number) => number;
63
- export declare const lToY: (l: number) => number;
64
- export declare const xyzToLuv: ({ x, y, z }: XyzColor) => LuvColor;
65
- export declare const luvToXyz: ({ l, u, v }: LuvColor) => XyzColor;
66
- export declare const luvToLch: ({ l, u, v }: LuvColor) => LchColor;
67
- export declare const lchToLuv: ({ l, c, h }: LchColor) => LuvColor;
68
- export declare const lchToHsluv: ({ l, c, h }: LchColor) => HslColor;
69
- export declare const hsluvToLch: ({ h, s, l }: HslColor) => LchColor;
70
- export declare const hsluvToHex: (hsl: HslColor) => string;
71
- export declare const hexToHsl: (H: string) => HslColor;
72
- export declare const hexToHsluv: (hex: string) => HslColor;
73
- export declare const hslToHex: (hsl: HslColor) => string;
74
- /**
75
- * Normalizing utilities
76
- */
77
- export declare const getDarkModeColor: (hsl: HslColor) => {
78
- s: number;
79
- l: number;
80
- h: number;
81
- };
82
- export declare const getLuminanceDelta: (luminance: number) => number;
83
- export declare function getRgbLuminance({ r, g, b }: RgbColor): number;
84
- export declare const getOnColorWCAG: (args: {
85
- bgHexColor: string;
86
- lightHexColor?: string;
87
- darkHexColor?: string;
88
- }) => string;
89
- export declare const getOnColorAPCA: (args: {
90
- bgHexColor: string;
91
- mode: "light" | "dark";
92
- lightHexColor?: string;
93
- darkHexColor?: string;
94
- }) => string;
95
- /**
96
- * On color resolver
97
- */
98
- export declare const getOnColor: (args: {
99
- bgHexColor: string;
100
- lightHexColor?: string;
101
- darkHexColor?: string;
102
- mode: "light" | "dark";
103
- algorithm?: "wcag" | "apca";
104
- }) => string;
105
- export {};
@@ -1,377 +0,0 @@
1
- /**
2
- * Some of the color conversion utilities are taken from https://github.com/hsluv/hsluv-javascript
3
- * They have been rewritten for easier color transformations in the theme generation case
4
- */
5
- /**
6
- * Constants
7
- */
8
- const epsilon = 0.0088564516;
9
- const refY = 1.0;
10
- const refU = 0.19783000664283;
11
- const refV = 0.46831999493879;
12
- const kappa = 903.2962962;
13
- const mr0 = 3.240969941904521;
14
- const mr1 = -1.537383177570093;
15
- const mr2 = -0.498610760293;
16
- const mg0 = -0.96924363628087;
17
- const mg1 = 1.87596750150772;
18
- const mg2 = 0.041555057407175;
19
- const mb0 = 0.055630079696993;
20
- const mb1 = -0.20397695888897;
21
- const mb2 = 1.056971514242878;
22
- /**
23
- * Color utilities
24
- */
25
- export const calculateBoundingLines = (l) => {
26
- const sub1 = Math.pow(l + 16, 3) / 1560896;
27
- const sub2 = sub1 > epsilon ? sub1 : l / kappa;
28
- const s1r = sub2 * (284517 * mr0 - 94839 * mr2);
29
- const s2r = sub2 * (838422 * mr2 + 769860 * mr1 + 731718 * mr0);
30
- const s3r = sub2 * (632260 * mr2 - 126452 * mr1);
31
- const s1g = sub2 * (284517 * mg0 - 94839 * mg2);
32
- const s2g = sub2 * (838422 * mg2 + 769860 * mg1 + 731718 * mg0);
33
- const s3g = sub2 * (632260 * mg2 - 126452 * mg1);
34
- const s1b = sub2 * (284517 * mb0 - 94839 * mb2);
35
- const s2b = sub2 * (838422 * mb2 + 769860 * mb1 + 731718 * mb0);
36
- const s3b = sub2 * (632260 * mb2 - 126452 * mb1);
37
- return {
38
- r0s: s1r / s3r,
39
- r0i: (s2r * l) / s3r,
40
- r1s: s1r / (s3r + 126452),
41
- r1i: ((s2r - 769860) * l) / (s3r + 126452),
42
- g0s: s1g / s3g,
43
- g0i: (s2g * l) / s3g,
44
- g1s: s1g / (s3g + 126452),
45
- g1i: ((s2g - 769860) * l) / (s3g + 126452),
46
- b0s: s1b / s3b,
47
- b0i: (s2b * l) / s3b,
48
- b1s: s1b / (s3b + 126452),
49
- b1i: ((s2b - 769860) * l) / (s3b + 126452),
50
- };
51
- };
52
- export const distanceFromOriginAngle = (slope, intercept, angle) => {
53
- const d = intercept / (Math.sin(angle) - slope * Math.cos(angle));
54
- return d < 0 ? Infinity : d;
55
- };
56
- export const calcMaxChromaHsluv = (h, boundingLines) => {
57
- const hueRad = (h / 360) * Math.PI * 2;
58
- const r0 = distanceFromOriginAngle(boundingLines.r0s, boundingLines.r0i, hueRad);
59
- const r1 = distanceFromOriginAngle(boundingLines.r1s, boundingLines.r1i, hueRad);
60
- const g0 = distanceFromOriginAngle(boundingLines.g0s, boundingLines.g0i, hueRad);
61
- const g1 = distanceFromOriginAngle(boundingLines.g1s, boundingLines.g1i, hueRad);
62
- const b0 = distanceFromOriginAngle(boundingLines.b0s, boundingLines.b0i, hueRad);
63
- const b1 = distanceFromOriginAngle(boundingLines.b1s, boundingLines.b1i, hueRad);
64
- return Math.min(r0, r1, g0, g1, b0, b1);
65
- };
66
- export function hexToRgb(hex) {
67
- hex = hex.replace("#", "");
68
- const r = parseInt(hex.substring(0, 2), 16);
69
- const g = parseInt(hex.substring(2, 4), 16);
70
- const b = parseInt(hex.substring(4, 6), 16);
71
- return { r, g, b };
72
- }
73
- export const rgbToHsl = ({ r, g, b }) => {
74
- r /= 255;
75
- g /= 255;
76
- b /= 255;
77
- const cmin = Math.min(r, g, b);
78
- const cmax = Math.max(r, g, b);
79
- const delta = cmax - cmin;
80
- let h = 0;
81
- let s = 0;
82
- let l = 0;
83
- if (delta == 0)
84
- h = 0;
85
- else if (cmax == r)
86
- h = ((g - b) / delta) % 6;
87
- else if (cmax == g)
88
- h = (b - r) / delta + 2;
89
- else
90
- h = (r - g) / delta + 4;
91
- h = Math.round(h * 60);
92
- if (h < 0)
93
- h += 360;
94
- l = (cmax + cmin) / 2;
95
- s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
96
- s = +(s * 100).toFixed(1);
97
- l = +(l * 100).toFixed(1);
98
- return { h, s: Math.round(s), l: Math.round(l) };
99
- };
100
- export const hslToRgb = ({ h, s, l }) => {
101
- s /= 100;
102
- l /= 100;
103
- const c = (1 - Math.abs(2 * l - 1)) * s;
104
- const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
105
- const m = l - c / 2;
106
- const isSector1 = 0 <= h && h < 60;
107
- const isSector2 = 60 <= h && h < 120;
108
- const isSector3 = 120 <= h && h < 180;
109
- const isSector4 = 180 <= h && h < 240;
110
- const isSector5 = 240 <= h && h < 300;
111
- const isSector6 = 300 <= h && h < 360;
112
- const r = isSector1 || isSector6 ? c : isSector2 || isSector5 ? x : 0;
113
- const g = isSector1 || isSector4 ? x : isSector2 || isSector3 ? c : 0;
114
- const b = isSector1 || isSector2 ? 0 : isSector3 || isSector6 ? x : c;
115
- return {
116
- r: Math.round((r + m) * 255),
117
- g: Math.round((g + m) * 255),
118
- b: Math.round((b + m) * 255),
119
- };
120
- };
121
- export const rgbToHex = ({ r, g, b }) => {
122
- const red = Math.round(r).toString(16).padStart(2, "0");
123
- const green = Math.round(g).toString(16).padStart(2, "0");
124
- const blue = Math.round(b).toString(16).padStart(2, "0");
125
- return `#${red}${green}${blue}`;
126
- };
127
- export const toLinear = (c) => {
128
- if (c > 0.04045)
129
- return Math.pow((c + 0.055) / 1.055, 2.4);
130
- return c / 12.92;
131
- };
132
- export const fromLinear = (c) => {
133
- if (c <= 0.0031308)
134
- return 12.92 * c;
135
- return 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
136
- };
137
- export const rgbToXyz = ({ r, g, b }) => {
138
- const lr = toLinear(r / 255);
139
- const lg = toLinear(g / 255);
140
- const lb = toLinear(b / 255);
141
- return {
142
- x: 0.41239079926595 * lr + 0.35758433938387 * lg + 0.18048078840183 * lb,
143
- y: 0.21263900587151 * lr + 0.71516867876775 * lg + 0.072192315360733 * lb,
144
- z: 0.019330818715591 * lr + 0.11919477979462 * lg + 0.95053215224966 * lb,
145
- };
146
- };
147
- export const xyzToRgb = ({ x, y, z }) => {
148
- return {
149
- r: fromLinear(mr0 * x + mr1 * y + mr2 * z) * 255,
150
- g: fromLinear(mg0 * x + mg1 * y + mg2 * z) * 255,
151
- b: fromLinear(mb0 * x + mb1 * y + mb2 * z) * 255,
152
- };
153
- };
154
- export const yToL = (y) => {
155
- if (y <= epsilon)
156
- return (y / refY) * kappa;
157
- return 116 * Math.pow(y / refY, 1 / 3) - 16;
158
- };
159
- export const lToY = (l) => {
160
- if (l <= 8)
161
- return (refY * l) / kappa;
162
- return refY * Math.pow((l + 16) / 116, 3);
163
- };
164
- export const xyzToLuv = ({ x, y, z }) => {
165
- const divider = x + 15 * y + 3 * z;
166
- const varU = divider !== 0 ? (4 * x) / divider : NaN;
167
- const varV = divider !== 0 ? (9 * y) / divider : NaN;
168
- const l = yToL(y);
169
- return {
170
- l,
171
- u: l === 0 ? 0 : 13 * l * (varU - refU),
172
- v: l === 0 ? 0 : 13 * l * (varV - refV),
173
- };
174
- };
175
- export const luvToXyz = ({ l, u, v }) => {
176
- if (l === 0)
177
- return { x: 0, y: 0, z: 0 };
178
- const varU = u / (13 * l) + refU;
179
- const varV = v / (13 * l) + refV;
180
- const y = lToY(l);
181
- const x = 0 - (9 * y * varU) / ((varU - 4) * varV - varU * varV);
182
- const z = (9 * y - 15 * varV * y - varV * x) / (3 * varV);
183
- return { x, y, z };
184
- };
185
- export const luvToLch = ({ l, u, v }) => {
186
- const c = Math.sqrt(u * u + v * v);
187
- let h;
188
- if (c < 0.00000001) {
189
- h = 0;
190
- }
191
- else {
192
- const hrad = Math.atan2(v, u);
193
- h = (hrad * 180.0) / Math.PI;
194
- if (h < 0)
195
- h = 360 + h;
196
- }
197
- return { l, c, h };
198
- };
199
- export const lchToLuv = ({ l, c, h }) => {
200
- const hrad = (h / 180.0) * Math.PI;
201
- return {
202
- l,
203
- u: Math.cos(hrad) * c,
204
- v: Math.sin(hrad) * c,
205
- };
206
- };
207
- export const lchToHsluv = ({ l, c, h }) => {
208
- let s;
209
- let newL;
210
- if (l > 99.9999999) {
211
- s = 0;
212
- newL = 100;
213
- }
214
- else if (l < 0.00000001) {
215
- s = 0;
216
- newL = 0;
217
- }
218
- else {
219
- const boundingLines = calculateBoundingLines(l);
220
- const max = calcMaxChromaHsluv(h, boundingLines);
221
- s = (c / max) * 100;
222
- newL = l;
223
- }
224
- return { h, s, l: newL };
225
- };
226
- export const hsluvToLch = ({ h, s, l }) => {
227
- let newL;
228
- let c;
229
- if (l > 99.9999999) {
230
- newL = 100;
231
- c = 0;
232
- }
233
- else if (l < 0.00000001) {
234
- newL = 0;
235
- c = 0;
236
- }
237
- else {
238
- const boundingLines = calculateBoundingLines(l);
239
- const max = calcMaxChromaHsluv(h, boundingLines);
240
- newL = l;
241
- c = (max / 100) * s;
242
- }
243
- return { l: newL, c, h };
244
- };
245
- export const hsluvToHex = (hsl) => {
246
- const lch = hsluvToLch(hsl);
247
- const luv = lchToLuv(lch);
248
- const xyz = luvToXyz(luv);
249
- const rgb = xyzToRgb(xyz);
250
- return rgbToHex(rgb);
251
- };
252
- export const hexToHsl = (H) => {
253
- const rgb = hexToRgb(H);
254
- return rgbToHsl(rgb);
255
- };
256
- export const hexToHsluv = (hex) => {
257
- const rgb = hexToRgb(hex);
258
- const xyz = rgbToXyz(rgb);
259
- const luv = xyzToLuv(xyz);
260
- const lch = luvToLch(luv);
261
- return lchToHsluv(lch);
262
- };
263
- export const hslToHex = (hsl) => {
264
- const rgb = hslToRgb(hsl);
265
- return rgbToHex(rgb);
266
- };
267
- /**
268
- * Normalizing utilities
269
- */
270
- export const getDarkModeColor = (hsl) => {
271
- const { s, l } = hsl;
272
- /**
273
- * Colors with lower saturation should have bigger lightness delta, for example it can be
274
- * Neutral: l: 97 -> l dark: 13
275
- * Warning: l: 53 -> l dark: 47
276
- *
277
- * Therefor we calculate the dark mode lightness based on a saturation modifier, which should be between 0 and 1
278
- * We take base saturation:
279
- * Neutral: 20 -> 0.2 modifier, Warning: 96 -> 0.96 modifier
280
- *
281
- * And we also adjust that value with a modifier of 0.9-2 based on the saturation
282
- * That way satured colors won't change much from its original value
283
- */
284
- const sModifier = (s / 100) * (0.96 + (100 - s) / 100);
285
- return { ...hsl, s: Math.max(0, s - 7), l: l * sModifier };
286
- };
287
- export const getLuminanceDelta = (luminance) => {
288
- return Math.max(0, luminance - 50) / 5;
289
- };
290
- export function getRgbLuminance({ r, g, b }) {
291
- r /= 255;
292
- g /= 255;
293
- b /= 255;
294
- const y = 0.2126 * r + 0.7152 * g + 0.0722 * b;
295
- // The CIE standard states 0.008856 but 216/24389 is the intent for 0.008856451679036
296
- if (y <= 216 / 24389) {
297
- // The CIE standard states 903.3, but 24389/27 is the intent, making 903.296296296296296
298
- return y * (24389 / 27);
299
- }
300
- else {
301
- return Math.pow(y, 1 / 3) * 116 - 16;
302
- }
303
- }
304
- /**
305
- * WCAG contrast
306
- */
307
- const RED = 0.2126;
308
- const GREEN = 0.7152;
309
- const BLUE = 0.0722;
310
- const GAMMA = 2.4;
311
- function luminanceWCAG(r, g, b) {
312
- const a = [r, g, b].map((v) => {
313
- v /= 255;
314
- return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, GAMMA);
315
- });
316
- return a[0] * RED + a[1] * GREEN + a[2] * BLUE;
317
- }
318
- function contrastWCAG(rgb1, rgb2) {
319
- const lum1 = luminanceWCAG(...rgb1);
320
- const lum2 = luminanceWCAG(...rgb2);
321
- const brightest = Math.max(lum1, lum2);
322
- const darkest = Math.min(lum1, lum2);
323
- return (brightest + 0.05) / (darkest + 0.05);
324
- }
325
- export const getOnColorWCAG = (args) => {
326
- const { bgHexColor, lightHexColor = "#ffffff", darkHexColor = "#000000" } = args;
327
- const bgRgb = hexToRgb(bgHexColor);
328
- const lightRgb = hexToRgb(lightHexColor);
329
- return contrastWCAG([bgRgb.r, bgRgb.g, bgRgb.b], [lightRgb.r, lightRgb.g, lightRgb.b]) > 4.5
330
- ? lightHexColor
331
- : darkHexColor;
332
- };
333
- /**
334
- * APCA contrast
335
- */
336
- function luminanceAPCA({ r, g, b }) {
337
- return (0.2126 * Math.pow(r / 255, 2.2) +
338
- 0.7152 * Math.pow(g / 255, 2.2) +
339
- 0.0722 * Math.pow(b / 255, 2.2));
340
- }
341
- function contrastAPCA(backgroundLuminance, textLuminance) {
342
- // Calculate the contrast based on APCA
343
- const Lc = textLuminance - backgroundLuminance;
344
- return Math.abs(Lc); // Return the absolute value of contrast
345
- }
346
- export const getOnColorAPCA = (args) => {
347
- const { bgHexColor, mode, lightHexColor = "#ffffff", darkHexColor = "#000000" } = args;
348
- const bgHexAlpha = bgHexColor.slice(7);
349
- const bgAlpha = bgHexAlpha ? Number((parseInt(bgHexAlpha, 16) / 255).toFixed(2)) : 1;
350
- const bgColor = hexToRgb(bgHexColor.slice(0, 7));
351
- const baseColor = mode === "light" ? { r: 255, g: 255, b: 255 } : { r: 0, g: 0, b: 0 };
352
- const { r, g, b } = {
353
- r: (1 - bgAlpha) * baseColor.r + bgAlpha * bgColor.r,
354
- g: (1 - bgAlpha) * baseColor.g + bgAlpha * bgColor.g,
355
- b: (1 - bgAlpha) * baseColor.b + bgAlpha * bgColor.b,
356
- };
357
- // Calculate luminance for background and for white & black
358
- const backgroundLuminance = luminanceAPCA({ r, g, b });
359
- const whiteLuminance = luminanceAPCA({ r: 255, g: 255, b: 255 });
360
- const blackLuminance = luminanceAPCA({ r: 0, g: 0, b: 0 });
361
- // Calculate contrast
362
- const contrastWithWhite = contrastAPCA(backgroundLuminance, whiteLuminance);
363
- const contrastWithBlack = contrastAPCA(backgroundLuminance, blackLuminance);
364
- // Choose the color with higher contrast
365
- return contrastWithWhite > contrastWithBlack ? lightHexColor : darkHexColor;
366
- };
367
- /**
368
- * On color resolver
369
- */
370
- export const getOnColor = (args) => {
371
- if (args.algorithm === "apca") {
372
- return getOnColorAPCA(args);
373
- }
374
- else {
375
- return getOnColorWCAG(args);
376
- }
377
- };
@@ -1,4 +0,0 @@
1
- import type * as T from "../types";
2
- import type { FullThemeDefinition } from "../tokens/types";
3
- declare const generateBackgroundColors: (definition: T.PartialDeep<FullThemeDefinition>, themeOptions?: T.PublicOptions["themeOptions"]) => void;
4
- export default generateBackgroundColors;
@@ -1,57 +0,0 @@
1
- import { hexToRgb, getOnColor } from "./color.js";
2
- import { bgWithDynamicForeground } from "../constants.js";
3
- import { capitalize } from "../../../utilities/string.js";
4
- const generateBackgroundColors = (definition, themeOptions) => {
5
- if (!definition.color)
6
- return;
7
- Object.keys(definition.color).forEach((tokenName) => {
8
- const bgToken = definition.color?.[tokenName];
9
- const generatedForegroundName = `on${capitalize(tokenName)}`;
10
- const generatedRGBName = `rgb${capitalize(tokenName)}`;
11
- const generateOnColorsFor = [
12
- ...bgWithDynamicForeground,
13
- ...(themeOptions?.generateOnColorsFor || []),
14
- ];
15
- const needsDynamicForeground = generateOnColorsFor.includes(tokenName) && !definition.color?.[generatedForegroundName];
16
- const needsRGB = tokenName.startsWith("background") ||
17
- tokenName.endsWith("black") ||
18
- tokenName.endsWith("white");
19
- if (!bgToken)
20
- return;
21
- if (needsDynamicForeground) {
22
- const overrideKeys = themeOptions?.onColorValues && Object.keys(themeOptions?.onColorValues);
23
- const onColorKey = overrideKeys && overrideKeys.find((key) => tokenName.toLowerCase().includes(key));
24
- const onColorHexMap = {
25
- lightHexColor: (onColorKey && themeOptions?.onColorValues?.[onColorKey]?.hexLight) ||
26
- definition?.color?.white?.hex,
27
- darkHexColor: (onColorKey && themeOptions?.onColorValues?.[onColorKey]?.hexDark) ||
28
- definition?.color?.black?.hex,
29
- };
30
- const hex = getOnColor({
31
- bgHexColor: bgToken.hex,
32
- mode: "light",
33
- algorithm: themeOptions?.colorContrastAlgorithm,
34
- ...onColorHexMap,
35
- });
36
- const hexDark = getOnColor({
37
- bgHexColor: bgToken.hexDark || bgToken.hex,
38
- mode: "dark",
39
- algorithm: themeOptions?.colorContrastAlgorithm,
40
- ...onColorHexMap,
41
- });
42
- definition.color[generatedForegroundName] = {
43
- hex,
44
- hexDark: hex !== hexDark ? hexDark : undefined,
45
- };
46
- }
47
- if (needsRGB) {
48
- const rgb = hexToRgb(bgToken.hex);
49
- const rgbDark = bgToken.hexDark && hexToRgb(bgToken.hexDark);
50
- definition.color[generatedRGBName] = {
51
- hex: `${rgb.r}, ${rgb.g}, ${rgb.b}`,
52
- hexDark: rgbDark && `${rgbDark.r}, ${rgbDark.g}, ${rgbDark.b}`,
53
- };
54
- }
55
- });
56
- };
57
- export default generateBackgroundColors;