Design systems
I will show you a series of useful techniques to start programming your design systems with Atomico, analyzing the recommended structure and its files.
Recommended structure
We will analyze the above.
src/components.js
File that imports, exports and declares all the components of our design system, example:
the utilities of this are to centralize everything in components.js are:
Clarity of the definition of customElements in a single file for our entire design system
Export of all customElements to be extended or redefined.
src/tokens.js
File that centralizes the custom-properties of our design system, example:
From the example above I highlight the custom property declaration pattern
--background
will be a token that can be modified at the instance level and this inherits a global token from our system called --my-ds-input--background
, I want you to notice that the global name of our custom property has a pattern, example:
Where:
prefix: Prefix of our global design system
namespace: group independent of our design system
property: property associated with the system, such as color, size, or other value.
Why use the recommended pattern? To individualize the configuration at the group level and separate the property definition from it thanks to the use of double hyphens (--), internally everything is simplified since the tokens only capture the global configuration global to reflect it to a simpler variable accessible only from the component instance level.
Instance level
It is the instance of the component either in HTML or JS, example:
src/button.js
From the previous code I highlight:
import of
"../tokens"
and the destructuring of the module that declares the use oftokensColor
andtokensInput
.button.styles: Atomico allows to associate multiple styles through the use of an array.
Button export.
Last updated
Was this helpful?