@tangle-network/brand 0.3.0 → 0.5.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/CHANGELOG.md +16 -0
- package/package.json +1 -1
- package/src/styles/globals.css +4 -2
- package/src/styles/theme.css +44 -18
- package/src/styles/tokens.css +163 -145
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 184c8bb: Add the canonical display type scale and semantic type-role utilities. New
|
|
8
|
+
tokens: `--font-size-2xl/3xl/4xl` plus fluid `--font-size-hero`/`--font-size-display`
|
|
9
|
+
(clamp), display line-heights, and tracking tokens. New `@theme` utilities
|
|
10
|
+
`text-display`/`text-hero`/`text-page`/`text-section`/`text-eyebrow`, each
|
|
11
|
+
carrying size + leading + tracking + weight. Quiet weights (heroes 700, titles 600) per Tangle Quiet. Additive — no existing token changed.
|
|
12
|
+
|
|
13
|
+
## 0.4.0
|
|
14
|
+
|
|
15
|
+
### Minor Changes
|
|
16
|
+
|
|
17
|
+
- 8152d92: Tangle Quiet reskin: flat neutral chrome with a single indigo accent. Reworks `theme.css` and `tokens.css` so surfaces read as quiet neutrals and color is reserved for the indigo accent only.
|
|
18
|
+
|
|
3
19
|
## 0.3.0
|
|
4
20
|
|
|
5
21
|
### Minor Changes
|
package/package.json
CHANGED
package/src/styles/globals.css
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
::selection {
|
|
23
|
-
background:
|
|
23
|
+
background: var(--bg-selection);
|
|
24
24
|
color: hsl(var(--hsl-foreground));
|
|
25
25
|
}
|
|
26
26
|
|
|
@@ -51,8 +51,10 @@
|
|
|
51
51
|
color: transparent;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
+
/* Retained as a flat no-op so any stray consumer renders without a halo.
|
|
55
|
+
Tangle Quiet has no glow chrome. */
|
|
54
56
|
.glow-brand {
|
|
55
|
-
box-shadow:
|
|
57
|
+
box-shadow: none;
|
|
56
58
|
}
|
|
57
59
|
|
|
58
60
|
.depth-1 { background-color: var(--depth-1); }
|
package/src/styles/theme.css
CHANGED
|
@@ -7,16 +7,42 @@
|
|
|
7
7
|
BEFORE their own project-local @theme overrides. */
|
|
8
8
|
|
|
9
9
|
@theme {
|
|
10
|
-
/* Typography */
|
|
11
|
-
--font-sans: "
|
|
12
|
-
--font-display: "
|
|
10
|
+
/* Typography — unified on Inter */
|
|
11
|
+
--font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
12
|
+
--font-display: "Inter", "Geist", sans-serif;
|
|
13
13
|
--font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
14
14
|
|
|
15
|
-
/*
|
|
15
|
+
/* Canonical type roles — additive semantic sizes (do not shadow Tailwind's
|
|
16
|
+
numeric text-* scale). Pair size + leading + tracking + weight so a
|
|
17
|
+
`text-display` / `text-page` utility carries the whole role. Prefer the
|
|
18
|
+
Heading / PageHeader primitives in @tangle-network/sandbox-ui over raw
|
|
19
|
+
utilities so titles stay consistent across every app. */
|
|
20
|
+
--text-display: var(--font-size-display);
|
|
21
|
+
--text-display--line-height: 1.05;
|
|
22
|
+
--text-display--letter-spacing: -0.02em;
|
|
23
|
+
--text-display--font-weight: 700;
|
|
24
|
+
--text-hero: var(--font-size-hero);
|
|
25
|
+
--text-hero--line-height: 1.1;
|
|
26
|
+
--text-hero--letter-spacing: -0.02em;
|
|
27
|
+
--text-hero--font-weight: 700;
|
|
28
|
+
--text-page: var(--font-size-3xl);
|
|
29
|
+
--text-page--line-height: 1.15;
|
|
30
|
+
--text-page--letter-spacing: -0.02em;
|
|
31
|
+
--text-page--font-weight: 600;
|
|
32
|
+
--text-section: var(--font-size-xl);
|
|
33
|
+
--text-section--line-height: 1.3;
|
|
34
|
+
--text-section--letter-spacing: -0.01em;
|
|
35
|
+
--text-section--font-weight: 600;
|
|
36
|
+
--text-eyebrow: var(--font-size-sm);
|
|
37
|
+
--text-eyebrow--line-height: 1;
|
|
38
|
+
--text-eyebrow--letter-spacing: 0.08em;
|
|
39
|
+
--text-eyebrow--font-weight: 600;
|
|
40
|
+
|
|
41
|
+
/* Radii — tight chrome scale */
|
|
16
42
|
--radius-sm: 6px;
|
|
17
43
|
--radius-md: 8px;
|
|
18
|
-
--radius-lg:
|
|
19
|
-
--radius-xl:
|
|
44
|
+
--radius-lg: 10px;
|
|
45
|
+
--radius-xl: 12px;
|
|
20
46
|
--radius-full: 999px;
|
|
21
47
|
|
|
22
48
|
/* Core brand accent (indigo) — use as `bg-brand`, `text-brand`, `ring-brand` */
|
|
@@ -26,16 +52,16 @@
|
|
|
26
52
|
--color-brand-glow: #A5AAFC;
|
|
27
53
|
--color-brand-emerald: #10B981;
|
|
28
54
|
|
|
29
|
-
/* Depth stack —
|
|
30
|
-
--color-depth-1: #
|
|
31
|
-
--color-depth-2: #
|
|
32
|
-
--color-depth-3: #
|
|
33
|
-
--color-depth-4: #
|
|
55
|
+
/* Depth stack — flat neutral spine (Tangle Quiet) */
|
|
56
|
+
--color-depth-1: #0b0b0d;
|
|
57
|
+
--color-depth-2: #141416;
|
|
58
|
+
--color-depth-3: #1a1a1d;
|
|
59
|
+
--color-depth-4: #202023;
|
|
34
60
|
|
|
35
61
|
/* Semantic text — use as `text-fg`, `text-fg-muted`, `text-fg-dim` */
|
|
36
|
-
--color-fg: #
|
|
37
|
-
--color-fg-muted: #
|
|
38
|
-
--color-fg-dim: #
|
|
62
|
+
--color-fg: #ececee;
|
|
63
|
+
--color-fg-muted: #9a9aa2;
|
|
64
|
+
--color-fg-dim: #6b6b73;
|
|
39
65
|
|
|
40
66
|
/* Status — use as `text-status-running`, `bg-status-stopped` */
|
|
41
67
|
--color-status-running: #10B981;
|
|
@@ -43,8 +69,8 @@
|
|
|
43
69
|
--color-status-stopped: #FFB800;
|
|
44
70
|
--color-status-error: #FF4D6D;
|
|
45
71
|
|
|
46
|
-
/* Shadows —
|
|
47
|
-
--shadow-card: 0 1px
|
|
48
|
-
--shadow-dropdown: 0 8px
|
|
49
|
-
--shadow-glow:
|
|
72
|
+
/* Shadows — flat, no inner ring, no indigo glow */
|
|
73
|
+
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
74
|
+
--shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
|
|
75
|
+
--shadow-glow: none;
|
|
50
76
|
}
|
package/src/styles/tokens.css
CHANGED
|
@@ -45,25 +45,25 @@
|
|
|
45
45
|
--md3-inverse-on-surface: #000000;
|
|
46
46
|
--md3-surface-tint: #818CF8;
|
|
47
47
|
|
|
48
|
-
/* Semantic HSL bridge */
|
|
49
|
-
--hsl-background:
|
|
50
|
-
--hsl-foreground: 240
|
|
51
|
-
--hsl-card:
|
|
52
|
-
--hsl-card-foreground: 240
|
|
53
|
-
--hsl-popover:
|
|
54
|
-
--hsl-popover-foreground: 240
|
|
48
|
+
/* Semantic HSL bridge — flat neutral spine (Tangle Quiet) */
|
|
49
|
+
--hsl-background: 240 8% 5%; /* #0b0b0d */
|
|
50
|
+
--hsl-foreground: 240 6% 93%; /* #ececee */
|
|
51
|
+
--hsl-card: 240 5% 8%; /* #141416 surface */
|
|
52
|
+
--hsl-card-foreground: 240 6% 93%;
|
|
53
|
+
--hsl-popover: 240 4% 13%; /* #202023 elevated */
|
|
54
|
+
--hsl-popover-foreground: 240 6% 93%;
|
|
55
55
|
--hsl-primary: 239 84% 67%;
|
|
56
56
|
--hsl-primary-foreground: 0 0% 100%;
|
|
57
|
-
--hsl-secondary:
|
|
58
|
-
--hsl-secondary-foreground: 240
|
|
59
|
-
--hsl-muted:
|
|
60
|
-
--hsl-muted-foreground: 240
|
|
61
|
-
--hsl-accent:
|
|
62
|
-
--hsl-accent-foreground: 240
|
|
57
|
+
--hsl-secondary: 240 5% 11%; /* #1a1a1d surface-2 */
|
|
58
|
+
--hsl-secondary-foreground: 240 6% 93%;
|
|
59
|
+
--hsl-muted: 240 5% 11%; /* #1a1a1d — neutral hover well */
|
|
60
|
+
--hsl-muted-foreground: 240 4% 62%; /* #9a9aa2 text-muted */
|
|
61
|
+
--hsl-accent: 240 5% 11%; /* neutral hover (indigo lives in accent-surface-strong) */
|
|
62
|
+
--hsl-accent-foreground: 240 6% 93%;
|
|
63
63
|
--hsl-destructive: 348 90% 60%;
|
|
64
64
|
--hsl-destructive-foreground: 0 0% 100%;
|
|
65
|
-
--hsl-border:
|
|
66
|
-
--hsl-input:
|
|
65
|
+
--hsl-border: 240 3% 13%; /* hairline ≈ rgba(255,255,255,0.07) */
|
|
66
|
+
--hsl-input: 240 5% 11%;
|
|
67
67
|
--hsl-ring: 239 84% 67%;
|
|
68
68
|
--hsl-success: 160 84% 39%;
|
|
69
69
|
--hsl-warning: 40 94% 56%;
|
|
@@ -94,21 +94,21 @@
|
|
|
94
94
|
--error: var(--hsl-destructive);
|
|
95
95
|
--info: var(--hsl-info);
|
|
96
96
|
|
|
97
|
-
/* Sidebar tokens */
|
|
98
|
-
--sidebar-background:
|
|
99
|
-
--sidebar-foreground: 240
|
|
97
|
+
/* Sidebar tokens — flat surface + hairline */
|
|
98
|
+
--sidebar-background: 240 5% 8%; /* #141416 surface */
|
|
99
|
+
--sidebar-foreground: 240 6% 93%;
|
|
100
100
|
--sidebar-primary: 239 84% 67%;
|
|
101
101
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
102
|
-
--sidebar-accent:
|
|
103
|
-
--sidebar-accent-foreground: 240
|
|
104
|
-
--sidebar-border:
|
|
102
|
+
--sidebar-accent: 240 5% 11%; /* neutral hover */
|
|
103
|
+
--sidebar-accent-foreground: 240 6% 93%;
|
|
104
|
+
--sidebar-border: 240 3% 13%; /* hairline */
|
|
105
105
|
--sidebar-ring: 239 84% 67%;
|
|
106
106
|
|
|
107
|
-
/* Depth scale —
|
|
108
|
-
--depth-1: #
|
|
109
|
-
--depth-2: #
|
|
110
|
-
--depth-3: #
|
|
111
|
-
--depth-4: #
|
|
107
|
+
/* Depth scale — flat neutral spine (Tangle Quiet) */
|
|
108
|
+
--depth-1: #0b0b0d;
|
|
109
|
+
--depth-2: #141416;
|
|
110
|
+
--depth-3: #1a1a1d;
|
|
111
|
+
--depth-4: #202023;
|
|
112
112
|
|
|
113
113
|
/* Status colors */
|
|
114
114
|
--status-running: #10B981;
|
|
@@ -152,36 +152,35 @@
|
|
|
152
152
|
--glass-border-hover: var(--border-default);
|
|
153
153
|
--glass-blur: 0px;
|
|
154
154
|
|
|
155
|
-
/* Mesh
|
|
156
|
-
--mesh-teal:
|
|
157
|
-
--mesh-violet:
|
|
158
|
-
--mesh-blue:
|
|
155
|
+
/* Mesh glows — quieted to off; chrome is flat in Tangle Quiet */
|
|
156
|
+
--mesh-teal: transparent;
|
|
157
|
+
--mesh-violet: transparent;
|
|
158
|
+
--mesh-blue: transparent;
|
|
159
159
|
|
|
160
|
-
/* Brand gradients —
|
|
160
|
+
/* Brand gradients — the indigo spark, kept ONLY for the logo mark + send button */
|
|
161
161
|
--tangle-gradient: linear-gradient(135deg, #6366F1, #818CF8);
|
|
162
162
|
--tangle-gradient-text: linear-gradient(135deg, #A5AAFC, #818CF8);
|
|
163
163
|
--accent-gradient-strong: linear-gradient(135deg, #6366F1, #818CF8);
|
|
164
|
-
|
|
165
|
-
--accent-surface-
|
|
166
|
-
--accent-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
linear-gradient(180deg, var(--depth-1), #0D0C1E 100%);
|
|
164
|
+
/* Accent wells — soft = hover neutral, strong = active/selected row (indigo) */
|
|
165
|
+
--accent-surface-soft: rgba(255, 255, 255, 0.04);
|
|
166
|
+
--accent-surface-strong: rgba(129, 140, 248, 0.14);
|
|
167
|
+
--accent-text: #b9bffb;
|
|
168
|
+
|
|
169
|
+
/* Surfaces — flat single-neutral (no radial mesh) */
|
|
170
|
+
--bg-root: #0b0b0d;
|
|
172
171
|
--bg-dark: var(--depth-1);
|
|
173
|
-
--bg-card:
|
|
174
|
-
--bg-elevated:
|
|
175
|
-
--bg-section:
|
|
176
|
-
--bg-input:
|
|
177
|
-
--bg-hover: rgba(
|
|
178
|
-
--bg-selection: rgba(
|
|
179
|
-
|
|
180
|
-
/* Text */
|
|
181
|
-
--text-primary:
|
|
182
|
-
--text-secondary:
|
|
183
|
-
--text-muted: #
|
|
184
|
-
--text-dim: #
|
|
172
|
+
--bg-card: var(--depth-2);
|
|
173
|
+
--bg-elevated: var(--depth-4);
|
|
174
|
+
--bg-section: var(--depth-1);
|
|
175
|
+
--bg-input: var(--depth-3);
|
|
176
|
+
--bg-hover: rgba(255, 255, 255, 0.04);
|
|
177
|
+
--bg-selection: rgba(129, 140, 248, 0.14);
|
|
178
|
+
|
|
179
|
+
/* Text — neutral */
|
|
180
|
+
--text-primary: #ececee;
|
|
181
|
+
--text-secondary: #c8c8cd;
|
|
182
|
+
--text-muted: #9a9aa2;
|
|
183
|
+
--text-dim: #6b6b73;
|
|
185
184
|
|
|
186
185
|
/* Brand accents — Tangle */
|
|
187
186
|
--brand-primary: #6366F1;
|
|
@@ -195,12 +194,12 @@
|
|
|
195
194
|
--brand-vibrant: #6366F1;
|
|
196
195
|
--brand-emerald: #10B981;
|
|
197
196
|
|
|
198
|
-
/* Borders */
|
|
199
|
-
--border-subtle: rgba(
|
|
200
|
-
--border-default: rgba(
|
|
201
|
-
--border-hover: rgba(
|
|
202
|
-
--border-accent: rgba(
|
|
203
|
-
--border-accent-hover: rgba(
|
|
197
|
+
/* Borders — neutral hairlines */
|
|
198
|
+
--border-subtle: rgba(255, 255, 255, 0.05);
|
|
199
|
+
--border-default: rgba(255, 255, 255, 0.07);
|
|
200
|
+
--border-hover: rgba(255, 255, 255, 0.12);
|
|
201
|
+
--border-accent: rgba(129, 140, 248, 0.20);
|
|
202
|
+
--border-accent-hover: rgba(129, 140, 248, 0.35);
|
|
204
203
|
|
|
205
204
|
/* Buttons */
|
|
206
205
|
--btn-primary-bg: #6366F1;
|
|
@@ -218,23 +217,24 @@
|
|
|
218
217
|
--code-comment: #606294;
|
|
219
218
|
--code-error: #FF4D6D;
|
|
220
219
|
|
|
221
|
-
/* Shadows */
|
|
222
|
-
--shadow-card: 0 1px
|
|
223
|
-
--shadow-dropdown: 0 8px
|
|
224
|
-
--shadow-glow:
|
|
225
|
-
--shadow-accent: 0 1px
|
|
226
|
-
--shadow-status-running:
|
|
227
|
-
--shadow-status-creating:
|
|
228
|
-
--shadow-status-error:
|
|
220
|
+
/* Shadows — flat, no inner ring, no indigo glow */
|
|
221
|
+
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
222
|
+
--shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
|
|
223
|
+
--shadow-glow: none;
|
|
224
|
+
--shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
225
|
+
--shadow-status-running: none;
|
|
226
|
+
--shadow-status-creating: none;
|
|
227
|
+
--shadow-status-error: none;
|
|
229
228
|
|
|
230
229
|
/* Radii */
|
|
231
230
|
--radius-sm: 6px;
|
|
232
231
|
--radius-md: 8px;
|
|
233
|
-
--radius-lg:
|
|
234
|
-
--radius-xl: 16px
|
|
232
|
+
--radius-lg: 10px;
|
|
233
|
+
--radius-xl: 12px; /* chrome stays tight (was 16px) */
|
|
235
234
|
--radius-pill: 999px;
|
|
236
235
|
--radius-full: 999px;
|
|
237
|
-
--radius:
|
|
236
|
+
--radius-composer: 26px; /* centered composer pill */
|
|
237
|
+
--radius: 0.5rem; /* 8px chrome default (was 10px) */
|
|
238
238
|
|
|
239
239
|
/* Density */
|
|
240
240
|
--control-height: 2.25rem;
|
|
@@ -247,10 +247,24 @@
|
|
|
247
247
|
--font-size-sm: 0.75rem; /* 12px — captions, meta */
|
|
248
248
|
--font-size-base: 0.9375rem; /* 15px — message body */
|
|
249
249
|
--font-size-lg: 1rem; /* 16px — emphasized text */
|
|
250
|
-
--font-size-xl: 1.25rem; /* 20px — section
|
|
250
|
+
--font-size-xl: 1.25rem; /* 20px — section title (h2) */
|
|
251
|
+
/* Display tier — page titles, marketing section heads, and heroes.
|
|
252
|
+
Hero sizes are fluid (clamp) so they scale with the viewport without
|
|
253
|
+
per-breakpoint overrides; the dense-app sizes above stay fixed. */
|
|
254
|
+
--font-size-2xl: 1.5rem; /* 24px — large section title */
|
|
255
|
+
--font-size-3xl: 1.875rem; /* 30px — page title (h1) */
|
|
256
|
+
--font-size-4xl: 2.25rem; /* 36px — compact marketing section head */
|
|
257
|
+
--font-size-hero: clamp(2rem, 1.2rem + 3.2vw, 3rem); /* 32→48px — secondary hero */
|
|
258
|
+
--font-size-display: clamp(2.5rem, 1.1rem + 5vw, 4rem); /* 40→64px — primary hero */
|
|
251
259
|
--line-height-tight: 1.3;
|
|
252
|
-
--line-height-base: 1.
|
|
253
|
-
--line-height-relaxed: 1.
|
|
260
|
+
--line-height-base: 1.6; /* tighter body rhythm (was 1.75) */
|
|
261
|
+
--line-height-relaxed: 1.75;
|
|
262
|
+
--line-height-display: 1.05; /* heroes — near-solid set */
|
|
263
|
+
--line-height-heading: 1.15; /* page/section titles */
|
|
264
|
+
/* Letter-spacing — titles tighten, eyebrows/labels open up */
|
|
265
|
+
--tracking-tight: -0.02em; /* display + page titles */
|
|
266
|
+
--tracking-snug: -0.01em; /* section titles */
|
|
267
|
+
--tracking-wide: 0.08em; /* uppercase eyebrows / stat labels */
|
|
254
268
|
|
|
255
269
|
/* Component spacing — override per-app for tighter/looser layouts */
|
|
256
270
|
--avatar-size: 2rem; /* 32px — chat avatars */
|
|
@@ -284,9 +298,9 @@
|
|
|
284
298
|
--transition-default: 0.16s ease;
|
|
285
299
|
--transition-medium: 0.24s ease;
|
|
286
300
|
|
|
287
|
-
/* Fonts */
|
|
288
|
-
--font-sans: "
|
|
289
|
-
--font-display: "
|
|
301
|
+
/* Fonts — unified on Inter (dark + light) */
|
|
302
|
+
--font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
303
|
+
--font-display: "Inter", "Geist", sans-serif;
|
|
290
304
|
--font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
291
305
|
}
|
|
292
306
|
|
|
@@ -336,34 +350,34 @@
|
|
|
336
350
|
--md3-inverse-on-surface: #f0f1f4;
|
|
337
351
|
--md3-surface-tint: #6366F1;
|
|
338
352
|
|
|
339
|
-
/* Semantic HSL bridge */
|
|
340
|
-
--hsl-background:
|
|
341
|
-
--hsl-foreground:
|
|
342
|
-
--hsl-card:
|
|
343
|
-
--hsl-card-foreground:
|
|
353
|
+
/* Semantic HSL bridge — flat neutral light (Tangle Quiet) */
|
|
354
|
+
--hsl-background: 0 0% 100%; /* #ffffff */
|
|
355
|
+
--hsl-foreground: 0 0% 5%; /* #0d0d0d */
|
|
356
|
+
--hsl-card: 240 7% 97%; /* #f7f7f8 surface */
|
|
357
|
+
--hsl-card-foreground: 0 0% 5%;
|
|
344
358
|
--hsl-popover: 0 0% 100%;
|
|
345
|
-
--hsl-popover-foreground:
|
|
346
|
-
--hsl-primary:
|
|
359
|
+
--hsl-popover-foreground: 0 0% 5%;
|
|
360
|
+
--hsl-primary: 245 62% 57%; /* #5B4ED4 light accent */
|
|
347
361
|
--hsl-primary-foreground: 0 0% 100%;
|
|
348
|
-
--hsl-secondary:
|
|
349
|
-
--hsl-secondary-foreground: 0 0%
|
|
350
|
-
--hsl-muted: 240
|
|
351
|
-
--hsl-muted-foreground: 240
|
|
352
|
-
--hsl-accent:
|
|
353
|
-
--hsl-accent-foreground:
|
|
362
|
+
--hsl-secondary: 240 6% 93%; /* #ececee surface-2 */
|
|
363
|
+
--hsl-secondary-foreground: 0 0% 10%;
|
|
364
|
+
--hsl-muted: 240 6% 93%; /* #ececee neutral hover */
|
|
365
|
+
--hsl-muted-foreground: 240 5% 38%; /* #5d5d66 text-muted */
|
|
366
|
+
--hsl-accent: 240 6% 93%; /* neutral hover */
|
|
367
|
+
--hsl-accent-foreground: 0 0% 10%;
|
|
354
368
|
--hsl-destructive: 0 72% 41%;
|
|
355
369
|
--hsl-destructive-foreground: 0 0% 100%;
|
|
356
|
-
--hsl-border:
|
|
357
|
-
--hsl-input:
|
|
358
|
-
--hsl-ring:
|
|
370
|
+
--hsl-border: 240 6% 89%; /* hairline ≈ rgba(0,0,0,0.08) */
|
|
371
|
+
--hsl-input: 240 6% 89%;
|
|
372
|
+
--hsl-ring: 245 62% 57%;
|
|
359
373
|
--hsl-success: 160 84% 30%;
|
|
360
374
|
--hsl-warning: 41 96% 50%;
|
|
361
375
|
--hsl-info: 212 80% 50%;
|
|
362
376
|
|
|
363
|
-
--depth-1: #
|
|
364
|
-
--depth-2: #
|
|
365
|
-
--depth-3: #
|
|
366
|
-
--depth-4: #
|
|
377
|
+
--depth-1: #ffffff;
|
|
378
|
+
--depth-2: #f7f7f8;
|
|
379
|
+
--depth-3: #ececee;
|
|
380
|
+
--depth-4: #e3e3e6;
|
|
367
381
|
|
|
368
382
|
--status-running: #059669;
|
|
369
383
|
--status-creating: #3E349E;
|
|
@@ -404,33 +418,34 @@
|
|
|
404
418
|
--surface-neutral-border: var(--border-subtle);
|
|
405
419
|
--surface-neutral-text: var(--text-muted);
|
|
406
420
|
|
|
407
|
-
/* Sidebar — light */
|
|
408
|
-
--sidebar-background:
|
|
409
|
-
--sidebar-foreground:
|
|
410
|
-
--sidebar-primary:
|
|
421
|
+
/* Sidebar — light, flat surface + hairline */
|
|
422
|
+
--sidebar-background: 240 7% 97%; /* #f7f7f8 surface */
|
|
423
|
+
--sidebar-foreground: 0 0% 5%;
|
|
424
|
+
--sidebar-primary: 245 62% 57%; /* #5B4ED4 */
|
|
411
425
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
412
|
-
--sidebar-accent: 240
|
|
413
|
-
--sidebar-accent-foreground:
|
|
414
|
-
--sidebar-border:
|
|
415
|
-
--sidebar-ring:
|
|
416
|
-
|
|
417
|
-
--mesh-teal:
|
|
418
|
-
--mesh-violet:
|
|
419
|
-
--mesh-blue:
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
--bg-
|
|
423
|
-
--bg-
|
|
424
|
-
--bg-
|
|
425
|
-
--bg-
|
|
426
|
-
--bg-
|
|
427
|
-
--bg-
|
|
428
|
-
--bg-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
--text-
|
|
432
|
-
--text-
|
|
433
|
-
--text-
|
|
426
|
+
--sidebar-accent: 240 6% 93%; /* neutral hover */
|
|
427
|
+
--sidebar-accent-foreground: 0 0% 10%;
|
|
428
|
+
--sidebar-border: 240 6% 89%; /* hairline */
|
|
429
|
+
--sidebar-ring: 245 62% 57%;
|
|
430
|
+
|
|
431
|
+
--mesh-teal: transparent;
|
|
432
|
+
--mesh-violet: transparent;
|
|
433
|
+
--mesh-blue: transparent;
|
|
434
|
+
|
|
435
|
+
/* Surfaces — flat single-neutral light */
|
|
436
|
+
--bg-root: #ffffff;
|
|
437
|
+
--bg-dark: #f7f7f8;
|
|
438
|
+
--bg-card: #f7f7f8;
|
|
439
|
+
--bg-elevated: #ffffff;
|
|
440
|
+
--bg-section: #f7f7f8;
|
|
441
|
+
--bg-input: #ececee;
|
|
442
|
+
--bg-hover: rgba(0, 0, 0, 0.04);
|
|
443
|
+
--bg-selection: rgba(91, 78, 212, 0.10);
|
|
444
|
+
|
|
445
|
+
--text-primary: #0d0d0d;
|
|
446
|
+
--text-secondary: #2a2a30;
|
|
447
|
+
--text-muted: #5d5d66;
|
|
448
|
+
--text-dim: #8e8e98;
|
|
434
449
|
|
|
435
450
|
--brand-primary: #6366F1;
|
|
436
451
|
--brand-strong: #2E2A5E;
|
|
@@ -443,16 +458,16 @@
|
|
|
443
458
|
--brand-vibrant: #6366F1;
|
|
444
459
|
--brand-emerald: #059669;
|
|
445
460
|
|
|
446
|
-
--border-subtle: rgba(
|
|
447
|
-
--border-default: rgba(
|
|
448
|
-
--border-hover: rgba(
|
|
449
|
-
--border-accent: rgba(
|
|
450
|
-
--border-accent-hover: rgba(
|
|
461
|
+
--border-subtle: rgba(0, 0, 0, 0.06);
|
|
462
|
+
--border-default: rgba(0, 0, 0, 0.08);
|
|
463
|
+
--border-hover: rgba(0, 0, 0, 0.13);
|
|
464
|
+
--border-accent: rgba(91, 78, 212, 0.18);
|
|
465
|
+
--border-accent-hover: rgba(91, 78, 212, 0.35);
|
|
451
466
|
|
|
452
|
-
--btn-primary-bg: #
|
|
467
|
+
--btn-primary-bg: #5B4ED4;
|
|
453
468
|
--btn-primary-hover: #4F46E5;
|
|
454
469
|
--btn-primary-text: #ffffff;
|
|
455
|
-
--btn-cta-bg: #
|
|
470
|
+
--btn-cta-bg: #5B4ED4;
|
|
456
471
|
--btn-cta-text: #ffffff;
|
|
457
472
|
|
|
458
473
|
--code-keyword: #3E349E;
|
|
@@ -463,30 +478,33 @@
|
|
|
463
478
|
--code-comment: #6B6E8A;
|
|
464
479
|
--code-error: #ba1a1a;
|
|
465
480
|
|
|
466
|
-
|
|
467
|
-
--shadow-
|
|
481
|
+
/* Shadows — flat, no inner ring, no glow */
|
|
482
|
+
--shadow-card: 0 1px 2px rgba(25, 28, 36, 0.06);
|
|
483
|
+
--shadow-dropdown: 0 8px 30px rgba(25, 28, 36, 0.10);
|
|
468
484
|
--shadow-glow: none;
|
|
469
|
-
--shadow-accent: 0 1px
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
--tangle-gradient
|
|
473
|
-
--
|
|
474
|
-
--accent-
|
|
475
|
-
--accent-surface-
|
|
485
|
+
--shadow-accent: 0 1px 2px rgba(25, 28, 36, 0.06);
|
|
486
|
+
|
|
487
|
+
/* Indigo spark kept for logo + send; accent-fill is the active row well */
|
|
488
|
+
--tangle-gradient: linear-gradient(135deg, #4F46E5, #5B4ED4);
|
|
489
|
+
--tangle-gradient-text: linear-gradient(135deg, #4F46E5, #5B4ED4);
|
|
490
|
+
--accent-gradient-strong: linear-gradient(135deg, #4F46E5, #5B4ED4);
|
|
491
|
+
--accent-surface-soft: rgba(0, 0, 0, 0.04);
|
|
492
|
+
--accent-surface-strong: rgba(91, 78, 212, 0.10);
|
|
476
493
|
--accent-text: #4F46E5;
|
|
477
494
|
|
|
478
|
-
/* Typography —
|
|
479
|
-
--font-sans: "Inter", "Geist", ui-sans-serif, system-ui, sans-serif;
|
|
480
|
-
--font-display: "
|
|
495
|
+
/* Typography — unified on Inter */
|
|
496
|
+
--font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
497
|
+
--font-display: "Inter", "Geist", sans-serif;
|
|
481
498
|
--font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
482
499
|
|
|
483
|
-
/*
|
|
484
|
-
--radius: 0.
|
|
485
|
-
--radius-sm:
|
|
486
|
-
--radius-md:
|
|
487
|
-
--radius-lg:
|
|
488
|
-
--radius-xl:
|
|
500
|
+
/* Radius — unified chrome scale (matches dark; 8px md) */
|
|
501
|
+
--radius: 0.5rem;
|
|
502
|
+
--radius-sm: 6px;
|
|
503
|
+
--radius-md: 8px;
|
|
504
|
+
--radius-lg: 10px;
|
|
505
|
+
--radius-xl: 12px;
|
|
489
506
|
--radius-pill: 999px;
|
|
490
507
|
--radius-full: 999px;
|
|
508
|
+
--radius-composer: 26px;
|
|
491
509
|
}
|
|
492
510
|
|