themes/chalkboard.yaml

Rama main · réplica de lectura del repositorio original.

# Chalkboard — chalk on a green classroom board.
# A plate theme: the background is a matte slate-green board with a soft chalk
# texture, and the native content uses handwriting-adjacent weights. Nothing else
# in the gallery is a school board, so this is unmistakably distinct.

name: chalkboard
label: Chalkboard
summary: Chalk on a green classroom board — lessons, not slides.

tokens:
  palette:
    bg: "#2E4A3B"          # board green
    surface: "#35523F"
    ink: "#F5F1E1"         # chalk white
    ink_muted: "#C8CEB8"
    accent: "#F2C14E"      # chalk yellow
    accent_alt: "#E8684A"  # chalk red-orange
    rule: "#5A715F"
    on_accent: "#2E4A3B"

  surfaces:
    title:   { bg: "#274031", ink: "#F5F1E1", muted: "#C2CCB4", accent: "#F2C14E" }
    section: { bg: "#F2C14E", ink: "#274031", muted: "#465843" }

  dark:
    bg: "#243B2F"
    surface: "#2A4434"
    ink: "#F5F1E1"
    ink_muted: "#BCC7AE"
    accent: "#F4C95B"
    accent_alt: "#EE7550"
    rule: "#FFFFFF26"
    on_accent: "#243B2F"

  type:
    display:  { family: "Source Serif 4", weight: 600, size: 42, line: 1.12, tracking: -0.3 }
    heading:  { family: "Source Serif 4", weight: 600, size: 30, line: 1.2,  tracking: -0.2 }
    subhead:  { family: Inter,            weight: 400, size: 15, line: 1.5,  tracking: 0 }
    body:     { family: Inter,            weight: 400, size: 13, line: 1.65, tracking: 0 }
    caption:  { family: Inter,            weight: 500, size: 10, line: 1.35, tracking: 0.3 }
    eyebrow:  { family: Inter,            weight: 700, size: 10, line: 1.2,  tracking: 1.8, transform: upper }
    stat:     { family: "Source Serif 4", weight: 700, size: 54, line: 1.0,  tracking: -0.6 }

  grid:
    # A little wider than a flat theme: the content box is the inside of the
    # plate's panel, which the renderer draws past it on every side, and the
    # ground behind has to stay visible. Only a little — `flow`'s vertical
    # spine stops fitting its body above the readable floor past about 0.76in,
    # so this is the widest step that costs no theme a slide.
    margin: { top: 0.66, right: 0.74, bottom: 0.58, left: 0.74 }
    gutter: 0.30
    columns: 12
    band: { eyebrow_y: 0.62, title_y: 1.30, body_y: 2.55 }

  shape:
    radius: { card: 0.08, pill: 0.40, chip: 0.06 }
    border: { width: 1, color: "#7A8F7A" }
    card_pad: 0.30
    card_fill: { color: "#35523F", transparency: 0 }

  shadow:
    card: { type: outer, blur: 10, offset: 3, angle: 90, color: "1A2B20", opacity: 0.4 }

  # Composition — src/composition.js owns the vocabulary; every axis
  # left out here is the shared default.
  layout:
    title:
      composition: centred
    section:
      composition: centred
    heading:
      opening: none
      rule: under
    content:
      frame: inset
    list:
      marker: dash

  plate:
    enabled: true
    html: |
      <style>
        .board{position:absolute;inset:0;background:
          radial-gradient(120% 100% at 50% 0%, {{tokens.palette.surface}} 0%, {{tokens.palette.bg}} 100%);}
        .board:after{content:"";position:absolute;inset:0;
          background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/></svg>");
          opacity:0.7;}
        .panel{position:absolute;left:{{panel.x}}px;top:{{panel.y}}px;width:{{panel.w}}px;height:{{panel.h}}px;
          background:{{tokens.palette.surface}}77;border:1px solid {{tokens.palette.rule}};border-radius:10px;}
      </style>
      <div class="board"></div>
      <div class="panel"></div>
    surfaces:
      title: |
        <style>
          .board{position:absolute;inset:0;background:
            radial-gradient(120% 100% at 50% 0%, {{tokens.palette.surface}} 0%, {{tokens.surfaces.title.bg}} 100%);}
          .board:after{content:"";position:absolute;inset:0;
            background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/></svg>");
            opacity:0.7;}
        </style>
        <div class="board"></div>
      section: |
        <style>
          .sec{position:absolute;inset:0;background:
            linear-gradient(135deg, {{tokens.surfaces.section.bg}} 0%, {{tokens.palette.accent_alt}} 100%);}
          .sec:after{content:"";position:absolute;inset:0;
            background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/></svg>");
            opacity:0.6;}
        </style>
        <div class="sec"></div>

voice:
  feel: patient, teacherly, encouraging, concrete
  density: medium
  prefers:
    - an explainer's patience — walk through the steps
    - concrete examples over abstractions
    - a clear takeaway per slide
  avoid:
    - corporate jargon
    - dense multi-column walls
    - a rushed or breathless tone
  headline_style: >
    Write like a lesson title. "How a Frame Is Built" over "Ray Tracing
    Pipeline". Clear, patient, specific.
  body_style: >
    Friendly but exact. Explain the step, then the next one.