@brightweblabs/theme 0.2.1 → 0.3.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 (8) hide show
  1. package/README.md +38 -0
  2. package/package.json +1 -1
  3. package/src/base.css +1 -0
  4. package/src/surfaces.css +20 -25
  5. package/src/tokens.css +195 -0
  6. package/src/typography.css +35 -6
  7. package/themes/mq-aliases.css +28 -5
  8. package/themes/mq.css +32 -0
package/README.md ADDED
@@ -0,0 +1,38 @@
1
+ # `@brightweblabs/theme` token contract
2
+
3
+ BrightWeb themes follow one cascade: L0 brand primitives feed L1 shadcn semantics, L2 describes brand-agnostic states, and L3 exposes component and experience controls. Package components consume L1-L3 tokens only; theme files such as `themes/mq.css` override values without changing component code.
4
+
5
+ ## L3 visual tokens
6
+
7
+ | Tokens | Purpose |
8
+ | --- | --- |
9
+ | `--text-ui-chip`, `--text-ui-action`, `--text-ui-calendar` | Compact control and calendar type sizes. |
10
+ | `--text-ui-shell-title`, `--text-ui-report-title`, `--text-ui-report-title-lg`, `--text-ui-report-metric` | Shell and CRM report display type sizes. |
11
+ | `--surface-overlay`, `--surface-overlay-strong`, `--surface-tooltip`, `--surface-badge-tint` | Overlay, tooltip, and tint surfaces. |
12
+ | `--surface-button-soft`, `--surface-button-soft-hover`, `--border-button-soft-hover` | Soft button surface states. |
13
+ | `--surface-selection`, `--border-selection`, `--surface-pagination-active`, `--border-pagination-active` | Selected control and active pagination states. |
14
+ | `--surface-danger-subtle` | Subtle destructive-state background. |
15
+ | `--surface-account-team`, `--surface-account-client`, `--surface-account`, `--surface-account-hover`, `--account-presence` | Account rail identity, presence, and interaction surfaces. |
16
+ | `--account-presence-size`, `--radius-swatch`, `--radius-pill`, `--radius-scrollbar` | Presence, swatch, pill, avatar, and scrollbar geometry. |
17
+ | `--row-hover-sweep`, `--surface-status-success`, `--surface-status-warning`, `--surface-status-danger` | Shared row and status surfaces. |
18
+ | `--tint-soft-border`, `--tint-soft-bg`, `--tint-soft-hover`, `--tint-hero-border`, `--tint-hero-bg`, `--tint-hero-fg`, `--tint-hero-hover` | Dynamic tint recipes resolved where a component supplies `--tint`. |
19
+ | `--scrollbar-thumb`, `--scrollbar-thumb-hover`, `--scrollbar-size` | Shared scrollbar colour and geometry. |
20
+ | `--toast-success-bg`, `--toast-success-border`, `--toast-warning-bg`, `--toast-warning-text`, `--toast-warning-border`, `--toast-error-bg`, `--toast-error-border`, `--toast-info-bg`, `--toast-info-text`, `--toast-info-border` | Sonner semantic toast palette. |
21
+ | `--shadow-accent-control`, `--shadow-toolbar-control`, `--shadow-toolbar-popover`, `--shadow-tooltip`, `--shadow-dialog`, `--shadow-phone-dropdown` | Component elevation recipes. |
22
+ | `--report-hero-glow`, `--report-hero-rule` | CRM report decorative surfaces. |
23
+ | `--shell-frame-offset`, `--shell-sidebar-width`, `--shell-sidebar-collapsed-width`, `--shell-sidebar-toggle-offset`, `--shell-sidebar-toggle-size`, `--shell-sidebar-toggle-inset`, `--shell-brand-height` | Shell frame and sidebar geometry. |
24
+ | `--shell-nav-item-height`, `--shell-nav-item-collapsed-size`, `--shell-nav-icon-well-size`, `--shell-nav-icon-radius`, `--shell-nav-icon-size`, `--shell-nav-divider-width`, `--shell-nav-child-height`, `--shell-nav-child-enter-offset` | Shell navigation sizing and entry geometry. |
25
+ | `--shell-nav-active-indicator-inset`, `--shell-nav-active-indicator-collapsed-inset`, `--shell-nav-active-indicator-width`, `--shell-nav-active-indicator-offset`, `--shell-nav-context-dot-size`, `--shell-nav-context-dot-offset`, `--shell-nav-context-dot-border` | Shell navigation active markers. |
26
+ | `--shell-header-divider-height`, `--shell-account-gap`, `--shell-account-padding-y` | Header and account-control anatomy. |
27
+ | `--shell-surface-border`, `--shell-surface-hover`, `--shell-surface-active`, `--shell-hairline`, `--shell-icon-bg`, `--shell-group-open`, `--shell-shadow`, `--shell-background`, `--shell-sidebar-background` | Shell surfaces and elevation. |
28
+ | `--shell-control-muted`, `--shell-nav-foreground`, `--shell-nav-active-border`, `--shell-nav-active-icon-bg`, `--shell-nav-active-icon-fg`, `--shell-nav-context-icon-bg`, `--shell-nav-context-icon-fg` | Shell control and navigation colours. |
29
+ | `--shell-nav-child-fg`, `--shell-nav-child-icon-fg`, `--shell-nav-child-active-bg`, `--shell-nav-child-active-border`, `--shell-navbar-fg`, `--shell-navbar-muted`, `--shell-navbar-hairline` | Child-navigation and header colours. |
30
+ | `--toolbar-popover-width`, `--toolbar-chip-height`, `--toolbar-search-min-width`, `--toolbar-icon-size`, `--radius-toolbar-popover` | Shared CRM toolbar geometry. |
31
+ | `--crm-sidebar-gap`, `--crm-report-copy-max-width`, `--crm-report-metric-min-width`, `--report-stat-min-width` | CRM dashboard and report layout. |
32
+ | `--timeline-list-inset`, `--timeline-line-offset`, `--timeline-marker-offset` | Timeline anatomy. |
33
+ | `--table-header-height`, `--table-cell-padding-x`, `--table-cell-padding-y`, `--crm-table-viewport-offset`, `--crm-table-min-height`, `--crm-table-empty-min-height` | Table row anatomy and CRM viewport sizing. |
34
+ | `--dialog-width`, `--sheet-width`, `--crm-sheet-width`, `--menu-min-width`, `--chart-tooltip-min-width` | Overlay and floating-surface geometry. |
35
+ | `--skeleton-line-height`, `--skeleton-line-height-lg`, `--skeleton-line-height-compact`, `--skeleton-line-height-xs` | Skeleton text-line anatomy. |
36
+ | `--section-icon-size`, `--surface-enter-offset`, `--space-eyebrow-y` | Shared surface icon, entrance, and eyebrow geometry. |
37
+
38
+ All tokens above have neutral defaults in `src/tokens.css`. Values that are derived from semantic tokens automatically follow `themes/mq.css`; a direct MQ declaration is needed only when MQ intentionally differs from the neutral default. `themes/mq-aliases.css` remains the compatibility layer for legacy MQ primitive and typography names.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@brightweblabs/theme",
3
3
  "private": false,
4
- "version": "0.2.1",
4
+ "version": "0.3.0",
5
5
  "main": "./src/tint.ts",
6
6
  "types": "./src/tint.ts",
7
7
  "files": [
package/src/base.css CHANGED
@@ -5,6 +5,7 @@
5
5
  ::before,
6
6
  ::after {
7
7
  box-sizing: border-box;
8
+ border-color: var(--border);
8
9
  }
9
10
 
10
11
  html,
package/src/surfaces.css CHANGED
@@ -31,12 +31,7 @@
31
31
  border-radius: var(--radius-card);
32
32
  opacity: 0;
33
33
  transition: opacity 300ms ease;
34
- background: linear-gradient(
35
- 90deg,
36
- transparent,
37
- color-mix(in srgb, var(--row-sweep-tint, var(--foreground)) 9%, transparent) 50%,
38
- transparent
39
- );
34
+ background: var(--row-hover-sweep);
40
35
  }
41
36
 
42
37
  .group:hover > .row-hover-sweep,
@@ -47,34 +42,34 @@
47
42
  /* ── Canonical tinted-pill recipes ────────────────────────────────────── */
48
43
  @layer components {
49
44
  .tint-soft {
50
- border-color: color-mix(in srgb, var(--tint) 34%, transparent);
51
- background-color: color-mix(in srgb, var(--tint) 10%, var(--card));
45
+ border-color: var(--tint-soft-border);
46
+ background-color: var(--tint-soft-bg);
52
47
  color: var(--tint-strong);
53
48
  }
54
49
 
55
50
  .tint-soft:hover {
56
- background-color: color-mix(in srgb, var(--tint) 14%, var(--card));
51
+ background-color: var(--tint-soft-hover);
57
52
  }
58
53
 
59
54
  .tint-hero {
60
- border-color: color-mix(in srgb, var(--tint) 46%, transparent);
61
- background-color: color-mix(in srgb, var(--tint) 16%, transparent);
62
- color: color-mix(in srgb, var(--tint) 18%, white);
55
+ border-color: var(--tint-hero-border);
56
+ background-color: var(--tint-hero-bg);
57
+ color: var(--tint-hero-fg);
63
58
  }
64
59
 
65
60
  .tint-hero:hover {
66
- background-color: color-mix(in srgb, var(--tint) 24%, transparent);
61
+ background-color: var(--tint-hero-hover);
67
62
  }
68
63
  }
69
64
 
70
65
  .section-icon {
71
66
  display: flex;
72
- width: 1.875rem;
73
- height: 1.875rem;
67
+ width: var(--section-icon-size);
68
+ height: var(--section-icon-size);
74
69
  flex-shrink: 0;
75
70
  align-items: center;
76
71
  justify-content: center;
77
- border-radius: 999px;
72
+ border-radius: var(--radius-pill);
78
73
  background: var(--muted);
79
74
  color: var(--muted-foreground);
80
75
  }
@@ -87,7 +82,7 @@
87
82
  @keyframes surface-fade-in {
88
83
  from {
89
84
  opacity: 0;
90
- transform: translateY(10px);
85
+ transform: translateY(var(--surface-enter-offset));
91
86
  }
92
87
  to {
93
88
  opacity: 1;
@@ -139,8 +134,8 @@
139
134
  .eyebrow {
140
135
  display: inline-flex;
141
136
  width: fit-content;
142
- padding: 6px 10px;
143
- border-radius: 999px;
137
+ padding: var(--space-eyebrow-y) var(--radius-control);
138
+ border-radius: var(--radius-pill);
144
139
  background: var(--brand-surface-tint);
145
140
  color: var(--brand-accent);
146
141
  font-size: var(--text-ui-label);
@@ -152,24 +147,24 @@
152
147
  .status {
153
148
  display: inline-flex;
154
149
  align-items: center;
155
- gap: 8px;
156
- padding: 8px 12px;
157
- border-radius: 999px;
150
+ gap: var(--space-xs);
151
+ padding: var(--space-xs) var(--space-sm);
152
+ border-radius: var(--radius-pill);
158
153
  font-size: var(--text-ui-meta);
159
154
  font-weight: var(--font-weight-bold);
160
155
  }
161
156
 
162
157
  .status.ok {
163
- background: color-mix(in srgb, var(--semantic-success) 14%, transparent);
158
+ background: var(--surface-status-success);
164
159
  color: var(--semantic-success-strong);
165
160
  }
166
161
 
167
162
  .status.warn {
168
- background: color-mix(in srgb, var(--semantic-warning) 14%, transparent);
163
+ background: var(--surface-status-warning);
169
164
  color: var(--semantic-warning-strong);
170
165
  }
171
166
 
172
167
  .status.error {
173
- background: color-mix(in srgb, var(--semantic-danger) 12%, transparent);
168
+ background: var(--surface-status-danger);
174
169
  color: var(--semantic-danger-strong);
175
170
  }
package/src/tokens.css CHANGED
@@ -85,10 +85,15 @@
85
85
  --radius-control: 0.625rem;
86
86
  --radius-card: 0.75rem;
87
87
  --radius-panel: 1rem;
88
+ --radius-swatch: 0.125rem;
89
+ --radius-pill: 999px;
90
+ --radius-scrollbar: 9999px;
88
91
 
89
92
  --text-ui-micro: 0.625rem;
90
93
  --text-ui-label: 0.6875rem;
91
94
  --text-ui-meta: 0.75rem;
95
+ --text-ui-chip: 0.78125rem;
96
+ --text-ui-action: 0.8125rem;
92
97
  --text-ui-body: 0.875rem;
93
98
  --text-ui-card-title: 0.9375rem;
94
99
  --text-ui-subhead: 1.125rem;
@@ -96,9 +101,29 @@
96
101
  --text-ui-heading: 1.5rem;
97
102
  --text-ui-title-sm: 1.875rem;
98
103
  --text-ui-title: clamp(1.75rem, 1.6rem + 0.7vw, 2rem);
104
+ --text-ui-shell-title: 1.3125rem;
105
+ --text-ui-report-title: 1.75rem;
106
+ --text-ui-report-title-lg: 2.25rem;
107
+ --text-ui-calendar: 0.8rem;
108
+ --text-ui-report-metric: 2.5rem;
99
109
  --text-ui-metric: 2.75rem;
100
110
  --text-ui-metric-xl: 3.5rem;
101
111
  --text-ui-metric-display: var(--text-ui-metric);
112
+ --portal-text-micro: 0.625rem;
113
+ --portal-text-label: 0.6875rem;
114
+ --portal-text-meta: 0.75rem;
115
+ --portal-text-body: 0.875rem;
116
+ --portal-text-card-title: 0.9375rem;
117
+ --portal-text-subhead: 1.125rem;
118
+ --portal-text-panel: 1.25rem;
119
+ --portal-text-heading: 1.5rem;
120
+ --portal-text-title-sm: 1.875rem;
121
+ --portal-text-title: clamp(1.75rem, 1.6rem + 0.7vw, 2rem);
122
+ --portal-text-metric: 2.75rem;
123
+ --portal-text-metric-lg: 3.5rem;
124
+ --type-paragraph-large: 1.09375rem;
125
+ --type-paragraph-small: 0.875rem;
126
+ --type-paragraph-mini: 0.75rem;
102
127
 
103
128
  --elevate-1: color-mix(in srgb, var(--foreground) 3%, transparent);
104
129
  --elevate-2: color-mix(in srgb, var(--foreground) 5%, transparent);
@@ -109,6 +134,131 @@
109
134
  --border-hairline-soft: color-mix(in srgb, var(--foreground) 12%, transparent);
110
135
  --border-strong: color-mix(in srgb, var(--foreground) 24%, transparent);
111
136
  --surface-hover: color-mix(in srgb, var(--foreground) 4%, var(--card) 96%);
137
+ --surface-overlay: color-mix(in srgb, var(--foreground) 50%, transparent);
138
+ --surface-overlay-strong: color-mix(in srgb, var(--foreground) 55%, transparent);
139
+ --surface-tooltip: color-mix(in srgb, var(--popover) 95%, transparent);
140
+ --surface-badge-tint: color-mix(in srgb, currentColor 14%, transparent);
141
+ --surface-button-soft: color-mix(in srgb, var(--foreground) 3.5%, var(--card));
142
+ --surface-button-soft-hover: color-mix(in srgb, var(--foreground) 7%, var(--card));
143
+ --border-button-soft-hover: color-mix(in srgb, var(--foreground) 16%, transparent);
144
+ --surface-selection: color-mix(in srgb, var(--accent) 12%, var(--card));
145
+ --border-selection: color-mix(in srgb, var(--accent) 40%, var(--hairline));
146
+ --surface-pagination-active: color-mix(in srgb, var(--accent) 10%, var(--card));
147
+ --border-pagination-active: color-mix(in srgb, var(--accent) 36%, transparent);
148
+ --surface-danger-subtle: color-mix(in srgb, var(--semantic-danger) 10%, transparent);
149
+ --surface-account-team: color-mix(in srgb, var(--role-team) 20%, var(--card));
150
+ --surface-account-client: color-mix(in srgb, var(--role-client) 20%, var(--card));
151
+ --surface-account: color-mix(in srgb, var(--foreground) 3%, var(--card) 97%);
152
+ --surface-account-hover: color-mix(in srgb, var(--foreground) 5%, transparent);
153
+ --account-presence: #10b981;
154
+ --account-presence-size: 0.625rem;
155
+ --surface-status-success: color-mix(in srgb, var(--semantic-success) 14%, transparent);
156
+ --surface-status-warning: color-mix(in srgb, var(--semantic-warning) 14%, transparent);
157
+ --surface-status-danger: color-mix(in srgb, var(--semantic-danger) 12%, transparent);
158
+ --scrollbar-thumb: color-mix(in srgb, var(--foreground) 18%, transparent);
159
+ --scrollbar-thumb-hover: color-mix(in srgb, var(--foreground) 30%, transparent);
160
+
161
+ --toast-success-bg: color-mix(in srgb, var(--primary) 12%, var(--background));
162
+ --toast-success-border: color-mix(in srgb, var(--primary) 30%, var(--background));
163
+ --toast-warning-bg: color-mix(in srgb, var(--accent) 12%, var(--background));
164
+ --toast-warning-text: color-mix(in srgb, var(--accent) 80%, var(--foreground));
165
+ --toast-warning-border: color-mix(in srgb, var(--accent) 30%, var(--background));
166
+ --toast-error-bg: color-mix(in srgb, var(--destructive) 12%, var(--background));
167
+ --toast-error-border: color-mix(in srgb, var(--destructive) 30%, var(--background));
168
+ --toast-info-bg: color-mix(in srgb, var(--secondary) 15%, var(--background));
169
+ --toast-info-text: color-mix(in srgb, var(--secondary) 70%, var(--foreground));
170
+ --toast-info-border: color-mix(in srgb, var(--secondary) 30%, var(--background));
171
+
172
+ --shadow-accent-control: 0 4px 14px color-mix(in srgb, var(--brand-accent) 26%, transparent);
173
+ --shadow-toolbar-control: 0 4px 14px rgba(91, 197, 242, 0.26);
174
+ --shadow-toolbar-popover: 0 18px 44px rgba(10, 21, 26, 0.16), 0 2px 10px rgba(10, 21, 26, 0.08);
175
+ --shadow-tooltip: 0 14px 34px var(--elevate-3);
176
+ --shadow-dialog: 0 24px 64px var(--elevate-3);
177
+ --shadow-phone-dropdown: 0 12px 28px var(--elevate-3);
178
+
179
+ --report-hero-glow: radial-gradient(circle, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%);
180
+ --report-hero-rule: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent), transparent);
181
+
182
+ --shell-frame-offset: 0.75rem;
183
+ --shell-sidebar-width: 15rem;
184
+ --shell-sidebar-collapsed-width: 4rem;
185
+ --shell-sidebar-toggle-offset: 3.25rem;
186
+ --shell-sidebar-toggle-size: 1.625rem;
187
+ --shell-sidebar-toggle-inset: -0.8125rem;
188
+ --shell-brand-height: 2.25rem;
189
+ --shell-nav-item-height: 2.625rem;
190
+ --shell-nav-item-collapsed-size: 2.75rem;
191
+ --shell-nav-icon-well-size: 1.6875rem;
192
+ --shell-nav-icon-radius: 0.5rem;
193
+ --shell-nav-icon-size: 0.9375rem;
194
+ --shell-nav-divider-width: 2.25rem;
195
+ --shell-nav-child-height: 2.25rem;
196
+ --shell-nav-child-enter-offset: 0.25rem;
197
+ --shell-nav-active-indicator-inset: 0.5625rem;
198
+ --shell-nav-active-indicator-collapsed-inset: 0.6875rem;
199
+ --shell-nav-active-indicator-width: 0.1875rem;
200
+ --shell-nav-active-indicator-offset: -0.0625rem;
201
+ --shell-nav-context-dot-size: 0.5rem;
202
+ --shell-nav-context-dot-offset: -0.1875rem;
203
+ --shell-nav-context-dot-border: 0.125rem;
204
+ --shell-header-divider-height: 1.25rem;
205
+ --shell-account-gap: 0.6875rem;
206
+ --shell-account-padding-y: 0.4375rem;
207
+ --shell-surface-border: color-mix(in srgb, var(--foreground) 10%, transparent);
208
+ --shell-surface-hover: color-mix(in srgb, var(--card) 78%, var(--foreground) 3%);
209
+ --shell-surface-active: color-mix(in srgb, var(--accent) 11%, var(--card) 89%);
210
+ --shell-hairline: color-mix(in srgb, var(--foreground) 7%, transparent);
211
+ --shell-icon-bg: color-mix(in srgb, var(--foreground) 4.5%, var(--card) 95.5%);
212
+ --shell-group-open: color-mix(in srgb, var(--foreground) 2.6%, transparent);
213
+ --shell-shadow: 0 16px 38px rgba(10, 21, 26, 0.06), 0 2px 10px rgba(10, 21, 26, 0.04);
214
+ --shell-background: #f4f8fb;
215
+ --shell-sidebar-background: linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, white 6%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 100%);
216
+ --shell-control-muted: color-mix(in srgb, var(--foreground) 58%, transparent);
217
+ --shell-nav-foreground: color-mix(in srgb, var(--foreground) 70%, transparent);
218
+ --shell-nav-active-border: color-mix(in srgb, var(--accent) 28%, var(--shell-surface-border));
219
+ --shell-nav-active-icon-bg: color-mix(in srgb, var(--accent) 18%, var(--card) 82%);
220
+ --shell-nav-active-icon-fg: color-mix(in srgb, var(--accent) 82%, black 18%);
221
+ --shell-nav-context-icon-bg: color-mix(in srgb, var(--accent) 16%, var(--card) 84%);
222
+ --shell-nav-context-icon-fg: color-mix(in srgb, var(--accent) 80%, black 20%);
223
+ --shell-nav-child-fg: color-mix(in srgb, var(--foreground) 64%, transparent);
224
+ --shell-nav-child-icon-fg: color-mix(in srgb, var(--foreground) 48%, transparent);
225
+ --shell-nav-child-active-bg: color-mix(in srgb, var(--accent) 13%, var(--card) 87%);
226
+ --shell-nav-child-active-border: color-mix(in srgb, var(--accent) 26%, var(--shell-surface-border));
227
+ --shell-navbar-fg: #0a151a;
228
+ --shell-navbar-muted: #8e8f9a;
229
+ --shell-navbar-hairline: color-mix(in srgb, #0a151a 8%, transparent);
230
+
231
+ --toolbar-popover-width: 18.75rem;
232
+ --toolbar-chip-height: 1.875rem;
233
+ --toolbar-search-min-width: 13.125rem;
234
+ --toolbar-icon-size: 0.9375rem;
235
+ --radius-toolbar-popover: 0.875rem;
236
+ --crm-sidebar-gap: 1.125rem;
237
+ --crm-report-copy-max-width: 34rem;
238
+ --crm-report-metric-min-width: 6.5rem;
239
+ --timeline-list-inset: 0.625rem;
240
+ --timeline-line-offset: 0.28125rem;
241
+ --timeline-marker-offset: 0.3125rem;
242
+ --table-header-height: 2.25rem;
243
+ --table-cell-padding-x: 1rem;
244
+ --table-cell-padding-y: 0.5rem;
245
+ --crm-table-viewport-offset: 12rem;
246
+ --crm-table-min-height: 35rem;
247
+ --crm-table-empty-min-height: 26.25rem;
248
+ --report-stat-min-width: 9rem;
249
+ --dialog-width: 28rem;
250
+ --sheet-width: 24rem;
251
+ --crm-sheet-width: 32rem;
252
+ --menu-min-width: 8rem;
253
+ --chart-tooltip-min-width: 8rem;
254
+ --skeleton-line-height: 0.6rem;
255
+ --skeleton-line-height-lg: 0.7rem;
256
+ --skeleton-line-height-compact: 0.55rem;
257
+ --skeleton-line-height-xs: 0.5rem;
258
+ --section-icon-size: 1.875rem;
259
+ --surface-enter-offset: 0.625rem;
260
+ --space-eyebrow-y: 0.375rem;
261
+ --scrollbar-size: 0.375rem;
112
262
 
113
263
  --skeleton: color-mix(in srgb, var(--foreground) 7%, transparent);
114
264
  --skeleton-strong: color-mix(in srgb, var(--foreground) 11%, transparent);
@@ -143,6 +293,18 @@
143
293
  --brand-panel-muted: color-mix(in srgb, var(--brand-white) 68%, transparent);
144
294
  --brand-panel-subtle: color-mix(in srgb, var(--brand-white) 48%, transparent);
145
295
  --brand-panel-border: color-mix(in srgb, var(--brand-accent) 22%, transparent);
296
+ --project-surface-primary: var(--card);
297
+ --project-surface-secondary: color-mix(in srgb, var(--foreground) 2%, var(--card) 98%);
298
+ --project-surface-item: color-mix(in srgb, var(--card) 96%, transparent);
299
+ --project-surface-hero: color-mix(in srgb, var(--accent) 8%, var(--card) 92%);
300
+ --project-surface-hero-border: color-mix(in srgb, var(--accent) 26%, var(--foreground) 8%);
301
+ --project-hero-surface: var(--brand-panel-surface);
302
+ --project-hero-surface-raised: var(--brand-panel-surface-raised);
303
+ --project-hero-foreground: var(--brand-panel-foreground);
304
+ --project-hero-muted: var(--brand-panel-muted);
305
+ --project-hero-subtle: var(--brand-panel-subtle);
306
+ --project-hero-border: var(--brand-panel-border);
307
+ --project-surface-padding: 1.25rem;
146
308
  --row-sweep-tint: var(--foreground);
147
309
  --surface-card: color-mix(in srgb, var(--foreground) 2%, var(--card) 98%);
148
310
  --surface-card-light: var(--card);
@@ -150,6 +312,26 @@
150
312
  --stat-cell-padding: 1rem;
151
313
  }
152
314
 
315
+ /* Dynamic tint recipes resolve where components provide --tint. */
316
+ @layer components {
317
+ .row-hover-sweep {
318
+ --row-hover-sweep: linear-gradient(90deg, transparent, color-mix(in srgb, var(--row-sweep-tint, var(--foreground)) 9%, transparent) 50%, transparent);
319
+ }
320
+
321
+ .tint-soft {
322
+ --tint-soft-border: color-mix(in srgb, var(--tint) 34%, transparent);
323
+ --tint-soft-bg: color-mix(in srgb, var(--tint) 10%, var(--card));
324
+ --tint-soft-hover: color-mix(in srgb, var(--tint) 14%, var(--card));
325
+ }
326
+
327
+ .tint-hero {
328
+ --tint-hero-border: color-mix(in srgb, var(--tint) 46%, transparent);
329
+ --tint-hero-bg: color-mix(in srgb, var(--tint) 16%, transparent);
330
+ --tint-hero-fg: color-mix(in srgb, var(--tint) 18%, white);
331
+ --tint-hero-hover: color-mix(in srgb, var(--tint) 24%, transparent);
332
+ }
333
+ }
334
+
153
335
  /* Dark mode redefines the primitives and semantic base before re-deriving L1. */
154
336
  :root.dark,
155
337
  :root[data-theme="dark"],
@@ -235,6 +417,19 @@
235
417
  --brand-panel-surface-raised: color-mix(in srgb, var(--card) 72%, var(--brand-accent));
236
418
  --surface-card: color-mix(in srgb, var(--foreground) 2%, var(--card) 98%);
237
419
  --surface-card-light: color-mix(in srgb, var(--card) 92%, var(--brand-white) 8%);
420
+
421
+ --shell-surface-border: rgba(255, 255, 255, 0.11);
422
+ --shell-surface-hover: rgba(19, 37, 52, 0.96);
423
+ --shell-surface-active: rgba(24, 62, 82, 0.82);
424
+ --shell-hairline: rgba(255, 255, 255, 0.08);
425
+ --shell-icon-bg: rgba(255, 255, 255, 0.055);
426
+ --shell-group-open: rgba(255, 255, 255, 0.025);
427
+ --shell-shadow: 0 22px 46px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
428
+ --shell-background: #06121b;
429
+ --shell-sidebar-background: linear-gradient(180deg, rgba(7, 18, 28, 0.92) 0%, rgba(10, 23, 33, 0.94) 100%);
430
+ --shell-navbar-fg: #f6fbff;
431
+ --shell-navbar-muted: #8da3b0;
432
+ --shell-navbar-hairline: rgba(255, 255, 255, 0.08);
238
433
  }
239
434
 
240
435
  /* Explicit light scope wins when a theme class/attribute is toggled at runtime. */
package/src/typography.css CHANGED
@@ -32,6 +32,35 @@
32
32
  color: var(--muted-foreground);
33
33
  }
34
34
 
35
+ /* Size-only utilities for component recipes that supply their own weight and rhythm. */
36
+ @utility text-ui-chip {
37
+ font-size: var(--text-ui-chip);
38
+ }
39
+
40
+ @utility text-ui-action {
41
+ font-size: var(--text-ui-action);
42
+ }
43
+
44
+ @utility text-ui-calendar {
45
+ font-size: var(--text-ui-calendar);
46
+ }
47
+
48
+ @utility text-ui-shell-title {
49
+ font-size: var(--text-ui-shell-title);
50
+ }
51
+
52
+ @utility text-ui-report-title {
53
+ font-size: var(--text-ui-report-title);
54
+ }
55
+
56
+ @utility text-ui-report-title-lg {
57
+ font-size: var(--text-ui-report-title-lg);
58
+ }
59
+
60
+ @utility text-ui-report-metric {
61
+ font-size: var(--text-ui-report-metric);
62
+ }
63
+
35
64
  @utility text-ui-body {
36
65
  font-family: var(--font-body), sans-serif;
37
66
  font-size: var(--text-ui-body);
@@ -130,20 +159,20 @@
130
159
  overflow-y: overlay;
131
160
  overflow-x: hidden;
132
161
  scrollbar-width: thin;
133
- scrollbar-color: color-mix(in srgb, var(--foreground) 18%, transparent) transparent;
162
+ scrollbar-color: var(--scrollbar-thumb) transparent;
134
163
 
135
164
  &::-webkit-scrollbar {
136
- width: 6px;
137
- height: 6px;
165
+ width: var(--scrollbar-size);
166
+ height: var(--scrollbar-size);
138
167
  }
139
168
  &::-webkit-scrollbar-track {
140
169
  background: transparent;
141
170
  }
142
171
  &::-webkit-scrollbar-thumb {
143
- background-color: color-mix(in srgb, var(--foreground) 18%, transparent);
144
- border-radius: 9999px;
172
+ background-color: var(--scrollbar-thumb);
173
+ border-radius: var(--radius-scrollbar);
145
174
  }
146
175
  &::-webkit-scrollbar-thumb:hover {
147
- background-color: color-mix(in srgb, var(--foreground) 30%, transparent);
176
+ background-color: var(--scrollbar-thumb-hover);
148
177
  }
149
178
  }
package/themes/mq-aliases.css CHANGED
@@ -125,15 +125,38 @@
125
125
  overflow-y: overlay;
126
126
  overflow-x: hidden;
127
127
  scrollbar-width: thin;
128
- scrollbar-color: color-mix(in srgb, var(--foreground) 18%, transparent) transparent;
128
+ scrollbar-color: var(--scrollbar-thumb) transparent;
129
129
 
130
- &::-webkit-scrollbar { width: 6px; height: 6px; }
130
+ &::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
131
131
  &::-webkit-scrollbar-track { background: transparent; }
132
132
  &::-webkit-scrollbar-thumb {
133
- background-color: color-mix(in srgb, var(--foreground) 18%, transparent);
134
- border-radius: 9999px;
133
+ background-color: var(--scrollbar-thumb);
134
+ border-radius: var(--radius-scrollbar);
135
135
  }
136
136
  &::-webkit-scrollbar-thumb:hover {
137
- background-color: color-mix(in srgb, var(--foreground) 30%, transparent);
137
+ background-color: var(--scrollbar-thumb-hover);
138
138
  }
139
139
  }
140
+
141
+ .paragraph-large,
142
+ .paragraph-small,
143
+ .paragraph-mini {
144
+ font-family: var(--font-body), sans-serif;
145
+ font-weight: var(--font-weight-regular);
146
+ color: var(--foreground);
147
+ }
148
+
149
+ .paragraph-large {
150
+ font-size: var(--type-paragraph-large);
151
+ line-height: 1.55;
152
+ }
153
+
154
+ .paragraph-small {
155
+ font-size: var(--type-paragraph-small);
156
+ line-height: 1.5;
157
+ }
158
+
159
+ .paragraph-mini {
160
+ font-size: var(--type-paragraph-mini);
161
+ line-height: 1.45;
162
+ }
package/themes/mq.css CHANGED
@@ -59,6 +59,18 @@
59
59
  --brand-panel-muted: rgba(246, 251, 255, 0.66);
60
60
  --brand-panel-subtle: rgba(246, 251, 255, 0.46);
61
61
  --brand-panel-border: rgba(145, 211, 241, 0.2);
62
+ --project-surface-primary: var(--card);
63
+ --project-surface-secondary: color-mix(in srgb, var(--foreground) 2%, var(--card) 98%);
64
+ --project-surface-item: color-mix(in srgb, var(--card) 96%, transparent);
65
+ --project-surface-hero: color-mix(in srgb, var(--accent) 8%, var(--card) 92%);
66
+ --project-surface-hero-border: color-mix(in srgb, var(--accent) 26%, var(--foreground) 8%);
67
+ --project-hero-surface: linear-gradient(158deg, #02070d 0%, #06111c 30%, #071d2b 63%, #123747 100%);
68
+ --project-hero-surface-raised: #0b2634;
69
+ --project-hero-foreground: #f6fbff;
70
+ --project-hero-muted: rgba(246, 251, 255, 0.66);
71
+ --project-hero-subtle: rgba(246, 251, 255, 0.46);
72
+ --project-hero-border: rgba(145, 211, 241, 0.2);
73
+ --project-surface-padding: 1.25rem;
62
74
  }
63
75
 
64
76
  :root.dark,
@@ -137,6 +149,17 @@
137
149
  --brand-panel-muted: rgba(246, 251, 255, 0.66);
138
150
  --brand-panel-subtle: rgba(246, 251, 255, 0.46);
139
151
  --brand-panel-border: color-mix(in srgb, var(--accent) 20%, transparent);
152
+ --project-surface-primary: var(--card);
153
+ --project-surface-secondary: color-mix(in srgb, var(--foreground) 2%, var(--card) 98%);
154
+ --project-surface-item: color-mix(in srgb, var(--card) 96%, transparent);
155
+ --project-surface-hero: color-mix(in srgb, var(--accent) 8%, var(--card) 92%);
156
+ --project-surface-hero-border: color-mix(in srgb, var(--accent) 26%, var(--foreground) 8%);
157
+ --project-hero-surface: linear-gradient(158deg, #0c2433 0%, #143b4e 52%, #1b4f66 100%);
158
+ --project-hero-surface-raised: #0b2634;
159
+ --project-hero-foreground: #f6fbff;
160
+ --project-hero-muted: rgba(246, 251, 255, 0.66);
161
+ --project-hero-subtle: rgba(246, 251, 255, 0.46);
162
+ --project-hero-border: color-mix(in srgb, var(--accent) 20%, transparent);
140
163
  }
141
164
 
142
165
  :root.light,
@@ -174,4 +197,13 @@
174
197
  --border: var(--brand-border-subtle);
175
198
  --input: rgba(10, 21, 26, 0.08);
176
199
  --ring: rgba(91, 197, 242, 0.42);
200
+ --project-surface-primary: var(--card);
201
+ --project-surface-secondary: color-mix(in srgb, var(--foreground) 2%, var(--card) 98%);
202
+ --project-surface-item: color-mix(in srgb, var(--card) 96%, transparent);
203
+ --project-hero-surface: linear-gradient(158deg, #02070d 0%, #06111c 30%, #071d2b 63%, #123747 100%);
204
+ --project-hero-surface-raised: #0b2634;
205
+ --project-hero-foreground: #f6fbff;
206
+ --project-hero-muted: rgba(246, 251, 255, 0.66);
207
+ --project-hero-subtle: rgba(246, 251, 255, 0.46);
208
+ --project-hero-border: rgba(145, 211, 241, 0.2);
177
209
  }