Repository: marigold-ui/marigold
Pull request #1856 (2022-03-11 09:30:36)

refa: tokens and create-theme packages moved
...and added to publishing!

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

Latest commit: f22b0d7275284944b1a8faa71d4a6e00e4dc9149

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/move-tokens-create-theme?filename=.changeset/polite-bulldogs-destroy.md&value=---%0A%22%40marigold%2Fcreate-theme%22%3A%20patch%0A%22%40marigold%2Ftokens%22%3A%20patch%0A---%0A%0Arefa%3A%20tokens%20and%20create-theme%20packages%20moved%0A)



Patch:
diff --git a/themes/create-theme/README.md b/packages/create-theme/README.md
similarity index 100%
rename from themes/create-theme/README.md
rename to packages/create-theme/README.md
diff --git a/themes/create-theme/package.json b/packages/create-theme/package.json
similarity index 90%
rename from themes/create-theme/package.json
rename to packages/create-theme/package.json
index 5d4ba2035..c9265944c 100644
--- a/themes/create-theme/package.json
+++ b/packages/create-theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marigold/create-theme",
-  "version": "1.0.0",
+  "version": "0.0.1",
   "description": "Marigold helper to kickoff Themes",
   "license": "MIT",
   "keywords": [
@@ -20,6 +20,9 @@
     "url": "github:marigold-ui/marigold",
     "directory": "themes/create-theme"
   },
+  "dependencies": {
+    "@marigold/tokens": "workspace:*"
+  },
   "devDependencies": {
     "@marigold/tsconfig": "workspace:*",
     "tsup": "5.11.13"
diff --git a/themes/create-theme/src/__snapshots__/create-theme.test.ts.snap b/packages/create-theme/src/__snapshots__/create-theme.test.ts.snap
similarity index 100%
rename from themes/create-theme/src/__snapshots__/create-theme.test.ts.snap
rename to packages/create-theme/src/__snapshots__/create-theme.test.ts.snap
diff --git a/themes/create-theme/src/create-theme.test.ts b/packages/create-theme/src/create-theme.test.ts
similarity index 100%
rename from themes/create-theme/src/create-theme.test.ts
rename to packages/create-theme/src/create-theme.test.ts
diff --git a/themes/create-theme/src/create-theme.ts b/packages/create-theme/src/create-theme.ts
similarity index 70%
rename from themes/create-theme/src/create-theme.ts
rename to packages/create-theme/src/create-theme.ts
index 3c2265694..c646d16f5 100644
--- a/themes/create-theme/src/create-theme.ts
+++ b/packages/create-theme/src/create-theme.ts
@@ -1,23 +1,23 @@
 import type { ScaleValue, Theme as Scales } from '@marigold/system';
 import type { Theme } from '@marigold/components';
 
-import * as Vars from './vars';
+import * as Token from '@marigold/tokens';
 
 export const base: Theme = {
   breakpoints: ['40em', '52em', '64em'],
 
-  fontWeights: Vars.typography.weight,
-  lineHeights: Vars.typography.lineHeight,
-  letterSpacings: Vars.typography.letterSpacing,
+  fontWeights: Token.typography.weight,
+  lineHeights: Token.typography.lineHeight,
+  letterSpacings: Token.typography.letterSpacing,
 
-  borderWidths: Vars.border.width,
-  radii: Vars.border.radius,
+  borderWidths: Token.border.width,
+  radii: Token.border.radius,
 
-  zIndices: Vars.layer,
-  opacities: Vars.opacity,
+  zIndices: Token.layer,
+  opacities: Token.opacity,
 };
 
-type AvailableColor = keyof typeof Vars.color;
+type AvailableColor = keyof typeof Token.color;
 type CustomColor = { name: string; value: ScaleValue<string> };
 
 export interface ThemeConfig {
@@ -52,12 +52,12 @@ export const createTheme = ({
   dimensions = 'fixed',
   components,
 }: ThemeConfig): Theme => {
-  // Create colors (pick from vars or custom)
+  // Create colors (pick from Token or custom)
   let colors: Theme['colors'] = {};
   for (let i = 0; i < configColors.length; i++) {
     const color = configColors[i];
     if (typeof color === 'string') {
-      colors[color] = Vars.color[color];
+      colors[color] = Token.color[color];
     } else {
       colors[color.name] = color.value;
     }
@@ -71,14 +71,14 @@ export const createTheme = ({
     colors,
 
     // Use fixed or fluid dimensions
-    space: Vars.size[dimensions],
-    sizes: Vars.size[dimensions],
+    space: Token.size[dimensions],
+    sizes: Token.size[dimensions],
 
     // Use fallback font if none provided
-    fonts: configFonts || Vars.typography.font,
+    fonts: configFonts || Token.typography.font,
 
     // Use fixed or fluid typography
-    fontSizes: Vars.typography.size[typography],
+    fontSizes: Token.typography.size[typography],
 
     // Add component styles
     ...components,
diff --git a/themes/create-theme/src/index.ts b/packages/create-theme/src/index.ts
similarity index 57%
rename from themes/create-theme/src/index.ts
rename to packages/create-theme/src/index.ts
index d366b10ca..d5546e5b3 100644
--- a/themes/create-theme/src/index.ts
+++ b/packages/create-theme/src/index.ts
@@ -1,2 +1,1 @@
-export * from './vars';
 export * from './create-theme';
diff --git a/themes/create-theme/tsconfig.build.json b/packages/create-theme/tsconfig.build.json
similarity index 100%
rename from themes/create-theme/tsconfig.build.json
rename to packages/create-theme/tsconfig.build.json
diff --git a/themes/create-theme/tsup.config.json b/packages/create-theme/tsup.config.json
similarity index 100%
rename from themes/create-theme/tsup.config.json
rename to packages/create-theme/tsup.config.json
diff --git a/packages/tokens/README.md b/packages/tokens/README.md
new file mode 100644
index 000000000..80dd852fc
--- /dev/null
+++ b/packages/tokens/README.md
@@ -0,0 +1,7 @@
+# `@marigold/tokends`
+
+> Collections of design tokens based on [open-props](https://open-props.style/)
+
+# What
+
+Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc. — represented as data. These can represent anything defined by design: a color as a RGB value, an opacity as a number, an animation ease as Bezier coordinates. ([Adobe Spectrum](https://spectrum.adobe.com/page/design-tokens/#:~:text=Design%20tokens%20are%20all%20the,animation%20ease%20as%20Bezier%20coordinates.))
diff --git a/packages/tokens/package.json b/packages/tokens/package.json
new file mode 100644
index 000000000..f603b9ab7
--- /dev/null
+++ b/packages/tokens/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@marigold/tokens",
+  "version": "0.0.1",
+  "description": "Marigold Design Tokens",
+  "license": "MIT",
+  "keywords": [
+    "marigold",
+    "theme",
+    "styles",
+    "design tokens",
+    "tokens"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "github:marigold-ui/marigold",
+    "directory": "packages/tokens"
+  },
+  "devDependencies": {
+    "@marigold/tsconfig": "workspace:*",
+    "tsup": "5.11.13"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts",
+    "watch": "tsup src/index.ts --watch",
+    "clean": "rm -rf node_modules && rm -rf dist"
+  }
+}
diff --git a/themes/create-theme/src/vars/aspect.stories.tsx b/packages/tokens/src/aspect.stories.tsx
similarity index 70%
rename from themes/create-theme/src/vars/aspect.stories.tsx
rename to packages/tokens/src/aspect.stories.tsx
index 05c977865..afff8d0b0 100644
--- a/themes/create-theme/src/vars/aspect.stories.tsx
+++ b/packages/tokens/src/aspect.stories.tsx
@@ -2,22 +2,22 @@ import React from 'react';
 import { Box, Stack } from '@marigold/components';
 import type { Meta } from '@storybook/react';
 
-import * as Vars from '.';
+import * as Token from '.';
 
 export default {
-  title: 'Vars',
+  title: 'Token',
 } as Meta;
 
 export const Aspects = () => (
   <Stack space="12px">
-    {Object.entries(Vars.aspect).map(([name, value]) => (
+    {Object.entries(Token.aspect).map(([name, value]) => (
       <Box
         key={name}
         css={{
           display: 'grid',
           placeItems: 'center',
-          color: Vars.color.gray['00'],
-          bg: Vars.color.gray['80'],
+          color: Token.color.gray['00'],
+          bg: Token.color.gray['80'],
           blockSize: 100,
           aspectRatio: value,
         }}
diff --git a/themes/create-theme/src/vars/aspect.ts b/packages/tokens/src/aspect.ts
similarity index 100%
rename from themes/create-theme/src/vars/aspect.ts
rename to packages/tokens/src/aspect.ts
diff --git a/themes/create-theme/src/vars/border.stories.tsx b/packages/tokens/src/border.stories.tsx
similarity index 65%
rename from themes/create-theme/src/vars/border.stories.tsx
rename to packages/tokens/src/border.stories.tsx
index cec62a03a..36631c9be 100644
--- a/themes/create-theme/src/vars/border.stories.tsx
+++ b/packages/tokens/src/border.stories.tsx
@@ -2,23 +2,23 @@ import React from 'react';
 import { Box, Inline, Stack } from '@marigold/components';
 import type { Meta } from '@storybook/react';
 
-import * as Vars from '.';
+import * as Token from '.';
 
 export default {
-  title: 'Vars/Border',
+  title: 'Token/Border',
 } as Meta;
 
 export const Size = () => (
   <Inline space="12px">
-    {Object.values(Vars.border.width).map(value => (
+    {Object.values(Token.border.width).map(value => (
       <Box
         key={value}
         css={{
           width: 100,
           height: 100,
-          bg: Vars.color.gray['20'],
+          bg: Token.color.gray['20'],
           borderStyle: 'solid',
-          borderColor: Vars.color.gray['80'],
+          borderColor: Token.color.gray['80'],
           borderWidth: value,
         }}
       />
@@ -28,15 +28,15 @@ export const Size = () => (
 
 export const Radius = () => (
   <Stack space="12px">
-    {Object.values(Vars.border.radius).map(value => (
+    {Object.values(Token.border.radius).map(value => (
       <Box
         key={value}
         css={{
           width: 200,
           height: 200,
           borderStyle: 'solid',
-          borderColor: Vars.color.gray['80'],
-          borderWidth: Vars.border.width.medium,
+          borderColor: Token.color.gray['80'],
+          borderWidth: Token.border.width.medium,
           borderRadius: value,
         }}
       />
diff --git a/themes/create-theme/src/vars/border.ts b/packages/tokens/src/border.ts
similarity index 100%
rename from themes/create-theme/src/vars/border.ts
rename to packages/tokens/src/border.ts
diff --git a/themes/create-theme/src/vars/color.stories.tsx b/packages/tokens/src/color.stories.tsx
similarity index 80%
rename from themes/create-theme/src/vars/color.stories.tsx
rename to packages/tokens/src/color.stories.tsx
index 32a5f7a27..fc5443acd 100644
--- a/themes/create-theme/src/vars/color.stories.tsx
+++ b/packages/tokens/src/color.stories.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { Box, Inline, Stack } from '@marigold/components';
 import type { Meta } from '@storybook/react';
 
-import * as Vars from '.';
+import * as Token from '.';
 
 export default {
-  title: 'Vars',
+  title: 'Token',
 } as Meta;
 
 export const Colors = () => {
@@ -21,12 +21,12 @@ export const Colors = () => {
     </Inline>
   );
 
-  const { brand, ...colors } = Vars.color;
+  const { brand, ...colors } = Token.color;
   return (
     <Stack space="12px">
       <List color={brand} />
       {Object.keys(colors).map(name => (
-        <List key={name} color={(Vars.color as any)[name]} />
+        <List key={name} color={(Token.color as any)[name]} />
       ))}
     </Stack>
   );
diff --git a/themes/create-theme/src/vars/index.ts b/packages/tokens/src/index.ts
similarity index 97%
rename from themes/create-theme/src/vars/index.ts
rename to packages/tokens/src/index.ts
index c864dd057..95043ba65 100644
--- a/themes/create-theme/src/vars/index.ts
+++ b/packages/tokens/src/index.ts
@@ -1,6 +1,6 @@
 /**
  * We use "open-props" (https://open-props.style/) to have a awesome baseline.
- * Sadly we can not really use directly since we generate different CSS vars,
+ * Sadly we can not really use directly since we generate different CSS Token,
  * if at all, and a different scale convention.
  *
  * This seems tideious but we don't want our users to have to
diff --git a/themes/create-theme/src/vars/layer.ts b/packages/tokens/src/layer.ts
similarity index 100%
rename from themes/create-theme/src/vars/layer.ts
rename to packages/tokens/src/layer.ts
diff --git a/themes/create-theme/src/vars/opacity.stories.tsx b/packages/tokens/src/opacity.stories.tsx
similarity index 62%
rename from themes/create-theme/src/vars/opacity.stories.tsx
rename to packages/tokens/src/opacity.stories.tsx
index eed77d2d6..cd12951e3 100644
--- a/themes/create-theme/src/vars/opacity.stories.tsx
+++ b/packages/tokens/src/opacity.stories.tsx
@@ -2,24 +2,24 @@ import React from 'react';
 import { Box, Stack } from '@marigold/components';
 import type { Meta } from '@storybook/react';
 
-import * as Vars from '.';
+import * as Token from '.';
 
 export default {
-  title: 'Vars',
+  title: 'Token',
 } as Meta;
 
 export const Opacity = () => (
   <Stack space="12px">
-    {Object.entries(Vars.opacity).map(([name, value]) => (
+    {Object.entries(Token.opacity).map(([name, value]) => (
       <Box
         key={name}
         css={{
           display: 'grid',
           placeItems: 'center',
-          color: value > 0 ? Vars.color.gray['00'] : Vars.color.gray['90'],
-          bg: Vars.color.gray['80'],
+          color: value > 0 ? Token.color.gray['00'] : Token.color.gray['90'],
+          bg: Token.color.gray['80'],
           blockSize: 100,
-          aspectRatio: Vars.aspect.square,
+          aspectRatio: Token.aspect.square,
           opacity: value,
         }}
       >
diff --git a/themes/create-theme/src/vars/opacity.ts b/packages/tokens/src/opacity.ts
similarity index 100%
rename from themes/create-theme/src/vars/opacity.ts
rename to packages/tokens/src/opacity.ts
diff --git a/themes/create-theme/src/vars/shadow.stories.tsx b/packages/tokens/src/shadow.stories.tsx
similarity index 77%
rename from themes/create-theme/src/vars/shadow.stories.tsx
rename to packages/tokens/src/shadow.stories.tsx
index 0b4bdab8a..c3a6c545f 100644
--- a/themes/create-theme/src/vars/shadow.stories.tsx
+++ b/packages/tokens/src/shadow.stories.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { Box, Stack } from '@marigold/components';
 import type { Meta } from '@storybook/react';
 
-import * as Vars from '.';
+import * as Token from '.';
 
 export default {
-  title: 'Vars',
+  title: 'Token',
 } as Meta;
 
 export const Shadows = () => {
@@ -14,15 +14,15 @@ export const Shadows = () => {
       css={{
         height: 100,
         width: 100,
-        bg: Vars.color.gray['00'],
+        bg: Token.color.gray['00'],
         boxShadow: value,
       }}
     />
   );
 
-  const shadow = Vars.shadow;
+  const shadow = Token.shadow;
   return (
-    <Box bg={Vars.color.gray['30']} p={40}>
+    <Box bg={Token.color.gray['30']} p={40}>
       <Stack space="32px" align="center">
         {Object.values(shadow).map(value => (
           <Shadow key={value} value={value} />
diff --git a/themes/create-theme/src/vars/shadow.ts b/packages/tokens/src/shadow.ts
similarity index 100%
rename from themes/create-theme/src/vars/shadow.ts
rename to packages/tokens/src/shadow.ts
diff --git a/themes/create-theme/src/vars/size.stories.tsx b/packages/tokens/src/size.stories.tsx
similarity index 66%
rename from themes/create-theme/src/vars/size.stories.tsx
rename to packages/tokens/src/size.stories.tsx
index 20eb41b26..290af4e81 100644
--- a/themes/create-theme/src/vars/size.stories.tsx
+++ b/packages/tokens/src/size.stories.tsx
@@ -2,23 +2,23 @@ import React from 'react';
 import { Box, Inline, Stack } from '@marigold/components';
 import type { Meta } from '@storybook/react';
 
-import * as Vars from '.';
+import * as Token from '.';
 
 export default {
-  title: 'Vars/Size',
+  title: 'Token/Size',
 } as Meta;
 
 export const Fixed = () => (
   <Inline space="12px">
-    {Object.values(Vars.size.fixed).map(value => (
+    {Object.values(Token.size.fixed).map(value => (
       <Box
         css={{
           display: 'grid',
           placeItems: 'center',
-          color: Vars.color.gray['00'],
-          bg: Vars.color.gray['80'],
+          color: Token.color.gray['00'],
+          bg: Token.color.gray['80'],
           blockSize: 100,
-          height: Vars.size.fixed.xxlarge,
+          height: Token.size.fixed.xxlarge,
           width: value,
         }}
       />
@@ -28,15 +28,15 @@ export const Fixed = () => (
 
 export const Fluid = () => (
   <Inline space="12px">
-    {Object.values(Vars.size.fluid).map(value => (
+    {Object.values(Token.size.fluid).map(value => (
       <Box
         css={{
           display: 'grid',
           placeItems: 'center',
-          color: Vars.color.gray['00'],
-          bg: Vars.color.gray['80'],
+          color: Token.color.gray['00'],
+          bg: Token.color.gray['80'],
           blockSize: 100,
-          height: Vars.size.fixed.xxlarge,
+          height: Token.size.fixed.xxlarge,
           width: value,
         }}
       />
@@ -46,11 +46,11 @@ export const Fluid = () => (
 
 export const Headlines = () => (
   <Stack space="24px">
-    {Object.values(Vars.size.header).map(value => (
+    {Object.values(Token.size.header).map(value => (
       <Box
         css={{
-          fontSize: Vars.typography.size.fluid.regular,
-          fontFamily: Vars.typography.font.sans,
+          fontSize: Token.typography.size.fluid.regular,
+          fontFamily: Token.typography.font.sans,
           maxWidth: value,
         }}
       >
@@ -63,12 +63,12 @@ export const Headlines = () => (
 
 export const Content = () => (
   <Stack space="24px">
-    {Object.values(Vars.size.content).map(value => (
+    {Object.values(Token.size.content).map(value => (
       <Box
         key={value}
         css={{
-          fontSize: Vars.typography.size.fluid.small,
-          fontFamily: Vars.typography.font.sans,
+          fontSize: Token.typography.size.fluid.small,
+          fontFamily: Token.typography.font.sans,
           maxWidth: value,
         }}
       >
diff --git a/themes/create-theme/src/vars/size.ts b/packages/tokens/src/size.ts
similarity index 100%
rename from themes/create-theme/src/vars/size.ts
rename to packages/tokens/src/size.ts
diff --git a/themes/create-theme/src/vars/typography.stories.tsx b/packages/tokens/src/typography.stories.tsx
similarity index 72%
rename from themes/create-theme/src/vars/typography.stories.tsx
rename to packages/tokens/src/typography.stories.tsx
index 2b513f2ae..1f0f33871 100644
--- a/themes/create-theme/src/vars/typography.stories.tsx
+++ b/packages/tokens/src/typography.stories.tsx
@@ -2,15 +2,15 @@ import React from 'react';
 import { Box, Stack } from '@marigold/components';
 import type { Meta } from '@storybook/react';
 
-import * as Vars from '.';
+import * as Token from '.';
 
 export default {
-  title: 'Vars/Typography',
+  title: 'Token/Typography',
 } as Meta;
 
 export const Fonts = () => (
   <Stack space="32px" align="center">
-    {Object.values(Vars.typography.font).map(value => (
+    {Object.values(Token.typography.font).map(value => (
       <Box key={value} css={{ fontFamily: value }}>
         A wizard's job is to vex chumps quickly in fog.
       </Box>
@@ -20,12 +20,12 @@ export const Fonts = () => (
 
 export const LineHeights = () => (
   <Stack space="32px" align="center">
-    {Object.values(Vars.typography.lineHeight).map(value => (
+    {Object.values(Token.typography.lineHeight).map(value => (
       <Box
         key={value}
         css={{
           lineHeight: value,
-          fontFamily: Vars.typography.font.sans,
+          fontFamily: Token.typography.font.sans,
           maxWidth: '75ch',
         }}
       >
@@ -42,12 +42,12 @@ export const LineHeights = () => (
 
 export const LetterSpacing = () => (
   <Stack space="32px" align="center">
-    {Object.values(Vars.typography.letterSpacing).map(value => (
+    {Object.values(Token.typography.letterSpacing).map(value => (
       <Box
         key={value}
         css={{
           letterSpacing: value,
-          fontFamily: Vars.typography.font.sans,
+          fontFamily: Token.typography.font.sans,
         }}
       >
         Streichholzschächtelchen
@@ -58,12 +58,12 @@ export const LetterSpacing = () => (
 
 export const FontSizes = () => (
   <Stack space="32px" align="center">
-    {Object.values(Vars.typography.size.fixed).map(value => (
+    {Object.values(Token.typography.size.fixed).map(value => (
       <Box
         key={value}
         css={{
           fontSize: value,
-          fontFamily: Vars.typography.font.sans,
+          fontFamily: Token.typography.font.sans,
         }}
       >
         Waldeinsamkeit
@@ -74,12 +74,12 @@ export const FontSizes = () => (
 
 export const FluidFontSizes = () => (
   <Stack space="32px" align="center">
-    {Object.values(Vars.typography.size.fluid).map(value => (
+    {Object.values(Token.typography.size.fluid).map(value => (
       <Box
         key={value}
         css={{
           fontSize: value,
-          fontFamily: Vars.typography.font.sans,
+          fontFamily: Token.typography.font.sans,
         }}
       >
         Waldeinsamkeit
@@ -90,13 +90,13 @@ export const FluidFontSizes = () => (
 
 export const FontWeights = () => (
   <Stack space="32px" align="center">
-    {Object.values(Vars.typography.weight).map(value => (
+    {Object.values(Token.typography.weight).map(value => (
       <Box
         key={value}
         css={{
           fontWeight: value,
-          fontSize: Vars.typography.size.fixed.large,
-          fontFamily: Vars.typography.font.sans,
+          fontSize: Token.typography.size.fixed.large,
+          fontFamily: Token.typography.font.sans,
         }}
       >
         Unabhängigkeitserklärungen
diff --git a/themes/create-theme/src/vars/typography.ts b/packages/tokens/src/typography.ts
similarity index 100%
rename from themes/create-theme/src/vars/typography.ts
rename to packages/tokens/src/typography.ts
diff --git a/packages/tokens/tsconfig.build.json b/packages/tokens/tsconfig.build.json
new file mode 100644
index 000000000..79a762231
--- /dev/null
+++ b/packages/tokens/tsconfig.build.json
@@ -0,0 +1,3 @@
+{
+  "extends": "@marigold/tsconfig/react"
+}
diff --git a/packages/tokens/tsup.config.json b/packages/tokens/tsup.config.json
new file mode 100644
index 000000000..ce4f4423b
--- /dev/null
+++ b/packages/tokens/tsup.config.json
@@ -0,0 +1,8 @@
+{
+  "entry": ["src/index.ts"],
+  "format": ["esm", "cjs"],
+  "tsconfig": "./tsconfig.build.json",
+  "dts": true,
+  "external": "react",
+  "clean": true
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 51ab2cc3a..8ef7da610 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -296,6 +296,17 @@ importers:
       '@marigold/tsconfig': link:../../config/tsconfig
       tsup: 5.11.13_typescript@4.6.2
 
+  packages/create-theme:
+    specifiers:
+      '@marigold/tokens': workspace:*
+      '@marigold/tsconfig': workspace:*
+      tsup: 5.11.13
+    dependencies:
+      '@marigold/tokens': link:../tokens
+    devDependencies:
+      '@marigold/tsconfig': link:../../config/tsconfig
+      tsup: 5.11.13_typescript@4.6.2
+
   packages/icons:
     specifiers:
       '@marigold/system': workspace:*
@@ -324,13 +335,7 @@ importers:
       '@marigold/tsconfig': link:../../config/tsconfig
       tsup: 5.11.13_typescript@4.6.2
 
-  packages/types:
-    specifiers:
-      '@types/react': 17.0.39
-    devDependencies:
-      '@types/react': 17.0.39
-
-  themes/create-theme:
+  packages/tokens:
     specifiers:
       '@marigold/tsconfig': workspace:*
       tsup: 5.11.13
@@ -338,6 +343,12 @@ importers:
       '@marigold/tsconfig': link:../../config/tsconfig
       tsup: 5.11.13_typescript@4.6.2
 
+  packages/types:
+    specifiers:
+      '@types/react': 17.0.39
+    devDependencies:
+      '@types/react': 17.0.39
+
   themes/theme-b2b:
     specifiers:
       '@marigold/components': workspace:*
diff --git a/scripts/release.mjs b/scripts/release.mjs
index 10714d2bd..50c6eec53 100644
--- a/scripts/release.mjs
+++ b/scripts/release.mjs
@@ -143,8 +143,10 @@ await publish('config/prettier');
 await publish('config/storybook');
 await publish('config/tsconfig');
 await publish('packages/components');
+await publish('packages/create-theme');
 await publish('packages/icons');
 await publish('packages/system');
+await publish('packages/tokens');
 await publish('packages/types');
 await publish('themes/theme-b2b');
 await publish('themes/theme-core');


Test patch:
diff --git a/themes/create-theme/src/vars/color.ts b/packages/tokens/src/color.ts
similarity index 100%
rename from themes/create-theme/src/vars/color.ts
rename to packages/tokens/src/color.ts
diff --git a/themes/create-theme/src/vars/index.test.ts b/packages/tokens/src/index.test.ts
similarity index 99%
rename from themes/create-theme/src/vars/index.test.ts
rename to packages/tokens/src/index.test.ts
index c2808f75f..60b2d04c4 100644
--- a/themes/create-theme/src/vars/index.test.ts
+++ b/packages/tokens/src/index.test.ts
@@ -1,7 +1,7 @@
-import * as Vars from '.';
+import * as Token from '.';
 
 test('smoketest', () => {
-  expect(Vars).toMatchInlineSnapshot(`
+  expect(Token).toMatchInlineSnapshot(`
     {
       "aspect": {
         "golden": "1.6180/1",