@mirohq/design-system-themes 1.4.9 → 1.4.10

package/base.css

@@ -174,7 +174,16 @@
   --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-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);
@@ -189,6 +198,9 @@
   --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 +211,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 +283,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 +295,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);

package/base.json

@@ -165,7 +165,16 @@
     "buttonBackgroundDangerPressed": "{colors.red600}",
     "buttonBackgroundGhost": "{colors.transparent}",
     "buttonBackgroundGhostHover": "{colors.gray150}",
+    "buttonBackgroundGhostInverseHover": "{colors.gray800}",
+    "buttonBackgroundGhostInversePressed": "{colors.gray750}",
     "buttonBackgroundGhostPressed": "{colors.gray200}",
+    "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}",
@@ -180,6 +189,9 @@
     "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 +202,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 +274,7 @@
     "toolbarItemBackgroundSelected": "{colors.blue150}",
     "tooltipBackground": "{colors.gray950}",
     "tooltipBackgroundInset": "{colors.gray650}",
+    "tooltipBackgroundInverse": "{colors.gray650}",
     "iconDanger": "{colors.red500}",
     "iconDangerActive": "{colors.red600}",
     "iconDangerHover": "{colors.red550}",
@@ -267,6 +286,7 @@
     "iconInvertedSecondary": "{colors.gray150}",
     "iconMuted": "{colors.gray400}",
     "iconOnDisabled": "{colors.gray350}",
+    "iconOnDisabledInverse": "{colors.gray450}",
     "iconOnStaticDark": "{colors.gray50}",
     "iconOnStaticDarkSubtle": "{colors.gray300}",
     "iconOnStaticLight": "{colors.gray900}",

package/dark.css

@@ -174,7 +174,16 @@
   --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-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);
@@ -189,6 +198,9 @@
   --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 +211,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 +283,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 +295,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);

package/dist/main.js

@@ -166,7 +166,16 @@ 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-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",
@@ -181,6 +190,9 @@ const colors$3 = {
   "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 +203,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 +275,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 +287,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",
@@ -795,7 +815,16 @@ 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-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",
@@ -810,6 +839,9 @@ const colors$2 = {
   "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 +852,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 +924,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 +936,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",
@@ -1424,7 +1464,16 @@ 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-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",
@@ -1439,6 +1488,9 @@ const colors$1 = {
   "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 +1501,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 +1573,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 +1585,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",
@@ -2053,7 +2113,16 @@ 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-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",
@@ -2068,6 +2137,9 @@ const colors = {
   "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 +2150,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 +2222,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 +2234,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",
@@ -2604,7 +2684,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 +2706,7 @@ const radii = {
   input: "$150",
   "list-item": "$150",
   notification: "$200",
-  "notification-banner": "$round",
+  "notification-banner": "$200",
   panel: "$200",
   popover: "$150",
   tag: "$round",