apply marker color to $bgcolor-highlighted

packages/app/src/styles/_variables.scss

@@ -2,6 +2,13 @@
 $growi-green: #74bc46;
 $growi-blue: #175fa5;
 
+//== Marker Color
+$grw-marker-yellow: #ff6;
+$grw-marker-red: #f6c;
+$grw-marker-blue: #6cf;
+$grw-marker-cyan: cyan;
+$grw-marker-green: #6f6;
+
 $font-family-for-staff-credit: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !default;
 $font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', MeiryoKe_Gothic, monospace;
 

packages/app/src/styles/theme/_apply-colors.scss

@@ -17,6 +17,7 @@ $bordercolor-nav-tabs-active: $bordercolor-nav-tabs $bordercolor-nav-tabs $bgcol
 $color-seen-user: #549c79 !default;
 $reload-btn-rc-color: $gray-500;
 $reload-btn-cs-color: $gray-500;
+$bgcolor-highlighted: $grw-marker-yellow !default;
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -450,8 +451,7 @@ ul.pagination {
  */
 .wiki {
   .highlighted {
-    background-color: $bgcolor-highlighted;
-    //@include highlighted($bgcolor-highlighted);
+    background: linear-gradient(transparent 60%, $bgcolor-highlighted 60%);
   }
 
   a {

packages/app/src/styles/theme/antarctic.scss

@@ -51,7 +51,7 @@ html[dark] {
   $bgcolor-global: $themelight;
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: $gray-50;
-  $bgcolor-highlighted: rgba($primary, 0.15);
+  //$bgcolor-highlighted: $grw-marker-yellow;
 
   // Font colors
   $color-global: black;

packages/app/src/styles/theme/christmas.scss

@@ -43,7 +43,7 @@ html[dark] {
   // Background colors
   $bgcolor-card: $gray-50;
   $bgcolor-inline-code: $gray-100; //optional
-  $bgcolor-highlighted: rgba($primary, 0.5);
+  // $bgcolor-highlighted: $grw-marker-yellow;
 
   // Font colors
   $color-global: #112744;

packages/app/src/styles/theme/default.scss

@@ -22,7 +22,7 @@ html[light] {
   $bgcolor-global: white;
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: $gray-50;
-  $bgcolor-highlighted: rgba($primary, 0.1);
+  // $bgcolor-highlighted: $grw-marker-yellow;
 
   // Font colors
   $color-global: #112744;
@@ -123,7 +123,7 @@ html[dark] {
   $bgcolor-global: #131418;
   $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: darken($bgcolor-global, 5%);
-  $bgcolor-highlighted: rgba($primary, 0.4);
+  $bgcolor-highlighted: $grw-marker-red;
 
   // Font colors
   $color-global: $gray-400;

packages/app/src/styles/theme/future.scss

@@ -11,7 +11,7 @@ html[dark] {
   $bgcolor-global: $themecolor;
   $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: darken($themecolor, 5%);
-  $bgcolor-highlighted: rgba($primary, 0.4);
+  $bgcolor-highlighted: $grw-marker-red;
 
   // Font colors
   $color-global: #95abba;

packages/app/src/styles/theme/halloween.scss

@@ -39,7 +39,7 @@ html[dark] {
   $bgcolor-global: #050000;
   $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: $bgcolor-global;
-  $bgcolor-highlighted: rgba($primary, 0.4);
+  $bgcolor-highlighted: $grw-marker-cyan;
 
   // Font colors
   $color-global: #e9af2b;

packages/app/src/styles/theme/hufflepuff.scss

@@ -35,7 +35,7 @@ html[light] {
   $bgcolor-global: lighten($themelight, 10%);
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: $gray-100;
-  $bgcolor-highlighted: rgba($primary, 0.5);
+  $bgcolor-highlighted: $grw-marker-green;
 
   // Font colors
   $color-global: $subthemecolor;
@@ -174,7 +174,7 @@ html[dark] {
   // $bgcolor-navbar: #27343b;
   $bgcolor-inline-code: $subthemecolor;
   $bgcolor-card: darken($themedark, 5%);
-  $bgcolor-highlighted: rgba($primary, 0.5);
+  $bgcolor-highlighted: $grw-marker-red;
 
   // Font colors
   $color-global: #efe2cf;

packages/app/src/styles/theme/island.scss

@@ -11,7 +11,7 @@ html[dark] {
   $bgcolor-card: $gray-50;
   $bgcolor-global: lighten($color-themelight, 10%);
   $bgcolor-inline-code: $gray-100; //optional
-  $bgcolor-highlighted: rgba($primary, 0.3);
+  // $bgcolor-highlighted: $grw-marker-yellow;
 
   // Font colors
   $color-global: #112744;

packages/app/src/styles/theme/kibela.scss

@@ -45,7 +45,7 @@ html[dark] {
   $primary: $bgcolor-theme;
   $info: lighten($bgcolor-theme, 20%);
 
-  $bgcolor-highlighted: rgba($primary, 0.2);
+  // $bgcolor-highlighted: $grw-marker-yellow;
 
   // List Group colors
   $color-list: $color-global;

packages/app/src/styles/theme/mono-blue.scss

@@ -14,7 +14,7 @@ html[light] {
   $bgcolor-global: $themelight;
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: darken($themelight, 5%);
-  $bgcolor-highlighted: rgba($primary, 0.1);
+  // $bgcolor-highlighted: $grw-marker-yellow;
 
   // Font colors
   $color-global: $themecolor;
@@ -112,7 +112,7 @@ html[dark] {
   $bgcolor-navbar: #27343b;
   $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: darken($themedark, 5%);
-  $bgcolor-highlighted: rgba($primary, 0.5);
+  $bgcolor-highlighted: $grw-marker-green;
 
   // Font colors
   $color-global: #d3d4d4;

packages/app/src/styles/theme/nature.scss

@@ -45,7 +45,7 @@ html[dark] {
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: #f1ffe4;
   $bgcolor-subnav: #fafafa;
-  $bgcolor-highlighted: rgba($primary, 0.1);
+  // $bgcolor-highlighted: $grw-marker-yellow;
 
   // Font colors
   $color-global: #460039;

packages/app/src/styles/theme/spring.scss

@@ -34,7 +34,7 @@ html[dark] {
   $bgcolor-global: white;
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: $gray-50;
-  $bgcolor-highlighted: rgba($primary, 0.5);
+  $bgcolor-highlighted: $grw-marker-cyan;
 
   // Font colors
   $color-global: black;

packages/app/src/styles/theme/wood.scss

@@ -43,7 +43,7 @@ html[dark] {
   // Background colors
   $bgcolor-global: white;
   $bgcolor-card: #ece8de;
-  $bgcolor-highlighted: rgba($primary, 0.3);
+  $bgcolor-highlighted: $grw-marker-blue;
 
   // Font colors
   // $color-global: black;