// CSS styles, color themes, and visual conventions for docs.cloudposse.com. Use when styling components, mermaid diagrams, or working with site theming.
Use when creating new Terraform/OpenTofu components or modifying existing ones. Covers required files, catalog defaults, stack configuration, and naming conventions.
Use when authenticating with AWS via Atmos. Covers ATMOS_PROFILE setup, SSO login, and how Atmos automatically assumes the correct identity per stack. Use for authentication setup, SSO login issues, and permission errors.
Use when deploying components via Atmos stacks, configuring stack YAML, or understanding inheritance patterns. Covers catalog defaults, abstract components, stack imports, and how to wire components into target stacks.
Building, rendering library docs, and deploying docs.cloudposse.com. Use when working with the Docusaurus build process or regenerating auto-generated content.
Writing standards, React components, and MDX patterns for docs.cloudposse.com. Use when creating or editing documentation content.
Use when fixing legacy account-map component references or creating new components. Covers migration from dynamic account-map lookups to static account_map variable. Use when you see account-map remote-state references or need to set up provider configuration for a new component.
| name | docs-styles |
| description | CSS styles, color themes, and visual conventions for docs.cloudposse.com. Use when styling components, mermaid diagrams, or working with site theming. |
CSS styles and color conventions for docs.cloudposse.com.
Defined in src/css/custom.css:
| Variable | Light | Dark | Usage |
|---|---|---|---|
--ifm-color-primary | #3578e5 | #3578e5 | Primary blue, links, buttons |
--ifm-color-primary-dark | #306cce | #306cce | Hover states |
--ifm-color-primary-darkest | #2554a0 | #2554a0 | Active states |
--ifm-background-color | default | #030711 | Page background |
Defined in src/css/mermaid.css:
| Variable | Hex | Usage |
|---|---|---|
--mermaid-primary | #3578e5 | Primary elements, read-only access |
--mermaid-primary-dark | #2554a0 | Darker blue variant |
--mermaid-secondary | #6c757d | Gray, neutral elements |
--mermaid-success | #28a745 | Green, write/apply access |
--mermaid-danger | #dc3545 | Red, destructive/admin |
--mermaid-warning | #e67e22 | Orange, caution/IdP |
--mermaid-info | #17a2b8 | Teal, informational |
--mermaid-user | #9b59b6 | Purple, user/identity |
--mermaid-account | #2c3e50 | Dark slate, AWS accounts |
Mermaid doesn't support CSS variables directly. Use hex values with style:
flowchart LR
user["User"] --> service["Service"]
style user fill:#9b59b6,color:#fff
style service fill:#3578e5,color:#fff
| Color | Meaning | Example Usage |
|---|---|---|
Blue (#3578e5) | Read-only, plan, info | TerraformPlanAccess |
Green (#28a745) | Write, apply, success | TerraformApplyAccess |
Orange (#e67e22) | Identity, IdP, warning | Identity Center |
Purple (#9b59b6) | User, human identity | User nodes |
Dark slate (#2c3e50) | AWS accounts, infrastructure | Account nodes |
Red (#dc3545) | Destructive, admin, danger | RootAccess |
| File | Purpose |
|---|---|
src/css/custom.css | Global styles, Infima overrides |
src/css/mermaid.css | Mermaid diagram styling |
src/css/admonitions.css | Admonition/callout styling |
src/css/sidebar.css | Navigation sidebar |
src/css/navbar.css | Top navigation |
src/css/footer.css | Footer styling |
Use [data-theme='dark'] or html[data-theme='dark'] selectors:
[data-theme='dark'] .my-element {
background: #21262d;
color: #fff;
}
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:
import clsx from 'clsx';
import styles from './index.module.css';
<div className={clsx(styles.container, isActive && styles.active)} />