@area8975/ui 0.1.1-dev.12 → 0.1.1-dev.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@area8975/ui",
-  "version": "0.1.1-dev.12",
+  "version": "0.1.1-dev.15",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",

package/theme.css

@@ -13,6 +13,9 @@
 /* Defaults hover styles on all devices */
 @custom-variant hover (&:hover);
 
+/* dark: follows a .dark class on <html> rather than the media query, so an app can offer System, Light and Dark */
+@custom-variant dark (&:where(.dark, .dark *));
+
 
 @font-face {
     font-family: "Inter";
@@ -111,3 +114,66 @@
     --color-danger-900: var(--color-red-900);
     --color-danger-950: var(--color-red-950);
 }
+
+
+/* Paints the page, otherwise the browser's white shows through whatever --background is */
+@layer base {
+    body {
+        background-color: var(--background);
+        color: var(--foreground);
+    }
+}
+
+/*
+ * Softer light theme. The page is a light grey so white cards and the sidebar
+ * stand off it, edged with a slightly stronger line. Dark mode keeps Preline's.
+ */
+:root:not(.dark) {
+    --background: oklch(0.948 0.005 264);
+    --sidebar: var(--card);
+    --sidebar-line: oklch(0.9 0.006 264);
+    --card-line: oklch(0.9 0.006 264);
+}
+
+/* Dark to match, a deeper page with the cards and sidebar raised off it */
+.dark {
+    --background: var(--color-neutral-900);
+    --sidebar: var(--card);
+    --sidebar-line: var(--card-line);
+
+    /* menus sit on cards, Preline's item hover is the card's own colour so it never showed */
+    --dropdown-item-hover: var(--color-neutral-700);
+    --dropdown-item-focus: var(--color-neutral-700);
+    --dropdown-item-active: var(--color-neutral-700);
+}
+
+/*
+ * Dark tints. Soft fills, borders and focus rings use the 50 to 200 shades and
+ * soft text the 800 one, so in dark those become see-through tints of the
+ * colour and a light text shade. Solid colours stay as they are.
+ */
+.dark {
+    --color-primary-50: color-mix(in oklab, var(--color-blue-500) 12%, transparent);
+    --color-primary-100: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
+    --color-primary-200: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
+    --color-primary-800: var(--color-blue-300);
+
+    --color-success-50: color-mix(in oklab, var(--color-teal-500) 12%, transparent);
+    --color-success-100: color-mix(in oklab, var(--color-teal-500) 20%, transparent);
+    --color-success-200: color-mix(in oklab, var(--color-teal-500) 30%, transparent);
+    --color-success-800: var(--color-teal-300);
+
+    --color-warning-50: color-mix(in oklab, var(--color-yellow-500) 12%, transparent);
+    --color-warning-100: color-mix(in oklab, var(--color-yellow-500) 20%, transparent);
+    --color-warning-200: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
+    --color-warning-800: var(--color-yellow-300);
+
+    --color-danger-50: color-mix(in oklab, var(--color-red-500) 12%, transparent);
+    --color-danger-100: color-mix(in oklab, var(--color-red-500) 20%, transparent);
+    --color-danger-200: color-mix(in oklab, var(--color-red-500) 30%, transparent);
+    --color-danger-800: var(--color-red-300);
+
+    --color-secondary-50: color-mix(in oklab, var(--color-gray-500) 12%, transparent);
+    --color-secondary-100: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
+    --color-secondary-200: color-mix(in oklab, var(--color-gray-500) 30%, transparent);
+}