@godxjp/ui 28.13.0 → 30.0.0

package/dist/styles/alert-layout.css

@@ -7,8 +7,11 @@
     align-items: flex-start;
     gap: var(--alert-space-gap);
     width: 100%;
-    border-radius: var(--alert-radius);
-    border-width: 1px;
+    border-radius: var(
+      --alert-radius,
+      var(--card-radius, calc(var(--radius) * var(--radius-ratio)))
+    );
+    border-width: var(--stroke-hairline);
     padding: var(--alert-space-inset);
     font-size: var(--font-size-base);
   }
@@ -23,25 +26,25 @@
 
   [data-slot="alert"][data-tone="destructive"] {
     border-color: hsl(var(--destructive) / var(--alert-border-alpha));
-    background-color: hsl(var(--destructive) / var(--alert-bg-alpha));
+    background-color: var(--surface-destructive, hsl(var(--destructive) / var(--alert-bg-alpha)));
     color: hsl(var(--foreground));
   }
 
   [data-slot="alert"][data-tone="warning"] {
     border-color: hsl(var(--warning) / var(--alert-border-alpha));
-    background-color: hsl(var(--warning) / var(--alert-bg-alpha));
+    background-color: var(--surface-warning, hsl(var(--warning) / var(--alert-bg-alpha)));
     color: hsl(var(--foreground));
   }
 
   [data-slot="alert"][data-tone="success"] {
     border-color: hsl(var(--success) / var(--alert-border-alpha));
-    background-color: hsl(var(--success) / var(--alert-bg-alpha));
+    background-color: var(--surface-success, hsl(var(--success) / var(--alert-bg-alpha)));
     color: hsl(var(--foreground));
   }
 
   [data-slot="alert"][data-tone="info"] {
     border-color: hsl(var(--info) / var(--alert-border-alpha));
-    background-color: hsl(var(--info) / var(--alert-bg-alpha));
+    background-color: var(--surface-info, hsl(var(--info) / var(--alert-bg-alpha)));
     color: hsl(var(--foreground));
   }
 
@@ -49,7 +52,7 @@
     border-radius: var(--banner-radius);
     border-block-start-width: 0;
     border-inline-width: 0;
-    border-block-end-width: var(--banner-border-width);
+    border-block-end-width: var(--banner-border-width, var(--stroke-hairline));
     padding-block: var(--banner-space-inset-block);
     padding-inline: var(--banner-space-inset-inline);
   }
@@ -63,7 +66,10 @@
   }
 
   [data-slot="alert"][data-variant="callout"] {
-    border-radius: var(--callout-radius);
+    border-radius: var(
+      --callout-radius,
+      var(--alert-radius, var(--card-radius, calc(var(--radius) * var(--radius-ratio))))
+    );
     border-block-width: 0;
     border-inline-end-width: 0;
     border-inline-start-width: var(--callout-rail-width);
@@ -195,7 +201,10 @@
     position: absolute;
     top: var(--alert-dismiss-space-offset);
     inset-inline-end: var(--alert-dismiss-space-offset);
-    border-radius: var(--radius-sm);
+    border-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     opacity: var(--alert-dismiss-rest-alpha);
     transition: opacity var(--duration-fast) ease;
   }
@@ -219,12 +228,17 @@
     block-size: var(--toast-icon-size);
   }
 
+  [data-sonner-toast] {
+    backdrop-filter: blur(var(--toast-backdrop-blur-size))
+      saturate(var(--surface-backdrop-saturate, 160%));
+  }
+
   [data-sonner-toast][data-expanded="false"][data-front="false"][data-styled="true"] > * {
     visibility: hidden;
   }
 
   .ui-skeleton-block {
-    border-radius: var(--skeleton-radius);
+    border-radius: var(--skeleton-radius, var(--radius));
     background: var(--skeleton-background, hsl(var(--muted)));
     animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
@@ -255,21 +269,24 @@
     block-size: var(--skeleton-caption-height);
     inline-size: var(--skeleton-label-width);
     max-inline-size: 100%;
-    border-radius: var(--skeleton-radius);
+    border-radius: var(--skeleton-radius, var(--radius));
     background: var(--skeleton-background, hsl(var(--muted)));
   }
 
   .ui-skeleton-form-control {
     block-size: var(--control-height);
     inline-size: 100%;
-    border-radius: var(--skeleton-element-radius);
+    border-radius: var(
+      --skeleton-element-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
     background: var(--skeleton-background, hsl(var(--muted)));
   }
 
   .ui-skeleton-table {
     overflow: hidden;
-    border: 1px solid hsl(var(--border));
-    border-radius: var(--skeleton-radius);
+    border: var(--stroke-hairline) solid hsl(var(--border));
+    border-radius: var(--skeleton-radius, var(--radius));
   }
 
   [data-slot="card-content"][data-flush] .ui-skeleton-table {
@@ -290,7 +307,7 @@
   }
 
   .ui-skeleton-table-row + .ui-skeleton-table-row {
-    border-top: 1px solid hsl(var(--border));
+    border-top: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   .ui-skeleton-detail {
@@ -300,8 +317,8 @@
   .ui-skeleton-detail-box,
   .ui-skeleton-stat,
   .ui-skeleton-card {
-    border: 1px solid hsl(var(--border));
-    border-radius: var(--skeleton-radius);
+    border: var(--stroke-hairline) solid hsl(var(--border));
+    border-radius: var(--skeleton-radius, var(--radius));
     padding: var(--skeleton-card-inset);
 
     .ui-skeleton-line {
@@ -372,7 +389,10 @@
     display: inline-block;
     vertical-align: top;
     block-size: var(--skeleton-element-block-size);
-    border-radius: var(--skeleton-element-radius);
+    border-radius: var(
+      --skeleton-element-radius,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
   }
 
   [data-skeleton-element][data-size="xs"] {
@@ -389,7 +409,7 @@
 
   [data-skeleton-element="avatar"] {
     inline-size: var(--skeleton-element-block-size);
-    border-radius: var(--avatar-square-radius);
+    border-radius: var(--avatar-square-radius, var(--radius));
   }
 
   [data-skeleton-element="avatar"][data-shape="circle"] {

package/dist/styles/badge-layout.css

@@ -3,14 +3,16 @@
 @layer components {
   [data-slot="badge"] {
     display: inline-flex;
+
+    inline-size: fit-content;
     align-items: center;
 
     vertical-align: middle;
     gap: var(--badge-space-gap);
     padding: var(--badge-space-y) var(--badge-space-x);
 
-    border-radius: var(--badge-radius);
-    border-width: 1px;
+    border-radius: var(--badge-radius, calc(var(--radius) / var(--radius-ratio)));
+    border-width: var(--stroke-hairline);
     font-size: var(--badge-font-size);
 
     line-height: var(--badge-line-height);
@@ -34,15 +36,17 @@
 
     background-color: color-mix(
       in srgb,
-      var(--badge-tint-surface),
-      var(--badge-color) var(--badge-tint-fill)
+      var(--badge-tint-surface, hsl(var(--card) / var(--card-alpha, 100%))),
+      var(--badge-color, var(--badge-tint-surface, hsl(var(--card) / var(--card-alpha, 100%))))
+        var(--badge-tint-fill)
     );
     border-color: color-mix(
       in srgb,
-      var(--badge-tint-surface),
-      var(--badge-color) var(--badge-tint-edge)
+      var(--badge-tint-surface, hsl(var(--card) / var(--card-alpha, 100%))),
+      var(--badge-color, var(--badge-tint-surface, hsl(var(--card) / var(--card-alpha, 100%))))
+        var(--badge-tint-edge)
     );
-    color: var(--badge-tint-foreground);
+    color: var(--badge-tint-foreground, hsl(var(--card-foreground)));
   }
 
   [data-slot="badge-icon"] {

package/dist/styles/base.css

@@ -48,9 +48,9 @@
 @theme inline {
   --color-background: hsl(var(--background));
   --color-foreground: hsl(var(--foreground));
-  --color-card: hsl(var(--card));
+  --color-card: hsl(var(--card) / var(--card-alpha, 100%));
   --color-card-foreground: hsl(var(--card-foreground));
-  --color-popover: hsl(var(--popover));
+  --color-popover: hsl(var(--popover) / var(--popover-alpha, 100%));
   --color-popover-foreground: hsl(var(--popover-foreground));
   --color-primary: hsl(var(--primary));
   --color-primary-foreground: hsl(var(--primary-foreground));
@@ -63,7 +63,7 @@
   --color-destructive: hsl(var(--destructive));
   --color-destructive-foreground: hsl(var(--destructive-foreground));
   --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
+  --color-input: hsl(var(--input) / var(--input-alpha, 100%));
   --color-ring: hsl(var(--ring));
   --color-success: hsl(var(--success));
   --color-success-foreground: hsl(var(--success-foreground));
@@ -108,8 +108,8 @@
   --color-primary-active: hsl(
     var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels))
   );
-  --color-secondary-hover: hsl(var(--secondary-hover));
-  --color-secondary-active: hsl(var(--secondary-active));
+  --color-secondary-hover: hsl(var(--secondary-hover) / var(--secondary-hover-alpha, 100%));
+  --color-secondary-active: hsl(var(--secondary-active) / var(--secondary-active-alpha, 100%));
   --color-destructive-hover: hsl(var(--destructive-hover));
   --color-destructive-active: hsl(var(--destructive-active));
 
@@ -164,6 +164,15 @@
   --text-5xl: var(--font-size-5xl, var(--font-size-display));
 }
 
+:root {
+  --radius-xs: initial;
+  --radius-sm: initial;
+  --radius-md: initial;
+  --radius-lg: initial;
+  --radius-xl: initial;
+  --radius-2xl: initial;
+}
+
 @layer base {
   * {
     border-color: hsl(var(--border));

package/dist/styles/card-layout.css

@@ -7,16 +7,24 @@
     display: flex;
     flex-direction: column;
 
-    border-width: 1px;
+    border-width: var(--stroke-hairline);
     border-style: solid;
     border-color: hsl(var(--card-border, var(--border)));
-    border-radius: var(--card-radius);
+    border-radius: var(--card-radius, calc(var(--radius) * var(--radius-ratio)));
 
     background:
-      linear-gradient(var(--card-tint), var(--card-tint)), hsl(var(--card-background, var(--card)));
+      linear-gradient(
+        var(--card-tint-angle, to bottom),
+        var(--card-tint),
+        var(--card-tint-end, var(--card-tint))
+      ),
+      hsl(var(--card-background, var(--card)) / var(--card-alpha, 100%));
     color: hsl(var(--card-foreground));
 
-    box-shadow: var(--card-shadow), var(--card-glow);
+    backdrop-filter: blur(var(--card-backdrop-blur-size))
+      saturate(var(--surface-backdrop-saturate, 160%));
+
+    box-shadow: var(--card-shadow, var(--shadow-sm)), var(--card-glow);
     overflow: hidden;
   }
 
@@ -38,7 +46,7 @@
 
   [data-slot="card"][data-variant="featured"] {
     border-color: var(--card-featured-border-color, hsl(var(--primary)));
-    box-shadow: 0 0 0 var(--card-featured-ring-width)
+    box-shadow: 0 0 0 var(--card-featured-ring-width, var(--stroke-hairline))
       var(--card-featured-border-color, hsl(var(--primary)));
   }
 
@@ -84,14 +92,16 @@
   }
 
   [data-slot="card"][data-accent] {
-    border-inline-start-width: var(--card-accent-rail-width);
+    border-inline-start-width: var(--card-accent-rail-width, var(--stroke-2xl));
     border-inline-start-color: var(--card-accent-color);
   }
 
   [data-slot="card"][data-accent] > [data-slot="card-header"],
   [data-slot="card"][data-accent] > [data-slot="card-content"]:not([data-flush]),
   [data-slot="card"][data-accent] > [data-slot="card-footer"]:not([data-flush]) {
-    padding-inline-start: calc(var(--card-space-inset) - var(--card-accent-rail-width));
+    padding-inline-start: calc(
+      var(--card-space-inset) - var(--card-accent-rail-width, var(--stroke-2xl))
+    );
   }
 
   [data-slot="card"] > [data-slot="card-footer"] {
@@ -99,11 +109,11 @@
   }
 
   [data-slot="card"][data-accent][data-accent-placement="perimeter"] {
-    border-width: var(--card-accent-perimeter-width);
+    border-width: var(--card-accent-perimeter-width, var(--stroke-hairline));
     border-color: var(--card-accent-color);
     box-shadow:
-      0 0 0 var(--card-accent-perimeter-ring-width) var(--card-accent-color),
-      var(--card-shadow),
+      0 0 0 var(--card-accent-perimeter-ring-width, var(--stroke-hairline)) var(--card-accent-color),
+      var(--card-shadow, var(--shadow-sm)),
       var(--card-glow);
   }
 
@@ -147,7 +157,7 @@
     align-items: center;
     gap: var(--space-inline-md);
     padding: var(--card-space-header-y) var(--card-space-inset);
-    border-block: 1px solid hsl(var(--card-border, var(--border)));
+    border-block: var(--stroke-hairline) solid hsl(var(--card-border, var(--border)));
   }
 
   [data-slot="card-bar"]:first-child {
@@ -393,7 +403,7 @@
   }
 
   [data-slot="card-footer"][data-separated] {
-    border-top: 1px solid hsl(var(--card-border, var(--border)));
+    border-top: var(--stroke-hairline) solid hsl(var(--card-border, var(--border)));
 
     padding-block: var(--card-space-divided-y);
     justify-content: flex-end;
@@ -467,9 +477,9 @@
     width: var(--stat-card-icon-size);
     height: var(--stat-card-icon-size);
     margin-bottom: var(--stat-card-gap);
-    border-radius: var(--stat-card-icon-radius);
+    border-radius: var(--stat-card-icon-radius, calc(var(--radius) / var(--radius-ratio)));
     background: var(--stat-card-icon-background, hsl(var(--primary) / 0.1));
-    color: var(--stat-card-icon-foreground, hsl(var(--primary)));
+    color: var(--stat-card-icon-foreground, hsl(var(--text-brand, var(--primary))));
   }
 
   [data-slot="stat-card-icon"] svg {
@@ -559,9 +569,12 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    border-radius: var(--card-service-launcher-icon-radius);
+    border-radius: var(
+      --card-service-launcher-icon-radius,
+      calc(var(--radius) / var(--radius-ratio))
+    );
     background: hsl(var(--card-service-launcher-icon-background, var(--accent)));
-    color: hsl(var(--card-service-launcher-icon-foreground, var(--primary)));
+    color: hsl(var(--card-service-launcher-icon-foreground, var(--text-brand, var(--primary))));
   }
 
   [data-slot="card"][data-service-launcher][data-unavailable] [data-slot="service-launcher-icon"] {

package/dist/styles/chart-layout.css

@@ -33,12 +33,25 @@
 
 .ui-chart .recharts-default-tooltip {
   border-radius: var(--radius);
-  border: 1px solid hsl(var(--border)) !important;
-  background: hsl(var(--popover)) !important;
+  border: var(--stroke-hairline) solid hsl(var(--border)) !important;
+  background: hsl(var(--popover) / var(--popover-alpha, 100%)) !important;
   color: hsl(var(--popover-foreground));
   font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
 }
 
+.ui-chart .recharts-line-curve,
+.ui-chart .recharts-area-curve {
+  stroke-width: var(--chart-series-stroke-width);
+}
+
+.ui-chart .recharts-area-area {
+  fill-opacity: var(--chart-area-fill-alpha);
+}
+
+.ui-chart .recharts-cartesian-grid line {
+  stroke-dasharray: var(--chart-grid-line-dash);
+}
+
 .ui-chart-footer {
   margin-block-start: var(--chart-trend-footer-gap);
   font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
@@ -92,9 +105,18 @@
   inline-size: 100%;
   max-inline-size: var(--chart-trend-bar-max-width);
 
-  block-size: max(var(--chart-trend-bar-min-height), calc(var(--chart-trend-bar-value, 0) * 100%));
-  border-start-start-radius: var(--chart-trend-bar-radius);
-  border-start-end-radius: var(--chart-trend-bar-radius);
+  block-size: max(
+    var(--chart-trend-bar-min-height, var(--stroke-md)),
+    calc(var(--chart-trend-bar-value, 0) * 100%)
+  );
+  border-start-start-radius: var(
+    --chart-trend-bar-radius,
+    calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+  );
+  border-start-end-radius: var(
+    --chart-trend-bar-radius,
+    calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+  );
   background: var(
     --chart-trend-bar-background,
     hsl(var(--muted-foreground) / var(--chart-trend-bar-background-alpha))