@kjaniec-dev/design 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kjaniec-dev/design",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Design tokens and Tailwind v4 theme for the KJ Product Kit",
   "license": "MIT",
   "author": "kjaniec-dev",

package/src/tailwind.css

@@ -25,6 +25,16 @@
   --color-danger-surface: var(--kj-danger-surface);
   --color-info: var(--kj-info);
   --color-info-surface: var(--kj-info-surface);
+  --color-canvas: var(--kj-bg-canvas);
+  --color-subtle: var(--kj-bg-subtle);
+  --color-surface: var(--kj-bg-surface);
+  --color-elevated: var(--kj-bg-elevated);
+  --color-overlay: var(--kj-bg-overlay);
+  --color-border-subtle: var(--kj-border-subtle);
+  --color-border-strong: var(--kj-border-strong);
+  --color-chart1: var(--kj-chart1);
+  --color-chart2: var(--kj-chart2);
+  --color-chart3: var(--kj-chart3);
   --color-primary-50: var(--kj-primary-50);
   --color-primary-100: var(--kj-primary-100);
   --color-primary-200: var(--kj-primary-200);
@@ -60,4 +70,10 @@
   --shadow-kj-md: var(--kj-shadow-md);
   --shadow-kj-lg: var(--kj-shadow-lg);
   --shadow-kj-glow: var(--kj-shadow-glow);
+  --animate-duration-fast: var(--kj-duration-fast);
+  --animate-duration-normal: var(--kj-duration-normal);
+  --animate-duration-slow: var(--kj-duration-slow);
+  --animate-ease-standard: var(--kj-ease-standard);
+  --animate-ease-out: var(--kj-ease-out);
+  --animate-ease-spring: var(--kj-ease-spring);
 }

package/src/theme.css

@@ -24,6 +24,16 @@
   --kj-danger-surface: #fff1f2;
   --kj-info: #0284c7;
   --kj-info-surface: #f0f9ff;
+  --kj-bg-canvas: #f4f4f5;
+  --kj-bg-subtle: #fafafa;
+  --kj-bg-surface: #ffffff;
+  --kj-bg-elevated: #ffffff;
+  --kj-bg-overlay: rgba(9, 9, 11, 0.4);
+  --kj-border-subtle: #f4f4f5;
+  --kj-border-strong: #e4e4e7;
+  --kj-chart1: #f59e0b;
+  --kj-chart2: #14b8a6;
+  --kj-chart3: #0284c7;
   /* Primary (amber) scale */
   --kj-primary-50: #fffbeb;
   --kj-primary-100: #fef3c7;
@@ -65,6 +75,12 @@
   --kj-density-compact: 0.82;
   --kj-density-comfortable: 1.18;
   --kj-density: var(--kj-density-default);
+  --kj-duration-fast: 120ms;
+  --kj-duration-normal: 180ms;
+  --kj-duration-slow: 280ms;
+  --kj-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --kj-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --kj-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 [data-density="compact"] {
@@ -100,6 +116,16 @@
   --kj-danger-surface: #4c0519;
   --kj-info: #0ea5e9;
   --kj-info-surface: #082f49;
+  --kj-bg-canvas: #09090b;
+  --kj-bg-subtle: #121214;
+  --kj-bg-surface: #18181b;
+  --kj-bg-elevated: #27272a;
+  --kj-bg-overlay: rgba(9, 9, 11, 0.7);
+  --kj-border-subtle: #1f1f23;
+  --kj-border-strong: #27272a;
+  --kj-chart1: #fbbf24;
+  --kj-chart2: #2dd4bf;
+  --kj-chart3: #0ea5e9;
 }
 
 html {

package/tokens.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://design-tokens.github.io/community-group/format/",
   "name": "KJ Product Kit",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Personal product design system tokens for KJ apps, portfolio, dashboards and SaaS tools.",
   "color": {
     "primitive": {
@@ -295,6 +295,46 @@
         "infoSurface": {
           "$type": "color",
           "$value": "#f0f9ff"
+        },
+        "bgCanvas": {
+          "$type": "color",
+          "$value": "#f4f4f5"
+        },
+        "bgSubtle": {
+          "$type": "color",
+          "$value": "#fafafa"
+        },
+        "bgSurface": {
+          "$type": "color",
+          "$value": "#ffffff"
+        },
+        "bgElevated": {
+          "$type": "color",
+          "$value": "#ffffff"
+        },
+        "bgOverlay": {
+          "$type": "color",
+          "$value": "rgba(9, 9, 11, 0.4)"
+        },
+        "borderSubtle": {
+          "$type": "color",
+          "$value": "#f4f4f5"
+        },
+        "borderStrong": {
+          "$type": "color",
+          "$value": "#e4e4e7"
+        },
+        "chart1": {
+          "$type": "color",
+          "$value": "#f59e0b"
+        },
+        "chart2": {
+          "$type": "color",
+          "$value": "#14b8a6"
+        },
+        "chart3": {
+          "$type": "color",
+          "$value": "#0284c7"
         }
       },
       "dark": {
@@ -393,6 +433,46 @@
         "infoSurface": {
           "$type": "color",
           "$value": "#082f49"
+        },
+        "bgCanvas": {
+          "$type": "color",
+          "$value": "#09090b"
+        },
+        "bgSubtle": {
+          "$type": "color",
+          "$value": "#121214"
+        },
+        "bgSurface": {
+          "$type": "color",
+          "$value": "#18181b"
+        },
+        "bgElevated": {
+          "$type": "color",
+          "$value": "#27272a"
+        },
+        "bgOverlay": {
+          "$type": "color",
+          "$value": "rgba(9, 9, 11, 0.7)"
+        },
+        "borderSubtle": {
+          "$type": "color",
+          "$value": "#1f1f23"
+        },
+        "borderStrong": {
+          "$type": "color",
+          "$value": "#27272a"
+        },
+        "chart1": {
+          "$type": "color",
+          "$value": "#fbbf24"
+        },
+        "chart2": {
+          "$type": "color",
+          "$value": "#2dd4bf"
+        },
+        "chart3": {
+          "$type": "color",
+          "$value": "#0ea5e9"
         }
       }
     }
@@ -564,5 +644,35 @@
       "$type": "dimension",
       "$value": "1.18"
     }
+  },
+  "motion": {
+    "duration": {
+      "fast": {
+        "$type": "duration",
+        "$value": "120ms"
+      },
+      "normal": {
+        "$type": "duration",
+        "$value": "180ms"
+      },
+      "slow": {
+        "$type": "duration",
+        "$value": "280ms"
+      }
+    },
+    "ease": {
+      "standard": {
+        "$type": "easing",
+        "$value": "cubic-bezier(0.4, 0, 0.2, 1)"
+      },
+      "out": {
+        "$type": "easing",
+        "$value": "cubic-bezier(0, 0, 0.2, 1)"
+      },
+      "spring": {
+        "$type": "easing",
+        "$value": "cubic-bezier(0.34, 1.56, 0.64, 1)"
+      }
+    }
   }
 }