Skip to content

Commit be21d92

Browse files
gracefullightgracefullight
committed
refactor(design-tokens): improve tokens structure and generator scripts
- Refactor tokens.ts to use helper function and separate semantic colors/typography - Update build-css.ts and build-forui-theme.ts to use template literals - Restore ForUI theme generation logic
1 parent 38fe62b commit be21d92

5 files changed

Lines changed: 260 additions & 390 deletions

File tree

‎apps/mobile/lib/core/theme/generated_theme.dart‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,20 @@ import 'package:forui/forui.dart';
77

88
final generatedLightTheme = FThemes.zinc.light.copyWith(
99
colors: FThemes.zinc.light.colors.copyWith(
10-
barrier: Color.from(alpha: 1.000, red: 0.8956, green: 0.8956, blue: 0.8956, colorSpace: ColorSpace.displayP3),
10+
barrier: Color.from(alpha: 1.000, red: 0.8982, green: 0.8982, blue: 0.8982, colorSpace: ColorSpace.displayP3),
1111
background: Color.from(alpha: 1.000, red: 1.0000, green: 1.0000, blue: 1.0000, colorSpace: ColorSpace.displayP3),
1212
foreground: Color.from(alpha: 1.000, red: 0.0394, green: 0.0394, blue: 0.0394, colorSpace: ColorSpace.displayP3),
1313
primary: Color.from(alpha: 1.000, red: 0.6909, green: 0.8958, blue: 0.3768, colorSpace: ColorSpace.displayP3),
14-
primaryForeground: Color.from(alpha: 1.000, red: 0.0660, green: 0.1015, blue: 0.0158, colorSpace: ColorSpace.displayP3),
14+
primaryForeground: Color.from(alpha: 1.000, red: 0.0905, green: 0.0905, blue: 0.0905, colorSpace: ColorSpace.displayP3),
1515
secondary: Color.from(alpha: 1.000, red: 0.9606, green: 0.9606, blue: 0.9606, colorSpace: ColorSpace.displayP3),
16-
secondaryForeground: Color.from(alpha: 1.000, red: 0.0394, green: 0.0394, blue: 0.0394, colorSpace: ColorSpace.displayP3),
16+
secondaryForeground: Color.from(alpha: 1.000, red: 0.0905, green: 0.0905, blue: 0.0905, colorSpace: ColorSpace.displayP3),
1717
muted: Color.from(alpha: 1.000, red: 0.9606, green: 0.9606, blue: 0.9606, colorSpace: ColorSpace.displayP3),
18-
mutedForeground: Color.from(alpha: 1.000, red: 0.4447, green: 0.4447, blue: 0.4447, colorSpace: ColorSpace.displayP3),
19-
destructive: Color.from(alpha: 1.000, red: 0.7622, green: 0.1732, blue: 0.1559, colorSpace: ColorSpace.displayP3),
20-
destructiveForeground: Color.from(alpha: 1.000, red: 0.9803, green: 0.9803, blue: 0.9803, colorSpace: ColorSpace.displayP3),
21-
error: Color.from(alpha: 1.000, red: 0.7622, green: 0.1732, blue: 0.1559, colorSpace: ColorSpace.displayP3),
22-
errorForeground: Color.from(alpha: 1.000, red: 0.9803, green: 0.9803, blue: 0.9803, colorSpace: ColorSpace.displayP3),
23-
border: Color.from(alpha: 1.000, red: 0.8956, green: 0.8956, blue: 0.8956, colorSpace: ColorSpace.displayP3),
18+
mutedForeground: Color.from(alpha: 1.000, red: 0.4515, green: 0.4515, blue: 0.4515, colorSpace: ColorSpace.displayP3),
19+
destructive: Color.from(alpha: 1.000, red: 0.8303, green: 0.1404, blue: 0.1332, colorSpace: ColorSpace.displayP3),
20+
destructiveForeground: Color.from(alpha: 1.000, red: 1.0000, green: 1.0000, blue: 1.0000, colorSpace: ColorSpace.displayP3),
21+
error: Color.from(alpha: 1.000, red: 0.8303, green: 0.1404, blue: 0.1332, colorSpace: ColorSpace.displayP3),
22+
errorForeground: Color.from(alpha: 1.000, red: 1.0000, green: 1.0000, blue: 1.0000, colorSpace: ColorSpace.displayP3),
23+
border: Color.from(alpha: 1.000, red: 0.8982, green: 0.8982, blue: 0.8982, colorSpace: ColorSpace.displayP3),
2424
hoverLighten: 0.075,
2525
hoverDarken: 0.05,
2626
disabledOpacity: 0.5,
@@ -33,14 +33,14 @@ final generatedDarkTheme = FThemes.zinc.dark.copyWith(
3333
background: Color.from(alpha: 1.000, red: 0.0394, green: 0.0394, blue: 0.0394, colorSpace: ColorSpace.displayP3),
3434
foreground: Color.from(alpha: 1.000, red: 0.9803, green: 0.9803, blue: 0.9803, colorSpace: ColorSpace.displayP3),
3535
primary: Color.from(alpha: 1.000, red: 0.6909, green: 0.8958, blue: 0.3768, colorSpace: ColorSpace.displayP3),
36-
primaryForeground: Color.from(alpha: 1.000, red: 0.0660, green: 0.1015, blue: 0.0158, colorSpace: ColorSpace.displayP3),
37-
secondary: Color.from(alpha: 1.000, red: 0.1315, green: 0.1315, blue: 0.1315, colorSpace: ColorSpace.displayP3),
36+
primaryForeground: Color.from(alpha: 1.000, red: 0.0905, green: 0.0905, blue: 0.0905, colorSpace: ColorSpace.displayP3),
37+
secondary: Color.from(alpha: 1.000, red: 0.1494, green: 0.1494, blue: 0.1494, colorSpace: ColorSpace.displayP3),
3838
secondaryForeground: Color.from(alpha: 1.000, red: 0.9803, green: 0.9803, blue: 0.9803, colorSpace: ColorSpace.displayP3),
39-
muted: Color.from(alpha: 1.000, red: 0.1315, green: 0.1315, blue: 0.1315, colorSpace: ColorSpace.displayP3),
40-
mutedForeground: Color.from(alpha: 1.000, red: 0.6205, green: 0.6205, blue: 0.6205, colorSpace: ColorSpace.displayP3),
41-
destructive: Color.from(alpha: 1.000, red: 0.6042, green: 0.0452, blue: 0.0663, colorSpace: ColorSpace.displayP3),
39+
muted: Color.from(alpha: 1.000, red: 0.1494, green: 0.1494, blue: 0.1494, colorSpace: ColorSpace.displayP3),
40+
mutedForeground: Color.from(alpha: 1.000, red: 0.6302, green: 0.6302, blue: 0.6302, colorSpace: ColorSpace.displayP3),
41+
destructive: Color.from(alpha: 1.000, red: 0.9335, green: 0.4317, blue: 0.4235, colorSpace: ColorSpace.displayP3),
4242
destructiveForeground: Color.from(alpha: 1.000, red: 0.9803, green: 0.9803, blue: 0.9803, colorSpace: ColorSpace.displayP3),
43-
error: Color.from(alpha: 1.000, red: 0.6042, green: 0.0452, blue: 0.0663, colorSpace: ColorSpace.displayP3),
43+
error: Color.from(alpha: 1.000, red: 0.9335, green: 0.4317, blue: 0.4235, colorSpace: ColorSpace.displayP3),
4444
errorForeground: Color.from(alpha: 1.000, red: 0.9803, green: 0.9803, blue: 0.9803, colorSpace: ColorSpace.displayP3),
4545
border: Color.from(alpha: 0.100, red: 1.0000, green: 1.0000, blue: 1.0000, colorSpace: ColorSpace.displayP3),
4646
hoverLighten: 0.075,

‎apps/web/src/app/[locale]/tokens.css‎

Lines changed: 56 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,78 @@
11
:root {
22
--radius: 0.625rem;
33

4+
/* Semantic Colors */
5+
--info: oklch(0.6 0.2 260);
6+
--success: oklch(0.65 0.2 145);
7+
--warning: oklch(0.75 0.18 85);
8+
9+
/* Light Mode Colors */
10+
--accent: oklch(0.97 0 0);
11+
--accent-foreground: oklch(0.205 0 0);
412
--background: oklch(1 0 0);
5-
--foreground: oklch(0.145 0 0);
13+
--border: oklch(0.922 0 0);
614
--card: oklch(1 0 0);
715
--card-foreground: oklch(0.145 0 0);
16+
--chart-1: oklch(0.646 0.222 41.116);
17+
--chart-2: oklch(0.6 0.118 184.704);
18+
--chart-3: oklch(0.398 0.07 227.392);
19+
--chart-4: oklch(0.828 0.189 84.429);
20+
--chart-5: oklch(0.769 0.188 70.08);
21+
--destructive: oklch(0.577 0.245 27.325);
22+
--destructive-foreground: oklch(1 0 0);
23+
--foreground: oklch(0.145 0 0);
24+
--input: oklch(0.922 0 0);
25+
--muted: oklch(0.97 0 0);
26+
--muted-foreground: oklch(0.556 0 0);
827
--popover: oklch(1 0 0);
928
--popover-foreground: oklch(0.145 0 0);
1029
--primary: oklch(0.85 0.2 130);
11-
--primary-foreground: oklch(0.2 0.05 130);
30+
--primary-foreground: oklch(0.205 0 0);
31+
--ring: oklch(0.708 0 0);
1232
--secondary: oklch(0.97 0 0);
13-
--secondary-foreground: oklch(0.145 0 0);
14-
--muted: oklch(0.97 0 0);
15-
--muted-foreground: oklch(0.55 0 0);
16-
--accent: oklch(0.97 0 0);
17-
--accent-foreground: oklch(0.145 0 0);
18-
--destructive: oklch(0.55 0.22 27);
19-
--destructive-foreground: oklch(0.985 0 0);
20-
--border: oklch(0.92 0 0);
21-
--input: oklch(0.92 0 0);
22-
--ring: oklch(0.85 0.2 130);
23-
--chart-1: oklch(0.65 0.19 150);
24-
--chart-2: oklch(0.6 0.18 200);
25-
--chart-3: oklch(0.55 0.2 250);
26-
--chart-4: oklch(0.6 0.22 300);
27-
--chart-5: oklch(0.65 0.2 50);
28-
--sidebar-background: oklch(0.985 0 0);
29-
--sidebar-foreground: oklch(0.145 0 0);
30-
--sidebar-primary: oklch(0.85 0.2 130);
31-
--sidebar-primary-foreground: oklch(0.2 0.05 130);
33+
--secondary-foreground: oklch(0.205 0 0);
34+
--sidebar: oklch(0.985 0 0);
3235
--sidebar-accent: oklch(0.97 0 0);
33-
--sidebar-accent-foreground: oklch(0.145 0 0);
34-
--sidebar-border: oklch(0.92 0 0);
35-
--sidebar-ring: oklch(0.85 0.2 130);
36+
--sidebar-accent-foreground: oklch(0.205 0 0);
37+
--sidebar-border: oklch(0.922 0 0);
38+
--sidebar-foreground: oklch(0.145 0 0);
39+
--sidebar-primary: oklch(0.205 0 0);
40+
--sidebar-primary-foreground: oklch(0.985 0 0);
41+
--sidebar-ring: oklch(0.708 0 0);
3642
}
3743

3844
.dark {
45+
/* Dark Mode Colors */
46+
--accent: oklch(0.269 0 0);
47+
--accent-foreground: oklch(0.985 0 0);
3948
--background: oklch(0.145 0 0);
40-
--foreground: oklch(0.985 0 0);
41-
--card: oklch(0.145 0 0);
49+
--border: oklch(1 0 0 / 0.1);
50+
--card: oklch(0.205 0 0);
4251
--card-foreground: oklch(0.985 0 0);
43-
--popover: oklch(0.145 0 0);
52+
--chart-1: oklch(0.488 0.243 264.376);
53+
--chart-2: oklch(0.696 0.17 162.48);
54+
--chart-3: oklch(0.769 0.188 70.08);
55+
--chart-4: oklch(0.627 0.265 303.9);
56+
--chart-5: oklch(0.645 0.246 16.439);
57+
--destructive: oklch(0.704 0.191 22.216);
58+
--destructive-foreground: oklch(0.985 0 0);
59+
--foreground: oklch(0.985 0 0);
60+
--input: oklch(1 0 0 / 0.15);
61+
--muted: oklch(0.269 0 0);
62+
--muted-foreground: oklch(0.708 0 0);
63+
--popover: oklch(0.205 0 0);
4464
--popover-foreground: oklch(0.985 0 0);
4565
--primary: oklch(0.85 0.2 130);
46-
--primary-foreground: oklch(0.2 0.05 130);
47-
--secondary: oklch(0.25 0 0);
66+
--primary-foreground: oklch(0.205 0 0);
67+
--ring: oklch(0.556 0 0);
68+
--secondary: oklch(0.269 0 0);
4869
--secondary-foreground: oklch(0.985 0 0);
49-
--muted: oklch(0.25 0 0);
50-
--muted-foreground: oklch(0.7 0 0);
51-
--accent: oklch(0.25 0 0);
52-
--accent-foreground: oklch(0.985 0 0);
53-
--destructive: oklch(0.45 0.2 27);
54-
--destructive-foreground: oklch(0.985 0 0);
55-
--border: oklch(1 0 0 / 0.1);
56-
--input: oklch(1 0 0 / 0.1);
57-
--ring: oklch(0.85 0.2 130);
58-
--chart-1: oklch(0.65 0.19 150);
59-
--chart-2: oklch(0.6 0.18 200);
60-
--chart-3: oklch(0.55 0.2 250);
61-
--chart-4: oklch(0.6 0.22 300);
62-
--chart-5: oklch(0.65 0.2 50);
63-
--sidebar-background: oklch(0.175 0 0);
64-
--sidebar-foreground: oklch(0.985 0 0);
65-
--sidebar-primary: oklch(0.85 0.2 130);
66-
--sidebar-primary-foreground: oklch(0.2 0.05 130);
67-
--sidebar-accent: oklch(0.25 0 0);
70+
--sidebar: oklch(0.205 0 0);
71+
--sidebar-accent: oklch(0.269 0 0);
6872
--sidebar-accent-foreground: oklch(0.985 0 0);
6973
--sidebar-border: oklch(1 0 0 / 0.1);
70-
--sidebar-ring: oklch(0.85 0.2 130);
74+
--sidebar-foreground: oklch(0.985 0 0);
75+
--sidebar-primary: oklch(0.488 0.243 264.376);
76+
--sidebar-primary-foreground: oklch(0.985 0 0);
77+
--sidebar-ring: oklch(0.556 0 0);
7178
}

0 commit comments

Comments
 (0)