@intinyagroup/tokens 0.1.1-alpha.5
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 +124 -0
- package/src/base.css +165 -0
- package/src/brutalist.css +167 -0
- package/src/cyberpunk.css +167 -0
- package/src/flat.css +165 -0
- package/src/glass.css +171 -0
- package/src/md3.css +151 -0
- package/src/minimalist.css +156 -0
- package/src/neumorphism.css +167 -0
- package/src/retro.css +160 -0
package/src/flat.css
ADDED
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
@intinyagroup/tokens — Flat Color Theme
|
|
3
|
+
|
|
4
|
+
Bold colors, no shadows, sharp corners, geometric shapes.
|
|
5
|
+
Use: import '@intinyagroup/tokens/flat.css'
|
|
6
|
+
============================================ */
|
|
7
|
+
|
|
8
|
+
@import "tw-animate-css";
|
|
9
|
+
|
|
10
|
+
@theme inline {
|
|
11
|
+
--font-sans: var(--ui-font-sans, "Outfit", ui-sans-serif, system-ui, sans-serif);
|
|
12
|
+
--font-mono: var(--ui-font-mono, "JetBrains Mono", ui-monospace, monospace);
|
|
13
|
+
|
|
14
|
+
--color-background: var(--ui-background);
|
|
15
|
+
--color-foreground: var(--ui-foreground);
|
|
16
|
+
--color-card: var(--ui-card);
|
|
17
|
+
--color-card-foreground: var(--ui-card-foreground);
|
|
18
|
+
--color-popover: var(--ui-popover);
|
|
19
|
+
--color-popover-foreground: var(--ui-popover-foreground);
|
|
20
|
+
--color-primary: var(--ui-primary);
|
|
21
|
+
--color-primary-foreground: var(--ui-primary-foreground);
|
|
22
|
+
--color-secondary: var(--ui-secondary);
|
|
23
|
+
--color-secondary-foreground: var(--ui-secondary-foreground);
|
|
24
|
+
--color-muted: var(--ui-muted);
|
|
25
|
+
--color-muted-foreground: var(--ui-muted-foreground);
|
|
26
|
+
--color-accent: var(--ui-accent);
|
|
27
|
+
--color-accent-foreground: var(--ui-accent-foreground);
|
|
28
|
+
--color-destructive: var(--ui-destructive);
|
|
29
|
+
--color-border: var(--ui-border);
|
|
30
|
+
--color-input: var(--ui-input);
|
|
31
|
+
--color-ring: var(--ui-ring);
|
|
32
|
+
|
|
33
|
+
--radius-sm: 0px;
|
|
34
|
+
--radius-md: 0px;
|
|
35
|
+
--radius-lg: 0px;
|
|
36
|
+
--radius-xl: 0px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Flat Light Theme */
|
|
40
|
+
:root,
|
|
41
|
+
[data-ui-theme="flat"] {
|
|
42
|
+
--ui-background: oklch(1 0 0);
|
|
43
|
+
--ui-foreground: oklch(0.15 0.02 264);
|
|
44
|
+
--ui-card: oklch(1 0 0);
|
|
45
|
+
--ui-card-foreground: oklch(0.15 0.02 264);
|
|
46
|
+
--ui-popover: oklch(1 0 0);
|
|
47
|
+
--ui-popover-foreground: oklch(0.15 0.02 264);
|
|
48
|
+
--ui-primary: oklch(0.62 0.24 265);
|
|
49
|
+
--ui-primary-foreground: oklch(1 0 0);
|
|
50
|
+
--ui-secondary: oklch(0.95 0.03 265);
|
|
51
|
+
--ui-secondary-foreground: oklch(0.35 0.12 265);
|
|
52
|
+
--ui-muted: oklch(0.96 0.01 264);
|
|
53
|
+
--ui-muted-foreground: oklch(0.50 0.03 264);
|
|
54
|
+
--ui-accent: oklch(0.70 0.18 80);
|
|
55
|
+
--ui-accent-foreground: oklch(0.20 0.05 80);
|
|
56
|
+
--ui-destructive: oklch(0.65 0.25 27);
|
|
57
|
+
--ui-border: oklch(0.15 0.02 264);
|
|
58
|
+
--ui-input: oklch(0.15 0.02 264);
|
|
59
|
+
--ui-ring: oklch(0.62 0.24 265);
|
|
60
|
+
--ui-radius: 0px;
|
|
61
|
+
|
|
62
|
+
/* No shadows — flat means flat */
|
|
63
|
+
--ui-shadow-xs: none;
|
|
64
|
+
--ui-shadow-sm: none;
|
|
65
|
+
--ui-shadow-md: none;
|
|
66
|
+
--ui-shadow-lg: none;
|
|
67
|
+
--ui-shadow-xl: none;
|
|
68
|
+
|
|
69
|
+
/* Flat color palette */
|
|
70
|
+
--flat-red: #ef4444;
|
|
71
|
+
--flat-blue: #3b82f6;
|
|
72
|
+
--flat-green: #22c55e;
|
|
73
|
+
--flat-yellow: #eab308;
|
|
74
|
+
--flat-purple: #a855f7;
|
|
75
|
+
--flat-pink: #ec4899;
|
|
76
|
+
--flat-orange: #f97316;
|
|
77
|
+
--flat-teal: #14b8a6;
|
|
78
|
+
--flat-cyan: #06b6d4;
|
|
79
|
+
--flat-indigo: #6366f1;
|
|
80
|
+
--flat-lime: #84cc16;
|
|
81
|
+
--flat-rose: #f43f5e;
|
|
82
|
+
|
|
83
|
+
/* Clip-path polygons */
|
|
84
|
+
--clip-hexagon: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
|
85
|
+
--clip-diamond: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
|
86
|
+
--clip-pentagon: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
|
|
87
|
+
--clip-star: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
|
|
88
|
+
--clip-triangle: polygon(50% 0%, 0% 100%, 100% 100%);
|
|
89
|
+
--clip-octagon: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
|
|
90
|
+
|
|
91
|
+
--ui-success: oklch(0.65 0.20 150);
|
|
92
|
+
--ui-warning: oklch(0.75 0.18 80);
|
|
93
|
+
--ui-info: oklch(0.65 0.22 260);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* Flat Dark Theme */
|
|
97
|
+
[data-ui-theme="flat-dark"] {
|
|
98
|
+
--ui-background: oklch(0.13 0.02 264);
|
|
99
|
+
--ui-foreground: oklch(0.95 0.01 264);
|
|
100
|
+
--ui-card: oklch(0.18 0.02 264);
|
|
101
|
+
--ui-card-foreground: oklch(0.95 0.01 264);
|
|
102
|
+
--ui-popover: oklch(0.18 0.02 264);
|
|
103
|
+
--ui-popover-foreground: oklch(0.95 0.01 264);
|
|
104
|
+
--ui-primary: oklch(0.75 0.22 265);
|
|
105
|
+
--ui-primary-foreground: oklch(0.13 0.02 264);
|
|
106
|
+
--ui-secondary: oklch(0.25 0.04 265);
|
|
107
|
+
--ui-secondary-foreground: oklch(0.95 0.01 264);
|
|
108
|
+
--ui-muted: oklch(0.22 0.02 264);
|
|
109
|
+
--ui-muted-foreground: oklch(0.65 0.03 264);
|
|
110
|
+
--ui-accent: oklch(0.75 0.18 80);
|
|
111
|
+
--ui-accent-foreground: oklch(0.13 0.02 264);
|
|
112
|
+
--ui-destructive: oklch(0.70 0.25 27);
|
|
113
|
+
--ui-border: oklch(0.35 0.03 264);
|
|
114
|
+
--ui-input: oklch(0.35 0.03 264);
|
|
115
|
+
--ui-ring: oklch(0.75 0.22 265);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* Spacing scale */
|
|
119
|
+
:root {
|
|
120
|
+
--ui-space-0: 0;
|
|
121
|
+
--ui-space-1: 0.25rem;
|
|
122
|
+
--ui-space-2: 0.5rem;
|
|
123
|
+
--ui-space-3: 0.75rem;
|
|
124
|
+
--ui-space-4: 1rem;
|
|
125
|
+
--ui-space-5: 1.25rem;
|
|
126
|
+
--ui-space-6: 1.5rem;
|
|
127
|
+
--ui-space-8: 2rem;
|
|
128
|
+
--ui-space-10: 2.5rem;
|
|
129
|
+
--ui-space-12: 3rem;
|
|
130
|
+
--ui-space-16: 4rem;
|
|
131
|
+
|
|
132
|
+
/* Transitions */
|
|
133
|
+
--ui-transition-fast: 100ms ease;
|
|
134
|
+
--ui-transition-base: 200ms ease;
|
|
135
|
+
--ui-transition-slow: 300ms ease;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* Base styles */
|
|
139
|
+
* {
|
|
140
|
+
margin: 0;
|
|
141
|
+
padding: 0;
|
|
142
|
+
box-sizing: border-box;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
body {
|
|
146
|
+
font-family: var(--ui-font-sans);
|
|
147
|
+
color: var(--ui-foreground);
|
|
148
|
+
background-color: var(--ui-background);
|
|
149
|
+
line-height: 1.6;
|
|
150
|
+
-webkit-font-smoothing: antialiased;
|
|
151
|
+
-moz-osx-font-smoothing: grayscale;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
a {
|
|
155
|
+
color: var(--ui-primary);
|
|
156
|
+
text-decoration: none;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
button, input, select, textarea {
|
|
160
|
+
font: inherit;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
code, pre {
|
|
164
|
+
font-family: var(--ui-font-mono);
|
|
165
|
+
}
|
package/src/glass.css
ADDED
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
@intinyagroup/tokens — Glassmorphism Theme
|
|
3
|
+
|
|
4
|
+
Translucent, blur, depth. Creative sites, heroes, overlays.
|
|
5
|
+
Use: import '@intinyagroup/tokens/glass.css'
|
|
6
|
+
============================================ */
|
|
7
|
+
|
|
8
|
+
@import "tw-animate-css";
|
|
9
|
+
|
|
10
|
+
@theme inline {
|
|
11
|
+
--font-sans: var(--ui-font-sans, "Inter", ui-sans-serif, system-ui, sans-serif);
|
|
12
|
+
--font-mono: var(--ui-font-mono, "SF Mono", ui-monospace, monospace);
|
|
13
|
+
|
|
14
|
+
--color-background: var(--ui-background);
|
|
15
|
+
--color-foreground: var(--ui-foreground);
|
|
16
|
+
--color-card: var(--ui-card);
|
|
17
|
+
--color-card-foreground: var(--ui-card-foreground);
|
|
18
|
+
--color-popover: var(--ui-popover);
|
|
19
|
+
--color-popover-foreground: var(--ui-popover-foreground);
|
|
20
|
+
--color-primary: var(--ui-primary);
|
|
21
|
+
--color-primary-foreground: var(--ui-primary-foreground);
|
|
22
|
+
--color-secondary: var(--ui-secondary);
|
|
23
|
+
--color-secondary-foreground: var(--ui-secondary-foreground);
|
|
24
|
+
--color-muted: var(--ui-muted);
|
|
25
|
+
--color-muted-foreground: var(--ui-muted-foreground);
|
|
26
|
+
--color-accent: var(--ui-accent);
|
|
27
|
+
--color-accent-foreground: var(--ui-accent-foreground);
|
|
28
|
+
--color-destructive: var(--ui-destructive);
|
|
29
|
+
--color-border: var(--ui-border);
|
|
30
|
+
--color-input: var(--ui-input);
|
|
31
|
+
--color-ring: var(--ui-ring);
|
|
32
|
+
|
|
33
|
+
--radius-sm: calc(var(--ui-radius) - 4px);
|
|
34
|
+
--radius-md: calc(var(--ui-radius) - 2px);
|
|
35
|
+
--radius-lg: var(--ui-radius);
|
|
36
|
+
--radius-xl: calc(var(--ui-radius) + 4px);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Glass Light Theme */
|
|
40
|
+
:root,
|
|
41
|
+
[data-ui-theme="glass"] {
|
|
42
|
+
--ui-background: oklch(0.95 0.02 240);
|
|
43
|
+
--ui-foreground: oklch(0.15 0.01 264);
|
|
44
|
+
--ui-card: oklch(1 0 0 / 0.6);
|
|
45
|
+
--ui-card-foreground: oklch(0.15 0.01 264);
|
|
46
|
+
--ui-popover: oklch(1 0 0 / 0.8);
|
|
47
|
+
--ui-popover-foreground: oklch(0.15 0.01 264);
|
|
48
|
+
--ui-primary: oklch(0.65 0.20 265);
|
|
49
|
+
--ui-primary-foreground: oklch(1 0 0);
|
|
50
|
+
--ui-secondary: oklch(1 0 0 / 0.4);
|
|
51
|
+
--ui-secondary-foreground: oklch(0.25 0.05 265);
|
|
52
|
+
--ui-muted: oklch(1 0 0 / 0.3);
|
|
53
|
+
--ui-muted-foreground: oklch(0.45 0.02 264);
|
|
54
|
+
--ui-accent: oklch(1 0 0 / 0.5);
|
|
55
|
+
--ui-accent-foreground: oklch(0.25 0.05 265);
|
|
56
|
+
--ui-destructive: oklch(0.60 0.22 27);
|
|
57
|
+
--ui-border: oklch(1 0 0 / 0.2);
|
|
58
|
+
--ui-input: oklch(1 0 0 / 0.3);
|
|
59
|
+
--ui-ring: oklch(0.65 0.20 265);
|
|
60
|
+
--ui-radius: 1.5rem;
|
|
61
|
+
|
|
62
|
+
/* Glass shadows */
|
|
63
|
+
--ui-shadow-xs: none;
|
|
64
|
+
--ui-shadow-sm: 0 4px 6px -1px oklch(0 0 0 / 0.05), 0 2px 4px -2px oklch(0 0 0 / 0.05);
|
|
65
|
+
--ui-shadow-md: 0 10px 15px -3px oklch(0 0 0 / 0.08), 0 4px 6px -4px oklch(0 0 0 / 0.05);
|
|
66
|
+
--ui-shadow-lg: 0 20px 25px -5px oklch(0 0 0 / 0.1), 0 8px 10px -6px oklch(0 0 0 / 0.05);
|
|
67
|
+
--ui-shadow-xl: 0 25px 50px -12px oklch(0 0 0 / 0.15);
|
|
68
|
+
|
|
69
|
+
/* Glass-specific */
|
|
70
|
+
--glass-blur: 12px;
|
|
71
|
+
--glass-bg: oklch(1 0 0 / 0.6);
|
|
72
|
+
--glass-border: oklch(1 0 0 / 0.2);
|
|
73
|
+
--glass-shadow: 0 8px 32px oklch(0 0 0 / 0.1);
|
|
74
|
+
|
|
75
|
+
--ui-success: oklch(0.65 0.18 150);
|
|
76
|
+
--ui-warning: oklch(0.75 0.18 80);
|
|
77
|
+
--ui-info: oklch(0.60 0.18 260);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* Glass Dark Theme */
|
|
81
|
+
[data-ui-theme="glass-dark"] {
|
|
82
|
+
--ui-background: oklch(0.12 0.02 264);
|
|
83
|
+
--ui-foreground: oklch(0.95 0.01 264);
|
|
84
|
+
--ui-card: oklch(0.20 0.01 264 / 0.6);
|
|
85
|
+
--ui-card-foreground: oklch(0.95 0.01 264);
|
|
86
|
+
--ui-popover: oklch(0.20 0.01 264 / 0.8);
|
|
87
|
+
--ui-popover-foreground: oklch(0.95 0.01 264);
|
|
88
|
+
--ui-primary: oklch(0.75 0.18 265);
|
|
89
|
+
--ui-primary-foreground: oklch(0.12 0.02 264);
|
|
90
|
+
--ui-secondary: oklch(0.25 0.02 264 / 0.5);
|
|
91
|
+
--ui-secondary-foreground: oklch(0.95 0.01 264);
|
|
92
|
+
--ui-muted: oklch(0.25 0.01 264 / 0.4);
|
|
93
|
+
--ui-muted-foreground: oklch(0.65 0.02 264);
|
|
94
|
+
--ui-accent: oklch(0.25 0.02 264 / 0.5);
|
|
95
|
+
--ui-accent-foreground: oklch(0.95 0.01 264);
|
|
96
|
+
--ui-destructive: oklch(0.65 0.22 27);
|
|
97
|
+
--ui-border: oklch(1 0 0 / 0.1);
|
|
98
|
+
--ui-input: oklch(1 0 0 / 0.15);
|
|
99
|
+
--ui-ring: oklch(0.75 0.18 265);
|
|
100
|
+
|
|
101
|
+
--glass-blur: 16px;
|
|
102
|
+
--glass-bg: oklch(0.15 0.01 264 / 0.6);
|
|
103
|
+
--glass-border: oklch(1 0 0 / 0.1);
|
|
104
|
+
--glass-shadow: 0 8px 32px oklch(0 0 0 / 0.3);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* Spacing scale */
|
|
108
|
+
:root {
|
|
109
|
+
--ui-space-0: 0;
|
|
110
|
+
--ui-space-1: 0.25rem;
|
|
111
|
+
--ui-space-2: 0.5rem;
|
|
112
|
+
--ui-space-3: 0.75rem;
|
|
113
|
+
--ui-space-4: 1rem;
|
|
114
|
+
--ui-space-5: 1.25rem;
|
|
115
|
+
--ui-space-6: 1.5rem;
|
|
116
|
+
--ui-space-8: 2rem;
|
|
117
|
+
--ui-space-10: 2.5rem;
|
|
118
|
+
--ui-space-12: 3rem;
|
|
119
|
+
--ui-space-16: 4rem;
|
|
120
|
+
|
|
121
|
+
/* Transitions */
|
|
122
|
+
--ui-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
123
|
+
--ui-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
124
|
+
--ui-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* Base styles */
|
|
128
|
+
* {
|
|
129
|
+
margin: 0;
|
|
130
|
+
padding: 0;
|
|
131
|
+
box-sizing: border-box;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
body {
|
|
135
|
+
font-family: var(--ui-font-sans);
|
|
136
|
+
color: var(--ui-foreground);
|
|
137
|
+
background: linear-gradient(135deg, oklch(0.90 0.05 240), oklch(0.85 0.08 280));
|
|
138
|
+
min-height: 100vh;
|
|
139
|
+
line-height: 1.6;
|
|
140
|
+
-webkit-font-smoothing: antialiased;
|
|
141
|
+
-moz-osx-font-smoothing: grayscale;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
a {
|
|
145
|
+
color: var(--ui-primary);
|
|
146
|
+
text-decoration: none;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
button, input, select, textarea {
|
|
150
|
+
font: inherit;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
code, pre {
|
|
154
|
+
font-family: var(--ui-font-mono);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Glass utility classes */
|
|
158
|
+
.glass {
|
|
159
|
+
background: var(--glass-bg);
|
|
160
|
+
backdrop-filter: blur(var(--glass-blur));
|
|
161
|
+
-webkit-backdrop-filter: blur(var(--glass-blur));
|
|
162
|
+
border: 1px solid var(--glass-border);
|
|
163
|
+
box-shadow: var(--glass-shadow);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.glass-subtle {
|
|
167
|
+
background: oklch(1 0 0 / 0.3);
|
|
168
|
+
backdrop-filter: blur(8px);
|
|
169
|
+
-webkit-backdrop-filter: blur(8px);
|
|
170
|
+
border: 1px solid oklch(1 0 0 / 0.1);
|
|
171
|
+
}
|
package/src/md3.css
ADDED
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
@intinyagroup/tokens — Material Design 3 Theme
|
|
3
|
+
|
|
4
|
+
Elevated, stateful, Google-flavored.
|
|
5
|
+
Use: import '@intinyagroup/tokens/md3.css'
|
|
6
|
+
============================================ */
|
|
7
|
+
|
|
8
|
+
@import "tw-animate-css";
|
|
9
|
+
|
|
10
|
+
@theme inline {
|
|
11
|
+
--font-sans: var(--ui-font-sans, "Roboto", ui-sans-serif, system-ui, sans-serif);
|
|
12
|
+
--font-mono: var(--ui-font-mono, "Roboto Mono", ui-monospace, monospace);
|
|
13
|
+
|
|
14
|
+
--color-background: var(--ui-background);
|
|
15
|
+
--color-foreground: var(--ui-foreground);
|
|
16
|
+
--color-card: var(--ui-card);
|
|
17
|
+
--color-card-foreground: var(--ui-card-foreground);
|
|
18
|
+
--color-popover: var(--ui-popover);
|
|
19
|
+
--color-popover-foreground: var(--ui-popover-foreground);
|
|
20
|
+
--color-primary: var(--ui-primary);
|
|
21
|
+
--color-primary-foreground: var(--ui-primary-foreground);
|
|
22
|
+
--color-secondary: var(--ui-secondary);
|
|
23
|
+
--color-secondary-foreground: var(--ui-secondary-foreground);
|
|
24
|
+
--color-muted: var(--ui-muted);
|
|
25
|
+
--color-muted-foreground: var(--ui-muted-foreground);
|
|
26
|
+
--color-accent: var(--ui-accent);
|
|
27
|
+
--color-accent-foreground: var(--ui-accent-foreground);
|
|
28
|
+
--color-destructive: var(--ui-destructive);
|
|
29
|
+
--color-border: var(--ui-border);
|
|
30
|
+
--color-input: var(--ui-input);
|
|
31
|
+
--color-ring: var(--ui-ring);
|
|
32
|
+
|
|
33
|
+
--radius-sm: calc(var(--ui-radius) - 4px);
|
|
34
|
+
--radius-md: calc(var(--ui-radius) - 2px);
|
|
35
|
+
--radius-lg: var(--ui-radius);
|
|
36
|
+
--radius-xl: calc(var(--ui-radius) + 4px);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* MD3 Light Theme */
|
|
40
|
+
:root,
|
|
41
|
+
[data-ui-theme="md3"] {
|
|
42
|
+
--ui-background: oklch(0.98 0.002 247);
|
|
43
|
+
--ui-foreground: oklch(0.21 0.006 264);
|
|
44
|
+
--ui-card: oklch(1 0 0);
|
|
45
|
+
--ui-card-foreground: oklch(0.21 0.006 264);
|
|
46
|
+
--ui-popover: oklch(1 0 0);
|
|
47
|
+
--ui-popover-foreground: oklch(0.21 0.006 264);
|
|
48
|
+
--ui-primary: oklch(0.42 0.18 265);
|
|
49
|
+
--ui-primary-foreground: oklch(0.98 0.002 247);
|
|
50
|
+
--ui-secondary: oklch(0.95 0.01 265);
|
|
51
|
+
--ui-secondary-foreground: oklch(0.30 0.06 265);
|
|
52
|
+
--ui-muted: oklch(0.95 0.005 264);
|
|
53
|
+
--ui-muted-foreground: oklch(0.45 0.02 264);
|
|
54
|
+
--ui-accent: oklch(0.95 0.02 265);
|
|
55
|
+
--ui-accent-foreground: oklch(0.30 0.06 265);
|
|
56
|
+
--ui-destructive: oklch(0.55 0.22 27);
|
|
57
|
+
--ui-border: oklch(0.90 0.005 264);
|
|
58
|
+
--ui-input: oklch(0.90 0.005 264);
|
|
59
|
+
--ui-ring: oklch(0.42 0.18 265);
|
|
60
|
+
--ui-radius: 1rem;
|
|
61
|
+
|
|
62
|
+
/* MD3 Elevation shadows */
|
|
63
|
+
--ui-shadow-xs: none;
|
|
64
|
+
--ui-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3), 0 1px 3px 1px oklch(0 0 0 / 0.15);
|
|
65
|
+
--ui-shadow-md: 0 1px 2px oklch(0 0 0 / 0.3), 0 2px 6px 2px oklch(0 0 0 / 0.15);
|
|
66
|
+
--ui-shadow-lg: 0 4px 8px 3px oklch(0 0 0 / 0.15), 0 1px 3px oklch(0 0 0 / 0.3);
|
|
67
|
+
--ui-shadow-xl: 0 6px 10px 4px oklch(0 0 0 / 0.15), 0 2px 3px oklch(0 0 0 / 0.3);
|
|
68
|
+
--ui-shadow-2xl: 0 8px 12px 6px oklch(0 0 0 / 0.15), 0 4px 4px oklch(0 0 0 / 0.3);
|
|
69
|
+
|
|
70
|
+
/* MD3 State layers */
|
|
71
|
+
--ui-state-hover: 0.08;
|
|
72
|
+
--ui-state-focus: 0.12;
|
|
73
|
+
--ui-state-pressed: 0.12;
|
|
74
|
+
--ui-state-dragged: 0.16;
|
|
75
|
+
|
|
76
|
+
/* MD3 specific */
|
|
77
|
+
--ui-success: oklch(0.55 0.20 150);
|
|
78
|
+
--ui-warning: oklch(0.65 0.18 80);
|
|
79
|
+
--ui-info: oklch(0.50 0.18 260);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* MD3 Dark Theme */
|
|
83
|
+
[data-ui-theme="md3-dark"] {
|
|
84
|
+
--ui-background: oklch(0.15 0.005 264);
|
|
85
|
+
--ui-foreground: oklch(0.93 0.005 264);
|
|
86
|
+
--ui-card: oklch(0.20 0.008 264);
|
|
87
|
+
--ui-card-foreground: oklch(0.93 0.005 264);
|
|
88
|
+
--ui-popover: oklch(0.20 0.008 264);
|
|
89
|
+
--ui-popover-foreground: oklch(0.93 0.005 264);
|
|
90
|
+
--ui-primary: oklch(0.78 0.16 265);
|
|
91
|
+
--ui-primary-foreground: oklch(0.15 0.005 264);
|
|
92
|
+
--ui-secondary: oklch(0.30 0.03 265);
|
|
93
|
+
--ui-secondary-foreground: oklch(0.93 0.005 264);
|
|
94
|
+
--ui-muted: oklch(0.25 0.01 264);
|
|
95
|
+
--ui-muted-foreground: oklch(0.65 0.02 264);
|
|
96
|
+
--ui-accent: oklch(0.30 0.03 265);
|
|
97
|
+
--ui-accent-foreground: oklch(0.93 0.005 264);
|
|
98
|
+
--ui-destructive: oklch(0.70 0.20 27);
|
|
99
|
+
--ui-border: oklch(0.30 0.01 264);
|
|
100
|
+
--ui-input: oklch(0.30 0.01 264);
|
|
101
|
+
--ui-ring: oklch(0.78 0.16 265);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/* Spacing scale */
|
|
105
|
+
:root {
|
|
106
|
+
--ui-space-0: 0;
|
|
107
|
+
--ui-space-1: 0.25rem;
|
|
108
|
+
--ui-space-2: 0.5rem;
|
|
109
|
+
--ui-space-3: 0.75rem;
|
|
110
|
+
--ui-space-4: 1rem;
|
|
111
|
+
--ui-space-5: 1.25rem;
|
|
112
|
+
--ui-space-6: 1.5rem;
|
|
113
|
+
--ui-space-8: 2rem;
|
|
114
|
+
--ui-space-10: 2.5rem;
|
|
115
|
+
--ui-space-12: 3rem;
|
|
116
|
+
--ui-space-16: 4rem;
|
|
117
|
+
|
|
118
|
+
/* Transitions */
|
|
119
|
+
--ui-transition-fast: 150ms cubic-bezier(0.2, 0, 0, 1);
|
|
120
|
+
--ui-transition-base: 250ms cubic-bezier(0.2, 0, 0, 1);
|
|
121
|
+
--ui-transition-slow: 350ms cubic-bezier(0.2, 0, 0, 1);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* Base styles */
|
|
125
|
+
* {
|
|
126
|
+
margin: 0;
|
|
127
|
+
padding: 0;
|
|
128
|
+
box-sizing: border-box;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
body {
|
|
132
|
+
font-family: var(--ui-font-sans);
|
|
133
|
+
color: var(--ui-foreground);
|
|
134
|
+
background-color: var(--ui-background);
|
|
135
|
+
line-height: 1.6;
|
|
136
|
+
-webkit-font-smoothing: antialiased;
|
|
137
|
+
-moz-osx-font-smoothing: grayscale;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
a {
|
|
141
|
+
color: var(--ui-primary);
|
|
142
|
+
text-decoration: none;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
button, input, select, textarea {
|
|
146
|
+
font: inherit;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
code, pre {
|
|
150
|
+
font-family: var(--ui-font-mono);
|
|
151
|
+
}
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
@intinyagroup/tokens — Minimalist Theme
|
|
3
|
+
|
|
4
|
+
Ultra-clean, black & white only, no shadows,
|
|
5
|
+
maximum whitespace. System fonts, hairline borders.
|
|
6
|
+
Use: import '@intinyagroup/tokens/minimalist.css'
|
|
7
|
+
============================================ */
|
|
8
|
+
|
|
9
|
+
@import "tw-animate-css";
|
|
10
|
+
|
|
11
|
+
@theme inline {
|
|
12
|
+
--font-sans: var(--ui-font-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
|
|
13
|
+
--font-mono: var(--ui-font-mono, ui-monospace, "SFMono-Regular", "Cascadia Code", monospace);
|
|
14
|
+
--font-serif: var(--ui-font-serif, Georgia, "Times New Roman", serif);
|
|
15
|
+
|
|
16
|
+
--color-background: var(--ui-background);
|
|
17
|
+
--color-foreground: var(--ui-foreground);
|
|
18
|
+
--color-card: var(--ui-card);
|
|
19
|
+
--color-card-foreground: var(--ui-card-foreground);
|
|
20
|
+
--color-popover: var(--ui-popover);
|
|
21
|
+
--color-popover-foreground: var(--ui-popover-foreground);
|
|
22
|
+
--color-primary: var(--ui-primary);
|
|
23
|
+
--color-primary-foreground: var(--ui-primary-foreground);
|
|
24
|
+
--color-secondary: var(--ui-secondary);
|
|
25
|
+
--color-secondary-foreground: var(--ui-secondary-foreground);
|
|
26
|
+
--color-muted: var(--ui-muted);
|
|
27
|
+
--color-muted-foreground: var(--ui-muted-foreground);
|
|
28
|
+
--color-accent: var(--ui-accent);
|
|
29
|
+
--color-accent-foreground: var(--ui-accent-foreground);
|
|
30
|
+
--color-destructive: var(--ui-destructive);
|
|
31
|
+
--color-border: var(--ui-border);
|
|
32
|
+
--color-input: var(--ui-input);
|
|
33
|
+
--color-ring: var(--ui-ring);
|
|
34
|
+
|
|
35
|
+
--radius-sm: 0px;
|
|
36
|
+
--radius-md: 0px;
|
|
37
|
+
--radius-lg: 0px;
|
|
38
|
+
--radius-xl: 0px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Minimalist Light Theme */
|
|
42
|
+
::root,
|
|
43
|
+
[data-ui-theme="minimalist"] {
|
|
44
|
+
--ui-background: oklch(1 0 0);
|
|
45
|
+
--ui-foreground: oklch(0.10 0 0);
|
|
46
|
+
--ui-card: oklch(1 0 0);
|
|
47
|
+
--ui-card-foreground: oklch(0.10 0 0);
|
|
48
|
+
--ui-popover: oklch(1 0 0);
|
|
49
|
+
--ui-popover-foreground: oklch(0.10 0 0);
|
|
50
|
+
--ui-primary: oklch(0.10 0 0);
|
|
51
|
+
--ui-primary-foreground: oklch(1 0 0);
|
|
52
|
+
--ui-secondary: oklch(0.97 0 0);
|
|
53
|
+
--ui-secondary-foreground: oklch(0.10 0 0);
|
|
54
|
+
--ui-muted: oklch(0.97 0 0);
|
|
55
|
+
--ui-muted-foreground: oklch(0.50 0 0);
|
|
56
|
+
--ui-accent: oklch(0.95 0 0);
|
|
57
|
+
--ui-accent-foreground: oklch(0.10 0 0);
|
|
58
|
+
--ui-destructive: oklch(0.45 0 0);
|
|
59
|
+
--ui-border: oklch(0.92 0 0);
|
|
60
|
+
--ui-input: oklch(0.92 0 0);
|
|
61
|
+
--ui-ring: oklch(0.10 0 0);
|
|
62
|
+
--ui-radius: 0px;
|
|
63
|
+
|
|
64
|
+
/* No shadows — pure flat */
|
|
65
|
+
--ui-shadow-xs: none;
|
|
66
|
+
--ui-shadow-sm: none;
|
|
67
|
+
--ui-shadow-md: none;
|
|
68
|
+
--ui-shadow-lg: none;
|
|
69
|
+
--ui-shadow-xl: none;
|
|
70
|
+
|
|
71
|
+
--ui-success: oklch(0.40 0 0);
|
|
72
|
+
--ui-warning: oklch(0.65 0 0);
|
|
73
|
+
--ui-info: oklch(0.40 0 0);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* Minimalist Dark Theme */
|
|
77
|
+
[data-ui-theme="minimalist-dark"] {
|
|
78
|
+
--ui-background: oklch(1 0 0);
|
|
79
|
+
--ui-foreground: oklch(0.10 0 0);
|
|
80
|
+
--ui-card: oklch(1 0 0);
|
|
81
|
+
--ui-card-foreground: oklch(0.10 0 0);
|
|
82
|
+
--ui-popover: oklch(1 0 0);
|
|
83
|
+
--ui-popover-foreground: oklch(0.10 0 0);
|
|
84
|
+
--ui-primary: oklch(1 0 0);
|
|
85
|
+
--ui-primary-foreground: oklch(0.10 0 0);
|
|
86
|
+
--ui-secondary: oklch(0.15 0 0);
|
|
87
|
+
--ui-secondary-foreground: oklch(1 0 0);
|
|
88
|
+
--ui-muted: oklch(0.15 0 0);
|
|
89
|
+
--ui-muted-foreground: oklch(0.55 0 0);
|
|
90
|
+
--ui-accent: oklch(0.20 0 0);
|
|
91
|
+
--ui-accent-foreground: oklch(1 0 0);
|
|
92
|
+
--ui-destructive: oklch(0.55 0 0);
|
|
93
|
+
--ui-border: oklch(0.20 0 0);
|
|
94
|
+
--ui-input: oklch(0.20 0 0);
|
|
95
|
+
--ui-ring: oklch(1 0 0);
|
|
96
|
+
|
|
97
|
+
/* No shadows — pure flat */
|
|
98
|
+
--ui-shadow-xs: none;
|
|
99
|
+
--ui-shadow-sm: none;
|
|
100
|
+
--ui-shadow-md: none;
|
|
101
|
+
--ui-shadow-lg: none;
|
|
102
|
+
--ui-shadow-xl: none;
|
|
103
|
+
|
|
104
|
+
--ui-success: oklch(0.60 0 0);
|
|
105
|
+
--ui-warning: oklch(0.75 0 0);
|
|
106
|
+
--ui-info: oklch(0.60 0 0);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* Spacing scale — generous whitespace */
|
|
110
|
+
::root {
|
|
111
|
+
--ui-space-0: 0;
|
|
112
|
+
--ui-space-1: 0.25rem;
|
|
113
|
+
--ui-space-2: 0.5rem;
|
|
114
|
+
--ui-space-3: 0.75rem;
|
|
115
|
+
--ui-space-4: 1rem;
|
|
116
|
+
--ui-space-5: 1.25rem;
|
|
117
|
+
--ui-space-6: 1.5rem;
|
|
118
|
+
--ui-space-8: 2rem;
|
|
119
|
+
--ui-space-10: 2.5rem;
|
|
120
|
+
--ui-space-12: 3rem;
|
|
121
|
+
--ui-space-16: 4rem;
|
|
122
|
+
|
|
123
|
+
/* Transitions — minimal, barely perceptible */
|
|
124
|
+
--ui-transition-fast: 100ms ease;
|
|
125
|
+
--ui-transition-base: 150ms ease;
|
|
126
|
+
--ui-transition-slow: 200ms ease;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/* Base styles */
|
|
130
|
+
* {
|
|
131
|
+
box-sizing: border-box;
|
|
132
|
+
border-color: var(--ui-border);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
body {
|
|
136
|
+
margin: 0;
|
|
137
|
+
min-height: 100vh;
|
|
138
|
+
font-family: var(--ui-font-sans);
|
|
139
|
+
color: var(--ui-foreground);
|
|
140
|
+
background: var(--ui-background);
|
|
141
|
+
-webkit-font-smoothing: antialiased;
|
|
142
|
+
-moz-osx-font-smoothing: grayscale;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
a {
|
|
146
|
+
color: inherit;
|
|
147
|
+
text-decoration: none;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
button, input, select, textarea {
|
|
151
|
+
font: inherit;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
code, pre {
|
|
155
|
+
font-family: var(--ui-font-mono);
|
|
156
|
+
}
|