[pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

Author: pre-commit-ci[bot]

DESIGN.md

@@ -1,201 +0,0 @@
----
-version: alpha
-name: marimo
-description: Design system for marimo, a reactive Python notebook for reproducible, git-friendly, deployable work.
-colors:
-  background: "#FFFFFF"
-  background-dark: "#181C1A"
-  foreground: "#0F172A"
-  foreground-dark: "#ECEEED"
-  surface-muted: "#F1F5F9"
-  surface-muted-dark: "#020303"
-  muted-foreground: "#64748B"
-  muted-foreground-dark: "#AAB2AF"
-  popover: "#FFFFFF"
-  popover-dark: "#252927"
-  popover-foreground: "#0F172A"
-  popover-foreground-dark: "#AAB2AF"
-  card: "#FFFFFF"
-  card-dark: "#252927"
-  card-foreground: "#0F172A"
-  card-foreground-dark: "#C0C6C3"
-  border: "#E2E8F0"
-  border-dark: "#3B403E"
-  input: "#A3A3A3"
-  input-dark: "#474C4A"
-  primary: "#0880EA"
-  primary-dark: "#28879F"
-  on-primary: "#F8FAFC"
-  on-primary-dark: "#B6ECF7"
-  secondary: "#F1F5F9"
-  secondary-dark: "#ECEEED"
-  on-secondary: "#0F172A"
-  on-secondary-dark: "#252927"
-  accent: "#EDF6FF"
-  accent-dark: "#1D5B6A"
-  on-accent: "#0B68CB"
-  on-accent-dark: "#B6ECF7"
-  ring: "#94A3B8"
-  destructive: "#FF6666"
-  on-destructive: "#F8FAFC"
-  error: "#EA5D5D"
-  on-error: "#F8FAFC"
-  success: "#66FF7F"
-  on-success: "#F8FAFC"
-  action: "#FEF2A5"
-  action-hover: "#FFF8BB"
-  on-action: "#946800"
-  link: "#0B68CB"
-  link-dark: "#479BF5"
-  link-visited: "#8E4EC6"
-  link-visited-dark: "#BF9BDF"
-  stale: "#AF8931"
-  code-background: "#FFFFFF"
-  code-background-dark: "#282C34"
-  surface: "#FFFFFF"
-  surface-dark: "#252927"
-  data-grid-accent: "#7C3AED"
-typography:
-  body-md:
-    fontFamily: PT Sans
-    fontSize: 1rem
-    fontWeight: "400"
-    lineHeight: 1.75rem
-    letterSpacing: 0em
-  body-sm:
-    fontFamily: PT Sans
-    fontSize: 0.875rem
-    fontWeight: "400"
-    lineHeight: 1.25rem
-    letterSpacing: 0em
-  label-md:
-    fontFamily: PT Sans
-    fontSize: 0.875rem
-    fontWeight: "500"
-    lineHeight: "1"
-    letterSpacing: 0em
-  label-xs:
-    fontFamily: PT Sans
-    fontSize: 0.75rem
-    fontWeight: "600"
-    lineHeight: 1rem
-    letterSpacing: 0em
-  markdown-heading:
-    fontFamily: Lora
-    fontSize: 1.875rem
-    fontWeight: "600"
-    lineHeight: 2.25rem
-    letterSpacing: -0.025em
-  code-editor:
-    fontFamily: Fira Mono
-    fontSize: 14px
-    fontWeight: "400"
-    lineHeight: 1.25rem
-    letterSpacing: 0em
-  slide-h1:
-    fontFamily: PT Sans
-    fontSize: 4.375rem
-    fontWeight: "600"
-    lineHeight: "1.2"
-    letterSpacing: 0em
-rounded:
-  sm: 4px
-  DEFAULT: 8px
-  md: 6px
-  lg: 8px
-  cell: 10px
-  xl: 0.75rem
-  full: 9999px
-spacing:
-  unit: 0.5rem
-  xs: 0.25rem
-  sm: 0.5rem
-  md: 1rem
-  lg: 1.5rem
-  xl: 3rem
-  content-compact: 740px
-  content-medium: 1110px
-  content-wide: 1400px
-  grid-row-height: 20px
-  grid-columns: "24"
-components:
-  app-shell:
-    backgroundColor: "{colors.background}"
-    textColor: "{colors.foreground}"
-    typography: "{typography.body-md}"
-  cell:
-    backgroundColor: "{colors.surface}"
-    textColor: "{colors.foreground}"
-    typography: "{typography.body-md}"
-    rounded: "{rounded.cell}"
-    width: 100%
-  output-area:
-    backgroundColor: "{colors.surface}"
-    textColor: "{colors.foreground}"
-    typography: "{typography.body-md}"
-    padding: 1rem
-    width: 100%
-  code-editor:
-    backgroundColor: "{colors.code-background}"
-    textColor: "{colors.foreground}"
-    typography: "{typography.code-editor}"
-    width: 100%
-  button-primary:
-    backgroundColor: "{colors.primary}"
-    textColor: "{colors.on-primary}"
-    typography: "{typography.label-md}"
-    rounded: "{rounded.md}"
-    height: 2.25rem
-  button-action:
-    backgroundColor: "{colors.action}"
-    textColor: "{colors.on-action}"
-    typography: "{typography.label-md}"
-    rounded: "{rounded.md}"
-    height: 2.25rem
-  input:
-    backgroundColor: "{colors.background}"
-    textColor: "{colors.foreground}"
-    typography: "{typography.code-editor}"
-    rounded: "{rounded.sm}"
-    height: 1.5rem
-  data-table:
-    backgroundColor: "{colors.surface}"
-    textColor: "{colors.foreground}"
-    typography: "{typography.body-sm}"
-    width: 100%
----
-
-<!-- Generated by scripts/generate-design-md.ts. -->
-
-## Intent
-
-marimo UI should feel compact, calm, readable, and native to a reactive notebook. Prefer clear controls, quiet surfaces, precise spacing, and useful output over decorative gradients or marketing layouts.
-
-## Token Use
-
-The YAML frontmatter is generated from marimo frontend tokens and layout defaults. Component entries are intentionally small: they are canonical examples, not a reverse-engineered inventory of every UI primitive.
-
-Use related token families for variants: hover, active, dark, destructive, error, success, stale, and visited states should derive from the same color families as their base component.
-
-## Brand Assets
-
-- Logo SVG: https://raw.githubusercontent.com/marimo-team/marimo/main/docs/_static/marimo-logotype-thick.svg
-- Preserve the original aspect ratio.
-- Do not recolor unless explicitly requested.
-
-## Components
-
-Buttons should use compact heights, label typography, md radius, and the primary, secondary, or action color families. Inputs should be compact, bordered, readable, and use code typography for code-like values.
-
-Notebook cells, outputs, code editors, and data views should be full-width, overflow-safe, and visually quieter than the controls around them.
-
-## UI Guidance
-
-- Use PT Sans for UI and prose, Lora for authored markdown headings, and Fira Mono for code-like values.
-- Keep controls compact and use generated tokens for sizing, radius, and semantic colors.
-- Use borders first and subtle shadows second. Avoid floating section cards and nested cards.
-- Reserve wider layouts for grids, dashboards, slides, and apps that need comparison or scanning.
-
-## Motion
-
-Use short, functional motion for state changes, loading, focus, and drag interactions. Avoid decorative animation.