Update template CSS variables #1091

KaichenWang · 2022-01-05T19:46:20Z

Why are these changes introduced?

A few CSS variables were added/modified in theme.liquid in order to add global settings. password.liquid and gift_card.liquid must be updated to match the CSS variables in theme.liquid.

What approach did you take?

password.liquid: Copy all CSS variables from theme.liquid
gift_card.liquid: Update existing CSS variables to match those in theme.liquid (not all theme CSS variables are needed on the gift card template)

Other considerations

Demo links

Store
Editor

Checklist

* adjust featured blog grid * ajust collage grid gap * adjust featured collection grid * update blog page grid * add settings, css variables and update grid class * Fix multicolumn vertical spacing * address reviewer feedback

* Text boxes global settings setup

* Add section-wrapper/borders to applicable sections * Add section spacing * Remove default border thickness. * Fix collage spacing

Buttons + inputs

* Add settings to schema * Edit template * Add styles * Use decimal for border-radius * Refactor markup * Adjust styles for product card * Add styles * Add settings * Update setting and CSS variable names * Update cards for search results * Clean up CSS * Update product card placeholder * Fix visual bugs. Adjust shadow setting min * Update markup for collection list cards * Update hover styles * Adjust collection arrow * Adjust collection arrow * Rename snippet for product card. Create snippet for collection card * Remove separate placeholder for product card * Adjustments for image ratio * Add support for auto height for collage * Clean up CSS * Fix typo * Fix pick up availability 'Unavailable' (#855) * Fix pick up availability 'Unavailable' * reuse similar check used in the same file * Remove redundant section settings * Update 1 translation file (#866) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Product image seo (#812) * Version bump to 2.4.0 (#884) * Add translation strings for en * Adjust styles * Update snippets/card-product.liquid * Adjust settings organization * Update layout/theme.liquid Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> * Remove redundant padding * Address feedback - Clean up unused CSS * Fix interaction with border and background * Fix collage * Adjust price layout * Adjust price layout Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com>

* Move vert spacing and remove other section settings * Include collage

* Enable textbox settings for image with text section. Clean up CSS * Update from Shopify for theme dawn/apply-settings-image-with-text Committed from shop: OS 2.0 * Revert "Update from Shopify for theme dawn/apply-settings-image-with-text" This reverts commit 7dea1d2. * Add back bottom margin * Remove redundant media query Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com>

* Split popup and drawer settings * Align naming

* Update setting ranges and options for Buttons, Inputs, Layout, Media, Content containers * Fix typo * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Reorder settings. Adjust mobile grid range and defaults * Update settings naming Co-authored-by: melissaperreault <melissa.perreault@shopify.com>

* Fix rich text margins for bg-1 * Remove section level spacing CSS * Update and clean up spacing naming conventions * Clean up * Fix spacing for special consecutive sections with no heading * Remove comment * Update collapse grid naming * Update behaviour of special collapsing sections * Fix bugs * Remove product-grip bottom margin * Adjust setting range. Set image-with-text as collapsible section * Update from Shopify for theme dawn/fix-section-vertical-spacing Committed from shop: OS 2.0 * Revert "Update from Shopify for theme dawn/fix-section-vertical-spacing" This reverts commit a0771e5. * Adapt consistent spacing for all sections. Remove special cases * Revert usage of section spacing for elements other than sections * Edit settings names and order for spacing. Add mobile vertical section spacing setting * Revert value for margin-bottom * Revert additional padding * Revert additional padding * Revert heading logic * Revert heading logic * Revert heading logic * Address feedback * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com> Co-authored-by: melissaperreault <melissa.perreault@shopify.com>

* Add and update settings and copy * add css for variant pill settings

…onflicts * Collapse borders/corners and prevent shadow overlap * Revamp approach * Address media-only borders case * Adjust conditional * Prevent transparent borders from occupying physical space * Revert border width change

* Apply shadow filter and background-none alternative * Prevent border radius on background-none * Update background class conditional * Move shadows to pseudo element * Whitespace Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: Ludo <ludo.segura@shopify.com>

* Section paddings settings

* Update article cards to use card structure

* Add theme level grid setting (#885) * adjust featured blog grid * ajust collage grid gap * adjust featured collection grid * update blog page grid * add settings, css variables and update grid class * Fix multicolumn vertical spacing * address reviewer feedback * Settings popup and drawer (#865) * Add media settings to non-card non-textbox elements (#893) * Text boxes global settings setup (#889) * Text boxes global settings setup * Add global sections settings (#891) * Add section-wrapper/borders to applicable sections * Add section spacing * Remove default border thickness. * Fix collage spacing * Global settings - buttons, inputs (#844) Buttons + inputs * Added back section settings tmeporarily (#899) * Add global settings cards (#886) * Add settings to schema * Edit template * Add styles * Use decimal for border-radius * Refactor markup * Adjust styles for product card * Add styles * Add settings * Update setting and CSS variable names * Update cards for search results * Clean up CSS * Update product card placeholder * Fix visual bugs. Adjust shadow setting min * Update markup for collection list cards * Update hover styles * Adjust collection arrow * Adjust collection arrow * Rename snippet for product card. Create snippet for collection card * Remove separate placeholder for product card * Adjustments for image ratio * Add support for auto height for collage * Clean up CSS * Fix typo * Fix pick up availability 'Unavailable' (#855) * Fix pick up availability 'Unavailable' * reuse similar check used in the same file * Remove redundant section settings * Update 1 translation file (#866) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Product image seo (#812) * Version bump to 2.4.0 (#884) * Add translation strings for en * Adjust styles * Update snippets/card-product.liquid * Adjust settings organization * Update layout/theme.liquid Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> * Remove redundant padding * Address feedback - Clean up unused CSS * Fix interaction with border and background * Fix collage * Adjust price layout * Adjust price layout Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> * update secondary button background color (#903) * Clean up popup drawer feed (#902) * Revert global section settings (#911) * Move vert spacing and remove other section settings * Include collage * Remove text box padding setting (#912) * Image with text section - Apply global textbox and media settings (#918) * Enable textbox settings for image with text section. Clean up CSS * Update from Shopify for theme dawn/apply-settings-image-with-text Committed from shop: OS 2.0 * Revert "Update from Shopify for theme dawn/apply-settings-image-with-text" This reverts commit 7dea1d2. * Add back bottom margin * Remove redundant media query Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com> * Split popup and drawer settings (#917) * Split popup and drawer settings * Align naming * Update global setting range values (#954) * Update setting ranges and options for Buttons, Inputs, Layout, Media, Content containers * Fix typo * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Reorder settings. Adjust mobile grid range and defaults * Update settings naming Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Fix section vertical spacing (#976) * Fix rich text margins for bg-1 * Remove section level spacing CSS * Update and clean up spacing naming conventions * Clean up * Fix spacing for special consecutive sections with no heading * Remove comment * Update collapse grid naming * Update behaviour of special collapsing sections * Fix bugs * Remove product-grip bottom margin * Adjust setting range. Set image-with-text as collapsible section * Update from Shopify for theme dawn/fix-section-vertical-spacing Committed from shop: OS 2.0 * Revert "Update from Shopify for theme dawn/fix-section-vertical-spacing" This reverts commit a0771e5. * Adapt consistent spacing for all sections. Remove special cases * Revert usage of section spacing for elements other than sections * Edit settings names and order for spacing. Add mobile vertical section spacing setting * Revert value for margin-bottom * Revert additional padding * Revert additional padding * Revert heading logic * Revert heading logic * Revert heading logic * Address feedback * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com> Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Refactor collage * Update BEM for video modal * Adjust image spacing for mobile * Clean up * Set grip gap to global setting values * Fix collage focus states * Revert block order in liquid * Revert block order in liquid * Update file name * Add special case for single product/collection card * Remove ratios * Remove single video case * Update auto height setting for product and collection cards * Move card shadow to pseudo element (#1012) * Move product/card media shadows to pseudo element (#1013) * Add variant pills settings (#1005) * Add and update settings and copy * add css for variant pill settings * Image with text border/corner/shadow updates (#1003) * Collapse borders/corners and prevent shadow overlap * Revamp approach * Address media-only borders case * Adjust conditional * Prevent transparent borders from occupying physical space * Revert border width change * Clean up * Adjust implementation for card height extend * Adjust implementation for card height extend * Fix focus and clickable area for video which includes padding * Address PR comment. Fix 2 item mobile collage * Add position relative to collage-card for shadows * Update mobile collage layout * Use minmax to prevent grid expansion beyond viewport Co-authored-by: Martina Marien <martina.marien@shopify.com> Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com> Co-authored-by: melissaperreault <melissa.perreault@shopify.com>

* update the order of high level setting * remove style icons header * fix my mistake

* update the order of high level setting * update range values * adjust buttons values * update min value * update range values * adjust buttons values * update min value

* Move pill shadow to pseudo element * Fix radius value

* update the naming and clean up * adjust behavior * re-add decorative elements * fix code * remove unsused translations and add pop-ups paragraph * rebase 1 * rebase 2 * fix code * remove s to border * fix feedback

* testing values * adjust buttons and blur

* Move button styling to pseudo elements * Fix shadow depth in affected sections * Add border width/opacity condition * Fix branded checkout button heights * Fix border radius/border width calculations * Ignore facets * Cart and customer button fixes * Fix tertiary dimensions and opacity

…mplate-css-variables # Conflicts: # layout/password.liquid # templates/gift_card.liquid

tyleralsbury

Looks good - I tested by comparing the variables between the theme and password pages and it looks like they all match. The gift card one has fewer, as mentioned in the description, so I just cross-referenced it with the classes being used on that page and it looks good.

sofiamatulis

Looks great 🎉 Just added a few small comments

sofiamatulis · 2022-01-10T17:19:10Z

layout/password.liquid

+        --popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px;
+        --popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px;
+
+        --drawer-border-width: {{ settings.drawer_border_thickness }}px;


Drawers don't exist in the password page since they are only for the filter, cart, pick up availability and menu (password page has a different menu). Do we need it?

Good point! I'm ok with removing --drawer- variables from password page. One argument for keeping them is to ensure the same CSS variables are available across then theme to be used in the Custom Liquid section, but that is a very limited use-case.

Removed 91e1420. We can always add them back if needed.

sofiamatulis · 2022-01-10T17:20:52Z

layout/password.liquid

+
+        --badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;
+
+        --popup-border-width: {{ settings.popup_border_thickness }}px;


Same with popup. Do we need it? It seems to be only used in the cart, search, filter, footer, product page and header which dont exist in the password page

The featured product section add-to-cart should in theory trigger a cart notification, which is a popup, but that functionality is currently not working on password page. Opening an issue #1144

I believe the reason it doesn't work is because technically if a site is password protected, it means we cant access the other pages. So even though we allow merchants to add any section to the password page, it's not encouraged to add the featured product (?). So I am not sure if I would consider that an issue

cc @melissaperreault @Oliviammarcello

Hum, @nicklepine might have more context on that one, I don't remember. 🤔

@sofiamatulis given the site is behind a password, adding to cart from a featured product section should not work on the password page.

Removed the -popup variables from password page f04b9cd

sofiamatulis · 2022-01-10T17:21:14Z

layout/password.liquid

-        --grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
-        --grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
-        --grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;
+        --variant-pills-radius: {{ settings.variant_pills_radius }}px;


Same with variants. They seem to only exist in the product page.

I believe variant pills can exist in a featured-product section on the password page as well

sofiamatulis

Thanks for the changes 🚢

* Add theme level grid setting (Shopify#885) * adjust featured blog grid * ajust collage grid gap * adjust featured collection grid * update blog page grid * add settings, css variables and update grid class * Fix multicolumn vertical spacing * address reviewer feedback * Settings popup and drawer (Shopify#865) * Add media settings to non-card non-textbox elements (Shopify#893) * Text boxes global settings setup (Shopify#889) * Text boxes global settings setup * Add global sections settings (Shopify#891) * Add section-wrapper/borders to applicable sections * Add section spacing * Remove default border thickness. * Fix collage spacing * Global settings - buttons, inputs (Shopify#844) Buttons + inputs * Added back section settings tmeporarily (Shopify#899) * Add global settings cards (Shopify#886) * Add settings to schema * Edit template * Add styles * Use decimal for border-radius * Refactor markup * Adjust styles for product card * Add styles * Add settings * Update setting and CSS variable names * Update cards for search results * Clean up CSS * Update product card placeholder * Fix visual bugs. Adjust shadow setting min * Update markup for collection list cards * Update hover styles * Adjust collection arrow * Adjust collection arrow * Rename snippet for product card. Create snippet for collection card * Remove separate placeholder for product card * Adjustments for image ratio * Add support for auto height for collage * Clean up CSS * Fix typo * Fix pick up availability 'Unavailable' (Shopify#855) * Fix pick up availability 'Unavailable' * reuse similar check used in the same file * Remove redundant section settings * Update 1 translation file (Shopify#866) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Product image seo (Shopify#812) * Version bump to 2.4.0 (Shopify#884) * Add translation strings for en * Adjust styles * Update snippets/card-product.liquid * Adjust settings organization * Update layout/theme.liquid Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> * Remove redundant padding * Address feedback - Clean up unused CSS * Fix interaction with border and background * Fix collage * Adjust price layout * Adjust price layout Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> * update secondary button background color (Shopify#903) * Clean up popup drawer feed (Shopify#902) * Revert global section settings (Shopify#911) * Move vert spacing and remove other section settings * Include collage * Remove text box padding setting (Shopify#912) * Image with text section - Apply global textbox and media settings (Shopify#918) * Enable textbox settings for image with text section. Clean up CSS * Update from Shopify for theme dawn/apply-settings-image-with-text Committed from shop: OS 2.0 * Revert "Update from Shopify for theme dawn/apply-settings-image-with-text" This reverts commit 7dea1d2. * Add back bottom margin * Remove redundant media query Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com> * Split popup and drawer settings (Shopify#917) * Split popup and drawer settings * Align naming * Update global setting range values (Shopify#954) * Update setting ranges and options for Buttons, Inputs, Layout, Media, Content containers * Fix typo * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Reorder settings. Adjust mobile grid range and defaults * Update settings naming Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Fix section vertical spacing (Shopify#976) * Fix rich text margins for bg-1 * Remove section level spacing CSS * Update and clean up spacing naming conventions * Clean up * Fix spacing for special consecutive sections with no heading * Remove comment * Update collapse grid naming * Update behaviour of special collapsing sections * Fix bugs * Remove product-grip bottom margin * Adjust setting range. Set image-with-text as collapsible section * Update from Shopify for theme dawn/fix-section-vertical-spacing Committed from shop: OS 2.0 * Revert "Update from Shopify for theme dawn/fix-section-vertical-spacing" This reverts commit a0771e5. * Adapt consistent spacing for all sections. Remove special cases * Revert usage of section spacing for elements other than sections * Edit settings names and order for spacing. Add mobile vertical section spacing setting * Revert value for margin-bottom * Revert additional padding * Revert additional padding * Revert heading logic * Revert heading logic * Revert heading logic * Address feedback * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com> Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Move card shadow to pseudo element (Shopify#1012) * Move product/card media shadows to pseudo element (Shopify#1013) * Add variant pills settings (Shopify#1005) * Add and update settings and copy * add css for variant pill settings * Image with text border/corner/shadow updates (Shopify#1003) + rebase merge conflicts * Collapse borders/corners and prevent shadow overlap * Revamp approach * Address media-only borders case * Adjust conditional * Prevent transparent borders from occupying physical space * Revert border width change * Multicolumn shadow updates (Shopify#1023) * Apply shadow filter and background-none alternative * Prevent border radius on background-none * Update background class conditional * Move shadows to pseudo element * Whitespace Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * fix rebase issues * Section padding settings (Shopify#1006) * Section paddings settings * Blog cards update (Shopify#1036) * Update article cards to use card structure * Fix collage section product and collection card image size (Shopify#1014) * Add theme level grid setting (Shopify#885) * adjust featured blog grid * ajust collage grid gap * adjust featured collection grid * update blog page grid * add settings, css variables and update grid class * Fix multicolumn vertical spacing * address reviewer feedback * Settings popup and drawer (Shopify#865) * Add media settings to non-card non-textbox elements (Shopify#893) * Text boxes global settings setup (Shopify#889) * Text boxes global settings setup * Add global sections settings (Shopify#891) * Add section-wrapper/borders to applicable sections * Add section spacing * Remove default border thickness. * Fix collage spacing * Global settings - buttons, inputs (Shopify#844) Buttons + inputs * Added back section settings tmeporarily (Shopify#899) * Add global settings cards (Shopify#886) * Add settings to schema * Edit template * Add styles * Use decimal for border-radius * Refactor markup * Adjust styles for product card * Add styles * Add settings * Update setting and CSS variable names * Update cards for search results * Clean up CSS * Update product card placeholder * Fix visual bugs. Adjust shadow setting min * Update markup for collection list cards * Update hover styles * Adjust collection arrow * Adjust collection arrow * Rename snippet for product card. Create snippet for collection card * Remove separate placeholder for product card * Adjustments for image ratio * Add support for auto height for collage * Clean up CSS * Fix typo * Fix pick up availability 'Unavailable' (Shopify#855) * Fix pick up availability 'Unavailable' * reuse similar check used in the same file * Remove redundant section settings * Update 1 translation file (Shopify#866) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Product image seo (Shopify#812) * Version bump to 2.4.0 (Shopify#884) * Add translation strings for en * Adjust styles * Update snippets/card-product.liquid * Adjust settings organization * Update layout/theme.liquid Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> * Remove redundant padding * Address feedback - Clean up unused CSS * Fix interaction with border and background * Fix collage * Adjust price layout * Adjust price layout Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> * update secondary button background color (Shopify#903) * Clean up popup drawer feed (Shopify#902) * Revert global section settings (Shopify#911) * Move vert spacing and remove other section settings * Include collage * Remove text box padding setting (Shopify#912) * Image with text section - Apply global textbox and media settings (Shopify#918) * Enable textbox settings for image with text section. Clean up CSS * Update from Shopify for theme dawn/apply-settings-image-with-text Committed from shop: OS 2.0 * Revert "Update from Shopify for theme dawn/apply-settings-image-with-text" This reverts commit 7dea1d2. * Add back bottom margin * Remove redundant media query Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com> * Split popup and drawer settings (Shopify#917) * Split popup and drawer settings * Align naming * Update global setting range values (Shopify#954) * Update setting ranges and options for Buttons, Inputs, Layout, Media, Content containers * Fix typo * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Reorder settings. Adjust mobile grid range and defaults * Update settings naming Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Fix section vertical spacing (Shopify#976) * Fix rich text margins for bg-1 * Remove section level spacing CSS * Update and clean up spacing naming conventions * Clean up * Fix spacing for special consecutive sections with no heading * Remove comment * Update collapse grid naming * Update behaviour of special collapsing sections * Fix bugs * Remove product-grip bottom margin * Adjust setting range. Set image-with-text as collapsible section * Update from Shopify for theme dawn/fix-section-vertical-spacing Committed from shop: OS 2.0 * Revert "Update from Shopify for theme dawn/fix-section-vertical-spacing" This reverts commit a0771e5. * Adapt consistent spacing for all sections. Remove special cases * Revert usage of section spacing for elements other than sections * Edit settings names and order for spacing. Add mobile vertical section spacing setting * Revert value for margin-bottom * Revert additional padding * Revert additional padding * Revert heading logic * Revert heading logic * Revert heading logic * Address feedback * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Update config/settings_schema.json Co-authored-by: melissaperreault <melissa.perreault@shopify.com> Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com> Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Refactor collage * Update BEM for video modal * Adjust image spacing for mobile * Clean up * Set grip gap to global setting values * Fix collage focus states * Revert block order in liquid * Revert block order in liquid * Update file name * Add special case for single product/collection card * Remove ratios * Remove single video case * Update auto height setting for product and collection cards * Move card shadow to pseudo element (Shopify#1012) * Move product/card media shadows to pseudo element (Shopify#1013) * Add variant pills settings (Shopify#1005) * Add and update settings and copy * add css for variant pill settings * Image with text border/corner/shadow updates (Shopify#1003) * Collapse borders/corners and prevent shadow overlap * Revamp approach * Address media-only borders case * Adjust conditional * Prevent transparent borders from occupying physical space * Revert border width change * Clean up * Adjust implementation for card height extend * Adjust implementation for card height extend * Fix focus and clickable area for video which includes padding * Address PR comment. Fix 2 item mobile collage * Add position relative to collage-card for shadows * Update mobile collage layout * Use minmax to prevent grid expansion beyond viewport Co-authored-by: Martina Marien <martina.marien@shopify.com> Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com> Co-authored-by: melissaperreault <melissa.perreault@shopify.com> * Slider spacing fixes (Shopify#1037) * Update the high level order of the global settings (Shopify#1029) * update the order of high level setting * remove style icons header * fix my mistake * add border radius to dynamic checkout buttons (Shopify#1024) * Update global settings range values (Shopify#1042) * update the order of high level setting * update range values * adjust buttons values * update min value * update range values * adjust buttons values * update min value * Pill shadow updates (Shopify#1052) * Move pill shadow to pseudo element * Fix radius value * Settings content naming update (Shopify#1044) * update the naming and clean up * adjust behavior * re-add decorative elements * fix code * remove unsused translations and add pop-ups paragraph * rebase 1 * rebase 2 * fix code * remove s to border * fix feedback * Update layout range and values for mobile (Shopify#1055) * Add content container to sections and update styling (Shopify#1050) * Revise range values (Shopify#1069) * testing values * adjust buttons and blur * Refactor button styles (Shopify#1064) * Move button styling to pseudo elements * Fix shadow depth in affected sections * Add border width/opacity condition * Fix branded checkout button heights * Fix border radius/border width calculations * Ignore facets * Cart and customer button fixes * Fix tertiary dimensions and opacity * Fix content container shadow when set to transparent (Shopify#1075) * New section - Collapsible content (Shopify#956) * Update 13 translation files * Update template CSS variables for password and gift card * Remove drawer variables from password page * Remove popup variables from password page Co-authored-by: Martina Marien <martina.marien@shopify.com> Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com> Co-authored-by: melissaperreault <melissa.perreault@shopify.com>

Base automatically changed from all-global-settings to main January 5, 2022 19:55

martinamarien and others added 29 commits January 5, 2022 14:56

Add theme level grid setting (#885)

766d320

* adjust featured blog grid * ajust collage grid gap * adjust featured collection grid * update blog page grid * add settings, css variables and update grid class * Fix multicolumn vertical spacing * address reviewer feedback

Settings popup and drawer (#865)

227ffe7

Add media settings to non-card non-textbox elements (#893)

640f1dd

Text boxes global settings setup (#889)

ee84459

* Text boxes global settings setup

Add global sections settings (#891)

2055496

* Add section-wrapper/borders to applicable sections * Add section spacing * Remove default border thickness. * Fix collage spacing

Global settings - buttons, inputs (#844)

c4a45f0

Buttons + inputs

Added back section settings tmeporarily (#899)

00ae007

update secondary button background color (#903)

2ea4756

Clean up popup drawer feed (#902)

8681a5a

Revert global section settings (#911)

810b429

* Move vert spacing and remove other section settings * Include collage

Remove text box padding setting (#912)

e769b89

Split popup and drawer settings (#917)

91524b0

* Split popup and drawer settings * Align naming

Move card shadow to pseudo element (#1012)

9f8fdb3

Move product/card media shadows to pseudo element (#1013)

8387c7f

Add variant pills settings (#1005)

8fe9ac2

* Add and update settings and copy * add css for variant pill settings

fix rebase issues

5cfd35a

Section padding settings (#1006)

2349416

* Section paddings settings

Blog cards update (#1036)

48d60e8

* Update article cards to use card structure

Slider spacing fixes (#1037)

112cc4b

Update the high level order of the global settings (#1029)

ff0b590

* update the order of high level setting * remove style icons header * fix my mistake

add border radius to dynamic checkout buttons (#1024)

72a68a5

Update global settings range values (#1042)

5e97b2e

* update the order of high level setting * update range values * adjust buttons values * update min value * update range values * adjust buttons values * update min value

kmeleta and others added 10 commits January 5, 2022 14:57

Pill shadow updates (#1052)

8b6cfc1

* Move pill shadow to pseudo element * Fix radius value

Settings content naming update (#1044)

3d0580d

* update the naming and clean up * adjust behavior * re-add decorative elements * fix code * remove unsused translations and add pop-ups paragraph * rebase 1 * rebase 2 * fix code * remove s to border * fix feedback

Update layout range and values for mobile (#1055)

259b99f

Add content container to sections and update styling (#1050)

f375286

Revise range values (#1069)

0b47eb1

* testing values * adjust buttons and blur

Fix content container shadow when set to transparent (#1075)

ec8d982

New section - Collapsible content (#956)

cc24607

Update 13 translation files

2db95b6

Update template CSS variables for password and gift card

f46b337

KaichenWang force-pushed the update-template-css-variables branch from 5354fed to f46b337 Compare January 5, 2022 19:57

Merge branch 'main' of https://github.com/Shopify/dawn into update-te…

f0858c2

…mplate-css-variables # Conflicts: # layout/password.liquid # templates/gift_card.liquid

tyleralsbury previously approved these changes Jan 10, 2022

View reviewed changes

sofiamatulis self-assigned this Jan 10, 2022

sofiamatulis reviewed Jan 10, 2022

View reviewed changes

Remove drawer variables from password page

91e1420

KaichenWang dismissed tyleralsbury’s stale review via 91e1420 January 10, 2022 19:58

KaichenWang requested review from sofiamatulis and tyleralsbury January 10, 2022 19:59

Remove popup variables from password page

f04b9cd

sofiamatulis mentioned this pull request Jan 11, 2022

Featured product section on Password page - Errors #1144

Open

sofiamatulis approved these changes Jan 11, 2022

View reviewed changes

tyleralsbury mentioned this pull request Jan 11, 2022

Global styling: Inputs styling not applied consistently #1097

Merged

5 tasks

tyleralsbury approved these changes Jan 12, 2022

View reviewed changes

KaichenWang merged commit 61970ca into main Jan 12, 2022

KaichenWang deleted the update-template-css-variables branch January 12, 2022 18:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update template CSS variables #1091

Update template CSS variables #1091

KaichenWang commented Jan 5, 2022

tyleralsbury left a comment

sofiamatulis left a comment

sofiamatulis Jan 10, 2022

KaichenWang Jan 10, 2022

KaichenWang Jan 10, 2022

sofiamatulis Jan 10, 2022

KaichenWang Jan 10, 2022 •

edited

Loading

sofiamatulis Jan 10, 2022 •

edited

Loading

melissaperreault Jan 10, 2022

nicklepine Jan 10, 2022

KaichenWang Jan 11, 2022

sofiamatulis Jan 10, 2022

KaichenWang Jan 10, 2022

sofiamatulis left a comment


		--badge-corner-radius: {{ settings.badge_corner_radius \| divided_by: 10.0 }}rem;

		--popup-border-width: {{ settings.popup_border_thickness }}px;

Update template CSS variables #1091

Update template CSS variables #1091

Conversation

KaichenWang commented Jan 5, 2022

tyleralsbury left a comment

Choose a reason for hiding this comment

sofiamatulis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KaichenWang Jan 10, 2022 • edited Loading

Choose a reason for hiding this comment

sofiamatulis Jan 10, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sofiamatulis left a comment

Choose a reason for hiding this comment

KaichenWang Jan 10, 2022 •

edited

Loading

sofiamatulis Jan 10, 2022 •

edited

Loading