Fix blurry breadcrumb text (#959)

* Fix blurry breadcrumb text Signed-off-by: Matt Provost <provomat@amazon.com> * Update changelog Signed-off-by: Matt Provost <provomat@amazon.com> * Address reviews Signed-off-by: Matt Provost <provomat@amazon.com> --------- Signed-off-by: Matt Provost <provomat@amazon.com>
opensearch-project · Aug 14, 2023 · fe979c3 · fe979c3
1 parent 6e3d31a
commit fe979c3
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 49 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,8 @@
 
 ### 🐛 Bug Fixes
 
+- Fix blurry text in breadcrumbs by avoiding skewing text ([#959](https://github.com/opensearch-project/oui/pull/959))
+
 ### 🚞 Infrastructure
 
 - Add release workflows ([#134](https://github.com/opensearch-project/oui/pull/133))

diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss
@@ -25,36 +25,31 @@
 
 .ouiBreadcrumb {
   display: inline-block;
-  transform: skewX(20deg);
 
   &:not(.ouiBreadcrumb--last) {
-    color: $ouiTextSubduedColor;
+    // TODO: remove important: https://github.com/opensearch-project/oui/issues/376
+    color: $ouiBreadcrumbInactiveTextColor !important; // sass-lint:disable-line no-important
 
     &:hover {
       color: $ouiBreadCrumbHoverColor !important; // sass-lint:disable-line no-important
     }
   }
 }
 
-.ouiBreadcrumb--last {
+.ouiBreadcrumbs:not(.ouiBreadcrumbs__inPopover) .ouiBreadcrumb--last {
   font-weight: $ouiFontWeightMedium;
 }
 
 .ouiBreadcrumb--collapsed {
   flex-shrink: 0;
-  color: $ouiBreadcrumbCollapsedLink;
+  color: $ouiBreadcrumbCollapsedLink !important; // sass-lint:disable-line no-important
   vertical-align: top !important; // sass-lint:disable-line no-important
 }
 
 .ouiBreadcrumb__collapsedLink:hover {
   color: $ouiBreadCrumbHoverColor !important; // sass-lint:disable-line no-important
 }
 
-.ouiBreadcrumbs__inPopover .ouiBreadcrumb--last {
-  font-weight: $ouiFontWeightRegular;
-  color: $ouiColorDarkShade !important; // sass-lint:disable-line no-important
-}
-
 .ouiBreadcrumbs--truncate {
   white-space: nowrap;
   flex-wrap: nowrap;
@@ -89,32 +84,45 @@
 }
 
 .ouiBreadcrumbWrapper {
-  background-color: $ouiBreadcrumbGrayBackground;
-  transform: skewX(-20deg);
-  border-radius: $ouiSizeXS;
+  position: relative;
+  z-index: 0;
   padding: $ouiSizeXS - 2.5 $ouiSizeL - $ouiSizeXS;
+  padding-right: $ouiSizeL - $ouiSizeXS + $ouiBreadcrumbSpacing / 2;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: $ouiBreadcrumbSpacing / 2;
+    right: $ouiBreadcrumbSpacing / 2;
+    z-index: -1;
+
+    transform: skewX(-20deg);
+    border-radius: $ouiSizeXS;
+  }
 
-  &:not(.ouiBreadcrumbWrapper--first) {
-    margin-bottom: $ouiSizeXS; /* 1 */
+  &:not(.ouiBreadcrumbWrapper--last)::before {
+    background-color: $ouiBreadcrumbInactiveBackground;
   }
 
-  &:not(.ouiBreadcrumbWrapper--last),
-  &.ouiBreadcrumbWrapper--first.ouiBreadcrumbWrapper--last {
-    margin-right: $ouiBreadcrumbSpacing;
+  &.ouiBreadcrumbWrapper--last::before {
+    background-color: $ouiBreadcrumbActiveBackground;
+  }
+
+  &:not(.ouiBreadcrumbWrapper--first) {
+    margin-bottom: $ouiSizeXS; /* 1 */
+    padding-left: $ouiSizeL - $ouiSizeXS + $ouiBreadcrumbSpacing / 2;
   }
 }
 
 .ouiBreadcrumbWall {
-  background-image: linear-gradient(to right, $ouiBreadcrumbGrayBackground 0 $ouiSizeM, transparent $ouiSizeM);
+  background-image: linear-gradient(to right, $ouiBreadcrumbInactiveBackground 0 $ouiSizeM, transparent $ouiSizeM);
   border-radius: $ouiSizeXS;
   overflow: hidden;
   margin-bottom: $ouiSizeXS; /* 1 */
 }
 
 .ouiBreadcrumbWall--single {
-  background-image: linear-gradient(to right, $ouiBreadcrumbBlueBackground 0 $ouiSizeM, transparent $ouiSizeM);
-}
-
-.ouiBreadcrumbWrapper--last {
-  background-color: $ouiBreadcrumbBlueBackground;
+  background-image: linear-gradient(to right, $ouiBreadcrumbActiveBackground 0 $ouiSizeM, transparent $ouiSizeM);
 }
diff --git a/src/components/breadcrumbs/_variables.scss b/src/components/breadcrumbs/_variables.scss
@@ -12,17 +12,19 @@
 $ouiBreadcrumbSpacing: $ouiSizeS !default;
 $ouiBreadcrumbTruncateWidth: $ouiSize * 10 !default;
 
-$ouiBreadcrumbBlueBackground: #B9D9EB !default;
-$ouiBreadcrumbGrayBackground: #D9E1E2 !default;
-$ouiBreadcrumbCollapsedLink: #002A3A !default;
-$ouiBreadCrumbHoverColor: #535861 !default;
+$ouiBreadcrumbActiveBackground: tintOrShade($ouiColorPrimary, 72%, 41%) !default;
+$ouiBreadcrumbInactiveBackground: tint($ouiColorLightShade, 14%) !default;
+$ouiBreadcrumbCollapsedLink: shadeOrTint($ouiColorPrimaryText, 61%, 20%) !default;
+$ouiBreadcrumbInactiveTextColor: makeHighContrastColor($ouiTextSubduedColor, $ouiBreadcrumbInactiveBackground) !default;
+$ouiBreadCrumbHoverColor: shadeOrTint($ouiBreadcrumbInactiveTextColor, 16%, 6%) !default;
 
 /* OUI -> EUI Aliases */
 $euiBreadcrumbSpacing: $ouiBreadcrumbSpacing;
 $euiBreadcrumbTruncateWidth: $ouiBreadcrumbTruncateWidth;
 
-$euiBreadcrumbBlueBackground: $ouiBreadcrumbBlueBackground;
-$euiBreadcrumbGrayBackground: $ouiBreadcrumbGrayBackground;
+$euiBreadcrumbActiveBackground: $ouiBreadcrumbActiveBackground;
+$euiBreadcrumbInactiveBackground: $ouiBreadcrumbInactiveBackground;
 $euiBreadcrumbCollapsedLink: $ouiBreadcrumbCollapsedLink;
+$euiBreadcrumbInactiveTextColor: $ouiBreadcrumbInactiveTextColor;
 $euiBreadCrumbHoverColor: $ouiBreadCrumbHoverColor;
 /* End of Aliases */
diff --git a/src/themes/oui-next/oui_next_colors_dark.scss b/src/themes/oui-next/oui_next_colors_dark.scss
@@ -62,12 +62,6 @@ $ouiColorChartBand: tint($ouiColorLightestShade, 2.5%);
 $ouiShadowColor: #000;
 $ouiShadowColorLarge: #000;
 
-// Breadcrumbs
-$ouiBreadcrumbBlueBackground: #163F66;
-$ouiBreadcrumbGrayBackground: #4C636F;
-$ouiBreadcrumbCollapsedLink: #FFF;
-$ouiBreadCrumbHoverColor: #B0B8BB;
-
 
 /* OUI -> EUI Aliases */
 $euiColorGhost: $ouiColorGhost;
@@ -103,8 +97,4 @@ $euiColorChartLines: $ouiColorChartLines;
 $euiColorChartBand: $ouiColorChartBand;
 $euiShadowColor: $ouiShadowColor;
 $euiShadowColorLarge: $ouiShadowColorLarge;
-$euiBreadcrumbBlueBackground: $ouiBreadcrumbBlueBackground;
-$euiBreadcrumbGrayBackground: $ouiBreadcrumbGrayBackground;
-$euiBreadcrumbCollapsedLink: $ouiBreadcrumbCollapsedLink;
-$euiBreadCrumbHoverColor: $ouiBreadCrumbHoverColor;
 /* End of Aliases */
diff --git a/src/themes/oui/oui_colors_dark.scss b/src/themes/oui/oui_colors_dark.scss
@@ -62,12 +62,6 @@ $ouiColorChartBand: tint($ouiColorLightestShade, 2.5%);
 $ouiShadowColor: #000;
 $ouiShadowColorLarge: #000;
 
-// Breadcrumbs
-$ouiBreadcrumbBlueBackground: #163F66;
-$ouiBreadcrumbGrayBackground: #4C636F;
-$ouiBreadcrumbCollapsedLink: #FFF;
-$ouiBreadCrumbHoverColor: #B0B8BB;
-
 
 /* OUI -> EUI Aliases */
 $euiColorGhost: $ouiColorGhost;
@@ -103,8 +97,4 @@ $euiColorChartLines: $ouiColorChartLines;
 $euiColorChartBand: $ouiColorChartBand;
 $euiShadowColor: $ouiShadowColor;
 $euiShadowColorLarge: $ouiShadowColorLarge;
-$euiBreadcrumbBlueBackground: $ouiBreadcrumbBlueBackground;
-$euiBreadcrumbGrayBackground: $ouiBreadcrumbGrayBackground;
-$euiBreadcrumbCollapsedLink: $ouiBreadcrumbCollapsedLink;
-$euiBreadCrumbHoverColor: $ouiBreadCrumbHoverColor;
 /* End of Aliases */