@celestia-island/hikari 0.43.10 → 0.43.13

package/src/components/HkFab.scss

@@ -7,7 +7,7 @@
   z-index: var(--hk-fab-z, 40);
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--space-8, 0.5rem);
   pointer-events: none;
 
   &[data-positioning="fixed"] { position: fixed; }
@@ -15,15 +15,15 @@
   // Layout axis follows the expansion direction (DOM order [actions, main]).
   &[data-expand="up"] { flex-direction: column; }
   &[data-expand="down"] { flex-direction: column-reverse; }
-  &[data-expand="left"] { flex-direction: row; }
+  &[data-expand="left"] { flex-direction: row; } // row = initial value
   &[data-expand="right"] { flex-direction: row-reverse; }
 
   // Base insets: safe-area aware, extended by --hk-fab-offset-*.
-  --_hk-fab-x: max(0.875rem, env(safe-area-inset-left, 0px));
-  --_hk-fab-y: max(0.875rem, env(safe-area-inset-bottom, 0px));
+  --_hk-fab-x: max(var(--space-14, 0.875rem), env(safe-area-inset-left, 0px));
+  --_hk-fab-y: max(var(--space-14, 0.875rem), env(safe-area-inset-bottom, 0px));
 
   &[data-corner$="-right"] {
-    --_hk-fab-x: max(0.875rem, env(safe-area-inset-right, 0px));
+    --_hk-fab-x: max(var(--space-14, 0.875rem), env(safe-area-inset-right, 0px));
     right: calc(var(--_hk-fab-x) + var(--hk-fab-offset-x, 0px));
   }
 
@@ -32,7 +32,7 @@
   }
 
   &[data-corner^="top"] {
-    --_hk-fab-y: max(0.875rem, env(safe-area-inset-top, 0px));
+    --_hk-fab-y: max(var(--space-14, 0.875rem), env(safe-area-inset-top, 0px));
     top: calc(var(--_hk-fab-y) + var(--hk-fab-offset-y, 0px));
   }
 
@@ -87,7 +87,7 @@ $sizes: (sm: 34px, md: 42px, lg: 50px);
   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);
-  backdrop-filter: blur(4px); // chip language shared with autotag pills
+  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); }
@@ -120,12 +120,12 @@ $sizes: (sm: 34px, md: 42px, lg: 50px);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.375rem;
+  gap: var(--space-6, 0.375rem);
   appearance: none;
   -webkit-appearance: none;
-  padding: 0 0.5rem;
-  min-width: 2rem;
-  height: 2rem;
+  padding: 0 var(--space-8, 0.5rem);
+  min-width: var(--space-32, 2rem);
+  height: var(--space-32, 2rem);
   font-size: 0.6875rem;
   letter-spacing: 0.02em;
   white-space: nowrap;
@@ -134,7 +134,7 @@ $sizes: (sm: 34px, md: 42px, lg: 50px);
   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);
   cursor: pointer;
-  backdrop-filter: blur(4px);
+  backdrop-filter: blur(var(--blur-xs, 4px));
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
   opacity: 0;
   transform: scale(0.4);
@@ -148,6 +148,8 @@ $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); }
 }
 
 // Staggered reveal while expanded (CSS only, via nth-child delay).
@@ -156,7 +158,22 @@ $sizes: (sm: 34px, md: 42px, lg: 50px);
   opacity: 1;
   transform: scale(1);
 
+  // Press feedback lives inside the expanded rule on purpose: at equal
+  // specificity a base-level :active would lose to scale(1) above.
+  &:active:not(:disabled) { transform: scale(0.94); }
+
   @for $i from 1 through 6 {
     &:nth-child(#{$i}) { transition-delay: #{($i - 1) * 30}ms; }
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .hk-fab-button,
+  .hk-fab-mini {
+    transition: none;
+  }
+
+  .hk-fab[data-expanded="true"] .hk-fab-mini {
+    transition-delay: 0s;
+  }
+}

package/src/components/HkFileBrowserDialog.scss

@@ -72,7 +72,7 @@
   /* "/" separators between segments (the root crumb renders its own). */
   & + .hk-file-browser-crumb::before {
     content: "/";
-    margin-right: var(--space-4);
+    margin-inline-end: var(--space-4);
     color: color-mix(in srgb, rgb(var(--color-muted)) 60%, transparent);
   }
 
@@ -229,7 +229,7 @@
   display: flex;
   align-items: center;
   gap: var(--space-8);
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 /* Compact type-filter select (HkSelect trigger inside). */
@@ -261,7 +261,7 @@
     color var(--duration-normal) var(--ease-standard);
 
   & + .hk-file-browser-layout-btn {
-    border-left: 1px solid var(--border-subtle);
+    border-inline-start: 1px solid var(--border-subtle);
   }
 
   &:hover:not([data-active]) {
@@ -382,7 +382,7 @@
   gap: var(--space-8);
   align-items: center;
   padding: var(--space-6) var(--space-12);
-  text-align: left;
+  text-align: start;
 }
 
 .hk-file-browser-list-head {
@@ -416,9 +416,12 @@
     background: var(--c-primary-subtle);
   }
 
+  // Keyboard focus is drawn INSIDE the border box (HkSelectionGrid model):
+  // rows scroll beneath the sticky list head (position: sticky + opaque
+  // surface bg), which shaves the top edge of an outer spread ring.
   &:focus-visible {
-    box-shadow: var(--shadow-focus);
-    outline: none;
+    outline: 2px solid rgb(var(--color-primary));
+    outline-offset: -2px;
   }
 
   &[data-selected] {
@@ -431,6 +434,12 @@
   }
 }
 
+/* RTL mirrors the physical-left selection bar (house pattern:
+ * HkDraggableGrid.scss flips its inset insertion markers the same way). */
+[dir="rtl"] .hk-file-browser-row[data-selected] {
+  box-shadow: inset -2px 0 0 rgb(var(--color-primary));
+}
+
 .hk-file-browser-col-name {
   overflow: hidden;
   white-space: nowrap;
@@ -442,7 +451,7 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  text-align: right;
+  text-align: end;
   font-size: var(--text-xs);
   color: rgb(var(--color-muted));
 }
@@ -466,7 +475,7 @@
   border-radius: var(--radius-md);
   background: transparent;
   font-family: inherit;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   transition:
     background-color var(--duration-normal) var(--ease-standard),
@@ -476,9 +485,11 @@
     border-color: var(--c-primary-medium);
   }
 
+  // Same inside-the-border-box focus ring as the list rows: grid tiles
+  // also scroll beneath the sticky list head in the modal scroller.
   &:focus-visible {
-    box-shadow: var(--shadow-focus);
-    outline: none;
+    outline: 2px solid rgb(var(--color-primary));
+    outline-offset: -2px;
   }
 
   &[data-selected] {

package/src/components/HkFileField.scss

@@ -12,8 +12,8 @@
 }
 
 .hk-file-field-required {
-  margin-left: var(--space-4);
-  color: var(--hi-color-danger);
+  margin-inline-start: var(--space-4);
+  color: var(--hi-color-danger, #f85149);
 }
 
 .hk-file-box {
@@ -34,7 +34,7 @@
   }
 
   &[data-error] {
-    border-color: var(--hi-color-danger);
+    border-color: var(--hi-color-danger, #f85149);
   }
 
   &[data-disabled] {
@@ -54,13 +54,24 @@
   border: 0;
   color: rgb(var(--color-text));
   font: inherit;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
+  transition: background-color var(--duration-normal) var(--ease-standard);
+
+  /* Pressable primary affordance (real <button> in the tsx) — the house
+   * quiet-trigger hover/active wash (cf. HkSelect option rows). */
+  &:hover:not(:disabled) {
+    background: var(--c-primary-subtle, rgb(var(--color-primary) / 8%));
+  }
+
+  &:active:not(:disabled) {
+    background: var(--c-primary-dim, rgb(var(--color-primary) / 10%));
+  }
 
   &:focus-visible {
-    outline: 2px solid var(--hi-color-primary);
+    outline: 2px solid var(--hi-color-primary, #58a6ff);
     outline-offset: 2px;
-    border-radius: var(--radius-xs);
+    border-radius: var(--radius-xs, 2px);
   }
 
   &:disabled {
@@ -96,7 +107,7 @@
   padding: 0;
   background: transparent;
   border: 0;
-  border-radius: var(--radius-xs);
+  border-radius: var(--radius-xs, 2px);
   color: rgb(var(--color-text) / 55%);
   cursor: pointer;
 
@@ -106,7 +117,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--hi-color-primary);
+    outline: 2px solid var(--hi-color-primary, #58a6ff);
     outline-offset: 1px;
   }
 }
@@ -132,5 +143,5 @@
 }
 
 .hk-file-field-error {
-  color: var(--hi-color-danger);
+  color: var(--hi-color-danger, #f85149);
 }

package/src/components/HkFilePickerField.scss

@@ -1,3 +1,5 @@
+@use "./hikari-vars" as vars;
+
 .hk-file-picker-field {
   display: block;
 }
@@ -26,10 +28,14 @@
 
   &:focus-within {
     border-color: color-mix(in srgb, rgb(var(--color-text)) 38%, transparent);
+    /* Visible keyboard focus ring on the text input (which sets
+     * outline: none) — sibling pattern: the inline-rename input pairs
+     * border shift + var(--shadow-focus). */
+    box-shadow: var(--shadow-focus);
   }
 
   &[data-error] {
-    border-color: var(--hi-color-danger);
+    border-color: var(--hi-color-danger, #f85149);
   }
 
   &[data-disabled] {
@@ -47,9 +53,9 @@
   justify-content: center;
   width: 1.75rem;
   height: 1.75rem;
-  border-radius: var(--radius-xs);
-  background: color-mix(in srgb, var(--hi-color-primary) 14%, transparent);
-  color: var(--hi-color-primary);
+  border-radius: var(--radius-xs, 2px);
+  background: color-mix(in srgb, var(--hi-color-primary, #58a6ff) 14%, transparent);
+  color: var(--hi-color-primary, #58a6ff);
   pointer-events: none;
 }
 
@@ -70,7 +76,7 @@
 
   /* Paths are code — mono by default, opt out with :mono="false". */
   .hk-file-picker-box[data-mono] & {
-    font-family: var(--font-mono, ui-monospace, monospace);
+    font-family: var(--font-mono, vars.$hikari-font-family-mono);
   }
 
   &:disabled {
@@ -88,6 +94,6 @@
   color: rgb(var(--color-text) / 60%);
 
   &[data-error] {
-    color: var(--hi-color-danger);
+    color: var(--hi-color-danger, #f85149);
   }
 }

package/src/components/HkGaugeRing.scss

@@ -2,3 +2,11 @@
   position: relative;
   display: inline-flex;
 }
+
+// The 0.8s dash sweep rides an INLINE transition on the progress circles
+// (HkGaugeRing.tsx), so the guard needs !important to beat it.
+@media (prefers-reduced-motion: reduce) {
+  .hk-gauge-ring circle {
+    transition: none !important;
+  }
+}

package/src/components/HkHoverRevealAction.scss

@@ -27,14 +27,28 @@
     transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+/* Revealed state, shared by the tsx-managed hover/touch reveal
+   (.is-revealed) and keyboard focus anywhere in the wrapper
+   (:focus-within) — without the focus path the extension's real
+   buttons stay tab-reachable yet invisible (HkTabs renders its
+   add actions there). */
+.hk-hover-reveal.is-revealed > .hk-hover-reveal-extension,
+.hk-hover-reveal:focus-within > .hk-hover-reveal-extension {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .hk-hover-reveal[data-placement="right"] > .hk-hover-reveal-extension {
+  /* Anchors stay PHYSICAL on purpose: placement is a physical prop
+     (consumers pass literal left/right) and the slide transforms below
+     are physical too — logical axes here would mirror the box in RTL
+     while the motion still slides the old way. */
   left: 100%;
   top: 50%;
   transform: translate(-4px, -50%);
 }
-.hk-hover-reveal[data-placement="right"].is-revealed > .hk-hover-reveal-extension {
-  opacity: 1;
-  pointer-events: auto;
+.hk-hover-reveal[data-placement="right"].is-revealed > .hk-hover-reveal-extension,
+.hk-hover-reveal[data-placement="right"]:focus-within > .hk-hover-reveal-extension {
   transform: translate(4px, -50%);
 }
 
@@ -43,9 +57,8 @@
   top: 50%;
   transform: translate(4px, -50%);
 }
-.hk-hover-reveal[data-placement="left"].is-revealed > .hk-hover-reveal-extension {
-  opacity: 1;
-  pointer-events: auto;
+.hk-hover-reveal[data-placement="left"].is-revealed > .hk-hover-reveal-extension,
+.hk-hover-reveal[data-placement="left"]:focus-within > .hk-hover-reveal-extension {
   transform: translate(-4px, -50%);
 }
 
@@ -54,9 +67,8 @@
   top: 100%;
   transform: translate(-50%, -4px);
 }
-.hk-hover-reveal[data-placement="bottom"].is-revealed > .hk-hover-reveal-extension {
-  opacity: 1;
-  pointer-events: auto;
+.hk-hover-reveal[data-placement="bottom"].is-revealed > .hk-hover-reveal-extension,
+.hk-hover-reveal[data-placement="bottom"]:focus-within > .hk-hover-reveal-extension {
   transform: translate(-50%, 4px);
 }
 
@@ -65,8 +77,14 @@
   bottom: 100%;
   transform: translate(-50%, 4px);
 }
-.hk-hover-reveal[data-placement="top"].is-revealed > .hk-hover-reveal-extension {
-  opacity: 1;
-  pointer-events: auto;
+.hk-hover-reveal[data-placement="top"].is-revealed > .hk-hover-reveal-extension,
+.hk-hover-reveal[data-placement="top"]:focus-within > .hk-hover-reveal-extension {
   transform: translate(-50%, -4px);
 }
+
+/* Reduced motion: keep the opacity fade, drop the transform slide. */
+@media (prefers-reduced-motion: reduce) {
+  .hk-hover-reveal-extension {
+    transition: opacity 0.15s ease;
+  }
+}

package/src/components/HkIcon.scss

@@ -118,21 +118,3 @@
 .hk-icon-muted {
   color: var(--hi-color-text-secondary);
 }
-
-// ------
-// Transitions
-// ------
-
-.hk-icon-transition {
-  transition: color 150ms ease-in-out;
-
-  svg path,
-  svg circle,
-  svg rect,
-  svg ellipse,
-  svg polygon,
-  svg polyline,
-  svg line {
-    transition: fill 150ms ease-in-out, stroke 150ms ease-in-out;
-  }
-}

package/src/components/HkIconButton.scss

@@ -6,14 +6,15 @@
 // Hikari IconButton Component - FUI Styling
 // Three-layer CSS variable system:
 // - Layer1: Foundation variables (foundation.scss)
-// - Layer2: Component variables (icon-button-vars.scss)
+// - Layer2: Component variables (HkIconButtonVars.scss)
 // - Custom: Runtime overrides via AnimationBuilder
 //
-// NOTE: Hover effects are handled by Glow wrapper, not here
+// NOTE: This sheet now carries baseline hover/press feedback via the
+// --hi-icon-button-* active vars; hosts can out-rank it (see below).
 // ------
 
 .hk-icon-button {
-  // Layer2 variables are defined in icon-button-vars.scss
+  // Layer2 variables are defined in HkIconButtonVars.scss
 
   // Layout
   display: inline-flex;
@@ -22,7 +23,6 @@
   flex-shrink: 0;
   padding: 0;
   line-height: 0;
-  gap: 0;
 
   // Size - use CSS variables
   width: var(--hi-icon-button-size);
@@ -54,85 +54,48 @@
   // Transitions - use CSS variables
   transition: var(--hi-icon-button-transition);
 
-  // No transform - controlled by AnimationBuilder via Glow wrapper
+  // Resting transform stays none and the press keeps it that way — the
+  // press feedback is the background wash only.
 
   // Cursor
   cursor: pointer;
 
-  // Focus state - only outline, no color changes
+  // Focus state - only outline, no color changes (the glyph color var is
+  // identical at rest, so re-declaring it here would be a no-op)
   &:focus-visible {
     outline: 2px solid var(--hi-icon-button-border-color-focus);
     outline-offset: 2px;
-    color: var(--hi-icon-button-icon-color);
-
-    .hk-icon-button-icon {
-      color: var(--hi-icon-button-icon-color);
-    }
   }
 
   // Disabled state
   &:disabled {
     background: var(--hi-icon-button-bg-disabled);
-    color: var(--hi-icon-button-icon-color-disabled);
     cursor: not-allowed;
     pointer-events: none;
   }
 
-  // No active state - controlled by AnimationBuilder via Glow wrapper
-
-  // ------
-  // Size Variants - Variables defined in icon-button-vars.scss
-  // ------
-
-  &.hk-icon-button-16,
-  &.hk-icon-button-24,
-  &.hk-icon-button-32,
-  &.hk-icon-button-36,
-  &.hk-icon-button-40 {
-    // Size variables are already set by the classes in icon-button-vars.scss
+  // Hover / press feedback. The old contract deferred these to the
+  // Rust-side Glow wrapper, but Vue-library hosts render no Glow
+  // (window-close.scss and the lightbox close each had to paint their
+  // own tint). These defaults consume the designed active vars from
+  // HkIconButtonVars.scss; :where() keeps both rules at (0,1,0) so any
+  // host hover paint — .hk-window-close's (0,3,0) tint, the lightbox
+  // chip's (0,4,0) re-assertion — still outranks them (zero-specificity
+  // guard pattern from styles/theme/base.scss).
+  &:where(:hover:not(:disabled):not(:active)) {
+    background: var(--hi-icon-button-bg-hover, var(--hi-icon-button-bg-active));
   }
 
-  // ------
-  // Variant: Ghost (default - transparent)
-  // ------
-
-  &.hk-icon-button-ghost,
-  &.hk-icon-button-borderless {
-    // Variables defined in icon-button-vars.scss
+  &:where(:active:not(:disabled)) {
+    background: var(--hi-icon-button-bg-active);
   }
 
   // ------
-  // Variant: Primary (solid primary color)
+  // Size/variant hooks carry no rules here: .hk-icon-button-16/24/32/36/40
+  // and -ghost/-borderless/-primary/-secondary/-danger/-success get all of
+  // their custom properties from HkIconButtonVars.scss.
   // ------
 
-  &.hk-icon-button-primary {
-    // Variables defined in icon-button-vars.scss
-  }
-
-  // ------
-  // Variant: Secondary (solid secondary color)
-  // ------
-
-  &.hk-icon-button-secondary {
-    // Variables defined in icon-button-vars.scss
-  }
-
-  // ------
-  // Variant: Danger (solid danger color)
-  // ------
-
-  &.hk-icon-button-danger {
-    // Variables defined in icon-button-vars.scss
-  }
-
-  // ------
-  // Variant: Success (solid success color)
-  // ------
-
-  &.hk-icon-button-success {
-    // Variables defined in icon-button-vars.scss
-  }
-
   // ------
   // Icon Styles - Use CSS Variables
   // ------
@@ -169,8 +132,12 @@
   &:disabled .hk-icon-button-icon {
     color: var(--hi-icon-button-icon-color-disabled);
   }
+}
 
-  .hk-icon-button-disabled {
-    opacity: 0.3;
+// The transition above drives the press transform; snap it under reduced
+// motion (house pattern: HkFab.scss / HkExpansionPanel.scss).
+@media (prefers-reduced-motion: reduce) {
+  .hk-icon-button {
+    transition: none;
   }
 }

package/src/components/HkIconButtonVars.scss

@@ -2,9 +2,10 @@
 // Layer2 - IconButton Component Variables
 //
 // This file defines component-level CSS variables for the IconButton component.
-// These variables can be overridden at runtime via AnimationBuilder.
+// These variables can be overridden by host theme layers.
 //
-// NOTE: Hover effects are handled by Glow wrapper, not here.
+// NOTE: Hover feedback is not styled in this layer; window-close.scss adds
+// its own hover grammar for close controls.
 // Only base, active, and disabled states are defined.
 
 // ------
@@ -26,18 +27,14 @@
   --hi-icon-button-bg-active: var(--hi-bg-surface-dark);
   --hi-icon-button-bg-disabled: rgba(128, 128, 128, 0.1);
 
-  // Border Colors
-  --hi-icon-button-border-color: transparent;
+  // Border Colors (focus ring only; the base button draws no border)
   --hi-icon-button-border-color-focus: var(--hi-border-color-focus);
 
-  // Shadow & Glow (used by Glow wrapper)
-  --hi-icon-button-glow: var(--hi-glow-color);
-
   // ------
   // 2. Border Radius System
   // ------
 
-  --hi-icon-button-radius: 4px;
+  --hi-icon-button-radius: var(--radius-sm, 4px);
 
   // ------
   // 3. Animation System
@@ -45,15 +42,13 @@
 
   // Duration
   --hi-icon-button-duration: var(--hi-duration-fast);
-  --hi-icon-button-duration-active: var(--hi-duration-instant);
 
   // Easing
   --hi-icon-button-easing: var(--hi-ease-default);
 
-  // Transition
-  --hi-icon-button-transition:
-    background-color var(--hi-icon-button-duration) var(--hi-icon-button-easing),
-    transform var(--hi-icon-button-duration-active) var(--hi-icon-button-easing);
+  // Transition (background only; CSS applies no transform to the button)
+  --hi-icon-button-transition: background-color var(--hi-icon-button-duration)
+    var(--hi-icon-button-easing);
 
   // ------
   // 4. Size System
@@ -61,13 +56,6 @@
 
   --hi-icon-button-size: 40px;
   --hi-icon-button-icon-size: var(--hi-icon-size-sm);
-
-  // ------
-  // 5. Transform System
-  // ------
-
-  --hi-icon-button-transform: none;
-  --hi-icon-button-transform-active: scale(0.95);
 }
 
 // ------
@@ -108,11 +96,7 @@
   --hi-icon-button-icon-color: var(--hi-color-text-secondary);
   --hi-icon-button-icon-color-active: var(--hi-color-text-secondary);
 
-  --hi-icon-button-bg: transparent;
   --hi-icon-button-bg-active: var(--hi-color-gray-20, rgba(128, 128, 128, 0.2));
-
-  --hi-icon-button-border-color: transparent;
-  --hi-icon-button-glow: var(--hi-glow-color);
 }
 
 // ------
@@ -131,7 +115,6 @@
   --hi-icon-button-bg-active: var(--hi-color-primary-dark);
 
   --hi-icon-button-border-color-focus: var(--hi-color-primary);
-  --hi-icon-button-glow: var(--hi-glow-color);
 }
 
 // ------
@@ -146,7 +129,6 @@
   --hi-icon-button-bg-active: var(--hi-color-secondary-dark);
 
   --hi-icon-button-border-color-focus: var(--hi-color-secondary);
-  --hi-icon-button-glow: var(--hi-glow-color);
 }
 
 // ------
@@ -161,7 +143,6 @@
   --hi-icon-button-bg-active: var(--hi-color-danger-dark);
 
   --hi-icon-button-border-color-focus: var(--hi-color-danger);
-  --hi-icon-button-glow: var(--hi-glow-color);
 }
 
 // ------
@@ -176,5 +157,4 @@
   --hi-icon-button-bg-active: var(--hi-color-success-dark);
 
   --hi-icon-button-border-color-focus: var(--hi-color-success);
-  --hi-icon-button-glow: var(--hi-glow-color);
 }