@averoui/tokens 1.0.1 → 2.2.0

package/package.json

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

package/src/generated/tokens.d.ts

@@ -12,6 +12,10 @@ export type TokenName =
   | "lineHeightAiry"
   | "colorPrimary"
   | "colorPrimaryHover"
+  | "colorPrimarySoft"
+  | "colorPrimarySoftHover"
+  | "colorPrimaryBorder"
+  | "colorPrimaryBorderHover"
   | "colorSecondary"
   | "colorBackground"
   | "colorForeground"
@@ -82,6 +86,11 @@ export type TokenName =
   | "animationSway"
   | "animationShimmer"
   | "animationSpinGlow"
+  | "animationSpinnerDot"
+  | "animationSpinnerBar"
+  | "animationSpinnerSpoke"
+  | "animationCheckDraw"
+  | "animationCheckPop"
   | "animationAccordionDown"
   | "animationAccordionUp"
   | "zIndexRaised"

package/src/generated/tokens.js

@@ -48,6 +48,22 @@ export const tokens = {
     "cssVar": "--color-primary-hover",
     "value": "#004182"
   },
+  "colorPrimarySoft": {
+    "cssVar": "--color-primary-soft",
+    "value": "color-mix(in oklab, var(--color-primary) 8%, white)"
+  },
+  "colorPrimarySoftHover": {
+    "cssVar": "--color-primary-soft-hover",
+    "value": "color-mix(in oklab, var(--color-primary) 15%, white)"
+  },
+  "colorPrimaryBorder": {
+    "cssVar": "--color-primary-border",
+    "value": "color-mix(in oklab, var(--color-primary) 25%, white)"
+  },
+  "colorPrimaryBorderHover": {
+    "cssVar": "--color-primary-border-hover",
+    "value": "color-mix(in oklab, var(--color-primary) 40%, white)"
+  },
   "colorSecondary": {
     "cssVar": "--color-secondary",
     "value": "#f15928"
@@ -328,6 +344,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"
@@ -398,6 +434,10 @@ export const tokenGroups = {
   "color": [
     "primary",
     "primary-hover",
+    "primary-soft",
+    "primary-soft-hover",
+    "primary-border",
+    "primary-border-hover",
     "secondary",
     "background",
     "foreground",
@@ -494,6 +534,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

@@ -47,6 +47,18 @@
     "primary-hover": {
       "$value": "#004182"
     },
+    "primary-soft": {
+      "$value": "color-mix(in oklab, var(--color-primary) 8%, white)"
+    },
+    "primary-soft-hover": {
+      "$value": "color-mix(in oklab, var(--color-primary) 15%, white)"
+    },
+    "primary-border": {
+      "$value": "color-mix(in oklab, var(--color-primary) 25%, white)"
+    },
+    "primary-border-hover": {
+      "$value": "color-mix(in oklab, var(--color-primary) 40%, white)"
+    },
     "secondary": {
       "$value": "#f15928"
     },
@@ -272,6 +284,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

@@ -28,6 +28,13 @@
   /* ---------------------------------------------------------------- Brand and semantic colors */
   --color-primary: #0a66c2;
   --color-primary-hover: #004182;
+  /* Brand tints and borders, derived from --color-primary so overriding it rebrands every accent.
+     They reference the variable at runtime, which is why this is a plain @theme block: @theme
+     inline would bake in the default blue and a consumer's --color-primary would never reach them. */
+  --color-primary-soft: color-mix(in oklab, var(--color-primary) 8%, white);
+  --color-primary-soft-hover: color-mix(in oklab, var(--color-primary) 15%, white);
+  --color-primary-border: color-mix(in oklab, var(--color-primary) 25%, white);
+  --color-primary-border-hover: color-mix(in oklab, var(--color-primary) 40%, white);
   --color-secondary: #f15928;
 
   --color-background: #f4f4f4;
@@ -129,6 +136,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 +251,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);