reshaped 3.3.7 → 3.3.8
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.js +4 -4
- package/dist/cjs/cli/theming/index.js +3 -0
- package/dist/cjs/cli/theming/tailwind.d.ts +3 -0
- package/dist/cjs/cli/theming/tailwind.js +83 -0
- package/dist/cjs/themes/figma/tailwind.css +1 -0
- package/dist/cjs/themes/fragments/twitter/tailwind.css +1 -0
- package/dist/cjs/themes/reshaped/tailwind.css +1 -0
- package/dist/cjs/themes/slate/tailwind.css +1 -0
- package/dist/cli/theming/index.js +3 -0
- package/dist/cli/theming/tailwind.d.ts +3 -0
- package/dist/cli/theming/tailwind.js +76 -0
- package/dist/components/View/View.js +2 -3
- package/dist/themes/figma/tailwind.css +1 -0
- package/dist/themes/fragments/twitter/tailwind.css +1 -0
- package/dist/themes/reshaped/tailwind.css +1 -0
- package/dist/themes/slate/tailwind.css +1 -0
- package/package.json +16 -16
|
@@ -10,6 +10,7 @@ const chalk_1 = __importDefault(require("chalk"));
|
|
|
10
10
|
const mergeDefinitions_1 = __importDefault(require("../../themes/_generator/utilities/mergeDefinitions"));
|
|
11
11
|
const transform_1 = __importDefault(require("../../themes/_generator/transform"));
|
|
12
12
|
const reshaped_1 = __importDefault(require("../../themes/_generator/definitions/reshaped"));
|
|
13
|
+
const tailwind_1 = require("./tailwind");
|
|
13
14
|
const transformDefinition = (name, definition, options) => {
|
|
14
15
|
const { isFragment, outputPath } = options;
|
|
15
16
|
const code = (0, transform_1.default)(name, definition, options);
|
|
@@ -18,10 +19,12 @@ const transformDefinition = (name, definition, options) => {
|
|
|
18
19
|
: path_1.default.resolve(outputPath, name);
|
|
19
20
|
const themePath = path_1.default.resolve(themeFolderPath, "theme.css");
|
|
20
21
|
const themeMediaPath = path_1.default.resolve(themeFolderPath, "media.css");
|
|
22
|
+
const twPath = path_1.default.resolve(themeFolderPath, "tailwind.css");
|
|
21
23
|
const themeJsonPath = path_1.default.resolve(themeFolderPath, "theme.json");
|
|
22
24
|
fs_1.default.mkdirSync(themeFolderPath, { recursive: true });
|
|
23
25
|
fs_1.default.writeFileSync(themePath, code.variables);
|
|
24
26
|
fs_1.default.writeFileSync(themeJsonPath, JSON.stringify(definition));
|
|
27
|
+
fs_1.default.writeFileSync(twPath, (0, tailwind_1.transformToTailwind)(definition));
|
|
25
28
|
if (code.media)
|
|
26
29
|
fs_1.default.writeFileSync(themeMediaPath, code.media);
|
|
27
30
|
const logOutput = `Compiled ${chalk_1.default.bold(name)} theme${isFragment ? " fragment" : ""}`;
|
|
@@ -0,0 +1,83 @@
|
|
|
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.transformToTailwind = void 0;
|
|
7
|
+
/**
|
|
8
|
+
* Transform JS theme defintion to Tailwind 4 CSS definition
|
|
9
|
+
*/
|
|
10
|
+
const reshaped_1 = __importDefault(require("../../themes/_generator/definitions/reshaped"));
|
|
11
|
+
const mergeDefinitions_1 = __importDefault(require("../../themes/_generator/utilities/mergeDefinitions"));
|
|
12
|
+
const string_1 = require("../../utilities/string");
|
|
13
|
+
const transformToTailwind = (theme) => {
|
|
14
|
+
const variables = {};
|
|
15
|
+
const definition = theme
|
|
16
|
+
? (0, mergeDefinitions_1.default)(reshaped_1.default, theme)
|
|
17
|
+
: reshaped_1.default;
|
|
18
|
+
Object.keys(definition.color).forEach((tokenName) => {
|
|
19
|
+
const cssTokenName = (0, string_1.camelToKebab)(tokenName);
|
|
20
|
+
const cssVariable = ["rs", "color", cssTokenName].join("-");
|
|
21
|
+
const configValue = `var(--${cssVariable})`;
|
|
22
|
+
if (cssTokenName.startsWith("rgb-"))
|
|
23
|
+
return;
|
|
24
|
+
if (cssTokenName.startsWith("background-")) {
|
|
25
|
+
const name = cssTokenName.replace("background-", "");
|
|
26
|
+
variables[`--background-color-${name}`] = configValue;
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
if (cssTokenName.startsWith("on-")) {
|
|
30
|
+
// Replacing on- separately to support on-brand
|
|
31
|
+
const name = cssTokenName.replace("on-", "").replace("background-", "");
|
|
32
|
+
variables[`--text-color-on-${name}`] = configValue;
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
if (cssTokenName.startsWith("foreground-")) {
|
|
36
|
+
const name = cssTokenName.replace("foreground-", "");
|
|
37
|
+
variables[`--text-color-${name}`] = configValue;
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
if (cssTokenName.startsWith("border-")) {
|
|
41
|
+
const name = cssTokenName.replace("border-", "");
|
|
42
|
+
variables[`--border-color-${name}`] = configValue;
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
variables[`--color-${cssTokenName}`] = configValue;
|
|
46
|
+
});
|
|
47
|
+
Object.keys(definition.radius).forEach((tokenName) => {
|
|
48
|
+
const cssTokenName = (0, string_1.camelToKebab)(tokenName);
|
|
49
|
+
variables[`--radius-${tokenName}`] = `var(--rs-radius-${cssTokenName})`;
|
|
50
|
+
return;
|
|
51
|
+
});
|
|
52
|
+
Object.keys(definition.unit).forEach((tokenName) => {
|
|
53
|
+
if (tokenName.startsWith("base")) {
|
|
54
|
+
[...Array(11).keys()].forEach((i) => {
|
|
55
|
+
if (i === 0) {
|
|
56
|
+
variables[`--spacing-0`] = "0px";
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
variables[`--spacing-x${i}`] = `var(--rs-unit-x${i})`;
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
Object.keys(definition.shadow).forEach((tokenName) => {
|
|
65
|
+
const cssTokenName = (0, string_1.camelToKebab)(tokenName);
|
|
66
|
+
const cssVariable = ["rs", "shadow", cssTokenName].join("-");
|
|
67
|
+
const configValue = `var(--${cssVariable})`;
|
|
68
|
+
const name = cssTokenName.replace("shadow-", "");
|
|
69
|
+
variables[`--shadow-${name}`] = configValue;
|
|
70
|
+
return;
|
|
71
|
+
});
|
|
72
|
+
Object.entries(definition.viewport).forEach(([tokenName, tokenValue]) => {
|
|
73
|
+
if (!tokenValue.minPx)
|
|
74
|
+
return;
|
|
75
|
+
variables[`--breakpoint-${tokenName}`] = `${tokenValue.minPx}px`;
|
|
76
|
+
});
|
|
77
|
+
return `@theme {
|
|
78
|
+
${Object.entries(variables)
|
|
79
|
+
.map(([key, value]) => `${key}: ${value};`)
|
|
80
|
+
.join("\n")}
|
|
81
|
+
}`;
|
|
82
|
+
};
|
|
83
|
+
exports.transformToTailwind = transformToTailwind;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--background-color-neutral-highlighted:var(--rs-color-background-neutral-highlighted);--background-color-primary-highlighted:var(--rs-color-background-primary-highlighted);--background-color-positive-highlighted:var(--rs-color-background-positive-highlighted);--background-color-critical-highlighted:var(--rs-color-background-critical-highlighted);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--background-color-primary-highlighted:var(--rs-color-background-primary-highlighted);--text-color-on-primary:var(--rs-color-on-background-primary);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
|
|
@@ -4,6 +4,7 @@ import chalk from "chalk";
|
|
|
4
4
|
import mergeDefinitions from "../../themes/_generator/utilities/mergeDefinitions.js";
|
|
5
5
|
import transform from "../../themes/_generator/transform.js";
|
|
6
6
|
import reshapedDefinition from "../../themes/_generator/definitions/reshaped.js";
|
|
7
|
+
import { transformToTailwind } from "./tailwind.js";
|
|
7
8
|
const transformDefinition = (name, definition, options) => {
|
|
8
9
|
const { isFragment, outputPath } = options;
|
|
9
10
|
const code = transform(name, definition, options);
|
|
@@ -12,10 +13,12 @@ const transformDefinition = (name, definition, options) => {
|
|
|
12
13
|
: path.resolve(outputPath, name);
|
|
13
14
|
const themePath = path.resolve(themeFolderPath, "theme.css");
|
|
14
15
|
const themeMediaPath = path.resolve(themeFolderPath, "media.css");
|
|
16
|
+
const twPath = path.resolve(themeFolderPath, "tailwind.css");
|
|
15
17
|
const themeJsonPath = path.resolve(themeFolderPath, "theme.json");
|
|
16
18
|
fs.mkdirSync(themeFolderPath, { recursive: true });
|
|
17
19
|
fs.writeFileSync(themePath, code.variables);
|
|
18
20
|
fs.writeFileSync(themeJsonPath, JSON.stringify(definition));
|
|
21
|
+
fs.writeFileSync(twPath, transformToTailwind(definition));
|
|
19
22
|
if (code.media)
|
|
20
23
|
fs.writeFileSync(themeMediaPath, code.media);
|
|
21
24
|
const logOutput = `Compiled ${chalk.bold(name)} theme${isFragment ? " fragment" : ""}`;
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Transform JS theme defintion to Tailwind 4 CSS definition
|
|
3
|
+
*/
|
|
4
|
+
import reshapedDefinition from "../../themes/_generator/definitions/reshaped.js";
|
|
5
|
+
import mergeDefinitions from "../../themes/_generator/utilities/mergeDefinitions.js";
|
|
6
|
+
import { camelToKebab } from "../../utilities/string.js";
|
|
7
|
+
export const transformToTailwind = (theme) => {
|
|
8
|
+
const variables = {};
|
|
9
|
+
const definition = theme
|
|
10
|
+
? mergeDefinitions(reshapedDefinition, theme)
|
|
11
|
+
: reshapedDefinition;
|
|
12
|
+
Object.keys(definition.color).forEach((tokenName) => {
|
|
13
|
+
const cssTokenName = camelToKebab(tokenName);
|
|
14
|
+
const cssVariable = ["rs", "color", cssTokenName].join("-");
|
|
15
|
+
const configValue = `var(--${cssVariable})`;
|
|
16
|
+
if (cssTokenName.startsWith("rgb-"))
|
|
17
|
+
return;
|
|
18
|
+
if (cssTokenName.startsWith("background-")) {
|
|
19
|
+
const name = cssTokenName.replace("background-", "");
|
|
20
|
+
variables[`--background-color-${name}`] = configValue;
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
if (cssTokenName.startsWith("on-")) {
|
|
24
|
+
// Replacing on- separately to support on-brand
|
|
25
|
+
const name = cssTokenName.replace("on-", "").replace("background-", "");
|
|
26
|
+
variables[`--text-color-on-${name}`] = configValue;
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
if (cssTokenName.startsWith("foreground-")) {
|
|
30
|
+
const name = cssTokenName.replace("foreground-", "");
|
|
31
|
+
variables[`--text-color-${name}`] = configValue;
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
if (cssTokenName.startsWith("border-")) {
|
|
35
|
+
const name = cssTokenName.replace("border-", "");
|
|
36
|
+
variables[`--border-color-${name}`] = configValue;
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
variables[`--color-${cssTokenName}`] = configValue;
|
|
40
|
+
});
|
|
41
|
+
Object.keys(definition.radius).forEach((tokenName) => {
|
|
42
|
+
const cssTokenName = camelToKebab(tokenName);
|
|
43
|
+
variables[`--radius-${tokenName}`] = `var(--rs-radius-${cssTokenName})`;
|
|
44
|
+
return;
|
|
45
|
+
});
|
|
46
|
+
Object.keys(definition.unit).forEach((tokenName) => {
|
|
47
|
+
if (tokenName.startsWith("base")) {
|
|
48
|
+
[...Array(11).keys()].forEach((i) => {
|
|
49
|
+
if (i === 0) {
|
|
50
|
+
variables[`--spacing-0`] = "0px";
|
|
51
|
+
}
|
|
52
|
+
else {
|
|
53
|
+
variables[`--spacing-x${i}`] = `var(--rs-unit-x${i})`;
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
Object.keys(definition.shadow).forEach((tokenName) => {
|
|
59
|
+
const cssTokenName = camelToKebab(tokenName);
|
|
60
|
+
const cssVariable = ["rs", "shadow", cssTokenName].join("-");
|
|
61
|
+
const configValue = `var(--${cssVariable})`;
|
|
62
|
+
const name = cssTokenName.replace("shadow-", "");
|
|
63
|
+
variables[`--shadow-${name}`] = configValue;
|
|
64
|
+
return;
|
|
65
|
+
});
|
|
66
|
+
Object.entries(definition.viewport).forEach(([tokenName, tokenValue]) => {
|
|
67
|
+
if (!tokenValue.minPx)
|
|
68
|
+
return;
|
|
69
|
+
variables[`--breakpoint-${tokenName}`] = `${tokenValue.minPx}px`;
|
|
70
|
+
});
|
|
71
|
+
return `@theme {
|
|
72
|
+
${Object.entries(variables)
|
|
73
|
+
.map(([key, value]) => `${key}: ${value};`)
|
|
74
|
+
.join("\n")}
|
|
75
|
+
}`;
|
|
76
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createElement as _createElement } from "react";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { classNames, responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
|
|
5
5
|
import Divider from "../Divider/index.js";
|
|
@@ -101,7 +101,6 @@ const View = (props) => {
|
|
|
101
101
|
if (isItem) {
|
|
102
102
|
itemElement = React.cloneElement(child, {
|
|
103
103
|
className: classNames(className, child.props.className),
|
|
104
|
-
key,
|
|
105
104
|
});
|
|
106
105
|
}
|
|
107
106
|
else if (!className &&
|
|
@@ -120,7 +119,7 @@ const View = (props) => {
|
|
|
120
119
|
nowrap = true;
|
|
121
120
|
if ((isItem || isView) && child.props?.grow)
|
|
122
121
|
isFlex = true;
|
|
123
|
-
return [dividerElement, itemElement];
|
|
122
|
+
return (_jsxs(_Fragment, { children: [dividerElement, itemElement] }));
|
|
124
123
|
};
|
|
125
124
|
const formattedChildren = React.Children.map(children, (child, index) => {
|
|
126
125
|
if (!child)
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--background-color-neutral-highlighted:var(--rs-color-background-neutral-highlighted);--background-color-primary-highlighted:var(--rs-color-background-primary-highlighted);--background-color-positive-highlighted:var(--rs-color-background-positive-highlighted);--background-color-critical-highlighted:var(--rs-color-background-critical-highlighted);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--background-color-primary-highlighted:var(--rs-color-background-primary-highlighted);--text-color-on-primary:var(--rs-color-on-background-primary);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reshaped",
|
|
3
3
|
"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
|
|
4
|
-
"version": "3.3.
|
|
4
|
+
"version": "3.3.8",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"email": "hello@reshaped.so",
|
|
7
7
|
"homepage": "https://reshaped.so",
|
|
@@ -52,10 +52,10 @@
|
|
|
52
52
|
"import": "./dist/bundle.js"
|
|
53
53
|
},
|
|
54
54
|
"./bundle.css": "./dist/bundle.css",
|
|
55
|
-
"./themes/reshaped
|
|
56
|
-
"./themes/slate
|
|
57
|
-
"./themes/figma
|
|
58
|
-
"./themes/fragments/twitter
|
|
55
|
+
"./themes/reshaped/*": "./dist/themes/reshaped/*",
|
|
56
|
+
"./themes/slate/*": "./dist/themes/slate/*",
|
|
57
|
+
"./themes/figma/*": "./dist/themes/figma/*",
|
|
58
|
+
"./themes/fragments/twitter/*": "./dist/themes/fragments/twitter/*",
|
|
59
59
|
"./package.json": "./package.json"
|
|
60
60
|
},
|
|
61
61
|
"sideEffects": false,
|
|
@@ -98,12 +98,12 @@
|
|
|
98
98
|
"@commitlint/types": "19.5.0",
|
|
99
99
|
"@eslint/js": "9.16.0",
|
|
100
100
|
"@size-limit/preset-big-lib": "11.1.6",
|
|
101
|
-
"@storybook/addon-a11y": "8.
|
|
102
|
-
"@storybook/addon-controls": "8.
|
|
103
|
-
"@storybook/addon-docs": "8.
|
|
104
|
-
"@storybook/addon-storysource": "8.
|
|
105
|
-
"@storybook/react": "8.
|
|
106
|
-
"@storybook/react-vite": "8.
|
|
101
|
+
"@storybook/addon-a11y": "8.5.2",
|
|
102
|
+
"@storybook/addon-controls": "8.5.2",
|
|
103
|
+
"@storybook/addon-docs": "8.5.2",
|
|
104
|
+
"@storybook/addon-storysource": "8.5.2",
|
|
105
|
+
"@storybook/react": "8.5.2",
|
|
106
|
+
"@storybook/react-vite": "8.5.2",
|
|
107
107
|
"@testing-library/dom": "10.4.0",
|
|
108
108
|
"@testing-library/jest-dom": "6.6.3",
|
|
109
109
|
"@testing-library/react": "16.0.1",
|
|
@@ -112,8 +112,8 @@
|
|
|
112
112
|
"@types/events": "3.0.3",
|
|
113
113
|
"@types/jest": "29.5.14",
|
|
114
114
|
"@types/node": "22.10.1",
|
|
115
|
-
"@types/react": "
|
|
116
|
-
"@types/react-dom": "
|
|
115
|
+
"@types/react": "19.0.8",
|
|
116
|
+
"@types/react-dom": "19.0.3",
|
|
117
117
|
"@typescript-eslint/eslint-plugin": "7.18.0",
|
|
118
118
|
"@typescript-eslint/parser": "7.18.0",
|
|
119
119
|
"@vitejs/plugin-react": "4.3.4",
|
|
@@ -137,12 +137,12 @@
|
|
|
137
137
|
"postcss-each": "1.1.0",
|
|
138
138
|
"postcss-nested": "7.0.2",
|
|
139
139
|
"prettier": "3.4.1",
|
|
140
|
-
"react": "
|
|
141
|
-
"react-dom": "
|
|
140
|
+
"react": "19.0.0",
|
|
141
|
+
"react-dom": "19.0.0",
|
|
142
142
|
"react-shadow": "20.5.0",
|
|
143
143
|
"resolve-tspaths": "0.8.23",
|
|
144
144
|
"size-limit": "11.1.6",
|
|
145
|
-
"storybook": "8.
|
|
145
|
+
"storybook": "8.5.2",
|
|
146
146
|
"stylelint": "16.11.0",
|
|
147
147
|
"stylelint-config-prettier": "9.0.5",
|
|
148
148
|
"stylelint-config-standard": "36.0.1",
|