feat: better structure that explains theme files

.github/actions/compile-themes/action.yml

@@ -0,0 +1,22 @@
+name: "compile-themes"
+description: "Compile the .scss theme files into .css files in the build directory"
+
+runs:
+    using: "composite"
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16
+      - name: install npm dependencies
+        run: |
+            npm ci
+            npm install -g sass
+        shell: bash
+
+      - name: compile chimera themes
+        run: |
+          sass src/themes/chimera.scss build/chimera.css
+          sass src/themes/chimera-dark.scss build/chimera-dark.css
+          sass src/themes/chimera-golden.scss build/chimera-golden.css 
+        shell: bash

.github/workflows/main.yml

@@ -0,0 +1,25 @@
+on:
+    push:
+        branches:
+            - main
+
+jobs:
+    format-prettier:
+        runs-on: ubuntu-latest
+        steps:
+          - uses: actions/checkout@v3
+          - uses: actions/setup-node@v3
+            with:
+              node-version: 16
+          - run: npm ci
+          - run: npx prettier . --write
+
+    compile-themes:
+        runs-on: ubuntu-latest
+        name: Compile themes
+        steps:
+        - name: Checkout code
+          uses: actions/checkout@v4
+
+        - name: compile sass
+          uses: ./.github/actions/compile-themes

.github/workflows/npm-publish.yml

@@ -8,35 +8,7 @@ on:
     types: [created]
 
 jobs:
-  format-prettier:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - run: npm ci
-      - run: npx prettier . --write
-
-  compile-sass:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - run: npm ci
-      - name: install sass dependency
-        run: npm install -g sass
-      - name: compile chimera theme
-        run: sass src/chimera.scss build/chimera.css
-      - name: compile chimera-dark theme
-        run: sass src/chimera-dark.scss build/chimera-dark.css
-      - name: compile chimera-golden theme
-        run: sass src/chimera-golden.scss build/chimera-golden.css
-
   publish-npm:
-    needs: [format-prettier, compile-sass]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3

.github/workflows/pull-request.yml

@@ -0,0 +1,16 @@
+
+on:
+    pull_request:
+        branches:
+            - main
+
+jobs:
+    compile-themes:
+        runs-on: ubuntu-latest
+        name: compile themes
+        steps:
+        - name: Checkout code
+          uses: actions/checkout@v4
+
+        - name: compile sass
+          uses: ./.github/actions/compile-themes

GUIDE.md

@@ -0,0 +1,61 @@
+# How chimera works 🦁🐍
+
+This is a simple guide to how the themes work and how you can create custom themes.
+
+## How themes work in chimera 🎨
+We utilize important SASS tools to create themes as easy as possible in chimera; variables and partials. 
+
+We have a specific set of variables that each theme file has to declare to be able to compile the sass to css. These variables are the described here:
+
+```scss
+// fonts
+$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+
+//Color palette
+$Chimera: hsl(173, 100%, 33%);
+$Chimera-dark: hsl(173, 100%, 23%);
+$Chimera-darker: hsl(173, 100%, 13%);
+$Chimera-text: hsl(0, 0%, 25%);
+$Chimera-text-secondary: #ffff;
+$Chimera-text-disabled: hsl(0, 0%, 65%);
+$Chimera-bg: hsl(40, 30%, 100%);
+$Chimera-bg-secondary: hsl(60, 5%, 95%);
+$Chimera-link: hsl(173, 100%, 33%);
+$Chimera-focus: hsl(267, 60%, 60%);
+$Chimera-fill: hsla(173, 100%, 33%, 10%);
+$Chimera-border: hsl(0, 0%, 90%);
+```
+
+After defining these variables we need to import the element styling, which applies these variables by adding this line to the bottom of the file.
+
+```scss
+@import "../elements/main";
+```
+
+The main file, which is imported, bundles all the element styling into a single file by importing every partial file into this file. In the workflow we compile the theme files to generate a theme as a css file. This is how we generate the original chimera theme in the compile-themes.yml action in ./.github/workflows/actions/:
+
+```yml
+ name: compile chimera theme
+        run: sass src/themes/chimera.scss build/chimera.css
+```
+
+## How to create custom themes 🤘
+To create custom themes you should just manipulate the variables to your preference. To test you have to compile your theme to an css file by running this command
+
+```bash
+sass src/themes/your-theme-file.scss build/your-theme.css
+```
+
+To test the code create an html file (or another project) that uses this stylesheet. If you want to add the theme to the chimera framework permanently, you will have to add the compilation command to the compile-themes.yml action in ./.github/workflows/actions/. 
+
+### Conventions in custom themes
+
+For a theme to be accepted into the repository permanently it has to comply to these requirements:
+- It should be accesible
+- It shall base itself on hsl/hsla color format, not hex or rgb
+- You have to use fonts that doesnt need to be downloaded.
+- The filenames (.scss and .css) and theme-name must be equal and on the format: chimera-yourthemename. The theme name should ideally be one word.
+
+Thanks for your contributions <3 
+

src/chimera-dark.scss → src/themes/chimera-dark.scss

@@ -17,4 +17,4 @@ $Chimera-fill: hsla(173, 100%, 33%, 10%);
 $Chimera-border: hsl(0, 0%, 90%);
 // @use "main";
 
-@import "elements/main";
+@import "../elements/main";

src/chimera-golden.scss → src/themes/chimera-golden.scss

@@ -20,4 +20,4 @@ $Chimera-border: hsl(0, 0%, 90%);
 
 // @use "main";
 
-@import "elements/main";
+@import "../elements/main";

src/chimera.scss → src/themes/chimera.scss

@@ -16,4 +16,4 @@ $Chimera-focus: hsl(267, 60%, 60%);
 $Chimera-fill: hsla(173, 100%, 33%, 10%);
 $Chimera-border: hsl(0, 0%, 90%);
 
-@import "elements/main";
+@import "../elements/main";