@kubex/zinc 1.1.99 → 1.1.101

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.99",
+  "version": "1.1.101",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/scss/_root.scss

@@ -78,6 +78,22 @@
 :root {
   --zn-primary: var(--zn-color-primary);
 
+  // Ink colours — text and icons painted ON TOP of a filled colour surface
+  // (solid buttons, active menu items, badges). Every theme so far uses a
+  // colour dark enough for white ink, so white is the default; a theme with a
+  // light or high-luminance accent (neon lime, amber, mint) must override the
+  // matching token or its filled controls become unreadable.
+  //
+  // Declared as RGB triplets so they compose with rgba() the same way the rest
+  // of the palette does. Components that consume them are inside shadow roots
+  // that do not load this file, so they always pass a `255, 255, 255` fallback.
+  --zn-color-on-primary: 255, 255, 255;
+  --zn-color-on-info: 255, 255, 255;
+  --zn-color-on-success: 255, 255, 255;
+  --zn-color-on-warning: 255, 255, 255;
+  --zn-color-on-error: 255, 255, 255;
+  --zn-color-on-accent: 255, 255, 255;
+
   // Brand Colors
   --zn-red: 237, 84, 109;
   --zn-blue: 100, 117, 242;

package/scss/mixins/_typography-mixins.scss

@@ -15,6 +15,7 @@
   line-height: var(--zn-text-#{$role}-line-height);
   color: var(--zn-text-#{$role}-color);
   text-transform: var(--zn-text-#{$role}-transform);
+  letter-spacing: var(--zn-text-#{$role}-letter-spacing, normal);
 
   @if $spacing {
     margin-block-end: var(--zn-text-#{$role}-spacing);

package/scss/shared/_button.scss

@@ -2,7 +2,9 @@
 @use '../variables';
 
 @mixin button {
-  border-radius: var(--zn-border-radius);
+  // Buttons take their own radius token so a theme can make controls pills
+  // without reshaping panels, inputs and dialogs at the same time.
+  border-radius: var(--zn-button-border-radius, var(--zn-border-radius));
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -10,7 +12,7 @@
   margin: auto;
   width: fit-content;
   background-color: rgb(var(--zn-primary));
-  color: rgba(255, 255, 255, 0.9);
+  color: rgba(var(--zn-color-on-primary, 255, 255, 255), 0.9);
   font-size: var(--zn-text-button-label-font-size);
   font-weight: var(--zn-text-button-label-font-weight);
   line-height: var(--zn-text-button-label-line-height);

package/scss/themes/_typography.scss

@@ -12,6 +12,7 @@
  *   --zn-text-<role>-font-weight
  *   --zn-text-<role>-color
  *   --zn-text-<role>-transform
+ *   --zn-text-<role>-letter-spacing
  *
  * All roles use the sans family (--zn-font-sans). Apply a role
  * in a component with the text-style() mixin from scss/mixins.
@@ -59,5 +60,6 @@ $text-styles: (
       --zn-text-#{$role}-color: var(--zn-text-color);
     }
     --zn-text-#{$role}-transform: #{map.get($style, "transform")};
+    --zn-text-#{$role}-letter-spacing: var(--zn-letter-spacing-normal, normal);
   }
 }

package/src/components/button/button.scss

@@ -17,7 +17,12 @@
 .button {
   @include shared.button;
 
+  // --btn-color paints the fill; --btn-ink is the text/icon colour that sits
+  // on top of it. They are declared as a pair so a theme with a light accent
+  // (e.g. neon lime) can re-point the ink via --zn-color-on-* without any
+  // component-level override.
   --btn-color: var(--zn-primary);
+  --btn-ink: var(--zn-color-on-primary, 255, 255, 255);
   --notification-color: rgb(var(--zn-color-error));
 
   border-width: var(--zn-button-border-width, 1px);
@@ -31,18 +36,22 @@
 
   &.button--info {
     --btn-color: var(--zn-color-info);
+    --btn-ink: var(--zn-color-on-info, 255, 255, 255);
   }
 
   &.button--error {
     --btn-color: var(--zn-color-error);
+    --btn-ink: var(--zn-color-on-error, 255, 255, 255);
   }
 
   &.button--warning {
     --btn-color: var(--zn-color-warning);
+    --btn-ink: var(--zn-color-on-warning, 255, 255, 255);
   }
 
   &.button--success {
     --btn-color: var(--zn-color-success);
+    --btn-ink: var(--zn-color-on-success, 255, 255, 255);
   }
 
   &__label--hidden {
@@ -131,7 +140,7 @@
 
   background-color: rgba(var(--btn-color));
   border-color: var(--zn-button-border-color, rgb(var(--btn-color)));
-  color: rgba(255, 255, 255, 0.9);
+  color: rgba(var(--btn-ink), 0.9);
 
   &:hover:not([disabled]) {
     background-color: rgba(var(--btn-color), 0.8);
@@ -154,7 +163,7 @@
 
   &:hover:not([disabled]), &:active:not([disabled]) {
     background-color: rgb(var(--btn-color));
-    color: white;
+    color: rgb(var(--btn-ink));
   }
 
   &.button--secondary {
@@ -219,9 +228,10 @@
 
 .button--star {
   --btn-color: var(--zn-orange);
+  --btn-ink: var(--zn-color-on-warning, 255, 255, 255);
   background-color: rgb(var(--btn-color));
   border-color: var(--zn-button-border-color, rgb(var(--btn-color)));
-  color: white;
+  color: rgb(var(--btn-ink));
   opacity: 1 !important;
 
   &:hover:not([disabled]) {
@@ -239,7 +249,7 @@
 
     &:hover:not([disabled]), &:active:not([disabled]) {
       background-color: rgba(var(--btn-color));
-      color: white;
+      color: rgb(var(--btn-ink));
     }
   }
 }

package/src/components/header/header.scss

@@ -17,6 +17,8 @@
   &__caption {
     font-weight: var(--zn-text-h1-font-weight);
     font-size: var(--zn-text-h1-font-size);
+    text-transform: var(--zn-text-h1-transform, none);
+    letter-spacing: var(--zn-text-h1-letter-spacing, normal);
     color: rgba(var(--zn-text-panel-title), 100%);
     line-height: var(--zn-icon-size, 20px);
     margin: 0;

package/src/components/menu-item/menu-item.scss

@@ -276,33 +276,36 @@ zn-popup::part(popup) {
 }
 
 
+// Colour variants fill the row on hover, so the label switches to the matching
+// --zn-color-on-* ink rather than a hardcoded white (which disappears on a
+// light accent such as velocity's neon lime).
 .menu-item--primary {
   --color: rgba(var(--zn-primary), 0.9);
-  --hover-color: #ffffff;
+  --hover-color: rgb(var(--zn-color-on-primary, 255, 255, 255));
   --hover-bg: rgba(var(--zn-primary), 0.9);
 }
 
 .menu-item--error {
   --color: rgb(var(--zn-color-error));
-  --hover-color: #ffffff;
+  --hover-color: rgb(var(--zn-color-on-error, 255, 255, 255));
   --hover-bg: rgba(var(--zn-color-error), 0.9);
 }
 
 .menu-item--info {
   --color: rgb(var(--zn-color-info));
-  --hover-color: #ffffff;
+  --hover-color: rgb(var(--zn-color-on-info, 255, 255, 255));
   --hover-bg: rgba(var(--zn-color-info), 0.9);
 }
 
 .menu-item--warning {
   --color: rgb(var(--zn-color-warning));
-  --hover-color: #ffffff;
+  --hover-color: rgb(var(--zn-color-on-warning, 255, 255, 255));
   --hover-bg: rgba(var(--zn-color-warning), 0.9);
 }
 
 .menu-item--success {
   --color: rgb(var(--zn-color-success));
-  --hover-color: #ffffff;
+  --hover-color: rgb(var(--zn-color-on-success, 255, 255, 255));
   --hover-bg: rgba(var(--zn-color-success), 0.9);
 }
 

package/src/components/page/page.scss

@@ -8,8 +8,16 @@
   height: 100%;
   min-height: 0;
   container-type: inline-size;
+  // Optional decorative layer tiled across the page canvas (header + content).
+  // A theme sets it to an image and its tile size; unset it costs nothing.
+  --zn-page-texture: none;
+  --zn-page-texture-size: auto;
   --zn-page-content-background: var(--zn-body);
   --zn-page-header-background: var(--zn-page-surface-background, var(--zn-page-background, var(--zn-body)));
+  // A modal shell overlays its own close button at --zn-base-gap from the page edge;
+  // these describe it so the header can keep clear of it.
+  --zn-page-closer-size: 36px;
+  --zn-page-closer-gap: var(--zn-spacing-x-small);
 }
 
 :host([panel]) {
@@ -30,7 +38,11 @@
   top: 0;
   z-index: 2;
   box-sizing: border-box;
-  background: rgba(var(--zn-page-header-background), 95%);
+  background-color: rgba(var(--zn-page-header-background), 95%);
+  background-image: var(--zn-page-texture);
+  background-repeat: repeat;
+  background-position: center top;
+  background-size: var(--zn-page-texture-size);
 
   &::after {
     content: '';
@@ -143,6 +155,7 @@
     justify-content: space-between;
     gap: 2px;
     max-width: 100%;
+    min-width: 0;
     min-height: 36px;
 
     a {
@@ -160,19 +173,21 @@
     gap: var(--zn-spacing-x-small);
     min-height: 36px;
     flex-shrink: 1;
+    min-width: 0;
     max-width: 100%;
   }
 
   &__right {
     flex-grow: 1;
-    flex-shrink: 1;
+    flex-shrink: 0;
     overflow: hidden;
-    min-width: 20px;
   }
 
   &__caption {
     font-weight: var(--zn-text-h1-font-weight);
     font-size: var(--zn-text-h1-font-size);
+    text-transform: var(--zn-text-h1-transform, none);
+    letter-spacing: var(--zn-text-h1-letter-spacing, normal);
     color: rgba(var(--zn-text-panel-title), 100%);
     line-height: var(--zn-spacing-medium);
     margin: 0;
@@ -188,6 +203,7 @@
   &__description {
     @include wc.text-style(subheading);
     display: block;
+    overflow-wrap: anywhere;
   }
 
   .breadcrumb {
@@ -303,7 +319,11 @@
   overflow: visible;
   box-sizing: border-box;
   padding: 0 var(--zn-base-gap) var(--zn-base-gap);
-  background: rgb(var(--zn-page-content-background, var(--zn-body)));
+  background-color: rgb(var(--zn-page-content-background, var(--zn-body)));
+  background-image: var(--zn-page-texture);
+  background-repeat: repeat;
+  background-position: center top;
+  background-size: var(--zn-page-texture-size);
 }
 
 .page__tabs .page__content {
@@ -353,6 +373,12 @@ zn-navbar {
   padding-inline: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
 }
 
+// The gutter shrinks to 0 on narrow containers, which would run the header actions
+// under the closer. Reserving the closer's own footprint holds the gap steady instead.
+:host([modal]) .header {
+  padding-inline-end: calc(var(--zn-base-gap, 0) + var(--zn-page-closer-size) + var(--zn-page-closer-gap));
+}
+
 :host zn-navbar {
   &::part(navbar) {
     padding-inline: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));

package/src/components/tile/tile.scss

@@ -10,7 +10,6 @@
   align-items: center;
   justify-content: space-between;
   min-height: 48px;
-  padding: var(--zn-base-gap);
   column-gap: var(--zn-spacing-large);
 
   font-size: var(--zn-text-table-content-font-size);
@@ -24,7 +23,6 @@
   &--has-properties,
   &--has-actions {
     padding-inline: var(--zn-base-gap);
-    min-height: 85px;
   }
 
   &--has-description#{&}--has-caption {

package/src/components/toggle/toggle.scss

@@ -31,7 +31,11 @@
   border-radius: 12px;
   align-items: center;
   background-color: rgb(var(--zn-color-tab));
-  border: 0.92px solid rgb(var(--zn-color-tab));
+  // The unchecked track needs an edge of its own. --zn-color-tab sits close to
+  // the surface behind it on dark themes, which left the switch reading as a
+  // free-floating knob with no discoverable control boundary. The checked state
+  // below repaints the border in the accent colour.
+  border: 0.92px solid rgb(var(--zn-border-color));
   margin: var(--zn-toggle-margin);
   transition: color .2s ease-in-out, background-color .4s ease-in-out, border-color .2s ease-in-out;
 }
@@ -46,6 +50,9 @@
 
   .switch__control {
     left: calc(100% - 20.32px - 0.92px);
+    // The knob carries the on/off state, so it takes the on-primary ink: a
+    // white knob on a light accent (neon lime, amber) is invisible.
+    background: rgb(var(--zn-color-on-primary, 255, 255, 255));
   }
 }
 

package/src/components/tooltip/tooltip.scss

@@ -35,7 +35,10 @@
   background-color: var(--arrow-color);
   text-align: start;
   white-space: normal;
-  color: white;
+  // The bubble is painted in --arrow-color, which resolves to --zn-color-text,
+  // so the ink has to be the surface colour rather than a fixed white — on any
+  // dark theme the text colour is light and white-on-light is unreadable.
+  color: rgb(var(--zn-color-base, 255, 255, 255));
   padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
   pointer-events: none;
   user-select: none;