Upgrade Guide

Upgrading from 2.x to 3.x

We’ve made a script that will automatically find and replace deprecated variables in your theme. Use it as shown below:

1. Update parent themes:

   composer require swissup/breeze-blank:^3.0 swissup/breeze-evolution:^3.0
   bin/magento setup:upgrade
   

2. Run the migration script for your custom theme:

   curl -s https://breezefront.com/tools/migrate-2-to-3 | php -- /www/magento2/app/design/frontend/Local/breeze-custom
   

3. Clear cache and static content:

   bin/magento cache:clean
   rm -rf var/view_preprocessed pub/static/frontend
   

Manual review is still required after running the script.

1. Pay attention to -alpha variables. If you did something like:

   --base-bg-alpha: 0;
   --muted-bg-alpha: .5;
   

   this will no loger work and you should do this instead:

   background: transparent;
   background: color-mix(in srgb, var(--muted-bg) 50%, transparent);
   

2. Additionally we’ve renamed few css classes:

   Old	New
   max-w-xs	max-w-screen-xs
   max-w-sm	max-w-screen-sm
   max-w-md	max-w-screen-md
   max-w-lg	max-w-screen-lg
   max-w-xl	max-w-screen-xl
   max-w-xxl	max-w-screen-xxl

3. We’ve removed default padding and background from the round icons:

   Old	New
   icon rounded	icon rounded p-3 bg-muted
   icon small rounded	icon small rounded p-2 bg-muted

Here is brief summary of the changes that were made in Breeze 3.0

Quite a lot variables where droppped or renamed. You can find all deprecated variables inside _deprecated.less file.

Please make sure that your theme is not using any of the variables listed in this file.

1. Color variables where renamed a lot:

   Old	New
   @brand__color	@color__brand
   @theme__brand-color	@color__brand
   @theme__dark__brand-color	@color__inverted__brand
   @blue	@color__blue
   @green	@color__green
   @red	@color__red
   @yellow	@color__yellow
   @dark__blue	@color__inverted__blue
   @dark__green	@color__inverted__green
   @dark__red	@color__inverted__red
   @theme__dark-color	@dark__background
   @divider__color	@subtle__color
   @dark__gray-800	@base__inverted__color
   @brand__hover__color	Removed
   @theme__brand-hover-color	Removed
   @blue__muted	Removed
   @green__muted	Removed
   @red__muted	Removed
   @yellow__muted	Removed
   @*__alpha	Removed

2. Few components where renamed:

   Old	New
   @ring__width	@focus-ring__width;
   @ring__offset	@focus-ring__offset;
   @ring__color	@focus-ring__color;
   @ring__inverted__text-color	@focus-ring__inverted__color;
   @z-layer__background	@surface__background
   @z-layer__color	@surface__color
   @z-layer__dark__background-color	@surface__inverted__background
   @rating__color	@rating-icon__color;

3. Rename all @*__text-color variables to @*__color and @*__background-color variables to @*__background. Examples:

   Old	New
   @base__text-color: #000	@base__color: #000
   @base__background-color: #fff	@base__background: #fff

4. Remove all @*__alpha variables. Breeze Themes no longer use them.

5. Find rgb(var(...)), rgba(var(...)) and make sure that rgba|rgb is still needed here. In most cases it should be replaced with raw var(...). Examples:

   Old	New
   color: ~"rgb(var(--base-color))"	color: var(--base-color)
   color: ~"rgba(var(--base-color), 1)"	color: var(--base-color)
   color: ~"rgba(var(--base-color), 0.1)"	color: color-mix(in oklch, var(--base-color) 10%, transparent)

6. To make your theme compatible with Theme Editor always use CSS tokens when consume the variable:

   Old	New
   color: @color__brand	color: var(--color-brand)
   color: @muted__color	color: var(--muted-color)

7. Replace all .lib-rgb() and .breeze-rgb() usages with .lib-css().

Upgrading from 2.18.0 to 2.19.0

Update swissup/theme-frontend-breeze-blank to version 2.19:

composer update swissup/theme-frontend-breeze-blank -W

Search and replace deprecated variables inside your theme folder:

Upgrading from 1.x.x to 2.x.x

How to upgrade

1. Update all Swissup modules

   composer update "swissup/*"
   

2. Update Breeze module or theme to version 2.0

   Edit this command and leave the packages you use:

   composer require -w swissup/breeze:^2.0 \
       swissup/breeze-blank:^2.0 \
       swissup/breeze-evolution:^2.0
   

Breaking Changes

1. Dark color scheme is disabled by default now. If you wish to enable this feature, you need to add @respect-color-scheme: true; to your custom.less file.

2. Markup of header dropdown item was changed (.switcher wrapper was added) to match language and currency switcher dropdowns. This allows to move customer dropdown menu to header panel if needed. If your custom theme used .header.content > .actions > .action selector for some styles, you need to update it with .header.content > .switcher > .actions > .action.

3. We’ve removed/renamed bunch of less variables to make it easier to maintain Breeze source code. The tables below shows each variable we’ve changed.

   1.x.x variable	2.x.x replacement
   @rgb-*	These variables were completely removed
   @button__hover__color	@button__hover__text-color
   @button__focus__color	@button__focus__text-color
   @button-primary__hover__color	@button-primary__hover__text-color
   @button-secondary__hover__color	@button-secondary__hover__text-color
   @message-success__color	@message-success__text-color
   @message-success__background	@message-success__background-color
   @message-info__color	@message-info__text-color
   @message-info__background	@message-info__background-color
   @message-error__color	@message-error__text-color
   @message-error__background	@message-error__background-color
   @minisearch-input--border-color	@minisearch-input__border-color
   @minisearch-input--background	@minisearch-input__background-color
   @minisearch-button--background	@minisearch-button__background-color
   @minisearch-button--color	@minisearch-button__text-color
   @minisearch-button--focus--background	@minisearch-button__focus__background-color
   @footer-newsletter-input--border-color	@footer-newsletter-input__border-color
   @footer-newsletter-input--background	@footer-newsletter-input__background-color
   @inverted--base-color	@base__inverted__text-color
   @inverted--base-alpha	@base__inverted__text-alpha
   @inverted--headings-alpha	@headings__inverted__text-alpha
   @inverted--link-color	@link__inverted__text-color
   @inverted--link-alpha	@link__inverted__text-alpha
   @inverted--ring-color	@ring__inverted__text-color
   @inverted--ring-alpha	@ring__inverted__text-alpha
   @inverted--muted-bg	@muted__inverted__background-color
   @inverted--muted-bg-alpha	@muted__inverted__background-alpha
   @inverted--button-bg	@button__inverted__background-color
   @inverted--button-border-color	@button__inverted__border-color
   @inverted--button-color	@button__inverted__text-color
   @inverted--input-bg	@input__inverted__background-color
   @inverted--input-bg-alpha	@input__inverted__background-alpha
   @inverted--input-border-color	@input__inverted__border-color
   @inverted--input-border-alpha	@input__inverted__border-alpha
   @product-stock__color	@product-stock__text-color
   @product-stock__background	@product-stock__background-color
   @product-stock-available__color	@product-stock-available__text-color
   @product-stock-available__background	@product-stock-available__background-color
   @product-stock-unavailable__color	@product-stock-unavailable__text-color
   @product-stock-unavailable__background	@product-stock-unavailable__background-color
   @listing-grid-item__aspect-ratio	@listing-grid-item__reveal-on-hover__aspect-ratio
   @listing-grid-item__details-height	@listing-grid-item__reveal-on-hover__visible-height
   @listing-grid-item-actions-primary__opacity	@listing-grid-item-actions-primary__absolute__opacity
   @listing-grid-item-actions-primary__z-index	@listing-grid-item-actions-primary__absolute__z-index
   @listing-grid-item-actions-primary__top	@listing-grid-item-actions-primary__absolute__top
   @listing-grid-item-actions-primary__left	@listing-grid-item-actions-primary__absolute__left
   @listing-grid-item-actions-primary__right	@listing-grid-item-actions-primary__absolute__right
   @listing-grid-item-actions-primary__transform	@listing-grid-item-actions-primary__absolute__transform
   @listing-grid-item-actions-primary__visible__transform	@listing-grid-item-actions-primary__absolute__visible__transform
   @listing-grid-item-tocart--color	@listing-grid-item-tocart__absolute__text-color
   @listing-grid-item-tocart--bg-alpha	@listing-grid-item-tocart__absolute__background-alpha
   @listing-grid-item-tocart--bg	@listing-grid-item-tocart__absolute__background-color
   @listing-grid-item-tocart__border-color	@listing-grid-item-tocart__absolute__background-color
   @listing-grid-item-tocart__hover--bg-alpha	@listing-grid-item-tocart__absolute__hover__background-alpha
   @listing-grid-item-tocart__box-shadow	@listing-grid-item-tocart__absolute__box-shadow
   @listing-grid-item-tocart__font-weight	@listing-grid-item-tocart__absolute__font-weight
   @listing-grid-item-tocart__text-transform	@listing-grid-item-tocart__absolute__text-transform
   @listing-grid-item-actions-secondary__flex-direction	@listing-grid-item-actions-secondary__absolute__flex-direction
   @listing-grid-item-actions-secondary__z-index	@listing-grid-item-actions-secondary__absolute__z-index
   @listing-grid-item-actions-secondary__top	@listing-grid-item-actions-secondary__absolute__top
   @listing-grid-item-actions-secondary__left	@listing-grid-item-actions-secondary__absolute__left
   @listing-grid-item-actions-secondary__transform	@listing-grid-item-actions-secondary__absolute__transform
   @listing-grid-item-actions-secondary__visible__transform	@listing-grid-item-actions-secondary__absolute__visible__transform