@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
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
@intinyagroup/tokens — Neumorphism Theme
|
|
3
|
+
|
|
4
|
+
Soft UI with dual shadows for raised/depressed
|
|
5
|
+
effects. Pastel palette, very rounded corners.
|
|
6
|
+
Use: import '@intinyagroup/tokens/neumorphism.css'
|
|
7
|
+
============================================ */
|
|
8
|
+
|
|
9
|
+
@import "tw-animate-css";
|
|
10
|
+
|
|
11
|
+
@theme inline {
|
|
12
|
+
--font-sans: var(--ui-font-sans, "Inter Variable", ui-sans-serif, system-ui, sans-serif);
|
|
13
|
+
--font-mono: var(--ui-font-mono, "SFMono-Regular", ui-monospace, "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: calc(var(--ui-radius) - 4px);
|
|
36
|
+
--radius-md: calc(var(--ui-radius) - 2px);
|
|
37
|
+
--radius-lg: var(--ui-radius);
|
|
38
|
+
--radius-xl: calc(var(--ui-radius) + 4px);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Neumorphism Light Theme */
|
|
42
|
+
::root,
|
|
43
|
+
[data-ui-theme="neumorphism"] {
|
|
44
|
+
--ui-background: oklch(0.90 0.01 260);
|
|
45
|
+
--ui-foreground: oklch(0.30 0.02 260);
|
|
46
|
+
--ui-card: oklch(0.90 0.01 260);
|
|
47
|
+
--ui-card-foreground: oklch(0.30 0.02 260);
|
|
48
|
+
--ui-popover: oklch(0.90 0.01 260);
|
|
49
|
+
--ui-popover-foreground: oklch(0.30 0.02 260);
|
|
50
|
+
--ui-primary: oklch(0.60 0.12 260);
|
|
51
|
+
--ui-primary-foreground: oklch(1 0 0);
|
|
52
|
+
--ui-secondary: oklch(0.85 0.04 260);
|
|
53
|
+
--ui-secondary-foreground: oklch(0.35 0.02 260);
|
|
54
|
+
--ui-muted: oklch(0.85 0.02 260);
|
|
55
|
+
--ui-muted-foreground: oklch(0.55 0.02 260);
|
|
56
|
+
--ui-accent: oklch(0.65 0.10 180);
|
|
57
|
+
--ui-accent-foreground: oklch(1 0 0);
|
|
58
|
+
--ui-destructive: oklch(0.55 0.18 20);
|
|
59
|
+
--ui-border: oklch(0.85 0.01 260);
|
|
60
|
+
--ui-input: oklch(0.85 0.01 260);
|
|
61
|
+
--ui-ring: oklch(0.60 0.12 260);
|
|
62
|
+
--ui-radius: 1.5rem;
|
|
63
|
+
|
|
64
|
+
/* Neumorphism dual shadows — raised effect */
|
|
65
|
+
--ui-shadow-xs: 2px 2px 4px oklch(0.80 0 0), -2px -2px 4px oklch(1 0 0);
|
|
66
|
+
--ui-shadow-sm: 3px 3px 6px oklch(0.80 0 0), -3px -3px 6px oklch(1 0 0);
|
|
67
|
+
--ui-shadow-md: 5px 5px 10px oklch(0.80 0 0), -5px -5px 10px oklch(1 0 0);
|
|
68
|
+
--ui-shadow-lg: 8px 8px 16px oklch(0.80 0 0), -8px -8px 16px oklch(1 0 0);
|
|
69
|
+
--ui-shadow-xl: 12px 12px 24px oklch(0.80 0 0), -12px -12px 24px oklch(1 0 0);
|
|
70
|
+
|
|
71
|
+
/* Soft pastel accent palette */
|
|
72
|
+
--neumorph-pastel-blue: oklch(0.75 0.08 240);
|
|
73
|
+
--neumorph-pastel-green: oklch(0.75 0.08 155);
|
|
74
|
+
--neumorph-pastel-pink: oklch(0.75 0.08 350);
|
|
75
|
+
--neumorph-pastel-yellow: oklch(0.80 0.08 85);
|
|
76
|
+
|
|
77
|
+
--ui-success: oklch(0.65 0.12 155);
|
|
78
|
+
--ui-warning: oklch(0.75 0.14 85);
|
|
79
|
+
--ui-info: oklch(0.60 0.12 240);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* Neumorphism Dark Theme */
|
|
83
|
+
[data-ui-theme="neumorphism-dark"] {
|
|
84
|
+
--ui-background: oklch(0.25 0.01 260);
|
|
85
|
+
--ui-foreground: oklch(0.85 0.01 260);
|
|
86
|
+
--ui-card: oklch(0.25 0.01 260);
|
|
87
|
+
--ui-card-foreground: oklch(0.85 0.01 260);
|
|
88
|
+
--ui-popover: oklch(0.25 0.01 260);
|
|
89
|
+
--ui-popover-foreground: oklch(0.85 0.01 260);
|
|
90
|
+
--ui-primary: oklch(0.70 0.12 260);
|
|
91
|
+
--ui-primary-foreground: oklch(0.15 0 0);
|
|
92
|
+
--ui-secondary: oklch(0.30 0.02 260);
|
|
93
|
+
--ui-secondary-foreground: oklch(0.85 0.01 260);
|
|
94
|
+
--ui-muted: oklch(0.28 0.01 260);
|
|
95
|
+
--ui-muted-foreground: oklch(0.60 0.02 260);
|
|
96
|
+
--ui-accent: oklch(0.70 0.10 180);
|
|
97
|
+
--ui-accent-foreground: oklch(0.15 0 0);
|
|
98
|
+
--ui-destructive: oklch(0.60 0.20 20);
|
|
99
|
+
--ui-border: oklch(0.32 0.01 260);
|
|
100
|
+
--ui-input: oklch(0.32 0.01 260);
|
|
101
|
+
--ui-ring: oklch(0.70 0.12 260);
|
|
102
|
+
|
|
103
|
+
/* Dark neumorphism — inset shadows for pressed look */
|
|
104
|
+
--ui-shadow-xs: inset 2px 2px 4px oklch(0.15 0 0), inset -2px -2px 4px oklch(0.35 0.01 260);
|
|
105
|
+
--ui-shadow-sm: inset 3px 3px 6px oklch(0.15 0 0), inset -3px -3px 6px oklch(0.35 0.01 260);
|
|
106
|
+
--ui-shadow-md: inset 5px 5px 10px oklch(0.15 0 0), inset -5px -5px 10px oklch(0.35 0.01 260);
|
|
107
|
+
--ui-shadow-lg: inset 8px 8px 16px oklch(0.15 0 0), inset -8px -8px 16px oklch(0.35 0.01 260);
|
|
108
|
+
--ui-shadow-xl: inset 12px 12px 24px oklch(0.15 0 0), inset -12px -12px 24px oklch(0.35 0.01 260);
|
|
109
|
+
|
|
110
|
+
--neumorph-pastel-blue: oklch(0.50 0.10 240);
|
|
111
|
+
--neumorph-pastel-green: oklch(0.50 0.10 155);
|
|
112
|
+
--neumorph-pastel-pink: oklch(0.50 0.10 350);
|
|
113
|
+
--neumorph-pastel-yellow: oklch(0.55 0.10 85);
|
|
114
|
+
|
|
115
|
+
--ui-success: oklch(0.55 0.14 155);
|
|
116
|
+
--ui-warning: oklch(0.65 0.16 85);
|
|
117
|
+
--ui-info: oklch(0.50 0.12 240);
|
|
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 — smooth, rounded feel */
|
|
135
|
+
--ui-transition-fast: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
136
|
+
--ui-transition-base: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
137
|
+
--ui-transition-slow: 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
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
|
+
}
|
package/src/retro.css
ADDED
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
@intinyagroup/tokens — Retro Theme
|
|
3
|
+
|
|
4
|
+
Vintage warmth with sepia-toned palette,
|
|
5
|
+
serif type, sharp corners, visible borders.
|
|
6
|
+
Use: import '@intinyagroup/tokens/retro.css'
|
|
7
|
+
============================================ */
|
|
8
|
+
|
|
9
|
+
@import "tw-animate-css";
|
|
10
|
+
|
|
11
|
+
@theme inline {
|
|
12
|
+
--font-sans: var(--ui-font-sans, "Georgia", "Times New Roman", serif);
|
|
13
|
+
--font-mono: var(--ui-font-mono, "Courier New", ui-monospace, 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
|
+
/* Retro Light Theme */
|
|
42
|
+
::root,
|
|
43
|
+
[data-ui-theme="retro"] {
|
|
44
|
+
--ui-background: oklch(0.95 0.02 80);
|
|
45
|
+
--ui-foreground: oklch(0.20 0.03 50);
|
|
46
|
+
--ui-card: oklch(0.97 0.01 80);
|
|
47
|
+
--ui-card-foreground: oklch(0.20 0.03 50);
|
|
48
|
+
--ui-popover: oklch(0.97 0.01 80);
|
|
49
|
+
--ui-popover-foreground: oklch(0.20 0.03 50);
|
|
50
|
+
--ui-primary: oklch(0.60 0.15 25);
|
|
51
|
+
--ui-primary-foreground: oklch(0.97 0.01 80);
|
|
52
|
+
--ui-secondary: oklch(0.90 0.03 60);
|
|
53
|
+
--ui-secondary-foreground: oklch(0.30 0.04 50);
|
|
54
|
+
--ui-muted: oklch(0.90 0.03 60);
|
|
55
|
+
--ui-muted-foreground: oklch(0.50 0.03 60);
|
|
56
|
+
--ui-accent: oklch(0.55 0.14 90);
|
|
57
|
+
--ui-accent-foreground: oklch(0.97 0.01 80);
|
|
58
|
+
--ui-destructive: oklch(0.50 0.18 15);
|
|
59
|
+
--ui-border: oklch(0.75 0.03 60);
|
|
60
|
+
--ui-input: oklch(0.75 0.03 60);
|
|
61
|
+
--ui-ring: oklch(0.60 0.15 25);
|
|
62
|
+
--ui-radius: 0px;
|
|
63
|
+
|
|
64
|
+
/* Retro shadows — subtle warm tones */
|
|
65
|
+
--ui-shadow-xs: 0 1px 2px oklch(0.70 0.02 60 / 0.3);
|
|
66
|
+
--ui-shadow-sm: 0 1px 3px oklch(0.70 0.02 60 / 0.35);
|
|
67
|
+
--ui-shadow-md: 0 4px 6px oklch(0.70 0.02 60 / 0.3);
|
|
68
|
+
--ui-shadow-lg: 0 10px 15px oklch(0.70 0.02 60 / 0.25);
|
|
69
|
+
--ui-shadow-xl: 0 20px 25px oklch(0.70 0.02 60 / 0.2);
|
|
70
|
+
|
|
71
|
+
/* Sepia-toned accent palette */
|
|
72
|
+
--retro-sepia-brown: oklch(0.45 0.08 50);
|
|
73
|
+
--retro-olive: oklch(0.55 0.10 100);
|
|
74
|
+
--retro-rust: oklch(0.50 0.14 35);
|
|
75
|
+
--retro-gold: oklch(0.70 0.12 80);
|
|
76
|
+
|
|
77
|
+
--ui-success: oklch(0.55 0.14 100);
|
|
78
|
+
--ui-warning: oklch(0.70 0.12 80);
|
|
79
|
+
--ui-info: oklch(0.50 0.10 240);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* Retro Dark Theme */
|
|
83
|
+
[data-ui-theme="retro-dark"] {
|
|
84
|
+
--ui-background: oklch(0.25 0.02 50);
|
|
85
|
+
--ui-foreground: oklch(0.90 0.02 60);
|
|
86
|
+
--ui-card: oklch(0.28 0.02 50);
|
|
87
|
+
--ui-card-foreground: oklch(0.90 0.02 60);
|
|
88
|
+
--ui-popover: oklch(0.28 0.02 50);
|
|
89
|
+
--ui-popover-foreground: oklch(0.90 0.02 60);
|
|
90
|
+
--ui-primary: oklch(0.70 0.16 25);
|
|
91
|
+
--ui-primary-foreground: oklch(0.15 0.02 50);
|
|
92
|
+
--ui-secondary: oklch(0.35 0.03 50);
|
|
93
|
+
--ui-secondary-foreground: oklch(0.90 0.02 60);
|
|
94
|
+
--ui-muted: oklch(0.30 0.02 50);
|
|
95
|
+
--ui-muted-foreground: oklch(0.60 0.03 60);
|
|
96
|
+
--ui-accent: oklch(0.65 0.14 90);
|
|
97
|
+
--ui-accent-foreground: oklch(0.15 0.02 50);
|
|
98
|
+
--ui-destructive: oklch(0.60 0.20 15);
|
|
99
|
+
--ui-border: oklch(0.40 0.03 50);
|
|
100
|
+
--ui-input: oklch(0.40 0.03 50);
|
|
101
|
+
--ui-ring: oklch(0.70 0.16 25);
|
|
102
|
+
|
|
103
|
+
--retro-sepia-brown: oklch(0.60 0.10 50);
|
|
104
|
+
--retro-olive: oklch(0.65 0.12 100);
|
|
105
|
+
--retro-rust: oklch(0.60 0.16 35);
|
|
106
|
+
--retro-gold: oklch(0.80 0.12 80);
|
|
107
|
+
|
|
108
|
+
--ui-success: oklch(0.65 0.14 100);
|
|
109
|
+
--ui-warning: oklch(0.80 0.12 80);
|
|
110
|
+
--ui-info: oklch(0.60 0.12 240);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/* Spacing scale */
|
|
114
|
+
::root {
|
|
115
|
+
--ui-space-0: 0;
|
|
116
|
+
--ui-space-1: 0.25rem;
|
|
117
|
+
--ui-space-2: 0.5rem;
|
|
118
|
+
--ui-space-3: 0.75rem;
|
|
119
|
+
--ui-space-4: 1rem;
|
|
120
|
+
--ui-space-5: 1.25rem;
|
|
121
|
+
--ui-space-6: 1.5rem;
|
|
122
|
+
--ui-space-8: 2rem;
|
|
123
|
+
--ui-space-10: 2.5rem;
|
|
124
|
+
--ui-space-12: 3rem;
|
|
125
|
+
--ui-space-16: 4rem;
|
|
126
|
+
|
|
127
|
+
/* Transitions — deliberate, unhurried */
|
|
128
|
+
--ui-transition-fast: 150ms ease-out;
|
|
129
|
+
--ui-transition-base: 250ms ease-out;
|
|
130
|
+
--ui-transition-slow: 400ms ease-out;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* Base styles */
|
|
134
|
+
* {
|
|
135
|
+
box-sizing: border-box;
|
|
136
|
+
border-color: var(--ui-border);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
body {
|
|
140
|
+
margin: 0;
|
|
141
|
+
min-height: 100vh;
|
|
142
|
+
font-family: var(--ui-font-sans);
|
|
143
|
+
color: var(--ui-foreground);
|
|
144
|
+
background: var(--ui-background);
|
|
145
|
+
-webkit-font-smoothing: antialiased;
|
|
146
|
+
-moz-osx-font-smoothing: grayscale;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
a {
|
|
150
|
+
color: inherit;
|
|
151
|
+
text-decoration: none;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
button, input, select, textarea {
|
|
155
|
+
font: inherit;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
code, pre {
|
|
159
|
+
font-family: var(--ui-font-mono);
|
|
160
|
+
}
|