Add Theming's global tokens

[sergiofontes]

What's the purpose of this pull request?

This PR sets the stage for the upcoming Theming structure by gathering all CSS variables (tokens) into a single source of truth, applying a coherent naming scheme, and simplifying the global styles.

How does it work?

Theming concept

This themeable structure is made of two complementary layers: a useful and assorted library of templates for the components and sections, alongside a comprehensive set of design tokens to further customize them.

Templates, the first layer, has foundational styles that lay things out in common design patterns for different use cases. It also covers a component's fundamental interactions, like showing/hiding a dropdown or moving a toggle’s knob to make it active.

The second, Theme, is where the branding lives and what truly differentiates one UI from another. Graphic elements—like typography (and type scale), colors, imagery, borders, spacing, & more—are controlled by design tokens that a developer can easily tweak to create a unique look and feel.

Additional styles can be added to overwrite what was set in the Structure and/or Theme, reaching a state of total flexibility and freedom. Lastly, the developer can throw away all existing FastStore CSS altogether and build it from scratch.

Theming architecture

Starting from the bottom up, we have the components: fully-featured UI blocks that belong to a larger whole system. The components have their own CSS that defines their overall appearance and how things are arranged; these scoped stylesheets are the Templates. The Templates' visual properties are tied to local variables—design tokens—that draw the final picture of the component; these local, scoped variables, on the other hand, are tied to global tokens, which form the Theme.

Design tokens naming scheme

All design tokens must follow a strict scheme to achieve predictability and cohesiveness. The tokens parts must tell:

• Where this token is coming from (is it a global or a component's local part);
• Their semantic meaning;
• What property type it affects;
• Which category of this type is going to be affected;
• Their interactive state.

Theme (or global design tokens)

Global design tokens are parameters that affect all UI look 'n' feel. They are the main configuration file of a Theme. It's constituted of three main groups:

1. Branding Core
2. UI Essentials
3. Refinements

How to test it?

Basically, everything should look just like it was prior to this effort. This PR only adds this novel structure alongside a new set of design tokens. We must assess the visual integrity of the Base Store to consider this PR able to merge.

Checklist

• Add CHANGELOG entry
• Check the visual integrity of all components and pages
• Review new tokens naming scheme

[netlify]

✅ Deploy Preview for basestore ready!

Name	Link
🔨 Latest commit	75cc992
🔍 Latest deploy log	https://app.netlify.com/sites/basestore/deploys/623ca432780714000991963d
😎 Deploy Preview	https://deploy-preview-407--basestore.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.