[BD-46] refactor: refactoring buttons variants

.github/workflows/ci.yml

@@ -0,0 +1,20 @@
+name: CI
+on:
+  pull_request:
+jobs:
+  ci:
+    name: CI
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: npm ci
+      - name: Build theme
+        run: npm run build

.github/workflows/release.yml

@@ -19,6 +19,8 @@ jobs:
           node-version: 18
       - name: Install dependencies
         run: npm ci
+      - name: Build theme
+        run: npm run build
       - name: Release
         env:
           GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}

.gitignore

@@ -1,2 +1,4 @@
 .DS_Store
 .vscode
+node_modules
+dist

Makefile

@@ -0,0 +1,3 @@
+build:
+	rm -rf dist && mkdir dist
+	npm run build-scss

README.rst

@@ -8,7 +8,7 @@ This project contains branding assets and themes for edx.org. It is the edX impl
 Usage
 -----
 
-Install this package one of two ways.
+Install this package one of two ways:
 
 
 Versioned with npm. Including this project this way will allow you to control the version you pull into your application. This is safer, but it also means you will need to manually update it or use some automation to update it for you.
@@ -102,14 +102,42 @@ Default fallback image for `Card.ImageCap` component
 Paragon Theme
 -------------
 
-Use the theme in this package as described in the Paragon docs: https://edx.github.io/paragon/
+You can use the theme in two ways:
 
-.. code-block:: sass
+1. this repo builds and publishes its own CSS files (located in the `dist` directory) by including and overriding Paragon's styles,
+   so you can just inject them into your application **without** needing to import / compile Paragon's style separately
+2. compile the styles on your own in your application
+  .. code-block:: sass
 
-  @import "@edx/brand/paragon/fonts";
-  @import "@edx/brand/paragon/variables";
-  @import "@edx/paragon/scss/core/core";
-  @import "@edx/brand/paragon/overrides";
+    @import "@edx/brand/paragon/core";
+    @import "@edx/brand/paragon/css/themes/light/variables";
+    @import "@edx/brand/paragon/css/themes/light/utility-classes";
+
+
+-------------------------------------
+Theming with Paragon's Design Tokens
+-------------------------------------
+Starting from `v21` Paragon uses style-dictionary to build CSS variables from design tokens (i.e. JSON files), Paragon
+allows to override design tokens values before building CSS variables allowing to apply custom theme.
+
+See `tokens` directory for tokens that edX.org theme overrides. This directory should follow the same folder/JSON structure as is used on whatever version of Paragon is installed in this repository. These JSON files are deep-merged with the default/standard Paragon design tokens.
+Note that some tokens have `"modify": null` property specified, this is done to disable default Paragon's behaviour that modifies this specific token in some way, read more about token's modifications during build time here[TODO: add link to Paragon readme].
+
+Building design tokens
+#############################
+
+#. Install Paragon with
+
+   .. code-block:: bash
+
+     npm install
+
+#. Update values in `tokens` folder
+#. Run following command to build updated CSS files with CSS variables (they are located in `paragon/css` directory)
+
+   .. code-block:: bash
+
+     npm run build-design-tokens
 
 
 --------------------------------