fix(twitter): fix chat

[watatomo]

• Fixed chat, closes Twitter: New "Chat" window doesn't get themed #1980

[Copilot]

Pull request overview

Targets issue #1980 by updating the Twitter Catppuccin userstyle to ensure the newly introduced Chat UI inherits the theme correctly under Twitter’s Lights out mode.

Changes:

• Adds additional CSS custom properties under body.LightsOut intended to match Chat UI design tokens (e.g., background/gray scale/primary).
• Adjusts foreground color for .bg-primary .text-white within body.LightsOut.
• Adds a new rule to override background color for .r-1otebnk.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

#lib.hslify() expands to a comma-separated HSL triplet (see lib/lib.less:95-99). If Twitter’s new Chat styles consume --background via modern syntax like hsl(var(--background) / <alpha>), the commas will make the color invalid and the theming won’t apply. Consider switching to a space-separated HSL helper (used in other styles in this repo) or to #lib.rgbify() if the upstream CSS expects rgb(var(--...)) tokens.

Suggested change

	--background: #lib.hslify(@base)[];
	--border-color: @surface0;
	--color: @overlay1;
	--color-emphasis: @text;
	--hover-bg-color: @surface0;
	--cpft-text-primary: @text;
	--color-gray-0: #lib.hslify(@surface0)[];
	--color-text: #lib.hslify(@text)[];
	--color-gray-100: #lib.hslify(@surface1)[];
	--color-gray-700: #lib.hslify(@overlay0)[];
	--primary: #lib.hslify(@accent)[];
	@base-h: hue(@base);
	@base-s: saturation(@base);
	@base-l: lightness(@base);
	@background-hsl: ~"@{base-h} @{base-s} @{base-l}";
	@surface0-h: hue(@surface0);
	@surface0-s: saturation(@surface0);
	@surface0-l: lightness(@surface0);
	@surface0-hsl: ~"@{surface0-h} @{surface0-s} @{surface0-l}";
	@text-h: hue(@text);
	@text-s: saturation(@text);
	@text-l: lightness(@text);
	@text-hsl: ~"@{text-h} @{text-s} @{text-l}";
	@surface1-h: hue(@surface1);
	@surface1-s: saturation(@surface1);
	@surface1-l: lightness(@surface1);
	@surface1-hsl: ~"@{surface1-h} @{surface1-s} @{surface1-l}";
	@overlay0-h: hue(@overlay0);
	@overlay0-s: saturation(@overlay0);
	@overlay0-l: lightness(@overlay0);
	@overlay0-hsl: ~"@{overlay0-h} @{overlay0-s} @{overlay0-l}";
	@accent-h: hue(@accent);
	@accent-s: saturation(@accent);
	@accent-l: lightness(@accent);
	@accent-hsl: ~"@{accent-h} @{accent-s} @{accent-l}";
	--background: @background-hsl;
	--border-color: @surface0;
	--color: @overlay1;
	--color-emphasis: @text;
	--hover-bg-color: @surface0;
	--cpft-text-primary: @text;
	--color-gray-0: @surface0-hsl;
	--color-text: @text-hsl;
	--color-gray-100: @surface1-hsl;
	--color-gray-700: @overlay0-hsl;
	--primary: @accent-hsl;

[uncenter]

Lol. We do need to add a new helper for space separated, but we don't have that yet.

[watatomo]

i don't know why it did this tbh