elm-token: Adding elm tokens desing for poc (#1)

* fix: adding elm tokens

.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/commitlint.yml

@@ -0,0 +1,10 @@
+# Run commitlint on the commit messages in a pull request.
+
+name: Lint Commit Messages
+
+on:
+  - pull_request
+
+jobs:
+  commitlint:
+    uses: openedx/.github/.github/workflows/commitlint.yml@master

.github/workflows/release.yml

@@ -0,0 +1,28 @@
+name: Release
+on:
+  push:
+    branches:
+      - master
+      - alpha
+jobs:
+  release:
+    name: Release
+    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
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
+        run: npx semantic-release

.github/workflows/sync-alpha-master.yml

@@ -0,0 +1,30 @@
+name: Sync alpha with master
+on:
+  push:
+    branches:
+      - master
+  workflow_dispatch:
+
+jobs:
+  sync-branches:
+    runs-on: ubuntu-latest
+    name: Syncing branches
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Set up Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 18
+      - name: Create Pull Request
+        id: cpr
+        uses: tretuna/[email protected]
+        with:
+          GITHUB_TOKEN: ${{ secrets.requirements_bot_github_token }}
+          FROM_BRANCH: master
+          TO_BRANCH: alpha
+      - name: Enable Pull Request Automerge
+        uses: peter-evans/enable-pull-request-automerge@v2
+        with:
+          token: ${{ secrets.requirements_bot_github_token }}
+          pull-request-number: ${{ steps.cpr.outputs.PULL_REQUEST_NUMBER }}

.gitignore

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

Makefile

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

README.rst

@@ -0,0 +1,147 @@
+==================
+@edx/elm-edx.org
+==================
+
+This project contains branding assets and themes for edx.org. It is an updated implementation of the branding interface defined in the package @edx/elm.
+
+-----
+Usage
+-----
+
+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.
+
+.. code-block:: bash
+
+  npm install --save @edx/brand@npm:@edx/elm-edx.org
+
+Unversioned with Github. Including this project this way will pull in the latest version of it whenever a project's requirements are installed. This alleviates the need to manually pull in updates. The draw back is that if a breaking change is inadvertently introduced it is likely to gum up your pipeline or create a visual bug.
+
+.. code-block:: bash
+
+  npm install --save @edx/brand@git+https://[email protected]/edx/elm-edx.org#master
+
+Import assets from this package in a consuming node application:
+
+.. code-block:: javascript
+
+  import logo from '@edx/brand/logo.svg';
+
+--------------
+Images & Logos
+--------------
+
+edX Logo
+--------
+
+.. image:: /logo.svg
+    :alt: edX
+    :width: 128px
+
+.. code-block:: javascript
+
+  import logo from '@edx/brand/logo.svg';
+
+  // Or the png version
+  import logo from '@edx/brand/logo.png';
+
+edX Logo with ®
+---------------
+
+.. image:: /logo-trademark.svg
+    :alt: edX
+    :width: 128px
+
+.. code-block:: javascript
+
+  import logo from '@edx/brand/logo-trademark.svg';
+
+  // Or the png version
+  import logo from '@edx/brand/logo-trademark.png';
+
+edX Logo in white
+-----------------
+
+.. image:: /logo-white.svg
+    :alt: edX
+    :width: 128px
+
+.. code-block:: javascript
+
+  import logo from '@edx/brand/logo-white.svg';
+
+  // Or the png version
+  import logo from '@edx/brand/logo-white.png';
+
+edX Favicon
+-----------------
+
+.. image:: /favicon.ico
+    :alt: edX
+    :width: 128px
+
+.. code-block:: javascript
+
+  // @edx/brand/favicon.ico;
+
+Default fallback image for `Card.ImageCap` component
+--------
+
+.. image:: /paragon/images/card-imagecap-fallback.png
+    :alt: card-imagecap-fallback
+    :width: 380px
+
+.. code-block:: javascript
+
+  // the png version
+  import cardFallbackImg from '@edx/brand/paragon/images/card-imagecap-fallback.png';
+
+-------------
+Paragon Theme
+-------------
+
+You can use the theme in two ways:
+
+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/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
+
+
+--------------------------------
+Publishing with Semantic Release
+--------------------------------
+
+This project is published to npm with Semantic Release. When a pull request is merged to master Semantic Release reads the commit messages to determine whether to make a new patch. minor, or major release of this package. For more info see https://github.com/semantic-release/semantic-release#how-does-it-work

docs/decisions/0001-record-architecture-decisions.rst

@@ -0,0 +1,32 @@
+1. Record Architecture Decisions
+--------------------------------
+
+Status
+------
+
+Accepted
+
+Context
+-------
+
+We would like to keep a historical record on the architectural
+decisions we make with this app as it evolves over time.
+
+Decision
+--------
+
+We will use Architecture Decision Records, as described by
+Michael Nygard in `Documenting Architecture Decisions`_
+
+.. _Documenting Architecture Decisions: http://thinkrelevance.com/blog/2011/11/15/documenting-architecture-decisions
+
+Consequences
+------------
+
+See Michael Nygard's article, linked above.
+
+References
+----------
+
+* https://resources.sei.cmu.edu/asset_files/Presentation/2017_017_001_497746.pdf
+* https://github.com/npryce/adr-tools/tree/master/doc/adr

docs/decisions/0002-no-dependencies.rst

@@ -0,0 +1,24 @@
+1. No Direct Dependencies
+-------------------------
+
+Status
+------
+
+Accepted
+
+Context
+-------
+
+This package must be consumable by any Open edX application, whether it is written in Javascript, Python, or Ruby.
+
+Conceptually this project should be considered a simple directory of assets.
+
+Decision
+--------
+
+The ``package.json`` file in this repository will contain no dependencies and no main javascript entry point.
+
+Consequences
+------------
+
+By not leveraging the ability of Javascript or Python to manage exports, implementations of this branding interface will not have any flexibility to perform custom logic to fetch assets (e.g. inside a function like `getAsset(name)`).

docs/decisions/0003-minimal-breaking-changes.rst

@@ -0,0 +1,26 @@
+1. Minimal Breaking Changes
+---------------------------
+
+Status
+------
+
+Accepted
+
+Context
+-------
+
+This package and the interface it defines will be relied upon by nearly every application in Open edX that displays branding or uses a SASS theme.
+
+Breaking changes in this repository would have far-reaching impacts on both Open edX applications and teams that maintain their own branding packages that implement this interface.
+
+Decision
+--------
+
+This package will be published and versioned on npm, but we will attempt to avoid breaking changes through any means possible.
+
+If you must make a breaking change consider performing the change with an `expand and contract pattern <https://martinfowler.com/bliki/ParallelChange.html>`_.
+
+References
+----------
+
+* https://martinfowler.com/bliki/ParallelChange.html