enya-agent 0.1.0

package/docs/themes/tanuki/sass/patterns/_sections.scss

@@ -0,0 +1,243 @@
+// =============================================================================
+// Pattern: Sections
+// Page sections, headers, and layout patterns
+// =============================================================================
+
+@use "../tokens/typography" as *;
+@use "../tokens/spacing" as *;
+
+// =============================================================================
+// Section Containers
+// =============================================================================
+
+/// Generic section
+@mixin section {
+  margin: var(--space-12) 0;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+/// Section with alternate background
+@mixin section-alt {
+  @include section;
+  padding: var(--space-12) 0;
+  background: var(--color-bg-alt);
+  margin-left: calc(-1 * var(--container-padding));
+  margin-right: calc(-1 * var(--container-padding));
+  padding-left: var(--container-padding);
+  padding-right: var(--container-padding);
+}
+
+/// Section with top border separator
+@mixin section-bordered {
+  @include section;
+  padding-top: var(--space-12);
+  border-top: 1px solid var(--color-border);
+}
+
+// =============================================================================
+// Section Headers
+// =============================================================================
+
+/// Section header with optional link
+@mixin section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-6);
+  gap: var(--space-4);
+}
+
+/// Section title
+@mixin section-title {
+  font-size: var(--text-2xl);
+  font-weight: var(--font-bold);
+  color: var(--color-heading);
+  margin: 0;
+
+  // Underline style (raskell.io-inspired)
+  @media screen and (min-width: 800px) {
+    border-bottom: 4px solid var(--color-border);
+    padding-bottom: var(--space-2);
+  }
+}
+
+/// Section link (e.g., "View all")
+@mixin section-link {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--color-text);
+  text-decoration: none;
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-bg-alt);
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+
+  &:hover {
+    background: var(--color-bg-elevated);
+    color: var(--color-heading);
+  }
+}
+
+// =============================================================================
+// Hero Sections
+// =============================================================================
+
+/// Hero section (left-aligned, blog style)
+@mixin hero {
+  margin: var(--space-12) 0;
+  padding-bottom: var(--space-10);
+
+  @media screen and (min-width: 800px) {
+    margin: var(--space-16) 0 var(--space-12);
+  }
+}
+
+/// Hero title (intro line)
+@mixin hero-title {
+  font-size: var(--text-xl);
+  font-weight: var(--font-semibold);
+  color: var(--color-heading);
+  margin: 0 0 var(--space-2);
+
+  @media screen and (min-width: 800px) {
+    font-size: var(--text-2xl);
+  }
+}
+
+/// Hero subtitle/description
+@mixin hero-subtitle {
+  font-size: var(--text-lg);
+  font-weight: var(--font-normal);
+  color: var(--color-text);
+  line-height: var(--leading-relaxed);
+  max-width: 800px;
+  margin: 0 0 var(--space-6);
+
+  @media screen and (min-width: 800px) {
+    font-size: var(--text-xl);
+  }
+}
+
+/// Hero centered (landing page style)
+@mixin hero-centered {
+  @include hero;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 50vh;
+  justify-content: center;
+  padding: var(--space-16) var(--space-4);
+}
+
+// =============================================================================
+// Page Headers
+// =============================================================================
+
+/// Article/page header
+@mixin page-header {
+  padding: var(--space-8) 0 var(--space-4);
+
+  @media screen and (min-width: 800px) {
+    padding: var(--space-12) 0 var(--space-6);
+  }
+}
+
+/// Page title (h1)
+@mixin page-title {
+  @include h1;
+  margin: 0 0 var(--space-4);
+
+  @media screen and (min-width: 800px) {
+    font-size: var(--text-4xl);
+  }
+}
+
+/// Page description
+@mixin page-description {
+  font-size: var(--text-lg);
+  color: var(--color-text-muted);
+  line-height: var(--leading-relaxed);
+  margin: 0;
+
+  @media screen and (min-width: 800px) {
+    font-size: var(--text-xl);
+  }
+}
+
+/// Page meta (date, reading time, tags)
+@mixin page-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  align-items: center;
+  margin-top: var(--space-4);
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+
+  time {
+    @include text-mono;
+  }
+}
+
+// =============================================================================
+// Content Areas
+// =============================================================================
+
+/// Prose content (articles, docs)
+@mixin prose {
+  font-size: var(--text-md);
+  line-height: var(--leading-loose);
+  color: var(--color-text);
+
+  @media screen and (min-width: 800px) {
+    font-size: var(--text-lg);
+  }
+
+  > * + * {
+    margin-top: var(--space-6);
+  }
+
+  h2, h3, h4, h5, h6 {
+    margin-top: var(--space-10);
+    margin-bottom: var(--space-4);
+  }
+
+  a {
+    @include link-underline;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+  }
+
+  blockquote {
+    margin: var(--space-8) 0;
+    padding: var(--space-4) var(--space-6);
+    background: var(--color-bg-alt);
+    border-left: 4px solid var(--color-border);
+    border-radius: 0 8px 8px 0;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  ul, ol {
+    padding-left: var(--space-6);
+  }
+
+  li + li {
+    margin-top: var(--space-2);
+  }
+}

package/docs/themes/tanuki/sass/style.scss

@@ -0,0 +1,47 @@
+// =============================================================================
+// Tanuki Theme - Main Stylesheet (タヌキ)
+// A flexible Zola theme with Catppuccin colors and design system patterns
+// =============================================================================
+
+// -----------------------------------------------------------------------------
+// Design Tokens
+// Foundation: colors, spacing, typography
+// -----------------------------------------------------------------------------
+@use "tokens/colors";
+@use "tokens/spacing";
+@use "tokens/typography";
+
+// -----------------------------------------------------------------------------
+// Base Styles
+// Reset, fonts, and base element styling
+// -----------------------------------------------------------------------------
+@import "base/fonts";
+@import "base/reset";
+@import "base/typography";
+
+// Note: base/catppuccin is now replaced by tokens/colors
+
+// -----------------------------------------------------------------------------
+// Components
+// Shared UI components used across all modes
+// -----------------------------------------------------------------------------
+@import "components/layout";
+@import "components/navigation";
+@import "components/sidebar";
+@import "components/theme-toggle";
+@import "components/buttons";
+@import "components/code";
+@import "components/search";
+@import "components/landing";
+@import "components/print";
+
+// -----------------------------------------------------------------------------
+// Mode-Specific Styles
+// Each mode uses patterns to build its unique appearance
+// -----------------------------------------------------------------------------
+@import "modes/blog";
+@import "modes/product";
+@import "modes/raskell";
+// @import "modes/docs";  // TODO: Refactor to use patterns
+// @import "modes/book";  // TODO: Refactor to use patterns
+// @import "modes/wiki";  // Future mode

package/docs/themes/tanuki/sass/tokens/_colors.scss

@@ -0,0 +1,139 @@
+// =============================================================================
+// Design Tokens: Colors
+// Catppuccin palette with semantic mappings
+// =============================================================================
+
+// -----------------------------------------------------------------------------
+// Catppuccin Mocha (Dark)
+// -----------------------------------------------------------------------------
+$ctp-mocha: (
+  "rosewater": #f5e0dc,
+  "flamingo": #f2cdcd,
+  "pink": #f5c2e7,
+  "mauve": #cba6f7,
+  "red": #f38ba8,
+  "maroon": #eba0ac,
+  "peach": #fab387,
+  "yellow": #f9e2af,
+  "green": #a6e3a1,
+  "teal": #94e2d5,
+  "sky": #89dceb,
+  "sapphire": #74c7ec,
+  "blue": #89b4fa,
+  "lavender": #b4befe,
+  "text": #cdd6f4,
+  "subtext1": #bac2de,
+  "subtext0": #a6adc8,
+  "overlay2": #9399b2,
+  "overlay1": #7f849c,
+  "overlay0": #6c7086,
+  "surface2": #585b70,
+  "surface1": #45475a,
+  "surface0": #313244,
+  "base": #1e1e2e,
+  "mantle": #181825,
+  "crust": #11111b
+);
+
+// -----------------------------------------------------------------------------
+// Catppuccin Latte (Light)
+// -----------------------------------------------------------------------------
+$ctp-latte: (
+  "rosewater": #dc8a78,
+  "flamingo": #dd7878,
+  "pink": #ea76cb,
+  "mauve": #8839ef,
+  "red": #d20f39,
+  "maroon": #e64553,
+  "peach": #fe640b,
+  "yellow": #df8e1d,
+  "green": #40a02b,
+  "teal": #179299,
+  "sky": #04a5e5,
+  "sapphire": #209fb5,
+  "blue": #1e66f5,
+  "lavender": #7287fd,
+  "text": #4c4f69,
+  "subtext1": #5c5f77,
+  "subtext0": #6c6f85,
+  "overlay2": #7c7f93,
+  "overlay1": #8c8fa1,
+  "overlay0": #9ca0b0,
+  "surface2": #acb0be,
+  "surface1": #bcc0cc,
+  "surface0": #ccd0da,
+  "base": #eff1f5,
+  "mantle": #e6e9ef,
+  "crust": #dce0e8
+);
+
+// -----------------------------------------------------------------------------
+// CSS Custom Properties (applied to :root)
+// -----------------------------------------------------------------------------
+@mixin apply-theme($palette) {
+  @each $name, $color in $palette {
+    --ctp-#{$name}: #{$color};
+  }
+}
+
+// Default (dark theme) - applied to :root, overridden by [data-theme]
+:root,
+[data-theme="dark"] {
+  @include apply-theme($ctp-mocha);
+  --color-scheme: dark;
+}
+
+// Light theme palette
+[data-theme="light"] {
+  @include apply-theme($ctp-latte);
+  --color-scheme: light;
+}
+
+// -----------------------------------------------------------------------------
+// Semantic Color Mappings
+// Use these in components, not raw Catppuccin colors
+// These use var() references so they automatically update with theme changes
+// -----------------------------------------------------------------------------
+:root {
+  // Text colors
+  --color-text: var(--ctp-text);
+  --color-text-secondary: var(--ctp-subtext1);
+  --color-text-muted: var(--ctp-subtext0);
+  --color-text-subtle: var(--ctp-overlay1);
+  --color-heading: var(--ctp-text);
+
+  // Backgrounds
+  --color-bg: var(--ctp-base);
+  --color-bg-alt: var(--ctp-mantle);
+  --color-bg-surface: var(--ctp-mantle);
+  --color-bg-elevated: var(--ctp-surface0);
+  --color-bg-overlay: var(--ctp-surface1);
+  --color-bg-hover: var(--ctp-surface1);
+
+  // Borders
+  --color-border: var(--ctp-surface0);
+  --color-border-muted: var(--ctp-surface1);
+
+  // Accents
+  --color-accent: var(--ctp-mauve);
+  --color-accent-hover: var(--ctp-pink);
+  --color-link: var(--ctp-blue);
+  --color-link-hover: var(--ctp-sapphire);
+  --color-highlight: var(--ctp-teal);
+
+  // Status colors
+  --color-success: var(--ctp-green);
+  --color-warning: var(--ctp-yellow);
+  --color-error: var(--ctp-red);
+  --color-info: var(--ctp-blue);
+}
+
+// -----------------------------------------------------------------------------
+// Light Theme Overrides (must come after :root semantic mappings)
+// -----------------------------------------------------------------------------
+[data-theme="light"] {
+  // Use subtler backgrounds in light mode
+  --color-bg-surface: var(--ctp-mantle);
+  --color-bg-elevated: var(--ctp-mantle);
+  --color-bg-overlay: var(--ctp-crust);
+}

package/docs/themes/tanuki/sass/tokens/_spacing.scss

@@ -0,0 +1,100 @@
+// =============================================================================
+// Design Tokens: Spacing
+// Consistent spacing scale for margins, padding, gaps
+// =============================================================================
+
+:root {
+  // Base spacing unit (4px)
+  --space-unit: 0.25rem;
+
+  // Spacing scale
+  --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
+
+  // Semantic spacing
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-6);
+  --space-xl: var(--space-8);
+  --space-2xl: var(--space-12);
+  --space-3xl: var(--space-16);
+
+  // Component-specific spacing
+  --space-content-y: var(--space-6);      // Vertical padding for content sections
+  --space-section-y: var(--space-12);     // Vertical padding between sections
+  --space-card-padding: var(--space-6);   // Default card padding
+  --space-input-x: var(--space-4);        // Horizontal padding for inputs
+  --space-input-y: var(--space-3);        // Vertical padding for inputs
+  --space-button-x: var(--space-6);       // Horizontal padding for buttons
+  --space-button-y: var(--space-3);       // Vertical padding for buttons
+
+  // Layout widths
+  --width-content: 830px;                 // Max width for content (blog)
+  --width-content-wide: 1200px;           // Max width for wide content (docs)
+  --width-sidebar: 280px;                 // Sidebar width
+  --width-toc: 240px;                     // Table of contents width
+
+  // Container padding
+  --container-padding: var(--space-6);
+  --container-padding-sm: var(--space-4);
+}
+
+@media screen and (min-width: 800px) {
+  :root {
+    --container-padding: var(--space-8);
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Spacing Mixins
+// -----------------------------------------------------------------------------
+
+/// Apply consistent section spacing
+@mixin section-spacing {
+  margin-top: var(--space-section-y);
+  margin-bottom: var(--space-section-y);
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+/// Container with max-width and centered
+@mixin container($width: var(--width-content)) {
+  max-width: $width;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--container-padding);
+  padding-right: var(--container-padding);
+}
+
+/// Stack children with consistent gap
+@mixin stack($gap: var(--space-4)) {
+  display: flex;
+  flex-direction: column;
+  gap: $gap;
+}
+
+/// Inline items with consistent gap
+@mixin cluster($gap: var(--space-4)) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $gap;
+  align-items: center;
+}

package/docs/themes/tanuki/sass/tokens/_typography.scss

@@ -0,0 +1,186 @@
+// =============================================================================
+// Design Tokens: Typography
+// Font families, sizes, weights, and line heights
+// =============================================================================
+
+// -----------------------------------------------------------------------------
+// Font Stacks
+// -----------------------------------------------------------------------------
+:root {
+  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
+    Consolas, "Liberation Mono", monospace;
+  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
+}
+
+// -----------------------------------------------------------------------------
+// Font Sizes (modular scale ~1.25)
+// -----------------------------------------------------------------------------
+:root {
+  --text-xs: 0.75rem;      // 12px
+  --text-sm: 0.875rem;     // 14px
+  --text-base: 1rem;       // 16px
+  --text-md: 1.0625rem;    // 17px (for body copy)
+  --text-lg: 1.125rem;     // 18px
+  --text-xl: 1.25rem;      // 20px
+  --text-2xl: 1.5rem;      // 24px
+  --text-3xl: 1.875rem;    // 30px
+  --text-4xl: 2.25rem;     // 36px
+  --text-5xl: 3rem;        // 48px
+}
+
+// -----------------------------------------------------------------------------
+// Font Weights
+// -----------------------------------------------------------------------------
+:root {
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+}
+
+// -----------------------------------------------------------------------------
+// Line Heights
+// -----------------------------------------------------------------------------
+:root {
+  --leading-none: 1;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose: 1.75;
+}
+
+// -----------------------------------------------------------------------------
+// Letter Spacing
+// -----------------------------------------------------------------------------
+:root {
+  --tracking-tighter: -0.05em;
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.025em;
+  --tracking-wider: 0.05em;
+  --tracking-widest: 0.1em;
+}
+
+// -----------------------------------------------------------------------------
+// Typography Mixins
+// -----------------------------------------------------------------------------
+
+/// Base body text
+@mixin body-text {
+  font-family: var(--font-sans);
+  font-size: var(--text-md);
+  font-weight: var(--font-normal);
+  line-height: var(--leading-loose);
+  color: var(--color-text);
+}
+
+/// Heading base styles
+@mixin heading-base {
+  font-family: var(--font-sans);
+  font-weight: var(--font-bold);
+  line-height: var(--leading-tight);
+  color: var(--color-heading);
+  letter-spacing: var(--tracking-tight);
+}
+
+/// Heading sizes
+@mixin h1 {
+  @include heading-base;
+  font-size: var(--text-4xl);
+
+  @media screen and (min-width: 800px) {
+    font-size: var(--text-5xl);
+  }
+}
+
+@mixin h2 {
+  @include heading-base;
+  font-size: var(--text-2xl);
+
+  @media screen and (min-width: 800px) {
+    font-size: var(--text-3xl);
+  }
+}
+
+@mixin h3 {
+  @include heading-base;
+  font-size: var(--text-xl);
+
+  @media screen and (min-width: 800px) {
+    font-size: var(--text-2xl);
+  }
+}
+
+@mixin h4 {
+  @include heading-base;
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+}
+
+@mixin h5 {
+  @include heading-base;
+  font-size: var(--text-base);
+  font-weight: var(--font-semibold);
+}
+
+@mixin h6 {
+  @include heading-base;
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+}
+
+/// Small/caption text
+@mixin text-small {
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+}
+
+/// Monospace/code text
+@mixin text-mono {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  font-variant-numeric: tabular-nums;
+}
+
+/// Link styles
+@mixin link {
+  color: var(--color-link);
+  text-decoration: none;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: var(--color-link-hover);
+  }
+}
+
+/// Underline link (for body text)
+@mixin link-underline {
+  color: var(--color-text);
+  text-decoration: none;
+  box-shadow: 0 -2px 0 var(--color-highlight) inset;
+  transition: box-shadow 0.2s ease;
+
+  &:hover {
+    box-shadow: 0 -1.2em 0 var(--color-highlight) inset;
+  }
+}
+
+/// Truncate text with ellipsis
+@mixin truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/// Clamp text to N lines
+@mixin line-clamp($lines: 2) {
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}