@kubex/zinc 1.0.118 → 1.1.0

package/scss/shared/_base.scss

@@ -8,8 +8,7 @@ Apply default styles to the document, and shadow documents
 
   font-feature-settings: normal;
   font-variation-settings: normal;
-  font-size: 14px;
-  line-height: 1.5;
+  font-size: var(--zn-text-paragraph-font-size);
 
   -webkit-text-size-adjust: 100%;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
@@ -71,33 +70,32 @@ small {
   visibility: hidden;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-weight: var(--zn-font-weight-medium);
-  color: rgb(var(--zn-text-heading));
-}
-
-h6 {
-  font-size: var(--zn-font-size-x-small);
-}
-
-h5 {
-  font-size: var(--zn-font-size-small);
+p {
+  font-size: var(--zn-text-paragraph-font-size);
+  line-height: var(--zn-text-paragraph-line-height);
+  font-weight: var(--zn-text-paragraph-font-weight);
 }
 
-h4 {
-  font-size: var(--zn-font-size-medium);
+h1, h2, h3, h4, h5, h6 {
+  color: rgb(var(--zn-text-heading));
 }
 
-h3 {
-  font-size: var(--zn-font-size-large);
+h1 {
+  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-size: var(--zn-font-size-x-large);
+  font-size: var(--zn-text-h2-font-size);
+  line-height: var(--zn-text-h2-line-height);
+  font-weight: var(--zn-text-h2-font-weight);
 }
 
-h1 {
-  font-size: var(--zn-font-size-2x-large);
+h3, h4, h5, h6 {
+  font-size: var(--zn-text-h3-font-size);
+  line-height: var(--zn-text-h3-line-height);
+  font-weight: var(--zn-text-h3-font-weight);
 }
 
 kbd {

package/scss/shared/_button.scss

@@ -2,7 +2,7 @@
 @use '../variables';
 
 @mixin button {
-  border-radius: var(--zn-border-radius-medium);
+  border-radius: var(--zn-border-radius);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -11,12 +11,14 @@
   width: fit-content;
   background-color: rgb(var(--zn-primary));
   color: rgba(255, 255, 255, 0.9);
-  font-weight: 600;
+  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);
+  text-transform: var(--zn-text-button-label-transform);
   cursor: pointer;
   vertical-align: middle;
   border-color: transparent;
   white-space: nowrap;
-  line-height: 20px;
 
   max-height: 36px;
   height: 36px;

package/scss/shared/_table.scss

@@ -8,9 +8,12 @@ table:not(.remarkd-table) {
   max-width: 100%;
   table-layout: auto;
   text-align: left;
+  font-size: var(--zn-text-table-content-font-size);
+  line-height: var(--zn-text-table-content-line-height);
+  font-weight: var(--zn-text-table-content-font-weight);
 
   thead {
-    font-weight: 500;
+    font-weight: var(--zn-font-weight-medium);
   }
 
   tbody {

package/scss/shared/layout.scss

@@ -212,7 +212,7 @@
 .zn-panel {
   background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
   border: 1px solid rgb(var(--zn-border-color));
-  border-radius: var(--zn-border-radius-large);
+  border-radius: var(--zn-border-radius);
   --zn-page-surface-background: var(--zn-panel);
 }
 
@@ -296,7 +296,7 @@
 }
 
 .zn-panel-bar--pill {
-  border-radius: var(--zn-border-radius-large);
+  border-radius: var(--zn-border-radius);
   border: 1px solid rgb(var(--zn-border-color));
 }
 

package/scss/themes/_index.scss

@@ -1,3 +1,5 @@
 @use "light";
 @use "dark";
+@use "spacing";
+@use "typography";
 @use "utility";

package/scss/themes/_light.scss

@@ -110,10 +110,8 @@
   --zn-color-neutral-1000: hsl(0, 0%, 0%); // used: docs/assets/styles/docs.css:502 (+2 more)
 
   /* Border radii */
-  --zn-border-radius-small: 0.1875rem; // 3px
-  --zn-border-radius-medium: 0.325rem; // 5.2px
-  --zn-border-radius-large: 0.5rem; // 8px
-  --zn-border-radius-x-large: 1rem; // 16px
+  --zn-border-radius: 6px;
+  --zn-border-radius-small: 2px;
   --zn-border-radius-circle: 50%;
   --zn-border-radius-pill: 9999px;
 
@@ -123,27 +121,6 @@
   --zn-shadow-large: 0 6px 20px rgba(0, 0, 0, 0.15);
   --zn-shadow-x-large: 0 6px 20px rgba(0, 0, 0, 0.25);
 
-  --zn-spacing-3x-small: 0.125rem; // 2px
-  --zn-spacing-2x-small: 0.25rem; // 4px
-  --zn-spacing-x-small: 0.5rem; // 8px
-  --zn-spacing-small: 0.75rem; // 12px
-  --zn-spacing-medium: 1rem; // 16px
-  --zn-spacing-large: 1.25rem; // 20px
-  --zn-spacing-x-large: 1.75rem; // 28px
-  --zn-spacing-2x-large: 2.25rem; // 36px
-  --zn-spacing-3x-large: 3rem; // 48px
-  --zn-spacing-4x-large: 4.5rem; // 72px
-
-  /* Fixed Spaces */
-  --zn-spacing-narrow-bar: 45px;
-  --zn-spacing-bar: 60px;
-  --zn-spacing-tile: 80px;
-  --zn-spacing-sidenav: 320px;
-  --zn-spacing-small-panel: 200px;
-  --zn-spacing-medium-panel: 320px;
-  --zn-spacing-panel: 360px;
-  --zn-spacing-lside: 460px; // Not sure what this is @mressex figure it out. (I never did)
-
   /** Container Sizes */
   --zn-container: var(--zn-container-hd);
   --zn-container-default: 100%;
@@ -195,18 +172,15 @@
   --zn-font-weight-bold: 700;
 
   /* Letter spacings */
-  --zn-letter-spacing-denser: -0.03em;
-  --zn-letter-spacing-dense: -0.015em;
   --zn-letter-spacing-normal: normal;
-  --zn-letter-spacing-loose: 0.075em;
-  --zn-letter-spacing-looser: 0.15em;
+  --zn-letter-spacing-loose: 0.5px;
 
   /* Line heights */
-  --zn-line-height-denser: 1;
-  --zn-line-height-dense: 1.4;
-  --zn-line-height-normal: 1.8;
-  --zn-line-height-loose: 2.2;
-  --zn-line-height-looser: 2.6;
+  --zn-line-height-denser: 1; // 16px
+  --zn-line-height-dense: 1.5; // 24px
+  --zn-line-height-normal: 2; // 32px
+  --zn-line-height-loose: 2.5; // 40px
+  --zn-line-height-looser: 3; // 48px
 
   /* Focus rings */
   --zn-focus-ring-color: var(--zn-color-primary-600);
@@ -246,29 +220,30 @@
   --zn-input-required-content-color: var(--zn-input-label-color);
 
   /* Input border radii */
-  --zn-input-border-radius-x-small: var(--zn-border-radius-medium);
-  --zn-input-border-radius-small: var(--zn-border-radius-medium);
-  --zn-input-border-radius-medium: var(--zn-border-radius-medium);
-  --zn-input-border-radius-large: var(--zn-border-radius-medium);
+  --zn-input-border-radius-x-small: var(--zn-border-radius);
+  --zn-input-border-radius-small: var(--zn-border-radius);
+  --zn-input-border-radius-medium: var(--zn-border-radius);
+  --zn-input-border-radius-large: var(--zn-border-radius);
 
   /* Input fonts */
   --zn-input-font-family: var(--zn-font-sans);
-  --zn-input-font-weight: var(--zn-font-weight-normal);
+  --zn-input-font-weight: var(--zn-text-input-content-font-weight);
   --zn-input-font-size-x-small: var(--zn-font-size-x-small);
   --zn-input-font-size-small: var(--zn-font-size-small);
-  --zn-input-font-size-medium: var(--zn-font-size-medium);
+  --zn-input-font-size-medium: var(--zn-text-input-content-font-size);
   --zn-input-font-size-large: var(--zn-font-size-large);
+  --zn-input-line-height: var(--zn-text-input-content-line-height);
   --zn-input-letter-spacing: var(--zn-letter-spacing-normal);
 
   /* Input colors */
-  --zn-input-color: var(--zn-color-neutral-800);
+  --zn-input-color: var(--zn-text-input-content-color);
   --zn-input-color-hover: var(--zn-color-neutral-800);
   --zn-input-color-focus: var(--zn-color-neutral-700);
   --zn-input-color-disabled: var(--zn-color-neutral-800);
   --zn-input-icon-color: var(--zn-color-neutral-500);
   --zn-input-icon-color-hover: var(--zn-color-neutral-600);
   --zn-input-icon-color-focus: var(--zn-color-neutral-600);
-  --zn-input-placeholder-color: var(--zn-color-neutral-500);
+  --zn-input-placeholder-color: var(--zn-text-input-placeholder-color);
   --zn-input-placeholder-color-disabled: var(--zn-color-neutral-600);
 
   /* Input spacing */
@@ -281,9 +256,11 @@
   --zn-input-focus-ring-offset: 0;
 
   --zn-input-label-font-size-small: var(--zn-font-size-small);
-  --zn-input-label-font-size-medium: var(--zn-font-size-medium);
+  --zn-input-label-font-size-medium: var(--zn-text-input-label-font-size);
   --zn-input-label-font-size-large: var(--zn-font-size-large);
-  --zn-input-label-color: var(--zn-color-neutral-900);
+  --zn-input-label-font-weight: var(--zn-text-input-label-font-weight);
+  --zn-input-label-line-height: var(--zn-text-input-label-line-height);
+  --zn-input-label-color: var(--zn-text-input-label-color);
 
   /* Help text */
   --zn-input-help-text-font-size-small: var(--zn-font-size-x-small);
@@ -303,7 +280,7 @@
   --zn-panel-border-color: var(--zn-color-neutral-200);
   --zn-panel-border-width: 1px;
 
-  --zn-tooltip-border-radius: var(--zn-border-radius-medium);
+  --zn-tooltip-border-radius: var(--zn-border-radius);
   --zn-tooltip-background-color: var(--zn-color-neutral-900);
   --zn-tooltip-color: var(--zn-color-neutral-0);
   --zn-tooltip-font-family: var(--zn-font-sans);

package/scss/themes/_spacing.scss

@@ -0,0 +1,44 @@
+@use "sass:map";
+
+/**************************************************************
+ * Spacing
+ *
+ * Uniform spacing tokens. The scale is built on iterations of
+ * the 8px base unit (--zn-spacing-unit); 3x-small and 2x-small
+ * are quarter/half steps for hairline gaps.
+ *
+ * Emits --zn-spacing-<name> for every step in $spacing-scale.
+ *************************************************************/
+
+$spacing-unit: 8px;
+
+$spacing-scale: (
+  "3x-small": 0.25, // 2px
+  "2x-small": 0.5, // 4px
+  "x-small": 1, // 8px
+  "small": 2, // 16px
+  "medium": 3, // 24px
+  "large": 4, // 32px
+  "x-large": 5, // 40px
+  "2x-large": 6, // 48px
+  "3x-large": 7, // 56px
+  "4x-large": 9, // 72px
+);
+
+:root {
+  --zn-spacing-unit: #{$spacing-unit};
+
+  @each $name, $multiplier in $spacing-scale {
+    --zn-spacing-#{$name}: #{$multiplier * $spacing-unit};
+  }
+
+  /* Fixed spaces */
+  --zn-spacing-narrow-bar: 45px;
+  --zn-spacing-bar: 60px;
+  --zn-spacing-tile: 80px;
+  --zn-spacing-sidenav: 320px;
+  --zn-spacing-small-panel: 200px;
+  --zn-spacing-medium-panel: 320px;
+  --zn-spacing-panel: 360px;
+  --zn-spacing-lside: 460px;
+}

package/scss/themes/_typography.scss

@@ -0,0 +1,62 @@
+@use "sass:map";
+
+/**************************************************************
+ * Text Styles
+ *
+ * Uniform, role-based typography tokens. Every role emits the
+ * same six custom properties:
+ *
+ *   --zn-text-<role>-font-size
+ *   --zn-text-<role>-line-height
+ *   --zn-text-<role>-spacing       (paragraph spacing — apply as margin-block-end)
+ *   --zn-text-<role>-font-weight
+ *   --zn-text-<role>-color
+ *   --zn-text-<role>-transform
+ *
+ * All roles use the sans family (--zn-font-sans). Apply a role
+ * in a component with the text-style() mixin from scss/mixins.
+ *************************************************************/
+
+$text-styles: (
+  "paragraph": ("size": 14px, "line": 21px, "spacing": 21px, "weight": normal, "color": default, "transform": none),
+  "table-content": ("size": 14px, "line": 16px, "spacing": 15px, "weight": normal, "color": default, "transform": none),
+  "chat": ("size": 16px, "line": 24px, "spacing": 15px, "weight": normal, "color": default, "transform": none),
+  "h1": ("size": 16px, "line": 16px, "spacing": 18px, "weight": semibold, "color": default, "transform": none),
+  "h2": ("size": 14px, "line": 16px, "spacing": 15px, "weight": semibold, "color": default, "transform": none),
+  "h3": ("size": 11px, "line": 16px, "spacing": 15px, "weight": semibold, "color": default, "transform": none),
+  "subheading": ("size": 14px, "line": 16px, "spacing": 15px, "weight": normal, "color": muted, "transform": none),
+  "subheading-small": ("size": 13px, "line": 16px, "spacing": 15px, "weight": normal, "color": muted, "transform": none),
+  "input-placeholder": ("size": 14px, "line": 24px, "spacing": 18px, "weight": normal, "color": muted, "transform": none),
+  "input-content": ("size": 14px, "line": 24px, "spacing": 18px, "weight": normal, "color": default, "transform": none),
+  "input-label": ("size": 14px, "line": 16px, "spacing": 15px, "weight": semibold, "color": default, "transform": none),
+  "chart-minor": ("size": 14px, "line": 16px, "spacing": 15px, "weight": semibold, "color": muted, "transform": none),
+  "chart-major": ("size": 21px, "line": 16px, "spacing": 18px, "weight": normal, "color": default, "transform": none),
+  "button-label": ("size": 13px, "line": 16px, "spacing": 18px, "weight": semibold, "color": default, "transform": uppercase),
+  "chip": ("size": 10px, "line": 16px, "spacing": 15px, "weight": semibold, "color": default, "transform": uppercase),
+  "navbar-link": ("size": 16px, "line": 16px, "spacing": 18px, "weight": semibold, "color": muted, "transform": none),
+  "tab-link": ("size": 14px, "line": 16px, "spacing": 15px, "weight": semibold, "color": muted, "transform": none),
+  "tab-link-active": ("size": 14px, "line": 16px, "spacing": 15px, "weight": semibold, "color": default, "transform": none),
+  "menu-link": ("size": 14px, "line": 16px, "spacing": 15px, "weight": normal, "color": muted, "transform": none),
+  "notification": ("size": 9px, "line": 11px, "spacing": 0, "weight": semibold, "color": white, "transform": none),
+);
+
+:root {
+  /* Text colors (themed via --zn-color-text / --zn-color-muted-text in _root.scss) */
+  --zn-text-color: rgb(var(--zn-color-text)); // light: rgba(33, 33, 33, 1)
+  --zn-text-color-muted: rgb(var(--zn-color-muted-text)); // light: rgba(125, 119, 146, 1)
+
+  @each $role, $style in $text-styles {
+    --zn-text-#{$role}-font-size: #{map.get($style, "size")};
+    --zn-text-#{$role}-line-height: #{map.get($style, "line")};
+    --zn-text-#{$role}-spacing: #{map.get($style, "spacing")};
+    --zn-text-#{$role}-font-weight: var(--zn-font-weight-#{map.get($style, "weight")});
+    @if map.get($style, "color") == muted {
+      --zn-text-#{$role}-color: var(--zn-text-color-muted);
+    } @else if map.get($style, "color") == white {
+      --zn-text-#{$role}-color: #fff;
+    } @else {
+      --zn-text-#{$role}-color: var(--zn-text-color);
+    }
+    --zn-text-#{$role}-transform: #{map.get($style, "transform")};
+  }
+}

package/src/components/animated-button/README.md

@@ -183,7 +183,7 @@ The component uses CSS custom properties from the Zinc design system:
 - `--zn-color-error`: Error color (red)
 - `--zn-transition-medium`: Transition duration for color changes
 - `--zn-transition-fast`: Transition duration for interactions
-- `--zn-border-radius-medium`: Border radius
+- `--zn-border-radius`: Border radius
 
 ### CSS Parts
 

package/src/components/button/button.component.ts

@@ -11,7 +11,7 @@ import ZincElement from '../../internal/zinc-element';
 import ZnDropdown from "../dropdown";
 import ZnIcon from "../icon";
 import ZnTooltip from "../tooltip";
-import type {IconColor} from "../icon";
+import type {IconColor, IconLibrary} from "../icon";
 import type {ZincFormControl} from '../../internal/zinc-element';
 
 import styles from './button.scss';
@@ -67,7 +67,22 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
   @property({type: Boolean}) disabled = false;
   @property({type: Boolean}) grow = false;
   @property({type: Boolean}) square = false;
-  @property({type: Boolean, attribute: 'icon-button'}) iconButton = false;
+  /** Renders the button as an icon button (40x36). Pass `small` for the
+   * 36x36 variant or `round` for a 36x36 circle: `icon-button`,
+   * `icon-button="small"` or `icon-button="round"`. */
+  @property({
+    attribute: 'icon-button',
+    converter: {
+      fromAttribute: (value: string | null) => (value === 'small' || value === 'round') ? value : value !== null,
+      toAttribute: (value: boolean | 'small' | 'round') =>
+        (value === 'small' || value === 'round') ? value : (value ? '' : null)
+    }
+  }) iconButton: boolean | 'small' | 'round' = false;
+  /** With `icon-button`, removes the white background and border while
+   * keeping the button's size. */
+  @property({type: Boolean}) plain = false;
+  /** Disables the hover background, for contexts where the tint doesn't fit. */
+  @property({type: Boolean, attribute: 'no-hover'}) noHover = false;
   @property({type: Boolean, attribute: 'panel-bg'}) panelBackground = false;
 
   @property({attribute: 'dropdown-closer', type: Boolean}) dropdownCloser = false;
@@ -83,6 +98,8 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
   @property({attribute: "icon-position"}) iconPosition: 'left' | 'right' = 'left';
   @property({attribute: "icon-size"}) iconSize: string;
   @property({attribute: "icon-color"}) iconColor: IconColor;
+  @property({attribute: "icon-fill"}) iconFill: IconColor;
+  @property({attribute: "icon-library"}) iconLibrary: IconLibrary;
   @property() type: 'button' | 'submit' | 'reset';
 
   @property() name: string;
@@ -259,7 +276,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
       case 'primary':
         return 'rgb(var(--zn-primary))';
       case 'secondary':
-        return 'var(--zn-color-neutral-500)';
+        return 'rgb(var(--zn-text))';
       case 'error':
         return 'rgb(var(--zn-color-error))';
       case 'info':
@@ -348,7 +365,8 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
     const showCancel = this.loading && this.autoClick;
     const icon = this.icon && !this.loading ? html`
         <zn-icon part="icon" src="${this.icon}" id="xy2" size="${this.iconSize ? this.iconSize : 20}"
-                 color="${ifDefined(this.iconColor)}"></zn-icon>`
+                 color="${ifDefined(this.iconColor)}" fill="${ifDefined(this.iconFill)}"
+                 library="${ifDefined(this.iconLibrary)}"></zn-icon>`
       : '';
     const tag = isLink ? literal`a` : literal`button`;
     const iconButtonStyles = this.iconButton ? {
@@ -372,7 +390,11 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
           'button--star': this.color === 'star',
           'button--outline': this.outline,
           'button--text': (this.text && !this.outline),
-          'button--icon-button': this.iconButton,
+          'button--icon-button': !!this.iconButton,
+          'button--plain': !!this.iconButton && this.plain,
+          'button--no-hover': this.noHover,
+          'button--icon-button-small': this.iconButton === 'small',
+          'button--icon-button-round': this.iconButton === 'round',
           'button--grow': this.grow,
           'button--standard': !this.outline && !this.text,
           'button--with-icon': this.icon,

package/src/components/button/button.scss

@@ -50,18 +50,13 @@
   }
 }
 
-.button.button--icon-button {
-  max-height: 20px;
-  height: 20px;
-  min-height: 20px;
-}
-
 .button.button--muted-notification {
   --notification-color: rgb(var(--zn-color-info));
 }
 
 .button--has-notification {
   position: relative;
+  overflow: visible;
 
   &::after {
     content: attr(data-notification);
@@ -69,25 +64,30 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    top: 1px;
+    top: -4px;
     left: auto;
-    inset-inline-end: 1px;
-    width: 15px;
-    height: 15px;
-    border-radius: 50%;
-    font-size: 10px;
-    color: white;
+    inset-inline-end: -4px;
+    box-sizing: border-box;
+    min-width: 13px;
+    height: 13px;
+    padding: 0 3px;
+    border-radius: 999px;
+    font-size: var(--zn-text-notification-font-size);
+    font-weight: var(--zn-text-notification-font-weight);
+    line-height: var(--zn-text-notification-line-height);
+    color: var(--zn-text-notification-color);
     background-color: var(--notification-color);
   }
 }
 
 .button--has-notification.button--notification-dot {
-  &:after {
+  &::after {
     content: '';
-    width: 5px;
-    height: 5px;
-    top: 5px;
-    right: 3px;
+    min-width: 0;
+    width: 8px;
+    height: 8px;
+    padding: 0;
+    border-radius: 50%;
   }
 }
 
@@ -244,19 +244,33 @@
   }
 }
 
-.button--icon-button {
+/**
+ * Icon buttons
+ *
+ * Standard:  40x36, white background, 1px border, 6px radius
+ * Small:     36x36 (`icon-button="small"`)
+ * Plain:     either size without the background and border (`plain`)
+ *
+ * Doubled-up selector so the icon-button design out-cascades the color
+ * variant combos (.button--standard.button--secondary etc.)
+ */
+.button.button--icon-button {
   --icon-button-color: rgb(var(--zn-text));
   --icon-button-hover-color: rgb(var(--zn-primary));
 
-  background: transparent;
-  border-color: var(--zn-button-border-color, transparent) !important;
+  width: 40px;
+  min-width: 40px;
+  height: 36px;
+  min-height: 36px;
+  max-height: 36px;
+  padding: 6px;
+  margin: 0;
+  background: rgb(var(--zn-panel));
+  border-color: var(--zn-button-border-color, rgb(var(--zn-border-color))) !important;
+  border-radius: var(--zn-border-radius);
   color: var(--icon-button-color);
   font-weight: inherit;
   line-height: 0;
-  margin: 0;
-  min-width: 0;
-  padding: 0;
-  width: auto;
 
   zn-icon,
   ::slotted(zn-icon) {
@@ -266,15 +280,57 @@
     line-height: 0;
   }
 
+  // Hovers tint the background only — the icon keeps its set colour
   &:hover:not([disabled]), &:active:not([disabled]) {
+    background: rgba(var(--zn-color-tab), 0.5);
+  }
+
+  &.button--icon-button-small {
+    width: 36px;
+    min-width: 36px;
+  }
+
+  // Round: 36x36 circle on the tab tint, muted icon by default
+  &.button--icon-button-round {
+    width: 36px;
+    min-width: 36px;
+    padding: 8px;
+    background: rgb(var(--zn-color-tab));
+    border-color: var(--zn-button-border-color, transparent) !important;
+    border-radius: var(--zn-border-radius-circle);
+
+    &:hover:not([disabled]), &:active:not([disabled]) {
+      background: rgb(var(--zn-color-border));
+    }
+  }
+
+  &.button--plain {
     background: transparent;
-    color: var(--icon-button-hover-color);
+    border-color: var(--zn-button-border-color, transparent) !important;
+
+    &:hover:not([disabled]), &:active:not([disabled]) {
+      background: rgb(var(--zn-color-tab));
+    }
   }
-}
 
-.button--with-icon.button--icon-button {
-  border: 0;
-  margin: 0;
+  // `no-hover`: keep the resting background on hover/active
+  &.button--no-hover {
+    &:hover:not([disabled]), &:active:not([disabled]) {
+      background: rgb(var(--zn-panel));
+    }
+
+    &.button--plain:hover:not([disabled]), &.button--plain:active:not([disabled]) {
+      background: transparent;
+    }
+  }
+
+  &.button--has-notification::after {
+    --icon-inset: calc((100% - var(--notification-icon-size, 20px)) / 2);
+
+    top: calc(var(--icon-inset) - 4px);
+    inset-inline-end: calc(var(--icon-inset) - 4px);
+    transform: translate(50%, -50%);
+  }
 }
 
 .button--loading-bg {