128303 build jade kibela mono and nature

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/vite.themes.config.ts

@@ -18,10 +18,10 @@ export default defineConfig({
         '/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/jade-green.scss',
+        '/src/styles/kibela.scss',
+        '/src/styles/mono-blue.scss',
+        '/src/styles/nature.scss',
         // '/src/styles/spring.scss',
         // '/src/styles/wood.scss',
       ],