@openedx/paragon 23.11.0 → 23.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "23.11.0",
+  "version": "23.12.0",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/tokens/src/themes/light/components/Modal.json

@@ -10,7 +10,21 @@
           "$value": "{color.black}"
         }
       },
-      "backdrop-bg": { "source": "$modal-backdrop-bg", "$value": "{color.black}" }
+      "backdrop-bg": { "source": "$modal-backdrop-bg", "$value": "{color.black}" },
+      "footer": {
+        "overrides": {
+          "button": {
+            "variants": {}
+          },
+          "examples": {
+            "button": {
+              "variants": {
+                "primary": "brand"
+              }
+            }
+          }
+        }
+      }
     }
   },
   "elevation": {

package/tokens/style-dictionary.js

@@ -338,13 +338,20 @@ const initializeStyleDictionary = async ({ themes }) => {
    */
   const BUTTON_VARIANT_OVERRIDES_CONFIG = [
     {
-      name: 'Alert',
+      name: 'Alert actions',
       getTokens: (tokens) => tokens?.color?.alert?.actions?.overrides?.button?.variants,
       selectors: [
         '.pgn__alert-message-wrapper .pgn__alert-actions',
         '.pgn__alert-message-wrapper-stacked .pgn__alert-actions',
       ],
     },
+    {
+      name: 'Modal footer',
+      getTokens: (tokens) => tokens?.color?.modal?.footer?.overrides?.button?.variants,
+      selectors: [
+        '.pgn__modal .pgn__modal-footer',
+      ],
+    },
     // Add new component configurations here!
   ];
 
@@ -376,7 +383,7 @@ const initializeStyleDictionary = async ({ themes }) => {
           hasOutputHeader = true;
         }
 
-        output += `// ${config.name}\n\n`;
+        output += `/* ${config.name} */\n\n`;
 
         Object.entries(buttonVariantOverrides).forEach(([originalVariant, overrideVariant]) => {
           const selectorOutput = config.selectors