@mirohq/design-system-themes 1.3.9 → 1.3.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 (12) hide show
  1. package/base.css +25 -34
  2. package/dark.css +28 -37
  3. package/dist/main.js +30 -30
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +30 -30
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +1 -1
  8. package/light.css +25 -34
  9. package/metadata.json +3 -3
  10. package/new-dark.css +39 -48
  11. package/new-light.css +40 -53
  12. 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-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-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-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-active' | 'input-background-alt-default' | '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' | 'notification-border' | 'notification-border-subtle' | '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' | '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-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-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' | 'notification-border' | 'notification-border-subtle' | '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' | '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';
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
@@ -6,10 +6,8 @@
6
6
  --colors-background-alpha: var(--colors-alpha-gray-100);
7
7
  --colors-background-alpha-active: var(--colors-alpha-gray-50);
8
8
  --colors-background-alpha-hover: var(--colors-alpha-gray-100);
9
- --colors-background-alpha-neutrals-overlay: #12193e66;
10
- --colors-background-alpha-neutrals-overlay-subtle: var(
11
- --colors-alpha-black-200
12
- );
9
+ --colors-background-alpha-neutrals-overlay: #12193E66;
10
+ --colors-background-alpha-neutrals-overlay-subtle: var(--colors-alpha-black-200);
13
11
  --colors-background-alpha-subtle: var(--colors-alpha-gray-50);
14
12
  --colors-background-canvas: var(--colors-gray-50);
15
13
  --colors-background-disabled: var(--colors-gray-150);
@@ -42,9 +40,7 @@
42
40
  --colors-background-interactive-secondary-selected: var(--colors-blue-150);
43
41
  --colors-background-interactive-selected: var(--colors-blue-500);
44
42
  --colors-background-interactive-surface-hover: var(--colors-gray-100);
45
- --colors-background-interactive-surface-secondary-hover: var(
46
- --colors-gray-150
47
- );
43
+ --colors-background-interactive-surface-secondary-hover: var(--colors-gray-150);
48
44
  --colors-background-neutrals: var(--colors-white);
49
45
  --colors-background-neutrals-active: var(--colors-gray-150);
50
46
  --colors-background-neutrals-container: var(--colors-white);
@@ -110,13 +106,13 @@
110
106
  --colors-border-focus-error-inner: var(--colors-white);
111
107
  --colors-border-focus-error-middle: var(--colors-blue-400);
112
108
  --colors-border-focus-error-outer: var(--colors-blue-200);
113
- --colors-border-focus-inner: #ffffff;
109
+ --colors-border-focus-inner: #FFFFFF;
114
110
  --colors-border-focus-middle: var(--colors-blue-400);
115
111
  --colors-border-focus-outer: var(--colors-blue-200);
116
112
  --colors-border-focus-success-inner: var(--colors-white);
117
113
  --colors-border-focus-success-middle: var(--colors-blue-400);
118
114
  --colors-border-focus-success-outer: var(--colors-blue-200);
119
- --colors-focus-keyboard: #2b4df8;
115
+ --colors-focus-keyboard: #2B4DF8;
120
116
  --colors-border-interactive-danger: var(--colors-red-500);
121
117
  --colors-border-interactive-danger-hover: var(--colors-red-550);
122
118
  --colors-border-interactive-danger-pressed: var(--colors-red-600);
@@ -214,8 +210,8 @@
214
210
  --colors-format-icon-slides: var(--colors-coral-600);
215
211
  --colors-format-icon-table: var(--colors-moss-600);
216
212
  --colors-format-icon-timeline: var(--colors-moss-600);
217
- --colors-input-background-alt-active: var(--colors-gray-100);
218
213
  --colors-input-background-alt-default: var(--colors-gray-100);
214
+ --colors-input-background-alt-focused: var(--colors-gray-100);
219
215
  --colors-input-background-alt-hover: var(--colors-gray-100);
220
216
  --colors-input-background-default: var(--colors-white);
221
217
  --colors-input-background-disabled: var(--colors-gray-150);
@@ -264,9 +260,7 @@
264
260
  --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-100);
265
261
  --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-150);
266
262
  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
267
- --colors-icon-interactive-on-inverted-secondary-pressed: var(
268
- --colors-gray-250
269
- );
263
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-gray-250);
270
264
  --colors-icon-interactive-primary: var(--colors-blue-500);
271
265
  --colors-icon-interactive-primary-hover: var(--colors-blue-550);
272
266
  --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
@@ -326,9 +320,7 @@
326
320
  --colors-text-interactive-on-inverted-pressed: var(--colors-gray-100);
327
321
  --colors-text-interactive-on-inverted-secondary: var(--colors-gray-150);
328
322
  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
329
- --colors-text-interactive-on-inverted-secondary-pressed: var(
330
- --colors-gray-250
331
- );
323
+ --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-gray-250);
332
324
  --colors-text-interactive-primary: var(--colors-blue-500);
333
325
  --colors-text-interactive-primary-hover: var(--colors-blue-550);
334
326
  --colors-text-interactive-primary-pressed: var(--colors-blue-600);
@@ -388,6 +380,20 @@
388
380
  --colors-text-secondary: var(--colors-gray-500);
389
381
  --colors-text-warning: var(--colors-yellow-800);
390
382
  --colors-text-warning-subtle: var(--colors-yellow-600);
383
+ --radii-panel: var(--radii-150);
384
+ --radii-notification: var(--radii-100);
385
+ --radii-avatar-people: var(--radii-round);
386
+ --radii-avatar-team: var(--radii-50);
387
+ --radii-avatar-group: var(--radii-50);
388
+ --radii-dropdown: var(--radii-100);
389
+ --radii-toolbar: var(--radii-100);
390
+ --radii-toolbar-item: var(--radii-50);
391
+ --radii-input: var(--radii-50);
392
+ --radii-button: var(--radii-50);
393
+ --radii-popup: var(--radii-100);
394
+ --radii-tooltip: var(--radii-100);
395
+ --radii-checkbox: var(--radii-50);
396
+ --radii-list-item: var(--radii-50);
391
397
  --colors-coal-background: var(--colors-coal-500);
392
398
  --colors-coal-background-mild: var(--colors-coal-350);
393
399
  --colors-coal-background-prominent: var(--colors-coal-700);
@@ -537,7 +543,7 @@
537
543
  --colors-black-sticky-background: #151515;
538
544
  --colors-coral-sticky-background: var(--colors-coral-400);
539
545
  --colors-cyan-sticky-background: var(--colors-cyan-400);
540
- --colors-light-coal-sticky-background: #f3f5f7;
546
+ --colors-light-coal-sticky-background: #F3F5F7;
541
547
  --colors-light-lime-sticky-background: var(--colors-lime-250);
542
548
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
543
549
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -616,25 +622,10 @@
616
622
  --colors-teal-text: var(--colors-teal-900);
617
623
  --colors-teal-text-mild: var(--colors-teal-700);
618
624
  --colors-teal-text-subtle: var(--colors-teal-100);
619
- --radii-panel: var(--radii-150);
620
- --radii-notification: var(--radii-100);
621
- --radii-avatar-people: var(--radii-round);
622
- --radii-avatar-team: var(--radii-50);
623
- --radii-avatar-group: var(--radii-50);
624
- --radii-dropdown: var(--radii-100);
625
- --radii-toolbar: var(--radii-100);
626
- --radii-toolbar-item: var(--radii-50);
627
- --radii-input: var(--radii-50);
628
- --radii-button: var(--radii-50);
629
- --radii-popup: var(--radii-100);
630
- --radii-tooltip: var(--radii-100);
631
- --radii-checkbox: var(--radii-50);
632
- --radii-list-item: var(--radii-50);
633
625
  --shadows-50: 0 4px 16px rgba(5, 0, 56, 0.07);
634
626
  --shadows-100: 0 8px 32px rgba(5, 0, 56, 0.03);
635
- --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
636
- 0 0 0 4px var(--colors-focus-keyboard);
627
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner), 0 0 0 4px var(--colors-focus-keyboard);
637
628
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
638
629
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
639
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
630
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
640
631
  }
package/metadata.json CHANGED
@@ -620,12 +620,12 @@
620
620
  "formatIconTimeline": {
621
621
  "description": "Icon color exclusively for the `icon-timeline-format` icon. Use to visually distinguish timeline and Gantt-type content items. Do not use for any other format icon."
622
622
  },
623
- "inputBackgroundAltActive": {
624
- "description": "The component-specific focused/active-state background for alternative-style input fields. Use within alt-variant inputs when focused. Do not use for standard input focus state."
625
- },
626
623
  "inputBackgroundAltDefault": {
627
624
  "description": "The component-specific default resting-state background for alternative-style input fields — a secondary visual variant of the input. Use when an input requires a distinct surface style from the standard variant (e.g., inline editing, minimal inputs). Do not use as the default input background; use `input-background-default`."
628
625
  },
626
+ "inputBackgroundAltFocused": {
627
+ "description": "The component-specific focused/active-state background for alternative-style input fields. Use within alt-variant inputs when focused. Do not use for standard input focus state."
628
+ },
629
629
  "inputBackgroundAltHover": {
630
630
  "description": "The component-specific hover-state background for alternative-style input fields. Use within alt-variant inputs on hover. Do not use for standard input hover; use `input-background-hover`."
631
631
  },
package/new-dark.css CHANGED
@@ -6,10 +6,8 @@
6
6
  --colors-background-alpha: var(--colors-alpha-black-100);
7
7
  --colors-background-alpha-active: var(--colors-alpha-black-50);
8
8
  --colors-background-alpha-hover: var(--colors-alpha-black-100);
9
- --colors-background-alpha-neutrals-overlay: #12193e66;
10
- --colors-background-alpha-neutrals-overlay-subtle: var(
11
- --colors-alpha-black-200
12
- );
9
+ --colors-background-alpha-neutrals-overlay: #12193E66;
10
+ --colors-background-alpha-neutrals-overlay-subtle: var(--colors-alpha-black-200);
13
11
  --colors-background-alpha-subtle: var(--colors-alpha-black-50);
14
12
  --colors-background-canvas: var(--colors-gray-900);
15
13
  --colors-background-disabled: var(--colors-ink-650);
@@ -30,9 +28,9 @@
30
28
  --colors-background-danger-prominent-hover: var(--colors-red-450);
31
29
  --colors-background-danger-prominent-pressed: var(--colors-red-400);
32
30
  --colors-background-danger-subtle: var(--colors-red-900);
33
- --colors-background-danger-subtle-active: var(--colors-red-500);
34
- --colors-background-danger-subtle-hover: var(--colors-red-550);
35
- --colors-background-danger-subtle-pressed: var(--colors-red-500);
31
+ --colors-background-danger-subtle-active: var(--colors-red-900);
32
+ --colors-background-danger-subtle-hover: var(--colors-red-850);
33
+ --colors-background-danger-subtle-pressed: var(--colors-red-800);
36
34
  --colors-background-interactive-danger: var(--colors-red-500);
37
35
  --colors-background-interactive-danger-hover: var(--colors-red-450);
38
36
  --colors-background-interactive-danger-pressed: var(--colors-red-400);
@@ -42,9 +40,7 @@
42
40
  --colors-background-interactive-secondary-selected: var(--colors-blue-700);
43
41
  --colors-background-interactive-selected: var(--colors-blue-500);
44
42
  --colors-background-interactive-surface-hover: var(--colors-ink-750);
45
- --colors-background-interactive-surface-secondary-hover: var(
46
- --colors-ink-650
47
- );
43
+ --colors-background-interactive-surface-secondary-hover: var(--colors-ink-650);
48
44
  --colors-background-neutrals: var(--colors-ink-850);
49
45
  --colors-background-neutrals-active: var(--colors-ink-800);
50
46
  --colors-background-neutrals-container: var(--colors-ink-850);
@@ -110,13 +106,13 @@
110
106
  --colors-border-focus-error-inner: var(--colors-gray-950);
111
107
  --colors-border-focus-error-middle: var(--colors-blue-350);
112
108
  --colors-border-focus-error-outer: var(--colors-blue-550);
113
- --colors-border-focus-inner: #1a1b1e;
109
+ --colors-border-focus-inner: #1A1B1E;
114
110
  --colors-border-focus-middle: var(--colors-blue-350);
115
111
  --colors-border-focus-outer: var(--colors-blue-550);
116
112
  --colors-border-focus-success-inner: var(--colors-gray-950);
117
113
  --colors-border-focus-success-middle: var(--colors-blue-350);
118
114
  --colors-border-focus-success-outer: var(--colors-blue-550);
119
- --colors-focus-keyboard: #2b4df8;
115
+ --colors-focus-keyboard: #2B4DF8;
120
116
  --colors-border-interactive-danger: var(--colors-red-500);
121
117
  --colors-border-interactive-danger-hover: var(--colors-red-450);
122
118
  --colors-border-interactive-danger-pressed: var(--colors-red-400);
@@ -164,7 +160,7 @@
164
160
  --colors-border-warning: var(--colors-yellow-500);
165
161
  --colors-border-warning-subtle: var(--colors-yellow-700);
166
162
  --colors-badge-border: var(--colors-ink-850);
167
- --colors-badge-border-inverted: #ffffff;
163
+ --colors-badge-border-inverted: var(--colors-blue-500);
168
164
  --colors-button-background-danger: var(--colors-red-500);
169
165
  --colors-button-background-danger-hover: var(--colors-red-450);
170
166
  --colors-button-background-danger-pressed: var(--colors-red-450);
@@ -214,9 +210,9 @@
214
210
  --colors-format-icon-slides: var(--colors-coral-600);
215
211
  --colors-format-icon-table: var(--colors-moss-600);
216
212
  --colors-format-icon-timeline: var(--colors-moss-600);
217
- --colors-input-background-alt-active: var(--colors-ink-650);
218
- --colors-input-background-alt-default: var(--colors-ink-700);
219
- --colors-input-background-alt-hover: var(--colors-ink-650);
213
+ --colors-input-background-alt-default: var(--colors-ink-750);
214
+ --colors-input-background-alt-focused: var(--colors-ink-750);
215
+ --colors-input-background-alt-hover: var(--colors-ink-700);
220
216
  --colors-input-background-default: var(--colors-ink-850);
221
217
  --colors-input-background-disabled: var(--colors-ink-750);
222
218
  --colors-input-background-focused: var(--colors-ink-800);
@@ -225,7 +221,7 @@
225
221
  --colors-input-border-disabled: var(--colors-transparent);
226
222
  --colors-input-border-error: var(--colors-red-400);
227
223
  --colors-input-border-focused: var(--colors-blue-450);
228
- --colors-input-border-hover: var(--colors-ink-450);
224
+ --colors-input-border-hover: var(--colors-ink-400);
229
225
  --colors-input-border-success: var(--colors-green-400);
230
226
  --colors-notification-background: var(--colors-ink-50);
231
227
  --colors-notification-border: var(--colors-ink-500);
@@ -257,16 +253,14 @@
257
253
  --colors-icon-on-static-dark-subtle: var(--colors-ink-300);
258
254
  --colors-icon-on-static-light: var(--colors-ink-900);
259
255
  --colors-icon-on-static-light-subtle: var(--colors-ink-700);
260
- --colors-icon-placeholder: var(--colors-ink-400);
256
+ --colors-icon-placeholder: var(--colors-ink-450);
261
257
  --colors-icon-secondary: var(--colors-ink-300);
262
258
  --colors-icon-interactive-on-inverted: var(--colors-ink-900);
263
259
  --colors-icon-interactive-on-inverted-hover: var(--colors-ink-850);
264
260
  --colors-icon-interactive-on-inverted-pressed: var(--colors-ink-800);
265
261
  --colors-icon-interactive-on-inverted-secondary: var(--colors-ink-700);
266
262
  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-ink-650);
267
- --colors-icon-interactive-on-inverted-secondary-pressed: var(
268
- --colors-ink-600
269
- );
263
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-ink-600);
270
264
  --colors-icon-interactive-primary: var(--colors-blue-500);
271
265
  --colors-icon-interactive-primary-hover: var(--colors-blue-450);
272
266
  --colors-icon-interactive-primary-pressed: var(--colors-blue-400);
@@ -326,20 +320,18 @@
326
320
  --colors-text-interactive-on-inverted-pressed: var(--colors-ink-800);
327
321
  --colors-text-interactive-on-inverted-secondary: var(--colors-ink-750);
328
322
  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-ink-650);
329
- --colors-text-interactive-on-inverted-secondary-pressed: var(
330
- --colors-ink-600
331
- );
323
+ --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-ink-600);
332
324
  --colors-text-interactive-primary: var(--colors-blue-500);
333
325
  --colors-text-interactive-primary-hover: var(--colors-blue-450);
334
326
  --colors-text-interactive-primary-pressed: var(--colors-blue-400);
335
327
  --colors-text-interactive-secondary: var(--colors-ink-300);
336
- --colors-text-interactive-secondary-hover: var(--colors-ink-250);
337
- --colors-text-interactive-secondary-pressed: var(--colors-ink-200);
328
+ --colors-text-interactive-secondary-hover: var(--colors-ink-200);
329
+ --colors-text-interactive-secondary-pressed: var(--colors-ink-150);
338
330
  --colors-text-interactive-selected: var(--colors-blue-400);
339
331
  --colors-text-on-interactive-danger: var(--colors-white);
340
332
  --colors-text-on-interactive-primary: var(--colors-white);
341
333
  --colors-text-on-interactive-secondary: var(--colors-white);
342
- --colors-text-on-interactive-selected: var(--colors-blue-400);
334
+ --colors-text-on-interactive-selected: var(--colors-blue-200);
343
335
  --colors-text-neutrals: var(--colors-ink-100);
344
336
  --colors-text-neutrals-active: var(--colors-ink-50);
345
337
  --colors-text-neutrals-disabled: var(--colors-ink-400);
@@ -379,7 +371,7 @@
379
371
  --colors-text-inverted: var(--colors-ink-900);
380
372
  --colors-text-inverted-secondary: var(--colors-ink-700);
381
373
  --colors-text-muted: var(--colors-ink-400);
382
- --colors-text-on-disabled: var(--colors-ink-450);
374
+ --colors-text-on-disabled: var(--colors-ink-500);
383
375
  --colors-text-on-static-dark: var(--colors-ink-50);
384
376
  --colors-text-on-static-dark-subtle: var(--colors-ink-300);
385
377
  --colors-text-on-static-light: var(--colors-ink-900);
@@ -388,6 +380,20 @@
388
380
  --colors-text-secondary: var(--colors-ink-300);
389
381
  --colors-text-warning: var(--colors-yellow-200);
390
382
  --colors-text-warning-subtle: var(--colors-yellow-300);
383
+ --radii-panel: var(--radii-150);
384
+ --radii-notification: var(--radii-100);
385
+ --radii-avatar-people: var(--radii-round);
386
+ --radii-avatar-team: var(--radii-50);
387
+ --radii-avatar-group: var(--radii-50);
388
+ --radii-dropdown: var(--radii-250);
389
+ --radii-toolbar: var(--radii-200);
390
+ --radii-toolbar-item: var(--radii-150);
391
+ --radii-input: var(--radii-150);
392
+ --radii-button: var(--radii-100);
393
+ --radii-popup: var(--radii-100);
394
+ --radii-tooltip: var(--radii-100);
395
+ --radii-checkbox: var(--radii-75);
396
+ --radii-list-item: var(--radii-150);
391
397
  --colors-coal-background: var(--colors-coal-500);
392
398
  --colors-coal-background-mild: var(--colors-coal-350);
393
399
  --colors-coal-background-prominent: var(--colors-coal-700);
@@ -537,7 +543,7 @@
537
543
  --colors-black-sticky-background: #151515;
538
544
  --colors-coral-sticky-background: var(--colors-coral-400);
539
545
  --colors-cyan-sticky-background: var(--colors-cyan-400);
540
- --colors-light-coal-sticky-background: #f3f5f7;
546
+ --colors-light-coal-sticky-background: #F3F5F7;
541
547
  --colors-light-lime-sticky-background: var(--colors-lime-250);
542
548
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
543
549
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -616,25 +622,10 @@
616
622
  --colors-teal-text: var(--colors-teal-900);
617
623
  --colors-teal-text-mild: var(--colors-teal-700);
618
624
  --colors-teal-text-subtle: var(--colors-teal-100);
619
- --radii-panel: var(--radii-150);
620
- --radii-notification: var(--radii-100);
621
- --radii-avatar-people: var(--radii-round);
622
- --radii-avatar-team: var(--radii-50);
623
- --radii-avatar-group: var(--radii-50);
624
- --radii-dropdown: var(--radii-250);
625
- --radii-toolbar: var(--radii-200);
626
- --radii-toolbar-item: var(--radii-150);
627
- --radii-input: var(--radii-150);
628
- --radii-button: var(--radii-100);
629
- --radii-popup: var(--radii-100);
630
- --radii-tooltip: var(--radii-100);
631
- --radii-checkbox: var(--radii-75);
632
- --radii-list-item: var(--radii-150);
633
- --shadows-50: 0 0 8px 0 rgba(9, 9, 9, 0.65);
634
- --shadows-100: 0 0 16px 0 rgba(9, 9, 9, 0.65);
635
- --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
636
- 0 0 0 4px var(--colors-focus-keyboard);
625
+ --shadows-50: 0 0 8px 0 rgba(9,9,9,.65);
626
+ --shadows-100: 0 0 16px 0 rgba(9,9,9,.65);
627
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner), 0 0 0 4px var(--colors-focus-keyboard);
637
628
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
638
629
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
639
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
630
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
640
631
  }
package/new-light.css CHANGED
@@ -6,10 +6,8 @@
6
6
  --colors-background-alpha: var(--colors-alpha-gray-100);
7
7
  --colors-background-alpha-active: var(--colors-alpha-gray-50);
8
8
  --colors-background-alpha-hover: var(--colors-alpha-gray-100);
9
- --colors-background-alpha-neutrals-overlay: #12193e66;
10
- --colors-background-alpha-neutrals-overlay-subtle: var(
11
- --colors-alpha-black-200
12
- );
9
+ --colors-background-alpha-neutrals-overlay: #12193E66;
10
+ --colors-background-alpha-neutrals-overlay-subtle: var(--colors-alpha-black-200);
13
11
  --colors-background-alpha-subtle: var(--colors-alpha-gray-50);
14
12
  --colors-background-canvas: var(--colors-gray-50);
15
13
  --colors-background-disabled: var(--colors-cloud-150);
@@ -42,9 +40,7 @@
42
40
  --colors-background-interactive-secondary-selected: var(--colors-blue-150);
43
41
  --colors-background-interactive-selected: var(--colors-blue-500);
44
42
  --colors-background-interactive-surface-hover: var(--colors-cloud-100);
45
- --colors-background-interactive-surface-secondary-hover: var(
46
- --colors-cloud-150
47
- );
43
+ --colors-background-interactive-surface-secondary-hover: var(--colors-cloud-150);
48
44
  --colors-background-neutrals: var(--colors-white);
49
45
  --colors-background-neutrals-active: var(--colors-cloud-150);
50
46
  --colors-background-neutrals-container: var(--colors-white);
@@ -110,22 +106,22 @@
110
106
  --colors-border-focus-error-inner: var(--colors-white);
111
107
  --colors-border-focus-error-middle: var(--colors-blue-400);
112
108
  --colors-border-focus-error-outer: var(--colors-blue-200);
113
- --colors-border-focus-inner: #ffffff;
109
+ --colors-border-focus-inner: #FFFFFF;
114
110
  --colors-border-focus-middle: var(--colors-blue-400);
115
111
  --colors-border-focus-outer: var(--colors-blue-200);
116
112
  --colors-border-focus-success-inner: var(--colors-white);
117
113
  --colors-border-focus-success-middle: var(--colors-blue-400);
118
114
  --colors-border-focus-success-outer: var(--colors-blue-200);
119
- --colors-focus-keyboard: #2b4df8;
115
+ --colors-focus-keyboard: #2B4DF8;
120
116
  --colors-border-interactive-danger: var(--colors-red-500);
121
117
  --colors-border-interactive-danger-hover: var(--colors-red-550);
122
118
  --colors-border-interactive-danger-pressed: var(--colors-red-600);
123
119
  --colors-border-interactive-primary: var(--colors-blue-500);
124
120
  --colors-border-interactive-primary-hover: var(--colors-blue-550);
125
121
  --colors-border-interactive-primary-pressed: var(--colors-blue-600);
126
- --colors-border-interactive-secondary: var(--colors-cloud-900);
127
- --colors-border-interactive-secondary-hover: var(--colors-cloud-950);
128
- --colors-border-interactive-secondary-pressed: var(--colors-cloud-1000);
122
+ --colors-border-interactive-secondary: var(--colors-cloud-150);
123
+ --colors-border-interactive-secondary-hover: var(--colors-cloud-300);
124
+ --colors-border-interactive-secondary-pressed: var(--colors-cloud-350);
129
125
  --colors-border-interactive-selected: var(--colors-blue-550);
130
126
  --colors-border-neutrals: var(--colors-cloud-200);
131
127
  --colors-border-neutrals-active: var(--colors-cloud-350);
@@ -214,18 +210,18 @@
214
210
  --colors-format-icon-slides: var(--colors-coral-600);
215
211
  --colors-format-icon-table: var(--colors-moss-600);
216
212
  --colors-format-icon-timeline: var(--colors-moss-600);
217
- --colors-input-background-alt-active: var(--colors-cloud-200);
218
- --colors-input-background-alt-default: var(--colors-cloud-150);
219
- --colors-input-background-alt-hover: var(--colors-cloud-200);
213
+ --colors-input-background-alt-default: var(--colors-cloud-100);
214
+ --colors-input-background-alt-focused: var(--colors-cloud-100);
215
+ --colors-input-background-alt-hover: var(--colors-cloud-150);
220
216
  --colors-input-background-default: var(--colors-white);
221
217
  --colors-input-background-disabled: var(--colors-cloud-150);
222
218
  --colors-input-background-focused: var(--colors-white);
223
219
  --colors-input-background-hover: var(--colors-white);
224
- --colors-input-border-default: var(--colors-cloud-425);
220
+ --colors-input-border-default: var(--colors-cloud-250);
225
221
  --colors-input-border-disabled: var(--colors-transparent);
226
222
  --colors-input-border-error: var(--colors-red-500);
227
223
  --colors-input-border-focused: var(--colors-blue-550);
228
- --colors-input-border-hover: var(--colors-cloud-450);
224
+ --colors-input-border-hover: var(--colors-cloud-400);
229
225
  --colors-input-border-success: var(--colors-green-500);
230
226
  --colors-notification-background: var(--colors-cloud-850);
231
227
  --colors-notification-border: var(--colors-cloud-450);
@@ -252,23 +248,19 @@
252
248
  --colors-icon-inverted: var(--colors-white);
253
249
  --colors-icon-inverted-secondary: var(--colors-cloud-300);
254
250
  --colors-icon-muted: var(--colors-cloud-400);
255
- --colors-icon-on-disabled: var(--colors-cloud-450);
251
+ --colors-icon-on-disabled: var(--colors-cloud-350);
256
252
  --colors-icon-on-static-dark: var(--colors-gray-50);
257
253
  --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
258
254
  --colors-icon-on-static-light: var(--colors-cloud-900);
259
255
  --colors-icon-on-static-light-subtle: var(--colors-cloud-700);
260
- --colors-icon-placeholder: var(--colors-cloud-400);
256
+ --colors-icon-placeholder: var(--colors-cloud-475);
261
257
  --colors-icon-secondary: var(--colors-cloud-700);
262
258
  --colors-icon-interactive-on-inverted: var(--colors-white);
263
259
  --colors-icon-interactive-on-inverted-hover: var(--colors-cloud-50);
264
260
  --colors-icon-interactive-on-inverted-pressed: var(--colors-cloud-100);
265
261
  --colors-icon-interactive-on-inverted-secondary: var(--colors-cloud-300);
266
- --colors-icon-interactive-on-inverted-secondary-hover: var(
267
- --colors-cloud-350
268
- );
269
- --colors-icon-interactive-on-inverted-secondary-pressed: var(
270
- --colors-cloud-400
271
- );
262
+ --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-cloud-350);
263
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-cloud-400);
272
264
  --colors-icon-interactive-primary: var(--colors-blue-500);
273
265
  --colors-icon-interactive-primary-hover: var(--colors-blue-550);
274
266
  --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
@@ -327,18 +319,14 @@
327
319
  --colors-text-interactive-on-inverted-hover: var(--colors-cloud-50);
328
320
  --colors-text-interactive-on-inverted-pressed: var(--colors-cloud-100);
329
321
  --colors-text-interactive-on-inverted-secondary: var(--colors-cloud-300);
330
- --colors-text-interactive-on-inverted-secondary-hover: var(
331
- --colors-cloud-350
332
- );
333
- --colors-text-interactive-on-inverted-secondary-pressed: var(
334
- --colors-cloud-400
335
- );
322
+ --colors-text-interactive-on-inverted-secondary-hover: var(--colors-cloud-350);
323
+ --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-cloud-400);
336
324
  --colors-text-interactive-primary: var(--colors-blue-500);
337
325
  --colors-text-interactive-primary-hover: var(--colors-blue-550);
338
326
  --colors-text-interactive-primary-pressed: var(--colors-blue-600);
339
- --colors-text-interactive-secondary: var(--colors-cloud-700);
340
- --colors-text-interactive-secondary-hover: var(--colors-cloud-750);
341
- --colors-text-interactive-secondary-pressed: var(--colors-cloud-800);
327
+ --colors-text-interactive-secondary: var(--colors-cloud-500);
328
+ --colors-text-interactive-secondary-hover: var(--colors-cloud-600);
329
+ --colors-text-interactive-secondary-pressed: var(--colors-cloud-650);
342
330
  --colors-text-interactive-selected: var(--colors-blue-550);
343
331
  --colors-text-on-interactive-danger: var(--colors-white);
344
332
  --colors-text-on-interactive-primary: var(--colors-white);
@@ -383,7 +371,7 @@
383
371
  --colors-text-inverted: var(--colors-white);
384
372
  --colors-text-inverted-secondary: var(--colors-cloud-300);
385
373
  --colors-text-muted: var(--colors-cloud-400);
386
- --colors-text-on-disabled: var(--colors-cloud-450);
374
+ --colors-text-on-disabled: var(--colors-cloud-350);
387
375
  --colors-text-on-static-dark: var(--colors-cloud-50);
388
376
  --colors-text-on-static-dark-subtle: var(--colors-cloud-300);
389
377
  --colors-text-on-static-light: var(--colors-cloud-900);
@@ -392,6 +380,20 @@
392
380
  --colors-text-secondary: var(--colors-cloud-700);
393
381
  --colors-text-warning: var(--colors-yellow-800);
394
382
  --colors-text-warning-subtle: var(--colors-yellow-600);
383
+ --radii-panel: var(--radii-150);
384
+ --radii-notification: var(--radii-100);
385
+ --radii-avatar-people: var(--radii-round);
386
+ --radii-avatar-team: var(--radii-50);
387
+ --radii-avatar-group: var(--radii-50);
388
+ --radii-dropdown: var(--radii-250);
389
+ --radii-toolbar: var(--radii-200);
390
+ --radii-toolbar-item: var(--radii-150);
391
+ --radii-input: var(--radii-150);
392
+ --radii-button: var(--radii-100);
393
+ --radii-popup: var(--radii-100);
394
+ --radii-tooltip: var(--radii-100);
395
+ --radii-checkbox: var(--radii-75);
396
+ --radii-list-item: var(--radii-150);
395
397
  --colors-coal-background: var(--colors-coal-500);
396
398
  --colors-coal-background-mild: var(--colors-coal-350);
397
399
  --colors-coal-background-prominent: var(--colors-coal-700);
@@ -541,7 +543,7 @@
541
543
  --colors-black-sticky-background: #151515;
542
544
  --colors-coral-sticky-background: var(--colors-coral-400);
543
545
  --colors-cyan-sticky-background: var(--colors-cyan-400);
544
- --colors-light-coal-sticky-background: #f3f5f7;
546
+ --colors-light-coal-sticky-background: #F3F5F7;
545
547
  --colors-light-lime-sticky-background: var(--colors-lime-250);
546
548
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
547
549
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -620,25 +622,10 @@
620
622
  --colors-teal-text: var(--colors-teal-900);
621
623
  --colors-teal-text-mild: var(--colors-teal-700);
622
624
  --colors-teal-text-subtle: var(--colors-teal-100);
623
- --radii-panel: var(--radii-150);
624
- --radii-notification: var(--radii-100);
625
- --radii-avatar-people: var(--radii-round);
626
- --radii-avatar-team: var(--radii-50);
627
- --radii-avatar-group: var(--radii-50);
628
- --radii-dropdown: var(--radii-250);
629
- --radii-toolbar: var(--radii-200);
630
- --radii-toolbar-item: var(--radii-150);
631
- --radii-input: var(--radii-150);
632
- --radii-button: var(--radii-100);
633
- --radii-popup: var(--radii-100);
634
- --radii-tooltip: var(--radii-100);
635
- --radii-checkbox: var(--radii-75);
636
- --radii-list-item: var(--radii-150);
637
625
  --shadows-50: 0 4px 16px rgba(5, 0, 56, 0.07);
638
626
  --shadows-100: 0 8px 32px rgba(5, 0, 56, 0.03);
639
- --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
640
- 0 0 0 4px var(--colors-focus-keyboard);
627
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner), 0 0 0 4px var(--colors-focus-keyboard);
641
628
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
642
629
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
643
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
630
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
644
631
  }