feat(tokens): add primitive size tokens (#1031)

* feat: add primitive size tokens * fix: use size variable tokens in storybook * fix: add whitespace at bottom of size token file * chore: update sizes to use base 16 * chore: use sizing tokens in borders * fix: add 3 and 1200 sizes * chore: update fonts to use size tokens * chore: use size tokens in spacing * chore: se size tokens in viewport * fix: space between constants in size story * chore: add changeset * fix: make slice const name more explicit * fix: use size 1 for border 200 Co-authored-by: Robert Niznik <rniznik@launchdarkly.com> --------- Co-authored-by: Robert Niznik <rniznik@launchdarkly.com>

Author: matthewferry

.changeset/sweet-wolves-pay.md

@@ -0,0 +1,6 @@
+---
+'@launchpad-ui/tokens': patch
+'@launchpad-ui/core': patch
+---
+
+Add size primitive tokens

packages/tokens/src/border.yaml

@@ -1,15 +1,15 @@
 border:
  radius:
  regular:
- value: 0.188rem
+ value: '{ size.3.value }'
  medium:
- value: 0.375rem
+ value: '{ size.6.value }'
  large:
- value: 1rem
+ value: '{ size.16.value }'
  width:
  100:
- value: 0rem
+ value: '{ size.0.value }'
  200:
- value: 0.063rem
+ value: '{ size.1.value }'
  300:
- value: 0.125rem
+ value: '{ size.2.value }'

packages/tokens/src/font.yaml

@@ -6,21 +6,21 @@ font:
  value: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace
  size:
  100:
- value: 0.75rem
+ value: '{ size.12.value }'
  200:
- value: 0.875rem
+ value: '{ size.14.value }'
  300:
- value: 1rem
+ value: '{ size.16.value }'
  400:
- value: 1.125rem
+ value: '{ size.18.value }'
  500:
- value: 1.25rem
+ value: '{ size.20.value }'
  600:
- value: 1.563rem
+ value: '{ size.24.value }'
  700:
- value: 2rem
+ value: '{ size.32.value }'
  800:
- value: 2.875rem
+ value: '{ size.44.value }'
  weight:
  light:
  value: 300

packages/tokens/src/size.yaml

@@ -0,0 +1,95 @@
+size:
+ 0:
+ value: 0.0rem
+ 1:
+ value: 0.0625rem
+ 2:
+ value: 0.125rem
+ 3:
+ value: 0.1875rem
+ 4:
+ value: 0.25rem
+ 6:
+ value: 0.375rem
+ 8:
+ value: 0.5rem
+ 10:
+ value: 0.625rem
+ 12:
+ value: 0.75rem
+ 14:
+ value: 0.875rem
+ 16:
+ value: 1.0rem
+ 18:
+ value: 1.125rem
+ 20:
+ value: 1.25rem
+ 24:
+ value: 1.5rem
+ 28:
+ value: 1.75rem
+ 32:
+ value: 2.0rem
+ 36:
+ value: 2.25rem
+ 40:
+ value: 2.5rem
+ 44:
+ value: 2.75rem
+ 48:
+ value: 3.0rem
+ 56:
+ value: 3.5rem
+ 64:
+ value: 4.0rem
+ 72:
+ value: 4.5rem
+ 80:
+ value: 5.0rem
+ 96:
+ value: 6.0rem
+ 112:
+ value: 7.0rem
+ 128:
+ value: 8.0rem
+ 144:
+ value: 9.0rem
+ 160:
+ value: 10.0rem
+ 176:
+ value: 11.0rem
+ 192:
+ value: 12.0rem
+ 208:
+ value: 13.0rem
+ 224:
+ value: 14.0rem
+ 240:
+ value: 15.0rem
+ 256:
+ value: 16.0rem
+ 320:
+ value: 20.0rem
+ 400:
+ value: 25.0rem
+ 480:
+ value: 30.0rem
+ 560:
+ value: 35.0rem
+ 640:
+ value: 40.0rem
+ 720:
+ value: 45.0rem
+ 800:
+ value: 50.0rem
+ 960:
+ value: 60.0rem
+ 1120:
+ value: 70.0rem
+ 1200:
+ value: 75.0rem
+ 1280:
+ value: 80.0rem
+ 1440:
+ value: 90.0rem

packages/tokens/src/spacing.yaml

@@ -1,19 +1,19 @@
 spacing:
  100:
- value: 0rem
+ value: '{ size.0.value }'
  200:
- value: 0.25rem
+ value: '{ size.4.value }'
  300:
- value: 0.5rem
+ value: '{ size.8.value }'
  400:
- value: 0.75rem
+ value: '{ size.12.value }'
  500:
- value: 1rem
+ value: '{ size.16.value }'
  600:
- value: 1.25rem
+ value: '{ size.20.value }'
  700:
- value: 1.5rem
+ value: '{ size.24.value }'
  800:
- value: 1.75rem
+ value: '{ size.28.value }'
  900:
- value: 2rem
+ value: '{ size.32.value }'

packages/tokens/src/viewport.yaml

@@ -1,9 +1,9 @@
 viewport:
  mobile:
- value: 0
+ value: '{ size.0.value }'
  tablet:
  value: 740px
  desktop:
  value: 992px
  wide:
- value: 1200px
+ value: '{ size.1200.value }'

packages/tokens/stories/size.stories.tsx

@@ -0,0 +1,46 @@
+import { CopyToClipboard } from '@launchpad-ui/clipboard';
+
+import tokens from '../dist/default.json';
+
+export default {
+ title: 'Tokens/Size',
+};
+
+const sizes = tokens.size;
+
+const valueInPx = (value: string) => {
+ const removeRemChars = value.slice(0, -3); // remove 'rem' from string
+ const stringToNumber = parseFloat(removeRemChars.toString());
+
+ return `(${stringToNumber * 16}px)`;
+};
+
+export const Size = {
+ render: () => (
+ <div
+ style={{
+ display: 'grid',
+ gridTemplateColumns: 'max-content auto max-content',
+ alignItems: 'center',
+ gap: 'var(--lp-size-24)',
+ }}
+ >
+ {Object.entries(sizes).map(([key, value]) => (
+ <>
+ <CopyToClipboard text={`--lp-size-${key}`}>{`--lp-size-${key}`}</CopyToClipboard>
+ <div>
+ {value}
+ {valueInPx(value)}
+ </div>
+ <div
+ style={{
+ backgroundColor: 'var(--lp-color-system-green-500)',
+ width: value,
+ height: 'var(--lp-size-16)',
+ }}
+ />
+ </>
+ ))}
+ </div>
+ ),
+};