@openedx/paragon 23.8.0 → 23.10.0

package/lib/__tests__/build-scss.test.js

@@ -143,4 +143,18 @@ describe('buildScssCommand', () => {
       expect.any(Object),
     );
   });
+
+  it('should exclude core properly', () => {
+    buildScssCommand(['--excludeCore']);
+
+    expect(sass.compile).not.toHaveBeenCalledWith(
+      expect.stringContaining('core.scss'),
+      expect.any(Object),
+    );
+
+    expect(fs.readdirSync).toHaveBeenCalledWith(
+      expect.stringContaining('themes'),
+      expect.objectContaining({ withFileTypes: true }),
+    );
+  });
 });

package/lib/build-scss.js

@@ -154,6 +154,7 @@ const compileAndWriteStyleSheets = ({
 function buildScssCommand(commandArgs) {
   const defaultArgs = {
     corePath: path.resolve(process.cwd(), 'styles/scss/core/core.scss'),
+    excludeCore: false,
     themesPath: path.resolve(process.cwd(), 'styles/css/themes'),
     outDir: './dist',
     defaultThemeVariants: 'light',
@@ -161,17 +162,20 @@ function buildScssCommand(commandArgs) {
 
   const {
     corePath,
+    excludeCore,
     themesPath,
     outDir,
     defaultThemeVariants,
-  } = minimist(commandArgs, { default: defaultArgs });
+  } = minimist(commandArgs, { default: defaultArgs, boolean: ['excludeCore'] });
 
   // Core CSS
-  compileAndWriteStyleSheets({
-    name: 'core',
-    stylesPath: corePath,
-    outDir,
-  });
+  if (!excludeCore) {
+    compileAndWriteStyleSheets({
+      name: 'core',
+      stylesPath: corePath,
+      outDir,
+    });
+  }
 
   // Theme Variants CSS
   fs.readdirSync(themesPath, { withFileTypes: true })

package/lib/build-tokens.js

@@ -141,6 +141,14 @@ async function buildTokensCommand(commandArgs) {
               outputReferences,
             },
           },
+          {
+            format: 'css/component-button-variant-overrides',
+            destination: `themes/${themeVariant}/overrides/component-button-variants.css`,
+            filter: transformSourceTokensOnly ? 'isSource' : undefined,
+            options: {
+              outputReferences,
+            },
+          },
         ],
       },
     },

package/package.json

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

package/src/Button/_mixins.scss

@@ -16,7 +16,29 @@
   @include border-radius($button-border-radius, 0);
 }
 
-// Mixin for button states that affect border radius
+/// Sets the CSS custom properties for a button variant
+/// @param {String} $variant - The variant name (e.g., 'primary', 'outline-primary')
+@mixin button-variant($variant) {
+  --pgn-btn-color: var(--pgn-color-btn-text-#{$variant});
+  --pgn-btn-bg: var(--pgn-color-btn-bg-#{$variant});
+  --pgn-btn-border-color: var(--pgn-color-btn-border-#{$variant});
+  --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-#{$variant});
+  --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-#{$variant});
+  --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-#{$variant});
+  --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-#{$variant});
+  --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-#{$variant});
+  --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-#{$variant});
+  --pgn-btn-active-color: var(--pgn-color-btn-active-text-#{$variant});
+  --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-#{$variant});
+  --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-#{$variant});
+  --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-#{$variant});
+  --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-#{$variant});
+  --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-#{$variant});
+  --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-#{$variant});
+}
+
+/// Mixin for button states that affect border radius
+/// @param {String} $side - The side of the button to affect ('left' or 'right')
 @mixin button-border-radius-0($side) {
   @if $side == 'right' {
     @include border-right-radius(0);
@@ -26,7 +48,7 @@
     @include border-left-radius(0);
   }
   
-  // Handle pseudo-classes
+  /// Handle pseudo-classes
   &.btn:not(:disabled, .disabled):focus,
   &.btn:not(:disabled, .disabled):focus::before {
     @if $side == 'left' {
@@ -49,7 +71,7 @@
     }
   }
   
-  // Handle .active class
+  /// Handle .active class
   &.btn:not(:disabled, .disabled).active,
   &.btn:not(:disabled, .disabled).active::before {
     @if $side == 'right' {