[Feature branch] Updated form control border color (#2114)

* Updated form control border color * Slighly more transparent * change sass var name to $euiFormBorderOpaqueColor
elastic · Jul 24, 2019 · c50c78b · c50c78b
1 parent 88106c0
commit c50c78b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss
@@ -122,12 +122,12 @@
   background-size: 100% 100%; /* 3 */
 
   @if ($borderOnly) {
-    box-shadow: inset 0 0 0 1px transparentize($euiColorFullShade, .84);
+    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
   } @else {
     box-shadow:
       0 1px 1px -1px transparentize($euiShadowColor, .8),
       0 4px 4px -2px transparentize($euiShadowColor, .8),
-      inset 0 0 0 1px transparentize($euiColorFullShade, .84);
+      inset 0 0 0 1px $euiFormBorderColor;
   }
 }
 

diff --git a/src/components/form/_variables.scss b/src/components/form/_variables.scss
@@ -16,8 +16,9 @@ $euiSwitchIconHeight: $euiSize !default;
 // Coloring
 $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 40%) !default;
 $euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default;
-$euiFormBorderColor: transparentize($euiColorFullShade, .9) !default;
-$euiFormBorderDisabledColor: transparentize($euiColorFullShade, .92) !default;
+$euiFormBorderOpaqueColor: shade(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%) !default;
+$euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
+$euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
 $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade
 $euiFormControlDisabledColor: $euiColorMediumShade !default;
 $euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8);