product cards and containerisation
This commit is contained in:
Dorian
403
src/i18n/messages.js
Normal file
403
src/i18n/messages.js
Normal file
@@ -0,0 +1,403 @@
|
||||
// i18n message catalog. Keyed strings, lookup order: current locale → default → key itself.
|
||||
// DE is the base. AT inherits DE and overrides only Austrian-specific terms.
|
||||
// EN is a separate catalog.
|
||||
|
||||
const de = {
|
||||
// Navbar (also used by the Navbar preview)
|
||||
'nav.shop': 'Shop',
|
||||
'nav.applications': 'Anwendungen',
|
||||
'nav.about': 'Über uns',
|
||||
'nav.contact': 'Kontakt',
|
||||
'cart.open': 'Warenkorb öffnen',
|
||||
'cart.label': 'Warenkorb',
|
||||
'menu.open': 'Menü öffnen',
|
||||
'menu.close': 'Menü schließen',
|
||||
'language.label': 'Sprache',
|
||||
|
||||
// Design-system sidebar
|
||||
'ds.sidebar.brand': 'Marke',
|
||||
'ds.sidebar.tokens': 'Tokens',
|
||||
'ds.sidebar.components': 'Komponenten',
|
||||
'ds.sidebar.back': '← Zurück zur Website',
|
||||
'ds.nav.logo': 'Logo',
|
||||
'ds.nav.colors': 'Farben',
|
||||
'ds.nav.typography': 'Typografie',
|
||||
'ds.nav.radii': 'Radien',
|
||||
'ds.nav.shadows': 'Schatten',
|
||||
'ds.nav.icons': 'Icons',
|
||||
'ds.nav.buttons': 'Buttons',
|
||||
'ds.nav.badges': 'Badges',
|
||||
'ds.nav.inputs': 'Eingabefelder',
|
||||
'ds.nav.cards': 'Karten',
|
||||
'ds.nav.products': 'Produktkarten',
|
||||
'ds.nav.navbar': 'Navigation',
|
||||
'ds.nav.language': 'Sprachwahl',
|
||||
|
||||
// Common section eyebrows
|
||||
'ds.eyebrow.brand': 'Marke',
|
||||
'ds.eyebrow.tokens': 'Tokens',
|
||||
'ds.eyebrow.components': 'Komponenten',
|
||||
'ds.eyebrow.designSystem': 'Design System',
|
||||
|
||||
// Common section headings
|
||||
'ds.heading.variants': 'Varianten',
|
||||
'ds.heading.sizes': 'Größen',
|
||||
'ds.heading.states': 'Zustände',
|
||||
'ds.heading.withIcons': 'Mit Icons',
|
||||
'ds.heading.onBrandSurface': 'Auf Markenfläche',
|
||||
'ds.heading.block': 'Block',
|
||||
'ds.heading.usage': 'Verwendung',
|
||||
'ds.heading.default': 'Standard',
|
||||
'ds.heading.tones': 'Töne',
|
||||
'ds.heading.interactive': 'Interaktiv',
|
||||
'ds.heading.withoutPadding': 'Ohne Innenabstand',
|
||||
'ds.heading.scale': 'Skala',
|
||||
'ds.heading.display': 'Display',
|
||||
'ds.heading.body': 'Fließtext',
|
||||
'ds.heading.nonUppercase': 'Ohne Großbuchstaben',
|
||||
'ds.heading.onDifferentSurfaces': 'Auf verschiedenen Flächen',
|
||||
'ds.heading.greenOnPaper': 'Grün auf Papier',
|
||||
'ds.heading.creamOnBrand': 'Creme auf Markengrün',
|
||||
|
||||
// Logo
|
||||
'ds.logo.title': 'Logo',
|
||||
'ds.logo.description': 'Ein einzelnes SVG, das die Farbe über CSS `color` erbt. Verwende das grüne Wortbild auf hellen Flächen und das cremefarbene auf dem Markengrün.',
|
||||
'ds.logo.usageIntro': 'Farbe über Utility-Klassen setzen:',
|
||||
|
||||
// Colors
|
||||
'ds.colors.title': 'Farben',
|
||||
'ds.colors.description': 'Pinie-Grün auf Creme mit warmem Gelb als Akzent. Alle UI-Farben fließen aus diesen Tokens — niemals Werte in Komponenten hartkodieren.',
|
||||
'ds.colors.group.brand': 'Marke',
|
||||
'ds.colors.group.accent': 'Akzent',
|
||||
'ds.colors.group.surface': 'Fläche',
|
||||
'ds.colors.group.ink': 'Schrift',
|
||||
'ds.colors.group.line': 'Linie',
|
||||
'ds.colors.group.semantic': 'Semantisch',
|
||||
|
||||
// Typography
|
||||
'ds.typography.title': 'Typografie',
|
||||
'ds.typography.description': 'Fraunces für Display — warm, organisch, mit optischen Größen. DM Sans für Fließtext und UI — klar und geometrisch.',
|
||||
'ds.typography.serifDesc': 'Serife mit optischer Skalierung. Für Hero-Bereiche, Section-Titel und Produktnamen.',
|
||||
'ds.typography.sansDesc': 'Klare geometrische Sans-Serif. Für Fließtext, UI, Navigation und Labels.',
|
||||
'ds.typography.sample': 'Der schnelle braune Fuchs',
|
||||
|
||||
// Radii
|
||||
'ds.radii.title': 'Radien',
|
||||
'ds.radii.description': 'Von dezenten 6px an kleinen Elementen bis hin zu vollen Pillen auf Buttons. Passend zum weichen, organischen Gefühl der Referenzseite.',
|
||||
|
||||
// Shadows
|
||||
'ds.shadows.title': 'Schatten',
|
||||
'ds.shadows.description': 'Alle Schatten sind grünlich statt neutral schwarz getönt — sie wirken warm und sind Teil der Palette.',
|
||||
'ds.shadows.sm.note': 'Dezent — Nav beim Scrollen, ruhende Karten',
|
||||
'ds.shadows.md.note': 'Mittel — Hover des primären Buttons',
|
||||
'ds.shadows.lg.note': 'Groß — schwebende Karten, Overlays',
|
||||
|
||||
// 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.',
|
||||
'ds.icons.search': 'Icons suchen…',
|
||||
'ds.icons.copyHint': 'Klick auf eine Kachel kopiert das Snippet.',
|
||||
'ds.icons.copied': 'Kopiert!',
|
||||
'ds.icons.noMatch': 'Keine Icons stimmen mit',
|
||||
'ds.icons.sizeDefault': '20 (Standard)',
|
||||
'ds.icons.addHint': 'Neue Icons in %s hinzufügen. Nutze eine 24×24-viewBox, strichbasierte Pfade ohne Füllungen — die Komponente übernimmt die Farbe per %s. Gib %s für Screenreader an; weglassen bei dekorativen Icons.',
|
||||
'ds.icons.group.commerce': 'Commerce',
|
||||
'ds.icons.group.navigation': 'Navigation',
|
||||
'ds.icons.group.actions': 'Aktionen',
|
||||
'ds.icons.group.contact': 'Kontakt',
|
||||
'ds.icons.group.feedback': 'Feedback',
|
||||
'ds.icons.group.devices': 'Geräte',
|
||||
|
||||
// Buttons
|
||||
'ds.buttons.title': 'Buttons',
|
||||
'ds.buttons.description': 'Pillenförmig. Pinie-grüner Primary mit warmgelbem Label für die wichtigste Aktion, warmgelber Accent auf Markenflächen, plus Secondary-, Ghost- und Danger-Varianten.',
|
||||
'ds.buttons.primary': 'Primary',
|
||||
'ds.buttons.accent': 'Accent',
|
||||
'ds.buttons.secondary': 'Secondary',
|
||||
'ds.buttons.ghost': 'Ghost',
|
||||
'ds.buttons.danger': 'Danger',
|
||||
'ds.buttons.small': 'Klein',
|
||||
'ds.buttons.medium': 'Mittel',
|
||||
'ds.buttons.large': 'Groß',
|
||||
'ds.buttons.disabled': 'Deaktiviert',
|
||||
'ds.buttons.loading': 'Lädt',
|
||||
'ds.buttons.addToCart': 'In den Warenkorb',
|
||||
'ds.buttons.learnMore': 'Mehr erfahren',
|
||||
'ds.buttons.save': 'Merken',
|
||||
'ds.buttons.confirm': 'Bestätigen',
|
||||
'ds.buttons.continueShopping': 'Weiter einkaufen',
|
||||
|
||||
// Badges
|
||||
'ds.badges.title': 'Badges',
|
||||
'ds.badges.description': 'Kleine Großbuchstaben-Labels für Metadaten, Status und Eyebrows über Überschriften.',
|
||||
'ds.badges.neutral': 'Neutral',
|
||||
'ds.badges.brand': 'Marke',
|
||||
'ds.badges.accent': 'Akzent',
|
||||
'ds.badges.subtle': 'Dezent',
|
||||
'ds.badges.success': 'Erfolg',
|
||||
'ds.badges.warning': 'Warnung',
|
||||
'ds.badges.danger': 'Fehler',
|
||||
'ds.badges.newRelease': 'Neu veröffentlicht',
|
||||
'ds.badges.featured': 'Empfohlen',
|
||||
|
||||
// Inputs
|
||||
'ds.inputs.title': 'Eingabefelder',
|
||||
'ds.inputs.description': 'Papier-Fläche mit dünnem grün getöntem Rahmen. Großbuchstaben-Labels. Der Fokus vertieft den Rahmen zu Markengrün.',
|
||||
'ds.inputs.email': 'E-Mail',
|
||||
'ds.inputs.emailHint': 'Wir teilen dies nie.',
|
||||
'ds.inputs.password': 'Passwort',
|
||||
'ds.inputs.required': 'Pflichtfeld',
|
||||
'ds.inputs.requiredError': 'Dieses Feld ist erforderlich',
|
||||
'ds.inputs.disabled': 'Deaktiviert',
|
||||
'ds.inputs.disabledPlaceholder': 'Hier geht nichts',
|
||||
|
||||
// Cards
|
||||
'ds.cards.title': 'Karten',
|
||||
'ds.cards.description': 'Flächen zum Gruppieren von Inhalten. Drei Töne — Papier, Creme, Marke — und ein optionales interaktives Anheben beim Hover.',
|
||||
'ds.cards.paper': 'Papier',
|
||||
'ds.cards.cream': 'Creme',
|
||||
'ds.cards.brand': 'Marke',
|
||||
'ds.cards.paperTitle': 'Standardfläche',
|
||||
'ds.cards.paperBody': 'Die erste Wahl für die meisten Inhalte. Hoher Kontrast auf dem cremefarbenen Seitenhintergrund.',
|
||||
'ds.cards.creamTitle': 'Warme Fläche',
|
||||
'ds.cards.creamBody': 'Eine weichere Alternative für sekundäre Bereiche oder Callouts.',
|
||||
'ds.cards.brandTitle': 'Dunkle Fläche',
|
||||
'ds.cards.brandBody': 'Für Feature-Panels, CTAs und Momente, die auffallen wollen.',
|
||||
'ds.cards.hoverMe': 'Hover mich',
|
||||
'ds.cards.hoverMeToo': 'Mich auch',
|
||||
'ds.cards.hoverBody': 'Hebt sich beim Hover mit weichem grün getönten Schatten. Für klickbare Items im Raster.',
|
||||
'ds.cards.hoverBodyAlt': 'Gleiches Verhalten auf der warmen Fläche.',
|
||||
'ds.cards.mediaTitle': 'Media-Karte',
|
||||
'ds.cards.mediaBody': 'Wenn die Karte ein randloses Bild oder einen Header braucht, übergib',
|
||||
|
||||
// Product card
|
||||
'ds.product.title': 'Produktkarte',
|
||||
'ds.product.description': 'Zusammengesetzt aus Karte, Badge, Button und Icon. Cutout-Bild auf einer Creme-Medienfläche, Titel mit Größe, Preis in der Markenfarbe und ein blockweiter „In den Warenkorb"-Primary.',
|
||||
'ds.product.outOfStock': 'Nicht verfügbar',
|
||||
'ds.product.added': 'Hinzugefügt',
|
||||
|
||||
// Navbar section
|
||||
'ds.navbar.title': 'Navigation',
|
||||
'ds.navbar.description': 'Logo + Nav + Warenkorb, in drei Flächentönen. Auf Mobilgeräten behält die obere Leiste das Logo, Menü + Warenkorb wechseln in ein ergonomisches bodennahes rechtes Floating-Cluster. Das Menü öffnet ein vollflächiges markengrünes Overlay.',
|
||||
'ds.navbar.tone': 'Navigation-Ton',
|
||||
'ds.navbar.tone.paper': 'Papier',
|
||||
'ds.navbar.tone.cream': 'Creme',
|
||||
'ds.navbar.tone.brand': 'Marke',
|
||||
'ds.navbar.layout': 'Layout',
|
||||
'ds.navbar.layout.standard': 'Standard',
|
||||
'ds.navbar.layout.floating': 'Schwebend',
|
||||
|
||||
// Language switcher section
|
||||
'ds.language.title': 'Sprachwahl',
|
||||
'ds.language.description': 'Kompakte Pille zum Umschalten zwischen DE, AT und EN. Zwei Töne — Papier für helle Flächen, Marke für das Markengrün — plus ein schwebender Modus, der sich oben rechts an die Ecke heftet.',
|
||||
'ds.language.paperNote': 'Standardton für helle UI-Flächen wie Karten oder Toolbars.',
|
||||
'ds.language.creamNote': 'Stärkerer Rahmen, damit die Pille auf warmen Cremflächen Definition behält.',
|
||||
'ds.language.brandNote': 'Für Einsätze auf dem Markengrün — z. B. im mobilen Menü-Overlay.',
|
||||
'ds.language.floating': 'Schwebend',
|
||||
'ds.language.floatingNote': 'Mit dem Prop `floating` dockt die Pille rechts oben im Viewport an (24px Abstand). Genau so wird sie im Design-System oben rechts eingesetzt.',
|
||||
}
|
||||
|
||||
// Austrian German (Österreichisches Deutsch) overrides.
|
||||
// For technical UI copy, AT ≈ DE — most UI terms are identical in formal writing.
|
||||
// The authentic distinctions cluster around: shopping vocabulary, "retour" (← zurück),
|
||||
// and a handful of workplace/web terms. Dialect forms (Wienerisch etc.) are intentionally
|
||||
// avoided here since the brand's formal voice is standard Austrian, not dialect.
|
||||
const atOverrides = {
|
||||
// Shopping — the clearest DE/AT split
|
||||
'cart.open': 'Einkaufstasche öffnen',
|
||||
'cart.label': 'Einkaufstasche',
|
||||
'ds.buttons.addToCart': 'In die Einkaufstasche',
|
||||
'ds.buttons.continueShopping': 'Weiter einkaufen gehen',
|
||||
'ds.buttons.save': 'Vormerken',
|
||||
|
||||
// "Retour" is strongly associated with Austrian commerce/admin usage
|
||||
'ds.sidebar.back': '← Retour zur Seite',
|
||||
|
||||
// Month/date terms would go here (Jänner/Feber) if we had any — kept for future use
|
||||
// No-op strings that stay identical to DE are intentionally omitted: redundancy hurts
|
||||
// clarity and hides the places where AT genuinely differs.
|
||||
}
|
||||
|
||||
const en = {
|
||||
'nav.shop': 'Shop',
|
||||
'nav.applications': 'Uses',
|
||||
'nav.about': 'About',
|
||||
'nav.contact': 'Contact',
|
||||
'cart.open': 'Open cart',
|
||||
'cart.label': 'Cart',
|
||||
'menu.open': 'Open menu',
|
||||
'menu.close': 'Close menu',
|
||||
'language.label': 'Language',
|
||||
|
||||
'ds.sidebar.brand': 'Brand',
|
||||
'ds.sidebar.tokens': 'Tokens',
|
||||
'ds.sidebar.components': 'Components',
|
||||
'ds.sidebar.back': '← Back to site',
|
||||
'ds.nav.logo': 'Logo',
|
||||
'ds.nav.colors': 'Colors',
|
||||
'ds.nav.typography': 'Typography',
|
||||
'ds.nav.radii': 'Radii',
|
||||
'ds.nav.shadows': 'Shadows',
|
||||
'ds.nav.icons': 'Icons',
|
||||
'ds.nav.buttons': 'Buttons',
|
||||
'ds.nav.badges': 'Badges',
|
||||
'ds.nav.inputs': 'Inputs',
|
||||
'ds.nav.cards': 'Cards',
|
||||
'ds.nav.products': 'Product cards',
|
||||
'ds.nav.navbar': 'Navbar',
|
||||
'ds.nav.language': 'Language',
|
||||
|
||||
'ds.eyebrow.brand': 'Brand',
|
||||
'ds.eyebrow.tokens': 'Tokens',
|
||||
'ds.eyebrow.components': 'Components',
|
||||
'ds.eyebrow.designSystem': 'Design system',
|
||||
|
||||
'ds.heading.variants': 'Variants',
|
||||
'ds.heading.sizes': 'Sizes',
|
||||
'ds.heading.states': 'States',
|
||||
'ds.heading.withIcons': 'With icons',
|
||||
'ds.heading.onBrandSurface': 'On brand surface',
|
||||
'ds.heading.block': 'Block',
|
||||
'ds.heading.usage': 'Usage',
|
||||
'ds.heading.default': 'Default',
|
||||
'ds.heading.tones': 'Tones',
|
||||
'ds.heading.interactive': 'Interactive',
|
||||
'ds.heading.withoutPadding': 'Without padding',
|
||||
'ds.heading.scale': 'Scale',
|
||||
'ds.heading.display': 'Display',
|
||||
'ds.heading.body': 'Body',
|
||||
'ds.heading.nonUppercase': 'Non-uppercase',
|
||||
'ds.heading.onDifferentSurfaces': 'On different surfaces',
|
||||
'ds.heading.greenOnPaper': 'Green on paper',
|
||||
'ds.heading.creamOnBrand': 'Cream on brand green',
|
||||
|
||||
'ds.logo.title': 'Logo',
|
||||
'ds.logo.description': 'A single SVG component that inherits its fill from CSS `color`. Use the green wordmark on light surfaces and the cream wordmark on the brand green.',
|
||||
'ds.logo.usageIntro': 'Use color utilities to set the fill:',
|
||||
|
||||
'ds.colors.title': 'Colors',
|
||||
'ds.colors.description': 'Pine green on cream, with a warm yellow accent. All UI color flows from these tokens — never hand-pick values in components.',
|
||||
'ds.colors.group.brand': 'Brand',
|
||||
'ds.colors.group.accent': 'Accent',
|
||||
'ds.colors.group.surface': 'Surface',
|
||||
'ds.colors.group.ink': 'Ink',
|
||||
'ds.colors.group.line': 'Line',
|
||||
'ds.colors.group.semantic': 'Semantic',
|
||||
|
||||
'ds.typography.title': 'Typography',
|
||||
'ds.typography.description': 'Fraunces for display — warm, organic, optical-sized. DM Sans for body and UI — clean and geometric.',
|
||||
'ds.typography.serifDesc': 'Serif with optical sizing. Use for hero, section titles, product names.',
|
||||
'ds.typography.sansDesc': 'Clean geometric sans. Use for body, UI, navigation, labels.',
|
||||
'ds.typography.sample': 'The quick brown fox',
|
||||
|
||||
'ds.radii.title': 'Radii',
|
||||
'ds.radii.description': "From subtle 6px rounding on small elements to full pills on buttons. Matches the reference site's soft, organic feel.",
|
||||
|
||||
'ds.shadows.title': 'Shadows',
|
||||
'ds.shadows.description': 'All shadows are tinted green rather than neutral black — they feel warm and part of the palette.',
|
||||
'ds.shadows.sm.note': 'Subtle — nav on scroll, resting cards',
|
||||
'ds.shadows.md.note': 'Medium — primary button hover',
|
||||
'ds.shadows.lg.note': 'Large — floating cards, overlays',
|
||||
|
||||
'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…',
|
||||
'ds.icons.copyHint': 'Click a tile to copy its snippet.',
|
||||
'ds.icons.copied': 'Copied!',
|
||||
'ds.icons.noMatch': 'No icons match',
|
||||
'ds.icons.sizeDefault': '20 (default)',
|
||||
'ds.icons.addHint': 'Add new icons in %s. Use a 24×24 viewBox, stroke-based paths, no fills — the component handles color via %s. Pass %s for screen readers; omit it for decorative icons.',
|
||||
'ds.icons.group.commerce': 'Commerce',
|
||||
'ds.icons.group.navigation': 'Navigation',
|
||||
'ds.icons.group.actions': 'Actions',
|
||||
'ds.icons.group.contact': 'Contact',
|
||||
'ds.icons.group.feedback': 'Feedback',
|
||||
'ds.icons.group.devices': 'Devices',
|
||||
|
||||
'ds.buttons.title': 'Buttons',
|
||||
'ds.buttons.description': 'Pill-shaped. Pine-green primary with warm-yellow label for the main call to action, warm-yellow accent on brand surfaces, plus secondary, ghost, and danger variants.',
|
||||
'ds.buttons.primary': 'Primary',
|
||||
'ds.buttons.accent': 'Accent',
|
||||
'ds.buttons.secondary': 'Secondary',
|
||||
'ds.buttons.ghost': 'Ghost',
|
||||
'ds.buttons.danger': 'Danger',
|
||||
'ds.buttons.small': 'Small',
|
||||
'ds.buttons.medium': 'Medium',
|
||||
'ds.buttons.large': 'Large',
|
||||
'ds.buttons.disabled': 'Disabled',
|
||||
'ds.buttons.loading': 'Loading',
|
||||
'ds.buttons.addToCart': 'Add to cart',
|
||||
'ds.buttons.learnMore': 'Learn more',
|
||||
'ds.buttons.save': 'Save',
|
||||
'ds.buttons.confirm': 'Confirm',
|
||||
'ds.buttons.continueShopping': 'Continue shopping',
|
||||
|
||||
'ds.badges.title': 'Badges',
|
||||
'ds.badges.description': 'Small uppercase labels for metadata, status, and eyebrows above headings.',
|
||||
'ds.badges.neutral': 'Neutral',
|
||||
'ds.badges.brand': 'Brand',
|
||||
'ds.badges.accent': 'Accent',
|
||||
'ds.badges.subtle': 'Subtle',
|
||||
'ds.badges.success': 'Success',
|
||||
'ds.badges.warning': 'Warning',
|
||||
'ds.badges.danger': 'Danger',
|
||||
'ds.badges.newRelease': 'New release',
|
||||
'ds.badges.featured': 'Featured',
|
||||
|
||||
'ds.inputs.title': 'Inputs',
|
||||
'ds.inputs.description': 'Paper surface with a thin green-tinted border. Uppercase eyebrow labels. Focus deepens the border to brand green.',
|
||||
'ds.inputs.email': 'Email',
|
||||
'ds.inputs.emailHint': 'We never share this.',
|
||||
'ds.inputs.password': 'Password',
|
||||
'ds.inputs.required': 'Required field',
|
||||
'ds.inputs.requiredError': 'This field is required',
|
||||
'ds.inputs.disabled': 'Disabled',
|
||||
'ds.inputs.disabledPlaceholder': "Can't type here",
|
||||
|
||||
'ds.cards.title': 'Cards',
|
||||
'ds.cards.description': 'Surfaces for grouping content. Three tones — paper, cream, brand — and an optional interactive lift on hover.',
|
||||
'ds.cards.paper': 'Paper',
|
||||
'ds.cards.cream': 'Cream',
|
||||
'ds.cards.brand': 'Brand',
|
||||
'ds.cards.paperTitle': 'Default surface',
|
||||
'ds.cards.paperBody': 'The go-to card for most content. High contrast on the cream page background.',
|
||||
'ds.cards.creamTitle': 'Warm surface',
|
||||
'ds.cards.creamBody': 'A softer alternative for secondary sections or callouts.',
|
||||
'ds.cards.brandTitle': 'Dark surface',
|
||||
'ds.cards.brandBody': 'For feature panels, CTAs, and moments that want to stand out.',
|
||||
'ds.cards.hoverMe': 'Hover me',
|
||||
'ds.cards.hoverMeToo': 'Hover me too',
|
||||
'ds.cards.hoverBody': 'Lifts on hover with a soft green-tinted shadow. Use for clickable items in a grid.',
|
||||
'ds.cards.hoverBodyAlt': 'Same behavior on the warm surface.',
|
||||
'ds.cards.mediaTitle': 'Media card',
|
||||
'ds.cards.mediaBody': 'When the card needs a full-bleed image or header, pass',
|
||||
|
||||
'ds.product.title': 'Product card',
|
||||
'ds.product.description': 'Composed from Card, Badge, Button, and Icon. Cutout image on a cream media surface, title + size, price in brand, and a full-width primary "Add to cart".',
|
||||
'ds.product.outOfStock': 'Out of stock',
|
||||
'ds.product.added': 'Added',
|
||||
|
||||
'ds.navbar.title': 'Navbar',
|
||||
'ds.navbar.description': 'Logo + nav + cart, in three surface tones. On mobile, the top bar keeps the logo and the menu + cart move to an ergonomic bottom-right floating cluster. The menu opens a full-screen brand-green overlay.',
|
||||
'ds.navbar.tone': 'Navbar tone',
|
||||
'ds.navbar.tone.paper': 'Paper',
|
||||
'ds.navbar.tone.cream': 'Cream',
|
||||
'ds.navbar.tone.brand': 'Brand',
|
||||
'ds.navbar.layout': 'Layout',
|
||||
'ds.navbar.layout.standard': 'Standard',
|
||||
'ds.navbar.layout.floating': 'Floating',
|
||||
|
||||
'ds.language.title': 'Language switcher',
|
||||
'ds.language.description': 'Compact pill for switching between DE, AT, and EN. Two tones — paper for light surfaces, brand for the brand-green — plus a floating mode that pins to the top-right corner.',
|
||||
'ds.language.paperNote': 'Default tone for light UI surfaces like cards or toolbars.',
|
||||
'ds.language.creamNote': 'Stronger border so the pill keeps definition on warm cream surfaces.',
|
||||
'ds.language.brandNote': 'For use on the brand green — e.g. inside the mobile menu overlay.',
|
||||
'ds.language.floating': 'Floating',
|
||||
'ds.language.floatingNote': 'The `floating` prop docks the pill to the top-right of the viewport (24px offset). This is the exact placement used by the design system chrome.',
|
||||
}
|
||||
|
||||
export default {
|
||||
de,
|
||||
at: { ...de, ...atOverrides },
|
||||
en,
|
||||
}
|
||||
Reference in New Issue
Block a user