@mirohq/design-system-themes 1.4.10 → 1.4.11

package/base.css

@@ -177,6 +177,9 @@
   --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);
@@ -193,6 +196,9 @@
   --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);
@@ -310,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);
@@ -423,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

@@ -168,6 +168,9 @@
     "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}",
@@ -184,6 +187,9 @@
     "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}",
@@ -299,6 +305,7 @@
     "iconInteractiveOnInvertedSecondary": "{colors.gray150}",
     "iconInteractiveOnInvertedSecondaryHover": "{colors.gray200}",
     "iconInteractiveOnInvertedSecondaryPressed": "{colors.gray250}",
+    "iconInteractiveOnInvertedSelected": "{colors.blue400}",
     "iconInteractivePrimary": "{colors.blue500}",
     "iconInteractivePrimaryHover": "{colors.blue550}",
     "iconInteractivePrimaryPressed": "{colors.blue600}",
@@ -410,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

@@ -177,6 +177,9 @@
   --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);
@@ -193,6 +196,9 @@
   --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);
@@ -310,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);
@@ -423,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

@@ -169,6 +169,9 @@ const colors$3 = {
   "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",
@@ -185,6 +188,9 @@ 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",
@@ -300,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",
@@ -411,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",
@@ -818,6 +826,9 @@ const colors$2 = {
   "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",
@@ -834,6 +845,9 @@ 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",
@@ -949,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",
@@ -1060,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",
@@ -1467,6 +1483,9 @@ const colors$1 = {
   "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",
@@ -1483,6 +1502,9 @@ 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",
@@ -1598,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",
@@ -1709,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",
@@ -2116,6 +2140,9 @@ const colors = {
   "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",
@@ -2132,6 +2159,9 @@ 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",
@@ -2247,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",
@@ -2358,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",