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/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)',
+  },
+});