@celestia-island/hikari 0.43.13 → 0.43.14

package/src/components/HkDrawer.scss

@@ -11,55 +11,55 @@
 // contract (./_scrim-fade.scss); the panel below owns all the motion.
 @include sf.scrim-fade(
   "hk-drawer-overlay",
-  $enter-duration: var(--hi-duration-normal, 0.3s),
-  $enter-ease: var(--hi-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
-  $leave-duration: var(--hi-duration-normal, 0.3s),
-  $leave-ease: var(--hi-ease-in, cubic-bezier(0.4, 0, 1, 1))
+  $enter-duration: var(--duration-normal, 0.3s),
+  $enter-ease: var(--ease-elastic, cubic-bezier(0.16, 1, 0.3, 1)),
+  $leave-duration: var(--duration-normal, 0.3s),
+  $leave-ease: var(--ease-in, cubic-bezier(0.4, 0, 1, 1))
 );
 
 .hk-drawer-panel {
   position: fixed;
   display: flex;
   flex-direction: column;
-  background: var(--hk-drawer-bg, var(--hi-color-surface, rgba(255, 255, 255, 0.95)));
+  background: var(--hk-drawer-bg, var(--hi-color-surface, rgba(240,244,248,0.95)));
   backdrop-filter: blur(12px);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
   outline: none;
   transition:
-    width var(--hi-duration-normal, 0.3s) ease,
-    height var(--hi-duration-normal, 0.3s) ease;
+    width var(--duration-normal, 0.3s) ease,
+    height var(--duration-normal, 0.3s) ease;
 }
 
 .hk-drawer-left {
   top: 0;
   bottom: 0;
   left: 0;
-  border-right: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
-  border-radius: 0 var(--hi-radius-md, 0.5rem) var(--hi-radius-md, 0.5rem) 0;
+  border-right: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
+  border-radius: 0 var(--radius-md, 0.5rem) var(--radius-md, 0.5rem) 0;
 }
 
 .hk-drawer-right {
   top: 0;
   bottom: 0;
   right: 0;
-  border-left: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
-  border-radius: var(--hi-radius-md, 0.5rem) 0 0 var(--hi-radius-md, 0.5rem);
+  border-left: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
+  border-radius: var(--radius-md, 0.5rem) 0 0 var(--radius-md, 0.5rem);
 }
 
 .hk-drawer-top {
   top: 0;
   left: 0;
   right: 0;
-  border-bottom: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
-  border-radius: 0 0 var(--hi-radius-md, 0.5rem) var(--hi-radius-md, 0.5rem);
+  border-bottom: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
+  border-radius: 0 0 var(--radius-md, 0.5rem) var(--radius-md, 0.5rem);
 }
 
 .hk-drawer-bottom {
   bottom: 0;
   left: 0;
   right: 0;
-  border-top: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
-  border-radius: var(--hi-radius-md, 0.5rem) var(--hi-radius-md, 0.5rem) 0 0;
+  border-top: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
+  border-radius: var(--radius-md, 0.5rem) var(--radius-md, 0.5rem) 0 0;
 }
 
 .hk-drawer-left-enter-active,
@@ -71,8 +71,8 @@
      that briefly opens a gap between the panel edge and the screen
      edge. Both properties use the same plain ease-out. */
   transition:
-    opacity var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1),
-    transform var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
+    opacity var(--duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1),
+    transform var(--duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .hk-drawer-left-leave-active,
@@ -80,8 +80,8 @@
 .hk-drawer-top-leave-active,
 .hk-drawer-bottom-leave-active {
   transition:
-    opacity var(--hi-duration-normal, 0.3s) cubic-bezier(0.4, 0, 1, 1),
-    transform var(--hi-duration-normal, 0.3s) cubic-bezier(0.4, 0, 1, 1);
+    opacity var(--duration-normal, 0.3s) cubic-bezier(0.4, 0, 1, 1),
+    transform var(--duration-normal, 0.3s) cubic-bezier(0.4, 0, 1, 1);
 }
 
 .hk-drawer-left-enter-from,
@@ -113,14 +113,14 @@
   align-items: center;
   justify-content: space-between;
   padding: var(--space-12, 0.75rem) var(--space-16, 1rem);
-  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;
 }
 
 .hk-drawer-title {
   font-size: var(--text-base, 0.875rem);
   font-weight: 700;
-  color: var(--hi-color-text-primary, #333);
+  color: var(--hi-color-text-primary, #1e1e1e);
 }
 
 // Legacy placement hook — the chrome lives on the shared .hk-icon-button
@@ -162,7 +162,7 @@
   /* HkMenuPanel carries its own inset; zero this variable when the
      footer hosts one so both edges align. */
   padding: var(--hk-drawer-footer-padding, var(--space-12, 0.75rem) var(--space-16, 1rem));
-  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;
 }
 
@@ -180,8 +180,8 @@
 @media (max-width: 767px) {
   .hk-drawer-bottom {
     bottom: var(--hk-sheet-bottom-gap, 0px);
-    border-radius: var(--hk-modal-radius, var(--hi-radius-lg, 12px))
-                   var(--hk-modal-radius, var(--hi-radius-lg, 12px))
+    border-radius: var(--hk-modal-radius, var(--radius-lg, 12px))
+                   var(--hk-modal-radius, var(--radius-lg, 12px))
                    0 0;
     // The inline maxHeight from the `size` prop must lose to the family cap
     // (plain-vh fallback first for dvh-less engines, then dvh) — same

package/src/components/HkDrawer.sheetfamily.test.ts

@@ -60,7 +60,7 @@ describe("HkDrawer mobile bottom sheet-family contract", () => {
   });
 
   it("adopts the 12px family corner radius", () => {
-    expect(drawer).toContain("border-radius: var(--hk-modal-radius, var(--hi-radius-lg, 12px))");
+    expect(drawer).toContain("border-radius: var(--hk-modal-radius, var(--radius-lg, 12px))");
   });
 
   it("stacks the home-bar safe area on the mobile footer's BOTTOM axis", () => {

package/src/components/HkEmptyState.scss

@@ -5,10 +5,10 @@
   justify-content: center;
   padding: var(--space-48, 3rem) var(--space-16, 1rem);
   text-align: center;
-  background: var(--hk-empty-bg, var(--hi-color-surface, rgba(255, 255, 255, 0.95)));
+  background: var(--hk-empty-bg, var(--hi-color-surface, rgba(240,244,248,0.95)));
   backdrop-filter: blur(var(--blur-sm, 8px));
-  border: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.06));
-  border-radius: var(--hi-radius-md, 0.5rem);
+  border: 1px solid var(--hi-color-border, rgba(100,100,100,0.06));
+  border-radius: var(--radius-md, 0.5rem);
   box-sizing: border-box;
 }
 
@@ -16,7 +16,7 @@
   width: var(--space-48, 3rem);
   height: var(--space-48, 3rem);
   margin-bottom: var(--space-12, 0.75rem);
-  color: var(--hi-color-text-secondary, #666);
+  color: var(--hi-color-text-secondary, #666666);
   opacity: 0.5;
   display: flex;
   align-items: center;
@@ -26,13 +26,13 @@
 .hk-empty-title {
   font-size: var(--text-base, 0.875rem);
   font-weight: 600;
-  color: var(--hi-color-text-primary, #333);
+  color: var(--hi-color-text-primary, #1e1e1e);
   margin: 0 0 var(--space-8, 0.5rem);
 }
 
 .hk-empty-desc {
   font-size: var(--text-sm, 0.8125rem);
-  color: var(--hi-color-text-secondary, #666);
+  color: var(--hi-color-text-secondary, #666666);
   margin: 0 0 var(--space-16, 1rem);
   max-width: 24rem;
   line-height: 1.5;

package/src/components/HkFab.scss

@@ -51,10 +51,10 @@
   -webkit-appearance: none;
   padding: 0;
   border: none;
-  border-radius: var(--hi-radius-full, 9999px);
+  border-radius: var(--radius-full, 9999px);
   cursor: pointer;
   font-family: inherit;
-  transition: transform var(--hi-duration-fast, 0.15s) ease, box-shadow var(--hi-duration-fast, 0.15s) ease;
+  transition: transform var(--duration-fast, 0.15s) ease, box-shadow var(--duration-fast, 0.15s) ease;
 
   &:active:not(:disabled) { transform: scale(0.94); }
   &:focus-visible { outline: 2px solid var(--hi-color-primary, #7aa2f7); outline-offset: 2px; }
@@ -84,13 +84,13 @@ $sizes: (sm: 34px, md: 42px, lg: 50px);
 }
 
 .hk-fab[data-variant="glass"] .hk-fab-button {
-  color: var(--hi-color-text-secondary, #555);
-  background: color-mix(in srgb, var(--hi-color-surface, #fff) 78%, transparent);
-  border: 1px solid color-mix(in srgb, var(--hi-color-border, rgba(0, 0, 0, 0.12)) 25%, transparent);
+  color: var(--hi-color-text-secondary, #666666);
+  background: color-mix(in srgb, var(--hi-color-surface, #f0f4f8) 78%, transparent);
+  border: 1px solid color-mix(in srgb, var(--hi-color-border, rgba(100,100,100,0.12)) 25%, transparent);
   backdrop-filter: blur(var(--blur-xs, 4px)); // chip language shared with autotag pills
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
 
-  &:hover:not(:disabled) { background: color-mix(in srgb, var(--hi-color-surface, #fff) 92%, transparent); }
+  &:hover:not(:disabled) { background: color-mix(in srgb, var(--hi-color-surface, #f0f4f8) 92%, transparent); }
 }
 
 .hk-fab[data-variant="primary"] .hk-fab-button {
@@ -129,16 +129,16 @@ $sizes: (sm: 34px, md: 42px, lg: 50px);
   font-size: 0.6875rem;
   letter-spacing: 0.02em;
   white-space: nowrap;
-  color: var(--hi-color-text-secondary, #555);
-  background: color-mix(in srgb, var(--hi-color-surface, #fff) 82%, transparent);
-  border: 1px solid color-mix(in srgb, var(--hi-color-border, rgba(0, 0, 0, 0.12)) 25%, transparent);
-  border-radius: var(--hi-radius-full, 9999px);
+  color: var(--hi-color-text-secondary, #666666);
+  background: color-mix(in srgb, var(--hi-color-surface, #f0f4f8) 82%, transparent);
+  border: 1px solid color-mix(in srgb, var(--hi-color-border, rgba(100,100,100,0.12)) 25%, transparent);
+  border-radius: var(--radius-full, 9999px);
   cursor: pointer;
   backdrop-filter: blur(var(--blur-xs, 4px));
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
   opacity: 0;
   transform: scale(0.4);
-  transition: opacity var(--hi-duration-fast, 0.15s) ease, transform var(--hi-duration-fast, 0.15s) ease;
+  transition: opacity var(--duration-fast, 0.15s) ease, transform var(--duration-fast, 0.15s) ease;
 
   .hk-fab-mini-icon {
     display: inline-flex;
@@ -149,7 +149,7 @@ $sizes: (sm: 34px, md: 42px, lg: 50px);
   &:focus-visible { outline: 2px solid var(--hi-color-primary, #7aa2f7); outline-offset: 1px; }
   &:disabled { opacity: 0.35; cursor: not-allowed; }
   // 82%→94% mirrors the main glass hover ladder (78%→92%).
-  &:hover:not(:disabled) { background: color-mix(in srgb, var(--hi-color-surface, #fff) 94%, transparent); }
+  &:hover:not(:disabled) { background: color-mix(in srgb, var(--hi-color-surface, #f0f4f8) 94%, transparent); }
 }
 
 // Staggered reveal while expanded (CSS only, via nth-child delay).

package/src/components/HkFileField.scss

@@ -69,7 +69,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--hi-color-primary, #58a6ff);
+    outline: 2px solid var(--hi-color-primary, #7aa2f7);
     outline-offset: 2px;
     border-radius: var(--radius-xs, 2px);
   }
@@ -117,7 +117,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--hi-color-primary, #58a6ff);
+    outline: 2px solid var(--hi-color-primary, #7aa2f7);
     outline-offset: 1px;
   }
 }

package/src/components/HkFilePickerField.scss

@@ -54,8 +54,8 @@
   width: 1.75rem;
   height: 1.75rem;
   border-radius: var(--radius-xs, 2px);
-  background: color-mix(in srgb, var(--hi-color-primary, #58a6ff) 14%, transparent);
-  color: var(--hi-color-primary, #58a6ff);
+  background: color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 14%, transparent);
+  color: var(--hi-color-primary, #7aa2f7);
   pointer-events: none;
 }
 

package/src/components/HkImagePreview.scss

@@ -9,7 +9,7 @@
   width: 100%;
   overflow: hidden;
   background: var(--hi-color-gray-100, rgba(0, 0, 0, 0.04));
-  border: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
+  border: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
   border-radius: var(--radius-md, 8px);
 }
 
@@ -19,10 +19,10 @@
   transition: border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
 
   &:hover {
-    border-color: var(--hi-color-primary, #58a6ff);
+    border-color: var(--hi-color-primary, #7aa2f7);
     // Emphasis drawn INSIDE the border box (HkSelectionGrid precedent):
     // outer spread rings get shaved per-side by overlapping chrome.
-    box-shadow: inset 0 0 0 1px var(--hi-color-primary, #58a6ff);
+    box-shadow: inset 0 0 0 1px var(--hi-color-primary, #7aa2f7);
   }
 
   // Press feedback matching the house button pattern (HkButton variants,
@@ -32,7 +32,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--hi-color-primary, #58a6ff);
+    outline: 2px solid var(--hi-color-primary, #7aa2f7);
     outline-offset: 2px;
   }
 }
@@ -65,9 +65,9 @@
   justify-content: center;
   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-image-preview-shimmer 1.5s ease-in-out infinite;
@@ -95,7 +95,7 @@
   justify-content: center;
   gap: var(--space-8, 0.5rem);
   padding: var(--space-12, 0.75rem);
-  color: var(--hi-color-muted, #666);
+  color: var(--hi-color-muted, #6c6c6c);
   text-align: center;
 }
 

package/src/components/HkInput.scss

@@ -267,11 +267,11 @@
    * bare "R G B" triplet, so using it directly as a color is invalid at
    * computed-value time (the rule silently inherits); --color-text-primary
    * is not defined anywhere. --hi-color-* wrap the triplets in rgb(). */
-  color: var(--hi-color-text-secondary, #888);
+  color: var(--hi-color-text-secondary, #666666);
   cursor: pointer;
 
   &:hover {
-    color: var(--hi-color-text-primary, #222);
+    color: var(--hi-color-text-primary, #1e1e1e);
   }
 
   // Keyboard parity (house icon-button pattern, HkIconButton): this real

package/src/components/HkJsonTree.scss

@@ -69,8 +69,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--jt-toggle);
-  height: var(--jt-toggle);
+  width: var(--jt-toggle, 1rem);
+  height: var(--jt-toggle, 1rem);
   flex-shrink: 0;
   margin-inline-end: var(--space-2, 0.125rem);
   /* The toggle box has no text baseline of its own — pin it to the line

package/src/components/HkKeywordSearchModal.scss

@@ -13,19 +13,19 @@
   align-items: center;
   gap: var(--space-8, 0.5rem);
   padding: var(--space-8, 0.5rem) var(--space-12, 0.75rem);
-  background: var(--hi-color-surface, rgba(255, 255, 255, 0.95));
+  background: var(--hi-color-surface, rgba(240,244,248,0.95));
   border: 1px solid var(--hk-kw-border, rgb(var(--color-border) / 8%));
-  border-radius: var(--hi-radius-lg, 0.75rem);
+  border-radius: var(--radius-lg, 0.75rem);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 
   &:focus-within {
-    border-color: var(--hi-color-primary, #58a6ff);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-primary, #58a6ff) 12%, transparent);
+    border-color: var(--hi-color-primary, #7aa2f7);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 12%, transparent);
   }
 }
 
 .hk-kw-search-icon {
-  color: var(--hi-color-text-secondary, #666);
+  color: var(--hi-color-text-secondary, #666666);
   flex-shrink: 0;
 }
 
@@ -36,7 +36,7 @@
   background: transparent;
   border: 0;
   outline: none;
-  color: var(--hi-color-text-primary, #333);
+  color: var(--hi-color-text-primary, #1e1e1e);
   font-size: var(--text-base, 0.875rem);
 }
 
@@ -44,18 +44,18 @@
   appearance: none;
   background: transparent;
   border: 0;
-  color: var(--hi-color-text-secondary, #666);
+  color: var(--hi-color-text-secondary, #666666);
   cursor: pointer;
   display: inline-flex;
   padding: var(--space-2, 0.125rem);
-  border-radius: var(--hi-radius-sm, 0.25rem);
+  border-radius: var(--radius-sm, 0.25rem);
 
   &:hover {
-    color: var(--hi-color-text-primary, #333);
+    color: var(--hi-color-text-primary, #1e1e1e);
   }
 
   &:focus-visible {
-    outline: 2px solid color-mix(in srgb, var(--hi-color-primary, #58a6ff) 55%, transparent);
+    outline: 2px solid color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 55%, transparent);
     outline-offset: 2px;
   }
 }
@@ -76,20 +76,20 @@
   text-align: start;
   background: transparent;
   border: 1px solid transparent;
-  border-radius: var(--hi-radius-sm, 0.25rem);
+  border-radius: var(--radius-sm, 0.25rem);
   padding: var(--space-8, 0.5rem) var(--space-12, 0.75rem);
   cursor: pointer;
   width: 100%;
-  color: var(--hi-color-text-primary, #333);
+  color: var(--hi-color-text-primary, #1e1e1e);
   transition: background 0.15s ease, border-color 0.15s ease;
 
   &:hover {
-    background: var(--hi-color-surface, rgba(255, 255, 255, 0.95));
+    background: var(--hi-color-surface, rgba(240,244,248,0.95));
     border-color: rgb(var(--color-border) / 6%);
   }
 
   &:focus-visible {
-    outline: 2px solid color-mix(in srgb, var(--hi-color-primary, #58a6ff) 55%, transparent);
+    outline: 2px solid color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 55%, transparent);
     outline-offset: 2px;
   }
 }
@@ -100,7 +100,7 @@
   padding: var(--space-48, 3rem) var(--space-8, 0.5rem);
   text-align: center;
   font-size: var(--text-base, 0.875rem);
-  color: var(--hi-color-text-secondary, #666);
+  color: var(--hi-color-text-secondary, #666666);
 }
 
 .hk-kw-search-semantic {
@@ -120,7 +120,7 @@
 .hk-kw-search-semantic-title {
   font-size: var(--text-base, 0.875rem);
   font-weight: 600;
-  color: var(--hi-color-text-primary, #333);
+  color: var(--hi-color-text-primary, #1e1e1e);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -130,16 +130,16 @@
   flex-shrink: 0;
   font-size: var(--text-xs, 0.75rem);
   font-variant-numeric: tabular-nums;
-  color: var(--hi-color-primary, #58a6ff);
-  background: color-mix(in srgb, var(--hi-color-primary, #58a6ff) 12%, transparent);
+  color: var(--hi-color-primary, #7aa2f7);
+  background: color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 12%, transparent);
   padding: 0 var(--space-6, 0.375rem);
-  border-radius: var(--hi-radius-sm, 0.25rem);
+  border-radius: var(--radius-sm, 0.25rem);
   line-height: 1.5;
 }
 
 .hk-kw-search-semantic-snippet {
   font-size: var(--text-xs, 0.75rem);
-  color: var(--hi-color-text-secondary, #666);
+  color: var(--hi-color-text-secondary, #666666);
   line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -153,8 +153,8 @@
   font-size: var(--text-xs, 0.75rem);
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: var(--hi-color-text-secondary, #666);
+  color: var(--hi-color-text-secondary, #666666);
   background: rgb(var(--color-border) / 4%);
   padding: 0 var(--space-6, 0.375rem);
-  border-radius: var(--hi-radius-sm, 0.25rem);
+  border-radius: var(--radius-sm, 0.25rem);
 }

package/src/components/HkLabel.scss

@@ -11,7 +11,7 @@
   display: inline;
   font-size: var(--text-base, 0.875rem);
   line-height: 1.5;
-  color: var(--hi-color-text-primary, #333);
+  color: var(--hi-color-text-primary, #1e1e1e);
 
   &.hk-label-sm {
     font-size: var(--text-xs, 0.75rem);
@@ -22,7 +22,7 @@
   }
 
   a {
-    color: var(--hi-color-primary, #58a6ff);
+    color: var(--hi-color-primary, #7aa2f7);
     font-weight: 500;
     text-decoration: none;
     cursor: pointer;
@@ -32,7 +32,7 @@
     }
 
     &:focus-visible {
-      outline: 2px solid color-mix(in srgb, var(--hi-color-primary, #58a6ff) 55%, transparent);
+      outline: 2px solid color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 55%, transparent);
       outline-offset: 2px;
     }
   }

package/src/components/HkListTransition.scss

@@ -4,7 +4,7 @@
 .hk-list-pop-move,
 .hk-list-slide-move,
 .hk-list-fade-move {
-  transition: transform var(--hi-duration-normal, 0.3s) ease;
+  transition: transform var(--duration-normal, 0.3s) ease;
 }
 
 .hk-list-move-disabled {
@@ -13,14 +13,14 @@
 
 .hk-list-pop-enter-active {
   transition:
-    opacity var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1),
-    transform var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
+    opacity var(--duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1),
+    transform var(--duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .hk-list-pop-leave-active {
   transition:
-    opacity var(--hi-duration-normal, 0.3s) ease-in,
-    transform var(--hi-duration-normal, 0.3s) cubic-bezier(0.5, 0, 0.75, 0);
+    opacity var(--duration-normal, 0.3s) ease-in,
+    transform var(--duration-normal, 0.3s) cubic-bezier(0.5, 0, 0.75, 0);
   position: absolute;
 }
 
@@ -36,14 +36,14 @@
 
 .hk-list-slide-enter-active {
   transition:
-    opacity var(--hi-duration-normal, 0.3s) ease,
-    transform var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
+    opacity var(--duration-normal, 0.3s) ease,
+    transform var(--duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .hk-list-slide-leave-active {
   transition:
-    opacity var(--hi-duration-normal, 0.3s) ease-in,
-    transform var(--hi-duration-normal, 0.3s) ease-in;
+    opacity var(--duration-normal, 0.3s) ease-in,
+    transform var(--duration-normal, 0.3s) ease-in;
   position: absolute;
 }
 
@@ -68,11 +68,11 @@
 }
 
 .hk-list-fade-enter-active {
-  transition: opacity var(--hi-duration-normal, 0.3s) ease;
+  transition: opacity var(--duration-normal, 0.3s) ease;
 }
 
 .hk-list-fade-leave-active {
-  transition: opacity var(--hi-duration-normal, 0.3s) ease-in;
+  transition: opacity var(--duration-normal, 0.3s) ease-in;
   position: absolute;
 }
 
@@ -83,9 +83,9 @@
 
 .hk-list-grow-enter-active {
   transition:
-    transform var(--hi-duration-fast, 0.15s) cubic-bezier(0.16, 1, 0.3, 1),
-    opacity var(--hi-duration-fast, 0.15s) cubic-bezier(0.16, 1, 0.3, 1);
-  transition-delay: var(--hi-duration-fast, 0.15s);
+    transform var(--duration-fast, 0.15s) cubic-bezier(0.16, 1, 0.3, 1),
+    opacity var(--duration-fast, 0.15s) cubic-bezier(0.16, 1, 0.3, 1);
+  transition-delay: var(--duration-fast, 0.15s);
   pointer-events: none;
 }
 
@@ -96,8 +96,8 @@
 
 .hk-list-grow-leave-active {
   transition:
-    transform var(--hi-duration-fast, 0.15s) cubic-bezier(0.5, 0, 0.75, 0),
-    opacity var(--hi-duration-fast, 0.15s) ease-in;
+    transform var(--duration-fast, 0.15s) cubic-bezier(0.5, 0, 0.75, 0),
+    opacity var(--duration-fast, 0.15s) ease-in;
   pointer-events: none;
   position: absolute;
   width: 100%;
@@ -109,16 +109,16 @@
 }
 
 .hk-list-grow-move {
-  transition: transform var(--hi-duration-fast, 0.15s) ease;
-  transition-delay: var(--hi-duration-fast, 0.15s);
+  transition: transform var(--duration-fast, 0.15s) ease;
+  transition-delay: var(--duration-fast, 0.15s);
 }
 
 .hk-list-reveal-enter-active {
   interpolate-size: allow-keywords;
   overflow: hidden;
   transition:
-    height var(--hi-duration-fast, 0.15s) cubic-bezier(0.16, 1, 0.3, 1),
-    opacity var(--hi-duration-fast, 0.15s) cubic-bezier(0.16, 1, 0.3, 1);
+    height var(--duration-fast, 0.15s) cubic-bezier(0.16, 1, 0.3, 1),
+    opacity var(--duration-fast, 0.15s) cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .hk-list-reveal-leave-active {
@@ -128,8 +128,8 @@
    * activating the body of a just-erased row would resurrect it. */
   pointer-events: none;
   transition:
-    height var(--hi-duration-fast, 0.15s) cubic-bezier(0.5, 0, 0.75, 0),
-    opacity var(--hi-duration-fast, 0.15s) ease-in;
+    height var(--duration-fast, 0.15s) cubic-bezier(0.5, 0, 0.75, 0),
+    opacity var(--duration-fast, 0.15s) ease-in;
 }
 
 .hk-list-reveal-enter-from,
@@ -139,7 +139,7 @@
 }
 
 .hk-list-reveal-move {
-  transition: transform var(--hi-duration-fast, 0.15s) ease;
+  transition: transform var(--duration-fast, 0.15s) ease;
 }
 
 .hk-list-none-enter-active,

package/src/components/HkLogo.scss

@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border-radius: var(--hi-radius-md, 8px);
+  border-radius: var(--radius-md, 8px);
   overflow: hidden;
   flex-shrink: 0;
   user-select: none;
@@ -23,7 +23,7 @@ a.hk-logo:focus-visible {
 
 .hk-logo-img {
   display: block;
-  border-radius: var(--hi-radius-md, 8px);
+  border-radius: var(--radius-md, 8px);
   object-fit: contain;
 }
 
@@ -34,7 +34,7 @@ a.hk-logo:focus-visible {
   /* Contract token with hex fallback (house idiom). No radius here: the
    * only render site is inside .hk-logo, whose matching border-radius +
    * overflow: hidden already clip this exactly-fitting child. */
-  background: var(--hi-color-primary, #58a6ff);
+  background: var(--hi-color-primary, #7aa2f7);
   color: rgb(var(--color-on-solid-text, 255 255 255));
 }