dalila 1.9.0 → 1.9.2

package/src/components/ui/input/input.css

@@ -15,7 +15,7 @@
 
 .d-field-hint {
   font-size: var(--d-text-xs);
-  color: var(--d-text-muted);
+  color: var(--d-text-tertiary);
 }
 
 .d-field-error {
@@ -36,16 +36,18 @@
   color: var(--d-text-primary);
   line-height: var(--d-leading);
 
-  background: var(--d-surface-page);
+  background: var(--d-surface-card);
   border: 1px solid var(--d-border-color);
   border-radius: var(--d-radius-md);
 
-  transition: border-color var(--d-duration-fast) ease, box-shadow var(--d-duration-fast) ease;
+  transition:
+    border-color var(--d-duration-fast) var(--d-ease),
+    box-shadow var(--d-duration-fast) var(--d-ease);
 }
 
 .d-input::placeholder,
 .d-textarea::placeholder {
-  color: var(--d-text-muted);
+  color: var(--d-text-tertiary);
 }
 
 .d-input:focus,
@@ -53,7 +55,7 @@
 .d-select:focus {
   outline: none;
   border-color: var(--d-accent);
-  box-shadow: none;
+  box-shadow: 0 0 0 3px var(--d-ring);
 }
 
 .d-input[aria-invalid="true"],
@@ -71,7 +73,7 @@
 .d-input-error:focus,
 .d-textarea-error:focus,
 .d-select-error:focus {
-  box-shadow: none;
+  box-shadow: 0 0 0 3px var(--d-error-light);
 }
 
 .d-input:disabled,
@@ -92,13 +94,30 @@
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3E%3Cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right var(--d-space-3) center;
+  background-size: 0.75rem 0.75rem;
   padding-right: var(--d-space-8);
+  cursor: pointer;
 }
 
 [data-theme="light"] .d-select {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");
 }
 
+.d-select option {
+  background: var(--d-surface-card);
+  color: var(--d-text-primary);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-sm);
+  font-weight: var(--d-font-normal);
+  padding: var(--d-space-1) var(--d-space-3);
+}
+
+.d-select option:checked {
+  color: var(--d-accent);
+  font-weight: var(--d-font-medium);
+  background: var(--d-surface-raised);
+}
+
 .d-input-sm {
   padding: var(--d-space-1) var(--d-space-2);
   min-height: 1.75rem;

package/src/components/ui/pagination/pagination.css

@@ -21,7 +21,9 @@
   border: 1px solid transparent;
   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);
   text-decoration: none;
 }
 
@@ -30,10 +32,15 @@
   color: var(--d-text-primary);
 }
 
+.d-page:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--d-accent);
+}
+
 .d-page.active,
 .d-page[aria-current="page"] {
   background: var(--d-accent);
-  color: #fff;
+  color: var(--d-text-inverse);
   border-color: var(--d-accent);
 }
 
@@ -50,6 +57,6 @@
   min-width: 2rem;
   height: 2rem;
   font-size: var(--d-text-sm);
-  color: var(--d-text-muted);
+  color: var(--d-text-tertiary);
   cursor: default;
 }

package/src/components/ui/popover/popover.css

@@ -3,8 +3,8 @@
 .d-popover {
   margin: 0;
   padding: var(--d-space-4);
-  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);
   background: var(--d-surface-card);
   color: var(--d-text-primary);
   box-shadow: var(--d-shadow-md);
@@ -16,23 +16,23 @@
   isolation: isolate;
 
   opacity: 0;
-  transform: scale(0.97);
+  transform: scale(0.97) translateY(4px);
   transition:
-    opacity var(--d-duration-fast) ease,
-    transform var(--d-duration-fast) ease,
-    overlay var(--d-duration-fast) ease allow-discrete,
-    display var(--d-duration-fast) ease allow-discrete;
+    opacity var(--d-duration-fast) var(--d-ease),
+    transform var(--d-duration-fast) var(--d-ease),
+    overlay var(--d-duration-fast) var(--d-ease) allow-discrete,
+    display var(--d-duration-fast) var(--d-ease) allow-discrete;
 }
 
 .d-popover:popover-open {
   opacity: 1;
-  transform: scale(1);
+  transform: scale(1) translateY(0);
 }
 
 @starting-style {
   .d-popover:popover-open {
     opacity: 0;
-    transform: scale(0.97);
+    transform: scale(0.97) translateY(4px);
   }
 }
 

package/src/components/ui/radio/radio.css

@@ -17,11 +17,13 @@
   width: 1.125rem;
   height: 1.125rem;
   flex-shrink: 0;
-  background: var(--d-surface-page);
+  background: var(--d-surface-card);
   border: 2px solid var(--d-border-color);
   border-radius: 50%;
   cursor: pointer;
-  transition: all var(--d-duration-fast) ease;
+  transition:
+    border-color var(--d-duration-fast) var(--d-ease),
+    border-width var(--d-duration-fast) var(--d-ease);
 }
 
 .d-radio input:checked {
@@ -31,7 +33,7 @@
 
 .d-radio 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-radio input:disabled {

package/src/components/ui/separator/separator.css

@@ -3,7 +3,7 @@
 .d-separator {
   border: none;
   height: 1px;
-  background: var(--d-border-color);
+  background: var(--d-border-light);
   margin: var(--d-space-4) 0;
 }
 
@@ -23,7 +23,7 @@
   gap: var(--d-space-3);
   font-family: var(--d-font-sans);
   font-size: var(--d-text-xs);
-  color: var(--d-text-muted);
+  color: var(--d-text-tertiary);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin: var(--d-space-4) 0;
@@ -34,5 +34,5 @@
   content: "";
   flex: 1;
   height: 1px;
-  background: var(--d-border-color);
+  background: var(--d-border-light);
 }

package/src/components/ui/skeleton/skeleton.css

@@ -9,25 +9,15 @@
   display: block;
   background: linear-gradient(
     90deg,
-    var(--d-surface-card) 25%,
-    var(--d-surface-raised) 50%,
-    var(--d-surface-card) 75%
+    var(--d-surface-raised) 25%,
+    var(--d-surface-card) 50%,
+    var(--d-surface-raised) 75%
   );
   background-size: 200% 100%;
   animation: d-shimmer 1.6s ease infinite;
   border-radius: var(--d-radius-sm);
 }
 
-[data-theme="light"] .d-skeleton {
-  background: linear-gradient(
-    90deg,
-    #ececec 25%,
-    #f4f4f4 50%,
-    #ececec 75%
-  );
-  background-size: 200% 100%;
-}
-
 .d-skeleton-text {
   height: 0.875rem;
   width: 100%;

package/src/components/ui/slider/slider.css

@@ -16,10 +16,10 @@
   width: 1.125rem;
   height: 1.125rem;
   background: var(--d-accent);
-  border: 2px solid #fff;
+  border: 2px solid var(--d-surface-card);
   border-radius: 50%;
   cursor: pointer;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--d-shadow-xs);
   transition: transform var(--d-duration-fast) var(--d-ease-bounce);
 }
 
@@ -27,10 +27,10 @@
   width: 1.125rem;
   height: 1.125rem;
   background: var(--d-accent);
-  border: 2px solid #fff;
+  border: 2px solid var(--d-surface-card);
   border-radius: 50%;
   cursor: pointer;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--d-shadow-xs);
   transition: transform var(--d-duration-fast) var(--d-ease-bounce);
 }
 
@@ -43,7 +43,7 @@
 }
 
 .d-slider:focus-visible {
-  box-shadow: var(--d-shadow-glow);
+  box-shadow: 0 0 0 2px var(--d-surface-page), 0 0 0 4px var(--d-accent);
 }
 
 .d-slider:disabled {

package/src/components/ui/table/table.css

@@ -4,7 +4,7 @@
   width: 100%;
   overflow-x: auto;
   border: 1px solid var(--d-border-color);
-  border-radius: var(--d-radius-md);
+  border-radius: var(--d-radius-lg);
 }
 
 .d-table {
@@ -21,7 +21,7 @@
   font-size: var(--d-text-xs);
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--d-text-muted);
+  color: var(--d-text-tertiary);
   text-align: left;
   background: var(--d-surface-raised);
   border-bottom: 1px solid var(--d-border-color);
@@ -29,7 +29,7 @@
 
 .d-table td {
   padding: var(--d-space-3) var(--d-space-4);
-  border-bottom: 1px solid var(--d-border-color);
+  border-bottom: 1px solid var(--d-border-light);
 }
 
 .d-table tbody tr:last-child td {
@@ -37,7 +37,7 @@
 }
 
 .d-table tbody tr {
-  transition: background var(--d-duration-fast) ease;
+  transition: background var(--d-duration-fast) var(--d-ease);
 }
 
 .d-table tbody tr:hover {

package/src/components/ui/tabs/tabs.css

@@ -22,7 +22,10 @@
   border-bottom: 2px solid transparent;
   cursor: pointer;
   white-space: nowrap;
-  transition: all var(--d-duration-fast) ease;
+  transition:
+    color var(--d-duration-fast) var(--d-ease),
+    border-color var(--d-duration-fast) var(--d-ease),
+    background var(--d-duration-fast) var(--d-ease);
   margin-bottom: -1px;
 }
 
@@ -71,4 +74,5 @@
   background: var(--d-surface-card);
   color: var(--d-text-primary);
   border-color: var(--d-border-color);
+  box-shadow: var(--d-shadow-xs);
 }

package/src/components/ui/toast/toast.css

@@ -30,9 +30,9 @@
   gap: var(--d-space-3);
   padding: var(--d-space-4) var(--d-space-4) var(--d-space-4) var(--d-space-5);
   background: var(--d-surface-card);
-  border: 1px solid var(--d-border-color);
+  border: 1px solid var(--d-border-light);
   border-radius: var(--d-radius-lg);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--d-shadow-md);
   font-family: var(--d-font-sans);
   animation: d-toast-in var(--d-duration-slow) var(--d-ease) forwards;
 }
@@ -72,29 +72,41 @@
   color: var(--d-text-muted);
   cursor: pointer;
   border-radius: var(--d-radius-sm);
-  transition: color var(--d-duration-fast) ease;
+  transition:
+    color var(--d-duration-fast) var(--d-ease),
+    background var(--d-duration-fast) var(--d-ease);
 }
 
 .d-toast-close:hover {
   color: var(--d-text-primary);
+  background: var(--d-surface-raised);
+}
+
+.d-toast-close:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--d-accent);
 }
 
 .d-toast-success {
   --_tone: var(--d-success);
   --_tone-bg: var(--d-success-light);
+  border-left: 3px solid var(--d-success);
 }
 
 .d-toast-error {
   --_tone: var(--d-error);
   --_tone-bg: var(--d-error-light);
+  border-left: 3px solid var(--d-error);
 }
 
 .d-toast-warning {
   --_tone: var(--d-warning);
   --_tone-bg: var(--d-warning-light);
+  border-left: 3px solid var(--d-warning);
 }
 
 .d-toast-info {
   --_tone: var(--d-info);
   --_tone-bg: var(--d-info-light);
+  border-left: 3px solid var(--d-info);
 }

package/src/components/ui/toggle/toggle.css

@@ -25,11 +25,13 @@
   width: 2.75rem;
   height: 1.5rem;
 
-  background: var(--d-surface-raised);
+  background: var(--d-border-color);
   border: 1px solid var(--d-border-color);
   border-radius: var(--d-radius-full);
 
-  transition: background var(--d-duration-fast) ease, border-color var(--d-duration-fast) ease;
+  transition:
+    background var(--d-duration-fast) var(--d-ease),
+    border-color var(--d-duration-fast) var(--d-ease);
 }
 
 .d-toggle-track::after {
@@ -40,13 +42,12 @@
   width: 1.125rem;
   height: 1.125rem;
 
-  background: #ffffff;
+  background: var(--d-surface-card);
   border-radius: 50%;
-  transition: transform var(--d-duration) var(--d-ease-bounce);
-}
-
-[data-theme="light"] .d-toggle-track::after {
-  background: #0a0a0a;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  transition:
+    transform var(--d-duration) var(--d-ease-bounce),
+    background var(--d-duration-fast) var(--d-ease);
 }
 
 .d-toggle input:checked + .d-toggle-track {
@@ -56,11 +57,12 @@
 
 .d-toggle input:checked + .d-toggle-track::after {
   transform: translateX(1.25rem);
+  background: var(--d-text-inverse);
 }
 
 .d-toggle input:focus-visible + .d-toggle-track {
   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-toggle input:disabled + .d-toggle-track {

package/src/components/ui/tokens/tokens.css

@@ -3,13 +3,14 @@
 :root,
 [data-theme="light"] {
   --d-bg: #ffffff;
-  --d-bg-card: #f8f8f8;
-  --d-bg-elevated: #f0f0f0;
+  --d-bg-card: #ffffff;
+  --d-bg-elevated: #f5f5f5;
   --d-fg: #0a0a0a;
   --d-fg-muted: #6b7280;
   --d-accent: #2563eb;
   --d-accent-hover: #1d4ed8;
   --d-border: #e5e5e5;
+  --d-border-light: rgba(0, 0, 0, 0.06);
 
   --d-primary-50: #eff6ff;
   --d-primary-100: #dbeafe;
@@ -101,8 +102,8 @@
   --d-radius-xl: 14px;
   --d-radius-full: 9999px;
 
-  --d-shadow-xs: none;
-  --d-shadow-sm: none;
+  --d-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --d-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
   --d-shadow-md: 0 10px 26px rgba(0, 0, 0, 0.08);
   --d-shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.12);
   --d-shadow-glow: 0 0 0 1px var(--d-accent);
@@ -120,6 +121,7 @@
 
   --d-text-primary: var(--d-fg);
   --d-text-secondary: var(--d-fg-muted);
+  --d-text-tertiary: #a1a1aa;
   --d-text-muted: var(--d-fg-muted);
   --d-text-inverse: #ffffff;
 
@@ -144,6 +146,12 @@
   --d-accent: #3b82f6;
   --d-accent-hover: #2563eb;
   --d-border: #262626;
+  --d-border-light: rgba(255, 255, 255, 0.06);
+
+  --d-text-tertiary: #52525b;
+
+  --d-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --d-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
 
   --d-success: #22c55e;
   --d-success-light: rgba(34, 197, 94, 0.14);

package/src/components/ui/tooltip/tooltip.css

@@ -9,18 +9,20 @@
   position: absolute;
   bottom: calc(100% + 6px);
   left: 50%;
-  transform: translateX(-50%);
+  transform: translateX(-50%) translateY(4px);
   padding: var(--d-space-1) var(--d-space-2);
   font-family: var(--d-font-sans);
   font-size: var(--d-text-xs);
   font-weight: var(--d-font-medium);
-  color: #fff;
+  color: var(--d-text-inverse);
   background: var(--d-slate-900);
   border-radius: var(--d-radius-sm);
   white-space: nowrap;
   pointer-events: none;
   opacity: 0;
-  transition: opacity var(--d-duration-fast) ease;
+  transition:
+    opacity var(--d-duration-fast) var(--d-ease),
+    transform var(--d-duration-fast) var(--d-ease);
   z-index: var(--d-z-tooltip);
 }
 
@@ -30,11 +32,17 @@
 
 .d-tooltip:hover::after {
   opacity: 1;
+  transform: translateX(-50%) translateY(0);
 }
 
 .d-tooltip-bottom::after {
   bottom: auto;
   top: calc(100% + 6px);
+  transform: translateX(-50%) translateY(-4px);
+}
+
+.d-tooltip-bottom:hover::after {
+  transform: translateX(-50%) translateY(0);
 }
 
 .d-tooltip-left::after {
@@ -42,12 +50,20 @@
   top: 50%;
   left: auto;
   right: calc(100% + 6px);
-  transform: translateY(-50%);
+  transform: translateY(-50%) translateX(4px);
+}
+
+.d-tooltip-left:hover::after {
+  transform: translateY(-50%) translateX(0);
 }
 
 .d-tooltip-right::after {
   bottom: auto;
   top: 50%;
   left: calc(100% + 6px);
-  transform: translateY(-50%);
+  transform: translateY(-50%) translateX(-4px);
+}
+
+.d-tooltip-right:hover::after {
+  transform: translateY(-50%) translateX(0);
 }

package/src/components/ui/typography/typography.css

@@ -40,7 +40,7 @@
 .d-link {
   color: var(--d-accent);
   text-decoration: none;
-  transition: color var(--d-duration-fast) ease;
+  transition: color var(--d-duration-fast) var(--d-ease);
 }
 
 .d-link:hover {