@hackcove/theme-catppuccin-mocha 0.2.3 → 0.2.5

package/README.md

@@ -22,8 +22,9 @@ In your global stylesheet, after Tailwind:
 @import "@hackcove/theme-catppuccin-mocha/theme.css";
 ```
 
-Put `class="dark"` on `<html>`. The rules are unlayered, so they override Tailwind's layered
-utilities.
+Put `class="dark"` on `<html>`. The scope paints the mantle canvas (`#181825`), so the base-coloured
+cards lift off it and the app needs no page-background rule of its own. The rules are unlayered, so
+they override Tailwind's layered utilities.
 
 ## Palette and attribution
 

package/package.json

@@ -1,8 +1,26 @@
 {
   "name": "@hackcove/theme-catppuccin-mocha",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "The Catppuccin Mocha dark theme for Hack Cove: one CSS file that remaps the Tailwind utilities @hackcove/ui is written against.",
+  "keywords": [
+    "catppuccin",
+    "dark-mode",
+    "design-system",
+    "hackcove",
+    "mocha",
+    "tailwind",
+    "tailwindcss",
+    "theme"
+  ],
+  "homepage": "https://github.com/madangryscientist/hackcove/tree/main/themes/catppuccin-mocha#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",

package/theme.css

@@ -23,6 +23,7 @@
 
 .dark {
   color-scheme: dark;
+  background-color: #181825; /* mantle — the canvas the base-coloured cards lift off */
 }
 
 /* Surfaces — cards (base) lift off the mantle canvas. */
@@ -133,10 +134,30 @@
 .dark .focus-visible\:outline-violet-600:focus-visible {
   outline-color: #cba6f7; /* mauve */
 }
+.dark .has-focus-visible\:outline-violet-600:has(:focus-visible) {
+  outline-color: #cba6f7; /* mauve */
+}
 .dark .accent-violet-600 {
   accent-color: #cba6f7; /* mauve */
 }
 
+/* Danger button (Button tone="danger"): solid, outline and ghost */
+.dark .bg-red-600 {
+  background-color: #f38ba8; /* red */
+}
+.dark .hover\:bg-red-700:hover {
+  background-color: #eba0ac; /* maroon */
+}
+.dark .text-red-50 {
+  color: #11111b; /* crust — text on the red button */
+}
+.dark .border-red-600 {
+  border-color: #f38ba8; /* red */
+}
+.dark .hover\:bg-red-50:hover {
+  background-color: rgba(243, 139, 168, 0.14); /* red tint */
+}
+
 /* Avatar identity colours — violet-600 is the accent above; the rest sit on the theme. */
 .dark .bg-orange-600 {
   background-color: #fab387; /* peach */
@@ -185,6 +206,9 @@
 .dark .bg-violet-50 {
   background-color: rgba(203, 166, 247, 0.14); /* mauve tint */
 }
+.dark .bg-sky-50 {
+  background-color: rgba(137, 220, 235, 0.13); /* sky tint */
+}
 .dark .text-emerald-700,
 .dark .text-emerald-800 {
   color: #a6e3a1; /* green */
@@ -209,6 +233,9 @@
 .dark .text-violet-700 {
   color: #cba6f7; /* mauve */
 }
+.dark .text-sky-700 {
+  color: #89dceb; /* sky */
+}
 .dark .border-emerald-200,
 .dark .border-emerald-300 {
   border-color: rgba(166, 227, 161, 0.4);
@@ -229,7 +256,9 @@
   border-color: rgba(137, 180, 250, 0.4);
 }
 
-/* Inline links — Mocha mauve (green is reserved for positive values). */
+/* Inline links — Mocha mauve (green is reserved for positive values). Alias of @hackcove/ui's
+   TextLink (text-violet-600, hover:text-violet-700, remapped above), kept for consumers that still
+   write class="link" on a bare <a>. */
 .link {
   color: #cba6f7; /* mauve */
   font-weight: 500;