@openziti/ziti-console-lib 1.5.5 → 1.7.0

package/assets/styles/dark.css

@@ -9,6 +9,9 @@ body {
     --stroke: #2A2B31;
     --black: #FFF;
     --shaded: #1D2024;
+    /* pull the list-table header fully to the border/stroke slate so it matches the
+       raised surfaces used elsewhere in dark mode (filter bar, hover) */
+    --lt-header-mix: 100%;
     --formBackground: #1D2024;
     --background: #18191D;
     --mainBackground: var(--navigation);
@@ -38,6 +41,19 @@ body {
     --jse-main-border: var(--inputBorder);
     --jse-delimiter-color: var(--tableText);
     --jse-key-color: var(--tableText);
+    /* page-header resource icon: lift off the dark brand navy so the glyph reads */
+    --lt-header-icon: #7e97ff;
+}
+
+/* list-table accents: the light-mode brand blue and the dark status/type text
+   shades are too dark to read on the dark surface, so lift the text tokens to
+   lighter tints of the same hues. Fills stay subtle; only the labels/links change. */
+.lt-skin {
+    --lt-link: #7e97ff;
+    --lt-icon-active: #7e97ff;
+    --lt-info-text: #9bb0ff;
+    --lt-positive-text: #5fd98a;
+    --lt-warning-text: #f0b45e;
 }
 
 .filters .navigate {

package/assets/styles/global.scss

@@ -55,23 +55,32 @@ body {
      (--primary, --background, --stroke, ...). Consuming apps reskin the table by
      overriding these (or the underlying tokens) in their own global styles. */
   --lt-bg: transparent;
-  --lt-header-bg: var(--background);
-  --lt-header-text: var(--groupText);
-  --lt-header-underline: var(--stroke);
+  --lt-header-bg: var(--background, #f6f7fb);
+  --lt-header-text: var(--groupText, #78859f);
+  --lt-header-underline: var(--stroke, #d4d9e2);
   --lt-row-bg: transparent;
   --lt-row-alt-bg: transparent; /* no zebra — rows read via the hairline divider + hover */
   --lt-row-hover: var(--tableRowHover, rgba(0, 39, 171, 0.06));
   --lt-row-selected: color-mix(in srgb, var(--primary) 8%, transparent);
-  --lt-cell-text: var(--text);
-  --lt-link: var(--primary);
-  --lt-border: var(--stroke);
-  --lt-icon: var(--icon);
-  --lt-icon-active: var(--primary);
+  --lt-cell-text: var(--text, #000);
+  --lt-link: var(--primary, #0027ab);
+  --lt-border: var(--stroke, #d4d9e2);
+  --lt-icon: var(--icon, #658292);
+  --lt-icon-active: var(--primary, #0027ab);
   --lt-row-height: 3.125rem;
-  --lt-radius: var(--inputBorderRadius);
-  --lt-toolbar-height: 2.5rem;
-  --lt-control-bg: var(--background);
+  --lt-radius: var(--inputBorderRadius, 0.375rem);
+  --lt-toolbar-height: 2.3rem;
+  --lt-control-bg: var(--background, #f6f7fb);
   --lt-font: 'Open Sans', sans-serif;
+  /* shared toolbar-control metrics (buttons, menus) so spacing/type stay consistent */
+  --lt-control-gap: 0.4375rem;
+  --lt-control-padding-x: 0.625rem;
+  --lt-control-font-size: 0.8125rem;
+  --lt-control-font-weight: 500;
+  /* one hairline border for every toolbar/footer control so they read as a set */
+  --lt-control-border-width: 1px;
+  /* one gap between toolbar controls so the filter row and the right cluster match */
+  --lt-control-row-gap: 0.4375rem;
   --redShadow: rgba(255, 13, 73, 0.3);
   --redText: #9c0027;
   --shadow: 0rem 0rem 0.5rem 0.125rem rgba(0,0,0,0.08);
@@ -1027,6 +1036,20 @@ lib-form-field-container {
   }
 }
 
+// Reserve room for the copy icon so it clears the input's right edge.
+.form-row:has(> .icon-copy.copy-text) {
+  --copy-icon-width: 1.25rem; // matches .icon-copy.copy-text width
+  --copy-icon-inset: 0.75rem; // gap between the icon and the input's right edge
+
+  .form-field-input {
+    padding-right: calc(var(--copy-icon-width) + var(--copy-icon-inset));
+  }
+
+  > .icon-copy.copy-text {
+    right: var(--copy-icon-inset);
+  }
+}
+
 a {
   &.delete-button,
   &.download-button {
@@ -2290,32 +2313,65 @@ a {
 // --lt-* defaults for that table's subtree only, drawing from ZAC's own tokens so it
 // matches the app and follows its theming; the legacy page (.ag-cell) is untouched.
 .lt-skin {
-  --lt-bg: var(--background);
-  --lt-header-bg: var(--shaded);
-  --lt-header-text: var(--groupText);
-  --lt-header-underline: var(--stroke);
-  --lt-row-bg: var(--background);
+  --lt-bg: var(--background, #f6f7fb);
+  // shade the header off the row surface using the theme's own cool neutral (the
+  // border color), so it stays in the same family as the rest of the table instead of
+  // a flat grey. The theme's --shaded can equal the background (no contrast), so this
+  // derives its own band. --lt-header-mix sets how far to pull toward the border: the
+  // light default is a gentle step; dark themes raise it (see dark.css) so the header
+  // lands on the same raised-surface slate the rest of dark mode uses.
+  --lt-header-bg: color-mix(in srgb, var(--lt-border) var(--lt-header-mix, 42%), var(--lt-row-bg));
+  // the muted group color is too faint on the shaded header band, so pull it toward the
+  // theme text color: darker in light mode, lighter in dark, keeping the cool hue
+  --lt-header-text: color-mix(in srgb, var(--groupText, #78859f) 70%, var(--text));
+  --lt-header-underline: var(--stroke, #d4d9e2);
+  --lt-row-bg: var(--background, #f6f7fb);
   --lt-row-alt-bg: transparent;
-  --lt-row-hover: var(--shaded);
+  --lt-row-hover: var(--shaded, #f6f7fb);
   --lt-row-selected: color-mix(in srgb, var(--primary) 8%, transparent);
-  --lt-cell-text: var(--text);
-  --lt-link: var(--primary);
-  --lt-icon: var(--icon);
-  --lt-icon-active: var(--primary);
-  --lt-border: var(--stroke);
-  --lt-control-bg: var(--background);
-  --lt-radius: 0.375rem;
+  --lt-cell-text: var(--text, #000);
+  --lt-link: var(--primary, #0027ab);
+  --lt-icon: var(--icon, #658292);
+  --lt-icon-active: var(--primary, #0027ab);
+  // status/type accent palette (text + fill base). Defaults are the light-mode
+  // shades; dark.css lifts the text tokens so these pills stay legible on the dark
+  // surface.
+  --lt-info-text: #1e40af;
+  --lt-info: #2563eb;
+  --lt-positive-text: #166534;
+  --lt-positive: #16a34a;
+  --lt-negative: #dc2626;
+  --lt-warning-text: #92400e;
+  --lt-warning: var(--highlighted, #f5a93d);
+  --lt-border: var(--stroke, #d4d9e2);
+  --lt-control-bg: var(--background, #f6f7fb);
+  --lt-radius: 0.3rem;
   --lt-row-height: 3.375rem;
+  // nested tree card: the well it floats on, and a border strong enough to read
+  // against that well (the base --lt-border is too light to show there)
+  --lt-tree-well: color-mix(in srgb, var(--lt-border) 22%, var(--lt-row-bg));
+  --lt-tree-card-border: color-mix(in srgb, var(--lt-border) 70%, var(--lt-icon));
+  // vertical rail drawn beside nested rows in the flat variant (lighter than the card border)
+  --lt-tree-rail: color-mix(in srgb, var(--lt-border) 55%, var(--lt-icon));
+  // drop shadow under the nested card's last row (the lift)
+  --lt-tree-card-shadow: 0 2px 4px color-mix(in srgb, #000 10%, transparent);
+  // left inset of a nested card before its per-depth indent; must match treeCardBaseRem in the component
+  --lt-card-inset: 4rem;
 
   // extra skin knobs; defaults match the values above so ZAC is unchanged
   --lt-control-border: var(--lt-border);
+  // the control-border shorthand, as one token so the many inputs/menus share it
+  --lt-control-border-full: var(--lt-control-border-width) solid var(--lt-control-border, var(--lt-border));
   --lt-header-sorted-text: var(--lt-icon-active);
   --lt-header-sorted-weight: 700;
-  --lt-name-text: var(--tableText);
+  --lt-name-text: var(--tableText, #22222a);
   --lt-name-weight: 700;
   --lt-name-size: 0.8125rem;
   --lt-name-hover: var(--lt-link);
-  --lt-toolbar-margin-y: 0;
+  // more room above the controls (separating them from the page header), less below
+  // (tightening them to the table)
+  --lt-toolbar-margin-top: 1rem;
+  --lt-toolbar-margin-bottom: 0;
   --lt-toolbar-pad-bottom: 0.625rem;
   --lt-container-reserve: 5.625rem;
 }
@@ -2327,6 +2383,15 @@ a {
   --inputBorderRadius: 0.375rem;
 }
 
+// roomier gutters on the skinned list pages so the content breathes away from the
+// panel edges instead of hugging them (base page gutter is 1.25rem)
+.ziti-page-container.lt-skin-page {
+  padding-top: 1.5rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  padding-bottom: 1.25rem;
+}
+
 .lt-skin .lt-scroll {
   border: 1px solid var(--lt-control-border, var(--lt-border));
   border-radius: var(--lt-radius);
@@ -2367,13 +2432,16 @@ a {
 .lt-cell .lt-chip {
   display: inline-flex;
   align-items: center;
+  min-height: 1.75rem;
+  box-sizing: border-box;
   margin-right: 0.25rem;
-  padding: 0.125rem 0.5rem;
-  font-size: 0.75rem;
+  padding: 0.15625rem 0.625rem;
+  font-size: 0.8125rem;
   font-weight: 600;
-  line-height: 1.4;
+  line-height: 1.2;
   color: var(--lt-link);
   background: color-mix(in srgb, var(--lt-link) 12%, transparent);
+  border: none;
   border-radius: 0.25rem;
   vertical-align: middle;
 }
@@ -2383,39 +2451,54 @@ a {
   background: color-mix(in srgb, var(--secondary) 14%, transparent);
 }
 
+// --- table pill standard ---------------------------------------------------
+// The shared look for status-style pills in list tables (Type, Status, Is Admin,
+// Token, Roles): weight 500, pill radius, a shared min-height so pills with and
+// without an icon match, and all contents sized together. The status-style pills
+// (Type, Status, Is Admin, Token) use the compact size - font-size 0.73125rem,
+// min-height 1.575rem; the Roles attribute chips run one step larger (0.8125rem /
+// 1.75rem). The strength comes from contrast, not a heavy fill: a light 14% tint
+// background paired with a dark, saturated label color, and a clearly defined 1px
+// border (accent at 42% mixed into the page background). Each variant keeps its
+// own accent; only the color changes.
+
 // Online/Offline status pill (Status column): online gets a green checkmark
 // (like the Is Admin badge), offline a muted dot. Both icons are drawn via
 // ::before because inline <svg> is stripped from [innerHTML] cellHtml output.
 .lt-cell .lt-status {
   display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
-  padding: 0.1875rem 0.5rem 0.1875rem 0.4375rem;
-  font-size: 0.75rem;
-  font-weight: 600;
+  gap: 0.3375rem;
+  min-height: 1.575rem;
+  box-sizing: border-box;
+  padding: 0.140625rem 0.5625rem 0.140625rem 0.421875rem;
+  font-size: 0.73125rem;
+  font-weight: 500;
   line-height: 1.2;
+  border: 1px solid transparent;
   border-radius: 999px;
 
+  // shared icon slot so the offline dot and the online check badge take the same
+  // width and the labels line up across rows
   &::before {
     content: '';
     flex: 0 0 auto;
+    width: 0.84375rem;
+    height: 0.84375rem;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
   }
 }
 
+// filled green disc with a white check (badge style), not a bare checkmark
 .lt-cell .lt-status-online::before {
-  width: 0.8125rem;
-  height: 0.8125rem;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 7.6 5.7 10.8 11.5 3.6'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%2316a34a'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4.8 8.2 7 10.4 11.2 5.6'/%3E%3C/svg%3E");
 }
 
+// small dot centered in the shared icon slot (keeps the theme color via currentColor)
 .lt-cell .lt-status-offline::before {
-  width: 0.4375rem;
-  height: 0.4375rem;
-  border-radius: 50%;
-  background: currentColor;
+  background: radial-gradient(circle at center, currentColor 0 0.225rem, transparent 0.243rem);
 }
 
 // Color-coded Type pill: Default = blue, Router = green, each with a small icon.
@@ -2424,45 +2507,54 @@ a {
 .lt-type-badge {
   display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
-  padding: 0.1875rem 0.5rem 0.1875rem 0.4375rem;
-  font-size: 0.75rem;
-  font-weight: 600;
+  gap: 0.45rem;
+  min-height: 1.575rem;
+  box-sizing: border-box;
+  padding: 0.140625rem 0.5625rem 0.140625rem 0.421875rem;
+  font-size: 0.73125rem;
+  font-weight: 500;
   line-height: 1.2;
+  // faint accent-tinted outline, matching the page header icon container (.lth-icon)
+  border: 1px solid transparent;
   border-radius: 999px;
 
+  // the icon is the same resource glyph the side nav uses (icomoon font), kept large
+  // so the detailed glyph stays legible at pill size; it inherits the pill text color
   &::before {
-    content: '';
     flex: 0 0 auto;
-    width: 0.8125rem;
-    height: 0.8125rem;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
+    font-family: 'icomoon';
+    font-size: 1.18125rem;
+    line-height: 1;
+    speak: none;
   }
 }
 
 .lt-type-default {
-  color: #1d4ed8;
-  background: color-mix(in srgb, #2563eb 12%, transparent);
+  color: var(--lt-info-text);
+  background: color-mix(in srgb, var(--lt-info) 14%, transparent);
+  border-color: color-mix(in srgb, var(--lt-info) 42%, var(--background));
 
+  // identities resource icon
   &::before {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%232563eb' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3' width='11' height='7' rx='1'/%3E%3Cpath d='M6 12.5h4M8 10v2.5'/%3E%3C/g%3E%3C/svg%3E");
+    content: '\e92e';
   }
 }
 
 .lt-type-router {
-  color: #15803d;
-  background: color-mix(in srgb, #16a34a 12%, transparent);
+  color: var(--lt-positive-text);
+  background: color-mix(in srgb, var(--lt-positive) 14%, transparent);
+  border-color: color-mix(in srgb, var(--lt-positive) 42%, var(--background));
 
+  // routers resource icon
   &::before {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%2316a34a' stroke-width='1.3'%3E%3Cpath d='M8 5.4 4.5 11M8 5.4 11.5 11'/%3E%3C/g%3E%3Cg fill='%2316a34a'%3E%3Ccircle cx='8' cy='4' r='1.7'/%3E%3Ccircle cx='4' cy='12' r='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.7'/%3E%3C/g%3E%3C/svg%3E");
+    content: '\e95d';
   }
 }
 
 .lt-type-other {
   color: var(--lt-cell-text);
   background: color-mix(in srgb, var(--lt-border) 45%, transparent);
+  border-color: color-mix(in srgb, var(--lt-border) 55%, var(--background));
 
   &::before {
     display: none;
@@ -2470,13 +2562,17 @@ a {
 }
 
 .lt-cell .lt-status-online {
-  color: #15803d;
-  background: color-mix(in srgb, #16a34a 12%, transparent);
+  color: var(--lt-positive-text);
+  background: color-mix(in srgb, var(--lt-positive) 14%, transparent);
+  border-color: color-mix(in srgb, var(--lt-positive) 42%, var(--background));
 }
 
 .lt-cell .lt-status-offline {
-  color: var(--groupText);
-  background: color-mix(in srgb, var(--groupText) 14%, transparent);
+  // darken the muted group color toward the theme text (darker in light, lighter
+  // in dark) so the label contrasts strongly with its own fill
+  color: color-mix(in srgb, var(--groupText) 55%, var(--text));
+  background: color-mix(in srgb, var(--groupText) 16%, transparent);
+  border-color: color-mix(in srgb, var(--groupText) 42%, var(--background));
 }
 
 .cert {