feat: add the ability to use the bundled images in custom themes

Author: aradzie

packages/keybr-theme-designer/lib/design/BackgroundImage.tsx

@@ -1,4 +1,5 @@
-import { Box } from "@keybr/widget";
+import { images } from "@keybr/themes";
+import { Box, Button, Para } from "@keybr/widget";
 import { useCustomTheme } from "./context.ts";
 import { Group } from "./Group.tsx";
 import { ImageInput } from "./input/ImageInput.tsx";
@@ -15,6 +16,33 @@ export function BackgroundImage() {
           }}
         />
       </Box>
+      <Para align="center">
+        <Button
+          label="Clear"
+          onClick={() => {
+            setTheme(theme.delete("--background-image"));
+          }}
+        />
+        {" or "}
+        <Button
+          label="Chocolate"
+          onClick={() => {
+            setTheme(theme.set("--background-image", images.chocolate));
+          }}
+        />
+        <Button
+          label="Coffee"
+          onClick={() => {
+            setTheme(theme.set("--background-image", images.coffee));
+          }}
+        />
+        <Button
+          label="Garden"
+          onClick={() => {
+            setTheme(theme.set("--background-image", images.garden));
+          }}
+        />
+      </Para>
     </Group>
   );
 }

packages/keybr-themes/lib/themes/images-browser.ts

@@ -0,0 +1,10 @@
+import chocolateSvg from "../../assets/bg-chocolate.svg";
+import coffeeSvg from "../../assets/bg-coffee.svg";
+import gardenSvg from "../../assets/bg-garden.svg";
+import { UrlAsset } from "./asset.ts";
+
+export const images = {
+  chocolate: new UrlAsset(chocolateSvg),
+  coffee: new UrlAsset(coffeeSvg),
+  garden: new UrlAsset(gardenSvg),
+} as const;

packages/keybr-themes/lib/themes/images.ts

@@ -0,0 +1,7 @@
+import { UrlAsset } from "./asset.ts";
+
+export const images = {
+  chocolate: new UrlAsset(""),
+  coffee: new UrlAsset(""),
+  garden: new UrlAsset(""),
+} as const;

packages/keybr-themes/lib/themes/index.ts

@@ -2,6 +2,7 @@ export * from "./asset.ts";
 export * from "./context.ts";
 export * from "./custom-theme.ts";
 export * from "./dynamic-styles-context.tsx";
+export * from "./images.ts";
 export * from "./prefs.ts";
 export * from "./theme-io.ts";
 export * from "./theme-props.ts";

packages/keybr-themes/package.json

@@ -6,6 +6,9 @@
   "main": "lib/index.ts",
   "types": ".types/index.d.ts",
   "sideEffects": false,
+  "browser": {
+    "./lib/themes/images.ts": "./lib/themes/images-browser.ts"
+  },
   "dependencies": {
     "@keybr/color": "*",
     "@keybr/rand": "*",