@mirohq/design-system-dropdown-menu 5.4.20 → 5.4.21

package/dist/module.js

@@ -55,10 +55,10 @@ const StyledItemDescription = styled(Primitive.div, {
   gridArea: "item-description",
   fontSize: "$150",
   lineHeight: 1.5,
-  color: "$text-neutrals-subtle",
+  color: "$text-secondary",
   '&:is(:hover,[data-hovered]):not([aria-disabled="true"],[data-disabled])': {
-    background: "$background-neutrals-hover",
-    color: "$text-neutrals-hover",
+    background: "$background-interactive-surface-hover",
+    color: "$text-interactive-secondary-hover",
     '&:not([aria-disabled="true"])': {
       boxShadow: "none"
     }
@@ -83,8 +83,8 @@ const itemDefaults = {
   boxSizing: "border-box",
   fontSize: 14,
   lineHeight: "20px",
-  color: "$text-neutrals",
-  borderRadius: "$50",
+  color: "$text-default",
+  borderRadius: "$list-item",
   display: "grid",
   gridTemplateColumns: "auto 1fr minmax(min-content, var(--right-slot-max-width))",
   gridTemplateRows: "auto minmax(0, 1fr)",
@@ -105,7 +105,7 @@ const itemDefaults = {
   '&:disabled, &[aria-disabled="true"], &[data-disabled]': {
     cursor: "default",
     ["&, & ".concat(StyledItemDescription, ", & ").concat(Hotkey$1)]: {
-      color: "$text-neutrals-disabled"
+      color: "$text-disabled"
     },
     ["& ".concat(StyledIllustrationSlot)]: {
       filter: "grayscale(1)"
@@ -115,16 +115,16 @@ const itemDefaults = {
     pointerEvents: "none"
   },
   '&:is(:hover,[data-hovered]):not([aria-disabled="true"],[data-disabled])': {
-    background: "$background-neutrals-hover",
-    color: "$text-neutrals-hover",
+    background: "$background-interactive-surface-hover",
+    color: "$text-default",
     '&:not([aria-disabled="true"])': {
       boxShadow: "none"
     }
   },
   '&:active:not([aria-disabled="true"])': {
-    background: "$background-primary-subtle-active",
+    background: "$background-interactive-secondary-selected",
     boxShadow: "none",
-    color: "$text-primary-active"
+    color: "$text-on-interactive-selected"
   },
   '&[tabindex="0"]': {
     zIndex: "1"
@@ -145,7 +145,7 @@ const disabledSelector = '&[aria-disabled="true"] '.concat(StyledIndicator, ", &
 const StyledCheckboxItem = styled(RadixDropdownMenu.CheckboxItem, {
   ...itemDefaults,
   ["".concat(StyledIndicator)]: {
-    borderRadius: "$50",
+    borderRadius: "$checkbox",
     boxSizing: "border-box"
   },
   variants: {
@@ -155,21 +155,21 @@ const StyledCheckboxItem = styled(RadixDropdownMenu.CheckboxItem, {
           square: "$4"
         },
         ["".concat(checkedSelector, ", ").concat(indeterminateSelector)]: {
-          backgroundColor: "$background-primary-prominent",
-          color: "$icon-primary-inverted"
+          backgroundColor: "$background-interactive-primary",
+          color: "$icon-on-interactive-primary"
         },
         [hoverCheckedSelector]: {
-          backgroundColor: "$background-primary-prominent-hover"
+          backgroundColor: "$background-interactive-primary-hover"
         },
         [uncheckedSelector]: {
-          border: "1px solid $border-neutrals-controls"
+          border: "1px solid $border-option"
         },
         [hoverUncheckedSelector]: {
-          border: "1px solid $border-primary-hover"
+          border: "1px solid $border-interactive-primary-hover"
         },
         [disabledSelector]: {
-          color: "$icon-neutrals-disabled",
-          backgroundColor: "$background-neutrals-disabled"
+          color: "$icon-on-disabled",
+          backgroundColor: "$background-disabled"
         }
       },
       ghost: {
@@ -177,16 +177,16 @@ const StyledCheckboxItem = styled(RadixDropdownMenu.CheckboxItem, {
           square: "$3"
         },
         [checkedSelector]: {
-          color: "$icon-primary"
+          color: "$icon-interactive-selected"
         },
         [indeterminateSelector]: {
-          color: "$icon-primary"
+          color: "$icon-interactive-selected"
         },
         [hoverCheckedSelector]: {
-          color: "$icon-primary-hover"
+          color: "$icon-interactive-selected"
         },
         [disabledSelector]: {
-          color: "$icon-neutrals-disabled"
+          color: "$icon-disabled"
         }
       }
     }
@@ -373,14 +373,14 @@ const CONTENT_PADDING = {
   large: "$".concat(CONTENT_PADDING_TOKENS.large.y, " $").concat(CONTENT_PADDING_TOKENS.large.x)
 };
 const contentDefaults = {
-  ...floating.css(),
+  ...floating.css({ radius: "$dropdown" }),
   maxWidth: "$125",
   position: "relative",
   zIndex: "$dropdown-menu",
   outline: "1px solid transparent !important",
   // important because Radix overrides outline in element styles
-  backgroundColor: "$background-neutrals-layout",
-  border: ".5px solid $border-neutrals-subtle"
+  backgroundColor: "$background-layout",
+  border: ".5px solid $border-subtle"
 };
 
 const StyledItemsContainer = styled("div", {
@@ -521,12 +521,12 @@ const StyledItem = styled(RadixDropdownMenu.Item, {
       subtle: {},
       danger: {
         '&:is(:hover,[data-hovered]):not([aria-disabled="true"],[data-disabled])': {
-          color: "$text-danger",
-          backgroundColor: "$background-danger-subtle"
+          color: "$status-text-error",
+          backgroundColor: "$status-background-error"
         },
         '&:active:not([aria-disabled="true"],[data-disabled])': {
-          color: "$text-danger-active",
-          backgroundColor: "$background-danger-subtle-active"
+          color: "$status-text-error",
+          backgroundColor: "$status-background-error"
         }
       }
     }
@@ -574,7 +574,7 @@ const StyledRadioContainer = styled(Primitive.div, {
   width: "$4",
   height: "$4",
   boxSizing: "border-box",
-  border: "1px solid $border-neutrals",
+  border: "1px solid $border-option",
   borderRadius: "$round"
 });
 const StyledPill = styled(Primitive.div, {
@@ -590,23 +590,23 @@ const StyledProhibited = styled(IconProhibit, {
 const StyledRadioItem = styled(RadixDropdownMenu.RadioItem, {
   ...itemDefaults,
   ["&[aria-checked=true] ".concat(StyledRadioContainer)]: {
-    color: "$icon-primary",
-    borderColor: "$border-primary",
+    color: "$icon-interactive-selected",
+    borderColor: "$border-interactive-selected",
     ["& ".concat(StyledPill)]: {
       display: "block",
-      backgroundColor: "$background-primary-prominent-selected"
+      backgroundColor: "$background-interactive-selected"
     }
   },
   ['&:is(:hover,[data-hovered]):not([aria-disabled="true"],[data-disabled]) '.concat(StyledRadioContainer)]: {
     ["& ".concat(StyledPill)]: {
-      backgroundColor: "$background-primary-prominent-hover"
+      backgroundColor: "$background-interactive-primary-hover"
     }
   },
   ['\n    &[aria-disabled="true"] '.concat(StyledRadioContainer, ",\n    &[data-disabled] ").concat(StyledRadioContainer, "\n  ")]: {
-    color: "$icon-neutrals-disabled",
-    borderColor: "$border-neutrals-disabled",
+    color: "$icon-disabled",
+    borderColor: "$border-disabled",
     ["& ".concat(StyledPill)]: {
-      backgroundColor: "$icon-neutrals-disabled"
+      backgroundColor: "$icon-disabled"
     }
   },
   "&[aria-checked=false]": {
@@ -616,7 +616,7 @@ const StyledRadioItem = styled(RadixDropdownMenu.RadioItem, {
   },
   ["".concat(StyledRadioContainer)]: {
     borderWidth: "2px",
-    borderColor: "$border-neutrals-controls"
+    borderColor: "$border-option"
   }
 });
 
@@ -634,7 +634,7 @@ const RadioItem = React.forwardRef(({ disabled, children, closeOnSelect = false,
 });
 
 const StyledSeparator = styled(RadixDropdownMenu.Separator, {
-  borderTop: "1px solid $border-neutrals-subtle"
+  borderTop: "1px solid $border-default"
 });
 
 const Separator = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(StyledSeparator, { ...props, ref: forwardRef }));
@@ -716,21 +716,21 @@ const Trigger = React.forwardRef(({ asChild = false, onClick, ...restProps }, fo
 });
 
 const StyledIconContainer = styled(Primitive.span, {
-  color: "$icon-neutrals-with-text",
+  color: "$icon-default",
   display: "flex",
   alignItems: "center"
 });
 const StyledSubTrigger = styled(RadixDropdownMenu.SubTrigger, {
   ...itemDefaults,
   '&[data-state="open"]': {
-    background: "$background-neutrals-hover",
-    color: "$text-neutrals-hover",
+    background: "$background-interactive-surface-hover",
+    color: "$text-default",
     '&:not([aria-disabled="true"])': {
       boxShadow: "none"
     }
   },
   ['&[data-state="open"] '.concat(StyledIconContainer, ', &:is(:hover,[data-hovered]):not([aria-disabled="true"]) ').concat(StyledIconContainer)]: {
-    color: "$icon-neutrals-hover"
+    color: "$icon-default"
   }
 });