Styles within Aesthetic are managed through style sheets and are divided into the following 2 categories.
- Element and component style sheets. Isolates styles to components and their elements.
- Theme style sheets. Provides styles and at-rules for the document.
Style sheets are created with either the
createThemeStyles() methods respectively. All methods require a function that returns a style
object (also known as a factory function).
A few design token based utility methods are passed to the 1st argument within the style sheet
factory function. We like to name this object
css, as demonstrated within the examples below.
Variables are consistent and reusable values that are derived from settings within a design system's
language and themes. A variable can be accessed with the
var(name: string) method, which requires
a fully qualified name based on the token object structure.
Let's now update our example to not use hard-coded padding values, while also using expanded properties.
Variables utilize CSS variables under the hood for dynamic styling and reduced output size.
Mixins also provide reusability, but instead of providing a single value, they provide a collection
of pre-styled CSS properties that can be merged into your own style objects via the
mixin(name: string, styles?: object) method.
Continuing our example even further, let's easily reset our button. You'll notice that we removed most of the properties. That's because they are provided by the mixin and we no longer have to define them manually!
If you ever need a
rem unit based on the design system's spacing type, use the
unit(...sizes: number) method, which requires any number of multipliers.
Let's say our root text size is 16px and our spacing unit is 8px, we would generate the following
Using explicit units is frowned upon as it deviates from the design system's strict spacing guidelines. It also increases the CSS output size as it generates additional class names. Use sparingly.