@youcan/celeste-tokens 0.6.84 → 0.6.85

package/dist/theme.json

@@ -0,0 +1,419 @@
+{
+  "colors": {
+    "white": {
+      "alpha-24": "rgba(255, 255, 255, 0.24)",
+      "alpha-16": "rgba(255, 255, 255, 0.16)",
+      "alpha-10": "rgba(255, 255, 255, 0.1)"
+    },
+    "black": {
+      "alpha-24": "rgba(23, 23, 23, 0.24)",
+      "alpha-16": "rgba(23, 23, 23, 0.16)",
+      "alpha-10": "rgba(23, 23, 23, 0.1)"
+    },
+    "neutral": {
+      "0": "#ffffff",
+      "50": "#f7f7f7",
+      "100": "#f5f5f5",
+      "200": "#ebebeb",
+      "300": "#d1d1d1",
+      "400": "#a3a3a3",
+      "500": "#7b7b7b",
+      "600": "#5c5c5c",
+      "700": "#333333",
+      "800": "#292929",
+      "900": "#1c1c1c",
+      "950": "#171717",
+      "alpha-10": "rgba(163, 163, 163, 0.1)",
+      "alpha-16": "rgba(163, 163, 163, 0.16)",
+      "alpha-24": "rgba(163, 163, 163, 0.24)"
+    },
+    "red": {
+      "50": "#ffebec",
+      "100": "#ffd5d8",
+      "200": "#ffc0c5",
+      "300": "#ff97a0",
+      "400": "#ff6875",
+      "500": "#fb3748",
+      "600": "#e93544",
+      "700": "#d02533",
+      "800": "#ad1f2b",
+      "900": "#8b1822",
+      "950": "#681219",
+      "alpha-10": "rgba(251, 55, 72, 0.1)",
+      "alpha-16": "rgba(251, 55, 72, 0.16)",
+      "alpha-24": "rgba(251, 55, 72, 0.24)"
+    },
+    "orange": {
+      "50": "#fff1eb",
+      "100": "#ffe3d5",
+      "200": "#ffd5c0",
+      "300": "#ffba97",
+      "400": "#ff9a68",
+      "500": "#ff8447",
+      "600": "#e97135",
+      "700": "#d05e25",
+      "800": "#ad4e1f",
+      "900": "#8b3e18",
+      "950": "#682f12",
+      "alpha-10": "rgba(255, 145, 71, 0.1)",
+      "alpha-16": "rgba(255, 145, 71, 0.16)",
+      "alpha-24": "rgba(255, 145, 71, 0.24)"
+    },
+    "yellow": {
+      "50": "#fffaeb",
+      "100": "#ffefcc",
+      "200": "#ffecc0",
+      "300": "#ffe097",
+      "400": "#ffd268",
+      "500": "#f6b51e",
+      "600": "#e6a819",
+      "700": "#c99a2c",
+      "800": "#a78025",
+      "900": "#86661d",
+      "950": "#624c18",
+      "alpha-10": "rgba(251, 198, 75, 0.1)",
+      "alpha-16": "rgba(251, 198, 75, 0.16)",
+      "alpha-24": "rgba(251, 198, 75, 0.24)"
+    },
+    "green": {
+      "50": "#e0faec",
+      "100": "#d0fbe9",
+      "200": "#c2f5da",
+      "300": "#84ebb4",
+      "400": "#3ee089",
+      "500": "#1fc16b",
+      "600": "#1daf61",
+      "700": "#178c4e",
+      "800": "#1a7544",
+      "900": "#16643b",
+      "950": "#0b4627",
+      "alpha-10": "rgba(31, 193, 107, 0.1)",
+      "alpha-16": "rgba(31, 193, 107, 0.16)",
+      "alpha-24": "rgba(31, 193, 107, 0.24)"
+    },
+    "teal": {
+      "50": "#e4fbf8",
+      "100": "#d0fbf5",
+      "200": "#c2f5ee",
+      "300": "#84ebdd",
+      "400": "#3fdec9",
+      "500": "#22d3bb",
+      "600": "#1daf9c",
+      "700": "#178c7d",
+      "800": "#1a7569",
+      "900": "#16645a",
+      "950": "#0b463e",
+      "alpha-10": "rgba(34, 211, 187, 0.1)",
+      "alpha-16": "rgba(34, 211, 187, 0.16)",
+      "alpha-24": "rgba(34, 211, 187, 0.24)"
+    },
+    "sky": {
+      "50": "#ebf8ff",
+      "100": "#d5f1ff",
+      "200": "#c0eaff",
+      "300": "#97dcff",
+      "400": "#68cdff",
+      "500": "#47c2ff",
+      "600": "#35ade9",
+      "700": "#2597d0",
+      "800": "#1f7ead",
+      "900": "#18658b",
+      "950": "#124b68",
+      "alpha-10": "rgba(71, 194, 255, 0.1)",
+      "alpha-16": "rgba(71, 194, 255, 0.16)",
+      "alpha-24": "rgba(71, 194, 255, 0.24)"
+    },
+    "blue": {
+      "50": "#ebf1ff",
+      "100": "#d5e2ff",
+      "200": "#c0d5ff",
+      "300": "#97baff",
+      "400": "#6895ff",
+      "500": "#335cff",
+      "600": "#3559e9",
+      "700": "#2547d0",
+      "800": "#1f3bad",
+      "900": "#182f8b",
+      "950": "#122368",
+      "alpha-10": "rgba(71, 108, 255, 0.1)",
+      "alpha-16": "rgba(71, 108, 255, 0.16)",
+      "alpha-24": "rgba(71, 108, 255, 0.24)"
+    },
+    "purple": {
+      "50": "#efebff",
+      "100": "#dcd5ff",
+      "200": "#cac0ff",
+      "300": "#a897ff",
+      "400": "#8c71f6",
+      "500": "#7d52f4",
+      "600": "#693ee0",
+      "700": "#5b2cc9",
+      "800": "#4c25a7",
+      "900": "#3d1d86",
+      "950": "#351a75",
+      "alpha-10": "rgba(120, 77, 239, 0.1)",
+      "alpha-16": "rgba(120, 77, 239, 0.16)",
+      "alpha-24": "rgba(120, 77, 239, 0.24)"
+    },
+    "pink": {
+      "50": "#ffebf4",
+      "100": "#ffd5ea",
+      "200": "#ffc0df",
+      "300": "#ff97cb",
+      "400": "#ff68b3",
+      "500": "#fb4ba3",
+      "600": "#e9358f",
+      "700": "#d0257a",
+      "800": "#ad1f66",
+      "900": "#8b1852",
+      "950": "#68123d",
+      "alpha-10": "rgba(251, 75, 163, 0.1)",
+      "alpha-16": "rgba(251, 75, 163, 0.16)",
+      "alpha-24": "rgba(251, 75, 163, 0.24)"
+    },
+    "brand": {
+      "50": "#ffebf4",
+      "100": "#ffd6e9",
+      "200": "#ffc2dd",
+      "300": "#ff99c7",
+      "400": "#ff66ab",
+      "500": "#e1116f",
+      "600": "#cb0f64",
+      "700": "#b40e59",
+      "800": "#9e0c4e",
+      "900": "#870a43",
+      "950": "#681239"
+    },
+    "static": {
+      "white": "#ffffff",
+      "black": "#171717"
+    },
+    "bg": {
+      "white-0": "#ffffff",
+      "weak-50": "#f7f7f7",
+      "strong-950": "#171717",
+      "surface-800": "#292929",
+      "soft-200": "#ebebeb",
+      "sub-300": "#d1d1d1"
+    },
+    "state": {
+      "faded": {
+        "light": "#ebebeb",
+        "base": "#7b7b7b",
+        "dark": "#292929",
+        "lighter": "#f5f5f5"
+      },
+      "error": {
+        "base": "#fb3748",
+        "light": "#ffc0c5",
+        "dark": "#681219",
+        "lighter": "#ffebec"
+      },
+      "warning": {
+        "dark": "#682f12",
+        "base": "#ff8447",
+        "light": "#ffd5c0",
+        "lighter": "#fff1eb"
+      },
+      "information": {
+        "dark": "#122368",
+        "base": "#335cff",
+        "light": "#c0d5ff",
+        "lighter": "#ebf1ff"
+      },
+      "success": {
+        "dark": "#0b4627",
+        "base": "#1fc16b",
+        "light": "#c2f5da",
+        "lighter": "#e0faec"
+      },
+      "away": {
+        "dark": "#624c18",
+        "base": "#f6b51e",
+        "light": "#ffecc0",
+        "lighter": "#fffaeb"
+      },
+      "feature": {
+        "dark": "#351a75",
+        "base": "#7d52f4",
+        "light": "#cac0ff",
+        "lighter": "#efebff"
+      },
+      "verified": {
+        "dark": "#124b68",
+        "base": "#47c2ff",
+        "light": "#c0eaff",
+        "lighter": "#ebf8ff"
+      },
+      "highlighted": {
+        "dark": "#68123d",
+        "base": "#fb4ba3",
+        "light": "#ffc0df",
+        "lighter": "#ffebf4"
+      },
+      "stable": {
+        "dark": "#0b463e",
+        "base": "#22d3bb",
+        "light": "#c2f5ee",
+        "lighter": "#e4fbf8"
+      }
+    },
+    "text": {
+      "strong-950": "#171717",
+      "sub-600": "#5c5c5c",
+      "disabled-300": "#d1d1d1",
+      "white-0": "#ffffff",
+      "soft-400": "#a3a3a3"
+    },
+    "stroke": {
+      "soft-200": "#ebebeb",
+      "strong-950": "#171717",
+      "white-0": "#ffffff",
+      "sub-300": "#d1d1d1"
+    },
+    "icon": {
+      "sub-600": "#5c5c5c",
+      "strong-950": "#171717",
+      "soft-400": "#a3a3a3",
+      "disabled-300": "#d1d1d1",
+      "white-0": "#ffffff"
+    },
+    "social": {
+      "apple": "#000000",
+      "twitter": "#010101",
+      "github": "#24292f",
+      "notion": "#1e2226",
+      "tidal": "#000000",
+      "amazon": "#353e47",
+      "zendesk": "#16140d"
+    },
+    "illustration": {
+      "strong-400": "#a3a3a3",
+      "sub-300": "#d1d1d1",
+      "soft-200": "#ebebeb",
+      "weak-100": "#f5f5f5",
+      "white-0": "#ffffff"
+    },
+    "overlay": {
+      "overlay": "rgba(2, 13, 23, 0.24)"
+    },
+    "primary-base": "#e1116f",
+    "primary-darker": "#b40e59",
+    "primary-alpha-10": "rgba(251, 75, 163, 0.1)",
+    "primary-alpha-16": "rgba(251, 75, 163, 0.16)",
+    "primary-dark": "#cb0f64",
+    "primary-alpha-24": "rgba(251, 75, 163, 0.24)"
+  },
+  "fontFamily": {
+    "inter-display": "InterDisplay",
+    "inter": "InterVariable",
+    "cairo": "Cairo",
+    "geist-mono": "'Geist Mono'",
+    "sans": "InterVariable, Cairo, sans-serif",
+    "mono": "'Geist Mono', monospace",
+    "display": "InterDisplay, Cairo, sans-serif"
+  },
+  "fontSize": {},
+  "fontWeight": {
+    "display-0": 500,
+    "sans-0": 400,
+    "sans-1": 500
+  },
+  "lineHeight": {
+    "0": "64px",
+    "1": "56px",
+    "2": "48px",
+    "3": "40px",
+    "4": "32px",
+    "5": "28px",
+    "6": "24px",
+    "7": "20px",
+    "8": "16px",
+    "9": "12px"
+  },
+  "letterSpacing": {
+    "0": "-0.01em",
+    "1": "-0.005em",
+    "2": "0em",
+    "3": "-0.015em",
+    "4": "-0.011000000000000001em",
+    "5": "-0.006em",
+    "6": "0.06em",
+    "7": "0.04em",
+    "8": "0.02em"
+  },
+  "borderRadius": {
+    "4": "4px",
+    "6": "6px",
+    "8": "8px",
+    "10": "10px",
+    "12": "12px",
+    "16": "16px",
+    "20": "20px",
+    "24": "24px",
+    "full": "999px"
+  },
+  "boxShadow": {
+    "regular": {
+      "xs": "0 1px 2px 0 #0a0d1408",
+      "md": "0 16px 32px -12px #0e121b1a"
+    },
+    "buttons": {
+      "primary-focus": "0 0 0 2px #ffffff, 0 0 0 4px #fb4ba31a",
+      "important-focus": "0 0 0 2px #ffffff, 0 0 0 4px #99a0ae29",
+      "error-focus": "0 0 0 2px #ffffff, 0 0 0 4px #fb37481a"
+    },
+    "fancy-buttons": {
+      "neutral": "0 1px 2px 0 #1b1c1d7a, 0 0 0 1px #242628",
+      "primary": "0 1px 2px 0 #0e121b3d, 0 0 0 1px #e1116f",
+      "error": "0 1px 2px 0 #0e121b3d, 0 0 0 1px #fb3748",
+      "stroke": "0 1px 3px 0 #0e121b1f, 0 0 0 1px #e1e4ea"
+    },
+    "toggle": {
+      "switch": "0 6px 10px 0 #0e121b0f, 0 2px 4px 0 #0e121b08"
+    }
+  },
+  "spacing": {
+    "0": "0",
+    "2": "2px",
+    "4": "4px",
+    "6": "6px",
+    "8": "8px",
+    "10": "10px",
+    "12": "12px",
+    "14": "14px",
+    "16": "16px",
+    "48": "48px"
+  },
+  "duration": {
+    "extra-fast": "100ms",
+    "fast": "200ms",
+    "normal": "300ms",
+    "slow": "400ms",
+    "extra-slow": "500ms"
+  },
+  "shortcuts": {
+    "title-h1-title": "[font:var(--title-h1-title)]",
+    "title-h2-title": "[font:var(--title-h2-title)]",
+    "title-h3-title": "[font:var(--title-h3-title)]",
+    "title-h4-title": "[font:var(--title-h4-title)]",
+    "title-h5-title": "[font:var(--title-h5-title)]",
+    "title-h6-title": "[font:var(--title-h6-title)]",
+    "label-xl": "[font:var(--label-xl)]",
+    "label-lg": "[font:var(--label-lg)]",
+    "label-md": "[font:var(--label-md)]",
+    "label-sm": "[font:var(--label-sm)]",
+    "label-xs": "[font:var(--label-xs)]",
+    "paragraph-xl": "[font:var(--paragraph-xl)]",
+    "paragraph-lg": "[font:var(--paragraph-lg)]",
+    "paragraph-md": "[font:var(--paragraph-md)]",
+    "paragraph-sm": "[font:var(--paragraph-sm)]",
+    "paragraph-xs": "[font:var(--paragraph-xs)]",
+    "subheading-md": "[font:var(--subheading-md)]",
+    "subheading-sm": "[font:var(--subheading-sm)]",
+    "subheading-xs": "[font:var(--subheading-xs)]",
+    "subheading-xxs": "[font:var(--subheading-xxs)]",
+    "docs-label": "[font:var(--docs-label)]",
+    "docs-paragraph": "[font:var(--docs-paragraph)]"
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste-tokens",
   "type": "module",
-  "version": "0.6.84",
+  "version": "0.6.85",
   "author": "YouCan <tech@youcan.shop>",
   "repository": {
     "type": "git",

package/src/generate.ts

@@ -4,6 +4,7 @@ import { join, resolve } from 'node:path';
 import { register } from '@tokens-studio/sd-transforms';
 import { minify as csso } from 'csso';
 import StyleDictionary from 'style-dictionary';
+import { unocssFormat } from './unocss-formatter.ts';
 
 const dist = `${resolve(import.meta.dirname, '..', 'dist')}/`;
 
@@ -36,6 +37,11 @@ const sd = new StyleDictionary({
   preprocessors: [
     'tokens-studio',
   ],
+  hooks: {
+    formats: {
+      unocss: unocssFormat,
+    },
+  },
   platforms: {
     css: {
       transformGroup: 'tokens-studio',
@@ -63,6 +69,19 @@ const sd = new StyleDictionary({
         },
       ],
     },
+    unocss: {
+      transformGroup: 'tokens-studio',
+      transforms: [
+        'name/kebab',
+      ],
+      buildPath: dist,
+      files: [
+        {
+          destination: 'theme.json',
+          format: 'unocss',
+        },
+      ],
+    },
   },
 });
 

package/src/unocss-formatter.ts

@@ -0,0 +1,86 @@
+export function unocssFormat({ dictionary }: { dictionary: any }): string {
+  const theme: Record<string, any> = {
+    colors: {},
+    fontFamily: {},
+    fontSize: {},
+    fontWeight: {},
+    lineHeight: {},
+    letterSpacing: {},
+    borderRadius: {},
+    boxShadow: {},
+    spacing: {},
+    duration: {},
+    shortcuts: {},
+  };
+
+  const set = (obj: any, path: string[], value: any): void => {
+    let current = obj;
+    for (let i = 0; i < path.length - 1; i++) {
+      const key = path[i];
+      if (!current[key])
+        current[key] = {};
+      current = current[key];
+    }
+    current[path[path.length - 1]] = value;
+  };
+
+  const propertyMap: Record<string, string> = {
+    color: 'colors',
+    fontFamilies: 'fontFamily',
+    fontSizes: 'fontSize',
+    fontWeights: 'fontWeight',
+    lineHeights: 'lineHeight',
+    letterSpacing: 'letterSpacing',
+    spacing: 'spacing',
+    radius: 'borderRadius',
+    shadow: 'boxShadow',
+    boxShadow: 'boxShadow',
+    animation: 'duration',
+    duration: 'duration',
+  };
+
+  dictionary.allTokens.forEach((token) => {
+    const { path, value, type, $type, name } = token;
+    const val = value ?? token.$value;
+    const root = path[0];
+    const subPath = path.slice(1);
+
+    if (subPath.length === 0)
+      return;
+
+    if ($type === 'typography' || type === 'typography' || root === 'typography') {
+      const shortcutName = name;
+      if (shortcutName) {
+        theme.shortcuts[shortcutName] = `[font:var(--${shortcutName})]`;
+      }
+      return;
+    }
+
+    let themeKey = propertyMap[root] ?? propertyMap[$type] ?? propertyMap[type];
+
+    if (!themeKey && path.includes('radius')) {
+      themeKey = 'borderRadius';
+    }
+
+    if (themeKey) {
+      let finalValue = val;
+
+      if (themeKey === 'boxShadow') {
+        if (typeof val === 'object' && val !== null) {
+          const shadows = Array.isArray(val) ? val : [val];
+          finalValue = shadows.map((s: any) => {
+            if (typeof s === 'string')
+              return s;
+            const { x, y, blur, spread, color, type: shadowType } = s;
+            const inset = shadowType === 'innerShadow' ? 'inset ' : '';
+            return `${inset}${x}px ${y}px ${blur}px ${spread}px ${color}`;
+          }).join(', ');
+        }
+      }
+
+      set(theme[themeKey], subPath, finalValue);
+    }
+  });
+
+  return JSON.stringify(theme, null, 2);
+}

package/tsconfig.json

@@ -2,7 +2,12 @@
   "compilerOptions": {
     "target": "ESNext",
     "module": "NodeNext",
-    "moduleResolution": "nodenext"
+    "moduleResolution": "nodenext",
+    "allowImportingTsExtensions": true,
+    "declaration": true,
+    "declarationDir": "dist",
+    "emitDeclarationOnly": true,
+    "noEmit": true
   },
   "exclude": [
     "node_modules",