diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/AdvancedTheme.json b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/AdvancedTheme.json index 3e7c1a43f..8a6d67c6e 100644 --- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/AdvancedTheme.json +++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/AdvancedTheme.json @@ -194,12 +194,12 @@ "width": "400px" }, "checkbox": { - "backgroundColorChecked": "#0067b3", - "backgroundColorCheckedOnDark": "#e6e6e6", - "hoverBackgroundColorChecked": "#003c66", - "hoverBackgroundColorCheckedOnDark": "#ffffff", - "disabledBackgroundColorChecked": "#999999", - "disabledBackgroundColorCheckedOnDark": "#4d4d4d", + "selectedBackgroundColor": "#0067b3", + "selectedBackgroundColorOnDark": "#e6e6e6", + "selectedHoverBackgroundColor": "#003c66", + "selectedHoverBackgroundColorOnDark": "#ffffff", + "selectedDisabledBackgroundColor": "#999999", + "selectedDisabledBackgroundColorOnDark": "#4d4d4d", "borderColor": "#0067b3", "borderColorOnDark": "#e6e6e6", "hoverBorderColor": "#003c66", @@ -219,7 +219,7 @@ "disabledFontColorOnDark": "#999999", "focusColor": "#0095ff", "focusColorOnDark": "#0095ff", - "checkLabelSpacing": "8px" + "checkLabelSpacing": "0.5rem" }, "chip": { "backgroundColor": "#e6e6e6", @@ -342,7 +342,7 @@ "scrollBarTrackColor": "#D9D9D9", "focusColor": "#0095ff" }, - "fileInput":{ + "fileInput": { "dropBorderColor": "#000000", "fileItemBorderColor": "#cccccc", "fileItemIconColor": "#000000", @@ -689,7 +689,7 @@ "disabledValueFontColor": "#999999", "disabledValueFontColorOnDark": "#999999" }, - "link": { + "link": { "fontColor": "#0067b3", "fontFamily": "inherit", "fontSize": "16px", @@ -974,7 +974,7 @@ "fontSize": "1rem", "fontStyle": "normal", "fontWeight": "400", - "labelFontFamily": "Open Sans, sans-serif", + "labelFontFamily": "Open Sans, sans-serif", "labelFontSize": "0.875rem", "labelFontStyle": "normal", "labelFontWeight": "600", @@ -986,8 +986,8 @@ "helperTextLineHeight": "1.5em", "fontColor": "#000000", "fontColorOnDark": "#ffffff", - "labelFontColor": "#000000", - "helperTextFontColor": "#000000", + "labelFontColor": "#000000", + "helperTextFontColor": "#000000", "fontLetterSpacing": "0", "thumbHeight": "12px", "thumbWidth": "12px", @@ -1263,7 +1263,7 @@ "containerBorderStyle": "solid", "containerBorderRadius": "0.375rem", "optionFocusBorderThickness": "2px", - "optionFocusBorderStyle": "solid", + "optionFocusBorderStyle": "solid", "optionFocusBorderRadius": "0.25rem" }, "upload": { diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/DefaultTheme.json b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/DefaultTheme.json index f16ec6ee2..2061c10ee 100644 --- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/DefaultTheme.json +++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/DefaultTheme.json @@ -8,10 +8,7 @@ "primaryFontColor": "#ffffff", "secondaryHoverFontColor": "#ffffff" }, - "checkbox": { - "baseColor": "#0067b3", - "checkColor": "#ffffff" - }, + "checkbox": {}, "chip": { "baseColor": "#eeeeee", "fontColor": "#000000" diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Advanced.schema.json b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Advanced.schema.json index 90c438a3d..3ceea33a9 100644 --- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Advanced.schema.json +++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Advanced.schema.json @@ -194,12 +194,12 @@ "width": "length" }, "checkbox": { - "backgroundColorChecked": "color", - "backgroundColorCheckedOnDark": "color", - "hoverBackgroundColorChecked": "color", - "hoverBackgroundColorCheckedOnDark": "color", - "disabledBackgroundColorChecked": "color", - "disabledBackgroundColorCheckedOnDark": "color", + "selectedBackgroundColor": "color", + "selectedBackgroundColorOnDark": "color", + "selectedHoverBackgroundColor": "color", + "selectedHoverBackgroundColorOnDark": "color", + "selectedDisabledBackgroundColor": "color", + "selectedDisabledBackgroundColorOnDark": "color", "borderColor": "color", "borderColorOnDark": "color", "hoverBorderColor": "color", @@ -342,7 +342,7 @@ "scrollBarTrackColor": "color", "focusColor": "color" }, - "fileInput":{ + "fileInput": { "dropBorderColor": "color", "fileItemBorderColor": "color", "fileItemIconColor": "color", @@ -1249,7 +1249,7 @@ "containerBorderStyle": "bStyle", "containerBorderRadius": "length", "optionFocusBorderThickness": "bWidth", - "optionFocusBorderStyle": "bStyle", + "optionFocusBorderStyle": "bStyle", "optionFocusBorderRadius": "length" }, "upload": { diff --git a/projects/dxc-ngx-cdk-site/src/assets/styles/themesProperties.ts b/projects/dxc-ngx-cdk-site/src/assets/styles/themesProperties.ts index f2233a393..ac25be497 100644 --- a/projects/dxc-ngx-cdk-site/src/assets/styles/themesProperties.ts +++ b/projects/dxc-ngx-cdk-site/src/assets/styles/themesProperties.ts @@ -1,98 +1,93 @@ export const customTheme = { - accordion: { - accentColor: "#5f249f", - fontColor: "#000000", - }, - button: { - baseColor: "#5f249f", - primaryFontColor: "#ffffff", - secondaryHoverFontColor: "#ffffff", - }, - checkbox: { - baseColor: "#0067b3", - checkColor: "#ffffff", - }, - chip: { - baseColor: "#eeeeee", - fontColor: "#000000", - }, - date: { - baseColor: "#5f249f", - accentColor: "#ffffff", - }, - dateInput: { - baseColor: "#5f249f", - accentColor: "#ffffff", - }, - dropdown: { - baseColor: "#ffffff", - fontColor: "#000000", - }, - footer: { - baseColor: "#000000", - fontColor: "#ffffff", - accentColor: "#0067b3", - logo: "assets/dxc-logo-wh.svg", - }, - header: { - baseColor: "#ffffff", - accentColor: "#000000", - fontColor: "#000000", - menuBaseColor: "#ffffff", - hamburguerColor: "#000000", - logo: "assets/DXC_Logo_Black_RGB.svg", - logoResponsive: "assets/DXC_Logo_Black_RGB.svg", - }, - inputText: { - selectedBaseColor: "#D9D9D9", - }, - textInput: { - selectedBaseColor: "#D9D9D9", - }, - paginator: { - baseColor: "#eeeeee", - fontColor: "#000000", - }, - progressBar: { - accentColor: "#5f249f", - baseColor: "#cecece", - }, - radio: { - baseColor: "#000000", - }, - select: { - baseColor: "#D9D9D9", - }, - sidenav: { - baseColor: "#F8F8F8", - arrowBaseColor: "#D9D9D9", - arrowAccentColor: "#000000", - }, - slider: { - baseColor: "#0067b3", - }, - spinner: { - accentColor: "#5F249F", - baseColor: "#ffffff", - }, - switch: { - checkedBaseColor: "#5f249f", - }, - table: { - baseColor: "#5f249f", - fontColor: "#ffffff", - }, - tabs: { - baseColor: "#5f249f", - }, - toggleGroup: { - selectedBaseColor: "#5f249f", - selectedFontColor: "#ffffff", - unselectedBaseColor: "#e6e6e6", - unselectedFontColor: "#000000", - }, - wizard: { - baseColor: "#5f249f", - fontColor: "#ffffff", - }, + // accordion: { + // accentColor: "#5f249f", + // fontColor: "#000000", + // }, + // button: { + // baseColor: "#5f249f", + // primaryFontColor: "#ffffff", + // secondaryHoverFontColor: "#ffffff", + // }, + // checkbox: {}, + // chip: { + // baseColor: "#eeeeee", + // fontColor: "#000000", + // }, + // date: { + // baseColor: "#5f249f", + // accentColor: "#ffffff", + // }, + // dateInput: { + // baseColor: "#5f249f", + // accentColor: "#ffffff", + // }, + // dropdown: { + // baseColor: "#ffffff", + // fontColor: "#000000", + // }, + // footer: { + // baseColor: "#000000", + // fontColor: "#ffffff", + // accentColor: "#0067b3", + // logo: "assets/dxc-logo-wh.svg", + // }, + // header: { + // baseColor: "#ffffff", + // accentColor: "#000000", + // fontColor: "#000000", + // menuBaseColor: "#ffffff", + // hamburguerColor: "#000000", + // logo: "assets/DXC_Logo_Black_RGB.svg", + // logoResponsive: "assets/DXC_Logo_Black_RGB.svg", + // }, + // inputText: { + // selectedBaseColor: "#D9D9D9", + // }, + // textInput: { + // selectedBaseColor: "#D9D9D9", + // }, + // paginator: { + // baseColor: "#eeeeee", + // fontColor: "#000000", + // }, + // progressBar: { + // accentColor: "#5f249f", + // baseColor: "#cecece", + // }, + // radio: { + // baseColor: "#000000", + // }, + // select: {}, + // sidenav: { + // baseColor: "#F8F8F8", + // arrowBaseColor: "#D9D9D9", + // arrowAccentColor: "#000000", + // }, + // slider: { + // baseColor: "#0067b3", + // }, + // spinner: { + // accentColor: "#5F249F", + // baseColor: "#ffffff", + // }, + // switch: { + // checkedBaseColor: "#5f249f", + // }, + // table: { + // baseColor: "#5f249f", + // fontColor: "#ffffff", + // }, + // tabs: { + // baseColor: "#5f249f", + // }, + // toggleGroup: { + // selectedBaseColor: "#5f249f", + // selectedFontColor: "#ffffff", + // unselectedBaseColor: "#e6e6e6", + // unselectedFontColor: "#000000", + // }, + // wizard: { + // baseColor: "#5f249f", + // fontColor: "#ffffff", + // }, }; diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-checkbox/dxc-checkbox.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-checkbox/dxc-checkbox.component.ts index 6c3735098..4a221f137 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-checkbox/dxc-checkbox.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-checkbox/dxc-checkbox.component.ts @@ -117,8 +117,8 @@ export class DxcCheckboxComponent implements OnInit { /** * Size of the margin to be applied to the component - * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). - * You can pass an object with 'top', 'bottom', 'left' and 'right' properties + * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). + * You can pass an object with 'top', 'bottom', 'left' and 'right' properties * in order to specify different margin sizes. */ @Input() margin: Space | Margin; @@ -242,13 +242,13 @@ export class DxcCheckboxComponent implements OnInit { vertical-align: top; .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background { - background: var(--checkbox-backgroundColorChecked) !important; + background: var(--checkbox-selectedBackgroundColor) !important; } .mat-checkbox-checked .mat-checkbox-inner-container { &:hover { .mat-checkbox-background { - background: var(--checkbox-hoverBackgroundColorChecked) !important; + background: var(--checkbox-selectedHoverBackgroundColor) !important; } } } @@ -265,9 +265,9 @@ export class DxcCheckboxComponent implements OnInit { label.mat-checkbox-layout { .mat-checkbox-inner-container { .mat-checkbox-background { - outline: -webkit-focus-ring-color auto 2px; - outline-color: var(--checkbox-focusColor); - outline-offset: 3px; + outline: 2px solid var(--checkbox-focusColor); + outline-offset: 1px; + border-radius: 2px; } } } @@ -277,7 +277,10 @@ export class DxcCheckboxComponent implements OnInit { align-items: center; width: 100%; white-space: normal; + height: 24px; + margin-left: 3px; span.mat-checkbox-label { + line-height: 18px; span.checkboxLabel { word-break: normal; color: var(--checkbox-fontColor); @@ -291,8 +294,8 @@ export class DxcCheckboxComponent implements OnInit { .mat-checkbox-inner-container { margin: ${inputs.labelPosition === "after" - ? "2px calc(var(--checkbox-checkLabelSpacing) + 6px) 2px 2px;" - : "2px 2px 2px calc(var(--checkbox-checkLabelSpacing) + 2px);"}; + ? "0px var(--checkbox-checkLabelSpacing) 0px 0px;" + : "0px 0px 0px var(--checkbox-checkLabelSpacing);"}; width: 18px; height: 18px; @@ -304,6 +307,7 @@ export class DxcCheckboxComponent implements OnInit { } .mat-checkbox-background { + outline-offset: 1px; svg path { stroke: var(--checkbox-checkColor) !important; stroke-width: 3px; @@ -336,7 +340,7 @@ export class DxcCheckboxComponent implements OnInit { } .mat-checkbox-background { background: var( - --checkbox-disabledBackgroundColorChecked + --checkbox-selectedDisabledBackgroundColor ) !important; svg path { stroke: var(--checkbox-disabledCheckColor) !important; @@ -361,14 +365,14 @@ export class DxcCheckboxComponent implements OnInit { } .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background { - background: var(--checkbox-backgroundColorCheckedOnDark) !important; + background: var(--checkbox-selectedBackgroundColorOnDark) !important; } .mat-checkbox-checked .mat-checkbox-inner-container { &:hover { .mat-checkbox-background { background: var( - --checkbox-hoverBackgroundColorCheckedOnDark + --checkbox-selectedHoverBackgroundColorOnDark ) !important; } } @@ -421,7 +425,7 @@ export class DxcCheckboxComponent implements OnInit { } .mat-checkbox-background { background: var( - --checkbox-disabledBackgroundColorCheckedOnDark + --checkbox-selectedDisabledBackgroundColorOnDark ) !important; svg path { stroke: var(--checkbox-disabledCheckColorOnDark) !important; @@ -433,7 +437,7 @@ export class DxcCheckboxComponent implements OnInit { &.hover:not(.dark) { .mat-checkbox-checked .mat-checkbox-inner-container { .mat-checkbox-background { - background: var(--checkbox-hoverBackgroundColorChecked) !important; + background: var(--checkbox-selectedHoverBackgroundColor) !important; } } label.mat-checkbox-layout @@ -449,7 +453,7 @@ export class DxcCheckboxComponent implements OnInit { .mat-checkbox-checked .mat-checkbox-inner-container { .mat-checkbox-background { background: var( - --checkbox-hoverBackgroundColorCheckedOnDark + --checkbox-selectedHoverBackgroundColorOnDark ) !important; } } diff --git a/projects/dxc-ngx-cdk/src/lib/theme/complexThemeBindingStrategy.ts b/projects/dxc-ngx-cdk/src/lib/theme/complexThemeBindingStrategy.ts index 47308ae1c..f4f096a83 100644 --- a/projects/dxc-ngx-cdk/src/lib/theme/complexThemeBindingStrategy.ts +++ b/projects/dxc-ngx-cdk/src/lib/theme/complexThemeBindingStrategy.ts @@ -107,20 +107,18 @@ export class ComplexThemeBindingStrategy implements MappingStrategy { theme?.checkbox?.baseColor ?? tokens["--checkbox-borderColor"]; proccessedTokens["--checkbox-checkColor"] = theme?.checkbox?.checkColor ?? tokens["--checkbox-checkColor"]; - proccessedTokens["--checkbox-backgroundColorChecked"] = - theme?.checkbox?.baseColor ?? tokens["--checkbox-backgroundColorChecked"]; - proccessedTokens["--checkbox-backgroundColorChecked"] = - theme?.checkbox?.baseColor ?? tokens["--checkbox-backgroundColorChecked"]; - proccessedTokens["--checkbox-disabledBackgroundColorChecked"] = + proccessedTokens["--checkbox-selectedBackgroundColor"] = + theme?.checkbox?.baseColor ?? + tokens["--checkbox-selectedBackgroundColor"]; + proccessedTokens["--checkbox-selectedDisabledBackgroundColor"] = this.setOpacity(theme?.checkbox?.baseColor, 0.34) ?? - tokens["--checkbox-disabledBackgroundColorChecked"]; + tokens["--checkbox-selectedDisabledBackgroundColor"]; proccessedTokens["--checkbox-disabledBorderColor"] = this.setOpacity(theme?.checkbox?.baseColor, 0.34) ?? tokens["--checkbox-disabledBorderColor"]; proccessedTokens["--checkbox-disabledCheckColor"] = this.setOpacity(theme?.checkbox?.checkColor, 0.34) ?? tokens["--checkbox-disabledCheckColor"]; - //CHIP proccessedTokens["--chip-backgroundColor"] = theme?.chip?.baseColor ?? tokens["--chip-backgroundColor"]; diff --git a/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts b/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts index f5b71fe24..2503c029b 100644 --- a/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts +++ b/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts @@ -346,12 +346,12 @@ export const componentTokens = { "--card-width": "400px", //CHECKBOX - "--checkbox-backgroundColorChecked": globalTokens.hal_blue_s_35, - "--checkbox-backgroundColorCheckedOnDark": globalTokens.hal_grey_l_90, - "--checkbox-hoverBackgroundColorChecked": globalTokens.hal_blue_d_20, - "--checkbox-hoverBackgroundColorCheckedOnDark": globalTokens.hal_white, - "--checkbox-disabledBackgroundColorChecked": globalTokens.hal_grey_l_60, - "--checkbox-disabledBackgroundColorCheckedOnDark": + "--checkbox-selectedBackgroundColor": globalTokens.hal_blue_s_35, + "--checkbox-selectedBackgroundColorOnDark": globalTokens.hal_grey_l_90, + "--checkbox-selectedHoverBackgroundColor": globalTokens.hal_blue_d_20, + "--checkbox-selectedHoverBackgroundColorOnDark": globalTokens.hal_white, + "--checkbox-selectedDisabledBackgroundColor": globalTokens.hal_grey_l_60, + "--checkbox-selectedDisabledBackgroundColorOnDark": globalTokens.color_grey_800, "--checkbox-borderColor": globalTokens.hal_blue_s_35, "--checkbox-borderColorOnDark": globalTokens.hal_grey_l_90, @@ -372,7 +372,7 @@ export const componentTokens = { "--checkbox-disabledFontColorOnDark": globalTokens.hal_grey_l_60, "--checkbox-focusColor": globalTokens.hal_blue_l_50, "--checkbox-focusColorOnDark": globalTokens.hal_blue_l_50, - "--checkbox-checkLabelSpacing": "8px", + "--checkbox-checkLabelSpacing": "0.5rem", //CHIP "--chip-backgroundColor": globalTokens.hal_grey_l_90, @@ -813,8 +813,7 @@ export const componentTokens = { "--textarea-disabledHelperTextFontColor": globalTokens.hal_grey_l_60, "--textarea-disabledHelperTextFontColorOnDark": globalTokens.hal_grey_l_60, "--textarea-disabledPlaceholderFontColor": globalTokens.hal_grey_l_60, - "--textarea-disabledPlaceholderFontColorOnDark": - globalTokens.hal_grey_l_60, + "--textarea-disabledPlaceholderFontColorOnDark": globalTokens.hal_grey_l_60, "--textarea-fontFamily": globalTokens.type_sans, "--textarea-labelFontColor": globalTokens.hal_black, "--textarea-labelFontColorOnDark": globalTokens.hal_white, @@ -1047,13 +1046,16 @@ export const componentTokens = { "--select-errorMessagetLineHeight": globalTokens.type_leading_normal, "--select-errorMessageColor": globalTokens.hal_red_s_41, "--select-errorIconColor": globalTokens.hal_red_s_41, - + "--select-selectionIndicatorFontColor": globalTokens.hal_black, "--select-selectionIndicatorBorderColor": globalTokens.hal_grey_l_75, "--select-selectionIndicatorBackgroundColor": globalTokens.color_grey_50, - "--select-enabledSelectionIndicatorActionBackgroundColor": globalTokens.transparent, - "--select-hoverSelectionIndicatorActionBackgroundColor": globalTokens.hal_grey_l_95, - "--select-activeSelectionIndicatorActionBackgroundColor": globalTokens.hal_grey_l_80, + "--select-enabledSelectionIndicatorActionBackgroundColor": + globalTokens.transparent, + "--select-hoverSelectionIndicatorActionBackgroundColor": + globalTokens.hal_grey_l_95, + "--select-activeSelectionIndicatorActionBackgroundColor": + globalTokens.hal_grey_l_80, "--select-enabledSelectionIndicatorActionIconColor": globalTokens.hal_black, "--select-hoverSelectionIndicatorActionIconColor": globalTokens.hal_black, "--select-activeSelectionIndicatorActionIconColor": globalTokens.hal_black, @@ -1078,11 +1080,14 @@ export const componentTokens = { "--select-listOptionDividerColor": globalTokens.hal_grey_l_90, "--select-listGroupLabelFontWeight": globalTokens.type_semibold, - "--select-unselectedHoverListOptionBackgroundColor": globalTokens.hal_grey_l_95, - "--select-unselectedActiveListOptionBackgroundColor": globalTokens.hal_grey_l_90, + "--select-unselectedHoverListOptionBackgroundColor": + globalTokens.hal_grey_l_95, + "--select-unselectedActiveListOptionBackgroundColor": + globalTokens.hal_grey_l_90, "--select-selectedListOptionBackgroundColor": globalTokens.hal_grey_l_90, "--select-selectedHoverListOptionBackgroundColor": globalTokens.hal_grey_l_80, - "--select-selectedActiveListOptionBackgroundColor": globalTokens.hal_blue_l_80, + "--select-selectedActiveListOptionBackgroundColor": + globalTokens.hal_blue_l_80, "--select-selectedListOptionIconColor": globalTokens.hal_blue_d_20, "--select-optionBorderThickness": "0px", @@ -1123,7 +1128,6 @@ export const componentTokens = { "--select-arrowColorOnDark": globalTokens.hal_white, "--select-collapseIndicatorColor": globalTokens.hal_black, - //SIDENAV "--sidenav-backgroundColor": globalTokens.lighterGrey, "--sidenav-arrowContainerColor": globalTokens.lightGrey, diff --git a/projects/dxc-ngx-cdk/src/lib/theme/test/AdvancedTheme.json b/projects/dxc-ngx-cdk/src/lib/theme/test/AdvancedTheme.json index b3feb617a..2a62684f9 100644 --- a/projects/dxc-ngx-cdk/src/lib/theme/test/AdvancedTheme.json +++ b/projects/dxc-ngx-cdk/src/lib/theme/test/AdvancedTheme.json @@ -194,12 +194,12 @@ "width": "400px" }, "checkbox": { - "backgroundColorChecked": "#0067b3", - "backgroundColorCheckedOnDark": "#e6e6e6", - "hoverBackgroundColorChecked": "#003c66", - "hoverBackgroundColorCheckedOnDark": "#ffffff", - "disabledBackgroundColorChecked": "#999999", - "disabledBackgroundColorCheckedOnDark": "#4d4d4d", + "selectedBackgroundColor": "#0067b3", + "selectedBackgroundColorOnDark": "#e6e6e6", + "selectedHoverBackgroundColor": "#003c66", + "selectedHoverBackgroundColorOnDark": "#ffffff", + "selectedDisabledBackgroundColor": "#999999", + "selectedDisabledBackgroundColorOnDark": "#4d4d4d", "borderColor": "#0067b3", "borderColorOnDark": "#e6e6e6", "hoverBorderColor": "#003c66", @@ -219,7 +219,7 @@ "disabledFontColorOnDark": "#999999", "focusColor": "#0095ff", "focusColorOnDark": "#0095ff", - "checkLabelSpacing": "8px" + "checkLabelSpacing": "0.5rem" }, "chip": { "backgroundColor": "#e6e6e6", @@ -803,7 +803,7 @@ "fontSize": "1rem", "fontStyle": "normal", "fontWeight": "400", - "labelFontFamily": "Open Sans, sans-serif", + "labelFontFamily": "Open Sans, sans-serif", "labelFontSize": "0.875rem", "labelFontStyle": "normal", "labelFontWeight": "600", @@ -815,8 +815,8 @@ "helperTextLineHeight": "1.5em", "fontColor": "#000000", "fontColorOnDark": "#ffffff", - "labelFontColor": "#000000", - "helperTextFontColor": "#000000", + "labelFontColor": "#000000", + "helperTextFontColor": "#000000", "fontLetterSpacing": "0", "thumbHeight": "12px", "thumbWidth": "12px", @@ -1094,7 +1094,7 @@ "containerBorderStyle": "solid", "containerBorderRadius": "0.375rem", "optionFocusBorderThickness": "2px", - "optionFocusBorderStyle": "solid", + "optionFocusBorderStyle": "solid", "optionFocusBorderRadius": "0.25rem" }, "upload": {