@brightweblabs/theme 0.5.0 → 0.6.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 (5) hide show
  1. package/README.md +43 -2
  2. package/package.json +1 -1
  3. package/src/tokens.css +28 -13
  4. package/src/typography.css +111 -0
  5. package/themes/mq.css +6 -0
package/README.md CHANGED
@@ -13,7 +13,48 @@ import { GeistSans } from "geist/font/sans";
13
13
  <body className={`${GeistSans.variable} ${GeistMono.variable}`}>
14
14
  ```
15
15
 
16
- The family contract starts at `--font-body`, `--font-heading`, and `--font-code`; Tailwind-facing `--font-sans`, `--font-display`, and `--font-mono` aliases resolve through those tokens. Raw sizes live only in the `--text-ui-*`, `--type-*`, weight, leading, and tracking scales in `src/tokens.css`. Components consume semantic utilities such as `text-ui-body`, `portal-title`, and `heading-2`, so changing a family or scale does not require component edits.
16
+ The family contract starts at `--font-body`, `--font-heading`, and `--font-code`; Tailwind-facing `--font-sans`, `--font-display`, and `--font-mono` aliases resolve through those tokens. Canonical sizes live in visual-role `--text-*` tokens, with `--text-ui-*` and `--type-*` retained as compatibility scales. New components should use the canonical utilities below. A utility's role is visual rather than semantic: choose the correct HTML element independently, and compose text color separately.
17
+
18
+ | Utility | Size | Intended role |
19
+ | --- | --- | --- |
20
+ | `text-heading-1` | `clamp(1.75rem, 1.6rem + 0.7vw, 2rem)` | Primary page heading |
21
+ | `text-heading-2` | `1.5rem` | Major section heading |
22
+ | `text-heading-3` | `1.25rem` | Panel or subsection heading |
23
+ | `text-heading-4` | `1.125rem` | Compact subsection heading |
24
+ | `text-title` | `0.9375rem` | Card or item title |
25
+ | `text-body-lg` | `1rem` | Emphasized or introductory body copy |
26
+ | `text-body` | `0.875rem` | Default interface body copy |
27
+ | `text-meta` | `0.75rem` | Secondary metadata |
28
+ | `text-label` | `0.6875rem` | Uppercase interface label |
29
+ | `text-micro` | `0.625rem` | Dense supporting copy |
30
+ | `text-metric` | `2.75rem` | Monospaced primary metric |
31
+ | `text-metric-display` | `2.75rem` | Display-face primary metric |
32
+ | `text-metric-lg` | `3.5rem` | Large display metric |
33
+
34
+ Existing recipes remain supported and preserve their rendered values:
35
+
36
+ | Compatibility utility | Canonical utility |
37
+ | --- | --- |
38
+ | `text-ui-title` | `text-heading-1` |
39
+ | `text-ui-heading` | `text-heading-2` |
40
+ | `text-ui-panel-title` | `text-heading-3` |
41
+ | `text-ui-subhead` | `text-heading-4` |
42
+ | `text-ui-card-title` | `text-title` |
43
+ | `text-ui-body` | `text-body` |
44
+ | `text-ui-meta` | `text-meta` |
45
+ | `text-ui-label` | `text-label` |
46
+ | `text-ui-micro` | `text-micro` |
47
+ | `text-ui-metric` | `text-metric` |
48
+ | `text-ui-metric-display` | `text-metric-display` |
49
+ | `text-ui-metric-xl` | `text-metric-lg` |
50
+
51
+ The matching `portal-*` recipes have the same typography but continue to include their established tone: headings, titles, body, and metrics use `text-foreground`; meta, label, and micro roles use `text-muted-foreground`. `text-ui-title-sm`, shell/report/preview/auth sizes, MQ `heading-2`, and MQ paragraph aliases are contextual rather than exact canonical equivalents. Keep them until their route family is visually migrated and screenshot-checked.
52
+
53
+ BrightWeb package-owned UI now consumes the canonical roles directly. Compatibility
54
+ recipes remain exported for independently versioned clients, but new package code
55
+ must not introduce `text-ui-*`, `portal-*`, MQ paragraph aliases, or raw named
56
+ Tailwind font sizes. Contextual sizes compose a canonical role with the existing
57
+ specialized size token so their established geometry remains explicit.
17
58
 
18
59
  Client themes can override the family without forking recipes. The MQ path is:
19
60
 
@@ -59,7 +100,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
59
100
  | --- | --- |
60
101
  | `--font-body`, `--font-heading`, `--font-code`; `--font-sans`, `--font-display`, `--font-mono` | Root font families and their Tailwind-facing aliases. |
61
102
  | `--type-weight-*`, `--type-leading-*`, `--type-tracking-*` | Shared typography weight, rhythm, and tracking primitives. |
62
- | `--text-ui-*`, `--type-paragraph*`, `--type-heading-2`, `--type-label` | Tokenized platform and compatibility type scales. |
103
+ | `--text-heading-*`, `--text-title`, `--text-body*`, `--text-meta`, `--text-label`, `--text-micro`, `--text-metric*`; `--text-ui-*`, `--type-*` | Canonical visual-role typography tokens and compatibility scales. |
63
104
  | `--foreground-muted-accessible`, `--foreground-inverse-muted`, `--foreground-inverse-subtle` | Contrast-safe secondary and inverse text roles. |
64
105
  | `--text-ui-chip`, `--text-ui-action`, `--text-ui-calendar` | Compact control and calendar type sizes. |
65
106
  | `--text-ui-shell-title`, `--text-ui-report-title`, `--text-ui-report-title-lg`, `--text-ui-report-metric` | Shell and CRM report display type sizes. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@brightweblabs/theme",
3
3
  "private": false,
4
- "version": "0.5.0",
4
+ "version": "0.6.0",
5
5
  "main": "./src/tint.ts",
6
6
  "types": "./src/tint.ts",
7
7
  "files": [
package/src/tokens.css CHANGED
@@ -182,30 +182,45 @@
182
182
  --radius-pill: 999px;
183
183
  --radius-scrollbar: 9999px;
184
184
 
185
- /* MQ-derived size scale. Aliases below retain the current rendered sizes. */
185
+ /* Canonical visual-role typography scale. */
186
+ --text-heading-1: clamp(1.75rem, 1.6rem + 0.7vw, 2rem);
187
+ --text-heading-2: 1.5rem;
188
+ --text-heading-3: 1.25rem;
189
+ --text-heading-4: 1.125rem;
190
+ --text-title: 0.9375rem;
191
+ --text-body-lg: 1rem;
192
+ --text-body: 0.875rem;
193
+ --text-meta: 0.75rem;
194
+ --text-label: 0.6875rem;
195
+ --text-micro: 0.625rem;
196
+ --text-metric: 2.75rem;
197
+ --text-metric-display: var(--text-metric);
198
+ --text-metric-lg: 3.5rem;
199
+
200
+ /* Compatibility and contextual scales retain their current rendered sizes. */
186
201
  --text-ui-nano: 0.4375rem;
187
202
  --text-ui-nano-lg: 0.5rem;
188
203
  --text-ui-fine: 0.5625rem;
189
- --text-ui-micro: 0.625rem;
190
- --text-ui-label: 0.6875rem;
204
+ --text-ui-micro: var(--text-micro);
205
+ --text-ui-label: var(--text-label);
191
206
  --text-ui-label-relaxed: 0.7rem;
192
- --text-ui-meta: 0.75rem;
207
+ --text-ui-meta: var(--text-meta);
193
208
  --text-ui-chip: 0.78125rem;
194
209
  --text-ui-action: 0.8125rem;
195
- --text-ui-body: 0.875rem;
196
- --text-ui-card-title: 0.9375rem;
197
- --text-ui-subhead: 1.125rem;
198
- --text-ui-panel-title: 1.25rem;
199
- --text-ui-heading: 1.5rem;
210
+ --text-ui-body: var(--text-body);
211
+ --text-ui-card-title: var(--text-title);
212
+ --text-ui-subhead: var(--text-heading-4);
213
+ --text-ui-panel-title: var(--text-heading-3);
214
+ --text-ui-heading: var(--text-heading-2);
200
215
  --text-ui-title-sm: 1.875rem;
201
- --text-ui-title: clamp(1.75rem, 1.6rem + 0.7vw, 2rem);
216
+ --text-ui-title: var(--text-heading-1);
202
217
  --text-ui-shell-title: 1.3125rem;
203
218
  --text-ui-report-title: 1.75rem;
204
219
  --text-ui-report-title-lg: 2.25rem;
205
220
  --text-ui-calendar: 0.8rem;
206
221
  --text-ui-report-metric: 2.5rem;
207
- --text-ui-metric: 2.75rem;
208
- --text-ui-metric-xl: 3.5rem;
222
+ --text-ui-metric: var(--text-metric);
223
+ --text-ui-metric-xl: var(--text-metric-lg);
209
224
  --text-ui-dashboard-card-title: 1.375rem;
210
225
  --text-ui-dashboard-title: 2.125rem;
211
226
  --text-ui-preview-card-title: 2.375rem;
@@ -214,7 +229,7 @@
214
229
  --text-ui-preview-stat: clamp(2rem, 4vw, 3rem);
215
230
  --text-ui-preview-title: clamp(2.4rem, 5.5vw, 4.8rem);
216
231
  --text-ui-auth-title: clamp(2.4rem, 5vw, 4.75rem);
217
- --text-ui-metric-display: var(--text-ui-metric);
232
+ --text-ui-metric-display: var(--text-metric-display);
218
233
  --portal-text-micro: 0.625rem;
219
234
  --type-paragraph-large: 1.09375rem;
220
235
  --type-heading-2: clamp(2rem, 4vw, 2.8125rem);
package/src/typography.css CHANGED
@@ -1,3 +1,114 @@
1
+ /* Canonical visual-role recipes. Semantic HTML and text color stay independent. */
2
+ @utility text-heading-1 {
3
+ font-family: var(--font-display);
4
+ font-size: var(--text-heading-1);
5
+ font-weight: var(--font-weight-heavy);
6
+ line-height: var(--type-leading-105);
7
+ letter-spacing: var(--type-tracking-n030);
8
+ text-wrap: balance;
9
+ }
10
+
11
+ @utility text-heading-2 {
12
+ font-family: var(--font-display);
13
+ font-size: var(--text-heading-2);
14
+ font-weight: var(--font-weight-bold);
15
+ line-height: var(--type-leading-115);
16
+ letter-spacing: var(--type-tracking-n020);
17
+ text-wrap: pretty;
18
+ }
19
+
20
+ @utility text-heading-3 {
21
+ font-family: var(--font-display);
22
+ font-size: var(--text-heading-3);
23
+ font-weight: var(--font-weight-bold);
24
+ line-height: var(--type-leading-120);
25
+ letter-spacing: var(--type-tracking-n020);
26
+ text-wrap: pretty;
27
+ }
28
+
29
+ @utility text-heading-4 {
30
+ font-family: var(--font-display);
31
+ font-size: var(--text-heading-4);
32
+ font-weight: var(--font-weight-bold);
33
+ line-height: var(--type-leading-tight);
34
+ letter-spacing: var(--type-tracking-n020);
35
+ text-wrap: pretty;
36
+ }
37
+
38
+ @utility text-title {
39
+ font-family: var(--font-body);
40
+ font-size: var(--text-title);
41
+ font-weight: var(--font-weight-medium);
42
+ line-height: var(--type-leading-130);
43
+ letter-spacing: var(--type-tracking-n025);
44
+ text-wrap: pretty;
45
+ }
46
+
47
+ @utility text-body-lg {
48
+ font-family: var(--font-body);
49
+ font-size: var(--text-body-lg);
50
+ font-weight: var(--font-weight-regular);
51
+ line-height: var(--type-leading-normal);
52
+ }
53
+
54
+ @utility text-body {
55
+ font-family: var(--font-body);
56
+ font-size: var(--text-body);
57
+ font-weight: var(--font-weight-regular);
58
+ line-height: var(--type-leading-normal);
59
+ }
60
+
61
+ @utility text-meta {
62
+ font-family: var(--font-body);
63
+ font-size: var(--text-meta);
64
+ font-weight: var(--font-weight-regular);
65
+ line-height: var(--type-leading-140);
66
+ }
67
+
68
+ @utility text-label {
69
+ font-family: var(--font-body);
70
+ font-size: var(--text-label);
71
+ font-weight: var(--font-weight-medium);
72
+ line-height: var(--type-leading-none);
73
+ text-transform: uppercase;
74
+ letter-spacing: var(--type-tracking-140);
75
+ }
76
+
77
+ @utility text-micro {
78
+ font-family: var(--font-body);
79
+ font-size: var(--text-micro);
80
+ font-weight: var(--font-weight-medium);
81
+ line-height: var(--type-leading-130);
82
+ }
83
+
84
+ @utility text-metric {
85
+ font-family: var(--font-mono);
86
+ font-variant-numeric: tabular-nums;
87
+ font-size: var(--text-metric);
88
+ font-weight: var(--font-weight-heavy);
89
+ line-height: var(--type-leading-none);
90
+ letter-spacing: var(--type-tracking-n040);
91
+ }
92
+
93
+ @utility text-metric-display {
94
+ font-family: var(--font-display);
95
+ font-variant-numeric: tabular-nums;
96
+ font-size: var(--text-metric-display);
97
+ font-weight: var(--font-weight-heavy);
98
+ line-height: var(--type-leading-none);
99
+ letter-spacing: var(--type-tracking-n040);
100
+ }
101
+
102
+ @utility text-metric-lg {
103
+ font-family: var(--font-display);
104
+ font-variant-numeric: tabular-nums;
105
+ font-size: var(--text-metric-lg);
106
+ font-weight: var(--font-weight-heavy);
107
+ line-height: var(--type-leading-095);
108
+ letter-spacing: var(--type-tracking-n040);
109
+ }
110
+
111
+ /* Compatibility recipes. New code should use the canonical visual roles above. */
1
112
  @utility text-ui-micro {
2
113
  font-family: var(--font-body);
3
114
  font-size: var(--text-ui-micro);
package/themes/mq.css CHANGED
@@ -74,6 +74,12 @@
74
74
  --auth-success-surface: var(--surface-status-success);
75
75
  --auth-success-border: color-mix(in srgb, var(--semantic-success) 30%, transparent);
76
76
  --auth-success-foreground: var(--semantic-success-strong);
77
+ --auth-warning-surface: var(--surface-status-warning);
78
+ --auth-warning-border: color-mix(in srgb, var(--semantic-warning) 34%, transparent);
79
+ --auth-warning-foreground: var(--semantic-warning-strong);
80
+ --auth-info-surface: color-mix(in srgb, var(--semantic-info) 12%, transparent);
81
+ --auth-info-border: color-mix(in srgb, var(--semantic-info) 30%, transparent);
82
+ --auth-info-foreground: var(--semantic-info-strong);
77
83
  --auth-error-surface: var(--surface-danger-subtle);
78
84
  --auth-error-border: color-mix(in srgb, var(--destructive) 28%, transparent);
79
85
  --auth-error-foreground: var(--destructive);