From 58159118f36094c688414f2cd52fda935d1cdbb2 Mon Sep 17 00:00:00 2001 From: Shane Miller Date: Tue, 8 Aug 2023 09:35:12 -0700 Subject: [PATCH 1/5] improve contrast for accordions/expandable blocks Signed-off-by: Shane Miller --- themes/geekboot/assets/scss/dark-mode.scss | 8 ++++---- themes/geekboot/assets/scss/light-mode.scss | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/themes/geekboot/assets/scss/dark-mode.scss b/themes/geekboot/assets/scss/dark-mode.scss index 4335a55d8..f1c06fff8 100644 --- a/themes/geekboot/assets/scss/dark-mode.scss +++ b/themes/geekboot/assets/scss/dark-mode.scss @@ -51,7 +51,7 @@ // Override Bootstrap accordion colors in the body .accordion { - --bs-accordion-border-color: #{$fog-800}; + --bs-accordion-border-color: #{$fog-500}; --bs-accordion-active-bg: #{$fog-1000}; --bs-accordion-btn-focus-border-color: #{$fog-600}; --bs-accordion-button-focus-border-color: #{$fog-600}; @@ -64,7 +64,7 @@ } // Add hover border over clickable area .accordion-button:hover, .accordion-button:not(.collapsed):hover { - outline: 2px solid #{$fog-600}; + outline: 2px solid #{$fog-0}; } // Color text and background .accordion-button { @@ -75,9 +75,9 @@ background-color: #{$fog-1000}; color: #{$fog-0}; } - // Load chevron svg as manually-inputed $fog-400 hex code + // Load chevron svg as manually-inputed $fog-0 hex code .accordion-button::after { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239DA0A0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important; } // Tables diff --git a/themes/geekboot/assets/scss/light-mode.scss b/themes/geekboot/assets/scss/light-mode.scss index 0c97b6dd2..0b19d3238 100644 --- a/themes/geekboot/assets/scss/light-mode.scss +++ b/themes/geekboot/assets/scss/light-mode.scss @@ -59,7 +59,7 @@ // Override Bootstrap accordion colors in the body .accordion { - --bs-accordion-border-color: #{$fog-200}; + --bs-accordion-border-color: #{$fog-400}; --bs-accordion-active-bg: #{$fog-0}; --bs-accordion-btn-focus-border-color: #{$fog-400}; --bs-accordion-button-focus-border-color: #{$fog-400}; @@ -71,7 +71,7 @@ } // Add hover border over clickable area .accordion-button:hover, .accordion-button:not(.collapsed):hover { - outline: 2px solid #{$fog-400}; + outline: 2px solid #{$fog-1000}; } // Color text and background .accordion-button { @@ -82,9 +82,9 @@ background-color: #{$fog-0}; color: #{$fog-1000}; } - // Load chevron svg as manually-inputed $fog-600 hex code + // Load chevron svg as manually-inputed $fog-1000 hex code .accordion-button::after { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236C7070'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23051513'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important; } // Tables From b753e8b4188efce4ece2b9034f5afe4f7ab9d5eb Mon Sep 17 00:00:00 2001 From: Shane Miller Date: Tue, 8 Aug 2023 09:53:40 -0700 Subject: [PATCH 2/5] remove and replace all old colors with new color theme Signed-off-by: Shane Miller --- themes/geekboot/assets/scss/_footer.scss | 2 +- themes/geekboot/assets/scss/_home.scss | 4 ++-- .../geekboot/assets/scss/_search-button.scss | 4 ++-- .../geekboot/assets/scss/_search-results.scss | 2 +- themes/geekboot/assets/scss/_variables.scss | 20 ++----------------- 5 files changed, 8 insertions(+), 24 deletions(-) diff --git a/themes/geekboot/assets/scss/_footer.scss b/themes/geekboot/assets/scss/_footer.scss index 7a9bc3bbc..1f8b70890 100644 --- a/themes/geekboot/assets/scss/_footer.scss +++ b/themes/geekboot/assets/scss/_footer.scss @@ -11,7 +11,7 @@ text-align: left; a { - color: $turquoise; + color: #{$aqua-500}; } } diff --git a/themes/geekboot/assets/scss/_home.scss b/themes/geekboot/assets/scss/_home.scss index 17856fec5..58ed7f1e0 100644 --- a/themes/geekboot/assets/scss/_home.scss +++ b/themes/geekboot/assets/scss/_home.scss @@ -30,8 +30,8 @@ /* purgecss start ignore */ #tooltip { display: inline-block; - background: $brightSun; - color: $slate; + background: #{$sun-500}; + color: #{$fog-700}; font-weight: bold; padding: 5px 10px; font-size: 16px; diff --git a/themes/geekboot/assets/scss/_search-button.scss b/themes/geekboot/assets/scss/_search-button.scss index 94e8a9a0d..694d9ab14 100644 --- a/themes/geekboot/assets/scss/_search-button.scss +++ b/themes/geekboot/assets/scss/_search-button.scss @@ -28,7 +28,7 @@ &:active, &:focus, &:hover { - border-color: $brightSun; + border-color: #{$sun-500}; } } @@ -41,7 +41,7 @@ &:active, &:focus, &:hover { - border-color: $brightSun; + border-color: #{$sun-500}; color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); } diff --git a/themes/geekboot/assets/scss/_search-results.scss b/themes/geekboot/assets/scss/_search-results.scss index c9d9307b9..7ccf49413 100644 --- a/themes/geekboot/assets/scss/_search-results.scss +++ b/themes/geekboot/assets/scss/_search-results.scss @@ -5,7 +5,7 @@ .DocSearch-SearchBar{ .DocSearch-Form{ - box-shadow: inset 0 0 0 .75px $brightSun; + box-shadow: inset 0 0 0 .75px #{$sun-500}; background: var(--search-box-background); .DocSearch-MagnifierLabel{ diff --git a/themes/geekboot/assets/scss/_variables.scss b/themes/geekboot/assets/scss/_variables.scss index ad1bd1f1a..ecfcb1f11 100644 --- a/themes/geekboot/assets/scss/_variables.scss +++ b/themes/geekboot/assets/scss/_variables.scss @@ -10,9 +10,7 @@ $font-size-base: 1.125rem !default; $body-font-size: 16px !default; -// New color variables are below. The previous color variable found at the bottom of this file will be translated to these or removed once these new colors have been applied to enough of the docs content. - -// Grayscale palette. These are equivalent to varying opacities of the darkest shade over white (e.g. $fog-500 is equivalent to $fog-1000 at 50% opacity over white). +// Grayscale palette. These are equivalent to varying opacities of the darkest shade over white (e.g. $fog-500 is the equivalent to $fog-1000 at 50% opacity over white). $fog-0: #FFFFFF !default; $fog-25: #F9F9F9 !default; $fog-50: #F3F3F3 !default; @@ -33,7 +31,7 @@ $fog-1000: #0A1111 !default; // Colored palettes. Spectrums gradually transition into white with numbers below "-500" and transition into $fog-1000 on numbers after "-500". -// $Aqua-500 is the teal color pulled from the Crossplane popsicle logo. This is the primary color to be used for actions. +// $Aqua-500 is the teal color pulled from the Crossplane popsicle logo. Aqua is the primary color hue to be used for actions. $aqua-25: #F5FDFB !default; $aqua-50: #EAFAF8 !default; $aqua-75: #E1F8F5 !default; @@ -119,20 +117,6 @@ $salmon-900: #392827 !default; $salmon-950: #221C1C !default; -// Older color variables are below, should be avoided moving forward -$aquaMarine: #3de2cb !default; -$aquarius: #37ccb7 !default; -$fillBlackBlack: #183b56 !default; -$redPrimary: #ff4f52 !default; -$slate: #505a72 !default; -$linkWater: #D3E7F7 !default; -$nileBlue: #183d54 !default; -$bayOfMany: #215373 !default; -$turquoise: #35d0ba !default; -$brightSun: #ffcd3c !default; -$froly: #f3807b !default; -$blueBayoux: #5A7184 !default; - $navbar-background-color: #{$fog-1000} !default; $navbar-link-color: #{$fog-0} !default; $navbar-link-color-hover: #{$fog-200} !default; From 3999d33eb1b6d705b246a0c4aa3138107589d64a Mon Sep 17 00:00:00 2001 From: Shane Miller Date: Tue, 8 Aug 2023 09:57:01 -0700 Subject: [PATCH 3/5] update slack tooltip colors Signed-off-by: Shane Miller --- themes/geekboot/assets/scss/_home.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/geekboot/assets/scss/_home.scss b/themes/geekboot/assets/scss/_home.scss index 58ed7f1e0..2740f1b6c 100644 --- a/themes/geekboot/assets/scss/_home.scss +++ b/themes/geekboot/assets/scss/_home.scss @@ -30,8 +30,8 @@ /* purgecss start ignore */ #tooltip { display: inline-block; - background: #{$sun-500}; - color: #{$fog-700}; + background: #{$aqua-400}; + color: #{$fog-1000}; font-weight: bold; padding: 5px 10px; font-size: 16px; From 34f86cf770bd85e0c6363a152c45d669f481c396 Mon Sep 17 00:00:00 2001 From: Shane Miller Date: Tue, 8 Aug 2023 12:29:38 -0700 Subject: [PATCH 4/5] fix coloring for vertical tables Signed-off-by: Shane Miller --- themes/geekboot/assets/scss/dark-mode.scss | 6 +++++- themes/geekboot/assets/scss/light-mode.scss | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/themes/geekboot/assets/scss/dark-mode.scss b/themes/geekboot/assets/scss/dark-mode.scss index f1c06fff8..15dbed051 100644 --- a/themes/geekboot/assets/scss/dark-mode.scss +++ b/themes/geekboot/assets/scss/dark-mode.scss @@ -86,11 +86,15 @@ } .table { border: 1px solid #{$fog-700}; + --bs-table-hover-bg: #{$fog-1000}; } - .table-striped > tbody > tr:nth-of-type(odd) > * { + .table-striped > tbody > tr:nth-of-type(odd) > *, .table-striped-columns > :not(caption) > tr > :nth-child(even) { --bs-table-accent-bg: #{$fog-950}; color: #{$fog-0}; } + .table-striped > tbody > tr:nth-of-type(even) > *, .table-striped-columns > :not(caption) > tr > :nth-child(odd) { + --bs-table-hover-bg: #{$fog-1000} !important; + } // Add border to top nav and footer .docs-navbar { diff --git a/themes/geekboot/assets/scss/light-mode.scss b/themes/geekboot/assets/scss/light-mode.scss index 0b19d3238..17097ce21 100644 --- a/themes/geekboot/assets/scss/light-mode.scss +++ b/themes/geekboot/assets/scss/light-mode.scss @@ -93,11 +93,15 @@ } .table { border: 1px solid #{$fog-200}; + --bs-table-hover-bg: #{$fog-0}; } - .table-striped > tbody > tr:nth-of-type(odd) > * { + .table-striped > tbody > tr:nth-of-type(odd) > *, .table-striped-columns > :not(caption) > tr > :nth-child(even) { --bs-table-accent-bg: #{$fog-50}; color: #{$fog-1000}; } + .table-striped > tbody > tr:nth-of-type(even) > *, .table-striped-columns > :not(caption) > tr > :nth-child(odd) { + --bs-table-hover-bg: #{$fog-0} !important; + } // Tab Colors .nav-tabs{ From f77f8a80aced615fcb813f2f5f8b6ed81efc9222 Mon Sep 17 00:00:00 2001 From: Shane Miller Date: Tue, 8 Aug 2023 12:49:00 -0700 Subject: [PATCH 5/5] missed a save Signed-off-by: Shane Miller --- themes/geekboot/assets/scss/_content.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/themes/geekboot/assets/scss/_content.scss b/themes/geekboot/assets/scss/_content.scss index 3d5a1bec4..b69176d53 100644 --- a/themes/geekboot/assets/scss/_content.scss +++ b/themes/geekboot/assets/scss/_content.scss @@ -157,7 +157,6 @@ h3, h4, h5, h6 { color: var(--font-body-color); // Override bootstrap defaults to support dark mode --bs-table-hover-color: var(--font-body-color); - --bs-table-hover-bg: var(--nav-highlight-color); } .ga-tag{