jk-ui-cli 0.0.6 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jk-ui-cli",
-    "version": "0.0.6",
+    "version": "0.0.7",
     "description": "A CLI tool for ReactJS based projects",
     "type": "module",
     "bin": {

package/stubs/css/base-both.stub

@@ -0,0 +1,130 @@
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --primary: var(--color-primary-600);
+  --secondary: var(--color-secondary-600);
+  --accent: var(--color-accent-600);
+  --info: var(--color-info-600);
+  --warning: var(--color-warning-600);
+  --danger: var(--color-danger-600);
+  --success: var(--color-success-600);
+
+  --fg-title: var(--color-gray-900);
+  --fg-subtitle: var(--color-gray-800);
+  --fg: var(--color-gray-700);
+  --fg-muted: var(--color-gray-600);
+
+  --bg: var(--color-white);
+  --bg-subtle: var(--color-gray-100);
+  --bg-surface: var(--color-gray-50);
+  --bg-muted: var(--color-gray-200);
+  --card: var(--bg);
+  --overlay: var(--bg);
+
+  --border-strong: var(--color-gray-300);
+  --border: var(--color-gray-200);
+  --border-card: var(--color-gray-200);
+  --border-input: var(--color-gray-200);
+
+  --ui-input-focus-outline: var(--color-primary);
+  --ui-input-place-holder: var(--color-gray-500);
+  --ui-input-invalid-outline: var(--color-danger);
+  --ring-bg: var(--color-primary);
+  --ring-offset-color: var(--bg);
+
+  --focus-ring: var(--color-primary-200);
+
+  --ui-radius: var(--radius-lg);
+  --card-radius: var(--radius-lg);
+  --checkbox-radius: var(--radius-sm);
+
+  --checkbox-bg: var(--bg);
+  --checkbox-fg: transparent;
+  --checkbox-bg-checked: var(--color-primary);
+  --checkbox-fg-checked: var(--color-white);
+  --checkbox-bg-invalid: var(--color-danger);
+  --checkbox-fg-invalid: var(--color-white);
+
+
+  --dropdown-item-hover-and-select: var(--bg-muted);
+  --dropdown-item-hover-and-select-fg: var(--fg-title);
+  --dropdown-item-selected-fg: var(--fg-title);
+
+  --dropdown-item-danger-fg: var(--color-danger);
+  --dropdown-item-warning-fg: var(--color-warning);
+  --dropdown-item-danger-hover-and-select: --alpha(var(--color-danger-100)/40%);
+  --dropdown-item-danger-hover-and-select-fg: var(--color-danger-600);
+  --dropdown-item-warning-hover-and-select: --alpha(var(--color-warning-100)/40%);
+  --dropdown-item-warning-hover-and-select-fg: var(--color-warning-600);
+
+  --date-segment-focus-bg: var(--color-primary);
+  --date-segment-focus-fg: var(--color-white);
+  --range-selected-bg: var(--color-primary-100);
+  --range-selected-invalid-bg: var(--color-danger-100);
+
+  --range-selected-bg-hover: var(--color-primary-200);
+  --range-selected-invalid-bg-hover: var(--color-danger-200);
+
+  --range-selected-fg: var(--color-primary-600);
+  --range-selected-invalid-fg: var(--color-danger-600);
+
+  --range-selected-bg-pressed: var(--color-primary-300);
+  --range-selected-invalid-bg-pressed: var(--color-danger-300);
+
+  --chart-1: oklch(0.546 0.245 262.881);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.707 0.165 254.624);
+  --chart-4: oklch(0.809 0.105 251.813);
+  --chart-5: oklch(0.882 0.059 254.128);
+}
+
+.dark {
+  --primary: var(--color-primary-500);
+  --secondary: var(--color-secondary-500);
+  --accent: var(--color-accent-500);
+  --info: var(--color-info-500);
+  --warning: var(--color-warning-500);
+  --danger: var(--color-danger-500);
+  --success: var(--color-success-500);
+
+  --fg-title: var(--color-white);
+  --fg-subtitle: var(--color-gray-100);
+  --fg: var(--color-gray-300);
+  --fg-muted: var(--color-gray-400);
+
+  --bg: var(--color-gray-950);
+  --bg-subtle: var(--color-gray-900);
+  --bg-surface: --alpha(var(--color-gray-900)/70%);
+  --bg-muted: var(--color-gray-800);
+
+  --border-strong: var(--color-gray-700);
+  --border: var(--color-gray-900);
+  --border-card: var(--color-gray-800);
+  --border-input: var(--color-gray-700);
+
+  --focus-ring: --alpha(var(--primary-800)/30%);
+
+  --dropdown-item-danger-hover-and-select: --alpha(var(--color-danger-900)/30%);
+  --dropdown-item-danger-hover-and-select-fg: var(--color-danger-300);
+  --dropdown-item-warning-hover-and-select: --alpha(var(--color-warning-900)/30%);
+  --dropdown-item-warning-hover-and-select-fg: var(--color-warning-300);
+
+  --range-selected-bg: --alpha(var(--color-primary-900)/30%);
+  --range-selected-invalid-bg: --alpha(var(--color-danger-800)/30%);
+
+  --range-selected-bg-hover: var(--color-primary-800);
+  --range-selected-invalid-bg-hover: var(--color-danger-800);
+
+  --range-selected-fg: var(--color-primary-200);
+  --range-selected-invalid-fg: var(--color-danger-200);
+
+  --range-selected-bg-pressed: var(--color-primary-700);
+  --range-selected-invalid-bg-pressed: var(--color-danger-700);
+
+  
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.707 0.165 254.624);
+  --chart-4: oklch(0.809 0.105 251.813);
+  --chart-5: oklch(0.882 0.059 254.128);
+}

package/stubs/css/base-dark.stub

@@ -0,0 +1,80 @@
+:root {
+  --color-primary: var(--color-primary-500);
+  --color-secondary: var(--color-secondary-500);
+  --color-accent: var(--color-accent-500);
+  --color-info: var(--color-info-500);
+  --color-warning: var(--color-warning-500);
+  --color-danger: var(--color-danger-500);
+  --color-success: var(--color-success-500);
+
+  --fg-title: var(--color-white);
+  --fg-subtitle: var(--color-gray-100);
+  --fg: var(--color-gray-300);
+  --fg-muted: var(--color-gray-400);
+
+  --bg: var(--color-gray-950);
+  --bg-subtle: var(--color-gray-900);
+  --bg-surface: --alpha(var(--color-gray-900)/70%);
+  --bg-muted: var(--color-gray-800);
+  --card: var(--bg);
+  --overlay: var(--bg);
+
+  --border-strong: var(--color-gray-700);
+  --border: var(--color-gray-900);
+  --border-card: var(--color-gray-800);
+  --border-input: var(--color-gray-700);
+
+  --ui-input-focus-outline: var(--color-primary);
+  --ui-input-place-holder: var(--color-gray-500);
+  --ui-input-invalid-outline: var(--color-danger);
+  --ring-bg: var(--color-primary);
+  --ring-offset-color: var(--bg);
+
+  --focus-ring: --alpha(var(--primary-800)/30%);
+
+  --ui-radius: var(--radius-lg);
+  --card-radius: var(--radius-lg);
+  --checkbox-radius: var(--radius-sm);
+
+  --checkbox-bg: var(--bg);
+  --checkbox-fg: transparent;
+  --checkbox-bg-checked: var(--color-primary);
+  --checkbox-fg-checked: var(--color-white);
+  --checkbox-bg-invalid: var(--color-danger);
+  --checkbox-fg-invalid: var(--color-white);
+
+
+  --dropdown-item-hover-and-select: var(--bg-muted);
+  --dropdown-item-hover-and-select-fg: var(--fg-title);
+  --dropdown-item-selected-fg: var(--fg-title);
+
+  --dropdown-item-danger-fg: var(--color-danger);
+  --dropdown-item-warning-fg: var(--color-warning);
+  --dropdown-item-danger-hover-and-select: --alpha(var(--color-danger-900)/30%);
+  --dropdown-item-danger-hover-and-select-fg: var(--color-danger-300);
+  --dropdown-item-warning-hover-and-select: --alpha(var(--color-warning-900)/30%);
+  --dropdown-item-warning-hover-and-select-fg: var(--color-warning-300);
+
+  --date-segment-focus-bg: var(--color-primary);
+  --date-segment-focus-fg: var(--color-white);
+  
+  --range-selected-bg: --alpha(var(--color-primary-900)/30%);
+  --range-selected-invalid-bg: --alpha(var(--color-danger-800)/30%);
+
+  --range-selected-bg-hover: var(--color-primary-800);
+  --range-selected-invalid-bg-hover: var(--color-danger-800);
+
+  --range-selected-fg: var(--color-primary-200);
+  --range-selected-invalid-fg: var(--color-danger-200);
+
+  --range-selected-bg-pressed: var(--color-primary-700);
+  --range-selected-invalid-bg-pressed: var(--color-danger-700);
+
+
+
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.707 0.165 254.624);
+  --chart-4: oklch(0.809 0.105 251.813);
+  --chart-5: oklch(0.882 0.059 254.128);
+}

package/stubs/css/base-inline.stub

@@ -0,0 +1,43 @@
+@theme inline {
+  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  --radius-ui: var(--ui-radius);
+  --radius-card: var(--card-radius);
+  --radius-checkbox: var(--checkbox-radius);
+  --radius-dropdown-item: var(--popover-inner-radius, 0px);
+
+  --color-dark: var(--color-gray-950);
+  --color-ring: var(--color-primary-600);
+
+  --color-primary: var(--primary);
+  --color-secondary: var(--secondary);
+  --color-accent: var(--accent);
+  --color-info: var(--info);
+  --color-warning: var(--warning);
+  --color-danger: var(--danger);
+  --color-success: var(--success);
+
+  --color-fg-title: var(--fg-title);
+  --color-fg-subtitle: var(--fg-subtitle);
+  --color-fg: var(--fg);
+  --color-fg-muted: var(--fg-muted);
+
+  --color-bg: var(--bg);
+  --color-bg-subtle: var(--bg-subtle);
+  --color-bg-surface: var(--bg-surface);
+  --color-bg-muted: var(--bg-muted);
+  --color-card: var(--card);
+  --color-popover: var(--bg);
+  --color-overlay: var(--overlay);
+
+  --color-border-strong: var(--border-strong);
+  --color-border: var(--border);
+  --color-border-card: var(--border-card);
+  --color-border-input: var(--border-input);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+}

package/stubs/css/base-light.stub

@@ -0,0 +1,77 @@
+:root {
+  --primary: var(--color-primary-600);
+  --secondary: var(--color-secondary-600);
+  --accent: var(--color-accent-600);
+  --info: var(--color-info-600);
+  --warning: var(--color-warning-600);
+  --danger: var(--color-danger-600);
+  --success: var(--color-success-600);
+
+  --fg-title: var(--color-gray-900);
+  --fg-subtitle: var(--color-gray-800);
+  --fg: var(--color-gray-700);
+  --fg-muted: var(--color-gray-600);
+
+  --bg: var(--color-white);
+  --bg-subtle: var(--color-gray-100);
+  --bg-surface: var(--color-gray-50);
+  --bg-muted: var(--color-gray-200);
+  --card: var(--bg);
+  --overlay: var(--bg);
+
+  --border-strong: var(--color-gray-300);
+  --border: var(--color-gray-200);
+  --border-card: var(--color-gray-200);
+  --border-input: var(--color-gray-200);
+
+  --ui-input-focus-outline: var(--color-primary);
+  --ui-input-place-holder: var(--color-gray-500);
+  --ui-input-invalid-outline: var(--color-danger);
+  --ring-bg: var(--color-primary);
+  --ring-offset-color: var(--bg);
+
+  --focus-ring: var(--color-primary-200);
+
+  --ui-radius: var(--radius-lg);
+  --card-radius: var(--radius-lg);
+  --checkbox-radius: var(--radius-sm);
+
+  --checkbox-bg: var(--bg);
+  --checkbox-fg: transparent;
+  --checkbox-bg-checked: var(--color-primary);
+  --checkbox-fg-checked: var(--color-white);
+  --checkbox-bg-invalid: var(--color-danger);
+  --checkbox-fg-invalid: var(--color-white);
+
+
+  --dropdown-item-hover-and-select: var(--bg-muted);
+  --dropdown-item-hover-and-select-fg: var(--fg-title);
+  --dropdown-item-selected-fg: var(--fg-title);
+
+  --dropdown-item-danger-fg: var(--color-danger);
+  --dropdown-item-warning-fg: var(--color-warning);
+  --dropdown-item-danger-hover-and-select: --alpha(var(--color-danger-100)/40%);
+  --dropdown-item-danger-hover-and-select-fg: var(--color-danger-600);
+  --dropdown-item-warning-hover-and-select: --alpha(var(--color-warning-100)/40%);
+  --dropdown-item-warning-hover-and-select-fg: var(--color-warning-600);
+
+  --date-segment-focus-bg: var(--color-primary);
+  --date-segment-focus-fg: var(--color-white);
+  --range-selected-bg: var(--color-primary-100);
+  --range-selected-invalid-bg: var(--color-danger-100);
+
+  --range-selected-bg-hover: var(--color-primary-200);
+  --range-selected-invalid-bg-hover: var(--color-danger-200);
+
+  --range-selected-fg: var(--color-primary-600);
+  --range-selected-invalid-fg: var(--color-danger-600);
+
+  --range-selected-bg-pressed: var(--color-primary-300);
+  --range-selected-invalid-bg-pressed: var(--color-danger-300);
+
+  --chart-1: oklch(0.546 0.245 262.881);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.707 0.165 254.624);
+  --chart-4: oklch(0.809 0.105 251.813);
+  --chart-5: oklch(0.882 0.059 254.128);
+}

package/stubs/css/energy.stub

@@ -0,0 +1,54 @@
+/* stubs/energy.css */
+@theme inline {
+  /* primary: amber */
+  --color-primary-50: var(--color-amber-50);
+  --color-primary-100: var(--color-amber-100);
+  --color-primary-200: var(--color-amber-200);
+  --color-primary-300: var(--color-amber-300);
+  --color-primary-400: var(--color-amber-400);
+  --color-primary-500: var(--color-amber-500);
+  --color-primary-600: var(--color-amber-600);
+  --color-primary-700: var(--color-amber-700);
+  --color-primary-800: var(--color-amber-800);
+  --color-primary-900: var(--color-amber-900);
+  --color-primary-950: var(--color-amber-950);
+
+  /* secondary: yellow */
+  --color-secondary-50: var(--color-yellow-50);
+  --color-secondary-100: var(--color-yellow-100);
+  --color-secondary-200: var(--color-yellow-200);
+  --color-secondary-300: var(--color-yellow-300);
+  --color-secondary-400: var(--color-yellow-400);
+  --color-secondary-500: var(--color-yellow-500);
+  --color-secondary-600: var(--color-yellow-600);
+  --color-secondary-700: var(--color-yellow-700);
+  --color-secondary-800: var(--color-yellow-800);
+  --color-secondary-900: var(--color-yellow-900);
+  --color-secondary-950: var(--color-yellow-950);
+
+  /* accent: lime */
+  --color-accent-50: var(--color-lime-50);
+  --color-accent-100: var(--color-lime-100);
+  --color-accent-200: var(--color-lime-200);
+  --color-accent-300: var(--color-lime-300);
+  --color-accent-400: var(--color-lime-400);
+  --color-accent-500: var(--color-lime-500);
+  --color-accent-600: var(--color-lime-600);
+  --color-accent-700: var(--color-lime-700);
+  --color-accent-800: var(--color-lime-800);
+  --color-accent-900: var(--color-lime-900);
+  --color-accent-950: var(--color-lime-950);
+
+  /* gray: stone */
+  --color-gray-50: var(--color-stone-50);
+  --color-gray-100: var(--color-stone-100);
+  --color-gray-200: var(--color-stone-200);
+  --color-gray-300: var(--color-stone-300);
+  --color-gray-400: var(--color-stone-400);
+  --color-gray-500: var(--color-stone-500);
+  --color-gray-600: var(--color-stone-600);
+  --color-gray-700: var(--color-stone-700);
+  --color-gray-800: var(--color-stone-800);
+  --color-gray-900: var(--color-stone-900);
+  --color-gray-950: var(--color-stone-950);
+}

package/stubs/css/mystery.stub

@@ -0,0 +1,54 @@
+/* stubs/mystery.css */
+@theme inline {
+  /* primary: purple */
+  --color-primary-50: var(--color-purple-50);
+  --color-primary-100: var(--color-purple-100);
+  --color-primary-200: var(--color-purple-200);
+  --color-primary-300: var(--color-purple-300);
+  --color-primary-400: var(--color-purple-400);
+  --color-primary-500: var(--color-purple-500);
+  --color-primary-600: var(--color-purple-600);
+  --color-primary-700: var(--color-purple-700);
+  --color-primary-800: var(--color-purple-800);
+  --color-primary-900: var(--color-purple-900);
+  --color-primary-950: var(--color-purple-950);
+
+  /* secondary: fuchsia */
+  --color-secondary-50: var(--color-fuchsia-50);
+  --color-secondary-100: var(--color-fuchsia-100);
+  --color-secondary-200: var(--color-fuchsia-200);
+  --color-secondary-300: var(--color-fuchsia-300);
+  --color-secondary-400: var(--color-fuchsia-400);
+  --color-secondary-500: var(--color-fuchsia-500);
+  --color-secondary-600: var(--color-fuchsia-600);
+  --color-secondary-700: var(--color-fuchsia-700);
+  --color-secondary-800: var(--color-fuchsia-800);
+  --color-secondary-900: var(--color-fuchsia-900);
+  --color-secondary-950: var(--color-fuchsia-950);
+
+  /* accent: pink */
+  --color-accent-50: var(--color-pink-50);
+  --color-accent-100: var(--color-pink-100);
+  --color-accent-200: var(--color-pink-200);
+  --color-accent-300: var(--color-pink-300);
+  --color-accent-400: var(--color-pink-400);
+  --color-accent-500: var(--color-pink-500);
+  --color-accent-600: var(--color-pink-600);
+  --color-accent-700: var(--color-pink-700);
+  --color-accent-800: var(--color-pink-800);
+  --color-accent-900: var(--color-pink-900);
+  --color-accent-950: var(--color-pink-950);
+
+  /* gray: slate */
+  --color-gray-50: var(--color-slate-50);
+  --color-gray-100: var(--color-slate-100);
+  --color-gray-200: var(--color-slate-200);
+  --color-gray-300: var(--color-slate-300);
+  --color-gray-400: var(--color-slate-400);
+  --color-gray-500: var(--color-slate-500);
+  --color-gray-600: var(--color-slate-600);
+  --color-gray-700: var(--color-slate-700);
+  --color-gray-800: var(--color-slate-800);
+  --color-gray-900: var(--color-slate-900);
+  --color-gray-950: var(--color-slate-950);
+}

package/stubs/css/nature.stub

@@ -0,0 +1,54 @@
+/* stubs/nature.css */
+@theme inline {
+  /* primary: green */
+  --color-primary-50: var(--color-green-50);
+  --color-primary-100: var(--color-green-100);
+  --color-primary-200: var(--color-green-200);
+  --color-primary-300: var(--color-green-300);
+  --color-primary-400: var(--color-green-400);
+  --color-primary-500: var(--color-green-500);
+  --color-primary-600: var(--color-green-600);
+  --color-primary-700: var(--color-green-700);
+  --color-primary-800: var(--color-green-800);
+  --color-primary-900: var(--color-green-900);
+  --color-primary-950: var(--color-green-950);
+
+  /* secondary: lime */
+  --color-secondary-50: var(--color-lime-50);
+  --color-secondary-100: var(--color-lime-100);
+  --color-secondary-200: var(--color-lime-200);
+  --color-secondary-300: var(--color-lime-300);
+  --color-secondary-400: var(--color-lime-400);
+  --color-secondary-500: var(--color-lime-500);
+  --color-secondary-600: var(--color-lime-600);
+  --color-secondary-700: var(--color-lime-700);
+  --color-secondary-800: var(--color-lime-800);
+  --color-secondary-900: var(--color-lime-900);
+  --color-secondary-950: var(--color-lime-950);
+
+  /* accent: teal */
+  --color-accent-50: var(--color-teal-50);
+  --color-accent-100: var(--color-teal-100);
+  --color-accent-200: var(--color-teal-200);
+  --color-accent-300: var(--color-teal-300);
+  --color-accent-400: var(--color-teal-400);
+  --color-accent-500: var(--color-teal-500);
+  --color-accent-600: var(--color-teal-600);
+  --color-accent-700: var(--color-teal-700);
+  --color-accent-800: var(--color-teal-800);
+  --color-accent-900: var(--color-teal-900);
+  --color-accent-950: var(--color-teal-950);
+
+  
+  --color-gray-50: oklch(97.59% 0.0060 223.46);
+  --color-gray-100: oklch(95.22% 0.0042 271.37);
+  --color-gray-200: oklch(93.68% 0.0121 247.96);
+  --color-gray-300: oklch(84.77% 0.0177 219.68);
+  --color-gray-400: oklch(72.20% 0.0197 227.39);
+  --color-gray-500: oklch(57.98% 0.0207 227.53);
+  --color-gray-600: oklch(46.82% 0.0217 227.71);
+  --color-gray-700: oklch(39.10% 0.0245 229.77);
+  --color-gray-800: oklch(28.64% 0.0211 240.03);
+  --color-gray-900: oklch(19.64% 0.0136 243.66);
+  --color-gray-950: oklch(9.51% 0.0061 243.12);
+}

package/stubs/css/oz.stub

@@ -0,0 +1,80 @@
+/* stubs/oz.css */
+@theme inline {
+  /* primary: indigo */
+  --color-primary-50: var(--color-indigo-50);
+  --color-primary-100: var(--color-indigo-100);
+  --color-primary-200: var(--color-indigo-200);
+  --color-primary-300: var(--color-indigo-300);
+  --color-primary-400: var(--color-indigo-400);
+  --color-primary-500: var(--color-indigo-500);
+  --color-primary-600: var(--color-indigo-600);
+  --color-primary-700: var(--color-indigo-700);
+  --color-primary-800: var(--color-indigo-800);
+  --color-primary-900: var(--color-indigo-900);
+  --color-primary-950: var(--color-indigo-950);
+
+  /* secondary: cyan */
+  --color-secondary-50: var(--color-cyan-50);
+  --color-secondary-100: var(--color-cyan-100);
+  --color-secondary-200: var(--color-cyan-200);
+  --color-secondary-300: var(--color-cyan-300);
+  --color-secondary-400: var(--color-cyan-400);
+  --color-secondary-500: var(--color-cyan-500);
+  --color-secondary-600: var(--color-cyan-600);
+  --color-secondary-700: var(--color-cyan-700);
+  --color-secondary-800: var(--color-cyan-800);
+  --color-secondary-900: var(--color-cyan-900);
+  --color-secondary-950: var(--color-cyan-950);
+
+  /* accent: fuchsia */
+  --color-accent-50: var(--color-fuchsia-50);
+  --color-accent-100: var(--color-fuchsia-100);
+  --color-accent-200: var(--color-fuchsia-200);
+  --color-accent-300: var(--color-fuchsia-300);
+  --color-accent-400: var(--color-fuchsia-400);
+  --color-accent-500: var(--color-fuchsia-500);
+  --color-accent-600: var(--color-fuchsia-600);
+  --color-accent-700: var(--color-fuchsia-700);
+  --color-accent-800: var(--color-fuchsia-800);
+  --color-accent-900: var(--color-fuchsia-900);
+  --color-accent-950: var(--color-fuchsia-950);
+
+  /* success: lime */
+  --color-success-50: var(--color-lime-50);
+  --color-success-100: var(--color-lime-100);
+  --color-success-200: var(--color-lime-200);
+  --color-success-300: var(--color-lime-300);
+  --color-success-400: var(--color-lime-400);
+  --color-success-500: var(--color-lime-500);
+  --color-success-600: var(--color-lime-600);
+  --color-success-700: var(--color-lime-700);
+  --color-success-800: var(--color-lime-800);
+  --color-success-900: var(--color-lime-900);
+  --color-success-950: var(--color-lime-950);
+
+  /* danger: rose */
+  --color-danger-50: var(--color-rose-50);
+  --color-danger-100: var(--color-rose-100);
+  --color-danger-200: var(--color-rose-200);
+  --color-danger-300: var(--color-rose-300);
+  --color-danger-400: var(--color-rose-400);
+  --color-danger-500: var(--color-rose-500);
+  --color-danger-600: var(--color-rose-600);
+  --color-danger-700: var(--color-rose-700);
+  --color-danger-800: var(--color-rose-800);
+  --color-danger-900: var(--color-rose-900);
+  --color-danger-950: var(--color-rose-950);
+
+
+  --color-gray-50: oklch(98.62% 0.0053 286.30);
+  --color-gray-100: oklch(97.13% 0.0053 286.30);
+  --color-gray-200: oklch(93.06% 0.0121 286.16);
+  --color-gray-300: oklch(87.94% 0.0150 286.09);
+  --color-gray-400: oklch(73.67% 0.0229 285.83);
+  --color-gray-500: oklch(54.50% 0.0294 285.38);
+  --color-gray-600: oklch(42.72% 0.0296 285.08);
+  --color-gray-700: oklch(35.55% 0.0293 284.81);
+  --color-gray-800: oklch(24.82% 0.0340 283.65);
+  --color-gray-900: oklch(18.98% 0.0282 283.38);
+  --color-gray-950: oklch(9.75% 0.0338 278.10);
+}

package/stubs/css/passion.stub

@@ -0,0 +1,54 @@
+/* stubs/passion.css */
+@theme inline {
+  /* primary: red */
+  --color-primary-50: var(--color-red-50);
+  --color-primary-100: var(--color-red-100);
+  --color-primary-200: var(--color-red-200);
+  --color-primary-300: var(--color-red-300);
+  --color-primary-400: var(--color-red-400);
+  --color-primary-500: var(--color-red-500);
+  --color-primary-600: var(--color-red-600);
+  --color-primary-700: var(--color-red-700);
+  --color-primary-800: var(--color-red-800);
+  --color-primary-900: var(--color-red-900);
+  --color-primary-950: var(--color-red-950);
+
+  /* secondary: orange */
+  --color-secondary-50: var(--color-orange-50);
+  --color-secondary-100: var(--color-orange-100);
+  --color-secondary-200: var(--color-orange-200);
+  --color-secondary-300: var(--color-orange-300);
+  --color-secondary-400: var(--color-orange-400);
+  --color-secondary-500: var(--color-orange-500);
+  --color-secondary-600: var(--color-orange-600);
+  --color-secondary-700: var(--color-orange-700);
+  --color-secondary-800: var(--color-orange-800);
+  --color-secondary-900: var(--color-orange-900);
+  --color-secondary-950: var(--color-orange-950);
+
+  /* accent: amber */
+  --color-accent-50: var(--color-amber-50);
+  --color-accent-100: var(--color-amber-100);
+  --color-accent-200: var(--color-amber-200);
+  --color-accent-300: var(--color-amber-300);
+  --color-accent-400: var(--color-amber-400);
+  --color-accent-500: var(--color-amber-500);
+  --color-accent-600: var(--color-amber-600);
+  --color-accent-700: var(--color-amber-700);
+  --color-accent-800: var(--color-amber-800);
+  --color-accent-900: var(--color-amber-900);
+  --color-accent-950: var(--color-amber-950);
+
+  /* gray: neutral */
+  --color-gray-50: var(--color-neutral-50);
+  --color-gray-100: var(--color-neutral-100);
+  --color-gray-200: var(--color-neutral-200);
+  --color-gray-300: var(--color-neutral-300);
+  --color-gray-400: var(--color-neutral-400);
+  --color-gray-500: var(--color-neutral-500);
+  --color-gray-600: var(--color-neutral-600);
+  --color-gray-700: var(--color-neutral-700);
+  --color-gray-800: var(--color-neutral-800);
+  --color-gray-900: var(--color-neutral-900);
+  --color-gray-950: var(--color-neutral-950);
+}