Color swatches render empty on Design System docs pages

[maarkN]

On the docs site, the color swatches on the Design System pages render as empty/transparent boxes, only the section headings and labels show up, no actual colors.

Steps to reproduce:

1. yarn docs:dev
2. Open Design System → Background Color (also Border Color and Text Design → Text Color tab)

Actual: swatches are invisible (transparent), only labels render

Expected: each swatch shows its token color (e.g. bg-surface-red-4)

Version: main @ v1.0.0-beta.3

What I found: the token values passed by docs/content/docs/design-system/[token].paths.ts contain Tailwind's internal <alpha-value> placeholder (e.g. color-mix(in srgb, var(--surface-gray-2, #F3F3F3) calc(<alpha-value> * 100%), transparent)), which is invalid as an inline style — so the swatch divs get no background.

I have a small fix for this in #759.

[barista-for-frappe]

Confirmed — root cause is the <alpha-value> placeholder leaking into an inline style.

• docs/content/docs/design-system/[token].paths.ts pulls value straight from resolveConfig(config).theme.backgroundColor.surface (also textColor.ink, borderColor.outline).
• Those tokens are color-mix(in srgb, var(--surface-gray-2, #F3F3F3) calc(<alpha-value> * 100%), transparent) — Tailwind's <alpha-value> is only substituted at class-compile time, never for raw theme reads.
• docs/components/tokens/BgColor.vue:40 binds that string via :style="{ backgroundColor: color.value }", which the browser rejects as invalid → transparent box.

Same path affects Border Color and Text Color swatches. Fix in #759 looks right; substituting <alpha-value> with 1 (or using the bg-* class instead of inline style) resolves it.

_{barista · claude-opus-4-8 · 8.7k in / 4.5k out · 1034k cached · 69s · $0.518}

[ruchamahabal]

Can frappe-ui expose color variables/tokens cleanly somehow? Previously, generateSemanticColors from frappe-ui used to do this
@netchampfaris

I need access to tokens like this: var(--surface-gray-2, #F3F3F3)