Skip to content

Commit eb6c1ed

Browse files
ToolboxAidToolboxAid
committed
Add directly-authored reusable Theme V2 primitives for migration readiness - PR_26152_032-theme-v2-direct-primitives
1 parent fb522a4 commit eb6c1ed

9 files changed

Lines changed: 267 additions & 36 deletions

File tree

‎GameFoundryStudio/assets/css/theme/v2/accordion.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@ summary::-webkit-details-marker {
1111
display: none
1212
}
1313

14+
.accordion-group {
15+
display: grid;
16+
gap: var(--space-12)
17+
}
18+
1419
details.vertical-accordion {
1520
border: var(--border-standard);
1621
border-radius: var(--radius-lg);

‎GameFoundryStudio/assets/css/theme/v2/buttons.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,27 @@
2525
opacity: var(--opacity-disabled)
2626
}
2727

28+
.btn:disabled,
29+
.btn[aria-disabled=true] {
30+
cursor: not-allowed
31+
}
32+
33+
.btn:focus-visible {
34+
outline: var(--border-standard);
35+
outline-offset: var(--space-3)
36+
}
37+
38+
.action-group {
39+
display: flex;
40+
flex-wrap: wrap;
41+
gap: var(--space-10);
42+
align-items: center
43+
}
44+
45+
.action-group--end {
46+
justify-content: flex-end
47+
}
48+
2849
.return-to-top {
2950
min-width: var(--space-20);
3051
width: var(--space-44);

‎GameFoundryStudio/assets/css/theme/v2/forms.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,23 @@ form {
2323
margin: var(--space-0)
2424
}
2525

26+
.field-group {
27+
display: grid;
28+
gap: var(--space-6)
29+
}
30+
31+
.field-row {
32+
display: grid;
33+
grid-template-columns: var(--two-columns);
34+
gap: var(--space-14)
35+
}
36+
37+
.field-hint {
38+
color: var(--muted);
39+
font-size: var(--font-size-sm);
40+
line-height: var(--line-height-copy)
41+
}
42+
2643
fieldset {
2744
border-radius: var(--space-14);
2845
padding: var(--space-14)

‎GameFoundryStudio/assets/css/theme/v2/layout.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,39 @@ div {
7070
grid-template-columns: var(--grid-cols-4)
7171
}
7272

73+
.content-stack {
74+
display: grid;
75+
gap: var(--space-18)
76+
}
77+
78+
.content-stack--compact {
79+
gap: var(--space-12)
80+
}
81+
82+
.content-cluster {
83+
display: flex;
84+
flex-wrap: wrap;
85+
gap: var(--space-12);
86+
align-items: center
87+
}
88+
89+
.content-grid {
90+
display: grid;
91+
grid-template-columns: var(--grid-cols-2);
92+
gap: var(--space-18)
93+
}
94+
95+
.content-grid--three {
96+
grid-template-columns: var(--grid-cols-3)
97+
}
98+
99+
.content-split {
100+
display: grid;
101+
grid-template-columns: var(--two-columns);
102+
gap: var(--space-24);
103+
align-items: start
104+
}
105+
73106
.page-title {
74107
padding: var(--space-44) var(--space-0) var(--space-20);
75108
border-bottom: var(--border-standard)
@@ -428,6 +461,9 @@ div {
428461

429462
.trending-grid,
430463
.card-grid,
464+
.content-grid,
465+
.content-grid--three,
466+
.content-split,
431467
.control-lab,
432468
.grid.cols-4,
433469
.grid.cols-3,
@@ -459,6 +495,10 @@ div {
459495
.dual-entry,
460496
.check-panel,
461497
.card-grid,
498+
.content-grid,
499+
.content-grid--three,
500+
.content-split,
501+
.field-row,
462502
.control-lab,
463503
.grid.cols-4,
464504
.grid.cols-3,

‎GameFoundryStudio/assets/css/theme/v2/panels.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,50 @@
3232
padding: var(--space-18)
3333
}
3434

35+
.surface {
36+
border: var(--border-standard);
37+
border-radius: var(--radius-lg);
38+
background: var(--card-background);
39+
box-shadow: var(--shadow-md);
40+
overflow: hidden
41+
}
42+
43+
.surface-header,
44+
.surface-body,
45+
.surface-footer,
46+
.card-header,
47+
.card-footer {
48+
padding: var(--space-18)
49+
}
50+
51+
.surface-header,
52+
.card-header {
53+
border-bottom: var(--border-standard)
54+
}
55+
56+
.surface-footer,
57+
.card-footer {
58+
border-top: var(--border-standard)
59+
}
60+
61+
.surface-body {
62+
display: grid;
63+
gap: var(--space-12)
64+
}
65+
66+
.card-media {
67+
display: grid;
68+
place-items: center;
69+
background: var(--panel-overlay);
70+
overflow: hidden
71+
}
72+
73+
.card-media img {
74+
width: 100%;
75+
height: 100%;
76+
object-fit: cover
77+
}
78+
3579
.card img {
3680
width: 100%;
3781
display: block

‎GameFoundryStudio/assets/css/theme/v2/status.css‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,36 @@
1-
/* Home migration does not require reusable status patterns yet. */
1+
.feedback {
2+
border: var(--border-standard);
3+
border-radius: var(--radius-lg);
4+
padding: var(--space-14);
5+
background: var(--panel-overlay-strong);
6+
color: var(--muted)
7+
}
8+
9+
.feedback-title {
10+
display: block;
11+
color: var(--text);
12+
font-weight: var(--font-weight-heavy);
13+
margin-bottom: var(--space-6)
14+
}
15+
16+
.feedback-message {
17+
margin: var(--space-0);
18+
color: var(--muted)
19+
}
20+
21+
.event-log {
22+
display: grid;
23+
gap: var(--space-8);
24+
overflow: auto;
25+
padding: var(--space-12);
26+
border: var(--border-standard);
27+
border-radius: var(--radius-lg);
28+
background: var(--panel-overlay)
29+
}
30+
31+
.event-log-entry {
32+
color: var(--muted);
33+
font-family: var(--font-family-code);
34+
font-size: var(--font-size-sm);
35+
line-height: var(--line-height-copy)
36+
}

‎GameFoundryStudio/assets/css/theme/v2/tables.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,19 @@ td {
1919
padding: var(--space-14);
2020
text-align: left
2121
}
22+
23+
.data-table {
24+
width: 100%;
25+
border-collapse: collapse
26+
}
27+
28+
.data-table caption {
29+
color: var(--text)
30+
}
31+
32+
.data-table th {
33+
color: var(--gold);
34+
font-size: var(--font-size-sm);
35+
text-transform: uppercase;
36+
letter-spacing: var(--letter-spacing-brand)
37+
}

‎docs/dev/reports/theme_v2_design_system_gaps.md‎

Lines changed: 21 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,34 @@
11
# Theme V2 Design System Gaps
22

3-
PR: `PR_26152_031-remove-bad-v2-css-migration`
3+
PR: `PR_26152_032-theme-v2-direct-primitives`
44

5-
## Removed Migration-Invalid CSS
5+
## Direct Theme V2 Primitives Added
66

7-
The following Theme V2 CSS was removed because the prior audit classified it as moved, copied, mirrored, or propagated from V1/legacy styling rather than authored directly as approved reusable Theme V2 design-system styling.
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.
88

9-
| Removed area | Removed from | Current status |
10-
| --- | --- | --- |
11-
| Horizontal accordion toggles and tool-column accordion overrides | `accordion.css` | Design-system gap. Requires approval and direct Theme V2 design before reimplementation. |
12-
| Tool display mode summary arrows | `accordion.css` | Design-system gap. Requires approval and direct Theme V2 design before reimplementation. |
13-
| Meaning color utilities, brand background utilities, extra side accents, and tool-column header color variants | `colors.css` | Design-system gap. Requires approval before adding any new Theme V2 utility or color system. |
14-
| Button row helpers, inline row helpers, button hover/disabled normalization, and return-to-top meaning-variable hooks | `buttons.css` | Design-system gap. Requires approval and direct Theme V2 design before reimplementation. |
15-
| Dialog baseline and dialog sample styling | `dialogs.css` | Design-system gap. Requires approval and direct Theme V2 design before reimplementation. |
16-
| Form row, field stack, and control fieldset helpers | `forms.css` | Design-system gap. Requires approval and direct Theme V2 design before reimplementation. |
17-
| Tool workspace, tool grid, tool display layout, and focus-mode layout system | `layout.css` | Design-system gap. Requires approval and direct Theme V2 design before reimplementation. |
18-
| Tool cards, tool columns, tool center panel, tool display body, and tool-card image sizing | `panels.css` | Design-system gap. Requires approval and direct Theme V2 design before reimplementation. |
19-
| Tool-shell size, focus, dialog, card image, and grid tokens | `spacing.css` | Design-system gap. Requires approval before adding any new Theme V2 layout token system. |
20-
| Status, log, pill, role, tool-group label, and tool-group swatch styling | `status.css` | Design-system gap. Requires approval and direct Theme V2 design before reimplementation. |
21-
| `.table` class styling | `tables.css` | Design-system gap. Generic table baseline remains; class-specific table styling requires approval before reimplementation. |
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. |
2218

23-
## Preserved Theme V2 Styling
19+
## Remaining Gaps
2420

25-
The removal preserved already-approved Theme V2 files and rules that existed before the invalid foundation migration, including:
26-
27-
- Theme V2 import ownership through `theme.css`.
28-
- Base color tokens and existing approved Theme V2 color/group classes.
29-
- Base spacing, typography, layout, panel, form, control, accordion, table, button, dialog, and status files.
30-
- Existing generic table baseline including `.table-wrapper`, `table`, `caption`, `th`, and `td`.
31-
32-
## Open Gaps
33-
34-
| Gap | Required next step |
21+
| Gap | Reason Deferred |
3522
| --- | --- |
36-
| Tool shell layout, columns, display mode, and focus behavior need a direct Theme V2 design if tools are migrated. | Document the affected tool family, request approval, then implement reusable Theme V2 styling directly. |
37-
| Horizontal accordion toggles need a direct Theme V2 component design if required by migrated tools. | Request approval before adding the component back. |
38-
| Status/log/pill/role patterns need direct Theme V2 ownership decisions. | Request approval before adding reusable status primitives. |
39-
| Dialog styling needs a direct Theme V2 primitive. | Request approval before adding dialog styles. |
40-
| Brand/background/meaning utilities need a direct Theme V2 color-system decision. | Request approval before adding any new utility system. |
41-
| Form row, field stack, control fieldset, and table class helpers need direct Theme V2 design approval. | Request approval before adding these helpers back. |
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. |
4228

43-
## Notes
29+
## Guardrails
4430

45-
- Do not use V1/legacy CSS as the source for any replacement.
31+
- Do not use V1/legacy CSS as the source for any future replacement.
4632
- Do not compare new Theme V2 work to V1/legacy CSS as the desired target.
4733
- Do not restore removed selectors through aliases, wrapper selectors, duplicate compatibility classes, or fallback imports.
4834
- Not-yet-migrated page families may continue to retain their existing legacy references until their own migration PR, but migrated Theme V2 pages must not depend on V1/legacy CSS.

‎docs/dev/reports/theme_v2_direct_primitives_validation.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# Theme V2 Direct Primitives Validation - PR_26152_032-theme-v2-direct-primitives
2+
3+
## Scope
4+
5+
- Added small reusable Theme V2 primitives only.
6+
- Changed only `GameFoundryStudio/assets/css/theme/v2/` CSS files and `docs/dev/reports/`.
7+
- Did not migrate pages.
8+
- Did not change HTML.
9+
- Did not change JavaScript.
10+
- Did not use V1/legacy CSS as a source, target, or comparison baseline.
11+
- Playwright impacted: No. This PR changes CSS primitives only and does not change runtime behavior.
12+
13+
## Primitive Inventory
14+
15+
| Primitive area | Owning file | New selectors | Intended consumers |
16+
| --- | --- | --- | --- |
17+
| Page/content layout | `GameFoundryStudio/assets/css/theme/v2/layout.css` | `.content-stack`, `.content-stack--compact`, `.content-cluster`, `.content-grid`, `.content-grid--three`, `.content-split` | Migrated Theme V2 pages that need reusable content flow and grid/split layout primitives. |
18+
| Panel/card surfaces | `GameFoundryStudio/assets/css/theme/v2/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 panels, card sections, or media slots. |
19+
| Buttons/actions | `GameFoundryStudio/assets/css/theme/v2/buttons.css` | `.btn:disabled`, `.btn[aria-disabled=true]`, `.btn:focus-visible`, `.action-group`, `.action-group--end` | Migrated Theme V2 pages that need reusable action grouping and button state affordances. |
20+
| Forms/inputs | `GameFoundryStudio/assets/css/theme/v2/forms.css` | `.field-group`, `.field-row`, `.field-hint` | Migrated Theme V2 pages that need reusable form grouping, paired fields, and helper text. |
21+
| Accordions | `GameFoundryStudio/assets/css/theme/v2/accordion.css` | `.accordion-group` | Migrated Theme V2 pages that need reusable spacing between existing vertical accordion blocks. |
22+
| Status/log surfaces | `GameFoundryStudio/assets/css/theme/v2/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. |
23+
| Tables | `GameFoundryStudio/assets/css/theme/v2/tables.css` | `.data-table`, `.data-table caption`, `.data-table th` | Migrated Theme V2 pages that need reusable data table presentation. |
24+
25+
## Validation Commands
26+
27+
- `git diff --check -- GameFoundryStudio\assets\css\theme\v2`
28+
- Changed-file guard: fail if `git diff --name-only` contains `.html` or `.js`.
29+
- Page-migration guard: fail if any `GameFoundryStudio/**/*.html` page changed.
30+
- Legacy dependency guard: fail if the GameFoundryStudio diff adds legacy stylesheet references.
31+
- Theme import resolver script for `GameFoundryStudio/assets/css/theme/v2/theme.css`.
32+
- Added-selector guard: fail if new selectors are page-specific, tool-specific, or legacy-restoration selector names.
33+
- Token discipline guard: fail if newly added Theme V2 CSS lines add hardcoded hex colors or pixel values.
34+
- Scope guard: fail if GameFoundryStudio CSS outside `assets/css/theme/v2/` changes.
35+
36+
## Results
37+
38+
- PASS: No HTML files changed.
39+
- PASS: No JavaScript files changed.
40+
- PASS: No page migration occurred.
41+
- PASS: No CSS outside Theme V2 changed.
42+
- PASS: No V1/legacy CSS dependency was added.
43+
- PASS: Theme V2 `theme.css` imports still resolve.
44+
- PASS: `git diff --check -- GameFoundryStudio\assets\css\theme\v2` passed.
45+
- PASS: Added selectors are reusable and owned by Theme V2.
46+
- PASS: No hardcoded hex colors or pixel values were added.
47+
- WARN: Git reported CRLF conversion notices for edited Theme V2 CSS files.
48+
49+
## Lanes
50+
51+
Lanes executed:
52+
- GameFoundryStudio CSS/static validation because this PR only changes Theme V2 CSS primitives and reports.
53+
54+
Lanes skipped:
55+
- runtime, integration, engine, samples, and recovery/UAT because no HTML, JavaScript, runtime behavior, engine code, samples, or page migration changed.
56+
57+
Samples decision:
58+
- SKIP because samples are out of scope and no sample files changed.
59+
60+
Expected PASS behavior:
61+
- Reusable Theme V2 primitives exist for page/content layout, panels/cards, buttons, forms, accordions, status/logs, and tables.
62+
- Every new selector is generic, reusable, and owned by an approved `theme/v2` file.
63+
- Missing out-of-scope patterns remain documented as design-system gaps.
64+
65+
Expected WARN behavior:
66+
- Not-yet-migrated page families may still reference legacy CSS until their migration PR.
67+
- Tool-specific shell/layout primitives remain gaps requiring separate approval.

0 commit comments

Comments
 (0)