warp12-theme 0.1.0

package/README.md

@@ -0,0 +1,23 @@
+# warp12-theme
+
+Star Trek–styled domino theme presets for [DoubleTwelve](https://www.npmjs.com/package/doubletwelve).
+
+Published on npm as **`warp12-theme`**.
+
+## Install
+
+```bash
+npm install warp12-theme doubletwelve
+```
+
+## Usage
+
+```ts
+import { createWarpDominoTheme, WARP_PIP_COLORS } from 'warp12-theme';
+```
+
+## Build
+
+```bash
+yarn build:theme
+```

package/dist/index.css

@@ -0,0 +1,2 @@
+._warpTileDark_1rrrc_1{background:linear-gradient(165deg,#101a2e 0%,#0a1220 100%)!important;border-color:#334155!important;box-shadow:0 0 0 1px #38bdf82e,inset 0 0 0 1px #38bdf80f,0 2px 10px #0006!important}._warpTileLight_1rrrc_7{background:linear-gradient(165deg,#f8fafc 0%,#e8eef5 100%)!important;border-color:#94a3b8!important;box-shadow:0 0 0 1px #0f172a0f,inset 0 0 0 1px #ffffffd9,0 2px 8px #0f172a1a!important}._warpTile_1rrrc_1[data-pip-preset=classic] [data-testid=pip]:not([data-hollow=true]){filter:none;opacity:1;animation:none;background:var(--pip-color,#0f172a)!important;border:none!important;border-radius:50%!important;box-shadow:1px 2px 2px #00000061!important}._warpTile_1rrrc_1[data-pip-preset=classic] [data-testid=pip][data-hollow=true]{filter:none;opacity:1;animation:none;border:2px solid var(--pip-color,#0f172a)!important;box-shadow:none!important;background:0 0!important;border-radius:50%!important}._warpTile_1rrrc_1[data-pip-preset=bridge] [data-testid=pip]:not([data-hollow=true]){animation:none;background:radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--pip-color,#38bdf8) 35%, #fff) 0%, color-mix(in srgb, var(--pip-color,#38bdf8) 72%, #38bdf8) 52%, color-mix(in srgb, var(--pip-color,#38bdf8) 55%, #0ea5e9) 100%)!important;border:1px solid color-mix(in srgb, var(--pip-color,#38bdf8) 55%, #7dd3fc)!important;box-shadow:0 0 8px color-mix(in srgb, var(--pip-color,#38bdf8) 45%, #38bdf8), inset 0 1px 2px #ffffff59!important;border-radius:50%!important}._warpTile_1rrrc_1[data-pip-preset=bridge] [data-testid=pip][data-hollow=true]{animation:none;border:2px solid color-mix(in srgb, var(--pip-color,#38bdf8) 70%, #7dd3fc)!important;box-shadow:0 0 6px color-mix(in srgb, var(--pip-color,#38bdf8) 40%, #38bdf8)!important;background:0 0!important;border-radius:50%!important}._warpTile_1rrrc_1[data-pip-preset=lcars] [data-testid=pip]:not([data-hollow=true]){animation:none;background:linear-gradient(160deg,#ffe066 0%,#f80 42%,#c6f 100%)!important;border:1px solid #96c!important;border-radius:22%!important;box-shadow:0 0 10px #ff8800bf,inset 0 1px #ffffff8c!important}._warpTile_1rrrc_1[data-pip-preset=lcars] [data-testid=pip][data-hollow=true]{animation:none;background:#0a122059!important;border:2px solid #c9f!important;border-radius:22%!important;box-shadow:0 0 8px #cc99ffa6,inset 0 0 0 1px #ff880073!important}._warpTile_1rrrc_1[data-pip-preset=okudagram] [data-testid=pip]:not([data-hollow=true]){animation:3.5s ease-in-out infinite _warp-okudagram-scan_1rrrc_1;background:color-mix(in srgb, var(--pip-color) 28%, #0a1628)!important;box-shadow:0 0 0 1px #38bdf880, 0 0 12px color-mix(in srgb, var(--pip-color) 55%, transparent), inset 0 0 8px #38bdf84d!important;border:1px solid #7dd3fc!important}._warpTile_1rrrc_1[data-pip-preset=okudagram] [data-testid=pip][data-hollow=true]{animation:3.5s ease-in-out infinite _warp-okudagram-scan_1rrrc_1;border:2px solid #38bdf8!important;box-shadow:0 0 0 1px #7dd3fc8c,0 0 10px #38bdf873!important}._warpTile_1rrrc_1[data-pip-preset=isolinear] [data-testid=pip]:not([data-hollow=true]){animation:none;background:linear-gradient(145deg, #e0f2fef2 0%, color-mix(in srgb, var(--pip-color,#38bdf8) 50%, #bae6fd) 40%, color-mix(in srgb, var(--pip-color,#38bdf8) 78%, #1e293b) 100%)!important;border:1px solid #bae6fde6!important;border-radius:26%!important;box-shadow:0 0 8px #7dd3fc80,inset 0 0 0 1px #fff9,inset 0 -2px 4px #0f172a47!important}._warpTile_1rrrc_1[data-pip-preset=isolinear] [data-testid=pip][data-hollow=true]{animation:none;background:#0f172a33!important;border:2px solid #bae6fdd9!important;border-radius:26%!important;box-shadow:0 0 8px #7dd3fc66,inset 0 0 6px #ffffff2e!important}._warpTile_1rrrc_1[data-pip-preset=warpCore] [data-testid=pip]:not([data-hollow=true]){animation:2.4s ease-in-out infinite _warp-core-pulse_1rrrc_1;background:radial-gradient(circle at 35% 32%, #fff 0%, #bae6fd 14%, var(--pip-color) 55%, color-mix(in srgb, var(--pip-color) 55%, #0c4a6e) 100%)!important;box-shadow:0 0 14px color-mix(in srgb, var(--pip-color) 80%, #fff), 0 0 4px #ffffffbf!important;border:none!important}._warpTile_1rrrc_1[data-pip-preset=warpCore] [data-testid=pip][data-hollow=true]{animation:2.4s ease-in-out infinite _warp-core-pulse_1rrrc_1;border:2px solid color-mix(in srgb, var(--pip-color) 85%, #fff)!important;box-shadow:0 0 14px color-mix(in srgb, var(--pip-color) 70%, #fff)!important}._warpTileHolographic_1rrrc_107{background:0 0!important;border:1px solid #38bdf8!important;box-shadow:0 0 0 1px #38bdf8a6,0 0 14px #38bdf88c,0 0 28px #38bdf838!important}._warpTileHolographic_1rrrc_107>div:first-child{box-shadow:none!important;border-bottom-color:#38bdf873!important}._warpTileHolographic_1rrrc_107 [data-testid=pip]:not([data-hollow=true]){box-shadow:0 0 8px color-mix(in srgb, var(--pip-color) 60%, transparent), 1px 2px 2px #00000047!important}._warpTileHolographic_1rrrc_107[data-pip-preset=classic] [data-testid=pip]:not([data-hollow=true]){background:var(--pip-color,#0f172a)!important;box-shadow:1px 2px 2px #00000061!important}._warpTileHolographic_1rrrc_107[data-pip-preset=bridge] [data-testid=pip]:not([data-hollow=true]){background:radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--pip-color,#38bdf8) 35%, #fff) 0%, color-mix(in srgb, var(--pip-color,#38bdf8) 72%, #38bdf8) 52%, color-mix(in srgb, var(--pip-color,#38bdf8) 55%, #0ea5e9) 100%)!important}._warpTileHolographic_1rrrc_107[data-pip-preset=lcars] [data-testid=pip]:not([data-hollow=true]){background:linear-gradient(160deg,#ffe066 0%,#f80 42%,#c6f 100%)!important;border-radius:22%!important;box-shadow:0 0 12px #ff8800bf,inset 0 1px #ffffff8c!important}._warpTileHolographic_1rrrc_107[data-pip-preset=isolinear] [data-testid=pip]:not([data-hollow=true]){border-radius:26%!important;box-shadow:0 0 10px #7dd3fc8c,inset 0 0 0 1px #fff9,inset 0 -2px 4px #0f172a47!important}@keyframes _warp-okudagram-scan_1rrrc_1{0%,to{filter:brightness();opacity:.92}50%{filter:brightness(1.18);opacity:1}}@keyframes _warp-core-pulse_1rrrc_1{0%,to{opacity:.88;filter:brightness(.95)}50%{opacity:1;filter:brightness(1.15)}}
+/*$vite$:1*/

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './warp-theme.js';
+export * from './warp-domino-theme.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,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC"}

package/dist/index.js

@@ -0,0 +1,135 @@
+import { mergePipColors as e } from "doubletwelve";
+//#region libs/theme/src/warp-theme.ts
+var t = e({
+	0: { color: "transparent" },
+	1: { color: "#c7d2fe" },
+	2: { color: "#818cf8" },
+	3: { color: "#fbbf24" },
+	4: {
+		color: "#e2e8f0",
+		hollow: !0
+	},
+	5: { color: "#34d399" },
+	6: { color: "#38bdf8" },
+	7: { color: "#fb923c" },
+	8: { color: "#f87171" },
+	9: { color: "#6366f1" },
+	10: { color: "#a78bfa" },
+	11: { color: "#4ade80" },
+	12: { color: "#fcd34d" }
+}), n = {
+	void: "#050816",
+	nebula: "#0f172a",
+	table: "#0a1628",
+	tableBorder: "#1e3a5f",
+	spacedock: "#334155",
+	spacedockRing: "#38bdf8",
+	spacedockGlow: "rgba(56, 189, 248, 0.35)",
+	panel: "rgba(15, 23, 42, 0.85)",
+	panelBorder: "#334155",
+	text: "#e2e8f0",
+	textMuted: "#94a3b8",
+	accent: "#38bdf8",
+	danger: "#f87171"
+}, r = {
+	warpTileDark: "_warpTileDark_1rrrc_1",
+	warpTileLight: "_warpTileLight_1rrrc_7",
+	warpTile: "_warpTile_1rrrc_1",
+	warpOkudagramScan: "_warp-okudagram-scan_1rrrc_1",
+	warpCorePulse: "_warp-core-pulse_1rrrc_1",
+	warpTileHolographic: "_warpTileHolographic_1rrrc_107"
+}, i = { holographic: r.warpTileHolographic }, a = {
+	dark: r.warpTileDark,
+	light: r.warpTileLight
+}, o = [
+	"classic",
+	"bridge",
+	"lcars",
+	"okudagram",
+	"isolinear",
+	"warpCore"
+], s = {
+	classic: {
+		label: "Classic",
+		hint: "Traditional domino — solid pips, full contrast"
+	},
+	bridge: {
+		label: "Bridge",
+		hint: "Deflector display — soft cyan sensor glow"
+	},
+	lcars: {
+		label: "LCARS",
+		hint: "PADD readout — warm orange highlight, violet frame"
+	},
+	okudagram: {
+		label: "Okudagram",
+		hint: "Technical schematic — bracket rings and scan pulse"
+	},
+	isolinear: {
+		label: "Isolinear",
+		hint: "Optical chip — glassy rim with isolinear translucency"
+	},
+	warpCore: {
+		label: "Warp core",
+		hint: "Plasma injectors — bright core with energy pulse"
+	}
+}, c = {
+	dark: {
+		label: "Bridge dark",
+		hint: "Command console panel on deep space black"
+	},
+	light: {
+		label: "PADD light",
+		hint: "Light isolinear display surface"
+	}
+}, l = {
+	dark: {
+		fill: "#0a1220",
+		border: "#334155"
+	},
+	light: {
+		fill: "#eef2f7",
+		border: "#94a3b8"
+	}
+};
+function u(e = {}) {
+	return { holographic: e.effects?.holographic ?? e.holographic ?? !1 };
+}
+function d(e = {}, t = "bridge", n = "dark") {
+	let o = u({ effects: e });
+	return [
+		r.warpTile,
+		a[n],
+		...Object.keys(i).filter((e) => o[e]).map((e) => i[e])
+	].filter(Boolean).join(" ");
+}
+function f(e, t, n) {
+	let r = {
+		warp: !0,
+		"tile-bg": n,
+		"pip-preset": t
+	};
+	for (let [t, n] of Object.entries(e)) n && (r[t] = !0);
+	return r;
+}
+function p(e = {}) {
+	let t = u(e), n = e.pipPreset ?? "bridge", r = e.tileBg ?? "dark", i = l[r];
+	return {
+		tileClassName: d(t, n, r),
+		tileDataAttributes: f(t, n, r),
+		tileStyle: () => t.holographic ? {
+			backgroundColor: "transparent",
+			boxShadow: "none"
+		} : { backgroundColor: i.fill },
+		halfDividerStyle: () => t.holographic ? { borderBottomColor: "rgba(56, 189, 248, 0.45)" } : { borderBottomColor: i.border },
+		pipStyle: (e) => ({
+			"--pip-color": e.color,
+			backgroundColor: "transparent",
+			border: "none",
+			boxShadow: "none",
+			borderRadius: void 0
+		})
+	};
+}
+//#endregion
+export { t as WARP_PIP_COLORS, s as WARP_PIP_PRESET_META, o as WARP_PIP_PRESET_ORDER, c as WARP_TILE_BG_META, l as WARP_TILE_SURFACE, d as composeWarpTileClassName, p as createWarpDominoTheme, n as warpPalette };

package/dist/warp-domino-theme.d.ts

@@ -0,0 +1,57 @@
+import { DominoTheme } from 'doubletwelve';
+/** CSS-module effect modifiers — add a class here and a matching block in the SCSS file. */
+declare const WARP_TILE_EFFECT_CLASSES: {
+    readonly holographic: string;
+};
+declare const WARP_TILE_BG_CLASSES: {
+    readonly dark: string;
+    readonly light: string;
+};
+/** Pip readout presets — styled via [data-pip-preset] on the tile root. */
+declare const WARP_PIP_PRESETS: {
+    readonly classic: "classic";
+    readonly bridge: "bridge";
+    readonly lcars: "lcars";
+    readonly okudagram: "okudagram";
+    readonly isolinear: "isolinear";
+    readonly warpCore: "warpCore";
+};
+export type WarpDominoEffect = keyof typeof WARP_TILE_EFFECT_CLASSES;
+export type WarpTileBg = keyof typeof WARP_TILE_BG_CLASSES;
+export type WarpPipPreset = keyof typeof WARP_PIP_PRESETS;
+export declare const WARP_PIP_PRESET_ORDER: readonly WarpPipPreset[];
+export declare const WARP_PIP_PRESET_META: Record<WarpPipPreset, {
+    label: string;
+    hint: string;
+}>;
+export declare const WARP_TILE_BG_META: Record<WarpTileBg, {
+    label: string;
+    hint: string;
+}>;
+export declare const WARP_TILE_SURFACE: {
+    readonly dark: {
+        readonly fill: "#0a1220";
+        readonly border: "#334155";
+    };
+    readonly light: {
+        readonly fill: "#eef2f7";
+        readonly border: "#94a3b8";
+    };
+};
+export type WarpDominoEffects = Partial<Record<WarpDominoEffect, boolean>>;
+export interface WarpDominoThemeOptions {
+    /** Toggle presentation modifiers (CSS module classes on each tile). */
+    effects?: WarpDominoEffects;
+    /** Shorthand for `effects.holographic`. */
+    holographic?: boolean;
+    /** Tile body fill when not in holographic mode. */
+    tileBg?: WarpTileBg;
+    /** Pip readout preset — positioning stays in DoubleTwelve. */
+    pipPreset?: WarpPipPreset;
+}
+/** Compose base + enabled effect classes for DoubleTwelve tiles. */
+export declare function composeWarpTileClassName(effects?: WarpDominoEffects, _pipPreset?: WarpPipPreset, tileBg?: WarpTileBg): string;
+/** Warp12 presentation layer for DoubleTwelve tiles — safe to swap or extend. */
+export declare function createWarpDominoTheme(options?: WarpDominoThemeOptions): DominoTheme;
+export {};
+//# sourceMappingURL=warp-domino-theme.d.ts.map

package/dist/warp-domino-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"warp-domino-theme.d.ts","sourceRoot":"","sources":["../src/warp-domino-theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAoB,MAAM,cAAc,CAAC;AAIlE,4FAA4F;AAC5F,QAAA,MAAM,wBAAwB;;CAEpB,CAAC;AAEX,QAAA,MAAM,oBAAoB;;;CAGhB,CAAC;AAEX,2EAA2E;AAC3E,QAAA,MAAM,gBAAgB;;;;;;;CAOZ,CAAC;AAEX,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,wBAAwB,CAAC;AAErE,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAE3D,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAE1D,eAAO,MAAM,qBAAqB,EAAE,SAAS,aAAa,EAOzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CACvC,aAAa,EACb;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CA0BhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CACpC,UAAU,EACV;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAUhC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;CASpB,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC;AAE3E,MAAM,WAAW,sBAAsB;IACrC,uEAAuE;IACvE,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B;AAWD,oEAAoE;AACpE,wBAAgB,wBAAwB,CACtC,OAAO,GAAE,iBAAsB,EAC/B,UAAU,GAAE,aAAwB,EACpC,MAAM,GAAE,UAAmB,GAC1B,MAAM,CAYR;AAyBD,iFAAiF;AACjF,wBAAgB,qBAAqB,CACnC,OAAO,GAAE,sBAA2B,GACnC,WAAW,CAmCb"}

package/dist/warp-theme.d.ts

@@ -0,0 +1,19 @@
+import { PipColorMap } from 'doubletwelve';
+/** Cosmic pip palette for Navigational Coordinates (0–12). */
+export declare const WARP_PIP_COLORS: PipColorMap;
+export declare const warpPalette: {
+    readonly void: "#050816";
+    readonly nebula: "#0f172a";
+    readonly table: "#0a1628";
+    readonly tableBorder: "#1e3a5f";
+    readonly spacedock: "#334155";
+    readonly spacedockRing: "#38bdf8";
+    readonly spacedockGlow: "rgba(56, 189, 248, 0.35)";
+    readonly panel: "rgba(15, 23, 42, 0.85)";
+    readonly panelBorder: "#334155";
+    readonly text: "#e2e8f0";
+    readonly textMuted: "#94a3b8";
+    readonly accent: "#38bdf8";
+    readonly danger: "#f87171";
+};
+//# sourceMappingURL=warp-theme.d.ts.map

package/dist/warp-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"warp-theme.d.ts","sourceRoot":"","sources":["../src/warp-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhE,8DAA8D;AAC9D,eAAO,MAAM,eAAe,EAAE,WAc5B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;CAcd,CAAC"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "warp12-theme",
+  "version": "0.1.0",
+  "description": "Warp 12 Star Trek domino theme presets for DoubleTwelve",
+  "license": "MIT",
+  "author": "Jessica Mulein",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "@warp12/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "warp12",
+    "doubletwelve",
+    "dominoes",
+    "theme"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Digital-Defiance/Warp12.git",
+    "directory": "libs/theme"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "prepublishOnly": "cd ../.. && yarn build:theme"
+  },
+  "peerDependencies": {
+    "doubletwelve": ">=0.3.0"
+  },
+  "devDependencies": {
+    "doubletwelve": "workspace:*"
+  }
+}