@mirohq/design-system-themes 1.3.3 → 1.3.5

package/dist/module.js

@@ -84,6 +84,8 @@ const colors$3 = {
   "border-disabled": "$gray-150",
   "border-inverted": "$white",
   "border-inverted-subtle": "$gray-700",
+  "border-option": "$gray-450",
+  "border-option-hover": "$blue-550",
   "border-static-dark": "$gray-450",
   "border-static-dark-subtle": "$gray-750",
   "border-strong": "$gray-400",
@@ -205,12 +207,11 @@ const colors$3 = {
   "input-background-default": "$white",
   "input-background-disabled": "$gray-150",
   "input-background-hover": "$white",
-  "input-border-active": "$blue-550",
   "input-border-default": "$gray-200",
   "input-border-disabled": "$transparent",
   "input-border-error": "$red-500",
+  "input-border-focused": "$blue-550",
   "input-border-hover": "$blue-550",
-  "input-border-selection-control": "$gray-450",
   "input-border-success": "$green-500",
   "notification-background": "$gray-850",
   "notification-border": "$gray-450",
@@ -220,6 +221,7 @@ const colors$3 = {
   "scrollbar-background": "$gray-300",
   "scrollbar-background-hover": "$gray-350",
   "slider-background": "$gray-300",
+  "slider-control-background": "$white",
   "slider-notch-background": "$gray-300",
   "switch-background-default": "$gray-300",
   "switch-background-hover": "$gray-350",
@@ -241,19 +243,19 @@ const colors$3 = {
   "icon-on-static-dark-subtle": "$gray-300",
   "icon-placeholder": "$gray-475",
   "icon-secondary": "$gray-500",
+  "icon-interactive-on-inverted": "$white",
+  "icon-interactive-on-inverted-hover": "$gray-50",
+  "icon-interactive-on-inverted-pressed": "$gray-100",
+  "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-primary": "$blue-500",
+  "icon-interactive-primary-hover": "$blue-550",
+  "icon-interactive-primary-pressed": "$blue-600",
+  "icon-interactive-secondary": "$gray-500",
+  "icon-interactive-secondary-hover": "$gray-550",
+  "icon-interactive-secondary-pressed": "$gray-600",
   "icon-interactive-selected": "$blue-550",
-  "icon-link": "$blue-500",
-  "icon-link-hover": "$blue-550",
-  "icon-link-on-inverted": "$white",
-  "icon-link-on-inverted-hover": "$gray-50",
-  "icon-link-on-inverted-pressed": "$gray-100",
-  "icon-link-on-inverted-secondary": "$gray-150",
-  "icon-link-on-inverted-secondary-hover": "$gray-200",
-  "icon-link-on-inverted-secondary-pressed": "$gray-250",
-  "icon-link-pressed": "$blue-600",
-  "icon-link-secondary": "$gray-500",
-  "icon-link-secondary-hover": "$gray-550",
-  "icon-link-secondary-pressed": "$gray-600",
   "icon-on-interactive-danger": "$white",
   "icon-on-interactive-primary": "$white",
   "icon-on-interactive-secondary": "$gray-900",
@@ -301,19 +303,19 @@ const colors$3 = {
   "text-danger-hover": "$red-550",
   "text-danger-inverted": "$red-50",
   "text-danger-pressed": "$red-600",
+  "text-interactive-on-inverted": "$white",
+  "text-interactive-on-inverted-hover": "$gray-50",
+  "text-interactive-on-inverted-pressed": "$gray-100",
+  "text-interactive-on-inverted-secondary": "$gray-150",
+  "text-interactive-on-inverted-secondary-hover": "$gray-200",
+  "text-interactive-on-inverted-secondary-pressed": "$gray-250",
+  "text-interactive-primary": "$blue-500",
+  "text-interactive-primary-hover": "$blue-550",
+  "text-interactive-primary-pressed": "$blue-600",
+  "text-interactive-secondary": "$gray-500",
+  "text-interactive-secondary-hover": "$gray-550",
+  "text-interactive-secondary-pressed": "$gray-600",
   "text-interactive-selected": "$blue-550",
-  "text-link": "$blue-500",
-  "text-link-hover": "$blue-550",
-  "text-link-on-inverted": "$white",
-  "text-link-on-inverted-hover": "$gray-50",
-  "text-link-on-inverted-pressed": "$gray-100",
-  "text-link-on-inverted-secondary": "$gray-150",
-  "text-link-on-inverted-secondary-hover": "$gray-200",
-  "text-link-on-inverted-secondary-pressed": "$gray-250",
-  "text-link-pressed": "$blue-600",
-  "text-link-secondary": "$gray-500",
-  "text-link-secondary-hover": "$gray-550",
-  "text-link-secondary-pressed": "$gray-600",
   "text-on-interactive-danger": "$white",
   "text-on-interactive-primary": "$white",
   "text-on-interactive-secondary": "$gray-900",
@@ -619,9 +621,9 @@ const colors$2 = {
   "background-danger-prominent-hover": "$red-450",
   "background-danger-prominent-pressed": "$red-400",
   "background-danger-subtle": "$red-900",
-  "background-danger-subtle-active": "$red-500",
-  "background-danger-subtle-hover": "$red-550",
-  "background-danger-subtle-pressed": "$red-500",
+  "background-danger-subtle-active": "$red-900",
+  "background-danger-subtle-hover": "$red-800",
+  "background-danger-subtle-pressed": "$red-750",
   "background-interactive-danger": "$red-500",
   "background-interactive-danger-hover": "$red-450",
   "background-interactive-danger-pressed": "$red-400",
@@ -680,6 +682,8 @@ const colors$2 = {
   "border-disabled": "$gray-750",
   "border-inverted": "$gray-700",
   "border-inverted-subtle": "$gray-600",
+  "border-option": "$gray-450",
+  "border-option-hover": "$blue-450",
   "border-static-dark": "$gray-450",
   "border-static-dark-subtle": "$gray-750",
   "border-strong": "$gray-500",
@@ -801,12 +805,11 @@ const colors$2 = {
   "input-background-default": "$gray-950",
   "input-background-disabled": "$gray-850",
   "input-background-hover": "$gray-950",
-  "input-border-active": "$blue-350",
   "input-border-default": "$gray-650",
   "input-border-disabled": "$transparent",
   "input-border-error": "$red-400",
+  "input-border-focused": "$blue-350",
   "input-border-hover": "$blue-350",
-  "input-border-selection-control": "$gray-450",
   "input-border-success": "$green-400",
   "notification-background": "$gray-150",
   "notification-border": "$gray-450",
@@ -816,6 +819,7 @@ const colors$2 = {
   "scrollbar-background": "$gray-700",
   "scrollbar-background-hover": "$gray-650",
   "slider-background": "$gray-700",
+  "slider-control-background": "$gray-950",
   "slider-notch-background": "$gray-700",
   "switch-background-default": "$gray-700",
   "switch-background-hover": "$gray-650",
@@ -837,19 +841,19 @@ const colors$2 = {
   "icon-on-static-dark-subtle": "$gray-300",
   "icon-placeholder": "$gray-450",
   "icon-secondary": "$gray-300",
+  "icon-interactive-on-inverted": "$gray-900",
+  "icon-interactive-on-inverted-hover": "$gray-850",
+  "icon-interactive-on-inverted-pressed": "$gray-800",
+  "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-primary": "$blue-400",
+  "icon-interactive-primary-hover": "$blue-350",
+  "icon-interactive-primary-pressed": "$blue-300",
+  "icon-interactive-secondary": "$gray-300",
+  "icon-interactive-secondary-hover": "$gray-250",
+  "icon-interactive-secondary-pressed": "$gray-200",
   "icon-interactive-selected": "$blue-400",
-  "icon-link": "$blue-400",
-  "icon-link-hover": "$blue-350",
-  "icon-link-on-inverted": "$gray-900",
-  "icon-link-on-inverted-hover": "$gray-850",
-  "icon-link-on-inverted-pressed": "$gray-800",
-  "icon-link-on-inverted-secondary": "$gray-700",
-  "icon-link-on-inverted-secondary-hover": "$gray-650",
-  "icon-link-on-inverted-secondary-pressed": "$gray-600",
-  "icon-link-pressed": "$blue-300",
-  "icon-link-secondary": "$gray-300",
-  "icon-link-secondary-hover": "$gray-250",
-  "icon-link-secondary-pressed": "$gray-200",
   "icon-on-interactive-danger": "$white",
   "icon-on-interactive-primary": "$white",
   "icon-on-interactive-secondary": "$gray-50",
@@ -897,19 +901,19 @@ const colors$2 = {
   "text-danger-hover": "$red-350",
   "text-danger-inverted": "$red-900",
   "text-danger-pressed": "$red-300",
+  "text-interactive-on-inverted": "$gray-900",
+  "text-interactive-on-inverted-hover": "$gray-850",
+  "text-interactive-on-inverted-pressed": "$gray-800",
+  "text-interactive-on-inverted-secondary": "$gray-700",
+  "text-interactive-on-inverted-secondary-hover": "$gray-650",
+  "text-interactive-on-inverted-secondary-pressed": "$gray-600",
+  "text-interactive-primary": "$blue-400",
+  "text-interactive-primary-hover": "$blue-350",
+  "text-interactive-primary-pressed": "$blue-300",
+  "text-interactive-secondary": "$gray-300",
+  "text-interactive-secondary-hover": "$gray-250",
+  "text-interactive-secondary-pressed": "$gray-200",
   "text-interactive-selected": "$blue-400",
-  "text-link": "$blue-400",
-  "text-link-hover": "$blue-350",
-  "text-link-on-inverted": "$gray-900",
-  "text-link-on-inverted-hover": "$gray-850",
-  "text-link-on-inverted-pressed": "$gray-800",
-  "text-link-on-inverted-secondary": "$gray-700",
-  "text-link-on-inverted-secondary-hover": "$gray-650",
-  "text-link-on-inverted-secondary-pressed": "$gray-600",
-  "text-link-pressed": "$blue-300",
-  "text-link-secondary": "$gray-300",
-  "text-link-secondary-hover": "$gray-250",
-  "text-link-secondary-pressed": "$gray-200",
   "text-on-interactive-danger": "$white",
   "text-on-interactive-primary": "$white",
   "text-on-interactive-secondary": "$gray-50",
@@ -1276,6 +1280,8 @@ const colors$1 = {
   "border-disabled": "$cloud-150",
   "border-inverted": "$cloud-900",
   "border-inverted-subtle": "$cloud-700",
+  "border-option": "$cloud-450",
+  "border-option-hover": "$blue-550",
   "border-static-dark": "$cloud-450",
   "border-static-dark-subtle": "$cloud-750",
   "border-strong": "$cloud-300",
@@ -1397,12 +1403,11 @@ const colors$1 = {
   "input-background-default": "$cloud-100",
   "input-background-disabled": "$cloud-150",
   "input-background-hover": "$cloud-100",
-  "input-border-active": "$transparent",
   "input-border-default": "$transparent",
   "input-border-disabled": "$transparent",
   "input-border-error": "$red-500",
+  "input-border-focused": "$transparent",
   "input-border-hover": "$transparent",
-  "input-border-selection-control": "$cloud-450",
   "input-border-success": "$green-500",
   "notification-background": "$cloud-850",
   "notification-border": "$cloud-450",
@@ -1412,6 +1417,7 @@ const colors$1 = {
   "scrollbar-background": "$cloud-300",
   "scrollbar-background-hover": "$cloud-350",
   "slider-background": "$cloud-300",
+  "slider-control-background": "$white",
   "slider-notch-background": "$cloud-300",
   "switch-background-default": "$cloud-300",
   "switch-background-hover": "$cloud-350",
@@ -1433,19 +1439,19 @@ const colors$1 = {
   "icon-on-static-dark-subtle": "$gray-300",
   "icon-placeholder": "$cloud-400",
   "icon-secondary": "$cloud-700",
+  "icon-interactive-on-inverted": "$white",
+  "icon-interactive-on-inverted-hover": "$cloud-50",
+  "icon-interactive-on-inverted-pressed": "$cloud-100",
+  "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-primary": "$blue-500",
+  "icon-interactive-primary-hover": "$blue-550",
+  "icon-interactive-primary-pressed": "$blue-600",
+  "icon-interactive-secondary": "$cloud-700",
+  "icon-interactive-secondary-hover": "$cloud-750",
+  "icon-interactive-secondary-pressed": "$cloud-800",
   "icon-interactive-selected": "$blue-550",
-  "icon-link": "$blue-500",
-  "icon-link-hover": "$blue-550",
-  "icon-link-on-inverted": "$white",
-  "icon-link-on-inverted-hover": "$cloud-50",
-  "icon-link-on-inverted-pressed": "$cloud-100",
-  "icon-link-on-inverted-secondary": "$cloud-300",
-  "icon-link-on-inverted-secondary-hover": "$cloud-350",
-  "icon-link-on-inverted-secondary-pressed": "$cloud-400",
-  "icon-link-pressed": "$blue-600",
-  "icon-link-secondary": "$cloud-700",
-  "icon-link-secondary-hover": "$cloud-750",
-  "icon-link-secondary-pressed": "$cloud-800",
   "icon-on-interactive-danger": "$white",
   "icon-on-interactive-primary": "$white",
   "icon-on-interactive-secondary": "$cloud-900",
@@ -1493,19 +1499,19 @@ const colors$1 = {
   "text-danger-hover": "$red-550",
   "text-danger-inverted": "$red-50",
   "text-danger-pressed": "$red-600",
+  "text-interactive-on-inverted": "$white",
+  "text-interactive-on-inverted-hover": "$cloud-50",
+  "text-interactive-on-inverted-pressed": "$cloud-100",
+  "text-interactive-on-inverted-secondary": "$cloud-300",
+  "text-interactive-on-inverted-secondary-hover": "$cloud-350",
+  "text-interactive-on-inverted-secondary-pressed": "$cloud-400",
+  "text-interactive-primary": "$blue-500",
+  "text-interactive-primary-hover": "$blue-550",
+  "text-interactive-primary-pressed": "$blue-600",
+  "text-interactive-secondary": "$cloud-700",
+  "text-interactive-secondary-hover": "$cloud-750",
+  "text-interactive-secondary-pressed": "$cloud-800",
   "text-interactive-selected": "$blue-550",
-  "text-link": "$blue-500",
-  "text-link-hover": "$blue-550",
-  "text-link-on-inverted": "$white",
-  "text-link-on-inverted-hover": "$cloud-50",
-  "text-link-on-inverted-pressed": "$cloud-100",
-  "text-link-on-inverted-secondary": "$cloud-300",
-  "text-link-on-inverted-secondary-hover": "$cloud-350",
-  "text-link-on-inverted-secondary-pressed": "$cloud-400",
-  "text-link-pressed": "$blue-600",
-  "text-link-secondary": "$cloud-700",
-  "text-link-secondary-hover": "$cloud-750",
-  "text-link-secondary-pressed": "$cloud-800",
   "text-on-interactive-danger": "$white",
   "text-on-interactive-primary": "$white",
   "text-on-interactive-secondary": "$cloud-900",
@@ -1872,6 +1878,8 @@ const colors = {
   "border-disabled": "$cloud-750",
   "border-inverted": "$cloud-100",
   "border-inverted-subtle": "$cloud-500",
+  "border-option": "$cloud-450",
+  "border-option-hover": "$blue-450",
   "border-static-dark": "$cloud-450",
   "border-static-dark-subtle": "$cloud-750",
   "border-strong": "$cloud-450",
@@ -1993,12 +2001,11 @@ const colors = {
   "input-background-default": "$cloud-850",
   "input-background-disabled": "$cloud-850",
   "input-background-hover": "$cloud-850",
-  "input-border-active": "$transparent",
   "input-border-default": "$transparent",
   "input-border-disabled": "$transparent",
   "input-border-error": "$red-400",
+  "input-border-focused": "$transparent",
   "input-border-hover": "$transparent",
-  "input-border-selection-control": "$cloud-450",
   "input-border-success": "$green-400",
   "notification-background": "$cloud-150",
   "notification-border": "$cloud-450",
@@ -2008,6 +2015,7 @@ const colors = {
   "scrollbar-background": "$gray-700",
   "scrollbar-background-hover": "$gray-650",
   "slider-background": "$gray-700",
+  "slider-control-background": "$cloud-900",
   "slider-notch-background": "$gray-700",
   "switch-background-default": "$gray-700",
   "switch-background-hover": "$gray-650",
@@ -2029,19 +2037,19 @@ const colors = {
   "icon-on-static-dark-subtle": "$gray-300",
   "icon-placeholder": "$cloud-400",
   "icon-secondary": "$cloud-300",
+  "icon-interactive-on-inverted": "$cloud-900",
+  "icon-interactive-on-inverted-hover": "$cloud-850",
+  "icon-interactive-on-inverted-pressed": "$cloud-800",
+  "icon-interactive-on-inverted-secondary": "$cloud-700",
+  "icon-interactive-on-inverted-secondary-hover": "$cloud-650",
+  "icon-interactive-on-inverted-secondary-pressed": "$cloud-600",
+  "icon-interactive-primary": "$blue-500",
+  "icon-interactive-primary-hover": "$blue-450",
+  "icon-interactive-primary-pressed": "$blue-400",
+  "icon-interactive-secondary": "$cloud-300",
+  "icon-interactive-secondary-hover": "$cloud-250",
+  "icon-interactive-secondary-pressed": "$cloud-200",
   "icon-interactive-selected": "$blue-400",
-  "icon-link": "$blue-500",
-  "icon-link-hover": "$blue-450",
-  "icon-link-on-inverted": "$cloud-900",
-  "icon-link-on-inverted-hover": "$cloud-850",
-  "icon-link-on-inverted-pressed": "$cloud-800",
-  "icon-link-on-inverted-secondary": "$cloud-700",
-  "icon-link-on-inverted-secondary-hover": "$cloud-650",
-  "icon-link-on-inverted-secondary-pressed": "$cloud-600",
-  "icon-link-pressed": "$blue-400",
-  "icon-link-secondary": "$cloud-300",
-  "icon-link-secondary-hover": "$cloud-250",
-  "icon-link-secondary-pressed": "$cloud-200",
   "icon-on-interactive-danger": "$white",
   "icon-on-interactive-primary": "$white",
   "icon-on-interactive-secondary": "$white",
@@ -2089,19 +2097,19 @@ const colors = {
   "text-danger-hover": "$red-350",
   "text-danger-inverted": "$red-900",
   "text-danger-pressed": "$red-300",
+  "text-interactive-on-inverted": "$cloud-900",
+  "text-interactive-on-inverted-hover": "$cloud-850",
+  "text-interactive-on-inverted-pressed": "$cloud-800",
+  "text-interactive-on-inverted-secondary": "$cloud-700",
+  "text-interactive-on-inverted-secondary-hover": "$cloud-650",
+  "text-interactive-on-inverted-secondary-pressed": "$cloud-600",
+  "text-interactive-primary": "$blue-500",
+  "text-interactive-primary-hover": "$blue-450",
+  "text-interactive-primary-pressed": "$blue-400",
+  "text-interactive-secondary": "$cloud-300",
+  "text-interactive-secondary-hover": "$cloud-250",
+  "text-interactive-secondary-pressed": "$cloud-200",
   "text-interactive-selected": "$blue-400",
-  "text-link": "$blue-500",
-  "text-link-hover": "$blue-450",
-  "text-link-on-inverted": "$cloud-900",
-  "text-link-on-inverted-hover": "$cloud-850",
-  "text-link-on-inverted-pressed": "$cloud-800",
-  "text-link-on-inverted-secondary": "$cloud-700",
-  "text-link-on-inverted-secondary-hover": "$cloud-650",
-  "text-link-on-inverted-secondary-pressed": "$cloud-600",
-  "text-link-pressed": "$blue-400",
-  "text-link-secondary": "$cloud-300",
-  "text-link-secondary-hover": "$cloud-250",
-  "text-link-secondary-pressed": "$cloud-200",
   "text-on-interactive-danger": "$white",
   "text-on-interactive-primary": "$white",
   "text-on-interactive-secondary": "$white",