@pepperi-addons/ngx-lib 0.4.2-storybook.1 → 0.5.0-ng15.2

package/src/core/style/base/base.scss

@@ -103,25 +103,32 @@
 //  Override material style
 // -----------------------------------------------------
 // remove the circle when checkbox clicked
-.mat-ripple-element {
+.mat-ripple-element,
+.mat-mdc-ripple-element {
     display: none;
 }
 
 //  Tabs.
 // -----------------------------------------------------
-.mat-tab-group {
-    .mat-tab-header {
-        .mat-tab-labels {
+.mat-tab-group,
+.mat-mdc-tab-group {
+    .mat-tab-header,
+    .mat-mdc-tab-header {
+        .mat-tab-labels,
+        .mat-mdc-tab-labels {
             height: variables.$tabs-labels-height;
             box-sizing: content-box;
 
-            .mat-tab-label {
+            .mat-tab-label, 
+            .mat-mdc-tab-label,
+            .mdc-tab__text-label{
                 height: inherit;
                 opacity: unset;
                 min-width: unset;
                 padding: 0 variables.$spacing-2xl;
 
-                &.mat-tab-label-active {
+                &.mat-tab-label-active,
+                .mdc-tab--active .mdc-tab__text-label{
                     font-weight: variables.$font-weight-bold;
                 }
             }
@@ -130,23 +137,26 @@
 
     $tabs-z-index: variables.$z-index-lowest;
 
-    .mat-tab-body-wrapper {
+    .mat-tab-body-wrapper,
+    .mat-mdc-tab-body-wrapper {
         // margin: 0 calc(#{variables.$content-margin} * -1);
 
-        .mat-tab-body {
+        .mat-tab-body, .mat-mdc-tab-body {
             z-index: $tabs-z-index - 1;
             padding-top: variables.$content-padding;
 
-            &:not(.mat-tab-body-active) {
-                .mat-tab-body-content {
+            &:not(.mat-tab-body-active), &:not(.mat-mdc-tab-body-active) {
+                .mat-tab-body-content, 
+                .mat-mdc-tab-body-content {
                     overflow: hidden;
                 }
             }
 
-            &.mat-tab-body-active {
+            &.mat-tab-body-active, &.mat-mdc-tab-body-active {
                 z-index: $tabs-z-index;
 
-                .mat-tab-body-content {
+                .mat-tab-body-content,
+                .mat-mdc-tab-body-content {
                     padding: 0 variables.$content-padding variables.$content-padding;
                     line-height: normal;
                 }
@@ -155,7 +165,8 @@
     }
 
     &.fixed-header {
-        .mat-tab-header {
+        .mat-tab-header,
+        .mat-mdc-tab-header {
             // position: fixed;
             position: unset;
             z-index: $tabs-z-index + 1;
@@ -163,7 +174,8 @@
             // @include mixins.mat-tabs-fixed-header-width(variables.$side-bar-width);
         }
 
-        .mat-tab-body-wrapper {
+        .mat-tab-body-wrapper,
+        .mat-mdc-tab-body-wrapper {
             // margin-top: variables.$tabs-labels-height;
             margin-top: unset;
         }
@@ -172,36 +184,48 @@
 
 //  Accordion.
 // -----------------------------------------------------
-.mat-accordion .mat-expansion-panel {
-    mat-expansion-panel-header:focus {
-        outline-width: 0;
+.mat-accordion,
+.mat-mdc-accordion {
+    .mat-expansion-panel,
+    .mat-mdc-expansion-panel {
+        mat-expansion-panel-header:focus {
+            outline-width: 0;
+        }
     }
 }
 
 .pepperi-accordion, .pep-accordion {
-    &.mat-accordion .mat-expansion-panel {
-        padding: 0 variables.$content-padding;
-        margin: 0 calc(#{variables.$content-padding} * -1);
+    &.mat-accordion,
+    &.mat-mdc-accordion {
+        .mat-expansion-panel,
+        .mat-mdc-expansion-panel {
+            padding: 0 variables.$content-padding;
+            margin: 0 calc(#{variables.$content-padding} * -1);
 
-        &:first-child {
-            .mat-expansion-panel-header {
-                border-radius: variables.$spacing-xs variables.$spacing-xs 0 0;
+            &:first-child {
+                .mat-expansion-panel-header,
+                .mat-mdc-expansion-panel-header {
+                    border-radius: variables.$spacing-xs variables.$spacing-xs 0 0;
+                }
             }
         }
 
-        .mat-expansion-panel-header {
+        .mat-expansion-panel-header,
+        .mat-mdc-expansion-panel-header {
             flex-flow: row-reverse;
             height: variables.$spacing-5xl;
             padding: variables.$spacing-lg variables.$spacing-sm variables.$spacing-sm;
 
-            .mat-expansion-panel-header-title {
+            .mat-expansion-panel-header-title,
+            .mat-mdc-expansion-panel-header-title {
                 display: flex;
                 align-items: center;
                 margin: 0;
                 padding: variables.$spacing-xs variables.$spacing-lg;
             }
 
-            .mat-expansion-indicator {
+            .mat-expansion-indicator,
+            .mat-mdc-expansion-indicator {
                 // height: 1.5rem;
                 display: flex;
                 transform: scale(1.25) !important;
@@ -217,19 +241,24 @@
                 }
             }
 
-            &.mat-expanded {
-                .mat-expansion-indicator {
+            &.mat-expanded,
+            &.mat-mdc-expanded {
+                .mat-expansion-indicator,
+                .mat-mdc-expansion-indicator {
                     transform: rotate(180deg) scale(1.25) !important;
                 }
 
-                .mat-expansion-panel-header-title {
+                .mat-expansion-panel-header-title,
+                .mat-mdc-expansion-panel-header-title {
                     font-weight: variables.$font-weight-bold;
                 }
             }
         }
 
-        .mat-expansion-panel-content {
-            .mat-expansion-panel-body {
+        .mat-expansion-panel-content,
+        .mat-mdc-expansion-panel-content {
+            .mat-expansion-panel-body,
+            .mat-mdc-expansion-panel-body {
                 padding: variables.$content-padding 0;
             }
         }
@@ -242,23 +271,27 @@
 }
 
 .pepperi-accordion2, .pep-accordion2 {
-    &.mat-accordion .mat-expansion-panel {
+    &.mat-accordion .mat-expansion-panel, 
+    &.mat-mdc-accordion .mat-mdc-expansion-panel {
         // padding: 0 variables.$content-padding;
         // margin: 0 calc(#{variables.$content-padding} * -1);
 
-        .mat-expansion-panel-header {
+        .mat-expansion-panel-header, 
+        .mat-mdc-expansion-panel-header {
             flex-flow: row-reverse;
             height: variables.$spacing-4xl;
             // padding: variables.$spacing-lg 0 variables.$spacing-sm;
             padding: 0;
 
-            .mat-expansion-panel-header-title {
+            .mat-expansion-panel-header-title,
+            .mat-mdc-expansion-panel-header-title {
                 display: flex;
                 align-items: center;
                 margin: 0;
                 padding: variables.$spacing-xs 0;
 
-                .mat-icon {
+                .mat-icon,
+                .mat-mdc-icon {
                     height: 1rem;
                     width: 1rem;
                     @include mixins.align-center();
@@ -272,8 +305,10 @@
             // }
         }
 
-        .mat-expansion-panel-content {
-            .mat-expansion-panel-body {
+        .mat-expansion-panel-content,
+        .mat-mdc-expansion-panel-content {
+            .mat-expansion-panel-body,
+            .mat-mdc-expansion-panel-body {
                 padding: variables.$spacing-sm variables.$spacing-xs;
             }
         }
@@ -286,25 +321,30 @@
 }
 
 .pepperi-chips, .pep-chips {
-    &.mat-accordion .mat-expansion-panel {
+    &.mat-accordion .mat-expansion-panel,
+    &.mat-mdc-accordion .mat-mdc-expansion-panel {
         $shadow-bottom: variables.$spacing-xl;
 
         margin: calc(#{variables.$spacing-sm} * -1) calc(#{variables.$spacing-lg} * -1) variables.$spacing-md !important;
         // margin-bottom: variables.$spacing-md;
         border-radius: unset;
 
-        &.mat-expansion-panel-spacing {
+        &.mat-expansion-panel-spacing,
+        &.mat-mdc-expansion-panel-spacing {
             margin: 0;
         }
 
-        .mat-expansion-panel-header {
+        .mat-expansion-panel-header,
+        .mat-mdc-expansion-panel-header {
             padding: 0;
 
-            .mat-content {
+            .mat-content,
+            .mat-mdc-content {
                 overflow: inherit;
             }
 
-            .mat-expansion-panel-header-title {
+            .mat-expansion-panel-header-title,
+            .mat-mdc-expansion-panel-header-title {
                 flex-grow: 0;
                 width: fit-content;
                 height: variables.$spacing-3xl;
@@ -316,8 +356,10 @@
                 // margin-bottom: variables.$shadow-bottom;
             }
 
-            &.mat-expanded {
-                .mat-expansion-panel-header-title {
+            &.mat-expanded,
+            &.mat-mdc-expanded {
+                .mat-expansion-panel-header-title,
+                .mat-mdc-expansion-panel-header-title {
                     position: absolute;
                     font-weight: variables.$font-weight-bold;
                 }
@@ -326,15 +368,18 @@
             &.separator {
                 height: variables.$spacing-sm;
 
-                .mat-expansion-panel-header-title {
+                .mat-expansion-panel-header-title,
+                .mat-mdc-expansion-panel-header-title {
                     width: 100%;
                     height: 1px;
                 }
             }
         }
 
-        .mat-expansion-panel-content {
-            .mat-expansion-panel-body {
+        .mat-expansion-panel-content,
+        .mat-mdc-expansion-panel-content {
+            .mat-expansion-panel-body,
+            .mat-mdc-expansion-panel-body {
                 padding: 0 calc(#{variables.$content-padding} + #{variables.$spacing-md});
 
                 .expansion-content {
@@ -361,35 +406,43 @@
 
 // Auto complete.
 // -----------------------------------------------------
-.mat-autocomplete-panel {
+.mat-autocomplete-panel,
+.mat-mdc-autocomplete-panel {
     margin-top: variables.$spacing-sm;
     border-radius: variables.$border-radius-md;
 
-    .mat-option:active {
+    .mat-option:active,
+    .mat-mdc-option:active {
         transition: 0.3ms;
     }
 }
 
 //  Menu.
 // -----------------------------------------------------
-.mat-menu-panel {
+.mat-menu-panel,
+.mat-mdc-menu-panel {
     box-sizing: content-box;
 
-    .mat-menu-content {
+    .mat-menu-content,
+    .mat-mdc-menu-content {
         padding: 0 !important;
 
-        .mat-menu-item {
+        .mat-menu-item,
+        .mat-mdc-menu-item {
             padding: 0 variables.$content-padding;
             display: flex;
             align-items: center;
         }
     }
 
-    &.pep-select-menu {
-        .mat-menu-content {
+    &.pep-select-menu,
+    &.mat-mdc-select-menu {
+        .mat-menu-content,
+        .mat-mdc-menu-content {
             padding: 0 !important;
 
-            .mat-menu-item {
+            .mat-menu-item,
+            .mat-mdc-menu-item {
                 height: variables.$spacing-4xl;
                 padding: 0 variables.$spacing-md;
                 border-radius: unset;
@@ -399,10 +452,12 @@
 
     &.pep-action-menu,
     &.pep-action-select-menu {
-        .mat-menu-content {
+        .mat-menu-content,
+        .mat-mdc-menu-content {
             padding: variables.$spacing-sm !important;
             
-            .mat-menu-item {
+            .mat-menu-item,
+            .mat-mdc-menu-item {
                 height: variables.$spacing-3xl;
                 padding: 0 variables.$spacing-sm;
                 border-radius: variables.$border-radius-md;
@@ -413,7 +468,8 @@
 
 //  Dialog
 // -------------------------------------------------
-.mat-dialog-container {
+.mat-dialog-container,
+.mat-mdc-dialog-container {
     border-radius: 0.25rem !important; // variables.$border-radius-md
 }
 
@@ -423,7 +479,8 @@
 
     $dialog-content-padding: variables.$content-padding;
 
-    .mat-dialog-container {
+    .mat-dialog-container,
+    .mat-mdc-dialog-container {
         border-radius: 0.25rem !important;
         padding: variables.$content-padding;
 
@@ -435,6 +492,7 @@
             grid-template-areas: "title close";
 
             .dialog-title {
+                @include mixins.font-title(variables.$fs-2xl,variables.$lh-2xl);
                 @include mixins.ellipsis();
                 grid-area: title;
 
@@ -450,7 +508,8 @@
             }
         }
 
-        .mat-dialog-content {
+        .mat-dialog-content,
+        .mat-mdc-dialog-content {
             padding: $dialog-content-padding variables.$spacing-sm;
             margin: 0 calc(#{variables.$spacing-sm} * -1);
             // margin: 0;
@@ -466,7 +525,8 @@
             // max-height: unset; // This is cause a bug in the email dialog that the actions buttons are not displayed.
         }
 
-        .mat-dialog-actions {
+        .mat-dialog-actions,
+        .mat-mdc-dialog-actions {
             justify-content: flex-end;
             grid-row: mat-dialog-actions;
             margin-bottom: 0;
@@ -478,26 +538,29 @@
 
     &.small {
         max-width: 18rem !important;
+        width: calc(100vw - (var(--pep-spacing-2xl) * 2)) !important;
         height: auto;
     }
 
     &.regular {
         max-width: 36rem !important;
+        width: calc(100vw - (var(--pep-spacing-2xl) * 2)) !important;
         height: auto;
     }
 
     &.large {
         max-width: 54rem !important;
-        width: 90vw;
+        width: calc(100vw - (var(--pep-spacing-2xl) * 2)) !important;
         height: auto;
-        max-height: calc(100% - (var(--pep-spacing-2xl) * 2)) !important; // 90vh;
-
-        .mat-dialog-container {
-            .mat-dialog-content {
-                $border-size: 1px;
-                max-height: 100% // calc(90vh - (#{variables.$dialog-header-height} + (#{variables.$content-padding} * 2) + (#{$border-size} * 2))); 
-            }
-        }
+        max-height: calc(100vh - (var(--pep-spacing-2xl) * 2)) !important; // 90vh;
+        
+        //DI-27148 remove the max-height calc
+        // .mat-dialog-container {
+        //     .mat-dialog-content {
+        //         $border-size: 1px;
+        //         max-height: calc(100% - (var(--pep-spacing-2xl) * 2)); // calc(90vh - (#{variables.$dialog-header-height} + (#{variables.$content-padding} * 2) + (#{$border-size} * 2))); 
+        //     }
+        // }
     }
 
     &.full-screen {
@@ -506,8 +569,10 @@
         max-width: calc(100vw - (var(--pep-spacing-2xl) * 2)) !important;
         max-height: calc(100vh - (var(--pep-spacing-2xl) * 2)) !important;
 
-        .mat-dialog-container {
-            .mat-dialog-content {
+        .mat-dialog-container,
+        .mat-mdc-dialog-container {
+            .mat-dialog-content,
+            .mat-mdc-dialog-content {
                 $height: calc(100% - ((#{$dialog-content-padding} * 2)));
                 height: $height;
                 max-height: $height;
@@ -516,11 +581,13 @@
     }
 
     &.inline {
-        .mat-dialog-container {
+        .mat-dialog-container,
+        .mat-mdc-dialog-container {
             overflow: hidden;
 
             .gallery-dialog {
-                .mat-dialog-content {
+                .mat-dialog-content,
+                .mat-mdc-dialog-content {
                     $height: calc(100% - ((#{$dialog-content-padding} * 2)));
                     height: $height;
                     max-height: $height;
@@ -530,7 +597,8 @@
             .iframe-container {
                 height: 100%;
 
-                .mat-dialog-content {
+                .mat-dialog-content,
+                .mat-mdc-dialog-content {
                     $border-size: 1px;
                     max-height: calc(100% - ((#{$dialog-content-padding} * 2) + (#{$border-size} * 2)));
                     height: inherit;
@@ -540,7 +608,8 @@
     }
 
     &.remote-loader-dialog {
-        .mat-dialog-content {
+        .mat-dialog-content,
+        .mat-mdc-dialog-content {
             max-height: unset !important;
             height: 100% !important;
             padding-top: 0 !important;
@@ -602,17 +671,24 @@
 
     //  Tabs.
     // -------------------------------------------------
-    .mat-tab-group {
+    .mat-tab-group,
+    .mat-mdc-tab-group {
         .mat-tab-header,
-        .mat-tab-header:focus {
+        .mat-mdc-tab-header,
+        .mat-tab-header:focus,
+        .mat-mdc-tab-header:focus {
             border-bottom: unset !important;
         }
 
-        .mat-tab-header {
-            .mat-tab-labels {
+        .mat-tab-header,
+        .mat-mdc-tab-header {
+            .mat-tab-labels,
+            .mat-mdc-tab-labels {
                 @include mixins.pep-border(border-bottom);
 
-                .mat-tab-label {
+                .mat-tab-label,
+                .mat-mdc-tab-label,
+                .mdc-tab__text-label {
                     color: functions.get-pep-color(color-text, color-dimmed);
 
                     &:hover {
@@ -625,7 +701,9 @@
                         @include mixins.state-weak-active();
                     }
 
-                    &.mat-tab-label-active {
+                    &.mat-tab-label-active,
+                    &.mat-mdc-tab-label-active,
+                    .mdc-tab--active .mdc-tab__text-label {
                         @include mixins.state-weak-default();
                         color: functions.get-pep-color(color-text, color-main);
 
@@ -634,27 +712,23 @@
                         }
                     }
 
-                    &.mat-tab-disabled {
+                    &.mat-tab-disabled,
+                    &.mat-mdc-tab-disabled {
                         @include mixins.state-weak-disable();
                     }
                 }
             }
 
-            .mat-ink-bar {
+            .mat-ink-bar,
+            .mdc-tab-indicator .mdc-tab-indicator__content--underline,
+            .mat-mdc-ink-bar {
                 display: none;
             }
-
-            // .mat-ink-bar:before { }
-            // .mat-ink-bar:after { }
         }
 
-        // .mat-tab-body-wrapper {
-        //     .mat-tab-body-content {
-        //     }
-        // }
-
         &.fixed-header {
-            .mat-tab-header {
+            .mat-tab-header,
+            .mat-mdc-tab-header {
                 background: functions.get-pep-color(color-system-primary-invert, color-base);
             }
         }
@@ -663,39 +737,49 @@
     //  Accordion.
     // -----------------------------------------------------
     .pepperi-accordion, .pep-accordion {
-        &.mat-accordion .mat-expansion-panel {
+        &.mat-accordion .mat-expansion-panel,
+        &.mat-mdc-accordion .mat-mdc-expansion-panel {
             box-shadow: unset;
 
-            .mat-expansion-panel-header {
+            .mat-expansion-panel-header,
+            .mat-mdc-expansion-panel-header {
                 @include mixins.pep-border(border-top);
 
-                &.mat-expanded {
+                &.mat-expanded,
+                &.mat-mdc-expanded {
                     @include mixins.pep-border(border-bottom);
 
-                    .mat-expansion-panel-header-title {
+                    .mat-expansion-panel-header-title,
+                    .mat-mdc-expansion-panel-header-title {
                         color: functions.get-pep-color(color-text, color-main);
                     }
                 }
 
-                .mat-expansion-panel-header-title {
+                .mat-expansion-panel-header-title,
+                .mat-mdc-expansion-panel-header-title {
                     color: functions.get-pep-color(color-text, color-dimmed);
                 }
             }
 
             .mat-expansion-panel-header.cdk-keyboard-focused,
+            .mat-mdc-expansion-panel-header.cdk-keyboard-focused,
             .mat-expansion-panel-header.cdk-program-focused,
-            .mat-expansion-panel-header:hover {
+            .mat-mdc-expansion-panel-header.cdk-program-focused,
+            .mat-expansion-panel-header:hover,
+            .mat-mdc-expansion-panel-header:hover {
                 @include mixins.state-weak-hover();
             }
 
             &:first-child {
-                .mat-expansion-panel-header {
+                .mat-expansion-panel-header,
+                .mat-mdc-expansion-panel-header {
                     border-top: unset;
                 }
             }
 
             &:last-child {
-                .mat-expansion-panel-header {
+                .mat-expansion-panel-header,
+                .mat-mdc-expansion-panel-header {
                     @include mixins.pep-border(border-bottom);
                 }
             }
@@ -703,20 +787,26 @@
     }
 
     .pepperi-accordion2, .pep-accordion2 {
-        &.mat-accordion .mat-expansion-panel {
+        &.mat-accordion .mat-expansion-panel,
+        &.mat-mdc-accordion .mat-mdc-expansion-panel {
             box-shadow: unset;
 
-            .mat-expansion-panel-header {
+            .mat-expansion-panel-header,
+            .mat-mdc-expansion-panel-header {
                 @include mixins.pep-border(border-top);
 
-                .mat-expansion-panel-header-title {
+                .mat-expansion-panel-header-title,
+                .mat-mdc-expansion-panel-header-title {
                     color: functions.get-pep-color(color-text, color-main);
                 }
             }
 
             .mat-expansion-panel-header.cdk-keyboard-focused,
+            .mat-mdc-expansion-panel-header.cdk-keyboard-focused,
             .mat-expansion-panel-header.cdk-program-focused,
-            .mat-expansion-panel-header:hover {
+            .mat-mdc-expansion-panel-header.cdk-program-focused,
+            .mat-expansion-panel-header:hover,
+            .mat-mdc-expansion-panel-header:hover {
                 @include mixins.state-weak-hover();
             }
 
@@ -729,16 +819,20 @@
     //  Accordion - chips.
     // -----------------------------------------------------
     .pepperi-chips, .pep-chips {
-        &.mat-accordion .mat-expansion-panel {
+        &.mat-accordion .mat-expansion-panel,
+        &.mat-mdc-accordion .mat-mdc-expansion-panel {
             box-shadow: unset;
 
-            .mat-expansion-panel-header:not(.separator) {
+            .mat-expansion-panel-header:not(.separator),
+            .mat-mdc-expansion-panel-header:not(.separator) {
                 &:hover {
                     background: unset;
                 }
 
-                &.mat-expanded {
-                    .mat-expansion-panel-header-title {
+                &.mat-expanded,
+                &.mat-mdc-expanded {
+                    .mat-expansion-panel-header-title,
+                    .mat-mdc-expansion-panel-header-title {
                         @include mixins.state-weak-active();
                         background: functions.get-pep-color(color-system-primary-invert, color-base);
                         @include mixins.inline(functions.get-pep-color(color-text, color-main));
@@ -754,7 +848,8 @@
                     }
                 }
 
-                .mat-expansion-panel-header-title {
+                .mat-expansion-panel-header-title,
+                .mat-mdc-expansion-panel-header-title {
                     @include mixins.state-weak-default();
 
                     &:hover {
@@ -763,7 +858,8 @@
                 }
             }
 
-            .mat-expansion-panel-body {
+            .mat-expansion-panel-body,
+            .mat-mdc-expansion-panel-body {
                 .expansion-content {
                     li {
                         color: functions.get-pep-color(color-text, color-dimmed);
@@ -780,10 +876,12 @@
 
     // Auto complete.
     // -------------------------------------------------
-    .mat-autocomplete-panel {
+    .mat-autocomplete-panel,
+    .mat-mdc-autocomplete-panel {
         @include mixins.pep-border(border);
 
-        .mat-option:active {
+        .mat-option:active,
+        .mat-mdc-option:active {
             background: functions.get-pep-color(color-system-primary, color-tran-40) !important;
         }
     }
@@ -796,14 +894,16 @@
 
     //  Menu
     // -------------------------------------------------
-    .mat-menu-panel {
+    .mat-menu-panel,
+    .mat-mdc-menu-panel {
         box-shadow: functions.get-pep-shadow(shadow-sm, hard);
         border: 1px solid functions.get-pep-color(color-system-primary, color-base);
         
         max-width: 30rem;
         min-height: unset;
         
-        .mat-menu-item {
+        .mat-menu-item,
+        .mat-mdc-menu-item {
             background: functions.get-pep-color(color-system-primary-invert, color-base);
 
             &:hover {
@@ -826,7 +926,8 @@
 
     //  Dialog
     // -------------------------------------------------
-    .mat-dialog-container {
+    .mat-dialog-container,
+    .mat-mdc-dialog-container {
         box-shadow: unset;
         // box-shadow: functions.get-pep-shadow(shadow-sm, hard);
         border: 1px solid functions.get-pep-color(color-system-primary, color-base);
@@ -838,7 +939,8 @@
 
     //  SnackBar
     // -------------------------------------------------
-    .mat-snack-bar-container {
+    .mat-snack-bar-container,
+    .mat-mdc-snack-bar-container {
         // box-shadow: unset;
         // background: unset;
         // border: 1px solid functions.get-pep-color(color-system-primary, color-base);