@mirohq/design-system-themes 1.1.2 → 1.2.0

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 (9) hide show
  1. package/base.css +175 -11
  2. package/dark.css +179 -15
  3. package/dist/main.js +1582 -52
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +1581 -53
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +4 -2
  8. package/light.css +175 -11
  9. package/package.json +2 -2
package/dist/types.d.ts CHANGED
@@ -3,7 +3,7 @@ import { Colors } 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-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-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-static-dark' | 'background-static-dark-subtle' | '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' | '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-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-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-static-dark' | 'border-static-dark-subtle' | 'border-primary' | 'border-primary-active' | 'border-primary-hover' | 'border-primary-inverted' | 'border-primary-pressed' | 'border-primary-selected' | 'border-primary-subtle' | 'border-success' | 'border-success-active' | 'border-success-hover' | 'border-success-pressed' | 'border-success-subtle' | 'border-warning' | 'border-warning-subtle' | 'button-background-primary' | 'button-background-primary-hover' | 'button-background-primary-pressed' | 'button-background-secondary' | 'button-background-secondary-hover' | 'button-background-secondary-pressed' | 'format-icon-diagram' | 'format-icon-docs' | 'format-icon-external' | 'format-icon-kanban' | 'format-icon-prototype' | 'format-icon-slides' | 'format-icon-table' | 'format-icon-timeline' | 'notification-background' | 'notification-border' | 'notification-border-subtle' | 'popup-background-static' | 'popup-text-static' | 'tooltip-background' | 'icon-danger' | 'icon-danger-active' | 'icon-danger-hover' | 'icon-danger-inverted' | 'icon-danger-pressed' | '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-on-static-dark' | 'icon-on-static-dark-subtle' | 'icon-primary' | 'icon-primary-active' | 'icon-primary-hover' | 'icon-primary-inverted' | 'icon-primary-inverted-hover' | 'icon-primary-pressed' | 'icon-primary-selected' | '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-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-on-static-dark' | 'text-on-static-dark-subtle' | 'text-on-primary' | 'text-primary' | 'text-primary-active' | 'text-primary-hover' | 'text-primary-inverted' | 'text-primary-inverted-subtle' | 'text-primary-pressed' | 'text-primary-selected' | 'text-success' | 'text-success-active' | 'text-success-hover' | 'text-success-inverted' | 'text-success-pressed' | '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-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-selected' | 'background-interactive-surface-hover' | 'background-interactive-surface-secondary-hover' | '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-static-dark' | 'border-static-dark-subtle' | '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' | '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-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-active' | 'input-background-alt-active' | 'input-background-alt-default' | 'input-background-alt-hover' | 'input-background-default' | 'input-background-disabled' | 'input-background-hover' | 'input-border-active' | 'input-border-default' | 'input-border-disabled' | 'input-border-error' | 'input-border-hover' | 'input-border-selection-control' | 'input-border-success' | 'notification-background' | 'notification-border' | 'notification-border-subtle' | 'popover-background' | 'popover-border' | 'scrollbar-background' | 'scrollbar-background-hover' | 'slider-background' | 'slider-notch-background' | 'switch-background-default' | 'switch-background-hover' | 'switch-control-background' | '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-placeholder' | 'icon-secondary' | 'icon-interactive-selected' | 'icon-link' | 'icon-link-hover' | 'icon-link-on-inverted' | 'icon-link-on-inverted-hover' | 'icon-link-on-inverted-pressed' | 'icon-link-on-inverted-secondary' | 'icon-link-on-inverted-secondary-hover' | 'icon-link-on-inverted-secondary-pressed' | 'icon-link-pressed' | 'icon-link-secondary' | 'icon-link-secondary-hover' | 'icon-link-secondary-pressed' | '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-selected' | 'text-link' | 'text-link-hover' | 'text-link-on-inverted' | 'text-link-on-inverted-hover' | 'text-link-on-inverted-pressed' | 'text-link-on-inverted-secondary' | 'text-link-on-inverted-secondary-hover' | 'text-link-on-inverted-secondary-pressed' | 'text-link-pressed' | 'text-link-secondary' | 'text-link-secondary-hover' | 'text-link-secondary-pressed' | '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-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";
@@ -25,8 +25,10 @@ type Theme = {
25
25
 
26
26
  declare const light: Theme;
27
27
  declare const dark: Theme;
28
+ declare const newLight: Theme;
29
+ declare const newDark: Theme;
28
30
 
29
31
  declare const base: Theme;
30
32
 
31
- export { base, dark, light };
33
+ export { base, dark, light, newDark, newLight };
32
34
  export type { AliasColors, AliasShadows, Color, Theme };
package/light.css CHANGED
@@ -9,6 +9,19 @@
9
9
  --colors-background-alpha-neutrals-overlay: #12193E66;
10
10
  --colors-background-alpha-neutrals-overlay-subtle: var(--colors-alpha-black-200);
11
11
  --colors-background-alpha-subtle: var(--colors-alpha-gray-50);
12
+ --colors-background-canvas: var(--colors-gray-50);
13
+ --colors-background-disabled: var(--colors-gray-150);
14
+ --colors-background-elevated: var(--colors-white);
15
+ --colors-background-inverted: var(--colors-gray-950);
16
+ --colors-background-inverted-secondary: var(--colors-gray-800);
17
+ --colors-background-layout: var(--colors-white);
18
+ --colors-background-overlay: var(--colors-alpha-black-400);
19
+ --colors-background-static-dark: var(--colors-gray-850);
20
+ --colors-background-static-dark-subtle: var(--colors-gray-750);
21
+ --colors-background-static-light: var(--colors-white);
22
+ --colors-background-surface: var(--colors-white);
23
+ --colors-background-surface-secondary: var(--colors-gray-100);
24
+ --colors-background-transparent: var(--colors-transparent);
12
25
  --colors-background-danger-prominent: var(--colors-red-500);
13
26
  --colors-background-danger-prominent-active: var(--colors-red-600);
14
27
  --colors-background-danger-prominent-hover: var(--colors-red-550);
@@ -17,6 +30,15 @@
17
30
  --colors-background-danger-subtle-active: var(--colors-red-150);
18
31
  --colors-background-danger-subtle-hover: var(--colors-red-100);
19
32
  --colors-background-danger-subtle-pressed: var(--colors-red-150);
33
+ --colors-background-interactive-danger: var(--colors-red-500);
34
+ --colors-background-interactive-danger-hover: var(--colors-red-550);
35
+ --colors-background-interactive-danger-pressed: var(--colors-red-600);
36
+ --colors-background-interactive-primary: var(--colors-blue-500);
37
+ --colors-background-interactive-primary-hover: var(--colors-blue-550);
38
+ --colors-background-interactive-primary-pressed: var(--colors-blue-600);
39
+ --colors-background-interactive-selected: var(--colors-blue-500);
40
+ --colors-background-interactive-surface-hover: var(--colors-gray-100);
41
+ --colors-background-interactive-surface-secondary-hover: var(--colors-gray-150);
20
42
  --colors-background-neutrals: var(--colors-white);
21
43
  --colors-background-neutrals-active: var(--colors-gray-150);
22
44
  --colors-background-neutrals-container: var(--colors-white);
@@ -41,8 +63,6 @@
41
63
  --colors-background-neutrals-subtle-hover: var(--colors-gray-150);
42
64
  --colors-background-neutrals-subtle-pressed: var(--colors-gray-200);
43
65
  --colors-background-neutrals-transparent: var(--colors-transparent);
44
- --colors-background-static-dark: var(--colors-gray-850);
45
- --colors-background-static-dark-subtle: var(--colors-gray-750);
46
66
  --colors-background-primary-prominent: var(--colors-blue-500);
47
67
  --colors-background-primary-prominent-active: var(--colors-blue-600);
48
68
  --colors-background-primary-prominent-hover: var(--colors-blue-550);
@@ -53,6 +73,10 @@
53
73
  --colors-background-primary-subtle-hover: var(--colors-blue-150);
54
74
  --colors-background-primary-subtle-pressed: var(--colors-blue-200);
55
75
  --colors-background-primary-subtle-selected: var(--colors-blue-150);
76
+ --colors-status-background-error: var(--colors-red-50);
77
+ --colors-status-background-info: var(--colors-blue-100);
78
+ --colors-status-background-success: var(--colors-green-50);
79
+ --colors-status-background-warning: var(--colors-yellow-100);
56
80
  --colors-background-success-prominent: var(--colors-green-500);
57
81
  --colors-background-success-prominent-active: var(--colors-green-600);
58
82
  --colors-background-success-prominent-hover: var(--colors-green-550);
@@ -60,6 +84,15 @@
60
84
  --colors-background-success-subtle: var(--colors-green-50);
61
85
  --colors-background-warning-prominent: var(--colors-yellow-500);
62
86
  --colors-background-warning-subtle: var(--colors-yellow-100);
87
+ --colors-border-default: var(--colors-gray-200);
88
+ --colors-border-disabled: var(--colors-gray-150);
89
+ --colors-border-inverted: var(--colors-white);
90
+ --colors-border-inverted-subtle: var(--colors-gray-700);
91
+ --colors-border-static-dark: var(--colors-gray-450);
92
+ --colors-border-static-dark-subtle: var(--colors-gray-750);
93
+ --colors-border-strong: var(--colors-gray-400);
94
+ --colors-border-subtle: var(--colors-gray-150);
95
+ --colors-border-transparent: var(--colors-transparent);
63
96
  --colors-border-danger: var(--colors-red-500);
64
97
  --colors-border-danger-active: var(--colors-red-600);
65
98
  --colors-border-danger-hover: var(--colors-red-550);
@@ -75,6 +108,16 @@
75
108
  --colors-border-focus-success-middle: var(--colors-blue-400);
76
109
  --colors-border-focus-success-outer: var(--colors-blue-200);
77
110
  --colors-focus-keyboard: #2B4DF8;
111
+ --colors-border-interactive-danger: var(--colors-red-500);
112
+ --colors-border-interactive-danger-hover: var(--colors-red-550);
113
+ --colors-border-interactive-danger-pressed: var(--colors-red-600);
114
+ --colors-border-interactive-primary: var(--colors-blue-500);
115
+ --colors-border-interactive-primary-hover: var(--colors-blue-550);
116
+ --colors-border-interactive-primary-pressed: var(--colors-blue-600);
117
+ --colors-border-interactive-secondary: var(--colors-gray-150);
118
+ --colors-border-interactive-secondary-hover: var(--colors-gray-200);
119
+ --colors-border-interactive-secondary-pressed: var(--colors-gray-250);
120
+ --colors-border-interactive-selected: var(--colors-blue-550);
78
121
  --colors-border-neutrals: var(--colors-gray-200);
79
122
  --colors-border-neutrals-active: var(--colors-gray-350);
80
123
  --colors-border-neutrals-controls: var(--colors-gray-450);
@@ -93,8 +136,6 @@
93
136
  --colors-border-neutrals-text-subtle-active: var(--colors-gray-600);
94
137
  --colors-border-neutrals-text-subtle-hover: var(--colors-gray-550);
95
138
  --colors-border-neutrals-transparent: var(--colors-transparent);
96
- --colors-border-static-dark: var(--colors-gray-450);
97
- --colors-border-static-dark-subtle: var(--colors-gray-750);
98
139
  --colors-border-primary: var(--colors-blue-500);
99
140
  --colors-border-primary-active: var(--colors-blue-600);
100
141
  --colors-border-primary-hover: var(--colors-blue-550);
@@ -102,6 +143,10 @@
102
143
  --colors-border-primary-pressed: var(--colors-blue-600);
103
144
  --colors-border-primary-selected: var(--colors-blue-550);
104
145
  --colors-border-primary-subtle: var(--colors-blue-250);
146
+ --colors-status-border-error: var(--colors-red-200);
147
+ --colors-status-border-info: var(--colors-blue-250);
148
+ --colors-status-border-success: var(--colors-green-250);
149
+ --colors-status-border-warning: var(--colors-yellow-300);
105
150
  --colors-border-success: var(--colors-green-500);
106
151
  --colors-border-success-active: var(--colors-green-600);
107
152
  --colors-border-success-hover: var(--colors-green-550);
@@ -109,12 +154,46 @@
109
154
  --colors-border-success-subtle: var(--colors-green-250);
110
155
  --colors-border-warning: var(--colors-yellow-500);
111
156
  --colors-border-warning-subtle: var(--colors-yellow-300);
157
+ --colors-button-background-danger: var(--colors-red-500);
158
+ --colors-button-background-danger-hover: var(--colors-red-550);
159
+ --colors-button-background-danger-pressed: var(--colors-red-600);
160
+ --colors-button-background-ghost: var(--colors-transparent);
161
+ --colors-button-background-ghost-hover: var(--colors-gray-150);
162
+ --colors-button-background-ghost-pressed: var(--colors-gray-200);
112
163
  --colors-button-background-primary: var(--colors-blue-500);
113
164
  --colors-button-background-primary-hover: var(--colors-blue-550);
114
165
  --colors-button-background-primary-pressed: var(--colors-blue-600);
115
166
  --colors-button-background-secondary: var(--colors-gray-150);
116
167
  --colors-button-background-secondary-hover: var(--colors-gray-200);
117
168
  --colors-button-background-secondary-pressed: var(--colors-gray-250);
169
+ --colors-button-background-tertiary: var(--colors-transparent);
170
+ --colors-button-background-tertiary-hover: var(--colors-blue-150);
171
+ --colors-button-background-tertiary-pressed: var(--colors-blue-200);
172
+ --colors-button-border-danger: var(--colors-red-500);
173
+ --colors-button-border-danger-hover: var(--colors-red-550);
174
+ --colors-button-border-danger-pressed: var(--colors-red-600);
175
+ --colors-button-border-ghost-hover: var(--colors-transparent);
176
+ --colors-button-border-ghost-pressed: var(--colors-transparent);
177
+ --colors-button-border-primary: var(--colors-blue-500);
178
+ --colors-button-border-primary-hover: var(--colors-blue-550);
179
+ --colors-button-border-primary-pressed: var(--colors-blue-600);
180
+ --colors-button-border-secondary: var(--colors-gray-150);
181
+ --colors-button-border-secondary-hover: var(--colors-gray-200);
182
+ --colors-button-border-secondary-pressed: var(--colors-gray-250);
183
+ --colors-button-border-tertiary: var(--colors-blue-500);
184
+ --colors-button-border-tertiary-hover: var(--colors-blue-550);
185
+ --colors-button-border-tertiary-pressed: var(--colors-blue-600);
186
+ --colors-button-icon-on-danger: var(--colors-white);
187
+ --colors-button-icon-on-primary: var(--colors-white);
188
+ --colors-button-icon-on-secondary: var(--colors-gray-900);
189
+ --colors-button-icon-on-tertiary: var(--colors-blue-500);
190
+ --colors-button-text-on-danger: var(--colors-white);
191
+ --colors-button-text-on-primary: var(--colors-white);
192
+ --colors-button-text-on-secondary: var(--colors-gray-900);
193
+ --colors-button-text-on-tertiary: var(--colors-blue-500);
194
+ --colors-chip-background: var(--colors-gray-100);
195
+ --colors-chip-background-hover: var(--colors-gray-150);
196
+ --colors-chip-text: var(--colors-gray-900);
118
197
  --colors-format-icon-diagram: var(--colors-orange-600);
119
198
  --colors-format-icon-docs: var(--colors-cyan-600);
120
199
  --colors-format-icon-external: var(--colors-teal-600);
@@ -123,17 +202,66 @@
123
202
  --colors-format-icon-slides: var(--colors-coral-600);
124
203
  --colors-format-icon-table: var(--colors-moss-600);
125
204
  --colors-format-icon-timeline: var(--colors-moss-600);
205
+ --colors-input-background-active: var(--colors-white);
206
+ --colors-input-background-alt-active: var(--colors-gray-100);
207
+ --colors-input-background-alt-default: var(--colors-gray-100);
208
+ --colors-input-background-alt-hover: var(--colors-gray-100);
209
+ --colors-input-background-default: var(--colors-white);
210
+ --colors-input-background-disabled: var(--colors-gray-150);
211
+ --colors-input-background-hover: var(--colors-white);
212
+ --colors-input-border-active: var(--colors-blue-550);
213
+ --colors-input-border-default: var(--colors-gray-200);
214
+ --colors-input-border-disabled: var(--colors-transparent);
215
+ --colors-input-border-error: var(--colors-red-500);
216
+ --colors-input-border-hover: var(--colors-blue-550);
217
+ --colors-input-border-selection-control: var(--colors-gray-450);
218
+ --colors-input-border-success: var(--colors-green-500);
126
219
  --colors-notification-background: var(--colors-gray-850);
127
220
  --colors-notification-border: var(--colors-gray-450);
128
221
  --colors-notification-border-subtle: var(--colors-gray-750);
129
- --colors-popup-background-static: var(--colors-gray-900);
130
- --colors-popup-text-static: var(--colors-white);
222
+ --colors-popover-background: var(--colors-gray-900);
223
+ --colors-popover-border: var(--colors-gray-450);
224
+ --colors-scrollbar-background: var(--colors-gray-300);
225
+ --colors-scrollbar-background-hover: var(--colors-gray-350);
226
+ --colors-slider-background: var(--colors-gray-300);
227
+ --colors-slider-notch-background: var(--colors-gray-300);
228
+ --colors-switch-background-default: var(--colors-gray-300);
229
+ --colors-switch-background-hover: var(--colors-gray-350);
230
+ --colors-switch-control-background: var(--colors-white);
131
231
  --colors-tooltip-background: var(--colors-gray-950);
232
+ --colors-tooltip-background-inset: var(--colors-gray-650);
132
233
  --colors-icon-danger: var(--colors-red-500);
133
234
  --colors-icon-danger-active: var(--colors-red-600);
134
235
  --colors-icon-danger-hover: var(--colors-red-550);
135
236
  --colors-icon-danger-inverted: var(--colors-red-50);
136
237
  --colors-icon-danger-pressed: var(--colors-red-600);
238
+ --colors-icon-default: var(--colors-gray-900);
239
+ --colors-icon-disabled: var(--colors-gray-350);
240
+ --colors-icon-inverted: var(--colors-white);
241
+ --colors-icon-inverted-secondary: var(--colors-gray-150);
242
+ --colors-icon-muted: var(--colors-gray-400);
243
+ --colors-icon-on-disabled: var(--colors-gray-350);
244
+ --colors-icon-on-static-dark: var(--colors-gray-50);
245
+ --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
246
+ --colors-icon-placeholder: var(--colors-gray-475);
247
+ --colors-icon-secondary: var(--colors-gray-500);
248
+ --colors-icon-interactive-selected: var(--colors-blue-550);
249
+ --colors-icon-link: var(--colors-blue-500);
250
+ --colors-icon-link-hover: var(--colors-blue-550);
251
+ --colors-icon-link-on-inverted: var(--colors-white);
252
+ --colors-icon-link-on-inverted-hover: var(--colors-gray-50);
253
+ --colors-icon-link-on-inverted-pressed: var(--colors-gray-100);
254
+ --colors-icon-link-on-inverted-secondary: var(--colors-gray-150);
255
+ --colors-icon-link-on-inverted-secondary-hover: var(--colors-gray-200);
256
+ --colors-icon-link-on-inverted-secondary-pressed: var(--colors-gray-250);
257
+ --colors-icon-link-pressed: var(--colors-blue-600);
258
+ --colors-icon-link-secondary: var(--colors-gray-500);
259
+ --colors-icon-link-secondary-hover: var(--colors-gray-550);
260
+ --colors-icon-link-secondary-pressed: var(--colors-gray-600);
261
+ --colors-icon-on-interactive-danger: var(--colors-white);
262
+ --colors-icon-on-interactive-primary: var(--colors-white);
263
+ --colors-icon-on-interactive-secondary: var(--colors-gray-900);
264
+ --colors-icon-on-interactive-selected: var(--colors-blue-550);
137
265
  --colors-icon-neutrals: var(--colors-gray-900);
138
266
  --colors-icon-neutrals-disabled: var(--colors-gray-350);
139
267
  --colors-icon-neutrals-hover: var(--colors-gray-950);
@@ -150,8 +278,6 @@
150
278
  --colors-icon-neutrals-subtle-hover: var(--colors-gray-550);
151
279
  --colors-icon-neutrals-subtle-pressed: var(--colors-gray-600);
152
280
  --colors-icon-neutrals-text: var(--colors-gray-700);
153
- --colors-icon-on-static-dark: var(--colors-gray-50);
154
- --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
155
281
  --colors-icon-primary: var(--colors-blue-500);
156
282
  --colors-icon-primary-active: var(--colors-blue-600);
157
283
  --colors-icon-primary-hover: var(--colors-blue-550);
@@ -159,6 +285,13 @@
159
285
  --colors-icon-primary-inverted-hover: var(--colors-blue-100);
160
286
  --colors-icon-primary-pressed: var(--colors-blue-600);
161
287
  --colors-icon-primary-selected: var(--colors-blue-550);
288
+ --colors-status-icon-error: var(--colors-red-500);
289
+ --colors-status-icon-on-error: var(--colors-red-500);
290
+ --colors-status-icon-on-info: var(--colors-blue-500);
291
+ --colors-status-icon-on-success: var(--colors-green-500);
292
+ --colors-status-icon-on-warning: var(--colors-yellow-800);
293
+ --colors-status-icon-success: var(--colors-green-500);
294
+ --colors-status-icon-warning: var(--colors-yellow-700);
162
295
  --colors-icon-success: var(--colors-green-600);
163
296
  --colors-icon-success-active: var(--colors-green-700);
164
297
  --colors-icon-success-hover: var(--colors-green-650);
@@ -172,6 +305,23 @@
172
305
  --colors-text-danger-hover: var(--colors-red-550);
173
306
  --colors-text-danger-inverted: var(--colors-red-50);
174
307
  --colors-text-danger-pressed: var(--colors-red-600);
308
+ --colors-text-interactive-selected: var(--colors-blue-550);
309
+ --colors-text-link: var(--colors-blue-500);
310
+ --colors-text-link-hover: var(--colors-blue-550);
311
+ --colors-text-link-on-inverted: var(--colors-white);
312
+ --colors-text-link-on-inverted-hover: var(--colors-gray-50);
313
+ --colors-text-link-on-inverted-pressed: var(--colors-gray-100);
314
+ --colors-text-link-on-inverted-secondary: var(--colors-gray-150);
315
+ --colors-text-link-on-inverted-secondary-hover: var(--colors-gray-200);
316
+ --colors-text-link-on-inverted-secondary-pressed: var(--colors-gray-250);
317
+ --colors-text-link-pressed: var(--colors-blue-600);
318
+ --colors-text-link-secondary: var(--colors-gray-500);
319
+ --colors-text-link-secondary-hover: var(--colors-gray-550);
320
+ --colors-text-link-secondary-pressed: var(--colors-gray-600);
321
+ --colors-text-on-interactive-danger: var(--colors-white);
322
+ --colors-text-on-interactive-primary: var(--colors-white);
323
+ --colors-text-on-interactive-secondary: var(--colors-gray-900);
324
+ --colors-text-on-interactive-selected: var(--colors-blue-550);
175
325
  --colors-text-neutrals: var(--colors-gray-900);
176
326
  --colors-text-neutrals-active: var(--colors-gray-950);
177
327
  --colors-text-neutrals-disabled: var(--colors-gray-350);
@@ -187,9 +337,6 @@
187
337
  --colors-text-neutrals-subtle-active: var(--colors-gray-700);
188
338
  --colors-text-neutrals-subtle-hover: var(--colors-gray-550);
189
339
  --colors-text-neutrals-subtle-pressed: var(--colors-gray-600);
190
- --colors-text-on-static-dark: var(--colors-gray-50);
191
- --colors-text-on-static-dark-subtle: var(--colors-gray-300);
192
- --colors-text-on-primary: var(--colors-white);
193
340
  --colors-text-primary: var(--colors-blue-500);
194
341
  --colors-text-primary-active: var(--colors-blue-600);
195
342
  --colors-text-primary-hover: var(--colors-blue-550);
@@ -197,11 +344,28 @@
197
344
  --colors-text-primary-inverted-subtle: var(--colors-blue-100);
198
345
  --colors-text-primary-pressed: var(--colors-blue-600);
199
346
  --colors-text-primary-selected: var(--colors-blue-550);
347
+ --colors-status-text-error: var(--colors-red-500);
348
+ --colors-status-text-on-error: var(--colors-gray-900);
349
+ --colors-status-text-on-info: var(--colors-gray-900);
350
+ --colors-status-text-on-success: var(--colors-gray-900);
351
+ --colors-status-text-on-warning: var(--colors-gray-900);
352
+ --colors-status-text-success: var(--colors-green-600);
353
+ --colors-status-text-warning: var(--colors-yellow-800);
200
354
  --colors-text-success: var(--colors-green-600);
201
355
  --colors-text-success-active: var(--colors-green-700);
202
356
  --colors-text-success-hover: var(--colors-green-650);
203
357
  --colors-text-success-inverted: var(--colors-green-50);
204
358
  --colors-text-success-pressed: var(--colors-green-700);
359
+ --colors-text-default: var(--colors-gray-900);
360
+ --colors-text-disabled: var(--colors-gray-350);
361
+ --colors-text-inverted: var(--colors-white);
362
+ --colors-text-inverted-secondary: var(--colors-gray-150);
363
+ --colors-text-muted: var(--colors-gray-400);
364
+ --colors-text-on-disabled: var(--colors-gray-350);
365
+ --colors-text-on-static-dark: var(--colors-gray-50);
366
+ --colors-text-on-static-dark-subtle: var(--colors-gray-300);
367
+ --colors-text-placeholder: var(--colors-gray-475);
368
+ --colors-text-secondary: var(--colors-gray-500);
205
369
  --colors-text-warning: var(--colors-yellow-800);
206
370
  --colors-text-warning-subtle: var(--colors-yellow-600);
207
371
  --colors-coal-background: var(--colors-coal-500);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-themes",
3
- "version": "1.1.2",
3
+ "version": "1.2.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -28,7 +28,7 @@
28
28
  "access": "public"
29
29
  },
30
30
  "dependencies": {
31
- "@mirohq/design-tokens": "^7.1.0"
31
+ "@mirohq/design-tokens": "^8.0.0"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@types/lodash.kebabcase": "4.1.7",