@malilion/block-ui-tokens 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,16 @@
+# @malilion/block-ui-tokens
+
+Design tokens for [Block UI](https://github.com/malilion/BlockUI): block-material colors (each with an AA-compliant `on*` text color), a 4px spacing grid, typography, radius (max 6px), pixel bevel shadows, snappy motion, sizes, z-index, breakpoints and procedural pixel textures.
+
+```bash
+pnpm add @malilion/block-ui-tokens
+```
+
+```ts
+import { colors, spacing, motion, contrastRatio } from "@malilion/block-ui-tokens";
+import "@malilion/block-ui-tokens/tokens.css"; // --block-* CSS variables + [data-material] rules
+```
+
+`@malilion/block-ui-react` already includes this stylesheet in `@malilion/block-ui-react/styles.css`.
+
+MIT License

package/dist/breakpoints.d.ts

@@ -0,0 +1,14 @@
+export declare const breakpoints: {
+    readonly sm: "640px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1280px";
+};
+export type Breakpoint = keyof typeof breakpoints;
+/** Media queries matching PRD §50 (mobile < 768, tablet 768–1023, desktop ≥ 1024). */
+export declare const media: {
+    readonly mobile: "(max-width: 767.98px)";
+    readonly tablet: "(min-width: 768px) and (max-width: 1023.98px)";
+    readonly desktop: "(min-width: 1024px)";
+};
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../src/breakpoints.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;CAKd,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAElD,sFAAsF;AACtF,eAAO,MAAM,KAAK;;;;CAIR,CAAC"}

package/dist/breakpoints.js

@@ -0,0 +1,12 @@
+export const breakpoints = {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+};
+/** Media queries matching PRD §50 (mobile < 768, tablet 768–1023, desktop ≥ 1024). */
+export const media = {
+    mobile: "(max-width: 767.98px)",
+    tablet: "(min-width: 768px) and (max-width: 1023.98px)",
+    desktop: "(min-width: 1024px)",
+};

package/dist/colors.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Block UI color tokens.
+ *
+ * Base values follow the PRD palette. Each "material" also carries a light
+ * highlight, a dark shade (used by the pixel bevel) and an `on` color that is
+ * guaranteed to reach WCAG AA (4.5:1) against the base.
+ *
+ * Deviation from PRD: `stone` is #737373 instead of #777777 so that white text
+ * on stone reaches 4.5:1 (#777777 only reaches 4.48:1).
+ */
+export declare const colors: {
+    readonly grass: "#5D9B3D";
+    readonly grassLight: "#7EBE55";
+    readonly grassDark: "#356B28";
+    readonly onGrass: "#0F230A";
+    readonly dirt: "#79553A";
+    readonly dirtLight: "#98704F";
+    readonly dirtDark: "#553A27";
+    readonly onDirt: "#FFFFFF";
+    readonly wood: "#8A5A2B";
+    readonly woodLight: "#AA7843";
+    readonly woodDark: "#5E3C1C";
+    readonly onWood: "#FFFFFF";
+    readonly stone: "#737373";
+    readonly stoneLight: "#959595";
+    readonly stoneDark: "#414141";
+    readonly onStone: "#FFFFFF";
+    readonly deepslate: "#292929";
+    readonly deepslateLight: "#3B3B3B";
+    readonly deepslateDark: "#1A1A1A";
+    readonly onDeepslate: "#FFFFFF";
+    readonly sand: "#D8C78E";
+    readonly sandLight: "#EDE1B4";
+    readonly sandDark: "#A8955C";
+    readonly onSand: "#1F1A0B";
+    readonly water: "#3B82C4";
+    readonly waterLight: "#62A3DE";
+    readonly waterDark: "#24568A";
+    readonly onWater: "#050E18";
+    readonly diamond: "#52D9D0";
+    readonly diamondLight: "#A5F3EE";
+    readonly diamondDark: "#1E9B93";
+    readonly onDiamond: "#0B1F1E";
+    readonly emerald: "#35B84B";
+    readonly emeraldLight: "#71DD80";
+    readonly emeraldDark: "#1E7A2F";
+    readonly onEmerald: "#0B1F0E";
+    readonly gold: "#F2C94C";
+    readonly goldLight: "#FCE48C";
+    readonly goldDark: "#B88A1B";
+    readonly onGold: "#2A1A05";
+    readonly redstone: "#B52A24";
+    readonly redstoneLight: "#E0473F";
+    readonly redstoneDark: "#7A1814";
+    readonly onRedstone: "#FFFFFF";
+    readonly obsidian: "#251B31";
+    readonly obsidianLight: "#3E2D54";
+    readonly obsidianDark: "#140E1C";
+    readonly onObsidian: "#FFFFFF";
+    readonly nether: "#702929";
+    readonly netherLight: "#954040";
+    readonly netherDark: "#4A1919";
+    readonly onNether: "#FFFFFF";
+    readonly amethyst: "#9A6BD6";
+    readonly amethystLight: "#BE9BEC";
+    readonly amethystDark: "#6A44A0";
+    readonly onAmethyst: "#160C24";
+    readonly lava: "#E8772E";
+    readonly lavaLight: "#FFAE4A";
+    readonly lavaDark: "#A8461A";
+    readonly onLava: "#200C03";
+    readonly iron: "#D8D8D8";
+    readonly ironDark: "#9C9C9C";
+    readonly coal: "#2E2E2E";
+    readonly outline: "#17191C";
+    readonly white: "#FFFFFF";
+    readonly black: "#000000";
+    readonly textPrimary: "#FFFFFF";
+    readonly textSecondary: "#C9CDD2";
+    readonly textDisabled: "#8A9097";
+    readonly background: "#1D2025";
+};
+export type ColorToken = keyof typeof colors;
+/** Materials usable as component variants (buttons, badges, progress, cards). */
+export declare const materials: readonly ["grass", "dirt", "wood", "stone", "deepslate", "sand", "water", "diamond", "emerald", "gold", "redstone", "obsidian", "nether", "amethyst", "lava"];
+export type Material = (typeof materials)[number];
+/** Item rarity → material mapping used by slots and tooltips. */
+export declare const rarityColors: {
+    readonly common: "textPrimary";
+    readonly uncommon: "gold";
+    readonly rare: "diamond";
+    readonly epic: "amethyst";
+    readonly legendary: "lava";
+};
+export type Rarity = keyof typeof rarityColors;
+//# sourceMappingURL=colors.d.ts.map

package/dist/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFT,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC;AAE7C,iFAAiF;AACjF,eAAO,MAAM,SAAS,+JAgBZ,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAElD,iEAAiE;AACjE,eAAO,MAAM,YAAY;;;;;;CAMsB,CAAC;AAEhD,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/colors.js

@@ -0,0 +1,108 @@
+/**
+ * Block UI color tokens.
+ *
+ * Base values follow the PRD palette. Each "material" also carries a light
+ * highlight, a dark shade (used by the pixel bevel) and an `on` color that is
+ * guaranteed to reach WCAG AA (4.5:1) against the base.
+ *
+ * Deviation from PRD: `stone` is #737373 instead of #777777 so that white text
+ * on stone reaches 4.5:1 (#777777 only reaches 4.48:1).
+ */
+export const colors = {
+    grass: "#5D9B3D",
+    grassLight: "#7EBE55",
+    grassDark: "#356B28",
+    onGrass: "#0F230A",
+    dirt: "#79553A",
+    dirtLight: "#98704F",
+    dirtDark: "#553A27",
+    onDirt: "#FFFFFF",
+    wood: "#8A5A2B",
+    woodLight: "#AA7843",
+    woodDark: "#5E3C1C",
+    onWood: "#FFFFFF",
+    stone: "#737373",
+    stoneLight: "#959595",
+    stoneDark: "#414141",
+    onStone: "#FFFFFF",
+    deepslate: "#292929",
+    deepslateLight: "#3B3B3B",
+    deepslateDark: "#1A1A1A",
+    onDeepslate: "#FFFFFF",
+    sand: "#D8C78E",
+    sandLight: "#EDE1B4",
+    sandDark: "#A8955C",
+    onSand: "#1F1A0B",
+    water: "#3B82C4",
+    waterLight: "#62A3DE",
+    waterDark: "#24568A",
+    onWater: "#050E18",
+    diamond: "#52D9D0",
+    diamondLight: "#A5F3EE",
+    diamondDark: "#1E9B93",
+    onDiamond: "#0B1F1E",
+    emerald: "#35B84B",
+    emeraldLight: "#71DD80",
+    emeraldDark: "#1E7A2F",
+    onEmerald: "#0B1F0E",
+    gold: "#F2C94C",
+    goldLight: "#FCE48C",
+    goldDark: "#B88A1B",
+    onGold: "#2A1A05",
+    redstone: "#B52A24",
+    redstoneLight: "#E0473F",
+    redstoneDark: "#7A1814",
+    onRedstone: "#FFFFFF",
+    obsidian: "#251B31",
+    obsidianLight: "#3E2D54",
+    obsidianDark: "#140E1C",
+    onObsidian: "#FFFFFF",
+    nether: "#702929",
+    netherLight: "#954040",
+    netherDark: "#4A1919",
+    onNether: "#FFFFFF",
+    amethyst: "#9A6BD6",
+    amethystLight: "#BE9BEC",
+    amethystDark: "#6A44A0",
+    onAmethyst: "#160C24",
+    lava: "#E8772E",
+    lavaLight: "#FFAE4A",
+    lavaDark: "#A8461A",
+    onLava: "#200C03",
+    iron: "#D8D8D8",
+    ironDark: "#9C9C9C",
+    coal: "#2E2E2E",
+    outline: "#17191C",
+    white: "#FFFFFF",
+    black: "#000000",
+    textPrimary: "#FFFFFF",
+    textSecondary: "#C9CDD2",
+    textDisabled: "#8A9097",
+    background: "#1D2025",
+};
+/** Materials usable as component variants (buttons, badges, progress, cards). */
+export const materials = [
+    "grass",
+    "dirt",
+    "wood",
+    "stone",
+    "deepslate",
+    "sand",
+    "water",
+    "diamond",
+    "emerald",
+    "gold",
+    "redstone",
+    "obsidian",
+    "nether",
+    "amethyst",
+    "lava",
+];
+/** Item rarity → material mapping used by slots and tooltips. */
+export const rarityColors = {
+    common: "textPrimary",
+    uncommon: "gold",
+    rare: "diamond",
+    epic: "amethyst",
+    legendary: "lava",
+};

package/dist/contrast.d.ts

@@ -0,0 +1,5 @@
+/** WCAG 2.x relative luminance of a `#rrggbb` color. */
+export declare function relativeLuminance(hex: string): number;
+/** WCAG contrast ratio between two `#rrggbb` colors (1 – 21). */
+export declare function contrastRatio(foreground: string, background: string): number;
+//# sourceMappingURL=contrast.d.ts.map

package/dist/contrast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contrast.d.ts","sourceRoot":"","sources":["../src/contrast.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAQrD;AAED,iEAAiE;AACjE,wBAAgB,aAAa,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAK5E"}

package/dist/contrast.js

@@ -0,0 +1,15 @@
+/** WCAG 2.x relative luminance of a `#rrggbb` color. */
+export function relativeLuminance(hex) {
+    const value = Number.parseInt(hex.replace("#", ""), 16);
+    const channels = [(value >> 16) & 255, (value >> 8) & 255, value & 255].map((channel) => {
+        const c = channel / 255;
+        return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    });
+    const [r = 0, g = 0, b = 0] = channels;
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/** WCAG contrast ratio between two `#rrggbb` colors (1 – 21). */
+export function contrastRatio(foreground, background) {
+    const [light, dark] = [relativeLuminance(foreground), relativeLuminance(background)].sort((a, b) => b - a);
+    return (light + 0.05) / (dark + 0.05);
+}

package/dist/css.d.ts

@@ -0,0 +1,17 @@
+import { colors } from "./colors.js";
+/** camelCase / PascalCase → kebab-case (`grassDark` → `grass-dark`, `2xl` → `2xl`). */
+export declare function toKebab(value: string): string;
+/** CSS variable name for a color token. `background` maps to the PRD's `--block-bg`. */
+export declare function colorVar(token: keyof typeof colors): string;
+type Entries = Array<[string, string]>;
+/** Every token as `[cssVariableName, value]`, in output order. */
+export declare function tokenEntries(): Entries;
+/**
+ * `[data-material="…"]` rules. Components set `data-material` and read the
+ * generic `--block-mat*` variables, so every material variant stays token-driven.
+ */
+export declare function materialCss(): string;
+/** Generates `tokens.css` — the CSS custom properties for every design token. */
+export declare function generateTokensCss(): string;
+export {};
+//# 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":"AAAA,OAAO,EAAE,MAAM,EAAa,MAAM,aAAa,CAAC;AAWhD,uFAAuF;AACvF,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED,wFAAwF;AACxF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,OAAO,MAAM,GAAG,MAAM,CAE3D;AAED,KAAK,OAAO,GAAG,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAMvC,kEAAkE;AAClE,wBAAgB,YAAY,IAAI,OAAO,CAyBtC;AAED;;;GAGG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAkBpC;AAED,iFAAiF;AACjF,wBAAgB,iBAAiB,IAAI,MAAM,CAK1C"}

package/dist/css.js

@@ -0,0 +1,76 @@
+import { colors, materials } from "./colors.js";
+import { spacing } from "./spacing.js";
+import { fontFamily, fontSize, fontWeight, letterSpacing, lineHeight } from "./typography.js";
+import { radius } from "./radius.js";
+import { border, shadow } from "./shadow.js";
+import { easing, motion } from "./motion.js";
+import { sizes } from "./sizes.js";
+import { zIndex } from "./zIndex.js";
+import { textures } from "./textures.js";
+import { relativeLuminance } from "./contrast.js";
+/** camelCase / PascalCase → kebab-case (`grassDark` → `grass-dark`, `2xl` → `2xl`). */
+export function toKebab(value) {
+    return value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+/** CSS variable name for a color token. `background` maps to the PRD's `--block-bg`. */
+export function colorVar(token) {
+    return token === "background" ? "--block-bg" : `--block-${toKebab(token)}`;
+}
+function group(prefix, record) {
+    return Object.entries(record).map(([key, value]) => [`--block-${prefix}${toKebab(key)}`, value]);
+}
+/** Every token as `[cssVariableName, value]`, in output order. */
+export function tokenEntries() {
+    const colorEntries = Object.entries(colors).map(([key, value]) => [
+        colorVar(key),
+        value.toLowerCase(),
+    ]);
+    return [
+        ...colorEntries,
+        ...group("space-", spacing),
+        ...group("font-", fontFamily),
+        ...group("font-size-", fontSize),
+        ...group("font-weight-", fontWeight),
+        ...group("line-height-", lineHeight),
+        ...group("letter-spacing-", letterSpacing),
+        ...group("radius-", radius),
+        ["--block-border-width", border.width],
+        ["--block-border-width-thin", border.widthThin],
+        ["--block-border-color", border.color.toLowerCase()],
+        ...group("shadow-", shadow),
+        ...group("duration-", motion),
+        ...group("ease-", easing),
+        ...group("size-", sizes),
+        ...group("z-", zIndex),
+        ...group("texture-", textures),
+    ];
+}
+/**
+ * `[data-material="…"]` rules. Components set `data-material` and read the
+ * generic `--block-mat*` variables, so every material variant stays token-driven.
+ */
+export function materialCss() {
+    return materials
+        .map((material) => {
+        const name = toKebab(material);
+        const onKey = `on${material.charAt(0).toUpperCase()}${material.slice(1)}`;
+        const lightText = relativeLuminance(colors[onKey]) > 0.5;
+        return [
+            `[data-material="${name}"] {`,
+            `  --block-mat: var(--block-${name});`,
+            `  --block-mat-light: var(--block-${name}-light);`,
+            `  --block-mat-dark: var(--block-${name}-dark);`,
+            `  --block-mat-on: var(--block-on-${name});`,
+            `  --block-mat-text-shadow: ${lightText ? "var(--block-shadow-text)" : "var(--block-shadow-text-light)"};`,
+            `}`,
+        ].join("\n");
+    })
+        .join("\n");
+}
+/** Generates `tokens.css` — the CSS custom properties for every design token. */
+export function generateTokensCss() {
+    const body = tokenEntries()
+        .map(([name, value]) => `  ${name}: ${value};`)
+        .join("\n");
+    return `/* Generated by @malilion/block-ui-tokens — do not edit by hand. Run \`pnpm generate\`. */\n:root {\n${body}\n}\n\n${materialCss()}\n`;
+}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export * from "./colors.js";
+export * from "./spacing.js";
+export * from "./typography.js";
+export * from "./radius.js";
+export * from "./shadow.js";
+export * from "./motion.js";
+export * from "./sizes.js";
+export * from "./zIndex.js";
+export * from "./breakpoints.js";
+export * from "./textures.js";
+export { colorVar, generateTokensCss, materialCss, toKebab, tokenEntries } from "./css.js";
+export { contrastRatio, relativeLuminance } from "./contrast.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,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC3F,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1,12 @@
+export * from "./colors.js";
+export * from "./spacing.js";
+export * from "./typography.js";
+export * from "./radius.js";
+export * from "./shadow.js";
+export * from "./motion.js";
+export * from "./sizes.js";
+export * from "./zIndex.js";
+export * from "./breakpoints.js";
+export * from "./textures.js";
+export { colorVar, generateTokensCss, materialCss, toKebab, tokenEntries } from "./css.js";
+export { contrastRatio, relativeLuminance } from "./contrast.js";

package/dist/motion.d.ts

@@ -0,0 +1,14 @@
+/** Snappy, mechanical motion. Nothing above 160ms by default (PRD §17). */
+export declare const motion: {
+    readonly instant: "80ms";
+    readonly fast: "120ms";
+    readonly normal: "160ms";
+};
+export declare const easing: {
+    /** Pixel-step easing for mechanical feedback. */
+    readonly step: "steps(2, end)";
+    readonly snap: "cubic-bezier(0.2, 0, 0, 1)";
+    readonly linear: "linear";
+};
+export type MotionToken = keyof typeof motion;
+//# sourceMappingURL=motion.d.ts.map

package/dist/motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../src/motion.ts"],"names":[],"mappings":"AAAA,2EAA2E;AAC3E,eAAO,MAAM,MAAM;;;;CAIT,CAAC;AAEX,eAAO,MAAM,MAAM;IACjB,iDAAiD;;;;CAIzC,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,MAAM,CAAC"}

package/dist/motion.js

@@ -0,0 +1,12 @@
+/** Snappy, mechanical motion. Nothing above 160ms by default (PRD §17). */
+export const motion = {
+    instant: "80ms",
+    fast: "120ms",
+    normal: "160ms",
+};
+export const easing = {
+    /** Pixel-step easing for mechanical feedback. */
+    step: "steps(2, end)",
+    snap: "cubic-bezier(0.2, 0, 0, 1)",
+    linear: "linear",
+};

package/dist/radius.d.ts

@@ -0,0 +1,10 @@
+/** Block UI never rounds more than 6px (PRD §15). */
+export declare const radius: {
+    readonly none: "0px";
+    readonly xs: "2px";
+    readonly sm: "4px";
+    readonly md: "6px";
+};
+export declare const MAX_RADIUS_PX = 6;
+export type RadiusToken = keyof typeof radius;
+//# sourceMappingURL=radius.d.ts.map

package/dist/radius.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radius.d.ts","sourceRoot":"","sources":["../src/radius.ts"],"names":[],"mappings":"AAAA,qDAAqD;AACrD,eAAO,MAAM,MAAM;;;;;CAKT,CAAC;AAEX,eAAO,MAAM,aAAa,IAAI,CAAC;AAE/B,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,MAAM,CAAC"}

package/dist/radius.js

@@ -0,0 +1,8 @@
+/** Block UI never rounds more than 6px (PRD §15). */
+export const radius = {
+    none: "0px",
+    xs: "2px",
+    sm: "4px",
+    md: "6px",
+};
+export const MAX_RADIUS_PX = 6;

package/dist/shadow.d.ts

@@ -0,0 +1,19 @@
+/** Pixel border + bevel used by every block surface (PRD §16). */
+export declare const border: {
+    readonly width: "3px";
+    readonly widthThin: "2px";
+    readonly color: "#17191C";
+};
+export declare const shadow: {
+    readonly bevelLight: "rgba(255, 255, 255, 0.14)";
+    readonly bevelDark: "rgba(0, 0, 0, 0.38)";
+    /** Raised block: light top-left, dark bottom-right. */
+    readonly bevel: "inset 3px 3px 0 rgba(255, 255, 255, 0.14), inset -3px -3px 0 rgba(0, 0, 0, 0.38)";
+    /** Sunken block (slots, inputs): dark top-left, light bottom-right. */
+    readonly inset: "inset 3px 3px 0 rgba(0, 0, 0, 0.38), inset -3px -3px 0 rgba(255, 255, 255, 0.1)";
+    /** Hard pixel drop shadow — never blurred. */
+    readonly drop: "4px 4px 0 rgba(0, 0, 0, 0.45)";
+    readonly text: "2px 2px 0 rgba(0, 0, 0, 0.55)";
+    readonly textLight: "1px 1px 0 rgba(255, 255, 255, 0.35)";
+};
+//# sourceMappingURL=shadow.d.ts.map

package/dist/shadow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../src/shadow.ts"],"names":[],"mappings":"AAEA,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;CAIT,CAAC;AAEX,eAAO,MAAM,MAAM;;;IAGjB,uDAAuD;;IAEvD,uEAAuE;;IAEvE,8CAA8C;;;;CAItC,CAAC"}

package/dist/shadow.js

@@ -0,0 +1,19 @@
+import { colors } from "./colors.js";
+/** Pixel border + bevel used by every block surface (PRD §16). */
+export const border = {
+    width: "3px",
+    widthThin: "2px",
+    color: colors.outline,
+};
+export const shadow = {
+    bevelLight: "rgba(255, 255, 255, 0.14)",
+    bevelDark: "rgba(0, 0, 0, 0.38)",
+    /** Raised block: light top-left, dark bottom-right. */
+    bevel: "inset 3px 3px 0 rgba(255, 255, 255, 0.14), inset -3px -3px 0 rgba(0, 0, 0, 0.38)",
+    /** Sunken block (slots, inputs): dark top-left, light bottom-right. */
+    inset: "inset 3px 3px 0 rgba(0, 0, 0, 0.38), inset -3px -3px 0 rgba(255, 255, 255, 0.1)",
+    /** Hard pixel drop shadow — never blurred. */
+    drop: "4px 4px 0 rgba(0, 0, 0, 0.45)",
+    text: "2px 2px 0 rgba(0, 0, 0, 0.55)",
+    textLight: "1px 1px 0 rgba(255, 255, 255, 0.35)",
+};

package/dist/sizes.d.ts

@@ -0,0 +1,14 @@
+export declare const sizes: {
+    readonly slotSm: "40px";
+    readonly slotMd: "52px";
+    readonly slotLg: "64px";
+    readonly iconSm: "16px";
+    readonly iconMd: "24px";
+    readonly iconLg: "32px";
+    readonly controlSm: "32px";
+    readonly controlMd: "40px";
+    readonly controlLg: "48px";
+    readonly sidebar: "248px";
+    readonly sidebarCollapsed: "72px";
+};
+//# sourceMappingURL=sizes.d.ts.map

package/dist/sizes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../src/sizes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK;;;;;;;;;;;;CAYR,CAAC"}

package/dist/sizes.js

@@ -0,0 +1,13 @@
+export const sizes = {
+    slotSm: "40px",
+    slotMd: "52px",
+    slotLg: "64px",
+    iconSm: "16px",
+    iconMd: "24px",
+    iconLg: "32px",
+    controlSm: "32px",
+    controlMd: "40px",
+    controlLg: "48px",
+    sidebar: "248px",
+    sidebarCollapsed: "72px",
+};

package/dist/spacing.d.ts

@@ -0,0 +1,16 @@
+/** 4px grid. Keys are multiples of 4px. */
+export declare const spacing: {
+    readonly 0: "0px";
+    readonly 1: "4px";
+    readonly 2: "8px";
+    readonly 3: "12px";
+    readonly 4: "16px";
+    readonly 5: "20px";
+    readonly 6: "24px";
+    readonly 8: "32px";
+    readonly 10: "40px";
+    readonly 12: "48px";
+    readonly 16: "64px";
+};
+export type SpacingToken = keyof typeof spacing;
+//# sourceMappingURL=spacing.d.ts.map

package/dist/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../src/spacing.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAC3C,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYV,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,OAAO,CAAC"}

package/dist/spacing.js

@@ -0,0 +1,14 @@
+/** 4px grid. Keys are multiples of 4px. */
+export const spacing = {
+    0: "0px",
+    1: "4px",
+    2: "8px",
+    3: "12px",
+    4: "16px",
+    5: "20px",
+    6: "24px",
+    8: "32px",
+    10: "40px",
+    12: "48px",
+    16: "64px",
+};

package/dist/textures.d.ts

@@ -0,0 +1,12 @@
+export declare const textures: {
+    readonly stone: string;
+    readonly deepslate: string;
+    readonly dirt: string;
+    readonly grass: string;
+    readonly planks: string;
+    readonly netherrack: string;
+    readonly endStone: string;
+    readonly obsidian: string;
+};
+export type TextureToken = keyof typeof textures;
+//# sourceMappingURL=textures.d.ts.map

package/dist/textures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textures.d.ts","sourceRoot":"","sources":["../src/textures.ts"],"names":[],"mappings":"AAoIA,eAAO,MAAM,QAAQ;;;;;;;;;CASX,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,QAAQ,CAAC"}

package/dist/textures.js

@@ -0,0 +1,119 @@
+import { colors } from "./colors.js";
+function mulberry32(seed) {
+    let a = seed;
+    return () => {
+        a |= 0;
+        a = (a + 0x6d2b79f5) | 0;
+        let t = Math.imul(a ^ (a >>> 15), 1 | a);
+        t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+}
+function noiseGrid(size, palette, weights, seed) {
+    const rand = mulberry32(seed);
+    const total = weights.reduce((sum, w) => sum + w, 0);
+    const grid = [];
+    for (let y = 0; y < size; y += 1) {
+        const row = [];
+        for (let x = 0; x < size; x += 1) {
+            let pick = rand() * total;
+            let index = 0;
+            for (; index < weights.length - 1; index += 1) {
+                pick -= weights[index] ?? 0;
+                if (pick < 0)
+                    break;
+            }
+            row.push(palette[index] ?? palette[0] ?? "#000");
+        }
+        grid.push(row);
+    }
+    return grid;
+}
+function gridToSvg(grid) {
+    const height = grid.length;
+    const width = grid[0]?.length ?? 0;
+    const paths = new Map();
+    grid.forEach((row, y) => {
+        let x = 0;
+        while (x < row.length) {
+            const color = row[x] ?? "";
+            let run = 1;
+            while (row[x + run] === color)
+                run += 1;
+            paths.set(color, `${paths.get(color) ?? ""}M${x} ${y}h${run}v1h-${run}z`);
+            x += run;
+        }
+    });
+    const body = [...paths.entries()].map(([fill, d]) => `<path fill='${fill}' d='${d}'/>`).join("");
+    return `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${width} ${height}' shape-rendering='crispEdges'>${body}</svg>`;
+}
+function toDataUri(svg) {
+    const encoded = svg.replace(/#/g, "%23").replace(/</g, "%3C").replace(/>/g, "%3E");
+    return `url("data:image/svg+xml,${encoded}")`;
+}
+function stone() {
+    return noiseGrid(16, ["#6E6E6E", "#7A7A7A", "#626262", "#858585"], [5, 4, 2, 1], 7);
+}
+function deepslate() {
+    const grid = noiseGrid(16, ["#2C2C2E", "#333336", "#252527", "#3A3A3D"], [5, 3, 3, 1], 11);
+    // Horizontal strata — deepslate's layered look.
+    [3, 8, 13].forEach((y) => {
+        grid[y] = grid[y]?.map((c, x) => ((x + y) % 5 === 0 ? c : "#212123")) ?? [];
+    });
+    return grid;
+}
+function dirt() {
+    return noiseGrid(16, [colors.dirt, "#6B4A32", "#8A6343", "#5A3E2A"], [5, 3, 2, 1], 23);
+}
+function grassTop() {
+    const grid = dirt();
+    const rand = mulberry32(42);
+    for (let x = 0; x < 16; x += 1) {
+        const depth = 3 + Math.floor(rand() * 3);
+        for (let y = 0; y < depth; y += 1) {
+            const row = grid[y];
+            if (row)
+                row[x] = rand() > 0.7 ? colors.grassDark : rand() > 0.5 ? colors.grassLight : colors.grass;
+        }
+    }
+    return grid;
+}
+function planks() {
+    const grid = noiseGrid(16, [colors.wood, "#7D5126", "#966532"], [6, 3, 2], 5);
+    [3, 7, 11, 15].forEach((y) => {
+        grid[y] = new Array(16).fill(colors.woodDark);
+    });
+    // Staggered plank seams.
+    [
+        [1, 5],
+        [5, 12],
+        [9, 2],
+        [13, 9],
+    ].forEach(([y, x]) => {
+        for (let dy = 0; dy < 3; dy += 1) {
+            const row = grid[(y ?? 0) + dy];
+            if (row)
+                row[x ?? 0] = colors.woodDark;
+        }
+    });
+    return grid;
+}
+function netherrack() {
+    return noiseGrid(16, ["#6A2626", "#7E2F2F", "#582020", "#8F3A35"], [5, 3, 2, 1], 66);
+}
+function endStone() {
+    return noiseGrid(16, ["#2A2036", "#30253E", "#241B2F", "#3A2D4B"], [5, 3, 3, 1], 99);
+}
+function obsidian() {
+    return noiseGrid(16, [colors.obsidian, "#1C1426", "#2F2240", "#3E2D54"], [6, 3, 2, 1], 13);
+}
+export const textures = {
+    stone: toDataUri(gridToSvg(stone())),
+    deepslate: toDataUri(gridToSvg(deepslate())),
+    dirt: toDataUri(gridToSvg(dirt())),
+    grass: toDataUri(gridToSvg(grassTop())),
+    planks: toDataUri(gridToSvg(planks())),
+    netherrack: toDataUri(gridToSvg(netherrack())),
+    endStone: toDataUri(gridToSvg(endStone())),
+    obsidian: toDataUri(gridToSvg(obsidian())),
+};

package/dist/typography.d.ts

@@ -0,0 +1,65 @@
+export declare const fontFamily: {
+    /** Pixel display font for headings, buttons, labels and counters. */
+    readonly display: "\"Silkscreen\", \"Press Start 2P\", \"Courier New\", ui-monospace, monospace";
+    /** Readable body font. Pixel fonts are reserved for short labels (PRD §5.3). */
+    readonly body: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"Helvetica Neue\", Arial, sans-serif";
+    readonly mono: "ui-monospace, \"SFMono-Regular\", Menlo, Consolas, monospace";
+};
+export declare const fontSize: {
+    readonly xs: "11px";
+    readonly sm: "12px";
+    readonly md: "14px";
+    readonly lg: "16px";
+    readonly xl: "20px";
+    readonly "2xl": "24px";
+    readonly "3xl": "32px";
+};
+export declare const fontWeight: {
+    readonly regular: "400";
+    readonly medium: "500";
+    readonly bold: "700";
+};
+export declare const lineHeight: {
+    readonly tight: "1.15";
+    readonly normal: "1.45";
+    readonly relaxed: "1.6";
+};
+export declare const letterSpacing: {
+    readonly normal: "0";
+    readonly wide: "0.04em";
+    readonly wider: "0.08em";
+};
+export declare const typography: {
+    readonly fontFamily: {
+        /** Pixel display font for headings, buttons, labels and counters. */
+        readonly display: "\"Silkscreen\", \"Press Start 2P\", \"Courier New\", ui-monospace, monospace";
+        /** Readable body font. Pixel fonts are reserved for short labels (PRD §5.3). */
+        readonly body: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"Helvetica Neue\", Arial, sans-serif";
+        readonly mono: "ui-monospace, \"SFMono-Regular\", Menlo, Consolas, monospace";
+    };
+    readonly fontSize: {
+        readonly xs: "11px";
+        readonly sm: "12px";
+        readonly md: "14px";
+        readonly lg: "16px";
+        readonly xl: "20px";
+        readonly "2xl": "24px";
+        readonly "3xl": "32px";
+    };
+    readonly fontWeight: {
+        readonly regular: "400";
+        readonly medium: "500";
+        readonly bold: "700";
+    };
+    readonly lineHeight: {
+        readonly tight: "1.15";
+        readonly normal: "1.45";
+        readonly relaxed: "1.6";
+    };
+    readonly letterSpacing: {
+        readonly normal: "0";
+        readonly wide: "0.04em";
+        readonly wider: "0.08em";
+    };
+};
+//# sourceMappingURL=typography.d.ts.map

package/dist/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;IACrB,qEAAqE;;IAErE,gFAAgF;;;CAGxE,CAAC;AAEX,eAAO,MAAM,QAAQ;;;;;;;;CAQX,CAAC;AAEX,eAAO,MAAM,UAAU;;;;CAIb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;CAIb,CAAC;AAEX,eAAO,MAAM,aAAa;;;;CAIhB,CAAC;AAEX,eAAO,MAAM,UAAU;;QAnCrB,qEAAqE;;QAErE,gFAAgF;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCxE,CAAC"}

package/dist/typography.js

@@ -0,0 +1,38 @@
+export const fontFamily = {
+    /** Pixel display font for headings, buttons, labels and counters. */
+    display: '"Silkscreen", "Press Start 2P", "Courier New", ui-monospace, monospace',
+    /** Readable body font. Pixel fonts are reserved for short labels (PRD §5.3). */
+    body: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", "Helvetica Neue", Arial, sans-serif',
+    mono: 'ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace',
+};
+export const fontSize = {
+    xs: "11px",
+    sm: "12px",
+    md: "14px",
+    lg: "16px",
+    xl: "20px",
+    "2xl": "24px",
+    "3xl": "32px",
+};
+export const fontWeight = {
+    regular: "400",
+    medium: "500",
+    bold: "700",
+};
+export const lineHeight = {
+    tight: "1.15",
+    normal: "1.45",
+    relaxed: "1.6",
+};
+export const letterSpacing = {
+    normal: "0",
+    wide: "0.04em",
+    wider: "0.08em",
+};
+export const typography = {
+    fontFamily,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    letterSpacing,
+};

package/dist/zIndex.d.ts

@@ -0,0 +1,11 @@
+export declare const zIndex: {
+    readonly base: "0";
+    readonly raised: "1";
+    readonly dropdown: "100";
+    readonly sticky: "200";
+    readonly tooltip: "300";
+    readonly overlay: "400";
+    readonly modal: "500";
+    readonly toast: "600";
+};
+//# sourceMappingURL=zIndex.d.ts.map

package/dist/zIndex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zIndex.d.ts","sourceRoot":"","sources":["../src/zIndex.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAC"}

package/dist/zIndex.js

@@ -0,0 +1,10 @@
+export const zIndex = {
+    base: "0",
+    raised: "1",
+    dropdown: "100",
+    sticky: "200",
+    tooltip: "300",
+    overlay: "400",
+    modal: "500",
+    toast: "600",
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@malilion/block-ui-tokens",
+  "version": "0.1.0",
+  "description": "Design tokens (colors, spacing, typography, motion…) 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/tokens"
+  },
+  "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"
+    },
+    "./tokens.css": "./tokens.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "tokens.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "block-ui",
+    "design-tokens",
+    "pixel"
+  ],
+  "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/tokens.css

@@ -0,0 +1,256 @@
+/* Generated by @malilion/block-ui-tokens — do not edit by hand. Run `pnpm generate`. */
+:root {
+  --block-grass: #5d9b3d;
+  --block-grass-light: #7ebe55;
+  --block-grass-dark: #356b28;
+  --block-on-grass: #0f230a;
+  --block-dirt: #79553a;
+  --block-dirt-light: #98704f;
+  --block-dirt-dark: #553a27;
+  --block-on-dirt: #ffffff;
+  --block-wood: #8a5a2b;
+  --block-wood-light: #aa7843;
+  --block-wood-dark: #5e3c1c;
+  --block-on-wood: #ffffff;
+  --block-stone: #737373;
+  --block-stone-light: #959595;
+  --block-stone-dark: #414141;
+  --block-on-stone: #ffffff;
+  --block-deepslate: #292929;
+  --block-deepslate-light: #3b3b3b;
+  --block-deepslate-dark: #1a1a1a;
+  --block-on-deepslate: #ffffff;
+  --block-sand: #d8c78e;
+  --block-sand-light: #ede1b4;
+  --block-sand-dark: #a8955c;
+  --block-on-sand: #1f1a0b;
+  --block-water: #3b82c4;
+  --block-water-light: #62a3de;
+  --block-water-dark: #24568a;
+  --block-on-water: #050e18;
+  --block-diamond: #52d9d0;
+  --block-diamond-light: #a5f3ee;
+  --block-diamond-dark: #1e9b93;
+  --block-on-diamond: #0b1f1e;
+  --block-emerald: #35b84b;
+  --block-emerald-light: #71dd80;
+  --block-emerald-dark: #1e7a2f;
+  --block-on-emerald: #0b1f0e;
+  --block-gold: #f2c94c;
+  --block-gold-light: #fce48c;
+  --block-gold-dark: #b88a1b;
+  --block-on-gold: #2a1a05;
+  --block-redstone: #b52a24;
+  --block-redstone-light: #e0473f;
+  --block-redstone-dark: #7a1814;
+  --block-on-redstone: #ffffff;
+  --block-obsidian: #251b31;
+  --block-obsidian-light: #3e2d54;
+  --block-obsidian-dark: #140e1c;
+  --block-on-obsidian: #ffffff;
+  --block-nether: #702929;
+  --block-nether-light: #954040;
+  --block-nether-dark: #4a1919;
+  --block-on-nether: #ffffff;
+  --block-amethyst: #9a6bd6;
+  --block-amethyst-light: #be9bec;
+  --block-amethyst-dark: #6a44a0;
+  --block-on-amethyst: #160c24;
+  --block-lava: #e8772e;
+  --block-lava-light: #ffae4a;
+  --block-lava-dark: #a8461a;
+  --block-on-lava: #200c03;
+  --block-iron: #d8d8d8;
+  --block-iron-dark: #9c9c9c;
+  --block-coal: #2e2e2e;
+  --block-outline: #17191c;
+  --block-white: #ffffff;
+  --block-black: #000000;
+  --block-text-primary: #ffffff;
+  --block-text-secondary: #c9cdd2;
+  --block-text-disabled: #8a9097;
+  --block-bg: #1d2025;
+  --block-space-0: 0px;
+  --block-space-1: 4px;
+  --block-space-2: 8px;
+  --block-space-3: 12px;
+  --block-space-4: 16px;
+  --block-space-5: 20px;
+  --block-space-6: 24px;
+  --block-space-8: 32px;
+  --block-space-10: 40px;
+  --block-space-12: 48px;
+  --block-space-16: 64px;
+  --block-font-display: "Silkscreen", "Press Start 2P", "Courier New", ui-monospace, monospace;
+  --block-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
+  --block-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+  --block-font-size-xs: 11px;
+  --block-font-size-sm: 12px;
+  --block-font-size-md: 14px;
+  --block-font-size-lg: 16px;
+  --block-font-size-xl: 20px;
+  --block-font-size-2xl: 24px;
+  --block-font-size-3xl: 32px;
+  --block-font-weight-regular: 400;
+  --block-font-weight-medium: 500;
+  --block-font-weight-bold: 700;
+  --block-line-height-tight: 1.15;
+  --block-line-height-normal: 1.45;
+  --block-line-height-relaxed: 1.6;
+  --block-letter-spacing-normal: 0;
+  --block-letter-spacing-wide: 0.04em;
+  --block-letter-spacing-wider: 0.08em;
+  --block-radius-none: 0px;
+  --block-radius-xs: 2px;
+  --block-radius-sm: 4px;
+  --block-radius-md: 6px;
+  --block-border-width: 3px;
+  --block-border-width-thin: 2px;
+  --block-border-color: #17191c;
+  --block-shadow-bevel-light: rgba(255, 255, 255, 0.14);
+  --block-shadow-bevel-dark: rgba(0, 0, 0, 0.38);
+  --block-shadow-bevel: inset 3px 3px 0 rgba(255, 255, 255, 0.14), inset -3px -3px 0 rgba(0, 0, 0, 0.38);
+  --block-shadow-inset: inset 3px 3px 0 rgba(0, 0, 0, 0.38), inset -3px -3px 0 rgba(255, 255, 255, 0.1);
+  --block-shadow-drop: 4px 4px 0 rgba(0, 0, 0, 0.45);
+  --block-shadow-text: 2px 2px 0 rgba(0, 0, 0, 0.55);
+  --block-shadow-text-light: 1px 1px 0 rgba(255, 255, 255, 0.35);
+  --block-duration-instant: 80ms;
+  --block-duration-fast: 120ms;
+  --block-duration-normal: 160ms;
+  --block-ease-step: steps(2, end);
+  --block-ease-snap: cubic-bezier(0.2, 0, 0, 1);
+  --block-ease-linear: linear;
+  --block-size-slot-sm: 40px;
+  --block-size-slot-md: 52px;
+  --block-size-slot-lg: 64px;
+  --block-size-icon-sm: 16px;
+  --block-size-icon-md: 24px;
+  --block-size-icon-lg: 32px;
+  --block-size-control-sm: 32px;
+  --block-size-control-md: 40px;
+  --block-size-control-lg: 48px;
+  --block-size-sidebar: 248px;
+  --block-size-sidebar-collapsed: 72px;
+  --block-z-base: 0;
+  --block-z-raised: 1;
+  --block-z-dropdown: 100;
+  --block-z-sticky: 200;
+  --block-z-tooltip: 300;
+  --block-z-overlay: 400;
+  --block-z-modal: 500;
+  --block-z-toast: 600;
+  --block-texture-stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%236E6E6E' d='M0 0h2v1h-2zM5 0h1v1h-1zM7 0h1v1h-1zM10 0h2v1h-2zM14 0h2v1h-2zM0 1h1v1h-1zM2 1h1v1h-1zM4 1h1v1h-1zM6 1h4v1h-4zM12 1h1v1h-1zM5 2h3v1h-3zM9 2h2v1h-2zM12 2h1v1h-1zM2 3h4v1h-4zM7 3h2v1h-2zM10 3h2v1h-2zM2 4h1v1h-1zM13 4h1v1h-1zM15 4h1v1h-1zM10 5h4v1h-4zM1 6h1v1h-1zM6 6h1v1h-1zM12 6h1v1h-1zM0 7h3v1h-3zM12 7h1v1h-1zM0 8h1v1h-1zM4 8h2v1h-2zM8 8h5v1h-5zM15 8h1v1h-1zM0 9h2v1h-2zM4 9h2v1h-2zM11 9h1v1h-1zM13 9h1v1h-1zM0 10h2v1h-2zM6 10h1v1h-1zM8 10h2v1h-2zM12 10h1v1h-1zM0 11h1v1h-1zM2 11h1v1h-1zM13 11h1v1h-1zM15 11h1v1h-1zM2 12h3v1h-3zM8 12h3v1h-3zM0 13h1v1h-1zM2 13h1v1h-1zM4 13h1v1h-1zM11 13h1v1h-1zM14 13h1v1h-1zM5 14h3v1h-3zM9 14h1v1h-1zM14 14h1v1h-1zM3 15h1v1h-1zM7 15h2v1h-2zM10 15h2v1h-2zM13 15h1v1h-1zM15 15h1v1h-1z'/%3E%3Cpath fill='%23858585' d='M2 0h1v1h-1zM3 1h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM15 2h1v1h-1zM13 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM9 4h2v1h-2zM3 5h1v1h-1zM14 5h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM13 6h1v1h-1zM7 7h1v1h-1zM10 7h1v1h-1zM14 8h1v1h-1zM7 10h1v1h-1zM13 10h1v1h-1zM5 11h1v1h-1zM10 11h1v1h-1zM7 12h1v1h-1zM12 12h1v1h-1zM15 12h1v1h-1zM1 13h1v1h-1zM4 14h1v1h-1zM0 15h1v1h-1zM5 15h1v1h-1z'/%3E%3Cpath fill='%237A7A7A' d='M3 0h2v1h-2zM6 0h1v1h-1zM8 0h2v1h-2zM13 0h1v1h-1zM1 1h1v1h-1zM10 1h1v1h-1zM14 1h2v1h-2zM0 2h1v1h-1zM2 2h1v1h-1zM8 2h1v1h-1zM13 2h2v1h-2zM0 3h2v1h-2zM9 3h1v1h-1zM12 3h1v1h-1zM14 3h1v1h-1zM0 4h1v1h-1zM3 4h2v1h-2zM8 4h1v1h-1zM11 4h1v1h-1zM14 4h1v1h-1zM0 5h2v1h-2zM4 5h1v1h-1zM6 5h4v1h-4zM0 6h1v1h-1zM2 6h3v1h-3zM8 6h1v1h-1zM10 6h1v1h-1zM14 6h2v1h-2zM5 7h2v1h-2zM8 7h2v1h-2zM11 7h1v1h-1zM13 7h1v1h-1zM1 8h3v1h-3zM6 8h2v1h-2zM2 9h2v1h-2zM7 9h1v1h-1zM9 9h1v1h-1zM12 9h1v1h-1zM14 9h1v1h-1zM5 10h1v1h-1zM10 10h1v1h-1zM14 10h2v1h-2zM1 11h1v1h-1zM4 11h1v1h-1zM7 11h3v1h-3zM11 11h2v1h-2zM14 11h1v1h-1zM0 12h1v1h-1zM5 12h2v1h-2zM11 12h1v1h-1zM3 13h1v1h-1zM5 13h1v1h-1zM7 13h4v1h-4zM13 13h1v1h-1zM15 13h1v1h-1zM0 14h3v1h-3zM8 14h1v1h-1zM12 14h1v1h-1zM15 14h1v1h-1zM1 15h1v1h-1zM14 15h1v1h-1z'/%3E%3Cpath fill='%23626262' d='M12 0h1v1h-1zM5 1h1v1h-1zM11 1h1v1h-1zM13 1h1v1h-1zM4 2h1v1h-1zM11 2h1v1h-1zM6 3h1v1h-1zM15 3h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM12 4h1v1h-1zM2 5h1v1h-1zM5 5h1v1h-1zM15 5h1v1h-1zM9 6h1v1h-1zM11 6h1v1h-1zM3 7h2v1h-2zM14 7h2v1h-2zM13 8h1v1h-1zM6 9h1v1h-1zM8 9h1v1h-1zM10 9h1v1h-1zM15 9h1v1h-1zM2 10h3v1h-3zM11 10h1v1h-1zM3 11h1v1h-1zM6 11h1v1h-1zM1 12h1v1h-1zM13 12h2v1h-2zM6 13h1v1h-1zM12 13h1v1h-1zM3 14h1v1h-1zM10 14h2v1h-2zM13 14h1v1h-1zM2 15h1v1h-1zM4 15h1v1h-1zM6 15h1v1h-1zM9 15h1v1h-1zM12 15h1v1h-1z'/%3E%3C/svg%3E");
+  --block-texture-deepslate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23333336' d='M0 0h4v1h-4zM5 0h1v1h-1zM7 0h4v1h-4zM12 0h1v1h-1zM4 1h1v1h-1zM6 1h3v1h-3zM13 1h1v1h-1zM6 2h2v1h-2zM12 3h1v1h-1zM0 4h1v1h-1zM3 4h1v1h-1zM8 4h2v1h-2zM15 4h1v1h-1zM2 5h2v1h-2zM5 5h1v1h-1zM13 5h2v1h-2zM0 6h2v1h-2zM4 6h4v1h-4zM9 6h2v1h-2zM15 6h1v1h-1zM5 7h1v1h-1zM8 7h3v1h-3zM15 7h1v1h-1zM12 8h1v1h-1zM3 9h1v1h-1zM10 9h1v1h-1zM12 9h2v1h-2zM0 10h1v1h-1zM2 10h1v1h-1zM6 10h1v1h-1zM10 10h1v1h-1zM14 10h2v1h-2zM7 11h1v1h-1zM3 12h1v1h-1zM5 12h1v1h-1zM13 12h1v1h-1zM15 12h1v1h-1zM2 13h1v1h-1zM0 14h1v1h-1zM6 14h2v1h-2zM14 14h1v1h-1zM4 15h2v1h-2zM8 15h2v1h-2zM11 15h1v1h-1zM14 15h1v1h-1z'/%3E%3Cpath fill='%23252527' d='M4 0h1v1h-1zM11 0h1v1h-1zM13 0h2v1h-2zM9 1h3v1h-3zM0 2h1v1h-1zM4 2h1v1h-1zM8 2h1v1h-1zM10 2h2v1h-2zM15 2h1v1h-1zM1 4h1v1h-1zM5 4h1v1h-1zM14 4h1v1h-1zM7 5h1v1h-1zM12 5h1v1h-1zM2 6h1v1h-1zM12 6h1v1h-1zM4 7h1v1h-1zM12 7h1v1h-1zM2 8h1v1h-1zM7 8h1v1h-1zM4 9h2v1h-2zM3 10h1v1h-1zM12 10h1v1h-1zM3 11h1v1h-1zM5 11h1v1h-1zM8 11h3v1h-3zM13 11h1v1h-1zM2 12h1v1h-1zM4 12h1v1h-1zM6 12h2v1h-2zM9 12h1v1h-1zM11 14h1v1h-1zM3 15h1v1h-1z'/%3E%3Cpath fill='%232C2C2E' d='M6 0h1v1h-1zM15 0h1v1h-1zM0 1h4v1h-4zM5 1h1v1h-1zM12 1h1v1h-1zM14 1h2v1h-2zM2 2h2v1h-2zM5 2h1v1h-1zM9 2h1v1h-1zM12 2h3v1h-3zM2 3h1v1h-1zM7 3h1v1h-1zM2 4h1v1h-1zM4 4h1v1h-1zM6 4h2v1h-2zM10 4h3v1h-3zM0 5h1v1h-1zM4 5h1v1h-1zM6 5h1v1h-1zM8 5h4v1h-4zM15 5h1v1h-1zM8 6h1v1h-1zM13 6h2v1h-2zM1 7h1v1h-1zM3 7h1v1h-1zM6 7h2v1h-2zM11 7h1v1h-1zM13 7h2v1h-2zM0 9h2v1h-2zM8 9h2v1h-2zM11 9h1v1h-1zM14 9h2v1h-2zM1 10h1v1h-1zM4 10h2v1h-2zM7 10h1v1h-1zM9 10h1v1h-1zM11 10h1v1h-1zM13 10h1v1h-1zM0 11h3v1h-3zM4 11h1v1h-1zM6 11h1v1h-1zM11 11h2v1h-2zM14 11h2v1h-2zM0 12h2v1h-2zM8 12h1v1h-1zM10 12h3v1h-3zM14 12h1v1h-1zM7 13h1v1h-1zM1 14h4v1h-4zM8 14h1v1h-1zM10 14h1v1h-1zM12 14h2v1h-2zM15 14h1v1h-1zM0 15h3v1h-3zM7 15h1v1h-1zM10 15h1v1h-1zM13 15h1v1h-1zM15 15h1v1h-1z'/%3E%3Cpath fill='%233A3A3D' d='M1 2h1v1h-1zM13 4h1v1h-1zM1 5h1v1h-1zM3 6h1v1h-1zM11 6h1v1h-1zM0 7h1v1h-1zM2 7h1v1h-1zM2 9h1v1h-1zM6 9h2v1h-2zM8 10h1v1h-1zM12 13h1v1h-1zM5 14h1v1h-1zM9 14h1v1h-1zM6 15h1v1h-1zM12 15h1v1h-1z'/%3E%3Cpath fill='%23212123' d='M0 3h2v1h-2zM3 3h4v1h-4zM8 3h4v1h-4zM13 3h3v1h-3zM0 8h2v1h-2zM3 8h4v1h-4zM8 8h4v1h-4zM13 8h3v1h-3zM0 13h2v1h-2zM3 13h4v1h-4zM8 13h4v1h-4zM13 13h3v1h-3z'/%3E%3C/svg%3E");
+  --block-texture-dirt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%2379553A' d='M0 0h2v1h-2zM3 0h3v1h-3zM9 0h1v1h-1zM11 0h2v1h-2zM1 1h2v1h-2zM5 1h1v1h-1zM7 1h2v1h-2zM10 1h1v1h-1zM12 1h1v1h-1zM5 2h2v1h-2zM12 2h1v1h-1zM14 2h2v1h-2zM1 3h1v1h-1zM5 3h1v1h-1zM9 3h5v1h-5zM15 3h1v1h-1zM3 4h2v1h-2zM7 4h2v1h-2zM13 4h2v1h-2zM1 5h4v1h-4zM7 5h1v1h-1zM10 5h1v1h-1zM1 6h2v1h-2zM10 6h1v1h-1zM12 6h1v1h-1zM15 6h1v1h-1zM0 7h1v1h-1zM2 7h5v1h-5zM9 7h1v1h-1zM12 7h2v1h-2zM15 7h1v1h-1zM3 8h3v1h-3zM7 8h1v1h-1zM10 8h1v1h-1zM13 8h1v1h-1zM0 9h2v1h-2zM5 9h3v1h-3zM9 9h1v1h-1zM13 9h1v1h-1zM2 10h1v1h-1zM4 10h1v1h-1zM7 10h1v1h-1zM12 10h3v1h-3zM2 11h2v1h-2zM5 11h3v1h-3zM9 11h1v1h-1zM11 11h1v1h-1zM13 11h3v1h-3zM2 12h5v1h-5zM8 12h1v1h-1zM10 12h1v1h-1zM13 12h1v1h-1zM15 12h1v1h-1zM1 13h1v1h-1zM3 13h1v1h-1zM5 13h3v1h-3zM9 13h1v1h-1zM13 13h1v1h-1zM15 13h1v1h-1zM0 14h6v1h-6zM9 14h1v1h-1zM12 14h1v1h-1zM1 15h2v1h-2zM6 15h1v1h-1zM10 15h2v1h-2z'/%3E%3Cpath fill='%236B4A32' d='M2 0h1v1h-1zM6 0h1v1h-1zM10 0h1v1h-1zM15 0h1v1h-1zM3 1h1v1h-1zM11 1h1v1h-1zM13 1h1v1h-1zM2 2h1v1h-1zM4 2h1v1h-1zM7 2h1v1h-1zM11 2h1v1h-1zM2 3h1v1h-1zM6 3h2v1h-2zM14 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM6 4h1v1h-1zM12 4h1v1h-1zM15 4h1v1h-1zM0 5h1v1h-1zM5 5h1v1h-1zM8 5h2v1h-2zM12 5h2v1h-2zM4 6h6v1h-6zM14 6h1v1h-1zM8 7h1v1h-1zM10 7h1v1h-1zM14 7h1v1h-1zM0 8h3v1h-3zM6 8h1v1h-1zM8 8h2v1h-2zM15 8h1v1h-1zM2 9h3v1h-3zM10 9h1v1h-1zM14 9h1v1h-1zM0 10h1v1h-1zM3 10h1v1h-1zM8 10h3v1h-3zM0 11h1v1h-1zM8 11h1v1h-1zM1 12h1v1h-1zM9 12h1v1h-1zM12 12h1v1h-1zM0 13h1v1h-1zM10 13h2v1h-2zM6 14h1v1h-1zM13 14h1v1h-1zM4 15h2v1h-2zM7 15h3v1h-3zM12 15h3v1h-3z'/%3E%3Cpath fill='%235A3E2A' d='M7 0h1v1h-1zM13 0h1v1h-1zM4 1h1v1h-1zM14 1h1v1h-1zM1 2h1v1h-1zM9 2h1v1h-1zM1 4h1v1h-1zM6 5h1v1h-1zM11 5h1v1h-1zM14 5h1v1h-1zM13 6h1v1h-1zM1 7h1v1h-1zM11 7h1v1h-1zM12 8h1v1h-1zM1 10h1v1h-1zM1 11h1v1h-1zM12 11h1v1h-1zM4 13h1v1h-1zM8 13h1v1h-1zM12 13h1v1h-1zM8 14h1v1h-1zM11 14h1v1h-1z'/%3E%3Cpath fill='%238A6343' d='M8 0h1v1h-1zM14 0h1v1h-1zM0 1h1v1h-1zM6 1h1v1h-1zM9 1h1v1h-1zM15 1h1v1h-1zM0 2h1v1h-1zM3 2h1v1h-1zM8 2h1v1h-1zM10 2h1v1h-1zM13 2h1v1h-1zM0 3h1v1h-1zM3 3h2v1h-2zM8 3h1v1h-1zM5 4h1v1h-1zM9 4h3v1h-3zM15 5h1v1h-1zM0 6h1v1h-1zM3 6h1v1h-1zM11 6h1v1h-1zM7 7h1v1h-1zM11 8h1v1h-1zM14 8h1v1h-1zM8 9h1v1h-1zM11 9h2v1h-2zM15 9h1v1h-1zM5 10h2v1h-2zM11 10h1v1h-1zM15 10h1v1h-1zM4 11h1v1h-1zM10 11h1v1h-1zM0 12h1v1h-1zM7 12h1v1h-1zM11 12h1v1h-1zM14 12h1v1h-1zM2 13h1v1h-1zM14 13h1v1h-1zM7 14h1v1h-1zM10 14h1v1h-1zM14 14h2v1h-2zM0 15h1v1h-1zM3 15h1v1h-1zM15 15h1v1h-1z'/%3E%3C/svg%3E");
+  --block-texture-grass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%237EBE55' d='M0 0h2v1h-2zM3 0h1v1h-1zM9 0h1v1h-1zM11 0h1v1h-1zM14 0h2v1h-2zM5 1h1v1h-1zM7 1h3v1h-3zM13 1h1v1h-1zM2 2h2v1h-2zM6 2h1v1h-1zM8 2h1v1h-1zM11 2h1v1h-1zM15 2h1v1h-1zM0 3h2v1h-2zM4 3h1v1h-1zM6 3h1v1h-1zM9 3h1v1h-1zM12 3h3v1h-3zM9 4h1v1h-1zM12 4h2v1h-2z'/%3E%3Cpath fill='%235D9B3D' d='M2 0h1v1h-1zM5 0h2v1h-2zM8 0h1v1h-1zM10 0h1v1h-1zM13 0h1v1h-1zM0 1h1v1h-1zM3 1h2v1h-2zM6 1h1v1h-1zM10 1h1v1h-1zM12 1h1v1h-1zM14 1h2v1h-2zM0 2h2v1h-2zM4 2h1v1h-1zM7 2h1v1h-1zM13 2h1v1h-1zM2 3h1v1h-1zM10 3h2v1h-2zM11 4h1v1h-1zM15 4h1v1h-1z'/%3E%3Cpath fill='%23356B28' d='M4 0h1v1h-1zM7 0h1v1h-1zM12 0h1v1h-1zM1 1h2v1h-2zM11 1h1v1h-1zM5 2h1v1h-1zM9 2h2v1h-2zM12 2h1v1h-1zM14 2h1v1h-1zM15 3h1v1h-1z'/%3E%3Cpath fill='%238A6343' d='M3 3h1v1h-1zM8 3h1v1h-1zM5 4h1v1h-1zM10 4h1v1h-1zM15 5h1v1h-1zM0 6h1v1h-1zM3 6h1v1h-1zM11 6h1v1h-1zM7 7h1v1h-1zM11 8h1v1h-1zM14 8h1v1h-1zM8 9h1v1h-1zM11 9h2v1h-2zM15 9h1v1h-1zM5 10h2v1h-2zM11 10h1v1h-1zM15 10h1v1h-1zM4 11h1v1h-1zM10 11h1v1h-1zM0 12h1v1h-1zM7 12h1v1h-1zM11 12h1v1h-1zM14 12h1v1h-1zM2 13h1v1h-1zM14 13h1v1h-1zM7 14h1v1h-1zM10 14h1v1h-1zM14 14h2v1h-2zM0 15h1v1h-1zM3 15h1v1h-1zM15 15h1v1h-1z'/%3E%3Cpath fill='%2379553A' d='M5 3h1v1h-1zM3 4h2v1h-2zM7 4h2v1h-2zM14 4h1v1h-1zM1 5h4v1h-4zM7 5h1v1h-1zM10 5h1v1h-1zM1 6h2v1h-2zM10 6h1v1h-1zM12 6h1v1h-1zM15 6h1v1h-1zM0 7h1v1h-1zM2 7h5v1h-5zM9 7h1v1h-1zM12 7h2v1h-2zM15 7h1v1h-1zM3 8h3v1h-3zM7 8h1v1h-1zM10 8h1v1h-1zM13 8h1v1h-1zM0 9h2v1h-2zM5 9h3v1h-3zM9 9h1v1h-1zM13 9h1v1h-1zM2 10h1v1h-1zM4 10h1v1h-1zM7 10h1v1h-1zM12 10h3v1h-3zM2 11h2v1h-2zM5 11h3v1h-3zM9 11h1v1h-1zM11 11h1v1h-1zM13 11h3v1h-3zM2 12h5v1h-5zM8 12h1v1h-1zM10 12h1v1h-1zM13 12h1v1h-1zM15 12h1v1h-1zM1 13h1v1h-1zM3 13h1v1h-1zM5 13h3v1h-3zM9 13h1v1h-1zM13 13h1v1h-1zM15 13h1v1h-1zM0 14h6v1h-6zM9 14h1v1h-1zM12 14h1v1h-1zM1 15h2v1h-2zM6 15h1v1h-1zM10 15h2v1h-2z'/%3E%3Cpath fill='%236B4A32' d='M7 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM6 4h1v1h-1zM0 5h1v1h-1zM5 5h1v1h-1zM8 5h2v1h-2zM12 5h2v1h-2zM4 6h6v1h-6zM14 6h1v1h-1zM8 7h1v1h-1zM10 7h1v1h-1zM14 7h1v1h-1zM0 8h3v1h-3zM6 8h1v1h-1zM8 8h2v1h-2zM15 8h1v1h-1zM2 9h3v1h-3zM10 9h1v1h-1zM14 9h1v1h-1zM0 10h1v1h-1zM3 10h1v1h-1zM8 10h3v1h-3zM0 11h1v1h-1zM8 11h1v1h-1zM1 12h1v1h-1zM9 12h1v1h-1zM12 12h1v1h-1zM0 13h1v1h-1zM10 13h2v1h-2zM6 14h1v1h-1zM13 14h1v1h-1zM4 15h2v1h-2zM7 15h3v1h-3zM12 15h3v1h-3z'/%3E%3Cpath fill='%235A3E2A' d='M1 4h1v1h-1zM6 5h1v1h-1zM11 5h1v1h-1zM14 5h1v1h-1zM13 6h1v1h-1zM1 7h1v1h-1zM11 7h1v1h-1zM12 8h1v1h-1zM1 10h1v1h-1zM1 11h1v1h-1zM12 11h1v1h-1zM4 13h1v1h-1zM8 13h1v1h-1zM12 13h1v1h-1zM8 14h1v1h-1zM11 14h1v1h-1z'/%3E%3C/svg%3E");
+  --block-texture-planks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%237D5126' d='M0 0h2v1h-2zM3 0h1v1h-1zM5 0h2v1h-2zM10 0h3v1h-3zM2 1h2v1h-2zM6 1h1v1h-1zM6 2h1v1h-1zM9 2h2v1h-2zM12 2h2v1h-2zM15 2h1v1h-1zM2 4h1v1h-1zM7 4h1v1h-1zM13 4h1v1h-1zM15 4h1v1h-1zM6 5h1v1h-1zM10 5h2v1h-2zM1 6h2v1h-2zM4 6h1v1h-1zM6 6h1v1h-1zM14 6h1v1h-1zM0 8h1v1h-1zM2 8h2v1h-2zM8 8h1v1h-1zM10 8h1v1h-1zM12 8h1v1h-1zM5 9h2v1h-2zM9 9h1v1h-1zM13 9h1v1h-1zM0 10h1v1h-1zM6 10h5v1h-5zM12 10h1v1h-1zM1 12h1v1h-1zM13 12h3v1h-3zM7 13h1v1h-1zM2 14h3v1h-3zM11 14h1v1h-1zM14 14h1v1h-1z'/%3E%3Cpath fill='%238A5A2B' d='M2 0h1v1h-1zM4 0h1v1h-1zM7 0h1v1h-1zM9 0h1v1h-1zM13 0h3v1h-3zM1 1h1v1h-1zM4 1h1v1h-1zM7 1h4v1h-4zM12 1h2v1h-2zM15 1h1v1h-1zM0 2h1v1h-1zM2 2h3v1h-3zM8 2h1v1h-1zM11 2h1v1h-1zM14 2h1v1h-1zM0 4h2v1h-2zM3 4h2v1h-2zM6 4h1v1h-1zM9 4h2v1h-2zM0 5h6v1h-6zM7 5h3v1h-3zM13 5h2v1h-2zM0 6h1v1h-1zM3 6h1v1h-1zM7 6h5v1h-5zM13 6h1v1h-1zM15 6h1v1h-1zM1 8h1v1h-1zM4 8h4v1h-4zM13 8h3v1h-3zM0 9h2v1h-2zM3 9h2v1h-2zM7 9h1v1h-1zM11 9h2v1h-2zM14 9h2v1h-2zM1 10h1v1h-1zM3 10h3v1h-3zM11 10h1v1h-1zM13 10h3v1h-3zM0 12h1v1h-1zM2 12h2v1h-2zM5 12h5v1h-5zM11 12h2v1h-2zM0 13h3v1h-3zM5 13h2v1h-2zM8 13h1v1h-1zM10 13h2v1h-2zM13 13h3v1h-3zM1 14h1v1h-1zM5 14h2v1h-2zM8 14h1v1h-1zM10 14h1v1h-1zM12 14h2v1h-2z'/%3E%3Cpath fill='%23966532' d='M8 0h1v1h-1zM0 1h1v1h-1zM11 1h1v1h-1zM14 1h1v1h-1zM1 2h1v1h-1zM7 2h1v1h-1zM5 4h1v1h-1zM8 4h1v1h-1zM11 4h2v1h-2zM14 4h1v1h-1zM15 5h1v1h-1zM5 6h1v1h-1zM9 8h1v1h-1zM11 8h1v1h-1zM8 9h1v1h-1zM10 9h1v1h-1zM4 12h1v1h-1zM10 12h1v1h-1zM3 13h2v1h-2zM12 13h1v1h-1zM0 14h1v1h-1zM7 14h1v1h-1zM15 14h1v1h-1z'/%3E%3Cpath fill='%235E3C1C' d='M5 1h1v1h-1zM5 2h1v1h-1zM0 3h16v1h-16zM12 5h1v1h-1zM12 6h1v1h-1zM0 7h16v1h-16zM2 9h1v1h-1zM2 10h1v1h-1zM0 11h16v1h-16zM9 13h1v1h-1zM9 14h1v1h-1zM0 15h16v1h-16z'/%3E%3C/svg%3E");
+  --block-texture-netherrack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%236A2626' d='M0 0h3v1h-3zM6 0h2v1h-2zM9 0h3v1h-3zM14 0h1v1h-1zM1 1h1v1h-1zM4 1h2v1h-2zM8 1h3v1h-3zM12 1h2v1h-2zM15 1h1v1h-1zM0 2h4v1h-4zM9 2h1v1h-1zM13 2h1v1h-1zM1 3h4v1h-4zM6 3h3v1h-3zM12 3h2v1h-2zM0 4h2v1h-2zM4 4h1v1h-1zM6 4h4v1h-4zM11 4h5v1h-5zM5 5h2v1h-2zM8 5h1v1h-1zM10 5h3v1h-3zM14 5h2v1h-2zM0 6h2v1h-2zM3 6h2v1h-2zM6 6h2v1h-2zM9 6h2v1h-2zM12 6h4v1h-4zM1 7h2v1h-2zM6 7h1v1h-1zM9 7h3v1h-3zM13 7h1v1h-1zM15 7h1v1h-1zM0 8h1v1h-1zM7 8h4v1h-4zM12 8h1v1h-1zM14 8h1v1h-1zM2 9h1v1h-1zM4 9h1v1h-1zM6 9h1v1h-1zM8 9h3v1h-3zM14 9h2v1h-2zM3 10h4v1h-4zM8 10h1v1h-1zM10 10h4v1h-4zM0 11h1v1h-1zM5 11h4v1h-4zM10 11h2v1h-2zM13 11h1v1h-1zM0 12h1v1h-1zM2 12h2v1h-2zM5 12h2v1h-2zM8 12h3v1h-3zM12 12h2v1h-2zM0 13h2v1h-2zM5 13h2v1h-2zM10 13h3v1h-3zM0 14h1v1h-1zM2 14h2v1h-2zM7 14h1v1h-1zM9 14h1v1h-1zM11 14h1v1h-1zM0 15h4v1h-4zM5 15h1v1h-1zM11 15h1v1h-1zM14 15h2v1h-2z'/%3E%3Cpath fill='%23582020' d='M3 0h1v1h-1zM5 0h1v1h-1zM15 0h1v1h-1zM7 1h1v1h-1zM8 2h1v1h-1zM11 2h1v1h-1zM15 2h1v1h-1zM5 3h1v1h-1zM9 3h1v1h-1zM11 3h1v1h-1zM14 3h1v1h-1zM1 5h1v1h-1zM7 5h1v1h-1zM0 7h1v1h-1zM6 8h1v1h-1zM11 8h1v1h-1zM13 8h1v1h-1zM15 8h1v1h-1zM0 9h1v1h-1zM3 9h1v1h-1zM5 9h1v1h-1zM7 9h1v1h-1zM11 9h1v1h-1zM15 10h1v1h-1zM2 11h1v1h-1zM9 11h1v1h-1zM14 11h1v1h-1zM15 12h1v1h-1zM2 13h1v1h-1zM4 13h1v1h-1zM9 13h1v1h-1zM5 14h1v1h-1zM8 14h1v1h-1zM14 14h2v1h-2zM7 15h4v1h-4z'/%3E%3Cpath fill='%237E2F2F' d='M4 0h1v1h-1zM8 0h1v1h-1zM13 0h1v1h-1zM2 1h1v1h-1zM6 1h1v1h-1zM11 1h1v1h-1zM14 1h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM10 2h1v1h-1zM12 2h1v1h-1zM14 2h1v1h-1zM0 3h1v1h-1zM15 3h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM3 5h2v1h-2zM9 5h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM11 6h1v1h-1zM3 7h3v1h-3zM7 7h2v1h-2zM14 7h1v1h-1zM2 8h3v1h-3zM0 10h3v1h-3zM7 10h1v1h-1zM9 10h1v1h-1zM1 11h1v1h-1zM3 11h1v1h-1zM12 11h1v1h-1zM15 11h1v1h-1zM1 12h1v1h-1zM4 12h1v1h-1zM7 12h1v1h-1zM11 12h1v1h-1zM14 12h1v1h-1zM3 13h1v1h-1zM7 13h2v1h-2zM13 13h3v1h-3zM1 14h1v1h-1zM4 14h1v1h-1zM10 14h1v1h-1zM12 14h2v1h-2zM4 15h1v1h-1zM6 15h1v1h-1zM12 15h1v1h-1z'/%3E%3Cpath fill='%238F3A35' d='M12 0h1v1h-1zM0 1h1v1h-1zM3 1h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM10 3h1v1h-1zM3 4h1v1h-1zM2 5h1v1h-1zM13 5h1v1h-1zM8 6h1v1h-1zM12 7h1v1h-1zM1 8h1v1h-1zM5 8h1v1h-1zM1 9h1v1h-1zM12 9h2v1h-2zM14 10h1v1h-1zM4 11h1v1h-1zM6 14h1v1h-1zM13 15h1v1h-1z'/%3E%3C/svg%3E");
+  --block-texture-end-stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%232A2036' d='M0 0h1v1h-1zM4 0h1v1h-1zM6 0h3v1h-3zM10 0h3v1h-3zM14 0h2v1h-2zM3 1h1v1h-1zM6 1h1v1h-1zM10 1h1v1h-1zM12 1h1v1h-1zM15 1h1v1h-1zM0 2h2v1h-2zM3 2h1v1h-1zM5 2h1v1h-1zM11 2h1v1h-1zM15 2h1v1h-1zM0 3h1v1h-1zM4 3h1v1h-1zM9 3h1v1h-1zM13 3h1v1h-1zM15 3h1v1h-1zM0 4h1v1h-1zM2 4h2v1h-2zM5 4h1v1h-1zM7 4h1v1h-1zM11 4h1v1h-1zM14 4h1v1h-1zM2 5h3v1h-3zM8 5h1v1h-1zM10 5h2v1h-2zM13 5h1v1h-1zM3 6h2v1h-2zM8 6h1v1h-1zM10 6h2v1h-2zM13 6h1v1h-1zM15 6h1v1h-1zM0 7h1v1h-1zM3 7h1v1h-1zM9 7h2v1h-2zM1 8h1v1h-1zM3 8h1v1h-1zM9 8h2v1h-2zM13 8h1v1h-1zM0 9h2v1h-2zM3 9h1v1h-1zM6 9h1v1h-1zM11 9h5v1h-5zM2 10h1v1h-1zM4 10h1v1h-1zM7 10h1v1h-1zM10 10h5v1h-5zM4 11h1v1h-1zM8 11h1v1h-1zM11 11h1v1h-1zM13 11h1v1h-1zM1 12h2v1h-2zM4 12h1v1h-1zM13 12h3v1h-3zM7 13h2v1h-2zM13 13h1v1h-1zM15 13h1v1h-1zM0 14h1v1h-1zM2 14h1v1h-1zM4 14h1v1h-1zM6 14h1v1h-1zM10 14h2v1h-2zM0 15h1v1h-1zM2 15h1v1h-1zM4 15h4v1h-4zM9 15h1v1h-1zM11 15h1v1h-1zM13 15h2v1h-2z'/%3E%3Cpath fill='%23241B2F' d='M1 0h1v1h-1zM3 0h1v1h-1zM5 0h1v1h-1zM9 0h1v1h-1zM13 0h1v1h-1zM1 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM14 1h1v1h-1zM2 2h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM9 2h2v1h-2zM13 2h1v1h-1zM5 3h2v1h-2zM8 3h1v1h-1zM10 3h1v1h-1zM12 3h1v1h-1zM14 3h1v1h-1zM4 4h1v1h-1zM6 4h1v1h-1zM10 4h1v1h-1zM13 4h1v1h-1zM0 5h1v1h-1zM5 5h1v1h-1zM7 5h1v1h-1zM12 5h1v1h-1zM14 5h1v1h-1zM0 6h3v1h-3zM5 6h1v1h-1zM7 6h1v1h-1zM2 7h1v1h-1zM6 7h2v1h-2zM14 7h2v1h-2zM0 8h1v1h-1zM2 8h1v1h-1zM5 8h1v1h-1zM11 8h2v1h-2zM15 8h1v1h-1zM2 9h1v1h-1zM7 9h1v1h-1zM9 9h1v1h-1zM0 10h1v1h-1zM3 10h1v1h-1zM8 10h1v1h-1zM0 11h1v1h-1zM2 11h1v1h-1zM5 11h1v1h-1zM7 11h1v1h-1zM15 11h1v1h-1zM5 12h1v1h-1zM7 12h2v1h-2zM12 12h1v1h-1zM3 13h3v1h-3zM10 13h2v1h-2zM5 14h1v1h-1zM9 14h1v1h-1zM14 14h1v1h-1zM10 15h1v1h-1zM15 15h1v1h-1z'/%3E%3Cpath fill='%2330253E' d='M2 0h1v1h-1zM0 1h1v1h-1zM2 1h1v1h-1zM4 1h1v1h-1zM9 1h1v1h-1zM13 1h1v1h-1zM7 2h2v1h-2zM12 2h1v1h-1zM14 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1zM7 3h1v1h-1zM11 3h1v1h-1zM1 4h1v1h-1zM8 4h2v1h-2zM15 4h1v1h-1zM6 5h1v1h-1zM9 5h1v1h-1zM6 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM1 7h1v1h-1zM4 7h2v1h-2zM8 7h1v1h-1zM12 7h2v1h-2zM8 8h1v1h-1zM14 8h1v1h-1zM5 9h1v1h-1zM1 10h1v1h-1zM5 10h2v1h-2zM9 10h1v1h-1zM15 10h1v1h-1zM1 11h1v1h-1zM3 11h1v1h-1zM6 11h1v1h-1zM9 11h2v1h-2zM12 11h1v1h-1zM14 11h1v1h-1zM0 12h1v1h-1zM3 12h1v1h-1zM6 12h1v1h-1zM9 12h3v1h-3zM1 13h2v1h-2zM9 13h1v1h-1zM12 13h1v1h-1zM14 13h1v1h-1zM1 14h1v1h-1zM3 14h1v1h-1zM7 14h2v1h-2zM12 14h2v1h-2zM15 14h1v1h-1zM1 15h1v1h-1zM3 15h1v1h-1zM8 15h1v1h-1zM12 15h1v1h-1z'/%3E%3Cpath fill='%233A2D4B' d='M8 1h1v1h-1zM11 1h1v1h-1zM2 3h1v1h-1zM12 4h1v1h-1zM1 5h1v1h-1zM15 5h1v1h-1zM9 6h1v1h-1zM11 7h1v1h-1zM4 8h1v1h-1zM6 8h2v1h-2zM4 9h1v1h-1zM8 9h1v1h-1zM10 9h1v1h-1zM0 13h1v1h-1zM6 13h1v1h-1z'/%3E%3C/svg%3E");
+  --block-texture-obsidian: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%231C1426' d='M0 0h1v1h-1zM8 0h1v1h-1zM10 0h1v1h-1zM14 0h1v1h-1zM0 1h2v1h-2zM3 1h1v1h-1zM5 1h1v1h-1zM8 1h1v1h-1zM1 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM15 3h1v1h-1zM4 4h1v1h-1zM6 4h3v1h-3zM10 4h1v1h-1zM12 4h1v1h-1zM15 4h1v1h-1zM2 5h1v1h-1zM4 6h1v1h-1zM9 6h1v1h-1zM12 6h1v1h-1zM15 6h1v1h-1zM6 7h1v1h-1zM0 8h1v1h-1zM4 8h1v1h-1zM8 8h1v1h-1zM11 8h2v1h-2zM3 9h1v1h-1zM5 9h1v1h-1zM10 9h1v1h-1zM12 9h1v1h-1zM0 10h1v1h-1zM2 10h1v1h-1zM5 10h2v1h-2zM8 10h1v1h-1zM12 10h1v1h-1zM2 11h1v1h-1zM4 11h1v1h-1zM6 11h2v1h-2zM11 11h1v1h-1zM15 11h1v1h-1zM3 12h1v1h-1zM15 12h1v1h-1zM1 13h1v1h-1zM3 13h1v1h-1zM6 13h1v1h-1zM9 13h1v1h-1zM6 15h1v1h-1zM8 15h1v1h-1zM10 15h1v1h-1zM12 15h1v1h-1zM15 15h1v1h-1z'/%3E%3Cpath fill='%23251B31' d='M1 0h7v1h-7zM12 0h2v1h-2zM15 0h1v1h-1zM2 1h1v1h-1zM4 1h1v1h-1zM6 1h2v1h-2zM9 1h6v1h-6zM0 2h1v1h-1zM2 2h3v1h-3zM6 2h1v1h-1zM8 2h6v1h-6zM15 2h1v1h-1zM0 3h1v1h-1zM2 3h3v1h-3zM8 3h3v1h-3zM12 3h3v1h-3zM2 4h2v1h-2zM14 4h1v1h-1zM0 5h2v1h-2zM3 5h3v1h-3zM7 5h1v1h-1zM10 5h1v1h-1zM13 5h3v1h-3zM0 6h4v1h-4zM6 6h1v1h-1zM10 6h2v1h-2zM13 6h1v1h-1zM4 7h1v1h-1zM7 7h3v1h-3zM11 7h5v1h-5zM6 8h2v1h-2zM10 8h1v1h-1zM14 8h1v1h-1zM1 9h1v1h-1zM4 9h1v1h-1zM7 9h1v1h-1zM9 9h1v1h-1zM11 9h1v1h-1zM14 9h1v1h-1zM3 10h2v1h-2zM7 10h1v1h-1zM9 10h1v1h-1zM13 10h2v1h-2zM3 11h1v1h-1zM5 11h1v1h-1zM8 11h2v1h-2zM13 11h2v1h-2zM0 12h3v1h-3zM4 12h2v1h-2zM7 12h1v1h-1zM10 12h1v1h-1zM13 12h2v1h-2zM0 13h1v1h-1zM2 13h1v1h-1zM4 13h2v1h-2zM7 13h2v1h-2zM10 13h6v1h-6zM6 14h7v1h-7zM1 15h3v1h-3zM9 15h1v1h-1zM11 15h1v1h-1zM13 15h1v1h-1z'/%3E%3Cpath fill='%232F2240' d='M9 0h1v1h-1zM11 0h1v1h-1zM15 1h1v1h-1zM1 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM11 3h1v1h-1zM0 4h1v1h-1zM5 4h1v1h-1zM11 4h1v1h-1zM13 4h1v1h-1zM6 5h1v1h-1zM9 5h1v1h-1zM11 5h2v1h-2zM5 6h1v1h-1zM7 6h1v1h-1zM14 6h1v1h-1zM0 7h4v1h-4zM5 7h1v1h-1zM10 7h1v1h-1zM5 8h1v1h-1zM9 8h1v1h-1zM13 8h1v1h-1zM15 8h1v1h-1zM0 9h1v1h-1zM6 9h1v1h-1zM8 9h1v1h-1zM15 9h1v1h-1zM1 10h1v1h-1zM10 10h2v1h-2zM15 10h1v1h-1zM0 11h1v1h-1zM12 11h1v1h-1zM9 12h1v1h-1zM11 12h2v1h-2zM0 14h2v1h-2zM4 14h2v1h-2zM15 14h1v1h-1zM4 15h1v1h-1zM7 15h1v1h-1zM14 15h1v1h-1z'/%3E%3Cpath fill='%233E2D54' d='M14 2h1v1h-1zM6 3h1v1h-1zM1 4h1v1h-1zM9 4h1v1h-1zM8 5h1v1h-1zM8 6h1v1h-1zM1 8h3v1h-3zM2 9h1v1h-1zM13 9h1v1h-1zM1 11h1v1h-1zM10 11h1v1h-1zM6 12h1v1h-1zM8 12h1v1h-1zM2 14h2v1h-2zM13 14h2v1h-2zM0 15h1v1h-1zM5 15h1v1h-1z'/%3E%3C/svg%3E");
+}
+
+[data-material="grass"] {
+  --block-mat: var(--block-grass);
+  --block-mat-light: var(--block-grass-light);
+  --block-mat-dark: var(--block-grass-dark);
+  --block-mat-on: var(--block-on-grass);
+  --block-mat-text-shadow: var(--block-shadow-text-light);
+}
+[data-material="dirt"] {
+  --block-mat: var(--block-dirt);
+  --block-mat-light: var(--block-dirt-light);
+  --block-mat-dark: var(--block-dirt-dark);
+  --block-mat-on: var(--block-on-dirt);
+  --block-mat-text-shadow: var(--block-shadow-text);
+}
+[data-material="wood"] {
+  --block-mat: var(--block-wood);
+  --block-mat-light: var(--block-wood-light);
+  --block-mat-dark: var(--block-wood-dark);
+  --block-mat-on: var(--block-on-wood);
+  --block-mat-text-shadow: var(--block-shadow-text);
+}
+[data-material="stone"] {
+  --block-mat: var(--block-stone);
+  --block-mat-light: var(--block-stone-light);
+  --block-mat-dark: var(--block-stone-dark);
+  --block-mat-on: var(--block-on-stone);
+  --block-mat-text-shadow: var(--block-shadow-text);
+}
+[data-material="deepslate"] {
+  --block-mat: var(--block-deepslate);
+  --block-mat-light: var(--block-deepslate-light);
+  --block-mat-dark: var(--block-deepslate-dark);
+  --block-mat-on: var(--block-on-deepslate);
+  --block-mat-text-shadow: var(--block-shadow-text);
+}
+[data-material="sand"] {
+  --block-mat: var(--block-sand);
+  --block-mat-light: var(--block-sand-light);
+  --block-mat-dark: var(--block-sand-dark);
+  --block-mat-on: var(--block-on-sand);
+  --block-mat-text-shadow: var(--block-shadow-text-light);
+}
+[data-material="water"] {
+  --block-mat: var(--block-water);
+  --block-mat-light: var(--block-water-light);
+  --block-mat-dark: var(--block-water-dark);
+  --block-mat-on: var(--block-on-water);
+  --block-mat-text-shadow: var(--block-shadow-text-light);
+}
+[data-material="diamond"] {
+  --block-mat: var(--block-diamond);
+  --block-mat-light: var(--block-diamond-light);
+  --block-mat-dark: var(--block-diamond-dark);
+  --block-mat-on: var(--block-on-diamond);
+  --block-mat-text-shadow: var(--block-shadow-text-light);
+}
+[data-material="emerald"] {
+  --block-mat: var(--block-emerald);
+  --block-mat-light: var(--block-emerald-light);
+  --block-mat-dark: var(--block-emerald-dark);
+  --block-mat-on: var(--block-on-emerald);
+  --block-mat-text-shadow: var(--block-shadow-text-light);
+}
+[data-material="gold"] {
+  --block-mat: var(--block-gold);
+  --block-mat-light: var(--block-gold-light);
+  --block-mat-dark: var(--block-gold-dark);
+  --block-mat-on: var(--block-on-gold);
+  --block-mat-text-shadow: var(--block-shadow-text-light);
+}
+[data-material="redstone"] {
+  --block-mat: var(--block-redstone);
+  --block-mat-light: var(--block-redstone-light);
+  --block-mat-dark: var(--block-redstone-dark);
+  --block-mat-on: var(--block-on-redstone);
+  --block-mat-text-shadow: var(--block-shadow-text);
+}
+[data-material="obsidian"] {
+  --block-mat: var(--block-obsidian);
+  --block-mat-light: var(--block-obsidian-light);
+  --block-mat-dark: var(--block-obsidian-dark);
+  --block-mat-on: var(--block-on-obsidian);
+  --block-mat-text-shadow: var(--block-shadow-text);
+}
+[data-material="nether"] {
+  --block-mat: var(--block-nether);
+  --block-mat-light: var(--block-nether-light);
+  --block-mat-dark: var(--block-nether-dark);
+  --block-mat-on: var(--block-on-nether);
+  --block-mat-text-shadow: var(--block-shadow-text);
+}
+[data-material="amethyst"] {
+  --block-mat: var(--block-amethyst);
+  --block-mat-light: var(--block-amethyst-light);
+  --block-mat-dark: var(--block-amethyst-dark);
+  --block-mat-on: var(--block-on-amethyst);
+  --block-mat-text-shadow: var(--block-shadow-text-light);
+}
+[data-material="lava"] {
+  --block-mat: var(--block-lava);
+  --block-mat-light: var(--block-lava-light);
+  --block-mat-dark: var(--block-lava-dark);
+  --block-mat-on: var(--block-on-lava);
+  --block-mat-text-shadow: var(--block-shadow-text-light);
+}