feat: Add new emoji assets and an UpdateBanner component.
Some checks failed
Build and Release / build-and-release (push) Failing after 3m28s
Some checks failed
Build and Release / build-and-release (push) Failing after 3m28s
This commit is contained in:
Bryan1029384756
372
packages/shared/src/styles/themes.css
Normal file
372
packages/shared/src/styles/themes.css
Normal file
@@ -0,0 +1,372 @@
|
||||
/* ============================================
|
||||
Discord Theme System
|
||||
4 themes: Light, Dark (default), Ash, Onyx
|
||||
CSS class mapping:
|
||||
Light → .theme-light
|
||||
Dark → .theme-dark
|
||||
Ash → .theme-darker
|
||||
Onyx → .theme-midnight
|
||||
============================================ */
|
||||
|
||||
/* ============================================
|
||||
DARK THEME (default)
|
||||
============================================ */
|
||||
.theme-dark {
|
||||
/* Backgrounds */
|
||||
--background-base-low: #313338;
|
||||
--background-base-lower: #2b2d31;
|
||||
--background-base-lowest: #1e1f22;
|
||||
--background-surface-high: #3c3e44;
|
||||
--background-surface-higher: #3f4147;
|
||||
--background-surface-highest: #43454b;
|
||||
--chat-background: #313338;
|
||||
--channeltextarea-background: #383a40;
|
||||
--modal-background: #313338;
|
||||
--panel-bg: #2b2d31;
|
||||
--embed-background: #2f3136;
|
||||
|
||||
/* Text */
|
||||
--text-default: #f2f3f5;
|
||||
--text-strong: #f2f3f5;
|
||||
--text-muted: #949ba4;
|
||||
--text-subtle: #b5bac1;
|
||||
--text-link: #00a8fc;
|
||||
--channels-default: #949ba4;
|
||||
--text-feedback-critical: #ed4245;
|
||||
|
||||
/* Interactive */
|
||||
--interactive-background-hover: rgba(78, 80, 88, 0.3);
|
||||
--interactive-background-active: rgba(78, 80, 88, 0.48);
|
||||
--interactive-background-selected: rgba(78, 80, 88, 0.6);
|
||||
--interactive-icon-default: #b5bac1;
|
||||
--interactive-icon-hover: #dbdee1;
|
||||
--interactive-icon-active: #ffffff;
|
||||
--interactive-text-default: #b5bac1;
|
||||
--interactive-text-hover: #dbdee1;
|
||||
--interactive-text-active: #ffffff;
|
||||
|
||||
/* Borders */
|
||||
--border-subtle: #1e1f22;
|
||||
--border-muted: rgba(255, 255, 255, 0.04);
|
||||
--border-normal: rgba(255, 255, 255, 0.2);
|
||||
--border-strong: rgba(255, 255, 255, 0.44);
|
||||
--app-frame-border: color-mix(in oklab,hsl(240 calc(1*4%) 60.784% /0.12156862745098039) 100%,hsl(0 0% 0% /0.12156862745098039) 0%);
|
||||
|
||||
/* Icons */
|
||||
--icon-default: #dbdee1;
|
||||
--icon-strong: #ffffff;
|
||||
--icon-muted: #949ba4;
|
||||
--icon-subtle: #b5bac1;
|
||||
|
||||
/* Controls */
|
||||
--control-primary-background-default: #5865f2;
|
||||
--control-primary-background-hover: #4752c4;
|
||||
--control-primary-background-active: #3b43a8;
|
||||
--control-critical-primary-background-default: #ed4245;
|
||||
|
||||
/* Input */
|
||||
--input-background-default: #383a40;
|
||||
--input-border-default: rgba(255, 255, 255, 0.2);
|
||||
--input-text-default: #dbdee1;
|
||||
|
||||
/* Scrollbar */
|
||||
--scrollbar-auto-thumb: #1a1b1e;
|
||||
--scrollbar-thin-thumb: #1a1b1e;
|
||||
|
||||
/* Message */
|
||||
--message-background-hover: rgba(0, 0, 0, 0.06);
|
||||
|
||||
/* Compatibility aliases (map old names → new semantic names) */
|
||||
--bg-primary: #313338;
|
||||
--bg-secondary: #2b2d31;
|
||||
--bg-tertiary: #1e1f22;
|
||||
--text-normal: #dbdee1;
|
||||
--header-primary: #f2f3f5;
|
||||
--header-secondary: #b5bac1;
|
||||
--interactive-normal: #b5bac1;
|
||||
--interactive-hover: #dbdee1;
|
||||
--interactive-active: #ffffff;
|
||||
--brand-experiment: #5865f2;
|
||||
--brand-experiment-hover: #4752c4;
|
||||
--input-background: #383a40;
|
||||
--danger: #ed4245;
|
||||
--background-modifier-hover: rgba(78, 80, 88, 0.3);
|
||||
--background-modifier-active: rgba(78, 80, 88, 0.48);
|
||||
--background-modifier-selected: rgba(78, 80, 88, 0.6);
|
||||
--div-border: #1e1f22;
|
||||
|
||||
--text-feedback-warning: color-mix(in oklab, hsl(38.455 calc(1*100%) 43.137% /1) 100%, #000 0%);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
LIGHT THEME
|
||||
============================================ */
|
||||
.theme-light {
|
||||
/* Backgrounds */
|
||||
--background-base-low: #ffffff;
|
||||
--background-base-lower: #f2f3f5;
|
||||
--background-base-lowest: #e3e5e8;
|
||||
--background-surface-high: #ffffff;
|
||||
--background-surface-higher: #ffffff;
|
||||
--background-surface-highest: #ffffff;
|
||||
--chat-background: #ffffff;
|
||||
--channeltextarea-background: #ebedef;
|
||||
--modal-background: #ffffff;
|
||||
--panel-bg: #f2f3f5;
|
||||
--embed-background: #f2f3f5;
|
||||
|
||||
/* Text */
|
||||
--text-default: #313338;
|
||||
--text-strong: #060607;
|
||||
--text-muted: #5c6470;
|
||||
--text-subtle: #4e5058;
|
||||
--text-link: #006ce7;
|
||||
--channels-default: #5c6470;
|
||||
--text-feedback-critical: #da373c;
|
||||
|
||||
/* Interactive */
|
||||
--interactive-background-hover: rgba(116, 124, 138, 0.14);
|
||||
--interactive-background-active: rgba(116, 124, 138, 0.22);
|
||||
--interactive-background-selected: rgba(116, 124, 138, 0.30);
|
||||
--interactive-icon-default: #4e5058;
|
||||
--interactive-icon-hover: #313338;
|
||||
--interactive-icon-active: #060607;
|
||||
--interactive-text-default: #4e5058;
|
||||
--interactive-text-hover: #313338;
|
||||
--interactive-text-active: #060607;
|
||||
|
||||
/* Borders */
|
||||
--border-subtle: rgba(0, 0, 0, 0.28);
|
||||
--border-muted: rgba(0, 0, 0, 0.2);
|
||||
--border-normal: rgba(0, 0, 0, 0.36);
|
||||
--border-strong: rgba(0, 0, 0, 0.48);
|
||||
--app-frame-border: color-mix(in oklab,hsl(240 calc(1*4%) 60.784% /0.12156862745098039) 100%,hsl(0 0% 0% /0.12156862745098039) 0%);
|
||||
|
||||
/* Icons */
|
||||
--icon-default: #313338;
|
||||
--icon-strong: #060607;
|
||||
--icon-muted: #5c6470;
|
||||
--icon-subtle: #4e5058;
|
||||
|
||||
/* Controls */
|
||||
--control-primary-background-default: #5865f2;
|
||||
--control-primary-background-hover: #4752c4;
|
||||
--control-primary-background-active: #3b43a8;
|
||||
--control-critical-primary-background-default: #da373c;
|
||||
|
||||
/* Input */
|
||||
--input-background-default: #e3e5e8;
|
||||
--input-border-default: rgba(0, 0, 0, 0.36);
|
||||
--input-text-default: #313338;
|
||||
|
||||
/* Scrollbar */
|
||||
--scrollbar-auto-thumb: #c1c3c7;
|
||||
--scrollbar-thin-thumb: #c1c3c7;
|
||||
|
||||
/* Message */
|
||||
--message-background-hover: rgba(0, 0, 0, 0.06);
|
||||
|
||||
/* Compatibility aliases */
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f2f3f5;
|
||||
--bg-tertiary: #e3e5e8;
|
||||
--text-normal: #313338;
|
||||
--header-primary: #060607;
|
||||
--header-secondary: #4e5058;
|
||||
--interactive-normal: #4e5058;
|
||||
--interactive-hover: #313338;
|
||||
--interactive-active: #060607;
|
||||
--brand-experiment: #5865f2;
|
||||
--brand-experiment-hover: #4752c4;
|
||||
--input-background: #e3e5e8;
|
||||
--danger: #da373c;
|
||||
--background-modifier-hover: rgba(116, 124, 138, 0.14);
|
||||
--background-modifier-active: rgba(116, 124, 138, 0.22);
|
||||
--background-modifier-selected: rgba(116, 124, 138, 0.30);
|
||||
--div-border: #e1e2e4;
|
||||
|
||||
--text-feedback-warning: color-mix(in oklab, hsl(38.455 calc(1*100%) 43.137% /1) 100%, #000 0%);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
ASH THEME (theme-darker)
|
||||
============================================ */
|
||||
.theme-darker {
|
||||
/* Backgrounds */
|
||||
--background-base-low: #202225;
|
||||
--background-base-lower: #1a1b1e;
|
||||
--background-base-lowest: #111214;
|
||||
--background-surface-high: #292b2f;
|
||||
--background-surface-higher: #2e3035;
|
||||
--background-surface-highest: #33363c;
|
||||
--chat-background: #202225;
|
||||
--channeltextarea-background: #252529;
|
||||
--modal-background: #292b2f;
|
||||
--panel-bg: color-mix(in oklab, hsl(240 calc(1*5.882%) 13.333% /1) 100%, #000 0%);
|
||||
--embed-background: #242529;
|
||||
|
||||
/* Text */
|
||||
--text-default: #f0f1f3;
|
||||
--text-strong: #f5f5f7;
|
||||
--text-muted: #858993;
|
||||
--text-subtle: #a0a4ad;
|
||||
--text-link: #00a8fc;
|
||||
--channels-default: #858993;
|
||||
--text-feedback-critical: #ed4245;
|
||||
|
||||
/* Interactive */
|
||||
--interactive-background-hover: rgba(78, 80, 88, 0.15);
|
||||
--interactive-background-active: rgba(78, 80, 88, 0.3);
|
||||
--interactive-background-selected: rgba(78, 80, 88, 0.4);
|
||||
--interactive-icon-default: #a0a4ad;
|
||||
--interactive-icon-hover: #dddfe4;
|
||||
--interactive-icon-active: #f5f5f7;
|
||||
--interactive-text-default: #a0a4ad;
|
||||
--interactive-text-hover: #dddfe4;
|
||||
--interactive-text-active: #f5f5f7;
|
||||
|
||||
/* Borders */
|
||||
--border-subtle: rgba(255, 255, 255, 0.12);
|
||||
--border-muted: rgba(255, 255, 255, 0.04);
|
||||
--border-normal: rgba(255, 255, 255, 0.2);
|
||||
--border-strong: rgba(255, 255, 255, 0.44);
|
||||
--app-frame-border: color-mix(in oklab,hsl(240 calc(1*4%) 60.784% /0.12156862745098039) 100%,hsl(0 0% 0% /0.12156862745098039) 0%);
|
||||
|
||||
/* Icons */
|
||||
--icon-default: #dddfe4;
|
||||
--icon-strong: #f5f5f7;
|
||||
--icon-muted: #858993;
|
||||
--icon-subtle: #a0a4ad;
|
||||
|
||||
/* Controls */
|
||||
--control-primary-background-default: #5865f2;
|
||||
--control-primary-background-hover: #4752c4;
|
||||
--control-primary-background-active: #3b43a8;
|
||||
--control-critical-primary-background-default: #ed4245;
|
||||
|
||||
/* Input */
|
||||
--input-background-default: #252529;
|
||||
--input-border-default: rgba(255, 255, 255, 0.2);
|
||||
--input-text-default: #dddfe4;
|
||||
|
||||
/* Scrollbar */
|
||||
--scrollbar-auto-thumb: #15161a;
|
||||
--scrollbar-thin-thumb: #15161a;
|
||||
|
||||
/* Message */
|
||||
--message-background-hover: rgba(0, 0, 0, 0.08);
|
||||
|
||||
/* Compatibility aliases */
|
||||
--bg-primary: #202225;
|
||||
--bg-secondary: #1a1b1e;
|
||||
--bg-tertiary: #121214;
|
||||
--text-normal: #dddfe4;
|
||||
--header-primary: #f5f5f7;
|
||||
--header-secondary: #a0a4ad;
|
||||
--interactive-normal: #a0a4ad;
|
||||
--interactive-hover: #dddfe4;
|
||||
--interactive-active: #f5f5f7;
|
||||
--brand-experiment: #5865f2;
|
||||
--brand-experiment-hover: #4752c4;
|
||||
--input-background: #252529;
|
||||
--danger: #ed4245;
|
||||
--background-modifier-hover: rgba(78, 80, 88, 0.15);
|
||||
--background-modifier-active: rgba(78, 80, 88, 0.3);
|
||||
--background-modifier-selected: rgba(78, 80, 88, 0.4);
|
||||
--div-border: #111214;
|
||||
|
||||
--text-feedback-warning: color-mix(in oklab, hsl(38.455 calc(1*100%) 43.137% /1) 100%, #000 0%);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
ONYX THEME (theme-midnight)
|
||||
============================================ */
|
||||
.theme-midnight {
|
||||
/* Backgrounds */
|
||||
--background-base-low: #0c0c14;
|
||||
--background-base-lower: #080810;
|
||||
--background-base-lowest: #000000;
|
||||
--background-surface-high: #141422;
|
||||
--background-surface-higher: #1a1a2e;
|
||||
--background-surface-highest: #202038;
|
||||
--chat-background: #000000;
|
||||
--channeltextarea-background: #1a1a2e;
|
||||
--modal-background: #141422;
|
||||
--panel-bg: #0c0c14;
|
||||
--embed-background: #161626;
|
||||
|
||||
/* Text */
|
||||
--text-default: #e0def0;
|
||||
--text-strong: #f8f8fc;
|
||||
--text-muted: #7a7687;
|
||||
--text-subtle: #a8a5b5;
|
||||
--text-link: #00a8fc;
|
||||
--channels-default: #7a7687;
|
||||
--text-feedback-critical: #ed4245;
|
||||
|
||||
/* Interactive */
|
||||
--interactive-background-hover: rgba(78, 73, 106, 0.2);
|
||||
--interactive-background-active: rgba(78, 73, 106, 0.36);
|
||||
--interactive-background-selected: rgba(78, 73, 106, 0.48);
|
||||
--interactive-icon-default: #a8a5b5;
|
||||
--interactive-icon-hover: #e0def0;
|
||||
--interactive-icon-active: #f8f8fc;
|
||||
--interactive-text-default: #a8a5b5;
|
||||
--interactive-text-hover: #e0def0;
|
||||
--interactive-text-active: #f8f8fc;
|
||||
|
||||
/* Borders */
|
||||
--border-subtle: rgba(255, 255, 255, 0.2);
|
||||
--border-muted: rgba(255, 255, 255, 0.16);
|
||||
--border-normal: rgba(255, 255, 255, 0.24);
|
||||
--border-strong: rgba(255, 255, 255, 0.44);
|
||||
--app-frame-border: color-mix(in oklab,hsl(240 calc(1*4%) 60.784% /0.12156862745098039) 100%,hsl(0 0% 0% /0.12156862745098039) 0%);
|
||||
|
||||
/* Icons */
|
||||
--icon-default: #e0def0;
|
||||
--icon-strong: #f8f8fc;
|
||||
--icon-muted: #7a7687;
|
||||
--icon-subtle: #a8a5b5;
|
||||
|
||||
/* Controls */
|
||||
--control-primary-background-default: #5865f2;
|
||||
--control-primary-background-hover: #4752c4;
|
||||
--control-primary-background-active: #3b43a8;
|
||||
--control-critical-primary-background-default: #ed4245;
|
||||
|
||||
/* Input */
|
||||
--input-background-default: #1a1a2e;
|
||||
--input-border-default: rgba(255, 255, 255, 0.24);
|
||||
--input-text-default: #e0def0;
|
||||
|
||||
/* Scrollbar */
|
||||
--scrollbar-auto-thumb: #1a1a2e;
|
||||
--scrollbar-thin-thumb: #1a1a2e;
|
||||
|
||||
/* Message */
|
||||
--message-background-hover: rgba(0, 0, 0, 0.12);
|
||||
|
||||
/* Compatibility aliases */
|
||||
--bg-primary: #0c0c14;
|
||||
--bg-secondary: #080810;
|
||||
--bg-tertiary: #000000;
|
||||
--text-normal: #e0def0;
|
||||
--header-primary: #f8f8fc;
|
||||
--header-secondary: #a8a5b5;
|
||||
--interactive-normal: #a8a5b5;
|
||||
--interactive-hover: #e0def0;
|
||||
--interactive-active: #f8f8fc;
|
||||
--brand-experiment: #5865f2;
|
||||
--brand-experiment-hover: #4752c4;
|
||||
--input-background: #1a1a2e;
|
||||
--danger: #ed4245;
|
||||
--background-modifier-hover: rgba(78, 73, 106, 0.2);
|
||||
--background-modifier-active: rgba(78, 73, 106, 0.36);
|
||||
--background-modifier-selected: rgba(78, 73, 106, 0.48);
|
||||
--div-border: #080810;
|
||||
|
||||
--text-feedback-warning: color-mix(in oklab, hsl(38.455 calc(1*100%) 43.137% /1) 100%, #000 0%);
|
||||
}
|
||||
Reference in New Issue
Block a user