@bytebrand/fe-ui-core-autobahn 1.0.0

package/theme/autobahn.css

@@ -0,0 +1,25 @@
+/* ==========================================================================
+   AUTOBAHN — design-system entry (auto.de redesign, W1 foundation)
+   --------------------------------------------------------------------------
+   Single global entry for the Autobahn CSS layer. Pulled into the app by
+   source/App.global.styl. Everything it loads is scoped under `.md3`, so the
+   new design system coexists with the legacy fe-ui-core / MUI / Stylus styles
+   without clobbering them. Only elements inside a `<div className="md3">`
+   subtree receive Autobahn tokens + utility classes.
+
+   Load order:
+     1. Google Fonts (Schibsted Grotesk + Hanken Grotesk). Per the W1 plan the
+        CDN @import is kept for the pilot; self-hosting woff2 is a later ticket.
+        CSS requires @import to precede all other rules, so it stays first.
+     2. colors_and_type.css — brand tokens (.md3 { --autode-* / --primary ... }).
+     3. md3.css — MD3 utility classes + responsive layer (.mbtn/.mcard/.chip/
+        .segmented/.mfield/.num/.md-* + 1024/980/900/820/600px breakpoints).
+
+   ADDITIVE ONLY. Do not import this from a non-`.md3` context expecting it to
+   restyle existing components — it intentionally does nothing outside `.md3`.
+   ========================================================================== */
+
+@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');
+
+@import './colors_and_type.css';
+@import './md3.css';

package/theme/colors_and_type.css

@@ -0,0 +1,113 @@
+/* ==========================================================================
+   AUTOBAHN — scoped port of docs/redesign/design-source/colors_and_type.css
+   --------------------------------------------------------------------------
+   Every selector is nested under `.md3` so the Autobahn tokens + helpers
+   cannot leak into / clobber existing fe-main (fe-ui-core / MUI / Stylus)
+   styles. The design's `:root { --tokens }` is emitted as `.md3 { --tokens }`
+   (custom properties cascade to the whole `.md3` subtree). The Google-Fonts
+   @import was removed here and centralised in ./autobahn.css.
+   Loaded globally via source/App.global.styl -> ./autobahn.css.
+   ADDITIVE ONLY — do not retheme legacy components.
+   ==========================================================================
+
+   auto.de — DESIGN SYSTEM TOKENS  ·  "Autobahn"
+   The single source of truth for the auto.de brand. The website UI kit
+   (ui_kits/website/md3.css) is built from these same values.
+
+   Identity:
+     · auto.de Blau primary, used with intent (not everywhere)
+     · Signal-Cyan accent, pulled from the logo swoosh (blue → cyan)
+     · deal-green for prices / savings / "good price"
+     · Schibsted Grotesk (display) + Hanken Grotesk (text/UI)
+     · MD3 bones: tonal surfaces, soft elevation, 8→28px shape, defined motion
+   ========================================================================== */
+
+.md3 {
+  /* ----- Brand ----- */
+  --autode-blau:        #0B53CC;  /* primary brand blue */
+  --autode-blau-strong: #0A47AE;  /* hover / pressed */
+  --autode-cyan:        #16B8E8;  /* Signal-Cyan accent (logo swoosh end) */
+  /* Brand swoosh = linear-gradient(90deg, var(--autode-blau), #1E7BDA, var(--autode-cyan)) */
+
+  /* ----- Primary / accent tonal roles ----- */
+  --primary:            var(--autode-blau);
+  --on-primary:         #FFFFFF;
+  --primary-container:  #DBE4FF;
+  --on-primary-container:#001A45;
+  --accent:             var(--autode-cyan);
+  --accent-container:   #C6EEFB;
+  --on-accent-container:#04323F;
+
+  /* ----- Deal / price rating ----- */
+  --good:               #0F7B43;  /* prices, savings, "Top/Guter Preis" */
+  --good-container:     #C8EFCF;
+  --on-good-container:  #04391F;
+  --rating-top:    #0F7B43;
+  --rating-good:   #4FA86B;
+  --rating-fair:   #C7B53A;
+  --rating-raised: #E08A2B;
+  --rating-high:   #D4502B;
+  --warn-container:     #FCE3B4;
+  --on-warn-container:  #4A3204;
+  --error:              #BA1A1A;
+
+  /* ----- Surfaces (neutral, faint cool tint under the blue) ----- */
+  --surface:      #FBFBFE;
+  --sc-lowest:    #FFFFFF;
+  --sc-low:       #F4F5FA;
+  --sc:           #EEEFF5;
+  --sc-high:      #E8E9F1;
+  --sc-highest:   #E2E3EC;
+
+  /* ----- Text ----- */
+  --on-surface:         #1A1B22;  /* headings, prices, primary text */
+  --on-surface-variant: #44464F;  /* body, secondary, spec values */
+  --outline:            #74767F;  /* icons, muted */
+  --outline-variant:    #C5C6D2;  /* hairlines, borders, dividers */
+  --inverse-surface:    #2E2F36;
+  --inverse-on-surface: #F1F0F6;
+
+  /* ----- Elevation (soft, tonal) ----- */
+  --e1: 0 1px 2px rgba(16,22,42,.10), 0 1px 3px rgba(16,22,42,.06);
+  --e2: 0 2px 6px rgba(16,22,42,.10), 0 1px 2px rgba(16,22,42,.10);
+  --e3: 0 8px 20px rgba(16,22,42,.12), 0 2px 6px rgba(16,22,42,.08);
+
+  /* ----- Shape (MD3 scale) ----- */
+  --r-xs: 8px;    /* fields, chips, image overlays */
+  --r-sm: 12px;   /* small cards */
+  --r-md: 16px;   /* cards */
+  --r-lg: 24px;   /* large surfaces */
+  --r-xl: 28px;   /* sheets */
+  --r-full: 999px;/* pills, buttons, FABs */
+
+  /* ----- Type ----- */
+  --font-display: 'Schibsted Grotesk', system-ui, sans-serif; /* headlines, prices */
+  --font-text:    'Hanken Grotesk', system-ui, sans-serif;    /* body, UI, labels */
+
+  /* Semantic type scale (px / weight / line-height) */
+  --t-display:    46/700/1.04; /* @kind font */
+  --t-headline:   29/700/1.14; /* @kind font */
+  --t-headline-sm:22/600/1.2; /* @kind font */
+  --t-title:      17/600/1.3; /* @kind font */
+  --t-title-sm:   14/600/1.35; /* @kind font */
+  --t-body:       14/400/1.5; /* @kind font */
+  --t-body-sm:    12.5/400/1.45; /* @kind font */
+  --t-label:      13/500/1.2; /* @kind font */
+  --t-label-sm:   11/600/1.2; /* @kind font */
+
+  /* Motion lives in the kit (ui_kits/website/md3.css). Documented here:
+     --ease-standard cubic-bezier(.2,0,0,1) · --ease-emphasized cubic-bezier(.3,0,0,1)
+     durations 120ms (state) · 200ms (small moves / card lift) · 320ms (sheets/overlays) */
+}
+
+/* Base helpers — opt in with class="autode" */
+.md3 .autode { font-family: var(--font-text); color: var(--on-surface); background: var(--surface);
+  -webkit-font-smoothing: antialiased; }
+.md3 .autode h1, .md3 .autode h2, .md3 .autode h3, .md3 .autode .display, .md3 .autode .headline { font-family: var(--font-display); }
+.md3 .autode h1 { font-size: 46px; font-weight: 700; line-height: 1.04; letter-spacing: -1px; margin: 0; }
+.md3 .autode h2 { font-size: 29px; font-weight: 700; line-height: 1.14; letter-spacing: -.4px; margin: 0; }
+.md3 .autode h3 { font-size: 17px; font-weight: 600; line-height: 1.3; margin: 0; }
+.md3 .autode p  { font-size: 14px; line-height: 1.5; color: var(--on-surface-variant); margin: 0 0 .75em; }
+.md3 .autode a  { color: var(--primary); text-decoration: none; }
+.md3 .autode a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
+.md3 .autode .num { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }