refactor(web): migrate user-pref + storybook hex literals to tokens (Sprint 2 follow-up #2)
Last 4 components hardcoding pigment hex now import resolved values from
@veza/design-system/tokens-generated. Drift fully killed in apps/web/src.
- context/audio-context/useAudioContextValue.ts : defaultVisualizer.color
imports ColorVizIndigo (was '#7c9dd6' literal).
- components/player/VisualizerSettingsModal.tsx : color picker swatches
use ColorViz{Indigo,Neutral,Sage,Gold,Vermillion} (5 viz pigments).
- components/settings/appearance/AppearanceSettingsView.tsx : ACCENT_PRESETS
use ColorViz{Indigo,Sage,Vermillion,Gold} for indigo/sage/vermillion/gold;
sakura kept as literal (not yet canonized — Sprint 2 follow-up).
- components/ui/DesignTokens.stories.tsx : full Storybook docs rewrite reflecting
v3.0 SUMI tokens (brand accent Mizu cyan, viz palette §4.5, functional dilutés,
kin/vermillion). Previous version showed wrong indigo as "Accent" — corrected.
Net: 32 → 0 hardcoded pigment hex literals in apps/web/src. Single source of
truth = packages/design-system/tokens/primitive/color.json. Typecheck OK.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
senke
parent
13bbcde32a
commit
f46d5ead6f
4 changed files with 66 additions and 28 deletions
|
|
@ -1,6 +1,13 @@
|
|||
import React from 'react';
|
||||
import { X, Activity } from 'lucide-react';
|
||||
import { useAudio, VisualizerSettings } from '../../context/AudioContext';
|
||||
import {
|
||||
ColorVizIndigo,
|
||||
ColorVizNeutral,
|
||||
ColorVizSage,
|
||||
ColorVizGold,
|
||||
ColorVizVermillion,
|
||||
} from '@veza/design-system/tokens-generated';
|
||||
|
||||
interface VisualizerSettingsModalProps {
|
||||
onClose: () => void;
|
||||
|
|
@ -15,7 +22,8 @@ export const VisualizerSettingsModal: React.FC<
|
|||
setVisualizerSettings({ ...visualizerSettings, [key]: value });
|
||||
};
|
||||
|
||||
const colors = ['#7c9dd6', '#a8a4a0', '#7a9e6c', '#c9a84c', '#d4634a'];
|
||||
// Data viz pigments (charte §4.5) — stored as hex in user prefs.
|
||||
const colors = [ColorVizIndigo, ColorVizNeutral, ColorVizSage, ColorVizGold, ColorVizVermillion];
|
||||
|
||||
return (
|
||||
<div className="absolute bottom-20 right-0 md:right-auto md:left-1/2 md:-translate-x-1/2 w-72 bg-card rounded-xl shadow-[0_8px_32px_rgba(26,26,30,0.18)] z-50 animate-fadeIn overflow-hidden">
|
||||
|
|
|
|||
|
|
@ -19,12 +19,22 @@ import { userService } from '@/services/userService';
|
|||
import { usePWA } from '@/hooks/usePWA';
|
||||
import { Download } from 'lucide-react';
|
||||
|
||||
// Theme accent picker — exposes data viz pigments as personal accent overrides.
|
||||
// Note: per CHARTE_GRAPHIQUE §4.4 rule 3, the canonical brand accent is Mizu cyan.
|
||||
// These presets are user-personalisation only (stored in user.preferences).
|
||||
import {
|
||||
ColorVizIndigo,
|
||||
ColorVizSage,
|
||||
ColorVizVermillion,
|
||||
ColorVizGold,
|
||||
} from '@veza/design-system/tokens-generated';
|
||||
|
||||
const ACCENT_PRESETS = [
|
||||
{ id: 'indigo', hue: 220, hex: '#7c9dd6' },
|
||||
{ id: 'sage', hue: 120, hex: '#7a9e6c' },
|
||||
{ id: 'vermillion', hue: 15, hex: '#d4634a' },
|
||||
{ id: 'gold', hue: 45, hex: '#c9a84c' },
|
||||
{ id: 'sakura', hue: 340, hex: '#e0a0b8' },
|
||||
{ id: 'indigo', hue: 220, hex: ColorVizIndigo },
|
||||
{ id: 'sage', hue: 120, hex: ColorVizSage },
|
||||
{ id: 'vermillion', hue: 15, hex: ColorVizVermillion },
|
||||
{ id: 'gold', hue: 45, hex: ColorVizGold },
|
||||
{ id: 'sakura', hue: 340, hex: '#e0a0b8' },
|
||||
];
|
||||
|
||||
export const AppearanceSettingsView: React.FC = () => {
|
||||
|
|
|
|||
|
|
@ -33,34 +33,53 @@ function DesignTokensShowcase() {
|
|||
return (
|
||||
<div className="space-y-8 p-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-heading font-bold mb-1">SUMI Design System v2.0</h2>
|
||||
<p className="text-muted-foreground">"L'encre et la lumière" — Ink and Light</p>
|
||||
<h2 className="text-2xl font-heading font-bold mb-1">SUMI Design System v3.0</h2>
|
||||
<p className="text-muted-foreground">"Lavis d'encre" — Ink wash. Source : packages/design-system/tokens/.</p>
|
||||
</div>
|
||||
|
||||
<TokenSection title="Pigments">
|
||||
<ColorSwatch name="Accent (Indigo)" value="#7c9dd6" cssVar="--sumi-accent" />
|
||||
<ColorSwatch name="Accent Hover" value="#93afe0" cssVar="--sumi-accent-hover" />
|
||||
<ColorSwatch name="Vermillion" value="#d4634a" cssVar="--sumi-vermillion" />
|
||||
<ColorSwatch name="Sage" value="#7a9e6c" cssVar="--sumi-sage" />
|
||||
<ColorSwatch name="Gold" value="#c9a84c" cssVar="--sumi-gold" />
|
||||
<ColorSwatch name="Live" value="#e05a5a" cssVar="--sumi-live" />
|
||||
<TokenSection title="Brand accent (Mizu — UI sole accent per charte §4.4)">
|
||||
<ColorSwatch name="Accent (Mizu cyan)" value="#0098B5" cssVar="--sumi-accent" />
|
||||
<ColorSwatch name="Accent Hover" value="#00B4D8" cssVar="--sumi-accent-hover" />
|
||||
<ColorSwatch name="Accent Active" value="#007A94" cssVar="--sumi-accent-active" />
|
||||
<ColorSwatch name="Accent Emphasis" value="#006B7F" cssVar="--sumi-accent-emphasis" />
|
||||
</TokenSection>
|
||||
|
||||
<TokenSection title="Backgrounds">
|
||||
<ColorSwatch name="Void" value="#0c0c0f" cssVar="--sumi-bg-void" />
|
||||
<ColorSwatch name="Base" value="#121215" cssVar="--sumi-bg-base" />
|
||||
<ColorSwatch name="Raised" value="#1a1a1f" cssVar="--sumi-bg-raised" />
|
||||
<ColorSwatch name="Overlay" value="#222228" cssVar="--sumi-bg-overlay" />
|
||||
<ColorSwatch name="Hover" value="#2a2a31" cssVar="--sumi-bg-hover" />
|
||||
<ColorSwatch name="Active" value="#32323a" cssVar="--sumi-bg-active" />
|
||||
<TokenSection title="Data viz palette (charts/waveforms ONLY — charte §4.5)">
|
||||
<ColorSwatch name="Indigo" value="#7c9dd6" cssVar="--sumi-viz-indigo" />
|
||||
<ColorSwatch name="Vermillion" value="#d4634a" cssVar="--sumi-viz-vermillion" />
|
||||
<ColorSwatch name="Sage" value="#7a9e6c" cssVar="--sumi-viz-sage" />
|
||||
<ColorSwatch name="Gold" value="#c9a84c" cssVar="--sumi-viz-gold" />
|
||||
<ColorSwatch name="Neutral" value="#a8a4a0" cssVar="--sumi-viz-neutral" />
|
||||
</TokenSection>
|
||||
|
||||
<TokenSection title="Functional (always diluted, max 60% opacity)">
|
||||
<ColorSwatch name="Sage (success)" value="rgba(90,140,100, 0.60)" cssVar="--sumi-sage" />
|
||||
<ColorSwatch name="Brick (error)" value="rgba(180,80,70, 0.55)" cssVar="--sumi-error" />
|
||||
<ColorSwatch name="Amber (warning)" value="rgba(190,150,60, 0.55)" cssVar="--sumi-gold" />
|
||||
<ColorSwatch name="Live" value="rgba(180,80,70, 0.55)" cssVar="--sumi-live" />
|
||||
</TokenSection>
|
||||
|
||||
<TokenSection title="Kin (gold leaf — decorative)">
|
||||
<ColorSwatch name="Kin" value="#b8860b" cssVar="--sumi-kin" />
|
||||
<ColorSwatch name="Vermillion" value="#a04050" cssVar="--sumi-vermillion" />
|
||||
</TokenSection>
|
||||
|
||||
<TokenSection title="Backgrounds (墨の濃淡 — dark theme)">
|
||||
<ColorSwatch name="Void" value="#0A0A0C" cssVar="--sumi-bg-void" />
|
||||
<ColorSwatch name="Base" value="#0D0D0F" cssVar="--sumi-bg-base" />
|
||||
<ColorSwatch name="Raised" value="#141416" cssVar="--sumi-bg-raised" />
|
||||
<ColorSwatch name="Overlay" value="#1A1A1E" cssVar="--sumi-bg-overlay" />
|
||||
<ColorSwatch name="Hover" value="#222226" cssVar="--sumi-bg-hover" />
|
||||
<ColorSwatch name="Active" value="#2A2A2F" cssVar="--sumi-bg-active" />
|
||||
</TokenSection>
|
||||
|
||||
<TokenSection title="Text">
|
||||
<ColorSwatch name="Primary" value="#f0ede8" cssVar="--sumi-text-primary" />
|
||||
<ColorSwatch name="Secondary" value="#a8a4a0" cssVar="--sumi-text-secondary" />
|
||||
<ColorSwatch name="Tertiary" value="#706c68" cssVar="--sumi-text-tertiary" />
|
||||
<ColorSwatch name="Disabled" value="#4a4844" cssVar="--sumi-text-disabled" />
|
||||
<ColorSwatch name="Link" value="#8baade" cssVar="--sumi-text-link" />
|
||||
<ColorSwatch name="Primary" value="#E8E3DB" cssVar="--sumi-text-primary" />
|
||||
<ColorSwatch name="Secondary" value="#9A958D" cssVar="--sumi-text-secondary" />
|
||||
<ColorSwatch name="Tertiary" value="#6B6660" cssVar="--sumi-text-tertiary" />
|
||||
<ColorSwatch name="Disabled" value="#3D3A35" cssVar="--sumi-text-disabled" />
|
||||
<ColorSwatch name="Inverse" value="#F2EDE6" cssVar="--sumi-text-inverse" />
|
||||
<ColorSwatch name="Link" value="#0098B5" cssVar="--sumi-text-link" />
|
||||
</TokenSection>
|
||||
|
||||
<div className="space-y-3">
|
||||
|
|
|
|||
|
|
@ -2,10 +2,11 @@ import { useState, useEffect, useRef } from 'react';
|
|||
import type { Track } from '@/types';
|
||||
import type { VisualizerSettings } from './types';
|
||||
import { mockTracks } from './mockTracks';
|
||||
import { ColorVizIndigo } from '@veza/design-system/tokens-generated';
|
||||
|
||||
const defaultVisualizer: VisualizerSettings = {
|
||||
mode: 'waveform',
|
||||
color: '#7c9dd6',
|
||||
color: ColorVizIndigo,
|
||||
sensitivity: 50,
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue