Develop

Technical documentation for integrating Jolu Design System into your projects.

terminal

Project structure

jolu-design/
├── css/
│   ├── tokens.css          # Design tokens
│   ├── components.css      # Component styles
│   └── docs.css            # Documentation layout
├── js/
│   └── main.js             # Interactions
├── pages/                  # Sub-pages
├── index.html              # Homepage
└── server.js               # Dev server

Tokens API

All tokens follow the M3 naming convention: --md-{level}-{category}-{property}.

Level	Prefix	Example
Reference	--md-ref-	--md-ref-palette-primary40
System	--md-sys-	--md-sys-color-primary
Component	--md-comp-	--md-comp-filled-button-*

Theming guide

Override reference-level tokens to change the entire scheme at once. System-level tokens automatically re-derive.

/* Custom Blue theme */
:root {
  --md-ref-palette-primary40: #1a5fc6;
  --md-ref-palette-primary80: #b0c6ff;
  --md-ref-palette-primary90: #d9e2ff;
  /* dark theme automatically reads these via var() */
}

/* Override individual system tokens */
:root {
  --md-sys-color-surface: #fafafa;
}

Component API

Components use BEM-style class naming: .md-{component}--{modifier}.

Component	Base class	Modifiers
Button	.md-button	--filled, --tonal, --elevated, --outlined, --text
Card	.md-card	--elevated, --filled, --outlined
Chip	.md-chip	--selected
FAB	.md-fab	--small, --large, --extended
Switch	.md-switch	(checkbox-driven)
Text field	.md-text-field	--outlined
Icon button	.md-icon-button	--filled, --tonal

Dark mode

// Toggle dark mode
const toggle = () => {
  const isDark = document.documentElement
    .getAttribute('data-theme') === 'dark';
  document.documentElement
    .setAttribute('data-theme', isDark ? 'light' : 'dark');
};