feat: add web

2026-07-27 19:13:56 +02:00
parent bb6c425840
commit 07db8a2ae2
39 changed files with 7534 additions and 0 deletions
@@ -0,0 +1,118 @@
+import { extendTheme, type ThemeConfig } from '@chakra-ui/react'
+import { theme as saasTheme } from '@saas-ui/react'
+
+const config: ThemeConfig = {
+  initialColorMode: 'system',
+  useSystemColorMode: false,
+}
+
+// Thème Omnex Ultra-Sombre : étend Saas UI avec un dark mode extrêmement sombre
+// Fond noir pur, surfaces très sombres, texte très contrasté
+export const theme = extendTheme(
+  {
+    config,
+    colors: {
+      // Override des couleurs de base pour un look ultra-sombre
+      black: '#000000',
+      gray: {
+        50: '#f7f7f8',
+        100: '#e8e8ea',
+        200: '#c5c5c9',
+        300: '#a2a2a9',
+        400: '#7f7f88',
+        500: '#5c5c66',
+        600: '#43434c',
+        700: '#2a2a33',
+        800: '#15151b',
+        900: '#0a0a0f',
+      },
+    },
+    semanticTokens: {
+      colors: {
+        // Fond principal (body) : noir pur
+        'chakra-body-bg': { _light: 'white', _dark: '#000000' },
+        // Fond secondaire (layouts, footer) : presque noir
+        'chakra-subtle-bg': { _light: 'gray.50', _dark: '#050508' },
+        // Surface élevée (cartes) : très sombre mais distinct
+        'bg-surface': { _light: 'white', _dark: '#08080c' },
+        // Texte principal : blanc très clair pour contraste maximal
+        'chakra-body-text': { _light: 'gray.800', _dark: '#f5f5f7' },
+        // Bordures : très discrètes, presque invisibles
+        'chakra-border-color': { _light: 'gray.200', _dark: 'whiteAlpha.100' },
+      },
+    },
+    styles: {
+      global: {
+        body: {
+          bg: 'chakra-body-bg',
+          color: 'chakra-body-text',
+        },
+      },
+    },
+    components: {
+      // Assombrir les composants Saas UI
+      Card: {
+        baseStyle: {
+          container: {
+            bg: 'bg-surface',
+            borderColor: 'whiteAlpha.50',
+          },
+        },
+      },
+      Button: {
+        baseStyle: {
+          _dark: {
+            bg: 'gray.800',
+            _hover: { bg: 'gray.700' },
+          },
+        },
+      },
+      Input: {
+        baseStyle: {
+          field: {
+            _dark: {
+              bg: 'gray.900',
+              borderColor: 'whiteAlpha.200',
+              _focus: {
+                borderColor: 'whiteAlpha.400',
+              },
+            },
+          },
+        },
+      },
+      Select: {
+        baseStyle: {
+          field: {
+            _dark: {
+              bg: 'gray.900',
+              borderColor: 'whiteAlpha.200',
+            },
+          },
+        },
+      },
+      Textarea: {
+        baseStyle: {
+          _dark: {
+            bg: 'gray.900',
+            borderColor: 'whiteAlpha.200',
+          },
+        },
+      },
+      Modal: {
+        baseStyle: {
+          overlay: {
+            _dark: {
+              bg: 'blackAlpha.800',
+            },
+          },
+          content: {
+            _dark: {
+              bg: '#08080c',
+            },
+          },
+        },
+      },
+    },
+  },
+  saasTheme,
+)