Token Index

site/cssGen.mjs

@@ -1,13 +1,14 @@
 import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import { findAll, parse } from "css-tree";
+import { findAll, generate, parse } from "css-tree";
 import glob from "fast-glob";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const themeFolder = "../packages/theme/css";
+const densities = ["high", "medium", "low", "touch", "mobile"];
 
 function getTokensFromCssFile(cssFilePath) {
   const ast = parse(fs.readFileSync(cssFilePath, { encoding: "utf-8" }));
@@ -22,6 +23,40 @@ function getTokensFromCssFile(cssFilePath) {
   }, {});
 }
 
+function getDensityTokensFromCssFile(cssFilePath) {
+  const ast = parse(fs.readFileSync(cssFilePath, { encoding: "utf-8" }));
+
+  return findAll(ast, (node) => node.type === "Rule").reduce((acc, rule) => {
+    const selector = rule.prelude ? generate(rule.prelude) : "";
+    const matchingDensities = densities.filter((density) =>
+      selector.includes(`salt-density-${density}`),
+    );
+
+    if (matchingDensities.length === 0) {
+      return acc;
+    }
+
+    const declarations = findAll(
+      rule,
+      (node) =>
+        node.type === "Declaration" && node.property.startsWith("--salt"),
+    );
+
+    for (const declaration of declarations) {
+      const property = declaration.property;
+      const value = declaration.value.value.trim();
+
+      acc[property] ??= {};
+
+      for (const density of matchingDensities) {
+        acc[property][density] = value;
+      }
+    }
+
+    return acc;
+  }, {});
+}
+
 function writeObjectToFile(object, outputFile) {
   const jsonData = JSON.stringify(object, null, 2);
   const cssFolderPath = path.resolve(
@@ -46,54 +81,85 @@ const characteristicFiles = glob.sync("*/characteristics/*.css", {
 });
 
 const characteristicSets = {};
+const characteristicDensitySets = {};
 
 for (const file of characteristicFiles) {
   const themeName = path.basename(path.dirname(path.dirname(file)));
 
   const tokens = getTokensFromCssFile(path.join(themeFolder, file));
+  const densityTokens = getDensityTokensFromCssFile(
+    path.join(themeFolder, file),
+  );
 
   characteristicSets[themeName] = {
     ...characteristicSets[themeName],
     ...tokens,
   };
+
+  characteristicDensitySets[themeName] = {
+    ...characteristicDensitySets[themeName],
+    ...densityTokens,
+  };
 }
 
 for (const [themeName, tokens] of Object.entries(characteristicSets)) {
   writeObjectToFile(tokens, `cssCharacteristics-${themeName}.json`);
 }
 
+for (const [themeName, tokens] of Object.entries(characteristicDensitySets)) {
+  writeObjectToFile(tokens, `cssCharacteristicsDensity-${themeName}.json`);
+}
+
 /* Generate CSS Foundations JSON */
 
 const sharedFoundationFiles = glob.sync("foundations/*.css", {
   cwd: themeFolder,
 });
 
 let sharedFoundations = {};
+let sharedFoundationDensity = {};
 
 for (const file of sharedFoundationFiles) {
   const tokens = getTokensFromCssFile(path.join(themeFolder, file));
+  const densityTokens = getDensityTokensFromCssFile(
+    path.join(themeFolder, file),
+  );
 
   sharedFoundations = {
     ...sharedFoundations,
     ...tokens,
   };
+
+  sharedFoundationDensity = {
+    ...sharedFoundationDensity,
+    ...densityTokens,
+  };
 }
 
 const themeFoundationFiles = glob.sync("*/foundations/*.css", {
   cwd: themeFolder,
 });
 
 const foundationSets = {};
+const foundationDensitySets = {};
 
 for (const file of themeFoundationFiles) {
   const themeName = path.basename(path.dirname(path.dirname(file)));
 
   const tokens = getTokensFromCssFile(path.join(themeFolder, file));
+  const densityTokens = getDensityTokensFromCssFile(
+    path.join(themeFolder, file),
+  );
 
   foundationSets[themeName] = {
     ...foundationSets[themeName],
     ...tokens,
   };
+
+  foundationDensitySets[themeName] = {
+    ...foundationDensitySets[themeName],
+    ...densityTokens,
+  };
 }
 
 for (const [themeName, tokens] of Object.entries(foundationSets)) {
@@ -102,3 +168,10 @@ for (const [themeName, tokens] of Object.entries(foundationSets)) {
     `cssFoundations-${themeName}.json`,
   );
 }
+
+for (const [themeName, tokens] of Object.entries(foundationDensitySets)) {
+  writeObjectToFile(
+    { ...sharedFoundationDensity, ...tokens },
+    `cssFoundationsDensity-${themeName}.json`,
+  );
+}

site/docs/themes/design-tokens/tokens.mdx

@@ -0,0 +1,10 @@
+---
+title: Token index
+description: "The token index provides a complete listing of all Salt's design tokens, along with their corresponding values. This resource makes it easy to review and reference tokens across different modes, themes and densities, helping designers and developers maintain consistency and makin informed choices when building with Salt. Figma variables for each design token can be found in the Salt DS Themes Library."
+layout: DetailTechnical
+sidebar:
+  priority: 1
+---
+
+<AllTokens />
+

site/src/components/callout/Callout.tsx

@@ -1,8 +1,8 @@
 import { Banner, BannerContent, H4, Text } from "@salt-ds/core";
-import type { ReactNode } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import styles from "./Callout.module.css";
 
-type CalloutProps = {
+type CalloutProps = ComponentPropsWithoutRef<typeof Banner> & {
   title: string;
   children: ReactNode;
 };