@loadsmart/loadsmart-ui 6.0.15 → 6.0.16

package/src/components/Dropdown/DropdownTrigger.tsx

@@ -64,6 +64,8 @@ const TriggerButton = styled(
 
   border: none;
 
+  height: ${token('dropdown-trigger-height')};
+
   text-transform: ${conditional({
     capitalize: whenProps({ outlined: false, variant: 'tertiary' }),
     uppercase: whenProps({ outlined: true }),
@@ -159,21 +161,15 @@ const DropdownTriggerWrapper = styled.div<DropdownTriggerWrapperProps>`
   border-width: ${token('button-border-width')};
   border-style: solid;
   border-color: ${conditional({
-    'button-secondary-border-color': whenProps({ scheme: 'light', $outlined: true }),
-    'button-secondary-dark-border-color': whenProps({ scheme: 'dark', $outlined: true }),
-    'color-transparent': whenProps({ $outlined: false }),
+    'dropdown-trigger-border-color': whenProps({ scheme: 'light', $outlined: true }),
+    'dropdown-trigger-dark-border-color': whenProps({ scheme: 'dark', $outlined: true }),
+    'dropdown-trigger-outlined-border-color': whenProps({ $outlined: false }),
   })};
 
   font-size: ${token('font-size-4')};
 
   color: ${token('color-neutral-darker')};
 
-  height: ${conditional({
-    'dropdown-trigger-height': whenProps({ $scale: 'default' }),
-    'dropdown-trigger-small-height': whenProps({ $scale: 'small' }),
-    'dropdown-trigger-large-height': whenProps({ $scale: 'large' }),
-  })};
-
   box-sizing: border-box;
 
   flex: 1;
@@ -210,7 +206,9 @@ const DropdownTriggerWrapper = styled.div<DropdownTriggerWrapperProps>`
       'color-transparent': whenProps({ $outlined: false }),
     })};
 
-      box-shadow: ${conditional({ 'shadow-glow-primary': whenProps({ $outlined: true }) })};
+    box-shadow: ${conditional({ 'dropdown-trigger-box-shadow': whenProps({ $outlined: true }) })};
+    outline: ${token('dropdown-trigger-outline')};
+    outline-offset: ${token('dropdown-trigger-outline-offset')};
   `}
 
   ${activatable`
@@ -231,7 +229,7 @@ const TriggerHandle = styled(BaseButton)`
   border-radius: 0 ${token('border-radius-s')} ${token('border-radius-s')} 0;
   border: none;
 
-  height: calc(100% - 2px);
+  height: ${token('dropdown-trigger-height')};
 `
 
 const RotatableIcon = styled(DefaultIcon)<{ $rotate: boolean }>`

package/src/components/Link/Link.tsx

@@ -8,6 +8,7 @@ import font from 'styles/font'
 import transition from 'styles/transition'
 import ellipsizable from 'styles/ellipsizable'
 import hoverable from 'styles/hoverable'
+import focusable from 'styles/focusable'
 import disableable from 'styles/disableable'
 import { getToken as token } from 'theming'
 
@@ -37,11 +38,19 @@ const StyledBaseAnchor = styled.a`
 
   min-height: 24px;
 
+  border-radius: ${token('border-radius-s')};
+
   ${hoverable`
     text-decoration: underline;
     font-weight: ${token('link-font-weight--hover')};
   `}
 
+  ${focusable`
+    box-shadow: ${token('link-box-shadow')};
+    outline: ${token('link-outline')};
+    outline-offset: ${token('link-outline-offset')};
+  `}
+
   ${disableable``}
 
   ${({ children }) =>

package/src/components/Radio/Radio.tsx

@@ -112,7 +112,7 @@ const Selector = styled.input<SelectionStyleProps>`
       'radio-dark-selector-border-color--focus': whenProps({ scheme: 'dark' }),
     })};
 
-    box-shadow: ${token('radio-selector-outline')};
+    box-shadow: ${token('radio-selector-box-shadow')};
   `}
 `
 

package/src/components/Select/SelectTrigger.tsx

@@ -24,7 +24,7 @@ const SelectTriggerSearchField = styled(TextField)`
   border: none;
   border-radius: ${token('border-radius-s')} 0 0 ${token('border-radius-s')};
 
-  height: 100%;
+  height: ${token('select-trigger-height')};
 
   flex: 1;
 

package/src/components/Switch/Switch.tsx

@@ -64,7 +64,9 @@ const SwitchWrapper = styled.label<WithAdditionalProps>`
   `}
 
   ${focusable`
-    box-shadow: ${token('switch-outline')}
+    box-shadow: ${token('switch-box-shadow')};
+    outline: ${token('switch-outline')};
+    outline-offset: ${token('switch-outline-offset')};
   `}
 
   ${disableable``}

package/src/components/Tag/Tag.tsx

@@ -80,9 +80,14 @@ const StyledSpan = styled.span<TagProps>`
   })};
 
   padding: ${conditional({
-    'tag-spacing': whenProps({ removable: (removable) => !removable }),
-    'tag-spacing-removable': whenProps([{ size: (size) => size !== 'small', removable: true }]),
-    'tag-small-spacing-removable': whenProps([{ size: 'small', removable: true }]),
+    'tag-small-spacing': whenProps({ size: 'small', removable: (removable) => !removable }),
+    'tag-spacing': whenProps({
+      size: (size) => !['small', 'large'].includes(size ?? ''),
+      removable: (removable) => !removable,
+    }),
+    'tag-large-spacing': whenProps({ size: 'large', removable: (removable) => !removable }),
+    'tag-removable-spacing': whenProps([{ size: (size) => size !== 'small', removable: true }]),
+    'tag-small-removable-spacing': whenProps([{ size: 'small', removable: true }]),
   })};
 
   min-width: ${token('tag-width')};
@@ -92,6 +97,12 @@ const StyledSpan = styled.span<TagProps>`
     'tag-large-height': whenProps({ size: 'large' }),
   })};
 
+  font-weight: ${conditional({
+    'tag-font-weight': whenProps({ size: 'default' }),
+    'tag-small-font-weight': whenProps({ size: 'small' }),
+    'tag-large-font-weight': whenProps({ size: 'large' }),
+  })};
+
   color: ${conditional({
     'tag-default-color': whenProps({ variant: 'default' }),
     'tag-outlined-color': whenProps({ variant: 'outlined' }),
@@ -223,7 +234,16 @@ const StyledSpan = styled.span<TagProps>`
       'tag-warning-background--focus': whenProps({ variant: 'warning' }),
       'tag-danger-background--focus': whenProps({ variant: 'danger' }),
     })};
-    box-shadow: ${token('tag-outline')};
+    box-shadow: ${token('tag-box-shadow')};
+    outline: ${conditional({
+      'tag-default-outline': whenProps({ variant: 'default' }),
+      'tag-outlined-outline': whenProps({ variant: 'outlined' }),
+      'tag-accent-outline': whenProps({ variant: 'accent' }),
+      'tag-success-outline': whenProps({ variant: 'success' }),
+      'tag-warning-outline': whenProps({ variant: 'warning' }),
+      'tag-danger-outline': whenProps({ variant: 'danger' }),
+    })};
+    outline-offset: ${token('tag-outline-offset')};
   `}
 
   ${disableable`

package/src/components/TextField/TextField.tsx

@@ -96,9 +96,12 @@ const InputWrapper = styled.div<WithAdditionalProps>`
     })};
 
     box-shadow: ${conditional({
-      'text-field-outline': whenProps({ scheme: 'light' }),
-      'text-field-dark-outline': whenProps({ scheme: 'dark' }),
+      'text-field-box-shadow': whenProps({ scheme: 'light' }),
+      'text-field-dark-box-shadow': whenProps({ scheme: 'dark' }),
     })};
+
+    outline: ${token('text-field-outline')};
+    outline-offset: ${token('text-field-outline-offset')};
   `}
 
   ${disableable()}

package/src/components/Textarea/Textarea.tsx

@@ -93,9 +93,12 @@ const TextareaWrapper = styled.div<WithAdditionalProps>`
     })};
 
     box-shadow: ${conditional({
-      'textarea-outline': whenProps({ scheme: 'light' }),
-      'textarea-dark-outline': whenProps({ scheme: 'dark' }),
+      'textarea-box-shadow': whenProps({ scheme: 'light' }),
+      'textarea-dark-box-shadow': whenProps({ scheme: 'dark' }),
     })};
+
+    outline: ${token('textarea-outline')};
+    outline-offset: ${token('textarea-outline-offset')};
   `}
 
   ${disableable()}

package/src/components/ToggleGroup/Toggle.tsx

@@ -68,7 +68,9 @@ const ToggleButton = styled(BaseButton)<{ $type: ToggleGroupType }>`
       'toggle-checked-color--focus': whenProps({ 'aria-checked': true }),
     })};
 
-    box-shadow: ${token('button-primary-outline')};
+    box-shadow: ${token('toggle-box-shadow')};
+    outline: ${token('toggle-outline')};
+    outline-offset: ${token('toggle-outline-offset')};
   `}
 
   ${activatable`

package/src/theming/themes/alice.theme.ts

@@ -179,6 +179,7 @@ const alice = {
   'button-large-height': height('large'),
   'button-large-padding-x': spacing('m'),
   'button-large-padding-y': rem('14px'),
+  'button-outline-offset': '0',
 
   // button primary
   'button-primary-background': color('primary'),
@@ -199,7 +200,8 @@ const alice = {
   'button-primary-color--active': color('neutral-white'),
   'button-primary-color--disabled': color('neutral-white'),
 
-  'button-primary-outline': shadow('glow-primary'),
+  'button-primary-outline': 'none',
+  'button-primary-box-shadow': shadow('glow-primary'),
 
   // button secondary
   'button-secondary-background': color('transparent'),
@@ -220,7 +222,8 @@ const alice = {
   'button-secondary-color--active': color('accent', 0.6),
   'button-secondary-color--disabled': color('primary'),
 
-  'button-secondary-outline': shadow('glow-primary'),
+  'button-secondary-outline': 'none',
+  'button-secondary-box-shadow': shadow('glow-primary'),
 
   // button secondary dark
   'button-secondary-dark-background': color('transparent'),
@@ -241,6 +244,28 @@ const alice = {
   'button-secondary-dark-color--active': color('accent', 0.6),
   'button-secondary-dark-color--disabled': color('neutral-light'),
 
+  // button tertiary
+  'button-tertiary-background': color('transparent'),
+  'button-tertiary-background--hover': color('neutral', 0.2),
+  'button-tertiary-background--focus': color('neutral', 0.2),
+  'button-tertiary-background--active': color('transparent'),
+  'button-tertiary-background--disabled': color('transparent'),
+
+  'button-tertiary-border-color': color('transparent'),
+  'button-tertiary-border-color--hover': color('transparent'),
+  'button-tertiary-border-color--focus': color('transparent'),
+  'button-tertiary-border-color--active': color('accent', 0.6),
+  'button-tertiary-border-color--disabled': color('transparent'),
+
+  'button-tertiary-color': color('neutral-darker'),
+  'button-tertiary-color--hover': color('accent'),
+  'button-tertiary-color--focus': color('primary'),
+  'button-tertiary-color--active': color('accent', 0.6),
+  'button-tertiary-color--disabled': color('neutral-darker'),
+
+  'button-tertiary-outline': 'none',
+  'button-tertiary-box-shadow': 'none',
+
   // button warning
   'button-warning-background': color('transparent'),
   'button-warning-background--hover': color('warning', 0.2),
@@ -260,7 +285,8 @@ const alice = {
   'button-warning-color--active': color('warning'),
   'button-warning-color--disabled': color('warning-dark'),
 
-  'button-warning-outline': shadow('glow-warning'),
+  'button-warning-outline': 'none',
+  'button-warning-box-shadow': shadow('glow-warning'),
 
   // button icon
   'button-icon-border-radius': border.radius('circle'),
@@ -286,17 +312,18 @@ const alice = {
   'button-icon-color--active': color('neutral-darkest'),
   'button-icon-color--disabled': color('neutral-darkest'),
 
-  'button-icon-outline': shadow('glow-primary'),
+  'button-icon-box-shadow': shadow('glow-primary'),
+  'button-icon-outline': '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-removable-spacing': `0 ${spacing('xs')} 0 ${spacing('s')}`,
   'tag-width': 'auto',
-  'tag-outline': shadow('glow-primary'),
+  'tag-box-shadow': shadow('glow-primary'),
+  'tag-outline-offset': '0',
 
   'tag-remove-button-background': color('neutral-white'),
   'tag-remove-button-border-radius': rem('24px'),
@@ -304,15 +331,18 @@ const alice = {
 
   // tag small
   'tag-small-font-size': font.size('6'),
+  'tag-small-font-weight': font.weight('bold'),
   'tag-small-height': rem('16px'),
   '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 ${spacing('s')}`,
+  'tag-small-removable-spacing': `0 ${spacing('s')}`,
 
   // tag medium
   'tag-font-size': font.size('5'),
+  'tag-font-weight': font.weight('bold'),
   'tag-height': rem('24px'),
   'tag-transform': 'none',
   'tag-leading-display': 'inline-flex',
@@ -321,11 +351,13 @@ const alice = {
 
   // tag large
   'tag-large-font-size': font.size('4'),
+  'tag-large-font-weight': font.weight('bold'),
   'tag-large-height': rem('32px'),
   '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 ${spacing('s')}`,
 
   // tag default
   'tag-default-background': color('neutral-light'),
@@ -340,6 +372,8 @@ const alice = {
   'tag-default-border-color--hover': 'transparent',
   'tag-default-border-color--focus': 'transparent',
 
+  'tag-default-outline': 'none',
+
   // tag outline
   'tag-outlined-background': color('transparent'),
   'tag-outlined-background--hover': color('accent', 0.4),
@@ -353,6 +387,8 @@ const alice = {
   'tag-outlined-border-color--hover': color('neutral-darkest'),
   'tag-outlined-border-color--focus': color('neutral-darker'),
 
+  'tag-outline-outline': 'none',
+
   // tag accent
   'tag-accent-background': color('accent', 0.2),
   'tag-accent-background--hover': color('accent', 0.4),
@@ -366,6 +402,8 @@ const alice = {
   'tag-accent-border-color--hover': 'transparent',
   'tag-accent-border-color--focus': 'transparent',
 
+  'tag-accent-outline': 'none',
+
   // tag success
   'tag-success-background': color('success-light'),
   'tag-success-background--hover': color('success-light'),
@@ -379,6 +417,8 @@ const alice = {
   'tag-success-border-color--hover': color('success-light'),
   'tag-success-border-color--focus': color('success-light'),
 
+  'tag-success-outline': 'none',
+
   // tag warning
   'tag-warning-background': color('warning-light'),
   'tag-warning-background--hover': color('warning-light'),
@@ -392,6 +432,8 @@ const alice = {
   'tag-warning-border-color--hover': color('warning-light'),
   'tag-warning-border-color--focus': color('warning-light'),
 
+  'tag-warning-outline': 'none',
+
   // tag danger
   'tag-danger-background': color('danger-light'),
   'tag-danger-background--hover': color('danger-light'),
@@ -405,6 +447,8 @@ const alice = {
   'tag-danger-border-color--hover': color('danger-light'),
   'tag-danger-border-color--focus': color('danger-light'),
 
+  'tag-danger-outline': 'none',
+
   // checkbox
   'checkbox-color': color('neutral-darker'),
   'checkbox-font-weight': font.weight('medium'),
@@ -412,7 +456,9 @@ const alice = {
 
   'checkbox-selector-border-radius': border.radius('s'),
   'checkbox-selector-size': rem('16px'),
-  'checkbox-selector-outline': shadow('glow-primary'),
+  'checkbox-selector-box-shadow': shadow('glow-primary'),
+  'checkbox-selector-outline': 'none',
+  'checkbox-selector-outline-offset': '0',
 
   'checkbox-small-font-size': font.size('5'),
 
@@ -458,7 +504,7 @@ const alice = {
 
   'radio-selector-border-radius': border.radius('circle'),
   'radio-selector-size': rem('24px'),
-  'radio-selector-outline': shadow('glow-primary'),
+  'radio-selector-box-shadow': shadow('glow-primary'),
 
   'radio-small-font-size': font.size('5'),
   'radio-small-selector-size': rem('16px'),
@@ -526,7 +572,9 @@ const alice = {
   'text-field-padding-x': spacing('s'),
   'text-field-padding-y': spacing('s'),
 
-  'text-field-outline': shadow('glow-primary'),
+  'text-field-box-shadow': shadow('glow-primary'),
+  'text-field-outline': 'none',
+  'text-field-outline-offset': '0',
 
   'text-field-small-height': height('small'),
   'text-field-small-padding-x': spacing('s'),
@@ -560,7 +608,7 @@ const alice = {
   'text-field-success-border-color': color('accent'),
   'text-field-danger-border-color': color('danger'),
 
-  'text-field-dark-outline': color('neutral', 0.4),
+  'text-field-dark-box-shadow': color('neutral', 0.4),
 
   // textarea
   'textarea-border-radius': border.radius('s'),
@@ -572,7 +620,9 @@ const alice = {
   'textarea-padding-x': spacing('s'),
   'textarea-padding-y': spacing('s'),
 
-  'textarea-outline': shadow('glow-primary'),
+  'textarea-box-shadow': shadow('glow-primary'),
+  'textarea-outline': 'none',
+  'textarea-outline-offset': '0',
 
   'textarea-small-padding-x': spacing('s'),
   'textarea-small-padding-y': spacing('xs'),
@@ -605,7 +655,7 @@ const alice = {
   'textarea-success-border-color': color('accent'),
   'textarea-danger-border-color': color('danger'),
 
-  'textarea-dark-outline': color('neutral', 0.4),
+  'textarea-dark-box-shadow': color('neutral', 0.4),
 
   // link
   'link-font-size': font.size('3'),
@@ -615,6 +665,10 @@ const alice = {
   'link-font-weight': font.weight('medium'),
   'link-font-weight--hover': font.weight('bold'),
 
+  'link-box-shadow': shadow('glow-primary'),
+  'link-outline': 'none',
+  'link-outline-offset': '0',
+
   // breadcrumbs
   'breadcrumbs-font-size': font.size('2'),
   'breadcrumbs-font-height': font.height('2'),
@@ -739,7 +793,9 @@ const alice = {
   'switch-height': rem('22px'),
   'switch-border-radius': rem('22px'),
 
-  'switch-outline': shadow('glow-primary'),
+  'switch-box-shadow': shadow('glow-primary'),
+  'switch-outline': 'none',
+  'switch-outline-offset': '0',
 
   // Switch Large
   'switch-large-width': rem('70px'),
@@ -880,11 +936,16 @@ const alice = {
   'top-navigation-item-color--hover': color('primary'),
 
   // Select
+  'select-trigger-height': '100%',
+  'select-trigger-border-color': color('neutral-lighter'),
   'select-selected-option-check-color': color('accent'),
   'select-selected-option-background-color': color('accent', 0.2),
 
   // Toggle & Toggle Group
   'toggle-text-transform': 'uppercase',
+  'toggle-box-shadow': shadow('glow-primary'),
+  'toggle-outline': 'none',
+  'toggle-outline-offset': '0',
   'toggle-background-color': color('transparent'),
   'toggle-background-color--hover': color('transparent'),
   'toggle-background-color--focus': color('transparent'),
@@ -945,10 +1006,17 @@ const alice = {
   'toggle-group-single-padding': '3px',
 
   // dropdown
+  'dropdown-trigger-border-color': color('primary'),
+  'dropdown-trigger-dark-border-color': color('neutral-light'),
+  'dropdown-trigger-outlined-border-color': color('transparent'),
   'dropdown-trigger-expanded-color': color('accent'),
   'dropdown-trigger-height': height('default'),
   'dropdown-trigger-small-height': height('small'),
   'dropdown-trigger-large-height': height('large'),
+
+  'dropdown-trigger-box-shadow': shadow('glow-primary'),
+  'dropdown-trigger-outline': 'none',
+  'dropdown-trigger-outline-offset': '0',
 }
 
 export default alice