@openedx/paragon 22.3.2 → 23.0.0-alpha.1

package/README.md

@@ -47,7 +47,7 @@ Usage for Open edX and others:
 
 ```
 // ... Any custom SCSS variables should be defined here
-@import '~@openedx/paragon/scss/core/core.scss';
+@import '~@openedx/paragon/styles/scss/core/core.scss';
 ```
 
 Usage on with `@edx/brand`:
@@ -57,7 +57,7 @@ Usage on with `@edx/brand`:
 ```
 @import '~@edx/brand/paragon/fonts.scss';
 @import '~@edx/brand/paragon/variables.scss';
-@import '~@openedx/paragon/scss/core/core.scss';
+@import '~@openedx/paragon/styles/scss/core/core.scss';
 @import '~@edx/brand/paragon/overrides.scss';
 ```
 
@@ -69,7 +69,10 @@ The Paragon CLI (Command Line Interface) is a tool that provides various utility
 
 ### Available Commands
 
-- `paragon install-theme [theme]`: Installs the specific @edx/brand package.
+- `paragon install-theme [theme]`: Installs the specific [brand package](https://github.com/openedx/brand-openedx).
+- `paragon build-tokens`: Build Paragon's design tokens.
+- `paragon replace-variables`: Replace SCSS variables usages or definitions to CSS variables and vice versa in `.scss` files.
+- `paragon build-scss`: Compile Paragon's core and themes SCSS into CSS.
 
 Use `paragon help` to see more information.
 
@@ -148,7 +151,7 @@ module.exports = {
   dist: The sub-directory of the source code where it puts its build artifact. Often "dist".
   */
   localModules: [
-    { moduleName: '@openedx/paragon/scss/core', dir: '../src/paragon', dist: 'scss/core' },
+    { moduleName: '@openedx/paragon/styles/scss/core', dir: '../src/paragon', dist: 'styles/scss/core' },
     { moduleName: '@openedx/paragon/icons', dir: '../src/paragon', dist: 'icons' },
     // Note that using dist: 'dist' will require you to run 'npm build' in Paragon
     // to add local changes to the 'dist' directory, so that they can be picked up by the MFE.
@@ -158,7 +161,7 @@ module.exports = {
 };
 ```
 
-Then, when importing Paragon's core SCSS in your MFE the import needs to begin with a tilde `~` so that path to your local Paragon repository gets resolved correctly: `@import "~@openedx/paragon/scss/core";`
+Then, when importing Paragon's core SCSS in your MFE the import needs to begin with a tilde `~` so that path to your local Paragon repository gets resolved correctly: `@import "~@openedx/paragon/styles/scss/core";`
 
 #### Internationalization
 
@@ -477,3 +480,31 @@ The assigned maintainers for this component and other project details may be fou
 Please do not report security issues in public. Please email security@openedx.org.
 
 We tend to prioritize security issues which impact the published `@openedx/paragon` NPM library more so than the [documentation website](https://paragon-openedx.netlify.app/) or example React application.
+
+## Design Tokens
+
+Design tokens are all the values needed to build and maintain a design system — spacing, color, typography, object styles, etc. They can represent anything defined by the design: color as an RGB value, opacity as a number, spacing as a REM value. They are used instead of hard-coded values to provide flexibility and uniformity across the application.
+
+By defining style properties as tokens, we can transform the styles into various implementations compatible with different platforms or formats as our use cases expand (e.g., transforming tokens to CSS variables, CSS utility classes, etc.).
+
+### Theming with design tokens
+
+Paragon uses [style-dictionary](https://github.com/amzn/style-dictionary) to build design tokens into CSS variables that are included in the package. Read more in [design tokens README](tokens/README.md).
+
+#### Compiling CSS from design tokens for Paragon contributions (in this repo)
+1. **`npm install`.** Install dependencies, including `style-dictionary`.
+2. Make changes to design token(s).
+3. **`npm run build-scss`.** Transforms the tokens to CSS variables and CSS utility classes, and generates `core.css` and `light.css` output files.
+    - `light.css`. CSS variable definitions for colors in the light theme variant.
+    - `core.css`. Contains the majority of Paragon/Bootstrap foundational styles for layout, components, etc. Consumes CSS variables defined by `light.css`.
+4. Test changes locally (e.g., running the documentation website, the example MFE app, etc.).
+5. Ensure changes to `core.css` and `light.css` are committed & released to NPM (which also "releases" them on versioned public CDNs for NPM packages).
+6. Consuming applications would inject the `core.css` and `light.css` theme files into their applications via a mechanism similar to https://github.com/openedx/frontend-platform/pull/440 (ideally pulling from a public CDN for NPM packages, but falling back to locally installed copies, if needed).
+
+#### Compiling CSS from design tokens for `@edx/brand` theme authors (in `@edx/brand` repos)
+1. **`npm install`.** Install dependencies, including `@edx/paragon`.
+2. Create tokens that will override Paragon's default tokens (matching same JSON schema).
+3. **`npm run build-scss`.** This `@edx/brand` repo will have a new NPM script that utilizes a new CLI exported by `@edx/paragon` which exposes the `build-tokens.js` script (or possibly another if we end up needing one for the brand packages to run specifically, TBD) for `@edx/brand` consumers.
+    - The intent of running this command is to effectively deep merge the tokens defined in Paragon's default tokens with the override tokens defined by `@edx/brand`, generating its own `core.css` and `light.css` output files (exact output files still a TBD) containing CSS variable overrides based on the token overrides.
+5. Ensure any changes to the generated `core.css` and `light.css` files are committed & released to NPM (which also "releases" them on versioned public CDNs for NPM packages).
+    - _Note: It is a bit unclear still in the above linked implementation POC for `@edx/frontend-platform` how it would integrate with `@edx/brand` in this way. Open to suggestions/feedback/ideas here._

package/bin/paragon-scripts.js

@@ -2,10 +2,13 @@
 const chalk = require('chalk');
 const themeCommand = require('../lib/install-theme');
 const helpCommand = require('../lib/help');
+const buildTokensCommand = require('../lib/build-tokens');
+const replaceVariablesCommand = require('../lib/replace-variables');
+const buildScssCommand = require('../lib/build-scss');
+const { sendTrackInfo } = require('../lib/utils');
 const versionCommand = require('../lib/version');
 const migrateToOpenEdxScopeCommand = require('../lib/migrate-to-openedx-scope');
 
-const HELP_COMMAND = 'help';
 const commandAliases = {
   '-v': 'version',
   '--version': 'version',
@@ -31,6 +34,9 @@ const COMMANDS = {
   *    {
   *      name: '--optionName',
   *      description: 'optionDescription',
+  *      choices: 'optionChoices',
+  *      defaultValue: 'optionDefaultValue',
+  *      required: true/false,
   *    },
   *    ...
   *  ],
@@ -60,8 +66,118 @@ const COMMANDS = {
       },
     ],
   },
+  'build-tokens': {
+    executor: buildTokensCommand,
+    description: 'CLI to build Paragon design tokens.',
+    options: [
+      {
+        name: '-s, --source',
+        description: 'Specify the source directory for design tokens.',
+        defaultValue: '\'\'',
+      },
+      {
+        name: '-b, --build-dir',
+        description: 'Specify the build directory for the generated tokens.',
+        defaultValue: './build/',
+      },
+      {
+        name: '--source-tokens-only',
+        description: 'Include only source design tokens in the build.',
+        defaultValue: false,
+      },
+      {
+        name: '-t, --themes',
+        description: 'Specify themes to include in the token build.',
+        defaultValue: 'light',
+      },
+    ],
+  },
+  'replace-variables': {
+    executor: replaceVariablesCommand,
+    description: 'CLI to replace SCSS variables usages or definitions to CSS variables and vice versa in .scss files.',
+    parameters: [
+      {
+        name: '-p, --filePath',
+        description: 'Path to the file or directory where to replace variables.',
+        defaultValue: '\'\'',
+      },
+    ],
+    options: [
+      {
+        name: '-s, --source',
+        description: 'Type of replacement: usage or definition. If set to "definition" the command will only update SCSS variables definitions with CSS variables, if set to "usage" - all occurrences of SCSS variables will we replaced',
+        defaultValue: '\'\'',
+      },
+      {
+        name: '-t, --replacementType',
+        description: 'Type of replacement: usage or definition. If set to "definition" the command will only update SCSS variables definitions with CSS variables, if set to "usage" - all occurrences of SCSS variables will we replaced',
+        choices: '[usage|definition]',
+        defaultValue: 'definition',
+      },
+      {
+        name: '-d, --direction',
+        description: 'Map direction: css-to-scss or scss-to-css, if replacement type parameter is set to "definition" this has no effect.',
+        choices: '[scss-to-css|css-to-scss]',
+        defaultValue: 'scss-to-css',
+      },
+    ],
+  },
+  'build-scss': {
+    executor: buildScssCommand,
+    description: 'CLI to compile Paragon\'s core and themes SCSS into CSS.',
+    options: [
+      {
+        name: '--corePath',
+        description: 'Path to the theme\'s core SCSS file, defaults to Paragon\'s core.scss.',
+        defaultValue: 'styles/scss/core/core.scss',
+      },
+      {
+        name: '--themesPath',
+        description: `Path to the directory that contains themes' files. Expects directory to have following structure:
+          themes/
+            light/
+            │  ├─ index.css
+            │  ├─ other_css_files
+            dark/
+            │  ├─ index.css
+            │  ├─ other_css_files
+            some_other_custom_theme/
+            │  ├─ index.css
+            │  ├─ other_css_files
+          ...
+
+          where index.css has imported all other CSS files in the theme's subdirectory. The script will output
+          light.css, dark.css and some_other_custom_theme.css files (together with maps and minified versions).
+          You can provide any amount of themes. Default to paragon's themes.
+      `,
+        defaultValue: 'styles/css/themes',
+      },
+      {
+        name: '--outDir',
+        description: 'Specifies directory where to out resulting CSS files.',
+        defaultValue: './dist',
+      },
+      {
+        name: '--defaultThemeVariants',
+        description: `Specifies default theme variants. Defaults to a single 'light' theme variant.
+          You can provide multiple default theme variants by passing multiple values, for
+          example: \`--defaultThemeVariants light dark\`
+        `,
+        defaultValue: 'light',
+      },
+    ],
+  },
   help: {
-    executor: helpCommand,
+    executor: (args) => helpCommand(COMMANDS, args),
+    parameters: [
+      {
+        name: 'command',
+        description: 'Specifies command name.',
+        defaultValue: '\'\'',
+        choices: '[install-theme|build-tokens|replace-variables|build-scss]',
+        required: false,
+      },
+    ],
     description: 'Displays help for available commands.',
   },
   version: {
@@ -70,8 +186,14 @@ const COMMANDS = {
   },
 };
 
+/**
+ * Executes a Paragon CLI command based on the provided command-line arguments.
+ *
+ * @async
+ * @function executeParagonCommand
+ */
 (async () => {
-  const [command] = process.argv.slice(2);
+  const [command, ...commandArgs] = process.argv.slice(2);
   const resolvedCommand = commandAliases[command] || command;
   const executor = COMMANDS[resolvedCommand];
 
@@ -81,16 +203,13 @@ const COMMANDS = {
     return;
   }
 
-  if (command === HELP_COMMAND) {
-    helpCommand(COMMANDS);
-    return;
-  }
-
   try {
-    await executor.executor();
+    await executor.executor(commandArgs);
+    sendTrackInfo('openedx.paragon.cli-command.used', { command, status: 'success' });
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error(chalk.red.bold('An error occurred:', error.message));
+    sendTrackInfo('openedx.paragon.cli-command.used', { command, status: 'error', errorMsg: error.message });
     process.exit(1);
   }
 })();

package/dist/ActionRow/_index.scss

@@ -1,5 +1,3 @@
-@import "variables";
-
 .pgn__action-row {
   display: flex;
   flex-grow: 1;
@@ -11,7 +9,7 @@
   }
 
   & > * + * {
-    margin-inline-start: $action-row-gap-x;
+    margin-inline-start: var(--pgn-spacing-action-row-gap-x);
   }
 }
 
@@ -27,7 +25,7 @@
   }
 
   & > * + * {
-    margin-bottom: $action-row-gap-y;
+    margin-bottom: var(--pgn-spacing-action-row-gap-y);
   }
 }
 

package/dist/ActionRow/index.js

@@ -1,10 +1,10 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["as", "isStacked", "children"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';

package/dist/ActionRow/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","ActionRow","_ref","as","isStacked","children","props","_objectWithoutProperties","_excluded","createElement","_objectSpread","className","propTypes","elementType","string","node","bool","defaultProps","undefined","ActionRowSpacer","Spacer"],"sources":["../../src/ActionRow/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nfunction ActionRow({\n  as,\n  isStacked,\n  children,\n  ...props\n}) {\n  return React.createElement(\n    as,\n    {\n      ...props,\n      className: classNames(props.className, {\n        'pgn__action-row': !isStacked,\n        'pgn__action-row-stacked': isStacked,\n      }),\n    },\n    children,\n  );\n}\n\nActionRow.propTypes = {\n  /** Specifies the base element */\n  as: PropTypes.elementType,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n  /** Specifies the contents of the row */\n  children: PropTypes.node,\n  /** Specifies whether row should be displayed horizontally */\n  isStacked: PropTypes.bool,\n};\n\nActionRow.defaultProps = {\n  as: 'div',\n  className: undefined,\n  children: null,\n  isStacked: false,\n};\n\nfunction ActionRowSpacer() {\n  return <span className=\"pgn__action-row-spacer\" />;\n}\n\nActionRow.Spacer = ActionRowSpacer;\n\nexport { ActionRowSpacer };\nexport default ActionRow;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,SAASA,CAAAC,IAAA,EAKf;EAAA,IAJDC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACLC,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAER,oBAAOV,KAAK,CAACW,aAAa,CACxBN,EAAE,EAAAO,aAAA,CAAAA,aAAA,KAEGJ,KAAK;IACRK,SAAS,EAAEX,UAAU,CAACM,KAAK,CAACK,SAAS,EAAE;MACrC,iBAAiB,EAAE,CAACP,SAAS;MAC7B,yBAAyB,EAAEA;IAC7B,CAAC;EAAC,IAEJC,QACF,CAAC;AACH;AAEAJ,SAAS,CAACW,SAAS,GAAG;EACpB;EACAT,EAAE,EAAEJ,SAAS,CAACc,WAAW;EACzB;EACAF,SAAS,EAAEZ,SAAS,CAACe,MAAM;EAC3B;EACAT,QAAQ,EAAEN,SAAS,CAACgB,IAAI;EACxB;EACAX,SAAS,EAAEL,SAAS,CAACiB;AACvB,CAAC;AAEDf,SAAS,CAACgB,YAAY,GAAG;EACvBd,EAAE,EAAE,KAAK;EACTQ,SAAS,EAAEO,SAAS;EACpBb,QAAQ,EAAE,IAAI;EACdD,SAAS,EAAE;AACb,CAAC;AAED,SAASe,eAAeA,CAAA,EAAG;EACzB,oBAAOrB,KAAA,CAAAW,aAAA;IAAME,SAAS,EAAC;EAAwB,CAAE,CAAC;AACpD;AAEAV,SAAS,CAACmB,MAAM,GAAGD,eAAe;AAElC,SAASA,eAAe;AACxB,eAAelB,SAAS"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","ActionRow","_ref","as","isStacked","children","props","_objectWithoutProperties","_excluded","createElement","_objectSpread","className","propTypes","elementType","string","node","bool","defaultProps","undefined","ActionRowSpacer","Spacer"],"sources":["../../src/ActionRow/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nfunction ActionRow({\n  as,\n  isStacked,\n  children,\n  ...props\n}) {\n  return React.createElement(\n    as,\n    {\n      ...props,\n      className: classNames(props.className, {\n        'pgn__action-row': !isStacked,\n        'pgn__action-row-stacked': isStacked,\n      }),\n    },\n    children,\n  );\n}\n\nActionRow.propTypes = {\n  /** Specifies the base element */\n  as: PropTypes.elementType,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n  /** Specifies the contents of the row */\n  children: PropTypes.node,\n  /** Specifies whether row should be displayed horizontally */\n  isStacked: PropTypes.bool,\n};\n\nActionRow.defaultProps = {\n  as: 'div',\n  className: undefined,\n  children: null,\n  isStacked: false,\n};\n\nfunction ActionRowSpacer() {\n  return <span className=\"pgn__action-row-spacer\" />;\n}\n\nActionRow.Spacer = ActionRowSpacer;\n\nexport { ActionRowSpacer };\nexport default ActionRow;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,SAASA,CAAAC,IAAA,EAKf;EAAA,IAJDC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACLC,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAER,oBAAOV,KAAK,CAACW,aAAa,CACxBN,EAAE,EAAAO,aAAA,CAAAA,aAAA,KAEGJ,KAAK;IACRK,SAAS,EAAEX,UAAU,CAACM,KAAK,CAACK,SAAS,EAAE;MACrC,iBAAiB,EAAE,CAACP,SAAS;MAC7B,yBAAyB,EAAEA;IAC7B,CAAC;EAAC,IAEJC,QACF,CAAC;AACH;AAEAJ,SAAS,CAACW,SAAS,GAAG;EACpB;EACAT,EAAE,EAAEJ,SAAS,CAACc,WAAW;EACzB;EACAF,SAAS,EAAEZ,SAAS,CAACe,MAAM;EAC3B;EACAT,QAAQ,EAAEN,SAAS,CAACgB,IAAI;EACxB;EACAX,SAAS,EAAEL,SAAS,CAACiB;AACvB,CAAC;AAEDf,SAAS,CAACgB,YAAY,GAAG;EACvBd,EAAE,EAAE,KAAK;EACTQ,SAAS,EAAEO,SAAS;EACpBb,QAAQ,EAAE,IAAI;EACdD,SAAS,EAAE;AACb,CAAC;AAED,SAASe,eAAeA,CAAA,EAAG;EACzB,oBAAOrB,KAAA,CAAAW,aAAA;IAAME,SAAS,EAAC;EAAwB,CAAE,CAAC;AACpD;AAEAV,SAAS,CAACmB,MAAM,GAAGD,eAAe;AAElC,SAASA,eAAe;AACxB,eAAelB,SAAS","ignoreList":[]}

package/dist/Alert/index.js

@@ -1,16 +1,16 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["children", "icon", "actions", "dismissible", "onClose", "closeLabel", "stacked"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

package/dist/Alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useState","PropTypes","classNames","BaseAlert","divWithClassName","FormattedMessage","useMediaQuery","Icon","breakpoints","Button","ActionRow","ALERT_CLOSE_LABEL_TEXT","Alert","forwardRef","_ref","ref","children","icon","actions","dismissible","onClose","closeLabel","stacked","props","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","isStacked","setIsStacked","isExtraSmall","maxWidth","extraSmall","actionButtonSize","cloneActionElement","Action","addtlActionProps","size","key","cloneElement","createElement","_extends","className","src","length","Spacer","variant","onClick","id","defaultMessage","description","map","DivStyledAsH4","displayName","AlertHeading","Heading","AlertLink","Link","commonPropTypes","as","elementType","bsPrefix","string","propTypes","defaultProps","_objectSpread","oneOf","transition","oneOfType","bool","shape","appear","node","onEnter","func","onEntered","onEntering","onExit","onExited","onExiting","show","arrayOf","element","undefined"],"sources":["../../src/Alert/index.jsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport BaseAlert from 'react-bootstrap/Alert';\nimport divWithClassName from 'react-bootstrap/divWithClassName';\nimport { FormattedMessage } from 'react-intl';\nimport { useMediaQuery } from 'react-responsive';\nimport Icon from '../Icon';\nimport breakpoints from '../utils/breakpoints';\nimport Button from '../Button';\nimport ActionRow from '../ActionRow';\n\nexport const ALERT_CLOSE_LABEL_TEXT = 'Dismiss';\n\nconst Alert = React.forwardRef(({\n  children,\n  icon,\n  actions,\n  dismissible,\n  onClose,\n  closeLabel,\n  stacked,\n  ...props\n}, ref) => {\n  const [isStacked, setIsStacked] = useState(stacked);\n  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });\n  const actionButtonSize = 'sm';\n\n  useEffect(() => {\n    if (isExtraSmall) {\n      setIsStacked(true);\n    } else {\n      setIsStacked(stacked);\n    }\n  }, [isExtraSmall, stacked]);\n\n  const cloneActionElement = useCallback(\n    (Action) => {\n      const addtlActionProps = { size: actionButtonSize, key: Action.props.children };\n      return React.cloneElement(Action, addtlActionProps);\n    },\n    [],\n  );\n\n  return (\n    <BaseAlert\n      {...props}\n      className={classNames('alert-content', props.className)}\n      ref={ref}\n    >\n      {icon && <Icon src={icon} className=\"alert-icon\" />}\n      <div\n        className={classNames({\n          'pgn__alert-message-wrapper': !isStacked,\n          'pgn__alert-message-wrapper-stacked': isStacked,\n        })}\n      >\n        <div className=\"alert-message-content\">\n          {children}\n        </div>\n        {(dismissible || actions?.length > 0) && (\n          <ActionRow className=\"pgn__alert-actions\">\n            <ActionRow.Spacer />\n            {dismissible && (\n              <Button\n                size={actionButtonSize}\n                variant=\"tertiary\"\n                onClick={onClose}\n              >\n                {closeLabel || (\n                  <FormattedMessage\n                    id=\"pgn.Alert.closeLabel\"\n                    defaultMessage=\"Dismiss\"\n                    description=\"Label of a close button on Alert component\"\n                  />\n                )}\n              </Button>\n            )}\n            {actions && actions.map(cloneActionElement)}\n          </ActionRow>\n        )}\n      </div>\n    </BaseAlert>\n  );\n});\n\n// This is needed to display a default prop for Alert.Heading element\n// Copied from react-bootstrap since BaseAlert.Heading component doesn't have defaultProps,\n// so there seems to be no other way of providing correct default prop for base element\nconst DivStyledAsH4 = divWithClassName('h4');\nDivStyledAsH4.displayName = 'DivStyledAsH4';\n\nfunction AlertHeading(props) {\n  return <BaseAlert.Heading {...props} />;\n}\nfunction AlertLink(props) {\n  return <BaseAlert.Link {...props} />;\n}\n\nconst commonPropTypes = {\n  /** Specifies the base element */\n  as: PropTypes.elementType,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nAlertLink.propTypes = commonPropTypes;\nAlertHeading.propTypes = commonPropTypes;\n\nAlertLink.defaultProps = {\n  as: 'a',\n  bsPrefix: 'alert-link',\n};\n\nAlertHeading.defaultProps = {\n  as: DivStyledAsH4,\n  bsPrefix: 'alert-heading',\n};\n\nAlert.propTypes = {\n  ...BaseAlert.propTypes,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n  /** Specifies variant to use. */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light']),\n  /**\n   * Animate the entering and exiting of the Alert. `true` will use the `<Fade>` transition,\n   * more detailed customization is also provided.\n   */\n  transition: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({\n    in: PropTypes.bool,\n    appear: PropTypes.bool,\n    children: PropTypes.node,\n    onEnter: PropTypes.func,\n    onEntered: PropTypes.func,\n    onEntering: PropTypes.func,\n    onExit: PropTypes.func,\n    onExited: PropTypes.func,\n    onExiting: PropTypes.func,\n  })]),\n  /** Docstring for the children prop */\n  children: PropTypes.node,\n  /** Docstring for the icon prop... Icon that will be shown in the alert */\n  icon: PropTypes.func,\n  /** Whether the alert is shown. */\n  show: PropTypes.bool,\n  /** Whether the alert is dismissible. Defaults to true. */\n  dismissible: PropTypes.bool,\n  /** Optional callback function for when the alert it dismissed. */\n  onClose: PropTypes.func,\n  /** Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true. */\n  actions: PropTypes.arrayOf(PropTypes.element),\n  /** Position of the dismiss and call-to-action buttons. Defaults to ``false``. */\n  stacked: PropTypes.bool,\n  /** Sets the text for alert close button, defaults to 'Dismiss'. */\n  closeLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nAlert.defaultProps = {\n  ...BaseAlert.defaultProps,\n  children: undefined,\n  icon: undefined,\n  actions: undefined,\n  dismissible: false,\n  onClose: () => {},\n  closeLabel: undefined,\n  show: true,\n  stacked: false,\n};\n\nAlert.Heading = AlertHeading;\nAlert.Link = AlertLink;\n\nexport default Alert;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useState","PropTypes","classNames","BaseAlert","divWithClassName","FormattedMessage","useMediaQuery","Icon","breakpoints","Button","ActionRow","ALERT_CLOSE_LABEL_TEXT","Alert","forwardRef","_ref","ref","children","icon","actions","dismissible","onClose","closeLabel","stacked","props","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","isStacked","setIsStacked","isExtraSmall","maxWidth","extraSmall","actionButtonSize","cloneActionElement","Action","addtlActionProps","size","key","cloneElement","createElement","_extends","className","src","length","Spacer","variant","onClick","id","defaultMessage","description","map","DivStyledAsH4","displayName","AlertHeading","Heading","AlertLink","Link","commonPropTypes","as","elementType","bsPrefix","string","propTypes","defaultProps","_objectSpread","oneOf","transition","oneOfType","bool","shape","appear","node","onEnter","func","onEntered","onEntering","onExit","onExited","onExiting","show","arrayOf","element","undefined"],"sources":["../../src/Alert/index.jsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport BaseAlert from 'react-bootstrap/Alert';\nimport divWithClassName from 'react-bootstrap/divWithClassName';\nimport { FormattedMessage } from 'react-intl';\nimport { useMediaQuery } from 'react-responsive';\nimport Icon from '../Icon';\nimport breakpoints from '../utils/breakpoints';\nimport Button from '../Button';\nimport ActionRow from '../ActionRow';\n\nexport const ALERT_CLOSE_LABEL_TEXT = 'Dismiss';\n\nconst Alert = React.forwardRef(({\n  children,\n  icon,\n  actions,\n  dismissible,\n  onClose,\n  closeLabel,\n  stacked,\n  ...props\n}, ref) => {\n  const [isStacked, setIsStacked] = useState(stacked);\n  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });\n  const actionButtonSize = 'sm';\n\n  useEffect(() => {\n    if (isExtraSmall) {\n      setIsStacked(true);\n    } else {\n      setIsStacked(stacked);\n    }\n  }, [isExtraSmall, stacked]);\n\n  const cloneActionElement = useCallback(\n    (Action) => {\n      const addtlActionProps = { size: actionButtonSize, key: Action.props.children };\n      return React.cloneElement(Action, addtlActionProps);\n    },\n    [],\n  );\n\n  return (\n    <BaseAlert\n      {...props}\n      className={classNames('alert-content', props.className)}\n      ref={ref}\n    >\n      {icon && <Icon src={icon} className=\"alert-icon\" />}\n      <div\n        className={classNames({\n          'pgn__alert-message-wrapper': !isStacked,\n          'pgn__alert-message-wrapper-stacked': isStacked,\n        })}\n      >\n        <div className=\"alert-message-content\">\n          {children}\n        </div>\n        {(dismissible || actions?.length > 0) && (\n          <ActionRow className=\"pgn__alert-actions\">\n            <ActionRow.Spacer />\n            {dismissible && (\n              <Button\n                size={actionButtonSize}\n                variant=\"tertiary\"\n                onClick={onClose}\n              >\n                {closeLabel || (\n                  <FormattedMessage\n                    id=\"pgn.Alert.closeLabel\"\n                    defaultMessage=\"Dismiss\"\n                    description=\"Label of a close button on Alert component\"\n                  />\n                )}\n              </Button>\n            )}\n            {actions && actions.map(cloneActionElement)}\n          </ActionRow>\n        )}\n      </div>\n    </BaseAlert>\n  );\n});\n\n// This is needed to display a default prop for Alert.Heading element\n// Copied from react-bootstrap since BaseAlert.Heading component doesn't have defaultProps,\n// so there seems to be no other way of providing correct default prop for base element\nconst DivStyledAsH4 = divWithClassName('h4');\nDivStyledAsH4.displayName = 'DivStyledAsH4';\n\nfunction AlertHeading(props) {\n  return <BaseAlert.Heading {...props} />;\n}\nfunction AlertLink(props) {\n  return <BaseAlert.Link {...props} />;\n}\n\nconst commonPropTypes = {\n  /** Specifies the base element */\n  as: PropTypes.elementType,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nAlertLink.propTypes = commonPropTypes;\nAlertHeading.propTypes = commonPropTypes;\n\nAlertLink.defaultProps = {\n  as: 'a',\n  bsPrefix: 'alert-link',\n};\n\nAlertHeading.defaultProps = {\n  as: DivStyledAsH4,\n  bsPrefix: 'alert-heading',\n};\n\nAlert.propTypes = {\n  ...BaseAlert.propTypes,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n  /** Specifies variant to use. */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light']),\n  /**\n   * Animate the entering and exiting of the Alert. `true` will use the `<Fade>` transition,\n   * more detailed customization is also provided.\n   */\n  transition: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({\n    in: PropTypes.bool,\n    appear: PropTypes.bool,\n    children: PropTypes.node,\n    onEnter: PropTypes.func,\n    onEntered: PropTypes.func,\n    onEntering: PropTypes.func,\n    onExit: PropTypes.func,\n    onExited: PropTypes.func,\n    onExiting: PropTypes.func,\n  })]),\n  /** Docstring for the children prop */\n  children: PropTypes.node,\n  /** Docstring for the icon prop... Icon that will be shown in the alert */\n  icon: PropTypes.func,\n  /** Whether the alert is shown. */\n  show: PropTypes.bool,\n  /** Whether the alert is dismissible. Defaults to true. */\n  dismissible: PropTypes.bool,\n  /** Optional callback function for when the alert it dismissed. */\n  onClose: PropTypes.func,\n  /** Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true. */\n  actions: PropTypes.arrayOf(PropTypes.element),\n  /** Position of the dismiss and call-to-action buttons. Defaults to ``false``. */\n  stacked: PropTypes.bool,\n  /** Sets the text for alert close button, defaults to 'Dismiss'. */\n  closeLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nAlert.defaultProps = {\n  ...BaseAlert.defaultProps,\n  children: undefined,\n  icon: undefined,\n  actions: undefined,\n  dismissible: false,\n  onClose: () => {},\n  closeLabel: undefined,\n  show: true,\n  stacked: false,\n};\n\nAlert.Heading = AlertHeading;\nAlert.Link = AlertLink;\n\nexport default Alert;\n"],"mappings":"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","ignoreList":[]}

package/dist/Alert/index.scss

@@ -1,5 +1,3 @@
-@import "variables";
-
 //
 // Override Bootstrap's alert definition.
 // We do this to get more control over colors
@@ -12,11 +10,13 @@
 
 .alert {
   position: relative;
-  padding: $alert-padding-y $alert-padding-x;
-  margin-bottom: $alert-margin-bottom;
-  border: $alert-border-width solid transparent;
+  padding: var(--pgn-spacing-alert-padding-y) var(--pgn-spacing-alert-padding-x);
+  margin-bottom: var(--pgn-spacing-alert-margin-bottom);
+  border: var(--pgn-size-alert-border-width) solid var(--pgn-alert-border-color, transparent);
+  color: inherit;
+  background-color: var(--pgn-alert-bg, transparent);
 
-  @include border-radius($alert-border-radius);
+  @include border-radius(var(--pgn-size-alert-border-radius));
   @include pgn-box-shadow(1, "down");
 
   .alert-message-content > :last-child {
@@ -24,8 +24,9 @@
   }
 
   .alert-icon {
+    color: var(--pgn-alert-icon-color, inherit);
     float: left;
-    margin-inline-end: $alert-icon-space;
+    margin-inline-end: var(--pgn-spacing-alert-icon-space);
     width: 1.5rem;
     height: 1.5rem;
     flex-shrink: 0;
@@ -34,17 +35,17 @@
 
 // Headings for larger alerts
 .alert-heading {
-  // Specified to prevent conflicts of changing $headings-color
-  color: $alert-title-color;
+  // Specified to prevent conflicts of changing var(--pgn-color-headings-base)
+  color: var(--pgn-color-alert-title);
   display: flex;
 }
 
 // added to align content and icon
 .alert-content {
   display: flex;
-  font-size: $alert-font-size;
-  line-height: $alert-line-height;
-  color: $alert-content-color;
+  font-size: var(--pgn-typography-alert-font-size);
+  line-height: var(--pgn-typography-alert-line-height);
+  color: var(--pgn-color-alert-content);
   text-align: start;
 
   div {
@@ -54,7 +55,7 @@
 
 // Provide class for links that match alerts
 .alert-link {
-  font-weight: $alert-link-font-weight;
+  font-weight: var(--pgn-typography-alert-font-weight-link);
   text-decoration: underline;
 
   &:hover {
@@ -66,16 +67,16 @@
 //
 // Expand the right padding and account for the close button's positioning.
 
-// Baking in $close-font-size: $font-size-base * 1.5 !default; to avoid any dependency
+// Baking in $close-font-size: var(--pgn-typography-font-size-base) * 1.5 !default; to avoid any dependency
 .alert-dismissible {
-  padding-right: ($font-size-base * 1.5) + $alert-padding-x * 2;
+  padding-right: calc((var(--pgn-typography-font-size-base) * 1.5) + (var(--pgn-spacing-alert-padding-x) * 2));
 
   // Adjust close link position
   .close {
     position: absolute;
     top: 0;
     right: 0;
-    padding: $alert-padding-y $alert-padding-x;
+    padding: var(--pgn-spacing-alert-padding-y) var(--pgn-spacing-alert-padding-x);
     color: inherit;
   }
 }
@@ -85,28 +86,36 @@
   align-items: center;
 
   .pgn__alert-actions {
-    margin-inline-start: $alert-actions-gap;
+    margin-inline-start: var(--pgn-spacing-alert-actions-gap);
   }
 }
 
-.pgn__alert-message-wrapper-stacked {
-  .pgn__alert-actions {
-    margin-top: $alert-actions-gap;
-  }
+.pgn__alert-message-wrapper-stacked .pgn__alert-actions {
+  margin-top: var(--pgn-spacing-alert-actions-gap);
 }
 
 // Alternate styles
-//
-// Generate contextual modifier classes for coloring the alert.
 
-@each $color, $value in $theme-colors {
-  .alert-#{$color} {
-    color: inherit;
-    background-color: theme-color($color, "background");
-    border-color: theme-color($color, "border");
+.alert-success {
+  --pgn-alert-bg: var(--pgn-color-alert-bg-success);
+  --pgn-alert-border-color: var(--pgn-color-alert-border-success);
+  --pgn-alert-icon-color: var(--pgn-color-alert-icon-success);
+}
 
-    .alert-icon {
-      color: theme-color($color, "default");
-    }
-  }
+.alert-info {
+  --pgn-alert-bg: var(--pgn-color-alert-bg-info);
+  --pgn-alert-border-color: var(--pgn-color-alert-border-info);
+  --pgn-alert-icon-color: var(--pgn-color-alert-icon-info);
+}
+
+.alert-danger {
+  --pgn-alert-bg: var(--pgn-color-alert-bg-danger);
+  --pgn-alert-border-color: var(--pgn-color-alert-border-danger);
+  --pgn-alert-icon-color: var(--pgn-color-alert-icon-danger);
+}
+
+.alert-warning {
+  --pgn-alert-bg: var(--pgn-color-alert-bg-warning);
+  --pgn-alert-border-color: var(--pgn-color-alert-border-warning);
+  --pgn-alert-icon-color: var(--pgn-color-alert-icon-warning);
 }