@celar-ui/svelte 2.0.1 → 2.0.2
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/buttons/styles/button_utils.css +1 -1
- package/dist/containment/Spacer.svelte +1 -1
- package/dist/containment/styles/avatar.css +1 -1
- package/dist/containment/styles/breadcrumb.css +1 -1
- package/dist/containment/styles/card.css +1 -1
- package/dist/containment/styles/container.css +1 -1
- package/dist/containment/styles/surface-container.css +1 -1
- package/dist/inputs/Checkbox.svelte +1 -1
- package/dist/inputs/ColorInput.svelte +1 -1
- package/dist/inputs/FileInput.svelte +1 -1
- package/dist/inputs/RadioItem.svelte +1 -1
- package/dist/inputs/Slider.svelte +1 -1
- package/dist/inputs/Switch.svelte +1 -1
- package/dist/inputs/TagInput.svelte +1 -1
- package/dist/inputs/TextInput.svelte +1 -1
- package/dist/inputs/styles/radio_group.css +1 -1
- package/dist/misc/Badge.svelte +1 -1
- package/dist/misc/DuckSpinner.svelte +1 -1
- package/dist/misc/Gap.svelte +1 -1
- package/dist/misc/LinearProgressIndicator.svelte +1 -1
- package/dist/navigation/AdaptiveSidebar.svelte +1 -1
- package/dist/navigation/AppBar.svelte +1 -1
- package/dist/navigation/NavigationBar.svelte +1 -1
- package/dist/navigation/NavigationBarButton.svelte +1 -1
- package/dist/navigation/styles/navigation_drawer.css +1 -1
- package/dist/overlay/styles/command.css +1 -1
- package/dist/overlay/styles/dialog.css +1 -1
- package/dist/overlay/styles/popover.css +1 -1
- package/dist/overlay/styles/surface-dialog.css +1 -1
- package/package.json +9 -6
- package/src/bin/gen-theme.ts +71 -0
- package/src/styles/theme.css +84 -84
package/dist/misc/Badge.svelte
CHANGED
package/dist/misc/Gap.svelte
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@celar-ui/svelte",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "cuikho210",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
},
|
|
14
14
|
"scripts": {
|
|
15
15
|
"dev": "vite dev",
|
|
16
|
-
"build": "
|
|
16
|
+
"build": "vite build && bun run prepack",
|
|
17
17
|
"preview": "vite preview",
|
|
18
18
|
"prepare": "svelte-kit sync || echo ''",
|
|
19
19
|
"prepack": "svelte-kit sync && svelte-package && publint",
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
"files": [
|
|
28
28
|
"dist",
|
|
29
29
|
"src/styles",
|
|
30
|
+
"src/bin",
|
|
30
31
|
"!dist/**/*.test.*",
|
|
31
32
|
"!dist/**/*.spec.*"
|
|
32
33
|
],
|
|
@@ -41,10 +42,12 @@
|
|
|
41
42
|
"types": "./dist/index.d.ts",
|
|
42
43
|
"svelte": "./dist/index.js"
|
|
43
44
|
},
|
|
44
|
-
"./src/styles
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
45
|
+
"./styles/index.css": "./src/styles/index.css",
|
|
46
|
+
"./styles/theme.css": "./src/styles/theme.css",
|
|
47
|
+
"./styles/*.css": "./src/styles/*.css"
|
|
48
|
+
},
|
|
49
|
+
"bin": {
|
|
50
|
+
"gen-theme": "./src/bin/gen-theme.ts"
|
|
48
51
|
},
|
|
49
52
|
"peerDependencies": {
|
|
50
53
|
"bits-ui": "^2.8.0",
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
#!/usr/bin/env bun
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Generate Tailwind 4 @theme CSS from Material Color Utilities theme output.
|
|
5
|
+
* Usage: bun index.ts <output-path>
|
|
6
|
+
*
|
|
7
|
+
* This script generates a CSS file with @variant and @theme directives,
|
|
8
|
+
* using the output of Material Color Utilities' themeFromSourceColor.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
import materialDynamicColors from 'material-dynamic-colors';
|
|
12
|
+
import { mkdir, writeFile } from 'node:fs/promises';
|
|
13
|
+
import path from 'node:path';
|
|
14
|
+
|
|
15
|
+
// ---- CONFIGURABLE SOURCE COLOR / OUTPUT ----
|
|
16
|
+
const argv = process.argv.slice(2);
|
|
17
|
+
const getFlag = (names: string[]) => {
|
|
18
|
+
const i = argv.findIndex((a) => names.includes(a));
|
|
19
|
+
if (i >= 0 && argv[i + 1] && !argv[i + 1].startsWith('--')) return argv[i + 1];
|
|
20
|
+
const kv = argv.find((a) => names.some((n) => a.startsWith(`${n}=`)));
|
|
21
|
+
return kv ? kv.split('=').slice(1).join('=') : undefined;
|
|
22
|
+
};
|
|
23
|
+
const sourceColor = (getFlag(['--color', '-c']) || process.env.SOURCE_COLOR || '#ff907f').trim();
|
|
24
|
+
const outputPath = path.resolve(
|
|
25
|
+
process.cwd(),
|
|
26
|
+
getFlag(['--out', '-o']) || process.env.OUTPUT_PATH || 'src/styles/theme.css'
|
|
27
|
+
);
|
|
28
|
+
|
|
29
|
+
// ---- GENERATE THEME ----
|
|
30
|
+
const theme = await materialDynamicColors(sourceColor);
|
|
31
|
+
|
|
32
|
+
// ---- TAILWIND 4 @THEME CSS OUTPUT ----
|
|
33
|
+
function toThemeVariables(colors: Record<string, string>): string {
|
|
34
|
+
return Object.entries(colors)
|
|
35
|
+
.map(([k, v]) => ` --color-${k}: ${v};`)
|
|
36
|
+
.join('\n');
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
const lightVars = toThemeVariables(theme.light as unknown as Record<string, string>);
|
|
40
|
+
const darkVars = toThemeVariables(theme.dark as unknown as Record<string, string>);
|
|
41
|
+
|
|
42
|
+
const css = `/* Generated by index.ts */
|
|
43
|
+
/* Source color: ${sourceColor} */
|
|
44
|
+
|
|
45
|
+
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
|
|
46
|
+
|
|
47
|
+
@theme {
|
|
48
|
+
${lightVars}
|
|
49
|
+
--color-info: #1a3baa;
|
|
50
|
+
--color-onInfo: #e2ffff;
|
|
51
|
+
--color-success: #2b5f50;
|
|
52
|
+
--color-onSuccess: #e8fef5;
|
|
53
|
+
--color-warning: #8a5a00;
|
|
54
|
+
--color-onWarning: #fff8ec;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@variant dark {
|
|
58
|
+
${darkVars}
|
|
59
|
+
--color-info: #008eff;
|
|
60
|
+
--color-onInfo: #101a3b;
|
|
61
|
+
--color-success: #9bdac7;
|
|
62
|
+
--color-onSuccess: #184d3a;
|
|
63
|
+
--color-warning: #bfa060;
|
|
64
|
+
--color-onWarning: #4a3700;
|
|
65
|
+
}
|
|
66
|
+
`;
|
|
67
|
+
|
|
68
|
+
// ---- WRITE FILE ----
|
|
69
|
+
await mkdir(path.dirname(outputPath), { recursive: true });
|
|
70
|
+
await writeFile(outputPath, css);
|
|
71
|
+
console.log(`Material theme CSS written to ${outputPath}`);
|
package/src/styles/theme.css
CHANGED
|
@@ -4,91 +4,91 @@
|
|
|
4
4
|
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
|
|
5
5
|
|
|
6
6
|
@theme {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
7
|
+
--color-primary: #9c4235;
|
|
8
|
+
--color-onPrimary: #ffffff;
|
|
9
|
+
--color-primaryContainer: #ffdad4;
|
|
10
|
+
--color-onPrimaryContainer: #410000;
|
|
11
|
+
--color-secondary: #775651;
|
|
12
|
+
--color-onSecondary: #ffffff;
|
|
13
|
+
--color-secondaryContainer: #ffdad4;
|
|
14
|
+
--color-onSecondaryContainer: #2c1512;
|
|
15
|
+
--color-tertiary: #705c2e;
|
|
16
|
+
--color-onTertiary: #ffffff;
|
|
17
|
+
--color-tertiaryContainer: #fbdfa6;
|
|
18
|
+
--color-onTertiaryContainer: #251a00;
|
|
19
|
+
--color-error: #ba1a1a;
|
|
20
|
+
--color-onError: #ffffff;
|
|
21
|
+
--color-errorContainer: #ffdad6;
|
|
22
|
+
--color-onErrorContainer: #410002;
|
|
23
|
+
--color-background: #fffbff;
|
|
24
|
+
--color-onBackground: #201a19;
|
|
25
|
+
--color-surface: #fff8f6;
|
|
26
|
+
--color-onSurface: #201a19;
|
|
27
|
+
--color-surfaceVariant: #f5ddda;
|
|
28
|
+
--color-onSurfaceVariant: #534341;
|
|
29
|
+
--color-outline: #857370;
|
|
30
|
+
--color-outlineVariant: #d8c2be;
|
|
31
|
+
--color-shadow: #000000;
|
|
32
|
+
--color-scrim: #000000;
|
|
33
|
+
--color-inverseSurface: #362f2e;
|
|
34
|
+
--color-inverseOnSurface: #fbeeec;
|
|
35
|
+
--color-inversePrimary: #ffb4a8;
|
|
36
|
+
--color-surfaceDim: #e4d7d5;
|
|
37
|
+
--color-surfaceBright: #fff8f6;
|
|
38
|
+
--color-surfaceContainerLowest: #ffffff;
|
|
39
|
+
--color-surfaceContainerLow: #fef1ee;
|
|
40
|
+
--color-surfaceContainer: #f8ebe9;
|
|
41
|
+
--color-surfaceContainerHigh: #f3e5e3;
|
|
42
|
+
--color-surfaceContainerHighest: #ede0dd;
|
|
43
|
+
--color-info: #1a3baa;
|
|
44
|
+
--color-onInfo: #e2ffff;
|
|
45
|
+
--color-success: #2b5f50;
|
|
46
|
+
--color-onSuccess: #e8fef5;
|
|
47
|
+
--color-warning: #8a5a00;
|
|
48
|
+
--color-onWarning: #fff8ec;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
@variant dark {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
52
|
+
--color-primary: #ffb4a8;
|
|
53
|
+
--color-onPrimary: #5f150d;
|
|
54
|
+
--color-primaryContainer: #7d2b21;
|
|
55
|
+
--color-onPrimaryContainer: #ffdad4;
|
|
56
|
+
--color-secondary: #e7bdb6;
|
|
57
|
+
--color-onSecondary: #442925;
|
|
58
|
+
--color-secondaryContainer: #5d3f3b;
|
|
59
|
+
--color-onSecondaryContainer: #ffdad4;
|
|
60
|
+
--color-tertiary: #dec48c;
|
|
61
|
+
--color-onTertiary: #3e2e04;
|
|
62
|
+
--color-tertiaryContainer: #564419;
|
|
63
|
+
--color-onTertiaryContainer: #fbdfa6;
|
|
64
|
+
--color-error: #ffb4ab;
|
|
65
|
+
--color-onError: #690005;
|
|
66
|
+
--color-errorContainer: #93000a;
|
|
67
|
+
--color-onErrorContainer: #ffb4ab;
|
|
68
|
+
--color-background: #201a19;
|
|
69
|
+
--color-onBackground: #ede0dd;
|
|
70
|
+
--color-surface: #181211;
|
|
71
|
+
--color-onSurface: #ede0dd;
|
|
72
|
+
--color-surfaceVariant: #534341;
|
|
73
|
+
--color-onSurfaceVariant: #d8c2be;
|
|
74
|
+
--color-outline: #a08c89;
|
|
75
|
+
--color-outlineVariant: #534341;
|
|
76
|
+
--color-shadow: #000000;
|
|
77
|
+
--color-scrim: #000000;
|
|
78
|
+
--color-inverseSurface: #ede0dd;
|
|
79
|
+
--color-inverseOnSurface: #362f2e;
|
|
80
|
+
--color-inversePrimary: #9c4235;
|
|
81
|
+
--color-surfaceDim: #181211;
|
|
82
|
+
--color-surfaceBright: #3f3736;
|
|
83
|
+
--color-surfaceContainerLowest: #120d0c;
|
|
84
|
+
--color-surfaceContainerLow: #201a19;
|
|
85
|
+
--color-surfaceContainer: #251e1d;
|
|
86
|
+
--color-surfaceContainerHigh: #2f2827;
|
|
87
|
+
--color-surfaceContainerHighest: #3b3332;
|
|
88
|
+
--color-info: #008eff;
|
|
89
|
+
--color-onInfo: #101a3b;
|
|
90
|
+
--color-success: #9bdac7;
|
|
91
|
+
--color-onSuccess: #184d3a;
|
|
92
|
+
--color-warning: #bfa060;
|
|
93
|
+
--color-onWarning: #4a3700;
|
|
94
94
|
}
|