From 06b6a4e062e0a50583281d371ec03962e620092a Mon Sep 17 00:00:00 2001 From: kronst Date: Tue, 3 Mar 2026 16:44:25 -0600 Subject: [PATCH 1/2] Add Accord theme --- src/app/hooks/useTheme.ts | 9 ++++ src/app/styles/themes.css | 89 +++++++++++++++++++++++++++++++++++++++ src/colors.css.ts | 1 + src/index.css | 16 +++++++ 4 files changed, 115 insertions(+) mode change 100644 => 100755 src/app/hooks/useTheme.ts mode change 100644 => 100755 src/app/styles/themes.css mode change 100644 => 100755 src/colors.css.ts mode change 100644 => 100755 src/index.css diff --git a/src/app/hooks/useTheme.ts b/src/app/hooks/useTheme.ts old mode 100644 new mode 100755 index f053d9002a..865fe1378c --- a/src/app/hooks/useTheme.ts +++ b/src/app/hooks/useTheme.ts @@ -10,6 +10,7 @@ import { rosePineTheme, silverTheme, gruvdarkTheme, + accordTheme, } from '../../colors.css'; export enum ThemeKind { @@ -62,6 +63,12 @@ export const CinnyDarkTheme: Theme = { classNames: ['cinny-dark-theme', cinnyDarkTheme, onDarkFontWeight, 'prism-dark'], }; +export const AccordTheme: Theme = { + id: 'accord-theme', + kind: ThemeKind.Dark, + classNames: ['accord-theme', accordTheme, onDarkFontWeight, 'prism-dark'], +}; + export const useThemes = (): Theme[] => { const themes: Theme[] = useMemo( () => [ @@ -72,6 +79,7 @@ export const useThemes = (): Theme[] => { RosePineTheme, CinnyDarkTheme, GruvdarkTheme, + AccordTheme, ], [] ); @@ -89,6 +97,7 @@ export const useThemeNames = (): Record => [CinnyDarkTheme.id]: 'Cinny Dark', [RosePineTheme.id]: 'Rose Pine', [GruvdarkTheme.id]: 'GruvDark', + [AccordTheme.id]: 'Accord', }), [] ); diff --git a/src/app/styles/themes.css b/src/app/styles/themes.css old mode 100644 new mode 100755 index 94a9cf7ff8..19822c3549 --- a/src/app/styles/themes.css +++ b/src/app/styles/themes.css @@ -621,3 +621,92 @@ --sable-shadow: rgba(0, 0, 0, 0.6); --sable-overlay: rgba(15, 14, 12, 0.9); } + +/* --- Accord Theme --- */ +.accord-theme { + /* Background */ + --sable-bg-container: #2C2D32; + --sable-bg-container-hover: #35353a; + --sable-bg-container-active: #414248; + --sable-bg-container-line: #38393e; + --sable-bg-on-container: #f2f2f2; + + /* Surface */ + --sable-surface-container: #323339; + --sable-surface-container-hover: #3a3b41; + --sable-surface-container-active: #404040; + --sable-surface-container-line: #484a50; + --sable-surface-on-container: #fff; + + /* Surface Variant */ + --sable-surface-var-container: #393a41; + --sable-surface-var-container-hover: #404040; + --sable-surface-var-container-active: #4d4d4d; + --sable-surface-var-container-line: #3D3E44; + --sable-surface-var-on-container: #f2f2f2; + + /* Primary */ + --sable-primary-main: #5865f2; + --sable-primary-main-hover: #b2aae9; + --sable-primary-main-active: #ada3e8; + --sable-primary-main-line: #a79de6; + --sable-primary-on-main: #fff; + --sable-primary-container: #413c65; + --sable-primary-container-hover: #494370; + --sable-primary-container-active: #50497b; + --sable-primary-container-line: #575086; + --sable-primary-on-container: #e3e1f7; + + /* Secondary */ + --sable-sec-main: #ffffff; + --sable-sec-main-hover: #e5e5e5; + --sable-sec-main-active: #d9d9d9; + --sable-sec-main-line: #cccccc; + --sable-sec-on-main: #1a1a1a; + --sable-sec-container: #323339; + --sable-sec-container-hover: #4d4d4d; + --sable-sec-container-active: #595959; + --sable-sec-container-line: #46474E; + --sable-sec-on-container: #f2f2f2; + + /* Success */ + --sable-success-main: #85e0ba; + --sable-success-main-hover: #70dbaf; + --sable-success-main-active: #66d9a9; + --sable-success-main-line: #5cd6a3; + --sable-success-on-main: #0f3d2a; + --sable-success-container: #175c3f; + --sable-success-container-hover: #1a6646; + --sable-success-container-active: #1c704d; + --sable-success-container-line: #1f7a54; + --sable-success-on-container: #ccf2e2; + + /* Warning */ + --sable-warn-main: #e3ba91; + --sable-warn-main-hover: #dfaf7e; + --sable-warn-main-active: #dda975; + --sable-warn-main-line: #daa36c; + --sable-warn-on-main: #3f2a15; + --sable-warn-container: #5e3f20; + --sable-warn-container-hover: #694624; + --sable-warn-container-active: #734d27; + --sable-warn-container-line: #7d542b; + --sable-warn-on-container: #f3e2d1; + + /* Crtical */ + --sable-crit-main: #F7908B; + --sable-crit-main-hover: #e28d8d; + --sable-crit-main-active: #e08585; + --sable-crit-main-line: #de7d7d; + --sable-crit-on-main: #401c1c; + --sable-crit-container: #602929; + --sable-crit-container-hover: #6b2e2e; + --sable-crit-container-active: #763333; + --sable-crit-container-line: #803737; + --sable-crit-on-container: #f5d6d6; + + /* Other */ + --sable-focus-ring: rgba(255, 255, 255, .5); + --sable-shadow: rgba(0, 0, 0, 1); + --sable-overlay: rgba(0, 0, 0, .8) +} diff --git a/src/colors.css.ts b/src/colors.css.ts old mode 100644 new mode 100755 index 2243e818e6..aef6451251 --- a/src/colors.css.ts +++ b/src/colors.css.ts @@ -98,3 +98,4 @@ export const lightTheme = createTheme(color, sableThemeMapping); export const gruvdarkTheme = createTheme(color, sableThemeMapping); export const rosePineTheme = createTheme(color, sableThemeMapping); export const cinnyDarkTheme = createTheme(color, sableThemeMapping); +export const accordTheme = createTheme(color, sableThemeMapping); diff --git a/src/index.css b/src/index.css old mode 100644 new mode 100755 index e799f6d517..2da0ca1cc1 --- a/src/index.css +++ b/src/index.css @@ -57,6 +57,22 @@ --font-monospace: 'Space Mono', monospace; } +.accord-theme { + --tc-link: #76AFF6; + + --mx-uc-1: hsl(260, 100%, 75%); + --mx-uc-2: hsl(320, 100%, 75%); + --mx-uc-3: hsl(180, 100%, 65%); + --mx-uc-4: hsl(150, 100%, 70%); + --mx-uc-5: hsl(200, 100%, 75%); + --mx-uc-6: hsl(280, 80%, 70%); + --mx-uc-7: hsl(40, 100%, 75%); + --mx-uc-8: hsl(0, 100%, 75%); + + --font-secondary: 'Nunito Variable', var(--font-emoji), sans-serif; + --font-monospace: 'Space Mono', monospace; +} + html { height: 100%; overflow: hidden; From fd477aff6a0d9a051f88b5fa6cf80d7415d26548 Mon Sep 17 00:00:00 2001 From: kronst Date: Tue, 3 Mar 2026 17:07:54 -0600 Subject: [PATCH 2/2] ran 'npm run fmt' for formatting --- src/app/styles/themes.css | 28 ++++++++++++++-------------- src/index.css | 4 ++-- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/app/styles/themes.css b/src/app/styles/themes.css index 19822c3549..96fed600a2 100755 --- a/src/app/styles/themes.css +++ b/src/app/styles/themes.css @@ -625,26 +625,26 @@ /* --- Accord Theme --- */ .accord-theme { /* Background */ - --sable-bg-container: #2C2D32; + --sable-bg-container: #2c2d32; --sable-bg-container-hover: #35353a; --sable-bg-container-active: #414248; --sable-bg-container-line: #38393e; --sable-bg-on-container: #f2f2f2; - + /* Surface */ --sable-surface-container: #323339; --sable-surface-container-hover: #3a3b41; --sable-surface-container-active: #404040; --sable-surface-container-line: #484a50; --sable-surface-on-container: #fff; - + /* Surface Variant */ --sable-surface-var-container: #393a41; --sable-surface-var-container-hover: #404040; --sable-surface-var-container-active: #4d4d4d; - --sable-surface-var-container-line: #3D3E44; + --sable-surface-var-container-line: #3d3e44; --sable-surface-var-on-container: #f2f2f2; - + /* Primary */ --sable-primary-main: #5865f2; --sable-primary-main-hover: #b2aae9; @@ -656,7 +656,7 @@ --sable-primary-container-active: #50497b; --sable-primary-container-line: #575086; --sable-primary-on-container: #e3e1f7; - + /* Secondary */ --sable-sec-main: #ffffff; --sable-sec-main-hover: #e5e5e5; @@ -666,9 +666,9 @@ --sable-sec-container: #323339; --sable-sec-container-hover: #4d4d4d; --sable-sec-container-active: #595959; - --sable-sec-container-line: #46474E; + --sable-sec-container-line: #46474e; --sable-sec-on-container: #f2f2f2; - + /* Success */ --sable-success-main: #85e0ba; --sable-success-main-hover: #70dbaf; @@ -680,7 +680,7 @@ --sable-success-container-active: #1c704d; --sable-success-container-line: #1f7a54; --sable-success-on-container: #ccf2e2; - + /* Warning */ --sable-warn-main: #e3ba91; --sable-warn-main-hover: #dfaf7e; @@ -692,9 +692,9 @@ --sable-warn-container-active: #734d27; --sable-warn-container-line: #7d542b; --sable-warn-on-container: #f3e2d1; - + /* Crtical */ - --sable-crit-main: #F7908B; + --sable-crit-main: #f7908b; --sable-crit-main-hover: #e28d8d; --sable-crit-main-active: #e08585; --sable-crit-main-line: #de7d7d; @@ -704,9 +704,9 @@ --sable-crit-container-active: #763333; --sable-crit-container-line: #803737; --sable-crit-on-container: #f5d6d6; - + /* Other */ - --sable-focus-ring: rgba(255, 255, 255, .5); + --sable-focus-ring: rgba(255, 255, 255, 0.5); --sable-shadow: rgba(0, 0, 0, 1); - --sable-overlay: rgba(0, 0, 0, .8) + --sable-overlay: rgba(0, 0, 0, 0.8); } diff --git a/src/index.css b/src/index.css index 2da0ca1cc1..5935979fc0 100755 --- a/src/index.css +++ b/src/index.css @@ -58,8 +58,8 @@ } .accord-theme { - --tc-link: #76AFF6; - + --tc-link: #76aff6; + --mx-uc-1: hsl(260, 100%, 75%); --mx-uc-2: hsl(320, 100%, 75%); --mx-uc-3: hsl(180, 100%, 65%);