@loadsmart/loadsmart-ui 5.13.1 → 5.14.0

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

@@ -4,6 +4,7 @@ import {
   generateFontGetters,
   generateShadowGetter,
   generateSpacingGetter,
+  generateHeightGetter,
 } from '../../theming/theming.helpers'
 import rem from '../../utils/toolset/rem'
 
@@ -119,6 +120,12 @@ const TEXT_ALIGNMENT = {
   right: 'right',
 }
 
+export const HEIGHTS = {
+  small: rem('24px'),
+  default: rem('36px'),
+  large: rem('48px'),
+}
+
 const color = generateColorGetter(COLORS)
 const shadow = generateShadowGetter(SHADOWS)
 const spacing = generateSpacingGetter(SPACINGS)
@@ -133,6 +140,8 @@ const border = generateBorderGetters({
   widths: BORDER_WIDTHS,
 })
 
+const height = generateHeightGetter(HEIGHTS)
+
 const loadsmart = {
   ...BORDER_RADIUSES,
   ...BORDER_WIDTHS,
@@ -146,23 +155,25 @@ const loadsmart = {
   ...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'),
 
@@ -250,9 +261,9 @@ const loadsmart = {
 
   // 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'),
@@ -507,18 +518,18 @@ const loadsmart = {
   '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'),
@@ -793,6 +804,9 @@ const loadsmart = {
   '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'),
@@ -829,6 +843,16 @@ const loadsmart = {
   '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),
@@ -844,6 +868,73 @@ const loadsmart = {
   '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 loadsmart