@qijenchen/design-system 0.1.0-beta.73 → 0.1.0-beta.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/dist/components/AppShell/_demo-helpers.d.ts.map +1 -1
  2. package/dist/components/BulkActionBar/bulk-action-bar.d.ts.map +1 -1
  3. package/dist/components/BulkActionBar/bulk-action-bar.js +1 -1
  4. package/dist/components/BulkActionBar/bulk-action-bar.js.map +1 -1
  5. package/dist/components/DataTable/data-table.d.ts +27 -6
  6. package/dist/components/DataTable/data-table.d.ts.map +1 -1
  7. package/dist/components/DataTable/data-table.js +57 -34
  8. package/dist/components/DataTable/data-table.js.map +1 -1
  9. package/ds-canonical/fork/governance.lock +7 -7
  10. package/ds-canonical/fork/skills/bug-fix-rhythm/SKILL.md +2 -0
  11. package/ds-canonical/fork/skills/code-quality-audit/SKILL.md +2 -0
  12. package/ds-canonical/fork/skills/product-ui-audit/SKILL.md +2 -0
  13. package/ds-canonical/fork/skills/prototype/references/audit-checks.md +1 -0
  14. package/ds-canonical/fork/skills/scan-similar-bugs/SKILL.md +2 -0
  15. package/ds-canonical/fork/skills/visual-audit/SKILL.md +2 -0
  16. package/ds-canonical/fork/skills/visual-audit/references/audit-architecture.md +1 -0
  17. package/ds-canonical/hooks/check_plugin_fork_health.sh +2 -2
  18. package/ds-canonical/hooks/check_story_invariants.sh +26 -0
  19. package/ds-canonical/hooks/lib/_app_shell_primary_header_consistency.sh +31 -4
  20. package/ds-canonical/hooks/session_start_governance_check.sh +1 -1
  21. package/ds-canonical/hooks/tests/test_check_app_shell_primary_header_consistency.sh +46 -2
  22. package/ds-canonical/hooks/tests/test_check_story_invariants.sh +30 -0
  23. package/ds-canonical/skills/design-system-audit/SKILL.md +2 -2
  24. package/llms-full.txt +1 -1
  25. package/llms.txt +1 -1
  26. package/package.json +1 -1
  27. package/src/components/Accordion/accordion.principles.stories.tsx +3 -3
  28. package/src/components/Alert/alert.principles.stories.tsx +5 -5
  29. package/src/components/AppShell/_demo-helpers.tsx +23 -6
  30. package/src/components/AppShell/app-shell.principles.stories.tsx +9 -8
  31. package/src/components/AppShell/app-shell.spec.md +9 -8
  32. package/src/components/AppShell/app-shell.stories.tsx +5 -3
  33. package/src/components/AspectRatio/aspect-ratio.principles.stories.tsx +1 -1
  34. package/src/components/Avatar/avatar.principles.stories.tsx +3 -3
  35. package/src/components/Badge/badge.principles.stories.tsx +3 -3
  36. package/src/components/Breadcrumb/breadcrumb.principles.stories.tsx +3 -3
  37. package/src/components/BulkActionBar/bulk-action-bar.anatomy.stories.tsx +1 -1
  38. package/src/components/BulkActionBar/bulk-action-bar.principles.stories.tsx +3 -3
  39. package/src/components/BulkActionBar/bulk-action-bar.spec.md +4 -2
  40. package/src/components/BulkActionBar/bulk-action-bar.stories.tsx +2 -2
  41. package/src/components/BulkActionBar/bulk-action-bar.tsx +3 -2
  42. package/src/components/Button/button.principles.stories.tsx +3 -3
  43. package/src/components/Calendar/calendar.principles.stories.tsx +3 -3
  44. package/src/components/Carousel/carousel.principles.stories.tsx +2 -2
  45. package/src/components/Chart/chart.principles.stories.tsx +4 -4
  46. package/src/components/Checkbox/checkbox.principles.stories.tsx +2 -2
  47. package/src/components/Chip/chip.principles.stories.tsx +3 -3
  48. package/src/components/Coachmark/coachmark.principles.stories.tsx +3 -3
  49. package/src/components/Combobox/combobox.anatomy.stories.tsx +2 -2
  50. package/src/components/Combobox/combobox.principles.stories.tsx +5 -5
  51. package/src/components/Command/command.principles.stories.tsx +7 -7
  52. package/src/components/DataTable/data-table.principles.stories.tsx +3 -3
  53. package/src/components/DataTable/data-table.spec.md +23 -15
  54. package/src/components/DataTable/data-table.stories.tsx +29 -25
  55. package/src/components/DataTable/data-table.tsx +92 -44
  56. package/src/components/DateGrid/date-grid.principles.stories.tsx +4 -4
  57. package/src/components/DatePicker/date-picker.principles.stories.tsx +5 -5
  58. package/src/components/DescriptionList/description-list.principles.stories.tsx +5 -5
  59. package/src/components/Dialog/dialog.principles.stories.tsx +4 -4
  60. package/src/components/DropdownMenu/dropdown-menu.anatomy.stories.tsx +1 -1
  61. package/src/components/DropdownMenu/dropdown-menu.principles.stories.tsx +5 -5
  62. package/src/components/Empty/empty.principles.stories.tsx +2 -2
  63. package/src/components/Field/field.principles.stories.tsx +4 -4
  64. package/src/components/FileItem/file-item.principles.stories.tsx +5 -5
  65. package/src/components/FileUpload/file-upload.principles.stories.tsx +4 -4
  66. package/src/components/FileViewer/file-viewer.principles.stories.tsx +5 -5
  67. package/src/components/HoverCard/hover-card.principles.stories.tsx +5 -5
  68. package/src/components/Input/input.principles.stories.tsx +4 -4
  69. package/src/components/LinkInput/link-input.principles.stories.tsx +5 -5
  70. package/src/components/Menu/menu-item.principles.stories.tsx +7 -7
  71. package/src/components/Notice/notice.principles.stories.tsx +7 -7
  72. package/src/components/NumberInput/number-input.principles.stories.tsx +4 -4
  73. package/src/components/OverflowIndicator/overflow-indicator.principles.stories.tsx +5 -5
  74. package/src/components/PeoplePicker/people-picker.principles.stories.tsx +3 -3
  75. package/src/components/Popover/popover.principles.stories.tsx +1 -1
  76. package/src/components/ProfileCard/profile-card.principles.stories.tsx +1 -1
  77. package/src/components/ProgressBar/progress-bar.principles.stories.tsx +2 -2
  78. package/src/components/RadioGroup/radio-group.principles.stories.tsx +2 -2
  79. package/src/components/Rating/rating.principles.stories.tsx +3 -3
  80. package/src/components/ScrollArea/scroll-area.principles.stories.tsx +4 -4
  81. package/src/components/Select/select.principles.stories.tsx +5 -5
  82. package/src/components/SelectMenu/select-menu.principles.stories.tsx +8 -8
  83. package/src/components/SelectionControl/selection-item.principles.stories.tsx +7 -7
  84. package/src/components/Separator/separator.principles.stories.tsx +4 -4
  85. package/src/components/Sheet/sheet.principles.stories.tsx +2 -2
  86. package/src/components/Sidebar/sidebar.principles.stories.tsx +4 -4
  87. package/src/components/Sidebar/sidebar.spec.md +1 -1
  88. package/src/components/Skeleton/skeleton.principles.stories.tsx +5 -5
  89. package/src/components/Slider/slider.principles.stories.tsx +3 -3
  90. package/src/components/Steps/steps.principles.stories.tsx +4 -4
  91. package/src/components/Switch/switch.principles.stories.tsx +1 -1
  92. package/src/components/Tabs/tabs.principles.stories.tsx +3 -3
  93. package/src/components/Tag/tag.principles.stories.tsx +3 -3
  94. package/src/components/Textarea/textarea.principles.stories.tsx +2 -2
  95. package/src/components/TimePicker/time-picker.principles.stories.tsx +5 -5
  96. package/src/components/Toast/toast.principles.stories.tsx +2 -2
  97. package/src/components/Tooltip/tooltip.principles.stories.tsx +3 -3
  98. package/src/components/TreeView/tree-view.principles.stories.tsx +5 -5
  99. package/src/components/TreeView/tree-view.stories.tsx +1 -1
  100. package/src/tokens/color/color.spec.md +2 -0
package/src/components/Sidebar/sidebar.spec.md CHANGED
@@ -598,7 +598,7 @@ Consumer 不需要任何額外 code——只要加一個 prop:
598
598
 
599
599
  Sheet 開啟狀態**不持久化**。
600
600
 
601
- **Sheet 蓋住 global top bar → primary-header consumer 須在 Sheet 內補品牌/帳號**:Sheet（z-50）打開時覆蓋整個左側含 global top bar。若你是 `AppShell` `primary-header` 派(品牌 logo + 帳號入口放在 globalHeader、sidebar 平常無 header/footer),小螢幕 Sheet 打開後 globalHeader 被蓋住 → 使用者看不到品牌也按不到帳號。解法:consumer 讀 `useSidebar().isMobile`,**mobile 時才**在 sidebar 內條件渲染 `<SidebarHeader><WorkspaceBrand/>`(頂)+ `<SidebarFooter>`(底),用與 `primary-sidebar` 相同的 primitive(style SSOT)。**rule owner = `../AppShell/app-shell.spec.md`「WorkspaceBrand / 帳號入口放置 SSOT」的 Responsive 精修子句**(本處不重述,Rule-of-3)。reference:`AppShell/_demo-helpers.tsx` `AcmeSidebar`。
601
+ **Sheet 蓋住 global top bar → primary-header consumer 須在 Sheet 內補品牌/帳號**:Sheet（z-50）打開時覆蓋整個左側含 global top bar。若你是 `AppShell` `primary-header` 派(品牌 logo + 帳號入口放在 globalHeader、sidebar 平常無 header/footer),小螢幕 Sheet 打開後 globalHeader 被蓋住 → 使用者看不到品牌也按不到帳號。解法:consumer 讀 `useSidebar().isMobile` + `useAppShell().layout`,**mobile 時才**在 `<SidebarHeader>` 內放 `<WorkspaceBrand/>`(左)+ `flex-1` + `<AccountMenu/>`(右)= 把整條 globalHeader 鏡像進 Sheet 頂排(SidebarHeader 即 ChromeHeader 基底,結構 SSOT);**不放 `<SidebarFooter>`**(primary-header 帳號家在 header 區,footer 是 primary-sidebar 慣例)。**rule owner = `../AppShell/app-shell.spec.md`「帳號入口(Account entry)放置 SSOT」的 Responsive 精修子句**(本處不重述,Rule-of-3)。reference:`AppShell/_demo-helpers.tsx` `AcmeSidebar`。
602
602
 
603
603
  ---
604
604
 
package/src/components/Skeleton/skeleton.principles.stories.tsx CHANGED
@@ -47,11 +47,11 @@ export const UsageGuidance: Story = {
47
47
  <div className="prose prose-sm max-w-prose mb-8">
48
48
  <p>適合 Skeleton 的真實業務場景(點擊跳轉「展示」頁範例):</p>
49
49
  <ul className="space-y-1">
50
- <li><LinkTo kind="Design System/Components/Skeleton/展示" name="個人資料卡載入"><span className="text-primary hover:underline font-medium cursor-pointer">個人資料卡載入</span></LinkTo></li>
51
- <li><LinkTo kind="Design System/Components/Skeleton/展示" name="任務列表載入"><span className="text-primary hover:underline font-medium cursor-pointer">任務列表載入</span></LinkTo></li>
52
- <li><LinkTo kind="Design System/Components/Skeleton/展示" name="表格列載入"><span className="text-primary hover:underline font-medium cursor-pointer">表格列載入</span></LinkTo></li>
53
- <li><LinkTo kind="Design System/Components/Skeleton/展示" name="文件載入"><span className="text-primary hover:underline font-medium cursor-pointer">文件載入</span></LinkTo></li>
54
- <li><LinkTo kind="Design System/Components/Skeleton/展示" name="卡片網格載入"><span className="text-primary hover:underline font-medium cursor-pointer">卡片網格載入</span></LinkTo></li>
50
+ <li><LinkTo kind="Design System/Components/Skeleton/展示" name="個人資料卡載入"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">個人資料卡載入</span></LinkTo></li>
51
+ <li><LinkTo kind="Design System/Components/Skeleton/展示" name="任務列表載入"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">任務列表載入</span></LinkTo></li>
52
+ <li><LinkTo kind="Design System/Components/Skeleton/展示" name="表格列載入"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">表格列載入</span></LinkTo></li>
53
+ <li><LinkTo kind="Design System/Components/Skeleton/展示" name="文件載入"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">文件載入</span></LinkTo></li>
54
+ <li><LinkTo kind="Design System/Components/Skeleton/展示" name="卡片網格載入"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">卡片網格載入</span></LinkTo></li>
55
55
  </ul>
56
56
  <p className="text-fg-muted mt-3">判斷不確定時:先確認資料回來後的佈局是否已知;若不符合載入佔位的情境,改用近親元件(見下方「vs 近親元件」段)。</p>
57
57
  </div>
package/src/components/Slider/slider.principles.stories.tsx CHANGED
@@ -45,13 +45,13 @@ export const UsageGuidance: Story = {
45
45
  <p>適合 Slider 的真實業務場景(點擊跳轉「展示」頁範例):</p>
46
46
  <ul className="space-y-1">
47
47
  <li>
48
- <LinkTo kind="Design System/Components/Slider/展示" name="容器尺寸對齊"><span className="text-primary hover:underline font-medium cursor-pointer">表單內與 Input / NumberInput 並排的數值調整（容器尺寸對齊）</span></LinkTo>
48
+ <LinkTo kind="Design System/Components/Slider/展示" name="容器尺寸對齊"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">表單內與 Input / NumberInput 並排的數值調整（容器尺寸對齊）</span></LinkTo>
49
49
  </li>
50
50
  <li>
51
- <LinkTo kind="Design System/Components/Slider/展示" name="最小 / 最大 / 步階"><span className="text-primary hover:underline font-medium cursor-pointer">價格 / 數量等有上下限與步階的調整（最小 / 最大 / 步階）</span></LinkTo>
51
+ <LinkTo kind="Design System/Components/Slider/展示" name="最小 / 最大 / 步階"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">價格 / 數量等有上下限與步階的調整（最小 / 最大 / 步階）</span></LinkTo>
52
52
  </li>
53
53
  <li>
54
- <LinkTo kind="Design System/Components/Slider/展示" name="提交數值回呼"><span className="text-primary hover:underline font-medium cursor-pointer">拖曳即時預覽、放開才送出查詢（提交數值回呼）</span></LinkTo>
54
+ <LinkTo kind="Design System/Components/Slider/展示" name="提交數值回呼"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">拖曳即時預覽、放開才送出查詢（提交數值回呼）</span></LinkTo>
55
55
  </li>
56
56
  </ul>
57
57
  <p className="text-fg-muted mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,改用近親元件(見 <code>Vs*Rule</code> stories)。</p>
package/src/components/Steps/steps.principles.stories.tsx CHANGED
@@ -76,16 +76,16 @@ export const UsageGuidance: Story = {
76
76
  <p>適合 Steps 的真實業務場景(點擊跳轉「展示」頁範例):</p>
77
77
  <ul className="space-y-1">
78
78
  <li>
79
- <LinkTo kind="Design System/Components/Steps/展示" name="預設"><span className="text-primary hover:underline font-medium cursor-pointer">註冊申請精靈(預設)</span></LinkTo>
79
+ <LinkTo kind="Design System/Components/Steps/展示" name="預設"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">註冊申請精靈(預設)</span></LinkTo>
80
80
  </li>
81
81
  <li>
82
- <LinkTo kind="Design System/Components/Steps/展示" name="非線性"><span className="text-primary hover:underline font-medium cursor-pointer">工作區設定導覽(非線性)</span></LinkTo>
82
+ <LinkTo kind="Design System/Components/Steps/展示" name="非線性"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">工作區設定導覽(非線性)</span></LinkTo>
83
83
  </li>
84
84
  <li>
85
- <LinkTo kind="Design System/Components/Steps/展示" name="水平"><span className="text-primary hover:underline font-medium cursor-pointer">結帳流程進度(水平)</span></LinkTo>
85
+ <LinkTo kind="Design System/Components/Steps/展示" name="水平"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">結帳流程進度(水平)</span></LinkTo>
86
86
  </li>
87
87
  <li>
88
- <LinkTo kind="Design System/Components/Steps/展示" name="多重展開模式"><span className="text-primary hover:underline font-medium cursor-pointer">安裝指南逐步教學(多重展開模式)</span></LinkTo>
88
+ <LinkTo kind="Design System/Components/Steps/展示" name="多重展開模式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">安裝指南逐步教學(多重展開模式)</span></LinkTo>
89
89
  </li>
90
90
  </ul>
91
91
  <p className="text-fg-secondary mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,改用下方清單建議的近親元件。</p>
package/src/components/Switch/switch.principles.stories.tsx CHANGED
@@ -46,7 +46,7 @@ export const UsageGuidance: Story = {
46
46
  <p>適合 Switch 的真實業務場景(點擊跳轉「展示」頁範例):</p>
47
47
  <ul className="space-y-1">
48
48
  <li>
49
- <LinkTo kind="Design System/Components/Switch/展示" name="搭配標籤"><span className="text-primary hover:underline font-medium cursor-pointer">搭配標籤</span></LinkTo>
49
+ <LinkTo kind="Design System/Components/Switch/展示" name="搭配標籤"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">搭配標籤</span></LinkTo>
50
50
  </li>
51
51
  </ul>
52
52
  <p className="text-fg-muted mt-3">判斷不確定時,問自己:這是切換即生效的獨立開關,還是表單裡要按送出才成立的勾選?前者用 Switch,後者用 Checkbox。下面幾段有完整對照。</p>
package/src/components/Tabs/tabs.principles.stories.tsx CHANGED
@@ -51,13 +51,13 @@ export const UsageGuidance: Story = {
51
51
  <p>適合 Tabs 的真實業務場景(點擊跳轉「展示」頁範例):</p>
52
52
  <ul className="space-y-1">
53
53
  <li>
54
- <LinkTo kind="Design System/Components/Tabs/展示" name="帶後綴"><span className="text-primary hover:underline font-medium cursor-pointer">帶後綴</span></LinkTo>
54
+ <LinkTo kind="Design System/Components/Tabs/展示" name="帶後綴"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">帶後綴</span></LinkTo>
55
55
  </li>
56
56
  <li>
57
- <LinkTo kind="Design System/Components/Tabs/展示" name="溢出處理 — 水平捲動"><span className="text-primary hover:underline font-medium cursor-pointer">溢出處理 — 水平捲動</span></LinkTo>
57
+ <LinkTo kind="Design System/Components/Tabs/展示" name="溢出處理 — 水平捲動"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">溢出處理 — 水平捲動</span></LinkTo>
58
58
  </li>
59
59
  <li>
60
- <LinkTo kind="Design System/Components/Tabs/展示" name="溢出處理 — ⌄ 導覽選單"><span className="text-primary hover:underline font-medium cursor-pointer">溢出處理 — 收進選單</span></LinkTo>
60
+ <LinkTo kind="Design System/Components/Tabs/展示" name="溢出處理 — ⌄ 導覽選單"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">溢出處理 — 收進選單</span></LinkTo>
61
61
  </li>
62
62
  </ul>
63
63
  <p className="text-fg-muted mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,改用近親元件(見下方「vs 近親」)。</p>
package/src/components/Tag/tag.principles.stories.tsx CHANGED
@@ -47,9 +47,9 @@ export const UsageGuidance: Story = {
47
47
  <div className="prose prose-sm max-w-prose mb-8">
48
48
  <p>適合 Tag 的真實業務場景(點擊跳轉「展示」頁範例):</p>
49
49
  <ul className="space-y-1">
50
- <li><LinkTo kind="Design System/Components/Tag/展示" name="頭像"><span className="text-primary hover:underline font-medium cursor-pointer">頭像</span></LinkTo></li>
51
- <li><LinkTo kind="Design System/Components/Tag/展示" name="可移除"><span className="text-primary hover:underline font-medium cursor-pointer">可移除</span></LinkTo></li>
52
- <li><LinkTo kind="Design System/Components/Tag/展示" name="截斷 + Tooltip"><span className="text-primary hover:underline font-medium cursor-pointer">截斷 + Tooltip</span></LinkTo></li>
50
+ <li><LinkTo kind="Design System/Components/Tag/展示" name="頭像"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">頭像</span></LinkTo></li>
51
+ <li><LinkTo kind="Design System/Components/Tag/展示" name="可移除"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">可移除</span></LinkTo></li>
52
+ <li><LinkTo kind="Design System/Components/Tag/展示" name="截斷 + Tooltip"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">截斷 + Tooltip</span></LinkTo></li>
53
53
  </ul>
54
54
  <p className="text-fg-muted mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,改用近親元件(見下方 vs 近親 段)。</p>
55
55
  </div>
package/src/components/Textarea/textarea.principles.stories.tsx CHANGED
@@ -47,10 +47,10 @@ export const UsageGuidance: Story = {
47
47
  <p>適合 Textarea 的真實業務場景(點擊跳轉「展示」頁範例):</p>
48
48
  <ul className="space-y-1">
49
49
  <li>
50
- <LinkTo kind="Design System/Components/Textarea/展示" name="基本用法"><span className="text-primary hover:underline font-medium cursor-pointer">Issue 回報、評論留言等多行輸入(基本用法)</span></LinkTo>
50
+ <LinkTo kind="Design System/Components/Textarea/展示" name="基本用法"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Issue 回報、評論留言等多行輸入(基本用法)</span></LinkTo>
51
51
  </li>
52
52
  <li>
53
- <LinkTo kind="Design System/Components/Textarea/展示" name="在 Field 內"><span className="text-primary hover:underline font-medium cursor-pointer">表單內的專案說明、備註欄位(在 Field 內)</span></LinkTo>
53
+ <LinkTo kind="Design System/Components/Textarea/展示" name="在 Field 內"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">表單內的專案說明、備註欄位(在 Field 內)</span></LinkTo>
54
54
  </li>
55
55
  </ul>
56
56
  <p className="text-fg-secondary mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,見下方與 Input 的分界示範。</p>
package/src/components/TimePicker/time-picker.principles.stories.tsx CHANGED
@@ -39,19 +39,19 @@ export const UsageGuidance: Story = {
39
39
  <p>適合 TimePicker 的真實業務場景(點擊跳轉「展示」頁範例):</p>
40
40
  <ul className="space-y-1">
41
41
  <li>
42
- <LinkTo kind="Design System/Components/TimePicker/展示" name="會議時段"><span className="text-primary hover:underline font-medium cursor-pointer">會議時段</span></LinkTo>
42
+ <LinkTo kind="Design System/Components/TimePicker/展示" name="會議時段"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">會議時段</span></LinkTo>
43
43
  </li>
44
44
  <li>
45
- <LinkTo kind="Design System/Components/TimePicker/展示" name="航班起飛時間"><span className="text-primary hover:underline font-medium cursor-pointer">航班起飛時間</span></LinkTo>
45
+ <LinkTo kind="Design System/Components/TimePicker/展示" name="航班起飛時間"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">航班起飛時間</span></LinkTo>
46
46
  </li>
47
47
  <li>
48
- <LinkTo kind="Design System/Components/TimePicker/展示" name="店家營業時間"><span className="text-primary hover:underline font-medium cursor-pointer">店家營業時間</span></LinkTo>
48
+ <LinkTo kind="Design System/Components/TimePicker/展示" name="店家營業時間"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">店家營業時間</span></LinkTo>
49
49
  </li>
50
50
  <li>
51
- <LinkTo kind="Design System/Components/TimePicker/展示" name="事件發生時間"><span className="text-primary hover:underline font-medium cursor-pointer">事件發生時間</span></LinkTo>
51
+ <LinkTo kind="Design System/Components/TimePicker/展示" name="事件發生時間"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">事件發生時間</span></LinkTo>
52
52
  </li>
53
53
  <li>
54
- <LinkTo kind="Design System/Components/TimePicker/展示" name="員工上班時段設定"><span className="text-primary hover:underline font-medium cursor-pointer">員工上班時段設定</span></LinkTo>
54
+ <LinkTo kind="Design System/Components/TimePicker/展示" name="員工上班時段設定"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">員工上班時段設定</span></LinkTo>
55
55
  </li>
56
56
  </ul>
57
57
  <p className="text-fg-muted mt-3">不確定是否該用 TimePicker 時,先對照下方「何時不用」清單;若情境不符,改用清單建議的替代元件(例如同時要日期就用 DatePicker)。</p>
package/src/components/Toast/toast.principles.stories.tsx CHANGED
@@ -42,10 +42,10 @@ export const UsageGuidance: Story = {
42
42
  <p>適合 Toast 的真實業務場景(點擊跳轉「展示」頁範例):</p>
43
43
  <ul className="space-y-1">
44
44
  <li>
45
- <LinkTo kind="Design System/Components/Toast/展示" name="有標題與描述"><span className="text-primary hover:underline font-medium cursor-pointer">有 Title + Description</span></LinkTo>
45
+ <LinkTo kind="Design System/Components/Toast/展示" name="有標題與描述"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">有 Title + Description</span></LinkTo>
46
46
  </li>
47
47
  <li>
48
- <LinkTo kind="Design System/Components/Toast/展示" name="互動測試"><span className="text-primary hover:underline font-medium cursor-pointer">互動測試</span></LinkTo>
48
+ <LinkTo kind="Design System/Components/Toast/展示" name="互動測試"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">互動測試</span></LinkTo>
49
49
  </li>
50
50
  </ul>
51
51
  <p className="text-fg-muted mt-3">判斷不確定時:先看下方「何時用 / 何時不用」的對照;若訊息重要到使用者必須看到、或需要使用者確認,就不該用 Toast,改用 Alert(持久顯示)或 Dialog(阻斷確認)。</p>
package/src/components/Tooltip/tooltip.principles.stories.tsx CHANGED
@@ -49,13 +49,13 @@ export const UsageGuidance: Story = {
49
49
  <p>適合 Tooltip 的真實業務場景(點擊跳轉「展示」頁範例):</p>
50
50
  <ul className="space-y-1">
51
51
  <li>
52
- <LinkTo kind="Design System/Components/Tooltip/展示" name="非 Button 元素"><span className="text-primary hover:underline font-medium cursor-pointer">非 Button 元素</span></LinkTo>
52
+ <LinkTo kind="Design System/Components/Tooltip/展示" name="非 Button 元素"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">非 Button 元素</span></LinkTo>
53
53
  </li>
54
54
  <li>
55
- <LinkTo kind="Design System/Components/Tooltip/展示" name="方向"><span className="text-primary hover:underline font-medium cursor-pointer">方向</span></LinkTo>
55
+ <LinkTo kind="Design System/Components/Tooltip/展示" name="方向"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">方向</span></LinkTo>
56
56
  </li>
57
57
  <li>
58
- <LinkTo kind="Design System/Components/Tooltip/展示" name="長文字"><span className="text-primary hover:underline font-medium cursor-pointer">長文字</span></LinkTo>
58
+ <LinkTo kind="Design System/Components/Tooltip/展示" name="長文字"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">長文字</span></LinkTo>
59
59
  </li>
60
60
  </ul>
61
61
  <p className="text-fg-muted mt-3">判斷不確定時:回到「畫面上的資訊是否已足夠」這個核心問題;若提示需要被點擊或停留互動,改用近親元件(見下方「vs 近親」)。</p>
package/src/components/TreeView/tree-view.principles.stories.tsx CHANGED
@@ -45,11 +45,11 @@ export const UsageGuidance: Story = {
45
45
  <div className="prose prose-sm max-w-prose mb-8">
46
46
  <p>適合 TreeView 的真實業務場景(點擊跳轉「展示」頁範例):</p>
47
47
  <ul className="space-y-1">
48
- <li><LinkTo kind="Design System/Components/TreeView/展示" name="檔案瀏覽"><span className="text-primary hover:underline font-medium cursor-pointer">檔案瀏覽</span></LinkTo></li>
49
- <li><LinkTo kind="Design System/Components/TreeView/展示" name="步驟引導"><span className="text-primary hover:underline font-medium cursor-pointer">步驟引導</span></LinkTo></li>
50
- <li><LinkTo kind="Design System/Components/TreeView/展示" name="多選"><span className="text-primary hover:underline font-medium cursor-pointer">多選</span></LinkTo></li>
51
- <li><LinkTo kind="Design System/Components/TreeView/展示" name="長標籤"><span className="text-primary hover:underline font-medium cursor-pointer">長標籤</span></LinkTo></li>
52
- <li><LinkTo kind="Design System/Components/TreeView/展示" name="拖曳重排"><span className="text-primary hover:underline font-medium cursor-pointer">拖曳重排</span></LinkTo></li>
48
+ <li><LinkTo kind="Design System/Components/TreeView/展示" name="檔案瀏覽"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">檔案瀏覽</span></LinkTo></li>
49
+ <li><LinkTo kind="Design System/Components/TreeView/展示" name="步驟引導"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">步驟引導</span></LinkTo></li>
50
+ <li><LinkTo kind="Design System/Components/TreeView/展示" name="多選"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">多選</span></LinkTo></li>
51
+ <li><LinkTo kind="Design System/Components/TreeView/展示" name="長標籤"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">長標籤</span></LinkTo></li>
52
+ <li><LinkTo kind="Design System/Components/TreeView/展示" name="拖曳重排"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">拖曳重排</span></LinkTo></li>
53
53
  </ul>
54
54
  <p className="text-fg-muted mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,改用近親元件(見下方 vs 近親 段)。</p>
55
55
  </div>
package/src/components/TreeView/tree-view.stories.tsx CHANGED
@@ -245,7 +245,7 @@ export const DragAndDrop: Story = {
245
245
  {renderNodes(tree)}
246
246
  </TreeView>
247
247
  </div>
248
- <button type="button" onClick={() => setTree(INITIAL_TREE)} className="text-caption text-primary hover:underline cursor-pointer self-start">
248
+ <button type="button" onClick={() => setTree(INITIAL_TREE)} className="text-caption text-primary hover:text-primary-hover cursor-pointer self-start">
249
249
  重設
250
250
  </button>
251
251
  </div>
package/src/tokens/color/color.spec.md CHANGED
@@ -195,6 +195,8 @@ Icon 色彩 canonical 的 SSOT 住 `patterns/element-anatomy/item-anatomy.spec.m
195
195
  <a className="text-primary hover:text-primary-hover">查看詳情</a>
196
196
  ```
197
197
 
198
+ **連結 hover = 換色(`text-primary-hover`),不用底線** —— `text-primary hover:underline` 偏離 canonical。真元件 Breadcrumb / Button / RadioGroup 已遵循。**例外:`LinkInput` 是「外部連結值」顯示,刻意保留 hover 底線作為「可點開連結」affordance(見 `link-input.spec.md`),非 violator**。story 導覽連結由 `check_story_invariants.sh` R10 機械防 drift(P1 warn,豁免 `// @link-style-allow:`)。
199
+
198
200
  ### Status
199
201
 
200
202
  狀態色表達系統回饋，代表「系統在告訴你什麼」，不用於互動操作。