@godxjp/ui 28.12.0 → 29.0.0

package/dist/styles/dialog-layout.css

@@ -20,6 +20,9 @@
       --dialog-overlay-background,
       color-mix(in srgb, var(--overlay-background) var(--dialog-overlay-alpha), transparent)
     );
+
+    backdrop-filter: blur(var(--dialog-overlay-backdrop-blur-size))
+      saturate(var(--surface-backdrop-saturate, 160%));
   }
 
   [data-slot="sheet-overlay"] {
@@ -27,6 +30,9 @@
       --sheet-overlay-background,
       color-mix(in srgb, var(--overlay-background) var(--sheet-overlay-alpha), transparent)
     );
+
+    backdrop-filter: blur(var(--sheet-overlay-backdrop-blur-size))
+      saturate(var(--surface-backdrop-saturate, 160%));
   }
 
   .ui-dialog-overlay {
@@ -46,7 +52,10 @@
     transform: translate(-50%, -50%);
     gap: var(--dialog-space-gap);
     border: 1px solid hsl(var(--border));
-    background-color: hsl(var(--background));
+
+    background-color: var(--dialog-surface-background, hsl(var(--background)));
+
+    color: hsl(var(--foreground));
     padding: var(--dialog-space-inset);
 
     overflow: hidden;
@@ -55,7 +64,7 @@
 
   @media (min-width: 640px) {
     [data-slot="dialog-content"] {
-      border-radius: var(--radius-lg);
+      border-radius: var(--radius-lg, var(--radius));
     }
   }
 
@@ -138,15 +147,18 @@
     border-top: 1px solid hsl(var(--border));
   }
 
-  [data-slot="dialog-close"] {
+  .ui-dialog-close {
     position: absolute;
+    inset-block-start: var(--dialog-close-space-offset);
     inset-inline-end: var(--dialog-close-space-offset);
-    top: var(--dialog-close-space-offset);
-    border-radius: var(--radius-sm);
+    border-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     opacity: var(--dialog-close-rest-alpha);
   }
 
-  :is([data-slot="dialog-close"], [data-slot="sheet-close"])::after {
+  :is(.ui-dialog-close, .ui-sheet-close)::after {
     content: "";
     position: absolute;
     inset-block-start: 50%;
@@ -158,7 +170,7 @@
     block-size: 100%;
   }
 
-  [data-slot="dialog-close"]:hover {
+  .ui-dialog-close:hover {
     opacity: 1;
   }
 
@@ -210,7 +222,7 @@
 
   .ui-two-factor-setup-notice {
     border: 1px dashed hsl(var(--border));
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
     padding: var(--space-2) var(--space-3);
   }
 
@@ -220,7 +232,7 @@
     gap: var(--space-2);
     padding: var(--space-3);
     border: 1px solid hsl(var(--border));
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
     background: hsl(var(--muted) / 0.4);
   }
 
@@ -281,12 +293,16 @@
     max-width: var(--tooltip-max-width);
     padding-inline: var(--tooltip-space-inline);
     padding-block: var(--tooltip-space-block);
-    border-radius: var(--tooltip-radius);
-    border: 1px solid var(--tooltip-border-color, hsl(var(--border)));
-    background-color: var(--tooltip-background, hsl(var(--popover)));
+    border-radius: var(--tooltip-radius, var(--radius));
+    border: 1px solid
+      var(--tooltip-border-color, hsl(var(--border) / var(--tooltip-border-color-alpha, 100%)));
+    background-color: var(--tooltip-background, hsl(var(--popover) / var(--popover-alpha, 100%)));
     color: var(--tooltip-foreground, hsl(var(--popover-foreground)));
     font-size: var(--tooltip-font-size);
-    box-shadow: var(--tooltip-shadow);
+    backdrop-filter: blur(var(--tooltip-backdrop-blur-size))
+      saturate(var(--surface-backdrop-saturate, 160%));
+
+    box-shadow: var(--tooltip-shadow, var(--shadow-md));
     outline: none;
   }
 
@@ -295,11 +311,20 @@
 
     width: var(--popover-surface-inline-size, var(--popover-width));
     padding: var(--popover-space-inset);
-    border-radius: var(--popover-radius);
-    border: 1px solid var(--popover-surface-border-color, hsl(var(--border)));
-    background-color: var(--popover-surface-background, hsl(var(--popover)));
+    border-radius: var(--popover-radius, var(--radius));
+    border: 1px solid
+      var(
+        --popover-surface-border-color,
+        hsl(var(--border) / var(--popover-surface-border-color-alpha, 100%))
+      );
+    background-color: var(
+      --popover-surface-background,
+      hsl(var(--popover) / var(--popover-alpha, 100%))
+    );
     color: var(--popover-surface-foreground, hsl(var(--popover-foreground)));
-    box-shadow: var(--popover-shadow);
+    backdrop-filter: blur(var(--popover-backdrop-blur-size))
+      saturate(var(--surface-backdrop-saturate, 160%));
+    box-shadow: var(--popover-shadow, var(--shadow-md));
     outline: none;
   }
 
@@ -369,7 +394,10 @@
     position: absolute;
     inset-block-start: var(--sheet-close-offset);
     inset-inline-end: var(--sheet-close-offset);
-    border-radius: var(--radius-sm);
+    border-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     opacity: var(--sheet-close-rest-alpha);
     transition: opacity 150ms ease;
   }
@@ -393,7 +421,9 @@
   }
 
   .ui-sheet-panel {
-    box-shadow: var(--sheet-shadow);
+
+    background-color: var(--sheet-surface-background, hsl(var(--background)));
+    box-shadow: var(--sheet-shadow, var(--shadow-lg));
   }
 
   .ui-sheet-panel[data-side="top"] {

package/dist/styles/float-button-layout.css

@@ -85,7 +85,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--float-button-group-gap);
-    border-radius: var(--float-button-group-radius);
+    border-radius: var(--float-button-group-radius, var(--radius));
   }
 
   .ui-float-button-group:not([data-individual]) .ui-float-button-list {
@@ -99,13 +99,13 @@
   }
 
   .ui-float-button-group:not([data-individual]) .ui-float-button-list > :first-child {
-    border-start-start-radius: var(--float-button-group-radius);
-    border-start-end-radius: var(--float-button-group-radius);
+    border-start-start-radius: var(--float-button-group-radius, var(--radius));
+    border-start-end-radius: var(--float-button-group-radius, var(--radius));
   }
 
   .ui-float-button-group:not([data-individual]) .ui-float-button-list > :last-child {
-    border-end-start-radius: var(--float-button-group-radius);
-    border-end-end-radius: var(--float-button-group-radius);
+    border-end-start-radius: var(--float-button-group-radius, var(--radius));
+    border-end-end-radius: var(--float-button-group-radius, var(--radius));
   }
 
   .ui-float-button-group[data-menu-mode] .ui-float-button-list {

package/dist/styles/focus-ring.css

@@ -55,11 +55,13 @@
   .ui-control-composite-field[data-state="open"],
   .ui-otp-slot[data-active="true"],
   .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
-    outline: var(--focus-ring-width) solid
-      hsl(
-        var(--focus-outline-color, var(--focus-ring-color, var(--ring))) /
-          var(--focus-ring-opacity, 1)
-      );
+
+    outline-width: var(--focus-ring-width-component, var(--focus-ring-width));
+    outline-style: solid;
+    outline-color: hsl(
+      var(--focus-outline-color, var(--focus-ring-color, var(--ring))) /
+        var(--focus-ring-opacity, 1)
+    );
     outline-offset: var(--focus-ring-offset);
 
     transition:
@@ -164,6 +166,7 @@
 
   .ui-toggle {
     --focus-ring-weight: var(--toggle-focus-ring-width);
+    --focus-ring-width-component: calc(var(--focus-ring-weight) * var(--focus-outline));
     --focus-ring-opacity: var(--toggle-focus-ring-alpha);
   }
 
@@ -198,6 +201,7 @@
     .ui-app-setting-picker-inline
   ) {
     --focus-ring-weight: var(--control-focus-ring-width);
+    --focus-ring-width-component: calc(var(--focus-ring-weight) * var(--focus-outline));
   }
 
   .ui-command-input:focus-visible {

package/dist/styles/layout.css

@@ -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"] {
@@ -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,7 +1133,10 @@
     align-items: center;
     justify-content: center;
     padding-inline: var(--pagination-page-padding-x);
-    border-radius: var(--radius-sm);
+    border-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     border: 1px solid hsl(var(--border));
     color: hsl(var(--foreground));
     text-decoration: none;
@@ -1385,7 +1403,7 @@
   .ui-legal-document-toc-link {
     display: block;
     padding: var(--legal-document-toc-item-padding);
-    border-radius: var(--legal-document-toc-item-radius);
+    border-radius: var(--legal-document-toc-item-radius, var(--radius));
     border-inline-start: var(--legal-document-toc-marker-width) solid transparent;
     font-size: var(--legal-document-toc-font-size);
     line-height: 1.6;
@@ -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 {
@@ -1926,7 +1947,7 @@
     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-radius: var(--draggable-panel-radius, var(--radius));
     background-color: hsl(var(--background));
     box-shadow: var(--draggable-panel-shadow);
     overflow: hidden;
@@ -1982,7 +2003,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 +2047,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;

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));

package/dist/styles/navigation-layout.css

@@ -164,6 +164,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;
@@ -280,8 +294,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,7 +371,10 @@
   }
 
   [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)));
   }
 
@@ -372,7 +391,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 +419,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));
   }
 
@@ -419,8 +441,10 @@
     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-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 +515,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 +555,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 +567,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 +636,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 +656,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 +685,18 @@
 
     z-index: var(--overlay-z-index);
     min-width: var(--menu-content-min-width);
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
     border: 1px solid hsl(var(--border));
-    background: hsl(var(--popover));
+
+    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 +745,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 +761,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 +798,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);
   }
 
@@ -816,7 +862,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"] {
@@ -978,7 +1024,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 +1133,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 +1145,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);
   }
@@ -1224,7 +1273,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 +1375,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 +1390,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 +1403,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);
@@ -1400,7 +1455,7 @@
     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-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 +1544,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 +1555,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);
   }