@felloinnovations/brand-kit 0.4.0 → 0.5.0

package/dist/palettes.js

@@ -0,0 +1,497 @@
+"use client";
+
+// tokens/palettes.ts
+var contract = [
+  {
+    "name": "--color-bg-page",
+    "group": "ground",
+    "meaning": "The page and every card's surface: the cream most words sit on."
+  },
+  {
+    "name": "--ws-frame-top",
+    "group": "ground",
+    "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)."
+  },
+  {
+    "name": "--ws-stage-foot",
+    "group": "ground",
+    "meaning": "The foot of a washed stage, whose gradient starts at the page (light only)."
+  },
+  {
+    "name": "--color-surface",
+    "group": "ground",
+    "meaning": "What is white: a marketing card, a well row under the pointer, a chat bubble, the glass of the stage."
+  },
+  {
+    "name": "--ws-raised",
+    "group": "ground",
+    "meaning": "What floats off the page: a menu, a popover, a tooltip, a dialog, a panel, a toast."
+  },
+  {
+    "name": "--ws-tray",
+    "group": "ground",
+    "meaning": "The rim and foot of a rimmed card, and the well behind rows."
+  },
+  {
+    "name": "--ws-edge-card",
+    "group": "edge",
+    "meaning": "A card's and an outlined control's 0.5 px edge."
+  },
+  {
+    "name": "--ws-edge",
+    "group": "edge",
+    "meaning": "A divider between rows; a quiet line."
+  },
+  {
+    "name": "--ws-edge-hover",
+    "group": "edge",
+    "meaning": "An outlined control's edge under the pointer."
+  },
+  {
+    "name": "--ws-well-hover",
+    "group": "edge",
+    "meaning": "A rimmed card's rim under the pointer."
+  },
+  {
+    "name": "--color-text-heading",
+    "group": "word",
+    "meaning": "Titles, names, figures, navy marks, and the act fill (the primary button, a thumb, a checked box)."
+  },
+  {
+    "name": "--color-text-body",
+    "group": "word",
+    "meaning": "Body words: a card's line, a row."
+  },
+  {
+    "name": "--color-text-muted",
+    "group": "word",
+    "meaning": "Meta, labels, captions."
+  },
+  {
+    "name": "--color-text-interactive",
+    "group": "word",
+    "meaning": 'Links and words that go somewhere, a falling number, "working".'
+  },
+  {
+    "name": "--ws-on-act",
+    "group": "act",
+    "meaning": "Words and marks on the act fill."
+  },
+  {
+    "name": "--ws-act-hover",
+    "group": "act",
+    "meaning": "The act fill under the pointer."
+  },
+  {
+    "name": "--ws-word-needs",
+    "group": "accent",
+    "meaning": "Needs you, in words: the current page, something to fix (the accent's AA step)."
+  },
+  {
+    "name": "--ws-focus-color",
+    "group": "focus",
+    "meaning": "The 2 px focus ring, outside or inset."
+  },
+  {
+    "name": "--ws-word-positive",
+    "group": "status",
+    "meaning": "Good news in words."
+  },
+  {
+    "name": "--ws-word-alert",
+    "group": "status",
+    "meaning": "Something wrong now, in words."
+  },
+  {
+    "name": "--ws-chart-finished",
+    "group": "chart",
+    "meaning": "Tone 1: done, passed, positive marks."
+  },
+  {
+    "name": "--ws-chart-past-half",
+    "group": "chart",
+    "meaning": "Tone 2: past halfway marks."
+  },
+  {
+    "name": "--ws-chart-under-half",
+    "group": "chart",
+    "meaning": "Tone 3: under halfway marks and needs-you dots."
+  },
+  {
+    "name": "--ws-chart-navy-light",
+    "group": "chart",
+    "meaning": "Tone 4: a second navy, for a series beside the heading navy."
+  },
+  {
+    "name": "--ws-chart-needs-work",
+    "group": "chart",
+    "meaning": "Tone 5: needs work marks."
+  },
+  {
+    "name": "--ws-chart-alert",
+    "group": "chart",
+    "meaning": "Tone 6: alert marks."
+  },
+  {
+    "name": "--ws-rating-strong",
+    "group": "rating",
+    "meaning": "Strong: its marks."
+  },
+  {
+    "name": "--ws-rating-middle",
+    "group": "rating",
+    "meaning": "Getting there (the middle band): its marks."
+  },
+  {
+    "name": "--ws-rating-needs-work",
+    "group": "rating",
+    "meaning": "Needs work: its marks."
+  },
+  {
+    "name": "--ws-agent-coach",
+    "group": "agent",
+    "meaning": "The coaching assistant's mark."
+  },
+  {
+    "name": "--ws-agent-growth",
+    "group": "agent",
+    "meaning": "The growth assistant's mark."
+  },
+  {
+    "name": "--ws-agent-recruit",
+    "group": "agent",
+    "meaning": "The recruiting assistant's mark."
+  },
+  {
+    "name": "--ws-agent-tally",
+    "group": "agent",
+    "meaning": "The money assistant's mark, and a softer act (a figure tab's current cell, a seat meter, a hatch)."
+  }
+];
+var palettes = {
+  "default": {
+    "light": {
+      "--color-bg-page": "#fefbf9",
+      "--ws-frame-top": "#ebf0f5",
+      "--ws-stage-foot": "#fef9f6",
+      "--color-surface": "#ffffff",
+      "--ws-raised": "#fefbf9",
+      "--ws-tray": "#ededed",
+      "--ws-edge-card": "#d3d3d3",
+      "--ws-edge": "#e8e8e8",
+      "--ws-edge-hover": "#aaa49d",
+      "--ws-well-hover": "#e4e2df",
+      "--color-text-heading": "#093555",
+      "--color-text-body": "#545454",
+      "--color-text-muted": "#666666",
+      "--color-text-interactive": "#495883",
+      "--ws-on-act": "#ffffff",
+      "--ws-act-hover": "#0f4a73",
+      "--ws-word-needs": "#a84b3c",
+      "--ws-focus-color": "#093555",
+      "--ws-word-positive": "#09717a",
+      "--ws-word-alert": "#b1042f",
+      "--ws-chart-finished": "#098486",
+      "--ws-chart-past-half": "#6d4fc2",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#2e6088",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#b1042f",
+      "--ws-rating-strong": "#098486",
+      "--ws-rating-middle": "#495883",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#098486",
+      "--ws-agent-growth": "#6d4fc2",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#2c4870"
+    },
+    "dark": {
+      "--color-bg-page": "#0f1922",
+      "--ws-frame-top": "#0a1118",
+      "--ws-stage-foot": "#0f1922",
+      "--color-surface": "#131e28",
+      "--ws-raised": "#16222d",
+      "--ws-tray": "#1e2b38",
+      "--ws-edge-card": "#273544",
+      "--ws-edge": "#1e2a36",
+      "--ws-edge-hover": "#8494a5",
+      "--ws-well-hover": "#273544",
+      "--color-text-heading": "#e8edf3",
+      "--color-text-body": "#b0bbc7",
+      "--color-text-muted": "#8494a5",
+      "--color-text-interactive": "#93a6dc",
+      "--ws-on-act": "#0f1922",
+      "--ws-act-hover": "#d7dce2",
+      "--ws-word-needs": "#ff8b78",
+      "--ws-focus-color": "#e8edf3",
+      "--ws-word-positive": "#4fc7be",
+      "--ws-word-alert": "#ff5470",
+      "--ws-chart-finished": "#23a8a3",
+      "--ws-chart-past-half": "#9a84ee",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#6e9cc4",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#ff5470",
+      "--ws-rating-strong": "#3bb8b2",
+      "--ws-rating-middle": "#93a6dc",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#3bb8b2",
+      "--ws-agent-growth": "#9a84ee",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#e8edf3"
+    },
+    "navy": {
+      "--color-bg-page": "#021a32",
+      "--ws-frame-top": "#021a32",
+      "--ws-stage-foot": "#021a32",
+      "--color-surface": "#0f253c",
+      "--ws-raised": "#162c42",
+      "--ws-tray": "#2a3f53",
+      "--ws-edge-card": "rgba(255, 255, 255, 0.18)",
+      "--ws-edge": "rgba(255, 255, 255, 0.1)",
+      "--ws-edge-hover": "#a9a9a9",
+      "--ws-well-hover": "#273544",
+      "--color-text-heading": "#ffffff",
+      "--color-text-body": "#d3d3d3",
+      "--color-text-muted": "#a9a9a9",
+      "--color-text-interactive": "#93a6dc",
+      "--ws-on-act": "#021a32",
+      "--ws-act-hover": "#ebedef",
+      "--ws-word-needs": "#ff8b78",
+      "--ws-focus-color": "#ffffff",
+      "--ws-word-positive": "#4fc7be",
+      "--ws-word-alert": "#ff8282",
+      "--ws-chart-finished": "#23a8a3",
+      "--ws-chart-past-half": "#9a84ee",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#6e9cc4",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#ff5470",
+      "--ws-rating-strong": "#3bb8b2",
+      "--ws-rating-middle": "#93a6dc",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#3bb8b2",
+      "--ws-agent-growth": "#9a84ee",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#ffffff"
+    }
+  },
+  "cool": {
+    "light": {
+      "--color-bg-page": "#fefbf9",
+      "--ws-frame-top": "#ebf0f5",
+      "--ws-stage-foot": "#fefbf9",
+      "--color-surface": "#ffffff",
+      "--ws-raised": "#fefbf9",
+      "--ws-tray": "#ededed",
+      "--ws-edge-card": "#d3d3d3",
+      "--ws-edge": "#e2e2e2",
+      "--ws-edge-hover": "#aaa49d",
+      "--ws-well-hover": "#e4e2df",
+      "--color-text-heading": "#093555",
+      "--color-text-body": "#545454",
+      "--color-text-muted": "#666666",
+      "--color-text-interactive": "#093555",
+      "--ws-on-act": "#ffffff",
+      "--ws-act-hover": "#0f4a73",
+      "--ws-word-needs": "#a84b3c",
+      "--ws-focus-color": "#093555",
+      "--ws-word-positive": "#09717a",
+      "--ws-word-alert": "#b1042f",
+      "--ws-chart-finished": "#098486",
+      "--ws-chart-past-half": "#6d4fc2",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#2e6088",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#b1042f",
+      "--ws-rating-strong": "#098486",
+      "--ws-rating-middle": "#495883",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#098486",
+      "--ws-agent-growth": "#6d4fc2",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#2c4870"
+    },
+    "dark": {
+      "--color-bg-page": "#0f1922",
+      "--ws-frame-top": "#0a1118",
+      "--ws-stage-foot": "#0f1922",
+      "--color-surface": "#131e28",
+      "--ws-raised": "#16222d",
+      "--ws-tray": "#1e2b38",
+      "--ws-edge-card": "#273544",
+      "--ws-edge": "#1e2a36",
+      "--ws-edge-hover": "#8494a5",
+      "--ws-well-hover": "#273544",
+      "--color-text-heading": "#e8edf3",
+      "--color-text-body": "#b0bbc7",
+      "--color-text-muted": "#8494a5",
+      "--color-text-interactive": "#e8edf3",
+      "--ws-on-act": "#0f1922",
+      "--ws-act-hover": "#d7dce2",
+      "--ws-word-needs": "#ff8b78",
+      "--ws-focus-color": "#e8edf3",
+      "--ws-word-positive": "#4fc7be",
+      "--ws-word-alert": "#ff5470",
+      "--ws-chart-finished": "#23a8a3",
+      "--ws-chart-past-half": "#9a84ee",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#6e9cc4",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#ff5470",
+      "--ws-rating-strong": "#3bb8b2",
+      "--ws-rating-middle": "#e8edf3",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#3bb8b2",
+      "--ws-agent-growth": "#9a84ee",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#e8edf3"
+    },
+    "navy": {
+      "--color-bg-page": "#021a32",
+      "--ws-frame-top": "#021a32",
+      "--ws-stage-foot": "#021a32",
+      "--color-surface": "#0f253c",
+      "--ws-raised": "#162c42",
+      "--ws-tray": "#2a3f53",
+      "--ws-edge-card": "rgba(255, 255, 255, 0.18)",
+      "--ws-edge": "rgba(255, 255, 255, 0.1)",
+      "--ws-edge-hover": "#a9a9a9",
+      "--ws-well-hover": "#273544",
+      "--color-text-heading": "#ffffff",
+      "--color-text-body": "#d3d3d3",
+      "--color-text-muted": "#a9a9a9",
+      "--color-text-interactive": "#ffffff",
+      "--ws-on-act": "#021a32",
+      "--ws-act-hover": "#ebedef",
+      "--ws-word-needs": "#ff8b78",
+      "--ws-focus-color": "#ffffff",
+      "--ws-word-positive": "#4fc7be",
+      "--ws-word-alert": "#ff8282",
+      "--ws-chart-finished": "#23a8a3",
+      "--ws-chart-past-half": "#9a84ee",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#6e9cc4",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#ff5470",
+      "--ws-rating-strong": "#3bb8b2",
+      "--ws-rating-middle": "#ffffff",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#3bb8b2",
+      "--ws-agent-growth": "#9a84ee",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#ffffff"
+    }
+  },
+  "warm": {
+    "light": {
+      "--color-bg-page": "#fefbf9",
+      "--ws-frame-top": "#fefbf9",
+      "--ws-stage-foot": "#fef9f6",
+      "--color-surface": "#ffffff",
+      "--ws-raised": "#fefbf9",
+      "--ws-tray": "#ededed",
+      "--ws-edge-card": "#d3d3d3",
+      "--ws-edge": "#e8e8e8",
+      "--ws-edge-hover": "#aaa49d",
+      "--ws-well-hover": "#e4e2df",
+      "--color-text-heading": "#093555",
+      "--color-text-body": "#545454",
+      "--color-text-muted": "#666666",
+      "--color-text-interactive": "#495883",
+      "--ws-on-act": "#ffffff",
+      "--ws-act-hover": "#0f4a73",
+      "--ws-word-needs": "#a84b3c",
+      "--ws-focus-color": "#093555",
+      "--ws-word-positive": "#09717a",
+      "--ws-word-alert": "#b1042f",
+      "--ws-chart-finished": "#098486",
+      "--ws-chart-past-half": "#6d4fc2",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#2e6088",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#b1042f",
+      "--ws-rating-strong": "#098486",
+      "--ws-rating-middle": "#495883",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#098486",
+      "--ws-agent-growth": "#6d4fc2",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#2c4870"
+    },
+    "dark": {
+      "--color-bg-page": "#0f1922",
+      "--ws-frame-top": "#0a1118",
+      "--ws-stage-foot": "#0f1922",
+      "--color-surface": "#131e28",
+      "--ws-raised": "#16222d",
+      "--ws-tray": "#1e2b38",
+      "--ws-edge-card": "#273544",
+      "--ws-edge": "#1e2a36",
+      "--ws-edge-hover": "#8494a5",
+      "--ws-well-hover": "#273544",
+      "--color-text-heading": "#e8edf3",
+      "--color-text-body": "#b0bbc7",
+      "--color-text-muted": "#8494a5",
+      "--color-text-interactive": "#93a6dc",
+      "--ws-on-act": "#0f1922",
+      "--ws-act-hover": "#d7dce2",
+      "--ws-word-needs": "#ff8b78",
+      "--ws-focus-color": "#e8edf3",
+      "--ws-word-positive": "#4fc7be",
+      "--ws-word-alert": "#ff5470",
+      "--ws-chart-finished": "#23a8a3",
+      "--ws-chart-past-half": "#9a84ee",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#6e9cc4",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#ff5470",
+      "--ws-rating-strong": "#3bb8b2",
+      "--ws-rating-middle": "#93a6dc",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#3bb8b2",
+      "--ws-agent-growth": "#9a84ee",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#e8edf3"
+    },
+    "navy": {
+      "--color-bg-page": "#021a32",
+      "--ws-frame-top": "#021a32",
+      "--ws-stage-foot": "#021a32",
+      "--color-surface": "#0f253c",
+      "--ws-raised": "#162c42",
+      "--ws-tray": "#2a3f53",
+      "--ws-edge-card": "rgba(255, 255, 255, 0.18)",
+      "--ws-edge": "rgba(255, 255, 255, 0.1)",
+      "--ws-edge-hover": "#a9a9a9",
+      "--ws-well-hover": "#273544",
+      "--color-text-heading": "#ffffff",
+      "--color-text-body": "#d3d3d3",
+      "--color-text-muted": "#a9a9a9",
+      "--color-text-interactive": "#93a6dc",
+      "--ws-on-act": "#021a32",
+      "--ws-act-hover": "#ebedef",
+      "--ws-word-needs": "#ff8b78",
+      "--ws-focus-color": "#ffffff",
+      "--ws-word-positive": "#4fc7be",
+      "--ws-word-alert": "#ff8282",
+      "--ws-chart-finished": "#23a8a3",
+      "--ws-chart-past-half": "#9a84ee",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#6e9cc4",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#ff5470",
+      "--ws-rating-strong": "#3bb8b2",
+      "--ws-rating-middle": "#93a6dc",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#3bb8b2",
+      "--ws-agent-growth": "#9a84ee",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#ffffff"
+    }
+  }
+};
+export {
+  contract,
+  palettes
+};

package/dist/scoped.d.ts

@@ -0,0 +1,3 @@
+declare const felloScopedCss: string;
+
+export { felloScopedCss as default, felloScopedCss };