/* ========================================================================= MyOrigines Meet — Design Tokens Format : CSS Custom Properties (framework-agnostique) Usage : importer une seule fois dans le renderer Electron/Preact, p.ex. `import './design-system/tokens.css'` dans l'entrée Vite. Thème : sombre par défaut. Thème clair via . Aucune dépendance (pas de Tailwind / préprocesseur). ========================================================================= */ :root { /* ---- Couleur : socle sombre (Éclipse) ---------------------------------- */ --color-bg: #06060a; /* fond le plus profond (fenêtre) */ --color-bg-app: #0b0b0e; /* surface principale de l'app */ --color-bg-sidebar: #0a0a0c; /* barre latérale */ --color-bg-elevated: #101014; /* cartes en avant (Ma vue) */ /* Surfaces en verre (superposées sur fond sombre) */ --surface-1: rgba(255, 255, 255, 0.03); --surface-2: rgba(255, 255, 255, 0.045); --surface-3: rgba(255, 255, 255, 0.06); --surface-strong: rgba(255, 255, 255, 0.09); --surface-sunken: rgba(0, 0, 0, 0.35); /* Bordures & filets */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.12); --rim-light: inset 0 1px 0 rgba(255, 255, 255, 0.1); /* liseré haut des cartes */ /* Texte / encre */ --text-primary: #f5f5f7; --text-secondary: rgba(245, 245, 247, 0.62); --text-tertiary: rgba(245, 245, 247, 0.45); --text-disabled: rgba(245, 245, 247, 0.3); --text-on-accent: #0d0d10; /* texte sur surface claire/accent */ /* Accent froid (signature Éclipse) */ --accent: #cddeff; --accent-glow: rgba(205, 222, 255, 0.55); --accent-soft: rgba(205, 222, 255, 0.12); /* Actions “solides” (bouton primaire clair sur fond sombre) */ --solid: #f5f5f7; --solid-hover: #ffffff; --solid-active: #d8d8dc; /* Statut */ --success: #28c840; --warning: #febc2e; --danger: #ff5f57; --danger-text: #ffb4af; /* Feux macOS (barre de titre) */ --mac-close: #ff5f57; --mac-min: #febc2e; --mac-max: #28c840; /* ---- Typographie -------------------------------------------------------- */ --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; /* titres, chiffres */ --font-ui: "Instrument Sans", ui-sans-serif, system-ui, sans-serif; /* corps, UI */ --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 26px; --text-3xl: 32px; --text-4xl: 40px; --text-5xl: 52px; --text-6xl: 62px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --leading-tight: 1.05; --leading-snug: 1.3; --leading-body: 1.6; --tracking-tight: -0.03em; /* grands titres display */ --tracking-normal: -0.01em; --tracking-caps: 0.1em; /* labels en petites capitales */ /* ---- Espacement (échelle 4px) ------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ---- Rayons ------------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 11px; /* boutons, champs */ --radius-lg: 14px; /* cartes internes */ --radius-xl: 16px; /* panneaux */ --radius-2xl: 20px; /* grands blocs */ --radius-icon: 34px; /* icône app (150px) — squircle ≈ 0.23 × taille */ --radius-pill: 999px; /* ---- Ombres & élévation ------------------------------------------------- */ --shadow-card: 0 30px 60px -30px rgba(0, 0, 0, 0.6); --shadow-window: 0 4px 14px rgba(0, 0, 0, 0.4), 0 44px 90px -30px rgba(0, 0, 0, 0.7), 0 110px 170px -60px rgba(0, 0, 0, 0.5), inset 0 0 150px rgba(0, 0, 0, 0.5); --shadow-float: 0 24px 50px -18px rgba(0, 0, 0, 0.6); /* pilule flottante */ --focus-ring: 0 0 0 2px var(--color-bg-app), 0 0 0 4px rgba(205, 222, 255, 0.9); /* ---- Mouvement ---------------------------------------------------------- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 120ms; --duration-normal: 220ms; --duration-slow: 400ms; --duration-splash: 3500ms; /* écran de lancement */ /* ---- Cibles / accessibilité -------------------------------------------- */ --hit-target-min: 44px; /* taille minimale d'une cible interactive */ } /* ========================================================================= Thème clair — « Ma vue » conserve un fond sombre (voir --oncard-* ) pour rester focal. ========================================================================= */ [data-theme="light"] { --color-bg: #e9e8ea; --color-bg-app: #f4f3f6; --color-bg-sidebar: #efeef1; --color-bg-elevated: #17161a; /* carte « Ma vue » reste sombre */ --surface-1: #ffffff; --surface-2: #ffffff; --surface-3: #f4f3f6; --surface-strong: #ecebef; --surface-sunken: #eceaee; --border-subtle: #edecf0; --border-default: #e6e5ea; --border-strong: #d4d3d8; --rim-light: none; --text-primary: #17161a; --text-secondary: #6c6a72; --text-tertiary: #8a8890; --text-disabled: #b7b6bd; --text-on-accent: #ffffff; --accent: #5c6fa5; --accent-glow: rgba(92, 111, 165, 0.35); --accent-soft: rgba(92, 111, 165, 0.12); --solid: #17161a; --solid-hover: #000000; --solid-active: #3a3942; --shadow-card: 0 30px 60px -34px rgba(0, 0, 0, 0.25); --shadow-window: 0 1px 2px rgba(0, 0, 0, 0.04), 0 30px 60px -34px rgba(0, 0, 0, 0.2); --focus-ring: 0 0 0 2px var(--color-bg-app), 0 0 0 4px rgba(92, 111, 165, 0.9); } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; } }