Skip to content

Commit e1b78db

Browse files
jandradejandrade
authored
[WB-1887] Add new sizing tokens for ThunderBlocks (#2487)
## Summary: Add sizing primitive tokens to support the new tokens with rem units that will be used by the thunderblocks/classroom theme. This is done to offer a more flexible way to define sizes in the components that use these tokens by setting the size in rem units. Also modified the Storybook styles to use 50%/8px as the base font size to better match the rem units. The tokens were defined here: https://khanacademy.atlassian.net/wiki/spaces/WB/pages/3683483678/REMs Issue: https://khanacademy.atlassian.net/browse/WB-1887 ## Test plan: Navigate to the docs and see that the new sizing tokens are available. /?path=/docs/packages-tokens-sizing--docs Also verify that the font sizes in the storybook are preserved. Author: jandrade Reviewers: beaesguerra, jandrade Required Reviewers: Approved By: beaesguerra Checks: ✅ 12 checks were successful, ⏭️ 2 checks have been skipped Pull Request URL: #2487
1 parent 7d3f67e commit e1b78db

File tree

8 files changed

+202
-12
lines changed

8 files changed

+202
-12
lines changed

‎.changeset/sharp-pens-pull.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@khanacademy/wonder-blocks-tokens": minor
3+
---
4+
5+
Add sizing primitive tokens to support the new tokens with rem units that will be used by the thunderblocks/classroom theme

‎__docs__/wonder-blocks-tokens/__overview__.mdx

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,24 @@ Design tokens are a set of key-value pairs that define the visual and behavioral
1818
design attributes of our components. They are the primitives that define the
1919
building blocks of our design system.
2020

21-
These represent the design decisions at Khan Academy, such as:
22-
23-
- <a href="/?path=/docs/packages-tokens-border--docs">Border</a>
24-
- <a href="/?path=/docs/packages-tokens-semantic-color--docs">
25-
Semantic Colors
26-
</a>
27-
- <a href="/?path=/docs/packages-tokens-color--docs">Color Primitives</a>
28-
- <a href="/?path=/docs/packages-tokens-spacing--docs">Spacing</a>
29-
- <a href="/?path=/docs/packages-tokens-typography--docs">Typography</a>
30-
- <a href="/?path=/docs/packages-tokens-media-queries--docs">Media Queries</a>
21+
## Tokens
22+
23+
These represent the design decisions at Khan Academy.
24+
25+
### Primivites
26+
27+
- <a href="../?path=/docs/packages-tokens-border--docs">Border</a>
28+
- <a href="../?path=/docs/packages-tokens-color--docs">Color</a>
29+
- <a href="../?path=/docs/packages-tokens-sizing--docs">Sizing</a>
30+
- <a href="../?path=/docs/packages-tokens-spacing--docs">Spacing</a>
31+
- <a href="../?path=/docs/packages-tokens-typography--docs">Typography</a>
32+
- <a href="../?path=/docs/packages-tokens-media-queries--docs">Media Queries</a>
33+
34+
### Semantic
35+
36+
- <a href="../?path=/docs/packages-tokens-semantic-color--docs">
37+
Semantic Colors
38+
</a>
3139

3240
## Usage
3341

‎__docs__/wonder-blocks-tokens/tokens-sizing.mdx

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import {Meta, Source} from "@storybook/blocks";
2+
3+
import TokenTable from "../components/token-table";
4+
5+
import {View} from "@khanacademy/wonder-blocks-core";
6+
import * as tokens from "@khanacademy/wonder-blocks-tokens";
7+
8+
import ComponentInfo from "../components/component-info";
9+
import packageConfig from "../../packages/wonder-blocks-tokens/package.json";
10+
11+
<Meta title="Packages / Tokens / Sizing" />
12+
13+
# Sizing
14+
15+
<ComponentInfo name={packageConfig.name} version={packageConfig.version} />
16+
17+
All the available sizing values that can be used for margin, padding, width,
18+
height, border-width, font-size, line-height, etc.
19+
20+
Note that these values are represented in `rem` units. Using rem units allows
21+
the sizes to scale with the font size of the root element, which is set to
22+
50%/8px in our Design System. This means that the sizes will scale with the
23+
user's browser settings.
24+
25+
## Usage
26+
27+
You can use these sizes directly by importing `sizing` from the
28+
`wonder-blocks-tokens` package and accessing the named property like so:
29+
`sizing.size_200`.
30+
31+
```js
32+
import {sizing} from "@khanacademy/wonder-blocks-tokens";
33+
const styles = {padding: sizing.size_200};
34+
```
35+
36+
## Tokens
37+
38+
<TokenTable
39+
columns={[
40+
{
41+
label: "Token",
42+
cell: (row) => <code>sizing.{row.label}</code>,
43+
},
44+
{
45+
label: "Base unit multiplier",
46+
cell: (row) => row.value.replace("rem", "x"),
47+
},
48+
{
49+
label: "Value",
50+
cell: "value",
51+
},
52+
{
53+
label: "Pixels (equivalent)",
54+
cell: (row) => parseFloat(row.value.replace("rem", "") * 8),
55+
},
56+
{
57+
label: "Example",
58+
cell: (row) => (
59+
<View
60+
style={{
61+
backgroundColor: tokens.color.purple,
62+
height: row.value,
63+
}}
64+
>
65+
&nbsp;
66+
</View>
67+
),
68+
},
69+
]}
70+
tokens={tokens.sizing}
71+
/>
72+
73+
## Migrating from `spacing` to `sizing`
74+
75+
In the past, we had a `spacing` object that contained all the sizing tokens
76+
define in pixels. This object has been deprecated in favor of the `sizing`
77+
object, which now uses `rem` units. If you were using `spacing` before, you can
78+
easily migrate to `sizing` by replacing the following tokens:
79+
80+
```ts
81+
// Before
82+
import {spacing} from "@khanacademy/wonder-blocks-tokens";
83+
84+
{
85+
padding: `${spacing.medium_16}px ${spacing.large_24}px`,
86+
}
87+
88+
// After
89+
import {sizing} from "@khanacademy/wonder-blocks-tokens";
90+
91+
// Now you don't need to add the unit here as it's already included in the token
92+
{
93+
padding: `${sizing.size_200} ${sizing.size_300}`,
94+
}
95+
```
96+
97+
The mapping of the tokens is as follows:
98+
99+
| Spacing (old) | Sizing (new) |
100+
| --------------------- | ----------------- |
101+
| `spacing.xxxxSmall_2` | `sizing.size_025` |
102+
| `spacing.xxxSmall_4` | `sizing.size_050` |
103+
| `spacing.xxSmall_6` | `sizing.size_075` |
104+
| `spacing.xSmall_8` | `sizing.size_100` |
105+
| `spacing.small_12` | `sizing.size_150` |
106+
| `spacing.medium_16` | `sizing.size_200` |
107+
| `spacing.large_24` | `sizing.size_300` |
108+
| `spacing.xLarge_32` | `sizing.size_400` |
109+
| `spacing.xxLarge_48` | `sizing.size_600` |
110+
| `spacing.xxxLarge_64` | `sizing.size_800` |

‎packages/wonder-blocks-tokens/src/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import {border} from "./tokens/border";
33
import {color} from "./tokens/color";
44
import {font} from "./tokens/font";
5+
import {sizing} from "./tokens/sizing";
56
import {spacing} from "./tokens/spacing";
67

78
// media queries
@@ -19,6 +20,7 @@ export {
1920
border,
2021
color,
2122
font,
23+
sizing,
2224
spacing,
2325
/**
2426
* Media query breakpoints.

‎packages/wonder-blocks-tokens/src/tokens/sizing.ts

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/**
2+
* The baseline for the size tokens.
3+
*/
4+
const baseline = 8;
5+
6+
/**
7+
* Converts a number (px) to a rem value.
8+
*/
9+
function pxToRem(value: number): string {
10+
return `${value / baseline}rem`;
11+
}
12+
13+
/**
14+
* Tokens that define the sizing of elements. These values are expressed in
15+
* `rem` units.
16+
*
17+
* These tokens are multiples of 8px, the baseline for the design system.
18+
*
19+
* These tokens can be used for:
20+
* - Margin and padding
21+
* - Component sizes
22+
* - Typography
23+
*/
24+
export const sizing = {
25+
size_0: pxToRem(0),
26+
size_0125: pxToRem(1),
27+
size_025: pxToRem(2),
28+
size_050: pxToRem(4),
29+
size_075: pxToRem(6),
30+
size_100: pxToRem(8),
31+
size_125: pxToRem(10),
32+
size_150: pxToRem(12),
33+
size_200: pxToRem(16),
34+
size_225: pxToRem(18),
35+
size_250: pxToRem(20),
36+
size_300: pxToRem(24),
37+
size_400: pxToRem(32),
38+
size_500: pxToRem(40),
39+
size_600: pxToRem(48),
40+
size_700: pxToRem(56),
41+
size_800: pxToRem(64),
42+
size_900: pxToRem(72),
43+
size_1000: pxToRem(80),
44+
size_1100: pxToRem(88),
45+
size_1200: pxToRem(96),
46+
} as const;

‎packages/wonder-blocks-tokens/src/tokens/spacing.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
/**
2+
* NOTE: These tokens are going to be deprecated in favor of the new `sizing`
3+
* tokens.
4+
*/
15
export const spacing = {
26
// Named
37
xxxxSmall_2: 2,

‎static/sb-styles/preview.css

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
/**
22
* Overrides for the Storybook preview iframe.
33
*/
4+
html {
5+
font-size: 50%;
6+
}
7+
48
.sbdocs ul,
59
.sbdocs li,
610
.sbdocs p,
@@ -59,7 +63,7 @@
5963
}
6064

6165
/* only include the counter to the stories titles */
62-
.sb-anchor > h3::before {
66+
.sb-anchor>h3::before {
6367
counter-increment: story;
6468
color: var(--color-text-64);
6569
content: counter(story) ".";
@@ -79,3 +83,14 @@
7983
font-size: var(--typography-heading-size-xs);
8084
line-height: var(--typography-heading-line-height-xs);
8185
}
86+
87+
/* TOC wrapper */
88+
.sbdocs-content+div {
89+
width: 20rem;
90+
}
91+
92+
.sbdocs-content+div>* {
93+
width: 20rem;
94+
padding-top: 8rem;
95+
padding-bottom: 4rem;
96+
}

‎static/sb-styles/vars.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* Typography
77
*/
88
--typography-font-family: 'Source Serif Pro', sans-serif;
9-
--typography-base-size: clamp(0.88rem, 3vw, 1rem);
9+
--typography-base-size: clamp(0.88rem, 3vw, 2rem);
1010
--typography-base-line-height: 1.6;
1111
--typography-heading-size-xxl: calc(var(--typography-base-size) * 3.75); /* 60px */
1212
--typography-heading-line-height-xxl: calc(var(--typography-heading-size-xxl) * 1.1333333);

0 commit comments

Comments
 (0)