Revert "feat(core): ✨ implement new light theme"

This reverts commit 54ca25f.
OtomadWiki · Apr 7, 2024 · 46347af · 46347af
1 parent 84cf306
commit 46347af
Show file tree

Hide file tree

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

diff --git a/resources/skins.citizen.styles/common/cssvariables.less b/resources/skins.citizen.styles/common/cssvariables.less
@@ -9,6 +9,9 @@
  * 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,32 +1,29 @@
 /**
- * Base/light theme
+ * Base theme
  */
 :root {
 	--color-primary__h: @color-primary__h;
 	--color-primary__s: @color-primary__s;
 	--color-primary__l: @color-primary__l;
 
-	--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-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-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-base: @color-base;
+	--color-base--emphasized: @color-base--emphasized;
+	--color-base--subtle: @color-base--subtle;
 
 	--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: ~'hsl( var( --color-primary__h ), 30%, 94% )';
-	--color-surface-2--active: ~'hsl( var( --color-primary__h ), 30%, 90% )';
+	--color-surface-2--hover: @color-surface-2--hover;
+	--color-surface-2--active: @color-surface-2--active;
 
 	--background-color-destructive: rgba( 221, 51, 51, 0.1 );
 	--background-color-success: rgba( 0, 175, 137, 0.1 );
@@ -51,6 +48,20 @@ 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,10 +45,21 @@
 
 /* == 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
@@ -137,7 +148,6 @@
 @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;