@mirohq/design-system-themes 1.4.11 → 1.5.0-dialog.0

package/base.css

@@ -231,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);

package/base.json

@@ -222,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}",

package/dark.css

@@ -231,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);

package/dist/main.js

@@ -223,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",
@@ -880,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",
@@ -1537,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",
@@ -2194,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",
@@ -2632,7 +2680,8 @@ const aliasShadows = {
   focus: "0 0 0 2px $colors$border-focus-inner, 0 0 0 4px $colors$focus-keyboard",
   "elevation-0": "0 0 0 1px $colors$gray-200",
   "elevation-100": "0 2px 4px 0px #22242814",
-  "elevation-200": "0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A"
+  "elevation-200": "0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A",
+  "elevation-300": "0 6px 16px 0 #2224281f, 0 0 8px 0 #2224280F"
 };
 
 const shadows$3 = {