While component style sheets are used to style elements in isolation, a theme style sheet is used to style the document (using a container), while also providing global at-rules like font faces or keyframes.
createThemeStyles() method to create a theme style sheet. This style sheet can then be
passed on a theme-by-theme basis during registration with
registerDefaultTheme(). Feel free to add a style sheet to one or many themes.
A container is used to provide "global" styles (fonts, colors, etc) to a specific portion of a component/element tree by acting as the root. Styles are scoped to a class name to avoid collisions, so they're not truely global, but are applied in 1 of 2 ways:
- Document wide through the
<body>element. Automatically applied when activating a theme.
- Per element through a
<div>element. Manually applied when using nested/contextual themes.
Container styles can be defined with the
@root at-rule, which accepts standard style objects (as
if you're styling a component). It pairs well with the
root mixin, which provides fluid
*global styles cannot be defined with
@root. Those category of globals should be handled outside of this system.
Defines a font face that can be
referenced with the
fontFamily property. The at-rule requires an object, with the font family name
as the key, and the font face(s) as the value. Each font face requires a
To support multiple font variations, like bold and italics, pass an array of font faces.
Font faces defined within a theme style sheet can be accessed within a component style sheet by referencing their name, like so.
Do note that font family names must be globally unique to avoid collisions.
Defines a keyframes animation that
can be referenced with the
animationName property. The at-rule requires an object, with the
animation name as the key, and the keyframes as the value. Supports both range (from/to) and
percentage based sequences.
Keyframes defined within a theme style sheet can be accessed within a component style sheet by referencing their name, like so.
Do note that keyframe names must be globally unique to avoid collisions.
Defines one or many CSS files to import,
relative to the document root. An import can either be a proper CSS formatted string (including
quotes), or an object of
url property is not defined, or is
false, the import path will not be wrapped with
The structure of this style sheet is based on types provided by the @aesthetic/sss package.