@patternfly/design-tokens 1.14.3 → 1.14.4

package/build/css/tokens-charts-dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 10 Sep 2025 22:53:00 GMT
+// Generated on Mon, 10 Nov 2025 16:54:18 GMT
 
 :root {
   --pf-t--chart--global--BorderWidth--lg: 8;

package/build/css/tokens-charts.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 10 Sep 2025 22:53:00 GMT
+// Generated on Mon, 10 Nov 2025 16:54:18 GMT
 
 :root {
   --pf-t--chart--global--BorderWidth--lg: 8;

package/build/css/tokens-dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 10 Sep 2025 22:53:00 GMT
+// Generated on Mon, 10 Nov 2025 16:54:18 GMT
 
 :root {
   --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);

package/build/css/tokens-default.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 10 Sep 2025 22:52:59 GMT
+// Generated on Mon, 10 Nov 2025 16:54:18 GMT
 
 :root {
   --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);

package/build/css/tokens-highcontrast-dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 10 Sep 2025 22:53:00 GMT
+// Generated on Mon, 10 Nov 2025 16:54:18 GMT
 
 :root {
   --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);

package/build/css/tokens-highcontrast.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 10 Sep 2025 22:53:00 GMT
+// Generated on Mon, 10 Nov 2025 16:54:18 GMT
 
 :root {
   --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);

package/build/css/tokens-palette.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 10 Sep 2025 22:53:00 GMT
+// Generated on Mon, 10 Nov 2025 16:54:18 GMT
 
 :root {
   --pf-t--color--black: #000000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/design-tokens",
-  "version": "1.14.3",
+  "version": "1.14.4",
   "description": "Define the design tokens for patternfly design system and component library",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -31,20 +31,20 @@
     "access": "public"
   },
   "dependencies": {
-    "@patternfly/react-core": "6.0.0-alpha.94",
+    "@patternfly/react-core": "^6.1",
     "commander": "^12.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8 || ^17 || ^18",
+    "react": "^17 || ^18",
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.95.0",
-    "@patternfly/documentation-framework": "^6.0.0-alpha.66",
-    "@patternfly/patternfly": "6.0.0-alpha.205",
-    "@patternfly/patternfly-a11y": "^4.3.1",
-    "@patternfly/react-code-editor": "6.0.0-alpha.94",
-    "@patternfly/react-table": "6.0.0-alpha.95",
+    "@patternfly/documentation-framework": "^6.1",
+    "@patternfly/patternfly": "^6.1",
+    "@patternfly/patternfly-a11y": "^5.1",
+    "@patternfly/react-code-editor": "^6.1",
+    "@patternfly/react-table": "^6.1",
     "css-loader": "^7.1.2",
     "html-inline-script-webpack-plugin": "^3.2.1",
     "html-webpack-plugin": "^5.6.0",

package/patternfly-docs/content/tokensTable.js

@@ -1,5 +1,17 @@
 import React from 'react';
-import { Flex, FlexItem, Grid, GridItem, Title, capitalize } from '@patternfly/react-core';
+import {
+  Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateActions,
+  Flex,
+  FlexItem,
+  Grid,
+  GridItem,
+  Title,
+  capitalize
+} from '@patternfly/react-core';
 import {
   Table,
   Thead,
@@ -13,11 +25,14 @@ import {
 } from '@patternfly/react-table';
 import { TokensToolbar } from './tokensToolbar';
 import './tokensTable.css';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
-// eslint-disable-next-line camelcase
-import global_spacer_md from '@patternfly/react-tokens/dist/esm/global_spacer_md';
+import c_expandable_section_m_display_lg_PaddingInlineStart from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_display_lg_PaddingInlineStart';
 import LevelUpAltIcon from '@patternfly/react-icons/dist/esm/icons/level-up-alt-icon';
 
+{
+  /* Helper functions */
+}
 // Used to combine data grouped by theme under each token name
 const deepMerge = (target, source) => {
   for (const key in source) {
@@ -28,16 +43,31 @@ const deepMerge = (target, source) => {
   return Object.assign(target || {}, source);
 };
 
+const getTokensFromJson = (tokenJson) => {
+  // parse tokens from json, convert from modules, merge into single allTokens obj
+  const themesArr = Object.keys(tokenJson);
+  const themesObj = themesArr.reduce((acc, cur) => {
+    acc[cur] = JSON.parse(JSON.stringify(tokenJson[cur]));
+    return acc;
+  }, {});
+  return deepMerge(...Object.values(themesObj));
+};
+
 const getTokenChain = (themeTokenData) => {
   let tokenChain = [];
-  let referenceToken = themeTokenData?.references?.[0];
-  while (referenceToken && referenceToken !== undefined) {
-    tokenChain = [...tokenChain, referenceToken.name];
-    if (referenceToken?.references?.[0]) {
-      referenceToken = referenceToken?.references?.[0];
-    } else {
-      tokenChain.push(referenceToken.value);
-      break;
+  // Palette & some color tokens don't have references but we still want to still show their values
+  if (!themeTokenData?.references?.[0]) {
+    tokenChain.push(themeTokenData.value);
+  } else {
+    let referenceToken = themeTokenData?.references?.[0];
+    while (referenceToken && referenceToken !== undefined) {
+      tokenChain = [...tokenChain, referenceToken.name];
+      if (referenceToken?.references?.[0]) {
+        referenceToken = referenceToken?.references?.[0];
+      } else {
+        tokenChain.push(referenceToken.value);
+        break;
+      }
     }
   }
   return tokenChain;
@@ -52,11 +82,13 @@ const showTokenChain = (themeTokenData, hasReferences) => {
         <div
           key={`${index}`}
           style={{
-            padding: `4px 0 4px calc(${global_spacer_md.value} * ${index})`
+            padding: `4px 0 4px calc(${c_expandable_section_m_display_lg_PaddingInlineStart.value} * ${index})`
           }}
         >
           <LevelUpAltIcon style={{ transform: 'rotate(90deg)' }} />
-          <span style={{ paddingInlineStart: global_spacer_md.value }}>{nextValue}</span>
+          <span style={{ paddingInlineStart: c_expandable_section_m_display_lg_PaddingInlineStart.value }}>
+            {nextValue}
+          </span>
         </div>
       ))}
     </div>
@@ -80,26 +112,127 @@ const isSearchMatch = (searchValue, tokenName, tokenData) => {
   );
 };
 
-export const TokensTable = ({ tokenJson, formatThemeText = capitalize }) => {
-  // parse tokens from json, convert from modules, merge into single allTokens obj
-  const themesArr = Object.keys(tokenJson);
-  const themesObj = themesArr.reduce((acc, cur) => {
-    acc[cur] = JSON.parse(JSON.stringify(tokenJson[cur]));
-    return acc;
-  }, {});
-  const allTokens = deepMerge(...Object.values(themesObj));
-  // remove default property which is duplicate of other fields
-  delete allTokens.default;
+const getFilteredTokens = (tokensArr, searchVal) =>
+  tokensArr.filter(([tokenName, tokenData]) => isSearchMatch(searchVal, tokenName, tokenData));
+
+const getIsColor = (value) => /^(#|rgb)/.test(value);
 
+const getCategoryTokensArr = (selectedCategory, categoryTokens) => {
+  // Create array of all tokens/nested tokens in selectedCategory
+  let categoryTokensArr = [];
+  if (!['base', 'semantic'].includes(selectedCategory)) {
+    categoryTokensArr = Object.entries(categoryTokens);
+  } else if (['base', 'semantic'].includes(selectedCategory)) {
+    // base/semantic combine nested subcategory tokens into flattened arr
+    for (var subCategory in categoryTokens) {
+      categoryTokensArr.push(...Object.entries(categoryTokens[subCategory]));
+    }
+  }
+  return categoryTokensArr;
+};
+
+{
+  /* Components */
+}
+const TokenChain = ({ tokenThemesArr }) => (
+  <Tr isExpanded>
+    <Td />
+    <Td colSpan={3}>
+      <ExpandableRowContent>
+        <Grid hasGutter>
+          {tokenThemesArr.map(([themeName, themeToken]) => (
+            <React.Fragment key={themeName}>
+              <GridItem span={2}>{capitalize(themeName)}:</GridItem>
+              <GridItem span={10}>{showTokenChain(themeToken)}</GridItem>
+            </React.Fragment>
+          ))}
+        </Grid>
+      </ExpandableRowContent>
+    </Td>
+  </Tr>
+);
+
+const TokenValue = ({ themeName, themeToken, tokenName }) => {
+  const isColor = getIsColor(themeToken.value);
+  return (
+    <Flex
+      justifyContent={{ default: 'justify-content-space-between' }}
+      flexWrap={{ default: 'nowrap' }}
+      key={`${themeName}-${tokenName}`}
+    >
+      <FlexItem>{capitalize(themeName)}:</FlexItem>
+      {isColor ? (
+        <FlexItem key={`${themeName}_${tokenName}_swatch`} className="pf-v6-l-flex pf-m-column pf-m-align-self-center">
+          <span className="ws-token-swatch" style={{ backgroundColor: themeToken.value }} />
+        </FlexItem>
+      ) : (
+        <div className="pf-v6-l-flex pf-m-column pf-m-align-self-center">{themeToken.value}</div>
+      )}
+    </Flex>
+  );
+};
+
+const TokensTableBody = ({ token, expandedTokens, setExpanded, isSemanticLayer, rowIndex }) => {
+  const [tokenName, tokenData] = token;
+  const tokenThemesArr = Object.entries(tokenData);
+  const isExpandable = tokenThemesArr.some(
+    ([_themeName, themeToken]) => themeToken.hasOwnProperty('references') || getIsColor(themeToken.value)
+  );
+  const isTokenExpanded = expandedTokens.includes(tokenName);
+  const tokenDescription = tokenThemesArr[0][1].description;
+
+  return (
+    <Tbody isExpanded={isTokenExpanded}>
+      <Tr>
+        {/* Expandable row icon */}
+        <Td
+          expand={
+            isExpandable && {
+              rowIndex,
+              isExpanded: isTokenExpanded,
+              onToggle: () => setExpanded(tokenName, !isTokenExpanded),
+              expandId: `${tokenName}-expandable-toggle`
+            }
+          }
+        />
+        <Td>
+          <code>{tokenName}</code>
+        </Td>
+        {/* Token values for each theme */}
+        <Td>
+          {tokenThemesArr.map(([themeName, themeToken]) => (
+            <TokenValue themeName={themeName} themeToken={themeToken} tokenName={tokenName} key={themeName} />
+          ))}
+        </Td>
+
+        {/* Description - only for semantic tokens */}
+        {isSemanticLayer && <Td>{tokenDescription}</Td>}
+      </Tr>
+
+      {/* Expandable token chain */}
+      {isTokenExpanded && <TokenChain tokenThemesArr={tokenThemesArr} />}
+    </Tbody>
+  );
+};
+
+export const TokensTable = ({ tokenJson }) => {
   // state variables
   const [searchValue, setSearchValue] = React.useState('');
   const [expandedTokens, setExpandedTokens] = React.useState([]);
-  const [selectedCategories, setSelectedCategories] = React.useState([]);
+  const [selectedCategory, setSelectedCategory] = React.useState('semantic');
+
+  const allTokens = getTokensFromJson(tokenJson);
+  const isSemanticLayer = selectedCategory === 'semantic';
+  const categoryTokens = allTokens[selectedCategory];
+  // get tokens for selected category
+  const categoryTokensArr = getCategoryTokensArr(selectedCategory, categoryTokens);
+  // filter selected category tokens based on search term
+  const searchResults = getFilteredTokens(categoryTokensArr, searchValue);
+  // remove extra 'default' category
+  delete allTokens.default;
+  const allCategoriesArr = Object.keys(allTokens);
 
   // helper funcs
-  const isTokenExpanded = (tokenName) => expandedTokens.includes(tokenName);
-  const isSelectedCategory = (categoryName) =>
-    selectedCategories.length === 0 || selectedCategories.includes(categoryName);
   const setExpanded = (tokenName, isExpanding = true) =>
     setExpandedTokens((prevExpanded) => {
       const otherExpandedTokens = prevExpanded.filter((n) => n !== tokenName);
@@ -111,136 +244,50 @@ export const TokensTable = ({ tokenJson, formatThemeText = capitalize }) => {
       <TokensToolbar
         searchValue={searchValue}
         setSearchValue={setSearchValue}
-        selectedCategories={selectedCategories}
-        setSelectedCategories={setSelectedCategories}
+        selectedCategory={selectedCategory}
+        setSelectedCategory={setSelectedCategory}
+        resultsCount={searchResults.length.toString()}
+        categories={allCategoriesArr}
       />
       <OuterScrollContainer className="tokens-table-outer-wrapper">
         <InnerScrollContainer>
-          {
-            // Create new Table for each tokens layer [base, chart, palette, semantic]
-            Object.entries(allTokens).map(([layerName, layerDataObj], _rowIndex) => {
-              // save if semantic layer - used for custom styling due to description field
-              const isSemanticLayer = layerName === 'semantic';
-
-              // Create array of all tokens/nested tokens in layer, filtered by selectedCategories
-              let layerTokens = [];
-              if (!['base', 'semantic'].includes(layerName) && isSelectedCategory(layerName)) {
-                layerTokens = Object.entries(layerDataObj);
-              } else {
-                // base/semantic combine subcategory tokens into flattened arr
-                for (var subLayer in layerDataObj) {
-                  isSelectedCategory(subLayer) && layerTokens.push(...Object.entries(layerDataObj[subLayer]));
-                }
-              }
-              // finally filter all tokens based on search term
-              const filteredTokens = layerTokens.filter(([tokenName, tokenData]) =>
-                isSearchMatch(searchValue, tokenName, tokenData)
-              );
-
-              return (
-                <>
-                  <Title headingLevel="h2" id={`${layerName}-table`} className="pf-v6-u-mt-xl">
-                    {formatThemeText(layerName)} tokens
-                  </Title>
-                  <Table variant="compact" style={{ marginBlockEnd: `var(--pf-t--global--spacer--xl)` }}>
-                    <Thead>
-                      <Tr>
-                        {/* Only semantic tokens have description, adjust columns accordingly */}
-                        <Th width={5}></Th>
-                        <Th width={isSemanticLayer ? 60 : 80}>Name</Th>
-                        <Th width={isSemanticLayer ? 10 : 15}>Value</Th>
-                        {isSemanticLayer && <Th width={25}>Description</Th>}
-                      </Tr>
-                    </Thead>
-
-                    {/* Loop through row for each token in current layer */}
-                    {filteredTokens.map(([tokenName, tokenData], rowIndex) => {
-                      const tokenThemesArr = Object.entries(tokenData);
-                      const hasReferences = tokenThemesArr.some(([_themeName, themeToken]) =>
-                        themeToken.hasOwnProperty('references')
-                      );
-                      const isColorToken = tokenThemesArr[0][1].type === 'color';
-                      const tokenDescription = tokenThemesArr[0][1].description;
-
-                      return (
-                        <Tbody key={`row-${tokenName}`} isExpanded={isTokenExpanded(tokenName)}>
-                          <Tr>
-                            {/* Expandable row icon */}
-                            <Td
-                              expand={
-                                hasReferences || isColorToken
-                                  ? {
-                                      rowIndex,
-                                      isExpanded: isTokenExpanded(tokenName),
-                                      onToggle: () => setExpanded(tokenName, !isTokenExpanded(tokenName)),
-                                      expandId: `${tokenName}-expandable-toggle`
-                                    }
-                                  : undefined
-                              }
-                            />
-                            <Td>
-                              <code>{tokenName}</code>
-                            </Td>
-                            {/* Token values for each theme */}
-                            <Td>
-                              {tokenThemesArr.map(([themeName, themeToken]) => {
-                                const isColor = /^(#|rgb)/.test(themeToken.value);
-                                return (
-                                  <Flex
-                                    justifyContent={{ default: 'justify-content-space-between' }}
-                                    flexWrap={{ default: 'nowrap' }}
-                                    key={`${themeName}-${tokenName}`}
-                                  >
-                                    <FlexItem>{formatThemeText(themeName)}:</FlexItem>
-                                    {isColor ? (
-                                      <FlexItem
-                                        key={`${themeName}_${tokenName}_swatch`}
-                                        className="pf-v6-l-flex pf-m-column pf-m-align-self-center"
-                                      >
-                                        <span
-                                          className="ws-token-swatch"
-                                          style={{ backgroundColor: themeToken.value }}
-                                        />
-                                      </FlexItem>
-                                    ) : (
-                                      <div className="pf-v6-l-flex pf-m-column pf-m-align-self-center">
-                                        {themeToken.value}
-                                      </div>
-                                    )}
-                                  </Flex>
-                                );
-                              })}
-                            </Td>
-                            {/* Description - only for semantic tokens */}
-                            {isSemanticLayer && <Td>{tokenDescription}</Td>}
-                          </Tr>
-
-                          {/* Expandable token chain */}
-                          {(hasReferences || isColorToken) && isTokenExpanded(tokenName) && (
-                            <Tr isExpanded>
-                              <Td />
-                              <Td colSpan={3}>
-                                <ExpandableRowContent>
-                                  <Grid hasGutter>
-                                    {tokenThemesArr.map(([themeName, themeToken]) => (
-                                      <>
-                                        <GridItem span={2}>{formatThemeText(themeName)}:</GridItem>
-                                        <GridItem span={10}>{showTokenChain(themeToken, hasReferences)}</GridItem>
-                                      </>
-                                    ))}
-                                  </Grid>
-                                </ExpandableRowContent>
-                              </Td>
-                            </Tr>
-                          )}
-                        </Tbody>
-                      );
-                    })}
-                  </Table>
-                </>
-              );
-            })
-          }
+          <Title headingLevel="h2">{capitalize(selectedCategory)} tokens</Title>
+          {searchResults.length > 0 ? (
+            <Table variant="compact" style={{ marginBlockEnd: `var(--pf-t--global--spacer--xl)` }}>
+              <Thead>
+                <Tr>
+                  {/* Only semantic tokens have description, adjust columns accordingly */}
+                  <Th width={5} screenReaderText="Row expansion"></Th>
+                  <Th width={isSemanticLayer ? 60 : 80}>Name</Th>
+                  <Th width={isSemanticLayer ? 10 : 15}>Value</Th>
+                  {isSemanticLayer && <Th width={25}>Description</Th>}
+                </Tr>
+              </Thead>
+
+              {/* Loop through row for each token in current layer */}
+              {searchResults.map((token, rowIndex) => (
+                <TokensTableBody
+                  key={rowIndex}
+                  token={token}
+                  expandedTokens={expandedTokens}
+                  setExpanded={setExpanded}
+                  isSemanticLayer={isSemanticLayer}
+                  rowIndex={rowIndex}
+                />
+              ))}
+            </Table>
+          ) : (
+            <EmptyState titleText="No results found" headingLevel="h4" icon={SearchIcon}>
+              <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+              <EmptyStateFooter>
+                <EmptyStateActions>
+                  <Button onClick={() => setSearchValue('')} variant="link">
+                    Clear search
+                  </Button>
+                </EmptyStateActions>
+              </EmptyStateFooter>
+            </EmptyState>
+          )}
         </InnerScrollContainer>
       </OuterScrollContainer>
     </React.Fragment>

package/patternfly-docs/content/tokensToolbar.js

@@ -7,15 +7,61 @@ import {
   SelectOption,
   Toolbar,
   ToolbarItem,
-  ToolbarContent
+  ToolbarContent,
+  capitalize
 } from '@patternfly/react-core';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
-export const TokensToolbar = ({ selectedCategories, setSelectedCategories, searchValue, setSearchValue }) => {
+const TokensToolbarSelect = ({ selectedCategory, setSelectedCategory, categories }) => {
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);
+  const handleSelect = (_e, category) => {
+    if (!(selectedCategory === category)) {
+      setSelectedCategory(category);
+    }
+    setIsSelectOpen(!isSelectOpen);
+  };
 
+  const SelectToggle = (toggleRef) => (
+    <MenuToggle
+      icon={<FilterIcon />}
+      ref={toggleRef}
+      onClick={() => setIsSelectOpen(!isSelectOpen)}
+      isExpanded={isSelectOpen}
+    >
+      {capitalize(selectedCategory)} tokens
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      aria-label="Select Input"
+      role="menu"
+      toggle={SelectToggle}
+      isOpen={isSelectOpen}
+      onOpenChange={(isOpen) => setIsSelectOpen(isOpen)}
+      onSelect={handleSelect}
+    >
+      <SelectList>
+        {categories.map((category, idx) => (
+          <SelectOption key={idx} value={category} isSelected={selectedCategory === category}>
+            {capitalize(category)} tokens
+          </SelectOption>
+        ))}
+      </SelectList>
+    </Select>
+  );
+};
+
+export const TokensToolbar = ({
+  selectedCategory,
+  setSelectedCategory,
+  searchValue,
+  setSearchValue,
+  resultsCount,
+  categories
+}) => {
   return (
-    <Toolbar id="filter-toolbar">
+    <Toolbar>
       <ToolbarContent>
         <ToolbarItem variant="search-filter">
           <SearchInput
@@ -24,52 +70,16 @@ export const TokensToolbar = ({ selectedCategories, setSelectedCategories, searc
             value={searchValue}
             onChange={(_event, value) => setSearchValue(value)}
             onClear={() => setSearchValue('')}
+            resultsCount={resultsCount}
           />
         </ToolbarItem>
+
         <ToolbarItem>
-          <Select
-            id="select-tokens-category"
-            aria-label="Select Input"
-            role="menu"
-            toggle={(toggleRef) => (
-              <MenuToggle
-                icon={<FilterIcon />}
-                ref={toggleRef}
-                onClick={() => setIsSelectOpen(!isSelectOpen)}
-                isExpanded={isSelectOpen}
-              >
-                Category
-              </MenuToggle>
-            )}
-            isOpen={isSelectOpen}
-            onOpenChange={(isOpen) => setIsSelectOpen(isOpen)}
-            onSelect={(_e, category) => {
-              if (selectedCategories.includes(category)) {
-                setSelectedCategories(selectedCategories.filter((cat) => cat !== category));
-              } else {
-                setSelectedCategories([...selectedCategories, category]);
-              }
-              setIsSelectOpen(!isSelectOpen);
-            }}
-          >
-            <SelectList>
-              <SelectOption hasCheckbox key={0} value="colors" isSelected={selectedCategories.includes('colors')}>
-                Colors
-              </SelectOption>
-              <SelectOption hasCheckbox key={1} value="dimension" isSelected={selectedCategories.includes('dimension')}>
-                Dimension
-              </SelectOption>
-              <SelectOption hasCheckbox key={2} value="motion" isSelected={selectedCategories.includes('motion')}>
-                Motion
-              </SelectOption>
-              <SelectOption hasCheckbox key={3} value="palette" isSelected={selectedCategories.includes('palette')}>
-                Palette
-              </SelectOption>
-              <SelectOption hasCheckbox key={4} value="chart" isSelected={selectedCategories.includes('chart')}>
-                Chart
-              </SelectOption>
-            </SelectList>
-          </Select>
+          <TokensToolbarSelect
+            selectedCategory={selectedCategory}
+            setSelectedCategory={setSelectedCategory}
+            categories={categories}
+          />
         </ToolbarItem>
       </ToolbarContent>
     </Toolbar>

package/plugins/export-patternfly-tokens/README.md

@@ -15,10 +15,12 @@ The Export Patternfly Tokens plugin should now be available to use as a developm
 Once the plugin has been added to Figma via the manifest file:
 1. Make sure you are **not** in Figma's developer mode.
 1. In Figma, select **Plugins** > **Development** > **Export Patternfly Tokens** > **Export Tokens**.
-1. Click **Export Tokens**. The text area will display a concatenated list of all tokens exported from the Figma library. Links to each exported JSON file are displayed at the bottom of the dialog.
-1. Click each JSON file link to save them locally (do not rename the JSON files!).
-1. Copy the local JSON files to your cloned design-tokens repo:
-   1. Copy files that do not end in **.dark.json** to  **\packages\module\tokens\default**. 
-   1. Copy files ending in **.dark.json** and **palette.color.json** to **\packages\module\tokens\dark**.
+1. Click **Export Tokens**. The text area will display a concatenated list of all tokens exported from the Figma library. Links to each exported JSON file are displayed at the bottom of the dialog. There is a "Download all files" link (named `tokens.zip`) at the top of the dialog that contains all of the exported files.
+1. Click on the `tokens.zip` file to download all of the files, unless you only want to update a specific type of token. In that case, you can click any of the JSON file links to save them locally (do not rename the JSON files!). Note: it's much easier to download all of the files at once via the `tokens.zip` file. There is no harm in downloading all of the files at once, unless there is a specific reason you want to exclude any of them.
+1. Copy the local JSON files you downloaded to your cloned design-tokens repo:
+   1. If you downloaded `tokens.zip` in the previous step, unzip the file and simply copy the "tokens" directory it creates to **\packages\module** and override the existing "tokens" directory.
+   1. If you downloaded individual files:
+       1. Copy files that do not end in **.dark.json** to  **\packages\module\tokens\default**. 
+       1. Copy files ending in **.dark.json** and **palette.color.json** to **\packages\module\tokens\dark**.
    
    Note that **palette.color.json** is saved to both the **default** and **dark** directories.