@duskmoon-dev/core 1.15.0 → 1.16.0

package/dist/esm/components/bottomsheet.js

@@ -10,7 +10,7 @@ export const css = `/**
     position: fixed;
     inset: 0;
     z-index: 1100;
-    background-color: rgb(0 0 0 / 0.5);
+    background-color: color-mix(in srgb, var(--color-scrim) 50%, transparent);
     opacity: 0;
     visibility: hidden;
     transition: opacity 300ms ease-out, visibility 300ms ease-out;
@@ -32,8 +32,8 @@ export const css = `/**
     flex-direction: column;
     max-height: 90vh;
     background-color: var(--color-surface);
-    border-radius: 1.75rem 1.75rem 0 0;
-    box-shadow: 0 -25px 50px -12px rgb(0 0 0 / 0.25);
+    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
+    box-shadow: 0 -25px 50px -12px color-mix(in srgb, var(--color-shadow) 25%, transparent);
     transform: translateY(100%);
     transition: transform 300ms ease-out;
     padding-bottom: env(safe-area-inset-bottom, 0);
@@ -57,7 +57,7 @@ export const css = `/**
     width: 2rem;
     height: 0.25rem;
     background-color: var(--color-outline-variant);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
   }
 
   .bottomsheet-handle:active {
@@ -89,7 +89,7 @@ export const css = `/**
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
   }
@@ -99,8 +99,8 @@ export const css = `/**
   }
 
   .bottomsheet-close: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);
   }
 
   /* Bottom Sheet Content */
@@ -204,7 +204,7 @@ export const css = `/**
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
   }
@@ -221,7 +221,7 @@ export const css = `/**
     height: 3rem;
     font-size: 1.5rem;
     background-color: var(--color-surface-container-high);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     color: var(--color-on-surface-variant);
   }
 
@@ -243,7 +243,7 @@ export const css = `/**
   /* Persistent (non-modal) */
   .bottomsheet-persistent {
     position: absolute;
-    box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1);
+    box-shadow: 0 -4px 6px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent);
   }
 
   /* Expandable Heights */
@@ -274,7 +274,7 @@ export const css = `/**
     width: 0.25rem;
     height: 1rem;
     background-color: var(--color-outline-variant);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     cursor: pointer;
   }
 
@@ -309,7 +309,7 @@ export const css = `/**
       width: 24rem;
       max-width: calc(100vw - 3.5rem);
       max-height: 100vh;
-      border-radius: 1rem 0 0 1rem;
+      border-radius: var(--radius-lg) 0 0 var(--radius-lg);
       transform: translateX(100%);
     }
 

package/dist/esm/components/button.js

@@ -26,7 +26,7 @@ export const css = `/**
     cursor: pointer;
     user-select: none;
     border: 1px solid transparent;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     transition: all 150ms ease-in-out;
     background-color: var(--color-surface-container);
     color: var(--btn-text-color);
@@ -99,7 +99,7 @@ export const css = `/**
   .btn-outlined {
     --btn-text-color: var(--color-on-surface);
     background-color: transparent;
-    border: 1px solid var(--color-outline);
+    border-color: var(--color-outline);
   }
 
   .btn-outline:hover,
@@ -111,7 +111,7 @@ export const css = `/**
   .btn-outline.btn-primary,
   .btn-outlined.btn-primary {
     --btn-text-color: var(--color-primary);
-    border-color: var(--color-primary);
+    border-color: currentColor;
   }
 
   .btn-outline.btn-primary:hover,
@@ -123,7 +123,7 @@ export const css = `/**
   .btn-outline.btn-secondary,
   .btn-outlined.btn-secondary {
     --btn-text-color: var(--color-secondary);
-    border-color: var(--color-secondary);
+    border-color: currentColor;
   }
 
   .btn-outline.btn-secondary:hover,
@@ -135,7 +135,7 @@ export const css = `/**
   .btn-outline.btn-tertiary,
   .btn-outlined.btn-tertiary {
     --btn-text-color: var(--color-tertiary);
-    border-color: var(--color-tertiary);
+    border-color: currentColor;
   }
 
   .btn-outline.btn-tertiary:hover,
@@ -147,7 +147,7 @@ export const css = `/**
   .btn-outline.btn-info,
   .btn-outlined.btn-info {
     --btn-text-color: var(--color-info);
-    border-color: var(--color-info);
+    border-color: currentColor;
   }
 
   .btn-outline.btn-info:hover,
@@ -159,7 +159,7 @@ export const css = `/**
   .btn-outline.btn-success,
   .btn-outlined.btn-success {
     --btn-text-color: var(--color-success);
-    border-color: var(--color-success);
+    border-color: currentColor;
   }
 
   .btn-outline.btn-success:hover,
@@ -171,7 +171,7 @@ export const css = `/**
   .btn-outline.btn-warning,
   .btn-outlined.btn-warning {
     --btn-text-color: var(--color-warning);
-    border-color: var(--color-warning);
+    border-color: currentColor;
   }
 
   .btn-outline.btn-warning:hover,
@@ -183,7 +183,7 @@ export const css = `/**
   .btn-outline.btn-error,
   .btn-outlined.btn-error {
     --btn-text-color: var(--color-error);
-    border-color: var(--color-error);
+    border-color: currentColor;
   }
 
   .btn-outline.btn-error:hover,
@@ -421,7 +421,7 @@ export const css = `/**
     --btn-py: 0.25rem;
     font-size: 0.75rem;
     line-height: 1rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
 
   .btn-sm {
@@ -429,7 +429,7 @@ export const css = `/**
     --btn-py: 0.375rem;
     font-size: 0.8125rem;
     line-height: 1.125rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
 
   .btn-md {
@@ -437,7 +437,7 @@ export const css = `/**
     --btn-py: 0.625rem;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   .btn-lg {
@@ -445,7 +445,7 @@ export const css = `/**
     --btn-py: 0.875rem;
     font-size: 1rem;
     line-height: 1.5rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Block Button */
@@ -464,13 +464,13 @@ export const css = `/**
   }
 
   .btn-group .btn:first-child {
-    border-top-left-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem;
+    border-top-left-radius: var(--radius-sm);
+    border-bottom-left-radius: var(--radius-sm);
   }
 
   .btn-group .btn:last-child {
-    border-top-right-radius: 0.5rem;
-    border-bottom-right-radius: 0.5rem;
+    border-top-right-radius: var(--radius-sm);
+    border-bottom-right-radius: var(--radius-sm);
   }
 
   .btn-group .btn:not(:first-child) {
@@ -491,7 +491,7 @@ export const css = `/**
     height: 1rem;
     border: 2px solid var(--btn-text-color);
     border-right-color: transparent;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     animation: btn-spin 0.6s linear infinite;
   }
 
@@ -505,7 +505,7 @@ export const css = `/**
   .btn-circle {
     --btn-p: 0.625rem;
     --btn-py: 0.625rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     aspect-ratio: 1;
   }
 

package/dist/esm/components/card.js

@@ -11,7 +11,7 @@ export const css = `/**
     flex-direction: column;
     position: relative;
     overflow: hidden;
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
     background-color: var(--color-surface);
     color: var(--color-on-surface);
     box-shadow: var(--shadow-sm);
@@ -245,7 +245,7 @@ export const css = `/**
   .card-full-image .card-body {
     position: relative;
     z-index: 1;
-    background: linear-gradient(to top, rgb(0 0 0 / 0.7), transparent);
+    background: linear-gradient(to top, color-mix(in srgb, var(--color-shadow) 70%, transparent), transparent);
     color: white;
     margin-top: auto;
     min-height: 50%;
@@ -254,6 +254,13 @@ export const css = `/**
   .card-full-image .card-title {
     color: white;
   }
+
+  /* Reduce Motion */
+  @media (prefers-reduced-motion: reduce) {
+    .card {
+      transition: none;
+    }
+  }
 }
 `;
 

package/dist/esm/components/cascader.js

@@ -25,7 +25,7 @@ export const css = `/**
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 1px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
@@ -104,7 +104,7 @@ export const css = `/**
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     flex-shrink: 0;
     transition: background-color 150ms ease-in-out;
@@ -124,7 +124,7 @@ export const css = `/**
     margin-top: 0.25rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     box-shadow: var(--shadow-md);
     overflow: hidden;
   }
@@ -225,7 +225,7 @@ export const css = `/**
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     text-align: left;
     width: 100%;
@@ -295,7 +295,7 @@ export const css = `/**
     color: var(--color-on-surface);
     background-color: var(--color-surface-container);
     border: none;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
     outline: none;
   }
 
@@ -319,7 +319,7 @@ export const css = `/**
   .cascader-sm .cascader-trigger {
     padding: 0.5rem 0.75rem;
     font-size: 0.875rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
 
   .cascader-sm .cascader-panel {
@@ -335,7 +335,7 @@ export const css = `/**
   .cascader-lg .cascader-trigger {
     padding: 1rem 1.25rem;
     font-size: 1.125rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
 
   .cascader-lg .cascader-panel {
@@ -359,7 +359,7 @@ export const css = `/**
     background-color: var(--color-surface-container);
     border: none;
     border-bottom: 2px solid var(--color-outline);
-    border-radius: 0.5rem 0.5rem 0 0;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
   }
 
   .cascader-filled .cascader-trigger:focus {
@@ -446,7 +446,7 @@ export const css = `/**
     height: 1rem;
     border: 2px solid var(--color-outline);
     border-top-color: var(--color-primary);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     animation: cascader-spin 0.8s linear infinite;
   }
 

package/dist/esm/components/checkbox.js

@@ -25,7 +25,7 @@ export const css = `/**
     appearance: none;
     background-color: transparent;
     border: 2px solid var(--checkbox-border-color);
-    border-radius: 0.125rem;
+    border-radius: var(--radius-xs);
     transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out;
   }
 

package/dist/esm/components/chip.js

@@ -14,10 +14,10 @@ export const css = `/**
     font-size: 0.875rem;
     font-weight: 500;
     line-height: 1.25rem;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     background-color: var(--color-surface-container);
     color: var(--color-on-surface);
-    border: 1px solid transparent;
+    border: 1px solid currentColor;
     cursor: default;
     transition: all 150ms ease-in-out;
   }
@@ -44,6 +44,7 @@ export const css = `/**
   .chip-primary {
     background-color: var(--color-primary);
     color: var(--color-primary-content);
+    border-color: var(--color-primary);
   }
 
   .chip-primary:hover {
@@ -53,6 +54,7 @@ export const css = `/**
   .chip-secondary {
     background-color: var(--color-secondary);
     color: var(--color-secondary-content);
+    border-color: var(--color-secondary);
   }
 
   .chip-secondary:hover {
@@ -62,6 +64,7 @@ export const css = `/**
   .chip-tertiary {
     background-color: var(--color-tertiary);
     color: var(--color-tertiary-content);
+    border-color: var(--color-tertiary);
   }
 
   .chip-tertiary:hover {
@@ -71,6 +74,7 @@ export const css = `/**
   .chip-info {
     background-color: var(--color-info);
     color: var(--color-info-content);
+    border-color: var(--color-info);
   }
 
   .chip-info:hover {
@@ -80,6 +84,7 @@ export const css = `/**
   .chip-success {
     background-color: var(--color-success);
     color: var(--color-success-content);
+    border-color: var(--color-success);
   }
 
   .chip-success:hover {
@@ -89,6 +94,7 @@ export const css = `/**
   .chip-warning {
     background-color: var(--color-warning);
     color: var(--color-warning-content);
+    border-color: var(--color-warning);
   }
 
   .chip-warning:hover {
@@ -98,6 +104,7 @@ export const css = `/**
   .chip-error {
     background-color: var(--color-error);
     color: var(--color-error-content);
+    border-color: var(--color-error);
   }
 
   .chip-error:hover {
@@ -115,7 +122,6 @@ export const css = `/**
   }
 
   .chip-outlined.chip-primary {
-    border-color: var(--color-primary);
     color: var(--color-primary);
   }
 
@@ -124,7 +130,6 @@ export const css = `/**
   }
 
   .chip-outlined.chip-secondary {
-    border-color: var(--color-secondary);
     color: var(--color-secondary);
   }
 
@@ -133,7 +138,6 @@ export const css = `/**
   }
 
   .chip-outlined.chip-tertiary {
-    border-color: var(--color-tertiary);
     color: var(--color-tertiary);
   }
 
@@ -142,7 +146,6 @@ export const css = `/**
   }
 
   .chip-outlined.chip-info {
-    border-color: var(--color-info);
     color: var(--color-info);
   }
 
@@ -151,7 +154,6 @@ export const css = `/**
   }
 
   .chip-outlined.chip-success {
-    border-color: var(--color-success);
     color: var(--color-success);
   }
 
@@ -160,7 +162,6 @@ export const css = `/**
   }
 
   .chip-outlined.chip-warning {
-    border-color: var(--color-warning);
     color: var(--color-warning);
   }
 
@@ -169,7 +170,6 @@ export const css = `/**
   }
 
   .chip-outlined.chip-error {
-    border-color: var(--color-error);
     color: var(--color-error);
   }
 
@@ -180,6 +180,7 @@ export const css = `/**
   /* Tonal/Soft Variant */
   .chip-tonal {
     background-color: var(--color-surface-container-high);
+    border-color: transparent;
   }
 
   .chip-tonal.chip-primary {
@@ -286,7 +287,7 @@ export const css = `/**
     opacity: 0.7;
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: opacity 150ms ease-in-out;
   }
@@ -299,6 +300,7 @@ export const css = `/**
   .chip-selected {
     background-color: var(--color-primary);
     color: var(--color-primary-content);
+    border-color: var(--color-primary);
   }
 
   .chip-selected.chip-outlined {