@mirohq/design-system-themes 1.4.10 → 1.4.12

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);
@@ -225,9 +231,21 @@
   --colors-button-text-on-secondary: var(--colors-gray-900);
   --colors-button-text-on-tertiary: var(--colors-blue-500);
   --colors-chip-background: var(--colors-gray-100);
+  --colors-chip-background-default: var(--colors-gray-150);
+  --colors-chip-background-default-hover: var(--colors-gray-200);
+  --colors-chip-background-default-pressed: var(--colors-gray-250);
   --colors-chip-background-disabled: var(--colors-gray-100);
   --colors-chip-background-hover: var(--colors-gray-150);
+  --colors-chip-background-outline-hover: var(--colors-blue-150);
+  --colors-chip-background-outline-pressed: var(--colors-blue-200);
+  --colors-chip-border-default: var(--colors-gray-150);
+  --colors-chip-border-default-hover: var(--colors-gray-200);
+  --colors-chip-border-outline: var(--colors-blue-500);
+  --colors-chip-border-outline-hover: var(--colors-blue-550);
+  --colors-chip-border-outline-pressed: var(--colors-blue-600);
   --colors-chip-text: var(--colors-gray-900);
+  --colors-chip-text-on-default: var(--colors-gray-900);
+  --colors-chip-text-on-outline: var(--colors-blue-500);
   --colors-format-icon-diagram: var(--colors-orange-600);
   --colors-format-icon-docs: var(--colors-cyan-600);
   --colors-format-icon-external: var(--colors-teal-600);
@@ -310,6 +328,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 +442,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}",
@@ -216,9 +222,21 @@
     "buttonTextOnSecondary": "{colors.gray900}",
     "buttonTextOnTertiary": "{colors.blue500}",
     "chipBackground": "{colors.gray100}",
+    "chipBackgroundDefault": "{colors.gray150}",
+    "chipBackgroundDefaultHover": "{colors.gray200}",
+    "chipBackgroundDefaultPressed": "{colors.gray250}",
     "chipBackgroundDisabled": "{colors.gray100}",
     "chipBackgroundHover": "{colors.gray150}",
+    "chipBackgroundOutlineHover": "{colors.blue150}",
+    "chipBackgroundOutlinePressed": "{colors.blue200}",
+    "chipBorderDefault": "{colors.gray150}",
+    "chipBorderDefaultHover": "{colors.gray200}",
+    "chipBorderOutline": "{colors.blue500}",
+    "chipBorderOutlineHover": "{colors.blue550}",
+    "chipBorderOutlinePressed": "{colors.blue600}",
     "chipText": "{colors.gray900}",
+    "chipTextOnDefault": "{colors.gray900}",
+    "chipTextOnOutline": "{colors.blue500}",
     "formatIconDiagram": "{colors.orange600}",
     "formatIconDocs": "{colors.cyan600}",
     "formatIconExternal": "{colors.teal600}",
@@ -299,6 +317,7 @@
     "iconInteractiveOnInvertedSecondary": "{colors.gray150}",
     "iconInteractiveOnInvertedSecondaryHover": "{colors.gray200}",
     "iconInteractiveOnInvertedSecondaryPressed": "{colors.gray250}",
+    "iconInteractiveOnInvertedSelected": "{colors.blue400}",
     "iconInteractivePrimary": "{colors.blue500}",
     "iconInteractivePrimaryHover": "{colors.blue550}",
     "iconInteractivePrimaryPressed": "{colors.blue600}",
@@ -410,6 +429,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);
@@ -225,9 +231,21 @@
   --colors-button-text-on-secondary: var(--colors-gray-50);
   --colors-button-text-on-tertiary: var(--colors-blue-400);
   --colors-chip-background: var(--colors-gray-750);
+  --colors-chip-background-default: var(--colors-gray-750);
+  --colors-chip-background-default-hover: var(--colors-gray-700);
+  --colors-chip-background-default-pressed: var(--colors-gray-700);
   --colors-chip-background-disabled: var(--colors-gray-750);
   --colors-chip-background-hover: var(--colors-gray-700);
+  --colors-chip-background-outline-hover: var(--colors-blue-900);
+  --colors-chip-background-outline-pressed: var(--colors-blue-800);
+  --colors-chip-border-default: var(--colors-gray-750);
+  --colors-chip-border-default-hover: var(--colors-gray-700);
+  --colors-chip-border-outline: var(--colors-blue-500);
+  --colors-chip-border-outline-hover: var(--colors-blue-450);
+  --colors-chip-border-outline-pressed: var(--colors-blue-400);
   --colors-chip-text: var(--colors-gray-50);
+  --colors-chip-text-on-default: var(--colors-gray-50);
+  --colors-chip-text-on-outline: var(--colors-blue-400);
   --colors-format-icon-diagram: var(--colors-orange-600);
   --colors-format-icon-docs: var(--colors-cyan-600);
   --colors-format-icon-external: var(--colors-teal-600);
@@ -310,6 +328,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 +442,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",
@@ -217,9 +223,21 @@ const colors$3 = {
   "button-text-on-secondary": "$gray-900",
   "button-text-on-tertiary": "$blue-500",
   "chip-background": "$gray-100",
+  "chip-background-default": "$gray-150",
+  "chip-background-default-hover": "$gray-200",
+  "chip-background-default-pressed": "$gray-250",
   "chip-background-disabled": "$gray-100",
   "chip-background-hover": "$gray-150",
+  "chip-background-outline-hover": "$blue-150",
+  "chip-background-outline-pressed": "$blue-200",
+  "chip-border-default": "$gray-150",
+  "chip-border-default-hover": "$gray-200",
+  "chip-border-outline": "$blue-500",
+  "chip-border-outline-hover": "$blue-550",
+  "chip-border-outline-pressed": "$blue-600",
   "chip-text": "$gray-900",
+  "chip-text-on-default": "$gray-900",
+  "chip-text-on-outline": "$blue-500",
   "format-icon-diagram": "$orange-600",
   "format-icon-docs": "$cyan-600",
   "format-icon-external": "$teal-600",
@@ -300,6 +318,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 +430,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 +838,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 +857,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",
@@ -866,9 +892,21 @@ const colors$2 = {
   "button-text-on-secondary": "$gray-50",
   "button-text-on-tertiary": "$blue-400",
   "chip-background": "$gray-750",
+  "chip-background-default": "$gray-750",
+  "chip-background-default-hover": "$gray-700",
+  "chip-background-default-pressed": "$gray-700",
   "chip-background-disabled": "$gray-750",
   "chip-background-hover": "$gray-700",
+  "chip-background-outline-hover": "$blue-900",
+  "chip-background-outline-pressed": "$blue-800",
+  "chip-border-default": "$gray-750",
+  "chip-border-default-hover": "$gray-700",
+  "chip-border-outline": "$blue-500",
+  "chip-border-outline-hover": "$blue-450",
+  "chip-border-outline-pressed": "$blue-400",
   "chip-text": "$gray-50",
+  "chip-text-on-default": "$gray-50",
+  "chip-text-on-outline": "$blue-400",
   "format-icon-diagram": "$orange-600",
   "format-icon-docs": "$cyan-600",
   "format-icon-external": "$teal-600",
@@ -949,6 +987,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 +1099,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 +1507,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 +1526,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",
@@ -1515,9 +1561,21 @@ const colors$1 = {
   "button-text-on-secondary": "$cloud-900",
   "button-text-on-tertiary": "$cloud-900",
   "chip-background": "$cloud-150",
+  "chip-background-default": "$cloud-150",
+  "chip-background-default-hover": "$cloud-200",
+  "chip-background-default-pressed": "$cloud-250",
   "chip-background-disabled": "$cloud-50",
   "chip-background-hover": "$cloud-200",
+  "chip-background-outline-hover": "$cloud-150",
+  "chip-background-outline-pressed": "$cloud-200",
+  "chip-border-default": "$transparent",
+  "chip-border-default-hover": "$transparent",
+  "chip-border-outline": "$cloud-500",
+  "chip-border-outline-hover": "$cloud-550",
+  "chip-border-outline-pressed": "$cloud-600",
   "chip-text": "$cloud-900",
+  "chip-text-on-default": "$cloud-900",
+  "chip-text-on-outline": "$cloud-900",
   "format-icon-diagram": "$orange-600",
   "format-icon-docs": "$cyan-600",
   "format-icon-external": "$teal-600",
@@ -1598,6 +1656,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 +1768,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 +2176,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 +2195,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",
@@ -2164,9 +2230,21 @@ const colors = {
   "button-text-on-secondary": "$white",
   "button-text-on-tertiary": "$white",
   "chip-background": "$ink-750",
+  "chip-background-default": "$ink-700",
+  "chip-background-default-hover": "$ink-650",
+  "chip-background-default-pressed": "$ink-600",
   "chip-background-disabled": "$ink-650",
   "chip-background-hover": "$ink-700",
+  "chip-background-outline-hover": "$ink-750",
+  "chip-background-outline-pressed": "$ink-700",
+  "chip-border-default": "$transparent",
+  "chip-border-default-hover": "$transparent",
+  "chip-border-outline": "$ink-600",
+  "chip-border-outline-hover": "$ink-550",
+  "chip-border-outline-pressed": "$ink-500",
   "chip-text": "$ink-50",
+  "chip-text-on-default": "$white",
+  "chip-text-on-outline": "$white",
   "format-icon-diagram": "$orange-600",
   "format-icon-docs": "$cyan-600",
   "format-icon-external": "$teal-600",
@@ -2247,6 +2325,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 +2437,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",