@kubex/zinc 1.1.185 → 2.0.0

package/scss/mixins/_helper-mixins.scss

@@ -27,11 +27,33 @@ $scrollbar-thumb-hover: rgba(var(--inverse-base), 0.6);
   }
 }
 
+// Chrome ignores ::-webkit-scrollbar wherever these are set, and scrollbar-color
+// inherits, so only browsers without the webkit pseudo-elements get them
+@mixin scrollbars-standard {
+  @supports not selector(::-webkit-scrollbar) {
+    scrollbar-width: thin;
+    scrollbar-color: $scrollbar-thumb transparent;
+  }
+}
+
+// Clips, leaving room outside the box for the focus ring of a control flush with its edge.
+// Safari lacks overflow-clip-margin, so there the box grows by padding cancelled by a negative
+// margin: only for boxes without padding, margins or percentage sizes of their own.
+@mixin clip-focus-room {
+  overflow: clip;
+  overflow-clip-margin: var(--zn-focus-ring-outset);
+
+  // Safari: a padded box pulled out by negative margins overflows its parent and gives scrollers around it a scrollbar
+  @supports not (overflow-clip-margin: 0px) {
+    overflow: visible;
+    clip-path: inset(calc(var(--zn-focus-ring-outset) * -1));
+  }
+}
+
 // `scrollbars` only reaches descendant scroll areas; this styles an element that
 // is itself the scroller
 @mixin scrollbars-self {
-  scrollbar-width: thin;
-  scrollbar-color: $scrollbar-thumb transparent;
+  @include scrollbars-standard;
 
   &::-webkit-scrollbar {
     width: $scrollbar-size;

package/scss/mixins/_motion-mixins.scss

@@ -0,0 +1,126 @@
+/// Wraps rules that should only apply when the user asked for less motion.
+@mixin reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}
+
+/// Gates hover-only motion so touch devices don't fire it on tap.
+@mixin hover-fine {
+  @media (hover: hover) and (pointer: fine) {
+    @content;
+  }
+}
+
+/// Scale-down press feedback for any clickable surface. Sets `transition`, so it replaces any
+/// transition list already on the element.
+@mixin press($scale: 0.97) {
+  transition: transform 160ms var(--zn-ease-out);
+
+  &:active:not([disabled]) {
+    transform: scale($scale);
+  }
+}
+
+/// Pops a zn-popup in from its trigger on open; closing is instant. `$host` is the zn-popup's selector.
+@mixin popover-motion($host, $duration: var(--zn-dropdown-duration, 120ms)) {
+  #{$host}::part(popup) {
+    transform-origin: top;
+    transition: opacity $duration var(--zn-ease-out),
+                translate $duration var(--zn-ease-out),
+                scale $duration var(--zn-ease-out);
+
+    @starting-style {
+      opacity: 0;
+      translate: 0 -3px;
+      scale: .98;
+    }
+
+    @include reduced-motion {
+      transition: opacity $duration var(--zn-ease-out);
+    }
+  }
+
+  #{$host}[data-current-placement^="top"]::part(popup) {
+    transform-origin: bottom;
+
+    @starting-style {
+      translate: 0 3px;
+    }
+  }
+
+  @each $side, $origin-y in (bottom: top, top: bottom) {
+    @each $align, $origin-x in (start: left, end: right) {
+      #{$host}[data-current-placement="#{$side}-#{$align}"]::part(popup) {
+        transform-origin: $origin-x $origin-y;
+      }
+    }
+  }
+}
+
+/// Expands a control's `__selected-content-wrapper` while it is `--checked`. `$block` is the BEM block, e.g. `checkbox`.
+@mixin selected-content-reveal($block) {
+  .#{$block}__selected-content-wrapper {
+    display: grid;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    // Hidden content stays out of the tab order once collapsed.
+    visibility: hidden;
+    transition: grid-template-rows 200ms var(--zn-ease-drawer),
+    opacity 120ms ease-out,
+    visibility 0s 200ms;
+  }
+
+  .#{$block}--checked .#{$block}__selected-content-wrapper {
+    grid-template-rows: 1fr;
+    opacity: 1;
+    visibility: visible;
+    transition: grid-template-rows 200ms var(--zn-ease-drawer),
+    opacity 150ms ease-out 50ms,
+    visibility 0s;
+
+    .#{$block}__selected-content-inner {
+      // Unclips once expanded so focus rings and popups inside aren't cut off.
+      overflow: visible;
+      transition: overflow 0s 200ms allow-discrete;
+    }
+  }
+
+  .#{$block}__selected-content-inner {
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  @include reduced-motion {
+    .#{$block}__selected-content-wrapper,
+    .#{$block}--checked .#{$block}__selected-content-wrapper {
+      transition: none;
+    }
+  }
+}
+
+/// Continuous rotation for loading spinners.
+@mixin spin($duration: 1s) {
+  animation: zn-spin $duration linear infinite;
+
+  @at-root {
+    @keyframes zn-spin {
+      to { rotate: 1turn; }
+    }
+  }
+}
+
+/// Indeterminate loader that slides the element across its (overflow: hidden) parent.
+/// Positions are percentages of the element's own width.
+@mixin sweep($duration, $from: -100%, $to: 100%, $easing: linear) {
+  animation: zn-sweep $duration $easing infinite;
+  --_sweep-from: #{$from};
+  --_sweep-to: #{$to};
+
+  @at-root {
+    @keyframes zn-sweep {
+      from { translate: var(--_sweep-from) 0; }
+      to { translate: var(--_sweep-to) 0; }
+    }
+  }
+}

package/scss/mixins/_spacing-mixins.scss

@@ -34,21 +34,22 @@
 }
 
 @mixin gutter {
+  // --zn-page-gutter lets a theme fix the gutter, which it can't reach through --zn-gutter set on :host.
   @container (width > 1024px) {
     :host {
-      --zn-gutter: 16px;
+      --zn-gutter: var(--zn-page-gutter, 16px);
     }
   }
 
   @container (width > 1400px) {
     :host {
-      --zn-gutter: 24px;
+      --zn-gutter: var(--zn-page-gutter, 24px);
     }
   }
 
   @container (width > 1500px) {
     :host {
-      --zn-gutter: 32px;
+      --zn-gutter: var(--zn-page-gutter, 32px);
     }
   }
 }

package/scss/mixins/_tab-indicator-mixins.scss

@@ -0,0 +1,12 @@
+/// Motion for a pill that slides between segmented tabs. On a tab change it squishes slightly, then its
+/// leading edge glides to the new tab while the trailing edge follows on a damped spring, so it stretches
+/// a little and settles. Neither edge travels beyond the new tab, so the pill can't overflow its track.
+@mixin pill-tab-indicator-motion {
+  // Both edges wait for the squish to reach its deepest point
+  --zn-navbar-tab-indicator-delay: 60ms;
+  --zn-navbar-tab-indicator-squash: 0.87;
+  --zn-navbar-tab-indicator-duration: 280ms;
+  --zn-navbar-tab-indicator-easing: cubic-bezier(0.32, 0.72, 0, 1);
+  --zn-navbar-tab-indicator-trail-duration: 400ms;
+  --zn-navbar-tab-indicator-trail-easing: linear(0, 0.044, 0.151, 0.286, 0.428, 0.562, 0.681, 0.78, 0.86, 0.92, 0.964, 0.993, 1.012, 1.023, 1.028, 1.028, 1.026, 1.023, 1.019, 1.015, 1.011, 1.008, 1.005, 1.003, 1.002, 1.001, 1, 1, 1);
+}

package/scss/mixins/_typography-mixins.scss

@@ -9,7 +9,7 @@
  * as margin-block-end.
  */
 @mixin text-style($role, $spacing: false) {
-  font-family: var(--zn-font-sans);
+  font-family: var(--zn-text-#{$role}-font-family, var(--zn-font-sans));
   font-size: var(--zn-text-#{$role}-font-size);
   font-weight: var(--zn-text-#{$role}-font-weight);
   line-height: var(--zn-text-#{$role}-line-height);

package/scss/mixins/index.scss

@@ -1,6 +1,9 @@
 @forward "spacing-mixins";
 @forward "helper-mixins";
 @forward "typography-mixins";
+@forward "tab-indicator-mixins";
+@forward "motion-mixins";
+@use "motion-mixins" as motion;
 
 
 @mixin cosmic-border() {
@@ -28,5 +31,16 @@
     );
 
     animation: rotate-gradient 6s linear infinite;
+
+    @include motion.reduced-motion {
+      animation: none;
+    }
+  }
+
+  @at-root {
+    @keyframes rotate-gradient {
+      from { --rotate: 0deg; }
+      to { --rotate: 360deg; }
+    }
   }
 }

package/scss/shared/_base.scss

@@ -21,11 +21,22 @@ Apply default styles to the document, and shadow documents
 
 html, body {
   background-color: rgba(var(--zn-body), var(--zn-bg-opacity));
-  container-type: size;
   min-height: 100%;
   height: 100%;
 }
 
+// zn-split-pane rewrites this on every drag step; inherited, it would restyle everything in the pane each frame.
+@property --zn-split-pane-size {
+  syntax: '<length-percentage>';
+  inherits: false;
+  initial-value: 50%;
+}
+
+// One root container: each nested container costs Safari a full layout on every restyle beneath it.
+body {
+  container-type: size;
+}
+
 .inline-container {
   container-type: inline-size;
 }
@@ -40,6 +51,23 @@ html, body {
   height: 100%;
   width: 100%;
   max-width: 100%;
+
+  // Room to scroll the end clear of anything hung over the pane's bottom edge, such as pull tabs. As the last flex
+  // item it lands after content that overflows the container, where padding would sit underneath it. A scroll
+  // container inside leaves the room itself. Rubix's app-content holds its page in a shadow root, out of :has()'s
+  // sight, so it is left to whatever scrolls in there.
+  &:not(app-content, :has(zn-scroll-container)) {
+    &::after {
+      content: "";
+      flex: none;
+      height: var(--zn-pane-end-inset, 0px);
+    }
+
+    // Only the outermost app container leaves that room
+    > * {
+      --zn-pane-end-inset: 0px;
+    }
+  }
 }
 
 .inline-app-container, .app-container.inline-app-container, [inline-container] .app-container {
@@ -83,18 +111,21 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
+  font-family: var(--zn-text-h1-font-family, inherit);
   font-size: var(--zn-text-h1-font-size);
   line-height: var(--zn-text-h1-line-height);
   font-weight: var(--zn-text-h1-font-weight);
 }
 
 h2 {
+  font-family: var(--zn-text-h2-font-family, inherit);
   font-size: var(--zn-text-h2-font-size);
   line-height: var(--zn-text-h2-line-height);
   font-weight: var(--zn-text-h2-font-weight);
 }
 
 h3, h4, h5, h6 {
+  font-family: var(--zn-text-h3-font-family, inherit);
   font-size: var(--zn-text-h3-font-size);
   line-height: var(--zn-text-h3-line-height);
   font-weight: var(--zn-text-h3-font-weight);

package/scss/shared/_button-mixin.scss

@@ -5,7 +5,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--zn-base-px);// calc(var(--zn-base-px) + var(--zn-button-gutter));
+  padding: var(--zn-button-padding, var(--zn-base-px));
   margin: auto;
   width: fit-content;
   background-color: rgb(var(--zn-primary));
@@ -19,11 +19,13 @@
   border-color: transparent;
   white-space: nowrap;
 
-  max-height: 36px;
-  height: 36px;
-  min-height: 36px;
+  max-height: var(--zn-button-height, 36px);
+  height: var(--zn-button-height, 36px);
+  min-height: var(--zn-button-height, 36px);
 
+  // A theme darkens on hover by setting --zn-button-mix-color; the default
+  // (transparent) is the same as fading the fill to that alpha.
   &:hover:not([disabled]) {
-    background-color: rgba(var(--zn-primary), 0.8);
+    background-color: color-mix(in srgb, rgb(var(--zn-primary)) var(--zn-button-hover-mix, 80%), var(--zn-button-mix-color, transparent));
   }
 }

package/scss/shared/_table.scss

@@ -23,12 +23,14 @@ table:not(.remarkd-table) {
 
     a {
       cursor: pointer;
-      color: rgb(var(--zn-primary));
+      color: var(--zn-color-primary-fg, rgb(var(--zn-primary)));
     }
   }
 
   tbody tr td {
-    border-top: 1px solid rgb(var(--zn-border-color)) !important;
+    height: var(--zn-table-row-height, auto);
+    border-top: 1px solid var(--zn-table-row-divider-color, rgb(var(--zn-border-color))) !important;
+    font-variant-numeric: var(--zn-table-numeric, normal);
   }
 
   tbody tr:first-of-type td {
@@ -36,22 +38,51 @@ table:not(.remarkd-table) {
   }
 
   th, td {
-    padding: var(--zn-spacing-small) var(--zn-spacing-medium);
+    padding: var(--zn-table-cell-padding, var(--zn-spacing-small) var(--zn-spacing-medium));
     min-width: 90px;
     white-space: nowrap;
   }
 
+  th:first-child, td:first-child {
+    padding-inline-start: var(--zn-table-edge-padding, var(--zn-spacing-medium));
+  }
+
+  th:last-child, td:last-child {
+    padding-inline-end: var(--zn-table-edge-padding, var(--zn-spacing-medium));
+  }
+
   td > span {
     white-space: normal;
   }
 
+  // Keep in step with zn-data-table: a cell with a meta line grows its row rather than filling it edge to edge
+  td:has(.zn-table-meta) {
+    padding-block: var(--zn-table-multiline-padding-block, 10px);
+  }
+
+  // A secondary line under the cell's main text.
+  .zn-table-meta {
+    display: block;
+    margin-top: 2px;
+    font-size: var(--zn-table-meta-font-size, var(--zn-font-size-x-small));
+    color: var(--zn-table-meta-color, var(--zn-text-color-muted));
+  }
+
   th {
     @include m.text-style(button-label);
-    text-transform: capitalize;
+    font-size: var(--zn-table-header-font-size, var(--zn-text-button-label-font-size));
+    color: var(--zn-table-header-color, var(--zn-text-button-label-color));
+    height: var(--zn-table-header-height, auto);
+    text-transform: var(--zn-table-header-transform, capitalize);
     border-bottom: 1px solid rgb(var(--zn-border-color));
   }
 }
 
+// Lets a wide table scroll inside its container instead of widening the page.
+.zn-table-scroll {
+  overflow-x: auto;
+}
+
 .zn-table-fixed {
   table-layout: fixed;
 }

package/scss/shared/nav.scss

@@ -1,5 +1,9 @@
 @use "../../scss/mixins";
 
+.app-navigation {
+  --zn-collapsible-header-padding: var(--zn-base-px);
+}
+
 .zn-nav.zn-transparent {
   background: transparent;
 }

package/scss/shared/shimmer.scss

@@ -88,7 +88,7 @@
     }
 
     &.zn-primary {
-      color: rgb(var(--zn-primary)) !important;
+      color: var(--zn-color-primary-fg, rgb(var(--zn-primary))) !important;
     }
 
     &.zn-accent {

package/scss/table-controls.scss

@@ -0,0 +1,206 @@
+@use "mixins";
+
+.table__tabs {
+  position: relative;
+  display: flex;
+  gap: var(--zn-spacing-x-small);
+  padding: 0 var(--zn-table-edge-padding, var(--zn-spacing-medium));
+  border-bottom: 1px solid rgb(var(--zn-border-color));
+  overflow-x: auto;
+}
+
+// Shares zn-navbar's indicator timing tokens so a theme tunes both together
+.table__tabs__indicator {
+  position: absolute;
+  left: 0;
+  right: 100%;
+  bottom: 0;
+  height: 2px;
+  background-color: rgb(var(--zn-primary));
+  opacity: 0;
+  pointer-events: none;
+
+  --_lead: var(--zn-navbar-tab-indicator-duration, 300ms) var(--zn-navbar-tab-indicator-easing, cubic-bezier(0.4, 0, 0.2, 1)) var(--zn-navbar-tab-indicator-delay, 0ms);
+  --_trail: var(--zn-navbar-tab-indicator-trail-duration, var(--zn-navbar-tab-indicator-duration, 300ms)) var(--zn-navbar-tab-indicator-trail-easing, var(--zn-navbar-tab-indicator-easing, cubic-bezier(0.4, 0, 0.2, 1))) var(--zn-navbar-tab-indicator-trail-delay, var(--zn-navbar-tab-indicator-delay, 0ms));
+}
+
+.table__tabs__indicator--shown {
+  opacity: 1;
+}
+
+.table__tabs__indicator--ready {
+  transition: left var(--_lead), right var(--_lead);
+}
+
+.table__tabs__indicator--ready.table__tabs__indicator--forward {
+  transition: right var(--_lead), left var(--_trail);
+}
+
+.table__tabs__indicator--ready.table__tabs__indicator--backward {
+  transition: left var(--_lead), right var(--_trail);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .table__tabs__indicator--ready,
+  .table__tabs__indicator--ready.table__tabs__indicator--forward,
+  .table__tabs__indicator--ready.table__tabs__indicator--backward {
+    transition: none;
+  }
+}
+
+// Segmented tabs, as zn-navbar[pill]: a grey track with a raised pill that slides to the selected tab
+.table__tabs--pill {
+  @include mixins.pill-tab-indicator-motion;
+  width: fit-content;
+  max-width: calc(100% - 2 * var(--zn-table-edge-padding, var(--zn-spacing-medium)));
+  margin: var(--zn-spacing-small) var(--zn-table-edge-padding, var(--zn-spacing-medium));
+  padding: 2px;
+  gap: 2px;
+  border-bottom: 0;
+  border-radius: 8px;
+  background: var(--zn-color-neutral-100);
+
+  .table__tabs__indicator {
+    top: 2px;
+    bottom: 2px;
+    height: auto;
+    border-radius: 6px;
+    background-color: rgb(var(--zn-panel));
+    box-shadow: var(--zn-shadow-small, 0 1px 3px rgba(13, 23, 56, 0.08), 0 1px 2px rgba(13, 23, 56, 0.04));
+  }
+
+  .table__tab {
+    position: relative;
+    z-index: 1;
+    min-height: calc(var(--zn-density-control-height, 36px) - 6px);
+    padding: 0 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: var(--zn-font-weight-semibold);
+  }
+
+  .table__tab:hover:not([disabled]),
+  .table__tab--active {
+    color: rgb(var(--zn-text));
+  }
+}
+
+// Native buttons, so each property the shared button mixin sets is reset here. They carry no
+// type attribute: the reset's button[type="button"]:not(.button) would outrank this class.
+.table__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  width: auto;
+  height: auto;
+  max-height: none;
+  min-height: 40px;
+  padding: 0 var(--zn-spacing-x-small);
+  border: 0;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+  font: inherit;
+  // Every tab shares the active weight so switching only changes colour, not label width
+  font-weight: var(--zn-font-weight-semibold);
+  text-transform: none;
+  letter-spacing: normal;
+  color: color-mix(in srgb, rgb(var(--zn-text)) 72%, transparent);
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:hover:not([disabled]) {
+    background: none;
+    color: rgb(var(--zn-primary));
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--zn-primary));
+    outline-offset: -4px;
+    border-radius: var(--zn-border-radius);
+  }
+}
+
+.table__tab--active {
+  color: rgb(var(--zn-primary));
+}
+
+// Circular for a single digit, a pill for longer counts
+.table__tab__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 20px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--zn-color-gray-100);
+  color: color-mix(in srgb, rgb(var(--zn-text)) 72%, transparent);
+  font-size: 0.75em;
+  font-weight: var(--zn-font-weight-medium);
+  line-height: 18px;
+}
+
+.table__head__sort {
+  margin: 0;
+  padding: 0;
+  opacity: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.table__head__sort--active {
+  color: rgb(var(--zn-primary));
+}
+
+// Sits on the header's bottom border; the component measures the header into --_head-height
+.table__frame {
+  position: relative;
+}
+
+.table__loader {
+  position: absolute;
+  inset: calc(var(--_head-height, 0px) - 2px) 0 auto;
+  z-index: 4;
+  height: 2px;
+  overflow: hidden;
+  background-color: color-mix(in srgb, rgb(var(--zn-primary)) 20%, transparent);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    left: 0;
+    width: 40%;
+    background-color: rgb(var(--zn-primary));
+    @include mixins.sweep(1.2s, -100%, 250%, ease-in-out);
+  }
+}
+
+// Lit swaps the table, empty state and skeleton for fresh DOM, so each fades in as it arrives
+.table__enter {
+  animation: table-enter var(--zn-transition-medium, 250ms) ease-out;
+}
+
+@keyframes table-enter {
+  from { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .table__loader::before {
+    width: 100%;
+    animation: none;
+  }
+
+  .table__enter {
+    animation: none;
+  }
+}

package/scss/themes/_dark.scss

@@ -263,6 +263,7 @@
   --zn-shadow-medium: 0 6px 18px rgba(0, 0, 0, 0.24);
   --zn-shadow-large: 0 6px 20px rgba(0, 0, 0, 0.24);
   --zn-shadow-x-large: 0 6px 20px rgba(0, 0, 0, 0.34);
+  --zn-menu-submenu-shadow: 0 4px 12px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.20);
 
   /* Inputs */
   --zn-input-background-color: rgb(var(--zn-color-body));
@@ -285,9 +286,6 @@
   /* Panels */
   --zn-panel-background-color: rgb(var(--zn-panel));
 
-  /* Tooltips */
-  --zn-tooltip-background-color: var(--zn-color-neutral-800);
-
   /* tables */
   --zn-table-header-background-color: 27, 27, 30;
 }

package/scss/themes/_index.scss

@@ -1,6 +1,6 @@
 @use "light";
 @use "dark";
-@use "aura";
+@use "openbyte";
 @use "spacing";
 @use "typography";
 @use "utility";