Merge pull request #7969 from weseek/support/128303-128308-build-christmas

support: Able to build styles/*.scss

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

@@ -1,6 +1,6 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
-@use './variables' as *;
+@use './variables' as var;
 @use './theme/mixins/page-editor-mode-manager';
 @use './theme/hsl-functions' as hsl;
 
@@ -28,8 +28,8 @@
   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
   --bgcolor-global-hs: 0,0%;
   --bgcolor-global-l: 100%;
-  --bgcolor-card: #{$gray-50};
-  --bgcolor-inline-code: #{$gray-100}; //optional
+  --bgcolor-card: #{bs.$gray-100};
+  --bgcolor-inline-code: #{bs.$gray-100}; //optional
   --bgcolor-blinked-section: #{hsl.alpha(var(--primary),50%)};
   //--bgcolor-keyword-highlighted: #{$grw-marker-yellow};
 
@@ -37,7 +37,7 @@
   --color-global: hsl(var(--color-global-hs),var(--color-global-l));
   --color-global-hs: 214,60%;
   --color-global-l: 17%;
-  --color-reversal: #{$gray-100};
+  --color-reversal: #{bs.$gray-100};
   --color-link: hsl(var(--color-link-hs),var(--color-link-l));
   --color-link-hs: 117,51%;
   --color-link-l: 35%;
@@ -51,7 +51,7 @@
   --color-modal-header: var(--bgcolor-global);
 
   // Table colors
-  --border-color-table: #{$gray-400}; // optional
+  --border-color-table: #{bs.$gray-400}; // optional
 
   // List Group colors
   // --color-list: var(--color-global);
@@ -112,7 +112,7 @@
   --color-editor-icons: var(--color-global);  --color-editor-icons: var(--color-global);
 
   // Border colors
-  --border-color-theme: #{$gray-300}; // former: `$navbar-border: $gray-300;`
+  --border-color-theme: #{bs.$gray-300}; // former: `$navbar-border: $gray-300;`
   --bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
@@ -147,11 +147,11 @@
   .nologin {
     .input-group {
       .input-group-text {
-        color: $gray-700;
+        color: bs.$gray-700;
         background-color: rgba(darken(white, 20%), 0.6);
       }
       .form-control {
-        color: $gray-700;
+        color: bs.$gray-700;
         background-color: rgba(white, 0.6);
       }
     }

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

@@ -1,5 +1,6 @@
-@use './variables' as *;
-@use './bootstrap/variables' as *;
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+@use './variables' as var;
 @use './theme/mixins/page-editor-mode-manager';
 @use './theme/hsl-functions' as hsl;
 
@@ -19,7 +20,7 @@
   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
   --bgcolor-global-hs: 0,0%;
   --bgcolor-global-l: 100%;
-  --bgcolor-inline-code: #{$gray-100}; //optional
+  --bgcolor-inline-code: #{bs.$gray-100}; //optional
   --bgcolor-card: var(--accentcolor);
   --bgcolor-blinked-section: #{hsl.alpha(var(--primary),10%)};
   //--bgcolor-keyword-highlighted: #{$grw-marker-yellow};
@@ -28,7 +29,7 @@
   --color-global: hsl(var(--color-global-hs),var(--color-global-l));
   --color-global-hs: 0,0%;
   --color-global-l: 17%;
-  --color-reversal: #{$gray-100};
+  --color-reversal: #{bs.$gray-100};
   --color-link: var(--primary);
   --color-link-hs: var(--primary-hs);
   --color-link-l: var(--primary-l);
@@ -149,16 +150,16 @@
   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
   --bgcolor-global-hs: 0,0%;
   --bgcolor-global-l: 20%;
-  --bgcolor-inline-code: #{$gray-100}; //optional
+  --bgcolor-inline-code: #{bs.$gray-100}; //optional
   --bgcolor-card: #{hsl.darken(var(--bgcolor-global), 5%)};
   --bgcolor-blinked-section: #{hsl.alpha(var(--primary),50%)};
-  --bgcolor-keyword-highlighted: #{darken($grw-marker-red, 30%)};
+  --bgcolor-keyword-highlighted: #{darken(var.$grw-marker-red, 30%)};
 
   // Font colors
   --color-global: hsl(var(--color-global-hs),var(--color-global-l));
   --color-global-hs: 0,0%;
   --color-global-l: 100%;
-  --color-reversal: #{$gray-100};
+  --color-reversal: #{bs.$gray-100};
   --color-link: var(--primary);
   --color-link-hs: var(--primary-hs);
   --color-link-l: var(--primary-l);

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

@@ -1,5 +1,6 @@
-@use './variables' as *;
-@use './bootstrap/variables' as *;
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+@use './variables' as var;
 @use './theme/mixins/page-editor-mode-manager';
 @use './theme/hsl-functions' as hsl;
 
@@ -24,13 +25,13 @@
   --bgcolor-inline-code: #1f1f22; //optional
   --bgcolor-card: #{hsl.darken(var(--themecolor), 5%)};
   --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 40%)};
-  --bgcolor-keyword-highlighted: #{darken($grw-marker-red, 30%)};
+  --bgcolor-keyword-highlighted: #{darken(var.$grw-marker-red, 30%)};
 
   // Font colors
   --color-global: #{hsl(var(--color-global-hs),var(--color-global-l))};
   --color-global-hs: 204,21%;
   --color-global-l: 66%;
-  --color-reversal: #{$gray-900};
+  --color-reversal: #{bs.$gray-900};
   --color-header: var(--color-global);
   --color-link: var(--accentcolor);
   --color-link-hover: #{hsl.lighten(var(--accentcolor), 20%)};
@@ -117,7 +118,7 @@
   --bordercolor-inline-code: #4d4d4d; // optional
 
   // Dropdown colors
-  --bgcolor-dropdown-link-active: #{$growi-blue};
+  --bgcolor-dropdown-link-active: #{var.$growi-blue};
 
   // admin theme box
   --color-theme-color-box: #{hsl.lighten(var(--primary), 20%)};

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

@@ -1,5 +1,6 @@
-@use './variables' as *;
-@use './bootstrap/variables' as *;
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+@use './variables' as var;
 @use './theme/mixins/page-editor-mode-manager';
 @use './theme/hsl-functions' as hsl;
 
@@ -109,7 +110,7 @@ $bordercolor: #7e0d7e;
   --color-editor-icons: var(--color-global);
 
   // Border colors
-  --border-color-theme: #{$gray-300}; // former: `$navbar-border: $gray-300;`
+  --border-color-theme: #{bs.$gray-300}; // former: `$navbar-border: $gray-300;`
   --bordercolor-inline-code: #4d4d4d; // optional
 
   // admin theme box

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

@@ -1,5 +1,6 @@
-@use './variables' as *;
-@use './bootstrap/variables' as *;
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+@use './variables' as var;
 @use './theme/mixins/page-editor-mode-manager';
 @use './theme/hsl-functions' as hsl;
 
@@ -32,8 +33,8 @@
   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
   --bgcolor-global-hs: 36,50%;
   --bgcolor-global-l: 97%;
-  --bgcolor-inline-code: #{$gray-100}; //optional
-  --bgcolor-card: #{$gray-100};
+  --bgcolor-inline-code: #{bs.$gray-100}; //optional
+  --bgcolor-card: #{bs.$gray-100};
   --bgcolor-blinked-section: #{hsl.alpha(var(--primary),50%)};
   --bgcolor-keyword-highlighted: $grw-marker-green;
 
@@ -72,7 +73,7 @@
 
   // Logo colors
   --bgcolor-logo: var(--bgcolor-navbar);
-  --fillcolor-logo-mark: #{lighten(desaturate($gray-100, 10%), 15%)};
+  --fillcolor-logo-mark: #{lighten(desaturate(bs.$gray-100, 10%), 15%)};
 
   // Sidebar
   --bgcolor-sidebar: var(--primary);
@@ -111,7 +112,7 @@
   --bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
-  --bgcolor-dropdown-link-active: #{$growi-blue};
+  --bgcolor-dropdown-link-active: #{var.$growi-blue};
 
   // admin theme box
   --color-theme-color-box: #{hsl.darken(var(--primary), 5%)};
@@ -204,13 +205,13 @@
   --bgcolor-inline-code: var(--subthemecolor);
   --bgcolor-card: #{hsl.darken(var(--bgcolor-global), 5%)};
   --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 50%)};
-  --bgcolor-keyword-highlighted: #{darken($grw-marker-cyan, 40%)};
+  --bgcolor-keyword-highlighted: #{darken(var.$grw-marker-cyan, 40%)};
 
   // Font colors
   --color-global: hsl(var(--color-global-hs),var(--color-global-l));
   --color-global-hs: 36,50%;
   --color-global-l: 87%;
-  --color-reversal: #{$gray-100};
+  --color-reversal: #{bs.$gray-100};
   --color-link: #{hsl.lighten(var(--primary), 30%)};
   --color-link-hs: var(--primary-hs);
   --color-link-l: calc(var(--primary-l) + 30%);

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

@@ -1,5 +1,6 @@
-@use './variables' as *;
-@use './bootstrap/variables' as *;
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+@use './variables' as var;
 @use './theme/mixins/page-editor-mode-manager';
 @use './atoms/mixins/buttons' as mixins-buttons;
 @use './theme/hsl-functions' as hsl;
@@ -18,8 +19,8 @@
   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
   --bgcolor-global-hs: 170,43%;
   --bgcolor-global-l: 90%;
-  --bgcolor-card: #{$gray-50};
-  --bgcolor-inline-code: #{$gray-100}; //optional
+  --bgcolor-card: #{bs.$gray-100};
+  --bgcolor-inline-code: #{bs.$gray-100}; //optional
   --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 30%)};
   //--bgcolor-keyword-highlighted: #{$grw-marker-yellow};
 
@@ -66,7 +67,7 @@
 
   // Logo colors
   --bgcolor-logo: #0d3955;
-  --fillcolor-logo-mark: #{lighten(desaturate($gray-100, 10%), 15%)};
+  --fillcolor-logo-mark: #{lighten(desaturate(bs.$gray-100, 10%), 15%)};
 
   // Sidebar
   --bgcolor-sidebar: hsl(var(--bgcolor-sidebar-hs),var(--bgcolor-sidebar-l));
@@ -101,17 +102,17 @@
   --bgcolor-subnav-l: calc(var(--bgcolor-global-l) + 4%);
 
   // Tabs
-  --bordercolor-nav-tabs: #{$gray-300}; // optional
+  --bordercolor-nav-tabs: #{bs.$gray-300}; // optional
 
   // Icon colors
   --color-editor-icons: var(--color-global);
 
   // Border colors
-  --border-color-theme: #{$gray-300};
+  --border-color-theme: #{bs.$gray-300};
   --bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
-  --bgcolor-dropdown-link-active: #{$growi-blue};
+  --bgcolor-dropdown-link-active: #{var.$growi-blue};
 
   // admin theme box
   --color-theme-color-box: #{hsl.darken(var(--primary), 15%)};
@@ -156,13 +157,13 @@
     // Pagetree
     .grw-pagetree {
       .grw-pagetree-triangle-btn {
-        @include mixins-buttons.button-outline-svg-icon-variant($gray-400, #0d3955);
+        @include mixins-buttons.button-outline-svg-icon-variant(bs.$gray-400, #0d3955);
       }
     }
     // Foldertree
     .grw-foldertree {
       .grw-foldertree-triangle-btn {
-        @include mixins-buttons.button-outline-svg-icon-variant($gray-400, var(--bgcolor-sidebar));
+        @include mixins-buttons.button-outline-svg-icon-variant(bs.$gray-400, var(--bgcolor-sidebar));
       }
     }
   }

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

@@ -1,5 +1,6 @@
-@use './variables' as *;
-@use './bootstrap/variables' as *;
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+@use './variables' as var;
 @use './theme/mixins/page-editor-mode-manager';
 @use './theme/hsl-functions' as hsl;
 
@@ -18,7 +19,7 @@
   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
   --bgcolor-global-hs: 0,0%;
   --bgcolor-global-l: 100%;
-  --bgcolor-inline-code: #{$gray-100}; //optional
+  --bgcolor-inline-code: #{bs.$gray-100}; //optional
   --bgcolor-card: var(--accentcolor);
   --bgcolor-blinked-section: #{hsl.alpha(var(--primary),10%)};
   //--bgcolor-keyword-highlighted: #{$grw-marker-yellow};
@@ -27,7 +28,7 @@
   --color-global: hsl(var(--color-global-hs),var(--color-global-l));
   --color-global-hs: 0,0%;
   --color-global-l: 17%;
-  --color-reversal: #{$gray-100};
+  --color-reversal: #{bs.$gray-100};
   --color-link: var(--primary);
   --color-link-hs: var(--primary-hs);
   --color-link-l: var(--primary-l);
@@ -141,16 +142,16 @@
   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
   --bgcolor-global-hs: 0,0%;
   --bgcolor-global-l: 20%;
-  --bgcolor-inline-code: #{$gray-100}; //optional
+  --bgcolor-inline-code: #{bs.$gray-100}; //optional
   --bgcolor-card: #{hsl.darken(var(--bgcolor-global), 5%)};
   --bgcolor-blinked-section: #{hsl.alpha(var(--primary),50%)};
-  --bgcolor-keyword-highlighted: #{darken($grw-marker-red, 30%)};
+  --bgcolor-keyword-highlighted: #{darken(var.$grw-marker-red, 30%)};
 
   // Font colors
   --color-global: hsl(var(--color-global-hs),var(--color-global-l));
   --color-global-hs: 0,0%;
   --color-global-l: 100%;
-  --color-reversal: #{$gray-100};
+  --color-reversal: #{bs.$gray-100};
   --color-link: var(--primary);
   --color-link-hs: var(--primary-hs);
   --color-link-l: var(--primary-l);

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

@@ -1,5 +1,6 @@
-@use './variables' as *;
-@use './bootstrap/variables' as *;
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+@use './variables' as var;
 @use './theme/mixins/page-editor-mode-manager';
 @use './theme/hsl-functions' as hsl;
 
@@ -30,7 +31,7 @@
   --color-global: hsl(var(--color-global-hs),var(--color-global-l));
   --color-global-hs: 217,23%;
   --color-global-l: 31%;
-  --color-reversal: #{$gray-100};
+  --color-reversal: #{bs.$gray-100};
   --color-header: var(--primary);
   --color-link: hsl(var(--color-link-hs),var(--color-link-l));
   --color-link-hs: 224,56%;
@@ -99,7 +100,7 @@
   --bordercolor-inline-code: var(--lightthemecolor);
 
   // dropdown colors
-  --bgcolor-dropdown-link-active: #{$growi-blue};
+  --bgcolor-dropdown-link-active: #{var.$growi-blue};
 
   // admin theme box
   --color-theme-color-box: #{hsl.lighten(var(--primary), 20%)};

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

@@ -1,5 +1,6 @@
-@use './variables' as *;
-@use './bootstrap/variables' as *;
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+@use './variables' as var;
 @use './theme/mixins/page-editor-mode-manager';
 @use './theme/hsl-functions' as hsl;
 
@@ -19,7 +20,7 @@
   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
   --bgcolor-global-hs: 200,60%;
   --bgcolor-global-l: 98%;
-  --bgcolor-inline-code: #{$gray-100}; //optional
+  --bgcolor-inline-code: #{bs.$gray-100}; //optional
   --bgcolor-card: #{hsl.darken(var(--bgcolor-global), 5%)};
   --bgcolor-blinked-section: #{hsl.alpha(var(--primary),10%)};
   //--bgcolor-keyword-highlighted: #{$grw-marker-yellow};
@@ -28,7 +29,7 @@
   --color-global: var(--primary);
   --color-global-hs: var(--primary-hs);
   --color-global-l: var(--primary-l);
-  --color-reversal: #{$gray-100};
+  --color-reversal: #{bs.$gray-100};
   --color-link: #{hsl.lighten(var(--primary),5%)};
   --color-link-hs: var(--primary-hs);
   --color-link-l: calc(var(--primary-l) + 5%);
@@ -149,13 +150,13 @@
   --bgcolor-inline-code: #1f1f22; //optional
   --bgcolor-card: #{hsl.darken(var(--bgcolor-global), 5%)};
   --bgcolor-blinked-section: #{hsl.alpha(var(--primary),50%)};
-  --bgcolor-keyword-highlighted: #{darken($grw-marker-red, 30%)};
+  --bgcolor-keyword-highlighted: #{darken(var.$grw-marker-red, 30%)};
 
   // Font colors
   --color-global: hsl(var(--color-global-hs),var(--color-global-l));
   --color-global-hs: 180,1%;
   --color-global-l: 83%;
-  --color-reversal: #{$gray-100};
+  --color-reversal: #{bs.$gray-100};
   --color-link: hsl(var(--color-link-hs),var(--color-link-l));
   --color-link-hs: 201,75%;
   --color-link-l: 77%;

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

@@ -1,5 +1,6 @@
-@use './variables' as *;
-@use './bootstrap/variables' as *;
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+@use './variables' as var;
 @use './theme/mixins/page-editor-mode-manager';
 @use './theme/hsl-functions' as hsl;
 
@@ -26,7 +27,7 @@
   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
   --bgcolor-global-hs: 0,0%;
   --bgcolor-global-l: 99%;
-  --bgcolor-inline-code: #{$gray-100}; //optional
+  --bgcolor-inline-code: #{bs.$gray-100}; //optional
   --bgcolor-card: #f1ffe4;
   --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 10%)};
   //--bgcolor-keyword-highlighted: #{$grw-marker-yellow};
@@ -59,7 +60,7 @@
 
   // Logo colors
   --bgcolor-logo: var(--bgcolor-navbar);
-  --fillcolor-logo-mark: #{lighten(desaturate($gray-100, 10%), 15%)};
+  --fillcolor-logo-mark: #{lighten(desaturate(bs.$gray-100, 10%), 15%)};
 
   // Sidebar
   --bgcolor-sidebar: hsl(var(--bgcolor-sidebar-hs),var(--bgcolor-sidebar-l));
@@ -91,11 +92,11 @@
   --color-editor-icons: var(--color-global);
 
   // Border colors
-  --border-color-theme: #{$gray-300};
+  --border-color-theme: #{bs.$gray-300};
   --bordercolor-inline-code: #ccc8c8; // optional
 
   // Table colors
-  --border-color-table: #{$gray-400}; // optional
+  --border-color-table: #{bs.$gray-400}; // optional
 
   // admin theme box
   --color-theme-color-box: #{hsl.lighten(var(--primary), 20%)};

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

@@ -1,5 +1,6 @@
-@use './variables' as *;
-@use './bootstrap/variables' as *;
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+@use './variables' as var;
 @use './theme/mixins/page-editor-mode-manager';
 @use './theme/mixins/hsl-button';
 @use './theme/hsl-functions' as hsl;
@@ -18,10 +19,10 @@
   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
   --bgcolor-global-hs: 0,0%;
   --bgcolor-global-l: 100%;
-  --bgcolor-inline-code: #{$gray-100}; //optional
-  --bgcolor-card: #{$gray-50};
+  --bgcolor-inline-code: #{bs.$gray-100}; //optional
+  --bgcolor-card: #{bs.$gray-100};
   --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 50%)};
-  --bgcolor-keyword-highlighted: #{$grw-marker-cyan};
+  --bgcolor-keyword-highlighted: #{var.$grw-marker-cyan};
 
   // Font colors
   --color-global: hsl(var(--color-global-hs),var(--color-global-l));
@@ -58,7 +59,7 @@
 
   // Logo colors
   --bgcolor-logo: var(--bgcolor-navbar);
-  --fillcolor-logo-mark: #{lighten(desaturate($gray-100, 10%), 15%)};
+  --fillcolor-logo-mark: #{lighten(desaturate(bs.$gray-100, 10%), 15%)};
 
   // Sidebar
   --bgcolor-sidebar: var(--primary);
@@ -93,11 +94,11 @@
   --color-editor-icons: var(--color-global);
 
   // Border colors
-  --border-color-theme: #{$gray-300}; // former: `$navbar-border: $gray-300;`
+  --border-color-theme: #{bs.$gray-300}; // former: `$navbar-border: $gray-300;`
   --bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
-  --bgcolor-dropdown-link-active: #{$growi-blue};
+  --bgcolor-dropdown-link-active: #{var.$growi-blue};
 
   // admin theme box
   --color-theme-color-box: #{hsl.darken(var(--primary), 20%)};

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

@@ -1,5 +1,6 @@
-@use './variables' as *;
-@use './bootstrap/variables' as *;
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+@use './variables' as var;
 @use './theme/mixins/page-editor-mode-manager';
 @use './theme/hsl-functions' as hsl;
 
@@ -41,7 +42,7 @@
   --bgcolor-global-l: 100%;
   --bgcolor-card: #ece8de;
   --bgcolor-blinked-section: #{hsl.alpha(var(--primary),30%)};
-  --bgcolor-keyword-highlighted: #{$grw-marker-blue};
+  --bgcolor-keyword-highlighted: #{var.$grw-marker-blue};
 
   // Font colors
   --color-global: hsl(var(--color-global-hs),var(--color-global-l));
@@ -67,7 +68,7 @@
   // List Group colors
   // --color-list: var(--color-global);
   --bgcolor-list: transparent;
-  --color-list-hover: #{$gray-100};
+  --color-list-hover: #{bs.$gray-100};
   --bgcolor-list-hover: #{hsl.lighten(var(--primary), 40%)};
   // --color-list-active: var(--color-reversal);
   --bgcolor-list-active: #{hsl.lighten(var(--primary), 30%)};
@@ -75,7 +76,7 @@
   // Table colors
   // --color-table: #; // optional
   // --bgcolor-table: #; // optional
-  --border-color-table: #{$gray-400}; // optional
+  --border-color-table: #{bs.$gray-400}; // optional
   // --color-table-hover: #; // optional
   // --bgcolor-table-hover: #; // optional
 
@@ -118,11 +119,11 @@
   --bgcolor-resize-button-hover: #{hsl.lighten(var(--bgcolor-resize-button), 5%)};
 
   // Border colors
-  --border-color-theme: #{$gray-300}; // former: `$navbar-border: $gray-300;`
+  --border-color-theme: #{bs.$gray-300}; // former: `$navbar-border: $gray-300;`
   --bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
-  --bgcolor-dropdown-link-active: #{$growi-blue};
+  --bgcolor-dropdown-link-active: #{var.$growi-blue};
 
   // admin theme box
   --color-theme-color-box: #{hsl.lighten(var(--primary), 20%)};

packages/preset-themes/vite.themes.config.ts

@@ -11,19 +11,19 @@ export default defineConfig({
       input: [
         '/src/styles/antarctic.scss',
         '/src/styles/blackboard.scss',
-        // '/src/styles/christmas.scss',
+        '/src/styles/christmas.scss',
         '/src/styles/default.scss',
-        // '/src/styles/fire-red.scss',
-        // '/src/styles/future.scss',
-        // '/src/styles/halloween.scss',
-        // '/src/styles/hufflepuff.scss',
-        // '/src/styles/island.scss',
-        // '/src/styles/jade-green.scss',
-        // '/src/styles/kibela.scss',
-        // '/src/styles/mono-blue.scss',
-        // '/src/styles/nature.scss',
-        // '/src/styles/spring.scss',
-        // '/src/styles/wood.scss',
+        '/src/styles/fire-red.scss',
+        '/src/styles/future.scss',
+        '/src/styles/halloween.scss',
+        '/src/styles/hufflepuff.scss',
+        '/src/styles/island.scss',
+        '/src/styles/jade-green.scss',
+        '/src/styles/kibela.scss',
+        '/src/styles/mono-blue.scss',
+        '/src/styles/nature.scss',
+        '/src/styles/spring.scss',
+        '/src/styles/wood.scss',
       ],
       output: {
         assetFileNames: isProd