@patternfly/design-tokens 1.12.0 → 1.13.1

package/patternfly-docs/content/tokensTable.css

@@ -0,0 +1,15 @@
+.ws-token-swatch {
+  height: 1em;
+  display: inline-block;
+  aspect-ratio: 1 / 1;
+  border-radius: 50%;
+  border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--background--color--inverse--default);
+  box-shadow: var(--pf-t--global--box-shadow--sm);
+}
+
+@media (min-width: 1200px) {
+  .tokens-table-outer-wrapper {
+    width: calc(92vw - var(--pf-v6-c-page__sidebar--Width));
+    max-width: calc(92vw - var(--pf-v6-c-page__sidebar--Width));
+  }
+}

package/patternfly-docs/content/tokensTable.js

@@ -1,10 +1,5 @@
-import React from "react";
-import {
-  SearchInput,
-  Toolbar,
-  ToolbarItem,
-  ToolbarContent,
-} from "@patternfly/react-core";
+import React from 'react';
+import { Flex, FlexItem, Grid, GridItem, Title, capitalize } from '@patternfly/react-core';
 import {
   Table,
   Thead,
@@ -14,130 +9,238 @@ import {
   Td,
   ExpandableRowContent,
   OuterScrollContainer,
-  InnerScrollContainer,
-} from "@patternfly/react-table";
+  InnerScrollContainer
+} from '@patternfly/react-table';
+import { TokensToolbar } from './tokensToolbar';
+import './tokensTable.css';
 
 // eslint-disable-next-line camelcase
-import global_spacer_md from "@patternfly/react-tokens/dist/esm/global_spacer_md";
-import LevelUpAltIcon from "@patternfly/react-icons/dist/esm/icons/level-up-alt-icon";
-
-import * as scssAsJson from "../scssAsJson";
+import global_spacer_md from '@patternfly/react-tokens/dist/esm/global_spacer_md';
+import LevelUpAltIcon from '@patternfly/react-icons/dist/esm/icons/level-up-alt-icon';
 
-export const TokensTable = () => {
-  const scssVariables = Object.keys(scssAsJson);
-  const [searchValue, setSearchValue] = React.useState('');
-  const [expandedTokens, setExpandedTokens] = React.useState([]);
-  const setExpanded = (tokenName, isExpanding = true) =>
-    setExpandedTokens((prevExpanded) => {
-      const otherExpandedTokens = prevExpanded.filter((n) => n !== tokenName);
-      return isExpanding ? [...otherExpandedTokens, tokenName] : otherExpandedTokens;
-    });
-  const isTokenExpanded = (tokenName) => expandedTokens.includes(tokenName);
-
-  const showTokenChain = (tokenName) => {
-    let tokenChain = [];
-    let tokenValue = scssAsJson[tokenName];
+// Used to combine data grouped by theme under each token name
+const deepMerge = (target, source) => {
+  for (const key in source) {
+    if (source[key] instanceof Object && key in target) {
+      Object.assign(source[key], deepMerge(target[key], source[key]));
+    }
+  }
+  return Object.assign(target || {}, source);
+};
 
-    while (tokenValue !== undefined) {
-      tokenChain = [...tokenChain, tokenValue]
-      tokenValue = scssAsJson[tokenValue];
+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;
     }
+  }
+  return tokenChain;
+};
 
-    return (
-      <div>
+const showTokenChain = (themeTokenData) => {
+  const tokenChain = getTokenChain(themeTokenData);
+  return (
+    <div>
+      {tokenChain.map((nextValue, index) => (
         <div
-          className="ws-css-property"
+          key={`${index}`}
           style={{
-            padding: `4px 0 4px calc(${global_spacer_md.value} * ${3})`
-          }}>
+            padding: `4px 0 4px calc(${global_spacer_md.value} * ${index})`
+          }}
+        >
           <LevelUpAltIcon style={{ transform: 'rotate(90deg)' }} />
-          <span style={{ paddingLeft: '16px' }}>
-            {tokenName}
-          </span>
+          <span style={{ paddingInlineStart: global_spacer_md.value }}>{nextValue}</span>
         </div>
-        {tokenChain.map((nextValue, index) => (
-          <div
-            key={index}
-            style={{
-              padding: `4px 0 4px calc(${global_spacer_md.value} * ${index + 4})`
-            }}
-          >
-            <LevelUpAltIcon style={{ transform: 'rotate(90deg)' }} />
-            <span style={{ paddingLeft: '16px' }}>
-              {nextValue}
-            </span>
-          </div>
-        ))}
-      </div>
+      ))}
+    </div>
+  );
+};
+
+const isSearchMatch = (searchValue, tokenName, tokenData) => {
+  // match all tokens if no search term
+  if (searchValue === '') {
+    return true;
+  }
+  // match search term to token name, value, and description
+  searchValue = searchValue.toLowerCase();
+  return (
+    tokenName.toLowerCase().includes(searchValue) ||
+    Object.entries(tokenData).some(
+      ([_themeName, themeData]) =>
+        themeData?.value?.toString().toLowerCase().includes(searchValue) ||
+        themeData?.description?.toLowerCase().includes(searchValue)
     )
-  };
+  );
+};
+
+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;
+
+  // state variables
+  const [searchValue, setSearchValue] = React.useState('');
+  const [expandedTokens, setExpandedTokens] = React.useState([]);
+  const [selectedCategories, setSelectedCategories] = React.useState([]);
+
+  // 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);
+      return isExpanding ? [...otherExpandedTokens, tokenName] : otherExpandedTokens;
+    });
 
   return (
     <React.Fragment>
-      <Toolbar id="filter-toolbar">
-        <ToolbarContent>
-          <ToolbarItem variant="search-filter">
-            <SearchInput
-              aria-label="Search all tokens"
-              placeholder="Search all tokens"
-              value={searchValue}
-              onChange={(_event, value) => setSearchValue(value)}
-              onClear={() => setSearchValue("")}
-            />
-          </ToolbarItem>
-        </ToolbarContent>
-      </Toolbar>
-      <OuterScrollContainer>
+      <TokensToolbar
+        searchValue={searchValue}
+        setSearchValue={setSearchValue}
+        selectedCategories={selectedCategories}
+        setSelectedCategories={setSelectedCategories}
+      />
+      <OuterScrollContainer className="tokens-table-outer-wrapper">
         <InnerScrollContainer>
-          <Table variant="compact">
-            <Thead>
-              <Th></Th>
-              <Th>Name</Th>
-              <Th>Value</Th>
-            </Thead>
-            {scssVariables.map((tokenName, rowIndex) => {
-              if (tokenName === 'default') {
-                return undefined
-              } else if (searchValue !== '' && !tokenName.includes(searchValue)) {
-                return undefined
+          {
+            // 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 {
-                const isResolved = scssAsJson[scssAsJson[tokenName]] === undefined;
-                return (
-                  <Tbody key={`row-${tokenName}`} isExpanded={isTokenExpanded(tokenName)}>
-                    <Tr>
-                      <Td
-                        expand={
-                          !isResolved
-                            ? {
-                              rowIndex,
-                              isExpanded: isTokenExpanded(tokenName),
-                              onToggle: () =>
-                                setExpanded(tokenName, !isTokenExpanded(tokenName)),
-                              expandId: `${tokenName}-expandable-toggle`,
-                            }
-                            : undefined
-                        }
-                      />
-                      <Td>{tokenName}</Td>
-                      <Td>{scssAsJson[scssAsJson[tokenName]] === undefined && scssAsJson[tokenName]}</Td>
-                    </Tr>
-                    {!isResolved && (
-                      <Tr isExpanded={isTokenExpanded(tokenName)}>
-                        <Td />
-                        <Td noPadding dataLabel="Details" colSpan={2}>
-                          <ExpandableRowContent>
-                            {showTokenChain(scssAsJson[tokenName])}
-                          </ExpandableRowContent>
-                        </Td>
-                      </Tr>
-                    )}
-                  </Tbody>
-                )
+                // base/semantic combine subcategory tokens into flattened arr
+                for (var subLayer in layerDataObj) {
+                  isSelectedCategory(subLayer) && layerTokens.push(...Object.entries(layerDataObj[subLayer]));
+                }
               }
-            })}
-          </Table>
+              // 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 tokenDescription = tokenThemesArr[0][1].description;
+
+                      return (
+                        <Tbody key={`row-${tokenName}`} isExpanded={isTokenExpanded(tokenName)}>
+                          <Tr>
+                            {/* Expandable row icon */}
+                            <Td
+                              expand={
+                                hasReferences
+                                  ? {
+                                      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 && 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)}</GridItem>
+                                      </>
+                                    ))}
+                                  </Grid>
+                                </ExpandableRowContent>
+                              </Td>
+                            </Tr>
+                          )}
+                        </Tbody>
+                      );
+                    })}
+                  </Table>
+                </>
+              );
+            })
+          }
         </InnerScrollContainer>
       </OuterScrollContainer>
     </React.Fragment>
-  )
+  );
 };

package/patternfly-docs/content/tokensToolbar.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  MenuToggle,
+  SearchInput,
+  Select,
+  SelectList,
+  SelectOption,
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent
+} from '@patternfly/react-core';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+
+export const TokensToolbar = ({ selectedCategories, setSelectedCategories, searchValue, setSearchValue }) => {
+  const [isSelectOpen, setIsSelectOpen] = React.useState(false);
+
+  return (
+    <Toolbar id="filter-toolbar">
+      <ToolbarContent>
+        <ToolbarItem variant="search-filter">
+          <SearchInput
+            aria-label="Search all tokens"
+            placeholder="Search all tokens"
+            value={searchValue}
+            onChange={(_event, value) => setSearchValue(value)}
+            onClear={() => setSearchValue('')}
+          />
+        </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>
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+};

package/patternfly-docs/generated/tokens/all-patternfly-tokens/tokens.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import * as defaultTokens from '../../../content/./token-layers-default.json';
+import * as darkTokens from '../../../content/./token-layers-dark.json';
 import { TokensTable } from '../../../content/./tokensTable.js';
 const pageData = {
   "id": "All PatternFly tokens",
   "section": "tokens",
   "subsection": "",
   "deprecated": false,
+  "template": false,
   "beta": false,
   "demo": false,
   "newImplementationLink": false,
@@ -16,16 +19,18 @@ const pageData = {
   "relPath": "packages/module/patternfly-docs/content/all-patternfly-tokens.md"
 };
 pageData.liveContext = {
+  defaultTokens,
+  darkTokens,
   TokensTable
 };
-pageData.relativeImports = "import { TokensTable } from 'content/./tokensTable.js';"
+pageData.relativeImports = "import * as defaultTokens from 'content/./token-layers-default.json';,import * as darkTokens from 'content/./token-layers-dark.json';,import { TokensTable } from 'content/./tokensTable.js';"
 pageData.examples = {
   
 };
 
 const Component = () => (
   <React.Fragment>
-    <TokensTable/>
+    <TokensTable tokenJson={{default: defaultTokens, dark: darkTokens}}/>
   </React.Fragment>
 );
 Component.displayName = 'TokensAllPatternflyTokensTokensDocs';

package/tokens/dark/base.dark.json

@@ -79,44 +79,6 @@
             "value": "{color.yellow.20}"
           }
         },
-        "severity": {
-          "undefined": {
-            "100": {
-              "type": "color",
-              "value": "{color.gray.40}"
-            }
-          },
-          "none": {
-            "100": {
-              "type": "color",
-              "value": "{color.blue.30}"
-            }
-          },
-          "minor": {
-            "100": {
-              "type": "color",
-              "value": "{color.gray.30}"
-            }
-          },
-          "moderate": {
-            "100": {
-              "type": "color",
-              "value": "{color.yellow.30}"
-            }
-          },
-          "important": {
-            "100": {
-              "type": "color",
-              "value": "{color.orange.40}"
-            }
-          },
-          "critical": {
-            "100": {
-              "type": "color",
-              "value": "{color.red-orange.50}"
-            }
-          }
-        },
         "status": {
           "success": {
             "100": {
@@ -177,6 +139,44 @@
             }
           }
         },
+        "severity": {
+          "undefined": {
+            "100": {
+              "type": "color",
+              "value": "{color.gray.40}"
+            }
+          },
+          "none": {
+            "100": {
+              "type": "color",
+              "value": "{color.blue.30}"
+            }
+          },
+          "minor": {
+            "100": {
+              "type": "color",
+              "value": "{color.gray.30}"
+            }
+          },
+          "moderate": {
+            "100": {
+              "type": "color",
+              "value": "{color.yellow.30}"
+            }
+          },
+          "important": {
+            "100": {
+              "type": "color",
+              "value": "{color.orange.40}"
+            }
+          },
+          "critical": {
+            "100": {
+              "type": "color",
+              "value": "{color.red-orange.50}"
+            }
+          }
+        },
         "nonstatus": {
           "red": {
             "100": {
@@ -293,21 +293,25 @@
           "gray": {
             "100": {
               "type": "color",
-              "value": "{color.gray.30}"
+              "value": "{color.gray.60}"
             },
             "200": {
               "type": "color",
-              "value": "{color.gray.20}"
+              "value": "{color.gray.50}"
             },
             "300": {
               "type": "color",
-              "value": "{color.gray.10}"
+              "value": "{color.gray.40}"
             }
           }
         }
       },
       "border": {
         "color": {
+          "50": {
+            "type": "color",
+            "value": "{color.gray.60}"
+          },
           "100": {
             "type": "color",
             "value": "{color.gray.50}"
@@ -322,7 +326,7 @@
         "color": {
           "100": {
             "type": "color",
-            "value": "{color.gray.10}"
+            "value": "{color.white}"
           },
           "200": {
             "type": "color",