@youcan/celeste-tokens 0.6.88 → 0.6.90

package/dist/preset.ts

@@ -313,7 +313,7 @@ export const presetCeleste = definePreset((options: CelestePresetOptions = {}):
       "primary-dark": "#cb0f64",
       "primary-alpha-24": "rgba(251, 75, 163, 0.24)"
     },
-    "fontFamily": {
+    "font": {
       "inter-display": "InterDisplay",
       "inter": "InterVariable",
       "cairo": "Cairo",
@@ -351,7 +351,7 @@ export const presetCeleste = definePreset((options: CelestePresetOptions = {}):
       "7": "0.04em",
       "8": "0.02em"
     },
-    "borderRadius": {
+    "radius": {
       "4": "4px",
       "6": "6px",
       "8": "8px",
@@ -362,25 +362,17 @@ export const presetCeleste = definePreset((options: CelestePresetOptions = {}):
       "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"
-      }
+    "shadow": {
+      "regular-xs": "0 1px 2px 0 #0a0d1408",
+      "regular-md": "0 16px 32px -12px #0e121b1a",
+      "buttons-primary-focus": "0 0 0 2px #ffffff, 0 0 0 4px #fb4ba31a",
+      "buttons-important-focus": "0 0 0 2px #ffffff, 0 0 0 4px #99a0ae29",
+      "buttons-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",
+      "fancy-buttons-primary": "0 1px 2px 0 #0e121b3d, 0 0 0 1px #e1116f",
+      "fancy-buttons-error": "0 1px 2px 0 #0e121b3d, 0 0 0 1px #fb3748",
+      "fancy-buttons-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",
@@ -400,6 +392,51 @@ export const presetCeleste = definePreset((options: CelestePresetOptions = {}):
       "normal": "300ms",
       "slow": "400ms",
       "extra-slow": "500ms"
+    },
+    "animation": {
+      "keyframes": {
+        "celeste-fade-in": "{from{opacity: 0;}}",
+        "celeste-fade-out": "{to{opacity: 0;}}",
+        "celeste-zoom-in": "{from{opacity: 0;transform: scale(0.95);}}",
+        "celeste-zoom-out": "{to{opacity: 0;transform: scale(0.95);}}",
+        "celeste-spin-in": "{from{opacity: 0;transform: rotate(-30deg);}}",
+        "celeste-spin-out": "{to{opacity: 0;transform: rotate(30deg);}}",
+        "celeste-slide-in-from-top": "{from{transform: translateY(-100%);}}",
+        "celeste-slide-in-from-bottom": "{from{transform: translateY(100%);}}",
+        "celeste-slide-in-from-left": "{from{transform: translateX(-100%);}}",
+        "celeste-slide-in-from-right": "{from{transform: translateX(100%);}}",
+        "celeste-slide-out-to-top": "{to{transform: translateY(-100%);}}",
+        "celeste-slide-out-to-bottom": "{to{transform: translateY(100%);}}",
+        "celeste-slide-out-to-left": "{to{transform: translateX(-100%);}}",
+        "celeste-slide-out-to-right": "{to{transform: translateX(100%);}}",
+        "celeste-bounce": "{0%,100%{transform: translateY(-25%);animation-timing-function: cubic-bezier(0.8,0,1,1);}50%{transform: translateY(0);animation-timing-function: cubic-bezier(0,0,0.2,1);}}",
+        "celeste-pulse": "{0%,100%{opacity: 1;}50%{opacity: 0.5;}}",
+        "celeste-ping": "{75%,100%{transform: scale(2);opacity: 0;}}",
+        "celeste-shake": "{0%,100%{transform: translateX(0);}10%,30%,50%,70%,90%{transform: translateX(-10px);}20%,40%,60%,80%{transform: translateX(10px);}}",
+        "celeste-swing": "{0%,100%{transform: rotate(0deg);}20%{transform: rotate(15deg);}40%{transform: rotate(-10deg);}60%{transform: rotate(5deg);}80%{transform: rotate(-5deg);}}",
+        "celeste-wiggle": "{0%,100%{transform: rotate(-3deg);}50%{transform: rotate(3deg);}}",
+        "celeste-flip": "{from{transform: perspective(400px) rotateY(-180deg);opacity: 0;}to{transform: perspective(400px) rotateY(0);opacity: 1;}}",
+        "celeste-flip-out": "{from{transform: perspective(400px) rotateY(0);opacity: 1;}to{transform: perspective(400px) rotateY(180deg);opacity: 0;}}",
+        "celeste-accordion-down": "{from{height: 0;}to{height: var(--radix-accordion-content-height);}}",
+        "celeste-accordion-up": "{from{height: var(--radix-accordion-content-height);}to{height: 0;}}",
+        "celeste-collapsible-down": "{from{height: 0;}to{height: var(--radix-collapsible-content-height);}}",
+        "celeste-collapsible-up": "{from{height: var(--radix-collapsible-content-height);}to{height: 0;}}",
+        "celeste-enter": "{from{opacity: 0;transform: translate3d(0,0,0) scale3d(0.95,0.95,0.95) rotate(0);}}",
+        "celeste-exit": "{to{opacity: 0;transform: translate3d(0,0,0) scale3d(0.95,0.95,0.95) rotate(0);}}",
+        "celeste-scale-in": "{from{opacity: 0;transform: scale(0);}to{opacity: 1;transform: scale(1);}}",
+        "celeste-scale-out": "{from{opacity: 1;transform: scale(1);}to{opacity: 0;transform: scale(0);}}",
+        "celeste-rotate-in": "{from{opacity: 0;transform: rotate(-200deg);}to{opacity: 1;transform: rotate(0);}}",
+        "celeste-rotate-out": "{from{opacity: 1;transform: rotate(0);}to{opacity: 0;transform: rotate(200deg);}}",
+        "celeste-slide-down": "{from{height: 0;opacity: 0;}to{height: 100%;opacity: 1;}}",
+        "celeste-slide-up": "{from{height: 100%;opacity: 1;}to{height: 0;opacity: 0;}}",
+        "celeste-slide-left": "{from{width: 0;opacity: 0;}to{width: 100%;opacity: 1;}}",
+        "celeste-slide-right": "{from{width: 100%;opacity: 1;}to{width: 0;opacity: 0;}}",
+        "celeste-glow": "{0%,100%{box-shadow: 0 0 5px rgba(255,255,255,0.2);}50%{box-shadow: 0 0 20px rgba(255,255,255,0.6);}}",
+        "celeste-flash": "{0%,50%,100%{opacity: 1;}25%,75%{opacity: 0;}}",
+        "celeste-rubber-band": "{0%{transform: scale(1);}30%{transform: scaleX(1.25) scaleY(0.75);}40%{transform: scaleX(0.75) scaleY(1.25);}50%{transform: scaleX(1.15) scaleY(0.85);}65%{transform: scaleX(0.95) scaleY(1.05);}75%{transform: scaleX(1.05) scaleY(0.95);}100%{transform: scale(1);}}",
+        "celeste-jello": "{0%,100%{transform: skewX(0deg) skewY(0deg);}30%{transform: skewX(25deg) skewY(-25deg);}40%{transform: skewX(-15deg) skewY(15deg);}50%{transform: skewX(15deg) skewY(-15deg);}65%{transform: skewX(-5deg) skewY(5deg);}75%{transform: skewX(5deg) skewY(-5deg);}}",
+        "celeste-heartbeat": "{0%,100%{transform: scale(1);}14%,42%{transform: scale(1.3);}28%,70%{transform: scale(1);}}"
+      }
     }
   },
   "shortcuts": {

package/package.json

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

package/src/generate.ts

@@ -39,7 +39,10 @@ const sd = new StyleDictionary({
   ],
   hooks: {
     formats: {
-      unocss: unocssFormat,
+      unocss: ({ dictionary }) => unocssFormat({
+        dictionary,
+        animations,
+      }),
     },
   },
   platforms: {

package/src/unocss-formatter.ts

@@ -1,17 +1,40 @@
-export function unocssFormat({ dictionary }: { dictionary: any }): string {
+export function unocssFormat({ dictionary, animations }: { dictionary: any; animations: string }): string {
+  const keyframes: Record<string, string> = {};
+  const keyframesRegex = /@keyframes\s+([\w-]+)\s*\{([\s\S]*?)(?=@keyframes|$)/g;
+
+  for (const match of animations.matchAll(keyframesRegex)) {
+    const name = match[1];
+
+    const fullContent = match[2].trim();
+
+    const innerContent = fullContent.replace(/\}\s*$/, '').trim();
+
+    const minified = innerContent
+      .replace(/\s+/g, ' ')
+      .replace(/\s*\{\s*/g, '{')
+      .replace(/\s*\}\s*/g, '}')
+      .replace(/\s*;\s*/g, ';')
+      .replace(/\s*,\s*/g, ',');
+
+    keyframes[name] = `{${minified}}`;
+  }
+
   const preset: Record<string, any> = {
     name: 'presetCeleste',
     theme: {
       colors: {},
-      fontFamily: {},
+      font: {},
       fontSize: {},
       fontWeight: {},
       lineHeight: {},
       letterSpacing: {},
-      borderRadius: {},
-      boxShadow: {},
+      radius: {},
+      shadow: {},
       spacing: {},
       duration: {},
+      animation: {
+        keyframes,
+      },
     },
     shortcuts: {},
   };
@@ -29,15 +52,15 @@ export function unocssFormat({ dictionary }: { dictionary: any }): string {
 
   const propertyMap: Record<string, string> = {
     color: 'colors',
-    fontFamilies: 'fontFamily',
+    fontFamilies: 'font',
     fontSizes: 'fontSize',
     fontWeights: 'fontWeight',
     lineHeights: 'lineHeight',
     letterSpacing: 'letterSpacing',
     spacing: 'spacing',
-    radius: 'borderRadius',
-    shadow: 'boxShadow',
-    boxShadow: 'boxShadow',
+    radius: 'radius',
+    shadow: 'shadow',
+    boxShadow: 'shadow',
     animation: 'duration',
     duration: 'duration',
   };
@@ -62,13 +85,13 @@ export function unocssFormat({ dictionary }: { dictionary: any }): string {
     let themeKey = propertyMap[root] ?? propertyMap[$type] ?? propertyMap[type];
 
     if (!themeKey && path.includes('radius')) {
-      themeKey = 'borderRadius';
+      themeKey = 'radius';
     }
 
     if (themeKey) {
       let finalValue = val;
 
-      if (themeKey === 'boxShadow') {
+      if (themeKey === 'shadow') {
         if (typeof val === 'object' && val !== null) {
           const shadows = Array.isArray(val) ? val : [val];
           finalValue = shadows.map((s: any) => {
@@ -79,6 +102,11 @@ export function unocssFormat({ dictionary }: { dictionary: any }): string {
             return `${inset}${x}px ${y}px ${blur}px ${spread}px ${color}`;
           }).join(', ');
         }
+
+        const flatKey = subPath.join('-');
+        preset.theme.shadow[flatKey] = finalValue;
+
+        return;
       }
 
       set(preset.theme[themeKey], subPath, finalValue);