@mdxui/services 0.2.0 → 0.4.0

package/dist/styles.css

@@ -0,0 +1,363 @@
+/**
+ * @mdxui/services — carriage theme envelope
+ * ============================================================================
+ *
+ * The Services dialect's components (ServiceHero, Problem, WhatYouGet, …) were
+ * extracted from carriage's chassis and still reference carriage's design-token
+ * vocabulary: `text-display-hero`, `tracking-tighter2`, `text-ink`, `bg-cta`,
+ * `rounded-cta`, `max-w-container`, `oklch(var(--accent))` SVG strokes, and a
+ * Fraunces `--font-display`. The package ships JSX only, so in a consumer those
+ * tokens are UNDEFINED and every element falls back (16px headings, transparent
+ * CTAs, no teal accent). This file ships the token DEFINITIONS so the markup the
+ * package emits actually renders as designed.
+ *
+ * Consume it from your Tailwind v4 entry (e.g. app/globals.css):
+ *
+ *     @import "@mdxui/services/styles.css";
+ *
+ * SCOPING (critical)
+ * ------------------
+ * Everything is scoped under `[data-dialect="services"]` — the wrapper
+ * `ServicesLandingView` renders around the whole Services arc. The host app
+ * pins SHARED token names globally for its OTHER dialects (e.g.
+ * `--font-display: instrument-serif`, its own `--color-accent`), and it uses
+ * `@theme inline`, which BAKES those values directly into the generated
+ * utilities (`.font-display { font-family: var(--font-instrument-serif) }`) —
+ * a CSS-var swap can't retarget them. So this envelope does NOT redefine shared
+ * Tailwind theme keys. Instead it ships the carriage utilities as explicit,
+ * SCOPED class rules (`[data-dialect="services"] .text-display-hero { … }`).
+ * They win inside the Services subtree by selector specificity, are completely
+ * host-agnostic, and leave every other archetype untouched. Carriage's
+ * exclusive token names (ink / surface / cta / display-hero …) never collide;
+ * the shared ones (font-display, accent) are handled here without touching the
+ * host's globals.
+ *
+ * This is shipped as raw CSS (not precompiled). The few `@font-face` rules and
+ * the plain class rules need no Tailwind processing; the consumer can `@import`
+ * it directly into its `@import "tailwindcss"` entry.
+ *
+ * Provenance: carriage src/app/globals.css + tailwind.config.ts on origin/master
+ * (commits 75c8952 landing token vocabulary, 1e1dcc5 theme catalogue + CTA/font
+ * indirection, f598b60 the 6 extended surface/sunk/ink2/ink3/line/line2 tokens).
+ */
+
+/* ──────────────────────────────────────────────────────────────────
+   FONT — Fraunces, self-contained.
+   The host loads instrument-serif / inter / jetbrains via next/font but NOT
+   Fraunces, so the envelope ships it via @font-face (Google Fonts woff2).
+   @font-face has no ordering constraint (unlike @import url()), so it is safe
+   to drop anywhere in the consumer's entry. Variable axis covers the weights
+   carriage's display headings use.
+   ────────────────────────────────────────────────────────────────── */
+@font-face {
+  font-family: 'Fraunces';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/fraunces/v37/6NUu8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9thllg.woff2')
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Fraunces';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/fraunces/v37/6NVf8FyLNQOQZAnv9ZwNjucMHVn85Ni7emA17F-_DPLm5Vnf_VkS.woff2')
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* ──────────────────────────────────────────────────────────────────
+   SCOPE ROOT — carriage CSS vars, applied ONLY to the Services subtree.
+   `ServicesLandingView` renders `<div data-dialect="services">` around the
+   whole arc; these cascade to every section without touching the host page.
+   Faithful copy of carriage src/app/globals.css :root (sans the html/body
+   chrome — the host owns those). The class rules further down read these.
+   ────────────────────────────────────────────────────────────────── */
+[data-dialect='services'] {
+  /* Warm-paper neutrals, ink-deep with cool tint. Strict OKLCH triples. */
+  --paper: 0.985 0.005 85;
+  --surface: 0.972 0.008 82;
+  --sunk: 0.955 0.01 80;
+  --ink: 0.205 0.018 252;
+  --ink2: 0.435 0.014 250;
+  --ink3: 0.625 0.012 248;
+  --line: 0.88 0.008 85;
+  --line2: 0.82 0.01 85;
+
+  /* One committed accent: petrol teal. Bare triples so the carriage inline
+     `oklch(var(--accent))` SVG strokes resolve. */
+  --accent: 0.52 0.092 198;
+  --accent-deep: 0.38 0.082 200;
+  --accent-mute: 0.76 0.04 198;
+
+  /* Earth-tone deal verdicts. */
+  --great: 0.56 0.09 158;
+  --fair: 0.685 0.082 78;
+  --over: 0.605 0.115 42;
+  --avoid: 0.46 0.13 28;
+
+  /* Fonts. Fraunces is the carriage display face; sans/mono reuse the host's
+     next/font handles when present. */
+  --font-fraunces: 'Fraunces', ui-serif, Georgia, serif;
+  --font-display: var(--font-fraunces);
+  --font-sans: var(--font-inter, ui-sans-serif, system-ui, sans-serif);
+  --font-mono: var(--font-jetbrains, ui-monospace, monospace);
+
+  /* CTA indirection — carriage default recipe: ink bg → accent-deep hover,
+     paper text. */
+  --cta-bg: var(--ink);
+  --cta-bg-hover: var(--accent-deep);
+  --cta-fg: var(--paper);
+
+  /* Type ramp — base (mobile) step; ≥640 / ≥1024 steps in the media queries. */
+  --text-display-hero: 40px;
+  --text-display-section: 32px;
+  --text-display-sub: 24px;
+
+  /* Container / radius. */
+  --container-max: 1100px;
+  --radius-cta: 9999px;
+  --radius-card: 0.5rem;
+  --radius-input: 0.375rem;
+
+  /* Motion — ScrollReveal reads these inline. */
+  --motion-fade-duration: 300ms;
+  --motion-fade-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
+
+  /* Carriage paints the Services surface warm-paper + ink, independent of the
+     host's dark page, so the editorial sections read on paper. */
+  background: oklch(var(--paper));
+  color: oklch(var(--ink));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* Display type ramp steps (carriage globals.css media queries, scoped). */
+@media (min-width: 640px) {
+  [data-dialect='services'] {
+    --text-display-hero: 56px;
+    --text-display-section: 40px;
+  }
+}
+@media (min-width: 1024px) {
+  [data-dialect='services'] {
+    --text-display-hero: 60px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-dialect='services'] {
+    --motion-fade-duration: 0ms;
+  }
+}
+
+/* ════════════════════════════════════════════════════════════════════
+   CARRIAGE UTILITIES — scoped class rules.
+   Every utility the Services markup references, defined under the subtree so
+   it wins by specificity and is host-agnostic. These are the v4-as-plain-CSS
+   translation of carriage's tailwind.config.ts theme.extend. Scoping each on
+   `.<utility>` also tree-shake-proofs them (no @source dependency).
+   ════════════════════════════════════════════════════════════════════ */
+
+/* —— Fonts ——————————————————————————————————————————————————————— */
+[data-dialect='services'] .font-display {
+  font-family: var(--font-fraunces), ui-serif, Georgia, serif;
+}
+
+/* —— Type ramp (font-size + line-height + tracking) ——————————————— */
+[data-dialect='services'] .text-display-hero {
+  font-size: var(--text-display-hero);
+  line-height: 1.05;
+}
+[data-dialect='services'] .text-display-section {
+  font-size: var(--text-display-section);
+  line-height: 1.1;
+}
+[data-dialect='services'] .text-display-sub {
+  font-size: var(--text-display-sub);
+  line-height: 1.15;
+}
+[data-dialect='services'] .text-body {
+  font-size: 16px;
+  line-height: 1.5;
+}
+[data-dialect='services'] .text-body-sm {
+  font-size: 14px;
+  line-height: 1.5;
+}
+[data-dialect='services'] .text-body-xs {
+  font-size: 13px;
+  line-height: 1.5;
+}
+[data-dialect='services'] .text-eyebrow {
+  font-size: 11px;
+  line-height: 1.4;
+  letter-spacing: 0.04em;
+}
+[data-dialect='services'] .text-micro {
+  font-size: 12px;
+  line-height: 1.4;
+}
+[data-dialect='services'] .tracking-tightish {
+  letter-spacing: -0.011em;
+}
+[data-dialect='services'] .tracking-tighter2 {
+  letter-spacing: -0.02em;
+}
+
+/* —— Text colors ————————————————————————————————————————————————— */
+[data-dialect='services'] .text-ink {
+  color: oklch(var(--ink));
+}
+[data-dialect='services'] .text-ink2 {
+  color: oklch(var(--ink2));
+}
+[data-dialect='services'] .text-ink3 {
+  color: oklch(var(--ink3));
+}
+[data-dialect='services'] .text-ink3\/60 {
+  color: oklch(var(--ink3) / 0.6);
+}
+[data-dialect='services'] .text-paper {
+  color: oklch(var(--paper));
+}
+[data-dialect='services'] .text-accent {
+  color: oklch(var(--accent));
+}
+[data-dialect='services'] .text-accentDeep {
+  color: oklch(var(--accent-deep));
+}
+[data-dialect='services'] .text-cta-fg {
+  color: oklch(var(--cta-fg));
+}
+[data-dialect='services'] .text-great {
+  color: oklch(var(--great));
+}
+[data-dialect='services'] .text-fair {
+  color: oklch(var(--fair));
+}
+[data-dialect='services'] .text-over {
+  color: oklch(var(--over));
+}
+[data-dialect='services'] .text-avoid {
+  color: oklch(var(--avoid));
+}
+[data-dialect='services'] .hover\:text-ink:hover {
+  color: oklch(var(--ink));
+}
+[data-dialect='services'] .hover\:text-accentDeep:hover {
+  color: oklch(var(--accent-deep));
+}
+[data-dialect='services'] .hover\:text-accent:hover {
+  color: oklch(var(--accent));
+}
+
+/* —— Background colors ——————————————————————————————————————————— */
+[data-dialect='services'] .bg-paper {
+  background-color: oklch(var(--paper));
+}
+[data-dialect='services'] .bg-surface {
+  background-color: oklch(var(--surface));
+}
+[data-dialect='services'] .bg-sunk {
+  background-color: oklch(var(--sunk));
+}
+[data-dialect='services'] .bg-ink {
+  background-color: oklch(var(--ink));
+}
+[data-dialect='services'] .bg-ink\/40 {
+  background-color: oklch(var(--ink) / 0.4);
+}
+[data-dialect='services'] .bg-ink2 {
+  background-color: oklch(var(--ink2));
+}
+[data-dialect='services'] .bg-ink3 {
+  background-color: oklch(var(--ink3));
+}
+[data-dialect='services'] .bg-line {
+  background-color: oklch(var(--line));
+}
+[data-dialect='services'] .bg-line2 {
+  background-color: oklch(var(--line2));
+}
+[data-dialect='services'] .bg-accent {
+  background-color: oklch(var(--accent));
+}
+[data-dialect='services'] .bg-cta {
+  background-color: oklch(var(--cta-bg));
+}
+[data-dialect='services'] .hover\:bg-cta-hover:hover {
+  background-color: oklch(var(--cta-bg-hover));
+}
+[data-dialect='services'] .hover\:bg-surface:hover {
+  background-color: oklch(var(--surface));
+}
+
+/* —— Border colors ——————————————————————————————————————————————— */
+[data-dialect='services'] .border-line {
+  border-color: oklch(var(--line));
+}
+[data-dialect='services'] .border-line2 {
+  border-color: oklch(var(--line2));
+}
+[data-dialect='services'] .border-accent {
+  border-color: oklch(var(--accent));
+}
+[data-dialect='services'] .border-ink {
+  border-color: oklch(var(--ink));
+}
+[data-dialect='services'] .hover\:border-ink:hover {
+  border-color: oklch(var(--ink));
+}
+
+/* —— Radius ——————————————————————————————————————————————————————— */
+[data-dialect='services'] .rounded-cta {
+  border-radius: var(--radius-cta);
+}
+[data-dialect='services'] .rounded-card {
+  border-radius: var(--radius-card);
+}
+[data-dialect='services'] .rounded-input {
+  border-radius: var(--radius-input);
+}
+
+/* —— Container ———————————————————————————————————————————————————— */
+[data-dialect='services'] .max-w-container {
+  max-width: var(--container-max);
+}
+
+/* —— Shadows —————————————————————————————————————————————————————— */
+[data-dialect='services'] .shadow-sheet {
+  box-shadow: 0 1px 0 0 oklch(var(--line) / 0.6);
+}
+[data-dialect='services'] .shadow-lift {
+  box-shadow: 0 1px 2px 0 oklch(0.2 0.02 250 / 0.04),
+    0 8px 24px -8px oklch(0.2 0.02 250 / 0.06);
+}
+
+/* —— Easing ——————————————————————————————————————————————————————— */
+[data-dialect='services'] .ease-out-quart {
+  transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
+}
+[data-dialect='services'] .ease-out-quint {
+  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+}
+[data-dialect='services'] .ease-out-expo {
+  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* —— Number-friendly typography helper carriage markup uses ——————— */
+[data-dialect='services'] .tabular {
+  font-variant-numeric: tabular-nums lining-nums;
+}
+[data-dialect='services'] .serif-num {
+  font-family: var(--font-fraunces), ui-serif, Georgia, serif;
+  font-feature-settings: 'ss01', 'cv11';
+  font-variant-numeric: lining-nums tabular-nums;
+}

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@mdxui/services",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Services site template — the Services dialect of the @mdxui template family. Higher-order, outcome-led landing components (ServiceHero, Problem, WhatYouGet, HowItWorks, Defensibility, ReportPricing, Faq, FinalCta) that expose Services-semantic props and compose @mdxui/neo's design language. Extracted from carriage's chassis.",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "license": "MIT",
   "author": "dot.do",
   "repository": {
@@ -44,14 +46,15 @@
     "./schemas": {
       "types": "./dist/schemas/index.d.ts",
       "import": "./dist/schemas/index.js"
-    }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
     "dist",
     "README.md"
   ],
   "scripts": {
-    "build": "NODE_OPTIONS=--max-old-space-size=4096 tsup",
+    "build": "NODE_OPTIONS=--max-old-space-size=8192 tsup",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "clean": "rm -rf dist .turbo node_modules",
@@ -59,7 +62,7 @@
   },
   "devDependencies": {
     "@mdxui/dialect": "0.1.0",
-    "@mdxui/neo": "0.1.0",
+    "@mdxui/neo": "0.1.2",
     "@mdxui/primitives": "^6.0.0",
     "@mdxui/themes": "^6.0.0",
     "@mdxui/typescript-config": "6.0.0",