feat: add Mocha theme with custom styles and transitions

2026-03-25 06:20:47 +11:00
parent 9a00375568
commit da3983d5c4
3 changed files with 237 additions and 3 deletions
--- a/src/app/hooks/useTheme.ts
+++ b/src/app/hooks/useTheme.ts
@@ -1,7 +1,7 @@
 import { lightTheme } from 'folds';
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
-import { butterTheme, darkTheme, discordTheme, discordDarkerTheme, silverTheme, twilightTheme } from '../../colors.css';
+import { butterTheme, darkTheme, discordTheme, discordDarkerTheme, mochaTheme, silverTheme, twilightTheme } from '../../colors.css';
 import { settingsAtom } from '../state/settings';
 import { useSetting } from '../state/hooks/settings';

@@ -52,9 +52,14 @@ export const TwilightTheme: Theme = {
  kind: ThemeKind.Dark,
  classNames: ['twilight-theme', twilightTheme, onDarkFontWeight, 'prism-dark'],
 };
+export const MochaTheme: Theme = {
+  id: 'mocha-theme',
+  kind: ThemeKind.Dark,
+  classNames: ['mocha-theme', mochaTheme, onDarkFontWeight, 'prism-dark'],
+};

 export const useThemes = (): Theme[] => {
-  const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme, DiscordTheme, DiscordDarkerTheme, TwilightTheme], []);
+  const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme, DiscordTheme, DiscordDarkerTheme, TwilightTheme, MochaTheme], []);

  return themes;
 };
@@ -69,6 +74,7 @@ export const useThemeNames = (): Record<string, string> =>
      [DiscordTheme.id]: 'Discord',
      [DiscordDarkerTheme.id]: 'Discord Darker',
      [TwilightTheme.id]: 'Twilight',
+      [MochaTheme.id]: 'Mocha',
    }),
    []
  );
--- a/src/colors.css.ts
+++ b/src/colors.css.ts
@@ -527,3 +527,100 @@ export const twilightTheme = createTheme(color, {
    Overlay: 'rgba(0, 0, 0, 0.85)',
  },
 });
+
+export const mochaTheme = createTheme(color, {
+  Background: {
+    Container: '#1A1614',
+    ContainerHover: '#242019',
+    ContainerActive: '#2D2721',
+    ContainerLine: '#3A332B',
+    OnContainer: '#FFF8F0',
+  },
+
+  Surface: {
+    Container: '#242019',
+    ContainerHover: '#2D2721',
+    ContainerActive: '#3A332B',
+    ContainerLine: '#473E35',
+    OnContainer: '#FFF8F0',
+  },
+
+  SurfaceVariant: {
+    Container: '#2D2721',
+    ContainerHover: '#3A332B',
+    ContainerActive: '#473E35',
+    ContainerLine: '#54493F',
+    OnContainer: '#FFF8F0',
+  },
+
+  Primary: {
+    Main: '#D4A574',
+    MainHover: '#C4956A',
+    MainActive: '#B48660',
+    MainLine: '#A47856',
+    OnMain: '#1A1614',
+    Container: '#54493F',
+    ContainerHover: '#625548',
+    ContainerActive: '#706151',
+    ContainerLine: '#7E6D5A',
+    OnContainer: '#FFE8D4',
+  },
+
+  Secondary: {
+    Main: '#FFF8F0',
+    MainHover: '#E8E1D9',
+    MainActive: '#D9D2CA',
+    MainLine: '#CAC3BB',
+    OnMain: '#1A1614',
+    Container: '#473E35',
+    ContainerHover: '#54493F',
+    ContainerActive: '#625548',
+    ContainerLine: '#706151',
+    OnContainer: '#F5EDE5',
+  },
+
+  Success: {
+    Main: '#8FD4A8',
+    MainHover: '#7DCA99',
+    MainActive: '#6FC08A',
+    MainLine: '#61B67B',
+    OnMain: '#142D1E',
+    Container: '#1E4A2F',
+    ContainerHover: '#235538',
+    ContainerActive: '#286041',
+    ContainerLine: '#2D6B4A',
+    OnContainer: '#D4F2E0',
+  },
+
+  Warning: {
+    Main: '#E8C078',
+    MainHover: '#E0B268',
+    MainActive: '#D8A458',
+    MainLine: '#D09648',
+    OnMain: '#3A2E15',
+    Container: '#5E4820',
+    ContainerHover: '#6B5225',
+    ContainerActive: '#785C2A',
+    ContainerLine: '#85662F',
+    OnContainer: '#FCF0D6',
+  },
+
+  Critical: {
+    Main: '#E6A0A0',
+    MainHover: '#E09090',
+    MainActive: '#DA8080',
+    MainLine: '#D47070',
+    OnMain: '#401C1C',
+    Container: '#5E2929',
+    ContainerHover: '#6B2E2E',
+    ContainerActive: '#783333',
+    ContainerLine: '#853838',
+    OnContainer: '#F8DEDE',
+  },
+
+  Other: {
+    FocusRing: 'rgba(212, 165, 116, 0.5)',
+    Shadow: 'rgba(0, 0, 0, 1)',
+    Overlay: 'rgba(0, 0, 0, 0.85)',
+  },
+});
--- a/src/index.css
+++ b/src/index.css
@@ -49,7 +49,8 @@
 .butter-theme,
 .discord-theme,
 .discord-darker-theme,
-.twilight-theme {
+.twilight-theme,
+.mocha-theme {
  --tc-link: hsl(213deg 100% 80%);

  --mx-uc-1: hsl(208, 100%, 75%);
@@ -115,6 +116,9 @@ body.discord-darker-theme {
 body.twilight-theme {
  background: linear-gradient(135deg, #14121F 0%, #1C1A2E 50%, #24223D 100%);
 }
+body.mocha-theme {
+  background: linear-gradient(135deg, #1A1614 0%, #242019 50%, #2D2721 100%);
+}
 #root {
  width: 100%;
  height: 100%;
@@ -127,6 +131,10 @@ body.twilight-theme {
  background: linear-gradient(180deg, rgba(28, 26, 46, 0.5) 0%, rgba(36, 34, 61, 0.3) 100%);
 }

+.mocha-theme #root {
+  background: linear-gradient(180deg, rgba(36, 32, 25, 0.5) 0%, rgba(45, 39, 33, 0.3) 100%);
+}
+
 /* Twilight theme gradient overlays */
 .twilight-theme [role="navigation"],
 .twilight-theme aside {
@@ -252,6 +260,129 @@ body.twilight-theme {
  background: linear-gradient(180deg, #4A4580 0%, #625BAC 100%);
 }

+/* Mocha theme gradient overlays */
+.mocha-theme [role="navigation"],
+.mocha-theme aside {
+  background: linear-gradient(180deg, rgba(26, 22, 20, 0.8) 0%, rgba(36, 32, 25, 0.9) 100%);
+  backdrop-filter: blur(8px);
+}
+
+.mocha-theme main {
+  background: linear-gradient(135deg, rgba(36, 32, 25, 0.4) 0%, rgba(45, 39, 33, 0.3) 100%);
+}
+
+.mocha-theme header {
+  background: linear-gradient(90deg, rgba(26, 22, 20, 0.9) 0%, rgba(36, 32, 25, 0.8) 100%);
+}
+
+/* Mocha theme enhanced transitions */
+.mocha-theme [data-route-transition="true"] {
+  animation: fadeSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.mocha-theme [data-room-view],
+.mocha-theme [data-space-view],
+.mocha-theme [data-inbox-view],
+.mocha-theme [data-explore-view] {
+  animation: fadeSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Smooth transitions for interactive elements */
+.mocha-theme button,
+.mocha-theme [role="button"],
+.mocha-theme a,
+.mocha-theme input,
+.mocha-theme textarea {
+  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
+}
+
+.mocha-theme button:hover,
+.mocha-theme [role="button"]:hover {
+  transform: translateY(-1px);
+}
+
+.mocha-theme button:active,
+.mocha-theme [role="button"]:active {
+  transform: translateY(0);
+}
+
+/* Message transitions */
+.mocha-theme [data-message-item] {
+  transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+.mocha-theme [data-message-item]:hover {
+  background: linear-gradient(90deg, rgba(84, 73, 63, 0.15) 0%, rgba(112, 97, 81, 0.1) 100%);
+  transform: translateX(2px);
+}
+
+/* Selected item indicator */
+.mocha-theme [data-selected="true"],
+.mocha-theme [aria-selected="true"],
+.mocha-theme [aria-current="true"] {
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+.mocha-theme [data-selected="true"]::before,
+.mocha-theme [aria-selected="true"]::before,
+.mocha-theme [aria-current="true"]::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: linear-gradient(180deg, #D4A574 0%, #B48660 100%);
+  transition: width 0.2s ease;
+}
+
+/* Scrollbar styling */
+.mocha-theme ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.mocha-theme ::-webkit-scrollbar-track {
+  background: rgba(26, 22, 20, 0.5);
+}
+
+.mocha-theme ::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #54493F 0%, #706151 100%);
+  border-radius: 5px;
+  border: 2px solid rgba(26, 22, 20, 0.5);
+  transition: background 0.2s ease;
+}
+
+.mocha-theme ::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, #625548 0%, #7E6D5A 100%);
+}
+
+/* Subtle dot pattern overlay */
+.mocha-theme::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-image: radial-gradient(rgba(212, 165, 116, 0.03) 1px, transparent 1px);
+  background-size: 24px 24px;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.mocha-theme #root {
+  position: relative;
+  z-index: 1;
+}
+
+/* Focus states */
+.mocha-theme input:focus,
+.mocha-theme textarea:focus,
+.mocha-theme button:focus-visible {
+  outline: 2px solid rgba(212, 165, 116, 0.5);
+  outline-offset: 2px;
+  transition: outline 0.2s ease;
+}
+
 /* Subtle dot pattern overlay */
 .twilight-theme::after {
  content: '';