DRAFT: tokens update part 2

Makefile

@@ -1,3 +1,4 @@
+.PHONY: build
 build:
 	rm -rf ./dist
 	tsc --project tsconfig.build.json

bin/paragon-scripts.js

@@ -85,11 +85,21 @@ const COMMANDS = {
         description: 'Include only source design tokens in the build.',
         defaultValue: false,
       },
+      {
+        name: '--output-references',
+        description: 'Include references in the build output.',
+        defaultValue: true,
+      },
       {
         name: '-t, --themes',
         description: 'Specify themes to include in the token build.',
         defaultValue: 'light',
       },
+      {
+        name: '-v, --verbose',
+        description: 'Enable verbose logging.',
+        defaultValue: false,
+      },
     ],
   },
   'replace-variables': {

lib/build-tokens.js

@@ -1,6 +1,10 @@
 const path = require('path');
 const minimist = require('minimist');
-const { initializeStyleDictionary, createCustomCSSVariables, colorTransform } = require('../tokens/style-dictionary');
+const {
+  initializeStyleDictionary,
+
+  colorTransform,
+} = require('../tokens/style-dictionary');
 const { createIndexCssFile } = require('../tokens/utils');
 
 /**
@@ -13,24 +17,37 @@ const { createIndexCssFile } = require('../tokens/utils');
  * @param {string|string[]} [commandArgs.themes=['light']] - The themes (variants) for which to build tokens.
  */
 async function buildTokensCommand(commandArgs) {
-  const StyleDictionary = await initializeStyleDictionary();
-
   const defaultParams = {
     themes: ['light'],
     'build-dir': './build/',
+    'source-tokens-only': false,
+    'output-references': true,
+    verbose: false,
   };
 
   const alias = {
     'build-dir': 'b',
     themes: 't',
+    verbose: '-v',
   };
 
   const {
     'build-dir': buildDir,
     source: tokensSource,
     'source-tokens-only': hasSourceTokensOnly,
+    'output-references': outputReferences,
     themes,
-  } = minimist(commandArgs, { alias, default: defaultParams, boolean: 'source-tokens-only' });
+    verbose,
+  } = minimist(
+    commandArgs,
+    {
+      alias,
+      default: defaultParams,
+      boolean: ['source-tokens-only', 'output-references', 'verbose'],
+    },
+  );
+
+  const StyleDictionary = await initializeStyleDictionary({ themes });
 
   const coreConfig = {
     include: [
@@ -43,7 +60,6 @@ async function buildTokensCommand(commandArgs) {
     platforms: {
       css: {
         prefix: 'pgn',
-        transformGroup: 'css',
         // NOTE: buildPath must end with a slash
         buildPath: buildDir.slice(-1) === '/' ? buildDir : `${buildDir}/`,
         files: [
@@ -52,24 +68,30 @@ async function buildTokensCommand(commandArgs) {
             destination: 'core/variables.css',
             filter: hasSourceTokensOnly ? 'isSource' : undefined,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
+              formatting: {
+                fileHeaderTimestamp: true,
+              },
             },
           },
           {
             format: 'css/custom-media-breakpoints',
             destination: 'core/custom-media-breakpoints.css',
             filter: hasSourceTokensOnly ? 'isSource' : undefined,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
+              formatting: {
+                fileHeaderTimestamp: true,
+              },
             },
           },
         ],
         transforms: StyleDictionary.hooks.transformGroups.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'),
-        options: {
-          fileHeader: 'customFileHeader',
-        },
       },
     },
+    log: {
+      verbosity: verbose ? 'verbose' : 'default',
+    },
   };
 
   const getStyleDictionaryConfig = (themeVariant) => ({
@@ -91,45 +113,62 @@ async function buildTokensCommand(commandArgs) {
         transform: (token) => colorTransform(token, themeVariant),
       },
     },
-    format: {
-      'css/custom-variables': formatterArgs => createCustomCSSVariables({
-        formatterArgs,
-        themeVariant,
-      }),
-    },
     platforms: {
       css: {
         ...coreConfig.platforms.css,
         files: [
           {
             format: 'css/custom-variables',
             destination: `themes/${themeVariant}/variables.css`,
-            filter: hasSourceTokensOnly ? 'isSource' : undefined,
+            filter: hasSourceTokensOnly
+              ? `isSource.${themeVariant}`
+              : `isThemeVariant.${themeVariant}`,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
+              formatting: {
+                fileHeaderTimestamp: true,
+              },
             },
           },
           {
             format: 'css/utility-classes',
             destination: `themes/${themeVariant}/utility-classes.css`,
             filter: hasSourceTokensOnly ? 'isSource' : undefined,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
+              formatting: {
+                fileHeaderTimestamp: true,
+              },
             },
           },
         ],
       },
     },
   });
 
-  new StyleDictionary(coreConfig).buildAllPlatforms();
-  createIndexCssFile({ buildDir, isTheme: false });
+  // Create list of style-dictionary configurations to build (core + theme variants)
+  const configs = [
+    { config: coreConfig },
+    ...themes.map((themeVariant) => {
+      const config = getStyleDictionaryConfig(themeVariant);
+      return {
+        config,
+        themeVariant,
+      };
+    }),
+  ];
 
-  themes.forEach(async (themeVariant) => {
-    const config = getStyleDictionaryConfig(themeVariant);
-    new StyleDictionary(config).buildAllPlatforms();
-    createIndexCssFile({ buildDir, isTheme: true, themeVariant });
-  });
+  // Build tokens for each configuration
+  await Promise.all(configs.map(async ({ config, isThemeVariant, themeVariant }) => {
+    const sd = new StyleDictionary(config);
+    await sd.cleanAllPlatforms();
+    await sd.buildAllPlatforms();
+    createIndexCssFile({
+      buildDir,
+      isThemeVariant: !!isThemeVariant,
+      themeVariant,
+    });
+  }));
 }
 
 module.exports = buildTokensCommand;

package.json

@@ -52,7 +52,8 @@
     "prepare": "husky || true",
     "build-tokens": "./bin/paragon-scripts.js build-tokens --build-dir ./styles/css",
     "replace-variables-usage-with-css": "./bin/paragon-scripts.js replace-variables -p src -t usage",
-    "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition"
+    "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition",
+    "cli:help": "./bin/paragon-scripts.js help"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.4",
@@ -114,7 +115,7 @@
     "@babel/preset-typescript": "^7.16.7",
     "@edx/eslint-config": "^3.2.0",
     "@edx/stylelint-config-edx": "^2.3.0",
-    "@edx/typescript-config": "^1.0.1",
+    "@edx/typescript-config": "^1.1.0",
     "@formatjs/cli": "^5.0.2",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/git": "^10.0.1",
@@ -198,10 +199,10 @@
     ]
   },
   "lint-staged": {
-    "*.{mjs}": [
+    "*.{js,jsx,ts,tsx}": [
       "npx eslint"
     ],
-    "*.sass": [
+    "*.scss": [
       "npx stylelint"
     ]
   },

src/Card/CardDeck.jsx

@@ -1,7 +1,6 @@
 import React, { Children, useMemo } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import BaseCardDeck from 'react-bootstrap/CardDeck';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import { useOverflowScrollItems } from '../OverflowScroll';
@@ -102,6 +101,4 @@ CardDeck.defaultProps = {
   hasEqualColumnHeights: true,
 };
 
-CardDeck.Deprecated = BaseCardDeck;
-
 export default CardDeck;

src/Card/README.md

@@ -899,37 +899,6 @@ For accessibility, if the child `Card` components are interactive (e.g., `isClic
 }
 ```
 
-### CardDeck.Deprecated
-
-Gives any child `Card` components equal height with an appropriate gutter between cards. Each child `Card` component's width will be adjusted (e.g., become more narrow) to ensure all `Card` components fit within its parent's width.
-
-Note: This component is a pass-thru from `react-bootstrap`.
-
-```jsx live
-() => {
-  const CardComponent = () => (
-    <Card>
-      <Card.ImageCap
-        src="https://picsum.photos/360/200/"
-        srcAlt="Card image"
-      />
-      <Card.Header title="Card title" />
-      <Card.Section title="Section title">
-        <HipsterIpsum numShortParagraphs={1} />
-      </Card.Section>
-    </Card>
-  );
-
-  return (
-    <CardDeck.Deprecated>
-      <CardComponent />
-      <CardComponent />
-      <CardComponent />
-    </CardDeck.Deprecated>
-  )
-}
-```
-
 ## CardCarousel
 
 Extends `CardDeck` to support navigating between any overflow `Card` components via left and right `IconButton` components as a scrollable carousel.

src/Card/index.scss

@@ -136,11 +136,11 @@ a.pgn__card {
     }
 
     .pgn__card-header-title-sm {
-      font-size: var(--pgn-typography-font-size-h4);
+      font-size: var(--pgn-typography-font-size-h4-base);
     }
 
     .pgn__card-header-title-md {
-      font-size: var(--pgn-typography-font-size-h3);
+      font-size: var(--pgn-typography-font-size-h3-base);
     }
 
     %header-subtitle {
@@ -155,11 +155,11 @@ a.pgn__card {
     }
 
     .pgn__card-header-subtitle-sm {
-      font-size: var(--pgn-typography-font-size-h5);
+      font-size: var(--pgn-typography-font-size-h5-base);
     }
 
     .pgn__card-header-subtitle-md {
-      font-size: var(--pgn-typography-font-size-h4);
+      font-size: var(--pgn-typography-font-size-h4-base);
     }
 
     .pgn__card-header-actions {
@@ -271,7 +271,7 @@ a.pgn__card {
     .pgn__card-section-title {
       color: var(--pgn-color-black);
       font-weight: var(--pgn-typography-font-weight-bold);
-      font-size: var(--pgn-typography-font-size-h5);
+      font-size: var(--pgn-typography-font-size-h5-base);
       margin-bottom: var(--pgn-spacing-card-spacer-y);
     }
 
@@ -392,7 +392,7 @@ a.pgn__card {
     }
 
     .pgn__card-status__heading {
-      font-size: var(--pgn-typography-font-size-h4);
+      font-size: var(--pgn-typography-font-size-h4-base);
       color: var(--pgn-color-black);
       display: flex;
       font-weight: var(--pgn-typography-font-weight-bold);

src/ColorPicker/index.scss

@@ -37,7 +37,7 @@
 
 .pgn__hex-label {
   font-weight: bold;
-  font-size: var(--pgn-typography-font-size-mobile-h5);
+  font-size: var(--pgn-typography-font-size-h5-mobile);
   padding: .5rem;
   margin-bottom: 0 !important;
 }

src/Form/_FormText.scss

@@ -1,5 +1,5 @@
 .pgn__form-text {
-  font-size: var(--pgn-typography-font-size-small-base);
+  font-size: var(--pgn-typography-font-size-sm);
   display: flex;
   align-items: center;
 

src/Modal/_ModalDialog.scss

@@ -122,7 +122,7 @@
   }
 
   .pgn__modal-title {
-    font-size: var(--pgn-typography-font-size-h3);
+    font-size: var(--pgn-typography-font-size-h3-base);
     margin-inline-end: 3rem; // roughly accomodate the width of the close buttonn
     text-align: start;
   }
@@ -310,7 +310,7 @@
   }
 
   .pgn__modal-title {
-    font-size: var(--pgn-typography-font-size-h4);
+    font-size: var(--pgn-typography-font-size-h4-base);
     display: flex;
     flex-grow: 1;
     align-items: center;