Start with tokens
Fractalsvelte reads its shared colors from CSS custom properties. Override them under :root to theme the whole application, or under a parent class to theme one region.
:root
--color00: #FFFFFF
--color10: #F5F5F5
--color100: #111111
--accent10: #388E3C
--accent20: #1B5E20
--text-primary: var(--color100)
--text-secondary: var(--color60)
--border-primary: var(--color30)
The most frequently used tokens are:
| Token | Purpose |
|---|---|
--color00 to --color100 | Neutral surface and text scale |
--accent10, --accent20, --accent30 | Primary interactive colour scale |
--danger10, --danger20 | Destructive or error states |
--text-primary, --text-secondary, --text-tertiary | Text hierarchy |
--border-primary, --border-secondary, --border-tertiary | Borders and dividers |
--font-default | Shared font family |
Scope a theme
Tokens inherit, so a class can provide a dark or branded surface without changing the rest of the application.
.theme-dark
--color00: #111111
--color10: #1D1D1D
--color100: #F5F5F5
--text-primary: var(--color100)
--text-secondary: var(--color50)
--border-primary: var(--color70)
<section class="theme-dark pad32">
<!-- Components inside inherit these tokens. -->
</section>
Use the provided primitives
The global SASS entry point provides structural primitives such as box, row, and grid, alongside button and typography classes. Keep layout concerns in markup and use component-scoped SASS for a component’s unique visual behavior.
<div class="box gap16">
<div class="row xbetween ycenter gap8">
<h2>Profile</h2>
<button class="btn btn-secondary">Edit</button>
</div>
</div>
Generated spacing and sizing utilities
With fractals-styler configured, numeric utilities are generated from your source at build time:
| Class | Effect |
|---|---|
gap16 | gap: 16px |
pad32 | padding: 32px |
marginbot16 | margin-bottom: 16px |
width128 | width: 128px |
Breakpoint suffixes such as pad16-sm and text-lg-xs are available for the Styler’s own utilities. Use the SASS breakpoint mixins for custom selectors.
Keep component overrides local
Components use scoped <style lang="sass"> blocks. Prefer an application-level wrapper class and token overrides before targeting a component’s internal markup. This keeps upgrades and composition predictable.