⚡ Merge branch 'dev' with conflicts

.github/workflows/bibata-ci.yml

@@ -5,9 +5,16 @@ on:
         paths-ignore:
             - "**.md"
             - "**.bbcode"
-      - "packages/rainbow/**"
+            - "bitmapper/packages/rainbow/**"
             - LICENSE
         branches: [main, dev]
+    pull_request:
+        paths-ignore:
+            - "**.md"
+            - "**.bbcode"
+            - "bitmapper/packages/rainbow/**"
+            - LICENSE
+        branches: [main]
 
 jobs:
     build:
@@ -17,15 +24,15 @@ jobs:
             - uses: actions/checkout@v2
 
             - name: Install build dependencies (apt)
-        run: |
-          sudo apt install libx11-dev libxcursor-dev libpng-dev
+              run: sudo apt install -y libx11-dev libxcursor-dev libpng-dev
               continue-on-error: false
 
             - name: Get yarn cache directory path
               id: yarn-cache-dir-path
               run: echo "::set-output name=dir::$(yarn cache dir)"
 
-      - uses: actions/cache@v2
+            - name: Caching yarn packages
+              uses: actions/cache@v2
               id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
               with:
                   path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -33,60 +40,57 @@ jobs:
                   restore-keys: |
                       ${{ runner.os }}-yarn-
 
-      - uses: actions/setup-node@v1
+            - name: Set Up NodeJS 12.x
+              uses: actions/setup-node@v1
               with:
                   node-version: "12.x"
-      - run: yarn install
-      - run: yarn render:bibata-modern
-      - run: yarn render:bibata-original
 
-      - name: Set up Python
-        uses: actions/setup-python@v2
-        with:
-          python-version: "3.x"
-
-      - name: Cache pip dependencies
+            - name: Caching pip packages
               uses: actions/cache@v2
+              id: pip-cache # use this to check for `cache-hit` (`steps.pip-cache.outputs.cache-hit != 'true'`)
               with:
-          # This path is specific to Ubuntu
                   path: ~/.cache/pip
-          # Look to see if there is a cache hit for the corresponding requirements file
-          key: ${{ runner.os }}-pip-${{ hashFiles('requirements.txt') }}
+                  key: ${{ runner.os }}-pip-${{ hashFiles('**/setup.py') }}
                   restore-keys: |
                       ${{ runner.os }}-pip-
-            ${{ runner.os }}-
 
-      - name: Install pip dependencies
-        run: |
-          python -m pip install --upgrade pip
-          python -m pip install --upgrade setuptools
-          if [ -f requirements.txt ]; then pip install -r requirements.txt; fi
-          python setup.py install
-        continue-on-error: false
+            - name: Set up Python 3.8
+              uses: actions/setup-python@v2
+              with:
+                  python-version: "3.8"
 
-      - name: Generating `Bibata` Cursor Theme
-        run: python build.py
+            - name: Generating `Bibata-Modern` Cursor Theme
+              run: make modern
 
-      - name: Compressing Artifacts
-        run: |
-          tar -cvzf logs.tar.gz build.log
-          tar -cvzf bitmaps.tar.gz bitmaps
-          tar -cvzf Bibata.tar.gz themes
+            - name: Compressing `Bibata-Modern` Cursor Theme
+              run: tar -cvzf Bibata-Modern.tar.gz themes/*
 
-      - name: Uploading `Bibata` Build Log artifact
+            - name: Uploading `Bibata-Modern` Bitmaps artifact
               uses: actions/upload-artifact@v2
               with:
-          name: logs
-          path: logs.tar.gz
+                  name: Bibata-Modern-Bitmaps
+                  path: bitmaps/*
 
-      - name: Uploading `bitmaps` artifact
+            - name: Uploading `Bibata-Modern` Theme artifact
               uses: actions/upload-artifact@v2
               with:
-          name: bitmaps
-          path: bitmaps.tar.gz
+                  name: Bibata-Modern
+                  path: Bibata-Modern.tar.gz
 
-      - name: Uploading `Bibata` Theme artifact
+            - name: Generating `Bibata-Original` Cursor Theme
+              run: make original
+
+            - name: Compressing `Bibata-Original` Cursor Theme
+              run: tar -cvzf Bibata-Original.tar.gz themes/*
+
+            - name: Uploading `Bibata-Original` Bitmaps artifact
               uses: actions/upload-artifact@v2
               with:
-          name: Bibata
-          path: Bibata.tar.gz
+                  name: Bibata-Original-Bitmaps
+                  path: bitmaps/*
+
+            - name: Uploading `Bibata-Original` Theme artifact
+              uses: actions/upload-artifact@v2
+              with:
+                  name: Bibata-Original
+                  path: Bibata-Original.tar.gz

.github/workflows/bibata-pr-build.yml

@@ -1,94 +0,0 @@
-
-name: bibata-pr
-
-on:
-
-  pull_request:
-    paths-ignore:
-      - "**.md"
-      - "**.bbcode"
-      - "packages/rainbow/**"
-      - LICENSE
-    branches: [main]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v2
-
-      - name: Install build dependencies (apt)
-        run: |
-          sudo apt install libx11-dev libxcursor-dev libpng-dev
-        continue-on-error: false
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v2
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - uses: actions/setup-node@v1
-        with:
-          node-version: "12.x"
-      - run: yarn install
-      - run: yarn render:bibata-modern
-      - run: yarn render:bibata-original
-
-      - name: Set up Python
-        uses: actions/setup-python@v2
-        with:
-          python-version: "3.x"
-
-      - name: Cache pip dependencies
-        uses: actions/cache@v2
-        with:
-          # This path is specific to Ubuntu
-          path: ~/.cache/pip
-          # Look to see if there is a cache hit for the corresponding requirements file
-          key: ${{ runner.os }}-pip-${{ hashFiles('requirements.txt') }}
-          restore-keys: |
-            ${{ runner.os }}-pip-
-            ${{ runner.os }}-
-
-      - name: Install pip dependencies
-        run: |
-          python -m pip install --upgrade pip
-          python -m pip install --upgrade setuptools
-          if [ -f requirements.txt ]; then pip install -r requirements.txt; fi
-          python setup.py install
-        continue-on-error: false
-
-      - name: Generating `Bibata` Cursor Theme
-        run: python build.py
-
-      - name: Compressing Artifacts
-        run: |
-          tar -cvzf logs.tar.gz build.log
-          tar -cvzf bitmaps.tar.gz bitmaps
-          tar -cvzf Bibata.tar.gz themes
-
-      - name: Uploading `Bibata` Build Log artifact
-        uses: actions/upload-artifact@v2
-        with:
-          name: logs
-          path: logs.tar.gz
-
-      - name: Uploading `bitmaps` artifact
-        uses: actions/upload-artifact@v2
-        with:
-          name: bitmaps
-          path: bitmaps.tar.gz
-
-      - name: Uploading `Bibata` Theme artifact
-        uses: actions/upload-artifact@v2
-        with:
-          name: Bibata
-          path: Bibata.tar.gz

.github/workflows/bibata-rainbow-ci.yml

@@ -3,11 +3,11 @@ name: bibata-rainbow-ci
 on:
     push:
         paths:
-      - "packages/rainbow/**"
+            - "bitmapper/packages/rainbow/**"
         branches: [main, dev]
     pull_request:
         paths:
-      - "packages/rainbow/**"
+            - "bitmapper/packages/rainbow/**"
         branches: [main]
 
 jobs:

.gitignore

@@ -5,7 +5,7 @@ themes
 test.py
 
 # Logs Files
-build.log
+builder/files.txt
 
 # Extra
 .vscode

.prettierrc

@@ -1,3 +0,0 @@
-{
-  "trailingComma": "none"
-}

CHANGELOG.md

@@ -10,10 +10,34 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   Normal tagging for **Bibata** (v1.0.0)
 -   Tag with `br` postfix in **Bibata Rainbow** (v1.0.0.br)
 
-## [unreleased]
+## [Bibata v1.1.0] - 26 Feb 2021
 
 ### Added
+
 -   new **[copr](https://copr.fedorainfracloud.org/coprs/peterwu/rendezvous/package/bibata-cursor-themes/)** package by @peterwu
+-   `.svg` files separated to `<root>/svg`
+-   Customizable Windows & UNIX cursors #91
+-   Easy build system with `Make` supports
+-   Make docs in[README.md](./README.md#manual-build)
+-   use builtin clickgen WinPackager for Windows package
+-   Constant frames in animated cursors
+-   Smooth animation in Windows cursors
+-   `install` & `uninstall` with `make` commands
+
+### Changed
+
+-   Individual cursor build with clickgen v1.1.8 #93
+-   puppeteer 'single-process' args removed
+-   All Bitmapping code structured in `bitmapper` directory
+-   builder code structured inside `builder` directory
+-   `builder` package renamed to `bbpkg`
+-   Symblinks provided by `bbpkg`(new Bibata builder)
+-   Automatic build environment setup with `make`
+-   Logging file removed
+-   Fix dnf runtime requirements packages ful1e5/apple_cursor#34
+-   Fix grabbing cursors symlinks #87
+-   Fix Cursors not available for Login Window in Linux Mint 20 #88
+-   Dirty pixel in `move` cursor fixed #94
 
 ## [Bibata Rainbow v1.0.0] - 17 Nov 2020
 

CURSORS.md

@@ -1,65 +0,0 @@
-# Cursor Source Info
-
-|                               Bibata Modern Cursors                               |                               Bibata Original Cursors                               |         Source          |         Symbolic links          | Windows Cursor name |
-| :-------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------: | :---------------------: | :-----------------------------: | :-----------------: |
-|        <img src="./packages/modern/src/svg/static/move.svg" width="20%"/>         |        <img src="./packages/original/src/svg/static/move.svg" width="20%"/>         |        move.svg         | `dnd_none.svg` `all_scroll.svg` |    `SizeAll.cur`    |
-| <img src="./packages/modern/src/svg/static/bottom_left_corner.svg" width="20%"/>  | <img src="./packages/original/src/svg/static/bottom_left_corner.svg" width="20%"/>  | bottom_left_corner.svg  |             `None`              |                     |
-|   <img src="./packages/modern/src/svg/static/fd_double_arrow.svg" width="20%"/>   |   <img src="./packages/original/src/svg/static/fd_double_arrow.svg" width="20%"/>   |   fd_double_arrow.svg   |             `None`              |   `SizeNWSE.cur`    |
-|  <img src="./packages/modern/src/svg/static/top_right_corner.svg" width="20%"/>   |  <img src="./packages/original/src/svg/static/top_right_corner.svg" width="20%"/>   |  top_right_corner.svg   |             `None`              |                     |
-| <img src="./packages/modern/src/svg/static/bottom_right_corner.svg" width="20%"/> | <img src="./packages/original/src/svg/static/bottom_right_corner.svg" width="20%"/> | bottom_right_corner.svg |             `None`              |                     |
-|   <img src="./packages/modern/src/svg/static/bd_double_arrow.svg" width="20%"/>   |   <img src="./packages/original/src/svg/static/bd_double_arrow.svg" width="20%"/>   |   bd_double_arrow.svg   |             `None`              |   `SizeNESW.cur`    |
-|   <img src="./packages/modern/src/svg/static/top_left_corner.svg" width="20%"/>   |   <img src="./packages/original/src/svg/static/top_left_corner.svg" width="20%"/>   |   top_left_corner.svg   |             `None`              |                     |
-|     <img src="./packages/modern/src/svg/static/bottom_tee.svg" width="20%"/>      |     <img src="./packages/original/src/svg/static/bottom_tee.svg" width="20%"/>      |     bottom_tee.svg      |             `None`              |                     |
-|     <img src="./packages/modern/src/svg/static/center_ptr.svg" width="20%"/>      |     <img src="./packages/original/src/svg/static/center_ptr.svg" width="20%"/>      |     center_ptr.svg      |             `None`              |                     |
-|       <img src="./packages/modern/src/svg/static/circle.svg" width="20%"/>        |       <img src="./packages/original/src/svg/static/circle.svg" width="20%"/>        |       circle.svg        |             `None`              |      `NO.cur`       |
-|   <img src="./packages/modern/src/svg/static/crossed_circle.svg" width="20%"/>    |   <img src="./packages/original/src/svg/static/crossed_circle.svg" width="20%"/>    |   crossed_circle.svg    |             `None`              |                     |
-|     <img src="./packages/modern/src/svg/static/dnd_no_drop.svg" width="20%"/>     |     <img src="./packages/original/src/svg/static/dnd_no_drop.svg" width="20%"/>     |     dnd_no_drop.svg     |             `None`              |                     |
-|    <img src="./packages/modern/src/svg/static/context_menu.svg" width="20%"/>     |    <img src="./packages/original/src/svg/static/context_menu.svg" width="20%"/>     |    context_menu.svg     |             `None`              |                     |
-|        <img src="./packages/modern/src/svg/static/copy.svg" width="20%"/>         |        <img src="./packages/original/src/svg/static/copy.svg" width="20%"/>         |        copy.svg         |             `None`              |                     |
-|      <img src="./packages/modern/src/svg/static/dnd_copy.svg" width="20%"/>       |      <img src="./packages/original/src/svg/static/dnd_copy.svg" width="20%"/>       |      dnd_copy.svg       |             `None`              |                     |
-|        <img src="./packages/modern/src/svg/static/cross.svg" width="20%"/>        |        <img src="./packages/original/src/svg/static/cross.svg" width="20%"/>        |        cross.svg        |             `None`              |                     |
-|       <img src="./packages/modern/src/svg/static/tcross.svg" width="20%"/>        |       <img src="./packages/original/src/svg/static/tcross.svg" width="20%"/>        |       tcross.svg        |             `None`              |                     |
-|      <img src="./packages/modern/src/svg/static/crosshair.svg" width="20%"/>      |      <img src="./packages/original/src/svg/static/crosshair.svg" width="20%"/>      |      crosshair.svg      |             `None`              |     `Cross.cur`     |
-|       <img src="./packages/modern/src/svg/static/dotbox.svg" width="20%"/>        |       <img src="./packages/original/src/svg/static/dotbox.svg" width="20%"/>        |       dotbox.svg        |             `None`              |                     |
-|        <img src="./packages/modern/src/svg/static/hand1.svg" width="20%"/>        |        <img src="./packages/original/src/svg/static/hand1.svg" width="20%"/>        |        hand1.svg        |             `None`              |                     |
-|        <img src="./packages/modern/src/svg/static/hand2.svg" width="20%"/>        |        <img src="./packages/original/src/svg/static/hand2.svg" width="20%"/>        |        hand2.svg        |             `None`              |     `Hand.cur`      |
-|      <img src="./packages/modern/src/svg/static/left_ptr.svg" width="20%"/>       |      <img src="./packages/original/src/svg/static/left_ptr.svg" width="20%"/>       |      left_ptr.svg       |             `None`              |     `Arrow.cur`     |
-|      <img src="./packages/modern/src/svg/static/left_side.svg" width="20%"/>      |      <img src="./packages/original/src/svg/static/left_side.svg" width="20%"/>      |      left_side.svg      |             `None`              |                     |
-|     <img src="./packages/modern/src/svg/static/right_side.svg" width="20%"/>      |     <img src="./packages/original/src/svg/static/right_side.svg" width="20%"/>      |     right_side.svg      |             `None`              |                     |
-|      <img src="./packages/modern/src/svg/static/left_tee.svg" width="20%"/>       |      <img src="./packages/original/src/svg/static/left_tee.svg" width="20%"/>       |      left_tee.svg       |             `None`              |                     |
-|        <img src="./packages/modern/src/svg/static/link.svg" width="20%"/>         |        <img src="./packages/original/src/svg/static/link.svg" width="20%"/>         |        link.svg         |             `None`              |                     |
-|      <img src="./packages/modern/src/svg/static/dnd_link.svg" width="20%"/>       |      <img src="./packages/original/src/svg/static/dnd_link.svg" width="20%"/>       |      dnd_link.svg       |             `None`              |                     |
-|      <img src="./packages/modern/src/svg/static/ll_angle.svg" width="20%"/>       |      <img src="./packages/original/src/svg/static/ll_angle.svg" width="20%"/>       |      ll_angle.svg       |             `None`              |                     |
-|      <img src="./packages/modern/src/svg/static/lr_angle.svg" width="20%"/>       |      <img src="./packages/original/src/svg/static/lr_angle.svg" width="20%"/>       |      lr_angle.svg       |             `None`              |                     |
-|      <img src="./packages/modern/src/svg/static/dnd_move.svg" width="20%"/>       |      <img src="./packages/original/src/svg/static/dnd_move.svg" width="20%"/>       |      dnd_move.svg       |             `None`              |                     |
-|      <img src="./packages/modern/src/svg/static/grabbing.svg" width="20%"/>       |      <img src="./packages/original/src/svg/static/grabbing.svg" width="20%"/>       |      grabbing.svg       |             `None`              |                     |
-|    <img src="./packages/modern/src/svg/static/pointer_move.svg" width="20%"/>     |    <img src="./packages/original/src/svg/static/pointer_move.svg" width="20%"/>     |    pointer_move.svg     |             `None`              |                     |
-|       <img src="./packages/modern/src/svg/static/pencil.svg" width="20%"/>        |       <img src="./packages/original/src/svg/static/pencil.svg" width="20%"/>        |       pencil.svg        |             `None`              |  `Handwriting.cur`  |
-|        <img src="./packages/modern/src/svg/static/plus.svg" width="20%"/>         |        <img src="./packages/original/src/svg/static/plus.svg" width="20%"/>         |        plus.svg         |             `None`              |                     |
-|   <img src="./packages/modern/src/svg/static/question_arrow.svg" width="20%"/>    |   <img src="./packages/original/src/svg/static/question_arrow.svg" width="20%"/>    |   question_arrow.svg    |             `None`              |     `Help.cur`      |
-|       <img src="./packages/modern/src/svg/static/dnd_ask.svg" width="20%"/>       |       <img src="./packages/original/src/svg/static/dnd_ask.svg" width="20%"/>       |       dnd_ask.svg       |             `None`              |                     |
-|      <img src="./packages/modern/src/svg/static/right_ptr.svg" width="20%"/>      |      <img src="./packages/original/src/svg/static/right_ptr.svg" width="20%"/>      |      right_ptr.svg      |             `None`              |                     |
-|      <img src="./packages/modern/src/svg/static/right_tee.svg" width="20%"/>      |      <img src="./packages/original/src/svg/static/right_tee.svg" width="20%"/>      |      right_tee.svg      |             `None`              |                     |
-|    <img src="./packages/modern/src/svg/static/sb_down_arrow.svg" width="20%"/>    |    <img src="./packages/original/src/svg/static/sb_down_arrow.svg" width="20%"/>    |    sb_down_arrow.svg    |             `None`              |                     |
-|  <img src="./packages/modern/src/svg/static/sb_h_double_arrow.svg" width="20%"/>  |  <img src="./packages/original/src/svg/static/sb_h_double_arrow.svg" width="20%"/>  |  sb_h_double_arrow.svg  |             `None`              |    `SizeWE.cur`     |
-|    <img src="./packages/modern/src/svg/static/sb_left_arrow.svg" width="20%"/>    |    <img src="./packages/original/src/svg/static/sb_left_arrow.svg" width="20%"/>    |    sb_left_arrow.svg    |             `None`              |                     |
-|   <img src="./packages/modern/src/svg/static/sb_right_arrow.svg" width="20%"/>    |   <img src="./packages/original/src/svg/static/sb_right_arrow.svg" width="20%"/>    |   sb_right_arrow.svg    |             `None`              |                     |
-|     <img src="./packages/modern/src/svg/static/sb_up_arrow.svg" width="20%"/>     |     <img src="./packages/original/src/svg/static/sb_up_arrow.svg" width="20%"/>     |     sb_up_arrow.svg     |             `None`              |   `Alternate.cur`   |
-|  <img src="./packages/modern/src/svg/static/sb_v_double_arrow.svg" width="20%"/>  |  <img src="./packages/original/src/svg/static/sb_v_double_arrow.svg" width="20%"/>  |  sb_v_double_arrow.svg  |             `None`              |    `SizeNS.cur`     |
-|      <img src="./packages/modern/src/svg/static/top_side.svg" width="20%"/>       |      <img src="./packages/original/src/svg/static/top_side.svg" width="20%"/>       |      top_side.svg       |             `None`              |                     |
-|     <img src="./packages/modern/src/svg/static/bottom_side.svg" width="20%"/>     |     <img src="./packages/original/src/svg/static/bottom_side.svg" width="20%"/>     |     bottom_side.svg     |             `None`              |                     |
-|       <img src="./packages/modern/src/svg/static/top_tee.svg" width="20%"/>       |       <img src="./packages/original/src/svg/static/top_tee.svg" width="20%"/>       |       top_tee.svg       |             `None`              |                     |
-|      <img src="./packages/modern/src/svg/static/ul_angle.svg" width="20%"/>       |      <img src="./packages/original/src/svg/static/ul_angle.svg" width="20%"/>       |      ul_angle.svg       |             `None`              |                     |
-|      <img src="./packages/modern/src/svg/static/ur_angle.svg" width="20%"/>       |      <img src="./packages/original/src/svg/static/ur_angle.svg" width="20%"/>       |      ur_angle.svg       |             `None`              |                     |
-|    <img src="./packages/modern/src/svg/static/vertical_text.svg" width="20%"/>    |    <img src="./packages/original/src/svg/static/vertical_text.svg" width="20%"/>    |    vertical_text.svg    |             `None`              |                     |
-|       <img src="./packages/modern/src/svg/animated/wait.svg" width="20%"/>        |       <img src="./packages/original/src/svg/animated/wait.svg" width="20%"/>        |        wait.svg         |             `None`              |     `Wait.ani`      |
-|  <img src="./packages/modern/src/svg/animated/left_ptr_watch.svg" width="20%"/>   |  <img src="./packages/original/src/svg/animated/left_ptr_watch.svg" width="20%"/>   |   left_ptr_watch.svg    |             `None`              |  `AppStarting.ani`  |
-|   <img src="./packages/modern/src/svg/static/wayland_cursor.svg" width="20%"/>    |   <img src="./packages/original/src/svg/static/wayland_cursor.svg" width="20%"/>    |   wayland_cursor.svg    |             `None`              |                     |
-|      <img src="./packages/modern/src/svg/static/x_cursor.svg" width="20%"/>       |      <img src="./packages/original/src/svg/static/x_cursor.svg" width="20%"/>       |      x_cursor.svg       |             `None`              |                     |
-|        <img src="./packages/modern/src/svg/static/xterm.svg" width="20%"/>        |        <img src="./packages/original/src/svg/static/xterm.svg" width="20%"/>        |        xterm.svg        |             `None`              |     `IBeam.cur`     |
-|       <img src="./packages/modern/src/svg/static/zoom_in.svg" width="20%"/>       |       <img src="./packages/original/src/svg/static/zoom_in.svg" width="20%"/>       |       zoom_in.svg       |             `None`              |                     |
-|      <img src="./packages/modern/src/svg/static/zoom_out.svg" width="20%"/>       |      <img src="./packages/original/src/svg/static/zoom_out.svg" width="20%"/>       |      zoom_out.svg       |             `None`              |                     |
-
-## Figma File
-
-[![Figma File](https://imgur.com/15fNroH.png)](https://www.figma.com/file/Y9RKZLXhSvaxpUzsKGJkp6/Bibata-Cursor?node-id=0%3A1)

MANIFEST.in

@@ -1,2 +0,0 @@
-include builder/windows.inf
-include builder/hotspots.json

Makefile

@@ -0,0 +1,85 @@
+all: clean render build
+
+unix: clean render bitmaps
+	@cd builder && make setup build_unix
+
+windows: clean render bitmaps
+	@cd builder && make setup build_windows
+
+.PHONY: all
+
+clean:
+	@rm -rf bitmaps themes
+	
+modern: clean render_modern build_modern
+original:clean render_original build_original
+
+#
+# Render Bibata Bitmaps
+#
+
+render: bitmapper svg
+	@cd bitmapper && make install render_modern render_original
+
+render_original: bitmapper svg
+	@cd bitmapper && make install render_original
+
+render_modern: bitmapper svg
+	@cd bitmapper && make install render_modern
+
+#
+# Build Bibata Unix & Windows cursors
+#
+
+build: bitmaps
+	@cd builder && make setup build
+
+build_unix: bitmaps
+	@rm -rf themes
+	@cd builder && make setup build_unix
+
+build_windows: bitmaps
+	@rm -rf themes
+	@cd builder && make setup build_windows
+
+build_modern: bitmaps
+	@cd builder && make setup build_modern
+
+build_original: bitmaps
+	@cd builder && make setup build_original
+
+#
+# Installation
+#
+
+.ONESHELL:
+SHELL:=/bin/bash
+
+src = ./themes/Bibata-*
+local := ~/.icons
+local_dest := $(local)/Bibata-*
+
+root := /usr/share/icons
+root_dest := $(root)/Bibata-*
+
+install: themes
+	@if [[ $EUID -ne 0 ]]; then
+		@echo "> Installing 'Bibata' cursors inside $(local)/..."
+		@mkdir -p $(local)
+		@cp -r $(src) $(local)/ && echo "> Installed!"
+	@else
+		@echo "> Installing 'Bibata' cursors inside $(root)/..."
+		@mkdir -p $(root)
+		@sudo cp -r $(src) $(root)/ && echo "> Installed!"
+	@fi
+
+uninstall:
+	@if [[ $EUID -ne 0 ]]; then
+		@echo "> Removing 'Bibata' cursors from '$(local)'..."
+		@rm -rf $(local_dest)
+	@else
+		@echo "> Removing 'Bibata' cursors from '$(root)'..."
+		@sudo rm -rf $(root_dest)
+	@fi
+
+reinstall: uninstall install

PLING.bbcode

@@ -7,8 +7,9 @@
 [i]Available Sizes[/i] [b]22, 24, 28, 32, 40, 48, 56, 64, 72, 80, 88, 96[/b]
 [i]Get the latest build[/i] @[b][url=https://github.com/ful1e5/Bibata_Cursor/actions]GitHub Actions[/url][/b]
 [i]Release Notification[/i] at [b][url=https://twitter.com/ful1e5]Twitter[/url][/b](@ful1e5)
+For [i]Customizing Size[/i] check [b][url=https://github.com/ful1e5/Bibata_Cursor#manual-build]README.md[/url][/b] 
 
-[b][size=150]Linux/X11 installation[/size][/b]
+[b]Linux/X11 installation[/b]
 Get the latest stable Linux release from the [b][url=https://www.pling.com/p/1197198/#files-panel]Pling[/url][/b]. Unpack [b].tar.gz[/b] file and follow these [b]commands[/b].
 
 [b]Install[/b]
@@ -27,8 +28,8 @@ Get the latest stable Linux release from the [b][url=https://www.pling.com/p/119
 
 [size=150][b]Window installation[/b][/size]
 [list=1]
-    [*]unzip [b]Bibata_Windows.zip[/b] file[/*]
-    [*]Open [b]Bibata_Windows/<Bibata_flavor>[/b] in Explorer, and [b]right-click[/b] on [b]install.inf[/b].[/*]
+    [*]unzip [b].zip[/b] file[/*]
+    [*]Open [b]unziped[/b] directory in Explorer, and [b]right-click[/b] on [b]install.inf[/b].[/*]
     [*]Click 'Install' from the context menu, and authorize the modifications to your system.[/*]
     [*]Open [i]Control Panel > Personalisation and Appearance > Change mouse pointers[/i], and select [b]Bibata Cursors[/b].[/*]
     [*]Click '[b]Apply[/b]'.[/*]

README.md

@@ -72,64 +72,14 @@
 
 ---
 
-<!-- Table Of Content -->
-
-<details>
- <summary><strong>Table of Contents</strong> (click to expand)</summary>
-
-- [Bibata ?](#bibata-)
-  - [Bibata Styles](#bibata-styles)
-  - [Cursor Sizes](#cursor-sizes)
-  - [Colors](#colors)
-  - [Preview](#preview)
-  - [Quick install](#quick-install)
-  - [Packages 📦](#packages-)
-    - [Arch Linux/Manjaro](#arch-linuxmanjaro)
-    - [Fedora](#fedora)
-      - [copr-repo by @peterwu (recommended)](#copr-repo-by-peterwu-recommended)
-      - [copr-repo by @muhalantabli](#copr-repo-by-muhalantabli)
-  - [Manual Install](#manual-install)
-      - [Linux/X11](#linuxx11)
-      - [Windows](#windows)
-- [Dependencies](#dependencies)
-  - [Runtime Dependencies](#runtime-dependencies)
-      - [Install Runtime Dependencies](#install-runtime-dependencies)
-        - [macOS](#macos)
-        - [Debain/ubuntu](#debainubuntu)
-        - [ArchLinux/Manjaro](#archlinuxmanjaro)
-        - [Fedora/Fedora Silverblue/CentOS/RHEL](#fedorafedora-silverbluecentosrhel)
-  - [Build Dependencies](#build-dependencies)
-    - [Node Packages](#node-packages)
-    - [PyPi Packages](#pypi-packages)
-  - [Build From Scratch](#build-from-scratch)
-    - [⚡ Auto Build (using GitHub Actions)](#-auto-build-using-github-actions)
-    - [Manual Build](#manual-build)
-      - [Setup python environment](#setup-python-environment)
-      - [Compile From Source](#compile-from-source)
-      - [Install Node/PyPi Packages](#install-nodepypi-packages)
-      - [Build `Bibata`](#build-bibata)
-      - [Build `Bibata Modern` Only](#build-bibata-modern-only)
-      - [Build `Bibata Original` Only](#build-bibata-original-only)
-    - [Install Build Theme](#install-build-theme)
-      - [Linux](#linux)
-      - [Windows](#windows-1)
-- [You may also like...](#you-may-also-like)
-- [Bugs](#bugs)
-- [Getting Help](#getting-help)
-- [Contributing](#contributing)
-- [Credit](#credit)
-- [Support](#support)
-</details>
-
 <!-- Sub Projects -->
 
 <details>
  <summary><strong>Sub Projects</strong> (click to expand)</summary>
 
-- [Bibata Rainbow](./packages/rainbow)
+-   [Bibata Rainbow](./bitmapper/packages/rainbow)
 
 </details>
-<!-- Bibata intro -->
 
 # Bibata ?
 
@@ -169,20 +119,22 @@ Bibata is **OpenSource**, Compact and Material Designed Cursor set. This project
 
 ## Preview
 
+> Check Figma file [here](https://www.figma.com/file/Y9RKZLXhSvaxpUzsKGJkp6/Bibata-Cursor?node-id=0%3A1)
+
 <p align="center">
-  <img title="Bibata Amber" width="90%" src="https://imgur.com/p60SQOq.png">
+  <img title="Bibata Amber" width="90%" src="https://i.imgur.com/2DEYWDC.png">
   </br>
   <sub>Bibata Amber</sub>
 </p>
 
 <p align="center">
-  <img title="Bibata Classic" width="90%" src="https://imgur.com/WaqGcUF.png">
+  <img title="Bibata Classic" width="90%" src="https://i.imgur.com/C8mMQ3j.png">
   </br>
   <sub>Bibata Classic</sub>
 </p>
 
 <p align="center">
-  <img title="Bibata Ice" width="90%" src="https://imgur.com/ON1sd4H.png">
+  <img title="Bibata Ice" width="90%" src="https://i.imgur.com/ovzTw6u.png">
   </br>
   <sub>Bibata Ice</sub>
 </p>
@@ -222,6 +174,7 @@ yay -S bibata-cursor-theme-bin                       # pre-built binary
 #### copr-repo by @peterwu (recommended)
 
 **Enable the repo:**
+
 ```bash
 sudo dnf copr enable peterwu/rendezvous
 ```
@@ -265,8 +218,8 @@ sudo mv Bibata-* /usr/share/icons/
 
 #### Windows
 
-1. unzip `Bibata_Windows.zip` file
-2. Open `Bibata_Windows/<Bibata_flavor>` in Explorer, and **right click** on `install.inf`.
+1. unzip `.zip` file
+2. Open unziped directory in Explorer, and **right click** on `install.inf`.
 3. Click 'Install' from the context menu, and authorize the modifications to your system.
 4. Open _Control Panel_ > _Personalization and Appearance_ > _Change mouse pointers_, and select **Bibata Cursors**.
 5. Click '**Apply**'.
@@ -275,18 +228,19 @@ sudo mv Bibata-* /usr/share/icons/
 
 # Dependencies
 
-## Runtime Dependencies
+## External Libraries
 
 -   libxcursor-dev
 -   libx11-dev
 -   libpng-dev (<=1.6)
 
-#### Install Runtime Dependencies
+#### Install External Libraries
 
 ##### macOS
 
 ```bash
-brew cask install xquartz libpng
+brew install --cask xquartz
+brew install libpng
 ```
 
 ##### Debain/ubuntu
@@ -304,14 +258,16 @@ sudo pacman -S libx11 libxcursor libpng
 ##### Fedora/Fedora Silverblue/CentOS/RHEL
 
 ```bash
-sudo dnf install libx11-devel libxcursor-devel libpng-devel
+sudo dnf install libX11-devel libXcursor-devel libpng-devel
 ```
 
 ## Build Dependencies
 
+-   [gcc](https://gcc.gnu.org/install/)
+-   [make](https://www.gnu.org/software/make/)
 -   [nodejs](https://nodejs.org/en/) (<=12.x.x)
 -   [yarn](https://classic.yarnpkg.com/en/docs/install/)
-- [python3](https://www.python.org/downloads/)
+-   [python](https://www.python.org/downloads/) (<=3.8)
 -   [pip3](https://pip.pypa.io/en/stable/installing/)
 
 ### Node Packages
@@ -319,12 +275,10 @@ sudo dnf install libx11-devel libxcursor-devel libpng-devel
 -   [puppeteer](https://www.npmjs.com/package/puppeteer)
 -   [pngjs](https://www.npmjs.com/package/pngjs)
 -   [pixelmatch](https://www.npmjs.com/package/pixelmatch)
-- [ora](https://www.npmjs.com/package/ora)
-- [chalk](https://www.npmjs.com/package/chalk)
 
 ### PyPi Packages
 
-- [clickgen](https://pypi.org/project/clickgen/)
+-   [clickgen](https://pypi.org/project/clickgen/s)
 
 ## Build From Scratch
 
@@ -334,92 +288,46 @@ GitHub Actions is automatically runs on every `push`(on **main** & **dev** branc
 
 ### Manual Build
 
-#### Setup python environment
+> Check **[Makefile](./Makefile)** for more targets.
 
 ```bash
-python3 -m pip install --upgrade pip                 # Update pip to latest
-python3 -m pip install virtualenv                    # Install python virtual environment
-virtualenv venv                                      # Create new virtualenv named `venv`
-source venv/bin/activate                             # Activate virtualenv
-
-# For Deactivate virtualenv
-deactivate
+make
 ```
 
-#### Compile From Source
-
-> Make sure your [python environment](#setup-python-environment) setup and `virtualenv` is **active**.
-
-#### Install Node/PyPi Packages
+#### Build Only `XCursor` theme
 
 ```bash
-yarn install                                         # Install all Node Packages
-yarn py_install                                      # Install all PyPi Packages with Bibata builder
+make unix
 ```
 
-#### Build `Bibata`
+#### Customize `XCursor` size
 
 ```bash
-yarn render:bibata-modern                            # Render Bibata Modern Bitmaps
-yarn render:bibata-original                          # Render Bibata Original Bitmaps
-
-# Build cursors packages
-yarn build                                           # Build Windows & X11 packages
-# OR
-yarn build:x11                                       # Build only X11 packages
-# OR
-yarn build:win                                       # Build only Windows cursors
+make unix X_SIZES=22            # Only built '22px' pixel-size.
+make unix X_SIZES=22 24 32      # Multiple sizes are provided with  ' '(Space)
 ```
 
-#### Build `Bibata Modern` Only
+#### Install `XCursor` theme
 
 ```bash
-yarn render:bibata-modern                            # Render Bibata Modern Bitmaps
-
-# Build cursors packages
-yarn build                                           # Build Windows & X11 cursors
-# OR
-yarn build:x11                                       # Build only X11 cursors
-# OR
-yarn build:win                                       # Build only Windows cursors
+make install            # install as user
+  # OR
+sudo make install       # install as root
 ```
 
-#### Build `Bibata Original` Only
+#### Build Only `Windows` theme
 
 ```bash
-yarn render:bibata-original                          # Render Bibata Original Bitmaps
-
-# Build cursors packages
-yarn build                                           # Build Windows & Linux cursors
-# OR
-yarn build:x11                                       # Build only X11 cursors
-# OR
-yarn build:win                                       # Build only Windows cursors
+make windows
 ```
 
-After build `bitmaps` and `themes` directory are generated at project **root**.
-
-### Install Build Theme
-
-All builded cursor themes are available inside `themes` directory.
-
-#### Linux
+#### Customize `Windows Cursor` size
 
 ```bash
-cd ./themes
-
-# installing Theme to local user(recommend)
-rm -rf ~/.icons/Bibata-* && cp -r Bibata-* ~/.icons/
+make windows WIN_SIZE=96            # Supports only one pixel-size
 ```
 
-#### Windows
-
-1. Open the `settings` app.
-2. **Goto** `Devices` -> `Mouse` -> `Additional Mouse Options`.
-3. **Goto** the `pointers` tab.
-4. Replace each cursor in the currently applied cursor set with the corresponding cursor in the `./themes/<Bibata_flavor>` folder.
-5. Click "**save as**" and type in the desired name.
-6. Click "**apply**" and "**ok**".
+> Windows installations steps are same as [these](#windows).
 
 <!-- Other Interesting projects -->
 
@@ -455,15 +363,12 @@ Check [CONTRIBUTING.md](CONTRIBUTING.md), any suggestions for features and contr
 -   [Dmz](https://github.com/GalliumOS/dmz-cursor-theme)
 -   [Yaru](https://github.com/ubuntu/yaru)
 -   Emojis are taken from [here](https://emojipedia.org/)
+-   Wedge loading from [loading.io](https://loading.io/spinner/wedges/-pie-wedge-pizza-circle-round-rotate) with **Microsoft** colors
 
 <!-- Support -->
 
 # Support
 
-Share your joy with **★**.
-
-> For more support
-
 <a href="https://www.buymeacoffee.com/Nt7Wg4V" >
   <img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" >
 </a>

bitmapper/Makefile

@@ -0,0 +1,21 @@
+all: install render
+
+.PHONY: all
+
+clean:
+	@find . -type f -name "yarn.lock" -exec rm -rf "{}" +;
+	@find . -type d -name "node_modules" -exec rm -rf "{}" +;
+
+node_modules:
+	@mkdir -p $@
+
+install: node_modules package.json 
+	@yarn install
+
+render_modern:
+	@yarn render:bibata-modern
+
+render_original:
+	@yarn render:bibata-original
+
+render: render_modern render_original

bitmapper/package.json

@@ -0,0 +1,15 @@
+{
+	"name": "bibata-cursor",
+	"version": "1.1.0",
+	"description": "Material Based Cursors",
+	"main": "index.js",
+	"author": "Kaiz Khatri",
+	"license": "GPL-3.0",
+	"private": true,
+	"scripts": {
+		"render:bibata-modern": "yarn workspace bibata-modern render",
+		"render:bibata-original": "yarn workspace bibata-original render",
+		"render:bibata-rainbow": "yarn workspace bibata-rainbow render"
+	},
+	"workspaces": ["packages/*"]
+}

bitmapper/packages/core/package.json

@@ -0,0 +1,22 @@
+{
+	"name": "bibata-core",
+	"version": "1.1.0",
+	"description": "Bibata bitmapper's core modules",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"author": "Kaiz Khatri",
+	"license": "GPL-3.0",
+	"private": true,
+	"dependencies": {
+		"pixelmatch": "^5.2.1",
+		"pngjs": "^6.0.0",
+		"puppeteer": "^7.1.0"
+	},
+	"devDependencies": {
+		"@types/pixelmatch": "^5.2.2",
+		"@types/pngjs": "^6.0.0",
+		"@types/puppeteer": "^5.4.3",
+		"ts-node": "^9.1.1",
+		"typescript": "^4.1.5"
+	}
+}

bitmapper/packages/core/src/BitmapsGenerator.ts

@@ -0,0 +1,160 @@
+import fs from "fs";
+import path from "path";
+
+import puppeteer, { Browser, ElementHandle, Page } from "puppeteer";
+
+import { frameNumber } from "./util/frameNumber";
+import { matchImages } from "./util/matchImages";
+import { toHTML } from "./util/toHTML";
+
+class BitmapsGenerator {
+	/**
+	 * Generate Png files from svg code.
+	 * @param themeName Give name, So all bitmaps files are organized in one directory.
+	 * @param bitmapsDir `absolute` or `relative` path, Where `.png` files will store.
+	 */
+	constructor(private bitmapsDir: string) {
+		this.bitmapsDir = path.resolve(bitmapsDir);
+		this.createDir(this.bitmapsDir);
+	}
+
+	/**
+	 * Create directory if it doesn't exists.
+	 * @param dirPath directory `absolute` path.
+	 */
+	private createDir(dirPath: string) {
+		if (!fs.existsSync(dirPath)) {
+			fs.mkdirSync(dirPath, { recursive: true });
+		}
+	}
+
+	/**
+	 * Prepare headless browser.
+	 */
+	public async getBrowser(): Promise<Browser> {
+		return await puppeteer.launch({
+			ignoreDefaultArgs: ["--no-sandbox"],
+			headless: true,
+		});
+	}
+
+	private async getSvgElement(
+		page: Page,
+		content: string
+	): Promise<ElementHandle<Element>> {
+		if (!content) {
+			throw new Error(`${content} File Read error`);
+		}
+
+		const html = toHTML(content);
+		await page.setContent(html);
+
+		const svg = await page.$("#container svg");
+
+		if (!svg) {
+			throw new Error("svg element not found!");
+		}
+		return svg;
+	}
+
+	public async generateStatic(
+		browser: Browser,
+		content: string,
+		key: string
+	) {
+		const page = await browser.newPage();
+		const svg = await this.getSvgElement(page, content);
+
+		const out = path.resolve(this.bitmapsDir, `${key}.png`);
+
+		await svg.screenshot({ omitBackground: true, path: out });
+		await page.close();
+	}
+
+	private async screenshot(
+		element: ElementHandle<Element>
+	): Promise<Buffer | string> {
+		const buffer = await element.screenshot({
+			encoding: "binary",
+			omitBackground: true,
+		});
+
+		if (!buffer) {
+			throw new Error("SVG element screenshot not working");
+		}
+		return buffer;
+	}
+
+	private async stopAnimation(page: Page) {
+		//@ts-ignore
+		await page._client.send("Animation.setPlaybackRate", {
+			playbackRate: 0,
+		});
+	}
+
+	private async resumeAnimation(page: Page, playbackRate: number) {
+		//@ts-ignore
+		await page._client.send("Animation.setPlaybackRate", {
+			playbackRate,
+		});
+	}
+
+	private async saveFrameImage(key: string, frame: Buffer | string) {
+		const out_path = path.resolve(this.bitmapsDir, key);
+		fs.writeFileSync(out_path, frame);
+	}
+
+	public async generateAnimated(
+		browser: Browser,
+		content: string,
+		key: string,
+		options: {
+			playbackRate: number;
+			diff: number;
+			frameLimit: number;
+			framePadding: number;
+		} = {
+			playbackRate: 0.3,
+			diff: 0,
+			frameLimit: 300,
+			framePadding: 4,
+		}
+	) {
+		const page = await browser.newPage();
+		const svg = await this.getSvgElement(page, content);
+		await this.stopAnimation(page);
+
+		let index = 1;
+		let breakRendering = false;
+		let prevImg: Buffer | string;
+
+		// Rendering frames till `imgN` matched to `imgN-1` (When Animation is done)
+		while (!breakRendering) {
+			if (index > options.frameLimit) {
+				throw new Error("Reached the frame limit.");
+			}
+
+			this.resumeAnimation(page, options.playbackRate);
+			const img: string | Buffer = await this.screenshot(svg);
+			this.stopAnimation(page);
+
+			if (index > 1) {
+				// @ts-ignore
+				const diff = matchImages(prevImg, img);
+				if (diff <= options.diff) {
+					breakRendering = !breakRendering;
+				}
+			}
+			const number = frameNumber(index, options.framePadding);
+			const frame = `${key}-${number}.png`;
+
+			this.saveFrameImage(frame, img);
+
+			prevImg = img;
+			++index;
+		}
+
+		await page.close();
+	}
+}
+export { BitmapsGenerator };

bitmapper/packages/core/src/SVGHandler/SvgDirectoryParser.ts

@@ -0,0 +1,77 @@
+import fs from "fs";
+import path from "path";
+
+interface Svg {
+	key: string;
+	content: string;
+}
+
+class SvgDirectoryParser {
+	/**
+	 * Manage and Parse SVG file path in `absolute` fashion.
+	 * This Parser look svg files as below fashion:
+	 * `
+	 *  <@svgDir>/static
+	 *  <@svgDir>/animated
+	 * `
+	 * @param svgDir is relative/absolute path, Where `SVG` files are stored.
+	 */
+	semiAnimated: boolean = false;
+	constructor(private svgDir: string) {
+		if (!fs.existsSync(this.svgDir)) {
+			throw new Error(`SVG files not found in ${this.svgDir}`);
+		}
+	}
+
+	private readData(f: string): Svg {
+		const content = fs.readFileSync(f, "utf-8");
+		const key = path.basename(f, ".svg");
+		return { content, key };
+	}
+
+	/**
+	 * Return absolute paths array of SVG files data located inside '@svgDir/static'
+	 */
+	public getStatic(): Svg[] {
+		const staticDir = path.resolve(this.svgDir, "static");
+
+		if (!fs.existsSync(staticDir)) {
+			console.log(`${this.svgDir} contains semi-animated .svg files`);
+			this.semiAnimated = true;
+			return [];
+		} else {
+			const svgs = fs
+				.readdirSync(staticDir)
+				.map((f) => this.readData(path.resolve(staticDir, f)));
+
+			if (svgs.length == 0) {
+				throw new Error("Static Cursors directory is empty");
+			}
+			return svgs;
+		}
+	}
+	/**
+	 * Return absolute paths array of SVG files data located inside '@svgDir/animated'
+	 */
+	public getAnimated(): Svg[] {
+		const animatedDir = path.resolve(this.svgDir, "animated");
+
+		if (!fs.existsSync(animatedDir)) {
+			throw new Error("Animated Cursors directory not found");
+		}
+
+		const svgs = fs
+			.readdirSync(animatedDir)
+			.map((f) => this.readData(path.resolve(animatedDir, f)));
+
+		if (svgs.length == 0 && this.semiAnimated) {
+			throw new Error(
+				`Can't parse svg directory ${this.svgDir} as semi-animated theme`
+			);
+		}
+
+		return svgs;
+	}
+}
+
+export { SvgDirectoryParser };

bitmapper/packages/core/src/SVGHandler/colorSvg.ts

@@ -0,0 +1,52 @@
+import { Colors } from "../types";
+
+/**
+ * Default Key Colors for generating colored svg.
+ * base="#00FF00" (Green)
+ * outline="#0000FF" (Blue)
+ * watch.background="#FF0000" (Red)
+ * */
+const defaultKeyColors: Colors = {
+	base: "#00FF00",
+	outline: "#0000FF",
+	watch: {
+		background: "#FF0000",
+	},
+};
+
+/**
+ * Customize colors of svg code.
+ * @param {string} content SVG code.
+ * @param {Colors} colors Customize colors.
+ * @param {Colors} [keys] Colors Key, That was written SVG code.
+ * @returns {string} SVG code with colors.
+ */
+const colorSvg = (
+	content: string,
+	colors: Colors,
+	keys: Colors = defaultKeyColors
+): string => {
+	content = content
+		.replace(new RegExp(keys.base, "ig"), colors.base)
+		.replace(new RegExp(keys.outline, "ig"), colors.outline);
+
+	try {
+		// === trying to replace `watch` color ===
+
+		if (!colors.watch?.background) {
+			throw new Error("");
+		}
+		const { background: b } = colors.watch;
+		content = content.replace(new RegExp(keys.watch!.background, "ig"), b); // Watch Background
+	} catch (error) {
+		// === on error => replace `watch` color as `base` ===
+
+		content = content.replace(
+			new RegExp(keys.watch!.background, "ig"),
+			colors.base
+		);
+	}
+	return content;
+};
+
+export { colorSvg };

bitmapper/packages/core/src/SVGHandler/index.ts

@@ -0,0 +1,4 @@
+import { colorSvg } from "./colorSvg";
+import { SvgDirectoryParser } from "./SvgDirectoryParser";
+
+export { colorSvg, SvgDirectoryParser };

bitmapper/packages/core/src/index.ts

@@ -0,0 +1,4 @@
+import { BitmapsGenerator } from "./BitmapsGenerator";
+import * as SVGHandler from "./SVGHandler";
+
+export { BitmapsGenerator, SVGHandler };

bitmapper/packages/core/src/types.ts

@@ -0,0 +1,20 @@
+/**
+ * Hex Colors in string Format.
+ *
+ * `Example: `"#FFFFFF"
+ */
+type HexColor = string;
+
+/**
+ * @Colors expect `base`, `outline` & `watch-background` colors in **HexColor** Format.
+ * @default background is `base` color.
+ */
+type Colors = {
+	base: HexColor;
+	outline: HexColor;
+	watch?: {
+		background: HexColor;
+	};
+};
+
+export { Colors };

bitmapper/packages/core/src/util/frameNumber.ts

@@ -0,0 +1,7 @@
+export const frameNumber = (index: number, padding: number) => {
+  let result = "" + index;
+  while (result.length < padding) {
+    result = "0" + result;
+  }
+  return result;
+};

bitmapper/packages/core/src/util/matchImages.ts

@@ -0,0 +1,11 @@
+import Pixelmatch from "pixelmatch";
+import { PNG } from "pngjs";
+
+export const matchImages = (img1: Buffer, img2: Buffer): number => {
+	const { data: img1Data, width, height } = PNG.sync.read(img1);
+	const { data: imgNData } = PNG.sync.read(img2);
+
+	return Pixelmatch(img1Data, imgNData, null, width, height, {
+		threshold: 0.1,
+	});
+};

bitmapper/packages/core/src/util/toHTML.ts

@@ -4,7 +4,7 @@ export const template = `
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Bibata Cursors Render Template</title>
+        <title>Render Template</title>
     </head>
                 
     <body>
@@ -15,5 +15,5 @@ export const template = `
 </html>
 `;
 
-export const generateRenderTemplate = (svg: string) =>
-  template.replace("<svginjection>", svg);
+export const toHTML = (svgData: string): string =>
+	template.replace("<svginjection>", svgData);

bitmapper/packages/core/tsconfig.json

@@ -0,0 +1,12 @@
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"declaration": true,
+		"declarationMap": true,
+		"sourceMap": true,
+		"composite": true,
+		"outDir": "dist",
+		"rootDir": "src"
+	},
+	"include": ["src"]
+}

bitmapper/packages/modern/package.json

@@ -0,0 +1,17 @@
+{
+	"name": "bibata-modern",
+	"version": "1.1.0",
+	"description": "Rounded edges bibata cursors",
+	"main": "dist/index.js",
+	"scripts": {
+		"build": "npx tsc --build",
+		"render": "yarn build && node dist/index.js"
+	},
+	"author": "Kaiz Khatri",
+	"license": "GPL-3.0",
+	"private": true,
+	"devDependencies": {
+		"ts-node": "^9.1.1",
+		"typescript": "^4.1.5"
+	}
+}

bitmapper/packages/modern/src/config.ts

@@ -0,0 +1,40 @@
+import { Colors } from "bibata-core/src/types";
+
+interface Config {
+	themeName: string;
+	color: Colors;
+}
+
+const black = "#000000";
+const white = "#FFFFFF";
+const amber = "#FF8300";
+const richBlack = "#001524";
+
+const config: Config[] = [
+	{
+		themeName: "Bibata-Modern-Amber",
+		color: {
+			base: amber,
+			outline: white,
+			watch: {
+				background: richBlack,
+			},
+		},
+	},
+	{
+		themeName: "Bibata-Modern-Classic",
+		color: {
+			base: black,
+			outline: white,
+		},
+	},
+	{
+		themeName: "Bibata-Modern-Ice",
+		color: {
+			base: white,
+			outline: black,
+		},
+	},
+];
+
+export { config };

bitmapper/packages/modern/src/index.ts

@@ -0,0 +1,37 @@
+import path from "path";
+
+import { BitmapsGenerator, SVGHandler } from "bibata-core";
+import { config } from "./config";
+
+const root = path.resolve(__dirname, "../../../../");
+const svgDir = path.resolve(root, "svg", "modern");
+
+const main = async () => {
+	for (const { themeName, color } of config) {
+		console.log("=>", themeName);
+
+		const bitmapsDir = path.resolve(root, "bitmaps", themeName);
+		const svg = new SVGHandler.SvgDirectoryParser(svgDir);
+
+		const png = new BitmapsGenerator(bitmapsDir);
+		const browser = await png.getBrowser();
+
+		for (let { key, content } of svg.getStatic()) {
+			console.log(" -> Saving", key, "...");
+
+			content = SVGHandler.colorSvg(content, color);
+			await png.generateStatic(browser, content, key);
+		}
+
+		for (let { key, content } of svg.getAnimated()) {
+			console.log(" -> Saving", key, "...");
+
+			content = SVGHandler.colorSvg(content, color);
+			await png.generateAnimated(browser, content, key);
+		}
+
+		await browser.close();
+	}
+};
+
+main();

bitmapper/packages/modern/tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"references": [{ "path": "../core" }],
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"outDir": "dist"
+	},
+	"include": ["src"]
+}

bitmapper/packages/original/package.json

@@ -0,0 +1,17 @@
+{
+	"name": "bibata-original",
+	"version": "1.1.0",
+	"description": "Sharp edges bibata cursors",
+	"main": "dist/index.js",
+	"scripts": {
+		"build": "npx tsc --build",
+		"render": "yarn build && node dist/index.js"
+	},
+	"author": "Kaiz Khatri",
+	"license": "GPL-3.0",
+	"private": true,
+	"devDependencies": {
+		"ts-node": "^9.1.1",
+		"typescript": "^4.1.5"
+	}
+}

bitmapper/packages/original/src/config.ts

@@ -0,0 +1,40 @@
+import { Colors } from "bibata-core/src/types";
+
+interface Config {
+	themeName: string;
+	color: Colors;
+}
+
+const black = "#000000";
+const white = "#FFFFFF";
+const amber = "#FF8300";
+const richBlack = "#001524";
+
+const config: Config[] = [
+	{
+		themeName: "Bibata-Original-Amber",
+		color: {
+			base: amber,
+			outline: white,
+			watch: {
+				background: richBlack,
+			},
+		},
+	},
+	{
+		themeName: "Bibata-Original-Classic",
+		color: {
+			base: black,
+			outline: white,
+		},
+	},
+	{
+		themeName: "Bibata-Original-Ice",
+		color: {
+			base: white,
+			outline: black,
+		},
+	},
+];
+
+export { config };

bitmapper/packages/original/src/index.ts

@@ -0,0 +1,37 @@
+import path from "path";
+
+import { BitmapsGenerator, SVGHandler } from "bibata-core";
+import { config } from "./config";
+
+const root = path.resolve(__dirname, "../../../../");
+const svgDir = path.resolve(root, "svg", "original");
+
+const main = async () => {
+	for (const { themeName, color } of config) {
+		console.log("=>", themeName);
+
+		const bitmapsDir = path.resolve(root, "bitmaps", themeName);
+		const svg = new SVGHandler.SvgDirectoryParser(svgDir);
+
+		const png = new BitmapsGenerator(bitmapsDir);
+		const browser = await png.getBrowser();
+
+		for (let { key, content } of svg.getStatic()) {
+			console.log(" -> Saving", key, "...");
+
+			content = SVGHandler.colorSvg(content, color);
+			await png.generateStatic(browser, content, key);
+		}
+
+		for (let { key, content } of svg.getAnimated()) {
+			console.log(" -> Saving", key, "...");
+
+			content = SVGHandler.colorSvg(content, color);
+			await png.generateAnimated(browser, content, key);
+		}
+
+		await browser.close();
+	}
+};
+
+main();

bitmapper/packages/rainbow/package.json

@@ -0,0 +1,17 @@
+{
+	"name": "bibata-rainbow",
+	"version": "1.0.0",
+	"description": "'semi-animated' bibata cursors with rainbow colors",
+	"main": "index.js",
+	"scripts": {
+		"build": "npx tsc --build",
+		"render": "yarn build && node dist/index.js"
+	},
+	"author": "Kaiz Khatri",
+	"license": "GPL-3.0",
+	"private": true,
+	"devDependencies": {
+		"ts-node": "^8.10.2",
+		"typescript": "^4.0.5"
+	}
+}