@duskmoon-dev/core 1.12.4 → 1.13.0

package/dist/components/card.css

@@ -162,6 +162,42 @@
     color: var(--color-on-tertiary-container);
   }
 
+  .card-info {
+    background-color: var(--color-info-container);
+    color: var(--color-on-info-container);
+  }
+
+  .card-info .card-title {
+    color: var(--color-on-info-container);
+  }
+
+  .card-success {
+    background-color: var(--color-success-container);
+    color: var(--color-on-success-container);
+  }
+
+  .card-success .card-title {
+    color: var(--color-on-success-container);
+  }
+
+  .card-warning {
+    background-color: var(--color-warning-container);
+    color: var(--color-on-warning-container);
+  }
+
+  .card-warning .card-title {
+    color: var(--color-on-warning-container);
+  }
+
+  .card-error {
+    background-color: var(--color-error-container);
+    color: var(--color-on-error-container);
+  }
+
+  .card-error .card-title {
+    color: var(--color-on-error-container);
+  }
+
   /* Glass Effect */
   .card-glass {
     background-color: rgb(255 255 255 / 0.1);
@@ -189,8 +225,8 @@
   }
 
   .card-interactive:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Full Image Card */

package/dist/components/cascader.css

@@ -23,20 +23,19 @@
     line-height: 1.5rem;
     color: var(--color-on-surface);
     background-color: var(--color-surface);
-    border: 1px solid var(--color-outline);
+    border: 1px solid currentColor;
     border-radius: 0.5rem;
     cursor: pointer;
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
 
   .cascader-trigger:hover:not(:disabled) {
-    border-color: var(--color-on-surface-variant);
+    background-color: var(--color-surface-container);
   }
 
   .cascader-trigger:focus {
     outline: none;
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .cascader-trigger:disabled {
@@ -363,20 +362,71 @@
   }
 
   .cascader-filled .cascader-trigger:focus {
-    border-bottom-color: var(--color-primary);
+    border-bottom-color: currentColor;
     box-shadow: none;
   }
 
-  /* Error State */
-  .cascader-error .cascader-trigger {
-    border-color: var(--color-error);
+  /* Color Variants */
+  .cascader-primary .cascader-trigger {
+    color: var(--color-primary);
+  }
+  .cascader-primary .cascader-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent);
+  }
+
+  .cascader-secondary .cascader-trigger {
+    color: var(--color-secondary);
+  }
+  .cascader-secondary .cascader-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent);
+  }
+
+  .cascader-tertiary .cascader-trigger {
+    color: var(--color-tertiary);
+  }
+  .cascader-tertiary .cascader-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent);
+  }
+
+  .cascader-info .cascader-trigger {
+    color: var(--color-info);
+  }
+  .cascader-info .cascader-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent);
+  }
+
+  .cascader-success .cascader-trigger {
+    color: var(--color-success);
+  }
+  .cascader-success .cascader-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent);
+  }
+
+  .cascader-warning .cascader-trigger {
+    color: var(--color-warning);
+  }
+  .cascader-warning .cascader-trigger:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent);
   }
 
+  .cascader-error .cascader-trigger {
+    color: var(--color-error);
+  }
   .cascader-error .cascader-trigger:focus {
-    border-color: var(--color-error);
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
   }
 
+  /* Ghost Variant */
+  .cascader-ghost .cascader-trigger {
+    background-color: transparent;
+    border-color: transparent;
+  }
+  .cascader-ghost .cascader-trigger:focus {
+    background-color: var(--color-surface-container);
+    border-color: transparent;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  }
+
   /* Disabled State */
   .cascader-disabled .cascader-trigger {
     cursor: not-allowed;

package/dist/components/checkbox.css

@@ -12,6 +12,7 @@
     --checkbox-size: 1.25rem;
     --checkbox-color: var(--color-primary);
     --checkbox-border-color: var(--color-on-surface-variant);
+    color: var(--color-on-surface);
 
     position: relative;
     display: inline-grid;
@@ -34,8 +35,8 @@
     height: 0.35em;
     transform: scale(0) rotate(-45deg);
     transform-origin: center;
-    border-bottom: 2px solid var(--color-on-primary);
-    border-left: 2px solid var(--color-on-primary);
+    border-bottom: 2px solid var(--color-primary-content);
+    border-left: 2px solid var(--color-primary-content);
     transition: transform 150ms ease-in-out;
   }
 
@@ -58,7 +59,7 @@
   .checkbox:indeterminate::before {
     width: 0.5em;
     height: 0;
-    border-bottom: 2px solid var(--color-on-primary);
+    border-bottom: 2px solid var(--color-primary-content);
     border-left: 0;
     transform: scale(1) rotate(0deg);
   }
@@ -76,8 +77,8 @@
 
   /* Focus State */
   .checkbox:focus-visible {
-    outline: 2px solid var(--checkbox-color);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--checkbox-color) 20%, transparent);
   }
 
   /* Disabled State */
@@ -177,6 +178,15 @@
     border-color: var(--color-info-content);
   }
 
+  /* Ghost Variant — borderless unchecked state */
+  .checkbox-ghost {
+    --checkbox-border-color: transparent;
+  }
+
+  .checkbox-ghost:hover:not(:disabled):not(:checked) {
+    border-color: transparent;
+  }
+
   /* ========================================
    * Checkbox with Label (wrapper pattern)
    * ======================================== */

package/dist/components/chip.css

@@ -35,8 +35,8 @@
   }
 
   .chip:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Color Variants - Filled */
@@ -67,6 +67,42 @@
     background-color: color-mix(in oklch, var(--color-tertiary), black 10%);
   }
 
+  .chip-info {
+    background-color: var(--color-info);
+    color: var(--color-info-content);
+  }
+
+  .chip-info:hover {
+    background-color: color-mix(in oklch, var(--color-info), black 10%);
+  }
+
+  .chip-success {
+    background-color: var(--color-success);
+    color: var(--color-success-content);
+  }
+
+  .chip-success:hover {
+    background-color: color-mix(in oklch, var(--color-success), black 10%);
+  }
+
+  .chip-warning {
+    background-color: var(--color-warning);
+    color: var(--color-warning-content);
+  }
+
+  .chip-warning:hover {
+    background-color: color-mix(in oklch, var(--color-warning), black 10%);
+  }
+
+  .chip-error {
+    background-color: var(--color-error);
+    color: var(--color-error-content);
+  }
+
+  .chip-error:hover {
+    background-color: color-mix(in oklch, var(--color-error), black 10%);
+  }
+
   /* Outlined Variant */
   .chip-outlined {
     background-color: transparent;
@@ -104,6 +140,42 @@
     background-color: var(--color-tertiary-container);
   }
 
+  .chip-outlined.chip-info {
+    border-color: var(--color-info);
+    color: var(--color-info);
+  }
+
+  .chip-outlined.chip-info:hover {
+    background-color: var(--color-info-container);
+  }
+
+  .chip-outlined.chip-success {
+    border-color: var(--color-success);
+    color: var(--color-success);
+  }
+
+  .chip-outlined.chip-success:hover {
+    background-color: var(--color-success-container);
+  }
+
+  .chip-outlined.chip-warning {
+    border-color: var(--color-warning);
+    color: var(--color-warning);
+  }
+
+  .chip-outlined.chip-warning:hover {
+    background-color: var(--color-warning-container);
+  }
+
+  .chip-outlined.chip-error {
+    border-color: var(--color-error);
+    color: var(--color-error);
+  }
+
+  .chip-outlined.chip-error:hover {
+    background-color: var(--color-error-container);
+  }
+
   /* Tonal/Soft Variant */
   .chip-tonal {
     background-color: var(--color-surface-container-high);
@@ -124,6 +196,54 @@
     color: var(--color-on-tertiary-container);
   }
 
+  .chip-tonal.chip-info {
+    background-color: var(--color-info-container);
+    color: var(--color-on-info-container);
+  }
+
+  .chip-tonal.chip-success {
+    background-color: var(--color-success-container);
+    color: var(--color-on-success-container);
+  }
+
+  .chip-tonal.chip-warning {
+    background-color: var(--color-warning-container);
+    color: var(--color-on-warning-container);
+  }
+
+  .chip-tonal.chip-error {
+    background-color: var(--color-error-container);
+    color: var(--color-on-error-container);
+  }
+
+  /* Ghost Variant */
+  .chip-ghost {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  .chip-ghost:hover {
+    background-color: var(--color-surface-container);
+  }
+
+  /* Ghost + color sub-variants: transparent bg/border, colored text.
+     Hover uses container color (matches .chip-outlined.chip-*:hover pattern). */
+  .chip-ghost.chip-primary   { background-color: transparent; color: var(--color-primary); }
+  .chip-ghost.chip-secondary { background-color: transparent; color: var(--color-secondary); }
+  .chip-ghost.chip-tertiary  { background-color: transparent; color: var(--color-tertiary); }
+  .chip-ghost.chip-info      { background-color: transparent; color: var(--color-info); }
+  .chip-ghost.chip-success   { background-color: transparent; color: var(--color-success); }
+  .chip-ghost.chip-warning   { background-color: transparent; color: var(--color-warning); }
+  .chip-ghost.chip-error     { background-color: transparent; color: var(--color-error); }
+
+  .chip-ghost.chip-primary:hover   { background-color: var(--color-primary-container); }
+  .chip-ghost.chip-secondary:hover { background-color: var(--color-secondary-container); }
+  .chip-ghost.chip-tertiary:hover  { background-color: var(--color-tertiary-container); }
+  .chip-ghost.chip-info:hover      { background-color: var(--color-info-container); }
+  .chip-ghost.chip-success:hover   { background-color: var(--color-success-container); }
+  .chip-ghost.chip-warning:hover   { background-color: var(--color-warning-container); }
+  .chip-ghost.chip-error:hover     { background-color: var(--color-error-container); }
+
   /* Size Variants */
   .chip-sm {
     padding: 0.25rem 0.5rem;

package/dist/components/collapse.css

@@ -219,6 +219,38 @@
     background-color: var(--color-tertiary-container);
   }
 
+  .collapse-info .collapse-trigger {
+    color: var(--color-info);
+  }
+
+  .collapse-info .collapse-trigger:hover {
+    background-color: var(--color-info-container);
+  }
+
+  .collapse-success .collapse-trigger {
+    color: var(--color-success);
+  }
+
+  .collapse-success .collapse-trigger:hover {
+    background-color: var(--color-success-container);
+  }
+
+  .collapse-warning .collapse-trigger {
+    color: var(--color-warning);
+  }
+
+  .collapse-warning .collapse-trigger:hover {
+    background-color: var(--color-warning-container);
+  }
+
+  .collapse-error .collapse-trigger {
+    color: var(--color-error);
+  }
+
+  .collapse-error .collapse-trigger:hover {
+    background-color: var(--color-error-container);
+  }
+
   /* Size Variants */
   .collapse-sm .collapse-trigger {
     padding: 0.5rem 0.75rem;

package/dist/components/datepicker.css

@@ -19,7 +19,7 @@
     line-height: 1.5;
     color: var(--color-on-surface);
     background-color: var(--color-surface);
-    border: 1px solid var(--color-outline);
+    border: 1px solid currentColor;
     border-radius: 0.5rem;
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
@@ -38,8 +38,7 @@
 
   .datepicker-input:focus {
     outline: none;
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px var(--color-primary-container);
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .datepicker-input:disabled {
@@ -692,7 +691,71 @@
     box-shadow: none;
   }
 
-  /* Color Variants */
+  /* Input Color Variants */
+  .datepicker-primary .datepicker-input {
+    color: var(--color-primary);
+  }
+  .datepicker-primary .datepicker-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent);
+  }
+
+  .datepicker-secondary .datepicker-input {
+    color: var(--color-secondary);
+  }
+  .datepicker-secondary .datepicker-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent);
+  }
+
+  .datepicker-tertiary .datepicker-input {
+    color: var(--color-tertiary);
+  }
+  .datepicker-tertiary .datepicker-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent);
+  }
+
+  .datepicker-info .datepicker-input {
+    color: var(--color-info);
+  }
+  .datepicker-info .datepicker-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent);
+  }
+
+  .datepicker-info .datepicker-day-selected,
+  .datepicker-info .datepicker-day-range-start,
+  .datepicker-info .datepicker-day-range-end {
+    background-color: var(--color-info);
+    color: var(--color-info-content);
+  }
+
+  .datepicker-success .datepicker-input {
+    color: var(--color-success);
+  }
+  .datepicker-success .datepicker-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent);
+  }
+
+  .datepicker-success .datepicker-day-selected,
+  .datepicker-success .datepicker-day-range-start,
+  .datepicker-success .datepicker-day-range-end {
+    background-color: var(--color-success);
+    color: var(--color-success-content);
+  }
+
+  .datepicker-warning .datepicker-input {
+    color: var(--color-warning);
+  }
+  .datepicker-warning .datepicker-input:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent);
+  }
+
+  .datepicker-warning .datepicker-day-selected,
+  .datepicker-warning .datepicker-day-range-start,
+  .datepicker-warning .datepicker-day-range-end {
+    background-color: var(--color-warning);
+    color: var(--color-warning-content);
+  }
+
+  /* Day Selected Color Variants */
   .datepicker-primary .datepicker-day-selected,
   .datepicker-primary .datepicker-day-range-start,
   .datepicker-primary .datepicker-day-range-end {
@@ -717,15 +780,25 @@
   /* Error State */
   .datepicker-error .datepicker-input,
   .datetime-picker-error .datetime-picker-input {
-    border-color: var(--color-error);
+    color: var(--color-error);
   }
 
   .datepicker-error .datepicker-input:focus,
   .datetime-picker-error .datetime-picker-input:focus {
-    border-color: var(--color-error);
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
   }
 
+  /* Ghost Variant */
+  .datepicker-ghost .datepicker-input {
+    background-color: transparent;
+    border-color: transparent;
+  }
+  .datepicker-ghost .datepicker-input:focus {
+    background-color: var(--color-surface-container);
+    border-color: transparent;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  }
+
   /* Reduce Motion */
   @media (prefers-reduced-motion: reduce) {
     .datepicker-dropdown,

package/dist/components/file-upload.css

@@ -22,25 +22,25 @@
     min-height: 10rem;
     padding: 2rem;
     background-color: var(--color-surface);
-    border: 2px dashed var(--color-outline);
+    border: 2px dashed currentColor;
     border-radius: 0.75rem;
     cursor: pointer;
     transition: border-color 150ms ease-in-out, background-color 150ms ease-in-out;
   }
 
   .file-upload-dropzone:hover {
-    border-color: var(--color-primary);
+    border-color: currentColor;
     background-color: var(--color-surface-container);
   }
 
   .file-upload-dropzone:focus-within {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px var(--color-primary-container);
+    border-color: currentColor;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .file-upload-dropzone.dragging {
-    border-color: var(--color-primary);
-    background-color: var(--color-primary-container);
+    border-color: currentColor;
+    background-color: color-mix(in oklch, currentColor 10%, var(--color-surface));
   }
 
   .file-upload-dropzone.disabled {
@@ -65,7 +65,6 @@
     justify-content: center;
     width: 3rem;
     height: 3rem;
-    color: var(--color-primary);
     font-size: 2rem;
   }
 
@@ -87,7 +86,7 @@
   }
 
   .file-upload-browse {
-    color: var(--color-primary);
+    color: currentColor;
     font-weight: 500;
     text-decoration: underline;
     cursor: pointer;
@@ -299,6 +298,67 @@
     cursor: not-allowed;
   }
 
+  /* Color Variants */
+  .file-upload-primary .file-upload-dropzone {
+    color: var(--color-primary);
+  }
+  .file-upload-primary .file-upload-dropzone:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent);
+  }
+
+  .file-upload-secondary .file-upload-dropzone {
+    color: var(--color-secondary);
+  }
+  .file-upload-secondary .file-upload-dropzone:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent);
+  }
+
+  .file-upload-tertiary .file-upload-dropzone {
+    color: var(--color-tertiary);
+  }
+  .file-upload-tertiary .file-upload-dropzone:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent);
+  }
+
+  .file-upload-info .file-upload-dropzone {
+    color: var(--color-info);
+  }
+  .file-upload-info .file-upload-dropzone:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent);
+  }
+
+  .file-upload-success .file-upload-dropzone {
+    color: var(--color-success);
+  }
+  .file-upload-success .file-upload-dropzone:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent);
+  }
+
+  .file-upload-warning .file-upload-dropzone {
+    color: var(--color-warning);
+  }
+  .file-upload-warning .file-upload-dropzone:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent);
+  }
+
+  .file-upload-error .file-upload-dropzone {
+    color: var(--color-error);
+  }
+  .file-upload-error .file-upload-dropzone:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
+  }
+
+  /* Ghost Variant */
+  .file-upload-ghost .file-upload-dropzone {
+    background-color: transparent;
+    border-color: transparent;
+  }
+  .file-upload-ghost .file-upload-dropzone:focus-within {
+    background-color: var(--color-surface-container);
+    border-color: transparent;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  }
+
   /* Size Variants */
   .file-upload-sm .file-upload-dropzone {
     min-height: 6rem;

package/dist/components/form.css

@@ -11,6 +11,7 @@
     gap: 0.25rem;
     width: 100%;
     margin-bottom: 1rem;
+    color: var(--color-on-surface);
   }
 
   /* Label */
@@ -24,7 +25,7 @@
   .label-text {
     font-size: 0.875rem;
     font-weight: 500;
-    color: var(--color-base-content);
+    color: var(--color-on-surface);
     padding-bottom: 0.25rem;
   }