Theme: Clean up placeholder variables (#23257)

* Theme: Clean up placeholder variables

* Updated snapshot

packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap

@@ -111,7 +111,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
                   "formInputBorderHover": "#464c54",
                   "formInputBorderInvalid": "#e02f44",
                   "formInputDisabledText": "#9fa7b3",
-                  "formInputPlaceholderText": "#464c54",
+                  "formInputPlaceholderText": "#555555",
                   "formInputText": "#c7d0d9",
                   "formInputTextStrong": "#c7d0d9",
                   "formInputTextWhite": "#ffffff",
@@ -421,7 +421,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                   "formInputBorderHover": "#464c54",
                   "formInputBorderInvalid": "#e02f44",
                   "formInputDisabledText": "#9fa7b3",
-                  "formInputPlaceholderText": "#464c54",
+                  "formInputPlaceholderText": "#555555",
                   "formInputText": "#c7d0d9",
                   "formInputTextStrong": "#c7d0d9",
                   "formInputTextWhite": "#ffffff",

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -213,9 +213,6 @@ $input-label-bg: $gray-blue;
 $input-label-border-color: $dark-6;
 $input-color-select-arrow: $white;
 
-// Input placeholder text color
-$placeholderText: darken($text-color, 25%);
-
 // Search
 $search-shadow: 0 0 30px 0 $black;
 

packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts

@@ -200,14 +200,11 @@ $input-border-color: $gray-5;
 $input-box-shadow: none;
 $input-border-focus: $gray-5 !default;
 $input-box-shadow-focus: $blue-light !default;
-$input-color-placeholder: $gray-4 !default;
+$input-color-placeholder: ${theme.colors.formInputPlaceholderText};
 $input-label-bg: $gray-5;
 $input-label-border-color: $gray-5;
 $input-color-select-arrow: $gray-1;
 
-// Input placeholder text color
-$placeholderText: $gray-2;
-
 // search
 $search-shadow: 0 1px 5px 0 $gray-5;
 

packages/grafana-ui/src/themes/dark.ts

@@ -88,7 +88,7 @@ const darkTheme: GrafanaTheme = {
     formInputBorderHover: basicColors.gray33,
     formInputBorderActive: basicColors.blue95,
     formInputBorderInvalid: basicColors.red88,
-    formInputPlaceholderText: basicColors.gray33,
+    formInputPlaceholderText: basicColors.gray1,
     formInputText: basicColors.gray85,
     formInputDisabledText: basicColors.gray70,
     formInputTextStrong: basicColors.gray85,

public/sass/_variables.dark.generated.scss

@@ -211,14 +211,11 @@ $input-border-color: $dark-6;
 $input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
 $input-border-focus: $dark-6 !default;
 $input-box-shadow-focus: $blue-light !default;
-$input-color-placeholder: #464c54;
+$input-color-placeholder: #555555;
 $input-label-bg: $gray-blue;
 $input-label-border-color: $dark-6;
 $input-color-select-arrow: $white;
 
-// Input placeholder text color
-$placeholderText: darken($text-color, 25%);
-
 // Search
 $search-shadow: 0 0 30px 0 $black;
 

public/sass/_variables.light.generated.scss

@@ -203,14 +203,11 @@ $input-border-color: $gray-5;
 $input-box-shadow: none;
 $input-border-focus: $gray-5 !default;
 $input-box-shadow-focus: $blue-light !default;
-$input-color-placeholder: $gray-4 !default;
+$input-color-placeholder: #9fa7b3;
 $input-label-bg: $gray-5;
 $input-label-border-color: $gray-5;
 $input-color-select-arrow: $gray-1;
 
-// Input placeholder text color
-$placeholderText: $gray-2;
-
 // search
 $search-shadow: 0 1px 5px 0 $gray-5;
 

public/sass/mixins/_mixins.scss

@@ -44,14 +44,8 @@
 
 // Placeholder text
 // -------------------------
-@mixin placeholder($color: $placeholderText) {
-  &:-moz-placeholder {
-    color: $color;
-  }
-  &:-ms-input-placeholder {
-    color: $color;
-  }
-  &::-webkit-input-placeholder {
+@mixin placeholder($color: $input-color-placeholder) {
+  &::placeholder {
     color: $color;
   }
 }