@malilion/block-ui-themes 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Block UI Contributors
+
+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

@@ -0,0 +1,22 @@
+# @malilion/block-ui-themes
+
+The five [Block UI](https://github.com/malilion/BlockUI) themes — `grassland`, `cave`, `deepslate`, `nether`, `end` — as typed `BlockTheme` objects and as `[data-theme]` CSS variables.
+
+```bash
+pnpm add @malilion/block-ui-themes
+```
+
+```ts
+import { themes, themeNames, type BlockThemeName } from "@malilion/block-ui-themes";
+import "@malilion/block-ui-themes/themes.css";
+```
+
+```html
+<body data-theme="nether">
+  …
+</body>
+```
+
+`@malilion/block-ui-react` already includes this stylesheet and applies themes through `<BlockUIProvider theme="…">`.
+
+MIT License

package/dist/css.d.ts

@@ -0,0 +1,7 @@
+import type { BlockTheme } from "./types.js";
+/** CSS variable name for a theme role. `background` maps to the PRD's `--block-bg`. */
+export declare function themeVar(role: keyof BlockTheme): string;
+export declare function themeEntries(theme: BlockTheme): Array<[string, string]>;
+/** Generates `themes.css`. The default theme also applies to `:root`. */
+export declare function generateThemesCss(): string;
+//# sourceMappingURL=css.d.ts.map

package/dist/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,YAAY,CAAC;AAE7D,uFAAuF;AACvF,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,UAAU,GAAG,MAAM,CAIvD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAMvE;AASD,yEAAyE;AACzE,wBAAgB,iBAAiB,IAAI,MAAM,CAO1C"}

package/dist/css.js

@@ -0,0 +1,32 @@
+import { toKebab } from "@malilion/block-ui-tokens";
+import { defaultThemeName, themes } from "./themes.js";
+/** CSS variable name for a theme role. `background` maps to the PRD's `--block-bg`. */
+export function themeVar(role) {
+    if (role === "background")
+        return "--block-bg";
+    if (role === "texture")
+        return "--block-texture";
+    return `--block-${toKebab(role)}`;
+}
+export function themeEntries(theme) {
+    return Object.keys(theme).map((role) => {
+        const value = theme[role];
+        if (role === "texture")
+            return [themeVar(role), `var(--block-texture-${toKebab(value)})`];
+        return [themeVar(role), value.startsWith("#") ? value.toLowerCase() : value];
+    });
+}
+function block(selector, theme) {
+    const body = themeEntries(theme)
+        .map(([name, value]) => `  ${name}: ${value};`)
+        .join("\n");
+    return `${selector} {\n  color-scheme: dark;\n${body}\n}`;
+}
+/** Generates `themes.css`. The default theme also applies to `:root`. */
+export function generateThemesCss() {
+    const blocks = Object.keys(themes).map((name) => {
+        const selector = name === defaultThemeName ? `:root,\n[data-theme="${name}"]` : `[data-theme="${name}"]`;
+        return block(selector, themes[name]);
+    });
+    return `/* Generated by @malilion/block-ui-themes — do not edit by hand. Run \`pnpm generate\`. */\n${blocks.join("\n\n")}\n`;
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./types.js";
+export * from "./themes.js";
+export { generateThemesCss, themeEntries, themeVar } from "./css.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from "./types.js";
+export * from "./themes.js";
+export { generateThemesCss, themeEntries, themeVar } from "./css.js";

package/dist/themes.d.ts

@@ -0,0 +1,9 @@
+import type { BlockTheme, BlockThemeName } from "./types.js";
+export declare const grassland: BlockTheme;
+export declare const cave: BlockTheme;
+export declare const deepslate: BlockTheme;
+export declare const nether: BlockTheme;
+export declare const end: BlockTheme;
+export declare const themes: Record<BlockThemeName, BlockTheme>;
+export declare const defaultThemeName: BlockThemeName;
+//# sourceMappingURL=themes.d.ts.map

package/dist/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAS7D,eAAO,MAAM,SAAS,EAAE,UAkBvB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,UAmBlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,UAkBvB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,UAmBpB,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,UAmBjB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,cAAc,EAAE,UAAU,CAMrD,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,cAA4B,CAAC"}

package/dist/themes.js

@@ -0,0 +1,113 @@
+import { colors } from "@malilion/block-ui-tokens";
+const shared = {
+    border: colors.outline,
+    text: colors.textPrimary,
+    focus: colors.gold,
+    overlay: "rgba(8, 9, 11, 0.72)",
+};
+export const grassland = {
+    ...shared,
+    background: "#1B1E22",
+    surface: "#34373C",
+    surfaceAlt: "#26292D",
+    surfaceHeader: "#2A2D31",
+    slot: "#1E2024",
+    slotHover: "#2C2F34",
+    textMuted: colors.textSecondary,
+    primary: colors.grass,
+    primaryLight: colors.grassLight,
+    primaryDark: colors.grassDark,
+    onPrimary: colors.onGrass,
+    secondary: colors.wood,
+    secondaryLight: colors.woodLight,
+    secondaryDark: colors.woodDark,
+    onSecondary: colors.onWood,
+    texture: "stone",
+};
+export const cave = {
+    ...shared,
+    background: "#121417",
+    surface: "#2A2C30",
+    surfaceAlt: "#1E2023",
+    surfaceHeader: "#232528",
+    slot: "#16181A",
+    slotHover: "#25272B",
+    textMuted: "#BFC4CA",
+    primary: colors.gold,
+    primaryLight: colors.goldLight,
+    primaryDark: colors.goldDark,
+    onPrimary: colors.onGold,
+    secondary: colors.stone,
+    secondaryLight: colors.stoneLight,
+    secondaryDark: colors.stoneDark,
+    onSecondary: colors.onStone,
+    focus: colors.diamond,
+    texture: "stone",
+};
+export const deepslate = {
+    ...shared,
+    background: colors.background,
+    surface: colors.deepslate,
+    surfaceAlt: "#1F1F21",
+    surfaceHeader: "#232325",
+    slot: "#18181A",
+    slotHover: "#2A2A2D",
+    textMuted: colors.textSecondary,
+    primary: colors.diamond,
+    primaryLight: colors.diamondLight,
+    primaryDark: colors.diamondDark,
+    onPrimary: colors.onDiamond,
+    secondary: colors.stone,
+    secondaryLight: colors.stoneLight,
+    secondaryDark: colors.stoneDark,
+    onSecondary: colors.onStone,
+    texture: "deepslate",
+};
+export const nether = {
+    ...shared,
+    background: "#190C0C",
+    surface: "#3A1818",
+    surfaceAlt: "#281010",
+    surfaceHeader: "#2F1313",
+    slot: "#1E0B0B",
+    slotHover: "#331616",
+    textMuted: "#E8C9C5",
+    primary: colors.lava,
+    primaryLight: colors.lavaLight,
+    primaryDark: colors.lavaDark,
+    onPrimary: colors.onLava,
+    secondary: colors.gold,
+    secondaryLight: colors.goldLight,
+    secondaryDark: colors.goldDark,
+    onSecondary: colors.onGold,
+    focus: colors.goldLight,
+    texture: "netherrack",
+};
+export const end = {
+    ...shared,
+    background: "#0E0A14",
+    surface: colors.obsidian,
+    surfaceAlt: "#1A1324",
+    surfaceHeader: "#1E1629",
+    slot: "#120D19",
+    slotHover: "#2A1F38",
+    textMuted: "#D2C8E0",
+    primary: colors.amethyst,
+    primaryLight: colors.amethystLight,
+    primaryDark: colors.amethystDark,
+    onPrimary: colors.onAmethyst,
+    secondary: colors.sand,
+    secondaryLight: colors.sandLight,
+    secondaryDark: colors.sandDark,
+    onSecondary: colors.onSand,
+    focus: colors.diamond,
+    texture: "endStone",
+};
+export const themes = {
+    grassland,
+    cave,
+    deepslate,
+    nether,
+    end,
+};
+export const defaultThemeName = "grassland";

package/dist/types.d.ts

@@ -0,0 +1,37 @@
+import type { TextureToken } from "@malilion/block-ui-tokens";
+export declare const themeNames: readonly ["grassland", "cave", "deepslate", "nether", "end"];
+export type BlockThemeName = (typeof themeNames)[number];
+/**
+ * Semantic theme contract (PRD §53) plus the extra roles components need to
+ * stay fully themeable without hard-coded colors.
+ */
+export interface BlockTheme {
+    background: string;
+    surface: string;
+    surfaceAlt: string;
+    primary: string;
+    secondary: string;
+    border: string;
+    text: string;
+    textMuted: string;
+    /** Text/icon color on top of `primary`. */
+    onPrimary: string;
+    primaryLight: string;
+    primaryDark: string;
+    /** Text/icon color on top of `secondary`. */
+    onSecondary: string;
+    secondaryLight: string;
+    secondaryDark: string;
+    /** Raised panel header strip. */
+    surfaceHeader: string;
+    /** Inventory slot / input well background. */
+    slot: string;
+    slotHover: string;
+    /** Focus ring color (≥ 3:1 against surfaces). */
+    focus: string;
+    /** Modal backdrop. */
+    overlay: string;
+    /** Texture tiled behind panels and the page. */
+    texture: TextureToken;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAE9D,eAAO,MAAM,UAAU,8DAA+D,CAAC;AAEvF,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAElB,2CAA2C;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,OAAO,EAAE,YAAY,CAAC;CACvB"}

package/dist/types.js

@@ -0,0 +1 @@
+export const themeNames = ["grassland", "cave", "deepslate", "nether", "end"];

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@malilion/block-ui-themes",
+  "version": "0.1.0",
+  "description": "Themes (grassland, cave, deepslate, nether, end) for Block UI.",
+  "license": "MIT",
+  "author": "Block UI Contributors",
+  "homepage": "https://malilion.github.io/BlockUI/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/malilion/BlockUI.git",
+    "directory": "packages/themes"
+  },
+  "bugs": {
+    "url": "https://github.com/malilion/BlockUI/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "@block-ui/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./themes.css": "./themes.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "themes.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "block-ui",
+    "themes",
+    "pixel"
+  ],
+  "dependencies": {
+    "@malilion/block-ui-tokens": "^0.1.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node scripts/generate-css.mjs",
+    "generate": "tsc -p tsconfig.build.json && node scripts/generate-css.mjs",
+    "typecheck": "tsc -p tsconfig.json"
+  }
+}

package/themes.css

@@ -0,0 +1,121 @@
+/* Generated by @malilion/block-ui-themes — do not edit by hand. Run `pnpm generate`. */
+:root,
+[data-theme="grassland"] {
+  color-scheme: dark;
+  --block-border: #17191c;
+  --block-text: #ffffff;
+  --block-focus: #f2c94c;
+  --block-overlay: rgba(8, 9, 11, 0.72);
+  --block-bg: #1b1e22;
+  --block-surface: #34373c;
+  --block-surface-alt: #26292d;
+  --block-surface-header: #2a2d31;
+  --block-slot: #1e2024;
+  --block-slot-hover: #2c2f34;
+  --block-text-muted: #c9cdd2;
+  --block-primary: #5d9b3d;
+  --block-primary-light: #7ebe55;
+  --block-primary-dark: #356b28;
+  --block-on-primary: #0f230a;
+  --block-secondary: #8a5a2b;
+  --block-secondary-light: #aa7843;
+  --block-secondary-dark: #5e3c1c;
+  --block-on-secondary: #ffffff;
+  --block-texture: var(--block-texture-stone);
+}
+
+[data-theme="cave"] {
+  color-scheme: dark;
+  --block-border: #17191c;
+  --block-text: #ffffff;
+  --block-focus: #52d9d0;
+  --block-overlay: rgba(8, 9, 11, 0.72);
+  --block-bg: #121417;
+  --block-surface: #2a2c30;
+  --block-surface-alt: #1e2023;
+  --block-surface-header: #232528;
+  --block-slot: #16181a;
+  --block-slot-hover: #25272b;
+  --block-text-muted: #bfc4ca;
+  --block-primary: #f2c94c;
+  --block-primary-light: #fce48c;
+  --block-primary-dark: #b88a1b;
+  --block-on-primary: #2a1a05;
+  --block-secondary: #737373;
+  --block-secondary-light: #959595;
+  --block-secondary-dark: #414141;
+  --block-on-secondary: #ffffff;
+  --block-texture: var(--block-texture-stone);
+}
+
+[data-theme="deepslate"] {
+  color-scheme: dark;
+  --block-border: #17191c;
+  --block-text: #ffffff;
+  --block-focus: #f2c94c;
+  --block-overlay: rgba(8, 9, 11, 0.72);
+  --block-bg: #1d2025;
+  --block-surface: #292929;
+  --block-surface-alt: #1f1f21;
+  --block-surface-header: #232325;
+  --block-slot: #18181a;
+  --block-slot-hover: #2a2a2d;
+  --block-text-muted: #c9cdd2;
+  --block-primary: #52d9d0;
+  --block-primary-light: #a5f3ee;
+  --block-primary-dark: #1e9b93;
+  --block-on-primary: #0b1f1e;
+  --block-secondary: #737373;
+  --block-secondary-light: #959595;
+  --block-secondary-dark: #414141;
+  --block-on-secondary: #ffffff;
+  --block-texture: var(--block-texture-deepslate);
+}
+
+[data-theme="nether"] {
+  color-scheme: dark;
+  --block-border: #17191c;
+  --block-text: #ffffff;
+  --block-focus: #fce48c;
+  --block-overlay: rgba(8, 9, 11, 0.72);
+  --block-bg: #190c0c;
+  --block-surface: #3a1818;
+  --block-surface-alt: #281010;
+  --block-surface-header: #2f1313;
+  --block-slot: #1e0b0b;
+  --block-slot-hover: #331616;
+  --block-text-muted: #e8c9c5;
+  --block-primary: #e8772e;
+  --block-primary-light: #ffae4a;
+  --block-primary-dark: #a8461a;
+  --block-on-primary: #200c03;
+  --block-secondary: #f2c94c;
+  --block-secondary-light: #fce48c;
+  --block-secondary-dark: #b88a1b;
+  --block-on-secondary: #2a1a05;
+  --block-texture: var(--block-texture-netherrack);
+}
+
+[data-theme="end"] {
+  color-scheme: dark;
+  --block-border: #17191c;
+  --block-text: #ffffff;
+  --block-focus: #52d9d0;
+  --block-overlay: rgba(8, 9, 11, 0.72);
+  --block-bg: #0e0a14;
+  --block-surface: #251b31;
+  --block-surface-alt: #1a1324;
+  --block-surface-header: #1e1629;
+  --block-slot: #120d19;
+  --block-slot-hover: #2a1f38;
+  --block-text-muted: #d2c8e0;
+  --block-primary: #9a6bd6;
+  --block-primary-light: #be9bec;
+  --block-primary-dark: #6a44a0;
+  --block-on-primary: #160c24;
+  --block-secondary: #d8c78e;
+  --block-secondary-light: #ede1b4;
+  --block-secondary-dark: #a8955c;
+  --block-on-secondary: #1f1a0b;
+  --block-texture: var(--block-texture-end-stone);
+}