@orion-ds/react 4.9.8 → 5.0.1

package/dist/theme.css

@@ -106,6 +106,11 @@
     --blur-md: 8px;
     --blur-lg: 12px;
     --blur-xl: 24px;
+
+    /* Hover Animation Tokens */
+    --mode-hover-lift: -2px;
+    --mode-shadow-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.1);
+    --mode-hover-duration: 200ms;
 }
 
 /* ─── Light Theme Semantics ─── */
@@ -279,29 +284,132 @@
 
 /* ─── Deepblue Radius ─── */
 [data-brand="deepblue"] {
+    /* Deepblue brand colors */
+    --color-brand-50: #e6f2ff;
+    --color-brand-100: #b3d9ff;
+    --color-brand-200: #80bfff;
+    --color-brand-300: #4da6ff;
+    --color-brand-400: #1a8cff;
+    --color-brand-500: #006FBA;
+    --color-brand-600: #0062a6;
+    --color-brand-700: #005592;
+    --color-brand-800: #00487d;
+    --color-brand-900: #003b69;
+    --color-brand-950: #002540;
     /* Derived: button="md" (12px) → container="xl" (24px) */
     --radius-button: var(--radius-md);
     --radius-container: var(--radius-xl);
 }
 
 /* ─── Red Radius ─── */
+/* ─── RED Brand Override ─── */
 [data-brand="red"] {
+    /* Red brand colors */
+    --color-brand-50: #fdf2f2;
+    --color-brand-100: #fde8e8;
+    --color-brand-200: #fbd5d5;
+    --color-brand-300: #f8b4b4;
+    --color-brand-400: #f08282;
+    --color-brand-500: #D7282F;
+    --color-brand-600: #b91c22;
+    --color-brand-700: #93151b;
+    --color-brand-800: #7a151b;
+    --color-brand-900: #661619;
+    --color-brand-950: #3b090b;
     /* Derived: button="full" (9999px) → container="3xl" (36px) */
     --radius-button: var(--radius-full);
     --radius-container: var(--radius-3xl);
 }
 
-/* ─── Orange Radius ─── */
+/* ─── ORANGE Brand Override ─── */
 [data-brand="orange"] {
+    /* Orange brand colors */
+    --color-brand-50: #fef0eb;
+    --color-brand-100: #fdd5c9;
+    --color-brand-200: #fcb9a5;
+    --color-brand-300: #fa9d80;
+    --color-brand-400: #f87d52;
+    --color-brand-500: #F15D22;
+    --color-brand-600: #d9531f;
+    --color-brand-700: #c0491b;
+    --color-brand-800: #a63f17;
+    --color-brand-900: #8c3513;
+    --color-brand-950: #59220c;
     /* Derived: button="full" (9999px) → container="3xl" (36px) */
     --radius-button: var(--radius-full);
     --radius-container: var(--radius-3xl);
 }
 
-/* ─── Lemon Radius ─── */
+/* ─── LEMON Brand Override ─── */
 [data-brand="lemon"] {
+    /* Lemon brand colors */
+    --color-brand-50: #F4FFE6;
+    --color-brand-100: #E5FFCC;
+    --color-brand-200: #CCFFAA;
+    --color-brand-300: #A8FF77;
+    --color-brand-400: #8DFF5C;
+    --color-brand-500: #72FF43;
+    --color-brand-600: #5CE629;
+    --color-brand-700: #47B31A;
+    --color-brand-800: #358C14;
+    --color-brand-900: #266B0F;
+    --color-brand-950: #1A4A0A;
     /* Derived: button="full" (9999px) → container="3xl" (36px) */
     --radius-button: var(--radius-full);
     --radius-container: var(--radius-3xl);
 }
 
+/* ─── EMBER Brand Override ─── */
+[data-brand="ember"] {
+    /* Ember brand: Neutral palette with black primary buttons */
+    --color-brand-50: #f8fafc;
+    --color-brand-100: #f1f5f9;
+    --color-brand-200: #e2e8f0;
+    --color-brand-300: #cbd5e1;
+    --color-brand-400: #94a3b8;
+    --color-brand-500: #475569;
+    --color-brand-600: #334155;
+    --color-brand-700: #1e293b;
+    --color-brand-800: #0f172a;
+    --color-brand-900: #020617;
+    --color-brand-950: #000000;
+    /* Derived: button="md" (12px radius, more refined than pill) */
+    --radius-button: var(--radius-md);
+    --radius-container: var(--radius-xl);
+}
+
+/* ─── Brand-Specific Semantic Overrides ─── */
+/* Orion, Red, Orange, Deepblue: interactive primary text is ALWAYS white */
+[data-theme="light"][data-brand="orion"],
+[data-theme="dark"][data-brand="orion"],
+[data-theme="light"][data-brand="red"],
+[data-theme="dark"][data-brand="red"],
+[data-theme="light"][data-brand="orange"],
+[data-theme="dark"][data-brand="orange"],
+[data-theme="light"][data-brand="deepblue"],
+[data-theme="dark"][data-brand="deepblue"] {
+    --interactive-primary-text: var(--color-neutral-0);
+}
+
+/* Lemon: dark text in light mode, white in dark mode */
+[data-theme="light"][data-brand="lemon"] {
+    --interactive-primary-text: var(--color-neutral-1000);
+}
+
+[data-theme="dark"][data-brand="lemon"] {
+    --interactive-primary-text: var(--color-neutral-0);
+}
+
+/* Ember: Black primary buttons in light mode, light grey in dark mode */
+[data-theme="light"][data-brand="ember"] {
+    --interactive-primary: var(--color-neutral-900);
+    --interactive-primary-hover: var(--color-neutral-700);
+    --interactive-primary-text: var(--color-neutral-0);
+}
+
+[data-theme="dark"][data-brand="ember"] {
+    --interactive-primary: var(--color-neutral-100);
+    --interactive-primary-hover: var(--color-neutral-0);
+    --interactive-primary-text: var(--color-neutral-900);
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-ds/react",
-  "version": "4.9.8",
+  "version": "5.0.1",
   "type": "module",
   "description": "Orion Design System - React component library with 40+ AI-ready components and 9 templates",
   "author": "Orion Design System Team",
@@ -38,10 +38,10 @@
       "import": "./dist/blocks/index.mjs",
       "require": "./dist/blocks/index.cjs"
     },
-    "./templates": {
-      "types": "./dist/templates/index.d.ts",
-      "import": "./dist/templates/index.mjs",
-      "require": "./dist/templates/index.cjs"
+    "./blocks/templates": {
+      "types": "./dist/blocks/templates/index.d.ts",
+      "import": "./dist/blocks/templates/index.mjs",
+      "require": "./dist/blocks/templates/index.cjs"
     },
     "./chart": {
       "types": "./dist/chart.d.ts",
@@ -80,6 +80,7 @@
     "BUNDLE_OPTIMIZATION.md"
   ],
   "scripts": {
+    "postinstall": "node scripts/validate-install.js",
     "copy:assets": "mkdir -p assets/tokens && cp ../../theme.css assets/theme.css && cp ../../tokens/generated.css assets/tokens/generated.css",
     "build": "npm run copy:assets && vite build && npm run build:styles",
     "build:styles": "node scripts/bundle-styles.js",