Skip to content

Commit 0d1f0c6

Browse files
ToolboxAidToolboxAid
committed
refactor(css): establish design-system source of truth and injection-safety foundation
1 parent 080f683 commit 0d1f0c6

47 files changed

Lines changed: 725 additions & 365 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎GameFoundryStudio/account/design-system.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Design System - Game Foundry Studio</title>
8+
<meta name="description" content="Game Foundry Studio design-system source of truth.">
9+
<link rel="icon" href="../assets/images/favicon.svg" type="image/svg+xml">
10+
<link rel="stylesheet" href="../assets/css/styles.css">
11+
</head>
12+
13+
<body>
14+
<div data-partial="header-nav"></div>
15+
<main>
16+
<section class="page-title">
17+
<div class="container">
18+
<div class="kicker">Account Reference</div>
19+
<h1>Design-system source of truth.</h1>
20+
<p class="lede">Shared CSS layers define colors, tokens, base element behavior, controls, reusable
21+
GameFoundry patterns, and page layouts.</p>
22+
</div>
23+
</section>
24+
<section class="section">
25+
<div class="container">
26+
<div class="card">
27+
<div class="card-body">
28+
<h2>CSS Ownership</h2>
29+
<dl>
30+
<dt>colors.css</dt>
31+
<dd>Approved color values and color-family variables.</dd>
32+
<dt>tokens.css</dt>
33+
<dd>Spacing, sizing, typography, radius, shadows, z-index, icon sizes, and tool tile
34+
dimensions.</dd>
35+
<dt>base.css</dt>
36+
<dd>Reset, typography defaults, focus styles, accessibility helpers, and base element
37+
rules.</dd>
38+
<dt>controls.css</dt>
39+
<dd>Native HTML control scale, spacing, sizing, and typography.</dd>
40+
<dt>gamefoundrystudio.css</dt>
41+
<dd>Shared GameFoundry components and patterns.</dd>
42+
<dt>pages.css</dt>
43+
<dd>Page-specific layout helpers that consume shared tokens and colors.</dd>
44+
</dl>
45+
<h2>Design Rules</h2>
46+
<ul>
47+
<li>Use shared CSS layers before adding page-specific styles.</li>
48+
<li>Keep raw color values in <code>colors.css</code>.</li>
49+
<li>Keep non-color design values in <code>tokens.css</code>.</li>
50+
<li>Use current tool group names as the primary user-facing organization.</li>
51+
<li>Use badge and tile colors as secondary visual cues.</li>
52+
</ul>
53+
</div>
54+
</div>
55+
</div>
56+
</section>
57+
</main>
58+
<div data-partial="footer"></div>
59+
<script src="../assets/js/gamefoundry-partials.js" defer></script>
60+
</body>
61+
62+
</html>

‎GameFoundryStudio/assets/css/base.css‎

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,5 @@
1-
:root {
2-
--iron-black: #121212;
3-
--foundry-space: #070a12;
4-
--panel-slate: #0f172a;
5-
--steel-gray: #6b7280;
6-
--molten-orange: #ff7a00;
7-
--forge-orange: #ff8a2a;
8-
--forge-gold: #ffc857;
9-
--electric-blue: #4da3ff;
10-
--arcade-cyan: #22d3ee;
11-
--bg: #090b0f;
12-
--panel: #111722;
13-
--panel2: #151b25;
14-
--text: #f5f7fb;
15-
--muted: #aeb6c2;
16-
--orange: var(--molten-orange);
17-
--gold: var(--forge-gold);
18-
--cyan: #20d6ff;
19-
--purple: #b877ff;
20-
--green: #7dd957;
21-
--pink: #ff4f8b;
22-
--line: rgba(255, 255, 255, .12);
23-
--shadow: 0 20px 60px rgba(0, 0, 0, .45)
24-
}
25-
261
body {
27-
background: radial-gradient(circle at 20% 0%, rgba(255, 122, 0, .16), transparent 28%), radial-gradient(circle at 80% 10%, rgba(32, 214, 255, .1), transparent 24%), var(--bg);
2+
background: var(--body-background);
283
color: var(--text)
294
}
305

0 commit comments

Comments
 (0)