@godxjp/ui 28.13.0 → 30.0.0

package/dist/styles/layout.css

@@ -14,12 +14,12 @@
 
   .ui-separator:not([data-labelled])[data-orientation="horizontal"] {
     width: 100%;
-    height: var(--separator-rule-size);
+    height: var(--separator-rule-size, var(--stroke-hairline));
     background: hsl(var(--separator-rule-color, var(--border)));
   }
 
   .ui-separator:not([data-labelled])[data-orientation="vertical"] {
-    width: var(--separator-rule-size);
+    width: var(--separator-rule-size, var(--stroke-hairline));
     height: 100%;
     background: hsl(var(--separator-rule-color, var(--border)));
   }
@@ -41,7 +41,7 @@
   }
 
   .ui-separator-rule {
-    block-size: var(--separator-rule-size);
+    block-size: var(--separator-rule-size, var(--stroke-hairline));
     background: hsl(var(--separator-rule-color, var(--border)));
   }
 
@@ -62,7 +62,10 @@
 
   .ui-separator[data-tone="primary"] {
     --separator-rule-color: var(--separator-tone-primary-rule-color, var(--primary));
-    --separator-label-color: var(--separator-tone-primary-label-color, var(--primary));
+    --separator-label-color: var(
+      --separator-tone-primary-label-color,
+      var(--text-brand, var(--primary))
+    );
   }
 
   .ui-separator[data-tone="success"] {
@@ -560,7 +563,7 @@
   }
 
   .ui-resizable-handle {
-    width: var(--control-border-width);
+    width: var(--control-border-width, var(--stroke-hairline));
     background: hsl(var(--border));
     position: relative;
     flex-shrink: 0;
@@ -572,7 +575,7 @@
 
   .ui-resizable-handle[aria-orientation="vertical"] {
     width: auto;
-    height: var(--control-border-width);
+    height: var(--control-border-width, var(--stroke-hairline));
   }
 
   .ui-resizable-handle:hover,
@@ -920,7 +923,7 @@
     gap: var(--space-inline-sm);
     padding-top: var(--space-stack-md);
     padding-inline-end: calc(var(--space-page-active-x) + var(--page-footer-content-slack));
-    border-top: var(--page-footer-divider, 1px solid hsl(var(--border)));
+    border-top: var(--page-footer-divider, var(--stroke-hairline) solid hsl(var(--border)));
   }
 
   .ui-page-footer > * {
@@ -1018,19 +1021,31 @@
 
   .ui-empty-state[data-tone="success"] {
     --empty-state-icon-foreground: hsl(var(--success));
-    --empty-state-icon-tint: hsl(var(--success) / 0.12);
+    --empty-state-icon-tint: var(
+      --surface-success,
+      hsl(var(--success) / var(--surface-success-alpha, 0.12))
+    );
   }
   .ui-empty-state[data-tone="warning"] {
     --empty-state-icon-foreground: hsl(var(--warning));
-    --empty-state-icon-tint: hsl(var(--warning) / 0.12);
+    --empty-state-icon-tint: var(
+      --surface-warning,
+      hsl(var(--warning) / var(--surface-warning-alpha, 0.12))
+    );
   }
   .ui-empty-state[data-tone="destructive"] {
     --empty-state-icon-foreground: hsl(var(--destructive));
-    --empty-state-icon-tint: hsl(var(--destructive) / 0.12);
+    --empty-state-icon-tint: var(
+      --surface-destructive,
+      hsl(var(--destructive) / var(--surface-destructive-alpha, 0.12))
+    );
   }
   .ui-empty-state[data-tone="info"] {
     --empty-state-icon-foreground: hsl(var(--info));
-    --empty-state-icon-tint: hsl(var(--info) / 0.12);
+    --empty-state-icon-tint: var(
+      --surface-info,
+      hsl(var(--info) / var(--surface-info-alpha, 0.12))
+    );
   }
 }
 
@@ -1118,8 +1133,11 @@
     align-items: center;
     justify-content: center;
     padding-inline: var(--pagination-page-padding-x);
-    border-radius: var(--radius-sm);
-    border: 1px solid hsl(var(--border));
+    border-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
+    border: var(--stroke-hairline) solid hsl(var(--border));
     color: hsl(var(--foreground));
     text-decoration: none;
   }
@@ -1385,8 +1403,8 @@
   .ui-legal-document-toc-link {
     display: block;
     padding: var(--legal-document-toc-item-padding);
-    border-radius: var(--legal-document-toc-item-radius);
-    border-inline-start: var(--legal-document-toc-marker-width) solid transparent;
+    border-radius: var(--legal-document-toc-item-radius, var(--radius));
+    border-inline-start: var(--legal-document-toc-marker-width, var(--stroke-md)) solid transparent;
     font-size: var(--legal-document-toc-font-size);
     line-height: 1.6;
     color: hsl(var(--legal-document-toc-foreground, var(--muted-foreground)));
@@ -1655,7 +1673,10 @@
     display: list-item;
   }
   .ui-flex[data-surface] {
-    border-radius: var(--flex-surface-radius, var(--radius-md));
+    border-radius: var(
+      --flex-surface-radius,
+      var(--radius-md, calc(var(--radius) / var(--radius-ratio)))
+    );
   }
   .ui-flex[data-surface="muted"] {
     background: var(--flex-surface-background, hsl(var(--muted)));
@@ -1663,11 +1684,11 @@
   .ui-flex[data-surface="warning"] {
     background: var(
       --flex-surface-background,
-      hsl(var(--warning) / var(--flex-surface-warning-alpha))
+      var(--surface-warning, hsl(var(--warning) / var(--flex-surface-warning-alpha)))
     );
   }
   .ui-flex[data-surface="popover"] {
-    background: var(--flex-surface-background, hsl(var(--popover)));
+    background: var(--flex-surface-background, hsl(var(--popover) / var(--popover-alpha, 100%)));
     border: var(--stroke-hairline) solid hsl(var(--border));
     box-shadow: var(--shadow-sm);
   }
@@ -1847,7 +1868,7 @@
     min-inline-size: 0;
     align-items: center;
     gap: var(--actions-gap);
-    border-radius: var(--actions-radius);
+    border-radius: var(--actions-radius, var(--radius));
   }
 
   .ui-actions[data-variant="filled"],
@@ -1871,7 +1892,7 @@
   }
 
   .ui-actions-feedback [data-pressed] {
-    color: hsl(var(--primary));
+    color: hsl(var(--text-brand, var(--primary)));
   }
 
   @keyframes ui-actions-fade-in {
@@ -1925,8 +1946,8 @@
     max-inline-size: calc(100% - var(--draggable-panel-inset) - var(--draggable-panel-inset));
     block-size: var(--draggable-panel-block-size);
     max-block-size: var(--draggable-panel-max-block-size);
-    border: var(--draggable-panel-border-width) solid hsl(var(--border));
-    border-radius: var(--draggable-panel-radius);
+    border: var(--draggable-panel-border-width, var(--stroke-hairline)) solid hsl(var(--border));
+    border-radius: var(--draggable-panel-radius, var(--radius));
     background-color: hsl(var(--background));
     box-shadow: var(--draggable-panel-shadow);
     overflow: hidden;
@@ -1973,7 +1994,8 @@
     align-items: center;
     gap: var(--draggable-panel-bar-gap);
     padding: var(--draggable-panel-bar-padding);
-    border-block-end: var(--draggable-panel-border-width) solid hsl(var(--border));
+    border-block-end: var(--draggable-panel-border-width, var(--stroke-hairline)) solid
+      hsl(var(--border));
     background-color: hsl(var(--muted) / 0.4);
   }
 
@@ -1982,7 +2004,10 @@
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    border-radius: var(--radius-sm);
+    border-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     color: hsl(var(--muted-foreground));
     cursor: grab;
     touch-action: none;
@@ -2023,7 +2048,10 @@
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    border-radius: var(--radius-sm);
+    border-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     color: hsl(var(--muted-foreground));
   }
 

package/dist/styles/logo-layout.css

@@ -6,7 +6,7 @@
     flex: 0 0 auto;
     width: var(--logo-size-md);
     height: var(--logo-size-md);
-    border-radius: var(--logo-radius);
+    border-radius: var(--logo-radius, var(--radius));
     background: hsl(var(--primary));
     color: hsl(var(--primary-foreground));
     font-weight: 700;
@@ -199,9 +199,9 @@
   .ui-logo-lockup .ui-logo-product-suffix::before {
     content: "";
     flex: 0 0 auto;
-    inline-size: var(--logo-divider-width);
+    inline-size: var(--logo-divider-width, var(--stroke-hairline));
     block-size: var(--logo-divider-height);
-    border-radius: var(--logo-divider-width);
+    border-radius: var(--logo-divider-width, var(--stroke-hairline));
     background: hsl(
       var(--logo-divider-color, var(--logo-godx-ink-color)) / var(--logo-divider-alpha)
     );

package/dist/styles/motion.css

@@ -92,7 +92,7 @@
     color: hsl(var(--foreground));
   }
   .ui-activity[data-tone="primary"] .ui-activity-mark {
-    color: hsl(var(--primary));
+    color: hsl(var(--text-brand, var(--primary)));
   }
   .ui-activity[data-tone="success"] .ui-activity-mark {
     color: hsl(var(--text-success));
@@ -208,7 +208,7 @@
       background: CanvasText;
     }
     .ui-activity-bar {
-      border: 1px solid CanvasText;
+      border: var(--stroke-hairline) solid CanvasText;
     }
   }
 }

package/dist/styles/navigation-layout.css

@@ -48,6 +48,10 @@
     scrollbar-width: thin;
   }
 
+  [data-slot="tabs-trigger"] {
+    border-width: var(--stroke-hairline);
+  }
+
   [data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"]::after {
     content: "";
     position: absolute;
@@ -164,6 +168,20 @@
     }
   }
 
+  [data-slot="tabs-list"][data-variant="default"] {
+    background-color: var(
+      --tabs-list-background,
+      hsl(var(--muted) / var(--tabs-list-background-alpha, 100%))
+    );
+  }
+
+  [data-slot="tabs-trigger"][data-state="active"] {
+    background-color: var(
+      --tabs-trigger-active-background,
+      hsl(var(--background) / var(--tabs-trigger-active-background-alpha, 100%))
+    );
+  }
+
   .ui-tabs-bar {
     display: flex;
     min-inline-size: 0;
@@ -210,23 +228,27 @@
 
   [data-slot="tabs"][data-variant="card"] [data-slot="tabs-list"],
   [data-slot="tabs"][data-variant="editable-card"] [data-slot="tabs-list"] {
-    box-shadow: inset 0 calc(-1 * var(--tabs-card-rail-border-width)) 0 hsl(var(--border));
+    box-shadow: inset 0 calc(-1 * var(--tabs-card-rail-border-width, var(--stroke-hairline))) 0
+      hsl(var(--border));
   }
 
   [data-slot="tabs"][data-variant="card"][data-placement="bottom"] [data-slot="tabs-list"],
   [data-slot="tabs"][data-variant="editable-card"][data-placement="bottom"]
     [data-slot="tabs-list"] {
-    box-shadow: inset 0 var(--tabs-card-rail-border-width) 0 hsl(var(--border));
+    box-shadow: inset 0 var(--tabs-card-rail-border-width, var(--stroke-hairline)) 0
+      hsl(var(--border));
   }
 
   [data-slot="tabs"][data-variant="card"][data-placement="start"] [data-slot="tabs-list"],
   [data-slot="tabs"][data-variant="editable-card"][data-placement="start"] [data-slot="tabs-list"] {
-    box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
+    box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width, var(--stroke-hairline))) 0 0
+      hsl(var(--border));
   }
 
   [data-slot="tabs"][data-variant="card"][data-placement="end"] [data-slot="tabs-list"],
   [data-slot="tabs"][data-variant="editable-card"][data-placement="end"] [data-slot="tabs-list"] {
-    box-shadow: inset var(--tabs-card-rail-border-width) 0 0 hsl(var(--border));
+    box-shadow: inset var(--tabs-card-rail-border-width, var(--stroke-hairline)) 0 0
+      hsl(var(--border));
   }
 
   [dir="rtl"]
@@ -235,14 +257,16 @@
   [dir="rtl"]
     [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
     [data-slot="tabs-list"] {
-    box-shadow: inset var(--tabs-card-rail-border-width) 0 0 hsl(var(--border));
+    box-shadow: inset var(--tabs-card-rail-border-width, var(--stroke-hairline)) 0 0
+      hsl(var(--border));
   }
 
   [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="end"] [data-slot="tabs-list"],
   [dir="rtl"]
     [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
     [data-slot="tabs-list"] {
-    box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
+    box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width, var(--stroke-hairline))) 0 0
+      hsl(var(--border));
   }
 
   [data-slot="tabs"][data-bodied="true"] {
@@ -280,8 +304,10 @@
   [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-panel"],
   [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-content"] {
     border: var(--tabs-panel-border-width) solid hsl(var(--border));
-    border-radius: var(--tabs-panel-radius);
-    background: hsl(var(--tabs-panel-background, var(--background)));
+    border-radius: var(--tabs-panel-radius, var(--tabs-card-radius));
+    background: hsl(
+      var(--tabs-panel-background, var(--background)) / var(--tabs-panel-background-alpha, 100%)
+    );
     padding: var(--tabs-panel-space-inset);
   }
 
@@ -355,13 +381,16 @@
   }
 
   [data-slot="tabs-trigger"][data-state="active"] .ui-tabs-count {
-    background: var(--tabs-count-active-background, hsl(var(--primary)));
+    background: var(
+      --tabs-count-active-background,
+      hsl(var(--primary) / var(--tabs-count-active-background-alpha, 100%))
+    );
     color: var(--tabs-count-active-color, hsl(var(--primary-foreground)));
   }
 
   @media (forced-colors: active) {
     [data-slot="tabs-trigger"][data-state="active"] .ui-tabs-count {
-      outline: var(--tabs-count-forced-outline-width) solid currentColor;
+      outline: var(--tabs-count-forced-outline-width, var(--stroke-hairline)) solid currentColor;
     }
   }
 
@@ -372,7 +401,10 @@
     block-size: var(--tabs-tab-remove-size);
     align-items: center;
     justify-content: center;
-    border-radius: var(--tabs-tab-remove-radius);
+    border-radius: var(
+      --tabs-tab-remove-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     margin-inline-start: var(--tabs-tab-remove-space-inline-end);
     margin-inline-end: calc(-1 * var(--tabs-tab-remove-space-inline-end));
     color: hsl(var(--muted-foreground));
@@ -397,7 +429,7 @@
     block-size: var(--tabs-overflow-size);
     align-items: center;
     justify-content: center;
-    border-radius: var(--tabs-overflow-radius);
+    border-radius: var(--tabs-overflow-radius, calc(var(--radius) / var(--radius-ratio)));
     color: hsl(var(--muted-foreground));
   }
 
@@ -418,9 +450,11 @@
     block-size: var(--tabs-add-size);
     align-items: center;
     justify-content: center;
-    border: var(--tabs-card-rail-border-width) solid hsl(var(--border));
-    border-radius: var(--tabs-add-radius);
-    background: hsl(var(--tabs-card-background, var(--muted)));
+    border: var(--tabs-card-rail-border-width, var(--stroke-hairline)) solid hsl(var(--border));
+    border-radius: var(--tabs-add-radius, calc(var(--radius) / var(--radius-ratio)));
+    background: hsl(
+      var(--tabs-card-background, var(--muted)) / var(--tabs-card-background-alpha, 100%)
+    );
     color: hsl(var(--muted-foreground));
   }
 
@@ -491,7 +525,10 @@
   .ui-dropdown-menu-checkbox-item,
   .ui-dropdown-menu-radio-item,
   .ui-dropdown-menu-shortcut {
-    border-radius: var(--menu-item-radius);
+    border-radius: var(
+      --menu-item-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     padding-inline: var(--menu-item-space-inline);
     height: var(--menu-item-height);
     display: flex;
@@ -528,7 +565,10 @@
 
   .ui-dropdown-menu-item:hover,
   .ui-dropdown-menu-sub-trigger:hover {
-    background: var(--menu-item-hover-background, hsl(var(--accent)));
+    background: var(
+      --menu-item-hover-background,
+      hsl(var(--accent) / var(--menu-item-hover-background-alpha, 100%))
+    );
     color: var(--menu-item-hover-foreground, hsl(var(--accent-foreground)));
   }
 
@@ -537,7 +577,10 @@
   .ui-dropdown-menu-checkbox-item[data-highlighted],
   .ui-dropdown-menu-radio-item[data-highlighted],
   .ui-dropdown-menu-sub-trigger[data-state="open"] {
-    background: var(--menu-item-hover-background, hsl(var(--accent)));
+    background: var(
+      --menu-item-hover-background,
+      hsl(var(--accent) / var(--menu-item-hover-background-alpha, 100%))
+    );
     color: var(--menu-item-hover-foreground, hsl(var(--accent-foreground)));
   }
 
@@ -603,7 +646,10 @@
     min-width: 0;
     align-items: center;
     gap: var(--steps-inline-item-gap);
-    border-radius: var(--radius-sm);
+    border-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     outline: none;
   }
 
@@ -620,7 +666,7 @@
   }
 
   .ui-steps-inline-item[data-status="finish"] .ui-steps-inline-control {
-    color: hsl(var(--primary));
+    color: hsl(var(--text-brand, var(--primary)));
   }
 
   .ui-steps-inline-item[data-status="process"] .ui-steps-inline-control {
@@ -649,11 +695,18 @@
 
     z-index: var(--overlay-z-index);
     min-width: var(--menu-content-min-width);
-    border-radius: var(--radius-md);
-    border: 1px solid hsl(var(--border));
-    background: hsl(var(--popover));
+    border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
+    border: var(--stroke-hairline) solid hsl(var(--border));
+
+    background: var(
+      --dropdown-content-background,
+      hsl(var(--popover) / var(--popover-alpha, 100%))
+    );
     color: hsl(var(--popover-foreground));
     padding: var(--menu-content-space-inset);
+
+    backdrop-filter: blur(var(--dropdown-content-backdrop-blur-size))
+      saturate(var(--surface-backdrop-saturate, 160%));
     box-shadow: var(--shadow-md), var(--shadow-glow);
   }
 
@@ -702,7 +755,10 @@
     display: inline-flex;
     align-items: center;
     gap: var(--breadcrumb-menu-trigger-gap);
-    border-radius: var(--radius-sm);
+    border-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     background: transparent;
     color: inherit;
     font: inherit;
@@ -715,7 +771,7 @@
   .ui-dropdown-menu-arrow {
     inline-size: var(--dropdown-arrow-width);
     block-size: var(--dropdown-arrow-height);
-    fill: hsl(var(--dropdown-arrow-background, var(--popover)));
+    fill: hsl(var(--dropdown-arrow-background, var(--popover)) / var(--popover-alpha, 100%));
   }
 
   .ui-dropdown-menu-indicator-slot {
@@ -752,7 +808,7 @@
 
   .ui-dropdown-menu-radio-item[data-state="checked"] {
     background: hsl(var(--primary) / 0.1);
-    color: hsl(var(--primary));
+    color: hsl(var(--text-brand, var(--primary)));
     font-weight: var(--font-weight-medium);
   }
 
@@ -790,7 +846,8 @@
   }
 
   .ui-steps-dot[data-status="process"] {
-    box-shadow: 0 0 0 var(--steps-dot-process-ring-width) hsl(var(--primary) / 0.2);
+    box-shadow: 0 0 0 var(--steps-dot-process-ring-width, var(--stroke-xl))
+      hsl(var(--primary) / 0.2);
   }
 
   .ui-steps-dot[data-status="error"] {
@@ -803,7 +860,7 @@
 
   .ui-steps-marker {
     border-radius: var(--radius-pill);
-    border: var(--steps-marker-border-width) solid transparent;
+    border: var(--steps-marker-border-width, var(--stroke-md)) solid transparent;
     font-size: var(--steps-marker-font-size);
     font-weight: var(--font-weight-medium);
   }
@@ -816,7 +873,7 @@
 
   .ui-steps-marker[data-status="process"] {
     border-color: hsl(var(--primary));
-    color: hsl(var(--primary));
+    color: hsl(var(--text-brand, var(--primary)));
   }
 
   .ui-steps-marker[data-status="error"] {
@@ -957,7 +1014,7 @@
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-pill);
-    padding: var(--steps-progress-ring-width);
+    padding: var(--steps-progress-ring-width, var(--stroke-md));
     background: conic-gradient(
       hsl(var(--primary)) calc(var(--steps-progress-ratio, 0) * 360deg),
       hsl(var(--steps-progress-track-color, var(--muted))) 0
@@ -978,7 +1035,7 @@
     gap: var(--steps-nav-space-gap);
     padding-inline: var(--steps-nav-space-inline);
     padding-block: var(--steps-nav-space-block);
-    border-radius: var(--steps-nav-radius);
+    border-radius: var(--steps-nav-radius, calc(var(--radius) / var(--radius-ratio)));
     background: hsl(var(--muted));
   }
 
@@ -1087,7 +1144,7 @@
   }
 
   .ui-conversations-row {
-    --button-radius: var(--conversations-item-radius);
+    --button-radius: var(--conversations-item-radius, var(--radius));
 
     min-inline-size: 0;
     height: var(--conversations-item-height);
@@ -1099,7 +1156,10 @@
   }
 
   .ui-conversations-item[data-active="true"] .ui-conversations-row {
-    background: var(--conversations-item-active-background, hsl(var(--accent)));
+    background: var(
+      --conversations-item-active-background,
+      hsl(var(--accent) / var(--conversations-item-active-background-alpha, 100%))
+    );
     color: var(--conversations-item-active-color, hsl(var(--foreground)));
     font-weight: var(--conversations-item-active-font-weight);
   }
@@ -1194,7 +1254,7 @@
 
   .ui-conversations-separator[data-dashed="true"] {
     height: 0;
-    border-block-start: var(--separator-rule-size) dashed
+    border-block-start: var(--separator-rule-size, var(--stroke-hairline)) dashed
       hsl(var(--separator-rule-color, var(--border)));
     background: transparent;
   }
@@ -1224,7 +1284,7 @@
   }
 
   .ui-anchor [data-slot="anchor-link"][data-active] {
-    color: hsl(var(--anchor-ink-color, var(--primary)));
+    color: hsl(var(--anchor-ink-color, var(--text-link, var(--primary))));
     font-weight: var(--font-weight-medium);
   }
 
@@ -1326,7 +1386,10 @@
     min-block-size: var(--mega-menu-trigger-height);
     padding-inline: var(--mega-menu-trigger-padding-x);
     border: 0;
-    border-radius: var(--mega-menu-trigger-radius);
+    border-radius: var(
+      --mega-menu-trigger-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     background: var(--mega-menu-trigger-background);
     color: var(--mega-menu-trigger-foreground);
     font-size: var(--mega-menu-trigger-font-size);
@@ -1338,7 +1401,10 @@
   }
 
   .ui-mega-menu-trigger:hover {
-    background: var(--mega-menu-trigger-hover-background, hsl(var(--accent)));
+    background: var(
+      --mega-menu-trigger-hover-background,
+      hsl(var(--accent) / var(--mega-menu-trigger-hover-background-alpha, 100%))
+    );
     color: var(--mega-menu-trigger-hover-foreground, hsl(var(--accent-foreground)));
   }
 
@@ -1348,7 +1414,7 @@
   }
 
   .ui-mega-menu-trigger[aria-current="page"] {
-    color: var(--mega-menu-trigger-current-foreground, hsl(var(--primary)));
+    color: var(--mega-menu-trigger-current-foreground, hsl(var(--text-brand, var(--primary))));
     font-weight: var(--font-weight-semibold);
     text-decoration: underline;
     text-underline-offset: var(--space-1);
@@ -1399,8 +1465,9 @@
     translate: var(--mega-menu-panel-translate-x, 0) var(--mega-menu-panel-translate-y, 0);
     max-block-size: var(--mega-menu-panel-max-height);
     overflow-y: auto;
-    border: var(--mega-menu-panel-border-width) solid var(--mega-menu-panel-border-color);
-    border-radius: var(--mega-menu-panel-radius);
+    border: var(--mega-menu-panel-border-width, var(--stroke-hairline)) solid
+      var(--mega-menu-panel-border-color);
+    border-radius: var(--mega-menu-panel-radius, calc(var(--radius) / var(--radius-ratio)));
     background: var(--mega-menu-panel-background);
     color: var(--mega-menu-panel-foreground);
     box-shadow: var(--mega-menu-panel-shadow);
@@ -1489,7 +1556,10 @@
     min-block-size: var(--mega-menu-link-min-height);
     padding-block: var(--mega-menu-link-padding-y);
     padding-inline: var(--mega-menu-link-padding-x);
-    border-radius: var(--mega-menu-link-radius);
+    border-radius: var(
+      --mega-menu-link-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     color: var(--mega-menu-link-foreground);
     font-size: var(--mega-menu-link-font-size);
     line-height: var(--line-height-body);
@@ -1497,12 +1567,15 @@
   }
 
   .ui-mega-menu-link:hover {
-    background: var(--mega-menu-link-hover-background, hsl(var(--accent)));
+    background: var(
+      --mega-menu-link-hover-background,
+      hsl(var(--accent) / var(--mega-menu-link-hover-background-alpha, 100%))
+    );
     color: var(--mega-menu-link-hover-foreground, hsl(var(--accent-foreground)));
   }
 
   .ui-mega-menu-link[aria-current="page"] {
-    color: var(--mega-menu-link-current-foreground, hsl(var(--primary)));
+    color: var(--mega-menu-link-current-foreground, hsl(var(--text-link, var(--primary))));
     font-weight: var(--font-weight-semibold);
   }
 
@@ -1537,7 +1610,7 @@
   .ui-mega-menu-panel-footer {
     margin-block-start: var(--mega-menu-panel-footer-gap);
     padding-block-start: var(--mega-menu-panel-footer-gap);
-    border-block-start: var(--mega-menu-panel-border-width) solid
+    border-block-start: var(--mega-menu-panel-border-width, var(--stroke-hairline)) solid
       var(--mega-menu-panel-footer-border-color);
   }