@kouji-ui/themes 0.0.6 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kouji-ui/themes",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "description": "Theme tokens and theme stylesheets for kouji-ui — pure CSS, swappable at runtime via data-theme.",
   "license": "MIT",
   "repository": {

package/src/base.css

@@ -128,6 +128,26 @@
     --kj-base-transition-fast: 0.12s ease;
     --kj-base-transition-base: 0.2s ease;
 
+    /* Motion primitives — durations + easings for the motion preset
+       library (@kouji-ui/core motion.css). Semantic --kj-motion-* tokens
+       below resolve from these; motion.css also carries inline fallbacks
+       so it works when themes aren't loaded. Themes may retune any of
+       these for a distinct motion identity. */
+    --kj-base-duration-fast: 150ms;
+    --kj-base-duration-base: 250ms;
+    --kj-base-duration-slow: 400ms;
+    --kj-base-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
+    --kj-base-ease-in:         cubic-bezier(0.7, 0, 0.84, 0);
+    --kj-base-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
+
+    --kj-motion-duration-sm: var(--kj-base-duration-fast);
+    --kj-motion-duration-md: var(--kj-base-duration-base);
+    --kj-motion-duration-lg: var(--kj-base-duration-slow);
+    --kj-motion-ease:        var(--kj-base-ease-emphasized);
+    --kj-motion-ease-in:     var(--kj-base-ease-in);
+    --kj-motion-ease-spring: var(--kj-base-ease-spring);
+    --kj-motion-distance:    0.5rem;
+
     /* ── Display-tone primitives (per-theme overridable, sane defaults)
        Themes only redeclare when their identity calls for it (e.g. retro
        wants italic display; bauhaus wants extra-heavy weight; sakura

package/src/themes/bauhaus.css

@@ -84,5 +84,12 @@
     --kj-shadow-focus:  0 0 0 3px #1d3aff;
 
     --kj-button-bg-hover: #8e0f1d;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/corporate.css

@@ -87,5 +87,12 @@
     /* 8% darken on #0a2540 is invisible; lift to #15355a so the hover
        reads against the deep navy primary. */
     --kj-button-bg-hover: #15355a;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/cyberpunk.css

@@ -78,5 +78,12 @@
     --kj-shadow-md:     4px 4px 0 #0a0a0a;
     --kj-shadow-lg:     8px 8px 0 #0a0a0a;
     --kj-shadow-focus:  0 0 0 3px #ff007f;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/dark.css

@@ -87,5 +87,12 @@
     --kj-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.5);
     --kj-shadow-lg:     0 16px 40px rgba(0, 0, 0, 0.6);
     --kj-shadow-focus:  0 0 0 3px rgba(43, 98, 219, 0.5);
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/dune.css

@@ -81,5 +81,12 @@
     /* Indigo deepens on hover; fg stays cream to match the desert tone
        (already the default fg-on-primary, so no fg-hover needed). */
     --kj-button-bg-hover: #281a48;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/forest.css

@@ -83,5 +83,12 @@
     /* Mustard gold brightens on hover (8% black-mix would push it duller
        on a dark theme — we want it more luminous against the moss bg). */
     --kj-button-bg-hover: #e8b22a;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/kouji.css

@@ -98,6 +98,13 @@
     --kj-shadow-md:     0 0 0 1px #1a1a1a;
     --kj-shadow-lg:     0 0 0 2px #1a1a1a;
     --kj-shadow-focus:  0 0 0 2px #c4ff3d;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }
 

package/src/themes/light.css

@@ -93,5 +93,12 @@
     /* 8% darken against #1a1a1a is nearly imperceptible; lift toward
        #3a3a3a so the hover reads as a deliberate state change. */
     --kj-button-bg-hover: #3a3a3a;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/mint.css

@@ -95,5 +95,12 @@
     /* Deepen the spearmint on hover (~10% darker) so the interaction
        reads on the bright body. */
     --kj-button-bg-hover: #035a42;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/nord.css

@@ -81,5 +81,12 @@
     /* Brighten frost teal on hover (dark themes need luminosity lift,
        not the default 8% black-mix darken). */
     --kj-button-bg-hover: #a3d4e2;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/retro.css

@@ -85,5 +85,13 @@
        reads better than the default ink on the deepened terracotta. */
     --kj-button-bg-hover: #d05c57;
     --kj-button-fg-hover: #fff5e4;
+
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/sakura.css

@@ -81,5 +81,12 @@
     /* Lift the cherry magenta to a deeper rose so the hover reads
        against the warm body. */
     --kj-button-bg-hover: #a01548;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }

package/src/themes/terminal.css

@@ -82,5 +82,12 @@
     /* Dim the phosphor green on hover (slight green-down) instead of
        black-mixing — keeps the CRT look. */
     --kj-button-bg-hover: #00cc52;
+    /* ── chart palette ── */
+    --kj-chart-1: var(--kj-bg-primary);
+    --kj-chart-2: var(--kj-bg-accent);
+    --kj-chart-3: var(--kj-bg-success);
+    --kj-chart-4: var(--kj-bg-warning);
+    --kj-chart-5: var(--kj-bg-info, var(--kj-bg-accent-subtle));
+    --kj-chart-6: var(--kj-bg-danger);
   }
 }