@mirohq/design-system-themes 1.3.10 → 1.3.12

package/base.css

@@ -42,9 +42,13 @@
   --colors-background-interactive-secondary-selected: var(--colors-blue-150);
   --colors-background-interactive-selected: var(--colors-blue-500);
   --colors-background-interactive-surface-hover: var(--colors-gray-100);
+  --colors-background-interactive-surface-pressed: var(--colors-gray-150);
   --colors-background-interactive-surface-secondary-hover: var(
     --colors-gray-150
   );
+  --colors-background-interactive-surface-secondary-pressed: var(
+    --colors-gray-200
+  );
   --colors-background-neutrals: var(--colors-white);
   --colors-background-neutrals-active: var(--colors-gray-150);
   --colors-background-neutrals-container: var(--colors-white);
@@ -388,6 +392,22 @@
   --colors-text-secondary: var(--colors-gray-500);
   --colors-text-warning: var(--colors-yellow-800);
   --colors-text-warning-subtle: var(--colors-yellow-600);
+  --radii-avatar-group: var(--radii-50);
+  --radii-avatar-people: var(--radii-round);
+  --radii-avatar-team: var(--radii-50);
+  --radii-button: var(--radii-50);
+  --radii-calendar: var(--radii-100);
+  --radii-checkbox: var(--radii-50);
+  --radii-dropdown: var(--radii-100);
+  --radii-input: var(--radii-50);
+  --radii-list-item: var(--radii-50);
+  --radii-notification: var(--radii-100);
+  --radii-panel: var(--radii-150);
+  --radii-popup: var(--radii-100);
+  --radii-tag: var(--radii-50);
+  --radii-toolbar: var(--radii-100);
+  --radii-toolbar-item: var(--radii-50);
+  --radii-tooltip: var(--radii-100);
   --colors-coal-background: var(--colors-coal-500);
   --colors-coal-background-mild: var(--colors-coal-350);
   --colors-coal-background-prominent: var(--colors-coal-700);
@@ -616,20 +636,6 @@
   --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: 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

@@ -42,9 +42,13 @@
   --colors-background-interactive-secondary-selected: var(--colors-blue-700);
   --colors-background-interactive-selected: var(--colors-blue-500);
   --colors-background-interactive-surface-hover: var(--colors-gray-900);
+  --colors-background-interactive-surface-pressed: var(--colors-gray-800);
   --colors-background-interactive-surface-secondary-hover: var(
     --colors-gray-700
   );
+  --colors-background-interactive-surface-secondary-pressed: var(
+    --colors-gray-650
+  );
   --colors-background-neutrals: var(--colors-gray-950);
   --colors-background-neutrals-active: var(--colors-gray-850);
   --colors-background-neutrals-container: var(--colors-gray-850);
@@ -388,6 +392,22 @@
   --colors-text-secondary: var(--colors-gray-300);
   --colors-text-warning: var(--colors-yellow-200);
   --colors-text-warning-subtle: var(--colors-yellow-300);
+  --radii-avatar-group: var(--radii-50);
+  --radii-avatar-people: var(--radii-round);
+  --radii-avatar-team: var(--radii-50);
+  --radii-button: var(--radii-50);
+  --radii-calendar: var(--radii-100);
+  --radii-checkbox: var(--radii-50);
+  --radii-dropdown: var(--radii-100);
+  --radii-input: var(--radii-50);
+  --radii-list-item: var(--radii-50);
+  --radii-notification: var(--radii-100);
+  --radii-panel: var(--radii-150);
+  --radii-popup: var(--radii-100);
+  --radii-tag: var(--radii-50);
+  --radii-toolbar: var(--radii-100);
+  --radii-toolbar-item: var(--radii-50);
+  --radii-tooltip: var(--radii-100);
   --colors-coal-background: var(--colors-coal-500);
   --colors-coal-background-mild: var(--colors-coal-350);
   --colors-coal-background-prominent: var(--colors-coal-700);
@@ -616,20 +636,6 @@
   --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: 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

@@ -38,7 +38,9 @@ const colors$3 = {
   "background-interactive-secondary-selected": "$blue-150",
   "background-interactive-selected": "$blue-500",
   "background-interactive-surface-hover": "$gray-100",
+  "background-interactive-surface-pressed": "$gray-150",
   "background-interactive-surface-secondary-hover": "$gray-150",
+  "background-interactive-surface-secondary-pressed": "$gray-200",
   "background-neutrals": "$white",
   "background-neutrals-active": "$gray-150",
   "background-neutrals-container": "$white",
@@ -646,7 +648,9 @@ const colors$2 = {
   "background-interactive-secondary-selected": "$blue-700",
   "background-interactive-selected": "$blue-500",
   "background-interactive-surface-hover": "$gray-900",
+  "background-interactive-surface-pressed": "$gray-800",
   "background-interactive-surface-secondary-hover": "$gray-700",
+  "background-interactive-surface-secondary-pressed": "$gray-650",
   "background-neutrals": "$gray-950",
   "background-neutrals-active": "$gray-850",
   "background-neutrals-container": "$gray-850",
@@ -1254,7 +1258,9 @@ const colors$1 = {
   "background-interactive-secondary-selected": "$blue-150",
   "background-interactive-selected": "$blue-500",
   "background-interactive-surface-hover": "$cloud-100",
+  "background-interactive-surface-pressed": "$cloud-150",
   "background-interactive-surface-secondary-hover": "$cloud-150",
+  "background-interactive-surface-secondary-pressed": "$cloud-200",
   "background-neutrals": "$white",
   "background-neutrals-active": "$cloud-150",
   "background-neutrals-container": "$white",
@@ -1862,7 +1868,9 @@ const colors = {
   "background-interactive-secondary-selected": "$blue-700",
   "background-interactive-selected": "$blue-500",
   "background-interactive-surface-hover": "$ink-750",
+  "background-interactive-surface-pressed": "$ink-700",
   "background-interactive-surface-secondary-hover": "$ink-650",
+  "background-interactive-surface-secondary-pressed": "$ink-600",
   "background-neutrals": "$ink-850",
   "background-neutrals-active": "$ink-800",
   "background-neutrals-container": "$ink-850",
@@ -2464,71 +2472,79 @@ const shadows = {
 };
 
 const radii$3 = {
-  panel: "$150",
-  notification: "$100",
+  "avatar-group": "$50",
   "avatar-people": "$round",
   "avatar-team": "$50",
-  "avatar-group": "$50",
+  button: "$50",
+  calendar: "$100",
+  checkbox: "$50",
   dropdown: "$100",
-  toolbar: "$100",
-  "toolbar-item": "$50",
   input: "$50",
-  button: "$50",
+  "list-item": "$50",
+  notification: "$100",
+  panel: "$150",
   popup: "$100",
-  tooltip: "$100",
-  checkbox: "$50",
-  "list-item": "$50"
+  tag: "$50",
+  toolbar: "$100",
+  "toolbar-item": "$50",
+  tooltip: "$100"
 };
 
 const radii$2 = {
-  panel: "$150",
-  notification: "$100",
+  "avatar-group": "$50",
   "avatar-people": "$round",
   "avatar-team": "$50",
-  "avatar-group": "$50",
+  button: "$50",
+  calendar: "$100",
+  checkbox: "$50",
   dropdown: "$100",
-  toolbar: "$100",
-  "toolbar-item": "$50",
   input: "$50",
-  button: "$50",
+  "list-item": "$50",
+  notification: "$100",
+  panel: "$150",
   popup: "$100",
-  tooltip: "$100",
-  checkbox: "$50",
-  "list-item": "$50"
+  tag: "$50",
+  toolbar: "$100",
+  "toolbar-item": "$50",
+  tooltip: "$100"
 };
 
 const radii$1 = {
-  panel: "$150",
-  notification: "$100",
+  "avatar-group": "$50",
   "avatar-people": "$round",
   "avatar-team": "$50",
-  "avatar-group": "$50",
+  button: "$100",
+  calendar: "$250",
+  checkbox: "$75",
   dropdown: "$250",
-  toolbar: "$200",
-  "toolbar-item": "$150",
   input: "$150",
-  button: "$100",
+  "list-item": "$150",
+  notification: "$100",
+  panel: "$150",
   popup: "$100",
-  tooltip: "$100",
-  checkbox: "$75",
-  "list-item": "$150"
+  tag: "$round",
+  toolbar: "$200",
+  "toolbar-item": "$150",
+  tooltip: "$100"
 };
 
 const radii = {
-  panel: "$150",
-  notification: "$100",
+  "avatar-group": "$50",
   "avatar-people": "$round",
   "avatar-team": "$50",
-  "avatar-group": "$50",
+  button: "$100",
+  calendar: "$250",
+  checkbox: "$75",
   dropdown: "$250",
-  toolbar: "$200",
-  "toolbar-item": "$150",
   input: "$150",
-  button: "$100",
+  "list-item": "$150",
+  notification: "$100",
+  panel: "$150",
   popup: "$100",
-  tooltip: "$100",
-  checkbox: "$75",
-  "list-item": "$150"
+  tag: "$round",
+  toolbar: "$200",
+  "toolbar-item": "$150",
+  tooltip: "$100"
 };
 
 const light = Object.freeze({