@brightweblabs/theme 0.2.1 → 0.4.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 (9) hide show
  1. package/README.md +96 -0
  2. package/package.json +1 -1
  3. package/src/base.css +26 -1
  4. package/src/surfaces.css +72 -76
  5. package/src/theme.css +40 -0
  6. package/src/tokens.css +349 -4
  7. package/src/typography.css +70 -62
  8. package/themes/mq-aliases.css +105 -40
  9. package/themes/mq.css +56 -0
package/themes/mq-aliases.css CHANGED
@@ -16,81 +16,91 @@
16
16
  }
17
17
 
18
18
  @utility portal-micro {
19
- font-family: var(--font-body), sans-serif;
19
+ font-family: var(--font-body);
20
20
  font-size: var(--text-ui-micro);
21
21
  font-weight: var(--font-weight-medium);
22
- line-height: 1.3;
22
+ line-height: var(--type-leading-130);
23
+ /* MQ parity: apps/portal/app/globals.css:718. */
23
24
  color: var(--muted-foreground);
24
25
  }
25
26
  @utility portal-label {
26
- font-family: var(--font-body), sans-serif;
27
+ font-family: var(--font-body);
27
28
  font-size: var(--text-ui-label);
28
29
  font-weight: var(--font-weight-medium);
29
- line-height: 1;
30
+ line-height: var(--type-leading-none);
30
31
  text-transform: uppercase;
31
- letter-spacing: 0.14em;
32
+ letter-spacing: var(--type-tracking-140);
33
+ /* MQ parity: apps/portal/app/globals.css:663. */
32
34
  color: var(--muted-foreground);
33
35
  }
34
36
  @utility portal-meta {
35
- font-family: var(--font-body), sans-serif;
37
+ font-family: var(--font-body);
36
38
  font-size: var(--text-ui-meta);
37
39
  font-weight: var(--font-weight-regular);
38
- line-height: 1.4;
40
+ line-height: var(--type-leading-140);
41
+ /* MQ parity: apps/portal/app/globals.css:711. */
39
42
  color: var(--muted-foreground);
40
43
  }
41
44
  @utility portal-body {
42
- font-family: var(--font-body), sans-serif;
45
+ font-family: var(--font-body);
43
46
  font-size: var(--text-ui-body);
44
47
  font-weight: var(--font-weight-regular);
45
- line-height: 1.5;
48
+ line-height: var(--type-leading-normal);
49
+ /* MQ parity: apps/portal/app/globals.css:705. */
46
50
  color: var(--foreground);
47
51
  }
48
52
  @utility portal-card-title {
49
- font-family: var(--font-body), sans-serif;
53
+ font-family: var(--font-body);
50
54
  font-size: var(--text-ui-card-title);
51
55
  font-weight: var(--font-weight-medium);
52
- line-height: 1.3;
53
- letter-spacing: -0.025em;
56
+ line-height: var(--type-leading-130);
57
+ letter-spacing: var(--type-tracking-n025);
58
+ /* MQ parity: apps/portal/app/globals.css:654. */
54
59
  color: var(--foreground);
55
60
  }
56
61
  @utility portal-subhead {
57
- font-family: var(--font-display), sans-serif;
62
+ font-family: var(--font-display);
58
63
  font-size: var(--text-ui-subhead);
59
64
  font-weight: var(--font-weight-bold);
60
- line-height: 1.25;
61
- letter-spacing: -0.02em;
65
+ line-height: var(--type-leading-tight);
66
+ letter-spacing: var(--type-tracking-n020);
67
+ /* MQ parity: apps/portal/app/globals.css:646. */
62
68
  color: var(--foreground);
63
69
  }
64
70
  @utility portal-panel-title {
65
- font-family: var(--font-display), sans-serif;
71
+ font-family: var(--font-display);
66
72
  font-size: var(--text-ui-panel-title);
67
73
  font-weight: var(--font-weight-bold);
68
- line-height: 1.2;
69
- letter-spacing: -0.02em;
74
+ line-height: var(--type-leading-120);
75
+ letter-spacing: var(--type-tracking-n020);
76
+ /* MQ parity: apps/portal/app/globals.css:636. */
70
77
  color: var(--foreground);
71
78
  }
72
79
  @utility portal-heading {
73
- font-family: var(--font-display), sans-serif;
80
+ font-family: var(--font-display);
74
81
  font-size: var(--text-ui-heading);
75
82
  font-weight: var(--font-weight-bold);
76
- line-height: 1.15;
77
- letter-spacing: -0.02em;
83
+ line-height: var(--type-leading-115);
84
+ letter-spacing: var(--type-tracking-n020);
85
+ /* MQ parity: apps/portal/app/globals.css:626. */
78
86
  color: var(--foreground);
79
87
  }
80
88
  @utility portal-title-sm {
81
- font-family: var(--font-display), sans-serif;
89
+ font-family: var(--font-display);
82
90
  font-size: var(--text-ui-title-sm);
83
91
  font-weight: var(--font-weight-heavy);
84
- line-height: 1.1;
85
- letter-spacing: -0.03em;
92
+ line-height: var(--type-leading-110);
93
+ letter-spacing: var(--type-tracking-n030);
94
+ /* MQ parity: apps/portal/app/globals.css:617. */
86
95
  color: var(--foreground);
87
96
  }
88
97
  @utility portal-title {
89
- font-family: var(--font-display), sans-serif;
98
+ font-family: var(--font-display);
90
99
  font-size: var(--text-ui-title);
91
100
  font-weight: var(--font-weight-heavy);
92
- line-height: 1.05;
93
- letter-spacing: -0.03em;
101
+ line-height: var(--type-leading-105);
102
+ letter-spacing: var(--type-tracking-n030);
103
+ /* MQ parity: apps/portal/app/globals.css:606. */
94
104
  color: var(--foreground);
95
105
  }
96
106
  @utility portal-metric {
@@ -98,26 +108,29 @@
98
108
  font-variant-numeric: tabular-nums;
99
109
  font-size: var(--text-ui-metric);
100
110
  font-weight: var(--font-weight-heavy);
101
- line-height: 1;
102
- letter-spacing: -0.04em;
111
+ line-height: var(--type-leading-none);
112
+ letter-spacing: var(--type-tracking-n040);
113
+ /* MQ parity: apps/portal/app/globals.css:673. */
103
114
  color: var(--foreground);
104
115
  }
105
116
  @utility portal-metric-xl {
106
- font-family: var(--font-display), sans-serif;
117
+ font-family: var(--font-display);
107
118
  font-variant-numeric: tabular-nums;
108
119
  font-size: var(--text-ui-metric-xl);
109
120
  font-weight: var(--font-weight-heavy);
110
- line-height: 0.95;
111
- letter-spacing: -0.04em;
121
+ line-height: var(--type-leading-095);
122
+ letter-spacing: var(--type-tracking-n040);
123
+ /* MQ parity: apps/portal/app/globals.css:697. */
112
124
  color: var(--foreground);
113
125
  }
114
126
  @utility portal-metric-display {
115
- font-family: var(--font-display), sans-serif;
127
+ font-family: var(--font-display);
116
128
  font-variant-numeric: tabular-nums;
117
129
  font-size: var(--text-ui-metric-display);
118
130
  font-weight: var(--font-weight-heavy);
119
- line-height: 1;
120
- letter-spacing: -0.04em;
131
+ line-height: var(--type-leading-none);
132
+ letter-spacing: var(--type-tracking-n040);
133
+ /* MQ parity: apps/portal/app/globals.css:685. */
121
134
  color: var(--foreground);
122
135
  }
123
136
  @utility portal-scroll {
@@ -125,15 +138,67 @@
125
138
  overflow-y: overlay;
126
139
  overflow-x: hidden;
127
140
  scrollbar-width: thin;
128
- scrollbar-color: color-mix(in srgb, var(--foreground) 18%, transparent) transparent;
141
+ scrollbar-color: var(--scrollbar-thumb) transparent;
129
142
 
130
- &::-webkit-scrollbar { width: 6px; height: 6px; }
143
+ &::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
131
144
  &::-webkit-scrollbar-track { background: transparent; }
132
145
  &::-webkit-scrollbar-thumb {
133
- background-color: color-mix(in srgb, var(--foreground) 18%, transparent);
134
- border-radius: 9999px;
146
+ background-color: var(--scrollbar-thumb);
147
+ border-radius: var(--radius-scrollbar);
135
148
  }
136
149
  &::-webkit-scrollbar-thumb:hover {
137
- background-color: color-mix(in srgb, var(--foreground) 30%, transparent);
150
+ background-color: var(--scrollbar-thumb-hover);
151
+ }
152
+ }
153
+
154
+ @layer components {
155
+ .heading-2 {
156
+ margin: 0;
157
+ font-family: var(--font-display);
158
+ font-size: var(--type-heading-2);
159
+ font-weight: var(--font-weight-black);
160
+ line-height: var(--type-leading-110);
161
+ letter-spacing: var(--type-tracking-n025);
162
+ text-wrap: balance;
163
+ }
164
+
165
+ .paragraph,
166
+ .paragraph-large,
167
+ .paragraph-small,
168
+ .paragraph-mini {
169
+ margin: 0;
170
+ font-family: var(--font-body);
171
+ font-weight: var(--font-weight-regular);
172
+ letter-spacing: var(--type-tracking-010);
173
+ }
174
+
175
+ .paragraph {
176
+ font-size: var(--type-paragraph);
177
+ line-height: var(--type-leading-172);
178
+ }
179
+
180
+ .paragraph-large {
181
+ font-size: var(--type-paragraph-large);
182
+ line-height: var(--type-leading-155);
183
+ }
184
+
185
+ .paragraph-small {
186
+ font-size: var(--type-paragraph-small);
187
+ line-height: var(--type-leading-normal);
188
+ }
189
+
190
+ .paragraph-mini {
191
+ font-size: var(--type-paragraph-mini);
192
+ line-height: var(--type-leading-145);
193
+ }
194
+
195
+ .label {
196
+ margin: 0;
197
+ font-family: var(--font-display);
198
+ font-size: var(--type-label);
199
+ font-weight: var(--font-weight-heavy);
200
+ line-height: var(--type-leading-120);
201
+ letter-spacing: var(--type-tracking-120);
202
+ text-transform: uppercase;
138
203
  }
139
204
  }
package/themes/mq.css CHANGED
@@ -1,5 +1,7 @@
1
1
  /* MQ compatibility palette. Import after @brightweblabs/theme/css. */
2
2
  :root {
3
+ /* MQ deployments load their client font at the app root and restore it with
4
+ one theme override: --font-body: var(--font-client-body); */
3
5
  --brand-accent: #5bc5f2;
4
6
  --brand-accent-soft: #6fc4e7;
5
7
  --brand-ink: #0a151a;
@@ -26,6 +28,7 @@
26
28
  --secondary-foreground: var(--brand-ink);
27
29
  --muted: rgba(191, 192, 207, 0.18);
28
30
  --muted-foreground: var(--brand-neutral-500);
31
+ --foreground-muted-accessible: #606570;
29
32
  --foreground-inverse: var(--brand-white);
30
33
  --foreground-inverse-muted: rgba(255, 255, 255, 0.88);
31
34
  --foreground-inverse-subtle: rgba(255, 255, 255, 0.84);
@@ -59,6 +62,35 @@
59
62
  --brand-panel-muted: rgba(246, 251, 255, 0.66);
60
63
  --brand-panel-subtle: rgba(246, 251, 255, 0.46);
61
64
  --brand-panel-border: rgba(145, 211, 241, 0.2);
65
+ --auth-wash: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand-accent) 11%, transparent), transparent 54%);
66
+ --auth-card-surface: color-mix(in srgb, var(--card) 96%, transparent);
67
+ --auth-card-border: color-mix(in srgb, var(--brand-accent) 18%, var(--border));
68
+ --auth-card-shadow: var(--brand-shadow-soft);
69
+ --auth-card-radius: var(--radius-panel);
70
+ --auth-panel-surface: var(--brand-panel-surface);
71
+ --auth-panel-foreground: var(--brand-panel-foreground);
72
+ --auth-panel-muted: var(--brand-panel-muted);
73
+ --auth-panel-border: var(--brand-panel-border);
74
+ --auth-success-surface: var(--surface-status-success);
75
+ --auth-success-border: color-mix(in srgb, var(--semantic-success) 30%, transparent);
76
+ --auth-success-foreground: var(--semantic-success-strong);
77
+ --auth-error-surface: var(--surface-danger-subtle);
78
+ --auth-error-border: color-mix(in srgb, var(--destructive) 28%, transparent);
79
+ --auth-error-foreground: var(--destructive);
80
+ --auth-skeleton-surface: var(--elevate-2);
81
+ --auth-skeleton-highlight: color-mix(in srgb, var(--card) 72%, transparent);
82
+ --project-surface-primary: var(--card);
83
+ --project-surface-secondary: color-mix(in srgb, var(--foreground) 2%, var(--card) 98%);
84
+ --project-surface-item: color-mix(in srgb, var(--card) 96%, transparent);
85
+ --project-hero-surface: linear-gradient(158deg, #02070d 0%, #06111c 30%, #071d2b 63%, #123747 100%);
86
+ --project-hero-surface-raised: #0b2634;
87
+ --project-hero-foreground: #f6fbff;
88
+ --project-hero-muted: rgba(246, 251, 255, 0.66);
89
+ --project-hero-subtle: rgba(246, 251, 255, 0.46);
90
+ --project-hero-border: rgba(145, 211, 241, 0.2);
91
+ --project-hero-base: #061827;
92
+ --project-hero-shadow: 0 18px 50px rgba(6, 29, 51, 0.14);
93
+ --project-surface-padding: 1.25rem;
62
94
  }
63
95
 
64
96
  :root.dark,
@@ -90,6 +122,7 @@
90
122
  --secondary-foreground: #dceaf7;
91
123
  --muted: rgba(132, 170, 198, 0.16);
92
124
  --muted-foreground: #9eb6cd;
125
+ --foreground-muted-accessible: #9eb6cd;
93
126
  --foreground-inverse: #f7fbff;
94
127
  --foreground-inverse-muted: rgba(247, 251, 255, 0.9);
95
128
  --foreground-inverse-subtle: rgba(247, 251, 255, 0.84);
@@ -137,6 +170,17 @@
137
170
  --brand-panel-muted: rgba(246, 251, 255, 0.66);
138
171
  --brand-panel-subtle: rgba(246, 251, 255, 0.46);
139
172
  --brand-panel-border: color-mix(in srgb, var(--accent) 20%, transparent);
173
+ --project-surface-primary: var(--card);
174
+ --project-surface-secondary: color-mix(in srgb, var(--foreground) 2%, var(--card) 98%);
175
+ --project-surface-item: color-mix(in srgb, var(--card) 96%, transparent);
176
+ --project-hero-surface: linear-gradient(158deg, #0c2433 0%, #143b4e 52%, #1b4f66 100%);
177
+ --project-hero-surface-raised: #0b2634;
178
+ --project-hero-foreground: #f6fbff;
179
+ --project-hero-muted: rgba(246, 251, 255, 0.66);
180
+ --project-hero-subtle: rgba(246, 251, 255, 0.46);
181
+ --project-hero-border: color-mix(in srgb, var(--accent) 20%, transparent);
182
+ --project-hero-base: #0c2433;
183
+ --project-hero-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
140
184
  }
141
185
 
142
186
  :root.light,
@@ -167,6 +211,7 @@
167
211
  --secondary-foreground: var(--brand-ink);
168
212
  --muted: rgba(191, 192, 207, 0.18);
169
213
  --muted-foreground: var(--brand-neutral-500);
214
+ --foreground-muted-accessible: #606570;
170
215
  --accent: var(--brand-accent);
171
216
  --accent-foreground: var(--brand-ink);
172
217
  --destructive: #b43f3f;
@@ -174,4 +219,15 @@
174
219
  --border: var(--brand-border-subtle);
175
220
  --input: rgba(10, 21, 26, 0.08);
176
221
  --ring: rgba(91, 197, 242, 0.42);
222
+ --project-surface-primary: var(--card);
223
+ --project-surface-secondary: color-mix(in srgb, var(--foreground) 2%, var(--card) 98%);
224
+ --project-surface-item: color-mix(in srgb, var(--card) 96%, transparent);
225
+ --project-hero-surface: linear-gradient(158deg, #02070d 0%, #06111c 30%, #071d2b 63%, #123747 100%);
226
+ --project-hero-surface-raised: #0b2634;
227
+ --project-hero-foreground: #f6fbff;
228
+ --project-hero-muted: rgba(246, 251, 255, 0.66);
229
+ --project-hero-subtle: rgba(246, 251, 255, 0.46);
230
+ --project-hero-border: rgba(145, 211, 241, 0.2);
231
+ --project-hero-base: #061827;
232
+ --project-hero-shadow: 0 18px 50px rgba(6, 29, 51, 0.14);
177
233
  }