blog/2025
1
Fork 0
Code Issues Activity

Refactor: centraliser les couleurs du thème dans des variables CSS

Browse Source
This commit is contained in:
Richard Dern
2025-09-17 10:36:30 +02:00
parent 92ad1acfa1
commit c327f865ea
8 changed files with 125 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
themes/default/assets/css/variables.css
View File

@@ -50,15 +50,62 @@
--scrollbar-thumb: #555;
/* Transparency helpers */
--transparent: rgba(0, 0, 0, 0);
/* Neutral white alphas */
--bg-white-00: rgba(255, 255, 255, 0);
--bg-white-015: rgba(255, 255, 255, 0.015);
--bg-white-02: rgba(255, 255, 255, 0.02);
--bg-white-03: rgba(255, 255, 255, 0.03);
--bg-white-04: rgba(255, 255, 255, 0.04);
--bg-white-05: rgba(255, 255, 255, 0.05);
--bg-white-06: rgba(255, 255, 255, 0.06);
--bg-white-10: rgba(255, 255, 255, 0.1);
--bg-white-12: rgba(255, 255, 255, 0.12);
--bg-white-15: rgba(255, 255, 255, 0.15);
--bg-white-20: rgba(255, 255, 255, 0.2);
--bg-white-25: rgba(255, 255, 255, 0.25);
/* Accent overlays */
--accent-blue-alpha-20: rgba(138, 180, 248, 0.2);
--accent-blue-alpha-40: rgba(138, 180, 248, 0.4);
--accent-blue-glow: rgba(200, 240, 255, 0.18);
/* Utility overlays */
--bg-red-01: rgba(255, 0, 0, 0.1);
--bg-green-01: rgba(0, 255, 0, 0.1);
--bg-green-02: rgba(0, 255, 0, 0.2);
--bg-lime-005: rgba(0, 255, 100, 0.05);
--bg-lime-01: rgba(0, 255, 100, 0.1);
/* Accent blues */
--bg-accent-blue-01: rgba(100, 199, 255, 0.1);
--bg-accent-blue-005: rgba(100, 199, 255, 0.05);
--bg-accent-blue-008: rgba(100, 199, 255, 0.08);
/* Neutral black alphas */
--overlay-black-30: rgba(0, 0, 0, 0.3);
--overlay-black-40: rgba(0, 0, 0, 0.4);
--overlay-black-50: rgba(0, 0, 0, 0.5);
--overlay-black-60: rgba(0, 0, 0, 0.6);
--overlay-black-70: rgba(0, 0, 0, 0.7);
--overlay-black-75: rgba(0, 0, 0, 0.75);
--overlay-black-80: rgba(0, 0, 0, 0.8);
/* Charcoal solids */
--surface-panel-strong: rgba(30, 30, 30, 1);
--surface-charcoal-90: rgba(15, 15, 15, 0.9);
--surface-charcoal: rgba(15, 15, 15, 1);
--surface-onyx-95: rgba(1, 1, 1, 0.95);
--surface-onyx: rgba(1, 1, 1, 1);
/* Metallic header accents */
--header-metal-stripe-strong: hsla(0, 0%, 28%, 0.02);
--header-metal-stripe-highlight: hsla(0, 0%, 32%, 0.04);
--header-metal-stripe-soft: hsla(0, 0%, 22%, 0.01);
--header-metal-stripe-soft-highlight: hsla(0, 0%, 26%, 0.03);
--header-metal-gradient-top: hsl(0, 0%, 18%);
--header-metal-gradient-mid: hsl(0, 0%, 22%);
--header-metal-gradient-bottom: hsl(0, 0%, 16%);
}