welcome-ui 0.0.0-dev.1759252708223 → 0.0.0-dev.1759392523253

package/dist/types/theme/tokens.json.d.ts

@@ -0,0 +1,378 @@
+declare const _default: {
+  "border": {
+    "width": {
+      "$type": "dimension",
+      "lg": {
+        "$value": "3px"
+      },
+      "md": {
+        "$value": "2px"
+      },
+      "sm": {
+        "$value": "1px"
+      }
+    }
+  },
+  "color": {
+    "$type": "color",
+    "beige": {
+      "10": { "$value": "#fbf9f7" },
+      "20": { "$value": "#f6f3ef" },
+      "30": { "$value": "#eae4de" },
+      "40": { "$value": "#d2cbc3" },
+      "50": { "$value": "#a7a096" },
+      "60": { "$value": "#605b55" },
+      "70": { "$value": "#4d4944" },
+      "80": { "$value": "#33302d" },
+      "90": { "$value": "#1e1c1a" }
+    },
+    "blue": {
+      "10": { "$value": "#e0f5ff" },
+      "20": { "$value": "#bbeaff" },
+      "30": { "$value": "#9bdef7" },
+      "40": { "$value": "#55c3e9" },
+      "50": { "$value": "#27a5d0" },
+      "60": { "$value": "#057aa3" },
+      "70": { "$value": "#025a79" },
+      "80": { "$value": "#013c50" },
+      "90": { "$value": "#00202b" }
+    },
+    "green": {
+      "10": { "$value": "#eaffd4" },
+      "20": { "$value": "#d6f6b4" },
+      "30": { "$value": "#bade94" },
+      "40": { "$value": "#9fc873" },
+      "50": { "$value": "#83ad57" },
+      "60": { "$value": "#5a8034" },
+      "70": { "$value": "#40611f" },
+      "80": { "$value": "#2a4210" },
+      "90": { "$value": "#142603" }
+    },
+    "neutral": {
+      "10": { "$value": "#ffffff" },
+      "20": { "$value": "#f3f3f3" },
+      "30": { "$value": "#dedede" },
+      "40": { "$value": "#bdbdbd" },
+      "50": { "$value": "#989898" },
+      "60": { "$value": "#585858" },
+      "70": { "$value": "#444444" },
+      "80": { "$value": "#212121" },
+      "90": { "$value": "#000000" }
+    },
+    "orange": {
+      "10": { "$value": "#ffebce" },
+      "20": { "$value": "#ffd495" },
+      "30": { "$value": "#ffbb59" },
+      "40": { "$value": "#ff9f14" },
+      "50": { "$value": "#db860a" },
+      "60": { "$value": "#a6670a" },
+      "70": { "$value": "#824f06" },
+      "80": { "$value": "#573607" },
+      "90": { "$value": "#382303" }
+    },
+    "pink": {
+      "10": { "$value": "#ffeaf5" },
+      "20": { "$value": "#ffd5eb" },
+      "30": { "$value": "#feb7dc" },
+      "40": { "$value": "#f696c8" },
+      "50": { "$value": "#e468a8" },
+      "60": { "$value": "#c24887" },
+      "70": { "$value": "#972962" },
+      "80": { "$value": "#6d1142" },
+      "90": { "$value": "#3c0725" }
+    },
+    "red": {
+      "10": { "$value": "#fbdedc" },
+      "20": { "$value": "#fcc7c3" },
+      "30": { "$value": "#fdb3ae" },
+      "40": { "$value": "#ff9490" },
+      "50": { "$value": "#ff6165" },
+      "60": { "$value": "#e1003a" },
+      "70": { "$value": "#a80029" },
+      "80": { "$value": "#75001a" },
+      "90": { "$value": "#450101" }
+    },
+    "red-orange": {
+      "10": { "$value": "#ffded0" },
+      "20": { "$value": "#ffc9b2" },
+      "30": { "$value": "#ffb595" },
+      "40": { "$value": "#ff9868" },
+      "50": { "$value": "#e67b49" },
+      "60": { "$value": "#c45927" },
+      "70": { "$value": "#9f4217" },
+      "80": { "$value": "#6d2605" },
+      "90": { "$value": "#451701" }
+    },
+    "teal": {
+      "10": { "$value": "#d5fffa" },
+      "20": { "$value": "#aaf4eb" },
+      "30": { "$value": "#6de1d2" },
+      "40": { "$value": "#00c7ae" },
+      "50": { "$value": "#01aa95" },
+      "60": { "$value": "#008070" },
+      "70": { "$value": "#00544a" },
+      "80": { "$value": "#003d35" },
+      "90": { "$value": "#00211d" }
+    },
+    "transparent": {
+      "$value": "transparent"
+    },
+    "violet": {
+      "10": { "$value": "#f2f2ff" },
+      "20": { "$value": "#e0e0ff" },
+      "30": { "$value": "#c9c9ff" },
+      "40": { "$value": "#acacff" },
+      "50": { "$value": "#9080f0" },
+      "60": { "$value": "#7958d6" },
+      "70": { "$value": "#593cac" },
+      "80": { "$value": "#422a86" },
+      "90": { "$value": "#1f0e51" }
+    },
+    "yellow": {
+      "10": { "$value": "#fff8d9" },
+      "20": { "$value": "#fff1b2" },
+      "30": { "$value": "#ffe166" },
+      "40": { "$value": "#ffcd00" },
+      "50": { "$value": "#e5b800" },
+      "60": { "$value": "#b69200" },
+      "70": { "$value": "#846a01" },
+      "80": { "$value": "#604d00" },
+      "90": { "$value": "#423500" }
+    },
+    "brand": {
+      "10": { "$value": "{color.yellow.10}" },
+      "20": { "$value": "{color.yellow.20}" },
+      "30": { "$value": "{color.yellow.30}" },
+      "40": { "$value": "{color.yellow.40}" },
+      "50": { "$value": "{color.yellow.50}" },
+      "60": { "$value": "{color.yellow.60}" },
+      "70": { "$value": "{color.yellow.70}" },
+      "80": { "$value": "{color.yellow.80}" },
+      "90": { "$value": "{color.yellow.90}" }
+    },
+    "overlay": {
+      "$value": "color-mix(in oklab, {color.neutral.90} 55%, transparent)"
+    },
+    "secondary": {
+      "blue": { "$value": "{color.blue.40}" },
+      "green": { "$value": "{color.green.30}" },
+      "orange": { "$value": "{color.red-orange.40}" },
+      "pink": { "$value": "{color.pink.40}" },
+      "teal": { "$value": "{color.teal.40}" },
+      "violet": { "$value": "{color.violet.40}" }
+    }
+  },
+  "font": {
+    "family": {
+      "$type": "fontFamily",
+      "default": {
+        "$value": "'Work Sans', sans-serif"
+      },
+      "headings": {
+        "$value": "'welcome-font', sans-serif"
+      },
+      "icons": {
+        "$value": "'welcome-icon-font'"
+      }
+    },
+    "size": {
+      "$type": "dimension",
+      "11": { "$value": "0.6875rem" },
+      "12": { "$value": "0.75rem" },
+      "13": { "$value": "0.8125rem" },
+      "14": { "$value": "0.875rem" },
+      "16": { "$value": "1rem" },
+      "18": { "$value": "1.125rem" },
+      "20": { "$value": "1.25rem" },
+      "24": { "$value": "1.5rem" },
+      "26": { "$value": "1.625rem" },
+      "36": { "$value": "2.25rem" },
+      "45": { "$value": "2.8125rem" },
+      "65": { "$value": "4.0625rem" },
+      "h0": { "$value": "{font.size.65}" },
+      "h1": { "$value": "{font.size.45}" },
+      "h2": { "$value": "{font.size.36}" },
+      "h3": { "$value": "{font.size.26}" },
+      "h4": { "$value": "{font.size.20}" },
+      "h5": { "$value": "{font.size.16}" },
+      "h6": { "$value": "{font.size.14}" },
+      "lg": { "$value": "{font.size.18}" },
+      "md": { "$value": "{font.size.16}" },
+      "sm": { "$value": "{font.size.14}" },
+      "subtitle": {
+        "md": { "$value": "{font.size.13}" },
+        "sm": { "$value": "{font.size.11}" }
+      },
+      "xl": { "$value": "{font.size.24}" },
+      "xs": { "$value": "{font.size.12}" }
+    },
+    "weight": {
+      "$type": "fontWeight",
+      "400": { "$value": "400" },
+      "500": { "$value": "500" },
+      "600": { "$value": "600" },
+      "bold": { "$value": "{font.weight.600}" },
+      "medium": { "$value": "{font.weight.500}" },
+      "regular": { "$value": "{font.weight.400}" }
+    }
+  },
+  "height": {
+    "$type": "dimension",
+    "4": { "$value": "0.25rem" },
+    "8": { "$value": "0.5rem" },
+    "10": { "$value": "0.625rem" },
+    "12": { "$value": "0.75rem" },
+    "16": { "$value": "1rem" },
+    "20": { "$value": "1.25rem" },
+    "24": { "$value": "1.5rem" },
+    "30": { "$value": "1.875rem" },
+    "32": { "$value": "2rem" },
+    "40": { "$value": "2.5rem" },
+    "48": { "$value": "3rem" },
+    "50": { "$value": "3.125rem" },
+    "60": { "$value": "3.75rem" },
+    "64": { "$value": "4rem" },
+    "elements": {
+      "lg": { "$value": "{height.40}" },
+      "md": { "$value": "{height.32}" },
+      "sm": { "$value": "{height.24}" },
+      "xl": { "$value": "{height.48}" },
+      "xs": { "$value": "{height.16}" },
+      "xxl": { "$value": "{height.64}" },
+      "xxs": { "$value": "{height.12}" }
+    }
+  },
+  "letter-spacing": {
+    "$type": "dimension",
+    "h0": { "$value": "-0.10625rem" },
+    "h1": { "$value": "-0.075rem" },
+    "h2": { "$value": "-0.0625rem" },
+    "h3": { "$value": "-0.05625rem" },
+    "h4": { "$value": "-0.0375rem" },
+    "h5": { "$value": "-0.03125rem" },
+    "h6": { "$value": "-0.03125rem" },
+    "lg": { "$value": "-0.019rem" },
+    "md": { "$value": "-0.019rem" },
+    "sm": { "$value": "-0.019rem" },
+    "subtitle": {
+      "md": { "$value": "-0.0125rem" },
+      "sm": { "$value": "-0.0125rem" }
+    },
+    "xs": { "$value": "-0.0125rem" }
+  },
+  "line-height": {
+    "$type": "dimension",
+    "14": { "$value": "0.875rem" },
+    "16": { "$value": "1rem" },
+    "18": { "$value": "1.125rem" },
+    "20": { "$value": "1.25rem" },
+    "24": { "$value": "1.5rem" },
+    "32": { "$value": "2rem" },
+    "40": { "$value": "2.5rem" },
+    "48": { "$value": "3rem" },
+    "72": { "$value": "4.5rem" },
+    "iso-font-size": { "$value": "1" },
+    "h0": { "$value": "{line-height.72}" },
+    "h1": { "$value": "{line-height.48}" },
+    "h2": { "$value": "{line-height.40}" },
+    "h3": { "$value": "{line-height.32}" },
+    "h4": { "$value": "{line-height.24}" },
+    "h5": { "$value": "{line-height.20}" },
+    "h6": { "$value": "{line-height.18}" },
+    "lg": { "$value": "{line-height.24}" },
+    "md": { "$value": "{line-height.18}" },
+    "sm": { "$value": "{line-height.18}" },
+    "subtitle": {
+      "md": { "$value": "{line-height.iso-font-size}" },
+      "sm": { "$value": "{line-height.iso-font-size}" }
+    },
+    "xs": { "$value": "{line-height.14}" }
+  },
+  "radius": {
+    "$type": "dimension",
+    "2xl": { "$value": "1.5rem" },
+    "circle": { "$value": "calc(infinity * 1px)" },
+    "lg": { "$value": "0.5rem" },
+    "md": { "$value": "0.25rem" },
+    "sm": { "$value": "0.125rem" },
+    "xl": { "$value": "1rem" }
+  },
+  "breakpoint": {
+    "$type": "dimension",
+    "2xl": { "$value": "1440px" },
+    "3xl": { "$value": "1620px" },
+    "4xl": { "$value": "1920px" },
+    "lg": { "$value": "980px" },
+    "md": { "$value": "736px" },
+    "sm": { "$value": "480px" },
+    "xl": { "$value": "1280px" },
+    "xs": { "$value": "0px" }
+  },
+  "shadow": {
+    "$type": "shadow",
+    "focus": {
+      "$value": "0 0 0 2px {color.brand.40}"
+    },
+    "focus-danger": {
+      "$value": "0 0 0 2px {color.red.30}"
+    },
+    "focus-success": {
+      "$value": "0 0 0 2px {color.green.30}"
+    },
+    "focus-warning": {
+      "$value": "0 0 0 2px {color.orange.20}"
+    },
+    "md": {
+      "$value": "3px 4px 10px 0 color-mix(in oklab, {color.neutral.90} 7%, transparent)"
+    },
+    "sm": {
+      "$value": "1px 2px 4px 0 color-mix(in oklab, {color.neutral.90} 5%, transparent)"
+    }
+  },
+  "spacing": {
+    "$type": "dimension",
+    "0": { "$value": "0" },
+    "2": { "$value": "0.125rem" },
+    "3": { "$value": "0.1875rem" },
+    "4": { "$value": "0.25rem" },
+    "8": { "$value": "0.5rem" },
+    "12": { "$value": "0.75rem" },
+    "16": { "$value": "1rem" },
+    "24": { "$value": "1.5rem" },
+    "28": { "$value": "1.75rem" },
+    "32": { "$value": "2rem" },
+    "36": { "$value": "2.25rem" },
+    "48": { "$value": "3rem" },
+    "64": { "$value": "4rem" },
+    "96": { "$value": "6rem" },
+    "128": { "$value": "8rem" },
+    "192": { "$value": "12rem" },
+    "3xl": { "$value": "{spacing.48}" },
+    "4xl": { "$value": "{spacing.64}" },
+    "5xl": { "$value": "{spacing.96}" },
+    "6xl": { "$value": "{spacing.128}" },
+    "7xl": { "$value": "{spacing.192}" },
+    "lg": { "$value": "{spacing.16}" },
+    "md": { "$value": "{spacing.12}" },
+    "sm": { "$value": "{spacing.8}" },
+    "xl": { "$value": "{spacing.24}" },
+    "xs": { "$value": "{spacing.4}" },
+    "xxl": { "$value": "{spacing.32}" },
+    "xxs": { "$value": "{spacing.2}" }
+  },
+  "duration": {
+    "$type": "duration",
+    "fast": { "$value": "100ms" },
+    "medium": { "$value": "300ms" },
+    "slow": { "$value": "500ms" }
+  },
+  "timing": {
+    "$type": "cubicBezier",
+    "primary": { "$value": "ease" },
+    "secondary": { "$value": "linear" },
+    "tertiary": { "$value": "cubic-bezier(0.41, 0.094, 0.54, 0.07)" }
+  }
+}
+;
+
+export default _default;

package/dist/types/theme/types.d.ts

@@ -1,13 +1,3 @@
-import { primitives, semantics } from './tokens';
-export type ColorMix = `color-mix(in oklab, var(${ColorTokens}) ${OpacityRanges}%, transparent)`;
-export type ColorTokens = 'transparent' | PrimitiveColorTokens | SemanticColorTokens;
 export type PolymorphicProps<E extends React.ElementType> = React.PropsWithChildren<React.ComponentPropsWithoutRef<E> & {
     as?: E;
 }>;
-export type SemanticFontSizeTokens = keyof (typeof semantics)['fontSizes'];
-export type SemanticHeightTokens = keyof (typeof semantics)['heights'];
-export type SemanticSpacingTokens = keyof (typeof semantics)['spacings'];
-type OpacityRanges = 10 | 40;
-type PrimitiveColorTokens = keyof (typeof primitives)['colors'];
-type SemanticColorTokens = keyof (typeof semantics)['colors'];
-export {};

package/dist/types/theme/utils/parseTokens.d.ts

@@ -0,0 +1,15 @@
+export type FlatTokens = Record<string, string>;
+export interface TokensStructure {
+    [key: string]: TokenNode;
+}
+type TokenNode = string | TokenValue | TokenWithType | {
+    [key: string]: TokenNode;
+};
+interface TokenValue {
+    $value: string;
+}
+type TokenWithType = TokensStructure & {
+    $type: string;
+};
+export declare const parseTokens: (tokens: TokensStructure) => FlatTokens;
+export {};

package/dist/types/theme/utils/parseTokens.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/clamp.d.ts

@@ -0,0 +1 @@
+export declare const clamp: (value: number, min: number, max: number) => number;

package/dist/types/utils/use-screens.d.ts

@@ -1,5 +1,5 @@
-import { primitives } from '../theme/tokens';
-type ScreenSize = keyof typeof primitives.screens extends `--breakpoint-${infer K}` ? K : never;
+import { default as tokens } from '../theme/tokens.json';
+type ScreenSize = keyof Omit<typeof tokens.breakpoint, '$type'>;
 type Screens = Record<ScreenSize, number>;
 /**
  * A custom hook to retrieve the screen sizes defined in the theme tokens.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "welcome-ui",
-  "version": "0.0.0-dev.1759252708223",
+  "version": "0.0.0-dev.1759392523253",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "files": [
     "dist"
@@ -28,7 +28,8 @@
   "scripts": {
     "start": "vite build --watch",
     "build": "vite build",
-    "theme:generate": "tsx src/theme/generate-theme.ts && yarn run -W prettier --write 'src/theme/theme.css'",
+    "build:tokens": "style-dictionary build --config=style-dictionary.json --verbose",
+    "theme:generate": "yarn build:tokens && tsx src/theme/generate-theme.ts && yarn run -W prettier --write 'src/theme/theme.css'",
     "test": "vitest"
   },
   "repository": {
@@ -86,6 +87,7 @@
     "release-it": "^18.1.2",
     "rollup": "^4.39.0",
     "rollup-preserve-directives": "^1.1.3",
+    "style-dictionary": "^5.0.4",
     "tsx": "^4.20.6",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",