Skip to content

Commit 3ac8b19

Browse files
wemra3Hiroki UemuraclaudeIzumiSyCopilot
authored
refactor(core): rename --app-shell-type-* to --type-* (#606)
* feat(core): alias --destructive to the danger solid role Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * feat(core): Button destructive uses the danger roles Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * refactor(core): text-destructive utilities use text-danger-text Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * refactor(core): invalid borders and focus rings use the danger roles Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * refactor(core): destructive tints use bg-danger-surface Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * refactor(core): themes inherit --destructive from the danger roles Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * test(core): cover destructive aliases and Button danger utilities, update snapshots Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * docs: document --destructive as the danger solid alias Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * chore: add changeset for the destructive danger alias Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * refactor(core): default palette surfaces read the gray, white and alpha scales * feat(core): add a --backdrop role for modal backdrops * docs: document --backdrop and the default palette reading the neutral scales * test(core): pin the default neutral token values and the --backdrop bridge * docs: correct the token step list and computed-value notes for the neutral scales * test(core): pin --foreground and --muted-foreground with the other neutral tokens * docs(decisions): keep the update to what this change does * docs(core): mark destructive tokens and utilities as deprecated --destructive, --destructive-foreground and their utilities will be removed in the next major (tailor-inc/platform-planning#2084), the same as --status-* and --alert-*. Button variant="destructive" stays undeprecated until a danger variant exists. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * refactor(core): rename --app-shell-type-* to --type-* The typography role variables were prefixed to follow --app-shell-font-sans, but that prefix exists only because --font-* is a Tailwind theme namespace. --type-* is not, so drop the prefix to match the colour roles and --semantic-shadow-*. The roles are not released yet (latest is 1.16.0), so no app depends on the old names. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * docs(core): list the destructive migration under 1.17.0 and fix the border replacement The destructive change ships in the same release as the colour roles, so the migration entry is 1.17.0. In the changeset, border-destructive maps to border-danger-solid for invalid states; border-danger-border is 1.67:1 on the card and is for decorative borders only. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(core): move the destructive migration to 1.18.0 and use the danger role in the selection bar 1.17.0 shipped without this change, so the migration entry now lists it under 1.18.0. The DataTable selection bar (added in 1.17.0) used `text-destructive` for destructive overflow actions. It now uses `text-danger-text`, the same as ActionPanel. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(core): keep the --app-shell-type-* names working after the rename 1.17.0 shipped the typography roles as `--app-shell-type-*`, so the rename is no longer free. Each `--type-*` now reads the matching `--app-shell-type-*` first (`var(--app-shell-type-<role>-<slot>, <default>)`), so an app that overrides an old name keeps its value. The old names are deprecated and will be removed in the next major. - The pending changeset this PR edited was released in 1.17.0, so this adds a new changeset. - theme-bridge.test.ts checks that every role variable reads its old name first, and reads the default from inside the fallback. - Styling guide and decisions/typography-roles.md describe the deprecated names. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(core): read the deprecated type names in the bridge so scoped overrides keep working The previous commit put the fallback in default.css (`--type-*: var(--app-shell-type-*, <default>)`). That resolves once on :root, so an old-name override set on any other element, such as `.dense-panel { --app-shell-type-body-md-size: ... }`, stopped working. The fallback now sits in theme.bridge.css: `--text-<role>: var(--app-shell-type-<role>-<slot>, var(--type-<role>-<slot>))`. Tailwind writes the chain into each utility, so it is resolved on the element that uses the utility. default.css keeps plain values. Checked in Chrome: old and new names both override on :root and on a nested element. - theme-bridge.test.ts checks that every bridge entry reads the same old name first. - typography-compile.test.ts expects the chain in the emitted utilities, and ignores the spaces Tailwind keeps from the formatter's line breaks. - The changeset notes that `getPropertyValue('--app-shell-type-*')` now returns an empty string. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * docs(core): list the tokens whose computed string changes, and name the version in the migration note - The changeset said the border colours "now read" the gray scale. `--foreground`, `--muted-foreground`, `--border` and `--input` already did in 1.17.0, and the dark-mode lines keep the same `rgba(...)` string. It now lists the tokens whose `getPropertyValue()` string changes. - The migration note now says "1.17.0 and earlier" instead of "releases before the default palette moved onto its colour scales". Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --------- Co-authored-by: Hiroki Uemura <hiroki_uemurapartners.tailor.tech@Hirokis-MacBook-Pro.local> Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com> Co-authored-by: Seiya IZUMI <IzumiSy@users.noreply.github.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: IzumiSy <982850+IzumiSy@users.noreply.github.com>
1 parent 37eb4c1 commit 3ac8b19

12 files changed

Lines changed: 245 additions & 115 deletions

File tree

‎.changeset/type-token-prefix.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
"@tailor-platform/app-shell": minor
3+
---
4+
5+
Rename the typography role variables from `--app-shell-type-<role>-<size|line-height|weight|letter-spacing>` to `--type-<role>-<size|line-height|weight|letter-spacing>`, to match the colour roles (`--danger-*`, ...) and `--semantic-shadow-*`.
6+
7+
The old names still work: each `text-*` utility reads the matching `--app-shell-type-*` first and falls back to `--type-*`, so an override such as `--app-shell-type-heading-md-size` keeps its effect, on `:root` or on any other element. The old names are deprecated and will be removed in the next major. Rename them in your CSS:
8+
9+
```css
10+
:root {
11+
--type-heading-md-size: 1.25rem; /* was --app-shell-type-heading-md-size */
12+
}
13+
```
14+
15+
The `text-*` utilities (`text-heading-md`, ...) do not change.
16+
17+
AppShell no longer defines the `--app-shell-type-*` variables. Code that reads them with `getComputedStyle(...).getPropertyValue()` gets an empty string; read `--type-*` instead.

‎decisions/typography-roles.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ Each role is a named set of four values: size, line height, weight, and letter s
3030

3131
### Two layers, as for colors
3232

33-
- `themes/default.css` holds the values as `--app-shell-type-<role>-<size|line-height|weight|letter-spacing>` on `:root`. A palette or an app can override them. The `--app-shell-` prefix follows the existing `--app-shell-font-sans` override variable and keeps these `:root` variables apart from variables defined by the app or other libraries.
33+
- `themes/default.css` holds the values as `--type-<role>-<size|line-height|weight|letter-spacing>` on `:root`. A palette or an app can override them. They have no `--app-shell-` prefix, like the colour roles and `--semantic-shadow-*`. `--app-shell-font-sans` needs the prefix because `--font-*` is a Tailwind theme namespace; `--type-*` is not, and the bridge writes `--text-<role>`, so the names do not clash with the app's Tailwind. 1.17.0 shipped the variables as `--app-shell-type-*` before this rename, so each bridge entry reads the old name first (`var(--app-shell-type-<role>-<slot>, var(--type-<role>-<slot>))`). The fallback sits in the bridge, not in `default.css`, so it is resolved on the element that uses the utility: an app that overrides an old name keeps its value on `:root` and on any other element. The old names are deprecated and will be removed in the next major.
3434
- `theme.bridge.css` maps them to Tailwind with `--text-<role>` and its `--line-height`, `--font-weight`, and `--letter-spacing` suffixes, inside the existing `@theme inline`.
3535

3636
`@theme inline` writes literal values into the utility. If the values sat in the bridge, they could not be overridden on `:root`. So the bridge holds only `var()` references.

‎docs-manifest.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1322,9 +1322,9 @@
13221322
"symbols": [],
13231323
"hashes": {
13241324
"typeSurface": null,
1325-
"outline": "08ea14945176cd57",
1325+
"outline": "3d954fbe6c0db30e",
13261326
"snapshot": null,
1327-
"outputMd": "01cfefbafc469e58",
1327+
"outputMd": "eefb47e1f52f10e1",
13281328
"examples": "4d19f4f688e0f0ac"
13291329
}
13301330
},
@@ -1694,7 +1694,7 @@
16941694
"packages/core/skills/app-shell-patterns/references/concepts/modules-and-resources.md": "bf15b5460f22d165",
16951695
"packages/core/skills/app-shell-patterns/references/concepts/routing-navigation.md": "8034c7f885994b29",
16961696
"packages/core/skills/app-shell-patterns/references/concepts/sidebar-navigation.md": "e342ef02dc2b9b86",
1697-
"packages/core/skills/app-shell-patterns/references/concepts/styling-theming.md": "01cfefbafc469e58",
1697+
"packages/core/skills/app-shell-patterns/references/concepts/styling-theming.md": "eefb47e1f52f10e1",
16981698
"packages/core/skills/app-shell-patterns/references/components/action-panel.md": "71794d4b561e4d4b",
16991699
"packages/core/skills/app-shell-patterns/references/components/activity-card.md": "4f386e49380fb0b0",
17001700
"packages/core/skills/app-shell-patterns/references/components/ai-chat.md": "824d1aa36bb7f194",

‎docs-src/concepts/styling-theming.docs.outline.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -314,12 +314,12 @@ On an `h1` to `h6` element, the `cream` and `bloom` palettes replace the role's
314314

315315
Always use `tabular-nums` for numbers that stack in a column — without it, digits jitter between rows.
316316

317-
**Change a role.** Each role is four CSS variables named `--app-shell-type-<role>-<size|line-height|weight|letter-spacing>`. Override them on `:root` to change a role for the whole app. Typography has no dark variant, so one override applies to light and dark mode.
317+
**Change a role.** Each role is four CSS variables named `--type-<role>-<size|line-height|weight|letter-spacing>`. Override them on `:root` to change a role for the whole app. Typography has no dark variant, so one override applies to light and dark mode. 1.17.0 named these variables `--app-shell-type-*`. The old names still work, but they are deprecated and will be removed in the next major; rename them to `--type-*`.
318318

319319
```css
320320
:root {
321-
--app-shell-type-heading-lg-size: 1.75rem;
322-
--app-shell-type-heading-lg-line-height: calc(36 / 28);
321+
--type-heading-lg-size: 1.75rem;
322+
--type-heading-lg-line-height: calc(36 / 28);
323323
}
324324
```
325325

‎docs/concepts/styling-theming.md‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/core/src/assets/theme-bridge.test.ts‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -71,19 +71,25 @@ describe("theme bridge", () => {
7171

7272
describe("typography roles", () => {
7373
const slots = ["size", "line-height", "weight", "letter-spacing"] as const;
74-
/** `--app-shell-type-<role>-<slot>` variables in the default palette, grouped by role. */
74+
/** `--type-<role>-<slot>` variables in the default palette, grouped by role. */
7575
const defined = new Map<string, Map<string, string>>();
7676
for (const m of defaultTheme.matchAll(
77-
/^\s*--app-shell-type-([a-z-]+)-(size|line-height|weight|letter-spacing):\s*([^;]+);/gm,
77+
/^\s*--type-([a-z-]+)-(size|line-height|weight|letter-spacing):\s*([^;]+);/gm,
7878
)) {
7979
const role = m[1];
8080
defined.set(role, (defined.get(role) ?? new Map()).set(m[2], m[3].trim()));
8181
}
82-
/** Bridge entries `--text-<role>[--<suffix>]: var(--app-shell-type-...)`, keyed by property name. */
82+
/**
83+
* Bridge entries `--text-<role>[--<suffix>]: var(--app-shell-type-X, var(--type-X))`,
84+
* keyed by property name. The value is the `--type-*` name, or a marker when the
85+
* entry does not read the same deprecated `--app-shell-type-*` name first.
86+
*/
8387
const bridgedText = new Map(
84-
[...bridge.matchAll(/^\s*(--text-[a-z-]+):\s*var\((--app-shell-type-[a-z-]+)\);/gm)].map(
85-
(m) => [m[1], m[2]],
86-
),
88+
[
89+
...bridge.matchAll(
90+
/^\s*(--text-[a-z-]+):\s*var\(\s*--app-shell-type-([a-z-]+),\s*var\(\s*--type-([a-z-]+)\s*\)\s*\);/gm,
91+
),
92+
].map((m) => [m[1], m[2] === m[3] ? `--type-${m[3]}` : `mismatched old name ${m[2]}`]),
8793
);
8894

8995
it("pins the role count at 10", () => {
@@ -107,12 +113,22 @@ describe("theme bridge", () => {
107113
const expected = new Map<string, string>();
108114
for (const role of defined.keys()) {
109115
for (const slot of slots) {
110-
expected.set(`--text-${role}${suffix[slot]}`, `--app-shell-type-${role}-${slot}`);
116+
expected.set(`--text-${role}${suffix[slot]}`, `--type-${role}-${slot}`);
111117
}
112118
}
113119
expect(bridgedText).toEqual(expected);
114120
});
115121

122+
it("reads the deprecated --app-shell-type-* name first in every bridge entry", () => {
123+
// 1.17.0 shipped the roles under --app-shell-type-*. The bridge resolves the
124+
// fallback on the element, so an old-name override keeps working at any scope.
125+
const typeEntries = [...bridge.matchAll(/^\s*(--text-[a-z-]+):\s*([^;]+);/gm)].filter((m) =>
126+
m[2].includes("--type-"),
127+
);
128+
expect(typeEntries.length).toBe(defined.size * slots.length);
129+
expect(typeEntries.filter((m) => !bridgedText.has(m[1])).map((m) => m[1])).toEqual([]);
130+
});
131+
116132
it("does not collide with a --color-* token that Tailwind resolves first", () => {
117133
// `text-<name>` resolves against --color-<name> before --text-<name>.
118134
const colors = [...bridge.matchAll(/^\s*--color-([a-z0-9-]+):/gm)].map((m) => m[1]);

‎packages/core/src/assets/theme.bridge.css‎

Lines changed: 126 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -44,47 +44,133 @@
4444
*
4545
* The `--text-*` namespace cannot set font-family. `text-code-sm` is used with
4646
* `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.
4752
*/
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+
);
88174

89175
--color-background: var(--background);
90176
--color-foreground: var(--foreground);

‎packages/core/src/assets/theme.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
* Inherited from default.css — do not duplicate in new palettes:
1919
* --ring, --sidebar-*, --backdrop, --primitive-* (colour scales), --status-*, --alert-*,
2020
* --destructive, --destructive-foreground (aliases of the danger roles),
21-
* --app-shell-type-* (typography roles).
21+
* --type-* (typography roles).
2222
* The colour roles --{intent}-{role} inherit too; a palette overrides them
2323
* only to recolour the status components. Typography roles are inherited
2424
* the same way: do not copy the defaults, override only the variables

‎packages/core/src/assets/themes/_template.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@
1818
*
1919
* DO NOT SET (inherited from `:root` in default.css):
2020
* --ring, --sidebar-*, --backdrop, --primitive-* (colour scales), --status-*, --alert-*,
21-
* --destructive, --destructive-foreground, --app-shell-type-*
21+
* --destructive, --destructive-foreground, --type-*
2222
* The colour roles --{info|success|warning|danger|neutral}-{role} also inherit.
2323
* Override a role only to recolour the status components (Badge, Alert, ...)
2424
* for this palette; never set --status-*, --alert-* or --destructive*, they alias the roles
2525
* (--destructive is the danger solid; recolour it with --danger-solid).
26-
* Typography roles (--app-shell-type-*) inherit too: do not copy the defaults,
26+
* Typography roles (--type-*) inherit too: do not copy the defaults,
2727
* override only the variables whose values differ.
2828
*
2929
* PREVIEW: `/showcase/colors` in the Vite example app.

0 commit comments

Comments
 (0)