@loadsmart/loadsmart-ui 5.13.1 → 5.14.0

package/src/components/ToggleGroup/Toggle.tsx

@@ -14,82 +14,107 @@ import ToggleGroupContext, { SelectableContext } from './ToggleGroupContext'
 import type { ToggleGroupOptionProps, ToggleGroupType } from './ToggleGroup.types'
 
 const ToggleButton = styled(BaseButton)<{ $type: ToggleGroupType }>`
-  background: ${conditional({
-    'color-transparent': whenProps({ 'aria-checked': false }),
-    'color-neutral-darkest': whenProps({ 'aria-checked': true }),
+  text-transform: ${token('toggle-text-transform')};
+
+  background-color: ${conditional({
+    'toggle-background-color': whenProps({ 'aria-checked': false }),
+    'toggle-checked-background-color': whenProps({ 'aria-checked': true }),
   })};
 
   border-color: ${conditional({
-    'color-neutral-darkest': whenProps([
-      { $type: 'multiple' },
-      { $type: 'single', 'aria-checked': true },
-    ]),
-    'color-transparent': whenProps({ $type: 'single', 'aria-checked': false }),
+    'toggle-single-border-color': whenProps({ $type: 'single', 'aria-checked': false }),
+    'toggle-single-checked-border-color': whenProps({ $type: 'single', 'aria-checked': true }),
+    'toggle-multiple-border-color': whenProps({ $type: 'multiple', 'aria-checked': false }),
+    'toggle-multiple-checked-border-color': whenProps({ $type: 'multiple', 'aria-checked': true }),
   })};
 
   color: ${conditional({
-    'color-neutral-darker': whenProps({ 'aria-checked': false }),
-    'color-neutral-white': whenProps({ 'aria-checked': true }),
+    'toggle-color': whenProps({ 'aria-checked': false }),
+    'toggle-checked-color': whenProps({ 'aria-checked': true }),
   })};
 
   padding: ${token('space-xs')} ${token('space-s')};
 
   ${hoverable`
     border-color: ${conditional({
-      'color-neutral-dark': whenProps({ $type: 'multiple' }),
-      'color-transparent': whenProps({ $type: 'single' }),
+      'toggle-multiple-border-color--hover': whenProps({ $type: 'multiple' }),
+      'toggle-single-border-color--hover': whenProps({ $type: 'single' }),
     })};
 
     background-color: ${conditional({
-      'color-transparent': whenProps({ 'aria-checked': false }),
-      'color-neutral-dark': whenProps({ 'aria-checked': true }),
+      'toggle-background-color--hover': whenProps({ 'aria-checked': false }),
+      'toggle-checked-background-color--hover': whenProps({ 'aria-checked': true }),
     })};
+
     color: ${conditional({
-      'color-neutral-dark': whenProps({ 'aria-checked': false }),
-      'color-neutral-white': whenProps({ 'aria-checked': true }),
+      'toggle-color--hover': whenProps({ 'aria-checked': false }),
+      'toggle-checked-color--hover': whenProps({ 'aria-checked': true }),
     })};
   `}
 
   ${focusable`
-    border-color: ${token('color-neutral-darker')};
+    border-color: ${conditional({
+      'toggle-multiple-border-color--focus': whenProps({ $type: 'multiple' }),
+      'toggle-single-border-color--focus': whenProps({ $type: 'single' }),
+    })};
+
     background-color: ${conditional({
-      'color-transparent': whenProps({ 'aria-checked': false }),
-      'color-neutral-darker': whenProps({ 'aria-checked': true }),
+      'toggle-background-color--focus': whenProps({ 'aria-checked': false }),
+      'toggle-checked-background-color--focus': whenProps({ 'aria-checked': true }),
     })};
+
     color: ${conditional({
-      'color-neutral-darker': whenProps({ 'aria-checked': false }),
-      'color-neutral-white': whenProps({ 'aria-checked': true }),
+      'toggle-color--focus': whenProps({ 'aria-checked': false }),
+      'toggle-checked-color--focus': whenProps({ 'aria-checked': true }),
     })};
 
     box-shadow: ${token('button-primary-outline')};
   `}
 
   ${activatable`
-    border-color: ${token('color-neutral')};
+    border-color:  ${conditional({
+      'toggle-multiple-border-color--active': whenProps({ $type: 'multiple' }),
+      'toggle-single-border-color--active': whenProps({ $type: 'single' }),
+    })};
+
     background-color: ${conditional({
-      'color-transparent': whenProps({ 'aria-checked': false }),
-      'color-neutral': whenProps({ 'aria-checked': true }),
+      'toggle-background-color--active': whenProps({ 'aria-checked': false }),
+      'toggle-checked-background-color--active': whenProps({ 'aria-checked': true }),
     })};
+
     color: ${conditional({
-      'color-neutral': whenProps({ 'aria-checked': false }),
-      'color-neutral-white': whenProps({ 'aria-checked': true }),
+      'toggle-color--active': whenProps({ 'aria-checked': false }),
+      'toggle-checked-color--active': whenProps({ 'aria-checked': true }),
     })};
   `}
 
   ${disableable`
     opacity: 1; // toggle group already applies opacity; we don't want to overlap it.
 
+    background-color: ${conditional({
+      'toggle-background-color--disabled': whenProps({ 'aria-checked': false }),
+      'toggle-checked-background-color--disabled': whenProps({ 'aria-checked': true }),
+    })};
+
     border-color: ${conditional({
-      'color-neutral-darkest': whenProps([
-        { $type: 'multiple' },
-        { $type: 'single', 'aria-checked': true },
-      ]),
-      'color-transparent': whenProps({ $type: 'single', 'aria-checked': false }),
+      'toggle-single-border-color--disabled': whenProps({ $type: 'single', 'aria-checked': false }),
+      'toggle-single-checked-border-color--disabled': whenProps({
+        $type: 'single',
+        'aria-checked': true,
+      }),
+      'toggle-multiple-border-color--disabled': whenProps({
+        $type: 'multiple',
+        'aria-checked': false,
+      }),
+      'toggle-multiple-checked-border-color--disabled': whenProps({
+        $type: 'multiple',
+        'aria-checked': true,
+      }),
     })};
 
     color: ${conditional({
-      'color-neutral-lightest': whenProps({ 'aria-checked': true }),
-      'color-neutral-darker': whenProps({ 'aria-checked': false }),
+      'toggle-color--disabled': whenProps({ 'aria-checked': false }),
+      'toggle-checked-color--disabled': whenProps({ 'aria-checked': true }),
     })};
   `}
 `

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -21,32 +21,45 @@ import type {
 
 const Container = styled(Group)<{ $multiple: boolean; $scale: ToggleGroupProps['scale'] }>`
   padding: ${conditional({
-    '0': whenProps({ $multiple: true }),
-    '3px': whenProps({ $multiple: false }),
+    'toggle-group-multiple-padding': whenProps({ $multiple: true }),
+    'toggle-group-single-padding': whenProps({ $multiple: false }),
   })};
 
-  ${({ $multiple }) =>
-    $multiple
-      ? css`
-          border: none;
-        `
-      : css`
-          border: 1px solid ${token('color-neutral-darker')};
-          border-radius: ${token('border-radius-s')};
-        `}
+  border-color: ${conditional({
+    'toggle-group-multiple-border-color': whenProps({ $multiple: true }),
+    'toggle-group-single-border-color': whenProps({ $multiple: false }),
+  })};
+
+  border-style: ${conditional({
+    'toggle-group-multiple-border-style': whenProps({ $multiple: true }),
+    'toggle-group-single-border-style': whenProps({ $multiple: false }),
+  })};
+
+  border-width: ${conditional({
+    'toggle-group-multiple-border-width': whenProps({ $multiple: true }),
+    'toggle-group-single-border-width': whenProps({ $multiple: false }),
+  })};
+
+  border-radius: ${conditional({
+    'toggle-group-multiple-border-radius': whenProps({ $multiple: true }),
+    'toggle-group-single-border-radius': whenProps({ $multiple: false }),
+  })};
 
   ${disableable()}
 
   ${Toggle} {
-    ${conditional({
-      'font-size: 10px;': whenProps({ $multiple: false, $scale: 'small' }),
+    height: ${conditional({
+      'toggle-single-height': whenProps({ $multiple: false, $scale: 'default' }),
+      'toggle-single-small-height': whenProps({ $multiple: false, $scale: 'small' }),
+      'toggle-multiple-height': whenProps({ $multiple: true, $scale: 'default' }),
+      'toggle-multiple-small-height': whenProps({ $multiple: true, $scale: 'small' }),
     })};
 
-    height: ${conditional({
-      '36px': whenProps({ $multiple: true, $scale: 'default' }),
-      '24px': whenProps({ $multiple: true, $scale: 'small' }),
-      '28px': whenProps({ $multiple: false, $scale: 'default' }),
-      '16px': whenProps({ $multiple: false, $scale: 'small' }),
+    font-size: ${conditional({
+      'toggle-single-font-size': whenProps({ $multiple: false, $scale: 'default' }),
+      'toggle-single-small-font-size': whenProps({ $multiple: false, $scale: 'small' }),
+      'toggle-multiple-font-size': whenProps({ $multiple: true, $scale: 'default' }),
+      'toggle-multiple-small-font-size': whenProps({ $multiple: true, $scale: 'small' }),
     })};
   }
 `
@@ -118,7 +131,7 @@ function ToggleGroup(props: ToggleGroupProps): JSX.Element {
       id={id}
       role={multiple ? 'group' : 'radiogroup'}
       align="center"
-      space={multiple ? 's' : 'xs'}
+      space="xs"
       $multiple={multiple}
       $scale={scale}
     >

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

@@ -4,11 +4,12 @@ import {
   generateFontGetters,
   generateShadowGetter,
   generateSpacingGetter,
+  generateHeightGetter,
 } from '../../theming/theming.helpers'
 
 import rem from '../../utils/toolset/rem'
 
-const COLORS = {
+export const COLORS = {
   'color-primary': '#56748E',
   'color-accent': '#0B6FB6',
 
@@ -44,7 +45,7 @@ export const OPACITIES = {
   'opacity-100': 1,
 }
 
-const SPACINGS = {
+export const SPACINGS = {
   'space-none': 0,
   'space-2xs': rem('2px'),
   'space-xs': rem('4px'),
@@ -56,12 +57,12 @@ const SPACINGS = {
   'space-3xl': rem('48px'),
 }
 
-const FONT_FAMILIES = {
+export const FONT_FAMILIES = {
   'font-family-default': 'Manrope, sans-serif',
   'font-family-monospace': 'Roboto Mono, monospace',
 }
 
-const FONT_SIZES = {
+export const FONT_SIZES = {
   'font-size-6': rem('10px'),
   'font-size-5': rem('12px'),
   'font-size-4': rem('14px'),
@@ -70,19 +71,19 @@ const FONT_SIZES = {
   'font-size-1': rem('26px'),
 }
 
-const FONT_WEIGHTS = {
+export const FONT_WEIGHTS = {
   'font-weight-regular': 400,
   'font-weight-medium': 500,
   'font-weight-bold': 800,
 }
 
-const FONT_HEIGHTS = {
+export const FONT_HEIGHTS = {
   'font-height-1': '100%',
   'font-height-2': '125%',
   'font-height-3': '140%',
 }
 
-const SHADOWS = {
+export const SHADOWS = {
   'shadow-none': 'none',
   'shadow-modal': '0px 2px 6px 0px rgba(10, 10, 11, 0.4)',
   'shadow-droplist': '0px 2px 3px 0px rgba(10, 10, 11, 0.4)',
@@ -90,7 +91,7 @@ const SHADOWS = {
   'shadow-glow-warning': '0px 0px 4px 0px rgba(255, 206, 79, 1.0)',
 }
 
-const BORDER_RADIUSES = {
+export const BORDER_RADIUSES = {
   'border-radius-none': 0,
   'border-radius-s': rem('4px'),
   'border-radius-m': rem('8px'),
@@ -98,14 +99,14 @@ const BORDER_RADIUSES = {
   'border-radius-circle': '50%',
 }
 
-const BORDER_WIDTHS = {
+export const BORDER_WIDTHS = {
   'border-width-none': 0,
   'border-width-thin': '1px',
   'border-width-medium': '2px',
   'border-width-bold': '4px',
 }
 
-const Z_INDEXES = {
+export const Z_INDEXES = {
   'z-index-none': 0,
   'z-index-default': 1,
   'z-index-droplist': 10,
@@ -114,12 +115,18 @@ const Z_INDEXES = {
   'z-index-modal': 30,
 }
 
-const TEXT_ALIGNMENT = {
+export const TEXT_ALIGNMENT = {
   left: 'left',
   center: 'center',
   right: 'right',
 }
 
+export const HEIGHTS = {
+  'height-small': rem('24px'),
+  'height-default': rem('36px'),
+  'height-large': rem('48px'),
+}
+
 const color = generateColorGetter(COLORS)
 const shadow = generateShadowGetter(SHADOWS)
 const spacing = generateSpacingGetter(SPACINGS)
@@ -134,6 +141,8 @@ const border = generateBorderGetters({
   widths: BORDER_WIDTHS,
 })
 
+const height = generateHeightGetter(HEIGHTS)
+
 // TODO: how to inherit from other theme?
 
 const alice = {
@@ -149,23 +158,25 @@ const alice = {
   ...SPACINGS,
   ...Z_INDEXES,
   ...TEXT_ALIGNMENT,
+  ...HEIGHTS,
+
   // button
   'button-border-radius': border.radius('s'),
   'button-border-width': border.width('thin'),
   'button-font-weight': font.weight('bold'),
   'button-font-height': font.height('1'),
   'button-small-font-size': font.size('5'),
-  'button-small-height': rem('24px'),
+  'button-small-height': height('small'),
   'button-small-padding-x': spacing('s'),
   'button-small-padding-y': rem('6px'),
   'button-font-size': font.size('3'),
-  'button-height': rem('36px'),
+  'button-height': height('default'),
   'button-width': 'auto',
   'button-padding-y': rem('10px'),
   'button-padding-x': spacing('m'),
   'button-spacing-x': spacing('s'),
   'button-large-font-size': font.size('3'),
-  'button-large-height': rem('48px'),
+  'button-large-height': height('large'),
   'button-large-padding-x': spacing('m'),
   'button-large-padding-y': rem('14px'),
 
@@ -253,9 +264,9 @@ const alice = {
 
   // button icon
   'button-icon-border-radius': border.radius('circle'),
-  'button-icon-small-width': rem('24px'),
-  'button-icon-width': rem('36px'),
-  'button-icon-large-width': rem('48px'),
+  'button-icon-small-width': height('small'),
+  'button-icon-width': height('default'),
+  'button-icon-large-width': height('large'),
 
   'button-icon-background': color('neutral-lighter'),
   'button-icon-background--hover': color('neutral-lighter'),
@@ -511,18 +522,18 @@ const alice = {
   'text-field-font-size': font.size('4'),
   'text-field-font-weight': font.weight('medium'),
   'text-field-font-height': font.height('3'),
-  'text-field-height': rem('36px'),
+  'text-field-height': height('default'),
   'text-field-padding-x': spacing('s'),
   'text-field-padding-y': spacing('s'),
 
   'text-field-outline': shadow('glow-primary'),
 
-  'text-field-small-height': rem('24px'),
+  'text-field-small-height': height('small'),
   'text-field-small-padding-x': spacing('s'),
   'text-field-small-padding-y': spacing('xs'),
   'text-field-small-font-size': font.size('5'),
 
-  'text-field-large-height': rem('45px'),
+  'text-field-large-height': height('large'),
   'text-field-large-padding-x': spacing('s'),
   'text-field-large-padding-y': rem('12px'),
   'text-field-large-font-size': font.size('4'),
@@ -797,6 +808,9 @@ const alice = {
   'steps-conector-top': '12px', // Math.round((steps-indicator-size - steps-conector-height) / 2)
   'steps-conector-top--complete': '11px', // Math.round((steps-indicator-size - steps-conector-height--complete) / 2)
 
+  'steps-progress-step-background-color': color('neutral'),
+  'steps-progress-step-background-color--complete': color('accent'),
+
   // card
   'card-background': color('neutral-white'),
   'card-border-color': color('neutral-light'),
@@ -833,6 +847,16 @@ const alice = {
   'side-navigation-logo-padding-x': spacing('l'),
   'side-navigation-separator-color': color('neutral-dark'),
 
+  'side-navigation-menu-title-font-weight': font.weight('bold'),
+  'side-navigation-menu-title-font-size': font.size('5'),
+  'side-navigation-menu-title-line-height': font.height('3'),
+
+  'side-navigation-menu-link-color--hover': color('primary'),
+  'side-navigation-menu-link-background-color--active': color('neutral-darkest', 0.2),
+  'side-navigation-menu-link-box-shadow-color--active': color('primary'),
+
+  'side-navigation-menu-item-color--focus': color('primary'),
+
   // Table
   'table-row-default-color': color('neutral-white'),
   'table-row-variant-color': color('neutral-light', 0.2),
@@ -848,6 +872,73 @@ const alice = {
   'top-navigation-item-icon-color': color('neutral-dark'),
   'top-navigation-item-color': color('neutral-darkest'),
   'top-navigation-item-color--hover': color('primary'),
+
+  // Select
+  'select-selected-option-check-color': color('accent'),
+  'select-selected-option-background-color': color('accent', 0.2),
+
+  // Toggle & Toggle Group
+  'toggle-text-transform': 'uppercase',
+  'toggle-background-color': color('transparent'),
+  'toggle-background-color--hover': color('transparent'),
+  'toggle-background-color--focus': color('transparent'),
+  'toggle-background-color--active': color('transparent'),
+  'toggle-background-color--disabled': color('transparent'),
+  'toggle-checked-background-color': color('neutral-darkest'),
+  'toggle-checked-background-color--hover': color('neutral-dark'),
+  'toggle-checked-background-color--focus': color('neutral-darker'),
+  'toggle-checked-background-color--active': color('neutral'),
+  'toggle-checked-background-color--disabled': color('neutral-darkest'),
+  'toggle-color': color('neutral-darker'),
+  'toggle-color--hover': color('neutral-dark'),
+  'toggle-color--focus': color('neutral-darker'),
+  'toggle-color--active': color('neutral'),
+  'toggle-color--disabled': color('neutral-darker'),
+  'toggle-checked-color': color('neutral-white'),
+  'toggle-checked-color--hover': color('neutral-white'),
+  'toggle-checked-color--focus': color('neutral-white'),
+  'toggle-checked-color--active': color('neutral-white'),
+  'toggle-checked-color--disabled': color('neutral-lightest'),
+
+  'toggle-single-border-color': color('transparent'),
+  'toggle-single-border-color--hover': color('transparent'),
+  'toggle-single-border-color--focus': color('neutral-darker'),
+  'toggle-single-border-color--active': color('neutral'),
+  'toggle-single-border-color--disabled': color('transparent'),
+  'toggle-single-checked-border-color': color('neutral-darkest'),
+  'toggle-single-checked-border-color--disabled': color('neutral-darkest'),
+  'toggle-single-font-size': font.size('4'),
+  'toggle-single-small-font-size': '10px',
+  'toggle-single-height': '28px',
+  'toggle-single-small-height': '16px',
+
+  'toggle-multiple-border-color': color('neutral-darkest'),
+  'toggle-multiple-border-color--hover': color('neutral-dark'),
+  'toggle-multiple-border-color--focus': color('neutral-darker'),
+  'toggle-multiple-border-color--active': color('neutral'),
+  'toggle-multiple-border-color--disabled': color('neutral-darkest'),
+  'toggle-multiple-checked-border-color': color('neutral-darkest'),
+  'toggle-multiple-checked-border-color--disabled': color('neutral-darkest'),
+  'toggle-multiple-font-size': font.size('4'),
+  'toggle-multiple-small-font-size': font.size('5'),
+  'toggle-multiple-height': '36px',
+  'toggle-multiple-small-height': '24px',
+
+  'toggle-group-multiple-border-width': 'initial',
+  'toggle-group-multiple-border-style': 'none',
+  'toggle-group-multiple-border-color': 'initial',
+  'toggle-group-multiple-border-radius': 'initial',
+  'toggle-group-multiple-padding': 0,
+
+  'toggle-group-single-border-width': '1px',
+  'toggle-group-single-border-style': 'solid',
+  'toggle-group-single-border-color': color('neutral-darker'),
+  'toggle-group-single-border-radius': border.radius('s'),
+  'toggle-group-single-padding': '3px',
+
+  // dropdown
+  'dropdown-trigger-expanded-color': color('accent'),
+  'dropdown-trigger-height': height('default'),
 }
 
 export default alice

package/src/theming/themes/index.ts

@@ -1,2 +1,3 @@
 export { default as Alice } from './alice.theme'
 export { default as Loadsmart } from './loadsmart.theme'
+export { default as Miranda } from './miranda-compatibility.theme'