@godxjp/ui 28.13.0 → 29.0.0

package/dist/styles/badge-layout.css

@@ -3,13 +3,15 @@
 @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-radius: var(--badge-radius, calc(var(--radius) / var(--radius-ratio)));
     border-width: 1px;
     font-size: var(--badge-font-size);
 
@@ -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

@@ -10,13 +10,21 @@
     border-width: 1px;
     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;
   }
 
@@ -103,7 +111,7 @@
     border-color: var(--card-accent-color);
     box-shadow:
       0 0 0 var(--card-accent-perimeter-ring-width) var(--card-accent-color),
-      var(--card-shadow),
+      var(--card-shadow, var(--shadow-sm)),
       var(--card-glow);
   }
 
@@ -467,9 +475,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 +567,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

@@ -34,11 +34,24 @@
 .ui-chart .recharts-default-tooltip {
   border-radius: var(--radius);
   border: 1px solid hsl(var(--border)) !important;
-  background: hsl(var(--popover)) !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)));
@@ -93,8 +106,14 @@
   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);
+  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))