Merge pull request #44034 from nextcloud/fix/favorite-color

feat(theming): Provide CSS variable for favorite color and adjust for dark mode

apps/files/src/components/FileEntry/FavoriteIcon.vue

@@ -65,7 +65,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .favorite-marker-icon {
-	color: #a08b00;
+	color: var(--color-favorite);
 	// Override NcIconSvgWrapper defaults (clickable area)
 	min-width: unset !important;
     min-height: unset !important;

apps/theming/css/default.css

@@ -37,6 +37,7 @@
   --color-info-rgb: 0,113,173;
   --color-info-hover: #197fb5;
   --color-info-text: #006499;
+  --color-favorite: #A37200;
   --color-loading-light: #cccccc;
   --color-loading-dark: #444444;
   --color-box-shadow-rgb: 77,77,77;

apps/theming/css/theming.css

@@ -1,17 +0,0 @@
-/* Error: Undefined variable.
- *    ,
- * 38 | $invert: luma($color-primary) > 0.6;
- *    |               ^^^^^^^^^^^^^^
- *    '
- *   apps/theming/css/theming.scss 38:15  root stylesheet */
-
-body::before {
-  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
-      "Droid Sans Mono", monospace, monospace;
-  white-space: pre;
-  display: block;
-  padding: 1em;
-  margin-bottom: 1em;
-  border-bottom: 2px solid black;
-  content: "Error: Undefined variable.\a    \2577 \a 38 \2502  $invert: luma($color-primary) > 0.6;\a    \2502                ^^^^^^^^^^^^^^\a    \2575 \a   apps/theming/css/theming.scss 38:15  root stylesheet";
-}

apps/theming/lib/Themes/DarkTheme.php

@@ -113,6 +113,7 @@ class DarkTheme extends DefaultTheme implements ITheme {
 				'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
 				'--color-info-hover' => $this->util->lighten($colorInfo, 10),
 				'--color-info-text' => $colorInfo,
+				'--color-favorite' => '#ffde00',
 
 				// used for the icon loading animation
 				'--color-loading-light' => '#777',

apps/theming/lib/Themes/DefaultTheme.php

@@ -165,6 +165,7 @@ class DefaultTheme implements ITheme {
 			'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
 			'--color-info-hover' => $this->util->mix($colorInfo, $colorMainBackground, 80),
 			'--color-info-text' => $this->util->darken($colorInfo, 4),
+			'--color-favorite' => '#A37200',
 
 			// used for the icon loading animation
 			'--color-loading-light' => '#cccccc',

apps/theming/lib/Themes/HighContrastTheme.php

@@ -110,6 +110,8 @@ class HighContrastTheme extends DefaultTheme implements ITheme {
 				'--color-success-hover' => $this->util->darken($colorSuccess, 7),
 				'--color-success-text' => $this->util->darken($colorSuccess, 14),
 
+				'--color-favorite' => '#936B06',
+
 				'--color-scrollbar' => $this->util->darken($colorMainBackground, 25),
 
 				// used for the icon loading animation

apps/theming/tests/Themes/AccessibleThemeTestCase.php

@@ -64,6 +64,7 @@ class AccessibleThemeTestCase extends TestCase {
 					'--color-info-hover',
 					'--color-success',
 					'--color-success-hover',
+					'--color-favorite',
 				],
 				[
 					'--color-main-background',

apps/weather_status/src/App.vue

@@ -590,7 +590,7 @@ export default {
 
 // Set color to primary element for current / active favorite address
 .favorite-color {
-	color: #a08b00;
+	color: var(--color-favorite);
 }
 
 .weather-status-menu-item__subheader {