@intinyagroup/tokens 0.1.1-alpha.7 → 0.2.0

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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/base.css +98 -60
  3. package/src/minimalist.css +9 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@intinyagroup/tokens",
3
- "version": "0.1.1-alpha.7",
3
+ "version": "0.2.0",
4
4
  "description": "Design tokens for intinyagroup UI",
5
5
  "type": "module",
6
6
  "exports": {
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(--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);
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,93 @@
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(1 0 0);
44
- --ui-foreground: oklch(0.145 0.004 49.25);
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.145 0.004 49.25);
61
+ --ui-card-foreground: oklch(0.14 0.008 260);
47
62
  --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);
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
 
63
78
  /* 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);
79
+ --ui-success: oklch(0.62 0.16 155);
80
+ --ui-warning: oklch(0.75 0.18 75);
81
+ --ui-info: oklch(0.6 0.2 250);
67
82
  }
68
83
 
69
- /* Warm theme (InfraTools, SelfieTime admin) */
84
+ /* Warm theme (Calibrated Amber & Honey Terracotta warmth) */
70
85
  [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
+ --ui-background: oklch(0.99 0.006 80);
87
+ --ui-foreground: oklch(0.18 0.02 55);
88
+ --ui-card: oklch(1 0 0);
89
+ --ui-card-foreground: oklch(0.18 0.02 55);
90
+ --ui-popover: oklch(1 0 0);
91
+ --ui-popover-foreground: oklch(0.18 0.02 55);
92
+ --ui-primary: oklch(0.38 0.1 50);
93
+ --ui-primary-foreground: oklch(0.99 0.004 80);
94
+ --ui-secondary: oklch(0.96 0.01 75);
95
+ --ui-secondary-foreground: oklch(0.25 0.03 55);
96
+ --ui-muted: oklch(0.96 0.01 75);
97
+ --ui-muted-foreground: oklch(0.52 0.025 60);
98
+ --ui-accent: oklch(0.94 0.015 75);
99
+ --ui-accent-foreground: oklch(0.2 0.03 55);
100
+ --ui-border: oklch(0.89 0.01 70);
101
+ --ui-input: oklch(0.89 0.01 70);
102
+ --ui-ring: oklch(0.45 0.12 50);
103
+
104
+ --ui-success: oklch(0.62 0.15 155);
105
+ --ui-warning: oklch(0.75 0.18 75);
106
+ --ui-danger: oklch(0.58 0.22 25);
107
+ --ui-info: oklch(0.6 0.18 245);
86
108
  }
87
109
 
88
- /* Dark theme */
110
+ /* Dark theme — Calibrated modern zinc/slate hierarchy */
89
111
  [data-ui-theme="dark"],
90
112
  .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);
113
+ --ui-background: oklch(0.12 0.006 260);
114
+ --ui-foreground: oklch(0.96 0.005 260);
115
+
116
+ --ui-card: oklch(0.16 0.006 260);
117
+ --ui-card-foreground: oklch(0.96 0.005 260);
118
+
119
+ --ui-popover: oklch(0.19 0.007 260);
120
+ --ui-popover-foreground: oklch(0.96 0.005 260);
121
+
122
+ --ui-primary: oklch(0.58 0.22 260);
123
+ --ui-primary-foreground: oklch(0.98 0 0);
124
+
125
+ --ui-secondary: oklch(0.22 0.008 260);
126
+ --ui-secondary-foreground: oklch(0.92 0.005 260);
127
+
128
+ --ui-muted: oklch(0.2 0.008 260);
129
+ --ui-muted-foreground: oklch(0.68 0.012 260);
130
+
131
+ --ui-accent: oklch(0.22 0.01 260);
132
+ --ui-accent-foreground: oklch(0.96 0.005 260);
133
+
134
+ --ui-border: oklch(0.24 0.008 260);
135
+ --ui-input: oklch(0.24 0.008 260);
136
+ --ui-ring: oklch(0.58 0.22 260);
137
+
138
+ --ui-destructive: oklch(0.62 0.22 25);
139
+ --ui-success: oklch(0.68 0.17 155);
140
+ --ui-warning: oklch(0.78 0.16 75);
141
+ --ui-info: oklch(0.68 0.18 245);
109
142
  }
110
143
 
111
144
  /* Spacing scale */
@@ -127,7 +160,8 @@
127
160
  --ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
128
161
  --ui-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
129
162
  --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);
163
+ --ui-shadow-xl:
164
+ 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
131
165
 
132
166
  /* Transitions */
133
167
  --ui-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -156,10 +190,14 @@ a {
156
190
  text-decoration: none;
157
191
  }
158
192
 
159
- button, input, select, textarea {
193
+ button,
194
+ input,
195
+ select,
196
+ textarea {
160
197
  font: inherit;
161
198
  }
162
199
 
163
- code, pre {
200
+ code,
201
+ pre {
164
202
  font-family: var(--ui-font-mono);
165
203
  }
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
- --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);
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);