@lukasmurdock/styles 0.1.0

package/src/generated/tokens.css

@@ -0,0 +1,28 @@
+@layer tokens {
+  :root {
+    --rf-color-gray-50: #f8fafc;
+    --rf-color-gray-100: #f1f5f9;
+    --rf-color-gray-300: #cbd5e1;
+    --rf-color-gray-700: #334155;
+    --rf-color-gray-900: #0f172a;
+    --rf-color-blue-500: #2563eb;
+    --rf-color-blue-600: #1d4ed8;
+    --rf-color-red-600: #dc2626;
+    --rf-surface-default: var(--rf-color-gray-50);
+    --rf-surface-inverse: var(--rf-color-gray-900);
+    --rf-text-default: var(--rf-color-gray-900);
+    --rf-text-inverse: var(--rf-color-gray-50);
+    --rf-border-default: var(--rf-color-gray-300);
+    --rf-brand-default: var(--rf-color-blue-500);
+    --rf-brand-strong: var(--rf-color-blue-600);
+    --rf-danger-default: var(--rf-color-red-600);
+  }
+
+  [data-theme="dark"] {
+    --rf-surface-default: var(--rf-color-gray-900);
+    --rf-surface-inverse: var(--rf-color-gray-50);
+    --rf-text-default: var(--rf-color-gray-50);
+    --rf-text-inverse: var(--rf-color-gray-900);
+    --rf-border-default: var(--rf-color-gray-700);
+  }
+}

package/src/index.css

@@ -0,0 +1,6 @@
+@layer tokens, primitives, patterns, components;
+
+@import "./generated/tokens.css";
+@import "./primitives.css";
+@import "./patterns.css";
+@import "./components.css";

package/src/patterns.css

@@ -0,0 +1,15 @@
+@layer patterns {
+  .rf-field {
+    display: grid;
+    gap: 0.375rem;
+  }
+
+  .rf-input-base {
+    border: 1px solid var(--rf-border-default);
+    border-radius: 0.5rem;
+    min-height: 2.5rem;
+    padding: 0 0.75rem;
+    color: var(--rf-text-default);
+    background: var(--rf-surface-default);
+  }
+}

package/src/primitives.css

@@ -0,0 +1,93 @@
+@layer primitives {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html {
+    -moz-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+  }
+
+  body,
+  h1,
+  h2,
+  h3,
+  h4,
+  p,
+  figure,
+  blockquote,
+  dl,
+  dd {
+    margin-block-end: 0;
+  }
+
+  ul[role="list"],
+  ol[role="list"] {
+    list-style: none;
+  }
+
+  body {
+    min-height: 100vh;
+    line-height: 1.5;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  button,
+  input,
+  label {
+    line-height: 1.1;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    text-wrap: balance;
+  }
+
+  a:not([class]) {
+    text-decoration-skip-ink: auto;
+    color: currentcolor;
+  }
+
+  img,
+  picture {
+    max-width: 100%;
+    display: block;
+  }
+
+  input,
+  button,
+  textarea,
+  select {
+    font-family: inherit;
+    font-size: inherit;
+  }
+
+  textarea:not([rows]) {
+    min-height: 10em;
+  }
+
+  :target {
+    scroll-margin-block: 5ex;
+  }
+
+  .rf-reset-button {
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .rf-focus-ring:focus-visible {
+    outline: 2px solid var(--rf-brand-default);
+    outline-offset: 2px;
+  }
+}

package/src/scripts/build-tokens.mjs

@@ -0,0 +1,61 @@
+import { readFile, writeFile } from "node:fs/promises"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const root = path.resolve(__dirname, "..")
+const tokensPath = path.join(root, "tokens", "tokens.json")
+const outPath = path.join(root, "generated", "tokens.css")
+
+const json = JSON.parse(await readFile(tokensPath, "utf8"))
+
+function flatten(obj, parent = []) {
+  const out = {}
+  for (const [key, value] of Object.entries(obj)) {
+    const next = [...parent, key]
+    if (typeof value === "string") {
+      out[next.join(".")] = value
+      continue
+    }
+    Object.assign(out, flatten(value, next))
+  }
+  return out
+}
+
+const primitives = flatten(json.color)
+const semantic = flatten(json.semantic)
+
+function toVarName(name) {
+  return `--rf-${name.replaceAll(".", "-")}`
+}
+
+function resolveSemantic(value) {
+  const match = /^\{(.+)\}$/.exec(value)
+  if (!match) return value
+  return `var(${toVarName(match[1])})`
+}
+
+const lines = []
+lines.push("@layer tokens {")
+lines.push("  :root {")
+
+for (const [name, value] of Object.entries(primitives)) {
+  lines.push(`    ${toVarName(`color.${name}`)}: ${value};`)
+}
+
+for (const [name, value] of Object.entries(semantic)) {
+  lines.push(`    ${toVarName(name)}: ${resolveSemantic(value)};`)
+}
+
+lines.push("  }")
+lines.push("")
+lines.push('  [data-theme="dark"] {')
+lines.push("    --rf-surface-default: var(--rf-color-gray-900);")
+lines.push("    --rf-surface-inverse: var(--rf-color-gray-50);")
+lines.push("    --rf-text-default: var(--rf-color-gray-50);")
+lines.push("    --rf-text-inverse: var(--rf-color-gray-900);")
+lines.push("    --rf-border-default: var(--rf-color-gray-700);")
+lines.push("  }")
+lines.push("}")
+
+await writeFile(outPath, `${lines.join("\n")}\n`)

package/src/scripts/check-css-order.mjs

@@ -0,0 +1,27 @@
+import { readFile } from "node:fs/promises"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const indexPath = path.resolve(__dirname, "..", "index.css")
+const css = await readFile(indexPath, "utf8")
+
+const expected = [
+  '@import "./generated/tokens.css";',
+  '@import "./primitives.css";',
+  '@import "./patterns.css";',
+  '@import "./components.css";',
+]
+
+const indexes = expected.map((line) => css.indexOf(line))
+if (indexes.some((n) => n === -1)) {
+  throw new Error("CSS import contract is incomplete")
+}
+
+for (let i = 1; i < indexes.length; i++) {
+  if (indexes[i] < indexes[i - 1]) {
+    throw new Error("CSS import contract is out of order")
+  }
+}
+
+console.log("CSS import order contract is valid")

package/src/tokens/tokens.json

@@ -0,0 +1,38 @@
+{
+  "color": {
+    "gray": {
+      "50": "#f8fafc",
+      "100": "#f1f5f9",
+      "300": "#cbd5e1",
+      "700": "#334155",
+      "900": "#0f172a"
+    },
+    "blue": {
+      "500": "#2563eb",
+      "600": "#1d4ed8"
+    },
+    "red": {
+      "600": "#dc2626"
+    }
+  },
+  "semantic": {
+    "surface": {
+      "default": "{color.gray.50}",
+      "inverse": "{color.gray.900}"
+    },
+    "text": {
+      "default": "{color.gray.900}",
+      "inverse": "{color.gray.50}"
+    },
+    "border": {
+      "default": "{color.gray.300}"
+    },
+    "brand": {
+      "default": "{color.blue.500}",
+      "strong": "{color.blue.600}"
+    },
+    "danger": {
+      "default": "{color.red.600}"
+    }
+  }
+}