@cogenta/theme-canonical 0.2.0 → 1.1.0

package/src/styles/blocks.css

@@ -9,16 +9,17 @@
 
 /* --- hero ----------------------------------------------------------------
    The page's first impression, so it is the one block that gets a decorative
-   element of its own: a soft wash of the skin's accent behind the media. It is
-   drawn on a pseudo-element and sized to stay inside the block's own box —
-   a decoration that widens the page produces a horizontal scrollbar, which is
+   element of its own: a flat solid disc of the skin's accent behind the
+   media — a geometric accent rather than a wash. It is drawn on a
+   pseudo-element and sized to stay inside the block's own box — a
+   decoration that widens the page produces a horizontal scrollbar, which is
    the classic way a hero breaks a phone.
    ------------------------------------------------------------------------- */
 
 .cg-hero {
   position: relative;
-  /* A stacking context of its own, so `z-index: -1` on the wash puts it behind
-     the hero's content and not behind the page background. */
+  /* A stacking context of its own, so `z-index: -1` on the disc puts it
+     behind the hero's content and not behind the page background. */
   isolation: isolate;
   display: grid;
   gap: var(--cg-gap-loose);
@@ -34,7 +35,8 @@
   inline-size: min(30rem, 70%);
   aspect-ratio: 1;
   z-index: -1;
-  background: radial-gradient(circle at 60% 40%, var(--cg-accent-soft), transparent 68%);
+  border-radius: 50%;
+  background: var(--cg-accent-soft);
   pointer-events: none;
 }
 
@@ -336,17 +338,27 @@
   color: var(--cg-accent);
 }
 
-/* The vocabulary's `icon` names a symbol, never markup, and this theme ships no
-   icon set — so the chip is what the name gets: a tinted, ringed square that
-   holds the space an icon would, rather than a broken glyph or an invented one. */
+/* The vocabulary's `icon` names a symbol — a tinted, ringed square that holds
+   the space an icon would, whether or not `renderIcon` (`@cogenta/theme-kit`,
+   L25) recognises the name: an unrecognised one still gets the chip, empty,
+   exactly the pre-L25 look; a recognised one gets a real glyph, centred and
+   coloured to the same accent as the ring around it. */
 .cg-feature__icon {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   inline-size: var(--cg-s10);
   block-size: var(--cg-s10);
   margin-block-end: var(--cg-s5);
   background: var(--cg-accent-soft);
   border-radius: var(--cg-radius-md);
   box-shadow: var(--cg-ring-accent);
+  color: var(--cg-accent);
+}
+
+.cg-feature__icon svg {
+  inline-size: var(--cg-s6);
+  block-size: var(--cg-s6);
 }
 
 .cg-feature__title {
@@ -377,13 +389,16 @@
   text-align: center;
 }
 
-/* A single diagonal sheen of the accent. `overflow: hidden` on the panel keeps
-   it inside the radius, so it never leaks past a rounded corner. */
+/* A flat accent bar across the top of the panel — structure instead of a
+   sheen. `overflow: hidden` on the panel keeps it inside the radius, so it
+   never leaks past a rounded corner. */
 .cg-cta::before {
   content: "";
   position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, var(--cg-accent-soft), transparent 55%);
+  inset-block-start: 0;
+  inset-inline: 0;
+  block-size: var(--cg-s2);
+  background: var(--cg-accent-soft);
   pointer-events: none;
 }
 
@@ -888,3 +903,318 @@
   background: var(--cg-accent);
   color: var(--cg-accent-fg);
 }
+
+/* --- testimonial (blocks@2.0) --------------------------------------------
+   Same silhouette as `quote`, left as a distinct rule block for the day the
+   two diverge visually — a testimonial wall reads differently from a single
+   pull quote once a theme has more than one on a page.
+   ------------------------------------------------------------------------- */
+
+.cg-testimonial {
+  max-inline-size: var(--cg-page-narrow);
+  margin-inline: auto;
+  text-align: center;
+}
+
+.cg-testimonial__quote {
+  margin: 0;
+  font-family: var(--cogenta-font-serif);
+  font-size: var(--cg-text-xl);
+  line-height: var(--cg-leading-snug);
+  text-wrap: balance;
+}
+
+.cg-testimonial__quote > :first-child {
+  margin-block-start: 0;
+}
+
+.cg-testimonial__quote > :last-child {
+  margin-block-end: 0;
+}
+
+.cg-testimonial__attribution {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--cg-s3);
+  margin-block-start: var(--cg-s6);
+  color: var(--cg-ink-subtle);
+  font-size: var(--cg-text-sm);
+}
+
+.cg-testimonial__avatar {
+  inline-size: var(--cg-s12);
+  block-size: var(--cg-s12);
+  border-radius: var(--cg-radius-pill);
+  box-shadow: var(--cg-ring);
+}
+
+.cg-testimonial__names {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  line-height: var(--cg-leading-snug);
+}
+
+.cg-testimonial__name {
+  font-weight: var(--cg-weight-semibold);
+  color: var(--cg-ink);
+}
+
+/* --- pricingTable (blocks@2.0) -------------------------------------------
+   Cards in a row, the highlighted tier lifted and ringed in the accent —
+   the one place in this theme a card earns a border of its own, because a
+   pricing table's whole point is telling the tiers apart at a glance.
+   ------------------------------------------------------------------------- */
+
+.cg-pricing__tiers {
+  display: grid;
+  gap: var(--cg-gap);
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  align-items: start;
+}
+
+.cg-pricing__tier {
+  display: flex;
+  flex-direction: column;
+  padding: var(--cg-s8) var(--cg-s6);
+  background: var(--cg-surface-raised);
+  border-radius: var(--cg-radius-xl);
+  box-shadow: var(--cg-ring);
+}
+
+.cg-pricing__tier[data-highlighted="true"] {
+  background: var(--cg-surface-tinted);
+  box-shadow: var(--cg-elevation-2), var(--cg-ring-accent);
+  transform: translateY(calc(var(--cg-s3) * -1));
+}
+
+.cg-pricing__name {
+  margin: 0;
+  font-size: var(--cg-text-md);
+  font-weight: var(--cg-weight-semibold);
+  letter-spacing: var(--cg-tracking-snug);
+}
+
+.cg-pricing__price {
+  display: flex;
+  align-items: baseline;
+  gap: var(--cg-s1);
+  margin: var(--cg-s4) 0 var(--cg-s6);
+}
+
+.cg-pricing__amount {
+  font-size: var(--cg-text-2xl);
+  font-weight: var(--cg-weight-bold);
+  letter-spacing: var(--cg-tracking-tight);
+  font-variant-numeric: tabular-nums;
+}
+
+.cg-pricing__interval {
+  color: var(--cg-ink-muted);
+  font-size: var(--cg-text-sm);
+}
+
+.cg-pricing__features {
+  flex: 1;
+  margin: 0 0 var(--cg-s6);
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cg-s2);
+  color: var(--cg-ink-muted);
+  line-height: var(--cg-leading-relaxed);
+}
+
+.cg-pricing__features li {
+  padding-inline-start: var(--cg-s6);
+  position: relative;
+}
+
+/* A drawn checkmark — no icon set, exactly the `faq` chevron's own approach. */
+.cg-pricing__features li::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 0.4em;
+  inline-size: 0.6em;
+  block-size: 0.35em;
+  border-inline-start: 2px solid var(--cg-accent);
+  border-block-end: 2px solid var(--cg-accent);
+  transform: rotate(-45deg);
+}
+
+.cg-pricing__action {
+  margin-block-start: auto;
+}
+
+.cg-pricing__action .cg-action {
+  inline-size: 100%;
+  justify-content: center;
+}
+
+/* --- accordion (blocks@2.0) ----------------------------------------------
+   Identical mechanics to `faq`'s panel, kept as its own rule block so the
+   two can diverge visually without either one's CSS becoming a conditional.
+   ------------------------------------------------------------------------- */
+
+.cg-accordion {
+  max-inline-size: var(--cg-page-narrow);
+  margin-inline: auto;
+}
+
+.cg-accordion__items {
+  background: var(--cg-surface-raised);
+  border-radius: var(--cg-radius-lg);
+  box-shadow: var(--cg-ring);
+  overflow: hidden;
+}
+
+.cg-accordion__item + .cg-accordion__item {
+  border-block-start: 1px solid var(--cg-line-soft);
+}
+
+.cg-accordion__question {
+  display: flex;
+  align-items: center;
+  gap: var(--cg-s4);
+  padding: var(--cg-s5) var(--cg-s6);
+  font-weight: var(--cg-weight-semibold);
+  cursor: pointer;
+  list-style: none;
+  transition: background-color var(--cg-duration) var(--cg-ease);
+}
+
+.cg-accordion__question::-webkit-details-marker {
+  display: none;
+}
+
+.cg-accordion__question:hover {
+  background: var(--cg-accent-soft);
+  color: var(--cg-accent-soft-fg);
+}
+
+.cg-accordion__question::after {
+  content: "";
+  flex: none;
+  margin-inline-start: auto;
+  inline-size: 0.6em;
+  block-size: 0.6em;
+  border-radius: var(--cg-radius-pill);
+  border: 2px solid currentColor;
+  position: relative;
+}
+
+/* A plus that becomes a minus, rather than the `faq` chevron — visually
+   distinct from its sibling block, on the same zero-JavaScript mechanics. */
+.cg-accordion__question::before {
+  content: "";
+  position: absolute;
+  inset-inline-end: calc(var(--cg-s6) + 0.2em);
+  inline-size: 0.32em;
+  block-size: 0;
+  border-block-start: 2px solid currentColor;
+}
+
+.cg-accordion__details[open] .cg-accordion__question::before {
+  content: none;
+}
+
+.cg-accordion__details[open] .cg-accordion__question {
+  color: var(--cg-accent);
+}
+
+.cg-accordion__answer {
+  padding: 0 var(--cg-s6) var(--cg-s6);
+  color: var(--cg-ink-muted);
+  line-height: var(--cg-leading-relaxed);
+}
+
+.cg-accordion__answer > :first-child {
+  margin-block-start: 0;
+}
+
+.cg-accordion__answer > :last-child {
+  margin-block-end: 0;
+}
+
+/* --- statCounter (blocks@2.0) ---------------------------------------------
+   Same `<dl>` mechanics as `stats`, without a background card: a counter row
+   reads as a single strip of figures rather than as `stats`'s set of panels.
+   ------------------------------------------------------------------------- */
+
+.cg-stat-counters__items {
+  display: grid;
+  gap: var(--cg-gap);
+  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+  margin: 0;
+  text-align: center;
+}
+
+.cg-stat-counter {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--cg-s2);
+}
+
+.cg-stat-counter__value {
+  margin: 0;
+  color: var(--cg-accent);
+  font-size: calc(var(--cg-text-3xl) * 1.15);
+  font-weight: var(--cg-weight-bold);
+  line-height: var(--cg-leading-tight);
+  letter-spacing: var(--cg-tracking-tight);
+  font-variant-numeric: tabular-nums;
+}
+
+.cg-stat-counter__label {
+  color: var(--cg-ink-muted);
+  font-size: var(--cg-text-xs);
+  font-weight: var(--cg-weight-semibold);
+  letter-spacing: var(--cg-tracking-wide);
+  text-transform: uppercase;
+}
+
+/* --- logoStrip (blocks@2.0) ------------------------------------------------
+   The lighter-weight sibling of `logos`: one row, no card, no link — the
+   "as seen in" strip rather than the fuller partner grid.
+   ------------------------------------------------------------------------- */
+
+.cg-logo-strip {
+  margin-block: 0;
+  text-align: center;
+}
+
+.cg-logo-strip__items {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--cg-gap-loose);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.cg-logo-strip__item {
+  display: flex;
+  align-items: center;
+}
+
+.cg-logo-strip__image {
+  block-size: var(--cg-s8);
+  inline-size: auto;
+  max-inline-size: 100%;
+  object-fit: contain;
+  opacity: 0.6;
+}
+
+.cg-logo-strip__caption {
+  margin-block-start: var(--cg-s4);
+  color: var(--cg-ink-subtle);
+  font-size: var(--cg-text-xs);
+  font-weight: var(--cg-weight-semibold);
+  letter-spacing: var(--cg-tracking-wide);
+  text-transform: uppercase;
+}

package/src/styles/theme.css

@@ -23,3 +23,4 @@
 @import "./tokens.css";
 @import "./base.css";
 @import "./blocks.css";
+@import "./archive.css";

package/src/theme-contract.ts

@@ -1,159 +1,27 @@
 /**
- * Contract D — Thème, frozen at `theme@1.0` on 2026-08-13.
+ * Contract D — Thème, `theme@1.0`/`1.1`.
  *
- * TEMPORARY HOME. These types and `defineTheme` belong to `@cogenta/render`,
- * which is being written in parallel (tasks 1–3 of L3). They live here so the
- * canonical theme can be written, typechecked and tested today, and must be
- * replaced by an import from `@cogenta/render` at merge time — not duplicated.
- *
- * Nothing below adds to `ctx`. Two shapes the contract names but does not spell
- * out — `MediaReference` and `ContentEntry` — are given the narrowest reading
- * that matches what is already frozen elsewhere; both are flagged in the code.
- */
-
-/**
- * Contract B stores a media field as the media library's identifier, never as
- * an URL and never as a rendition (`f.media` in `@cogenta/blocks`). So a
- * reference the theme can hold is that identifier.
- */
-export type MediaReference = string
-
-export interface ImageOptions {
-  readonly width?: number
-  readonly height?: number
-  readonly format?: 'avif' | 'webp' | 'jpeg' | 'png'
-  readonly fit?: 'cover' | 'contain'
-}
-
-export interface ImageSource {
-  readonly src: string
-  readonly srcset: string
-  readonly width: number
-  readonly height: number
-  /** Alt text and focal point come from the media entity, never invented here. */
-  readonly alt: string
-  readonly focal: { readonly x: number; readonly y: number } | null
-}
-
-/**
- * Contract A, "Champs système". A theme only ever sees published entries — the
- * read token carries the `public` role — so `status` is narrow in practice but
- * kept whole here rather than guessed at.
- *
- * The schema-defined fields are open: which of them exist depends on the
- * collection, and a theme must not assume one is present. `entryTitle` in
- * `src/render/entry.ts` is the only place that reaches for one.
- */
-export interface ContentEntry {
-  readonly id: string
-  readonly collection: string
-  readonly locale: string
-  readonly status: 'draft' | 'scheduled' | 'published' | 'archived'
-  readonly [field: string]: unknown
-}
-
-export interface QueryRequest {
-  readonly collection: string
-  readonly filter?: Readonly<Record<string, unknown>>
-  readonly sort?: { readonly field: string; readonly direction: 'asc' | 'desc' }
-  readonly limit?: number
-  readonly cursor?: string
-}
-
-export interface Page<T> {
-  readonly items: readonly T[]
-  readonly nextCursor: string | null
-}
-
-export interface ContentClient {
-  entry(collection: string, id: string): Promise<ContentEntry | null>
-  byPath(path: string): Promise<ContentEntry | null>
-  list(request: QueryRequest): Promise<Page<ContentEntry>>
-}
-
-export type LinkTargetInput = { collection: string; id: string } | { path: string } | string
-
-export interface RenderContext {
-  readonly site: {
-    readonly name: string
-    readonly url: string
-    readonly locales: readonly string[]
-    readonly defaultLocale: string
-  }
-  /** The locale being rendered. */
-  readonly locale: string
-  /** The URL being rendered, already resolved. */
-  readonly url: URL
-
-  /** Translation. An unknown key returns the key, never an empty string. */
-  t(key: string, values?: Readonly<Record<string, string | number>>): string
-
-  /** Image variants. Returns what a responsive `<img>` needs, nothing more. */
-  image(media: MediaReference, options?: ImageOptions): ImageSource
-
-  /** URL of an entry, of a path, or of an external target. Locale-aware. */
-  link(target: LinkTargetInput): string
-
-  /** Read-only content access. The only door to data a theme has. */
-  readonly content: ContentClient
-}
-
-/** Contract D, "Besoins runtime". */
-export type ThemeRuntime = 'static' | 'server' | 'edge'
-
-export interface ThemeManifest {
-  readonly name: string
-  readonly version: string
-  /** Version of the theme contract. */
-  readonly engine: string
-  /** Version of the block vocabulary supported. */
-  readonly blocks: string
-  /** Every vocabulary block the theme renders. A gap fails installation. */
-  readonly implements: readonly string[]
-  /** Content types expected, or `'*'`. */
-  readonly collections: readonly string[] | '*'
-  readonly runtime: ThemeRuntime
-  /** Path to the default skin, relative to the manifest. */
-  readonly tokens: string
-  readonly a11y: { readonly verified: 'WCAG-2.2-AA' | 'WCAG-2.2-AAA' | 'none' }
-}
-
-/**
- * Identity function. It exists for the inference and for the single place a
- * manifest is recognised, not to validate: validation happens at installation,
- * on the theme's sources, where a lie can actually be caught.
+ * Re-exported from `@cogenta/theme-kit`, which now holds the one real copy of
+ * this contract every theme package (this one included) implements against —
+ * see that package's own `contract.ts` for why. This file stays only because
+ * `@cogenta/theme-canonical`'s own public surface (`index.ts`'s
+ * `export * from './theme-contract.js'`) has always named these symbols, and
+ * a theme installed from this package before today must keep resolving them
+ * from the same place.
  */
-export function defineTheme<const M extends ThemeManifest>(manifest: M): M {
-  return manifest
-}
 
-/**
- * Contract D, "Tokens de skin". The set is **closed and complete**: a skin that
- * omits a token is refused. Rendered as `--cogenta-<group>-<name>` into a single
- * stylesheet, so changing skin rewrites one file and needs no build.
- */
-export interface SkinTokens {
-  readonly color: {
-    readonly bg: string
-    readonly fg: string
-    readonly accent: string
-    readonly accentFg: string
-    readonly muted: string
-    readonly mutedFg: string
-    readonly border: string
-  }
-  readonly font: {
-    readonly sans: string
-    readonly serif: string
-    readonly mono: string
-    readonly scale: number
-    readonly baseSize: string
-  }
-  readonly space: {
-    readonly unit: string
-    readonly density: 'compact' | 'comfortable' | 'spacious'
-  }
-  readonly radius: { readonly sm: string; readonly md: string; readonly lg: string }
-  readonly motion: { readonly duration: string; readonly easing: string; readonly reduced: boolean }
-  readonly shadow: { readonly sm: string; readonly md: string }
-}
+export {
+  type ContentClient,
+  type ContentEntry,
+  defineTheme,
+  type ImageOptions,
+  type ImageSource,
+  type LinkTargetInput,
+  type MediaReference,
+  type Page,
+  type QueryRequest,
+  type RenderContext,
+  type SkinTokens,
+  type ThemeManifest,
+  type ThemeRuntime,
+} from '@cogenta/theme-kit'