From ce234447a0128fdea33ee53a0c89e3d9ab73d175 Mon Sep 17 00:00:00 2001 From: Aditya Chouhan Date: Thu, 21 May 2026 18:16:18 +0530 Subject: [PATCH 1/4] feat(theme): add boba theme --- frontend/src/ts/constants/themes.ts | 13 ++++ frontend/static/themes/boba.css | 106 ++++++++++++++++++++++++++++ packages/schemas/src/themes.ts | 1 + 3 files changed, 120 insertions(+) create mode 100644 frontend/static/themes/boba.css diff --git a/frontend/src/ts/constants/themes.ts b/frontend/src/ts/constants/themes.ts index 0bb86f625671..406ccb8e5e64 100644 --- a/frontend/src/ts/constants/themes.ts +++ b/frontend/src/ts/constants/themes.ts @@ -223,6 +223,19 @@ export const themes: Record = { colorfulErrorExtra: "#d996ac", hasCss: true, }, + boba: { + bg: "#f4ebd9", + caret: "#c39b7d", + main: "#c39b7d", + sub: "#a68a73", + subAlt: "#e9dec7", + text: "#3c2f2f", + error: "#d66868", + errorExtra: "#f0d3d3", + colorfulError: "#d66868", + colorfulErrorExtra: "#f0d3d3", + hasCss: true, + }, botanical: { bg: "#7b9c98", caret: "#abc6c4", diff --git a/frontend/static/themes/boba.css b/frontend/static/themes/boba.css new file mode 100644 index 000000000000..4ee03b178593 --- /dev/null +++ b/frontend/static/themes/boba.css @@ -0,0 +1,106 @@ +/* ========================================================================== + Boba (Bubble Tea) Theme O3O + A cozy, milk-tea inspired palette with dark tapioca contrast. + ========================================================================== */ + +:root { + --bg-color: #f4ebd9; /* creamy milk tea base */ + --main-color: #c39b7d; /* brown sugar syrup accent */ + --sub-color: #a68a73; /* taro milky tint */ + --sub-alt-color: #e9dec7; /* slightly darker cream for panels */ + --text-color: #3c2f2f; /* dark boba pearl text */ + --error-color: #d66868; /* strawberry popping boba */ + --error-bg-color: #f0d3d3; + --caret-color: #c39b7d; +} + +/* Make the logo match the two-tone brown sugar style */ +header [data-ui-element="logoText"] { + background: linear-gradient( + 90deg, + var(--text-color) 64%, + var(--main-color) 36% + ); + background-clip: text; + color: transparent; + padding-bottom: 0.1em; + line-height: 1; +} + +[data-ui-element="logoSubtext"] { + margin-top: 0em; +} + +header [data-ui-element="logo"] svg { + color: var(--text-color); + padding-bottom: 0.05em; +} + +/* --- Navigation Links & Hover states --- */ +[data-nav-item] { + color: var(--main-color); + transition: color 0.15s ease; +} + +[data-nav-item]:hover { + /* soft overlay highlight when hovering items */ + color: color-mix(in srgb, var(--main-color) 85%, white 15%); +} + +/* Individual nav item overrides based on core colors */ +[data-nav-item="test"] { + color: var(--error-color); + &:hover { + color: color-mix(in srgb, var(--error-color) 75%, black 25%); + } +} + +[data-nav-item="leaderboards"] { + color: var(--main-color); + &:hover { + color: color-mix(in srgb, var(--main-color) 75%, black 25%); + } +} + +[data-nav-item="about"] { + color: var(--sub-color); + &:hover { + color: color-mix(in srgb, var(--sub-color) 75%, black 25%); + } +} + +[data-nav-item="settings"] { + color: var(--caret-color); + &:hover { + color: color-mix(in srgb, var(--caret-color) 75%, black 25%); + } +} + +/* Account buttons layout styling */ +[data-nav-item="alerts"], +[data-nav-item="account"], +[data-nav-item="login"] { + --themable-button-text: var(--main-color); + --themable-button-hover-text: color-mix( + in srgb, + var(--themable-button-text) 75%, + black 25% + ); +} + +[data-nav-item="alerts"], +[data-ui-element="navAvatar"] { + & [data-ui-element="notificationBubble"] { + box-shadow: none; + background: var(--sub-alt-color); + } +} + +/* Tiny spacing tweaks to prevent clipping issues */ +nav { + padding-bottom: 0.2em; +} + +header { + margin-bottom: -0.1em; +} diff --git a/packages/schemas/src/themes.ts b/packages/schemas/src/themes.ts index ace96ba0a33c..55d8182c0a70 100644 --- a/packages/schemas/src/themes.ts +++ b/packages/schemas/src/themes.ts @@ -19,6 +19,7 @@ export const ThemeNameSchema = z.enum( "blue_dolphin", "blueberry_dark", "blueberry_light", + "boba", "botanical", "bouquet", "breeze", From a88b637aa642a83abec3329539d6d096e4b43711 Mon Sep 17 00:00:00 2001 From: Aditya Chouhan Date: Tue, 26 May 2026 18:51:01 +0530 Subject: [PATCH 2/4] style(theme): remove custom logo gradient overrides --- frontend/static/themes/boba.css | 24 ++---------------------- 1 file changed, 2 insertions(+), 22 deletions(-) diff --git a/frontend/static/themes/boba.css b/frontend/static/themes/boba.css index 4ee03b178593..fca0efe0bfe1 100644 --- a/frontend/static/themes/boba.css +++ b/frontend/static/themes/boba.css @@ -1,6 +1,6 @@ /* ========================================================================== Boba (Bubble Tea) Theme O3O - A cozy, milk-tea inspired palette with dark tapioca contrast. + A cozy, milk-tea inspired palette with dark tapioca contrast. :) ========================================================================== */ :root { @@ -14,27 +14,7 @@ --caret-color: #c39b7d; } -/* Make the logo match the two-tone brown sugar style */ -header [data-ui-element="logoText"] { - background: linear-gradient( - 90deg, - var(--text-color) 64%, - var(--main-color) 36% - ); - background-clip: text; - color: transparent; - padding-bottom: 0.1em; - line-height: 1; -} - -[data-ui-element="logoSubtext"] { - margin-top: 0em; -} - -header [data-ui-element="logo"] svg { - color: var(--text-color); - padding-bottom: 0.05em; -} +/* removed the logo changes /* --- Navigation Links & Hover states --- */ [data-nav-item] { From 029889a864ec064cdf4a33604a6508087368932a Mon Sep 17 00:00:00 2001 From: Aditya Chouhan Date: Fri, 29 May 2026 19:02:12 +0530 Subject: [PATCH 3/4] style(theme): remove comments from boba theme --- frontend/static/themes/boba.css | 24 ++++++------------------ 1 file changed, 6 insertions(+), 18 deletions(-) diff --git a/frontend/static/themes/boba.css b/frontend/static/themes/boba.css index fca0efe0bfe1..c2f5144455c3 100644 --- a/frontend/static/themes/boba.css +++ b/frontend/static/themes/boba.css @@ -1,33 +1,23 @@ -/* ========================================================================== - Boba (Bubble Tea) Theme O3O - A cozy, milk-tea inspired palette with dark tapioca contrast. :) - ========================================================================== */ - :root { - --bg-color: #f4ebd9; /* creamy milk tea base */ - --main-color: #c39b7d; /* brown sugar syrup accent */ - --sub-color: #a68a73; /* taro milky tint */ - --sub-alt-color: #e9dec7; /* slightly darker cream for panels */ - --text-color: #3c2f2f; /* dark boba pearl text */ - --error-color: #d66868; /* strawberry popping boba */ + --bg-color: #f4ebd9; + --main-color: #c39b7d; + --sub-color: #a68a73; + --sub-alt-color: #e9dec7; + --text-color: #3c2f2f; + --error-color: #d66868; --error-bg-color: #f0d3d3; --caret-color: #c39b7d; } -/* removed the logo changes - -/* --- Navigation Links & Hover states --- */ [data-nav-item] { color: var(--main-color); transition: color 0.15s ease; } [data-nav-item]:hover { - /* soft overlay highlight when hovering items */ color: color-mix(in srgb, var(--main-color) 85%, white 15%); } -/* Individual nav item overrides based on core colors */ [data-nav-item="test"] { color: var(--error-color); &:hover { @@ -56,7 +46,6 @@ } } -/* Account buttons layout styling */ [data-nav-item="alerts"], [data-nav-item="account"], [data-nav-item="login"] { @@ -76,7 +65,6 @@ } } -/* Tiny spacing tweaks to prevent clipping issues */ nav { padding-bottom: 0.2em; } From 2ade3800c077364261013eec4e9818314cd9ecb3 Mon Sep 17 00:00:00 2001 From: Aditya Chouhan Date: Fri, 29 May 2026 21:45:36 +0530 Subject: [PATCH 4/4] style(theme): strip redundant root and layout selectors --- frontend/static/themes/boba.css | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/frontend/static/themes/boba.css b/frontend/static/themes/boba.css index c2f5144455c3..78229b84c5ec 100644 --- a/frontend/static/themes/boba.css +++ b/frontend/static/themes/boba.css @@ -1,14 +1,3 @@ -:root { - --bg-color: #f4ebd9; - --main-color: #c39b7d; - --sub-color: #a68a73; - --sub-alt-color: #e9dec7; - --text-color: #3c2f2f; - --error-color: #d66868; - --error-bg-color: #f0d3d3; - --caret-color: #c39b7d; -} - [data-nav-item] { color: var(--main-color); transition: color 0.15s ease; @@ -64,11 +53,3 @@ background: var(--sub-alt-color); } } - -nav { - padding-bottom: 0.2em; -} - -header { - margin-bottom: -0.1em; -}