@celestia-island/hikari 0.43.13 → 0.43.14

package/src/components/HkMarkdownRenderer.scss

@@ -4,7 +4,7 @@
 .hk-markdown {
   font-size: var(--text-base);
   line-height: 1.7;
-  color: var(--hi-color-text-primary, #c9d1d9);
+  color: var(--hi-color-text-primary, #1e1e1e);
   position: relative;
 }
 
@@ -17,7 +17,7 @@
 .hk-markdown h3 {
   font-weight: 700;
   margin: 1.25em 0 0.5em;
-  color: var(--hi-color-text-primary, #c9d1d9);
+  color: var(--hi-color-text-primary, #1e1e1e);
 }
 
 .hk-markdown h1 { font-size: 1.5em; }
@@ -97,7 +97,7 @@
   font-family: var(--font-mono, vars.$hikari-font-family-mono);
   font-size: var(--text-xs);
   line-height: 1.6;
-  color: var(--hi-color-text-primary, #c9d1d9);
+  color: var(--hi-color-text-primary, #1e1e1e);
   white-space: pre-wrap;
   word-break: break-word;
 }
@@ -106,7 +106,7 @@
   margin: 0.75em 0;
   padding: 0.5em 1em;
   border-inline-start: 3px solid var(--hi-color-text-tertiary, #8b949e);
-  color: var(--hi-color-text-secondary, #8b949e);
+  color: var(--hi-color-text-secondary, #666666);
 }
 
 .hk-markdown table {
@@ -118,7 +118,7 @@
 .hk-markdown th,
 .hk-markdown td {
   padding: 0.5em 0.75em;
-  border: 1px solid var(--hi-color-border, #30363d);
+  border: 1px solid var(--hi-color-border, #646464);
   text-align: start;
 }
 
@@ -128,7 +128,7 @@
 }
 
 .hk-markdown a {
-  color: var(--hi-color-primary, #58a6ff);
+  color: var(--hi-color-primary, #7aa2f7);
   text-decoration: none;
 }
 
@@ -140,13 +140,13 @@
    the house :focus-visible ring (HkFab/HkContextRing pattern). Ring uses
    the same contract var as the link ink so it matches in every theme. */
 .hk-markdown a:focus-visible {
-  outline: 2px solid var(--hi-color-primary, #58a6ff);
+  outline: 2px solid var(--hi-color-primary, #7aa2f7);
   outline-offset: 2px;
 }
 
 .hk-markdown hr {
   border: none;
-  border-top: 1px solid var(--hi-color-border, #30363d);
+  border-top: 1px solid var(--hi-color-border, #646464);
   margin: 1em 0;
 }
 
@@ -161,7 +161,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: color-mix(in srgb, var(--hi-color-surface, #fff) 70%, transparent);
+  background: color-mix(in srgb, var(--hi-color-surface, #f0f4f8) 70%, transparent);
   backdrop-filter: blur(4px);
   z-index: 10;
 }

package/src/components/HkMediaSlider.scss

@@ -42,7 +42,7 @@
   box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
   transform: translateY(-50%);
   opacity: 0;
-  transition: opacity var(--hi-duration-short, 0.15s);
+  transition: opacity var(--duration-short, 0.15s);
   pointer-events: none;
 }
 

package/src/components/HkMinimap.scss

@@ -68,8 +68,8 @@
   color: rgb(var(--color-text));
   cursor: pointer;
   transition:
-    background var(--hi-duration-fast, 0.15s) ease,
-    color var(--hi-duration-fast, 0.15s) ease;
+    background var(--duration-fast, 0.15s) ease,
+    color var(--duration-fast, 0.15s) ease;
 
   &:hover:not(:disabled) {
     background: rgb(var(--color-primary) / 0.1);

package/src/components/HkModal.scss

@@ -71,10 +71,10 @@
   transition:
     height var(--duration-fast, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
     max-height var(--duration-fast, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
-  background: var(--hk-modal-bg, var(--hi-color-surface, rgba(255, 255, 255, 0.95)));
+  background: var(--hk-modal-bg, var(--hi-color-surface, rgba(240,244,248,0.95)));
   backdrop-filter: var(--hk-modal-blur, blur(12px));
-  border: 1px solid var(--hk-modal-border-color, var(--hi-color-border, rgba(0, 0, 0, 0.08)));
-  border-radius: var(--hk-modal-radius, var(--hi-radius-lg, 12px));
+  border: 1px solid var(--hk-modal-border-color, var(--hi-color-border, rgba(100,100,100,0.08)));
+  border-radius: var(--hk-modal-radius, var(--radius-lg, 12px));
   box-shadow:
     0 16px 48px rgba(0, 0, 0, 0.2),
     0 0 0 1px rgba(255, 255, 255, 0.05) inset;
@@ -141,7 +141,7 @@
   justify-content: space-between;
   padding: var(--hk-modal-padding-header, 1rem 1.5rem);
   border-bottom: 1px solid
-    var(--hk-modal-divider-color, var(--hi-color-border, rgba(0, 0, 0, 0.06)));
+    var(--hk-modal-divider-color, var(--hi-color-border, rgba(100,100,100,0.06)));
   flex-shrink: 0;
 }
 
@@ -167,7 +167,7 @@
   font-size: var(--hk-modal-title-font-size, 1.125rem);
   font-weight: var(--hk-modal-title-font-weight, 700);
   margin: 0;
-  color: var(--hk-modal-title-color, var(--hi-color-text-primary, #333));
+  color: var(--hk-modal-title-color, var(--hi-color-text-primary, #1e1e1e));
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -192,7 +192,7 @@
 .hk-modal-subheader {
   padding: var(--hk-modal-padding-subheader, 0.75rem 1.5rem 0.75rem);
   border-bottom: 1px solid
-    var(--hk-modal-divider-color, var(--hi-color-border, rgba(0, 0, 0, 0.06)));
+    var(--hk-modal-divider-color, var(--hi-color-border, rgba(100,100,100,0.06)));
   flex-shrink: 0;
 }
 
@@ -206,7 +206,7 @@
   flex-direction: column;
   overflow: hidden;
   position: relative;
-  color: var(--hk-modal-body-color, var(--hi-color-text-primary, #333));
+  color: var(--hk-modal-body-color, var(--hi-color-text-primary, #1e1e1e));
   flex: 1;
   min-height: 0;
 }
@@ -262,10 +262,10 @@
   padding: var(--space-2) var(--space-8);
   font-size: var(--text-2xs);
   letter-spacing: 0.04em;
-  color: var(--hi-color-muted, #666);
-  background: color-mix(in srgb, var(--hi-color-surface, rgba(255, 255, 255, 0.95)) 78%, transparent);
-  border: 1px solid color-mix(in srgb, var(--hi-color-border, rgba(0, 0, 0, 0.08)) 12%, transparent);
-  border-radius: var(--hi-radius-full, 9999px);
+  color: var(--hi-color-muted, #6c6c6c);
+  background: color-mix(in srgb, var(--hi-color-surface, rgba(240,244,248,0.95)) 78%, transparent);
+  border: 1px solid color-mix(in srgb, var(--hi-color-border, rgba(100,100,100,0.08)) 12%, transparent);
+  border-radius: var(--radius-full, 9999px);
   backdrop-filter: blur(4px);
   opacity: 0.85;
 }
@@ -285,7 +285,7 @@
 .hk-modal-footer {
   padding: var(--hk-modal-padding-footer, 0.75rem 1.5rem);
   border-top: 1px solid
-    var(--hk-modal-divider-color, var(--hi-color-border, rgba(0, 0, 0, 0.06)));
+    var(--hk-modal-divider-color, var(--hi-color-border, rgba(100,100,100,0.06)));
   display: flex;
   justify-content: flex-end;
   gap: var(--space-8);
@@ -332,8 +332,8 @@
     left: 0;
     right: 0;
     transform: none;
-    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;
     border-left: 0;
     border-right: 0;

package/src/components/HkModalBreadcrumb.scss

@@ -13,9 +13,9 @@
   // family don't collapse this strip (8px→4px gap, 32px→16px padding).
   gap: var(--space-8, 0.5rem);
   padding: var(--space-12, 0.75rem) var(--space-32, 2rem);
-  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-breadcrumb-border, rgba(0, 0, 0, 0.06));
-  border-radius: var(--hi-radius-md, 0.5rem);
+  border-radius: var(--radius-md, 0.5rem);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
   backdrop-filter: blur(var(--blur-md));
   pointer-events: none;
@@ -35,16 +35,16 @@
   line-height: 1.4;
   font-size: var(--text-xs, 0.75rem);
   font-weight: 600;
-  color: var(--hi-color-text-secondary, #666);
+  color: var(--hi-color-text-secondary, #666666);
   white-space: nowrap;
 }
 
 .hk-modal-breadcrumb-item-current {
-  color: var(--hi-color-primary, #58a6ff);
+  color: var(--hi-color-primary, #7aa2f7);
 }
 
 .hk-modal-breadcrumb-sep {
-  color: var(--hi-color-text-secondary, #666);
+  color: var(--hi-color-text-secondary, #666666);
   opacity: 0.5;
   flex-shrink: 0;
 }

package/src/components/HkNavItem.scss

@@ -27,8 +27,8 @@
   text-align: start;
   cursor: pointer;
   transition:
-    background-color var(--hi-duration-fast, 0.15s) ease,
-    color var(--hi-duration-fast, 0.15s) ease;
+    background-color var(--duration-fast, 0.15s) ease,
+    color var(--duration-fast, 0.15s) ease;
   user-select: none;
 
   /* Interaction-state precedence: ACTIVE > HOVER > NONE.

package/src/components/HkNumberInput.scss

@@ -25,7 +25,7 @@
   align-items: center;
   background: var(--hi-color-surface);
   border: 1px solid var(--hi-color-border);
-  border-radius: var(--hi-radius-md, 8px);
+  border-radius: var(--radius-md, 8px);
   overflow: hidden;
   transition:
     background-color var(--hi-transition-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
@@ -117,8 +117,8 @@
   color: var(--hi-color-muted);
   cursor: pointer;
   transition:
-    background-color var(--hi-duration-fast, 0.15s) ease,
-    color var(--hi-duration-fast, 0.15s) ease;
+    background-color var(--duration-fast, 0.15s) ease,
+    color var(--duration-fast, 0.15s) ease;
 
   &:hover:not(:disabled) {
     background: color-mix(in srgb, var(--hi-color-surface) 60%, transparent);

package/src/components/HkPasswordInput.scss

@@ -36,13 +36,13 @@
 }
 
 .hk-pwd-box:hover:not([data-disabled]) {
-  border-color: var(--hi-color-primary, #58a6ff);
+  border-color: var(--hi-color-primary, #7aa2f7);
 }
 
 .hk-pwd-box:focus-within,
 .hk-pwd-box[data-focused] {
-  border-color: var(--hi-color-primary, #58a6ff);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-primary, #58a6ff) 15%, transparent);
+  border-color: var(--hi-color-primary, #7aa2f7);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 15%, transparent);
 }
 
 .hk-pwd-box[data-error] {
@@ -60,7 +60,7 @@
 }
 
 .hk-pwd-box[data-fw] {
-  border-color: var(--hi-color-warning, #d29922);
+  border-color: var(--hi-color-warning, #eed677);
 }
 
 .hk-pwd-box[data-flash] {
@@ -69,14 +69,14 @@
 
 @keyframes hk-pwd-flash {
   0% {
-    border-color: var(--hi-color-primary, #58a6ff);
+    border-color: var(--hi-color-primary, #7aa2f7);
     box-shadow:
-      0 0 22px color-mix(in srgb, var(--hi-color-primary, #58a6ff) 38%, transparent),
-      inset 0 0 10px color-mix(in srgb, var(--hi-color-primary, #58a6ff) 7%, transparent);
+      0 0 22px color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 38%, transparent),
+      inset 0 0 10px color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 7%, transparent);
   }
   100% {
-    border-color: var(--hi-color-primary, #58a6ff);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-primary, #58a6ff) 15%, transparent);
+    border-color: var(--hi-color-primary, #7aa2f7);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 15%, transparent);
   }
 }
 
@@ -91,13 +91,13 @@
 }
 
 .hk-pwd-lock-empty {
-  color: var(--hi-color-text-secondary, #666);
+  color: var(--hi-color-text-secondary, #666666);
   opacity: 0.4;
   pointer-events: none;
 }
 
 .hk-pwd-lock-filled {
-  color: var(--hi-color-primary, #58a6ff);
+  color: var(--hi-color-primary, #7aa2f7);
   cursor: pointer;
 }
 
@@ -105,12 +105,12 @@
  * hint's hover; suppressed while revealing (press restores full
  * primary) and while disabled (reveal is unreachable). */
 .hk-pwd-box:not([data-disabled]) .hk-pwd-lock-filled:hover:not([data-revealing]) {
-  color: color-mix(in srgb, var(--hi-color-primary, #58a6ff) 75%, transparent);
+  color: color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 75%, transparent);
 }
 
 .hk-pwd-box:focus-within .hk-pwd-lock,
 .hk-pwd-box[data-focused] .hk-pwd-lock {
-  color: var(--hi-color-primary, #58a6ff);
+  color: var(--hi-color-primary, #7aa2f7);
 }
 
 .hk-pwd-dots {
@@ -132,7 +132,7 @@
   z-index: 1;
   user-select: none;
   font-size: var(--text-base);
-  color: var(--hi-color-primary, rgba(88, 166, 255, 0.7));
+  color: var(--hi-color-primary, rgba(122,162,247,0.7));
   animation: hk-pwd-breathe 3s ease-in-out infinite;
   /* Default overflow strategy: hard-cut with an ellipsis (the marquee
    * variant layers its own clipping window inside this element). */
@@ -145,7 +145,7 @@
   /* Waiting-for-input placeholder turns italic + grey while focused,
      matching the blur/select hints' style. */
   font-style: italic;
-  color: var(--hi-color-text-secondary, #666);
+  color: var(--hi-color-text-secondary, #666666);
 }
 
 @keyframes hk-pwd-breathe {
@@ -174,18 +174,18 @@
   user-select: none;
   font-size: var(--text-base);
   font-style: italic;
-  color: var(--hi-color-text-secondary, #666);
+  color: var(--hi-color-text-secondary, #666666);
   cursor: pointer;
   transition: color 0.3s ease;
   animation: hk-pwd-breathe 3s ease-in-out infinite;
 }
 
 .hk-pwd-blur-hint:hover {
-  color: var(--hi-color-text-primary, #333);
+  color: var(--hi-color-text-primary, #1e1e1e);
 }
 
 .hk-pwd-blur-hint:active {
-  color: var(--hi-color-primary, #58a6ff);
+  color: var(--hi-color-primary, #7aa2f7);
 }
 
 .hk-pwd-select-hint {
@@ -198,7 +198,7 @@
   user-select: none;
   font-size: var(--text-base);
   font-style: italic;
-  color: var(--hi-color-text-secondary, #666);
+  color: var(--hi-color-text-secondary, #666666);
   pointer-events: none;
   animation: hk-pwd-breathe 3s ease-in-out infinite;
 }
@@ -215,7 +215,7 @@
   font-family: var(--font-mono, vars.$hikari-font-family-mono);
   font-size: var(--text-sm);
   letter-spacing: 0.04em;
-  color: var(--hi-color-text-primary, #333);
+  color: var(--hi-color-text-primary, #1e1e1e);
 }
 
 .hk-pwd-input {
@@ -253,13 +253,13 @@
 }
 
 .hk-pwd-strength[data-level="fair"] {
-  background: var(--hi-color-warning, #d29922);
-  box-shadow: 0 0 6px color-mix(in srgb, var(--hi-color-warning, #d29922) 60%, transparent);
+  background: var(--hi-color-warning, #eed677);
+  box-shadow: 0 0 6px color-mix(in srgb, var(--hi-color-warning, #eed677) 60%, transparent);
 }
 
 .hk-pwd-strength[data-level="strong"] {
-  background: var(--hi-color-success, #3fb950);
-  box-shadow: 0 0 6px color-mix(in srgb, var(--hi-color-success, #3fb950) 60%, transparent);
+  background: var(--hi-color-success, #0eb840);
+  box-shadow: 0 0 6px color-mix(in srgb, var(--hi-color-success, #0eb840) 60%, transparent);
 }
 
 .hk-pwd-hint {
@@ -271,7 +271,7 @@
 }
 
 .hk-pwd-hint[data-variant="caps"] {
-  color: var(--hi-color-warning, #d29922);
+  color: var(--hi-color-warning, #eed677);
 }
 
 .hk-pwd-hint[data-variant="fw"] {
@@ -287,15 +287,15 @@
 .hk-pwd-hint-text {
   margin-top: var(--space-4);
   font-size: var(--text-xs);
-  color: var(--hi-color-text-secondary, #666);
+  color: var(--hi-color-text-secondary, #666666);
 }
 
 .hk-pwd-box input:-webkit-autofill,
 .hk-pwd-box input:-webkit-autofill:hover,
 .hk-pwd-box input:-webkit-autofill:focus,
 .hk-pwd-box input:-webkit-autofill:active {
-  -webkit-text-fill-color: var(--hi-color-text-primary, #333) !important;
-  caret-color: var(--hi-color-text-primary, #333);
-  box-shadow: 0 0 0 1000px var(--hi-color-surface, #fff) inset !important;
+  -webkit-text-fill-color: var(--hi-color-text-primary, #1e1e1e) !important;
+  caret-color: var(--hi-color-text-primary, #1e1e1e);
+  box-shadow: 0 0 0 1000px var(--hi-color-surface, #f0f4f8) inset !important;
   transition: background-color calc(infinity * 1s) step-end, color calc(infinity * 1s) step-end;
 }

package/src/components/HkPhaseTransition.scss

@@ -1,13 +1,13 @@
 .hk-phase-enter-active {
   transition:
-    opacity var(--hi-duration-fast, 0.15s) cubic-bezier(0.16, 1, 0.3, 1),
-    transform var(--hi-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),
+    transform var(--duration-fast, 0.15s) cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .hk-phase-leave-active {
   transition:
-    opacity var(--hi-duration-fast, 0.15s) cubic-bezier(0.5, 0, 0.75, 0),
-    transform var(--hi-duration-fast, 0.15s) cubic-bezier(0.5, 0, 0.75, 0);
+    opacity var(--duration-fast, 0.15s) cubic-bezier(0.5, 0, 0.75, 0),
+    transform var(--duration-fast, 0.15s) cubic-bezier(0.5, 0, 0.75, 0);
 }
 
 .hk-phase-enter-from {
@@ -27,7 +27,7 @@
 @media (prefers-reduced-motion: reduce) {
   .hk-phase-enter-active,
   .hk-phase-leave-active {
-    transition: opacity var(--hi-duration-fast, 0.15s) ease;
+    transition: opacity var(--duration-fast, 0.15s) ease;
   }
 
   .hk-phase-enter-from,

package/src/components/HkPickerPane.scss

@@ -73,22 +73,22 @@
 
 .hk-dp-stage[data-dir="fwd"] > .hk-picker-pane-enter-active,
 .hk-dtp-stage[data-dir="fwd"] > .hk-picker-pane-enter-active {
-  animation: hk-picker-pane-fwd-in var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
+  animation: hk-picker-pane-fwd-in var(--duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .hk-dp-stage[data-dir="fwd"] > .hk-picker-pane-leave-active,
 .hk-dtp-stage[data-dir="fwd"] > .hk-picker-pane-leave-active {
-  animation: hk-picker-pane-fwd-out var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
+  animation: hk-picker-pane-fwd-out var(--duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .hk-dp-stage[data-dir="back"] > .hk-picker-pane-enter-active,
 .hk-dtp-stage[data-dir="back"] > .hk-picker-pane-enter-active {
-  animation: hk-picker-pane-back-in var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
+  animation: hk-picker-pane-back-in var(--duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .hk-dp-stage[data-dir="back"] > .hk-picker-pane-leave-active,
 .hk-dtp-stage[data-dir="back"] > .hk-picker-pane-leave-active {
-  animation: hk-picker-pane-back-out var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
+  animation: hk-picker-pane-back-out var(--duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 /* RTL: reading direction flips, so a forward drill flows left→right —

package/src/components/HkPopover.scss

@@ -115,8 +115,8 @@
    * HkSelectPanel sheets, hence "some have it, some don't"). The inline
    * left/right pair alone owns the sheet's horizontal geometry. */
   max-width: none;
-  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;
   border-left: 0;
   border-right: 0;

package/src/components/HkProgressRing.scss

@@ -12,7 +12,7 @@
 }
 
 .hk-progress-ring-track {
-  stroke: var(--hk-progress-ring-track, var(--hi-color-border, rgba(0, 0, 0, 0.12)));
+  stroke: var(--hk-progress-ring-track, var(--hi-color-border, rgba(100,100,100,0.12)));
   transition: stroke var(--duration-normal) var(--ease-standard);
 }
 
@@ -20,14 +20,14 @@
 // the theme primary (same default as the single-value fill).
 .hk-progress-ring-fill,
 .hk-progress-ring-seg {
-  stroke: var(--hi-color-primary, #58a6ff);
+  stroke: var(--hi-color-primary, #7aa2f7);
   transition:
     stroke-dashoffset var(--duration-normal) var(--ease-standard),
     stroke var(--duration-normal) var(--ease-standard);
 }
 
 .hk-progress-ring-success .hk-progress-ring-fill {
-  stroke: var(--hi-color-success, #3fb950);
+  stroke: var(--hi-color-success, #0eb840);
 }
 
 .hk-progress-ring-exception .hk-progress-ring-fill {
@@ -41,7 +41,7 @@
   align-items: center;
   justify-content: center;
   font-weight: 600;
-  color: var(--hi-color-text-primary, #333);
+  color: var(--hi-color-text-primary, #1e1e1e);
   user-select: none;
   pointer-events: none;
 }

package/src/components/HkRadio.scss

@@ -43,8 +43,8 @@
   border: 1px solid var(--hi-color-border);
   background: var(--hi-color-surface);
   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;
 
@@ -88,8 +88,8 @@
    :focus-visible keeps mouse clicks ring-free. */
 .hk-radio-box:has(.hk-radio-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);
 }
 
 /* --- Dot --- */

package/src/components/HkRollingNumber.scss

@@ -16,7 +16,7 @@
   [data-el="roll"] {
     display: flex;
     flex-direction: column;
-    animation: hk-rolling-number-up var(--hi-duration-instant, 0.1s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    animation: hk-rolling-number-up var(--duration-instant, 0.1s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
   }
 
   [data-el="digit"] {

package/src/components/HkScrollContainer.scss

@@ -111,13 +111,13 @@
   padding: var(--space-2) var(--space-8);
   font-size: var(--text-2xs);
   letter-spacing: 0.04em;
-  color: var(--hi-color-muted, #666);
-  background: color-mix(in srgb, var(--hi-color-surface, rgba(255, 255, 255, 0.95)) 78%, transparent);
-  border: 1px solid color-mix(in srgb, var(--hi-color-border, rgba(0, 0, 0, 0.08)) 12%, transparent);
-  border-radius: var(--hi-radius-full, 9999px);
+  color: var(--hi-color-muted, #6c6c6c);
+  background: color-mix(in srgb, var(--hi-color-surface, rgba(240,244,248,0.95)) 78%, transparent);
+  border: 1px solid color-mix(in srgb, var(--hi-color-border, rgba(100,100,100,0.08)) 12%, transparent);
+  border-radius: var(--radius-full, 9999px);
   backdrop-filter: blur(4px);
   opacity: 0.85;
-  transition: opacity var(--hi-duration-fast, 0.15s) ease;
+  transition: opacity var(--duration-fast, 0.15s) ease;
 }
 
 // Jump-back FAB — above the scrollbar tracks (z-index 10).

package/src/components/HkSearchInput.scss

@@ -3,7 +3,7 @@
   align-items: center;
   background: var(--hi-color-surface);
   border: 1px solid var(--hi-color-border);
-  border-radius: var(--hi-radius-md, 6px);
+  border-radius: 6px;
   overflow: hidden;
   transition:
     background-color var(--hi-transition-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
@@ -76,8 +76,8 @@
   color: var(--hi-color-muted);
   cursor: pointer;
   transition:
-    background-color var(--hi-duration-fast, 0.15s) ease,
-    color var(--hi-duration-fast, 0.15s) ease;
+    background-color var(--duration-fast, 0.15s) ease,
+    color var(--duration-fast, 0.15s) ease;
 
   svg {
     width: 14px;

package/src/components/HkSelect.scss

@@ -316,8 +316,8 @@
     )
   );
   background: rgb(var(--color-surface));
-  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;
   box-shadow: 0 -8px 32px rgb(0 0 0 / 20%);
   outline: none;