Skip to content

Commit

Permalink
Theme: Organize color variants for clarity/maintainability
Browse files Browse the repository at this point in the history
  • Loading branch information
iandunn committed Nov 3, 2021
1 parent c72ff72 commit 298bb0b
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 32 deletions.
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
body.error404 {
background-color: var( --wp--preset--color--darker-grey );

& .local-header {
--bar-background-color: var( --wp--preset--color--dark-grey );
}
@extend %local-header-dark;

& .site-content-container {
color: var(--wp--preset--color--blue-4);
Expand All @@ -19,8 +15,5 @@ body.error404 {
margin-bottom: calc(min(100px, 15vh));
}

& .footer-archive .footer-archive-row[class*="wp-container-"] {
background-color: var( --wp--preset--color--dark-grey );
color: var(--wp--preset--color--white);
}
@extend %footer-archive-dark;
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,48 @@
* Styles for the default category archives, and its variations.
*/

body.category-events,
body.category-community {
& .wp-site-blocks {
background-color: var( --wp--preset--color--off-white );

& .local-header {
--bar-background-color: var(--wp--preset--color--white);
--bar-text-color: var(--wp--preset--color--black);
--bar-link-color: var(--wp--preset--color--blue-1);
}
}
@extend %local-header-off-white;
}

body.category-month-in-wordpress .wp-site-blocks {
background-color: var( --wp--preset--color--darker-grey );
body.category-events {
@extend %local-header-off-white;
}

body.category-releases {
.wp-site-blocks {
background-color: var(--wp--preset--color--blue-1);
}

& .local-header {
--bar-background-color: var( --wp--preset--color--dark-grey );
--bar-background-color: var(--wp--preset--color--blue-5);
}

& .site-content-container {
@extend %footer-archive-dark;
}

body.category-month-in-wordpress {
@extend %local-header-dark;

.site-content-container {
color: var( --wp--preset--color--blue-4 );
}

& .footer-archive .footer-archive-row[class*="wp-container-"] {
background-color: var( --wp--preset--color--dark-grey );
color: var(--wp--preset--color--white);
}
@extend %footer-archive-dark;
}

body.category-development {
@extend %local-header-lightish;

& .local-header {
--bar-text-color: var(--wp--preset--color--black);
--bar-link-color: var(--wp--preset--color--black);
--bar-background-color: var( --wp--preset--color--green );
}
}

body.category-security {
@extend %local-header-lightish;

& .local-header {
--bar-text-color: var(--wp--preset--color--black);
--bar-link-color: var(--wp--preset--color--black);
--bar-background-color: var( --wp--preset--color--coral-red );
}
}
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// Default/light version.
.footer-archive .footer-archive-row[class*="wp-container-"] {
justify-content: space-between;
align-items: stretch !important;
Expand Down Expand Up @@ -47,3 +48,15 @@
}
}
}

// Alternate dark version.
%footer-archive-dark {
.footer-archive .footer-archive-row[class*="wp-container-"] {
background-color: var(--wp--preset--color--dark-grey);
color: var(--wp--preset--color--white);

& > * {
border-color: #1C2024;
}
}
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
// Default/light version.
.local-header {
--bar-text-color: var(--wp--preset--color--white);
--bar-link-color: var(--wp--preset--color--white);
--bar-background-color: var(--wp--preset--color--blue-5);
--bar-background-color: var(--wp--preset--color--blue-1);

min-height: 56px;
background-color: var( --bar-background-color );
Expand Down Expand Up @@ -189,3 +190,35 @@
}
}
}

// Alternate off-white version.
%local-header-off-white {
.wp-site-blocks {
background-color: var(--wp--preset--color--off-white);

.local-header {
--bar-background-color: var(--wp--preset--color--white);
--bar-text-color: var(--wp--preset--color--black);
--bar-link-color: var(--wp--preset--color--blue-1);
}
}
}

// Alternate version with a color light enough to need dark text. e.g., Security category.
%local-header-lightish {
.local-header {
--bar-text-color: var(--wp--preset--color--black);
--bar-link-color: var(--wp--preset--color--black);
}
}

// Alternate dark version.
%local-header-dark {
.wp-site-blocks {
background-color: var(--wp--preset--color--darker-grey);

.local-header {
--bar-background-color: var( --wp--preset--color--dark-grey );
}
}
}

0 comments on commit 298bb0b

Please sign in to comment.