style(tokens): new token sets for core, semantic, and branding

libs/core/package.json

@@ -42,7 +42,7 @@
     "build.stencil": "stencil build --docs",
     "build.storybook": "storybook build",
     "build.ts": "tsc -p scripts/tsconfig.json",
-    "build.tokens": "node scripts/sd-transforms.mjs",
+    "build.tokens": "node scripts/style-dictionary/transform.mjs",
     "deploy": "npm run build.all",
     "generate": "stencil generate",
     "lint": "run-p lint.*",

libs/core/scripts/style-dictionary/filters/component.mjs

@@ -0,0 +1,7 @@
+import { basePath } from "../utils.mjs";
+
+// filters tokens by themable and from which tokenset they originate
+// must match per component name, in this repository we currently only have "button"
+export const componentFilter =
+  (cat) =>
+    (token) => token.filePath.startsWith(`${basePath}/components/${cat}.json`);

libs/core/scripts/style-dictionary/filters/core.mjs

@@ -0,0 +1 @@
+export const coreFilter = (token) => token.filePath.endsWith("base/core.json");

libs/core/scripts/style-dictionary/filters/index.mjs

@@ -0,0 +1,3 @@
+export { coreFilter } from "./core.mjs";
+export { componentFilter } from './component.mjs';
+export { semanticFilter } from "./semantic.mjs";

libs/core/scripts/style-dictionary/filters/semantic.mjs

@@ -0,0 +1,23 @@
+ import fs from 'fs-extra';
+
+ import { basePath } from '../utils.mjs';
+
+// filters only tokens originating from semantic sets (not core, not components) and also check themeable or not
+export const semanticFilter =
+  (themeable = false) =>
+  (token) => {
+    // const themeDimensions = ["brand"];
+    const tokenThemable = Boolean(token.attributes.themeable);
+
+    const brandDimensions = fs.readdirSync(`${basePath}/brand`);
+    return (
+      themeable === tokenThemable &&
+      [...brandDimensions, "semantic"].some((cat) => {
+          return (
+            token.filePath.startsWith(`${basePath}/base/${cat}`) ||
+            token.filePath.startsWith(`${basePath}/brand/${cat}`)
+          );
+        }
+      )
+    );
+  };

libs/core/scripts/style-dictionary/generators/component.mjs

@@ -0,0 +1,32 @@
+import fs from 'fs-extra'
+import { outputReferencesTransformed } from "style-dictionary/utils";
+import { componentFilter } from "../filters/index.mjs";
+import { basePath } from "../utils.mjs";
+
+const componentPrefix = 'pds';
+const format = "css/variables";
+
+// for each component, filter those specific component tokens and output them
+// to the component folder where the component source code will live
+export const generateComponentFiles = () => {
+  const filesArr = [];
+
+  // Generates a list of components from the tokens/components folder
+  const components = fs.readdirSync(`${basePath}/components`).map((comp) => comp.replace(/.json$/g, ""));
+
+  for (const comp of components) {
+    // theme-specific outputs
+    const componentName = `${componentPrefix}-${comp}`;
+
+    filesArr.push({
+      format,
+      filter: componentFilter(comp, true),
+      options: {
+        selector: ":host",
+        outputReferences: outputReferencesTransformed,
+      },
+      destination: `../../../components/${componentName}/${componentName}.tokens.scss`,
+    });
+  }
+  return filesArr;
+};

libs/core/scripts/style-dictionary/generators/core.mjs

@@ -0,0 +1,11 @@
+import { coreFilter } from "../filters/index.mjs";
+
+const format = "css/variables";
+
+export const generateCoreFiles = () => [
+  {
+    destination: `base/_core.scss`,
+    format,
+    filter: coreFilter
+  }
+];

libs/core/scripts/style-dictionary/generators/index.mjs

@@ -0,0 +1,3 @@
+export { generateCoreFiles } from "./core.mjs";
+export { generateComponentFiles } from "./component.mjs";
+export { generateSemanticFiles } from "./semantic.mjs";

libs/core/scripts/style-dictionary/generators/semantic.mjs

@@ -0,0 +1,25 @@
+import { semanticFilter } from "../filters/semantic.mjs";
+
+const format = "css/variables";
+
+export const generateSemanticFiles = (theme) => {
+  const filesArr = [];
+  const [themeName, mode] = theme.toLowerCase().split('-');
+
+  // theme-specific outputs
+  filesArr.push({
+    format,
+    filter: semanticFilter(true),
+    destination: `brand/${themeName}/styles/${mode}.scss`,
+  });
+
+
+  // not theme-specific outputs
+  filesArr.push({
+    format,
+    filter: semanticFilter(false),
+    destination: `brand/${themeName}/styles/semantic.scss`,
+  });
+
+  return filesArr;
+};

libs/core/scripts/style-dictionary/transform.mjs

@@ -0,0 +1,103 @@
+import { register, permutateThemes } from '@tokens-studio/sd-transforms';
+import {generateCoreFiles, generateComponentFiles, generateSemanticFiles } from './generators/index.mjs';
+import StyleDictionary from 'style-dictionary';
+import { getReferences, usesReferences } from "style-dictionary/utils";
+import { promises } from 'fs';
+
+register(StyleDictionary, {
+  /* options here if needed */
+});
+
+const basePath = `src/global/styles/tokens`;
+
+async function run() {
+  const $themes = JSON.parse(await promises.readFile(`${basePath}/$themes.json`, 'utf-8'));
+  const themes = permutateThemes($themes, { separator: '-' });
+
+	const tokenSets = [
+		...new Set(
+			Object.values(themes)
+				.reduce((acc, sets) => [...acc, ...sets], [])
+		),
+	];
+
+	const themeableSets = tokenSets.filter(set => {
+    return !Object.values(themes).every(sets => sets.includes(set));
+	});
+
+  const configs = Object.entries(themes).map(([theme, tokensets]) => ({
+    log: {
+      verbosity: 'verbose',
+    },
+    source: tokensets.map(tokenset => `${basePath}/${tokenset}.json`),
+    preprocessors: ['tokens-studio'], // <-- since 0.16.0 this must be explicit
+    platforms: {
+      css: {
+        transformGroup: 'tokens-studio',
+        transforms: ['attribute/themeable', 'name/kebab', 'color/hex', 'ts/resolveMath', 'size/px'],
+				buildPath: `${basePath}/`,
+        files: [
+          ...generateCoreFiles(),
+					...generateSemanticFiles(theme),
+          ...generateComponentFiles(),
+        ],
+				prefix: 'pine'
+      },
+    },
+  }));
+
+  for (const cfg of configs) {
+    const sd = new StyleDictionary(cfg);
+
+    /**
+     * This transform checks for each token whether that token's value could change
+     * due to Tokens Studio theming.
+     * Any tokenset from Tokens Studio marked as "enabled" in the $themes.json is considered
+     * a set in which any token could change if the theme changes.
+     * Any token that is inside such a set or is a reference with a token in that reference chain
+     * that is inside such a set, is considered "themeable",
+     * which means it could change by theme switching.
+     *
+     * This metadata is applied to the token so we can use it as a way of filtering outputs
+     * later in the "format" stage.
+     */
+    sd.registerTransform({
+      name: "attribute/themeable",
+      type: "attribute",
+      transform: (token) => {
+        function isPartOfEnabledSet(token) {
+          const pathRegex = new RegExp(`^${basePath.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`, "g");
+          const set = token.filePath
+            .replace(pathRegex, "")
+            .replace(/^\/+/g, "")
+            .replace(/.json$/g, "");
+
+          return themeableSets.includes(set);
+        }
+
+        // Set token to themeable if it's part of an enabled set
+        if (isPartOfEnabledSet(token)) {
+          return {
+            themeable: true,
+          };
+        }
+
+        // Set token to themeable if it's using a reference and inside the reference chain
+        // any one of them is from a themeable set
+        if (usesReferences(token.original.value)) {
+          const refs = getReferences(token.original.value, sd.tokens);
+          if (refs.some((ref) => isPartOfEnabledSet(ref))) {
+            return {
+              themeable: true,
+            };
+          }
+        }
+      },
+    });
+
+    await sd.cleanAllPlatforms();
+    await sd.buildAllPlatforms();
+  }
+}
+
+run();

libs/core/scripts/style-dictionary/utils.mjs

@@ -0,0 +1 @@
+export const basePath = `src/global/styles/tokens`;

libs/core/src/components/pds-accordion/pds-accordion.scss

@@ -3,29 +3,14 @@
 }
 
 details {
-  --border-radius-default: var(--pine-border-radius-default);
-
-  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
-
-  --color-background-default: var(--pine-color-white);
-  --color-background-hover: var(--pine-color-grey-150);
-  --color-text-default: var(--pine-color-text-interactive-default);
-  --color-text-active: var(--pine-color-grey-950);
-  --color-text-hover: var(--pine-color-grey-800);
-
-  --font-weight-active: var(--pine-font-weight-semi-bold);
 
+  // TODO: Needs discussion
+  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);
+  --color-text-hover: var(--pine-color-text-secondary);
   --number-animation-transform-timing: 200ms;
 
-  --spacing-details-padding-inline: var(--pine-spacing-150);
-  --spacing-details-padding-block-end: calc(var(--pine-spacing-200) + 2); //18 + 2 = 18px
-  --spacing-summary-padding-block: calc(var(--pine-spacing-150) / 2); //12 / 2 = 6px
-  --spacing-summary-padding-inline-start: var(--pine-spacing-100);
-  --spacing-summary-padding-inline-end: var(--pine-spacing-050);
-
-  --typography-default: var(--pine-typography-body-md-medium);
 
-  border-radius: var(--border-radius-default);
+  border-radius: var(--pine-dimension-xs);
 
   pds-icon {
     transform: scaleY(1);
@@ -34,11 +19,11 @@ details {
 
 /* stylelint-disable-next-line */
 details[open] {
-  background-color: var(--color-background-default);
+  background-color: var(--pine-color-background-container);
 
   summary {
-    color: var(--color-text-active);
-    font-weight: var(--font-weight-active);
+    color: var(--pine-color-text-active);
+    font-weight: var(--pine-font-weight-semi-bold);
 
     pds-icon {
       transform: scaleY(-1);
@@ -47,13 +32,17 @@ details[open] {
 }
 
 summary {
-  background-color: var(--color-background-default);
-  border-radius: var(--border-radius-default);
-  color: var(--color-text-default);
-  font: var(--typography-default);
-  padding-block: var(--spacing-summary-padding-block);
-  padding-inline-end: var(--spacing-summary-padding-inline-end);
-  padding-inline-start: var(--spacing-summary-padding-inline-start);
+  background-color: var(--pine-color-background-container);
+  border-radius: var(--pine-dimension-xs);
+  color: var(--pine-color-text);
+  font-family: var(--pine-font-family-body);
+  font-size: var(--pine-font-size-body-md);
+  font-weight: var(--pine-font-weight-medium);
+  letter-spacing: var(--pine-letter-spacing);
+  line-height: var(--pine-line-height-body);
+  padding-block: calc(var(--pine-dimension-2xs) * 1.5);
+  padding-inline-end: var(var(--pine-dimension-2xs));
+  padding-inline-start: var(var(--pine-dimension-xs));
 
   // Removes marker on Firefox/Chrome
   /* stylelint-disable-next-line */
@@ -66,7 +55,7 @@ summary {
   }
 
   &:hover {
-    background: var(--color-background-hover);
+    background: var(--pine-color-background-container-hover);
     color: var(--color-text-hover);
     cursor: pointer;
   }
@@ -84,6 +73,6 @@ summary {
 }
 
 .pds-accordion__body {
-  padding-block-end: var(--spacing-details-padding-block-end);
-  padding-inline: var(--spacing-details-padding-inline);
+  padding-block-end: calc(var(--pine-dimension-sm) + 2);
+  padding-inline: calc(var(--pine-dimension-2xs) * 1.5);
 }

libs/core/src/components/pds-accordion/pds-accordion.tsx

@@ -9,7 +9,7 @@ import { downSmall } from '@pine-ds/icons/icons';
  */
 @Component({
   tag: 'pds-accordion',
-  styleUrls: ['../../global/styles/base.scss','pds-accordion.scss'],
+  styleUrls: ['pds-accordion.scss'],
   shadow: true,
 })
 export class PdsAccordion {