Documentation Styles

CSS styles and color conventions for docs.cloudposse.com.

Color Palette

Site Primary Colors

Defined in src/css/custom.css:

Mermaid Diagram Colors

Defined in src/css/mermaid.css:

Using Colors in Mermaid Diagrams

Mermaid doesn't support CSS variables directly. Use hex values with style:

mermaid
1flowchart LR
2    user["User"] --> service["Service"]
3
4    style user fill:#9b59b6,color:#fff
5    style service fill:#3578e5,color:#fff

Semantic Color Meanings

CSS File Locations

Dark Mode

Use [data-theme='dark'] or html[data-theme='dark'] selectors:

css
1[data-theme='dark'] .my-element {
2    background: #21262d;
3    color: #fff;
4}

Component Styling

React components have co-located CSS modules:

src/components/
├── Steps/
│   ├── index.js
│   └── index.module.css
├── ActionCard/
│   ├── index.js
│   └── index.module.css

Use clsx for conditional class names:

jsx
1import clsx from 'clsx';
2import styles from './index.module.css';
3
4<div className={clsx(styles.container, isActive && styles.active)} />