@aexol/spectral 0.9.270 → 0.9.272

package/dist/designer/data/systems/airbnb/tokens.css

@@ -1,261 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────────────
- * design-systems/airbnb/tokens.css
- *
- * Structured token bindings for the Airbnb design system — pristine
- * Canvas White surfaces, a single Rausch coral-pink accent (#ff385c),
- * generous soft-circle radii, and Airbnb Cereal VF as the lone type
- * family. The system reads like a travel magazine that happens to be
- * an app: the interface disappears so the listings can breathe.
- *
- * This file pre-compiles the values described in `DESIGN.md` into the
- * schema shared with every OD design system. Agents should paste the
- * `:root { … }` block verbatim into the first `<style>` of an artifact,
- * then resolve every value via `var(--*)` from that point on.
- *
- * Schema notes (brand-specific bindings worth flagging — section
- * references point into `DESIGN.md`):
- *
- *   #Bind 1  — --bg and --surface both resolve to Canvas White
- *              (#ffffff). Airbnb cards sit directly on the page
- *              without a tonal step; separation comes from the
- *              Hairline Gray (--border) edge and from the
- *              photograph inside the card, never from a surface
- *              tint (§4 Listing Card).
- *
- *   #Bind 2  — --surface-warm binds to Soft Cloud (#f7f7f7), the
- *              brand-named subsurface tier used for footers, map
- *              wrappers, and the calendar's middle-of-range dates.
- *              A real value rather than `var(--surface)` because
- *              Airbnb publishes a distinct tier here (§2 Surface).
- *
- *   #Bind 3  — --accent-hover and --accent-active are hand-picked,
- *              NOT formula-derived. DESIGN.md §2 publishes Deep
- *              Rausch (#e00b41) as the pressed/active state.
- *              color-mix would overshoot that saturation and
- *              under-shoot the brand's gradient terminal stop,
- *              so we hand-bind both states.
- *
- *   #Bind 4  — Radius scale concentrates on the brand's signature
- *              soft-circle geometry: 8px for buttons/inputs, 14px
- *              for listing cards (the workhorse), 20px for the
- *              booking panel and hero photo frames, 9999px for
- *              the circular icon buttons and avatars that
- *              punctuate every surface (§5 Border Radius Scale).
- *
- *   #Bind 5  — --elev-raised encodes Airbnb's signature three-
- *              layer booking-panel shadow verbatim — a 2% hairline
- *              ring, a 4% short blur, and a 10% medium blur. The
- *              brand forbids single drop shadows; this stacked
- *              triple is what gives the booking panel its premium
- *              anti-aliased perimeter (§6 Depth & Elevation).
- *
- *   #Bind 6  — --focus-ring is 2px solid Ink Black (#222222), NOT
- *              the schema's accent-tinted default. DESIGN.md §6
- *              mandates this specific ring so focus reads cleanly
- *              against full-bleed colorful photography — a Rausch
- *              ring would disappear against warm sunset shots or
- *              sea-blue overlays. Pair with the 4px white
- *              separator ring at circular buttons floating on
- *              images.
- *
- *   #Bind 7  — --leading-body is 1.43 (generous). Airbnb pairs
- *              tight display leading (1.18–1.25) with notably
- *              open body leading; that two-mode rhythm is why
- *              the system reads as a travel magazine rather than
- *              a utility app (§3 Principles).
- *
- * Brand-specific extensions: none in this revision. The Plus
- * Magenta (#92174d) and Luxe Purple (#460479) product-tier accents
- * called out in DESIGN.md §2 stay inline at the tier-specific
- * components that need them; promoting them to schema slots would
- * encourage non-tier surfaces to reach for them.
- * ─────────────────────────────────────────────────────────────────── */
-
-:root {
-  /* ─── Surface (3 levels) ────────────────────────────────────────
-   * Canvas White is both the page and the card — Airbnb refuses a
-   * tonal shift between the two. Cards earn their edges from the
-   * Hairline Gray border and from full-bleed photography. The
-   * tertiary tier (--surface-warm) is Soft Cloud, used only for
-   * footer backgrounds, map-view wrappers, and middle-of-range
-   * date cells in the date picker. */
-  --bg: #ffffff;
-  --surface: #ffffff;
-  --surface-warm: #f7f7f7;
-
-  /* ─── Foreground ramp (4 levels) ────────────────────────────────
-   * Ink Black (#222222) carries roughly ninety percent of every
-   * page — every heading, every body paragraph, every nav label,
-   * every price. The brand's near-black is never true #000000.
-   * Charcoal (--fg-2) is a one-step-down emphasis tier reserved
-   * for focused-input text. Ash Gray (--muted) is the secondary
-   * label — "Cottage rentals" subtitles, muted footer links.
-   * Mute Gray (--meta) is reserved for disabled buttons and
-   * low-priority metadata. */
-  --fg: #222222;
-  --fg-2: #3f3f3f;
-  --muted: #6a6a6a;
-  --meta: #929292;
-
-  /* ─── Border (2 levels) ─────────────────────────────────────────
-   * Hairline Gray (#dddddd) is the workhorse — every card-to-card
-   * divider, every amenity-row separator, every footer-column
-   * rule. The soft tier is a lighter hairline used to break up
-   * dense list interiors without competing with the primary card
-   * edge. */
-  --border: #dddddd;
-  --border-soft: #ebebeb;
-
-  /* ─── Accent ────────────────────────────────────────────────────
-   * Rausch coral-pink — the single signature color. Reserve for
-   * primary CTAs (Reserve, Search, Add dates), the active-tab
-   * underline, the wishlist heart fill, and price emphasis. Hard
-   * cap of two visible uses per viewport; if a third Rausch
-   * element shows up, neutralize one. Plus Magenta (#92174d) and
-   * Luxe Purple (#460479) are kept inline at their product-tier
-   * surfaces, not promoted to shared accent slots. */
-  --accent: #ff385c;
-  --accent-on: #ffffff;
-  --accent-hover: #e31c5f;       /* hand-picked, between Rausch and Deep Rausch */
-  --accent-active: #e00b41;      /* Deep Rausch — DESIGN.md §2 pressed-state value */
-
-  /* ─── Semantic ──────────────────────────────────────────────────
-   * Error Red is explicit from DESIGN.md §2; success and warn are
-   * not specified by the brand and are bound to desaturated values
-   * that survive the white canvas without competing with Rausch.
-   * Keep total semantic-color pixels well under five percent of
-   * any page — the brand almost never renders status. */
-  --success: #008a05;            /* hand-picked warm green — available/in-stock */
-  --warn: #c47700;               /* burnt amber — never tailwind yellow */
-  --danger: #c13515;             /* DESIGN.md §2 Error Red */
-
-  /* ─── Typography — fonts ────────────────────────────────────────
-   * Airbnb Cereal VF is the proprietary face that carries every
-   * label from 8px superscript to 28px section heading. The
-   * documented fallback chain renders acceptably on macOS/iOS
-   * where system-ui resolves to San Francisco. Display and body
-   * share the same stack — the visual identity comes from the
-   * family itself, never from typeface mixing. Mono is a generic
-   * stack for kbd, tabular metrics, and the rare code label. */
-  --font-display:
-    "Airbnb Cereal VF", "Airbnb Cereal App", Circular,
-    -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
-  --font-body:
-    "Airbnb Cereal VF", "Airbnb Cereal App", Circular,
-    -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
-  --font-mono:
-    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco,
-    Consolas, monospace;
-
-  /* ─── Typography — type scale (px) ──────────────────────────────
-   * Derived from DESIGN.md §3 Hierarchy table. The system clusters
-   * tightly between 11 and 22px (the conversational range) and
-   * jumps to 28px for section headings; the higher tiers are used
-   * sparingly for the Guest Favorite rating lockup (44–56px) and
-   * the rare hero numeral. No 400-regular: Cereal's body weight
-   * is 500, which any consuming component should set explicitly. */
-  --text-xs: 12px;               /* micro / footer disclaimer */
-  --text-sm: 14px;               /* button default, link, caption */
-  --text-base: 16px;             /* body medium, button large, subtitle bold */
-  --text-lg: 20px;               /* listing title */
-  --text-xl: 22px;               /* subsection heading */
-  --text-2xl: 28px;              /* section heading */
-  --text-3xl: 44px;              /* Guest Favorite rating, hero numeral */
-  --text-4xl: 56px;              /* display ceiling — Guest Favorite max */
-
-  /* ─── Typography — leading & tracking ───────────────────────────
-   * Tight for display (1.20 — chiseled headlines), generous for
-   * body (1.43 — magazine reading comfort). Display tracking
-   * compresses negatively at sizes ≥20px; body and caption hold
-   * at zero. The two-mode rhythm is what gives Airbnb pages
-   * their travel-magazine feel rather than a utility-app feel. */
-  --leading-body: 1.43;
-  --leading-tight: 1.2;
-  --tracking-display: -0.02em;   /* applied at sizes ≥20px only */
-
-  /* ─── Spacing — base scale ──────────────────────────────────────
-   * 8px base unit per DESIGN.md §5. The brand uses fine-grained
-   * off-grid values (5.5, 10, 11, 18.5, 22) for pixel-perfect
-   * icon alignment, but the shared scale stays on the standard
-   * 4px grid — off-grid spacing belongs inline at the component
-   * level, not in shared tokens. */
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  --space-8: 32px;
-  --space-12: 48px;
-
-  /* ─── Section rhythm ────────────────────────────────────────────
-   * Section padding ranges 48–64px on desktop, 24–32px on mobile
-   * per DESIGN.md §5. We bind the upper bound on desktop because
-   * Airbnb's content-dense pages benefit from generous breathing
-   * room between content blocks; the lower phone bound keeps the
-   * vertical rhythm tight on small screens. */
-  --section-y-desktop: 64px;
-  --section-y-tablet: 48px;
-  --section-y-phone: 32px;
-
-  /* ─── Radius ────────────────────────────────────────────────────
-   * The brand's signature soft-circle geometry. 14px (--radius-md)
-   * is the workhorse — every listing card photograph, every
-   * amenity badge, every generic content container lands here.
-   * 20px (--radius-lg) is reserved for the booking panel and hero
-   * photo frames; 8px (--radius-sm) is the small radius for
-   * buttons, dropdowns, and inputs; --radius-pill (9999px) is the
-   * system's signature round geometry, applied to every circular
-   * icon button, every avatar, and the wishlist heart. */
-  --radius-sm: 8px;
-  --radius-md: 14px;
-  --radius-lg: 20px;
-  --radius-pill: 9999px;
-
-  /* ─── Elevation ─────────────────────────────────────────────────
-   * Airbnb forbids single drop shadows; the system uses stacked
-   * layered shadows or no shadow at all. Listing cards sit flat
-   * on the canvas. Booking panels, modals, and dropdowns use the
-   * signature three-layer stack — a 2% hairline ring, a 4% short
-   * blur, and a 10% medium blur — which reads as one cohesive
-   * lift while giving the perimeter a premium anti-aliased edge. */
-  --elev-flat: none;
-  --elev-ring: 0 0 0 1px var(--border);
-  --elev-raised:
-    rgba(0, 0, 0, 0.02) 0 0 0 1px,
-    rgba(0, 0, 0, 0.04) 0 2px 6px 0,
-    rgba(0, 0, 0, 0.1) 0 4px 8px 0;
-
-  /* ─── Focus ring ────────────────────────────────────────────────
-   * 2px solid Ink Black, NOT the schema's accent-tinted default.
-   * DESIGN.md §6 mandates this exact treatment so focus indicators
-   * read cleanly against full-bleed colorful photography — a
-   * Rausch-tinted ring would disappear against warm sunset shots
-   * or sea-blue beach overlays. Pair with a 4px white separator
-   * ring at circular-icon buttons that float on images. */
-  --focus-ring: 0 0 0 2px var(--fg);
-
-  /* ─── Motion ────────────────────────────────────────────────────
-   * DESIGN.md did not capture transition timings (static
-   * extraction scope). We bind defaults consistent with the
-   * brand's tactile feel: 150ms for micro-states (the famous
-   * `transform: scale(0.92)` pressed-button rebound) and 200ms
-   * for general state changes. Standard easing is the schema
-   * default — short, purposeful, no overshoot. */
-  --motion-fast: 150ms;
-  --motion-base: 200ms;
-  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-
-  /* ─── Layout ────────────────────────────────────────────────────
-   * Detail pages cap at 1280px per DESIGN.md §5; the homepage
-   * listing grid lets the canvas breathe to 1760–1920px on
-   * ultra-wide. We bind the detail-page width as the shared
-   * default because that is the geometry agents will most often
-   * generate (rooms, experiences, host profiles). Gutters
-   * tighten progressively: 40px desktop, 24px tablet, 16px
-   * phone per DESIGN.md §8 small-mobile clause. */
-  --container-max: 1280px;
-  --container-gutter-desktop: 40px;
-  --container-gutter-tablet: 24px;
-  --container-gutter-phone: 16px;
-}

package/dist/designer/data/systems/airtable/DESIGN.md

@@ -1,92 +0,0 @@
-# Design System Inspired by Airtable
-
-> Category: Design & Creative
-> Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic.
-
-## 1. Visual Theme & Atmosphere
-
-Airtable's website is a clean, enterprise-friendly platform that communicates "sophisticated simplicity" through a white canvas with deep navy text (`#181d26`) and Airtable Blue (`#1b61c9`) as the primary interactive accent. The Haas font family (display + text variants) creates a Swiss-precision typography system with positive letter-spacing throughout.
-
-**Key Characteristics:**
-- White canvas with deep navy text (`#181d26`)
-- Airtable Blue (`#1b61c9`) as primary CTA and link color
-- Haas + Haas Groot Disp dual font system
-- Positive letter-spacing on body text (0.08px–0.28px)
-- 12px radius buttons, 16px–32px for cards
-- Multi-layer blue-tinted shadow: `rgba(45,127,249,0.28) 0px 1px 3px`
-- Semantic theme tokens: `--theme_*` CSS variable naming
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Deep Navy** (`#181d26`): Primary text
-- **Airtable Blue** (`#1b61c9`): CTA buttons, links
-- **White** (`#ffffff`): Primary surface
-- **Spotlight** (`rgba(249,252,255,0.97)`): `--theme_button-text-spotlight`
-
-### Semantic
-- **Success Green** (`#006400`): `--theme_success-text`
-- **Weak Text** (`rgba(4,14,32,0.69)`): `--theme_text-weak`
-- **Secondary Active** (`rgba(7,12,20,0.82)`): `--theme_button-text-secondary-active`
-
-### Neutral
-- **Dark Gray** (`#333333`): Secondary text
-- **Mid Blue** (`#254fad`): Link/accent blue variant
-- **Border** (`#e0e2e6`): Card borders
-- **Light Surface** (`#f8fafc`): Subtle surface
-
-### Shadows
-- **Blue-tinted** (`rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset`)
-- **Soft** (`rgba(15,48,106,0.05) 0px 0px 20px`)
-
-## 3. Typography Rules
-
-### Font Families
-- **Primary**: `Haas`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto`
-- **Display**: `Haas Groot Disp`, fallback: `Haas`
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing |
-|------|------|------|--------|-------------|----------------|
-| Display Hero | Haas | 48px | 400 | 1.15 | normal |
-| Display Bold | Haas Groot Disp | 48px | 900 | 1.50 | normal |
-| Section Heading | Haas | 40px | 400 | 1.25 | normal |
-| Sub-heading | Haas | 32px | 400–500 | 1.15–1.25 | normal |
-| Card Title | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
-| Feature | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
-| Body | Haas | 18px | 400 | 1.35 | 0.18px |
-| Body Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
-| Button | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
-| Caption | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |
-
-## 4. Component Stylings
-
-### Buttons
-- **Primary Blue**: `#1b61c9`, white text, 16px 24px padding, 12px radius
-- **White**: white bg, `#181d26` text, 12px radius, 1px border white
-- **Cookie Consent**: `#1b61c9` bg, 2px radius (sharp)
-
-### Cards: `1px solid #e0e2e6`, 16px–24px radius
-### Inputs: Standard Haas styling
-
-## 5. Layout
-- Spacing: 1–48px (8px base)
-- Radius: 2px (small), 12px (buttons), 16px (cards), 24px (sections), 32px (large), 50% (circles)
-
-## 6. Depth
-- Blue-tinted multi-layer shadow system
-- Soft ambient: `rgba(15,48,106,0.05) 0px 0px 20px`
-
-## 7. Do's and Don'ts
-### Do: Use Airtable Blue for CTAs, Haas with positive tracking, 12px radius buttons
-### Don't: Skip positive letter-spacing, use heavy shadows
-
-## 8. Responsive Behavior
-Breakpoints: 425–1664px (23 breakpoints)
-
-## 9. Agent Prompt Guide
-- Text: Deep Navy (`#181d26`)
-- CTA: Airtable Blue (`#1b61c9`)
-- Background: White (`#ffffff`)
-- Border: `#e0e2e6`