Skip to content

Commit 0bc27e7

Browse files
veejveej
committed
refactor typography tokens
1 parent 3237a6b commit 0bc27e7

File tree

10 files changed

+299
-237
lines changed

10 files changed

+299
-237
lines changed

‎packages/bento-design-system/src/Slider/Slider.css.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const slider = style({
88
// so their labels don't contribute to the vertical space, causing them to overlap with elements
99
// below the Slider.
1010
// This takes into account the height the label + the space between the label and the thumb
11-
paddingBottom: `calc(${vars.typography.body.sizes.medium.lineHeight} + 8)`,
11+
paddingBottom: `calc(${vars.lineHeight.bodyMedium} + 8)`,
1212
});
1313

1414
export const trackContainer = bentoSprinkles({

‎packages/bento-design-system/src/Typography/Body/Body.css.ts

+61-5
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,25 @@ export const bodyRecipe = strictRecipe({
66
base: bentoSprinkles({ fontFamily: "body" }),
77
variants: {
88
size: {
9-
small: bentoSprinkles({ fontSize: "bodySmall", lineHeight: "bodySmall" }),
10-
medium: bentoSprinkles({ fontSize: "bodyMedium", lineHeight: "bodyMedium" }),
11-
large: bentoSprinkles({ fontSize: "bodyLarge", lineHeight: "bodyLarge" }),
9+
small: bentoSprinkles({
10+
fontSize: "bodySmall",
11+
lineHeight: "bodySmall",
12+
letterSpacing: "bodySmall",
13+
}),
14+
medium: bentoSprinkles({
15+
fontSize: "bodyMedium",
16+
lineHeight: "bodyMedium",
17+
letterSpacing: "bodyMedium",
18+
}),
19+
large: bentoSprinkles({
20+
fontSize: "bodyLarge",
21+
lineHeight: "bodyLarge",
22+
letterSpacing: "bodyLarge",
23+
}),
1224
},
1325
weight: {
14-
default: bentoSprinkles({ fontWeight: "body" }),
15-
strong: bentoSprinkles({ fontWeight: "bodyStrong" }),
26+
default: {},
27+
strong: {},
1628
},
1729
color: {
1830
default: bentoSprinkles({ color: "textPrimary" }),
@@ -33,4 +45,48 @@ export const bodyRecipe = strictRecipe({
3345
true: ellipsis,
3446
},
3547
},
48+
compoundVariants: [
49+
{
50+
variants: {
51+
size: "small",
52+
weight: "default",
53+
},
54+
style: bentoSprinkles({ fontWeight: "bodySmall" }),
55+
},
56+
{
57+
variants: {
58+
size: "medium",
59+
weight: "default",
60+
},
61+
style: bentoSprinkles({ fontWeight: "bodyMedium" }),
62+
},
63+
{
64+
variants: {
65+
size: "large",
66+
weight: "default",
67+
},
68+
style: bentoSprinkles({ fontWeight: "bodyLarge" }),
69+
},
70+
{
71+
variants: {
72+
size: "small",
73+
weight: "strong",
74+
},
75+
style: bentoSprinkles({ fontWeight: "bodyStrongSmall" }),
76+
},
77+
{
78+
variants: {
79+
size: "medium",
80+
weight: "strong",
81+
},
82+
style: bentoSprinkles({ fontWeight: "bodyStrongMedium" }),
83+
},
84+
{
85+
variants: {
86+
size: "large",
87+
weight: "strong",
88+
},
89+
style: bentoSprinkles({ fontWeight: "bodyStrongLarge" }),
90+
},
91+
],
3692
});

‎packages/bento-design-system/src/Typography/Display/Display.css.ts

+19-4
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,27 @@ import { bentoSprinkles } from "../../internal";
33
import { ellipsis } from "../typography.css";
44

55
export const displayRecipe = strictRecipe({
6-
base: bentoSprinkles({ fontFamily: "display", fontWeight: "display", color: "textPrimary" }),
6+
base: bentoSprinkles({ fontFamily: "display", color: "textPrimary" }),
77
variants: {
88
size: {
9-
small: bentoSprinkles({ fontSize: "displaySmall", lineHeight: "displaySmall" }),
10-
medium: bentoSprinkles({ fontSize: "displayMedium", lineHeight: "displayMedium" }),
11-
large: bentoSprinkles({ fontSize: "displayLarge", lineHeight: "displayLarge" }),
9+
small: bentoSprinkles({
10+
fontSize: "displaySmall",
11+
lineHeight: "displaySmall",
12+
fontWeight: "displaySmall",
13+
letterSpacing: "displaySmall",
14+
}),
15+
medium: bentoSprinkles({
16+
fontSize: "displayMedium",
17+
lineHeight: "displayMedium",
18+
fontWeight: "displayMedium",
19+
letterSpacing: "displayMedium",
20+
}),
21+
large: bentoSprinkles({
22+
fontSize: "displayLarge",
23+
lineHeight: "displayLarge",
24+
fontWeight: "displayLarge",
25+
letterSpacing: "displayLarge",
26+
}),
1227
},
1328
color: {
1429
primary: bentoSprinkles({ color: "textPrimary" }),

‎packages/bento-design-system/src/Typography/Headline/Headline.css.ts

+19-4
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,27 @@ import { bentoSprinkles } from "../../internal";
33
import { ellipsis } from "../typography.css";
44

55
export const headlineRecipe = strictRecipe({
6-
base: bentoSprinkles({ fontFamily: "headline", fontWeight: "headline", color: "textPrimary" }),
6+
base: bentoSprinkles({ fontFamily: "headline", color: "textPrimary" }),
77
variants: {
88
size: {
9-
small: bentoSprinkles({ fontSize: "headlineSmall", lineHeight: "headlineSmall" }),
10-
medium: bentoSprinkles({ fontSize: "headlineMedium", lineHeight: "headlineMedium" }),
11-
large: bentoSprinkles({ fontSize: "headlineLarge", lineHeight: "headlineLarge" }),
9+
small: bentoSprinkles({
10+
fontSize: "headlineSmall",
11+
lineHeight: "headlineSmall",
12+
fontWeight: "headlineSmall",
13+
letterSpacing: "headlineSmall",
14+
}),
15+
medium: bentoSprinkles({
16+
fontSize: "headlineMedium",
17+
lineHeight: "headlineMedium",
18+
fontWeight: "headlineMedium",
19+
letterSpacing: "headlineMedium",
20+
}),
21+
large: bentoSprinkles({
22+
fontSize: "headlineLarge",
23+
lineHeight: "headlineLarge",
24+
fontWeight: "headlineLarge",
25+
letterSpacing: "headlineLarge",
26+
}),
1227
},
1328
color: {
1429
primary: bentoSprinkles({ color: "textPrimary" }),

‎packages/bento-design-system/src/Typography/Label/Label.css.ts

+7-1
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,26 @@ import { bentoSprinkles } from "../../internal/sprinkles.css";
33
import { ellipsis } from "../typography.css";
44

55
export const labelRecipe = strictRecipe({
6-
base: bentoSprinkles({ fontFamily: "label", fontWeight: "label" }),
6+
base: bentoSprinkles({ fontFamily: "label" }),
77
variants: {
88
size: {
99
small: bentoSprinkles({
1010
fontSize: "labelSmall",
1111
lineHeight: "labelSmall",
12+
fontWeight: "labelSmall",
13+
letterSpacing: "labelSmall",
1214
}),
1315
medium: bentoSprinkles({
1416
fontSize: "labelMedium",
1517
lineHeight: "labelMedium",
18+
fontWeight: "labelMedium",
19+
letterSpacing: "labelMedium",
1620
}),
1721
large: bentoSprinkles({
1822
fontSize: "labelLarge",
1923
lineHeight: "labelLarge",
24+
fontWeight: "labelLarge",
25+
letterSpacing: "labelLarge",
2026
}),
2127
},
2228
color: {

‎packages/bento-design-system/src/Typography/Title/Title.css.ts

+15-3
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,27 @@ import { bentoSprinkles } from "../../internal/sprinkles.css";
33
import { ellipsis } from "../typography.css";
44

55
export const titleRecipe = strictRecipe({
6-
base: bentoSprinkles({ fontFamily: "title", fontWeight: "title" }),
6+
base: bentoSprinkles({ fontFamily: "title" }),
77
variants: {
88
size: {
99
small: bentoSprinkles({
1010
fontSize: "titleSmall",
1111
lineHeight: "titleSmall",
12+
fontWeight: "titleSmall",
13+
letterSpacing: "titleSmall",
14+
}),
15+
medium: bentoSprinkles({
16+
fontSize: "titleMedium",
17+
lineHeight: "titleMedium",
18+
fontWeight: "titleMedium",
19+
letterSpacing: "titleMedium",
20+
}),
21+
large: bentoSprinkles({
22+
fontSize: "titleLarge",
23+
lineHeight: "titleLarge",
24+
fontWeight: "titleLarge",
25+
letterSpacing: "titleLarge",
1226
}),
13-
medium: bentoSprinkles({ fontSize: "titleMedium", lineHeight: "titleMedium" }),
14-
large: bentoSprinkles({ fontSize: "titleLarge", lineHeight: "titleLarge" }),
1527
},
1628
color: {
1729
default: bentoSprinkles({ color: "textPrimary" }),

‎packages/bento-design-system/src/util/atoms.ts

+14-63
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,15 @@ const spacing = {
1414
120: 120,
1515
160: 160,
1616
} as const;
17-
18-
const negativeSpacing = {
19-
negative0: 0,
20-
negative4: 4,
21-
negative8: 8,
22-
negative12: 12,
23-
negative16: 16,
24-
negative24: 24,
25-
negative32: 32,
26-
negative40: 40,
27-
negative80: 80,
28-
negative120: 120,
29-
negative160: 160,
30-
} as const;
17+
const negativeSpacing: Record<`negative${keyof typeof spacing}`, number> = Object.entries(
18+
spacing
19+
).reduce(
20+
(acc, [key, value]) => ({
21+
...acc,
22+
[`negative${key}`]: value,
23+
}),
24+
{} as Record<`negative${keyof typeof spacing}`, number>
25+
);
3126

3227
const radius = {
3328
...spacing,
@@ -61,55 +56,11 @@ export const unconditionalProperties = {
6156
borderBottomLeftRadius: radius,
6257
borderBottomRightRadius: radius,
6358
textTransform: ["none", "uppercase", "lowercase", "capitalize"],
64-
fontFamily: {
65-
body: vars.typography.body.fontFamily,
66-
display: vars.typography.display.fontFamily,
67-
headline: vars.typography.headline.fontFamily,
68-
label: vars.typography.label.fontFamily,
69-
title: vars.typography.title.fontFamily,
70-
},
71-
fontWeight: {
72-
body: vars.typography.body.fontWeight.regular,
73-
bodyStrong: vars.typography.body.fontWeight.strong,
74-
display: vars.typography.display.fontWeight,
75-
headline: vars.typography.headline.fontWeight,
76-
label: vars.typography.label.fontWeight,
77-
title: vars.typography.title.fontWeight,
78-
},
79-
fontSize: {
80-
bodySmall: vars.typography.body.sizes.small.fontSize,
81-
bodyMedium: vars.typography.body.sizes.medium.fontSize,
82-
bodyLarge: vars.typography.body.sizes.large.fontSize,
83-
displaySmall: vars.typography.display.sizes.small.fontSize,
84-
displayMedium: vars.typography.display.sizes.medium.fontSize,
85-
displayLarge: vars.typography.display.sizes.large.fontSize,
86-
headlineSmall: vars.typography.headline.sizes.small.fontSize,
87-
headlineMedium: vars.typography.headline.sizes.medium.fontSize,
88-
headlineLarge: vars.typography.headline.sizes.large.fontSize,
89-
labelSmall: vars.typography.label.sizes.small.fontSize,
90-
labelMedium: vars.typography.label.sizes.medium.fontSize,
91-
labelLarge: vars.typography.label.sizes.large.fontSize,
92-
titleSmall: vars.typography.title.sizes.small.fontSize,
93-
titleMedium: vars.typography.title.sizes.medium.fontSize,
94-
titleLarge: vars.typography.title.sizes.large.fontSize,
95-
},
96-
lineHeight: {
97-
bodySmall: vars.typography.body.sizes.small.lineHeight,
98-
bodyMedium: vars.typography.body.sizes.medium.lineHeight,
99-
bodyLarge: vars.typography.body.sizes.large.lineHeight,
100-
displaySmall: vars.typography.display.sizes.small.lineHeight,
101-
displayMedium: vars.typography.display.sizes.medium.lineHeight,
102-
displayLarge: vars.typography.display.sizes.large.lineHeight,
103-
headlineSmall: vars.typography.headline.sizes.small.lineHeight,
104-
headlineMedium: vars.typography.headline.sizes.medium.lineHeight,
105-
headlineLarge: vars.typography.headline.sizes.large.lineHeight,
106-
labelSmall: vars.typography.label.sizes.small.lineHeight,
107-
labelMedium: vars.typography.label.sizes.medium.lineHeight,
108-
labelLarge: vars.typography.label.sizes.large.lineHeight,
109-
titleSmall: vars.typography.title.sizes.small.lineHeight,
110-
titleMedium: vars.typography.title.sizes.medium.lineHeight,
111-
titleLarge: vars.typography.title.sizes.large.lineHeight,
112-
},
59+
fontFamily: vars.fontFamily,
60+
fontWeight: vars.fontWeight,
61+
fontSize: vars.fontSize,
62+
lineHeight: vars.lineHeight,
63+
letterSpacing: vars.letterSpacing,
11364
height: {
11465
...spacing,
11566
full: "100%",

‎packages/bento-design-system/src/util/bentoTokens.ts

+9-19
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import { TypographySize } from "../Typography/TypographyProps";
22

3+
type TypographyFamily = "display" | "headline" | "title" | "body" | "label";
4+
type TypographyComponent = `${TypographyFamily}${Capitalize<TypographySize>}`;
5+
36
export type DataVisualizationPalette = "pastel" | "soft" | "bright" | "dark";
47
export type DataVisualizationColor =
58
| "Grey"
@@ -13,26 +16,13 @@ export type DataVisualizationColor =
1316
| "Violet"
1417
| "Pink";
1518

16-
type TypographyTokens<HasBold extends boolean> = {
17-
fontFamily: string;
18-
fontWeight: HasBold extends true ? { regular: string; strong: string } : string;
19-
sizes: Record<
20-
TypographySize,
21-
{
22-
fontSize: string;
23-
lineHeight: string;
24-
}
25-
>;
26-
};
27-
2819
export type BentoTokens = {
29-
typography: {
30-
body: TypographyTokens<true>;
31-
display: TypographyTokens<false>;
32-
headline: TypographyTokens<false>;
33-
label: TypographyTokens<false>;
34-
title: TypographyTokens<false>;
35-
};
20+
fontFamily: Record<TypographyFamily, string>;
21+
fontWeight: Record<TypographyComponent, string> &
22+
Record<`bodyStrong${Capitalize<TypographySize>}`, string>;
23+
fontSize: Record<TypographyComponent, string>;
24+
lineHeight: Record<TypographyComponent, string>;
25+
letterSpacing: Record<TypographyComponent, string>;
3626
brandColor: {
3727
brandPrimary: string;
3828
brandSecondary: string;

0 commit comments

Comments
 (0)