Skip to content

Commit 7f74fa2

Browse files
author
deutschmark-sync
committed
sync: from monorepo @ 2b3f943
1 parent 43aa18f commit 7f74fa2

3 files changed

Lines changed: 110 additions & 18 deletions

File tree

‎README.md‎

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,46 @@
22

33
Build a theme for the stream toolset and submit it to the catalog.
44

5-
A theme customizes the look of a single widget — chat box, death counter,
6-
music player, and others as they expose their settings. It is field
7-
overrides (the same settings the tool page exposes) plus optional scoped
8-
CSS. Themes are data and CSS only: no JavaScript, no external assets, no
9-
commerce. Accepted themes are free to every toolset user.
5+
A theme customizes the look of one or more widgets — chat box, death counter,
6+
music player, and others as they expose their settings. It is field overrides
7+
(the same settings the tool page exposes) plus optional scoped CSS. Themes are
8+
data and CSS only: no JavaScript, no external assets, no commerce. Accepted
9+
themes are free to every toolset user.
1010

11-
This repo is both the SDK (how to build a theme) and the submission
12-
inbox (where you open a pull request). If your theme is accepted it shows
13-
up in the in-app Themes catalog at `toolset.deutschmark.online/tools/themes`.
11+
This repo is both the SDK (how to build a theme) and the submission inbox
12+
(where you open a pull request). If your theme is accepted it shows up in
13+
the in-app Themes catalog at `toolset.deutschmark.online/tools/themes`.
1414

1515
## What you can submit
1616

17-
A **widget theme**: field overrides plus optional CSS for one widget type.
18-
The format is defined in [`schema/widget-theme.schema.json`](schema/widget-theme.schema.json)
19-
and explained in [`docs/widget-themes.md`](docs/widget-themes.md).
17+
Two formats. Pick the one that matches what you're styling:
18+
19+
- **Theme pack** (v2, `kind: "theme-pack"`) — styles multiple widgets at once
20+
with a shared palette. One click in the toolset applies it across the
21+
streamer's music, chat, death counter, etc. all in matching colors. Best
22+
for "all-encompassing" looks. Defined in
23+
[`schema/theme-pack.schema.json`](schema/theme-pack.schema.json); example
24+
at [`examples/my-first-pack/`](examples/my-first-pack/).
25+
26+
- **Widget theme** (v1, `kind: "widget-theme"`) — styles one widget surface.
27+
Best when you want to nail a specific look on a specific tool. Defined in
28+
[`schema/widget-theme.schema.json`](schema/widget-theme.schema.json);
29+
example at [`examples/my-first-theme/`](examples/my-first-theme/).
30+
31+
Both formats live in the catalog side-by-side. The toolset's apply UX is the
32+
same shape for both — a multi-source checkbox modal.
2033

2134
## Quick start
2235

2336
1. Fork this repo.
24-
2. Copy [`examples/my-first-theme/`](examples/my-first-theme/) to
37+
2. Copy [`examples/my-first-pack/`](examples/my-first-pack/) (v2) or
38+
[`examples/my-first-theme/`](examples/my-first-theme/) (v1) to
2539
`submissions/<your-handle>/<theme-slug>/`.
26-
3. Edit `theme.json` — set the `widgetType`, `name`, `author`, and the
27-
`fields` you want to override. Keep `fields` to keys the widget
28-
actually exposes (see [`docs/fields-overview.md`](docs/fields-overview.md)).
29-
4. Add an honest `preview.png` and, if you wrote any, `overrides.css`.
40+
3. Edit `theme.json` — set `name`, `author`, `description`, and the
41+
`fields` you want to override per widget. Keep `fields` to keys the
42+
widget actually exposes (see [`docs/fields-overview.md`](docs/fields-overview.md)).
43+
4. Replace the preview PNGs. Hero is 16:9, ≤ 512 KB. One preview per widget
44+
the theme covers.
3045
5. Open a pull request. Read [`CONTRIBUTING.md`](CONTRIBUTING.md) first —
3146
it covers the quality bar and the rules.
3247

@@ -57,9 +72,11 @@ docs/
5772
css-selectors.md the CSS selector contract themes can rely on
5873
review-criteria.md the quality bar, written plainly
5974
schema/
60-
widget-theme.schema.json
75+
widget-theme.schema.json (v1)
76+
theme-pack.schema.json (v2)
6177
examples/
62-
my-first-theme/ a minimal working chat-box theme
78+
my-first-theme/ a minimal working v1 chat-box theme
79+
my-first-pack/ a minimal working v2 multi-widget pack
6380
scripts/
6481
validate-submission.mjs what CI runs — also runs locally
6582
tools/

‎examples/my-first-pack/README.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Sunset Deck
2+
3+
A multi-widget pack covering Music, Chat Box, and Death Counter.
4+
5+
## What's in this folder
6+
7+
- `theme.json` — the ThemePack manifest (schemaVersion 2, kind `theme-pack`).
8+
- `preview-hero.png` — the catalog card image. Replace with your own (16:9 ratio recommended; ≤512 KB).
9+
- `preview-player.png`, `preview-chat-box.png`, `preview-death-counter.png` — one preview per widget the pack styles. Shown in the apply modal so the user can see what each source will look like before clicking Apply.
10+
- `README.md` — this file. Used by the public mirror's listing; not parsed by the catalog.
11+
12+
## How to author your own
13+
14+
1. Copy this folder to a new directory named after your slug, e.g. `themes/my-cool-pack/`.
15+
2. Edit `theme.json`:
16+
- Change `name`, `author`, `description`.
17+
- Update the `palette` to reflect your colors (cosmetic — drives the catalog swatch chip).
18+
- For each widget you want to style, fill in `widgets["<widget-type>"].fields` with override values. Keys must be a strict subset of that widget's FIELDS schema (see `apps/toolset/components/scene-builder/fields/widgetFieldSchemas.ts`).
19+
- Drop any widget you don't style — there's no need to include every widget type.
20+
3. Replace the PNGs.
21+
4. Submit a PR. Catalog CI validates against `schema/theme-pack.schema.json` and the per-widget allowed-keys list.
22+
23+
## Pack vs single-widget theme
24+
25+
This format (schemaVersion 2) is for "all-encompassing" themes that apply to several widgets at once. If you only want to style one widget surface, use the v1 `widget-theme` format instead — see `../my-first-theme/`. Both formats live side-by-side in the catalog.
26+
27+
## License
28+
29+
By submitting to the public mirror you agree to CC BY-NC 4.0 — your pack stays open and credited, but can't be repackaged for sale.

‎examples/my-first-pack/theme.json‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"schemaVersion": 2,
3+
"kind": "theme-pack",
4+
"name": "Sunset Deck",
5+
"author": "example-author",
6+
"description": "Warm sunset palette, retro arcade vibes — covers Music, Chat Box, and Death Counter in one click.",
7+
"previewHero": "preview-hero.png",
8+
"palette": {
9+
"primary": "#ff7849",
10+
"accent": "#ffcc4b",
11+
"background": "transparent",
12+
"fontFamily": "Outfit"
13+
},
14+
"widgets": {
15+
"player": {
16+
"previewImage": "preview-player.png",
17+
"fields": {
18+
"skin": "compact",
19+
"tintMode": "fixed",
20+
"tintColor": "#ff7849",
21+
"fontFamily": "Outfit",
22+
"theme": "dark"
23+
}
24+
},
25+
"chat-box": {
26+
"previewImage": "preview-chat-box.png",
27+
"fields": {
28+
"nameColor": "#ffcc4b",
29+
"messageColor": "#ffeacd",
30+
"chipColor": "#ff7849",
31+
"chipOpacity": 18,
32+
"chipGlass": true,
33+
"fontFamily": "Outfit",
34+
"alignment": "left"
35+
}
36+
},
37+
"death-counter": {
38+
"previewImage": "preview-death-counter.png",
39+
"fields": {
40+
"skin": "tombstone",
41+
"accent": "#ff7849",
42+
"label": "Wipes"
43+
}
44+
}
45+
}
46+
}

0 commit comments

Comments
 (0)