feat(inputs): clockface 4 updates (#880)

influxdata · Oct 26, 2022 · 5d7a96c · 5d7a96c
1 parent 0b7d3d7
commit 5d7a96c
Show file tree

Hide file tree

Showing 9 changed files with 17 additions and 20 deletions.
diff --git a/src/Components/Dropdowns/Dropdown.scss b/src/Components/Dropdowns/Dropdown.scss
@@ -304,7 +304,7 @@ $dropdown-item--padding-v: $cf-space-2xs;
   }
 
   .cf-dropdown-item.active:not(.cf-dropdown-item__disabled) {
-    background-color: $cf-martinique;
+    background-color: #2A2649;
     border: 1px $cf-lavender solid;
     border-radius: $cf-border;
   }

diff --git a/src/Components/Inputs/Composed/RangeSlider.scss b/src/Components/Inputs/Composed/RangeSlider.scss
@@ -329,7 +329,7 @@ $slider-hover: $g17-whisper;
   @include rangeSliderColorModifier($g7-graphite, $g8-storm, $g9-mountain);
 }
 .cf-range-slider__primary {
-  @include rangeSliderColorModifier($c-pool, $c-laser, $c-hydrogen);
+  @include rangeSliderColorModifier($cf-lavender, $cf-lavender, $cf-lavender);
 }
 .cf-range-slider__secondary {
   @include rangeSliderColorModifier($c-star, $c-comet, $c-potassium);

diff --git a/src/Components/Inputs/Input.scss b/src/Components/Inputs/Input.scss
@@ -23,12 +23,6 @@
   color: $cf-input-text--default;
   border: $cf-border solid $cf-input-border--default;
 
-  &:hover {
-    background-color: $cf-input-background--hover;
-    border-color: $cf-input-border--hover;
-    color: $cf-input-text--hover;
-  }
-
   &:focus {
     background-color: $cf-input-background--focused;
     border-color: $cf-input-border--focused;
@@ -193,7 +187,7 @@ alternate css for the other sizes */
     left: 50%;
     transform: translate(-50%, -50%) scale(1.5, 1.5);
     border-radius: 50%;
-    background: $cf-input-border--focused;
+    background: $cf-lavender;
     z-index: 2;
     opacity: 0;
     transition: opacity $cf-transition-default, transform $cf-transition-default;

diff --git a/src/Components/Inputs/StatusIndicator.scss b/src/Components/Inputs/StatusIndicator.scss
@@ -100,7 +100,7 @@
 */
 
 .cf-status-indicator__valid {
-  color: $c-rainforest;
+  color: $cf-green;
 }
 
 .cf-status-indicator__error {

diff --git a/src/Components/Inputs/Toggle.scss b/src/Components/Inputs/Toggle.scss
@@ -58,7 +58,7 @@
   }
 
   .cf-toggle__checked & {
-    background: $c-pool;
+    background: $cf-lavender;
 
     .cf-toggle--indicator {
       opacity: 1;
@@ -103,6 +103,7 @@
   width: 100%;
   height: 100%;
   transform: translate(-50%, -50%) scale(0.333);
+  outline: rgba(0,0,0, 0.2) solid 1px;
 }
 
 .cf-toggle--icon {

diff --git a/src/Components/SlideToggle/SlideToggle.scss b/src/Components/SlideToggle/SlideToggle.scss
@@ -45,8 +45,6 @@ $slide-toggle--gap: 3px;
     transform $cf-transition-default;
   transform: translate(0, -50%);
   border-radius: 50%;
-  box-shadow: 0 0 $slide-toggle--gap ($slide-toggle--gap * 0.5)
-    rgba($cf-grey-5, 0.25);
   background-color: $cf-grey-75;
   left: 10%;
 
@@ -62,6 +60,7 @@ $slide-toggle--gap: 3px;
 .cf-slide-toggle.active .cf-slide-toggle--knob {
   transform: translate(100%, -50%);
   background-color: $cf-white;
+  outline: rgba(0,0,0, 0.2) solid 1px;
 }
 
 /*
@@ -123,7 +122,7 @@ $slide-toggle--gap: 3px;
 .cf-slide-toggle {
   &.cf-slide-toggle-default,
   &.cf-slide-toggle-primary {
-    @include slideToggleColorModifier($c-pool);
+    @include slideToggleColorModifier($cf-lavender);
   }
   &.cf-slide-toggle-secondary {
     @include slideToggleColorModifier($c-star);
@@ -132,7 +131,7 @@ $slide-toggle--gap: 3px;
     @include slideToggleColorModifier($c-rainforest);
   }
   &.cf-slide-toggle-danger {
-    @include slideToggleColorModifier($c-curacao);
+    @include slideToggleColorModifier($cf-carnation);
   }
   &.cf-slide-toggle-warning {
     @include slideToggleColorModifier($c-pineapple);

diff --git a/src/Styles/variables.scss b/src/Styles/variables.scss
@@ -14,10 +14,12 @@ $cf-white: #ffffff;
 
 // Brand Colors
 $cf-turquoise: #5ee4e4;
-$cf-lavender: #c77bea;
+$cf-lavender: #9394FF;
 $cf-hot-pink: #f863b0;
 $cf-chartreuse: #d6f622;
 
+$cf-green: #53E51A;
+
 // Utility Colors
 $cf-lime-green: #51d91c;
 $cf-carnation: #e65b5b;
@@ -335,9 +337,9 @@ $cf-input-border--focused: rgba($cf-turquoise, 0.75);
 $cf-input-border--hover: $g5-pepper;
 $cf-input-border--disabled: $g4-onyx;
 
-$cf-input-border--error: $c-fire;
-$cf-input-border--error-hover: $c-fire;
-$cf-input-border--error-focused: $c-fire;
+$cf-input-border--error: $cf-carnation;
+$cf-input-border--error-hover: $cf-carnation;
+$cf-input-border--error-focused: $cf-carnation;
 
 $cf-input--field-z: 1;
 $cf-input--shadow-z: $cf-input--field-z + 1;

diff --git a/src/Types/index.tsx b/src/Types/index.tsx
@@ -179,6 +179,7 @@ export enum ButtonType {
 }
 
 export enum InfluxColors {
+  Lavender = '#9394FF',
   // Grey
   Grey5 = '#07070e',
   Grey15 = '#1a1a2a',

diff --git a/src/Utils/index.ts b/src/Utils/index.ts
@@ -170,7 +170,7 @@ export const generateRangeSliderTrackFillStyle = (
 
   const fillColor = {
     default: InfluxColors.Graphite,
-    primary: InfluxColors.Pool,
+    primary: InfluxColors.Lavender,
     secondary: InfluxColors.Star,
     success: InfluxColors.Rainforest,
     warning: InfluxColors.Pineapple,