@cytario/design 9.5.1 → 9.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cytario/design",
-  "version": "9.5.1",
+  "version": "9.6.0",
   "description": "Cytario design system and brand portal",
   "repository": {
     "type": "git",

package/src/styles/theme.css

@@ -376,27 +376,43 @@
   }
 }
 
+/* Stock Tailwind animation keyframes (spin, pulse, ping, bounce) ship with
+ * the default theme when used. Only custom animations need keyframes here. */
+@keyframes progress-bar {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+
 /**
  * Tailwind v4 @theme inline — maps every color token to itself via var() so
  * that utilities like bg-primary, text-muted-foreground, bg-badge-purple-bg
  * resolve at runtime and stay theme-reactive (dark mode just works).
  */
 @theme inline {
+  /* Fonts */
   --font-montserrat: "Montserrat", system-ui, sans-serif;
   --font-sans: "Montserrat", system-ui, sans-serif;
+
+  /* Animations */
   --animate-fade-in: fade-in 0.3s ease-in forwards;
   --animate-pulse-once: pulse-once 0.1s ease-in-out 1 forwards;
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
+  --animate-progress-bar: progress-bar 1.5s ease-in-out infinite;
+
+  /* Radii */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
 
   /* Tooltip must paint above React Aria overlays (Menu, Dialog, Popover),
    * which useOverlayPosition forces to zIndex 100000. */
   --z-index-tooltip: 100001;
 
-  /* Font sizes, weights, and line heights use Tailwind v4 defaults (rem-based, with line-height pairing). */
-
+  /* Color Primitives */
   --color-purple-50: var(--color-purple-50);
   --color-purple-100: var(--color-purple-100);
   --color-purple-200: var(--color-purple-200);
@@ -474,6 +490,8 @@
   --color-blue-800: var(--color-blue-800);
   --color-blue-900: var(--color-blue-900);
   --color-blue-950: var(--color-blue-950);
+
+  /* Color Tokens */
   --color-white: var(--color-white);
   --color-black: var(--color-black);
   --color-alpha-black80: var(--color-alpha-black80);

package/src/styles/tokens.css

@@ -1,30 +1,26 @@
-/**
- * Tailwind v4 @theme inline — token registration only (no CSS emission).
- *
- * Consumers use this via `@reference` so Tailwind can generate utilities for
- * every design-system color/font/radius/animation token without needing
- * `tw-animate-css` or `tailwindcss-react-aria-components` as deps.
- *
- * The actual CSS variable values and component styles come from the
- * pre-built `@cytario/design/styles.css` (`dist/index.css`).
- *
- * Usage in a consumer app's styles.css:
- *   @reference "@cytario/design/styles/tokens.css";
- *   @import "@cytario/design/styles.css";
- *   @import "tailwindcss";
- */
+/* Strip certain Tailwind default values to enforce a narrow theme-defined set */
+@theme {
+  --color-*: initial;
+  --radius-*: initial;
+}
+
 @theme inline {
+  /* Fonts */
   --font-montserrat: "Montserrat", system-ui, sans-serif;
   --font-sans: "Montserrat", system-ui, sans-serif;
+
+  /* Animations */
   --animate-fade-in: fade-in 0.3s ease-in forwards;
   --animate-pulse-once: pulse-once 0.1s ease-in-out 1 forwards;
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
+  --animate-progress-bar: progress-bar 1.5s ease-in-out infinite;
 
-  /* Font sizes, weights, and line heights use Tailwind v4 defaults (rem-based, with line-height pairing). */
+  /* Radii */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
 
+  /* Color Tokens */
   --color-purple-50: var(--color-purple-50);
   --color-purple-100: var(--color-purple-100);
   --color-purple-200: var(--color-purple-200);