feat: add hex trail puzzle, level editor, and visual design guide

2026-09-08 21:45:44 +08:00
commit ef2724bb2e
63 changed files with 15036 additions and 0 deletions
@@ -0,0 +1,54 @@
+// Source of truth for the palette. Run npm run design after changing values.
+// See /Design.md for semantic pairings, ratios and component rules.
+export const THEME = Object.freeze({
+  background: '#A8BECF',
+  board: '#F2EEE5',
+  boardGrid: '#7C8B94',
+  track: '#6D808B',
+  trackHalo: '#DFE3E2',
+  surface: '#F7F6F2',
+  textPrimary: '#273B50',
+  textSecondary: '#314A5F',
+  primary: '#6652B8',
+  onPrimary: '#FFFFFF',
+  secondary: '#E4EAF0',
+  utility: '#52697E',
+  onUtility: '#FFFFFF',
+  selection: '#DFD9F3',
+  onSelection: '#3F327A',
+  disabled: '#CBD4DD',
+  onDisabled: '#526579',
+  input: '#FFFFFF',
+  reward: '#B9760C',
+  warning: '#A44825',
+  warningSurface: '#F9E3D2',
+  scrim: '#273B507A',
+  focus: '#3F327A',
+  // Approximate center pixels of the accepted, unchanged generated token art.
+  tileBlue: '#2392FD',
+  tilePink: '#FC3E80',
+  tileYellow: '#FDBC28',
+  tilePurple: '#874FFD',
+  arrowLight: '#FFFFFF',
+  arrowDark: '#273B50',
+});
+export const SURFACES = Object.freeze({
+  surface: 'surface', primary: 'primary', secondary: 'secondary', utility: 'utility',
+  warning: 'warningSurface', reward: 'reward', input: 'input', selection: 'selection',
+  disabled: 'disabled', tileBlue: 'tileBlue', tilePink: 'tilePink', tileYellow: 'tileYellow', tilePurple: 'tilePurple',
+});
+export const TYPOGRAPHY = Object.freeze({level:28,moves:32,dialogTitle:24,body:14,label:12,caption:11});
+export const MOTION = Object.freeze({pressMs:150,modalMs:420,starStartMs:300,starGapMs:190,collisionMs:1250});
+export const RADII = Object.freeze({control:14,dialog:24,small:8});
+export function luminance(hex){return hex.slice(1,7).match(/../g).map(v=>parseInt(v,16)/255).map(v=>v<=.04045?v/12.92:((v+.055)/1.055)**2.4).reduce((a,v,i)=>a+v*[.2126,.7152,.0722][i],0);}
+export function contrast(a,b){const x=luminance(a),y=luminance(b);return (Math.max(x,y)+.05)/(Math.min(x,y)+.05);}
+export const CONTRAST_PAIRS = [
+ ['正文 / 背景','textPrimary','background',4.5], ['辅助文字 / 背景','textSecondary','background',4.5],
+ ['正文 / 弹窗','textPrimary','surface',4.5], ['辅助文字 / 弹窗','textSecondary','surface',4.5],
+ ['主按钮文字','onPrimary','primary',4.5], ['工具图标','onUtility','utility',3],
+ ['次按钮文字','textPrimary','secondary',4.5], ['选中标签','onSelection','selection',4.5],
+ ['阻挡提示文字','warning','warningSurface',4.5], ['分格 / 棋盘','boardGrid','board',3],
+ ['轨道 / 棋盘','track','board',3], ['轨道 / 浅色外缘','track','trackHalo',3],
+ ['方向箭头 / 蓝棋子','arrowLight','tileBlue',3], ['方向箭头 / 粉棋子','arrowLight','tilePink',3],
+ ['方向箭头 / 黄棋子','arrowDark','tileYellow',3], ['方向箭头 / 紫棋子','arrowLight','tilePurple',3],
+];