fix(colorpicker): use subtle text variable in colorpicker styling

telerik · Feb 25, 2021 · e8df2cf · e8df2cf
1 parent 66ac6b9
commit e8df2cf
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 172 deletions.
diff --git a/packages/bootstrap/scss/colorpicker/_variables.scss b/packages/bootstrap/scss/colorpicker/_variables.scss
@@ -17,37 +17,21 @@ $colorpicker-input-padding-y: $input-padding-y !default;
 
 $colorpicker-select-border-width: 1px !default;
 
-$colorpicker-bg: $input-bg !default;
-$colorpicker-text: $input-text !default;
-$colorpicker-border: $input-border !default;
-
-$colorpicker-hovered-bg: null !default;
-$colorpicker-hovered-text: null !default;
-$colorpicker-hovered-border: null !default;
-
-$colorpicker-focused-bg: null !default;
-$colorpicker-focused-text: null !default;
-$colorpicker-focused-border: null !default;
-$colorpicker-focused-shadow: null !default;
-
-$colorpicker-select-bg: $button-bg !default;
-$colorpicker-select-text: $button-text !default;
-$colorpicker-select-border: $button-border !default;
-$colorpicker-select-gradient: $button-gradient !default;
-
-$colorpicker-select-hovered-bg: $button-hovered-bg !default;
-$colorpicker-select-hovered-text: $button-hovered-text !default;
-$colorpicker-select-hovered-border: $button-hovered-border !default;
-$colorpicker-select-hovered-gradient: $button-hovered-gradient !default;
-
-$colorpicker-select-focused-bg: $button-pressed-bg !default;
-$colorpicker-select-focused-text: $button-pressed-text !default;
-$colorpicker-select-focused-border: $button-pressed-border !default;
-$colorpicker-select-focused-gradient: $button-pressed-gradient !default;
-$colorpicker-select-pressed-shadow: $button-pressed-shadow !default;
-$colorpicker-select-focused-shadow: $button-focused-shadow !default;
-
-$colorpicker-tool-icon-hovered-border: $colorpicker-select-hovered-border;
+$colorpicker-bg: $button-bg !default;
+$colorpicker-text: $button-text !default;
+$colorpicker-border: $button-border !default;
+$colorpicker-gradient: $button-gradient !default;
+
+$colorpicker-hovered-bg: $button-hovered-bg !default;
+$colorpicker-hovered-text: $button-hovered-text !default;
+$colorpicker-hovered-border: $button-hovered-border !default;
+$colorpicker-hovered-gradient: $button-hovered-gradient !default;
+
+$colorpicker-focused-bg: $button-pressed-bg !default;
+$colorpicker-focused-text: $button-pressed-text !default;
+$colorpicker-focused-border: $button-pressed-border !default;
+$colorpicker-focused-gradient: $button-pressed-gradient !default;
+$colorpicker-focused-shadow: $button-focused-shadow !default;
 
 $colorpalette-hovered-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
 $colorpalette-focused-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;
diff --git a/packages/classic/scss/colorpicker/_variables.scss b/packages/classic/scss/colorpicker/_variables.scss
@@ -17,37 +17,21 @@ $colorpicker-input-padding-y: $input-padding-y !default;
 
 $colorpicker-select-border-width: 1px !default;
 
-$colorpicker-bg: $input-bg !default;
-$colorpicker-text: $input-text !default;
-$colorpicker-border: $input-border !default;
+$colorpicker-bg: $button-bg !default;
+$colorpicker-text: $button-text !default;
+$colorpicker-border: $button-border !default;
+$colorpicker-gradient: $button-gradient !default;
 
-$colorpicker-hovered-bg: null !default;
-$colorpicker-hovered-text: null !default;
-$colorpicker-hovered-border: null !default;
+$colorpicker-hovered-bg: $button-hovered-bg !default;
+$colorpicker-hovered-text: $button-hovered-text !default;
+$colorpicker-hovered-border: $button-hovered-border !default;
+$colorpicker-hovered-gradient: $button-hovered-gradient !default;
 
 $colorpicker-focused-bg: null !default;
 $colorpicker-focused-text: null !default;
 $colorpicker-focused-border: null !default;
-$colorpicker-focused-shadow: null !default;
-
-$colorpicker-select-bg: $button-bg !default;
-$colorpicker-select-text: $button-text !default;
-$colorpicker-select-border: $button-border !default;
-$colorpicker-select-gradient: $button-gradient !default;
-
-$colorpicker-select-hovered-bg: $button-hovered-bg !default;
-$colorpicker-select-hovered-text: $button-hovered-text !default;
-$colorpicker-select-hovered-border: $button-hovered-border !default;
-$colorpicker-select-hovered-gradient: $button-hovered-gradient !default;
-
-$colorpicker-select-focused-bg: $button-pressed-bg !default;
-$colorpicker-select-focused-text: $button-pressed-text !default;
-$colorpicker-select-focused-border: $button-pressed-border !default;
-$colorpicker-select-focused-gradient: $button-pressed-gradient !default;
-$colorpicker-select-pressed-shadow: $button-pressed-shadow !default;
-$colorpicker-select-focused-shadow: $button-focused-shadow !default;
-
-$colorpicker-tool-icon-hovered-border: rgba(0, 0, 0, .08) !default;
+$colorpicker-focused-gradient: null !default;
+$colorpicker-focused-shadow: $button-focused-shadow !default;
 
 $colorpalette-hovered-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
 $colorpalette-focused-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;
diff --git a/packages/default/scss/colorpicker/_layout.scss b/packages/default/scss/colorpicker/_layout.scss
@@ -366,9 +366,9 @@
             width: 100%;
             border: 0;
             box-sizing: border-box;
-            font-size: inherit;
+            font-size: $input-font-size;
             line-height: $input-line-height;
-            font-family: $font-family-monospace;
+            font-family: $input-font-family;
             outline: 0;
             flex: 1;
         }

diff --git a/packages/default/scss/colorpicker/_theme.scss b/packages/default/scss/colorpicker/_theme.scss
@@ -1,62 +1,51 @@
-@include exports("colorpicker/theme") {
+@include exports( "colorpicker/theme" ) {
 
     .k-colorpicker {
 
         // Normal state
         .k-picker-wrap {
             @include fill(
-                $colorpicker-select-text,
-                $colorpicker-select-bg,
-                $colorpicker-select-border,
-                $colorpicker-select-gradient
+                $colorpicker-text,
+                $colorpicker-bg,
+                $colorpicker-border,
+                $colorpicker-gradient
             );
 
-            &:focus {
-
-            }
-
             // Invalid state
             &.k-invalid,
             &.k-invalid:hover,
             &.k-state-invalid {
-                color: $error;
                 border-color: $invalid-border;
+
+                &:focus,
+                &.k-state-focused {
+                    @include box-shadow($invalid-shadow);
+                }
             }
         }
 
-        // Hovered state
-        .k-tool-icon:hover,
-        .k-select:hover,
-        .k-tool-icon.k-state-hover,
-        .k-select.k-state-hover,
+        // Hover state
+        > :hover,
         .k-state-hover {
             @include fill(
-                $colorpicker-select-hovered-text,
-                $colorpicker-select-hovered-bg,
-                $colorpicker-select-hovered-border,
-                $colorpicker-select-hovered-gradient
+                $colorpicker-hovered-text,
+                $colorpicker-hovered-bg,
+                $colorpicker-hovered-border,
+                $colorpicker-hovered-gradient
             );
         }
 
-        .k-tool-icon:hover,
-        .k-tool-icon.k-state-hover {
-            border-color: $colorpicker-tool-icon-hovered-border;
-        }
+        &.k-state-active {}
 
-        // Selected state
-        .k-state-active {
+        // Focus state
+        .k-state-focused {
             @include fill(
-                $colorpicker-select-focused-text,
-                $colorpicker-select-focused-bg,
-                $colorpicker-select-focused-border,
-                $colorpicker-select-focused-gradient
+                $colorpicker-focused-text,
+                $colorpicker-focused-bg,
+                $colorpicker-focused-border,
+                $colorpicker-focused-gradient
             );
-            @include box-shadow( $colorpicker-select-pressed-shadow );
-        }
-
-        // Focused state
-        .k-state-focused {
-            box-shadow: $colorpicker-select-focused-shadow;
+            @include box-shadow($colorpicker-focused-shadow);
         }
 
         // Invalid state
@@ -65,6 +54,10 @@
         &.ng-invalid.ng-dirty {
             .k-picker-wrap {
                 border-color: $invalid-border;
+
+                &.k-state-focused {
+                    @include box-shadow($invalid-shadow);
+                }
             }
         }
 
@@ -87,9 +80,9 @@
 
         .k-color-value {
             @include fill(
-                $colorpicker-text,
-                $colorpicker-bg,
-                $colorpicker-border
+                $input-text,
+                $input-bg,
+                $input-border
             );
         }
 

diff --git a/packages/default/scss/colorpicker/_variables.scss b/packages/default/scss/colorpicker/_variables.scss
@@ -17,37 +17,21 @@ $colorpicker-input-padding-y: $input-padding-y !default;
 
 $colorpicker-select-border-width: 1px !default;
 
-$colorpicker-bg: $input-bg !default;
-$colorpicker-text: $input-text !default;
-$colorpicker-border: $input-border !default;
+$colorpicker-bg: $button-bg !default;
+$colorpicker-text: $button-text !default;
+$colorpicker-border: $button-border !default;
+$colorpicker-gradient: $button-gradient !default;
 
-$colorpicker-hovered-bg: null !default;
-$colorpicker-hovered-text: null !default;
-$colorpicker-hovered-border: null !default;
+$colorpicker-hovered-bg: $button-hovered-bg !default;
+$colorpicker-hovered-text: $button-hovered-text !default;
+$colorpicker-hovered-border: $button-hovered-border !default;
+$colorpicker-hovered-gradient: $button-hovered-gradient !default;
 
 $colorpicker-focused-bg: null !default;
 $colorpicker-focused-text: null !default;
 $colorpicker-focused-border: null !default;
-$colorpicker-focused-shadow: null !default;
-
-$colorpicker-select-bg: $button-bg !default;
-$colorpicker-select-text: $button-text !default;
-$colorpicker-select-border: $button-border !default;
-$colorpicker-select-gradient: $button-gradient !default;
-
-$colorpicker-select-hovered-bg: $button-hovered-bg !default;
-$colorpicker-select-hovered-text: $button-hovered-text !default;
-$colorpicker-select-hovered-border: $button-hovered-border !default;
-$colorpicker-select-hovered-gradient: $button-hovered-gradient !default;
-
-$colorpicker-select-focused-bg: $button-pressed-bg !default;
-$colorpicker-select-focused-text: $button-pressed-text !default;
-$colorpicker-select-focused-border: $button-pressed-border !default;
-$colorpicker-select-focused-gradient: $button-pressed-gradient !default;
-$colorpicker-select-pressed-shadow: $button-pressed-shadow !default;
-$colorpicker-select-focused-shadow: $button-focused-shadow !default;
-
-$colorpicker-tool-icon-hovered-border: rgba(0, 0, 0, .08) !default;
+$colorpicker-focused-gradient: null !default;
+$colorpicker-focused-shadow: $button-focused-shadow !default;
 
 $colorpalette-hovered-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
 $colorpalette-focused-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;
diff --git a/packages/material/scss/colorpicker/_theme.scss b/packages/material/scss/colorpicker/_theme.scss
@@ -3,59 +3,36 @@
 @include exports( "colorpicker/theme/material" ) {
 
     .k-colorpicker {
-
-        .k-selected-color {
-            border-color: rgba( 0, 0, 0, .08 );
-        }
-
-        .k-tool-icon {
-            color: rgba(0, 0, 0, .42);
-        }
-
-        .k-tool-icon:hover,
-        .k-tool-icon.k-state-hover {
-            color: rgba(0, 0, 0, .87);
-            background-color: transparent;
-        }
-
-        .k-select:hover,
-        .k-select.k-state-hover {
-            border-color: transparent;
-            background-color: transparent;
-        }
-
         .k-picker-wrap {
-            border-color: $colorpicker-border;
-            background-color: transparent;
 
-            .k-input {
-                color: $colorpicker-text;
+            .k-selected-color {
+                border-color: rgba( 0, 0, 0, .08 );
             }
 
             .k-select {
-                opacity: $icon-opacity;
+                color: $colorpicker-select-text;
             }
 
             // Hover
             &:hover,
             &.k-state-hover {
-                border-color: $colorpicker-hovered-border;
 
                 .k-select {
-                    opacity: $icon-hovered-opacity;
+                    color: $colorpicker-select-hovered-text;
                 }
             }
 
             // Focused
             &.k-state-focused,
             .k-state-focused > & {
-                border-color: $colorpicker-focused-border;
 
                 .k-select {
-                    opacity: $icon-focused-opacity;
+                    color: $colorpicker-select-focused-text;
                 }
             }
+
         }
+
     }
 
 }
diff --git a/packages/material/scss/colorpicker/_variables.scss b/packages/material/scss/colorpicker/_variables.scss
@@ -17,37 +17,25 @@ $colorpicker-input-padding-y: $input-padding-y !default;
 
 $colorpicker-select-border-width: 0px !default;
 
-$colorpicker-bg: $input-bg !default;
+$colorpicker-bg: null !default;
 $colorpicker-text: $input-text !default;
 $colorpicker-border: $input-border !default;
+$colorpicker-gradient: null !default;
 
 $colorpicker-hovered-bg: null !default;
 $colorpicker-hovered-text: null !default;
 $colorpicker-hovered-border: $input-hovered-border !default;
+$colorpicker-hovered-gradient: null !default;
 
 $colorpicker-focused-bg: null !default;
 $colorpicker-focused-text: null !default;
 $colorpicker-focused-border: $input-focused-border !default;
+$colorpicker-focused-gradient: null !default;
 $colorpicker-focused-shadow: null !default;
 
-$colorpicker-select-bg: $button-bg !default;
-$colorpicker-select-text: $button-text !default;
-$colorpicker-select-border: $button-border !default;
-$colorpicker-select-gradient: $button-gradient !default;
-
-$colorpicker-select-hovered-bg: $button-hovered-bg !default;
-$colorpicker-select-hovered-text: $button-hovered-text !default;
-$colorpicker-select-hovered-border: $button-hovered-border !default;
-$colorpicker-select-hovered-gradient: $button-hovered-gradient !default;
-
-$colorpicker-select-focused-bg: $button-pressed-bg !default;
-$colorpicker-select-focused-text: $button-pressed-text !default;
-$colorpicker-select-focused-border: $button-pressed-border !default;
-$colorpicker-select-focused-gradient: $button-pressed-gradient !default;
-$colorpicker-select-pressed-shadow: $button-pressed-shadow !default;
-$colorpicker-select-focused-shadow: $button-focused-shadow !default;
-
-$colorpicker-tool-icon-hovered-border: rgba(0, 0, 0, .08) !default;
+$colorpicker-select-text: $subtle-text !default;
+$colorpicker-select-hovered-text: $input-text !default;
+$colorpicker-select-focused-text: $input-text !default;
 
 $colorpalette-hovered-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
 $colorpalette-focused-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;