From 222ed0408d5893c74caf8d6ba77144abf7404339 Mon Sep 17 00:00:00 2001 From: Greg Date: Fri, 27 Jun 2025 13:47:36 +0200 Subject: [PATCH] style: update color scheme to French-inspired palette with navy and blue tones --- style.css | 86 +++++++++++++++++++++++++++---------------------------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/style.css b/style.css index 9f583de..be0d6f7 100644 --- a/style.css +++ b/style.css @@ -1,26 +1,26 @@ :root { - /* Colors */ - --color-background: rgba(252, 252, 249, 1); - --color-surface: rgba(255, 255, 253, 1); - --color-text: rgba(19, 52, 59, 1); - --color-text-secondary: rgba(98, 108, 113, 1); - --color-primary: rgba(33, 128, 141, 1); - --color-primary-hover: rgba(29, 116, 128, 1); - --color-primary-active: rgba(26, 104, 115, 1); - --color-secondary: rgba(94, 82, 64, 0.12); - --color-secondary-hover: rgba(94, 82, 64, 0.2); - --color-secondary-active: rgba(94, 82, 64, 0.25); - --color-border: rgba(94, 82, 64, 0.2); - --color-btn-primary-text: rgba(252, 252, 249, 1); - --color-card-border: rgba(94, 82, 64, 0.12); - --color-card-border-inner: rgba(94, 82, 64, 0.12); - --color-error: rgba(192, 21, 47, 1); - --color-success: rgba(33, 128, 141, 1); - --color-warning: rgba(168, 75, 47, 1); - --color-info: rgba(98, 108, 113, 1); - --color-focus-ring: rgba(33, 128, 141, 0.4); - --color-select-caret: rgba(19, 52, 59, 0.8); + /* French-inspired Colors */ + --color-background: rgba(242, 242, 242, 1); /* Light Gray */ + --color-surface: rgba(255, 255, 255, 1); /* White */ + --color-text: rgba(0, 40, 85, 1); /* Dark Blue */ + --color-text-secondary: rgba(87, 113, 138, 1); /* Grayish Blue */ + --color-primary: rgba(0, 85, 164, 1); /* French Blue */ + --color-primary-hover: rgba(0, 68, 131, 1); + --color-primary-active: rgba(0, 51, 98, 1); + --color-secondary: rgba(224, 231, 238, 1); /* Light Blue Gray */ + --color-secondary-hover: rgba(207, 218, 228, 1); + --color-secondary-active: rgba(190, 205, 218, 1); + --color-border: rgba(207, 218, 228, 1); + --color-btn-primary-text: rgba(255, 255, 255, 1); /* White */ + --color-card-border: rgba(207, 218, 228, 1); + --color-card-border-inner: rgba(224, 231, 238, 1); + --color-error: rgba(239, 65, 53, 1); /* French Red */ + --color-success: rgba(0, 85, 164, 1); /* French Blue */ + --color-warning: rgba(247, 181, 0, 1); /* A complementary gold/yellow */ + --color-info: rgba(87, 113, 138, 1); + --color-focus-ring: rgba(0, 85, 164, 0.4); + --color-select-caret: rgba(0, 40, 85, 0.8); /* Common style patterns */ --focus-ring: 0 0 0 3px var(--color-focus-ring); @@ -104,30 +104,30 @@ /* Dark mode colors */ @media (prefers-color-scheme: dark) { :root { - --color-background: rgba(31, 33, 33, 1); - --color-surface: rgba(38, 40, 40, 1); - --color-text: rgba(245, 245, 245, 1); - --color-text-secondary: rgba(167, 169, 169, 0.7); - --color-primary: rgba(50, 184, 198, 1); - --color-primary-hover: rgba(45, 166, 178, 1); - --color-primary-active: rgba(41, 150, 161, 1); - --color-secondary: rgba(119, 124, 124, 0.15); - --color-secondary-hover: rgba(119, 124, 124, 0.25); - --color-secondary-active: rgba(119, 124, 124, 0.3); - --color-border: rgba(119, 124, 124, 0.3); - --color-error: rgba(255, 84, 89, 1); - --color-success: rgba(50, 184, 198, 1); - --color-warning: rgba(230, 129, 97, 1); - --color-info: rgba(167, 169, 169, 1); - --color-focus-ring: rgba(50, 184, 198, 0.4); - --color-btn-primary-text: rgba(19, 52, 59, 1); - --color-card-border: rgba(119, 124, 124, 0.2); - --color-card-border-inner: rgba(119, 124, 124, 0.15); + --color-background: rgba(13, 27, 42, 1); /* Dark Navy Blue */ + --color-surface: rgba(20, 40, 65, 1); /* Lighter Navy */ + --color-text: rgba(239, 246, 255, 1); /* Light Blue/White */ + --color-text-secondary: rgba(160, 174, 192, 0.7); /* Light Grayish Blue */ + --color-primary: rgba(42, 128, 213, 1); /* Brighter Blue */ + --color-primary-hover: rgba(33, 114, 191, 1); + --color-primary-active: rgba(25, 100, 168, 1); + --color-secondary: rgba(45, 66, 92, 0.25); /* Dark Blue-Gray */ + --color-secondary-hover: rgba(60, 83, 113, 0.35); + --color-secondary-active: rgba(75, 100, 134, 0.4); + --color-border: rgba(45, 66, 92, 1); + --color-error: rgba(255, 107, 99, 1); /* Lighter Red */ + --color-success: rgba(42, 128, 213, 1); /* Brighter Blue */ + --color-warning: rgba(255, 204, 0, 1); /* Gold/Yellow */ + --color-info: rgba(160, 174, 192, 1); + --color-focus-ring: rgba(42, 128, 213, 0.4); + --color-btn-primary-text: rgba(255, 255, 255, 1); + --color-card-border: rgba(45, 66, 92, 0.8); + --color-card-border-inner: rgba(45, 66, 92, 0.4); --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.15); - --button-border-secondary: rgba(119, 124, 124, 0.2); - --color-border-secondary: rgba(119, 124, 124, 0.2); - --color-select-caret: rgba(245, 245, 245, 0.8); + --button-border-secondary: rgba(45, 66, 92, 1); + --color-border-secondary: rgba(45, 66, 92, 1); + --color-select-caret: rgba(239, 246, 255, 0.8); /* Common style patterns - updated for dark mode */ --focus-ring: 0 0 0 3px var(--color-focus-ring);