@gradial/aci 0.1.20-preview.2 → 0.1.20

package/templates/astro/template/src/design-system/styles.css

@@ -0,0 +1,399 @@
+@import "tailwindcss" source(none);
+@import "./tokens/index.css";
+
+@source "../../src/**/*.astro";
+@source "../../content/**/*.json";
+@source "../fixtures/**/*.ts";
+
+:root {
+  color-scheme: light;
+}
+
+[dir="rtl"] {
+  --gradient-hero-overlay: var(--gradient-hero-overlay-rtl);
+}
+
+.theme-auto,
+.theme-light {
+  --color-fg: var(--color-fg-primary);
+  --color-fg-muted: var(--color-fg-secondary);
+  --color-surface-default: var(--color-page);
+  --color-surface-raised-default: var(--color-surface-raised);
+  --color-edge: var(--color-border);
+  --color-icon-default: var(--color-accent-primary);
+  --color-link-hover: var(--color-accent-primary);
+  --color-callout-icon-bg-default: var(--color-callout-icon-bg-light);
+  --rich-text-quote-bg-default: var(--rich-text-quote-bg);
+  --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg);
+  --shadow-card-default: var(--shadow-card);
+  --gradient-cta-default: var(--gradient-cta);
+}
+
+.theme-dark {
+  --color-fg: var(--color-fg-inverse);
+  --color-fg-muted: var(--color-fg-inverse-muted);
+  --color-surface-default: var(--color-page-inverse);
+  --color-surface-raised-default: var(--color-page-inverse);
+  --color-edge: var(--color-edge-inverse);
+  --color-icon-default: var(--color-fg-inverse-muted);
+  --color-link-hover: var(--color-accent-secondary);
+  --rich-text-quote-bg-default: var(--rich-text-quote-bg-dark);
+  --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg-dark);
+  --shadow-card-default: var(--shadow-card-dark);
+  --gradient-cta-default: var(--gradient-cta-dark);
+  --button-primary-bg: var(--color-white);
+  --button-primary-text: var(--color-black);
+  --button-primary-border: var(--color-white);
+  --button-secondary-bg: transparent;
+  --button-secondary-text: var(--color-white);
+  --button-secondary-border: var(--color-white);
+  --button-outline-bg: transparent;
+  --button-outline-text: var(--color-white);
+  --button-outline-border: var(--color-edge-inverse);
+  --button-tertiary-text: var(--color-accent-secondary);
+}
+
+.theme-accent {
+  --color-fg: var(--color-black);
+  --color-fg-muted: var(--color-black);
+  --color-surface-default: var(--color-accent-secondary);
+  --color-surface-raised-default: var(--color-accent-secondary);
+  --color-edge: transparent;
+  --color-icon-default: var(--color-black);
+  --color-link-hover: var(--color-black);
+  --gradient-cta-default: var(--gradient-cta);
+}
+
+.theme-dark .theme-auto {
+  --color-fg: var(--color-fg-inverse);
+  --color-fg-muted: var(--color-fg-inverse-soft);
+  --color-surface-default: var(--color-page-dark);
+  --color-surface-raised-default: var(--color-surface-raised-dark);
+  --color-edge: var(--color-edge-dark);
+  --color-icon-default: var(--color-accent-secondary);
+  --color-link-hover: var(--color-accent-secondary);
+  --color-callout-icon-bg: var(--color-callout-icon-bg-dark);
+  --rich-text-quote-bg-default: var(--rich-text-quote-bg-dark);
+  --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg-dark);
+  --shadow-card-default: var(--shadow-card-dark);
+  --gradient-cta-default: var(--gradient-cta-dark);
+  --button-primary-bg: var(--color-white);
+  --button-primary-text: var(--color-black);
+  --button-primary-border: var(--color-white);
+  --button-secondary-bg: transparent;
+  --button-secondary-text: var(--color-white);
+  --button-secondary-border: var(--color-white);
+  --button-outline-bg: transparent;
+  --button-outline-text: var(--color-white);
+  --button-outline-border: var(--color-edge-inverse);
+  --button-tertiary-text: var(--color-accent-secondary);
+}
+
+.theme-dark .theme-accent {
+  --color-fg: var(--color-fg-inverse);
+  --color-fg-muted: var(--color-fg-inverse-soft);
+  --color-surface-default: var(--color-surface-dark);
+  --color-surface-raised-default: var(--color-surface-raised-dark);
+  --color-edge: var(--color-edge-dark);
+  --color-icon-default: var(--color-accent-secondary);
+  --color-link-hover: var(--color-accent-secondary);
+  --rich-text-quote-bg-default: var(--rich-text-quote-bg-dark);
+  --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg-dark);
+  --gradient-cta-default: var(--gradient-cta-dark);
+}
+
+.bm-header {
+  background: var(--header-bg);
+  --color-fg: var(--header-text);
+  --color-fg-muted: var(--header-muted);
+  --color-edge: var(--header-border);
+  --color-link-hover: var(--header-link-hover);
+  --color-icon-default: var(--header-icon);
+  --button-secondary-text: var(--color-white);
+  --button-secondary-border: var(--color-white);
+  --button-outline-text: var(--color-white);
+  --button-outline-border: var(--header-border);
+}
+
+.bm-footer {
+  background: var(--footer-bg);
+  --color-fg: var(--footer-text);
+  --color-fg-muted: var(--footer-muted);
+  --color-edge: var(--footer-border);
+  --color-link-hover: var(--footer-link-hover);
+  --color-icon-default: var(--footer-muted);
+  --button-primary-bg: var(--color-white);
+  --button-primary-text: var(--color-black);
+  --button-primary-border: var(--color-white);
+  --button-secondary-text: var(--color-white);
+  --button-secondary-border: var(--color-white);
+  --button-outline-text: var(--color-white);
+  --button-outline-border: var(--footer-border);
+  --button-tertiary-text: var(--footer-link-hover);
+}
+
+.bm-mobile-nav {
+  background: var(--mobile-nav-bg);
+  --color-fg: var(--mobile-nav-text);
+  --color-fg-muted: var(--mobile-nav-muted);
+  --color-edge: var(--mobile-nav-border);
+  --color-link-hover: var(--mobile-nav-link-hover);
+  --color-icon-default: var(--mobile-nav-muted);
+  --button-primary-bg: var(--color-white);
+  --button-primary-text: var(--color-black);
+  --button-primary-border: var(--color-white);
+  --button-secondary-text: var(--color-white);
+  --button-secondary-border: var(--color-white);
+  --button-outline-text: var(--color-white);
+  --button-outline-border: var(--mobile-nav-border);
+  --button-tertiary-text: var(--mobile-nav-link-hover);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --color-fg: var(--color-fg-inverse);
+    --color-fg-muted: var(--color-fg-inverse-soft);
+    --color-surface-default: var(--color-page-dark);
+    --color-surface-raised-default: var(--color-surface-raised-dark);
+    --color-chrome-surface-default: var(--color-chrome-surface);
+    --color-edge: var(--color-edge-dark);
+    --color-icon-default: var(--color-accent-secondary);
+    --color-link-hover: var(--color-accent-secondary);
+    --color-callout-icon-bg: var(--color-callout-icon-bg-dark);
+    --rich-text-quote-bg-default: var(--rich-text-quote-bg-dark);
+    --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg-dark);
+    --shadow-card-default: var(--shadow-card-dark);
+    --gradient-cta-default: var(--gradient-cta-dark);
+    --button-primary-bg: var(--color-white);
+    --button-primary-text: var(--color-black);
+    --button-primary-border: var(--color-white);
+    --button-secondary-bg: transparent;
+    --button-secondary-text: var(--color-white);
+    --button-secondary-border: var(--color-white);
+    --button-outline-bg: transparent;
+    --button-outline-text: var(--color-white);
+    --button-outline-border: var(--color-edge-inverse);
+    --button-tertiary-text: var(--color-accent-secondary);
+  }
+
+  .theme-auto {
+    --color-fg: var(--color-fg-inverse);
+    --color-fg-muted: var(--color-fg-inverse-soft);
+    --color-surface-default: var(--color-page-dark);
+    --color-surface-raised-default: var(--color-surface-raised-dark);
+    --color-edge: var(--color-edge-dark);
+    --color-icon-default: var(--color-accent-secondary);
+    --color-link-hover: var(--color-accent-secondary);
+    --color-callout-icon-bg: var(--color-callout-icon-bg-dark);
+    --rich-text-quote-bg-default: var(--rich-text-quote-bg-dark);
+    --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg-dark);
+    --shadow-card-default: var(--shadow-card-dark);
+    --gradient-cta-default: var(--gradient-cta-dark);
+  }
+
+  .theme-accent {
+    --color-fg: var(--color-fg-inverse);
+    --color-fg-muted: var(--color-fg-inverse-soft);
+    --color-surface-default: var(--color-surface-dark);
+    --color-surface-raised-default: var(--color-surface-raised-dark);
+    --color-edge: var(--color-edge-dark);
+    --color-icon-default: var(--color-accent-secondary);
+    --color-link-hover: var(--color-accent-secondary);
+    --rich-text-quote-bg-default: var(--rich-text-quote-bg-dark);
+    --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg-dark);
+    --gradient-cta-default: var(--gradient-cta-dark);
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  background: var(--color-surface-default);
+  color: var(--color-fg);
+  font-family: var(--font-family-base);
+  font-size: var(--text-size-body);
+  line-height: var(--leading-body);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+img,
+svg {
+  display: block;
+}
+
+:focus-visible {
+  outline: calc(var(--spacing) * 0.75) solid var(--color-focus);
+  outline-offset: calc(var(--spacing) * 1);
+}
+
+@layer base {
+  h1, h2, h3, h4, h5, h6 {
+    margin-block: 0;
+    font-family: var(--font-family-heading);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--leading-heading);
+  }
+
+  h1 {
+    font-size: var(--text-size-h1-mobile);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--leading-tight);
+  }
+
+  h2 { font-size: var(--text-size-h2-mobile); }
+  h3 { font-size: var(--text-size-h3); }
+  h4 { font-size: var(--text-size-body-large); }
+  h5 { font-size: var(--text-size-body); }
+  h6 { font-size: var(--text-size-body-small); }
+
+  @media (min-width: 768px) {
+    h1 { font-size: var(--text-size-h1); }
+    h2 { font-size: var(--text-size-h2); }
+  }
+
+  p, ul, ol, blockquote, pre {
+    margin-block: 0;
+  }
+
+  ul { list-style: disc; padding-left: 1.4em; }
+  ol { list-style: decimal; padding-left: 1.4em; }
+}
+
+.bm-rich-text-section {
+  background: var(--color-surface-default);
+  padding: var(--spacing-section-y) var(--spacing-container);
+}
+
+.bm-rich-text-section--quiet {
+  background: var(--color-surface-muted);
+}
+
+.bm-rich-text {
+  max-width: var(--max-width-rich-text);
+  margin-inline: auto;
+  color: var(--color-fg);
+}
+
+.bm-rich-text--wide {
+  max-width: var(--max-width-rich-text-wide);
+}
+
+.bm-rich-text__eyebrow {
+  margin: 0 0 calc(var(--spacing) * 4);
+  color: var(--color-accent-primary);
+  font-size: var(--text-size-eyebrow);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: var(--letter-spacing-label);
+  text-transform: uppercase;
+}
+
+.bm-rich-text__heading {
+  margin: 0;
+  color: var(--color-fg);
+  font-family: var(--font-family-heading);
+  font-size: var(--text-size-h2-mobile);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--leading-heading);
+}
+
+.bm-rich-text__body {
+  margin-top: var(--rich-text-heading-space);
+  color: var(--color-fg);
+  font-size: var(--text-size-body-large);
+  line-height: var(--leading-relaxed);
+}
+
+.bm-rich-text__body--inline {
+  margin-top: 0;
+}
+
+.bm-rich-text__body > * {
+  margin-block: 0;
+}
+
+.bm-rich-text__body > * + * {
+  margin-top: var(--rich-text-flow-space);
+}
+
+.bm-rich-text__body h2,
+.bm-rich-text__body h3,
+.bm-rich-text__body h4 {
+  color: var(--color-fg);
+  font-family: var(--font-family-heading);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--leading-heading);
+}
+
+.bm-rich-text__body h2 {
+  font-size: var(--text-size-h3);
+}
+
+.bm-rich-text__body h3,
+.bm-rich-text__body h4 {
+  font-size: var(--text-size-body-large);
+}
+
+.bm-rich-text__body a {
+  color: var(--color-link-hover);
+  font-weight: var(--font-weight-semibold);
+  text-decoration: underline;
+  text-decoration-thickness: var(--rich-text-link-decoration-thickness);
+  text-underline-offset: var(--rich-text-link-underline-offset);
+}
+
+.bm-rich-text__body ul {
+  list-style: disc;
+  padding-left: var(--rich-text-list-indent);
+}
+
+.bm-rich-text__body ol {
+  list-style: decimal;
+  padding-left: var(--rich-text-list-indent);
+}
+
+.bm-rich-text__body li + li {
+  margin-top: calc(var(--spacing) * 3);
+}
+
+.bm-rich-text__body blockquote {
+  border-left: var(--rich-text-blockquote-border-width) solid var(--rich-text-quote-border);
+  background: var(--rich-text-quote-bg-default);
+  padding: calc(var(--spacing) * 5) calc(var(--spacing) * 6);
+  font-weight: var(--font-weight-medium);
+}
+
+.bm-rich-text__body code {
+  border-radius: calc(var(--spacing) * 1);
+  background: var(--rich-text-inline-code-bg-default);
+  color: var(--rich-text-inline-code-text);
+  font-size: var(--text-size-caption);
+  padding: var(--rich-text-inline-code-padding);
+}
+
+@media (min-width: 768px) {
+  .bm-rich-text__heading {
+    font-size: var(--text-size-h2);
+  }
+}

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

@@ -0,0 +1,60 @@
+@theme {
+  --color-black: #000000;
+  --color-white: #ffffff;
+  --color-page: var(--color-white);
+  --color-page-dark: #101014;
+  --color-page-inverse: #000000;
+  --color-chrome-surface: var(--color-page-inverse);
+  --color-chrome-surface-default: var(--color-chrome-surface);
+  --color-surface: #ffffff;
+  --color-surface-muted: #f6f6f7;
+  --color-surface-raised: #ffffff;
+  --color-surface-dark: #101014;
+  --color-surface-raised-dark: #16161d;
+  --color-fg-primary: #050505;
+  --color-fg-secondary: #4b4b50;
+  --color-fg-base-muted: #8d8d96;
+  --color-fg-inverse: #f7f7f7;
+  --color-fg-inverse-soft: #c8c8ce;
+  --color-fg-inverse-muted: #8f8f96;
+  --color-border: color-mix(in srgb, var(--color-black) 12%, transparent);
+  --color-edge-dark: color-mix(in srgb, var(--color-white) 16%, transparent);
+  --color-edge-inverse: color-mix(in srgb, var(--color-white) 26%, transparent);
+  --color-focus: #9a78ff;
+  --color-fg: var(--color-fg-primary);
+  --color-fg-muted: var(--color-fg-secondary);
+  --color-surface-default: var(--color-page);
+  --color-surface-raised-default: var(--color-surface-raised);
+  --color-edge: var(--color-border);
+  --color-accent-primary: #8b72ff;
+  --color-accent-secondary: #c9a7ff;
+  --color-accent-tertiary: #f0b2a6;
+  --color-accent-pink: #f0d9ee;
+  --color-accent-blue: #8ea2ff;
+  --color-accent-warm: #f0b2a6;
+  --color-icon-default: var(--color-accent-primary);
+  --color-link-hover: var(--color-accent-primary);
+  --color-brand-900: #241f54;
+  --color-brand-700: #5e45b8;
+  --color-brand-400: #8b72ff;
+  --color-brand-350: #a476ff;
+  --color-brand-300: #a98aff;
+  --color-brand-200: #c9a7ff;
+  --color-brand-100: #d5b7ff;
+  --gradient-hero-overlay: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--color-black) 68%, transparent),
+    color-mix(in srgb, var(--color-black) 50%, transparent) 48%,
+    color-mix(in srgb, var(--color-black) 12%, transparent)
+  );
+  --gradient-hero-overlay-rtl: linear-gradient(
+    270deg,
+    color-mix(in srgb, var(--color-black) 68%, transparent),
+    color-mix(in srgb, var(--color-black) 50%, transparent) 48%,
+    color-mix(in srgb, var(--color-black) 12%, transparent)
+  );
+  --gradient-cta: linear-gradient(135deg, var(--color-brand-400) 0%, var(--color-brand-100) 48%, var(--color-brand-350) 100%);
+  --gradient-cta-dark: linear-gradient(135deg, var(--color-brand-900) 0%, var(--color-brand-700) 52%, #14141f 100%);
+  --gradient-cta-default: var(--gradient-cta);
+  --gradient-top-rail: linear-gradient(90deg, var(--color-brand-300) 0%, var(--color-accent-pink) 52%, var(--color-accent-blue) 100%);
+}

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

@@ -0,0 +1,69 @@
+@theme {
+  --width-logo-mobile: calc(var(--spacing) * 31);
+  --width-logo: calc(var(--spacing) * 52);
+  --width-logo-footer-mobile: calc(var(--spacing) * 37);
+  --width-logo-footer: calc(var(--spacing) * 56);
+  --logo-filter: brightness(1.18) saturate(1.14);
+  --text-button: var(--text-size-body-small);
+  --leading-button: 1;
+  --spacing-button-x: calc(var(--spacing) * 4);
+  --spacing-button-y: calc(var(--spacing) * 3);
+  --height-button-min: calc(var(--spacing) * 10);
+  --button-hover-opacity: 0.85;
+  --transition-duration-fast: 200ms;
+  --button-primary-bg: var(--color-black);
+  --button-primary-text: var(--color-white);
+  --button-primary-border: var(--color-black);
+  --button-secondary-bg: transparent;
+  --button-secondary-text: var(--color-black);
+  --button-secondary-border: var(--color-black);
+  --button-outline-bg: transparent;
+  --button-outline-text: var(--color-black);
+  --button-outline-border: var(--color-border);
+  --button-tertiary-bg: transparent;
+  --button-tertiary-text: var(--color-accent-primary);
+  --button-tertiary-border: transparent;
+  --header-bg: var(--color-chrome-surface-default);
+  --header-text: var(--color-fg-inverse);
+  --header-muted: var(--color-fg-inverse-soft);
+  --header-border: var(--color-edge-inverse);
+  --header-link-hover: var(--color-accent-secondary);
+  --header-icon: var(--color-fg-inverse-muted);
+  --mobile-nav-bg: var(--color-chrome-surface-default);
+  --mobile-nav-text: var(--color-fg-inverse);
+  --mobile-nav-muted: var(--color-fg-inverse-muted);
+  --mobile-nav-border: var(--color-edge-inverse);
+  --mobile-nav-link-hover: var(--color-accent-secondary);
+  --mobile-nav-link-size: calc(var(--spacing) * 12);
+  --mobile-nav-link-line-height: 1.05;
+  --footer-bg: var(--color-chrome-surface-default);
+  --footer-text: var(--color-fg-inverse);
+  --footer-muted: var(--color-fg-inverse-muted);
+  --footer-border: var(--color-edge-inverse);
+  --footer-link-hover: var(--color-accent-secondary);
+  --footer-grid-columns: 1fr 2fr;
+  --color-callout-icon-bg-light: color-mix(in srgb, var(--color-accent-primary) 8%, var(--color-white));
+  --color-callout-icon-bg-dark: color-mix(in srgb, var(--color-accent-primary) 18%, transparent);
+  --color-callout-icon-bg: var(--color-callout-icon-bg-light);
+  --callout-icon-color: var(--color-accent-primary);
+  --max-width-rich-text: var(--max-width-container-narrow);
+  --max-width-rich-text-wide: calc(var(--spacing) * 216);
+  --rich-text-flow-space: calc(var(--spacing) * 6);
+  --rich-text-heading-space: calc(var(--spacing) * 10);
+  --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: calc(var(--spacing) * 1.2);
+  --rich-text-inline-code-padding: 0.08em 0.32em;
+  --rich-text-quote-border: var(--color-accent-primary);
+  --rich-text-quote-bg: color-mix(in srgb, var(--color-accent-primary) 6%, var(--color-white));
+  --rich-text-quote-bg-dark: color-mix(in srgb, var(--color-accent-primary) 16%, transparent);
+  --rich-text-quote-bg-default: var(--rich-text-quote-bg);
+  --rich-text-inline-code-bg: color-mix(in srgb, var(--color-fg-base-muted) 8%, var(--color-white));
+  --rich-text-inline-code-bg-dark: color-mix(in srgb, var(--color-white) 12%, transparent);
+  --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg);
+  --rich-text-inline-code-text: var(--color-fg);
+  --max-width-cta: calc(var(--spacing) * 304);
+  --z-header: 50;
+  --z-overlay: 60;
+}

package/templates/astro/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/astro/template/src/design-system/tokens/radii.css

@@ -0,0 +1,5 @@
+@theme {
+  --radius-button: calc(var(--spacing) * 2);
+  --radius-card: calc(var(--spacing) * 3);
+  --radius-cta: calc(var(--spacing) * 2);
+}

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

@@ -0,0 +1,5 @@
+@theme {
+  --shadow-card: 0 calc(var(--spacing) * 5.5) calc(var(--spacing) * 15) color-mix(in srgb, var(--color-black) 8%, transparent);
+  --shadow-card-dark: 0 calc(var(--spacing) * 5.5) calc(var(--spacing) * 15) color-mix(in srgb, var(--color-black) 36%, transparent);
+  --shadow-card-default: var(--shadow-card);
+}

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

@@ -0,0 +1,13 @@
+@theme {
+  --max-width-container: calc(var(--spacing) * 352);
+  --max-width-container-narrow: calc(var(--spacing) * 208);
+  --spacing-container: clamp(calc(var(--spacing) * 4), 4vw, calc(var(--spacing) * 11));
+  --spacing-section-y: clamp(calc(var(--spacing) * 18), 7vw, calc(var(--spacing) * 32));
+  --height-header: calc(var(--spacing) * 20);
+  --spacing-footer-y: clamp(calc(var(--spacing) * 18), 8vw, calc(var(--spacing) * 32));
+  --height-hero-min: clamp(calc(var(--spacing) * 144), 68vw, calc(var(--spacing) * 192));
+  --width-hero-content: calc(var(--spacing) * 180);
+  --spacing-card: clamp(calc(var(--spacing) * 5.5), 2vw, calc(var(--spacing) * 8));
+  --spacing-cta-y: clamp(calc(var(--spacing) * 17), 8vw, calc(var(--spacing) * 29));
+  --spacing-cta-x: clamp(calc(var(--spacing) * 6), 5vw, calc(var(--spacing) * 20));
+}

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

@@ -0,0 +1,24 @@
+@theme {
+  --font-family-base: "Inter", "Helvetica Neue", Arial, sans-serif;
+  --font-family-heading: "Inter", "Helvetica Neue", Arial, sans-serif;
+  --font-weight-regular: 400;
+  --font-weight-medium: 560;
+  --font-weight-semibold: 650;
+  --font-weight-bold: 760;
+  --text-size-brand: 1.5rem;
+  --text-size-eyebrow: 0.8125rem;
+  --text-size-caption: 0.8125rem;
+  --text-size-body-small: 0.9375rem;
+  --text-size-body: 1.0625rem;
+  --text-size-body-large: 1.25rem;
+  --text-size-h1-mobile: 3.25rem;
+  --text-size-h1: 5rem;
+  --text-size-h2-mobile: 2.5rem;
+  --text-size-h2: 3.25rem;
+  --text-size-h3: 1.75rem;
+  --leading-tight: 0.96;
+  --leading-heading: 1.08;
+  --leading-body: 1.5;
+  --leading-relaxed: 1.68;
+  --letter-spacing-label: 0;
+}

package/templates/astro/template/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

package/templates/astro/template/src/fixtures/atomicBlocks.ts

@@ -0,0 +1,33 @@
+import type { KernelPageBlock } from '@gradial/aci/content';
+
+export interface AtomicBlockStoryFixture {
+  id: string;
+  storybookId: string;
+  title: string;
+  block: KernelPageBlock;
+}
+
+export const atomicBlockStoryFixtures: AtomicBlockStoryFixture[] = [
+  {
+    id: 'button-variants',
+    storybookId: 'core-atomic-blocks-button--variants',
+    title: 'Button / All Variants',
+    block: {
+      id: 'fixture-button-variants',
+      component: 'container',
+      props: {
+        theme: 'auto',
+        blocks: [
+          { id: 'btn-primary', component: 'button', props: { label: 'Primary button', href: '#', variant: 'primary' } },
+          { id: 'btn-secondary', component: 'button', props: { label: 'Secondary button', href: '#', variant: 'secondary' } },
+          { id: 'btn-tertiary', component: 'button', props: { label: 'Tertiary button', href: '#', variant: 'tertiary' } },
+          { id: 'btn-icon-before', component: 'button', props: { label: 'Icon before', href: '#', variant: 'primary', icon: 'arrow-right', iconPosition: 'before' } },
+          { id: 'btn-icon-after', component: 'button', props: { label: 'Icon after', href: '#', variant: 'secondary', icon: 'arrow-right', iconPosition: 'after' } },
+          { id: 'btn-new-window', component: 'button', props: { label: 'Opens in new tab', href: 'https://example.com', variant: 'primary', newWindow: true, icon: 'arrow-right', iconPosition: 'after' } }
+        ]
+      }
+    }
+  }
+];
+
+export const atomicBlockVisualStoryIds = atomicBlockStoryFixtures.map((fixture) => fixture.storybookId);

package/templates/astro/template/src/fixtures/composition.ts

@@ -0,0 +1,31 @@
+import type { KernelPageBlock } from '@gradial/aci/content';
+
+export interface CompositionStoryFixture {
+  id: string;
+  storybookId: string;
+  title: string;
+  direction?: 'ltr' | 'rtl';
+  block: KernelPageBlock;
+}
+
+export const compositionStoryFixtures: CompositionStoryFixture[] = [
+  {
+    id: 'container-buttons',
+    storybookId: 'composition-container--buttons',
+    title: 'Container / Buttons',
+    block: {
+      id: 'fixture-container-buttons',
+      component: 'container',
+      props: {
+        theme: 'auto',
+        className: 'space-y-4',
+        blocks: [
+          { id: 'btn-1', component: 'button', props: { label: 'Primary action', href: '#', variant: 'primary', icon: 'arrow_forward', iconPosition: 'after' } },
+          { id: 'btn-2', component: 'button', props: { label: 'Secondary action', href: '#', variant: 'secondary' } }
+        ]
+      }
+    }
+  }
+];
+
+export const compositionVisualStoryIds = compositionStoryFixtures.map((fixture) => fixture.storybookId);

package/templates/astro/template/src/fixtures/index.ts

@@ -0,0 +1,17 @@
+export {
+  compositionStoryFixtures,
+  compositionVisualStoryIds,
+  type CompositionStoryFixture
+} from './composition';
+
+export {
+  sectionStoryFixtures,
+  sectionVisualStoryIds,
+  type SectionStoryFixture
+} from './sections';
+
+export {
+  atomicBlockStoryFixtures,
+  atomicBlockVisualStoryIds,
+  type AtomicBlockStoryFixture
+} from './atomicBlocks';