@flywheel-io/vision 0.2.2 → 0.3.0

package/styles.css

@@ -2,6 +2,11 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700");
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600");
+/* Colors for the ripple elements.*/
+/* stylelint-disable-next-line material/theme-mixin-api */
+/* stylelint-disable-next-line material/theme-mixin-api */
+/* stylelint-disable material/no-prefixes */
+/* stylelint-enable */
 /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
@@ -56,11 +61,6 @@ table {
   border-spacing: 0;
 }
 
-/* Colors for the ripple elements.*/
-/* stylelint-disable-next-line material/theme-mixin-api */
-/* stylelint-disable-next-line material/theme-mixin-api */
-/* stylelint-disable material/no-prefixes */
-/* stylelint-enable */
 .mat-badge-content {
   font-weight: 600;
   font-size: 12px;
@@ -780,7 +780,7 @@ textarea.cdk-textarea-autosize-measuring-firefox {
 }
 
 .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
-  color: #2e72f6;
+  color: #1b68fa;
 }
 
 .mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {
@@ -812,7 +812,7 @@ textarea.cdk-textarea-autosize-measuring-firefox {
 
 .mat-primary .mat-pseudo-checkbox-checked,
 .mat-primary .mat-pseudo-checkbox-indeterminate {
-  background: #2e72f6;
+  background: #1b68fa;
 }
 
 .mat-pseudo-checkbox-checked,
@@ -957,7 +957,7 @@ textarea.cdk-textarea-autosize-measuring-firefox {
 
 .mat-badge-content {
   color: white;
-  background: #2e72f6;
+  background: #1b68fa;
 }
 .cdk-high-contrast-active .mat-badge-content {
   outline: solid 1px;
@@ -1140,7 +1140,7 @@ textarea.cdk-textarea-autosize-measuring-firefox {
   background: transparent;
 }
 .mat-button.mat-primary, .mat-icon-button.mat-primary, .mat-stroked-button.mat-primary {
-  color: #2e72f6;
+  color: #1b68fa;
 }
 .mat-button.mat-accent, .mat-icon-button.mat-accent, .mat-stroked-button.mat-accent {
   color: #59b96b;
@@ -1152,7 +1152,7 @@ textarea.cdk-textarea-autosize-measuring-firefox {
   color: rgba(0, 0, 0, 0.26);
 }
 .mat-button.mat-primary .mat-button-focus-overlay, .mat-icon-button.mat-primary .mat-button-focus-overlay, .mat-stroked-button.mat-primary .mat-button-focus-overlay {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-button.mat-accent .mat-button-focus-overlay, .mat-icon-button.mat-accent .mat-button-focus-overlay, .mat-stroked-button.mat-accent .mat-button-focus-overlay {
   background-color: #59b96b;
@@ -1193,7 +1193,7 @@ textarea.cdk-textarea-autosize-measuring-firefox {
   color: rgba(0, 0, 0, 0.26);
 }
 .mat-flat-button.mat-primary, .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-flat-button.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent {
   background-color: #59b96b;
@@ -1338,7 +1338,7 @@ textarea.cdk-textarea-autosize-measuring-firefox {
 }
 
 .mat-checkbox-indeterminate.mat-primary .mat-checkbox-background, .mat-checkbox-checked.mat-primary .mat-checkbox-background {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background {
   background-color: #59b96b;
@@ -1363,7 +1363,7 @@ textarea.cdk-textarea-autosize-measuring-firefox {
 
 .mat-checkbox-checked:not(.mat-checkbox-disabled).mat-primary .mat-ripple-element,
 .mat-checkbox:active:not(.mat-checkbox-disabled).mat-primary .mat-ripple-element {
-  background: #2e72f6;
+  background: #1b68fa;
 }
 .mat-checkbox-checked:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element,
 .mat-checkbox:active:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element {
@@ -1396,7 +1396,7 @@ textarea.cdk-textarea-autosize-measuring-firefox {
 }
 
 .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
   color: white;
 }
 .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-chip-remove {
@@ -1502,7 +1502,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 
 .mat-calendar-body-in-range::before {
-  background: rgba(46, 114, 246, 0.2);
+  background: rgba(27, 104, 250, 0.2);
 }
 
 .mat-calendar-body-comparison-identical,
@@ -1512,12 +1512,12 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 
 .mat-calendar-body-comparison-bridge-start::before,
 [dir=rtl] .mat-calendar-body-comparison-bridge-end::before {
-  background: linear-gradient(to right, rgba(46, 114, 246, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);
+  background: linear-gradient(to right, rgba(27, 104, 250, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);
 }
 
 .mat-calendar-body-comparison-bridge-end::before,
 [dir=rtl] .mat-calendar-body-comparison-bridge-start::before {
-  background: linear-gradient(to left, rgba(46, 114, 246, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);
+  background: linear-gradient(to left, rgba(27, 104, 250, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);
 }
 
 .mat-calendar-body-in-range > .mat-calendar-body-comparison-identical,
@@ -1531,12 +1531,12 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 
 .mat-calendar-body-selected {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
   color: white;
 }
 
 .mat-calendar-body-disabled > .mat-calendar-body-selected {
-  background-color: rgba(46, 114, 246, 0.4);
+  background-color: rgba(27, 104, 250, 0.4);
 }
 
 .mat-calendar-body-today.mat-calendar-body-selected {
@@ -1546,7 +1546,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
 .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
 .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-  background-color: rgba(46, 114, 246, 0.3);
+  background-color: rgba(27, 104, 250, 0.3);
 }
 
 .mat-datepicker-content {
@@ -1636,7 +1636,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 
 .mat-datepicker-toggle-active {
-  color: #2e72f6;
+  color: #1b68fa;
 }
 .mat-datepicker-toggle-active.mat-accent {
   color: #59b96b;
@@ -1717,7 +1717,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 
 .mat-form-field.mat-focused .mat-form-field-label {
-  color: #2e72f6;
+  color: #1b68fa;
 }
 .mat-form-field.mat-focused .mat-form-field-label.mat-accent {
   color: #59b96b;
@@ -1735,7 +1735,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 
 .mat-form-field.mat-focused .mat-form-field-ripple {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-form-field.mat-focused .mat-form-field-ripple.mat-accent {
   background-color: #59b96b;
@@ -1745,7 +1745,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 
 .mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid) .mat-form-field-infix::after {
-  color: #2e72f6;
+  color: #1b68fa;
 }
 .mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid).mat-accent .mat-form-field-infix::after {
   color: #59b96b;
@@ -1817,7 +1817,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
   color: rgba(0, 0, 0, 0.87);
 }
 .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
-  color: #2e72f6;
+  color: #1b68fa;
 }
 .mat-form-field-appearance-outline.mat-focused.mat-accent .mat-form-field-outline-thick {
   color: #59b96b;
@@ -1836,7 +1836,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 
 .mat-icon.mat-primary {
-  color: #2e72f6;
+  color: #1b68fa;
 }
 .mat-icon.mat-accent {
   color: #59b96b;
@@ -1855,7 +1855,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 
 .mat-input-element {
-  caret-color: #2e72f6;
+  caret-color: #1b68fa;
 }
 .mat-input-element::placeholder {
   color: rgba(0, 0, 0, 0.42);
@@ -1969,15 +1969,15 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 
 .mat-progress-bar-background {
-  fill: #c0d5fc;
+  fill: #bbd2fe;
 }
 
 .mat-progress-bar-buffer {
-  background-color: #c0d5fc;
+  background-color: #bbd2fe;
 }
 
 .mat-progress-bar-fill::after {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 
 .mat-progress-bar.mat-accent .mat-progress-bar-background {
@@ -2001,7 +2001,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 
 .mat-progress-spinner circle, .mat-spinner circle {
-  stroke: #2e72f6;
+  stroke: #1b68fa;
 }
 .mat-progress-spinner.mat-accent circle, .mat-spinner.mat-accent circle {
   stroke: #59b96b;
@@ -2015,11 +2015,11 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 
 .mat-radio-button.mat-primary.mat-radio-checked .mat-radio-outer-circle {
-  border-color: #2e72f6;
+  border-color: #1b68fa;
 }
 .mat-radio-button.mat-primary .mat-radio-inner-circle,
 .mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-primary.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-primary:active .mat-radio-persistent-ripple {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
   border-color: #59b96b;
@@ -2077,7 +2077,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 
 .mat-form-field.mat-focused.mat-primary .mat-select-arrow {
-  color: #2e72f6;
+  color: #1b68fa;
 }
 .mat-form-field.mat-focused.mat-accent .mat-select-arrow {
   color: #59b96b;
@@ -2139,13 +2139,13 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
   background-color: #59b96b;
 }
 .mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-thumb {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-bar {
-  background-color: rgba(46, 114, 246, 0.54);
+  background-color: rgba(27, 104, 250, 0.54);
 }
 .mat-slide-toggle.mat-primary.mat-checked .mat-ripple-element {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-thumb {
   background-color: #d9534b;
@@ -2176,13 +2176,13 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 .mat-primary .mat-slider-track-fill,
 .mat-primary .mat-slider-thumb,
 .mat-primary .mat-slider-thumb-label {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-primary .mat-slider-thumb-label-text {
   color: white;
 }
 .mat-primary .mat-slider-focus-ring {
-  background-color: rgba(46, 114, 246, 0.2);
+  background-color: rgba(27, 104, 250, 0.2);
 }
 
 .mat-accent .mat-slider-track-fill,
@@ -2277,7 +2277,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 .mat-step-header .mat-step-icon-selected,
 .mat-step-header .mat-step-icon-state-done,
 .mat-step-header .mat-step-icon-state-edit {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
   color: white;
 }
 .mat-step-header.mat-accent .mat-step-icon {
@@ -2386,10 +2386,10 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 .mat-tab-group.mat-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
 .mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
 .mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
-  background-color: rgba(192, 213, 252, 0.3);
+  background-color: rgba(187, 210, 254, 0.3);
 }
 .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-tab-group.mat-primary.mat-background-primary > .mat-tab-header .mat-ink-bar, .mat-tab-group.mat-primary.mat-background-primary > .mat-tab-link-container .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary > .mat-tab-header .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary > .mat-tab-link-container .mat-ink-bar {
   background-color: white;
@@ -2425,10 +2425,10 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 .mat-tab-group.mat-background-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
 .mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
 .mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
-  background-color: rgba(192, 213, 252, 0.3);
+  background-color: rgba(187, 210, 254, 0.3);
 }
 .mat-tab-group.mat-background-primary > .mat-tab-header, .mat-tab-group.mat-background-primary > .mat-tab-link-container, .mat-tab-group.mat-background-primary > .mat-tab-header-pagination, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header, .mat-tab-nav-bar.mat-background-primary > .mat-tab-link-container, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header-pagination {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-tab-group.mat-background-primary > .mat-tab-header .mat-tab-label, .mat-tab-group.mat-background-primary > .mat-tab-link-container .mat-tab-link, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-tab-label, .mat-tab-nav-bar.mat-background-primary > .mat-tab-link-container .mat-tab-link {
   color: white;
@@ -2519,7 +2519,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
   color: rgba(0, 0, 0, 0.87);
 }
 .mat-toolbar.mat-primary {
-  background: #2e72f6;
+  background: #1b68fa;
   color: white;
 }
 .mat-toolbar.mat-accent {
@@ -2607,10 +2607,10 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 
 .mat-checkbox-indeterminate.mat-primary .mat-checkbox-background, .mat-checkbox-checked.mat-primary .mat-checkbox-background {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-checkbox-indeterminate.mat-warn .mat-checkbox-background, .mat-checkbox-checked.mat-warn .mat-checkbox-background {
   background-color: #d9534b;
@@ -2632,34 +2632,67 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 
 .mat-checkbox-checked:not(.mat-checkbox-disabled).mat-primary .mat-ripple-element,
 .mat-checkbox:active:not(.mat-checkbox-disabled).mat-primary .mat-ripple-element {
-  background: #2e72f6;
+  background: #1b68fa;
 }
 .mat-checkbox-checked:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element,
 .mat-checkbox:active:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element {
-  background: #2e72f6;
+  background: #1b68fa;
 }
 .mat-checkbox-checked:not(.mat-checkbox-disabled).mat-warn .mat-ripple-element,
 .mat-checkbox:active:not(.mat-checkbox-disabled).mat-warn .mat-ripple-element {
   background: #d9534b;
 }
 
+.mat-pseudo-checkbox {
+  color: rgba(0, 0, 0, 0.54);
+}
+.mat-pseudo-checkbox::after {
+  color: #fafafa;
+}
+
+.mat-pseudo-checkbox-disabled {
+  color: #b0b0b0;
+}
+
+.mat-primary .mat-pseudo-checkbox-checked,
+.mat-primary .mat-pseudo-checkbox-indeterminate {
+  background: #1b68fa;
+}
+
+.mat-pseudo-checkbox-checked,
+.mat-pseudo-checkbox-indeterminate,
+.mat-accent .mat-pseudo-checkbox-checked,
+.mat-accent .mat-pseudo-checkbox-indeterminate {
+  background: #1b68fa;
+}
+
+.mat-warn .mat-pseudo-checkbox-checked,
+.mat-warn .mat-pseudo-checkbox-indeterminate {
+  background: #d9534b;
+}
+
+.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled,
+.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled {
+  background: #b0b0b0;
+}
+
 .mat-radio-outer-circle {
   border-color: rgba(0, 0, 0, 0.54);
 }
 
 .mat-radio-button.mat-primary.mat-radio-checked .mat-radio-outer-circle {
-  border-color: #2e72f6;
+  border-color: #1b68fa;
 }
 .mat-radio-button.mat-primary .mat-radio-inner-circle,
 .mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-primary.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-primary:active .mat-radio-persistent-ripple {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
-  border-color: #2e72f6;
+  border-color: #1b68fa;
 }
 .mat-radio-button.mat-accent .mat-radio-inner-circle,
 .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-accent:active .mat-radio-persistent-ripple {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-radio-button.mat-warn.mat-radio-checked .mat-radio-outer-circle {
   border-color: #d9534b;
@@ -2684,22 +2717,22 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 
 .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
-  background-color: rgba(46, 114, 246, 0.54);
+  background-color: rgba(27, 104, 250, 0.54);
 }
 .mat-slide-toggle.mat-checked .mat-ripple-element {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-thumb {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-bar {
-  background-color: rgba(46, 114, 246, 0.54);
+  background-color: rgba(27, 104, 250, 0.54);
 }
 .mat-slide-toggle.mat-primary.mat-checked .mat-ripple-element {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-thumb {
   background-color: #d9534b;
@@ -2730,25 +2763,25 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 .mat-primary .mat-slider-track-fill,
 .mat-primary .mat-slider-thumb,
 .mat-primary .mat-slider-thumb-label {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-primary .mat-slider-thumb-label-text {
   color: white;
 }
 .mat-primary .mat-slider-focus-ring {
-  background-color: rgba(46, 114, 246, 0.2);
+  background-color: rgba(27, 104, 250, 0.2);
 }
 
 .mat-accent .mat-slider-track-fill,
 .mat-accent .mat-slider-thumb,
 .mat-accent .mat-slider-thumb-label {
-  background-color: #2e72f6;
+  background-color: #1b68fa;
 }
 .mat-accent .mat-slider-thumb-label-text {
   color: white;
 }
 .mat-accent .mat-slider-focus-ring {
-  background-color: rgba(46, 114, 246, 0.2);
+  background-color: rgba(27, 104, 250, 0.2);
 }
 
 .mat-warn .mat-slider-track-fill,
@@ -2812,6 +2845,11 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
   background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent);
 }
 
+/* Colors for the ripple elements.*/
+/* stylelint-disable-next-line material/theme-mixin-api */
+/* stylelint-disable-next-line material/theme-mixin-api */
+/* stylelint-disable material/no-prefixes */
+/* stylelint-enable */
 .white {
   color: #ffffff !important;
 }
@@ -3101,35 +3139,99 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 
 .bright-blue {
-  color: #2e72f6 !important;
+  color: #1b68fa !important;
 }
 
 .fill-bright-blue {
-  background-color: #2e72f6 !important;
+  background-color: #1b68fa !important;
 }
 
 .border-bright-blue {
-  border-color: #2e72f6 !important;
+  border-color: #1b68fa !important;
 }
 
 .border-top-bright-blue {
   border-top: 1px solid;
-  border-color: #2e72f6 !important;
+  border-color: #1b68fa !important;
 }
 
 .border-right-bright-blue {
   border-right: 1px solid;
-  border-color: #2e72f6 !important;
+  border-color: #1b68fa !important;
 }
 
 .border-bottom-bright-blue {
   border-bottom: 1px solid;
-  border-color: #2e72f6 !important;
+  border-color: #1b68fa !important;
 }
 
 .border-left-bright-blue {
   border-left: 1px solid;
-  border-color: #2e72f6 !important;
+  border-color: #1b68fa !important;
+}
+
+.admin-black {
+  color: #01010a !important;
+}
+
+.fill-admin-black {
+  background-color: #01010a !important;
+}
+
+.border-admin-black {
+  border-color: #01010a !important;
+}
+
+.border-top-admin-black {
+  border-top: 1px solid;
+  border-color: #01010a !important;
+}
+
+.border-right-admin-black {
+  border-right: 1px solid;
+  border-color: #01010a !important;
+}
+
+.border-bottom-admin-black {
+  border-bottom: 1px solid;
+  border-color: #01010a !important;
+}
+
+.border-left-admin-black {
+  border-left: 1px solid;
+  border-color: #01010a !important;
+}
+
+.accent-purple {
+  color: #b080fc !important;
+}
+
+.fill-accent-purple {
+  background-color: #b080fc !important;
+}
+
+.border-accent-purple {
+  border-color: #b080fc !important;
+}
+
+.border-top-accent-purple {
+  border-top: 1px solid;
+  border-color: #b080fc !important;
+}
+
+.border-right-accent-purple {
+  border-right: 1px solid;
+  border-color: #b080fc !important;
+}
+
+.border-bottom-accent-purple {
+  border-bottom: 1px solid;
+  border-color: #b080fc !important;
+}
+
+.border-left-accent-purple {
+  border-left: 1px solid;
+  border-color: #b080fc !important;
 }
 
 .grey {
@@ -3324,215 +3426,213 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
   border-color: #222222 !important;
 }
 
-.iron-grey {
-  color: #d3d6db !important;
+.soft-blue {
+  color: #eff1f5 !important;
 }
 
-.fill-iron-grey {
-  background-color: #d3d6db !important;
+.fill-soft-blue {
+  background-color: #eff1f5 !important;
 }
 
-.border-iron-grey {
-  border-color: #d3d6db !important;
+.border-soft-blue {
+  border-color: #eff1f5 !important;
 }
 
-.border-top-iron-grey {
+.border-top-soft-blue {
   border-top: 1px solid;
-  border-color: #d3d6db !important;
+  border-color: #eff1f5 !important;
 }
 
-.border-right-iron-grey {
+.border-right-soft-blue {
   border-right: 1px solid;
-  border-color: #d3d6db !important;
+  border-color: #eff1f5 !important;
 }
 
-.border-bottom-iron-grey {
+.border-bottom-soft-blue {
   border-bottom: 1px solid;
-  border-color: #d3d6db !important;
+  border-color: #eff1f5 !important;
 }
 
-.border-left-iron-grey {
+.border-left-soft-blue {
   border-left: 1px solid;
-  border-color: #d3d6db !important;
+  border-color: #eff1f5 !important;
 }
 
-.bombay-grey {
-  color: #aaacb0 !important;
+.dark-soft-blue {
+  color: #e9ecf1 !important;
 }
 
-.fill-bombay-grey {
-  background-color: #aaacb0 !important;
+.fill-dark-soft-blue {
+  background-color: #e9ecf1 !important;
 }
 
-.border-bombay-grey {
-  border-color: #aaacb0 !important;
+.border-dark-soft-blue {
+  border-color: #e9ecf1 !important;
 }
 
-.border-top-bombay-grey {
+.border-top-dark-soft-blue {
   border-top: 1px solid;
-  border-color: #aaacb0 !important;
+  border-color: #e9ecf1 !important;
 }
 
-.border-right-bombay-grey {
+.border-right-dark-soft-blue {
   border-right: 1px solid;
-  border-color: #aaacb0 !important;
+  border-color: #e9ecf1 !important;
 }
 
-.border-bottom-bombay-grey {
+.border-bottom-dark-soft-blue {
   border-bottom: 1px solid;
-  border-color: #aaacb0 !important;
+  border-color: #e9ecf1 !important;
 }
 
-.border-left-bombay-grey {
+.border-left-dark-soft-blue {
   border-left: 1px solid;
-  border-color: #aaacb0 !important;
+  border-color: #e9ecf1 !important;
 }
 
-.soft-blue {
-  color: #eff1f5 !important;
+.darker-soft-blue {
+  color: #e6e9ef !important;
 }
 
-.fill-soft-blue {
-  background-color: #eff1f5 !important;
+.fill-darker-soft-blue {
+  background-color: #e6e9ef !important;
 }
 
-.border-soft-blue {
-  border-color: #eff1f5 !important;
+.border-darker-soft-blue {
+  border-color: #e6e9ef !important;
 }
 
-.border-top-soft-blue {
+.border-top-darker-soft-blue {
   border-top: 1px solid;
-  border-color: #eff1f5 !important;
+  border-color: #e6e9ef !important;
 }
 
-.border-right-soft-blue {
+.border-right-darker-soft-blue {
   border-right: 1px solid;
-  border-color: #eff1f5 !important;
+  border-color: #e6e9ef !important;
 }
 
-.border-bottom-soft-blue {
+.border-bottom-darker-soft-blue {
   border-bottom: 1px solid;
-  border-color: #eff1f5 !important;
+  border-color: #e6e9ef !important;
 }
 
-.border-left-soft-blue {
+.border-left-darker-soft-blue {
   border-left: 1px solid;
-  border-color: #eff1f5 !important;
+  border-color: #e6e9ef !important;
 }
 
-.darker-soft-blue {
-  color: #e9ecf1 !important;
+.light-soft-blue {
+  color: #f5f6f9 !important;
 }
 
-.fill-darker-soft-blue {
-  background-color: #e9ecf1 !important;
+.fill-light-soft-blue {
+  background-color: #f5f6f9 !important;
 }
 
-.border-darker-soft-blue {
-  border-color: #e9ecf1 !important;
+.border-light-soft-blue {
+  border-color: #f5f6f9 !important;
 }
 
-.border-top-darker-soft-blue {
+.border-top-light-soft-blue {
   border-top: 1px solid;
-  border-color: #e9ecf1 !important;
+  border-color: #f5f6f9 !important;
 }
 
-.border-right-darker-soft-blue {
+.border-right-light-soft-blue {
   border-right: 1px solid;
-  border-color: #e9ecf1 !important;
+  border-color: #f5f6f9 !important;
 }
 
-.border-bottom-darker-soft-blue {
+.border-bottom-light-soft-blue {
   border-bottom: 1px solid;
-  border-color: #e9ecf1 !important;
+  border-color: #f5f6f9 !important;
 }
 
-.border-left-darker-soft-blue {
+.border-left-light-soft-blue {
   border-left: 1px solid;
-  border-color: #e9ecf1 !important;
+  border-color: #f5f6f9 !important;
 }
 
 .lighter-soft-blue {
-  color: #f5f6f9 !important;
+  color: #f8f9fb !important;
 }
 
 .fill-lighter-soft-blue {
-  background-color: #f5f6f9 !important;
+  background-color: #f8f9fb !important;
 }
 
 .border-lighter-soft-blue {
-  border-color: #f5f6f9 !important;
+  border-color: #f8f9fb !important;
 }
 
 .border-top-lighter-soft-blue {
   border-top: 1px solid;
-  border-color: #f5f6f9 !important;
+  border-color: #f8f9fb !important;
 }
 
 .border-right-lighter-soft-blue {
   border-right: 1px solid;
-  border-color: #f5f6f9 !important;
+  border-color: #f8f9fb !important;
 }
 
 .border-bottom-lighter-soft-blue {
   border-bottom: 1px solid;
-  border-color: #f5f6f9 !important;
+  border-color: #f8f9fb !important;
 }
 
 .border-left-lighter-soft-blue {
   border-left: 1px solid;
-  border-color: #f5f6f9 !important;
+  border-color: #f8f9fb !important;
 }
 
 :root {
   --color-gray: var(--color-gray-100);
   --color-gray-50: #f6f7f8;
-  --color-gray-100: #EFF1F4;
-  --color-gray-200: #E3E5E8;
-  --color-gray-300: #D7D9DC;
-  --color-gray-400: #CBCDCF;
-  --color-gray-500: #BFC1C3;
-  --color-primary: var(--color-primary-1000);
-  --color-primary-100: #EAF1FE;
-  --color-primary-200: #D5E3FD;
-  --color-primary-300: #C0D5FC;
-  --color-primary-400: #ABC7FB;
-  --color-primary-500: #97B9FB;
-  --color-primary-600: #82AAFA;
-  --color-primary-700: #6DA2FF;
-  --color-primary-800: #588EF8;
-  --color-primary-900: #4380F7;
-  --color-primary-1000: #2E72F6;
-  --color-primary-1100: #2967DD;
-  --color-primary-1200: #255BC5;
-  --color-primary-1300: #2050AC;
-  --color-primary-1400: #1C4494;
-  --color-primary-1500: #083076;
-  --color-primary-1600: #122E62;
-  --color-primary-1700: #0E224A;
-  --color-primary-1800: #061734;
-  --color-primary-1900: #050B19;
-  --color-secondary: var(--color-secondary-900);
-  --color-secondary-100: #CCF1E4;
-  --color-secondary-200: #B3E9D7;
-  --color-secondary-300: #99E2C9;
-  --color-secondary-400: #80DBBC;
-  --color-secondary-500: #66D4AE;
-  --color-secondary-600: #4DCDA1;
-  --color-secondary-700: #33C593;
-  --color-secondary-800: #1ABE86;
-  --color-secondary-900: #00B778;
-  --color-secondary-1000: #00A56C;
-  --color-secondary-1100: #009260;
-  --color-secondary-1200: #008054;
-  --color-secondary-1300: #006E48;
-  --color-secondary-1400: #005C3C;
-  --color-secondary-1500: #004930;
-  --color-secondary-1600: #002518;
-  --color-secondary-1700: #00120C;
+  --color-gray-100: #eff1f4;
+  --color-gray-200: #e3e5e8;
+  --color-gray-300: #d7d9dc;
+  --color-gray-400: #cbcdcf;
+  --color-gray-500: #bfc1c3;
+  --color-primary: var(--color-primary-500);
+  --color-primary-50: #e4edfe;
+  --color-primary-100: #bbd2fe;
+  --color-primary-200: #8db4fd;
+  --color-primary-300: #5f95fc;
+  --color-primary-400: #3d7ffb;
+  --color-primary-500: #1b68fa;
+  --color-primary-600: #1860f9;
+  --color-primary-700: #1455f9;
+  --color-primary-800: #104bf8;
+  --color-primary-900: #083af6;
+  --color-primary-A100: #ffffff;
+  --color-primary-A200: #ebefff;
+  --color-primary-A400: #b8c4ff;
+  --color-primary-A700: #9fafff;
+  --color-secondary: var(--color-secondary-500);
+  --color-secondary-50: #ebf7ed;
+  --color-secondary-100: #cdead3;
+  --color-secondary-200: #acdcb5;
+  --color-secondary-300: #8bce97;
+  --color-secondary-400: #72c481;
+  --color-secondary-500: #59b96b;
+  --color-secondary-600: #51b263;
+  --color-secondary-700: #48aa58;
+  --color-secondary-800: #3ea24e;
+  --color-secondary-900: #2e933c;
+  --color-secondary-A100: #d9ffde;
+  --color-secondary-A200: #a6ffb1;
+  --color-secondary-A400: #73ff84;
+  --color-secondary-A700: #59ff6e;
 }
 
 :root {
+  --font-primary: Helvetica Neue, Helvetica, Arial, sans-serif;
+  --font-secondary: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+  --sidebar-width: 55px;
+  --menu-bar-width: 180px;
+  --page-layout-padding: 235px;
+  --radius: 6px;
   --shadow-level-1: 0px 1px 2px rgba(0, 0, 0, .1);
   --shadow-level-2: 0px 2px 4px rgba(0, 0, 0, .1);
   --shadow-level-3: 0px 4px 8px rgba(0, 0, 0, .1);
@@ -3541,15 +3641,6 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
   --inset-shadow-level-3: inset 0px 4px 8px rgba(0, 0, 0, .1);
 }
 
-:root {
-  --font-primary: "Inter", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Ubuntu, "Helvetica Neue", Oxygen, Cantarell, sans-serif;
-  --font-secondary: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Oxygen, Cantarell, sans-serif;
-  --sidebar-width: 55px;
-  --menu-bar-width: 180px;
-  --page-layout-padding: 235px;
-  --radius: 6px;
-}
-
 * {
   font-family: var(--font-primary);
   box-sizing: border-box;
@@ -3566,6 +3657,11 @@ html, body {
   height: 100%;
 }
 
+/* Colors for the ripple elements.*/
+/* stylelint-disable-next-line material/theme-mixin-api */
+/* stylelint-disable-next-line material/theme-mixin-api */
+/* stylelint-disable material/no-prefixes */
+/* stylelint-enable */
 .white {
   color: #ffffff !important;
 }
@@ -3855,35 +3951,99 @@ html, body {
 }
 
 .bright-blue {
-  color: #2e72f6 !important;
+  color: #1b68fa !important;
 }
 
 .fill-bright-blue {
-  background-color: #2e72f6 !important;
+  background-color: #1b68fa !important;
 }
 
 .border-bright-blue {
-  border-color: #2e72f6 !important;
+  border-color: #1b68fa !important;
 }
 
 .border-top-bright-blue {
   border-top: 1px solid;
-  border-color: #2e72f6 !important;
+  border-color: #1b68fa !important;
 }
 
 .border-right-bright-blue {
   border-right: 1px solid;
-  border-color: #2e72f6 !important;
+  border-color: #1b68fa !important;
 }
 
 .border-bottom-bright-blue {
   border-bottom: 1px solid;
-  border-color: #2e72f6 !important;
+  border-color: #1b68fa !important;
 }
 
 .border-left-bright-blue {
   border-left: 1px solid;
-  border-color: #2e72f6 !important;
+  border-color: #1b68fa !important;
+}
+
+.admin-black {
+  color: #01010a !important;
+}
+
+.fill-admin-black {
+  background-color: #01010a !important;
+}
+
+.border-admin-black {
+  border-color: #01010a !important;
+}
+
+.border-top-admin-black {
+  border-top: 1px solid;
+  border-color: #01010a !important;
+}
+
+.border-right-admin-black {
+  border-right: 1px solid;
+  border-color: #01010a !important;
+}
+
+.border-bottom-admin-black {
+  border-bottom: 1px solid;
+  border-color: #01010a !important;
+}
+
+.border-left-admin-black {
+  border-left: 1px solid;
+  border-color: #01010a !important;
+}
+
+.accent-purple {
+  color: #b080fc !important;
+}
+
+.fill-accent-purple {
+  background-color: #b080fc !important;
+}
+
+.border-accent-purple {
+  border-color: #b080fc !important;
+}
+
+.border-top-accent-purple {
+  border-top: 1px solid;
+  border-color: #b080fc !important;
+}
+
+.border-right-accent-purple {
+  border-right: 1px solid;
+  border-color: #b080fc !important;
+}
+
+.border-bottom-accent-purple {
+  border-bottom: 1px solid;
+  border-color: #b080fc !important;
+}
+
+.border-left-accent-purple {
+  border-left: 1px solid;
+  border-color: #b080fc !important;
 }
 
 .grey {
@@ -4078,212 +4238,204 @@ html, body {
   border-color: #222222 !important;
 }
 
-.iron-grey {
-  color: #d3d6db !important;
+.soft-blue {
+  color: #eff1f5 !important;
 }
 
-.fill-iron-grey {
-  background-color: #d3d6db !important;
+.fill-soft-blue {
+  background-color: #eff1f5 !important;
 }
 
-.border-iron-grey {
-  border-color: #d3d6db !important;
+.border-soft-blue {
+  border-color: #eff1f5 !important;
 }
 
-.border-top-iron-grey {
+.border-top-soft-blue {
   border-top: 1px solid;
-  border-color: #d3d6db !important;
+  border-color: #eff1f5 !important;
 }
 
-.border-right-iron-grey {
+.border-right-soft-blue {
   border-right: 1px solid;
-  border-color: #d3d6db !important;
+  border-color: #eff1f5 !important;
 }
 
-.border-bottom-iron-grey {
+.border-bottom-soft-blue {
   border-bottom: 1px solid;
-  border-color: #d3d6db !important;
+  border-color: #eff1f5 !important;
 }
 
-.border-left-iron-grey {
+.border-left-soft-blue {
   border-left: 1px solid;
-  border-color: #d3d6db !important;
+  border-color: #eff1f5 !important;
 }
 
-.bombay-grey {
-  color: #aaacb0 !important;
+.dark-soft-blue {
+  color: #e9ecf1 !important;
 }
 
-.fill-bombay-grey {
-  background-color: #aaacb0 !important;
+.fill-dark-soft-blue {
+  background-color: #e9ecf1 !important;
 }
 
-.border-bombay-grey {
-  border-color: #aaacb0 !important;
+.border-dark-soft-blue {
+  border-color: #e9ecf1 !important;
 }
 
-.border-top-bombay-grey {
+.border-top-dark-soft-blue {
   border-top: 1px solid;
-  border-color: #aaacb0 !important;
+  border-color: #e9ecf1 !important;
 }
 
-.border-right-bombay-grey {
+.border-right-dark-soft-blue {
   border-right: 1px solid;
-  border-color: #aaacb0 !important;
+  border-color: #e9ecf1 !important;
 }
 
-.border-bottom-bombay-grey {
+.border-bottom-dark-soft-blue {
   border-bottom: 1px solid;
-  border-color: #aaacb0 !important;
+  border-color: #e9ecf1 !important;
 }
 
-.border-left-bombay-grey {
+.border-left-dark-soft-blue {
   border-left: 1px solid;
-  border-color: #aaacb0 !important;
+  border-color: #e9ecf1 !important;
 }
 
-.soft-blue {
-  color: #eff1f5 !important;
+.darker-soft-blue {
+  color: #e6e9ef !important;
 }
 
-.fill-soft-blue {
-  background-color: #eff1f5 !important;
+.fill-darker-soft-blue {
+  background-color: #e6e9ef !important;
 }
 
-.border-soft-blue {
-  border-color: #eff1f5 !important;
+.border-darker-soft-blue {
+  border-color: #e6e9ef !important;
 }
 
-.border-top-soft-blue {
+.border-top-darker-soft-blue {
   border-top: 1px solid;
-  border-color: #eff1f5 !important;
+  border-color: #e6e9ef !important;
 }
 
-.border-right-soft-blue {
+.border-right-darker-soft-blue {
   border-right: 1px solid;
-  border-color: #eff1f5 !important;
+  border-color: #e6e9ef !important;
 }
 
-.border-bottom-soft-blue {
+.border-bottom-darker-soft-blue {
   border-bottom: 1px solid;
-  border-color: #eff1f5 !important;
+  border-color: #e6e9ef !important;
 }
 
-.border-left-soft-blue {
+.border-left-darker-soft-blue {
   border-left: 1px solid;
-  border-color: #eff1f5 !important;
+  border-color: #e6e9ef !important;
 }
 
-.darker-soft-blue {
-  color: #e9ecf1 !important;
+.light-soft-blue {
+  color: #f5f6f9 !important;
 }
 
-.fill-darker-soft-blue {
-  background-color: #e9ecf1 !important;
+.fill-light-soft-blue {
+  background-color: #f5f6f9 !important;
 }
 
-.border-darker-soft-blue {
-  border-color: #e9ecf1 !important;
+.border-light-soft-blue {
+  border-color: #f5f6f9 !important;
 }
 
-.border-top-darker-soft-blue {
+.border-top-light-soft-blue {
   border-top: 1px solid;
-  border-color: #e9ecf1 !important;
+  border-color: #f5f6f9 !important;
 }
 
-.border-right-darker-soft-blue {
+.border-right-light-soft-blue {
   border-right: 1px solid;
-  border-color: #e9ecf1 !important;
+  border-color: #f5f6f9 !important;
 }
 
-.border-bottom-darker-soft-blue {
+.border-bottom-light-soft-blue {
   border-bottom: 1px solid;
-  border-color: #e9ecf1 !important;
+  border-color: #f5f6f9 !important;
 }
 
-.border-left-darker-soft-blue {
+.border-left-light-soft-blue {
   border-left: 1px solid;
-  border-color: #e9ecf1 !important;
+  border-color: #f5f6f9 !important;
 }
 
 .lighter-soft-blue {
-  color: #f5f6f9 !important;
+  color: #f8f9fb !important;
 }
 
 .fill-lighter-soft-blue {
-  background-color: #f5f6f9 !important;
+  background-color: #f8f9fb !important;
 }
 
 .border-lighter-soft-blue {
-  border-color: #f5f6f9 !important;
+  border-color: #f8f9fb !important;
 }
 
 .border-top-lighter-soft-blue {
   border-top: 1px solid;
-  border-color: #f5f6f9 !important;
+  border-color: #f8f9fb !important;
 }
 
 .border-right-lighter-soft-blue {
   border-right: 1px solid;
-  border-color: #f5f6f9 !important;
+  border-color: #f8f9fb !important;
 }
 
 .border-bottom-lighter-soft-blue {
   border-bottom: 1px solid;
-  border-color: #f5f6f9 !important;
+  border-color: #f8f9fb !important;
 }
 
 .border-left-lighter-soft-blue {
   border-left: 1px solid;
-  border-color: #f5f6f9 !important;
+  border-color: #f8f9fb !important;
 }
 
 :root {
   --color-gray: var(--color-gray-100);
   --color-gray-50: #f6f7f8;
-  --color-gray-100: #EFF1F4;
-  --color-gray-200: #E3E5E8;
-  --color-gray-300: #D7D9DC;
-  --color-gray-400: #CBCDCF;
-  --color-gray-500: #BFC1C3;
-  --color-primary: var(--color-primary-1000);
-  --color-primary-100: #EAF1FE;
-  --color-primary-200: #D5E3FD;
-  --color-primary-300: #C0D5FC;
-  --color-primary-400: #ABC7FB;
-  --color-primary-500: #97B9FB;
-  --color-primary-600: #82AAFA;
-  --color-primary-700: #6DA2FF;
-  --color-primary-800: #588EF8;
-  --color-primary-900: #4380F7;
-  --color-primary-1000: #2E72F6;
-  --color-primary-1100: #2967DD;
-  --color-primary-1200: #255BC5;
-  --color-primary-1300: #2050AC;
-  --color-primary-1400: #1C4494;
-  --color-primary-1500: #083076;
-  --color-primary-1600: #122E62;
-  --color-primary-1700: #0E224A;
-  --color-primary-1800: #061734;
-  --color-primary-1900: #050B19;
-  --color-secondary: var(--color-secondary-900);
-  --color-secondary-100: #CCF1E4;
-  --color-secondary-200: #B3E9D7;
-  --color-secondary-300: #99E2C9;
-  --color-secondary-400: #80DBBC;
-  --color-secondary-500: #66D4AE;
-  --color-secondary-600: #4DCDA1;
-  --color-secondary-700: #33C593;
-  --color-secondary-800: #1ABE86;
-  --color-secondary-900: #00B778;
-  --color-secondary-1000: #00A56C;
-  --color-secondary-1100: #009260;
-  --color-secondary-1200: #008054;
-  --color-secondary-1300: #006E48;
-  --color-secondary-1400: #005C3C;
-  --color-secondary-1500: #004930;
-  --color-secondary-1600: #002518;
-  --color-secondary-1700: #00120C;
+  --color-gray-100: #eff1f4;
+  --color-gray-200: #e3e5e8;
+  --color-gray-300: #d7d9dc;
+  --color-gray-400: #cbcdcf;
+  --color-gray-500: #bfc1c3;
+  --color-primary: var(--color-primary-500);
+  --color-primary-50: #e4edfe;
+  --color-primary-100: #bbd2fe;
+  --color-primary-200: #8db4fd;
+  --color-primary-300: #5f95fc;
+  --color-primary-400: #3d7ffb;
+  --color-primary-500: #1b68fa;
+  --color-primary-600: #1860f9;
+  --color-primary-700: #1455f9;
+  --color-primary-800: #104bf8;
+  --color-primary-900: #083af6;
+  --color-primary-A100: #ffffff;
+  --color-primary-A200: #ebefff;
+  --color-primary-A400: #b8c4ff;
+  --color-primary-A700: #9fafff;
+  --color-secondary: var(--color-secondary-500);
+  --color-secondary-50: #ebf7ed;
+  --color-secondary-100: #cdead3;
+  --color-secondary-200: #acdcb5;
+  --color-secondary-300: #8bce97;
+  --color-secondary-400: #72c481;
+  --color-secondary-500: #59b96b;
+  --color-secondary-600: #51b263;
+  --color-secondary-700: #48aa58;
+  --color-secondary-800: #3ea24e;
+  --color-secondary-900: #2e933c;
+  --color-secondary-A100: #d9ffde;
+  --color-secondary-A200: #a6ffb1;
+  --color-secondary-A400: #73ff84;
+  --color-secondary-A700: #59ff6e;
 }
 
 /* Dialogs */