feat(core): ✨ implement new light theme

Now that we have a comfortable coverage for extensions. It is time to start tweaking light theme color.
StarCitizenTools · Mar 19, 2024 · 54ca25f · 54ca25f
1 parent b7df8c9
commit 54ca25f
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 42 deletions.
diff --git a/resources/skins.citizen.preferences/skins.citizen.preferences.less b/resources/skins.citizen.preferences/skins.citizen.preferences.less
@@ -1,4 +1,3 @@
-@import '../variables.less';
 @import '../mixins.less';
 
 .citizen-pref {
@@ -93,8 +92,8 @@
 	&-theme {
 		&-option {
 			&-light {
-				color: @color-base;
-				background: @color-surface-0;
+				color: ~'hsl( var( --color-primary__h ), 30%, 20% )';
+				background: ~'hsl( var( --color-primary__h ), 25%, 94% )';
 			}
 
 			&-dark {

diff --git a/resources/skins.citizen.styles/common/cssvariables.less b/resources/skins.citizen.styles/common/cssvariables.less
@@ -9,9 +9,6 @@
  * Base theme
  */
 :root {
-	--background-color-overlay: @background-color-overlay;
-	--background-color-overlay--lighter: @background-color-overlay--lighter;
-
 	--background-color-icon: @background-color-icon;
 	--background-color-icon--hover: @background-color-icon--hover;
 	--background-color-icon--active: @background-color-icon--active;

diff --git a/resources/skins.citizen.styles/common/theme.less b/resources/skins.citizen.styles/common/theme.less
@@ -1,29 +1,32 @@
 /**
- * Base theme
+ * Base/light theme
  */
 :root {
 	--color-primary__h: @color-primary__h;
 	--color-primary__s: @color-primary__s;
 	--color-primary__l: @color-primary__l;
 
-	--color-surface-0: @color-surface-0;
-	--color-surface-1: @color-surface-1;
-	--color-surface-2: @color-surface-2;
-	--color-surface-3: @color-surface-3;
-	--color-surface-4: @color-surface-4;
+	--color-surface-0: ~'hsl( var( --color-primary__h ), 25%, 94% )';
+	--color-surface-1: ~'hsl( var( --color-primary__h ), 30%, 92% )';
+	--color-surface-2: ~'hsl( var( --color-primary__h ), 30%, 90% )';
+	--color-surface-3: ~'hsl( var( --color-primary__h ), 20%, 88% )';
+	--color-surface-4: ~'hsl( var( --color-primary__h ), 10%, 86% )';
 
-	--color-base: @color-base;
-	--color-base--emphasized: @color-base--emphasized;
-	--color-base--subtle: @color-base--subtle;
+	--color-base--emphasized: ~'hsl( var( --color-primary__h ), 85%, 5% )';
+	--color-base: ~'hsl( var( --color-primary__h ), 30%, 20% )';
+	--color-base--subtle: ~'hsl( var( --color-primary__h ), 30%, 35% )';
+
+	--background-color-overlay: ~'hsla( var( --color-primary__h ), 25%, 94%, 0.95 )';
+	--background-color-overlay--lighter: ~'hsla( var( --color-primary__h ), 25%, 94%, 0.6 )';
 
 	--color-primary: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), var( --color-primary__l ) )';
 	--color-primary--hover: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), calc( var( --color-primary__l ) * 1.2 ) )';
 	--color-primary--active: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), calc( var( --color-primary__l ) * 0.8 ) )';
 	--background-color-primary--hover: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 95% )';
 	--background-color-primary--active: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 90% )';
 
-	--color-surface-2--hover: @color-surface-2--hover;
-	--color-surface-2--active: @color-surface-2--active;
+	--color-surface-2--hover: ~'hsl( var( --color-primary__h ), 30%, 94% )';
+	--color-surface-2--active: ~'hsl( var( --color-primary__h ), 30%, 90% )';
 
 	--background-color-destructive: rgba( 221, 51, 51, 0.1 );
 	--background-color-success: rgba( 0, 175, 137, 0.1 );
@@ -48,20 +51,6 @@ a {
 	--color-link--active: ~'var( --color-primary--active )';
 }
 
-/*
-:root.skin-citizen-light {
-    --color-surface-0: ~'hsl( var( --color-primary__h ), 20%, 92% )';
-	--color-surface-1: ~'hsl( var( --color-primary__h ), 25%, 95% )';
-	--color-surface-2: ~'hsl( var( --color-primary__h ), 25%, 88% )';
-	--color-surface-3: ~'hsl( var( --color-primary__h ), 15%, 80% )';
-	--color-surface-4: ~'hsl( var( --color-primary__h ), 15%, 75% )';
-
-	--color-base--emphasized: ~'hsl( var( --color-primary__h ), 80%, 20% )';
-	--color-base: ~'hsl( var( --color-primary__h ), 25%, 30% )';
-	--color-base--subtle: ~'hsl( var( --color-primary__h ), 25%, 40% )';
-}
-*/
-
 /**
  * Dark theme
  */

diff --git a/resources/variables.less b/resources/variables.less
@@ -45,21 +45,10 @@
 
 /* == Colors == */
 /* Base theme */
-@diff-hoverstate: 2;
-
 @color-primary__h: 220;
 @color-primary__s: 60%;
 @color-primary__l: 50%;
 
-@color-surface-0: ~'hsl( 0, 0%, 100% )';
-@color-surface-1: ~'hsl( 0, 0%, 100% )';
-@color-surface-2: ~'hsl( 210, 17%, 98% )';
-@color-surface-3: ~'hsl( 220, 17%, 93% )';
-@color-surface-4: ~'hsl( 213, 9%, 80% )';
-
-@color-surface-2--hover: ~'hsl( 210, 17%, 'unit( 98 + @diff-hoverstate, % )~' )';
-@color-surface-2--active: ~'hsl( 210, 17%, 'unit( 98 - @diff-hoverstate, % )~' )';
-
 /*
  * Syntax highlight colors
  * Based on Material Theme Lighter
@@ -148,6 +137,7 @@
 @background-color-primary--active:	rgba( 41, 98, 204, 0.1 );
 
 /* Foreground colors */
+/* color-base is deprecated */
 @color-base:				@color-base20;
 @color-base--emphasized:	@color-base10;
 @color-base--subtle:		@color-base30;