Skip to content

Commit e222427

Browse files
OneHunnidclaude
andcommitted
fix(box): flatten fontSize/fontWeight/lineHeight token groups; add changeset
The editorial typography tokens nest an `editorial.*` sub-namespace under fontSize, fontWeight, and lineHeight. Box's rainbow-sprinkles passed these groups straight into defineProperties, which expects a flat Record<string, string>, so the nested objects broke its overload typing — cascading into BoxProps and every <Box> consumer (preview, stories, specs) failing Type Check. Flatten those three groups via `flat` (the same treatment the `font` typography group already gets), so editorial.* tokens become flat keys and defineProperties typing holds. Also adds the missing changeset for the @launchpad-ui/tokens + @launchpad-ui/box changes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 8ced93a commit e222427

2 files changed

Lines changed: 18 additions & 4 deletions

File tree

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@launchpad-ui/tokens': minor
3+
'@launchpad-ui/box': patch
4+
---
5+
6+
Add a Sora-based editorial typography token family for brand-themed surfaces (empty states, hero moments, announcements). Adds `fontFamily.sora` (with an Inter fallback), pixel-named `fontSize.editorial.*`, `fontWeight.editorial.*`, unitless `lineHeight.editorial.*`, a new top-level `letterSpacing.editorial.*` group, seven `text.editorial.*` compositions, and `size.30`/`size.50` primitives. All values mirror the `ai-refresh` `_typography.scss` source of truth. Existing utility `text.*` compositions are unchanged.
7+
8+
Box's `rainbow-sprinkles` now flattens the `fontSize`, `fontWeight`, and `lineHeight` token groups (matching how the `font` typography group is already handled) so the nested `editorial.*` sub-namespaces don't break `defineProperties`' flat-record typing.

packages/box/src/styles/rainbow-sprinkles.css.ts

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { createRainbowSprinkles, defineProperties } from 'rainbow-sprinkles';
55

66
// biome-ignore lint/correctness/noUnusedVariables: ignore
77
const { bg, border, fill, shadow, text, ...global } = vars.color;
8-
const { text: typography, gradient } = vars;
8+
const { text: typography, gradient, fontSize, fontWeight, lineHeight } = vars;
99

1010
type FlattenObjectKeys<T extends Record<string, unknown>, Key = keyof T> = Key extends string
1111
? T[Key] extends Record<string, unknown>
@@ -19,13 +19,19 @@ type BorderKeys = FlattenObjectKeys<typeof border>;
1919
type FillKeys = FlattenObjectKeys<typeof fill>;
2020
type TextKeys = FlattenObjectKeys<typeof text>;
2121
type TypographyKeys = FlattenObjectKeys<typeof typography>;
22+
type FontSizeKeys = FlattenObjectKeys<typeof fontSize>;
23+
type FontWeightKeys = FlattenObjectKeys<typeof fontWeight>;
24+
type LineHeightKeys = FlattenObjectKeys<typeof lineHeight>;
2225

2326
const colors = flatten<typeof global, Record<GlobalKeys, string>>(global);
2427
const backgrounds = flatten<typeof bg, Record<BackgroundKeys, string>>(bg);
2528
const borders = flatten<typeof border, Record<BorderKeys, string>>(border);
2629
const fills = flatten<typeof fill, Record<FillKeys, string>>(fill);
2730
const texts = flatten<typeof text, Record<TextKeys, string>>(text);
2831
const typographies = flatten<typeof typography, Record<TypographyKeys, string>>(typography);
32+
const fontSizes = flatten<typeof fontSize, Record<FontSizeKeys, string>>(fontSize);
33+
const fontWeights = flatten<typeof fontWeight, Record<FontWeightKeys, string>>(fontWeight);
34+
const lineHeights = flatten<typeof lineHeight, Record<LineHeightKeys, string>>(lineHeight);
2935

3036
const responsiveProperties = defineProperties({
3137
conditions: {
@@ -70,9 +76,9 @@ const responsiveProperties = defineProperties({
7076
borderWidth: vars.borderWidth,
7177
font: typographies,
7278
fontFamily: vars.fontFamily,
73-
fontSize: vars.fontSize,
74-
fontWeight: vars.fontWeight,
75-
lineHeight: vars.lineHeight,
79+
fontSize: fontSizes,
80+
fontWeight: fontWeights,
81+
lineHeight: lineHeights,
7682
width: vars.size,
7783
height: vars.size,
7884
maxHeight: vars.size,

0 commit comments

Comments
 (0)