@duskmoon-dev/core 1.16.1 → 1.17.1

package/dist/esm/components/alert.js

@@ -120,6 +120,24 @@ export const css = `/**
     border-color: transparent;
   }
 
+  .alert-accent {
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+    border-color: transparent;
+  }
+
+  .alert-neutral {
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+    border-color: transparent;
+  }
+
+  .alert-base {
+    background-color: var(--color-base-200);
+    color: var(--color-base-content);
+    border-color: transparent;
+  }
+
   /* Filled Variants */
   .alert-filled.alert-info {
     background-color: var(--color-info);
@@ -156,6 +174,21 @@ export const css = `/**
     color: var(--color-tertiary-content);
   }
 
+  .alert-filled.alert-accent {
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+  }
+
+  .alert-filled.alert-neutral {
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+  }
+
+  .alert-filled.alert-base {
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+  }
+
   /* Outlined Variants */
   .alert-outlined {
     background-color: transparent;
@@ -196,6 +229,21 @@ export const css = `/**
     color: var(--color-tertiary);
   }
 
+  .alert-outlined.alert-accent {
+    border-color: var(--color-accent);
+    color: var(--color-accent);
+  }
+
+  .alert-outlined.alert-neutral {
+    border-color: var(--color-neutral);
+    color: var(--color-neutral);
+  }
+
+  .alert-outlined.alert-base {
+    border-color: var(--color-base-content);
+    color: var(--color-base-content);
+  }
+
   /* Ghost Variant */
   .alert-ghost {
     background-color: transparent;
@@ -209,6 +257,9 @@ export const css = `/**
   .alert-ghost.alert-success   { color: var(--color-success); }
   .alert-ghost.alert-warning   { color: var(--color-warning); }
   .alert-ghost.alert-error     { color: var(--color-error); }
+  .alert-ghost.alert-accent    { color: var(--color-accent); }
+  .alert-ghost.alert-neutral   { color: var(--color-neutral); }
+  .alert-ghost.alert-base      { color: var(--color-base-content); }
 
   /* Dismissible */
   .alert-dismissible {

package/dist/esm/components/appbar.js

@@ -381,6 +381,75 @@ export const css = `/**
     opacity: 0.8;
   }
 
+  .appbar-accent {
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+  }
+
+  .appbar-accent .appbar-nav,
+  .appbar-accent .appbar-action,
+  .appbar-accent .appbar-back {
+    color: var(--color-accent-content);
+  }
+
+  .appbar-accent .appbar-nav:hover,
+  .appbar-accent .appbar-action:hover,
+  .appbar-accent .appbar-back:hover {
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+    color: var(--color-accent);
+  }
+
+  .appbar-accent .appbar-subtitle {
+    color: var(--color-accent-content);
+    opacity: 0.8;
+  }
+
+  .appbar-neutral {
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+  }
+
+  .appbar-neutral .appbar-nav,
+  .appbar-neutral .appbar-action,
+  .appbar-neutral .appbar-back {
+    color: var(--color-neutral-content);
+  }
+
+  .appbar-neutral .appbar-nav:hover,
+  .appbar-neutral .appbar-action:hover,
+  .appbar-neutral .appbar-back:hover {
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+    color: var(--color-neutral);
+  }
+
+  .appbar-neutral .appbar-subtitle {
+    color: var(--color-neutral-content);
+    opacity: 0.8;
+  }
+
+  .appbar-base {
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+  }
+
+  .appbar-base .appbar-nav,
+  .appbar-base .appbar-action,
+  .appbar-base .appbar-back {
+    color: var(--color-base-content);
+  }
+
+  .appbar-base .appbar-nav:hover,
+  .appbar-base .appbar-action:hover,
+  .appbar-base .appbar-back:hover {
+    background-color: var(--color-base-200);
+    color: var(--color-base-content);
+  }
+
+  .appbar-base .appbar-subtitle {
+    color: var(--color-base-content);
+    opacity: 0.8;
+  }
+
   .appbar-info {
     background-color: var(--color-info);
     color: var(--color-info-content);

package/dist/esm/components/autocomplete.js

@@ -299,6 +299,27 @@ export const css = `/**
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
   }
 
+  .autocomplete-accent .autocomplete-input {
+    color: var(--color-accent);
+  }
+  .autocomplete-accent .autocomplete-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent);
+  }
+
+  .autocomplete-neutral .autocomplete-input {
+    color: var(--color-neutral);
+  }
+  .autocomplete-neutral .autocomplete-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent);
+  }
+
+  .autocomplete-base .autocomplete-input {
+    color: var(--color-base-content);
+  }
+  .autocomplete-base .autocomplete-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent);
+  }
+
   /* Ghost Variant */
   .autocomplete-ghost .autocomplete-input {
     background-color: transparent;

package/dist/esm/components/avatar.js

@@ -114,6 +114,21 @@ export const css = `/**
     color: var(--color-error-content);
   }
 
+  .avatar-accent {
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+  }
+
+  .avatar-neutral {
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+  }
+
+  .avatar-base {
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+  }
+
   /* Ring */
   .avatar-ring {
     outline: none;

package/dist/esm/components/badge.js

@@ -36,6 +36,21 @@ export const css = `/**
     color: var(--color-tertiary-content);
   }
 
+  .badge-accent {
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+  }
+
+  .badge-neutral {
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+  }
+
+  .badge-base {
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+  }
+
   .badge-info {
     background-color: var(--color-info);
     color: var(--color-info-content);
@@ -77,6 +92,21 @@ export const css = `/**
     border-color: var(--color-tertiary);
   }
 
+  .badge-outline.badge-accent {
+    color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  .badge-outline.badge-neutral {
+    color: var(--color-neutral);
+    border-color: var(--color-neutral);
+  }
+
+  .badge-outline.badge-base {
+    color: var(--color-base-content);
+    border-color: var(--color-base-content);
+  }
+
   .badge-outline.badge-info {
     color: var(--color-info);
     border-color: var(--color-info);
@@ -118,6 +148,21 @@ export const css = `/**
     color: var(--color-on-tertiary-container);
   }
 
+  .badge-soft.badge-accent {
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+  }
+
+  .badge-soft.badge-neutral {
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+  }
+
+  .badge-soft.badge-base {
+    background-color: var(--color-base-200);
+    color: var(--color-base-content);
+  }
+
   .badge-soft.badge-info {
     background-color: var(--color-info-container);
     color: var(--color-on-info-container);

package/dist/esm/components/button.js

@@ -94,6 +94,42 @@ export const css = `/**
     filter: none;
   }
 
+  .btn-accent {
+    --btn-text-color: var(--color-accent-content);
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  .btn-accent:hover {
+    background-color: color-mix(in oklch, var(--color-accent), black 10%);
+    border-color: color-mix(in oklch, var(--color-accent), black 10%);
+    filter: none;
+  }
+
+  .btn-neutral {
+    --btn-text-color: var(--color-neutral-content);
+    background-color: var(--color-neutral);
+    border-color: var(--color-neutral);
+  }
+
+  .btn-neutral:hover {
+    background-color: color-mix(in oklch, var(--color-neutral), black 10%);
+    border-color: color-mix(in oklch, var(--color-neutral), black 10%);
+    filter: none;
+  }
+
+  .btn-base {
+    --btn-text-color: var(--color-base-content);
+    background-color: var(--color-base-100);
+    border-color: var(--color-base-100);
+  }
+
+  .btn-base:hover {
+    background-color: var(--color-base-200);
+    border-color: var(--color-base-200);
+    filter: none;
+  }
+
   /* Outline / Outlined Variant (.btn-outlined is an alias) */
   .btn-outline,
   .btn-outlined {
@@ -144,6 +180,42 @@ export const css = `/**
     background-color: var(--color-tertiary);
   }
 
+  .btn-outline.btn-accent,
+  .btn-outlined.btn-accent {
+    --btn-text-color: var(--color-accent);
+    border-color: currentColor;
+  }
+
+  .btn-outline.btn-accent:hover,
+  .btn-outlined.btn-accent:hover {
+    --btn-text-color: var(--color-accent-content);
+    background-color: var(--color-accent);
+  }
+
+  .btn-outline.btn-neutral,
+  .btn-outlined.btn-neutral {
+    --btn-text-color: var(--color-neutral);
+    border-color: currentColor;
+  }
+
+  .btn-outline.btn-neutral:hover,
+  .btn-outlined.btn-neutral:hover {
+    --btn-text-color: var(--color-neutral-content);
+    background-color: var(--color-neutral);
+  }
+
+  .btn-outline.btn-base,
+  .btn-outlined.btn-base {
+    --btn-text-color: var(--color-base-content);
+    border-color: currentColor;
+  }
+
+  .btn-outline.btn-base:hover,
+  .btn-outlined.btn-base:hover {
+    --btn-text-color: var(--color-base-content);
+    background-color: var(--color-base-100);
+  }
+
   .btn-outline.btn-info,
   .btn-outlined.btn-info {
     --btn-text-color: var(--color-info);
@@ -235,6 +307,24 @@ export const css = `/**
   .btn-ghost.btn-success { --btn-text-color: var(--color-success); }
   .btn-ghost.btn-warning { --btn-text-color: var(--color-warning); }
   .btn-ghost.btn-error   { --btn-text-color: var(--color-error); }
+  .btn-ghost.btn-accent  { --btn-text-color: var(--color-accent); }
+  .btn-ghost.btn-neutral { --btn-text-color: var(--color-neutral); }
+  .btn-ghost.btn-base    { --btn-text-color: var(--color-base-content); }
+
+  .btn-ghost.btn-accent:hover {
+    --btn-text-color: var(--color-accent);
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+  }
+
+  .btn-ghost.btn-neutral:hover {
+    --btn-text-color: var(--color-neutral);
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+  }
+
+  .btn-ghost.btn-base:hover {
+    --btn-text-color: var(--color-base-content);
+    background-color: var(--color-base-200);
+  }
 
   .btn-ghost.btn-info:hover {
     --btn-text-color: var(--color-on-info-container);
@@ -299,6 +389,24 @@ export const css = `/**
   .btn-text.btn-success { --btn-text-color: var(--color-success); }
   .btn-text.btn-warning { --btn-text-color: var(--color-warning); }
   .btn-text.btn-error   { --btn-text-color: var(--color-error); }
+  .btn-text.btn-accent  { --btn-text-color: var(--color-accent); }
+  .btn-text.btn-neutral { --btn-text-color: var(--color-neutral); }
+  .btn-text.btn-base    { --btn-text-color: var(--color-base-content); }
+
+  .btn-text.btn-accent:hover {
+    --btn-text-color: var(--color-accent);
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+  }
+
+  .btn-text.btn-neutral:hover {
+    --btn-text-color: var(--color-neutral);
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+  }
+
+  .btn-text.btn-base:hover {
+    --btn-text-color: var(--color-base-content);
+    background-color: var(--color-base-200);
+  }
 
   .btn-text.btn-info:hover {
     --btn-text-color: var(--color-on-info-container);
@@ -346,6 +454,21 @@ export const css = `/**
     background-color: var(--color-tertiary-container);
   }
 
+  .btn-tonal.btn-accent {
+    --btn-text-color: var(--color-on-surface);
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+  }
+
+  .btn-tonal.btn-neutral {
+    --btn-text-color: var(--color-on-surface);
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+  }
+
+  .btn-tonal.btn-base {
+    --btn-text-color: var(--color-base-content);
+    background-color: var(--color-base-200);
+  }
+
   .btn-tonal.btn-info {
     --btn-text-color: var(--color-on-info-container);
     background-color: var(--color-info-container);

package/dist/esm/components/card.js

@@ -199,6 +199,33 @@ export const css = `/**
     color: var(--color-on-error-container);
   }
 
+  .card-accent {
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+  }
+
+  .card-accent .card-title {
+    color: var(--color-on-surface);
+  }
+
+  .card-neutral {
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+  }
+
+  .card-neutral .card-title {
+    color: var(--color-on-surface);
+  }
+
+  .card-base {
+    background-color: var(--color-base-200);
+    color: var(--color-base-content);
+  }
+
+  .card-base .card-title {
+    color: var(--color-base-content);
+  }
+
   /* Glass Effect */
   .card-glass {
     background-color: rgb(255 255 255 / 0.1);

package/dist/esm/components/cascader.js

@@ -417,6 +417,27 @@ export const css = `/**
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
   }
 
+  .cascader-accent .cascader-trigger {
+    color: var(--color-accent);
+  }
+  .cascader-accent .cascader-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent);
+  }
+
+  .cascader-neutral .cascader-trigger {
+    color: var(--color-neutral);
+  }
+  .cascader-neutral .cascader-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent);
+  }
+
+  .cascader-base .cascader-trigger {
+    color: var(--color-base-content);
+  }
+  .cascader-base .cascader-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent);
+  }
+
   /* Ghost Variant */
   .cascader-ghost .cascader-trigger {
     background-color: transparent;