diff --git a/src/Components/Dropdowns/Dropdown.scss b/src/Components/Dropdowns/Dropdown.scss index d3d5a29e..7646547f 100644 --- 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 index d247a417..3c53b3f9 100644 --- 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 index 01fd292a..fc131609 100644 --- 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 index 9093967f..ffdb0b7b 100644 --- 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 index e4ec7bc7..b690c3ab 100644 --- 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 index 362e7848..42acfd2b 100644 --- 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 index 5babf9eb..ef495885 100644 --- 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 index 7c996147..a8fef6bb 100644 --- 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 index e8bef3b3..569c1ac5 100644 --- 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,