@godxjp/ui 28.13.0 → 30.0.0

package/dist/styles/shell-layout.css

@@ -150,10 +150,17 @@
 
     overflow: clip;
     overflow-clip-margin: var(--focus-ring-clip-margin);
-    border-inline-end: 1px solid hsl(var(--border));
-    background: hsl(var(--card));
+    border-inline-end: var(--stroke-hairline) solid hsl(var(--border));
+
+    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));
   }
 
@@ -167,8 +174,8 @@
     align-items: center;
     overflow: clip;
     overflow-clip-margin: var(--focus-ring-clip-margin);
-    border-inline-end: 1px solid hsl(var(--border));
-    background: hsl(var(--muted));
+    border-inline-end: var(--stroke-hairline) solid hsl(var(--border));
+    background: var(--app-shell-nav-rail-background, hsl(var(--muted)));
     color: hsl(var(--foreground));
     padding-block: var(--app-shell-nav-rail-inset);
   }
@@ -197,7 +204,7 @@
   }
 
   .app-nav-rail[data-edge="end"] {
-    border-inline-start: 1px solid hsl(var(--border));
+    border-inline-start: var(--stroke-hairline) solid hsl(var(--border));
     border-inline-end: 0;
   }
 
@@ -215,11 +222,11 @@
   }
 
   .app-nav-rail[data-edge="top"] {
-    border-block-end: 1px solid hsl(var(--border));
+    border-block-end: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   .app-nav-rail[data-edge="bottom"] {
-    border-block-start: 1px solid hsl(var(--border));
+    border-block-start: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   .app-root:not([data-topbar-span="full"]):is(
@@ -251,10 +258,14 @@
     align-items: center;
     gap: var(--app-shell-bar-gap);
     padding-inline: var(--app-shell-bar-inset);
-    border-bottom: 1px solid hsl(var(--border));
-    background: hsl(var(--card));
+    border-bottom: var(--stroke-hairline) solid hsl(var(--border));
+
+    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 {
@@ -279,7 +290,7 @@
 
   .app-footer {
     grid-area: footer;
-    border-top: 1px solid hsl(var(--border));
+    border-top: var(--stroke-hairline) solid hsl(var(--border));
     background: hsl(var(--background));
   }
 
@@ -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));
   }
 
@@ -596,7 +610,7 @@
     --separator-label-line-height: var(--auth-shell-divider-label-line-height);
     --separator-label-font-weight: var(--font-weight-normal);
     --separator-rule-color: var(--auth-shell-divider-rule-color);
-    --separator-label-color: var(--auth-shell-divider-label-color);
+    --separator-label-color: var(--auth-shell-divider-label-color, var(--muted-foreground));
   }
 
   @media (max-width: 30rem) {
@@ -644,8 +658,8 @@
     align-items: center;
     gap: var(--space-3);
     padding-inline: var(--centered-shell-bar-padding-x);
-    border-bottom: 1px solid hsl(var(--border));
-    background: hsl(var(--card));
+    border-bottom: var(--stroke-hairline) solid hsl(var(--border));
+    background: hsl(var(--card) / var(--card-alpha, 100%));
 
     background-image: var(--topbar-gradient);
   }
@@ -685,7 +699,7 @@
 
   .ui-centered-shell-footer {
     padding: var(--centered-shell-footer-padding);
-    border-top: 1px solid hsl(var(--border));
+    border-top: var(--stroke-hairline) solid hsl(var(--border));
     text-align: center;
     color: hsl(var(--muted-foreground));
   }
@@ -709,7 +723,7 @@
     block-size: var(--app-shell-bar-height);
     min-inline-size: 0;
     align-items: center;
-    border-block-end: 1px solid hsl(var(--border));
+    border-block-end: var(--stroke-hairline) solid hsl(var(--border));
     padding-inline: var(--space-3);
   }
 
@@ -820,7 +834,7 @@
     min-height: 0;
     flex: 0 0 auto;
     flex-direction: column;
-    border-inline-end: 1px solid hsl(var(--border));
+    border-inline-end: var(--stroke-hairline) solid hsl(var(--border));
     inline-size: var(--app-shell-nav-rail-width);
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -841,7 +855,7 @@
   }
 
   .app-breadcrumb {
-    border-bottom: 1px solid hsl(var(--border));
+    border-bottom: var(--stroke-hairline) solid hsl(var(--border));
 
     padding: var(--space-2) var(--space-page-active-x);
     color: hsl(var(--muted-foreground));
@@ -1143,7 +1157,7 @@
   }
 
   .ui-org-switcher-meta {
-    color: hsl(var(--org-switcher-meta-foreground));
+    color: hsl(var(--org-switcher-meta-foreground, var(--muted-foreground)));
     font-size: var(--sidebar-user-role-font-size);
   }
 
@@ -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: var(--stroke-hairline) 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,20 +1356,20 @@
     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,
   .ui-app-launcher-launchpad .ui-app-launcher-tile[aria-current="page"] {
     background: var(--app-launcher-launchpad-tile-hover-background);
-    color: hsl(var(--app-launcher-tile-color));
+    color: hsl(var(--app-launcher-tile-color, var(--foreground)));
   }
 
   .ui-app-launcher-launchpad .ui-app-launcher-mark {
     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: var(--stroke-hairline) solid var(--app-launcher-launchpad-mark-border-color);
+    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,8 +1445,8 @@
     justify-content: center;
     gap: var(--app-launcher-tile-gap);
     padding: var(--app-launcher-tile-padding);
-    border-radius: var(--app-launcher-tile-radius);
-    color: hsl(var(--app-launcher-tile-color));
+    border-radius: var(--app-launcher-tile-radius, var(--radius));
+    color: hsl(var(--app-launcher-tile-color, var(--foreground)));
     text-align: center;
     text-decoration: none;
     transition:
@@ -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);
@@ -1482,7 +1499,7 @@
 
   .ui-app-launcher-group-label {
     padding-inline: var(--app-launcher-tile-padding);
-    color: hsl(var(--app-launcher-group-label-color));
+    color: hsl(var(--app-launcher-group-label-color, var(--muted-foreground)));
     font-size: var(--app-launcher-group-label-font-size);
     font-weight: var(--font-weight-medium);
   }
@@ -1516,7 +1533,7 @@
     gap: var(--space-2);
     padding-inline: var(--space-4);
     border: 0;
-    border-bottom: 1px solid hsl(var(--border));
+    border-bottom: var(--stroke-hairline) solid hsl(var(--border));
     background: transparent;
     color: inherit;
     font-family: inherit;
@@ -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);
   }
@@ -1734,7 +1757,7 @@
 
   .sb-footer {
     margin-top: auto;
-    border-top: 1px solid hsl(var(--border));
+    border-top: var(--stroke-hairline) solid hsl(var(--border));
     padding: var(--space-2);
   }
 
@@ -1757,7 +1780,7 @@
     gap: 2px;
     margin: 2px 0 var(--space-1) calc(var(--space-2) + 0.6875rem);
     padding-inline-start: var(--space-3);
-    border-inline-start: 1px solid hsl(var(--border));
+    border-inline-start: var(--stroke-hairline) solid hsl(var(--border));
   }
 
   .sb-nav-item--sub {
@@ -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: var(--stroke-sm) 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;
@@ -2064,7 +2096,7 @@
     border: 0;
     border-radius: var(--topbar-item-radius);
     background: transparent;
-    color: hsl(var(--topbar-item-color));
+    color: hsl(var(--topbar-item-color, var(--muted-foreground)));
     cursor: pointer;
 
     font: inherit;
@@ -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)));
   }
 
@@ -2148,74 +2183,6 @@
     }
   }
 
-  .tb-chip {
-    display: inline-flex;
-    max-width: 15rem;
-    min-width: 0;
-    height: var(--control-height-sm);
-    align-items: center;
-    gap: var(--space-1);
-    padding-inline: var(--space-2);
-    border: 1px solid transparent;
-    border-radius: var(--radius);
-    background: transparent;
-    color: hsl(var(--foreground));
-    cursor: pointer;
-    font: inherit;
-    font-size: var(--font-size-base);
-  }
-
-  .tb-chip:hover,
-  .tb-chip[data-open="true"] {
-    border-color: hsl(var(--border));
-    background: hsl(var(--accent));
-  }
-
-  .tb-chip-empty {
-    border-color: hsl(var(--border));
-    border-style: dashed;
-    color: hsl(var(--muted-foreground));
-  }
-
-  .tb-chip-static,
-  .tb-chip-static:hover {
-    border-color: transparent;
-    background: transparent;
-    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;
-    font-weight: 500;
-
-    line-height: 1.5;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .tb-chip-caret,
-  .tb-chip-sep {
-    color: hsl(var(--muted-foreground));
-  }
-
-  .tb-chip-caret svg {
-    width: var(--topbar-caret-icon-size);
-    height: var(--topbar-caret-icon-size);
-  }
-
   .tb-search {
     display: flex;
 
@@ -2228,7 +2195,7 @@
     align-items: center;
     gap: var(--space-2);
     padding-inline: var(--space-2);
-    border: 1px solid hsl(var(--input));
+    border: var(--stroke-hairline) solid hsl(var(--input) / var(--input-alpha, 100%));
     border-radius: var(--radius);
     background: hsl(var(--background));
     color: hsl(var(--muted-foreground));
@@ -2252,8 +2219,8 @@
     align-items: center;
     margin-inline-start: auto;
     padding: 1px 5px;
-    border: 1px solid hsl(var(--border));
-    border-bottom-width: 2px;
+    border: var(--stroke-hairline) solid hsl(var(--border));
+    border-bottom-width: var(--stroke-md);
     border-radius: 4px;
     background: hsl(var(--secondary));
     color: hsl(var(--muted-foreground));
@@ -2304,7 +2271,6 @@
       padding-inline: var(--topbar-item-padding-inline-compact);
     }
 
-    .tb-chip-sep,
     .tb-search .kbd,
 
     .tb-search .tb-search-label {
@@ -2451,7 +2417,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 {
@@ -2465,8 +2431,8 @@
     align-items: center;
     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));
+    border-block-end: var(--stroke-hairline) solid hsl(var(--border));
+    background: hsl(var(--card) / var(--card-alpha, 100%));
     background-image: var(--topbar-gradient);
   }
 
@@ -2508,8 +2474,8 @@
     gap: var(--mobile-shell-region-gap);
     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));
+    border-block-start: var(--stroke-hairline) solid hsl(var(--border));
+    background: hsl(var(--card) / var(--card-alpha, 100%));
   }
 
   .ui-mobile-shell-tabbar {
@@ -2521,8 +2487,8 @@
     flex: 0 0 auto;
     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));
+    border-block-start: var(--stroke-hairline) solid hsl(var(--border));
+    background: hsl(var(--card) / var(--card-alpha, 100%));
   }
 
   .ui-mobile-shell-tabbar > * {