@tailor-platform/app-shell 1.17.0 → 1.19.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 (36) hide show
  1. package/dist/app-shell-core.css +1 -1
  2. package/dist/app-shell.d.ts +503 -137
  3. package/dist/app-shell.js +8847 -7378
  4. package/dist/{appshell-CahhZy7v.js → appshell-DQTz-QwK.js} +489 -379
  5. package/dist/style-entry.d.ts +1 -656
  6. package/dist/testing.d.ts +118 -113
  7. package/dist/testing.js +1 -1
  8. package/dist/theme.bridge.css +127 -40
  9. package/dist/theme.css +4 -3
  10. package/dist/themes/_template.css +5 -6
  11. package/dist/themes/bloom.css +0 -2
  12. package/dist/themes/cream.css +0 -2
  13. package/dist/themes/default.css +112 -77
  14. package/dist/vite-plugin.d.ts +118 -113
  15. package/package.json +8 -5
  16. package/skills/app-shell-patterns/SKILL.md +51 -32
  17. package/skills/app-shell-patterns/references/api/aggregations.md +131 -0
  18. package/skills/app-shell-patterns/references/api/define-i18n-labels.md +123 -91
  19. package/skills/app-shell-patterns/references/api/define-module.md +2 -4
  20. package/skills/app-shell-patterns/references/components/action-panel.md +55 -23
  21. package/skills/app-shell-patterns/references/components/badge.md +7 -3
  22. package/skills/app-shell-patterns/references/components/data-table.md +724 -36
  23. package/skills/app-shell-patterns/references/components/form.md +19 -9
  24. package/skills/app-shell-patterns/references/components/item-list.md +191 -0
  25. package/skills/app-shell-patterns/references/components/select.md +10 -0
  26. package/skills/app-shell-patterns/references/components/sidebar-group.md +6 -6
  27. package/skills/app-shell-patterns/references/components/text.md +235 -0
  28. package/skills/app-shell-patterns/references/concepts/sidebar-navigation.md +16 -14
  29. package/skills/app-shell-patterns/references/concepts/styling-theming.md +46 -22
  30. package/skills/app-shell-patterns/references/migrations.md +23 -2
  31. package/skills/app-shell-patterns/references/pages/document-detail.md +36 -25
  32. package/skills/app-shell-patterns/references/patterns/form-modal.md +4 -1
  33. package/skills/app-shell-patterns/references/patterns/i18n-labels.md +139 -0
  34. package/skills/app-shell-patterns/references/patterns/list-dense-scan.md +3 -2
  35. package/dist/semantic-contrast.test.ts +0 -154
  36. package/dist/theme-bridge.test.ts +0 -159
package/dist/theme.bridge.css CHANGED
@@ -44,47 +44,133 @@
44
44
  *
45
45
  * The `--text-*` namespace cannot set font-family. `text-code-sm` is used with
46
46
  * `font-mono`.
47
+ *
48
+ * Each entry reads the deprecated `--app-shell-type-*` name first: 1.17.0
49
+ * shipped the roles under that name. The fallback is resolved on the element
50
+ * that uses the utility, so an old-name override keeps working at any scope,
51
+ * not only on `:root`. Remove the old names in the next major.
47
52
  */
48
- --text-heading-lg: var(--app-shell-type-heading-lg-size);
49
- --text-heading-lg--line-height: var(--app-shell-type-heading-lg-line-height);
50
- --text-heading-lg--font-weight: var(--app-shell-type-heading-lg-weight);
51
- --text-heading-lg--letter-spacing: var(--app-shell-type-heading-lg-letter-spacing);
52
- --text-heading-md: var(--app-shell-type-heading-md-size);
53
- --text-heading-md--line-height: var(--app-shell-type-heading-md-line-height);
54
- --text-heading-md--font-weight: var(--app-shell-type-heading-md-weight);
55
- --text-heading-md--letter-spacing: var(--app-shell-type-heading-md-letter-spacing);
56
- --text-heading-sm: var(--app-shell-type-heading-sm-size);
57
- --text-heading-sm--line-height: var(--app-shell-type-heading-sm-line-height);
58
- --text-heading-sm--font-weight: var(--app-shell-type-heading-sm-weight);
59
- --text-heading-sm--letter-spacing: var(--app-shell-type-heading-sm-letter-spacing);
60
- --text-body-md: var(--app-shell-type-body-md-size);
61
- --text-body-md--line-height: var(--app-shell-type-body-md-line-height);
62
- --text-body-md--font-weight: var(--app-shell-type-body-md-weight);
63
- --text-body-md--letter-spacing: var(--app-shell-type-body-md-letter-spacing);
64
- --text-body-sm: var(--app-shell-type-body-sm-size);
65
- --text-body-sm--line-height: var(--app-shell-type-body-sm-line-height);
66
- --text-body-sm--font-weight: var(--app-shell-type-body-sm-weight);
67
- --text-body-sm--letter-spacing: var(--app-shell-type-body-sm-letter-spacing);
68
- --text-label-md: var(--app-shell-type-label-md-size);
69
- --text-label-md--line-height: var(--app-shell-type-label-md-line-height);
70
- --text-label-md--font-weight: var(--app-shell-type-label-md-weight);
71
- --text-label-md--letter-spacing: var(--app-shell-type-label-md-letter-spacing);
72
- --text-label-sm: var(--app-shell-type-label-sm-size);
73
- --text-label-sm--line-height: var(--app-shell-type-label-sm-line-height);
74
- --text-label-sm--font-weight: var(--app-shell-type-label-sm-weight);
75
- --text-label-sm--letter-spacing: var(--app-shell-type-label-sm-letter-spacing);
76
- --text-code-sm: var(--app-shell-type-code-sm-size);
77
- --text-code-sm--line-height: var(--app-shell-type-code-sm-line-height);
78
- --text-code-sm--font-weight: var(--app-shell-type-code-sm-weight);
79
- --text-code-sm--letter-spacing: var(--app-shell-type-code-sm-letter-spacing);
80
- --text-body-md-relaxed: var(--app-shell-type-body-md-relaxed-size);
81
- --text-body-md-relaxed--line-height: var(--app-shell-type-body-md-relaxed-line-height);
82
- --text-body-md-relaxed--font-weight: var(--app-shell-type-body-md-relaxed-weight);
83
- --text-body-md-relaxed--letter-spacing: var(--app-shell-type-body-md-relaxed-letter-spacing);
84
- --text-body-sm-relaxed: var(--app-shell-type-body-sm-relaxed-size);
85
- --text-body-sm-relaxed--line-height: var(--app-shell-type-body-sm-relaxed-line-height);
86
- --text-body-sm-relaxed--font-weight: var(--app-shell-type-body-sm-relaxed-weight);
87
- --text-body-sm-relaxed--letter-spacing: var(--app-shell-type-body-sm-relaxed-letter-spacing);
53
+ --text-heading-lg: var(--app-shell-type-heading-lg-size, var(--type-heading-lg-size));
54
+ --text-heading-lg--line-height: var(
55
+ --app-shell-type-heading-lg-line-height,
56
+ var(--type-heading-lg-line-height)
57
+ );
58
+ --text-heading-lg--font-weight: var(
59
+ --app-shell-type-heading-lg-weight,
60
+ var(--type-heading-lg-weight)
61
+ );
62
+ --text-heading-lg--letter-spacing: var(
63
+ --app-shell-type-heading-lg-letter-spacing,
64
+ var(--type-heading-lg-letter-spacing)
65
+ );
66
+ --text-heading-md: var(--app-shell-type-heading-md-size, var(--type-heading-md-size));
67
+ --text-heading-md--line-height: var(
68
+ --app-shell-type-heading-md-line-height,
69
+ var(--type-heading-md-line-height)
70
+ );
71
+ --text-heading-md--font-weight: var(
72
+ --app-shell-type-heading-md-weight,
73
+ var(--type-heading-md-weight)
74
+ );
75
+ --text-heading-md--letter-spacing: var(
76
+ --app-shell-type-heading-md-letter-spacing,
77
+ var(--type-heading-md-letter-spacing)
78
+ );
79
+ --text-heading-sm: var(--app-shell-type-heading-sm-size, var(--type-heading-sm-size));
80
+ --text-heading-sm--line-height: var(
81
+ --app-shell-type-heading-sm-line-height,
82
+ var(--type-heading-sm-line-height)
83
+ );
84
+ --text-heading-sm--font-weight: var(
85
+ --app-shell-type-heading-sm-weight,
86
+ var(--type-heading-sm-weight)
87
+ );
88
+ --text-heading-sm--letter-spacing: var(
89
+ --app-shell-type-heading-sm-letter-spacing,
90
+ var(--type-heading-sm-letter-spacing)
91
+ );
92
+ --text-body-md: var(--app-shell-type-body-md-size, var(--type-body-md-size));
93
+ --text-body-md--line-height: var(
94
+ --app-shell-type-body-md-line-height,
95
+ var(--type-body-md-line-height)
96
+ );
97
+ --text-body-md--font-weight: var(--app-shell-type-body-md-weight, var(--type-body-md-weight));
98
+ --text-body-md--letter-spacing: var(
99
+ --app-shell-type-body-md-letter-spacing,
100
+ var(--type-body-md-letter-spacing)
101
+ );
102
+ --text-body-sm: var(--app-shell-type-body-sm-size, var(--type-body-sm-size));
103
+ --text-body-sm--line-height: var(
104
+ --app-shell-type-body-sm-line-height,
105
+ var(--type-body-sm-line-height)
106
+ );
107
+ --text-body-sm--font-weight: var(--app-shell-type-body-sm-weight, var(--type-body-sm-weight));
108
+ --text-body-sm--letter-spacing: var(
109
+ --app-shell-type-body-sm-letter-spacing,
110
+ var(--type-body-sm-letter-spacing)
111
+ );
112
+ --text-label-md: var(--app-shell-type-label-md-size, var(--type-label-md-size));
113
+ --text-label-md--line-height: var(
114
+ --app-shell-type-label-md-line-height,
115
+ var(--type-label-md-line-height)
116
+ );
117
+ --text-label-md--font-weight: var(--app-shell-type-label-md-weight, var(--type-label-md-weight));
118
+ --text-label-md--letter-spacing: var(
119
+ --app-shell-type-label-md-letter-spacing,
120
+ var(--type-label-md-letter-spacing)
121
+ );
122
+ --text-label-sm: var(--app-shell-type-label-sm-size, var(--type-label-sm-size));
123
+ --text-label-sm--line-height: var(
124
+ --app-shell-type-label-sm-line-height,
125
+ var(--type-label-sm-line-height)
126
+ );
127
+ --text-label-sm--font-weight: var(--app-shell-type-label-sm-weight, var(--type-label-sm-weight));
128
+ --text-label-sm--letter-spacing: var(
129
+ --app-shell-type-label-sm-letter-spacing,
130
+ var(--type-label-sm-letter-spacing)
131
+ );
132
+ --text-code-sm: var(--app-shell-type-code-sm-size, var(--type-code-sm-size));
133
+ --text-code-sm--line-height: var(
134
+ --app-shell-type-code-sm-line-height,
135
+ var(--type-code-sm-line-height)
136
+ );
137
+ --text-code-sm--font-weight: var(--app-shell-type-code-sm-weight, var(--type-code-sm-weight));
138
+ --text-code-sm--letter-spacing: var(
139
+ --app-shell-type-code-sm-letter-spacing,
140
+ var(--type-code-sm-letter-spacing)
141
+ );
142
+ --text-body-md-relaxed: var(
143
+ --app-shell-type-body-md-relaxed-size,
144
+ var(--type-body-md-relaxed-size)
145
+ );
146
+ --text-body-md-relaxed--line-height: var(
147
+ --app-shell-type-body-md-relaxed-line-height,
148
+ var(--type-body-md-relaxed-line-height)
149
+ );
150
+ --text-body-md-relaxed--font-weight: var(
151
+ --app-shell-type-body-md-relaxed-weight,
152
+ var(--type-body-md-relaxed-weight)
153
+ );
154
+ --text-body-md-relaxed--letter-spacing: var(
155
+ --app-shell-type-body-md-relaxed-letter-spacing,
156
+ var(--type-body-md-relaxed-letter-spacing)
157
+ );
158
+ --text-body-sm-relaxed: var(
159
+ --app-shell-type-body-sm-relaxed-size,
160
+ var(--type-body-sm-relaxed-size)
161
+ );
162
+ --text-body-sm-relaxed--line-height: var(
163
+ --app-shell-type-body-sm-relaxed-line-height,
164
+ var(--type-body-sm-relaxed-line-height)
165
+ );
166
+ --text-body-sm-relaxed--font-weight: var(
167
+ --app-shell-type-body-sm-relaxed-weight,
168
+ var(--type-body-sm-relaxed-weight)
169
+ );
170
+ --text-body-sm-relaxed--letter-spacing: var(
171
+ --app-shell-type-body-sm-relaxed-letter-spacing,
172
+ var(--type-body-sm-relaxed-letter-spacing)
173
+ );
88
174
 
89
175
  --color-background: var(--background);
90
176
  --color-foreground: var(--foreground);
@@ -105,6 +191,7 @@
105
191
  --color-border: var(--border);
106
192
  --color-input: var(--input);
107
193
  --color-ring: var(--ring);
194
+ --color-backdrop: var(--backdrop);
108
195
  --color-chart-1: var(--chart-1);
109
196
  --color-chart-2: var(--chart-2);
110
197
  --color-chart-3: var(--chart-3);
package/dist/theme.css CHANGED
@@ -13,11 +13,12 @@
13
13
  * 2. SHELL GRADIENT — optional; branded palettes only (bloom, cream).
14
14
  * 3. SYSTEM — surfaces & chrome; copy default or tune for brand tint
15
15
  * (foreground, muted, popover, card, borders).
16
- * 4. PALETTE — optional: radius, charts, shadows, destructive.
16
+ * 4. PALETTE — optional: radius, charts, shadows.
17
17
  *
18
18
  * Inherited from default.css — do not duplicate in new palettes:
19
- * --ring, --sidebar-*, --primitive-* (colour scales), --status-*, --alert-*,
20
- * --app-shell-type-* (typography roles).
19
+ * --ring, --sidebar-*, --backdrop, --primitive-* (colour scales), --status-*, --alert-*,
20
+ * --destructive, --destructive-foreground (aliases of the danger roles),
21
+ * --type-* (typography roles).
21
22
  * The colour roles --{intent}-{role} inherit too; a palette overrides them
22
23
  * only to recolour the status components. Typography roles are inherited
23
24
  * the same way: do not copy the defaults, override only the variables
package/dist/themes/_template.css CHANGED
@@ -17,12 +17,13 @@
17
17
  * `@tailor-platform/app-shell/styles` in the consuming app.
18
18
  *
19
19
  * DO NOT SET (inherited from `:root` in default.css):
20
- * --ring, --sidebar-*, --primitive-* (colour scales), --status-*, --alert-*,
21
- * --app-shell-type-*
20
+ * --ring, --sidebar-*, --backdrop, --primitive-* (colour scales), --status-*, --alert-*,
21
+ * --destructive, --destructive-foreground, --type-*
22
22
  * The colour roles --{info|success|warning|danger|neutral}-{role} also inherit.
23
23
  * Override a role only to recolour the status components (Badge, Alert, ...)
24
- * for this palette; never set --status-* or --alert-*, they alias the roles.
25
- * Typography roles (--app-shell-type-*) inherit too: do not copy the defaults,
24
+ * for this palette; never set --status-*, --alert-* or --destructive*, they alias the roles
25
+ * (--destructive is the danger solid; recolour it with --danger-solid).
26
+ * Typography roles (--type-*) inherit too: do not copy the defaults,
26
27
  * override only the variables whose values differ.
27
28
  *
28
29
  * PREVIEW: `/showcase/colors` in the Vite example app.
@@ -60,7 +61,6 @@
60
61
  --sidebar-border: rgba(229, 229, 229, 1);
61
62
 
62
63
  /* ── 4. PALETTE — optional overrides (else inherited from :root) ──────── */
63
- --destructive: rgba(220, 38, 38, 1);
64
64
  --radius: 0.625rem;
65
65
  --chart-1: /* brand-adjacent */;
66
66
  --chart-2: /* ... */;
@@ -104,7 +104,6 @@
104
104
  --sidebar-border: rgba(255, 255, 255, 0.1);
105
105
 
106
106
  /* ── 4. PALETTE (dark overrides) ─────────────────────────────────────── */
107
- --destructive: rgba(248, 113, 113, 1);
108
107
  --chart-1: /* ... */;
109
108
  --chart-2: /* ... */;
110
109
  --chart-3: /* ... */;
package/dist/themes/bloom.css CHANGED
@@ -34,7 +34,6 @@
34
34
  --sidebar-border: rgba(0, 0, 0, 0.08);
35
35
 
36
36
  /* ── 4. PALETTE ───────────────────────────────────────────────────────── */
37
- --destructive: rgba(220, 38, 38, 1);
38
37
  --radius: 1rem;
39
38
  --chart-1: rgba(83, 90, 232, 1);
40
39
  --chart-2: rgba(0, 151, 156, 1);
@@ -78,7 +77,6 @@
78
77
  --sidebar-border: rgba(255, 255, 255, 0.08);
79
78
 
80
79
  /* ── 4. PALETTE (dark) ────────────────────────────────────────────────── */
81
- --destructive: rgba(248, 113, 113, 1);
82
80
  --chart-1: rgba(131, 138, 247, 1);
83
81
  --chart-2: rgba(45, 191, 196, 1);
84
82
  --chart-3: rgba(94, 234, 212, 1);
package/dist/themes/cream.css CHANGED
@@ -34,7 +34,6 @@
34
34
  --sidebar-border: rgba(0, 0, 0, 0.08);
35
35
 
36
36
  /* ── 4. PALETTE ───────────────────────────────────────────────────────── */
37
- --destructive: rgba(220, 38, 38, 1);
38
37
  --radius: 1rem;
39
38
  --chart-1: rgba(83, 90, 232, 1);
40
39
  --chart-2: rgba(0, 151, 156, 1);
@@ -78,7 +77,6 @@
78
77
  --sidebar-border: rgba(255, 255, 255, 0.08);
79
78
 
80
79
  /* ── 4. PALETTE (dark) ────────────────────────────────────────────────── */
81
- --destructive: rgba(248, 113, 113, 1);
82
80
  --chart-1: rgba(131, 138, 247, 1);
83
81
  --chart-2: rgba(45, 191, 196, 1);
84
82
  --chart-3: rgba(94, 234, 212, 1);
package/dist/themes/default.css CHANGED
@@ -8,12 +8,12 @@
8
8
  color-scheme: light;
9
9
 
10
10
  /* ── 1. BRAND ─────────────────────────────────────────────────────────── */
11
- --primary: rgba(23, 23, 23, 1);
12
- --primary-foreground: rgba(250, 250, 250, 1);
13
- --secondary: rgba(245, 245, 245, 1);
14
- --secondary-foreground: rgba(23, 23, 23, 1);
11
+ --primary: var(--primitive-gray-900);
12
+ --primary-foreground: var(--primitive-gray-50);
13
+ --secondary: var(--primitive-gray-100);
14
+ --secondary-foreground: var(--primitive-gray-900);
15
15
  --accent: rgb(237, 237, 237);
16
- --accent-foreground: rgba(10, 10, 10, 1);
16
+ --accent-foreground: var(--primitive-gray-950);
17
17
 
18
18
  /* ── 2. SHELL GRADIENT — not used (flat palette) ──────────────────────── */
19
19
 
@@ -24,25 +24,26 @@
24
24
  --sidebar-accent: var(--accent);
25
25
  --sidebar-accent-foreground: var(--accent-foreground);
26
26
  --sidebar-ring: var(--ring);
27
+ --backdrop: var(--primitive-black-a7);
27
28
 
28
29
  /* ── 4. SYSTEM ────────────────────────────────────────────────────────── */
29
- --background: rgba(250, 250, 250, 1);
30
+ --background: var(--primitive-gray-50);
30
31
  --foreground: var(--primitive-gray-950);
31
- --card: rgba(255, 255, 255, 1);
32
- --card-foreground: rgba(10, 10, 10, 1);
33
- --popover: rgba(255, 255, 255, 1);
34
- --popover-foreground: rgba(10, 10, 10, 1);
35
- --muted: rgba(245, 245, 245, 1);
32
+ --card: var(--primitive-white);
33
+ --card-foreground: var(--primitive-gray-950);
34
+ --popover: var(--primitive-white);
35
+ --popover-foreground: var(--primitive-gray-950);
36
+ --muted: var(--primitive-gray-100);
36
37
  --muted-foreground: var(--primitive-gray-500);
37
38
  --border: var(--primitive-gray-200);
38
39
  --input: var(--primitive-gray-200);
39
- --sidebar: rgba(250, 250, 250, 1);
40
- --sidebar-foreground: rgba(10, 10, 10, 1);
41
- --sidebar-border: rgba(229, 229, 229, 1);
40
+ --sidebar: var(--primitive-gray-50);
41
+ --sidebar-foreground: var(--primitive-gray-950);
42
+ --sidebar-border: var(--primitive-gray-200);
42
43
 
43
44
  /* ── 5. PALETTE ───────────────────────────────────────────────────────── */
44
- --destructive: rgba(220, 38, 38, 1);
45
- --destructive-foreground: rgba(254, 242, 242, 1);
45
+ --destructive: var(--danger-solid);
46
+ --destructive-foreground: var(--danger-contrast);
46
47
  --radius: 0.625rem;
47
48
  --chart-1: rgba(234, 88, 12, 1);
48
49
  --chart-2: rgba(13, 148, 136, 1);
@@ -65,31 +66,31 @@
65
66
  color-scheme: dark;
66
67
 
67
68
  /* ── 1. BRAND (dark) ──────────────────────────────────────────────────── */
68
- --primary: rgba(229, 229, 229, 1);
69
- --primary-foreground: rgba(23, 23, 23, 1);
70
- --secondary: rgba(38, 38, 38, 1);
71
- --secondary-foreground: rgba(250, 250, 250, 1);
69
+ --primary: var(--primitive-gray-200);
70
+ --primary-foreground: var(--primitive-gray-900);
71
+ --secondary: var(--primitive-gray-800);
72
+ --secondary-foreground: var(--primitive-gray-50);
72
73
  --accent: rgb(48, 48, 48);
73
- --accent-foreground: rgba(250, 250, 250, 1);
74
+ --accent-foreground: var(--primitive-gray-50);
74
75
 
75
76
  /* ── 4. SYSTEM (dark) ─────────────────────────────────────────────────── */
76
- --background: rgba(10, 10, 10, 1);
77
+ --background: var(--primitive-gray-950);
77
78
  --foreground: var(--primitive-gray-50);
78
- --card: rgba(23, 23, 23, 1);
79
- --card-foreground: rgba(250, 250, 250, 1);
80
- --popover: rgba(38, 38, 38, 1);
81
- --popover-foreground: rgba(250, 250, 250, 1);
82
- --muted: rgba(38, 38, 38, 1);
79
+ --card: var(--primitive-gray-900);
80
+ --card-foreground: var(--primitive-gray-50);
81
+ --popover: var(--primitive-gray-800);
82
+ --popover-foreground: var(--primitive-gray-50);
83
+ --muted: var(--primitive-gray-800);
83
84
  --muted-foreground: var(--primitive-gray-400);
84
- --border: rgba(255, 255, 255, 0.1);
85
- --input: rgba(255, 255, 255, 0.15);
86
- --sidebar: rgba(10, 10, 10, 1);
87
- --sidebar-foreground: rgba(250, 250, 250, 1);
88
- --sidebar-border: rgba(255, 255, 255, 0.1);
85
+ --border: var(--primitive-white-a2);
86
+ --input: var(--primitive-white-a3);
87
+ --sidebar: var(--primitive-gray-950);
88
+ --sidebar-foreground: var(--primitive-gray-50);
89
+ --sidebar-border: var(--primitive-white-a2);
89
90
 
90
91
  /* ── 5. PALETTE (dark) ────────────────────────────────────────────────── */
91
- --destructive: rgba(248, 113, 113, 1);
92
- --destructive-foreground: rgba(254, 242, 242, 1);
92
+ --destructive: var(--danger-solid);
93
+ --destructive-foreground: var(--danger-contrast);
93
94
  --chart-1: rgba(29, 78, 216, 1);
94
95
  --chart-2: rgba(16, 185, 129, 1);
95
96
  --chart-3: rgba(245, 158, 11, 1);
@@ -112,8 +113,11 @@
112
113
  * resolve to opaque hex.
113
114
  *
114
115
  * Gray is the Tailwind `neutral` family (the values this palette already used)
115
- * and is the same in both modes, so it is declared once; the SYSTEM text and
116
- * line tokens (4) read it. Surfaces stay literal: they are theme inputs.
116
+ * and is the same in both modes, so it is declared once. White and the white /
117
+ * black alpha scales are declared with it. The BRAND (1) and SYSTEM (4) tokens
118
+ * of this palette read these scales. Other palettes still set their own
119
+ * literal values; the scales are not a theme input yet. `--accent` and the
120
+ * shadows have no step and stay literal.
117
121
  */
118
122
  :root {
119
123
  /* gray — both modes */
@@ -129,6 +133,33 @@
129
133
  --primitive-gray-900: #171717;
130
134
  --primitive-gray-950: #0a0a0a;
131
135
 
136
+ /* white, and white / black alpha — both modes (Radix whiteA / blackA) */
137
+ --primitive-white: #ffffff;
138
+ --primitive-white-a1: rgba(255, 255, 255, 0.05);
139
+ --primitive-white-a2: rgba(255, 255, 255, 0.1);
140
+ --primitive-white-a3: rgba(255, 255, 255, 0.15);
141
+ --primitive-white-a4: rgba(255, 255, 255, 0.2);
142
+ --primitive-white-a5: rgba(255, 255, 255, 0.3);
143
+ --primitive-white-a6: rgba(255, 255, 255, 0.4);
144
+ --primitive-white-a7: rgba(255, 255, 255, 0.5);
145
+ --primitive-white-a8: rgba(255, 255, 255, 0.6);
146
+ --primitive-white-a9: rgba(255, 255, 255, 0.7);
147
+ --primitive-white-a10: rgba(255, 255, 255, 0.8);
148
+ --primitive-white-a11: rgba(255, 255, 255, 0.9);
149
+ --primitive-white-a12: rgba(255, 255, 255, 0.95);
150
+ --primitive-black-a1: rgba(0, 0, 0, 0.05);
151
+ --primitive-black-a2: rgba(0, 0, 0, 0.1);
152
+ --primitive-black-a3: rgba(0, 0, 0, 0.15);
153
+ --primitive-black-a4: rgba(0, 0, 0, 0.2);
154
+ --primitive-black-a5: rgba(0, 0, 0, 0.3);
155
+ --primitive-black-a6: rgba(0, 0, 0, 0.4);
156
+ --primitive-black-a7: rgba(0, 0, 0, 0.5);
157
+ --primitive-black-a8: rgba(0, 0, 0, 0.6);
158
+ --primitive-black-a9: rgba(0, 0, 0, 0.7);
159
+ --primitive-black-a10: rgba(0, 0, 0, 0.8);
160
+ --primitive-black-a11: rgba(0, 0, 0, 0.9);
161
+ --primitive-black-a12: rgba(0, 0, 0, 0.95);
162
+
132
163
  /* hues — light */
133
164
  --primitive-blue-1: #f7f8f9;
134
165
  --primitive-blue-2: #f0f4fa;
@@ -435,48 +466,52 @@
435
466
  *
436
467
  * Four variables per role: size, line-height (unitless ratio), weight and
437
468
  * letter-spacing. theme.bridge.css maps them to `text-<role>` utilities.
438
- * Palettes inherit these; override `--app-shell-type-*` on `:root` to change
469
+ * Palettes inherit these; override `--type-*` on `:root` to change
439
470
  * a role. See decisions/typography-roles.md.
471
+ *
472
+ * 1.17.0 shipped these as `--app-shell-type-*`. theme.bridge.css reads the
473
+ * old name first, so an override of an old name keeps working. The old names
474
+ * are deprecated and will be removed in the next major.
440
475
  */
441
476
  :root {
442
- --app-shell-type-heading-lg-size: 1.5rem;
443
- --app-shell-type-heading-lg-line-height: calc(32 / 24);
444
- --app-shell-type-heading-lg-weight: 700;
445
- --app-shell-type-heading-lg-letter-spacing: -0.025em;
446
- --app-shell-type-heading-md-size: 1.125rem;
447
- --app-shell-type-heading-md-line-height: calc(28 / 18);
448
- --app-shell-type-heading-md-weight: 600;
449
- --app-shell-type-heading-md-letter-spacing: 0em;
450
- --app-shell-type-heading-sm-size: 0.875rem;
451
- --app-shell-type-heading-sm-line-height: calc(20 / 14);
452
- --app-shell-type-heading-sm-weight: 600;
453
- --app-shell-type-heading-sm-letter-spacing: 0em;
454
- --app-shell-type-body-md-size: 0.875rem;
455
- --app-shell-type-body-md-line-height: calc(20 / 14);
456
- --app-shell-type-body-md-weight: 400;
457
- --app-shell-type-body-md-letter-spacing: 0em;
458
- --app-shell-type-body-sm-size: 0.75rem;
459
- --app-shell-type-body-sm-line-height: calc(16 / 12);
460
- --app-shell-type-body-sm-weight: 400;
461
- --app-shell-type-body-sm-letter-spacing: 0em;
462
- --app-shell-type-label-md-size: 0.875rem;
463
- --app-shell-type-label-md-line-height: calc(20 / 14);
464
- --app-shell-type-label-md-weight: 500;
465
- --app-shell-type-label-md-letter-spacing: 0em;
466
- --app-shell-type-label-sm-size: 0.75rem;
467
- --app-shell-type-label-sm-line-height: calc(16 / 12);
468
- --app-shell-type-label-sm-weight: 500;
469
- --app-shell-type-label-sm-letter-spacing: 0em;
470
- --app-shell-type-code-sm-size: 0.75rem;
471
- --app-shell-type-code-sm-line-height: calc(18 / 12);
472
- --app-shell-type-code-sm-weight: 400;
473
- --app-shell-type-code-sm-letter-spacing: 0em;
474
- --app-shell-type-body-md-relaxed-size: 0.875rem;
475
- --app-shell-type-body-md-relaxed-line-height: calc(24 / 14);
476
- --app-shell-type-body-md-relaxed-weight: 400;
477
- --app-shell-type-body-md-relaxed-letter-spacing: 0em;
478
- --app-shell-type-body-sm-relaxed-size: 0.75rem;
479
- --app-shell-type-body-sm-relaxed-line-height: calc(20 / 12);
480
- --app-shell-type-body-sm-relaxed-weight: 400;
481
- --app-shell-type-body-sm-relaxed-letter-spacing: 0em;
477
+ --type-heading-lg-size: 1.5rem;
478
+ --type-heading-lg-line-height: calc(32 / 24);
479
+ --type-heading-lg-weight: 700;
480
+ --type-heading-lg-letter-spacing: -0.025em;
481
+ --type-heading-md-size: 1.125rem;
482
+ --type-heading-md-line-height: calc(28 / 18);
483
+ --type-heading-md-weight: 600;
484
+ --type-heading-md-letter-spacing: 0em;
485
+ --type-heading-sm-size: 0.875rem;
486
+ --type-heading-sm-line-height: calc(20 / 14);
487
+ --type-heading-sm-weight: 600;
488
+ --type-heading-sm-letter-spacing: 0em;
489
+ --type-body-md-size: 0.875rem;
490
+ --type-body-md-line-height: calc(20 / 14);
491
+ --type-body-md-weight: 400;
492
+ --type-body-md-letter-spacing: 0em;
493
+ --type-body-sm-size: 0.75rem;
494
+ --type-body-sm-line-height: calc(16 / 12);
495
+ --type-body-sm-weight: 400;
496
+ --type-body-sm-letter-spacing: 0em;
497
+ --type-label-md-size: 0.875rem;
498
+ --type-label-md-line-height: calc(20 / 14);
499
+ --type-label-md-weight: 500;
500
+ --type-label-md-letter-spacing: 0em;
501
+ --type-label-sm-size: 0.75rem;
502
+ --type-label-sm-line-height: calc(16 / 12);
503
+ --type-label-sm-weight: 500;
504
+ --type-label-sm-letter-spacing: 0em;
505
+ --type-code-sm-size: 0.75rem;
506
+ --type-code-sm-line-height: calc(18 / 12);
507
+ --type-code-sm-weight: 400;
508
+ --type-code-sm-letter-spacing: 0em;
509
+ --type-body-md-relaxed-size: 0.875rem;
510
+ --type-body-md-relaxed-line-height: calc(24 / 14);
511
+ --type-body-md-relaxed-weight: 400;
512
+ --type-body-md-relaxed-letter-spacing: 0em;
513
+ --type-body-sm-relaxed-size: 0.75rem;
514
+ --type-body-sm-relaxed-line-height: calc(20 / 12);
515
+ --type-body-sm-relaxed-weight: 400;
516
+ --type-body-sm-relaxed-letter-spacing: 0em;
482
517
  }