feat: add brand example

README.md

@@ -33,6 +33,7 @@ This sample plugin showcases the **Open edX Hooks Extension Framework**, which a
 | **Events (Signals)** | React to platform events | [Open edX Events Guide](https://docs.openedx.org/projects/openedx-events/en/latest/) | [`backend/sample_plugin/signals.py`](./backend/sample_plugin/signals.py) | Integrating with external systems, audit logging |
 | **Filters** | Modify platform behavior | [Using Open edX Filters](https://docs.openedx.org/projects/openedx-filters/en/latest/how-tos/using-filters.html) | [`backend/sample_plugin/pipeline.py`](./backend/sample_plugin/pipeline.py) | Customizing business logic, URL redirects |
 | **Frontend Slots** | Customize MFE interfaces | [Frontend Plugin Slots](https://docs.openedx.org/en/latest/site_ops/how-tos/use-frontend-plugin-slots.html) | [`frontend/`](./frontend/) | UI customization, adding new components |
+| **Brand Packages** | Customize theming | [Open edX Brand Package Interface](https://github.com/openedx/brand-openedx) | [`brand/`](./brand/) | UI theming |
 | **Tutor Plugin** | Deploy plugins easily | [Tutor Plugin Development](https://docs.tutor.edly.io/) | [`tutor/`](./tutor/) | Simplified deployment and configuration |
 
 ## Quick Start Guide

brand/README.md

@@ -0,0 +1,72 @@
+# brand-example-purple
+
+**This is a simple example brand package that changes the `brand` color to purple.**
+
+### Before
+![Screenshot of the Authn MFE with this brand package enabled](./docs/images/authn-without-theme.png)
+
+### After
+![Screenshot of the Authn MFE with this brand package enabled](./docs/images/authn-with-theme.png)
+
+## Using this brand package
+
+> [!IMPORTANT]
+> These instructions assume you have a [tutor](https://docs.tutor.edly.io/index.html) main environment set up.
+
+### Configure `tutor` to use this theme
+
+#### Using the [`jsdelivr`](https://www.jsdelivr.com/) CDN (Recommended)
+
+1. Stop `tutor` (`tutor dev stop` or `tutor local stop`)
+2. Navigate to your local tutor plugins directory (`tutor plugins printroot`)
+3. Create a new `purple-jsdelivr.py` plugin file with the following content
+
+```py
+import json
+from tutor import hooks
+
+paragon_theme_urls = {
+    "variants": {
+        "light": {
+            "urls": {
+                "default": "https://cdn.jsdelivr.net/npm/@openedx/paragon@$paragonVersion/dist/light.min.css",
+                "brandOverride": "https://cdn.jsdelivr.net/gh/openedx/sample-plugin@main/brand/dist/light.min.css"
+            }
+        }
+    }
+}
+
+fstring = f"""
+MFE_CONFIG["PARAGON_THEME_URLS"] = {json.dumps(paragon_theme_urls)}
+"""
+
+hooks.Filters.ENV_PATCHES.add_item(
+    (
+        "mfe-lms-common-settings",
+        fstring
+    )
+)
+```
+
+4. Enable the plugin (`tutor plugins enable purple-jsdelivr`)
+5. Start `tutor`  (`tutor dev start lms cms mfe` or `tutor local start lms cms mfe`)
+
+#### Using the [Tutor Paragon Plugin](https://github.com/openedx/openedx-tutor-plugins/tree/main/plugins/tutor-contrib-paragon) (Recommended)
+
+1. [Install](https://github.com/openedx/openedx-tutor-plugins/tree/main/plugins/tutor-contrib-paragon#installation) and [enable](https://github.com/openedx/openedx-tutor-plugins/tree/main/plugins/tutor-contrib-paragon#enable-the-plugin) the Tutor Paragon Plugin (`tutor-contrib-paragon`)
+2. [Build](https://github.com/openedx/openedx-tutor-plugins/tree/main/plugins/tutor-contrib-paragon#build-the-paragon-image) the `paragon-builder` image.
+2. Navigate to your Tutor config directory (you can find this by running `tutor config printroot`)
+3. From your config directory, navigate to `env/plugins/paragon` (the full path on my dev machine is `~/.local/share/tutor-main/env/plugins/paragon`)
+4. You should see some directories in there, find the `theme-sources` directory.
+5. Place this theme's [`color.json` file](./src/tokens/src/themes/light/global/color.json) in the appropriate subdirectory of the `theme-sources` directory.
+```sh
+$ tree ~/.local/share/tutor-main/env/plugins/paragon
+├── [...]
+└── theme-sources
+    └── themes
+        └── light
+            └── global
+                └── color.json
+```
+6. [Build](https://github.com/openedx/openedx-tutor-plugins/tree/main/plugins/tutor-contrib-paragon#build-all-themes) the theme
+7. Start `tutor`  (`tutor dev start lms cms mfe` or `tutor local start lms cms mfe`)

brand/dist/README.md

@@ -0,0 +1,3 @@
+# Compiled Theme
+
+This directory contains the compiled theme stylesheets referenced by the [`jsdelivr`](https://www.jsdelivr.com/) example plugin.

brand/dist/light.css

@@ -0,0 +1,31 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * See <PARAGON_ROOT>/tokens/README.md for more details.
+ */
+
+:root {
+  --pgn-size-btn-focus-width: 2px;
+  --pgn-size-input-btn-focus-width: 1px;
+  --pgn-spacing-input-btn-padding-y: 0.5625rem;
+  --pgn-color-brand-100: #E9D4FFFF;
+  --pgn-color-brand-200: #DAB2FFFF;
+  --pgn-color-brand-300: #C27AFFFF;
+  --pgn-color-brand-400: #AD46FFFF;
+  --pgn-color-brand-600: #8200DBFF;
+  --pgn-color-brand-700: #6E11B0FF;
+  --pgn-color-brand-800: #59168BFF;
+  --pgn-color-brand-900: #3C0366FF;
+  --pgn-color-brand-base: #9810FAFF;
+  --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
+  --pgn-color-brand-500: var(--pgn-color-brand-base); /** Brand color of level 500. */
+  --pgn-color-action-default-brand-100: #CFA1FFFF;
+  --pgn-color-action-default-brand-200: #C17FFFFF;
+  --pgn-color-action-default-brand-300: #AB47FFFF;
+  --pgn-color-action-default-brand-400: #9613FFFF;
+  --pgn-color-action-default-brand-600: #6400A8FF;
+  --pgn-color-action-default-brand-700: #510D81FF;
+  --pgn-color-action-default-brand-800: #3D0F5FFF;
+  --pgn-color-action-default-brand-900: #1F0234FF;
+  --pgn-color-action-default-brand-base: #7C04D3FF;
+  --pgn-color-action-default-brand-500: #7C04D3FF;
+}

brand/dist/theme-urls.json

@@ -0,0 +1,15 @@
+{
+  "themeUrls": {
+    "defaults": {
+      "light": "light"
+    },
+    "variants": {
+      "light": {
+        "paths": {
+          "default": "./light.css",
+          "minified": "./light.min.css"
+        }
+      }
+    }
+  }
+}

brand/src/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+paragon
+dist

brand/src/.nvmrc

@@ -0,0 +1 @@
+20

brand/src/Makefile

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

brand/src/README.md

@@ -0,0 +1,11 @@
+# brand-example-purple
+
+This directory contains the source design tokens for the example brand package.
+
+## Building
+
+```sh
+nvm use
+npm ci
+make build
+```