@sole-ui/react 0.0.0-stage → 0.1.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.
- package/README.md +66 -2
- package/dist/index.d.ts +223 -0
- package/dist/index.js +678 -0
- package/dist/styles.css +59 -0
- package/dist/tokens.css +231 -0
- package/dist/tokens.json +677 -0
- package/package.json +51 -4
package/dist/styles.css
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/* The Sole look for Tailwind CSS v4. In your stylesheet:
|
|
2
|
+
|
|
3
|
+
@import "tailwindcss";
|
|
4
|
+
@import "@sole-ui/react/styles.css";
|
|
5
|
+
|
|
6
|
+
The tokens, the Tailwind mapping and the text-micro utility live in tokens.css, which
|
|
7
|
+
is generated from packages/tokens. This file adds the font, the base layer and the
|
|
8
|
+
reduced-motion rule, as Sole HQ has them. */
|
|
9
|
+
|
|
10
|
+
@import "@fontsource-variable/inter";
|
|
11
|
+
@import "./tokens.css";
|
|
12
|
+
|
|
13
|
+
/* Light only (D31, owner 29 Sep): no dark theme and no theme switch. Nothing ever sets
|
|
14
|
+
a .dark class, so this keeps any `dark:` utility a shadcn component brings with it
|
|
15
|
+
from switching on under the system's prefers-color-scheme. The dark values wait in
|
|
16
|
+
hq/design/README.md for later. */
|
|
17
|
+
@custom-variant dark (&:is(.dark *));
|
|
18
|
+
|
|
19
|
+
/* ------------------------------------------------------------------ base */
|
|
20
|
+
|
|
21
|
+
@layer base {
|
|
22
|
+
* {
|
|
23
|
+
@apply border-border outline-ring/50;
|
|
24
|
+
}
|
|
25
|
+
html {
|
|
26
|
+
-webkit-text-size-adjust: 100%;
|
|
27
|
+
text-size-adjust: 100%;
|
|
28
|
+
}
|
|
29
|
+
body {
|
|
30
|
+
@apply bg-background text-foreground font-sans text-body antialiased;
|
|
31
|
+
font-feature-settings: "cv11", "ss01";
|
|
32
|
+
}
|
|
33
|
+
/* Keys, dates, times and counts line up (brand-and-ux 1.4). */
|
|
34
|
+
.tnum,
|
|
35
|
+
time,
|
|
36
|
+
kbd {
|
|
37
|
+
font-variant-numeric: tabular-nums;
|
|
38
|
+
}
|
|
39
|
+
:focus-visible {
|
|
40
|
+
outline: none;
|
|
41
|
+
}
|
|
42
|
+
button:not(:disabled),
|
|
43
|
+
[role="button"]:not(:disabled) {
|
|
44
|
+
cursor: pointer;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* Motion (5.6): colour changes 120ms, panels 200ms on the rise curve, no bounce, and
|
|
49
|
+
none of it for anyone who asked the system for less motion. */
|
|
50
|
+
@media (prefers-reduced-motion: reduce) {
|
|
51
|
+
*,
|
|
52
|
+
*::before,
|
|
53
|
+
*::after {
|
|
54
|
+
animation-duration: 0.01ms !important;
|
|
55
|
+
animation-iteration-count: 1 !important;
|
|
56
|
+
transition-duration: 0.01ms !important;
|
|
57
|
+
scroll-behavior: auto !important;
|
|
58
|
+
}
|
|
59
|
+
}
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
/* Generated by packages/tokens. Do not edit. */
|
|
2
|
+
|
|
3
|
+
/* Values come from Sole HQ's design README and brand-and-ux 5.2 to 5.6. Names are
|
|
4
|
+
shadcn's where shadcn has one. Text greys are split by role: foreground, muted and
|
|
5
|
+
subtle all clear 4.5:1; faint is for dots, dividers and chevrons only, never words. */
|
|
6
|
+
|
|
7
|
+
:root {
|
|
8
|
+
color-scheme: light;
|
|
9
|
+
--radius: 8px;
|
|
10
|
+
|
|
11
|
+
--background: #f5f5f5;
|
|
12
|
+
--foreground: #18181b;
|
|
13
|
+
--card: #ffffff;
|
|
14
|
+
--card-foreground: #18181b;
|
|
15
|
+
--popover: #ffffff;
|
|
16
|
+
--popover-foreground: #18181b;
|
|
17
|
+
--primary: #0270d6;
|
|
18
|
+
--primary-foreground: #ffffff;
|
|
19
|
+
--primary-hover: #0263bd;
|
|
20
|
+
--brand: #0485f7;
|
|
21
|
+
--link: #0263bd;
|
|
22
|
+
--secondary: #f4f4f5;
|
|
23
|
+
--secondary-foreground: #3f3f46;
|
|
24
|
+
--muted: #f4f4f5;
|
|
25
|
+
--muted-foreground: #52525b;
|
|
26
|
+
--subtle-foreground: #71717a;
|
|
27
|
+
--faint: #9ca3af;
|
|
28
|
+
--accent: #e6f2fe;
|
|
29
|
+
--accent-foreground: #0263bd;
|
|
30
|
+
--row-hover: #f7f9fc;
|
|
31
|
+
--border: #dedee0;
|
|
32
|
+
--hairline: #f3f3f7;
|
|
33
|
+
--input: #dedee0;
|
|
34
|
+
--field: #f9fafb;
|
|
35
|
+
--ring: #0485f7;
|
|
36
|
+
--destructive: #dc2626;
|
|
37
|
+
--destructive-foreground: #ffffff;
|
|
38
|
+
--danger-text: #b42318;
|
|
39
|
+
--danger-soft: #fef2f2;
|
|
40
|
+
--danger-border: #fecaca;
|
|
41
|
+
--warning: #f59e0b;
|
|
42
|
+
--warning-text: #b45309;
|
|
43
|
+
--warning-soft: #fffbeb;
|
|
44
|
+
--warning-border: #fcd34d;
|
|
45
|
+
--success: #10b981;
|
|
46
|
+
--success-text: #047857;
|
|
47
|
+
--success-soft: #ecfdf5;
|
|
48
|
+
--success-border: #a7f3d0;
|
|
49
|
+
--neutral-soft: #f3f4f6;
|
|
50
|
+
--neutral-text: #374151;
|
|
51
|
+
--skeleton: #eef0f3;
|
|
52
|
+
--sidebar: #f5f5f5;
|
|
53
|
+
--sidebar-foreground: #3f3f46;
|
|
54
|
+
--sidebar-accent: #e6f2fe;
|
|
55
|
+
--sidebar-accent-foreground: #0263bd;
|
|
56
|
+
--sidebar-hover: #ebebef;
|
|
57
|
+
--sidebar-border: #dedee0;
|
|
58
|
+
--sidebar-ring: #0485f7;
|
|
59
|
+
--tooltip: #18181b;
|
|
60
|
+
--tooltip-foreground: #ffffff;
|
|
61
|
+
--overdue: #dc2626;
|
|
62
|
+
--overdue-foreground: #ffffff;
|
|
63
|
+
--mark: #4d4dff;
|
|
64
|
+
|
|
65
|
+
/* State icon colours by group (brand-and-ux 5.8). */
|
|
66
|
+
--state-backlog: #9ca3af;
|
|
67
|
+
--state-unstarted: #71717a;
|
|
68
|
+
--state-started: #f59e0b;
|
|
69
|
+
--state-completed: #10b981;
|
|
70
|
+
--state-cancelled: #9ca3af;
|
|
71
|
+
|
|
72
|
+
/* Sticky notes (brand-and-ux 5.2). */
|
|
73
|
+
--sticky-gray: #d6d6d8;
|
|
74
|
+
--sticky-peach: #ffd5d7;
|
|
75
|
+
--sticky-pink: #fdd4e3;
|
|
76
|
+
--sticky-orange: #ffe3cd;
|
|
77
|
+
--sticky-green: #c3f0de;
|
|
78
|
+
--sticky-light-blue: #c5eff9;
|
|
79
|
+
--sticky-dark-blue: #c9dafb;
|
|
80
|
+
--sticky-purple: #e3d8fd;
|
|
81
|
+
--sticky-foreground: #18181b;
|
|
82
|
+
|
|
83
|
+
/* Shadows (5.6). */
|
|
84
|
+
--elevation-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.05);
|
|
85
|
+
--elevation-lg: 0 12px 34px -10px rgba(16, 24, 40, 0.22);
|
|
86
|
+
--focus-ring: 0 0 0 3px rgba(4, 133, 247, 0.14);
|
|
87
|
+
|
|
88
|
+
--ease-rise: cubic-bezier(0.22, 1, 0.36, 1);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Label hues (brand-and-ux 5.3 rule 6). Users pick a hue name, never a hex. The
|
|
92
|
+
approved design draws each tag from one ramp: the 50 step fill, 200 border, 800 text
|
|
93
|
+
and 600 dot, so every text pair clears 7:1 on its own fill. */
|
|
94
|
+
.hue-slate { --tag-bg: #f8fafc; --tag-border: #e2e8f0; --tag-fg: #1e293b; --tag-dot: #475569; }
|
|
95
|
+
.hue-indigo { --tag-bg: #eef2ff; --tag-border: #c7d2fe; --tag-fg: #3730a3; --tag-dot: #4f46e5; }
|
|
96
|
+
.hue-violet { --tag-bg: #f5f3ff; --tag-border: #ddd6fe; --tag-fg: #5b21b6; --tag-dot: #7c3aed; }
|
|
97
|
+
.hue-blue { --tag-bg: #eff6ff; --tag-border: #bfdbfe; --tag-fg: #1e40af; --tag-dot: #2563eb; }
|
|
98
|
+
.hue-cyan { --tag-bg: #ecfeff; --tag-border: #a5f3fc; --tag-fg: #155e75; --tag-dot: #0891b2; }
|
|
99
|
+
.hue-teal { --tag-bg: #f0fdfa; --tag-border: #99f6e4; --tag-fg: #115e59; --tag-dot: #0d9488; }
|
|
100
|
+
.hue-green { --tag-bg: #f0fdf4; --tag-border: #bbf7d0; --tag-fg: #166534; --tag-dot: #16a34a; }
|
|
101
|
+
.hue-lime { --tag-bg: #f7fee7; --tag-border: #d9f99d; --tag-fg: #3f6212; --tag-dot: #65a30d; }
|
|
102
|
+
.hue-amber { --tag-bg: #fffbeb; --tag-border: #fde68a; --tag-fg: #92400e; --tag-dot: #d97706; }
|
|
103
|
+
.hue-orange { --tag-bg: #fff7ed; --tag-border: #fed7aa; --tag-fg: #9a3412; --tag-dot: #ea580c; }
|
|
104
|
+
.hue-rose { --tag-bg: #fff1f2; --tag-border: #fecdd3; --tag-fg: #9f1239; --tag-dot: #e11d48; }
|
|
105
|
+
.hue-pink { --tag-bg: #fdf2f8; --tag-border: #fbcfe8; --tag-fg: #9d174d; --tag-dot: #db2777; }
|
|
106
|
+
|
|
107
|
+
@theme inline {
|
|
108
|
+
--font-sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
109
|
+
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
110
|
+
|
|
111
|
+
--color-background: var(--background);
|
|
112
|
+
--color-foreground: var(--foreground);
|
|
113
|
+
--color-card: var(--card);
|
|
114
|
+
--color-card-foreground: var(--card-foreground);
|
|
115
|
+
--color-popover: var(--popover);
|
|
116
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
117
|
+
--color-primary: var(--primary);
|
|
118
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
119
|
+
--color-primary-hover: var(--primary-hover);
|
|
120
|
+
--color-brand: var(--brand);
|
|
121
|
+
--color-link: var(--link);
|
|
122
|
+
--color-secondary: var(--secondary);
|
|
123
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
124
|
+
--color-muted: var(--muted);
|
|
125
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
126
|
+
--color-subtle-foreground: var(--subtle-foreground);
|
|
127
|
+
--color-faint: var(--faint);
|
|
128
|
+
--color-accent: var(--accent);
|
|
129
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
130
|
+
--color-row-hover: var(--row-hover);
|
|
131
|
+
--color-border: var(--border);
|
|
132
|
+
--color-hairline: var(--hairline);
|
|
133
|
+
--color-input: var(--input);
|
|
134
|
+
--color-field: var(--field);
|
|
135
|
+
--color-ring: var(--ring);
|
|
136
|
+
--color-destructive: var(--destructive);
|
|
137
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
138
|
+
--color-danger-text: var(--danger-text);
|
|
139
|
+
--color-danger-soft: var(--danger-soft);
|
|
140
|
+
--color-danger-border: var(--danger-border);
|
|
141
|
+
--color-warning: var(--warning);
|
|
142
|
+
--color-warning-text: var(--warning-text);
|
|
143
|
+
--color-warning-soft: var(--warning-soft);
|
|
144
|
+
--color-warning-border: var(--warning-border);
|
|
145
|
+
--color-success: var(--success);
|
|
146
|
+
--color-success-text: var(--success-text);
|
|
147
|
+
--color-success-soft: var(--success-soft);
|
|
148
|
+
--color-success-border: var(--success-border);
|
|
149
|
+
--color-neutral-soft: var(--neutral-soft);
|
|
150
|
+
--color-neutral-text: var(--neutral-text);
|
|
151
|
+
--color-skeleton: var(--skeleton);
|
|
152
|
+
--color-sidebar: var(--sidebar);
|
|
153
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
154
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
155
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
156
|
+
--color-sidebar-hover: var(--sidebar-hover);
|
|
157
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
158
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
159
|
+
--color-tooltip: var(--tooltip);
|
|
160
|
+
--color-tooltip-foreground: var(--tooltip-foreground);
|
|
161
|
+
--color-overdue: var(--overdue);
|
|
162
|
+
--color-overdue-foreground: var(--overdue-foreground);
|
|
163
|
+
--color-mark: var(--mark);
|
|
164
|
+
--color-state-backlog: var(--state-backlog);
|
|
165
|
+
--color-state-unstarted: var(--state-unstarted);
|
|
166
|
+
--color-state-started: var(--state-started);
|
|
167
|
+
--color-state-completed: var(--state-completed);
|
|
168
|
+
--color-state-cancelled: var(--state-cancelled);
|
|
169
|
+
--color-sticky-foreground: var(--sticky-foreground);
|
|
170
|
+
--color-tag-bg: var(--tag-bg);
|
|
171
|
+
--color-tag-fg: var(--tag-fg);
|
|
172
|
+
--color-tag-border: var(--tag-border);
|
|
173
|
+
--color-tag-dot: var(--tag-dot);
|
|
174
|
+
|
|
175
|
+
/* Radius (5.6): chips and sidebar items 6, buttons and inputs 8, panels 12, dialogs
|
|
176
|
+
16. */
|
|
177
|
+
--radius-xs: 3px;
|
|
178
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
179
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
180
|
+
--radius-lg: var(--radius);
|
|
181
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
182
|
+
--radius-2xl: calc(var(--radius) + 8px);
|
|
183
|
+
|
|
184
|
+
--shadow-xs: var(--elevation-sm);
|
|
185
|
+
--shadow-sm: var(--elevation-sm);
|
|
186
|
+
--shadow-md: var(--elevation-lg);
|
|
187
|
+
--shadow-lg: var(--elevation-lg);
|
|
188
|
+
--shadow-xl: var(--elevation-lg);
|
|
189
|
+
|
|
190
|
+
--ease-rise: var(--ease-rise);
|
|
191
|
+
|
|
192
|
+
/* Type scale (brand-and-ux 5.4). text-micro, the only uppercase style, is a utility
|
|
193
|
+
at the end of the scale, because a theme token cannot carry text-transform. */
|
|
194
|
+
--text-label: 12px;
|
|
195
|
+
--text-label--line-height: 16px;
|
|
196
|
+
--text-label--font-weight: 500;
|
|
197
|
+
--text-body: 13px;
|
|
198
|
+
--text-body--line-height: 20px;
|
|
199
|
+
--text-strong: 14px;
|
|
200
|
+
--text-strong--line-height: 20px;
|
|
201
|
+
--text-strong--font-weight: 600;
|
|
202
|
+
--text-strong--letter-spacing: -0.01em;
|
|
203
|
+
--text-read: 16px;
|
|
204
|
+
--text-read--line-height: 26px;
|
|
205
|
+
--text-title: 18px;
|
|
206
|
+
--text-title--line-height: 24px;
|
|
207
|
+
--text-title--font-weight: 600;
|
|
208
|
+
--text-title--letter-spacing: -0.015em;
|
|
209
|
+
--text-page: 20px;
|
|
210
|
+
--text-page--line-height: 28px;
|
|
211
|
+
--text-page--font-weight: 600;
|
|
212
|
+
--text-page--letter-spacing: -0.02em;
|
|
213
|
+
--text-doc: 28px;
|
|
214
|
+
--text-doc--line-height: 34px;
|
|
215
|
+
--text-doc--font-weight: 700;
|
|
216
|
+
--text-doc--letter-spacing: -0.02em;
|
|
217
|
+
--text-metric: 28px;
|
|
218
|
+
--text-metric--line-height: 31px;
|
|
219
|
+
--text-metric--font-weight: 700;
|
|
220
|
+
--text-metric--letter-spacing: -0.02em;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/* The only uppercase style. It is a utility rather than a theme token, because a theme
|
|
224
|
+
token cannot carry text-transform. */
|
|
225
|
+
@utility text-micro {
|
|
226
|
+
font-size: 11px;
|
|
227
|
+
line-height: 16px;
|
|
228
|
+
font-weight: 600;
|
|
229
|
+
letter-spacing: 0.06em;
|
|
230
|
+
text-transform: uppercase;
|
|
231
|
+
}
|