@mirohq/design-system-themes 1.4.9 → 1.4.11

package/base.css

@@ -174,7 +174,19 @@
   --colors-button-background-danger-pressed: var(--colors-red-600);
   --colors-button-background-ghost: var(--colors-transparent);
   --colors-button-background-ghost-hover: var(--colors-gray-150);
+  --colors-button-background-ghost-inverse-hover: var(--colors-gray-800);
+  --colors-button-background-ghost-inverse-pressed: var(--colors-gray-750);
   --colors-button-background-ghost-pressed: var(--colors-gray-200);
+  --colors-button-background-info: var(--colors-blue-500);
+  --colors-button-background-info-hover: var(--colors-blue-550);
+  --colors-button-background-info-pressed: var(--colors-blue-600);
+  --colors-button-background-inverse: var(--colors-blue-500);
+  --colors-button-background-inverse-disabled: var(--colors-gray-850);
+  --colors-button-background-inverse-hover: var(--colors-blue-550);
+  --colors-button-background-inverse-pressed: var(--colors-blue-600);
+  --colors-button-background-inverse-secondary: var(--colors-gray-750);
+  --colors-button-background-inverse-secondary-hover: var(--colors-gray-700);
+  --colors-button-background-inverse-secondary-pressed: var(--colors-gray-700);
   --colors-button-background-primary: var(--colors-blue-500);
   --colors-button-background-primary-hover: var(--colors-blue-550);
   --colors-button-background-primary-pressed: var(--colors-blue-600);
@@ -184,11 +196,17 @@
   --colors-button-background-tertiary: var(--colors-transparent);
   --colors-button-background-tertiary-hover: var(--colors-blue-150);
   --colors-button-background-tertiary-pressed: var(--colors-blue-200);
+  --colors-button-background-warning: var(--colors-yellow-700);
+  --colors-button-background-warning-hover: var(--colors-yellow-750);
+  --colors-button-background-warning-pressed: var(--colors-yellow-800);
   --colors-button-border-danger: var(--colors-red-500);
   --colors-button-border-danger-hover: var(--colors-red-550);
   --colors-button-border-danger-pressed: var(--colors-red-600);
   --colors-button-border-ghost-hover: var(--colors-transparent);
   --colors-button-border-ghost-pressed: var(--colors-transparent);
+  --colors-button-border-inverse-secondary: var(--colors-gray-750);
+  --colors-button-border-inverse-secondary-hover: var(--colors-gray-700);
+  --colors-button-border-inverse-secondary-pressed: var(--colors-gray-650);
   --colors-button-border-primary: var(--colors-blue-500);
   --colors-button-border-primary-hover: var(--colors-blue-550);
   --colors-button-border-primary-pressed: var(--colors-blue-600);
@@ -199,10 +217,16 @@
   --colors-button-border-tertiary-hover: var(--colors-blue-550);
   --colors-button-border-tertiary-pressed: var(--colors-blue-600);
   --colors-button-icon-on-danger: var(--colors-white);
+  --colors-button-icon-on-inverse: var(--colors-white);
+  --colors-button-icon-on-inverse-disabled: var(--colors-gray-450);
+  --colors-button-icon-on-inverse-secondary: var(--colors-gray-50);
   --colors-button-icon-on-primary: var(--colors-white);
   --colors-button-icon-on-secondary: var(--colors-gray-900);
   --colors-button-icon-on-tertiary: var(--colors-blue-500);
   --colors-button-text-on-danger: var(--colors-white);
+  --colors-button-text-on-inverse: var(--colors-white);
+  --colors-button-text-on-inverse-disabled: var(--colors-gray-450);
+  --colors-button-text-on-inverse-secondary: var(--colors-gray-50);
   --colors-button-text-on-primary: var(--colors-white);
   --colors-button-text-on-secondary: var(--colors-gray-900);
   --colors-button-text-on-tertiary: var(--colors-blue-500);
@@ -265,6 +289,7 @@
   --colors-toolbar-item-background-selected: var(--colors-blue-150);
   --colors-tooltip-background: var(--colors-gray-950);
   --colors-tooltip-background-inset: var(--colors-gray-650);
+  --colors-tooltip-background-inverse: var(--colors-gray-650);
   --colors-icon-danger: var(--colors-red-500);
   --colors-icon-danger-active: var(--colors-red-600);
   --colors-icon-danger-hover: var(--colors-red-550);
@@ -276,6 +301,7 @@
   --colors-icon-inverted-secondary: var(--colors-gray-150);
   --colors-icon-muted: var(--colors-gray-400);
   --colors-icon-on-disabled: var(--colors-gray-350);
+  --colors-icon-on-disabled-inverse: var(--colors-gray-450);
   --colors-icon-on-static-dark: var(--colors-gray-50);
   --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
   --colors-icon-on-static-light: var(--colors-gray-900);
@@ -290,6 +316,7 @@
   --colors-icon-interactive-on-inverted-secondary-pressed: var(
     --colors-gray-250
   );
+  --colors-icon-interactive-on-inverted-selected: var(--colors-blue-400);
   --colors-icon-interactive-primary: var(--colors-blue-500);
   --colors-icon-interactive-primary-hover: var(--colors-blue-550);
   --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
@@ -403,6 +430,7 @@
   --colors-text-inverted-secondary: var(--colors-gray-150);
   --colors-text-muted: var(--colors-gray-400);
   --colors-text-on-disabled: var(--colors-gray-350);
+  --colors-text-on-inverse-disabled: var(--colors-gray-450);
   --colors-text-on-static-dark: var(--colors-gray-50);
   --colors-text-on-static-dark-subtle: var(--colors-gray-300);
   --colors-text-on-static-light: var(--colors-gray-900);

package/base.json

@@ -165,7 +165,19 @@
     "buttonBackgroundDangerPressed": "{colors.red600}",
     "buttonBackgroundGhost": "{colors.transparent}",
     "buttonBackgroundGhostHover": "{colors.gray150}",
+    "buttonBackgroundGhostInverseHover": "{colors.gray800}",
+    "buttonBackgroundGhostInversePressed": "{colors.gray750}",
     "buttonBackgroundGhostPressed": "{colors.gray200}",
+    "buttonBackgroundInfo": "{colors.blue500}",
+    "buttonBackgroundInfoHover": "{colors.blue550}",
+    "buttonBackgroundInfoPressed": "{colors.blue600}",
+    "buttonBackgroundInverse": "{colors.blue500}",
+    "buttonBackgroundInverseDisabled": "{colors.gray850}",
+    "buttonBackgroundInverseHover": "{colors.blue550}",
+    "buttonBackgroundInversePressed": "{colors.blue600}",
+    "buttonBackgroundInverseSecondary": "{colors.gray750}",
+    "buttonBackgroundInverseSecondaryHover": "{colors.gray700}",
+    "buttonBackgroundInverseSecondaryPressed": "{colors.gray700}",
     "buttonBackgroundPrimary": "{colors.blue500}",
     "buttonBackgroundPrimaryHover": "{colors.blue550}",
     "buttonBackgroundPrimaryPressed": "{colors.blue600}",
@@ -175,11 +187,17 @@
     "buttonBackgroundTertiary": "{colors.transparent}",
     "buttonBackgroundTertiaryHover": "{colors.blue150}",
     "buttonBackgroundTertiaryPressed": "{colors.blue200}",
+    "buttonBackgroundWarning": "{colors.yellow700}",
+    "buttonBackgroundWarningHover": "{colors.yellow750}",
+    "buttonBackgroundWarningPressed": "{colors.yellow800}",
     "buttonBorderDanger": "{colors.red500}",
     "buttonBorderDangerHover": "{colors.red550}",
     "buttonBorderDangerPressed": "{colors.red600}",
     "buttonBorderGhostHover": "{colors.transparent}",
     "buttonBorderGhostPressed": "{colors.transparent}",
+    "buttonBorderInverseSecondary": "{colors.gray750}",
+    "buttonBorderInverseSecondaryHover": "{colors.gray700}",
+    "buttonBorderInverseSecondaryPressed": "{colors.gray650}",
     "buttonBorderPrimary": "{colors.blue500}",
     "buttonBorderPrimaryHover": "{colors.blue550}",
     "buttonBorderPrimaryPressed": "{colors.blue600}",
@@ -190,10 +208,16 @@
     "buttonBorderTertiaryHover": "{colors.blue550}",
     "buttonBorderTertiaryPressed": "{colors.blue600}",
     "buttonIconOnDanger": "{colors.white}",
+    "buttonIconOnInverse": "{colors.white}",
+    "buttonIconOnInverseDisabled": "{colors.gray450}",
+    "buttonIconOnInverseSecondary": "{colors.gray50}",
     "buttonIconOnPrimary": "{colors.white}",
     "buttonIconOnSecondary": "{colors.gray900}",
     "buttonIconOnTertiary": "{colors.blue500}",
     "buttonTextOnDanger": "{colors.white}",
+    "buttonTextOnInverse": "{colors.white}",
+    "buttonTextOnInverseDisabled": "{colors.gray450}",
+    "buttonTextOnInverseSecondary": "{colors.gray50}",
     "buttonTextOnPrimary": "{colors.white}",
     "buttonTextOnSecondary": "{colors.gray900}",
     "buttonTextOnTertiary": "{colors.blue500}",
@@ -256,6 +280,7 @@
     "toolbarItemBackgroundSelected": "{colors.blue150}",
     "tooltipBackground": "{colors.gray950}",
     "tooltipBackgroundInset": "{colors.gray650}",
+    "tooltipBackgroundInverse": "{colors.gray650}",
     "iconDanger": "{colors.red500}",
     "iconDangerActive": "{colors.red600}",
     "iconDangerHover": "{colors.red550}",
@@ -267,6 +292,7 @@
     "iconInvertedSecondary": "{colors.gray150}",
     "iconMuted": "{colors.gray400}",
     "iconOnDisabled": "{colors.gray350}",
+    "iconOnDisabledInverse": "{colors.gray450}",
     "iconOnStaticDark": "{colors.gray50}",
     "iconOnStaticDarkSubtle": "{colors.gray300}",
     "iconOnStaticLight": "{colors.gray900}",
@@ -279,6 +305,7 @@
     "iconInteractiveOnInvertedSecondary": "{colors.gray150}",
     "iconInteractiveOnInvertedSecondaryHover": "{colors.gray200}",
     "iconInteractiveOnInvertedSecondaryPressed": "{colors.gray250}",
+    "iconInteractiveOnInvertedSelected": "{colors.blue400}",
     "iconInteractivePrimary": "{colors.blue500}",
     "iconInteractivePrimaryHover": "{colors.blue550}",
     "iconInteractivePrimaryPressed": "{colors.blue600}",
@@ -390,6 +417,7 @@
     "textInvertedSecondary": "{colors.gray150}",
     "textMuted": "{colors.gray400}",
     "textOnDisabled": "{colors.gray350}",
+    "textOnInverseDisabled": "{colors.gray450}",
     "textOnStaticDark": "{colors.gray50}",
     "textOnStaticDarkSubtle": "{colors.gray300}",
     "textOnStaticLight": "{colors.gray900}",

package/dark.css

@@ -174,7 +174,19 @@
   --colors-button-background-danger-pressed: var(--colors-red-450);
   --colors-button-background-ghost: var(--colors-transparent);
   --colors-button-background-ghost-hover: var(--colors-gray-800);
+  --colors-button-background-ghost-inverse-hover: var(--colors-gray-150);
+  --colors-button-background-ghost-inverse-pressed: var(--colors-gray-200);
   --colors-button-background-ghost-pressed: var(--colors-gray-750);
+  --colors-button-background-info: var(--colors-blue-500);
+  --colors-button-background-info-hover: var(--colors-blue-550);
+  --colors-button-background-info-pressed: var(--colors-blue-600);
+  --colors-button-background-inverse: var(--colors-blue-500);
+  --colors-button-background-inverse-disabled: var(--colors-gray-150);
+  --colors-button-background-inverse-hover: var(--colors-blue-450);
+  --colors-button-background-inverse-pressed: var(--colors-blue-400);
+  --colors-button-background-inverse-secondary: var(--colors-gray-150);
+  --colors-button-background-inverse-secondary-hover: var(--colors-gray-200);
+  --colors-button-background-inverse-secondary-pressed: var(--colors-gray-250);
   --colors-button-background-primary: var(--colors-blue-500);
   --colors-button-background-primary-hover: var(--colors-blue-450);
   --colors-button-background-primary-pressed: var(--colors-blue-400);
@@ -184,11 +196,17 @@
   --colors-button-background-tertiary: var(--colors-transparent);
   --colors-button-background-tertiary-hover: var(--colors-blue-900);
   --colors-button-background-tertiary-pressed: var(--colors-blue-800);
+  --colors-button-background-warning: var(--colors-yellow-700);
+  --colors-button-background-warning-hover: var(--colors-yellow-750);
+  --colors-button-background-warning-pressed: var(--colors-yellow-800);
   --colors-button-border-danger: var(--colors-red-500);
   --colors-button-border-danger-hover: var(--colors-red-450);
   --colors-button-border-danger-pressed: var(--colors-red-400);
   --colors-button-border-ghost-hover: var(--colors-transparent);
   --colors-button-border-ghost-pressed: var(--colors-transparent);
+  --colors-button-border-inverse-secondary: var(--colors-gray-150);
+  --colors-button-border-inverse-secondary-hover: var(--colors-gray-200);
+  --colors-button-border-inverse-secondary-pressed: var(--colors-gray-250);
   --colors-button-border-primary: var(--colors-blue-500);
   --colors-button-border-primary-hover: var(--colors-blue-450);
   --colors-button-border-primary-pressed: var(--colors-blue-400);
@@ -199,10 +217,16 @@
   --colors-button-border-tertiary-hover: var(--colors-blue-450);
   --colors-button-border-tertiary-pressed: var(--colors-blue-400);
   --colors-button-icon-on-danger: var(--colors-white);
+  --colors-button-icon-on-inverse: var(--colors-white);
+  --colors-button-icon-on-inverse-disabled: var(--colors-gray-350);
+  --colors-button-icon-on-inverse-secondary: var(--colors-gray-900);
   --colors-button-icon-on-primary: var(--colors-white);
   --colors-button-icon-on-secondary: var(--colors-gray-50);
   --colors-button-icon-on-tertiary: var(--colors-blue-400);
   --colors-button-text-on-danger: var(--colors-white);
+  --colors-button-text-on-inverse: var(--colors-white);
+  --colors-button-text-on-inverse-disabled: var(--colors-gray-350);
+  --colors-button-text-on-inverse-secondary: var(--colors-gray-900);
   --colors-button-text-on-primary: var(--colors-white);
   --colors-button-text-on-secondary: var(--colors-gray-50);
   --colors-button-text-on-tertiary: var(--colors-blue-400);
@@ -265,6 +289,7 @@
   --colors-toolbar-item-background-selected: var(--colors-blue-700);
   --colors-tooltip-background: var(--colors-gray-650);
   --colors-tooltip-background-inset: var(--colors-gray-650);
+  --colors-tooltip-background-inverse: var(--colors-gray-950);
   --colors-icon-danger: var(--colors-red-400);
   --colors-icon-danger-active: var(--colors-red-300);
   --colors-icon-danger-hover: var(--colors-red-350);
@@ -276,6 +301,7 @@
   --colors-icon-inverted-secondary: var(--colors-gray-700);
   --colors-icon-muted: var(--colors-gray-400);
   --colors-icon-on-disabled: var(--colors-gray-450);
+  --colors-icon-on-disabled-inverse: var(--colors-gray-350);
   --colors-icon-on-static-dark: var(--colors-gray-50);
   --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
   --colors-icon-on-static-light: var(--colors-gray-900);
@@ -290,6 +316,7 @@
   --colors-icon-interactive-on-inverted-secondary-pressed: var(
     --colors-gray-600
   );
+  --colors-icon-interactive-on-inverted-selected: var(--colors-blue-550);
   --colors-icon-interactive-primary: var(--colors-blue-400);
   --colors-icon-interactive-primary-hover: var(--colors-blue-350);
   --colors-icon-interactive-primary-pressed: var(--colors-blue-300);
@@ -403,6 +430,7 @@
   --colors-text-inverted-secondary: var(--colors-gray-700);
   --colors-text-muted: var(--colors-gray-400);
   --colors-text-on-disabled: var(--colors-gray-450);
+  --colors-text-on-inverse-disabled: var(--colors-gray-350);
   --colors-text-on-static-dark: var(--colors-gray-50);
   --colors-text-on-static-dark-subtle: var(--colors-gray-300);
   --colors-text-on-static-light: var(--colors-gray-900);

package/dist/main.js

@@ -166,7 +166,19 @@ const colors$3 = {
   "button-background-danger-pressed": "$red-600",
   "button-background-ghost": "$transparent",
   "button-background-ghost-hover": "$gray-150",
+  "button-background-ghost-inverse-hover": "$gray-800",
+  "button-background-ghost-inverse-pressed": "$gray-750",
   "button-background-ghost-pressed": "$gray-200",
+  "button-background-info": "$blue-500",
+  "button-background-info-hover": "$blue-550",
+  "button-background-info-pressed": "$blue-600",
+  "button-background-inverse": "$blue-500",
+  "button-background-inverse-disabled": "$gray-850",
+  "button-background-inverse-hover": "$blue-550",
+  "button-background-inverse-pressed": "$blue-600",
+  "button-background-inverse-secondary": "$gray-750",
+  "button-background-inverse-secondary-hover": "$gray-700",
+  "button-background-inverse-secondary-pressed": "$gray-700",
   "button-background-primary": "$blue-500",
   "button-background-primary-hover": "$blue-550",
   "button-background-primary-pressed": "$blue-600",
@@ -176,11 +188,17 @@ const colors$3 = {
   "button-background-tertiary": "$transparent",
   "button-background-tertiary-hover": "$blue-150",
   "button-background-tertiary-pressed": "$blue-200",
+  "button-background-warning": "$yellow-700",
+  "button-background-warning-hover": "$yellow-750",
+  "button-background-warning-pressed": "$yellow-800",
   "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-inverse-secondary": "$gray-750",
+  "button-border-inverse-secondary-hover": "$gray-700",
+  "button-border-inverse-secondary-pressed": "$gray-650",
   "button-border-primary": "$blue-500",
   "button-border-primary-hover": "$blue-550",
   "button-border-primary-pressed": "$blue-600",
@@ -191,10 +209,16 @@ const colors$3 = {
   "button-border-tertiary-hover": "$blue-550",
   "button-border-tertiary-pressed": "$blue-600",
   "button-icon-on-danger": "$white",
+  "button-icon-on-inverse": "$white",
+  "button-icon-on-inverse-disabled": "$gray-450",
+  "button-icon-on-inverse-secondary": "$gray-50",
   "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-inverse": "$white",
+  "button-text-on-inverse-disabled": "$gray-450",
+  "button-text-on-inverse-secondary": "$gray-50",
   "button-text-on-primary": "$white",
   "button-text-on-secondary": "$gray-900",
   "button-text-on-tertiary": "$blue-500",
@@ -257,6 +281,7 @@ const colors$3 = {
   "toolbar-item-background-selected": "$blue-150",
   "tooltip-background": "$gray-950",
   "tooltip-background-inset": "$gray-650",
+  "tooltip-background-inverse": "$gray-650",
   "icon-danger": "$red-500",
   "icon-danger-active": "$red-600",
   "icon-danger-hover": "$red-550",
@@ -268,6 +293,7 @@ const colors$3 = {
   "icon-inverted-secondary": "$gray-150",
   "icon-muted": "$gray-400",
   "icon-on-disabled": "$gray-350",
+  "icon-on-disabled-inverse": "$gray-450",
   "icon-on-static-dark": "$gray-50",
   "icon-on-static-dark-subtle": "$gray-300",
   "icon-on-static-light": "$gray-900",
@@ -280,6 +306,7 @@ const colors$3 = {
   "icon-interactive-on-inverted-secondary": "$gray-150",
   "icon-interactive-on-inverted-secondary-hover": "$gray-200",
   "icon-interactive-on-inverted-secondary-pressed": "$gray-250",
+  "icon-interactive-on-inverted-selected": "$blue-400",
   "icon-interactive-primary": "$blue-500",
   "icon-interactive-primary-hover": "$blue-550",
   "icon-interactive-primary-pressed": "$blue-600",
@@ -391,6 +418,7 @@ const colors$3 = {
   "text-inverted-secondary": "$gray-150",
   "text-muted": "$gray-400",
   "text-on-disabled": "$gray-350",
+  "text-on-inverse-disabled": "$gray-450",
   "text-on-static-dark": "$gray-50",
   "text-on-static-dark-subtle": "$gray-300",
   "text-on-static-light": "$gray-900",
@@ -795,7 +823,19 @@ const colors$2 = {
   "button-background-danger-pressed": "$red-450",
   "button-background-ghost": "$transparent",
   "button-background-ghost-hover": "$gray-800",
+  "button-background-ghost-inverse-hover": "$gray-150",
+  "button-background-ghost-inverse-pressed": "$gray-200",
   "button-background-ghost-pressed": "$gray-750",
+  "button-background-info": "$blue-500",
+  "button-background-info-hover": "$blue-550",
+  "button-background-info-pressed": "$blue-600",
+  "button-background-inverse": "$blue-500",
+  "button-background-inverse-disabled": "$gray-150",
+  "button-background-inverse-hover": "$blue-450",
+  "button-background-inverse-pressed": "$blue-400",
+  "button-background-inverse-secondary": "$gray-150",
+  "button-background-inverse-secondary-hover": "$gray-200",
+  "button-background-inverse-secondary-pressed": "$gray-250",
   "button-background-primary": "$blue-500",
   "button-background-primary-hover": "$blue-450",
   "button-background-primary-pressed": "$blue-400",
@@ -805,11 +845,17 @@ const colors$2 = {
   "button-background-tertiary": "$transparent",
   "button-background-tertiary-hover": "$blue-900",
   "button-background-tertiary-pressed": "$blue-800",
+  "button-background-warning": "$yellow-700",
+  "button-background-warning-hover": "$yellow-750",
+  "button-background-warning-pressed": "$yellow-800",
   "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-inverse-secondary": "$gray-150",
+  "button-border-inverse-secondary-hover": "$gray-200",
+  "button-border-inverse-secondary-pressed": "$gray-250",
   "button-border-primary": "$blue-500",
   "button-border-primary-hover": "$blue-450",
   "button-border-primary-pressed": "$blue-400",
@@ -820,10 +866,16 @@ const colors$2 = {
   "button-border-tertiary-hover": "$blue-450",
   "button-border-tertiary-pressed": "$blue-400",
   "button-icon-on-danger": "$white",
+  "button-icon-on-inverse": "$white",
+  "button-icon-on-inverse-disabled": "$gray-350",
+  "button-icon-on-inverse-secondary": "$gray-900",
   "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-inverse": "$white",
+  "button-text-on-inverse-disabled": "$gray-350",
+  "button-text-on-inverse-secondary": "$gray-900",
   "button-text-on-primary": "$white",
   "button-text-on-secondary": "$gray-50",
   "button-text-on-tertiary": "$blue-400",
@@ -886,6 +938,7 @@ const colors$2 = {
   "toolbar-item-background-selected": "$blue-700",
   "tooltip-background": "$gray-650",
   "tooltip-background-inset": "$gray-650",
+  "tooltip-background-inverse": "$gray-950",
   "icon-danger": "$red-400",
   "icon-danger-active": "$red-300",
   "icon-danger-hover": "$red-350",
@@ -897,6 +950,7 @@ const colors$2 = {
   "icon-inverted-secondary": "$gray-700",
   "icon-muted": "$gray-400",
   "icon-on-disabled": "$gray-450",
+  "icon-on-disabled-inverse": "$gray-350",
   "icon-on-static-dark": "$gray-50",
   "icon-on-static-dark-subtle": "$gray-300",
   "icon-on-static-light": "$gray-900",
@@ -909,6 +963,7 @@ const colors$2 = {
   "icon-interactive-on-inverted-secondary": "$gray-700",
   "icon-interactive-on-inverted-secondary-hover": "$gray-650",
   "icon-interactive-on-inverted-secondary-pressed": "$gray-600",
+  "icon-interactive-on-inverted-selected": "$blue-550",
   "icon-interactive-primary": "$blue-400",
   "icon-interactive-primary-hover": "$blue-350",
   "icon-interactive-primary-pressed": "$blue-300",
@@ -1020,6 +1075,7 @@ const colors$2 = {
   "text-inverted-secondary": "$gray-700",
   "text-muted": "$gray-400",
   "text-on-disabled": "$gray-450",
+  "text-on-inverse-disabled": "$gray-350",
   "text-on-static-dark": "$gray-50",
   "text-on-static-dark-subtle": "$gray-300",
   "text-on-static-light": "$gray-900",
@@ -1424,7 +1480,19 @@ const colors$1 = {
   "button-background-danger-pressed": "$red-600",
   "button-background-ghost": "$transparent",
   "button-background-ghost-hover": "$cloud-150",
+  "button-background-ghost-inverse-hover": "$cloud-750",
+  "button-background-ghost-inverse-pressed": "$cloud-700",
   "button-background-ghost-pressed": "$cloud-200",
+  "button-background-info": "$blue-500",
+  "button-background-info-hover": "$blue-550",
+  "button-background-info-pressed": "$blue-600",
+  "button-background-inverse": "$white",
+  "button-background-inverse-disabled": "$cloud-650",
+  "button-background-inverse-hover": "$cloud-100",
+  "button-background-inverse-pressed": "$cloud-150",
+  "button-background-inverse-secondary": "$cloud-700",
+  "button-background-inverse-secondary-hover": "$cloud-650",
+  "button-background-inverse-secondary-pressed": "$cloud-600",
   "button-background-primary": "$cloud-800",
   "button-background-primary-hover": "$cloud-900",
   "button-background-primary-pressed": "$cloud-950",
@@ -1434,11 +1502,17 @@ const colors$1 = {
   "button-background-tertiary": "$transparent",
   "button-background-tertiary-hover": "$cloud-150",
   "button-background-tertiary-pressed": "$cloud-200",
+  "button-background-warning": "$yellow-700",
+  "button-background-warning-hover": "$yellow-750",
+  "button-background-warning-pressed": "$yellow-800",
   "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-inverse-secondary": "$transparent",
+  "button-border-inverse-secondary-hover": "$transparent",
+  "button-border-inverse-secondary-pressed": "$transparent",
   "button-border-primary": "$blue-500",
   "button-border-primary-hover": "$blue-550",
   "button-border-primary-pressed": "$blue-600",
@@ -1449,10 +1523,16 @@ const colors$1 = {
   "button-border-tertiary-hover": "$cloud-550",
   "button-border-tertiary-pressed": "$cloud-600",
   "button-icon-on-danger": "$white",
+  "button-icon-on-inverse": "$cloud-900",
+  "button-icon-on-inverse-disabled": "$cloud-500",
+  "button-icon-on-inverse-secondary": "$white",
   "button-icon-on-primary": "$white",
   "button-icon-on-secondary": "$cloud-900",
   "button-icon-on-tertiary": "$cloud-900",
   "button-text-on-danger": "$white",
+  "button-text-on-inverse": "$cloud-900",
+  "button-text-on-inverse-disabled": "$cloud-500",
+  "button-text-on-inverse-secondary": "$white",
   "button-text-on-primary": "$white",
   "button-text-on-secondary": "$cloud-900",
   "button-text-on-tertiary": "$cloud-900",
@@ -1515,6 +1595,7 @@ const colors$1 = {
   "toolbar-item-background-selected": "$cloud-150",
   "tooltip-background": "$cloud-950",
   "tooltip-background-inset": "$cloud-650",
+  "tooltip-background-inverse": "$cloud-650",
   "icon-danger": "$red-500",
   "icon-danger-active": "$red-600",
   "icon-danger-hover": "$red-550",
@@ -1526,6 +1607,7 @@ const colors$1 = {
   "icon-inverted-secondary": "$cloud-300",
   "icon-muted": "$cloud-500",
   "icon-on-disabled": "$cloud-350",
+  "icon-on-disabled-inverse": "$cloud-450",
   "icon-on-static-dark": "$cloud-50",
   "icon-on-static-dark-subtle": "$cloud-300",
   "icon-on-static-light": "$cloud-900",
@@ -1538,6 +1620,7 @@ const colors$1 = {
   "icon-interactive-on-inverted-secondary": "$cloud-300",
   "icon-interactive-on-inverted-secondary-hover": "$cloud-350",
   "icon-interactive-on-inverted-secondary-pressed": "$cloud-400",
+  "icon-interactive-on-inverted-selected": "$blue-400",
   "icon-interactive-primary": "$blue-500",
   "icon-interactive-primary-hover": "$blue-550",
   "icon-interactive-primary-pressed": "$blue-600",
@@ -1649,6 +1732,7 @@ const colors$1 = {
   "text-inverted-secondary": "$cloud-300",
   "text-muted": "$cloud-500",
   "text-on-disabled": "$cloud-350",
+  "text-on-inverse-disabled": "$cloud-500",
   "text-on-static-dark": "$white",
   "text-on-static-dark-subtle": "$cloud-300",
   "text-on-static-light": "$cloud-900",
@@ -2053,7 +2137,19 @@ const colors = {
   "button-background-danger-pressed": "$red-450",
   "button-background-ghost": "$transparent",
   "button-background-ghost-hover": "$ink-750",
+  "button-background-ghost-inverse-hover": "$ink-150",
+  "button-background-ghost-inverse-pressed": "$ink-200",
   "button-background-ghost-pressed": "$ink-700",
+  "button-background-info": "$blue-500",
+  "button-background-info-hover": "$blue-550",
+  "button-background-info-pressed": "$blue-600",
+  "button-background-inverse": "$ink-800",
+  "button-background-inverse-disabled": "$ink-150",
+  "button-background-inverse-hover": "$ink-900",
+  "button-background-inverse-pressed": "$ink-950",
+  "button-background-inverse-secondary": "$ink-150",
+  "button-background-inverse-secondary-hover": "$ink-200",
+  "button-background-inverse-secondary-pressed": "$ink-250",
   "button-background-primary": "$white",
   "button-background-primary-hover": "$ink-100",
   "button-background-primary-pressed": "$ink-150",
@@ -2063,11 +2159,17 @@ const colors = {
   "button-background-tertiary": "$transparent",
   "button-background-tertiary-hover": "$ink-750",
   "button-background-tertiary-pressed": "$ink-700",
+  "button-background-warning": "$yellow-700",
+  "button-background-warning-hover": "$yellow-750",
+  "button-background-warning-pressed": "$yellow-800",
   "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-inverse-secondary": "$transparent",
+  "button-border-inverse-secondary-hover": "$transparent",
+  "button-border-inverse-secondary-pressed": "$transparent",
   "button-border-primary": "$blue-500",
   "button-border-primary-hover": "$blue-450",
   "button-border-primary-pressed": "$blue-400",
@@ -2078,10 +2180,16 @@ const colors = {
   "button-border-tertiary-hover": "$ink-550",
   "button-border-tertiary-pressed": "$ink-500",
   "button-icon-on-danger": "$white",
+  "button-icon-on-inverse": "$white",
+  "button-icon-on-inverse-disabled": "$ink-350",
+  "button-icon-on-inverse-secondary": "$ink-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-inverse": "$white",
+  "button-text-on-inverse-disabled": "$ink-350",
+  "button-text-on-inverse-secondary": "$ink-900",
   "button-text-on-primary": "$ink-900",
   "button-text-on-secondary": "$white",
   "button-text-on-tertiary": "$white",
@@ -2144,6 +2252,7 @@ const colors = {
   "toolbar-item-background-selected": "$ink-700",
   "tooltip-background": "$ink-650",
   "tooltip-background-inset": "$ink-800",
+  "tooltip-background-inverse": "$ink-950",
   "icon-danger": "$red-400",
   "icon-danger-active": "$red-300",
   "icon-danger-hover": "$red-350",
@@ -2155,6 +2264,7 @@ const colors = {
   "icon-inverted-secondary": "$ink-700",
   "icon-muted": "$ink-400",
   "icon-on-disabled": "$ink-450",
+  "icon-on-disabled-inverse": "$ink-350",
   "icon-on-static-dark": "$ink-50",
   "icon-on-static-dark-subtle": "$ink-300",
   "icon-on-static-light": "$ink-900",
@@ -2167,6 +2277,7 @@ const colors = {
   "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-on-inverted-selected": "$blue-550",
   "icon-interactive-primary": "$blue-500",
   "icon-interactive-primary-hover": "$blue-450",
   "icon-interactive-primary-pressed": "$blue-400",
@@ -2278,6 +2389,7 @@ const colors = {
   "text-inverted-secondary": "$ink-700",
   "text-muted": "$ink-400",
   "text-on-disabled": "$ink-500",
+  "text-on-inverse-disabled": "$ink-350",
   "text-on-static-dark": "$white",
   "text-on-static-dark-subtle": "$ink-300",
   "text-on-static-light": "$ink-900",
@@ -2604,7 +2716,7 @@ const radii$1 = {
   input: "$150",
   "list-item": "$150",
   notification: "$200",
-  "notification-banner": "$round",
+  "notification-banner": "$200",
   panel: "$200",
   popover: "$150",
   tag: "$round",
@@ -2626,7 +2738,7 @@ const radii = {
   input: "$150",
   "list-item": "$150",
   notification: "$200",
-  "notification-banner": "$round",
+  "notification-banner": "$200",
   panel: "$200",
   popover: "$150",
   tag: "$round",