@duskmoon-dev/core 1.7.0 → 1.8.0

package/README.md

@@ -33,7 +33,9 @@ pnpm add @duskmoon-dev/core tailwindcss@^4.0.0
 
 ## Quick Start
 
-### 1. Import the plugin in your CSS
+### 1. Add DuskMoonUI to your CSS
+
+#### Option A: CSS `@import` (recommended)
 
 ```css
 /* src/styles.css */
@@ -41,6 +43,16 @@ pnpm add @duskmoon-dev/core tailwindcss@^4.0.0
 @import "@duskmoon-dev/core";
 ```
 
+#### Option B: Tailwind `@plugin` directive
+
+```css
+/* src/styles.css */
+@import "tailwindcss";
+@plugin "@duskmoon-dev/core/plugin";
+```
+
+The `@plugin` approach registers Material Design 3 color tokens directly into Tailwind's theme, enabling utility classes like `bg-primary`, `text-on-surface`, etc. Use this when you need Tailwind-aware color utilities alongside the component styles.
+
 ### 2. Add the theme attribute to your HTML
 
 ```html

package/dist/index.css

@@ -400,7 +400,7 @@ html {
 /* Built-in themes */
 /**
  * Built-in themes
- * Theme definitions for sunshine (light) and moonlight (dark)
+ * Theme definitions for all built-in themes
  */
 
 /**
@@ -908,6 +908,444 @@ html {
 }
 
 
+/**
+ * Ocean Theme - Dark Mode
+ * A deep, calming dark theme inspired by ocean depths
+ * Uses OKLCH format: "oklch(L% C H)"
+ */
+
+[data-theme="ocean"] {
+  color-scheme: dark;
+
+  /* ============================================
+   * BRAND COLORS
+   * ============================================ */
+
+  /* Primary Color Family - Deep Cyan */
+  --color-primary: oklch(72% 0.12 210);
+  --color-primary-content: oklch(15% 0.02 210);
+  --color-primary-container: oklch(30% 0.08 210);
+  --color-on-primary-container: oklch(90% 0.04 210);
+
+  /* Secondary Color Family - Aquamarine */
+  --color-secondary: oklch(75% 0.10 175);
+  --color-secondary-content: oklch(15% 0.02 175);
+  --color-secondary-container: oklch(28% 0.06 175);
+  --color-on-secondary-container: oklch(90% 0.04 175);
+
+  /* Tertiary Color Family - Lavender */
+  --color-tertiary: oklch(72% 0.10 280);
+  --color-tertiary-content: oklch(15% 0.02 280);
+  --color-tertiary-container: oklch(28% 0.06 280);
+  --color-on-tertiary-container: oklch(90% 0.04 280);
+
+  /* ============================================
+   * SURFACE COLORS
+   * ============================================ */
+
+  --color-surface: oklch(16% 0.02 220);
+  --color-surface-dim: oklch(10% 0.015 220);
+  --color-surface-bright: oklch(24% 0.025 220);
+  --color-surface-container-lowest: oklch(8% 0.01 220);
+  --color-surface-container-low: oklch(12% 0.015 220);
+  --color-surface-container: oklch(16% 0.02 220);
+  --color-surface-container-high: oklch(20% 0.022 220);
+  --color-surface-container-highest: oklch(24% 0.025 220);
+  --color-on-surface: oklch(90% 0.01 210);
+  --color-on-surface-variant: oklch(70% 0.015 210);
+
+  /* ============================================
+   * SEMANTIC COLORS
+   * ============================================ */
+
+  /* Info - Light Blue */
+  --color-info: oklch(70% 0.12 230);
+  --color-info-content: oklch(15% 0.03 230);
+  --color-info-container: oklch(28% 0.06 230);
+  --color-on-info-container: oklch(88% 0.04 230);
+
+  /* Success - Sea Green */
+  --color-success: oklch(72% 0.15 155);
+  --color-success-content: oklch(15% 0.03 155);
+  --color-success-container: oklch(28% 0.06 155);
+  --color-on-success-container: oklch(88% 0.04 155);
+
+  /* Warning - Sandy Gold */
+  --color-warning: oklch(75% 0.14 75);
+  --color-warning-content: oklch(18% 0.04 75);
+  --color-warning-container: oklch(30% 0.06 75);
+  --color-on-warning-container: oklch(88% 0.05 75);
+
+  /* Error - Coral Red */
+  --color-error: oklch(70% 0.16 20);
+  --color-error-content: oklch(15% 0.03 20);
+  --color-error-container: oklch(28% 0.06 20);
+  --color-on-error-container: oklch(88% 0.05 20);
+
+  /* ============================================
+   * NEUTRAL COLORS (Base Scale)
+   * ============================================ */
+
+  --color-base-100: oklch(16% 0.02 220);
+  --color-base-200: oklch(14% 0.015 220);
+  --color-base-300: oklch(10% 0.01 220);
+  --color-base-400: oklch(30% 0.02 220);
+  --color-base-500: oklch(40% 0.02 220);
+  --color-base-600: oklch(55% 0.015 220);
+  --color-base-700: oklch(70% 0.01 220);
+  --color-base-800: oklch(82% 0.01 220);
+  --color-base-900: oklch(92% 0.005 220);
+  --color-base-content: oklch(90% 0.01 210);
+
+  /* ============================================
+   * OUTLINE COLORS
+   * ============================================ */
+
+  --color-outline: oklch(45% 0.02 220);
+  --color-outline-variant: oklch(32% 0.015 220);
+
+  /* ============================================
+   * ACCENT COLORS
+   * ============================================ */
+
+  --color-accent: oklch(70% 0.12 190);
+  --color-accent-content: oklch(15% 0.03 190);
+
+  /* ============================================
+   * NEUTRAL COLORS
+   * ============================================ */
+
+  --color-neutral: oklch(90% 0.01 210);
+  --color-neutral-content: oklch(16% 0.02 220);
+  --color-neutral-variant: oklch(50% 0.02 220);
+
+  /* ============================================
+   * SHAPE & DEPTH
+   * ============================================ */
+
+  --radius-selector: 0rem;
+  --radius-field: 0.5rem;
+  --radius-box: 1.5rem;
+  --size-selector: 0.1875rem;
+  --size-field: 0.1875rem;
+  --border: 0.5px;
+  --depth: 1;
+  --noise: 0.5;
+
+  /* ============================================
+   * SURFACE VARIANT
+   * ============================================ */
+
+  --color-surface-variant: oklch(22% 0.025 220);
+
+  /* ============================================
+   * INVERSE COLORS
+   * ============================================ */
+
+  --color-inverse-surface: oklch(90% 0.01 210);
+  --color-inverse-on-surface: oklch(16% 0.02 220);
+  --color-inverse-primary: oklch(45% 0.12 210);
+
+  /* ============================================
+   * SHADOW & SCRIM
+   * ============================================ */
+
+  --color-shadow: oklch(0% 0 0);
+  --color-scrim: oklch(0% 0 0 / 60%);
+}
+
+/**
+ * Forest Theme - Light Mode
+ * A natural, earthy light theme inspired by woodland environments
+ * Uses OKLCH format: "oklch(L% C H)"
+ */
+
+[data-theme="forest"] {
+  color-scheme: light;
+
+  /* ============================================
+   * BRAND COLORS
+   * ============================================ */
+
+  /* Primary Color Family - Forest Green */
+  --color-primary: oklch(50% 0.14 150);
+  --color-primary-content: oklch(98% 0.01 150);
+  --color-primary-container: oklch(92% 0.04 150);
+  --color-on-primary-container: oklch(22% 0.06 150);
+
+  /* Secondary Color Family - Warm Brown */
+  --color-secondary: oklch(52% 0.10 55);
+  --color-secondary-content: oklch(98% 0.01 55);
+  --color-secondary-container: oklch(92% 0.03 55);
+  --color-on-secondary-container: oklch(24% 0.05 55);
+
+  /* Tertiary Color Family - Sage */
+  --color-tertiary: oklch(58% 0.08 175);
+  --color-tertiary-content: oklch(98% 0.01 175);
+  --color-tertiary-container: oklch(93% 0.03 175);
+  --color-on-tertiary-container: oklch(22% 0.04 175);
+
+  /* ============================================
+   * SURFACE COLORS
+   * ============================================ */
+
+  --color-surface: oklch(99% 0.005 100);
+  --color-surface-dim: oklch(95% 0.01 100);
+  --color-surface-bright: oklch(100% 0 0);
+  --color-surface-container-lowest: oklch(100% 0 0);
+  --color-surface-container-low: oklch(98% 0.008 100);
+  --color-surface-container: oklch(96% 0.01 100);
+  --color-surface-container-high: oklch(94% 0.012 100);
+  --color-surface-container-highest: oklch(92% 0.015 100);
+  --color-on-surface: oklch(22% 0.02 100);
+  --color-on-surface-variant: oklch(42% 0.02 100);
+
+  /* ============================================
+   * SEMANTIC COLORS
+   * ============================================ */
+
+  /* Info - Forest Blue */
+  --color-info: oklch(48% 0.12 240);
+  --color-info-content: oklch(98% 0.01 240);
+  --color-info-container: oklch(94% 0.03 240);
+  --color-on-info-container: oklch(28% 0.06 240);
+
+  /* Success - Moss Green */
+  --color-success: oklch(55% 0.16 145);
+  --color-success-content: oklch(98% 0.01 145);
+  --color-success-container: oklch(93% 0.04 145);
+  --color-on-success-container: oklch(25% 0.07 145);
+
+  /* Warning - Autumn Gold */
+  --color-warning: oklch(62% 0.16 65);
+  --color-warning-content: oklch(18% 0.04 65);
+  --color-warning-container: oklch(93% 0.04 65);
+  --color-on-warning-container: oklch(32% 0.08 65);
+
+  /* Error - Berry Red */
+  --color-error: oklch(52% 0.18 15);
+  --color-error-content: oklch(98% 0.01 15);
+  --color-error-container: oklch(93% 0.04 15);
+  --color-on-error-container: oklch(28% 0.08 15);
+
+  /* ============================================
+   * NEUTRAL COLORS (Base Scale)
+   * ============================================ */
+
+  --color-base-100: oklch(99% 0.005 100);
+  --color-base-200: oklch(92% 0.01 100);
+  --color-base-300: oklch(80% 0.01 100);
+  --color-base-400: oklch(60% 0.01 100);
+  --color-base-500: oklch(48% 0.01 100);
+  --color-base-600: oklch(38% 0.01 100);
+  --color-base-700: oklch(28% 0.01 100);
+  --color-base-800: oklch(20% 0.008 100);
+  --color-base-900: oklch(14% 0.005 100);
+  --color-base-content: oklch(14% 0.01 100);
+
+  /* ============================================
+   * OUTLINE COLORS
+   * ============================================ */
+
+  --color-outline: oklch(60% 0.015 100);
+  --color-outline-variant: oklch(78% 0.01 100);
+
+  /* ============================================
+   * ACCENT COLORS
+   * ============================================ */
+
+  --color-accent: oklch(60% 0.12 85);
+  --color-accent-content: oklch(20% 0.04 85);
+
+  /* ============================================
+   * NEUTRAL COLORS
+   * ============================================ */
+
+  --color-neutral: oklch(14% 0.01 100);
+  --color-neutral-content: oklch(92% 0.01 100);
+  --color-neutral-variant: oklch(48% 0.015 100);
+
+  /* ============================================
+   * SHAPE & DEPTH
+   * ============================================ */
+
+  --radius-selector: 0.125rem;
+  --radius-field: 0.375rem;
+  --radius-box: 1rem;
+  --size-selector: 0.1875rem;
+  --size-field: 0.1875rem;
+  --border: 1px;
+  --depth: 0.5;
+  --noise: 0.8;
+
+  /* ============================================
+   * SURFACE VARIANT
+   * ============================================ */
+
+  --color-surface-variant: oklch(93% 0.02 100);
+
+  /* ============================================
+   * INVERSE COLORS
+   * ============================================ */
+
+  --color-inverse-surface: oklch(22% 0.02 100);
+  --color-inverse-on-surface: oklch(95% 0.01 100);
+  --color-inverse-primary: oklch(75% 0.10 150);
+
+  /* ============================================
+   * SHADOW & SCRIM
+   * ============================================ */
+
+  --color-shadow: oklch(0% 0 0);
+  --color-scrim: oklch(0% 0 0 / 40%);
+}
+
+/**
+ * Sunset Theme - Light Mode
+ * A warm, vibrant theme inspired by golden hour and dusk skies
+ * Uses OKLCH format: "oklch(L% C H)"
+ */
+
+[data-theme="sunset"] {
+  color-scheme: light;
+
+  /* ============================================
+   * BRAND COLORS
+   * ============================================ */
+
+  /* Primary Color Family - Burnt Orange */
+  --color-primary: oklch(58% 0.18 35);
+  --color-primary-content: oklch(98% 0.01 35);
+  --color-primary-container: oklch(92% 0.04 35);
+  --color-on-primary-container: oklch(25% 0.07 35);
+
+  /* Secondary Color Family - Rose */
+  --color-secondary: oklch(58% 0.15 350);
+  --color-secondary-content: oklch(98% 0.01 350);
+  --color-secondary-container: oklch(92% 0.04 350);
+  --color-on-secondary-container: oklch(25% 0.06 350);
+
+  /* Tertiary Color Family - Golden */
+  --color-tertiary: oklch(65% 0.14 75);
+  --color-tertiary-content: oklch(18% 0.04 75);
+  --color-tertiary-container: oklch(93% 0.04 75);
+  --color-on-tertiary-container: oklch(28% 0.06 75);
+
+  /* ============================================
+   * SURFACE COLORS
+   * ============================================ */
+
+  --color-surface: oklch(99% 0.008 50);
+  --color-surface-dim: oklch(95% 0.012 50);
+  --color-surface-bright: oklch(100% 0 0);
+  --color-surface-container-lowest: oklch(100% 0 0);
+  --color-surface-container-low: oklch(98% 0.01 50);
+  --color-surface-container: oklch(96% 0.012 50);
+  --color-surface-container-high: oklch(94% 0.015 50);
+  --color-surface-container-highest: oklch(92% 0.018 50);
+  --color-on-surface: oklch(22% 0.02 30);
+  --color-on-surface-variant: oklch(42% 0.02 30);
+
+  /* ============================================
+   * SEMANTIC COLORS
+   * ============================================ */
+
+  /* Info - Dusty Blue */
+  --color-info: oklch(50% 0.10 245);
+  --color-info-content: oklch(98% 0.01 245);
+  --color-info-container: oklch(94% 0.03 245);
+  --color-on-info-container: oklch(28% 0.05 245);
+
+  /* Success - Olive Green */
+  --color-success: oklch(58% 0.14 140);
+  --color-success-content: oklch(98% 0.01 140);
+  --color-success-container: oklch(93% 0.04 140);
+  --color-on-success-container: oklch(26% 0.06 140);
+
+  /* Warning - Deep Amber */
+  --color-warning: oklch(65% 0.18 60);
+  --color-warning-content: oklch(18% 0.05 60);
+  --color-warning-container: oklch(93% 0.05 60);
+  --color-on-warning-container: oklch(32% 0.08 60);
+
+  /* Error - Crimson */
+  --color-error: oklch(52% 0.20 20);
+  --color-error-content: oklch(98% 0.01 20);
+  --color-error-container: oklch(93% 0.04 20);
+  --color-on-error-container: oklch(28% 0.08 20);
+
+  /* ============================================
+   * NEUTRAL COLORS (Base Scale)
+   * ============================================ */
+
+  --color-base-100: oklch(99% 0.008 50);
+  --color-base-200: oklch(92% 0.012 50);
+  --color-base-300: oklch(80% 0.01 50);
+  --color-base-400: oklch(60% 0.01 50);
+  --color-base-500: oklch(48% 0.01 50);
+  --color-base-600: oklch(38% 0.008 50);
+  --color-base-700: oklch(28% 0.008 50);
+  --color-base-800: oklch(20% 0.005 50);
+  --color-base-900: oklch(14% 0.003 50);
+  --color-base-content: oklch(14% 0.01 30);
+
+  /* ============================================
+   * OUTLINE COLORS
+   * ============================================ */
+
+  --color-outline: oklch(60% 0.015 40);
+  --color-outline-variant: oklch(80% 0.01 40);
+
+  /* ============================================
+   * ACCENT COLORS
+   * ============================================ */
+
+  --color-accent: oklch(62% 0.14 310);
+  --color-accent-content: oklch(98% 0.01 310);
+
+  /* ============================================
+   * NEUTRAL COLORS
+   * ============================================ */
+
+  --color-neutral: oklch(14% 0.01 30);
+  --color-neutral-content: oklch(92% 0.01 50);
+  --color-neutral-variant: oklch(48% 0.015 40);
+
+  /* ============================================
+   * SHAPE & DEPTH
+   * ============================================ */
+
+  --radius-selector: 0rem;
+  --radius-field: 0.5rem;
+  --radius-box: 1.5rem;
+  --size-selector: 0.1875rem;
+  --size-field: 0.1875rem;
+  --border: 0.5px;
+  --depth: 1;
+  --noise: 0.7;
+
+  /* ============================================
+   * SURFACE VARIANT
+   * ============================================ */
+
+  --color-surface-variant: oklch(93% 0.02 50);
+
+  /* ============================================
+   * INVERSE COLORS
+   * ============================================ */
+
+  --color-inverse-surface: oklch(22% 0.02 30);
+  --color-inverse-on-surface: oklch(95% 0.01 50);
+  --color-inverse-primary: oklch(75% 0.14 35);
+
+  /* ============================================
+   * SHADOW & SCRIM
+   * ============================================ */
+
+  --color-shadow: oklch(0% 0 0);
+  --color-scrim: oklch(0% 0 0 / 45%);
+}
+
 
 
 /* Component styles */

package/dist/themes/forest.css

@@ -0,0 +1,145 @@
+/**
+ * Forest Theme - Light Mode
+ * A natural, earthy light theme inspired by woodland environments
+ * Uses OKLCH format: "oklch(L% C H)"
+ */
+
+[data-theme="forest"] {
+  color-scheme: light;
+
+  /* ============================================
+   * BRAND COLORS
+   * ============================================ */
+
+  /* Primary Color Family - Forest Green */
+  --color-primary: oklch(50% 0.14 150);
+  --color-primary-content: oklch(98% 0.01 150);
+  --color-primary-container: oklch(92% 0.04 150);
+  --color-on-primary-container: oklch(22% 0.06 150);
+
+  /* Secondary Color Family - Warm Brown */
+  --color-secondary: oklch(52% 0.10 55);
+  --color-secondary-content: oklch(98% 0.01 55);
+  --color-secondary-container: oklch(92% 0.03 55);
+  --color-on-secondary-container: oklch(24% 0.05 55);
+
+  /* Tertiary Color Family - Sage */
+  --color-tertiary: oklch(58% 0.08 175);
+  --color-tertiary-content: oklch(98% 0.01 175);
+  --color-tertiary-container: oklch(93% 0.03 175);
+  --color-on-tertiary-container: oklch(22% 0.04 175);
+
+  /* ============================================
+   * SURFACE COLORS
+   * ============================================ */
+
+  --color-surface: oklch(99% 0.005 100);
+  --color-surface-dim: oklch(95% 0.01 100);
+  --color-surface-bright: oklch(100% 0 0);
+  --color-surface-container-lowest: oklch(100% 0 0);
+  --color-surface-container-low: oklch(98% 0.008 100);
+  --color-surface-container: oklch(96% 0.01 100);
+  --color-surface-container-high: oklch(94% 0.012 100);
+  --color-surface-container-highest: oklch(92% 0.015 100);
+  --color-on-surface: oklch(22% 0.02 100);
+  --color-on-surface-variant: oklch(42% 0.02 100);
+
+  /* ============================================
+   * SEMANTIC COLORS
+   * ============================================ */
+
+  /* Info - Forest Blue */
+  --color-info: oklch(48% 0.12 240);
+  --color-info-content: oklch(98% 0.01 240);
+  --color-info-container: oklch(94% 0.03 240);
+  --color-on-info-container: oklch(28% 0.06 240);
+
+  /* Success - Moss Green */
+  --color-success: oklch(55% 0.16 145);
+  --color-success-content: oklch(98% 0.01 145);
+  --color-success-container: oklch(93% 0.04 145);
+  --color-on-success-container: oklch(25% 0.07 145);
+
+  /* Warning - Autumn Gold */
+  --color-warning: oklch(62% 0.16 65);
+  --color-warning-content: oklch(18% 0.04 65);
+  --color-warning-container: oklch(93% 0.04 65);
+  --color-on-warning-container: oklch(32% 0.08 65);
+
+  /* Error - Berry Red */
+  --color-error: oklch(52% 0.18 15);
+  --color-error-content: oklch(98% 0.01 15);
+  --color-error-container: oklch(93% 0.04 15);
+  --color-on-error-container: oklch(28% 0.08 15);
+
+  /* ============================================
+   * NEUTRAL COLORS (Base Scale)
+   * ============================================ */
+
+  --color-base-100: oklch(99% 0.005 100);
+  --color-base-200: oklch(92% 0.01 100);
+  --color-base-300: oklch(80% 0.01 100);
+  --color-base-400: oklch(60% 0.01 100);
+  --color-base-500: oklch(48% 0.01 100);
+  --color-base-600: oklch(38% 0.01 100);
+  --color-base-700: oklch(28% 0.01 100);
+  --color-base-800: oklch(20% 0.008 100);
+  --color-base-900: oklch(14% 0.005 100);
+  --color-base-content: oklch(14% 0.01 100);
+
+  /* ============================================
+   * OUTLINE COLORS
+   * ============================================ */
+
+  --color-outline: oklch(60% 0.015 100);
+  --color-outline-variant: oklch(78% 0.01 100);
+
+  /* ============================================
+   * ACCENT COLORS
+   * ============================================ */
+
+  --color-accent: oklch(60% 0.12 85);
+  --color-accent-content: oklch(20% 0.04 85);
+
+  /* ============================================
+   * NEUTRAL COLORS
+   * ============================================ */
+
+  --color-neutral: oklch(14% 0.01 100);
+  --color-neutral-content: oklch(92% 0.01 100);
+  --color-neutral-variant: oklch(48% 0.015 100);
+
+  /* ============================================
+   * SHAPE & DEPTH
+   * ============================================ */
+
+  --radius-selector: 0.125rem;
+  --radius-field: 0.375rem;
+  --radius-box: 1rem;
+  --size-selector: 0.1875rem;
+  --size-field: 0.1875rem;
+  --border: 1px;
+  --depth: 0.5;
+  --noise: 0.8;
+
+  /* ============================================
+   * SURFACE VARIANT
+   * ============================================ */
+
+  --color-surface-variant: oklch(93% 0.02 100);
+
+  /* ============================================
+   * INVERSE COLORS
+   * ============================================ */
+
+  --color-inverse-surface: oklch(22% 0.02 100);
+  --color-inverse-on-surface: oklch(95% 0.01 100);
+  --color-inverse-primary: oklch(75% 0.10 150);
+
+  /* ============================================
+   * SHADOW & SCRIM
+   * ============================================ */
+
+  --color-shadow: oklch(0% 0 0);
+  --color-scrim: oklch(0% 0 0 / 40%);
+}

package/dist/themes/ocean.css

@@ -0,0 +1,145 @@
+/**
+ * Ocean Theme - Dark Mode
+ * A deep, calming dark theme inspired by ocean depths
+ * Uses OKLCH format: "oklch(L% C H)"
+ */
+
+[data-theme="ocean"] {
+  color-scheme: dark;
+
+  /* ============================================
+   * BRAND COLORS
+   * ============================================ */
+
+  /* Primary Color Family - Deep Cyan */
+  --color-primary: oklch(72% 0.12 210);
+  --color-primary-content: oklch(15% 0.02 210);
+  --color-primary-container: oklch(30% 0.08 210);
+  --color-on-primary-container: oklch(90% 0.04 210);
+
+  /* Secondary Color Family - Aquamarine */
+  --color-secondary: oklch(75% 0.10 175);
+  --color-secondary-content: oklch(15% 0.02 175);
+  --color-secondary-container: oklch(28% 0.06 175);
+  --color-on-secondary-container: oklch(90% 0.04 175);
+
+  /* Tertiary Color Family - Lavender */
+  --color-tertiary: oklch(72% 0.10 280);
+  --color-tertiary-content: oklch(15% 0.02 280);
+  --color-tertiary-container: oklch(28% 0.06 280);
+  --color-on-tertiary-container: oklch(90% 0.04 280);
+
+  /* ============================================
+   * SURFACE COLORS
+   * ============================================ */
+
+  --color-surface: oklch(16% 0.02 220);
+  --color-surface-dim: oklch(10% 0.015 220);
+  --color-surface-bright: oklch(24% 0.025 220);
+  --color-surface-container-lowest: oklch(8% 0.01 220);
+  --color-surface-container-low: oklch(12% 0.015 220);
+  --color-surface-container: oklch(16% 0.02 220);
+  --color-surface-container-high: oklch(20% 0.022 220);
+  --color-surface-container-highest: oklch(24% 0.025 220);
+  --color-on-surface: oklch(90% 0.01 210);
+  --color-on-surface-variant: oklch(70% 0.015 210);
+
+  /* ============================================
+   * SEMANTIC COLORS
+   * ============================================ */
+
+  /* Info - Light Blue */
+  --color-info: oklch(70% 0.12 230);
+  --color-info-content: oklch(15% 0.03 230);
+  --color-info-container: oklch(28% 0.06 230);
+  --color-on-info-container: oklch(88% 0.04 230);
+
+  /* Success - Sea Green */
+  --color-success: oklch(72% 0.15 155);
+  --color-success-content: oklch(15% 0.03 155);
+  --color-success-container: oklch(28% 0.06 155);
+  --color-on-success-container: oklch(88% 0.04 155);
+
+  /* Warning - Sandy Gold */
+  --color-warning: oklch(75% 0.14 75);
+  --color-warning-content: oklch(18% 0.04 75);
+  --color-warning-container: oklch(30% 0.06 75);
+  --color-on-warning-container: oklch(88% 0.05 75);
+
+  /* Error - Coral Red */
+  --color-error: oklch(70% 0.16 20);
+  --color-error-content: oklch(15% 0.03 20);
+  --color-error-container: oklch(28% 0.06 20);
+  --color-on-error-container: oklch(88% 0.05 20);
+
+  /* ============================================
+   * NEUTRAL COLORS (Base Scale)
+   * ============================================ */
+
+  --color-base-100: oklch(16% 0.02 220);
+  --color-base-200: oklch(14% 0.015 220);
+  --color-base-300: oklch(10% 0.01 220);
+  --color-base-400: oklch(30% 0.02 220);
+  --color-base-500: oklch(40% 0.02 220);
+  --color-base-600: oklch(55% 0.015 220);
+  --color-base-700: oklch(70% 0.01 220);
+  --color-base-800: oklch(82% 0.01 220);
+  --color-base-900: oklch(92% 0.005 220);
+  --color-base-content: oklch(90% 0.01 210);
+
+  /* ============================================
+   * OUTLINE COLORS
+   * ============================================ */
+
+  --color-outline: oklch(45% 0.02 220);
+  --color-outline-variant: oklch(32% 0.015 220);
+
+  /* ============================================
+   * ACCENT COLORS
+   * ============================================ */
+
+  --color-accent: oklch(70% 0.12 190);
+  --color-accent-content: oklch(15% 0.03 190);
+
+  /* ============================================
+   * NEUTRAL COLORS
+   * ============================================ */
+
+  --color-neutral: oklch(90% 0.01 210);
+  --color-neutral-content: oklch(16% 0.02 220);
+  --color-neutral-variant: oklch(50% 0.02 220);
+
+  /* ============================================
+   * SHAPE & DEPTH
+   * ============================================ */
+
+  --radius-selector: 0rem;
+  --radius-field: 0.5rem;
+  --radius-box: 1.5rem;
+  --size-selector: 0.1875rem;
+  --size-field: 0.1875rem;
+  --border: 0.5px;
+  --depth: 1;
+  --noise: 0.5;
+
+  /* ============================================
+   * SURFACE VARIANT
+   * ============================================ */
+
+  --color-surface-variant: oklch(22% 0.025 220);
+
+  /* ============================================
+   * INVERSE COLORS
+   * ============================================ */
+
+  --color-inverse-surface: oklch(90% 0.01 210);
+  --color-inverse-on-surface: oklch(16% 0.02 220);
+  --color-inverse-primary: oklch(45% 0.12 210);
+
+  /* ============================================
+   * SHADOW & SCRIM
+   * ============================================ */
+
+  --color-shadow: oklch(0% 0 0);
+  --color-scrim: oklch(0% 0 0 / 60%);
+}

package/dist/themes/sunset.css

@@ -0,0 +1,145 @@
+/**
+ * Sunset Theme - Light Mode
+ * A warm, vibrant theme inspired by golden hour and dusk skies
+ * Uses OKLCH format: "oklch(L% C H)"
+ */
+
+[data-theme="sunset"] {
+  color-scheme: light;
+
+  /* ============================================
+   * BRAND COLORS
+   * ============================================ */
+
+  /* Primary Color Family - Burnt Orange */
+  --color-primary: oklch(58% 0.18 35);
+  --color-primary-content: oklch(98% 0.01 35);
+  --color-primary-container: oklch(92% 0.04 35);
+  --color-on-primary-container: oklch(25% 0.07 35);
+
+  /* Secondary Color Family - Rose */
+  --color-secondary: oklch(58% 0.15 350);
+  --color-secondary-content: oklch(98% 0.01 350);
+  --color-secondary-container: oklch(92% 0.04 350);
+  --color-on-secondary-container: oklch(25% 0.06 350);
+
+  /* Tertiary Color Family - Golden */
+  --color-tertiary: oklch(65% 0.14 75);
+  --color-tertiary-content: oklch(18% 0.04 75);
+  --color-tertiary-container: oklch(93% 0.04 75);
+  --color-on-tertiary-container: oklch(28% 0.06 75);
+
+  /* ============================================
+   * SURFACE COLORS
+   * ============================================ */
+
+  --color-surface: oklch(99% 0.008 50);
+  --color-surface-dim: oklch(95% 0.012 50);
+  --color-surface-bright: oklch(100% 0 0);
+  --color-surface-container-lowest: oklch(100% 0 0);
+  --color-surface-container-low: oklch(98% 0.01 50);
+  --color-surface-container: oklch(96% 0.012 50);
+  --color-surface-container-high: oklch(94% 0.015 50);
+  --color-surface-container-highest: oklch(92% 0.018 50);
+  --color-on-surface: oklch(22% 0.02 30);
+  --color-on-surface-variant: oklch(42% 0.02 30);
+
+  /* ============================================
+   * SEMANTIC COLORS
+   * ============================================ */
+
+  /* Info - Dusty Blue */
+  --color-info: oklch(50% 0.10 245);
+  --color-info-content: oklch(98% 0.01 245);
+  --color-info-container: oklch(94% 0.03 245);
+  --color-on-info-container: oklch(28% 0.05 245);
+
+  /* Success - Olive Green */
+  --color-success: oklch(58% 0.14 140);
+  --color-success-content: oklch(98% 0.01 140);
+  --color-success-container: oklch(93% 0.04 140);
+  --color-on-success-container: oklch(26% 0.06 140);
+
+  /* Warning - Deep Amber */
+  --color-warning: oklch(65% 0.18 60);
+  --color-warning-content: oklch(18% 0.05 60);
+  --color-warning-container: oklch(93% 0.05 60);
+  --color-on-warning-container: oklch(32% 0.08 60);
+
+  /* Error - Crimson */
+  --color-error: oklch(52% 0.20 20);
+  --color-error-content: oklch(98% 0.01 20);
+  --color-error-container: oklch(93% 0.04 20);
+  --color-on-error-container: oklch(28% 0.08 20);
+
+  /* ============================================
+   * NEUTRAL COLORS (Base Scale)
+   * ============================================ */
+
+  --color-base-100: oklch(99% 0.008 50);
+  --color-base-200: oklch(92% 0.012 50);
+  --color-base-300: oklch(80% 0.01 50);
+  --color-base-400: oklch(60% 0.01 50);
+  --color-base-500: oklch(48% 0.01 50);
+  --color-base-600: oklch(38% 0.008 50);
+  --color-base-700: oklch(28% 0.008 50);
+  --color-base-800: oklch(20% 0.005 50);
+  --color-base-900: oklch(14% 0.003 50);
+  --color-base-content: oklch(14% 0.01 30);
+
+  /* ============================================
+   * OUTLINE COLORS
+   * ============================================ */
+
+  --color-outline: oklch(60% 0.015 40);
+  --color-outline-variant: oklch(80% 0.01 40);
+
+  /* ============================================
+   * ACCENT COLORS
+   * ============================================ */
+
+  --color-accent: oklch(62% 0.14 310);
+  --color-accent-content: oklch(98% 0.01 310);
+
+  /* ============================================
+   * NEUTRAL COLORS
+   * ============================================ */
+
+  --color-neutral: oklch(14% 0.01 30);
+  --color-neutral-content: oklch(92% 0.01 50);
+  --color-neutral-variant: oklch(48% 0.015 40);
+
+  /* ============================================
+   * SHAPE & DEPTH
+   * ============================================ */
+
+  --radius-selector: 0rem;
+  --radius-field: 0.5rem;
+  --radius-box: 1.5rem;
+  --size-selector: 0.1875rem;
+  --size-field: 0.1875rem;
+  --border: 0.5px;
+  --depth: 1;
+  --noise: 0.7;
+
+  /* ============================================
+   * SURFACE VARIANT
+   * ============================================ */
+
+  --color-surface-variant: oklch(93% 0.02 50);
+
+  /* ============================================
+   * INVERSE COLORS
+   * ============================================ */
+
+  --color-inverse-surface: oklch(22% 0.02 30);
+  --color-inverse-on-surface: oklch(95% 0.01 50);
+  --color-inverse-primary: oklch(75% 0.14 35);
+
+  /* ============================================
+   * SHADOW & SCRIM
+   * ============================================ */
+
+  --color-shadow: oklch(0% 0 0);
+  --color-scrim: oklch(0% 0 0 / 45%);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duskmoon-dev/core",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "DuskMoonUI - Tailwind CSS v4 plugin with Material Design 3 color system and component styles",
   "type": "module",
   "main": "./dist/index.css",
@@ -22,6 +22,15 @@
     "./themes/moonlight": {
       "style": "./dist/themes/moonlight.css"
     },
+    "./themes/ocean": {
+      "style": "./dist/themes/ocean.css"
+    },
+    "./themes/forest": {
+      "style": "./dist/themes/forest.css"
+    },
+    "./themes/sunset": {
+      "style": "./dist/themes/sunset.css"
+    },
     "./components": {
       "style": "./dist/components/index.css"
     },