newspack-components 4.2.0 → 4.3.0

package/dist/cjs/action-card/index.js

@@ -36,13 +36,14 @@ var _jsxRuntime = require("react/jsx-runtime");
  * @return {JSX.Element} ActionCard component.
  */const ActionCard = ({
   badge,
-  badgeLevel = 'info',
+  badgeLevel,
   className,
   checkbox,
   children,
   collapse,
   disabled,
   title,
+  heading = 2,
   description,
   handoff,
   editLink,
@@ -67,11 +68,13 @@ var _jsxRuntime = require("react/jsx-runtime");
   titleLink,
   toggleChecked = false,
   toggleOnChange,
+  togglePosition = 'leading',
   hasGreyHeader,
   hasWhiteHeader,
   noBorder,
   isPending,
   expandable = false,
+  isExpanded,
   isButtonEnabled = false,
   // Draggable props. All are required to enable drag sorting.
   draggable = false,
@@ -79,10 +82,15 @@ var _jsxRuntime = require("react/jsx-runtime");
   dragWrapperRef,
   onDragCallback
 }) => {
-  const [expanded, setExpanded] = (0, _element.useState)(false);
+  const [expanded, setExpanded] = (0, _element.useState)(Boolean(isExpanded));
   const [dragging, setDragging] = (0, _element.useState)(false);
   const [targetIndex, setTargetIndex] = (0, _element.useState)(null);
   const [dragRef, setDragRef] = (0, _element.useState)(null);
+  (0, _element.useEffect)(() => {
+    if (typeof isExpanded === 'boolean') {
+      setExpanded(isExpanded);
+    }
+  }, [isExpanded]);
   (0, _element.useEffect)(() => {
     if (dragWrapperRef && !dragRef) {
       setDragRef(dragWrapperRef);
@@ -104,16 +112,19 @@ var _jsxRuntime = require("react/jsx-runtime");
     onClick: () => toggleOnChange(!toggleChecked),
     tabIndex: '0'
   } : {};
+  const togglePositionClass = togglePosition === 'trailing' ? 'is-toggle-trailing' : 'is-toggle-leading';
   const hasInternalLink = href && href.indexOf('http') !== 0;
   const isDisplayingSecondaryAction = secondaryActionText && onSecondaryActionClick;
   const badges = !Array.isArray(badge) && badge ? [badge] : badge;
-  const Component = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  const HeadingTag = `h${heading}`;
+  const cardContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "newspack-action-card__region newspack-action-card__region-top",
       children: [toggleOnChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
         checked: toggleChecked,
         onChange: toggleOnChange,
-        disabled: disabled
+        disabled: disabled,
+        className: togglePositionClass
       }), image && !toggleOnChange && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "newspack-action-card__region newspack-action-card__region-left",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
@@ -137,7 +148,7 @@ var _jsxRuntime = require("react/jsx-runtime");
           columns: 1,
           gutter: 8,
           noMargin: true,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(HeadingTag, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
               className: "newspack-action-card__title",
               ...titleProps,
@@ -214,10 +225,10 @@ var _jsxRuntime = require("react/jsx-runtime");
         isWarning: true,
         rawHTML: notificationHTML
       })]
-    }), children && (expandable && expanded || !expandable) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), children && (expandable && expanded || !expandable) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "newspack-action-card__region-children",
       children: children
-    })]
+    }) : null]
   });
   if (draggable && dragRef?.current && typeof dragIndex === 'number' && onDragCallback && id) {
     let wrapperRect = dragRef.current.getBoundingClientRect();
@@ -288,9 +299,7 @@ var _jsxRuntime = require("react/jsx-runtime");
               onDragStart: onDraggableStart,
               onDragEnd: onDraggableEnd,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-                icon: _icons.dragHandle,
-                height: 18,
-                width: 18
+                icon: _icons.dragHandle
               })
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               className: "movers",
@@ -306,7 +315,7 @@ var _jsxRuntime = require("react/jsx-runtime");
                 label: (0, _i18n.__)('Move one position down', 'newspack-plugin')
               })]
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {})]
+          }), cardContent]
         })
       })
     });
@@ -316,7 +325,7 @@ var _jsxRuntime = require("react/jsx-runtime");
     onClick: simple && onClick,
     id: id !== null && id !== void 0 ? id : null,
     noBorder: noBorder,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {})
+    children: cardContent
   });
 };
 var _default = exports.default = ActionCard;

package/dist/cjs/action-card/style.scss

@@ -260,6 +260,16 @@
 			@media screen and (min-width: 744px) {
 				margin-bottom: 0;
 				margin-right: 24px;
+
+				&.is-toggle-trailing {
+					margin-left: 24px;
+					margin-right: 0;
+					order: 999;
+				}
+			}
+
+			label {
+				display: none;
 			}
 
 			.components-base-control__field {
@@ -433,13 +443,21 @@
 			text-decoration: inherit;
 		}
 
-		.newspack-action-card__region-children {
-			border-top: 1px solid wp-colors.$gray-100;
+		> .newspack-action-card__region-children {
+			border-top: 1px solid wp-colors.$gray-300;
 			padding-top: 24px;
 
 			+ .newspack-action-card__region-children {
 				border-top: none;
 			}
+
+			> * + * {
+				margin-top: 24px !important;
+			}
+
+			.newspack-action-card__region-children:has(> div:not(:empty)) {
+				margin-top: 16px;
+			}
 		}
 
 		&.is-medium .newspack-action-card__region-children {
@@ -469,6 +487,11 @@
 			margin-left: 8px;
 		}
 	}
+
+	hr:not(.newspack-divider) {
+		background: wp-colors.$gray-100;
+		margin: 0;
+	}
 }
 
 .newspack-card {

package/dist/cjs/autocomplete-tokenfield/index.js

@@ -143,7 +143,7 @@ var _jsxRuntime = require("react/jsx-runtime");
         Object.keys(validValues).forEach(key => {
           if (validValues[key] === label) {
             // Preserve numeric or string type of values. Object.keys will convert numbers to strings.
-            const value = isNaN(parseInt(key)) ? key.toString() : parseInt(key);
+            const value = /^\d+$/.test(key.toString()) ? parseInt(key) : key.toString();
             acc.push({
               value,
               label
@@ -153,7 +153,7 @@ var _jsxRuntime = require("react/jsx-runtime");
         return acc;
       }, []);
     }
-    return labels.map(label => Object.keys(validValues).map(key => isNaN(parseInt(key)) ? key.toString() : parseInt(key)).find(key => validValues[key] === label));
+    return labels.map(label => Object.keys(validValues).map(key => /^\d+$/.test(key.toString()) ? parseInt(key) : key.toString()).find(key => validValues[key] === label));
   }
 
   /**

package/dist/cjs/autocomplete-with-latest-posts/index.js

@@ -0,0 +1,289 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
+var _components = require("@wordpress/components");
+var _htmlEntities = require("@wordpress/html-entities");
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _url = require("@wordpress/url");
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+const AutocompleteWithLatestPosts = ({
+  fetchSuggestions = false,
+  // If passed, will use this function to fetch suggestions data.
+  help = (0, _i18n.__)('Begin typing search term, click autocomplete result to select.', 'newspack-plugin'),
+  hideHelp = true,
+  // If true, all help text will be hidden.
+  hideFormTokenHelp = true,
+  // If true, hides FormTokenField's built-in help text.
+  label = (0, _i18n.__)('Search', 'newspack-plugin'),
+  maxItemsToSuggest = 0,
+  // If passed, will be used to determine "load more" state. Necessary if you want "load more" functionality when using a custom `fetchSuggestions` function.
+  multiSelect = false,
+  // If true, component can select multiple values at once.
+  onChange = false,
+  // Function to call when selections change.
+  selectedItems = [],
+  // Array of saved items.
+  suggestionsToFetch = 20 // Number of suggestions to fetch per query.
+}) => {
+  const [isLoading, setIsLoading] = (0, _element.useState)(true);
+  const [isLoadingMore, setIsLoadingMore] = (0, _element.useState)(false);
+  const [suggestions, setSuggestions] = (0, _element.useState)([]);
+  const [maxSuggestions, setMaxSuggestions] = (0, _element.useState)(0);
+  const [searchSuggestions, setSearchSuggestions] = (0, _element.useState)([]);
+  const [validValues, setValidValues] = (0, _element.useState)({});
+  const [isSearching, setIsSearching] = (0, _element.useState)(false);
+  // Leaving this in here so we can expand to use different post types in the future; right now it defaults to 'post'.
+  const postTypeToSearch = 'post';
+  const classNames = ['newspack-autocomplete-with-latest-posts'];
+  if (hideFormTokenHelp) {
+    classNames.push('hide-form-token-help');
+  }
+  if (hideHelp) {
+    classNames.push('hide-help');
+  }
+
+  /**
+   * Debounced function to update search suggestions.
+   */
+  const debouncedUpdateSuggestions = (0, _debounce.default)(input => {
+    if (!input || input.length < 2) {
+      setSearchSuggestions([]);
+      setIsSearching(false);
+      return;
+    }
+    setIsSearching(true);
+    handleFetchSuggestions(input, 0, postTypeToSearch).then(_suggestions => {
+      setSearchSuggestions(_suggestions);
+      // Update valid values for token conversion
+      const newValidValues = {
+        ...validValues
+      };
+      _suggestions.forEach(suggestion => {
+        newValidValues[suggestion.value] = suggestion.label;
+      });
+      setValidValues(newValidValues);
+    }).finally(() => setIsSearching(false));
+  }, 500);
+
+  /**
+   * Fetch recent posts to show as suggestions.
+   */
+  (0, _element.useEffect)(() => {
+    setIsLoading(true);
+    handleFetchSuggestions(null, 0, postTypeToSearch).then(_suggestions => {
+      if (0 < _suggestions.length) {
+        setSuggestions(_suggestions);
+        // Update valid values for token conversion
+        const newValidValues = {
+          ...validValues
+        };
+        _suggestions.forEach(suggestion => {
+          newValidValues[suggestion.value] = suggestion.label;
+        });
+        setValidValues(newValidValues);
+      }
+    }).finally(() => setIsLoading(false));
+  }, []);
+
+  /**
+   * Fetch more suggestions.
+   */
+  (0, _element.useEffect)(() => {
+    if (isLoadingMore) {
+      handleFetchSuggestions(null, suggestions.length, postTypeToSearch).then(_suggestions => {
+        if (0 < _suggestions.length) {
+          setSuggestions(suggestions.concat(_suggestions));
+        }
+      }).finally(() => setIsLoadingMore(false));
+    }
+  }, [isLoadingMore]);
+
+  /**
+   * If passed a `fetchSuggestions` prop, use that, otherwise, build it based on the selected post type.
+   */
+  const handleFetchSuggestions = fetchSuggestions ? fetchSuggestions : async (search = null, offset = 0, searchSlug = null) => {
+    const postTypeSlug = searchSlug || postTypeToSearch;
+    const endpoint = 'post' === postTypeSlug || 'page' === postTypeSlug ? postTypeSlug + 's' // Default post type endpoints are plural.
+    : postTypeSlug; // Custom post type endpoints are singular.
+    const response = await (0, _apiFetch.default)({
+      parse: false,
+      path: (0, _url.addQueryArgs)('/wp/v2/' + endpoint, {
+        search,
+        offset,
+        per_page: suggestionsToFetch,
+        _fields: 'id,title'
+      })
+    });
+    const total = parseInt(response.headers.get('x-wp-total') || 0);
+    const posts = await response.json();
+    setMaxSuggestions(total);
+
+    // Format suggestions for FormTokenField display.
+    return posts.reduce((acc, post) => {
+      acc.push({
+        value: parseInt(post.id),
+        label: (0, _htmlEntities.decodeEntities)(post?.title.rendered) || (0, _i18n.__)('(no title)', 'newspack-plugin')
+      });
+      return acc;
+    }, []);
+  };
+
+  /**
+   * Get labels for token values.
+   */
+  const getLabelsForValues = values => {
+    return values.reduce((accumulator, value) => {
+      if (!value) {
+        return accumulator;
+      }
+      if (value.label) {
+        return [...accumulator, value.label];
+      }
+      return validValues[value] ? [...accumulator, validValues[value]] : accumulator;
+    }, []);
+  };
+
+  /**
+   * Get values for token labels.
+   */
+  const getValuesForLabels = labels => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    return labels.reduce((acc, label) => {
+      Object.keys(validValues).forEach(key => {
+        if (validValues[key] === label) {
+          const value = isNaN(parseInt(key)) ? key.toString() : parseInt(key);
+          acc.push({
+            value,
+            label
+          });
+        }
+      });
+      return acc;
+    }, []);
+  };
+
+  /**
+   * Handle FormTokenField onChange.
+   */
+  const handleTokenChange = tokenStrings => {
+    const newSelections = getValuesForLabels(tokenStrings);
+
+    // If only allowing one selection, just return the one selected item.
+    if (!multiSelect) {
+      const newSelection = newSelections[newSelections.length - 1]; // Get the last selected item
+      if (newSelection) {
+        return onChange([{
+          ...newSelection,
+          postType: postTypeToSearch
+        }]);
+      }
+      return onChange([]);
+    }
+
+    // For multi-select, include currently selected post type in selection results.
+    onChange(newSelections.map(selection => ({
+      ...selection,
+      postType: postTypeToSearch
+    })));
+  };
+
+  /**
+   * Get tokens for FormTokenField.
+   */
+  const getTokens = () => {
+    return getLabelsForValues(selectedItems);
+  };
+
+  /**
+   * Render a single suggestion object that can be clicked to select it immediately.
+   *
+   * @param {Object} suggestion Suggestion object with value and label keys.
+   */
+  const renderSuggestion = suggestion => {
+    if (multiSelect) {
+      const isSelected = !!selectedItems.find(_selection => parseInt(_selection.value) === parseInt(suggestion.value) && _selection.label === suggestion.label);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
+        checked: isSelected,
+        onChange: () => {
+          // For multi-select, we need to toggle the selection
+          const currentTokens = getTokens();
+          const suggestionLabel = suggestion.label;
+          if (isSelected) {
+            // Remove the suggestion
+            const newTokens = currentTokens.filter(token => token !== suggestionLabel);
+            handleTokenChange(newTokens);
+          } else {
+            // Add the suggestion
+            handleTokenChange([...currentTokens, suggestionLabel]);
+          }
+        },
+        label: suggestion.label
+      }, suggestion.value);
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+      isLink: true,
+      onClick: () => handleTokenChange([...getTokens(), suggestion.label]),
+      children: suggestion.label
+    }, suggestion.value);
+  };
+
+  /**
+   * Render a list of suggestions that can be clicked to select instead of searching by title.
+   */
+  const renderSuggestions = () => {
+    if (0 === suggestions.length) {
+      return null;
+    }
+    const className = multiSelect ? 'newspack-autocomplete-with-latest-posts__search-suggestions-multiselect' : 'newspack-autocomplete-with-latest-posts__search-suggestions';
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "newspack-autocomplete-with-latest-posts__search-suggestions-container",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: "newspack-autocomplete-with-suggestions__label",
+          children: (0, _i18n.__)('Latest Posts', 'newspack-plugin')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: className,
+          children: [suggestions.map(renderSuggestion), suggestions.length < (maxItemsToSuggest || maxSuggestions) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+            disabled: isLoadingMore,
+            isSecondary: true,
+            onClick: () => setIsLoadingMore(true),
+            children: isLoadingMore ? (0, _i18n.__)('Loading…', 'newspack-plugin') : (0, _i18n.__)('Load more', 'newspack-plugin')
+          })]
+        })]
+      })
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: classNames.join(' '),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "newspack-autocomplete-with-latest-posts__input-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FormTokenField, {
+        value: getTokens(),
+        suggestions: searchSuggestions.map(suggestion => suggestion.label),
+        onChange: handleTokenChange,
+        onInputChange: debouncedUpdateSuggestions,
+        label: label,
+        help: !hideHelp && help,
+        __next40pxDefaultSize: true,
+        __nextHasNoMarginBottom: true
+      }), (isLoading || isSearching) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})]
+    }), renderSuggestions()]
+  });
+};
+var _default = exports.default = AutocompleteWithLatestPosts;

package/dist/cjs/autocomplete-with-latest-posts/style.scss

@@ -0,0 +1,150 @@
+/**
+* Styles for AutocompleteWithLatestPosts component.
+*/
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-autocomplete-with-latest-posts {
+	display: grid;
+	gap: 16px;
+	width: 100%;
+
+	.components-select-control__input {
+		max-width: none;
+	}
+
+	.components-input-control__backdrop {
+		border-color: wp-colors.$gray-700 !important;
+	}
+
+	.newspack-autocomplete-with-latest-posts__label,
+	.components-form-token-field__label,
+	.components-input-control__label,
+	.components-checkbox-control__label {
+		color: wp-colors.$gray-900 !important;
+	}
+
+	.newspack-autocomplete-tokenfield__help {
+		font-size: inherit;
+		margin-bottom: 8px !important;
+	}
+
+	.components-form-token-field {
+		&__input-container {
+			border-color: wp-colors.$gray-700;
+		}
+
+		&__suggestion {
+			padding: 8px;
+		}
+	}
+
+	// Hide the built-in "Separate with commas or the Enter key." help text when hideFormTokenHelp is true
+	&.hide-form-token-help .components-form-token-field__help {
+		display: none;
+	}
+
+	p.newspack-autocomplete-with-latest-posts__label {
+		font-size: inherit;
+		margin: 0 0 8px;
+	}
+
+	&__selected-items {
+		border-bottom: 1px solid wp-colors.$gray-700;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+		margin-bottom: 16px;
+		padding-bottom: 12px;
+
+		p.newspack-autocomplete-with-latest-posts__label {
+			flex: 0 0 100%;
+			margin: 0;
+		}
+	}
+
+	&__selected-item-button.components-button.is-tertiary {
+		background-color: wp-colors.$gray-300;
+		border-radius: 2px;
+		color: wp-colors.$gray-900;
+		font-size: 13px;
+		height: auto;
+		margin: 0;
+		padding-left: 8px;
+		padding-right: 8px;
+
+		&::after {
+			content: "✕";
+			margin-left: 8px;
+		}
+
+		&:hover {
+			box-shadow: none;
+			color: black;
+		}
+	}
+
+	&__search-suggestions,
+	&__search-suggestions-multiselect {
+		max-height: 220px;
+		overflow: visible auto;
+		margin: 0 -4px;
+		padding: 4px 4px 0;
+
+		.components-button {
+			display: block;
+			line-height: normal;
+			margin: auto;
+
+			&.is-link {
+				color: wp-colors.$gray-900;
+				padding: 8px;
+				text-decoration: none;
+				width: 100%;
+
+				&:active:not(:disabled),
+				&:hover:not(:disabled) {
+					background: wp-colors.$gray-900;
+					background: var(--wp-admin-theme-color);
+					color: white;
+				}
+			}
+			&.is-secondary {
+				margin-bottom: 8px;
+				margin-top: 8px;
+				width: 100%;
+			}
+		}
+	}
+
+	&__search-suggestions {
+		border-radius: 2px;
+		border: 1px solid wp-colors.$gray-700;
+		padding: 0;
+
+		.components-button {
+			line-height: normal;
+
+			&:focus:not(:disabled) {
+				border-radius: 0;
+				box-shadow: inset 0 0 0 1.5px wp-colors.$gray-900;
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			}
+
+			&.is-secondary {
+				width: calc(100% - 16px);
+			}
+		}
+	}
+
+	// Temp: CSS work-around.
+	.newspack-autocomplete-with-suggestions__label {
+		font-size: 11px;
+		font-weight: 500;
+		line-height: 1.4;
+		text-transform: uppercase;
+		display: block;
+		margin: 0 0 8px;
+		padding: 0;
+	}
+}

package/dist/cjs/badge/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./style.scss");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Internal dependencies
+ */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Badge component
+ */
+const Badge = ({
+  text,
+  level = 'default'
+}) => {
+  const classes = (0, _classnames.default)('newspack-badge', `is-${level}`);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: classes,
+    children: text
+  });
+};
+var _default = exports.default = Badge;

package/dist/cjs/badge/style.scss

@@ -0,0 +1,36 @@
+/**
+ * Badge
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../colors/colors.module" as colors;
+
+$badge-colors: (
+	"info": colors.$primary-600,
+	"warning": wp-colors.$alert-yellow,
+	"error": wp-colors.$alert-red,
+	"success": wp-colors.$alert-green,
+);
+
+.newspack-badge {
+	background-color: color-mix(in srgb, wp-colors.$white 90%, var(--base-color));
+	border-radius: 2px;
+	color: color-mix(in srgb, wp-colors.$black 50%, var(--base-color));
+	display: block;
+	flex: 0 0 auto;
+	font-size: 12px;
+	line-height: 1.5;
+	padding: 1px 4px;
+
+	&:where(.is-default) {
+		background-color: wp-colors.$gray-100;
+		color: wp-colors.$gray-800;
+	}
+
+	// Generate color variants
+	@each $type, $color in $badge-colors {
+		&.is-#{$type} {
+			--base-color: #{$color};
+		}
+	}
+}