style(elements): adapt components to new color scheme (#1118)

inovex · Dec 22, 2023 · d835091 · d835091
1 parent 8f1b743
commit d835091
Show file tree

Hide file tree

Showing 23 changed files with 194 additions and 191 deletions.
diff --git a/packages/elements/src/components/base/_tooltip-base.scss b/packages/elements/src/components/base/_tooltip-base.scss
@@ -6,7 +6,7 @@
 @import '../base/typography';
 
 $border-radius: 10px;
-$shadow-color: rgba(93, 91, 105, 0.3);
+$shadow-color: rgba(theme.$n-10, 0.35);
 
 @mixin tooltip($background-color, $font-color) {
   background: $background-color;

diff --git a/packages/elements/src/components/base/_tooltip_base.scss b/packages/elements/src/components/base/_tooltip_base.scss
@@ -6,7 +6,7 @@
 @import '../base/typography';
 
 $border-radius: 10px;
-$shadow-color: rgba(93, 91, 105, 0.3);
+$shadow-color: rgba(theme.$n-10, 0.35);
 
 @mixin tooltip($background-color, $font-color) {
   background: $background-color;

diff --git a/packages/elements/src/components/ino-chip/ino-chip.scss b/packages/elements/src/components/ino-chip/ino-chip.scss
@@ -3,16 +3,17 @@
 @use '@material/chips/styles';
 @use '../base/new-theme' as theme;
 
-$border-focused: rgba(45, 93, 255, 0.3);
+$border-focused: theme.$primary-focus;
 
 $chip-outlined-color-enabled: transparent;
-$chip-outlined-color-hover: #e8edff;
+$chip-outlined-color-hover: theme.$p-1;
 
-$chip-solid-color-enabled: #e8edff;
-$chip-solid-color-hover: #d7e0fe;
+$chip-solid-color-enabled: theme.$p-2;
+$chip-solid-color-hover: theme.$p-3;
+$chip-solid-font-color-hover: theme.$p-6;
 
-$chip-color-focus: #2d5dff4d;
-$chip-color-font: theme.$primary;
+$chip-color-focus: theme.$primary-focus;
+$chip-color-font: theme.$p-5;
 
 $icon-size: 16px;
 
@@ -28,13 +29,14 @@ ino-chip {
     width: inherit;
     height: inherit;
     @include chips.ripple-color(transparent);
-    @include chips.trailing-action-color(theme.$primary);
+    @include chips.trailing-action-color(theme.$p-5);
     @include chips.trailing-action-ripple-size(0px);
-    @include chips.text-label-color(theme.$primary);
-    @include chips.icon-color(theme.$primary);
-    @include chips.checkmark-color(theme.$primary);
+    @include chips.text-label-color(theme.$p-5);
+    @include chips.icon-color(theme.$p-5);
+    @include chips.checkmark-color(theme.$p-5);
     @include chips.height(inherit);
     @include chips.shape-radius(100%);
+    @include chips.text-label-color($chip-color-font);
     transition: ease-in-out 0.15s;
 
     .ino-chip-leading-icon {
@@ -77,10 +79,10 @@ ino-chip {
     @include chips.outline-style(solid);
     @include chips.outline-width(1px);
     @include chips.container-color($chip-outlined-color-enabled);
-    @include chips.outline-color(theme.$primary);
+    @include chips.outline-color(theme.$p-5);
 
     ino-icon {
-      --icon-color: #{theme.$primary};
+      --icon-color: #{theme.$p-5};
     }
 
     &:hover,
@@ -94,12 +96,13 @@ ino-chip {
     @include chips.container-color($chip-solid-color-enabled);
 
     ino-icon {
-      --icon-color: theme.$primary;
+      --icon-color: theme.$p-5;
     }
 
     &:hover,
     &:focus {
       @include chips.container-color($chip-solid-color-hover);
+      @include chips.text-label-color($chip-solid-font-color-hover);
     }
   }
 

diff --git a/packages/elements/src/components/ino-datepicker/ino-datepicker.scss b/packages/elements/src/components/ino-datepicker/ino-datepicker.scss
@@ -1,9 +1,8 @@
 @use '../base/typography';
-@use '../base/theme';
+@use '../base/new-theme' as theme;
 @import '~flatpickr/dist/flatpickr';
 @import '~flatpickr/dist/plugins/monthSelect/style';
 
-$light-blue: #d0d0e6; // rgba(theme.color(primary), 0.1);
 $padding-vertical: 12px;
 $padding-horizontal: 24px;
 
@@ -24,11 +23,11 @@ ino-datepicker {
 
 // Customize flatpickr styles
 
-$hover-color: lighten(theme.color(primary), 36.5%);
+$hover-color: theme.$p-3;
 
 .flatpickr-calendar {
   @include typography.font(sans-serif, s, regular);
-  box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 3px 20px 0 rgba(theme.$n-10, 0.35);
   border-radius: 0 6px 6px 6px;
   margin-top: 4px;
 
@@ -73,7 +72,7 @@ $hover-color: lighten(theme.color(primary), 36.5%);
   padding: 0 20px 0 6px;
   margin-bottom: 10px;
   border-radius: 24px;
-  // background-color: theme.$light-blue;
+  // background-color: theme.theme.$n-3;
   width: 100%;
 
   .flatpickr-month {
@@ -101,7 +100,7 @@ $hover-color: lighten(theme.color(primary), 36.5%);
 
     --ino-icon-height: 12px;
     --ino-icon-width: 12px;
-    --ino-icon-color: #{theme.color(primary)};
+    --ino-icon-color: #{theme.$p-5};
   }
 }
 
@@ -140,28 +139,28 @@ $hover-color: lighten(theme.color(primary), 36.5%);
 
   // Text color
   &:not(.flatpickr-disabled)#{$notSelected} {
-    color: theme.color(dark);
+    color: theme.$n-7;
   }
 
   &.nextMonthDay:not(.flatpickr-disabled)#{$notSelected},
   &.prevMonthDay:not(.flatpickr-disabled)#{$notSelected} {
-    color: theme.color(dark, light);
+    color: theme.$n-4;
   }
 
   &:hover:not(.flatpickr-disabled)#{$notSelected},
   &:focus:not(.flatpickr-disabled)#{$notSelected} {
-    color: theme.color(primary);
-    background-color: $light-blue;
-    border-color: $light-blue;
+    color: theme.$p-5;
+    background-color: theme.$n-3;
+    border-color: theme.$n-3;
   }
 
   // Today
   &.today:not(.flatpickr-disabled)#{$notSelected} {
-    color: theme.color(primary);
+    color: theme.$p-5;
     // Only add border if its not in a range
     // (provides problems with the background color logic of flatpickr)
     &:not(.inRange) {
-      border: 1px solid theme.color(primary);
+      border: 1px solid theme.$p-5;
     }
   }
 
@@ -171,23 +170,23 @@ $hover-color: lighten(theme.color(primary), 36.5%);
   &.endRange:hover,
   &.startRange,
   &.startRange:hover {
-    background-color: theme.color(primary);
-    border-color: theme.color(primary);
+    background-color: theme.$p-5;
+    border-color: theme.$p-5;
     color: white;
     font-weight: typography.font-weight(semibold);
     line-height: $size;
   }
 
   // Background within a range
   &.inRange:not(.selected) {
-    border-color: $light-blue;
-    background-color: $light-blue;
-    box-shadow: -12px 0 0 $light-blue, 12px 0 0 $light-blue;
+    border-color: theme.$n-3;
+    background-color: theme.$n-3;
+    box-shadow: -12px 0 0 theme.$n-3, 12px 0 0 theme.$n-3;
   }
 
   &.selected.startRange + .endRange:not(:nth-child(7n + 1)),
   &.startRange.startRange + .endRange:not(:nth-child(7n + 1)) {
-    box-shadow: -12px 0 0 $light-blue;
+    box-shadow: -12px 0 0 theme.$n-3;
   }
 }
 
@@ -208,19 +207,19 @@ $hover-color: lighten(theme.color(primary), 36.5%);
     align-items: center;
 
     &.selected {
-      background-color: theme.color(primary);
-      border-color: theme.color(primary);
+      background-color: theme.$p-5;
+      border-color: theme.$p-5;
       font-weight: typography.font-weight(semibold);
       color: white;
     }
 
     &.today {
-      border-color: theme.color(primary);
-      color: theme.color(primary);
+      border-color: theme.$p-5;
+      color: theme.$p-5;
     }
 
     &:hover:not(.selected) {
-      background-color: $light-blue;
+      background-color: theme.$n-3;
     }
   }
 }
diff --git a/packages/elements/src/components/ino-fab/ino-fab.scss b/packages/elements/src/components/ino-fab/ino-fab.scss
@@ -1,7 +1,7 @@
 @use '../base/mdc-customize';
 @use '@material/fab/mdc-fab';
 @use '@material/fab';
-@use '../base/theme';
+@use '../base/new-theme' as theme;
 @use '../base/animation';
 
 @include fab.core-styles;
@@ -56,33 +56,24 @@ $extended-edged-borders: (
    * @prop --fab-icon-color-disabled: Color of the slotted icon if disabled
    */
   --fab-color: var(--ino-fab-color, white);
-  --fab-background-color: var(
-    --ino-fab-background-color,
-    #{theme.color(primary)}
-  );
+  --fab-background-color: var(--ino-fab-background-color, #{theme.$p-6});
   --fab-background-color-hover: var(
     --ino-fab-background-color-hover,
-    #{theme.color(primary, light)}
+    #{theme.$p-5}
   );
   --fab-background-color-active: var(
     --ino-fab-background-color-active,
-    #{theme.color(primary, dark)}
-  );
-  --fab-icon-color: var(
-    --ino-fab-icon-color,
-    #{theme.color(primary, contrast)}
-  );
-  --fab-color-disabled: var(
-    --ino-fab-color-disabled,
-    #{theme.color(primary, contrast)}
+    #{theme.$p-7}
   );
+  --fab-icon-color: var(--ino-fab-icon-color, #{theme.$white});
+  --fab-color-disabled: var(--ino-fab-color-disabled, #{theme.$white});
   --fab-background-color-disabled: var(
     --ino-background-color-disabled,
-    #{theme.color(dark, light)}
+    #{theme.$n-4}
   );
   --fab-icon-color-disabled: var(
     --ino-fab-icon-color-disabled,
-    #{theme.color(primary, contrast)}
+    #{theme.$white}
   );
 }
 

diff --git a/packages/elements/src/components/ino-icon-button/ino-icon-button.scss b/packages/elements/src/components/ino-icon-button/ino-icon-button.scss
@@ -1,5 +1,5 @@
 @use '../base/mdc-customize';
-@use '../base/theme';
+@use '../base/new-theme' as theme;
 @use '@material/icon-button/mdc-icon-button';
 @use '@material/icon-button';
 @use '@material/ripple/ripple-theme';
@@ -18,15 +18,12 @@ ino-icon-button {
 
   $button-size: var(--ino-icon-button-size, 48px);
   $icon-size: var(--ino-icon-button-icon-size, 24px);
-  $icon-color: var(--ino-icon-button-icon-color, theme.color(primary));
+  $icon-color: var(--ino-icon-button-icon-color, theme.$p-5);
   $background-color: var(--ino-icon-button-background-color, transparent);
-  $icon-active-color: var(
-    --ino-icon-button-icon-active-color,
-    theme.color(primary)
-  );
+  $icon-active-color: var(--ino-icon-button-icon-active-color, theme.$p-5);
   $background-active-color: var(
     --ino-icon-button-background-active-color,
-    theme.color(primary)
+    theme.$p-5
   );
 
   ino-icon {
@@ -58,10 +55,10 @@ ino-icon-button {
   }
 
   &.ino-icon-button--filled {
-    --ino-icon-button-icon-color: #{theme.color(primary, contrast)};
-    --ino-icon-button-icon-active-color: #{theme.color(primary, contrast)};
-    --ino-icon-button-background-color: #{theme.color(primary)};
-    --ino-icon-button-background-active-color: #{theme.color(primary, contrast)};
+    --ino-icon-button-icon-color: #{theme.$white};
+    --ino-icon-button-icon-active-color: #{theme.$white};
+    --ino-icon-button-background-color: #{theme.$p-6};
+    --ino-icon-button-background-active-color: #{theme.$white};
   }
 }
 
@@ -70,19 +67,19 @@ ino-icon-button {
 .ino-icon-button--disabled.ino-icon-button-filled {
   --ino-icon-button-background-color: var(
     --ino-icon-button-background-disabled-color,
-    #{theme.color(dark, light)}
+    #{theme.$n-4}
   );
 
   ino-icon {
-    --ino-icon-button-icon-color: #fff;
+    --ino-icon-button-icon-color: #{theme.$white};
   }
 }
 
 .ino-icon-button--disabled:not(.ino-icon-button-filled) {
   ino-icon {
     --ino-icon-button-icon-color: var(
       --ino-icon-button-icon-disabled-color,
-      #{theme.color(dark, light)}
+      #{theme.$n-4}
     );
   }
 }
diff --git a/packages/elements/src/components/ino-input/ino-input.scss b/packages/elements/src/components/ino-input/ino-input.scss
@@ -6,7 +6,7 @@
 @use '@material/floating-label/mdc-floating-label';
 @use '@material/floating-label';
 @use '@material/notched-outline/mdc-notched-outline';
-@use '../base/theme';
+@use '../base/new-theme' as theme;
 @use '../base/typography';
 
 $default-text-field: 'not(.mdc-text-field--outlined):not(.mdc-text-field--textarea)';
@@ -63,10 +63,10 @@ ino-input {
    * @prop --ino-input-icon-color: icon color
    */
   --input-color: var(--ino-input-color, #{textfield.$ink-color});
-  --input-caret-color: var(--ino-input-caret-color, #{theme.color(primary)});
-  --input-label-color: var(--ino-input-label-color, #{theme.color(primary)});
-  --input-line-color: var(--ino-input-line-color, #{theme.color(primary)});
-  --input-icon-color: var(--ino-input-icon-color, #{theme.color(primary)});
+  --input-caret-color: var(--ino-input-caret-color, #{theme.$p-5});
+  --input-label-color: var(--ino-input-label-color, #{theme.$p-5});
+  --input-line-color: var(--ino-input-line-color, #{theme.$p-5});
+  --input-icon-color: var(--ino-input-icon-color, #{theme.$p-5});
 
   display: block;
   @include icon.icon-core-styles;
@@ -107,8 +107,8 @@ ino-input {
   }
 
   .mdc-text-field--invalid {
-    @include textfield.label-color(theme.color(error));
-    @include setIconColors(theme.color(error));
+    @include textfield.label-color(theme.$error);
+    @include setIconColors(theme.$error);
   }
 
   :not(.mdc-text-field--disabled) {
@@ -127,7 +127,7 @@ ino-input .mdc-text-field--filled {
   @include textfield.line-ripple-color(var(--input-line-color));
 
   &.mdc-text-field--invalid {
-    @include textfield.line-ripple-color(theme.color(error));
+    @include textfield.line-ripple-color(theme.$error);
   }
 
   &:not([class*='--with-leading-icon']) {
@@ -189,7 +189,7 @@ ino-input .mdc-text-field--outlined {
   }
 
   &.mdc-text-field--invalid {
-    @include textfield.focused-outline-color(theme.color(error));
+    @include textfield.focused-outline-color(theme.$error);
   }
 
   &[class*='--with-leading-icon']