@laerdal/life-react-components 6.0.0-dev.1.full → 6.0.0-dev.10.full

package/dist/Dropdown/CommonStyling.js

@@ -23,54 +23,99 @@ export const DropdownContainer = styled.div`
   }
 
   input:hover + div {
-    color: ${props => COLORS.getColor('primary_600', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'hover'
+}, props.theme)};
   }
 
   input:active + div {
-    color: ${props => COLORS.getColor('primary_800', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'active'
+}, props.theme)};
   }
 
 
 `;
 const lockedState = css`
-  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};
-  box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('neutral_300', props.theme)};
-  color: ${props => COLORS.getColor('neutral_600', props.theme)};
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'disabled'
+}, props.theme)};
+  box-shadow: inset 0px 0px 0px 1px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)};
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
   pointer-events: none;
   cursor: not-allowed;
 
   input {
-    color: ${props => COLORS.getColor('neutral_600', props.theme)} !important;
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)} !important;
   }
 
   .dropdown-arrow {
-    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;
+    color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)} !important;
   }
 `;
 const disabledState = css`
-  background-color: ${props => COLORS.getColor('white', props.theme)};
-  box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('neutral_100', props.theme)};
-  color: ${props => COLORS.getColor('neutral_300', props.theme)};
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'disabled'
+}, props.theme)};
+  box-shadow: inset 0px 0px 0px 1px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
   pointer-events: none;
   cursor: not-allowed;
 
   .dropdown-arrow {
-    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;
+    color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)} !important;
   }
 
   input {
-    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)} !important;
 
     ::placeholder {
-      color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)} !important;
     }
   }
 `;
 const activeValidationMessage = css`
-  box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('critical_400', props.theme)};
+  box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'critical'
+}, props.theme)};
 `;
 const placeholderStyling = css`
-  ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}
+  ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
 `;
 export const DropdownInputField = styled.input`
   border: none;
@@ -78,7 +123,10 @@ export const DropdownInputField = styled.input`
   background-color: inherit;
   cursor: pointer;
   min-width: 0px;
-  color: ${props => COLORS.getColor('black', props.theme)} !important;
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme)} !important;
   padding: 0;
   flex-grow: 1;
   display: flex;
@@ -87,7 +135,10 @@ export const DropdownInputField = styled.input`
   ${props => props.$ellipsis ? 'text-overflow: ellipsis;' : ''}
   
   &::placeholder {
-    color: ${props => COLORS.getColor('neutral_600', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
     font-style: italic;
   }
 
@@ -106,8 +157,14 @@ export const DropdownInputFieldStyles = styled.div`
   min-width: ${props => props.$minWidth ? `${props.$minWidth}` : '344px'};
   width: 100%;
 
-  background: ${props => COLORS.getColor('white', props.theme)};
-  box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('neutral_400', props.theme)};
+  background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
+  box-shadow: inset 0px 0px 0px 1px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   box-sizing: border-box;
   border-radius: 4px;
   cursor: pointer;
@@ -126,7 +183,10 @@ export const DropdownInputFieldStyles = styled.div`
   ${TooltipTrigger('hover')}
 
   &::placeholder {
-    ${props => ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}
+    ${props => ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 
   ${BREAKPOINTS.MEDIUM} {
@@ -135,7 +195,10 @@ export const DropdownInputFieldStyles = styled.div`
     height: 56px;
 
     &::placeholder {
-      ${props => ComponentXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}
+      ${props => ComponentXSStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
@@ -145,7 +208,10 @@ export const DropdownInputFieldStyles = styled.div`
     height: 48px;
 
     &::placeholder {
-      ${props => ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}
+      ${props => ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
@@ -155,7 +221,10 @@ export const DropdownInputFieldStyles = styled.div`
     padding: 16px;
 
     &::placeholder {
-      ${props => ComponentXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}
+      ${props => ComponentXSStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
@@ -163,7 +232,10 @@ export const DropdownInputFieldStyles = styled.div`
     pointer-events: none;
     width: 24px;
     height: 24px;
-    color: ${props => props.$isPlaceholder ? COLORS.getColor('neutral_600', props.theme) : undefined};
+    color: ${props => props.$isPlaceholder ? COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme) : undefined};
   }
 
   &:focus {
@@ -172,41 +244,69 @@ export const DropdownInputFieldStyles = styled.div`
 
   &:focus-within,
   &.focus-visible-within {
-    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};
+    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'active',
+  defaultVariant: 'primary'
+}, props.theme)};
   }
 
   &:hover:not(.action-within) {
-    box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('primary_200', props.theme)};
+    box-shadow: inset 0px 0px 0px 1px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
 
     input {
       ::placeholder {
-        color: ${props => COLORS.getColor('primary_600', props.theme)};
+        color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
       }
     }
 
     .dropdown-arrow {
-      color: ${props => COLORS.getColor('primary_600', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'hover'
+}, props.theme)};
     }
 
     cursor: pointer;
   }
 
   &:active:not(.action-within) {
-    box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('primary_300', props.theme)};
+    box-shadow: inset 0px 0px 0px 1px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'active'
+}, props.theme)};
 
     input {
       ::placeholder {
-        color: ${props => COLORS.getColor('primary_800', props.theme)};
+        color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
       }
     }
 
     .dropdown-arrow {
-      color: ${props => COLORS.getColor('primary_800', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'active'
+}, props.theme)};
     }
   }
 
   &.button {
-    ${props => ComponentSStyling(ComponentTextStyle.Bold, props.$disabled ? COLORS.getColor('neutral_300', props.theme) : COLORS.getColor('neutral_600', props.theme))}
+    ${props => ComponentSStyling(ComponentTextStyle.Bold, props.$disabled ? COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme) : COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
 
     box-sizing: border-box;
     height: 32px;
@@ -218,8 +318,14 @@ export const DropdownInputFieldStyles = styled.div`
     border-radius: 4px;
 
     &.expanded {
-      color: ${props => COLORS.getColor('neutral_800', props.theme)};
-      background: ${props => COLORS.getColor('neutral_20', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
+      background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
     }
   }
 
@@ -273,13 +379,22 @@ export const DropdownButtonTextWrapper = styled.div`
   width: fit-content;
   cursor: pointer;
 
-  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}
+  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
 
   .expanded {
-    color: ${props => COLORS.getColor('neutral_800', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme)};
 
     ${DropdownButtonTextContent} {
-      background: ${props => COLORS.getColor('neutral_20', props.theme)};
+      background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'selected'
+}, props.theme)};
     }
   }
 
@@ -289,21 +404,36 @@ export const DropdownButtonTextWrapper = styled.div`
 
   &:hover:not(.disabled) {
     ${DropdownButtonTextContent} {
-      background-color: ${props => COLORS.getColor('primary_20', props.theme)};
-      color: ${props => COLORS.getColor('primary_700', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
     }
   }
 
   &:active:not(.disabled) {
     ${DropdownButtonTextContent} {
-      background-color: ${props => COLORS.getColor('primary_100', props.theme)};
-      color: ${props => COLORS.getColor('primary_800', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
     }
   }
 
   &.disabled {
     cursor: not-allowed;
-    color: ${props => COLORS.getColor('neutral_300', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
   }
 
 }`;

package/dist/Dropdown/CommonStyling.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommonStyling.js","names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Z_INDEXES","TooltipTrigger","DropdownContainer","div","props","$isButton","minWidth","$readOnly","$disabled","margin","focus","getColor","theme","lockedState","disabledState","activeValidationMessage","placeholderStyling","Italic","DropdownInputField","input","$ellipsis","DropdownInputFieldStyles","Regular","$minWidth","MEDIUM","$isPlaceholder","undefined","Bold","$showValidationMessage","dropdown","DropdownContentButtonStyling","DropdownButtonTextContent","DropdownButtonTextIcon","DropdownButtonTextArrow","DropdownButtonTextStyles","DropdownButtonTextWrapper"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\r\nimport {CommonInteractionStyling} from '../common';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\n\r\nexport const DropdownContainer = styled.div<{ $isButton: boolean; $readOnly?: boolean; $disabled?: boolean; margin?: string; minWidth?: string }>`\r\n  display: inline-block;\r\n\r\n  ${(props) => !props.$isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\r\n  ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')}\r\n  ${(props) => (props.margin ? `margin: ${props.margin};` : 'margin-bottom: 4px;')}\r\n  .show {\r\n    display: block;\r\n  }\r\n\r\n  .value {\r\n    flex-grow: 1;\r\n  }\r\n\r\n  &:focus-within {\r\n    z-index: ${Z_INDEXES.focus};\r\n  }\r\n\r\n  input:hover + div {\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n  }\r\n\r\n  input:active + div {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n\r\n`;\r\n\r\nconst lockedState = css`\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('neutral_300', props.theme)};\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n\r\n  input {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)} !important;\r\n  }\r\n\r\n  .dropdown-arrow {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n`;\r\n\r\nconst disabledState = css`\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n\r\n  .dropdown-arrow {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n\r\n  input {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n\r\n    ::placeholder {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    }\r\n  }\r\n`;\r\n\r\nconst activeValidationMessage = css`\r\n  box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n`;\r\n\r\nconst placeholderStyling = css`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nexport const DropdownInputField = styled.input<{$ellipsis?: boolean}>`\r\n  border: none;\r\n  outline: none;\r\n  background-color: inherit;\r\n  cursor: pointer;\r\n  min-width: 0px;\r\n  color: ${props => COLORS.getColor('black', props.theme)} !important;\r\n  padding: 0;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n  ${props => props.$ellipsis ? 'text-overflow: ellipsis;' : ''}\r\n  \r\n  &::placeholder {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n    font-style: italic;\r\n  }\r\n\r\n  &::-webkit-search-decoration,\r\n  &::-webkit-search-cancel-button,\r\n  &::-webkit-search-results-button,\r\n  &::-webkit-search-results-decoration {\r\n    -webkit-appearance: none;\r\n  }\r\n`;\r\n\r\nexport const DropdownInputFieldStyles = styled.div<{ $disabled: boolean; $readOnly: boolean; $showValidationMessage?: boolean; $isPlaceholder?: boolean; $minWidth?: string }>`\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n\r\n  padding: 12px 16px;\r\n  height: 48px;\r\n  min-width: ${(props) => (props.$minWidth ? `${props.$minWidth}` : '344px')};\r\n  width: 100%;\r\n\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  box-sizing: border-box;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  position: relative;\r\n\r\n  input {\r\n    font-size: inherit;\r\n    line-height: inherit;\r\n    color: inherit;\r\n  }\r\n\r\n  ${TooltipTrigger('hover')}\r\n\r\n  &::placeholder {\r\n    ${props => ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    padding: 16px;\r\n    height: 56px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    padding: 12px 16px;\r\n    height: 48px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    height: 56px;\r\n    padding: 16px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentXSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  .dropdown-arrow {\r\n    pointer-events: none;\r\n    width: 24px;\r\n    height: 24px;\r\n    color: ${(props) => props.$isPlaceholder ? COLORS.getColor('neutral_600', props.theme) : undefined};\r\n  }\r\n\r\n  &:focus {\r\n    outline: 3px solid #ddd;\r\n  }\r\n\r\n  &:focus-within,\r\n  &.focus-visible-within {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:hover:not(.action-within) {\r\n    box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('primary_200', props.theme)};\r\n\r\n    input {\r\n      ::placeholder {\r\n        color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n      }\r\n    }\r\n\r\n    .dropdown-arrow {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n\r\n    cursor: pointer;\r\n  }\r\n\r\n  &:active:not(.action-within) {\r\n    box-shadow: inset 0px 0px 0px 1px ${props => COLORS.getColor('primary_300', props.theme)};\r\n\r\n    input {\r\n      ::placeholder {\r\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n\r\n    .dropdown-arrow {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.button {\r\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.$disabled ? COLORS.getColor('neutral_300', props.theme) : COLORS.getColor('neutral_600', props.theme))}\r\n\r\n    box-sizing: border-box;\r\n    height: 32px;\r\n    padding: 0 8px;\r\n    width: initial;\r\n    min-width: initial;\r\n    border: none !important;\r\n    box-shadow: none;\r\n    border-radius: 4px;\r\n\r\n    &.expanded {\r\n      color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    }\r\n  }\r\n\r\n\r\n  ${(props) => (props.$disabled ? disabledState : '')}\r\n  ${(props) => (props.$readOnly ? lockedState : '')}\r\n  ${(props) => (props.$showValidationMessage ? activeValidationMessage : '')}\r\n  ${(props) => (props.$isPlaceholder ? placeholderStyling : '')}\r\n\r\n  ${CommonInteractionStyling};\r\n\r\n  &.focus-visible,\r\n  &.focus-visible-within {\r\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport const DropdownContentButtonStyling = css`\r\n  min-width: 344px;\r\n`;\r\n\r\n\r\n\r\nexport const DropdownButtonTextContent = styled.div`\r\n  display: flex;\r\n  gap: 4px;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  min-width: 64px;\r\n  min-height: 32px;\r\n  padding: 4px 8px;\r\n  border-radius: 4px;\r\n`;\r\n\r\nexport const DropdownButtonTextIcon = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n`;\r\n\r\nexport const DropdownButtonTextArrow = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n\r\n  svg {\r\n    pointer-events: none;\r\n  }\r\n`;\r\n\r\nexport const DropdownButtonTextStyles = styled.div`\r\n  flex: 1\r\n`;\r\n\r\nexport const DropdownButtonTextWrapper = styled.div`\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  cursor: pointer;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n  .expanded {\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n    ${DropdownButtonTextContent} {\r\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    ${DropdownButtonTextContent} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\r\n    ${DropdownButtonTextContent} {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n  }\r\n\r\n}`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CommonStyling.js","names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Z_INDEXES","TooltipTrigger","DropdownContainer","div","props","$isButton","minWidth","$readOnly","$disabled","margin","focus","generateToken","componentType","state","theme","lockedState","defaultVariant","disabledState","activeValidationMessage","placeholderStyling","Italic","DropdownInputField","input","$ellipsis","DropdownInputFieldStyles","Regular","$minWidth","MEDIUM","$isPlaceholder","undefined","Bold","$showValidationMessage","dropdown","DropdownContentButtonStyling","DropdownButtonTextContent","DropdownButtonTextIcon","DropdownButtonTextArrow","DropdownButtonTextStyles","DropdownButtonTextWrapper"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\r\nimport {CommonInteractionStyling} from '../common';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\n\r\nexport const DropdownContainer = styled.div<{ $isButton: boolean; $readOnly?: boolean; $disabled?: boolean; margin?: string; minWidth?: string }>`\r\n  display: inline-block;\r\n\r\n  ${(props) => !props.$isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\r\n  ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')}\r\n  ${(props) => (props.margin ? `margin: ${props.margin};` : 'margin-bottom: 4px;')}\r\n  .show {\r\n    display: block;\r\n  }\r\n\r\n  .value {\r\n    flex-grow: 1;\r\n  }\r\n\r\n  &:focus-within {\r\n    z-index: ${Z_INDEXES.focus};\r\n  }\r\n\r\n  input:hover + div {\r\n    color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover' }, props.theme)};\r\n  }\r\n\r\n  input:active + div {\r\n    color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'active' }, props.theme)};\r\n  }\r\n\r\n\r\n`;\r\n\r\nconst lockedState = css`\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'disabled' }, props.theme)};\r\n  box-shadow: inset 0px 0px 0px 1px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'default' }, props.theme)};\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'subtle'}, props.theme)};\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n\r\n  input {\r\n    color: ${props => COLORS.generateToken({ componentType:'text', defaultVariant:'subtle' }, props.theme)} !important;\r\n  }\r\n\r\n  .dropdown-arrow {\r\n    color: ${props => COLORS.generateToken({ componentType: 'icon', state:'disabled' }, props.theme)} !important;\r\n  }\r\n`;\r\n\r\nconst disabledState = css`\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'disabled' }, props.theme)};\r\n  box-shadow: inset 0px 0px 0px 1px ${props => COLORS.generateToken({ componentType: 'border', state: 'disabled' }, props.theme)};\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n\r\n  .dropdown-arrow {\r\n    color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)} !important;\r\n  }\r\n\r\n  input {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)} !important;\r\n\r\n    ::placeholder {\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)} !important;\r\n    }\r\n  }\r\n`;\r\n\r\nconst activeValidationMessage = css`\r\n  box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({ componentType:'border', defaultVariant:'critical' }, props.theme)};\r\n`;\r\n\r\nconst placeholderStyling = css`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({ componentType:'text', defaultVariant:'subtle' }, props.theme))}\r\n`;\r\n\r\nexport const DropdownInputField = styled.input<{$ellipsis?: boolean}>`\r\n  border: none;\r\n  outline: none;\r\n  background-color: inherit;\r\n  cursor: pointer;\r\n  min-width: 0px;\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme)} !important;\r\n  padding: 0;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n  ${props => props.$ellipsis ? 'text-overflow: ellipsis;' : ''}\r\n  \r\n  &::placeholder {\r\n    color: ${props => COLORS.generateToken({ componentType:'text', defaultVariant:'subtle' }, props.theme)};\r\n    font-style: italic;\r\n  }\r\n\r\n  &::-webkit-search-decoration,\r\n  &::-webkit-search-cancel-button,\r\n  &::-webkit-search-results-button,\r\n  &::-webkit-search-results-decoration {\r\n    -webkit-appearance: none;\r\n  }\r\n`;\r\n\r\nexport const DropdownInputFieldStyles = styled.div<{ $disabled: boolean; $readOnly: boolean; $showValidationMessage?: boolean; $isPlaceholder?: boolean; $minWidth?: string }>`\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n\r\n  padding: 12px 16px;\r\n  height: 48px;\r\n  min-width: ${(props) => (props.$minWidth ? `${props.$minWidth}` : '344px')};\r\n  width: 100%;\r\n\r\n  background: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'default' }, props.theme)};\r\n  box-shadow: inset 0px 0px 0px 1px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'subtle' }, props.theme)};\r\n  box-sizing: border-box;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  position: relative;\r\n\r\n  input {\r\n    font-size: inherit;\r\n    line-height: inherit;\r\n    color: inherit;\r\n  }\r\n\r\n  ${TooltipTrigger('hover')}\r\n\r\n  &::placeholder {\r\n    ${props => ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    padding: 16px;\r\n    height: 56px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentXSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    padding: 12px 16px;\r\n    height: 48px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    height: 56px;\r\n    padding: 16px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentXSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  .dropdown-arrow {\r\n    pointer-events: none;\r\n    width: 24px;\r\n    height: 24px;\r\n    color: ${(props) => props.$isPlaceholder ? COLORS.generateToken({componentType:'icon',defaultVariant:'subtle'}, props.theme) : undefined};\r\n  }\r\n\r\n  &:focus {\r\n    outline: 3px solid #ddd;\r\n  }\r\n\r\n  &:focus-within,\r\n  &.focus-visible-within {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType:'border', state: 'active', defaultVariant:'primary'}, props.theme)};\r\n  }\r\n\r\n  &:hover:not(.action-within) {\r\n    box-shadow: inset 0px 0px 0px 1px ${props => COLORS.generateToken({ componentType: 'border', state: 'hover' }, props.theme)};\r\n\r\n    input {\r\n      ::placeholder {\r\n        color: ${props => COLORS.generateToken({ componentType: 'text', state: 'hover' }, props.theme)};\r\n      }\r\n    }\r\n\r\n    .dropdown-arrow {\r\n      color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover' }, props.theme)};\r\n    }\r\n\r\n    cursor: pointer;\r\n  }\r\n\r\n  &:active:not(.action-within) {\r\n    box-shadow: inset 0px 0px 0px 1px ${props => COLORS.generateToken({ componentType: 'border', state: 'active' }, props.theme)};\r\n\r\n    input {\r\n      ::placeholder {\r\n        color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, props.theme)};\r\n      }\r\n    }\r\n\r\n    .dropdown-arrow {\r\n      color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'active' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.button {\r\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, \r\n      props.$disabled ? COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme) : COLORS.generateToken({ componentType:'text', defaultVariant:'subtle' }, props.theme))}\r\n\r\n    box-sizing: border-box;\r\n    height: 32px;\r\n    padding: 0 8px;\r\n    width: initial;\r\n    min-width: initial;\r\n    border: none !important;\r\n    box-shadow: none;\r\n    border-radius: 4px;\r\n\r\n    &.expanded {\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, props.theme)};\r\n      background: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n    }\r\n  }\r\n\r\n\r\n  ${(props) => (props.$disabled ? disabledState : '')}\r\n  ${(props) => (props.$readOnly ? lockedState : '')}\r\n  ${(props) => (props.$showValidationMessage ? activeValidationMessage : '')}\r\n  ${(props) => (props.$isPlaceholder ? placeholderStyling : '')}\r\n\r\n  ${CommonInteractionStyling};\r\n\r\n  &.focus-visible,\r\n  &.focus-visible-within {\r\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport const DropdownContentButtonStyling = css`\r\n  min-width: 344px;\r\n`;\r\n\r\n\r\n\r\nexport const DropdownButtonTextContent = styled.div`\r\n  display: flex;\r\n  gap: 4px;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  min-width: 64px;\r\n  min-height: 32px;\r\n  padding: 4px 8px;\r\n  border-radius: 4px;\r\n`;\r\n\r\nexport const DropdownButtonTextIcon = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n`;\r\n\r\nexport const DropdownButtonTextArrow = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n\r\n  svg {\r\n    pointer-events: none;\r\n  }\r\n`;\r\n\r\nexport const DropdownButtonTextStyles = styled.div`\r\n  flex: 1\r\n`;\r\n\r\nexport const DropdownButtonTextWrapper = styled.div`\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  cursor: pointer;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n\r\n  .expanded {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme)};\r\n\r\n    ${DropdownButtonTextContent} {\r\n      background: ${props => COLORS.generateToken({componentType: 'bg-surface', defaultVariant: 'selected'}, props.theme)};\r\n    }\r\n  }\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    ${DropdownButtonTextContent} {\r\n      background-color: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'hover'}, props.theme)};\r\n      color: ${props => COLORS.generateToken({componentType: 'text', state: 'hover'}, props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\r\n    ${DropdownButtonTextContent} {\r\n      background-color: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'active'}, props.theme)};\r\n      color: ${props => COLORS.generateToken({componentType: 'text', state: 'active'}, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n  }\r\n\r\n}`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Dropdown/DropdownContent.cjs

@@ -24,7 +24,10 @@ const DropdownContentContainer = exports.DropdownContentContainer = _styledCompo
   display: none;
   pointer-events: auto;
   position: absolute;
-  background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+  background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
 
   z-index: ${_zIndexes.Z_INDEXES.dropdown};
   margin: ${props => props.$isButton ? '-4px' : '4px 0px'};
@@ -60,7 +63,6 @@ const DropdownContentContainer = exports.DropdownContentContainer = _styledCompo
 
   ${props => props.$isButton ? _CommonStyling.DropdownContentButtonStyling : ''};
 
-  border: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
   box-sizing: border-box;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
   padding: 4px 0px;
@@ -117,18 +119,36 @@ const DropdownContentMenuContentContainer = _styledComponents.default.div`
   h3 {
     margin-block-start: 0px;
     margin-block-end: 0px;
-    ${props => props.$size == _types.Size.Large && (0, _typography.ComponentXLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_500', props.theme))}
-    ${props => props.$size == _types.Size.Medium && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_500', props.theme))}
-    ${props => (props.$size == _types.Size.Small || !props.$size) && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_500', props.theme))}
+    ${props => props.$size == _types.Size.Large && (0, _typography.ComponentXLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
+    ${props => props.$size == _types.Size.Medium && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
+    ${props => (props.$size == _types.Size.Small || !props.$size) && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     padding: ${props => props.$size == _types.Size.Small || !props.$size ? '10px 16px 6px' : props.$size == _types.Size.Medium ? '16px 24px 8px' : '16px 32px 8px'};
   }
 
   p {
     margin-block-start: 0px;
     margin-block-end: 0px;
-    ${props => props.$size == _types.Size.Large && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_500', props.theme))}
-    ${props => props.$size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_500', props.theme))}
-    ${props => (props.$size == _types.Size.Small || !props.$size) && (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_500', props.theme))}
+    ${props => props.$size == _types.Size.Large && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
+    ${props => props.$size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
+    ${props => (props.$size == _types.Size.Small || !props.$size) && (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     padding: ${props => props.$size == _types.Size.Small || !props.$size ? '8px 16px' : props.$size == _types.Size.Medium ? '12px 24px' : '16px 32px'};
   }
 `;
@@ -144,12 +164,18 @@ const DividerContainer = _styledComponents.default.div`
 `;
 const DropdownContentTopItemContainer = _styledComponents.default.div`
   border-bottom-style: solid;
-  border-bottom-color: ${props => _styles.COLORS.getColor('neutral_200', props.theme)};
+  border-bottom-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   border-bottom-width: 1px;
   margin-right: 22px;
 `;
 const DropdownContentActionButtonContainer = _styledComponents.default.div`
-  ${props => props.$scrollable ? `border-top: 1px solid  ${_styles.COLORS.getColor('neutral_200', props.theme)};` : ''}
+  ${props => props.$scrollable ? `border-top: 1px solid  ${_styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};` : ''}
   ${props => props.$scrollable ? 'margin-top: 4px;' : ''}
 
   padding: ${props => props.$size === _types.Size.Small || !props.$size ? '4px 16px 0px' : props.$size === _types.Size.Medium ? '12px 16px 8px' : '16px 16px 12px'};