@hackcove/theme-thrifty-paper 0.0.0-stage → 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jacobus Langner
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,36 @@
-# Temporary Holding Version
+# @hackcove/theme-thrifty-paper
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The Thrifty Paper light theme for Hack Cove: cream paper, ink text, clay accent. One CSS file,
+`theme.css`: under `.thrifty-paper` it remaps the Tailwind slate/colour utilities that
+`@hackcove/ui` is written against to Thrifty's light tokens. It also ships a `.link` class.
+
+Status: `0.x`, published on npm. License: MIT.
+
+## Install
+
+```sh
+bun add @hackcove/theme-thrifty-paper
+# peer: tailwindcss ^4
+```
+
+## Use
+
+In your global stylesheet, after Tailwind:
+
+```css
+@import "tailwindcss";
+@import "@hackcove/theme-thrifty-paper/theme.css";
+```
+
+Put `class="thrifty-paper"` on `<html>`. The scope paints the cream canvas and the ink text; the
+rules are unlayered, so they override Tailwind's layered utilities. The theme is light, so it
+declares no `dark` variant.
+
+## Palette
+
+From Thrifty's light theme. Thrifty has no danger colour, so the red utilities keep Tailwind's own.
+
+canvas `#fdfbf7` · surface `#ffffff` · subtle `#f7f2e9` · line `#ece3d4` · ink `#1c1917` ·
+ink-body `#3b342e` · ink-mute `#6b6259` · accent `#c2410c` · accent-hover `#9a3412` ·
+accent-soft `#fdf5f0` · positive `#047857` / `#ecfdf5` · warn `#b45309` / `#fffbeb` ·
+note `#0f766e` / `#f0fdfa`

package/package.json

@@ -1,6 +1,64 @@
 {
   "name": "@hackcove/theme-thrifty-paper",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.2",
+  "description": "The Thrifty Paper light theme for Hack Cove: one CSS file that remaps the Tailwind utilities @hackcove/ui is written against.",
+  "keywords": [
+    "design-system",
+    "hackcove",
+    "light-theme",
+    "paper",
+    "tailwind",
+    "tailwindcss",
+    "theme"
+  ],
+  "homepage": "https://github.com/madangryscientist/hackcove/tree/main/themes/thrifty-paper#readme",
+  "bugs": {
+    "url": "https://github.com/madangryscientist/hackcove/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Jacobus Langner",
+    "url": "https://github.com/madangryscientist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/madangryscientist/hackcove.git",
+    "directory": "themes/thrifty-paper"
+  },
+  "files": [
+    "theme.css"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    "./theme.css": "./theme.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint -c ../../.oxlintrc.json --type-aware --deny-warnings && bun ../../scripts/check-slop.ts",
+    "test": "vitest run",
+    "pack-check": "npm pack --dry-run"
+  },
+  "devDependencies": {
+    "@types/bun": "1.4.3",
+    "tailwindcss": "^4.3.3",
+    "vitest": "5.0.5"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^4"
+  },
+  "nx": {
+    "name": "theme-thrifty-paper",
+    "tags": [
+      "kind:theme"
+    ],
+    "targets": {
+      "pack-check": {
+        "dependsOn": []
+      }
+    }
+  }
+}

package/theme.css

@@ -0,0 +1,236 @@
+/*! Thrifty Paper palette from Thrifty's light theme (cream paper, ink text, clay accent) */
+/* ---------------------------------------------------------------------------
+   Thrifty Paper — a light theme for the Hack Cove design system.
+   ---------------------------------------------------------------------------
+   The @hackcove/ui components are written against Tailwind's slate/colour
+   utilities directly (bg-white, text-slate-900, …). This file remaps those
+   utilities to Thrifty's light tokens under `.thrifty-paper`. The rules are
+   unlayered, so they override Tailwind's (layered) utilities.
+
+   Consumers import it AFTER `@import "tailwindcss"` and put `.thrifty-paper`
+   on <html> (see the README for the import line). It is light, so it declares
+   no `dark` variant.
+
+   Palette (Thrifty's @theme block):
+     canvas #fdfbf7 · surface #ffffff · subtle #f7f2e9 · line #ece3d4
+     ink #1c1917 · ink-body #3b342e · ink-mute #6b6259
+     accent #c2410c · accent-hover #9a3412 · accent-soft #fdf5f0
+     positive #047857 / #ecfdf5 · warn #b45309 / #fffbeb · note #0f766e / #f0fdfa
+     danger #b91c1c / #fef2f2
+   Added for 3:1 control edges (not in Thrifty's block): edge #948a7c
+
+   --------------------------------------------------------------------------- */
+
+/* The scope: the page is cream canvas with ink text. */
+.thrifty-paper {
+  color-scheme: light;
+  background-color: #fdfbf7; /* canvas */
+  color: #1c1917; /* ink */
+}
+
+/* Surfaces — white cards on the cream canvas, cream insets. */
+.thrifty-paper .bg-white {
+  background-color: #ffffff; /* surface */
+}
+.thrifty-paper .bg-white\/80 {
+  background-color: rgba(255, 255, 255, 0.85);
+}
+.thrifty-paper .bg-slate-50,
+.thrifty-paper .bg-slate-50\/50,
+.thrifty-paper .bg-slate-50\/60,
+.thrifty-paper .bg-slate-50\/70 {
+  background-color: #f7f2e9; /* subtle */
+}
+.thrifty-paper .bg-slate-100 {
+  background-color: #ece3d4; /* line — one step deeper than subtle */
+}
+.thrifty-paper .bg-slate-900 {
+  background-color: #1c1917; /* ink — e.g. the brand badge */
+}
+.thrifty-paper .backdrop\:bg-slate-900\/35::backdrop {
+  background-color: rgba(28, 25, 23, 0.35); /* ink — the modal scrim */
+}
+
+/* Text */
+.thrifty-paper .text-slate-900,
+.thrifty-paper .text-slate-800 {
+  color: #1c1917; /* ink */
+}
+.thrifty-paper .text-slate-700,
+.thrifty-paper .text-slate-600 {
+  color: #3b342e; /* ink-body */
+}
+.thrifty-paper .text-slate-500,
+.thrifty-paper .text-slate-400 {
+  color: #6b6259; /* ink-mute — Thrifty's lightest text */
+}
+.thrifty-paper .text-slate-300 {
+  color: #6b6259; /* ink-mute — days outside the month: 5.97:1 on white (ink-mute/50 was 2.15:1) */
+}
+.thrifty-paper .placeholder\:text-slate-400::placeholder {
+  color: rgba(107, 98, 89, 0.7); /* ink-mute/70 */
+}
+
+/* Borders */
+.thrifty-paper .border-slate-50 {
+  border-color: #f7f2e9; /* same as bg-slate-50: the ring takes the page colour */
+}
+.thrifty-paper .border-slate-100,
+.thrifty-paper .border-slate-200,
+.thrifty-paper .border-slate-200\/70 {
+  border-color: #ece3d4; /* line */
+}
+.thrifty-paper .border-slate-300 {
+  border-color: #948a7c; /* control edge: 3.39:1 on white, 3.28:1 on canvas (line was 1.27:1) */
+}
+.thrifty-paper .border-slate-900 {
+  border-color: #1c1917; /* ink */
+}
+
+/* Money + accent text */
+.thrifty-paper .text-emerald-600 {
+  color: #047857; /* positive */
+}
+
+/* Stat-card accent bars */
+.thrifty-paper .bg-emerald-500 {
+  background-color: #047857; /* positive */
+}
+.thrifty-paper .bg-slate-300 {
+  background-color: #ece3d4; /* line */
+}
+
+/* Accent: buttons, focus, controls */
+.thrifty-paper .bg-violet-600 {
+  background-color: #c2410c; /* accent */
+}
+.thrifty-paper .hover\:bg-violet-700:hover {
+  background-color: #9a3412; /* accent-hover */
+}
+.thrifty-paper .text-violet-50 {
+  color: #ffffff; /* text on the accent button */
+}
+.thrifty-paper .hover\:text-violet-700:hover {
+  color: #9a3412; /* accent-hover */
+}
+.thrifty-paper .hover\:bg-violet-50:hover {
+  background-color: #fdf5f0; /* accent-soft */
+}
+.thrifty-paper .border-violet-600 {
+  border-color: #c2410c; /* accent */
+}
+.thrifty-paper .hover\:border-violet-400:hover {
+  border-color: #c2410c; /* accent: 5.18:1 on white, darker than the resting edge (was accent/40, 1.85:1) */
+}
+.thrifty-paper .focus-visible\:outline-violet-600:focus-visible {
+  outline-color: #c2410c; /* accent */
+}
+.thrifty-paper .accent-violet-600 {
+  accent-color: #c2410c; /* accent */
+}
+
+/* Avatar identity colours — violet-600 is the accent above; the rest sit on the theme. */
+.thrifty-paper .bg-orange-600 {
+  background-color: #8c5a2b; /* brown */
+}
+.thrifty-paper .bg-cyan-600 {
+  background-color: #0e7490; /* cyan */
+}
+.thrifty-paper .bg-emerald-600 {
+  background-color: #047857; /* positive */
+}
+.thrifty-paper .bg-sky-600 {
+  background-color: #1e6a8f; /* steel blue */
+}
+.thrifty-paper .bg-pink-600 {
+  background-color: #a8325e; /* berry */
+}
+.thrifty-paper .bg-amber-600 {
+  background-color: #7a6a1a; /* olive */
+}
+
+/* Hover states */
+.thrifty-paper .hover\:bg-slate-50:hover {
+  background-color: #f7f2e9; /* subtle */
+}
+.thrifty-paper .hover\:bg-slate-100:hover {
+  background-color: #ece3d4; /* line */
+}
+
+/* Coloured callouts / chips — the soft fills, the full-strength text. */
+.thrifty-paper .bg-emerald-50,
+.thrifty-paper .bg-emerald-50\/60,
+.thrifty-paper .bg-emerald-100 {
+  background-color: #ecfdf5; /* positive-soft */
+}
+.thrifty-paper .bg-amber-50,
+.thrifty-paper .bg-amber-50\/60,
+.thrifty-paper .bg-amber-100 {
+  background-color: #fffbeb; /* warn-soft */
+}
+.thrifty-paper .bg-blue-50 {
+  background-color: #f0fdfa; /* note-soft */
+}
+.thrifty-paper .bg-violet-50 {
+  background-color: #fdf5f0; /* accent-soft */
+}
+.thrifty-paper .bg-red-50 {
+  background-color: #fef2f2; /* danger-soft */
+}
+.thrifty-paper .text-emerald-700,
+.thrifty-paper .text-emerald-800 {
+  color: #047857; /* positive */
+}
+.thrifty-paper .text-amber-700,
+.thrifty-paper .text-amber-800,
+.thrifty-paper .text-amber-900 {
+  color: #b45309; /* warn */
+}
+.thrifty-paper .text-blue-600,
+.thrifty-paper .text-blue-700,
+.thrifty-paper .text-blue-800,
+.thrifty-paper .text-blue-900 {
+  color: #0f766e; /* note */
+}
+.thrifty-paper .text-violet-600 {
+  color: #c2410c; /* accent */
+}
+.thrifty-paper .text-violet-700 {
+  color: #9a3412; /* accent-hover */
+}
+.thrifty-paper .text-red-700,
+.thrifty-paper .text-red-800,
+.thrifty-paper .text-red-900 {
+  color: #b91c1c; /* danger */
+}
+.thrifty-paper .border-emerald-200,
+.thrifty-paper .border-emerald-300 {
+  border-color: rgba(4, 120, 87, 0.3); /* positive */
+}
+.thrifty-paper .border-amber-200,
+.thrifty-paper .border-amber-300 {
+  border-color: rgba(180, 83, 9, 0.3); /* warn */
+}
+.thrifty-paper .border-red-200 {
+  border-color: rgba(
+    185,
+    28,
+    28,
+    0.7
+  ); /* danger/70: an invalid field's edge, 3.62:1 on danger-soft (danger/30 was 1.67:1) */
+}
+.thrifty-paper .border-blue-200,
+.thrifty-paper .border-blue-300 {
+  border-color: rgba(15, 118, 110, 0.3); /* note */
+}
+
+/* Inline links — the clay accent. */
+.thrifty-paper .link {
+  color: #c2410c; /* accent */
+  font-weight: 500;
+  text-underline-offset: 2px;
+  transition: color 0.12s ease;
+}
+.thrifty-paper .link:hover {
+  color: #9a3412; /* accent-hover */
+}