Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Minor color improvements #522

Merged
merged 5 commits into from
Aug 8, 2023
Merged

Minor color improvements #522

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5815911
improve contrast for accordions/expandable blocks
shanecmiller23 Aug 8, 2023
b753e8b
remove and replace all old colors with new color theme
shanecmiller23 Aug 8, 2023
3999d33
update slack tooltip colors
shanecmiller23 Aug 8, 2023
34f86cf
fix coloring for vertical tables
shanecmiller23 Aug 8, 2023
f77f8a8
missed a save
shanecmiller23 Aug 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion themes/geekboot/assets/scss/_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
text-align: left;

a {
color: $turquoise;
color: #{$aqua-500};
}
}

Expand Down
4 changes: 2 additions & 2 deletions themes/geekboot/assets/scss/_home.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
/* purgecss start ignore */
#tooltip {
display: inline-block;
background: $brightSun;
color: $slate;
background: #{$aqua-400};
color: #{$fog-1000};
font-weight: bold;
padding: 5px 10px;
font-size: 16px;
Expand Down
4 changes: 2 additions & 2 deletions themes/geekboot/assets/scss/_search-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
&:active,
&:focus,
&:hover {
border-color: $brightSun;
border-color: #{$sun-500};
}
}

Expand All @@ -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);
}
Expand Down
2 changes: 1 addition & 1 deletion themes/geekboot/assets/scss/_search-results.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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{
Expand Down
20 changes: 2 additions & 18 deletions themes/geekboot/assets/scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions themes/geekboot/assets/scss/dark-mode.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@

// Override Bootstrap accordion colors in the body
.accordion {
--bs-accordion-border-color: #{$fog-800};
--bs-accordion-border-color: #{$fog-500};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's something fishy going on with the bottom rounded corners of the accordions when they are in their expanded state - looks like it's still a dark color that doesn't match the straight line edge borders, or they are clipped or something? they look like they are missing essentially - do you see this too?

e.g. on https://deploy-preview-522--crossplane.netlify.app/v1.13/concepts/compositions/

Screenshot 2023-08-08 at 10 08 16 AM

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see the same thing in dark mode.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jbw976 @plumbis I'll need to dig into that issue to find more. Being that issue is pretty minor and exists today, I may scope/investigate that in a separate PR if that works

--bs-accordion-active-bg: #{$fog-1000};
--bs-accordion-btn-focus-border-color: #{$fog-600};
--bs-accordion-button-focus-border-color: #{$fog-600};
Expand All @@ -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 {
Expand All @@ -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
Expand Down
8 changes: 4 additions & 4 deletions themes/geekboot/assets/scss/light-mode.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand All @@ -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 {
Expand All @@ -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
Expand Down