@averoui/tokens 1.0.1 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@averoui/tokens",
-  "version": "1.0.1",
+  "version": "2.1.0",
   "type": "module",
   "description": "Avero design tokens: Tailwind CSS v4 theme, base styles, utilities and token data.",
   "sideEffects": [

package/src/generated/tokens.d.ts

@@ -82,6 +82,11 @@ export type TokenName =
   | "animationSway"
   | "animationShimmer"
   | "animationSpinGlow"
+  | "animationSpinnerDot"
+  | "animationSpinnerBar"
+  | "animationSpinnerSpoke"
+  | "animationCheckDraw"
+  | "animationCheckPop"
   | "animationAccordionDown"
   | "animationAccordionUp"
   | "zIndexRaised"

package/src/generated/tokens.js

@@ -328,6 +328,26 @@ export const tokens = {
     "cssVar": "--animate-spin-glow",
     "value": "spin-glow 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite"
   },
+  "animationSpinnerDot": {
+    "cssVar": "--animate-spinner-dot",
+    "value": "spinner-dot 1.2s ease-in-out infinite"
+  },
+  "animationSpinnerBar": {
+    "cssVar": "--animate-spinner-bar",
+    "value": "spinner-bar 1s ease-in-out infinite"
+  },
+  "animationSpinnerSpoke": {
+    "cssVar": "--animate-spinner-spoke",
+    "value": "spinner-spoke 1s linear infinite"
+  },
+  "animationCheckDraw": {
+    "cssVar": "--animate-check-draw",
+    "value": "check-draw 0.2s ease-out 0.03s both"
+  },
+  "animationCheckPop": {
+    "cssVar": "--animate-check-pop",
+    "value": "check-pop 0.18s ease-out"
+  },
   "animationAccordionDown": {
     "cssVar": "--animate-accordion-down",
     "value": "accordion-down 0.3s ease-in-out"
@@ -494,6 +514,11 @@ export const tokenGroups = {
     "sway",
     "shimmer",
     "spin-glow",
+    "spinner-dot",
+    "spinner-bar",
+    "spinner-spoke",
+    "check-draw",
+    "check-pop",
     "accordion-down",
     "accordion-up"
   ],

package/src/generated/tokens.json

@@ -272,6 +272,21 @@
     "spin-glow": {
       "$value": "spin-glow 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite"
     },
+    "spinner-dot": {
+      "$value": "spinner-dot 1.2s ease-in-out infinite"
+    },
+    "spinner-bar": {
+      "$value": "spinner-bar 1s ease-in-out infinite"
+    },
+    "spinner-spoke": {
+      "$value": "spinner-spoke 1s linear infinite"
+    },
+    "check-draw": {
+      "$value": "check-draw 0.2s ease-out 0.03s both"
+    },
+    "check-pop": {
+      "$value": "check-pop 0.18s ease-out"
+    },
     "accordion-down": {
       "$value": "accordion-down 0.3s ease-in-out"
     },

package/src/theme.css

@@ -129,6 +129,13 @@
   --animate-sway: sway 3s ease-in-out forwards;
   --animate-shimmer: shimmer 1.6s linear infinite;
   --animate-spin-glow: spin-glow 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  /* Spinner parts. Each part runs the same cycle; the component offsets them with negative delays. */
+  --animate-spinner-dot: spinner-dot 1.2s ease-in-out infinite;
+  --animate-spinner-bar: spinner-bar 1s ease-in-out infinite;
+  --animate-spinner-spoke: spinner-spoke 1s linear infinite;
+  /* Checkbox: the tick draws itself in and the filled box pops, over roughly one Button press. */
+  --animate-check-draw: check-draw 0.2s ease-out 0.03s both;
+  --animate-check-pop: check-pop 0.18s ease-out;
   /* Accordion open/close: height and opacity animate over 300ms ease-in-out. */
   --animate-accordion-down: accordion-down 0.3s ease-in-out;
   --animate-accordion-up: accordion-up 0.3s ease-in-out;
@@ -237,6 +244,64 @@
     }
   }
 
+  @keyframes spinner-dot {
+    0%,
+    80%,
+    to {
+      opacity: 0.35;
+      transform: scale(0.6);
+    }
+    40% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes spinner-bar {
+    0%,
+    to {
+      transform: scaleY(0.35);
+    }
+    50% {
+      transform: scaleY(1);
+    }
+  }
+
+  @keyframes spinner-spoke {
+    0% {
+      opacity: 1;
+    }
+    to {
+      opacity: 0.15;
+    }
+  }
+
+  /* The check path is under 24 units long, so a 24-unit dash covers it. Starting the offset at -24
+     reveals the path from its end, which on the check glyph is the short leg: the order a hand draws
+     it. */
+  @keyframes check-draw {
+    from {
+      stroke-dasharray: 24;
+      stroke-dashoffset: -24;
+    }
+    to {
+      stroke-dasharray: 24;
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes check-pop {
+    0% {
+      transform: scale(0.85);
+    }
+    60% {
+      transform: scale(1.06);
+    }
+    to {
+      transform: scale(1);
+    }
+  }
+
   @keyframes spin-glow {
     0% {
       transform: rotate(0);