reshaped 3.8.3 → 3.8.4-canary.1
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.
- package/dist/bundle.css +1 -1
- package/dist/bundle.js +8 -8
- package/dist/components/Accordion/Accordion.d.ts +1 -6
- package/dist/components/Accordion/Accordion.js +0 -4
- package/dist/components/Accordion/index.d.ts +8 -1
- package/dist/components/Accordion/index.js +7 -1
- package/dist/components/Actionable/Actionable.types.d.ts +1 -1
- package/dist/components/Autocomplete/Autocomplete.d.ts +2 -4
- package/dist/components/Autocomplete/Autocomplete.js +1 -2
- package/dist/components/Autocomplete/index.d.ts +5 -1
- package/dist/components/Autocomplete/index.js +4 -1
- package/dist/components/Autocomplete/tests/Autocomplete.stories.d.ts +1 -1
- package/dist/components/Badge/Badge.d.ts +2 -1
- package/dist/components/Badge/Badge.js +0 -2
- package/dist/components/Badge/Badge.types.d.ts +1 -6
- package/dist/components/Badge/index.d.ts +6 -1
- package/dist/components/Badge/index.js +5 -1
- package/dist/components/Badge/tests/Badge.stories.d.ts +3 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +1 -4
- package/dist/components/Breadcrumbs/Breadcrumbs.js +0 -2
- package/dist/components/Breadcrumbs/index.d.ts +6 -1
- package/dist/components/Breadcrumbs/index.js +5 -1
- package/dist/components/Button/Button.d.ts +14 -1
- package/dist/components/Button/Button.js +0 -4
- package/dist/components/Button/Button.module.css +1 -1
- package/dist/components/Button/Button.types.d.ts +1 -7
- package/dist/components/Button/index.d.ts +8 -1
- package/dist/components/Button/index.js +7 -1
- package/dist/components/Button/tests/Button.stories.d.ts +16 -1
- package/dist/components/Carousel/Carousel.types.d.ts +2 -1
- package/dist/components/Carousel/CarouselControl.d.ts +2 -1
- package/dist/components/ContextMenu/ContextMenu.d.ts +1 -8
- package/dist/components/ContextMenu/ContextMenu.js +0 -5
- package/dist/components/ContextMenu/index.d.ts +10 -1
- package/dist/components/ContextMenu/index.js +9 -1
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +7 -15
- package/dist/components/DropdownMenu/DropdownMenu.js +7 -14
- package/dist/components/DropdownMenu/index.d.ts +12 -1
- package/dist/components/DropdownMenu/index.js +11 -1
- package/dist/components/DropdownMenu/tests/DropdownMenu.stories.d.ts +5 -5
- package/dist/components/FileUpload/FileUpload.d.ts +2 -4
- package/dist/components/FileUpload/FileUpload.js +1 -2
- package/dist/components/FileUpload/index.d.ts +5 -1
- package/dist/components/FileUpload/index.js +4 -1
- package/dist/components/FileUpload/tests/FileUpload.stories.d.ts +1 -1
- package/dist/components/Flyout/Flyout.d.ts +1 -6
- package/dist/components/Flyout/Flyout.js +0 -4
- package/dist/components/Flyout/index.d.ts +8 -1
- package/dist/components/Flyout/index.js +7 -1
- package/dist/components/FormControl/FormControl.d.ts +1 -8
- package/dist/components/FormControl/FormControl.js +0 -6
- package/dist/components/FormControl/index.d.ts +10 -1
- package/dist/components/FormControl/index.js +9 -1
- package/dist/components/Grid/Grid.d.ts +4 -4
- package/dist/components/Grid/Grid.js +1 -2
- package/dist/components/Grid/index.d.ts +5 -1
- package/dist/components/Grid/index.js +4 -1
- package/dist/components/Grid/tests/Grid.stories.d.ts +2 -4
- package/dist/components/MenuItem/MenuItem.d.ts +12 -1
- package/dist/components/MenuItem/MenuItem.js +0 -2
- package/dist/components/MenuItem/MenuItem.types.d.ts +1 -6
- package/dist/components/MenuItem/index.d.ts +6 -1
- package/dist/components/MenuItem/index.js +5 -1
- package/dist/components/MenuItem/tests/MenuItem.stories.d.ts +13 -1
- package/dist/components/Modal/Modal.d.ts +3 -6
- package/dist/components/Modal/Modal.js +2 -4
- package/dist/components/Modal/index.d.ts +6 -1
- package/dist/components/Modal/index.js +5 -1
- package/dist/components/Modal/tests/Modal.stories.d.ts +2 -2
- package/dist/components/Popover/Popover.d.ts +2 -7
- package/dist/components/Popover/Popover.js +1 -4
- package/dist/components/Popover/index.d.ts +8 -1
- package/dist/components/Popover/index.js +7 -1
- package/dist/components/Popover/tests/Popover.stories.d.ts +1 -1
- package/dist/components/Resizable/Resizable.d.ts +2 -4
- package/dist/components/Resizable/Resizable.js +4 -5
- package/dist/components/Resizable/index.d.ts +7 -1
- package/dist/components/Resizable/index.js +6 -1
- package/dist/components/Resizable/tests/Resizable.stories.d.ts +2 -2
- package/dist/components/Select/Select.d.ts +1 -8
- package/dist/components/Select/Select.js +0 -6
- package/dist/components/Select/index.d.ts +10 -1
- package/dist/components/Select/index.js +9 -1
- package/dist/components/Stepper/Stepper.d.ts +2 -4
- package/dist/components/Stepper/Stepper.js +1 -2
- package/dist/components/Stepper/index.d.ts +5 -1
- package/dist/components/Stepper/index.js +4 -1
- package/dist/components/Stepper/tests/Stepper.stories.d.ts +1 -4
- package/dist/components/Table/Table.d.ts +6 -12
- package/dist/components/Table/Table.js +5 -10
- package/dist/components/Table/index.d.ts +9 -1
- package/dist/components/Table/index.js +8 -1
- package/dist/components/Table/tests/Table.stories.d.ts +5 -5
- package/dist/components/Tabs/Tabs.d.ts +1 -8
- package/dist/components/Tabs/Tabs.js +0 -6
- package/dist/components/Tabs/index.d.ts +10 -1
- package/dist/components/Tabs/index.js +9 -1
- package/dist/components/TextArea/TextArea.d.ts +1 -4
- package/dist/components/TextArea/TextArea.js +0 -2
- package/dist/components/TextArea/index.d.ts +6 -1
- package/dist/components/TextArea/index.js +5 -1
- package/dist/components/TextField/TextField.d.ts +1 -4
- package/dist/components/TextField/TextField.js +0 -2
- package/dist/components/TextField/index.d.ts +6 -1
- package/dist/components/TextField/index.js +5 -1
- package/dist/components/Timeline/Timeline.d.ts +2 -4
- package/dist/components/Timeline/Timeline.js +1 -2
- package/dist/components/Timeline/index.d.ts +5 -1
- package/dist/components/Timeline/index.js +4 -1
- package/dist/components/Timeline/tests/Timeline.stories.d.ts +1 -1
- package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.d.ts +4 -0
- package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.js +15 -0
- package/dist/components/View/View.d.ts +4 -4
- package/dist/components/View/View.js +1 -2
- package/dist/components/View/index.d.ts +5 -1
- package/dist/components/View/index.js +4 -1
- package/dist/components/View/tests/View.stories.d.ts +2 -4
- package/dist/components/_private/Portal/Portal.d.ts +3 -5
- package/dist/components/_private/Portal/Portal.js +1 -2
- package/dist/components/_private/Portal/index.d.ts +5 -1
- package/dist/components/_private/Portal/index.js +4 -1
- package/dist/{cjs/config/postcss.js → config/postcss.cjs} +4 -4
- package/dist/{cjs/config/postcss.d.ts → config/postcss.d.cts} +3 -3
- package/dist/config/postcss.js +3 -0
- package/dist/hooks/useOnClickOutside.js +7 -3
- package/package.json +6 -6
- package/dist/cjs/cli/theming/index.d.ts +0 -4
- package/dist/cjs/cli/theming/index.js +0 -40
- package/dist/cjs/cli/theming/reshaped.config.d.ts +0 -3
- package/dist/cjs/cli/theming/reshaped.config.js +0 -25
- package/dist/cjs/cli/theming/tailwind.d.ts +0 -2
- package/dist/cjs/cli/theming/tailwind.js +0 -83
- package/dist/cjs/config/tailwind.d.ts +0 -2
- package/dist/cjs/config/tailwind.js +0 -86
- package/dist/cjs/constants/breakpoints.d.ts +0 -6
- package/dist/cjs/constants/breakpoints.js +0 -7
- package/dist/cjs/themes/_generator/constants.d.ts +0 -2
- package/dist/cjs/themes/_generator/constants.js +0 -11
- package/dist/cjs/themes/_generator/definitions/figma.d.ts +0 -3
- package/dist/cjs/themes/_generator/definitions/figma.js +0 -197
- package/dist/cjs/themes/_generator/definitions/reshaped.d.ts +0 -3
- package/dist/cjs/themes/_generator/definitions/reshaped.js +0 -210
- package/dist/cjs/themes/_generator/definitions/slate.d.ts +0 -3
- package/dist/cjs/themes/_generator/definitions/slate.js +0 -12
- package/dist/cjs/themes/_generator/tokens/color/color.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/color/color.transforms.js +0 -44
- package/dist/cjs/themes/_generator/tokens/color/color.types.d.ts +0 -33
- package/dist/cjs/themes/_generator/tokens/color/color.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/color/utilities/a11y.d.ts +0 -20
- package/dist/cjs/themes/_generator/tokens/color/utilities/a11y.js +0 -64
- package/dist/cjs/themes/_generator/tokens/color/utilities/convert.d.ts +0 -11
- package/dist/cjs/themes/_generator/tokens/color/utilities/convert.js +0 -33
- package/dist/cjs/themes/_generator/tokens/color/utilities/generateColors.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/color/utilities/generateColors.js +0 -152
- package/dist/cjs/themes/_generator/tokens/color/utilities/generateMetaColors.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/color/utilities/generateMetaColors.js +0 -68
- package/dist/cjs/themes/_generator/tokens/color/utilities/tests/a11y.test.d.ts +0 -1
- package/dist/cjs/themes/_generator/tokens/color/utilities/tests/a11y.test.js +0 -38
- package/dist/cjs/themes/_generator/tokens/color/utilities/tests/convert.test.d.ts +0 -1
- package/dist/cjs/themes/_generator/tokens/color/utilities/tests/convert.test.js +0 -48
- package/dist/cjs/themes/_generator/tokens/color/utilities/tests/generateColors.test.d.ts +0 -1
- package/dist/cjs/themes/_generator/tokens/color/utilities/tests/generateColors.test.js +0 -21
- package/dist/cjs/themes/_generator/tokens/css.d.ts +0 -6
- package/dist/cjs/themes/_generator/tokens/css.js +0 -52
- package/dist/cjs/themes/_generator/tokens/duration/duration.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/duration/duration.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/duration/duration.types.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/duration/duration.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/easing/easing.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/easing/easing.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/easing/easing.types.d.ts +0 -7
- package/dist/cjs/themes/_generator/tokens/easing/easing.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/font/font.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/font/font.transforms.js +0 -43
- package/dist/cjs/themes/_generator/tokens/font/font.types.d.ts +0 -11
- package/dist/cjs/themes/_generator/tokens/font/font.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.types.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.types.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/radius/radius.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/radius/radius.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/radius/radius.types.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/radius/radius.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/shadow/shadow.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/shadow/shadow.transforms.js +0 -22
- package/dist/cjs/themes/_generator/tokens/shadow/shadow.types.d.ts +0 -13
- package/dist/cjs/themes/_generator/tokens/shadow/shadow.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/transforms.d.ts +0 -13
- package/dist/cjs/themes/_generator/tokens/transforms.js +0 -30
- package/dist/cjs/themes/_generator/tokens/types.d.ts +0 -62
- package/dist/cjs/themes/_generator/tokens/types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/unit/unit.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/unit/unit.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/unit/unit.types.d.ts +0 -5
- package/dist/cjs/themes/_generator/tokens/unit/unit.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/unit/utilities/generate.d.ts +0 -5
- package/dist/cjs/themes/_generator/tokens/unit/utilities/generate.js +0 -16
- package/dist/cjs/themes/_generator/tokens/viewport/viewport.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/viewport/viewport.transforms.js +0 -27
- package/dist/cjs/themes/_generator/tokens/viewport/viewport.types.d.ts +0 -9
- package/dist/cjs/themes/_generator/tokens/viewport/viewport.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.types.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.types.js +0 -2
- package/dist/cjs/themes/_generator/transform.d.ts +0 -8
- package/dist/cjs/themes/_generator/transform.js +0 -108
- package/dist/cjs/themes/_generator/types.d.ts +0 -15
- package/dist/cjs/themes/_generator/types.js +0 -2
- package/dist/cjs/themes/_generator/utilities/mergeDefinitions.d.ts +0 -3
- package/dist/cjs/themes/_generator/utilities/mergeDefinitions.js +0 -19
- package/dist/cjs/themes/figma/media.css +0 -1
- package/dist/cjs/themes/figma/tailwind.css +0 -1
- package/dist/cjs/themes/figma/theme.css +0 -1
- package/dist/cjs/themes/fragments/twitter/tailwind.css +0 -1
- package/dist/cjs/themes/fragments/twitter/theme.css +0 -1
- package/dist/cjs/themes/index.d.ts +0 -23
- package/dist/cjs/themes/index.js +0 -21
- package/dist/cjs/themes/reshaped/media.css +0 -1
- package/dist/cjs/themes/reshaped/tailwind.css +0 -1
- package/dist/cjs/themes/reshaped/theme.css +0 -1
- package/dist/cjs/themes/slate/media.css +0 -1
- package/dist/cjs/themes/slate/tailwind.css +0 -1
- package/dist/cjs/themes/slate/theme.css +0 -1
- package/dist/cjs/types/config.d.ts +0 -20
- package/dist/cjs/types/config.js +0 -2
- package/dist/cjs/utilities/string.d.ts +0 -2
- 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 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -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 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -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 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -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,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,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,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,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,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 {};
|