j.foucher/AsterionWP2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(child-theme): scaffold asterion-bricks v0.1.0

Browse Source 
Initial child theme structure inheriting from Bricks parent. Token-driven,
RGPD-native, mobile-first foundation ready for component and template work.

What's in this commit
- style.css: WP theme metadata (Template: bricks, v0.1.0)
- functions.php: enqueue cascade tokens -> utilities -> components,
  defer-loaded main.js, font preload, theme support, image sizes
  (av-hero 2400x1350, av-card 800x600, av-thumb 400x300), Gutenberg
  default styles dequeued
- theme.json: Gutenberg color/typo palette mirroring tokens
- assets/css/tokens.css: full design system per Design Handoff section 2
  (brand colors, neutrals, semantics, type scale + line-heights, 8pt
  spacing, radii, shadows, z-index, motion, prefers-reduced-motion)
- assets/css/utilities.css: modern reset + .av-container, .av-skip-link,
  .av-sr-only, .av-stack, .av-section helpers, opinionated heading scale
- assets/css/components.css: index of planned components + buttons
  (5 variants x 4 sizes per Design Handoff section 3.1) and links
- assets/js/main.js: vanilla skeleton with header scroll, IntersectionObserver
  reveal, count-up, mobile drawer; respects prefers-reduced-motion
- inc/cpt.php: register_post_type case_study (slug /customers/) + scenario
  (slug /scenarios/) + shared 'industry' taxonomy
- inc/seo.php: Organization JSON-LD on home; placeholders for Product,
  Article, FAQPage, BreadcrumbList
- assets/fonts/: Inter Variable + Italic WOFF2 self-hosted (RGPD; no
  Google Fonts CDN). Inter Display @font-face commented — Inter 4+ uses
  opsz axis from the same file.

Out of scope (intentionally deferred)
- Component fills: cards, forms, navigation, alerts, modals, tabs (placeholders)
- Page templates: home and beyond
- Bricks JSON template exports
- Schema.org Product / Article / FAQPage / BreadcrumbList implementations

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
j.foucher
2026-05-09 11:49:10 +02:00
parent f9192631ff
commit 6f62082dc4
15 changed files with 1359 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
wp-content/themes/asterion-bricks/assets/css/tokens.css Normal file
View File

@@ -0,0 +1,234 @@
/**
* Asterion Bricks — Design tokens
*
* Source of truth for the design system. Every component, every utility,
* every Bricks override references variables defined here.
*
* Reference : Design Handoff Specification (livrable 2/2), section 2.
*
* Hard rule : NEVER hardcode a color, spacing, radius, or duration in any
* other file. If it's not yet a token, add it here first, then use it.
*/
/* ============================================================================
Self-hosted fonts (RGPD — no Google Fonts CDN)
Drop the .woff2 files into ../fonts/ and these declarations pick them up.
See ../fonts/README.md for download instructions.
============================================================================ */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/Inter-Variable.woff2") format("woff2-variations"),
url("../fonts/Inter-Variable.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/Inter-Variable-Italic.woff2") format("woff2-variations"),
url("../fonts/Inter-Variable-Italic.woff2") format("woff2");
}
/*
Inter Display is intentionally NOT registered as its own @font-face here.
Since Inter 4.x, "Display" optical sizing is baked into the main variable
font via the `opsz` axis. The CSS stack `"Inter Display", "Inter", ...`
in --font-display falls through to "Inter" (registered above), so headlines
pick up the correct file with no 404 noise.
If a separate InterDisplay-Variable.woff2 is dropped into ../fonts/ later
(e.g. from the rsms.me extras package), uncomment the block below.
@font-face {
font-family: "Inter Display";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/InterDisplay-Variable.woff2") format("woff2-variations"),
url("../fonts/InterDisplay-Variable.woff2") format("woff2");
}
*/
/* ============================================================================
Tokens
============================================================================ */
:root {
/* ---- BRAND COLORS ---- */
--color-brand-navy: #0B1F3A;
--color-brand-navy-deep: #081427;
--color-brand-gold: #C9A45A;
--color-brand-gold-soft: #E0C892;
--color-alert-red: #C8102E;
/* ---- NEUTRALS ---- */
--color-text-primary: #0B1F3A;
--color-text-secondary: #3E4C5E;
--color-text-muted: #6B7785;
--color-text-on-dark: #FFFFFF;
--color-text-on-dark-muted: #B6BFCC;
--color-bg-default: #FFFFFF;
--color-bg-subtle: #F5F7FA;
--color-bg-elevated: #FFFFFF;
--color-bg-dark: #0B1F3A;
--color-bg-dark-elevated: #13294B;
--color-border-default: #CCD3DC;
--color-border-subtle: #E5E9EE;
--color-border-on-dark: #1F3252;
/* ---- SEMANTIC COLORS ---- */
--color-success: #1F8B4C;
--color-warning: #C29327;
--color-error: #C8102E;
--color-info: #1E5BA8;
/* ---- TYPOGRAPHY: families ---- */
--font-display: "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* ---- TYPOGRAPHY: sizes (rem-based, root = 16px) ---- */
--text-overline: 0.75rem; /* 12px */
--text-body-sm: 0.875rem; /* 14px */
--text-body-md: 1rem; /* 16px */
--text-body-lg: 1.25rem; /* 20px */
--text-h4: 1.125rem; /* 18px */
--text-h3: 1.375rem; /* 22px */
--text-h2: 1.75rem; /* 28px */
--text-h1: 2.25rem; /* 36px */
--text-display-md: 2.75rem; /* 44px */
--text-display-lg: 3.5rem; /* 56px */
--text-display-xl: 4.5rem; /* 72px */
/* ---- TYPOGRAPHY: line heights (per Design Handoff section 2.2) ---- */
--leading-display-xl: 1.05;
--leading-display-lg: 1.10;
--leading-display-md: 1.15;
--leading-h1: 1.20;
--leading-h2: 1.25;
--leading-h3: 1.30;
--leading-h4: 1.35;
--leading-body-lg: 1.55;
--leading-body-md: 1.60;
--leading-body-sm: 1.50;
--leading-overline: 1.40;
/* ---- TYPOGRAPHY: weights ---- */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* ---- TYPOGRAPHY: tracking ---- */
--tracking-tight: -0.02em; /* display */
--tracking-snug: -0.01em; /* headings */
--tracking-normal: 0; /* body */
--tracking-overline: 0.08em; /* eyebrows, all-caps */
/* ---- SPACING (8-pt grid) ---- */
--space-0: 0;
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
--space-32: 8rem; /* 128px */
/* ---- LAYOUT: container & grid ---- */
--container-max: 1280px;
--container-padding-mobile: 1.5rem; /* 24px */
--container-padding-tablet: 2rem; /* 32px */
--container-padding-desktop: 4rem; /* 64px */
--gutter-mobile: 1rem; /* 16px */
--gutter-tablet: 1rem; /* 16px */
--gutter-desktop: 1.5rem; /* 24px */
/* ---- BORDER RADIUS ---- */
--radius-none: 0;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
--radius-pill: 9999px;
--radius-full: 50%;
/* ---- BORDER WIDTHS ---- */
--border-thin: 1px;
--border-default: 2px;
--border-thick: 3px;
/* ---- SHADOWS ---- */
--shadow-none: none;
--shadow-xs: 0 1px 2px rgba(11, 31, 58, 0.05);
--shadow-sm: 0 2px 4px rgba(11, 31, 58, 0.08), 0 1px 2px rgba(11, 31, 58, 0.06);
--shadow-md: 0 4px 12px rgba(11, 31, 58, 0.10), 0 2px 4px rgba(11, 31, 58, 0.06);
--shadow-lg: 0 12px 24px rgba(11, 31, 58, 0.14), 0 4px 8px rgba(11, 31, 58, 0.08);
--shadow-glow-gold: 0 0 24px rgba(201, 164, 90, 0.35);
/* ---- Z-INDEX SCALE ---- */
--z-base: 1;
--z-dropdown: 1000;
--z-sticky: 1100;
--z-fixed: 1200;
--z-modal-backdrop: 1300;
--z-modal: 1310;
--z-popover: 1400;
--z-toast: 1500;
/* ---- MOTION: easing ---- */
--ease-default: cubic-bezier(0.16, 1, 0.3, 1); /* premium snap */
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-linear: linear;
/* ---- MOTION: durations ---- */
--duration-instant: 100ms; /* micro-interactions */
--duration-fast: 150ms; /* button hover, focus */
--duration-default: 250ms; /* card hover, accordion */
--duration-slow: 400ms; /* modal, drawer */
--duration-deliberate: 600ms; /* hero animations */
/* ---- A11Y / TOUCH ---- */
--tap-target-min: 44px; /* WCAG AA + Apple HIG */
--focus-ring-width: 2px;
--focus-ring-offset: 2px;
--focus-ring-color: var(--color-info);
/* ---- BREAKPOINTS (used in @media; here for reference) ----
xs: 0 — mobile portrait (375px reference)
sm: 640px — mobile landscape, small tablets
md: 768px — tablet portrait
lg: 1024px — tablet landscape, small laptop
xl: 1280px — desktop default
2xl: 1536px — large desktop
*/
}
/* ============================================================================
Reduced motion — respect user preference (Design Handoff section 5.5)
============================================================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}