Merge pull request #8891 from weseek/feat/148295-marker-color

feat: New marker color

apps/app/src/components/SearchPage/SearchPageBase.module.scss

@@ -9,6 +9,8 @@
 
 .search-result-content :global  {
   .highlighted-keyword {
-    background:linear-gradient(transparent 40%, #FCF0C0 40%);
+    background:linear-gradient(
+      transparent 40%,
+      var(--grw-marker-bg, var(--grw-marker-bg-yellow)) 40%);
   }
 }

apps/app/src/styles/_marker.scss

@@ -0,0 +1,19 @@
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
+
+// Light mode color
+@include bs.color-mode(light) {
+  --grw-marker-bg-yellow: #FFFA90;
+  --grw-marker-bg-red: #FFAADD;
+  --grw-marker-bg-blue: #9AE0FF;
+  --grw-marker-bg-cyan: #88FFF0;
+  --grw-marker-bg-green: #B8FF9A;
+}
+
+// dark mode color
+@include bs.color-mode(dark) {
+  --grw-marker-bg-yellow: #888000;
+  --grw-marker-bg-red: #900066;
+  --grw-marker-bg-blue: #0A6A9A;
+  --grw-marker-bg-cyan: #008888;
+  --grw-marker-bg-green: #007000;
+}

apps/app/src/styles/_variables.scss

@@ -1,10 +1,3 @@
-// == Marker Color
-$grw-marker-yellow: #ff6;
-$grw-marker-red: #f6c;
-$grw-marker-blue: #6cf;
-$grw-marker-cyan: #6ff;
-$grw-marker-green: #6f6;
-
 // == Layout
 $grw-sidebar-nav-width: 48px;
 $grw-navbar-bottom-height: 62px;

apps/app/src/styles/style-app.scss

@@ -25,7 +25,7 @@
 @import 'mirror_mode';
 @import 'modal';
 @import 'share-link';
-
+@import 'marker';
 
 /*
  * for Guest User Mode

packages/preset-themes/src/styles/antarctic.scss

@@ -29,6 +29,9 @@
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-600-rgb);
   --grw-sidebar-nav-btn-color: var(--grw-highlight-600);
 
+  // change marker color
+  --grw-marker-bg: var(--grw-marker-bg-cyan);
+
   &, body {
     background-image: url('../images/antarctic/antarctic.svg');
     background-attachment: fixed;

packages/preset-themes/src/styles/blackboard.scss

@@ -28,6 +28,9 @@
   --grw-wiki-link-color-rgb: var(--grw-primary-400-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-300-rgb);
 
+  // change marker color
+  --grw-marker-bg: var(--grw-marker-bg-red);
+
   &, body {
     background-image: url('../images/blackboard/blackboard.png');
     background-attachment: fixed;

packages/preset-themes/src/styles/classic.scss

@@ -54,4 +54,7 @@
   @import '@growi/core-styles/scss/bootstrap/theming/apply-dark';
 
   --grw-sidebar-nav-btn-color: rgba(var(--grw-highlight-400-rgb), 0.8);
+
+  // change marker color
+  --grw-marker-bg: var(--grw-marker-bg-red);
 }

packages/preset-themes/src/styles/default.scss

@@ -58,4 +58,5 @@
   --grw-wiki-link-color-rgb: var(--grw-highlight-600-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-highlight-400-rgb);
   --grw-sidebar-nav-btn-color: rgba(var(--grw-highlight-400-rgb), 0.8);
+
 }

packages/preset-themes/src/styles/fire-red.scss

@@ -27,6 +27,9 @@
 
   --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-600-rgb);
+
+  // change marker color
+  --grw-marker-bg: var(--grw-marker-bg-cyan);
 }
 
 :root[data-bs-theme='dark'] {
@@ -56,4 +59,7 @@
 
   --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-400-rgb);
+
+    // change marker color
+    --grw-marker-bg: var(--grw-marker-bg-cyan);
 }

packages/preset-themes/src/styles/future.scss

@@ -27,4 +27,7 @@
 
   --grw-wiki-link-color-rgb: var(--grw-primary-400-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-300-rgb);
+
+  // change marker color
+  --grw-marker-bg: var(--grw-marker-bg-cyan);
 }

packages/preset-themes/src/styles/halloween.scss

@@ -39,4 +39,6 @@
   --grw-wiki-link-color-rgb: var(--grw-primary-400-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-300-rgb);
 
+  // change marker color
+  --grw-marker-bg: var(--grw-marker-bg-red);
 }

packages/preset-themes/src/styles/hufflepuff.scss

@@ -28,6 +28,9 @@
   --grw-wiki-link-color-rgb: var(--grw-primary-600-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-800-rgb);
 
+  // change marker color
+  --grw-marker-bg: var(--grw-marker-bg-cyan);
+
   &, body {
     background-image: url('../images/hufflepuff/hufflepuff-light-bg.svg');
     background-attachment: fixed;
@@ -65,6 +68,9 @@
   --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-400-rgb);
 
+  // change marker color
+  --grw-marker-bg: var(--grw-marker-bg-cyan);
+
   &, body {
     background-image: url('../images/hufflepuff/hufflepuff-dark-bg.svg');
     background-attachment: fixed;

packages/preset-themes/src/styles/jade-green.scss

@@ -29,6 +29,9 @@ $min-contrast-ratio: 2;
 
   --grw-wiki-link-color-rgb: var(--grw-primary-700-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-800-rgb);
+
+    // change marker color
+    --grw-marker-bg: var(--grw-marker-bg-red);
 }
 
 :root[data-bs-theme='dark'] {
@@ -58,4 +61,7 @@ $min-contrast-ratio: 2;
 
   --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-400-rgb);
+
+  // change marker color
+  --grw-marker-bg: var(--grw-marker-bg-red);
 }

packages/preset-themes/src/styles/nature.scss

@@ -27,4 +27,7 @@
 
   --grw-wiki-link-color-rgb: var(--grw-primary-600-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-700-rgb);
+
+  // change marker color
+  --grw-marker-bg: var(--grw-marker-bg-blue);
 }

packages/preset-themes/src/styles/wood.scss

@@ -28,6 +28,9 @@
   --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-600-rgb);
 
+  // change marker color
+  --grw-marker-bg: var(--grw-marker-bg-green);
+
   &, body {
     background-image: url('../images/wood/wood.svg');
   }