@hackcove/theme-catppuccin-mocha 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,49 @@
+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.
+
+
+---
+
+The Catppuccin Mocha palette used by theme.css is from Catppuccin
+(https://github.com/catppuccin/catppuccin) and is reproduced under its MIT license:
+
+MIT License
+
+Copyright (c) 2021 Catppuccin
+
+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/NOTICE

@@ -0,0 +1,25 @@
+The Catppuccin Mocha palette used by theme.css is from Catppuccin
+(https://github.com/catppuccin/catppuccin) and is reproduced under its MIT license:
+
+MIT License
+
+Copyright (c) 2021 Catppuccin
+
+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,34 @@
-# Temporary Holding Version
+# @hackcove/theme-catppuccin-mocha
 
-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 Catppuccin Mocha dark theme for Hack Cove. One CSS file, `theme.css`: it declares the
+class-based `dark` variant and, under `.dark`, remaps the Tailwind slate/colour utilities that
+`@hackcove/ui` is written against to real Mocha tokens. It also ships a `.link` class.
+
+Status: `0.x`, published to npm. License: MIT.
+
+## Install
+
+```sh
+bun add @hackcove/theme-catppuccin-mocha
+# peer: tailwindcss ^4
+```
+
+## Use
+
+In your global stylesheet, after Tailwind:
+
+```css
+@import "tailwindcss";
+@import "@hackcove/theme-catppuccin-mocha/theme.css";
+```
+
+Put `class="dark"` on `<html>`. The rules are unlayered, so they override Tailwind's layered
+utilities.
+
+## Palette and attribution
+
+The palette is [Catppuccin](https://github.com/catppuccin/catppuccin) Mocha, © 2021 Catppuccin, used under the MIT license. The full notice ships in this package as `NOTICE`, and a one-line credit sits at the top of `theme.css`. Tailwind's build drops that comment from a consumer's bundled CSS, so an app that wants the credit visible should add its own. This package's own license (MIT, see `LICENSE`) is separate.
+
+base `#1e1e2e` · mantle `#181825` · crust `#11111b` · surface0 `#313244` · surface1 `#45475a` ·
+surface2 `#585b70` · text `#cdd6f4` · subtext1 `#bac2de` · subtext0 `#a6adc8` · overlay1 `#7f849c` ·
+green `#a6e3a1` · red `#f38ba8` · yellow `#f9e2af` · blue `#89b4fa` · mauve `#cba6f7`

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "@hackcove/theme-catppuccin-mocha",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "The Catppuccin Mocha dark theme for Hack Cove: one CSS file that remaps the Tailwind utilities @hackcove/ui is written against.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/madangryscientist/hackcove.git",
+    "directory": "themes/catppuccin-mocha"
+  },
+  "files": [
+    "theme.css",
+    "NOTICE"
+  ],
+  "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-catppuccin-mocha",
+    "tags": [
+      "kind:theme"
+    ],
+    "targets": {
+      "pack-check": {
+        "dependsOn": []
+      }
+    }
+  }
+}

package/theme.css

@@ -0,0 +1,212 @@
+/*! Catppuccin Mocha palette © 2021 Catppuccin, MIT license: https://github.com/catppuccin/catppuccin (full notice in NOTICE) */
+/* ---------------------------------------------------------------------------
+   Catppuccin Mocha — the dark 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, …) rather than carrying `dark:`
+   variants. This file is what makes them dark: it remaps those core utilities
+   to real Catppuccin Mocha tokens under `.dark`. The rules are unlayered, so
+   they override Tailwind's (layered) utilities.
+
+   Consumers import it AFTER `@import "tailwindcss"` and put `.dark` on <html>
+   (see the README for the import line).
+
+   Palette:
+     base #1e1e2e · mantle #181825 · crust #11111b · surface0 #313244
+     surface1 #45475a · surface2 #585b70 · text #cdd6f4 · subtext1 #bac2de
+     subtext0 #a6adc8 · overlay1 #7f849c · green #a6e3a1 · red #f38ba8
+     yellow #f9e2af · blue #89b4fa · mauve #cba6f7
+   --------------------------------------------------------------------------- */
+
+/* Class-based dark mode (toggle adds `.dark` to <html>). */
+@custom-variant dark (&:where(.dark, .dark *));
+
+.dark {
+  color-scheme: dark;
+}
+
+/* Surfaces — cards (base) lift off the mantle canvas. */
+.dark .bg-white {
+  background-color: #1e1e2e; /* base */
+}
+.dark .bg-white\/80 {
+  background-color: rgba(30, 30, 46, 0.85);
+}
+.dark .bg-slate-50,
+.dark .bg-slate-50\/50,
+.dark .bg-slate-50\/60,
+.dark .bg-slate-50\/70 {
+  background-color: #313244; /* surface0 */
+}
+.dark .bg-slate-100 {
+  background-color: #45475a; /* surface1 */
+}
+.dark .bg-slate-900 {
+  background-color: #313244; /* surface0 — e.g. the brand badge */
+}
+
+/* Text */
+.dark .text-slate-900,
+.dark .text-slate-800 {
+  color: #cdd6f4; /* text — incl. bold totals/footers */
+}
+.dark .text-slate-700,
+.dark .text-slate-600 {
+  color: #bac2de; /* subtext1 */
+}
+.dark .text-slate-500 {
+  color: #a6adc8; /* subtext0 */
+}
+.dark .text-slate-400 {
+  color: #9399b2; /* overlay2 — legible muted/headers */
+}
+.dark .placeholder\:text-slate-400::placeholder {
+  color: #7f849c; /* overlay1 */
+}
+
+/* Borders */
+.dark .border-slate-100 {
+  border-color: #282839;
+}
+.dark .border-slate-200,
+.dark .border-slate-200\/70 {
+  border-color: #313244; /* surface0 */
+}
+.dark .border-slate-300 {
+  border-color: #45475a; /* surface1 */
+}
+/* "emphasis" / active borders flip to light so they stay visible */
+.dark .border-slate-900 {
+  border-color: #cdd6f4;
+}
+
+/* Money + accent text */
+.dark .text-emerald-600 {
+  color: #a6e3a1; /* green */
+}
+.dark .text-red-600 {
+  color: #f38ba8; /* red */
+}
+
+/* Stat-card accent bars */
+.dark .bg-emerald-500 {
+  background-color: #a6e3a1;
+}
+.dark .bg-red-500 {
+  background-color: #f38ba8;
+}
+.dark .bg-slate-300 {
+  background-color: #585b70; /* surface2 */
+}
+
+/* Accent: buttons, focus, controls */
+.dark .bg-violet-600 {
+  background-color: #cba6f7; /* mauve */
+}
+.dark .hover\:bg-violet-700:hover {
+  background-color: #b4befe; /* lavender */
+}
+.dark .text-violet-50 {
+  color: #11111b; /* crust — text on the mauve button */
+}
+.dark .hover\:text-violet-700:hover {
+  color: #b4befe; /* lavender */
+}
+.dark .hover\:bg-violet-50:hover {
+  background-color: rgba(203, 166, 247, 0.14); /* mauve tint */
+}
+.dark .border-violet-600 {
+  border-color: #cba6f7; /* mauve */
+}
+.dark .hover\:border-violet-400:hover {
+  border-color: rgba(203, 166, 247, 0.5);
+}
+.dark .focus-visible\:outline-violet-600:focus-visible {
+  outline-color: #cba6f7; /* mauve */
+}
+.dark .accent-violet-600 {
+  accent-color: #cba6f7; /* mauve */
+}
+
+/* Hover states */
+.dark .hover\:bg-slate-50:hover {
+  background-color: #262739;
+}
+.dark .hover\:bg-slate-100:hover {
+  background-color: #313244;
+}
+
+/* Coloured callouts / chips — tint backgrounds, lighten text & borders */
+.dark .bg-emerald-50,
+.dark .bg-emerald-50\/60,
+.dark .bg-emerald-100 {
+  background-color: rgba(166, 227, 161, 0.13);
+}
+.dark .bg-amber-50,
+.dark .bg-amber-50\/60,
+.dark .bg-amber-100 {
+  background-color: rgba(249, 226, 175, 0.13);
+}
+.dark .bg-red-50 {
+  background-color: rgba(243, 139, 168, 0.13);
+}
+.dark .bg-blue-50 {
+  background-color: rgba(137, 180, 250, 0.13);
+}
+.dark .bg-violet-50 {
+  background-color: rgba(203, 166, 247, 0.14); /* mauve tint */
+}
+.dark .text-emerald-700,
+.dark .text-emerald-800 {
+  color: #a6e3a1; /* green */
+}
+.dark .text-amber-700,
+.dark .text-amber-800,
+.dark .text-amber-900 {
+  color: #f9e2af; /* yellow */
+}
+.dark .text-red-700,
+.dark .text-red-800,
+.dark .text-red-900 {
+  color: #f38ba8; /* red */
+}
+.dark .text-blue-600,
+.dark .text-blue-700,
+.dark .text-blue-800,
+.dark .text-blue-900 {
+  color: #89b4fa; /* blue */
+}
+.dark .text-violet-600,
+.dark .text-violet-700 {
+  color: #cba6f7; /* mauve */
+}
+.dark .border-emerald-200,
+.dark .border-emerald-300 {
+  border-color: rgba(166, 227, 161, 0.4);
+}
+.dark .border-amber-200,
+.dark .border-amber-300 {
+  border-color: rgba(249, 226, 175, 0.4);
+}
+.dark .border-red-200 {
+  border-color: rgba(243, 139, 168, 0.45);
+}
+.dark .border-red-300,
+.dark .border-red-400 {
+  border-color: rgba(243, 139, 168, 0.45);
+}
+.dark .border-blue-200,
+.dark .border-blue-300 {
+  border-color: rgba(137, 180, 250, 0.4);
+}
+
+/* Inline links — Mocha mauve (green is reserved for positive values). */
+.link {
+  color: #cba6f7; /* mauve */
+  font-weight: 500;
+  text-underline-offset: 2px;
+  transition: color 0.12s ease;
+}
+.link:hover {
+  color: #b4befe; /* lavender */
+}