diff --git a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/wss-quick-create/wss-quick-create.component.scss b/packages/angular-sdk-components/src/lib/_components/designSystemExtension/wss-quick-create/wss-quick-create.component.scss index 56796509..254290d9 100644 --- a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/wss-quick-create/wss-quick-create.component.scss +++ b/packages/angular-sdk-components/src/lib/_components/designSystemExtension/wss-quick-create/wss-quick-create.component.scss @@ -23,7 +23,6 @@ .quick-link-button { text-transform: capitalize !important; font-size: 16px !important; - color: var(--app-form-color) !important; cursor: pointer; padding: calc(0.5rem * 2) !important; height: 10rem; diff --git a/packages/angular-sdk-components/src/lib/_components/infra/multi-step/multi-step.component.scss b/packages/angular-sdk-components/src/lib/_components/infra/multi-step/multi-step.component.scss index 726f7d39..11dfa7df 100644 --- a/packages/angular-sdk-components/src/lib/_components/infra/multi-step/multi-step.component.scss +++ b/packages/angular-sdk-components/src/lib/_components/infra/multi-step/multi-step.component.scss @@ -7,12 +7,6 @@ min-width: unset; } -.psdk-icon-current { -} - -.psdk-icon-not-current { -} - .psdk-current-svg-icon { width: 1rem; filter: var(--app-primary-color-filter); @@ -33,9 +27,11 @@ mat-horizontal-stepper { .psdk-sub-step-current { padding-left: 0.625rem; font-weight: bold; + color: var(--mat-sys-on-secondary-container); } .psdk-sub-step-not-current { + color: var(--mat-sys-on-surface-variant); padding-left: 0.625rem; } @@ -76,6 +72,7 @@ mat-horizontal-stepper { .psdk-vertical-step-icon { margin-right: 12px; + background-color: var(--mat-sys-secondary); border-radius: 50%; height: 24px; width: 24px; @@ -92,6 +89,8 @@ mat-horizontal-stepper { .psdk-vertical-step-icon-selected { margin-right: 12px; + background-color: var(--mat-sys-primary); + color: var(--mat-sys-surface); border-radius: 50%; height: 24px; width: 24px; @@ -100,6 +99,7 @@ mat-horizontal-stepper { } .psdk-vertical-step-label { + color: var(--mat-sys-on-surface-variant); display: inline-block; white-space: nowrap; overflow: hidden; @@ -111,6 +111,7 @@ mat-horizontal-stepper { } .psdk-vertical-step-label-selected { + color: var(--mat-sys-on-secondary-container); display: inline-block; white-space: nowrap; overflow: hidden; @@ -169,6 +170,8 @@ mat-horizontal-stepper { } .psdk-horizontal-step-icon { + background-color: var(--mat-sys-secondary); + color: var(--mat-sys-surface); border-radius: 50%; height: 24px; width: 24px; @@ -188,6 +191,8 @@ mat-horizontal-stepper { } .psdk-horizontal-step-icon-selected { + background-color: var(--mat-sys-primary); + color: var(--mat-sys-surface); border-radius: 50%; height: 24px; width: 24px; @@ -199,6 +204,7 @@ mat-horizontal-stepper { } .psdk-horizontal-step-label { + color: var(--mat-sys-on-surface-variant); display: inline-block; min-width: 50px; vertical-align: middle; @@ -208,6 +214,7 @@ mat-horizontal-stepper { } .psdk-horizontal-step-label-selected { + color: var(--mat-sys-on-secondary-container); display: inline-block; min-width: 50px; vertical-align: middle; diff --git a/packages/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.scss b/packages/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.scss index 3e217938..225f9aa9 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.scss +++ b/packages/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.scss @@ -5,7 +5,7 @@ table { width: 100%; - border-bottom: 1px solid var(--app-neutral-light-color); + border-bottom: 1px solid var(--mat-sys-on-secondary-container); } .search-label { @@ -176,7 +176,7 @@ tr.mat-mdc-row { ::ng-deep th.mat-mdc-header-cell, td.mat-mdc-cell, td.mat-mdc-footer-cell { - border-right: 1px solid var(--app-neutral-light-color); + border-right: 1px solid var(--mat-sys-on-secondary-container); padding: 8px !important; // min-width: 10rem; } diff --git a/packages/angular-sdk-components/src/lib/_components/widget/attachment/attachment.component.scss b/packages/angular-sdk-components/src/lib/_components/widget/attachment/attachment.component.scss index 067a4b08..8e848b4f 100644 --- a/packages/angular-sdk-components/src/lib/_components/widget/attachment/attachment.component.scss +++ b/packages/angular-sdk-components/src/lib/_components/widget/attachment/attachment.component.scss @@ -45,7 +45,7 @@ } .psdk-attachment-list { - border: 1px solid var(--app-neutral-color); + border: 1px solid var(--mat-sys-secondary); } ::ng-deep .mat-mdc-form-field-infix { @@ -90,7 +90,7 @@ } .psdk-attachment-list { - border: 1px solid var(--app-neutral-color); + border: 1px solid var(--mat-sys-secondary); } ::ng-deep .mat-mdc-form-field-infix { diff --git a/packages/angular-sdk-components/src/lib/_components/widget/todo/todo.component.scss b/packages/angular-sdk-components/src/lib/_components/widget/todo/todo.component.scss index 968c9329..c3232201 100644 --- a/packages/angular-sdk-components/src/lib/_components/widget/todo/todo.component.scss +++ b/packages/angular-sdk-components/src/lib/_components/widget/todo/todo.component.scss @@ -13,6 +13,8 @@ padding: 1rem; background-color: var(--mat-sys-surface-container); border-radius: 0.6125rem; + border-left: 6px solid; + border-left-color: var(--mat-sys-primary); } .psdk-todo-header { diff --git a/projects/angular-test-app/src/app/_samples/full-portal/full-portal.component.scss b/projects/angular-test-app/src/app/_samples/full-portal/full-portal.component.scss index 6e471ea8..f7deec1b 100644 --- a/projects/angular-test-app/src/app/_samples/full-portal/full-portal.component.scss +++ b/projects/angular-test-app/src/app/_samples/full-portal/full-portal.component.scss @@ -46,7 +46,7 @@ right: 1em; background: none; font-size: 1em; - border: 3px solid var(--app-neutral-color); + border: 3px solid var(--mat-sys-secondary); border-radius: 10px; padding: 8px 2em; font-weight: 500; diff --git a/projects/angular-test-app/src/themes.scss b/projects/angular-test-app/src/themes.scss index 72a809de..811af714 100644 --- a/projects/angular-test-app/src/themes.scss +++ b/projects/angular-test-app/src/themes.scss @@ -267,6 +267,16 @@ ); } +.mediaco { + @include mat.theme( + ( + color: mat.$magenta-palette, + typography: Roboto, + density: 0 + ) + ); +} + //Mixins @mixin generate-theme-vars() { --app-alert-error-color: rgb(82, 21, 8);