@brightweblabs/theme 0.7.3 → 0.8.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 (7) hide show
  1. package/README.md +5 -4
  2. package/package.json +1 -1
  3. package/src/surfaces.css +4 -4
  4. package/src/tokens.css +4 -2
  5. package/src/typography.css +12 -12
  6. package/themes/mq-aliases.css +6 -6
  7. package/themes/mq.css +3 -0
package/README.md CHANGED
@@ -25,7 +25,7 @@ The family contract starts at `--font-body`, `--font-heading`, and `--font-code`
25
25
  | `text-body-lg` | `1rem` | Emphasized or introductory body copy |
26
26
  | `text-body` | `0.875rem` | Default interface body copy |
27
27
  | `text-meta` | `0.75rem` | Secondary metadata |
28
- | `text-label` | `0.6875rem` | Uppercase interface label |
28
+ | `text-label` | `0.75rem` | Compact sentence-case interface label |
29
29
  | `text-micro` | `0.625rem` | Dense supporting copy |
30
30
  | `text-kpi` | `2.75rem` | Display-face headline KPI |
31
31
  | `text-kpi-lg` | `3.5rem` | Large display-face headline KPI |
@@ -38,9 +38,10 @@ are mono, and numbers in sentences inherit their surrounding prose. The legacy
38
38
  existing rendered output for compatibility; new code should use the semantic roles
39
39
  above.
40
40
 
41
- Existing recipes remain supported and preserve their rendered values. The table
42
- below gives the recommended semantic role for new code; it is a migration guide,
43
- not a claim that every compatibility utility renders identically:
41
+ Existing recipes remain supported. Compatibility label recipes intentionally
42
+ adopt the shared sentence-case label treatment; other compatibility recipes keep
43
+ their established values. The table below gives the recommended semantic role for
44
+ new code rather than promising pixel-identical output:
44
45
 
45
46
  | Compatibility utility | Recommended role |
46
47
  | --- | --- |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@brightweblabs/theme",
3
3
  "private": false,
4
- "version": "0.7.3",
4
+ "version": "0.8.0",
5
5
  "main": "./src/tint.ts",
6
6
  "types": "./src/tint.ts",
7
7
  "files": [
package/src/surfaces.css CHANGED
@@ -138,10 +138,10 @@
138
138
  border-radius: var(--radius-pill);
139
139
  background: var(--brand-surface-tint);
140
140
  color: var(--brand-accent);
141
- font-size: var(--text-ui-label);
142
- font-weight: var(--font-weight-bold);
143
- letter-spacing: var(--type-tracking-040);
144
- text-transform: uppercase;
141
+ font-size: var(--text-meta);
142
+ font-weight: var(--font-weight-semibold);
143
+ letter-spacing: var(--type-tracking-normal);
144
+ text-transform: none;
145
145
  }
146
146
 
147
147
  .status {
package/src/tokens.css CHANGED
@@ -72,6 +72,7 @@
72
72
  --type-tracking-180: 0.18em;
73
73
 
74
74
  --brand-accent: #4a7dbd;
75
+ --brand-accent-foreground: #ffffff;
75
76
  --brand-accent-soft: #7196c4;
76
77
  --brand-ink: #111827;
77
78
  --brand-neutral-500: #64748b;
@@ -191,7 +192,7 @@
191
192
  --text-body-lg: 1rem;
192
193
  --text-body: 0.875rem;
193
194
  --text-meta: 0.75rem;
194
- --text-label: 0.6875rem;
195
+ --text-label: 0.75rem;
195
196
  --text-micro: 0.625rem;
196
197
  --text-metric: 2.75rem;
197
198
  --text-metric-display: var(--text-metric);
@@ -258,7 +259,7 @@
258
259
  --surface-button-soft-hover: color-mix(in srgb, var(--foreground) 7%, var(--card));
259
260
  --border-button-soft-hover: color-mix(in srgb, var(--foreground) 16%, transparent);
260
261
  --surface-button-brand: color-mix(in srgb, var(--brand-accent) 84%, var(--foreground));
261
- --foreground-button-brand: var(--accent-foreground);
262
+ --foreground-button-brand: var(--brand-accent-foreground);
262
263
  --foreground-accent-link: color-mix(in srgb, var(--brand-accent) 45%, var(--foreground));
263
264
  --surface-selection: color-mix(in srgb, var(--accent) 12%, var(--card));
264
265
  --border-selection: color-mix(in srgb, var(--accent) 40%, var(--hairline));
@@ -491,6 +492,7 @@
491
492
  .theme-dark {
492
493
  color-scheme: dark;
493
494
  --brand-accent: #79a8df;
495
+ --brand-accent-foreground: #0b1220;
494
496
  --brand-accent-soft: #9bbce2;
495
497
  --brand-ink: #0b1220;
496
498
  --brand-neutral-500: #9aa9bc;
package/src/typography.css CHANGED
@@ -68,10 +68,10 @@
68
68
  @utility text-label {
69
69
  font-family: var(--font-body);
70
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);
71
+ font-weight: var(--font-weight-semibold);
72
+ line-height: var(--type-leading-140);
73
+ text-transform: none;
74
+ letter-spacing: var(--type-tracking-normal);
75
75
  }
76
76
 
77
77
  @utility text-micro {
@@ -151,10 +151,10 @@
151
151
  @utility text-ui-label {
152
152
  font-family: var(--font-body);
153
153
  font-size: var(--text-ui-label);
154
- font-weight: var(--font-weight-medium);
155
- line-height: var(--type-leading-none);
156
- text-transform: uppercase;
157
- letter-spacing: var(--type-tracking-140);
154
+ font-weight: var(--font-weight-semibold);
155
+ line-height: var(--type-leading-140);
156
+ text-transform: none;
157
+ letter-spacing: var(--type-tracking-normal);
158
158
  }
159
159
 
160
160
  @utility text-ui-meta {
@@ -317,10 +317,10 @@
317
317
  @utility portal-label {
318
318
  font-family: var(--font-body);
319
319
  font-size: var(--text-ui-label);
320
- font-weight: var(--font-weight-medium);
321
- line-height: var(--type-leading-none);
322
- text-transform: uppercase;
323
- letter-spacing: var(--type-tracking-140);
320
+ font-weight: var(--font-weight-semibold);
321
+ line-height: var(--type-leading-140);
322
+ text-transform: none;
323
+ letter-spacing: var(--type-tracking-normal);
324
324
  /* MQ parity: apps/portal/app/globals.css:663. */
325
325
  color: var(--muted-foreground);
326
326
  }
package/themes/mq-aliases.css CHANGED
@@ -59,11 +59,11 @@
59
59
 
60
60
  .label {
61
61
  margin: 0;
62
- font-family: var(--font-display);
63
- font-size: var(--type-label);
64
- font-weight: var(--font-weight-heavy);
65
- line-height: var(--type-leading-120);
66
- letter-spacing: var(--type-tracking-120);
67
- text-transform: uppercase;
62
+ font-family: var(--font-body);
63
+ font-size: var(--text-meta);
64
+ font-weight: var(--font-weight-semibold);
65
+ line-height: var(--type-leading-140);
66
+ letter-spacing: var(--type-tracking-normal);
67
+ text-transform: none;
68
68
  }
69
69
  }
package/themes/mq.css CHANGED
@@ -3,6 +3,7 @@
3
3
  /* MQ deployments load their client font at the app root and restore it with
4
4
  one theme override: --font-body: var(--font-client-body); */
5
5
  --brand-accent: #5bc5f2;
6
+ --brand-accent-foreground: #0a151a;
6
7
  --brand-accent-soft: #6fc4e7;
7
8
  --brand-ink: #0a151a;
8
9
  --brand-neutral-500: #8e8f9a;
@@ -103,6 +104,7 @@
103
104
  :root[data-theme="dark"],
104
105
  .theme-dark {
105
106
  --brand-accent: #5bc5f2;
107
+ --brand-accent-foreground: #061118;
106
108
  --brand-accent-soft: #6fc4e7;
107
109
  --brand-ink: #061118;
108
110
  --brand-neutral-500: #9ca5b5;
@@ -193,6 +195,7 @@
193
195
  :root[data-theme="light"],
194
196
  .theme-light {
195
197
  --brand-accent: #5bc5f2;
198
+ --brand-accent-foreground: #0a151a;
196
199
  --brand-accent-soft: #6fc4e7;
197
200
  --brand-ink: #0a151a;
198
201
  --brand-neutral-500: #8e8f9a;