Repository: marigold-ui/marigold
Pull request #1884 (2022-03-22 12:39:37)

fix: add marigold/tokens as dependency to marigold/components
because of usage `@marigold/tokens` in components package (new Layout comps)

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 38cd1a38b37783173cc58fb7aa94a4f2a5b3a052

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/tokens-dep-to-comps?filename=.changeset/sixty-icons-sort.md&value=---%0A%22%40marigold%2Fcomponents%22%3A%20patch%0A---%0A%0Afix%3A%20add%20marigold%2Ftokens%20as%20dependency%20to%20marigold%2Fcomponents%0A)



Patch:
diff --git a/.changeset/plenty-turkeys-jog.md b/.changeset/plenty-turkeys-jog.md
new file mode 100644
index 000000000..1f028a5f9
--- /dev/null
+++ b/.changeset/plenty-turkeys-jog.md
@@ -0,0 +1,6 @@
+---
+"@marigold/create-theme": major
+"@marigold/tokens": major
+---
+
+feat: rename scales
diff --git a/packages/components/package.json b/packages/components/package.json
index 4339b7e45..8fe9ce339 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -25,6 +25,7 @@
   "dependencies": {
     "@marigold/icons": "workspace:*",
     "@marigold/system": "workspace:*",
+    "@marigold/tokens": "workspace:*",
     "@marigold/types": "workspace:*",
     "@react-aria/button": "^3.3.3",
     "@react-aria/checkbox": "^3.2.3",
diff --git a/packages/tokens/src/border.stories.tsx b/packages/tokens/src/border.stories.tsx
index 36631c9be..f719f024d 100644
--- a/packages/tokens/src/border.stories.tsx
+++ b/packages/tokens/src/border.stories.tsx
@@ -36,7 +36,7 @@ export const Radius = () => (
           height: 200,
           borderStyle: 'solid',
           borderColor: Token.color.gray['80'],
-          borderWidth: Token.border.width.medium,
+          borderWidth: Token.border.width['medium-1'],
           borderRadius: value,
         }}
       />
diff --git a/packages/tokens/src/border.ts b/packages/tokens/src/border.ts
index 2a5374a3d..ec89ac498 100644
--- a/packages/tokens/src/border.ts
+++ b/packages/tokens/src/border.ts
@@ -4,11 +4,11 @@
 const width = {
   none: 0,
 
-  small: '1px',
-  medium: '2px',
-  large: '5px',
-  xlarge: '10px',
-  xxlarge: '25px',
+  'small-1': '1px',
+  'medium-1': '2px',
+  'large-1': '5px',
+  'large-2': '10px',
+  'large-3': '25px',
 } as const;
 
 const radius = {
@@ -16,12 +16,12 @@ const radius = {
 
   round: '1e5px',
 
-  xsmall: '2px',
-  small: '5px',
-  medium: '1rem',
-  large: '2rem',
-  xlarge: '4rem',
-  xxlarge: '8rem',
+  'small-1': '2px',
+  'small-2': '5px',
+  'medium-1': '1rem',
+  'medium-2': '2rem',
+  'large-1': '4rem',
+  'large-2': '8rem',
 } as const;
 
 export const border = {
diff --git a/packages/tokens/src/shadow.ts b/packages/tokens/src/shadow.ts
index ffcae1d76..d6fc81cda 100644
--- a/packages/tokens/src/shadow.ts
+++ b/packages/tokens/src/shadow.ts
@@ -4,31 +4,31 @@ const SHADOW_COLOR = '220 3% 15%';
 const SHADOW_STRENGTH = '1%';
 
 export const shadow = {
-  xsmall: `0 1px 2px -1px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 9%))`,
-  small: `
+  'small-1': `0 1px 2px -1px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 9%))`,
+  'small-2': `
     0 3px 5px -2px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 3%)),
     0 7px 14px -5px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 5%))`,
-  medium: `
+  'medium-1': `
     0 -1px 3px 0 hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 2%)),
     0 1px 2px -5px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 2%)),
     0 2px 5px -5px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 4%)),
     0 4px 12px -5px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 5%)),
     0 12px 15px -5px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 7%))`,
-  large: `
+  'medium-2': `
     0 -2px 5px 0 hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 2%)),
     0 1px 1px -2px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 3%)),
     0 2px 2px -2px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 3%)),
     0 5px 5px -2px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 4%)),
     0 9px 9px -2px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 5%)),
     0 16px 16px -2px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 6%))`,
-  xlarge: `
+  'large-1': `
     0 -1px 2px 0 hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 2%)),
     0 2px 1px -2px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 3%)),
     0 5px 5px -2px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 3%)),
     0 10px 10px -2px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 4%)),
     0 20px 20px -2px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 5%)),
     0 40px 40px -2px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 7%))`,
-  xxlarge: `
+  'large-2': `
     0 -1px 2px 0 hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 2%)),
     0 3px 2px -2px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 3%)),
     0 7px 5px -2px hsl(${SHADOW_COLOR} / calc(${SHADOW_STRENGTH} + 3%)),
diff --git a/packages/tokens/src/size.stories.tsx b/packages/tokens/src/size.stories.tsx
index 290af4e81..c506d8f53 100644
--- a/packages/tokens/src/size.stories.tsx
+++ b/packages/tokens/src/size.stories.tsx
@@ -18,7 +18,7 @@ export const Fixed = () => (
           color: Token.color.gray['00'],
           bg: Token.color.gray['80'],
           blockSize: 100,
-          height: Token.size.fixed.xxlarge,
+          height: Token.size.fixed['large-4'],
           width: value,
         }}
       />
@@ -36,7 +36,7 @@ export const Fluid = () => (
           color: Token.color.gray['00'],
           bg: Token.color.gray['80'],
           blockSize: 100,
-          height: Token.size.fixed.xxlarge,
+          height: Token.size.fixed['large-4'],
           width: value,
         }}
       />
@@ -49,7 +49,7 @@ export const Headlines = () => (
     {Object.values(Token.size.header).map(value => (
       <Box
         css={{
-          fontSize: Token.typography.size.fluid.regular,
+          fontSize: Token.typography.size.fluid['medium-1'],
           fontFamily: Token.typography.font.sans,
           maxWidth: value,
         }}
@@ -67,7 +67,7 @@ export const Content = () => (
       <Box
         key={value}
         css={{
-          fontSize: Token.typography.size.fluid.small,
+          fontSize: Token.typography.size.fluid['small-1'],
           fontFamily: Token.typography.font.sans,
           maxWidth: value,
         }}
diff --git a/packages/tokens/src/size.ts b/packages/tokens/src/size.ts
index 061b1ee8b..558993be8 100644
--- a/packages/tokens/src/size.ts
+++ b/packages/tokens/src/size.ts
@@ -4,33 +4,36 @@
 const fixed = {
   none: 0,
 
-  tiny: '.25rem',
-  xxsmall: '.5rem',
-  xsmall: '1rem',
-  small: '1.25rem',
-  medium: '1.5rem',
-  large: '1.75rem',
-  xlarge: '2rem',
-  xxlarge: '3rem',
-  xxxlarge: '4rem',
-  huge: '5rem',
-  epic: '7.5rem',
-  colossal: '10rem',
+  'small-1': '.25rem',
+  'small-2': '.5rem',
+  'small-3': '1rem',
+  'small-4': '1.25rem',
+  'small-5': '1.5rem',
+  'medium-1': '1.75rem',
+  'medium-2': '2rem',
+  'medium-3': '3rem',
+  'medium-4': '4rem',
+  'medium-5': '5rem',
+  'large-1': '7.5rem',
+  'large-2': '10rem',
+  'large-3': '15rem',
+  'large-4': '20rem',
+  'large-5': '30rem',
 } as const;
 
 const fluid = {
   none: 0,
 
-  xsmall: 'clamp(.5rem, 1vw, 1rem)',
-  small: 'clamp(1rem, 2vw, 1.5rem)',
-  medium: 'clamp(1.5rem, 3vw, 2rem)',
-  large: 'clamp(2rem, 4vw, 3rem)',
-  xlarge: 'clamp(4rem, 5vw, 5rem)',
-  xxlarge: 'clamp(5rem, 7vw, 7.5rem)',
-  xxxlarge: 'clamp(7.5rem, 10vw, 10rem)',
-  huge: 'clamp(10rem, 20vw, 15rem)',
-  epic: 'clamp(15rem, 30vw, 20rem)',
-  colossal: 'clamp(20rem, 40vw, 30rem)',
+  'small-1': 'clamp(.5rem, 1vw, 1rem)',
+  'small-2': 'clamp(1rem, 2vw, 1.5rem)',
+  'small-3': 'clamp(1.5rem, 3vw, 2rem)',
+  'medium-1': 'clamp(2rem, 4vw, 3rem)',
+  'medium-2': 'clamp(4rem, 5vw, 5rem)',
+  'medium-3': 'clamp(5rem, 7vw, 7.5rem)',
+  'large-1': 'clamp(7.5rem, 10vw, 10rem)',
+  'large-2': 'clamp(10rem, 20vw, 15rem)',
+  'large-3': 'clamp(15rem, 30vw, 20rem)',
+  'large-4': 'clamp(20rem, 40vw, 30rem)',
 } as const;
 
 const content = {
diff --git a/packages/tokens/src/typography.stories.tsx b/packages/tokens/src/typography.stories.tsx
index 1f0f33871..6fea00fc9 100644
--- a/packages/tokens/src/typography.stories.tsx
+++ b/packages/tokens/src/typography.stories.tsx
@@ -95,7 +95,7 @@ export const FontWeights = () => (
         key={value}
         css={{
           fontWeight: value,
-          fontSize: Token.typography.size.fixed.large,
+          fontSize: Token.typography.size.fixed['medium-4'],
           fontFamily: Token.typography.font.sans,
         }}
       >
diff --git a/packages/tokens/src/typography.ts b/packages/tokens/src/typography.ts
index 3a048dff4..b69cd6502 100644
--- a/packages/tokens/src/typography.ts
+++ b/packages/tokens/src/typography.ts
@@ -7,46 +7,46 @@ const font = {
 } as const;
 
 const lineHeight = {
-  '00': 0.95,
-  '0': 1.1,
-  '1': 1.25,
-  '2': 1.375,
-  '3': 1.5,
-  '4': 1.75,
-  '5': 2,
+  'small-1': 0.95,
+  'small-2': 1.1,
+  'small-3': 1.25,
+  'medium-1': 1.375,
+  'medium-2': 1.5,
+  'large-1': 1.75,
+  'large-2': 2,
 } as const;
 
 const letterSpacing = {
   none: 'normal',
 
-  xxsmall: '-.05em',
-  xsmall: '.025em',
-  small: '.050em',
-  medium: '.075em',
-  large: '.150em',
-  xlarge: '.500em',
-  xxlarge: '.750em',
-  xxxlarge: '1em',
+  'small-1': '-.05em',
+  'small-2': '.025em',
+  'small-3': '.050em',
+  'medium-1': '.075em',
+  'medium-2': '.150em',
+  'medium-3': '.500em',
+  'large-1': '.750em',
+  'large-2': '1em',
 } as const;
 
 const fixed = {
-  xsmall: '.5rem',
-  small: '.75rem',
-  regular: '1rem',
-  medium: '1.1rem',
-  large: '1.25rem',
-  xlarge: '1.5rem',
-  xxlarge: '2rem',
-  xxxlarge: '2.5rem',
-  huge: '3rem',
-  epic: '3.5rem',
+  'small-1': '.5rem',
+  'small-2': '.75rem',
+  'small-3': '1rem',
+  'medium-1': '1.1rem',
+  'medium-2': '1.25rem',
+  'medium-3': '1.5rem',
+  'medium-4': '2rem',
+  'large-1': '2.5rem',
+  'large-2': '3rem',
+  'large-3': '3.5rem',
 } as const;
 
 const fluid = {
-  small: 'clamp(.75rem, 2vw, 1rem)',
-  regular: 'clamp(1rem, 4vw, 1.5rem)',
-  large: 'clamp(1.5rem, 6vw, 2.5rem)',
-  xlarge: 'clamp(2rem, 9vw, 3.5rem)',
+  'small-1': 'clamp(.75rem, 2vw, 1rem)',
+  'medium-1': 'clamp(1rem, 4vw, 1.5rem)',
+  'medium-2': 'clamp(1.5rem, 6vw, 2.5rem)',
+  'large-1': 'clamp(2rem, 9vw, 3.5rem)',
 } as const;
 
 const weight = {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 54fce860b..46a5c73c9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -239,6 +239,7 @@ importers:
     specifiers:
       '@marigold/icons': workspace:*
       '@marigold/system': workspace:*
+      '@marigold/tokens': workspace:*
       '@marigold/tsconfig': workspace:*
       '@marigold/types': workspace:*
       '@react-aria/button': ^3.3.3
@@ -270,6 +271,7 @@ importers:
     dependencies:
       '@marigold/icons': link:../icons
       '@marigold/system': link:../system
+      '@marigold/tokens': link:../tokens
       '@marigold/types': link:../types
       '@react-aria/button': 3.4.1_react@17.0.2
       '@react-aria/checkbox': 3.3.1_react@17.0.2


Test patch:
diff --git a/packages/create-theme/src/__snapshots__/create-theme.test.ts.snap b/packages/create-theme/src/__snapshots__/create-theme.test.ts.snap
index f6a94bb88..45d9491f1 100644
--- a/packages/create-theme/src/__snapshots__/create-theme.test.ts.snap
+++ b/packages/create-theme/src/__snapshots__/create-theme.test.ts.snap
@@ -2,12 +2,12 @@
 
 exports[`created theme comes with defaults for "borderWidths" 1`] = `
 {
-  "large": "5px",
-  "medium": "2px",
+  "large-1": "5px",
+  "large-2": "10px",
+  "large-3": "25px",
+  "medium-1": "2px",
   "none": 0,
-  "small": "1px",
-  "xlarge": "10px",
-  "xxlarge": "25px",
+  "small-1": "1px",
 }
 `;
 
@@ -32,27 +32,27 @@ exports[`created theme comes with defaults for "fontWeights" 1`] = `
 
 exports[`created theme comes with defaults for "letterSpacings" 1`] = `
 {
-  "large": ".150em",
-  "medium": ".075em",
+  "large-1": ".750em",
+  "large-2": "1em",
+  "medium-1": ".075em",
+  "medium-2": ".150em",
+  "medium-3": ".500em",
   "none": "normal",
-  "small": ".050em",
-  "xlarge": ".500em",
-  "xsmall": ".025em",
-  "xxlarge": ".750em",
-  "xxsmall": "-.05em",
-  "xxxlarge": "1em",
+  "small-1": "-.05em",
+  "small-2": ".025em",
+  "small-3": ".050em",
 }
 `;
 
 exports[`created theme comes with defaults for "lineHeights" 1`] = `
 {
-  "0": 1.1,
-  "00": 0.95,
-  "1": 1.25,
-  "2": 1.375,
-  "3": 1.5,
-  "4": 1.75,
-  "5": 2,
+  "large-1": 1.75,
+  "large-2": 2,
+  "medium-1": 1.375,
+  "medium-2": 1.5,
+  "small-1": 0.95,
+  "small-2": 1.1,
+  "small-3": 1.25,
 }
 `;
 
@@ -68,14 +68,14 @@ exports[`created theme comes with defaults for "opacities" 1`] = `
 
 exports[`created theme comes with defaults for "radii" 1`] = `
 {
-  "large": "2rem",
-  "medium": "1rem",
+  "large-1": "4rem",
+  "large-2": "8rem",
+  "medium-1": "1rem",
+  "medium-2": "2rem",
   "none": 0,
   "round": "1e5px",
-  "small": "5px",
-  "xlarge": "4rem",
-  "xsmall": "2px",
-  "xxlarge": "8rem",
+  "small-1": "2px",
+  "small-2": "5px",
 }
 `;
 
diff --git a/packages/create-theme/src/create-theme.test.ts b/packages/create-theme/src/create-theme.test.ts
index 56890b21f..48d2e7e9c 100644
--- a/packages/create-theme/src/create-theme.test.ts
+++ b/packages/create-theme/src/create-theme.test.ts
@@ -140,16 +140,16 @@ test('uses fallback fonts if none provided', () => {
 test('uses fixed values for typography by default', () => {
   expect(createTheme({}).fontSizes).toMatchInlineSnapshot(`
     {
-      "epic": "3.5rem",
-      "huge": "3rem",
-      "large": "1.25rem",
-      "medium": "1.1rem",
-      "regular": "1rem",
-      "small": ".75rem",
-      "xlarge": "1.5rem",
-      "xsmall": ".5rem",
-      "xxlarge": "2rem",
-      "xxxlarge": "2.5rem",
+      "large-1": "2.5rem",
+      "large-2": "3rem",
+      "large-3": "3.5rem",
+      "medium-1": "1.1rem",
+      "medium-2": "1.25rem",
+      "medium-3": "1.5rem",
+      "medium-4": "2rem",
+      "small-1": ".5rem",
+      "small-2": ".75rem",
+      "small-3": "1rem",
     }
   `);
 
@@ -161,10 +161,10 @@ test('uses fixed values for typography by default', () => {
 test('allow to use fluid typography', () => {
   expect(createTheme({ typography: 'fluid' }).fontSizes).toMatchInlineSnapshot(`
     {
-      "large": "clamp(1.5rem, 6vw, 2.5rem)",
-      "regular": "clamp(1rem, 4vw, 1.5rem)",
-      "small": "clamp(.75rem, 2vw, 1rem)",
-      "xlarge": "clamp(2rem, 9vw, 3.5rem)",
+      "large-1": "clamp(2rem, 9vw, 3.5rem)",
+      "medium-1": "clamp(1rem, 4vw, 1.5rem)",
+      "medium-2": "clamp(1.5rem, 6vw, 2.5rem)",
+      "small-1": "clamp(.75rem, 2vw, 1rem)",
     }
   `);
 });
@@ -172,36 +172,42 @@ test('allow to use fluid typography', () => {
 test('uses fixed values for dimensaions by default', () => {
   expect(createTheme({}).space).toMatchInlineSnapshot(`
     {
-      "colossal": "10rem",
-      "epic": "7.5rem",
-      "huge": "5rem",
-      "large": "1.75rem",
-      "medium": "1.5rem",
+      "large-1": "7.5rem",
+      "large-2": "10rem",
+      "large-3": "15rem",
+      "large-4": "20rem",
+      "large-5": "30rem",
+      "medium-1": "1.75rem",
+      "medium-2": "2rem",
+      "medium-3": "3rem",
+      "medium-4": "4rem",
+      "medium-5": "5rem",
       "none": 0,
-      "small": "1.25rem",
-      "tiny": ".25rem",
-      "xlarge": "2rem",
-      "xsmall": "1rem",
-      "xxlarge": "3rem",
-      "xxsmall": ".5rem",
-      "xxxlarge": "4rem",
+      "small-1": ".25rem",
+      "small-2": ".5rem",
+      "small-3": "1rem",
+      "small-4": "1.25rem",
+      "small-5": "1.5rem",
     }
   `);
   expect(createTheme({}).space).toMatchInlineSnapshot(`
     {
-      "colossal": "10rem",
-      "epic": "7.5rem",
-      "huge": "5rem",
-      "large": "1.75rem",
-      "medium": "1.5rem",
+      "large-1": "7.5rem",
+      "large-2": "10rem",
+      "large-3": "15rem",
+      "large-4": "20rem",
+      "large-5": "30rem",
+      "medium-1": "1.75rem",
+      "medium-2": "2rem",
+      "medium-3": "3rem",
+      "medium-4": "4rem",
+      "medium-5": "5rem",
       "none": 0,
-      "small": "1.25rem",
-      "tiny": ".25rem",
-      "xlarge": "2rem",
-      "xsmall": "1rem",
-      "xxlarge": "3rem",
-      "xxsmall": ".5rem",
-      "xxxlarge": "4rem",
+      "small-1": ".25rem",
+      "small-2": ".5rem",
+      "small-3": "1rem",
+      "small-4": "1.25rem",
+      "small-5": "1.5rem",
     }
   `);
 
@@ -216,32 +222,32 @@ test('uses fixed values for dimensaions by default', () => {
 test('allows to use fluid dimensions', () => {
   expect(createTheme({ dimensions: 'fluid' }).space).toMatchInlineSnapshot(`
     {
-      "colossal": "clamp(20rem, 40vw, 30rem)",
-      "epic": "clamp(15rem, 30vw, 20rem)",
-      "huge": "clamp(10rem, 20vw, 15rem)",
-      "large": "clamp(2rem, 4vw, 3rem)",
-      "medium": "clamp(1.5rem, 3vw, 2rem)",
+      "large-1": "clamp(7.5rem, 10vw, 10rem)",
+      "large-2": "clamp(10rem, 20vw, 15rem)",
+      "large-3": "clamp(15rem, 30vw, 20rem)",
+      "large-4": "clamp(20rem, 40vw, 30rem)",
+      "medium-1": "clamp(2rem, 4vw, 3rem)",
+      "medium-2": "clamp(4rem, 5vw, 5rem)",
+      "medium-3": "clamp(5rem, 7vw, 7.5rem)",
       "none": 0,
-      "small": "clamp(1rem, 2vw, 1.5rem)",
-      "xlarge": "clamp(4rem, 5vw, 5rem)",
-      "xsmall": "clamp(.5rem, 1vw, 1rem)",
-      "xxlarge": "clamp(5rem, 7vw, 7.5rem)",
-      "xxxlarge": "clamp(7.5rem, 10vw, 10rem)",
+      "small-1": "clamp(.5rem, 1vw, 1rem)",
+      "small-2": "clamp(1rem, 2vw, 1.5rem)",
+      "small-3": "clamp(1.5rem, 3vw, 2rem)",
     }
   `);
   expect(createTheme({ dimensions: 'fluid' }).sizes).toMatchInlineSnapshot(`
     {
-      "colossal": "clamp(20rem, 40vw, 30rem)",
-      "epic": "clamp(15rem, 30vw, 20rem)",
-      "huge": "clamp(10rem, 20vw, 15rem)",
-      "large": "clamp(2rem, 4vw, 3rem)",
-      "medium": "clamp(1.5rem, 3vw, 2rem)",
+      "large-1": "clamp(7.5rem, 10vw, 10rem)",
+      "large-2": "clamp(10rem, 20vw, 15rem)",
+      "large-3": "clamp(15rem, 30vw, 20rem)",
+      "large-4": "clamp(20rem, 40vw, 30rem)",
+      "medium-1": "clamp(2rem, 4vw, 3rem)",
+      "medium-2": "clamp(4rem, 5vw, 5rem)",
+      "medium-3": "clamp(5rem, 7vw, 7.5rem)",
       "none": 0,
-      "small": "clamp(1rem, 2vw, 1.5rem)",
-      "xlarge": "clamp(4rem, 5vw, 5rem)",
-      "xsmall": "clamp(.5rem, 1vw, 1rem)",
-      "xxlarge": "clamp(5rem, 7vw, 7.5rem)",
-      "xxxlarge": "clamp(7.5rem, 10vw, 10rem)",
+      "small-1": "clamp(.5rem, 1vw, 1rem)",
+      "small-2": "clamp(1rem, 2vw, 1.5rem)",
+      "small-3": "clamp(1.5rem, 3vw, 2rem)",
     }
   `);
 });
diff --git a/packages/tokens/src/index.test.ts b/packages/tokens/src/index.test.ts
index 60b2d04c4..0e5bf7b57 100644
--- a/packages/tokens/src/index.test.ts
+++ b/packages/tokens/src/index.test.ts
@@ -13,22 +13,22 @@ test('smoketest', () => {
       },
       "border": {
         "radius": {
-          "large": "2rem",
-          "medium": "1rem",
+          "large-1": "4rem",
+          "large-2": "8rem",
+          "medium-1": "1rem",
+          "medium-2": "2rem",
           "none": 0,
           "round": "1e5px",
-          "small": "5px",
-          "xlarge": "4rem",
-          "xsmall": "2px",
-          "xxlarge": "8rem",
+          "small-1": "2px",
+          "small-2": "5px",
         },
         "width": {
-          "large": "5px",
-          "medium": "2px",
+          "large-1": "5px",
+          "large-2": "10px",
+          "large-3": "25px",
+          "medium-1": "2px",
           "none": 0,
-          "small": "1px",
-          "xlarge": "10px",
-          "xxlarge": "25px",
+          "small-1": "1px",
         },
       },
       "color": {
@@ -208,31 +208,14 @@ test('smoketest', () => {
         "transparent": 0,
       },
       "shadow": {
-        "large": "
-        0 -2px 5px 0 hsl(220 3% 15% / calc(1% + 2%)),
-        0 1px 1px -2px hsl(220 3% 15% / calc(1% + 3%)),
-        0 2px 2px -2px hsl(220 3% 15% / calc(1% + 3%)),
-        0 5px 5px -2px hsl(220 3% 15% / calc(1% + 4%)),
-        0 9px 9px -2px hsl(220 3% 15% / calc(1% + 5%)),
-        0 16px 16px -2px hsl(220 3% 15% / calc(1% + 6%))",
-        "medium": "
-        0 -1px 3px 0 hsl(220 3% 15% / calc(1% + 2%)),
-        0 1px 2px -5px hsl(220 3% 15% / calc(1% + 2%)),
-        0 2px 5px -5px hsl(220 3% 15% / calc(1% + 4%)),
-        0 4px 12px -5px hsl(220 3% 15% / calc(1% + 5%)),
-        0 12px 15px -5px hsl(220 3% 15% / calc(1% + 7%))",
-        "small": "
-        0 3px 5px -2px hsl(220 3% 15% / calc(1% + 3%)),
-        0 7px 14px -5px hsl(220 3% 15% / calc(1% + 5%))",
-        "xlarge": "
+        "large-1": "
         0 -1px 2px 0 hsl(220 3% 15% / calc(1% + 2%)),
         0 2px 1px -2px hsl(220 3% 15% / calc(1% + 3%)),
         0 5px 5px -2px hsl(220 3% 15% / calc(1% + 3%)),
         0 10px 10px -2px hsl(220 3% 15% / calc(1% + 4%)),
         0 20px 20px -2px hsl(220 3% 15% / calc(1% + 5%)),
         0 40px 40px -2px hsl(220 3% 15% / calc(1% + 7%))",
-        "xsmall": "0 1px 2px -1px hsl(220 3% 15% / calc(1% + 9%))",
-        "xxlarge": "
+        "large-2": "
         0 -1px 2px 0 hsl(220 3% 15% / calc(1% + 2%)),
         0 3px 2px -2px hsl(220 3% 15% / calc(1% + 3%)),
         0 7px 5px -2px hsl(220 3% 15% / calc(1% + 3%)),
@@ -240,6 +223,23 @@ test('smoketest', () => {
         0 22px 18px -2px hsl(220 3% 15% / calc(1% + 5%)),
         0 41px 33px -2px hsl(220 3% 15% / calc(1% + 6%)),
         0 100px 80px -2px hsl(220 3% 15% / calc(1% + 7%))",
+        "medium-1": "
+        0 -1px 3px 0 hsl(220 3% 15% / calc(1% + 2%)),
+        0 1px 2px -5px hsl(220 3% 15% / calc(1% + 2%)),
+        0 2px 5px -5px hsl(220 3% 15% / calc(1% + 4%)),
+        0 4px 12px -5px hsl(220 3% 15% / calc(1% + 5%)),
+        0 12px 15px -5px hsl(220 3% 15% / calc(1% + 7%))",
+        "medium-2": "
+        0 -2px 5px 0 hsl(220 3% 15% / calc(1% + 2%)),
+        0 1px 1px -2px hsl(220 3% 15% / calc(1% + 3%)),
+        0 2px 2px -2px hsl(220 3% 15% / calc(1% + 3%)),
+        0 5px 5px -2px hsl(220 3% 15% / calc(1% + 4%)),
+        0 9px 9px -2px hsl(220 3% 15% / calc(1% + 5%)),
+        0 16px 16px -2px hsl(220 3% 15% / calc(1% + 6%))",
+        "small-1": "0 1px 2px -1px hsl(220 3% 15% / calc(1% + 9%))",
+        "small-2": "
+        0 3px 5px -2px hsl(220 3% 15% / calc(1% + 3%)),
+        0 7px 14px -5px hsl(220 3% 15% / calc(1% + 5%))",
       },
       "size": {
         "content": {
@@ -248,32 +248,35 @@ test('smoketest', () => {
           "small": "20ch",
         },
         "fixed": {
-          "colossal": "10rem",
-          "epic": "7.5rem",
-          "huge": "5rem",
-          "large": "1.75rem",
-          "medium": "1.5rem",
+          "large-1": "7.5rem",
+          "large-2": "10rem",
+          "large-3": "15rem",
+          "large-4": "20rem",
+          "large-5": "30rem",
+          "medium-1": "1.75rem",
+          "medium-2": "2rem",
+          "medium-3": "3rem",
+          "medium-4": "4rem",
+          "medium-5": "5rem",
           "none": 0,
-          "small": "1.25rem",
-          "tiny": ".25rem",
-          "xlarge": "2rem",
-          "xsmall": "1rem",
-          "xxlarge": "3rem",
-          "xxsmall": ".5rem",
-          "xxxlarge": "4rem",
+          "small-1": ".25rem",
+          "small-2": ".5rem",
+          "small-3": "1rem",
+          "small-4": "1.25rem",
+          "small-5": "1.5rem",
         },
         "fluid": {
-          "colossal": "clamp(20rem, 40vw, 30rem)",
-          "epic": "clamp(15rem, 30vw, 20rem)",
-          "huge": "clamp(10rem, 20vw, 15rem)",
-          "large": "clamp(2rem, 4vw, 3rem)",
-          "medium": "clamp(1.5rem, 3vw, 2rem)",
+          "large-1": "clamp(7.5rem, 10vw, 10rem)",
+          "large-2": "clamp(10rem, 20vw, 15rem)",
+          "large-3": "clamp(15rem, 30vw, 20rem)",
+          "large-4": "clamp(20rem, 40vw, 30rem)",
+          "medium-1": "clamp(2rem, 4vw, 3rem)",
+          "medium-2": "clamp(4rem, 5vw, 5rem)",
+          "medium-3": "clamp(5rem, 7vw, 7.5rem)",
           "none": 0,
-          "small": "clamp(1rem, 2vw, 1.5rem)",
-          "xlarge": "clamp(4rem, 5vw, 5rem)",
-          "xsmall": "clamp(.5rem, 1vw, 1rem)",
-          "xxlarge": "clamp(5rem, 7vw, 7.5rem)",
-          "xxxlarge": "clamp(7.5rem, 10vw, 10rem)",
+          "small-1": "clamp(.5rem, 1vw, 1rem)",
+          "small-2": "clamp(1rem, 2vw, 1.5rem)",
+          "small-3": "clamp(1.5rem, 3vw, 2rem)",
         },
         "header": {
           "large": "35ch",
@@ -288,43 +291,43 @@ test('smoketest', () => {
           "serif": "ui-serif,serif",
         },
         "letterSpacing": {
-          "large": ".150em",
-          "medium": ".075em",
+          "large-1": ".750em",
+          "large-2": "1em",
+          "medium-1": ".075em",
+          "medium-2": ".150em",
+          "medium-3": ".500em",
           "none": "normal",
-          "small": ".050em",
-          "xlarge": ".500em",
-          "xsmall": ".025em",
-          "xxlarge": ".750em",
-          "xxsmall": "-.05em",
-          "xxxlarge": "1em",
+          "small-1": "-.05em",
+          "small-2": ".025em",
+          "small-3": ".050em",
         },
         "lineHeight": {
-          "0": 1.1,
-          "00": 0.95,
-          "1": 1.25,
-          "2": 1.375,
-          "3": 1.5,
-          "4": 1.75,
-          "5": 2,
+          "large-1": 1.75,
+          "large-2": 2,
+          "medium-1": 1.375,
+          "medium-2": 1.5,
+          "small-1": 0.95,
+          "small-2": 1.1,
+          "small-3": 1.25,
         },
         "size": {
           "fixed": {
-            "epic": "3.5rem",
-            "huge": "3rem",
-            "large": "1.25rem",
-            "medium": "1.1rem",
-            "regular": "1rem",
-            "small": ".75rem",
-            "xlarge": "1.5rem",
-            "xsmall": ".5rem",
-            "xxlarge": "2rem",
-            "xxxlarge": "2.5rem",
+            "large-1": "2.5rem",
+            "large-2": "3rem",
+            "large-3": "3.5rem",
+            "medium-1": "1.1rem",
+            "medium-2": "1.25rem",
+            "medium-3": "1.5rem",
+            "medium-4": "2rem",
+            "small-1": ".5rem",
+            "small-2": ".75rem",
+            "small-3": "1rem",
           },
           "fluid": {
-            "large": "clamp(1.5rem, 6vw, 2.5rem)",
-            "regular": "clamp(1rem, 4vw, 1.5rem)",
-            "small": "clamp(.75rem, 2vw, 1rem)",
-            "xlarge": "clamp(2rem, 9vw, 3.5rem)",
+            "large-1": "clamp(2rem, 9vw, 3.5rem)",
+            "medium-1": "clamp(1rem, 4vw, 1.5rem)",
+            "medium-2": "clamp(1.5rem, 6vw, 2.5rem)",
+            "small-1": "clamp(.75rem, 2vw, 1rem)",
           },
         },
         "weight": {