@motion-proto/live-tokens 0.78.0 → 0.80.0

package/src/editor/core/themes/migrations/2026-09-13-cornerbadge-prefix.ts

@@ -0,0 +1,70 @@
+import type { Migration } from './index';
+
+/**
+ * CornerBadge's prefix is its id (2026-09-13).
+ *
+ * CornerBadge was registered `cornerbadge` but named its forty properties
+ * `--corner-badge-*`, the one shipped component whose prefix was not its id
+ * verbatim. They read `--cornerbadge-*`. Values are unchanged, so this is a
+ * pure key rename.
+ */
+const RENAMES: Record<string, Record<string, string>> = {
+  cornerbadge: {
+    '--corner-badge-margin': '--cornerbadge-margin',
+    '--corner-badge-outer-radius': '--cornerbadge-outer-radius',
+    '--corner-badge-inner-radius': '--cornerbadge-inner-radius',
+    '--corner-badge-h-axis-radius': '--cornerbadge-h-axis-radius',
+    '--corner-badge-v-axis-radius': '--cornerbadge-v-axis-radius',
+    '--corner-badge-padding': '--cornerbadge-padding',
+    '--corner-badge-text-font-family': '--cornerbadge-text-font-family',
+    '--corner-badge-text-font-size': '--cornerbadge-text-font-size',
+    '--corner-badge-text-font-weight': '--cornerbadge-text-font-weight',
+    '--corner-badge-text-line-height': '--cornerbadge-text-line-height',
+    '--corner-badge-primary-surface': '--cornerbadge-primary-surface',
+    '--corner-badge-primary-border': '--cornerbadge-primary-border',
+    '--corner-badge-primary-text': '--cornerbadge-primary-text',
+    '--corner-badge-accent-surface': '--cornerbadge-accent-surface',
+    '--corner-badge-accent-border': '--cornerbadge-accent-border',
+    '--corner-badge-accent-text': '--cornerbadge-accent-text',
+    '--corner-badge-neutral-surface': '--cornerbadge-neutral-surface',
+    '--corner-badge-neutral-border': '--cornerbadge-neutral-border',
+    '--corner-badge-neutral-text': '--cornerbadge-neutral-text',
+    '--corner-badge-alternate-surface': '--cornerbadge-alternate-surface',
+    '--corner-badge-alternate-border': '--cornerbadge-alternate-border',
+    '--corner-badge-alternate-text': '--cornerbadge-alternate-text',
+    '--corner-badge-canvas-surface': '--cornerbadge-canvas-surface',
+    '--corner-badge-canvas-border': '--cornerbadge-canvas-border',
+    '--corner-badge-canvas-text': '--cornerbadge-canvas-text',
+    '--corner-badge-special-surface': '--cornerbadge-special-surface',
+    '--corner-badge-special-border': '--cornerbadge-special-border',
+    '--corner-badge-special-text': '--cornerbadge-special-text',
+    '--corner-badge-success-surface': '--cornerbadge-success-surface',
+    '--corner-badge-success-border': '--cornerbadge-success-border',
+    '--corner-badge-success-text': '--cornerbadge-success-text',
+    '--corner-badge-warning-surface': '--cornerbadge-warning-surface',
+    '--corner-badge-warning-border': '--cornerbadge-warning-border',
+    '--corner-badge-warning-text': '--cornerbadge-warning-text',
+    '--corner-badge-danger-surface': '--cornerbadge-danger-surface',
+    '--corner-badge-danger-border': '--cornerbadge-danger-border',
+    '--corner-badge-danger-text': '--cornerbadge-danger-text',
+    '--corner-badge-info-surface': '--cornerbadge-info-surface',
+    '--corner-badge-info-border': '--cornerbadge-info-border',
+    '--corner-badge-info-text': '--cornerbadge-info-text',
+  },
+};
+
+export const componentMigration_2026_09_13_cornerbadgePrefix: Migration = {
+  id: '2026-09-13-cornerbadge-prefix',
+  fromVersion: 31,
+  toVersion: 32,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES[meta.component] : undefined;
+    if (!renames) return { ...rawVars };
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-09-13-hairline.ts

@@ -0,0 +1,92 @@
+import type { Migration } from './index';
+
+/**
+ * One hairline (2026-09-13).
+ *
+ * The graphic line a component draws between its parts was `-divider` on
+ * Dialog, Table and TabBar, `-divider-color` on SegmentedControl, and
+ * `-hairline-color` on SectionDivider and CollapsibleSection; its width was
+ * `-divider-width` on two components and `-thickness` on four. Both now read
+ * `-hairline-color` and `-hairline-width`, and SegmentedControl's inset reads
+ * `-hairline-inset`. CollapsibleSection's `divider` variant is `hairline`, so
+ * its whole variant namespace moves with it. Values are unchanged, so this is
+ * a pure key rename.
+ */
+const COLLAPSIBLESECTION_SUFFIXES = [
+  'surface',
+  'hairline-color',
+  'padding',
+  'label',
+  'label-font-family',
+  'label-font-size',
+  'label-font-weight',
+  'label-line-height',
+  'icon',
+  'icon-size',
+];
+
+const COLLAPSIBLESECTION_STATES = ['default', 'hover'];
+
+const RENAMES: Record<string, Record<string, string>> = {
+  dialog: {
+    '--dialog-header-divider': '--dialog-header-hairline-color',
+    '--dialog-header-divider-width': '--dialog-header-hairline-width',
+    '--dialog-footer-divider': '--dialog-footer-hairline-color',
+    '--dialog-footer-divider-width': '--dialog-footer-hairline-width',
+  },
+  table: {
+    '--table-default-header-divider': '--table-default-header-hairline-color',
+    '--table-default-header-divider-width': '--table-default-header-hairline-width',
+    '--table-default-row-divider': '--table-default-row-hairline-color',
+    '--table-default-row-divider-width': '--table-default-row-hairline-width',
+    '--table-default-column-divider': '--table-default-column-hairline-color',
+    '--table-default-column-divider-width': '--table-default-column-hairline-width',
+  },
+  tabbar: {
+    '--tabbar-bar-divider': '--tabbar-bar-hairline-color',
+    '--tabbar-bar-divider-thickness': '--tabbar-bar-hairline-width',
+  },
+  segmentedcontrol: {
+    '--segmentedcontrol-divider-color': '--segmentedcontrol-hairline-color',
+    '--segmentedcontrol-divider-thickness': '--segmentedcontrol-hairline-width',
+    '--segmentedcontrol-divider-inset': '--segmentedcontrol-hairline-inset',
+    '--segmentedcontrol-small-divider-thickness': '--segmentedcontrol-small-hairline-width',
+    '--segmentedcontrol-small-divider-inset': '--segmentedcontrol-small-hairline-inset',
+  },
+  collapsiblesection: {
+    ...Object.fromEntries(
+      COLLAPSIBLESECTION_STATES.flatMap((state) => [
+        ...COLLAPSIBLESECTION_SUFFIXES.map((s) => [
+          `--collapsiblesection-divider-${state}-${s}`,
+          `--collapsiblesection-hairline-${state}-${s}`,
+        ]),
+        [
+          `--collapsiblesection-divider-${state}-hairline-thickness`,
+          `--collapsiblesection-hairline-${state}-hairline-width`,
+        ],
+      ]),
+    ),
+    '--collapsiblesection-divider-expanded-padding': '--collapsiblesection-hairline-expanded-padding',
+  },
+  sectiondivider: {
+    '--sectiondivider-lg-hairline-thickness': '--sectiondivider-lg-hairline-width',
+    '--sectiondivider-md-hairline-thickness': '--sectiondivider-md-hairline-width',
+    '--sectiondivider-sm-hairline-thickness': '--sectiondivider-sm-hairline-width',
+  },
+};
+
+export const componentMigration_2026_09_13_hairline: Migration = {
+  id: '2026-09-13-hairline',
+  fromVersion: 28,
+  toVersion: 29,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES[meta.component] : undefined;
+    if (!renames) return { ...rawVars };
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-09-13-indicator.ts

@@ -0,0 +1,54 @@
+import type { Migration } from './index';
+
+/**
+ * One indicator (2026-09-13).
+ *
+ * `accent` named three different things: the accent color family on Badge and
+ * CornerBadge, the bar beside SideNavigation's current item, and the stripe on
+ * Callout's leading edge. The bar and the stripe are indicators, the word
+ * MenuSelect and TabBar already use, so the color reads `-indicator` and the
+ * width `-indicator-width`. Values are unchanged, so this is a pure key
+ * rename.
+ */
+const SIDENAVIGATION_PARTS = ['title', 'section', 'item', 'footer'];
+const SIDENAVIGATION_STATES = ['default', 'hover', 'selected'];
+const CALLOUT_VARIANTS = ['info', 'success', 'warning', 'danger'];
+
+const RENAMES: Record<string, Record<string, string>> = {
+  sidenavigation: Object.fromEntries(
+    SIDENAVIGATION_PARTS.flatMap((part) =>
+      SIDENAVIGATION_STATES.flatMap((state) => [
+        [
+          `--sidenavigation-${part}-${state}-accent`,
+          `--sidenavigation-${part}-${state}-indicator`,
+        ],
+        [
+          `--sidenavigation-${part}-${state}-accent-width`,
+          `--sidenavigation-${part}-${state}-indicator-width`,
+        ],
+      ]),
+    ),
+  ),
+  callout: Object.fromEntries(
+    CALLOUT_VARIANTS.map((v) => [
+      `--callout-${v}-accent-width`,
+      `--callout-${v}-indicator-width`,
+    ]),
+  ),
+};
+
+export const componentMigration_2026_09_13_indicator: Migration = {
+  id: '2026-09-13-indicator',
+  fromVersion: 29,
+  toVersion: 30,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES[meta.component] : undefined;
+    if (!renames) return { ...rawVars };
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-09-13-sectiondivider-surface.ts

@@ -0,0 +1,36 @@
+import type { Migration } from './index';
+
+/**
+ * SectionDivider's fill reads surface (2026-09-13).
+ *
+ * SectionDivider said `-background` for its container fill where every other
+ * component says `-surface`. The three `--sectiondivider-{lg,md,sm}-background`
+ * properties read `-surface`. Values are unchanged, so this is a pure key
+ * rename.
+ */
+const SECTIONDIVIDER_VARIANTS = ['lg', 'md', 'sm'];
+
+const RENAMES: Record<string, Record<string, string>> = {
+  sectiondivider: Object.fromEntries(
+    SECTIONDIVIDER_VARIANTS.map((v) => [
+      `--sectiondivider-${v}-background`,
+      `--sectiondivider-${v}-surface`,
+    ]),
+  ),
+};
+
+export const componentMigration_2026_09_13_sectiondividerSurface: Migration = {
+  id: '2026-09-13-sectiondivider-surface',
+  fromVersion: 30,
+  toVersion: 31,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES[meta.component] : undefined;
+    if (!renames) return { ...rawVars };
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-09-13-selected-state.ts

@@ -0,0 +1,124 @@
+import type { Migration } from './index';
+
+/**
+ * Selection says selected (2026-09-13).
+ *
+ * `active` carried two senses: pressed, from `:active`, on Button and
+ * IconButton, and selected on RadioButton, TabBar, and SideNavigation. These
+ * three components hold a selection, so their state segment now reads
+ * `selected` and `active` survives as the pressed state only. Button's and
+ * IconButton's `--*-active-*` are pressed and never move. Values are
+ * unchanged, so this is a pure key rename.
+ */
+const RADIOBUTTON_SUFFIXES = [
+  'dot-border-color',
+  'dot-border-width',
+  'dot-fill',
+  'dot-size',
+  'label',
+  'label-font-family',
+  'label-font-size',
+  'label-font-weight',
+  'label-line-height',
+];
+
+const TABBAR_SUFFIXES = [
+  'border',
+  'icon-size',
+  'indicator-width',
+  'padding',
+  'surface',
+  'tab-border-color',
+  'tab-border-width',
+  'tab-bottom-radius',
+  'tab-top-radius',
+  'text',
+  'text-font-family',
+  'text-font-size',
+  'text-font-weight',
+  'text-line-height',
+];
+
+const SIDENAVIGATION_SUFFIXES: Record<string, string[]> = {
+  title: [
+    'accent',
+    'accent-width',
+    'border',
+    'border-width',
+    'label',
+    'label-font-family',
+    'label-font-size',
+    'label-font-weight',
+    'label-line-height',
+    'padding',
+    'surface',
+  ],
+  section: [
+    'accent',
+    'accent-width',
+    'surface',
+    'text',
+    'text-font-family',
+    'text-font-size',
+    'text-font-weight',
+    'text-line-height',
+  ],
+  item: [
+    'accent',
+    'accent-width',
+    'padding',
+    'surface',
+    'text',
+    'text-font-family',
+    'text-font-size',
+    'text-font-weight',
+    'text-line-height',
+  ],
+  footer: [
+    'accent',
+    'accent-width',
+    'gap',
+    'icon',
+    'icon-size',
+    'padding',
+    'surface',
+    'text',
+    'text-font-family',
+    'text-font-size',
+    'text-font-weight',
+    'text-line-height',
+  ],
+};
+
+const RENAMES: Record<string, Record<string, string>> = {
+  radiobutton: Object.fromEntries(
+    RADIOBUTTON_SUFFIXES.map((s) => [`--radiobutton-active-${s}`, `--radiobutton-selected-${s}`]),
+  ),
+  tabbar: Object.fromEntries(
+    TABBAR_SUFFIXES.map((s) => [`--tabbar-active-${s}`, `--tabbar-selected-${s}`]),
+  ),
+  sidenavigation: Object.fromEntries(
+    Object.entries(SIDENAVIGATION_SUFFIXES).flatMap(([part, suffixes]) =>
+      suffixes.map((s) => [
+        `--sidenavigation-${part}-active-${s}`,
+        `--sidenavigation-${part}-selected-${s}`,
+      ]),
+    ),
+  ),
+};
+
+export const componentMigration_2026_09_13_selectedState: Migration = {
+  id: '2026-09-13-selected-state',
+  fromVersion: 27,
+  toVersion: 28,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES[meta.component] : undefined;
+    if (!renames) return { ...rawVars };
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-09-13-toggle-label.ts

@@ -0,0 +1,31 @@
+import type { Migration } from './index';
+
+/**
+ * Toggle's label color drops the redundant `-text` suffix (2026-09-13).
+ *
+ * The bare part already names the color everywhere else; `-font-*` carries
+ * the type. Toggle was the one component still saying `-label-text`. Values
+ * are unchanged, so this is a pure key rename.
+ */
+const RENAMES: Record<string, Record<string, string>> = {
+  toggle: {
+    '--toggle-label-text': '--toggle-label',
+    '--toggle-disabled-label-text': '--toggle-disabled-label',
+  },
+};
+
+export const componentMigration_2026_09_13_toggleLabel: Migration = {
+  id: '2026-09-13-toggle-label',
+  fromVersion: 32,
+  toVersion: 33,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES[meta.component] : undefined;
+    if (!renames) return { ...rawVars };
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/index.ts

@@ -75,6 +75,14 @@ import { componentMigration_2026_09_01_gateSuffixEnabled } from './2026-09-01-ga
 import { componentMigration_2026_09_02_sectiondividerDropTitleOutline } from './2026-09-02-sectiondivider-drop-title-outline';
 import { colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys } from './2026-09-03-drop-legacy-component-keys';
 import { componentMigration_2026_09_07_strokeRoleRenames } from './2026-09-07-stroke-role-renames';
+import { componentMigration_2026_09_13_selectedState } from './2026-09-13-selected-state';
+import { componentMigration_2026_09_13_hairline } from './2026-09-13-hairline';
+import { componentMigration_2026_09_13_indicator } from './2026-09-13-indicator';
+import { componentMigration_2026_09_13_sectiondividerSurface } from './2026-09-13-sectiondivider-surface';
+import { componentMigration_2026_09_13_cornerbadgePrefix } from './2026-09-13-cornerbadge-prefix';
+import { componentMigration_2026_09_13_toggleLabel } from './2026-09-13-toggle-label';
+import { componentMigration_2026_09_13_collapsiblesectionOpen } from './2026-09-13-collapsiblesection-open';
+import { componentMigration_2026_09_13_badgeBrand } from './2026-09-13-badge-brand';
 
 /**
  * Registered migrations. Order in this array does not matter — the runner
@@ -116,6 +124,14 @@ export const MIGRATIONS: Migration[] = [
   componentMigration_2026_09_02_sectiondividerDropTitleOutline,
   colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys,
   componentMigration_2026_09_07_strokeRoleRenames,
+  componentMigration_2026_09_13_selectedState,
+  componentMigration_2026_09_13_hairline,
+  componentMigration_2026_09_13_indicator,
+  componentMigration_2026_09_13_sectiondividerSurface,
+  componentMigration_2026_09_13_cornerbadgePrefix,
+  componentMigration_2026_09_13_toggleLabel,
+  componentMigration_2026_09_13_collapsiblesectionOpen,
+  componentMigration_2026_09_13_badgeBrand,
 ];
 
 function countFor(kind: 'colors-and-type' | 'component-config'): number {

package/src/editor/core/themes/themeService.ts

@@ -144,8 +144,8 @@ function withoutLiveMarkers<T extends { _fileName?: string; _source?: unknown }>
 /**
  * The content as it stands: the live colors and type plus the live config of
  * every component this install has, all by value. A theme is a complete
- * document (`docs/plans/theme-completeness.md`), so the capture carries every
- * component, not just the ones off their default.
+ * document, so the capture carries every component, not just the ones off
+ * their default.
  *
  * Everything comes from the live read doors, so a capture takes the buffers
  * over the open theme's own copies. The colors and type are normalised on the
@@ -164,7 +164,7 @@ async function captureThemeContent(): Promise<Pick<Theme, 'colorsAndType' | 'com
     const config = configs[i];
     if (config) componentConfigs[c.name] = withoutLiveMarkers(config);
   });
-  // Sketchstyle has no server door of its own (RJC 8): the live buffer, not a
+  // Sketchstyle has no server door of its own: the live buffer, not a
   // fetch, is the source of truth for what the dials currently say.
   return { colorsAndType: withoutLiveMarkers(liveColorsAndType), componentConfigs, sketchSettings: liveSketchSettings() };
 }

package/src/editor/core/themes/themeTypes.ts

@@ -3,8 +3,7 @@ import type { GradientValue } from './parsers/gradient';
 import type { Oklch } from '../palettes/oklch';
 import type { HarmonyAxis } from '../palettes/colorHarmony';
 import type { SketchStyleSettings } from '../sketch/sketchStyles';
-/** Single source of truth for the theme schema version
- *  (docs/plans/theme-completeness.md, Wave 2 step 5). It lives here, on the
+/** Single source of truth for the theme schema version. It lives here, on the
  *  shipped side: `vite-plugin/` is build tooling and is not in the tarball, so
  *  anything under `src/` that reaches into it resolves in this repo and
  *  nowhere else. `normalizeTheme.ts` re-exports this. */
@@ -160,8 +159,8 @@ export type LiveSource = 'working' | 'theme';
 /**
  * Where a live colors-and-type read resolved from. Unlike `LiveSource`, this
  * keeps a third value: colors-and-type resolution is unchanged by the theme
- * completeness work (docs/plans/theme-completeness.md Wave 4), so `default`
- * still answers the one case completeness can't reach — the open theme's
+ * completeness work, so `default` still answers the one case completeness
+ * can't reach — the open theme's
  * file itself is unreadable (a stale pointer, or deleted mid-session), so
  * there is no document to resolve `working` or `theme` against.
  */
@@ -258,24 +257,23 @@ export interface Theme {
   updatedAt: string;
   /** Migration stamp. 1 was the pointer form (colors-and-type + config
    *  basenames); 2 encapsulated it under a `theme` key; 3 spells that key
-   *  `colorsAndType`; 4 makes the theme complete (`docs/plans/
-   *  theme-completeness.md`, Wave 2) — every known component and every alias
-   *  key its `default.json` declares, by value. The server rewrites older
-   *  files at boot. */
+   *  `colorsAndType`; 4 makes the theme complete — every known component and
+   *  every alias key its `default.json` declares, by value. The server
+   *  rewrites older files at boot. */
   schemaVersion: typeof THEME_SCHEMA_VERSION;
   /** Full colors-and-type content. */
   colorsAndType: ColorsAndType;
   /** Component id → its config, by value, one entry per component this
    *  install has and every alias key that component's `default.json`
    *  declares. `normalizeTheme` migrates each embedded config to the current
-   *  component schema and then fills any gap from the local default, on every
-   *  read (Waves 1 and 2 of `docs/plans/theme-completeness.md`); both the
-   *  migration and the fill are persisted on the next write, so a theme is a
-   *  whole-theme document rather than a diff against a moving baseline.
+   *  component schema and then fills any gap from the local default, on
+   *  every read; both the migration and the fill are persisted on the next
+   *  write, so a theme is a whole-theme document rather than a diff against
+   *  a moving baseline.
    *  `component-configs/<id>/default.json` is the derivation product of that
    *  component's `:global(:root)`, not a resolution layer this map defers to
    *  — a config for a component this install does not have, or an alias key
-   *  its current default no longer declares, is kept exactly as read (RJC 3)
+   *  its current default no longer declares, is kept exactly as read
    *  rather than dropped. */
   componentConfigs: Record<string, ComponentConfig>;
   /** Migration stamp for every embedded component config in this theme, one
@@ -286,7 +284,7 @@ export interface Theme {
   componentSchemaVersion: number;
   /** The sketchstyle this theme paints, by value. Absent means the theme is
    *  crisp: presence is the on state, so there is no separate flag that can
-   *  disagree with the dials beside it (RJC 1). */
+   *  disagree with the dials beside it. */
   sketchSettings?: SketchStyleSettings;
   /** Server-attached file-name marker. Same role as `ColorsAndType._fileName`. */
   _fileName?: string;
@@ -307,7 +305,7 @@ export interface ThemeBundle {
   /** Tracks the enclosed theme's schema. Import still accepts 1, where the
    *  envelope carried a pointer theme plus separately inlined colors and type
    *  and `${component}/${configName}`-keyed configs, and 3, from before the
-   *  Wave 2 completeness bump — `normalizeTheme` fills either on the way in. */
+   *  completeness bump — `normalizeTheme` fills either on the way in. */
   schemaVersion: typeof THEME_SCHEMA_VERSION;
   /** Sender's `@motion-proto/live-tokens` package version. Receiver can
    *  compare to its own to warn about compatibility drift. */

package/src/editor/docs/Docs.svelte

@@ -256,7 +256,7 @@
     <SideNavigation
       class="docs-sidebar"
       sections={navSections}
-      titleLabel="LiveTokens"
+      title="LiveTokens"
       titleHref="#01-overview"
       currentPath={parsedHash.chapter}
       open={sidebarOpen}

package/src/editor/docs/content/light-and-dark.md

@@ -20,7 +20,7 @@ selects, so a rule can key on it, and it sets `color-scheme`, so every
 ```
 
 That line is right on both sides of the theme, and it is right inside a dark
-band on a pale page, because the nearest `color-scheme` wins.
+section on a pale page, because the nearest `color-scheme` wins.
 
 ## Stating it
 
@@ -86,5 +86,5 @@ a stop function. `cssColorToHex` resolves any CSS colour — including the
 Polarity is a property of a surface, not of a component, so nothing is stamped
 for you below `<html>`: a section that needs an answer either states one or asks
 for one. And a measurement reads the paint at the moment it runs — an element
-that scrolls from a pale band onto a dark one keeps the answer it was given.
-State the tone on each band instead.
+that scrolls from a pale section onto a dark one keeps the answer it was given.
+State the tone on each section instead.