From 6aed6aa74573b08c862e29fe4ed577917123b4dc Mon Sep 17 00:00:00 2001 From: Garrett Bear Date: Mon, 3 Oct 2022 15:31:10 -0700 Subject: [PATCH 1/4] Add borer radii options and spacing tokens --- src/figma/tokens.json | 96 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 94 insertions(+), 2 deletions(-) diff --git a/src/figma/tokens.json b/src/figma/tokens.json index 94088666..ead29dbb 100644 --- a/src/figma/tokens.json +++ b/src/figma/tokens.json @@ -732,6 +732,94 @@ "textDecoration": "$textDecoration.none" }, "type": "typography" + }, + "spacing-0": { + "value": "0", + "type": "spacing" + }, + "spacing-0_25": { + "value": "2", + "type": "spacing" + }, + "spacing-0_5": { + "value": "4", + "type": "spacing" + }, + "spacing-1": { + "value": "8", + "type": "spacing" + }, + "spacing-1_5": { + "value": "12", + "type": "spacing" + }, + "spacing-2": { + "value": "16", + "type": "spacing" + }, + "spacing-3": { + "value": "24", + "type": "spacing" + }, + "spacing-4": { + "value": "32", + "type": "spacing" + }, + "spacing-5": { + "value": "40", + "type": "spacing" + }, + "spacing-6": { + "value": "48", + "type": "spacing" + }, + "spacing-7": { + "value": "56", + "type": "spacing" + }, + "spacing-8": { + "value": "64", + "type": "spacing" + }, + "spacing-9": { + "value": "72", + "type": "spacing" + }, + "spacing-10": { + "value": "80", + "type": "spacing" + }, + "none": { + "value": "0", + "type": "borderRadius" + }, + "xs": { + "value": "2", + "type": "borderRadius" + }, + "sm": { + "value": "4", + "type": "borderRadius" + }, + "md": { + "value": "6", + "type": "borderRadius" + }, + "lg": { + "value": "8", + "type": "borderRadius" + }, + "xl": { + "value": "12", + "type": "borderRadius" + }, + "circle": { + "value": "50%", + "type": "borderRadius" + }, + "pill": { + "value": "999", + "type": "borderRadius" } }, "light": { @@ -1476,6 +1564,10 @@ }, "$themes": [], "$metadata": { - "tokenSetOrder": ["global", "light", "dark"] + "tokenSetOrder": [ + "global", + "light", + "dark" + ] } -} +} \ No newline at end of file From af804283702a0fd6079a0eb92a0cb073f0306db9 Mon Sep 17 00:00:00 2001 From: Garrett Bear Date: Mon, 3 Oct 2022 15:51:58 -0700 Subject: [PATCH 2/4] fix naming --- src/figma/tokens.json | 176 +++++++++++++++++++++--------------------- 1 file changed, 90 insertions(+), 86 deletions(-) diff --git a/src/figma/tokens.json b/src/figma/tokens.json index ead29dbb..1daa9b00 100644 --- a/src/figma/tokens.json +++ b/src/figma/tokens.json @@ -733,93 +733,97 @@ }, "type": "typography" }, - "spacing-0": { - "value": "0", - "type": "spacing" - }, - "spacing-0_25": { - "value": "2", - "type": "spacing" - }, - "spacing-0_5": { - "value": "4", - "type": "spacing" - }, - "spacing-1": { - "value": "8", - "type": "spacing" - }, - "spacing-1_5": { - "value": "12", - "type": "spacing" - }, - "spacing-2": { - "value": "16", - "type": "spacing" - }, - "spacing-3": { - "value": "24", - "type": "spacing" - }, - "spacing-4": { - "value": "32", - "type": "spacing" - }, - "spacing-5": { - "value": "40", - "type": "spacing" - }, - "spacing-6": { - "value": "48", - "type": "spacing" - }, - "spacing-7": { - "value": "56", - "type": "spacing" - }, - "spacing-8": { - "value": "64", - "type": "spacing" - }, - "spacing-9": { - "value": "72", - "type": "spacing" - }, - "spacing-10": { - "value": "80", - "type": "spacing" - }, - "none": { - "value": "0", - "type": "borderRadius" - }, - "xs": { - "value": "2", - "type": "borderRadius" - }, - "sm": { - "value": "4", - "type": "borderRadius" - }, - "md": { - "value": "6", - "type": "borderRadius" - }, - "lg": { - "value": "8", - "type": "borderRadius" - }, - "xl": { - "value": "12", - "type": "borderRadius" - }, - "circle": { - "value": "50%", - "type": "borderRadius" + "spacing": { + "spacing-0": { + "value": "0", + "type": "spacing" + }, + "spacing-0_25": { + "value": "2", + "type": "spacing" + }, + "spacing-0_5": { + "value": "4", + "type": "spacing" + }, + "spacing-1": { + "value": "8", + "type": "spacing" + }, + "spacing-1_5": { + "value": "12", + "type": "spacing" + }, + "spacing-2": { + "value": "16", + "type": "spacing" + }, + "spacing-3": { + "value": "24", + "type": "spacing" + }, + "spacing-4": { + "value": "32", + "type": "spacing" + }, + "spacing-5": { + "value": "40", + "type": "spacing" + }, + "spacing-6": { + "value": "48", + "type": "spacing" + }, + "spacing-7": { + "value": "56", + "type": "spacing" + }, + "spacing-8": { + "value": "64", + "type": "spacing" + }, + "spacing-9": { + "value": "72", + "type": "spacing" + }, + "spacing-10": { + "value": "80", + "type": "spacing" + } }, - "pill": { - "value": "999", - "type": "borderRadius" + "borderRadius": { + "none": { + "value": "0", + "type": "borderRadius" + }, + "xs": { + "value": "2", + "type": "borderRadius" + }, + "sm": { + "value": "4", + "type": "borderRadius" + }, + "md": { + "value": "6", + "type": "borderRadius" + }, + "lg": { + "value": "8", + "type": "borderRadius" + }, + "xl": { + "value": "12", + "type": "borderRadius" + }, + "circle": { + "value": "50%", + "type": "borderRadius" + }, + "pill": { + "value": "999", + "type": "borderRadius" + } } }, "light": { From 2174eec76e8d24c5a67aa627916033de4a71c9be Mon Sep 17 00:00:00 2001 From: garrettbear Date: Tue, 20 Dec 2022 15:05:10 -0800 Subject: [PATCH 3/4] add spacing tokens --- src/css/design-tokens.css | 24 ++++++++++++++++++++++++ src/js/spacing/index.ts | 1 + src/js/spacing/spacing.ts | 16 ++++++++++++++++ src/js/spacing/types.ts | 3 +++ 4 files changed, 44 insertions(+) create mode 100644 src/js/spacing/index.ts create mode 100644 src/js/spacing/spacing.ts create mode 100644 src/js/spacing/types.ts diff --git a/src/css/design-tokens.css b/src/css/design-tokens.css index fd558ab1..0319a1bd 100644 --- a/src/css/design-tokens.css +++ b/src/css/design-tokens.css @@ -92,6 +92,30 @@ --line-height-5: 2rem; --line-height-6: 2.5rem; --line-height-7: 3.5rem; + /* spacing */ + --spacing-0: 0; + --spacing-0_25: 2px; + --spacing-0_5: 4px; + --spacing-1: 8px; + --spacing-1_5: 12px; + --spacing-2: 16px; + --spacing-3: 24px; + --spacing-4: 32px; + --spacing-5: 40px; + --spacing-6: 48px; + --spacing-7: 56px; + --spacing-8: 64px; + --spacing-9: 72px; + --spacing-10: 80px; + /* border radius */ + --border-radius-none: 0; + --border-radius-xs: 2px; + --border-radius-sm: 4px; + --border-radius-md: 6px; + --border-radius-lg: 8px; + --border-radius-xl: 12px; + --border-radius-circle: 50%; + --border-radius-pill: 999px; /* font weights */ --font-weight-regular: 400; --font-weight-medium: 500; diff --git a/src/js/spacing/index.ts b/src/js/spacing/index.ts new file mode 100644 index 00000000..734800bd --- /dev/null +++ b/src/js/spacing/index.ts @@ -0,0 +1 @@ +export { spacing } from './spacing'; diff --git a/src/js/spacing/spacing.ts b/src/js/spacing/spacing.ts new file mode 100644 index 00000000..2b6f7e64 --- /dev/null +++ b/src/js/spacing/spacing.ts @@ -0,0 +1,16 @@ +export const spacing = { + spacing0: 0, + spacing0_25: 2, + spacing0_5: 4, + spacing1: 8, + spacing1_5: 12, + spacing2: 16, + spacing3: 24, + spacing4: 32, + spacing5: 40, + spacing6: 48, + spacing7: 56, + spacing8: 64, + spacing9: 72, + spacing10: 80, +}; diff --git a/src/js/spacing/types.ts b/src/js/spacing/types.ts new file mode 100644 index 00000000..b63d2b50 --- /dev/null +++ b/src/js/spacing/types.ts @@ -0,0 +1,3 @@ +export interface SpacingSizes { + spacing: number; +} From 407bbb118fcbdc365664836d736674676c130a39 Mon Sep 17 00:00:00 2001 From: garrettbear Date: Tue, 20 Dec 2022 17:40:20 -0800 Subject: [PATCH 4/4] spacing readme --- docs/Spacing.mdx | 20 +++++++++++ docs/Spacing.stories.tsx | 76 ++++++++++++++++++++++++++++++++++++++++ src/js/index.ts | 1 + 3 files changed, 97 insertions(+) create mode 100644 docs/Spacing.mdx create mode 100644 docs/Spacing.stories.tsx diff --git a/docs/Spacing.mdx b/docs/Spacing.mdx new file mode 100644 index 00000000..b0ee54cb --- /dev/null +++ b/docs/Spacing.mdx @@ -0,0 +1,20 @@ +import { Meta, Canvas, Story } from '@storybook/addon-docs'; +import LinkTo from '@storybook/addon-links/react'; + + + +# Spacing + +Spacing is utilized for margin, padding, and gap for consistency + + + + + +| Size | JS | CSS | +| ----- | ------------------ | ------------------ | +| **0** | `spacing.spacing0` | `var(--spacing-0)` | + +## References + +- [Figma Spacing Page](https://www.figma.com/file/GIctVoel8jQYWNuFWaufQh/DS-Spacing?node-id=2%3A2&t=ONUySsuYXUFTwdou-0)(internal use only) diff --git a/docs/Spacing.stories.tsx b/docs/Spacing.stories.tsx new file mode 100644 index 00000000..878ef12c --- /dev/null +++ b/docs/Spacing.stories.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import { spacing } from '../src/js'; + +import { Text } from './components'; + +import README from './Spacing.mdx'; + +export default { + title: 'Spacing/Spacing', + parameters: { + docs: { + page: README, + }, + }, + argTypes: { + spacing: { + control: 'select', + options: Object.keys(spacing), + }, + }, + args: {}, +}; + +interface SpacingSwatchProps { + children: any; + style?: object; + spacingProp: any; +} + +const SpacingSwatch = ({ + children, + style, + spacingProp, +}: SpacingSwatchProps) => ( +
+
+
+
+ {children} +
+); + +export const Spacing = (args) => { + const spacingSizes = Object.keys(spacing); + const formattedSpacingSizes = spacingSizes.map((key) => { + return key.replace(/(\D+)(\d+)/, '$1-$2'); + }); + + return ( +
+ {formattedSpacingSizes.map((size) => { + return ( + + {size} + + ); + })} +
+ ); +}; diff --git a/src/js/index.ts b/src/js/index.ts index 5fa681c3..57fee833 100644 --- a/src/js/index.ts +++ b/src/js/index.ts @@ -1,6 +1,7 @@ export { Theme } from './themes'; export { lightTheme } from './themes'; export { darkTheme } from './themes'; +export { spacing } from './spacing'; // DEPRECATED in favor of importing theme objects above export { colors } from './colors';