@patternfly/design-tokens 1.12.0 → 1.13.0

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/default/base.dimension.json

@@ -106,20 +106,6 @@
       }
     },
     "font": {
-      "family": {
-        "100": {
-          "type": "string",
-          "value": "Red Hat Text VF"
-        },
-        "200": {
-          "type": "string",
-          "value": "Red Hat Display VF"
-        },
-        "300": {
-          "type": "string",
-          "value": "Red Hat Mono VF"
-        }
-      },
       "weight": {
         "100": {
           "type": "number",
@@ -181,6 +167,20 @@
           "type": "number",
           "value": 36
         }
+      },
+      "family": {
+        "100": {
+          "type": "string",
+          "value": "\"Red Hat Text\", \"RedHatText\", \"Noto Sans Arabic\", \"Noto Sans Hebrew\", \"Noto Sans JP\", \"Noto Sans KR\", \"Noto Sans Malayalam\", \"Noto Sans SC\", \"Noto Sans TC\", \"Noto Sans Thai\", Helvetica, Arial, sans-serif"
+        },
+        "200": {
+          "type": "string",
+          "value": "\"Red Hat Display\", \"RedHatDisplay\", \"Noto Sans Arabic\", \"Noto Sans Hebrew\", \"Noto Sans JP\", \"Noto Sans KR\", \"Noto Sans Malayalam\", \"Noto Sans SC\", \"Noto Sans TC\", \"Noto Sans Thai\", Helvetica, Arial, sans-serif"
+        },
+        "300": {
+          "type": "string",
+          "value": "\"Red Hat Mono\", \"RedHatMono\", \"Courier New\", Courier, monospace"
+        }
       }
     },
     "z-index": {
@@ -328,6 +328,28 @@
         "type": "number",
         "value": 1450
       }
+    },
+    "text-decoration": {
+      "line": {
+        "100": {
+          "type": "string",
+          "value": "none"
+        },
+        "200": {
+          "type": "string",
+          "value": "underline"
+        }
+      },
+      "style": {
+        "100": {
+          "type": "string",
+          "value": "solid"
+        },
+        "200": {
+          "type": "string",
+          "value": "dashed"
+        }
+      }
     }
   }
 }