lfg2025/kaiser-natron
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates to new sections and design system page

Browse Source
This commit is contained in:
Dorian
2026-04-23 15:02:54 +01:00
parent b183c1c480
commit f001d65c7f
58 changed files with 500 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/i18n/messages.js
View File

@@ -49,6 +49,7 @@ const de = {
'ds.nav.typography': 'Typografie',
'ds.nav.radii': 'Radien',
'ds.nav.shadows': 'Schatten',
'ds.nav.motion': 'Motion',
'ds.nav.icons': 'Icons',
'ds.nav.buttons': 'Buttons',
'ds.nav.badges': 'Badges',
@@ -141,6 +142,33 @@ const de = {
'ds.shadows.md.note': 'Mittel — Hover des primären Buttons',
'ds.shadows.lg.note': 'Groß — schwebende Karten, Overlays',
// Motion
'ds.motion.title': 'Motion',
'ds.motion.description': 'Bewegung dient dem Verständnis, nicht der Dekoration. Drei UI-Dauern plus eine szenische Schleife, eine Standard-Kurve, und klare Regeln für Nutzer mit reduzierter Bewegung.',
'ds.motion.philosophy.title': 'Philosophie',
'ds.motion.principle.purpose': 'Nur animieren, wenn Hierarchie, Zustand oder Kontinuität erklärt werden. Dekorative Bewegung wird weggelassen.',
'ds.motion.principle.cadence': 'Drei Dauern, eine Kurve: 120ms für Zustand, 200ms für UI-Übergänge, 320ms für größere Reveals. --ease-out als Standard — Ankünfte wirken gesetzt, nicht schnippisch.',
'ds.motion.principle.scenic': 'Szenische Schleifen (Orbit, weiche Pulse) laufen linear über 10–20 s. Lang genug, um als Atmosphäre zu lesen, nie als tickende Uhr.',
'ds.motion.principle.reduced': 'prefers-reduced-motion wird immer respektiert. Schleifen einfrieren, Übergänge zusammenfallen lassen — wer Bewegung ablehnt, wird dafür nicht bestraft.',
'ds.motion.durations.title': 'Dauern',
'ds.motion.duration.fast.note': 'Zustand — Hover, Focus, Press.',
'ds.motion.duration.base.note': 'Standard-UI — Farbwechsel, Öffnen/Schließen.',
'ds.motion.duration.slow.note': 'Größere Reveals — Drawer, Overlays, Karten.',
'ds.motion.duration.scene.note': 'Szenische Wechsel — ganze Sektion, Route-Wechsel.',
'ds.motion.duration.orbit.note': 'Umgebungsschleifen — Orbit-Ringe, weiche Pulse.',
'ds.motion.easings.title': 'Kurven',
'ds.motion.ease.out.note': 'Standard. Ankünfte landen weich.',
'ds.motion.ease.inOut.note': 'Nur wenn ein Element kommen und wieder gehen muss.',
'ds.motion.ease.linear.note': 'Für mechanische Schleifen — Orbit, Spinner.',
'ds.motion.animations.title': 'Benannte Animationen',
'ds.motion.animate.orbit.note': 'Ring rotiert um ein zentriertes Icon. Verwendet im Revitalization-Abschnitt.',
'ds.motion.animate.fadeInUp.note': 'Einblenden mit 8 px Versatz — für Eintrittsmomente.',
'ds.motion.animate.pulseSoft.note': 'Ruhiger Opazitäts-Puls — für Live-Indikatoren.',
'ds.motion.reduced.title': 'Reduzierte Bewegung',
'ds.motion.reduced.body': 'Globale Regel in motion.css: bei prefers-reduced-motion: reduce kollabieren alle Animations- und Transition-Dauern auf ~0 ms. Komponenten brauchen keine eigenen Weichen dafür.',
'ds.motion.replay': 'Neu abspielen',
'ds.motion.fadePreview': 'Einblenden',
// Icons
'ds.icons.title': 'Icons',
'ds.icons.description': 'Ein kuratiertes strich-basiertes Icon-Set im 24x24-Raster. Wird über die Icon-Komponente gerendert — erbt die Farbe von currentColor.',
@@ -407,6 +435,7 @@ const en = {
'ds.nav.typography': 'Typography',
'ds.nav.radii': 'Radii',
'ds.nav.shadows': 'Shadows',
'ds.nav.motion': 'Motion',
'ds.nav.icons': 'Icons',
'ds.nav.buttons': 'Buttons',
'ds.nav.badges': 'Badges',
@@ -491,6 +520,33 @@ const en = {
'ds.shadows.md.note': 'Medium — primary button hover',
'ds.shadows.lg.note': 'Large — floating cards, overlays',
// Motion
'ds.motion.title': 'Motion',
'ds.motion.description': 'Motion serves comprehension, not decoration. Three UI durations plus one scenic loop, one default curve, and a clear rule for reduced-motion users.',
'ds.motion.philosophy.title': 'Philosophy',
'ds.motion.principle.purpose': 'Only animate when it teaches hierarchy, state, or continuity. Decorative motion gets cut.',
'ds.motion.principle.cadence': 'Three durations, one curve: 120ms for state, 200ms for UI transitions, 320ms for larger reveals. --ease-out is the default — arrivals feel settled, not snappy.',
'ds.motion.principle.scenic': 'Scenic loops (orbit, soft pulses) run linear over 10–20s. Long enough to read as atmosphere, never as a ticking clock.',
'ds.motion.principle.reduced': 'prefers-reduced-motion is always honoured. Freeze loops, collapse transitions — never punish a user for opting out.',
'ds.motion.durations.title': 'Durations',
'ds.motion.duration.fast.note': 'State — hover, focus, press.',
'ds.motion.duration.base.note': 'Standard UI — colour change, open/close.',
'ds.motion.duration.slow.note': 'Larger reveals — drawer, overlays, cards.',
'ds.motion.duration.scene.note': 'Scenic changes — full section, route transitions.',
'ds.motion.duration.orbit.note': 'Ambient loops — orbit rings, soft pulses.',
'ds.motion.easings.title': 'Easings',
'ds.motion.ease.out.note': 'Default. Arrivals land softly.',
'ds.motion.ease.inOut.note': 'Only when an element must come and go.',
'ds.motion.ease.linear.note': 'For mechanical loops — orbit, spinners.',
'ds.motion.animations.title': 'Named animations',
'ds.motion.animate.orbit.note': 'Ring rotates around a centered icon. Used in the Revitalization section.',
'ds.motion.animate.fadeInUp.note': 'Fade with an 8px rise — for entrance moments.',
'ds.motion.animate.pulseSoft.note': 'Quiet opacity pulse — for live indicators.',
'ds.motion.reduced.title': 'Reduced motion',
'ds.motion.reduced.body': 'Global rule in motion.css: under prefers-reduced-motion: reduce, all animation and transition durations collapse to ~0ms. Components do not need their own switch.',
'ds.motion.replay': 'Replay',
'ds.motion.fadePreview': 'Fade in',
'ds.icons.title': 'Icons',
'ds.icons.description': 'A curated stroke-based icon set on a 24x24 grid. Rendered via the Icon component — inherits color from currentColor.',
'ds.icons.search': 'Search icons…',