npm - @mirohq/design-system-themes - Versions diffs - 1.1.2 → 1.2.0 - Mend

@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

package/dist/main.js CHANGED Viewed

@@ -1,12 +1,25 @@
 'use strict';
-const colors$1 = {
+const colors$3 = {
   "background-alpha": "$alpha-gray-100",
   "background-alpha-active": "$alpha-gray-50",
   "background-alpha-hover": "$alpha-gray-100",
   "background-alpha-neutrals-overlay": "#12193E66",
   "background-alpha-neutrals-overlay-subtle": "$alpha-black-200",
   "background-alpha-subtle": "$alpha-gray-50",
+  "background-canvas": "$gray-50",
+  "background-disabled": "$gray-150",
+  "background-elevated": "$white",
+  "background-inverted": "$gray-950",
+  "background-inverted-secondary": "$gray-800",
+  "background-layout": "$white",
+  "background-overlay": "$alpha-black-400",
+  "background-static-dark": "$gray-850",
+  "background-static-dark-subtle": "$gray-750",
+  "background-static-light": "$white",
+  "background-surface": "$white",
+  "background-surface-secondary": "$gray-100",
+  "background-transparent": "$transparent",
   "background-danger-prominent": "$red-500",
   "background-danger-prominent-active": "$red-600",
   "background-danger-prominent-hover": "$red-550",
@@ -15,6 +28,15 @@ const colors$1 = {
   "background-danger-subtle-active": "$red-150",
   "background-danger-subtle-hover": "$red-100",
   "background-danger-subtle-pressed": "$red-150",
+  "background-interactive-danger": "$red-500",
+  "background-interactive-danger-hover": "$red-550",
+  "background-interactive-danger-pressed": "$red-600",
+  "background-interactive-primary": "$blue-500",
+  "background-interactive-primary-hover": "$blue-550",
+  "background-interactive-primary-pressed": "$blue-600",
+  "background-interactive-selected": "$blue-500",
+  "background-interactive-surface-hover": "$gray-100",
+  "background-interactive-surface-secondary-hover": "$gray-150",
   "background-neutrals": "$white",
   "background-neutrals-active": "$gray-150",
   "background-neutrals-container": "$white",
@@ -39,8 +61,6 @@ const colors$1 = {
   "background-neutrals-subtle-hover": "$gray-150",
   "background-neutrals-subtle-pressed": "$gray-200",
   "background-neutrals-transparent": "$transparent",
-  "background-static-dark": "$gray-850",
-  "background-static-dark-subtle": "$gray-750",
   "background-primary-prominent": "$blue-500",
   "background-primary-prominent-active": "$blue-600",
   "background-primary-prominent-hover": "$blue-550",
@@ -51,6 +71,10 @@ const colors$1 = {
   "background-primary-subtle-hover": "$blue-150",
   "background-primary-subtle-pressed": "$blue-200",
   "background-primary-subtle-selected": "$blue-150",
+  "status-background-error": "$red-50",
+  "status-background-info": "$blue-100",
+  "status-background-success": "$green-50",
+  "status-background-warning": "$yellow-100",
   "background-success-prominent": "$green-500",
   "background-success-prominent-active": "$green-600",
   "background-success-prominent-hover": "$green-550",
@@ -58,6 +82,15 @@ const colors$1 = {
   "background-success-subtle": "$green-50",
   "background-warning-prominent": "$yellow-500",
   "background-warning-subtle": "$yellow-100",
+  "border-default": "$gray-200",
+  "border-disabled": "$gray-150",
+  "border-inverted": "$white",
+  "border-inverted-subtle": "$gray-700",
+  "border-static-dark": "$gray-450",
+  "border-static-dark-subtle": "$gray-750",
+  "border-strong": "$gray-400",
+  "border-subtle": "$gray-150",
+  "border-transparent": "$transparent",
   "border-danger": "$red-500",
   "border-danger-active": "$red-600",
   "border-danger-hover": "$red-550",
@@ -73,6 +106,16 @@ const colors$1 = {
   "border-focus-success-middle": "$blue-400",
   "border-focus-success-outer": "$blue-200",
   "focus-keyboard": "#2B4DF8",
+  "border-interactive-danger": "$red-500",
+  "border-interactive-danger-hover": "$red-550",
+  "border-interactive-danger-pressed": "$red-600",
+  "border-interactive-primary": "$blue-500",
+  "border-interactive-primary-hover": "$blue-550",
+  "border-interactive-primary-pressed": "$blue-600",
+  "border-interactive-secondary": "$gray-150",
+  "border-interactive-secondary-hover": "$gray-200",
+  "border-interactive-secondary-pressed": "$gray-250",
+  "border-interactive-selected": "$blue-550",
   "border-neutrals": "$gray-200",
   "border-neutrals-active": "$gray-350",
   "border-neutrals-controls": "$gray-450",
@@ -91,8 +134,6 @@ const colors$1 = {
   "border-neutrals-text-subtle-active": "$gray-600",
   "border-neutrals-text-subtle-hover": "$gray-550",
   "border-neutrals-transparent": "$transparent",
-  "border-static-dark": "$gray-450",
-  "border-static-dark-subtle": "$gray-750",
   "border-primary": "$blue-500",
   "border-primary-active": "$blue-600",
   "border-primary-hover": "$blue-550",
@@ -100,6 +141,10 @@ const colors$1 = {
   "border-primary-pressed": "$blue-600",
   "border-primary-selected": "$blue-550",
   "border-primary-subtle": "$blue-250",
+  "status-border-error": "$red-200",
+  "status-border-info": "$blue-250",
+  "status-border-success": "$green-250",
+  "status-border-warning": "$yellow-300",
   "border-success": "$green-500",
   "border-success-active": "$green-600",
   "border-success-hover": "$green-550",
@@ -107,12 +152,46 @@ const colors$1 = {
   "border-success-subtle": "$green-250",
   "border-warning": "$yellow-500",
   "border-warning-subtle": "$yellow-300",
+  "button-background-danger": "$red-500",
+  "button-background-danger-hover": "$red-550",
+  "button-background-danger-pressed": "$red-600",
+  "button-background-ghost": "$transparent",
+  "button-background-ghost-hover": "$gray-150",
+  "button-background-ghost-pressed": "$gray-200",
   "button-background-primary": "$blue-500",
   "button-background-primary-hover": "$blue-550",
   "button-background-primary-pressed": "$blue-600",
   "button-background-secondary": "$gray-150",
   "button-background-secondary-hover": "$gray-200",
   "button-background-secondary-pressed": "$gray-250",
+  "button-background-tertiary": "$transparent",
+  "button-background-tertiary-hover": "$blue-150",
+  "button-background-tertiary-pressed": "$blue-200",
+  "button-border-danger": "$red-500",
+  "button-border-danger-hover": "$red-550",
+  "button-border-danger-pressed": "$red-600",
+  "button-border-ghost-hover": "$transparent",
+  "button-border-ghost-pressed": "$transparent",
+  "button-border-primary": "$blue-500",
+  "button-border-primary-hover": "$blue-550",
+  "button-border-primary-pressed": "$blue-600",
+  "button-border-secondary": "$gray-150",
+  "button-border-secondary-hover": "$gray-200",
+  "button-border-secondary-pressed": "$gray-250",
+  "button-border-tertiary": "$blue-500",
+  "button-border-tertiary-hover": "$blue-550",
+  "button-border-tertiary-pressed": "$blue-600",
+  "button-icon-on-danger": "$white",
+  "button-icon-on-primary": "$white",
+  "button-icon-on-secondary": "$gray-900",
+  "button-icon-on-tertiary": "$blue-500",
+  "button-text-on-danger": "$white",
+  "button-text-on-primary": "$white",
+  "button-text-on-secondary": "$gray-900",
+  "button-text-on-tertiary": "$blue-500",
+  "chip-background": "$gray-100",
+  "chip-background-hover": "$gray-150",
+  "chip-text": "$gray-900",
   "format-icon-diagram": "$orange-600",
   "format-icon-docs": "$cyan-600",
   "format-icon-external": "$teal-600",
@@ -121,17 +200,66 @@ const colors$1 = {
   "format-icon-slides": "$coral-600",
   "format-icon-table": "$moss-600",
   "format-icon-timeline": "$moss-600",
+  "input-background-active": "$white",
+  "input-background-alt-active": "$gray-100",
+  "input-background-alt-default": "$gray-100",
+  "input-background-alt-hover": "$gray-100",
+  "input-background-default": "$white",
+  "input-background-disabled": "$gray-150",
+  "input-background-hover": "$white",
+  "input-border-active": "$blue-550",
+  "input-border-default": "$gray-200",
+  "input-border-disabled": "$transparent",
+  "input-border-error": "$red-500",
+  "input-border-hover": "$blue-550",
+  "input-border-selection-control": "$gray-450",
+  "input-border-success": "$green-500",
   "notification-background": "$gray-850",
   "notification-border": "$gray-450",
   "notification-border-subtle": "$gray-750",
-  "popup-background-static": "$gray-900",
-  "popup-text-static": "$white",
+  "popover-background": "$gray-900",
+  "popover-border": "$gray-450",
+  "scrollbar-background": "$gray-300",
+  "scrollbar-background-hover": "$gray-350",
+  "slider-background": "$gray-300",
+  "slider-notch-background": "$gray-300",
+  "switch-background-default": "$gray-300",
+  "switch-background-hover": "$gray-350",
+  "switch-control-background": "$white",
   "tooltip-background": "$gray-950",
+  "tooltip-background-inset": "$gray-650",
   "icon-danger": "$red-500",
   "icon-danger-active": "$red-600",
   "icon-danger-hover": "$red-550",
   "icon-danger-inverted": "$red-50",
   "icon-danger-pressed": "$red-600",
+  "icon-default": "$gray-900",
+  "icon-disabled": "$gray-350",
+  "icon-inverted": "$white",
+  "icon-inverted-secondary": "$gray-150",
+  "icon-muted": "$gray-400",
+  "icon-on-disabled": "$gray-350",
+  "icon-on-static-dark": "$gray-50",
+  "icon-on-static-dark-subtle": "$gray-300",
+  "icon-placeholder": "$gray-475",
+  "icon-secondary": "$gray-500",
+  "icon-interactive-selected": "$blue-550",
+  "icon-link": "$blue-500",
+  "icon-link-hover": "$blue-550",
+  "icon-link-on-inverted": "$white",
+  "icon-link-on-inverted-hover": "$gray-50",
+  "icon-link-on-inverted-pressed": "$gray-100",
+  "icon-link-on-inverted-secondary": "$gray-150",
+  "icon-link-on-inverted-secondary-hover": "$gray-200",
+  "icon-link-on-inverted-secondary-pressed": "$gray-250",
+  "icon-link-pressed": "$blue-600",
+  "icon-link-secondary": "$gray-500",
+  "icon-link-secondary-hover": "$gray-550",
+  "icon-link-secondary-pressed": "$gray-600",
+  "icon-on-interactive-danger": "$white",
+  "icon-on-interactive-primary": "$white",
+  "icon-on-interactive-secondary": "$gray-900",
+  "icon-on-interactive-selected": "$blue-550",
   "icon-neutrals": "$gray-900",
   "icon-neutrals-disabled": "$gray-350",
   "icon-neutrals-hover": "$gray-950",
@@ -148,8 +276,6 @@ const colors$1 = {
   "icon-neutrals-subtle-hover": "$gray-550",
   "icon-neutrals-subtle-pressed": "$gray-600",
   "icon-neutrals-text": "$gray-700",
-  "icon-on-static-dark": "$gray-50",
-  "icon-on-static-dark-subtle": "$gray-300",
   "icon-primary": "$blue-500",
   "icon-primary-active": "$blue-600",
   "icon-primary-hover": "$blue-550",
@@ -157,6 +283,13 @@ const colors$1 = {
   "icon-primary-inverted-hover": "$blue-100",
   "icon-primary-pressed": "$blue-600",
   "icon-primary-selected": "$blue-550",
+  "status-icon-error": "$red-500",
+  "status-icon-on-error": "$red-500",
+  "status-icon-on-info": "$blue-500",
+  "status-icon-on-success": "$green-500",
+  "status-icon-on-warning": "$yellow-800",
+  "status-icon-success": "$green-500",
+  "status-icon-warning": "$yellow-700",
   "icon-success": "$green-600",
   "icon-success-active": "$green-700",
   "icon-success-hover": "$green-650",
@@ -170,6 +303,23 @@ const colors$1 = {
   "text-danger-hover": "$red-550",
   "text-danger-inverted": "$red-50",
   "text-danger-pressed": "$red-600",
+  "text-interactive-selected": "$blue-550",
+  "text-link": "$blue-500",
+  "text-link-hover": "$blue-550",
+  "text-link-on-inverted": "$white",
+  "text-link-on-inverted-hover": "$gray-50",
+  "text-link-on-inverted-pressed": "$gray-100",
+  "text-link-on-inverted-secondary": "$gray-150",
+  "text-link-on-inverted-secondary-hover": "$gray-200",
+  "text-link-on-inverted-secondary-pressed": "$gray-250",
+  "text-link-pressed": "$blue-600",
+  "text-link-secondary": "$gray-500",
+  "text-link-secondary-hover": "$gray-550",
+  "text-link-secondary-pressed": "$gray-600",
+  "text-on-interactive-danger": "$white",
+  "text-on-interactive-primary": "$white",
+  "text-on-interactive-secondary": "$gray-900",
+  "text-on-interactive-selected": "$blue-550",
   "text-neutrals": "$gray-900",
   "text-neutrals-active": "$gray-950",
   "text-neutrals-disabled": "$gray-350",
@@ -185,9 +335,6 @@ const colors$1 = {
   "text-neutrals-subtle-active": "$gray-700",
   "text-neutrals-subtle-hover": "$gray-550",
   "text-neutrals-subtle-pressed": "$gray-600",
-  "text-on-static-dark": "$gray-50",
-  "text-on-static-dark-subtle": "$gray-300",
-  "text-on-primary": "$white",
   "text-primary": "$blue-500",
   "text-primary-active": "$blue-600",
   "text-primary-hover": "$blue-550",
@@ -195,11 +342,28 @@ const colors$1 = {
   "text-primary-inverted-subtle": "$blue-100",
   "text-primary-pressed": "$blue-600",
   "text-primary-selected": "$blue-550",
+  "status-text-error": "$red-500",
+  "status-text-on-error": "$gray-900",
+  "status-text-on-info": "$gray-900",
+  "status-text-on-success": "$gray-900",
+  "status-text-on-warning": "$gray-900",
+  "status-text-success": "$green-600",
+  "status-text-warning": "$yellow-800",
   "text-success": "$green-600",
   "text-success-active": "$green-700",
   "text-success-hover": "$green-650",
   "text-success-inverted": "$green-50",
   "text-success-pressed": "$green-700",
+  "text-default": "$gray-900",
+  "text-disabled": "$gray-350",
+  "text-inverted": "$white",
+  "text-inverted-secondary": "$gray-150",
+  "text-muted": "$gray-400",
+  "text-on-disabled": "$gray-350",
+  "text-on-static-dark": "$gray-50",
+  "text-on-static-dark-subtle": "$gray-300",
+  "text-placeholder": "$gray-475",
+  "text-secondary": "$gray-500",
   "text-warning": "$yellow-800",
   "text-warning-subtle": "$yellow-600",
   "coal-background": "$coal-500",
@@ -432,13 +596,26 @@ const colors$1 = {
   "teal-text-subtle": "$teal-100"
 };
-const colors = {
+const colors$2 = {
   "background-alpha": "$alpha-black-100",
   "background-alpha-active": "$alpha-black-50",
   "background-alpha-hover": "$alpha-black-100",
   "background-alpha-neutrals-overlay": "#12193E66",
   "background-alpha-neutrals-overlay-subtle": "$alpha-black-200",
   "background-alpha-subtle": "$alpha-black-50",
+  "background-canvas": "$gray-950",
+  "background-disabled": "$gray-850",
+  "background-elevated": "$gray-850",
+  "background-inverted": "$white",
+  "background-inverted-secondary": "$gray-150",
+  "background-layout": "$gray-850",
+  "background-overlay": "$alpha-black-400",
+  "background-static-dark": "$gray-850",
+  "background-static-dark-subtle": "$gray-750",
+  "background-static-light": "$white",
+  "background-surface": "$gray-950",
+  "background-surface-secondary": "$gray-750",
+  "background-transparent": "$transparent",
   "background-danger-prominent": "$red-500",
   "background-danger-prominent-active": "$red-400",
   "background-danger-prominent-hover": "$red-450",
@@ -447,6 +624,15 @@ const colors = {
   "background-danger-subtle-active": "$red-500",
   "background-danger-subtle-hover": "$red-550",
   "background-danger-subtle-pressed": "$red-500",
+  "background-interactive-danger": "$red-500",
+  "background-interactive-danger-hover": "$red-450",
+  "background-interactive-danger-pressed": "$red-400",
+  "background-interactive-primary": "$blue-500",
+  "background-interactive-primary-hover": "$blue-450",
+  "background-interactive-primary-pressed": "$blue-400",
+  "background-interactive-selected": "$blue-500",
+  "background-interactive-surface-hover": "$gray-900",
+  "background-interactive-surface-secondary-hover": "$gray-700",
   "background-neutrals": "$gray-950",
   "background-neutrals-active": "$gray-850",
   "background-neutrals-container": "$gray-850",
@@ -471,8 +657,6 @@ const colors = {
   "background-neutrals-subtle-hover": "$gray-700",
   "background-neutrals-subtle-pressed": "$gray-650",
   "background-neutrals-transparent": "$transparent",
-  "background-static-dark": "$gray-850",
-  "background-static-dark-subtle": "$gray-750",
   "background-primary-prominent": "$blue-400",
   "background-primary-prominent-active": "$blue-300",
   "background-primary-prominent-hover": "$blue-350",
@@ -483,6 +667,10 @@ const colors = {
   "background-primary-subtle-hover": "$blue-650",
   "background-primary-subtle-pressed": "$blue-600",
   "background-primary-subtle-selected": "$blue-700",
+  "status-background-error": "$red-900",
+  "status-background-info": "$blue-900",
+  "status-background-success": "$green-900",
+  "status-background-warning": "$yellow-900",
   "background-success-prominent": "$green-500",
   "background-success-prominent-active": "$green-400",
   "background-success-prominent-hover": "$green-450",
@@ -490,6 +678,15 @@ const colors = {
   "background-success-subtle": "$green-900",
   "background-warning-prominent": "$yellow-400",
   "background-warning-subtle": "$yellow-900",
+  "border-default": "$gray-650",
+  "border-disabled": "$gray-750",
+  "border-inverted": "$gray-700",
+  "border-inverted-subtle": "$gray-600",
+  "border-static-dark": "$gray-450",
+  "border-static-dark-subtle": "$gray-750",
+  "border-strong": "$gray-500",
+  "border-subtle": "$gray-800",
+  "border-transparent": "$transparent",
   "border-danger": "$red-400",
   "border-danger-active": "$red-300",
   "border-danger-hover": "$red-350",
@@ -505,6 +702,16 @@ const colors = {
   "border-focus-success-middle": "$blue-350",
   "border-focus-success-outer": "$blue-550",
   "focus-keyboard": "#2B4DF8",
+  "border-interactive-danger": "$red-500",
+  "border-interactive-danger-hover": "$red-450",
+  "border-interactive-danger-pressed": "$red-400",
+  "border-interactive-primary": "$blue-500",
+  "border-interactive-primary-hover": "$blue-450",
+  "border-interactive-primary-pressed": "$blue-400",
+  "border-interactive-secondary": "$gray-750",
+  "border-interactive-secondary-hover": "$gray-700",
+  "border-interactive-secondary-pressed": "$gray-650",
+  "border-interactive-selected": "$blue-400",
   "border-neutrals": "$gray-650",
   "border-neutrals-active": "$gray-350",
   "border-neutrals-controls": "$gray-450",
@@ -523,8 +730,6 @@ const colors = {
   "border-neutrals-text-subtle-active": "$gray-100",
   "border-neutrals-text-subtle-hover": "$gray-200",
   "border-neutrals-transparent": "$transparent",
-  "border-static-dark": "$gray-450",
-  "border-static-dark-subtle": "$gray-750",
   "border-primary": "$blue-400",
   "border-primary-active": "$blue-300",
   "border-primary-hover": "$blue-350",
@@ -532,6 +737,10 @@ const colors = {
   "border-primary-pressed": "$blue-300",
   "border-primary-selected": "$blue-400",
   "border-primary-subtle": "$blue-750",
+  "status-border-error": "$red-700",
+  "status-border-info": "$blue-700",
+  "status-border-success": "$green-700",
+  "status-border-warning": "$yellow-700",
   "border-success": "$green-500",
   "border-success-active": "$green-400",
   "border-success-hover": "$green-450",
@@ -539,12 +748,46 @@ const colors = {
   "border-success-subtle": "$green-700",
   "border-warning": "$yellow-500",
   "border-warning-subtle": "$yellow-700",
-  "button-background-primary": "$blue-400",
-  "button-background-primary-hover": "$blue-350",
-  "button-background-primary-pressed": "$blue-300",
+  "button-background-danger": "$red-500",
+  "button-background-danger-hover": "$red-450",
+  "button-background-danger-pressed": "$red-400",
+  "button-background-ghost": "$transparent",
+  "button-background-ghost-hover": "$gray-800",
+  "button-background-ghost-pressed": "$gray-750",
+  "button-background-primary": "$blue-500",
+  "button-background-primary-hover": "$blue-450",
+  "button-background-primary-pressed": "$blue-400",
   "button-background-secondary": "$gray-750",
   "button-background-secondary-hover": "$gray-700",
-  "button-background-secondary-pressed": "$gray-650",
+  "button-background-secondary-pressed": "$gray-700",
+  "button-background-tertiary": "$transparent",
+  "button-background-tertiary-hover": "$blue-650",
+  "button-background-tertiary-pressed": "$blue-600",
+  "button-border-danger": "$red-500",
+  "button-border-danger-hover": "$red-450",
+  "button-border-danger-pressed": "$red-400",
+  "button-border-ghost-hover": "$transparent",
+  "button-border-ghost-pressed": "$transparent",
+  "button-border-primary": "$blue-500",
+  "button-border-primary-hover": "$blue-450",
+  "button-border-primary-pressed": "$blue-400",
+  "button-border-secondary": "$gray-750",
+  "button-border-secondary-hover": "$gray-700",
+  "button-border-secondary-pressed": "$gray-650",
+  "button-border-tertiary": "$blue-500",
+  "button-border-tertiary-hover": "$blue-450",
+  "button-border-tertiary-pressed": "$blue-400",
+  "button-icon-on-danger": "$white",
+  "button-icon-on-primary": "$white",
+  "button-icon-on-secondary": "$gray-50",
+  "button-icon-on-tertiary": "$blue-400",
+  "button-text-on-danger": "$white",
+  "button-text-on-primary": "$white",
+  "button-text-on-secondary": "$gray-50",
+  "button-text-on-tertiary": "$blue-400",
+  "chip-background": "$gray-750",
+  "chip-background-hover": "$gray-700",
+  "chip-text": "$gray-50",
   "format-icon-diagram": "$orange-600",
   "format-icon-docs": "$cyan-600",
   "format-icon-external": "$teal-600",
@@ -553,17 +796,66 @@ const colors = {
   "format-icon-slides": "$coral-600",
   "format-icon-table": "$moss-600",
   "format-icon-timeline": "$moss-600",
+  "input-background-active": "$gray-950",
+  "input-background-alt-active": "$gray-750",
+  "input-background-alt-default": "$gray-750",
+  "input-background-alt-hover": "$gray-750",
+  "input-background-default": "$gray-950",
+  "input-background-disabled": "$gray-850",
+  "input-background-hover": "$gray-950",
+  "input-border-active": "$blue-350",
+  "input-border-default": "$gray-650",
+  "input-border-disabled": "$transparent",
+  "input-border-error": "$red-400",
+  "input-border-hover": "$blue-350",
+  "input-border-selection-control": "$gray-450",
+  "input-border-success": "$green-400",
   "notification-background": "$gray-150",
   "notification-border": "$gray-450",
   "notification-border-subtle": "$gray-300",
-  "popup-background-static": "$gray-800",
-  "popup-text-static": "$white",
+  "popover-background": "$gray-800",
+  "popover-border": "$gray-450",
+  "scrollbar-background": "$gray-700",
+  "scrollbar-background-hover": "$gray-650",
+  "slider-background": "$gray-700",
+  "slider-notch-background": "$gray-700",
+  "switch-background-default": "$gray-700",
+  "switch-background-hover": "$gray-650",
+  "switch-control-background": "$gray-950",
   "tooltip-background": "$gray-650",
+  "tooltip-background-inset": "$gray-650",
   "icon-danger": "$red-400",
   "icon-danger-active": "$red-300",
   "icon-danger-hover": "$red-350",
   "icon-danger-inverted": "$red-900",
   "icon-danger-pressed": "$red-300",
+  "icon-default": "$gray-50",
+  "icon-disabled": "$gray-450",
+  "icon-inverted": "$gray-900",
+  "icon-inverted-secondary": "$gray-700",
+  "icon-muted": "$gray-400",
+  "icon-on-disabled": "$gray-450",
+  "icon-on-static-dark": "$gray-50",
+  "icon-on-static-dark-subtle": "$gray-300",
+  "icon-placeholder": "$gray-450",
+  "icon-secondary": "$gray-300",
+  "icon-interactive-selected": "$blue-400",
+  "icon-link": "$blue-400",
+  "icon-link-hover": "$blue-350",
+  "icon-link-on-inverted": "$gray-900",
+  "icon-link-on-inverted-hover": "$gray-850",
+  "icon-link-on-inverted-pressed": "$gray-800",
+  "icon-link-on-inverted-secondary": "$gray-700",
+  "icon-link-on-inverted-secondary-hover": "$gray-650",
+  "icon-link-on-inverted-secondary-pressed": "$gray-600",
+  "icon-link-pressed": "$blue-300",
+  "icon-link-secondary": "$gray-300",
+  "icon-link-secondary-hover": "$gray-250",
+  "icon-link-secondary-pressed": "$gray-200",
+  "icon-on-interactive-danger": "$white",
+  "icon-on-interactive-primary": "$white",
+  "icon-on-interactive-secondary": "$gray-50",
+  "icon-on-interactive-selected": "$blue-400",
   "icon-neutrals": "$gray-50",
   "icon-neutrals-disabled": "$gray-450",
   "icon-neutrals-hover": "$gray-100",
@@ -580,8 +872,6 @@ const colors = {
   "icon-neutrals-subtle-hover": "$gray-250",
   "icon-neutrals-subtle-pressed": "$gray-200",
   "icon-neutrals-text": "$gray-300",
-  "icon-on-static-dark": "$gray-50",
-  "icon-on-static-dark-subtle": "$gray-300",
   "icon-primary": "$blue-400",
   "icon-primary-active": "$blue-300",
   "icon-primary-hover": "$blue-350",
@@ -589,6 +879,13 @@ const colors = {
   "icon-primary-inverted-hover": "$blue-850",
   "icon-primary-pressed": "$blue-300",
   "icon-primary-selected": "$blue-400",
+  "status-icon-error": "$red-400",
+  "status-icon-on-error": "$red-400",
+  "status-icon-on-info": "$blue-400",
+  "status-icon-on-success": "$green-400",
+  "status-icon-on-warning": "$yellow-200",
+  "status-icon-success": "$green-400",
+  "status-icon-warning": "$yellow-200",
   "icon-success": "$green-400",
   "icon-success-active": "$green-300",
   "icon-success-hover": "$green-350",
@@ -602,6 +899,23 @@ const colors = {
   "text-danger-hover": "$red-350",
   "text-danger-inverted": "$red-900",
   "text-danger-pressed": "$red-300",
+  "text-interactive-selected": "$blue-400",
+  "text-link": "$blue-400",
+  "text-link-hover": "$blue-350",
+  "text-link-on-inverted": "$gray-900",
+  "text-link-on-inverted-hover": "$gray-850",
+  "text-link-on-inverted-pressed": "$gray-800",
+  "text-link-on-inverted-secondary": "$gray-700",
+  "text-link-on-inverted-secondary-hover": "$gray-650",
+  "text-link-on-inverted-secondary-pressed": "$gray-600",
+  "text-link-pressed": "$blue-300",
+  "text-link-secondary": "$gray-300",
+  "text-link-secondary-hover": "$gray-250",
+  "text-link-secondary-pressed": "$gray-200",
+  "text-on-interactive-danger": "$white",
+  "text-on-interactive-primary": "$white",
+  "text-on-interactive-secondary": "$gray-50",
+  "text-on-interactive-selected": "$blue-400",
   "text-neutrals": "$gray-50",
   "text-neutrals-active": "$gray-150",
   "text-neutrals-disabled": "$gray-450",
@@ -617,9 +931,6 @@ const colors = {
   "text-neutrals-subtle-active": "$gray-200",
   "text-neutrals-subtle-hover": "$gray-250",
   "text-neutrals-subtle-pressed": "$gray-200",
-  "text-on-static-dark": "$gray-50",
-  "text-on-static-dark-subtle": "$gray-300",
-  "text-on-primary": "$white",
   "text-primary": "$blue-400",
   "text-primary-active": "$blue-300",
   "text-primary-hover": "$blue-350",
@@ -627,11 +938,28 @@ const colors = {
   "text-primary-inverted-subtle": "$blue-700",
   "text-primary-pressed": "$blue-300",
   "text-primary-selected": "$blue-400",
+  "status-text-error": "$red-400",
+  "status-text-on-error": "$gray-50",
+  "status-text-on-info": "$gray-50",
+  "status-text-on-success": "$gray-50",
+  "status-text-on-warning": "$gray-50",
+  "status-text-success": "$green-400",
+  "status-text-warning": "$yellow-200",
   "text-success": "$green-400",
   "text-success-active": "$green-300",
   "text-success-hover": "$green-350",
   "text-success-inverted": "$green-900",
   "text-success-pressed": "$green-300",
+  "text-default": "$gray-50",
+  "text-disabled": "$gray-450",
+  "text-inverted": "$gray-900",
+  "text-inverted-secondary": "$gray-700",
+  "text-muted": "$gray-400",
+  "text-on-disabled": "$gray-450",
+  "text-on-static-dark": "$gray-50",
+  "text-on-static-dark-subtle": "$gray-300",
+  "text-placeholder": "$gray-450",
+  "text-secondary": "$gray-300",
   "text-warning": "$yellow-200",
   "text-warning-subtle": "$yellow-300",
   "coal-background": "$coal-500",
@@ -864,30 +1192,1230 @@ const colors = {
   "teal-text-subtle": "$teal-100"
 };
-const aliasShadows = {
-  focus: "0 0 0 2px $colors$border-focus-inner, 0 0 0 4px $colors$focus-keyboard",
-  "elevation-0": "0 0 0 1px $colors$gray-200",
-  "elevation-100": "0 2px 4px 0px #22242814",
-  "elevation-200": "0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A"
-};
-const shadows$1 = {
-  50: "0 4px 16px rgba(5, 0, 56, 0.07)",
-  100: "0 8px 32px rgba(5, 0, 56, 0.03)",
-  ...aliasShadows
-};
-const shadows = {
-  50: "0 0 8px 0 rgba(9,9,9,.65)",
-  100: "0 0 16px 0 rgba(9,9,9,.65)",
-  ...aliasShadows
-};
-const light = Object.freeze({
-  colors: colors$1,
-  shadows: shadows$1
-});
-const dark = Object.freeze({
+const colors$1 = {
+  "background-alpha": "$alpha-gray-100",
+  "background-alpha-active": "$alpha-gray-50",
+  "background-alpha-hover": "$alpha-gray-100",
+  "background-alpha-neutrals-overlay": "#12193E66",
+  "background-alpha-neutrals-overlay-subtle": "$alpha-black-200",
+  "background-alpha-subtle": "$alpha-gray-50",
+  "background-canvas": "$cloud-50",
+  "background-disabled": "$gray-150",
+  "background-elevated": "$white",
+  "background-inverted": "$cloud-950",
+  "background-inverted-secondary": "$cloud-800",
+  "background-layout": "$white",
+  "background-overlay": "$alpha-black-400",
+  "background-static-dark": "$cloud-850",
+  "background-static-dark-subtle": "$cloud-750",
+  "background-static-light": "$white",
+  "background-surface": "$white",
+  "background-surface-secondary": "$cloud-100",
+  "background-transparent": "$transparent",
+  "background-danger-prominent": "$red-500",
+  "background-danger-prominent-active": "$red-600",
+  "background-danger-prominent-hover": "$red-550",
+  "background-danger-prominent-pressed": "$red-600",
+  "background-danger-subtle": "$red-50",
+  "background-danger-subtle-active": "$red-150",
+  "background-danger-subtle-hover": "$red-100",
+  "background-danger-subtle-pressed": "$red-150",
+  "background-interactive-danger": "$red-500",
+  "background-interactive-danger-hover": "$red-550",
+  "background-interactive-danger-pressed": "$red-600",
+  "background-interactive-primary": "$blue-500",
+  "background-interactive-primary-hover": "$blue-550",
+  "background-interactive-primary-pressed": "$blue-600",
+  "background-interactive-selected": "$blue-500",
+  "background-interactive-surface-hover": "$cloud-100",
+  "background-interactive-surface-secondary-hover": "$cloud-150",
+  "background-neutrals": "$white",
+  "background-neutrals-active": "$cloud-150",
+  "background-neutrals-container": "$white",
+  "background-neutrals-control": "$cloud-300",
+  "background-neutrals-control-hover": "$cloud-350",
+  "background-neutrals-control-pressed": "$cloud-400",
+  "background-neutrals-disabled": "$cloud-150",
+  "background-neutrals-hover": "$cloud-100",
+  "background-neutrals-inactive": "$cloud-450",
+  "background-neutrals-inactive-hover": "$cloud-500",
+  "background-neutrals-inverted": "$cloud-950",
+  "background-neutrals-inverted-subtle": "$cloud-800",
+  "background-neutrals-layout": "$white",
+  "background-neutrals-page": "$cloud-100",
+  "background-neutrals-page-subtle": "$cloud-150",
+  "background-neutrals-pressed": "$cloud-150",
+  "background-neutrals-scrollbar": "$cloud-300",
+  "background-neutrals-scrollbar-active": "$cloud-400",
+  "background-neutrals-scrollbar-hover": "$cloud-350",
+  "background-neutrals-subtle": "$cloud-100",
+  "background-neutrals-subtle-active": "$cloud-200",
+  "background-neutrals-subtle-hover": "$cloud-150",
+  "background-neutrals-subtle-pressed": "$cloud-200",
+  "background-neutrals-transparent": "$transparent",
+  "background-primary-prominent": "$blue-500",
+  "background-primary-prominent-active": "$blue-600",
+  "background-primary-prominent-hover": "$blue-550",
+  "background-primary-prominent-pressed": "$blue-600",
+  "background-primary-prominent-selected": "$blue-500",
+  "background-primary-subtle": "$blue-100",
+  "background-primary-subtle-active": "$blue-200",
+  "background-primary-subtle-hover": "$blue-150",
+  "background-primary-subtle-pressed": "$blue-200",
+  "background-primary-subtle-selected": "$blue-150",
+  "status-background-error": "$red-50",
+  "status-background-info": "$blue-100",
+  "status-background-success": "$green-50",
+  "status-background-warning": "$yellow-100",
+  "background-success-prominent": "$green-500",
+  "background-success-prominent-active": "$green-600",
+  "background-success-prominent-hover": "$green-550",
+  "background-success-prominent-pressed": "$green-600",
+  "background-success-subtle": "$green-50",
+  "background-warning-prominent": "$yellow-500",
+  "background-warning-subtle": "$yellow-100",
+  "border-default": "$cloud-200",
+  "border-disabled": "$cloud-150",
+  "border-inverted": "$cloud-900",
+  "border-inverted-subtle": "$cloud-700",
+  "border-static-dark": "$cloud-450",
+  "border-static-dark-subtle": "$cloud-750",
+  "border-strong": "$cloud-300",
+  "border-subtle": "$cloud-100",
+  "border-transparent": "$transparent",
+  "border-danger": "$red-500",
+  "border-danger-active": "$red-600",
+  "border-danger-hover": "$red-550",
+  "border-danger-pressed": "$red-600",
+  "border-danger-subtle": "$red-200",
+  "border-focus-error-inner": "$white",
+  "border-focus-error-middle": "$blue-400",
+  "border-focus-error-outer": "$blue-200",
+  "border-focus-inner": "#FFFFFF",
+  "border-focus-middle": "$blue-400",
+  "border-focus-outer": "$blue-200",
+  "border-focus-success-inner": "$white",
+  "border-focus-success-middle": "$blue-400",
+  "border-focus-success-outer": "$blue-200",
+  "focus-keyboard": "#2B4DF8",
+  "border-interactive-danger": "$red-500",
+  "border-interactive-danger-hover": "$red-550",
+  "border-interactive-danger-pressed": "$red-600",
+  "border-interactive-primary": "$blue-500",
+  "border-interactive-primary-hover": "$blue-550",
+  "border-interactive-primary-pressed": "$blue-600",
+  "border-interactive-secondary": "$cloud-900",
+  "border-interactive-secondary-hover": "$cloud-950",
+  "border-interactive-secondary-pressed": "$cloud-1000",
+  "border-interactive-selected": "$blue-550",
+  "border-neutrals": "$cloud-200",
+  "border-neutrals-active": "$cloud-350",
+  "border-neutrals-controls": "$cloud-450",
+  "border-neutrals-controls-disabled": "$cloud-150",
+  "border-neutrals-disabled": "$cloud-150",
+  "border-neutrals-hover": "$cloud-300",
+  "border-neutrals-inverted": "$white",
+  "border-neutrals-pressed": "$cloud-350",
+  "border-neutrals-subtle": "$cloud-150",
+  "border-neutrals-subtle-hover": "$cloud-200",
+  "border-neutrals-subtle-pressed": "$cloud-250",
+  "border-neutrals-text": "$cloud-900",
+  "border-neutrals-text-active": "$cloud-950",
+  "border-neutrals-text-hover": "$cloud-950",
+  "border-neutrals-text-subtle": "$cloud-500",
+  "border-neutrals-text-subtle-active": "$cloud-600",
+  "border-neutrals-text-subtle-hover": "$cloud-550",
+  "border-neutrals-transparent": "$transparent",
+  "border-primary": "$blue-500",
+  "border-primary-active": "$blue-600",
+  "border-primary-hover": "$blue-550",
+  "border-primary-inverted": "$blue-50",
+  "border-primary-pressed": "$blue-600",
+  "border-primary-selected": "$blue-550",
+  "border-primary-subtle": "$blue-250",
+  "status-border-error": "$red-200",
+  "status-border-info": "$blue-250",
+  "status-border-success": "$green-250",
+  "status-border-warning": "$yellow-300",
+  "border-success": "$green-500",
+  "border-success-active": "$green-600",
+  "border-success-hover": "$green-550",
+  "border-success-pressed": "$green-600",
+  "border-success-subtle": "$green-250",
+  "border-warning": "$yellow-500",
+  "border-warning-subtle": "$yellow-300",
+  "button-background-danger": "$red-500",
+  "button-background-danger-hover": "$red-550",
+  "button-background-danger-pressed": "$red-600",
+  "button-background-ghost": "$transparent",
+  "button-background-ghost-hover": "$cloud-150",
+  "button-background-ghost-pressed": "$cloud-200",
+  "button-background-primary": "$blue-500",
+  "button-background-primary-hover": "$blue-550",
+  "button-background-primary-pressed": "$blue-600",
+  "button-background-secondary": "$transparent",
+  "button-background-secondary-hover": "$cloud-150",
+  "button-background-secondary-pressed": "$cloud-200",
+  "button-background-tertiary": "$cloud-900",
+  "button-background-tertiary-hover": "$cloud-850",
+  "button-background-tertiary-pressed": "$cloud-850",
+  "button-border-danger": "$red-500",
+  "button-border-danger-hover": "$red-550",
+  "button-border-danger-pressed": "$red-600",
+  "button-border-ghost-hover": "$transparent",
+  "button-border-ghost-pressed": "$transparent",
+  "button-border-primary": "$blue-500",
+  "button-border-primary-hover": "$blue-550",
+  "button-border-primary-pressed": "$blue-600",
+  "button-border-secondary": "$cloud-900",
+  "button-border-secondary-hover": "$cloud-950",
+  "button-border-secondary-pressed": "$cloud-1000",
+  "button-border-tertiary": "$transparent",
+  "button-border-tertiary-hover": "$cloud-850",
+  "button-border-tertiary-pressed": "$cloud-900",
+  "button-icon-on-danger": "$white",
+  "button-icon-on-primary": "$white",
+  "button-icon-on-secondary": "$cloud-900",
+  "button-icon-on-tertiary": "$white",
+  "button-text-on-danger": "$white",
+  "button-text-on-primary": "$white",
+  "button-text-on-secondary": "$cloud-900",
+  "button-text-on-tertiary": "$white",
+  "chip-background": "$cloud-100",
+  "chip-background-hover": "$cloud-150",
+  "chip-text": "$cloud-900",
+  "format-icon-diagram": "$orange-600",
+  "format-icon-docs": "$cyan-600",
+  "format-icon-external": "$teal-600",
+  "format-icon-kanban": "$moss-600",
+  "format-icon-prototype": "$lilac-600",
+  "format-icon-slides": "$coral-600",
+  "format-icon-table": "$moss-600",
+  "format-icon-timeline": "$moss-600",
+  "input-background-active": "$cloud-100",
+  "input-background-alt-active": "$cloud-100",
+  "input-background-alt-default": "$cloud-100",
+  "input-background-alt-hover": "$cloud-100",
+  "input-background-default": "$cloud-100",
+  "input-background-disabled": "$cloud-150",
+  "input-background-hover": "$cloud-100",
+  "input-border-active": "$transparent",
+  "input-border-default": "$transparent",
+  "input-border-disabled": "$transparent",
+  "input-border-error": "$red-500",
+  "input-border-hover": "$transparent",
+  "input-border-selection-control": "$cloud-450",
+  "input-border-success": "$green-500",
+  "notification-background": "$cloud-850",
+  "notification-border": "$cloud-450",
+  "notification-border-subtle": "$cloud-750",
+  "popover-background": "$cloud-900",
+  "popover-border": "$cloud-500",
+  "scrollbar-background": "$cloud-300",
+  "scrollbar-background-hover": "$cloud-350",
+  "slider-background": "$cloud-300",
+  "slider-notch-background": "$cloud-300",
+  "switch-background-default": "$cloud-300",
+  "switch-background-hover": "$cloud-350",
+  "switch-control-background": "$white",
+  "tooltip-background": "$cloud-950",
+  "tooltip-background-inset": "$cloud-650",
+  "icon-danger": "$red-500",
+  "icon-danger-active": "$red-600",
+  "icon-danger-hover": "$red-550",
+  "icon-danger-inverted": "$red-50",
+  "icon-danger-pressed": "$red-600",
+  "icon-default": "$cloud-900",
+  "icon-disabled": "$cloud-300",
+  "icon-inverted": "$white",
+  "icon-inverted-secondary": "$cloud-300",
+  "icon-muted": "$cloud-400",
+  "icon-on-disabled": "$cloud-350",
+  "icon-on-static-dark": "$gray-50",
+  "icon-on-static-dark-subtle": "$gray-300",
+  "icon-placeholder": "$cloud-400",
+  "icon-secondary": "$cloud-700",
+  "icon-interactive-selected": "$blue-550",
+  "icon-link": "$blue-500",
+  "icon-link-hover": "$blue-550",
+  "icon-link-on-inverted": "$white",
+  "icon-link-on-inverted-hover": "$cloud-50",
+  "icon-link-on-inverted-pressed": "$cloud-100",
+  "icon-link-on-inverted-secondary": "$cloud-300",
+  "icon-link-on-inverted-secondary-hover": "$cloud-350",
+  "icon-link-on-inverted-secondary-pressed": "$cloud-400",
+  "icon-link-pressed": "$blue-600",
+  "icon-link-secondary": "$cloud-700",
+  "icon-link-secondary-hover": "$cloud-750",
+  "icon-link-secondary-pressed": "$cloud-800",
+  "icon-on-interactive-danger": "$white",
+  "icon-on-interactive-primary": "$white",
+  "icon-on-interactive-secondary": "$cloud-900",
+  "icon-on-interactive-selected": "$blue-550",
+  "icon-neutrals": "$cloud-900",
+  "icon-neutrals-disabled": "$cloud-300",
+  "icon-neutrals-hover": "$cloud-950",
+  "icon-neutrals-inactive": "$gray-450",
+  "icon-neutrals-inactive-hover": "$gray-500",
+  "icon-neutrals-inverted": "$cloud-100",
+  "icon-neutrals-inverted-hover": "$cloud-50",
+  "icon-neutrals-inverted-subtle": "$gray-100",
+  "icon-neutrals-inverted-subtle-hover": "$gray-150",
+  "icon-neutrals-placeholder": "$gray-350",
+  "icon-neutrals-pressed": "$cloud-950",
+  "icon-neutrals-search": "$gray-500",
+  "icon-neutrals-subtle": "$cloud-700",
+  "icon-neutrals-subtle-hover": "$cloud-750",
+  "icon-neutrals-subtle-pressed": "$cloud-750",
+  "icon-neutrals-text": "$gray-700",
+  "icon-primary": "$blue-500",
+  "icon-primary-active": "$blue-600",
+  "icon-primary-hover": "$blue-550",
+  "icon-primary-inverted": "$blue-50",
+  "icon-primary-inverted-hover": "$blue-100",
+  "icon-primary-pressed": "$blue-600",
+  "icon-primary-selected": "$blue-550",
+  "status-icon-error": "$red-500",
+  "status-icon-on-error": "$red-500",
+  "status-icon-on-info": "$blue-500",
+  "status-icon-on-success": "$green-500",
+  "status-icon-on-warning": "$yellow-600",
+  "status-icon-success": "$green-500",
+  "status-icon-warning": "$yellow-700",
+  "icon-success": "$green-600",
+  "icon-success-active": "$green-700",
+  "icon-success-hover": "$green-650",
+  "icon-success-inverted": "$green-50",
+  "icon-success-pressed": "$green-700",
+  "icon-warning": "$yellow-800",
+  "icon-warning-prominent": "$yellow-600",
+  "icon-warning-subtle": "$yellow-700",
+  "text-danger": "$red-500",
+  "text-danger-active": "$red-600",
+  "text-danger-hover": "$red-550",
+  "text-danger-inverted": "$red-50",
+  "text-danger-pressed": "$red-600",
+  "text-interactive-selected": "$blue-550",
+  "text-link": "$blue-500",
+  "text-link-hover": "$blue-550",
+  "text-link-on-inverted": "$white",
+  "text-link-on-inverted-hover": "$cloud-50",
+  "text-link-on-inverted-pressed": "$cloud-100",
+  "text-link-on-inverted-secondary": "$cloud-300",
+  "text-link-on-inverted-secondary-hover": "$cloud-350",
+  "text-link-on-inverted-secondary-pressed": "$cloud-400",
+  "text-link-pressed": "$blue-600",
+  "text-link-secondary": "$cloud-700",
+  "text-link-secondary-hover": "$cloud-750",
+  "text-link-secondary-pressed": "$cloud-800",
+  "text-on-interactive-danger": "$white",
+  "text-on-interactive-primary": "$white",
+  "text-on-interactive-secondary": "$cloud-900",
+  "text-on-interactive-selected": "$blue-550",
+  "text-neutrals": "$cloud-900",
+  "text-neutrals-active": "$cloud-950",
+  "text-neutrals-disabled": "$cloud-300",
+  "text-neutrals-hover": "$cloud-950",
+  "text-neutrals-inverted": "$cloud-100",
+  "text-neutrals-inverted-hover": "$cloud-50",
+  "text-neutrals-inverted-subtle": "$cloud-50",
+  "text-neutrals-inverted-subtle-hover": "$cloud-50",
+  "text-neutrals-placeholder": "$cloud-400",
+  "text-neutrals-placeholder-only": "$cloud-400",
+  "text-neutrals-pressed": "$cloud-950",
+  "text-neutrals-subtle": "$cloud-700",
+  "text-neutrals-subtle-active": "$cloud-750",
+  "text-neutrals-subtle-hover": "$cloud-750",
+  "text-neutrals-subtle-pressed": "$cloud-750",
+  "text-primary": "$blue-500",
+  "text-primary-active": "$blue-600",
+  "text-primary-hover": "$blue-550",
+  "text-primary-inverted": "$blue-50",
+  "text-primary-inverted-subtle": "$blue-100",
+  "text-primary-pressed": "$blue-600",
+  "text-primary-selected": "$blue-550",
+  "status-text-error": "$red-500",
+  "status-text-on-error": "$red-800",
+  "status-text-on-info": "$blue-800",
+  "status-text-on-success": "$green-800",
+  "status-text-on-warning": "$yellow-800",
+  "status-text-success": "$green-600",
+  "status-text-warning": "$yellow-800",
+  "text-success": "$green-600",
+  "text-success-active": "$green-700",
+  "text-success-hover": "$green-650",
+  "text-success-inverted": "$green-50",
+  "text-success-pressed": "$green-700",
+  "text-default": "$cloud-900",
+  "text-disabled": "$cloud-300",
+  "text-inverted": "$white",
+  "text-inverted-secondary": "$cloud-300",
+  "text-muted": "$cloud-400",
+  "text-on-disabled": "$cloud-350",
+  "text-on-static-dark": "$cloud-50",
+  "text-on-static-dark-subtle": "$cloud-300",
+  "text-placeholder": "$cloud-400",
+  "text-secondary": "$cloud-700",
+  "text-warning": "$yellow-800",
+  "text-warning-subtle": "$yellow-600",
+  "coal-background": "$coal-500",
+  "coal-background-mild": "$coal-350",
+  "coal-background-prominent": "$coal-700",
+  "coal-background-subtle": "$coal-200",
+  "coral-background": "$coral-500",
+  "coral-background-mild": "$coral-350",
+  "coral-background-prominent": "$coral-700",
+  "coral-background-subtle": "$coral-200",
+  "cyan-background": "$cyan-500",
+  "cyan-background-mild": "$cyan-350",
+  "cyan-background-prominent": "$cyan-700",
+  "cyan-background-subtle": "$cyan-200",
+  "lilac-background": "$lilac-500",
+  "lilac-background-mild": "$lilac-350",
+  "lilac-background-prominent": "$lilac-700",
+  "lilac-background-subtle": "$lilac-200",
+  "lime-background": "$lime-500",
+  "lime-background-mild": "$lime-350",
+  "lime-background-prominent": "$lime-700",
+  "lime-background-subtle": "$lime-200",
+  "moss-background": "$moss-500",
+  "moss-background-mild": "$moss-350",
+  "moss-background-prominent": "$moss-700",
+  "moss-background-subtle": "$moss-200",
+  "ocean-background": "$ocean-500",
+  "ocean-background-mild": "$ocean-350",
+  "ocean-background-prominent": "$ocean-700",
+  "ocean-background-subtle": "$ocean-200",
+  "orange-background": "$orange-500",
+  "orange-background-mild": "$orange-350",
+  "orange-background-prominent": "$orange-700",
+  "orange-background-subtle": "$orange-200",
+  "pink-background": "$pink-500",
+  "pink-background-mild": "$pink-350",
+  "pink-background-prominent": "$pink-700",
+  "pink-background-subtle": "$pink-200",
+  "sunshine-background": "$sunshine-500",
+  "sunshine-background-mild": "$sunshine-350",
+  "sunshine-background-prominent": "$sunshine-700",
+  "sunshine-background-subtle": "$sunshine-200",
+  "teal-background": "$teal-500",
+  "teal-background-mild": "$teal-350",
+  "teal-background-prominent": "$teal-700",
+  "teal-background-subtle": "$teal-200",
+  "coal-border": "$coal-600",
+  "coal-border-prominent": "$coal-800",
+  "coal-border-subtle": "$coal-450",
+  "coral-border": "$coral-600",
+  "coral-border-prominent": "$coral-800",
+  "coral-border-subtle": "$coral-450",
+  "cyan-border": "$cyan-600",
+  "cyan-border-prominent": "$cyan-800",
+  "cyan-border-subtle": "$cyan-450",
+  "lilac-border": "$lilac-600",
+  "lilac-border-prominent": "$lilac-800",
+  "lilac-border-subtle": "$lilac-450",
+  "lime-border": "$lime-650",
+  "lime-border-prominent": "$lime-800",
+  "lime-border-subtle": "$lime-450",
+  "moss-border": "$moss-600",
+  "moss-border-prominent": "$moss-800",
+  "moss-border-subtle": "$moss-450",
+  "ocean-border": "$ocean-600",
+  "ocean-border-prominent": "$ocean-800",
+  "ocean-border-subtle": "$ocean-450",
+  "orange-border": "$orange-600",
+  "orange-border-prominent": "$orange-800",
+  "orange-border-subtle": "$orange-450",
+  "pink-border": "$pink-600",
+  "pink-border-prominent": "$pink-800",
+  "pink-border-subtle": "$pink-450",
+  "sunshine-border": "$sunshine-650",
+  "sunshine-border-prominent": "$sunshine-750",
+  "sunshine-border-subtle": "$sunshine-450",
+  "teal-border": "$teal-600",
+  "teal-border-prominent": "$teal-800",
+  "teal-border-subtle": "$teal-450",
+  "coal-avatar-background": "$coal-750",
+  "coral-avatar-background": "$coral-750",
+  "cyan-avatar-background": "$cyan-750",
+  "light-coal-avatar-background": "$coal-450",
+  "light-coral-avatar-background": "$coral-450",
+  "light-cyan-avatar-background": "$cyan-450",
+  "light-lilac-avatar-background": "$lilac-450",
+  "light-lime-avatar-background": "$lime-450",
+  "light-moss-avatar-background": "$moss-450",
+  "light-ocean-avatar-background": "$ocean-450",
+  "light-orange-avatar-background": "$orange-450",
+  "light-pink-avatar-background": "$pink-450",
+  "light-sunshine-avatar-background": "$sunshine-450",
+  "light-teal-avatar-background": "$teal-450",
+  "lilac-avatar-background": "$lilac-750",
+  "lime-avatar-background": "$lime-750",
+  "moss-avatar-background": "$moss-750",
+  "ocean-avatar-background": "$ocean-750",
+  "orange-avatar-background": "$orange-750",
+  "pink-avatar-background": "$pink-750",
+  "sunshine-avatar-background": "$sunshine-750",
+  "teal-avatar-background": "$teal-750",
+  "coral-comment-background": "$coral-750",
+  "cyan-comment-background": "$cyan-650",
+  "lime-comment-background": "$lime-650",
+  "coal-cursor-background": "$coal-800",
+  "coal-cursor-border": "$coal-650",
+  "coal-cursor-border-prominent": "$coal-900",
+  "coral-cursor-background": "$coral-800",
+  "coral-cursor-border": "$coral-650",
+  "coral-cursor-border-prominent": "$coral-900",
+  "cyan-cursor-background": "$cyan-800",
+  "cyan-cursor-border": "$cyan-650",
+  "cyan-cursor-border-prominent": "$cyan-900",
+  "light-coal-cursor-background": "$coal-300",
+  "light-coral-cursor-background": "$coral-300",
+  "light-cursor-background": "$ocean-300",
+  "light-cyan-cursor-background": "$cyan-300",
+  "light-lilac-cursor-background": "$lilac-300",
+  "light-lime-cursor-background": "$lime-300",
+  "light-moss-cursor-background": "$moss-300",
+  "light-orange-cursor-background": "$orange-300",
+  "light-pink-cursor-background": "$pink-300",
+  "light-sunshine-cursor-background": "$sunshine-300",
+  "light-teal-cursor-background": "$teal-300",
+  "lilac-cursor-background": "$lilac-800",
+  "lilac-cursor-border": "$lilac-650",
+  "lilac-cursor-border-prominent": "$lilac-900",
+  "lime-cursor-background": "$lime-800",
+  "lime-cursor-border": "$lime-650",
+  "lime-cursor-border-prominent": "$lime-900",
+  "moss-cursor-background": "$moss-800",
+  "moss-cursor-border": "$moss-650",
+  "moss-cursor-border-prominent": "$moss-900",
+  "ocean-cursor-background": "$ocean-800",
+  "ocean-cursor-border": "$ocean-650",
+  "ocean-cursor-border-prominent": "$ocean-900",
+  "orange-cursor-background": "$orange-800",
+  "orange-cursor-border": "$orange-650",
+  "orange-cursor-border-prominent": "$orange-900",
+  "pink-cursor-background": "$pink-800",
+  "pink-cursor-border-prominent": "$pink-900",
+  "pink-cursor-coal-border": "$pink-650",
+  "sunshine-cursor-background": "$sunshine-800",
+  "sunshine-cursor-border": "$sunshine-650",
+  "susnhine-cursor-border-prominent": "$sunshine-900",
+  "teal-cursor-background": "$teal-800",
+  "teal-cursor-border": "$teal-650",
+  "teal-cursor-border-prominent": "$teal-900",
+  "black-sticky-background": "#151515",
+  "coral-sticky-background": "$coral-400",
+  "cyan-sticky-background": "$cyan-400",
+  "light-coal-sticky-background": "#F3F5F7",
+  "light-lime-sticky-background": "$lime-250",
+  "light-ocean-sticky-background": "$ocean-250",
+  "light-pink-sticky-background": "$pink-250",
+  "light-sunshine-sticky-background": "$sunshine-250",
+  "lilac-sticky-background": "$lilac-400",
+  "lime-sticky-background": "$lime-400",
+  "moss-sticky-background": "$moss-400",
+  "ocean-sticky-background": "$ocean-400",
+  "orange-sticky-background": "$orange-400",
+  "pink-sticky-background": "$pink-400",
+  "sunshine-sticky-background": "$sunshine-400",
+  "teal-sticky-background": "$teal-400",
+  "coal-icon": "$coal-900",
+  "coal-icon-mild": "$coal-600",
+  "coal-icon-subtle": "$coal-100",
+  "coral-icon": "$coral-900",
+  "coral-icon-mild": "$coral-600",
+  "coral-icon-subtle": "$coral-100",
+  "cyan-icon": "$cyan-900",
+  "cyan-icon-mild": "$cyan-600",
+  "cyan-icon-subtle": "$cyan-100",
+  "lilac-icon": "$lilac-900",
+  "lilac-icon-mild": "$lilac-600",
+  "lilac-icon-subtle": "$lilac-100",
+  "lime-icon": "$lime-900",
+  "lime-icon-mild": "$lime-650",
+  "lime-icon-subtle": "$lime-100",
+  "moss-icon": "$moss-900",
+  "moss-icon-mild": "$moss-600",
+  "moss-icon-subtle": "$moss-100",
+  "ocean-icon": "$ocean-900",
+  "ocean-icon-mild": "$ocean-600",
+  "ocean-icon-subtle": "$ocean-100",
+  "orange-icon": "$orange-900",
+  "orange-icon-mild": "$orange-600",
+  "orange-icon-subtle": "$orange-100",
+  "pink-icon": "$pink-900",
+  "pink-icon-mild": "$pink-600",
+  "pink-icon-subtle": "$pink-100",
+  "sunshine-icon": "$sunshine-900",
+  "sunshine-icon-mild": "$sunshine-650",
+  "sunshine-icon-subtle": "$sunshine-100",
+  "teal-icon": "$teal-900",
+  "teal-icon-mild": "$teal-600",
+  "teal-icon-subtle": "$teal-100",
+  "coal-text": "$coal-900",
+  "coal-text-mild": "$coal-700",
+  "coal-text-subtle": "$coal-100",
+  "coral-text": "$coral-900",
+  "coral-text-mild": "$coral-700",
+  "coral-text-subtle": "$coral-100",
+  "cyan-text": "$cyan-900",
+  "cyan-text-mild": "$cyan-700",
+  "cyan-text-subtle": "$cyan-100",
+  "lilac-text": "$lilac-900",
+  "lilac-text-mild": "$lilac-650",
+  "lilac-text-subtle": "$lilac-100",
+  "lime-text": "$lime-900",
+  "lime-text-mild": "$lime-700",
+  "lime-text-subtle": "$lime-100",
+  "moss-text": "$moss-900",
+  "moss-text-mild": "$moss-700",
+  "moss-text-subtle": "$moss-100",
+  "ocean-text": "$ocean-900",
+  "ocean-text-mild": "$ocean-700",
+  "ocean-text-subtle": "$ocean-100",
+  "orange-text": "$orange-900",
+  "orange-text-mild": "$orange-700",
+  "orange-text-subtle": "$orange-100",
+  "pink-text": "$pink-900",
+  "pink-text-mild": "$pink-650",
+  "pink-text-subtle": "$pink-100",
+  "sunshine-text": "$sunshine-900",
+  "sunshine-text-mild": "$sunshine-700",
+  "sunshine-text-subtle": "$sunshine-100",
+  "teal-text": "$teal-900",
+  "teal-text-mild": "$teal-700",
+  "teal-text-subtle": "$teal-100"
+};
+const colors = {
+  "background-alpha": "$alpha-black-100",
+  "background-alpha-active": "$alpha-black-50",
+  "background-alpha-hover": "$alpha-black-100",
+  "background-alpha-neutrals-overlay": "#12193E66",
+  "background-alpha-neutrals-overlay-subtle": "$alpha-black-200",
+  "background-alpha-subtle": "$alpha-black-50",
+  "background-canvas": "$cloud-1000",
+  "background-disabled": "$cloud-850",
+  "background-elevated": "$cloud-850",
+  "background-inverted": "$white",
+  "background-inverted-secondary": "$cloud-150",
+  "background-layout": "$gray-850",
+  "background-overlay": "$alpha-black-400",
+  "background-static-dark": "$gray-850",
+  "background-static-dark-subtle": "$cloud-750",
+  "background-static-light": "$white",
+  "background-surface": "$cloud-900",
+  "background-surface-secondary": "$cloud-800",
+  "background-transparent": "$transparent",
+  "background-danger-prominent": "$red-500",
+  "background-danger-prominent-active": "$red-400",
+  "background-danger-prominent-hover": "$red-450",
+  "background-danger-prominent-pressed": "$red-400",
+  "background-danger-subtle": "$red-900",
+  "background-danger-subtle-active": "$red-500",
+  "background-danger-subtle-hover": "$red-550",
+  "background-danger-subtle-pressed": "$red-500",
+  "background-interactive-danger": "$red-500",
+  "background-interactive-danger-hover": "$red-450",
+  "background-interactive-danger-pressed": "$red-400",
+  "background-interactive-primary": "$blue-500",
+  "background-interactive-primary-hover": "$blue-450",
+  "background-interactive-primary-pressed": "$blue-400",
+  "background-interactive-selected": "$blue-500",
+  "background-interactive-surface-hover": "$cloud-850",
+  "background-interactive-surface-secondary-hover": "$cloud-700",
+  "background-neutrals": "$cloud-900",
+  "background-neutrals-active": "$cloud-850",
+  "background-neutrals-container": "$gray-850",
+  "background-neutrals-control": "$gray-700",
+  "background-neutrals-control-hover": "$gray-650",
+  "background-neutrals-control-pressed": "$gray-600",
+  "background-neutrals-disabled": "$cloud-850",
+  "background-neutrals-hover": "$cloud-850",
+  "background-neutrals-inactive": "$gray-500",
+  "background-neutrals-inactive-hover": "$gray-600",
+  "background-neutrals-inverted": "$white",
+  "background-neutrals-inverted-subtle": "$cloud-150",
+  "background-neutrals-layout": "$gray-850",
+  "background-neutrals-page": "$gray-850",
+  "background-neutrals-page-subtle": "$cloud-800",
+  "background-neutrals-pressed": "$cloud-850",
+  "background-neutrals-scrollbar": "$gray-700",
+  "background-neutrals-scrollbar-active": "$gray-600",
+  "background-neutrals-scrollbar-hover": "$gray-650",
+  "background-neutrals-subtle": "$cloud-750",
+  "background-neutrals-subtle-active": "$cloud-700",
+  "background-neutrals-subtle-hover": "$cloud-700",
+  "background-neutrals-subtle-pressed": "$cloud-700",
+  "background-neutrals-transparent": "$transparent",
+  "background-primary-prominent": "$blue-500",
+  "background-primary-prominent-active": "$blue-450",
+  "background-primary-prominent-hover": "$blue-450",
+  "background-primary-prominent-pressed": "$blue-450",
+  "background-primary-prominent-selected": "$blue-500",
+  "background-primary-subtle": "$blue-900",
+  "background-primary-subtle-active": "$blue-600",
+  "background-primary-subtle-hover": "$blue-650",
+  "background-primary-subtle-pressed": "$blue-600",
+  "background-primary-subtle-selected": "$blue-700",
+  "status-background-error": "$red-900",
+  "status-background-info": "$blue-900",
+  "status-background-success": "$green-900",
+  "status-background-warning": "$yellow-900",
+  "background-success-prominent": "$green-500",
+  "background-success-prominent-active": "$green-400",
+  "background-success-prominent-hover": "$green-450",
+  "background-success-prominent-pressed": "$green-400",
+  "background-success-subtle": "$green-900",
+  "background-warning-prominent": "$yellow-400",
+  "background-warning-subtle": "$yellow-900",
+  "border-default": "$cloud-650",
+  "border-disabled": "$cloud-750",
+  "border-inverted": "$cloud-100",
+  "border-inverted-subtle": "$cloud-500",
+  "border-static-dark": "$cloud-450",
+  "border-static-dark-subtle": "$cloud-750",
+  "border-strong": "$cloud-450",
+  "border-subtle": "$cloud-550",
+  "border-transparent": "$transparent",
+  "border-danger": "$red-400",
+  "border-danger-active": "$red-300",
+  "border-danger-hover": "$red-350",
+  "border-danger-pressed": "$red-300",
+  "border-danger-subtle": "$red-700",
+  "border-focus-error-inner": "$gray-950",
+  "border-focus-error-middle": "$blue-350",
+  "border-focus-error-outer": "$blue-550",
+  "border-focus-inner": "#1A1B1E",
+  "border-focus-middle": "$blue-350",
+  "border-focus-outer": "$blue-550",
+  "border-focus-success-inner": "$gray-950",
+  "border-focus-success-middle": "$blue-350",
+  "border-focus-success-outer": "$blue-550",
+  "focus-keyboard": "#2B4DF8",
+  "border-interactive-danger": "$red-500",
+  "border-interactive-danger-hover": "$red-450",
+  "border-interactive-danger-pressed": "$red-400",
+  "border-interactive-primary": "$blue-500",
+  "border-interactive-primary-hover": "$blue-450",
+  "border-interactive-primary-pressed": "$blue-400",
+  "border-interactive-secondary": "$cloud-700",
+  "border-interactive-secondary-hover": "$cloud-650",
+  "border-interactive-secondary-pressed": "$cloud-600",
+  "border-interactive-selected": "$blue-400",
+  "border-neutrals": "$cloud-650",
+  "border-neutrals-active": "$cloud-350",
+  "border-neutrals-controls": "$cloud-450",
+  "border-neutrals-controls-disabled": "$cloud-800",
+  "border-neutrals-disabled": "$cloud-750",
+  "border-neutrals-hover": "$cloud-550",
+  "border-neutrals-inverted": "$cloud-950",
+  "border-neutrals-pressed": "$cloud-450",
+  "border-neutrals-subtle": "$cloud-800",
+  "border-neutrals-subtle-hover": "$cloud-700",
+  "border-neutrals-subtle-pressed": "$cloud-650",
+  "border-neutrals-text": "$cloud-100",
+  "border-neutrals-text-active": "$cloud-50",
+  "border-neutrals-text-hover": "$cloud-50",
+  "border-neutrals-text-subtle": "$cloud-300",
+  "border-neutrals-text-subtle-active": "$cloud-100",
+  "border-neutrals-text-subtle-hover": "$cloud-200",
+  "border-neutrals-transparent": "$transparent",
+  "border-primary": "$blue-400",
+  "border-primary-active": "$blue-300",
+  "border-primary-hover": "$blue-350",
+  "border-primary-inverted": "$blue-900",
+  "border-primary-pressed": "$blue-300",
+  "border-primary-selected": "$blue-400",
+  "border-primary-subtle": "$blue-750",
+  "status-border-error": "$red-700",
+  "status-border-info": "$blue-700",
+  "status-border-success": "$green-700",
+  "status-border-warning": "$yellow-700",
+  "border-success": "$green-500",
+  "border-success-active": "$green-400",
+  "border-success-hover": "$green-450",
+  "border-success-pressed": "$green-400",
+  "border-success-subtle": "$green-700",
+  "border-warning": "$yellow-500",
+  "border-warning-subtle": "$yellow-700",
+  "button-background-danger": "$red-500",
+  "button-background-danger-hover": "$red-450",
+  "button-background-danger-pressed": "$red-400",
+  "button-background-ghost": "$transparent",
+  "button-background-ghost-hover": "$cloud-150",
+  "button-background-ghost-pressed": "$cloud-100",
+  "button-background-primary": "$blue-500",
+  "button-background-primary-hover": "$blue-450",
+  "button-background-primary-pressed": "$blue-400",
+  "button-background-secondary": "$transparent",
+  "button-background-secondary-hover": "$cloud-800",
+  "button-background-secondary-pressed": "$cloud-750",
+  "button-background-tertiary": "$cloud-700",
+  "button-background-tertiary-hover": "$cloud-650",
+  "button-background-tertiary-pressed": "$cloud-600",
+  "button-border-danger": "$red-500",
+  "button-border-danger-hover": "$red-450",
+  "button-border-danger-pressed": "$red-400",
+  "button-border-ghost-hover": "$transparent",
+  "button-border-ghost-pressed": "$transparent",
+  "button-border-primary": "$blue-500",
+  "button-border-primary-hover": "$blue-450",
+  "button-border-primary-pressed": "$blue-400",
+  "button-border-secondary": "$cloud-700",
+  "button-border-secondary-hover": "$cloud-650",
+  "button-border-secondary-pressed": "$cloud-600",
+  "button-border-tertiary": "$transparent",
+  "button-border-tertiary-hover": "$cloud-650",
+  "button-border-tertiary-pressed": "$cloud-600",
+  "button-icon-on-danger": "$white",
+  "button-icon-on-primary": "$white",
+  "button-icon-on-secondary": "$white",
+  "button-icon-on-tertiary": "$white",
+  "button-text-on-danger": "$white",
+  "button-text-on-primary": "$white",
+  "button-text-on-secondary": "$white",
+  "button-text-on-tertiary": "$white",
+  "chip-background": "$cloud-750",
+  "chip-background-hover": "$cloud-700",
+  "chip-text": "$cloud-50",
+  "format-icon-diagram": "$orange-600",
+  "format-icon-docs": "$cyan-600",
+  "format-icon-external": "$teal-600",
+  "format-icon-kanban": "$moss-600",
+  "format-icon-prototype": "$lilac-600",
+  "format-icon-slides": "$coral-600",
+  "format-icon-table": "$moss-600",
+  "format-icon-timeline": "$moss-600",
+  "input-background-active": "$cloud-850",
+  "input-background-alt-active": "$cloud-950",
+  "input-background-alt-default": "$cloud-950",
+  "input-background-alt-hover": "$cloud-950",
+  "input-background-default": "$cloud-850",
+  "input-background-disabled": "$cloud-850",
+  "input-background-hover": "$cloud-850",
+  "input-border-active": "$transparent",
+  "input-border-default": "$transparent",
+  "input-border-disabled": "$transparent",
+  "input-border-error": "$red-400",
+  "input-border-hover": "$transparent",
+  "input-border-selection-control": "$cloud-450",
+  "input-border-success": "$green-400",
+  "notification-background": "$cloud-150",
+  "notification-border": "$cloud-450",
+  "notification-border-subtle": "$cloud-300",
+  "popover-background": "$cloud-800",
+  "popover-border": "$cloud-600",
+  "scrollbar-background": "$gray-700",
+  "scrollbar-background-hover": "$gray-650",
+  "slider-background": "$gray-700",
+  "slider-notch-background": "$gray-700",
+  "switch-background-default": "$gray-700",
+  "switch-background-hover": "$gray-650",
+  "switch-control-background": "$cloud-900",
+  "tooltip-background": "$cloud-650",
+  "tooltip-background-inset": "$cloud-850",
+  "icon-danger": "$red-400",
+  "icon-danger-active": "$red-300",
+  "icon-danger-hover": "$red-350",
+  "icon-danger-inverted": "$red-900",
+  "icon-danger-pressed": "$red-300",
+  "icon-default": "$cloud-50",
+  "icon-disabled": "$cloud-450",
+  "icon-inverted": "$cloud-900",
+  "icon-inverted-secondary": "$cloud-700",
+  "icon-muted": "$cloud-400",
+  "icon-on-disabled": "$cloud-400",
+  "icon-on-static-dark": "$gray-50",
+  "icon-on-static-dark-subtle": "$gray-300",
+  "icon-placeholder": "$cloud-400",
+  "icon-secondary": "$cloud-300",
+  "icon-interactive-selected": "$blue-400",
+  "icon-link": "$blue-500",
+  "icon-link-hover": "$blue-450",
+  "icon-link-on-inverted": "$cloud-900",
+  "icon-link-on-inverted-hover": "$cloud-850",
+  "icon-link-on-inverted-pressed": "$cloud-800",
+  "icon-link-on-inverted-secondary": "$cloud-700",
+  "icon-link-on-inverted-secondary-hover": "$cloud-650",
+  "icon-link-on-inverted-secondary-pressed": "$cloud-600",
+  "icon-link-pressed": "$blue-400",
+  "icon-link-secondary": "$cloud-300",
+  "icon-link-secondary-hover": "$cloud-250",
+  "icon-link-secondary-pressed": "$cloud-200",
+  "icon-on-interactive-danger": "$white",
+  "icon-on-interactive-primary": "$white",
+  "icon-on-interactive-secondary": "$white",
+  "icon-on-interactive-selected": "$blue-400",
+  "icon-neutrals": "$gray-50",
+  "icon-neutrals-disabled": "$gray-450",
+  "icon-neutrals-hover": "$gray-100",
+  "icon-neutrals-inactive": "$gray-400",
+  "icon-neutrals-inactive-hover": "$gray-300",
+  "icon-neutrals-inverted": "$gray-950",
+  "icon-neutrals-inverted-hover": "$cloud-900",
+  "icon-neutrals-inverted-subtle": "$gray-700",
+  "icon-neutrals-inverted-subtle-hover": "$gray-650",
+  "icon-neutrals-placeholder": "$gray-650",
+  "icon-neutrals-pressed": "$gray-150",
+  "icon-neutrals-search": "$gray-400",
+  "icon-neutrals-subtle": "$gray-300",
+  "icon-neutrals-subtle-hover": "$gray-250",
+  "icon-neutrals-subtle-pressed": "$gray-200",
+  "icon-neutrals-text": "$gray-300",
+  "icon-primary": "$blue-400",
+  "icon-primary-active": "$blue-300",
+  "icon-primary-hover": "$blue-350",
+  "icon-primary-inverted": "$blue-900",
+  "icon-primary-inverted-hover": "$blue-850",
+  "icon-primary-pressed": "$blue-300",
+  "icon-primary-selected": "$blue-400",
+  "status-icon-error": "$red-400",
+  "status-icon-on-error": "$red-400",
+  "status-icon-on-info": "$blue-400",
+  "status-icon-on-success": "$green-400",
+  "status-icon-on-warning": "$yellow-200",
+  "status-icon-success": "$green-400",
+  "status-icon-warning": "$yellow-200",
+  "icon-success": "$green-400",
+  "icon-success-active": "$green-300",
+  "icon-success-hover": "$green-350",
+  "icon-success-inverted": "$green-900",
+  "icon-success-pressed": "$green-300",
+  "icon-warning": "$yellow-200",
+  "icon-warning-prominent": "$yellow-300",
+  "icon-warning-subtle": "$yellow-200",
+  "text-danger": "$red-400",
+  "text-danger-active": "$red-300",
+  "text-danger-hover": "$red-350",
+  "text-danger-inverted": "$red-900",
+  "text-danger-pressed": "$red-300",
+  "text-interactive-selected": "$blue-400",
+  "text-link": "$blue-500",
+  "text-link-hover": "$blue-450",
+  "text-link-on-inverted": "$cloud-900",
+  "text-link-on-inverted-hover": "$cloud-850",
+  "text-link-on-inverted-pressed": "$cloud-800",
+  "text-link-on-inverted-secondary": "$cloud-700",
+  "text-link-on-inverted-secondary-hover": "$cloud-650",
+  "text-link-on-inverted-secondary-pressed": "$cloud-600",
+  "text-link-pressed": "$blue-400",
+  "text-link-secondary": "$cloud-300",
+  "text-link-secondary-hover": "$cloud-250",
+  "text-link-secondary-pressed": "$cloud-200",
+  "text-on-interactive-danger": "$white",
+  "text-on-interactive-primary": "$white",
+  "text-on-interactive-secondary": "$white",
+  "text-on-interactive-selected": "$blue-400",
+  "text-neutrals": "$cloud-100",
+  "text-neutrals-active": "$cloud-50",
+  "text-neutrals-disabled": "$cloud-400",
+  "text-neutrals-hover": "$cloud-50",
+  "text-neutrals-inverted": "$cloud-900",
+  "text-neutrals-inverted-hover": "$cloud-850",
+  "text-neutrals-inverted-subtle": "$cloud-700",
+  "text-neutrals-inverted-subtle-hover": "$cloud-650",
+  "text-neutrals-placeholder": "$cloud-500",
+  "text-neutrals-placeholder-only": "$cloud-500",
+  "text-neutrals-pressed": "$cloud-50",
+  "text-neutrals-subtle": "$cloud-300",
+  "text-neutrals-subtle-active": "$cloud-250",
+  "text-neutrals-subtle-hover": "$cloud-250",
+  "text-neutrals-subtle-pressed": "$cloud-250",
+  "text-primary": "$blue-400",
+  "text-primary-active": "$blue-300",
+  "text-primary-hover": "$blue-350",
+  "text-primary-inverted": "$blue-900",
+  "text-primary-inverted-subtle": "$blue-700",
+  "text-primary-pressed": "$blue-300",
+  "text-primary-selected": "$blue-400",
+  "status-text-error": "$red-400",
+  "status-text-on-error": "$red-200",
+  "status-text-on-info": "$blue-200",
+  "status-text-on-success": "$green-200",
+  "status-text-on-warning": "$yellow-200",
+  "status-text-success": "$green-400",
+  "status-text-warning": "$yellow-200",
+  "text-success": "$green-400",
+  "text-success-active": "$green-300",
+  "text-success-hover": "$green-350",
+  "text-success-inverted": "$green-900",
+  "text-success-pressed": "$green-300",
+  "text-default": "$cloud-50",
+  "text-disabled": "$cloud-450",
+  "text-inverted": "$cloud-900",
+  "text-inverted-secondary": "$cloud-700",
+  "text-muted": "$cloud-400",
+  "text-on-disabled": "$cloud-400",
+  "text-on-static-dark": "$cloud-50",
+  "text-on-static-dark-subtle": "$cloud-300",
+  "text-placeholder": "$cloud-400",
+  "text-secondary": "$cloud-300",
+  "text-warning": "$yellow-200",
+  "text-warning-subtle": "$yellow-300",
+  "coal-background": "$coal-500",
+  "coal-background-mild": "$coal-350",
+  "coal-background-prominent": "$coal-700",
+  "coal-background-subtle": "$coal-200",
+  "coral-background": "$coral-500",
+  "coral-background-mild": "$coral-350",
+  "coral-background-prominent": "$coral-700",
+  "coral-background-subtle": "$coral-200",
+  "cyan-background": "$cyan-500",
+  "cyan-background-mild": "$cyan-350",
+  "cyan-background-prominent": "$cyan-700",
+  "cyan-background-subtle": "$cyan-200",
+  "lilac-background": "$lilac-500",
+  "lilac-background-mild": "$lilac-350",
+  "lilac-background-prominent": "$lilac-700",
+  "lilac-background-subtle": "$lilac-200",
+  "lime-background": "$lime-500",
+  "lime-background-mild": "$lime-350",
+  "lime-background-prominent": "$lime-700",
+  "lime-background-subtle": "$lime-200",
+  "moss-background": "$moss-500",
+  "moss-background-mild": "$moss-350",
+  "moss-background-prominent": "$moss-700",
+  "moss-background-subtle": "$moss-200",
+  "ocean-background": "$ocean-500",
+  "ocean-background-mild": "$ocean-350",
+  "ocean-background-prominent": "$ocean-700",
+  "ocean-background-subtle": "$ocean-200",
+  "orange-background": "$orange-500",
+  "orange-background-mild": "$orange-350",
+  "orange-background-prominent": "$orange-700",
+  "orange-background-subtle": "$orange-200",
+  "pink-background": "$pink-500",
+  "pink-background-mild": "$pink-350",
+  "pink-background-prominent": "$pink-700",
+  "pink-background-subtle": "$pink-200",
+  "sunshine-background": "$sunshine-500",
+  "sunshine-background-mild": "$sunshine-350",
+  "sunshine-background-prominent": "$sunshine-700",
+  "sunshine-background-subtle": "$sunshine-200",
+  "teal-background": "$teal-500",
+  "teal-background-mild": "$teal-350",
+  "teal-background-prominent": "$teal-700",
+  "teal-background-subtle": "$teal-200",
+  "coal-border": "$coal-600",
+  "coal-border-prominent": "$coal-800",
+  "coal-border-subtle": "$coal-450",
+  "coral-border": "$coral-600",
+  "coral-border-prominent": "$coral-800",
+  "coral-border-subtle": "$coral-450",
+  "cyan-border": "$cyan-600",
+  "cyan-border-prominent": "$cyan-800",
+  "cyan-border-subtle": "$cyan-450",
+  "lilac-border": "$lilac-600",
+  "lilac-border-prominent": "$lilac-800",
+  "lilac-border-subtle": "$lilac-450",
+  "lime-border": "$lime-650",
+  "lime-border-prominent": "$lime-800",
+  "lime-border-subtle": "$lime-450",
+  "moss-border": "$moss-600",
+  "moss-border-prominent": "$moss-800",
+  "moss-border-subtle": "$moss-450",
+  "ocean-border": "$ocean-600",
+  "ocean-border-prominent": "$ocean-800",
+  "ocean-border-subtle": "$ocean-450",
+  "orange-border": "$orange-600",
+  "orange-border-prominent": "$orange-800",
+  "orange-border-subtle": "$orange-450",
+  "pink-border": "$pink-600",
+  "pink-border-prominent": "$pink-800",
+  "pink-border-subtle": "$pink-450",
+  "sunshine-border": "$sunshine-650",
+  "sunshine-border-prominent": "$sunshine-750",
+  "sunshine-border-subtle": "$sunshine-450",
+  "teal-border": "$teal-600",
+  "teal-border-prominent": "$teal-800",
+  "teal-border-subtle": "$teal-450",
+  "coal-avatar-background": "$coal-750",
+  "coral-avatar-background": "$coral-750",
+  "cyan-avatar-background": "$cyan-750",
+  "light-coal-avatar-background": "$coal-450",
+  "light-coral-avatar-background": "$coral-450",
+  "light-cyan-avatar-background": "$cyan-450",
+  "light-lilac-avatar-background": "$lilac-450",
+  "light-lime-avatar-background": "$lime-450",
+  "light-moss-avatar-background": "$moss-450",
+  "light-ocean-avatar-background": "$ocean-450",
+  "light-orange-avatar-background": "$orange-450",
+  "light-pink-avatar-background": "$pink-450",
+  "light-sunshine-avatar-background": "$sunshine-450",
+  "light-teal-avatar-background": "$teal-450",
+  "lilac-avatar-background": "$lilac-750",
+  "lime-avatar-background": "$lime-750",
+  "moss-avatar-background": "$moss-750",
+  "ocean-avatar-background": "$ocean-750",
+  "orange-avatar-background": "$orange-750",
+  "pink-avatar-background": "$pink-750",
+  "sunshine-avatar-background": "$sunshine-750",
+  "teal-avatar-background": "$teal-750",
+  "coral-comment-background": "$coral-750",
+  "cyan-comment-background": "$cyan-650",
+  "lime-comment-background": "$lime-650",
+  "coal-cursor-background": "$coal-800",
+  "coal-cursor-border": "$coal-650",
+  "coal-cursor-border-prominent": "$coal-900",
+  "coral-cursor-background": "$coral-800",
+  "coral-cursor-border": "$coral-650",
+  "coral-cursor-border-prominent": "$coral-900",
+  "cyan-cursor-background": "$cyan-800",
+  "cyan-cursor-border": "$cyan-650",
+  "cyan-cursor-border-prominent": "$cyan-900",
+  "light-coal-cursor-background": "$coal-300",
+  "light-coral-cursor-background": "$coral-300",
+  "light-cursor-background": "$ocean-300",
+  "light-cyan-cursor-background": "$cyan-300",
+  "light-lilac-cursor-background": "$lilac-300",
+  "light-lime-cursor-background": "$lime-300",
+  "light-moss-cursor-background": "$moss-300",
+  "light-orange-cursor-background": "$orange-300",
+  "light-pink-cursor-background": "$pink-300",
+  "light-sunshine-cursor-background": "$sunshine-300",
+  "light-teal-cursor-background": "$teal-300",
+  "lilac-cursor-background": "$lilac-800",
+  "lilac-cursor-border": "$lilac-650",
+  "lilac-cursor-border-prominent": "$lilac-900",
+  "lime-cursor-background": "$lime-800",
+  "lime-cursor-border": "$lime-650",
+  "lime-cursor-border-prominent": "$lime-900",
+  "moss-cursor-background": "$moss-800",
+  "moss-cursor-border": "$moss-650",
+  "moss-cursor-border-prominent": "$moss-900",
+  "ocean-cursor-background": "$ocean-800",
+  "ocean-cursor-border": "$ocean-650",
+  "ocean-cursor-border-prominent": "$ocean-900",
+  "orange-cursor-background": "$orange-800",
+  "orange-cursor-border": "$orange-650",
+  "orange-cursor-border-prominent": "$orange-900",
+  "pink-cursor-background": "$pink-800",
+  "pink-cursor-border-prominent": "$pink-900",
+  "pink-cursor-coal-border": "$pink-650",
+  "sunshine-cursor-background": "$sunshine-800",
+  "sunshine-cursor-border": "$sunshine-650",
+  "susnhine-cursor-border-prominent": "$sunshine-900",
+  "teal-cursor-background": "$teal-800",
+  "teal-cursor-border": "$teal-650",
+  "teal-cursor-border-prominent": "$teal-900",
+  "black-sticky-background": "#151515",
+  "coral-sticky-background": "$coral-400",
+  "cyan-sticky-background": "$cyan-400",
+  "light-coal-sticky-background": "#F3F5F7",
+  "light-lime-sticky-background": "$lime-250",
+  "light-ocean-sticky-background": "$ocean-250",
+  "light-pink-sticky-background": "$pink-250",
+  "light-sunshine-sticky-background": "$sunshine-250",
+  "lilac-sticky-background": "$lilac-400",
+  "lime-sticky-background": "$lime-400",
+  "moss-sticky-background": "$moss-400",
+  "ocean-sticky-background": "$ocean-400",
+  "orange-sticky-background": "$orange-400",
+  "pink-sticky-background": "$pink-400",
+  "sunshine-sticky-background": "$sunshine-400",
+  "teal-sticky-background": "$teal-400",
+  "coal-icon": "$coal-900",
+  "coal-icon-mild": "$coal-600",
+  "coal-icon-subtle": "$coal-100",
+  "coral-icon": "$coral-900",
+  "coral-icon-mild": "$coral-600",
+  "coral-icon-subtle": "$coral-100",
+  "cyan-icon": "$cyan-900",
+  "cyan-icon-mild": "$cyan-600",
+  "cyan-icon-subtle": "$cyan-100",
+  "lilac-icon": "$lilac-900",
+  "lilac-icon-mild": "$lilac-600",
+  "lilac-icon-subtle": "$lilac-100",
+  "lime-icon": "$lime-900",
+  "lime-icon-mild": "$lime-650",
+  "lime-icon-subtle": "$lime-100",
+  "moss-icon": "$moss-900",
+  "moss-icon-mild": "$moss-600",
+  "moss-icon-subtle": "$moss-100",
+  "ocean-icon": "$ocean-900",
+  "ocean-icon-mild": "$ocean-600",
+  "ocean-icon-subtle": "$ocean-100",
+  "orange-icon": "$orange-900",
+  "orange-icon-mild": "$orange-600",
+  "orange-icon-subtle": "$orange-100",
+  "pink-icon": "$pink-900",
+  "pink-icon-mild": "$pink-600",
+  "pink-icon-subtle": "$pink-100",
+  "sunshine-icon": "$sunshine-900",
+  "sunshine-icon-mild": "$sunshine-650",
+  "sunshine-icon-subtle": "$sunshine-100",
+  "teal-icon": "$teal-900",
+  "teal-icon-mild": "$teal-600",
+  "teal-icon-subtle": "$teal-100",
+  "coal-text": "$coal-900",
+  "coal-text-mild": "$coal-700",
+  "coal-text-subtle": "$coal-100",
+  "coral-text": "$coral-900",
+  "coral-text-mild": "$coral-700",
+  "coral-text-subtle": "$coral-100",
+  "cyan-text": "$cyan-900",
+  "cyan-text-mild": "$cyan-700",
+  "cyan-text-subtle": "$cyan-100",
+  "lilac-text": "$lilac-900",
+  "lilac-text-mild": "$lilac-650",
+  "lilac-text-subtle": "$lilac-100",
+  "lime-text": "$lime-900",
+  "lime-text-mild": "$lime-700",
+  "lime-text-subtle": "$lime-100",
+  "moss-text": "$moss-900",
+  "moss-text-mild": "$moss-700",
+  "moss-text-subtle": "$moss-100",
+  "ocean-text": "$ocean-900",
+  "ocean-text-mild": "$ocean-700",
+  "ocean-text-subtle": "$ocean-100",
+  "orange-text": "$orange-900",
+  "orange-text-mild": "$orange-700",
+  "orange-text-subtle": "$orange-100",
+  "pink-text": "$pink-900",
+  "pink-text-mild": "$pink-650",
+  "pink-text-subtle": "$pink-100",
+  "sunshine-text": "$sunshine-900",
+  "sunshine-text-mild": "$sunshine-700",
+  "sunshine-text-subtle": "$sunshine-100",
+  "teal-text": "$teal-900",
+  "teal-text-mild": "$teal-700",
+  "teal-text-subtle": "$teal-100"
+};
+const aliasShadows = {
+  focus: "0 0 0 2px $colors$border-focus-inner, 0 0 0 4px $colors$focus-keyboard",
+  "elevation-0": "0 0 0 1px $colors$gray-200",
+  "elevation-100": "0 2px 4px 0px #22242814",
+  "elevation-200": "0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A"
+};
+const shadows$1 = {
+  50: "0 4px 16px rgba(5, 0, 56, 0.07)",
+  100: "0 8px 32px rgba(5, 0, 56, 0.03)",
+  ...aliasShadows
+};
+const shadows = {
+  50: "0 0 8px 0 rgba(9,9,9,.65)",
+  100: "0 0 16px 0 rgba(9,9,9,.65)",
+  ...aliasShadows
+};
+const light = Object.freeze({
+  colors: colors$3,
+  shadows: shadows$1
+});
+const dark = Object.freeze({
+  colors: colors$2,
+  shadows: shadows
+});
+const newLight = Object.freeze({
+  colors: colors$1,
+  shadows: shadows$1
+});
+const newDark = Object.freeze({
   colors: colors,
   shadows: shadows
 });
@@ -897,4 +2425,6 @@ const base = light;
 exports.base = base;
 exports.dark = dark;
 exports.light = light;
+exports.newDark = newDark;
+exports.newLight = newLight;
 //# sourceMappingURL=main.js.map