> ## Documentation Index
> Fetch the complete documentation index at: https://helloluciallc.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Historical Obsidian Snippet Guide

<Warning>
  Historical Obsidian-era styling reference. It is retained for migration history,
  not as current authoring or publication instruction. Current public styling is
  owned by `style.css` in this repository and published through Mintlify.
</Warning>

***

## Important

Do not replace:

```text theme={"dark"}
.obsidian/
```

That folder controls:

```text theme={"dark"}
theme
snippets
plugins
workspace behavior
publish configuration
```

***

## Primary CSS Class

Most Canon notes use:

```yaml theme={"dark"}
cssclasses:
  - lucia-note
```

***

## Active Snippets

```text theme={"dark"}
.obsidian/snippets/Lucia Canon - Primary Friendly.css
.obsidian/snippets/color-swatches.css
```

`Lucia Canon - Primary Friendly.css` controls the overall Canon styling.

`color-swatches.css` controls reusable visual color swatches for brand/color notes.

***

## Color Swatch Markup

Use this pattern inside Markdown notes when a color needs to be displayed visually:

```html theme={"dark"}
<span class="color-swatch" style="--swatch:#FFD100;"></span> <span class="color-hex">&#35;FFD100</span>
```

Use this labeled-row pattern when documenting palettes:

```html theme={"dark"}
<div class="color-family-row"><span class="color-swatch" style="--swatch:#FFD100;"></span> <span class="color-hex">&#35;FFD100</span> <span class="color-name">Lucia Yellow</span></div>
```

***

## Publish CSS Rule

The color-swatch CSS is also mirrored into:

```text theme={"dark"}
publish.css
```

This keeps the swatches rendering correctly on Obsidian Publish, not just inside the local vault.

***

## Maintenance Rule

New Canon files should preserve:

```yaml theme={"dark"}
cssclasses:
  - lucia-note
```

unless a specific different presentation is required.
