Skip to content

Commit cf67cc8

Browse files
ToolboxAidToolboxAid
committed
Migrate GameFoundryStudio admin pages to consume existing Theme V2 - PR_26152_033-theme-v2-admin-consumption
1 parent eb6c1ed commit cf67cc8

6 files changed

Lines changed: 141 additions & 47 deletions

File tree

‎GameFoundryStudio/admin/branding.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -79,32 +79,32 @@ <h2>Planned Sections</h2>
7979
</section>
8080
<section class="section">
8181
<div class="container grid cols-4">
82-
<article class="card brand-mascot-card"><img src="../assets/images/spark.png" class="feature-image"
82+
<article class="card"><img src="../assets/images/spark.png"
8383
alt="Spark mascot">
8484
<div class="card-body">
8585
<h3>Spark</h3>
8686
<div class="mascot-role">Living flame that creates games.</div>
8787
<p>Spark is the spirit of creativity.</p>
8888
</div>
8989
</article>
90-
<article class="card brand-mascot-card"><img src="../assets/images/pixel-smith.png"
91-
class="feature-image" alt="Pixel Smith mascot">
90+
<article class="card"><img src="../assets/images/pixel-smith.png"
91+
alt="Pixel Smith mascot">
9292
<div class="card-body">
9393
<h3>Pixel Smith</h3>
9494
<div class="mascot-role">Pixel-art blacksmith character.</div>
9595
<p>Pixel Smith forges worlds one pixel at a time.</p>
9696
</div>
9797
</article>
98-
<article class="card brand-mascot-card"><img src="../assets/images/forgebot.png" class="feature-image"
98+
<article class="card"><img src="../assets/images/forgebot.png"
9999
alt="ForgeBot mascot">
100100
<div class="card-body">
101101
<h3>ForgeBot</h3>
102102
<div class="mascot-role">Little robot blacksmith.</div>
103103
<p>ForgeBot is your hardworking assistant in the forge.</p>
104104
</div>
105105
</article>
106-
<article class="card brand-mascot-card"><img src="../assets/images/foundry-bot.png"
107-
class="feature-image" alt="Foundry Bot mascot">
106+
<article class="card"><img src="../assets/images/foundry-bot.png"
107+
alt="Foundry Bot mascot">
108108
<div class="card-body">
109109
<h3>Foundry Bot</h3>
110110
<div class="mascot-role">Cute AI helper for tools and tutorials.</div>

‎GameFoundryStudio/admin/controls.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<div class="container controls-hero-grid">
1818
<div>
1919
<div class="kicker">Admin control forge</div>
20-
<h1 class="controls-title">Controls.</h1>
20+
<h1>Controls.</h1>
2121
<p class="lede">A Game Foundry Studio control page showing common HTML controls with foundry-side
2222
accent colors for forms, tool panels, settings screens, publishing workflows, and account
2323
management.</p>
@@ -125,16 +125,16 @@ <h3>Numeric Inputs</h3>
125125
<h3>Choices</h3>
126126
<p>Modes, visibility, platforms, and feature flags.</p>
127127
<div class="control-demo">
128-
<div class="control-row control-row--choice"><span class="control-row__label">Choice -
128+
<div class="control-row"><span class="control-row__label">Choice -
129129
Public project - Checkbox</span><label class="choice"><input type="checkbox"
130130
checked> Public project</label></div>
131-
<div class="control-row control-row--choice"><span class="control-row__label">Choice -
131+
<div class="control-row"><span class="control-row__label">Choice -
132132
Allow remixing - Checkbox</span><label class="choice"><input type="checkbox"> Allow
133133
remixing</label></div>
134-
<div class="control-row control-row--choice"><span class="control-row__label">Choice -
134+
<div class="control-row"><span class="control-row__label">Choice -
135135
Arcade - Radio</span><label class="choice"><input name="mode" type="radio" checked>
136136
Arcade</label></div>
137-
<div class="control-row control-row--choice"><span class="control-row__label">Choice -
137+
<div class="control-row"><span class="control-row__label">Choice -
138138
Studio - Radio</span><label class="choice"><input name="mode" type="radio">
139139
Studio</label></div>
140140
</div>

‎GameFoundryStudio/admin/design-system.html‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -69,25 +69,37 @@ <h2>Planned Sections</h2>
6969
<h2>CSS Ownership</h2>
7070
<dl>
7171
<dt>colors.css</dt>
72-
<dd>Approved color values and color-family variables.</dd>
73-
<dt>tokens.css</dt>
74-
<dd>Spacing, sizing, typography, radius, shadows, z-index, icon sizes, and tool tile
75-
dimensions.</dd>
76-
<dt>base.css</dt>
77-
<dd>Reset, typography defaults, focus styles, accessibility helpers, and base element
78-
rules.</dd>
72+
<dd>Approved Theme V2 color values, color-family variables, swatches, and group variables.</dd>
73+
<dt>spacing.css</dt>
74+
<dd>Theme V2 spacing, sizing, radius, shadow, z-index, icon, and layout tokens.</dd>
75+
<dt>typography.css</dt>
76+
<dd>Theme V2 text scale, font families, headings, body copy, and editorial text primitives.</dd>
77+
<dt>layout.css</dt>
78+
<dd>Theme V2 containers, page sections, navigation, footer, grid, split, and content layout
79+
primitives.</dd>
80+
<dt>buttons.css</dt>
81+
<dd>Theme V2 button and action-group primitives.</dd>
82+
<dt>forms.css</dt>
83+
<dd>Theme V2 form elements, field groups, field rows, and helper text primitives.</dd>
7984
<dt>controls.css</dt>
80-
<dd>Native HTML control scale, spacing, sizing, and typography.</dd>
81-
<dt>gamefoundrystudio.css</dt>
82-
<dd>Shared GameFoundry components and patterns.</dd>
83-
<dt>pages.css</dt>
84-
<dd>Page-specific layout helpers that consume shared tokens and colors.</dd>
85+
<dd>Theme V2 control demos, switches, sliders, choice rows, and tool-group control accents.</dd>
86+
<dt>panels.css</dt>
87+
<dd>Theme V2 cards, surfaces, panel sections, media slots, callouts, and related content
88+
panels.</dd>
89+
<dt>accordion.css</dt>
90+
<dd>Theme V2 disclosure and accordion primitives.</dd>
91+
<dt>status.css</dt>
92+
<dd>Theme V2 feedback and event-log primitives.</dd>
93+
<dt>tables.css</dt>
94+
<dd>Theme V2 table baseline and data table primitives.</dd>
95+
<dt>dialogs.css</dt>
96+
<dd>Reserved Theme V2 dialog ownership file for future approved dialog primitives.</dd>
8597
</dl>
8698
<h2>Design Rules</h2>
8799
<ul>
88-
<li>Use shared CSS layers before adding page-specific styles.</li>
100+
<li>Use Theme V2 primitives before requesting new reusable styling.</li>
89101
<li>Keep raw color values in <code>colors.css</code>.</li>
90-
<li>Keep non-color design values in <code>tokens.css</code>.</li>
102+
<li>Keep non-color design values in the appropriate Theme V2 ownership file.</li>
91103
<li>Use current tool group names as the primary user-facing organization.</li>
92104
<li>Use badge and tile colors as secondary visual cues.</li>
93105
</ul>

‎GameFoundryStudio/admin/grouping-colors.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ <h2>Current Tool Groupings (deprecated)</h2>
7070
<p>Your current groupings are strong from a user perspective, but they do not map perfectly to
7171
the color scheme.</p>
7272
<div class="table-wrapper">
73-
<table>
73+
<table class="data-table">
7474
<thead>
7575
<tr>
7676
<th>Current Group</th>
@@ -255,9 +255,8 @@ <h3><span class="brand-color-code"><span
255255
names as the primary user-facing grouping. Badge colors should be secondary visual grouping
256256
cues inside those categories, and tile colors can be corrected later.</div>
257257
<div class="callout"><strong>Shared grouping color layer:</strong> grouping colors are applied
258-
through shared group classes and per-group imports under
259-
<code>assets/css/tools/grouping/</code>. Tools can be rethemed by changing the grouping CSS
260-
import or token mapping, and pages should not define their own group colors. The current
258+
through Theme V2 group classes and variables owned by <code>theme/v2/colors.css</code>.
259+
Pages should consume those classes and should not define their own group colors. The current
261260
mapping follows the Color-Aligned Grouping Option: Build &amp; Create pink, Content &amp;
262261
Assets orange, Media &amp; Audio red, AI &amp; Learning purple, Platform &amp; Cloud blue,
263262
and Development &amp; System gray.</div>

‎docs/dev/reports/theme_v2_admin_consumption_validation.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Theme V2 Admin Consumption Validation - PR_26152_033-theme-v2-admin-consumption
2+
3+
## Scope
4+
5+
- Migrated the named Admin pages to consume existing Theme V2 CSS only.
6+
- Changed only Admin HTML pages and required reports.
7+
- Did not change CSS.
8+
- Did not change JavaScript.
9+
- Did not migrate Account, Tools, Games, or Samples.
10+
- Did not use V1/legacy CSS as source, fallback, comparison, or target.
11+
12+
## Admin Pages Validated
13+
14+
- `GameFoundryStudio/admin/site-settings.html`
15+
- `GameFoundryStudio/admin/branding.html`
16+
- `GameFoundryStudio/admin/themes.html`
17+
- `GameFoundryStudio/admin/design-system.html`
18+
- `GameFoundryStudio/admin/controls.html`
19+
- `GameFoundryStudio/admin/grouping-colors.html`
20+
- `GameFoundryStudio/admin/ratings.html`
21+
- `GameFoundryStudio/admin/users.html`
22+
- `GameFoundryStudio/admin/roles.html`
23+
- `GameFoundryStudio/admin/moderation.html`
24+
- `GameFoundryStudio/admin/analytics.html`
25+
26+
## Changes Validated
27+
28+
- Removed non-owned/dead Admin classes from `branding.html` and `controls.html`.
29+
- Updated `design-system.html` copy to reference Theme V2 ownership files instead of legacy CSS ownership.
30+
- Updated `grouping-colors.html` to consume the existing `.data-table` Theme V2 primitive and to reference Theme V2 grouping color ownership.
31+
32+
## Validation Commands
33+
34+
- Static stylesheet guard: verified each Admin page links only `../assets/css/theme/v2/theme.css`.
35+
- Admin class ownership guard: verified all Admin page classes exist in Theme V2 selectors.
36+
- Inline guard: verified no inline style, inline script, or inline event handlers exist in Admin pages.
37+
- Browser validation: loaded all 11 Admin pages through a local static server with Playwright and verified Theme V2 CSS loaded with HTTP 200, no legacy CSS was requested, Admin navigation rendered, and header/footer partials rendered.
38+
- Scope guard: verified changed files are limited to named Admin pages and required reports.
39+
- CSS guard: verified no `.css` files changed.
40+
- Non-Admin guard: verified no non-Admin HTML pages changed.
41+
- Legacy dependency guard: verified no V1/legacy CSS dependency or Admin text reference was added.
42+
- `git diff --check -- GameFoundryStudio\admin docs\dev\reports`
43+
44+
## Results
45+
46+
- PASS: All 11 Admin pages load using Theme V2 only.
47+
- PASS: No CSS files changed.
48+
- PASS: No JavaScript files changed.
49+
- PASS: No non-Admin HTML pages changed.
50+
- PASS: No V1/legacy CSS dependencies were added.
51+
- PASS: All Admin page classes resolve to Theme V2 selectors.
52+
- PASS: No inline style/script/event handlers were found.
53+
- PASS: Playwright scoped Admin load validation passed.
54+
- PASS: `git diff --check -- GameFoundryStudio\admin docs\dev\reports` passed.
55+
- WARN: Git reported CRLF conversion notices for edited Admin HTML files.
56+
57+
## Lanes
58+
59+
Lanes executed:
60+
- GameFoundryStudio Admin static/browser validation because this PR changes Admin HTML consumption of existing Theme V2 CSS.
61+
62+
Lanes skipped:
63+
- engine, samples, Account, Tools, Games, and broader runtime lanes because this PR does not touch those surfaces.
64+
65+
Samples decision:
66+
- SKIP because Samples are out of scope and no sample files changed.
67+
68+
Expected PASS behavior:
69+
- Admin pages consume `theme/v2/theme.css`.
70+
- Admin navigation continues to work.
71+
- Header/footer partials render.
72+
- No legacy CSS requests occur from Admin pages.
73+
74+
Expected WARN behavior:
75+
- Not-yet-migrated non-Admin page families may still reference legacy CSS until their own migration PR.

‎docs/dev/reports/theme_v2_design_system_gaps.md‎

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,38 @@
11
# Theme V2 Design System Gaps
22

3-
PR: `PR_26152_032-theme-v2-direct-primitives`
3+
PR: `PR_26152_033-theme-v2-admin-consumption`
44

5-
## Direct Theme V2 Primitives Added
5+
## Admin Consumption Result
66

7-
These primitives were authored directly in Theme V2 using existing Theme V2 tokens. They do not use V1/legacy CSS as a source, target, or comparison baseline.
7+
No new Theme V2 CSS gaps were discovered while migrating the named Admin pages to consume existing Theme V2 CSS.
88

9-
| Primitive area | Owning file | New selectors | Intended consumers |
10-
| --- | --- | --- | --- |
11-
| Page/content layout | `layout.css` | `.content-stack`, `.content-stack--compact`, `.content-cluster`, `.content-grid`, `.content-grid--three`, `.content-split` | Migrated Theme V2 pages that need reusable content stacking, clustering, two/three-column grids, or split content layouts. |
12-
| Panel/card surfaces | `panels.css` | `.surface`, `.surface-header`, `.surface-body`, `.surface-footer`, `.card-header`, `.card-footer`, `.card-media`, `.card-media img` | Migrated Theme V2 pages that need reusable framed content, card sections, or media areas. |
13-
| Buttons/actions | `buttons.css` | `.btn:disabled`, `.btn[aria-disabled=true]`, `.btn:focus-visible`, `.action-group`, `.action-group--end` | Migrated Theme V2 pages that need consistent action grouping, disabled affordance, and focus affordance. |
14-
| Forms/inputs | `forms.css` | `.field-group`, `.field-row`, `.field-hint` | Migrated Theme V2 pages that need reusable label/input grouping, responsive paired fields, and helper text. |
15-
| Accordions | `accordion.css` | `.accordion-group` | Migrated Theme V2 pages that need reusable spacing between existing `details.vertical-accordion` blocks. |
16-
| Status/log surfaces | `status.css` | `.feedback`, `.feedback-title`, `.feedback-message`, `.event-log`, `.event-log-entry` | Migrated Theme V2 pages that need reusable message panels or structured textual logs. |
17-
| Tables | `tables.css` | `.data-table`, `.data-table caption`, `.data-table th` | Migrated Theme V2 pages that need reusable data table presentation beyond the generic table baseline. |
9+
Admin pages validated successfully with the existing Theme V2 primitives:
1810

19-
## Remaining Gaps
11+
- Page layout: `.page-title`, `.section`, `.container`, `.account-panel`, `.admin-page-stack`, `.grid`
12+
- Navigation/panels: `.side-menu`, `.card`, `.card-body`, `.callout`, `.mini-stat`
13+
- Controls: `.controls-hero`, `.controls-hero-grid`, `.control-section`, `.control-lab`, `.control-card`, `.control-demo`, `.control-row`, `.choice`, `.switch`
14+
- Tables: `.table-wrapper`, `.data-table`
15+
- Accordions: `.vertical-accordion`, `.accordion-body`
16+
- Brand/color references: `.brand-color-code`, `.brand-color-swatch`, swatch classes, side accent classes, tool-group classes
17+
18+
## Resolved In This PR
19+
20+
| Gap | Resolution |
21+
| --- | --- |
22+
| Admin `branding.html` carried non-owned/dead classes for mascot cards and feature images. | Removed the dead classes and relied on existing Theme V2 `.card` and `.card img` styling. |
23+
| Admin `controls.html` carried non-owned/dead `controls-title` and `control-row--choice` classes. | Removed the dead classes and relied on existing Theme V2 heading and `.control-row` / `.choice` styling. |
24+
| Admin `design-system.html` still described legacy CSS ownership files. | Updated copy to describe Theme V2 ownership files. |
25+
| Admin `grouping-colors.html` table did not consume the available Theme V2 data table primitive. | Added existing `.data-table` to the table. |
26+
| Admin `grouping-colors.html` copy still referenced legacy grouping CSS import ownership. | Updated copy to reference Theme V2 group classes and `theme/v2/colors.css`. |
27+
28+
## Remaining Gaps Outside This PR
2029

2130
| Gap | Reason Deferred |
2231
| --- | --- |
23-
| Tool-shell layout, tool columns, tool display mode, and focus behavior are still unresolved. | Tool-specific primitives are out of scope for this PR. They require separate approval and direct Theme V2 design. |
24-
| Horizontal tool-panel accordion toggles are still unresolved. | This PR adds only generic accordion grouping; tool-specific toggles require separate approval. |
25-
| Dialog/modals are still unresolved. | Dialog primitives were not requested in this PR and require separate approval. |
26-
| Brand/background/meaning utility systems are still unresolved. | New color utility systems were not requested in this PR and require separate approval. |
27-
| Badge/pill/role metadata variants are still unresolved. | This PR adds generic feedback/log primitives only; metadata variants require separate approval. |
32+
| Dialog/modal primitives remain unresolved. | No Admin page in this PR required dialog styling. |
33+
| Tool-shell layout, tool columns, display mode, and focus behavior remain unresolved. | Tool pages are explicitly out of scope. |
34+
| Horizontal tool-panel accordion toggles remain unresolved. | Tool pages are explicitly out of scope. |
35+
| Badge/pill/role metadata variants remain unresolved. | Admin pages in this PR did not require them. |
2836

2937
## Guardrails
3038

0 commit comments

Comments
 (0)