@loadsmart/loadsmart-ui 6.0.15 → 6.0.16

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

@@ -176,6 +176,7 @@ const loadsmart = {
   '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'),
@@ -196,12 +197,13 @@ const loadsmart = {
   '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'),
   'button-secondary-background--hover': color('neutral', 0.2),
-  'button-secondary-background--focus': color('neutral', 0.2),
+  'button-secondary-background--focus': color('transparent'),
   'button-secondary-background--active': color('transparent'),
   'button-secondary-background--disabled': color('transparent'),
 
@@ -217,7 +219,8 @@ const loadsmart = {
   'button-secondary-color--active': color('accent', 0.6),
   'button-secondary-color--disabled': color('neutral-darker'),
 
-  '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'),
@@ -238,6 +241,28 @@ const loadsmart = {
   '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),
@@ -257,7 +282,8 @@ const loadsmart = {
   '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'),
@@ -283,17 +309,18 @@ const loadsmart = {
   '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'),
@@ -301,15 +328,18 @@ const loadsmart = {
 
   // 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',
@@ -318,11 +348,13 @@ const loadsmart = {
 
   // 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'),
@@ -337,6 +369,8 @@ const loadsmart = {
   '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),
@@ -350,6 +384,8 @@ const loadsmart = {
   '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),
@@ -363,6 +399,8 @@ const loadsmart = {
   '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'),
@@ -376,6 +414,8 @@ const loadsmart = {
   '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'),
@@ -389,6 +429,8 @@ const loadsmart = {
   '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'),
@@ -401,6 +443,9 @@ const loadsmart = {
   'tag-danger-border-color': color('danger-light'),
   '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'),
@@ -408,7 +453,9 @@ const loadsmart = {
 
   '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'),
 
@@ -454,7 +501,7 @@ const loadsmart = {
 
   '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'),
@@ -522,7 +569,9 @@ const loadsmart = {
   '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'),
@@ -556,7 +605,7 @@ const loadsmart = {
   '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'),
@@ -568,7 +617,9 @@ const loadsmart = {
   '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'),
@@ -601,7 +652,7 @@ const loadsmart = {
   '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'),
@@ -611,6 +662,10 @@ const loadsmart = {
   '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'),
@@ -735,7 +790,9 @@ const loadsmart = {
   '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'),
@@ -876,11 +933,16 @@ const loadsmart = {
   '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'),
@@ -941,10 +1003,17 @@ const loadsmart = {
   '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 loadsmart