Browse Source

128303 build spring and wood

soumaeda 2 years ago
parent
commit
b978893a11

+ 9 - 8
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/page-editor-mode-manager';
 @use './theme/mixins/hsl-button';
 @use './theme/mixins/hsl-button';
 @use './theme/hsl-functions' as hsl;
 @use './theme/hsl-functions' as hsl;
@@ -18,10 +19,10 @@
   --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-hs: 0,0%;
   --bgcolor-global-l: 100%;
   --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-blinked-section: #{hsl.alpha(var(--primary), 50%)};
-  --bgcolor-keyword-highlighted: #{$grw-marker-cyan};
+  --bgcolor-keyword-highlighted: #{var.$grw-marker-cyan};
 
 
   // Font colors
   // Font colors
   --color-global: hsl(var(--color-global-hs),var(--color-global-l));
   --color-global: hsl(var(--color-global-hs),var(--color-global-l));
@@ -58,7 +59,7 @@
 
 
   // Logo colors
   // Logo colors
   --bgcolor-logo: var(--bgcolor-navbar);
   --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
   // Sidebar
   --bgcolor-sidebar: var(--primary);
   --bgcolor-sidebar: var(--primary);
@@ -93,11 +94,11 @@
   --color-editor-icons: var(--color-global);
   --color-editor-icons: var(--color-global);
 
 
   // Border colors
   // 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
   --bordercolor-inline-code: #ccc8c8; // optional
 
 
   // Dropdown colors
   // Dropdown colors
-  --bgcolor-dropdown-link-active: #{$growi-blue};
+  --bgcolor-dropdown-link-active: #{var.$growi-blue};
 
 
   // admin theme box
   // admin theme box
   --color-theme-color-box: #{hsl.darken(var(--primary), 20%)};
   --color-theme-color-box: #{hsl.darken(var(--primary), 20%)};

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

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

@@ -22,8 +22,8 @@ export default defineConfig({
         '/src/styles/kibela.scss',
         '/src/styles/kibela.scss',
         '/src/styles/mono-blue.scss',
         '/src/styles/mono-blue.scss',
         '/src/styles/nature.scss',
         '/src/styles/nature.scss',
-        // '/src/styles/spring.scss',
-        // '/src/styles/wood.scss',
+        '/src/styles/spring.scss',
+        '/src/styles/wood.scss',
       ],
       ],
       output: {
       output: {
         assetFileNames: isProd
         assetFileNames: isProd