@7onic-ui/tokens 0.2.2 → 0.2.3

package/cli/sync.js

@@ -319,7 +319,7 @@ var KNOWN_ORDERS = {
   fontSize: ["2xs", "xs", "sm", "md", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl"],
   borderRadius: ["none", "sm", "base", "md", "lg", "xl", "2xl", "3xl", "full"],
   shadow: ["xs", "sm", "md", "lg", "xl", "primary-glow"],
-  iconSize: ["xs", "sm", "md", "lg", "xl"],
+  iconSize: ["2xs", "xs", "sm", "md", "lg", "xl"],
   zIndex: ["0", "10", "20", "30", "40", "50", "sticky", "dropdown", "overlay", "modal", "popover", "tooltip", "toast"],
   duration: ["instant", "fast", "micro", "normal", "slow", "slower", "slowest"],
   easing: ["linear", "ease", "easeIn", "easeOut", "easeInOut"],
@@ -385,21 +385,23 @@ function readAnimationTokens(tokens) {
     const durationVar = `var(--duration-${durationKey})`;
     const easingVar = `var(--easing-${camelToKebab(easingKey)})`;
     const animationType = ext?.animationType;
-    if (animationType === "spin") {
-      result.push({ name, type: "spin", opacity: "", scale: "", translateY: "", translateYNegative: false, heightVar: "", durationVar, easingVar });
+    if (animationType === "spin" || animationType === "progress-stripe" || animationType === "spinner-orbit" || animationType === "spinner-dot" || animationType === "spinner-bar" || animationType === "spinner-morph" || animationType === "skeleton-pulse" || animationType === "skeleton-wave" || animationType === "typing-cursor") {
+      result.push({ name, type: animationType, opacity: "", scale: "", translateX: "", translateXNegative: false, translateY: "", translateYNegative: false, heightVar: "", durationVar, easingVar });
       continue;
     }
     if (animationType === "height-expand" || animationType === "height-collapse") {
-      result.push({ name, type: animationType, opacity: "", scale: "", translateY: "", translateYNegative: false, heightVar: val.heightVar, durationVar, easingVar });
+      result.push({ name, type: animationType, opacity: "", scale: "", translateX: "", translateXNegative: false, translateY: "", translateYNegative: false, heightVar: val.heightVar, durationVar, easingVar });
       continue;
     }
     const direction = ext?.direction;
     const type = direction === "exit" ? "exit" : "enter";
     const opacityRaw = val.opacity ? resolveRef(val.opacity, p) : "";
     const scaleRaw = val.scale ? resolveRef(val.scale, p) : "";
+    const translateXRaw = val.translateX ? val.translateX.startsWith("{") ? resolveRef(val.translateX, p) : val.translateX : "";
+    const translateXNegative = ext?.translateXNegative === true;
     const translateYRaw = val.translateY ? resolveRef(val.translateY, p) : "";
     const translateYNegative = ext?.translateYNegative === true;
-    result.push({ name, type, opacity: opacityRaw, scale: scaleRaw, translateY: translateYRaw, translateYNegative, heightVar: "", durationVar, easingVar });
+    result.push({ name, type, opacity: opacityRaw, scale: scaleRaw, translateX: translateXRaw, translateXNegative, translateY: translateYRaw, translateYNegative, heightVar: "", durationVar, easingVar });
   }
   return result.length > 0 ? result : null;
 }
@@ -414,6 +416,11 @@ function extractRefKey(ref) {
   const match = ref.match(/^\{primitive\.\w+\.(\w+)\}$/);
   return match ? match[1] : ref;
 }
+function formatTranslateVal(raw, negative) {
+  const sign = negative ? "-" : "";
+  if (/[%a-z]/i.test(raw)) return `${sign}${raw}`;
+  return `${sign}${raw}px`;
+}
 function generateAnimationCss(a, format) {
   const lines = [];
   if (a.type === "spin") {
@@ -430,6 +437,120 @@ function generateAnimationCss(a, format) {
     lines.push(`}`);
     return lines.join("\n");
   }
+  if (a.type === "spinner-orbit") {
+    lines.push(`@keyframes ${a.name} {`);
+    lines.push(`  from { transform: rotateY(0deg); }`);
+    lines.push(`  to { transform: rotateY(360deg); }`);
+    lines.push(`}`);
+    if (format === "v4") {
+      lines.push(`@utility animate-${a.name} {`);
+    } else {
+      lines.push(`.animate-${a.name} {`);
+    }
+    lines.push(`  animation: ${a.name} ${a.durationVar} ${a.easingVar} infinite;`);
+    lines.push(`}`);
+    return lines.join("\n");
+  }
+  if (a.type === "spinner-dot") {
+    lines.push(`@keyframes ${a.name} {`);
+    lines.push(`  0%, 100% { opacity: 0.2; }`);
+    lines.push(`  50% { opacity: 1; }`);
+    lines.push(`}`);
+    if (format === "v4") {
+      lines.push(`@utility animate-${a.name} {`);
+    } else {
+      lines.push(`.animate-${a.name} {`);
+    }
+    lines.push(`  animation: ${a.name} ${a.durationVar} ${a.easingVar} infinite;`);
+    lines.push(`}`);
+    return lines.join("\n");
+  }
+  if (a.type === "spinner-bar") {
+    lines.push(`@keyframes ${a.name} {`);
+    lines.push(`  0%, 100% { transform: scaleY(0.4); }`);
+    lines.push(`  50% { transform: scaleY(1); }`);
+    lines.push(`}`);
+    if (format === "v4") {
+      lines.push(`@utility animate-${a.name} {`);
+    } else {
+      lines.push(`.animate-${a.name} {`);
+    }
+    lines.push(`  animation: ${a.name} ${a.durationVar} ${a.easingVar} infinite;`);
+    lines.push(`}`);
+    return lines.join("\n");
+  }
+  if (a.type === "spinner-morph") {
+    lines.push(`@keyframes ${a.name} {`);
+    lines.push(`  0%, 100% { border-radius: 50%; transform: rotateY(0deg) rotate(0deg); }`);
+    lines.push(`  25% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotateY(90deg) rotate(90deg); }`);
+    lines.push(`  50% { border-radius: 50%; transform: rotateY(180deg) rotate(180deg); }`);
+    lines.push(`  75% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; transform: rotateY(270deg) rotate(270deg); }`);
+    lines.push(`}`);
+    if (format === "v4") {
+      lines.push(`@utility animate-${a.name} {`);
+    } else {
+      lines.push(`.animate-${a.name} {`);
+    }
+    lines.push(`  animation: ${a.name} ${a.durationVar} ${a.easingVar} infinite;`);
+    lines.push(`}`);
+    return lines.join("\n");
+  }
+  if (a.type === "skeleton-pulse") {
+    lines.push(`@keyframes ${a.name} {`);
+    lines.push(`  0%, 100% { opacity: 1; }`);
+    lines.push(`  50% { opacity: 0.4; }`);
+    lines.push(`}`);
+    if (format === "v4") {
+      lines.push(`@utility animate-${a.name} {`);
+    } else {
+      lines.push(`.animate-${a.name} {`);
+    }
+    lines.push(`  animation: ${a.name} ${a.durationVar} ${a.easingVar} infinite;`);
+    lines.push(`}`);
+    return lines.join("\n");
+  }
+  if (a.type === "skeleton-wave") {
+    lines.push(`@keyframes ${a.name} {`);
+    lines.push(`  0% { transform: translateX(-100%); }`);
+    lines.push(`  100% { transform: translateX(100%); }`);
+    lines.push(`}`);
+    if (format === "v4") {
+      lines.push(`@utility animate-${a.name} {`);
+    } else {
+      lines.push(`.animate-${a.name} {`);
+    }
+    lines.push(`  animation: ${a.name} ${a.durationVar} ${a.easingVar} infinite;`);
+    lines.push(`}`);
+    return lines.join("\n");
+  }
+  if (a.type === "typing-cursor") {
+    lines.push(`@keyframes ${a.name} {`);
+    lines.push(`  0%, 100% { opacity: 1; }`);
+    lines.push(`  50% { opacity: 0.4; }`);
+    lines.push(`}`);
+    if (format === "v4") {
+      lines.push(`@utility animate-${a.name} {`);
+    } else {
+      lines.push(`.animate-${a.name} {`);
+    }
+    lines.push(`  animation: ${a.name} ${a.durationVar} ${a.easingVar} infinite;`);
+    lines.push(`}`);
+    return lines.join("\n");
+  }
+  if (a.type === "progress-stripe") {
+    lines.push(`@keyframes ${a.name} {`);
+    lines.push(`  from { background-position: 1rem 0; }`);
+    lines.push(`  to { background-position: 0 0; }`);
+    lines.push(`}`);
+    if (format === "v4") {
+      lines.push(`@utility animate-${a.name} {`);
+    } else {
+      lines.push(`.animate-${a.name} {`);
+    }
+    lines.push(`  animation: ${a.name} ${a.durationVar} ${a.easingVar} infinite;`);
+    lines.push(`}`);
+    return lines.join("\n");
+  }
   if (a.type === "height-expand" || a.type === "height-collapse") {
     const isExpand = a.type === "height-expand";
     lines.push(`@keyframes ${a.name} {`);
@@ -449,10 +570,15 @@ function generateAnimationCss(a, format) {
       fromT.push(isEnter ? `scale(${a.scale})` : "scale(1)");
       toT.push(isEnter ? "scale(1)" : `scale(${a.scale})`);
     }
+    if (a.translateX) {
+      const v = formatTranslateVal(a.translateX, a.translateXNegative);
+      fromT.push(isEnter ? `translateX(${v})` : "translateX(0)");
+      toT.push(isEnter ? "translateX(0)" : `translateX(${v})`);
+    }
     if (a.translateY) {
-      const px = `${a.translateYNegative ? "-" : ""}${a.translateY}px`;
-      fromT.push(isEnter ? `translateY(${px})` : "translateY(0)");
-      toT.push(isEnter ? "translateY(0)" : `translateY(${px})`);
+      const v = formatTranslateVal(a.translateY, a.translateYNegative);
+      fromT.push(isEnter ? `translateY(${v})` : "translateY(0)");
+      toT.push(isEnter ? "translateY(0)" : `translateY(${v})`);
     }
     if (fromT.length) {
       fromProps.push(`transform: ${fromT.join(" ")}`);
@@ -1088,6 +1214,7 @@ function generateJsTokens(tokens) {
       };
       if (val.opacity) obj.opacity = resolveRef(val.opacity, p);
       if (val.scale) obj.scale = resolveRef(val.scale, p);
+      if (val.translateX) obj.translateX = val.translateX.startsWith("{") ? resolveRef(val.translateX, p) : val.translateX;
       if (val.translateY) obj.translateY = resolveRef(val.translateY, p);
       if (val.heightVar) obj.heightVar = val.heightVar;
       animData[name] = obj;
@@ -1285,6 +1412,7 @@ function generateTypeDefinitions(tokens) {
       const fields = ["duration: string", "easing: string"];
       if (val.opacity) fields.unshift("opacity: string");
       if (val.scale) fields.unshift("scale: string");
+      if (val.translateX) fields.unshift("translateX: string");
       if (val.translateY) fields.unshift("translateY: string");
       if (val.heightVar) fields.unshift("heightVar: string");
       lines.push(`  '${name}': { ${fields.join("; ")} };`);
@@ -1552,6 +1680,7 @@ function generateNormalizedJson(tokens) {
       animFlat[`${name}-easing`] = easingRaw;
       if (val.opacity) animFlat[`${name}-opacity`] = resolveRef(val.opacity, p);
       if (val.scale) animFlat[`${name}-scale`] = resolveRef(val.scale, p);
+      if (val.translateX) animFlat[`${name}-translateX`] = val.translateX.startsWith("{") ? resolveRef(val.translateX, p) : val.translateX;
       if (val.translateY) animFlat[`${name}-translateY`] = resolveRef(val.translateY, p);
       if (val.heightVar) animFlat[`${name}-heightVar`] = val.heightVar;
     }
@@ -1796,6 +1925,53 @@ function generateV3Preset(tokens) {
         lines.push(`          from: { height: '${isExpand ? "0" : `var(${a.heightVar})`}' },`);
         lines.push(`          to: { height: '${isExpand ? `var(${a.heightVar})` : "0"}' },`);
         lines.push(`        },`);
+      } else if (a.type === "spin") {
+        lines.push(`        '${a.name}': {`);
+        lines.push(`          from: { 'transform': 'rotate(0deg)' },`);
+        lines.push(`          to: { 'transform': 'rotate(360deg)' },`);
+        lines.push(`        },`);
+      } else if (a.type === "progress-stripe") {
+        lines.push(`        '${a.name}': {`);
+        lines.push(`          from: { 'background-position': '1rem 0' },`);
+        lines.push(`          to: { 'background-position': '0 0' },`);
+        lines.push(`        },`);
+      } else if (a.type === "spinner-orbit") {
+        lines.push(`        '${a.name}': {`);
+        lines.push(`          from: { 'transform': 'rotateY(0deg)' },`);
+        lines.push(`          to: { 'transform': 'rotateY(360deg)' },`);
+        lines.push(`        },`);
+      } else if (a.type === "spinner-dot") {
+        lines.push(`        '${a.name}': {`);
+        lines.push(`          '0%, 100%': { 'opacity': '0.2' },`);
+        lines.push(`          '50%': { 'opacity': '1' },`);
+        lines.push(`        },`);
+      } else if (a.type === "spinner-bar") {
+        lines.push(`        '${a.name}': {`);
+        lines.push(`          '0%, 100%': { 'transform': 'scaleY(0.4)' },`);
+        lines.push(`          '50%': { 'transform': 'scaleY(1)' },`);
+        lines.push(`        },`);
+      } else if (a.type === "spinner-morph") {
+        lines.push(`        '${a.name}': {`);
+        lines.push(`          '0%, 100%': { 'border-radius': '50%', 'transform': 'rotateY(0deg) rotate(0deg)' },`);
+        lines.push(`          '25%': { 'border-radius': '30% 70% 70% 30% / 30% 30% 70% 70%', 'transform': 'rotateY(90deg) rotate(90deg)' },`);
+        lines.push(`          '50%': { 'border-radius': '50%', 'transform': 'rotateY(180deg) rotate(180deg)' },`);
+        lines.push(`          '75%': { 'border-radius': '70% 30% 30% 70% / 70% 70% 30% 30%', 'transform': 'rotateY(270deg) rotate(270deg)' },`);
+        lines.push(`        },`);
+      } else if (a.type === "skeleton-pulse") {
+        lines.push(`        '${a.name}': {`);
+        lines.push(`          '0%, 100%': { 'opacity': '1' },`);
+        lines.push(`          '50%': { 'opacity': '0.4' },`);
+        lines.push(`        },`);
+      } else if (a.type === "skeleton-wave") {
+        lines.push(`        '${a.name}': {`);
+        lines.push(`          '0%': { 'transform': 'translateX(-100%)' },`);
+        lines.push(`          '100%': { 'transform': 'translateX(100%)' },`);
+        lines.push(`        },`);
+      } else if (a.type === "typing-cursor") {
+        lines.push(`        '${a.name}': {`);
+        lines.push(`          '0%, 100%': { 'opacity': '1' },`);
+        lines.push(`          '50%': { 'opacity': '0.4' },`);
+        lines.push(`        },`);
       } else {
         const isEnter = a.type === "enter";
         const fromProps = [];
@@ -1809,10 +1985,15 @@ function generateV3Preset(tokens) {
           fromT.push(isEnter ? `scale(${a.scale})` : "scale(1)");
           toT.push(isEnter ? "scale(1)" : `scale(${a.scale})`);
         }
+        if (a.translateX) {
+          const v = formatTranslateVal(a.translateX, a.translateXNegative);
+          fromT.push(isEnter ? `translateX(${v})` : "translateX(0)");
+          toT.push(isEnter ? "translateX(0)" : `translateX(${v})`);
+        }
         if (a.translateY) {
-          const px = `${a.translateYNegative ? "-" : ""}${a.translateY}px`;
-          fromT.push(isEnter ? `translateY(${px})` : "translateY(0)");
-          toT.push(isEnter ? "translateY(0)" : `translateY(${px})`);
+          const v = formatTranslateVal(a.translateY, a.translateYNegative);
+          fromT.push(isEnter ? `translateY(${v})` : "translateY(0)");
+          toT.push(isEnter ? "translateY(0)" : `translateY(${v})`);
         }
         if (fromT.length) {
           fromProps.push(`'transform': '${fromT.join(" ")}'`);
@@ -1827,10 +2008,11 @@ function generateV3Preset(tokens) {
   }
   lines.push(`      },`);
   lines.push(``);
+  const infiniteTypes = /* @__PURE__ */ new Set(["spin", "progress-stripe", "spinner-orbit", "spinner-dot", "spinner-bar", "spinner-morph", "skeleton-pulse", "skeleton-wave", "typing-cursor"]);
   lines.push(`      animation: {`);
   if (v3Anim) {
     for (const a of v3Anim) {
-      const infinite = a.type === "spin" ? " infinite" : "";
+      const infinite = infiniteTypes.has(a.type) ? " infinite" : "";
       lines.push(`        '${a.name}': '${a.name} ${a.durationVar} ${a.easingVar}${infinite}',`);
     }
   }
@@ -1838,10 +2020,10 @@ function generateV3Preset(tokens) {
   lines.push(`    },`);
   lines.push(`  },`);
   lines.push(`  plugins: [`);
-  lines.push(`    // Icon size utilities (icon-xs, icon-sm, icon-md, icon-lg, icon-xl)`);
+  lines.push(`    // Icon size utilities`);
   lines.push(`    function({ addUtilities }) {`);
   lines.push(`      addUtilities({`);
-  for (const name of ["xs", "sm", "md", "lg", "xl"]) {
+  for (const name of KNOWN_ORDERS.iconSize) {
     lines.push(`        '.icon-${name}': { width: 'var(--icon-size-${name})', height: 'var(--icon-size-${name})' },`);
   }
   lines.push(`      })`);
@@ -1867,7 +2049,7 @@ function generateV3Preset(tokens) {
     lines.push(`    function({ addUtilities }) {`);
     lines.push(`      addUtilities({`);
     for (const a of v3Anim) {
-      const infinite = a.type === "spin" ? " infinite" : "";
+      const infinite = infiniteTypes.has(a.type) ? " infinite" : "";
       lines.push(`        '.animate-${a.name}': { 'animation': '${a.name} ${a.durationVar} ${a.easingVar}${infinite}' },`);
     }
     lines.push(`      })`);

package/css/variables.css

@@ -247,6 +247,7 @@
   --spacing-2: 0.5rem; /* 8px */
   --spacing-2-5: 0.625rem; /* 10px */
   --spacing-3: 0.75rem; /* 12px */
+  --spacing-3-5: 0.875rem; /* 14px */
   --spacing-4: 1rem; /* 16px */
   --spacing-5: 1.25rem; /* 20px */
   --spacing-6: 1.5rem; /* 24px */
@@ -922,3 +923,11 @@
 .animate-skeleton-wave {
   animation: skeleton-wave var(--duration-spin) var(--easing-linear) infinite;
 }
+
+@keyframes typing-cursor {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+.animate-typing-cursor {
+  animation: typing-cursor var(--duration-spin) var(--easing-ease-in-out) infinite;
+}

package/figma-tokens.json

@@ -459,6 +459,10 @@
         "value": "12",
         "type": "spacing"
       },
+      "3.5": {
+        "value": "14",
+        "type": "spacing"
+      },
       "4": {
         "value": "16",
         "type": "spacing"
@@ -1548,6 +1552,14 @@
         },
         "type": "composition",
         "$extensions": { "animationType": "skeleton-wave" }
+      },
+      "typing-cursor": {
+        "value": {
+          "duration": "{primitive.duration.spin}",
+          "easing": "{primitive.easing.easeInOut}"
+        },
+        "type": "composition",
+        "$extensions": { "animationType": "typing-cursor" }
       }
     },
     "componentSize": {

package/js/index.js

@@ -123,7 +123,8 @@ const tokens = {
     "24": "6rem",
     "0.5": "0.125rem",
     "1.5": "0.375rem",
-    "2.5": "0.625rem"
+    "2.5": "0.625rem",
+    "3.5": "0.875rem"
   },
   "fontSize": {
     "2xs": {
@@ -608,6 +609,10 @@ const tokens = {
     "skeleton-wave": {
       "duration": "1000ms",
       "easing": "linear"
+    },
+    "typing-cursor": {
+      "duration": "1000ms",
+      "easing": "ease-in-out"
     }
   },
   "typography": {

package/js/index.mjs

@@ -122,7 +122,8 @@ const tokens = {
     "24": "6rem",
     "0.5": "0.125rem",
     "1.5": "0.375rem",
-    "2.5": "0.625rem"
+    "2.5": "0.625rem",
+    "3.5": "0.875rem"
   },
   "fontSize": {
     "2xs": {
@@ -607,6 +608,10 @@ const tokens = {
     "skeleton-wave": {
       "duration": "1000ms",
       "easing": "linear"
+    },
+    "typing-cursor": {
+      "duration": "1000ms",
+      "easing": "ease-in-out"
     }
   },
   "typography": {

package/json/tokens.json

@@ -101,7 +101,8 @@
     "24": "6rem",
     "0.5": "0.125rem",
     "1.5": "0.375rem",
-    "2.5": "0.625rem"
+    "2.5": "0.625rem",
+    "3.5": "0.875rem"
   },
   "fontSize": {
     "2xs": "0.6875rem",
@@ -442,6 +443,8 @@
     "skeleton-pulse-duration": "1000ms",
     "skeleton-pulse-easing": "ease-in-out",
     "skeleton-wave-duration": "1000ms",
-    "skeleton-wave-easing": "linear"
+    "skeleton-wave-easing": "linear",
+    "typing-cursor-duration": "1000ms",
+    "typing-cursor-easing": "ease-in-out"
   }
 }