@godxjp/ui 28.12.0 → 29.0.0

package/dist/styles/shell-layout.css

@@ -151,9 +151,16 @@
     overflow: clip;
     overflow-clip-margin: var(--focus-ring-clip-margin);
     border-inline-end: 1px solid hsl(var(--border));
-    background: hsl(var(--card));
+
+    background: var(
+      --sidebar-surface-background,
+      hsl(var(--card) / var(--sidebar-surface-background-alpha, var(--card-alpha, 100%)))
+    );
 
     background-image: var(--sidebar-gradient);
+
+    backdrop-filter: blur(var(--sidebar-backdrop-blur-size))
+      saturate(var(--surface-backdrop-saturate, 160%));
     color: hsl(var(--foreground));
   }
 
@@ -168,7 +175,7 @@
     overflow: clip;
     overflow-clip-margin: var(--focus-ring-clip-margin);
     border-inline-end: 1px solid hsl(var(--border));
-    background: hsl(var(--muted));
+    background: var(--app-shell-nav-rail-background, hsl(var(--muted)));
     color: hsl(var(--foreground));
     padding-block: var(--app-shell-nav-rail-inset);
   }
@@ -252,9 +259,13 @@
     gap: var(--app-shell-bar-gap);
     padding-inline: var(--app-shell-bar-inset);
     border-bottom: 1px solid hsl(var(--border));
-    background: hsl(var(--card));
+
+    background: var(--app-shell-bar-background, hsl(var(--card) / var(--card-alpha, 100%)));
 
     background-image: var(--topbar-gradient);
+
+    backdrop-filter: blur(var(--app-shell-bar-backdrop-blur-size))
+      saturate(var(--surface-backdrop-saturate, 160%));
   }
 
   .app-main {
@@ -481,9 +492,12 @@
     height: var(--auth-requester-icon-size);
     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))
+    );
     background: hsl(var(--accent));
-    color: hsl(var(--primary));
+    color: hsl(var(--text-brand, var(--primary)));
   }
 
   .ui-auth-requester-icon > svg {
@@ -498,7 +512,7 @@
     align-items: center;
     gap: var(--auth-account-summary-gap);
     padding: var(--auth-account-summary-padding);
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
     background: hsl(var(--muted));
   }
 
@@ -645,7 +659,7 @@
     gap: var(--space-3);
     padding-inline: var(--centered-shell-bar-padding-x);
     border-bottom: 1px solid hsl(var(--border));
-    background: hsl(var(--card));
+    background: hsl(var(--card) / var(--card-alpha, 100%));
 
     background-image: var(--topbar-gradient);
   }
@@ -1185,8 +1199,8 @@
 
     --org-switcher-list-offset: var(--org-switcher-sheet-inset);
     max-height: var(--org-switcher-sheet-max-height);
-    border-start-start-radius: var(--radius-lg);
-    border-start-end-radius: var(--radius-lg);
+    border-start-start-radius: var(--radius-lg, var(--radius));
+    border-start-end-radius: var(--radius-lg, var(--radius));
   }
 
   .ui-org-switcher-command {
@@ -1197,7 +1211,7 @@
 
   .ui-org-switcher-command .ui-command-input-wrapper {
 
-    border: 1px solid hsl(var(--input));
+    border: 1px solid hsl(var(--input) / var(--input-alpha, 100%));
     border-radius: var(--control-radius);
 
     margin-block: var(--org-switcher-search-space-block);
@@ -1256,8 +1270,8 @@
 
   .ui-app-launcher-sheet {
     max-height: var(--app-launcher-sheet-max-height);
-    border-start-start-radius: var(--radius-lg);
-    border-start-end-radius: var(--radius-lg);
+    border-start-start-radius: var(--radius-lg, var(--radius));
+    border-start-end-radius: var(--radius-lg, var(--radius));
   }
 
   [data-slot="dialog-overlay"].ui-app-launcher-launchpad-overlay {
@@ -1342,7 +1356,7 @@
     justify-content: flex-start;
     gap: var(--app-launcher-launchpad-tile-gap);
     padding: var(--app-launcher-launchpad-tile-padding);
-    border-radius: var(--app-launcher-launchpad-tile-radius);
+    border-radius: var(--app-launcher-launchpad-tile-radius, var(--radius));
   }
 
   .ui-app-launcher-launchpad .ui-app-launcher-tile:hover,
@@ -1355,7 +1369,7 @@
     width: var(--app-launcher-launchpad-mark-size);
     height: var(--app-launcher-launchpad-mark-size);
     border: 1px solid var(--app-launcher-launchpad-mark-border-color);
-    border-radius: var(--app-launcher-launchpad-mark-radius);
+    border-radius: var(--app-launcher-launchpad-mark-radius, var(--radius));
     background: var(--app-launcher-launchpad-mark-background);
     box-shadow: var(--app-launcher-launchpad-mark-shadow);
     color: hsl(var(--foreground));
@@ -1431,7 +1445,7 @@
     justify-content: center;
     gap: var(--app-launcher-tile-gap);
     padding: var(--app-launcher-tile-padding);
-    border-radius: var(--app-launcher-tile-radius);
+    border-radius: var(--app-launcher-tile-radius, var(--radius));
     color: hsl(var(--app-launcher-tile-color));
     text-align: center;
     text-decoration: none;
@@ -1441,7 +1455,10 @@
   }
 
   .ui-app-launcher-tile:hover {
-    background: hsl(var(--app-launcher-tile-hover-background, var(--accent)));
+    background: hsl(
+      var(--app-launcher-tile-hover-background, var(--accent)) /
+        var(--app-launcher-tile-hover-background-alpha, 100%)
+    );
     color: hsl(var(--app-launcher-tile-hover-color, var(--accent-foreground)));
   }
 
@@ -1456,7 +1473,7 @@
     flex: 0 0 auto;
     place-items: center;
     overflow: hidden;
-    border-radius: var(--app-launcher-mark-radius);
+    border-radius: var(--app-launcher-mark-radius, var(--radius));
     background: hsl(var(--app-launcher-mark-background));
     color: hsl(var(--app-launcher-mark-foreground));
     font-size: var(--app-launcher-mark-font-size);
@@ -1544,7 +1561,8 @@
     flex: 0 0 auto;
     place-items: center;
     border-radius: var(--radius);
-    color: white;
+
+    color: var(--sidebar-logo-mark-color, white);
     font-size: var(--sidebar-logo-mark-font-size);
     font-weight: 700;
   }
@@ -1637,7 +1655,7 @@
     gap: var(--sidebar-nav-item-gap);
     padding-inline: var(--sidebar-nav-item-padding-x);
     border: 0;
-    border-radius: var(--sidebar-nav-item-radius);
+    border-radius: var(--sidebar-nav-item-radius, calc(var(--radius) - 1px));
     background: transparent;
 
     color: var(--sidebar-nav-item-foreground, hsl(var(--muted-foreground)));
@@ -1664,7 +1682,12 @@
     );
     color: var(
       --sidebar-item-active-foreground,
-      hsl(var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels)))
+      hsl(
+        var(
+          --text-primary,
+          var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels))
+        )
+      )
     );
     font-weight: var(--font-weight-medium);
   }
@@ -1786,7 +1809,12 @@
     background: transparent;
     color: var(
       --sidebar-item-active-foreground,
-      hsl(var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels)))
+      hsl(
+        var(
+          --text-primary,
+          var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels))
+        )
+      )
     );
     font-weight: var(--font-weight-medium);
   }
@@ -1888,7 +1916,7 @@
     width: 0.5625rem;
     height: 0.5625rem;
     border-radius: var(--radius-pill);
-    border: 1.5px solid hsl(var(--card));
+    border: 1.5px solid hsl(var(--card) / var(--card-alpha, 100%));
     background: hsl(var(--success));
   }
 
@@ -2031,6 +2059,10 @@
     justify-content: center;
   }
 
+  :is(.ui-topbar-start, .ui-topbar-center, .ui-topbar-end) > *:has(.ui-topbar-item) {
+    align-self: stretch;
+  }
+
   .ui-topbar-end {
     max-width: 100%;
     flex: 0 1 auto;
@@ -2076,7 +2108,10 @@
   }
 
   .ui-topbar-item:hover {
-    background: hsl(var(--topbar-item-hover-background, var(--accent)));
+    background: hsl(
+      var(--topbar-item-hover-background, var(--accent)) /
+        var(--topbar-item-hover-background-alpha, 100%)
+    );
     color: hsl(var(--topbar-item-hover-color, var(--accent-foreground)));
   }
 
@@ -2184,18 +2219,6 @@
     cursor: default;
   }
 
-  .tb-chip-icon {
-    display: grid;
-    width: var(--topbar-chip-icon-size);
-    height: var(--topbar-chip-icon-size);
-    flex: 0 0 auto;
-    place-items: center;
-    border-radius: calc(var(--radius) - 2px);
-    color: white;
-    font-size: var(--topbar-chip-icon-font-size);
-    font-weight: 700;
-  }
-
   .tb-chip-label {
     min-width: 0;
     overflow: hidden;
@@ -2228,7 +2251,7 @@
     align-items: center;
     gap: var(--space-2);
     padding-inline: var(--space-2);
-    border: 1px solid hsl(var(--input));
+    border: 1px solid hsl(var(--input) / var(--input-alpha, 100%));
     border-radius: var(--radius);
     background: hsl(var(--background));
     color: hsl(var(--muted-foreground));
@@ -2451,7 +2474,7 @@
     gap: var(--mobile-shell-region-gap);
     padding-block-start: var(--mobile-shell-safe-inset-block-start);
     padding-inline: var(--mobile-shell-padding-inline);
-    background: hsl(var(--card));
+    background: hsl(var(--card) / var(--card-alpha, 100%));
   }
 
   .ui-mobile-shell-header {
@@ -2466,7 +2489,7 @@
     gap: var(--mobile-shell-region-gap);
     padding-inline: var(--mobile-shell-padding-inline);
     border-block-end: 1px solid hsl(var(--border));
-    background: hsl(var(--card));
+    background: hsl(var(--card) / var(--card-alpha, 100%));
     background-image: var(--topbar-gradient);
   }
 
@@ -2509,7 +2532,7 @@
     padding-block: var(--mobile-shell-actions-padding-block);
     padding-inline: var(--mobile-shell-padding-inline);
     border-block-start: 1px solid hsl(var(--border));
-    background: hsl(var(--card));
+    background: hsl(var(--card) / var(--card-alpha, 100%));
   }
 
   .ui-mobile-shell-tabbar {
@@ -2522,7 +2545,7 @@
     padding-block-end: var(--mobile-shell-safe-inset-block-end);
     padding-inline: var(--mobile-shell-safe-inset-inline);
     border-block-start: 1px solid hsl(var(--border));
-    background: hsl(var(--card));
+    background: hsl(var(--card) / var(--card-alpha, 100%));
   }
 
   .ui-mobile-shell-tabbar > * {

package/dist/styles/table-layout.css

@@ -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))
+      )
     );
   }
 
@@ -98,7 +108,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 +270,16 @@
     overflow: clip;
 
     min-inline-size: min-content;
-    border: 1px solid hsl(var(--border));
-    border-radius: var(--radius-md);
+
+    border: 1px 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"] {
@@ -388,7 +409,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 +444,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))
+      )
     );
   }
 
@@ -478,7 +511,7 @@
   }
 
   .ui-data-table-filter-trigger[data-filtered] {
-    color: hsl(var(--primary));
+    color: hsl(var(--text-brand, var(--primary)));
   }
 
   .ui-data-table-selection-menu {
@@ -605,7 +638,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 +649,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 +832,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 +876,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 +920,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 +964,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)));
   }
 

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/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,6 +40,11 @@
 
   --card-tint: transparent;
 
+  --card-tint-end: initial;
+  --card-tint-angle: initial;
+
+  --card-backdrop-blur-size: initial;
+
   --card-accent-rail-width: var(--stroke-2xl);
 
   --card-accent-perimeter-width: var(--stroke-hairline);
@@ -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,7 +10,7 @@
   --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;
 
@@ -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);