@godxjp/ui 19.4.1 → 19.5.0

package/dist/styles/shell-layout.css

@@ -85,7 +85,7 @@
 
   .app-main:focus-visible {
     outline: none;
-    box-shadow: inset 0 0 0 var(--region-focus-ring-width)
+    box-shadow: inset 0 0 0 calc(var(--region-focus-ring-width) * var(--focus-outline))
       var(--region-focus-ring-color, hsl(var(--focus-ring-color, var(--ring))));
   }
 
@@ -497,7 +497,7 @@
     display: none;
   }
 
-  .app-mobile-nav-trigger {
+  .app-root .app-mobile-nav-trigger {
     display: none;
     flex: 0 0 auto;
     margin-inline-end: var(--space-1);
@@ -557,7 +557,7 @@
       display: flex;
     }
 
-    .app-mobile-nav-trigger {
+    .app-root .app-mobile-nav-trigger {
       display: inline-flex;
     }
 
@@ -827,6 +827,13 @@
     gap: var(--sidebar-nav-gap);
   }
 
+  .ui-nav-list {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: var(--sidebar-nav-gap);
+  }
+
   .sb-nav-item {
     display: flex;
     width: 100%;
@@ -848,11 +855,6 @@
     text-align: start;
   }
 
-  .sb-nav-item:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
-  }
-
   .sb-nav-item:hover {
     background: hsl(var(--accent));
     color: var(--sidebar-nav-item-hover-foreground, hsl(var(--foreground)));
@@ -1144,6 +1146,8 @@
     max-width: 100%;
     min-width: 0;
     flex: 1 1 0%;
+
+    align-self: stretch;
     align-items: center;
     gap: var(--topbar-gap);
     padding-inline: var(--topbar-inset);
@@ -1156,6 +1160,8 @@
   .ui-topbar-end {
     display: flex;
     min-width: 0;
+
+    align-self: stretch;
     align-items: center;
     gap: var(--topbar-gap);
     overflow: clip;
@@ -1175,11 +1181,13 @@
   .ui-topbar-start {
     flex: 0 1 auto;
   }
+
   .ui-topbar-start > :last-child {
     max-width: 100%;
     min-width: 0;
     flex: 0 1 auto;
-    overflow: hidden;
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
     line-height: var(--topbar-start-truncate-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1194,6 +1202,52 @@
     margin-inline-start: auto;
   }
 
+  .ui-topbar-item {
+    display: inline-flex;
+    min-width: var(--topbar-item-min-width);
+    flex: 0 0 auto;
+    align-self: stretch;
+    align-items: center;
+    justify-content: center;
+    gap: var(--topbar-item-gap);
+    padding-inline: var(--topbar-item-padding-inline);
+    border: 0;
+    border-radius: var(--topbar-item-radius);
+    background: transparent;
+    color: hsl(var(--topbar-item-color));
+    cursor: pointer;
+
+    font: inherit;
+    white-space: nowrap;
+    --focus-ring-offset: var(--topbar-item-focus-ring-offset);
+    transition:
+      background-color var(--duration-fast),
+      color var(--duration-fast);
+  }
+
+  .ui-topbar-item:hover {
+    background: hsl(var(--topbar-item-hover-background));
+    color: hsl(var(--topbar-item-hover-color));
+  }
+
+  .ui-topbar-item:active,
+  .ui-topbar-item[data-state="open"] {
+    background: hsl(var(--topbar-item-active-background));
+    color: hsl(var(--topbar-item-hover-color));
+  }
+
+  .ui-topbar-item:disabled,
+  .ui-topbar-item[data-disabled] {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+  }
+
+  .ui-topbar-item > svg {
+    width: var(--topbar-icon-size);
+    height: var(--topbar-icon-size);
+    flex: 0 0 auto;
+  }
+
   @media (width <= 68.75rem) {
     .ui-topbar-center {
       display: var(--topbar-center-compact-display);
@@ -1518,7 +1572,7 @@
 
   .ui-mobile-shell-main:focus-visible {
     outline: none;
-    box-shadow: inset 0 0 0 var(--region-focus-ring-width)
+    box-shadow: inset 0 0 0 calc(var(--region-focus-ring-width) * var(--focus-outline))
       var(--region-focus-ring-color, hsl(var(--focus-ring-color, var(--ring))));
   }
 

package/dist/tokens/antd.generated.css

@@ -0,0 +1,40 @@
+
+
+:root {
+
+  --primary-hover: 206 100% 29.4%;
+
+  --primary-active: 208 100% 22%;
+
+  --primary-border: 198 68% 66%;
+  --destructive-hover: 359 50.6% 53.1%;
+  --destructive-active: 355 70.6% 33.3%;
+
+  --control-outline: 192.1 100% 44.7%;
+  --control-outline-alpha: 0.11;
+
+  --control-outline-error: 4.3 87.6% 34.7%;
+  --control-outline-error-alpha: 0.09;
+
+  --ring: var(--primary);
+}
+
+.dark,
+:root[data-theme="dark"] {
+
+  --primary-hover: 202.2 74.6% 64.5%;
+
+  --primary-active: 200.2 81.3% 74.9%;
+
+  --primary-border: 204.6 46.7% 23.5%;
+  --destructive-hover: 358.8 42.3% 53.1%;
+  --destructive-active: 357.3 50.6% 34.1%;
+
+  --control-outline: 204.6 99% 61.8%;
+  --control-outline-alpha: 0.29;
+
+  --control-outline-error: 351.5 98.3% 53.5%;
+  --control-outline-error-alpha: 0.06;
+
+  --ring: var(--primary);
+}

package/dist/tokens/axes.css

@@ -60,3 +60,9 @@
     --auth-shell-main-padding: var(--auth-shell-canonical-main-padding-mobile);
   }
 }
+
+:root[data-focus-outline="on"] {
+  --focus-outline: 1;
+  --focus-field-shadow: 0 0 0 var(--focus-ring-glow-width)
+    hsl(var(--focus-ring-glow-color) / var(--focus-ring-glow-alpha));
+}

package/dist/tokens/base.css

@@ -1,10 +1,13 @@
 
 
 @import "./foundation.css";
+
+@import "./antd.generated.css";
 @import "./semantic/layout.css";
 @import "./axes.css";
 @import "./components/control.css";
 @import "./components/toggle.css";
+@import "./components/segmented.css";
 @import "./components/form.css";
 @import "./components/card.css";
 @import "./components/chart.css";

package/dist/tokens/components/control.css

@@ -8,6 +8,8 @@
   --control-padding-x-default: var(--space-3);
   --control-padding-x-comfortable: var(--space-4);
 
+  --control-bounded-width: min(15rem, 48vw);
+
   --control-height: calc(var(--control-height-default) * var(--scaling));
 
   --control-height-sm: calc(var(--control-height) - calc(0.25rem * var(--scaling)));
@@ -27,7 +29,9 @@
   --control-icon-size-sm: calc(var(--icon-size-sm) * var(--scaling));
 
   --toggle-focus-ring-width: var(--stroke-lg);
-  --toggle-focus-ring-alpha: 0.35;
+  --toggle-focus-ring-alpha: 1;
+
+  --control-focus-ring-width: var(--stroke-hairline);
 
   --rating-focus-ring-offset: 2px;
 

package/dist/tokens/components/data-display.css

@@ -86,7 +86,8 @@
   --timeline-grid-hour-height: 2.5rem;
   --timeline-grid-axis-width: 3.25rem;
   --timeline-grid-column-min-width: 6rem;
-  --timeline-grid-event-min-height: 1.5rem;
+
+  --timeline-grid-event-min-height-minutes: 36;
   --timeline-grid-axis-font-size: var(--font-size-2xs);
   --timeline-grid-head-font-size: var(--font-size-xs);
   --timeline-grid-event-font-size: var(--font-size-2xs);

package/dist/tokens/components/feedback.css

@@ -120,6 +120,8 @@
   --popover-surface-foreground: initial;
   --popover-surface-border-color: initial;
 
+  --popover-surface-inline-size: initial;
+
   --toast-icon-size: var(--icon-size-md);
 
   --toast-mobile-offset: 16px;

package/dist/tokens/components/legal-document.css

@@ -2,8 +2,6 @@
 
 :root {
 
-  --legal-document-section-focus-ring-offset: var(--space-1);
-
   --legal-document-measure-max-width: 46rem;
 
   --legal-document-column-gap: var(--space-10);

package/dist/tokens/components/logo.css

@@ -16,6 +16,19 @@
 
   --logo-identity-foreground: 48 9% 9%;
 
+  --logo-glyph-cap-baseline-optical-offset: -0.01em;
+  --logo-glyph-cap-descender-optical-offset: -0.09em;
+  --logo-glyph-x-baseline-optical-offset: -0.11em;
+  --logo-glyph-x-descender-optical-offset: -0.21em;
+
+  --logo-glyph-optical-offset: initial;
+
+  --logo-glyph-fullwidth-width: 1;
+  --logo-glyph-wide-width: 1.06;
+  --logo-glyph-narrow-width: 0.81;
+  --logo-glyph-space-width: 0.34;
+  --logo-glyph-fit-max-width: 0.95;
+
   --logo-godx-size-xs: 1.5rem;
   --logo-godx-size-sm: 1.75rem;
   --logo-godx-size-md: 2rem;

package/dist/tokens/components/navigation.css

@@ -41,6 +41,8 @@
 
   --tabs-list-line-space-inset: 0px;
 
+  --tabs-list-focus-ring-space-inset: initial;
+
   --tabs-trigger-line-radius: 0px;
   --tabs-trigger-line-padding-x: 1rem;
   --tabs-trigger-line-padding-y: 0.5rem;

package/dist/tokens/components/segmented.css

@@ -0,0 +1,27 @@
+
+
+:root {
+
+  --segmented-track-padding: calc(var(--space-1) / 2);
+
+  --segmented-track-background: var(--muted);
+
+  --segmented-track-radius: var(--radius);
+  --segmented-item-radius: var(--radius-md);
+
+  --segmented-item-height: calc(var(--control-height) - var(--segmented-track-padding) * 2);
+
+  --segmented-item-padding-inline: calc(var(--control-padding-x) - 1px);
+
+  --segmented-item-gap: calc(var(--space-3) / 2);
+
+  --segmented-item-color: var(--muted-foreground);
+  --segmented-item-hover-color: var(--foreground);
+  --segmented-item-selected-color: var(--foreground);
+
+  --segmented-item-hover-background: var(--accent);
+  --segmented-item-active-background: var(--secondary);
+
+  --segmented-item-selected-background: var(--background);
+  --segmented-item-selected-shadow: var(--shadow-sm);
+}

package/dist/tokens/components/shell.css

@@ -11,7 +11,7 @@
   --sidebar-badge-destructive-background: initial;
   --sidebar-badge-destructive-foreground: initial;
 
-  --sidebar-user-focus-ring-alpha: 0.45;
+  --sidebar-user-focus-ring-alpha: 1;
 
   --topbar-chip-icon-size: 1.125rem;
 
@@ -20,7 +20,7 @@
 
   --topbar-caret-icon-size: var(--icon-size-xs);
 
-  --topbar-icon-focus-ring-alpha: 0.45;
+  --topbar-icon-focus-ring-alpha: 1;
 
   --sidebar-user-role-font-size: var(--font-size-2xs);
   --org-switcher-meta-foreground: var(--muted-foreground);
@@ -87,6 +87,19 @@
   --topbar-gap: var(--space-2);
 
   --topbar-center-compact-display: none;
+
+  --topbar-item-padding-inline: var(--space-3);
+  --topbar-item-gap: var(--space-2);
+  --topbar-item-min-width: var(--control-height);
+
+  --topbar-item-radius: var(--radius-sharp);
+  --topbar-item-color: var(--muted-foreground);
+
+  --topbar-item-hover-background: var(--accent);
+  --topbar-item-hover-color: var(--accent-foreground);
+  --topbar-item-active-background: var(--secondary);
+
+  --topbar-item-focus-ring-offset: calc(-1 * var(--focus-ring-width));
   --org-switcher-trigger-height: var(--band-height-xl);
   --org-switcher-trigger-padding-x: var(--space-2);
   --org-switcher-avatar-size: 1.75rem;

package/dist/tokens/foundation.css

@@ -14,7 +14,8 @@
   --secondary: 45 15% 95%;
   --secondary-foreground: 48 8% 13%;
   --muted: 45 15% 95%;
-  --muted-foreground: 44 5% 42%;
+
+  --muted-foreground: 44 5% 39%;
   --accent: 40 13% 91%;
   --accent-foreground: 48 8% 13%;
   --destructive: 357 64% 44%;
@@ -22,7 +23,7 @@
   --border: 30 7% 83%;
 
   --input: 30 7% 53%;
-  --ring: 204 100% 39%;
+
   --success: 146 40% 58%;
   --success-foreground: 60 33% 99%;
   --warning: 44 100% 49%;
@@ -46,12 +47,8 @@
   --text-info: 221 70% 38%;
   --text-error: 357 75% 38%;
 
-  --primary-hover: 204 100% 33%;
-  --primary-active: 204 100% 28%;
   --secondary-hover: 45 15% 91%;
   --secondary-active: 45 15% 88%;
-  --destructive-hover: 357 64% 38%;
-  --destructive-active: 357 64% 32%;
 
   --wa-ai: #165e83;
   --wa-gunjo: #4c6cb3;
@@ -104,12 +101,26 @@
     transparent 70%
   );
 
+  --focus-outline: 0;
+  --focus-outline-weight: var(--stroke-hairline);
+  --focus-outline-color: var(--focus-ring-color, var(--ring));
+  --control-outline-width: calc(var(--stroke-md) * var(--focus-outline));
+  --focus-outline-offset: 0px;
+
   --focus-ring-color: initial;
-  --focus-ring-width: var(--stroke-md);
+
+  --focus-ring-weight: var(--focus-outline-weight);
+  --focus-ring-width: calc(var(--focus-ring-weight) * var(--focus-outline));
 
   --focus-ring-opacity: 1;
 
-  --focus-ring-offset: 0px;
+  --focus-ring-glow-width: var(--control-outline-width);
+  --focus-ring-glow-color: var(--control-outline);
+  --focus-ring-glow-alpha: var(--control-outline-alpha);
+
+  --focus-field-shadow: none;
+
+  --focus-ring-offset: var(--focus-outline-offset);
 
   --focus-ring-clip-margin: 8px;
 
@@ -308,7 +319,7 @@
   --border: 45 6% 22%;
 
   --input: 45 6% 47%;
-  --ring: 204 90% 60%;
+
   --success: 146 45% 55%;
   --success-foreground: 48 9% 9%;
   --warning: 44 95% 55%;
@@ -331,10 +342,7 @@
   --text-warning: 44 95% 62%;
   --text-info: 221 70% 72%;
   --text-error: 357 75% 68%;
-  --primary-hover: 204 90% 66%;
-  --primary-active: 204 90% 72%;
+
   --secondary-hover: 45 6% 22%;
   --secondary-active: 45 6% 26%;
-  --destructive-hover: 357 55% 43%;
-  --destructive-active: 357 55% 38%;
 }