@mirohq/design-system-themes 1.3.7 → 1.3.9

package/dist/main.js

@@ -14,6 +14,7 @@ const colors$3 = {
   "background-inverted-secondary": "$gray-800",
   "background-layout": "$white",
   "background-overlay": "$alpha-black-400",
+  "background-space": "$gray-50",
   "background-static-dark": "$gray-850",
   "background-static-dark-subtle": "$gray-750",
   "background-static-light": "$white",
@@ -91,6 +92,7 @@ const colors$3 = {
   "border-option-hover": "$blue-550",
   "border-static-dark": "$gray-450",
   "border-static-dark-subtle": "$gray-750",
+  "border-static-light": "$white",
   "border-strong": "$gray-400",
   "border-subtle": "$gray-150",
   "border-transparent": "$transparent",
@@ -155,6 +157,8 @@ const colors$3 = {
   "border-success-subtle": "$green-250",
   "border-warning": "$yellow-500",
   "border-warning-subtle": "$yellow-300",
+  "badge-border": "$white",
+  "badge-border-inverted": "$blue-500",
   "button-background-danger": "$red-500",
   "button-background-danger-hover": "$red-550",
   "button-background-danger-pressed": "$red-600",
@@ -193,6 +197,7 @@ const colors$3 = {
   "button-text-on-secondary": "$gray-900",
   "button-text-on-tertiary": "$blue-500",
   "chip-background": "$gray-100",
+  "chip-background-disabled": "$gray-100",
   "chip-background-hover": "$gray-150",
   "chip-text": "$gray-900",
   "format-icon-diagram": "$orange-600",
@@ -227,7 +232,7 @@ const colors$3 = {
   "slider-control-background": "$white",
   "slider-notch-background": "$gray-300",
   "switch-background-default": "$gray-450",
-  "switch-background-hover": "$gray-500",
+  "switch-background-hover": "$gray-350",
   "switch-control-background": "$white",
   "tooltip-background": "$gray-950",
   "tooltip-background-inset": "$gray-650",
@@ -244,6 +249,8 @@ const colors$3 = {
   "icon-on-disabled": "$gray-350",
   "icon-on-static-dark": "$gray-50",
   "icon-on-static-dark-subtle": "$gray-300",
+  "icon-on-static-light": "$gray-900",
+  "icon-on-static-light-subtle": "$gray-500",
   "icon-placeholder": "$gray-475",
   "icon-secondary": "$gray-500",
   "icon-interactive-on-inverted": "$white",
@@ -365,6 +372,8 @@ const colors$3 = {
   "text-on-disabled": "$gray-350",
   "text-on-static-dark": "$gray-50",
   "text-on-static-dark-subtle": "$gray-300",
+  "text-on-static-light": "$gray-900",
+  "text-on-static-light-subtle": "$gray-500",
   "text-placeholder": "$gray-475",
   "text-secondary": "$gray-500",
   "text-warning": "$yellow-800",
@@ -613,6 +622,7 @@ const colors$2 = {
   "background-inverted-secondary": "$gray-150",
   "background-layout": "$gray-850",
   "background-overlay": "$alpha-black-400",
+  "background-space": "$gray-950",
   "background-static-dark": "$gray-850",
   "background-static-dark-subtle": "$gray-750",
   "background-static-light": "$white",
@@ -625,8 +635,8 @@ const colors$2 = {
   "background-danger-prominent-pressed": "$red-400",
   "background-danger-subtle": "$red-900",
   "background-danger-subtle-active": "$red-900",
-  "background-danger-subtle-hover": "$red-800",
-  "background-danger-subtle-pressed": "$red-750",
+  "background-danger-subtle-hover": "$red-900",
+  "background-danger-subtle-pressed": "$red-800",
   "background-interactive-danger": "$red-500",
   "background-interactive-danger-hover": "$red-450",
   "background-interactive-danger-pressed": "$red-400",
@@ -690,6 +700,7 @@ const colors$2 = {
   "border-option-hover": "$blue-450",
   "border-static-dark": "$gray-450",
   "border-static-dark-subtle": "$gray-750",
+  "border-static-light": "$white",
   "border-strong": "$gray-500",
   "border-subtle": "$gray-800",
   "border-transparent": "$transparent",
@@ -754,6 +765,8 @@ const colors$2 = {
   "border-success-subtle": "$green-700",
   "border-warning": "$yellow-500",
   "border-warning-subtle": "$yellow-700",
+  "badge-border": "$gray-850",
+  "badge-border-inverted": "#FFFFFF",
   "button-background-danger": "$red-500",
   "button-background-danger-hover": "$red-450",
   "button-background-danger-pressed": "$red-450",
@@ -767,8 +780,8 @@ const colors$2 = {
   "button-background-secondary-hover": "$gray-700",
   "button-background-secondary-pressed": "$gray-700",
   "button-background-tertiary": "$transparent",
-  "button-background-tertiary-hover": "$blue-650",
-  "button-background-tertiary-pressed": "$blue-600",
+  "button-background-tertiary-hover": "$blue-900",
+  "button-background-tertiary-pressed": "$blue-800",
   "button-border-danger": "$red-500",
   "button-border-danger-hover": "$red-450",
   "button-border-danger-pressed": "$red-400",
@@ -792,6 +805,7 @@ const colors$2 = {
   "button-text-on-secondary": "$gray-50",
   "button-text-on-tertiary": "$blue-400",
   "chip-background": "$gray-750",
+  "chip-background-disabled": "$gray-750",
   "chip-background-hover": "$gray-700",
   "chip-text": "$gray-50",
   "format-icon-diagram": "$orange-600",
@@ -815,7 +829,7 @@ const colors$2 = {
   "input-border-focused": "$blue-350",
   "input-border-hover": "$blue-350",
   "input-border-success": "$green-400",
-  "notification-background": "$gray-150",
+  "notification-background": "$gray-50",
   "notification-border": "$gray-450",
   "notification-border-subtle": "$gray-300",
   "popover-background": "$gray-800",
@@ -843,6 +857,8 @@ const colors$2 = {
   "icon-on-disabled": "$gray-450",
   "icon-on-static-dark": "$gray-50",
   "icon-on-static-dark-subtle": "$gray-300",
+  "icon-on-static-light": "$gray-900",
+  "icon-on-static-light-subtle": "$gray-500",
   "icon-placeholder": "$gray-450",
   "icon-secondary": "$gray-300",
   "icon-interactive-on-inverted": "$gray-900",
@@ -964,6 +980,8 @@ const colors$2 = {
   "text-on-disabled": "$gray-450",
   "text-on-static-dark": "$gray-50",
   "text-on-static-dark-subtle": "$gray-300",
+  "text-on-static-light": "$gray-900",
+  "text-on-static-light-subtle": "$gray-500",
   "text-placeholder": "$gray-450",
   "text-secondary": "$gray-300",
   "text-warning": "$yellow-200",
@@ -1205,13 +1223,14 @@ const colors$1 = {
   "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-canvas": "$gray-50",
+  "background-disabled": "$cloud-150",
   "background-elevated": "$white",
   "background-inverted": "$cloud-950",
   "background-inverted-secondary": "$cloud-800",
   "background-layout": "$white",
   "background-overlay": "$alpha-black-400",
+  "background-space": "$cloud-50",
   "background-static-dark": "$cloud-850",
   "background-static-dark-subtle": "$cloud-750",
   "background-static-light": "$white",
@@ -1289,6 +1308,7 @@ const colors$1 = {
   "border-option-hover": "$blue-550",
   "border-static-dark": "$cloud-450",
   "border-static-dark-subtle": "$cloud-750",
+  "border-static-light": "$white",
   "border-strong": "$cloud-300",
   "border-subtle": "$cloud-100",
   "border-transparent": "$transparent",
@@ -1353,6 +1373,8 @@ const colors$1 = {
   "border-success-subtle": "$green-250",
   "border-warning": "$yellow-500",
   "border-warning-subtle": "$yellow-300",
+  "badge-border": "$white",
+  "badge-border-inverted": "$blue-500",
   "button-background-danger": "$red-500",
   "button-background-danger-hover": "$red-550",
   "button-background-danger-pressed": "$red-600",
@@ -1362,9 +1384,9 @@ const colors$1 = {
   "button-background-primary": "$cloud-800",
   "button-background-primary-hover": "$cloud-900",
   "button-background-primary-pressed": "$cloud-950",
-  "button-background-secondary": "$transparent",
-  "button-background-secondary-hover": "$cloud-150",
-  "button-background-secondary-pressed": "$cloud-200",
+  "button-background-secondary": "$cloud-150",
+  "button-background-secondary-hover": "$cloud-200",
+  "button-background-secondary-pressed": "$cloud-250",
   "button-background-tertiary": "$transparent",
   "button-background-tertiary-hover": "$cloud-150",
   "button-background-tertiary-pressed": "$cloud-200",
@@ -1376,12 +1398,12 @@ const colors$1 = {
   "button-border-primary": "$blue-500",
   "button-border-primary-hover": "$blue-550",
   "button-border-primary-pressed": "$blue-600",
-  "button-border-secondary": "$cloud-700",
-  "button-border-secondary-hover": "$cloud-650",
-  "button-border-secondary-pressed": "$cloud-650",
-  "button-border-tertiary": "$cloud-200",
-  "button-border-tertiary-hover": "$cloud-300",
-  "button-border-tertiary-pressed": "$cloud-350",
+  "button-border-secondary": "$transparent",
+  "button-border-secondary-hover": "$transparent",
+  "button-border-secondary-pressed": "$transparent",
+  "button-border-tertiary": "$cloud-500",
+  "button-border-tertiary-hover": "$cloud-550",
+  "button-border-tertiary-pressed": "$cloud-600",
   "button-icon-on-danger": "$white",
   "button-icon-on-primary": "$white",
   "button-icon-on-secondary": "$cloud-900",
@@ -1390,8 +1412,9 @@ const colors$1 = {
   "button-text-on-primary": "$white",
   "button-text-on-secondary": "$cloud-900",
   "button-text-on-tertiary": "$cloud-900",
-  "chip-background": "$cloud-100",
-  "chip-background-hover": "$cloud-150",
+  "chip-background": "$cloud-150",
+  "chip-background-disabled": "$cloud-50",
+  "chip-background-hover": "$cloud-200",
   "chip-text": "$cloud-900",
   "format-icon-diagram": "$orange-600",
   "format-icon-docs": "$cyan-600",
@@ -1401,18 +1424,18 @@ const colors$1 = {
   "format-icon-slides": "$coral-600",
   "format-icon-table": "$moss-600",
   "format-icon-timeline": "$moss-600",
-  "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-alt-active": "$cloud-200",
+  "input-background-alt-default": "$cloud-150",
+  "input-background-alt-hover": "$cloud-200",
+  "input-background-default": "$white",
   "input-background-disabled": "$cloud-150",
-  "input-background-focused": "$cloud-100",
-  "input-background-hover": "$cloud-100",
-  "input-border-default": "$transparent",
+  "input-background-focused": "$white",
+  "input-background-hover": "$white",
+  "input-border-default": "$cloud-425",
   "input-border-disabled": "$transparent",
   "input-border-error": "$red-500",
-  "input-border-focused": "$transparent",
-  "input-border-hover": "$transparent",
+  "input-border-focused": "$blue-550",
+  "input-border-hover": "$cloud-450",
   "input-border-success": "$green-500",
   "notification-background": "$cloud-850",
   "notification-border": "$cloud-450",
@@ -1424,8 +1447,8 @@ const colors$1 = {
   "slider-background": "$cloud-300",
   "slider-control-background": "$white",
   "slider-notch-background": "$cloud-300",
-  "switch-background-default": "$cloud-300",
-  "switch-background-hover": "$cloud-350",
+  "switch-background-default": "$cloud-425",
+  "switch-background-hover": "$cloud-450",
   "switch-control-background": "$white",
   "tooltip-background": "$cloud-950",
   "tooltip-background-inset": "$cloud-650",
@@ -1435,13 +1458,15 @@ const colors$1 = {
   "icon-danger-inverted": "$red-50",
   "icon-danger-pressed": "$red-600",
   "icon-default": "$cloud-900",
-  "icon-disabled": "$cloud-300",
+  "icon-disabled": "$cloud-450",
   "icon-inverted": "$white",
   "icon-inverted-secondary": "$cloud-300",
   "icon-muted": "$cloud-400",
-  "icon-on-disabled": "$cloud-350",
+  "icon-on-disabled": "$cloud-450",
   "icon-on-static-dark": "$gray-50",
   "icon-on-static-dark-subtle": "$gray-300",
+  "icon-on-static-light": "$cloud-900",
+  "icon-on-static-light-subtle": "$cloud-700",
   "icon-placeholder": "$cloud-400",
   "icon-secondary": "$cloud-700",
   "icon-interactive-on-inverted": "$white",
@@ -1556,14 +1581,16 @@ const colors$1 = {
   "text-success-inverted": "$green-50",
   "text-success-pressed": "$green-700",
   "text-default": "$cloud-900",
-  "text-disabled": "$cloud-300",
+  "text-disabled": "$cloud-450",
   "text-inverted": "$white",
   "text-inverted-secondary": "$cloud-300",
   "text-muted": "$cloud-400",
-  "text-on-disabled": "$cloud-350",
+  "text-on-disabled": "$cloud-450",
   "text-on-static-dark": "$cloud-50",
   "text-on-static-dark-subtle": "$cloud-300",
-  "text-placeholder": "$cloud-400",
+  "text-on-static-light": "$cloud-900",
+  "text-on-static-light-subtle": "$cloud-700",
+  "text-placeholder": "$cloud-475",
   "text-secondary": "$cloud-700",
   "text-warning": "$yellow-800",
   "text-warning-subtle": "$yellow-600",
@@ -1804,18 +1831,19 @@ const colors = {
   "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-canvas": "$gray-900",
+  "background-disabled": "$ink-650",
+  "background-elevated": "$ink-850",
   "background-inverted": "$white",
-  "background-inverted-secondary": "$cloud-150",
-  "background-layout": "$gray-850",
+  "background-inverted-secondary": "$ink-100",
+  "background-layout": "$ink-850",
   "background-overlay": "$alpha-black-400",
-  "background-static-dark": "$gray-850",
-  "background-static-dark-subtle": "$cloud-750",
+  "background-space": "$ink-900",
+  "background-static-dark": "$ink-850",
+  "background-static-dark-subtle": "$ink-750",
   "background-static-light": "$white",
-  "background-surface": "$cloud-900",
-  "background-surface-secondary": "$cloud-800",
+  "background-surface": "$ink-850",
+  "background-surface-secondary": "$ink-750",
   "background-transparent": "$transparent",
   "background-danger-prominent": "$red-500",
   "background-danger-prominent-active": "$red-400",
@@ -1833,31 +1861,31 @@ const colors = {
   "background-interactive-primary-pressed": "$blue-400",
   "background-interactive-secondary-selected": "$blue-700",
   "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-interactive-surface-hover": "$ink-750",
+  "background-interactive-surface-secondary-hover": "$ink-650",
+  "background-neutrals": "$ink-850",
+  "background-neutrals-active": "$ink-800",
+  "background-neutrals-container": "$ink-850",
+  "background-neutrals-control": "$ink-700",
+  "background-neutrals-control-hover": "$ink-650",
+  "background-neutrals-control-pressed": "$ink-600",
+  "background-neutrals-disabled": "$ink-850",
+  "background-neutrals-hover": "$ink-800",
+  "background-neutrals-inactive": "$ink-500",
+  "background-neutrals-inactive-hover": "$ink-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-inverted-subtle": "$ink-150",
+  "background-neutrals-layout": "$ink-850",
+  "background-neutrals-page": "$ink-850",
+  "background-neutrals-page-subtle": "$ink-800",
+  "background-neutrals-pressed": "$ink-800",
+  "background-neutrals-scrollbar": "$ink-700",
+  "background-neutrals-scrollbar-active": "$ink-600",
+  "background-neutrals-scrollbar-hover": "$ink-650",
+  "background-neutrals-subtle": "$ink-750",
+  "background-neutrals-subtle-active": "$ink-700",
+  "background-neutrals-subtle-hover": "$ink-700",
+  "background-neutrals-subtle-pressed": "$ink-700",
   "background-neutrals-transparent": "$transparent",
   "background-primary-prominent": "$blue-500",
   "background-primary-prominent-active": "$blue-450",
@@ -1880,16 +1908,17 @@ const colors = {
   "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-option": "$cloud-450",
+  "border-default": "$ink-650",
+  "border-disabled": "$ink-750",
+  "border-inverted": "$ink-100",
+  "border-inverted-subtle": "$ink-500",
+  "border-option": "$ink-450",
   "border-option-hover": "$blue-450",
-  "border-static-dark": "$cloud-450",
-  "border-static-dark-subtle": "$cloud-750",
-  "border-strong": "$cloud-450",
-  "border-subtle": "$cloud-550",
+  "border-static-dark": "$ink-450",
+  "border-static-dark-subtle": "$ink-750",
+  "border-static-light": "$white",
+  "border-strong": "$ink-450",
+  "border-subtle": "$ink-750",
   "border-transparent": "$transparent",
   "border-danger": "$red-400",
   "border-danger-active": "$red-300",
@@ -1912,27 +1941,27 @@ const colors = {
   "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-secondary": "$ink-700",
+  "border-interactive-secondary-hover": "$ink-650",
+  "border-interactive-secondary-pressed": "$ink-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": "$ink-650",
+  "border-neutrals-active": "$ink-350",
+  "border-neutrals-controls": "$ink-450",
+  "border-neutrals-controls-disabled": "$ink-800",
+  "border-neutrals-disabled": "$ink-750",
+  "border-neutrals-hover": "$ink-550",
+  "border-neutrals-inverted": "$ink-900",
+  "border-neutrals-pressed": "$ink-450",
+  "border-neutrals-subtle": "$ink-800",
+  "border-neutrals-subtle-hover": "$ink-700",
+  "border-neutrals-subtle-pressed": "$ink-650",
+  "border-neutrals-text": "$ink-100",
+  "border-neutrals-text-active": "$ink-50",
+  "border-neutrals-text-hover": "$ink-50",
+  "border-neutrals-text-subtle": "$ink-300",
+  "border-neutrals-text-subtle-active": "$ink-100",
+  "border-neutrals-text-subtle-hover": "$ink-200",
   "border-neutrals-transparent": "$transparent",
   "border-primary": "$blue-400",
   "border-primary-active": "$blue-300",
@@ -1952,21 +1981,23 @@ const colors = {
   "border-success-subtle": "$green-700",
   "border-warning": "$yellow-500",
   "border-warning-subtle": "$yellow-700",
+  "badge-border": "$ink-850",
+  "badge-border-inverted": "#FFFFFF",
   "button-background-danger": "$red-500",
   "button-background-danger-hover": "$red-450",
   "button-background-danger-pressed": "$red-450",
   "button-background-ghost": "$transparent",
-  "button-background-ghost-hover": "$cloud-750",
-  "button-background-ghost-pressed": "$cloud-700",
+  "button-background-ghost-hover": "$ink-750",
+  "button-background-ghost-pressed": "$ink-700",
   "button-background-primary": "$white",
-  "button-background-primary-hover": "$cloud-100",
-  "button-background-primary-pressed": "$cloud-150",
-  "button-background-secondary": "$transparent",
-  "button-background-secondary-hover": "$cloud-750",
-  "button-background-secondary-pressed": "$cloud-700",
+  "button-background-primary-hover": "$ink-100",
+  "button-background-primary-pressed": "$ink-150",
+  "button-background-secondary": "$ink-700",
+  "button-background-secondary-hover": "$ink-650",
+  "button-background-secondary-pressed": "$ink-600",
   "button-background-tertiary": "$transparent",
-  "button-background-tertiary-hover": "$cloud-750",
-  "button-background-tertiary-pressed": "$cloud-700",
+  "button-background-tertiary-hover": "$ink-750",
+  "button-background-tertiary-pressed": "$ink-700",
   "button-border-danger": "$red-500",
   "button-border-danger-hover": "$red-450",
   "button-border-danger-pressed": "$red-400",
@@ -1975,23 +2006,24 @@ const colors = {
   "button-border-primary": "$blue-500",
   "button-border-primary-hover": "$blue-450",
   "button-border-primary-pressed": "$blue-400",
-  "button-border-secondary": "$cloud-100",
-  "button-border-secondary-hover": "$cloud-50",
-  "button-border-secondary-pressed": "$cloud-50",
-  "button-border-tertiary": "$cloud-700",
-  "button-border-tertiary-hover": "$cloud-650",
-  "button-border-tertiary-pressed": "$cloud-600",
+  "button-border-secondary": "$transparent",
+  "button-border-secondary-hover": "$transparent",
+  "button-border-secondary-pressed": "$transparent",
+  "button-border-tertiary": "$ink-600",
+  "button-border-tertiary-hover": "$ink-550",
+  "button-border-tertiary-pressed": "$ink-500",
   "button-icon-on-danger": "$white",
-  "button-icon-on-primary": "$cloud-900",
+  "button-icon-on-primary": "$ink-900",
   "button-icon-on-secondary": "$white",
   "button-icon-on-tertiary": "$white",
   "button-text-on-danger": "$white",
-  "button-text-on-primary": "$cloud-900",
+  "button-text-on-primary": "$ink-900",
   "button-text-on-secondary": "$white",
   "button-text-on-tertiary": "$white",
-  "chip-background": "$cloud-750",
-  "chip-background-hover": "$cloud-700",
-  "chip-text": "$cloud-50",
+  "chip-background": "$ink-750",
+  "chip-background-disabled": "$ink-650",
+  "chip-background-hover": "$ink-700",
+  "chip-text": "$ink-50",
   "format-icon-diagram": "$orange-600",
   "format-icon-docs": "$cyan-600",
   "format-icon-external": "$teal-600",
@@ -2000,82 +2032,84 @@ const colors = {
   "format-icon-slides": "$coral-600",
   "format-icon-table": "$moss-600",
   "format-icon-timeline": "$moss-600",
-  "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-focused": "$cloud-850",
-  "input-background-hover": "$cloud-850",
-  "input-border-default": "$transparent",
+  "input-background-alt-active": "$ink-650",
+  "input-background-alt-default": "$ink-700",
+  "input-background-alt-hover": "$ink-650",
+  "input-background-default": "$ink-850",
+  "input-background-disabled": "$ink-750",
+  "input-background-focused": "$ink-800",
+  "input-background-hover": "$ink-800",
+  "input-border-default": "$ink-500",
   "input-border-disabled": "$transparent",
   "input-border-error": "$red-400",
-  "input-border-focused": "$transparent",
-  "input-border-hover": "$transparent",
+  "input-border-focused": "$blue-450",
+  "input-border-hover": "$ink-450",
   "input-border-success": "$green-400",
-  "notification-background": "$cloud-150",
-  "notification-border": "$cloud-450",
-  "notification-border-subtle": "$cloud-300",
+  "notification-background": "$ink-50",
+  "notification-border": "$ink-500",
+  "notification-border-subtle": "$ink-200",
   "popover-background": "$cloud-800",
   "popover-border": "$cloud-600",
-  "scrollbar-background": "$gray-700",
-  "scrollbar-background-hover": "$gray-650",
-  "slider-background": "$gray-700",
-  "slider-control-background": "$cloud-900",
-  "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",
+  "scrollbar-background": "$ink-700",
+  "scrollbar-background-hover": "$ink-650",
+  "slider-background": "$ink-700",
+  "slider-control-background": "$ink-900",
+  "slider-notch-background": "$ink-700",
+  "switch-background-default": "$ink-500",
+  "switch-background-hover": "$ink-475",
+  "switch-control-background": "$ink-700",
+  "tooltip-background": "$ink-650",
+  "tooltip-background-inset": "$ink-800",
   "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-on-inverted": "$cloud-900",
-  "icon-interactive-on-inverted-hover": "$cloud-850",
-  "icon-interactive-on-inverted-pressed": "$cloud-800",
-  "icon-interactive-on-inverted-secondary": "$cloud-700",
-  "icon-interactive-on-inverted-secondary-hover": "$cloud-650",
-  "icon-interactive-on-inverted-secondary-pressed": "$cloud-600",
+  "icon-default": "$ink-50",
+  "icon-disabled": "$ink-450",
+  "icon-inverted": "$ink-900",
+  "icon-inverted-secondary": "$ink-700",
+  "icon-muted": "$ink-400",
+  "icon-on-disabled": "$ink-450",
+  "icon-on-static-dark": "$ink-50",
+  "icon-on-static-dark-subtle": "$ink-300",
+  "icon-on-static-light": "$ink-900",
+  "icon-on-static-light-subtle": "$ink-700",
+  "icon-placeholder": "$ink-400",
+  "icon-secondary": "$ink-300",
+  "icon-interactive-on-inverted": "$ink-900",
+  "icon-interactive-on-inverted-hover": "$ink-850",
+  "icon-interactive-on-inverted-pressed": "$ink-800",
+  "icon-interactive-on-inverted-secondary": "$ink-700",
+  "icon-interactive-on-inverted-secondary-hover": "$ink-650",
+  "icon-interactive-on-inverted-secondary-pressed": "$ink-600",
   "icon-interactive-primary": "$blue-500",
   "icon-interactive-primary-hover": "$blue-450",
   "icon-interactive-primary-pressed": "$blue-400",
-  "icon-interactive-secondary": "$cloud-300",
-  "icon-interactive-secondary-hover": "$cloud-250",
-  "icon-interactive-secondary-pressed": "$cloud-200",
+  "icon-interactive-secondary": "$ink-300",
+  "icon-interactive-secondary-hover": "$ink-250",
+  "icon-interactive-secondary-pressed": "$ink-200",
   "icon-interactive-selected": "$blue-400",
   "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-neutrals": "$ink-50",
+  "icon-neutrals-disabled": "$ink-450",
+  "icon-neutrals-hover": "$ink-100",
+  "icon-neutrals-inactive": "$ink-400",
+  "icon-neutrals-inactive-hover": "$ink-300",
+  "icon-neutrals-inverted": "$ink-900",
+  "icon-neutrals-inverted-hover": "$ink-850",
+  "icon-neutrals-inverted-subtle": "$ink-800",
+  "icon-neutrals-inverted-subtle-hover": "$ink-650",
+  "icon-neutrals-placeholder": "$ink-650",
+  "icon-neutrals-pressed": "$ink-150",
+  "icon-neutrals-search": "$ink-400",
+  "icon-neutrals-subtle": "$ink-300",
+  "icon-neutrals-subtle-hover": "$ink-250",
+  "icon-neutrals-subtle-pressed": "$ink-200",
+  "icon-neutrals-text": "$ink-300",
   "icon-primary": "$blue-400",
   "icon-primary-active": "$blue-300",
   "icon-primary-hover": "$blue-350",
@@ -2103,38 +2137,38 @@ const colors = {
   "text-danger-hover": "$red-350",
   "text-danger-inverted": "$red-900",
   "text-danger-pressed": "$red-300",
-  "text-interactive-on-inverted": "$cloud-900",
-  "text-interactive-on-inverted-hover": "$cloud-850",
-  "text-interactive-on-inverted-pressed": "$cloud-800",
-  "text-interactive-on-inverted-secondary": "$cloud-700",
-  "text-interactive-on-inverted-secondary-hover": "$cloud-650",
-  "text-interactive-on-inverted-secondary-pressed": "$cloud-600",
+  "text-interactive-on-inverted": "$ink-900",
+  "text-interactive-on-inverted-hover": "$ink-850",
+  "text-interactive-on-inverted-pressed": "$ink-800",
+  "text-interactive-on-inverted-secondary": "$ink-750",
+  "text-interactive-on-inverted-secondary-hover": "$ink-650",
+  "text-interactive-on-inverted-secondary-pressed": "$ink-600",
   "text-interactive-primary": "$blue-500",
   "text-interactive-primary-hover": "$blue-450",
   "text-interactive-primary-pressed": "$blue-400",
-  "text-interactive-secondary": "$cloud-300",
-  "text-interactive-secondary-hover": "$cloud-250",
-  "text-interactive-secondary-pressed": "$cloud-200",
+  "text-interactive-secondary": "$ink-300",
+  "text-interactive-secondary-hover": "$ink-250",
+  "text-interactive-secondary-pressed": "$ink-200",
   "text-interactive-selected": "$blue-400",
   "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-neutrals": "$ink-100",
+  "text-neutrals-active": "$ink-50",
+  "text-neutrals-disabled": "$ink-400",
+  "text-neutrals-hover": "$ink-50",
+  "text-neutrals-inverted": "$ink-900",
+  "text-neutrals-inverted-hover": "$ink-850",
+  "text-neutrals-inverted-subtle": "$ink-700",
+  "text-neutrals-inverted-subtle-hover": "$ink-650",
+  "text-neutrals-placeholder": "$ink-500",
+  "text-neutrals-placeholder-only": "$ink-500",
+  "text-neutrals-pressed": "$ink-50",
+  "text-neutrals-subtle": "$ink-300",
+  "text-neutrals-subtle-active": "$ink-250",
+  "text-neutrals-subtle-hover": "$ink-250",
+  "text-neutrals-subtle-pressed": "$ink-250",
   "text-primary": "$blue-400",
   "text-primary-active": "$blue-300",
   "text-primary-hover": "$blue-350",
@@ -2154,16 +2188,18 @@ const colors = {
   "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-default": "$ink-50",
+  "text-disabled": "$ink-450",
+  "text-inverted": "$ink-900",
+  "text-inverted-secondary": "$ink-700",
+  "text-muted": "$ink-400",
+  "text-on-disabled": "$ink-450",
+  "text-on-static-dark": "$ink-50",
+  "text-on-static-dark-subtle": "$ink-300",
+  "text-on-static-light": "$ink-900",
+  "text-on-static-light-subtle": "$ink-700",
+  "text-placeholder": "$ink-450",
+  "text-secondary": "$ink-300",
   "text-warning": "$yellow-200",
   "text-warning-subtle": "$yellow-300",
   "coal-background": "$coal-500",
@@ -2403,6 +2439,18 @@ const aliasShadows = {
   "elevation-200": "0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A"
 };
 
+const shadows$3 = {
+  50: "0 4px 16px rgba(5, 0, 56, 0.07)",
+  100: "0 8px 32px rgba(5, 0, 56, 0.03)",
+  ...aliasShadows
+};
+
+const shadows$2 = {
+  50: "0 0 8px 0 rgba(9,9,9,.65)",
+  100: "0 0 16px 0 rgba(9,9,9,.65)",
+  ...aliasShadows
+};
+
 const shadows$1 = {
   50: "0 4px 16px rgba(5, 0, 56, 0.07)",
   100: "0 8px 32px rgba(5, 0, 56, 0.03)",
@@ -2415,21 +2463,93 @@ const shadows = {
   ...aliasShadows
 };
 
+const radii$3 = {
+  panel: "$150",
+  notification: "$100",
+  "avatar-people": "$round",
+  "avatar-team": "$50",
+  "avatar-group": "$50",
+  dropdown: "$100",
+  toolbar: "$100",
+  "toolbar-item": "$50",
+  input: "$50",
+  button: "$50",
+  popup: "$100",
+  tooltip: "$100",
+  checkbox: "$50",
+  "list-item": "$50"
+};
+
+const radii$2 = {
+  panel: "$150",
+  notification: "$100",
+  "avatar-people": "$round",
+  "avatar-team": "$50",
+  "avatar-group": "$50",
+  dropdown: "$100",
+  toolbar: "$100",
+  "toolbar-item": "$50",
+  input: "$50",
+  button: "$50",
+  popup: "$100",
+  tooltip: "$100",
+  checkbox: "$50",
+  "list-item": "$50"
+};
+
+const radii$1 = {
+  panel: "$150",
+  notification: "$100",
+  "avatar-people": "$round",
+  "avatar-team": "$50",
+  "avatar-group": "$50",
+  dropdown: "$250",
+  toolbar: "$200",
+  "toolbar-item": "$150",
+  input: "$150",
+  button: "$100",
+  popup: "$100",
+  tooltip: "$100",
+  checkbox: "$75",
+  "list-item": "$150"
+};
+
+const radii = {
+  panel: "$150",
+  notification: "$100",
+  "avatar-people": "$round",
+  "avatar-team": "$50",
+  "avatar-group": "$50",
+  dropdown: "$250",
+  toolbar: "$200",
+  "toolbar-item": "$150",
+  input: "$150",
+  button: "$100",
+  popup: "$100",
+  tooltip: "$100",
+  checkbox: "$75",
+  "list-item": "$150"
+};
+
 const light = Object.freeze({
   colors: colors$3,
-  shadows: shadows$1
+  shadows: shadows$3,
+  radii: radii$3
 });
 const dark = Object.freeze({
   colors: colors$2,
-  shadows: shadows
+  shadows: shadows$2,
+  radii: radii$2
 });
 const newLight = Object.freeze({
   colors: colors$1,
-  shadows: shadows$1
+  shadows: shadows$1,
+  radii: radii$1
 });
 const newDark = Object.freeze({
   colors: colors,
-  shadows: shadows
+  shadows: shadows,
+  radii: radii
 });
 
 const base = light;