@celestia-island/hikari 0.43.13 → 0.43.14

package/src/components/HkSelectionGrid.scss

@@ -44,7 +44,7 @@
   gap: var(--space-8, 0.5rem);
   padding: var(--space-12, 0.75rem);
   border-radius: var(--radius-sm, 4px);
-  border: 1px solid var(--hi-color-border, #30363d);
+  border: 1px solid var(--hi-color-border, #646464);
   cursor: pointer;
   transition:
     border-color 200ms ease,
@@ -53,13 +53,13 @@
   user-select: none;
 
   &:hover {
-    border-color: var(--hi-color-primary, #58a6ff);
-    background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.04);
-    box-shadow: 0 2px 12px rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.1);
+    border-color: var(--hi-color-primary, #7aa2f7);
+    background: rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.04);
+    box-shadow: 0 2px 12px rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.1);
   }
 
   &:active {
-    box-shadow: 0 1px 4px rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.06);
+    box-shadow: 0 1px 4px rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.06);
   }
 
   // Keyboard focus indicator drawn inside the border box (negative outline
@@ -76,15 +76,15 @@
   // the frame visibly lopsided (observed as a 1px top vs 2px sides under
   // HkStepFlow's sticky header).
   &[data-selected] {
-    border-color: var(--hi-color-primary, #58a6ff);
-    background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.06);
-    box-shadow: inset 0 0 0 1px var(--hi-color-primary, #58a6ff);
+    border-color: var(--hi-color-primary, #7aa2f7);
+    background: rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.06);
+    box-shadow: inset 0 0 0 1px var(--hi-color-primary, #7aa2f7);
 
     &:hover {
-      background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.09);
+      background: rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.09);
       box-shadow:
-        inset 0 0 0 1px var(--hi-color-primary, #58a6ff),
-        0 2px 12px rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.14);
+        inset 0 0 0 1px var(--hi-color-primary, #7aa2f7),
+        0 2px 12px rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.14);
     }
 
     .hk-selection-grid-check {
@@ -93,11 +93,11 @@
     }
 
     .hk-selection-grid-icon {
-      color: var(--hi-color-primary, #58a6ff);
+      color: var(--hi-color-primary, #7aa2f7);
     }
 
     .hk-selection-grid-name {
-      color: var(--hi-color-primary, #58a6ff);
+      color: var(--hi-color-primary, #7aa2f7);
       font-weight: 600;
     }
   }
@@ -113,7 +113,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--hi-color-primary, #58a6ff);
+  background: var(--hi-color-primary, #7aa2f7);
   color: rgb(var(--color-on-solid-icon, 255 255 255));
   font-size: var(--text-2xs, 0.625rem);
   opacity: 0;
@@ -168,18 +168,18 @@
   letter-spacing: 0.02em;
 
   &[data-variant="primary"] {
-    background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.12);
-    color: var(--hi-color-primary, #58a6ff);
+    background: rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.12);
+    color: var(--hi-color-primary, #7aa2f7);
   }
 
   &[data-variant="success"] {
-    background: rgb(from var(--hi-color-success, #3fb950) r g b / 0.12);
-    color: var(--hi-color-success, #3fb950);
+    background: rgb(from var(--hi-color-success, #0eb840) r g b / 0.12);
+    color: var(--hi-color-success, #0eb840);
   }
 
   &[data-variant="info"] {
-    background: rgb(from var(--hi-color-info, #79c0ff) r g b / 0.12);
-    color: var(--hi-color-info, #79c0ff);
+    background: rgb(from var(--hi-color-info, #6abed6) r g b / 0.12);
+    color: var(--hi-color-info, #6abed6);
   }
 }
 

package/src/components/HkSelectionWaterfall.scss

@@ -24,7 +24,7 @@
   gap: var(--space-4, 0.25rem);
   padding: var(--space-4, 0.25rem) var(--space-10, 0.625rem);
   border-radius: 9999px;
-  border: 1px solid var(--hi-color-border, #30363d);
+  border: 1px solid var(--hi-color-border, #646464);
   font-size: 0.6875rem;
   cursor: pointer;
   transition:
@@ -35,9 +35,9 @@
   white-space: nowrap;
 
   &:hover {
-    border-color: var(--hi-color-primary, #58a6ff);
-    background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.04);
-    box-shadow: 0 2px 8px rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.1);
+    border-color: var(--hi-color-primary, #7aa2f7);
+    background: rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.04);
+    box-shadow: 0 2px 8px rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.1);
   }
 
   // Keyboard focus drawn inside the border box (negative offset), matching
@@ -49,13 +49,13 @@
   }
 
   &:active {
-    box-shadow: 0 1px 4px rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.06);
+    box-shadow: 0 1px 4px rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.06);
   }
 
   &[data-selected] {
-    border-color: var(--hi-color-primary, #58a6ff);
-    background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.1);
-    color: var(--hi-color-primary, #58a6ff);
+    border-color: var(--hi-color-primary, #7aa2f7);
+    background: rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.1);
+    color: var(--hi-color-primary, #7aa2f7);
     font-weight: 500;
   }
 }
@@ -67,7 +67,7 @@
   width: 0.875rem;
   height: 0.875rem;
   border-radius: 50%;
-  background: var(--hi-color-primary, #58a6ff);
+  background: var(--hi-color-primary, #7aa2f7);
   color: rgb(var(--color-on-solid-icon, 255 255 255));
 }
 
@@ -83,18 +83,18 @@
   color: var(--hi-color-text-tertiary, #8b949e);
 
   &[data-variant="success"] {
-    background: rgb(from var(--hi-color-success, #3fb950) r g b / 0.12);
-    color: var(--hi-color-success, #3fb950);
+    background: rgb(from var(--hi-color-success, #0eb840) r g b / 0.12);
+    color: var(--hi-color-success, #0eb840);
   }
 
   &[data-variant="info"] {
-    background: rgb(from var(--hi-color-info, #79c0ff) r g b / 0.12);
-    color: var(--hi-color-info, #79c0ff);
+    background: rgb(from var(--hi-color-info, #6abed6) r g b / 0.12);
+    color: var(--hi-color-info, #6abed6);
   }
 
   &[data-variant="primary"] {
-    background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.12);
-    color: var(--hi-color-primary, #58a6ff);
+    background: rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.12);
+    color: var(--hi-color-primary, #7aa2f7);
   }
 }
 

package/src/components/HkSidebar.scss

@@ -1,25 +1,25 @@
 .hk-sidebar {
   flex-shrink: 0;
   height: 100%;
-  transition: width var(--hi-duration-normal, 0.3s) ease;
+  transition: width var(--duration-normal, 0.3s) ease;
 }
 
 .hk-sidebar-panel {
   display: flex;
   flex-direction: column;
   height: 100%;
-  background: var(--hk-sidebar-bg, var(--hi-color-surface, rgba(255, 255, 255, 0.95)));
+  background: var(--hk-sidebar-bg, var(--hi-color-surface, rgba(240,244,248,0.95)));
   backdrop-filter: blur(var(--blur-sm, 8px));
   /* Logical edge: the border rides the content-facing side in either
    * direction (LTR sidebar docks left, RTL docks right). */
-  border-inline-end: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
-  transition: width var(--hi-duration-normal, 0.3s) ease;
+  border-inline-end: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
+  transition: width var(--duration-normal, 0.3s) ease;
   overflow: hidden;
 }
 
 .hk-sidebar-header {
   padding: var(--space-16) var(--space-12);
-  border-bottom: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.06));
+  border-bottom: 1px solid var(--hi-color-border, rgba(100,100,100,0.06));
   flex-shrink: 0;
   min-height: 56px;
   display: flex;
@@ -54,7 +54,7 @@
 
 .hk-sidebar-footer {
   padding: var(--space-16) var(--space-10);
-  border-top: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.06));
+  border-top: 1px solid var(--hi-color-border, rgba(100,100,100,0.06));
   flex-shrink: 0;
 }
 
@@ -88,7 +88,7 @@
     [dir="rtl"] & {
       box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
     }
-    border-inline-end: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
+    border-inline-end: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
   }
 }
 

package/src/components/HkSkeleton.scss

@@ -1,18 +1,18 @@
 .hk-skeleton {
   display: inline-block;
-  background: color-mix(in srgb, var(--hi-color-primary, #58a6ff) 8%, transparent);
+  background: color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 8%, transparent);
 }
 
 .hk-skeleton[data-tone="muted"] {
-  background: color-mix(in srgb, var(--hi-color-text-primary, #333) 12%, transparent);
+  background: color-mix(in srgb, var(--hi-color-text-primary, #1e1e1e) 12%, transparent);
 }
 
 .hk-skeleton[data-animated] {
   background: linear-gradient(
     90deg,
-    color-mix(in srgb, var(--hi-color-primary, #58a6ff) 8%, transparent) 25%,
-    color-mix(in srgb, var(--hi-color-primary, #58a6ff) 18%, transparent) 50%,
-    color-mix(in srgb, var(--hi-color-primary, #58a6ff) 8%, transparent) 75%
+    color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 8%, transparent) 25%,
+    color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 18%, transparent) 50%,
+    color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 8%, transparent) 75%
   );
   background-size: 200% 100%;
   animation: hk-skeleton-shimmer 1.5s ease-in-out infinite;
@@ -21,9 +21,9 @@
 .hk-skeleton[data-tone="muted"][data-animated] {
   background: linear-gradient(
     90deg,
-    color-mix(in srgb, var(--hi-color-text-primary, #333) 10%, transparent) 25%,
-    color-mix(in srgb, var(--hi-color-text-primary, #333) 22%, transparent) 50%,
-    color-mix(in srgb, var(--hi-color-text-primary, #333) 10%, transparent) 75%
+    color-mix(in srgb, var(--hi-color-text-primary, #1e1e1e) 10%, transparent) 25%,
+    color-mix(in srgb, var(--hi-color-text-primary, #1e1e1e) 22%, transparent) 50%,
+    color-mix(in srgb, var(--hi-color-text-primary, #1e1e1e) 10%, transparent) 75%
   );
   background-size: 200% 100%;
   animation: hk-skeleton-shimmer 1.5s ease-in-out infinite;

package/src/components/HkSlider.scss

@@ -83,7 +83,7 @@
     0 0 0 2px rgb(var(--color-surface, var(--color-background)) / 90%),
     0 1px 3px rgb(0 0 0 / 35%);
   transform: translateY(-50%);
-  transition: transform var(--hi-duration-short, 0.15s);
+  transition: transform var(--duration-short, 0.15s);
   pointer-events: none;
 }
 

package/src/components/HkSplash.scss

@@ -5,7 +5,7 @@
   justify-content: center;
   min-height: 100vh;
   background: var(--hi-color-bg-canvas, #0d1117);
-  color: var(--hi-color-text-primary, #c9d1d9);
+  color: var(--hi-color-text-primary, #1e1e1e);
   font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif);
 }
 
@@ -25,13 +25,13 @@
 .hk-splash-title {
   font-size: 2rem;
   font-weight: 700;
-  color: var(--hi-color-primary, #58a6ff);
+  color: var(--hi-color-primary, #7aa2f7);
   margin: 0 0 var(--space-8, 0.5rem);
 }
 
 .hk-splash-subtitle {
   font-size: 1.1rem;
-  color: var(--hi-color-text-secondary, #8b949e);
+  color: var(--hi-color-text-secondary, #666666);
   margin: 0 0 var(--space-8, 0.5rem);
 }
 

package/src/components/HkStepFlow.scss

@@ -29,7 +29,7 @@
   z-index: var(--hk-stepflow-sticky-z, 10);
   background: var(
     --hk-stepflow-sticky-bg,
-    color-mix(in srgb, var(--hi-color-surface, #fff) 95%, transparent)
+    color-mix(in srgb, var(--hi-color-surface, #f0f4f8) 95%, transparent)
   );
   backdrop-filter: blur(6px);
   margin-bottom: 0;

package/src/components/HkSwitch.scss

@@ -92,7 +92,7 @@
      primaries (synthwave pink) while HkButton labels stayed white. */
   background: rgb(var(--color-on-solid-icon, 255 255 255));
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-  transition: transform 0.2s var(--hi-ease-default, cubic-bezier(0.4, 0, 0.2, 1));
+  transition: transform 0.2s var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
   z-index: 1;
 
   .hk-switch-sm & {

package/src/components/HkTable.scss

@@ -26,11 +26,11 @@
   width: 100%;
   font-size: var(--text-base, 0.875rem);
   border-collapse: collapse;
-  color: var(--hi-color-text-primary, #c9d1d9);
+  color: var(--hi-color-text-primary, #1e1e1e);
 }
 
 .hk-table-header-row {
-  border-bottom: 1px solid var(--hi-color-border, rgba(255, 255, 255, 0.08));
+  border-bottom: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
 }
 
 .hk-table-header-cell {
@@ -40,7 +40,7 @@
   text-align: start;
   font-size: var(--text-xs, 0.75rem);
   font-weight: 600;
-  color: var(--hi-color-text-secondary, #8b949e);
+  color: var(--hi-color-text-secondary, #666666);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   white-space: nowrap;
@@ -49,15 +49,15 @@
 
 .hk-table-header-sortable {
   cursor: pointer;
-  transition: color var(--hi-duration-short, 0.15s) var(--hi-ease-default, cubic-bezier(0.4, 0, 0.2, 1));
+  transition: color var(--duration-short, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
 
   &:hover {
-    color: var(--hi-color-primary, #58a6ff);
+    color: var(--hi-color-primary, #7aa2f7);
   }
 }
 
 .hk-table-header-sorted {
-  color: var(--hi-color-primary, #58a6ff);
+  color: var(--hi-color-primary, #7aa2f7);
 }
 
 .hk-table-header-label {
@@ -71,7 +71,7 @@
   height: 14px;
   display: inline-block;
   vertical-align: middle;
-  transition: transform var(--hi-duration-short, 0.15s) var(--hi-ease-default, cubic-bezier(0.4, 0, 0.2, 1));
+  transition: transform var(--duration-short, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
 }
 
 .hk-table-sort-icon-desc {
@@ -80,7 +80,7 @@
 
 .hk-table-body {
   .hk-table-row {
-    border-bottom: 1px solid var(--hi-color-border, rgba(255, 255, 255, 0.05));
+    border-bottom: 1px solid var(--hi-color-border, rgba(100,100,100,0.05));
   }
 }
 
@@ -93,23 +93,23 @@
 }
 
 .hk-table-bordered {
-  border: 1px solid var(--hi-color-border, rgba(255, 255, 255, 0.1));
-  border-radius: var(--hi-radius-md, 8px);
+  border: 1px solid var(--hi-color-border, rgba(100,100,100,0.1));
+  border-radius: var(--radius-md, 8px);
 
   .hk-table-header-cell,
   .hk-table-cell {
-    border: 1px solid var(--hi-color-border, rgba(255, 255, 255, 0.06));
+    border: 1px solid var(--hi-color-border, rgba(100,100,100,0.06));
   }
 
   .hk-table-header-cell {
-    border-bottom: 2px solid var(--hi-color-border, rgba(255, 255, 255, 0.1));
+    border-bottom: 2px solid var(--hi-color-border, rgba(100,100,100,0.1));
   }
 }
 
 .hk-table-cell {
   /* md values (see .hk-table-header-cell). */
   padding: var(--space-8, 8px) var(--space-12, 12px);
-  color: var(--hi-color-text-primary, #c9d1d9);
+  color: var(--hi-color-text-primary, #1e1e1e);
   vertical-align: middle;
 }
 
@@ -132,7 +132,7 @@
 .hk-table-empty {
   padding: var(--space-32, 32px) var(--space-16, 16px);
   text-align: center;
-  color: var(--hi-color-text-secondary, #8b949e);
+  color: var(--hi-color-text-secondary, #666666);
 }
 
 /* Alignment helpers (start/end so aligned columns mirror in RTL; the
@@ -170,12 +170,12 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  border: 2px solid var(--hi-color-border, rgba(255, 255, 255, 0.2));
-  border-radius: var(--hi-radius-sm, 4px);
+  border: 2px solid var(--hi-color-border, rgba(100,100,100,0.2));
+  border-radius: var(--radius-sm, 4px);
   background: transparent;
   transition:
-    background-color var(--hi-duration-short, 0.15s) var(--hi-ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
-    border-color var(--hi-duration-short, 0.15s) var(--hi-ease-default, cubic-bezier(0.4, 0, 0.2, 1));
+    background-color var(--duration-short, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
+    border-color var(--duration-short, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
 
   &-md {
     width: 16px;
@@ -183,14 +183,14 @@
   }
 
   &-checked {
-    background: var(--hi-color-primary, #58a6ff);
-    border-color: var(--hi-color-primary, #58a6ff);
+    background: var(--hi-color-primary, #7aa2f7);
+    border-color: var(--hi-color-primary, #7aa2f7);
   }
 
   .hk-table-checkbox-input:focus-visible + & {
     box-shadow:
       0 0 0 2px var(--hi-color-bg-canvas, #0d1117),
-      0 0 0 4px var(--hi-color-primary, #58a6ff);
+      0 0 0 4px var(--hi-color-primary, #7aa2f7);
   }
 }
 

package/src/components/HkTag.scss

@@ -7,7 +7,7 @@
   line-height: 1.4;
   white-space: nowrap;
   border: 1px solid transparent;
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   padding: var(--space-2, 2px) var(--space-8, 8px);
   user-select: none;
 }
@@ -43,8 +43,8 @@
   padding: 0;
   /* Trailing edge of the chip in both directions. */
   margin-inline-start: var(--space-2, 2px);
-  border-radius: var(--hi-radius-sm, 4px);
-  transition: opacity var(--hi-duration-fast, 0.15s) ease;
+  border-radius: var(--radius-sm, 4px);
+  transition: opacity var(--duration-fast, 0.15s) ease;
 }
 
 .hk-tag-close:hover {
@@ -58,27 +58,27 @@
 }
 
 .hk-tag-default {
-  background: color-mix(in srgb, var(--hi-color-surface, #fff) 60%, transparent);
-  color: var(--hi-color-text-primary, #333);
-  border-color: var(--hi-color-border, #30363d);
+  background: color-mix(in srgb, var(--hi-color-surface, #f0f4f8) 60%, transparent);
+  color: var(--hi-color-text-primary, #1e1e1e);
+  border-color: var(--hi-color-border, #646464);
 }
 
 .hk-tag-primary {
-  background: color-mix(in srgb, var(--hi-color-primary, #58a6ff) 10%, transparent);
-  color: var(--hi-color-primary, #58a6ff);
-  border-color: color-mix(in srgb, var(--hi-color-primary, #58a6ff) 20%, transparent);
+  background: color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 10%, transparent);
+  color: var(--hi-color-primary, #7aa2f7);
+  border-color: color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 20%, transparent);
 }
 
 .hk-tag-success {
-  background: color-mix(in srgb, var(--hi-color-success, #3fb950) 10%, transparent);
-  color: var(--hi-color-success, #3fb950);
-  border-color: color-mix(in srgb, var(--hi-color-success, #3fb950) 20%, transparent);
+  background: color-mix(in srgb, var(--hi-color-success, #0eb840) 10%, transparent);
+  color: var(--hi-color-success, #0eb840);
+  border-color: color-mix(in srgb, var(--hi-color-success, #0eb840) 20%, transparent);
 }
 
 .hk-tag-warning {
-  background: color-mix(in srgb, var(--hi-color-warning, #d29922) 10%, transparent);
-  color: var(--hi-color-warning, #d29922);
-  border-color: color-mix(in srgb, var(--hi-color-warning, #d29922) 20%, transparent);
+  background: color-mix(in srgb, var(--hi-color-warning, #eed677) 10%, transparent);
+  color: var(--hi-color-warning, #eed677);
+  border-color: color-mix(in srgb, var(--hi-color-warning, #eed677) 20%, transparent);
 }
 
 .hk-tag-danger {
@@ -88,7 +88,7 @@
 }
 
 .hk-tag-info {
-  background: color-mix(in srgb, var(--hi-color-info, #79c0ff) 10%, transparent);
-  color: var(--hi-color-info, #79c0ff);
-  border-color: color-mix(in srgb, var(--hi-color-info, #79c0ff) 20%, transparent);
+  background: color-mix(in srgb, var(--hi-color-info, #6abed6) 10%, transparent);
+  color: var(--hi-color-info, #6abed6);
+  border-color: color-mix(in srgb, var(--hi-color-info, #6abed6) 20%, transparent);
 }

package/src/components/HkTextarea.scss

@@ -19,7 +19,7 @@
   padding: var(--space-8, 0.5rem) var(--space-12, 0.75rem);
   background: var(--hi-color-surface);
   border: 1px solid var(--hi-color-border);
-  border-radius: var(--hi-radius-md, 6px);
+  border-radius: 6px;
   color: var(--hi-color-text-primary);
   font-family: inherit;
   font-size: var(--text-base, 0.875rem);

package/src/components/HkTimeline.scss

@@ -69,7 +69,7 @@
 // neighbour brightens back up while pointed at (affordance to jump back).
 .hk-timeline[data-mode="window"] .hk-timeline-window[data-dimmed] {
   opacity: var(--hk-timeline-neighbor-opacity, 0.55);
-  transition: opacity var(--hi-duration-normal, 0.3s) ease;
+  transition: opacity var(--duration-normal, 0.3s) ease;
 
   &:has(.hk-timeline-step[data-clickable]):hover {
     opacity: 1;
@@ -388,7 +388,7 @@
   &:hover [data-el="indicator"] {
     transform: scale(1.12);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-primary) 15%, transparent);
-    transition: transform var(--hi-duration-normal, 0.3s) ease, box-shadow var(--hi-duration-normal, 0.3s) ease;
+    transition: transform var(--duration-normal, 0.3s) ease, box-shadow var(--duration-normal, 0.3s) ease;
   }
 
   // Press feedback mirroring the hover pop (role="button" affordance).

package/src/components/HkTitleBar.scss

@@ -117,12 +117,12 @@
 
 .hk-titlebar-btn-close:hover {
   background: var(--hk-tb-close-hover);
-  color: var(--hi-color-text-on-danger, #fff);
+  color: var(--hi-color-text-on-danger, #ffffff);
 }
 
 .hk-titlebar-btn-close:active {
   background: var(--hk-tb-close-active);
-  color: var(--hi-color-text-on-danger, #fff);
+  color: var(--hi-color-text-on-danger, #ffffff);
 }
 
 .hk-titlebar-btn:focus-visible {

package/src/components/HkToast.scss

@@ -27,7 +27,7 @@
   align-items: center;
   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);
@@ -76,19 +76,19 @@
 
 .hk-toast-error {
   background: var(--hi-color-danger, #f85149);
-  color: var(--hi-color-text-on-solid, #fff);
+  color: var(--hi-color-text-on-solid, #ffffff);
 }
 
 .hk-toast-success {
-  background: var(--hi-color-success, #3fb950);
-  color: var(--hi-color-text-on-solid, #fff);
+  background: var(--hi-color-success, #0eb840);
+  color: var(--hi-color-text-on-solid, #ffffff);
 }
 
 /* Warning toasts use a light, saturated amber background where white text
  * lands at ~2.6:1 contrast (unreadable). Dark text keeps >= 4.5:1 on the
  * amber in BOTH color schemes; the copy/close buttons inherit it. */
 .hk-toast-warning {
-  background: var(--hi-color-warning, #d29922);
+  background: var(--hi-color-warning, #eed677);
   color: #1c1c1e;
 }
 
@@ -103,13 +103,13 @@
 }
 
 .hk-toast-info {
-  background: var(--hi-color-info, #58a6ff);
-  color: var(--hi-color-text-on-solid, #fff);
+  background: var(--hi-color-info, #6abed6);
+  color: var(--hi-color-text-on-solid, #ffffff);
 }
 
 .hk-toast-loading {
-  background: var(--hi-color-info, #58a6ff);
-  color: var(--hi-color-text-on-solid, #fff);
+  background: var(--hi-color-info, #6abed6);
+  color: var(--hi-color-text-on-solid, #ffffff);
 }
 
 .hk-toast-loading-spinner {
@@ -136,9 +136,9 @@
   background: transparent;
   color: inherit;
   cursor: pointer;
-  border-radius: var(--hi-radius-sm, 4px);
+  border-radius: var(--radius-sm, 4px);
   opacity: 0.7;
-  transition: opacity var(--hi-duration-fast, 0.15s) ease;
+  transition: opacity var(--duration-fast, 0.15s) ease;
   padding: 0;
 }
 
@@ -155,7 +155,7 @@
 
 .hk-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);
   /* Plain ease-out: the previous back-overshoot spring (1.56 y) is the
      same family the drawer animation was corrected away from — toasts
      slide in and settle, they do not bounce. */
@@ -164,7 +164,7 @@
 
 .hk-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);
 }
 
@@ -196,12 +196,12 @@
 }
 
 .hk-toast-move {
-  transition: transform var(--hi-duration-normal, 0.3s) ease;
+  transition: transform var(--duration-normal, 0.3s) ease;
 }
 
 .hk-toast-msg-enter-active,
 .hk-toast-msg-leave-active {
-  transition: opacity var(--hi-duration-fast, 0.15s) ease;
+  transition: opacity var(--duration-fast, 0.15s) ease;
 }
 
 .hk-toast-msg-enter-from,