From e2b4033c9d4f5fbdd76bcbec023a3176a9b23267 Mon Sep 17 00:00:00 2001 From: J0hans1 Date: Wed, 10 Jan 2024 18:09:28 +0100 Subject: [PATCH 01/12] feat: better structure that explains theme files --- .github/workflows/npm-publish.yml | 6 +++--- src/{ => themes}/chimera-dark.scss | 2 +- src/{ => themes}/chimera-golden.scss | 2 +- src/{ => themes}/chimera.scss | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) rename src/{ => themes}/chimera-dark.scss (95%) rename src/{ => themes}/chimera-golden.scss (95%) rename src/{ => themes}/chimera.scss (95%) diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml index c863dbb..94238bc 100644 --- a/.github/workflows/npm-publish.yml +++ b/.github/workflows/npm-publish.yml @@ -29,11 +29,11 @@ jobs: - name: install sass dependency run: npm install -g sass - name: compile chimera theme - run: sass src/chimera.scss build/chimera.css + run: sass src/themes/chimera.scss build/chimera.css - name: compile chimera-dark theme - run: sass src/chimera-dark.scss build/chimera-dark.css + run: sass src/themes/chimera-dark.scss build/chimera-dark.css - name: compile chimera-golden theme - run: sass src/chimera-golden.scss build/chimera-golden.css + run: sass src/themes/chimera-golden.scss build/chimera-golden.css publish-npm: needs: [format-prettier, compile-sass] diff --git a/src/chimera-dark.scss b/src/themes/chimera-dark.scss similarity index 95% rename from src/chimera-dark.scss rename to src/themes/chimera-dark.scss index 0fdc9d4..10c76a6 100644 --- a/src/chimera-dark.scss +++ b/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"; diff --git a/src/chimera-golden.scss b/src/themes/chimera-golden.scss similarity index 95% rename from src/chimera-golden.scss rename to src/themes/chimera-golden.scss index 40709ac..780c55b 100644 --- a/src/chimera-golden.scss +++ b/src/themes/chimera-golden.scss @@ -20,4 +20,4 @@ $Chimera-border: hsl(0, 0%, 90%); // @use "main"; -@import "elements/main"; +@import "../elements/main"; diff --git a/src/chimera.scss b/src/themes/chimera.scss similarity index 95% rename from src/chimera.scss rename to src/themes/chimera.scss index 7930afe..77c9ab8 100644 --- a/src/chimera.scss +++ b/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"; From a8d363da4356ea98ec98ba170b7b7ec98dbc6a03 Mon Sep 17 00:00:00 2001 From: J0hans1 Date: Wed, 10 Jan 2024 21:02:14 +0100 Subject: [PATCH 02/12] documentation of themes --- src/readme.md | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src/readme.md diff --git a/src/readme.md b/src/readme.md new file mode 100644 index 0000000..d3eb78a --- /dev/null +++ b/src/readme.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 + From eb0ae080bc6e09cab7c18c6d71c1c4d135392b00 Mon Sep 17 00:00:00 2001 From: J0hans1 Date: Wed, 10 Jan 2024 21:02:55 +0100 Subject: [PATCH 03/12] PR/Main branch pipelines and compile-themes job --- .github/workflows/actions/compile-themes.yml | 20 ++++++++++++++ .github/workflows/main.yml | 25 +++++++++++++++++ .github/workflows/npm-publish.yml | 28 -------------------- .github/workflows/pull-request.yml | 16 +++++++++++ 4 files changed, 61 insertions(+), 28 deletions(-) create mode 100644 .github/workflows/actions/compile-themes.yml create mode 100644 .github/workflows/main.yml create mode 100644 .github/workflows/pull-request.yml diff --git a/.github/workflows/actions/compile-themes.yml b/.github/workflows/actions/compile-themes.yml new file mode 100644 index 0000000..0c173f4 --- /dev/null +++ b/.github/workflows/actions/compile-themes.yml @@ -0,0 +1,20 @@ +name: "compile-themes" +description: "Compile the .scss theme files into .css files in the build directory" + +jobs: + compile: + 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/themes/chimera.scss build/chimera.css + - name: compile chimera-dark theme + run: sass src/themes/chimera-dark.scss build/chimera-dark.css + - name: compile chimera-golden theme + run: sass src/themes/chimera-golden.scss build/chimera-golden.css \ No newline at end of file diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 0000000..024fab6 --- /dev/null +++ b/.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: Create Sentry release + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: compile sass + uses: ./.github/actions/compile-themes diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml index 94238bc..98e1615 100644 --- a/.github/workflows/npm-publish.yml +++ b/.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/themes/chimera.scss build/chimera.css - - name: compile chimera-dark theme - run: sass src/themes/chimera-dark.scss build/chimera-dark.css - - name: compile chimera-golden theme - run: sass src/themes/chimera-golden.scss build/chimera-golden.css - publish-npm: - needs: [format-prettier, compile-sass] runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml new file mode 100644 index 0000000..7d1dee0 --- /dev/null +++ b/.github/workflows/pull-request.yml @@ -0,0 +1,16 @@ + +on: + pull_request: + branches: + - main + +jobs: + compile-themes: + runs-on: ubuntu-latest + name: Create Sentry release + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: compile sass + uses: ./.github/actions/compile-themes From d32ed2ef6bf30157c93891b60c9b93efeb180b6d Mon Sep 17 00:00:00 2001 From: J0hans1 Date: Wed, 10 Jan 2024 21:14:05 +0100 Subject: [PATCH 04/12] Move the guide --- src/readme.md => GUIDE.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/readme.md => GUIDE.md (100%) diff --git a/src/readme.md b/GUIDE.md similarity index 100% rename from src/readme.md rename to GUIDE.md From 45a19dfb350306d119f1a3847bda9900659428c3 Mon Sep 17 00:00:00 2001 From: J0hans1 Date: Wed, 10 Jan 2024 21:17:19 +0100 Subject: [PATCH 05/12] fix: pipeline --- .github/workflows/actions/compile-themes.yml | 2 +- .github/workflows/main.yml | 4 ++-- .github/workflows/pull-request.yml | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/actions/compile-themes.yml b/.github/workflows/actions/compile-themes.yml index 0c173f4..8979e70 100644 --- a/.github/workflows/actions/compile-themes.yml +++ b/.github/workflows/actions/compile-themes.yml @@ -5,7 +5,7 @@ jobs: compile: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - uses: actions/setup-node@v3 with: node-version: 16 diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 024fab6..1b43c58 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -16,10 +16,10 @@ jobs: compile-themes: runs-on: ubuntu-latest - name: Create Sentry release + name: Compile themes steps: - name: Checkout code uses: actions/checkout@v4 - + - name: compile sass uses: ./.github/actions/compile-themes diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index 7d1dee0..a37e57c 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -7,7 +7,7 @@ on: jobs: compile-themes: runs-on: ubuntu-latest - name: Create Sentry release + name: compile themes steps: - name: Checkout code uses: actions/checkout@v4 From 1d9323c5fd58ecae246b31df8c02ef03352bc8ad Mon Sep 17 00:00:00 2001 From: J0hans1 Date: Wed, 10 Jan 2024 21:19:48 +0100 Subject: [PATCH 06/12] move actions folder --- .github/{workflows => }/actions/compile-themes.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename .github/{workflows => }/actions/compile-themes.yml (98%) diff --git a/.github/workflows/actions/compile-themes.yml b/.github/actions/compile-themes.yml similarity index 98% rename from .github/workflows/actions/compile-themes.yml rename to .github/actions/compile-themes.yml index 8979e70..12aec69 100644 --- a/.github/workflows/actions/compile-themes.yml +++ b/.github/actions/compile-themes.yml @@ -17,4 +17,4 @@ jobs: - name: compile chimera-dark theme run: sass src/themes/chimera-dark.scss build/chimera-dark.css - name: compile chimera-golden theme - run: sass src/themes/chimera-golden.scss build/chimera-golden.css \ No newline at end of file + run: sass src/themes/chimera-golden.scss build/chimera-golden.css \ No newline at end of file From 626cdb0fab181eb29ac714b531788e6184924748 Mon Sep 17 00:00:00 2001 From: J0hans1 Date: Wed, 10 Jan 2024 21:23:53 +0100 Subject: [PATCH 07/12] change name to action.yml --- .../actions/{compile-themes.yml => compile-themes/action.yml} | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename .github/actions/{compile-themes.yml => compile-themes/action.yml} (89%) diff --git a/.github/actions/compile-themes.yml b/.github/actions/compile-themes/action.yml similarity index 89% rename from .github/actions/compile-themes.yml rename to .github/actions/compile-themes/action.yml index 12aec69..3823b62 100644 --- a/.github/actions/compile-themes.yml +++ b/.github/actions/compile-themes/action.yml @@ -5,8 +5,8 @@ jobs: compile: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v3 + - uses: actions/checkout@v2 + - uses: actions/setup-node@v2 with: node-version: 16 - run: npm ci From 6be8a6a348dbbebed11e7af58d716178f5c8911e Mon Sep 17 00:00:00 2001 From: J0hans1 Date: Wed, 10 Jan 2024 21:25:33 +0100 Subject: [PATCH 08/12] format action.yml --- .github/actions/compile-themes/action.yml | 32 +++++++++++------------ 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/.github/actions/compile-themes/action.yml b/.github/actions/compile-themes/action.yml index 3823b62..ada4752 100644 --- a/.github/actions/compile-themes/action.yml +++ b/.github/actions/compile-themes/action.yml @@ -2,19 +2,19 @@ name: "compile-themes" description: "Compile the .scss theme files into .css files in the build directory" jobs: - compile: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 - with: - node-version: 16 - - run: npm ci - - name: install sass dependency - run: npm install -g sass - - name: compile chimera theme - run: sass src/themes/chimera.scss build/chimera.css - - name: compile chimera-dark theme - run: sass src/themes/chimera-dark.scss build/chimera-dark.css - - name: compile chimera-golden theme - run: sass src/themes/chimera-golden.scss build/chimera-golden.css \ No newline at end of file + compile: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v2 + with: + node-version: 16 + - run: npm ci + - name: install sass dependency + run: npm install -g sass + - name: compile chimera theme + run: sass src/themes/chimera.scss build/chimera.css + - name: compile chimera-dark theme + run: sass src/themes/chimera-dark.scss build/chimera-dark.css + - name: compile chimera-golden theme + run: sass src/themes/chimera-golden.scss build/chimera-golden.css \ No newline at end of file From e3d03fa4cfb838f2931bdbaa5d6862727a35a38d Mon Sep 17 00:00:00 2001 From: J0hans1 Date: Wed, 10 Jan 2024 21:26:49 +0100 Subject: [PATCH 09/12] runs instead of jobs --- .github/actions/compile-themes/action.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/actions/compile-themes/action.yml b/.github/actions/compile-themes/action.yml index ada4752..ad35116 100644 --- a/.github/actions/compile-themes/action.yml +++ b/.github/actions/compile-themes/action.yml @@ -1,7 +1,7 @@ name: "compile-themes" description: "Compile the .scss theme files into .css files in the build directory" -jobs: +runs: compile: runs-on: ubuntu-latest steps: From db46f2e4f404b4fa0cddc7fcdf33905919fa3d69 Mon Sep 17 00:00:00 2001 From: J0hans1 Date: Wed, 10 Jan 2024 21:30:44 +0100 Subject: [PATCH 10/12] added the using step --- .github/actions/compile-themes/action.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.github/actions/compile-themes/action.yml b/.github/actions/compile-themes/action.yml index ad35116..d95e5f0 100644 --- a/.github/actions/compile-themes/action.yml +++ b/.github/actions/compile-themes/action.yml @@ -2,8 +2,7 @@ name: "compile-themes" description: "Compile the .scss theme files into .css files in the build directory" runs: - compile: - runs-on: ubuntu-latest + using: "ubuntu-latest" steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 From cf9a16d5b5b6e073c151f86471c2d50d7718b6fa Mon Sep 17 00:00:00 2001 From: J0hans1 Date: Wed, 10 Jan 2024 21:31:46 +0100 Subject: [PATCH 11/12] using node16 --- .github/actions/compile-themes/action.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/actions/compile-themes/action.yml b/.github/actions/compile-themes/action.yml index d95e5f0..e93f010 100644 --- a/.github/actions/compile-themes/action.yml +++ b/.github/actions/compile-themes/action.yml @@ -2,7 +2,7 @@ name: "compile-themes" description: "Compile the .scss theme files into .css files in the build directory" runs: - using: "ubuntu-latest" + using: "node16" steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 From fedcfc620215c2ed093b5bbbc87e7b95929c7e06 Mon Sep 17 00:00:00 2001 From: J0hans1 Date: Wed, 10 Jan 2024 21:36:30 +0100 Subject: [PATCH 12/12] composite job --- .github/actions/compile-themes/action.yml | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/.github/actions/compile-themes/action.yml b/.github/actions/compile-themes/action.yml index e93f010..b6beb1c 100644 --- a/.github/actions/compile-themes/action.yml +++ b/.github/actions/compile-themes/action.yml @@ -2,18 +2,21 @@ name: "compile-themes" description: "Compile the .scss theme files into .css files in the build directory" runs: - using: "node16" + using: "composite" steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: node-version: 16 - - run: npm ci - - name: install sass dependency - run: npm install -g sass - - name: compile chimera theme - run: sass src/themes/chimera.scss build/chimera.css - - name: compile chimera-dark theme - run: sass src/themes/chimera-dark.scss build/chimera-dark.css - - name: compile chimera-golden theme - run: sass src/themes/chimera-golden.scss build/chimera-golden.css \ No newline at end of file + - 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 \ No newline at end of file