From 0bb4ec6d70afb5748a7c1516a0c22987168d3d04 Mon Sep 17 00:00:00 2001 From: Matt Provost Date: Thu, 10 Aug 2023 18:15:11 +0000 Subject: [PATCH 1/3] Fix blurry breadcrumb text Signed-off-by: Matt Provost --- src/components/breadcrumbs/_breadcrumbs.scss | 49 +++++++++++-------- src/components/breadcrumbs/_variables.scss | 9 ++-- src/themes/oui-next/oui_next_colors_dark.scss | 10 ---- src/themes/oui/oui_colors_dark.scss | 10 ---- 4 files changed, 33 insertions(+), 45 deletions(-) diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss index c27e3878a7..af83da2357 100644 --- a/src/components/breadcrumbs/_breadcrumbs.scss +++ b/src/components/breadcrumbs/_breadcrumbs.scss @@ -25,10 +25,9 @@ .ouiBreadcrumb { display: inline-block; - transform: skewX(20deg); &:not(.ouiBreadcrumb--last) { - color: $ouiTextSubduedColor; + color: $ouiBreadcrumbTextColor !important; // sass-lint:disable-line no-important &:hover { color: $ouiBreadCrumbHoverColor !important; // sass-lint:disable-line no-important @@ -36,13 +35,13 @@ } } -.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 } @@ -50,11 +49,6 @@ 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,18 +83,35 @@ } .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: $ouiBreadcrumbGrayBackground; } - &:not(.ouiBreadcrumbWrapper--last), - &.ouiBreadcrumbWrapper--first.ouiBreadcrumbWrapper--last { - margin-right: $ouiBreadcrumbSpacing; + &.ouiBreadcrumbWrapper--last::before { + background-color: $ouiBreadcrumbBlueBackground; + } + + &:not(.ouiBreadcrumbWrapper--first) { + margin-bottom: $ouiSizeXS; /* 1 */ + padding-left: $ouiSizeL - $ouiSizeXS + $ouiBreadcrumbSpacing / 2; } } @@ -114,7 +125,3 @@ .ouiBreadcrumbWall--single { background-image: linear-gradient(to right, $ouiBreadcrumbBlueBackground 0 $ouiSizeM, transparent $ouiSizeM); } - -.ouiBreadcrumbWrapper--last { - background-color: $ouiBreadcrumbBlueBackground; -} diff --git a/src/components/breadcrumbs/_variables.scss b/src/components/breadcrumbs/_variables.scss index 410185953b..abc3461dfd 100644 --- a/src/components/breadcrumbs/_variables.scss +++ b/src/components/breadcrumbs/_variables.scss @@ -12,10 +12,11 @@ $ouiBreadcrumbSpacing: $ouiSizeS !default; $ouiBreadcrumbTruncateWidth: $ouiSize * 10 !default; -$ouiBreadcrumbBlueBackground: #B9D9EB !default; -$ouiBreadcrumbGrayBackground: #D9E1E2 !default; -$ouiBreadcrumbCollapsedLink: #002A3A !default; -$ouiBreadCrumbHoverColor: #535861 !default; +$ouiBreadcrumbBlueBackground: tintOrShade($ouiColorPrimary, 72%, 41%) !default; +$ouiBreadcrumbGrayBackground: tint($ouiColorLightShade, 14%) !default; +$ouiBreadcrumbCollapsedLink: shadeOrTint($ouiColorPrimaryText, 61%, 20%) !default; +$ouiBreadcrumbTextColor: makeHighContrastColor($ouiTextSubduedColor, $ouiBreadcrumbGrayBackground) !default; +$ouiBreadCrumbHoverColor: shadeOrTint($ouiBreadcrumbTextColor, 16%, 6%) !default; /* OUI -> EUI Aliases */ $euiBreadcrumbSpacing: $ouiBreadcrumbSpacing; diff --git a/src/themes/oui-next/oui_next_colors_dark.scss b/src/themes/oui-next/oui_next_colors_dark.scss index a9131fe2e3..6a453336bf 100644 --- 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 index 2981bb3a82..4ea79a931c 100644 --- 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 */ From 1a52dc3dd730be8da4b6eff194ed7771d99e3dbd Mon Sep 17 00:00:00 2001 From: Matt Provost Date: Thu, 10 Aug 2023 18:19:29 +0000 Subject: [PATCH 2/3] Update changelog Signed-off-by: Matt Provost --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b99aad65a2..ea98467557 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,8 @@ ### 🐛 Bug Fixes +- Fix blurry text in breadcrumbs ([#959](https://github.com/opensearch-project/oui/pull/959)) + ### 🚞 Infrastructure - Add release workflows ([#134](https://github.com/opensearch-project/oui/pull/133)) From ca797b0329884da93bbe55a52ca449e826d93528 Mon Sep 17 00:00:00 2001 From: Matt Provost Date: Mon, 14 Aug 2023 16:29:45 +0000 Subject: [PATCH 3/3] Address reviews Signed-off-by: Matt Provost --- CHANGELOG.md | 2 +- src/components/breadcrumbs/_breadcrumbs.scss | 11 ++++++----- src/components/breadcrumbs/_variables.scss | 13 +++++++------ 3 files changed, 14 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ea98467557..a0de495ea5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,7 +15,7 @@ ### 🐛 Bug Fixes -- Fix blurry text in breadcrumbs ([#959](https://github.com/opensearch-project/oui/pull/959)) +- Fix blurry text in breadcrumbs by avoiding skewing text ([#959](https://github.com/opensearch-project/oui/pull/959)) ### 🚞 Infrastructure diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss index af83da2357..abd7db5346 100644 --- a/src/components/breadcrumbs/_breadcrumbs.scss +++ b/src/components/breadcrumbs/_breadcrumbs.scss @@ -27,7 +27,8 @@ display: inline-block; &:not(.ouiBreadcrumb--last) { - color: $ouiBreadcrumbTextColor !important; // sass-lint:disable-line no-important + // 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 @@ -102,11 +103,11 @@ } &:not(.ouiBreadcrumbWrapper--last)::before { - background-color: $ouiBreadcrumbGrayBackground; + background-color: $ouiBreadcrumbInactiveBackground; } &.ouiBreadcrumbWrapper--last::before { - background-color: $ouiBreadcrumbBlueBackground; + background-color: $ouiBreadcrumbActiveBackground; } &:not(.ouiBreadcrumbWrapper--first) { @@ -116,12 +117,12 @@ } .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); + 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 index abc3461dfd..e5c2d5a045 100644 --- a/src/components/breadcrumbs/_variables.scss +++ b/src/components/breadcrumbs/_variables.scss @@ -12,18 +12,19 @@ $ouiBreadcrumbSpacing: $ouiSizeS !default; $ouiBreadcrumbTruncateWidth: $ouiSize * 10 !default; -$ouiBreadcrumbBlueBackground: tintOrShade($ouiColorPrimary, 72%, 41%) !default; -$ouiBreadcrumbGrayBackground: tint($ouiColorLightShade, 14%) !default; +$ouiBreadcrumbActiveBackground: tintOrShade($ouiColorPrimary, 72%, 41%) !default; +$ouiBreadcrumbInactiveBackground: tint($ouiColorLightShade, 14%) !default; $ouiBreadcrumbCollapsedLink: shadeOrTint($ouiColorPrimaryText, 61%, 20%) !default; -$ouiBreadcrumbTextColor: makeHighContrastColor($ouiTextSubduedColor, $ouiBreadcrumbGrayBackground) !default; -$ouiBreadCrumbHoverColor: shadeOrTint($ouiBreadcrumbTextColor, 16%, 6%) !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 */