Clean up focus background implementation (#962)

* Clean up focus background implementation Signed-off-by: Matt Provost <[email protected]> * Rename variable to ouiFocusChangePercent Signed-off-by: Matt Provost <[email protected]> * Update changelog Signed-off-by: Matt Provost <[email protected]> --------- Signed-off-by: Matt Provost <[email protected]>
opensearch-project · Aug 16, 2023 · 58380a5 · 58380a5
1 parent a95605b
commit 58380a5
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -37,6 +37,8 @@
 
 ### 🪛 Refactoring
 
+- Clean up focus background implementation ([#962](https://github.com/opensearch-project/oui/pull/962))
+
 ### 🔩 Tests
 
 ## [`1.1.1`](https://github.com/opensearch-project/oui/tree/1.1.1)

diff --git a/src/global_styling/mixins/_states.scss b/src/global_styling/mixins/_states.scss
@@ -24,7 +24,7 @@
 // utility/animations.scss
 
 @mixin ouiFocusBackground($color: $ouiColorPrimary) {
-  background-color: tintOrShade($ouiColorPrimary, ((1 - $ouiFocusTransparency) * 100%), ((1 - $ouiFocusTransparency) * 100%));
+  background-color: tintOrShade($color, $ouiFocusChangePercent, $ouiFocusChangePercent);
 }
 
 @mixin ouiHoverState {

diff --git a/src/global_styling/variables/_states.scss b/src/global_styling/variables/_states.scss
@@ -20,8 +20,8 @@ $ouiFocusRingSizeLarge: $ouiSizeXS !default;
 $ouiFocusRingSize: $ouiFocusRingSizeLarge * .75 !default;
 
 // Transparency
-$ouiFocusTransparency: lightOrDarkTheme(.1, .3) !default;
-$ouiFocusBackgroundColor: tintOrShade($ouiColorPrimary, ((1 - $ouiFocusTransparency) * 100%), ((1 - $ouiFocusTransparency) * 100%)) !default;
+$ouiFocusChangePercent: lightOrDarkTheme(90%, 65%) !default;
+$ouiFocusBackgroundColor: tintOrShade($ouiColorPrimary, $ouiFocusChangePercent, $ouiFocusChangePercent) !default;
 
 
 /* OUI -> EUI Aliases */
@@ -31,6 +31,6 @@ $euiFocusRingAnimStartSize: $ouiFocusRingAnimStartSize;
 $euiFocusRingAnimStartSizeLarge: $ouiFocusRingAnimStartSizeLarge;
 $euiFocusRingSizeLarge: $ouiFocusRingSizeLarge;
 $euiFocusRingSize: $ouiFocusRingSize;
-$euiFocusTransparency: $ouiFocusTransparency;
+$euiFocusChangePercent: $ouiFocusChangePercent;
 $euiFocusBackgroundColor: $ouiFocusBackgroundColor;
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/mixins/_states.scss b/src/themes/oui-next/global_styling/mixins/_states.scss
@@ -24,7 +24,7 @@
 // utility/animations.scss
 
 @mixin ouiFocusBackground($color: $ouiColorPrimary) {
-  background-color: tintOrShade($ouiColorPrimary, ((1 - $ouiFocusTransparency) * 100%), ((1 - $ouiFocusTransparency) * 100%));
+  background-color: tintOrShade($color, $ouiFocusChangePercent, $ouiFocusChangePercent);
 }
 
 @mixin ouiHoverState {

diff --git a/src/themes/oui-next/global_styling/variables/_states.scss b/src/themes/oui-next/global_styling/variables/_states.scss
@@ -20,8 +20,8 @@ $ouiFocusRingSizeLarge: $ouiSizeXS !default;
 $ouiFocusRingSize: $ouiFocusRingSizeLarge * .75 !default;
 
 // Transparency
-$ouiFocusTransparency: lightOrDarkTheme(.1, .3) !default;
-$ouiFocusBackgroundColor: tintOrShade($ouiColorPrimary, ((1 - $ouiFocusTransparency) * 100%), ((1 - $ouiFocusTransparency) * 100%)) !default;
+$ouiFocusChangePercent: lightOrDarkTheme(90%, 65%) !default;
+$ouiFocusBackgroundColor: tintOrShade($ouiColorPrimary, $ouiFocusChangePercent, $ouiFocusChangePercent) !default;
 
 
 /* OUI -> EUI Aliases */
@@ -31,6 +31,6 @@ $euiFocusRingAnimStartSize: $ouiFocusRingAnimStartSize;
 $euiFocusRingAnimStartSizeLarge: $ouiFocusRingAnimStartSizeLarge;
 $euiFocusRingSizeLarge: $ouiFocusRingSizeLarge;
 $euiFocusRingSize: $ouiFocusRingSize;
-$euiFocusTransparency: $ouiFocusTransparency;
+$euiFocusChangePercent: $ouiFocusChangePercent;
 $euiFocusBackgroundColor: $ouiFocusBackgroundColor;
 /* End of Aliases */