feat: add OC Neon Glow theme CSS with theme contract variables

- Add theme contract variables (--accent-primary, --accent-secondary,
  --accent-gradient, --border-glow) to tokens.css :root block
- Create theme-neon-glow.css with body.theme-neon-glow overrides:
  deeper blacks, OC cyan (#00c8ff) to purple (#7b2fff) brand palette,
  subtle border glow, and semantic color aliases
- Import theme-neon-glow.css in main.ts alongside other style imports
This commit is contained in:
jevb
2026-03-27 11:32:36 +01:00
parent 1eaf9ad72c
commit 8ff4077a8b
3 changed files with 40 additions and 0 deletions
+1
View File
@@ -4,6 +4,7 @@ import "@styles/tokens.css";
import "@styles/base.css";
import "@styles/login.css";
import "@styles/app.css";
import "@styles/theme-neon-glow.css";
import { installGlobalErrorHandlers, safeMount } from "@lib/safe-render";
import { createRouter } from "@lib/router";
@@ -0,0 +1,33 @@
/* OC Neon Glow theme — the OwnCord brand identity.
Applied as a class on <body> to override tokens.css defaults. */
body.theme-neon-glow {
/* Backgrounds — deeper, darker */
--bg-tertiary: #0d0e10;
--bg-secondary: #111214;
--bg-primary: #1a1b1e;
--bg-input: #252629;
--bg-hover: #1f2023;
--bg-active: #2a2b2e;
/* Accent — OC cyan/purple */
--accent: #00c8ff;
--accent-hover: #7b2fff;
--accent-active: #6620e0;
--accent-primary: #00c8ff;
--accent-secondary: #7b2fff;
--accent-gradient: linear-gradient(135deg, #00c8ff, #7b2fff);
/* Border glow */
--border: rgba(0, 200, 255, 0.08);
--border-strong: rgba(0, 200, 255, 0.15);
--border-glow: rgba(0, 200, 255, 0.08);
/* Text link */
--text-link: #00c8ff;
/* Semantic colors (theme contract) */
--color-success: #23a55a;
--color-warning: #f0b232;
--color-danger: #f23f43;
}
@@ -23,6 +23,12 @@
--accent-hover: #4752c4;
--accent-active: #3c45a5;
/* Theme contract — overrideable by custom themes */
--accent-primary: var(--accent);
--accent-secondary: var(--accent-hover);
--accent-gradient: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
--border-glow: transparent;
/* Text */
--text-normal: #dbdee1;
--text-muted: #949ba4;