@gradial/aci 0.1.31 → 0.1.33

package/templates/nextjs/template/src/design-system/tokens/colors.css

@@ -0,0 +1,110 @@
+@theme {
+  --color-white: #ffffff;
+  --color-black: #000000;
+
+  /* Light palette — airy, modern */
+  --color-surface-50: #f8fafc;
+  --color-surface-100: #f1f5f9;
+  --color-surface-200: #e2e8f0;
+  --color-surface-300: #cbd5e1;
+  --color-surface-400: #94a3b8;
+  --color-surface-900: #0f172a;
+  --color-surface-950: #020617;
+
+  /* Brand accents — electric blue + warm orange */
+  --color-brand-500: #0ea5e9;
+  --color-brand-400: #38bdf8;
+  --color-brand-600: #0284c7;
+  --color-brand-300: #7dd3fc;
+  --color-brand-glow: rgba(14, 165, 233, 0.25);
+
+  --color-warm-500: #f97316;
+  --color-warm-400: #fb923c;
+  --color-warm-600: #ea580c;
+  --color-warm-300: #fdba74;
+
+  /* Text */
+  --color-text-primary: #0f172a;
+  --color-text-secondary: #475569;
+  --color-text-tertiary: #64748b;
+  --color-text-muted: #94a3b8;
+  --color-text-inverse: #ffffff;
+
+  /* Borders */
+  --color-border-subtle: rgba(15, 23, 42, 0.06);
+  --color-border-default: rgba(15, 23, 42, 0.1);
+  --color-border-strong: rgba(15, 23, 42, 0.16);
+  --color-border-inverse: rgba(255, 255, 255, 0.2);
+
+  /* Focus */
+  --color-focus: var(--color-brand-600);
+
+  /* Semantic aliases — light theme default */
+  --color-page: var(--color-white);
+  --color-page-inverse: var(--color-surface-900);
+  --color-page-light: var(--color-white);
+  --color-chrome-surface: var(--color-white);
+  --color-chrome-surface-default: var(--color-white);
+
+  --color-surface: var(--color-white);
+  --color-surface-muted: var(--color-surface-100);
+  --color-surface-raised: var(--color-surface-200);
+  --color-surface-dark: var(--color-surface-900);
+  --color-surface-raised-dark: var(--color-surface-800);
+
+  --color-fg: var(--color-text-primary);
+  --color-fg-muted: var(--color-text-secondary);
+  --color-fg-base-muted: var(--color-text-secondary);
+  --color-fg-inverse: var(--color-text-inverse);
+  --color-fg-inverse-soft: var(--color-surface-200);
+  --color-fg-inverse-muted: var(--color-surface-400);
+
+  --color-border: var(--color-border-default);
+  --color-edge: var(--color-border-default);
+  --color-edge-dark: var(--color-border-strong);
+  --color-edge-inverse: var(--color-border-inverse);
+
+  --color-accent-primary: var(--color-brand-600);
+  --color-accent-secondary: var(--color-brand-500);
+  --color-accent-tertiary: var(--color-warm-500);
+  --color-accent-pink: var(--color-brand-500);
+  --color-accent-blue: var(--color-brand-500);
+  --color-accent-warm: var(--color-warm-500);
+
+  --color-icon-default: var(--color-text-tertiary);
+  --color-link-hover: var(--color-brand-600);
+
+  /* Gradients */
+  --gradient-hero-base: radial-gradient(
+    ellipse 80% 60% at 50% 0%,
+    rgba(14, 165, 233, 0.12) 0%,
+    rgba(14, 165, 233, 0.04) 40%,
+    transparent 70%
+  );
+  --gradient-hero-overlay: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.2) 0%,
+    rgba(255, 255, 255, 0.7) 60%,
+    rgba(255, 255, 255, 0.95) 100%
+  );
+  --gradient-hero-overlay-rtl: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.95) 0%,
+    rgba(255, 255, 255, 0.7) 60%,
+    rgba(255, 255, 255, 0.2) 100%
+  );
+  --gradient-hero-radial: radial-gradient(
+    ellipse 60% 40% at 80% 20%,
+    rgba(249, 115, 22, 0.06) 0%,
+    transparent 60%
+  );
+  --gradient-card: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.95) 0%,
+    rgba(241, 245, 249, 0.6) 100%
+  );
+  --gradient-cta: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-brand-400) 100%);
+  --gradient-cta-dark: linear-gradient(135deg, var(--color-surface-100) 0%, var(--color-surface-200) 100%);
+  --gradient-cta-default: var(--gradient-cta);
+  --gradient-top-rail: linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-warm-500) 100%);
+}

package/templates/nextjs/template/src/design-system/tokens/components.css

@@ -0,0 +1,86 @@
+@theme {
+  --width-logo-mobile: 8rem;
+  --width-logo: 12rem;
+  --width-logo-footer-mobile: 9rem;
+  --width-logo-footer: 14rem;
+  --logo-filter: none;
+
+  --text-button: var(--text-size-base);
+  --leading-button: 1;
+  --button-hover-opacity: 0.92;
+  --transition-duration-fast: 200ms;
+
+  --button-primary-bg: var(--color-accent-primary);
+  --button-primary-text: var(--color-white);
+  --button-primary-border: var(--color-accent-primary);
+  --button-primary-hover-bg: var(--color-brand-500);
+  --button-primary-hover-border: var(--color-brand-500);
+
+  --button-secondary-bg: var(--color-surface-100);
+  --button-secondary-text: var(--color-text-primary);
+  --button-secondary-border: var(--color-surface-200);
+  --button-secondary-hover-bg: var(--color-surface-200);
+  --button-secondary-hover-border: var(--color-surface-300);
+
+  --button-outline-bg: transparent;
+  --button-outline-text: var(--color-text-primary);
+  --button-outline-border: var(--color-border-strong);
+  --button-outline-hover-bg: var(--color-surface-100);
+  --button-outline-hover-border: var(--color-text-primary);
+
+  --button-tertiary-bg: transparent;
+  --button-tertiary-text: var(--color-accent-primary);
+  --button-tertiary-border: transparent;
+  --button-tertiary-hover-bg: rgba(14, 165, 233, 0.08);
+  --button-tertiary-hover-text: var(--color-brand-600);
+
+  --button-ghost-bg: transparent;
+  --button-ghost-text: var(--color-text-primary);
+  --button-ghost-border: transparent;
+  --button-ghost-hover-bg: var(--color-surface-100);
+  --button-ghost-hover-text: var(--color-text-primary);
+
+  --header-bg: rgba(255, 255, 255, 0.85);
+  --header-text: var(--color-text-primary);
+  --header-muted: var(--color-text-secondary);
+  --header-border: var(--color-border-default);
+  --header-link-hover: var(--color-accent-primary);
+  --header-icon: var(--color-text-tertiary);
+  --header-scrolled-bg: var(--color-white);
+
+  --mobile-nav-bg: var(--color-white);
+  --mobile-nav-text: var(--color-text-primary);
+  --mobile-nav-muted: var(--color-text-secondary);
+  --mobile-nav-border: var(--color-border-default);
+  --mobile-nav-link-hover: var(--color-accent-primary);
+  --mobile-nav-link-size: 1.75rem;
+  --mobile-nav-link-line-height: 1.1;
+
+  --footer-bg: var(--color-surface-100);
+  --footer-text: var(--color-text-primary);
+  --footer-muted: var(--color-text-secondary);
+  --footer-border: var(--color-border-default);
+  --footer-link-hover: var(--color-accent-primary);
+  --footer-grid-columns: 1fr 2fr;
+
+  --color-callout-icon-bg-light: rgba(14, 165, 233, 0.08);
+  --color-callout-icon-bg-dark: rgba(14, 165, 233, 0.12);
+  --color-callout-icon-bg: var(--color-callout-icon-bg-light);
+  --callout-icon-color: var(--color-accent-primary);
+
+  --rich-text-flow-space: 1.5rem;
+  --rich-text-heading-space: 2rem;
+  --rich-text-link-decoration-thickness: 0.09em;
+  --rich-text-link-underline-offset: 0.18em;
+  --rich-text-list-indent: 1.4em;
+  --rich-text-blockquote-border-width: 0.25rem;
+  --rich-text-inline-code-padding: 0.08em 0.32em;
+  --rich-text-quote-border: var(--color-brand-500);
+  --rich-text-quote-bg: rgba(14, 165, 233, 0.06);
+  --rich-text-quote-bg-dark: rgba(14, 165, 233, 0.1);
+  --rich-text-quote-bg-default: var(--rich-text-quote-bg-light);
+  --rich-text-inline-code-bg: rgba(15, 23, 42, 0.06);
+  --rich-text-inline-code-bg-dark: rgba(255, 255, 255, 0.08);
+  --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg);
+  --rich-text-inline-code-text: var(--color-fg);
+}

package/templates/nextjs/template/src/design-system/tokens/index.css

@@ -0,0 +1,6 @@
+@import "./colors.css";
+@import "./typography.css";
+@import "./spacing.css";
+@import "./shadows.css";
+@import "./radii.css";
+@import "./components.css";

package/templates/nextjs/template/src/design-system/tokens/radii.css

@@ -0,0 +1,5 @@
+@theme {
+  --radius-button: 0.5rem;
+  --radius-card: 0.875rem;
+  --radius-cta: 1rem;
+}

package/templates/nextjs/template/src/design-system/tokens/shadows.css

@@ -0,0 +1,9 @@
+@theme {
+  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.08);
+  --shadow-card-dark: 0 1px 3px rgba(0, 0, 0, 0.1), 0 16px 40px rgba(0, 0, 0, 0.15);
+  --shadow-card-default: var(--shadow-card);
+  --shadow-elevated: 0 1px 3px rgba(15, 23, 42, 0.05), 0 20px 48px rgba(15, 23, 42, 0.12);
+  --shadow-glow: 0 0 30px rgba(14, 165, 233, 0.25);
+  --shadow-glow-sm: 0 0 15px rgba(14, 165, 233, 0.18);
+  --shadow-glow-lg: 0 0 40px rgba(14, 165, 233, 0.3);
+}

package/templates/nextjs/template/src/design-system/tokens/spacing.css

@@ -0,0 +1,26 @@
+@theme {
+  --max-width-container: 80rem;
+  --max-width-container-narrow: 48rem;
+  --max-width-rich-text: var(--max-width-container-narrow);
+  --max-width-rich-text-wide: 54rem;
+  --max-width-cta: 76rem;
+
+  --spacing-container: clamp(1rem, 5vw, 3rem);
+  --spacing-section-y: clamp(4rem, 8vw, 7rem);
+  --spacing-footer-y: clamp(4rem, 8vw, 6rem);
+  --spacing-cta-y: clamp(4rem, 8vw, 6rem);
+  --spacing-cta-x: clamp(1.5rem, 5vw, 5rem);
+  --spacing-card: 1.5rem;
+  --spacing-hero-py: clamp(8rem, 20vh, 14rem);
+
+  --height-header: 4.5rem;
+  --height-hero-min: 100svh;
+  --width-hero-content: 48rem;
+  --height-button-min: 3rem;
+
+  --spacing-button-x: 1.5rem;
+  --spacing-button-y: 0.875rem;
+
+  --z-header: 50;
+  --z-overlay: 60;
+}

package/templates/nextjs/template/src/design-system/tokens/typography.css

@@ -0,0 +1,32 @@
+@theme {
+  --font-family-display: var(--font-inter), "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-family-heading: var(--font-family-display);
+  --font-family-base: var(--font-inter), "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --text-size-brand: 1.5rem;
+  --text-size-eyebrow: 0.75rem;
+  --text-size-caption: 0.75rem;
+  --text-size-body-small: 0.875rem;
+  --text-size-body: 1rem;
+  --text-size-body-large: 1.125rem;
+  --text-size-h1-mobile: 3rem;
+  --text-size-h1: 4.5rem;
+  --text-size-h2-mobile: 2rem;
+  --text-size-h2: 3rem;
+  --text-size-h3: 1.25rem;
+  --text-size-h4: 1.125rem;
+
+  --leading-none: 1;
+  --leading-tight: 1.05;
+  --leading-heading: 1.1;
+  --leading-snug: 1.25;
+  --leading-body: 1.6;
+  --leading-relaxed: 1.7;
+  --letter-spacing-label: 0.08em;
+  --letter-spacing-tight: -0.02em;
+}

package/templates/nextjs/template/src/middleware.ts.tmpl

@@ -0,0 +1,12 @@
+import { createGradialMiddleware } from '@gradial/aci/next/middleware';
+
+export default createGradialMiddleware({
+  siteId: '{{siteName}}',
+});
+
+// The matcher value below is inlined for Next.js static analysis compatibility.
+// Source of truth: aciMiddlewareMatcher from '@gradial/aci/next/middleware'.
+// The conformance check verifies this stays in sync with the SDK export.
+export const config = {
+  matcher: ['/((?!_next(?:/|$)|api(?:/|$)|favicon\\.ico$|\\.gradial-dam(?:/|$)).*)'],
+};

package/templates/nextjs/template/tests/conformance.test.ts.tmpl

@@ -0,0 +1,12 @@
+/**
+ * ACI Conformance Tests
+ *
+ * Validates that the site conforms to canonical ACI integration patterns.
+ * See https://docs.gradial.com/aci/testing for details.
+ */
+import { conformancePreset } from '@gradial/aci/testing';
+
+conformancePreset({
+  framework: 'next',
+  siteId: '{{siteName}}',
+});

package/templates/nextjs/template/src/cms/contracts/components/container.contract.ts

@@ -1,20 +0,0 @@
-import { defineComponentContract } from '@gradial/aci';
-import { z } from 'zod';
-
-export const schema = z.object({
-  theme: z.enum(['auto', 'light', 'dark']).optional(),
-  className: z.string().optional(),
-});
-
-export type ContentProps = z.infer<typeof schema>;
-
-export const containerContract = defineComponentContract({
-  id: 'container',
-  props: schema,
-  slots: {
-    content: {
-      allowed: ['button'],
-      multiple: true,
-    },
-  },
-});

package/templates/nextjs/template/src/middleware.ts

@@ -1,7 +0,0 @@
-import { createGradialMiddleware } from '@gradial/aci/next/middleware';
-
-export default createGradialMiddleware();
-
-export const config = {
-  matcher: ['/((?!_next(?:/|$)|api(?:/|$)|gradial/assets(?:/|$)|favicon\\.ico$).*)'],
-};