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

Refactor color schemes implementation #2569

Merged
merged 9 commits into from
May 1, 2023
Merged

Refactor color schemes implementation #2569

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
189f473
Refactor with new color schemas and setting types
kmeleta Apr 20, 2023
1d787a2
Revert badge color refactor and general cleanup
kmeleta Apr 25, 2023
e894cd9
Replace remaining hardcoded background-1 classes
kmeleta Apr 25, 2023
3908f45
Update scheme 1 info
kmeleta Apr 26, 2023
9e6daac
Small fixes
kmeleta Apr 26, 2023
807c6b8
Update 14 translation files
translation-platform[bot] Apr 27, 2023
76d910c
Refactor scheme drop logic
kmeleta Apr 27, 2023
555705f
Update 6 translation files
translation-platform[bot] Apr 28, 2023
b0723d5
Handle vars differently
kmeleta Apr 28, 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
219 changes: 37 additions & 182 deletions assets/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,160 +1,10 @@
/* Color custom properties */

:root,
.color-background-1 {
--color-foreground: var(--color-base-text);
--color-background: var(--color-base-background-1);
--gradient-background: var(--gradient-base-background-1);
}

.color-background-2 {
--color-foreground: var(--color-base-text);
--color-background: var(--color-base-background-2);
--gradient-background: var(--gradient-base-background-2);
}

.color-inverse {
--color-foreground: var(--color-base-background-1);
--color-background: var(--color-base-text);
--gradient-background: rgb(var(--color-base-text));
}

.color-accent-1 {
--color-foreground: var(--color-base-solid-button-labels);
--color-background: var(--color-base-accent-1);
--gradient-background: var(--gradient-base-accent-1);
}

.color-accent-2 {
--color-foreground: var(--color-base-solid-button-labels);
--color-background: var(--color-base-accent-2);
--gradient-background: var(--gradient-base-accent-2);
}

.color-foreground-outline-button {
--color-foreground: var(--color-base-outline-button-labels);
}

.color-foreground-accent-1 {
--color-foreground: var(--color-base-accent-1);
}

.color-foreground-accent-2 {
--color-foreground: var(--color-base-accent-2);
}

:root,
.color-background-1 {
--color-link: var(--color-base-outline-button-labels);
--alpha-link: 0.85;
}

.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
--color-link: var(--color-foreground);
--alpha-link: 0.7;
}

:root,
.color-background-1 {
--color-button: var(--color-base-accent-1);
--color-button-text: var(--color-base-solid-button-labels);
:root {
--alpha-button-background: 1;
--alpha-button-border: 1;
}

.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
--color-button: var(--color-foreground);
--color-button-text: var(--color-background);
}

.button--secondary {
--color-button: var(--color-base-outline-button-labels);
--color-button-text: var(--color-base-outline-button-labels);
--color-button: var(--color-background);
--alpha-button-background: 1;
}

.color-background-2 .button--secondary,
.color-accent-1 .button--secondary,
.color-accent-2 .button--secondary {
--color-button: var(--color-background);
--color-button-text: var(--color-foreground);
}

.color-inverse .button--secondary {
--color-button: var(--color-background);
--color-button-text: var(--color-foreground);
}

.button--tertiary {
--color-button: var(--color-base-outline-button-labels);
--color-button-text: var(--color-base-outline-button-labels);
--alpha-button-background: 0;
--alpha-button-border: 0.2;
}

.color-background-2 .button--tertiary,
.color-inverse .button--tertiary,
.color-accent-1 .button--tertiary,
.color-accent-2 .button--tertiary {
--color-button: var(--color-foreground);
--color-button-text: var(--color-foreground);
}

:root,
.color-background-1 {
--color-badge-background: var(--color-background);
--color-badge-border: var(--color-foreground);
--alpha-link: 0.85;
--alpha-badge-border: 0.1;
}

.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
--color-badge-background: var(--color-background);
--color-badge-border: var(--color-background);
--alpha-badge-border: 1;
}

:root,
.color-background-1,
.color-background-2 {
--color-card-hover: var(--color-base-text);
}

.color-inverse {
--color-card-hover: var(--color-base-background-1);
}

.color-accent-1,
.color-accent-2 {
--color-card-hover: var(--color-base-solid-button-labels);
}

:root,
.color-icon-text {
--color-icon: rgb(var(--color-base-text));
}

.color-icon-accent-1 {
--color-icon: rgb(var(--color-base-accent-1));
}

.color-icon-accent-2 {
--color-icon: rgb(var(--color-base-accent-2));
}

.color-icon-outline-button {
--color-icon: rgb(var(--color-base-outline-button-labels));
}

.product-card-wrapper .card,
.contains-card--product {
--border-radius: var(--product-card-corner-radius);
Expand Down Expand Up @@ -327,16 +177,6 @@ body:has(.section-header .drawer-menu) .announcement-bar-section slideshow-compo
}
}

body,
.color-background-1,
.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
color: rgba(var(--color-foreground), 0.75);
background-color: rgb(var(--color-background));
}

.background-secondary {
background-color: rgba(var(--color-foreground), 0.04);
}
Expand Down Expand Up @@ -1333,6 +1173,17 @@ deferred-media {
/* component-button */
/* Button - default */

.button--secondary,
.button--tertiary {
--color-button: var(--color-secondary-button);
--color-button-text: var(--color-secondary-button-text);
}

.button--tertiary {
--alpha-button-background: 0;
--alpha-button-border: 0.2;
}

.button,
.shopify-challenge__button,
.customer button,
Expand Down Expand Up @@ -1365,7 +1216,7 @@ button.shopify-payment-button__button--unbranded {

.cart__dynamic-checkout-buttons iframe {
box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
rgba(var(--color-base-text), var(--shadow-opacity));
rgba(var(--color-shadow), var(--shadow-opacity));
}

.button,
Expand Down Expand Up @@ -1610,7 +1461,7 @@ details[open] > .share-button__fallback {
left: 0;
border-radius: var(--inputs-radius-outset);
box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
var(--inputs-shadow-blur-radius) rgba(var(--color-base-text), var(--inputs-shadow-opacity));
var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
z-index: -1;
}

Expand Down Expand Up @@ -1748,7 +1599,7 @@ details[open] > .share-button__fallback {
left: 0;
border-radius: var(--inputs-radius-outset);
box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
var(--inputs-shadow-blur-radius) rgba(var(--color-base-text), var(--inputs-shadow-opacity));
var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
z-index: -1;
}

Expand Down Expand Up @@ -2056,7 +1907,7 @@ input[type='checkbox'] {
left: 0;
border-radius: var(--inputs-radius-outset);
box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
var(--inputs-shadow-blur-radius) rgba(var(--color-base-text), var(--inputs-shadow-opacity));
var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
z-index: -1;
}

Expand Down Expand Up @@ -2956,7 +2807,7 @@ details-disclosure > details {
text-align: center;
background-color: rgb(var(--color-badge-background));
border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
color: rgb(var(--color-foreground));
color: rgb(var(--color-badge-foreground));
word-break: break-word;
}

Expand Down Expand Up @@ -3337,15 +3188,12 @@ details-disclosure > details {
.animate--hover-3d-lift .deferred-media__poster-button:hover {
transition: transform var(--duration-extended) ease, box-shadow var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
transform: rotate(1deg);
box-shadow:
-1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05),
1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05),
0 0 0.5rem 0 rgba(255,255,255,0),
0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05), 1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05),
0 0 0.5rem 0 rgba(255, 255, 255, 0), 0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
}

.animate--hover-3d-lift .video-section__poster:hover .deferred-media__poster-button {
transform: translate(-50%,-50%) scale(1.05); /* Apply a specialized transform to the video play button. */
transform: translate(-50%, -50%) scale(1.05); /* Apply a specialized transform to the video play button. */
}

.animate--hover-3d-lift .collage__item .card-wrapper:hover .card--card,
Expand All @@ -3360,22 +3208,29 @@ details-disclosure > details {

.animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner {
transition: transform calc(2 * var(--duration-extended)) ease, filter var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15))
drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15));
filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15)) drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15));
}

.animate--hover-3d-lift .card-wrapper:hover .card--card:after,
.animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner:after,
.animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner .card__media:before {
.animate--hover-3d-lift
.card-wrapper:hover
.card--shape.card--standard:not(.card--text)
.card__inner
.card__media:before {
background-image: var(--easter-egg);
background-size: 250px 250px;
mix-blend-mode: color-dodge;
pointer-events: none;
z-index: 2;
}

.animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner .card__media:before {
content: "";
.animate--hover-3d-lift
.card-wrapper:hover
.card--shape.card--standard:not(.card--text)
.card__inner
.card__media:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
Expand All @@ -3385,7 +3240,7 @@ details-disclosure > details {

.animate--hover-3d-lift .card-wrapper .card--card:before,
.animate--hover-3d-lift .card-wrapper .card--standard .card__media:after {
content: "";
content: '';
position: absolute;
top: 0;
right: 0;
Expand All @@ -3400,9 +3255,9 @@ details-disclosure > details {
background-repeat: no-repeat;
background-image: linear-gradient(
135deg,
rgba(255,255,255,0) 45%,
rgba(255,255,255,1) 50%,
rgba(255,255,255,0) 55%
rgba(255, 255, 255, 0) 45%,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0) 55%
);
}

Expand Down
2 changes: 1 addition & 1 deletion assets/component-cart-drawer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ cart-drawer {
position: sticky;
top: 0;
z-index: 2;
background-color: rgb(var(--color-base-background-1));
background-color: rgb(var(--color-background));
}

cart-drawer-items {
Expand Down
2 changes: 1 addition & 1 deletion assets/component-facets.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@

.facet-filters__label {
display: block;
color: var(--color-foreground-85);
color: rgba(var(--color-foreground), 0.85);
font-size: 1.4rem;
margin: 0 2rem 0 0;
}
Expand Down
3 changes: 2 additions & 1 deletion assets/component-rating.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
}

.rating-star {
--color-rating-star: rgb(var(--color-foreground));
Comment on lines 16 to +17
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I could see the loss of accent color for rating stars being one of the more noticeable cases. So I've at least captured the color in a variable up at the .rating-star scope so would be easy to change via custom css. Even though the color gets used in a gradient style within a pseudo element.

.rating-star { --color-rating-star: #000; }

Copy link
Contributor

Choose a reason for hiding this comment

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

Why do you need the extra variable here, instead of just using var(--color-foreground) below in line 36?

Copy link
Contributor Author

@kmeleta kmeleta Apr 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

We don't. So I'm quite happy to simplify if we don't think it's valuable. But I'm basically just making it easier for merchants to revert the visual change without having to dissect the line below and determine for yourself that only the first instance of color-foreground is the one you need to change to get your color back. Though honestly it self documents for ourselves too. Originally this was in an --color-icon.

background: linear-gradient(90deg, var(--color-foreground) var(--percent), rgba(var(--color-foreground), 0.15) var(--percent));

Copy link
Contributor

Choose a reason for hiding this comment

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

I kinda like that idea. So that someone could tweak both --color-foreground and --color-icon from the custom CSS setting to have something specific.

Great for merchant and theme support 👍

--percent: calc(
(
var(--rating) / var(--rating-max) + var(--rating-decimal) * var(--font-size) /
Expand All @@ -32,7 +33,7 @@
content: '★★★★★';
background: linear-gradient(
90deg,
var(--color-icon) var(--percent),
var(--color-rating-star) var(--percent),
rgba(var(--color-foreground), 0.15) var(--percent)
);
-webkit-background-clip: text;
Expand Down
2 changes: 1 addition & 1 deletion assets/customer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -622,7 +622,7 @@

.order svg {
width: 1.1rem;
color: rgb(var(--color-base-accent-2));
color: rgb(var(--color-foreground));
margin-right: 0.5rem;
}

Expand Down
10 changes: 5 additions & 5 deletions assets/section-email-signup-banner.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,24 +40,24 @@

@media only screen and (min-width: 750px) {
.banner--desktop-transparent .email-signup-banner__box--no-image * {
color: rgb(var(--color-base-text));
color: rgb(var(--color-foreground));
}

.banner--desktop-transparent .email-signup-banner__box .field__input {
background-color: transparent;
}

.banner--desktop-transparent .email-signup-banner__box--no-image .field__input {
box-shadow: 0 0 0 0.1rem rgba(var(--color-base-text), 0.55);
box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55);
}

.banner--desktop-transparent .email-signup-banner__box--no-image .field__input:focus {
box-shadow: 0 0 0 0.2rem rgba(var(--color-base-text), 0.75);
box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.75);
}

.banner--desktop-transparent .email-signup-banner__box--no-image .field__button:focus-visible {
outline: 0.2rem solid rgba(var(--color-base-text), 0.5);
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-base-text), 0.3);
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}
}

Expand Down
Loading