@loadsmart/loadsmart-ui 6.0.14 → 6.0.16

package/src/theming/themes/miranda-compatibility.theme.ts

@@ -132,6 +132,7 @@ const mirandaCompatibility = {
   'button-large-height': height('large'),
   'button-large-padding-x': spacing('m'),
   'button-large-padding-y': rem('14px'),
+  'button-outline-offset': '2px',
 
   // button primary
   'button-primary-background': color('primary'),
@@ -152,28 +153,30 @@ const mirandaCompatibility = {
   'button-primary-color--active': color('neutral-white'),
   'button-primary-color--disabled': color('neutral-white'),
 
-  'button-primary-outline': shadow('glow-primary'),
+  'button-primary-outline': `1px solid ${toCSSValue('color-primary-60')}`,
+  'button-primary-box-shadow': 'none',
 
   // button secondary
   'button-secondary-background': color('transparent'),
-  'button-secondary-background--hover': toCSSValue('color-neutral-60', 0.2),
-  'button-secondary-background--focus': toCSSValue('color-neutral-60', 0.2),
-  'button-secondary-background--active': color('transparent'),
+  'button-secondary-background--hover': toCSSValue('color-background-tertiary'),
+  'button-secondary-background--focus': color('transparent'),
+  'button-secondary-background--active': toCSSValue('color-background-tertiary'),
   'button-secondary-background--disabled': color('transparent'),
 
-  'button-secondary-border-color': color('primary'),
-  'button-secondary-border-color--hover': toCSSValue('color-primary-100'),
+  'button-secondary-border-color': toCSSValue('color-primary-100'),
+  'button-secondary-border-color--hover': toCSSValue('color-primary-60'),
   'button-secondary-border-color--focus': toCSSValue('color-primary-100'),
-  'button-secondary-border-color--active': toCSSValue('color-primary-60', 0.6),
-  'button-secondary-border-color--disabled': color('primary'),
+  'button-secondary-border-color--active': toCSSValue('color-primary-60'),
+  'button-secondary-border-color--disabled': toCSSValue('color-primary-100'),
 
-  'button-secondary-color': color('primary'),
-  'button-secondary-color--hover': toCSSValue('color-primary-100'),
-  'button-secondary-color--focus': color('primary'),
-  'button-secondary-color--active': toCSSValue('color-primary-60', 0.6),
-  'button-secondary-color--disabled': color('primary'),
+  'button-secondary-color': toCSSValue('color-primary-100'),
+  'button-secondary-color--hover': toCSSValue('color-primary-60'),
+  'button-secondary-color--focus': toCSSValue('color-primary-100'),
+  'button-secondary-color--active': toCSSValue('color-primary-60'),
+  'button-secondary-color--disabled': toCSSValue('color-primary-100'),
 
-  'button-secondary-outline': shadow('glow-primary'),
+  'button-secondary-outline': `1px solid ${toCSSValue('color-primary-60')}`,
+  'button-secondary-box-shadow': 'none',
 
   // button secondary dark
   'button-secondary-dark-background': color('transparent'),
@@ -194,26 +197,49 @@ const mirandaCompatibility = {
   'button-secondary-dark-color--active': toCSSValue('color-primary-60', 0.6),
   'button-secondary-dark-color--disabled': color('neutral-light'),
 
+  // button tertiary
+  'button-tertiary-background': color('transparent'),
+  'button-tertiary-background--hover': toCSSValue('color-background-tertiary'),
+  'button-tertiary-background--focus': color('transparent'),
+  'button-tertiary-background--active': toCSSValue('color-background-tertiary'),
+  'button-tertiary-background--disabled': color('transparent'),
+
+  'button-tertiary-border-color': color('transparent'),
+  'button-tertiary-border-color--hover': toCSSValue('color-background-tertiary'),
+  'button-tertiary-border-color--focus': color('transparent'),
+  'button-tertiary-border-color--active': toCSSValue('color-background-tertiary'),
+  'button-tertiary-border-color--disabled': color('transparent'),
+
+  'button-tertiary-color': toCSSValue('color-primary-100'),
+  'button-tertiary-color--hover': toCSSValue('color-primary-60'),
+  'button-tertiary-color--focus': toCSSValue('color-primary-100'),
+  'button-tertiary-color--active': toCSSValue('color-primary-60'),
+  'button-tertiary-color--disabled': toCSSValue('color-primary-100'),
+
+  'button-tertiary-outline': `1px solid ${toCSSValue('color-primary-60')}`,
+  'button-tertiary-box-shadow': 'none',
+
   // button warning
-  'button-warning-background': color('transparent'),
-  'button-warning-background--hover': toCSSValue('color-warning-60', 0.2),
-  'button-warning-background--focus': color('transparent'),
-  'button-warning-background--active': color('transparent'),
-  'button-warning-background--disabled': color('transparent'),
-
-  'button-warning-border-color': color('warning-dark'),
-  'button-warning-border-color--hover': color('warning'),
-  'button-warning-border-color--focus': color('warning-dark'),
-  'button-warning-border-color--active': color('warning'),
-  'button-warning-border-color--disabled': color('warning-dark'),
-
-  'button-warning-color': color('warning-dark'),
-  'button-warning-color--hover': color('warning'),
-  'button-warning-color--focus': color('warning-dark'),
-  'button-warning-color--active': color('warning'),
-  'button-warning-color--disabled': color('warning-dark'),
-
-  'button-warning-outline': shadow('glow-warning'),
+  'button-warning-background': toCSSValue('color-warning-60'),
+  'button-warning-background--hover': toCSSValue('color-warning-100'),
+  'button-warning-background--focus': toCSSValue('color-warning-60'),
+  'button-warning-background--active': toCSSValue('color-warning-100'),
+  'button-warning-background--disabled': toCSSValue('color-warning-60'),
+
+  'button-warning-border-color': toCSSValue('color-warning-60'),
+  'button-warning-border-color--hover': toCSSValue('color-warning-100'),
+  'button-warning-border-color--focus': toCSSValue('color-warning-60'),
+  'button-warning-border-color--active': toCSSValue('color-warning-100'),
+  'button-warning-border-color--disabled': toCSSValue('color-warning-60'),
+
+  'button-warning-color': toCSSValue('color-text-primary'),
+  'button-warning-color--hover': toCSSValue('color-text-inverted'),
+  'button-warning-color--focus': toCSSValue('color-text-primary'),
+  'button-warning-color--active': toCSSValue('color-text-inverted'),
+  'button-warning-color--disabled': color('neutral-white'),
+
+  'button-warning-outline': `1px solid ${toCSSValue('color-warning-60')}`,
+  'button-warning-box-shadow': 'none',
 
   // button icon
   'button-icon-border-radius': border.radius('circle'),
@@ -221,82 +247,90 @@ const mirandaCompatibility = {
   'button-icon-width': height('default'),
   'button-icon-large-width': height('large'),
 
-  'button-icon-background': color('neutral-lighter'),
-  'button-icon-background--hover': color('neutral-lighter'),
-  'button-icon-background--focus': color('neutral-lighter'),
-  'button-icon-background--active': color('neutral-light'),
-  'button-icon-background--disabled': color('neutral-lighter'),
+  'button-icon-background': toCSSValue('color-background-tertiary'),
+  'button-icon-background--hover': toCSSValue('color-background-highlight'),
+  'button-icon-background--focus': toCSSValue('color-background-tertiary'),
+  'button-icon-background--active': toCSSValue('color-background-highlight'),
+  'button-icon-background--disabled': toCSSValue('color-background-tertiary'),
 
-  'button-icon-border-color': color('neutral-lighter'),
-  'button-icon-border-color--hover': color('neutral-lighter'),
-  'button-icon-border-color--focus': color('neutral-lighter'),
-  'button-icon-border-color--active': color('neutral-light'),
-  'button-icon-border-color--disabled': color('neutral-lighter'),
+  'button-icon-border-color': toCSSValue('color-background-tertiary'),
+  'button-icon-border-color--hover': toCSSValue('color-background-highlight'),
+  'button-icon-border-color--focus': toCSSValue('color-background-tertiary'),
+  'button-icon-border-color--active': toCSSValue('color-background-highlight'),
+  'button-icon-border-color--disabled': toCSSValue('color-background-tertiary'),
 
-  'button-icon-color': color('neutral-darkest'),
+  'button-icon-color': toCSSValue('color-background-secondary-inverted'),
   'button-icon-color--hover': toCSSValue('color-primary-60'),
-  'button-icon-color--focus': color('neutral-darkest'),
-  'button-icon-color--active': color('neutral-darkest'),
-  'button-icon-color--disabled': color('neutral-darkest'),
+  'button-icon-color--focus': toCSSValue('color-primary-60'),
+  'button-icon-color--active': toCSSValue('color-primary-60'),
+  'button-icon-color--disabled': toCSSValue('color-background-secondary-inverted'),
 
-  'button-icon-outline': shadow('glow-primary'),
+  'button-icon-outline': `1px solid ${toCSSValue('color-primary-60')}`,
+  'button-icon-box-shadow': 'none',
 
   // tag
   'tag-border-radius': rem('30px'),
   'tag-border-width': border.width('thin'),
-  'tag-font-weight': font.weight('bold'),
   'tag-font-height': font.height('1'),
-  'tag-spacing': `0 ${spacing('s')}`,
-  'tag-spacing-removable': `0 ${spacing('xs')} 0 ${spacing('s')}`,
+  'tag-spacing': `0 ${toCSSValue('spacing-3')}`,
+  'tag-removable-spacing': `0 ${spacing('xs')} 0 ${spacing('s')}`,
   'tag-width': 'auto',
-  'tag-outline': shadow('glow-primary'),
+  'tag-box-shadow': 'none',
+  'tag-outline-offset': '2px',
 
   'tag-remove-button-background': color('neutral-white'),
   'tag-remove-button-border-radius': rem('24px'),
   'tag-icon-spacing': spacing('xs'),
 
   // tag small
-  'tag-small-font-size': font.size('6'),
-  'tag-small-height': rem('16px'),
+  'tag-small-font-size': toCSSValue('font-size-1'),
+  'tag-small-font-weight': toCSSValue('font-weight-medium'),
+  'tag-small-height': rem('18px'),
   'tag-small-transform': 'uppercase',
   'tag-small-leading-display': 'none',
   'tag-small-remove-button-size': rem('0'),
   'tag-small-remove-button-icon-size': rem('0'),
-  'tag-small-spacing-removable': `0 ${spacing('s')}`,
+  'tag-small-spacing': `0 ${toCSSValue('spacing-2')}`,
+  'tag-small-removable-spacing': `0 ${spacing('s')}`,
 
   // tag medium
-  'tag-font-size': font.size('5'),
-  'tag-height': rem('24px'),
+  'tag-font-size': toCSSValue('font-size-2'),
+  'tag-font-weight': toCSSValue('font-weight-bold'),
+  'tag-height': rem('28px'),
   'tag-transform': 'none',
   'tag-leading-display': 'inline-flex',
   'tag-remove-button-size': rem('16px'),
   'tag-remove-button-icon-size': rem('10px'),
 
   // tag large
-  'tag-large-font-size': font.size('4'),
-  'tag-large-height': rem('32px'),
+  'tag-large-font-size': toCSSValue('font-size-4'),
+  'tag-large-font-weight': toCSSValue('font-weight-bold'),
+  'tag-large-height': rem('40px'),
   'tag-large-transform': 'none',
   'tag-large-leading-display': 'inline-flex',
   'tag-large-remove-button-size': rem('24px'),
   'tag-large-remove-button-icon-size': rem('12px'),
+  'tag-large-spacing': `0 ${toCSSValue('spacing-4')}`,
 
   // tag default
-  'tag-default-background': color('neutral-light'),
-  'tag-default-background--hover': toCSSValue('color-accent-60', 0.4),
-  'tag-default-background--focus': color('neutral-dark', 0.2),
+  'tag-default-background': toCSSValue('color-background-tertiary'),
+  'tag-default-background--hover': toCSSValue('color-background-tertiary'),
+  'tag-default-background--focus': toCSSValue('color-background-tertiary'),
 
-  'tag-default-color': color('neutral-darkest'),
+  'tag-default-color': toCSSValue('color-text-tertiary'),
   'tag-default-color--hover': color('neutral-darkest'),
   'tag-default-color--focus': color('neutral-dark'),
 
-  'tag-default-border-color': 'transparent',
-  'tag-default-border-color--hover': 'transparent',
-  'tag-default-border-color--focus': 'transparent',
+  'tag-default-border-color': toCSSValue('color-background-tertiary'),
+  'tag-default-border-color--hover': toCSSValue('color-background-tertiary'),
+  'tag-default-border-color--focus': toCSSValue('color-background-tertiary'),
+
+  'tag-default-outline': `1px solid ${toCSSValue('color-neutral-100')}`,
 
   // tag outline
   'tag-outlined-background': color('transparent'),
-  'tag-outlined-background--hover': toCSSValue('color-accent-60', 0.4),
-  'tag-outlined-background--focus': color('neutral-white'),
+  'tag-outlined-background--hover': color('transparent'),
+  'tag-outlined-background--focus': color('transparent'),
 
   'tag-outlined-color': color('neutral-darkest'),
   'tag-outlined-color--hover': color('neutral-darkest'),
@@ -306,57 +340,67 @@ const mirandaCompatibility = {
   'tag-outlined-border-color--hover': color('neutral-darkest'),
   'tag-outlined-border-color--focus': color('neutral-darker'),
 
+  'tag-outlined-outline': `1px solid ${toCSSValue('color-neutral-100')}`,
+
   // tag accent
-  'tag-accent-background': toCSSValue('color-primary-60', 0.2),
-  'tag-accent-background--hover': toCSSValue('color-primary-60', 0.4),
-  'tag-accent-background--focus': toCSSValue('color-primary-60', 0.2),
+  'tag-accent-background': toCSSValue('color-accent-20'),
+  'tag-accent-background--hover': toCSSValue('color-accent-20'),
+  'tag-accent-background--focus': toCSSValue('color-accent-20'),
 
-  'tag-accent-color': toCSSValue('color-primary-60'),
-  'tag-accent-color--hover': toCSSValue('color-primary-60'),
-  'tag-accent-color--focus': toCSSValue('color-primary-60'),
+  'tag-accent-color': toCSSValue('color-accent-60'),
+  'tag-accent-color--hover': toCSSValue('color-accent-60'),
+  'tag-accent-color--focus': toCSSValue('color-accent-60'),
 
   'tag-accent-border-color': 'transparent',
   'tag-accent-border-color--hover': 'transparent',
   'tag-accent-border-color--focus': 'transparent',
 
+  'tag-accent-outline': `1px solid ${toCSSValue('color-accent-100')}`,
+
   // tag success
-  'tag-success-background': color('success-light'),
-  'tag-success-background--hover': color('success-light'),
-  'tag-success-background--focus': color('success-light'),
+  'tag-success-background': toCSSValue('color-success-20'),
+  'tag-success-background--hover': toCSSValue('color-success-20'),
+  'tag-success-background--focus': toCSSValue('color-success-20'),
 
-  'tag-success-color': color('success-dark'),
+  'tag-success-color': toCSSValue('color-success-60'),
   'tag-success-color--hover': color('success-dark'),
   'tag-success-color--focus': color('success-dark'),
 
-  'tag-success-border-color': color('success-light'),
-  'tag-success-border-color--hover': color('success-light'),
-  'tag-success-border-color--focus': color('success-light'),
+  'tag-success-border-color': toCSSValue('color-success-20'),
+  'tag-success-border-color--hover': toCSSValue('color-success-20'),
+  'tag-success-border-color--focus': toCSSValue('color-success-20'),
+
+  'tag-success-outline': `1px solid ${toCSSValue('color-success-100')}`,
 
   // tag warning
-  'tag-warning-background': color('warning-light'),
-  'tag-warning-background--hover': color('warning-light'),
-  'tag-warning-background--focus': color('warning-light'),
+  'tag-warning-background': toCSSValue('color-warning-20'),
+  'tag-warning-background--hover': toCSSValue('color-warning-20'),
+  'tag-warning-background--focus': toCSSValue('color-warning-20'),
+
+  'tag-warning-color': toCSSValue('color-warning-100'),
+  'tag-warning-color--hover': toCSSValue('color-warning-100'),
+  'tag-warning-color--focus': toCSSValue('color-warning-100'),
 
-  'tag-warning-color': color('warning-dark'),
-  'tag-warning-color--hover': color('warning-dark'),
-  'tag-warning-color--focus': color('warning-dark'),
+  'tag-warning-border-color': toCSSValue('color-warning-20'),
+  'tag-warning-border-color--hover': toCSSValue('color-warning-20'),
+  'tag-warning-border-color--focus': toCSSValue('color-warning-20'),
 
-  'tag-warning-border-color': color('warning-light'),
-  'tag-warning-border-color--hover': color('warning-light'),
-  'tag-warning-border-color--focus': color('warning-light'),
+  'tag-warning-outline': `1px solid ${toCSSValue('color-warning-100')}`,
 
   // tag danger
-  'tag-danger-background': color('danger-light'),
-  'tag-danger-background--hover': color('danger-light'),
-  'tag-danger-background--focus': color('danger-light'),
+  'tag-danger-background': toCSSValue('color-danger-20'),
+  'tag-danger-background--hover': toCSSValue('color-danger-20'),
+  'tag-danger-background--focus': toCSSValue('color-danger-20'),
 
-  'tag-danger-color': color('danger-dark'),
-  'tag-danger-color--hover': color('danger-dark'),
-  'tag-danger-color--focus': color('danger-dark'),
+  'tag-danger-color': toCSSValue('color-danger-60'),
+  'tag-danger-color--hover': toCSSValue('color-danger-60'),
+  'tag-danger-color--focus': toCSSValue('color-danger-60'),
 
-  'tag-danger-border-color': color('danger-light'),
-  'tag-danger-border-color--hover': color('danger-light'),
-  'tag-danger-border-color--focus': color('danger-light'),
+  'tag-danger-border-color': toCSSValue('color-danger-20'),
+  'tag-danger-border-color--hover': toCSSValue('color-danger-20'),
+  'tag-danger-border-color--focus': toCSSValue('color-danger-20'),
+
+  'tag-danger-outline': `1px solid ${toCSSValue('color-danger-100')}`,
 
   // checkbox
   'checkbox-color': color('neutral-darker'),
@@ -365,7 +409,9 @@ const mirandaCompatibility = {
 
   'checkbox-selector-border-radius': border.radius('s'),
   'checkbox-selector-size': rem('16px'),
-  'checkbox-selector-outline': shadow('glow-primary'),
+  'checkbox-selector-box-shadow': 'none',
+  'checkbox-selector-outline': `1px solid ${toCSSValue('color-primary-100')}`,
+  'checkbox-selector-outline-offset': '2px',
 
   'checkbox-small-font-size': font.size('5'),
 
@@ -411,7 +457,7 @@ const mirandaCompatibility = {
 
   'radio-selector-border-radius': border.radius('circle'),
   'radio-selector-size': rem('24px'),
-  'radio-selector-outline': shadow('glow-primary'),
+  'radio-selector-box-shadow': 'none',
 
   'radio-small-font-size': font.size('5'),
   'radio-small-selector-size': rem('16px'),
@@ -479,7 +525,9 @@ const mirandaCompatibility = {
   'text-field-padding-x': spacing('s'),
   'text-field-padding-y': spacing('s'),
 
-  'text-field-outline': shadow('glow-primary'),
+  'text-field-box-shadow': 'none',
+  'text-field-outline': `1px solid ${toCSSValue('color-primary-100')}`,
+  'text-field-outline-offset': '2px',
 
   'text-field-small-height': height('small'),
   'text-field-small-padding-x': spacing('s'),
@@ -513,7 +561,7 @@ const mirandaCompatibility = {
   'text-field-success-border-color': color('accent'),
   'text-field-danger-border-color': toCSSValue('color-danger-60'),
 
-  'text-field-dark-outline': toCSSValue('color-neutral-60', 0.4),
+  'text-field-dark-box-shadow': 'none',
 
   // textarea
   'textarea-border-radius': border.radius('s'),
@@ -525,7 +573,9 @@ const mirandaCompatibility = {
   'textarea-padding-x': spacing('s'),
   'textarea-padding-y': spacing('s'),
 
-  'textarea-outline': shadow('glow-primary'),
+  'textarea-box-shadow': 'none',
+  'textarea-outline': `1px solid ${toCSSValue('color-primary-100')}`,
+  'textarea-outline-offset': '2px',
 
   'textarea-small-padding-x': spacing('s'),
   'textarea-small-padding-y': spacing('xs'),
@@ -558,7 +608,7 @@ const mirandaCompatibility = {
   'textarea-success-border-color': color('accent'),
   'textarea-danger-border-color': color('danger'),
 
-  'textarea-dark-outline': toCSSValue('color-neutral-60', 0.4),
+  'textarea-dark-box-shadow': 'none',
 
   // link
   'link-font-size': font.size('3'),
@@ -568,6 +618,10 @@ const mirandaCompatibility = {
   'link-font-weight': font.weight('medium'),
   'link-font-weight--hover': font.weight('bold'),
 
+  'link-box-shadow': 'none',
+  'link-outline': `1px solid ${toCSSValue('color-primary-100')}`,
+  'link-outline-offset': '2px',
+
   // breadcrumbs
   'breadcrumbs-font-size': font.size('2'),
   'breadcrumbs-font-height': font.height('2'),
@@ -692,7 +746,9 @@ const mirandaCompatibility = {
   'switch-height': rem('22px'),
   'switch-border-radius': rem('22px'),
 
-  'switch-outline': shadow('glow-primary'),
+  'switch-box-shadow': 'none',
+  'switch-outline': `1px solid ${toCSSValue('color-primary-100')}`,
+  'switch-outline-offset': '2px',
 
   // Switch Large
   'switch-large-width': rem('70px'),
@@ -830,11 +886,16 @@ const mirandaCompatibility = {
   'top-navigation-item-color--hover': toCSSValue('color-brand'),
 
   // Select
+  'select-trigger-height': `calc(${height('default')} - 2px)`,
+  'select-trigger-border-color': toCSSValue('color-border'),
   'select-selected-option-check-color': toCSSValue('color-primary-60'),
   'select-selected-option-background-color': toCSSValue('color-primary-60', 0.2),
 
   // Toggle & Toggle Group
   'toggle-text-transform': 'initial',
+  'toggle-box-shadow': 'none',
+  'toggle-outline': `1px solid ${toCSSValue('color-primary-100')}`,
+  'toggle-outline-offset': '2px',
   'toggle-background-color': color('transparent'),
   'toggle-background-color--hover': toCSSValue('color-background-tertiary'),
   'toggle-background-color--focus': color('transparent'),
@@ -863,8 +924,8 @@ const mirandaCompatibility = {
   'toggle-single-border-color--disabled': color('transparent'),
   'toggle-single-checked-border-color': toCSSValue('color-primary-20'),
   'toggle-single-checked-border-color--disabled': toCSSValue('color-primary-20'),
-  'toggle-single-font-size': toCSSValue('font-size-4'),
-  'toggle-single-small-font-size': '10px',
+  'toggle-single-font-size': toCSSValue('font-size-3'),
+  'toggle-single-small-font-size': toCSSValue('font-size-2'),
   'toggle-single-height': '30px',
   'toggle-single-small-height': '18px',
 
@@ -875,8 +936,8 @@ const mirandaCompatibility = {
   'toggle-multiple-border-color--disabled': color('transparent'),
   'toggle-multiple-checked-border-color': toCSSValue('color-primary-20'),
   'toggle-multiple-checked-border-color--disabled': toCSSValue('color-primary-20'),
-  'toggle-multiple-font-size': toCSSValue('font-size-4'),
-  'toggle-multiple-small-font-size': font.size('5'),
+  'toggle-multiple-font-size': toCSSValue('font-size-3'),
+  'toggle-multiple-small-font-size': toCSSValue('font-size-2'),
   'toggle-multiple-height': '30px',
   'toggle-multiple-small-height': '18px',
 
@@ -895,10 +956,17 @@ const mirandaCompatibility = {
   'toggle-group-single-padding': toCSSValue('spacing-1'),
 
   // dropdown
+  'dropdown-trigger-border-color': toCSSValue('color-border'),
+  'dropdown-trigger-dark-border-color': toCSSValue('color-border'),
+  'dropdown-trigger-outlined-border-color': color('transparent'),
   'dropdown-trigger-expanded-color': toCSSValue('color-primary-60'),
-  'dropdown-trigger-height': height('default'),
-  'dropdown-trigger-small-height': height('small'),
-  'dropdown-trigger-large-height': height('large'),
+  'dropdown-trigger-height': `calc(${height('default')} - 2px)`,
+  'dropdown-trigger-small-height': `calc(${height('small')} - 2px)`,
+  'dropdown-trigger-large-height': `calc(${height('large')} - 2px)`,
+
+  'dropdown-trigger-box-shadow': 'none',
+  'dropdown-trigger-outline': `1px solid ${toCSSValue('color-primary-100')}`,
+  'dropdown-trigger-outline-offset': '2px',
 }
 
 export default mirandaCompatibility