Merge pull request #58834 from nextcloud/feat/translucent_selection_color

feat(theming): use translucent color for text selection

apps/theming/css/default.css

@@ -43,6 +43,8 @@
   --color-info-text: #0066AC;
   --color-favorite: #A37200;
   --color-mark: #fff0c7;
+  --color-background-selection: rgb(from var(--color-primary-element) r g b / 0.2);
+  --color-text-selection: var(--color-main-text);
   /** @deprecated use css color functions */
   --color-error-rgb: 255,231,231;
   /** @deprecated use css color functions */

apps/theming/lib/Themes/DarkHighContrastTheme.php

@@ -99,6 +99,8 @@ class DarkHighContrastTheme extends DarkTheme implements ITheme {
 				'--color-info-hover' => $this->util->lighten($colorInfo, 5),
 				'--color-info-text' => $this->util->lighten($colorInfo, 60),
 
+				'--color-background-selection' => 'var(--color-primary-element)',
+
 				'--color-scrollbar' => 'auto transparent',
 
 				// used for the icon loading animation
@@ -128,6 +130,9 @@ class DarkHighContrastTheme extends DarkTheme implements ITheme {
 			div.crumb {
 				filter: brightness(150%);
 			}
+			::selection {
+				color: var(--color-primary-element-text);
+			}
 		";
 	}
 }

apps/theming/lib/Themes/DarkTheme.php

@@ -116,6 +116,8 @@ class DarkTheme extends DefaultTheme implements ITheme {
 				'--color-info-text' => $colorInfoText,
 				'--color-favorite' => '#ffde00',
 				'--color-mark' => '#4d3800',
+				'--color-background-selection' => 'rgb(from var(--color-primary-element) r g b / 0.4)',
+				'--color-text-selection' => 'var(--color-main-text)',
 				// deprecated
 				'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
 				'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),

apps/theming/lib/Themes/DefaultTheme.php

@@ -166,6 +166,8 @@ class DefaultTheme implements ITheme {
 			'--color-info-text' => $colorInfoText,
 			'--color-favorite' => '#A37200',
 			'--color-mark' => '#fff0c7',
+			'--color-background-selection' => 'rgb(from var(--color-primary-element) r g b / 0.2)',
+			'--color-text-selection' => 'var(--color-main-text)',
 			// deprecated
 			'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
 			'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),

apps/theming/lib/Themes/HighContrastTheme.php

@@ -98,6 +98,8 @@ class HighContrastTheme extends DefaultTheme implements ITheme {
 				'--color-success-text' => $this->util->darken($colorSuccess, 70),
 
 				'--color-favorite' => '#936B06',
+				'--color-background-selection' => 'var(--color-primary-element)',
+				'--color-text-selection' => 'var(--color-primary-element-text)',
 
 				'--color-scrollbar' => 'auto transparent',
 

core/css/styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["styles.scss","variables.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA,GCEA;AAAA;AAAA;AAAA,GDOA,MACC,mCACA,uCAGD,yQACC,SACA,UACA,SACA,oBACA,eACA,oBACA,wBACA,eACA,uCAGD,6CACC,aAID,0CACC,wDACA,aAGD,UACC,YAEA,8BAGD,6DACC,cAGD,MACC,yBACA,iBACA,mBAGD,cACC,iBACA,mBAGD,YACC,sBAGD,EACC,SACA,6BACA,qBACA,eACA,IACC,eAIF,WACC,aACA,0BAGD,MACC,eACA,QACC,eAIF,0BACC,eAGD,KACC,mCAGD,GACC,gBAGD,KACC,mBAEA,mCACA,uCACA,6BACA,6BAGD,mBACC,kBAGD,qBACC,kBACA,sBACA,qBACA,2BACA,2DACA,uBAGD,iBACC,qBACA,aACA,oCAGD,eACC,YACA,aAGD,cACC,eACA,MACA,SACA,qBACA,YACA,WACA,aACA,kBACA,gDACA,wCACA,iBACA,eACA,kBACC,cACA,kBACA,UACA,QACA,gBAED,gBACC,wCACA,sDACA,4CACC,6CAOH,oBACC,WACA,YAGD,2BACC,+BAGD,gCACC,+BAGD,0BACC,kCACA,yCACA,+BACA,4BAMD,YACC,8CACA,wCAMD,kBACC,sBAKD,4BAEC,oCACA,kBACA,gBACA,WACA,sDACC,gBAED,sEACC,gBAED,kCACC,mBAED,oHAEC,qBACA,YACA,WACA,mBACA,gcAEC,WAOH,sBACC,WASD,oCACC,kBACA,yBACA,sBACA,qBACA,iBAID,kBAEC,kBACA,qBACA,SAEA,YAGD,8CAGC,WAGD,8BACC,sBACA,oBACA,wBACA,wBAGD,2EACC,WAGD,oGACC,kDACA,UACA,qBAGD,mDACC,6BACA,YACA,WACA,yCACA,4BACA,2BACA,WAOA,qEACC,UAED,qEACC,UAIF,wEACC,aAGD,2CACC,wBAGD,yBACC,kBACA,qBACA,sBAGD,qBACC,cACA,mBACA,iBACA,uBACA,aAKD,4CACC,eACA,YACA,mCACA,6BACA,qDAIA,2BACC,4BAKD,wBACC,sBACA,4BACA,+BACC,+CACA,qBACA,kBAGF,0BACC,qBACA,iBAIF,YACC,YACA,sCACA,oBACC,sBAIF,eACC,gDAUD,mBACC,kBACA,cACA,2BACC,kBACA,cAIF,UACC,gBAGD,8CACC,UAIA,WACC,WACA,YAGD,8CAEC,UAGD,oGAGC,WAIF,mBACC,WACA,kBACA,QAEA,kDACC,UAKD,kDACC,UAIF,eACC,WAEA,0CACC,UAKD,uGACC,8CAIF,KACC,mFAGD,OACC,gBACA,YACA,eACA,qBACA,UACC,qBAOD,qBACC,WACA,aAED,wBACC,cACA,gDACA,WACA,aAED,2BACC,WACA,YACA,6BACC,WAGF,wBACC,wCACA,kBACA,mBACA,gBACA,uBACA,0CACA,kCACA,6DACC,0CAGF,sBACC,UACA,WAKF,YACC,oBACA,YAGD,SACC,oBACA,kDACA,4BACA,iCACA,YACA,0BACA,cACA,QACA,uBACA,mBACC,QACA,kBACA,qBACC,WAIA,wFACC,cAIF,gCACC,SACA,sBACA,mCACC,iBACA,gBACA,kBACA,uBACA,+DACC,+EAGF,+CACC,aAIH,gBACC,aACA,uBACC,QAGF,yBAEC,kBACA,aACA,WACA,uBACA,mBACA,gBACA,cAEA,gBAEA,8FAGC,oBAGF,yBACC,UACA,WAGD,oBACC,iBACA,uBAEA,2BACC,uBAGF,+DACC,UAEA,0JAEC,WAOH,QACC,UACA,yCACA,sCACA,qCACA,oCACA,iCACA,oBACC,UAOD,+CACC,SACA,kBAED,mDACC,gBAKF,cACC,mBAMD,mBACC,aACA,QACA,SACA","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["styles.scss","variables.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA,GCEA;AAAA;AAAA;AAAA,GDOA,MACC,mCACA,uCAGD,yQACC,SACA,UACA,SACA,oBACA,eACA,oBACA,wBACA,eACA,uCAGD,6CACC,aAID,0CACC,wDACA,aAGD,UACC,YAEA,8BAGD,6DACC,cAGD,MACC,yBACA,iBACA,mBAGD,cACC,iBACA,mBAGD,YACC,sBAGD,EACC,SACA,6BACA,qBACA,eACA,IACC,eAIF,WACC,aACA,0BAGD,MACC,eACA,QACC,eAIF,0BACC,eAGD,KACC,mCAGD,GACC,gBAGD,KACC,mBAEA,mCACA,uCACA,6BACA,6BAGD,mBACC,kBAGD,qBACC,kBACA,sBACA,qBACA,2BACA,2DACA,uBAGD,iBACC,qBACA,aACA,oCAGD,eACC,YACA,aAGD,cACC,eACA,MACA,SACA,qBACA,YACA,WACA,aACA,kBACA,gDACA,wCACA,iBACA,eACA,kBACC,cACA,kBACA,UACA,QACA,gBAED,gBACC,wCACA,sDACA,4CACC,6CAOH,oBACC,WACA,YAGD,2BACC,+BAGD,gCACC,+BAGD,0BACC,kCACA,yCACA,+BACA,4BAMD,YACC,mDACA,kCAMD,kBACC,sBAKD,4BAEC,oCACA,kBACA,gBACA,WACA,sDACC,gBAED,sEACC,gBAED,kCACC,mBAED,oHAEC,qBACA,YACA,WACA,mBACA,gcAEC,WAOH,sBACC,WASD,oCACC,kBACA,yBACA,sBACA,qBACA,iBAID,kBAEC,kBACA,qBACA,SAEA,YAGD,8CAGC,WAGD,8BACC,sBACA,oBACA,wBACA,wBAGD,2EACC,WAGD,oGACC,kDACA,UACA,qBAGD,mDACC,6BACA,YACA,WACA,yCACA,4BACA,2BACA,WAOA,qEACC,UAED,qEACC,UAIF,wEACC,aAGD,2CACC,wBAGD,yBACC,kBACA,qBACA,sBAGD,qBACC,cACA,mBACA,iBACA,uBACA,aAKD,4CACC,eACA,YACA,mCACA,6BACA,qDAIA,2BACC,4BAKD,wBACC,sBACA,4BACA,+BACC,+CACA,qBACA,kBAGF,0BACC,qBACA,iBAIF,YACC,YACA,sCACA,oBACC,sBAIF,eACC,gDAUD,mBACC,kBACA,cACA,2BACC,kBACA,cAIF,UACC,gBAGD,8CACC,UAIA,WACC,WACA,YAGD,8CAEC,UAGD,oGAGC,WAIF,mBACC,WACA,kBACA,QAEA,kDACC,UAKD,kDACC,UAIF,eACC,WAEA,0CACC,UAKD,uGACC,8CAIF,KACC,mFAGD,OACC,gBACA,YACA,eACA,qBACA,UACC,qBAOD,qBACC,WACA,aAED,wBACC,cACA,gDACA,WACA,aAED,2BACC,WACA,YACA,6BACC,WAGF,wBACC,wCACA,kBACA,mBACA,gBACA,uBACA,0CACA,kCACA,6DACC,0CAGF,sBACC,UACA,WAKF,YACC,oBACA,YAGD,SACC,oBACA,kDACA,4BACA,iCACA,YACA,0BACA,cACA,QACA,uBACA,mBACC,QACA,kBACA,qBACC,WAIA,wFACC,cAIF,gCACC,SACA,sBACA,mCACC,iBACA,gBACA,kBACA,uBACA,+DACC,+EAGF,+CACC,aAIH,gBACC,aACA,uBACC,QAGF,yBAEC,kBACA,aACA,WACA,uBACA,mBACA,gBACA,cAEA,gBAEA,8FAGC,oBAGF,yBACC,UACA,WAGD,oBACC,iBACA,uBAEA,2BACC,uBAGF,+DACC,UAEA,0JAEC,WAOH,QACC,UACA,yCACA,sCACA,qCACA,oCACA,iCACA,oBACC,UAOD,+CACC,SACA,kBAED,mDACC,gBAKF,cACC,mBAMD,mBACC,aACA,QACA,SACA","file":"styles.css"}

core/css/styles.scss

@@ -181,8 +181,8 @@ body {
 /* SELECTION */
 
 ::selection {
-	background-color: var(--color-primary-element);
-	color: var(--color-primary-element-text);
+	background-color: var(--color-background-selection);
+	color: var(--color-text-selection);
 }