@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/package.json
ADDED
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@intinyagroup/tokens",
|
|
3
|
+
"version": "0.1.1-alpha.5",
|
|
4
|
+
"description": "Design tokens for intinyagroup UI",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"exports": {
|
|
7
|
+
".": {
|
|
8
|
+
"style": "./src/base.css",
|
|
9
|
+
"default": "./src/base.css",
|
|
10
|
+
"production": "./src/base.css"
|
|
11
|
+
},
|
|
12
|
+
"./base": {
|
|
13
|
+
"style": "./src/base.css",
|
|
14
|
+
"default": "./src/base.css",
|
|
15
|
+
"production": "./src/base.css"
|
|
16
|
+
},
|
|
17
|
+
"./base.css": {
|
|
18
|
+
"style": "./src/base.css",
|
|
19
|
+
"default": "./src/base.css",
|
|
20
|
+
"production": "./src/base.css"
|
|
21
|
+
},
|
|
22
|
+
"./md3": {
|
|
23
|
+
"style": "./src/md3.css",
|
|
24
|
+
"default": "./src/md3.css",
|
|
25
|
+
"production": "./src/md3.css"
|
|
26
|
+
},
|
|
27
|
+
"./md3.css": {
|
|
28
|
+
"style": "./src/md3.css",
|
|
29
|
+
"default": "./src/md3.css",
|
|
30
|
+
"production": "./src/md3.css"
|
|
31
|
+
},
|
|
32
|
+
"./flat": {
|
|
33
|
+
"style": "./src/flat.css",
|
|
34
|
+
"default": "./src/flat.css",
|
|
35
|
+
"production": "./src/flat.css"
|
|
36
|
+
},
|
|
37
|
+
"./flat.css": {
|
|
38
|
+
"style": "./src/flat.css",
|
|
39
|
+
"default": "./src/flat.css",
|
|
40
|
+
"production": "./src/flat.css"
|
|
41
|
+
},
|
|
42
|
+
"./glass": {
|
|
43
|
+
"style": "./src/glass.css",
|
|
44
|
+
"default": "./src/glass.css",
|
|
45
|
+
"production": "./src/glass.css"
|
|
46
|
+
},
|
|
47
|
+
"./glass.css": {
|
|
48
|
+
"style": "./src/glass.css",
|
|
49
|
+
"default": "./src/glass.css",
|
|
50
|
+
"production": "./src/glass.css"
|
|
51
|
+
},
|
|
52
|
+
"./brutalist": {
|
|
53
|
+
"style": "./src/brutalist.css",
|
|
54
|
+
"default": "./src/brutalist.css",
|
|
55
|
+
"production": "./src/brutalist.css"
|
|
56
|
+
},
|
|
57
|
+
"./brutalist.css": {
|
|
58
|
+
"style": "./src/brutalist.css",
|
|
59
|
+
"default": "./src/brutalist.css",
|
|
60
|
+
"production": "./src/brutalist.css"
|
|
61
|
+
},
|
|
62
|
+
"./neumorphism": {
|
|
63
|
+
"style": "./src/neumorphism.css",
|
|
64
|
+
"default": "./src/neumorphism.css",
|
|
65
|
+
"production": "./src/neumorphism.css"
|
|
66
|
+
},
|
|
67
|
+
"./neumorphism.css": {
|
|
68
|
+
"style": "./src/neumorphism.css",
|
|
69
|
+
"default": "./src/neumorphism.css",
|
|
70
|
+
"production": "./src/neumorphism.css"
|
|
71
|
+
},
|
|
72
|
+
"./retro": {
|
|
73
|
+
"style": "./src/retro.css",
|
|
74
|
+
"default": "./src/retro.css",
|
|
75
|
+
"production": "./src/retro.css"
|
|
76
|
+
},
|
|
77
|
+
"./retro.css": {
|
|
78
|
+
"style": "./src/retro.css",
|
|
79
|
+
"default": "./src/retro.css",
|
|
80
|
+
"production": "./src/retro.css"
|
|
81
|
+
},
|
|
82
|
+
"./cyberpunk": {
|
|
83
|
+
"style": "./src/cyberpunk.css",
|
|
84
|
+
"default": "./src/cyberpunk.css",
|
|
85
|
+
"production": "./src/cyberpunk.css"
|
|
86
|
+
},
|
|
87
|
+
"./cyberpunk.css": {
|
|
88
|
+
"style": "./src/cyberpunk.css",
|
|
89
|
+
"default": "./src/cyberpunk.css",
|
|
90
|
+
"production": "./src/cyberpunk.css"
|
|
91
|
+
},
|
|
92
|
+
"./minimalist": {
|
|
93
|
+
"style": "./src/minimalist.css",
|
|
94
|
+
"default": "./src/minimalist.css",
|
|
95
|
+
"production": "./src/minimalist.css"
|
|
96
|
+
},
|
|
97
|
+
"./minimalist.css": {
|
|
98
|
+
"style": "./src/minimalist.css",
|
|
99
|
+
"default": "./src/minimalist.css",
|
|
100
|
+
"production": "./src/minimalist.css"
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
"files": [
|
|
104
|
+
"src",
|
|
105
|
+
"README.md"
|
|
106
|
+
],
|
|
107
|
+
"scripts": {
|
|
108
|
+
"build": "echo 'tokens: no build needed, CSS imported directly'",
|
|
109
|
+
"check": "echo 'tokens: no check needed'"
|
|
110
|
+
},
|
|
111
|
+
"devDependencies": {
|
|
112
|
+
"tailwindcss": "^4.2.2",
|
|
113
|
+
"tw-animate-css": "^1.4.0"
|
|
114
|
+
},
|
|
115
|
+
"license": "MIT",
|
|
116
|
+
"repository": {
|
|
117
|
+
"type": "git",
|
|
118
|
+
"url": "git+https://github.com/intinyagroup/ui.git",
|
|
119
|
+
"directory": "packages/tokens"
|
|
120
|
+
},
|
|
121
|
+
"publishConfig": {
|
|
122
|
+
"access": "public"
|
|
123
|
+
}
|
|
124
|
+
}
|
package/src/base.css
ADDED
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
@intinyagroup/tokens — Design Tokens
|
|
3
|
+
|
|
4
|
+
Override these in your project's root CSS
|
|
5
|
+
to theme the library.
|
|
6
|
+
============================================ */
|
|
7
|
+
|
|
8
|
+
@import "tw-animate-css";
|
|
9
|
+
|
|
10
|
+
@theme inline {
|
|
11
|
+
--font-sans: var(--ui-font-sans, "Inter Variable", ui-sans-serif, system-ui, sans-serif);
|
|
12
|
+
--font-mono: var(--ui-font-mono, "SFMono-Regular", ui-monospace, "Cascadia Code", monospace);
|
|
13
|
+
--font-serif: var(--ui-font-serif, "Georgia", "Times New Roman", serif);
|
|
14
|
+
|
|
15
|
+
--color-background: var(--ui-background);
|
|
16
|
+
--color-foreground: var(--ui-foreground);
|
|
17
|
+
--color-card: var(--ui-card);
|
|
18
|
+
--color-card-foreground: var(--ui-card-foreground);
|
|
19
|
+
--color-popover: var(--ui-popover);
|
|
20
|
+
--color-popover-foreground: var(--ui-popover-foreground);
|
|
21
|
+
--color-primary: var(--ui-primary);
|
|
22
|
+
--color-primary-foreground: var(--ui-primary-foreground);
|
|
23
|
+
--color-secondary: var(--ui-secondary);
|
|
24
|
+
--color-secondary-foreground: var(--ui-secondary-foreground);
|
|
25
|
+
--color-muted: var(--ui-muted);
|
|
26
|
+
--color-muted-foreground: var(--ui-muted-foreground);
|
|
27
|
+
--color-accent: var(--ui-accent);
|
|
28
|
+
--color-accent-foreground: var(--ui-accent-foreground);
|
|
29
|
+
--color-destructive: var(--ui-destructive);
|
|
30
|
+
--color-border: var(--ui-border);
|
|
31
|
+
--color-input: var(--ui-input);
|
|
32
|
+
--color-ring: var(--ui-ring);
|
|
33
|
+
|
|
34
|
+
--radius-sm: calc(var(--ui-radius) - 4px);
|
|
35
|
+
--radius-md: calc(var(--ui-radius) - 2px);
|
|
36
|
+
--radius-lg: var(--ui-radius);
|
|
37
|
+
--radius-xl: calc(var(--ui-radius) + 4px);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* Default theme: neutral slate */
|
|
41
|
+
:root,
|
|
42
|
+
[data-ui-theme="neutral"] {
|
|
43
|
+
--ui-background: oklch(1 0 0);
|
|
44
|
+
--ui-foreground: oklch(0.145 0.004 49.25);
|
|
45
|
+
--ui-card: oklch(1 0 0);
|
|
46
|
+
--ui-card-foreground: oklch(0.145 0.004 49.25);
|
|
47
|
+
--ui-popover: oklch(1 0 0);
|
|
48
|
+
--ui-popover-foreground: oklch(0.145 0.004 49.25);
|
|
49
|
+
--ui-primary: oklch(0.205 0.01 265);
|
|
50
|
+
--ui-primary-foreground: oklch(0.985 0.001 247);
|
|
51
|
+
--ui-secondary: oklch(0.97 0.003 264);
|
|
52
|
+
--ui-secondary-foreground: oklch(0.205 0.01 265);
|
|
53
|
+
--ui-muted: oklch(0.97 0.003 264);
|
|
54
|
+
--ui-muted-foreground: oklch(0.556 0.01 264);
|
|
55
|
+
--ui-accent: oklch(0.97 0.003 264);
|
|
56
|
+
--ui-accent-foreground: oklch(0.205 0.01 265);
|
|
57
|
+
--ui-destructive: oklch(0.577 0.245 27.325);
|
|
58
|
+
--ui-border: oklch(0.922 0.004 264);
|
|
59
|
+
--ui-input: oklch(0.922 0.004 264);
|
|
60
|
+
--ui-ring: oklch(0.708 0.165 254.624);
|
|
61
|
+
--ui-radius: 0.625rem;
|
|
62
|
+
|
|
63
|
+
/* Semantic aliases */
|
|
64
|
+
--ui-success: oklch(0.648 0.15 160);
|
|
65
|
+
--ui-warning: oklch(0.769 0.188 70);
|
|
66
|
+
--ui-info: oklch(0.646 0.222 41.116);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* Warm theme (InfraTools, SelfieTime admin) */
|
|
70
|
+
[data-ui-theme="warm"] {
|
|
71
|
+
--ui-primary: oklch(0.216 0.006 56.043);
|
|
72
|
+
--ui-primary-foreground: oklch(0.985 0.001 106.423);
|
|
73
|
+
--ui-secondary: oklch(0.97 0.001 106.424);
|
|
74
|
+
--ui-secondary-foreground: oklch(0.216 0.006 56.043);
|
|
75
|
+
--ui-muted: oklch(0.97 0.001 106.424);
|
|
76
|
+
--ui-muted-foreground: oklch(0.553 0.013 58.071);
|
|
77
|
+
--ui-accent: oklch(0.553 0.013 58.071);
|
|
78
|
+
--ui-accent-foreground: oklch(0.216 0.006 56.043);
|
|
79
|
+
--ui-border: oklch(0.923 0.003 48.717);
|
|
80
|
+
--ui-input: oklch(0.923 0.003 48.717);
|
|
81
|
+
--ui-ring: oklch(0.709 0.01 56.259);
|
|
82
|
+
|
|
83
|
+
--ui-success: oklch(0.648 0.15 160);
|
|
84
|
+
--ui-warning: oklch(0.769 0.188 70);
|
|
85
|
+
--ui-danger: oklch(0.577 0.245 27.325);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/* Dark theme */
|
|
89
|
+
[data-ui-theme="dark"],
|
|
90
|
+
.dark {
|
|
91
|
+
--ui-background: oklch(0.145 0.004 49.25);
|
|
92
|
+
--ui-foreground: oklch(0.985 0.001 247);
|
|
93
|
+
--ui-card: oklch(0.145 0.004 49.25);
|
|
94
|
+
--ui-card-foreground: oklch(0.985 0.001 247);
|
|
95
|
+
--ui-popover: oklch(0.145 0.004 49.25);
|
|
96
|
+
--ui-popover-foreground: oklch(0.985 0.001 247);
|
|
97
|
+
--ui-primary: oklch(0.985 0.001 247);
|
|
98
|
+
--ui-primary-foreground: oklch(0.205 0.01 265);
|
|
99
|
+
--ui-secondary: oklch(0.269 0.006 264);
|
|
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);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* Spacing scale */
|
|
112
|
+
:root {
|
|
113
|
+
--ui-space-0: 0;
|
|
114
|
+
--ui-space-1: 0.25rem;
|
|
115
|
+
--ui-space-2: 0.5rem;
|
|
116
|
+
--ui-space-3: 0.75rem;
|
|
117
|
+
--ui-space-4: 1rem;
|
|
118
|
+
--ui-space-5: 1.25rem;
|
|
119
|
+
--ui-space-6: 1.5rem;
|
|
120
|
+
--ui-space-8: 2rem;
|
|
121
|
+
--ui-space-10: 2.5rem;
|
|
122
|
+
--ui-space-12: 3rem;
|
|
123
|
+
--ui-space-16: 4rem;
|
|
124
|
+
|
|
125
|
+
/* Shadows */
|
|
126
|
+
--ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
127
|
+
--ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
128
|
+
--ui-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
|
|
129
|
+
--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: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
|
|
131
|
+
|
|
132
|
+
/* Transitions */
|
|
133
|
+
--ui-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
134
|
+
--ui-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
135
|
+
--ui-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* Base styles */
|
|
139
|
+
* {
|
|
140
|
+
box-sizing: border-box;
|
|
141
|
+
border-color: var(--ui-border);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
body {
|
|
145
|
+
margin: 0;
|
|
146
|
+
min-height: 100vh;
|
|
147
|
+
font-family: var(--ui-font-sans);
|
|
148
|
+
color: var(--ui-foreground);
|
|
149
|
+
background: var(--ui-background);
|
|
150
|
+
-webkit-font-smoothing: antialiased;
|
|
151
|
+
-moz-osx-font-smoothing: grayscale;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
a {
|
|
155
|
+
color: inherit;
|
|
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
|
+
}
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
@intinyagroup/tokens — Brutalist Theme
|
|
3
|
+
|
|
4
|
+
Heavy type, raw borders, no softness. Dev tools, portfolios.
|
|
5
|
+
Use: import '@intinyagroup/tokens/brutalist.css'
|
|
6
|
+
============================================ */
|
|
7
|
+
|
|
8
|
+
@import "tw-animate-css";
|
|
9
|
+
|
|
10
|
+
@theme inline {
|
|
11
|
+
--font-sans: var(--ui-font-sans, "Space Mono", ui-monospace, monospace);
|
|
12
|
+
--font-mono: var(--ui-font-mono, "Space 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
|
+
/* Brutalist Light Theme */
|
|
40
|
+
:root,
|
|
41
|
+
[data-ui-theme="brutalist"] {
|
|
42
|
+
--ui-background: oklch(0.98 0 0);
|
|
43
|
+
--ui-foreground: oklch(0.10 0 0);
|
|
44
|
+
--ui-card: oklch(1 0 0);
|
|
45
|
+
--ui-card-foreground: oklch(0.10 0 0);
|
|
46
|
+
--ui-popover: oklch(1 0 0);
|
|
47
|
+
--ui-popover-foreground: oklch(0.10 0 0);
|
|
48
|
+
--ui-primary: oklch(0.10 0 0);
|
|
49
|
+
--ui-primary-foreground: oklch(0.98 0 0);
|
|
50
|
+
--ui-secondary: oklch(0.95 0 0);
|
|
51
|
+
--ui-secondary-foreground: oklch(0.10 0 0);
|
|
52
|
+
--ui-muted: oklch(0.92 0 0);
|
|
53
|
+
--ui-muted-foreground: oklch(0.45 0 0);
|
|
54
|
+
--ui-accent: oklch(0.10 0 0);
|
|
55
|
+
--ui-accent-foreground: oklch(0.98 0 0);
|
|
56
|
+
--ui-destructive: oklch(0.55 0.25 27);
|
|
57
|
+
--ui-border: oklch(0.10 0 0);
|
|
58
|
+
--ui-input: oklch(0.10 0 0);
|
|
59
|
+
--ui-ring: oklch(0.10 0 0);
|
|
60
|
+
--ui-radius: 0px;
|
|
61
|
+
|
|
62
|
+
/* No shadows — brutalist means raw */
|
|
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
|
+
/* Brutalist accent colors */
|
|
70
|
+
--brutalist-red: #dc2626;
|
|
71
|
+
--brutalist-yellow: #eab308;
|
|
72
|
+
--brutalist-blue: #2563eb;
|
|
73
|
+
|
|
74
|
+
--ui-success: oklch(0.55 0.20 150);
|
|
75
|
+
--ui-warning: oklch(0.75 0.18 80);
|
|
76
|
+
--ui-info: oklch(0.55 0.20 260);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* Brutalist Dark Theme */
|
|
80
|
+
[data-ui-theme="brutalist-dark"] {
|
|
81
|
+
--ui-background: oklch(0.10 0 0);
|
|
82
|
+
--ui-foreground: oklch(0.95 0 0);
|
|
83
|
+
--ui-card: oklch(0.15 0 0);
|
|
84
|
+
--ui-card-foreground: oklch(0.95 0 0);
|
|
85
|
+
--ui-popover: oklch(0.15 0 0);
|
|
86
|
+
--ui-popover-foreground: oklch(0.95 0 0);
|
|
87
|
+
--ui-primary: oklch(0.95 0 0);
|
|
88
|
+
--ui-primary-foreground: oklch(0.10 0 0);
|
|
89
|
+
--ui-secondary: oklch(0.25 0 0);
|
|
90
|
+
--ui-secondary-foreground: oklch(0.95 0 0);
|
|
91
|
+
--ui-muted: oklch(0.20 0 0);
|
|
92
|
+
--ui-muted-foreground: oklch(0.60 0 0);
|
|
93
|
+
--ui-accent: oklch(0.95 0 0);
|
|
94
|
+
--ui-accent-foreground: oklch(0.10 0 0);
|
|
95
|
+
--ui-destructive: oklch(0.65 0.25 27);
|
|
96
|
+
--ui-border: oklch(0.95 0 0);
|
|
97
|
+
--ui-input: oklch(0.95 0 0);
|
|
98
|
+
--ui-ring: oklch(0.95 0 0);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* Spacing scale */
|
|
102
|
+
:root {
|
|
103
|
+
--ui-space-0: 0;
|
|
104
|
+
--ui-space-1: 0.25rem;
|
|
105
|
+
--ui-space-2: 0.5rem;
|
|
106
|
+
--ui-space-3: 0.75rem;
|
|
107
|
+
--ui-space-4: 1rem;
|
|
108
|
+
--ui-space-5: 1.25rem;
|
|
109
|
+
--ui-space-6: 1.5rem;
|
|
110
|
+
--ui-space-8: 2rem;
|
|
111
|
+
--ui-space-10: 2.5rem;
|
|
112
|
+
--ui-space-12: 3rem;
|
|
113
|
+
--ui-space-16: 4rem;
|
|
114
|
+
|
|
115
|
+
/* Transitions — minimal, no easing curves */
|
|
116
|
+
--ui-transition-fast: 50ms linear;
|
|
117
|
+
--ui-transition-base: 100ms linear;
|
|
118
|
+
--ui-transition-slow: 200ms linear;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* Base styles */
|
|
122
|
+
* {
|
|
123
|
+
margin: 0;
|
|
124
|
+
padding: 0;
|
|
125
|
+
box-sizing: border-box;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
body {
|
|
129
|
+
font-family: var(--ui-font-sans);
|
|
130
|
+
color: var(--ui-foreground);
|
|
131
|
+
background-color: var(--ui-background);
|
|
132
|
+
line-height: 1.5;
|
|
133
|
+
-webkit-font-smoothing: antialiased;
|
|
134
|
+
-moz-osx-font-smoothing: grayscale;
|
|
135
|
+
letter-spacing: -0.02em;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
a {
|
|
139
|
+
color: var(--ui-primary);
|
|
140
|
+
text-decoration: none;
|
|
141
|
+
text-transform: uppercase;
|
|
142
|
+
font-weight: 700;
|
|
143
|
+
letter-spacing: 0.05em;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
button, input, select, textarea {
|
|
147
|
+
font: inherit;
|
|
148
|
+
border: 2px solid var(--ui-border);
|
|
149
|
+
background: var(--ui-background);
|
|
150
|
+
color: var(--ui-foreground);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
button {
|
|
154
|
+
cursor: pointer;
|
|
155
|
+
font-weight: 700;
|
|
156
|
+
text-transform: uppercase;
|
|
157
|
+
letter-spacing: 0.05em;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
button:hover {
|
|
161
|
+
background: var(--ui-foreground);
|
|
162
|
+
color: var(--ui-background);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
code, pre {
|
|
166
|
+
font-family: var(--ui-font-mono);
|
|
167
|
+
}
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
@intinyagroup/tokens — Cyberpunk Theme
|
|
3
|
+
|
|
4
|
+
Dark, neon-glowing, futuristic aesthetic.
|
|
5
|
+
Monospace type, glowing borders, dark palette.
|
|
6
|
+
Use: import '@intinyagroup/tokens/cyberpunk.css'
|
|
7
|
+
============================================ */
|
|
8
|
+
|
|
9
|
+
@import "tw-animate-css";
|
|
10
|
+
|
|
11
|
+
@theme inline {
|
|
12
|
+
--font-sans: var(--ui-font-sans, ui-monospace, "SFMono-Regular", "Cascadia Code", monospace);
|
|
13
|
+
--font-mono: var(--ui-font-mono, ui-monospace, "SFMono-Regular", "Cascadia Code", monospace);
|
|
14
|
+
--font-serif: var(--ui-font-serif, ui-monospace, monospace);
|
|
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
|
+
/* Cyberpunk Light Theme */
|
|
42
|
+
[data-ui-theme="cyberpunk"] {
|
|
43
|
+
--ui-background: oklch(0.95 0.01 280);
|
|
44
|
+
--ui-foreground: oklch(0.15 0.02 280);
|
|
45
|
+
--ui-card: oklch(1 0 0);
|
|
46
|
+
--ui-card-foreground: oklch(0.15 0.02 280);
|
|
47
|
+
--ui-popover: oklch(1 0 0);
|
|
48
|
+
--ui-popover-foreground: oklch(0.15 0.02 280);
|
|
49
|
+
--ui-primary: oklch(0.55 0.20 180);
|
|
50
|
+
--ui-primary-foreground: oklch(0.10 0 0);
|
|
51
|
+
--ui-secondary: oklch(0.92 0.03 280);
|
|
52
|
+
--ui-secondary-foreground: oklch(0.20 0.02 280);
|
|
53
|
+
--ui-muted: oklch(0.92 0.02 280);
|
|
54
|
+
--ui-muted-foreground: oklch(0.50 0.02 280);
|
|
55
|
+
--ui-accent: oklch(0.55 0.20 320);
|
|
56
|
+
--ui-accent-foreground: oklch(1 0 0);
|
|
57
|
+
--ui-destructive: oklch(0.60 0.25 25);
|
|
58
|
+
--ui-border: oklch(0.55 0.20 180);
|
|
59
|
+
--ui-input: oklch(0.55 0.20 180);
|
|
60
|
+
--ui-ring: oklch(0.55 0.20 320);
|
|
61
|
+
--ui-radius: 0px;
|
|
62
|
+
|
|
63
|
+
/* Neon glow shadows */
|
|
64
|
+
--ui-shadow-xs: 0 0 3px oklch(0.55 0.20 180 / 0.5);
|
|
65
|
+
--ui-shadow-sm: 0 0 5px oklch(0.55 0.20 180 / 0.6);
|
|
66
|
+
--ui-shadow-md: 0 0 10px oklch(0.55 0.20 180 / 0.5), 0 0 20px oklch(0.55 0.20 180 / 0.2);
|
|
67
|
+
--ui-shadow-lg: 0 0 20px oklch(0.55 0.20 180 / 0.5), 0 0 40px oklch(0.55 0.20 180 / 0.2);
|
|
68
|
+
--ui-shadow-xl: 0 0 30px oklch(0.55 0.20 180 / 0.5), 0 0 60px oklch(0.55 0.20 180 / 0.2);
|
|
69
|
+
|
|
70
|
+
/* Neon accent palette */
|
|
71
|
+
--cyber-neon-cyan: oklch(0.70 0.25 180);
|
|
72
|
+
--cyber-neon-magenta: oklch(0.70 0.25 320);
|
|
73
|
+
--cyber-neon-yellow: oklch(0.85 0.18 90);
|
|
74
|
+
--cyber-neon-green: oklch(0.70 0.22 145);
|
|
75
|
+
|
|
76
|
+
--ui-success: oklch(0.70 0.22 145);
|
|
77
|
+
--ui-warning: oklch(0.85 0.18 90);
|
|
78
|
+
--ui-info: oklch(0.70 0.25 180);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Cyberpunk Dark Theme */
|
|
82
|
+
::root,
|
|
83
|
+
[data-ui-theme="cyberpunk-dark"] {
|
|
84
|
+
--ui-background: oklch(0.10 0.02 280);
|
|
85
|
+
--ui-foreground: oklch(0.90 0.01 180);
|
|
86
|
+
--ui-card: oklch(0.14 0.02 280);
|
|
87
|
+
--ui-card-foreground: oklch(0.90 0.01 180);
|
|
88
|
+
--ui-popover: oklch(0.14 0.02 280);
|
|
89
|
+
--ui-popover-foreground: oklch(0.90 0.01 180);
|
|
90
|
+
--ui-primary: oklch(0.70 0.25 180);
|
|
91
|
+
--ui-primary-foreground: oklch(0.10 0 0);
|
|
92
|
+
--ui-secondary: oklch(0.18 0.02 280);
|
|
93
|
+
--ui-secondary-foreground: oklch(0.90 0.01 180);
|
|
94
|
+
--ui-muted: oklch(0.16 0.02 280);
|
|
95
|
+
--ui-muted-foreground: oklch(0.55 0.03 280);
|
|
96
|
+
--ui-accent: oklch(0.70 0.25 320);
|
|
97
|
+
--ui-accent-foreground: oklch(0.10 0 0);
|
|
98
|
+
--ui-destructive: oklch(0.65 0.28 25);
|
|
99
|
+
--ui-border: oklch(0.70 0.25 180);
|
|
100
|
+
--ui-input: oklch(0.20 0.03 280);
|
|
101
|
+
--ui-ring: oklch(0.70 0.25 320);
|
|
102
|
+
|
|
103
|
+
/* Neon glow shadows */
|
|
104
|
+
--ui-shadow-xs: 0 0 3px oklch(0.70 0.25 180 / 0.6);
|
|
105
|
+
--ui-shadow-sm: 0 0 5px oklch(0.70 0.25 180 / 0.7);
|
|
106
|
+
--ui-shadow-md: 0 0 10px oklch(0.70 0.25 180 / 0.6), 0 0 20px oklch(0.70 0.25 180 / 0.3);
|
|
107
|
+
--ui-shadow-lg: 0 0 20px oklch(0.70 0.25 180 / 0.6), 0 0 40px oklch(0.70 0.25 180 / 0.3);
|
|
108
|
+
--ui-shadow-xl: 0 0 30px oklch(0.70 0.25 180 / 0.6), 0 0 60px oklch(0.70 0.25 180 / 0.3);
|
|
109
|
+
|
|
110
|
+
--cyber-neon-cyan: oklch(0.80 0.25 180);
|
|
111
|
+
--cyber-neon-magenta: oklch(0.80 0.25 320);
|
|
112
|
+
--cyber-neon-yellow: oklch(0.90 0.18 90);
|
|
113
|
+
--cyber-neon-green: oklch(0.80 0.22 145);
|
|
114
|
+
|
|
115
|
+
--ui-success: oklch(0.80 0.22 145);
|
|
116
|
+
--ui-warning: oklch(0.90 0.18 90);
|
|
117
|
+
--ui-info: oklch(0.80 0.25 180);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* Spacing scale */
|
|
121
|
+
::root {
|
|
122
|
+
--ui-space-0: 0;
|
|
123
|
+
--ui-space-1: 0.25rem;
|
|
124
|
+
--ui-space-2: 0.5rem;
|
|
125
|
+
--ui-space-3: 0.75rem;
|
|
126
|
+
--ui-space-4: 1rem;
|
|
127
|
+
--ui-space-5: 1.25rem;
|
|
128
|
+
--ui-space-6: 1.5rem;
|
|
129
|
+
--ui-space-8: 2rem;
|
|
130
|
+
--ui-space-10: 2.5rem;
|
|
131
|
+
--ui-space-12: 3rem;
|
|
132
|
+
--ui-space-16: 4rem;
|
|
133
|
+
|
|
134
|
+
/* Transitions — sharp, instant, digital */
|
|
135
|
+
--ui-transition-fast: 80ms cubic-bezier(0.23, 1, 0.32, 1);
|
|
136
|
+
--ui-transition-base: 150ms cubic-bezier(0.23, 1, 0.32, 1);
|
|
137
|
+
--ui-transition-slow: 250ms cubic-bezier(0.23, 1, 0.32, 1);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
/* Base styles */
|
|
141
|
+
* {
|
|
142
|
+
box-sizing: border-box;
|
|
143
|
+
border-color: var(--ui-border);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
body {
|
|
147
|
+
margin: 0;
|
|
148
|
+
min-height: 100vh;
|
|
149
|
+
font-family: var(--ui-font-sans);
|
|
150
|
+
color: var(--ui-foreground);
|
|
151
|
+
background: var(--ui-background);
|
|
152
|
+
-webkit-font-smoothing: antialiased;
|
|
153
|
+
-moz-osx-font-smoothing: grayscale;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
a {
|
|
157
|
+
color: inherit;
|
|
158
|
+
text-decoration: none;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
button, input, select, textarea {
|
|
162
|
+
font: inherit;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
code, pre {
|
|
166
|
+
font-family: var(--ui-font-mono);
|
|
167
|
+
}
|