Skip to content

feat: adopt CNTUG design system - #36

Merged
tico88612 merged 4 commits into
cloud-native-taiwan:masterfrom
ching-kuo:cntug_design_system
Jun 18, 2026
Merged

tico88612 merged 4 commits into
cloud-native-taiwan:masterfrom
ching-kuo:cntug_design_system

Conversation

@ching-kuo

Copy link
Copy Markdown
Contributor

Summary

  • Adds the CNTUG design system (CNCF brand palette, Clarity City + Noto Sans TC + JetBrains Mono, dark mode per Apple HIG) as portable token + Infima-bridge files.
  • Mirrors the implementation already shipping on docs.cloudnative.tw (Infra Labs), so the two sites share one source of truth.
  • Fixes hero CTA buttons that were touching each other by adding gap + flex-wrap to the .buttons containers.

Files

  • src/css/cntug-tokens.css — design tokens (portable).
  • src/css/cntug-infima.css — maps tokens onto Infima --ifm-* variables (Docusaurus-only).
  • src/css/README.md — design system docs.
  • src/css/custom.css — now imports the two files; keeps the site-specific .button--sponsor CNCF-Pink override.
  • src/pages/index.module.css, src/components/HomepageFeatures/styles.module.css — gap + flex-wrap on .buttons.

Test plan

  • yarn build succeeds
  • Navbar, sidebar, footer, code blocks, and admonitions render in CNCF Blue
  • Dark mode flips to layered grays with desaturated brand blue
  • Hero CTA buttons have visible spacing and wrap on narrow viewports
  • .button--sponsor still renders in CNCF Pink on the homepage

ching-kuo added 2 commits May 6, 2026 21:49
Drop-in CNTUG design tokens and Infima bridge, mirroring the
implementation already shipping on docs.cloudnative.tw (Infra Labs).

- src/css/cntug-tokens.css: colors, type, spacing, radii, shadows,
  motion. Loads Clarity City + Noto Sans TC + JetBrains Mono.
- src/css/cntug-infima.css: maps tokens onto Infima --ifm-* variables
  so navbar, sidebar, footer, code blocks, and admonitions pick up
  CNCF Blue (desaturated to #4DA8FF in dark mode per Apple HIG).
- src/css/custom.css: imports the two portable files; retains the
  site-specific .button--sponsor CNCF-Pink override.
- index.module.css / HomepageFeatures/styles.module.css: add
  flex gap and wrap to .buttons containers so hero CTAs no longer
  butt up against each other.
@netlify

netlify Bot commented May 6, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for cloudnative-tw ready!

Name Link
🔨 Latest commit 958390f
🔍 Latest deploy log https://app.netlify.com/projects/cloudnative-tw/deploys/6a2ff2bd42c93300082c29c3
😎 Deploy Preview https://deploy-preview-36--cloudnative-tw.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@clr/ui does not host the font files — all five weights were 404ing.
Switch to the correct package (@clr/city@1.1.0) with the right path
(Webfonts/WOFF2/ClarityCity-{Weight}.woff2). All five URLs verified
200 before committing.
@ching-kuo
ching-kuo requested a review from tico88612 June 9, 2026 05:43
Port the swizzled @theme/Mermaid from infra-labs-docs: per-color-mode
light/dark palettes built from the design tokens (Mermaid can't use CSS
vars in themeVariables, so concrete hex mirrors the tokens). Enables
markdown.mermaid, adds @docusaurus/theme-mermaid (pinned to 3.2.0 to
match @docusaurus/core), and container layout rules in custom.css.
@tico88612
tico88612 merged commit d3730c6 into cloud-native-taiwan:master Jun 18, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants