@tasker-systems/temper-design 0.0.0-stage → 0.6.2

package/contract/theme.schema.json

@@ -0,0 +1,444 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://github.com/tasker-systems/temper/packages/temper-design/contract/theme.schema.json",
+  "title": "temper theme",
+  "description": "A theme is data: values for every role in the contract. Components consume roles, never values; a theme that omits a role or invents one does not validate.",
+  "type": "object",
+  "additionalProperties": false,
+  "required": [
+    "kind",
+    "name",
+    "title",
+    "version",
+    "appearance",
+    "tokens"
+  ],
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "kind": {
+      "const": "theme"
+    },
+    "name": {
+      "type": "string",
+      "pattern": "^[a-z][a-z0-9-]*$",
+      "description": "Stable identifier; also the value of data-theme."
+    },
+    "title": {
+      "type": "string",
+      "minLength": 1
+    },
+    "version": {
+      "type": "string",
+      "pattern": "^\\d+\\.\\d+\\.\\d+$"
+    },
+    "description": {
+      "type": "string"
+    },
+    "appearance": {
+      "enum": [
+        "dark",
+        "light"
+      ],
+      "description": "Sets color-scheme; selects this theme when the system appearance matches and the person follows it."
+    },
+    "counterpart": {
+      "type": "string",
+      "pattern": "^[a-z][a-z0-9-]*$",
+      "description": "The theme of the opposite appearance that pairs with this one."
+    },
+    "provenance": {
+      "type": "string",
+      "description": "Where the values came from."
+    },
+    "tokens": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": [
+        "color",
+        "font",
+        "radius",
+        "motion",
+        "tracking"
+      ],
+      "properties": {
+        "color": {
+          "type": "object",
+          "additionalProperties": false,
+          "required": [
+            "ground",
+            "surface",
+            "surface-raised",
+            "overlay",
+            "text",
+            "text-muted",
+            "text-subtle",
+            "text-faint",
+            "rule",
+            "rule-strong",
+            "accent",
+            "accent-muted",
+            "accent-line",
+            "accent-line-soft",
+            "accent-wash",
+            "accent-hover",
+            "on-accent",
+            "focus",
+            "notice",
+            "notice-wash",
+            "success",
+            "success-wash",
+            "danger",
+            "danger-wash",
+            "pending",
+            "pending-wash",
+            "region-arriving",
+            "region-arriving-wash",
+            "region-empty",
+            "region-empty-wash",
+            "region-gave-up",
+            "region-gave-up-wash",
+            "region-failed",
+            "region-failed-wash",
+            "author-human",
+            "author-agent",
+            "cat-1",
+            "cat-2",
+            "cat-3",
+            "cat-4",
+            "cat-5",
+            "cat-6",
+            "cat-7",
+            "cat-8",
+            "cat-neutral",
+            "code-key",
+            "code-string",
+            "code-number",
+            "code-comment"
+          ],
+          "properties": {
+            "ground": {
+              "$ref": "#/$defs/color",
+              "description": "The page/window ground. Everything else is composited over it."
+            },
+            "surface": {
+              "$ref": "#/$defs/color",
+              "description": "Panels, cards, docked peeks \u2014 a lifted fill over ground."
+            },
+            "surface-raised": {
+              "$ref": "#/$defs/color",
+              "description": "Popovers, menus, the command palette \u2014 one step above surface."
+            },
+            "overlay": {
+              "$ref": "#/$defs/color",
+              "description": "Scrim behind a modal. Translucent."
+            },
+            "text": {
+              "$ref": "#/$defs/color",
+              "description": "Primary reading text. Floor: 7:1 on ground and surface."
+            },
+            "text-muted": {
+              "$ref": "#/$defs/color",
+              "description": "Secondary text \u2014 decks, body in dense chrome. Floor: 4.5:1."
+            },
+            "text-subtle": {
+              "$ref": "#/$defs/color",
+              "description": "Tertiary text \u2014 mono labels, metadata strips, counts. Floor: 4.5:1."
+            },
+            "text-faint": {
+              "$ref": "#/$defs/color",
+              "description": "Disabled and decorative only; never carries information. Floor: 2.5:1."
+            },
+            "rule": {
+              "$ref": "#/$defs/color",
+              "description": "Hairline dividers."
+            },
+            "rule-strong": {
+              "$ref": "#/$defs/color",
+              "description": "Dividers that must survive a busy surface; input outlines."
+            },
+            "accent": {
+              "$ref": "#/$defs/color",
+              "description": "The single accent: section labels, the rail, links, primary actions. Floor: 4.5:1."
+            },
+            "accent-muted": {
+              "$ref": "#/$defs/color",
+              "description": "Accent at rest where full accent would shout (secondary links, idle markers)."
+            },
+            "accent-line": {
+              "$ref": "#/$defs/color",
+              "description": "Accent borders on buttons and focused inputs."
+            },
+            "accent-line-soft": {
+              "$ref": "#/$defs/color",
+              "description": "The rail motif and soft accent borders."
+            },
+            "accent-wash": {
+              "$ref": "#/$defs/color",
+              "description": "Selected-row / active-chip fill."
+            },
+            "accent-hover": {
+              "$ref": "#/$defs/color",
+              "description": "Hover fill on accent affordances."
+            },
+            "on-accent": {
+              "$ref": "#/$defs/color",
+              "description": "Text on a solid accent fill. Floor: 4.5:1 on accent."
+            },
+            "focus": {
+              "$ref": "#/$defs/color",
+              "description": "Keyboard focus ring. Floor: 3:1 on ground."
+            },
+            "notice": {
+              "$ref": "#/$defs/color",
+              "description": "A condition that wants the reader's attention (not a failure). Floor: 4.5:1 on its wash."
+            },
+            "notice-wash": {
+              "$ref": "#/$defs/color",
+              "description": "Fill behind a notice."
+            },
+            "success": {
+              "$ref": "#/$defs/color",
+              "description": "A completed act confirmed. Floor: 4.5:1 on its wash."
+            },
+            "success-wash": {
+              "$ref": "#/$defs/color",
+              "description": "Fill behind a success note."
+            },
+            "danger": {
+              "$ref": "#/$defs/color",
+              "description": "Destructive affordances (delete, retract). Floor: 4.5:1 on its wash."
+            },
+            "danger-wash": {
+              "$ref": "#/$defs/color",
+              "description": "Fill behind a destructive confirmation."
+            },
+            "pending": {
+              "$ref": "#/$defs/color",
+              "description": "Pending state \u2014 proposals awaiting ratification, threads addressed to you. State, not alarm. Floor: 4.5:1 on its wash."
+            },
+            "pending-wash": {
+              "$ref": "#/$defs/color",
+              "description": "Fill behind pending items."
+            },
+            "region-arriving": {
+              "$ref": "#/$defs/color",
+              "description": "Region state: a read in flight. Floor: 4.5:1 on its wash."
+            },
+            "region-arriving-wash": {
+              "$ref": "#/$defs/color",
+              "description": "Fill behind an arriving region."
+            },
+            "region-empty": {
+              "$ref": "#/$defs/color",
+              "description": "Region state: the read succeeded and there is nothing. Floor: 4.5:1 on its wash."
+            },
+            "region-empty-wash": {
+              "$ref": "#/$defs/color",
+              "description": "Fill behind an empty region."
+            },
+            "region-gave-up": {
+              "$ref": "#/$defs/color",
+              "description": "Region state: the system stopped waiting. A hue nothing else uses. Floor: 4.5:1 on its wash."
+            },
+            "region-gave-up-wash": {
+              "$ref": "#/$defs/color",
+              "description": "Fill behind a gave-up region."
+            },
+            "region-failed": {
+              "$ref": "#/$defs/color",
+              "description": "Region state: the read failed. Floor: 4.5:1 on its wash."
+            },
+            "region-failed-wash": {
+              "$ref": "#/$defs/color",
+              "description": "Fill behind a failed region."
+            },
+            "author-human": {
+              "$ref": "#/$defs/color",
+              "description": "Authorship gutter mark for a person. Floor: 3:1 on ground."
+            },
+            "author-agent": {
+              "$ref": "#/$defs/color",
+              "description": "Authorship gutter mark for an agent acting on someone's behalf. Floor: 3:1 on ground."
+            },
+            "cat-1": {
+              "$ref": "#/$defs/color",
+              "description": "Categorical slot 1 of 8. Vocabularies — core's doc types and plugins' — bind their terms to slots; they never name colours. Floor: 4.5:1 on ground, 3:1 on surface."
+            },
+            "cat-2": {
+              "$ref": "#/$defs/color",
+              "description": "Categorical slot 2 of 8. Vocabularies — core's doc types and plugins' — bind their terms to slots; they never name colours. Floor: 4.5:1 on ground, 3:1 on surface."
+            },
+            "cat-3": {
+              "$ref": "#/$defs/color",
+              "description": "Categorical slot 3 of 8. Vocabularies — core's doc types and plugins' — bind their terms to slots; they never name colours. Floor: 4.5:1 on ground, 3:1 on surface."
+            },
+            "cat-4": {
+              "$ref": "#/$defs/color",
+              "description": "Categorical slot 4 of 8. Vocabularies — core's doc types and plugins' — bind their terms to slots; they never name colours. Floor: 4.5:1 on ground, 3:1 on surface."
+            },
+            "cat-5": {
+              "$ref": "#/$defs/color",
+              "description": "Categorical slot 5 of 8. Vocabularies — core's doc types and plugins' — bind their terms to slots; they never name colours. Floor: 4.5:1 on ground, 3:1 on surface."
+            },
+            "cat-6": {
+              "$ref": "#/$defs/color",
+              "description": "Categorical slot 6 of 8. Vocabularies — core's doc types and plugins' — bind their terms to slots; they never name colours. Floor: 4.5:1 on ground, 3:1 on surface."
+            },
+            "cat-7": {
+              "$ref": "#/$defs/color",
+              "description": "Categorical slot 7 of 8. Vocabularies — core's doc types and plugins' — bind their terms to slots; they never name colours. Floor: 4.5:1 on ground, 3:1 on surface."
+            },
+            "cat-8": {
+              "$ref": "#/$defs/color",
+              "description": "Categorical slot 8 of 8. Vocabularies — core's doc types and plugins' — bind their terms to slots; they never name colours. Floor: 4.5:1 on ground, 3:1 on surface."
+            },
+            "cat-neutral": {
+              "$ref": "#/$defs/color",
+              "description": "The categorical mark bound to no slot: a doc type no vocabulary binds, or a tint deliberately unnamed. Floor: 4.5:1 on ground, 3:1 on surface."
+            },
+            "code-key": {
+              "$ref": "#/$defs/color",
+              "description": "Syntax: keys, attributes, names. Floor: 4.5:1 on surface."
+            },
+            "code-string": {
+              "$ref": "#/$defs/color",
+              "description": "Syntax: strings. Floor: 4.5:1 on surface."
+            },
+            "code-number": {
+              "$ref": "#/$defs/color",
+              "description": "Syntax: numbers, literals, keywords. Floor: 4.5:1 on surface."
+            },
+            "code-comment": {
+              "$ref": "#/$defs/color",
+              "description": "Syntax: comments. Floor: 4.5:1 on surface."
+            }
+          }
+        },
+        "font": {
+          "type": "object",
+          "additionalProperties": false,
+          "required": [
+            "reading",
+            "doing",
+            "ui"
+          ],
+          "properties": {
+            "reading": {
+              "$ref": "#/$defs/fontStack",
+              "description": "Reading face \u2014 prose, headings, decks."
+            },
+            "doing": {
+              "$ref": "#/$defs/fontStack",
+              "description": "Doing face \u2014 labels, commands, code, metadata."
+            },
+            "ui": {
+              "$ref": "#/$defs/fontStack",
+              "description": "Dense UI face \u2014 grids, form controls."
+            }
+          }
+        },
+        "radius": {
+          "type": "object",
+          "additionalProperties": false,
+          "required": [
+            "chip",
+            "panel"
+          ],
+          "properties": {
+            "chip": {
+              "$ref": "#/$defs/length",
+              "description": "Chips, code blocks, inputs."
+            },
+            "panel": {
+              "$ref": "#/$defs/length",
+              "description": "Panels and cards. The editorial default is 0."
+            }
+          }
+        },
+        "motion": {
+          "type": "object",
+          "additionalProperties": false,
+          "required": [
+            "quick",
+            "settle",
+            "easing"
+          ],
+          "properties": {
+            "quick": {
+              "$ref": "#/$defs/duration",
+              "description": "Hover/colour transitions."
+            },
+            "settle": {
+              "$ref": "#/$defs/duration",
+              "description": "Panel slide-in, tier fades."
+            },
+            "easing": {
+              "type": "string",
+              "pattern": "^(ease|ease-in|ease-out|ease-in-out|linear|cubic-bezier\\([^)]*\\))$",
+              "description": "The one easing curve."
+            }
+          }
+        },
+        "tracking": {
+          "type": "object",
+          "additionalProperties": false,
+          "required": [
+            "label",
+            "strip",
+            "eyebrow",
+            "ui",
+            "mark"
+          ],
+          "properties": {
+            "label": {
+              "$ref": "#/$defs/em",
+              "description": "Section labels."
+            },
+            "strip": {
+              "$ref": "#/$defs/em",
+              "description": "Metadata strips."
+            },
+            "eyebrow": {
+              "$ref": "#/$defs/em",
+              "description": "Hero eyebrows."
+            },
+            "ui": {
+              "$ref": "#/$defs/em",
+              "description": "Buttons, nav."
+            },
+            "mark": {
+              "$ref": "#/$defs/em",
+              "description": "Wordmark."
+            }
+          }
+        }
+      }
+    }
+  },
+  "$defs": {
+    "color": {
+      "type": "string",
+      "pattern": "^(#[0-9a-fA-F]{6}|rgba\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*(0|1|0?\\.\\d+)\\s*\\))$",
+      "description": "#rrggbb or rgba(r, g, b, a). No named colours, no hsl \u2014 the contrast check reads these."
+    },
+    "fontStack": {
+      "type": "string",
+      "minLength": 1,
+      "description": "A CSS font-family list. Fonts are bundled by each surface, never fetched \u2014 a surface must be able to render offline."
+    },
+    "length": {
+      "type": "string",
+      "pattern": "^(0|\\d+(\\.\\d+)?(px|rem))$"
+    },
+    "duration": {
+      "type": "string",
+      "pattern": "^\\d+ms$"
+    },
+    "em": {
+      "type": "string",
+      "pattern": "^-?\\d*\\.?\\d+em$"
+    }
+  }
+}

package/package.json

@@ -1,6 +1,32 @@
 {
   "name": "@tasker-systems/temper-design",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.6.2",
+  "description": "temper's theme contract and themes: the roles every temper surface paints from",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tasker-systems/temper.git",
+    "directory": "packages/temper-design"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "files": [
+    "contract/*.css",
+    "contract/theme.schema.json",
+    "*/theme.css",
+    "*/theme.json",
+    "themes.json",
+    "brand/*.svg"
+  ],
+  "exports": {
+    "./themes.json": "./themes.json",
+    "./contract/*": "./contract/*",
+    "./brand/*": "./brand/*",
+    "./*/theme.css": "./*/theme.css",
+    "./*/theme.json": "./*/theme.json"
+  },
+  "scripts": {
+    "build": "node -e \"console.log('nothing to compile: every published file is generated and proved by scripts/themes.sh --self-check in CI')\""
+  }
+}

package/quiet-instrument/theme.css

@@ -0,0 +1,66 @@
+/* Generated from quiet-instrument/theme.json by themes/scripts/themes.sh build. Do not edit. */
+[data-theme="quiet-instrument"] {
+  color-scheme: dark;
+  --tp-ground: #0a0a0f;
+  --tp-surface: #0c0c11;
+  --tp-surface-raised: #12121a;
+  --tp-overlay: rgba(10, 10, 15, 0.72);
+  --tp-text: #e8e4df;
+  --tp-text-muted: rgba(255, 255, 255, 0.65);
+  --tp-text-subtle: rgba(255, 255, 255, 0.45);
+  --tp-text-faint: rgba(255, 255, 255, 0.30);
+  --tp-rule: rgba(255, 255, 255, 0.06);
+  --tp-rule-strong: rgba(255, 255, 255, 0.10);
+  --tp-accent: #7eb8da;
+  --tp-accent-muted: rgba(126, 184, 218, 0.40);
+  --tp-accent-line: rgba(126, 184, 218, 0.50);
+  --tp-accent-line-soft: rgba(126, 184, 218, 0.25);
+  --tp-accent-wash: rgba(126, 184, 218, 0.08);
+  --tp-accent-hover: rgba(126, 184, 218, 0.12);
+  --tp-on-accent: #0a0a0f;
+  --tp-focus: #8ecbff;
+  --tp-notice: #fcd34d;
+  --tp-notice-wash: rgba(245, 158, 11, 0.05);
+  --tp-success: #a7f3d0;
+  --tp-success-wash: rgba(110, 231, 183, 0.05);
+  --tp-danger: #e0755f;
+  --tp-danger-wash: rgba(224, 117, 95, 0.08);
+  --tp-pending: #a9d2ea;
+  --tp-pending-wash: rgba(126, 184, 218, 0.06);
+  --tp-region-arriving: #8fb6e8;
+  --tp-region-arriving-wash: rgba(143, 182, 232, 0.05);
+  --tp-region-empty: #79828f;
+  --tp-region-empty-wash: rgba(255, 255, 255, 0.02);
+  --tp-region-gave-up: #b9a6de;
+  --tp-region-gave-up-wash: rgba(143, 124, 192, 0.07);
+  --tp-region-failed: #e0a377;
+  --tp-region-failed-wash: rgba(192, 122, 74, 0.08);
+  --tp-author-human: #e8e4df;
+  --tp-author-agent: #8e9fc7;
+  --tp-cat-1: #de8fa5;
+  --tp-cat-2: #67d9a4;
+  --tp-cat-3: #4fc9c9;
+  --tp-cat-4: #e08ad2;
+  --tp-cat-5: #5f87e8;
+  --tp-cat-6: #d9a83f;
+  --tp-cat-7: #8f74d9;
+  --tp-cat-8: #a8c95c;
+  --tp-cat-neutral: #a89e93;
+  --tp-code-key: #8fd8a8;
+  --tp-code-string: #fcd34d;
+  --tp-code-number: #93c5fd;
+  --tp-code-comment: rgba(255, 255, 255, 0.45);
+  --tp-font-reading: "Source Serif 4 Variable", "Source Serif 4", Georgia, "Times New Roman", serif;
+  --tp-font-doing: "JetBrains Mono Variable", "JetBrains Mono", "Fira Code", ui-monospace, monospace;
+  --tp-font-ui: "Inter Variable", Inter, system-ui, -apple-system, sans-serif;
+  --tp-radius-chip: 3px;
+  --tp-radius-panel: 0;
+  --tp-motion-quick: 150ms;
+  --tp-motion-settle: 240ms;
+  --tp-motion-easing: ease;
+  --tp-tracking-label: 0.20em;
+  --tp-tracking-strip: 0.22em;
+  --tp-tracking-eyebrow: 0.28em;
+  --tp-tracking-ui: 0.05em;
+  --tp-tracking-mark: 0.15em;
+}

package/quiet-instrument/theme.json

@@ -0,0 +1,85 @@
+{
+  "$schema": "../contract/theme.schema.json",
+  "kind": "theme",
+  "name": "quiet-instrument",
+  "title": "Quiet Instrument",
+  "version": "0.1.0",
+  "description": "Obsidian ground, parchment text, one steel-blue accent. Reading in serif, doing in mono. Semantic colour is a whisper.",
+  "appearance": "dark",
+  "counterpart": "quiet-instrument-paper",
+  "provenance": "Ported from temper's design-system/ and packages/temper-ui/src/app.css (Quiet Instrument), including the region vocabulary from RegionState.svelte and the hljs palette.",
+  "tokens": {
+    "color": {
+      "ground": "#0a0a0f",
+      "surface": "#0c0c11",
+      "surface-raised": "#12121a",
+      "overlay": "rgba(10, 10, 15, 0.72)",
+      "text": "#e8e4df",
+      "text-muted": "rgba(255, 255, 255, 0.65)",
+      "text-subtle": "rgba(255, 255, 255, 0.45)",
+      "text-faint": "rgba(255, 255, 255, 0.30)",
+      "rule": "rgba(255, 255, 255, 0.06)",
+      "rule-strong": "rgba(255, 255, 255, 0.10)",
+      "accent": "#7eb8da",
+      "accent-muted": "rgba(126, 184, 218, 0.40)",
+      "accent-line": "rgba(126, 184, 218, 0.50)",
+      "accent-line-soft": "rgba(126, 184, 218, 0.25)",
+      "accent-wash": "rgba(126, 184, 218, 0.08)",
+      "accent-hover": "rgba(126, 184, 218, 0.12)",
+      "on-accent": "#0a0a0f",
+      "focus": "#8ecbff",
+      "notice": "#fcd34d",
+      "notice-wash": "rgba(245, 158, 11, 0.05)",
+      "success": "#a7f3d0",
+      "success-wash": "rgba(110, 231, 183, 0.05)",
+      "danger": "#e0755f",
+      "danger-wash": "rgba(224, 117, 95, 0.08)",
+      "pending": "#a9d2ea",
+      "pending-wash": "rgba(126, 184, 218, 0.06)",
+      "region-arriving": "#8fb6e8",
+      "region-arriving-wash": "rgba(143, 182, 232, 0.05)",
+      "region-empty": "#79828f",
+      "region-empty-wash": "rgba(255, 255, 255, 0.02)",
+      "region-gave-up": "#b9a6de",
+      "region-gave-up-wash": "rgba(143, 124, 192, 0.07)",
+      "region-failed": "#e0a377",
+      "region-failed-wash": "rgba(192, 122, 74, 0.08)",
+      "author-human": "#e8e4df",
+      "author-agent": "#8e9fc7",
+      "cat-1": "#de8fa5",
+      "cat-2": "#67d9a4",
+      "cat-3": "#4fc9c9",
+      "cat-4": "#e08ad2",
+      "cat-5": "#5f87e8",
+      "cat-6": "#d9a83f",
+      "cat-7": "#8f74d9",
+      "cat-8": "#a8c95c",
+      "cat-neutral": "#a89e93",
+      "code-key": "#8fd8a8",
+      "code-string": "#fcd34d",
+      "code-number": "#93c5fd",
+      "code-comment": "rgba(255, 255, 255, 0.45)"
+    },
+    "font": {
+      "reading": "\"Source Serif 4 Variable\", \"Source Serif 4\", Georgia, \"Times New Roman\", serif",
+      "doing": "\"JetBrains Mono Variable\", \"JetBrains Mono\", \"Fira Code\", ui-monospace, monospace",
+      "ui": "\"Inter Variable\", Inter, system-ui, -apple-system, sans-serif"
+    },
+    "radius": {
+      "chip": "3px",
+      "panel": "0"
+    },
+    "motion": {
+      "quick": "150ms",
+      "settle": "240ms",
+      "easing": "ease"
+    },
+    "tracking": {
+      "label": "0.20em",
+      "strip": "0.22em",
+      "eyebrow": "0.28em",
+      "ui": "0.05em",
+      "mark": "0.15em"
+    }
+  }
+}