feat(core): ✨ destructure surface colors into hsl variables

StarCitizenTools · May 28, 2024 · c40c7c7 · c40c7c7
1 parent 5b59158
commit c40c7c7
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 28 deletions.
diff --git a/resources/skins.citizen.styles/common/cssvariables.less b/resources/skins.citizen.styles/common/cssvariables.less
@@ -13,27 +13,44 @@
 	--color-primary__s: @color-primary__s;
 	--color-primary__l: @color-primary__l;
 
-	--color-surface-0: ~'hsl( var( --color-primary__h ), 30%, 96% )';
-	--color-surface-1: ~'hsl( var( --color-primary__h ), 40%, 94% )';
-	--color-surface-2: ~'hsl( var( --color-primary__h ), 30%, 92% )';
-	--color-surface-3: ~'hsl( var( --color-primary__h ), 20%, 90% )';
-	--color-surface-4: ~'hsl( var( --color-primary__h ), 10%, 88% )';
+	--color-surface-0__s: 30%;
+	--color-surface-0__l: 96%;
+
+	--color-surface-1__s: 40%;
+	--color-surface-1__l: 94%;
+
+	--color-surface-2__s: 30%;
+	--color-surface-2__l: 92%;
+
+	--color-surface-3__s: 20%;
+	--color-surface-3__l: 90%;
+
+	--color-surface-4__s: 10%;
+	--color-surface-4__l: 88%;
+
+	--delta-hover-state: 2%;
+
+	--color-surface-0: ~'hsl( var( --color-primary__h ), var( --color-surface-0__s ), var( --color-surface-0__l ) )';
+	--color-surface-1: ~'hsl( var( --color-primary__h ), var( --color-surface-1__s ), var( --color-surface-1__l ) )';
+	--color-surface-2: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), var( --color-surface-2__l ) )';
+	--color-surface-3: ~'hsl( var( --color-primary__h ), var( --color-surface-3__s ), var( --color-surface-3__l ) )';
+	--color-surface-4: ~'hsl( var( --color-primary__h ), var( --color-surface-4__s ), var( --color-surface-4__l ) )';
 
 	--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 )';
+	--background-color-overlay: ~'hsla( var( --color-primary__h ), var( --color-surface-0__s ), var( --color-surface-0__l ), 0.95 )';
+	--background-color-overlay--lighter: ~'hsla( var( --color-primary__h ), var( --color-surface-0__s ), var( --color-surface-0__l ), 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: ~'hsl( var( --color-primary__h ), 30%, 94% )';
-	--color-surface-2--active: ~'hsl( var( --color-primary__h ), 30%, 90% )';
+	--color-surface-2--hover: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), calc( var( --color-surface-2__l ) + var( --delta-hover-state ) ) )';
+	--color-surface-2--active: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), calc( var( --color-surface-2__l ) - var( --delta-hover-state ) ) )';
 
 	--background-color-destructive: rgba( 221, 51, 51, 0.1 );
 	--background-color-success: rgba( 0, 175, 137, 0.1 );

diff --git a/resources/skins.citizen.styles/common/features.less b/resources/skins.citizen.styles/common/features.less
@@ -5,11 +5,22 @@
 .theme-dark() {
 	--color-primary__l: 60%;
 
-	--color-surface-0: ~'hsl( var( --color-primary__h ), 20%, 8% )';
-	--color-surface-1: ~'hsl( var( --color-primary__h ), 25%, 10% )';
-	--color-surface-2: ~'hsl( var( --color-primary__h ), 25%, 13% )';
-	--color-surface-3: ~'hsl( var( --color-primary__h ), 15%, 18% )';
-	--color-surface-4: ~'hsl( var( --color-primary__h ), 15%, 23% )';
+	--color-surface-0__s: 20%;
+	--color-surface-0__l: 8%;
+
+	--color-surface-1__s: 25%;
+	--color-surface-1__l: 10%;
+
+	--color-surface-2__s: 25%;
+	--color-surface-2__l: 13%;
+
+	--color-surface-3__s: 15%;
+	--color-surface-3__l: 18%;
+
+	--color-surface-4__s: 15%;
+	--color-surface-4__l: 23%;
+
+	--delta-hover-state: 4%;
 
 	--color-base--emphasized: ~'hsl( var( --color-primary__h ), 80%, 95% )';
 	--color-base: ~'hsl( var( --color-primary__h ), 25%, 80% )';
@@ -18,12 +29,6 @@
 	--background-color-primary--hover: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 15% )';
 	--background-color-primary--active: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 20% )';
 
-	--background-color-overlay: ~'hsla( var( --color-primary__h ), 20%, 10%, 0.95 )';
-	--background-color-overlay--lighter: ~'hsla( var( --color-primary__h ), 20%, 10%, 0.6 )';
-
-	--color-surface-2--hover: ~'hsl( var( --color-primary__h ), 25%, 19% )';
-	--color-surface-2--active: ~'hsl( var( --color-primary__h ), 25%, 11% )';
-
 	--border-color-base: rgba( 255, 255, 255, 0.05 );
 	--border-color-subtle: rgba( 255, 255, 255, 0.02 );
 	--border-color-interactive: rgba( 255, 255, 255, 0.08 );
@@ -44,14 +49,19 @@
 }
 
 .feature-pure-black() {
-	--color-surface-0: #000;
-	--color-surface-1: ~'hsl( var( --color-primary__h ), 20%, 4% )';
-	--color-surface-2: ~'hsl( var( --color-primary__h ), 25%, 6% )';
-	--color-surface-3: ~'hsl( var( --color-primary__h ), 25%, 9% )';
-	--color-surface-4: ~'hsl( var( --color-primary__h ), 15%, 14% )';
-
-	--color-surface-2--hover: ~'hsl( var( --color-primary__h ), 25%, 10% )';
-	--color-surface-2--active: ~'hsl( var( --color-primary__h ), 25%, 2% )';
+	--color-surface-0__l: 0%;
+
+	--color-surface-1__s: 20%;
+
+	--color-surface-1__l: 4%;
+
+	--color-surface-2__l: 6%;
+
+	--color-surface-3__l: 9%;
+
+	--color-surface-4__l: 14%;
+
+	--delta-hover-state: 6%;
 
 	--shadow-strength: 0.04;
 }