JonKazama-Hellion/HellionChat
1
0
Fork 0
Code Issues Pull Requests Actions Releases 28 Activity

Align HellionStyle with the Hellion Online Media brand palette

Browse Source 
The plugin theme drifted from the website palette over time: cyan
sat at #00B8D4 instead of the brand #00BED2, the warm highlights
were industrial amber rather than Ember Orange, and active tabs and
title bars were rendered in slate violet — a shade not part of the
brand at all.

This commit moves every HellionStyle slot onto the Arctic Cyan +
Ember Glow tokens documented in the website's BRANDING.md:

  - Primary cyan slots (Button, CheckMark, Slider, Separator) now
    use brand-color / brand-color-light / brand-color-dark
  - Window title bars and the active tab use brand-color-dark as
    Identity teal — slightly varied so it reads as identity rather
    than as another action surface
  - Unfocused-active tabs drop to a deeper teal so the unfocused
    window's tab is still visible without pulling focus
  - Resize grips and scrollbar grabs lift into Ember Orange on hover
    and active states, replacing industrial amber
  - Window, child, popup, frame and header surfaces follow the
    brand background ladder (#070B12, #0C1220, #141E30, #1A2538,
    #22303F)
  - Borders use the brand cyan at 40% alpha (matches --border-brand
    on the website) instead of neutral steel grey

The slate violet tertiary palette is gone. Brand tokens are
declared once and the slot constants alias them, so a future brand
shift only needs to touch the Identity / Accent / Primary stages.
This commit is contained in:
Jon Kazama
2026-05-02 03:25:29 +02:00
parent 1f2cb000a2
commit 8e964ca498
1 changed files with 63 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ChatTwo/Ui/HellionStyle.cs
+63 -47
View File
@@ -21,63 +21,79 @@ internal static class HellionStyle
{ {
// Encoded as 0xRRGGBBAA, matching ChatTwo convention (see Settings.cs // Encoded as 0xRRGGBBAA, matching ChatTwo convention (see Settings.cs
// Ko-fi buttons). RgbaToAbgr handles the byte swap to the format ImGui // Ko-fi buttons). RgbaToAbgr handles the byte swap to the format ImGui
// expects. // expects. Hex values are sourced from the Hellion Online Media brand
// guide ("Arctic Cyan + Ember Glow", BRANDING.md in the website repo).
// Primary — cyan-teal for actionable controls (buttons, checks, sliders). // Primary — Arctic Cyan, used for every interactive control (buttons,
private const uint PrimaryRgba = 0x00B8D4FF; // checks, sliders, separators when hovered). Three brand stages plus a
private const uint PrimaryHoverRgba = 0x26C6DAFF; // hover that lifts to brand-color-light and a press that drops to
private const uint PrimaryActiveRgba = 0x00838FFF; // brand-color-dark.
private const uint PrimaryRgba = 0x00BED2FF; // brand-color
private const uint PrimaryHoverRgba = 0x4DD9E8FF; // brand-color-light
private const uint PrimaryActiveRgba = 0x0097A7FF; // brand-color-dark
// Secondary — industrial amber, used as a warm highlight for active // Identity — brand-color-dark teal for window title bars and the
// states (tab borders, resize grips, scrollbar grabs). // active tab. Sits visibly below the primary cyan on buttons so the
private const uint SecondaryRgba = 0xFFB300FF; // user sees "where am I" (deep teal) versus "what can I click"
private const uint SecondaryHoverRgba = 0xFFC940FF; // (brand cyan) without leaving the cyan family.
private const uint SecondaryActiveRgba = 0xC68400FF; private const uint IdentityRgba = 0x0097A7FF; // brand-color-dark
private const uint IdentityHoverRgba = 0x4DD9E8FF; // brand-color-light
private const uint IdentityDeepRgba = 0x005670FF; // dimmer teal for unfocused-active tab
// Tertiary — slate violet, reserved for title bars and the active tab // Accent — Ember Orange for warm highlights on grips and scrollbar
// background so identity beats out the cyan accent without competing // pulls. Replaces the previous industrial amber so the plugin matches
// with it on action controls. // the website's CTA palette. AccentActive is reserved for any future
private const uint TertiaryRgba = 0x7B61FFFF; // pressed-state on accent surfaces; the current slots only need
private const uint TertiaryHoverRgba = 0x9580FFFF; // AccentRgba and AccentHoverRgba.
private const uint TertiaryActiveRgba = 0x5E45D9FF; private const uint AccentRgba = 0xF97316FF; // accent-color
private const uint AccentHoverRgba = 0xFB923CFF; // accent-color-light
// Surfaces — deep slate window/frame backgrounds, steel borders. // Surfaces — Hellion brand background ladder. Window darkest, frame
private const uint WindowBgRgba = 0x0E1A20FF; // hover ladder climbs into surface tones. Matches the website's
private const uint ChildBgRgba = 0x102027FF; // background / background-medium / background-light / surface vars.
private const uint PopupBgRgba = 0x102027FF; private const uint WindowBgRgba = 0x070B12FF; // background
private const uint FrameBgRgba = 0x162831FF; private const uint ChildBgRgba = 0x0C1220FF; // background-medium
private const uint FrameBgHoverRgba = 0x1F3540FF; private const uint PopupBgRgba = 0x0C1220FF; // background-medium
private const uint FrameBgActiveRgba = 0x274250FF; private const uint FrameBgRgba = 0x141E30FF; // background-light
private const uint BorderRgba = 0x37474FFF; private const uint FrameBgHoverRgba = 0x1A2538FF; // surface
private const uint FrameBgActiveRgba = 0x22303FFF; // surface-hover
// Cyan-tinted border — matches website --border-brand (cyan @ 40% α).
private const uint BorderRgba = 0x00BED266;
private const uint BorderShadowRgba = 0x00000000; private const uint BorderShadowRgba = 0x00000000;
// Headers / collapsing-headers / tree nodes / selectables. // Headers / collapsing-headers / tree nodes / selectables — same
private const uint HeaderRgba = 0x1B2C36FF; // surface ladder as frames so panels feel consistent.
private const uint HeaderHoverRgba = 0x263A45FF; private const uint HeaderRgba = 0x141E30FF;
private const uint HeaderActiveRgba = 0x324A57FF; private const uint HeaderHoverRgba = 0x1A2538FF;
private const uint HeaderActiveRgba = 0x22303FFF;
// Title bars — tertiary identity for the active state. // Title bars — Identity teal on active so the focused window reads
private const uint TitleBgRgba = 0x0E1A20FF; // as "yours" without using accent or primary slots.
private const uint TitleBgActiveRgba = 0x5E45D9FF; private const uint TitleBgRgba = 0x070B12FF;
private const uint TitleBgCollapsedRgba = 0x0A1318FF; private const uint TitleBgActiveRgba = IdentityRgba;
private const uint TitleBgCollapsedRgba = 0x05080EFF;
// Tabs — tertiary tint, secondary highlight while hovered/unfocused. // Tabs — neutral inactive, Identity-light on hover, Identity teal on
private const uint TabRgba = 0x162831FF; // active. Unfocused-active uses the deeper Identity stage so an
private const uint TabHoveredRgba = 0x9580FFFF; // unfocused window's active tab still reads but does not pull focus.
private const uint TabActiveRgba = 0x7B61FFFF; private const uint TabRgba = 0x141E30FF;
private const uint TabUnfocusedRgba = 0x12222AFF; private const uint TabHoveredRgba = IdentityHoverRgba;
private const uint TabUnfocusedActiveRgba = 0x5E45D9FF; private const uint TabActiveRgba = IdentityRgba;
private const uint TabUnfocusedRgba = 0x0C1220FF;
private const uint TabUnfocusedActiveRgba = IdentityDeepRgba;
// Scrollbar — slate base, secondary amber on grab. // Scrollbar — Ember on grab so the pull stands out without competing
private const uint ScrollbarBgRgba = 0x0E1A20FF; // with the cyan action buttons. Idle grab is a subtle surface tone,
private const uint ScrollbarGrabRgba = 0x37474FFF; // hover/active climb into accent.
private const uint ScrollbarGrabHoveredRgba = 0xFFC940FF; private const uint ScrollbarBgRgba = 0x070B12FF;
private const uint ScrollbarGrabActiveRgba = 0xFFB300FF; private const uint ScrollbarGrabRgba = 0x22303FFF; // surface-hover
private const uint ScrollbarGrabHoveredRgba = AccentHoverRgba;
private const uint ScrollbarGrabActiveRgba = AccentRgba;
// Resize grip — secondary amber for the active corner pull. // Resize grip — same Ember treatment as the scrollbar.
private const uint ResizeGripRgba = 0x37474FFF; private const uint ResizeGripRgba = 0x141E30FF;
private const uint ResizeGripHoveredRgba = 0xFFC940FF; private const uint ResizeGripHoveredRgba = AccentHoverRgba;
private const uint ResizeGripActiveRgba = 0xFFB300FF; private const uint ResizeGripActiveRgba = AccentRgba;
// Separator and check mark / slider follow the primary cyan. // Separator and check mark / slider follow the primary cyan.