> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/en/update-guides/shopware-6.7.0.0.md).

# Shopware 6.7.0.0

As with every major annual Shopware release, version 6.7 introduces exciting new features – and several **breaking changes**. These are part of Shopware’s official update strategy.

***

### Theme configuration defaults

This change was made as part of the adjustments to improve accessibility.

To comply with WCAG 2.1 contrast requirements (minimum ratio 4.5:1), several theme color variables were adjusted. Please note that this only affects configuration fields whose values ​​you haven't changed. Configuration fields that have already been changed will not be overwritten.<br>

<details>

<summary>Theme Atmos - Set 1</summary>

* Preloader > Preloader - page loading animation > Background (`zen-layout-preloader-bg`)`lighten(saturate($sw-color-brand-primary, 7%), 15%)` => `lighten(saturate($sw-color-brand-primary, 7%), 30%)`
* Typo & Colors > Theme colors > Basic configuration > Contrast threshold (`zen-min-contrast-ratio`)`2` => `4.5`
* Typo & Colors > Theme colors > Colors > Primary color (`sw-color-brand-primary`)`#D9AB98` => `#b16141`
* Typo & Colors > Theme colors > Colors > Secondary color (`sw-color-brand-secondary`)`#333333` => `#222222`
* Typo & Colors > Status messages > > Success (`sw-color-success`)`#3cc261` => `#007e4e`
* Typo & Colors > Status messages > > Information (`sw-color-info`)`#26b6cf` => `#005b99`
* Typo & Colors > Status messages > > Notice (`sw-color-warning`)`#ffbd5d` => `#9b6a08`
* Typo & Colors > Status messages > > Error (`sw-color-danger`)`#e52427` => `#c20017`
* Typo & Colors > Buttons > Colors > Light button (`zen-color-light-button`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Typo & Colors > Buttons > Colors > Dark button text (`zen-color-dark-button-text`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Header > Top bar > Colors > Text:hover (`zen-top-bar-hover-color`)`lighten(saturate($sw-color-brand-primary, 7%), 15%)` => `lighten(saturate($sw-color-brand-primary, 7%), 30%)`
* Header > Shop navigation (Search, Wishlist, Account, Cart) > Colors > Text:hover (`zen-shop-navigation-hover-color`)`lighten(saturate($sw-color-brand-primary, 7%), 15%)` => `lighten(saturate($sw-color-brand-primary, 7%), 30%)`
* Header > Shop navigation (Search, Wishlist, Account, Cart) > Cart > Text:hover (`zen-shop-navigation-cart-hover-color`)`lighten(saturate($sw-color-brand-primary, 7%), 15%)` => `lighten(saturate($sw-color-brand-primary, 7%), 30%)`
* Header > Main navigation (Categories) > Colors > Background:hover (`zen-main-navigation-hover-bg`)`lighten(saturate($sw-color-brand-primary, 7%), 15%)` => `lighten(saturate($sw-color-brand-primary, 7%), 30%)`
* Header > Main navigation (Categories) > Colors > Text:hover (`zen-main-navigation-hover-color`)`lighten(saturate($sw-color-brand-primary, 7%), 15%)` => `lighten(saturate($sw-color-brand-primary, 7%), 30%)`
* Footer > Columns styling > Newsletter column > Background (`zen-footer-newsletter-column-bg`)`lighten(saturate($sw-color-brand-primary, 7%), 15%)` => `lighten(saturate($sw-color-brand-primary, 7%), 30%)`
* Footer > Columns styling > Newsletter column > Form border (`zen-footer-newsletter-field-border`)`$sw-color-brand-primary` => `darken($sw-color-brand-primary, 5%)`
* Components > Sidebar navigation > Colors > Background:active path (`zen-sidebar-navigation-active-bg`)`lighten(saturate($sw-color-brand-primary, 7%), 15%)` => `lighten(saturate($sw-color-brand-primary, 7%), 30%)`
* Components > Sidebar navigation > Colors > Text:active path (`zen-sidebar-navigation-active-color`)`#706560` => `darken($sw-color-brand-primary, 20%)`
* Components > Forms > Colors > Border (`zen-input-border-color`)`$sw-border-color` => `darken($sw-border-color, 34%)`
* Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation background (`zen-base-slider-controls-inside-bg`)`lighten(saturate($sw-color-brand-primary, 7%), 15%)` => `lighten(saturate($sw-color-brand-primary, 7%), 30%)`
* Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation color (`zen-base-slider-controls-inside-color`)`$sw-color-brand-primary` => `darken($sw-color-brand-primary, 20%)`
* Category > Filter > Colors > Background:hover (`zen-category-filter-hover-bg`)`lighten(saturate($sw-color-brand-primary, 7%), 15%)` => `lighten(saturate($sw-color-brand-primary, 7%), 20%)`

</details>

<details>

<summary>Theme Atmos - Set 2</summary>

* Typo & Colors > Theme colors > Basic configuration > Contrast threshold (`zen-min-contrast-ratio`)`2` => `4.5`
* Typo & Colors > Theme colors > Colors > Primary color (`sw-color-brand-primary`)`#e87d00` => `#aa5c00`
* Typo & Colors > Theme colors > Colors > Border (`sw-border-color`)`#e8e7e8` => `#8d8d8d`
* Typo & Colors > Status messages > > Success (`sw-color-success`)`#3cc261` => `#007e4e`
* Typo & Colors > Status messages > > Information (`sw-color-info`)`#26b6cf` => `#005b99`
* Typo & Colors > Status messages > > Notice (`sw-color-warning`)`#ffbd5d` => `#9b6a08`
* Typo & Colors > Status messages > > Error (`sw-color-danger`)`#e52427` => `#c20017`
* Typo & Colors > Buttons > Colors > Light button (`zen-color-light-button`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Typo & Colors > Buttons > Colors > Dark button text (`zen-color-dark-button-text`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Header > Search > Colors > \[!] Text:focus (`zen-search-focus-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 10%)`
* Header > Search > Colors > Border (`zen-search-border`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 10%)`
* Header > Search > Colors > \[!] Border:focus (`zen-search-focus-border`)`$sw-color-brand-secondary` => `lighten($sw-color-brand-primary, 10%)`
* Header > Shop navigation (Search, Wishlist, Account, Cart) > Colors > Text:hover (`zen-shop-navigation-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 10%)`
* Header > Shop navigation (Search, Wishlist, Account, Cart) > Cart > Text:hover (`zen-shop-navigation-cart-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 10%)`
* Header > Main navigation (Categories) > Colors > Text:hover (`zen-main-navigation-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 10%)`
* Components > Sidebar navigation > Colors > Background (`zen-sidebar-navigation-bg`)`#F3F4F5` => `#ffffff`
* Components > Sidebar navigation > Colors > Border (`zen-sidebar-navigation-border-color`)`$sw-color-brand-primary` => `$sw-border-color`
* Components > Forms > Colors > Border (`zen-input-border-color`)`$sw-border-color` => `darken($sw-border-color, 38%)`
* Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation background (`zen-base-slider-controls-inside-bg`)`transparent` => `$sw-color-brand-primary`
* Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation background:hover (`zen-base-slider-controls-inside-hover-bg`)`transparent` => `$sw-color-brand-primary`
* Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation color (`zen-base-slider-controls-inside-color`)`$sw-text-color` => `#ffffff`
* Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation color:hover (`zen-base-slider-controls-inside-hover-color`)`$sw-color-brand-primary` => `#ffffff`
* Components > Pagination > Colors > Background:hover (`zen-pagination-hover-bg`)`hsl(hue($sw-border-color), saturation($sw-border-color), 93%)` => `$sw-color-brand-primary`
* Components > Pagination > Colors > Text:hover (`zen-pagination-hover-color`)`darken($sw-color-brand-primary, 15%)` => `#ffffff`
* Product > Description navigation > Colors > \[!] Background / border (`zen-product-tabs-bg`)`$sw-border-color` => `transparent`
* Product > Description navigation > Colors > Text (`zen-product-tabs-color`)`$sw-text-color` => `$sw-color-brand-primary`

</details>

<details>

<summary>Theme Atmos - Set 3</summary>

* Typo & Colors > Theme colors > Basic configuration > Contrast threshold (`zen-min-contrast-ratio`)`3` => `4.5`
* Typo & Colors > Theme colors > Colors > Primary color (`sw-color-brand-primary`)`#e54924` => `#a55a01`
* Typo & Colors > Theme colors > Colors > Border (`sw-border-color`)`#e8e7e8` => `#404346`
* Typo & Colors > Theme colors > Colors > \[!] Meta theme-color (`zen-meta-theme-color`)`#ffffff` => `#161718`
* Typo & Colors > Theme colors > Colors > Link color (`zen-link-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 10%)`
* Typo & Colors > Status messages > > Error (`sw-color-danger`)`#e52427` => `#ff4143`
* Typo & Colors > Buttons > Colors > Light button (`zen-color-light-button`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Typo & Colors > Buttons > Colors > Dark button text (`zen-color-dark-button-text`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Header > Search > Colors > Border (`zen-search-border`)`lighten($sw-color-brand-secondary, 10%)` => `lighten($sw-color-brand-secondary, 50%)`
* Header > Top bar > Colors > Background:hover (`zen-top-bar-hover-bg`)`lighten($sw-color-brand-secondary, 5%)` => `darken($sw-color-brand-secondary, 8%)`
* Header > Shop navigation (Search, Wishlist, Account, Cart) > Cart > Badge color (`zen-shop-navigation-cart-badge-color`)`$sw-color-brand-primary` => `#ffffff`
* Footer > Footer > Colors > Background (`zen-footer-bg`)`darken($sw-background-color, 5%)` => `darken($sw-background-color, 8%)`
* Footer > Columns styling > Newsletter column > \[!] Form background (`zen-footer-newsletter-field-bg`)`lighten($sw-color-brand-secondary, 5%)` => `#ffffff`
* Footer > Columns styling > Newsletter column > \[!] Form background:focus (`zen-footer-newsletter-field-focus-bg`)`$sw-color-brand-secondary` => `#ffffff`
* Footer > Columns styling > Newsletter column > Form text (`zen-footer-newsletter-field-color`)`#ffffff` => `$sw-text-color`
* Footer > Columns styling > Newsletter column > Form border (`zen-footer-newsletter-field-border`)`darken($sw-color-brand-secondary, 10%)` => `#ffffff`
* Footer > Footer bottom > Colors > Background (`zen-footer-bottom-bg`)`darken($sw-background-color, 5%)` => `darken($sw-background-color, 8%)`

</details>

<details>

<summary>Theme Atmos - Set 4</summary>

* Accent line > Basic configuration > Accent line top (`zen-layout-border-top-width`)`5` => `0`
* Typo & Colors > Theme colors > Basic configuration > Contrast threshold (`zen-min-contrast-ratio`)`1` => `4.5`
* Typo & Colors > Theme colors > Colors > Secondary color (`sw-color-brand-secondary`)`#676460` => `#5d5c57`
* Typo & Colors > Theme colors > Colors > Link color (`zen-link-color`)`$sw-color-brand-primary` => `darken($sw-color-brand-primary, 45%)`
* Typo & Colors > Status messages > > Success (`sw-color-success`)`#3cc261` => `#007e4e`
* Typo & Colors > Status messages > > Information (`sw-color-info`)`#26b6cf` => `#005b99`
* Typo & Colors > Status messages > > Notice (`sw-color-warning`)`#ffbd5d` => `#9b6a08`
* Typo & Colors > Status messages > > Error (`sw-color-danger`)`#e52427` => `#c20017`
* Typo & Colors > Typography > Colors > Dark text color (`sw-text-color`)`#6d6d6d` => `#111111`
* Typo & Colors > Buttons > Colors > Light button (`zen-color-light-button`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Typo & Colors > Buttons > Colors > Dark button text (`zen-color-dark-button-text`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Typo & Colors > E-Commerce > > Buy button text (`sw-color-buy-button-text`)`#ffffff` => `#000000`
* Header > Shop navigation (Search, Wishlist, Account, Cart) > Colors > Text:hover (`zen-shop-navigation-hover-color`)`$sw-color-brand-primary` => `darken($sw-color-brand-primary, 45%)`
* Header > Shop navigation (Search, Wishlist, Account, Cart) > Cart > Text:hover (`zen-shop-navigation-cart-hover-color`)`$sw-color-brand-primary` => `darken($sw-color-brand-primary, 45%)`
* Header > Dropdown navigation > Colors > Text (`zen-dropdown-navigation-color`)`#ffffff` => `$sw-text-color`
* Header > Dropdown navigation > Colors > Text:hover (`zen-dropdown-navigation-hover-color`)`#ffffff` => `$sw-text-color`
* Footer > Footer > Colors > Text (`zen-footer-color`)`#ffffff` => `$sw-text-color`
* Footer > Columns styling > Hotline Column > Text (`zen-footer-hotline-column-color`)`#ffffff` => `$sw-text-color`
* Footer > Columns styling > Hotline Column > Text:hover (`zen-footer-hotline-column-hover-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Footer > Columns styling > Custom column 1 > Text:hover (`zen-footer-custom-column-hover-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Footer > Columns styling > Custom column 2 > Text:hover (`zen-footer-custom-2-column-hover-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Footer > Columns styling > Custom column 3 > Text:hover (`zen-footer-custom-3-column-hover-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Footer > Columns styling > Payment methods column > Text:hover (`zen-footer-payment-logos-column-hover-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Footer > Columns styling > Shipping methods column > Text:hover (`zen-footer-shipping-logos-column-hover-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Components > Sidebar navigation > Colors > Text:hover (`zen-sidebar-navigation-hover-color`)`#ffffff` => `$sw-text-color`
* Components > Sidebar navigation > Colors > Text:active path (`zen-sidebar-navigation-active-color`)`#ffffff` => `$sw-text-color`
* Components > Forms > Colors > Border (`zen-input-border-color`)`$sw-border-color` => `darken($sw-border-color, 34%)`
* Components > Forms > Colors > Border:focus (`zen-input-focus-border-color`)`$sw-color-brand-primary` => `darken($sw-color-brand-primary, 45%)`
* Components > Image & gallery slider > Gallery slider (Navigation mode: outside) > Arrow navigation color (`zen-base-slider-controls-outside-color`)`#ffffff` => `$sw-text-color`
* Components > Image & gallery slider > Gallery slider (Navigation mode: outside) > Arrow navigation color:hover (`zen-base-slider-controls-outside-hover-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Components > Image & gallery slider > Gallery slider (Navigation mode: outside) > Dots (`zen-base-slider-controls-dots-outside-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Components > Image & gallery slider > Gallery slider (Navigation mode: outside) > Dots:hover (`zen-base-slider-controls-dots-outside-hover-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation color:hover (`zen-base-slider-controls-inside-hover-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Dots (`zen-base-slider-controls-dots-inside-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Dots:hover (`zen-base-slider-controls-dots-inside-hover-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Components > Image & gallery slider > Image slider (Navigation mode: outside) > Arrow navigation background (`zen-image-slider-controls-outside-bg`)`$sw-color-brand-primary` => `$sw-text-color`
* Components > Image & gallery slider > Image slider (Navigation mode: outside) > Arrow navigation color:hover (`zen-image-slider-controls-outside-hover-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Components > Image & gallery slider > Image slider (Navigation mode: outside) > Dots (`zen-image-slider-controls-dots-outside-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Components > Image & gallery slider > Image slider (Navigation mode: outside) > Dots:hover (`zen-image-slider-controls-dots-outside-hover-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Components > Image & gallery slider > Image slider (Navigation mode: inside) > Arrow navigation color (`zen-image-slider-controls-inside-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Components > Image & gallery slider > Image slider (Navigation mode: inside) > Arrow navigation color:hover (`zen-image-slider-controls-inside-hover-color`)`#ffffff` => `$sw-text-color`
* Components > Image & gallery slider > Image slider (Navigation mode: inside) > Dots (`zen-image-slider-controls-dots-inside-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Components > Image & gallery slider > Image slider (Navigation mode: inside) > Dots:hover (`zen-image-slider-controls-dots-inside-hover-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Components > Product slider > Colors > Arrow navigation color (`zen-product-slider-controls-color`)`#ffffff` => `$sw-text-color`
* Components > Product slider > Colors > Arrow navigation color:hover (`zen-product-slider-controls-hover-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Components > Category listing slider > Colors > Arrow navigation color (`zen-category-listing-slider-controls-color`)`#ffffff` => `$sw-text-color`
* Components > Category listing slider > Colors > Arrow navigation color:hover (`zen-category-listing-slider-controls-hover-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Components > Pagination > Colors > Text (`zen-pagination-color`)`$sw-color-brand-primary` => `$sw-text-color`
* Components > Pagination > Colors > Text:hover (`zen-pagination-hover-color`)`darken($sw-color-brand-primary, 15%)` => `$sw-text-color`
* Components > Pagination > Colors > Text:active (`zen-pagination-active-color`)`#ffffff` => `$sw-text-color`
* Components > Breadcrumbs > Colors > Text:hover (`zen-breadcrumbs-hover-color`)`$sw-color-brand-primary` => `darken($sw-color-brand-primary, 45%)`
* Category > Filter > Colors > Text:hover (`zen-category-filter-hover-color`)`#ffffff` => `$sw-text-color`
* Category > Filter > Colors > Text:active (`zen-category-filter-active-color`)`#ffffff` => `$sw-text-color`
* Product > Detail > Product configurator > Text:hover (`zen-product-configurator-hover-color`)`#ffffff` => `$sw-text-color`
* Product > Description navigation > Colors > Text:hover (`zen-product-tabs-hover-color`)`#ffffff` => `$sw-text-color`

</details>

<details>

<summary>Theme Gravity - Set 1</summary>

* Typo & Colors > Theme colors > Basic configuration > Contrast threshold (`zen-min-contrast-ratio`)`2` => `4.5`
* Typo & Colors > Status messages > > Success (`sw-color-success`)`#3cc261` => `#007e4e`
* Typo & Colors > Status messages > > Information (`sw-color-info`)`#26b6cf` => `#005b99`
* Typo & Colors > Status messages > > Notice (`sw-color-warning`)`#ffbd5d` => `#9b6a08`
* Typo & Colors > Status messages > > Error (`sw-color-danger`)`#e52427` => `#c20017`
* Typo & Colors > Buttons > Colors > Light button (`zen-color-light-button`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Typo & Colors > Buttons > Colors > Dark button text (`zen-color-dark-button-text`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Components > Forms > Colors > Border:focus (`zen-input-focus-border-color`)`$sw-border-color` => `#818faa`

</details>

<details>

<summary>Theme Gravity - Set 2</summary>

* Typo & Colors > Status messages > > Success (`sw-color-success`)`#3cc261` => `#007e4e`
* Typo & Colors > Status messages > > Information (`sw-color-info`)`#26b6cf` => `#005b99`
* Typo & Colors > Status messages > > Notice (`sw-color-warning`)`#F2CB05` => `#9b6a08`
* Typo & Colors > Status messages > > Error (`sw-color-danger`)`#EA003A` => `#ea003a`
* Typo & Colors > Buttons > Colors > Dark button text (`zen-color-dark-button-text`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Footer > Footer > Colors > Text:hover (`zen-footer-hover-color`)`darken($sw-color-brand-secondary, 20%)` => `darken($sw-color-brand-secondary, 30%)`
* Footer > Columns styling > Hotline Column > Text:hover (`zen-footer-hotline-column-hover-color`)`darken($sw-color-brand-secondary, 20%)` => `darken($sw-color-brand-secondary, 30%)`
* Footer > Columns styling > Social media column > Text:hover (`zen-footer-social-column-hover-color`)`darken($sw-color-brand-secondary, 20%)` => `darken($sw-color-brand-secondary, 30%)`
* Footer > Columns styling > Custom column 1 > Text:hover (`zen-footer-custom-column-hover-color`)`darken($sw-color-brand-secondary, 20%)` => `darken($sw-color-brand-secondary, 30%)`
* Components > Forms > Colors > Background:focus (`zen-input-focus-bg`)`#ffffff` => `#f6f7f9`
* Components > Forms > Colors > Border (`zen-input-border-color`)`#f6f7f9` => `darken($sw-border-color, 32%)`
* Components > Forms > Colors > Border:focus (`zen-input-focus-border-color`)`$sw-border-color` => `darken($sw-border-color, 42%)`
* Components > Image & gallery slider > Gallery slider (Navigation mode: outside) > Dots (`zen-base-slider-controls-dots-outside-color`)`$sw-border-color` => `$sw-text-color`
* Components > Image & gallery slider > Gallery slider (Navigation mode: outside) > Dots:hover (`zen-base-slider-controls-dots-outside-hover-color`)`$sw-border-color` => `$sw-text-color`
* Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Dots (`zen-base-slider-controls-dots-inside-color`)`$sw-border-color` => `$sw-text-color`
* Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Dots:hover (`zen-base-slider-controls-dots-inside-hover-color`)`$sw-border-color` => `$sw-text-color`
* Components > Image & gallery slider > Image slider (Navigation mode: outside) > Dots (`zen-image-slider-controls-dots-outside-color`)`$sw-border-color` => `$sw-text-color`
* Components > Image & gallery slider > Image slider (Navigation mode: outside) > Dots:hover (`zen-image-slider-controls-dots-outside-hover-color`)`$sw-border-color` => `$sw-text-color`
* Components > Image & gallery slider > Image slider (Navigation mode: inside) > Dots (`zen-image-slider-controls-dots-inside-color`)`$sw-border-color` => `$sw-text-color`
* Components > Image & gallery slider > Image slider (Navigation mode: inside) > Dots:hover (`zen-image-slider-controls-dots-inside-hover-color`)`$sw-border-color` => `$sw-text-color`
* Category > Product boxes > Product name > Text:hover (`zen-product-listing-card-name-hover-color`)`$sw-color-brand-secondary` => `$sw-text-color`
* Category > Product boxes > Product number > Text (`zen-product-listing-card-ordernumber-color`)`#999999` => `#767676`

</details>

<details>

<summary>Theme Horizon - Set 1</summary>

* Typo & Colors > Theme colors > Colors > Border (`sw-border-color`)`#e8e7e8` => `#444444`
* Typo & Colors > Status messages > > Success (`sw-color-success`)`#3cc261` => `#007e4e`
* Typo & Colors > Status messages > > Information (`sw-color-info`)`#26b6cf` => `#005b99`
* Typo & Colors > Status messages > > Notice (`sw-color-warning`)`#ffbd5d` => `#9b6a08`
* Typo & Colors > Status messages > > Error (`sw-color-danger`)`#e52427` => `#c20017`
* Typo & Colors > Buttons > Colors > Light button (`zen-color-light-button`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Typo & Colors > Buttons > Colors > Dark button text (`zen-color-dark-button-text`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Components > Forms > Colors > Border:focus (`zen-input-focus-border-color`)`$sw-color-brand-primary` => `lighten($sw-border-color, 35%)`
* Product > Description navigation > Colors > Text (`zen-product-tabs-color`)`lighten($sw-text-color, 70%)` => `lighten($sw-text-color, 45%)`&#x20;

</details>

<details>

<summary>Theme Horizon - Set 2</summary>

* Typo & Colors > Theme colors > Colors > Border (`sw-border-color`)`#dee3e9` => `#7e91a9`
* Typo & Colors > Theme colors > Colors > Link color (`zen-link-color`)`$sw-color-brand-primary` => `darken($sw-color-brand-primary, 5%)`
* Typo & Colors > Status messages > > Success (`sw-color-success`)`#3cc261` => `#007e4e`
* Typo & Colors > Status messages > > Information (`sw-color-info`)`#26b6cf` => `#005b99`
* Typo & Colors > Status messages > > Notice (`sw-color-warning`)`#ffbd5d` => `#9b6a08`
* Typo & Colors > Status messages > > Error (`sw-color-danger`)`#e52427` => `#c20017`
* Typo & Colors > Buttons > Colors > Light button (`zen-color-light-button`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Typo & Colors > Buttons > Colors > Dark button text (`zen-color-dark-button-text`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Components > Forms > Colors > Border (`zen-input-border-color`)`$sw-border-color, 60%)` => `darken($sw-border-color, 35%)`
* Components > Forms > Colors > Border:focus (`zen-input-focus-border-color`)`lighten(desaturate($sw-color-brand-primary, 69%), 60%)` => `darken($sw-border-color, 35%)`
* Components > Pagination > Colors > Background (`zen-pagination-bg`)`lighten($sw-border-color, 5%)` => `$sw-color-brand-primary`

</details>

<details>

<summary>Theme Horizon - Set 3</summary>

* Typo & Colors > Buttons > Colors > Dark button text (`zen-color-dark-button-text`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Header > Main navigation (Categories) > Colors > Text:hover (`zen-main-navigation-hover-color`)`$sw-color-brand-primary` => `$darken($sw-color-brand-primary, 35%)`
* Footer > Columns styling > Newsletter column > Form border (`zen-footer-newsletter-field-border`)`lighten($sw-border-color, 4%)` => `darken($sw-border-color, 33%)`
* Footer > Columns styling > Newsletter column > Form border:focus (`zen-footer-newsletter-field-focus-border`)`$sw-border-color` => `$sw-text-color`
* Components > Forms > Colors > Background:focus (`zen-input-focus-bg`)`#ffffff` => `lighten($sw-border-color, 4%)`
* Components > Forms > Colors > Border (`zen-input-border-color`)`$sw-border-color` => `darken($sw-border-color, 33%)`

</details>

<details>

<summary>Theme Sphere - Set 1</summary>

* Typo & Colors > Theme colors > Colors > Secondary color (`sw-color-brand-secondary`)`#c5ab7e` => `#856b40`
* Typo & Colors > Theme colors > Colors > Border (`sw-border-color`)`#CED4D9` => `#7f8e97`
* Typo & Colors > Theme colors > Colors > Link color (`zen-link-color`)`$sw-color-brand-primary` => `$sw-color-brand-secondary`
* Typo & Colors > Status messages > > Success (`sw-color-success`)`#3cc261` => `#007e4e`
* Typo & Colors > Status messages > > Information (`sw-color-info`)`#26b6cf` => `#005b99`
* Typo & Colors > Status messages > > Notice (`sw-color-warning`)`#ffbd5d` => `#9b6a08`
* Typo & Colors > Status messages > > Error (`sw-color-danger`)`#e52427` => `#c20017`
* Typo & Colors > Typography > Colors > Dark text color (`sw-text-color`)`#777777` => `#6f6f6f`
* Typo & Colors > Buttons > Colors > Light button (`zen-color-light-button`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Typo & Colors > Buttons > Colors > Dark button text (`zen-color-dark-button-text`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Header > Top bar > Colors > Text:hover (`zen-top-bar-hover-color`)`$sw-color-brand-secondary` => `lighten($sw-color-brand-secondary, 15%)`
* Header > Flyout navigation > Colors > Background (`zen-flyout-navigation-bg`)`rgba($sw-color-brand-primary, 90%)` => `rgba($sw-color-brand-primary, 95%)`
* Header > Flyout navigation > Colors > Text:hover (`zen-flyout-navigation-hover-color`)`$sw-color-brand-secondary` => `#ffffff`
* Footer > Footer > Colors > Text:hover (`zen-footer-hover-color`)`$sw-color-brand-secondary` => `lighten($sw-color-brand-secondary, 15%)`
* Footer > Columns styling > Newsletter column > Form border (`zen-footer-newsletter-field-border`)`$sw-color-brand-secondary` => `lighten($sw-color-brand-primary, 50%)`
* Footer > Columns styling > Newsletter column > Form border:focus (`zen-footer-newsletter-field-focus-border`)`$sw-color-brand-primary` => `#ffffff`
* Footer > Columns styling > Custom column 1 > Text:hover (`zen-footer-custom-column-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-secondary, 15%)`
* Footer > Columns styling > Custom column 2 > Text:hover (`zen-footer-custom-2-column-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-secondary, 15%)`
* Footer > Columns styling > Custom column 3 > Text:hover (`zen-footer-custom-3-column-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-secondary, 15%)`
* Footer > Columns styling > Payment methods column > Text:hover (`zen-footer-payment-logos-column-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-secondary, 15%)`
* Footer > Columns styling > Shipping methods column > Text:hover (`zen-footer-shipping-logos-column-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-secondary, 15%)`
* Footer > Footer bottom > Colors > Text:hover (`zen-footer-bottom-hover-color`)`$sw-color-brand-secondary` => `lighten($sw-color-brand-secondary, 15%)`
* Components > Sidebar navigation > Colors > Background (`zen-sidebar-navigation-bg`)`transparent` => `#ffffff`
* Components > Sidebar navigation > Colors > Background:hover (`zen-sidebar-navigation-hover-bg`)`#ffffff` => `$sw-color-brand-primary`
* Components > Sidebar navigation > Colors > Text:hover (`zen-sidebar-navigation-hover-color`)`$sw-color-brand-secondary` => `#ffffff`
* Components > Sidebar navigation > Colors > Background:active path (`zen-sidebar-navigation-active-bg`)`#ffffff` => `lighten($sw-color-brand-primary, 15%)`
* Components > Sidebar navigation > Colors > Text:active path (`zen-sidebar-navigation-active-color`)`$sw-headline-color` => `#ffffff`
* Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation background (`zen-base-slider-controls-inside-bg`)`transparent` => `$sw-color-brand-primary`
* Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation background:hover (`zen-base-slider-controls-inside-hover-bg`)`transparent` => `$sw-color-brand-secondary`
* Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation color (`zen-base-slider-controls-inside-color`)`$sw-border-color` => `#ffffff`
* Components > Image & gallery slider > Gallery slider (Navigation mode: inside) > Arrow navigation color:hover (`zen-base-slider-controls-inside-hover-color`)`$sw-color-brand-secondary` => `#ffffff`
* Components > Pagination > Colors > Background:hover (`zen-pagination-hover-bg`)`hsl(hue($sw-border-color), saturation($sw-border-color), 93%)` => `lighten($sw-color-brand-primary, 10%)`
* Components > Pagination > Colors > Text:hover (`zen-pagination-hover-color`)`darken($sw-color-brand-primary, 15%)` => `#ffffff`
* Category > Filter > Colors > Background:hover (`zen-category-filter-hover-bg`)`#ebedef` => `#ffffff`
* Category > Filter > Colors > Text:hover (`zen-category-filter-hover-color`)`$sw-text-color` => `$sw-color-brand-secondary`
* Category > Product boxes > Product description > Text (`zen-product-listing-card-description-color`)`lighten($sw-text-color, 10%)` => `$sw-text-color`

</details>

<details>

<summary>Theme Sphere - Set 2</summary>

* Typo & Colors > Status messages > > Success (`sw-color-success`)`#3cc261` => `#007e4e`
* Typo & Colors > Status messages > > Information (`sw-color-info`)`#26b6cf` => `#005b99`
* Typo & Colors > Status messages > > Notice (`sw-color-warning`)`#F2CB05` => `#9b6a08`
* Typo & Colors > Status messages > > Error (`sw-color-danger`)`#EA003A` => `#ea003a`
* Typo & Colors > Buttons > Colors > Dark button text (`zen-color-dark-button-text`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Footer > Columns styling > Newsletter column > Form border:focus (`zen-footer-newsletter-field-focus-border`)`darken($sw-color-brand-primary, 10%)` => `$sw-color-brand-secondary`
* Components > Forms > Colors > Border (`zen-input-border-color`)`lighten($sw-border-color, 5%)` => `darken($sw-border-color, 30%)`

</details>

<details>

<summary>Theme Stratus - Set 1</summary>

* Typo & Colors > Theme colors > Basic configuration > Contrast threshold (`zen-min-contrast-ratio`)`3` => `4.5`
* Typo & Colors > Theme colors > Colors > Primary color (`sw-color-brand-primary`)`#F46036` => `#d1380d`
* Typo & Colors > Theme colors > Colors > Border (`sw-border-color`)`#e8e7e8` => `#958c95`
* Typo & Colors > Status messages > > Success (`sw-color-success`)`#3cc261` => `#007e4e`
* Typo & Colors > Status messages > > Information (`sw-color-info`)`#26b6cf` => `#005b99`
* Typo & Colors > Status messages > > Notice (`sw-color-warning`)`#ffbd5d` => `#9b6a08`
* Typo & Colors > Status messages > > Error (`sw-color-danger`)`#e52427` => `#c20017`
* Typo & Colors > Buttons > Colors > Light button (`zen-color-light-button`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Typo & Colors > Buttons > Colors > Dark button text (`zen-color-dark-button-text`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Header > Header > Checkout minimal header > Border bottom (`zen-header-minimal-border-bottom`)`True` => `False`
* Header > Top bar > Colors > Background:hover (`zen-top-bar-hover-bg`)`$sw-brand-color-secondary` => `#ffffff`
* Footer > Columns styling > Newsletter column > Background (`zen-footer-newsletter-column-bg`)`darken($sw-color-brand-secondary, 10%)` => `#212121`
* Components > Sidebar navigation > Colors > Background:hover (`zen-sidebar-navigation-hover-bg`)`darken($sw-color-brand-primary, 5%)` => `darken($sw-border-color, 55%)`
* Components > Sidebar navigation > Colors > Background:active path (`zen-sidebar-navigation-active-bg`)`$sw-color-brand-primary` => `darken($sw-border-color, 45%)`
* Components > Forms > Colors > Border (`zen-input-border-color`)`$sw-border-color` => `darken($sw-border-color, 35%)`

</details>

<details>

<summary>Theme Stratus - Set 2</summary>

* Typo & Colors > Theme colors > Basic configuration > Contrast threshold (`zen-min-contrast-ratio`)`3` => `4.5`
* Typo & Colors > Theme colors > Colors > Primary color (`sw-color-brand-primary`)`#FF463D` => `#e4281f`
* Typo & Colors > Status messages > > Success (`sw-color-success`)`#3cc261` => `#007e4e`
* Typo & Colors > Status messages > > Information (`sw-color-info`)`#26b6cf` => `#005b99`
* Typo & Colors > Status messages > > Notice (`sw-color-warning`)`#ffbd5d` => `#9b6a08`
* Typo & Colors > Status messages > > Error (`sw-color-danger`)`#e52427` => `#c20017`
* Typo & Colors > Typography > Colors > Dark text color (`sw-text-color`)`#6d6d6d` => `#4a4a4a`
* Typo & Colors > Buttons > Colors > Light button (`zen-color-light-button`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Typo & Colors > Buttons > Colors > Dark button text (`zen-color-dark-button-text`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Header > Search > Colors > Border (`zen-search-border`)`darken($sw-color-brand-secondary, 10%)` => `$sw-border-color`
* Header > Top bar > Colors > Text:hover (`zen-top-bar-hover-color`)`$sw-text-color` => `#ffffff`
* Header > Shop navigation (Search, Wishlist, Account, Cart) > Colors > Text:hover (`zen-shop-navigation-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 12%)`
* Header > Shop navigation (Search, Wishlist, Account, Cart) > Cart > Text:hover (`zen-shop-navigation-cart-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 12%)`
* Footer > Footer > Colors > Text:hover (`zen-footer-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 12%)`
* Footer > Columns styling > Hotline Column > Text:hover (`zen-footer-hotline-column-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 12%)`
* Footer > Columns styling > Social media column > Text:hover (`zen-footer-social-column-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 12%)`
* Footer > Columns styling > Custom column 1 > Text:hover (`zen-footer-custom-column-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 12%)`
* Footer > Columns styling > Custom column 2 > Text:hover (`zen-footer-custom-2-column-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 12%)`
* Footer > Columns styling > Custom column 3 > Text:hover (`zen-footer-custom-3-column-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 12%)`
* Footer > Columns styling > Payment methods column > Text:hover (`zen-footer-payment-logos-column-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 12%)`
* Footer > Columns styling > Shipping methods column > Text:hover (`zen-footer-shipping-logos-column-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 12%)`
* Footer > Footer bottom > Colors > Text:hover (`zen-footer-bottom-hover-color`)`darken($sw-color-brand-primary, 10%)` => `#ffffff`
* Components > Forms > Colors > Border (`zen-input-border-color`)`$sw-border-color` => `darken($sw-border-color, 33%)`

</details>

<details>

<summary>Theme Stratus - Set 3</summary>

* Typo & Colors > Theme colors > Colors > Primary color (`sw-color-brand-primary`)`#a99186` => `#8f7062`
* Typo & Colors > Theme colors > Basic configuration > Contrast threshold (`zen-min-contrast-ratio`)`2.5` => `4.5`
* Typo & Colors > Theme colors > Colors > Border (`sw-border-color`)`#e8e7e8` => `#989398`
* Typo & Colors > Status messages > > Success (`sw-color-success`)`#3cc261` => `#007e4e`
* Typo & Colors > Status messages > > Information (`sw-color-info`)`#26b6cf` => `#005b99`
* Typo & Colors > Status messages > > Notice (`sw-color-warning`)`#ffbd5d` => `#9b6a08`
* Typo & Colors > Status messages > > Error (`sw-color-danger`)`#e52427` => `#c20017`
* Typo & Colors > Buttons > Colors > Light button (`zen-color-light-button`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Typo & Colors > Buttons > Colors > Dark button text (`zen-color-dark-button-text`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Header > Shop navigation (Search, Wishlist, Account, Cart) > Colors > Background (`zen-shop-navigation-bg`)`$sw-color-brand-secondary` => `$sw-color-brand-primary`
* Header > Shop navigation (Search, Wishlist, Account, Cart) > Colors > Background:hover (`zen-shop-navigation-hover-bg`)`$sw-color-brand-primary` => `darken($sw-color-brand-primary, 5%)`
* Header > Flyout navigation > Colors > Background (`zen-flyout-navigation-bg`)`rgba($sw-color-brand-secondary, 90%)` => `rgba($sw-color-brand-secondary, 95%)`
* Header > Flyout navigation > Colors > Text:hover (`zen-flyout-navigation-hover-color`)`$sw-color-brand-primary` => `$zen-light-text-color`
* Footer > Columns styling > Hotline Column > Text:hover (`zen-footer-hotline-column-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 15%)`
* Footer > Columns styling > Social media column > Text:hover (`zen-footer-social-column-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 15%)`
* Footer > Columns styling > Newsletter column > Form border (`zen-footer-newsletter-field-border`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 15%)`
* Footer > Columns styling > Custom column 1 > Text:hover (`zen-footer-custom-column-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 15%)`
* Footer > Columns styling > Custom column 2 > Text:hover (`zen-footer-custom-2-column-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 15%)`
* Footer > Columns styling > Custom column 3 > Text:hover (`zen-footer-custom-3-column-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 15%)`
* Footer > Columns styling > Payment methods column > Text:hover (`zen-footer-payment-logos-column-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 15%)`
* Footer > Columns styling > Shipping methods column > Text:hover (`zen-footer-shipping-logos-column-hover-color`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 15%)`
* Footer > Footer bottom > Colors > Text:hover (`zen-footer-bottom-hover-color`)`darken($sw-color-brand-primary, 10%)` => `lighten($sw-color-brand-primary, 15%)`
* Category > Product boxes > Product description > Text (`zen-product-listing-card-description-color`)`lighten($sw-color-price, 20%)` => `$sw-text-color`
* Product > Description navigation > Colors > \[!] Background / border:hover (`zen-product-tabs-hover-bg`)`$sw-color-brand-primary` => `darken($sw-color-brand-primary, 50%)`

</details>

<details>

<summary>Theme Stratus - Set 4</summary>

* Typo & Colors > Theme colors > Basic configuration > Contrast threshold (`zen-min-contrast-ratio`)`2.5` => `4.5`
* Typo & Colors > Theme colors > Colors > Primary color (`sw-color-brand-primary`)`#909986` => `#67705d`
* Typo & Colors > Status messages > > Success (`sw-color-success`)`#3cc261` => `#007e4e`
* Typo & Colors > Status messages > > Information (`sw-color-info`)`#26b6cf` => `#005b99`
* Typo & Colors > Status messages > > Notice (`sw-color-warning`)`#ffbd5d` => `#9b6a08`
* Typo & Colors > Status messages > > Error (`sw-color-danger`)`#e52427` => `#c20017`
* Typo & Colors > Typography > Colors > Dark text color (`sw-text-color`)`#6d6d6d` => `#4a4a4a`
* Typo & Colors > Typography > Colors > Dark headline color (`sw-headline-color`)`#bab4ab` => `$sw-color-brand-secondary`
* Typo & Colors > Buttons > Colors > Light button (`zen-color-light-button`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Typo & Colors > Buttons > Colors > Dark button text (`zen-color-dark-button-text`)`hsl(hue($sw-border-color), saturation($sw-border-color), 98%)` => `hsl(hue($sw-border-color), saturation($sw-border-color), 94%)`
* Header > Search > Colors > Border (`zen-search-border`)`$sw-border-color` => `darken($sw-border-color, 30%)`
* Header > Search > Colors > \[!] Border:focus (`zen-search-focus-border`)`$sw-border-color` => `darken($sw-border-color, 30%)`
* Header > Flyout navigation > Colors > Background (`zen-flyout-navigation-bg`)`rgba($sw-color-brand-primary, 90%)` => `rgba(darken($sw-color-brand-primary, 5%), 90%)`
* Header > Flyout navigation > Colors > Text:hover (`zen-flyout-navigation-hover-color`)`$sw-color-brand-secondary` => `#ffffff`
* Footer > Footer > Colors > Text:hover (`zen-footer-hover-color`)`$sw-color-brand-primary` => `#ffffff`
* Footer > Columns styling > Hotline Column > Text:hover (`zen-footer-hotline-column-hover-color`)`$sw-color-brand-primary` => `#ffffff`
* Footer > Columns styling > Social media column > Text:hover (`zen-footer-social-column-hover-color`)`$sw-color-brand-primary` => `#ffffff`
* Footer > Columns styling > Newsletter column > Form border (`zen-footer-newsletter-field-border`)`$sw-color-brand-primary` => `lighten($sw-color-brand-primary, 17%)`
* Footer > Columns styling > Custom column 1 > Text:hover (`zen-footer-custom-column-hover-color`)`$sw-color-brand-primary` => `#ffffff`
* Components > Forms > Colors > Border (`zen-input-border-color`)`#f2efeb` => `darken($sw-border-color, 33%)`
* Category > Product boxes > Product description > Text (`zen-product-listing-card-description-color`)`lighten($sw-color-price, 20%)` => `$sw-text-color`

</details>

👉 Detailed information about accessibility in our theme can be found in our [accessibility article](/en/faq/accessibility.md).

***

### Removed Theme Variables

As part of accessibility enhancements, the following theme variables have been removed:

* `zen-checkout-confirm-payment-shipping-description-length`\
  Defines how many characters are shown in the payment/shipping descriptions.
* `zen-checkout-confirm-visible-payment-methods-limit`\
  Defines how many payment methods are visible. Others are accessible via “Show more”.
* `zen-checkout-confirm-visible-shipping-methods-limit`\
  Defines how many shipping methods are visible. Others are accessible via “Show more”.

More:\
\
The configuration for Dropdown Trigger `zen-dropdown-navigation-trigger` has been removed as it is no longer used in the new header setup.

***

### ESI for Header and Footer

Shopware 6.7 introduced **ESI (Edge Side Includes)** for the header and footer. This change means that your shop’s header and footer now **load faster and are cached more efficiently**. These areas have been completely refactored:

* Header redesign (Storefront - Header/Navbar Refactoring)
* Footer redesign (Storefront - Footer Refactoring)

More info in the official shopware upgrade guide: [Link to docs](https://github.com/shopware/shopware/blob/trunk/UPGRADE-6.7.md#introduction-of-esi-for-header-and-footer)

***

### General note on child themes

If you're using a child theme, it is your responsibility to review and adapt your individual code.

📘 Official Shopware Upgrade Guide:\
<https://github.com/shopware/shopware/blob/trunk/UPGRADE-6.7.md>