Establish theme v2 structure and migrate home page as first consumer - PR_26152_023-theme-v2-home-migration

Author: ToolboxAid

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

@@ -0,0 +1 @@
+/* Home migration does not require reusable accordion patterns yet. */

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

@@ -0,0 +1,66 @@
+.btn {
+  border-radius: var(--radius-md);
+  padding: var(--space-10) var(--space-14);
+  font: inherit;
+  font-weight: var(--font-weight-bold);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: var(--border-standard);
+  background: var(--panel-soft);
+  color: var(--text)
+}
+
+.btn.primary {
+  background: var(--button-primary-background);
+  border-color: var(--orange-border-strong)
+}
+
+.btn.cyan {
+  background: var(--button-cyan-background)
+}
+
+.btn[aria-disabled=true] {
+  opacity: var(--opacity-disabled)
+}
+
+.return-to-top {
+  min-width: var(--space-20);
+  width: var(--space-44);
+  height: var(--space-44);
+  padding: var(--space-0);
+  border: var(--border-standard);
+  border-radius: var(--radius-pill);
+  background: var(--panel-soft);
+  color: var(--gold);
+  line-height: var(--line-height-single);
+  display: inline-grid;
+  place-items: center;
+  position: fixed;
+  right: var(--return-to-top-offset);
+  bottom: var(--return-to-top-offset);
+  z-index: var(--z-index-lg);
+  box-shadow: var(--shadow-md);
+  opacity: var(--opacity-hidden);
+  pointer-events: none;
+  transform: translateY(var(--return-to-top-shift));
+  transition: opacity var(--transition-duration-fast) ease, transform var(--transition-duration-fast) ease, color var(--transition-duration-fast) ease, border-color var(--transition-duration-fast) ease, background var(--transition-duration-fast) ease
+}
+
+.return-to-top span {
+  transform: translateY(var(--return-to-top-glyph-shift))
+}
+
+.return-to-top.is-visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(var(--space-0))
+}
+
+.return-to-top:hover,
+.return-to-top:focus-visible {
+  border-color: var(--gold);
+  background: color-mix(in srgb, var(--gold) 24%, var(--panel));
+  outline: none
+}

GameFoundryStudio/assets/css/theme/v2/colors.css

@@ -0,0 +1,67 @@
+:root {
+  --iron-black: #121212;
+  --foundry-space: #070a12;
+  --panel-slate: #0f172a;
+  --steel-gray: #6b7280;
+  --molten-orange: #ff7a00;
+  --forge-orange: #ff8a2a;
+  --forge-gold: #ffc857;
+  --electric-blue: #4da3ff;
+  --arcade-cyan: #22d3ee;
+  --bot-cyan: #20d6ff;
+  --purple: #b877ff;
+  --green: #7dd957;
+  --pink: #ff4f8b;
+  --red: #ff4d4d;
+  --deep-red: #ff5757;
+  --mint: #22c55e;
+  --white: #ffffff;
+  --button-primary-end: #b83b00;
+  --button-cyan-start: #0891b2;
+  --button-cyan-end: #0e7490;
+  --switch-off: #1f2937;
+  --tool-image-bg: #080d14;
+  --dialog-bg: #0c111a;
+  --bg: #090b0f;
+  --panel: #111722;
+  --panel2: #151b25;
+  --panel-soft: rgba(255, 255, 255, .04);
+  --panel-soft-strong: rgba(255, 255, 255, .055);
+  --panel-soft-subtle: rgba(255, 255, 255, .025);
+  --panel-overlay: rgba(7, 10, 18, .48);
+  --panel-overlay-strong: rgba(7, 10, 18, .58);
+  --header-bg: rgba(9, 11, 15, .82);
+  --submenu-bg: rgba(9, 11, 15, .98);
+  --orange-soft: rgba(255, 122, 0, .08);
+  --orange-soft-medium: rgba(255, 122, 0, .10);
+  --orange-soft-strong: rgba(255, 122, 0, .14);
+  --gold-soft: rgba(255, 200, 87, .10);
+  --blue-soft: rgba(77, 163, 255, .10);
+  --cyan-soft: rgba(34, 211, 238, .10);
+  --purple-soft: rgba(184, 119, 255, .08);
+  --steel-soft: rgba(107, 114, 128, .14);
+  --transparent: transparent;
+  --body-background: radial-gradient(circle at 20% 0%, rgba(255, 122, 0, .16), var(--transparent) 28%), radial-gradient(circle at 80% 10%, rgba(32, 214, 255, .10), var(--transparent) 24%), var(--bg);
+  --card-background: linear-gradient(180deg, var(--panel-soft-strong), var(--panel-soft-subtle));
+  --game-art-background: linear-gradient(135deg, rgba(255, 122, 0, .22), rgba(77, 163, 255, .15));
+  --cta-background: linear-gradient(135deg, rgba(255, 122, 0, .18), rgba(77, 163, 255, .11));
+  --icon-background: linear-gradient(135deg, rgba(255, 122, 0, .28), rgba(77, 163, 255, .16));
+  --button-primary-background: linear-gradient(135deg, var(--orange), var(--button-primary-end));
+  --button-cyan-background: linear-gradient(135deg, var(--button-cyan-start), var(--button-cyan-end));
+  --text: #f5f7fb;
+  --muted: #aeb6c2;
+  --orange: var(--molten-orange);
+  --gold: var(--forge-gold);
+  --cyan: var(--bot-cyan);
+  --line: rgba(255, 255, 255, .12);
+  --swatch-border: rgba(255, 255, 255, .28);
+  --swatch-shadow-color: rgba(0, 0, 0, .16);
+  --shadow-color: rgba(0, 0, 0, .28);
+  --shadow-color-strong: rgba(0, 0, 0, .45);
+  --orange-shadow-color: rgba(255, 122, 0, .24);
+  --orange-border: rgba(255, 122, 0, .38);
+  --orange-border-strong: rgba(255, 122, 0, .60);
+  --orange-border-muted: rgba(255, 122, 0, .35);
+  --gold-border-muted: rgba(255, 200, 87, .35);
+  --cyan-border-muted: rgba(32, 214, 255, .35)
+}

GameFoundryStudio/assets/css/theme/v2/controls.css

@@ -0,0 +1 @@
+/* Home migration does not require reusable control patterns yet. */

GameFoundryStudio/assets/css/theme/v2/dialogs.css

@@ -0,0 +1 @@
+/* Home migration does not require reusable dialog patterns yet. */

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

@@ -0,0 +1,20 @@
+button,
+input[type="button"],
+input[type="submit"],
+input[type="reset"] {
+  border-radius: var(--radius-md);
+  padding: var(--space-10) var(--space-14);
+  font: inherit;
+  font-weight: var(--font-weight-bold);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer
+}
+
+button:disabled,
+input[type="button"]:disabled,
+input[type="submit"]:disabled,
+input[type="reset"]:disabled {
+  cursor: not-allowed
+}