@intinyagroup/tokens 0.1.1-alpha.8 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/base.css +126 -60
- package/src/minimalist.css +9 -8
package/package.json
CHANGED
package/src/base.css
CHANGED
|
@@ -7,9 +7,24 @@
|
|
|
7
7
|
|
|
8
8
|
@import "tw-animate-css";
|
|
9
9
|
|
|
10
|
+
/* Tailwind v4 dark utilities follow app theme state, never OS preference. */
|
|
11
|
+
@custom-variant dark (&:where(.dark, .dark *, .theme-dark, .theme-dark *, [data-ui-theme="dark"], [data-ui-theme="dark"] *));
|
|
12
|
+
|
|
10
13
|
@theme inline {
|
|
11
|
-
--font-sans: var(
|
|
12
|
-
|
|
14
|
+
--font-sans: var(
|
|
15
|
+
--ui-font-sans,
|
|
16
|
+
"Inter Variable",
|
|
17
|
+
ui-sans-serif,
|
|
18
|
+
system-ui,
|
|
19
|
+
sans-serif
|
|
20
|
+
);
|
|
21
|
+
--font-mono: var(
|
|
22
|
+
--ui-font-mono,
|
|
23
|
+
"SFMono-Regular",
|
|
24
|
+
ui-monospace,
|
|
25
|
+
"Cascadia Code",
|
|
26
|
+
monospace
|
|
27
|
+
);
|
|
13
28
|
--font-serif: var(--ui-font-serif, "Georgia", "Times New Roman", serif);
|
|
14
29
|
|
|
15
30
|
--color-background: var(--ui-background);
|
|
@@ -37,75 +52,121 @@
|
|
|
37
52
|
--radius-xl: calc(var(--ui-radius) + 4px);
|
|
38
53
|
}
|
|
39
54
|
|
|
40
|
-
/* Default theme: neutral slate */
|
|
55
|
+
/* Default theme: neutral modern slate (Linear / Vercel refined hierarchy) */
|
|
41
56
|
:root,
|
|
42
57
|
[data-ui-theme="neutral"] {
|
|
43
|
-
--ui-background: oklch(
|
|
44
|
-
--ui-foreground: oklch(0.
|
|
58
|
+
--ui-background: oklch(0.995 0.002 260);
|
|
59
|
+
--ui-foreground: oklch(0.14 0.008 260);
|
|
45
60
|
--ui-card: oklch(1 0 0);
|
|
46
|
-
--ui-card-foreground: oklch(0.
|
|
61
|
+
--ui-card-foreground: oklch(0.14 0.008 260);
|
|
47
62
|
--ui-popover: oklch(1 0 0);
|
|
48
|
-
--ui-popover-foreground: oklch(0.
|
|
49
|
-
--ui-primary: oklch(0.
|
|
50
|
-
--ui-primary-foreground: oklch(0.
|
|
51
|
-
--ui-secondary: oklch(0.
|
|
52
|
-
--ui-secondary-foreground: oklch(0.
|
|
53
|
-
--ui-muted: oklch(0.
|
|
54
|
-
--ui-muted-foreground: oklch(0.
|
|
55
|
-
--ui-accent: oklch(0.
|
|
56
|
-
--ui-accent-foreground: oklch(0.
|
|
57
|
-
--ui-destructive: oklch(0.
|
|
58
|
-
--ui-border: oklch(0.
|
|
59
|
-
--ui-input: oklch(0.
|
|
60
|
-
--ui-ring: oklch(0.
|
|
63
|
+
--ui-popover-foreground: oklch(0.14 0.008 260);
|
|
64
|
+
--ui-primary: oklch(0.2 0.015 260);
|
|
65
|
+
--ui-primary-foreground: oklch(0.99 0 0);
|
|
66
|
+
--ui-secondary: oklch(0.965 0.005 260);
|
|
67
|
+
--ui-secondary-foreground: oklch(0.2 0.015 260);
|
|
68
|
+
--ui-muted: oklch(0.965 0.005 260);
|
|
69
|
+
--ui-muted-foreground: oklch(0.52 0.015 260);
|
|
70
|
+
--ui-accent: oklch(0.96 0.006 260);
|
|
71
|
+
--ui-accent-foreground: oklch(0.18 0.015 260);
|
|
72
|
+
--ui-destructive: oklch(0.58 0.22 25);
|
|
73
|
+
--ui-border: oklch(0.9 0.006 260);
|
|
74
|
+
--ui-input: oklch(0.9 0.006 260);
|
|
75
|
+
--ui-ring: oklch(0.2 0.015 260);
|
|
61
76
|
--ui-radius: 0.625rem;
|
|
62
77
|
|
|
78
|
+
/* Overlay and elevated-surface semantics */
|
|
79
|
+
--ui-overlay: color-mix(in srgb, var(--ui-foreground) 20%, transparent);
|
|
80
|
+
--ui-overlay-strong: color-mix(
|
|
81
|
+
in srgb,
|
|
82
|
+
var(--ui-foreground) 32%,
|
|
83
|
+
transparent
|
|
84
|
+
);
|
|
85
|
+
--ui-surface-elevated: color-mix(in srgb, var(--ui-card) 96%, transparent);
|
|
86
|
+
--ui-shadow-overlay: 0 20px 60px -32px
|
|
87
|
+
color-mix(in srgb, var(--ui-foreground) 35%, transparent);
|
|
88
|
+
|
|
63
89
|
/* Semantic aliases */
|
|
64
|
-
--ui-success: oklch(0.
|
|
65
|
-
--ui-warning: oklch(0.
|
|
66
|
-
--ui-info: oklch(0.
|
|
90
|
+
--ui-success: oklch(0.62 0.16 155);
|
|
91
|
+
--ui-warning: oklch(0.75 0.18 75);
|
|
92
|
+
--ui-info: oklch(0.6 0.2 250);
|
|
67
93
|
}
|
|
68
94
|
|
|
69
|
-
/* Warm theme (
|
|
95
|
+
/* Warm theme (Calibrated Amber & Honey Terracotta warmth) */
|
|
70
96
|
[data-ui-theme="warm"] {
|
|
71
|
-
--ui-
|
|
72
|
-
--ui-
|
|
73
|
-
--ui-
|
|
74
|
-
--ui-
|
|
75
|
-
--ui-
|
|
76
|
-
--ui-
|
|
77
|
-
--ui-
|
|
78
|
-
--ui-
|
|
79
|
-
--ui-
|
|
80
|
-
--ui-
|
|
81
|
-
--ui-
|
|
82
|
-
|
|
83
|
-
--ui-
|
|
84
|
-
--ui-
|
|
85
|
-
--ui-
|
|
97
|
+
--ui-background: oklch(0.99 0.006 80);
|
|
98
|
+
--ui-foreground: oklch(0.18 0.02 55);
|
|
99
|
+
--ui-card: oklch(1 0 0);
|
|
100
|
+
--ui-card-foreground: oklch(0.18 0.02 55);
|
|
101
|
+
--ui-popover: oklch(1 0 0);
|
|
102
|
+
--ui-popover-foreground: oklch(0.18 0.02 55);
|
|
103
|
+
--ui-primary: oklch(0.38 0.1 50);
|
|
104
|
+
--ui-primary-foreground: oklch(0.99 0.004 80);
|
|
105
|
+
--ui-secondary: oklch(0.96 0.01 75);
|
|
106
|
+
--ui-secondary-foreground: oklch(0.25 0.03 55);
|
|
107
|
+
--ui-muted: oklch(0.96 0.01 75);
|
|
108
|
+
--ui-muted-foreground: oklch(0.52 0.025 60);
|
|
109
|
+
--ui-accent: oklch(0.94 0.015 75);
|
|
110
|
+
--ui-accent-foreground: oklch(0.2 0.03 55);
|
|
111
|
+
--ui-border: oklch(0.89 0.01 70);
|
|
112
|
+
--ui-input: oklch(0.89 0.01 70);
|
|
113
|
+
--ui-ring: oklch(0.45 0.12 50);
|
|
114
|
+
|
|
115
|
+
--ui-success: oklch(0.62 0.15 155);
|
|
116
|
+
--ui-warning: oklch(0.75 0.18 75);
|
|
117
|
+
--ui-danger: oklch(0.58 0.22 25);
|
|
118
|
+
--ui-info: oklch(0.6 0.18 245);
|
|
86
119
|
}
|
|
87
120
|
|
|
88
|
-
/* Dark theme */
|
|
121
|
+
/* Dark theme — Calibrated modern zinc/slate hierarchy */
|
|
122
|
+
[data-ui-theme="dark"],
|
|
123
|
+
.dark {
|
|
124
|
+
--ui-background: oklch(0.12 0.006 260);
|
|
125
|
+
--ui-foreground: oklch(0.96 0.005 260);
|
|
126
|
+
|
|
127
|
+
--ui-card: oklch(0.16 0.006 260);
|
|
128
|
+
--ui-card-foreground: oklch(0.96 0.005 260);
|
|
129
|
+
|
|
130
|
+
--ui-popover: oklch(0.19 0.007 260);
|
|
131
|
+
--ui-popover-foreground: oklch(0.96 0.005 260);
|
|
132
|
+
|
|
133
|
+
--ui-primary: oklch(0.58 0.22 260);
|
|
134
|
+
--ui-primary-foreground: oklch(0.98 0 0);
|
|
135
|
+
|
|
136
|
+
--ui-secondary: oklch(0.22 0.008 260);
|
|
137
|
+
--ui-secondary-foreground: oklch(0.92 0.005 260);
|
|
138
|
+
|
|
139
|
+
--ui-muted: oklch(0.2 0.008 260);
|
|
140
|
+
--ui-muted-foreground: oklch(0.68 0.012 260);
|
|
141
|
+
|
|
142
|
+
--ui-accent: oklch(0.22 0.01 260);
|
|
143
|
+
--ui-accent-foreground: oklch(0.96 0.005 260);
|
|
144
|
+
|
|
145
|
+
--ui-border: oklch(0.24 0.008 260);
|
|
146
|
+
--ui-input: oklch(0.24 0.008 260);
|
|
147
|
+
--ui-ring: oklch(0.58 0.22 260);
|
|
148
|
+
|
|
149
|
+
--ui-destructive: oklch(0.62 0.22 25);
|
|
150
|
+
--ui-success: oklch(0.68 0.17 155);
|
|
151
|
+
--ui-warning: oklch(0.78 0.16 75);
|
|
152
|
+
--ui-info: oklch(0.68 0.18 245);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* Shared semantic overlay tokens resolve against active theme colors. */
|
|
156
|
+
:root,
|
|
157
|
+
[data-ui-theme="neutral"],
|
|
158
|
+
[data-ui-theme="warm"],
|
|
89
159
|
[data-ui-theme="dark"],
|
|
90
160
|
.dark {
|
|
91
|
-
--ui-
|
|
92
|
-
--ui-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
--ui-
|
|
98
|
-
--ui-
|
|
99
|
-
|
|
100
|
-
--ui-secondary-foreground: oklch(0.985 0.001 247);
|
|
101
|
-
--ui-muted: oklch(0.269 0.006 264);
|
|
102
|
-
--ui-muted-foreground: oklch(0.708 0.01 264);
|
|
103
|
-
--ui-accent: oklch(0.269 0.006 264);
|
|
104
|
-
--ui-accent-foreground: oklch(0.985 0.001 247);
|
|
105
|
-
--ui-destructive: oklch(0.577 0.245 27.325);
|
|
106
|
-
--ui-border: oklch(0.269 0.006 264);
|
|
107
|
-
--ui-input: oklch(0.269 0.006 264);
|
|
108
|
-
--ui-ring: oklch(0.439 0.165 254.624);
|
|
161
|
+
--ui-overlay: color-mix(in srgb, var(--ui-foreground) 20%, transparent);
|
|
162
|
+
--ui-overlay-strong: color-mix(
|
|
163
|
+
in srgb,
|
|
164
|
+
var(--ui-foreground) 32%,
|
|
165
|
+
transparent
|
|
166
|
+
);
|
|
167
|
+
--ui-surface-elevated: color-mix(in srgb, var(--ui-card) 96%, transparent);
|
|
168
|
+
--ui-shadow-overlay: 0 20px 60px -32px
|
|
169
|
+
color-mix(in srgb, var(--ui-foreground) 35%, transparent);
|
|
109
170
|
}
|
|
110
171
|
|
|
111
172
|
/* Spacing scale */
|
|
@@ -127,7 +188,8 @@
|
|
|
127
188
|
--ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
128
189
|
--ui-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
|
|
129
190
|
--ui-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
130
|
-
--ui-shadow-xl:
|
|
191
|
+
--ui-shadow-xl:
|
|
192
|
+
0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
|
|
131
193
|
|
|
132
194
|
/* Transitions */
|
|
133
195
|
--ui-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -156,10 +218,14 @@ a {
|
|
|
156
218
|
text-decoration: none;
|
|
157
219
|
}
|
|
158
220
|
|
|
159
|
-
button,
|
|
221
|
+
button,
|
|
222
|
+
input,
|
|
223
|
+
select,
|
|
224
|
+
textarea {
|
|
160
225
|
font: inherit;
|
|
161
226
|
}
|
|
162
227
|
|
|
163
|
-
code,
|
|
228
|
+
code,
|
|
229
|
+
pre {
|
|
164
230
|
font-family: var(--ui-font-mono);
|
|
165
231
|
}
|
package/src/minimalist.css
CHANGED
|
@@ -74,14 +74,15 @@
|
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
/* Minimalist Dark Theme */
|
|
77
|
-
[data-ui-theme="minimalist-dark"]
|
|
78
|
-
|
|
79
|
-
--ui-
|
|
80
|
-
--ui-
|
|
81
|
-
--ui-card
|
|
82
|
-
--ui-
|
|
83
|
-
--ui-popover
|
|
84
|
-
--ui-
|
|
77
|
+
[data-ui-theme="minimalist-dark"],
|
|
78
|
+
[data-ui-theme="minimalist"].dark {
|
|
79
|
+
--ui-background: oklch(0.10 0 0);
|
|
80
|
+
--ui-foreground: oklch(0.96 0 0);
|
|
81
|
+
--ui-card: oklch(0.14 0 0);
|
|
82
|
+
--ui-card-foreground: oklch(0.96 0 0);
|
|
83
|
+
--ui-popover: oklch(0.16 0 0);
|
|
84
|
+
--ui-popover-foreground: oklch(0.96 0 0);
|
|
85
|
+
--ui-primary: oklch(0.96 0 0);
|
|
85
86
|
--ui-primary-foreground: oklch(0.10 0 0);
|
|
86
87
|
--ui-secondary: oklch(0.15 0 0);
|
|
87
88
|
--ui-secondary-foreground: oklch(1 0 0);
|