@godxjp/ui 28.13.0 → 30.0.0

package/dist/styles/table-layout.css

@@ -8,7 +8,7 @@
   }
 
   .ui-table-row {
-    border-block-end-width: var(--table-row-border-width);
+    border-block-end-width: var(--table-row-border-width, var(--stroke-hairline));
   }
 
   [data-slot="table-body"] .ui-table-row:last-child {
@@ -24,14 +24,17 @@
 
   .ui-table-row[data-tone="success"] {
     --table-row-tone-color: var(--mark-success, var(--text-success));
+    --table-row-tone-surface: var(--surface-success);
   }
 
   .ui-table-row[data-tone="warning"] {
     --table-row-tone-color: var(--mark-warning, var(--text-warning));
+    --table-row-tone-surface: var(--surface-warning);
   }
 
   .ui-table-row[data-tone="info"] {
     --table-row-tone-color: var(--mark-info, var(--text-info));
+    --table-row-tone-surface: var(--surface-info);
   }
 
   .ui-table-row[data-tone="attention"] {
@@ -40,12 +43,19 @@
 
   .ui-table-row[data-tone="destructive"] {
     --table-row-tone-color: var(--mark-destructive, var(--text-error));
+    --table-row-tone-surface: var(--surface-destructive);
   }
 
   .ui-table-row[data-tone] {
     background-image: linear-gradient(
-      hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha)),
-      hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha))
+      var(
+        --table-row-tone-surface,
+        hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha))
+      ),
+      var(
+        --table-row-tone-surface,
+        hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha))
+      )
     );
   }
 
@@ -87,9 +97,11 @@
   }
 
   .ui-table-row[data-tone] > [data-slot="table-cell"]:first-child {
-    border-inline-start: var(--table-row-tone-rail-width) solid hsl(var(--table-row-tone-color));
+    border-inline-start: var(--table-row-tone-rail-width, var(--stroke-2xl)) solid
+      hsl(var(--table-row-tone-color));
     padding-inline-start: calc(
-      var(--table-cell-space-x, var(--space-section-active)) - var(--table-row-tone-rail-width)
+      var(--table-cell-space-x, var(--space-section-active)) -
+        var(--table-row-tone-rail-width, var(--stroke-2xl))
     );
   }
 
@@ -98,7 +110,10 @@
     padding: var(--table-cell-padding-y) var(--table-cell-space-x, var(--space-section-active));
     text-align: start;
     vertical-align: middle;
-    background: var(--table-header-background, hsl(var(--muted)));
+    background: var(
+      --table-header-background,
+      hsl(var(--muted) / var(--table-header-background-alpha, 100%))
+    );
     font-size: var(--table-head-font-size);
 
     font-weight: var(--table-head-font-weight);
@@ -257,8 +272,16 @@
     overflow: clip;
 
     min-inline-size: min-content;
-    border: 1px solid hsl(var(--border));
-    border-radius: var(--radius-md);
+
+    border: var(--stroke-hairline) solid var(--table-border-color, hsl(var(--border)));
+    border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
+
+    background-color: var(
+      --table-surface-background,
+      hsl(var(--card) / var(--table-surface-background-alpha))
+    );
+    backdrop-filter: blur(var(--table-surface-backdrop-blur-size))
+      saturate(var(--surface-backdrop-saturate, 160%));
   }
 
   .ui-data-table-surface[data-preset="action-collection"] {
@@ -282,7 +305,7 @@
   }
 
   [data-slot="card-content"][data-flush] .ui-data-table-toolbar {
-    border-bottom: 1px solid hsl(var(--card-border, var(--border)));
+    border-bottom: var(--stroke-hairline) solid hsl(var(--card-border, var(--border)));
     padding: var(--card-space-header-y) var(--card-space-inset);
   }
 
@@ -388,7 +411,7 @@
     .ui-data-table-surface
     tbody
     :is(.ui-data-table-pin-end, .ui-data-table-pin-start) {
-    background-color: hsl(var(--card-background, var(--card)));
+    background-color: hsl(var(--card-background, var(--card)) / var(--card-alpha, 100%));
   }
 
   th.ui-data-table-pin-end,
@@ -423,16 +446,28 @@
   .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-end,
   .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-start {
     background-image: linear-gradient(
-      var(--table-row-hover-background, hsl(var(--accent) / 0.7)),
-      var(--table-row-hover-background, hsl(var(--accent) / 0.7))
+      var(
+        --table-row-hover-background,
+        hsl(var(--accent) / var(--table-row-hover-background-alpha, 0.7))
+      ),
+      var(
+        --table-row-hover-background,
+        hsl(var(--accent) / var(--table-row-hover-background-alpha, 0.7))
+      )
     );
   }
 
   .ui-data-table-surface tbody tr[data-state="selected"] > .ui-data-table-pin-end,
   .ui-data-table-surface tbody tr[data-state="selected"] > .ui-data-table-pin-start {
     background-image: linear-gradient(
-      var(--table-row-selected-background, hsl(var(--muted) / 0.3)),
-      var(--table-row-selected-background, hsl(var(--muted) / 0.3))
+      var(
+        --table-row-selected-background,
+        hsl(var(--muted) / var(--table-row-selected-background-alpha, 0.3))
+      ),
+      var(
+        --table-row-selected-background,
+        hsl(var(--muted) / var(--table-row-selected-background-alpha, 0.3))
+      )
     );
   }
 
@@ -474,11 +509,12 @@
   }
 
   .ui-data-table-summary > tr > [data-slot="table-cell"] {
-    border-block-start: var(--table-summary-border-width) solid hsl(var(--border));
+    border-block-start: var(--table-summary-border-width, var(--stroke-hairline)) solid
+      hsl(var(--border));
   }
 
   .ui-data-table-filter-trigger[data-filtered] {
-    color: hsl(var(--primary));
+    color: hsl(var(--text-brand, var(--primary)));
   }
 
   .ui-data-table-selection-menu {
@@ -492,11 +528,11 @@
   }
 
   .ui-table-bordered {
-    border: 1px solid var(--table-border-color, hsl(var(--border)));
+    border: var(--stroke-hairline) solid var(--table-border-color, hsl(var(--border)));
   }
 
   .ui-table-bordered :is([data-slot="table-head"], [data-slot="table-cell"]):not(:last-child) {
-    border-inline-end: 1px solid var(--table-border-color, hsl(var(--border)));
+    border-inline-end: var(--stroke-hairline) solid var(--table-border-color, hsl(var(--border)));
   }
 
   [data-slot="card-content"][data-flush]
@@ -605,7 +641,10 @@
   .ui-data-table-root .ui-data-table-skeleton-check {
     inline-size: var(--table-skeleton-check-size);
     block-size: var(--table-skeleton-check-size);
-    border-radius: var(--table-skeleton-radius);
+    border-radius: var(
+      --table-skeleton-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
   }
 
   .ui-data-table-root .ui-data-table-skeleton-line {
@@ -613,7 +652,10 @@
   }
 
   .ui-data-table-sort-button {
-    border-radius: var(--table-skeleton-radius);
+    border-radius: var(
+      --table-skeleton-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
   }
 }
 
@@ -793,7 +835,7 @@
 
       height: auto;
       border: var(--stroke-hairline) solid hsl(var(--border));
-      border-radius: var(--radius-md);
+      border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x);
       margin-block-end: var(--table-stacked-collection-card-gap);
@@ -837,7 +879,7 @@
 
       height: auto;
       border: var(--stroke-hairline) solid hsl(var(--border));
-      border-radius: var(--radius-md);
+      border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x);
       margin-block-end: var(--table-stacked-collection-card-gap);
@@ -881,7 +923,7 @@
 
       height: auto;
       border: var(--stroke-hairline) solid hsl(var(--border));
-      border-radius: var(--radius-md);
+      border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x);
       margin-block-end: var(--table-stacked-collection-card-gap);
@@ -925,7 +967,7 @@
 
       height: auto;
       border: var(--stroke-hairline) solid hsl(var(--border));
-      border-radius: var(--radius-md);
+      border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x);
       margin-block-end: var(--table-stacked-collection-card-gap);

package/dist/styles/text-layout.css

@@ -111,7 +111,7 @@
   [data-slot="text"][data-tone="primary"],
   [data-slot="heading"][data-tone="primary"],
   [data-slot="icon"][data-tone="primary"] {
-    color: hsl(var(--primary));
+    color: hsl(var(--text-brand, var(--primary)));
   }
 
   [data-slot="text"][data-tone="success"],
@@ -330,7 +330,10 @@
   [data-slot="heading"] kbd {
     background: hsl(var(--muted));
     border: var(--stroke-hairline) solid hsl(var(--border));
-    border-radius: var(--prose-code-radius);
+    border-radius: var(
+      --prose-code-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     padding-inline: var(--prose-code-space-inline);
     font-family: var(--font-family-mono, ui-monospace, "SFMono-Regular", monospace);
     font-size: var(--prose-code-font-size);
@@ -358,7 +361,7 @@
     border: 0;
     background: none;
     padding: 0;
-    color: var(--text-action-color, hsl(var(--primary)));
+    color: var(--text-action-color, hsl(var(--text-brand, var(--primary))));
     font: inherit;
     cursor: pointer;
     vertical-align: baseline;
@@ -367,11 +370,17 @@
   .ui-typography-actions > .ui-typography-action:first-child {
     margin-inline-start: 0;
   }
+
   .ui-typography-action:hover,
   .ui-typography-action:focus-visible {
     color: var(
       --text-action-color-hover,
-      hsl(var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels)))
+      hsl(
+        var(
+          --text-primary,
+          var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels))
+        )
+      )
     );
   }
 

package/dist/styles/toggle.css

@@ -22,11 +22,17 @@
   }
 
   .ui-toggle[data-state="on"] {
-    border-color: var(--toggle-pressed-border-color, hsl(var(--primary)));
+    border-color: var(
+      --toggle-pressed-border-color,
+      hsl(var(--primary) / var(--toggle-pressed-border-color-alpha, 100%))
+    );
   }
 
   .ui-toggle[data-state="on"] .ui-toggle-count {
-    background: var(--toggle-pressed-count-background, hsl(var(--primary-foreground)));
+    background: var(
+      --toggle-pressed-count-background,
+      hsl(var(--primary-foreground) / var(--toggle-pressed-count-background-alpha, 100%))
+    );
     color: var(--toggle-pressed-count-color, hsl(var(--primary)));
   }
 
@@ -36,7 +42,7 @@
     }
 
     .ui-toggle[data-state="on"] .ui-toggle-count {
-      outline: var(--toggle-count-forced-outline-width) solid currentColor;
+      outline: var(--toggle-count-forced-outline-width, var(--stroke-hairline)) solid currentColor;
     }
   }
 }

package/dist/tokens/components/actions.css

@@ -5,7 +5,7 @@
 
   --actions-padding-block: var(--space-1);
   --actions-padding-inline: var(--space-1);
-  --actions-radius: var(--radius);
+  --actions-radius: initial;
 
   --actions-filled-background: initial;
   --actions-outlined-border: initial;

package/dist/tokens/components/attachments.css

@@ -5,13 +5,13 @@
 
   --attachments-card-size: 16.75rem;
   --attachments-card-block-size: 4.25rem;
-  --attachments-card-radius: var(--radius-lg);
+
+  --attachments-card-radius: initial;
   --attachments-card-gap: var(--space-3);
 
   --attachments-placeholder-space-inset: var(--space-4);
-  --attachments-placeholder-radius: var(
-    --radius-lg
-  );
+
+  --attachments-placeholder-radius: initial;
 
   --attachments-placeholder-icon-size: var(--icon-size-3xl);
   --attachments-placeholder-title-font-size: var(--font-size-base);

package/dist/tokens/components/badge.css

@@ -5,7 +5,7 @@
   --badge-space-x: var(--space-2);
   --badge-space-y: var(--space-1);
 
-  --badge-radius: var(--radius-md);
+  --badge-radius: initial;
   --badge-font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
 
   --badge-line-height: calc(1 / 0.75);
@@ -21,8 +21,8 @@
   --badge-tint-fill: 18%;
   --badge-tint-edge: 45%;
 
-  --badge-tint-surface: hsl(var(--card));
-  --badge-tint-foreground: hsl(var(--card-foreground));
+  --badge-tint-surface: initial;
+  --badge-tint-foreground: initial;
 
-  --badge-color: var(--badge-tint-surface);
+  --badge-color: initial;
 }

package/dist/tokens/components/banner.css

@@ -4,7 +4,7 @@
 
   --banner-radius: 0;
 
-  --banner-border-width: 1px;
+  --banner-border-width: initial;
 
   --banner-space-inset-block: var(--space-3);
   --banner-space-inset-inline: var(--space-page-active-x, var(--space-6));

package/dist/tokens/components/callout.css

@@ -4,7 +4,7 @@
 
   --callout-rail-width: var(--space-1);
 
-  --callout-radius: var(--alert-radius);
+  --callout-radius: initial;
 
   --callout-space-inset-block: var(--space-3);
   --callout-space-inset-inline: var(--space-4);

package/dist/tokens/components/card.css

@@ -30,9 +30,9 @@
   --card-header-background-alpha: 0.55;
 
   --card-header-border-bottom: initial;
-  --card-radius: var(--radius-xl);
+  --card-radius: initial;
 
-  --card-shadow: var(--shadow-sm);
+  --card-shadow: initial;
 
   --card-glow: 0 0 0 0 transparent;
 
@@ -40,13 +40,18 @@
 
   --card-tint: transparent;
 
-  --card-accent-rail-width: var(--stroke-2xl);
+  --card-tint-end: initial;
+  --card-tint-angle: initial;
 
-  --card-accent-perimeter-width: var(--stroke-hairline);
-  --card-accent-perimeter-ring-width: var(--stroke-hairline);
+  --card-backdrop-blur-size: initial;
+
+  --card-accent-rail-width: initial;
+
+  --card-accent-perimeter-width: initial;
+  --card-accent-perimeter-ring-width: initial;
 
   --card-featured-border-color: initial;
-  --card-featured-ring-width: var(--stroke-hairline);
+  --card-featured-ring-width: initial;
   --stat-card-label-font-size: var(
     --font-size-xs,
     calc(var(--font-size-base) / var(--font-size-ratio))
@@ -69,7 +74,7 @@
   --stat-card-gap: var(--space-stack-xs);
   --stat-card-icon-size: var(--icon-size-2xl);
   --stat-card-icon-glyph-size: var(--icon-size-lg);
-  --stat-card-icon-radius: var(--radius-md);
+  --stat-card-icon-radius: initial;
 
   --stat-card-icon-background: initial;
   --stat-card-icon-foreground: initial;
@@ -82,7 +87,7 @@
 
   --card-service-launcher-icon-size: calc(var(--icon-size-2xl) * var(--scaling));
   --card-service-launcher-icon-glyph-size: calc(var(--icon-size-lg) * var(--scaling));
-  --card-service-launcher-icon-radius: var(--radius-md);
+  --card-service-launcher-icon-radius: initial;
 
   --card-service-launcher-icon-background: initial;
   --card-service-launcher-icon-foreground: initial;

package/dist/tokens/components/chart.css

@@ -10,11 +10,11 @@
   --chart-trend-plot-height: var(--chart-trend-plot-height-xs);
 
   --chart-trend-bar-gap: var(--space-2);
-  --chart-trend-bar-radius: var(--radius-sm);
+  --chart-trend-bar-radius: initial;
 
   --chart-trend-bar-max-width: 1.5rem;
 
-  --chart-trend-bar-min-height: var(--stroke-md);
+  --chart-trend-bar-min-height: initial;
 
   --chart-trend-bar-background: initial;
 
@@ -37,3 +37,12 @@
 
   --chart-category-axis-max-fraction: 0.4;
 }
+
+:root {
+
+  --chart-series-stroke-width: 2;
+
+  --chart-area-fill-alpha: 0.2;
+
+  --chart-grid-line-dash: 3 3;
+}

package/dist/tokens/components/chat-bubble.css

@@ -6,7 +6,7 @@
   --chat-bubble-foreground: initial;
 
   --chat-bubble-border-color: initial;
-  --chat-bubble-radius: var(--radius-lg);
+  --chat-bubble-radius: initial;
 
   --chat-bubble-gap: var(--space-3);
 
@@ -22,7 +22,7 @@
   --chat-bubble-list-jump-inset: var(--space-3);
 
   --chat-bubble-typing-caret-color: initial;
-  --chat-bubble-typing-caret-width: var(--stroke-md);
+  --chat-bubble-typing-caret-width: initial;
 
   --chat-bubble-typing-caret-height: 1em;
 

package/dist/tokens/components/control.css

@@ -20,10 +20,21 @@
   --control-gap-sm: var(--space-inline-xs);
   --control-radius: var(--radius);
 
-  --button-radius: var(--radius-md);
+  --button-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
+
+  --button-default-background: initial;
+  --button-destructive-background: initial;
+  --button-outline-background: initial;
+  --button-outline-background-alpha: initial;
+  --button-outline-border-color: initial;
+  --button-secondary-background: initial;
+  --button-secondary-background-alpha: initial;
+
+  --button-link-foreground: initial;
+  --button-backdrop-blur-size: initial;
 
   --control-font-size: var(--font-size-base);
-  --control-border-width: var(--stroke-hairline);
+  --control-border-width: initial;
   --control-shadow: var(--shadow-xs);
   --control-icon-size: calc(var(--icon-size-md) * var(--scaling));
   --control-icon-size-sm: calc(var(--icon-size-sm) * var(--scaling));
@@ -36,9 +47,10 @@
 
   --control-variant-filled-background: var(--muted);
   --control-variant-filled-hover-background: initial;
+  --control-variant-filled-hover-background-alpha: initial;
 
   --control-count-font-size: var(--font-size-sm, var(--font-size-base));
-  --control-count-color: var(--muted-foreground);
+  --control-count-color: initial;
 
   --control-count-exceeded-color: initial;
   --control-count-space-inline: var(--space-1);
@@ -46,7 +58,7 @@
   --textarea-count-inset-inline-end: var(--space-2);
 
   --input-addon-background: var(--muted);
-  --input-addon-color: var(--muted-foreground);
+  --input-addon-color: initial;
   --input-addon-padding-inline: var(--control-padding-x);
 
   --switch-content-font-size: var(
@@ -60,7 +72,7 @@
     --font-size-xs,
     calc(var(--font-size-base) / var(--font-size-ratio))
   );
-  --slider-mark-color: var(--muted-foreground);
+  --slider-mark-color: initial;
   --slider-mark-space-block-start: var(--space-2);
   --slider-dot-size: var(--slider-track-height);
   --slider-dot-background: var(--background);
@@ -72,23 +84,24 @@
     --font-size-xs,
     calc(var(--font-size-base) / var(--font-size-ratio))
   );
-  --slider-tooltip-radius: var(--radius-sm);
+  --slider-tooltip-radius: initial;
   --slider-tooltip-padding-inline: var(--space-2);
   --slider-tooltip-offset-block: var(--space-2);
 
   --choice-button-background: var(--background);
-  --choice-button-color: var(--foreground);
+  --choice-button-color: initial;
   --choice-button-border-color: var(--input);
 
   --choice-button-selected-color: initial;
   --choice-button-selected-border-color: initial;
+  --choice-button-selected-border-color-alpha: initial;
   --choice-button-solid-background: initial;
   --choice-button-solid-color: initial;
 
-  --toggle-focus-ring-width: var(--stroke-lg);
+  --toggle-focus-ring-width: initial;
   --toggle-focus-ring-alpha: 1;
 
-  --control-focus-ring-width: var(--stroke-hairline);
+  --control-focus-ring-width: initial;
 
   --rating-focus-ring-offset: 2px;
 
@@ -96,7 +109,7 @@
   --rating-star-empty-color: initial;
   --rating-star-empty-alpha: 0.45;
 
-  --checkbox-border-width: var(--stroke-hairline);
+  --checkbox-border-width: initial;
   --checkbox-size: calc(1rem * var(--scaling));
   --checkbox-size-compact: 0.875rem;
   --checkbox-size-comfortable: 1.125rem;
@@ -138,6 +151,7 @@
   --slider-range-background: initial;
 
   --switch-unchecked-background: initial;
+  --switch-unchecked-background-alpha: initial;
 
   --switch-content-unchecked-foreground: initial;
 
@@ -153,7 +167,7 @@
 
   --command-list-split-padding: 0;
   --command-list-split-inset: 0px;
-  --command-item-divider-width: var(--stroke-hairline);
+  --command-item-divider-width: initial;
   --command-item-divider-color: initial;
   --command-palette-width: 35rem;
   --command-palette-inset-top: calc(var(--space-6) * 4);
@@ -199,7 +213,7 @@
 
   --control-affix-inset-inline-end: var(--space-2);
   --control-affix-action-size: 1.5rem;
-  --control-affix-action-radius: var(--radius-sm);
+  --control-affix-action-radius: initial;
   --control-affix-icon-size: var(--icon-size-md);
 
   --control-affix-rest-alpha: 0.5;
@@ -225,7 +239,8 @@
   --textarea-autogrow-max-height-rows: 8;
 
   --textarea-autogrow-box-inset: calc(
-    (var(--control-multiline-padding-block) + var(--control-border-width)) * 2
+    (var(--control-multiline-padding-block) + var(--control-border-width, var(--stroke-hairline))) *
+      2
   );
 
   --control-composite-field-space-gap: var(--space-2);
@@ -266,7 +281,7 @@
 
   --cascader-result-space-inline: var(--space-2);
   --cascader-result-space-block: 0.375rem;
-  --cascader-result-radius: var(--radius-sm);
+  --cascader-result-radius: initial;
   --cascader-result-icon-space-inline-end: var(--space-2);
   --cascader-empty-space-block: var(--space-6);
 
@@ -274,6 +289,9 @@
 
   --select-content-inline-size: auto;
 
+  --select-content-background: initial;
+  --select-content-backdrop-blur-size: initial;
+
   --select-empty-space-block: var(--search-select-placeholder-space-block);
   --select-scroll-button-space-block: var(--space-1);
 
@@ -291,7 +309,7 @@
   );
   --time-picker-column-space-inset: var(--space-1);
   --time-picker-option-space-block: 0.375rem;
-  --time-picker-option-radius: var(--radius-md);
+  --time-picker-option-radius: initial;
   --time-picker-option-font-size: var(--font-size-sm, var(--font-size-base));
   --time-picker-footer-space-inset: var(--space-2);
   --time-picker-footer-space-gap: var(--space-2);
@@ -301,7 +319,7 @@
   --tree-select-list-max-height: min(300px, 50vh);
   --tree-select-row-space-block: 0.375rem;
   --tree-select-row-space-inline-end: var(--space-2);
-  --tree-select-row-radius: var(--radius-sm);
+  --tree-select-row-radius: initial;
   --tree-select-row-font-size: var(--font-size-sm, var(--font-size-base));
 
   --tree-select-depth-space-base: var(--space-2);
@@ -328,20 +346,20 @@
     --font-size-xs,
     calc(var(--font-size-base) / var(--font-size-ratio))
   );
-  --calendar-weekday-radius: var(--radius-md);
+  --calendar-weekday-radius: initial;
   --calendar-day-font-size: var(--font-size-sm, var(--font-size-base));
-  --calendar-day-radius: var(--radius-md);
+  --calendar-day-radius: initial;
   --calendar-chevron-size: var(--icon-size-md);
   --calendar-footer-space-gap: var(--space-2);
   --calendar-footer-space-block-start: var(--space-2);
-  --calendar-footer-border-width: var(--stroke-hairline);
+  --calendar-footer-border-width: initial;
 
   --calendar-bordered-weekday-padding-block: var(--space-1);
 
   --calendar-grid-border-color: initial;
 
   --transfer-pane-min-height: 14rem;
-  --transfer-pane-radius: var(--radius-md);
+  --transfer-pane-radius: initial;
   --transfer-panes-space-gap: var(--space-3);
   --transfer-header-space-inline: var(--space-3);
   --transfer-header-space-block: var(--space-2);
@@ -352,7 +370,7 @@
   --transfer-row-space-inline: var(--space-2);
   --transfer-row-space-block: var(--space-2);
   --transfer-row-space-gap: var(--space-2);
-  --transfer-row-radius: var(--radius-sm);
+  --transfer-row-radius: initial;
   --transfer-row-font-size: var(--font-size-sm, var(--font-size-base));
 
   --transfer-row-check-space-block-start: 0.125rem;
@@ -389,7 +407,7 @@
   --button-space-block: var(--space-2);
 
   --otp-caret-block-size: 1rem;
-  --otp-caret-inline-size: var(--stroke-hairline);
+  --otp-caret-inline-size: initial;
   --otp-separator-icon-size: var(--icon-size-md);
 
   --button-count-min-width: var(--space-4);
@@ -418,6 +436,7 @@
 
   --control-surface-border-color: initial;
   --control-surface-background: initial;
+  --control-surface-background-alpha: initial;
 
   --control-filled-border-color: transparent;
   --control-filled-background: initial;