DashBoard/docs/migration/portal-no-iframe/tailwind_design_tokens.md

Tailwind Design Tokens Mapping

Goal

Map existing portal visual language into a stable token set for phased migration.

Color tokens

• brand.500 / brand.600 / brand.700: primary brand actions and active navigation states.
• accent.500: gradient accent endpoint for shell headers.
• surface.app / surface.card / surface.muted: app background, card surfaces, muted blocks.
• stroke.soft / stroke.panel: border hierarchy.
• state.success / state.warning / state.danger / state.neutral: status dots and health states.

Typography tokens

• fontFamily.sans: Noto Sans TC, Microsoft JhengHei, system fallback.

Layout tokens

• spacing.shell: outer shell padding.
• spacing.panel: panel interior spacing.
• spacing.nav: sidebar item horizontal spacing.
• spacing.block: vertical rhythm baseline.

Radius and elevation tokens

• borderRadius.shell: shell and main card radius.
• borderRadius.card: smaller control/card radius.
• boxShadow.soft: light containers (sidebar).
• boxShadow.panel: content panel container.
• boxShadow.shell: header gradient card emphasis.

Z-index token

• zIndex.popup: status popup / overlay layer.

Migration note

Tokens are intentionally aligned with current portal values to minimize visual drift during iframe decommission.