MacroThemes
[[Themes]]는 현재 AhaWiki 테마 팔레트를 미리보기 카드와 토큰 표로 보여준다.
CSS custom properties를 추가하거나 바꿀 때 Light/Dark 값을 한 화면에서 점검하기 위한 개발용 매크로다.
1. Usage
[[Themes]]
2. Output
AhaWiki Light
Body text sample with link text.
code sampleBody contrast 21.0:1
AhaWiki Dark
Body text sample with link text.
code sampleBody contrast 15.4:1
| Token | Usage | AhaWiki Light | AhaWiki Dark |
|---|---|---|---|
| Base | |||
--color-bg | Page background | Copied!! | Copied!! |
--color-text | Body text | Copied!! | Copied!! |
--color-surface | Primary surface | Copied!! | Copied!! |
--color-surface-alt | Secondary surface | Copied!! | Copied!! |
--color-surface-panel | Panel surface | Copied!! | Copied!! |
--color-border | Default border | Copied!! | Copied!! |
--color-border-subtle | Subtle border | Copied!! | Copied!! |
--color-muted | Muted text | Copied!! | Copied!! |
--color-muted-strong | Strong muted text | Copied!! | Copied!! |
| Content | |||
--color-link | Link | Copied!! | Copied!! |
--color-link-visited | Visited link | Copied!! | Copied!! |
--color-link-hover-bg | Link hover background | Copied!! | Copied!! |
--color-link-schema | Schema link | Copied!! | Copied!! |
--color-missing-decoration | Missing page underline | Copied!! | Copied!! |
--color-missing-marker | Missing page marker | Copied!! | Copied!! |
--color-code-bg | Code block background | Copied!! | Copied!! |
--color-code-text | Code block text | Copied!! | Copied!! |
--color-code-border | Code block border | Copied!! | Copied!! |
--color-code-link | Code block link | Copied!! | Copied!! |
--color-blockquote-bg | Blockquote background | Copied!! | Copied!! |
--color-blockquote-border | Blockquote border | Copied!! | Copied!! |
--color-heading-border | Heading border | Copied!! | Copied!! |
--color-heading-shadow | Heading shadow | AaCopied!! | AaCopied!! |
| UI | |||
--color-shadow-soft | Soft shadow | Copied!! | Copied!! |
--color-overlay-bg | Overlay | Copied!! | Copied!! |
--color-input-bg | Input background | Copied!! | Copied!! |
--color-input-border | Input border | Copied!! | Copied!! |
--color-focus-ring | Focus ring | Copied!! | Copied!! |
| Navigation | |||
--color-navbar-bg | Navbar background | Copied!! | Copied!! |
--color-navbar-border | Navbar border | Copied!! | Copied!! |
--color-navbar-shadow | Navbar shadow | Copied!! | Copied!! |
--color-navbar-text | Navbar text | Copied!! | Copied!! |
--color-navbar-home | Home link | Copied!! | Copied!! |
--color-navbar-menu-bg | Dropdown background | Copied!! | Copied!! |
--color-navbar-text-shadow | Navbar text shadow | AaCopied!! | AaCopied!! |
| Flash | |||
--color-flash-success-text | Success text | Copied!! | Copied!! |
--color-flash-success-bg | Success background | Copied!! | Copied!! |
--color-flash-success-border | Success border | Copied!! | Copied!! |
--color-flash-error-text | Error text | Copied!! | Copied!! |
--color-flash-error-bg | Error background | Copied!! | Copied!! |
--color-flash-error-border | Error border | Copied!! | Copied!! |
--color-flash-info-text | Info text | Copied!! | Copied!! |
--color-flash-info-bg | Info background | Copied!! | Copied!! |
--color-flash-info-border | Info border | Copied!! | Copied!! |
--color-flash-warning-text | Warning text | Copied!! | Copied!! |
--color-flash-warning-bg | Warning background | Copied!! | Copied!! |
--color-flash-warning-border | Warning border | Copied!! | Copied!! |
| Tables | |||
--color-table-border | Table border | Copied!! | Copied!! |
--color-table-header-bg | Table header | Copied!! | Copied!! |
--color-table-row-alt-bg | Alternating row | Copied!! | Copied!! |
--color-table-row-hover-bg | Hover row | Copied!! | Copied!! |
| Metrics | |||
--color-percent-track | Percent track | Copied!! | Copied!! |
--color-percent-bar | Percent bar | Copied!! | Copied!! |
--color-percent-label | Percent label | Copied!! | Copied!! |
| Adjacent Graph | |||
--color-adjacent-placeholder-bg | Placeholder background | Copied!! | Copied!! |
--color-adjacent-placeholder-border | Placeholder border | Copied!! | Copied!! |
--color-adjacent-placeholder-text | Placeholder text | Copied!! | Copied!! |
--color-adjacent-placeholder-icon | Placeholder icon | Copied!! | Copied!! |
--color-adjacent-placeholder-muted | Placeholder muted text | Copied!! | Copied!! |
--color-adjacent-hud-bg | HUD background | Copied!! | Copied!! |
--color-adjacent-hud-border | HUD border | Copied!! | Copied!! |
--color-adjacent-hud-shadow | HUD shadow | Copied!! | Copied!! |
--color-adjacent-hud-text | HUD text | Copied!! | Copied!! |
--color-adjacent-hud-title | HUD title | Copied!! | Copied!! |
--color-adjacent-hud-action-bg | HUD action | Copied!! | Copied!! |
--color-adjacent-hud-action-text | HUD action text | Copied!! | Copied!! |
--color-adjacent-hud-action-active-bg | HUD active action | Copied!! | Copied!! |
--color-adjacent-hud-action-active-text | HUD active action text | Copied!! | Copied!! |
--color-adjacent-dot-root | Root node | Copied!! | Copied!! |
--color-adjacent-dot-hop1 | 1-hop node | Copied!! | Copied!! |
--color-adjacent-dot-hop2 | 2-hop node | Copied!! | Copied!! |
| Kanban | |||
--color-kanban-bg | Board background | Copied!! | Copied!! |
--color-kanban-column-bg | Column background | Copied!! | Copied!! |
--color-kanban-card-bg | Card background | Copied!! | Copied!! |
--color-kanban-border | Border | Copied!! | Copied!! |
--color-kanban-muted | Muted text | Copied!! | Copied!! |
--color-kanban-text | Text | Copied!! | Copied!! |
--color-kanban-primary | Primary accent | Copied!! | Copied!! |
--color-kanban-shadow | Card shadow | Copied!! | Copied!! |
출력 내용은 다음과 같다.
- AhaWiki Light 미리보기 카드
- AhaWiki Dark 미리보기 카드
- 각 테마의 본문, 링크, 코드 샘플
- 각 테마의 본문 대비 값
- swatch와 원본 값을 함께 보여주는
wikiTableSimple토큰 표
3. Token Groups
토큰 표는 UI 영역별로 묶인다.
- Base
- Content
- UI
- Navigation
- Flash
- Tables
- Metrics
- Adjacent Graph
- Kanban
각 행은 토큰 이름, 용도, AhaWiki Light 값, AhaWiki Dark 값을 보여준다.
4. Implementation Notes
매크로 구현은 MacroThemes.scala에 있고, 등록되는 매크로 이름은 Themes다.
문서 이름은 MacroThemes이지만 사용 문법은 [[Themes]]다.
새 테마 토큰을 추가할 때는 다음을 함께 처리한다.
light.values와dark.values에 같은 token key를 추가한다.- 용도를 설명하는
ThemeToken행을 추가한다. - 값의 종류에 따라
Preview.Background,Preview.Shadow,Preview.TextShadow중 하나를 고른다. - 새 group이 생기면 이 문서의 Token Groups도 갱신한다.
6. See Also
6.2. Similar Pages
Similar pages by cosine similarity. Words after page name are term frequency.
6.3. Adjacent Pages
Control
≤ 32
all
1.0x
1.0x
80
-120
ON
Metrics
Nodes(visible/total)0/0
Links(visible/total)0/0
Avg degree0.00
Depth coverage0
Queue(fetch/graph)0 / 0
Zoom(scale)1.00x
Ctrl/⌘ + Scroll: Zoom
Root
1-hop
2-hop+