@mirohq/design-system-themes 1.3.8 → 1.3.10

package/base.css

@@ -214,8 +214,8 @@
   --colors-format-icon-slides: var(--colors-coral-600);
   --colors-format-icon-table: var(--colors-moss-600);
   --colors-format-icon-timeline: var(--colors-moss-600);
-  --colors-input-background-alt-active: var(--colors-gray-100);
   --colors-input-background-alt-default: var(--colors-gray-100);
+  --colors-input-background-alt-focused: var(--colors-gray-100);
   --colors-input-background-alt-hover: var(--colors-gray-100);
   --colors-input-background-default: var(--colors-white);
   --colors-input-background-disabled: var(--colors-gray-150);
@@ -616,20 +616,20 @@
   --colors-teal-text: var(--colors-teal-900);
   --colors-teal-text-mild: var(--colors-teal-700);
   --colors-teal-text-subtle: var(--colors-teal-100);
-  --radii-panel-radii: $150;
-  --radii-notification-radii: $100;
-  --radii-avatar-radii-people: $round;
-  --radii-avatar-radii-team: $50;
-  --radii-avatar-radii-group: $50;
-  --radii-dropdown-radii: $100;
-  --radii-toolbar-radii: $100;
-  --radii-toolbar-item-radii: $50;
-  --radii-input-radii: $50;
-  --radii-button-radii: $50;
-  --radii-popup-radii: $100;
-  --radii-tooltip-radii: $100;
-  --radii-checkbox-radii: $50;
-  --radii-list-item-radii: $50;
+  --radii-panel: var(--radii-150);
+  --radii-notification: var(--radii-100);
+  --radii-avatar-people: var(--radii-round);
+  --radii-avatar-team: var(--radii-50);
+  --radii-avatar-group: var(--radii-50);
+  --radii-dropdown: var(--radii-100);
+  --radii-toolbar: var(--radii-100);
+  --radii-toolbar-item: var(--radii-50);
+  --radii-input: var(--radii-50);
+  --radii-button: var(--radii-50);
+  --radii-popup: var(--radii-100);
+  --radii-tooltip: var(--radii-100);
+  --radii-checkbox: var(--radii-50);
+  --radii-list-item: var(--radii-50);
   --shadows-50: 0 4px 16px rgba(5, 0, 56, 0.07);
   --shadows-100: 0 8px 32px rgba(5, 0, 56, 0.03);
   --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),

package/dark.css

@@ -164,7 +164,7 @@
   --colors-border-warning: var(--colors-yellow-500);
   --colors-border-warning-subtle: var(--colors-yellow-700);
   --colors-badge-border: var(--colors-gray-850);
-  --colors-badge-border-inverted: #ffffff;
+  --colors-badge-border-inverted: var(--colors-blue-500);
   --colors-button-background-danger: var(--colors-red-500);
   --colors-button-background-danger-hover: var(--colors-red-450);
   --colors-button-background-danger-pressed: var(--colors-red-450);
@@ -214,8 +214,8 @@
   --colors-format-icon-slides: var(--colors-coral-600);
   --colors-format-icon-table: var(--colors-moss-600);
   --colors-format-icon-timeline: var(--colors-moss-600);
-  --colors-input-background-alt-active: var(--colors-gray-750);
   --colors-input-background-alt-default: var(--colors-gray-750);
+  --colors-input-background-alt-focused: var(--colors-gray-750);
   --colors-input-background-alt-hover: var(--colors-gray-750);
   --colors-input-background-default: var(--colors-gray-950);
   --colors-input-background-disabled: var(--colors-gray-850);
@@ -616,20 +616,20 @@
   --colors-teal-text: var(--colors-teal-900);
   --colors-teal-text-mild: var(--colors-teal-700);
   --colors-teal-text-subtle: var(--colors-teal-100);
-  --radii-panel-radii: $150;
-  --radii-notification-radii: $100;
-  --radii-avatar-radii-people: $round;
-  --radii-avatar-radii-team: $50;
-  --radii-avatar-radii-group: $50;
-  --radii-dropdown-radii: $100;
-  --radii-toolbar-radii: $100;
-  --radii-toolbar-item-radii: $50;
-  --radii-input-radii: $50;
-  --radii-button-radii: $50;
-  --radii-popup-radii: $100;
-  --radii-tooltip-radii: $100;
-  --radii-checkbox-radii: $50;
-  --radii-list-item-radii: $50;
+  --radii-panel: var(--radii-150);
+  --radii-notification: var(--radii-100);
+  --radii-avatar-people: var(--radii-round);
+  --radii-avatar-team: var(--radii-50);
+  --radii-avatar-group: var(--radii-50);
+  --radii-dropdown: var(--radii-100);
+  --radii-toolbar: var(--radii-100);
+  --radii-toolbar-item: var(--radii-50);
+  --radii-input: var(--radii-50);
+  --radii-button: var(--radii-50);
+  --radii-popup: var(--radii-100);
+  --radii-tooltip: var(--radii-100);
+  --radii-checkbox: var(--radii-50);
+  --radii-list-item: var(--radii-50);
   --shadows-50: 0 0 8px 0 rgba(9, 9, 9, 0.65);
   --shadows-100: 0 0 16px 0 rgba(9, 9, 9, 0.65);
   --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),

package/dist/main.js

@@ -208,8 +208,8 @@ const colors$3 = {
   "format-icon-slides": "$coral-600",
   "format-icon-table": "$moss-600",
   "format-icon-timeline": "$moss-600",
-  "input-background-alt-active": "$gray-100",
   "input-background-alt-default": "$gray-100",
+  "input-background-alt-focused": "$gray-100",
   "input-background-alt-hover": "$gray-100",
   "input-background-default": "$white",
   "input-background-disabled": "$gray-150",
@@ -766,7 +766,7 @@ const colors$2 = {
   "border-warning": "$yellow-500",
   "border-warning-subtle": "$yellow-700",
   "badge-border": "$gray-850",
-  "badge-border-inverted": "#FFFFFF",
+  "badge-border-inverted": "$blue-500",
   "button-background-danger": "$red-500",
   "button-background-danger-hover": "$red-450",
   "button-background-danger-pressed": "$red-450",
@@ -816,8 +816,8 @@ const colors$2 = {
   "format-icon-slides": "$coral-600",
   "format-icon-table": "$moss-600",
   "format-icon-timeline": "$moss-600",
-  "input-background-alt-active": "$gray-750",
   "input-background-alt-default": "$gray-750",
+  "input-background-alt-focused": "$gray-750",
   "input-background-alt-hover": "$gray-750",
   "input-background-default": "$gray-950",
   "input-background-disabled": "$gray-850",
@@ -1333,9 +1333,9 @@ const colors$1 = {
   "border-interactive-primary": "$blue-500",
   "border-interactive-primary-hover": "$blue-550",
   "border-interactive-primary-pressed": "$blue-600",
-  "border-interactive-secondary": "$cloud-900",
-  "border-interactive-secondary-hover": "$cloud-950",
-  "border-interactive-secondary-pressed": "$cloud-1000",
+  "border-interactive-secondary": "$cloud-150",
+  "border-interactive-secondary-hover": "$cloud-300",
+  "border-interactive-secondary-pressed": "$cloud-350",
   "border-interactive-selected": "$blue-550",
   "border-neutrals": "$cloud-200",
   "border-neutrals-active": "$cloud-350",
@@ -1424,18 +1424,18 @@ const colors$1 = {
   "format-icon-slides": "$coral-600",
   "format-icon-table": "$moss-600",
   "format-icon-timeline": "$moss-600",
-  "input-background-alt-active": "$cloud-200",
-  "input-background-alt-default": "$cloud-150",
-  "input-background-alt-hover": "$cloud-200",
+  "input-background-alt-default": "$cloud-100",
+  "input-background-alt-focused": "$cloud-100",
+  "input-background-alt-hover": "$cloud-150",
   "input-background-default": "$white",
   "input-background-disabled": "$cloud-150",
   "input-background-focused": "$white",
   "input-background-hover": "$white",
-  "input-border-default": "$cloud-425",
+  "input-border-default": "$cloud-250",
   "input-border-disabled": "$transparent",
   "input-border-error": "$red-500",
   "input-border-focused": "$blue-550",
-  "input-border-hover": "$cloud-450",
+  "input-border-hover": "$cloud-400",
   "input-border-success": "$green-500",
   "notification-background": "$cloud-850",
   "notification-border": "$cloud-450",
@@ -1462,12 +1462,12 @@ const colors$1 = {
   "icon-inverted": "$white",
   "icon-inverted-secondary": "$cloud-300",
   "icon-muted": "$cloud-400",
-  "icon-on-disabled": "$cloud-450",
+  "icon-on-disabled": "$cloud-350",
   "icon-on-static-dark": "$gray-50",
   "icon-on-static-dark-subtle": "$gray-300",
   "icon-on-static-light": "$cloud-900",
   "icon-on-static-light-subtle": "$cloud-700",
-  "icon-placeholder": "$cloud-400",
+  "icon-placeholder": "$cloud-475",
   "icon-secondary": "$cloud-700",
   "icon-interactive-on-inverted": "$white",
   "icon-interactive-on-inverted-hover": "$cloud-50",
@@ -1538,9 +1538,9 @@ const colors$1 = {
   "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-secondary": "$cloud-500",
+  "text-interactive-secondary-hover": "$cloud-600",
+  "text-interactive-secondary-pressed": "$cloud-650",
   "text-interactive-selected": "$blue-550",
   "text-on-interactive-danger": "$white",
   "text-on-interactive-primary": "$white",
@@ -1585,7 +1585,7 @@ const colors$1 = {
   "text-inverted": "$white",
   "text-inverted-secondary": "$cloud-300",
   "text-muted": "$cloud-400",
-  "text-on-disabled": "$cloud-450",
+  "text-on-disabled": "$cloud-350",
   "text-on-static-dark": "$cloud-50",
   "text-on-static-dark-subtle": "$cloud-300",
   "text-on-static-light": "$cloud-900",
@@ -1850,9 +1850,9 @@ const colors = {
   "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-850",
+  "background-danger-subtle-pressed": "$red-800",
   "background-interactive-danger": "$red-500",
   "background-interactive-danger-hover": "$red-450",
   "background-interactive-danger-pressed": "$red-400",
@@ -1982,7 +1982,7 @@ const colors = {
   "border-warning": "$yellow-500",
   "border-warning-subtle": "$yellow-700",
   "badge-border": "$ink-850",
-  "badge-border-inverted": "#FFFFFF",
+  "badge-border-inverted": "$blue-500",
   "button-background-danger": "$red-500",
   "button-background-danger-hover": "$red-450",
   "button-background-danger-pressed": "$red-450",
@@ -2032,9 +2032,9 @@ const colors = {
   "format-icon-slides": "$coral-600",
   "format-icon-table": "$moss-600",
   "format-icon-timeline": "$moss-600",
-  "input-background-alt-active": "$ink-650",
-  "input-background-alt-default": "$ink-700",
-  "input-background-alt-hover": "$ink-650",
+  "input-background-alt-default": "$ink-750",
+  "input-background-alt-focused": "$ink-750",
+  "input-background-alt-hover": "$ink-700",
   "input-background-default": "$ink-850",
   "input-background-disabled": "$ink-750",
   "input-background-focused": "$ink-800",
@@ -2043,7 +2043,7 @@ const colors = {
   "input-border-disabled": "$transparent",
   "input-border-error": "$red-400",
   "input-border-focused": "$blue-450",
-  "input-border-hover": "$ink-450",
+  "input-border-hover": "$ink-400",
   "input-border-success": "$green-400",
   "notification-background": "$ink-50",
   "notification-border": "$ink-500",
@@ -2075,7 +2075,7 @@ const colors = {
   "icon-on-static-dark-subtle": "$ink-300",
   "icon-on-static-light": "$ink-900",
   "icon-on-static-light-subtle": "$ink-700",
-  "icon-placeholder": "$ink-400",
+  "icon-placeholder": "$ink-450",
   "icon-secondary": "$ink-300",
   "icon-interactive-on-inverted": "$ink-900",
   "icon-interactive-on-inverted-hover": "$ink-850",
@@ -2147,13 +2147,13 @@ const colors = {
   "text-interactive-primary-hover": "$blue-450",
   "text-interactive-primary-pressed": "$blue-400",
   "text-interactive-secondary": "$ink-300",
-  "text-interactive-secondary-hover": "$ink-250",
-  "text-interactive-secondary-pressed": "$ink-200",
+  "text-interactive-secondary-hover": "$ink-200",
+  "text-interactive-secondary-pressed": "$ink-150",
   "text-interactive-selected": "$blue-400",
   "text-on-interactive-danger": "$white",
   "text-on-interactive-primary": "$white",
   "text-on-interactive-secondary": "$white",
-  "text-on-interactive-selected": "$blue-400",
+  "text-on-interactive-selected": "$blue-200",
   "text-neutrals": "$ink-100",
   "text-neutrals-active": "$ink-50",
   "text-neutrals-disabled": "$ink-400",
@@ -2193,7 +2193,7 @@ const colors = {
   "text-inverted": "$ink-900",
   "text-inverted-secondary": "$ink-700",
   "text-muted": "$ink-400",
-  "text-on-disabled": "$ink-450",
+  "text-on-disabled": "$ink-500",
   "text-on-static-dark": "$ink-50",
   "text-on-static-dark-subtle": "$ink-300",
   "text-on-static-light": "$ink-900",
@@ -2439,6 +2439,18 @@ const aliasShadows = {
   "elevation-200": "0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A"
 };
 
+const shadows$3 = {
+  50: "0 4px 16px rgba(5, 0, 56, 0.07)",
+  100: "0 8px 32px rgba(5, 0, 56, 0.03)",
+  ...aliasShadows
+};
+
+const shadows$2 = {
+  50: "0 0 8px 0 rgba(9,9,9,.65)",
+  100: "0 0 16px 0 rgba(9,9,9,.65)",
+  ...aliasShadows
+};
+
 const shadows$1 = {
   50: "0 4px 16px rgba(5, 0, 56, 0.07)",
   100: "0 8px 32px rgba(5, 0, 56, 0.03)",
@@ -2452,81 +2464,81 @@ const shadows = {
 };
 
 const radii$3 = {
-  "panel-radii": "$150",
-  "notification-radii": "$100",
-  "avatar-radii-people": "$round",
-  "avatar-radii-team": "$50",
-  "avatar-radii-group": "$50",
-  "dropdown-radii": "$100",
-  "toolbar-radii": "$100",
-  "toolbar-item-radii": "$50",
-  "input-radii": "$50",
-  "button-radii": "$50",
-  "popup-radii": "$100",
-  "tooltip-radii": "$100",
-  "checkbox-radii": "$50",
-  "list-item-radii": "$50"
+  panel: "$150",
+  notification: "$100",
+  "avatar-people": "$round",
+  "avatar-team": "$50",
+  "avatar-group": "$50",
+  dropdown: "$100",
+  toolbar: "$100",
+  "toolbar-item": "$50",
+  input: "$50",
+  button: "$50",
+  popup: "$100",
+  tooltip: "$100",
+  checkbox: "$50",
+  "list-item": "$50"
 };
 
 const radii$2 = {
-  "panel-radii": "$150",
-  "notification-radii": "$100",
-  "avatar-radii-people": "$round",
-  "avatar-radii-team": "$50",
-  "avatar-radii-group": "$50",
-  "dropdown-radii": "$100",
-  "toolbar-radii": "$100",
-  "toolbar-item-radii": "$50",
-  "input-radii": "$50",
-  "button-radii": "$50",
-  "popup-radii": "$100",
-  "tooltip-radii": "$100",
-  "checkbox-radii": "$50",
-  "list-item-radii": "$50"
+  panel: "$150",
+  notification: "$100",
+  "avatar-people": "$round",
+  "avatar-team": "$50",
+  "avatar-group": "$50",
+  dropdown: "$100",
+  toolbar: "$100",
+  "toolbar-item": "$50",
+  input: "$50",
+  button: "$50",
+  popup: "$100",
+  tooltip: "$100",
+  checkbox: "$50",
+  "list-item": "$50"
 };
 
 const radii$1 = {
-  "panel-radii": "$150",
-  "notification-radii": "$100",
-  "avatar-radii-people": "$round",
-  "avatar-radii-team": "$50",
-  "avatar-radii-group": "$50",
-  "dropdown-radii": "$250",
-  "toolbar-radii": "$200",
-  "toolbar-item-radii": "$150",
-  "input-radii": "$150",
-  "button-radii": "$100",
-  "popup-radii": "$100",
-  "tooltip-radii": "$100",
-  "checkbox-radii": "$75",
-  "list-item-radii": "$150"
+  panel: "$150",
+  notification: "$100",
+  "avatar-people": "$round",
+  "avatar-team": "$50",
+  "avatar-group": "$50",
+  dropdown: "$250",
+  toolbar: "$200",
+  "toolbar-item": "$150",
+  input: "$150",
+  button: "$100",
+  popup: "$100",
+  tooltip: "$100",
+  checkbox: "$75",
+  "list-item": "$150"
 };
 
 const radii = {
-  "panel-radii": "$150",
-  "notification-radii": "$100",
-  "avatar-radii-people": "$round",
-  "avatar-radii-team": "$50",
-  "avatar-radii-group": "$50",
-  "dropdown-radii": "$250",
-  "toolbar-radii": "$200",
-  "toolbar-item-radii": "$150",
-  "input-radii": "$150",
-  "button-radii": "$100",
-  "popup-radii": "$100",
-  "tooltip-radii": "$100",
-  "checkbox-radii": "$75",
-  "list-item-radii": "$150"
+  panel: "$150",
+  notification: "$100",
+  "avatar-people": "$round",
+  "avatar-team": "$50",
+  "avatar-group": "$50",
+  dropdown: "$250",
+  toolbar: "$200",
+  "toolbar-item": "$150",
+  input: "$150",
+  button: "$100",
+  popup: "$100",
+  tooltip: "$100",
+  checkbox: "$75",
+  "list-item": "$150"
 };
 
 const light = Object.freeze({
   colors: colors$3,
-  shadows: shadows$1,
+  shadows: shadows$3,
   radii: radii$3
 });
 const dark = Object.freeze({
   colors: colors$2,
-  shadows: shadows,
+  shadows: shadows$2,
   radii: radii$2
 });
 const newLight = Object.freeze({