material-theme-builder 3.2.0 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +346 -252
- package/dist/cli.js +314 -117
- package/dist/index.d.ts +30 -1
- package/dist/index.js +135 -75
- package/dist/react.d.ts +69 -49
- package/dist/react.js +142 -90
- package/dist/registry-item.json +75 -0
- package/dist/shadcn.css +43 -0
- package/dist/tailwind-plugin.d.ts +73 -0
- package/dist/tailwind-plugin.js +135 -0
- package/dist/tailwind.css +47 -81
- package/package.json +34 -11
- package/src/tailwind.css +0 -179
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
// src/tailwind-plugin.ts
|
|
2
|
+
import { kebabCase } from "lodash-es";
|
|
3
|
+
import plugin from "tailwindcss/plugin";
|
|
4
|
+
|
|
5
|
+
// src/lib/tokens.ts
|
|
6
|
+
var DEFAULT_PREFIX = "md";
|
|
7
|
+
var tokenDescriptions = {
|
|
8
|
+
background: "Default background color for screens and large surfaces.",
|
|
9
|
+
error: "Color for error states, used on elements like error text and icons.",
|
|
10
|
+
errorContainer: "Fill color for error container elements like error banners.",
|
|
11
|
+
inverseOnSurface: "Color for text and icons on inverse surface backgrounds.",
|
|
12
|
+
inversePrimary: "Primary color used on inverse surface, e.g. buttons on snackbars.",
|
|
13
|
+
inverseSurface: "Background for elements that require reverse contrast, such as snackbars.",
|
|
14
|
+
onBackground: "Color for text and icons displayed on the background.",
|
|
15
|
+
onError: "Color for text and icons on error-colored elements.",
|
|
16
|
+
onErrorContainer: "Color for text and icons on error container elements.",
|
|
17
|
+
onPrimary: "Color for text and icons on primary-colored elements like filled buttons.",
|
|
18
|
+
onPrimaryContainer: "Color for text and icons on primary container elements like tonal buttons.",
|
|
19
|
+
onPrimaryFixed: "Color for text and icons on primary fixed elements, constant across themes.",
|
|
20
|
+
onPrimaryFixedVariant: "Lower-emphasis color for text and icons on primary fixed elements.",
|
|
21
|
+
onSecondary: "Color for text and icons on secondary-colored elements.",
|
|
22
|
+
onSecondaryContainer: "Color for text and icons on secondary container elements.",
|
|
23
|
+
onSecondaryFixed: "Color for text and icons on secondary fixed elements, constant across themes.",
|
|
24
|
+
onSecondaryFixedVariant: "Lower-emphasis color for text and icons on secondary fixed elements.",
|
|
25
|
+
onSurface: "High-emphasis color for text and icons on surface backgrounds.",
|
|
26
|
+
onSurfaceVariant: "Medium-emphasis color for text and icons on surface variant backgrounds.",
|
|
27
|
+
onTertiary: "Color for text and icons on tertiary-colored elements.",
|
|
28
|
+
onTertiaryContainer: "Color for text and icons on tertiary container elements.",
|
|
29
|
+
onTertiaryFixed: "Color for text and icons on tertiary fixed elements, constant across themes.",
|
|
30
|
+
onTertiaryFixedVariant: "Lower-emphasis color for text and icons on tertiary fixed elements.",
|
|
31
|
+
outline: "Subtle color for borders and dividers to create visual separation.",
|
|
32
|
+
outlineVariant: "Lower-emphasis border color used for decorative dividers.",
|
|
33
|
+
primary: "Main brand color, used for key components like filled buttons and active states.",
|
|
34
|
+
primaryContainer: "Fill color for large primary elements like cards and tonal buttons.",
|
|
35
|
+
primaryFixed: "Fixed primary color that stays the same in light and dark themes.",
|
|
36
|
+
primaryFixedDim: "Dimmed variant of the fixed primary color for lower emphasis.",
|
|
37
|
+
scrim: "Color overlay for modals and dialogs to obscure background content.",
|
|
38
|
+
secondary: "Accent color for less prominent elements like filter chips and selections.",
|
|
39
|
+
secondaryContainer: "Fill color for secondary container elements like tonal buttons and input fields.",
|
|
40
|
+
secondaryFixed: "Fixed secondary color that stays the same in light and dark themes.",
|
|
41
|
+
secondaryFixedDim: "Dimmed variant of the fixed secondary color for lower emphasis.",
|
|
42
|
+
shadow: "Color for elevation shadows applied to surfaces and components.",
|
|
43
|
+
surface: "Default surface color for cards, sheets, and dialogs.",
|
|
44
|
+
surfaceBright: "Brightest surface variant, used for elevated surfaces in dark themes.",
|
|
45
|
+
surfaceContainer: "Middle-emphasis container color for grouping related content.",
|
|
46
|
+
surfaceContainerHigh: "Higher-emphasis container color for elements like cards.",
|
|
47
|
+
surfaceContainerHighest: "Highest-emphasis container color for text fields and other input areas.",
|
|
48
|
+
surfaceContainerLow: "Lower-emphasis container color for subtle surface groupings.",
|
|
49
|
+
surfaceContainerLowest: "Lowest-emphasis container, typically the lightest surface in light theme.",
|
|
50
|
+
surfaceDim: "Dimmest surface variant, used for recessed areas or dark theme backgrounds.",
|
|
51
|
+
surfaceTint: "Tint color applied to surfaces for subtle primary color elevation overlay.",
|
|
52
|
+
surfaceVariant: "Alternative surface color for differentiated areas like sidebar backgrounds.",
|
|
53
|
+
tertiary: "Third accent color for complementary elements that balance primary and secondary.",
|
|
54
|
+
tertiaryContainer: "Fill color for tertiary container elements like complementary cards.",
|
|
55
|
+
tertiaryFixed: "Fixed tertiary color that stays the same in light and dark themes.",
|
|
56
|
+
tertiaryFixedDim: "Dimmed variant of the fixed tertiary color for lower emphasis."
|
|
57
|
+
};
|
|
58
|
+
function isTokenName(key) {
|
|
59
|
+
return key in tokenDescriptions;
|
|
60
|
+
}
|
|
61
|
+
var tokenNames = Object.keys(tokenDescriptions).filter(isTokenName);
|
|
62
|
+
var SHADE_TO_TONE = [
|
|
63
|
+
[50, 95],
|
|
64
|
+
[100, 90],
|
|
65
|
+
[200, 80],
|
|
66
|
+
[300, 70],
|
|
67
|
+
[400, 60],
|
|
68
|
+
[500, 50],
|
|
69
|
+
[600, 40],
|
|
70
|
+
[700, 30],
|
|
71
|
+
[800, 20],
|
|
72
|
+
[900, 10],
|
|
73
|
+
[950, 5]
|
|
74
|
+
];
|
|
75
|
+
var CORE_PALETTES = [
|
|
76
|
+
"primary",
|
|
77
|
+
"secondary",
|
|
78
|
+
"tertiary",
|
|
79
|
+
"error",
|
|
80
|
+
"neutral",
|
|
81
|
+
"neutral-variant"
|
|
82
|
+
];
|
|
83
|
+
|
|
84
|
+
// src/tailwind-plugin.ts
|
|
85
|
+
function toNames(value) {
|
|
86
|
+
if (value === void 0 || value === null) return [];
|
|
87
|
+
return (Array.isArray(value) ? value : [value]).flatMap((entry) => String(entry).split(/[\s,]+/)).map((name) => name.trim().replace(/^["']|["']$/g, "")).filter(Boolean);
|
|
88
|
+
}
|
|
89
|
+
function mtbColors({
|
|
90
|
+
customColors = [],
|
|
91
|
+
prefix = DEFAULT_PREFIX
|
|
92
|
+
} = {}) {
|
|
93
|
+
const colors = {};
|
|
94
|
+
const sys = (token) => `var(--${prefix}-sys-color-${token})`;
|
|
95
|
+
const ref = (palette, tone) => `var(--${prefix}-ref-palette-${palette}-${tone})`;
|
|
96
|
+
for (const name of tokenNames) {
|
|
97
|
+
const kebab = kebabCase(name);
|
|
98
|
+
colors[kebab] = sys(kebab);
|
|
99
|
+
}
|
|
100
|
+
for (const palette of CORE_PALETTES) {
|
|
101
|
+
for (const [shade, tone] of SHADE_TO_TONE) {
|
|
102
|
+
colors[`${palette}-${shade}`] = ref(palette, tone);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
for (const name of customColors) {
|
|
106
|
+
const kebab = kebabCase(name);
|
|
107
|
+
colors[name] = sys(kebab);
|
|
108
|
+
colors[`on-${name}`] = sys(`on-${kebab}`);
|
|
109
|
+
colors[`${name}-container`] = sys(`${kebab}-container`);
|
|
110
|
+
colors[`on-${name}-container`] = sys(`on-${kebab}-container`);
|
|
111
|
+
for (const [shade, tone] of SHADE_TO_TONE) {
|
|
112
|
+
colors[`${name}-${shade}`] = ref(kebab, tone);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
return colors;
|
|
116
|
+
}
|
|
117
|
+
var mtbTailwindPlugin = plugin.withOptions(
|
|
118
|
+
() => () => {
|
|
119
|
+
},
|
|
120
|
+
(options = {}) => ({
|
|
121
|
+
theme: {
|
|
122
|
+
extend: {
|
|
123
|
+
colors: mtbColors({
|
|
124
|
+
customColors: toNames(options["custom-colors"]),
|
|
125
|
+
prefix: options.prefix
|
|
126
|
+
})
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
})
|
|
130
|
+
);
|
|
131
|
+
var tailwind_plugin_default = mtbTailwindPlugin;
|
|
132
|
+
export {
|
|
133
|
+
tailwind_plugin_default as default,
|
|
134
|
+
mtbColors
|
|
135
|
+
};
|
package/dist/tailwind.css
CHANGED
|
@@ -1,61 +1,73 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Generated by `scripts/generate.mjs` -- do not edit.
|
|
3
|
+
*
|
|
4
|
+
* Custom colors are not in here: they depend on your config, so they come from
|
|
5
|
+
* the plugin instead.
|
|
6
|
+
*
|
|
7
|
+
* @plugin "material-theme-builder/tailwind" {
|
|
8
|
+
* custom-colors: myCustomColor1, myCustomColor2;
|
|
9
|
+
* }
|
|
10
|
+
*/
|
|
1
11
|
@theme inline {
|
|
2
12
|
--color-background: var(--md-sys-color-background);
|
|
3
|
-
--color-
|
|
4
|
-
--color-
|
|
5
|
-
--color-surface-dim: var(--md-sys-color-surface-dim);
|
|
6
|
-
--color-surface-bright: var(--md-sys-color-surface-bright);
|
|
7
|
-
--color-surface-container-lowest: var(
|
|
8
|
-
--md-sys-color-surface-container-lowest
|
|
9
|
-
);
|
|
10
|
-
--color-surface-container-low: var(--md-sys-color-surface-container-low);
|
|
11
|
-
--color-surface-container: var(--md-sys-color-surface-container);
|
|
12
|
-
--color-surface-container-high: var(--md-sys-color-surface-container-high);
|
|
13
|
-
--color-surface-container-highest: var(
|
|
14
|
-
--md-sys-color-surface-container-highest
|
|
15
|
-
);
|
|
16
|
-
--color-on-surface: var(--md-sys-color-on-surface);
|
|
17
|
-
--color-on-surface-variant: var(--md-sys-color-on-surface-variant);
|
|
18
|
-
--color-outline: var(--md-sys-color-outline);
|
|
19
|
-
--color-outline-variant: var(--md-sys-color-outline-variant);
|
|
20
|
-
--color-inverse-surface: var(--md-sys-color-inverse-surface);
|
|
13
|
+
--color-error: var(--md-sys-color-error);
|
|
14
|
+
--color-error-container: var(--md-sys-color-error-container);
|
|
21
15
|
--color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
|
|
22
|
-
--color-primary: var(--md-sys-color-primary);
|
|
16
|
+
--color-inverse-primary: var(--md-sys-color-inverse-primary);
|
|
17
|
+
--color-inverse-surface: var(--md-sys-color-inverse-surface);
|
|
18
|
+
--color-on-background: var(--md-sys-color-on-background);
|
|
19
|
+
--color-on-error: var(--md-sys-color-on-error);
|
|
20
|
+
--color-on-error-container: var(--md-sys-color-on-error-container);
|
|
23
21
|
--color-on-primary: var(--md-sys-color-on-primary);
|
|
24
|
-
--color-primary-container: var(--md-sys-color-primary-container);
|
|
25
22
|
--color-on-primary-container: var(--md-sys-color-on-primary-container);
|
|
26
|
-
--color-primary-fixed: var(--md-sys-color-primary-fixed);
|
|
27
|
-
--color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
|
|
28
23
|
--color-on-primary-fixed: var(--md-sys-color-on-primary-fixed);
|
|
29
24
|
--color-on-primary-fixed-variant: var(
|
|
30
25
|
--md-sys-color-on-primary-fixed-variant
|
|
31
26
|
);
|
|
32
|
-
--color-inverse-primary: var(--md-sys-color-inverse-primary);
|
|
33
|
-
--color-secondary: var(--md-sys-color-secondary);
|
|
34
27
|
--color-on-secondary: var(--md-sys-color-on-secondary);
|
|
35
|
-
--color-secondary-container: var(--md-sys-color-secondary-container);
|
|
36
28
|
--color-on-secondary-container: var(--md-sys-color-on-secondary-container);
|
|
37
|
-
--color-secondary-fixed: var(--md-sys-color-secondary-fixed);
|
|
38
|
-
--color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);
|
|
39
29
|
--color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed);
|
|
40
30
|
--color-on-secondary-fixed-variant: var(
|
|
41
31
|
--md-sys-color-on-secondary-fixed-variant
|
|
42
32
|
);
|
|
43
|
-
--color-
|
|
33
|
+
--color-on-surface: var(--md-sys-color-on-surface);
|
|
34
|
+
--color-on-surface-variant: var(--md-sys-color-on-surface-variant);
|
|
44
35
|
--color-on-tertiary: var(--md-sys-color-on-tertiary);
|
|
45
|
-
--color-tertiary-container: var(--md-sys-color-tertiary-container);
|
|
46
36
|
--color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
|
|
47
|
-
--color-tertiary-fixed: var(--md-sys-color-tertiary-fixed);
|
|
48
|
-
--color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);
|
|
49
37
|
--color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed);
|
|
50
38
|
--color-on-tertiary-fixed-variant: var(
|
|
51
39
|
--md-sys-color-on-tertiary-fixed-variant
|
|
52
40
|
);
|
|
53
|
-
--color-
|
|
54
|
-
--color-
|
|
55
|
-
--color-
|
|
56
|
-
--color-
|
|
41
|
+
--color-outline: var(--md-sys-color-outline);
|
|
42
|
+
--color-outline-variant: var(--md-sys-color-outline-variant);
|
|
43
|
+
--color-primary: var(--md-sys-color-primary);
|
|
44
|
+
--color-primary-container: var(--md-sys-color-primary-container);
|
|
45
|
+
--color-primary-fixed: var(--md-sys-color-primary-fixed);
|
|
46
|
+
--color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
|
|
57
47
|
--color-scrim: var(--md-sys-color-scrim);
|
|
48
|
+
--color-secondary: var(--md-sys-color-secondary);
|
|
49
|
+
--color-secondary-container: var(--md-sys-color-secondary-container);
|
|
50
|
+
--color-secondary-fixed: var(--md-sys-color-secondary-fixed);
|
|
51
|
+
--color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);
|
|
58
52
|
--color-shadow: var(--md-sys-color-shadow);
|
|
53
|
+
--color-surface: var(--md-sys-color-surface);
|
|
54
|
+
--color-surface-bright: var(--md-sys-color-surface-bright);
|
|
55
|
+
--color-surface-container: var(--md-sys-color-surface-container);
|
|
56
|
+
--color-surface-container-high: var(--md-sys-color-surface-container-high);
|
|
57
|
+
--color-surface-container-highest: var(
|
|
58
|
+
--md-sys-color-surface-container-highest
|
|
59
|
+
);
|
|
60
|
+
--color-surface-container-low: var(--md-sys-color-surface-container-low);
|
|
61
|
+
--color-surface-container-lowest: var(
|
|
62
|
+
--md-sys-color-surface-container-lowest
|
|
63
|
+
);
|
|
64
|
+
--color-surface-dim: var(--md-sys-color-surface-dim);
|
|
65
|
+
--color-surface-tint: var(--md-sys-color-surface-tint);
|
|
66
|
+
--color-surface-variant: var(--md-sys-color-surface-variant);
|
|
67
|
+
--color-tertiary: var(--md-sys-color-tertiary);
|
|
68
|
+
--color-tertiary-container: var(--md-sys-color-tertiary-container);
|
|
69
|
+
--color-tertiary-fixed: var(--md-sys-color-tertiary-fixed);
|
|
70
|
+
--color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);
|
|
59
71
|
|
|
60
72
|
/* Shades */
|
|
61
73
|
|
|
@@ -130,50 +142,4 @@
|
|
|
130
142
|
--color-neutral-variant-800: var(--md-ref-palette-neutral-variant-20);
|
|
131
143
|
--color-neutral-variant-900: var(--md-ref-palette-neutral-variant-10);
|
|
132
144
|
--color-neutral-variant-950: var(--md-ref-palette-neutral-variant-5);
|
|
133
|
-
|
|
134
|
-
/*
|
|
135
|
-
* Custom colors
|
|
136
|
-
*/
|
|
137
|
-
|
|
138
|
-
--color-myCustomColor1: var(--md-sys-color-my-custom-color-1);
|
|
139
|
-
--color-on-myCustomColor1: var(--md-sys-color-on-my-custom-color-1);
|
|
140
|
-
--color-myCustomColor1-container: var(
|
|
141
|
-
--md-sys-color-my-custom-color-1-container
|
|
142
|
-
);
|
|
143
|
-
--color-on-myCustomColor1-container: var(
|
|
144
|
-
--md-sys-color-on-my-custom-color-1-container
|
|
145
|
-
);
|
|
146
|
-
/* Shades */
|
|
147
|
-
--color-myCustomColor1-50: var(--md-ref-palette-my-custom-color-1-95);
|
|
148
|
-
--color-myCustomColor1-100: var(--md-ref-palette-my-custom-color-1-90);
|
|
149
|
-
--color-myCustomColor1-200: var(--md-ref-palette-my-custom-color-1-80);
|
|
150
|
-
--color-myCustomColor1-300: var(--md-ref-palette-my-custom-color-1-70);
|
|
151
|
-
--color-myCustomColor1-400: var(--md-ref-palette-my-custom-color-1-60);
|
|
152
|
-
--color-myCustomColor1-500: var(--md-ref-palette-my-custom-color-1-50);
|
|
153
|
-
--color-myCustomColor1-600: var(--md-ref-palette-my-custom-color-1-40);
|
|
154
|
-
--color-myCustomColor1-700: var(--md-ref-palette-my-custom-color-1-30);
|
|
155
|
-
--color-myCustomColor1-800: var(--md-ref-palette-my-custom-color-1-20);
|
|
156
|
-
--color-myCustomColor1-900: var(--md-ref-palette-my-custom-color-1-10);
|
|
157
|
-
--color-myCustomColor1-950: var(--md-ref-palette-my-custom-color-1-5);
|
|
158
|
-
|
|
159
|
-
--color-myCustomColor2: var(--md-sys-color-my-custom-color-2);
|
|
160
|
-
--color-on-myCustomColor2: var(--md-sys-color-on-my-custom-color-2);
|
|
161
|
-
--color-myCustomColor2-container: var(
|
|
162
|
-
--md-sys-color-my-custom-color-2-container
|
|
163
|
-
);
|
|
164
|
-
--color-on-myCustomColor2-container: var(
|
|
165
|
-
--md-sys-color-on-my-custom-color-2-container
|
|
166
|
-
);
|
|
167
|
-
/* Shades */
|
|
168
|
-
--color-myCustomColor2-50: var(--md-ref-palette-my-custom-color-2-95);
|
|
169
|
-
--color-myCustomColor2-100: var(--md-ref-palette-my-custom-color-2-90);
|
|
170
|
-
--color-myCustomColor2-200: var(--md-ref-palette-my-custom-color-2-80);
|
|
171
|
-
--color-myCustomColor2-300: var(--md-ref-palette-my-custom-color-2-70);
|
|
172
|
-
--color-myCustomColor2-400: var(--md-ref-palette-my-custom-color-2-60);
|
|
173
|
-
--color-myCustomColor2-500: var(--md-ref-palette-my-custom-color-2-50);
|
|
174
|
-
--color-myCustomColor2-600: var(--md-ref-palette-my-custom-color-2-40);
|
|
175
|
-
--color-myCustomColor2-700: var(--md-ref-palette-my-custom-color-2-30);
|
|
176
|
-
--color-myCustomColor2-800: var(--md-ref-palette-my-custom-color-2-20);
|
|
177
|
-
--color-myCustomColor2-900: var(--md-ref-palette-my-custom-color-2-10);
|
|
178
|
-
--color-myCustomColor2-950: var(--md-ref-palette-my-custom-color-2-5);
|
|
179
145
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "material-theme-builder",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"description": "m3 color-system for JS/TS ecosystem",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -16,7 +16,14 @@
|
|
|
16
16
|
"types": "./dist/react.d.ts",
|
|
17
17
|
"import": "./dist/react.js"
|
|
18
18
|
},
|
|
19
|
-
"./tailwind
|
|
19
|
+
"./tailwind": {
|
|
20
|
+
"types": "./dist/tailwind-plugin.d.ts",
|
|
21
|
+
"import": "./dist/tailwind-plugin.js",
|
|
22
|
+
"default": "./dist/tailwind-plugin.js"
|
|
23
|
+
},
|
|
24
|
+
"./tailwind.css": "./dist/tailwind.css",
|
|
25
|
+
"./shadcn.css": "./dist/shadcn.css",
|
|
26
|
+
"./registry-item.json": "./dist/registry-item.json"
|
|
20
27
|
},
|
|
21
28
|
"homepage": "https://github.com/abernier/material-theme-builder",
|
|
22
29
|
"bugs": {
|
|
@@ -29,29 +36,36 @@
|
|
|
29
36
|
},
|
|
30
37
|
"license": "MIT",
|
|
31
38
|
"files": [
|
|
32
|
-
"dist"
|
|
33
|
-
"src/tailwind.css"
|
|
39
|
+
"dist"
|
|
34
40
|
],
|
|
35
41
|
"bin": {
|
|
36
42
|
"material-theme-builder": "./dist/cli.js"
|
|
37
43
|
},
|
|
38
44
|
"type": "module",
|
|
39
45
|
"devDependencies": {
|
|
40
|
-
"@abernier/radix-list": "^1.0.2",
|
|
41
46
|
"@arethetypeswrong/cli": "^0.18.2",
|
|
47
|
+
"@base-ui/react": "^1.7.0",
|
|
42
48
|
"@changesets/cli": "^2.27.7",
|
|
43
49
|
"@chromatic-com/storybook": "^5.0.0",
|
|
50
|
+
"@dnd-kit/core": "^6.3.1",
|
|
51
|
+
"@dnd-kit/modifiers": "^9.0.0",
|
|
52
|
+
"@dnd-kit/sortable": "^10.0.0",
|
|
53
|
+
"@dnd-kit/utilities": "^3.2.2",
|
|
44
54
|
"@eslint/js": "^10.0.1",
|
|
45
55
|
"@figma/plugin-typings": "^1.123.0",
|
|
56
|
+
"@fontsource-variable/inter": "^5.3.0",
|
|
46
57
|
"@storybook/addon-docs": "^10.1.11",
|
|
47
58
|
"@storybook/addon-themes": "^10.1.11",
|
|
59
|
+
"@storybook/icons": "^2.1.0",
|
|
48
60
|
"@storybook/react-vite": "^10.1.11",
|
|
49
61
|
"@tailwindcss/postcss": "^4.1.18",
|
|
62
|
+
"@tanstack/react-table": "^9.1.2",
|
|
50
63
|
"@testing-library/dom": "^10.4.1",
|
|
51
64
|
"@testing-library/react": "^16.3.1",
|
|
52
65
|
"@types/culori": "^4.0.1",
|
|
53
66
|
"@types/d3": "^7.4.3",
|
|
54
67
|
"@types/lodash-es": "^4.17.12",
|
|
68
|
+
"@types/node": "^24.13.3",
|
|
55
69
|
"@types/react": "^19.2.7",
|
|
56
70
|
"@types/react-dom": "^19.2.3",
|
|
57
71
|
"@types/seedrandom": "^3.0.8",
|
|
@@ -71,16 +85,18 @@
|
|
|
71
85
|
"husky": "^9.1.7",
|
|
72
86
|
"jsdom": "^28.1.0",
|
|
73
87
|
"lint-staged": "^16.2.7",
|
|
74
|
-
"lucide-react": "^
|
|
88
|
+
"lucide-react": "^1.31.0",
|
|
89
|
+
"next-themes": "^0.4.6",
|
|
75
90
|
"postcss": "^8.5.6",
|
|
76
91
|
"prettier": "^3.3.3",
|
|
77
92
|
"prettier-plugin-organize-imports": "^4.3.0",
|
|
78
|
-
"radix-ui": "^1.4.3",
|
|
79
93
|
"react": "^19.2.3",
|
|
80
94
|
"react-dom": "^19.2.3",
|
|
95
|
+
"recharts": "3.8.0",
|
|
81
96
|
"seedrandom": "^3.0.5",
|
|
82
|
-
"shadcn": "^
|
|
97
|
+
"shadcn": "^4.18.0",
|
|
83
98
|
"simplex-noise": "^4.0.3",
|
|
99
|
+
"sonner": "^2.0.8",
|
|
84
100
|
"storybook": "^10.1.11",
|
|
85
101
|
"tailwind-merge": "^3.4.0",
|
|
86
102
|
"tailwindcss": "^4.1.18",
|
|
@@ -96,7 +112,13 @@
|
|
|
96
112
|
},
|
|
97
113
|
"peerDependencies": {
|
|
98
114
|
"react": "^19.2.3",
|
|
99
|
-
"react-dom": "^19.2.3"
|
|
115
|
+
"react-dom": "^19.2.3",
|
|
116
|
+
"tailwindcss": "^4.0.0"
|
|
117
|
+
},
|
|
118
|
+
"peerDependenciesMeta": {
|
|
119
|
+
"tailwindcss": {
|
|
120
|
+
"optional": true
|
|
121
|
+
}
|
|
100
122
|
},
|
|
101
123
|
"dependencies": {
|
|
102
124
|
"@material/material-color-utilities": "^0.3.0",
|
|
@@ -117,9 +139,10 @@
|
|
|
117
139
|
"release": "pnpm run build && changeset publish",
|
|
118
140
|
"local-release": "pnpm run lgtm && changeset version && changeset publish",
|
|
119
141
|
"storybook": "storybook dev -p 6006",
|
|
120
|
-
"build-storybook": "storybook build",
|
|
142
|
+
"build-storybook": "pnpm run build && storybook build",
|
|
121
143
|
"build-figma": "vite build --config figma-plugin/vite.config.ts && tsup --config figma-plugin/tsup.config.ts",
|
|
122
144
|
"chromatic": "chromatic --project-token $CHROMATIC_PROJECT_TOKEN",
|
|
123
|
-
"changeset": "pnpm exec changeset"
|
|
145
|
+
"changeset": "pnpm exec changeset",
|
|
146
|
+
"dev": "pnpm run storybook"
|
|
124
147
|
}
|
|
125
148
|
}
|
package/src/tailwind.css
DELETED
|
@@ -1,179 +0,0 @@
|
|
|
1
|
-
@theme inline {
|
|
2
|
-
--color-background: var(--md-sys-color-background);
|
|
3
|
-
--color-on-background: var(--md-sys-color-on-background);
|
|
4
|
-
--color-surface: var(--md-sys-color-surface);
|
|
5
|
-
--color-surface-dim: var(--md-sys-color-surface-dim);
|
|
6
|
-
--color-surface-bright: var(--md-sys-color-surface-bright);
|
|
7
|
-
--color-surface-container-lowest: var(
|
|
8
|
-
--md-sys-color-surface-container-lowest
|
|
9
|
-
);
|
|
10
|
-
--color-surface-container-low: var(--md-sys-color-surface-container-low);
|
|
11
|
-
--color-surface-container: var(--md-sys-color-surface-container);
|
|
12
|
-
--color-surface-container-high: var(--md-sys-color-surface-container-high);
|
|
13
|
-
--color-surface-container-highest: var(
|
|
14
|
-
--md-sys-color-surface-container-highest
|
|
15
|
-
);
|
|
16
|
-
--color-on-surface: var(--md-sys-color-on-surface);
|
|
17
|
-
--color-on-surface-variant: var(--md-sys-color-on-surface-variant);
|
|
18
|
-
--color-outline: var(--md-sys-color-outline);
|
|
19
|
-
--color-outline-variant: var(--md-sys-color-outline-variant);
|
|
20
|
-
--color-inverse-surface: var(--md-sys-color-inverse-surface);
|
|
21
|
-
--color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
|
|
22
|
-
--color-primary: var(--md-sys-color-primary);
|
|
23
|
-
--color-on-primary: var(--md-sys-color-on-primary);
|
|
24
|
-
--color-primary-container: var(--md-sys-color-primary-container);
|
|
25
|
-
--color-on-primary-container: var(--md-sys-color-on-primary-container);
|
|
26
|
-
--color-primary-fixed: var(--md-sys-color-primary-fixed);
|
|
27
|
-
--color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
|
|
28
|
-
--color-on-primary-fixed: var(--md-sys-color-on-primary-fixed);
|
|
29
|
-
--color-on-primary-fixed-variant: var(
|
|
30
|
-
--md-sys-color-on-primary-fixed-variant
|
|
31
|
-
);
|
|
32
|
-
--color-inverse-primary: var(--md-sys-color-inverse-primary);
|
|
33
|
-
--color-secondary: var(--md-sys-color-secondary);
|
|
34
|
-
--color-on-secondary: var(--md-sys-color-on-secondary);
|
|
35
|
-
--color-secondary-container: var(--md-sys-color-secondary-container);
|
|
36
|
-
--color-on-secondary-container: var(--md-sys-color-on-secondary-container);
|
|
37
|
-
--color-secondary-fixed: var(--md-sys-color-secondary-fixed);
|
|
38
|
-
--color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);
|
|
39
|
-
--color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed);
|
|
40
|
-
--color-on-secondary-fixed-variant: var(
|
|
41
|
-
--md-sys-color-on-secondary-fixed-variant
|
|
42
|
-
);
|
|
43
|
-
--color-tertiary: var(--md-sys-color-tertiary);
|
|
44
|
-
--color-on-tertiary: var(--md-sys-color-on-tertiary);
|
|
45
|
-
--color-tertiary-container: var(--md-sys-color-tertiary-container);
|
|
46
|
-
--color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
|
|
47
|
-
--color-tertiary-fixed: var(--md-sys-color-tertiary-fixed);
|
|
48
|
-
--color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);
|
|
49
|
-
--color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed);
|
|
50
|
-
--color-on-tertiary-fixed-variant: var(
|
|
51
|
-
--md-sys-color-on-tertiary-fixed-variant
|
|
52
|
-
);
|
|
53
|
-
--color-error: var(--md-sys-color-error);
|
|
54
|
-
--color-on-error: var(--md-sys-color-on-error);
|
|
55
|
-
--color-error-container: var(--md-sys-color-error-container);
|
|
56
|
-
--color-on-error-container: var(--md-sys-color-on-error-container);
|
|
57
|
-
--color-scrim: var(--md-sys-color-scrim);
|
|
58
|
-
--color-shadow: var(--md-sys-color-shadow);
|
|
59
|
-
|
|
60
|
-
/* Shades */
|
|
61
|
-
|
|
62
|
-
--color-primary-50: var(--md-ref-palette-primary-95);
|
|
63
|
-
--color-primary-100: var(--md-ref-palette-primary-90);
|
|
64
|
-
--color-primary-200: var(--md-ref-palette-primary-80);
|
|
65
|
-
--color-primary-300: var(--md-ref-palette-primary-70);
|
|
66
|
-
--color-primary-400: var(--md-ref-palette-primary-60);
|
|
67
|
-
--color-primary-500: var(--md-ref-palette-primary-50);
|
|
68
|
-
--color-primary-600: var(--md-ref-palette-primary-40);
|
|
69
|
-
--color-primary-700: var(--md-ref-palette-primary-30);
|
|
70
|
-
--color-primary-800: var(--md-ref-palette-primary-20);
|
|
71
|
-
--color-primary-900: var(--md-ref-palette-primary-10);
|
|
72
|
-
--color-primary-950: var(--md-ref-palette-primary-5);
|
|
73
|
-
|
|
74
|
-
--color-secondary-50: var(--md-ref-palette-secondary-95);
|
|
75
|
-
--color-secondary-100: var(--md-ref-palette-secondary-90);
|
|
76
|
-
--color-secondary-200: var(--md-ref-palette-secondary-80);
|
|
77
|
-
--color-secondary-300: var(--md-ref-palette-secondary-70);
|
|
78
|
-
--color-secondary-400: var(--md-ref-palette-secondary-60);
|
|
79
|
-
--color-secondary-500: var(--md-ref-palette-secondary-50);
|
|
80
|
-
--color-secondary-600: var(--md-ref-palette-secondary-40);
|
|
81
|
-
--color-secondary-700: var(--md-ref-palette-secondary-30);
|
|
82
|
-
--color-secondary-800: var(--md-ref-palette-secondary-20);
|
|
83
|
-
--color-secondary-900: var(--md-ref-palette-secondary-10);
|
|
84
|
-
--color-secondary-950: var(--md-ref-palette-secondary-5);
|
|
85
|
-
|
|
86
|
-
--color-tertiary-50: var(--md-ref-palette-tertiary-95);
|
|
87
|
-
--color-tertiary-100: var(--md-ref-palette-tertiary-90);
|
|
88
|
-
--color-tertiary-200: var(--md-ref-palette-tertiary-80);
|
|
89
|
-
--color-tertiary-300: var(--md-ref-palette-tertiary-70);
|
|
90
|
-
--color-tertiary-400: var(--md-ref-palette-tertiary-60);
|
|
91
|
-
--color-tertiary-500: var(--md-ref-palette-tertiary-50);
|
|
92
|
-
--color-tertiary-600: var(--md-ref-palette-tertiary-40);
|
|
93
|
-
--color-tertiary-700: var(--md-ref-palette-tertiary-30);
|
|
94
|
-
--color-tertiary-800: var(--md-ref-palette-tertiary-20);
|
|
95
|
-
--color-tertiary-900: var(--md-ref-palette-tertiary-10);
|
|
96
|
-
--color-tertiary-950: var(--md-ref-palette-tertiary-5);
|
|
97
|
-
|
|
98
|
-
--color-error-50: var(--md-ref-palette-error-95);
|
|
99
|
-
--color-error-100: var(--md-ref-palette-error-90);
|
|
100
|
-
--color-error-200: var(--md-ref-palette-error-80);
|
|
101
|
-
--color-error-300: var(--md-ref-palette-error-70);
|
|
102
|
-
--color-error-400: var(--md-ref-palette-error-60);
|
|
103
|
-
--color-error-500: var(--md-ref-palette-error-50);
|
|
104
|
-
--color-error-600: var(--md-ref-palette-error-40);
|
|
105
|
-
--color-error-700: var(--md-ref-palette-error-30);
|
|
106
|
-
--color-error-800: var(--md-ref-palette-error-20);
|
|
107
|
-
--color-error-900: var(--md-ref-palette-error-10);
|
|
108
|
-
--color-error-950: var(--md-ref-palette-error-5);
|
|
109
|
-
|
|
110
|
-
--color-neutral-50: var(--md-ref-palette-neutral-95);
|
|
111
|
-
--color-neutral-100: var(--md-ref-palette-neutral-90);
|
|
112
|
-
--color-neutral-200: var(--md-ref-palette-neutral-80);
|
|
113
|
-
--color-neutral-300: var(--md-ref-palette-neutral-70);
|
|
114
|
-
--color-neutral-400: var(--md-ref-palette-neutral-60);
|
|
115
|
-
--color-neutral-500: var(--md-ref-palette-neutral-50);
|
|
116
|
-
--color-neutral-600: var(--md-ref-palette-neutral-40);
|
|
117
|
-
--color-neutral-700: var(--md-ref-palette-neutral-30);
|
|
118
|
-
--color-neutral-800: var(--md-ref-palette-neutral-20);
|
|
119
|
-
--color-neutral-900: var(--md-ref-palette-neutral-10);
|
|
120
|
-
--color-neutral-950: var(--md-ref-palette-neutral-5);
|
|
121
|
-
|
|
122
|
-
--color-neutral-variant-50: var(--md-ref-palette-neutral-variant-95);
|
|
123
|
-
--color-neutral-variant-100: var(--md-ref-palette-neutral-variant-90);
|
|
124
|
-
--color-neutral-variant-200: var(--md-ref-palette-neutral-variant-80);
|
|
125
|
-
--color-neutral-variant-300: var(--md-ref-palette-neutral-variant-70);
|
|
126
|
-
--color-neutral-variant-400: var(--md-ref-palette-neutral-variant-60);
|
|
127
|
-
--color-neutral-variant-500: var(--md-ref-palette-neutral-variant-50);
|
|
128
|
-
--color-neutral-variant-600: var(--md-ref-palette-neutral-variant-40);
|
|
129
|
-
--color-neutral-variant-700: var(--md-ref-palette-neutral-variant-30);
|
|
130
|
-
--color-neutral-variant-800: var(--md-ref-palette-neutral-variant-20);
|
|
131
|
-
--color-neutral-variant-900: var(--md-ref-palette-neutral-variant-10);
|
|
132
|
-
--color-neutral-variant-950: var(--md-ref-palette-neutral-variant-5);
|
|
133
|
-
|
|
134
|
-
/*
|
|
135
|
-
* Custom colors
|
|
136
|
-
*/
|
|
137
|
-
|
|
138
|
-
--color-myCustomColor1: var(--md-sys-color-my-custom-color-1);
|
|
139
|
-
--color-on-myCustomColor1: var(--md-sys-color-on-my-custom-color-1);
|
|
140
|
-
--color-myCustomColor1-container: var(
|
|
141
|
-
--md-sys-color-my-custom-color-1-container
|
|
142
|
-
);
|
|
143
|
-
--color-on-myCustomColor1-container: var(
|
|
144
|
-
--md-sys-color-on-my-custom-color-1-container
|
|
145
|
-
);
|
|
146
|
-
/* Shades */
|
|
147
|
-
--color-myCustomColor1-50: var(--md-ref-palette-my-custom-color-1-95);
|
|
148
|
-
--color-myCustomColor1-100: var(--md-ref-palette-my-custom-color-1-90);
|
|
149
|
-
--color-myCustomColor1-200: var(--md-ref-palette-my-custom-color-1-80);
|
|
150
|
-
--color-myCustomColor1-300: var(--md-ref-palette-my-custom-color-1-70);
|
|
151
|
-
--color-myCustomColor1-400: var(--md-ref-palette-my-custom-color-1-60);
|
|
152
|
-
--color-myCustomColor1-500: var(--md-ref-palette-my-custom-color-1-50);
|
|
153
|
-
--color-myCustomColor1-600: var(--md-ref-palette-my-custom-color-1-40);
|
|
154
|
-
--color-myCustomColor1-700: var(--md-ref-palette-my-custom-color-1-30);
|
|
155
|
-
--color-myCustomColor1-800: var(--md-ref-palette-my-custom-color-1-20);
|
|
156
|
-
--color-myCustomColor1-900: var(--md-ref-palette-my-custom-color-1-10);
|
|
157
|
-
--color-myCustomColor1-950: var(--md-ref-palette-my-custom-color-1-5);
|
|
158
|
-
|
|
159
|
-
--color-myCustomColor2: var(--md-sys-color-my-custom-color-2);
|
|
160
|
-
--color-on-myCustomColor2: var(--md-sys-color-on-my-custom-color-2);
|
|
161
|
-
--color-myCustomColor2-container: var(
|
|
162
|
-
--md-sys-color-my-custom-color-2-container
|
|
163
|
-
);
|
|
164
|
-
--color-on-myCustomColor2-container: var(
|
|
165
|
-
--md-sys-color-on-my-custom-color-2-container
|
|
166
|
-
);
|
|
167
|
-
/* Shades */
|
|
168
|
-
--color-myCustomColor2-50: var(--md-ref-palette-my-custom-color-2-95);
|
|
169
|
-
--color-myCustomColor2-100: var(--md-ref-palette-my-custom-color-2-90);
|
|
170
|
-
--color-myCustomColor2-200: var(--md-ref-palette-my-custom-color-2-80);
|
|
171
|
-
--color-myCustomColor2-300: var(--md-ref-palette-my-custom-color-2-70);
|
|
172
|
-
--color-myCustomColor2-400: var(--md-ref-palette-my-custom-color-2-60);
|
|
173
|
-
--color-myCustomColor2-500: var(--md-ref-palette-my-custom-color-2-50);
|
|
174
|
-
--color-myCustomColor2-600: var(--md-ref-palette-my-custom-color-2-40);
|
|
175
|
-
--color-myCustomColor2-700: var(--md-ref-palette-my-custom-color-2-30);
|
|
176
|
-
--color-myCustomColor2-800: var(--md-ref-palette-my-custom-color-2-20);
|
|
177
|
-
--color-myCustomColor2-900: var(--md-ref-palette-my-custom-color-2-10);
|
|
178
|
-
--color-myCustomColor2-950: var(--md-ref-palette-my-custom-color-2-5);
|
|
179
|
-
}
|