@mirohq/design-system-themes 1.4.9 → 1.4.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/base.css +28 -0
  2. package/base.json +28 -0
  3. package/dark.css +28 -0
  4. package/dist/main.js +114 -2
  5. package/dist/main.js.map +1 -1
  6. package/dist/module.js +114 -2
  7. package/dist/module.js.map +1 -1
  8. package/dist/types.d.ts +1 -1
  9. package/light.css +28 -0
  10. package/metadata.json +84 -0
  11. package/new-dark.css +29 -1
  12. package/new-light.css +29 -1
  13. package/package.json +2 -2
package/dist/types.d.ts CHANGED
@@ -3,7 +3,7 @@ import { Colors, Radii } from '@mirohq/design-tokens';
3
3
  /**
4
4
  * DO NOT MODIFY THIS FILE: This file was generated by Style Dictionary
5
5
  */
6
- type AliasColors = 'background-alpha' | 'background-alpha-active' | 'background-alpha-hover' | 'background-alpha-neutrals-overlay' | 'background-alpha-neutrals-overlay-subtle' | 'background-alpha-subtle' | 'background-canvas' | 'background-disabled' | 'background-elevated' | 'background-inverted' | 'background-inverted-secondary' | 'background-layout' | 'background-overlay' | 'background-space' | 'background-static-dark' | 'background-static-dark-subtle' | 'background-static-light' | 'background-surface' | 'background-surface-secondary' | 'background-transparent' | 'background-danger-prominent' | 'background-danger-prominent-active' | 'background-danger-prominent-hover' | 'background-danger-prominent-pressed' | 'background-danger-subtle' | 'background-danger-subtle-active' | 'background-danger-subtle-hover' | 'background-danger-subtle-pressed' | 'background-interactive-danger' | 'background-interactive-danger-hover' | 'background-interactive-danger-pressed' | 'background-interactive-primary' | 'background-interactive-primary-hover' | 'background-interactive-primary-pressed' | 'background-interactive-secondary-selected' | 'background-interactive-selected' | 'background-interactive-surface-hover' | 'background-interactive-surface-pressed' | 'background-interactive-surface-secondary-hover' | 'background-interactive-surface-secondary-pressed' | 'background-neutrals' | 'background-neutrals-active' | 'background-neutrals-container' | 'background-neutrals-control' | 'background-neutrals-control-hover' | 'background-neutrals-control-pressed' | 'background-neutrals-disabled' | 'background-neutrals-hover' | 'background-neutrals-inactive' | 'background-neutrals-inactive-hover' | 'background-neutrals-inverted' | 'background-neutrals-inverted-subtle' | 'background-neutrals-layout' | 'background-neutrals-page' | 'background-neutrals-page-subtle' | 'background-neutrals-pressed' | 'background-neutrals-scrollbar' | 'background-neutrals-scrollbar-active' | 'background-neutrals-scrollbar-hover' | 'background-neutrals-subtle' | 'background-neutrals-subtle-active' | 'background-neutrals-subtle-hover' | 'background-neutrals-subtle-pressed' | 'background-neutrals-transparent' | 'background-primary-prominent' | 'background-primary-prominent-active' | 'background-primary-prominent-hover' | 'background-primary-prominent-pressed' | 'background-primary-prominent-selected' | 'background-primary-subtle' | 'background-primary-subtle-active' | 'background-primary-subtle-hover' | 'background-primary-subtle-pressed' | 'background-primary-subtle-selected' | 'status-background-error' | 'status-background-info' | 'status-background-success' | 'status-background-warning' | 'background-success-prominent' | 'background-success-prominent-active' | 'background-success-prominent-hover' | 'background-success-prominent-pressed' | 'background-success-subtle' | 'background-warning-prominent' | 'background-warning-subtle' | 'border-default' | 'border-disabled' | 'border-inverted' | 'border-inverted-subtle' | 'border-option' | 'border-option-hover' | 'border-static-dark' | 'border-static-dark-subtle' | 'border-static-light' | 'border-strong' | 'border-subtle' | 'border-transparent' | 'border-danger' | 'border-danger-active' | 'border-danger-hover' | 'border-danger-pressed' | 'border-danger-subtle' | 'border-focus-error-inner' | 'border-focus-error-middle' | 'border-focus-error-outer' | 'border-focus-inner' | 'border-focus-middle' | 'border-focus-outer' | 'border-focus-success-inner' | 'border-focus-success-middle' | 'border-focus-success-outer' | 'focus-keyboard' | 'border-interactive-danger' | 'border-interactive-danger-hover' | 'border-interactive-danger-pressed' | 'border-interactive-primary' | 'border-interactive-primary-hover' | 'border-interactive-primary-pressed' | 'border-interactive-secondary' | 'border-interactive-secondary-hover' | 'border-interactive-secondary-pressed' | 'border-interactive-selected' | 'border-neutrals' | 'border-neutrals-active' | 'border-neutrals-controls' | 'border-neutrals-controls-disabled' | 'border-neutrals-disabled' | 'border-neutrals-hover' | 'border-neutrals-inverted' | 'border-neutrals-pressed' | 'border-neutrals-subtle' | 'border-neutrals-subtle-hover' | 'border-neutrals-subtle-pressed' | 'border-neutrals-text' | 'border-neutrals-text-active' | 'border-neutrals-text-hover' | 'border-neutrals-text-subtle' | 'border-neutrals-text-subtle-active' | 'border-neutrals-text-subtle-hover' | 'border-neutrals-transparent' | 'border-primary' | 'border-primary-active' | 'border-primary-hover' | 'border-primary-inverted' | 'border-primary-pressed' | 'border-primary-selected' | 'border-primary-subtle' | 'status-border-error' | 'status-border-info' | 'status-border-success' | 'status-border-warning' | 'border-success' | 'border-success-active' | 'border-success-hover' | 'border-success-pressed' | 'border-success-subtle' | 'border-warning' | 'border-warning-subtle' | 'badge-border' | 'badge-border-inverted' | 'button-background-danger' | 'button-background-danger-hover' | 'button-background-danger-pressed' | 'button-background-ghost' | 'button-background-ghost-hover' | 'button-background-ghost-pressed' | 'button-background-primary' | 'button-background-primary-hover' | 'button-background-primary-pressed' | 'button-background-secondary' | 'button-background-secondary-hover' | 'button-background-secondary-pressed' | 'button-background-tertiary' | 'button-background-tertiary-hover' | 'button-background-tertiary-pressed' | 'button-border-danger' | 'button-border-danger-hover' | 'button-border-danger-pressed' | 'button-border-ghost-hover' | 'button-border-ghost-pressed' | 'button-border-primary' | 'button-border-primary-hover' | 'button-border-primary-pressed' | 'button-border-secondary' | 'button-border-secondary-hover' | 'button-border-secondary-pressed' | 'button-border-tertiary' | 'button-border-tertiary-hover' | 'button-border-tertiary-pressed' | 'button-icon-on-danger' | 'button-icon-on-primary' | 'button-icon-on-secondary' | 'button-icon-on-tertiary' | 'button-text-on-danger' | 'button-text-on-primary' | 'button-text-on-secondary' | 'button-text-on-tertiary' | 'chip-background' | 'chip-background-disabled' | 'chip-background-hover' | 'chip-text' | 'format-icon-diagram' | 'format-icon-docs' | 'format-icon-external' | 'format-icon-kanban' | 'format-icon-prototype' | 'format-icon-slides' | 'format-icon-table' | 'format-icon-timeline' | 'input-background-alt-default' | 'input-background-alt-focused' | 'input-background-alt-hover' | 'input-background-default' | 'input-background-disabled' | 'input-background-focused' | 'input-background-hover' | 'input-border-default' | 'input-border-disabled' | 'input-border-error' | 'input-border-focused' | 'input-border-hover' | 'input-border-success' | 'notification-background-announcement' | 'notification-background-danger' | 'notification-background-info' | 'notification-background-inverted' | 'notification-background-static' | 'notification-background-warning' | 'notification-border-inverted' | 'notification-border-inverted-subtle' | 'notification-border-static' | 'notification-border-static-subtle' | 'notification-icon-on-announcement' | 'notification-icon-on-danger' | 'notification-icon-on-info' | 'notification-icon-on-warning' | 'notification-text-on-announcement' | 'notification-text-on-danger' | 'notification-text-on-info' | 'notification-text-on-warning' | 'popover-background' | 'popover-border' | 'scrollbar-background' | 'scrollbar-background-hover' | 'slider-background' | 'slider-control-background' | 'slider-notch-background' | 'switch-background-default' | 'switch-background-hover' | 'switch-control-background' | 'tab-background-selected' | 'toolbar-item-background-hover' | 'toolbar-item-background-pressed' | 'toolbar-item-background-selected' | 'tooltip-background' | 'tooltip-background-inset' | 'icon-danger' | 'icon-danger-active' | 'icon-danger-hover' | 'icon-danger-inverted' | 'icon-danger-pressed' | 'icon-default' | 'icon-disabled' | 'icon-inverted' | 'icon-inverted-secondary' | 'icon-muted' | 'icon-on-disabled' | 'icon-on-static-dark' | 'icon-on-static-dark-subtle' | 'icon-on-static-light' | 'icon-on-static-light-subtle' | 'icon-placeholder' | 'icon-secondary' | 'icon-interactive-on-inverted' | 'icon-interactive-on-inverted-hover' | 'icon-interactive-on-inverted-pressed' | 'icon-interactive-on-inverted-secondary' | 'icon-interactive-on-inverted-secondary-hover' | 'icon-interactive-on-inverted-secondary-pressed' | 'icon-interactive-primary' | 'icon-interactive-primary-hover' | 'icon-interactive-primary-pressed' | 'icon-interactive-secondary' | 'icon-interactive-secondary-hover' | 'icon-interactive-secondary-pressed' | 'icon-interactive-selected' | 'icon-on-interactive-danger' | 'icon-on-interactive-primary' | 'icon-on-interactive-secondary' | 'icon-on-interactive-selected' | 'icon-neutrals' | 'icon-neutrals-disabled' | 'icon-neutrals-hover' | 'icon-neutrals-inactive' | 'icon-neutrals-inactive-hover' | 'icon-neutrals-inverted' | 'icon-neutrals-inverted-hover' | 'icon-neutrals-inverted-subtle' | 'icon-neutrals-inverted-subtle-hover' | 'icon-neutrals-placeholder' | 'icon-neutrals-pressed' | 'icon-neutrals-search' | 'icon-neutrals-subtle' | 'icon-neutrals-subtle-hover' | 'icon-neutrals-subtle-pressed' | 'icon-neutrals-text' | 'icon-primary' | 'icon-primary-active' | 'icon-primary-hover' | 'icon-primary-inverted' | 'icon-primary-inverted-hover' | 'icon-primary-pressed' | 'icon-primary-selected' | 'status-icon-error' | 'status-icon-on-error' | 'status-icon-on-info' | 'status-icon-on-success' | 'status-icon-on-warning' | 'status-icon-success' | 'status-icon-warning' | 'icon-success' | 'icon-success-active' | 'icon-success-hover' | 'icon-success-inverted' | 'icon-success-pressed' | 'icon-warning' | 'icon-warning-prominent' | 'icon-warning-subtle' | 'text-danger' | 'text-danger-active' | 'text-danger-hover' | 'text-danger-inverted' | 'text-danger-pressed' | 'text-interactive-on-inverted' | 'text-interactive-on-inverted-hover' | 'text-interactive-on-inverted-pressed' | 'text-interactive-on-inverted-secondary' | 'text-interactive-on-inverted-secondary-hover' | 'text-interactive-on-inverted-secondary-pressed' | 'text-interactive-primary' | 'text-interactive-primary-hover' | 'text-interactive-primary-pressed' | 'text-interactive-secondary' | 'text-interactive-secondary-hover' | 'text-interactive-secondary-pressed' | 'text-interactive-selected' | 'text-on-interactive-danger' | 'text-on-interactive-primary' | 'text-on-interactive-secondary' | 'text-on-interactive-selected' | 'text-neutrals' | 'text-neutrals-active' | 'text-neutrals-disabled' | 'text-neutrals-hover' | 'text-neutrals-inverted' | 'text-neutrals-inverted-hover' | 'text-neutrals-inverted-subtle' | 'text-neutrals-inverted-subtle-hover' | 'text-neutrals-placeholder' | 'text-neutrals-placeholder-only' | 'text-neutrals-pressed' | 'text-neutrals-subtle' | 'text-neutrals-subtle-active' | 'text-neutrals-subtle-hover' | 'text-neutrals-subtle-pressed' | 'text-primary' | 'text-primary-active' | 'text-primary-hover' | 'text-primary-inverted' | 'text-primary-inverted-subtle' | 'text-primary-pressed' | 'text-primary-selected' | 'status-text-error' | 'status-text-on-error' | 'status-text-on-info' | 'status-text-on-success' | 'status-text-on-warning' | 'status-text-success' | 'status-text-warning' | 'text-success' | 'text-success-active' | 'text-success-hover' | 'text-success-inverted' | 'text-success-pressed' | 'text-default' | 'text-disabled' | 'text-inverted' | 'text-inverted-secondary' | 'text-muted' | 'text-on-disabled' | 'text-on-static-dark' | 'text-on-static-dark-subtle' | 'text-on-static-light' | 'text-on-static-light-subtle' | 'text-placeholder' | 'text-secondary' | 'text-warning' | 'text-warning-subtle' | 'coal-background' | 'coal-background-mild' | 'coal-background-prominent' | 'coal-background-subtle' | 'coral-background' | 'coral-background-mild' | 'coral-background-prominent' | 'coral-background-subtle' | 'cyan-background' | 'cyan-background-mild' | 'cyan-background-prominent' | 'cyan-background-subtle' | 'lilac-background' | 'lilac-background-mild' | 'lilac-background-prominent' | 'lilac-background-subtle' | 'lime-background' | 'lime-background-mild' | 'lime-background-prominent' | 'lime-background-subtle' | 'moss-background' | 'moss-background-mild' | 'moss-background-prominent' | 'moss-background-subtle' | 'ocean-background' | 'ocean-background-mild' | 'ocean-background-prominent' | 'ocean-background-subtle' | 'orange-background' | 'orange-background-mild' | 'orange-background-prominent' | 'orange-background-subtle' | 'pink-background' | 'pink-background-mild' | 'pink-background-prominent' | 'pink-background-subtle' | 'sunshine-background' | 'sunshine-background-mild' | 'sunshine-background-prominent' | 'sunshine-background-subtle' | 'teal-background' | 'teal-background-mild' | 'teal-background-prominent' | 'teal-background-subtle' | 'coal-border' | 'coal-border-prominent' | 'coal-border-subtle' | 'coral-border' | 'coral-border-prominent' | 'coral-border-subtle' | 'cyan-border' | 'cyan-border-prominent' | 'cyan-border-subtle' | 'lilac-border' | 'lilac-border-prominent' | 'lilac-border-subtle' | 'lime-border' | 'lime-border-prominent' | 'lime-border-subtle' | 'moss-border' | 'moss-border-prominent' | 'moss-border-subtle' | 'ocean-border' | 'ocean-border-prominent' | 'ocean-border-subtle' | 'orange-border' | 'orange-border-prominent' | 'orange-border-subtle' | 'pink-border' | 'pink-border-prominent' | 'pink-border-subtle' | 'sunshine-border' | 'sunshine-border-prominent' | 'sunshine-border-subtle' | 'teal-border' | 'teal-border-prominent' | 'teal-border-subtle' | 'coal-avatar-background' | 'coral-avatar-background' | 'cyan-avatar-background' | 'light-coal-avatar-background' | 'light-coral-avatar-background' | 'light-cyan-avatar-background' | 'light-lilac-avatar-background' | 'light-lime-avatar-background' | 'light-moss-avatar-background' | 'light-ocean-avatar-background' | 'light-orange-avatar-background' | 'light-pink-avatar-background' | 'light-sunshine-avatar-background' | 'light-teal-avatar-background' | 'lilac-avatar-background' | 'lime-avatar-background' | 'moss-avatar-background' | 'ocean-avatar-background' | 'orange-avatar-background' | 'pink-avatar-background' | 'sunshine-avatar-background' | 'teal-avatar-background' | 'coral-comment-background' | 'cyan-comment-background' | 'lime-comment-background' | 'coal-cursor-background' | 'coal-cursor-border' | 'coal-cursor-border-prominent' | 'coral-cursor-background' | 'coral-cursor-border' | 'coral-cursor-border-prominent' | 'cyan-cursor-background' | 'cyan-cursor-border' | 'cyan-cursor-border-prominent' | 'light-coal-cursor-background' | 'light-coral-cursor-background' | 'light-cursor-background' | 'light-cyan-cursor-background' | 'light-lilac-cursor-background' | 'light-lime-cursor-background' | 'light-moss-cursor-background' | 'light-orange-cursor-background' | 'light-pink-cursor-background' | 'light-sunshine-cursor-background' | 'light-teal-cursor-background' | 'lilac-cursor-background' | 'lilac-cursor-border' | 'lilac-cursor-border-prominent' | 'lime-cursor-background' | 'lime-cursor-border' | 'lime-cursor-border-prominent' | 'moss-cursor-background' | 'moss-cursor-border' | 'moss-cursor-border-prominent' | 'ocean-cursor-background' | 'ocean-cursor-border' | 'ocean-cursor-border-prominent' | 'orange-cursor-background' | 'orange-cursor-border' | 'orange-cursor-border-prominent' | 'pink-cursor-background' | 'pink-cursor-border-prominent' | 'pink-cursor-coal-border' | 'sunshine-cursor-background' | 'sunshine-cursor-border' | 'susnhine-cursor-border-prominent' | 'teal-cursor-background' | 'teal-cursor-border' | 'teal-cursor-border-prominent' | 'black-sticky-background' | 'coral-sticky-background' | 'cyan-sticky-background' | 'light-coal-sticky-background' | 'light-lime-sticky-background' | 'light-ocean-sticky-background' | 'light-pink-sticky-background' | 'light-sunshine-sticky-background' | 'lilac-sticky-background' | 'lime-sticky-background' | 'moss-sticky-background' | 'ocean-sticky-background' | 'orange-sticky-background' | 'pink-sticky-background' | 'sunshine-sticky-background' | 'teal-sticky-background' | 'coal-icon' | 'coal-icon-mild' | 'coal-icon-subtle' | 'coral-icon' | 'coral-icon-mild' | 'coral-icon-subtle' | 'cyan-icon' | 'cyan-icon-mild' | 'cyan-icon-subtle' | 'lilac-icon' | 'lilac-icon-mild' | 'lilac-icon-subtle' | 'lime-icon' | 'lime-icon-mild' | 'lime-icon-subtle' | 'moss-icon' | 'moss-icon-mild' | 'moss-icon-subtle' | 'ocean-icon' | 'ocean-icon-mild' | 'ocean-icon-subtle' | 'orange-icon' | 'orange-icon-mild' | 'orange-icon-subtle' | 'pink-icon' | 'pink-icon-mild' | 'pink-icon-subtle' | 'sunshine-icon' | 'sunshine-icon-mild' | 'sunshine-icon-subtle' | 'teal-icon' | 'teal-icon-mild' | 'teal-icon-subtle' | 'coal-text' | 'coal-text-mild' | 'coal-text-subtle' | 'coral-text' | 'coral-text-mild' | 'coral-text-subtle' | 'cyan-text' | 'cyan-text-mild' | 'cyan-text-subtle' | 'lilac-text' | 'lilac-text-mild' | 'lilac-text-subtle' | 'lime-text' | 'lime-text-mild' | 'lime-text-subtle' | 'moss-text' | 'moss-text-mild' | 'moss-text-subtle' | 'ocean-text' | 'ocean-text-mild' | 'ocean-text-subtle' | 'orange-text' | 'orange-text-mild' | 'orange-text-subtle' | 'pink-text' | 'pink-text-mild' | 'pink-text-subtle' | 'sunshine-text' | 'sunshine-text-mild' | 'sunshine-text-subtle' | 'teal-text' | 'teal-text-mild' | 'teal-text-subtle';
6
+ type AliasColors = 'background-alpha' | 'background-alpha-active' | 'background-alpha-hover' | 'background-alpha-neutrals-overlay' | 'background-alpha-neutrals-overlay-subtle' | 'background-alpha-subtle' | 'background-canvas' | 'background-disabled' | 'background-elevated' | 'background-inverted' | 'background-inverted-secondary' | 'background-layout' | 'background-overlay' | 'background-space' | 'background-static-dark' | 'background-static-dark-subtle' | 'background-static-light' | 'background-surface' | 'background-surface-secondary' | 'background-transparent' | 'background-danger-prominent' | 'background-danger-prominent-active' | 'background-danger-prominent-hover' | 'background-danger-prominent-pressed' | 'background-danger-subtle' | 'background-danger-subtle-active' | 'background-danger-subtle-hover' | 'background-danger-subtle-pressed' | 'background-interactive-danger' | 'background-interactive-danger-hover' | 'background-interactive-danger-pressed' | 'background-interactive-primary' | 'background-interactive-primary-hover' | 'background-interactive-primary-pressed' | 'background-interactive-secondary-selected' | 'background-interactive-selected' | 'background-interactive-surface-hover' | 'background-interactive-surface-pressed' | 'background-interactive-surface-secondary-hover' | 'background-interactive-surface-secondary-pressed' | 'background-neutrals' | 'background-neutrals-active' | 'background-neutrals-container' | 'background-neutrals-control' | 'background-neutrals-control-hover' | 'background-neutrals-control-pressed' | 'background-neutrals-disabled' | 'background-neutrals-hover' | 'background-neutrals-inactive' | 'background-neutrals-inactive-hover' | 'background-neutrals-inverted' | 'background-neutrals-inverted-subtle' | 'background-neutrals-layout' | 'background-neutrals-page' | 'background-neutrals-page-subtle' | 'background-neutrals-pressed' | 'background-neutrals-scrollbar' | 'background-neutrals-scrollbar-active' | 'background-neutrals-scrollbar-hover' | 'background-neutrals-subtle' | 'background-neutrals-subtle-active' | 'background-neutrals-subtle-hover' | 'background-neutrals-subtle-pressed' | 'background-neutrals-transparent' | 'background-primary-prominent' | 'background-primary-prominent-active' | 'background-primary-prominent-hover' | 'background-primary-prominent-pressed' | 'background-primary-prominent-selected' | 'background-primary-subtle' | 'background-primary-subtle-active' | 'background-primary-subtle-hover' | 'background-primary-subtle-pressed' | 'background-primary-subtle-selected' | 'status-background-error' | 'status-background-info' | 'status-background-success' | 'status-background-warning' | 'background-success-prominent' | 'background-success-prominent-active' | 'background-success-prominent-hover' | 'background-success-prominent-pressed' | 'background-success-subtle' | 'background-warning-prominent' | 'background-warning-subtle' | 'border-default' | 'border-disabled' | 'border-inverted' | 'border-inverted-subtle' | 'border-option' | 'border-option-hover' | 'border-static-dark' | 'border-static-dark-subtle' | 'border-static-light' | 'border-strong' | 'border-subtle' | 'border-transparent' | 'border-danger' | 'border-danger-active' | 'border-danger-hover' | 'border-danger-pressed' | 'border-danger-subtle' | 'border-focus-error-inner' | 'border-focus-error-middle' | 'border-focus-error-outer' | 'border-focus-inner' | 'border-focus-middle' | 'border-focus-outer' | 'border-focus-success-inner' | 'border-focus-success-middle' | 'border-focus-success-outer' | 'focus-keyboard' | 'border-interactive-danger' | 'border-interactive-danger-hover' | 'border-interactive-danger-pressed' | 'border-interactive-primary' | 'border-interactive-primary-hover' | 'border-interactive-primary-pressed' | 'border-interactive-secondary' | 'border-interactive-secondary-hover' | 'border-interactive-secondary-pressed' | 'border-interactive-selected' | 'border-neutrals' | 'border-neutrals-active' | 'border-neutrals-controls' | 'border-neutrals-controls-disabled' | 'border-neutrals-disabled' | 'border-neutrals-hover' | 'border-neutrals-inverted' | 'border-neutrals-pressed' | 'border-neutrals-subtle' | 'border-neutrals-subtle-hover' | 'border-neutrals-subtle-pressed' | 'border-neutrals-text' | 'border-neutrals-text-active' | 'border-neutrals-text-hover' | 'border-neutrals-text-subtle' | 'border-neutrals-text-subtle-active' | 'border-neutrals-text-subtle-hover' | 'border-neutrals-transparent' | 'border-primary' | 'border-primary-active' | 'border-primary-hover' | 'border-primary-inverted' | 'border-primary-pressed' | 'border-primary-selected' | 'border-primary-subtle' | 'status-border-error' | 'status-border-info' | 'status-border-success' | 'status-border-warning' | 'border-success' | 'border-success-active' | 'border-success-hover' | 'border-success-pressed' | 'border-success-subtle' | 'border-warning' | 'border-warning-subtle' | 'badge-border' | 'badge-border-inverted' | 'button-background-danger' | 'button-background-danger-hover' | 'button-background-danger-pressed' | 'button-background-ghost' | 'button-background-ghost-hover' | 'button-background-ghost-inverse-hover' | 'button-background-ghost-inverse-pressed' | 'button-background-ghost-pressed' | 'button-background-info' | 'button-background-info-hover' | 'button-background-info-pressed' | 'button-background-inverse' | 'button-background-inverse-disabled' | 'button-background-inverse-hover' | 'button-background-inverse-pressed' | 'button-background-inverse-secondary' | 'button-background-inverse-secondary-hover' | 'button-background-inverse-secondary-pressed' | 'button-background-primary' | 'button-background-primary-hover' | 'button-background-primary-pressed' | 'button-background-secondary' | 'button-background-secondary-hover' | 'button-background-secondary-pressed' | 'button-background-tertiary' | 'button-background-tertiary-hover' | 'button-background-tertiary-pressed' | 'button-background-warning' | 'button-background-warning-hover' | 'button-background-warning-pressed' | 'button-border-danger' | 'button-border-danger-hover' | 'button-border-danger-pressed' | 'button-border-ghost-hover' | 'button-border-ghost-pressed' | 'button-border-inverse-secondary' | 'button-border-inverse-secondary-hover' | 'button-border-inverse-secondary-pressed' | 'button-border-primary' | 'button-border-primary-hover' | 'button-border-primary-pressed' | 'button-border-secondary' | 'button-border-secondary-hover' | 'button-border-secondary-pressed' | 'button-border-tertiary' | 'button-border-tertiary-hover' | 'button-border-tertiary-pressed' | 'button-icon-on-danger' | 'button-icon-on-inverse' | 'button-icon-on-inverse-disabled' | 'button-icon-on-inverse-secondary' | 'button-icon-on-primary' | 'button-icon-on-secondary' | 'button-icon-on-tertiary' | 'button-text-on-danger' | 'button-text-on-inverse' | 'button-text-on-inverse-disabled' | 'button-text-on-inverse-secondary' | 'button-text-on-primary' | 'button-text-on-secondary' | 'button-text-on-tertiary' | 'chip-background' | 'chip-background-disabled' | 'chip-background-hover' | 'chip-text' | 'format-icon-diagram' | 'format-icon-docs' | 'format-icon-external' | 'format-icon-kanban' | 'format-icon-prototype' | 'format-icon-slides' | 'format-icon-table' | 'format-icon-timeline' | 'input-background-alt-default' | 'input-background-alt-focused' | 'input-background-alt-hover' | 'input-background-default' | 'input-background-disabled' | 'input-background-focused' | 'input-background-hover' | 'input-border-default' | 'input-border-disabled' | 'input-border-error' | 'input-border-focused' | 'input-border-hover' | 'input-border-success' | 'notification-background-announcement' | 'notification-background-danger' | 'notification-background-info' | 'notification-background-inverted' | 'notification-background-static' | 'notification-background-warning' | 'notification-border-inverted' | 'notification-border-inverted-subtle' | 'notification-border-static' | 'notification-border-static-subtle' | 'notification-icon-on-announcement' | 'notification-icon-on-danger' | 'notification-icon-on-info' | 'notification-icon-on-warning' | 'notification-text-on-announcement' | 'notification-text-on-danger' | 'notification-text-on-info' | 'notification-text-on-warning' | 'popover-background' | 'popover-border' | 'scrollbar-background' | 'scrollbar-background-hover' | 'slider-background' | 'slider-control-background' | 'slider-notch-background' | 'switch-background-default' | 'switch-background-hover' | 'switch-control-background' | 'tab-background-selected' | 'toolbar-item-background-hover' | 'toolbar-item-background-pressed' | 'toolbar-item-background-selected' | 'tooltip-background' | 'tooltip-background-inset' | 'tooltip-background-inverse' | 'icon-danger' | 'icon-danger-active' | 'icon-danger-hover' | 'icon-danger-inverted' | 'icon-danger-pressed' | 'icon-default' | 'icon-disabled' | 'icon-inverted' | 'icon-inverted-secondary' | 'icon-muted' | 'icon-on-disabled' | 'icon-on-disabled-inverse' | 'icon-on-static-dark' | 'icon-on-static-dark-subtle' | 'icon-on-static-light' | 'icon-on-static-light-subtle' | 'icon-placeholder' | 'icon-secondary' | 'icon-interactive-on-inverted' | 'icon-interactive-on-inverted-hover' | 'icon-interactive-on-inverted-pressed' | 'icon-interactive-on-inverted-secondary' | 'icon-interactive-on-inverted-secondary-hover' | 'icon-interactive-on-inverted-secondary-pressed' | 'icon-interactive-on-inverted-selected' | 'icon-interactive-primary' | 'icon-interactive-primary-hover' | 'icon-interactive-primary-pressed' | 'icon-interactive-secondary' | 'icon-interactive-secondary-hover' | 'icon-interactive-secondary-pressed' | 'icon-interactive-selected' | 'icon-on-interactive-danger' | 'icon-on-interactive-primary' | 'icon-on-interactive-secondary' | 'icon-on-interactive-selected' | 'icon-neutrals' | 'icon-neutrals-disabled' | 'icon-neutrals-hover' | 'icon-neutrals-inactive' | 'icon-neutrals-inactive-hover' | 'icon-neutrals-inverted' | 'icon-neutrals-inverted-hover' | 'icon-neutrals-inverted-subtle' | 'icon-neutrals-inverted-subtle-hover' | 'icon-neutrals-placeholder' | 'icon-neutrals-pressed' | 'icon-neutrals-search' | 'icon-neutrals-subtle' | 'icon-neutrals-subtle-hover' | 'icon-neutrals-subtle-pressed' | 'icon-neutrals-text' | 'icon-primary' | 'icon-primary-active' | 'icon-primary-hover' | 'icon-primary-inverted' | 'icon-primary-inverted-hover' | 'icon-primary-pressed' | 'icon-primary-selected' | 'status-icon-error' | 'status-icon-on-error' | 'status-icon-on-info' | 'status-icon-on-success' | 'status-icon-on-warning' | 'status-icon-success' | 'status-icon-warning' | 'icon-success' | 'icon-success-active' | 'icon-success-hover' | 'icon-success-inverted' | 'icon-success-pressed' | 'icon-warning' | 'icon-warning-prominent' | 'icon-warning-subtle' | 'text-danger' | 'text-danger-active' | 'text-danger-hover' | 'text-danger-inverted' | 'text-danger-pressed' | 'text-interactive-on-inverted' | 'text-interactive-on-inverted-hover' | 'text-interactive-on-inverted-pressed' | 'text-interactive-on-inverted-secondary' | 'text-interactive-on-inverted-secondary-hover' | 'text-interactive-on-inverted-secondary-pressed' | 'text-interactive-primary' | 'text-interactive-primary-hover' | 'text-interactive-primary-pressed' | 'text-interactive-secondary' | 'text-interactive-secondary-hover' | 'text-interactive-secondary-pressed' | 'text-interactive-selected' | 'text-on-interactive-danger' | 'text-on-interactive-primary' | 'text-on-interactive-secondary' | 'text-on-interactive-selected' | 'text-neutrals' | 'text-neutrals-active' | 'text-neutrals-disabled' | 'text-neutrals-hover' | 'text-neutrals-inverted' | 'text-neutrals-inverted-hover' | 'text-neutrals-inverted-subtle' | 'text-neutrals-inverted-subtle-hover' | 'text-neutrals-placeholder' | 'text-neutrals-placeholder-only' | 'text-neutrals-pressed' | 'text-neutrals-subtle' | 'text-neutrals-subtle-active' | 'text-neutrals-subtle-hover' | 'text-neutrals-subtle-pressed' | 'text-primary' | 'text-primary-active' | 'text-primary-hover' | 'text-primary-inverted' | 'text-primary-inverted-subtle' | 'text-primary-pressed' | 'text-primary-selected' | 'status-text-error' | 'status-text-on-error' | 'status-text-on-info' | 'status-text-on-success' | 'status-text-on-warning' | 'status-text-success' | 'status-text-warning' | 'text-success' | 'text-success-active' | 'text-success-hover' | 'text-success-inverted' | 'text-success-pressed' | 'text-default' | 'text-disabled' | 'text-inverted' | 'text-inverted-secondary' | 'text-muted' | 'text-on-disabled' | 'text-on-inverse-disabled' | 'text-on-static-dark' | 'text-on-static-dark-subtle' | 'text-on-static-light' | 'text-on-static-light-subtle' | 'text-placeholder' | 'text-secondary' | 'text-warning' | 'text-warning-subtle' | 'coal-background' | 'coal-background-mild' | 'coal-background-prominent' | 'coal-background-subtle' | 'coral-background' | 'coral-background-mild' | 'coral-background-prominent' | 'coral-background-subtle' | 'cyan-background' | 'cyan-background-mild' | 'cyan-background-prominent' | 'cyan-background-subtle' | 'lilac-background' | 'lilac-background-mild' | 'lilac-background-prominent' | 'lilac-background-subtle' | 'lime-background' | 'lime-background-mild' | 'lime-background-prominent' | 'lime-background-subtle' | 'moss-background' | 'moss-background-mild' | 'moss-background-prominent' | 'moss-background-subtle' | 'ocean-background' | 'ocean-background-mild' | 'ocean-background-prominent' | 'ocean-background-subtle' | 'orange-background' | 'orange-background-mild' | 'orange-background-prominent' | 'orange-background-subtle' | 'pink-background' | 'pink-background-mild' | 'pink-background-prominent' | 'pink-background-subtle' | 'sunshine-background' | 'sunshine-background-mild' | 'sunshine-background-prominent' | 'sunshine-background-subtle' | 'teal-background' | 'teal-background-mild' | 'teal-background-prominent' | 'teal-background-subtle' | 'coal-border' | 'coal-border-prominent' | 'coal-border-subtle' | 'coral-border' | 'coral-border-prominent' | 'coral-border-subtle' | 'cyan-border' | 'cyan-border-prominent' | 'cyan-border-subtle' | 'lilac-border' | 'lilac-border-prominent' | 'lilac-border-subtle' | 'lime-border' | 'lime-border-prominent' | 'lime-border-subtle' | 'moss-border' | 'moss-border-prominent' | 'moss-border-subtle' | 'ocean-border' | 'ocean-border-prominent' | 'ocean-border-subtle' | 'orange-border' | 'orange-border-prominent' | 'orange-border-subtle' | 'pink-border' | 'pink-border-prominent' | 'pink-border-subtle' | 'sunshine-border' | 'sunshine-border-prominent' | 'sunshine-border-subtle' | 'teal-border' | 'teal-border-prominent' | 'teal-border-subtle' | 'coal-avatar-background' | 'coral-avatar-background' | 'cyan-avatar-background' | 'light-coal-avatar-background' | 'light-coral-avatar-background' | 'light-cyan-avatar-background' | 'light-lilac-avatar-background' | 'light-lime-avatar-background' | 'light-moss-avatar-background' | 'light-ocean-avatar-background' | 'light-orange-avatar-background' | 'light-pink-avatar-background' | 'light-sunshine-avatar-background' | 'light-teal-avatar-background' | 'lilac-avatar-background' | 'lime-avatar-background' | 'moss-avatar-background' | 'ocean-avatar-background' | 'orange-avatar-background' | 'pink-avatar-background' | 'sunshine-avatar-background' | 'teal-avatar-background' | 'coral-comment-background' | 'cyan-comment-background' | 'lime-comment-background' | 'coal-cursor-background' | 'coal-cursor-border' | 'coal-cursor-border-prominent' | 'coral-cursor-background' | 'coral-cursor-border' | 'coral-cursor-border-prominent' | 'cyan-cursor-background' | 'cyan-cursor-border' | 'cyan-cursor-border-prominent' | 'light-coal-cursor-background' | 'light-coral-cursor-background' | 'light-cursor-background' | 'light-cyan-cursor-background' | 'light-lilac-cursor-background' | 'light-lime-cursor-background' | 'light-moss-cursor-background' | 'light-orange-cursor-background' | 'light-pink-cursor-background' | 'light-sunshine-cursor-background' | 'light-teal-cursor-background' | 'lilac-cursor-background' | 'lilac-cursor-border' | 'lilac-cursor-border-prominent' | 'lime-cursor-background' | 'lime-cursor-border' | 'lime-cursor-border-prominent' | 'moss-cursor-background' | 'moss-cursor-border' | 'moss-cursor-border-prominent' | 'ocean-cursor-background' | 'ocean-cursor-border' | 'ocean-cursor-border-prominent' | 'orange-cursor-background' | 'orange-cursor-border' | 'orange-cursor-border-prominent' | 'pink-cursor-background' | 'pink-cursor-border-prominent' | 'pink-cursor-coal-border' | 'sunshine-cursor-background' | 'sunshine-cursor-border' | 'susnhine-cursor-border-prominent' | 'teal-cursor-background' | 'teal-cursor-border' | 'teal-cursor-border-prominent' | 'black-sticky-background' | 'coral-sticky-background' | 'cyan-sticky-background' | 'light-coal-sticky-background' | 'light-lime-sticky-background' | 'light-ocean-sticky-background' | 'light-pink-sticky-background' | 'light-sunshine-sticky-background' | 'lilac-sticky-background' | 'lime-sticky-background' | 'moss-sticky-background' | 'ocean-sticky-background' | 'orange-sticky-background' | 'pink-sticky-background' | 'sunshine-sticky-background' | 'teal-sticky-background' | 'coal-icon' | 'coal-icon-mild' | 'coal-icon-subtle' | 'coral-icon' | 'coral-icon-mild' | 'coral-icon-subtle' | 'cyan-icon' | 'cyan-icon-mild' | 'cyan-icon-subtle' | 'lilac-icon' | 'lilac-icon-mild' | 'lilac-icon-subtle' | 'lime-icon' | 'lime-icon-mild' | 'lime-icon-subtle' | 'moss-icon' | 'moss-icon-mild' | 'moss-icon-subtle' | 'ocean-icon' | 'ocean-icon-mild' | 'ocean-icon-subtle' | 'orange-icon' | 'orange-icon-mild' | 'orange-icon-subtle' | 'pink-icon' | 'pink-icon-mild' | 'pink-icon-subtle' | 'sunshine-icon' | 'sunshine-icon-mild' | 'sunshine-icon-subtle' | 'teal-icon' | 'teal-icon-mild' | 'teal-icon-subtle' | 'coal-text' | 'coal-text-mild' | 'coal-text-subtle' | 'coral-text' | 'coral-text-mild' | 'coral-text-subtle' | 'cyan-text' | 'cyan-text-mild' | 'cyan-text-subtle' | 'lilac-text' | 'lilac-text-mild' | 'lilac-text-subtle' | 'lime-text' | 'lime-text-mild' | 'lime-text-subtle' | 'moss-text' | 'moss-text-mild' | 'moss-text-subtle' | 'ocean-text' | 'ocean-text-mild' | 'ocean-text-subtle' | 'orange-text' | 'orange-text-mild' | 'orange-text-subtle' | 'pink-text' | 'pink-text-mild' | 'pink-text-subtle' | 'sunshine-text' | 'sunshine-text-mild' | 'sunshine-text-subtle' | 'teal-text' | 'teal-text-mild' | 'teal-text-subtle';
7
7
 
8
8
  declare const aliasShadows: {
9
9
  readonly focus: "0 0 0 2px $colors$border-focus-inner, 0 0 0 4px $colors$focus-keyboard";
package/light.css CHANGED
@@ -174,7 +174,19 @@
174
174
  --colors-button-background-danger-pressed: var(--colors-red-600);
175
175
  --colors-button-background-ghost: var(--colors-transparent);
176
176
  --colors-button-background-ghost-hover: var(--colors-gray-150);
177
+ --colors-button-background-ghost-inverse-hover: var(--colors-gray-800);
178
+ --colors-button-background-ghost-inverse-pressed: var(--colors-gray-750);
177
179
  --colors-button-background-ghost-pressed: var(--colors-gray-200);
180
+ --colors-button-background-info: var(--colors-blue-500);
181
+ --colors-button-background-info-hover: var(--colors-blue-550);
182
+ --colors-button-background-info-pressed: var(--colors-blue-600);
183
+ --colors-button-background-inverse: var(--colors-blue-500);
184
+ --colors-button-background-inverse-disabled: var(--colors-gray-850);
185
+ --colors-button-background-inverse-hover: var(--colors-blue-550);
186
+ --colors-button-background-inverse-pressed: var(--colors-blue-600);
187
+ --colors-button-background-inverse-secondary: var(--colors-gray-750);
188
+ --colors-button-background-inverse-secondary-hover: var(--colors-gray-700);
189
+ --colors-button-background-inverse-secondary-pressed: var(--colors-gray-700);
178
190
  --colors-button-background-primary: var(--colors-blue-500);
179
191
  --colors-button-background-primary-hover: var(--colors-blue-550);
180
192
  --colors-button-background-primary-pressed: var(--colors-blue-600);
@@ -184,11 +196,17 @@
184
196
  --colors-button-background-tertiary: var(--colors-transparent);
185
197
  --colors-button-background-tertiary-hover: var(--colors-blue-150);
186
198
  --colors-button-background-tertiary-pressed: var(--colors-blue-200);
199
+ --colors-button-background-warning: var(--colors-yellow-700);
200
+ --colors-button-background-warning-hover: var(--colors-yellow-750);
201
+ --colors-button-background-warning-pressed: var(--colors-yellow-800);
187
202
  --colors-button-border-danger: var(--colors-red-500);
188
203
  --colors-button-border-danger-hover: var(--colors-red-550);
189
204
  --colors-button-border-danger-pressed: var(--colors-red-600);
190
205
  --colors-button-border-ghost-hover: var(--colors-transparent);
191
206
  --colors-button-border-ghost-pressed: var(--colors-transparent);
207
+ --colors-button-border-inverse-secondary: var(--colors-gray-750);
208
+ --colors-button-border-inverse-secondary-hover: var(--colors-gray-700);
209
+ --colors-button-border-inverse-secondary-pressed: var(--colors-gray-650);
192
210
  --colors-button-border-primary: var(--colors-blue-500);
193
211
  --colors-button-border-primary-hover: var(--colors-blue-550);
194
212
  --colors-button-border-primary-pressed: var(--colors-blue-600);
@@ -199,10 +217,16 @@
199
217
  --colors-button-border-tertiary-hover: var(--colors-blue-550);
200
218
  --colors-button-border-tertiary-pressed: var(--colors-blue-600);
201
219
  --colors-button-icon-on-danger: var(--colors-white);
220
+ --colors-button-icon-on-inverse: var(--colors-white);
221
+ --colors-button-icon-on-inverse-disabled: var(--colors-gray-450);
222
+ --colors-button-icon-on-inverse-secondary: var(--colors-gray-50);
202
223
  --colors-button-icon-on-primary: var(--colors-white);
203
224
  --colors-button-icon-on-secondary: var(--colors-gray-900);
204
225
  --colors-button-icon-on-tertiary: var(--colors-blue-500);
205
226
  --colors-button-text-on-danger: var(--colors-white);
227
+ --colors-button-text-on-inverse: var(--colors-white);
228
+ --colors-button-text-on-inverse-disabled: var(--colors-gray-450);
229
+ --colors-button-text-on-inverse-secondary: var(--colors-gray-50);
206
230
  --colors-button-text-on-primary: var(--colors-white);
207
231
  --colors-button-text-on-secondary: var(--colors-gray-900);
208
232
  --colors-button-text-on-tertiary: var(--colors-blue-500);
@@ -265,6 +289,7 @@
265
289
  --colors-toolbar-item-background-selected: var(--colors-blue-150);
266
290
  --colors-tooltip-background: var(--colors-gray-950);
267
291
  --colors-tooltip-background-inset: var(--colors-gray-650);
292
+ --colors-tooltip-background-inverse: var(--colors-gray-650);
268
293
  --colors-icon-danger: var(--colors-red-500);
269
294
  --colors-icon-danger-active: var(--colors-red-600);
270
295
  --colors-icon-danger-hover: var(--colors-red-550);
@@ -276,6 +301,7 @@
276
301
  --colors-icon-inverted-secondary: var(--colors-gray-150);
277
302
  --colors-icon-muted: var(--colors-gray-400);
278
303
  --colors-icon-on-disabled: var(--colors-gray-350);
304
+ --colors-icon-on-disabled-inverse: var(--colors-gray-450);
279
305
  --colors-icon-on-static-dark: var(--colors-gray-50);
280
306
  --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
281
307
  --colors-icon-on-static-light: var(--colors-gray-900);
@@ -290,6 +316,7 @@
290
316
  --colors-icon-interactive-on-inverted-secondary-pressed: var(
291
317
  --colors-gray-250
292
318
  );
319
+ --colors-icon-interactive-on-inverted-selected: var(--colors-blue-400);
293
320
  --colors-icon-interactive-primary: var(--colors-blue-500);
294
321
  --colors-icon-interactive-primary-hover: var(--colors-blue-550);
295
322
  --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
@@ -403,6 +430,7 @@
403
430
  --colors-text-inverted-secondary: var(--colors-gray-150);
404
431
  --colors-text-muted: var(--colors-gray-400);
405
432
  --colors-text-on-disabled: var(--colors-gray-350);
433
+ --colors-text-on-inverse-disabled: var(--colors-gray-450);
406
434
  --colors-text-on-static-dark: var(--colors-gray-50);
407
435
  --colors-text-on-static-dark-subtle: var(--colors-gray-300);
408
436
  --colors-text-on-static-light: var(--colors-gray-900);
package/metadata.json CHANGED
@@ -494,9 +494,45 @@
494
494
  "buttonBackgroundGhostHover": {
495
495
  "description": "The hover-state background for ghost Button components — buttons with no visible background at rest. Use when a transparent button reveals a subtle fill on hover. Do not use for tertiary buttons that have a resting background; use `button-background-tertiary-hover` for those."
496
496
  },
497
+ "buttonBackgroundGhostInverseHover": {
498
+ "description": "The hover-state background for ghost Button components — buttons with no visible background at rest. Use when a transparent button reveals a subtle fill on hover. Do not use for tertiary buttons that have a resting background; use `button-background-tertiary-hover` for those."
499
+ },
500
+ "buttonBackgroundGhostInversePressed": {
501
+ "description": "The pressed/active-state background for ghost Button components. Use when a transparent button is being actively clicked. Do not use for tertiary buttons with a resting background."
502
+ },
497
503
  "buttonBackgroundGhostPressed": {
498
504
  "description": "The pressed/active-state background for ghost Button components. Use when a transparent button is being actively clicked. Do not use for tertiary buttons with a resting background."
499
505
  },
506
+ "buttonBackgroundInfo": {
507
+ "description": "The resting-state background for danger Button components — delete, remove, or irreversible action buttons. Use exclusively within the Button component for destructive actions. Do not use for warning states; use `status-background-warning`. Do not use for non-button danger elements; use `background-interactive-danger` for those."
508
+ },
509
+ "buttonBackgroundInfoHover": {
510
+ "description": "The hover-state background for danger Button components. Use exclusively within danger buttons when a pointer is hovering. Do not use for resting or pressed danger states."
511
+ },
512
+ "buttonBackgroundInfoPressed": {
513
+ "description": "The pressed/active-state background for danger Button components. Use exclusively within danger buttons when being actively clicked. Do not use for hover or resting danger states."
514
+ },
515
+ "buttonBackgroundInverse": {
516
+ "description": "The resting-state background for primary Button components — the highest-emphasis call-to-action button. Use exclusively within primary Button components at rest. Do not use for secondary, tertiary, or ghost buttons. Do not use for non-button interactive elements; use `background-interactive-primary` for those."
517
+ },
518
+ "buttonBackgroundInverseDisabled": {
519
+ "description": "The background for any disabled component or element that is not interactive. Use to visually communicate that a surface is unavailable or inactive. Do not use for enabled elements in any state, even if they visually appear muted. Always pair with `text-on-disabled` for text on top."
520
+ },
521
+ "buttonBackgroundInverseHover": {
522
+ "description": "The hover-state background for primary Button components. Use exclusively within primary buttons when a pointer is hovering. Do not use for resting or pressed states."
523
+ },
524
+ "buttonBackgroundInversePressed": {
525
+ "description": "The hover-state background for primary Button components. Use exclusively within primary buttons when a pointer is hovering. Do not use for resting or pressed states."
526
+ },
527
+ "buttonBackgroundInverseSecondary": {
528
+ "description": "The resting-state background for secondary Button components — medium-emphasis buttons typically paired with a border. Use exclusively within secondary Button components at rest. Do not use for primary, tertiary, or ghost buttons. Do not use for non-button interactive elements."
529
+ },
530
+ "buttonBackgroundInverseSecondaryHover": {
531
+ "description": "The hover-state background for secondary Button components. Use exclusively within secondary buttons when a pointer is hovering. Do not use for resting or pressed states."
532
+ },
533
+ "buttonBackgroundInverseSecondaryPressed": {
534
+ "description": "The pressed/active-state background for secondary Button components. Use exclusively within secondary buttons when being actively clicked. Do not use for hover or resting states."
535
+ },
500
536
  "buttonBackgroundPrimary": {
501
537
  "description": "The resting-state background for primary Button components — the highest-emphasis call-to-action button. Use exclusively within primary Button components at rest. Do not use for secondary, tertiary, or ghost buttons. Do not use for non-button interactive elements; use `background-interactive-primary` for those."
502
538
  },
@@ -524,6 +560,15 @@
524
560
  "buttonBackgroundTertiaryPressed": {
525
561
  "description": "The pressed/active-state background for tertiary Button components. Use when a tertiary button is being actively activated. Do not use for hover or resting states."
526
562
  },
563
+ "buttonBackgroundWarning": {
564
+ "description": "The resting-state background for danger Button components — delete, remove, or irreversible action buttons. Use exclusively within the Button component for destructive actions. Do not use for warning states; use `status-background-warning`. Do not use for non-button danger elements; use `background-interactive-danger` for those."
565
+ },
566
+ "buttonBackgroundWarningHover": {
567
+ "description": "The hover-state background for danger Button components. Use exclusively within danger buttons when a pointer is hovering. Do not use for resting or pressed danger states."
568
+ },
569
+ "buttonBackgroundWarningPressed": {
570
+ "description": "The pressed/active-state background for danger Button components. Use exclusively within danger buttons when being actively clicked. Do not use for hover or resting danger states."
571
+ },
527
572
  "buttonBorderDanger": {
528
573
  "description": "The resting-state border for danger Button components. Use exclusively within danger Button components at rest. Do not use for form input error borders; use `input-border-error`. Do not use for non-button danger elements; use `border-interactive-danger`."
529
574
  },
@@ -539,6 +584,15 @@
539
584
  "buttonBorderGhostPressed": {
540
585
  "description": "The pressed/active-state border for ghost Button components. Use exclusively within ghost buttons when being activated."
541
586
  },
587
+ "buttonBorderInverseSecondary": {
588
+ "description": "The resting-state border for secondary Button components. Use exclusively within secondary Button components at rest. Do not use for non-button interactive elements; use `border-interactive-secondary` for those."
589
+ },
590
+ "buttonBorderInverseSecondaryHover": {
591
+ "description": "The hover-state border for secondary Button components. Use exclusively within secondary buttons on hover. Do not use for resting or pressed states."
592
+ },
593
+ "buttonBorderInverseSecondaryPressed": {
594
+ "description": "The pressed/active-state border for secondary Button components. Use exclusively within secondary buttons when being activated. Do not use for hover or resting states."
595
+ },
542
596
  "buttonBorderPrimary": {
543
597
  "description": "The resting-state border for primary Button components. Use exclusively within primary Button components at rest. Do not use for non-button interactive elements; use `border-interactive-primary` for those."
544
598
  },
@@ -569,6 +623,15 @@
569
623
  "buttonIconOnDanger": {
570
624
  "description": "The icon color for icons inside danger Button components. Use exclusively within danger buttons to ensure icon legibility over `button-background-danger` and its states. Do not use on non-button danger elements; use `icon-on-interactive-danger` for those."
571
625
  },
626
+ "buttonIconOnInverse": {
627
+ "description": "The icon color for icons inside primary Button components. Use exclusively within primary buttons to ensure icon legibility over `button-background-primary` and its states. Do not use on non-button interactive elements; use `icon-on-interactive-primary` for those."
628
+ },
629
+ "buttonIconOnInverseDisabled": {
630
+ "description": "The icon color for icons inside secondary Button components. Use exclusively within secondary buttons. Do not use on non-button interactive elements; use `icon-on-interactive-secondary` for those."
631
+ },
632
+ "buttonIconOnInverseSecondary": {
633
+ "description": "The icon color for icons inside secondary Button components. Use exclusively within secondary buttons. Do not use on non-button interactive elements; use `icon-on-interactive-secondary` for those."
634
+ },
572
635
  "buttonIconOnPrimary": {
573
636
  "description": "The icon color for icons inside primary Button components. Use exclusively within primary buttons to ensure icon legibility over `button-background-primary` and its states. Do not use on non-button interactive elements; use `icon-on-interactive-primary` for those."
574
637
  },
@@ -581,6 +644,15 @@
581
644
  "buttonTextOnDanger": {
582
645
  "description": "The text color for labels on danger Button components. Use exclusively for button label text over `button-background-danger` and its states. Do not use on non-button danger elements; use `text-on-interactive-danger` for those."
583
646
  },
647
+ "buttonTextOnInverse": {
648
+ "description": "The text color for labels on primary Button components. Use exclusively for button label text over `button-background-primary` and its states. Do not use on non-button interactive elements; use `text-on-interactive-primary` for those."
649
+ },
650
+ "buttonTextOnInverseDisabled": {
651
+ "description": "The text color for labels on primary Button components. Use exclusively for button label text over `button-background-primary` and its states. Do not use on non-button interactive elements; use `text-on-interactive-primary` for those."
652
+ },
653
+ "buttonTextOnInverseSecondary": {
654
+ "description": "The text color for labels on secondary Button components. Use exclusively for button label text over secondary button surfaces. Do not use on non-button interactive elements; use `text-on-interactive-secondary` for those."
655
+ },
584
656
  "buttonTextOnPrimary": {
585
657
  "description": "The text color for labels on primary Button components. Use exclusively for button label text over `button-background-primary` and its states. Do not use on non-button interactive elements; use `text-on-interactive-primary` for those."
586
658
  },
@@ -767,6 +839,9 @@
767
839
  "tooltipBackgroundInset": {
768
840
  "description": "Background for UI elements nested inside a Tooltip container — such as hotkey badges and inline labels. Do not use as the tooltip surface itself; use `tooltip-background` for that."
769
841
  },
842
+ "tooltipBackgroundInverse": {
843
+ "description": "The component-specific background color for tooltip components. Use within the Tooltip component to surface contextual hints and label text. Do not use for Popover surfaces; use `popover-background` for those. Do not use for dropdowns or other floating surfaces."
844
+ },
770
845
  "iconDanger": {
771
846
  "description": "⚠️ Deprecated. Use `status-icon-error` instead."
772
847
  },
@@ -800,6 +875,9 @@
800
875
  "iconOnDisabled": {
801
876
  "description": "The icon color for icons rendered on top of a disabled background fill (`background-disabled`). Use to maintain icon visibility within disabled component surfaces. Do not use for icons in enabled states. Always pair with `background-disabled`."
802
877
  },
878
+ "iconOnDisabledInverse": {
879
+ "description": "The icon color for icons rendered on top of a disabled background fill (`background-disabled`). Use to maintain icon visibility within disabled component surfaces. Do not use for icons in enabled states. Always pair with `background-disabled`."
880
+ },
803
881
  "iconOnStaticDark": {
804
882
  "description": "The primary icon color for always-dark static surfaces — icons on backgrounds that remain dark in both themes. Use for primary icons on static-dark components like code blocks or dark toolbars. Do not use on theme-responsive inverted surfaces; use `icon-inverted` for those."
805
883
  },
@@ -836,6 +914,9 @@
836
914
  "iconInteractiveOnInvertedSecondaryPressed": {
837
915
  "description": "The pressed/active-state color for secondary-priority icons paired with links on dark or inverted backgrounds. Use when a secondary link on an inverted surface is being actively activated."
838
916
  },
917
+ "iconInteractiveOnInvertedSelected": {
918
+ "description": "The icon color for icons belonging to an element in a selected or toggled-on state — such as active nav items, selected toolbar buttons, or toggled controls. Use when the parent element is in a persistent selected state (not transient hover or press). Pairs with `background-interactive-selected`. Do not use for hover or pressed states; each has its own token."
919
+ },
839
920
  "iconInteractivePrimary": {
840
921
  "description": "The default resting-state color for icons paired with text links or anchor elements. Use for icons that visually support or accompany inline link text. Do not use for icons on buttons; use `icon-on-interactive-primary`, `icon-on-interactive-secondary`, or `button-icon-on-tertiary`. Do not use for icons on inverted surfaces; use `icon-link-on-inverted`."
841
922
  },
@@ -1169,6 +1250,9 @@
1169
1250
  "textOnDisabled": {
1170
1251
  "description": "The text color for content rendered on top of a disabled background fill (`background-disabled`). Use to ensure legibility of text inside disabled component surfaces. Do not use for text in standard enabled states. Always pair with `background-disabled`."
1171
1252
  },
1253
+ "textOnInverseDisabled": {
1254
+ "description": "The text color for content rendered on top of a disabled background fill (`background-disabled`). Use to ensure legibility of text inside disabled component surfaces. Do not use for text in standard enabled states. Always pair with `background-disabled`."
1255
+ },
1172
1256
  "textOnStaticDark": {
1173
1257
  "description": "The primary text color for use on always-dark static surfaces — backgrounds that remain dark in both light and dark themes. Use for primary readable text on static-dark components like code blocks or dark tooltips. Do not use on theme-responsive inverted surfaces; use `text-inverted` for those."
1174
1258
  },
package/new-dark.css CHANGED
@@ -174,7 +174,19 @@
174
174
  --colors-button-background-danger-pressed: var(--colors-red-450);
175
175
  --colors-button-background-ghost: var(--colors-transparent);
176
176
  --colors-button-background-ghost-hover: var(--colors-ink-750);
177
+ --colors-button-background-ghost-inverse-hover: var(--colors-ink-150);
178
+ --colors-button-background-ghost-inverse-pressed: var(--colors-ink-200);
177
179
  --colors-button-background-ghost-pressed: var(--colors-ink-700);
180
+ --colors-button-background-info: var(--colors-blue-500);
181
+ --colors-button-background-info-hover: var(--colors-blue-550);
182
+ --colors-button-background-info-pressed: var(--colors-blue-600);
183
+ --colors-button-background-inverse: var(--colors-ink-800);
184
+ --colors-button-background-inverse-disabled: var(--colors-ink-150);
185
+ --colors-button-background-inverse-hover: var(--colors-ink-900);
186
+ --colors-button-background-inverse-pressed: var(--colors-ink-950);
187
+ --colors-button-background-inverse-secondary: var(--colors-ink-150);
188
+ --colors-button-background-inverse-secondary-hover: var(--colors-ink-200);
189
+ --colors-button-background-inverse-secondary-pressed: var(--colors-ink-250);
178
190
  --colors-button-background-primary: var(--colors-white);
179
191
  --colors-button-background-primary-hover: var(--colors-ink-100);
180
192
  --colors-button-background-primary-pressed: var(--colors-ink-150);
@@ -184,11 +196,17 @@
184
196
  --colors-button-background-tertiary: var(--colors-transparent);
185
197
  --colors-button-background-tertiary-hover: var(--colors-ink-750);
186
198
  --colors-button-background-tertiary-pressed: var(--colors-ink-700);
199
+ --colors-button-background-warning: var(--colors-yellow-700);
200
+ --colors-button-background-warning-hover: var(--colors-yellow-750);
201
+ --colors-button-background-warning-pressed: var(--colors-yellow-800);
187
202
  --colors-button-border-danger: var(--colors-red-500);
188
203
  --colors-button-border-danger-hover: var(--colors-red-450);
189
204
  --colors-button-border-danger-pressed: var(--colors-red-400);
190
205
  --colors-button-border-ghost-hover: var(--colors-transparent);
191
206
  --colors-button-border-ghost-pressed: var(--colors-transparent);
207
+ --colors-button-border-inverse-secondary: var(--colors-transparent);
208
+ --colors-button-border-inverse-secondary-hover: var(--colors-transparent);
209
+ --colors-button-border-inverse-secondary-pressed: var(--colors-transparent);
192
210
  --colors-button-border-primary: var(--colors-blue-500);
193
211
  --colors-button-border-primary-hover: var(--colors-blue-450);
194
212
  --colors-button-border-primary-pressed: var(--colors-blue-400);
@@ -199,10 +217,16 @@
199
217
  --colors-button-border-tertiary-hover: var(--colors-ink-550);
200
218
  --colors-button-border-tertiary-pressed: var(--colors-ink-500);
201
219
  --colors-button-icon-on-danger: var(--colors-white);
220
+ --colors-button-icon-on-inverse: var(--colors-white);
221
+ --colors-button-icon-on-inverse-disabled: var(--colors-ink-350);
222
+ --colors-button-icon-on-inverse-secondary: var(--colors-ink-900);
202
223
  --colors-button-icon-on-primary: var(--colors-ink-900);
203
224
  --colors-button-icon-on-secondary: var(--colors-white);
204
225
  --colors-button-icon-on-tertiary: var(--colors-white);
205
226
  --colors-button-text-on-danger: var(--colors-white);
227
+ --colors-button-text-on-inverse: var(--colors-white);
228
+ --colors-button-text-on-inverse-disabled: var(--colors-ink-350);
229
+ --colors-button-text-on-inverse-secondary: var(--colors-ink-900);
206
230
  --colors-button-text-on-primary: var(--colors-ink-900);
207
231
  --colors-button-text-on-secondary: var(--colors-white);
208
232
  --colors-button-text-on-tertiary: var(--colors-white);
@@ -265,6 +289,7 @@
265
289
  --colors-toolbar-item-background-selected: var(--colors-ink-700);
266
290
  --colors-tooltip-background: var(--colors-ink-650);
267
291
  --colors-tooltip-background-inset: var(--colors-ink-800);
292
+ --colors-tooltip-background-inverse: var(--colors-ink-950);
268
293
  --colors-icon-danger: var(--colors-red-400);
269
294
  --colors-icon-danger-active: var(--colors-red-300);
270
295
  --colors-icon-danger-hover: var(--colors-red-350);
@@ -276,6 +301,7 @@
276
301
  --colors-icon-inverted-secondary: var(--colors-ink-700);
277
302
  --colors-icon-muted: var(--colors-ink-400);
278
303
  --colors-icon-on-disabled: var(--colors-ink-450);
304
+ --colors-icon-on-disabled-inverse: var(--colors-ink-350);
279
305
  --colors-icon-on-static-dark: var(--colors-ink-50);
280
306
  --colors-icon-on-static-dark-subtle: var(--colors-ink-300);
281
307
  --colors-icon-on-static-light: var(--colors-ink-900);
@@ -290,6 +316,7 @@
290
316
  --colors-icon-interactive-on-inverted-secondary-pressed: var(
291
317
  --colors-ink-600
292
318
  );
319
+ --colors-icon-interactive-on-inverted-selected: var(--colors-blue-550);
293
320
  --colors-icon-interactive-primary: var(--colors-blue-500);
294
321
  --colors-icon-interactive-primary-hover: var(--colors-blue-450);
295
322
  --colors-icon-interactive-primary-pressed: var(--colors-blue-400);
@@ -403,6 +430,7 @@
403
430
  --colors-text-inverted-secondary: var(--colors-ink-700);
404
431
  --colors-text-muted: var(--colors-ink-400);
405
432
  --colors-text-on-disabled: var(--colors-ink-500);
433
+ --colors-text-on-inverse-disabled: var(--colors-ink-350);
406
434
  --colors-text-on-static-dark: var(--colors-white);
407
435
  --colors-text-on-static-dark-subtle: var(--colors-ink-300);
408
436
  --colors-text-on-static-light: var(--colors-ink-900);
@@ -423,7 +451,7 @@
423
451
  --radii-input: var(--radii-150);
424
452
  --radii-list-item: var(--radii-150);
425
453
  --radii-notification: var(--radii-200);
426
- --radii-notification-banner: var(--radii-round);
454
+ --radii-notification-banner: var(--radii-200);
427
455
  --radii-panel: var(--radii-200);
428
456
  --radii-popover: var(--radii-150);
429
457
  --radii-tag: var(--radii-round);
package/new-light.css CHANGED
@@ -174,7 +174,19 @@
174
174
  --colors-button-background-danger-pressed: var(--colors-red-600);
175
175
  --colors-button-background-ghost: var(--colors-transparent);
176
176
  --colors-button-background-ghost-hover: var(--colors-cloud-150);
177
+ --colors-button-background-ghost-inverse-hover: var(--colors-cloud-750);
178
+ --colors-button-background-ghost-inverse-pressed: var(--colors-cloud-700);
177
179
  --colors-button-background-ghost-pressed: var(--colors-cloud-200);
180
+ --colors-button-background-info: var(--colors-blue-500);
181
+ --colors-button-background-info-hover: var(--colors-blue-550);
182
+ --colors-button-background-info-pressed: var(--colors-blue-600);
183
+ --colors-button-background-inverse: var(--colors-white);
184
+ --colors-button-background-inverse-disabled: var(--colors-cloud-650);
185
+ --colors-button-background-inverse-hover: var(--colors-cloud-100);
186
+ --colors-button-background-inverse-pressed: var(--colors-cloud-150);
187
+ --colors-button-background-inverse-secondary: var(--colors-cloud-700);
188
+ --colors-button-background-inverse-secondary-hover: var(--colors-cloud-650);
189
+ --colors-button-background-inverse-secondary-pressed: var(--colors-cloud-600);
178
190
  --colors-button-background-primary: var(--colors-cloud-800);
179
191
  --colors-button-background-primary-hover: var(--colors-cloud-900);
180
192
  --colors-button-background-primary-pressed: var(--colors-cloud-950);
@@ -184,11 +196,17 @@
184
196
  --colors-button-background-tertiary: var(--colors-transparent);
185
197
  --colors-button-background-tertiary-hover: var(--colors-cloud-150);
186
198
  --colors-button-background-tertiary-pressed: var(--colors-cloud-200);
199
+ --colors-button-background-warning: var(--colors-yellow-700);
200
+ --colors-button-background-warning-hover: var(--colors-yellow-750);
201
+ --colors-button-background-warning-pressed: var(--colors-yellow-800);
187
202
  --colors-button-border-danger: var(--colors-red-500);
188
203
  --colors-button-border-danger-hover: var(--colors-red-550);
189
204
  --colors-button-border-danger-pressed: var(--colors-red-600);
190
205
  --colors-button-border-ghost-hover: var(--colors-transparent);
191
206
  --colors-button-border-ghost-pressed: var(--colors-transparent);
207
+ --colors-button-border-inverse-secondary: var(--colors-transparent);
208
+ --colors-button-border-inverse-secondary-hover: var(--colors-transparent);
209
+ --colors-button-border-inverse-secondary-pressed: var(--colors-transparent);
192
210
  --colors-button-border-primary: var(--colors-blue-500);
193
211
  --colors-button-border-primary-hover: var(--colors-blue-550);
194
212
  --colors-button-border-primary-pressed: var(--colors-blue-600);
@@ -199,10 +217,16 @@
199
217
  --colors-button-border-tertiary-hover: var(--colors-cloud-550);
200
218
  --colors-button-border-tertiary-pressed: var(--colors-cloud-600);
201
219
  --colors-button-icon-on-danger: var(--colors-white);
220
+ --colors-button-icon-on-inverse: var(--colors-cloud-900);
221
+ --colors-button-icon-on-inverse-disabled: var(--colors-cloud-500);
222
+ --colors-button-icon-on-inverse-secondary: var(--colors-white);
202
223
  --colors-button-icon-on-primary: var(--colors-white);
203
224
  --colors-button-icon-on-secondary: var(--colors-cloud-900);
204
225
  --colors-button-icon-on-tertiary: var(--colors-cloud-900);
205
226
  --colors-button-text-on-danger: var(--colors-white);
227
+ --colors-button-text-on-inverse: var(--colors-cloud-900);
228
+ --colors-button-text-on-inverse-disabled: var(--colors-cloud-500);
229
+ --colors-button-text-on-inverse-secondary: var(--colors-white);
206
230
  --colors-button-text-on-primary: var(--colors-white);
207
231
  --colors-button-text-on-secondary: var(--colors-cloud-900);
208
232
  --colors-button-text-on-tertiary: var(--colors-cloud-900);
@@ -265,6 +289,7 @@
265
289
  --colors-toolbar-item-background-selected: var(--colors-cloud-150);
266
290
  --colors-tooltip-background: var(--colors-cloud-950);
267
291
  --colors-tooltip-background-inset: var(--colors-cloud-650);
292
+ --colors-tooltip-background-inverse: var(--colors-cloud-650);
268
293
  --colors-icon-danger: var(--colors-red-500);
269
294
  --colors-icon-danger-active: var(--colors-red-600);
270
295
  --colors-icon-danger-hover: var(--colors-red-550);
@@ -276,6 +301,7 @@
276
301
  --colors-icon-inverted-secondary: var(--colors-cloud-300);
277
302
  --colors-icon-muted: var(--colors-cloud-500);
278
303
  --colors-icon-on-disabled: var(--colors-cloud-350);
304
+ --colors-icon-on-disabled-inverse: var(--colors-cloud-450);
279
305
  --colors-icon-on-static-dark: var(--colors-cloud-50);
280
306
  --colors-icon-on-static-dark-subtle: var(--colors-cloud-300);
281
307
  --colors-icon-on-static-light: var(--colors-cloud-900);
@@ -292,6 +318,7 @@
292
318
  --colors-icon-interactive-on-inverted-secondary-pressed: var(
293
319
  --colors-cloud-400
294
320
  );
321
+ --colors-icon-interactive-on-inverted-selected: var(--colors-blue-400);
295
322
  --colors-icon-interactive-primary: var(--colors-blue-500);
296
323
  --colors-icon-interactive-primary-hover: var(--colors-blue-550);
297
324
  --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
@@ -407,6 +434,7 @@
407
434
  --colors-text-inverted-secondary: var(--colors-cloud-300);
408
435
  --colors-text-muted: var(--colors-cloud-500);
409
436
  --colors-text-on-disabled: var(--colors-cloud-350);
437
+ --colors-text-on-inverse-disabled: var(--colors-cloud-500);
410
438
  --colors-text-on-static-dark: var(--colors-white);
411
439
  --colors-text-on-static-dark-subtle: var(--colors-cloud-300);
412
440
  --colors-text-on-static-light: var(--colors-cloud-900);
@@ -427,7 +455,7 @@
427
455
  --radii-input: var(--radii-150);
428
456
  --radii-list-item: var(--radii-150);
429
457
  --radii-notification: var(--radii-200);
430
- --radii-notification-banner: var(--radii-round);
458
+ --radii-notification-banner: var(--radii-200);
431
459
  --radii-panel: var(--radii-200);
432
460
  --radii-popover: var(--radii-150);
433
461
  --radii-tag: var(--radii-round);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-themes",
3
- "version": "1.4.9",
3
+ "version": "1.4.11",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -36,7 +36,7 @@
36
36
  "access": "public"
37
37
  },
38
38
  "dependencies": {
39
- "@mirohq/design-tokens": "^12.5.0"
39
+ "@mirohq/design-tokens": "^12.7.0"
40
40
  },
41
41
  "devDependencies": {
42
42
  "@types/lodash.kebabcase": "4.1.7",