Skip to content
This repository was archived by the owner on Nov 26, 2024. It is now read-only.

Commit 3bb46d9

Browse files
georgewrmarshallgeorgewrmarshall
committed
feat: adding initial spacing token
1 parent 52fab7e commit 3bb46d9

File tree

10 files changed

+510
-0
lines changed

10 files changed

+510
-0
lines changed

‎docs/Spacing.mdx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
2+
import * as SpacingStories from './Spacing.stories';
3+
4+
<Meta title="Tokens/Spacing" />
5+
6+
# Spacing
7+
8+
Spacing tokens are used to maintain consistent layout and whitespace throughout the application. They follow a scale that provides a range of sizes for various layout needs. It follows the [Tailwind CSS spacing](https://tailwindcss.com/docs/customizing-spacing).
9+
10+
<Canvas>
11+
<Story story={SpacingStories.AllSpacings} />
12+
</Canvas>
13+
14+
## Usage
15+
16+
Spacing tokens can be used in both CSS and CSS-in-JS contexts. The table below shows the name, size in rem, pixels, and how to access each spacing token in JS and CSS.
17+
18+
| Name | Size | Pixels | JS | CSS |
19+
| ---- | -------- | ------ | -------------- | -------------------- |
20+
| 0 | 0px | 0px | `spacing[0]` | `var(--spacing-0)` |
21+
| px | 1px | 1px | `spacing.px` | `var(--spacing-px)` |
22+
| 0.5 | 0.125rem | 2px | `spacing[0.5]` | `var(--spacing-0.5)` |
23+
| 1 | 0.25rem | 4px | `spacing[1]` | `var(--spacing-1)` |
24+
| 1.5 | 0.375rem | 6px | `spacing[1.5]` | `var(--spacing-1.5)` |
25+
| 2 | 0.5rem | 8px | `spacing[2]` | `var(--spacing-2)` |
26+
| 2.5 | 0.625rem | 10px | `spacing[2.5]` | `var(--spacing-2.5)` |
27+
| 3 | 0.75rem | 12px | `spacing[3]` | `var(--spacing-3)` |
28+
| 3.5 | 0.875rem | 14px | `spacing[3.5]` | `var(--spacing-3.5)` |
29+
| 4 | 1rem | 16px | `spacing[4]` | `var(--spacing-4)` |
30+
| 5 | 1.25rem | 20px | `spacing[5]` | `var(--spacing-5)` |
31+
| 6 | 1.5rem | 24px | `spacing[6]` | `var(--spacing-6)` |
32+
| 7 | 1.75rem | 28px | `spacing[7]` | `var(--spacing-7)` |
33+
| 8 | 2rem | 32px | `spacing[8]` | `var(--spacing-8)` |
34+
| 9 | 2.25rem | 36px | `spacing[9]` | `var(--spacing-9)` |
35+
| 10 | 2.5rem | 40px | `spacing[10]` | `var(--spacing-10)` |
36+
| 11 | 2.75rem | 44px | `spacing[11]` | `var(--spacing-11)` |
37+
| 12 | 3rem | 48px | `spacing[12]` | `var(--spacing-12)` |
38+
| 14 | 3.5rem | 56px | `spacing[14]` | `var(--spacing-14)` |
39+
| 16 | 4rem | 64px | `spacing[16]` | `var(--spacing-16)` |
40+
| 20 | 5rem | 80px | `spacing[20]` | `var(--spacing-20)` |
41+
| 24 | 6rem | 96px | `spacing[24]` | `var(--spacing-24)` |
42+
| 28 | 7rem | 112px | `spacing[28]` | `var(--spacing-28)` |
43+
| 32 | 8rem | 128px | `spacing[32]` | `var(--spacing-32)` |
44+
| 36 | 9rem | 144px | `spacing[36]` | `var(--spacing-36)` |
45+
| 40 | 10rem | 160px | `spacing[40]` | `var(--spacing-40)` |
46+
| 44 | 11rem | 176px | `spacing[44]` | `var(--spacing-44)` |
47+
| 48 | 12rem | 192px | `spacing[48]` | `var(--spacing-48)` |
48+
| 52 | 13rem | 208px | `spacing[52]` | `var(--spacing-52)` |
49+
| 56 | 14rem | 224px | `spacing[56]` | `var(--spacing-56)` |
50+
| 60 | 15rem | 240px | `spacing[60]` | `var(--spacing-60)` |
51+
| 64 | 16rem | 256px | `spacing[64]` | `var(--spacing-64)` |
52+
| 72 | 18rem | 288px | `spacing[72]` | `var(--spacing-72)` |
53+
| 80 | 20rem | 320px | `spacing[80]` | `var(--spacing-80)` |
54+
| 96 | 24rem | 384px | `spacing[96]` | `var(--spacing-96)` |

‎docs/Spacing.stories.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from 'react';
2+
import type { Meta, StoryObj } from '@storybook/react';
3+
import { SpacingSwatch, Text } from './components';
4+
import { spacing } from '../src/js/spacing/spacing';
5+
import README from './Spacing.mdx';
6+
7+
const meta: Meta = {
8+
title: 'Tokens/Spacing',
9+
parameters: {
10+
docs: {
11+
page: README,
12+
},
13+
},
14+
};
15+
16+
export default meta;
17+
18+
const spacingData = [
19+
{ name: '0', size: '0px', pixels: '0px', value: spacing['0'] },
20+
{ name: 'px', size: '1px', pixels: '1px', value: spacing.px },
21+
{ name: '0.5', size: '0.125rem', pixels: '2px', value: spacing['0.5'] },
22+
{ name: '1', size: '0.25rem', pixels: '4px', value: spacing['1'] },
23+
{ name: '1.5', size: '0.375rem', pixels: '6px', value: spacing['1.5'] },
24+
{ name: '2', size: '0.5rem', pixels: '8px', value: spacing['2'] },
25+
{ name: '2.5', size: '0.625rem', pixels: '10px', value: spacing['2.5'] },
26+
{ name: '3', size: '0.75rem', pixels: '12px', value: spacing['3'] },
27+
{ name: '3.5', size: '0.875rem', pixels: '14px', value: spacing['3.5'] },
28+
{ name: '4', size: '1rem', pixels: '16px', value: spacing['4'] },
29+
{ name: '5', size: '1.25rem', pixels: '20px', value: spacing['5'] },
30+
{ name: '6', size: '1.5rem', pixels: '24px', value: spacing['6'] },
31+
{ name: '7', size: '1.75rem', pixels: '28px', value: spacing['7'] },
32+
{ name: '8', size: '2rem', pixels: '32px', value: spacing['8'] },
33+
{ name: '9', size: '2.25rem', pixels: '36px', value: spacing['9'] },
34+
{ name: '10', size: '2.5rem', pixels: '40px', value: spacing['10'] },
35+
{ name: '11', size: '2.75rem', pixels: '44px', value: spacing['11'] },
36+
{ name: '12', size: '3rem', pixels: '48px', value: spacing['12'] },
37+
{ name: '14', size: '3.5rem', pixels: '56px', value: spacing['14'] },
38+
{ name: '16', size: '4rem', pixels: '64px', value: spacing['16'] },
39+
{ name: '20', size: '5rem', pixels: '80px', value: spacing['20'] },
40+
{ name: '24', size: '6rem', pixels: '96px', value: spacing['24'] },
41+
{ name: '28', size: '7rem', pixels: '112px', value: spacing['28'] },
42+
{ name: '32', size: '8rem', pixels: '128px', value: spacing['32'] },
43+
{ name: '36', size: '9rem', pixels: '144px', value: spacing['36'] },
44+
{ name: '40', size: '10rem', pixels: '160px', value: spacing['40'] },
45+
{ name: '44', size: '11rem', pixels: '176px', value: spacing['44'] },
46+
{ name: '48', size: '12rem', pixels: '192px', value: spacing['48'] },
47+
{ name: '52', size: '13rem', pixels: '208px', value: spacing['52'] },
48+
{ name: '56', size: '14rem', pixels: '224px', value: spacing['56'] },
49+
{ name: '60', size: '15rem', pixels: '240px', value: spacing['60'] },
50+
{ name: '64', size: '16rem', pixels: '256px', value: spacing['64'] },
51+
{ name: '72', size: '18rem', pixels: '288px', value: spacing['72'] },
52+
{ name: '80', size: '20rem', pixels: '320px', value: spacing['80'] },
53+
{ name: '96', size: '24rem', pixels: '384px', value: spacing['96'] },
54+
];
55+
56+
export const Default: StoryObj = {
57+
render: () => (
58+
<div>
59+
<Text as="p">Name | Size | Pixels</Text>
60+
{spacingData.map((item) => (
61+
<SpacingSwatch
62+
key={item.name}
63+
name={item.name}
64+
size={item.size}
65+
pixels={item.pixels}
66+
value={item.value}
67+
/>
68+
))}
69+
</div>
70+
),
71+
};

‎docs/components/SpacingSwatch/SpacingSwatch.stories.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import type { Meta, StoryObj } from '@storybook/react';
3+
import { SpacingSwatch } from './SpacingSwatch';
4+
5+
const meta: Meta<typeof SpacingSwatch> = {
6+
title: 'Documentation Components/SpacingSwatch',
7+
component: SpacingSwatch,
8+
argTypes: {
9+
name: { control: 'text' },
10+
size: { control: 'text' },
11+
pixels: { control: 'text' },
12+
value: { control: 'text' },
13+
},
14+
};
15+
16+
export default meta;
17+
18+
type Story = StoryObj<typeof SpacingSwatch>;
19+
20+
export const Default: Story = {
21+
args: {
22+
name: '4',
23+
size: '1rem',
24+
pixels: '16px',
25+
value: '1rem',
26+
},
27+
};

‎docs/components/SpacingSwatch/SpacingSwatch.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import { Text } from '../Text';
3+
4+
interface SpacingSwatchProps {
5+
name: string;
6+
size: string;
7+
pixels: string;
8+
value: string;
9+
}
10+
11+
export const SpacingSwatch: React.FC<SpacingSwatchProps> = ({
12+
name,
13+
size,
14+
pixels,
15+
value,
16+
}) => (
17+
<div>
18+
<Text as="p">
19+
<strong style={{ margin: 0, fontWeight: 'bold' }}>{name} </strong> |{' '}
20+
{size} | {pixels}
21+
</Text>
22+
<div
23+
style={{
24+
width: value,
25+
height: '24px',
26+
backgroundColor: 'var(--color-primary-default)',
27+
marginRight: '16px',
28+
}}
29+
/>
30+
</div>
31+
);

‎docs/components/SpacingSwatch/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { SpacingSwatch } from './SpacingSwatch';

‎docs/components/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export { ColorSwatch } from './ColorSwatch';
22
export { ColorSwatchGroup } from './ColorSwatchGroup';
3+
export { SpacingSwatch } from './SpacingSwatch';
34
export { Text } from './Text';

‎src/css/spacing.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/*
2+
* This spacing system follows Tailwind CSS default spacing scale.
3+
* For more information, see: https://tailwindcss.com/docs/customizing-spacing
4+
*/
5+
6+
:root {
7+
--spacing-0: 0px;
8+
--spacing-px: 1px;
9+
--spacing-0-5: 0.125rem;
10+
--spacing-1: 0.25rem;
11+
--spacing-1-5: 0.375rem;
12+
--spacing-2: 0.5rem;
13+
--spacing-2-5: 0.625rem;
14+
--spacing-3: 0.75rem;
15+
--spacing-3-5: 0.875rem;
16+
--spacing-4: 1rem;
17+
--spacing-5: 1.25rem;
18+
--spacing-6: 1.5rem;
19+
--spacing-7: 1.75rem;
20+
--spacing-8: 2rem;
21+
--spacing-9: 2.25rem;
22+
--spacing-10: 2.5rem;
23+
--spacing-11: 2.75rem;
24+
--spacing-12: 3rem;
25+
--spacing-14: 3.5rem;
26+
--spacing-16: 4rem;
27+
--spacing-20: 5rem;
28+
--spacing-24: 6rem;
29+
--spacing-28: 7rem;
30+
--spacing-32: 8rem;
31+
--spacing-36: 9rem;
32+
--spacing-40: 10rem;
33+
--spacing-44: 11rem;
34+
--spacing-48: 12rem;
35+
--spacing-52: 13rem;
36+
--spacing-56: 14rem;
37+
--spacing-60: 15rem;
38+
--spacing-64: 16rem;
39+
--spacing-72: 18rem;
40+
--spacing-80: 20rem;
41+
--spacing-96: 24rem;
42+
}

‎src/figma/spacing.json‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
{
2+
"spacing": {
3+
"0": {
4+
"value": "0px",
5+
"type": "spacing"
6+
},
7+
"px": {
8+
"value": "1px",
9+
"type": "spacing"
10+
},
11+
"0.5": {
12+
"value": "2px",
13+
"type": "spacing"
14+
},
15+
"1": {
16+
"value": "4px",
17+
"type": "spacing"
18+
},
19+
"1.5": {
20+
"value": "6px",
21+
"type": "spacing"
22+
},
23+
"2": {
24+
"value": "8px",
25+
"type": "spacing"
26+
},
27+
"2.5": {
28+
"value": "10px",
29+
"type": "spacing"
30+
},
31+
"3": {
32+
"value": "12px",
33+
"type": "spacing"
34+
},
35+
"3.5": {
36+
"value": "14px",
37+
"type": "spacing"
38+
},
39+
"4": {
40+
"value": "16px",
41+
"type": "spacing"
42+
},
43+
"5": {
44+
"value": "20px",
45+
"type": "spacing"
46+
},
47+
"6": {
48+
"value": "24px",
49+
"type": "spacing"
50+
},
51+
"7": {
52+
"value": "28px",
53+
"type": "spacing"
54+
},
55+
"8": {
56+
"value": "32px",
57+
"type": "spacing"
58+
},
59+
"9": {
60+
"value": "36px",
61+
"type": "spacing"
62+
},
63+
"10": {
64+
"value": "40px",
65+
"type": "spacing"
66+
},
67+
"11": {
68+
"value": "44px",
69+
"type": "spacing"
70+
},
71+
"12": {
72+
"value": "48px",
73+
"type": "spacing"
74+
},
75+
"14": {
76+
"value": "56px",
77+
"type": "spacing"
78+
},
79+
"16": {
80+
"value": "64px",
81+
"type": "spacing"
82+
},
83+
"20": {
84+
"value": "80px",
85+
"type": "spacing"
86+
},
87+
"24": {
88+
"value": "96px",
89+
"type": "spacing"
90+
},
91+
"28": {
92+
"value": "112px",
93+
"type": "spacing"
94+
},
95+
"32": {
96+
"value": "128px",
97+
"type": "spacing"
98+
},
99+
"36": {
100+
"value": "144px",
101+
"type": "spacing"
102+
},
103+
"40": {
104+
"value": "160px",
105+
"type": "spacing"
106+
},
107+
"44": {
108+
"value": "176px",
109+
"type": "spacing"
110+
},
111+
"48": {
112+
"value": "192px",
113+
"type": "spacing"
114+
},
115+
"52": {
116+
"value": "208px",
117+
"type": "spacing"
118+
},
119+
"56": {
120+
"value": "224px",
121+
"type": "spacing"
122+
},
123+
"60": {
124+
"value": "240px",
125+
"type": "spacing"
126+
},
127+
"64": {
128+
"value": "256px",
129+
"type": "spacing"
130+
},
131+
"72": {
132+
"value": "288px",
133+
"type": "spacing"
134+
},
135+
"80": {
136+
"value": "320px",
137+
"type": "spacing"
138+
},
139+
"96": {
140+
"value": "384px",
141+
"type": "spacing"
142+
}
143+
}
144+
}

0 commit comments

Comments
 (0)