@felloinnovations/brand-kit 0.4.0 → 0.5.1

package/dist/palettes.d.ts

@@ -0,0 +1,464 @@
+/** The palette contract (D15): the only tokens a palette sets, each with its group and one-line meaning. */
+declare const contract: readonly [{
+    readonly name: "--color-bg-page";
+    readonly group: "ground";
+    readonly meaning: "The page and every card's surface: the cream most words sit on.";
+}, {
+    readonly name: "--ws-frame-top";
+    readonly group: "ground";
+    readonly meaning: "The top of the page wash behind a glass stage, fading into the page by 640 px; in dark the frame is flat and paints it (the shell, unless a palette says).";
+}, {
+    readonly name: "--ws-stage-foot";
+    readonly group: "ground";
+    readonly meaning: "The foot of a washed stage, whose gradient starts at the page (light only).";
+}, {
+    readonly name: "--color-surface";
+    readonly group: "ground";
+    readonly meaning: "What is white: a marketing card, a well row under the pointer, a chat bubble, the glass of the stage.";
+}, {
+    readonly name: "--ws-raised";
+    readonly group: "ground";
+    readonly meaning: "What floats off the page: a menu, a popover, a tooltip, a dialog, a panel, a toast.";
+}, {
+    readonly name: "--ws-tray";
+    readonly group: "ground";
+    readonly meaning: "The rim and foot of a rimmed card, and the well behind rows.";
+}, {
+    readonly name: "--ws-edge-card";
+    readonly group: "edge";
+    readonly meaning: "A card's and an outlined control's 0.5 px edge.";
+}, {
+    readonly name: "--ws-edge";
+    readonly group: "edge";
+    readonly meaning: "A divider between rows; a quiet line.";
+}, {
+    readonly name: "--ws-edge-hover";
+    readonly group: "edge";
+    readonly meaning: "An outlined control's edge under the pointer.";
+}, {
+    readonly name: "--ws-well-hover";
+    readonly group: "edge";
+    readonly meaning: "A rimmed card's rim under the pointer.";
+}, {
+    readonly name: "--color-text-heading";
+    readonly group: "word";
+    readonly meaning: "Titles, names, figures, navy marks, and the act fill (the primary button, a thumb, a checked box).";
+}, {
+    readonly name: "--color-text-body";
+    readonly group: "word";
+    readonly meaning: "Body words: a card's line, a row.";
+}, {
+    readonly name: "--color-text-muted";
+    readonly group: "word";
+    readonly meaning: "Meta, labels, captions.";
+}, {
+    readonly name: "--color-text-interactive";
+    readonly group: "word";
+    readonly meaning: "Links and words that go somewhere, a falling number, \"working\".";
+}, {
+    readonly name: "--ws-on-act";
+    readonly group: "act";
+    readonly meaning: "Words and marks on the act fill.";
+}, {
+    readonly name: "--ws-act-hover";
+    readonly group: "act";
+    readonly meaning: "The act fill under the pointer.";
+}, {
+    readonly name: "--ws-word-needs";
+    readonly group: "accent";
+    readonly meaning: "Needs you, in words: the current page, something to fix (the accent's AA step).";
+}, {
+    readonly name: "--ws-focus-color";
+    readonly group: "focus";
+    readonly meaning: "The 2 px focus ring, outside or inset.";
+}, {
+    readonly name: "--ws-word-positive";
+    readonly group: "status";
+    readonly meaning: "Good news in words.";
+}, {
+    readonly name: "--ws-word-alert";
+    readonly group: "status";
+    readonly meaning: "Something wrong now, in words.";
+}, {
+    readonly name: "--ws-chart-finished";
+    readonly group: "chart";
+    readonly meaning: "Tone 1: done, passed, positive marks.";
+}, {
+    readonly name: "--ws-chart-past-half";
+    readonly group: "chart";
+    readonly meaning: "Tone 2: past halfway marks.";
+}, {
+    readonly name: "--ws-chart-under-half";
+    readonly group: "chart";
+    readonly meaning: "Tone 3: under halfway marks and needs-you dots.";
+}, {
+    readonly name: "--ws-chart-navy-light";
+    readonly group: "chart";
+    readonly meaning: "Tone 4: a second navy, for a series beside the heading navy.";
+}, {
+    readonly name: "--ws-chart-needs-work";
+    readonly group: "chart";
+    readonly meaning: "Tone 5: needs work marks.";
+}, {
+    readonly name: "--ws-chart-alert";
+    readonly group: "chart";
+    readonly meaning: "Tone 6: alert marks.";
+}, {
+    readonly name: "--ws-rating-strong";
+    readonly group: "rating";
+    readonly meaning: "Strong: its marks.";
+}, {
+    readonly name: "--ws-rating-middle";
+    readonly group: "rating";
+    readonly meaning: "Getting there (the middle band): its marks.";
+}, {
+    readonly name: "--ws-rating-needs-work";
+    readonly group: "rating";
+    readonly meaning: "Needs work: its marks.";
+}, {
+    readonly name: "--ws-agent-coach";
+    readonly group: "agent";
+    readonly meaning: "The coaching assistant's mark.";
+}, {
+    readonly name: "--ws-agent-growth";
+    readonly group: "agent";
+    readonly meaning: "The growth assistant's mark.";
+}, {
+    readonly name: "--ws-agent-recruit";
+    readonly group: "agent";
+    readonly meaning: "The recruiting assistant's mark.";
+}, {
+    readonly name: "--ws-agent-tally";
+    readonly group: "agent";
+    readonly meaning: "The money assistant's mark, and a softer act (a figure tab's current cell, a seat meter, a hatch).";
+}];
+type ContractToken = (typeof contract)[number]['name'];
+/** The built-in palettes, named for how they look: each contract token resolved to the literal it paints, in light,
+ *  night (data-theme="dark") and the navy ground. `default` is the kit with no attribute. In CSS the same palettes
+ *  are `data-palette="cool"` on any element; an app that injects its CSS sets these on its own container. */
+declare const palettes: {
+    readonly default: {
+        readonly light: {
+            readonly "--color-bg-page": "#fefbf9";
+            readonly "--ws-frame-top": "#ebf0f5";
+            readonly "--ws-stage-foot": "#fef9f6";
+            readonly "--color-surface": "#ffffff";
+            readonly "--ws-raised": "#fefbf9";
+            readonly "--ws-tray": "#ededed";
+            readonly "--ws-edge-card": "#d3d3d3";
+            readonly "--ws-edge": "#e8e8e8";
+            readonly "--ws-edge-hover": "#aaa49d";
+            readonly "--ws-well-hover": "#e4e2df";
+            readonly "--color-text-heading": "#093555";
+            readonly "--color-text-body": "#545454";
+            readonly "--color-text-muted": "#666666";
+            readonly "--color-text-interactive": "#495883";
+            readonly "--ws-on-act": "#ffffff";
+            readonly "--ws-act-hover": "#0f4a73";
+            readonly "--ws-word-needs": "#a84b3c";
+            readonly "--ws-focus-color": "#093555";
+            readonly "--ws-word-positive": "#09717a";
+            readonly "--ws-word-alert": "#b1042f";
+            readonly "--ws-chart-finished": "#098486";
+            readonly "--ws-chart-past-half": "#6d4fc2";
+            readonly "--ws-chart-under-half": "#ff725c";
+            readonly "--ws-chart-navy-light": "#2e6088";
+            readonly "--ws-chart-needs-work": "#f370a4";
+            readonly "--ws-chart-alert": "#b1042f";
+            readonly "--ws-rating-strong": "#098486";
+            readonly "--ws-rating-middle": "#495883";
+            readonly "--ws-rating-needs-work": "#f370a4";
+            readonly "--ws-agent-coach": "#098486";
+            readonly "--ws-agent-growth": "#6d4fc2";
+            readonly "--ws-agent-recruit": "#ff725c";
+            readonly "--ws-agent-tally": "#2c4870";
+        };
+        readonly dark: {
+            readonly "--color-bg-page": "#0f1922";
+            readonly "--ws-frame-top": "#0a1118";
+            readonly "--ws-stage-foot": "#0f1922";
+            readonly "--color-surface": "#131e28";
+            readonly "--ws-raised": "#16222d";
+            readonly "--ws-tray": "#1e2b38";
+            readonly "--ws-edge-card": "#273544";
+            readonly "--ws-edge": "#1e2a36";
+            readonly "--ws-edge-hover": "#8494a5";
+            readonly "--ws-well-hover": "#273544";
+            readonly "--color-text-heading": "#e8edf3";
+            readonly "--color-text-body": "#b0bbc7";
+            readonly "--color-text-muted": "#8494a5";
+            readonly "--color-text-interactive": "#93a6dc";
+            readonly "--ws-on-act": "#0f1922";
+            readonly "--ws-act-hover": "#d7dce2";
+            readonly "--ws-word-needs": "#ff8b78";
+            readonly "--ws-focus-color": "#e8edf3";
+            readonly "--ws-word-positive": "#4fc7be";
+            readonly "--ws-word-alert": "#ff5470";
+            readonly "--ws-chart-finished": "#23a8a3";
+            readonly "--ws-chart-past-half": "#9a84ee";
+            readonly "--ws-chart-under-half": "#ff725c";
+            readonly "--ws-chart-navy-light": "#6e9cc4";
+            readonly "--ws-chart-needs-work": "#f370a4";
+            readonly "--ws-chart-alert": "#ff5470";
+            readonly "--ws-rating-strong": "#3bb8b2";
+            readonly "--ws-rating-middle": "#93a6dc";
+            readonly "--ws-rating-needs-work": "#f370a4";
+            readonly "--ws-agent-coach": "#3bb8b2";
+            readonly "--ws-agent-growth": "#9a84ee";
+            readonly "--ws-agent-recruit": "#ff725c";
+            readonly "--ws-agent-tally": "#e8edf3";
+        };
+        readonly navy: {
+            readonly "--color-bg-page": "#021a32";
+            readonly "--ws-frame-top": "#021a32";
+            readonly "--ws-stage-foot": "#021a32";
+            readonly "--color-surface": "#0f253c";
+            readonly "--ws-raised": "#162c42";
+            readonly "--ws-tray": "#2a3f53";
+            readonly "--ws-edge-card": "rgba(255, 255, 255, 0.18)";
+            readonly "--ws-edge": "rgba(255, 255, 255, 0.1)";
+            readonly "--ws-edge-hover": "#a9a9a9";
+            readonly "--ws-well-hover": "#273544";
+            readonly "--color-text-heading": "#ffffff";
+            readonly "--color-text-body": "#d3d3d3";
+            readonly "--color-text-muted": "#a9a9a9";
+            readonly "--color-text-interactive": "#93a6dc";
+            readonly "--ws-on-act": "#021a32";
+            readonly "--ws-act-hover": "#ebedef";
+            readonly "--ws-word-needs": "#ff8b78";
+            readonly "--ws-focus-color": "#ffffff";
+            readonly "--ws-word-positive": "#4fc7be";
+            readonly "--ws-word-alert": "#ff8282";
+            readonly "--ws-chart-finished": "#23a8a3";
+            readonly "--ws-chart-past-half": "#9a84ee";
+            readonly "--ws-chart-under-half": "#ff725c";
+            readonly "--ws-chart-navy-light": "#6e9cc4";
+            readonly "--ws-chart-needs-work": "#f370a4";
+            readonly "--ws-chart-alert": "#ff5470";
+            readonly "--ws-rating-strong": "#3bb8b2";
+            readonly "--ws-rating-middle": "#93a6dc";
+            readonly "--ws-rating-needs-work": "#f370a4";
+            readonly "--ws-agent-coach": "#3bb8b2";
+            readonly "--ws-agent-growth": "#9a84ee";
+            readonly "--ws-agent-recruit": "#ff725c";
+            readonly "--ws-agent-tally": "#ffffff";
+        };
+    };
+    readonly cool: {
+        readonly light: {
+            readonly "--color-bg-page": "#fefbf9";
+            readonly "--ws-frame-top": "#ebf0f5";
+            readonly "--ws-stage-foot": "#fefbf9";
+            readonly "--color-surface": "#ffffff";
+            readonly "--ws-raised": "#fefbf9";
+            readonly "--ws-tray": "#ededed";
+            readonly "--ws-edge-card": "#d3d3d3";
+            readonly "--ws-edge": "#e2e2e2";
+            readonly "--ws-edge-hover": "#aaa49d";
+            readonly "--ws-well-hover": "#e4e2df";
+            readonly "--color-text-heading": "#093555";
+            readonly "--color-text-body": "#545454";
+            readonly "--color-text-muted": "#666666";
+            readonly "--color-text-interactive": "#093555";
+            readonly "--ws-on-act": "#ffffff";
+            readonly "--ws-act-hover": "#0f4a73";
+            readonly "--ws-word-needs": "#a84b3c";
+            readonly "--ws-focus-color": "#093555";
+            readonly "--ws-word-positive": "#09717a";
+            readonly "--ws-word-alert": "#b1042f";
+            readonly "--ws-chart-finished": "#098486";
+            readonly "--ws-chart-past-half": "#6d4fc2";
+            readonly "--ws-chart-under-half": "#ff725c";
+            readonly "--ws-chart-navy-light": "#2e6088";
+            readonly "--ws-chart-needs-work": "#f370a4";
+            readonly "--ws-chart-alert": "#b1042f";
+            readonly "--ws-rating-strong": "#098486";
+            readonly "--ws-rating-middle": "#495883";
+            readonly "--ws-rating-needs-work": "#f370a4";
+            readonly "--ws-agent-coach": "#098486";
+            readonly "--ws-agent-growth": "#6d4fc2";
+            readonly "--ws-agent-recruit": "#ff725c";
+            readonly "--ws-agent-tally": "#2c4870";
+        };
+        readonly dark: {
+            readonly "--color-bg-page": "#0f1922";
+            readonly "--ws-frame-top": "#0a1118";
+            readonly "--ws-stage-foot": "#0f1922";
+            readonly "--color-surface": "#131e28";
+            readonly "--ws-raised": "#16222d";
+            readonly "--ws-tray": "#1e2b38";
+            readonly "--ws-edge-card": "#273544";
+            readonly "--ws-edge": "#1e2a36";
+            readonly "--ws-edge-hover": "#8494a5";
+            readonly "--ws-well-hover": "#273544";
+            readonly "--color-text-heading": "#e8edf3";
+            readonly "--color-text-body": "#b0bbc7";
+            readonly "--color-text-muted": "#8494a5";
+            readonly "--color-text-interactive": "#e8edf3";
+            readonly "--ws-on-act": "#0f1922";
+            readonly "--ws-act-hover": "#d7dce2";
+            readonly "--ws-word-needs": "#ff8b78";
+            readonly "--ws-focus-color": "#e8edf3";
+            readonly "--ws-word-positive": "#4fc7be";
+            readonly "--ws-word-alert": "#ff5470";
+            readonly "--ws-chart-finished": "#23a8a3";
+            readonly "--ws-chart-past-half": "#9a84ee";
+            readonly "--ws-chart-under-half": "#ff725c";
+            readonly "--ws-chart-navy-light": "#6e9cc4";
+            readonly "--ws-chart-needs-work": "#f370a4";
+            readonly "--ws-chart-alert": "#ff5470";
+            readonly "--ws-rating-strong": "#3bb8b2";
+            readonly "--ws-rating-middle": "#e8edf3";
+            readonly "--ws-rating-needs-work": "#f370a4";
+            readonly "--ws-agent-coach": "#3bb8b2";
+            readonly "--ws-agent-growth": "#9a84ee";
+            readonly "--ws-agent-recruit": "#ff725c";
+            readonly "--ws-agent-tally": "#e8edf3";
+        };
+        readonly navy: {
+            readonly "--color-bg-page": "#021a32";
+            readonly "--ws-frame-top": "#021a32";
+            readonly "--ws-stage-foot": "#021a32";
+            readonly "--color-surface": "#0f253c";
+            readonly "--ws-raised": "#162c42";
+            readonly "--ws-tray": "#2a3f53";
+            readonly "--ws-edge-card": "rgba(255, 255, 255, 0.18)";
+            readonly "--ws-edge": "rgba(255, 255, 255, 0.1)";
+            readonly "--ws-edge-hover": "#a9a9a9";
+            readonly "--ws-well-hover": "#273544";
+            readonly "--color-text-heading": "#ffffff";
+            readonly "--color-text-body": "#d3d3d3";
+            readonly "--color-text-muted": "#a9a9a9";
+            readonly "--color-text-interactive": "#ffffff";
+            readonly "--ws-on-act": "#021a32";
+            readonly "--ws-act-hover": "#ebedef";
+            readonly "--ws-word-needs": "#ff8b78";
+            readonly "--ws-focus-color": "#ffffff";
+            readonly "--ws-word-positive": "#4fc7be";
+            readonly "--ws-word-alert": "#ff8282";
+            readonly "--ws-chart-finished": "#23a8a3";
+            readonly "--ws-chart-past-half": "#9a84ee";
+            readonly "--ws-chart-under-half": "#ff725c";
+            readonly "--ws-chart-navy-light": "#6e9cc4";
+            readonly "--ws-chart-needs-work": "#f370a4";
+            readonly "--ws-chart-alert": "#ff5470";
+            readonly "--ws-rating-strong": "#3bb8b2";
+            readonly "--ws-rating-middle": "#ffffff";
+            readonly "--ws-rating-needs-work": "#f370a4";
+            readonly "--ws-agent-coach": "#3bb8b2";
+            readonly "--ws-agent-growth": "#9a84ee";
+            readonly "--ws-agent-recruit": "#ff725c";
+            readonly "--ws-agent-tally": "#ffffff";
+        };
+    };
+    readonly warm: {
+        readonly light: {
+            readonly "--color-bg-page": "#fefbf9";
+            readonly "--ws-frame-top": "#fefbf9";
+            readonly "--ws-stage-foot": "#fef9f6";
+            readonly "--color-surface": "#ffffff";
+            readonly "--ws-raised": "#fefbf9";
+            readonly "--ws-tray": "#ededed";
+            readonly "--ws-edge-card": "#d3d3d3";
+            readonly "--ws-edge": "#e8e8e8";
+            readonly "--ws-edge-hover": "#aaa49d";
+            readonly "--ws-well-hover": "#e4e2df";
+            readonly "--color-text-heading": "#093555";
+            readonly "--color-text-body": "#545454";
+            readonly "--color-text-muted": "#666666";
+            readonly "--color-text-interactive": "#495883";
+            readonly "--ws-on-act": "#ffffff";
+            readonly "--ws-act-hover": "#0f4a73";
+            readonly "--ws-word-needs": "#a84b3c";
+            readonly "--ws-focus-color": "#093555";
+            readonly "--ws-word-positive": "#09717a";
+            readonly "--ws-word-alert": "#b1042f";
+            readonly "--ws-chart-finished": "#098486";
+            readonly "--ws-chart-past-half": "#6d4fc2";
+            readonly "--ws-chart-under-half": "#ff725c";
+            readonly "--ws-chart-navy-light": "#2e6088";
+            readonly "--ws-chart-needs-work": "#f370a4";
+            readonly "--ws-chart-alert": "#b1042f";
+            readonly "--ws-rating-strong": "#098486";
+            readonly "--ws-rating-middle": "#495883";
+            readonly "--ws-rating-needs-work": "#f370a4";
+            readonly "--ws-agent-coach": "#098486";
+            readonly "--ws-agent-growth": "#6d4fc2";
+            readonly "--ws-agent-recruit": "#ff725c";
+            readonly "--ws-agent-tally": "#2c4870";
+        };
+        readonly dark: {
+            readonly "--color-bg-page": "#0f1922";
+            readonly "--ws-frame-top": "#0a1118";
+            readonly "--ws-stage-foot": "#0f1922";
+            readonly "--color-surface": "#131e28";
+            readonly "--ws-raised": "#16222d";
+            readonly "--ws-tray": "#1e2b38";
+            readonly "--ws-edge-card": "#273544";
+            readonly "--ws-edge": "#1e2a36";
+            readonly "--ws-edge-hover": "#8494a5";
+            readonly "--ws-well-hover": "#273544";
+            readonly "--color-text-heading": "#e8edf3";
+            readonly "--color-text-body": "#b0bbc7";
+            readonly "--color-text-muted": "#8494a5";
+            readonly "--color-text-interactive": "#93a6dc";
+            readonly "--ws-on-act": "#0f1922";
+            readonly "--ws-act-hover": "#d7dce2";
+            readonly "--ws-word-needs": "#ff8b78";
+            readonly "--ws-focus-color": "#e8edf3";
+            readonly "--ws-word-positive": "#4fc7be";
+            readonly "--ws-word-alert": "#ff5470";
+            readonly "--ws-chart-finished": "#23a8a3";
+            readonly "--ws-chart-past-half": "#9a84ee";
+            readonly "--ws-chart-under-half": "#ff725c";
+            readonly "--ws-chart-navy-light": "#6e9cc4";
+            readonly "--ws-chart-needs-work": "#f370a4";
+            readonly "--ws-chart-alert": "#ff5470";
+            readonly "--ws-rating-strong": "#3bb8b2";
+            readonly "--ws-rating-middle": "#93a6dc";
+            readonly "--ws-rating-needs-work": "#f370a4";
+            readonly "--ws-agent-coach": "#3bb8b2";
+            readonly "--ws-agent-growth": "#9a84ee";
+            readonly "--ws-agent-recruit": "#ff725c";
+            readonly "--ws-agent-tally": "#e8edf3";
+        };
+        readonly navy: {
+            readonly "--color-bg-page": "#021a32";
+            readonly "--ws-frame-top": "#021a32";
+            readonly "--ws-stage-foot": "#021a32";
+            readonly "--color-surface": "#0f253c";
+            readonly "--ws-raised": "#162c42";
+            readonly "--ws-tray": "#2a3f53";
+            readonly "--ws-edge-card": "rgba(255, 255, 255, 0.18)";
+            readonly "--ws-edge": "rgba(255, 255, 255, 0.1)";
+            readonly "--ws-edge-hover": "#a9a9a9";
+            readonly "--ws-well-hover": "#273544";
+            readonly "--color-text-heading": "#ffffff";
+            readonly "--color-text-body": "#d3d3d3";
+            readonly "--color-text-muted": "#a9a9a9";
+            readonly "--color-text-interactive": "#93a6dc";
+            readonly "--ws-on-act": "#021a32";
+            readonly "--ws-act-hover": "#ebedef";
+            readonly "--ws-word-needs": "#ff8b78";
+            readonly "--ws-focus-color": "#ffffff";
+            readonly "--ws-word-positive": "#4fc7be";
+            readonly "--ws-word-alert": "#ff8282";
+            readonly "--ws-chart-finished": "#23a8a3";
+            readonly "--ws-chart-past-half": "#9a84ee";
+            readonly "--ws-chart-under-half": "#ff725c";
+            readonly "--ws-chart-navy-light": "#6e9cc4";
+            readonly "--ws-chart-needs-work": "#f370a4";
+            readonly "--ws-chart-alert": "#ff5470";
+            readonly "--ws-rating-strong": "#3bb8b2";
+            readonly "--ws-rating-middle": "#93a6dc";
+            readonly "--ws-rating-needs-work": "#f370a4";
+            readonly "--ws-agent-coach": "#3bb8b2";
+            readonly "--ws-agent-growth": "#9a84ee";
+            readonly "--ws-agent-recruit": "#ff725c";
+            readonly "--ws-agent-tally": "#ffffff";
+        };
+    };
+};
+type PaletteName = keyof typeof palettes;
+
+export { type ContractToken, type PaletteName, contract, palettes };