Fixed various theming issues and added mediaco theme (#393)

* Fixed various theming issues and added mediaco theme

* Renamed mediaco theme

---------

Co-authored-by: Sharma <[email protected]>

Author: vishalshrm539

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;

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;

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;
 }

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 {

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 {

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;

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);