Style sheets
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 createElementStyles()
, createComponentStyles()
, or
createThemeStyles()
methods respectively. All methods require a function that returns a style
object (also known as a factory function).
#
UtilitiesManually writing style objects over and over can be tiresome, especially when you need to reuse consistent values (font sizes, spacing, etc) across many components. Aesthetic solves this through its robust design system, which is a hard requirement as it powers all reusability. To make use of this, the design system must be compiled into JavaScript/TypeScript based design tokens.
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.
#
VariablesVariables 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.
#
MixinsMixins 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!
#
UnitsIf 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
rem
values.
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.