fix(a11y): 无障碍与 lint 修复（对比度/alt 属性/触控目标收窄）+ Geist 本地字体系统

tailwind.config.js

@@ -9,17 +9,21 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        /* 重要：Tailwind v3 无法对纯 hex 的 CSS 变量套用 /50 这类透明度修饰符，
+           会生成无效 CSS 并静默失效（样式不报错，但效果不出现）。
+           故常用色改用 rgb(通道 / <alpha-value>) 形式 —— 无修饰符时 alpha 默认 1，
+           视觉结果与原来一致，同时 bg-brand/10、border-ink/30 等能正确编译。 */
         ink: {
-          DEFAULT: 'var(--color-ink)',
+          DEFAULT: 'rgb(var(--color-ink-rgb) / <alpha-value>)',
           light: 'var(--color-ink-light)',
           lighter: 'var(--color-ink-lighter)',
           rgb: 'var(--color-ink-rgb)',
         },
         brand: {
-          DEFAULT: 'var(--color-brand)',
+          DEFAULT: 'rgb(var(--color-brand-rgb) / <alpha-value>)',
           hover: 'var(--color-brand-hover)',
           light: 'var(--color-brand-light)',
-          soft: 'var(--color-brand-soft)',
+          soft: 'rgb(var(--color-brand-rgb) / calc(0.12 * <alpha-value>))',
           bg: 'var(--color-brand-bg)',
           rgb: 'var(--color-brand-rgb)',
           section: 'var(--color-brand-section)',
@@ -27,18 +31,20 @@ module.exports = {
           'section-muted': 'var(--color-brand-section-muted)',
         },
         accent: {
-          blue: 'var(--color-accent-blue)',
+          blue: 'rgb(var(--color-accent-blue-rgb) / <alpha-value>)',
           'blue-soft': 'var(--color-accent-blue-soft)',
-          teal: 'var(--color-accent-teal)',
+          teal: 'rgb(var(--color-accent-teal-rgb) / <alpha-value>)',
           'teal-soft': 'var(--color-accent-teal-soft)',
-          amber: 'var(--color-accent-amber)',
+          amber: 'rgb(var(--color-accent-amber-rgb) / <alpha-value>)',
           'amber-soft': 'var(--color-accent-amber-soft)',
-          purple: 'var(--color-accent-purple)',
+          purple: 'rgb(var(--color-accent-purple-rgb) / <alpha-value>)',
           'purple-soft': 'var(--color-accent-purple-soft)',
+          cyan: 'rgb(var(--color-accent-cyan-rgb) / <alpha-value>)',
+          'cyan-soft': 'var(--color-accent-cyan-soft)',
         },
         bg: {
-          primary: 'var(--color-bg-primary)',
-          secondary: 'var(--color-bg-secondary)',
+          primary: 'rgb(var(--color-bg-primary-rgb) / <alpha-value>)',
+          secondary: 'rgb(var(--color-bg-secondary-rgb) / <alpha-value>)',
           tertiary: 'var(--color-bg-tertiary)',
           section: 'var(--color-bg-section)',
           hover: 'var(--color-bg-hover)',
@@ -46,47 +52,53 @@ module.exports = {
         },
         text: {
           primary: 'var(--color-text-primary)',
-          secondary: 'var(--color-text-secondary)',
+          secondary: 'rgb(var(--color-text-secondary-rgb) / <alpha-value>)',
           tertiary: 'var(--color-text-tertiary)',
-          muted: 'var(--color-text-muted)',
+          muted: 'rgb(var(--color-text-muted-rgb) / <alpha-value>)',
           subtle: 'var(--color-text-subtle)',
           placeholder: 'var(--color-text-placeholder)',
           hint: 'var(--color-text-hint)',
           inverse: 'var(--color-text-inverse)',
         },
         border: {
-          primary: 'var(--color-border-primary)',
-          secondary: 'var(--color-border-secondary)',
-          accent: 'var(--color-border-accent)',
-          light: 'var(--color-border-light)',
-          dark: 'var(--color-border-dark)',
-          brand: 'var(--color-border-brand)',
+          primary: 'rgb(var(--color-border-primary-rgb) / <alpha-value>)',
+          secondary: 'rgb(var(--color-border-secondary-rgb) / <alpha-value>)',
+          accent: 'rgb(var(--color-border-accent-rgb) / <alpha-value>)',
+          light: 'rgb(var(--color-border-light-rgb) / <alpha-value>)',
+          dark: 'rgb(var(--color-border-dark-rgb) / <alpha-value>)',
+          brand: 'rgb(var(--color-border-brand-rgb) / <alpha-value>)',
         },
         link: {
           DEFAULT: 'var(--color-link)',
           hover: 'var(--color-link-hover)',
         },
         success: {
-          DEFAULT: 'var(--color-success)',
+          DEFAULT: 'rgb(var(--color-success-rgb) / <alpha-value>)',
           hover: 'var(--color-success-hover)',
           bg: 'var(--color-success-bg)',
           rgb: 'var(--color-success-rgb)',
+          /** 文字请用此变体：DEFAULT 仅 3.30:1，不达 AA */
+          text: 'var(--color-success-text)',
         },
         warning: {
-          DEFAULT: 'var(--color-warning)',
+          DEFAULT: 'rgb(var(--color-warning-rgb) / <alpha-value>)',
           hover: 'var(--color-warning-hover)',
           bg: 'var(--color-warning-bg)',
           rgb: 'var(--color-warning-rgb)',
+          /** 文字请用此变体：DEFAULT 仅 3.19:1，不达 AA */
+          text: 'var(--color-warning-text)',
         },
         error: {
-          DEFAULT: 'var(--color-error)',
+          DEFAULT: 'rgb(var(--color-error-rgb) / <alpha-value>)',
           hover: 'var(--color-error-hover)',
           bg: 'var(--color-error-bg)',
           rgb: 'var(--color-error-rgb)',
         },
         info: {
-          DEFAULT: 'var(--color-info)',
+          DEFAULT: 'rgb(var(--color-info-rgb) / <alpha-value>)',
           bg: 'var(--color-info-bg)',
+          /** 文字请用此变体：DEFAULT 仅 3.68:1，不达 AA */
+          text: 'var(--color-info-text)',
         },
         dark: {
           bg: 'var(--color-dark-bg)',