@gtk-js/theme-adwaita 0.0.2

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@gtk-js/theme-adwaita",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.0.2",
+  "type": "module",
+  "main": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {
+    "build": "bun build.ts"
+  },
+  "dependencies": {
+    "@gtk-js/gtk-css": "0.1.1"
+  }
+}

package/src/index.ts

@@ -0,0 +1,48 @@
+import { GtkTheme } from "@gtk-js/gtk-css";
+import autoCSS from "../dist/auto.css" with { type: "text" };
+import darkCSS from "../dist/dark.css" with { type: "text" };
+import lightCSS from "../dist/light.css" with { type: "text" };
+
+/**
+ * The Adwaita theme — the default GNOME/libadwaita theme.
+ *
+ * Supports free-pick accent color and light/dark/auto color scheme.
+ *
+ * @example
+ * // Default (auto color scheme, GNOME blue accent):
+ * const theme = new AdwaitaTheme();
+ *
+ * // Forced dark with custom accent:
+ * const theme = new AdwaitaTheme({ colorScheme: "dark", accentColor: "#e66100" });
+ *
+ * // Immutable — create a new instance when settings change:
+ * const theme = useMemo(() => new AdwaitaTheme({ colorScheme, accentColor }), [colorScheme, accentColor]);
+ * <GtkProvider theme={theme} />
+ */
+export class AdwaitaTheme extends GtkTheme {
+  readonly colorScheme: "light" | "dark" | "auto";
+  readonly accentColor: string;
+
+  constructor({
+    colorScheme = "auto",
+    accentColor = "#3584e4",
+  }: {
+    colorScheme?: "light" | "dark" | "auto";
+    accentColor?: string;
+  } = {}) {
+    super();
+    this.colorScheme = colorScheme;
+    this.accentColor = accentColor;
+  }
+
+  getCSS() {
+    const base =
+      this.colorScheme === "dark" ? darkCSS : this.colorScheme === "light" ? lightCSS : autoCSS;
+
+    // Append accent override on top of the default baked into the CSS
+    return (
+      base +
+      `\n[data-gtk-provider] { --accent-bg-color: ${this.accentColor}; --accent-fg-color: white; }\n`
+    );
+  }
+}