@celestia-island/hikari 0.43.13 → 0.43.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.43.13",
+  "version": "0.43.14",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkAlert.scss

@@ -3,10 +3,10 @@
   align-items: flex-start;
   gap: var(--space-12, 12px);
   padding: var(--space-12, 12px) var(--space-16, 16px);
-  border-radius: var(--hi-radius-md, 8px);
+  border-radius: var(--radius-md, 8px);
   border: 1px solid transparent;
   border-inline-start-width: 4px;
-  color: var(--hi-color-text-primary, #333);
+  color: var(--hi-color-text-primary, #1e1e1e);
 }
 
 .hk-alert-banner {
@@ -45,27 +45,27 @@
 }
 
 .hk-alert-warning {
-  background: color-mix(in srgb, var(--hi-color-warning, #d29922) 8%, transparent);
-  border-color: color-mix(in srgb, var(--hi-color-warning, #d29922) 15%, transparent);
-  border-inline-start-color: var(--hi-color-warning, #d29922);
+  background: color-mix(in srgb, var(--hi-color-warning, #eed677) 8%, transparent);
+  border-color: color-mix(in srgb, var(--hi-color-warning, #eed677) 15%, transparent);
+  border-inline-start-color: var(--hi-color-warning, #eed677);
 
-  .hk-alert-icon { color: var(--hi-color-warning, #d29922); }
+  .hk-alert-icon { color: var(--hi-color-warning, #eed677); }
 }
 
 .hk-alert-info {
-  background: color-mix(in srgb, var(--hi-color-primary, #58a6ff) 8%, transparent);
-  border-color: color-mix(in srgb, var(--hi-color-primary, #58a6ff) 15%, transparent);
-  border-inline-start-color: var(--hi-color-primary, #58a6ff);
+  background: color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 8%, transparent);
+  border-color: color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 15%, transparent);
+  border-inline-start-color: var(--hi-color-primary, #7aa2f7);
 
-  .hk-alert-icon { color: var(--hi-color-primary, #58a6ff); }
+  .hk-alert-icon { color: var(--hi-color-primary, #7aa2f7); }
 }
 
 .hk-alert-success {
-  background: color-mix(in srgb, var(--hi-color-success, #3fb950) 8%, transparent);
-  border-color: color-mix(in srgb, var(--hi-color-success, #3fb950) 15%, transparent);
-  border-inline-start-color: var(--hi-color-success, #3fb950);
+  background: color-mix(in srgb, var(--hi-color-success, #0eb840) 8%, transparent);
+  border-color: color-mix(in srgb, var(--hi-color-success, #0eb840) 15%, transparent);
+  border-inline-start-color: var(--hi-color-success, #0eb840);
 
-  .hk-alert-icon { color: var(--hi-color-success, #3fb950); }
+  .hk-alert-icon { color: var(--hi-color-success, #0eb840); }
 }
 
 /* ── Icon ──────────────────────────────────────── */
@@ -93,7 +93,7 @@
 .hk-alert-text {
   margin: 0;
   line-height: 1.5;
-  color: color-mix(in srgb, var(--hi-color-text-secondary, #666) 85%, transparent);
+  color: color-mix(in srgb, var(--hi-color-text-secondary, #666666) 85%, transparent);
 }
 
 /* ── Close button ──────────────────────────────── */
@@ -107,19 +107,19 @@
   height: 22px;
   border: 0;
   background: transparent;
-  border-radius: var(--hi-radius-sm, 4px);
-  color: var(--hi-color-muted, #666);
+  border-radius: var(--radius-sm, 4px);
+  color: var(--hi-color-muted, #6c6c6c);
   cursor: pointer;
   padding: 0;
-  transition: background var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
+  transition: background var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   &:hover {
-    background: var(--hi-color-surface, #fff);
-    color: var(--hi-color-text-primary, #333);
+    background: var(--hi-color-surface, #f0f4f8);
+    color: var(--hi-color-text-primary, #1e1e1e);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--hi-color-primary, #58a6ff);
+    outline: 2px solid var(--hi-color-primary, #7aa2f7);
     outline-offset: 2px;
   }
 }

package/src/components/HkAltSignIn.scss

@@ -18,7 +18,7 @@
   background: transparent;
   cursor: pointer;
   font-size: var(--text-xs, 0.75rem);
-  color: var(--hi-color-muted, #666);
+  color: var(--hi-color-muted, #6c6c6c);
   transition:
     color var(--duration-normal, 0.3s) ease,
     opacity var(--duration-normal, 0.3s) ease;
@@ -26,12 +26,12 @@
 
 .hk-alt-signin__trigger:hover:not(:disabled),
 .hk-alt-signin__trigger[aria-expanded="true"] {
-  color: var(--hi-color-text-secondary, #999);
+  color: var(--hi-color-text-secondary, #666666);
 }
 
 /* Keyboard position feedback on the full-width disclosure row. */
 .hk-alt-signin__trigger:focus-visible:not(:disabled) {
-  outline: 2px solid var(--hi-color-primary, #58a6ff);
+  outline: 2px solid var(--hi-color-primary, #7aa2f7);
   outline-offset: 2px;
 }
 

package/src/components/HkAuthMethodList.scss

@@ -9,7 +9,7 @@
   align-items: center;
   gap: var(--space-10, 0.625rem);
   margin: 0 0 var(--space-4, 0.25rem);
-  color: var(--hi-color-muted, #999);
+  color: var(--hi-color-muted, #6c6c6c);
   font-size: var(--text-xs, 0.75rem);
   text-align: center;
 }
@@ -19,7 +19,7 @@
   content: "";
   flex: 1;
   height: 1px;
-  background: var(--hi-color-border, #ddd);
+  background: var(--hi-color-border, #646464);
 }
 
 /* The component's own wrapper is `display: contents` (measurement anchor +

package/src/components/HkAvatar.scss

@@ -50,5 +50,5 @@
 
 [data-theme="dark"] .hk-avatar {
   background-color: var(--hi-surface);
-  color: var(--hi-color-text-secondary, rgba(255, 255, 255, 0.6));
+  color: var(--hi-color-text-secondary, rgba(102,102,102,0.6));
 }

package/src/components/HkBlockingToast.scss

@@ -32,7 +32,7 @@
   align-items: flex-start;
   gap: var(--space-8, 8px);
   padding: var(--space-12, 12px) var(--space-16, 16px);
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   font-size: var(--text-base, 0.875rem);
   line-height: 1.4;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
@@ -77,12 +77,12 @@
 // Variant backgrounds follow the HkToast conventions (including the
 // dark-on-amber warning text for contrast).
 .hk-blocking-toast-info {
-  background: var(--hi-color-info, #58a6ff);
+  background: var(--hi-color-info, #6abed6);
   color: #fff;
 }
 
 .hk-blocking-toast-warning {
-  background: var(--hi-color-warning, #d29922);
+  background: var(--hi-color-warning, #eed677);
   color: #1c1c1e;
 }
 
@@ -95,13 +95,13 @@
 // cards go absolute so the remaining ones glide up (hk-toast pattern).
 .hk-blocking-toast-enter-active {
   transition-property: background-color, border-color, color, box-shadow, opacity, transform;
-  transition-duration: var(--hi-duration-normal, 0.3s);
+  transition-duration: var(--duration-normal, 0.3s);
   transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 
 .hk-blocking-toast-leave-active {
   transition-property: background-color, border-color, color, box-shadow, opacity, transform;
-  transition-duration: var(--hi-duration-normal, 0.3s);
+  transition-duration: var(--duration-normal, 0.3s);
   transition-timing-function: cubic-bezier(0.36, 0, 0.66, 1);
   /* Only the positioning switch lives here; the leaving slot's box is
      frozen by the before-leave hook (pinLeaveGeometry), same contract
@@ -126,7 +126,7 @@
 }
 
 .hk-blocking-toast-move {
-  transition: transform var(--hi-duration-normal, 0.3s) ease;
+  transition: transform var(--duration-normal, 0.3s) ease;
 }
 
 // Reduced motion: drop the slide/FLIP choreography, cards snap in and

package/src/components/HkCheckbox.scss

@@ -23,12 +23,12 @@
   justify-content: center;
   width: 1.125rem;
   height: 1.125rem;
-  border-radius: var(--hi-radius-sm, 4px);
-  border: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
-  background: var(--hi-color-surface, rgba(255, 255, 255, 0.95));
+  border-radius: var(--radius-sm, 4px);
+  border: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
+  background: var(--hi-color-surface, rgba(240,244,248,0.95));
   transition:
-    border-color var(--hi-duration-normal, 0.3s) ease,
-    background var(--hi-duration-normal, 0.3s) ease;
+    border-color var(--duration-normal, 0.3s) ease,
+    background var(--duration-normal, 0.3s) ease;
   flex-shrink: 0;
   position: relative;
 }
@@ -38,13 +38,13 @@
 }
 
 .hk-checkbox-box[data-checked] {
-  background: var(--hi-color-primary, #ff6b9d);
-  border-color: var(--hi-color-primary, #ff6b9d);
+  background: var(--hi-color-primary, #7aa2f7);
+  border-color: var(--hi-color-primary, #7aa2f7);
 }
 
 .hk-checkbox-box[data-indeterminate] {
-  background: var(--hi-color-primary, #ff6b9d);
-  border-color: var(--hi-color-primary, #ff6b9d);
+  background: var(--hi-color-primary, #7aa2f7);
+  border-color: var(--hi-color-primary, #7aa2f7);
 }
 
 /* ---------- input ---------- */
@@ -62,8 +62,8 @@
    :focus-visible keeps mouse toggles ring-free. */
 .hk-checkbox-box:has(.hk-checkbox-input:focus-visible) {
   box-shadow:
-    0 0 0 2px var(--hi-color-surface, rgba(255, 255, 255, 0.95)),
-    0 0 0 4px var(--hi-color-primary, #ff6b9d);
+    0 0 0 2px var(--hi-color-surface, rgba(240,244,248,0.95)),
+    0 0 0 4px var(--hi-color-primary, #7aa2f7);
 }
 
 /* ---------- markers ---------- */

package/src/components/HkDatePicker.scss

@@ -23,15 +23,15 @@
   padding: var(--space-8, 8px) var(--space-12, 12px);
   background: color-mix(in srgb, rgb(var(--color-surface)) 55%, transparent);
   border: 1px solid color-mix(in srgb, rgb(var(--color-text)) 14%, transparent);
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   color: rgb(var(--color-text));
   font-family: inherit;
   font-size: var(--text-sm, 0.875rem);
   line-height: 1.5;
   transition:
-    background-color var(--hi-duration-fast, 0.15s) ease,
-    border-color var(--hi-duration-fast, 0.15s) ease,
-    box-shadow var(--hi-duration-fast, 0.15s) ease;
+    background-color var(--duration-fast, 0.15s) ease,
+    border-color var(--duration-fast, 0.15s) ease,
+    box-shadow var(--duration-fast, 0.15s) ease;
 }
 
 .hk-dp-trigger {
@@ -102,11 +102,11 @@
   padding: 0;
   border: 0;
   background: transparent;
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   color: var(--hi-color-muted);
   cursor: pointer;
   opacity: 0;
-  transition: opacity var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
+  transition: opacity var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   .hk-dp-trigger:hover &,
   .hk-dp-trigger:focus &,
@@ -183,13 +183,13 @@
   border: 0;
   width: 1.75rem;
   height: 1.75rem;
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   color: var(--hi-color-muted);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: background var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
+  transition: background var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   &:hover:not(:disabled) {
     background: var(--hi-color-surface);
@@ -232,8 +232,8 @@
   color: inherit;
   cursor: pointer;
   white-space: nowrap;
-  border-radius: var(--hi-radius-sm, 4px);
-  transition: background var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
+  border-radius: var(--radius-sm, 4px);
+  transition: background var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   &:hover {
     background: var(--hi-color-surface);
@@ -279,7 +279,7 @@
   appearance: none;
   background: transparent;
   border: 0;
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   /* Fixed height keeps the six-row day grid — and therefore the shared
    * stage height — independent of the panel width, so drilling between
    * views never changes the popup's size (enlarged on touch). */
@@ -291,7 +291,7 @@
   cursor: pointer;
   font-size: var(--text-xs, 0.75rem);
   font-variant-numeric: tabular-nums;
-  transition: background var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
+  transition: background var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   &:hover:not(:disabled):not(.is-selected) {
     background: var(--hi-color-surface);

package/src/components/HkDateTimePicker.scss

@@ -59,8 +59,8 @@
   color: inherit;
   cursor: pointer;
   white-space: nowrap;
-  border-radius: var(--hi-radius-sm, 4px);
-  transition: background var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
+  border-radius: var(--radius-sm, 4px);
+  transition: background var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   &:hover {
     background: var(--hi-color-surface);
@@ -80,13 +80,13 @@
   border: 0;
   width: 1.75rem;
   height: 1.75rem;
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   color: var(--hi-color-muted);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: background var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
+  transition: background var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   &:hover {
     background: var(--hi-color-surface);
@@ -122,7 +122,7 @@
   appearance: none;
   background: transparent;
   border: 0;
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   /* Fixed height keeps the six-row day grid — and therefore the shared
    * stage height — independent of the picker width, so drilling between
    * views never changes the picker's size (enlarged on touch). */
@@ -134,7 +134,7 @@
   cursor: pointer;
   font-size: var(--text-xs, 0.75rem);
   font-variant-numeric: tabular-nums;
-  transition: background var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
+  transition: background var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   &:hover:not(:disabled):not(.is-selected) {
     background: var(--hi-color-surface);
@@ -232,8 +232,8 @@
   justify-content: center;
   color: var(--hi-color-muted);
   cursor: pointer;
-  border-radius: var(--hi-radius-sm, 4px);
-  transition: color var(--hi-duration-fast, 0.15s) ease, background var(--hi-duration-fast, 0.15s) ease;
+  border-radius: var(--radius-sm, 4px);
+  transition: color var(--duration-fast, 0.15s) ease, background var(--duration-fast, 0.15s) ease;
 
   &:hover {
     color: var(--hi-color-text-primary);
@@ -266,13 +266,13 @@
   appearance: none;
   background: transparent;
   border: 1px solid color-mix(in srgb, var(--hi-color-border) 18%, transparent);
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   padding: var(--space-4, 4px) var(--space-10, 10px);
   font-size: var(--text-xs, 0.75rem);
   font-weight: 600;
   color: var(--hi-color-muted);
   cursor: pointer;
-  transition: color var(--hi-duration-fast, 0.15s) ease, border-color var(--hi-duration-fast, 0.15s) ease;
+  transition: color var(--duration-fast, 0.15s) ease, border-color var(--duration-fast, 0.15s) ease;
 
   &:hover {
     color: var(--hi-color-text-primary);
@@ -300,12 +300,12 @@
   padding: var(--space-4, 4px) var(--space-10, 10px);
   background: var(--hi-color-surface);
   border: 1px solid color-mix(in srgb, var(--hi-color-border) 18%, transparent);
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   color: color-mix(in srgb, var(--hi-color-text-secondary) 70%, transparent);
   font-size: var(--text-xs, 0.75rem);
   font-variant-numeric: tabular-nums;
   cursor: pointer;
-  transition: border-color var(--hi-duration-fast, 0.15s) ease, color var(--hi-duration-fast, 0.15s) ease;
+  transition: border-color var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
 
   &:hover,
   &[aria-expanded="true"] {
@@ -330,7 +330,7 @@
 
 .hk-dtp-trigger-chev {
   color: var(--hi-color-muted);
-  transition: transform var(--hi-duration-fast, 0.15s) ease;
+  transition: transform var(--duration-fast, 0.15s) ease;
 }
 
 .hk-dtp-trigger-chev.is-open {
@@ -378,12 +378,12 @@
   background: var(--hi-color-primary);
   color: rgb(var(--color-on-solid-text, 255 255 255));
   border: 0;
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   padding: var(--space-6, 6px) var(--space-14, 14px);
   font-size: var(--text-xs, 0.75rem);
   font-weight: 600;
   cursor: pointer;
-  transition: filter var(--hi-duration-fast, 0.15s) ease;
+  transition: filter var(--duration-fast, 0.15s) ease;
 
   &:hover { filter: brightness(1.08); }
   &:focus-visible { outline: 2px solid color-mix(in srgb, var(--hi-color-primary) 55%, transparent); outline-offset: 2px; }
@@ -400,7 +400,7 @@
   padding: var(--space-8, 8px) var(--space-12, 12px);
   background: var(--hi-color-surface);
   border: 1px solid color-mix(in srgb, var(--hi-color-border) 18%, transparent);
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   color: var(--hi-color-text-primary);
   font-family: inherit;
   font-size: var(--text-sm, 0.875rem);

package/src/components/HkDivider.scss

@@ -1,5 +1,5 @@
 .hk-divider {
-  --hk-divider-color: var(--hi-color-border, rgba(0, 0, 0, 0.12));
+  --hk-divider-color: var(--hi-color-border, rgba(100,100,100,0.12));
   flex-shrink: 0;
 
   width: 100%;
@@ -16,11 +16,11 @@
 }
 
 .hk-divider-faint {
-  --hk-divider-color: var(--hi-color-border, rgba(0, 0, 0, 0.06));
+  --hk-divider-color: var(--hi-color-border, rgba(100,100,100,0.06));
 }
 
 .hk-divider-input {
-  --hk-divider-color: var(--hi-color-border, rgba(0, 0, 0, 0.15));
+  --hk-divider-color: var(--hi-color-border, rgba(100,100,100,0.15));
 }
 
 .hk-divider-dashed.hk-divider-vertical {

package/src/components/HkDraggableGrid.scss

@@ -12,9 +12,9 @@
 
 .hk-draggable-grid-row-phantom {
   min-height: 44px;
-  border: 1px dashed var(--hi-color-primary, #58a6ff);
+  border: 1px dashed var(--hi-color-primary, #7aa2f7);
   border-radius: var(--radius-sm, 4px);
-  background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.04);
+  background: rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.04);
 }
 
 .hk-draggable-grid-cell {
@@ -26,7 +26,7 @@
   padding: var(--space-8, 0.5rem) var(--space-10, 0.625rem);
   border-radius: var(--radius-sm, 4px);
   background: var(--hi-color-bg-subtle, #21262d);
-  border: 1px solid var(--hi-color-border, #30363d);
+  border: 1px solid var(--hi-color-border, #646464);
   transition:
     transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
     opacity 150ms cubic-bezier(0.16, 1, 0.3, 1),
@@ -45,13 +45,13 @@
     opacity: 0.35;
     transform: scale(0.96);
     border-style: dashed;
-    border-color: var(--hi-color-primary, #58a6ff);
-    background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.04);
+    border-color: var(--hi-color-primary, #7aa2f7);
+    background: rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.04);
     cursor: grabbing;
   }
 
   &[data-placeholder="before"] {
-    box-shadow: inset 2px 0 0 0 var(--hi-color-primary, #58a6ff);
+    box-shadow: inset 2px 0 0 0 var(--hi-color-primary, #7aa2f7);
   }
 
   &[data-locked] {
@@ -61,30 +61,30 @@
     /* Locked cells never start a drag (tsx returns early) — no hover
      * affordance and no grab cursor on their surface. */
     &:hover {
-      border-color: var(--hi-color-border, #30363d);
+      border-color: var(--hi-color-border, #646464);
     }
   }
 
   .hk-draggable-grid[data-dragging] & {
     &:hover {
-      border-color: var(--hi-color-border, #30363d);
+      border-color: var(--hi-color-border, #646464);
     }
   }
 }
 
 .hk-draggable-grid-row[data-placeholder-row="after"] {
-  box-shadow: inset -2px 0 0 0 var(--hi-color-primary, #58a6ff);
+  box-shadow: inset -2px 0 0 0 var(--hi-color-primary, #7aa2f7);
 }
 
 /* RTL flips the flex flow, so the before/after insertion markers must
  * swap physical sides to keep pointing at the inline edge (HkBreadcrumb
  * precedent for the [dir="rtl"] override form). */
 [dir="rtl"] .hk-draggable-grid-cell[data-placeholder="before"] {
-  box-shadow: inset -2px 0 0 0 var(--hi-color-primary, #58a6ff);
+  box-shadow: inset -2px 0 0 0 var(--hi-color-primary, #7aa2f7);
 }
 
 [dir="rtl"] .hk-draggable-grid-row[data-placeholder-row="after"] {
-  box-shadow: inset 2px 0 0 0 var(--hi-color-primary, #58a6ff);
+  box-shadow: inset 2px 0 0 0 var(--hi-color-primary, #7aa2f7);
 }
 
 .hk-draggable-grid-cell-placeholder-target {

package/src/components/HkDraggableList.scss

@@ -12,7 +12,7 @@
   padding: var(--space-8, 0.5rem) var(--space-10, 0.625rem);
   border-radius: var(--radius-sm, 4px);
   background: var(--hi-color-bg-subtle, #21262d);
-  border: 1px solid var(--hi-color-border, #30363d);
+  border: 1px solid var(--hi-color-border, #646464);
   transition:
     transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
     opacity 150ms cubic-bezier(0.16, 1, 0.3, 1),
@@ -29,16 +29,16 @@
     opacity: 0.35;
     transform: scale(0.96);
     border-style: dashed;
-    border-color: var(--hi-color-primary, #58a6ff);
-    background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.04);
+    border-color: var(--hi-color-primary, #7aa2f7);
+    background: rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.04);
     cursor: grabbing;
   }
 
   &[data-placeholder="before"] {
-    box-shadow: inset 0 2px 0 0 var(--hi-color-primary, #58a6ff);
+    box-shadow: inset 0 2px 0 0 var(--hi-color-primary, #7aa2f7);
   }
   &[data-placeholder="after"] {
-    box-shadow: inset 0 -2px 0 0 var(--hi-color-primary, #58a6ff);
+    box-shadow: inset 0 -2px 0 0 var(--hi-color-primary, #7aa2f7);
   }
 
   &[data-locked] {
@@ -47,7 +47,7 @@
 
   .hk-draggable-list[data-dragging] & {
     &:hover {
-      border-color: var(--hi-color-border, #30363d);
+      border-color: var(--hi-color-border, #646464);
     }
   }
 }