feat: seperate colors into extra file

Much overhead, so use a seperate file, which has to be included as
addon. Establish the use of primary, secondary etc. colors. fixes #54

Author: wuda-io

components/collapsible/_collapsible.scss

@@ -1,6 +1,6 @@
 @use '../../sass/variables' as *;
 @use '../../sass/global' as *;
-@use '../../sass/color-variables' as *;
+// @use '../../sass/color-variables' as *;
 
 .collapsible {
   padding-left: 0;

rollup.config.ts

@@ -138,6 +138,24 @@ const config: RollupOptions[] = [
         defaultHandler(warning);
     }
   },
+  {
+    input: 'sass/_colors.scss',
+    output: [{ file: 'dist/css/materialize.colors.min.css' }], // overwritten
+    plugins: [
+      scss({
+        fileName: 'materialize.colors.min.css',
+        outputStyle: 'compressed',
+        processor: (css) =>
+          postcss([autoprefixer])
+            .process(css, { from: 'materialize.colors.min.css' })
+            .then((result) => result.css)
+      })
+    ],
+    onwarn: (warning, defaultHandler) => {
+      if (!(warning.code === 'FILE_NAME_CONFLICT' || warning.code === 'EMPTY_BUNDLE'))
+        defaultHandler(warning);
+    }
+  },
 
   //--- CSS Banners
   {

sass/_color-variables.scss sass/_colors.scsssass/_color-variables.scss renamed to sass/_colors.scss

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 // Google Color Palette defined: http://www.google.com/design/spec/style/color.html
 
 $materialize-red: (

sass/_variables.scss

@@ -2,7 +2,7 @@
 $md_sys_typescale_body-large_size: 16px;
 
 @use "sass:math";
-@use "./_color-variables";
+@use "./_colors";
 
 // Colors
 $success-color: colorFunc("green", "base") !default;

sass/materialize.scss

@@ -7,7 +7,7 @@
 @forward "./colors.module.css";
 @forward "./typography";
 @forward "./mixins.module";
-@forward "./color-variables";
+// @forward "./colors"; // => put in seperate file
 @forward "./variables";
 @forward "./global";
 @forward "./grid";