@karbonjs/ui-core 0.2.5 → 0.3.0

package/dist/types/brand-button.d.ts

@@ -0,0 +1,3 @@
+export type BrandProvider = 'google' | 'facebook' | 'apple' | 'microsoft' | 'github' | 'gitlab' | 'twitter' | 'x' | 'discord' | 'slack' | 'linkedin' | 'reddit' | 'twitch' | 'youtube' | 'tiktok' | 'instagram' | 'snapchat' | 'pinterest' | 'spotify' | 'steam' | 'playstation' | 'xbox' | 'nintendo' | 'stripe' | 'paypal' | 'amazon' | 'figma' | 'notion' | 'vercel' | 'netlify';
+export type BrandButtonVariant = 'solid' | 'outline' | 'light';
+//# sourceMappingURL=brand-button.d.ts.map

package/dist/types/brand-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand-button.d.ts","sourceRoot":"","sources":["../../src/types/brand-button.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GACrB,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GACnE,SAAS,GAAG,GAAG,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAC7D,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,WAAW,GACxE,SAAS,GAAG,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,UAAU,GACzD,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAC9B,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAA;AAE7C,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA"}

package/dist/types/brand-button.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=brand-button.js.map

package/dist/types/brand-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand-button.js","sourceRoot":"","sources":["../../src/types/brand-button.ts"],"names":[],"mappings":""}

package/dist/types/button.d.ts

@@ -1,14 +1,5 @@
-export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline';
-export type ButtonSize = 'sm' | 'md' | 'lg';
-export interface ButtonProps {
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-    type?: 'button' | 'submit';
-    disabled?: boolean;
-    loading?: boolean;
-    loadingText?: string;
-    arrow?: boolean;
-    fullWidth?: boolean;
-    class?: string;
-}
+export type ButtonVariant = 'solid' | 'flat' | 'bordered' | 'outline' | 'light' | 'ghost' | 'shadow';
+export type ButtonSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+export type ButtonColor = 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'emerald' | 'cyan' | 'blue' | 'violet' | 'pink' | 'slate' | 'zinc';
+export type ButtonShape = 'sharp' | 'soft' | 'rounded' | 'pill' | 'circle';
 //# sourceMappingURL=button.d.ts.map

package/dist/types/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/types/button.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;AACpF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE3C,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/types/button.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAA;AACpG,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,CAAA;AACjF,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;AAC7I,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAA"}

package/dist/types/form.d.ts

@@ -1,4 +1,13 @@
+import type { ButtonColor } from './button';
 export type FormVariant = 'dark' | 'light';
+export type FormInputVariant = 'outlined' | 'filled' | 'underline';
+export interface FormInputClasses {
+    root?: string;
+    label?: string;
+    input?: string;
+    icon?: string;
+    error?: string;
+}
 export interface FormInputProps {
     name: string;
     type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number';
@@ -12,6 +21,9 @@ export interface FormInputProps {
     autocomplete?: string;
     clearable?: boolean;
     variant?: FormVariant;
+    inputVariant?: FormInputVariant;
+    color?: ButtonColor;
+    classes?: FormInputClasses;
     class?: string;
     inputClass?: string;
     labelClass?: string;
@@ -22,6 +34,12 @@ export interface SelectOption {
     label: string;
     disabled?: boolean;
 }
+export interface SelectClasses {
+    root?: string;
+    label?: string;
+    select?: string;
+    error?: string;
+}
 export interface SelectProps {
     name: string;
     options: SelectOption[];
@@ -32,8 +50,17 @@ export interface SelectProps {
     required?: boolean;
     disabled?: boolean;
     variant?: FormVariant;
+    inputVariant?: FormInputVariant;
+    color?: ButtonColor;
+    classes?: SelectClasses;
     class?: string;
 }
+export interface CheckboxClasses {
+    root?: string;
+    input?: string;
+    label?: string;
+    description?: string;
+}
 export interface CheckboxProps {
     name: string;
     checked?: boolean;
@@ -41,17 +68,34 @@ export interface CheckboxProps {
     label?: string;
     description?: string;
     disabled?: boolean;
+    color?: ButtonColor;
+    classes?: CheckboxClasses;
     class?: string;
 }
 export type ToggleSize = 'sm' | 'md';
+export interface ToggleClasses {
+    root?: string;
+    track?: string;
+    dot?: string;
+    label?: string;
+}
 export interface ToggleProps {
     name: string;
     checked?: boolean;
     label?: string;
     size?: ToggleSize;
     disabled?: boolean;
+    color?: ButtonColor;
+    classes?: ToggleClasses;
     class?: string;
 }
+export interface TextareaClasses {
+    root?: string;
+    label?: string;
+    textarea?: string;
+    error?: string;
+    count?: string;
+}
 export interface TextareaProps {
     name: string;
     value?: string;
@@ -65,6 +109,9 @@ export interface TextareaProps {
     disabled?: boolean;
     readonly?: boolean;
     variant?: FormVariant;
+    inputVariant?: FormInputVariant;
+    color?: ButtonColor;
+    classes?: TextareaClasses;
     class?: string;
 }
 export interface RadioOption {
@@ -74,6 +121,13 @@ export interface RadioOption {
     disabled?: boolean;
 }
 export type RadioDirection = 'row' | 'column';
+export interface RadioClasses {
+    root?: string;
+    legend?: string;
+    input?: string;
+    label?: string;
+    description?: string;
+}
 export interface RadioProps {
     name: string;
     options: RadioOption[];
@@ -81,8 +135,16 @@ export interface RadioProps {
     label?: string;
     direction?: RadioDirection;
     disabled?: boolean;
+    color?: ButtonColor;
+    classes?: RadioClasses;
     class?: string;
 }
+export interface SliderClasses {
+    root?: string;
+    label?: string;
+    value?: string;
+    input?: string;
+}
 export interface SliderProps {
     name: string;
     value?: number;
@@ -92,8 +154,17 @@ export interface SliderProps {
     label?: string;
     showValue?: boolean;
     disabled?: boolean;
+    color?: ButtonColor;
+    classes?: SliderClasses;
     class?: string;
 }
+export interface DatePickerClasses {
+    root?: string;
+    label?: string;
+    trigger?: string;
+    calendar?: string;
+    error?: string;
+}
 export interface DatePickerProps {
     name: string;
     value?: string;
@@ -105,14 +176,25 @@ export interface DatePickerProps {
     required?: boolean;
     disabled?: boolean;
     variant?: FormVariant;
+    color?: ButtonColor;
+    classes?: DatePickerClasses;
     class?: string;
 }
+export interface ColorPickerClasses {
+    root?: string;
+    label?: string;
+    trigger?: string;
+    dropdown?: string;
+    hexInput?: string;
+}
 export interface ColorPickerProps {
     name: string;
     value?: string;
     label?: string;
     presets?: string[];
     disabled?: boolean;
+    color?: ButtonColor;
+    classes?: ColorPickerClasses;
     class?: string;
 }
 //# sourceMappingURL=form.d.ts.map

package/dist/types/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/types/form.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/types/form.ts"],"names":[],"mappings":"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"}

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from './button.js';
+export * from './brand-button.js';
 export * from './badge.js';
 export * from './alert.js';
 export * from './overlay.js';

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA"}

package/dist/types/index.js

@@ -1,4 +1,5 @@
 export * from './button.js';
+export * from './brand-button.js';
 export * from './badge.js';
 export * from './alert.js';
 export * from './overlay.js';

package/dist/types/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@karbonjs/ui-core",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "Shared design tokens, CSS, and types for Karbon UI components",
   "type": "module",
   "main": "dist/index.js",
@@ -10,11 +10,16 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./css": "./src/styles.css"
+    "./css": "./src/styles.css",
+    "./styles": "./src/styles.css",
+    "./colors": "./src/colors.css",
+    "./themes/*": "./src/themes/*"
   },
   "files": [
     "dist",
-    "src/styles.css"
+    "src/styles.css",
+    "src/colors.css",
+    "src/themes"
   ],
   "publishConfig": {
     "access": "public"

package/src/colors.css

@@ -0,0 +1,289 @@
+/* @karbonjs/ui-core — Color palettes (Tailwind CSS v4 values) */
+
+:root {
+  /* ── Red ── */
+  --karbon-red-50: #fef2f2;
+  --karbon-red-100: #fee2e2;
+  --karbon-red-200: #fecaca;
+  --karbon-red-300: #fca5a5;
+  --karbon-red-400: #f87171;
+  --karbon-red-500: #ef4444;
+  --karbon-red-600: #dc2626;
+  --karbon-red-700: #b91c1c;
+  --karbon-red-800: #991b1b;
+  --karbon-red-900: #7f1d1d;
+  --karbon-red-950: #450a0a;
+
+  /* ── Orange ── */
+  --karbon-orange-50: #fff7ed;
+  --karbon-orange-100: #ffedd5;
+  --karbon-orange-200: #fed7aa;
+  --karbon-orange-300: #fdba74;
+  --karbon-orange-400: #fb923c;
+  --karbon-orange-500: #f97316;
+  --karbon-orange-600: #ea580c;
+  --karbon-orange-700: #c2410c;
+  --karbon-orange-800: #9a3412;
+  --karbon-orange-900: #7c2d12;
+  --karbon-orange-950: #431407;
+
+  /* ── Amber ── */
+  --karbon-amber-50: #fffbeb;
+  --karbon-amber-100: #fef3c7;
+  --karbon-amber-200: #fde68a;
+  --karbon-amber-300: #fcd34d;
+  --karbon-amber-400: #fbbf24;
+  --karbon-amber-500: #f59e0b;
+  --karbon-amber-600: #d97706;
+  --karbon-amber-700: #b45309;
+  --karbon-amber-800: #92400e;
+  --karbon-amber-900: #78350f;
+  --karbon-amber-950: #451a03;
+
+  /* ── Yellow ── */
+  --karbon-yellow-50: #fefce8;
+  --karbon-yellow-100: #fef9c3;
+  --karbon-yellow-200: #fef08a;
+  --karbon-yellow-300: #fde047;
+  --karbon-yellow-400: #facc15;
+  --karbon-yellow-500: #eab308;
+  --karbon-yellow-600: #ca8a04;
+  --karbon-yellow-700: #a16207;
+  --karbon-yellow-800: #854d0e;
+  --karbon-yellow-900: #713f12;
+  --karbon-yellow-950: #422006;
+
+  /* ── Lime ── */
+  --karbon-lime-50: #f7fee7;
+  --karbon-lime-100: #ecfccb;
+  --karbon-lime-200: #d9f99d;
+  --karbon-lime-300: #bef264;
+  --karbon-lime-400: #a3e635;
+  --karbon-lime-500: #84cc16;
+  --karbon-lime-600: #65a30d;
+  --karbon-lime-700: #4d7c0f;
+  --karbon-lime-800: #3f6212;
+  --karbon-lime-900: #365314;
+  --karbon-lime-950: #1a2e05;
+
+  /* ── Green ── */
+  --karbon-green-50: #f0fdf4;
+  --karbon-green-100: #dcfce7;
+  --karbon-green-200: #bbf7d0;
+  --karbon-green-300: #86efac;
+  --karbon-green-400: #4ade80;
+  --karbon-green-500: #22c55e;
+  --karbon-green-600: #16a34a;
+  --karbon-green-700: #15803d;
+  --karbon-green-800: #166534;
+  --karbon-green-900: #14532d;
+  --karbon-green-950: #052e16;
+
+  /* ── Emerald ── */
+  --karbon-emerald-50: #eafff5;
+  --karbon-emerald-100: #c9fede;
+  --karbon-emerald-200: #8ffcbd;
+  --karbon-emerald-300: #4ef59a;
+  --karbon-emerald-400: #1ed760;
+  --karbon-emerald-500: #1db954;
+  --karbon-emerald-600: #17a34a;
+  --karbon-emerald-700: #148c3f;
+  --karbon-emerald-800: #106b31;
+  --karbon-emerald-900: #0c5526;
+  --karbon-emerald-950: #052e15;
+
+  /* ── Teal ── */
+  --karbon-teal-50: #f0fdfa;
+  --karbon-teal-100: #ccfbf1;
+  --karbon-teal-200: #99f6e4;
+  --karbon-teal-300: #5eead4;
+  --karbon-teal-400: #2dd4bf;
+  --karbon-teal-500: #14b8a6;
+  --karbon-teal-600: #0d9488;
+  --karbon-teal-700: #0f766e;
+  --karbon-teal-800: #115e59;
+  --karbon-teal-900: #134e4a;
+  --karbon-teal-950: #042f2e;
+
+  /* ── Cyan ── */
+  --karbon-cyan-50: #ecfeff;
+  --karbon-cyan-100: #cffafe;
+  --karbon-cyan-200: #a5f3fc;
+  --karbon-cyan-300: #67e8f9;
+  --karbon-cyan-400: #22d3ee;
+  --karbon-cyan-500: #06b6d4;
+  --karbon-cyan-600: #0891b2;
+  --karbon-cyan-700: #0e7490;
+  --karbon-cyan-800: #155e75;
+  --karbon-cyan-900: #164e63;
+  --karbon-cyan-950: #083344;
+
+  /* ── Sky ── */
+  --karbon-sky-50: #f0f9ff;
+  --karbon-sky-100: #e0f2fe;
+  --karbon-sky-200: #bae6fd;
+  --karbon-sky-300: #7dd3fc;
+  --karbon-sky-400: #38bdf8;
+  --karbon-sky-500: #0ea5e9;
+  --karbon-sky-600: #0284c7;
+  --karbon-sky-700: #0369a1;
+  --karbon-sky-800: #075985;
+  --karbon-sky-900: #0c4a6e;
+  --karbon-sky-950: #082f49;
+
+  /* ── Blue ── */
+  --karbon-blue-50: #eff6ff;
+  --karbon-blue-100: #dbeafe;
+  --karbon-blue-200: #bfdbfe;
+  --karbon-blue-300: #93c5fd;
+  --karbon-blue-400: #60a5fa;
+  --karbon-blue-500: #3b82f6;
+  --karbon-blue-600: #2563eb;
+  --karbon-blue-700: #1d4ed8;
+  --karbon-blue-800: #1e40af;
+  --karbon-blue-900: #1e3a8a;
+  --karbon-blue-950: #172554;
+
+  /* ── Indigo ── */
+  --karbon-indigo-50: #eef2ff;
+  --karbon-indigo-100: #e0e7ff;
+  --karbon-indigo-200: #c7d2fe;
+  --karbon-indigo-300: #a5b4fc;
+  --karbon-indigo-400: #818cf8;
+  --karbon-indigo-500: #6366f1;
+  --karbon-indigo-600: #4f46e5;
+  --karbon-indigo-700: #4338ca;
+  --karbon-indigo-800: #3730a3;
+  --karbon-indigo-900: #312e81;
+  --karbon-indigo-950: #1e1b4b;
+
+  /* ── Violet ── */
+  --karbon-violet-50: #f5f3ff;
+  --karbon-violet-100: #ede9fe;
+  --karbon-violet-200: #ddd6fe;
+  --karbon-violet-300: #c4b5fd;
+  --karbon-violet-400: #a78bfa;
+  --karbon-violet-500: #8b5cf6;
+  --karbon-violet-600: #7c3aed;
+  --karbon-violet-700: #6d28d9;
+  --karbon-violet-800: #5b21b6;
+  --karbon-violet-900: #4c1d95;
+  --karbon-violet-950: #2e1065;
+
+  /* ── Purple ── */
+  --karbon-purple-50: #faf5ff;
+  --karbon-purple-100: #f3e8ff;
+  --karbon-purple-200: #e9d5ff;
+  --karbon-purple-300: #d8b4fe;
+  --karbon-purple-400: #c084fc;
+  --karbon-purple-500: #a855f7;
+  --karbon-purple-600: #9333ea;
+  --karbon-purple-700: #7e22ce;
+  --karbon-purple-800: #6b21a8;
+  --karbon-purple-900: #581c87;
+  --karbon-purple-950: #3b0764;
+
+  /* ── Fuchsia ── */
+  --karbon-fuchsia-50: #fdf4ff;
+  --karbon-fuchsia-100: #fae8ff;
+  --karbon-fuchsia-200: #f5d0fe;
+  --karbon-fuchsia-300: #f0abfc;
+  --karbon-fuchsia-400: #e879f9;
+  --karbon-fuchsia-500: #d946ef;
+  --karbon-fuchsia-600: #c026d3;
+  --karbon-fuchsia-700: #a21caf;
+  --karbon-fuchsia-800: #86198f;
+  --karbon-fuchsia-900: #701a75;
+  --karbon-fuchsia-950: #4a044e;
+
+  /* ── Pink ── */
+  --karbon-pink-50: #fdf2f8;
+  --karbon-pink-100: #fce7f3;
+  --karbon-pink-200: #fbcfe8;
+  --karbon-pink-300: #f9a8d4;
+  --karbon-pink-400: #f472b6;
+  --karbon-pink-500: #ec4899;
+  --karbon-pink-600: #db2777;
+  --karbon-pink-700: #be185d;
+  --karbon-pink-800: #9d174d;
+  --karbon-pink-900: #831843;
+  --karbon-pink-950: #500724;
+
+  /* ── Rose ── */
+  --karbon-rose-50: #fff1f2;
+  --karbon-rose-100: #ffe4e6;
+  --karbon-rose-200: #fecdd3;
+  --karbon-rose-300: #fda4af;
+  --karbon-rose-400: #fb7185;
+  --karbon-rose-500: #f43f5e;
+  --karbon-rose-600: #e11d48;
+  --karbon-rose-700: #be123c;
+  --karbon-rose-800: #9f1239;
+  --karbon-rose-900: #881337;
+  --karbon-rose-950: #4c0519;
+
+  /* ── Slate ── */
+  --karbon-slate-50: #f8fafc;
+  --karbon-slate-100: #f1f5f9;
+  --karbon-slate-200: #e2e8f0;
+  --karbon-slate-300: #cbd5e1;
+  --karbon-slate-400: #94a3b8;
+  --karbon-slate-500: #64748b;
+  --karbon-slate-600: #475569;
+  --karbon-slate-700: #334155;
+  --karbon-slate-800: #1e293b;
+  --karbon-slate-900: #0f172a;
+  --karbon-slate-950: #020617;
+
+  /* ── Gray ── */
+  --karbon-gray-50: #f9fafb;
+  --karbon-gray-100: #f3f4f6;
+  --karbon-gray-200: #e5e7eb;
+  --karbon-gray-300: #d1d5db;
+  --karbon-gray-400: #9ca3af;
+  --karbon-gray-500: #6b7280;
+  --karbon-gray-600: #4b5563;
+  --karbon-gray-700: #374151;
+  --karbon-gray-800: #1f2937;
+  --karbon-gray-900: #111827;
+  --karbon-gray-950: #030712;
+
+  /* ── Zinc ── */
+  --karbon-zinc-50: #fafafa;
+  --karbon-zinc-100: #f4f4f5;
+  --karbon-zinc-200: #e4e4e7;
+  --karbon-zinc-300: #d4d4d8;
+  --karbon-zinc-400: #a1a1aa;
+  --karbon-zinc-500: #71717a;
+  --karbon-zinc-600: #52525b;
+  --karbon-zinc-700: #3f3f46;
+  --karbon-zinc-800: #27272a;
+  --karbon-zinc-900: #18181b;
+  --karbon-zinc-950: #09090b;
+
+  /* ── Neutral ── */
+  --karbon-neutral-50: #fafafa;
+  --karbon-neutral-100: #f5f5f5;
+  --karbon-neutral-200: #e5e5e5;
+  --karbon-neutral-300: #d4d4d4;
+  --karbon-neutral-400: #a3a3a3;
+  --karbon-neutral-500: #737373;
+  --karbon-neutral-600: #525252;
+  --karbon-neutral-700: #404040;
+  --karbon-neutral-800: #262626;
+  --karbon-neutral-900: #171717;
+  --karbon-neutral-950: #0a0a0a;
+
+  /* ── Stone ── */
+  --karbon-stone-50: #fafaf9;
+  --karbon-stone-100: #f5f5f4;
+  --karbon-stone-200: #e7e5e4;
+  --karbon-stone-300: #d6d3d1;
+  --karbon-stone-400: #a8a29e;
+  --karbon-stone-500: #78716c;
+  --karbon-stone-600: #57534e;
+  --karbon-stone-700: #44403c;
+  --karbon-stone-800: #292524;
+  --karbon-stone-900: #1c1917;
+  --karbon-stone-950: #0c0a09;
+}

package/src/styles.css

@@ -1,3 +1,5 @@
+@import './colors.css';
+
 /* @karbonjs/ui-core — Base design tokens */
 
 :root {

package/src/themes/aurora.css

@@ -0,0 +1,57 @@
+/* @karbonjs/ui-core — Aurora theme: Nordic gradients, green/blue/purple iridescent accents */
+
+[data-karbon-theme="aurora"][data-theme="dark"] {
+  --karbon-bg: #0a0f1a;
+  --karbon-bg-2: #0d1424;
+  --karbon-bg-card: #111a2e;
+  --karbon-bg-input: rgba(255, 255, 255, 0.06);
+  --karbon-text: rgba(255, 255, 255, 0.92);
+  --karbon-text-2: rgba(167, 243, 208, 0.60);
+  --karbon-text-3: rgba(255, 255, 255, 0.30);
+  --karbon-text-4: rgba(255, 255, 255, 0.16);
+  --karbon-border: rgba(16, 185, 129, 0.12);
+  --karbon-border-input: rgba(16, 185, 129, 0.15);
+  --karbon-border-input-focus: rgba(16, 185, 129, 0.5);
+  --karbon-nav-hover-bg: rgba(16, 185, 129, 0.08);
+  --karbon-primary: #10b981;
+  --karbon-primary-hover: #059669;
+  --karbon-secondary: #06b6d4;
+  --karbon-accent: #8b5cf6;
+  --karbon-danger: #f87171;
+  --karbon-success: #34d399;
+  --karbon-warning: #fbbf24;
+  --karbon-info: #22d3ee;
+  --karbon-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --karbon-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
+  --karbon-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
+  --karbon-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
+  --karbon-glow: 0 0 30px rgba(16, 185, 129, 0.1);
+}
+
+[data-karbon-theme="aurora"][data-theme="light"] {
+  --karbon-bg: #f0fdf4;
+  --karbon-bg-2: #ecfdf5;
+  --karbon-bg-card: #ffffff;
+  --karbon-bg-input: #ffffff;
+  --karbon-text: #064e3b;
+  --karbon-text-2: #047857;
+  --karbon-text-3: #6ee7b7;
+  --karbon-text-4: #a7f3d0;
+  --karbon-border: rgba(5, 150, 105, 0.12);
+  --karbon-border-input: rgba(5, 150, 105, 0.18);
+  --karbon-border-input-focus: rgba(16, 185, 129, 0.5);
+  --karbon-nav-hover-bg: rgba(16, 185, 129, 0.08);
+  --karbon-primary: #10b981;
+  --karbon-primary-hover: #059669;
+  --karbon-secondary: #0891b2;
+  --karbon-accent: #7c3aed;
+  --karbon-danger: #ef4444;
+  --karbon-success: #22c55e;
+  --karbon-warning: #f59e0b;
+  --karbon-info: #06b6d4;
+  --karbon-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --karbon-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
+  --karbon-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+  --karbon-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08);
+  --karbon-glow: none;
+}

package/src/themes/corporate.css

@@ -0,0 +1,55 @@
+/* @karbonjs/ui-core — Corporate theme: Business serious, navy blue, crisp borders */
+
+[data-karbon-theme="corporate"][data-theme="dark"] {
+  --karbon-bg: #0f172a;
+  --karbon-bg-2: #1e293b;
+  --karbon-bg-card: #1e293b;
+  --karbon-bg-input: rgba(255, 255, 255, 0.06);
+  --karbon-text: rgba(255, 255, 255, 0.92);
+  --karbon-text-2: rgba(203, 213, 225, 0.70);
+  --karbon-text-3: rgba(148, 163, 184, 0.50);
+  --karbon-text-4: rgba(148, 163, 184, 0.25);
+  --karbon-border: rgba(148, 163, 184, 0.15);
+  --karbon-border-input: rgba(148, 163, 184, 0.20);
+  --karbon-border-input-focus: rgba(29, 78, 216, 0.5);
+  --karbon-nav-hover-bg: rgba(148, 163, 184, 0.08);
+  --karbon-primary: #1d4ed8;
+  --karbon-primary-hover: #1e40af;
+  --karbon-secondary: #475569;
+  --karbon-accent: #f59e0b;
+  --karbon-danger: #dc2626;
+  --karbon-success: #16a34a;
+  --karbon-warning: #d97706;
+  --karbon-info: #2563eb;
+  --karbon-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
+  --karbon-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+  --karbon-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+  --karbon-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
+}
+
+[data-karbon-theme="corporate"][data-theme="light"] {
+  --karbon-bg: #f8fafc;
+  --karbon-bg-2: #f1f5f9;
+  --karbon-bg-card: #ffffff;
+  --karbon-bg-input: #ffffff;
+  --karbon-text: #0f172a;
+  --karbon-text-2: #334155;
+  --karbon-text-3: #94a3b8;
+  --karbon-text-4: #cbd5e1;
+  --karbon-border: rgba(15, 23, 42, 0.12);
+  --karbon-border-input: rgba(15, 23, 42, 0.18);
+  --karbon-border-input-focus: rgba(29, 78, 216, 0.5);
+  --karbon-nav-hover-bg: rgba(15, 23, 42, 0.04);
+  --karbon-primary: #1d4ed8;
+  --karbon-primary-hover: #1e40af;
+  --karbon-secondary: #475569;
+  --karbon-accent: #d97706;
+  --karbon-danger: #dc2626;
+  --karbon-success: #16a34a;
+  --karbon-warning: #d97706;
+  --karbon-info: #2563eb;
+  --karbon-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --karbon-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --karbon-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --karbon-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+}

package/src/themes/default.css

@@ -0,0 +1,55 @@
+/* @karbonjs/ui-core — Default theme: Clean, neutral */
+
+[data-karbon-theme="default"][data-theme="dark"] {
+  --karbon-bg: #111827;
+  --karbon-bg-2: #1f2937;
+  --karbon-bg-card: #1f2937;
+  --karbon-bg-input: rgba(255, 255, 255, 0.06);
+  --karbon-text: rgba(255, 255, 255, 0.92);
+  --karbon-text-2: rgba(255, 255, 255, 0.55);
+  --karbon-text-3: rgba(255, 255, 255, 0.32);
+  --karbon-text-4: rgba(255, 255, 255, 0.18);
+  --karbon-border: rgba(255, 255, 255, 0.08);
+  --karbon-border-input: rgba(255, 255, 255, 0.12);
+  --karbon-border-input-focus: rgba(59, 130, 246, 0.5);
+  --karbon-nav-hover-bg: rgba(255, 255, 255, 0.06);
+  --karbon-primary: #3b82f6;
+  --karbon-primary-hover: #2563eb;
+  --karbon-secondary: #64748b;
+  --karbon-accent: #f59e0b;
+  --karbon-danger: #ef4444;
+  --karbon-success: #22c55e;
+  --karbon-warning: #f59e0b;
+  --karbon-info: #3b82f6;
+  --karbon-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --karbon-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+  --karbon-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+  --karbon-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
+}
+
+[data-karbon-theme="default"][data-theme="light"] {
+  --karbon-bg: #f9fafb;
+  --karbon-bg-2: #f3f4f6;
+  --karbon-bg-card: #ffffff;
+  --karbon-bg-input: #ffffff;
+  --karbon-text: #111827;
+  --karbon-text-2: #6b7280;
+  --karbon-text-3: #9ca3af;
+  --karbon-text-4: #d1d5db;
+  --karbon-border: rgba(0, 0, 0, 0.08);
+  --karbon-border-input: rgba(0, 0, 0, 0.15);
+  --karbon-border-input-focus: rgba(59, 130, 246, 0.5);
+  --karbon-nav-hover-bg: rgba(0, 0, 0, 0.04);
+  --karbon-primary: #3b82f6;
+  --karbon-primary-hover: #2563eb;
+  --karbon-secondary: #64748b;
+  --karbon-accent: #f59e0b;
+  --karbon-danger: #ef4444;
+  --karbon-success: #22c55e;
+  --karbon-warning: #f59e0b;
+  --karbon-info: #3b82f6;
+  --karbon-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --karbon-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --karbon-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --karbon-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+}

package/src/themes/forest.css

@@ -0,0 +1,55 @@
+/* @karbonjs/ui-core — Forest theme: Nature & zen, earth tones, warm accents */
+
+[data-karbon-theme="forest"][data-theme="dark"] {
+  --karbon-bg: #0c1a0f;
+  --karbon-bg-2: #112015;
+  --karbon-bg-card: #16261a;
+  --karbon-bg-input: rgba(255, 255, 255, 0.06);
+  --karbon-text: rgba(236, 253, 245, 0.92);
+  --karbon-text-2: rgba(167, 243, 208, 0.55);
+  --karbon-text-3: rgba(255, 255, 255, 0.30);
+  --karbon-text-4: rgba(255, 255, 255, 0.16);
+  --karbon-border: rgba(5, 150, 105, 0.12);
+  --karbon-border-input: rgba(5, 150, 105, 0.15);
+  --karbon-border-input-focus: rgba(5, 150, 105, 0.5);
+  --karbon-nav-hover-bg: rgba(5, 150, 105, 0.08);
+  --karbon-primary: #059669;
+  --karbon-primary-hover: #047857;
+  --karbon-secondary: #d97706;
+  --karbon-accent: #fbbf24;
+  --karbon-danger: #ef4444;
+  --karbon-success: #34d399;
+  --karbon-warning: #f59e0b;
+  --karbon-info: #10b981;
+  --karbon-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --karbon-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
+  --karbon-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
+  --karbon-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
+}
+
+[data-karbon-theme="forest"][data-theme="light"] {
+  --karbon-bg: #f0fdf4;
+  --karbon-bg-2: #e8f5e9;
+  --karbon-bg-card: #ffffff;
+  --karbon-bg-input: #ffffff;
+  --karbon-text: #022c22;
+  --karbon-text-2: #065f46;
+  --karbon-text-3: #6ee7b7;
+  --karbon-text-4: #a7f3d0;
+  --karbon-border: rgba(4, 120, 87, 0.12);
+  --karbon-border-input: rgba(4, 120, 87, 0.18);
+  --karbon-border-input-focus: rgba(5, 150, 105, 0.5);
+  --karbon-nav-hover-bg: rgba(5, 150, 105, 0.06);
+  --karbon-primary: #059669;
+  --karbon-primary-hover: #047857;
+  --karbon-secondary: #b45309;
+  --karbon-accent: #d97706;
+  --karbon-danger: #ef4444;
+  --karbon-success: #22c55e;
+  --karbon-warning: #f59e0b;
+  --karbon-info: #10b981;
+  --karbon-shadow-sm: 0 1px 2px rgba(2, 44, 34, 0.06);
+  --karbon-shadow-md: 0 4px 6px -1px rgba(2, 44, 34, 0.08);
+  --karbon-shadow-lg: 0 10px 15px -3px rgba(2, 44, 34, 0.08);
+  --karbon-shadow-xl: 0 20px 25px -5px rgba(2, 44, 34, 0.08);
+}

package/src/themes/midnight.css

@@ -0,0 +1,58 @@
+/* @karbonjs/ui-core — Midnight theme: Dark premium, deep blue-black with violet accents */
+/* Used by LaRevueGeek.com */
+
+[data-karbon-theme="midnight"][data-theme="dark"] {
+  --karbon-bg: #060412;
+  --karbon-bg-2: #080515;
+  --karbon-bg-card: #0a0820;
+  --karbon-bg-input: rgba(255, 255, 255, 0.06);
+  --karbon-text: rgba(255, 255, 255, 0.90);
+  --karbon-text-2: rgba(255, 255, 255, 0.50);
+  --karbon-text-3: rgba(255, 255, 255, 0.30);
+  --karbon-text-4: rgba(255, 255, 255, 0.18);
+  --karbon-border: rgba(255, 255, 255, 0.06);
+  --karbon-border-input: rgba(255, 255, 255, 0.10);
+  --karbon-border-input-focus: rgba(204, 26, 26, 0.5);
+  --karbon-nav-hover-bg: rgba(255, 255, 255, 0.05);
+  --karbon-primary: #cc1a1a;
+  --karbon-primary-hover: #a81515;
+  --karbon-secondary: #8b5cf6;
+  --karbon-accent: #a78bfa;
+  --karbon-danger: #ef4444;
+  --karbon-success: #22c55e;
+  --karbon-warning: #f59e0b;
+  --karbon-info: #8b5cf6;
+  --karbon-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --karbon-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
+  --karbon-shadow-lg: 0 10px 15px -3px rgba(6, 4, 18, 0.6);
+  --karbon-shadow-xl: 0 20px 25px -5px rgba(6, 4, 18, 0.7);
+  --karbon-glow: 0 0 20px rgba(139, 92, 246, 0.15);
+}
+
+[data-karbon-theme="midnight"][data-theme="light"] {
+  --karbon-bg: #f2f0fa;
+  --karbon-bg-2: #e8e6f0;
+  --karbon-bg-card: #ffffff;
+  --karbon-bg-input: #ffffff;
+  --karbon-text: #1a1635;
+  --karbon-text-2: #5a567e;
+  --karbon-text-3: #8e8aae;
+  --karbon-text-4: #b5b2cc;
+  --karbon-border: rgba(0, 0, 0, 0.07);
+  --karbon-border-input: rgba(0, 0, 0, 0.12);
+  --karbon-border-input-focus: rgba(204, 26, 26, 0.5);
+  --karbon-nav-hover-bg: rgba(0, 0, 0, 0.04);
+  --karbon-primary: #cc1a1a;
+  --karbon-primary-hover: #a81515;
+  --karbon-secondary: #7c3aed;
+  --karbon-accent: #8b5cf6;
+  --karbon-danger: #ef4444;
+  --karbon-success: #22c55e;
+  --karbon-warning: #f59e0b;
+  --karbon-info: #7c3aed;
+  --karbon-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --karbon-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --karbon-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --karbon-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  --karbon-glow: none;
+}

package/src/themes/minimal.css

@@ -0,0 +1,65 @@
+/* @karbonjs/ui-core — Minimal theme: Ultra clean, no shadows, sharp corners */
+
+[data-karbon-theme="minimal"][data-theme="dark"] {
+  --karbon-bg: #0a0a0a;
+  --karbon-bg-2: #141414;
+  --karbon-bg-card: #1a1a1a;
+  --karbon-bg-input: rgba(255, 255, 255, 0.05);
+  --karbon-text: rgba(255, 255, 255, 0.92);
+  --karbon-text-2: rgba(255, 255, 255, 0.55);
+  --karbon-text-3: rgba(255, 255, 255, 0.30);
+  --karbon-text-4: rgba(255, 255, 255, 0.15);
+  --karbon-border: rgba(255, 255, 255, 0.10);
+  --karbon-border-input: rgba(255, 255, 255, 0.15);
+  --karbon-border-input-focus: rgba(255, 255, 255, 0.40);
+  --karbon-nav-hover-bg: rgba(255, 255, 255, 0.06);
+  --karbon-primary: #ffffff;
+  --karbon-primary-hover: #e5e5e5;
+  --karbon-primary-foreground: #0a0a0a;
+  --karbon-secondary: #a1a1aa;
+  --karbon-accent: #ffffff;
+  --karbon-danger: #ef4444;
+  --karbon-success: #22c55e;
+  --karbon-warning: #f59e0b;
+  --karbon-info: #a1a1aa;
+  --karbon-radius-sm: 0;
+  --karbon-radius-md: 0;
+  --karbon-radius-lg: 0;
+  --karbon-radius-xl: 0;
+  --karbon-shadow-sm: none;
+  --karbon-shadow-md: none;
+  --karbon-shadow-lg: none;
+  --karbon-shadow-xl: none;
+}
+
+[data-karbon-theme="minimal"][data-theme="light"] {
+  --karbon-bg: #ffffff;
+  --karbon-bg-2: #fafafa;
+  --karbon-bg-card: #ffffff;
+  --karbon-bg-input: #ffffff;
+  --karbon-text: #0a0a0a;
+  --karbon-text-2: #525252;
+  --karbon-text-3: #a3a3a3;
+  --karbon-text-4: #d4d4d4;
+  --karbon-border: rgba(0, 0, 0, 0.10);
+  --karbon-border-input: rgba(0, 0, 0, 0.18);
+  --karbon-border-input-focus: rgba(0, 0, 0, 0.40);
+  --karbon-nav-hover-bg: rgba(0, 0, 0, 0.04);
+  --karbon-primary: #18181b;
+  --karbon-primary-hover: #3f3f46;
+  --karbon-primary-foreground: #ffffff;
+  --karbon-secondary: #71717a;
+  --karbon-accent: #18181b;
+  --karbon-danger: #ef4444;
+  --karbon-success: #22c55e;
+  --karbon-warning: #f59e0b;
+  --karbon-info: #71717a;
+  --karbon-radius-sm: 0;
+  --karbon-radius-md: 0;
+  --karbon-radius-lg: 0;
+  --karbon-radius-xl: 0;
+  --karbon-shadow-sm: none;
+  --karbon-shadow-md: none;
+  --karbon-shadow-lg: none;
+  --karbon-shadow-xl: none;
+}

package/src/themes/neon.css

@@ -0,0 +1,67 @@
+/* @karbonjs/ui-core — Neon theme: Cyberpunk/gaming, neon glow effects */
+
+[data-karbon-theme="neon"][data-theme="dark"] {
+  --karbon-bg: #000000;
+  --karbon-bg-2: #0a0a0a;
+  --karbon-bg-card: #111111;
+  --karbon-bg-input: rgba(163, 230, 53, 0.04);
+  --karbon-text: rgba(255, 255, 255, 0.95);
+  --karbon-text-2: rgba(163, 230, 53, 0.70);
+  --karbon-text-3: rgba(255, 255, 255, 0.35);
+  --karbon-text-4: rgba(255, 255, 255, 0.18);
+  --karbon-border: rgba(163, 230, 53, 0.15);
+  --karbon-border-input: rgba(163, 230, 53, 0.20);
+  --karbon-border-input-focus: rgba(163, 230, 53, 0.6);
+  --karbon-nav-hover-bg: rgba(163, 230, 53, 0.08);
+  --karbon-primary: #a3e635;
+  --karbon-primary-hover: #84cc16;
+  --karbon-primary-foreground: #0a0a0a;
+  --karbon-secondary: #22d3ee;
+  --karbon-accent: #f472b6;
+  --karbon-danger: #f87171;
+  --karbon-success: #a3e635;
+  --karbon-warning: #fbbf24;
+  --karbon-info: #22d3ee;
+  --karbon-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
+  --karbon-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6);
+  --karbon-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
+  --karbon-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
+  --karbon-glow-primary: 0 0 10px rgba(163, 230, 53, 0.3), 0 0 30px rgba(163, 230, 53, 0.15);
+  --karbon-glow-secondary: 0 0 10px rgba(34, 211, 238, 0.3), 0 0 30px rgba(34, 211, 238, 0.15);
+  --karbon-glow-accent: 0 0 10px rgba(244, 114, 182, 0.3), 0 0 30px rgba(244, 114, 182, 0.15);
+  --karbon-glow: 0 0 15px rgba(163, 230, 53, 0.2);
+  --karbon-glow-text: 0 0 8px rgba(163, 230, 53, 0.4);
+}
+
+[data-karbon-theme="neon"][data-theme="light"] {
+  --karbon-bg: #fafafa;
+  --karbon-bg-2: #f0f0f0;
+  --karbon-bg-card: #ffffff;
+  --karbon-bg-input: #ffffff;
+  --karbon-text: #0a0a0a;
+  --karbon-text-2: #365314;
+  --karbon-text-3: #a3a3a3;
+  --karbon-text-4: #d4d4d4;
+  --karbon-border: rgba(101, 163, 13, 0.18);
+  --karbon-border-input: rgba(101, 163, 13, 0.22);
+  --karbon-border-input-focus: rgba(132, 204, 22, 0.5);
+  --karbon-nav-hover-bg: rgba(163, 230, 53, 0.10);
+  --karbon-primary: #65a30d;
+  --karbon-primary-hover: #4d7c0f;
+  --karbon-primary-foreground: #ffffff;
+  --karbon-secondary: #0891b2;
+  --karbon-accent: #db2777;
+  --karbon-danger: #ef4444;
+  --karbon-success: #22c55e;
+  --karbon-warning: #f59e0b;
+  --karbon-info: #06b6d4;
+  --karbon-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --karbon-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --karbon-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --karbon-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  --karbon-glow-primary: none;
+  --karbon-glow-secondary: none;
+  --karbon-glow-accent: none;
+  --karbon-glow: none;
+  --karbon-glow-text: none;
+}

package/src/themes/ocean.css

@@ -0,0 +1,55 @@
+/* @karbonjs/ui-core — Ocean theme: Fresh and deep, cyan/turquoise accents */
+
+[data-karbon-theme="ocean"][data-theme="dark"] {
+  --karbon-bg: #0a1520;
+  --karbon-bg-2: #0d1b2a;
+  --karbon-bg-card: #112233;
+  --karbon-bg-input: rgba(255, 255, 255, 0.06);
+  --karbon-text: rgba(236, 254, 255, 0.92);
+  --karbon-text-2: rgba(103, 232, 249, 0.55);
+  --karbon-text-3: rgba(255, 255, 255, 0.30);
+  --karbon-text-4: rgba(255, 255, 255, 0.16);
+  --karbon-border: rgba(6, 182, 212, 0.12);
+  --karbon-border-input: rgba(6, 182, 212, 0.15);
+  --karbon-border-input-focus: rgba(6, 182, 212, 0.5);
+  --karbon-nav-hover-bg: rgba(6, 182, 212, 0.08);
+  --karbon-primary: #06b6d4;
+  --karbon-primary-hover: #0891b2;
+  --karbon-secondary: #3b82f6;
+  --karbon-accent: #22d3ee;
+  --karbon-danger: #f87171;
+  --karbon-success: #34d399;
+  --karbon-warning: #fbbf24;
+  --karbon-info: #22d3ee;
+  --karbon-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --karbon-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
+  --karbon-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
+  --karbon-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
+}
+
+[data-karbon-theme="ocean"][data-theme="light"] {
+  --karbon-bg: #ecfeff;
+  --karbon-bg-2: #e0f7fa;
+  --karbon-bg-card: #ffffff;
+  --karbon-bg-input: #ffffff;
+  --karbon-text: #083344;
+  --karbon-text-2: #155e75;
+  --karbon-text-3: #67e8f9;
+  --karbon-text-4: #a5f3fc;
+  --karbon-border: rgba(8, 145, 178, 0.12);
+  --karbon-border-input: rgba(8, 145, 178, 0.18);
+  --karbon-border-input-focus: rgba(6, 182, 212, 0.5);
+  --karbon-nav-hover-bg: rgba(6, 182, 212, 0.06);
+  --karbon-primary: #06b6d4;
+  --karbon-primary-hover: #0891b2;
+  --karbon-secondary: #2563eb;
+  --karbon-accent: #0891b2;
+  --karbon-danger: #ef4444;
+  --karbon-success: #22c55e;
+  --karbon-warning: #f59e0b;
+  --karbon-info: #06b6d4;
+  --karbon-shadow-sm: 0 1px 2px rgba(8, 51, 68, 0.06);
+  --karbon-shadow-md: 0 4px 6px -1px rgba(8, 51, 68, 0.08);
+  --karbon-shadow-lg: 0 10px 15px -3px rgba(8, 51, 68, 0.08);
+  --karbon-shadow-xl: 0 20px 25px -5px rgba(8, 51, 68, 0.08);
+}

package/src/themes/rose.css

@@ -0,0 +1,55 @@
+/* @karbonjs/ui-core — Rose theme: Soft & elegant, mauve accents, golden highlights */
+
+[data-karbon-theme="rose"][data-theme="dark"] {
+  --karbon-bg: #1a0f18;
+  --karbon-bg-2: #21141f;
+  --karbon-bg-card: #2a1a27;
+  --karbon-bg-input: rgba(255, 255, 255, 0.06);
+  --karbon-text: rgba(253, 242, 248, 0.92);
+  --karbon-text-2: rgba(249, 168, 212, 0.60);
+  --karbon-text-3: rgba(255, 255, 255, 0.30);
+  --karbon-text-4: rgba(255, 255, 255, 0.16);
+  --karbon-border: rgba(236, 72, 153, 0.12);
+  --karbon-border-input: rgba(236, 72, 153, 0.15);
+  --karbon-border-input-focus: rgba(236, 72, 153, 0.5);
+  --karbon-nav-hover-bg: rgba(236, 72, 153, 0.08);
+  --karbon-primary: #ec4899;
+  --karbon-primary-hover: #db2777;
+  --karbon-secondary: #a78bfa;
+  --karbon-accent: #fbbf24;
+  --karbon-danger: #ef4444;
+  --karbon-success: #34d399;
+  --karbon-warning: #fbbf24;
+  --karbon-info: #f9a8d4;
+  --karbon-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --karbon-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
+  --karbon-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
+  --karbon-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
+}
+
+[data-karbon-theme="rose"][data-theme="light"] {
+  --karbon-bg: #fdf2f8;
+  --karbon-bg-2: #fce7f3;
+  --karbon-bg-card: #ffffff;
+  --karbon-bg-input: #ffffff;
+  --karbon-text: #500724;
+  --karbon-text-2: #9d174d;
+  --karbon-text-3: #f9a8d4;
+  --karbon-text-4: #fbcfe8;
+  --karbon-border: rgba(219, 39, 119, 0.12);
+  --karbon-border-input: rgba(219, 39, 119, 0.18);
+  --karbon-border-input-focus: rgba(236, 72, 153, 0.5);
+  --karbon-nav-hover-bg: rgba(236, 72, 153, 0.06);
+  --karbon-primary: #ec4899;
+  --karbon-primary-hover: #db2777;
+  --karbon-secondary: #7c3aed;
+  --karbon-accent: #d97706;
+  --karbon-danger: #ef4444;
+  --karbon-success: #22c55e;
+  --karbon-warning: #f59e0b;
+  --karbon-info: #ec4899;
+  --karbon-shadow-sm: 0 1px 2px rgba(80, 7, 36, 0.06);
+  --karbon-shadow-md: 0 4px 6px -1px rgba(80, 7, 36, 0.08);
+  --karbon-shadow-lg: 0 10px 15px -3px rgba(80, 7, 36, 0.08);
+  --karbon-shadow-xl: 0 20px 25px -5px rgba(80, 7, 36, 0.08);
+}

package/src/themes/sunset.css

@@ -0,0 +1,55 @@
+/* @karbonjs/ui-core — Sunset theme: Warm & cozy, orange/amber accents */
+
+[data-karbon-theme="sunset"][data-theme="dark"] {
+  --karbon-bg: #1c1412;
+  --karbon-bg-2: #231a16;
+  --karbon-bg-card: #2a1f1a;
+  --karbon-bg-input: rgba(255, 255, 255, 0.06);
+  --karbon-text: rgba(255, 245, 235, 0.92);
+  --karbon-text-2: rgba(253, 186, 116, 0.65);
+  --karbon-text-3: rgba(255, 255, 255, 0.30);
+  --karbon-text-4: rgba(255, 255, 255, 0.16);
+  --karbon-border: rgba(251, 146, 60, 0.12);
+  --karbon-border-input: rgba(251, 146, 60, 0.15);
+  --karbon-border-input-focus: rgba(249, 115, 22, 0.5);
+  --karbon-nav-hover-bg: rgba(251, 146, 60, 0.08);
+  --karbon-primary: #f97316;
+  --karbon-primary-hover: #ea580c;
+  --karbon-secondary: #f59e0b;
+  --karbon-accent: #fbbf24;
+  --karbon-danger: #ef4444;
+  --karbon-success: #22c55e;
+  --karbon-warning: #f59e0b;
+  --karbon-info: #fb923c;
+  --karbon-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --karbon-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
+  --karbon-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
+  --karbon-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
+}
+
+[data-karbon-theme="sunset"][data-theme="light"] {
+  --karbon-bg: #fffbf5;
+  --karbon-bg-2: #fff7ed;
+  --karbon-bg-card: #ffffff;
+  --karbon-bg-input: #ffffff;
+  --karbon-text: #431407;
+  --karbon-text-2: #9a3412;
+  --karbon-text-3: #fdba74;
+  --karbon-text-4: #fed7aa;
+  --karbon-border: rgba(234, 88, 12, 0.12);
+  --karbon-border-input: rgba(234, 88, 12, 0.18);
+  --karbon-border-input-focus: rgba(249, 115, 22, 0.5);
+  --karbon-nav-hover-bg: rgba(249, 115, 22, 0.06);
+  --karbon-primary: #f97316;
+  --karbon-primary-hover: #ea580c;
+  --karbon-secondary: #d97706;
+  --karbon-accent: #f59e0b;
+  --karbon-danger: #ef4444;
+  --karbon-success: #22c55e;
+  --karbon-warning: #f59e0b;
+  --karbon-info: #f97316;
+  --karbon-shadow-sm: 0 1px 2px rgba(154, 52, 18, 0.06);
+  --karbon-shadow-md: 0 4px 6px -1px rgba(154, 52, 18, 0.08);
+  --karbon-shadow-lg: 0 10px 15px -3px rgba(154, 52, 18, 0.08);
+  --karbon-shadow-xl: 0 20px 25px -5px rgba(154, 52, 18, 0.08);
+}