dalila 1.9.0 → 1.9.2

package/src/components/ui/breadcrumb/breadcrumb.css

@@ -7,7 +7,7 @@
   gap: var(--d-space-1);
   font-family: var(--d-font-sans);
   font-size: var(--d-text-sm);
-  color: var(--d-text-muted);
+  color: var(--d-text-tertiary);
   list-style: none;
   padding: 0;
   margin: 0;
@@ -21,14 +21,14 @@
 
 .d-breadcrumb-item + .d-breadcrumb-item::before {
   content: "/";
-  color: var(--d-text-muted);
+  color: var(--d-text-tertiary);
   margin: 0 var(--d-space-1);
 }
 
 .d-breadcrumb-item a {
   color: var(--d-text-muted);
   text-decoration: none;
-  transition: color var(--d-duration-fast) ease;
+  transition: color var(--d-duration-fast) var(--d-ease);
 }
 
 .d-breadcrumb-item a:hover {

package/src/components/ui/button/button.css

@@ -17,19 +17,24 @@
   color: var(--d-text-primary);
   text-decoration: none;
 
-  background: var(--d-surface-raised);
+  background: var(--d-surface-card);
   border: 1px solid var(--d-border-color);
   border-radius: var(--d-radius-md);
 
   cursor: pointer;
   user-select: none;
-  transition: all var(--d-duration-fast) ease;
+  transition:
+    background var(--d-duration-fast) var(--d-ease),
+    border-color var(--d-duration-fast) var(--d-ease),
+    color var(--d-duration-fast) var(--d-ease),
+    box-shadow var(--d-duration-fast) var(--d-ease),
+    transform var(--d-duration-fast) var(--d-ease);
 }
 
 .d-btn:hover {
-  background: var(--d-accent);
-  border-color: var(--d-accent);
-  color: #fff;
+  background: var(--d-surface-raised);
+  border-color: var(--d-border-color);
+  color: var(--d-text-primary);
 }
 
 .d-btn:active {
@@ -38,7 +43,7 @@
 
 .d-btn:focus-visible {
   outline: none;
-  box-shadow: var(--d-shadow-glow);
+  box-shadow: 0 0 0 2px var(--d-surface-page), 0 0 0 4px var(--d-accent);
 }
 
 .d-btn:disabled,
@@ -48,7 +53,7 @@
 }
 
 .d-btn-primary {
-  color: #ffffff;
+  color: var(--d-text-inverse);
   background: var(--d-accent);
   border-color: var(--d-accent);
 }
@@ -56,10 +61,11 @@
 .d-btn-primary:hover {
   background: var(--d-accent-hover);
   border-color: var(--d-accent-hover);
+  color: var(--d-text-inverse);
 }
 
 .d-btn-accent {
-  color: #ffffff;
+  color: var(--d-text-inverse);
   background: var(--d-accent-500);
   border-color: var(--d-accent-500);
 }
@@ -67,6 +73,7 @@
 .d-btn-accent:hover {
   background: var(--d-accent-600);
   border-color: var(--d-accent-600);
+  color: var(--d-text-inverse);
 }
 
 .d-btn-ghost {
@@ -76,19 +83,21 @@
 
 .d-btn-ghost:hover {
   background: var(--d-surface-raised);
-  border-color: var(--d-border-color);
+  border-color: transparent;
   color: var(--d-text-primary);
 }
 
 .d-btn-danger {
-  color: #ffffff;
+  color: var(--d-text-inverse);
   background: var(--d-error);
   border-color: var(--d-error);
 }
 
 .d-btn-danger:hover {
-  background: #b91c1c;
-  border-color: #b91c1c;
+  background: var(--d-error);
+  border-color: var(--d-error);
+  filter: brightness(0.9);
+  color: var(--d-text-inverse);
 }
 
 .d-btn-sm {

package/src/components/ui/calendar/calendar.css

@@ -29,12 +29,14 @@
   width: 2rem;
   height: 2rem;
   background: none;
-  border: 1px solid var(--d-border-color);
+  border: 1px solid transparent;
   border-radius: var(--d-radius-sm);
   color: var(--d-text-muted);
   cursor: pointer;
   font-size: var(--d-text-sm);
-  transition: all var(--d-duration-fast) ease;
+  transition:
+    background var(--d-duration-fast) var(--d-ease),
+    color var(--d-duration-fast) var(--d-ease);
 }
 
 .d-calendar-nav:hover {
@@ -42,6 +44,11 @@
   color: var(--d-text-primary);
 }
 
+.d-calendar-nav:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--d-accent);
+}
+
 .d-calendar-grid {
   display: grid;
   grid-template-columns: repeat(7, 2.25rem);
@@ -52,7 +59,7 @@
 .d-calendar-dow {
   font-size: var(--d-text-xs);
   font-weight: var(--d-font-medium);
-  color: var(--d-text-muted);
+  color: var(--d-text-tertiary);
   padding: var(--d-space-2) 0;
 }
 
@@ -68,13 +75,20 @@
   border: none;
   border-radius: var(--d-radius-sm);
   cursor: pointer;
-  transition: all var(--d-duration-fast) ease;
+  transition:
+    background var(--d-duration-fast) var(--d-ease),
+    color var(--d-duration-fast) var(--d-ease);
 }
 
 .d-calendar-day:hover {
   background: var(--d-surface-raised);
 }
 
+.d-calendar-day:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--d-accent);
+}
+
 .d-calendar-day.today {
   font-weight: var(--d-font-semibold);
   border: 1px solid var(--d-accent);
@@ -82,11 +96,11 @@
 
 .d-calendar-day.selected {
   background: var(--d-accent);
-  color: #fff;
+  color: var(--d-text-inverse);
 }
 
 .d-calendar-day.other-month {
-  color: var(--d-text-muted);
+  color: var(--d-text-tertiary);
   opacity: 0.4;
 }
 

package/src/components/ui/card/card.css

@@ -45,11 +45,18 @@
 
 .d-card-accent {
   border: none;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--d-shadow-sm);
 }
 
-[data-theme="dark"] .d-card-accent {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+.d-card-accent::before {
+  content: '';
+  position: absolute;
+  top: var(--d-space-3);
+  bottom: var(--d-space-3);
+  left: 0;
+  width: 3px;
+  background: var(--d-accent);
+  border-radius: 0 var(--d-radius-full) var(--d-radius-full) 0;
 }
 
 .d-card-section {
@@ -62,20 +69,24 @@
 }
 
 .d-card-hover {
-  transition: border-color var(--d-duration-fast) ease;
+  transition:
+    border-color var(--d-duration-fast) var(--d-ease),
+    box-shadow var(--d-duration-fast) var(--d-ease);
   cursor: pointer;
 }
 
 .d-card-hover:hover {
-  border-color: #404040;
+  border-color: var(--d-slate-300);
+  box-shadow: var(--d-shadow-sm);
 }
 
-[data-theme="light"] .d-card-hover:hover {
-  border-color: #c9c9c9;
+[data-theme="dark"] .d-card-hover:hover {
+  border-color: var(--d-slate-600);
 }
 
 .d-card-flat {
   background: var(--d-surface-raised);
+  border-color: transparent;
 }
 
 .d-card-header + .d-card-body {

package/src/components/ui/checkbox/checkbox.css

@@ -17,11 +17,13 @@
   width: 1.125rem;
   height: 1.125rem;
   flex-shrink: 0;
-  background: var(--d-surface-page);
-  border: 1px solid var(--d-border-color);
+  background: var(--d-surface-card);
+  border: 1.5px solid var(--d-border-color);
   border-radius: var(--d-radius-sm);
   cursor: pointer;
-  transition: all var(--d-duration-fast) ease;
+  transition:
+    background var(--d-duration-fast) var(--d-ease),
+    border-color var(--d-duration-fast) var(--d-ease);
 }
 
 .d-checkbox input:checked {
@@ -36,14 +38,14 @@
   left: 5px;
   width: 5px;
   height: 9px;
-  border: solid #fff;
+  border: solid var(--d-text-inverse);
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
 }
 
 .d-checkbox input:focus-visible {
   outline: none;
-  box-shadow: var(--d-shadow-glow);
+  box-shadow: 0 0 0 2px var(--d-surface-page), 0 0 0 4px var(--d-accent);
 }
 
 .d-checkbox input:disabled {

package/src/components/ui/chip/chip.css

@@ -4,7 +4,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--d-space-1);
-  padding: 0.25rem 0.625rem;
+  padding: var(--d-space-1) var(--d-space-3);
   font-family: var(--d-font-sans);
   font-size: var(--d-text-xs);
   font-weight: var(--d-font-medium);
@@ -54,9 +54,14 @@
   border: none;
   border-radius: 50%;
   cursor: pointer;
-  transition: opacity var(--d-duration-fast) ease;
+  transition: opacity var(--d-duration-fast) var(--d-ease);
 }
 
 .d-chip-remove:hover {
   opacity: 1;
 }
+
+.d-chip-remove:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--d-accent);
+}

package/src/components/ui/collapsible/collapsible.css

@@ -2,7 +2,7 @@
 
 .d-collapsible {
   border: 1px solid var(--d-border-color);
-  border-radius: var(--d-radius-md);
+  border-radius: var(--d-radius-lg);
   overflow: hidden;
 }
 
@@ -19,7 +19,7 @@
   cursor: pointer;
   list-style: none;
   user-select: none;
-  transition: background var(--d-duration-fast) ease;
+  transition: background var(--d-duration-fast) var(--d-ease);
 }
 
 .d-collapsible > summary::-webkit-details-marker {
@@ -31,13 +31,19 @@
   background: var(--d-surface-raised);
 }
 
+.d-collapsible > summary:focus-visible,
+.d-collapsible-trigger:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--d-accent);
+}
+
 .d-collapsible > summary::after,
 .d-collapsible-trigger::after {
   content: "";
   width: 0.4rem;
   height: 0.4rem;
-  border-right: 2px solid var(--d-text-muted);
-  border-bottom: 2px solid var(--d-text-muted);
+  border-right: 2px solid var(--d-text-tertiary);
+  border-bottom: 2px solid var(--d-text-tertiary);
   transform: rotate(45deg);
   transition: transform var(--d-duration) var(--d-ease);
   flex-shrink: 0;

package/src/components/ui/combobox/combobox.css

@@ -21,10 +21,10 @@
   height: 1.5rem;
   background: none;
   border: none;
-  color: var(--d-text-muted);
+  color: var(--d-text-tertiary);
   cursor: pointer;
   border-radius: var(--d-radius-sm);
-  transition: color var(--d-duration-fast) ease;
+  transition: color var(--d-duration-fast) var(--d-ease);
 }
 
 .d-combobox-trigger:hover {
@@ -40,16 +40,18 @@
   max-height: 12rem;
   overflow-y: auto;
   padding: var(--d-space-1) 0;
-  background: var(--d-surface-card);
+  background: var(--d-surface-raised);
   border: 1px solid var(--d-border-color);
-  border-radius: var(--d-radius-md);
-  box-shadow: var(--d-shadow-md);
+  border-radius: var(--d-radius-sm);
+  box-shadow: var(--d-shadow-sm);
   list-style: none;
   margin: 0;
 
   opacity: 0;
   visibility: hidden;
-  transition: all var(--d-duration-fast) ease;
+  transition:
+    opacity var(--d-duration-fast) var(--d-ease),
+    visibility var(--d-duration-fast) var(--d-ease);
 }
 
 .d-combobox.open .d-combobox-list {
@@ -58,17 +60,23 @@
 }
 
 .d-combobox-option {
-  padding: var(--d-space-2) var(--d-space-3);
+  padding: var(--d-space-1) var(--d-space-3);
   font-family: var(--d-font-sans);
   font-size: var(--d-text-sm);
   color: var(--d-text-primary);
   cursor: pointer;
-  transition: background var(--d-duration-fast) ease;
+  border-radius: 0;
+  transition: background var(--d-duration-fast) var(--d-ease);
 }
 
 .d-combobox-option:hover,
 .d-combobox-option.highlighted {
-  background: var(--d-surface-raised);
+  background: var(--d-border-light);
+}
+
+.d-combobox-option:focus-visible {
+  outline: none;
+  background: var(--d-border-light);
 }
 
 .d-combobox-option.selected {
@@ -80,6 +88,6 @@
   padding: var(--d-space-3);
   font-family: var(--d-font-sans);
   font-size: var(--d-text-sm);
-  color: var(--d-text-muted);
+  color: var(--d-text-tertiary);
   text-align: center;
 }

package/src/components/ui/dialog/dialog.css

@@ -69,6 +69,10 @@
   overflow-y: auto;
 }
 
+.d-dialog-body p {
+  margin: 0;
+}
+
 .d-dialog-footer {
   display: flex;
   justify-content: flex-end;
@@ -92,12 +96,19 @@
   border: 1px solid transparent;
   border-radius: var(--d-radius-sm);
   cursor: pointer;
-  transition: color var(--d-duration-fast) ease, border-color var(--d-duration-fast) ease;
+  transition:
+    color var(--d-duration-fast) var(--d-ease),
+    border-color var(--d-duration-fast) var(--d-ease);
 }
 
 .d-dialog-close:hover {
   color: var(--d-text-primary);
-  border-color: var(--d-border-color);
+  background: var(--d-surface-raised);
+}
+
+.d-dialog-close:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--d-accent);
 }
 
 .d-dialog-sm { max-width: min(22rem, calc(100vw - var(--d-space-8))); }

package/src/components/ui/drawer/drawer.css

@@ -11,15 +11,16 @@
   margin: 0;
   border: none;
   padding: 0;
-  max-height: 100vh;
+  max-width: none;
+  max-height: none;
   height: 100%;
+  width: min(24rem, 85vw);
   background: var(--d-surface-card);
   color: var(--d-text-primary);
   box-shadow: var(--d-shadow-lg);
   overflow: hidden;
 
   inset: 0 0 0 auto;
-  width: min(24rem, 85vw);
   border-left: 1px solid var(--d-border-color);
 
   opacity: 0;
@@ -86,6 +87,14 @@
   padding: var(--d-space-6);
   overflow-y: auto;
   flex: 1;
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-base);
+  color: var(--d-text-secondary);
+  line-height: var(--d-leading);
+}
+
+.d-drawer-body p {
+  margin: 0;
 }
 
 .d-drawer-footer {

package/src/components/ui/dropdown/dropdown.css

@@ -11,16 +11,19 @@
   left: 0;
   z-index: var(--d-z-dropdown);
   min-width: 12rem;
-  padding: var(--d-space-1) 0;
+  padding: var(--d-space-2);
   background: var(--d-surface-card);
-  border: 1px solid var(--d-border-color);
-  border-radius: var(--d-radius-md);
+  border: 1px solid var(--d-border-light);
+  border-radius: var(--d-radius-lg);
   box-shadow: var(--d-shadow-md);
 
   opacity: 0;
   visibility: hidden;
   transform: translateY(-4px);
-  transition: all var(--d-duration-fast) ease;
+  transition:
+    opacity var(--d-duration-fast) var(--d-ease),
+    visibility var(--d-duration-fast) var(--d-ease),
+    transform var(--d-duration-fast) var(--d-ease);
 }
 
 .d-dropdown.open .d-menu,
@@ -46,8 +49,9 @@
   color: var(--d-text-primary);
   background: none;
   border: none;
+  border-radius: var(--d-radius-sm);
   cursor: pointer;
-  transition: background var(--d-duration-fast) ease;
+  transition: background var(--d-duration-fast) var(--d-ease);
   text-align: left;
   text-decoration: none;
 }
@@ -64,6 +68,11 @@
   background: var(--d-error-light);
 }
 
+.d-menu-item:focus-visible {
+  outline: none;
+  background: var(--d-surface-raised);
+}
+
 .d-menu-item:disabled,
 .d-menu-item[aria-disabled="true"] {
   opacity: 0.5;
@@ -72,8 +81,8 @@
 
 .d-menu-separator {
   height: 1px;
-  background: var(--d-border-color);
-  margin: var(--d-space-1) 0;
+  background: var(--d-border-light);
+  margin: var(--d-space-2) 0;
 }
 
 .d-menu-label {
@@ -81,7 +90,7 @@
   font-family: var(--d-font-sans);
   font-size: var(--d-text-xs);
   font-weight: var(--d-font-semibold);
-  color: var(--d-text-muted);
+  color: var(--d-text-tertiary);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }

package/src/components/ui/dropzone/dropzone.css

@@ -11,7 +11,9 @@
   border: 2px dashed var(--d-border-color);
   border-radius: var(--d-radius-lg);
   cursor: pointer;
-  transition: all var(--d-duration-fast) ease;
+  transition:
+    border-color var(--d-duration-fast) var(--d-ease),
+    background var(--d-duration-fast) var(--d-ease);
   text-align: center;
   font-family: var(--d-font-sans);
 }
@@ -19,17 +21,27 @@
 .d-dropzone:hover,
 .d-dropzone.dragover {
   border-color: var(--d-accent);
-  background: rgba(37, 99, 235, 0.04);
+  background: var(--d-primary-50);
+}
+
+[data-theme="dark"] .d-dropzone:hover,
+[data-theme="dark"] .d-dropzone.dragover {
+  background: rgba(37, 99, 235, 0.06);
+}
+
+.d-dropzone:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--d-accent);
 }
 
 .d-dropzone-icon {
   font-size: 2rem;
-  color: var(--d-text-muted);
+  color: var(--d-text-tertiary);
 }
 
 .d-dropzone-text {
   font-size: var(--d-text-sm);
-  color: var(--d-text-muted);
+  color: var(--d-text-secondary);
 }
 
 .d-dropzone-text strong {
@@ -39,7 +51,7 @@
 
 .d-dropzone-hint {
   font-size: var(--d-text-xs);
-  color: var(--d-text-muted);
+  color: var(--d-text-tertiary);
 }
 
 .d-dropzone input[type="file"] {

package/src/components/ui/empty-state/empty-state.css

@@ -12,7 +12,7 @@
 
 .d-empty-icon {
   font-size: 3rem;
-  color: var(--d-text-muted);
+  color: var(--d-text-tertiary);
   margin-bottom: var(--d-space-4);
   opacity: 0.5;
 }
@@ -26,7 +26,7 @@
 
 .d-empty-text {
   font-size: var(--d-text-sm);
-  color: var(--d-text-muted);
+  color: var(--d-text-secondary);
   max-width: 24rem;
   margin: 0 0 var(--d-space-6);
   line-height: var(--d-leading);

package/src/components/ui/form/form.css

@@ -18,7 +18,7 @@
   font-weight: var(--d-font-semibold);
   color: var(--d-text-primary);
   padding-bottom: var(--d-space-2);
-  border-bottom: 1px solid var(--d-border-color);
+  border-bottom: 1px solid var(--d-border-light);
   margin: 0;
 }