Theme.json V3 - Spacing Naming Convention - Githubissues

lightspeedwp / lsx-design

A WordPress Block theme designed to work seamlessly with WooCommerce, supported by a Figma Design System.

https://lsx.design

GNU General Public License v3.0

26 stars 0 forks source link

Theme.json V3 - Spacing Naming Convention #154

Open krugazul opened 3 months ago

krugazul commented 3 months ago

Description

Currently we are using a custom set of values for our spacing, we need to change this to use the same slugs as WordPress

Tasks

[ ] Change the slugs in the theme.json to match the WordPress values.
[ ] Run a search and replace on the theme for each spacing size
[ ] X-Small
[ ] Small
[ ] Medium
[ ] Large
[ ] X-Large

NB we will not utilise the 2X-Small, or 2X-Large.

WordPress Spacing

2X-Small --wp--preset--spacing--20: 0.44rem;
X-Small --wp--preset--spacing--30: 0.67rem;
Small --wp--preset--spacing--40: 1rem;
Medium --wp--preset--spacing--50: 1.5rem;
Large --wp--preset--spacing--60: 2.25rem;
X-Large --wp--preset--spacing--70: 3.38rem;
2X-Large --wp--preset--spacing--80: 5.06rem;

LightSpeed Spacing

xSmall --wp--preset--spacing--x-small: 20px;
Small --wp--preset--spacing--small: clamp(20px, 4vw, 40px);
Medium --wp--preset--spacing--medium: clamp(30px, 6vw, 60px);
Large --wp--preset--spacing--large: clamp(40px, 8vw, 80px);
xLarge --wp--preset--spacing--x-large: clamp(50px, 10vw, 100px);
Huge
Gigantic

Additional Content

Find --wp--preset--spacing--small in all CSS and SCSS files in LSX and replace with --wp--preset--spacing--30