fix lint errors

packages/preset-themes/.stylelintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../.stylelintrc.json",
+  "rules": {
+    "no-invalid-position-at-import-rule": null,
+    "no-duplicate-at-import-rules": null
+  }
+}

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

@@ -9,24 +9,18 @@
   @include generate-color-palette('primary', $primary, black, white);
   @include generate-color-palette('highlight', $highlight, black, white);
 
-  $body-color:                mix(#A6C8F0, black, 60%);
-  $body-bg:                   #FAFEFF;
-
-  $body-secondary-color:      rgba($body-color, .75);
-  $body-secondary-bg:         $gray-200;
-
-  $body-tertiary-color:       rgba($body-color, .5);
-  $body-tertiary-bg:          $gray-100;
-
-  $border-color:              $gray-300;
-
-  $link-color:                $gray-800;
+  $body-color: color.mix(#A6C8F0, black, 60%);
+  $body-bg: #FAFEFF;
+  $body-secondary-color: rgba($body-color, .75);
+  $body-secondary-bg: $gray-200;
+  $body-tertiary-color: rgba($body-color, .5);
+  $body-tertiary-bg: $gray-100;
+  $border-color: $gray-300;
+  $link-color: $gray-800;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-light';
 
   --grw-wiki-link-color-rgb: var(--grw-primary-400-rgb);

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

@@ -9,24 +9,18 @@
   @include generate-color-palette('primary', $primary, black, white);
   @include generate-color-palette('highlight', $highlight, black, white);
 
-  $body-color-dark:                   mix(#44A847, white, 20%);
-  $body-bg-dark:                      mix(#44A847, black, 20%);
-
-  $body-secondary-color-dark:         rgba($body-color-dark, .75);
-  $body-secondary-bg-dark:            $gray-800;
-
-  $body-tertiary-color-dark:          rgba($body-color-dark, .5);
-  $body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%);
-
-  $border-color-dark:                 $gray-700;
-
-  $link-color-dark:                   $gray-400;
+  $body-color-dark: color.mix(#44A847, white, 20%);
+  $body-bg-dark: color.mix(#44A847, black, 20%);
+  $body-secondary-color-dark: rgba($body-color-dark, .75);
+  $body-secondary-bg-dark: $gray-800;
+  $body-tertiary-color-dark: rgba($body-color-dark, .5);
+  $body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%);
+  $border-color-dark: $gray-700;
+  $link-color-dark: $gray-400;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-dark';
 
   --grw-wiki-link-color-rgb: var(--grw-primary-400-rgb);

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

@@ -1,7 +1,7 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use './variables' as var;
 @use './theme/mixins/page-editor-mode-manager';
+
 // @use './theme/hsl-functions' as hsl;
 
 .growi:not(.login-page) {
@@ -14,31 +14,31 @@
   }
 }
 
-//== Light Mode
-//
+// == Light Mode
 :root[data-bs-theme='light'] {
-  --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
+  --primary: hsl(var(--primary-hs) var(--primary-l)) !important;
   --primary-hs: 53,56%;
   --primary-l: 61%;
-  --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important;
+  --secondary: hsl(var(--secondary-hs) var(--secondary-l)) !important;
   --secondary-hs: 208,7%;
   --secondary-l: 46%;
 
   // Background colors
-  --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
+  --bgcolor-global: hsl(var(--bgcolor-global-hs) var(--bgcolor-global-l));
   --bgcolor-global-hs: 0,0%;
   --bgcolor-global-l: 100%;
   --bgcolor-card: #{bs.$gray-100};
-  --bgcolor-inline-code: #{bs.$gray-100}; //optional
+  --bgcolor-inline-code: #{bs.$gray-100}; // optional
   --bgcolor-blinked-section: #{hsl.alpha(var(--primary),50%)};
-  //--bgcolor-keyword-highlighted: #{$grw-marker-yellow};
+
+  // --bgcolor-keyword-highlighted: #{$grw-marker-yellow};
 
   // Font colors
-  --color-global: hsl(var(--color-global-hs),var(--color-global-l));
+  --color-global: hsl(var(--color-global-hs) var(--color-global-l));
   --color-global-hs: 214,60%;
   --color-global-l: 17%;
   --color-reversal: #{bs.$gray-100};
-  --color-link: hsl(var(--color-link-hs),var(--color-link-l));
+  --color-link: hsl(var(--color-link-hs) var(--color-link-l));
   --color-link-hs: 117,51%;
   --color-link-l: 35%;
   --color-link-hover: #{hsl.lighten(var(--color-link), 15%)};
@@ -56,12 +56,13 @@
   // List Group colors
   // --color-list: var(--color-global);
   --bgcolor-list: transparent;
+
   // --color-list-hover: var(--color-reversal);
   --color-list-active: var(--bgcolor-global);
   --bgcolor-list-active: var(--bgcolor-navbar);
 
   // Navbar
-  --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l));
+  --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs) var(--bgcolor-navbar-l));
   --bgcolor-navbar-h: 356;
   --bgcolor-navbar-s: 100%;
   --bgcolor-navbar-l: 35%;
@@ -75,13 +76,13 @@
 
   // Logo colors
   --bgcolor-logo: var(--bgcolor-navbar);
-  --fillcolor-logo-mark: hsl(var(--bgcolor-navbar-h),calc(var(--bgcolor-navbar-s) - 50%),calc(var(--bgcolor-navbar-l) + 50%));
+  --fillcolor-logo-mark: hsl(var(--bgcolor-navbar-h) calc(var(--bgcolor-navbar-s) - 50%) calc(var(--bgcolor-navbar-l) + 50%));
 
   // Sidebar
   --bgcolor-sidebar: var(--color-link);
   --bgcolor-sidebar-hs: var(--color-link-hs);
   --bgcolor-sidebar-l: var(--color-link-l);
-  --bgcolor-sidebar-nav-item-active: rgba(black, 0.37); // optional
+  --bgcolor-sidebar-nav-item-active: rgb(black 0.37); // optional
   --text-shadow-sidebar-nav-item-active: 0px 0px 10px var(--primary); // optional
 
   // Sidebar resize button
@@ -96,7 +97,7 @@
   --color-sidebar-context: var(--color-link);
   --color-sidebar-context-hs: var(--color-link-hs);
   --color-sidebar-context-l: var(--color-link-l);
-  --bgcolor-sidebar-context: hsl(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l));
+  --bgcolor-sidebar-context: hsl(var(--bgcolor-sidebar-context-hs) var(--bgcolor-sidebar-context-l));
   --bgcolor-sidebar-context-hs: 135,57%;
   --bgcolor-sidebar-context-l: 97%;
 
@@ -104,12 +105,12 @@
   --bgcolor-sidebar-list-group: #fafbff; // optional
 
   // Subnavigation
-  --bgcolor-subnav: hsl(var(--bgcolor-subnav-hs),var(--bgcolor-subnav-l));
+  --bgcolor-subnav: hsl(var(--bgcolor-subnav-hs) var(--bgcolor-subnav-l));
   --bgcolor-subnav-hs: var(--bgcolor-global-hs);
   --bgcolor-subnav-l: calc(var(--bgcolor-global-l) - 3%);
 
   // Icon colors
-  --color-editor-icons: var(--color-global);  --color-editor-icons: var(--color-global);
+  --color-editor-icons: var(--color-global);
 
   // Border colors
   --border-color-theme: #{bs.$gray-300}; // former: `$navbar-border: $gray-300;`
@@ -148,11 +149,12 @@
     .input-group {
       .input-group-text {
         color: bs.$gray-700;
-        background-color: rgba(darken(white, 20%), 0.6);
+        /* stylelint-disable-next-line scss/no-global-function-names */
+        background-color: rgb(darken(white, 20%) 0.6);
       }
       .form-control {
         color: bs.$gray-700;
-        background-color: rgba(white, 0.6);
+        background-color: rgb(white 0.6);
       }
     }
 

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

@@ -9,24 +9,18 @@
   @include generate-color-palette('primary', $primary, black, white);
   @include generate-color-palette('highlight', $highlight,black, white);
 
-  $body-color:                #112744;
-  $body-bg:                   white;
-
-  $body-secondary-color:      rgba($body-color, .75);
-  $body-secondary-bg:         $gray-200;
-
-  $body-tertiary-color:       rgba($body-color, .5);
-  $body-tertiary-bg:          $gray-100;
-
-  $border-color:              var(--grw-highlight-200);
-
-  $link-color:                rgba(25, 56, 186, 1);
+  $body-color: #112744;
+  $body-bg: white;
+  $body-secondary-color: rgba($body-color, .75);
+  $body-secondary-bg: $gray-200;
+  $body-tertiary-color: rgba($body-color, .5);
+  $body-tertiary-bg: $gray-100;
+  $border-color: var(--grw-highlight-200);
+  $link-color: rgb(25 56 186 / 100%);
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-light';
 
   --grw-sidebar-nav-btn-color: var(--grw-highlight-600);
@@ -43,25 +37,19 @@
   @include generate-color-palette('primary', $primary, black, white);
   @include generate-color-palette('highlight', $highlight, black, white);
 
-  $body-color-dark:                   $gray-300;
-  $body-bg-dark:                      #1c1a1a;
-
-  $body-secondary-color-dark:         rgba($body-color-dark, .75);
-  $body-secondary-bg-dark:            $gray-800;
-
-  $body-tertiary-color-dark:          rgba($body-color-dark, .5);
-  $body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%);
-
-  $border-color-dark:                 var(--grw-highlight-200);
-
-  $link-color-dark:                   mix(#68829D, white, 80%);
+  $body-color-dark: $gray-300;
+  $body-bg-dark: #1c1a1a;
+  $body-secondary-color-dark: rgba($body-color-dark, .75);
+  $body-secondary-bg-dark: $gray-800;
+  $body-tertiary-color-dark: rgba($body-color-dark, .5);
+  $body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%);
+  $border-color-dark: var(--grw-highlight-200);
+  $link-color-dark: color.mix(#68829D, white, 80%);
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-dark';
 
-  --grw-sidebar-nav-btn-color: rgba(var(--grw-highlight-400-rgb), 0.8);
+  --grw-sidebar-nav-btn-color: rgb(var(--grw-highlight-400-rgb) 0.8);
 }

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

@@ -9,24 +9,18 @@
   @include generate-color-palette('primary', $primary, #000010, white, 22%, 22%);
   @include generate-color-palette('highlight', $highlight);
 
-  $body-color:                $gray-800;
-  $body-bg:                   white;
-
-  $body-secondary-color:      rgba($body-color, .75);
-  $body-secondary-bg:         $gray-200;
-
-  $body-tertiary-color:       rgba($body-color, .5);
-  $body-tertiary-bg:          $gray-100;
-
-  $border-color:              var(--grw-highlight-200);
-
-  $link-color:                #434240;
+  $body-color: $gray-800;
+  $body-bg: white;
+  $body-secondary-color: rgba($body-color, .75);
+  $body-secondary-bg: $gray-200;
+  $body-tertiary-color: rgba($body-color, .5);
+  $body-tertiary-bg: $gray-100;
+  $border-color: var(--grw-highlight-200);
+  $link-color: #434240;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-light';
 
   --grw-wiki-link-color-rgb: var(--grw-highlight-700-rgb);
@@ -45,27 +39,21 @@
   @include generate-color-palette('primary', $primary, #000010, white, 22%, 22%);
   @include generate-color-palette('highlight', $highlight, black, white, 22%, 22%);
 
-  $body-color-dark:                   $gray-300;
-  $body-bg-dark:                      #1c1a1a;
-
-  $body-secondary-color-dark:         rgba($body-color-dark, .75);
-  $body-secondary-bg-dark:            $gray-800;
-
-  $body-tertiary-color-dark:          rgba($body-color-dark, .5);
-  $body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%);
-
-  $border-color-dark:                 var(--grw-highlight-200);
-
-  $link-color-dark:                   $gray-500;
+  $body-color-dark: $gray-300;
+  $body-bg-dark: #1c1a1a;
+  $body-secondary-color-dark: rgba($body-color-dark, .75);
+  $body-secondary-bg-dark: $gray-800;
+  $body-tertiary-color-dark: rgba($body-color-dark, .5);
+  $body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%);
+  $border-color-dark: var(--grw-highlight-200);
+  $link-color-dark: $gray-500;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-dark';
 
   --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);
+  --grw-sidebar-nav-btn-color: rgb(var(--grw-highlight-400-rgb) 0.8);
 }

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

@@ -9,24 +9,18 @@
   @include generate-color-palette('primary', $primary, #120700, white);
   @include generate-color-palette('highlight', $highlight, #120700, white);
 
-  $body-color:                mix(#C9BBBA, #120700, 40%);
-  $body-bg:                   white;
-
-  $body-secondary-color:      rgba($body-color, .75);
-  $body-secondary-bg:         $gray-200;
-
-  $body-tertiary-color:       rgba($body-color, .5);
-  $body-tertiary-bg:          $gray-100;
-
-  $border-color:              $gray-300;
-
-  $link-color:                $gray-800;
+  $body-color: color.mix(#C9BBBA, #120700, 40%);
+  $body-bg: white;
+  $body-secondary-color: rgba($body-color, .75);
+  $body-secondary-bg: $gray-200;
+  $body-tertiary-color: rgba($body-color, .5);
+  $body-tertiary-bg: $gray-100;
+  $border-color: $gray-300;
+  $link-color: $gray-800;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-light';
 
   --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);
@@ -44,24 +38,18 @@
   @include generate-color-palette('primary', $primary, #120700, white);
   @include generate-color-palette('highlight', $highlight, #120700, white);
 
-  $body-color-dark:                   $gray-400;
-  $body-bg-dark:                      $gray-900;
-
-  $body-secondary-color-dark:         rgba($body-color-dark, .75);
-  $body-secondary-bg-dark:            $gray-800;
-
-  $body-tertiary-color-dark:          rgba($body-color-dark, .5);
-  $body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%);
-
-  $border-color-dark:                 $gray-700;
-
-  $link-color-dark:                   $gray-400;
+  $body-color-dark: $gray-400;
+  $body-bg-dark: $gray-900;
+  $body-secondary-color-dark: rgba($body-color-dark, .75);
+  $body-secondary-bg-dark: $gray-800;
+  $body-tertiary-color-dark: rgba($body-color-dark, .5);
+  $body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%);
+  $border-color-dark: $gray-700;
+  $link-color-dark: $gray-400;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-dark';
 
   --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);

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

@@ -9,24 +9,18 @@
   @include generate-color-palette('primary', $primary, black, white);
   @include generate-color-palette('highlight', $highlight, black, white);
 
-  $body-color-dark:                   mix(#406C65, white, 20%);
-  $body-bg-dark:                      mix(#15A3A7, black, 20%);
-
-  $body-secondary-color-dark:         rgba($body-color-dark, .75);
-  $body-secondary-bg-dark:            $gray-800;
-
-  $body-tertiary-color-dark:          rgba($body-color-dark, .5);
-  $body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%);
-
-  $border-color-dark:                 $gray-700;
-
-  $link-color-dark:                   $gray-400;
+  $body-color-dark: color.mix(#406C65, white, 20%);
+  $body-bg-dark: color.mix(#15A3A7, black, 20%);
+  $body-secondary-color-dark: rgba($body-color-dark, .75);
+  $body-secondary-bg-dark: $gray-800;
+  $body-tertiary-color-dark: rgba($body-color-dark, .5);
+  $body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%);
+  $border-color-dark: $gray-700;
+  $link-color-dark: $gray-400;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-dark';
 
   --grw-wiki-link-color-rgb: var(--grw-primary-400-rgb);

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

@@ -1,5 +1,6 @@
 :root[data-bs-theme] {
   @import '@growi/core-styles/scss/bootstrap/init-stage-1';
+
   $gray-100: #F2ECF0;
   $gray-200: #E6DAE2;
   $gray-300: #DAC7D3;
@@ -9,6 +10,7 @@
   $gray-700: #7C656D;
   $gray-800: #594749;
   $gray-900: #362824;
+
   @import '@growi/core-styles/scss/bootstrap/theming/variables';
   @import '@growi/core-styles/scss/bootstrap/theming/utils/color-palette';
 
@@ -18,24 +20,18 @@
   @include generate-color-palette('primary', $primary, #140700, white);
   @include generate-color-palette('highlight', $highlight, #240E3E, white);
 
-  $body-color-dark:                   $gray-300;
-  $body-bg-dark:                      #1B0A0A;
-
-  $body-secondary-color-dark:         rgba($body-color-dark, .75);
-  $body-secondary-bg-dark:            $gray-800;
-
-  $body-tertiary-color-dark:          rgba($body-color-dark, .5);
-  $body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%);
-
-  $border-color-dark:                 $gray-700;
-
-  $link-color-dark:                   $gray-400;
+  $body-color-dark: $gray-300;
+  $body-bg-dark: #1B0A0A;
+  $body-secondary-color-dark: rgba($body-color-dark, .75);
+  $body-secondary-bg-dark: $gray-800;
+  $body-tertiary-color-dark: rgba($body-color-dark, .5);
+  $body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%);
+  $border-color-dark: $gray-700;
+  $link-color-dark: $gray-400;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-dark';
 
   --grw-wiki-link-color-rgb: var(--grw-primary-400-rgb);

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

@@ -10,24 +10,18 @@
   @include generate-color-palette('primary', $primary, black, white);
   @include generate-color-palette('highlight', $highlight, #201A00, #FFF0C0);
 
-  $body-color:                $gray-800;
-  $body-bg:                   #FFFBEF;
-
-  $body-secondary-color:      rgba($body-color, .75);
-  $body-secondary-bg:         $gray-200;
-
-  $body-tertiary-color:       rgba($body-color, .5);
-  $body-tertiary-bg:          $gray-100;
-
-  $border-color:              $gray-300;
-
-  $link-color:                $gray-800;
+  $body-color: $gray-800;
+  $body-bg: #FFFBEF;
+  $body-secondary-color: rgba($body-color, .75);
+  $body-secondary-bg: $gray-200;
+  $body-tertiary-color: rgba($body-color, .5);
+  $body-tertiary-bg: $gray-100;
+  $border-color: $gray-300;
+  $link-color: $gray-800;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-light';
 
   --grw-wiki-link-color-rgb: var(--grw-primary-600-rgb);
@@ -52,25 +46,19 @@
   @include generate-color-palette('primary', $primary, black, white);
   @include generate-color-palette('highlight', $highlight, #201A00, #FFF0C0);
 
-  $body-color-dark:                   $gray-300;
-  $body-bg-dark:                      #26231E;
-
-  $body-secondary-color-dark:         rgba($body-color-dark, .75);
-  $body-secondary-bg-dark:            $gray-800;
-
-  $body-tertiary-color-dark:          rgba($body-color-dark, .5);
-  $body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%);
-
-  $border-color-dark:                 $gray-700;
-
-  $link-color-dark:                   $gray-400;
+  $body-color-dark: $gray-300;
+  $body-bg-dark: #26231E;
+  $body-secondary-color-dark: rgba($body-color-dark, .75);
+  $body-secondary-bg-dark: $gray-800;
+  $body-tertiary-color-dark: rgba($body-color-dark, .5);
+  $body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%);
+  $border-color-dark: $gray-700;
+  $link-color-dark: $gray-400;
 
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-dark';
 
   --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);

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

@@ -9,24 +9,18 @@
   @include generate-color-palette('primary', $primary, black, white);
   @include generate-color-palette('highlight', $highlight, black, white);
 
-  $body-color:                mix(#00A2B7, black, 40%);
-  $body-bg:                   white;
-
-  $body-secondary-color:      rgba($body-color, .75);
-  $body-secondary-bg:         $gray-200;
-
-  $body-tertiary-color:       rgba($body-color, .5);
-  $body-tertiary-bg:          $gray-100;
-
-  $border-color:              $gray-300;
-
-  $link-color:                $gray-800;
+  $body-color: color.mix(#00A2B7, black, 40%);
+  $body-bg: white;
+  $body-secondary-color: rgba($body-color, .75);
+  $body-secondary-bg: $gray-200;
+  $body-tertiary-color: rgba($body-color, .5);
+  $body-tertiary-bg: $gray-100;
+  $border-color: $gray-300;
+  $link-color: $gray-800;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-light';
 
   --grw-wiki-link-color-rgb: var(--grw-primary-600-rgb);

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

@@ -11,24 +11,18 @@ $min-contrast-ratio: 2;
   @include generate-color-palette('primary', $primary, black, white);
   @include generate-color-palette('highlight', $highlight, black, white);
 
-  $body-color:                $gray-800;
-  $body-bg:                   white;
-
-  $body-secondary-color:      rgba($body-color, .75);
-  $body-secondary-bg:         $gray-200;
-
-  $body-tertiary-color:       rgba($body-color, .5);
-  $body-tertiary-bg:          $gray-100;
-
-  $border-color:              $gray-300;
-
-  $link-color:                $gray-800;
+  $body-color: $gray-800;
+  $body-bg: white;
+  $body-secondary-color: rgba($body-color, .75);
+  $body-secondary-bg: $gray-200;
+  $body-tertiary-color: rgba($body-color, .5);
+  $body-tertiary-bg: $gray-100;
+  $border-color: $gray-300;
+  $link-color: $gray-800;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-light';
 
   --grw-wiki-link-color-rgb: var(--grw-primary-700-rgb);
@@ -46,24 +40,18 @@ $min-contrast-ratio: 2;
   @include generate-color-palette('primary', $primary, black, white);
   @include generate-color-palette('highlight', $highlight, black, white);
 
-  $body-color-dark:                   mix(#BBC3BF, white, 60%);
-  $body-bg-dark:                      $gray-900;
-
-  $body-secondary-color-dark:         rgba($body-color-dark, .75);
-  $body-secondary-bg-dark:            $gray-800;
-
-  $body-tertiary-color-dark:          rgba($body-color-dark, .5);
-  $body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%);
-
-  $border-color-dark:                 $gray-700;
-
-  $link-color-dark:                   $gray-400;
+  $body-color-dark: color.mix(#BBC3BF, white, 60%);
+  $body-bg-dark: $gray-900;
+  $body-secondary-color-dark: rgba($body-color-dark, .75);
+  $body-secondary-bg-dark: $gray-800;
+  $body-tertiary-color-dark: rgba($body-color-dark, .5);
+  $body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%);
+  $border-color-dark: $gray-700;
+  $link-color-dark: $gray-400;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-dark';
 
   --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);

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

@@ -9,24 +9,18 @@
   @include generate-color-palette('primary', $primary, black, #F5F5F5, 20%, 25%);
   @include generate-color-palette('highlight', $highlight, black, white, 20%, 25%);
 
-  $body-color:                $gray-700;
-  $body-bg:                   white;
-
-  $body-secondary-color:      rgba($body-color, .75);
-  $body-secondary-bg:         $gray-200;
-
-  $body-tertiary-color:       rgba($body-color, .5);
-  $body-tertiary-bg:          $gray-100;
-
-  $border-color:              $gray-300;
-
-  $link-color:                $gray-800;
+  $body-color: $gray-700;
+  $body-bg: white;
+  $body-secondary-color: rgba($body-color, .75);
+  $body-secondary-bg: $gray-200;
+  $body-tertiary-color: rgba($body-color, .5);
+  $body-tertiary-bg: $gray-100;
+  $border-color: $gray-300;
+  $link-color: $gray-800;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-light';
 
   --grw-wiki-link-color-rgb: var(--grw-primary-400-rgb);

packages/preset-themes/src/styles/mono-blue.scss

@@ -9,24 +9,18 @@
   @include generate-color-palette('primary', $primary, #021529, white);
   @include generate-color-palette('highlight', $highlight, black, #edffff);
 
-  $body-color:                $gray-700;
-  $body-bg:                   white;
-
-  $body-secondary-color:      rgba($body-color, .75);
-  $body-secondary-bg:         $gray-200;
-
-  $body-tertiary-color:       rgba($body-color, .5);
-  $body-tertiary-bg:          $gray-100;
-
-  $border-color:              $gray-300;
-
-  $link-color:                $gray-800;
+  $body-color: $gray-700;
+  $body-bg: white;
+  $body-secondary-color: rgba($body-color, .75);
+  $body-secondary-bg: $gray-200;
+  $body-tertiary-color: rgba($body-color, .5);
+  $body-tertiary-bg: $gray-100;
+  $border-color: $gray-300;
+  $link-color: $gray-800;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-light';
 
   --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);
@@ -44,24 +38,18 @@
   @include generate-color-palette('primary', $primary, #021529, white);
   @include generate-color-palette('highlight', $highlight, black, white);
 
-  $body-color-dark:                   $gray-400;
-  $body-bg-dark:                      #16202c;
-
-  $body-secondary-color-dark:         rgba($body-color-dark, .75);
-  $body-secondary-bg-dark:            $gray-800;
-
-  $body-tertiary-color-dark:          rgba($body-color-dark, .5);
-  $body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%);
-
-  $border-color-dark:                 $gray-700;
-
-  $link-color-dark:                   $gray-400;
+  $body-color-dark: $gray-400;
+  $body-bg-dark: #16202c;
+  $body-secondary-color-dark: rgba($body-color-dark, .75);
+  $body-secondary-bg-dark: $gray-800;
+  $body-tertiary-color-dark: rgba($body-color-dark, .5);
+  $body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%);
+  $border-color-dark: $gray-700;
+  $link-color-dark: $gray-400;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-dark';
 
   --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);

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

@@ -9,24 +9,18 @@
   @include generate-color-palette('primary', $primary, black, white);
   @include generate-color-palette('highlight', $highlight, black, white);
 
-  $body-color:                $gray-800;
-  $body-bg:                   mix(#9DE201, white, 5%);
-
-  $body-secondary-color:      rgba($body-color, .75);
-  $body-secondary-bg:         $gray-200;
-
-  $body-tertiary-color:       rgba($body-color, .5);
-  $body-tertiary-bg:          $gray-100;
-
-  $border-color:              $gray-300;
-
-  $link-color:                $gray-800;
+  $body-color: $gray-800;
+  $body-bg: color.mix(#9DE201, white, 5%);
+  $body-secondary-color: rgba($body-color, .75);
+  $body-secondary-bg: $gray-200;
+  $body-tertiary-color: rgba($body-color, .5);
+  $body-tertiary-bg: $gray-100;
+  $border-color: $gray-300;
+  $link-color: $gray-800;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-light';
 
   --grw-wiki-link-color-rgb: var(--grw-primary-600-rgb);

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

@@ -9,24 +9,18 @@
   @include generate-color-palette('primary', $primary, #002000, white);
   @include generate-color-palette('highlight', $highlight, #401702, white);
 
-  $body-color:                #4C5F40;
-  $body-bg:                   white;
-
-  $body-secondary-color:      rgba($body-color, .75);
-  $body-secondary-bg:         $gray-200;
-
-  $body-tertiary-color:       rgba($body-color, .5);
-  $body-tertiary-bg:          $gray-100;
-
-  $border-color:              $gray-300;
-
-  $link-color:                $gray-800;
+  $body-color: #4C5F40;
+  $body-bg: white;
+  $body-secondary-color: rgba($body-color, .75);
+  $body-secondary-bg: $gray-200;
+  $body-tertiary-color: rgba($body-color, .5);
+  $body-tertiary-bg: $gray-100;
+  $border-color: $gray-300;
+  $link-color: $gray-800;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-light';
 
   --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);

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

@@ -9,24 +9,18 @@
   @include generate-color-palette('primary', $primary, black, white);
   @include generate-color-palette('highlight', $highlight, black, white);
 
-  $body-color:                mix(#967428, black, 60%);
-  $body-bg:                   #FFFFF5;
-
-  $body-secondary-color:      rgba($body-color, .75);
-  $body-secondary-bg:         $gray-200;
-
-  $body-tertiary-color:       rgba($body-color, .5);
-  $body-tertiary-bg:          $gray-100;
-
-  $border-color:              $gray-300;
-
-  $link-color:                $gray-800;
+  $body-color: color.mix(#967428, black, 60%);
+  $body-bg: #FFFFF5;
+  $body-secondary-color: rgba($body-color, .75);
+  $body-secondary-bg: $gray-200;
+  $body-tertiary-color: rgba($body-color, .5);
+  $body-tertiary-bg: $gray-100;
+  $border-color: $gray-300;
+  $link-color: $gray-800;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
-
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-
   @import '@growi/core-styles/scss/bootstrap/theming/apply-light';
 
   --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);