-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
- malesuada lacus ex, sit amet blandit leo lobortis eget.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+ malesuada lacus ex, sit amet blandit leo lobortis eget.
+
@@ -22,6 +24,18 @@
padding="medium"
disabled
>
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/button-preview/button-preview.component.html b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/button-preview/button-preview.component.html
index ee8c42caa..343b9b9ff 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/button-preview/button-preview.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/button-preview/button-preview.component.html
@@ -19,6 +19,38 @@
+
+
+
+
+
+
+
+
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/number-preview/number-preview.component.html b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/number-preview/number-preview.component.html
deleted file mode 100644
index f7b2e5e6c..000000000
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/number-preview/number-preview.component.html
+++ /dev/null
@@ -1,63 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/number-preview/number-preview.component.ts b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/number-preview/number-preview.component.ts
deleted file mode 100644
index e0365d0e7..000000000
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/number-preview/number-preview.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-number-preview',
- templateUrl: './number-preview.component.html'
-})
-export class NumberPreviewComponent implements OnInit {
-
- numberValue = "12";
-
- constructor() { }
-
- ngOnInit(): void {
- }
-
- numberOnChange(event) {
- this.numberValue = event;
- }
-
-}
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/password-preview/password-preview.component.html b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/password-preview/password-preview.component.html
deleted file mode 100644
index 37eb3c0dc..000000000
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/password-preview/password-preview.component.html
+++ /dev/null
@@ -1,26 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/password-preview/password-preview.component.ts b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/password-preview/password-preview.component.ts
deleted file mode 100644
index dc5241527..000000000
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/password-preview/password-preview.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-password-preview',
- templateUrl: './password-preview.component.html'
-})
-export class PasswordPreviewComponent implements OnInit {
-
- controlledValue = "c";
-
- constructor() { }
-
- ngOnInit(): void {
- }
-
-}
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/progress-bar-preview/progress-bar-preview.component.html b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/progress-bar-preview/progress-bar-preview.component.html
index 971d2084b..f91f33350 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/progress-bar-preview/progress-bar-preview.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/progress-bar-preview/progress-bar-preview.component.html
@@ -1,6 +1,6 @@
-
+
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.html b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.html
index 20d6db6f9..a51156283 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.html
@@ -26,6 +26,20 @@
[value]="option.value"
>
+
+
+
+ ![]()
+
+
@@ -108,6 +122,20 @@
[value]="option.value"
>
+
+
+
+ ![]()
+
+
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.ts b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.ts
index 4d492ae93..6917350fb 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.ts
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.ts
@@ -20,6 +20,24 @@ export class SelectPreviewComponent implements OnInit {
},
];
+ optionsWithIconAndLabels = [
+ {
+ value: 1,
+ iconSrc: "assets/img/home.svg",
+ label: "Home"
+ },
+ {
+ value: 2,
+ iconSrc: "assets/img/home.svg",
+ label: "House"
+ },
+ {
+ value: 3,
+ iconSrc: "assets/img/home.svg",
+ label: "Home"
+ }
+ ];
+
multipleSelected = [""];
constructor() {}
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/theme-builder-sidenav/model/preview-components-map.ts b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/theme-builder-sidenav/model/preview-components-map.ts
index a12dd7db9..a28ec7e3b 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/theme-builder-sidenav/model/preview-components-map.ts
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/theme-builder-sidenav/model/preview-components-map.ts
@@ -30,8 +30,6 @@ import { UploadPreviewComponent } from '../../previews/upload-preview/upload-pre
import { TablePreviewComponent } from '../../previews/table-preview/table-preview.component';
import { NewInputTextPreviewComponent } from '../../previews/new-input-text-preview/new-input-text-preview.component';
import { NewDatePreviewComponent } from '../../previews/new-date-preview/new-date-preview.component';
-import { NumberPreviewComponent } from '../../previews/number-preview/number-preview.component';
-import { PasswordPreviewComponent } from '../../previews/password-preview/password-preview.component';
import { NewTextareaPreviewComponent } from '../../previews/new-textarea-preview/new-textarea-preview.component';
export interface PreviewThemeBuilderComponent{
name: string;
@@ -55,11 +53,9 @@ const tBuilderComponentsPreviewList:Array = [
{name: 'header', component: HeaderPreviewComponent},
{name: 'heading', component: HeadingPreviewComponent},
{name: 'inputText', component: InputTextPreviewComponent},
- {name: 'input', component: NewInputTextPreviewComponent},
+ {name: 'newInputText', component: NewInputTextPreviewComponent},
{name: 'link', component: LinkPreviewComponent},
{name: 'newTextarea', component: NewTextareaPreviewComponent},
- {name: 'number', component: NumberPreviewComponent},
- {name: 'password', component: PasswordPreviewComponent},
{name: 'paginator', component: PaginatorPreviewComponent},
{name: 'progressBar', component: ProgressBarPreviewComponent},
{name: 'radio', component: RadioPreviewComponent},
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/theme-builder-sidenav/theme-builder-sidenav.component.scss b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/theme-builder-sidenav/theme-builder-sidenav.component.scss
index ac212d9a9..b705ec9f3 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/theme-builder-sidenav/theme-builder-sidenav.component.scss
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/theme-builder-sidenav/theme-builder-sidenav.component.scss
@@ -8,7 +8,6 @@
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
- font-family: var(--fontFamily);
font-size: 24px;
display: flex;
-webkit-box-align: center;
@@ -55,7 +54,6 @@
}
.sidenav-links {
padding: 0px 20px;
- font-family: var(--fontFamily);
.nav-item {
margin-bottom: 5px;
padding-left: 0px;
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/theme-builder.module.ts b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/theme-builder.module.ts
index 09420f5c6..5ce81555c 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/theme-builder.module.ts
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/theme-builder.module.ts
@@ -76,8 +76,6 @@ import { UploadPreviewComponent } from './previews/upload-preview/upload-preview
import { TablePreviewComponent } from './previews/table-preview/table-preview.component';
import { NewInputTextPreviewComponent } from './previews/new-input-text-preview/new-input-text-preview.component';
import { NewDatePreviewComponent } from './previews/new-date-preview/new-date-preview.component';
-import { PasswordPreviewComponent } from './previews/password-preview/password-preview.component';
-import { NumberPreviewComponent } from './previews/number-preview/number-preview.component';
import { NewTextareaPreviewComponent } from './previews/new-textarea-preview/new-textarea-preview.component';
@NgModule({
@@ -115,8 +113,6 @@ import { NewTextareaPreviewComponent } from './previews/new-textarea-preview/new
TablePreviewComponent,
NewInputTextPreviewComponent,
NewDatePreviewComponent,
- PasswordPreviewComponent,
- NumberPreviewComponent,
NewTextareaPreviewComponent,
],
imports: [
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 9fdd96272..feec6378c 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
@@ -1,104 +1,103 @@
{
"accordion": {
"backgroundColor": "#ffffff",
- "arrowColor": "#6f2c91",
- "fontColorBase": "#666666",
- "hoverBackgroundColor": "#f5ebf9",
- "disabledFontColor": "#bfbfbf",
- "customContentFontFamily": "Open Sans, sans-serif",
- "customContentFontSize": "1rem",
- "customContentFontWeight": "300",
- "customContentFontColor": "#000000",
- "customContentPanelHeight": "22px",
+ "disabledBackgroundColor": "transparent",
+ "hoverBackgroundColor": "#f2eafa",
+ "arrowColor": "#5f249f",
+ "disabledArrowColor": "#999999",
"assistiveTextFontFamily": "Open Sans, sans-serif",
"assistiveTextFontSize": "1rem",
"assistiveTextFontWeight": "300",
"assistiveTextFontStyle": "italic",
- "assistiveTextFontColor": "#000000",
"assistiveTextLetterSpacing": "0.025em",
+ "assistiveTextFontColor": "#666666",
+ "disabledAssistiveTextFontColor": "#999999",
"assistiveTextMinWidth": "100px",
+ "assistiveTextPaddingRight": "24px",
"assistiveTextPaddingLeft": "0px",
- "assistiveTextPaddingRight": "0px",
"titleLabelFontFamily": "Open Sans, sans-serif",
"titleLabelFontSize": "1rem",
"titleLabelFontWeight": "400",
"titleLabelFontStyle": "normal",
- "titleLabelFontColor": "",
- "titleLabelPaddingLeft": "32px",
+ "titleLabelFontColor": "#000000",
+ "disabledTitleLabelFontColor": "#999999",
+ "titleLabelPaddingLeft": "0px",
"titleLabelPaddingRight": "16px",
- "titlePaddingTop": "0px",
- "titlePaddingBottom": "0px",
- "titleFocusBorderStyle": "solid",
- "titleFocusBorderThickness": "1px",
- "titleFocusBorderColor": "#6f2c91",
+ "titleLabelPaddingTop": "0px",
+ "titleLabelPaddingBottom": "0px",
+ "focusBorderStyle": "solid",
+ "focusBorderThickness": "2px",
+ "focusBorderColor": "#5f249f",
+ "focusBorderOffset": "-1px",
"borderRadius": "4px",
"boxShadowOffsetX": "0px",
"boxShadowOffsetY": "6px",
"boxShadowBlur": "10px",
- "boxShadowColor": "#00000024",
- "iconMaxHeight": "24px",
- "iconMaxWidth": "24px",
+ "boxShadowColor": "#0000001a",
+ "iconColor": "#5f249f",
+ "disabledIconColor": "#999999",
+ "iconSize": "24px",
"iconMarginLeft": "0px",
- "iconMarginRigth": "12px",
- "accordionGroupSeparatorBorderColor": "#00000024",
+ "iconMarginRight": "12px",
+ "accordionGroupSeparatorBorderColor": "#0000001a",
"accordionGroupSeparatorBorderThickness": "1px",
- "accordionGroupSeparatorBorderRadius": "0px",
"accordionGroupSeparatorBorderStyle": "solid"
},
"alert": {
- "overlayColor": "#000000",
- "infoColor": "#CEE0F5",
- "successColor": "#DBF1C4",
- "warningColor": "#FCF2BD",
- "errorColor": "#F9CFCF",
- "focusColor": "#005FCC",
- "titleFontFamily": "Open Sans, sans-serif",
- "titleFontSize": "0.75rem",
- "titleFontColor": "#000000",
- "titleFontWeight": "bold",
- "titleFontStyle": "normal",
- "titleTextTransform": "uppercase",
- "contentFontFamily": "Open Sans, sans-serif",
- "contentFontSize": "0.75rem",
- "contentFontColor": "#000000",
- "contentFontWeight": "normal",
- "titlePaddingRight": "8px",
- "titlePaddingLeft": "12px",
"titlePaddingTop": "0px",
"titlePaddingBottom": "0px",
- "inlineTextPaddingLeft": "8px",
- "inlineTextPaddingRight": "8px",
"inlineTextPaddingTop": "0px",
"inlineTextPaddingBottom": "0px",
- "iconPaddingLeft": "12px",
- "iconPaddingRight": "0px",
"iconPaddingTop": "0px",
"iconPaddingBottom": "0px",
- "iconSize": "24px",
- "contentPaddingLeft": "48px",
- "contentPaddingRight": "12px",
- "contentPaddingTop": "8px",
- "contentPaddingBottom": "20px",
- "overlayOpacity": "0.8",
"boxShadowOffsetX": "0px",
"boxShadowOffsetY": "3px",
"boxShadowBlur": "6px",
"boxShadowColor": "#00000012",
+ "titleFontFamily": "Open Sans, sans-serif",
+ "titleFontColor": "#000000",
+ "titleFontSize": "0.75rem",
+ "titleFontStyle": "normal",
+ "titleFontWeight": "bold",
+ "titleTextTransform": "uppercase",
+ "titlePaddingRight": "0px",
+ "titlePaddingLeft": "0px",
+ "inlineTextFontFamily": "Open Sans, sans-serif",
+ "inlineTextFontColor": "#000000",
+ "inlineTextFontSize": "0.75rem",
+ "inlineTextFontStyle": "normal",
+ "inlineTextFontWeight": "400",
+ "inlineTextPaddingLeft": "0px",
+ "inlineTextPaddingRight": "0px",
+ "contentPaddingLeft": "0px",
+ "contentPaddingRight": "0px",
+ "contentPaddingTop": "20px",
+ "contentPaddingBottom": "30px",
"borderRadius": "4px",
"borderStyle": "solid",
"borderThickness": "1px",
"infoBorderColor": "#0067b3",
"successBorderColor": "#24a148",
- "warningBorderColor": "#f7cf2b",
+ "warningBorderColor": "#c59f07",
"errorBorderColor": "#d0011b",
- "height": "48px"
+ "iconSize": "24px",
+ "iconPaddingLeft": "0px",
+ "iconPaddingRight": "0px",
+ "infoIconColor": "#0067b3",
+ "successIconColor": "#24a148",
+ "warningIconColor": "#c59f07",
+ "errorIconColor": "#d0011b",
+ "infoBackgroundColor": "#e6f4ff",
+ "successBackgroundColor": "#eafaef",
+ "warningBackgroundColor": "#fef9e6",
+ "errorBackgroundColor": "#ffe6e9",
+ "overlayColor": "#000000B3",
+ "hoverActionBackgroundColor": "#0000000D",
+ "focusActionBorderColor": "#0095ff",
+ "activeActionBackgroundColor": "#0000001A"
},
"box": {
"backgroundColor": "#ffffff",
- "fontFamily": "Open Sans, sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": "normal",
- "fontColor": "#000000",
"letterSpacing": "0.025em",
"borderRadius": "4px",
"borderThickness": "0px",
@@ -108,204 +107,183 @@
"noneShadowDepthShadowOffsetY": "none",
"noneShadowDepthShadowBlur": "none",
"noneShadowDepthShadowSpread": "none",
- "noneShadowDepthShadowColor": "none",
+ "noneShadowDepthShadowColor": "transparent",
"oneShadowDepthShadowOffsetX": "0px",
- "oneShadowDepthShadowOffsetY": "2px",
- "oneShadowDepthShadowBlur": "1px",
- "oneShadowDepthShadowSpread": "-1px",
+ "oneShadowDepthShadowOffsetY": "3px",
+ "oneShadowDepthShadowBlur": "6px",
+ "oneShadowDepthShadowSpread": "0px",
"oneShadowDepthShadowColor": "#00000033",
"twoShadowDepthShadowOffsetX": "0px",
"twoShadowDepthShadowOffsetY": "3px",
- "twoShadowDepthShadowBlur": "3px",
- "twoShadowDepthShadowSpread": "-2px",
+ "twoShadowDepthShadowBlur": "10px",
+ "twoShadowDepthShadowSpread": "0px",
"twoShadowDepthShadowColor": "#00000033"
},
"button": {
- "primaryBackgroundColor": "#6f2c91",
- "primaryBackgroundColorOnDark": "#581B81",
- "primaryHoverBackgroundColor": "#000000",
- "primaryHoverBackgroundColorOnDark": "#581B81",
+ "labelFontLineHeight": "1.5em",
+ "labelLetterSpacing": "0.025em",
+ "paddingLeft": "8px",
+ "paddingRight": "8px",
+ "paddingTop": "8px",
+ "paddingBottom": "8px",
+ "focusBorderColor": "#0095ff",
+ "focusBorderColorOnDark": "#0095ff",
+ "primaryBackgroundColor": "#5f249f",
+ "primaryBackgroundColorOnDark": "#5f249f",
"primaryFontColor": "#ffffff",
"primaryFontColorOnDark": "#ffffff",
- "primaryHoverFontColor": "#ffffff",
- "primaryHoverFontColorOnDark": "#000000",
- "primaryActiveBackgroundColor": "#676767",
- "primaryActiveBackgroundColorOnDark": "#581B81",
- "primaryDisabledBackgroundColor": "#d0bddb",
- "primaryDisabledBackgroundColorOnDark": "#ffffff57",
- "primaryDisabledFontColor": "#ffffff",
- "primaryDisabledFontColorOnDark": "#000000",
+ "primaryHoverBackgroundColor": "#4b1c7d",
+ "primaryHoverBackgroundColorOnDark": "#7D2FD0",
+ "primaryActiveBackgroundColor": "#321353",
+ "primaryActiveBackgroundColorOnDark": "#4b1c7d",
+ "primaryDisabledBackgroundColor": "#f2f2f2",
+ "primaryDisabledBackgroundColorOnDark": "#4d4d4d",
+ "primaryDisabledFontColor": "#999999",
+ "primaryDisabledFontColorOnDark": "#999999",
"primaryBorderThickness": "0px",
- "primaryBorderColor": "transparent",
- "primaryBorderColorOnDark": "transparent",
"primaryBorderStyle": "none",
"primaryBorderRadius": "4px",
"primaryFontFamily": "Open Sans, sans-serif",
"primaryFontSize": "1rem",
"primaryFontWeight": "400",
- "primaryPaddingTop": "12px",
- "primaryPaddingBottom": "12px",
- "secondaryOutlinedColor": "#6f2c91",
- "secondaryOutlinedColorOnDark": "#6A229A",
"secondaryBackgroundColor": "transparent",
"secondaryBackgroundColorOnDark": "transparent",
- "secondaryHoverOutlinedColor": "#000000",
- "secondaryHoverOutlinedColorOnDark": "#6A229A",
- "secondaryFontColor": "#000000",
- "secondaryFontColorOnDark": "#FFFFFF",
- "secondaryHoverFontColor": "#000000",
- "secondaryHoverFontColorOnDark": "#FFFFFF",
- "secondaryActiveBackgroundColor": "#dbdbdb",
- "secondaryActiveBackgroundColorOnDark": "#FFFFFF29",
- "secondaryHoverBackgroundColor": "#eeeeee",
- "secondaryHoverBackgroundColorOnDark": "#FFFFFF14",
- "secondaryDisabledOutlinedColor": "#d0bddb",
- "secondaryDisabledOutlinedColorOnDark": "#575757",
+ "secondaryFontColor": "#5f249f",
+ "secondaryFontColorOnDark": "#ffffff",
+ "secondaryHoverFontColor": "#ffffff",
+ "secondaryHoverFontColorOnDark": "#000000",
+ "secondaryBorderColor": "#5f249f",
+ "secondaryBorderColorOnDark": "#ffffff",
+ "secondaryHoverBackgroundColor": "#5f249f",
+ "secondaryHoverBackgroundColorOnDark": "#ffffff",
+ "secondaryActiveBackgroundColor": "#321353",
+ "secondaryActiveBackgroundColorOnDark": "#e6e6e6",
+ "secondaryDisabledBackgroundColor": "transparent",
+ "secondaryDisabledBackgroundColorOnDark": "transparent",
"secondaryDisabledFontColor": "#b1b1b1",
- "secondaryDisabledFontColorOnDark": "#575757",
+ "secondaryDisabledFontColorOnDark": "#999999",
+ "secondaryDisabledBorderColor": "#999999",
+ "secondaryDisabledBorderColorOnDark": "#999999",
"secondaryBorderThickness": "1px",
"secondaryBorderStyle": "solid",
"secondaryBorderRadius": "4px",
"secondaryFontFamily": "Open Sans, sans-serif",
"secondaryFontSize": "1rem",
"secondaryFontWeight": "400",
- "secondaryPaddingTop": "10px",
- "secondaryPaddingBottom": "10px",
"textBackgroundColor": "transparent",
"textBackgroundColorOnDark": "transparent",
- "textHoverBackgroundColor": "#000000",
- "textHoverBackgroundColorOnDark": "#6A229A80",
- "textFontColor": "#6f2c91",
- "textFontColorOnDark": "#FFFFFF",
- "textHoverFontColor": "#ffffff",
- "textHoverFontColorOnDark": "#FFFFFF",
- "textActiveBackgroundColor": "#676767",
- "textActiveBackgroundColorOnDark": "#581B81",
- "textDisabledFontColor": "#d0bddb",
+ "textFontColor": "#5f249f",
+ "textFontColorOnDark": "#ffffff",
+ "textHoverBackgroundColor": "#f2eafa",
+ "textHoverBackgroundColorOnDark": "#4d4d4d",
+ "textActiveBackgroundColor": "#e5d5f6",
+ "textActiveBackgroundColorOnDark": "#666666",
"textDisabledBackgroundColor": "transparent",
"textDisabledBackgroundColorOnDark": "transparent",
- "textDisabledFontColorOnDark": "#FFFFFF80",
+ "textDisabledFontColor": "#999999",
+ "textDisabledFontColorOnDark": "#999999",
"textBorderThickness": "0px",
- "textBorderColor": "transparent",
- "textBorderColorOnDark": "transparent",
"textBorderStyle": "none",
"textBorderRadius": "4px",
"textFontFamily": "Open Sans, sans-serif",
"textFontSize": "1rem",
- "textFontWeight": "400",
- "textPaddingTop": "12px",
- "textPaddingBottom": "12px",
- "focusColor": "#005FCC",
- "labelFontLineHeight": "1em",
- "labelLetterSpacing": "0.025em",
- "iconSize": "20px",
- "height": "40px"
+ "textFontWeight": "400"
},
"card": {
"height": "220px",
"width": "400px"
},
"checkbox": {
+ "backgroundColorChecked": "#0067b3",
+ "backgroundColorCheckedOnDark": "#e6e6e6",
+ "hoverBackgroundColorChecked": "#003c66",
+ "hoverBackgroundColorCheckedOnDark": "#ffffff",
+ "disabledBackgroundColorChecked": "#999999",
+ "disabledBackgroundColorCheckedOnDark": "#4d4d4d",
"borderColor": "#0067b3",
- "hoverBorderColor": "#003c66",
"borderColorOnDark": "#e6e6e6",
+ "hoverBorderColor": "#003c66",
"hoverBorderColorOnDark": "#ffffff",
- "selectedBackgroundColor": "#0067b3",
- "selectedHoverBackgroundColor": "#003c66",
- "selectedBackgroundColorOnDark": "#e6e6e6",
- "selectedHoverBackgroundColorOnDark": "#ffffff",
- "checkColor": "#ffffff",
- "checkColorOnDark": "#000000",
- "fontColor": "#000000",
- "fontColorOnDark": "#FFFFFF",
- "selectedDisabledBackgroundColor": "#999999",
- "selectedDisabledBackgroundColorOnDark": "#4d4d4d",
"disabledBorderColor": "#999999",
"disabledBorderColorOnDark": "#4d4d4d",
+ "checkColor": "#ffffff",
+ "checkColorOnDark": "#000000",
"disabledCheckColor": "#ffffff",
"disabledCheckColorOnDark": "#999999",
- "disabledFontColor": "#999999",
- "disabledFontColorOnDark": "#999999",
"fontFamily": "Open Sans, sans-serif",
- "fontSize": "1rem",
+ "fontSize": "0.875rem",
"fontWeight": "400",
- "checkLabelSpacing": "10px",
+ "fontColor": "#000000",
+ "fontColorOnDark": "#ffffff",
+ "disabledFontColor": "#999999",
+ "disabledFontColorOnDark": "#999999",
"focusColor": "#0095ff",
- "focusColorOnDark": "#0095ff"
+ "focusColorOnDark": "#0095ff",
+ "checkLabelSpacing": "8px"
},
"chip": {
"backgroundColor": "#e6e6e6",
- "borderColor": "transparent",
- "fontColor": "#000000",
"disabledBackgroundColor": "#f2f2f2",
"disabledFontColor": "#999999",
+ "fontColor": "#000000",
"fontFamily": "Open Sans, sans-serif",
"fontSize": "1rem",
- "fontWeight": "400",
"fontStyle": "normal",
- "borderRadius": "50px",
- "borderThickness": "2px",
+ "fontWeight": "400",
+ "borderColor": "transparent",
+ "borderRadius": "80px",
+ "borderThickness": "0px",
"borderStyle": "solid",
- "height": "18px",
"contentPaddingLeft": "16px",
"contentPaddingRight": "16px",
- "contentPaddingTop": "10px",
- "contentPaddingBottom": "10px",
+ "contentPaddingTop": "0px",
+ "contentPaddingBottom": "0px",
"iconSize": "24px",
- "iconPaddingLeft": "0px",
- "iconPaddingRight": "0px",
+ "iconSpacing": "8px",
"iconColor": "#000000",
"disabledIconColor": "#999999",
- "focusColor": "#005FCC"
+ "focusColor": "#0067b3"
},
"date": {
- "pickerSelectedDateBackgroundColor": "#6f2c91",
+ "pickerSelectedDateBackgroundColor": "#5f249f",
"pickerSelectedDateColor": "#ffffff",
"pickerBackgroundColor": "#ffffff",
"pickerFontColor": "#000000",
- "pickerActualDate": "#D9D9D9",
"pickerHoverDateBackgroundColor": "#d0bddb",
"pickerHoverDateFontColor": "#000000",
- "pickerHoverHeaderColor": "#0000001F",
+ "pickerActualDateColor": "#D9D9D9",
"pickerYearColor": "#000000",
- "pickerLabelColor": "#b1b1b1",
- "pickerWeekLabelColor": "#b1b1b1",
+ "pickerMonthColor": "#000000",
+ "pickerWeekLabelColor": "#000000",
"pickerBackgroundColorMonthArrows": "transparent",
"focusColor": "#005FCC",
"fontFamily": "Open Sans, sans-serif",
- "pickerHeight": "300px",
+ "pickerHeight": "316px",
"pickerWidth": "290px"
},
"newDate": {
- "pickerSelectedDateBackgroundColor": "#6f2c91",
+ "pickerSelectedDateBackgroundColor": "#5f249f",
"pickerSelectedDateColor": "#ffffff",
"pickerBackgroundColor": "#ffffff",
"pickerFontColor": "#000000",
- "pickerActualDate": "#D9D9D9",
"pickerHoverDateBackgroundColor": "#d0bddb",
"pickerHoverDateFontColor": "#000000",
- "pickerHoverHeaderColor": "#0000001F",
+ "pickerActualDateColor": "#D9D9D9",
"pickerYearColor": "#000000",
- "pickerLabelColor": "#b1b1b1",
- "pickerWeekLabelColor": "#b1b1b1",
+ "pickerMonthColor": "#000000",
+ "pickerWeekLabelColor": "#000000",
"pickerBackgroundColorMonthArrows": "transparent",
"focusColor": "#005FCC",
"fontFamily": "Open Sans, sans-serif",
- "pickerHeight": "300px",
+ "pickerHeight": "316px",
"pickerWidth": "290px"
},
"dialog": {
"overlayColor": "#000000",
- "overlayOpacity": "0.8",
- "scrollBarThumbColor": "#666666",
- "scrollBarTrackColor": "#D9D9D9",
+ "overlayOpacity": "0.7",
"backgroundColor": "#ffffff",
- "fontFamily": "Open Sans, sans-serif",
- "fontSize": "1rem",
- "fontWeight": "400",
- "fontColor": "#000000",
- "closeIconWidth": "34px",
- "closeIconHeight": "34px",
+ "closeIconWidth": "24px",
+ "closeIconHeight": "24px",
"closeIconTopPosition": "20px",
"closeIconRightPosition": "20px",
"closeIconBackgroundColor": "none",
@@ -321,42 +299,53 @@
},
"dropdown": {
"buttonBackgroundColor": "#ffffff",
- "buttonFontColor": "#000000",
- "optionsListBackgroundColor": "#ffffff",
- "optionsListHoverBackgroundColor": "#F2F2F2",
- "optionsListActiveBackgroundColor": "#D9D9D9",
- "buttonHoverBackgroundColor": "#F2F2F2",
+ "hoverButtonBackgroundColor": "#f2f2f2",
"activeButtonBackgroundColor": "#D9D9D9",
- "disabledButtonBackgroundColor": "transparent",
- "disabledButtonFontColor": "#b1b1b1",
- "scrollBarThumbColor": "#666666",
- "scrollBarTrackColor": "#D9D9D9",
- "focusColor": "#005FCC",
- "fontFamily": "Open Sans, sans-serif",
+ "buttonFontFamily": "Open Sans, sans-serif",
"buttonFontSize": "1rem",
"buttonFontStyle": "normal",
"buttonFontWeight": "400",
- "minHeight": "40px",
+ "buttonFontColor": "#000000",
+ "buttonIconSize": "20px",
+ "buttonIconSpacing": "10px",
+ "buttonIconColor": "#000000",
+ "buttonPaddingTop": "0px",
+ "buttonPaddingBottom": "0px",
+ "buttonPaddingLeft": "16px",
+ "buttonPaddingRight": "16px",
+ "disabledColor": "#b1b1b1",
+ "disabledButtonBackgroundColor": "transparent",
+ "disabledBorderColor": "#b1b1b1",
+ "optionBackgroundColor": "#ffffff",
+ "hoverOptionBackgroundColor": "#f2f2f2",
+ "activeOptionBackgroundColor": "#D9D9D9",
+ "optionFontFamily": "Open Sans, sans-serif",
+ "optionFontSize": "16px",
+ "optionFontStyle": "normal",
+ "optionFontWeight": "400",
+ "optionFontColor": "#000000",
+ "optionIconSize": "20px",
+ "optionIconSpacing": "10px",
+ "optionIconColor": "#000000",
+ "optionPaddingTop": "6px",
+ "optionPaddingBottom": "6px",
+ "optionPaddingLeft": "16px",
+ "optionPaddingRight": "16px",
+ "caretIconSize": "24px",
+ "caretIconColor": "#000000",
+ "caretIconSpacing": "12px",
"borderRadius": "4px",
"borderStyle": "none",
"borderThickness": "0px",
"borderColor": "transparent",
- "optionsHeight": "36px",
- "caretIconMarginRight": "0px",
- "caretIconMarginLeft": "0px",
- "caretIconMarginTop": "0px",
- "caretIconMarginBottom": "0px",
- "optionsFontColor": "#000000",
- "optionsFontSize": "1rem",
- "optionsFontStyle": "normal",
- "optionsFontWeight": "400",
- "iconSize": "20px",
- "iconOptionSpacing": "12px",
- "iconColor": "#000000"
+ "scrollBarThumbColor": "#666666",
+ "scrollBarTrackColor": "#D9D9D9",
+ "focusColor": "#005FCC"
},
"footer": {
+ "height": "124px",
"backgroundColor": "#000000",
- "bottomLinksDividerColor": "#1489fb",
+ "bottomLinksDividerColor": "#0095ff",
"bottomLinksDividerThickness": "1px",
"bottomLinksDividerStyle": "solid",
"bottomLinksDividerSpacing": "8px",
@@ -364,42 +353,31 @@
"bottomLinksFontSize": "0.75rem",
"bottomLinksFontStyle": "normal",
"bottomLinksFontWeight": "400",
- "bottomLinksFontColor": "",
+ "bottomLinksFontColor": "#ffffff",
"bottomLinksTextDecoration": "none",
"copyrightFontFamily": "Open Sans, sans-serif",
"copyrightFontSize": "0.75rem",
"copyrightFontStyle": "normal",
"copyrightFontWeight": "400",
- "copyrightFontColor": "",
- "fontColorBase": "#ffffff",
+ "copyrightFontColor": "#ffffff",
"logo": "assets/dxc-logo-wh.svg",
"logoHeight": "32px",
"logoWidth": "auto",
- "minHeight": "124px",
- "socialIconSize": "24px",
- "socialIconsGutter": "16px"
+ "socialLinksSize": "24px",
+ "socialLinksGutter": "16px",
+ "socialLinksColor": "#ffffff"
},
"header": {
"backgroundColor": "#ffffff",
- "customContentFontFamily": "",
- "customContentFontStyle": "normal",
- "customContentFontColor": "",
- "customContentFontSize": "",
- "customContentFontWeight": "400",
- "dropdownBackgroundColor": "transparent",
- "dropdownHoverBackgroundColor": "transparent",
- "fontColorBase": "#000000",
- "fontFamilyBase": "Open Sans, sans-serif",
- "fontSizeBase": "16px",
- "hamburguerFocusColor": "#005FCC",
- "hamburguerFontFamily": "Open Sans",
+ "hamburguerFocusColor": "#0095ff",
+ "hamburguerFontFamily": "Open Sans, sans-serif",
"hamburguerFontStyle": "normal",
- "hamburguerFontColor": "",
+ "hamburguerFontColor": "#000000",
"hamburguerFontSize": "10px",
"hamburguerFontWeight": "600",
- "hamburguerColor": "#000000",
- "hamburguerHoverColor": "#dbdbdb",
"hamburguerTextTransform": "uppercase",
+ "hamburguerIconColor": "#000000",
+ "hamburguerHoverColor": "#dbdbdb",
"logo": "assets/DXC_Logo_Black_RGB.svg",
"logoResponsive": "assets/DXC_Logo_Black_RGB.svg",
"logoHeight": "32px",
@@ -408,11 +386,6 @@
"menuZindex": "2000",
"menuTabletWidth": "60vw",
"menuMobileWidth": "100vw",
- "menuCustomContentFontFamily": "",
- "menuCustomContentFontStyle": "normal",
- "menuCustomContentFontColor": "",
- "menuCustomContentFontSize": "",
- "menuCustomContentFontWeight": "400",
"minHeight": "64px",
"overlayColor": "#565656",
"overlayOpacity": "0.7",
@@ -426,38 +399,36 @@
"underlinedStyle": "solid"
},
"heading": {
- "fontFamilyBase": "Open Sans, sans-serif",
- "fontColorBase": "inherit",
- "level1FontColor": "",
- "level1FontFamily": "",
+ "level1FontColor": "#000000",
+ "level1FontFamily": "Open Sans, sans-serif",
"level1FontSize": "3.75rem",
"level1FontStyle": "normal",
"level1FontWeight": "400",
"level1LineHeight": "1.365em",
"level1LetterSpacing": "-0.025em",
- "level2FontColor": "",
- "level2FontFamily": "",
+ "level2FontColor": "#000000",
+ "level2FontFamily": "Open Sans, sans-serif",
"level2FontSize": "3rem",
"level2FontStyle": "normal",
"level2FontWeight": "400",
"level2LineHeight": "1.5em",
- "level2LetterSpacing": "0em",
- "level3FontColor": "",
- "level3FontFamily": "",
+ "level2LetterSpacing": "0",
+ "level3FontColor": "#000000",
+ "level3FontFamily": "Open Sans, sans-serif",
"level3FontSize": "2rem",
"level3FontStyle": "normal",
"level3FontWeight": "400",
"level3LineHeight": "1.365em",
"level3LetterSpacing": "0.025em",
- "level4FontColor": "",
- "level4FontFamily": "",
+ "level4FontColor": "#000000",
+ "level4FontFamily": "Open Sans, sans-serif",
"level4FontSize": "1.5rem",
"level4FontStyle": "normal",
"level4FontWeight": "400",
"level4LineHeight": "1.5em",
- "level4LetterSpacing": "0em",
- "level5FontColor": "",
- "level5FontFamily": "",
+ "level4LetterSpacing": "0",
+ "level5FontColor": "#000000",
+ "level5FontFamily": "Open Sans, sans-serif",
"level5FontSize": "1.25rem",
"level5FontStyle": "normal",
"level5FontWeight": "400",
@@ -465,21 +436,44 @@
"level5LetterSpacing": "0.025em"
},
"inputText": {
+ "fontFamily": "Open Sans, sans-serif",
"assistiveTextFontColor": "#000000",
"assistiveTextFontColorOnDark": "#ffffff",
"assistiveTextFontSize": "0.75rem",
"assistiveTextFontStyle": "normal",
"assistiveTextFontWeight": "400",
- "disabledFontColor": "#b1b1b1",
- "disabledFontColorOnDark": "#575757",
+ "disabledColor": "#b1b1b1",
+ "disabledColorOnDark": "#575757",
"errorColor": "#D0011B",
"errorColorOnDark": "#FE344F",
- "fontColorBase": "#000000",
- "fontColorBaseOnDark": "#ffffff",
- "fontFamilyBase": "Open Sans, sans-serif",
- "fontSizeBase": "16px",
+ "optionBackgroundColor": "#ffffff",
+ "optionBorderColor": "#000000",
+ "optionBorderThickness": "0px",
+ "optionBorderStyle": "solid",
+ "optionFontColor": "#000000",
+ "optionFontColorOnDark": "#ffffff",
+ "optionFontSize": "1rem",
+ "optionFontStyle": "normal",
+ "optionFontWeight": "400",
+ "optionPaddingBottom": "6px",
+ "optionPaddingTop": "6px",
"hoverOptionColor": "#000000",
+ "hoverOptionBackgroundColor": "#f2f2f2",
+ "hoverOptionBackgroundColorOnDark": "#bfbfbf",
+ "scrollBarThumbColor": "#666666",
+ "scrollBarTrackColor": "#D9D9D9",
+ "selectedOptionBackgroundColor": "#D9D9D9",
+ "selectedOptionBackgroundColorOnDark": "#D9D9D9",
+ "labelFontColor": "#000000",
+ "labelFontColorOnDark": "#ffffff",
"labelFontSize": "1rem",
+ "labelFontStyle": "normal",
+ "labelFontWeight": "400",
+ "valueFontColor": "#000000",
+ "valueFontColorOnDark": "#ffffff",
+ "valueFontSize": "1rem",
+ "valueFontStyle": "normal",
+ "valueFontWeight": "400",
"prefixIconColor": "#000000",
"prefixIconColorOnDark": "#ffffff",
"prefixLabelFontColor": "#000000",
@@ -487,11 +481,6 @@
"prefixLabelFontSize": "1rem",
"prefixLabelFontStyle": "normal",
"prefixLabelFontWeight": "400",
- "scrollBarThumbColor": "#666666",
- "scrollBarTrackColor": "#D9D9D9",
- "optionHoverBackgroundColor": "#f2f2f2",
- "optionActiveBackgroundColor": "#D9D9D9",
- "optionFocusColor": "#005FCC",
"suffixIconColor": "#000000",
"suffixIconColorOnDark": "#ffffff",
"suffixLabelFontColor": "#000000",
@@ -505,7 +494,7 @@
"underlineFocusColorOnDark": "#ffffff",
"underlineThickness": "1px"
},
- "input": {
+ "newInputText": {
"disabledBorderColor": "#808080",
"disabledBorderColorOnDark": "#999999",
"disabledContainerFillColor": "#f2f2f2",
@@ -606,8 +595,6 @@
"activeListOptionBackgroundColor": "#cccccc"
},
"newTextarea": {},
- "number": {},
- "password": {},
"link": {
"fontColor": "#0067b3",
"fontFamily": "inherit",
@@ -615,7 +602,7 @@
"fontStyle": "normal",
"fontWeight": "400",
"iconSize": "16px",
- "iconGutter": "4px",
+ "iconSpacing": "4px",
"underlineSpacing": "1px",
"underlineStyle": "solid",
"underlineThickness": "1px",
@@ -635,6 +622,7 @@
"fontSize": "0.875rem",
"fontStyle": "normal",
"fontWeight": "400",
+ "fontTextTransform": "none",
"height": "64px",
"width": "100%",
"marginRight": "40px",
@@ -647,27 +635,36 @@
"totalItemsContainerMarginLeft": "0px"
},
"progressBar": {
- "trackLineColor": "#6f2c91",
+ "trackLineColor": "#5f249f",
+ "trackLineColorOnDark": "#a46ede",
"totalLineColor": "#cecece",
"labelFontFamily": "Open Sans, sans-serif",
"labelFontSize": "0.75rem",
"labelFontStyle": "normal",
"labelFontWeight": "400",
"labelFontColor": "#000000",
+ "labelFontColorOnDark": "#ffffff",
"labelFontTextTransform": "uppercase",
"valueFontFamily": "Open Sans, sans-serif",
"valueFontSize": "0.75rem",
"valueFontStyle": "normal",
"valueFontWeight": "400",
"valueFontColor": "#000000",
+ "valueFontColorOnDark": "#ffffff",
"valueFontTextTransform": "uppercase",
+ "helperTextFontColor": "#000000",
+ "helperTextFontColorOnDark": "#ffffff",
+ "helperTextFontSize": "0.75rem",
+ "helperTextFontStyle": "normal",
+ "helperTextFontWeight": "400",
+ "helperTextFontFamily": "Open Sans, sans-serif",
"thickness": "9px",
"borderRadius": "5px",
"overlayColor": "#000000",
"overlayOpacity": "0.8"
},
"radio": {
- "circleLabelSpacing": "12px",
+ "circleLabelSpacing": "8px",
"circleSize": "20px",
"color": "#000000",
"colorOnDark": "#FFFFFF",
@@ -685,21 +682,19 @@
"fontWeight": "400"
},
"select": {
- "checkboxOptionSpacing": "12px",
- "color": "#000000",
- "colorOnDark": "#FFFFFF",
+ "optionCheckboxSpacing": "12px",
"disabledColor": "#b1b1b1",
"disabledColorOnDark": "#575757",
"errorColor": "#D0011B",
"errorColorOnDark": "#FE344F",
"focusColor": "#005FCC",
- "focusColorOnDark": "#005FCC",
+ "focusColorOnDark": "#1682FF",
"fontFamily": "Open Sans, sans-serif",
- "hoveredOptionBackgroundColor": "#f2f2f2",
- "hoveredOptionBackgroundColorOnDark": "#f2f2f2",
- "iconColor": "",
- "iconOptionSpacing": "12px",
- "iconSize": "20px",
+ "hoverOptionBackgroundColor": "#f2f2f2",
+ "hoverOptionBackgroundColorOnDark": "#f2f2f2",
+ "optionIconColor": "#000000",
+ "optionIconSpacing": "12px",
+ "optionIconSize": "20px",
"labelFontSize": "1rem",
"labelFontStyle": "normal",
"labelFontWeight": "400",
@@ -712,28 +707,38 @@
"optionPaddingTop": "6px",
"optionPaddingLeft": "16px",
"optionPaddingRight": "16px",
- "optionsBackgroundColor": "#FFFFFF",
- "optionsBorderColor": "none",
- "optionsBorderThickness": "0px",
- "optionsBorderStyle": "solid",
- "optionsFontColor": "",
- "optionsFontSize": "16px",
- "optionsFontStyle": "normal",
- "optionsFontWeight": "400",
+ "optionBackgroundColor": "#FFFFFF",
+ "optionBorderColor": "none",
+ "optionBorderThickness": "0px",
+ "optionBorderStyle": "solid",
+ "optionFontColor": "#000000",
+ "optionFontSize": "16px",
+ "optionFontStyle": "normal",
+ "optionFontWeight": "400",
"scrollBarThumbColor": "#666666",
"scrollBarTrackColor": "#D9D9D9",
"selectedOptionBackgroundColor": "#D9D9D9",
- "selectedOptionBackgroundColorOnDark": "#D9D9D9"
+ "selectedOptionBackgroundColorOnDark": "#D9D9D9",
+ "labelFontColor": "#000000",
+ "labelFontColorOnDark": "#ffffff",
+ "required": "#d0011b",
+ "underlineColor": "#000000",
+ "underlineColorOnDark": "#ffffff",
+ "underlineFocusColor": "#000000",
+ "underlineFocusColorOnDark": "#ffffff",
+ "underlineThickness": "1px",
+ "valueFontColor": "#000000",
+ "valueFontColorOnDark": "#ffffff",
+ "valueFontSize": "1rem",
+ "valueFontStyle": "normal",
+ "valueFontWeight": "400",
+ "arrowColor": "#000000",
+ "arrowColorOnDark": "#ffffff"
},
"sidenav": {
"backgroundColor": "#F8F8F8",
"arrowContainerColor": "#D9D9D9",
"arrowColor": "#000000",
- "customContentFontFamily": "Open Sans, sans-serif",
- "customContentFontSize": "16px",
- "customContentFontStyle": "normal",
- "customContentFontWeight": "400",
- "customContentFontColor": "#000000",
"titleFontFamily": "Open Sans, sans-serif",
"titleFontSize": "1.5rem",
"titleFontStyle": "normal",
@@ -777,23 +782,28 @@
"thumbBackgroundColor": "#0067b3",
"thumbBackgroundColorOnDark": "#0095ff",
"activeThumbBackgroundColor": "#003c66",
- "activeThumbBackgroundColorOnDark": "#0067b3",
- "dotsSize": "4px",
- "dotsVerticalPosition": "-1px",
- "tickMarkBackgroundColor": "#0067b3",
- "tickMarkBackgroundColorOnDark": "#0095ff",
+ "activeThumbBackgroundColorOnDark": "#003c66",
+ "hoverThumbBackgroundColor": "#003c66",
+ "hoverThumbBackgroundColorOnDark": "#003c66",
+ "focusThumbBackgroundColor": "#003c66",
+ "focusThumbBackgroundColorOnDark": "#0095ff",
+ "tickSize": "4px",
+ "tickVerticalPosition": "-1px",
+ "tickBackgroundColor": "#0067b3",
+ "tickBackgroundColorOnDark": "#0095ff",
"lineThickness": "2px",
"lineVerticalPosition": "0px",
"trackLineColor": "#0067b3",
"trackLineColorOnDark": "#0095ff",
"totalLineColor": "#e6e6e6",
"totalLineColorOnDark": "#bfbfbf",
+ "disabledFontColor": "#999999",
"disabledThumbVerticalPosition": "-6px",
"disabledThumbBackgroundColor": "#bfbfbf",
"disabledThumbBackgroundColorOnDark": "#999999",
- "disabledDotsVerticalPosition": "-1px",
- "disabledTickMarkBackgroundColor": "#bfbfbf",
- "disabledTickMarkBackgroundColorOnDark": "#999999",
+ "disabledTickVerticalPosition": "-1px",
+ "disabledTickBackgroundColor": "#bfbfbf",
+ "disabledTickBackgroundColorOnDark": "#999999",
"disabledTrackLineColor": "#e6f4ff",
"disabledTrackLineColorOnDark": "#999999",
"disabledTotalLineColor": "#f2f2f2",
@@ -818,7 +828,7 @@
"progressValueTextAlign": "center",
"overlayBackgroundColor": "#000000",
"overlayOpacity": "0.8",
- "overlayTrackCircleColor": "#a46ede",
+ "trackCircleColorOnDark": "#a46ede",
"overlayLabelFontFamily": "Open Sans, sans-serif",
"overlayLabelFontSize": "0.875rem",
"overlayLabelFontStyle": "normal",
@@ -833,8 +843,8 @@
"overlayProgressValueTextAlign": "center"
},
"switch": {
- "checkedTrackBackgroundColor": "#6f2c91",
- "checkedTrackBackgroundColorOnDark": "#6f2c91",
+ "checkedTrackBackgroundColor": "#5f249f",
+ "checkedTrackBackgroundColorOnDark": "#5f249f",
"checkedThumbBackgroundColor": "#ffffff",
"checkedThumbBackgroundColorOnDark": "#ffffff",
"uncheckedTrackBackgroundColor": "#D9D9D9",
@@ -859,7 +869,7 @@
"labelFontColor": "#000000",
"labelFontColorOnDark": "#ffffff",
"thumbFocusColor": "#005FCC",
- "thumbFocusColorOnDark": "#1489FB",
+ "thumbFocusColorOnDark": "#1682FF",
"thumbHeight": "24px",
"thumbWidth": "24px",
"thumbShift": "-2px",
@@ -874,7 +884,11 @@
"iconColor": "#FFFFFF",
"iconSectionWidth": "48px",
"iconHeight": "24px",
- "iconWidth": "24px"
+ "iconWidth": "24px",
+ "fontFamily": "Open Sans, sans-serif",
+ "fontColor": "#000000",
+ "fontSize": "0.875rem",
+ "fontWeight": "400"
},
"table": {
"rowSeparatorThickness": "1px",
@@ -950,26 +964,22 @@
"badgeRadiusWithNotificationNumber": "10px"
},
"textarea": {
- "disabledFontColor": "#b1b1b1",
- "disabledFontColorOnDark": "#575757",
+ "fontFamily": "Open Sans, sans-serif",
"errorColor": "#D0011B",
"errorColorOnDark": "#FE344F",
- "assistiveTextFontFamily": "Open Sans, sans-serif",
"assistiveTextFontSize": "0.75rem",
"assistiveTextFontStyle": "normal",
"assistiveTextFontWeight": "400",
"assistiveTextFontColor": "#000000",
"assistiveTextFontColorOnDark": "#ffffff",
"assistiveTextLetterSpacing": "0em",
- "customContentFontFamily": "Open Sans, sans-serif",
- "customContentFontSize": "1rem",
- "customContentFontStyle": "normal",
- "customContentFontWeight": "400",
- "customContentFontColor": "#000000",
- "customContentFontColorOnDark": "#ffffff",
- "customContentLetterSpacing": "0em",
- "customContentLineHeight": "1.1875em",
- "labelFontFamily": "Open Sans, sans-serif",
+ "valueFontSize": "1rem",
+ "valueFontStyle": "normal",
+ "valueFontWeight": "400",
+ "valueFontColor": "#000000",
+ "valueFontColorOnDark": "#ffffff",
+ "valueLetterSpacing": "0",
+ "valueLineHeight": "1.1875em",
"labelFontSize": "1rem",
"labelFontStyle": "normal",
"labelFontWeight": "400",
@@ -979,15 +989,22 @@
"scrollBarThumbColor": "#666666",
"scrollBarThumbColorOnDark": "#ffffff",
"scrollBarTrackColor": "#D9D9D9",
- "scrollBarTrackColorOnDark": "#999999"
+ "scrollBarTrackColorOnDark": "#999999",
+ "disabledColor": "#b1b1b1",
+ "disabledColorOnDark": "#575757",
+ "underlineColor": "#000000",
+ "underlineColorOnDark": "#ffffff",
+ "underlineFocusColor": "#000000",
+ "underlineFocusColorOnDark": "#ffffff",
+ "underlineThickness": "1px"
},
"toggleGroup": {
"fontFamily": "Open Sans, sans-serif",
- "fontSize": "0.875rem",
+ "fontSize": "1rem",
"fontStyle": "normal",
"fontWeight": "400",
"fontLetterSpacing": "0.05em",
- "focusColor": "#005FCC",
+ "focusColor": "#0095ff",
"selectedBackgroundColor": "#5f249f",
"selectedHoverBackgroundColor": "#4b1c7d",
"selectedActiveBackgroundColor": "#321353",
@@ -1004,8 +1021,12 @@
"iconSize": "24px",
"iconPaddingRight": "8px",
"iconPaddingLeft": "8px",
+ "iconPaddingTop": "8px",
+ "iconPaddingBottom": "8px",
"labelPaddingLeft": "24px",
- "labelPaddingRight": "24px"
+ "labelPaddingRight": "24px",
+ "labelPaddingTop": "8px",
+ "labelPaddingBottom": "8px"
},
"upload": {
"fontFamily": "Open Sans, sans-serif",
@@ -1014,10 +1035,9 @@
"scrollBarTrackColor": "#D9D9D9",
"errorColor": "#D0011B",
"backgroundColor": "#ffffff",
- "draggingAreaBackgroundColor": "#f2f2f2",
+ "draggingStateBackgroundColor": "#f2f2f2",
"dragAndDropIconColor": "#5f249f",
- "dragAndDropIconHeight": "43.5px",
- "dragAndDropIconWidth": "43.5px",
+ "dragAndDropIconSize": "43.5px",
"dragAndDropTitleFontSize": "1.25rem",
"dragAndDropTitleFontStyle": "normal",
"dragAndDropTitleFontWeight": "bold",
@@ -1025,29 +1045,25 @@
"dragAndDropTitleFontColor": "#000000",
"dragAndDropDescriptionFontSize": "1rem",
"dragAndDropDescriptionFontStyle": "italic",
- "dragAndDropDescriptionFontWeight": "normal",
- "dragAndDropTextDescriptionFontTextTransform": "none",
- "dragAndDropTextDescriptionFontColor": "#666666",
+ "dragAndDropDescriptionFontWeight": "400",
+ "dragAndDropDescriptionFontTextTransform": "none",
+ "dragAndDropDescriptionFontColor": "#666666",
"dragAndDropDraggingStateIconColor": "#666666",
- "dragAndDropDraggingStateIconHeight": "43.5px",
- "dragAndDropDraggingStateIconWidth": "43.5px",
+ "dragAndDropDraggingStateIconSize": "43.5px",
"dragAndDropDraggingStateFontSize": "1rem",
"dragAndDropDraggingStateFontStyle": "normal",
- "dragAndDropDraggingStateFontWeight": "normal",
- "dragAndDropTextDraggingStateFontTextTransform": "none",
- "dragAndDropTextDraggingStateFontColor": "#666666",
+ "dragAndDropDraggingStateFontWeight": "400",
+ "dragAndDropDraggingStateFontTextTransform": "none",
+ "dragAndDropDraggingStateFontColor": "#666666",
"dragAndDropAreaIconColor": "#000000",
- "dragAndDropAreaIconHeight": "24px",
- "dragAndDropAreaIconWidth": "24px",
+ "dragAndDropAreaIconSize": "24px",
"dragAndDropAreaTextFontSize": "0.75rem",
"dragAndDropAreaTextFontStyle": "normal",
"dragAndDropAreaTextFontWeight": "400",
"dragAndDropAreaTextFontTextTransform": "none",
"dragAndDropAreaTextFontColor": "#000000",
"fileDeleteIconColor": "#000000",
- "fileDeleteIconHeight": "24px",
- "fileDeleteIconWidth": "30px",
- "fileHoverColor": "#eeeeee",
+ "fileDeleteIconSize": "24px",
"fileUnderlineColor": "#D9D9D9",
"fileUnderlineThickness": "1px",
"fileNameFontSize": "1rem",
@@ -1060,20 +1076,20 @@
"fileTypeFontWeight": "400",
"fileTypeFontTextTransform": "uppercase",
"fileTypeFontColor": "#000000",
- "fileUploadedIconColor": "#000000",
- "fileUploadedIconHeight": "24px",
- "fileUploadedIconWidth": "24px",
- "filesUploadedTitleFontSize": "1.25rem",
- "filesUploadedTitleFontStyle": "normal",
- "filesUploadedTitleFontWeight": "400",
- "filesUploadedTitleFontTextTransform": "none",
- "filesUploadedTitleFontColor": "#000000",
- "filesUploadedSubtitleFontSize": "0.875rem",
- "filesUploadedSubtitleFontStyle": "normal",
- "filesUploadedSubtitleFontWeight": "400",
- "filesUploadedSubtitleFontTextTransform": "none",
- "filesUploadedSubtitleFontColor": "#666666",
- "filesUploadedNumberFontWeight": "bold"
+ "hoverFileColor": "#eeeeee",
+ "uploadedFileIconColor": "#000000",
+ "uploadedFileIconSize": "24px",
+ "uploadedFilesTitleFontSize": "1.25rem",
+ "uploadedFilesTitleFontStyle": "normal",
+ "uploadedFilesTitleFontWeight": "400",
+ "uploadedFilesTitleFontTextTransform": "none",
+ "uploadedFilesTitleFontColor": "#000000",
+ "uploadedFilesSubtitleFontSize": "0.875rem",
+ "uploadedFilesSubtitleFontStyle": "normal",
+ "uploadedFilesSubtitleFontWeight": "400",
+ "uploadedFilesSubtitleFontTextTransform": "none",
+ "uploadedFilesSubtitleFontColor": "#666666",
+ "uploadedFilesNumberFontWeight": "bold"
},
"wizard": {
"disabledBackgroundColor": "#D9D9D9",
@@ -1095,7 +1111,7 @@
"labelLetterSpacing": "0",
"labelFontTextTransform": "none",
"labelFontColor": "#666666",
- "labelActiveFontColor": "#000000",
+ "visitedLabelFontColor": "#000000",
"labelTextAlign": "left",
"descriptionFontSize": "0.75rem",
"descriptionFontFamily": "Open Sans, sans-serif",
@@ -1104,7 +1120,7 @@
"descriptionLetterSpacing": "0.025em",
"descriptionFontTextTransform": "none",
"descriptionFontColor": "#666666",
- "descriptionActiveFontColor": "#000000",
+ "visitedDescriptionFontColor": "#000000",
"descriptionTextAlign": "left",
"circleWidth": "32px",
"circleHeight": "32px",
@@ -1112,20 +1128,21 @@
"circleBorderStyle": "solid",
"circleBorderRadius": "45px",
"circleBorderColor": "#000000",
- "circleSelectedWidth": "32px",
- "circleSelectedHeight": "32px",
- "circleSelectedBorderThickness": "2px",
- "circleSelectedBorderStyle": "solid",
- "circleSelectedBorderRadius": "45px",
- "circleSelectedBorderColor": "#6f2c91",
- "circleDisabledWidth": "32px",
- "circleDisabledHeight": "32px",
- "circleDisabledBorderThickness": "2px",
- "circleDisabledBorderStyle": "solid",
- "circleDisabledBorderRadius": "45px",
- "circleDisabledBorderColor": "#D9D9D9",
+ "selectedCircleWidth": "32px",
+ "selectedCircleHeight": "32px",
+ "selectedCircleBorderThickness": "2px",
+ "selectedCircleBorderStyle": "solid",
+ "selectedCircleBorderRadius": "45px",
+ "selectedCircleBorderColor": "#6f2c91",
+ "disabledCircleWidth": "32px",
+ "disabledCircleHeight": "32px",
+ "disabledCircleBorderThickness": "2px",
+ "disabledCircleBorderStyle": "solid",
+ "disabledCircleBorderRadius": "45px",
+ "disabledCircleBorderColor": "#D9D9D9",
"separatorBorderThickness": "1px",
"separatorBorderStyle": "solid",
- "separatorColor": "#D9D9D9"
+ "separatorColor": "#D9D9D9",
+ "focusColor": "#005FCC"
}
}
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 61f8f385d..4ada67109 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
@@ -1,17 +1,12 @@
{
"accordion": {
- "accentColor": "#6f2c91",
- "fontColor": "#666666"
+ "accentColor": "#5f249f",
+ "fontColor": "#000000"
},
"button": {
- "baseColor": "#6f2c91",
- "hoverBaseColor": "#000000",
+ "baseColor": "#5f249f",
"primaryFontColor": "#ffffff",
- "primaryHoverFontColor": "#ffffff",
- "secondaryFontColor": "#000000",
- "secondaryHoverFontColor": "#000000",
- "textFontColor": "#6f2c91",
- "textHoverFontColor": "#ffffff"
+ "secondaryHoverFontColor": "#ffffff"
},
"checkbox": {
"baseColor": "#0067b3",
@@ -19,7 +14,6 @@
},
"chip": {
"baseColor": "#eeeeee",
- "accentColor": "",
"fontColor": "#000000"
},
"date": {
@@ -38,7 +32,7 @@
"baseColor": "#000000",
"fontColor": "#ffffff",
"accentColor": "#0067b3",
- "logo": ""
+ "logo": "assets/dxc-logo-wh.svg"
},
"header": {
"baseColor": "#ffffff",
@@ -46,23 +40,22 @@
"fontColor": "#000000",
"menuBaseColor": "#ffffff",
"hamburguerColor": "#000000",
- "logo": "",
- "logoResponsive": ""
+ "logo": "assets/DXC_Logo_Black_RGB.svg",
+ "logoResponsive": "assets/DXC_Logo_Black_RGB.svg"
},
"inputText": {
"selectedBaseColor": "#D9D9D9"
},
- "input": {},
- "newTextarea": {},
- "number": {},
- "password": {},
+ "newInputText": {
+ "selectedBaseColor": "#D9D9D9"
+ },
"paginator": {
"baseColor": "#eeeeee",
"fontColor": "#000000"
},
"progressBar": {
- "accentColor": "#FFED00",
- "baseColor": "#000000"
+ "accentColor": "#5f249f",
+ "baseColor": "#cecece"
},
"radio": {
"baseColor": "#000000"
@@ -72,37 +65,34 @@
},
"sidenav": {
"baseColor": "#F8F8F8",
- "arrowBaseColor": "#F8F8F8",
+ "arrowBaseColor": "#D9D9D9",
"arrowAccentColor": "#000000"
},
"slider": {
"baseColor": "#0067b3"
},
"spinner": {
- "accentColor": "#6f2c91",
+ "accentColor": "#5F249F",
"baseColor": "#ffffff"
},
"switch": {
- "checkedBaseColor": "#6f2c91"
+ "checkedBaseColor": "#5f249f"
},
"table": {
- "baseColor": "#6f2c91",
+ "baseColor": "#5f249f",
"fontColor": "#ffffff"
},
"tabs": {
- "baseColor": "#6f2c91"
+ "baseColor": "#5f249f"
},
"toggleGroup": {
- "selectedBaseColor": "#6f2c91",
- "selectedHoverBaseColor": "#4b1c7d",
+ "selectedBaseColor": "#5f249f",
"selectedFontColor": "#ffffff",
- "selectedHoverFontColor": "#ffffff",
- "unselectedBaseColor": "#D9D9D9",
- "unselectedHoverBaseColor": "#eeeeee",
+ "unselectedBaseColor": "#e6e6e6",
"unselectedFontColor": "#000000"
},
"wizard": {
- "baseColor": "#6f2c91",
+ "baseColor": "#5f249f",
"fontColor": "#ffffff"
}
}
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 eba2979d0..ca3d7e36b 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
@@ -1,15 +1,10 @@
{
"accordion": {
"backgroundColor": "color",
+ "disabledBackgroundColor": "color",
"arrowColor": "color",
- "fontColorBase": "color",
+ "disabledArrowColor": "color",
"hoverBackgroundColor": "color",
- "disabledFontColor": "color",
- "customContentFontFamily": "fFamily",
- "customContentFontSize": "length",
- "customContentFontWeight": "fWeight",
- "customContentFontColor": "color",
- "customContentPanelHeight": "length",
"assistiveTextFontFamily": "fFamily",
"assistiveTextFontSize": "length",
"assistiveTextFontWeight": "fWeight",
@@ -17,8 +12,9 @@
"assistiveTextFontColor": "color",
"assistiveTextLetterSpacing": "length",
"assistiveTextMinWidth": "length",
- "assistivePaddingLeft": "length",
- "assistivePaddingRight": "length",
+ "assistiveTextPaddingLeft": "length",
+ "assistiveTextPaddingRight": "length",
+ "disabledAssistiveTextFontColor": "color",
"titleLabelFontFamily": "fFamily",
"titleLabelFontSize": "length",
"titleLabelFontWeight": "fWeight",
@@ -26,64 +22,47 @@
"titleLabelFontColor": "color",
"titleLabelPaddingLeft": "length",
"titleLabelPaddingRight": "length",
- "titlePaddingTop": "length",
- "titlePaddingBottom": "length",
- "titleFocusBorderStyle": "bStyle",
- "titleFocusBorderThickness": "bWidth",
- "titleFocusBorderColor": "color",
+ "titleLabelPaddingTop": "length",
+ "titleLabelPaddingBottom": "length",
+ "disabledTitleLabelFontColor": "color",
+ "focusBorderStyle": "bStyle",
+ "focusBorderThickness": "bWidth",
+ "focusBorderColor": "color",
+ "focusBorderOffset": "bWidth",
"borderRadius": "length",
"boxShadowOffsetX": "length",
"boxShadowOffsetY": "length",
"boxShadowBlur": "length",
"boxShadowColor": "color",
- "iconMaxHeight": "length",
- "iconMaxWidth": "length",
+ "iconColor": "color",
+ "iconSize": "length",
"iconMarginLeft": "length",
- "iconMarginRigth": "length",
+ "iconMarginRight": "length",
+ "disabledIconColor": "color",
"accordionGroupSeparatorBorderColor": "color",
"accordionGroupSeparatorBorderThickness": "bWidth",
- "accordionGroupSeparatorBorderRadius": "length",
"accordionGroupSeparatorBorderStyle": "fStyle"
},
"alert": {
- "overlayColor": "color",
- "infoColor": "color",
- "successColor": "color",
- "warningColor": "color",
- "errorColor": "color",
- "focusColor": "color",
"titleFontFamily": "fFamily",
- "titleFontSize": "length",
"titleFontColor": "color",
- "titleFontWeight": "fWeight",
+ "titleFontSize": "length",
"titleFontStyle": "fStyle",
+ "titleFontWeight": "fWeight",
"titleTextTransform": "fTextTransform",
- "contentFontFamily": "fFamily",
- "contentFontSize": "0.length",
- "contentFontColor": "color",
- "contentFontWeight": "fWeight",
"titlePaddingRight": "length",
"titlePaddingLeft": "length",
- "titlePaddingTop": "length",
- "titlePaddingBottom": "length",
+ "inlineTextFontFamily": "fFamily",
+ "inlineTextFontColor": "color",
+ "inlineTextFontSize": "length",
+ "inlineTextFontStyle": "fStyle",
+ "inlineTextFontWeight": "fWeight",
"inlineTextPaddingLeft": "length",
"inlineTextPaddingRight": "length",
- "inlineTextPaddingTop": "length",
- "inlineTextPaddingBottom": "length",
- "iconPaddingLeft": "length",
- "iconPaddingRight": "length",
- "iconPaddingTop": "length",
- "iconPaddingBottom": "length",
- "iconSize": "length",
"contentPaddingLeft": "length",
"contentPaddingRight": "length",
"contentPaddingTop": "length",
"contentPaddingBottom": "length",
- "overlayOpacity": "alphaValue",
- "boxShadowOffsetX": "length",
- "boxShadowOffsetY": "length",
- "boxShadowBlur": "length",
- "boxShadowColor": "color",
"borderRadius": "length",
"borderStyle": "bStyle",
"borderThickness": "bWidth",
@@ -91,14 +70,34 @@
"successBorderColor": "color",
"warningBorderColor": "color",
"errorBorderColor": "color",
- "height": "length"
+ "iconSize": "length",
+ "iconPaddingLeft": "length",
+ "iconPaddingRight": "length",
+ "infoIconColor": "color",
+ "successIconColor": "color",
+ "warningIconColor": "color",
+ "errorIconColor": "color",
+ "infoBackgroundColor": "color",
+ "successBackgroundColor": "color",
+ "warningBackgroundColor": "color",
+ "errorBackgroundColor": "color",
+ "overlayColor": "color",
+ "hoverActionBackgroundColor": "color",
+ "focusActionBorderColor": "color",
+ "activeActionBackgroundColor": "color",
+ "titlePaddingTop": "length",
+ "titlePaddingBottom": "length",
+ "inlineTextPaddingTop": "length",
+ "inlineTextPaddingBottom": "length",
+ "iconPaddingTop": "length",
+ "iconPaddingBottom": "length",
+ "boxShadowOffsetX": "length",
+ "boxShadowOffsetY": "length",
+ "boxShadowBlur": "length",
+ "boxShadowColor": "color"
},
"box": {
"backgroundColor": "color",
- "fontFamily": "fFamily",
- "fontSize": "length",
- "fontWeight": "fWeight",
- "fontColor": "color",
"letterSpacing": "length",
"borderRadius": "length",
"borderThickness": "bWidth",
@@ -121,14 +120,20 @@
"twoShadowDepthShadowColor": "color"
},
"button": {
+ "labelFontLineHeight": "length",
+ "labelLetterSpacing": "length",
+ "paddingLeft": "length",
+ "paddingRight": "length",
+ "paddingTop": "length",
+ "paddingBottom": "length",
+ "focusBorderColor": "color",
+ "focusBorderColorOnDark": "color",
"primaryBackgroundColor": "color",
"primaryBackgroundColorOnDark": "color",
- "primaryHoverBackgroundColor": "color",
- "primaryHoverBackgroundColorOnDark": "color",
"primaryFontColor": "color",
"primaryFontColorOnDark": "color",
- "primaryHoverFontColor": "color",
- "primaryHoverFontColorOnDark": "color",
+ "primaryHoverBackgroundColor": "color",
+ "primaryHoverBackgroundColorOnDark": "color",
"primaryActiveBackgroundColor": "color",
"primaryActiveBackgroundColorOnDark": "color",
"primaryDisabledBackgroundColor": "color",
@@ -136,124 +141,105 @@
"primaryDisabledFontColor": "color",
"primaryDisabledFontColorOnDark": "color",
"primaryBorderThickness": "bWidth",
- "primaryBorderColor": "color",
- "primaryBorderColorOnDark": "color",
"primaryBorderStyle": "bStyle",
"primaryBorderRadius": "length",
"primaryFontFamily": "fFamily",
"primaryFontSize": "length",
"primaryFontWeight": "fWeight",
- "primaryPaddingTop": "length",
- "primaryPaddingBottom": "length",
- "secondaryOutlinedColor": "color",
- "secondaryOutlinedColorOnDark": "color",
"secondaryBackgroundColor": "color",
"secondaryBackgroundColorOnDark": "color",
- "secondaryHoverOutlinedColor": "color",
- "secondaryHoverOutlinedColorOnDark": "color",
"secondaryFontColor": "color",
"secondaryFontColorOnDark": "color",
"secondaryHoverFontColor": "color",
"secondaryHoverFontColorOnDark": "color",
- "secondaryActiveBackgroundColor": "color",
- "secondaryActiveBackgroundColorOnDark": "color",
+ "secondaryBorderColor": "color",
+ "secondaryBorderColorOnDark": "color",
"secondaryHoverBackgroundColor": "color",
"secondaryHoverBackgroundColorOnDark": "color",
- "secondaryDisabledOutlinedColor": "color",
- "secondaryDisabledOutlinedColorOnDark": "color",
+ "secondaryActiveBackgroundColor": "color",
+ "secondaryActiveBackgroundColorOnDark": "color",
+ "secondaryDisabledBackgroundColor": "color",
+ "secondaryDisabledBackgroundColorOnDark": "color",
"secondaryDisabledFontColor": "color",
"secondaryDisabledFontColorOnDark": "color",
+ "secondaryDisabledBorderColor": "color",
+ "secondaryDisabledBorderColorOnDark": "color",
"secondaryBorderThickness": "bWidth",
"secondaryBorderStyle": "bStyle",
"secondaryBorderRadius": "length",
"secondaryFontFamily": "fFamily",
"secondaryFontSize": "length",
"secondaryFontWeight": "fWeight",
- "secondaryPaddingTop": "length",
- "secondaryPaddingBottom": "length",
"textBackgroundColor": "color",
"textBackgroundColorOnDark": "color",
- "textHoverBackgroundColor": "color",
- "textHoverBackgroundColorOnDark": "color",
"textFontColor": "color",
"textFontColorOnDark": "color",
- "textHoverFontColor": "color",
- "textHoverFontColorOnDark": "color",
+ "textHoverBackgroundColor": "color",
+ "textHoverBackgroundColorOnDark": "color",
"textActiveBackgroundColor": "color",
"textActiveBackgroundColorOnDark": "color",
- "textDisabledFontColor": "color",
"textDisabledBackgroundColor": "color",
"textDisabledBackgroundColorOnDark": "color",
+ "textDisabledFontColor": "color",
"textDisabledFontColorOnDark": "color",
"textBorderThickness": "bWidth",
- "textBorderColor": "color",
- "textBorderColorOnDark": "color",
"textBorderStyle": "bStyle",
"textBorderRadius": "length",
"textFontFamily": "fFamily",
"textFontSize": "length",
- "textFontWeight": "fWeight",
- "textPaddingTop": "length",
- "textPaddingBottom": "length",
- "focusColor": "color",
- "labelFontLineHeight": "length",
- "labelLetterSpacing": "length",
- "iconSize": "length",
- "height": "length"
+ "textFontWeight": "fWeight"
},
"card": {
"height": "length",
"width": "length"
},
"checkbox": {
- "borderColor":"color",
- "hoverBorderColor":"color",
- "borderColorOnDark":"color",
- "hoverBorderColorOnDark":"color",
- "selectedBackgroundColor": "color",
- "selectedHoverBackgroundColor": "color",
- "selectedBackgroundColorOnDark": "color",
- "selectedHoverBackgroundColorOnDark": "color",
- "checkColor": "color",
- "checkColorOnDark": "color",
- "fontColor": "color",
- "fontColorOnDark": "color",
- "selectedDisabledBackgroundColor": "color",
- "selectedDisabledBackgroundColorOnDark": "color",
+ "backgroundColorChecked": "color",
+ "backgroundColorCheckedOnDark": "color",
+ "hoverBackgroundColorChecked": "color",
+ "hoverBackgroundColorCheckedOnDark": "color",
+ "disabledBackgroundColorChecked": "color",
+ "disabledBackgroundColorCheckedOnDark": "color",
+ "borderColor": "color",
+ "borderColorOnDark": "color",
+ "hoverBorderColor": "color",
+ "hoverBorderColorOnDark": "color",
"disabledBorderColor": "color",
"disabledBorderColorOnDark": "color",
+ "checkColor": "color",
+ "checkColorOnDark": "color",
"disabledCheckColor": "color",
"disabledCheckColorOnDark": "color",
+ "fontFamily": "fFamily",
+ "fontSize": "length",
+ "fontWeight": "fWeight",
+ "fontColor": "color",
+ "fontColorOnDark": "color",
"disabledFontColor": "color",
"disabledFontColorOnDark": "color",
- "fontFamily": "fFamily",
- "fontSize":"length",
- "fontWeight":"fWeight",
- "checkLabelSpacing": "length",
"focusColor": "color",
- "focusColorOnDark": "color"
+ "focusColorOnDark": "color",
+ "checkLabelSpacing": "length"
},
"chip": {
"backgroundColor": "color",
- "borderColor": "color",
- "fontColor": "color",
"disabledBackgroundColor": "color",
"disabledFontColor": "color",
+ "fontColor": "color",
"fontFamily": "fFamily",
"fontSize": "length",
- "fontWeight": "fWeight",
"fontStyle": "fStyle",
+ "fontWeight": "fWeight",
+ "borderColor": "color",
"borderRadius": "length",
"borderThickness": "bWidth",
"borderStyle": "bStyle",
- "height": "length",
"contentPaddingLeft": "length",
"contentPaddingRight": "length",
"contentPaddingTop": "length",
"contentPaddingBottom": "length",
"iconSize": "length",
- "iconPaddingLeft": "length",
- "iconPaddingRight": "length",
+ "iconSpacing": "length",
"iconColor": "color",
"disabledIconColor": "color",
"focusColor": "color"
@@ -263,47 +249,39 @@
"pickerSelectedDateColor": "color",
"pickerBackgroundColor": "color",
"pickerFontColor": "color",
- "pickerActualDate": "color",
"pickerHoverDateBackgroundColor": "color",
"pickerHoverDateFontColor": "color",
- "pickerHoverHeaderColor": "color",
+ "pickerActualDateColor": "color",
"pickerYearColor": "color",
- "pickerLabelColor":"color",
+ "pickerMonthColor": "color",
"pickerWeekLabelColor": "color",
"pickerBackgroundColorMonthArrows": "color",
"focusColor": "color",
"fontFamily": "fFamily",
- "pickerHeight":"length",
- "pickerWidth":"length"
+ "pickerHeight": "length",
+ "pickerWidth": "length"
},
"newDate": {
"pickerSelectedDateBackgroundColor": "color",
"pickerSelectedDateColor": "color",
"pickerBackgroundColor": "color",
"pickerFontColor": "color",
- "pickerActualDate": "color",
"pickerHoverDateBackgroundColor": "color",
"pickerHoverDateFontColor": "color",
- "pickerHoverHeaderColor": "color",
+ "pickerActualDateColor": "color",
"pickerYearColor": "color",
- "pickerLabelColor":"color",
+ "pickerMonthColor": "color",
"pickerWeekLabelColor": "color",
"pickerBackgroundColorMonthArrows": "color",
"focusColor": "color",
"fontFamily": "fFamily",
- "pickerHeight":"length",
- "pickerWidth":"length"
+ "pickerHeight": "length",
+ "pickerWidth": "length"
},
"dialog": {
"overlayColor": "color",
"overlayOpacity": "alphaValue",
- "scrollBarThumbColor": "color",
- "scrollBarTrackColor": "color",
"backgroundColor": "color",
- "fontFamily": "fFamily",
- "fontSize": "length",
- "fontWeight": "fWeight",
- "fontColor": "color",
"closeIconWidth": "length",
"closeIconHeight": "length",
"closeIconTopPosition": "length",
@@ -321,40 +299,51 @@
},
"dropdown": {
"buttonBackgroundColor": "color",
- "buttonFontColor": "color",
- "optionsListBackgroundColor": "color",
- "optionsListHoverBackgroundColor": "color",
- "optionsListActiveBackgroundColor": "color",
- "buttonHoverBackgroundColor": "color",
+ "hoverButtonBackgroundColor": "color",
"activeButtonBackgroundColor": "color",
- "disabledButtonBackgroundColor": "color",
- "disabledButtonFontColor": "color",
- "scrollBarThumbColor": "color",
- "scrollBarTrackColor": "color",
- "focusColor": "color",
- "fontFamily": "fFamily",
+ "buttonFontFamily": "fFamily",
"buttonFontSize": "length",
"buttonFontStyle": "fStyle",
"buttonFontWeight": "fWeight",
- "minHeight": "length",
+ "buttonFontColor": "color",
+ "buttonIconSize": "length",
+ "buttonIconSpacing": "length",
+ "buttonIconColor": "color",
+ "buttonPaddingTop": "length",
+ "buttonPaddingBottom": "length",
+ "buttonPaddingLeft": "length",
+ "buttonPaddingRight": "length",
+ "disabledColor": "color",
+ "disabledButtonBackgroundColor": "color",
+ "disabledBorderColor": "color",
+ "optionBackgroundColor": "color",
+ "hoverOptionBackgroundColor": "color",
+ "activeOptionBackgroundColor": "color",
+ "optionFontFamily": "fFamily",
+ "optionFontSize": "length",
+ "optionFontStyle": "fStyle",
+ "optionFontWeight": "fWeight",
+ "optionFontColor": "color",
+ "optionIconSize": "length",
+ "optionIconSpacing": "length",
+ "optionIconColor": "color",
+ "optionPaddingTop": "length",
+ "optionPaddingBottom": "length",
+ "optionPaddingLeft": "length",
+ "optionPaddingRight": "length",
+ "caretIconSize": "length",
+ "caretIconColor": "color",
+ "caretIconSpacing": "length",
"borderRadius": "length",
"borderStyle": "bStyle",
"borderThickness": "bWidth",
"borderColor": "color",
- "optionsHeight": "length",
- "caretIconMarginRight": "length",
- "caretIconMarginLeft": "length",
- "caretIconMarginTop": "length",
- "caretIconMarginBottom": "length",
- "optionsFontColor":"color",
- "optionsFontSize":"length",
- "optionsFontStyle":"fStyle",
- "optionsFontWeight":"fWeight",
- "iconSize": "length",
- "iconOptionSpacing": "length",
- "iconColor": "color"
+ "scrollBarThumbColor": "color",
+ "scrollBarTrackColor": "color",
+ "focusColor": "color"
},
"footer": {
+ "height": "length",
"backgroundColor": "color",
"bottomLinksDividerColor": "color",
"bottomLinksDividerThickness": "bWidth",
@@ -371,30 +360,24 @@
"copyrightFontStyle": "fStyle",
"copyrightFontWeight": "fWeight",
"copyrightFontColor": "color",
- "fontColorBase": "color",
"logo": "image",
"logoHeight": "length",
"logoWidth": "length",
- "minHeight": "length",
- "socialIconSize": "length",
- "socialIconsGutter": "length"
+ "socialLinksSize": "length",
+ "socialLinksGutter": "length",
+ "socialLinksColor": "color"
},
"header": {
"backgroundColor": "color",
"underlinedColor": "color",
- "fontColorBase": "color",
"menuBackgroundColor": "color",
- "hamburguerColor": "color",
+ "hamburguerIconColor": "color",
"hamburguerHoverColor": "color",
"overlayColor": "color",
"hamburguerFocusColor": "color",
"logo": "image",
"logoResponsive": "image",
- "fontFamilyBase": "fFamily",
- "fontSizeBase": "length",
"hamburguerTextTransform": "fTextTransform",
- "dropdownBackgroundColor": "color",
- "dropdownHoverBackgroundColor": "color",
"underlinedThickness": "bWidth",
"underlinedStyle": "bStyle",
"minHeight": "length",
@@ -413,21 +396,9 @@
"hamburguerFontStyle": "fStyle",
"hamburguerFontColor": "color",
"hamburguerFontSize": "length",
- "hamburguerFontWeight": "fWeight",
- "customContentFontFamily": "fFamily",
- "customContentFontStyle": "fStyle",
- "customContentFontColor": "color",
- "customContentFontSize": "length",
- "customContentFontWeight": "fWeight",
- "menuCustomContentFontFamily": "fFamily",
- "menuCustomContentFontStyle": "fStyle",
- "menuCustomContentFontColor": "color",
- "menuCustomContentFontSize": "length",
- "menuCustomContentFontWeight": "fWeight"
+ "hamburguerFontWeight": "fWeight"
},
"heading": {
- "fontFamilyBase": "fFamily",
- "fontColorBase": "color",
"level5FontSize": "length",
"level4FontSize": "length",
"level3FontSize": "length",
@@ -465,18 +436,23 @@
"level5LetterSpacing": "length"
},
"inputText": {
- "fontColorBase": "color",
- "disabledFontColor": "color",
+ "disabledColor": "color",
"errorColor": "color",
- "optionHoverBackgroundColor": "color",
- "optionActiveBackgroundColor": "color",
- "optionFocusColor": "color",
+ "optionFontColor": "color",
+ "optionFontColorOnDark": "color",
+ "optionFontSize": "length",
+ "optionFontStyle": "fStyle",
+ "optionFontWeight": "fWeight",
+ "optionPaddingBottom": "length",
+ "optionPaddingTop": "length",
+ "selectedOptionBackgroundColor": "color",
+ "selectedOptionBackgroundColorOnDark": "color",
"hoverOptionColor": "color",
+ "hoverOptionBackgroundColor": "color",
+ "hoverOptionBackgroundColorOnDark": "color",
"scrollBarThumbColor": "color",
"scrollBarTrackColor": "color",
- "fontFamilyBase": "fFamily",
- "fontSizeBase": "length",
- "labelFontSize": "length",
+ "fontFamily": "fFamily",
"prefixIconColor": "color",
"prefixLabelFontWeight": "fWeight",
"prefixLabelFontSize": "length",
@@ -487,25 +463,38 @@
"suffixLabelFontSize": "length",
"suffixLabelFontStyle": "fStyle",
"suffixLabelFontColor": "color",
+ "labelFontColor": "color",
+ "labelFontColorOnDark": "color",
+ "labelFontSize": "length",
+ "labelFontStyle": "fStyle",
+ "labelFontWeight": "fWeight",
+ "valueFontColor": "color",
+ "valueFontColorOnDark": "color",
+ "valueFontSize": "length",
+ "valueFontStyle": "fStyle",
+ "valueFontWeight": "fWeight",
"assistiveTextFontWeight": "fWeight",
"assistiveTextFontSize": "length",
"assistiveTextFontStyle": "fStyle",
"assistiveTextFontColor": "color",
- "fontColorBaseOnDark": "color",
"prefixIconColorOnDark": "color",
"prefixLabelFontColorOnDark": "color",
"suffixIconColorOnDark": "color",
"suffixLabelFontColorOnDark": "color",
"assistiveTextFontColorOnDark": "color",
- "disabledFontColorOnDark": "color",
+ "disabledColorOnDark": "color",
"errorColorOnDark": "color",
"underlineColor": "color",
"underlineColorOnDark": "color",
"underlineFocusColor": "color",
"underlineFocusColorOnDark": "color",
- "underlineThickness": "length"
+ "underlineThickness": "bWidth",
+ "optionBackgroundColor": "color",
+ "optionBorderColor": "color",
+ "optionBorderThickness": "bWidth",
+ "optionBorderStyle": "bStyle"
},
- "input":{
+ "newInputText": {
"disabledBorderColor": "color",
"disabledBorderColorOnDark": "color",
"disabledContainerFillColor": "color",
@@ -550,7 +539,7 @@
"hoverBorderColorOnDark": "color",
"focusBorderColor": "color",
"focusBorderColorOnDark": "color",
- "placeholderFontColor": "color",
+ "placeholderFontColor": "color",
"placeholderFontColorOnDark": "color",
"valueFontColor": "color",
"valueFontColorOnDark": "color",
@@ -622,7 +611,7 @@
"underlineStyle": "bStyle",
"underlineThickness": "bWidth",
"iconSize": "length",
- "iconGutter": "length",
+ "iconSpacing": "length",
"focusColor": "color"
},
"paginator": {
@@ -632,6 +621,7 @@
"fontSize": "length",
"fontWeight": "fWeight",
"fontStyle": "fStyle",
+ "fontTextTransform": "fTextTransform",
"height": "length",
"width": "length",
"itemsPerPageSelectorMarginLeft": "length",
@@ -645,19 +635,28 @@
},
"progressBar": {
"trackLineColor": "color",
+ "trackLineColorOnDark": "color",
"totalLineColor": "color",
"labelFontFamily": "fFamily",
"labelFontSize": "length",
"labelFontStyle": "fStyle",
"labelFontWeight": "fWeight",
"labelFontColor": "color",
+ "labelFontColorOnDark": "color",
"labelFontTextTransform": "fTextTransform",
"valueFontFamily": "fFamily",
"valueFontSize": "length",
"valueFontStyle": "fStyle",
"valueFontWeight": "fWeight",
"valueFontColor": "color",
+ "valueFontColorOnDark": "color",
"valueFontTextTransform": "fTextTransform",
+ "helperTextFontColor": "color",
+ "helperTextFontColorOnDark": "color",
+ "helperTextFontSize": "length",
+ "helperTextFontStyle": "fStyle",
+ "helperTextFontWeight": "fWeight",
+ "helperTextFontFamily": "fFamily",
"thickness": "length",
"borderRadius": "length",
"overlayColor": "color",
@@ -682,8 +681,6 @@
"focusColorOnDark": "color"
},
"select": {
- "color": "color",
- "colorOnDark": "color",
"errorColor": "color",
"errorColorOnDark": "color",
"disabledColor": "color",
@@ -699,38 +696,48 @@
"assistiveTextFontSize": "length",
"assistiveTextFontStyle": "fStyle",
"assistiveTextFontWeight": "fWeight",
- "optionsBorderColor": "color",
- "optionsBorderThickness": "bWidth",
- "optionsBorderStyle": "bStyle",
- "optionsFontColor": "color",
- "optionsFontSize": "length",
- "optionsFontStyle": "fStyle",
- "optionsFontWeight": "fWeight",
- "optionsBackgroundColor": "color",
+ "optionBorderColor": "color",
+ "optionBorderThickness": "bWidth",
+ "optionBorderStyle": "bStyle",
+ "optionFontColor": "color",
+ "optionFontSize": "length",
+ "optionFontStyle": "fStyle",
+ "optionFontWeight": "fWeight",
+ "optionBackgroundColor": "color",
"scrollBarThumbColor": "color",
"scrollBarTrackColor": "color",
- "iconColor": "color",
- "iconOptionSpacing": "length",
- "iconSize": "length",
+ "optionIconColor": "color",
+ "optionIconSpacing": "length",
+ "optionIconSize": "length",
"selectedOptionBackgroundColor": "color",
"selectedOptionBackgroundColorOnDark": "color",
- "hoveredOptionBackgroundColor": "color",
- "hoveredOptionBackgroundColorOnDark": "color",
- "checkboxOptionSpacing": "length",
+ "hoverOptionBackgroundColor": "color",
+ "hoverOptionBackgroundColorOnDark": "color",
+ "optionCheckboxSpacing": "length",
"optionPaddingBottom": "length",
"optionPaddingTop": "length",
"optionPaddingLeft": "length",
- "optionPaddingRight": "length"
+ "optionPaddingRight": "length",
+ "labelFontColor": "color",
+ "labelFontColorOnDark": "color",
+ "required": "color",
+ "underlineColor": "color",
+ "underlineColorOnDark": "color",
+ "underlineFocusColor": "color",
+ "underlineFocusColorOnDark": "color",
+ "underlineThickness": "1px",
+ "valueFontColor": "color",
+ "valueFontColorOnDark": "color",
+ "valueFontSize": "length",
+ "valueFontStyle": "fStyle",
+ "valueFontWeight": "fWeight",
+ "arrowColor": "color",
+ "arrowColorOnDark": "color"
},
"sidenav": {
"backgroundColor": "color",
"arrowContainerColor": "color",
"arrowColor": "color",
- "customContentFontFamily": "fFamily",
- "customContentFontSize": "length",
- "customContentFontStyle": "fStyle",
- "customContentFontWeight": "fWeight",
- "customContentFontColor": "color",
"titleFontFamily": "fFamily",
"titleFontSize": "length",
"titleFontStyle": "fStyle",
@@ -775,10 +782,14 @@
"thumbBackgroundColorOnDark": "color",
"activeThumbBackgroundColor": "color",
"activeThumbBackgroundColorOnDark": "color",
- "dotsSize": "length",
- "dotsVerticalPosition": "length",
- "tickMarkBackgroundColor": "color",
- "tickMarkBackgroundColorOnDark": "color",
+ "hoverThumbBackgroundColor": "color",
+ "hoverThumbBackgroundColorOnDark": "color",
+ "focusThumbBackgroundColor": "color",
+ "focusThumbBackgroundColorOnDark": "#color",
+ "tickSize": "length",
+ "tickVerticalPosition": "length",
+ "tickBackgroundColor": "color",
+ "tickBackgroundColorOnDark": "color",
"lineThickness": "length",
"lineVerticalPosition": "length",
"trackLineColor": "color",
@@ -788,9 +799,9 @@
"disabledThumbVerticalPosition": "length",
"disabledThumbBackgroundColor": "color",
"disabledThumbBackgroundColorOnDark": "color",
- "disabledDotsVerticalPosition": "length",
- "disabledTickMarkBackgroundColor": "color",
- "disabledTickMarkBackgroundColorOnDark": "color",
+ "disabledTickVerticalPosition": "length",
+ "disabledTickBackgroundColor": "color",
+ "disabledTickBackgroundColorOnDark": "color",
"disabledTrackLineColor": "color",
"disabledTrackLineColorOnDark": "color",
"disabledTotalLineColor": "color",
@@ -815,7 +826,7 @@
"progressValueTextAlign": "textAlign",
"overlayBackgroundColor": "color",
"overlayOpacity": "alphaValue",
- "overlayTrackCircleColor": "color",
+ "trackCircleColorOnDark": "color",
"overlayLabelFontFamily": "fFamily",
"overlayLabelFontSize": "length",
"overlayLabelFontStyle": "fStyle",
@@ -871,7 +882,11 @@
"iconColor": "color",
"iconSectionWidth": "length",
"iconHeight": "length",
- "iconWidth": "length"
+ "iconWidth": "length",
+ "fontFamily": "fFamily",
+ "fontColor": "color",
+ "fontSize": "length",
+ "fontWeight": "fWeight"
},
"table": {
"rowSeparatorThickness": "length",
@@ -947,26 +962,14 @@
"badgeRadiusWithNotificationNumber": "length"
},
"textarea": {
- "disabledFontColor": "color",
- "disabledFontColorOnDark": "color",
"errorColor": "color",
"errorColorOnDark": "color",
- "assistiveTextFontFamily": "fFamily",
"assistiveTextFontSize": "length",
"assistiveTextFontStyle": "fStyle",
"assistiveTextFontWeight": "fWeight",
"assistiveTextFontColor": "color",
"assistiveTextFontColorOnDark": "color",
"assistiveTextLetterSpacing": "length",
- "customContentFontFamily": "fFamily",
- "customContentFontSize": "length",
- "customContentFontStyle": "fStyle",
- "customContentFontWeight": "fWeight",
- "customContentFontColor": "color",
- "customContentFontColorOnDark": "color",
- "customContentLetterSpacing": "length",
- "customContentLineHeight": "length",
- "labelFontFamily": "fFamily",
"labelFontSize": "length",
"labelFontStyle": "fStyle",
"labelFontWeight": "fWeight",
@@ -976,7 +979,22 @@
"scrollBarThumbColor": "color",
"scrollBarThumbColorOnDark": "color",
"scrollBarTrackColor": "color",
- "scrollBarTrackColorOnDark": "color"
+ "scrollBarTrackColorOnDark": "color",
+ "fontFamily": "fFamily",
+ "valueFontSize": "length",
+ "valueFontStyle": "fStyle",
+ "valueFontWeight": "fWeight",
+ "valueFontColor": "color",
+ "valueFontColorOnDark": "color",
+ "valueLetterSpacing": "length",
+ "valueLineHeight": "length",
+ "disabledColor": "color",
+ "disabledColorOnDark": "color",
+ "underlineColor": "color",
+ "underlineColorOnDark": "color",
+ "underlineFocusColor": "color",
+ "underlineFocusColorOnDark": "color",
+ "underlineThickness": "length"
},
"toggleGroup": {
"fontFamily": "fFamily",
@@ -1002,7 +1020,11 @@
"iconPaddingRight": "length",
"iconPaddingLeft": "length",
"labelPaddingLeft": "length",
- "labelPaddingRight": "length"
+ "labelPaddingRight": "length",
+ "iconPaddingTop": "length",
+ "iconPaddingBottom": "length",
+ "labelPaddingTop": "length",
+ "labelPaddingBottom": "length"
},
"upload": {
"fontFamily": "fFamily",
@@ -1011,10 +1033,9 @@
"scrollBarTrackColor": "color",
"errorColor": "color",
"backgroundColor": "color",
- "draggingAreaBackgroundColor": "color",
+ "draggingStateBackgroundColor": "color",
"dragAndDropIconColor": "color",
- "dragAndDropIconHeight": "length",
- "dragAndDropIconWidth": "length",
+ "dragAndDropIconSize": "length",
"dragAndDropTitleFontSize": "length",
"dragAndDropTitleFontStyle": "fStyle",
"dragAndDropTitleFontWeight": "fWeight",
@@ -1023,28 +1044,25 @@
"dragAndDropDescriptionFontSize": "length",
"dragAndDropDescriptionFontStyle": "fStyle",
"dragAndDropDescriptionFontWeight": "fWeight",
- "dragAndDropTextDescriptionFontTextTransform": "fTextTransform",
- "dragAndDropTextDescriptionFontColor": "color",
+ "dragAndDropDescriptionFontTextTransform": "fTextTransform",
+ "dragAndDropDescriptionFontColor": "color",
"dragAndDropDraggingStateIconColor": "color",
- "dragAndDropDraggingStateIconHeight": "length",
- "dragAndDropDraggingStateIconWidth": "length",
+ "dragAndDropDraggingStateIconSize": "length",
"dragAndDropDraggingStateFontSize": "length",
"dragAndDropDraggingStateFontStyle": "fStyle",
"dragAndDropDraggingStateFontWeight": "fWeight",
- "dragAndDropTextDraggingStateFontTextTransform": "fTextTransform",
- "dragAndDropTextDraggingStateFontColor": "color",
+ "dragAndDropDraggingStateFontTextTransform": "fTextTransform",
+ "dragAndDropDraggingStateFontColor": "color",
"dragAndDropAreaIconColor": "color",
- "dragAndDropAreaIconHeight": "length",
- "dragAndDropAreaIconWidth": "length",
+ "dragAndDropAreaIconSize": "length",
"dragAndDropAreaTextFontSize": "length",
"dragAndDropAreaTextFontStyle": "fStyle",
"dragAndDropAreaTextFontWeight": "fWeight",
"dragAndDropAreaTextFontTextTransform": "fTextTransform",
"dragAndDropAreaTextFontColor": "color",
"fileDeleteIconColor": "color",
- "fileDeleteIconHeight": "length",
- "fileDeleteIconWidth": "length",
- "fileHoverColor": "color",
+ "fileDeleteIconSize": "length",
+ "hoverFileColor": "color",
"fileUnderlineColor": "color",
"fileUnderlineThickness": "length",
"fileNameFontSize": "length",
@@ -1057,20 +1075,19 @@
"fileTypeFontWeight": "fWeight",
"fileTypeFontTextTransform": "fTextTransform",
"fileTypeFontColor": "color",
- "fileUploadedIconColor": "color",
- "fileUploadedIconHeight": "length",
- "fileUploadedIconWidth": "length",
- "filesUploadedTitleFontSize": "length",
- "filesUploadedTitleFontStyle": "fStyle",
- "filesUploadedTitleFontWeight": "fWeight",
- "filesUploadedTitleFontTextTransform": "fTextTransform",
- "filesUploadedTitleFontColor": "color",
- "filesUploadedSubtitleFontSize": "length",
- "filesUploadedSubtitleFontStyle": "fStyle",
- "filesUploadedSubtitleFontWeight": "fWeight",
- "filesUploadedSubtitleFontTextTransform": "fTextTransform",
- "filesUploadedSubtitleFontColor": "color",
- "filesUploadedNumberFontWeight": "fWeight"
+ "uploadedFileIconColor": "color",
+ "uploadedFileIconSize": "length",
+ "uploadedFilesTitleFontSize": "length",
+ "uploadedFilesTitleFontStyle": "fStyle",
+ "uploadedFilesTitleFontWeight": "fWeight",
+ "uploadedFilesTitleFontTextTransform": "fTextTransform",
+ "uploadedFilesTitleFontColor": "color",
+ "uploadedFilesSubtitleFontSize": "length",
+ "uploadedFilesSubtitleFontStyle": "fStyle",
+ "uploadedFilesSubtitleFontWeight": "fWeight",
+ "uploadedFilesSubtitleFontTextTransform": "fTextTransform",
+ "uploadedFilesSubtitleFontColor": "color",
+ "uploadedFilesNumberFontWeight": "fWeight"
},
"wizard": {
"disabledBackgroundColor": "color",
@@ -1091,7 +1108,7 @@
"labelLetterSpacing": "length",
"labelFontTextTransform": "fTextTransform",
"labelFontColor": "color",
- "labelActiveFontColor": "color",
+ "visitedLabelFontColor": "color",
"labelTextAlign": "textAlign",
"descriptionFontSize": "length",
"descriptionFontFamily": "fFamily",
@@ -1100,24 +1117,24 @@
"descriptionLetterSpacing": "length",
"descriptionFontTextTransform": "fTextTransform",
"descriptionFontColor": "color",
- "descriptionActiveFontColor": "color",
+ "visitedDescriptionFontColor": "color",
"descriptionTextAlign": "textAlign",
"circleBorderThickness": "bWidth",
"circleBorderStyle": "bStyle",
"circleBorderRadius": "length",
"circleBorderColor": "color",
- "circleSelectedWidth": "length",
- "circleSelectedHeight": "length",
- "circleSelectedBorderThickness": "bWidth",
- "circleSelectedBorderStyle": "bStyle",
- "circleSelectedBorderRadius": "length",
- "circleSelectedBorderColor": "color",
- "circleDisabledWidth": "length",
- "circleDisabledHeight": "length",
- "circleDisabledBorderThickness": "bWidth",
- "circleDisabledBorderStyle": "bStyle",
- "circleDisabledBorderRadius": "length",
- "circleDisabledBorderColor": "color",
+ "selectedCircleWidth": "length",
+ "selectedCircleHeight": "length",
+ "selectedCircleBorderThickness": "bWidth",
+ "selectedCircleBorderStyle": "bStyle",
+ "selectedCircleBorderRadius": "length",
+ "selectedCircleBorderColor": "color",
+ "disabledCircleWidth": "length",
+ "disabledCircleHeight": "length",
+ "disabledCircleBorderThickness": "bWidth",
+ "disabledCircleBorderStyle": "bStyle",
+ "disabledCircleBorderRadius": "length",
+ "disabledCircleBorderColor": "color",
"circleWidth": "length",
"circleHeight": "length",
"stepContainerIconSize": "length",
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Default.schema.json b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Default.schema.json
index 07e618c6a..039b8a109 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Default.schema.json
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Default.schema.json
@@ -5,13 +5,8 @@
},
"button": {
"baseColor": "color",
- "hoverBaseColor": "color",
"primaryFontColor": "color",
- "primaryHoverFontColor": "color",
- "secondaryFontColor": "color",
- "secondaryHoverFontColor": "color",
- "textFontColor": "color",
- "textHoverFontColor": "color"
+ "secondaryHoverFontColor": "color"
},
"checkbox": {
"baseColor": "color",
@@ -19,13 +14,16 @@
},
"chip": {
"baseColor": "color",
- "accentColor": "color",
"fontColor": "color"
},
"date": {
"baseColor": "color",
"accentColor": "color"
},
+ "newDate": {
+ "baseColor": "color",
+ "accentColor": "color"
+ },
"dropdown": {
"baseColor": "color",
"fontColor": "color"
@@ -48,8 +46,8 @@
"inputText": {
"selectedBaseColor": "color"
},
- "input":{
-
+ "newInputText": {
+ "selectedBaseColor": "color"
},
"paginator": {
"baseColor": "color",
@@ -89,11 +87,8 @@
},
"toggleGroup": {
"selectedBaseColor": "color",
- "selectedHoverBaseColor": "color",
"selectedFontColor": "color",
- "selectedHoverFontColor": "color",
"unselectedBaseColor": "color",
- "unselectedHoverBaseColor": "color",
"unselectedFontColor": "color"
},
"wizard": {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts
index 1fdca957c..249eb7e3f 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts
@@ -20,7 +20,7 @@ import {
} from "@angular/cdk/coercion";
import { DxcAccordionIconComponent } from "./dxc-accordion-icon/dxc-accordion-icon.component";
import { QueryList, ChangeDetectorRef, ElementRef } from "@angular/core";
-import { BackgroundProviderComponent } from '../background-provider/background-provider.component';
+import { BackgroundProviderComponent } from "../background-provider/background-provider.component";
@Component({
selector: "dxc-accordion",
@@ -105,7 +105,9 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit {
return result;
}, {});
this.defaultInputs.next({ ...this.defaultInputs.getValue(), ...inputs });
- this.currentBackgroundColor = this.cssUtils.readProperty('--accordion-backgroundColor');
+ this.currentBackgroundColor = this.cssUtils.readProperty(
+ "--accordion-backgroundColor"
+ );
this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
}
@@ -125,17 +127,10 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit {
return css`
cursor: ${inputs.disabled ? "not-allowed" : "pointer"};
${this.cssUtils.getMargins(inputs.margin)}
- min-width: var(--accordion-minWidth);
+ min-width: 280px;
display: block;
- color: ${inputs.disabled
- ? "var(--accordion-disabledFontColor)"
- : "var(--accordion-fontColorBase)"};
div.mat-expansion-panel-content {
div.mat-expansion-panel-body {
- font-family: var(--accordion-customContentFontFamily);
- font-size: var(--accordion-customContentFontSize);
- font-weight: var(--accordion-customContentFontWeight);
- color: var(--accordion-customContentFontColor);
cursor: default;
${inputs.padding
? this.cssUtils.getPaddings(inputs.padding)
@@ -146,11 +141,11 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit {
}
}
}
- .mat-accordion .mat-expansion-panel:last-of-type{
+ .mat-accordion .mat-expansion-panel:last-of-type {
border-bottom-right-radius: var(--accordion-borderRadius);
border-bottom-left-radius: var(--accordion-borderRadius);
}
- .mat-accordion .mat-expansion-panel:first-of-type{
+ .mat-accordion .mat-expansion-panel:first-of-type {
border-top-right-radius: var(--accordion-borderRadius);
border-top-left-radius: var(--accordion-borderRadius);
}
@@ -161,30 +156,23 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit {
}
.mat-expansion-panel {
border-radius: var(--accordion-borderRadius);
-
-
background-color: var(--accordion-backgroundColor) !important;
box-shadow: var(--accordion-boxShadowOffsetX)
var(--accordion-boxShadowOffsetY) var(--accordion-boxShadowBlur)
var(--accordion-boxShadowColor) !important;
- color: var(--accordion-fontColorBase);
-
mat-expansion-panel-header {
- padding-right: var(--accordion-headerPaddingRight);
- padding-left: var(--accordion-headerPaddingLeft);
- padding-top: var(--accordion-headerPaddingTop);
- padding-bottom: var(--accordion-headerPaddingBottom);
- min-height: var(--accordion-minHeight);
+ min-height: 48px;
+ padding: 0 16px;
.mat-expansion-panel-header-title {
- font-family: var(--accordion-titleFontFamily);
- font-size: var(--accordion-titleFontSize);
- font-weight: var(--accordion-titleFontWeight);
- font-style: var(--accordion-titleFontStyle);
- color: var(--accordion-titleFontColor);
- margin-right: var(--accordion-titleMarginRight);
- margin-left: var(--accordion-titleMarginLeft);
- margin-top: var(--accordion-titleMarginTop);
- margin-bottom: var(--accordion-titleMarginBottom);
+ font-family: var(--accordion-titleLabelFontFamily);
+ font-size: var(--accordion-titleLabelFontSize);
+ font-weight: var(--accordion-titleLabelFontWeight);
+ font-style: var(--accordion-titleLabelFontStyle);
+ color: var(--accordion-titleLabelFontColor);
+ padding-right: var(--accordion-titleLabelPaddingRight);
+ padding-left: var(--accordion-titleLabelPaddingLeft);
+ padding-top: var(--accordion-titleLabelPaddingTop);
+ padding-bottom: var(--accordion-titleLabelPaddingBottom);
}
span.mat-expansion-indicator {
display: none;
@@ -199,33 +187,28 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit {
width: 24px;
height: 24px;
}
- &.after {
- flex-direction: row;
- .imageIcon,
- dxc-accordion-icon {
- margin-left: 16px;
- }
- }
&.before {
flex-direction: row-reverse;
justify-content: flex-end;
.imageIcon,
dxc-accordion-icon {
- margin-right: 16px;
+ margin-right: var(--accordion-iconMarginRight);
+ margin-left: var(--accordion-iconMarginLeft);
}
}
dxc-accordion-icon {
display: flex;
svg,
img {
- width: 24px;
- height: 24px;
+ fill: var(--accordion-iconColor);
+ color: var(--accordion-iconColor);
+ width: var(--accordion-iconSize);
+ height: var(--accordion-iconSize);
}
}
}
mat-panel-description {
justify-content: flex-end;
- margin-right: 24px;
overflow: hidden;
font-family: var(--accordion-assistiveTextFontFamily);
font-size: var(--accordion-assistiveTextFontSize);
@@ -234,10 +217,8 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit {
color: var(--accordion-assistiveTextFontColor);
letter-spacing: var(assistiveTextLetterSpacing);
min-width: var(--accordion-assistiveTextMinWidth);
- margin-right: var(--accordion-assistiveTextMarginRight);
- margin-left: var(--accordion-assistiveTextMarginLeft);
- margin-top: var(--accordion-assistiveTextMarginTop);
- margin-bottom: var(--accordion-assistiveTextMarginBottom);
+ padding-right: var(--accordion-assistiveTextPaddingRight);
+ padding-left: var(--accordion-assistiveTextPaddingLeft);
span {
overflow: hidden;
text-overflow: ellipsis;
@@ -249,11 +230,13 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit {
}
&:not(.disabled) {
mat-expansion-panel-header {
- &:focus {
+ &:focus,
+ &:focus-visible {
outline: -webkit-focus-ring-color
- var(--accordion-headerFocusBorderStyle)
- var(--accordion-headerFocusBorderThickness);
- outline-color: var(--accordion-focusOutline);
+ var(--accordion-focusBorderStyle)
+ var(--accordion-focusBorderThickness);
+ outline-color: var(--accordion-focusBorderColor);
+ outline-offset: var(--accordion-focusBorderOffset);
}
&:hover {
background-color: var(
@@ -265,7 +248,7 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit {
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
- svg {
+ .caret-indicator svg {
display: block;
fill: var(--accordion-arrowColor);
}
@@ -284,13 +267,23 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit {
mat-expansion-panel.disabled {
cursor: not-allowed;
+ background-color: var(--accordion-disabledBackgroundColor) !important;
mat-expansion-panel-header {
- .mat-expansion-panel-header-title,
- .mat-expansion-panel-header-description {
- color: var(--accordion-disabledFontColor);
+ .mat-expansion-panel-header-title {
+ color: var(--accordion-disabledTitleLabelFontColor);
+ }
+ dxc-accordion-icon {
+ svg,
+ img {
+ fill: var(--accordion-disabledIconColor);
+ color: var(--accordion-disabledIconColor);
+ }
+ }
+ .caret-indicator svg {
+ fill: var(--accordion-disabledArrowColor);
}
- svg {
- fill: var(--accordion-disabledFontColor);
+ mat-panel-description {
+ color: var(--accordion-disabledAssistiveTextFontColor);
}
}
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-accordionGroup/dxc-accordionGroup.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-accordionGroup/dxc-accordionGroup.component.ts
index 5f1afd434..6a6bbbaa3 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-accordionGroup/dxc-accordionGroup.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-accordionGroup/dxc-accordionGroup.component.ts
@@ -206,6 +206,9 @@ export class DxcAccordionGroupComponent implements OnChanges, OnInit {
border-top-left-radius: var(--accordion-borderRadius);
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
+ border-bottom: var(--accordion-accordionGroupSeparatorBorderThickness)
+ var(--accordion-accordionGroupSeparatorBorderStyle)
+ var(--accordion-accordionGroupSeparatorBorderColor);
}
}
dxc-accordion.middle {
@@ -214,6 +217,9 @@ export class DxcAccordionGroupComponent implements OnChanges, OnInit {
border-bottom-left-radius: 0px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
+ border-bottom: var(--accordion-accordionGroupSeparatorBorderThickness)
+ var(--accordion-accordionGroupSeparatorBorderStyle)
+ var(--accordion-accordionGroupSeparatorBorderColor);
}
}
dxc-accordion.last {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-alert/dxc-alert.component.scss b/projects/dxc-ngx-cdk/src/lib/dxc-alert/dxc-alert.component.scss
index 1001da56a..6287e315f 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-alert/dxc-alert.component.scss
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-alert/dxc-alert.component.scss
@@ -49,8 +49,10 @@
border-style: var(--alert-borderStyle);
border-width: var(--alert-borderThickness);
z-index: 1;
+ padding-left: 12px;
+ padding-right: 12px;
.alertHeader {
- height: var(--alert-height);
+ height: 48px;
position: relative;
color: var(--alert-titleFontColor);
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
@@ -74,6 +76,7 @@
width: var(--alert-iconSize);
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
+ margin-right: 12px;
}
.mainLabel {
padding-left: var(--alert-titlePaddingLeft);
@@ -85,18 +88,32 @@
font-style: var(--alert-titleFontStyle);
font-size: var(--alert-titleFontSize);
text-transform: var(--alert-titleTextTransform);
+ color: var(--alert-titleFontColor);
+ margin-right: 8px;
}
}
.closeIcon {
display: flex;
justify-content: flex-end;
margin-right: 12px;
- width: 100%;
+ padding: 3px;
+ margin-left: 12px;
svg {
cursor: pointer;
width: 20px;
height: 20px;
}
+ &:hover {
+ background-color: var(--alert-hoverActionBackgroundColor);
+ }
+ &:focus, &:focus-visible {
+ outline-color: var(--alert-focusActionBorderColor);
+ }
+ &:active {
+ outline-color: var(--alert-focusActionBorderColor);
+ outline: -webkit-focus-ring-color auto 1px;
+ background-color: var(--alert-activeActionBackgroundColor);
+ }
}
.spacer {
font-family: var(--alert-titleFontFamily);
@@ -104,8 +121,11 @@
}
.inlineText {
width: 100%;
- font-family: var(--alert-titleFontFamily);
- font-size: var(--alert-titleFontSize);
+ font-family: var(--alert-inlineTextFontFamily);
+ font-size: var(--alert-inlineTextFontSize);
+ color: var(--alert-inlineTextFontColor);
+ font-style: var(--alert-inlineTextFontStyle);
+ font-weight: var(--alert-inlineTextFontWeight);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
@@ -113,6 +133,7 @@
padding-right: var(--alert-inlineTextPaddingRight);
padding-top: var(--alert-inlineTextPaddingTop);
padding-bottom: var(--alert-inlineTextPaddingBottom);
+ margin-left: 8px;
}
}
.contentContainer:not(.content) {
@@ -120,8 +141,6 @@
}
.content {
display: block;
- font-family: var(--fontFamily);
- font-size: var(--alert-contentFontSize);
padding: var(--alert-contentPaddingTop) var(--alert-contentPaddingRight)
var(--alert-contentPaddingBottom) var(--alert-contentPaddingLeft);
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-alert/dxc-alert.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-alert/dxc-alert.component.ts
index da987fc2a..f5b3a3da9 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-alert/dxc-alert.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-alert/dxc-alert.component.ts
@@ -102,40 +102,55 @@ export class DxcAlertComponent implements OnChanges {
switch (type) {
case "info":
this.currentBackgroundColor =
- this.utils.readProperty("--alert-infoColor");
+ this.utils.readProperty("--alert-infoBackgroundColor");
return css`
- background-color: var(--alert-infoColor);
+ background-color: var(--alert-infoBackgroundColor);
border-color: var(--alert-infoBorderColor);
+ .icon svg{
+ fill: var(--alert-infoIconColor);
+ }
`;
case "confirm":
this.currentBackgroundColor = this.utils.readProperty(
- "--alert-successColor"
+ "--alert-successBackgroundColor"
);
return css`
- background-color: var(--alert-successColor);
+ background-color: var(--alert-successBackgroundColor);
border-color: var(--alert-successBorderColor);
+ .icon svg{
+ fill: var(--alert-successIconColor);
+ }
`;
case "warning":
this.currentBackgroundColor = this.utils.readProperty(
- "--alert-warningColor"
+ "--alert-warningBackgroundColor"
);
return css`
- background-color: var(--alert-warningColor);
+ background-color: var(--alert-warningBackgroundColor);
border-color: var(--alert-warningBorderColor);
+ .icon svg{
+ fill: var(--alert-warningIconColor);
+ }
`;
case "error":
this.currentBackgroundColor =
- this.utils.readProperty("--alert-errorColor");
+ this.utils.readProperty("--alert-errorBackgroundColor");
return css`
- background-color: var(--alert-errorColor);
+ background-color: var(--alert-errorBackgroundColor);
border-color: var(--alert-errorBorderColor);
+ .icon svg{
+ fill: var(--alert-errorIconColor);
+ }
`;
default:
this.currentBackgroundColor =
- this.utils.readProperty("--alert-errorColor");
+ this.utils.readProperty("--alert-errorBackgroundColor");
return css`
- background-color: var(--alert-errorColor);
+ background-color: var(--alert-errorBackgroundColor);
border-color: var(--alert-errorBorderColor);
+ .icon svg{
+ fill: var(--alert-errorIconColor);
+ }
`;
}
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-box/dxc-box.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-box/dxc-box.component.ts
index 13b259220..d4ec53386 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-box/dxc-box.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-box/dxc-box.component.ts
@@ -78,11 +78,6 @@ export class DxcBoxComponent implements OnInit {
border-color: var(--box-borderColor);
overflow: hidden;
background-color: var(--box-backgroundColor);
- color: var(--box-fontColor);
- font-family: var(--box-fontFamily);
- font-weight: var(--box-fontWeight);
- font-style: var(--box-font);
- font-size: var(--box-fontSize);
letter-spacing: var(--box-letterSpacing);
${this.utils.getBoxShadow(inputs.shadowDepth)}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-button/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-button/README.md
index dc40eb5a7..ea508ed40 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-button/README.md
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-button/README.md
@@ -120,7 +120,7 @@ The API properties are the following:
#6F2C91
|
- Applies to token primaryBackgroundColor and secondaryOutlinedColor in primary and secondary mode. |
+ Applies to token primaryBackgroundColor and secondaryBorderColor in primary and secondary mode. |
| hoverColor |
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.component.ts
index 3579bf0cb..b6be35043 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.component.ts
@@ -146,11 +146,13 @@ export class DxcButtonComponent {
display: inline-flex;
vertical-align: middle;
button {
- padding-right: 24px;
- padding-left: 24px;
+ padding-top: var(--button-paddingTop);
+ padding-bottom: var(--button-paddingBottom);
+ padding-left: var(--button-paddingLeft);
+ padding-right: var(--button-paddingRight);
${this.setPadding(inputs.size)}
width: 100%;
- height: var(--button-height);
+ height: 40px;
line-height: var(--button-labelFontLineHeight);
letter-spacing: var(--button-labelLetterSpacing);
white-space: normal;
@@ -165,6 +167,7 @@ export class DxcButtonComponent {
: "flex-direction: row;"}
& > span {
+ margin: 0 8px;
display: block;
width: 100%;
z-index: 20;
@@ -178,15 +181,17 @@ export class DxcButtonComponent {
}
img,
svg {
- ${this.iconPosition === "before"
- ? "margin-right: 8px;"
- : "margin-left: 8px;"}
- height: var(--button-iconSize);
- width: var(--button-iconSize);
+ ${this.label
+ ? this.iconPosition === "before"
+ ? "margin-left: 8px;"
+ : "margin-right: 8px;"
+ : ""}
+ height: 24px;
+ width: 24px;
z-index: 20;
}
mat-icon {
- font-size: var(--button-iconSize);
+ font-size: 24px;
width: auto;
height: auto;
margin-bottom: -2.5px;
@@ -242,8 +247,6 @@ export class DxcButtonComponent {
? this.getPrimaryLightStyle()
: this.getPrimaryDarkStyle()}
button {
- padding-top: var(--button-primaryPaddingTop);
- padding-bottom: var(--button-primaryPaddingBottom);
span.mat-button-ripple {
border-style: var(--button-primaryBorderStyle);
border-radius: var(--button-primaryBorderRadius);
@@ -306,19 +309,18 @@ export class DxcButtonComponent {
background: var(--button-primaryBackgroundColor);
color: var(--button-primaryFontColor);
span.mat-button-ripple {
- border-color: var(--button-primaryBorderColor);
+ border-color: transparent;
}
&:hover:not([disabled]) {
background: var(--button-primaryHoverBackgroundColor);
- color: var(--button-primaryHoverFontColor);
+ color: #ffffff;
}
&:disabled {
background: var(--button-primaryDisabledBackgroundColor);
color: var(--button-primaryDisabledFontColor) !important;
}
&:focus:not([disabled]) {
- outline: -webkit-focus-ring-color auto 2px;
- outline-color: var(--button-focusColor);
+ box-shadow: var(--button-focusBorderColor) 0px 0px 0px 2px;
}
&:active:not([disabled]) {
background: var(--button-primaryActiveBackgroundColor);
@@ -333,22 +335,22 @@ export class DxcButtonComponent {
background: var(--button-primaryBackgroundColorOnDark);
color: var(--button-primaryFontColorOnDark);
span.mat-button-ripple {
- border-color: var(--button-primaryBorderColorOnDark);
+ border-color: transparent;
}
&:hover:not([disabled]) {
background: var(--button-primaryHoverBackgroundColorOnDark);
- color: var(--button-primaryHoverFontColorOnDark);
+ color: #ffffff;
}
&:disabled {
background: var(--button-primaryDisabledBackgroundColorOnDark);
color: var(--button-primaryDisabledFontColorOnDark) !important;
}
&:focus:not([disabled]) {
- outline: -webkit-focus-ring-color auto 2px;
- outline-color: var(--button-focusColor);
+ box-shadow: var(--button-focusBorderColorOnDark) 0px 0px 0px 2px;
}
&:active:not([disabled]) {
background: var(--button-primaryActiveBackgroundColorOnDark);
+ color: #ffffff;
}
}
`;
@@ -360,32 +362,31 @@ export class DxcButtonComponent {
color: var(--button-secondaryFontColor);
background-color: var(--button-secondaryBackgroundColor);
span.mat-button-ripple {
- border-color: var(--button-secondaryOutlinedColor);
+ border-color: var(--button-secondaryBorderColor);
}
&:hover:not([disabled]) {
span.mat-button-ripple {
- border-color: var(--button-secondaryHoverOutlinedColor);
+ border-color: #5f249f;
}
background: var(--button-secondaryHoverBackgroundColor);
color: var(--button-secondaryHoverFontColor);
}
&:disabled {
+ background-color: var(--button-secondaryDisabledBackgroundColor);
color: var(--button-secondaryDisabledFontColor) !important;
span.mat-button-ripple {
- border-color: var(--button-secondaryDisabledOutlinedColor);
+ border-color: var(--button-secondaryDisabledBorderColor);
}
}
&:focus {
- outline: -webkit-focus-ring-color auto 2px;
- outline-color: var(--button-focusColor);
+ box-shadow: var(--button-focusBorderColor) 0px 0px 0px 2px;
background-color: var(--button-secondaryBackgroundColor);
- color: var(--button-secondaryHoverFontColor);
}
&:active:not([disabled]) {
background: var(--button-secondaryActiveBackgroundColor);
color: var(--button-secondaryHoverFontColor);
span.mat-button-ripple {
- border-color: var(--button-secondaryOutlinedColor);
+ border-color: var(--button-secondaryBorderColor);
}
}
}
@@ -398,31 +399,32 @@ export class DxcButtonComponent {
color: var(--button-secondaryFontColorOnDark);
background-color: var(--button-secondaryBackgroundColorOnDark);
span.mat-button-ripple {
- border-color: var(--button-secondaryOutlinedColorOnDark);
+ border-color: var(--button-secondaryBorderColorOnDark);
}
&:hover:not([disabled]) {
span.mat-button-ripple {
- border-color: var(--button-secondaryHoverOutlinedColorOnDark);
+ border-color: #ffffff;
}
background: var(--button-secondaryHoverBackgroundColorOnDark);
color: var(--button-secondaryHoverFontColorOnDark);
}
&:disabled {
- border-color: var(--button-secondaryDisabledOutlinedColorOnDark);
+ background-color: var(
+ --button-secondaryDisabledBackgroundColorOnDark
+ );
+ border-color: var(--button-secondaryDisabledBorderColorOnDark);
color: var(--button-secondaryDisabledFontColorOnDark) !important;
span.mat-button-ripple {
- border-color: var(--button-secondaryDisabledOutlinedColorOnDark);
+ border-color: var(--button-secondaryDisabledBorderColorOnDark);
}
}
&:focus {
- outline: -webkit-focus-ring-color auto 1px;
- outline-color: var(--button-focusColor);
+ box-shadow: var(--button-focusBorderColorOnDark) 0px 0px 0px 2px;
background-color: var(--button-secondaryBackgroundColorOnDark);
- color: var(--button-secondaryHoverFontColorOnDark);
}
&:active:not([disabled]) {
span.mat-button-ripple {
- border-color: var(--button-secondaryOutlinedColorOnDark);
+ border-color: var(--button-secondaryBorderColorOnDark);
}
background: var(--button-secondaryActiveBackgroundColorOnDark);
color: var(--button-secondaryHoverFontColorOnDark);
@@ -437,25 +439,21 @@ export class DxcButtonComponent {
background-color: var(--button-textBackgroundColor);
color: var(--button-textFontColor);
span.mat-button-ripple {
- border-color: var(--button-textBorderColor);
+ border-color: transparent;
}
&:hover:not([disabled]) {
background: var(--button-textHoverBackgroundColor);
- color: var(--button-textHoverFontColor);
}
&:disabled {
color: var(--button-textDisabledFontColor) !important;
background: var(--button-textDisabledBackgroundColor);
}
&:focus {
- outline: -webkit-focus-ring-color auto 1px;
- outline-color: var(--button-focusColor);
+ box-shadow: var(--button-focusBorderColor) 0px 0px 0px 2px;
background-color: var(--button-textBackgroundColor);
- color: var(--button-textFontColor);
}
&:active:not([disabled]) {
background-color: var(--button-textActiveBackgroundColor);
- color: var(--button-textHoverFontColor);
}
}
`;
@@ -467,25 +465,23 @@ export class DxcButtonComponent {
background-color: var(--button-textBackgroundColorOnDark);
color: var(--button-textFontColorOnDark);
span.mat-button-ripple {
- border-color: var(--button-textBorderColorOnDark);
+ border-color: transparent;
}
&:hover:not([disabled]) {
background: var(--button-textHoverBackgroundColorOnDark);
- color: var(--button-textHoverFontColorOnDark);
+ color: #ffffff;
}
&:disabled {
color: var(--button-textDisabledFontColorOnDark) !important;
background: var(--button-textDisabledBackgroundColorOnDark);
}
&:focus {
- outline: -webkit-focus-ring-color auto 1px;
- outline-color: var(--button-focusColor);
+ box-shadow: var(--button-focusBorderColorOnDark) 0px 0px 0px 2px;
background-color: var(--button-textBackgroundColorOnDark);
- color: var(--button-textFontColorOnDark);
}
&:active:not([disabled]) {
background-color: var(--button-textActiveBackgroundColorOnDark);
- color: var(--button-textHoverFontColorOnDark);
+ color: #ffffff;
}
}
`;
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-card/dxc-card.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-card/dxc-card.component.ts
index e61206e45..447b01f45 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-card/dxc-card.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-card/dxc-card.component.ts
@@ -174,7 +174,6 @@ export class DxcCardComponent implements OnInit {
height: var(--card-height);
mat-card {
- font-family: var(--fontFamily);
font-size: 14px;
display: inline-flex;
padding: 0px;
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-checkbox/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-checkbox/README.md
index 07fd862a5..98ea2b60f 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-checkbox/README.md
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-checkbox/README.md
@@ -141,7 +141,7 @@ The API properties are the following:
| color |
#0067B3 |
- Applies to token selectedBackgroundColor and borderColor. |
+ Applies to token backgroundColorChecked and borderColor. |
| checkColor |
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 01afe8ffc..359615814 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
@@ -175,13 +175,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-selectedBackgroundColor) !important;
+ background: var(--checkbox-backgroundColorChecked) !important;
}
.mat-checkbox-checked .mat-checkbox-inner-container {
&:hover {
.mat-checkbox-background {
- background: var(--checkbox-selectedHoverBackgroundColor) !important;
+ background: var(--checkbox-hoverBackgroundColorChecked) !important;
}
}
}
@@ -260,18 +260,18 @@ export class DxcCheckboxComponent implements OnInit {
border-color: var(--checkbox-disabledBorderColor) !important;
}
}
- label.mat-checkbox-layout span.mat-checkbox-label {
+ label.mat-checkbox-layout span.mat-checkbox-label span.checkboxLabel{
color: var(--checkbox-disabledFontColor) !important;
}
}
&.mat-checkbox-disabled.mat-checkbox-checked {
.mat-checkbox-inner-container {
.mat-checkbox-frame {
- border-color: var(--checkbox-disabledBorderColor) !important;
+ border-color: transparent !important;
}
.mat-checkbox-background {
background: var(
- --checkbox-selectedDisabledBackgroundColor
+ --checkbox-disabledBackgroundColorChecked
) !important;
svg path {
stroke: var(--checkbox-disabledCheckColor) !important;
@@ -296,14 +296,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-selectedBackgroundColorOnDark) !important;
+ background: var(--checkbox-backgroundColorCheckedOnDark) !important;
}
.mat-checkbox-checked .mat-checkbox-inner-container {
&:hover {
.mat-checkbox-background {
background: var(
- --checkbox-selectedHoverBackgroundColorOnDark
+ --checkbox-hoverBackgroundColorCheckedOnDark
) !important;
}
}
@@ -356,7 +356,7 @@ export class DxcCheckboxComponent implements OnInit {
}
.mat-checkbox-background {
background: var(
- --checkbox-selectedDisabledBackgroundColorOnDark
+ --checkbox-disabledBackgroundColorCheckedOnDark
) !important;
svg path {
stroke: var(--checkbox-disabledCheckColorOnDark) !important;
@@ -368,7 +368,7 @@ export class DxcCheckboxComponent implements OnInit {
&.hover:not(.dark) {
.mat-checkbox-checked .mat-checkbox-inner-container {
.mat-checkbox-background {
- background: var(--checkbox-selectedHoverBackgroundColor) !important;
+ background: var(--checkbox-hoverBackgroundColorChecked) !important;
}
}
label.mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-background,
@@ -379,7 +379,7 @@ export class DxcCheckboxComponent implements OnInit {
&.hover {
.mat-checkbox-checked .mat-checkbox-inner-container {
.mat-checkbox-background {
- background: var(--checkbox-selectedHoverBackgroundColorOnDark) !important;
+ background: var(--checkbox-hoverBackgroundColorCheckedOnDark) !important;
}
}
label.mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-background,
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-chip/dxc-chip.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-chip/dxc-chip.component.ts
index e8273840a..4ef62dab6 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-chip/dxc-chip.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-chip/dxc-chip.component.ts
@@ -175,7 +175,7 @@ export class DxcChipComponent implements OnChanges {
100% - 40px - ${this.utils.getMarginValue(inputs.margin, "left")} -
${this.utils.getMarginValue(inputs.margin, "right")}
);
- min-height: 20px;
+ min-height: 40px;
background-color: ${inputs.disabled
? "var(--chip-disabledBackgroundColor)"
: "var(--chip-backgroundColor)"};
@@ -183,7 +183,6 @@ export class DxcChipComponent implements OnChanges {
border-width: var(--chip-borderThickness);
border-style: var(--chip-borderStyle);
border-color: var(--chip-borderColor);
-
padding-top: var(--chip-contentPaddingTop);
padding-bottom: var(--chip-contentPaddingBottom);
padding-left: var(--chip-contentPaddingLeft);
@@ -215,14 +214,12 @@ export class DxcChipComponent implements OnChanges {
? "var(--chip-disabledIconColor)"
: "var(--chip-iconColor)"};
${this.label || this.suffixIconSrc
- ? "margin-right: 8px;"
+ ? "margin-right: var(--chip-iconSpacing);"
: this.prefixIconSrc
? "5px"
: ""};
height: var(--chip-iconSize);
width: var(--chip-iconSize);
- padding-left: var(--chip-iconPaddingLeft);
- padding-right: var(--chip-iconPaddingRight);
&:focus-within {
${this.prefixIconClick.observers.length > 0
? "outline: -webkit-focus-ring-color auto 1px; outline-color: var(--chip-focusColor);"
@@ -239,14 +236,12 @@ export class DxcChipComponent implements OnChanges {
? "var(--chip-disabledIconColor)"
: "var(--chip-iconColor)"};
${this.label || this.suffixIconSrc
- ? "margin-left: 8px;"
+ ? "margin-left: var(--chip-iconSpacing);"
: this.prefixIconSrc
? "5px"
: ""};
height: var(--chip-iconSize);
width: var(--chip-iconSize);
- padding-left: var(--chip-iconPaddingLeft);
- padding-right: var(--chip-iconPaddingRight);
&:focus-within {
${this.suffixIconClick.observers.length > 0
? "outline: -webkit-focus-ring-color auto 1px; outline-color: var(--chip-focusColor);"
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-date/dxc-date.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-date/dxc-date.component.ts
index b35865fb8..09adfb08c 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-date/dxc-date.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-date/dxc-date.component.ts
@@ -287,7 +287,6 @@ export class DxcDateComponent implements OnChanges, OnInit {
display: inline-block;
}
.mat-calendar {
- font-family: var(--fontFamily);
width: 100%;
height: 100%;
}
@@ -322,7 +321,7 @@ export class DxcDateComponent implements OnChanges, OnInit {
font-size: 16px;
}
.mat-calendar-body-today:not(.mat-calendar-body-selected) {
- border-color: var(--date-pickerActualDate);
+ border-color: var(--date-pickerActualDateColor);
}
.mat-calendar-body-selected {
border-color: var(--date-pickerSelectedDateBackgroundColor);
@@ -351,7 +350,7 @@ export class DxcDateComponent implements OnChanges, OnInit {
}
.mat-calendar-body-label {
- color: var(--date-pickerLabelColor);
+ color: var(--date-pickerMonthColor);
}
.mat-calendar-period-button {
@@ -390,7 +389,7 @@ export class DxcDateComponent implements OnChanges, OnInit {
.mat-calendar-period-button:hover,
.mat-calendar-previous-button:hover,
.mat-calendar-next-button:hover {
- background: var(--date-pickerHoverHeaderColor);
+ background: #0000000a;
}
.mat-button-wrapper {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.ts
index c05cfd981..1a652b8cf 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-dialog/dxc-dialog.component.ts
@@ -163,12 +163,6 @@ export class DxcDialogComponent {
border-color: var(--dialog-closeIconBorderColor);
}
}
- .content {
- font-family: var(--dialog-fontFamily);
- font-size: var(--dialog-fontSize);
- font-weight: var(--dialog-fontWeight);
- color: var(--dialog-fontColor);
- }
.content,
.content > div,
.content > span,
@@ -178,11 +172,11 @@ export class DxcDialogComponent {
width: 3px;
}
::-webkit-scrollbar-track {
- background-color: var(--dialog-scrollBarTrackColor);
+ background-color: #D9D9D9;
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
- background-color: var(--dialog-scrollBarThumbColor);
+ background-color: #666666;
border-radius: 3px;
}
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown.component.ts
index 108b4b731..ce29403cc 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown.component.ts
@@ -240,57 +240,62 @@ export class DxcDropdownComponent implements OnChanges {
}
img,
svg {
- width: var(--dropdown-iconSize);
- height: var(--dropdown-iconSize);
+ width: var(--dropdown-optionIconSize);
+ height: var(--dropdown-optionIconSize);
vertical-align: middle;
- fill: var(--dropdown-iconColor);
+ fill: var(--dropdown-optionIconColor);
}
${this.optionsIconPosition === "after"
? css`
dxc-dropdown-icon {
- margin-left: var(--dropdown-iconOptionSpacing);
+ margin-left: var(--dropdown-optionIconSpacing);
}
`
: css`
dxc-dropdown-icon {
- margin-right: var(--dropdown-iconOptionSpacing);
+ margin-right: var(--dropdown-optionIconSpacing);
}
`}
dxc-dropdown-icon {
- img, svg{
- fill: var(--dropdown-iconColor);
- }
- }
+ img,
+ svg {
+ fill: var(--dropdown-optionIconColor);
+ }
+ }
.mat-menu-content {
padding-top: 0px !important;
padding-bottom: 0px !important;
width: ${this.width + "px"};
.mat-menu-item {
${this.iconPositionAfter(this.optionsIconPosition === "after")}
- background-color: var(--dropdown-optionsListBackgroundColor);
- border-color: var(--dropdown-optionsListBackgroundColor);
- line-height: var(--dropdown-optionsHeight);
- height: var(--dropdown-optionsHeight);
+ background-color: var(--dropdown-optionBackgroundColor);
+ border-color: var(--dropdown-optionBackgroundColor);
+ line-height: 24px;
+ height: 36px;
+ padding-top: var(--dropdown-optionPaddingTop);
+ padding-right: var(--dropdown-optionPaddingRight);
+ padding-bottom: var(--dropdown-optionPaddingBottom);
+ padding-left: var(--dropdown-optionPaddingLeft);
span {
text-overflow: ellipsis;
vertical-align: middle;
- color: var(--dropdown-optionsFontColor);
- font-family: var(--dropdown-fontFamily);
- font-size: var(--dropdown-optionsFontSize);
- font-style: var(--dropdown-optionsFontStyle);
- font-weight: var(--dropdown-optionsFontWeight);
+ color: var(--dropdown-optionFontColor);
+ font-family: var(--dropdown-optionFontFamily);
+ font-size: var(--dropdown-optionFontSize);
+ font-style: var(--dropdown-optionFontStyle);
+ font-weight: var(--dropdown-optionFontWeight);
}
&:hover {
- background-color: var(--dropdown-optionsListHoverBackgroundColor);
- border-color: var(--dropdown-optionsListHoverBackgroundColor);
+ background-color: var(--dropdown-hoverOptionBackgroundColor);
+ border-color: var(--dropdown-hoverOptionBackgroundColor);
}
&.cdk-focused {
outline: -webkit-focus-ring-color auto 2px !important;
outline-color: var(--dropdown-focusColor) !important;
}
&:active {
- background-color: var(--dropdown-optionsListActiveBackgroundColor);
- border-color: var(--dropdown-optionsListActiveBackgroundColor);
+ background-color: var(--dropdown-activeOptionBackgroundColor);
+ border-color: var(--dropdown-activeOptionBackgroundColor);
}
}
}
@@ -301,8 +306,11 @@ export class DxcDropdownComponent implements OnChanges {
triggerButtonStyles(inputs) {
return css`
${this.calculateWidth(inputs)}
- min-height: var(--dropdown-minHeight);
- padding: 0px 16px;
+ min-height: 40px;
+ padding-top: var(--dropdown-buttonPaddingTop);
+ padding-right: var(--dropdown-buttonPaddingRight);
+ padding-bottom: var(--dropdown-buttonPaddingBottom);
+ padding-left: var(--dropdown-buttonPaddingLeft);
display: inline-flex;
align-items: center;
border-color: var(--dropdown-borderColor);
@@ -312,7 +320,7 @@ export class DxcDropdownComponent implements OnChanges {
background-color: var(--dropdown-buttonBackgroundColor);
&:hover:not(.mat-button-disabled) {
cursor: pointer;
- background-color: var(--dropdown-buttonHoverBackgroundColor) !important;
+ background-color: var(--dropdown-hoverButtonBackgroundColor) !important;
}
&:active:not(.mat-button-disabled) {
background-color: var(
@@ -326,31 +334,35 @@ export class DxcDropdownComponent implements OnChanges {
: ""};
.menu-buttom-label {
color: var(--dropdown-buttonFontColor);
- font-family: var(--dropdown-fontFamily);
+ font-family: var(--dropdown-buttonFontFamily);
font-size: var(--dropdown-buttonFontSize);
font-style: var(--dropdown-buttonFontStyle);
font-weight: var(--dropdown-buttonFontWeight);
- margin-right: 12px;
}
.arrow-down {
- border-top: 5px solid var(--dropdown-buttonFontColor);
+ border-top: 5px solid var(--dropdown-caretIconColor);
}
.arrow-up {
- border-bottom: 5px solid var(--dropdown-buttonFontColor);
+ border-bottom: 5px solid var(--dropdown-caretIconColor);
}
&.mat-button-disabled {
cursor: not-allowed;
- background-color: var(
- --dropdown-disabledButtonBackgroundColor
- ) !important;
+ background-color: transparent;
+ border-color: var(--dropdown-disabledBorderColor);
+ .buttonContent {
+ img,
+ svg {
+ fill: var(--dropdown-disabledColor);
+ }
+ }
.menu-buttom-label {
- color: var(--dropdown-disabledButtonFontColor);
+ color: var(--dropdown-disabledColor);
}
.arrow-down {
- border-top: 5px solid var(--dropdown-disabledButtonFontColor);
+ border-top: 5px solid var(--dropdown-disabledColor);
}
.arrow-up {
- border-bottom: 5px solid var(--dropdown-disabledButtonFontColor);
+ border-bottom: 5px solid var(--dropdown-disabledColor);
}
}
`;
@@ -415,42 +427,38 @@ export class DxcDropdownComponent implements OnChanges {
margin-top: 1px;
}
.arrow-container {
- width: 24px;
+ margin-left: var(--dropdown-caretIconSpacing);
+ width: var(--dropdown-caretIconSize);
display: flex;
- height: 24px;
+ height: var(--dropdown-caretIconSize);
align-items: center;
justify-content: center;
- margin-left: var(--dropdown-caretIconMarginLeft);
- margin-right: var(--dropdown-caretIconMarginRight);
- margin-top: var(--dropdown-caretIconMarginTop);
- margin-bottom: var(--dropdown-caretIconMarginBottom);
}
.buttonContent {
display: flex;
flex-grow: unset;
width: fit-content;
align-items: center;
+ img,
+ svg {
+ width: var(--dropdown-buttonIconSize);
+ height: var(--dropdown-buttonIconSize);
+ vertical-align: middle;
+ fill: var(--dropdown-buttonIconColor);
+ }
}
- img,
- svg {
- width: var(--dropdown-iconSize);
- height: var(--dropdown-iconSize);
- vertical-align: middle;
- fill: var(--dropdown-iconColor);
- }
-
${this.iconPosition === "after"
? css`
.buttonContent {
flex-direction: row-reverse;
- }
- dxc-dropdown-icon {
- margin-right: var(--dropdown-iconOptionSpacing);
+ dxc-dropdown-icon {
+ margin-right: var(--dropdown-buttonIconSpacing);
+ }
}
`
: css`
- dxc-dropdown-icon {
- margin-right: var(--dropdown-iconOptionSpacing);
+ .buttonContent dxc-dropdown-icon {
+ margin-right: var(--dropdown-buttonIconSpacing);
}
`}
`;
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-footer/dxc-footer.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-footer/dxc-footer.component.ts
index 3e9807f98..01610ce91 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-footer/dxc-footer.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-footer/dxc-footer.component.ts
@@ -84,8 +84,10 @@ export class DxcFooterComponent implements OnChanges {
socialIconImageStyle: string = css`
display: inline-flex;
- height: var(--footer-socialIconSize);
- width: var(--footer-socialIconSize);
+ height: var(--footer-socialLinksSize);
+ width: var(--footer-socialLinksSize);
+ color: var(--footer-socialLinksColor);
+ fill: var(--footer-socialLinksColor);
`;
childComponentsStyle: string;
@@ -94,7 +96,7 @@ export class DxcFooterComponent implements OnChanges {
socialLinksStyle: string = css`
display: inline-flex;
- margin-left: var(--footer-socialIconsGutter);
+ margin-left: var(--footer-socialLinksGutter);
&:first-child {
margin-left: 0px;
}
@@ -102,7 +104,6 @@ export class DxcFooterComponent implements OnChanges {
bottomLinkStyle: string = css`
text-decoration: none;
- color: var(--white, white);
font-size: 12px;
`;
@@ -158,9 +159,14 @@ export class DxcFooterComponent implements OnChanges {
return css`
padding: ${responsive ? "20px" : "24px 36px"};
background-color: var(--footer-backgroundColor);
- min-height: var(--footer-minHeight);
- color: var(--footer-fontColorBase);
${this.utils.getTopMargin(input.margin)}
+ width: 100%;
+ box-sizing: border-box;
+ min-height: var(--footer-height);
+ display: flex;
+ flex-direction: column;
+ -webkit-box-pack: justify;
+ justify-content: space-between;
`;
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-header/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-header/README.md
index b98d4b796..ac62e6502 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-header/README.md
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-header/README.md
@@ -199,11 +199,11 @@ Here is an example of its used:
Applies to token textColorMenu. |
- | hamburguerColor |
+ hamburguerIconColor |
#000000
|
- Applies to token hamburguerColor and hoverHamburguerColor (0.16 opacity). |
+ Applies to token hamburguerIconColor and hoverhamburguerIconColor (0.16 opacity). |
| logo |
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header-dropdown/dxc-header-dropdown.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header-dropdown/dxc-header-dropdown.component.ts
index 8d3a832a0..46953487e 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header-dropdown/dxc-header-dropdown.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header-dropdown/dxc-header-dropdown.component.ts
@@ -46,7 +46,6 @@ export class DxcHeaderDropdownComponent implements OnChanges {
return css`
dxc-dropdown {
.menu-buttom-label {
- font-family: var(--fontFamily);
color: var(--header-fontColor) !important;
}
button {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header.component.ts
index 2c605326d..e0d9a19e4 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header.component.ts
@@ -178,11 +178,7 @@ export class DxcHeaderComponent implements OnChanges {
getDynamicStyle(inputs) {
return css`
-
- font-size: var(--header-fontSizeBase);
font-family: var(--header-fontFamily);
-
-
${this.getBottomMargin(inputs.margin)}
.headerAnchor {
cursor: ${this.isClickDefined ? "pointer;" : "default; "};
@@ -192,10 +188,12 @@ export class DxcHeaderComponent implements OnChanges {
font-size: unset;
.mat-toolbar-row {
min-height: var(--header-minHeight);
- padding: 0 24px;
+ padding-top: var(--header-paddingTop);
+ padding-right: var(--header-paddingRight);
+ padding-bottom: var(--header-paddingBottom);
+ padding-left: var(--header-paddingLeft);
}
&.underlined {
-
.mat-toolbar-row {
border-bottom: ${inputs.underlined ?
`var(--header-underlinedThickness) var(--header-underlinedStyle) var(--header-underlinedColor);`: 'unset;'};
@@ -210,29 +208,21 @@ export class DxcHeaderComponent implements OnChanges {
}
.mat-toolbar-row {
background: var(--header-backgroundColor);
- color: var(--header-fontColorBase);
}
.dxc-logo,
img {
- height: 40px;
- width: auto;
+ height: var(--header-logoHeight);
+ width: var(--header-logoWidth);
vertical-align: middle;
}
.content {
-
width: calc(100% - 186px);
display: flex;
align-items: center;
flex-grow: 1;
justify-content: flex-end;
${this.utils.getPaddings(inputs.padding)}
- font-family: var(--header-customContentFontFamily, --header-fontFamilyBase);
- font-style: var(--header-customContentFontStyle);
- font-size: var(--header-customContentFontSize, --header-fontSizeBase);
- font-weight: var(--header-customContentFontWeight);
- color: var(--header-customContentFontColor, --header-fontColorBase);
-
align-items: center;
flex-wrap: wrap;
overflow: hidden;
@@ -259,16 +249,16 @@ export class DxcHeaderComponent implements OnChanges {
width: 24px;
height: 24px;
svg path {
- fill: var(--header-hamburguerColor) !important;
+ fill: var(--header-hamburguerIconColor) !important;
}
}
.hamburgerTitle {
- font-family: var(--header-hamburguerFontFamily, --header-fontFamilyBase);
+ font-family: var(--header-hamburguerFontFamily);
font-style: var(--header-hamburguerFontStyle);
font-size: var(--header-hamburguerFontSize);
text-transform: var(--header-hamburguerTextTransform);
font-weight: var(--header-hamburguerFontWeight);
- color: var(--header-hamburguerFontColor, --header-fontColorBase);
+ color: var(--header-hamburguerFontColor);
}
}
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-heading/dxc-heading.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-heading/dxc-heading.component.ts
index 293f9037f..d4ba136ec 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-heading/dxc-heading.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-heading/dxc-heading.component.ts
@@ -50,10 +50,6 @@ export class DxcHeadingComponent {
.container {
${this.utils.getMargins(inputs.margin)}
}
-
- font-family: var(--heading-fontFamilyBase);
- color: var(--heading-fontColorBase);
-
h1,
h2,
h3,
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-link/dxc-link.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-link/dxc-link.component.ts
index 595ed06d5..eb2d37ace 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-link/dxc-link.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-link/dxc-link.component.ts
@@ -162,8 +162,8 @@ export class DxcLinkComponent {
width: var(--link-iconSize);
height: var(--link-iconSize);
${inputs.iconPosition === "before"
- ? "margin-right: var(--link-iconGutter);"
- : "margin-left: var(--link-iconGutter);"}
+ ? "margin-right: var(--link-iconSpacing);"
+ : "margin-left: var(--link-iconSpacing);"}
}
}
`;
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-new-date/dxc-new-date.helper.ts b/projects/dxc-ngx-cdk/src/lib/dxc-new-date/dxc-new-date.helper.ts
index 1c888961f..8c49ad287 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-new-date/dxc-new-date.helper.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-new-date/dxc-new-date.helper.ts
@@ -19,7 +19,6 @@ export class DxcNewDateHelper {
display: inline-block;
}
.mat-calendar {
- font-family: var(--fontFamily);
width: 100%;
height: 100%;
}
@@ -54,7 +53,7 @@ export class DxcNewDateHelper {
font-size: 16px;
}
.mat-calendar-body-today:not(.mat-calendar-body-selected) {
- border-color: var(--newDate-pickerActualDate);
+ border-color: var(--newDate-pickerActualDateColor);
}
.mat-calendar-body-selected {
border-color: var(--newDate-pickerSelectedDateBackgroundColor);
@@ -83,7 +82,7 @@ export class DxcNewDateHelper {
}
.mat-calendar-body-label {
- color: var(--newDate-pickerLabelColor);
+ color: var(--newDate-pickerMonthColor);
}
.mat-calendar-period-button {
@@ -122,7 +121,7 @@ export class DxcNewDateHelper {
.mat-calendar-period-button:hover,
.mat-calendar-previous-button:hover,
.mat-calendar-next-button:hover {
- background: var(--newDate-pickerHoverHeaderColor);
+ background: #0000000a;
}
.mat-button-wrapper {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-new-input-text/dxc-new-input-text.helper.ts b/projects/dxc-ngx-cdk/src/lib/dxc-new-input-text/dxc-new-input-text.helper.ts
index be7f82f0d..0b4e34808 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-new-input-text/dxc-new-input-text.helper.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-new-input-text/dxc-new-input-text.helper.ts
@@ -33,31 +33,31 @@ export class DxcNewInputTextHelper {
getDisabledStyle() {
return css`
dxc-input-text-prefix {
- border-right: 1px solid var(--input-disabledPrefixColor);
- color: var(--input-disabledPrefixColor);
+ border-right: 1px solid var(--newInputText-disabledPrefixColor);
+ color: var(--newInputText-disabledPrefixColor);
}
dxc-input-text-suffix {
- border-left: 1px solid var(--input-disabledSuffixColor);
- color: var(--input-disabledSuffixColor);
+ border-left: 1px solid var(--newInputText-disabledSuffixColor);
+ color: var(--newInputText-disabledSuffixColor);
}
.inputLabel,
.inputOptionalLabel {
- color: var(--input-disabledLabelFontColor);
+ color: var(--newInputText-disabledLabelFontColor);
}
.helperText {
- color: var(--input-disabledHelperTextFontColor);
+ color: var(--newInputText-disabledHelperTextFontColor);
}
.inputText {
- color: var(--input-disabledValueFontColor);
+ color: var(--newInputText-disabledValueFontColor);
}
.inputText::placeholder {
- color: var(--input-disabledPlaceholderFontColor);
+ color: var(--newInputText-disabledPlaceholderFontColor);
}
.inputAction {
pointer-events: none;
- background-color: var(--input-disabledActionBackgroundColor);
- color: var(--input-disabledActionIconColor);
- fill: var(--input-disabledActionIconColor);
+ background-color: var(--newInputText-disabledActionBackgroundColor);
+ color: var(--newInputText-disabledActionIconColor);
+ fill: var(--newInputText-disabledActionIconColor);
}
.inputText,
.inputAction {
@@ -65,10 +65,10 @@ export class DxcNewInputTextHelper {
}
.inputContainer,
.inputContainer:hover {
- border: 1px solid var(--input-disabledBorderColor);
+ border: 1px solid var(--newInputText-disabledBorderColor);
box-shadow: none;
cursor: not-allowed;
- background-color: var(--input-disabledContainerFillColor);
+ background-color: var(--newInputText-disabledContainerFillColor);
}
`;
}
@@ -76,31 +76,31 @@ export class DxcNewInputTextHelper {
getDisabledDarkStyle() {
return css`
dxc-input-text-prefix {
- border-right: 1px solid var(--input-disabledPrefixColorOnDark);
- color: var(--input-disabledPrefixColorOnDark);
+ border-right: 1px solid var(--newInputText-disabledPrefixColorOnDark);
+ color: var(--newInputText-disabledPrefixColorOnDark);
}
dxc-input-text-suffix {
- border-left: 1px solid var(--input-disabledSuffixColorOnDark);
- color: var(--input-disabledSuffixColorOnDark);
+ border-left: 1px solid var(--newInputText-disabledSuffixColorOnDark);
+ color: var(--newInputText-disabledSuffixColorOnDark);
}
.inputLabel,
.inputOptionalLabel {
- color: var(--input-disabledLabelFontColorOnDark);
+ color: var(--newInputText-disabledLabelFontColorOnDark);
}
.helperText {
- color: var(--input-disabledHelperTextFontColorOnDark);
+ color: var(--newInputText-disabledHelperTextFontColorOnDark);
}
.inputText {
- color: var(--input-disabledValueFontColorOnDark);
+ color: var(--newInputText-disabledValueFontColorOnDark);
}
.inputText::placeholder {
- color: var(--input-disabledPlaceholderFontColorOnDark);
+ color: var(--newInputText-disabledPlaceholderFontColorOnDark);
}
.inputAction {
pointer-events: none;
- background-color: var(--input-disabledActionBackgroundColorOnDark);
- color: var(--input-disabledActionIconColorOnDark);
- fill: var(--input-disabledActionIconColorOnDark);
+ background-color: var(--newInputText-disabledActionBackgroundColorOnDark);
+ color: var(--newInputText-disabledActionIconColorOnDark);
+ fill: var(--newInputText-disabledActionIconColorOnDark);
}
.inputText,
.inputAction {
@@ -108,10 +108,10 @@ export class DxcNewInputTextHelper {
}
.inputContainer,
.inputContainer:hover {
- border: 1px solid var(--input-disabledBorderColorOnDark);
+ border: 1px solid var(--newInputText-disabledBorderColorOnDark);
box-shadow: none;
cursor: not-allowed;
- background-color: var(--input-disabledContainerFillColorOnDark);
+ background-color: var(--newInputText-disabledContainerFillColorOnDark);
}
`;
}
@@ -126,11 +126,11 @@ export class DxcNewInputTextHelper {
&.hasError {
.inputContainer {
- border: 1px solid var(--input-errorBorderColor);
- box-shadow: inset 0 0 0 1px var(--input-errorBorderColor);
+ border: 1px solid var(--newInputText-errorBorderColor);
+ box-shadow: inset 0 0 0 1px var(--newInputText-errorBorderColor);
&:hover {
- border-color: var(--input-hoverErrorBorderColor);
- box-shadow: inset 0 0 0 1px var(--input-hoverErrorBorderColor);
+ border-color: var(--newInputText-hoverErrorBorderColor);
+ box-shadow: inset 0 0 0 1px var(--newInputText-hoverErrorBorderColor);
}
}
}
@@ -149,29 +149,29 @@ export class DxcNewInputTextHelper {
dxc-input-text-prefix, dxc-input-text-suffix{
height: calc(1rem * 1.5);
line-height: calc(1rem * 1.5);
- font-family: var(--input-fontFamily);
+ font-family: var(--newInputText-fontFamily);
pointer-events: none;
}
dxc-input-text-suffix{
- border-left: 1px solid var(--input-suffixColor);
+ border-left: 1px solid var(--newInputText-suffixColor);
margin-right: calc(1rem * 0.5);
margin-left: calc(1rem * 0.25);
padding: 0 0 0 calc(1rem * 0.5);
- color: var(--input-suffixColor);
- font-size: var(--input-suffixFontSize);
- font-style: var(--input-suffixFontStyle);
- font-weight: var(--input-suffixFontWeight);
+ color: var(--newInputText-suffixColor);
+ font-size: var(--newInputText-suffixFontSize);
+ font-style: var(--newInputText-suffixFontStyle);
+ font-weight: var(--newInputText-suffixFontWeight);
}
dxc-input-text-prefix{
- border-right: 1px solid var(--input-prefixColor);
+ border-right: 1px solid var(--newInputText-prefixColor);
margin-left: calc(1rem * 0.25);
padding: 0 calc(1rem * 0.5) 0 0;
- color: var(--input-prefixColor);
- font-size: var(--input-prefixFontSize);
- font-style: var(--input-prefixFontStyle);
- font-weight: var(--input-prefixFontWeight);
+ color: var(--newInputText-prefixColor);
+ font-size: var(--newInputText-prefixFontSize);
+ font-style: var(--newInputText-prefixFontStyle);
+ font-weight: var(--newInputText-prefixFontWeight);
}
.overlay:not(.overlayVisible) {
@@ -185,24 +185,24 @@ export class DxcNewInputTextHelper {
z-index
}
.inputLabel, .inputOptionalLabel {
- color: var(--input-labelFontColor);
- font-family: var(--input-fontFamily);
- font-size: var(--input-labelFontSize);
- font-style: var(--input-labelFontStyle);
- font-weight: var(--input-labelFontWeight);
+ color: var(--newInputText-labelFontColor);
+ font-family: var(--newInputText-fontFamily);
+ font-size: var(--newInputText-labelFontSize);
+ font-style: var(--newInputText-labelFontStyle);
+ font-weight: var(--newInputText-labelFontWeight);
line-height: 1.75em;
min-height: 24px;
}
.inputOptionalLabel {
- font-weight: var(--input-optionalLabelFontWeight);
+ font-weight: var(--newInputText-optionalLabelFontWeight);
}
.helperText {
- color: var(--input-helperTextFontColor);
- font-family: var(--input-fontFamily);
- font-size: var(--input-helperTextFontSize);
- font-style: var(--input-helperTextFontStyle);
- font-weight: var(--input-helperTextFontWeight);
+ color: var(--newInputText-helperTextFontColor);
+ font-family: var(--newInputText-fontFamily);
+ font-size: var(--newInputText-helperTextFontSize);
+ font-style: var(--newInputText-helperTextFontStyle);
+ font-weight: var(--newInputText-helperTextFontWeight);
line-height: 1.5em;
min-height: 18px;
}
@@ -214,12 +214,12 @@ export class DxcNewInputTextHelper {
height: 38px;
border: ${
inputs.error
- ? `1px solid var(--input-errorBorderColor)`
- : "1px solid var(--input-enabledBorderColor)"
+ ? `1px solid var(--newInputText-errorBorderColor)`
+ : "1px solid var(--newInputText-enabledBorderColor)"
};
${
inputs.error
- ? `box-shadow: inset 0 0 0 1px var(--input-errorBorderColor);`
+ ? `box-shadow: inset 0 0 0 1px var(--newInputText-errorBorderColor);`
: ""
};
border-radius: 4px;
@@ -227,14 +227,14 @@ export class DxcNewInputTextHelper {
&:hover {
${
inputs.error
- ? `border-color: var(--input-hoverErrorBorderColor);
- box-shadow: inset 0 0 0 1px var(--input-hoverErrorBorderColor);`
- : `border-color: var(--input-hoverBorderColor);`
+ ? `border-color: var(--newInputText-hoverErrorBorderColor);
+ box-shadow: inset 0 0 0 1px var(--newInputText-hoverErrorBorderColor);`
+ : `border-color: var(--newInputText-hoverBorderColor);`
};
}
&:focus-within {
- border: 1px solid var(--input-focusBorderColor);
- box-shadow: inset 0 0 0 1px var(--input-focusBorderColor);
+ border: 1px solid var(--newInputText-focusBorderColor);
+ box-shadow: inset 0 0 0 1px var(--newInputText-focusBorderColor);
}
}
@@ -245,14 +245,14 @@ export class DxcNewInputTextHelper {
border: none;
outline: none;
padding: 0 calc(1rem * 0.5);
- color: var(--input-valueFontColor);
- font-family: var(--input-fontFamily);
- font-size: var(--input-valueFontSize);
- font-style: var(--input-valueFontStyle);
- font-weight: var(--input-valueFontWeight);
- caret-color: var(--input-valueFontColor);
+ color: var(--newInputText-valueFontColor);
+ font-family: var(--newInputText-fontFamily);
+ font-size: var(--newInputText-valueFontSize);
+ font-style: var(--newInputText-valueFontStyle);
+ font-weight: var(--newInputText-valueFontWeight);
+ caret-color: var(--newInputText-valueFontColor);
&::placeholder {
- color: var(--input-placeholderFontColor);
+ color: var(--newInputText-placeholderFontColor);
}
}
@@ -262,34 +262,34 @@ export class DxcNewInputTextHelper {
max-width: 24px;
padding: 3px;
font-size: 1rem;
- font-family: var(--input-fontFamily);
- border: 1px solid var(--input-actionBackgroundColor);
+ font-family: var(--newInputText-fontFamily);
+ border: 1px solid var(--newInputText-actionBackgroundColor);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
- background-color: var(--input-actionBackgroundColor);
- color: var(--input-actionIconColor);
+ background-color: var(--newInputText-actionBackgroundColor);
+ color: var(--newInputText-actionIconColor);
&:hover {
- background-color: var(--input-hoverActionBackgroundColor);
- color: var(--input-hoverActionIconColor);
+ background-color: var(--newInputText-hoverActionBackgroundColor);
+ color: var(--newInputText-hoverActionIconColor);
}
&:focus {
- color: var(--input-focusActionIconColor);
- border: 2px solid var(--input-focusActionBorderColor);
+ color: var(--newInputText-focusActionIconColor);
+ border: 2px solid var(--newInputText-focusActionBorderColor);
outline: none;
}
&:focus-visible {
- border: 2px solid var(--input-focusActionBorderColor);
+ border: 2px solid var(--newInputText-focusActionBorderColor);
outline: none;
}
&:active {
- border: 2px solid var(--input-focusActionBorderColor);
- box-shadow: inset 0 0 0 1px var(--input-activeActionBackgroundColor);
+ border: 2px solid var(--newInputText-focusActionBorderColor);
+ box-shadow: inset 0 0 0 1px var(--newInputText-activeActionBackgroundColor);
outline: none;
- background-color: var(--input-activeActionBackgroundColor);
- color: var(--input-activeActionIconColor);
+ background-color: var(--newInputText-activeActionBackgroundColor);
+ color: var(--newInputText-activeActionIconColor);
}
svg {
line-height: 18px;
@@ -303,7 +303,7 @@ export class DxcNewInputTextHelper {
align-items: center;
justify-content: center;
pointer-events: none;
- color: var(--input-errorIconColor);
+ color: var(--newInputText-errorIconColor);
svg {
line-height: 18px;
height: 18px;
@@ -311,11 +311,11 @@ export class DxcNewInputTextHelper {
}
}
.inputErrorMessage {
- font-family: var(--input-fontFamily);
- color: var(--input-errorMessageColor);
- font-size: var(--input-errorFontSize);
- font-style: var(--input-errorFontStyle);
- font-weight: var(--input-errorFontWeight);
+ font-family: var(--newInputText-fontFamily);
+ color: var(--newInputText-errorMessageColor);
+ font-size: var(--newInputText-errorFontSize);
+ font-style: var(--newInputText-errorFontStyle);
+ font-weight: var(--newInputText-errorFontWeight);
line-height: 1.5em;
min-height: 18px;
}
@@ -345,45 +345,45 @@ export class DxcNewInputTextHelper {
overflow-x: hidden;
max-height: 160px;
li {
- color: var(--input-listOptionFontColor);
- font-family: var(--input-listOptionFontFamily);
- font-size: var(--input-listOptionFontSize);
- font-weight: var(--input-listOptionFontWeight);
+ color: var(--newInputText-listOptionFontColor);
+ font-family: var(--newInputText-listOptionFontFamily);
+ font-size: var(--newInputText-listOptionFontSize);
+ font-weight: var(--newInputText-listOptionFontWeight);
line-height: 1.75em;
padding-top: calc((39px - 1.75em) / 2);
padding-bottom: calc((39px - 1.75em) / 2);
padding-left: 1em;
cursor: pointer;
&.selected {
- background-color: var(--input-hoverListOptionBackgroundColor);
+ background-color: var(--newInputText-hoverListOptionBackgroundColor);
}
&.active.selected {
- background-color: var(--input-activeListOptionBackgroundColor);
+ background-color: var(--newInputText-activeListOptionBackgroundColor);
}
b{
- font-weight: var(--input-listOptionTypedFontWeight);
+ font-weight: var(--newInputText-listOptionTypedFontWeight);
}
&.systemMessage{
- color: var(--input-systemMessageFontColor);
- font-family: var(--input-systemMessageFontFamily);
- font-size: var(--input-systemMessageFontSize);
- font-weight: var(--input-systemMessageFontWeight);
+ color: var(--newInputText-systemMessageFontColor);
+ font-family: var(--newInputText-systemMessageFontFamily);
+ font-size: var(--newInputText-systemMessageFontSize);
+ font-weight: var(--newInputText-systemMessageFontWeight);
}
}
&.fetchingError{
- border: 1px solid var(--input-errorMessageBorderColor);
+ border: 1px solid var(--newInputText-errorMessageBorderColor);
li{
- font-family: var(--input-errorMessageFontFamily);
- font-size: var(--input-errorMessageFontSize);
- font-weight: var(--input-errorMessageFontWeight);
+ font-family: var(--newInputText-errorMessageFontFamily);
+ font-size: var(--newInputText-errorMessageFontSize);
+ font-weight: var(--newInputText-errorMessageFontWeight);
align-items: center;
display: flex;
- background-color: var(--input-errorMessageBackgroundColor);
+ background-color: var(--newInputText-errorMessageBackgroundColor);
svg{
height: 18px;
width: 18px;
- fill: var(--input-errorIconColor);
+ fill: var(--newInputText-errorIconColor);
}
span{
margin-left: 8px;
@@ -420,74 +420,74 @@ export class DxcNewInputTextHelper {
getDarkStyle(inputs) {
return css`
dxc-input-text-prefix {
- border-right: 1px solid var(--input-prefixColorOnDark);
- color: var(--input-prefixColorOnDark);
+ border-right: 1px solid var(--newInputText-prefixColorOnDark);
+ color: var(--newInputText-prefixColorOnDark);
}
dxc-input-text-suffix {
- border-left: 1px solid var(--input-suffixColorOnDark);
- color: var(--input-suffixColorOnDark);
+ border-left: 1px solid var(--newInputText-suffixColorOnDark);
+ color: var(--newInputText-suffixColorOnDark);
}
.inputLabel,
.inputOptionalLabel {
- color: var(--input-labelFontColorOnDark);
+ color: var(--newInputText-labelFontColorOnDark);
}
.helperText {
- color: var(--input-helperTextFontColorOnDark);
+ color: var(--newInputText-helperTextFontColorOnDark);
}
.inputText {
- color: var(--input-valueFontColorOnDark);
- caret-color: var(--input-valueFontColorOnDark);
+ color: var(--newInputText-valueFontColorOnDark);
+ caret-color: var(--newInputText-valueFontColorOnDark);
&::placeholder {
- color: var(--input-placeholderFontColorOnDark);
+ color: var(--newInputText-placeholderFontColorOnDark);
}
}
.inputContainer {
border: ${inputs.error
- ? `1px solid var(--input-errorBorderColorOnDark)`
- : "1px solid var(--input-enabledBorderColorOnDark)"};
+ ? `1px solid var(--newInputText-errorBorderColorOnDark)`
+ : "1px solid var(--newInputText-enabledBorderColorOnDark)"};
${inputs.error
- ? `box-shadow: inset 0 0 0 1px var(--input-errorBorderColorOnDark);`
+ ? `box-shadow: inset 0 0 0 1px var(--newInputText-errorBorderColorOnDark);`
: ""};
&:hover {
${inputs.error
- ? `border-color: var(--input-hoverErrorBorderColorOnDark);
- box-shadow: inset 0 0 0 1px var(--input-hoverErrorBorderColorOnDark);`
- : `border-color: var(--input-hoverBorderColorOnDark);`};
+ ? `border-color: var(--newInputText-hoverErrorBorderColorOnDark);
+ box-shadow: inset 0 0 0 1px var(--newInputText-hoverErrorBorderColorOnDark);`
+ : `border-color: var(--newInputText-hoverBorderColorOnDark);`};
}
&:focus-within {
- border: 1px solid var(--input-focusBorderColorOnDark);
- box-shadow: inset 0 0 0 1px var(--input-focusBorderColorOnDark);
+ border: 1px solid var(--newInputText-focusBorderColorOnDark);
+ box-shadow: inset 0 0 0 1px var(--newInputText-focusBorderColorOnDark);
}
}
.inputAction {
- border: 1px solid var(--input-actionBackgroundColorOnDark);
- background-color: var(--input-actionBackgroundColorOnDark);
- color: var(--input-actionIconColorOnDark);
+ border: 1px solid var(--newInputText-actionBackgroundColorOnDark);
+ background-color: var(--newInputText-actionBackgroundColorOnDark);
+ color: var(--newInputText-actionIconColorOnDark);
&:hover {
- color: var(--input-hoverActionIconColorOnDark);
- background-color: var(--input-hoverActionBackgroundColorOnDark);
+ color: var(--newInputText-hoverActionIconColorOnDark);
+ background-color: var(--newInputText-hoverActionBackgroundColorOnDark);
}
&:focus {
- color: var(--input-focusActionIconColorOnDark);
- border: 2px solid var(--input-focusActionBorderColorOnDark);
+ color: var(--newInputText-focusActionIconColorOnDark);
+ border: 2px solid var(--newInputText-focusActionBorderColorOnDark);
}
&:focus-visible {
- color: var(--input-focusActionIconColorOnDark);
- border: 2px solid var(--input-focusActionBorderColorOnDark);
+ color: var(--newInputText-focusActionIconColorOnDark);
+ border: 2px solid var(--newInputText-focusActionBorderColorOnDark);
}
&:active {
- border: 2px solid var(--input-focusActionBorderColorOnDark);
+ border: 2px solid var(--newInputText-focusActionBorderColorOnDark);
box-shadow: inset 0 0 0 1px
- var(--input-activeActionBackgroundColorOnDark);
- background-color: var(--input-activeActionBackgroundColorOnDark);
- color: var(--input-activeActionIconColorOnDark);
+ var(--newInputText-activeActionBackgroundColorOnDark);
+ background-color: var(--newInputText-activeActionBackgroundColorOnDark);
+ color: var(--newInputText-activeActionIconColorOnDark);
}
}
.inputErrorIcon {
- color: var(--input-errorIconColorOnDark);
+ color: var(--newInputText-errorIconColorOnDark);
}
.inputErrorMessage {
- color: var(--input-errorMessageColorOnDark);
+ color: var(--newInputText-errorMessageColorOnDark);
}
`;
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-paginator/dxc-paginator.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-paginator/dxc-paginator.component.html
index 2077586ec..7cbd6b025 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-paginator/dxc-paginator.component.html
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-paginator/dxc-paginator.component.html
@@ -27,21 +27,51 @@
(onClick)="onFirstHandler($event)"
size="small"
[margin]="buttonMargin"
- [iconSrc]="firstImgSrc"
[disabled]="currentPageInternal === 1"
[tabIndexValue]="tabIndexValue"
- >
+ >
+
+
+
+
- Page: {{ currentPageInternal }} of {{ totalPages }}
+ >
+
+
+
+
+
+ Page: {{ currentPageInternal }} of {{ totalPages }}
+
Go to page
+ >
+
+
+
+
+ >
+
+
+
+
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-paginator/dxc-paginator.component.scss b/projects/dxc-ngx-cdk/src/lib/dxc-paginator/dxc-paginator.component.scss
index 424212ab6..0dc9ae7a0 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-paginator/dxc-paginator.component.scss
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-paginator/dxc-paginator.component.scss
@@ -7,6 +7,7 @@
font-size: var(--paginator-fontSize);
font-style: var(--paginator-fontStyle);
font-weight: var(--paginator-fontWeight);
+ text-transform: var(--paginator-fontTextTransform);
}
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-paginator/dxc-paginator.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-paginator/dxc-paginator.component.ts
index 71db7edf1..4c687b4be 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-paginator/dxc-paginator.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-paginator/dxc-paginator.component.ts
@@ -73,10 +73,6 @@ export class DxcPaginatorComponent implements OnInit {
buttonMargin = { left: "xxsmall", right: "xxsmall" };
selectMargin = { left: "xxsmall", right: "small" };
- firstImgSrc = "assets/previousPage.svg";
- prevImgSrc = "assets/previous.svg";
- nextImgSrc = "assets/next.svg";
- lastImgSrc = "assets/nextPage.svg";
totalPages: number;
currentPageInternal: number;
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-progressbar/dxc-progressbar.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-progressbar/dxc-progressbar.component.html
index 7c1dea50e..fd78ad1c3 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-progressbar/dxc-progressbar.component.html
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-progressbar/dxc-progressbar.component.html
@@ -7,4 +7,5 @@
>
+ {{ helperText }}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-progressbar/dxc-progressbar.component.scss b/projects/dxc-ngx-cdk/src/lib/dxc-progressbar/dxc-progressbar.component.scss
deleted file mode 100644
index 0aff58409..000000000
--- a/projects/dxc-ngx-cdk/src/lib/dxc-progressbar/dxc-progressbar.component.scss
+++ /dev/null
@@ -1,100 +0,0 @@
-:host {
- display: block;
- height: auto;
- width: auto;
- .progressContainer {
- width: auto;
- }
- &.absolute {
- position: absolute;
- width: auto;
- margin: 0px;
- height: 100%;
- ::ng-deep {
- mat-progress-bar {
- width: 80%;
- }
- }
- .labelContainer {
- width: 80%;
- }
- }
- .backOverlay {
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- position: fixed;
- opacity: var(--progressBar-overlayOpacity);
- transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
- background-color: var(--progressBar-overlayColor);
- }
- .overlayed {
- height: 100%;
- justify-content: center;
- align-items: center;
- top: 0;
- left: 0;
- flex-direction: column;
- position: fixed;
- z-index: 3120;
- display: flex;
- width: 100%;
- .labelContainer .label,
- .labelContainer .value {
- color: white;
- }
- }
- ::ng-deep {
- mat-progress-bar {
- border-radius: var(--progressBar-borderRadius);
- height: var(--progressBar-thickness);
- z-index: 1;
- width: auto;
- .mat-progress-bar-fill::after {
- background-color: var(--progressBar-trackLineColor);
- }
- .mat-progress-bar-background {
- fill: transparent;
- }
- }
- }
- .labelContainer {
- z-index: 1;
- width: auto;
- margin-bottom: 8px;
- display: flex;
- .label {
- display: block;
- text-align: left;
- width: 95%;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- font-family: var(--progressBar-labelFontFamily);
- font-size: var(--progressBar-labelFontSize);
- font-style: var(--progressBar-labelFontStyle);
- font-weight: var(--progressBar-labelFontWeight);
- color: var(--progressBar-labelFontColor);
- text-transform: var(--progressBar-labelFontTextTransform);
- }
- .value {
- display: inline-flex;
- justify-content: flex-end;
- width: 5%;
- font-family: var(--progressBar-valueFontFamily);
- font-size: var(--progressBar-valueFontSize);
- font-style: var(--progressBar-valueFontStyle);
- font-weight: var(--progressBar-valueFontWeight);
- color: var(--progressBar-valueFontColor);
- text-transform: var(--progressBar-valueFontTextTransform);
- }
- }
- mat-progress-bar {
- ::ng-deep {
- .mat-progress-bar-buffer {
- background-color: var(--progressBar-totalLineColor);
- }
- }
- }
-}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-progressbar/dxc-progressbar.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-progressbar/dxc-progressbar.component.ts
index d0b2312a5..ff84de309 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-progressbar/dxc-progressbar.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-progressbar/dxc-progressbar.component.ts
@@ -2,18 +2,18 @@ import { Component, Input, HostBinding, SimpleChanges } from "@angular/core";
import { css } from "emotion";
import { BehaviorSubject } from "rxjs";
import { CssUtils } from "../utils";
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
@Component({
selector: "dxc-progressbar",
templateUrl: "./dxc-progressbar.component.html",
- styleUrls: ["./dxc-progressbar.component.scss"],
providers: [CssUtils],
})
export class DxcProgressbarComponent {
mode: string = "indeterminate";
@Input() value: number;
@Input() label: string;
+ @Input() helperText: string;
@Input()
get showValue(): boolean {
return this._showValue;
@@ -85,21 +85,111 @@ export class DxcProgressbarComponent {
getDynamicStyle(inputs) {
return css`
${this.utils.getMargins(inputs.margin)}
- .backOverlay {
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- position: fixed;
- opacity: 1;
- ${inputs.overlay
- ? css`
- background-color: rgba(0, 0, 0, 0.7);
- `
- : css`
- background-color: transparent;
- `}
- transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+ display: block;
+ height: auto;
+ width: auto;
+ .progressContainer {
+ width: auto;
+ }
+ &.absolute {
+ position: absolute;
+ width: auto;
+ margin: 0px;
+ height: 100%;
+ mat-progress-bar {
+ width: 80%;
+ }
+ .labelContainer {
+ width: 80%;
+ }
+ .backOverlay {
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ position: fixed;
+ opacity: var(--progressBar-overlayOpacity);
+ transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+ background-color: var(--progressBar-overlayColor);
+ }
+ .overlayed {
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+ top: 0;
+ left: 0;
+ flex-direction: column;
+ position: fixed;
+ z-index: 3120;
+ display: flex;
+ width: 100%;
+ .labelContainer .label,
+ .labelContainer .value {
+ color: var(--progressBar-labelFontColorOnDark);
+ }
+ }
+ }
+ mat-progress-bar {
+ border-radius: var(--progressBar-borderRadius);
+ height: var(--progressBar-thickness);
+ z-index: 1;
+ width: auto;
+ margin-bottom: 8px;
+ margin-top: 8px;
+ .mat-progress-bar-fill::after {
+ background-color: ${inputs.overlay
+ ? `var(--progressBar-trackLineColorOnDark);`
+ : `var(--progressBar-trackLineColor);`};
+ }
+ .mat-progress-bar-background {
+ fill: transparent;
+ }
+ }
+ .helperText{
+ font-family: var(--progressBar-helperTextFontFamily);
+ font-size: var(--progressBar-helperTextFontSize);
+ font-style: var(--progressBar-helperTextFontStyle);
+ font-weight: var(--progressBar-helperTextFontWeight);
+ color: ${inputs.overlay
+ ? `var(--progressBar-helperTextFontColorOnDark);`
+ : `var(--progressBar-helperTextFontColor);`};
+ }
+ .labelContainer {
+ z-index: 1;
+ width: auto;
+ display: flex;
+ .label {
+ display: block;
+ text-align: left;
+ width: 95%;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ font-family: var(--progressBar-labelFontFamily);
+ font-size: var(--progressBar-labelFontSize);
+ font-style: var(--progressBar-labelFontStyle);
+ font-weight: var(--progressBar-labelFontWeight);
+ color: var(--progressBar-labelFontColor);
+ text-transform: var(--progressBar-labelFontTextTransform);
+ }
+ .value {
+ display: inline-flex;
+ justify-content: flex-end;
+ width: 5%;
+ font-family: var(--progressBar-valueFontFamily);
+ font-size: var(--progressBar-valueFontSize);
+ font-style: var(--progressBar-valueFontStyle);
+ font-weight: var(--progressBar-valueFontWeight);
+ color: ${inputs.overlay
+ ? `var(--progressBar-valueFontColorOnDark);`
+ : `var(--progressBar-valueFontColor);`};
+ text-transform: var(--progressBar-valueFontTextTransform);
+ }
+ }
+ mat-progress-bar {
+ .mat-progress-bar-buffer {
+ background-color: var(--progressBar-totalLineColor);
+ }
}
`;
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-radio/dxc-radio.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-radio/dxc-radio.component.ts
index d67195579..32a60b7f1 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-radio/dxc-radio.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-radio/dxc-radio.component.ts
@@ -149,7 +149,10 @@ export class DxcRadioComponent implements OnInit {
${this.getLightStyle()}
mat-radio-button {
width: 100%;
+ height: 24px;
.mat-radio-label {
+ width: inherit;
+ height: inherit;
white-space: normal;
display: inline-flex;
align-items: center;
@@ -172,14 +175,10 @@ export class DxcRadioComponent implements OnInit {
${inputs.labelPosition === "after"
? css`
margin-right: var(--radio-circleLabelSpacing);
- margin-top: 10px;
- margin-bottom: 10px;
`
: inputs.labelPosition === "before"
? css`
margin-left: var(--radio-circleLabelSpacing);
- margin-top: 10px;
- margin-bottom: 10px;
`
: css``}
.mat-radio-frame {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-select/option/option.html b/projects/dxc-ngx-cdk/src/lib/dxc-select/option/option.html
index ed46bd4cb..65cc69d88 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-select/option/option.html
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-select/option/option.html
@@ -1,17 +1,19 @@
-
+
+
-
- {{label}}
-
+
+ {{label}}
+
-
+
+
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-select/option/option.module.ts b/projects/dxc-ngx-cdk/src/lib/dxc-select/option/option.module.ts
index 968becdd9..d745fe16a 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-select/option/option.module.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-select/option/option.module.ts
@@ -13,10 +13,11 @@ import { MatCommonModule } from '../common-behaviors/common-module';
import { DxcSelectOption } from './option';
import { DxcCheckboxModule } from '../../dxc-checkbox/dxc-checkbox.module';
import { DxcOptionIconComponent } from './dxc-option-icon/dxc-option-icon.component';
+import { BackgroundProviderModule } from "../../background-provider/background-provider.module";
@NgModule({
- imports: [MatRippleModule, CommonModule, MatCommonModule, DxcCheckboxModule],
+ imports: [MatRippleModule, CommonModule, MatCommonModule, DxcCheckboxModule, BackgroundProviderModule],
exports: [DxcSelectOption, DxcOptionIconComponent],
declarations: [DxcSelectOption, DxcOptionIconComponent]
})
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-select/option/option.scss b/projects/dxc-ngx-cdk/src/lib/dxc-select/option/option.scss
index 3136d86a8..621ab5548 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-select/option/option.scss
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-select/option/option.scss
@@ -20,7 +20,7 @@
dxc-checkbox {
mat-checkbox label.mat-checkbox-layout .mat-checkbox-inner-container{
- margin-right: var(--select-checkboxOptionSpacing);
+ margin-right: var(--select-optionCheckboxSpacing);
}
}
@@ -54,24 +54,6 @@
}
}
-// Collapses unwanted whitespace created by newlines in code like the following:
-//
-// {{value}}
-//
-.mat-option-text {
- display: inline-block;
- flex-grow: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- span {
- font-family: var(--select-fontFamily);
- color: var(--select-optionsFontColor);
- font-size: var(--select-optionsFontSize);
- font-style: var(--select-optionsFontStyle);
-
- }
-}
-
// Increase specificity because ripple styles are part of the `mat-core` mixin and can
// potentially overwrite the absolute position of the container.
.mat-option .mat-option-ripple {
@@ -80,17 +62,3 @@
// Pointer events can be safely disabled because the ripple trigger element is the host element.
pointer-events: none;
}
-
-.mat-option-text {
- dxc-option-icon {
- display: flex;
- align-items: center;
- color: var(--select-iconColor);
- svg, img {
- height: var(--select-iconSize);
- width: var(--select-iconSize);
-
-
- }
- }
-}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-select/option/option.ts b/projects/dxc-ngx-cdk/src/lib/dxc-select/option/option.ts
index 10a4b1b13..4fbe982f8 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-select/option/option.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-select/option/option.ts
@@ -32,7 +32,6 @@ import {
} from "./option-parent";
import { SelectService } from "../services/select.service";
import { css } from "emotion";
-import { BackgroundProviderService } from '../../background-provider/service/background-provider.service';
/**
* Option IDs need to be unique across components, so this counter exists outside of
@@ -52,7 +51,8 @@ export class MatOptionSelectionChange {
@Directive()
export class _MatOptionBase
- implements FocusableOption, AfterViewChecked, OnDestroy {
+ implements FocusableOption, AfterViewChecked, OnDestroy
+{
private _selected = false;
private _active = false;
private _disabled = false;
@@ -106,10 +106,12 @@ export class _MatOptionBase
private iconPosition = "";
- checkboxMargin = {right:"xsmall"}
+ checkboxMargin = { right: "xsmall" };
@HostBinding("class") className = `mat-option ${this.getDynamicStyle()}`;
+ backgroundColor = "";
+
constructor(
public _element: ElementRef,
private _changeDetectorRef: ChangeDetectorRef,
@@ -120,6 +122,9 @@ export class _MatOptionBase
this.iconPosition = position;
this.className = `mat-option ${this.getDynamicStyle()}`;
});
+ // this.service.isDarkThemeOption.subscribe((value) => {
+ // this.backgroundColor = value;
+ // });
}
/**
@@ -266,8 +271,9 @@ export class _MatOptionBase
getDynamicStyle() {
return css`
+ height: ${this.multiple ? "48px" : "36px"};
&.mat-option:not(.mat-option-disabled) {
- color: var(--select-color) !important;
+ color: var(--select-labelFontColor) !important;
}
.mat-option-text {
display: flex;
@@ -275,6 +281,17 @@ export class _MatOptionBase
? "flex-end"
: "flex-start"};
flex-direction: ${this.iconPosition == "after" ? "row-reverse" : "row"};
+ flex-grow: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ span {
+ font-family: var(--select-fontFamily);
+ color: ${this.service.isDarkTheme
+ ? "var(--select-optionFontColorOnDark)"
+ : "var(--select-optionFontColor)"};
+ font-size: var(--select-optionFontSize);
+ font-style: var(--select-optionFontStyle);
+ }
}
&.mat-option.mat-active {
outline: -webkit-focus-ring-color auto 1px;
@@ -282,10 +299,14 @@ export class _MatOptionBase
background: white;
}
&.mat-option:hover:not(.mat-option-disabled) {
- background: ${this.service.isDarkTheme ? "var(--select-hoveredOptionBackgroundColorOnDark)": "var(--select-hoveredOptionBackgroundColor)"} !important;
+ background: ${this.service.isDarkTheme
+ ? "var(--select-hoverOptionBackgroundColorOnDark)"
+ : "var(--select-hoverOptionBackgroundColor)"} !important;
}
&.mat-option.mat-selected:not(.mat-option-disabled) {
- background: ${this.service.isDarkTheme ? "var(--select-selectedOptionBackgroundColorOnDark)": "var(--select-selectedOptionBackgroundColor)"};
+ background: ${this.service.isDarkTheme
+ ? "var(--select-selectedOptionBackgroundColorOnDark)"
+ : "var(--select-selectedOptionBackgroundColor)"};
}
&.mat-option:focus:not(.mat-option-disabled) {
outline: -webkit-focus-ring-color auto 1px;
@@ -295,13 +316,16 @@ export class _MatOptionBase
color: var(--select-disabledColor) !important;
}
dxc-option-icon {
+ display: flex;
+ align-items: center;
${this.iconPosition == "after"
- ? "margin-left: var(--select-iconOptionSpacing)"
- : "margin-right: var(--select-iconOptionSpacing)"};
- color: var(--select-iconColor);
+ ? "margin-left: var(--select-optionIconSpacing)"
+ : "margin-right: var(--select-optionIconSpacing)"};
+ color: var(--select-optionIconColor);
img,
svg {
- width: var(--select-iconSize);
+ height: var(--select-optionIconSize);
+ width: var(--select-optionIconSize);
}
}
mat-checkbox.cdk-focused {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-select/select-animations.ts b/projects/dxc-ngx-cdk/src/lib/dxc-select/select-animations.ts
index 19822a51d..c5e9bd824 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-select/select-animations.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-select/select-animations.ts
@@ -52,20 +52,20 @@ export const matSelectAnimations: {
transform: 'scaleY(0.8)',
minWidth: '100%',
opacity: 0,
- marginTop: '47px'
+ marginTop: '49px'
})),
state('showing', style({
opacity: 1,
minWidth: 'calc(100% + 32px)', // 32px = 2 * 16px padding
transform: 'scaleY(1)',
- marginTop: '47px',
+ marginTop: '49px',
marginLeft: '32px'
})),
state('showing-multiple', style({
opacity: 1,
minWidth: 'calc(100% + 64px)', // 64px = 48px padding on the left + 16px padding on the right
transform: 'scaleY(1)',
- marginTop: '47px',
+ marginTop: '49px',
marginLeft: '32px'
})),
transition('void => *', animate('120ms cubic-bezier(0, 0, 0.2, 1)')),
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-select/select.scss b/projects/dxc-ngx-cdk/src/lib/dxc-select/select.scss
index e0c92c914..164ba8c43 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-select/select.scss
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-select/select.scss
@@ -99,14 +99,15 @@ $mat-select-placeholder-arrow-space: 2 *
.mat-select-panel {
@include mat-menu-base();
- background: var(--select-optionsBackgroundColor);
+ background: var(--select-optionBackgroundColor);
padding-top: 0;
padding-bottom: 0;
max-height: $mat-select-panel-max-height;
+ max-width: calc(100% - 32px);
min-width: 100%; // prevents some animation twitching and test inconsistencies in IE11
- border-color: var(--select-optionsBorderColor);
- border-style: var(--select-optionsBorderStyle);
- border-width: var(--select-optionsBorderThickness);
+ border-color: var(--select-optionBorderColor);
+ border-style: var(--select-optionBorderStyle);
+ border-width: var(--select-optionBorderThickness);
outline: 0;
&::-webkit-scrollbar {
@@ -129,8 +130,6 @@ $mat-select-placeholder-arrow-space: 2 *
.mat-option {
font-size: inherit;
font-family: var(--select-fontFamily);
- line-height: $mat-select-item-height;
- height: $mat-select-item-height;
}
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-select/select.ts b/projects/dxc-ngx-cdk/src/lib/dxc-select/select.ts
index db5faaabf..686985b2c 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-select/select.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-select/select.ts
@@ -608,12 +608,14 @@ export abstract class _MatSelectBase
super(elementRef, _defaultErrorStateMatcher, _parentForm, ngControl);
this.bgProviderService.$changeColor.subscribe((value) => {
- console.log(`value of color in select: ${value}`);
if (value === "dark") {
this.service.isDarkTheme = true;
} else if (value === "light") {
this.service.isDarkTheme = false;
}
+ this.service.isDarkThemeOption.next(this.utils.readProperty(
+ "--select-optionBackgroundColor"
+ ));
});
if (this.ngControl) {
@@ -1337,7 +1339,7 @@ export abstract class _MatSelectBase
transform: ${this.floatingStyles()};
color: ${this.invalid
? this.service.isDarkTheme ? "var(--select-errorColorOnDark)" : "var(--select-errorColor)"
- : this.service.isDarkTheme ? "var(--select-colorOnDark)" : "var(--select-color)"};
+ : this.service.isDarkTheme ? "var(--select-labelFontColorOnDark)" : "var(--select-labelFontColor)"};
transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
color 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
left 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
@@ -1358,7 +1360,7 @@ export abstract class _MatSelectBase
}
dxc-option-icon {
display: flex;
- margin-right: 5px;
+ margin-right: 12px;
img,
svg {
width: 24px;
@@ -1380,13 +1382,16 @@ export abstract class _MatSelectBase
outline: -webkit-focus-ring-color auto 1px;
outline-color: ${this.service.isDarkTheme ? "var(--select-focusColorOnDark)" : "var(--select-focusColor)"};
}
+ dxc-option-icon{
+ height: 100%;
+ }
}
.underline {
- height: 1px;
+ height: var(--select-underlineThickness);
background-color: ${this.invalid
? this.service.isDarkTheme ? "var(--select-errorColorOnDark)" : "var(--select-errorColor)"
- : this.service.isDarkTheme ? "var(--select-colorOnDark)" : "var(--select-color)"};
+ : this.service.isDarkTheme ? "var(--select-underlineColorOnDark)" : "var(--select-underlineColor)"};
position: absolute;
bottom: ${this.value ? "19.5px" : "18.5px"};
width: 100%;
@@ -1416,7 +1421,7 @@ export abstract class _MatSelectBase
}
.underline {
- height: 1px;
+ height: var(--select-underlineThickness);
background-color:${this.service.isDarkTheme ? "var(--select-disabledColorOnDark)" : "var(--select-disabledColor)"};
position: absolute;
bottom: ${this.value ? "19.5px" : "18.5px"};
@@ -1434,15 +1439,18 @@ export abstract class _MatSelectBase
}
.mat-select-value span {
color: ${this.service.isDarkTheme ? "var(--select-disabledColorOnDark)" : "var(--select-disabledColor)"};
+ font-size: var(--select-valueFontSize);
+ font-style: var(--select-valueFontStyle);
+ font-weight: var(--select-valueFontWeight);
}`
: `.mat-select-value span {
- color: ${this.service.isDarkTheme ? "var(--select-colorOnDark)" : "var(--select-color)"};
+ color: ${this.service.isDarkTheme ? "var(--select-valueFontColorOnDark)" : "var(--select-valueFontColor)"};
}
.mat-select-arrow {
- color: ${this.service.isDarkTheme ? "var(--select-colorOnDark)" : "var(--select-color)"};
+ color: ${this.service.isDarkTheme ? "var(--select-arrowColorOnDark)" : "var(--select-arrowColor)"};
}
div.underline.opened {
- border-bottom: 2px solid ${this.service.isDarkTheme ? "var(--select-colorOnDark)" : "var(--select-color)"};
+ border-bottom: 2px solid ${this.service.isDarkTheme ? "var(--select-underlineFocusColorOnDark)" : "var(--select-underlineFocusColor)"};
}
`}
`;
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-select/services/select.service.ts b/projects/dxc-ngx-cdk/src/lib/dxc-select/services/select.service.ts
index 5d196a93b..f3c50baa7 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-select/services/select.service.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-select/services/select.service.ts
@@ -14,5 +14,7 @@ export class SelectService {
public iconPosition: BehaviorSubject = new BehaviorSubject("before");
public isDarkTheme:boolean = false;
+
+ public isDarkThemeOption: BehaviorSubject = new BehaviorSubject(null);
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-sidenav/dxc-sidenav.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-sidenav/dxc-sidenav.component.html
index dd8b9c6c5..a9264db9b 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-sidenav/dxc-sidenav.component.html
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-sidenav/dxc-sidenav.component.html
@@ -1,6 +1,5 @@
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-sidenav/dxc-sidenav.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-sidenav/dxc-sidenav.component.ts
index bfccd689c..8b45d691c 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-sidenav/dxc-sidenav.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-sidenav/dxc-sidenav.component.ts
@@ -152,7 +152,7 @@ export class DxcSidenavComponent implements OnInit {
background-color: var(--sidenav-backgroundColor);
position: sticky;
display: flex;
- .sidenavMenu {
+ background-provider-inner {
display: flex;
flex-direction: column;
${this.utils.getPaddings(inputs.padding)}
@@ -161,11 +161,6 @@ export class DxcSidenavComponent implements OnInit {
")"};
overflow-y: auto;
overflow-x: hidden;
- font-family: var(--sidenav-customContentFontFamily);
- font-size: var(--sidenav-customContentFontSize);
- font-style: var(--sidenav-customContentFontStyle);
- font-weight: var(--sidenav-customContentFontWeight);
- color: var(--sidenav-customContentFontColor);
&::-webkit-scrollbar {
width: 2px;
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.ts
index a17f9cf37..d27d23fa5 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.ts
@@ -222,12 +222,13 @@ export class DxcSliderComponent implements OnInit, OnChanges {
letter-spacing: var(--slider-fontLetterSpacing);
.mat-slider-has-ticks .mat-slider-wrapper::after {
- height: var(--slider-dotsSize);
+ height: var(--slider-tickSize);
border-left-width: 2px;
- top: var(--slider-dotsVerticalPosition);
+ top: var(--slider-tickVerticalPosition);
}
&.disabled {
+ color: var(--slider-disabledFontColor) !important;
cursor: not-allowed;
input {
cursor: not-allowed;
@@ -240,8 +241,8 @@ export class DxcSliderComponent implements OnInit, OnChanges {
height: 100%;
}
.mat-slider-ticks-container {
- height: var(--slider-dotsSize);
- top: var(--slider-dotsVerticalPosition);
+ height: var(--slider-tickSize);
+ top: var(--slider-tickVerticalPosition);
}
.mat-slider-track-wrapper {
top: var(--slider-lineVerticalPosition);
@@ -261,13 +262,17 @@ export class DxcSliderComponent implements OnInit, OnChanges {
bottom: var(--slider-thumbVerticalPosition);
&:hover{
width: calc(var(--slider-thumbWidth) + 4px);
- height: calc(var(--slider-thumbWidth) + 4px);
+ height: calc(var(--slider-thumbHeight) + 4px);
bottom: calc(var(--slider-thumbVerticalPosition) - 2px);
+ background-color: var(--slider-hoverThumbBackgroundColor);
+ border-color: var(
+ --slider-hoverThumbBackgroundColor
+ ) !important;
}
}
&:not(.mat-slider-disabled) {
.mat-slider-ticks {
- height: var(--slider-dotsSize);
+ height: var(--slider-tickSize);
}
&.mat-slider-sliding {
.mat-slider-thumb {
@@ -298,10 +303,10 @@ export class DxcSliderComponent implements OnInit, OnChanges {
bottom: var(--slider-disabledThumbVerticalPosition);
}
.mat-slider-ticks {
- height: var(--slider-dotsSize);
+ height: var(--slider-tickSize);
}
.mat-slider-ticks-container {
- top: var(--slider-disabledDotsVerticalPosition);
+ top: var(--slider-disabledTickVerticalPosition);
}
}
&.cdk-focused, &.mat-slider-sliding {
@@ -337,7 +342,7 @@ export class DxcSliderComponent implements OnInit, OnChanges {
return css`
color: var(--slider-fontColorOnDark);
.mat-slider-has-ticks .mat-slider-wrapper::after {
- border-color: var(--slider-tickMarkBackgroundColorOnDark);
+ border-color: var(--slider-tickBackgroundColorOnDark);
}
mat-slider {
&:not(.mat-slider-disabled) {
@@ -351,13 +356,19 @@ export class DxcSliderComponent implements OnInit, OnChanges {
.mat-slider-thumb {
background-color: var(--slider-thumbBackgroundColorOnDark);
border-color: var(--slider-thumbBackgroundColorOnDark) !important;
+ &:hover{
+ background-color: var(--slider-hoverThumbBackgroundColorOnDark);
+ border-color: var(
+ --slider-hoverThumbBackgroundColorOnDark
+ ) !important;
+ }
}
.mat-slider-ticks {
background-image: repeating-linear-gradient(
to right,
- var(--slider-tickMarkBackgroundColorOnDark),
- var(--slider-tickMarkBackgroundColorOnDark) var(--slider-dotsSize)
- var(--slider-dotsSize),
+ var(--slider-tickBackgroundColorOnDark),
+ var(--slider-tickBackgroundColorOnDark) var(--slider-tickSize)
+ var(--slider-tickSize),
transparent 2px,
#e2141400
);
@@ -372,6 +383,10 @@ export class DxcSliderComponent implements OnInit, OnChanges {
}
&:focus:not(.mat-slider-sliding) {
.mat-slider-thumb {
+ background-color: var(--slider-focusThumbBackgroundColorOnDark);
+ border-color: var(
+ --slider-focusThumbBackgroundColorOnDark
+ ) !important;
outline-color: var(--slider-focusColorOnDark);
}
}
@@ -379,7 +394,7 @@ export class DxcSliderComponent implements OnInit, OnChanges {
}
&.disabled {
.mat-slider-horizontal .mat-slider-wrapper::after {
- border-color: var(--slider-disabledTickMarkBackgroundColorOnDark);
+ border-color: var(--slider-disabledTickBackgroundColorOnDark);
}
.mat-slider-thumb {
border-color: var(
@@ -399,9 +414,9 @@ export class DxcSliderComponent implements OnInit, OnChanges {
.mat-slider-ticks {
background-image: repeating-linear-gradient(
to right,
- var(--slider-disabledTickMarkBackgroundColorOnDark),
- var(--slider-disabledTickMarkBackgroundColorOnDark)
- var(--slider-dotsSize) var(--slider-dotsSize),
+ var(--slider-disabledTickBackgroundColorOnDark),
+ var(--slider-disabledTickBackgroundColorOnDark)
+ var(--slider-tickSize) var(--slider-tickSize),
transparent 2px,
#e2141400
);
@@ -414,7 +429,7 @@ export class DxcSliderComponent implements OnInit, OnChanges {
return css`
color: var(--slider-fontColor);
.mat-slider-has-ticks .mat-slider-wrapper::after {
- border-color: var(--slider-tickMarkBackgroundColor);
+ border-color: var(--slider-tickBackgroundColor);
}
mat-slider {
&:not(.mat-slider-disabled) {
@@ -431,9 +446,9 @@ export class DxcSliderComponent implements OnInit, OnChanges {
.mat-slider-ticks {
background-image: repeating-linear-gradient(
to right,
- var(--slider-tickMarkBackgroundColor),
- var(--slider-tickMarkBackgroundColor) var(--slider-dotsSize)
- var(--slider-dotsSize),
+ var(--slider-tickBackgroundColor),
+ var(--slider-tickBackgroundColor) var(--slider-tickSize)
+ var(--slider-tickSize),
transparent 2px,
#e2141400
);
@@ -448,6 +463,10 @@ export class DxcSliderComponent implements OnInit, OnChanges {
}
&:focus:not(.mat-slider-sliding) {
.mat-slider-thumb {
+ background-color: var(--slider-focusThumbBackgroundColor);
+ border-color: var(
+ --slider-focusThumbBackgroundColor
+ ) !important;
outline-color: var(--slider-focusColor);
}
}
@@ -455,7 +474,7 @@ export class DxcSliderComponent implements OnInit, OnChanges {
}
&.disabled {
.mat-slider-horizontal .mat-slider-wrapper::after {
- border-color: var(--slider-disabledTickMarkBackgroundColor);
+ border-color: var(--slider-disabledTickBackgroundColor);
}
.mat-slider-thumb {
border-color: var(--slider-disabledThumbBackgroundColor) !important;
@@ -471,9 +490,9 @@ export class DxcSliderComponent implements OnInit, OnChanges {
.mat-slider-ticks {
background-image: repeating-linear-gradient(
to right,
- var(--slider-disabledTickMarkBackgroundColor),
- var(--slider-disabledTickMarkBackgroundColor)
- var(--slider-dotsSize) var(--slider-dotsSize),
+ var(--slider-disabledTickBackgroundColor),
+ var(--slider-disabledTickBackgroundColor)
+ var(--slider-tickSize) var(--slider-tickSize),
transparent 2px,
#e2141400
);
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/README.md
index 837881e5e..6846c36ec 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/README.md
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/README.md
@@ -108,6 +108,6 @@ The API properties are the following:
| selectedFontColor |
#6F2C91 |
- Applies to token selectedFontColor, selectedIconColor, selectedUnderlinedColor, focusColor, hoverBackgroundColor and pressedBackgroundColor. |
+ Applies to token selectedFontColor, selectedIconColor, selectedUnderlineColor, focusColor, hoverBackgroundColor and pressedBackgroundColor. |
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.scss b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.scss
index 86f87529e..a37095a27 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.scss
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.scss
@@ -2,7 +2,7 @@
.filled-tabs {
::ng-deep {
.mat-ink-bar {
- background-color: var(--tabs-selectedUnderlinedColor);
+ background-color: var(--tabs-selectedUnderlineColor);
}
}
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts
index 628aada92..948bcda7f 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts
@@ -231,6 +231,10 @@ export class DxcTagComponent implements OnInit {
padding: 0px 30px;
text-transform: var(--tag-fontTextTransform);
font-style: var(--tag-fontStyle);
+ font-family: var(--tag-fontFamily);
+ color: var(--tag-fontColor);
+ font-weight: var(--tag-fontWeight);
+ font-size: var(--tag-fontSize);
letter-spacing: 1px;
flex-grow: 1;
text-align: center;
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-input-text.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-input-text.component.ts
index 603f95477..7ef417e55 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-input-text.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-input-text.component.ts
@@ -362,7 +362,7 @@ export class DxcTextInputComponent
return css`
&:focus {
outline: -webkit-focus-ring-color auto 1px;
- outline-color: var(--inputText-fontColorBase);
+ outline-color: #005FCC;
}
cursor: pointer;
`;
@@ -376,7 +376,7 @@ export class DxcTextInputComponent
return css`
&:focus {
outline: -webkit-focus-ring-color auto 1px;
- outline-color: var(--inputText-fontColorBase);
+ outline-color: #005FCC;
}
cursor: pointer;
`;
@@ -390,7 +390,7 @@ export class DxcTextInputComponent
return css`
&:focus {
outline: -webkit-focus-ring-color auto 1px;
- outline-color: var(--inputText-fontColorBaseOnDark);
+ outline-color: #005FCC;
}
cursor: pointer;
`;
@@ -404,7 +404,7 @@ export class DxcTextInputComponent
return css`
&:focus {
outline: -webkit-focus-ring-color auto 1px;
- outline-color: var(--inputText-fontColorBaseOnDark);
+ outline-color: #005FCC;
}
cursor: pointer;
`;
@@ -422,7 +422,7 @@ export class DxcTextInputComponent
${this.getLightStyle()}
${this.getDarkStyle()}
display: inline-flex;
- font-family: var(--inputText-fontFamilyBase);
+ font-family: var(--inputText-fontFamily);
&.prefixIcon {
.mat-form-field .mat-form-field-label-wrapper .mat-form-field-label {
margin-left: 32px;
@@ -473,12 +473,15 @@ export class DxcTextInputComponent
height: calc(var(--inputText-underlineThickness) * 2) !important;
}
.mat-form-field {
- font-family: var(--inputText-fontFamilyBase);
+ font-family: var(--inputText-fontFamily);
line-height: unset;
width: 100%;
max-height: 74px;
input {
- font-size: var(--inputText-fontSizeBase);
+ color: var(--inputText-valueFontColor);
+ font-size: var(--inputText-valueFontSize);
+ font-style: var(--inputText-valueFontStyle);
+ font-weight: var(--inputText-valueFontWeight);
min-height: 22px;
text-overflow: ellipsis;
}
@@ -498,6 +501,9 @@ export class DxcTextInputComponent
}
mat-label {
font-size: var(--inputText-labelFontSize);
+ font-family: var(--inputText-fontFamily);
+ font-style: var(--inputText-labelFontStyle);
+ font-weight: var(--inputText-labelFontWeight);
}
}
.mat-form-field-label-wrapper {
@@ -519,12 +525,16 @@ export class DxcTextInputComponent
.mat-form-field-flex {
align-items: center;
.mat-form-field-infix {
+ color: var(--inputText-labelFontColor);
font-size: var(--inputText-labelFontSize);
+ font-family: var(--inputText-fontFamily);
+ font-style: var(--inputText-labelFontStyle);
+ font-weight: var(--inputText-labelFontWeight);
border-top: unset;
}
}
.mat-hint {
- font-family: var(--inputText-fontFamilyBase);
+ font-family: var(--inputText-fontFamily);
font-size: var(--inputText-assistiveTextFontSize);
font-style: var(--inputText-assistiveTextFontStyle);
font-weight: var(--inputText-assistiveTextFontWeight);
@@ -595,6 +605,9 @@ export class DxcTextInputComponent
getAutoCompleteStyle() {
return css`
padding: 0px 2px;
+ border-color: var(--inputText-optionBorderColor);
+ border-width: var(--inputText-optionBorderThickness);
+ border-style: var(--inputText-optionBorderStyle);
&::-webkit-scrollbar {
width: 3px;
}
@@ -608,27 +621,35 @@ export class DxcTextInputComponent
border-radius: 3px;
}
.mat-option {
- color: var(--inputText-fontColorBase);
+ background-color: var(--inputText-optionBackgroundColor);
+ padding-bottom: var(--inputText-optionPaddingBottom);
+ padding-top: var(--inputText-optionPaddingTop);
height: 36px;
.mat-option-text {
- font-family: var(--inputText-fontFamilyBase);
- font-size: var(--inputText-fontSizeBase);
+ color: var(--inputText-optionFontColor);
+ font-family: var(--inputText-fontFamily);
+ font-size: var(--inputText-optionFontSize);
+ font-style: var(--inputText-optionFontStyle);
+ font-weight: var(--inputText-optionFontWeight);
}
}
.mat-option.mat-selected:not(:hover):not(.mat-option-disabled) {
- color: var(--inputText-fontColorBase);
+ color: var(--inputText-optionFontColor);
}
.mat-option:hover:not(.mat-option-disabled) {
- background-color: var(--inputText-optionHoverBackgroundColor);
- color: var(--inputText-hoverOptionColor);
+ background-color: var(--inputText-hoverOptionBackgroundColor);
+ .mat-option-text{
+ color: var(--inputText-hoverOptionColor);
+ }
}
.mat-option:focus:not(.mat-option-disabled) {
outline: -webkit-focus-ring-color auto 2px;
- outline-color: var(--inputText-optionFocusColor);
+ outline-color: #005FCC;
outline-style: solid !important;
+ outline-offset: -1px;
}
.mat-option:active:not(.mat-option-disabled) {
- background-color: var(--inputText-optionActiveBackgroundColor);
+ background-color: var(--inputText-selectedOptionBackgroundColor);
}
.errorOption {
.mat-option-text {
@@ -648,33 +669,33 @@ export class DxcTextInputComponent
dxc-input-prefix-icon,
dxc-input-suffix-icon {
.containerIcon {
- fill: var(--inputText-disabledFontColor);
+ fill: var(--inputText-disabledColor);
}
}
.prefixElement,
.suffixElement {
- fill: var(--inputText-disabledFontColor);
- color: var(--inputText-disabledFontColor);
+ fill: var(--inputText-disabledColor);
+ color: var(--inputText-disabledColor);
}
.mat-hint {
- color: var(--inputText-disabledFontColor);
+ color: var(--inputText-disabledColor);
}
.mat-form-field-underline {
- background-color: var(--inputText-disabledFontColor) !important;
+ background-color: var(--inputText-disabledColor) !important;
}
.mat-form-field-empty mat-label {
- color: var(--inputText-disabledFontColor);
+ color: var(--inputText-disabledColor);
}
&.mat-focused .mat-form-field-empty mat-label {
- color: var(--inputText-disabledFontColor);
+ color: var(--inputText-disabledColor);
}
.mat-form-field-label:not(.mat-form-field-empty) mat-label {
- color: var(--inputText-disabledFontColor);
+ color: var(--inputText-disabledColor);
}
.mat-form-field-wrapper {
.mat-form-field-flex {
.mat-form-field-infix input {
- color: var(--inputText-disabledFontColor);
+ color: var(--inputText-disabledColor);
}
}
}
@@ -683,12 +704,12 @@ export class DxcTextInputComponent
.containerIcon {
&:focus {
outline: -webkit-focus-ring-color auto 1px;
- outline-color: var(--inputText-fontColorBase);
+ outline-color: #005FCC;
}
}
}
.mat-form-field.mat-focused .mat-form-field-label {
- color: var(--inputText-fontColorBase) !important;
+ color: var(--inputText-labelFontColor) !important;
}
.mat-form-field.mat-focused .mat-form-field-ripple {
background-color: ${this.invalid
@@ -697,8 +718,8 @@ export class DxcTextInputComponent
}
.mat-form-field {
input {
- caret-color: var(--inputText-fontColorBase);
- color: var(--inputText-fontColorBase);
+ caret-color: var(--inputText-valueFontColor);
+ color: var(--inputText-valueFontColor);
}
}
dxc-input-suffix-icon {
@@ -714,10 +735,10 @@ export class DxcTextInputComponent
color: var(--inputText-suffixLabelFontColor);
}
label.mat-form-field-label {
- color: var(--inputText-fontColorBase);
+ color: var(--inputText-labelFontColor);
}
input::placeholder {
- color: var(--inputText-fontColorBase);
+ color: var(--inputText-labelFontColor);
}
.mat-form-field {
.mat-form-field-label-wrapper {
@@ -766,35 +787,35 @@ export class DxcTextInputComponent
dxc-input-prefix-icon,
dxc-input-suffix-icon {
.containerIcon {
- fill: var(--inputText-disabledFontColorOnDark);
+ fill: var(--inputText-disabledColorOnDark);
}
}
.prefixElement,
.suffixElement {
- fill: var(--inputText-disabledFontColorOnDark);
- color: var(--inputText-disabledFontColorOnDark);
+ fill: var(--inputText-disabledColorOnDark);
+ color: var(--inputText-disabledColorOnDark);
}
.mat-hint {
- color: var(--inputText-disabledFontColorOnDark);
+ color: var(--inputText-disabledColorOnDark);
}
.mat-form-field-underline {
background-color: var(
- --inputText-disabledFontColorOnDark
+ --inputText-disabledColorOnDark
) !important;
}
.mat-form-field-empty mat-label {
- color: var(--inputText-disabledFontColorOnDark);
+ color: var(--inputText-disabledColorOnDark);
}
&.mat-focused .mat-form-field-empty mat-label {
- color: var(--inputText-disabledFontColorOnDark);
+ color: var(--inputText-disabledColorOnDark);
}
.mat-form-field-label:not(.mat-form-field-empty) mat-label {
- color: var(--inputText-disabledFontColorOnDark);
+ color: var(--inputText-disabledColorOnDark);
}
.mat-form-field-wrapper {
.mat-form-field-flex {
.mat-form-field-infix input {
- color: var(--inputText-disabledFontColorOnDark);
+ color: var(--inputText-disabledColorOnDark);
}
}
}
@@ -803,12 +824,12 @@ export class DxcTextInputComponent
.containerIcon {
&:focus {
outline: -webkit-focus-ring-color auto 1px;
- outline-color: var(--inputText-fontColorBaseOnDark);
+ outline-color: #005FCC;
}
}
}
.mat-form-field.mat-focused .mat-form-field-label {
- color: var(--inputText-fontColorBaseOnDark) !important;
+ color: var(--inputText-labelFontColorOnDark) !important;
}
.mat-form-field.mat-focused .mat-form-field-ripple {
background-color: ${this.invalid
@@ -817,10 +838,13 @@ export class DxcTextInputComponent
}
.mat-form-field {
input {
- caret-color: var(--inputText-fontColorBaseOnDark);
- color: var(--inputText-fontColorBaseOnDark);
+ caret-color: var(--inputText-valueFontColorOnDark);
+ color: var(--inputText-valueFontColorOnDark);
}
}
+ label.mat-form-field-label {
+ color: var(--inputText-labelFontColorOnDark);
+ }
dxc-input-suffix-icon {
color: var(--inputText-suffixIconColorOnDark);
fill: var(--inputText-suffixIconColorOnDark);
@@ -836,10 +860,10 @@ export class DxcTextInputComponent
color: var(--inputText-suffixLabelFontColorOnDark);
}
label.mat-form-field-label {
- color: var(--inputText-fontColorBaseOnDark);
+ color: var(--inputText-labelFontColorOnDark);
}
input::placeholder {
- color: var(--inputText-fontColorBaseOnDark);
+ color: var(--inputText-labelFontColorOnDark);
}
.mat-form-field {
.mat-form-field-label-wrapper {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts
index ad2c48c66..be3c1cfb5 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts
@@ -218,12 +218,12 @@ export class DxcTextareaComponent
textarea {
min-height: 22px;
text-overflow: ellipsis;
- font-family: var(--textarea-customContentFontFamily);
- font-size: var(--textarea-customContentFontSize);
- font-style: var(--textarea-customContentFontStyle);
- font-weight: var(--textarea-customContentFontWeight);
- letter-spacing: var(--textarea-customContentLetterSpacing);
- line-height: var(--textarea-customContentLineHeight);
+ font-weight: var(--textarea-valueFontWeight);
+ font-style: var(--textarea-valueFontStyle);
+ font-size: var(--textarea-valueFontSize);
+ line-height: var(--textarea-valueLineHeight);
+ letter-spacing: var(--textarea-valueLetterSpacing);
+ font-family: var(--textarea-fontFamily);
}
textarea::-webkit-scrollbar {
width: 3px;
@@ -248,7 +248,7 @@ export class DxcTextareaComponent
}
}
.mat-hint {
- font-family: var(--textarea-assistiveTextFontFamily);
+ font-family: var(--textarea-fontFamily);
font-size: var(--textarea-assistiveTextFontSize);
font-style: var(--textarea-assistiveTextFontStyle);
font-weight: var(--textarea-assistiveTextFontWeight);
@@ -256,7 +256,7 @@ export class DxcTextareaComponent
}
.mat-form-field.mat-form-field-should-float mat-label,
.mat-form-field-label {
- font-family: var(--textarea-labelFontFamily);
+ font-family: var(--textarea-fontFamily);
font-size: var(--textarea-labelFontSize);
font-style: var(--textarea-labelFontStyle);
font-weight: var(--textarea-labelFontWeight);
@@ -297,8 +297,8 @@ export class DxcTextareaComponent
&.light {
.mat-form-field {
textarea {
- color: var(--textarea-customContentFontColor);
- caret-color: var(--textarea-customContentFontColor);
+ color: var(--textarea-valueFontColor);
+ caret-color: var(--textarea-valueFontColor);
}
textarea::-webkit-scrollbar-track {
background-color: var(--textarea-scrollBarTrackColor);
@@ -313,15 +313,15 @@ export class DxcTextareaComponent
.mat-form-field-empty mat-label,
.mat-form-field-label:not(.mat-form-field-empty) mat-label,
&.mat-focused .mat-form-field-empty mat-label {
- color: var(--textarea-disabledFontColor);
+ color: var(--textarea-disabledColor);
}
.mat-form-field-underline {
- background-color: var(--textarea-disabledFontColor);
+ background-color: var(--textarea-disabledColor);
}
.mat-form-field-wrapper {
.mat-form-field-flex {
.mat-form-field-infix input {
- color: var(--textarea-disabledFontColor);
+ color: var(--textarea-disabledColor);
}
}
}
@@ -334,13 +334,14 @@ export class DxcTextareaComponent
color: var(--textarea-labelFontColor);
}
.mat-form-field.mat-focused .mat-form-field-ripple {
- background-color: var(--textarea-labelFontColor);
+ background-color: var(--textarea-underlineFocusColor);
}
.mat-form-field-underline {
- background-color: var(--textarea-labelFontColor);
+ background-color: var(--textarea-underlineColor);
+ height: var(--textarea-underlineThickness);
}
input::placeholder {
- color: var(--textarea-customContentFontColor);
+ color: var(--textarea-valueFontColor);
}
&.required {
.mat-form-field-required-marker {
@@ -379,8 +380,8 @@ export class DxcTextareaComponent
&.dark {
.mat-form-field {
textarea {
- color: var(--textarea-customContentFontColorOnDark);
- caret-color: var(--textarea-customContentFontColorOnDark);
+ color: var(--textarea-valueFontColorOnDark);
+ caret-color: var(--textarea-valueFontColorOnDark);
}
textarea::-webkit-scrollbar-track {
background-color: var(--textarea-scrollBarTrackColorOnDark);
@@ -395,15 +396,15 @@ export class DxcTextareaComponent
.mat-form-field-empty mat-label,
.mat-form-field-label:not(.mat-form-field-empty) mat-label,
&.mat-focused .mat-form-field-empty mat-label {
- color: var(--textarea-disabledFontColorOnDark);
+ color: var(--textarea-disabledColorOnDark);
}
.mat-form-field-underline {
- background-color: var(--textarea-disabledFontColorOnDark);
+ background-color: var(--textarea-disabledColorOnDark);
}
.mat-form-field-wrapper {
.mat-form-field-flex {
.mat-form-field-infix input {
- color: var(--textarea-disabledFontColorOnDark);
+ color: var(--textarea-disabledColorOnDark);
}
}
}
@@ -416,13 +417,13 @@ export class DxcTextareaComponent
color: var(--textarea-labelFontColorOnDark);
}
.mat-form-field.mat-focused .mat-form-field-ripple {
- background-color: var(--textarea-labelFontColorOnDark);
+ background-color: var(--textarea-underlineFocusColorOnDark);
}
.mat-form-field-underline {
- background-color: var(--textarea-labelFontColorOnDark);
+ background-color: var(--textarea-underlineColorOnDark);
}
input::placeholder {
- color: var(--textarea-customContentFontColorOnDark);
+ color: var(--textarea-valueFontColorOnDark);
}
&.required {
.mat-form-field-required-marker {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-toggleGroup/dxc-toggleGroup.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-toggleGroup/dxc-toggleGroup.component.ts
index b60389cbe..ee43a989d 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-toggleGroup/dxc-toggleGroup.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-toggleGroup/dxc-toggleGroup.component.ts
@@ -271,10 +271,12 @@ export class DxcToggleGroupComponent implements OnInit {
.label {
padding-left: var(--toggleGroup-labelPaddingLeft);
padding-right: var(--toggleGroup-labelPaddingRight);
+ padding-top: var(--toggleGroup-labelPaddingTop);
+ padding-bottom: var(--toggleGroup-labelPaddingBottom);
letter-spacing: var(--toggleGroup-fontLetterSpacing);
font-family: var(--toggleGroup-fontFamily);
font-size: var(--toggleGroup-fontSize);
- font-style: var(--toggle-fontStyle);
+ font-style: var(--toggleGroup-fontStyle);
font-weight: var(--toggleGroup-fontWeight);
}
.icon {
@@ -285,6 +287,8 @@ export class DxcToggleGroupComponent implements OnInit {
height: var(--toggleGroup-iconSize);
padding-left: var(--toggleGroup-iconPaddingLeft);
padding-right: var(--toggleGroup-iconPaddingRight);
+ padding-top: var(--toggleGroup-iconPaddingTop);
+ padding-bottom: var(--toggleGroup-iconPaddingBottom);
fill: var(--toggleGroup-unselectedFontColor);
}
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-drag-and-drop/dxc-drag-and-drop.component.scss b/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-drag-and-drop/dxc-drag-and-drop.component.scss
index 58a2506d4..82773c35a 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-drag-and-drop/dxc-drag-and-drop.component.scss
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-drag-and-drop/dxc-drag-and-drop.component.scss
@@ -11,8 +11,8 @@
border-radius: 4px;
position: relative;
svg{
- width: var(--upload-dragAndDropIconWidth);
- height: var(--upload-dragAndDropIconHeight);
+ width: var(--upload-dragAndDropIconSize);
+ height: var(--upload-dragAndDropIconSize);
fill: var(--upload-dragAndDropIconColor);
}
.dropZoneContent{
@@ -93,7 +93,7 @@
var(--border-weight) var(--dash-size),
var(--border-weight) calc(var(--dash-size) + var(--gap-size)),
var(--border-weight) var(--dash-size);
- background-color: var(--upload-draggingAreaBackgroundColor);
+ background-color: var(--upload-draggingStateBackgroundColor);
}
.droppingZone {
background-color: #f2f2f2;
@@ -164,14 +164,14 @@
font-size: var(--upload-dragAndDropDraggingStateFontSize);
font-style: var(--upload-dragAndDropDraggingStateFontStyle);
font-weight: var(--upload-dragAndDropDraggingStateFontWeight);
- text-transform: var(--upload-dragAndDropTextDraggingStateFontTextTransform);
- color: var(--upload-dragAndDropTextDraggingStateFontColor);
+ text-transform: var(--upload-dragAndDropDraggingStateFontTextTransform);
+ color: var(--upload-dragAndDropDraggingStateFontColor);
}
svg{
margin-bottom: 15px;
fill: var(--upload-dragAndDropDraggingStateIconColor);
- height: var(--upload-dragAndDropDraggingStateIconHeight);
- width: var(--upload-dragAndDropDraggingStateIconWidth);
+ height: var(--upload-dragAndDropDraggingStateIconSize);
+ width: var(--upload-dragAndDropDraggingStateIconSize);
}
}
h6 {
@@ -189,8 +189,8 @@
font-size: var(--upload-dragAndDropDescriptionFontSize);
font-style: var(--upload-dragAndDropDescriptionFontStyle);
font-weight: var(--upload-dragAndDropDescriptionFontWeight);
- text-transform: var(--upload-dragAndDropTextDescriptionFontTextTransform);
- color: var(--upload-dragAndDropTextDescriptionFontColor);
+ text-transform: var(--upload-dragAndDropDescriptionFontTextTransform);
+ color: var(--upload-dragAndDropDescriptionFontColor);
}
h6, .dropLabel{
font-family: var(--upload-fontFamily) !important;
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-files-to-upload/dxc-files-preview/dxc-file-preview/dxc-file-preview.component.scss b/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-files-to-upload/dxc-files-preview/dxc-file-preview/dxc-file-preview.component.scss
index 0c39a4953..91479c63e 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-files-to-upload/dxc-files-preview/dxc-file-preview/dxc-file-preview.component.scss
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-files-to-upload/dxc-files-preview/dxc-file-preview/dxc-file-preview.component.scss
@@ -10,12 +10,12 @@
cursor: pointer;
fill: var(--upload-fileDeleteIconColor);
svg{
- width: var(--upload-fileDeleteIconWidth);
- height: var(--upload-fileDeleteIconHeight);
+ width: var(--upload-fileDeleteIconSize);
+ height: var(--upload-fileDeleteIconSize);
}
}
&:hover {
- background-color: var(--upload-fileHoverColor);
+ background-color: var(--upload-hoverFileColor);
}
.info {
display: flex;
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-files-to-upload/dxc-upload-buttons/dxc-upload-buttons.component.scss b/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-files-to-upload/dxc-upload-buttons/dxc-upload-buttons.component.scss
index 2c3ac6df5..64c97f557 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-files-to-upload/dxc-upload-buttons/dxc-upload-buttons.component.scss
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-files-to-upload/dxc-upload-buttons/dxc-upload-buttons.component.scss
@@ -15,8 +15,8 @@
}
svg{
fill: var(--upload-dragAndDropAreaIconColor);
- height: var(--upload-dragAndDropAreaIconHeight);
- width: var(--upload-dragAndDropAreaIconWidth);
+ height: var(--upload-dragAndDropAreaIconSize);
+ width: var(--upload-dragAndDropAreaIconSize);
}
}
.buttonsContainer .uploadBtn{
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-transactions/dxc-transaction/dxc-transaction.component.scss b/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-transactions/dxc-transaction/dxc-transaction.component.scss
index 8a62382e6..b727414bd 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-transactions/dxc-transaction/dxc-transaction.component.scss
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-transactions/dxc-transaction/dxc-transaction.component.scss
@@ -15,10 +15,10 @@
}
.previewIcon {
margin-right: 8px;
- fill: var(--upload-fileUploadedIconColor);
+ fill: var(--upload-uploadedFileIconColor);
svg{
- width: var(--upload-fileUploadedIconWidth);
- height: var(--upload-fileUploadedIconHeight);
+ width: var(--upload-uploadedFileIconSize);
+ height: var(--upload-uploadedFileIconSize);
}
}
.errorIcon {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-transactions/dxc-transactions.component.scss b/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-transactions/dxc-transactions.component.scss
index d60a74e3b..63298d788 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-transactions/dxc-transactions.component.scss
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-transactions/dxc-transactions.component.scss
@@ -25,23 +25,23 @@
.uploadedLabel {
font-family: var(--upload-fontFamily);
letter-spacing: 0.26px;
- color: var(--upload-filesUploadedTitleFontColor);
+ color: var(--upload-uploadedFilesTitleFontColor);
margin-bottom: 4px;
- font-size: var(--upload-filesUploadedTitleFontSize);
- font-style: var(--upload-filesUploadedTitleFontStyle);
- font-weight: var(--upload-filesUploadedTitleFontWeight);
- text-transform: var(--upload-filesUploadedTitleFontTextTransform);
+ font-size: var(--upload-uploadedFilesTitleFontSize);
+ font-style: var(--upload-uploadedFilesTitleFontStyle);
+ font-weight: var(--upload-uploadedFilesTitleFontWeight);
+ text-transform: var(--upload-uploadedFilesTitleFontTextTransform);
}
.successCount {
span {
- font-weight: var(--upload-filesUploadedNumberFontWeight);
+ font-weight: var(--upload-uploadedFilesNumberFontWeight);
}
font-family: var(--upload-fontFamily);
- color: var(--upload-filesUploadedSubtitleFontColor);
- font-size: var(--upload-filesUploadedSubtitleFontSize);
- font-style: var(--upload-filesUploadedSubtitleFontStyle);
- font-weight: var(--upload-filesUploadedSubtitleFontWeight);
- text-transform: var(--upload-filesUploadedSubtitleFontTextTransform);
+ color: var(--upload-uploadedFilesSubtitleFontColor);
+ font-size: var(--upload-uploadedFilesSubtitleFontSize);
+ font-style: var(--upload-uploadedFilesSubtitleFontStyle);
+ font-weight: var(--upload-uploadedFilesSubtitleFontWeight);
+ text-transform: var(--upload-uploadedFilesSubtitleFontTextTransform);
}
}
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-wizard/dxc-wizard-step/dxc-wizard-step.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-wizard/dxc-wizard-step/dxc-wizard-step.component.ts
index 011d9b12f..d14d102c5 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-wizard/dxc-wizard-step/dxc-wizard-step.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-wizard/dxc-wizard-step/dxc-wizard-step.component.ts
@@ -194,12 +194,12 @@ export class DxcWizardStepComponent {
background: var(--wizard-stepContainerBackgroundColor);
}
.current .iconContainer {
- width: var(--wizard-circleSelectedWidth);
- height: var(--wizard-circleSelectedHeight);
- border: var(--wizard-circleSelectedBorderThickness)
- var(--wizard-circleSelectedBorderStyle)
- var(--wizard-circleSelectedBorderColor);
- border-radius: var(--wizard-circleSelectedBorderRadius);
+ width: var(--wizard-selectedCircleWidth);
+ height: var(--wizard-selectedCircleHeight);
+ border: var(--wizard-selectedCircleBorderThickness)
+ var(--wizard-selectedCircleBorderStyle)
+ var(--wizard-selectedCircleBorderColor);
+ border-radius: var(--wizard-selectedCircleBorderRadius);
background: var(--wizard-stepContainerSelectedBackgroundColor);
.number {
color: var(--wizard-stepContainerSelectedFontColor) !important;
@@ -218,12 +218,12 @@ export class DxcWizardStepComponent {
.iconContainer {
background: var(--wizard-disabledBackgroundColor);
color: var(--wizard-disabledFontColor);
- width: var(--wizard-circleDisabledWidth);
- height: var(--wizard-circleDisabledHeight);
- border: var(--wizard-circleDisabledBorderThickness)
- var(--wizard-circleDisabledBorderStyle)
- var(--wizard-circleDisabledBorderColor);
- border-radius: var(--wizard-circleDisabledBorderRadius);
+ width: var(--wizard-disabledCircleWidth);
+ height: var(--wizard-disabledCircleHeight);
+ border: var(--wizard-disabledCircleBorderThickness)
+ var(--wizard-disabledCircleBorderStyle)
+ var(--wizard-disabledCircleBorderColor);
+ border-radius: var(--wizard-disabledCircleBorderRadius);
}
.number {
color: var(--wizard-disabledFontColor);
@@ -256,7 +256,7 @@ export class DxcWizardStepComponent {
color: var(--wizard-labelFontColor);
}
.visited .infoContainer .label {
- color: var(--wizard-labelActiveFontColor);
+ color: var(--wizard-visitedLabelFontColor);
}
.label {
text-align: var(--wizard-labelTextAlign);
@@ -272,7 +272,7 @@ export class DxcWizardStepComponent {
color: var(--wizard-descriptionFontColor);
}
.visited .infoContainer .description {
- color: var(--wizard-descriptionActiveFontColor);
+ color: var(--wizard-visitedDescriptionFontColor);
}
.description {
text-align: var(--wizard-descriptionTextAlign);
diff --git a/projects/dxc-ngx-cdk/src/lib/theme/complexThemeBindingStrategy.ts b/projects/dxc-ngx-cdk/src/lib/theme/complexThemeBindingStrategy.ts
index 541160e46..cc08b2b60 100644
--- a/projects/dxc-ngx-cdk/src/lib/theme/complexThemeBindingStrategy.ts
+++ b/projects/dxc-ngx-cdk/src/lib/theme/complexThemeBindingStrategy.ts
@@ -5,7 +5,7 @@ import rgbHex from "rgb-hex";
export class ComplexThemeBindingStrategy implements MappingStrategy {
constructor() {}
- setLightness(hexColor: String, newLightness: number) {
+ addLightness(hexColor: String, newLightness: number) {
if (hexColor) {
const color = Color(hexColor);
const hslColor = color.hsl();
@@ -15,13 +15,25 @@ export class ComplexThemeBindingStrategy implements MappingStrategy {
return null;
}
+ subLightness(hexColor, newLightness) {
+ try {
+ if (hexColor) {
+ const color = Color(hexColor);
+ const hslColor = color.hsl();
+ const lightnessColor = hslColor.color[2];
+ return hslColor.lightness(lightnessColor - newLightness).hex();
+ }
+ } catch (e) {
+ return null;
+ }
+ }
+
setOpacity(hexColor: String, newOpacity: number) {
if (hexColor) {
const color = Color(hexColor);
console.log();
return (
- "#" +
- rgbHex(color.color[0], color.color[1], color.color[2], newOpacity)
+ "#" + rgbHex(color.color[0], color.color[1], color.color[2], newOpacity)
);
}
return null;
@@ -34,86 +46,75 @@ export class ComplexThemeBindingStrategy implements MappingStrategy {
proccessedTokens["--accordion-arrowColor"] =
theme?.accordion?.accentColor ?? tokens["--accordion-arrowColor"];
proccessedTokens["--accordion-hoverBackgroundColor"] =
- this.setLightness(theme?.accordion?.accentColor, 53) ??
+ this.setOpacity(theme?.accordion?.accentColor, 0.16) ??
tokens["--accordion-hoverBackgroundColor"];
- proccessedTokens["--accordion-fontColor"] =
- theme?.accordion?.textColor ?? tokens["--accordion-fontColor"];
- proccessedTokens["--accordion-focusOutline"] =
- theme?.accordion?.accentColor ?? tokens["--accordion-arrowColor"];
- proccessedTokens["--accordion-disabledFontColor"] =
- this.setLightness(theme?.accordion?.textColor, 35) ??
- tokens["--accordion-disabledFontColor"];
-
- //TABS
- proccessedTokens["--tabs-selectedFontColor"] =
- theme?.tabs?.baseColor ?? tokens["--tabs-selectedFontColor"];
- proccessedTokens["--tabs-selectedIconColor"] =
- theme?.tabs?.baseColor ?? tokens["--tabs-selectedFontColor"];
- proccessedTokens["--tabs-selectedUnderlinedColor"] =
- theme?.tabs?.baseColor ?? tokens["--tabs-selectedFontColor"];
- proccessedTokens["--tabs-focusOutline"] =
- theme?.tabs?.baseColor ?? tokens["--tabs-selectedFontColor"];
- proccessedTokens["--tabs-hoverBackgroundColor"] =
- this.setLightness(theme?.tabs?.baseColor, 58) ??
- tokens["--tabs-hoverBackgroundColor"];
- proccessedTokens["--tabs-pressedBackgroundColor"] =
- this.setLightness(theme?.tabs?.baseColor, 53) ??
- tokens["--tabs-pressedBackgroundColor"];
-
- //------------Sin Hacer---------------------
+ proccessedTokens["--accordion-assistiveTextFontColor"] =
+ theme?.accordion?.fontColor ??
+ tokens["--accordion-assistiveTextFontColor"];
+ proccessedTokens["--accordion-titleLabelFontColor"] =
+ theme?.accordion?.fontColor ?? tokens["--accordion-titleLabelFontColor"];
+ proccessedTokens["--accordion-iconColor"] =
+ theme?.accordion?.accentColor ?? tokens["--accordion-iconColor"];
+ proccessedTokens["--accordion-focusBorderColor"] =
+ theme?.accordion?.accentColor ?? tokens["--accordion-focusBorderColor"];
+ proccessedTokens["--accordion-disabledAssistiveTextFontColor"] =
+ this.setOpacity(theme?.accordion?.fontColor, 0.34) ??
+ tokens["--accordion-disabledAssistiveTextFontColor"];
+ proccessedTokens["--accordion-disabledTitleLabelFontColor"] =
+ this.setOpacity(theme?.accordion?.fontColor, 0.34) ??
+ tokens["--accordion-disabledTitleLabelFontColor"];
+ proccessedTokens["--accordion-disabledArrowColor"] =
+ this.setOpacity(theme?.accordion?.accentColor, 0.34) ??
+ tokens["--accordion-disabledArrowColor"];
+ proccessedTokens["--accordion-disabledIconColor"] =
+ this.setOpacity(theme?.accordion?.accentColor, 0.34) ??
+ tokens["--accordion-disabledIconColor"];
//BUTTON
proccessedTokens["--button-primaryBackgroundColor"] =
theme?.button?.baseColor ?? tokens["--button-primaryBackgroundColor"];
- proccessedTokens["--button-primaryHoverBackgroundColor"] =
- theme?.button?.hoverBaseColor ??
- tokens["--button-primaryHoverBackgroundColor"];
- proccessedTokens["--button-primaryFontColor"] =
- theme?.button?.primaryTextColor ?? tokens["--button-primaryFontColor"];
- proccessedTokens["--button-primaryHoverFontColor"] =
- theme?.button?.primaryHoverTextColor ??
- tokens["--button-primaryHoverFontColor"];
- proccessedTokens["--button-primaryDisabledFontColor"] =
- this.setOpacity(theme?.button?.primaryTextColor, 0.34) ??
- tokens["--button-primaryDisabledFontColor"];
- proccessedTokens["--button-primaryDisabledBackgroundColor"] =
- this.setOpacity(theme?.button?.baseColor, 0.34) ??
- tokens["--button-primaryDisabledBackgroundColor"];
- proccessedTokens["--button-secondaryOutlinedColor"] =
- theme?.button?.baseColor ?? tokens["--button-secondaryOutlinedColor"];
proccessedTokens["--button-secondaryFontColor"] =
- theme?.button?.secondaryTextColor ??
- tokens["--button-secondaryFontColor"];
+ theme?.button?.baseColor ?? tokens["--button-secondaryFontColor"];
+ proccessedTokens["--button-secondaryHoverBackgroundColor"] =
+ theme?.button?.baseColor ??
+ tokens["--button-secondaryHoverBackgroundColor"];
+ proccessedTokens["--button-textFontColor"] =
+ theme?.button?.baseColor ?? tokens["--button-textFontColor"];
+ proccessedTokens["--button-primaryFontColor"] =
+ theme?.button?.primaryFontColor ?? tokens["--button-primaryFontColor"];
+ proccessedTokens["--button-secondaryBorderColor"] =
+ theme?.button?.baseColor ?? tokens["--button-secondaryBorderColor"];
proccessedTokens["--button-secondaryHoverFontColor"] =
- theme?.button?.secondaryHoverTextColor ??
+ theme?.button?.secondaryHoverFontColor ??
tokens["--button-secondaryHoverFontColor"];
- proccessedTokens["--button-secondaryDisabledOutlinedColor"] =
- this.setOpacity(theme?.button?.baseColor, 0.34) ??
- tokens["--button-secondaryDisabledOutlinedColor"];
- proccessedTokens["--button-secondaryDisabledFontColor"] =
- this.setOpacity(theme?.button?.secondaryTextColor, 0.34) ??
- tokens["--button-secondaryDisabledFontColor"];
+ proccessedTokens["--button-primaryHoverBackgroundColor"] =
+ this.subLightness(theme?.button?.baseColor, 8) ??
+ tokens["--button-primaryHoverBackgroundColor"];
+ proccessedTokens["--button-primaryActiveBackgroundColor"] =
+ this.subLightness(theme?.button?.baseColor, 18) ??
+ tokens["--button-primaryActiveBackgroundColor"];
+ proccessedTokens["--button-secondaryActiveBackgroundColor"] =
+ this.subLightness(theme?.button?.baseColor, 18) ??
+ tokens["--button-secondaryActiveBackgroundColor"];
proccessedTokens["--button-textHoverBackgroundColor"] =
- theme?.button?.hoverBaseColor ?? tokens["--button-textHoverBackgroundColor"];
- proccessedTokens["--button-textFontColor"] =
- theme?.button?.textFontColor ?? tokens["--button-textFontColor"];
- proccessedTokens["--button-textHoverFontColor"] =
- theme?.button?.hoverTextColor ??
- tokens["--button-textHoverFontColor"];
- proccessedTokens["--button-textDisabledFontColor"] =
- this.setOpacity(theme?.button?.textFontColor, 0.34) ??
- tokens["--button-textDisabledFontColor"];
+ this.addLightness(theme?.button?.baseColor, 57) ??
+ tokens["--button-textHoverBackgroundColor"];
+ proccessedTokens["--button-textActiveBackgroundColor"] =
+ this.addLightness(theme?.button?.baseColor, 52) ??
+ tokens["--button-textActiveBackgroundColor"];
//CHECKBOX
proccessedTokens["--checkbox-borderColor"] =
theme?.checkbox?.baseColor ?? tokens["--checkbox-borderColor"];
proccessedTokens["--checkbox-checkColor"] =
theme?.checkbox?.checkColor ?? tokens["--checkbox-checkColor"];
- proccessedTokens["--checkbox-selectedBackgroundColor"] =
- theme?.checkbox?.baseColor ?? tokens["--checkbox-selectedBackgroundColor"];
- proccessedTokens["--checkbox-selectedDisabledBackgroundColor"] =
+ proccessedTokens["--checkbox-backgroundColorChecked"] =
+ theme?.checkbox?.baseColor ?? tokens["--checkbox-backgroundColorChecked"];
+ proccessedTokens["--checkbox-backgroundColorChecked"] =
+ theme?.checkbox?.baseColor ?? tokens["--checkbox-backgroundColorChecked"];
+ proccessedTokens["--checkbox-disabledBackgroundColorChecked"] =
this.setOpacity(theme?.checkbox?.baseColor, 0.34) ??
- tokens["--checkbox-selectedDisabledBackgroundColor"];
+ tokens["--checkbox-disabledBackgroundColorChecked"];
proccessedTokens["--checkbox-disabledBorderColor"] =
this.setOpacity(theme?.checkbox?.baseColor, 0.34) ??
tokens["--checkbox-disabledBorderColor"];
@@ -124,15 +125,13 @@ export class ComplexThemeBindingStrategy implements MappingStrategy {
//CHIP
proccessedTokens["--chip-backgroundColor"] =
theme?.chip?.baseColor ?? tokens["--chip-backgroundColor"];
- proccessedTokens["--chip-outlinedColor"] =
- theme?.chip?.accentColor ?? tokens["--chip-outlinedColor"];
proccessedTokens["--chip-fontColor"] =
- theme?.chip?.textColor ?? tokens["--chip-fontColor"];
+ theme?.chip?.fontColor ?? tokens["--chip-fontColor"];
proccessedTokens["--chip-disabledBackgroundColor"] =
this.setOpacity(theme?.chip?.baseColor, 0.34) ??
tokens["--chip-disabledBackgroundColor"];
proccessedTokens["--chip-disabledFontColor"] =
- this.setOpacity(theme?.chip?.textColor, 0.34) ??
+ this.setOpacity(theme?.chip?.fontColor, 0.34) ??
tokens["--chip-disabledFontColor"];
//DATE
@@ -140,67 +139,98 @@ export class ComplexThemeBindingStrategy implements MappingStrategy {
theme?.date?.baseColor ??
tokens["--date-pickerSelectedDateBackgroundColor"];
proccessedTokens["--date-pickerSelectedDateColor"] =
- theme?.date?.accentColor ??
- tokens["--date-pickerSelectedDateColor"];
+ theme?.date?.accentColor ?? tokens["--date-pickerSelectedDateColor"];
proccessedTokens["--date-pickerHoverDateBackgroundColor"] =
this.setOpacity(theme?.date?.baseColor, 0.34) ??
tokens["--date-pickerHoverDateBackgroundColor"];
+ //NEWDATE
+ proccessedTokens["--newDate-pickerSelectedDateBackgroundColor"] =
+ theme?.newDate?.baseColor ??
+ tokens["--newDate-pickerSelectedDateBackgroundColor"];
+ proccessedTokens["--newDate-pickerSelectedDateColor"] =
+ theme?.newDate?.accentColor ??
+ tokens["--newDate-pickerSelectedDateColor"];
+ proccessedTokens["--newDate-pickerHoverDateBackgroundColor"] =
+ this.setOpacity(theme?.newDate?.baseColor, 0.34) ??
+ tokens["--newDate-pickerHoverDateBackgroundColor"];
+
//DROPDOWN
proccessedTokens["--dropdown-buttonBackgroundColor"] =
theme?.dropdown?.baseColor ?? tokens["--dropdown-buttonBackgroundColor"];
proccessedTokens["--dropdown-buttonFontColor"] =
- theme?.dropdown?.textColor ?? tokens["--dropdown-buttonFontColor"];
- proccessedTokens["--dropdown-buttonHoverBackgroundColor"] =
+ theme?.dropdown?.fontColor ?? tokens["--dropdown-buttonFontColor"];
+ proccessedTokens["--dropdown-hoverButtonBackgroundColor"] =
this.setOpacity(theme?.dropdown?.baseColor, 0.8) ??
- tokens["--dropdown-buttonHoverBackgroundColor"];
- proccessedTokens["--dropdown-optionsListHoverBackgroundColor"] =
- // this.setOpacity(theme?.dropdown?.baseColor, 0.34) ??
- tokens["--dropdown-optionsListHoverBackgroundColor"];
+ tokens["--dropdown-hoverButtonBackgroundColor"];
+ proccessedTokens["--dropdown-hoverOptionBackgroundColor"] =
+ this.setOpacity(theme?.dropdown?.baseColor, 0.34) ??
+ tokens["--dropdown-hoverOptionBackgroundColor"];
+ proccessedTokens["--dropdown-activeButtonBackgroundColor"] =
+ this.setOpacity(theme?.dropdown?.baseColor, 0.7) ??
+ tokens["--dropdown-activeButtonBackgroundColor"];
+ proccessedTokens["--dropdown-activeOptionBackgroundColor"] =
+ this.setOpacity(theme?.dropdown?.baseColor, 0.7) ??
+ tokens["--dropdown-activeOptionBackgroundColor"];
//FOOTER
proccessedTokens["--footer-backgroundColor"] =
theme?.footer?.baseColor ?? tokens["--footer-backgroundColor"];
- proccessedTokens["--footer-fontColor"] =
- theme?.footer?.textColor ?? tokens["--footer-fontColor"];
- proccessedTokens["--footer-lineColor"] =
- theme?.footer?.accentColor ?? tokens["--footer-lineColor"];
+ proccessedTokens["--footer-bottomLinksDividerColor"] =
+ theme?.footer?.accentColor ?? tokens["--footer-bottomLinksDividerColor"];
+ proccessedTokens["--footer-bottomLinksFontColor"] =
+ theme?.footer?.fontColor ?? tokens["--footer-bottomLinksFontColor"];
+ proccessedTokens["--footer-copyrightFontColor"] =
+ theme?.footer?.fontColor ?? tokens["--footer-copyrightFontColor"];
+ proccessedTokens["--footer-socialLinksColor"] =
+ theme?.footer?.fontColor ?? tokens["--footer-socialLinksColor"];
//HEADER
proccessedTokens["--header-backgroundColor"] =
theme?.header?.baseColor ?? tokens["--header-backgroundColor"];
proccessedTokens["--header-underlinedColor"] =
theme?.header?.accentColor ?? tokens["--header-underlinedColor"];
- proccessedTokens["--header-fontColor"] =
- theme?.header?.textColor ?? tokens["--header-fontColor"];
- proccessedTokens["--header-backgroundColorMenu"] =
- theme?.header?.menuBaseColor ??
- tokens["--header-backgroundColorMenu"];
- proccessedTokens["--header-hamburguerColor"] =
- theme?.header?.hamburguerColor ?? tokens["--header-hamburguerColor"];
+ proccessedTokens["--header-customContentFontColor"] =
+ theme?.header?.fontColor ?? tokens["--header-customContentFontColor"];
+ proccessedTokens["--header-menuCustomContentFontColor"] =
+ theme?.header?.fontColor ?? tokens["--header-menuCustomContentFontColor"];
+ proccessedTokens["--header-hamburguerFontColor"] =
+ theme?.header?.fontColor ?? tokens["--header-hamburguerFontColor"];
+ proccessedTokens["--header-menuBackgroundColor"] =
+ theme?.header?.menuBaseColor ?? tokens["--header-menuBackgroundColor"];
+ proccessedTokens["--header-hamburguerIconColor"] =
+ theme?.header?.hamburguerColor ?? tokens["--header-hamburguerIconColor"];
proccessedTokens["--header-hoverHamburguerColor"] =
this.setOpacity(theme?.header?.hamburguerColor, 0.16) ??
tokens["--header-hoverHamburguerColor"];
+ proccessedTokens["--header-hamburguerHoverColor"] =
+ this.setOpacity(theme?.header?.hamburguerColor, 0.16) ??
+ tokens["--header-hamburguerHoverColor"];
//INPUT TEXT
- proccessedTokens["--inputText-optionHoverBackgroundColor"] =
+ proccessedTokens["--inputText-hoverOptionBackgroundColor"] =
this.setOpacity(theme?.inputText?.selectedBaseColor, 0.34) ??
- tokens["--inputText-optionHoverBackgroundColor"];
+ tokens["--inputText-hoverOptionBackgroundColor"];
+
+ //NEW INPUT TEXT
+ proccessedTokens["--newInputText-hoverListOptionBackgroundColor"] =
+ theme?.newInputText?.selectedBaseColor ??
+ tokens["--newInputText-hoverListOptionBackgroundColor"];
+ proccessedTokens["--newInputText-activeListOptionBackgroundColor"] =
+ this.subLightness(theme?.newInputText?.selectedBaseColor, 15) ??
+ tokens["--newInputText-activeListOptionBackgroundColor"];
//PAGINATOR
proccessedTokens["--paginator-backgroundColor"] =
- theme?.paginator?.baseColor ??
- tokens["--paginator-backgroundColor"];
+ theme?.paginator?.baseColor ?? tokens["--paginator-backgroundColor"];
proccessedTokens["--paginator-fontColor"] =
- theme?.paginator?.accentColor ??
- tokens["--paginator-fontColor"];
+ theme?.paginator?.fontColor ?? tokens["--paginator-fontColor"];
//PROGRESSBAR
proccessedTokens["--progressBar-trackLineColor"] =
theme?.progressBar?.accentColor ?? tokens["--progressBar-trackLineColor"];
proccessedTokens["--progressBar-totalLineColor"] =
- this.setOpacity(theme?.progressBar?.baseColor, 0.34) ??
- tokens["--progressBar-totalLineColor"];
+ theme?.progressBar?.baseColor ?? tokens["--progressBar-totalLineColor"];
//RADIO
proccessedTokens["--radio-color"] =
@@ -221,7 +251,7 @@ export class ComplexThemeBindingStrategy implements MappingStrategy {
proccessedTokens["--sidenav-backgroundColor"] =
theme?.sidenav?.baseColor ?? tokens["--sidenav-backgroundColor"];
proccessedTokens["--sidenav-arrowContainerColor"] =
- this.setOpacity(theme?.sidenav?.arrowBaseColor, 0.80) ??
+ this.setOpacity(theme?.sidenav?.arrowBaseColor, 0.8) ??
tokens["--sidenav-arrowContainerColor"];
proccessedTokens["--sidenav-arrowColor"] =
theme?.sidenav?.arrowAccentColor ?? tokens["--sidenav-arrowColor"];
@@ -233,18 +263,24 @@ export class ComplexThemeBindingStrategy implements MappingStrategy {
proccessedTokens["--slider-disabledThumbBackgroundColor"] =
this.setOpacity(theme?.slider?.baseColor, 0.34) ??
tokens["--slider-disabledThumbBackgroundColor"];
- proccessedTokens["--slider-disabledDotsBackgroundColor"] =
- this.setOpacity(theme?.slider?.baseColor, 0.34) ??
- tokens["--slider-disabledDotsBackgroundColor"];
proccessedTokens["--slider-disabledTrackLineColor"] =
this.setOpacity(theme?.slider?.baseColor, 0.34) ??
tokens["--slider-disabledTrackLineColor"];
proccessedTokens["--slider-thumbBackgroundColor"] =
theme?.slider?.baseColor ?? tokens["--slider-thumbBackgroundColor"];
- proccessedTokens["--slider-dotsBackgroundColor"] =
- theme?.slider?.baseColor ?? tokens["--slider-dotsBackgroundColor"];
+ proccessedTokens["--slider-tickBackgroundColor"] =
+ theme?.slider?.baseColor ?? tokens["--slider-tickBackgroundColor"];
proccessedTokens["--slider-trackLineColor"] =
theme?.slider?.baseColor ?? tokens["--slider-trackLineColor"];
+ proccessedTokens["--slider-disabledTickBackgroundColor"] =
+ this.setOpacity(theme?.slider?.baseColor, 0.34) ??
+ tokens["--slider-disabledTickBackgroundColor"];
+ proccessedTokens["--slider-activeThumbBackgroundColor"] =
+ this.subLightness(theme?.slider?.baseColor, 15) ??
+ tokens["--slider-activeThumbBackgroundColor"];
+ proccessedTokens["--slider-hoverThumbBackgroundColor"] =
+ this.subLightness(theme?.slider?.baseColor, 15) ??
+ tokens["--slider-hoverThumbBackgroundColor"];
//SPINNER
proccessedTokens["--spinner-trackCircleColor"] =
@@ -262,57 +298,71 @@ export class ComplexThemeBindingStrategy implements MappingStrategy {
//TABLE
proccessedTokens["--table-headerBackgroundColor"] =
- theme?.table?.baseColor ??
- tokens["--table-headerBackgroundColor"];
+ theme?.table?.baseColor ?? tokens["--table-headerBackgroundColor"];
proccessedTokens["--table-headerFontColor"] =
- theme?.table?.textColor ?? tokens["--table-headerFontColor"];
+ theme?.table?.fontColor ?? tokens["--table-headerFontColor"];
+
+ //TABS
+ proccessedTokens["--tabs-selectedFontColor"] =
+ theme?.tabs?.baseColor ?? tokens["--tabs-selectedFontColor"];
+ proccessedTokens["--tabs-selectedIconColor"] =
+ theme?.tabs?.baseColor ?? tokens["--tabs-selectedIconColor"];
+ proccessedTokens["--tabs-selectedUnderlineColor"] =
+ theme?.tabs?.baseColor ?? tokens["--tabs-selectedUnderlineColor"];
+ proccessedTokens["--tabs-focusOutline"] =
+ theme?.tabs?.baseColor ?? tokens["--tabs-focusOutline"];
+ proccessedTokens["--tabs-hoverBackgroundColor"] =
+ this.addLightness(theme?.tabs?.baseColor, 58) ??
+ tokens["--tabs-hoverBackgroundColor"];
+ proccessedTokens["--tabs-pressedBackgroundColor"] =
+ this.addLightness(theme?.tabs?.baseColor, 53) ??
+ tokens["--tabs-pressedBackgroundColor"];
//TOGGLE GROUP
proccessedTokens["--toggleGroup-unselectedBackgroundColor"] =
- theme?.toggle?.unselectedBaseColor ??
+ theme?.toggleGroup?.unselectedBaseColor ??
tokens["--toggleGroup-unselectedBackgroundColor"];
proccessedTokens["--toggleGroup-unselectedHoverBackgroundColor"] =
- theme?.toggle?.unselectedHoverBaseColor ??
+ this.subLightness(theme?.toggleGroup?.unselectedBaseColor, 8) ??
tokens["--toggleGroup-unselectedHoverBackgroundColor"];
- proccessedTokens["--toggleGroup-unselectedActiveBackgroundColor"] =
- theme?.toggle?.unselectedActiveBaseColor ??
+ proccessedTokens["--toggleGroup-unselectedActiveBackgroundColor"] =
+ theme?.toggleGroup?.selectedBaseColor ??
tokens["--toggleGroup-unselectedActiveBackgroundColor"];
proccessedTokens["--toggleGroup-unselectedFontColor"] =
- theme?.toggle?.unselectedTextColor ??
+ theme?.toggleGroup?.unselectedFontColor ??
tokens["--toggleGroup-unselectedFontColor"];
proccessedTokens["--toggleGroup-selectedBackgroundColor"] =
- theme?.toggle?.selectedBaseColor ??
+ theme?.toggleGroup?.selectedBaseColor ??
tokens["--toggleGroup-selectedBackgroundColor"];
proccessedTokens["--toggleGroup-selectedHoverBackgroundColor"] =
- theme?.toggle?.selectedHoverBaseColor ??
+ this.subLightness(theme?.toggleGroup?.selectedBaseColor, 8) ??
tokens["--toggleGroup-selectedHoverBackgroundColor"];
- proccessedTokens["--toggleGroup-selectedActiveBackgroundColor"] =
- theme?.toggle?.selectedActiveBaseColor ??
+ proccessedTokens["--toggleGroup-selectedActiveBackgroundColor"] =
+ this.subLightness(theme?.toggleGroup?.selectedBaseColor, 18) ??
tokens["--toggleGroup-selectedActiveBackgroundColor"];
proccessedTokens["--toggleGroup-selectedFontColor"] =
- theme?.toggle?.selectedTextColor ?? tokens["--toggleGroup-selectedFontColor"];
- proccessedTokens["--toggleGroup-selectedHoverFontColor"] =
- theme?.toggle?.selectedHoverTextColor ??
- tokens["--toggleGroup-selectedHoverFontColor"];
+ theme?.toggleGroup?.selectedFontColor ??
+ tokens["--toggleGroup-selectedFontColor"];
proccessedTokens["--toggleGroup-selectedDisabledBackgroundColor"] =
- this.setOpacity(theme?.toggle?.selectedBaseColor, 0.34) ??
+ this.addLightness(theme?.toggleGroup?.selectedBaseColor, 57) ??
tokens["--toggleGroup-selectedDisabledBackgroundColor"];
proccessedTokens["--toggleGroup-selectedDisabledFontColor"] =
- this.setOpacity(theme?.toggle?.selectedTextColor, 0.34) ??
+ this.addLightness(theme?.toggleGroup?.selectedBaseColor, 42) ??
tokens["--toggleGroup-selectedDisabledFontColor"];
proccessedTokens["--toggleGroup-unselectedDisabledBackgroundColor"] =
- this.setOpacity(theme?.toggle?.unselectedBaseColor, 0.34) ??
+ this.addLightness(theme?.toggleGroup?.unselectedBaseColor, 5) ??
tokens["--toggleGroup-unselectedDisabledBackgroundColor"];
proccessedTokens["--toggleGroup-unselectedDisabledFontColor"] =
- this.setOpacity(theme?.toggle?.unselectedTextColor, 0.34) ??
+ this.setOpacity(theme?.toggleGroup?.unselectedFontColor, 0.34) ??
tokens["--toggleGroup-unselectedDisabledFontColor"];
//WIZARD
- proccessedTokens["--wizard-selectedBackgroundColor"] =
+ proccessedTokens["--wizard-stepContainerSelectedBackgroundColor"] =
theme?.wizard?.baseColor ??
- tokens["--wizard-selectedBackgroundColor"];
- proccessedTokens["--wizard-selectedFont"] =
- theme?.wizard?.textColor ?? tokens["--wizard-selectedFont"];
+ tokens["--wizard-stepContainerSelectedBackgroundColor"];
+ proccessedTokens["--wizard-stepContainerSelectedFontColor"] =
+ theme?.wizard?.fontColor ??
+ tokens["--wizard-stepContainerSelectedFontColor"];
return proccessedTokens;
}
diff --git a/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts b/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts
index e8fe7c2b3..a37ef11d1 100644
--- a/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts
+++ b/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts
@@ -10,6 +10,7 @@ const globalTokens = {
hal_grey_l_75: "#bfbfbf",
hal_grey_l_60: "#999999",
hal_grey_s_40: "#666666",
+ color_grey_800: "#4d4d4d",
hal_black: "#000000",
darkWhite: "#eeeeee",
lightGrey: "#D9D9D9",
@@ -143,321 +144,279 @@ const globalTokens = {
};
export const componentTokens = {
- "--fontFamily": globalTokens.type_sans,
- //ACCORDION
"--accordion-backgroundColor": globalTokens.hal_white,
- "--accordion-arrowColor": globalTokens.purple,
- "--accordion-hoverBackgroundColor": globalTokens.lightPurple,
- //Font
- "--accordion-fontColorBase": globalTokens.hal_grey_s_40,
- "--accordion-disabledFontColor": globalTokens.hal_grey_l_75,
- //Title
- "--accordion-titleFontFamily": globalTokens.type_sans,
- "--accordion-titleFontSize": globalTokens.type_scale_03,
- "--accordion-titleFontWeight": globalTokens.type_regular,
- "--accordion-titleFontStyle": globalTokens.type_normal,
- "--accordion-titleFontColor": "",
- "--accordion-titleMarginRight": "48px",
- "--accordion-titleMarginLeft": "0px",
- "--accordion-titleMarginTop": "0px",
- "--accordion-titleMarginBottom": "0px",
- //AssistiveText
+ "--accordion-arrowColor": globalTokens.hal_purple_s_38,
+ "--accordion-hoverBackgroundColor": globalTokens.hal_purple_l_95,
+ "--accordion-titleLabelFontFamily": globalTokens.type_sans,
+ "--accordion-titleLabelFontSize": globalTokens.type_scale_03,
+ "--accordion-titleLabelFontWeight": globalTokens.type_regular,
+ "--accordion-titleLabelFontStyle": globalTokens.type_normal,
+ "--accordion-titleLabelFontColor": globalTokens.hal_black,
+ "--accordion-disabledTitleLabelFontColor": globalTokens.hal_grey_l_60,
+ "--accordion-titleLabelPaddingLeft": "0px",
+ "--accordion-titleLabelPaddingRight": "16px",
+ "--accordion-titleLabelPaddingTop": "0px",
+ "--accordion-titleLabelPaddingBottom": "0px",
"--accordion-assistiveTextFontFamily": globalTokens.type_sans,
"--accordion-assistiveTextFontSize": globalTokens.type_scale_03,
"--accordion-assistiveTextFontWeight": globalTokens.type_light,
"--accordion-assistiveTextFontStyle": globalTokens.type_italic,
- "--accordion-assistiveTextFontColor": "",
+ "--accordion-assistiveTextFontColor": globalTokens.hal_grey_s_40,
"--accordion-assistiveTextLetterSpacing": globalTokens.type_spacing_wide_01,
"--accordion-assistiveTextMinWidth": "100px",
- "--accordion-assistiveTextMarginRight": "0px",
- "--accordion-assistiveTextMarginLeft": "0px",
- "--accordion-assistiveTextMarginTop": "1px",
- "--accordion-assistiveTextMarginBottom": "0px",
- //CustomContent
- "--accordion-customContentFontFamily": globalTokens.type_sans,
- "--accordion-customContentFontSize": globalTokens.type_scale_03,
- "--accordion-customContentFontWeight": globalTokens.type_light,
- "--accordion-customContentFontColor": "",
- //Header
- "--accordion-headerPaddingLeft": "16px",
- "--accordion-headerPaddingRight": "16px",
- "--accordion-headerPaddingTop": "0px",
- "--accordion-headerPaddingBottom": "0px",
- "--accordion-headerFocusBorderStyle": "auto",
- "--accordion-headerFocusBorderThickness": "1px",
- "--accordion-headerFocusBorderColor": globalTokens.purple,
- //Size
- "--accordion-minHeight": "48px",
- "--accordion-minWidth": "280px",
- //Icon
- "--accordion-iconMaxHeight": "24px",
- "--accordion-iconMaxWidth": "24px",
+ "--accordion-assistiveTextPaddingLeft": "0px",
+ "--accordion-assistiveTextPaddingRight": "24px",
+ "--accordion-iconSize": "24px",
+ "--accordion-iconColor": globalTokens.hal_purple_s_38,
+ "--accordion-disabledIconColor": globalTokens.hal_grey_l_60,
"--accordion-iconMarginLeft": "0px",
- "--accordion-iconMarginRigth": "12px",
- //Border/BoxShadow
+ "--accordion-iconMarginRight": "12px",
"--accordion-borderRadius": "4px",
"--accordion-boxShadowOffsetX": "0px",
"--accordion-boxShadowOffsetY": "6px",
"--accordion-boxShadowBlur": "10px",
"--accordion-boxShadowColor": "#00000024",
- //Separator
"--accordion-accordionGroupSeparatorBorderColor": "#00000024",
"--accordion-accordionGroupSeparatorBorderThickness": "1px",
- "--accordion-accordionGroupSeparatorBorderRadius": "0px",
- "--accordion-accordionGroupSeparatorBorderStyle": "solid",
+ "--accordion-accordionGroupSeparatorBorderStyle": globalTokens.border_solid,
+ "--accordion-disabledBackgroundColor": globalTokens.transparent,
+ "--accordion-disabledArrowColor": globalTokens.hal_grey_l_60,
+ "--accordion-disabledAssistiveTextFontColor": globalTokens.hal_grey_l_60,
+ "--accordion-focusBorderStyle": "auto",
+ "--accordion-focusBorderThickness": "1px",
+ "--accordion-focusBorderOffset": "-1px",
+ "--accordion-focusBorderColor": globalTokens.hal_purple_s_38,
//ALERT
- "--alert-infoColor": globalTokens.lightBlue,
- "--alert-successColor": globalTokens.lightGreen,
- "--alert-warningColor": globalTokens.lightYellow,
- "--alert-errorColor": globalTokens.lightPink,
- "--alert-overlayColor": globalTokens.hal_black,
- "--alert-overlayOpacity": "0.8",
- "--alert-focusColor": globalTokens.blue, //ponerlo en el componente
- // Title
- "--alert-height": "48px",
- "--alert-titleFontFamily": globalTokens.type_sans,
- "--alert-titleFontSize": globalTokens.type_scale_01,
- "--alert-titleFontColor": globalTokens.hal_black,
- "--alert-titleFontWeight": globalTokens.type_bold,
- "--alert-titleFontStyle": globalTokens.type_normal,
- "--alert-titleTextTransform": globalTokens.type_uppercase,
- "--alert-titlePaddingRight": "8px",
- "--alert-titlePaddingLeft": "12px",
"--alert-titlePaddingTop": "0px",
"--alert-titlePaddingBottom": "0px",
- //Content
- "--alert-contentFontFamily": globalTokens.type_sans,
- "--alert-contentFontSize": globalTokens.type_scale_01,
- "--alert-contentFontColor": globalTokens.hal_black,
- "--alert-contentFontWeight": globalTokens.type_normal,
- "--alert-contentPaddingLeft": "48px",
- "--alert-contentPaddingRight": "12px",
- "--alert-contentPaddingTop": "8px",
- "--alert-contentPaddingBottom": "20px",
- //InlineText
- "--alert-inlineTextPaddingLeft": "8px",
- "--alert-inlineTextPaddingRight": "8px",
"--alert-inlineTextPaddingTop": "0px",
"--alert-inlineTextPaddingBottom": "0px",
- //Icon
- "--alert-iconPaddingLeft": "12px",
- "--alert-iconPaddingRight": "0px",
"--alert-iconPaddingTop": "0px",
"--alert-iconPaddingBottom": "0px",
- "--alert-iconSize": "20px",
- //Box/Border
"--alert-boxShadowOffsetX": "0px",
"--alert-boxShadowOffsetY": "3px",
"--alert-boxShadowBlur": "6px",
"--alert-boxShadowColor": "#00000012",
+ "--alert-titleFontFamily": globalTokens.type_sans,
+ "--alert-titleFontColor": globalTokens.hal_black,
+ "--alert-titleFontSize": globalTokens.type_scale_01,
+ "--alert-titleFontStyle": globalTokens.type_normal,
+ "--alert-titleFontWeight": globalTokens.type_bold,
+ "--alert-titleTextTransform": globalTokens.type_uppercase,
+ "--alert-titlePaddingRight": "0px",
+ "--alert-titlePaddingLeft": "0px",
+ "--alert-inlineTextFontFamily": globalTokens.type_sans,
+ "--alert-inlineTextFontColor": globalTokens.hal_black,
+ "--alert-inlineTextFontSize": globalTokens.type_scale_01,
+ "--alert-inlineTextFontStyle": globalTokens.type_normal,
+ "--alert-inlineTextFontWeight": globalTokens.type_regular,
+ "--alert-inlineTextPaddingLeft": "0px",
+ "--alert-inlineTextPaddingRight": "0px",
+ "--alert-contentPaddingLeft": "0px",
+ "--alert-contentPaddingRight": "0px",
+ "--alert-contentPaddingTop": "20px",
+ "--alert-contentPaddingBottom": "30px",
"--alert-borderRadius": "4px",
"--alert-borderStyle": globalTokens.border_solid,
"--alert-borderThickness": "1px",
"--alert-infoBorderColor": globalTokens.hal_blue_s_35,
"--alert-successBorderColor": globalTokens.hal_green_s_39,
- "--alert-warningBorderColor": globalTokens.hal_yellow_s_57,
+ "--alert-warningBorderColor": globalTokens.hal_yellow_d_40,
"--alert-errorBorderColor": globalTokens.hal_red_s_41,
+ "--alert-iconSize": "24px",
+ "--alert-iconPaddingLeft": "0px",
+ "--alert-iconPaddingRight": "0px",
+ "--alert-infoIconColor": globalTokens.hal_blue_s_35,
+ "--alert-successIconColor": globalTokens.hal_green_s_39,
+ "--alert-warningIconColor": globalTokens.hal_yellow_d_40,
+ "--alert-errorIconColor": globalTokens.hal_red_s_41,
+ "--alert-infoBackgroundColor": globalTokens.hal_blue_l_95,
+ "--alert-successBackgroundColor": globalTokens.hal_green_l_95,
+ "--alert-warningBackgroundColor": globalTokens.hal_yellow_l_95,
+ "--alert-errorBackgroundColor": globalTokens.hal_red_l_95,
+ "--alert-overlayColor": "#000000B3",
+ "--alert-hoverActionBackgroundColor": "#0000000D",
+ "--alert-focusActionBorderColor": globalTokens.hal_blue_l_50,
+ "--alert-activeActionBackgroundColor": "#0000001A",
//BOX
"--box-backgroundColor": globalTokens.hal_white,
-
- "--box-fontFamily": globalTokens.type_sans,
- "--box-fontSize": globalTokens.type_scale_02,
- "--box-fontWeight": globalTokens.type_normal,
- "--box-fontColor": globalTokens.hal_black,
"--box-letterSpacing": globalTokens.type_spacing_wide_01,
-
"--box-borderRadius": "4px",
"--box-borderThickness": "0px",
"--box-borderColor": globalTokens.transparent,
"--box-borderStyle": globalTokens.type_no_line,
-
"--box-noneShadowDepthShadowOffsetX": "none",
"--box-noneShadowDepthShadowOffsetY": "none",
"--box-noneShadowDepthShadowBlur": "none",
"--box-noneShadowDepthShadowSpread": "none",
"--box-noneShadowDepthShadowColor": globalTokens.transparent,
"--box-oneShadowDepthShadowOffsetX": "0px",
- "--box-oneShadowDepthShadowOffsetY": "2px",
- "--box-oneShadowDepthShadowBlur": "1px",
- "--box-oneShadowDepthShadowSpread": "-1px",
+ "--box-oneShadowDepthShadowOffsetY": "3px",
+ "--box-oneShadowDepthShadowBlur": "6px",
+ "--box-oneShadowDepthShadowSpread": "0px",
"--box-oneShadowDepthShadowColor": "#00000033",
"--box-twoShadowDepthShadowOffsetX": "0px",
"--box-twoShadowDepthShadowOffsetY": "3px",
- "--box-twoShadowDepthShadowBlur": "3px",
- "--box-twoShadowDepthShadowSpread": "-2px",
+ "--box-twoShadowDepthShadowBlur": "10px",
+ "--box-twoShadowDepthShadowSpread": "0px",
"--box-twoShadowDepthShadowColor": "#00000033",
//BUTTON
- "--button-primaryBackgroundColor": globalTokens.purple,
- "--button-primaryBackgroundColorOnDark": "#581B81",
- "--button-primaryHoverBackgroundColor": globalTokens.hal_black,
- "--button-primaryHoverBackgroundColorOnDark": "#581B81",
+ "--button-labelFontLineHeight": "1.5em",
+ "--button-labelLetterSpacing": "0.025em",
+ "--button-paddingLeft": "8px",
+ "--button-paddingRight": "8px",
+ "--button-paddingTop": "8px",
+ "--button-paddingBottom": "8px",
+ "--button-focusBorderColor": globalTokens.hal_blue_l_50,
+ "--button-focusBorderColorOnDark": globalTokens.hal_blue_l_50,
+ "--button-primaryBackgroundColor": globalTokens.hal_purple_s_38,
+ "--button-primaryBackgroundColorOnDark": globalTokens.hal_purple_s_38,
"--button-primaryFontColor": globalTokens.hal_white,
- "--button-primaryFontColorOnDark": globalTokens.hal_black,
- "--button-primaryHoverFontColor": globalTokens.hal_white,
- "--button-primaryHoverFontColorOnDark": globalTokens.hal_black,
- "--button-disabledPrimaryBackgroundColor": globalTokens.lightPurple,
- "--button-primaryActiveBackgroundColor": globalTokens.mediumBlack,
- "--button-primaryActiveBackgroundColorOnDark": "#581B81",
- "--button-primaryDisabledBackgroundColor": globalTokens.lightPurple,
- "--button-primaryDisabledBackgroundColorOnDark": "#ffffff57",
- "--button-primaryDisabledFontColor": globalTokens.hal_white,
- "--button-primaryDisabledFontColorOnDark": globalTokens.hal_black,
- "--button-primaryBorderColor": globalTokens.transparent,
- "--button-primaryBorderColorOnDark": globalTokens.transparent,
+ "--button-primaryFontColorOnDark": globalTokens.hal_white,
+ "--button-primaryHoverBackgroundColor": globalTokens.hal_purple_d_30,
+ "--button-primaryHoverBackgroundColorOnDark": "#7D2FD0",
+ "--button-primaryActiveBackgroundColor": globalTokens.hal_purple_d_20,
+ "--button-primaryActiveBackgroundColorOnDark": globalTokens.hal_purple_d_30,
+ "--button-primaryDisabledBackgroundColor": globalTokens.hal_grey_l_95,
+ "--button-primaryDisabledBackgroundColorOnDark": "#4d4d4d",
+ "--button-primaryDisabledFontColor": globalTokens.hal_grey_l_60,
+ "--button-primaryDisabledFontColorOnDark": globalTokens.hal_grey_l_60,
"--button-primaryBorderThickness": "0px",
"--button-primaryBorderStyle": "none",
"--button-primaryBorderRadius": "4px",
"--button-primaryFontFamily": globalTokens.type_sans,
"--button-primaryFontSize": globalTokens.type_scale_03,
"--button-primaryFontWeight": globalTokens.type_regular,
- "--button-primaryPaddingTop": "12px",
- "--button-primaryPaddingBottom": "12px",
- "--button-secondaryOutlinedColor": globalTokens.purple,
- "--button-secondaryOutlinedColorOnDark": "#6A229A",
"--button-secondaryBackgroundColor": globalTokens.transparent,
"--button-secondaryBackgroundColorOnDark": globalTokens.transparent,
- "--button-secondaryHoverOutlinedColor": globalTokens.hal_black,
- "--button-secondaryHoverOutlinedColorOnDark": "#6A229A",
- "--button-secondaryFontColor": globalTokens.hal_black,
+ "--button-secondaryFontColor": globalTokens.hal_purple_s_38,
"--button-secondaryFontColorOnDark": globalTokens.hal_white,
- "--button-secondaryHoverFontColor": globalTokens.hal_black,
- "--button-secondaryHoverFontColorOnDark": globalTokens.hal_white,
- "--button-secondaryActiveBackgroundColor": globalTokens.mediumGreyBlack,
- "--button-secondaryActiveBackgroundColorOnDark": "#FFFFFF29",
- "--button-secondaryHoverBackgroundColor": globalTokens.darkWhite,
- "--button-secondaryHoverBackgroundColorOnDark": "#FFFFFF14",
- "--button-secondaryDisabledOutlinedColor": globalTokens.lightPurple,
- "--button-secondaryDisabledOutlinedColorOnDark": "#575757",
- "--button-secondaryDisabledFontColor": globalTokens.lighterBlack,
- "--button-secondaryDisabledFontColorOnDark": "#575757",
+ "--button-secondaryHoverFontColor": globalTokens.hal_white,
+ "--button-secondaryHoverFontColorOnDark": globalTokens.hal_black,
+ "--button-secondaryBorderColor": globalTokens.hal_purple_s_38,
+ "--button-secondaryBorderColorOnDark": globalTokens.hal_white,
+ "--button-secondaryHoverBackgroundColor": globalTokens.hal_purple_s_38,
+ "--button-secondaryHoverBackgroundColorOnDark": globalTokens.hal_white,
+ "--button-secondaryActiveBackgroundColor": globalTokens.hal_purple_d_20,
+ "--button-secondaryActiveBackgroundColorOnDark": "#e6e6e6",
+ "--button-secondaryDisabledBackgroundColor": globalTokens.transparent,
+ "--button-secondaryDisabledBackgroundColorOnDark": globalTokens.transparent,
+ "--button-secondaryDisabledFontColor": "#b1b1b1",
+ "--button-secondaryDisabledFontColorOnDark": globalTokens.hal_grey_l_60,
+ "--button-secondaryDisabledBorderColor": globalTokens.hal_grey_l_60,
+ "--button-secondaryDisabledBorderColorOnDark": globalTokens.hal_grey_l_60,
"--button-secondaryBorderThickness": "1px",
- "--button-secondaryBorderStyle": "solid",
+ "--button-secondaryBorderStyle": globalTokens.border_solid,
"--button-secondaryBorderRadius": "4px",
"--button-secondaryFontFamily": globalTokens.type_sans,
"--button-secondaryFontSize": globalTokens.type_scale_03,
"--button-secondaryFontWeight": globalTokens.type_regular,
- "--button-secondaryPaddingTop": "10px",
- "--button-secondaryPaddingBottom": "10px",
"--button-textBackgroundColor": globalTokens.transparent,
"--button-textBackgroundColorOnDark": globalTokens.transparent,
- "--button-textHoverBackgroundColor": globalTokens.hal_black,
- "--button-textHoverBackgroundColorOnDark": "#6A229A80",
- "--button-textFontColor": globalTokens.purple,
+ "--button-textFontColor": globalTokens.hal_purple_s_38,
"--button-textFontColorOnDark": globalTokens.hal_white,
- "--button-textHoverFontColor": globalTokens.hal_white,
- "--button-textHoverFontColorOnDark": globalTokens.hal_white,
- "--button-textActiveBackgroundColor": globalTokens.mediumBlack,
- "--button-textActiveBackgroundColorOnDark": "#581B81",
- "--button-textDisabledFontColor": globalTokens.lightPurple,
+ "--button-textHoverBackgroundColor": globalTokens.hal_purple_l_95,
+ "--button-textHoverBackgroundColorOnDark": "#4d4d4d",
+ "--button-textActiveBackgroundColor": globalTokens.hal_purple_l_90,
+ "--button-textActiveBackgroundColorOnDark": globalTokens.hal_grey_s_40,
"--button-textDisabledBackgroundColor": globalTokens.transparent,
"--button-textDisabledBackgroundColorOnDark": globalTokens.transparent,
- "--button-textDisabledFontColorOnDark": "#FFFFFF80",
+ "--button-textDisabledFontColor": globalTokens.hal_grey_l_60,
+ "--button-textDisabledFontColorOnDark": globalTokens.hal_grey_l_60,
"--button-textBorderThickness": "0px",
- "--button-textBorderColor": globalTokens.transparent,
- "--button-textBorderColorOnDark": globalTokens.transparent,
"--button-textBorderStyle": "none",
"--button-textBorderRadius": "4px",
"--button-textFontFamily": globalTokens.type_sans,
"--button-textFontSize": globalTokens.type_scale_03,
"--button-textFontWeight": globalTokens.type_regular,
- "--button-textPaddingTop": "12px",
- "--button-textPaddingBottom": "12px",
- "--button-focusColor": globalTokens.blue,
- "--button-labelFontLineHeight": "1em",
- "--button-labelLetterSpacing": globalTokens.type_spacing_wide_01,
- "--button-height": "40px",
- "--button-iconSize": "20px",
//CARD
"--card-height": "220px",
"--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":
+ globalTokens.color_grey_800,
"--checkbox-borderColor": globalTokens.hal_blue_s_35,
- "--checkbox-hoverBorderColor": globalTokens.hal_blue_d_20,
"--checkbox-borderColorOnDark": globalTokens.hal_grey_l_90,
+ "--checkbox-hoverBorderColor": globalTokens.hal_blue_d_20,
"--checkbox-hoverBorderColorOnDark": globalTokens.hal_white,
- "--checkbox-selectedBackgroundColor": globalTokens.hal_blue_s_35,
- "--checkbox-selectedHoverBackgroundColor": globalTokens.hal_blue_d_20,
- "--checkbox-selectedBackgroundColorOnDark": globalTokens.hal_grey_l_90,
- "--checkbox-selectedHoverBackgroundColorOnDark": globalTokens.hal_white,
+ "--checkbox-disabledBorderColor": globalTokens.hal_grey_l_60,
+ "--checkbox-disabledBorderColorOnDark": globalTokens.color_grey_800,
"--checkbox-checkColor": globalTokens.hal_white,
"--checkbox-checkColorOnDark": globalTokens.hal_black,
- "--checkbox-fontColor": globalTokens.hal_black,
- "--checkbox-fontColorOnDark": globalTokens.hal_white,
+ "--checkbox-disabledCheckColor": globalTokens.hal_white,
+ "--checkbox-disabledCheckColorOnDark": globalTokens.hal_grey_l_60,
"--checkbox-fontFamily": globalTokens.type_sans,
"--checkbox-fontSize": globalTokens.type_scale_02,
"--checkbox-fontWeight": globalTokens.type_regular,
- "--checkbox-checkLabelSpacing": "8px",
- "--checkbox-selectedDisabledBackgroundColor": globalTokens.hal_grey_l_60,
- "--checkbox-selectedDisabledBackgroundColorOnDark": "#4d4d4d",
- "--checkbox-disabledBorderColor": globalTokens.hal_grey_l_60,
- "--checkbox-disabledBorderColorOnDark": "#4d4d4d",
- "--checkbox-disabledCheckColor": globalTokens.hal_white,
- "--checkbox-disabledCheckColorOnDark": globalTokens.hal_grey_l_60,
+ "--checkbox-fontColor": globalTokens.hal_black,
+ "--checkbox-fontColorOnDark": globalTokens.hal_white,
"--checkbox-disabledFontColor": globalTokens.hal_grey_l_60,
"--checkbox-disabledFontColorOnDark": globalTokens.hal_grey_l_60,
"--checkbox-focusColor": globalTokens.hal_blue_l_50,
"--checkbox-focusColorOnDark": globalTokens.hal_blue_l_50,
+ "--checkbox-checkLabelSpacing": "8px",
//CHIP
- "--chip-backgroundColor": "#e6e6e6",
- "--chip-borderColor": "transparent",
- "--chip-fontColor": globalTokens.hal_black,
+ "--chip-backgroundColor": globalTokens.hal_grey_l_90,
"--chip-disabledBackgroundColor": globalTokens.hal_grey_l_95,
- "--chip-disabledFontColor": "#999999",
"--chip-fontFamily": globalTokens.type_sans,
"--chip-fontSize": globalTokens.type_scale_03,
- "--chip-fontWeight": "400",
- "--chip-fontStyle": "normal",
- "--chip-borderRadius": "50px",
- "--chip-borderThickness": "2px",
+ "--chip-fontStyle": globalTokens.type_normal,
+ "--chip-fontWeight": globalTokens.type_regular,
+ "--chip-fontColor": globalTokens.hal_black,
+ "--chip-disabledFontColor": globalTokens.hal_grey_l_60,
+ "--chip-borderColor": globalTokens.transparent,
+ "--chip-borderRadius": "80px",
+ "--chip-borderThickness": "0px",
"--chip-borderStyle": "solid",
- "--chip-height": "18px",
"--chip-contentPaddingLeft": "16px",
"--chip-contentPaddingRight": "16px",
- "--chip-contentPaddingTop": "10px",
- "--chip-contentPaddingBottom": "10px",
+ "--chip-contentPaddingTop": "0px",
+ "--chip-contentPaddingBottom": "0px",
"--chip-iconSize": "24px",
- "--chip-iconPaddingLeft": "0px",
- "--chip-iconPaddingRight": "0px",
+ "--chip-iconSpacing": "8px",
"--chip-iconColor": globalTokens.hal_black,
- "--chip-disabledIconColor": "#999999",
- "--chip-focusColor": globalTokens.blue,
+ "--chip-disabledIconColor": globalTokens.hal_grey_l_60,
+ "--chip-focusColor": globalTokens.hal_blue_s_35,
//DATE
"--date-pickerSelectedDateBackgroundColor": globalTokens.purple,
"--date-pickerSelectedDateColor": globalTokens.hal_white,
"--date-pickerBackgroundColor": globalTokens.hal_white,
- "--date-pickerActualDate": globalTokens.lightGrey,
+ "--date-pickerActualDateColor": globalTokens.lightGrey,
"--date-pickerFontColor": globalTokens.hal_black,
"--date-pickerHoverDateFontColor": globalTokens.hal_black,
- "--date-pickerHoverDateBackgroundColor": globalTokens.lightPurple,
+ "--date-pickerHoverDateBackgroundColor": globalTokens.lighterPurple,
"--date-focusColor": globalTokens.blue,
- "--date-pickerHoverHeaderColor": "#0000001F",
"--date-pickerYearColor": globalTokens.hal_black,
- "--date-pickerLabelColor": globalTokens.lighterBlack,
- "--date-pickerWeekLabelColor": globalTokens.lighterBlack,
+ "--date-pickerMonthColor": globalTokens.hal_black,
+ "--date-pickerWeekLabelColor": globalTokens.hal_black,
"--date-pickerBackgroundColorMonthArrows": globalTokens.transparent,
"--date-fontFamily": globalTokens.type_sans,
- "--date-pickerHeight": "300px",
+ "--date-pickerHeight": "316px",
"--date-pickerWidth": "290px",
//NEW DATE
"--newDate-pickerSelectedDateBackgroundColor": globalTokens.purple,
"--newDate-pickerSelectedDateColor": globalTokens.hal_white,
"--newDate-pickerBackgroundColor": globalTokens.hal_white,
- "--newDate-pickerActualDate": globalTokens.lightGrey,
+ "--newDate-pickerActualDateColor": globalTokens.lightGrey,
"--newDate-pickerFontColor": globalTokens.hal_black,
"--newDate-pickerHoverDateFontColor": globalTokens.hal_black,
"--newDate-pickerHoverDateBackgroundColor": globalTokens.lighterPurple,
"--newDate-focusColor": globalTokens.blue,
- "--newDate-pickerHoverHeaderColor": "#0000001F",
"--newDate-pickerYearColor": globalTokens.hal_black,
- "--newDate-pickerLabelColor": globalTokens.lighterBlack,
+ "--newDate-pickerMonthColor": globalTokens.lighterBlack,
"--newDate-pickerWeekLabelColor": globalTokens.lighterBlack,
"--newDate-pickerBackgroundColorMonthArrows": globalTokens.transparent,
"--newDate-fontFamily": globalTokens.type_sans,
@@ -466,180 +425,153 @@ export const componentTokens = {
//DIALOG
"--dialog-overlayColor": globalTokens.hal_black,
- "--dialog-overlayOpacity": "0.8",
+ "--dialog-overlayOpacity": "0.7",
"--dialog-backgroundColor": globalTokens.hal_white,
-
- "--dialog-scrollBarThumbColor": globalTokens.hal_grey_s_40,
- "--dialog-scrollBarTrackColor": globalTokens.lightGrey,
-
- "--dialog-fontFamily": globalTokens.type_sans,
- "--dialog-fontSize": globalTokens.type_scale_03,
- "--dialog-fontWeight": globalTokens.type_regular,
- "--dialog-fontColor": globalTokens.hal_black,
-
- "--dialog-closeIconWidth": "34px",
- "--dialog-closeIconHeight": "34px",
+ "--dialog-closeIconWidth": "24px",
+ "--dialog-closeIconHeight": "24px",
"--dialog-closeIconTopPosition": "20px",
"--dialog-closeIconRightPosition": "20px",
"--dialog-closeIconBackgroundColor": "none",
"--dialog-closeIconColor": globalTokens.hal_black,
"--dialog-closeIconBorderColor": globalTokens.type_no_line,
"--dialog-closeIconBorderThickness": "0px",
- "--dialog-closeIconBorderStyle": "solid",
+ "--dialog-closeIconBorderStyle": globalTokens.border_solid,
"--dialog-closeIconBorderRadius": "0px",
-
"--dialog-boxShadowOffsetX": "0px",
"--dialog-boxShadowOffsetY": "1px",
"--dialog-boxShadowBlur": "3px",
"--dialog-boxShadowColor": "rgba(0, 0, 0, 0.2)",
//DROPDOWN
- "--dropdown-scrollBarThumbColor": globalTokens.hal_grey_s_40,
- "--dropdown-scrollBarTrackColor": globalTokens.lightGrey,
- "--dropdown-focusColor": globalTokens.blue,
"--dropdown-buttonBackgroundColor": globalTokens.hal_white,
- "--dropdown-buttonFontColor": globalTokens.hal_black,
- "--dropdown-buttonHoverBackgroundColor": globalTokens.hal_grey_l_95,
+ "--dropdown-hoverButtonBackgroundColor": globalTokens.hal_grey_l_95,
"--dropdown-activeButtonBackgroundColor": globalTokens.lightGrey,
- "--dropdown-disabledButtonBackgroundColor": globalTokens.transparent,
- "--dropdown-disabledButtonFontColor": globalTokens.lighterBlack,
- "--dropdown-optionsListBackgroundColor": globalTokens.hal_white,
- "--dropdown-optionsListHoverBackgroundColor": globalTokens.hal_grey_l_95,
- "--dropdown-optionsListActiveBackgroundColor": globalTokens.lightGrey,
- "--dropdown-fontFamily": globalTokens.type_sans,
+ "--dropdown-buttonFontFamily": globalTokens.type_sans,
"--dropdown-buttonFontSize": globalTokens.type_scale_03,
"--dropdown-buttonFontStyle": globalTokens.type_normal,
"--dropdown-buttonFontWeight": globalTokens.type_regular,
- "--dropdown-minHeight": "40px",
- "--dropdown-borderRadius": "2px",
+ "--dropdown-buttonFontColor": globalTokens.hal_black,
+ "--dropdown-buttonIconSize": "20px",
+ "--dropdown-buttonIconSpacing": "10px",
+ "--dropdown-buttonIconColor": globalTokens.hal_black,
+ "--dropdown-buttonPaddingTop": "0px",
+ "--dropdown-buttonPaddingBottom": "0px",
+ "--dropdown-buttonPaddingLeft": "16px",
+ "--dropdown-buttonPaddingRight": "16px",
+ "--dropdown-disabledColor": globalTokens.lighterBlack,
+ "--dropdown-disabledButtonBackgroundColor": globalTokens.transparent,
+ "--dropdown-disabledBorderColor": globalTokens.lighterBlack,
+ "--dropdown-optionBackgroundColor": globalTokens.hal_white,
+ "--dropdown-hoverOptionBackgroundColor": globalTokens.hal_grey_l_95,
+ "--dropdown-activeOptionBackgroundColor": globalTokens.lightGrey,
+ "--dropdown-optionFontFamily": globalTokens.type_sans,
+ "--dropdown-optionFontSize": globalTokens.type_scale_root,
+ "--dropdown-optionFontStyle": globalTokens.type_normal,
+ "--dropdown-optionFontWeight": globalTokens.type_regular,
+ "--dropdown-optionFontColor": globalTokens.hal_black,
+ "--dropdown-optionIconSize": "20px",
+ "--dropdown-optionIconSpacing": "10px",
+ "--dropdown-optionIconColor": globalTokens.hal_black,
+ "--dropdown-optionPaddingTop": "6px",
+ "--dropdown-optionPaddingBottom": "6px",
+ "--dropdown-optionPaddingLeft": "16px",
+ "--dropdown-optionPaddingRight": "16px",
+ "--dropdown-caretIconSize": "24px",
+ "--dropdown-caretIconColor": globalTokens.hal_black,
+ "--dropdown-caretIconSpacing": "12px",
+ "--dropdown-borderRadius": "4px",
"--dropdown-borderStyle": "none",
"--dropdown-borderThickness": "0px",
"--dropdown-borderColor": globalTokens.transparent,
- "--dropdown-optionsHeight": "36px",
- "--dropdown-caretIconMarginRight": "0px",
- "--dropdown-caretIconMarginLeft": "0px",
- "--dropdown-caretIconMarginTop": "0px",
- "--dropdown-caretIconMarginBottom": "0px",
- "--dropdown-optionsFontColor": globalTokens.hal_black,
- "--dropdown-optionsFontSize": globalTokens.type_scale_03,
- "--dropdown-optionsFontStyle": globalTokens.type_normal,
- "--dropdown-optionsFontWeight": globalTokens.type_regular,
- "--dropdown-iconSize": "20px",
- "--dropdown-iconOptionSpacing": "12px",
- "--dropdown-iconColor": globalTokens.hal_black,
+ "--dropdown-scrollBarThumbColor": globalTokens.hal_grey_s_40,
+ "--dropdown-scrollBarTrackColor": globalTokens.lightGrey,
+ "--dropdown-focusColor": globalTokens.blue,
//FOOTER
+ "--footer-height": "124px",
"--footer-backgroundColor": globalTokens.hal_black,
- "--footer-fontColorBase": globalTokens.hal_white,
- "--footer-minHeight": "124px",
-
- "--footer-bottomLinksDividerColor": "#1489fb",
+ "--footer-bottomLinksDividerColor": globalTokens.hal_blue_l_50,
"--footer-bottomLinksDividerThickness": "1px",
"--footer-bottomLinksDividerStyle": "solid",
- "--footer-bottomLinksDividerSpacing": "6px",
- "--footer-bottomLinksFontFamily": "Open Sans, sans-serif",
- "--footer-bottomLinksFontSize": "0.75rem",
- "--footer-bottomLinksFontStyle": "normal",
- "--footer-bottomLinksFontWeight": "400",
- "--footer-bottomLinksFontColor": "",
- "--footer-bottomLinksTextDecoration": "none",
-
- "--footer-copyrightFontFamily": "Open Sans, sans-serif",
- "--footer-copyrightFontSize": "0.75rem",
- "--footer-copyrightFontStyle": "normal",
- "--footer-copyrightFontWeight": "400",
- "--footer-copyrightFontColor": "",
-
- "--footer-customContentFontFamily": "Open Sans, sans-serif",
- "--footer-customContentFontSize": "16px",
- "--footer-customContentFontStyle": "normal",
- "--footer-customContentFontWeight": "400",
- "--footer-customContentFontColor": "",
-
+ "--footer-bottomLinksDividerSpacing": "8px",
+ "--footer-bottomLinksFontFamily": globalTokens.type_sans,
+ "--footer-bottomLinksFontSize": globalTokens.type_scale_01,
+ "--footer-bottomLinksFontStyle": globalTokens.type_normal,
+ "--footer-bottomLinksFontWeight": globalTokens.type_regular,
+ "--footer-bottomLinksFontColor": globalTokens.hal_white,
+ "--footer-bottomLinksTextDecoration": globalTokens.type_no_line,
+ "--footer-copyrightFontFamily": globalTokens.type_sans,
+ "--footer-copyrightFontSize": globalTokens.type_scale_01,
+ "--footer-copyrightFontStyle": globalTokens.type_normal,
+ "--footer-copyrightFontWeight": globalTokens.type_regular,
+ "--footer-copyrightFontColor": globalTokens.hal_white,
"--footer-logo": "assets/dxc-logo-wh.svg",
"--footer-logoHeight": "32px",
"--footer-logoWidth": "auto",
-
- "--footer-socialIconSize": "24px",
- "--footer-socialIconsGutter": "16px",
+ "--footer-socialLinksSize": "24px",
+ "--footer-socialLinksGutter": "16px",
+ "--footer-socialLinksColor": globalTokens.hal_white,
//HEADER
"--header-backgroundColor": globalTokens.hal_white,
- "--header-customContentFontFamily": "",
- "--header-customContentFontStyle": globalTokens.type_normal,
- "--header-customContentFontColor": "",
- "--header-customContentFontSize": "",
- "--header-customContentFontWeight": globalTokens.type_regular,
- "--header-dropdownBackgroundColor": globalTokens.transparent,
- "--header-dropdownHoverBackgroundColor": globalTokens.transparent,
- "--header-fontColorBase": globalTokens.hal_black,
- "--header-fontFamilyBase": globalTokens.type_sans,
- "--header-fontSizeBase": globalTokens.type_scale_root,
"--header-hamburguerFocusColor": globalTokens.blue,
- "--header-hamburguerFontFamily": "",
+ "--header-hamburguerFontFamily": globalTokens.type_sans,
"--header-hamburguerFontStyle": globalTokens.type_normal,
- "--header-hamburguerFontColor": "",
+ "--header-hamburguerFontColor": globalTokens.hal_black,
"--header-hamburguerFontSize": "10px",
"--header-hamburguerFontWeight": globalTokens.type_semibold,
- "--header-hamburguerColor": globalTokens.hal_black,
+ "--header-hamburguerIconColor": globalTokens.hal_black,
"--header-hamburguerHoverColor": globalTokens.mediumGreyBlack,
"--header-hamburguerTextTransform": globalTokens.type_uppercase,
- "--header-logoHeight": "32px",
+ "--header-logoHeight": "40px",
"--header-logoWidth": "auto",
"--header-menuBackgroundColor": globalTokens.hal_white,
"--header-menuZindex": "2000",
"--header-menuTabletWidth": "60vw",
"--header-menuMobileWidth": "100vw",
- "--header-menuCustomContentFontFamily": "",
- "--header-menuCustomContentFontStyle": globalTokens.type_normal,
- "--header-menuCustomContentFontColor": "",
- "--header-menuCustomContentFontSize": "",
- "--header-menuCustomContentFontWeight": globalTokens.type_regular,
"--header-minHeight": "64px",
"--header-overlayColor": globalTokens.softBlack,
"--header-overlayOpacity": "0.7",
"--header-overlayZindex": "1600",
"--header-paddingTop": "0px",
"--header-paddingBottom": "0px",
- "--header-paddingRight": "0px",
- "--header-paddingLeft": "20px",
+ "--header-paddingRight": "24px",
+ "--header-paddingLeft": "24px",
"--header-underlinedColor": globalTokens.hal_black,
"--header-underlinedThickness": "2px",
"--header-underlinedStyle": "solid",
//HEADING
- "--heading-fontColorBase": globalTokens.inherit,
- "--heading-fontFamilyBase": globalTokens.type_sans,
- "--heading-level1FontColor": "",
- "--heading-level1FontFamily": "",
+ "--heading-level1FontColor": globalTokens.hal_black,
+ "--heading-level1FontFamily": globalTokens.type_sans,
"--heading-level1FontSize": globalTokens.type_scale_08,
"--heading-level1FontStyle": globalTokens.type_normal,
"--heading-level1FontWeight": globalTokens.type_regular,
"--heading-level1LineHeight": globalTokens.type_leading_compact_01,
"--heading-level1LetterSpacing": globalTokens.type_spacing_tight_01,
- "--heading-level2FontColor": "",
- "--heading-level2FontFamily": "",
+ "--heading-level2FontColor": globalTokens.hal_black,
+ "--heading-level2FontFamily": globalTokens.type_sans,
"--heading-level2FontSize": globalTokens.type_scale_07,
"--heading-level2FontStyle": globalTokens.type_normal,
"--heading-level2FontWeight": globalTokens.type_regular,
"--heading-level2LineHeight": globalTokens.type_leading_normal,
"--heading-level2LetterSpacing": globalTokens.type_spacing_normal,
- "--heading-level3FontColor": "",
- "--heading-level3FontFamily": "",
+ "--heading-level3FontColor": globalTokens.hal_black,
+ "--heading-level3FontFamily": globalTokens.type_sans,
"--heading-level3FontSize": globalTokens.type_scale_06,
"--heading-level3FontStyle": globalTokens.type_normal,
"--heading-level3FontWeight": globalTokens.type_regular,
"--heading-level3LineHeight": globalTokens.type_leading_compact_01,
"--heading-level3LetterSpacing": globalTokens.type_spacing_wide_01,
- "--heading-level4FontColor": "",
- "--heading-level4FontFamily": "",
+ "--heading-level4FontColor": globalTokens.hal_black,
+ "--heading-level4FontFamily": globalTokens.type_sans,
"--heading-level4FontSize": globalTokens.type_scale_05,
"--heading-level4FontStyle": globalTokens.type_normal,
"--heading-level4FontWeight": globalTokens.type_regular,
"--heading-level4LineHeight": globalTokens.type_scale_05,
"--heading-level4LetterSpacing": globalTokens.type_spacing_normal,
- "--heading-level5FontColor": "",
- "--heading-level5FontFamily": "",
+ "--heading-level5FontColor": globalTokens.hal_black,
+ "--heading-level5FontFamily": globalTokens.type_sans,
"--heading-level5FontSize": globalTokens.type_scale_04,
"--heading-level5FontStyle": globalTokens.type_normal,
"--heading-level5FontWeight": globalTokens.type_regular,
@@ -647,24 +579,44 @@ export const componentTokens = {
"--heading-level5LetterSpacing": globalTokens.type_spacing_wide_01,
//INPUT TEXT
- "--inputText-optionHoverBackgroundColor": globalTokens.lightGrey,
- "--inputText-scrollBarThumbColor": globalTokens.hal_grey_s_40,
- "--inputText-scrollBarTrackColor": globalTokens.lightGrey,
+ "--inputText-fontFamily": globalTokens.type_sans,
"--inputText-assistiveTextFontColor": globalTokens.hal_black,
"--inputText-assistiveTextFontColorOnDark": globalTokens.hal_white,
"--inputText-assistiveTextFontSize": globalTokens.type_scale_01,
"--inputText-assistiveTextFontStyle": globalTokens.type_normal,
"--inputText-assistiveTextFontWeight": globalTokens.type_regular,
- "--inputText-disabledFontColor": globalTokens.lighterBlack,
- "--inputText-disabledFontColorOnDark": "#575757",
+ "--inputText-disabledColor": globalTokens.lighterBlack,
+ "--inputText-disabledColorOnDark": "#575757",
"--inputText-errorColor": globalTokens.hal_red_s_41,
"--inputText-errorColorOnDark": globalTokens.hal_red_l_60,
- "--inputText-fontColorBase": globalTokens.hal_black,
- "--inputText-fontColorBaseOnDark": globalTokens.hal_white,
- "--inputText-fontFamilyBase": globalTokens.type_sans,
- "--inputText-fontSizeBase": globalTokens.type_scale_root,
+ "--inputText-optionBackgroundColor": globalTokens.hal_white,
+ "--inputText-optionBorderColor": globalTokens.hal_black,
+ "--inputText-optionBorderThickness": "0px",
+ "--inputText-optionBorderStyle": "solid",
+ "--inputText-optionFontColor": globalTokens.hal_black,
+ "--inputText-optionFontColorOnDark": globalTokens.hal_white,
+ "--inputText-optionFontSize": globalTokens.type_scale_03,
+ "--inputText-optionFontStyle": globalTokens.type_normal,
+ "--inputText-optionFontWeight": globalTokens.type_regular,
+ "--inputText-optionPaddingBottom": "6px",
+ "--inputText-optionPaddingTop": "6px",
"--inputText-hoverOptionColor": globalTokens.hal_black,
+ "--inputText-hoverOptionBackgroundColor": globalTokens.lightGrey,
+ "--inputText-hoverOptionBackgroundColorOnDark": globalTokens.hal_grey_l_75,
+ "--inputText-scrollBarThumbColor": globalTokens.hal_grey_s_40,
+ "--inputText-scrollBarTrackColor": globalTokens.lightGrey,
+ "--inputText-selectedOptionBackgroundColor": globalTokens.lightGrey,
+ "--inputText-selectedOptionBackgroundColorOnDark": globalTokens.lightGrey,
+ "--inputText-labelFontColor": globalTokens.hal_black,
+ "--inputText-labelFontColorOnDark": globalTokens.hal_white,
"--inputText-labelFontSize": globalTokens.type_scale_03,
+ "--inputText-labelFontStyle": globalTokens.type_normal,
+ "--inputText-labelFontWeight": globalTokens.type_regular,
+ "--inputText-valueFontColor": globalTokens.hal_black,
+ "--inputText-valueFontColorOnDark": globalTokens.hal_white,
+ "--inputText-valueFontSize": globalTokens.type_scale_03,
+ "--inputText-valueFontStyle": globalTokens.type_normal,
+ "--inputText-valueFontWeight": globalTokens.type_regular,
"--inputText-prefixIconColor": globalTokens.hal_black,
"--inputText-prefixIconColorOnDark": globalTokens.hal_white,
"--inputText-prefixLabelFontColor": globalTokens.hal_black,
@@ -684,165 +636,164 @@ export const componentTokens = {
"--inputText-underlineFocusColor": globalTokens.hal_black,
"--inputText-underlineFocusColorOnDark": globalTokens.hal_white,
"--inputText-underlineThickness": "1px",
- "--inputText-optionActiveBackgroundColor": "#D9D9D9",
- "--inputText-optionFocusColor": "#005FCC",
// NEW INPUT TEXT
- "--input-disabledBorderColor": globalTokens.hal_grey_l_60,
- "--input-disabledBorderColorOnDark": globalTokens.hal_grey_l_60,
- "--input-disabledContainerFillColor": globalTokens.hal_grey_l_95,
- "--input-disabledContainerFillColorOnDark": globalTokens.hal_grey_s_40,
- "--input-disabledLabelFontColor": globalTokens.hal_grey_l_60,
- "--input-disabledLabelFontColorOnDark": globalTokens.hal_grey_l_60,
- "--input-disabledValueFontColor": globalTokens.hal_grey_l_60,
- "--input-disabledValueFontColorOnDark": globalTokens.hal_grey_l_60,
- "--input-disabledSuffixColor": globalTokens.hal_grey_l_75,
- "--input-disabledSuffixColorOnDark": globalTokens.hal_grey_s_40,
- "--input-disabledHelperTextFontColor": globalTokens.hal_grey_l_60,
- "--input-disabledHelperTextFontColorOnDark": globalTokens.hal_grey_l_60,
- "--input-disabledPlaceholderFontColor": globalTokens.hal_grey_l_60,
- "--input-disabledPlaceholderFontColorOnDark": globalTokens.hal_grey_l_60,
- "--input-disabledPrefixColor": globalTokens.hal_grey_l_75,
- "--input-disabledPrefixColorOnDark": globalTokens.hal_grey_s_40,
- "--input-disabledActionIconColor": globalTokens.hal_grey_l_60,
- "--input-disabledActionIconColorOnDark": globalTokens.hal_grey_s_40,
- "--input-disabledActionBackgroundColor": globalTokens.transparent,
- "--input-disabledActionBackgroundColorOnDark": globalTokens.transparent,
- "--input-hoverActionIconColor": globalTokens.hal_black,
- "--input-hoverActionIconColorOnDark": globalTokens.hal_white,
- "--input-focusActionIconColor": globalTokens.hal_black,
- "--input-focusActionIconColorOnDark": globalTokens.hal_white,
- "--input-activeActionIconColor": globalTokens.hal_black,
- "--input-activeActionIconColorOnDark": globalTokens.hal_black,
- "--input-fontFamily": globalTokens.type_sans,
- "--input-labelFontColor": globalTokens.hal_black,
- "--input-labelFontColorOnDark": globalTokens.hal_white,
- "--input-labelFontSize": globalTokens.type_scale_02,
- "--input-labelFontStyle": globalTokens.type_normal,
- "--input-labelFontWeight": globalTokens.type_semibold,
- "--input-optionalLabelFontWeight": globalTokens.type_regular,
- "--input-helperTextFontColor": globalTokens.hal_black,
- "--input-helperTextFontColorOnDark": globalTokens.hal_white,
- "--input-helperTextFontSize": globalTokens.type_scale_01,
- "--input-helperTextFontStyle": globalTokens.type_normal,
- "--input-helperTextFontWeight": globalTokens.type_regular,
- "--input-enabledBorderColor": globalTokens.hal_black,
- "--input-enabledBorderColorOnDark": globalTokens.hal_white,
- "--input-hoverBorderColor": globalTokens.hal_purple_l_65,
- "--input-hoverBorderColorOnDark": globalTokens.hal_purple_l_65,
- "--input-focusBorderColor": globalTokens.hal_blue_l_50,
- "--input-focusBorderColorOnDark": globalTokens.hal_blue_l_50,
- "--input-placeholderFontColor": globalTokens.color_grey_600,
- "--input-placeholderFontColorOnDark": globalTokens.hal_grey_l_95,
- "--input-valueFontColor": globalTokens.hal_black,
- "--input-valueFontColorOnDark": globalTokens.hal_white,
- "--input-valueFontSize": globalTokens.type_scale_03,
- "--input-valueFontStyle": globalTokens.type_normal,
- "--input-valueFontWeight": globalTokens.type_regular,
- "--input-actionIconColor": globalTokens.hal_black,
- "--input-actionIconColorOnDark": globalTokens.hal_white,
- "--input-actionBackgroundColor": globalTokens.transparent,
- "--input-actionBackgroundColorOnDark": globalTokens.transparent,
- "--input-hoverActionBackgroundColor": globalTokens.hal_grey_l_95,
- "--input-focusActionBorderColor": globalTokens.hal_blue_l_50,
- "--input-activeActionBackgroundColor": globalTokens.hal_grey_l_80,
- "--input-hoverActionBackgroundColorOnDark": globalTokens.hal_grey_s_40,
- "--input-focusActionBorderColorOnDark": globalTokens.hal_blue_l_50,
- "--input-activeActionBackgroundColorOnDark": globalTokens.hal_grey_l_60,
- "--input-prefixColor": globalTokens.hal_grey_s_40,
- "--input-prefixColorOnDark": globalTokens.hal_white,
- "--input-prefixFontSize": globalTokens.type_scale_03,
- "--input-prefixFontStyle": globalTokens.type_normal,
- "--input-prefixFontWeight": globalTokens.type_regular,
- "--input-suffixColor": globalTokens.hal_grey_s_40,
- "--input-suffixColorOnDark": globalTokens.hal_white,
- "--input-suffixFontSize": globalTokens.type_scale_03,
- "--input-suffixFontStyle": globalTokens.type_normal,
- "--input-suffixFontWeight": globalTokens.type_regular,
- "--input-errorBorderColor": globalTokens.hal_red_s_41,
- "--input-errorBorderColorOnDark": globalTokens.hal_red_l_60,
- "--input-errorMessageColor": globalTokens.hal_red_s_41,
- "--input-errorMessageColorOnDark": globalTokens.hal_red_l_60,
- "--input-errorIconColor": globalTokens.hal_red_s_41,
- "--input-errorIconColorOnDark": globalTokens.hal_red_l_60,
- "--input-hoverErrorBorderColor": globalTokens.color_red_600,
- "--input-hoverErrorBorderColorOnDark": globalTokens.color_red_400,
- "--input-errorFontSize": globalTokens.type_scale_01,
- "--input-errorFontStyle": globalTokens.type_normal,
- "--input-errorFontWeight": globalTokens.type_regular,
- "--input-listOptionFontColor": globalTokens.hal_black,
- "--input-listOptionFontFamily": globalTokens.type_sans,
- "--input-listOptionFontSize": globalTokens.type_scale_03,
- "--input-listOptionFontWeight": globalTokens.type_regular,
- "--input-listOptionTypedFontWeight": globalTokens.type_bold,
- "--input-systemMessageFontColor": globalTokens.hal_grey_s_40,
- "--input-systemMessageFontFamily": globalTokens.type_sans,
- "--input-systemMessageFontSize": globalTokens.type_scale_02,
- "--input-systemMessageFontWeight": globalTokens.type_regular,
- "--input-errorMessageFontFamily": globalTokens.type_sans,
- "--input-errorMessageFontSize": globalTokens.type_scale_01,
- "--input-errorMessageFontWeight": globalTokens.type_regular,
- "--input-errorMessageBorderColor": globalTokens.hal_red_s_41,
- "--input-errorMessageBackgroundColor": globalTokens.hal_red_l_95,
- "--input-hoverListOptionBackgroundColor": globalTokens.hal_grey_l_95,
- "--input-activeListOptionBackgroundColor": globalTokens.hal_grey_l_80,
-
- // NEW TEXTAREA
- "--newTextarea-disabledBorderColor": globalTokens.color_grey_600,
- "--newTextarea-disabledBorderColorOnDark": globalTokens.hal_grey_l_60,
- "--newTextarea-disabledContainerFillColor": globalTokens.hal_grey_l_95,
- "--newTextarea-disabledContainerFillColorOnDark": globalTokens.hal_grey_s_40,
- "--newTextarea-disabledLabelFontColor": globalTokens.hal_grey_l_60,
- "--newTextarea-disabledLabelFontColorOnDark": globalTokens.hal_grey_l_60,
- "--newTextarea-disabledValueFontColor": globalTokens.hal_grey_l_60,
- "--newTextarea-disabledValueFontColorOnDark": globalTokens.hal_grey_l_60,
- "--newTextarea-disabledHelperTextFontColor": globalTokens.hal_grey_l_60,
- "--newTextarea-disabledHelperTextFontColorOnDark": globalTokens.hal_grey_l_60,
- "--newTextarea-disabledPlaceholderFontColor": globalTokens.hal_grey_l_60,
- "--newTextarea-disabledPlaceholderFontColorOnDark": globalTokens.hal_grey_l_60,
- "--newTextarea-fontFamily": globalTokens.type_sans,
- "--newTextarea-labelFontColor": globalTokens.hal_black,
- "--newTextarea-labelFontColorOnDark": globalTokens.hal_white,
- "--newTextarea-labelFontSize": globalTokens.type_scale_02,
- "--newTextarea-labelFontStyle": globalTokens.type_normal,
- "--newTextarea-labelFontWeight": globalTokens.type_semibold,
- "--newTextarea-optionalLabelFontWeight": globalTokens.type_regular,
- "--newTextarea-helperTextFontColor": globalTokens.hal_black,
- "--newTextarea-helperTextFontColorOnDark": globalTokens.hal_white,
- "--newTextarea-helperTextFontSize": globalTokens.type_scale_01,
- "--newTextarea-helperTextFontStyle": globalTokens.type_normal,
- "--newTextarea-helperTextFontWeight": globalTokens.type_regular,
- "--newTextarea-enabledBorderColor": globalTokens.hal_black,
- "--newTextarea-enabledBorderColorOnDark": globalTokens.hal_white,
- "--newTextarea-hoverBorderColor": globalTokens.hal_purple_l_65,
- "--newTextarea-hoverBorderColorOnDark": globalTokens.hal_purple_l_65,
- "--newTextarea-focusBorderColor": globalTokens.hal_blue_l_50,
- "--newTextarea-focusBorderColorOnDark": globalTokens.hal_blue_l_50,
- "--newTextarea-placeholderFontColor": globalTokens.color_grey_600,
- "--newTextarea-placeholderFontColorOnDark": globalTokens.hal_grey_l_95,
- "--newTextarea-valueFontColor": globalTokens.hal_black,
- "--newTextarea-valueFontColorOnDark": globalTokens.hal_white,
- "--newTextarea-valueFontSize": globalTokens.type_scale_03,
- "--newTextarea-valueFontStyle": globalTokens.type_normal,
- "--newTextarea-valueFontWeight": globalTokens.type_regular,
- "--newTextarea-errorBorderColor": globalTokens.hal_red_s_41,
- "--newTextarea-errorBorderColorOnDark": globalTokens.hal_red_l_60,
- "--newTextarea-errorMessageColor": globalTokens.hal_red_s_41,
- "--newTextarea-errorMessageColorOnDark": globalTokens.hal_red_l_60,
- "--newTextarea-hoverErrorBorderColor": globalTokens.color_red_600,
- "--newTextarea-hoverErrorBorderColorOnDark": globalTokens.color_red_400,
- "--newTextarea-errorFontSize": globalTokens.type_scale_01,
- "--newTextarea-errorFontStyle": globalTokens.type_normal,
- "--newTextarea-errorFontWeight": globalTokens.type_regular,
- "--newTextarea-systemMessageFontColor": globalTokens.hal_grey_s_40,
- "--newTextarea-systemMessageFontFamily": globalTokens.type_sans,
- "--newTextarea-systemMessageFontSize": globalTokens.type_scale_02,
- "--newTextarea-systemMessageFontWeight": globalTokens.type_regular,
- "--newTextarea-errorMessageFontFamily": globalTokens.type_sans,
- "--newTextarea-errorMessageFontSize": globalTokens.type_scale_02,
- "--newTextarea-errorMessageFontWeight": globalTokens.type_regular,
- "--newTextarea-errorMessageBorderColor": globalTokens.hal_red_s_41,
- "--newTextarea-errorMessageBackgroundColor": globalTokens.hal_red_l_95,
+ "--newInputText-disabledBorderColor": globalTokens.hal_grey_l_60,
+ "--newInputText-disabledBorderColorOnDark": globalTokens.hal_grey_l_60,
+ "--newInputText-disabledContainerFillColor": globalTokens.hal_grey_l_95,
+ "--newInputText-disabledContainerFillColorOnDark": globalTokens.hal_grey_s_40,
+ "--newInputText-disabledLabelFontColor": globalTokens.hal_grey_l_60,
+ "--newInputText-disabledLabelFontColorOnDark": globalTokens.hal_grey_l_60,
+ "--newInputText-disabledValueFontColor": globalTokens.hal_grey_l_60,
+ "--newInputText-disabledValueFontColorOnDark": globalTokens.hal_grey_l_60,
+ "--newInputText-disabledSuffixColor": globalTokens.hal_grey_l_75,
+ "--newInputText-disabledSuffixColorOnDark": globalTokens.hal_grey_s_40,
+ "--newInputText-disabledHelperTextFontColor": globalTokens.hal_grey_l_60,
+ "--newInputText-disabledHelperTextFontColorOnDark": globalTokens.hal_grey_l_60,
+ "--newInputText-disabledPlaceholderFontColor": globalTokens.hal_grey_l_60,
+ "--newInputText-disabledPlaceholderFontColorOnDark": globalTokens.hal_grey_l_60,
+ "--newInputText-disabledPrefixColor": globalTokens.hal_grey_l_75,
+ "--newInputText-disabledPrefixColorOnDark": globalTokens.hal_grey_s_40,
+ "--newInputText-disabledActionIconColor": globalTokens.hal_grey_l_60,
+ "--newInputText-disabledActionIconColorOnDark": globalTokens.hal_grey_s_40,
+ "--newInputText-disabledActionBackgroundColor": globalTokens.transparent,
+ "--newInputText-disabledActionBackgroundColorOnDark": globalTokens.transparent,
+ "--newInputText-hoverActionIconColor": globalTokens.hal_black,
+ "--newInputText-hoverActionIconColorOnDark": globalTokens.hal_white,
+ "--newInputText-focusActionIconColor": globalTokens.hal_black,
+ "--newInputText-focusActionIconColorOnDark": globalTokens.hal_white,
+ "--newInputText-activeActionIconColor": globalTokens.hal_black,
+ "--newInputText-activeActionIconColorOnDark": globalTokens.hal_black,
+ "--newInputText-fontFamily": globalTokens.type_sans,
+ "--newInputText-labelFontColor": globalTokens.hal_black,
+ "--newInputText-labelFontColorOnDark": globalTokens.hal_white,
+ "--newInputText-labelFontSize": globalTokens.type_scale_02,
+ "--newInputText-labelFontStyle": globalTokens.type_normal,
+ "--newInputText-labelFontWeight": globalTokens.type_semibold,
+ "--newInputText-optionalLabelFontWeight": globalTokens.type_regular,
+ "--newInputText-helperTextFontColor": globalTokens.hal_black,
+ "--newInputText-helperTextFontColorOnDark": globalTokens.hal_white,
+ "--newInputText-helperTextFontSize": globalTokens.type_scale_01,
+ "--newInputText-helperTextFontStyle": globalTokens.type_normal,
+ "--newInputText-helperTextFontWeight": globalTokens.type_regular,
+ "--newInputText-enabledBorderColor": globalTokens.hal_black,
+ "--newInputText-enabledBorderColorOnDark": globalTokens.hal_white,
+ "--newInputText-hoverBorderColor": globalTokens.hal_purple_l_65,
+ "--newInputText-hoverBorderColorOnDark": globalTokens.hal_purple_l_65,
+ "--newInputText-focusBorderColor": globalTokens.hal_blue_l_50,
+ "--newInputText-focusBorderColorOnDark": globalTokens.hal_blue_l_50,
+ "--newInputText-placeholderFontColor": globalTokens.color_grey_600,
+ "--newInputText-placeholderFontColorOnDark": globalTokens.hal_grey_l_95,
+ "--newInputText-valueFontColor": globalTokens.hal_black,
+ "--newInputText-valueFontColorOnDark": globalTokens.hal_white,
+ "--newInputText-valueFontSize": globalTokens.type_scale_03,
+ "--newInputText-valueFontStyle": globalTokens.type_normal,
+ "--newInputText-valueFontWeight": globalTokens.type_regular,
+ "--newInputText-actionIconColor": globalTokens.hal_black,
+ "--newInputText-actionIconColorOnDark": globalTokens.hal_white,
+ "--newInputText-actionBackgroundColor": globalTokens.transparent,
+ "--newInputText-actionBackgroundColorOnDark": globalTokens.transparent,
+ "--newInputText-hoverActionBackgroundColor": globalTokens.hal_grey_l_95,
+ "--newInputText-focusActionBorderColor": globalTokens.hal_blue_l_50,
+ "--newInputText-activeActionBackgroundColor": globalTokens.hal_grey_l_80,
+ "--newInputText-hoverActionBackgroundColorOnDark": globalTokens.hal_grey_s_40,
+ "--newInputText-focusActionBorderColorOnDark": globalTokens.hal_blue_l_50,
+ "--newInputText-activeActionBackgroundColorOnDark": globalTokens.hal_grey_l_60,
+ "--newInputText-prefixColor": globalTokens.hal_grey_s_40,
+ "--newInputText-prefixColorOnDark": globalTokens.hal_white,
+ "--newInputText-prefixFontSize": globalTokens.type_scale_03,
+ "--newInputText-prefixFontStyle": globalTokens.type_normal,
+ "--newInputText-prefixFontWeight": globalTokens.type_regular,
+ "--newInputText-suffixColor": globalTokens.hal_grey_s_40,
+ "--newInputText-suffixColorOnDark": globalTokens.hal_white,
+ "--newInputText-suffixFontSize": globalTokens.type_scale_03,
+ "--newInputText-suffixFontStyle": globalTokens.type_normal,
+ "--newInputText-suffixFontWeight": globalTokens.type_regular,
+ "--newInputText-errorBorderColor": globalTokens.hal_red_s_41,
+ "--newInputText-errorBorderColorOnDark": globalTokens.hal_red_l_60,
+ "--newInputText-errorMessageColor": globalTokens.hal_red_s_41,
+ "--newInputText-errorMessageColorOnDark": globalTokens.hal_red_l_60,
+ "--newInputText-errorIconColor": globalTokens.hal_red_s_41,
+ "--newInputText-errorIconColorOnDark": globalTokens.hal_red_l_60,
+ "--newInputText-hoverErrorBorderColor": globalTokens.color_red_600,
+ "--newInputText-hoverErrorBorderColorOnDark": globalTokens.color_red_400,
+ "--newInputText-errorFontSize": globalTokens.type_scale_01,
+ "--newInputText-errorFontStyle": globalTokens.type_normal,
+ "--newInputText-errorFontWeight": globalTokens.type_regular,
+ "--newInputText-listOptionFontColor": globalTokens.hal_black,
+ "--newInputText-listOptionFontFamily": globalTokens.type_sans,
+ "--newInputText-listOptionFontSize": globalTokens.type_scale_03,
+ "--newInputText-listOptionFontWeight": globalTokens.type_regular,
+ "--newInputText-listOptionTypedFontWeight": globalTokens.type_bold,
+ "--newInputText-systemMessageFontColor": globalTokens.hal_grey_s_40,
+ "--newInputText-systemMessageFontFamily": globalTokens.type_sans,
+ "--newInputText-systemMessageFontSize": globalTokens.type_scale_02,
+ "--newInputText-systemMessageFontWeight": globalTokens.type_regular,
+ "--newInputText-errorMessageFontFamily": globalTokens.type_sans,
+ "--newInputText-errorMessageFontSize": globalTokens.type_scale_01,
+ "--newInputText-errorMessageFontWeight": globalTokens.type_regular,
+ "--newInputText-errorMessageBorderColor": globalTokens.hal_red_s_41,
+ "--newInputText-errorMessageBackgroundColor": globalTokens.hal_red_l_95,
+ "--newInputText-hoverListOptionBackgroundColor": globalTokens.hal_grey_l_95,
+ "--newInputText-activeListOptionBackgroundColor": globalTokens.hal_grey_l_80,
+
+ // NEW TEXTAREA
+ "--newTextarea-disabledBorderColor": globalTokens.color_grey_600,
+ "--newTextarea-disabledBorderColorOnDark": globalTokens.hal_grey_l_60,
+ "--newTextarea-disabledContainerFillColor": globalTokens.hal_grey_l_95,
+ "--newTextarea-disabledContainerFillColorOnDark": globalTokens.hal_grey_s_40,
+ "--newTextarea-disabledLabelFontColor": globalTokens.hal_grey_l_60,
+ "--newTextarea-disabledLabelFontColorOnDark": globalTokens.hal_grey_l_60,
+ "--newTextarea-disabledValueFontColor": globalTokens.hal_grey_l_60,
+ "--newTextarea-disabledValueFontColorOnDark": globalTokens.hal_grey_l_60,
+ "--newTextarea-disabledHelperTextFontColor": globalTokens.hal_grey_l_60,
+ "--newTextarea-disabledHelperTextFontColorOnDark": globalTokens.hal_grey_l_60,
+ "--newTextarea-disabledPlaceholderFontColor": globalTokens.hal_grey_l_60,
+ "--newTextarea-disabledPlaceholderFontColorOnDark":
+ globalTokens.hal_grey_l_60,
+ "--newTextarea-fontFamily": globalTokens.type_sans,
+ "--newTextarea-labelFontColor": globalTokens.hal_black,
+ "--newTextarea-labelFontColorOnDark": globalTokens.hal_white,
+ "--newTextarea-labelFontSize": globalTokens.type_scale_02,
+ "--newTextarea-labelFontStyle": globalTokens.type_normal,
+ "--newTextarea-labelFontWeight": globalTokens.type_semibold,
+ "--newTextarea-optionalLabelFontWeight": globalTokens.type_regular,
+ "--newTextarea-helperTextFontColor": globalTokens.hal_black,
+ "--newTextarea-helperTextFontColorOnDark": globalTokens.hal_white,
+ "--newTextarea-helperTextFontSize": globalTokens.type_scale_01,
+ "--newTextarea-helperTextFontStyle": globalTokens.type_normal,
+ "--newTextarea-helperTextFontWeight": globalTokens.type_regular,
+ "--newTextarea-enabledBorderColor": globalTokens.hal_black,
+ "--newTextarea-enabledBorderColorOnDark": globalTokens.hal_white,
+ "--newTextarea-hoverBorderColor": globalTokens.hal_purple_l_65,
+ "--newTextarea-hoverBorderColorOnDark": globalTokens.hal_purple_l_65,
+ "--newTextarea-focusBorderColor": globalTokens.hal_blue_l_50,
+ "--newTextarea-focusBorderColorOnDark": globalTokens.hal_blue_l_50,
+ "--newTextarea-placeholderFontColor": globalTokens.color_grey_600,
+ "--newTextarea-placeholderFontColorOnDark": globalTokens.hal_grey_l_95,
+ "--newTextarea-valueFontColor": globalTokens.hal_black,
+ "--newTextarea-valueFontColorOnDark": globalTokens.hal_white,
+ "--newTextarea-valueFontSize": globalTokens.type_scale_03,
+ "--newTextarea-valueFontStyle": globalTokens.type_normal,
+ "--newTextarea-valueFontWeight": globalTokens.type_regular,
+ "--newTextarea-errorBorderColor": globalTokens.hal_red_s_41,
+ "--newTextarea-errorBorderColorOnDark": globalTokens.hal_red_l_60,
+ "--newTextarea-errorMessageColor": globalTokens.hal_red_s_41,
+ "--newTextarea-errorMessageColorOnDark": globalTokens.hal_red_l_60,
+ "--newTextarea-hoverErrorBorderColor": globalTokens.color_red_600,
+ "--newTextarea-hoverErrorBorderColorOnDark": globalTokens.color_red_400,
+ "--newTextarea-errorFontSize": globalTokens.type_scale_01,
+ "--newTextarea-errorFontStyle": globalTokens.type_normal,
+ "--newTextarea-errorFontWeight": globalTokens.type_regular,
+ "--newTextarea-systemMessageFontColor": globalTokens.hal_grey_s_40,
+ "--newTextarea-systemMessageFontFamily": globalTokens.type_sans,
+ "--newTextarea-systemMessageFontSize": globalTokens.type_scale_02,
+ "--newTextarea-systemMessageFontWeight": globalTokens.type_regular,
+ "--newTextarea-errorMessageFontFamily": globalTokens.type_sans,
+ "--newTextarea-errorMessageFontSize": globalTokens.type_scale_02,
+ "--newTextarea-errorMessageFontWeight": globalTokens.type_regular,
+ "--newTextarea-errorMessageBorderColor": globalTokens.hal_red_s_41,
+ "--newTextarea-errorMessageBackgroundColor": globalTokens.hal_red_l_95,
//LINK
"--link-fontColor": globalTokens.blue,
@@ -855,7 +806,7 @@ export const componentTokens = {
"--link-fontStyle": globalTokens.type_normal,
"--link-fontWeight": globalTokens.type_regular,
"--link-iconSize": "16px",
- "--link-iconGutter": "4px",
+ "--link-iconSpacing": "4px",
"--link-underlineSpacing": "1px",
"--link-underlineStyle": "solid",
"--link-underlineThickness": "1px",
@@ -872,6 +823,7 @@ export const componentTokens = {
"--paginator-fontSize": globalTokens.type_scale_02,
"--paginator-fontStyle": globalTokens.type_normal,
"--paginator-fontWeight": globalTokens.type_regular,
+ "--paginator-fontTextTransform": "none",
"--paginator-height": "64px",
"--paginator-width": "100%",
"--paginator-marginRight": "40px",
@@ -884,23 +836,32 @@ export const componentTokens = {
"--paginator-totalItemsContainerMarginLeft": "0px",
//PROGRESSBAR
- "--progressBar-trackLineColor": globalTokens.purple,
+ "--progressBar-trackLineColor": globalTokens.hal_purple_s_38,
+ "--progressBar-trackLineColorOnDark": globalTokens.hal_purple_l_65,
"--progressBar-totalLineColor": globalTokens.softGrey,
- "--progressBar-overlayColor": globalTokens.hal_black,
"--progressBar-labelFontFamily": globalTokens.type_sans,
"--progressBar-labelFontSize": globalTokens.type_scale_01,
"--progressBar-labelFontStyle": globalTokens.type_normal,
"--progressBar-labelFontWeight": globalTokens.type_regular,
"--progressBar-labelFontColor": globalTokens.hal_black,
+ "--progressBar-labelFontColorOnDark": globalTokens.hal_white,
"--progressBar-labelFontTextTransform": globalTokens.type_uppercase,
"--progressBar-valueFontFamily": globalTokens.type_sans,
"--progressBar-valueFontSize": globalTokens.type_scale_01,
"--progressBar-valueFontStyle": globalTokens.type_normal,
"--progressBar-valueFontWeight": globalTokens.type_regular,
"--progressBar-valueFontColor": globalTokens.hal_black,
+ "--progressBar-valueFontColorOnDark": globalTokens.hal_white,
"--progressBar-valueFontTextTransform": globalTokens.type_uppercase,
+ "--progressBar-helperTextFontColor": globalTokens.hal_black,
+ "--progressBar-helperTextFontColorOnDark": globalTokens.hal_white,
+ "--progressBar-helperTextFontSize": globalTokens.type_scale_01,
+ "--progressBar-helperTextFontStyle": globalTokens.type_normal,
+ "--progressBar-helperTextFontWeight": globalTokens.type_regular,
+ "--progressBar-helperTextFontFamily": globalTokens.type_sans,
"--progressBar-thickness": "9px",
"--progressBar-borderRadius": "5px",
+ "--progressBar-overlayColor": globalTokens.hal_black,
"--progressBar-overlayOpacity": "0.8",
//RADIO
@@ -909,7 +870,7 @@ export const componentTokens = {
"--radio-fontColor": globalTokens.hal_black,
"--radio-disabledFontColor": globalTokens.lighterBlack,
"--radio-focusColor": globalTokens.blue,
- "--radio-circleLabelSpacing": "12px",
+ "--radio-circleLabelSpacing": "8px",
"--radio-circleSize": "20px",
"--radio-colorOnDark": globalTokens.hal_white,
"--radio-disabledColorOnDark": "#575757",
@@ -922,66 +883,65 @@ export const componentTokens = {
"--radio-fontWeight": globalTokens.type_regular,
//SELECT
-
"--select-fontFamily": "Open Sans, sans-serif",
-
"--select-labelFontSize": globalTokens.type_scale_03,
"--select-labelFontStyle": "normal",
- "--select-labelFontWeight": "400",
-
+ "--select-labelFontWeight": globalTokens.type_regular,
+ "--select-labelFontColor": globalTokens.hal_black,
+ "--select-labelFontColorOnDark": globalTokens.hal_white,
"--select-assistiveTextFontColor": globalTokens.hal_black,
"--select-assistiveTextFontColorOnDark": globalTokens.hal_white,
"--select-assistiveTextFontSize": globalTokens.type_scale_01,
"--select-assistiveTextFontStyle": globalTokens.type_normal,
"--select-assistiveTextFontWeight": globalTokens.type_regular,
-
- "--select-optionsBackgroundColor": globalTokens.hal_white,
- "--select-optionsBorderColor": globalTokens.type_no_line,
- "--select-optionsBorderThickness": "0px",
- "--select-optionsBorderStyle": "solid",
- "--select-optionsFontColor": "",
- "--select-optionsFontSize": globalTokens.type_scale_root,
- "--select-optionsFontStyle": globalTokens.type_normal,
- "--select-optionsFontWeight": globalTokens.type_regular,
-
- "--select-iconOptionSpacing": "12px",
- "--select-iconColor": "",
- "--select-iconSize": "20px",
+ "--select-optionBackgroundColor": globalTokens.hal_white,
+ "--select-optionBorderColor": globalTokens.type_no_line,
+ "--select-optionBorderThickness": "0px",
+ "--select-optionBorderStyle": globalTokens.border_solid,
+ "--select-optionFontColor": globalTokens.hal_black,
+ "--select-optionFontColorOnDark": globalTokens.hal_white,
+ "--select-optionFontSize": globalTokens.type_scale_root,
+ "--select-optionFontStyle": globalTokens.type_normal,
+ "--select-optionFontWeight": globalTokens.type_regular,
+ "--select-optionIconSpacing": "12px",
+ "--select-optionIconColor": globalTokens.hal_black,
+ "--select-optionIconColorOnDark": globalTokens.hal_white, //añadir
+ "--select-optionIconSize": "20px",
"--select-selectedOptionBackgroundColor": globalTokens.lightGrey,
"--select-selectedOptionBackgroundColorOnDark": globalTokens.lightGrey,
- "--select-hoveredOptionBackgroundColor": globalTokens.hal_grey_l_95,
- "--select-hoveredOptionBackgroundColorOnDark": globalTokens.hal_grey_l_95,
+ "--select-hoverOptionBackgroundColor": globalTokens.hal_grey_l_95,
+ "--select-hoverOptionBackgroundColorOnDark": globalTokens.hal_grey_l_95,
"--select-optionPaddingBottom": "6px",
"--select-optionPaddingTop": "6px",
"--select-optionPaddingLeft": "16px",
"--select-optionPaddingRight": "16px",
- "--select-checkboxOptionSpacing": "12px",
-
- "--select-color": globalTokens.hal_black,
- "--select-colorOnDark": globalTokens.hal_white,
+ "--select-optionCheckboxSpacing": "12px",
"--select-errorColor": globalTokens.hal_red_s_41,
"--select-errorColorOnDark": globalTokens.hal_red_l_60,
-
"--select-required": globalTokens.hal_red_s_41,
-
"--select-focusColor": globalTokens.blue,
- "--select-focusColorOnDark": globalTokens.blue,
-
+ "--select-focusColorOnDark": "#1682FF",
"--select-disabledColor": globalTokens.lighterBlack,
"--select-disabledColorOnDark": "#575757",
-
"--select-scrollBarThumbColor": globalTokens.hal_grey_s_40,
"--select-scrollBarTrackColor": globalTokens.lightGrey,
+ "--select-underlineColor": globalTokens.hal_black,
+ "--select-underlineColorOnDark": globalTokens.hal_white,
+ "--select-underlineFocusColor": globalTokens.hal_black,
+ "--select-underlineFocusColorOnDark": globalTokens.hal_white,
+ "--select-underlineThickness": "1px",
+ "--select-valueFontColor": globalTokens.hal_black,
+ "--select-valueFontColorOnDark": globalTokens.hal_white,
+ "--select-valueFontSize": globalTokens.type_scale_03,
+ "--select-valueFontStyle": globalTokens.type_normal,
+ "--select-valueFontWeight": globalTokens.type_regular,
+ "--select-arrowColor": globalTokens.hal_black,
+ "--select-arrowColorOnDark": globalTokens.hal_white,
//SIDENAV
"--sidenav-backgroundColor": globalTokens.lighterGrey,
"--sidenav-arrowContainerColor": globalTokens.lightGrey,
"--sidenav-arrowColor": globalTokens.hal_black,
- "--sidenav-customContentFontFamily": globalTokens.type_sans,
- "--sidenav-customContentFontSize": "16px",
- "--sidenav-customContentFontStyle": globalTokens.type_normal,
- "--sidenav-customContentFontWeight": globalTokens.type_regular,
- "--sidenav-customContentFontColor": globalTokens.hal_black,
"--sidenav-titleFontFamily": globalTokens.type_sans,
"--sidenav-titleFontSize": globalTokens.type_scale_05,
"--sidenav-titleFontStyle": globalTokens.type_normal,
@@ -1025,11 +985,15 @@ export const componentTokens = {
"--slider-thumbBackgroundColor": globalTokens.hal_blue_s_35,
"--slider-thumbBackgroundColorOnDark": globalTokens.hal_blue_l_50,
"--slider-activeThumbBackgroundColor": globalTokens.hal_blue_d_20,
- "--slider-activeThumbBackgroundColorOnDark": globalTokens.hal_blue_s_35,
- "--slider-dotsSize": "4px",
- "--slider-dotsVerticalPosition": "-1px",
- "--slider-tickMarkBackgroundColor": globalTokens.hal_blue_s_35,
- "--slider-tickMarkBackgroundColorOnDark": globalTokens.hal_blue_l_50,
+ "--slider-activeThumbBackgroundColorOnDark": globalTokens.hal_blue_d_20,
+ "--slider-hoverThumbBackgroundColor": globalTokens.hal_blue_d_20,
+ "--slider-hoverThumbBackgroundColorOnDark": globalTokens.hal_blue_d_20,
+ "--slider-focusThumbBackgroundColor": globalTokens.hal_blue_s_35,
+ "--slider-focusThumbBackgroundColorOnDark": globalTokens.hal_blue_l_50,
+ "--slider-tickSize": "4px",
+ "--slider-tickVerticalPosition": "-1px",
+ "--slider-tickBackgroundColor": globalTokens.hal_blue_s_35,
+ "--slider-tickBackgroundColorOnDark": globalTokens.hal_blue_l_50,
"--slider-lineThickness": "2px",
"--slider-lineVerticalPosition": "0px",
"--slider-trackLineColor": globalTokens.hal_blue_s_35,
@@ -1039,18 +1003,20 @@ export const componentTokens = {
"--slider-disabledThumbVerticalPosition": "-6px",
"--slider-disabledThumbBackgroundColor": globalTokens.hal_grey_l_75,
"--slider-disabledThumbBackgroundColorOnDark": globalTokens.hal_grey_l_60,
- "--slider-disabledDotsVerticalPosition": "-1px",
- "--slider-disabledTickMarkBackgroundColor": globalTokens.hal_grey_l_75,
- "--slider-disabledTickMarkBackgroundColorOnDark": globalTokens.hal_grey_l_60,
+ "--slider-disabledTickVerticalPosition": "-1px",
+ "--slider-disabledTickBackgroundColor": globalTokens.hal_grey_l_75,
+ "--slider-disabledTickBackgroundColorOnDark": globalTokens.hal_grey_l_60,
"--slider-disabledTrackLineColor": globalTokens.hal_blue_l_95,
"--slider-disabledTrackLineColorOnDark": globalTokens.hal_grey_l_60,
"--slider-disabledTotalLineColor": globalTokens.hal_grey_l_95,
"--slider-disabledTotalLineColorOnDark": globalTokens.hal_grey_s_40,
"--slider-focusColor": globalTokens.hal_blue_s_35,
"--slider-focusColorOnDark": globalTokens.hal_blue_l_50,
+ "--slider-disabledFontColor": globalTokens.hal_grey_l_60,
//SPINNER
"--spinner-trackCircleColor": globalTokens.hal_purple_s_38,
+ "--spinner-trackCircleColorOnDark": globalTokens.hal_purple_l_65,
"--spinner-totalCircleColor": globalTokens.hal_white,
"--spinner-overlayBackgroundColor": globalTokens.hal_black,
"--spinner-labelFontFamily": globalTokens.type_sans,
@@ -1066,7 +1032,6 @@ export const componentTokens = {
"--spinner-progressValueFontColor": globalTokens.hal_black,
"--spinner-progressValueTextAlign": "center",
"--spinner-overlayOpacity": "0.8",
- "--spinner-overlayTrackCircleColor": globalTokens.hal_purple_l_65,
"--spinner-overlayLabelFontFamily": globalTokens.type_sans,
"--spinner-overlayLabelFontSize": globalTokens.type_scale_02,
"--spinner-overlayLabelFontStyle": globalTokens.type_normal,
@@ -1074,16 +1039,16 @@ export const componentTokens = {
"--spinner-overlayLabelFontColor": globalTokens.hal_white,
"--spinner-overlayLabelTextAlign": "center",
"--spinner-overlayProgressValueFontFamily": globalTokens.type_sans,
- "--spinner-overlayProgressValueFontSize": globalTokens.type_scale_02,
+ "--spinner-overlayProgressValueFontSize": globalTokens.type_scale_01,
"--spinner-overlayProgressValueFontStyle": globalTokens.type_normal,
- "--spinner-overlayProgressValueFontWeight": globalTokens.type_semibold,
+ "--spinner-overlayProgressValueFontWeight": globalTokens.type_bold,
"--spinner-overlayProgressValueFontColor": globalTokens.hal_white,
"--spinner-overlayProgressValueTextAlign": "center",
//SWITCH
"--switch-requiredColor": globalTokens.hal_red_s_41,
- "--switch-checkedTrackBackgroundColor": globalTokens.purple,
- "--switch-checkedTrackBackgroundColorOnDark": globalTokens.purple,
+ "--switch-checkedTrackBackgroundColor": globalTokens.hal_purple_s_38,
+ "--switch-checkedTrackBackgroundColorOnDark": globalTokens.hal_purple_s_38,
"--switch-checkedThumbBackgroundColor": globalTokens.hal_white,
"--switch-checkedThumbBackgroundColorOnDark": globalTokens.hal_white,
"--switch-uncheckedThumbBackgroundColor": globalTokens.hal_white,
@@ -1103,13 +1068,13 @@ export const componentTokens = {
"--switch-disabledLabelFontColorOnDark": "#575757",
"--switch-disabledLabelFontStyle": globalTokens.type_normal,
"--switch-labelFontFamily": globalTokens.type_sans,
- "--switch-labelFontSize": "16px",
+ "--switch-labelFontSize": globalTokens.type_scale_root,
"--switch-labelFontStyle": globalTokens.type_normal,
"--switch-labelFontWeight": globalTokens.type_regular,
"--switch-labelFontColor": globalTokens.hal_black,
"--switch-labelFontColorOnDark": globalTokens.hal_white,
"--switch-thumbFocusColor": globalTokens.blue,
- "--switch-thumbFocusColorOnDark": "#1489FB",
+ "--switch-thumbFocusColorOnDark": "#1682FF",
"--switch-thumbHeight": "24px",
"--switch-thumbWidth": "24px",
"--switch-thumbShift": "-2px",
@@ -1192,7 +1157,11 @@ export const componentTokens = {
//TAG
"--tag-iconColor": globalTokens.hal_white,
+ "--tag-fontFamily": globalTokens.type_sans,
"--tag-fontStyle": globalTokens.type_normal,
+ "--tag-fontColor": globalTokens.hal_black,
+ "--tag-fontSize": globalTokens.type_scale_02,
+ "--tag-fontWeight": globalTokens.type_regular,
"--tag-fontTextTransform": globalTokens.type_uppercase,
"--tag-height": "43px",
"--tag-iconSectionWidth": "48px",
@@ -1200,8 +1169,7 @@ export const componentTokens = {
"--tag-iconWidth": "24px",
//TEXTAREA
- "--textarea-disabledFontColor": globalTokens.lighterBlack,
- "--textarea-disabledFontColorOnDark": "#575757",
+ "--textarea-fontFamily": globalTokens.type_sans,
"--textarea-errorColor": globalTokens.hal_red_s_41,
"--textarea-errorColorOnDark": globalTokens.hal_red_l_60,
"--textarea-assistiveTextFontFamily": globalTokens.type_sans,
@@ -1211,14 +1179,6 @@ export const componentTokens = {
"--textarea-assistiveTextFontColor": globalTokens.hal_black,
"--textarea-assistiveTextFontColorOnDark": globalTokens.hal_white,
"--textarea-assistiveTextLetterSpacing": globalTokens.type_spacing_normal,
- "--textarea-customContentFontFamily": globalTokens.type_sans,
- "--textarea-customContentFontSize": globalTokens.type_scale_03,
- "--textarea-customContentFontStyle": globalTokens.type_normal,
- "--textarea-customContentFontWeight": globalTokens.type_regular,
- "--textarea-customContentFontColor": globalTokens.hal_black,
- "--textarea-customContentFontColorOnDark": globalTokens.hal_white,
- "--textarea-customContentLetterSpacing": globalTokens.type_spacing_normal,
- "--textarea-customContentLineHeight": "1.1875em",
"--textarea-labelFontFamily": globalTokens.type_sans,
"--textarea-labelFontSize": globalTokens.type_scale_03,
"--textarea-labelFontStyle": globalTokens.type_normal,
@@ -1230,6 +1190,20 @@ export const componentTokens = {
"--textarea-scrollBarThumbColorOnDark": globalTokens.hal_white,
"--textarea-scrollBarTrackColor": globalTokens.lightGrey,
"--textarea-scrollBarTrackColorOnDark": globalTokens.hal_grey_l_60,
+ "--textarea-valueFontSize": globalTokens.type_scale_03,
+ "--textarea-valueFontStyle": globalTokens.type_normal,
+ "--textarea-valueFontWeight": globalTokens.type_regular,
+ "--textarea-valueFontColor": globalTokens.hal_black,
+ "--textarea-valueFontColorOnDark": globalTokens.hal_white,
+ "--textarea-valueLetterSpacing": "0",
+ "--textarea-valueLineHeight": "1.1875em",
+ "--textarea-disabledColor": globalTokens.lighterBlack,
+ "--textarea-disabledColorOnDark": "#575757",
+ "--textarea-underlineColor": globalTokens.hal_black,
+ "--textarea-underlineColorOnDark": globalTokens.hal_white,
+ "--textarea-underlineFocusColor": globalTokens.hal_black,
+ "--textarea-underlineFocusColorOnDark": globalTokens.hal_white,
+ "--textarea-underlineThickness": "1px",
//TOGGLE GROUP
"--toggleGroup-unselectedBackgroundColor": globalTokens.hal_grey_l_90,
@@ -1246,29 +1220,32 @@ export const componentTokens = {
"--toggleGroup-unselectedDisabledBackgroundColor": globalTokens.hal_grey_l_95,
"--toggleGroup-unselectedDisabledFontColor": globalTokens.hal_grey_l_60,
"--toggleGroup-fontFamily": globalTokens.type_sans,
- "--toggleGroup-fontSize": globalTokens.type_scale_02,
+ "--toggleGroup-fontSize": globalTokens.type_scale_03,
"--toggleGroup-fontStyle": globalTokens.type_normal,
"--toggleGroup-fontWeight": globalTokens.type_regular,
"--toggleGroup-fontLetterSpacing": globalTokens.type_spacing_wide_02,
- "--toggleGroup-focusColor": "#005FCC",
+ "--toggleGroup-focusColor": globalTokens.hal_blue_l_50,
"--toggleGroup-iconSize": "24px",
"--toggleGroup-iconPaddingRight": "8px",
"--toggleGroup-iconPaddingLeft": "8px",
"--toggleGroup-labelPaddingLeft": "24px",
"--toggleGroup-labelPaddingRight": "24px",
+ "--toggleGroup-iconPaddingTop": "8px",
+ "--toggleGroup-iconPaddingBottom": "8px",
+ "--toggleGroup-labelPaddingTop": "8px",
+ "--toggleGroup-labelPaddingBottom": "8px",
//UPLOAD
"--upload-shadowColor": globalTokens.hal_grey_l_95,
- "--upload-fileHoverColor": globalTokens.darkWhite,
+ "--upload-hoverFileColor": globalTokens.darkWhite,
"--upload-scrollBarThumbColor": globalTokens.hal_grey_s_40,
"--upload-scrollBarTrackColor": globalTokens.lightGrey,
"--upload-errorColor": globalTokens.hal_red_s_41,
"--upload-backgroundColor": globalTokens.hal_white,
"--upload-fontFamily": globalTokens.type_sans,
- "--upload-draggingAreaBackgroundColor": globalTokens.hal_grey_l_95,
+ "--upload-draggingStateBackgroundColor": globalTokens.hal_grey_l_95,
"--upload-dragAndDropIconColor": globalTokens.hal_purple_s_38,
- "--upload-dragAndDropIconHeight": "43.5px",
- "--upload-dragAndDropIconWidth": "43.5px",
+ "--upload-dragAndDropIconSize": "43.5px",
"--upload-dragAndDropTitleFontSize": globalTokens.type_scale_04,
"--upload-dragAndDropTitleFontStyle": globalTokens.type_normal,
"--upload-dragAndDropTitleFontWeight": globalTokens.type_bold,
@@ -1277,27 +1254,25 @@ export const componentTokens = {
"--upload-dragAndDropDescriptionFontSize": globalTokens.type_scale_03,
"--upload-dragAndDropDescriptionFontStyle": globalTokens.type_italic,
"--upload-dragAndDropDescriptionFontWeight": globalTokens.type_normal,
- "--upload-dragAndDropTextDescriptionFontTextTransform": "none",
- "--upload-dragAndDropTextDescriptionFontColor": globalTokens.hal_grey_s_40,
+ "--upload-dragAndDropDescriptionFontTextTransform": "none",
+ "--upload-dragAndDropDescriptionFontColor": globalTokens.hal_grey_s_40,
"--upload-dragAndDropDraggingStateIconColor": globalTokens.hal_grey_s_40,
- "--upload-dragAndDropDraggingStateIconHeight": "43.5px",
+ "--upload-dragAndDropDraggingStateIconSize": "43.5px",
"--upload-dragAndDropDraggingStateIconWidth": "43.5px",
"--upload-dragAndDropDraggingStateFontSize": globalTokens.type_scale_03,
"--upload-dragAndDropDraggingStateFontStyle": globalTokens.type_normal,
"--upload-dragAndDropDraggingStateFontWeight": globalTokens.type_normal,
- "--upload-dragAndDropTextDraggingStateFontTextTransform": "none",
- "--upload-dragAndDropTextDraggingStateFontColor": globalTokens.hal_grey_s_40,
+ "--upload-dragAndDropDraggingStateFontTextTransform": "none",
+ "--upload-dragAndDropDraggingStateFontColor": globalTokens.hal_grey_s_40,
"--upload-dragAndDropAreaIconColor": globalTokens.hal_black,
- "--upload-dragAndDropAreaIconHeight": "24px",
- "--upload-dragAndDropAreaIconWidth": "24px",
+ "--upload-dragAndDropAreaIconSize": "24px",
"--upload-dragAndDropAreaTextFontSize": globalTokens.type_scale_01,
"--upload-dragAndDropAreaTextFontStyle": globalTokens.type_normal,
"--upload-dragAndDropAreaTextFontWeight": globalTokens.type_regular,
"--upload-dragAndDropAreaTextFontTextTransform": "none",
"--upload-dragAndDropAreaTextFontColor": globalTokens.hal_black,
"--upload-fileDeleteIconColor": globalTokens.hal_black,
- "--upload-fileDeleteIconHeight": "24px",
- "--upload-fileDeleteIconWidth": "24px",
+ "--upload-fileDeleteIconSize": "24px",
"--upload-fileUnderlineColor": globalTokens.lightGrey,
"--upload-fileUnderlineThickness": "1px",
"--upload-fileNameFontSize": globalTokens.type_scale_03,
@@ -1310,20 +1285,19 @@ export const componentTokens = {
"--upload-fileTypeFontWeight": globalTokens.type_regular,
"--upload-fileTypeFontTextTransform": globalTokens.type_uppercase,
"--upload-fileTypeFontColor": globalTokens.hal_black,
- "--upload-fileUploadedIconColor": globalTokens.hal_black,
- "--upload-fileUploadedIconHeight": "24px",
- "--upload-fileUploadedIconWidth": "24px",
- "--upload-filesUploadedTitleFontSize": globalTokens.type_scale_04,
- "--upload-filesUploadedTitleFontStyle": globalTokens.type_normal,
- "--upload-filesUploadedTitleFontWeight": globalTokens.type_regular,
- "--upload-filesUploadedTitleFontTextTransform": "none",
- "--upload-filesUploadedTitleFontColor": globalTokens.hal_black,
- "--upload-filesUploadedSubtitleFontSize": globalTokens.type_scale_02,
- "--upload-filesUploadedSubtitleFontStyle": globalTokens.type_normal,
- "--upload-filesUploadedSubtitleFontWeight": globalTokens.type_regular,
- "--upload-filesUploadedSubtitleFontTextTransform": "none",
- "--upload-filesUploadedSubtitleFontColor": globalTokens.hal_grey_s_40,
- "--upload-filesUploadedNumberFontWeight": globalTokens.type_bold,
+ "--upload-uploadedFileIconColor": globalTokens.hal_black,
+ "--upload-uploadedFileIconSize": "24px",
+ "--upload-uploadedFilesTitleFontSize": globalTokens.type_scale_04,
+ "--upload-uploadedFilesTitleFontStyle": globalTokens.type_normal,
+ "--upload-uploadedFilesTitleFontWeight": globalTokens.type_regular,
+ "--upload-uploadedFilesTitleFontTextTransform": "none",
+ "--upload-uploadedFilesTitleFontColor": globalTokens.hal_black,
+ "--upload-uploadedFilesSubtitleFontSize": globalTokens.type_scale_02,
+ "--upload-uploadedFilesSubtitleFontStyle": globalTokens.type_normal,
+ "--upload-uploadedFilesSubtitleFontWeight": globalTokens.type_regular,
+ "--upload-uploadedFilesSubtitleFontTextTransform": "none",
+ "--upload-uploadedFilesSubtitleFontColor": globalTokens.hal_grey_s_40,
+ "--upload-uploadedFilesNumberFontWeight": globalTokens.type_bold,
//WIZARD
"--wizard-focusColor": globalTokens.blue,
@@ -1347,7 +1321,7 @@ export const componentTokens = {
"--wizard-labelFontTextTransform": "none",
"--wizard-labelTextAlign": "left",
"--wizard-labelFontColor": globalTokens.hal_grey_s_40,
- "--wizard-labelActiveFontColor": globalTokens.hal_black,
+ "--wizard-visitedLabelFontColor": globalTokens.hal_black,
"--wizard-descriptionFontSize": globalTokens.type_scale_01,
"--wizard-descriptionFontFamily": globalTokens.type_sans,
"--wizard-descriptionFontStyle": globalTokens.type_normal,
@@ -1355,28 +1329,28 @@ export const componentTokens = {
"--wizard-descriptionLetterSpacing": globalTokens.type_spacing_wide_01,
"--wizard-descriptionFontTextTransform": "none",
"--wizard-descriptionFontColor": globalTokens.hal_grey_s_40,
- "--wizard-descriptionActiveFontColor": globalTokens.hal_black,
+ "--wizard-visitedDescriptionFontColor": globalTokens.hal_black,
"--wizard-descriptionTextAlign": "left",
"--wizard-circleBorderThickness": "2px",
- "--wizard-circleBorderStyle": "solid",
+ "--wizard-circleBorderStyle": globalTokens.border_solid,
"--wizard-circleBorderRadius": "45px",
"--wizard-circleBorderColor": globalTokens.hal_black,
- "--wizard-circleSelectedWidth": "32px",
- "--wizard-circleSelectedHeight": "32px",
- "--wizard-circleSelectedBorderThickness": "2px",
- "--wizard-circleSelectedBorderStyle": "solid",
- "--wizard-circleSelectedBorderRadius": "45px",
- "--wizard-circleSelectedBorderColor": globalTokens.purple,
- "--wizard-circleDisabledWidth": "32px",
- "--wizard-circleDisabledHeight": "32px",
- "--wizard-circleDisabledBorderThickness": "2px",
- "--wizard-circleDisabledBorderStyle": "solid",
- "--wizard-circleDisabledBorderRadius": "45px",
- "--wizard-circleDisabledBorderColor": globalTokens.lightGrey,
+ "--wizard-selectedCircleWidth": "32px",
+ "--wizard-selectedCircleHeight": "32px",
+ "--wizard-selectedCircleBorderThickness": "2px",
+ "--wizard-selectedCircleBorderStyle": globalTokens.border_solid,
+ "--wizard-selectedCircleBorderRadius": "45px",
+ "--wizard-selectedCircleBorderColor": globalTokens.purple,
+ "--wizard-disabledCircleWidth": "32px",
+ "--wizard-disabledCircleHeight": "32px",
+ "--wizard-disabledCircleBorderThickness": "2px",
+ "--wizard-disabledCircleBorderStyle": globalTokens.border_solid,
+ "--wizard-disabledCircleBorderRadius": "45px",
+ "--wizard-disabledCircleBorderColor": globalTokens.lightGrey,
"--wizard-circleWidth": "32px",
"--wizard-circleHeight": "32px",
"--wizard-separatorBorderThickness": "1px",
- "--wizard-separatorBorderStyle": "solid",
+ "--wizard-separatorBorderStyle": globalTokens.border_solid,
"--wizard-separatorColor": 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 9c467382d..8eddf2a99 100644
--- a/projects/dxc-ngx-cdk/src/lib/theme/test/AdvancedTheme.json
+++ b/projects/dxc-ngx-cdk/src/lib/theme/test/AdvancedTheme.json
@@ -1,108 +1,103 @@
{
"accordion": {
"backgroundColor": "#ffffff",
- "arrowColor": "#6f2c91",
- "fontColorBase": "#666666",
- "hoverBackgroundColor": "#f5ebf9",
- "disabledFontColor": "#bfbfbf",
- "customContentFontFamily": "Open Sans, sans-serif",
- "customContentFontSize": "1rem",
- "customContentFontWeight": "300",
- "customContentFontColor": "#000000",
- "customContentPanelHeight":"22px",
+ "disabledBackgroundColor": "transparent",
+ "hoverBackgroundColor": "#f2eafa",
+ "arrowColor": "#5f249f",
+ "disabledArrowColor": "#999999",
"assistiveTextFontFamily": "Open Sans, sans-serif",
"assistiveTextFontSize": "1rem",
"assistiveTextFontWeight": "300",
"assistiveTextFontStyle": "italic",
- "assistiveTextFontColor": "#000000",
"assistiveTextLetterSpacing": "0.025em",
+ "assistiveTextFontColor": "#666666",
+ "disabledAssistiveTextFontColor": "#999999",
"assistiveTextMinWidth": "100px",
- "assistiveTextPaddingLeft":"0px",
- "assistiveTextPaddingRight":"0px",
+ "assistiveTextPaddingRight": "24px",
+ "assistiveTextPaddingLeft": "0px",
"titleLabelFontFamily": "Open Sans, sans-serif",
"titleLabelFontSize": "1rem",
"titleLabelFontWeight": "400",
"titleLabelFontStyle": "normal",
- "titleLabelFontColor": "",
- "titleLabelPaddingLeft": "32px",
+ "titleLabelFontColor": "#000000",
+ "disabledTitleLabelFontColor": "#999999",
+ "titleLabelPaddingLeft": "0px",
"titleLabelPaddingRight": "16px",
- "titlePaddingTop": "0px",
- "titlePaddingBottom": "0px",
- "titleFocusBorderStyle": "solid",
- "titleFocusBorderThickness": "1px",
- "titleFocusBorderColor": "#6f2c91",
+ "titleLabelPaddingTop": "0px",
+ "titleLabelPaddingBottom": "0px",
+ "focusBorderStyle": "solid",
+ "focusBorderThickness": "2px",
+ "focusBorderColor": "#5f249f",
+ "focusBorderOffset": "-1px",
"borderRadius": "4px",
"boxShadowOffsetX": "0px",
"boxShadowOffsetY": "6px",
"boxShadowBlur": "10px",
- "boxShadowColor": "#00000024",
- "iconMaxHeight": "24px",
- "iconMaxWidth": "24px",
+ "boxShadowColor": "#0000001a",
+ "iconColor": "#5f249f",
+ "disabledIconColor": "#999999",
+ "iconSize": "24px",
"iconMarginLeft": "0px",
- "iconMarginRigth": "12px",
- "accordionGroupSeparatorBorderColor": "#00000024",
+ "iconMarginRight": "12px",
+ "accordionGroupSeparatorBorderColor": "#0000001a",
"accordionGroupSeparatorBorderThickness": "1px",
- "accordionGroupSeparatorBorderRadius": "0px",
"accordionGroupSeparatorBorderStyle": "solid"
},
"alert": {
- "overlayColor": "#000000",
- "infoColor": "#CEE0F5",
- "successColor": "#DBF1C4",
- "warningColor": "#FCF2BD",
- "errorColor": "#F9CFCF",
- "focusColor": "#005FCC",
- "titleFontFamily": "Open Sans, sans-serif",
- "titleFontSize": "0.75rem",
- "titleFontColor": "#000000",
- "titleFontWeight": "bold",
- "titleFontStyle": "normal",
- "titleTextTransform": "uppercase",
- "contentFontFamily": "Open Sans, sans-serif",
- "contentFontSize": "0.75rem",
- "contentFontColor": "#000000",
- "contentFontWeight": "normal",
- "titlePaddingRight": "8px",
- "titlePaddingLeft": "12px",
"titlePaddingTop": "0px",
"titlePaddingBottom": "0px",
- "inlineTextPaddingLeft": "8px",
- "inlineTextPaddingRight": "8px",
"inlineTextPaddingTop": "0px",
"inlineTextPaddingBottom": "0px",
- "iconPaddingLeft": "12px",
- "iconPaddingRight": "0px",
"iconPaddingTop": "0px",
"iconPaddingBottom": "0px",
- "iconSize": "24px",
- "textPaddingLeft": "12px",
- "textPaddingRight": "12px",
- "textPaddingTop": "0px",
- "textPaddingBottom": "0px",
- "contentPaddingLeft": "48px",
- "contentPaddingRight": "12px",
- "contentPaddingTop": "8px",
- "contentPaddingBottom": "20px",
- "overlayOpacity": "0.8",
"boxShadowOffsetX": "0px",
"boxShadowOffsetY": "3px",
"boxShadowBlur": "6px",
"boxShadowColor": "#00000012",
+ "titleFontFamily": "Open Sans, sans-serif",
+ "titleFontColor": "#000000",
+ "titleFontSize": "0.75rem",
+ "titleFontStyle": "normal",
+ "titleFontWeight": "bold",
+ "titleTextTransform": "uppercase",
+ "titlePaddingRight": "0px",
+ "titlePaddingLeft": "0px",
+ "inlineTextFontFamily": "Open Sans, sans-serif",
+ "inlineTextFontColor": "#000000",
+ "inlineTextFontSize": "0.75rem",
+ "inlineTextFontStyle": "normal",
+ "inlineTextFontWeight": "400",
+ "inlineTextPaddingLeft": "0px",
+ "inlineTextPaddingRight": "0px",
+ "contentPaddingLeft": "0px",
+ "contentPaddingRight": "0px",
+ "contentPaddingTop": "20px",
+ "contentPaddingBottom": "30px",
"borderRadius": "4px",
"borderStyle": "solid",
"borderThickness": "1px",
"infoBorderColor": "#0067b3",
"successBorderColor": "#24a148",
- "warningBorderColor": "#f7cf2b",
+ "warningBorderColor": "#c59f07",
"errorBorderColor": "#d0011b",
- "height": "48px"
+ "iconSize": "24px",
+ "iconPaddingLeft": "0px",
+ "iconPaddingRight": "0px",
+ "infoIconColor": "#0067b3",
+ "successIconColor": "#24a148",
+ "warningIconColor": "#c59f07",
+ "errorIconColor": "#d0011b",
+ "infoBackgroundColor": "#e6f4ff",
+ "successBackgroundColor": "#eafaef",
+ "warningBackgroundColor": "#fef9e6",
+ "errorBackgroundColor": "#ffe6e9",
+ "overlayColor": "#000000B3",
+ "hoverActionBackgroundColor": "#0000000D",
+ "focusActionBorderColor": "#0095ff",
+ "activeActionBackgroundColor": "#0000001A"
},
"box": {
"backgroundColor": "#ffffff",
- "fontFamily": "Open Sans, sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": "normal",
- "fontColor": "#000000",
"letterSpacing": "0.025em",
"borderRadius": "4px",
"borderThickness": "0px",
@@ -112,184 +107,183 @@
"noneShadowDepthShadowOffsetY": "none",
"noneShadowDepthShadowBlur": "none",
"noneShadowDepthShadowSpread": "none",
- "noneShadowDepthShadowColor": "none",
+ "noneShadowDepthShadowColor": "transparent",
"oneShadowDepthShadowOffsetX": "0px",
- "oneShadowDepthShadowOffsetY": "2px",
- "oneShadowDepthShadowBlur": "1px",
- "oneShadowDepthShadowSpread": "-1px",
+ "oneShadowDepthShadowOffsetY": "3px",
+ "oneShadowDepthShadowBlur": "6px",
+ "oneShadowDepthShadowSpread": "0px",
"oneShadowDepthShadowColor": "#00000033",
"twoShadowDepthShadowOffsetX": "0px",
"twoShadowDepthShadowOffsetY": "3px",
- "twoShadowDepthShadowBlur": "3px",
- "twoShadowDepthShadowSpread": "-2px",
+ "twoShadowDepthShadowBlur": "10px",
+ "twoShadowDepthShadowSpread": "0px",
"twoShadowDepthShadowColor": "#00000033"
},
"button": {
- "primaryBackgroundColor": "#6f2c91",
- "primaryBackgroundColorOnDark": "#581B81",
- "primaryHoverBackgroundColor": "#000000",
- "primaryHoverBackgroundColorOnDark": "#581B81",
+ "labelFontLineHeight": "1.5em",
+ "labelLetterSpacing": "0.025em",
+ "paddingLeft": "8px",
+ "paddingRight": "8px",
+ "paddingTop": "8px",
+ "paddingBottom": "8px",
+ "focusBorderColor": "#0095ff",
+ "focusBorderColorOnDark": "#0095ff",
+ "primaryBackgroundColor": "#5f249f",
+ "primaryBackgroundColorOnDark": "#5f249f",
"primaryFontColor": "#ffffff",
"primaryFontColorOnDark": "#ffffff",
- "primaryHoverFontColor": "#ffffff",
- "primaryHoverFontColorOnDark": "#000000",
- "primaryActiveBackgroundColor": "#676767",
- "primaryActiveBackgroundColorOnDark": "#581B81",
- "primaryDisabledBackgroundColor": "#d0bddb",
- "primaryDisabledBackgroundColorOnDark": "#ffffff57",
- "primaryDisabledFontColor": "#ffffff",
- "primaryDisabledFontColorOnDark": "#000000",
+ "primaryHoverBackgroundColor": "#4b1c7d",
+ "primaryHoverBackgroundColorOnDark": "#7D2FD0",
+ "primaryActiveBackgroundColor": "#321353",
+ "primaryActiveBackgroundColorOnDark": "#4b1c7d",
+ "primaryDisabledBackgroundColor": "#f2f2f2",
+ "primaryDisabledBackgroundColorOnDark": "#4d4d4d",
+ "primaryDisabledFontColor": "#999999",
+ "primaryDisabledFontColorOnDark": "#999999",
"primaryBorderThickness": "0px",
- "primaryBorderColor": "0",
- "primaryBorderColorOnDark": "0",
"primaryBorderStyle": "none",
"primaryBorderRadius": "4px",
"primaryFontFamily": "Open Sans, sans-serif",
- "primaryFontSize": "0.875rem",
+ "primaryFontSize": "1rem",
"primaryFontWeight": "400",
- "primaryPaddingTop": "12px",
- "primaryPaddingBottom": "12px",
- "secondaryOutlinedColor": "#6f2c91",
- "secondaryOutlinedColorOnDark": "#6A229A",
"secondaryBackgroundColor": "transparent",
"secondaryBackgroundColorOnDark": "transparent",
- "secondaryHoverOutlinedColor": "#000000",
- "secondaryHoverOutlinedColorOnDark": "#6A229A",
- "secondaryFontColor": "#000000",
- "secondaryFontColorOnDark": "#FFFFFF",
- "secondaryHoverFontColor": "#000000",
- "secondaryHoverFontColorOnDark": "#FFFFFF",
- "secondaryActiveBackgroundColor": "#dbdbdb",
- "secondaryActiveBackgroundColorOnDark": "#FFFFFF29",
- "secondaryHoverBackgroundColor": "#eeeeee",
- "secondaryHoverBackgroundColorOnDark": "#FFFFFF14",
- "secondaryDisabledOutlinedColor": "#d0bddb",
- "secondaryDisabledOutlinedColorOnDark": "#575757",
+ "secondaryFontColor": "#5f249f",
+ "secondaryFontColorOnDark": "#ffffff",
+ "secondaryHoverFontColor": "#ffffff",
+ "secondaryHoverFontColorOnDark": "#000000",
+ "secondaryBorderColor": "#5f249f",
+ "secondaryBorderColorOnDark": "#ffffff",
+ "secondaryHoverBackgroundColor": "#5f249f",
+ "secondaryHoverBackgroundColorOnDark": "#ffffff",
+ "secondaryActiveBackgroundColor": "#321353",
+ "secondaryActiveBackgroundColorOnDark": "#e6e6e6",
+ "secondaryDisabledBackgroundColor": "transparent",
+ "secondaryDisabledBackgroundColorOnDark": "transparent",
"secondaryDisabledFontColor": "#b1b1b1",
- "secondaryDisabledFontColorOnDark": "#575757",
- "secondaryBorderThickness": "2px",
+ "secondaryDisabledFontColorOnDark": "#999999",
+ "secondaryDisabledBorderColor": "#999999",
+ "secondaryDisabledBorderColorOnDark": "#999999",
+ "secondaryBorderThickness": "1px",
"secondaryBorderStyle": "solid",
"secondaryBorderRadius": "4px",
"secondaryFontFamily": "Open Sans, sans-serif",
- "secondaryFontSize": "0.875rem",
+ "secondaryFontSize": "1rem",
"secondaryFontWeight": "400",
- "secondaryPaddingTop": "10px",
- "secondaryPaddingBottom": "10px",
"textBackgroundColor": "transparent",
"textBackgroundColorOnDark": "transparent",
- "textHoverBackgroundColor": "#000000",
- "textHoverBackgroundColorOnDark": "#6A229A80",
- "textFontColor": "#6f2c91",
- "textFontColorOnDark": "#FFFFFF",
- "textHoverFontColor": "#ffffff",
- "textHoverFontColorOnDark": "#FFFFFF",
- "textActiveBackgroundColor": "#676767",
- "textActiveBackgroundColorOnDark": "#581B81",
- "textDisabledFontColor": "#d0bddb",
+ "textFontColor": "#5f249f",
+ "textFontColorOnDark": "#ffffff",
+ "textHoverBackgroundColor": "#f2eafa",
+ "textHoverBackgroundColorOnDark": "#4d4d4d",
+ "textActiveBackgroundColor": "#e5d5f6",
+ "textActiveBackgroundColorOnDark": "#666666",
"textDisabledBackgroundColor": "transparent",
"textDisabledBackgroundColorOnDark": "transparent",
- "textDisabledFontColorOnDark": "#FFFFFF80",
+ "textDisabledFontColor": "#999999",
+ "textDisabledFontColorOnDark": "#999999",
"textBorderThickness": "0px",
- "textBorderColor": "0",
- "textBorderColorOnDark": "0",
"textBorderStyle": "none",
"textBorderRadius": "4px",
"textFontFamily": "Open Sans, sans-serif",
- "textFontSize": "0.875rem",
- "textFontWeight": "400",
- "textPaddingTop": "12px",
- "textPaddingBottom": "12px",
- "focusColor": "#005FCC",
- "labelFontLineHeight": "1.5em",
- "labelLetterSpacing": "0.025em",
- "labelTextTranform": "uppercase",
- "iconMaxHeight": "20px",
- "iconMaxWidth": "20px",
- "minHeight": "43px"
+ "textFontSize": "1rem",
+ "textFontWeight": "400"
},
"card": {
"height": "220px",
"width": "400px"
},
"checkbox": {
+ "backgroundColorChecked": "#0067b3",
+ "backgroundColorCheckedOnDark": "#e6e6e6",
+ "hoverBackgroundColorChecked": "#003c66",
+ "hoverBackgroundColorCheckedOnDark": "#ffffff",
+ "disabledBackgroundColorChecked": "#999999",
+ "disabledBackgroundColorCheckedOnDark": "#4d4d4d",
"borderColor": "#0067b3",
- "hoverBorderColor": "#003c66",
"borderColorOnDark": "#e6e6e6",
+ "hoverBorderColor": "#003c66",
"hoverBorderColorOnDark": "#ffffff",
- "selectedBackgroundColor": "#0067b3",
- "selectedHoverBackgroundColor": "#003c66",
- "selectedBackgroundColorOnDark": "#e6e6e6",
- "selectedHoverBackgroundColorOnDark": "#ffffff",
- "checkColor": "#ffffff",
- "checkColorOnDark": "#000000",
- "fontColor": "#000000",
- "fontColorOnDark": "#FFFFFF",
- "selectedDisabledBackgroundColor": "#999999",
- "selectedDisabledBackgroundColorOnDark": "#4d4d4d",
"disabledBorderColor": "#999999",
"disabledBorderColorOnDark": "#4d4d4d",
+ "checkColor": "#ffffff",
+ "checkColorOnDark": "#000000",
"disabledCheckColor": "#ffffff",
"disabledCheckColorOnDark": "#999999",
- "disabledFontColor": "#999999",
- "disabledFontColorOnDark": "#999999",
"fontFamily": "Open Sans, sans-serif",
- "fontSize": "1rem",
+ "fontSize": "0.875rem",
"fontWeight": "400",
- "checkLabelSpacing": "10px",
+ "fontColor": "#000000",
+ "fontColorOnDark": "#ffffff",
+ "disabledFontColor": "#999999",
+ "disabledFontColorOnDark": "#999999",
"focusColor": "#0095ff",
- "focusColorOnDark": "#0095ff"
+ "focusColorOnDark": "#0095ff",
+ "checkLabelSpacing": "8px"
},
"chip": {
- "backgroundColor": "#eeeeee",
- "borderColor": "transparent",
+ "backgroundColor": "#e6e6e6",
+ "disabledBackgroundColor": "#f2f2f2",
+ "disabledFontColor": "#999999",
"fontColor": "#000000",
- "disabledBackgroundColor": "#f9f9f9",
- "disabledFontColor": "#b1b1b1",
"fontFamily": "Open Sans, sans-serif",
"fontSize": "1rem",
- "fontWeight": "400",
"fontStyle": "normal",
- "borderRadius": "50px",
- "borderThickness": "2px",
+ "fontWeight": "400",
+ "borderColor": "transparent",
+ "borderRadius": "80px",
+ "borderThickness": "0px",
"borderStyle": "solid",
- "height": "18px",
- "contentPaddingLeft": "20px",
- "contentPaddingRight": "20px",
- "contentPaddingTop": "10px",
- "contentPaddingBottom": "10px",
+ "contentPaddingLeft": "16px",
+ "contentPaddingRight": "16px",
+ "contentPaddingTop": "0px",
+ "contentPaddingBottom": "0px",
"iconSize": "24px",
- "iconPaddingLeft": "0px",
- "iconPaddingRight": "0px"
+ "iconSpacing": "8px",
+ "iconColor": "#000000",
+ "disabledIconColor": "#999999",
+ "focusColor": "#0067b3"
},
"date": {
- "pickerSelectedDateBackgroundColor": "#6f2c91",
+ "pickerSelectedDateBackgroundColor": "#5f249f",
+ "pickerSelectedDateColor": "#ffffff",
+ "pickerBackgroundColor": "#ffffff",
+ "pickerFontColor": "#000000",
+ "pickerHoverDateBackgroundColor": "#d0bddb",
+ "pickerHoverDateFontColor": "#000000",
+ "pickerActualDateColor": "#D9D9D9",
+ "pickerYearColor": "#000000",
+ "pickerMonthColor": "#000000",
+ "pickerWeekLabelColor": "#000000",
+ "pickerBackgroundColorMonthArrows": "transparent",
+ "focusColor": "#005FCC",
+ "fontFamily": "Open Sans, sans-serif",
+ "pickerHeight": "316px",
+ "pickerWidth": "290px"
+ },
+ "newDate": {
+ "pickerSelectedDateBackgroundColor": "#5f249f",
"pickerSelectedDateColor": "#ffffff",
"pickerBackgroundColor": "#ffffff",
"pickerFontColor": "#000000",
- "pickerActualDate": "#D9D9D9",
"pickerHoverDateBackgroundColor": "#d0bddb",
"pickerHoverDateFontColor": "#000000",
+ "pickerActualDateColor": "#D9D9D9",
"pickerYearColor": "#000000",
"pickerMonthColor": "#000000",
- "pickerWeekLabelColor":"#000000",
- "pickerBackgroundColorMonthArrows":"transparent",
+ "pickerWeekLabelColor": "#000000",
+ "pickerBackgroundColorMonthArrows": "transparent",
"focusColor": "#005FCC",
"fontFamily": "Open Sans, sans-serif",
- "pickerHeight":"316px",
- "pickerWidth":"290px"
+ "pickerHeight": "316px",
+ "pickerWidth": "290px"
},
"dialog": {
"overlayColor": "#000000",
- "overlayOpacity": "0.8",
- "scrollBarThumbColor": "#666666",
- "scrollBarTrackColor": "#D9D9D9",
+ "overlayOpacity": "0.7",
"backgroundColor": "#ffffff",
- "fontFamily": "Open Sans, sans-serif",
- "fontSize": "1rem",
- "fontWeight": "400",
- "fontColor": "#000000",
- "closeIconWidth": "34px",
- "closeIconHeight": "34px",
+ "closeIconWidth": "24px",
+ "closeIconHeight": "24px",
"closeIconTopPosition": "20px",
"closeIconRightPosition": "20px",
"closeIconBackgroundColor": "none",
@@ -305,98 +299,93 @@
},
"dropdown": {
"buttonBackgroundColor": "#ffffff",
- "buttonFontColor": "#000000",
- "optionsListBackgroundColor": "#ffffff",
- "optionsListHoverBackgroundColor": "#ffffff",
- "buttonHoverBackgroundColor": "#ffffff",
- "scrollBarThumbColor": "#666666",
- "scrollBarTrackColor": "#D9D9D9",
- "focusColor": "#005FCC",
- "fontFamily": "Open Sans, sans-serif",
+ "hoverButtonBackgroundColor": "#f2f2f2",
+ "activeButtonBackgroundColor": "#D9D9D9",
+ "buttonFontFamily": "Open Sans, sans-serif",
"buttonFontSize": "1rem",
"buttonFontStyle": "normal",
"buttonFontWeight": "400",
- "minHeight": "46px",
- "minWidth": "230px",
- "borderRadius": "2px",
+ "buttonFontColor": "#000000",
+ "buttonIconSize": "20px",
+ "buttonIconSpacing": "10px",
+ "buttonIconColor": "#000000",
+ "buttonPaddingTop": "0px",
+ "buttonPaddingBottom": "0px",
+ "buttonPaddingLeft": "16px",
+ "buttonPaddingRight": "16px",
+ "disabledColor": "#b1b1b1",
+ "disabledButtonBackgroundColor": "transparent",
+ "disabledBorderColor": "#b1b1b1",
+ "optionBackgroundColor": "#ffffff",
+ "hoverOptionBackgroundColor": "#f2f2f2",
+ "activeOptionBackgroundColor": "#D9D9D9",
+ "optionFontFamily": "Open Sans, sans-serif",
+ "optionFontSize": "16px",
+ "optionFontStyle": "normal",
+ "optionFontWeight": "400",
+ "optionFontColor": "#000000",
+ "optionIconSize": "20px",
+ "optionIconSpacing": "10px",
+ "optionIconColor": "#000000",
+ "optionPaddingTop": "6px",
+ "optionPaddingBottom": "6px",
+ "optionPaddingLeft": "16px",
+ "optionPaddingRight": "16px",
+ "caretIconSize": "24px",
+ "caretIconColor": "#000000",
+ "caretIconSpacing": "12px",
+ "borderRadius": "4px",
"borderStyle": "none",
"borderThickness": "0px",
"borderColor": "transparent",
- "optionsPaddingTop": "6px",
- "optionsPaddingBottom": "6px",
- "optionsPaddingLeft": "6px",
- "optionsPaddingRight": "6px",
- "caretIconMarginRight": "10px",
- "caretIconMarginLeft": "10px",
- "caretIconMarginTop": "0px",
- "caretIconMarginBottom": "0px",
- "optionsFontColor":"",
- "optionsFontSize":"16px",
- "optionsFontStyle":"normal",
- "optionsFontWeight":"400",
- "iconSize": "20px",
- "iconOptionSpacing": "10px",
- "iconColor":""
+ "scrollBarThumbColor": "#666666",
+ "scrollBarTrackColor": "#D9D9D9",
+ "focusColor": "#005FCC"
},
"footer": {
+ "height": "124px",
"backgroundColor": "#000000",
- "bottomLinksDividerColor": "#1489fb",
- "bottomLinksDividerThickness": "2px",
+ "bottomLinksDividerColor": "#0095ff",
+ "bottomLinksDividerThickness": "1px",
"bottomLinksDividerStyle": "solid",
"bottomLinksDividerSpacing": "8px",
"bottomLinksFontFamily": "Open Sans, sans-serif",
"bottomLinksFontSize": "0.75rem",
"bottomLinksFontStyle": "normal",
"bottomLinksFontWeight": "400",
- "bottomLinksFontColor": "",
+ "bottomLinksFontColor": "#ffffff",
"bottomLinksTextDecoration": "none",
"copyrightFontFamily": "Open Sans, sans-serif",
"copyrightFontSize": "0.75rem",
"copyrightFontStyle": "normal",
"copyrightFontWeight": "400",
- "copyrightFontColor": "",
- "fontColorBase": "#ffffff",
+ "copyrightFontColor": "#ffffff",
"logo": "assets/dxc-logo-wh.svg",
"logoHeight": "32px",
"logoWidth": "auto",
- "minHeight": "124px",
- "socialIconSize": "24px",
- "socialIconsGutter": "16px"
+ "socialLinksSize": "24px",
+ "socialLinksGutter": "16px",
+ "socialLinksColor": "#ffffff"
},
"header": {
"backgroundColor": "#ffffff",
- "customContentFontFamily": "",
- "customContentFontStyle": "normal",
- "customContentFontColor": "",
- "customContentFontSize": "",
- "customContentFontWeight": "400",
- "dropdownBackgroundColor": "transparent",
- "dropdownHoverBackgroundColor": "transparent",
- "fontColorBase": "#000000",
- "fontFamilyBase": "Open Sans, sans-serif",
- "fontSizeBase": "16px",
- "hamburguerFocusColor": "#005FCC",
- "hamburguerFontFamily": "Open Sans",
+ "hamburguerFocusColor": "#0095ff",
+ "hamburguerFontFamily": "Open Sans, sans-serif",
"hamburguerFontStyle": "normal",
- "hamburguerFontColor": "",
+ "hamburguerFontColor": "#000000",
"hamburguerFontSize": "10px",
"hamburguerFontWeight": "600",
- "hamburguerColor": "#000000",
- "hamburguerHoverColor": "#dbdbdb",
"hamburguerTextTransform": "uppercase",
- "logo": "/assets/DXC_Logo_Black_RGB.svg",
- "logoResponsive": "/assets/DXC_Logo_Black_RGB.svg",
+ "hamburguerIconColor": "#000000",
+ "hamburguerHoverColor": "#dbdbdb",
+ "logo": "assets/DXC_Logo_Black_RGB.svg",
+ "logoResponsive": "assets/DXC_Logo_Black_RGB.svg",
"logoHeight": "32px",
"logoWidth": "auto",
"menuBackgroundColor": "#ffffff",
"menuZindex": "2000",
"menuTabletWidth": "60vw",
"menuMobileWidth": "100vw",
- "menuCustomContentFontFamily": "",
- "menuCustomContentFontStyle": "normal",
- "menuCustomContentFontColor": "",
- "menuCustomContentFontSize": "",
- "menuCustomContentFontWeight": "400",
"minHeight": "64px",
"overlayColor": "#565656",
"overlayOpacity": "0.7",
@@ -410,38 +399,36 @@
"underlinedStyle": "solid"
},
"heading": {
- "fontFamilyBase": "Open Sans, sans-serif",
- "fontColorBase": "inherit",
- "level1FontColor": "",
- "level1FontFamily": "",
+ "level1FontColor": "#000000",
+ "level1FontFamily": "Open Sans, sans-serif",
"level1FontSize": "3.75rem",
"level1FontStyle": "normal",
"level1FontWeight": "400",
"level1LineHeight": "1.365em",
"level1LetterSpacing": "-0.025em",
- "level2FontColor": "",
- "level2FontFamily": "",
+ "level2FontColor": "#000000",
+ "level2FontFamily": "Open Sans, sans-serif",
"level2FontSize": "3rem",
"level2FontStyle": "normal",
"level2FontWeight": "400",
"level2LineHeight": "1.5em",
"level2LetterSpacing": "0",
- "level3FontColor": "",
- "level3FontFamily": "",
+ "level3FontColor": "#000000",
+ "level3FontFamily": "Open Sans, sans-serif",
"level3FontSize": "2rem",
"level3FontStyle": "normal",
"level3FontWeight": "400",
"level3LineHeight": "1.365em",
"level3LetterSpacing": "0.025em",
- "level4FontColor": "",
- "level4FontFamily": "",
+ "level4FontColor": "#000000",
+ "level4FontFamily": "Open Sans, sans-serif",
"level4FontSize": "1.5rem",
"level4FontStyle": "normal",
"level4FontWeight": "400",
"level4LineHeight": "1.5em",
"level4LetterSpacing": "0",
- "level5FontColor": "",
- "level5FontFamily": "",
+ "level5FontColor": "#000000",
+ "level5FontFamily": "Open Sans, sans-serif",
"level5FontSize": "1.25rem",
"level5FontStyle": "normal",
"level5FontWeight": "400",
@@ -449,42 +436,62 @@
"level5LetterSpacing": "0.025em"
},
"inputText": {
- "assistiveTextFontColor": "",
- "assistiveTextFontColorOnDark": "",
+ "fontFamily": "Open Sans, sans-serif",
+ "assistiveTextFontColor": "#000000",
+ "assistiveTextFontColorOnDark": "#ffffff",
"assistiveTextFontSize": "0.75rem",
"assistiveTextFontStyle": "normal",
"assistiveTextFontWeight": "400",
- "disabledFontColor": "#b1b1b1",
- "disabledFontColorOnDark": "#575757",
+ "disabledColor": "#b1b1b1",
+ "disabledColorOnDark": "#575757",
"errorColor": "#D0011B",
"errorColorOnDark": "#FE344F",
- "fontColorBase": "#000000",
- "fontColorBaseOnDark": "#ffffff",
- "fontFamilyBase": "Open Sans, sans-serif",
- "fontSizeBase": "16px",
+ "optionBackgroundColor": "#ffffff",
+ "optionBorderColor": "#000000",
+ "optionBorderThickness": "0px",
+ "optionBorderStyle": "solid",
+ "optionFontColor": "#000000",
+ "optionFontColorOnDark": "#ffffff",
+ "optionFontSize": "1rem",
+ "optionFontStyle": "normal",
+ "optionFontWeight": "400",
+ "optionPaddingBottom": "6px",
+ "optionPaddingTop": "6px",
"hoverOptionColor": "#000000",
+ "hoverOptionBackgroundColor": "#f2f2f2",
+ "hoverOptionBackgroundColorOnDark": "#bfbfbf",
+ "scrollBarThumbColor": "#666666",
+ "scrollBarTrackColor": "#D9D9D9",
+ "selectedOptionBackgroundColor": "#D9D9D9",
+ "selectedOptionBackgroundColorOnDark": "#D9D9D9",
+ "labelFontColor": "#000000",
+ "labelFontColorOnDark": "#ffffff",
"labelFontSize": "1rem",
- "prefixIconColor": "",
- "prefixIconColorOnDark": "",
- "prefixLabelFontColor": "",
- "prefixLabelFontColorOnDark": "",
+ "labelFontStyle": "normal",
+ "labelFontWeight": "400",
+ "valueFontColor": "#000000",
+ "valueFontColorOnDark": "#ffffff",
+ "valueFontSize": "1rem",
+ "valueFontStyle": "normal",
+ "valueFontWeight": "400",
+ "prefixIconColor": "#000000",
+ "prefixIconColorOnDark": "#ffffff",
+ "prefixLabelFontColor": "#000000",
+ "prefixLabelFontColorOnDark": "#ffffff",
"prefixLabelFontSize": "1rem",
"prefixLabelFontStyle": "normal",
"prefixLabelFontWeight": "400",
- "scrollBarThumbColor": "#666666",
- "scrollBarTrackColor": "#D9D9D9",
- "selectedOptionBackgroundColor": "#f2f2f2",
- "suffixIconColor": "",
- "suffixIconColorOnDark": "",
- "suffixLabelFontColor": "",
- "suffixLabelFontColorOnDark": "",
+ "suffixIconColor": "#000000",
+ "suffixIconColorOnDark": "#ffffff",
+ "suffixLabelFontColor": "#000000",
+ "suffixLabelFontColorOnDark": "#ffffff",
"suffixLabelFontSize": "1rem",
"suffixLabelFontStyle": "normal",
"suffixLabelFontWeight": "400",
- "underlineColor": "",
- "underlineColorOnDark": "",
- "underlineFocusColor": "",
- "underlineFocusColorOnDark": "",
+ "underlineColor": "#000000",
+ "underlineColorOnDark": "#ffffff",
+ "underlineFocusColor": "#000000",
+ "underlineFocusColorOnDark": "#ffffff",
"underlineThickness": "1px"
},
"link": {
@@ -514,6 +521,7 @@
"fontSize": "0.875rem",
"fontStyle": "normal",
"fontWeight": "400",
+ "fontTextTransform": "none",
"height": "64px",
"width": "100%",
"marginRight": "40px",
@@ -525,21 +533,30 @@
"totalItemsContainerMarginRight": "30px",
"totalItemsContainerMarginLeft": "0px"
},
- "progressBar": {
- "trackLineColor": "#6f2c91",
+ "progressBar": {
+ "trackLineColor": "#5f249f",
+ "trackLineColorOnDark": "#a46ede",
"totalLineColor": "#cecece",
"labelFontFamily": "Open Sans, sans-serif",
"labelFontSize": "0.75rem",
"labelFontStyle": "normal",
"labelFontWeight": "400",
"labelFontColor": "#000000",
+ "labelFontColorOnDark": "#ffffff",
"labelFontTextTransform": "uppercase",
"valueFontFamily": "Open Sans, sans-serif",
"valueFontSize": "0.75rem",
"valueFontStyle": "normal",
"valueFontWeight": "400",
"valueFontColor": "#000000",
+ "valueFontColorOnDark": "#ffffff",
"valueFontTextTransform": "uppercase",
+ "helperTextFontColor": "#000000",
+ "helperTextFontColorOnDark": "#ffffff",
+ "helperTextFontSize": "0.75rem",
+ "helperTextFontStyle": "normal",
+ "helperTextFontWeight": "400",
+ "helperTextFontFamily": "Open Sans, sans-serif",
"thickness": "9px",
"borderRadius": "5px",
"overlayColor": "#000000",
@@ -564,9 +581,7 @@
"fontWeight": "400"
},
"select": {
- "checkboxOptionSpacing": "12px",
- "color": "#000000",
- "colorOnDark": "#FFFFFF",
+ "optionCheckboxSpacing": "12px",
"disabledColor": "#b1b1b1",
"disabledColorOnDark": "#575757",
"errorColor": "#D0011B",
@@ -574,11 +589,11 @@
"focusColor": "#005FCC",
"focusColorOnDark": "#005FCC",
"fontFamily": "Open Sans, sans-serif",
- "hoveredOptionBackgroundColor": "#f2f2f2",
- "hoveredOptionBackgroundColorOnDark": "#f2f2f2",
- "iconColor": "",
- "iconOptionSpacing": "12px",
- "iconSize": "20px",
+ "hoverOptionBackgroundColor": "#f2f2f2",
+ "hoverOptionBackgroundColorOnDark": "#f2f2f2",
+ "optionIconColor": "#000000",
+ "optionIconSpacing": "12px",
+ "optionIconSize": "20px",
"labelFontSize": "1rem",
"labelFontStyle": "normal",
"labelFontWeight": "400",
@@ -586,14 +601,14 @@
"optionPaddingTop": "6px",
"optionPaddingLeft": "16px",
"optionPaddingRight": "16px",
- "optionsBackgroundColor": "#FFFFFF",
- "optionsBorderColor": "none",
- "optionsBorderThickness": "0px",
- "optionsBorderStyle": "solid",
- "optionsFontColor": "",
- "optionsFontSize": "16px",
- "optionsFontStyle": "normal",
- "optionsFontWeight": "400",
+ "optionBackgroundColor": "#FFFFFF",
+ "optionBorderColor": "none",
+ "optionBorderThickness": "0px",
+ "optionBorderStyle": "solid",
+ "optionFontColor": "",
+ "optionFontSize": "16px",
+ "optionFontStyle": "normal",
+ "optionFontWeight": "400",
"scrollBarThumbColor": "#666666",
"scrollBarTrackColor": "#D9D9D9",
"selectedOptionBackgroundColor": "#D9D9D9",
@@ -603,11 +618,6 @@
"backgroundColor": "#F8F8F8",
"arrowContainerColor": "#D9D9D9",
"arrowColor": "#000000",
- "customContentFontFamily": "Open Sans, sans-serif",
- "customContentFontSize": "16px",
- "customContentFontStyle": "normal",
- "customContentFontWeight": "400",
- "customContentFontColor": "#000000",
"titleFontFamily": "Open Sans, sans-serif",
"titleFontSize": "1.5rem",
"titleFontStyle": "normal",
@@ -651,23 +661,28 @@
"thumbBackgroundColor": "#0067b3",
"thumbBackgroundColorOnDark": "#0095ff",
"activeThumbBackgroundColor": "#003c66",
- "activeThumbBackgroundColorOnDark": "#0067b3",
- "dotsSize": "4px",
- "dotsVerticalPosition": "-1px",
- "tickMarkBackgroundColor": "#0067b3",
- "tickMarkBackgroundColorOnDark": "#0095ff",
+ "activeThumbBackgroundColorOnDark": "#003c66",
+ "hoverThumbBackgroundColor": "#003c66",
+ "hoverThumbBackgroundColorOnDark": "#003c66",
+ "focusThumbBackgroundColor": "#003c66",
+ "focusThumbBackgroundColorOnDark": "#0095ff",
+ "tickSize": "4px",
+ "tickVerticalPosition": "-1px",
+ "tickBackgroundColor": "#0067b3",
+ "tickBackgroundColorOnDark": "#0095ff",
"lineThickness": "2px",
"lineVerticalPosition": "0px",
"trackLineColor": "#0067b3",
"trackLineColorOnDark": "#0095ff",
"totalLineColor": "#e6e6e6",
"totalLineColorOnDark": "#bfbfbf",
+ "disabledFontColor": "#999999",
"disabledThumbVerticalPosition": "-6px",
"disabledThumbBackgroundColor": "#bfbfbf",
"disabledThumbBackgroundColorOnDark": "#999999",
- "disabledDotsVerticalPosition": "-1px",
- "disabledTickMarkBackgroundColor": "#bfbfbf",
- "disabledTickMarkBackgroundColorOnDark": "#999999",
+ "disabledTickVerticalPosition": "-1px",
+ "disabledTickBackgroundColor": "#bfbfbf",
+ "disabledTickBackgroundColorOnDark": "#999999",
"disabledTrackLineColor": "#e6f4ff",
"disabledTrackLineColorOnDark": "#999999",
"disabledTotalLineColor": "#f2f2f2",
@@ -829,45 +844,47 @@
"badgeRadiusWithNotificationNumber": "10px"
},
"textarea": {
- "disabledFontColor": "#b1b1b1",
- "disabledFontColorOnDark": "#575757",
+ "fontFamily": "Open Sans, sans-serif",
"errorColor": "#D0011B",
"errorColorOnDark": "#FE344F",
- "assistiveTextFontFamily": "Open Sans, sans-serif",
"assistiveTextFontSize": "0.75rem",
"assistiveTextFontStyle": "normal",
"assistiveTextFontWeight": "400",
"assistiveTextFontColor": "#000000",
"assistiveTextFontColorOnDark": "#ffffff",
- "assistiveTextLetterSpacing": "",
- "customContentFontFamily": "Open Sans, sans-serif",
- "customContentFontSize": "1rem",
- "customContentFontStyle": "normal",
- "customContentFontWeight": "400",
- "customContentFontColor": "#000000",
- "customContentFontColorOnDark": "#ffffff",
- "customContentLetterSpacing": "0",
- "customContentLineHeight": "1.1875em",
- "labelFontFamily": "Open Sans, sans-serif",
+ "assistiveTextLetterSpacing": "0em",
+ "valueFontSize": "1rem",
+ "valueFontStyle": "normal",
+ "valueFontWeight": "400",
+ "valueFontColor": "#000000",
+ "valueFontColorOnDark": "#ffffff",
+ "valueLetterSpacing": "0",
+ "valueLineHeight": "1.1875em",
"labelFontSize": "1rem",
"labelFontStyle": "normal",
"labelFontWeight": "400",
"labelFontColor": "#000000",
"labelFontColorOnDark": "#ffffff",
- "labelLetterSpacing": "",
+ "labelLetterSpacing": "0em",
"scrollBarThumbColor": "#666666",
"scrollBarThumbColorOnDark": "#ffffff",
"scrollBarTrackColor": "#D9D9D9",
- "scrollBarTrackColorOnDark": "#999999"
+ "scrollBarTrackColorOnDark": "#999999",
+ "disabledColor": "#b1b1b1",
+ "disabledColorOnDark": "#575757",
+ "underlineColor": "#000000",
+ "underlineColorOnDark": "#ffffff",
+ "underlineFocusColor": "#000000",
+ "underlineFocusColorOnDark": "#ffffff",
+ "underlineThickness": "1px"
},
"toggleGroup": {
"fontFamily": "Open Sans, sans-serif",
- "fontSize": "0.875rem",
+ "fontSize": "1rem",
"fontStyle": "normal",
"fontWeight": "400",
- "fontTextTransform": "uppercase",
"fontLetterSpacing": "0.05em",
- "focusColor": "#005FCC",
+ "focusColor": "#0095ff",
"selectedBackgroundColor": "#5f249f",
"selectedHoverBackgroundColor": "#4b1c7d",
"selectedActiveBackgroundColor": "#321353",
@@ -881,11 +898,15 @@
"selectedDisabledFontColor": "#cbacec",
"unselectedDisabledBackgroundColor": "#f2f2f2",
"unselectedDisabledFontColor": "#999999",
- "iconSize": "20px",
+ "iconSize": "24px",
"iconPaddingRight": "8px",
"iconPaddingLeft": "8px",
+ "iconPaddingTop": "8px",
+ "iconPaddingBottom": "8px",
"labelPaddingLeft": "24px",
- "labelPaddingRight": "24px"
+ "labelPaddingRight": "24px",
+ "labelPaddingTop": "8px",
+ "labelPaddingBottom": "8px"
},
"upload": {
"fontFamily": "Open Sans, sans-serif",
@@ -894,10 +915,9 @@
"scrollBarTrackColor": "#D9D9D9",
"errorColor": "#D0011B",
"backgroundColor": "#ffffff",
- "draggingAreaBackgroundColor": "#f2f2f2",
+ "draggingStateBackgroundColor": "#f2f2f2",
"dragAndDropIconColor": "#5f249f",
- "dragAndDropIconHeight": "43.5px",
- "dragAndDropIconWidth": "43.5px",
+ "dragAndDropIconSize": "43.5px",
"dragAndDropTitleFontSize": "1.25rem",
"dragAndDropTitleFontStyle": "normal",
"dragAndDropTitleFontWeight": "bold",
@@ -905,29 +925,25 @@
"dragAndDropTitleFontColor": "#000000",
"dragAndDropDescriptionFontSize": "1rem",
"dragAndDropDescriptionFontStyle": "italic",
- "dragAndDropDescriptionFontWeight": "normal",
- "dragAndDropTextDescriptionFontTextTransform": "none",
- "dragAndDropTextDescriptionFontColor": "#666666",
+ "dragAndDropDescriptionFontWeight": "400",
+ "dragAndDropDescriptionFontTextTransform": "none",
+ "dragAndDropDescriptionFontColor": "#666666",
"dragAndDropDraggingStateIconColor": "#666666",
- "dragAndDropDraggingStateIconHeight": "43.5px",
- "dragAndDropDraggingStateIconWidth": "43.5px",
+ "dragAndDropDraggingStateIconSize": "43.5px",
"dragAndDropDraggingStateFontSize": "1rem",
"dragAndDropDraggingStateFontStyle": "normal",
- "dragAndDropDraggingStateFontWeight": "normal",
- "dragAndDropTextDraggingStateFontTextTransform": "none",
- "dragAndDropTextDraggingStateFontColor": "#666666",
+ "dragAndDropDraggingStateFontWeight": "400",
+ "dragAndDropDraggingStateFontTextTransform": "none",
+ "dragAndDropDraggingStateFontColor": "#666666",
"dragAndDropAreaIconColor": "#000000",
- "dragAndDropAreaIconHeight": "24px",
- "dragAndDropAreaIconWidth": "24px",
+ "dragAndDropAreaIconSize": "24px",
"dragAndDropAreaTextFontSize": "0.75rem",
"dragAndDropAreaTextFontStyle": "normal",
"dragAndDropAreaTextFontWeight": "400",
"dragAndDropAreaTextFontTextTransform": "none",
"dragAndDropAreaTextFontColor": "#000000",
"fileDeleteIconColor": "#000000",
- "fileDeleteIconHeight": "24px",
- "fileDeleteIconWidth": "30px",
- "fileHoverColor": "#eeeeee",
+ "fileDeleteIconSize": "24px",
"fileUnderlineColor": "#D9D9D9",
"fileUnderlineThickness": "1px",
"fileNameFontSize": "1rem",
@@ -940,20 +956,20 @@
"fileTypeFontWeight": "400",
"fileTypeFontTextTransform": "uppercase",
"fileTypeFontColor": "#000000",
- "fileUploadedIconColor": "#000000",
- "fileUploadedIconHeight": "24px",
- "fileUploadedIconWidth": "24px",
- "filesUploadedTitleFontSize": "1.25rem",
- "filesUploadedTitleFontStyle": "normal",
- "filesUploadedTitleFontWeight": "400",
- "filesUploadedTitleFontTextTransform": "none",
- "filesUploadedTitleFontColor": "#000000",
- "filesUploadedSubtitleFontSize": "0.875rem",
- "filesUploadedSubtitleFontStyle": "normal",
- "filesUploadedSubtitleFontWeight": "400",
- "filesUploadedSubtitleFontTextTransform": "none",
- "filesUploadedSubtitleFontColor": "#666666",
- "filesUploadedNumberFontWeight": "bold"
+ "hoverFileColor": "#eeeeee",
+ "uploadedFileIconColor": "#000000",
+ "uploadedFileIconSize": "24px",
+ "uploadedFilesTitleFontSize": "1.25rem",
+ "uploadedFilesTitleFontStyle": "normal",
+ "uploadedFilesTitleFontWeight": "400",
+ "uploadedFilesTitleFontTextTransform": "none",
+ "uploadedFilesTitleFontColor": "#000000",
+ "uploadedFilesSubtitleFontSize": "0.875rem",
+ "uploadedFilesSubtitleFontStyle": "normal",
+ "uploadedFilesSubtitleFontWeight": "400",
+ "uploadedFilesSubtitleFontTextTransform": "none",
+ "uploadedFilesSubtitleFontColor": "#666666",
+ "uploadedFilesNumberFontWeight": "bold"
},
"wizard": {
"disabledBackgroundColor": "#D9D9D9",
@@ -967,8 +983,7 @@
"stepContainerBackgroundColor": "#ffffff",
"stepContainerSelectedFontColor": "#ffffff",
"stepContainerSelectedBackgroundColor": "#6f2c91",
- "stepContainerIconHeight": "19px",
- "stepContainerIconWidth": "19px",
+ "stepContainerIconSize": "20px",
"labelFontSize": "1rem",
"labelFontFamily": "Open Sans, sans-serif",
"labelFontStyle": "normal",
@@ -976,7 +991,7 @@
"labelLetterSpacing": "0",
"labelFontTextTransform": "none",
"labelFontColor": "#666666",
- "labelActiveFontColor": "#000000",
+ "visitedLabelFontColor": "#000000",
"labelTextAlign": "left",
"descriptionFontSize": "0.75rem",
"descriptionFontFamily": "Open Sans, sans-serif",
@@ -985,7 +1000,7 @@
"descriptionLetterSpacing": "0.025em",
"descriptionFontTextTransform": "none",
"descriptionFontColor": "#666666",
- "descriptionActiveFontColor": "#000000",
+ "visitedDescriptionFontColor": "#000000",
"descriptionTextAlign": "left",
"circleWidth": "32px",
"circleHeight": "32px",
@@ -993,20 +1008,21 @@
"circleBorderStyle": "solid",
"circleBorderRadius": "45px",
"circleBorderColor": "#000000",
- "circleSelectedWidth": "32px",
- "circleSelectedHeight": "32px",
- "circleSelectedBorderThickness": "2px",
- "circleSelectedBorderStyle": "solid",
- "circleSelectedBorderRadius": "45px",
- "circleSelectedBorderColor": "#6f2c91",
- "circleDisabledWidth": "32px",
- "circleDisabledHeight": "32px",
- "circleDisabledBorderThickness": "2px",
- "circleDisabledBorderStyle": "solid",
- "circleDisabledBorderRadius": "45px",
- "circleDisabledBorderColor": "#D9D9D9",
+ "selectedCircleWidth": "32px",
+ "selectedCircleHeight": "32px",
+ "selectedCircleBorderThickness": "2px",
+ "selectedCircleBorderStyle": "solid",
+ "selectedCircleBorderRadius": "45px",
+ "selectedCircleBorderColor": "#6f2c91",
+ "disabledCircleWidth": "32px",
+ "disabledCircleHeight": "32px",
+ "disabledCircleBorderThickness": "2px",
+ "disabledCircleBorderStyle": "solid",
+ "disabledCircleBorderRadius": "45px",
+ "disabledCircleBorderColor": "#D9D9D9",
"separatorBorderThickness": "1px",
"separatorBorderStyle": "solid",
- "separatorColor": "#D9D9D9"
+ "separatorColor": "#D9D9D9",
+ "focusColor": "#005FCC"
}
}
diff --git a/projects/dxc-ngx-cdk/src/lib/theme/test/advancedThemeBindingStrategy.spec.ts b/projects/dxc-ngx-cdk/src/lib/theme/test/advancedThemeBindingStrategy.spec.ts
index 966eb6e25..53ef29090 100644
--- a/projects/dxc-ngx-cdk/src/lib/theme/test/advancedThemeBindingStrategy.spec.ts
+++ b/projects/dxc-ngx-cdk/src/lib/theme/test/advancedThemeBindingStrategy.spec.ts
@@ -4,47 +4,45 @@ import { componentTokens } from '../componentTokens';
const advancedTheme = {
"accordion": {
- "backgroundColor": "#FABADA",
- "arrowColor": "#6f2c91",
- "fontColorBase": "#666666",
- "hoverBackgroundColor": "#f5ebf9",
- "disabledFontColor": "#bfbfbf",
- "customContentFontFamily": "Open Sans, sans-serif",
- "customContentFontSize": "1rem",
- "customContentFontWeight": "300",
- "customContentFontColor": "#000000",
- "customContentPanelHeight":"22px",
+ "backgroundColor": "#ffffff",
+ "disabledBackgroundColor": "transparent",
+ "hoverBackgroundColor": "#f2eafa",
+ "arrowColor": "#5f249f",
+ "disabledArrowColor": "#999999",
"assistiveTextFontFamily": "Open Sans, sans-serif",
"assistiveTextFontSize": "1rem",
"assistiveTextFontWeight": "300",
"assistiveTextFontStyle": "italic",
- "assistiveTextFontColor": "#000000",
"assistiveTextLetterSpacing": "0.025em",
+ "assistiveTextFontColor": "#666666",
+ "disabledAssistiveTextFontColor": "#999999",
"assistiveTextMinWidth": "100px",
- "assistiveTextPaddingLeft":"0px",
- "assistiveTextPaddingRight":"0px",
+ "assistiveTextPaddingRight": "24px",
+ "assistiveTextPaddingLeft": "0px",
"titleLabelFontFamily": "Open Sans, sans-serif",
"titleLabelFontSize": "1rem",
"titleLabelFontWeight": "400",
"titleLabelFontStyle": "normal",
- "titleLabelFontColor": "",
- "titleLabelPaddingLeft": "32px",
+ "titleLabelFontColor": "#000000",
+ "disabledTitleLabelFontColor": "#999999",
+ "titleLabelPaddingLeft": "0px",
"titleLabelPaddingRight": "16px",
- "titlePaddingTop": "0px",
- "titlePaddingBottom": "0px",
- "titleFocusBorderStyle": "solid",
- "titleFocusBorderThickness": "1px",
- "titleFocusBorderColor": "#6f2c91",
+ "titleLabelPaddingTop": "0px",
+ "titleLabelPaddingBottom": "0px",
+ "focusBorderStyle": "solid",
+ "focusBorderThickness": "2px",
+ "focusBorderColor": "#0095ff",
"borderRadius": "4px",
"boxShadowOffsetX": "0px",
"boxShadowOffsetY": "6px",
"boxShadowBlur": "10px",
- "boxShadowColor": "#00000024",
- "iconMaxHeight": "24px",
- "iconMaxWidth": "24px",
+ "boxShadowColor": "#0000001a",
+ "iconColor": "#5f249f",
+ "disabledIconColor": "#999999",
+ "iconSize": "24px",
"iconMarginLeft": "0px",
"iconMarginRigth": "12px",
- "accordionGroupSeparatorBorderColor": "#00000024",
+ "accordionGroupSeparatorBorderColor": "#0000001a",
"accordionGroupSeparatorBorderThickness": "1px",
"accordionGroupSeparatorBorderRadius": "0px",
"accordionGroupSeparatorBorderStyle": "solid"