Skip to content

feat(design): add W3C DTCG 2025.10 compliant design tokens system #103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
s123104 wants to merge 7 commits into
base: main
Choose a base branch
from
Open

feat(design): add W3C DTCG 2025.10 compliant design tokens system #103

s123104 wants to merge 7 commits into from

Conversation

@s123104
Copy link
Contributor

@s123104 s123104 commented Jan 17, 2026

  • Add design-tokens.tokens.json following W3C specification
  • Add component-tokens.ts with MD3 and Liquid Glass patterns
  • Add tokens.css with full CSS Variables implementation
  • Add 006_design_modernization_spec.md with ASCII layouts

Token categories:

  • Color: primitives + semantic + accent variants
  • Spacing: 4px base unit scale (0-24)
  • Typography: font families, sizes, presets
  • Radius: sm to full scale
  • Shadow: sm to 2xl + glass-glow
  • Glass: blur, opacity, border, surface presets
  • Motion: duration + easing
  • Navigation: MD3 compliant sizes

Responsive layouts designed for:

  • Mobile: Bottom Tab Bar (56px, 3-5 items)
  • Tablet: Nav Rail (80px) + Split View
  • Desktop: Sidebar (256px) + Multi-column

References:

  • W3C Design Tokens 2025.10
  • Apple Liquid Glass iOS 26
  • Material Design 3 Navigation

claude added 2 commits January 17, 2026 07:46
@claude
feat(design): add W3C DTCG 2025.10 compliant design tokens system
a4856c5 
- Add design-tokens.tokens.json following W3C specification
- Add component-tokens.ts with MD3 and Liquid Glass patterns
- Add tokens.css with full CSS Variables implementation
- Add 006_design_modernization_spec.md with ASCII layouts

Token categories:
- Color: primitives + semantic + accent variants
- Spacing: 4px base unit scale (0-24)
- Typography: font families, sizes, presets
- Radius: sm to full scale
- Shadow: sm to 2xl + glass-glow
- Glass: blur, opacity, border, surface presets
- Motion: duration + easing
- Navigation: MD3 compliant sizes

Responsive layouts designed for:
- Mobile: Bottom Tab Bar (56px, 3-5 items)
- Tablet: Nav Rail (80px) + Split View
- Desktop: Sidebar (256px) + Multi-column

References:
- W3C Design Tokens 2025.10
- Apple Liquid Glass iOS 26
- Material Design 3 Navigation
@claude
docs(design): expand spec with grid, forms, animations, states
0bf3b6d 
Add comprehensive UI/UX specifications:

Grid System (Section 7):
- 4px base unit (iOS 8pt, Android 4dp compatible)
- Mobile 4-col, Tablet 8-col, Desktop 12-col grids
- Margins 16-24px, Gutters 16-24px
- Android Window Size Classes

Card Design (Section 9.4):
- Shadow elevation system (sm/md/lg/xl)
- Hover animation specs (200ms, translateY)
- Border radius consistency rules

Form Design (Section 10):
- Input height 44-52px
- Validation: Reward Early, Punish Late
- Currency input 56px with embedded selector

Micro-interactions (Section 11):
- 3-second rule for animations
- Button 100-150ms, Modal 300-400ms
- Ripple effect for mobile
- prefers-reduced-motion support

Skeleton Loading (Section 12):
- Shimmer effect 1.5s cycle
- Layout matching principle
- Cross-fade transitions

Empty/Error States (Section 13):
- 5 empty state types
- Ratewise-specific templates
- CTA requirement

Gestures (Section 14):
- Touch targets 44x44px min
- Pull-to-refresh 60px threshold
- Swipe actions with fallbacks

Financial Visualization (Section 15):
- Green/Red for trends
- Multi-currency chart colors
- Number formatting standards

Sources:
- Android Developers, Material Design 3
- NN/g, LogRocket UX Design
- Mobbin, UXPin
@github-actions
Copy link
Contributor

github-actions bot commented Jan 17, 2026

✅ SEO 審計通過！所有 2025 標準驗證項目都符合要求。

  • ✅ Sitemap 2025 標準
  • ✅ Breadcrumb Schema
  • ✅ JSON-LD 結構化數據
  • ✅ 內部連結結構

@github-actions
Copy link
Contributor

github-actions bot commented Jan 17, 2026

🔦 Lighthouse CI 報告

類別 分數 狀態
🚀 Performance 71 ⚠️
♿ Accessibility 100 ✅
✨ Best Practices 96 ✅
🔍 SEO 100 ✅

📊 查看完整報告

門檻：所有類別 ≥ 85 分（軟性警告，不阻擋 PR）

@claude
feat(design): integrate spacing, radius, shadow, typography tokens to…
2b87c81 
… Tailwind

- Add spacingTokens mapping to CSS Variables (--spacing-*)
- Add borderRadiusTokens mapping to CSS Variables (--radius-*)
- Add boxShadowTokens with glass-specific shadows (--shadow-*, --glass-shadow-*)
- Add fontSizeTokens with line-height configuration
- Add transitionDurationTokens and transitionTimingTokens
- Add zIndexTokens with semantic levels (dropdown, modal, toast, etc.)
- Update generateTailwindThemeExtension() to include all token categories
@github-actions
Copy link
Contributor

github-actions bot commented Jan 18, 2026

✅ SEO 審計通過！所有 2025 標準驗證項目都符合要求。

  • ✅ Sitemap 2025 標準
  • ✅ Breadcrumb Schema
  • ✅ JSON-LD 結構化數據
  • ✅ 內部連結結構

@github-actions
Copy link
Contributor

github-actions bot commented Jan 18, 2026

📊 PR 檢查結果

✅ 品質檢查

  • Lint: ✅ 通過
  • Format: ✅ 通過
  • TypeScript: ✅ 通過
  • Tests: ✅ 通過
  • Build: ✅ 成功

📦 建置資訊

  • Bundle Size: 4.00 KB
  • Test Coverage: 85.99%

🤖 Automated by GitHub Actions

@github-actions
Copy link
Contributor

github-actions bot commented Jan 18, 2026

🔦 Lighthouse CI 報告

類別 分數 狀態
🚀 Performance 91 ✅
♿ Accessibility 97 ✅
✨ Best Practices 96 ✅
🔍 SEO 100 ✅

📊 查看完整報告

門檻：所有類別 ≥ 85 分（軟性警告，不阻擋 PR）

@claude
feat(a11y): implement 2025 design standards compliance
524a13c 
P0 - Accessibility Compliance:
- Increase --button-height-sm from 32px to 44px (WCAG 2.2)
- Increase --input-height-sm from 36px to 44px (WCAG 2.2)
- Increase --font-size-xs from 12px to 14px (readability)

P1 - 2025 Standards:
- Add fluid typography with clamp() (--font-size-fluid-*)
- Add responsive breakpoint tokens (--breakpoint-xs/sm/md/lg/xl/2xl)
- Add mobile-optimized body text (18px default on mobile)

P2 - Enhanced Experience:
- Add Container Query support (.container-responsive, @container)
- Add density tokens ([data-density='compact/comfortable'])
- Add M3 Expressive shape system (--shape-*)

References:
- WCAG 2.2 Target Size Minimum (2.5.8)
- Apple HIG 44pt touch targets
- Material Design 3 Expressive
@github-actions
Copy link
Contributor

github-actions bot commented Jan 18, 2026

✅ SEO 審計通過！所有 2025 標準驗證項目都符合要求。

  • ✅ Sitemap 2025 標準
  • ✅ Breadcrumb Schema
  • ✅ JSON-LD 結構化數據
  • ✅ 內部連結結構

@github-actions
Copy link
Contributor

github-actions bot commented Jan 18, 2026

📊 PR 檢查結果

✅ 品質檢查

  • Lint: ✅ 通過
  • Format: ✅ 通過
  • TypeScript: ✅ 通過
  • Tests: ✅ 通過
  • Build: ✅ 成功

📦 建置資訊

  • Bundle Size: 4.00 KB
  • Test Coverage: 86.01%

🤖 Automated by GitHub Actions

@github-actions
Copy link
Contributor

github-actions bot commented Jan 18, 2026

🔦 Lighthouse CI 報告

類別 分數 狀態
🚀 Performance 94 ✅
♿ Accessibility 97 ✅
✨ Best Practices 96 ✅
🔍 SEO 100 ✅

📊 查看完整報告

門檻：所有類別 ≥ 85 分（軟性警告，不阻擋 PR）

@claude
feat(nav): add responsive navigation system (BottomTab/NavRail/Sidebar)
e0b850f 
Navigation Components:
- BottomTabBar.tsx: Mobile navigation bar (56px, MD3 spec)
- NavRail.tsx: Tablet navigation rail (80px, MD3 spec)
- Sidebar.tsx: Desktop sidebar (256px/72px collapsed)
- All use glass effect tokens and CSS Variables

Layout System:
- ResponsiveLayout.tsx: Integrates all navigation variants
- ContentSection: Glass card wrapper component
- PageHeader: Unified page header component

Chart Optimization:
- ChartContainer.tsx: Controlled width/height ratios
  - inline: max-height 120px, aspect-ratio 3:1
  - card: max-width 480px, max-height 180px, aspect-ratio 2.5:1
  - full: max-width 600px, max-height 240px, aspect-ratio 2:1
- MiniChart: 80x40px for list items
- TrendIndicator: Trend display with arrow

Breakpoint Strategy:
- Mobile (<768px): BottomTabBar + bottom padding
- Tablet (768-1023px): NavRail + left padding 80px
- Desktop (≥1024px): Sidebar + left padding 256px
@github-actions
Copy link
Contributor

github-actions bot commented Jan 18, 2026

✅ SEO 審計通過！所有 2025 標準驗證項目都符合要求。

  • ✅ Sitemap 2025 標準
  • ✅ Breadcrumb Schema
  • ✅ JSON-LD 結構化數據
  • ✅ 內部連結結構

@github-actions
Copy link
Contributor

github-actions bot commented Jan 18, 2026

📊 PR 檢查結果

✅ 品質檢查

  • Lint: ✅ 通過
  • Format: ✅ 通過
  • TypeScript: ✅ 通過
  • Tests: ✅ 通過
  • Build: ✅ 成功

📦 建置資訊

  • Bundle Size: 4.00 KB
  • Test Coverage: 85.06%

🤖 Automated by GitHub Actions

@github-actions
Copy link
Contributor

github-actions bot commented Jan 18, 2026

🔦 Lighthouse CI 報告

類別 分數 狀態
🚀 Performance 93 ✅
♿ Accessibility 97 ✅
✨ Best Practices 96 ✅
🔍 SEO 100 ✅

📊 查看完整報告

門檻：所有類別 ≥ 85 分（軟性警告，不阻擋 PR）

@claude
feat(ui): add glassmorphism UI components with integrated trend chart
94d1aae 
- Add GlassCard component with variant styles (base/elevated/overlay/subtle)
- Add CurrencyInput with embedded currency selector and calculator button
- Add RateDisplayCard with integrated 80px mini trend chart slot
- Add CompactRateCard for list views (64px height)
- Refactor SingleConverter to use new modular UI components
- Update tests to match new component structure
- All comments converted to English for open-source standards
- WCAG 2.2 compliant touch targets (≥44px)
- Design tokens integration for consistent theming
@github-actions
Copy link
Contributor

github-actions bot commented Jan 18, 2026

✅ SEO 審計通過！所有 2025 標準驗證項目都符合要求。

  • ✅ Sitemap 2025 標準
  • ✅ Breadcrumb Schema
  • ✅ JSON-LD 結構化數據
  • ✅ 內部連結結構

@github-actions
Copy link
Contributor

github-actions bot commented Jan 18, 2026

📊 PR 檢查結果

✅ 品質檢查

  • Lint: ✅ 通過
  • Format: ✅ 通過
  • TypeScript: ✅ 通過
  • Tests: ✅ 通過
  • Build: ✅ 成功

📦 建置資訊

  • Bundle Size: 4.00 KB
  • Test Coverage: 84.83%

🤖 Automated by GitHub Actions

@github-actions
Copy link
Contributor

github-actions bot commented Jan 18, 2026

🔦 Lighthouse CI 報告

類別 分數 狀態
🚀 Performance 58 ⚠️
♿ Accessibility 97 ✅
✨ Best Practices 96 ✅
🔍 SEO 100 ✅

📊 查看完整報告

門檻：所有類別 ≥ 85 分（軟性警告，不阻擋 PR）

@claude
refactor(ui): convert Chinese comments to English in SingleConverter
cbfaeba 
- Add JSDoc module documentation header
- Replace all Chinese inline comments with English equivalents
- Replace temporary fix markers ([fix:YYYY-MM-DD]) with clean comments
- Update hover tooltip text from Chinese to English
- Maintain all functionality unchanged
@github-actions
Copy link
Contributor

github-actions bot commented Jan 18, 2026

✅ SEO 審計通過！所有 2025 標準驗證項目都符合要求。

  • ✅ Sitemap 2025 標準
  • ✅ Breadcrumb Schema
  • ✅ JSON-LD 結構化數據
  • ✅ 內部連結結構

@github-actions
Copy link
Contributor

github-actions bot commented Jan 18, 2026

📊 PR 檢查結果

✅ 品質檢查

  • Lint: ✅ 通過
  • Format: ✅ 通過
  • TypeScript: ✅ 通過
  • Tests: ✅ 通過
  • Build: ✅ 成功

📦 建置資訊

  • Bundle Size: 4.00 KB
  • Test Coverage: 84.83%

🤖 Automated by GitHub Actions

@github-actions
Copy link
Contributor

github-actions bot commented Jan 18, 2026

🔦 Lighthouse CI 報告

類別 分數 狀態
🚀 Performance 91 ✅
♿ Accessibility 97 ✅
✨ Best Practices 96 ✅
🔍 SEO 100 ✅

📊 查看完整報告

門檻：所有類別 ≥ 85 分（軟性警告，不阻擋 PR）

@s123104
Copy link
Contributor Author

s123104 commented Jan 19, 2026

🔍 PR #103 開發環境檢查報告

頁面渲染檢查結果

頁面 狀態 Console 錯誤
/ratewise/ ✅ 渲染正常 ⚠️ 1 個 CSP Violation 警告
/ratewise/faq/ ✅ 渲染正常 無錯誤
/ratewise/about/ ✅ 渲染正常 無錯誤
/ratewise/guide/ ✅ 渲染正常 無錯誤
/ratewise/usd-twd/ ✅ 渲染正常 無錯誤
/ratewise/jpy-twd/ ✅ 渲染正常 無錯誤

發現事項

1. ✅ 所有頁面正常載入

  • 所有路由都能正確渲染
  • 顯示「載入匯率資料中...」是因為外部 API 在本地環境無法連接（預期行為）

2. ⚠️ CSP Violation 警告（首頁）

[WARN] CSP Violation (Blocked)
  • 非致命錯誤，可能是開發環境配置問題

3. 📝 Design Tokens CSS 尚未整合

  • tokens.css 文件已添加到 src/styles/ 目錄
  • 但尚未被主應用程式導入使用
  • CSS 變數（如 --primitive-violet-500、--spacing-4）在瀏覽器中不可用

驗證方式：

// 在瀏覽器 console 執行
getComputedStyle(document.documentElement).getPropertyValue('--primitive-violet-500')
// 返回空字串，表示未載入

搜尋結果：

grep -r "tokens.css" apps/ratewise/src/
# 無匹配結果

結論

此 PR 添加的設計系統文件是文檔和配置層面的準備工作，包含：

  • design-tokens.tokens.json - W3C DTCG 規範
  • component-tokens.ts - MD3 + Liquid Glass 模式
  • tokens.css - CSS Variables 實作
  • 006_design_modernization_spec.md - ASCII 佈局規格

後續需要：另開 PR 將 tokens.css 導入到主應用程式（如 main.tsx 或 App.tsx）才能實際應用這些設計 tokens。

檢查時間: 2026-01-19
檢查方式: Puppeteer MCP + Console 監控

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@s123104 @claude