@loadsmart/loadsmart-ui 5.13.2 → 5.14.1

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'

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