@openedx/paragon 22.0.0-alpha.23 → 22.0.0

package/tokens/src/themes/light/global/elevation.json

@@ -1,201 +0,0 @@
-{
-  "elevation": {
-    "box-shadow": {
-      "level": {
-        "1": {
-          "value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$level-1-box-shadow",
-          "description": "Basic box shadow of level 1."
-        },
-        "2": {
-          "value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$level-2-box-shadow",
-          "description": "Basic box shadow of level 2."
-        },
-        "3": {
-          "value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$level-3-box-shadow",
-          "description": "Basic box shadow of level 3."
-        },
-        "4": {
-          "value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$level-4-box-shadow",
-          "description": "Basic box shadow of level 4."
-        },
-        "5": {
-          "value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$level-5-box-shadow",
-          "description": "Basic box shadow of level 5."
-        }
-      },
-      "base": { "value": "0 .125rem .25rem rgba(0, 0, 0, .3)", "type": "shadow", "source": "$box-shadow", "description": "Default box shadow." },
-      "sm": { "value": "0 .0625rem .125rem rgba(0, 0, 0, .2)", "type": "shadow", "source": "$box-shadow-sm", "description": "Small box shadow." },
-      "lg": { "value": "0 .25rem .5rem rgba(0, 0, 0, .3)", "type": "shadow", "source": "$box-shadow-lg", "description": "Large box shadow." },
-      "down": {
-        "1": {
-          "value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-down-1",
-          "description": "Bottom box shadow of level 1."
-        },
-        "2": {
-          "value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-down-2",
-          "description": "Bottom box shadow of level 2."
-        },
-        "3": {
-          "value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-down-3",
-          "description": "Bottom box shadow of level 3."
-        },
-        "4": {
-          "value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-down-4",
-          "description": "Bottom box shadow of level 4."
-        },
-        "5": {
-          "value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-down-5",
-          "description": "Bottom box shadow of level 5."
-        }
-      },
-      "left": {
-        "1": {
-          "value": "-.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-left-1",
-          "description": "Left box shadow of level 1."
-        },
-        "2": {
-          "value": "-.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-left-2",
-          "description": "Left box shadow of level 2."
-        },
-        "3": {
-          "value": "-.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-left-3",
-          "description": "Left box shadow of level 3."
-        },
-        "4": {
-          "value": "-.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-left-4",
-          "description": "Left box shadow of level 4."
-        },
-        "5": {
-          "value": "-1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-left-5",
-          "description": "Left box shadow of level 5."
-        }
-      },
-      "up": {
-        "1": {
-          "value": "0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-up-1",
-          "description": "Top box shadow of level 1."
-        },
-        "2": {
-          "value": "0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-up-2",
-          "description": "Top box shadow of level 2."
-        },
-        "3": {
-          "value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-up-3",
-          "description": "Top box shadow of level 3."
-        },
-        "4": {
-          "value": "0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-up-4",
-          "description": "Top box shadow of level 4."
-        },
-        "5": {
-          "value": "0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-up-5",
-          "description": "Basic box shadow of level 5."
-        }
-      },
-      "right": {
-        "1": {
-          "value": ".0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-right-1",
-          "description": "Right box shadow of level 1."
-        },
-        "2": {
-          "value": ".125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-right-2",
-          "description": "Right box shadow of level 2."
-        },
-        "3": {
-          "value": ".5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-right-3",
-          "description": "Right box shadow of level 3."
-        },
-        "4": {
-          "value": ".625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-right-4",
-          "description": "Right box shadow of level 4."
-        },
-        "5": {
-          "value": "1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-right-5",
-          "description": "Right box shadow of level 5."
-        }
-      },
-      "centered": {
-        "1": {
-          "value": "0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-centered-1",
-          "description": "Centered box shadow of level 1."
-        },
-        "2": {
-          "value": "0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-centered-2",
-          "description": "Centered box shadow of level 2."
-        },
-        "3": {
-          "value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-centered-3",
-          "description": "Centered box shadow of level 3."
-        },
-        "4": {
-          "value": "0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-centered-4",
-          "description": "Centered box shadow of level 4."
-        },
-        "5": {
-          "value": "0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$box-shadow-centered-5",
-          "description": "Centered box shadow of level 5."
-        }
-      }
-    }
-  }
-}

package/tokens/src/themes/light/global/other.json

@@ -1,4 +0,0 @@
-{
-  "yiq-text-dark": "#454545",
-  "yiq-text-light": "#FFFFFF"
-}

package/tokens/style-dictionary.js

@@ -1,223 +0,0 @@
-/**
- * This module creates and exports custom StyleDictionary instance for Paragon.
- */
-const StyleDictionary = require('style-dictionary');
-const chroma = require('chroma-js');
-const { colorYiq, darken, lighten } = require('./sass-helpers');
-const cssUtilities = require('./css-utilities');
-const { composeBreakpointName } = require('./utils');
-
-const { fileHeader, sortByReference } = StyleDictionary.formatHelpers;
-
-const colorTransform = (token, theme) => {
-  const {
-    name: tokenName,
-    value,
-    original,
-    modify = [],
-  } = token;
-  const reservedColorValues = ['inherit', 'initial', 'revert', 'unset', 'currentColor'];
-
-  if (reservedColorValues.includes(original.value)) {
-    return original.value;
-  }
-
-  let color = chroma(value);
-
-  if (modify && modify.length > 0) {
-    modify.forEach((modifier) => {
-      const { type, amount, otherColor } = modifier;
-      switch (type) {
-        case 'mix':
-          color = color.mix(otherColor, amount, 'rgb');
-          break;
-        case 'color-yiq': {
-          const { light, dark, threshold } = modifier;
-          color = colorYiq({
-            tokenName,
-            backgroundColor: color,
-            light,
-            dark,
-            threshold,
-            theme,
-          });
-          break;
-        }
-        case 'darken':
-          color = darken(color, amount);
-          break;
-        case 'lighten':
-          color = lighten(color, amount);
-          break;
-        default:
-          color = color[type](amount);
-      }
-    });
-  }
-
-  return color.hex('rgba').toUpperCase();
-};
-
-/**
- * Custom formatter that extends default css/variables format to allow specifying
- * 1. 'outputReferences' per token (by default you are only able to specify it globally for all tokens)
- * 2. 'theme' to output only theme's variables (e.g, 'light' or 'dark'), if theme is not provided - only
- * core tokens are built.
- */
-const createCustomCSSVariables = ({
-  formatterArgs,
-  themeVariant,
-}) => {
-  const { dictionary, options, file } = formatterArgs;
-
-  const outputTokens = themeVariant
-    ? dictionary.allTokens.filter(token => token.filePath.includes(themeVariant))
-    : dictionary.allTokens;
-
-  const variables = outputTokens.sort(sortByReference(dictionary)).map(token => {
-    let { value } = token;
-
-    const outputReferencesForToken = (token.original.outputReferences === false) ? false : options.outputReferences;
-
-    if (dictionary.usesReference(token.original.value) && outputReferencesForToken) {
-      const refs = dictionary.getReferences(token.original.value);
-      refs.forEach(ref => {
-        value = value.replace(ref.value, `var(--${ref.name})`);
-      });
-    }
-
-    return `  --${token.name}: ${value};`;
-  }).join('\n');
-
-  return `${fileHeader({ file })}:root {\n${variables}\n}\n`;
-};
-
-/**
- * Transformer that applies SASS color functions to tokens.
- */
-StyleDictionary.registerTransform({
-  name: 'color/sass-color-functions',
-  transitive: true,
-  type: 'value',
-  matcher(token) {
-    return token.attributes.category === 'color' || token.value?.toString().startsWith('#');
-  },
-  transformer: colorTransform,
-});
-
-/**
- * Transforms that implements str-replace from SASS.
- */
-StyleDictionary.registerTransform({
-  name: 'str-replace',
-  transitive: true,
-  type: 'value',
-  matcher(token) {
-    return token.modify && token.modify[0].type === 'str-replace';
-  },
-  transformer(token) {
-    const { value, modify } = token;
-    const { toReplace, replaceWith } = modify[0];
-    return value.replaceAll(toReplace, replaceWith);
-  },
-});
-
-/**
- * The custom formatter to create CSS variables for core tokens.
- */
-StyleDictionary.registerFormat({
-  name: 'css/custom-variables',
-  formatter: formatterArgs => createCustomCSSVariables({ formatterArgs }),
-});
-
-/**
- * Formatter to generate CSS utility classes.
- * Looks in ./src/utilities/ to get utility classes configuration, filters tokens by 'filters' object attributes
- * (see https://amzn.github.io/style-dictionary/#/tokens?id=category-type-item for possible keys in the object,
- * each key should have a list of valid values) and generates CSS classes with using functions defined in
- * 'utilityFunctionsToApply' list, those functions must be located in css-utilities.js module and return string.
- */
-StyleDictionary.registerFormat({
-  name: 'css/utility-classes',
-  formatter({ dictionary, file }) {
-    const { utilities } = dictionary.properties;
-
-    if (!utilities) {
-      return '';
-    }
-
-    let utilityClasses = '';
-
-    utilities.forEach(({ filters, utilityFunctionsToApply }) => {
-      let tokens = dictionary.allTokens;
-
-      Object.entries(filters).forEach(([attributeName, allowedValues]) => {
-        tokens = tokens.filter((token) => allowedValues.includes(token.attributes[attributeName]));
-      });
-
-      // eslint-disable-next-line no-restricted-syntax
-      for (const token of tokens) {
-        // Get action token by reference
-        const ref = dictionary.getReferences(token.original.actions.default)[0];
-        token.actions = { default: `var(--${ref.name})` };
-        // eslint-disable-next-line no-restricted-syntax
-        for (const funcName of utilityFunctionsToApply) {
-          utilityClasses += cssUtilities[funcName](token);
-        }
-      }
-    });
-
-    return fileHeader({ file }) + utilityClasses;
-  },
-});
-
-/**
- * Formatter to generate CSS custom media queries for responsive breakpoints.
- * Gets input about existing tokens of the 'size' category,
- * 'breakpoints' subcategory, and generates a CSS custom media queries.
- */
-StyleDictionary.registerFormat({
-  name: 'css/custom-media-breakpoints',
-  formatter({ dictionary, file }) {
-    const { size: { breakpoint } } = dictionary.properties;
-
-    let customMediaVariables = '';
-    const breakpoints = Object.values(breakpoint || {});
-
-    for (let i = 0; i < breakpoints.length; i++) {
-      const [currentBreakpoint, nextBreakpoint] = [breakpoints[i], breakpoints[i + 1]];
-      customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'min')} (min-width: ${currentBreakpoint.value});\n`;
-      if (nextBreakpoint) {
-        customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'max')} (max-width: ${nextBreakpoint.value});\n`;
-      }
-    }
-
-    return fileHeader({ file }) + customMediaVariables;
-  },
-});
-
-/**
- * Custom file header for custom and built-in formatters.
- */
-StyleDictionary.registerFileHeader({
-  name: 'customFileHeader',
-  fileHeader: (defaultMessage) => [
-    'IMPORTANT: This file is the result of assembling design tokens',
-    ...defaultMessage,
-  ],
-});
-
-/**
- * Registers a filter `isSource` that filters output to only include tokens
- * that are marked as `isSource` in their metadata.
- */
-StyleDictionary.registerFilter({
-  name: 'isSource',
-  matcher: token => token?.isSource === true,
-});
-
-module.exports = {
-  StyleDictionary,
-  createCustomCSSVariables,
-  colorTransform,
-};

package/tokens/utils.js

@@ -1,210 +0,0 @@
-const fs = require('fs');
-const readline = require('readline');
-const path = require('path');
-
-function getFilesWithExtension(location, extension, files = [], excludeDirectories = []) {
-  const content = fs.statSync(location);
-  if (content.isDirectory()) {
-    const contentPaths = fs.readdirSync(location);
-    contentPaths.forEach(contentPath => {
-      if (!excludeDirectories.includes(contentPath)) {
-        getFilesWithExtension(path.join(location, contentPath), extension, files, excludeDirectories);
-      }
-    });
-  } else if (location.endsWith(extension)) {
-    files.push(location);
-  }
-  return files;
-}
-
-function getSCSStoCSSMap(prefix, tokensObject, result) {
-  Object.entries(tokensObject).forEach(([node, value]) => {
-    if (value?.constructor.name === 'Object') {
-      const newPrefix = `${prefix}-${node}`;
-      getSCSStoCSSMap(newPrefix, value, result);
-    } else if (node === 'source') {
-      // eslint-disable-next-line no-param-reassign
-      result[value] = `var(${prefix})`;
-    }
-  });
-  return result;
-}
-
-async function replaceVariablesUsage(filePath, variablesMap, direction = 'scss-to-css') {
-  let variableRegex;
-  let result = '';
-
-  if (direction === 'css-to-scss') {
-    variableRegex = /var\((\w|-|_)*\)/g;
-  } else if (direction === 'scss-to-css') {
-    variableRegex = /(\$|#{\$)(\w|-|_)*(}|,|;|\)|\s|$)/g;
-  }
-
-  const fileStream = fs.createReadStream(filePath);
-
-  const rl = readline.createInterface({
-    input: fileStream,
-    crlfDelay: Infinity,
-  });
-
-  // eslint-disable-next-line no-restricted-syntax
-  for await (const line of rl) {
-    let parsedLine = line;
-    const variables = [...parsedLine.matchAll(variableRegex)];
-
-    variables.forEach(variableData => {
-      let varExpressionToReplace = variableData[0];
-      let actualVariable = varExpressionToReplace;
-
-      if (direction === 'scss-to-css') {
-        // handle interpolation expressions first, e.g. #{$some-variable}
-        if (varExpressionToReplace.startsWith('#{') && varExpressionToReplace.endsWith('}')) {
-          actualVariable = varExpressionToReplace.slice(2, -1);
-
-          // general case, e.g. $some-variable;
-        } else if ([',', ';', ')', ' ', '}'].includes(varExpressionToReplace.slice(-1))) {
-          varExpressionToReplace = varExpressionToReplace.slice(0, -1);
-          actualVariable = varExpressionToReplace;
-        }
-      }
-
-      if (actualVariable in variablesMap) {
-        parsedLine = parsedLine.replaceAll(varExpressionToReplace, variablesMap[actualVariable]);
-      }
-    });
-
-    result += `${parsedLine}\n`;
-  }
-
-  fs.writeFileSync(filePath, result);
-}
-
-/**
- * Replaces SCSS variables definition with value from design tokens
- *
- * @async
- * @param {string} pathToStylesheet - full path to the stylesheet where to perform replacement
- * @param {Object} variablesMap - object that contains variables definitions to use during replacement
- */
-async function replaceVariablesDefinitions(pathToStylesheet, variablesMap) {
-  const fileStream = fs.createReadStream(pathToStylesheet);
-
-  const rl = readline.createInterface({
-    input: fileStream,
-    crlfDelay: Infinity,
-  });
-
-  let result = '';
-  let currentVar = '';
-  let currentValue = '';
-
-  function processVariable() {
-    if (currentVar) {
-      if (currentVar in variablesMap) {
-        result += `${currentVar}: ${variablesMap[currentVar]} !default;\n`;
-      } else {
-        result += `${currentVar}:${currentValue}`;
-      }
-    } else {
-      result += currentValue;
-    }
-  }
-
-  // eslint-disable-next-line no-restricted-syntax
-  for await (const line of rl) {
-    if (line.startsWith('$')) {
-      processVariable();
-      [currentVar, ...currentValue] = line.split(':');
-      currentValue = `${currentValue.join(':')}\n`;
-    } else if (!line.trim() || line.startsWith('\\')) {
-      processVariable();
-      currentVar = '';
-      currentValue = `${line}\n`;
-    } else {
-      currentValue += `${line}\n`;
-    }
-  }
-
-  // last variable was not covered by the loop
-  processVariable();
-
-  fs.writeFileSync(pathToStylesheet, result);
-}
-
-/**
- * Update SCSS variables definitions or usages in given path with CSS variables derived from design tokens
- *
- * @param {string} location - path where to update variables
- * @param {Object} variablesMap - SCSS-to-CSS or CSS-to-SCSS mapping of the variables
- * @param {string} transformType - type of operation, one of ['definition', 'usage'].
- * 'definition' will replace SCSS variables definitions with CSS ones, while 'usage' will replace all occurrences
- * of SCSS / CSS variables (depends on the direction parameter).
- * @param {Array[string]} excludePaths - exclude paths from the search
- * @param {string} direction - replacement direction of variables, takes effect only when transformType === 'usage'.
- * Can be either 'scss-to-css' or 'css-to-scss'.
- * @return {Promise<void>}
- */
-async function transformInPath(location, variablesMap, transformType = 'definition', excludePaths = [], direction = 'scss-to-css') {
-  const content = fs.statSync(location);
-  if (content.isDirectory()) {
-    const contentPaths = fs.readdirSync(location);
-    contentPaths.forEach(contentPath => {
-      if (!excludePaths.includes(contentPath)) {
-        transformInPath(path.join(location, contentPath), variablesMap, transformType, excludePaths, direction);
-      }
-    });
-  } else if (location.endsWith('.scss')) {
-    if (transformType === 'usage') {
-      await replaceVariablesUsage(location, variablesMap, direction);
-    } else {
-      await replaceVariablesDefinitions(location, variablesMap);
-    }
-  }
-}
-
-function createIndexCssFile({ buildDir = path.resolve(__dirname, '../styles/css'), isTheme, themeVariant }) {
-  const directoryPath = isTheme ? `${buildDir}/themes/${themeVariant}` : `${buildDir}/core`;
-
-  fs.readdir(directoryPath, (errDir, files) => {
-    if (errDir) {
-      // eslint-disable-next-line no-console
-      console.error('Error reading directory:', errDir);
-      return;
-    }
-
-    const outputCssFiles = files.filter(file => file !== 'index.css');
-    // When creating themes, there are typically two files: one for utility classes and one for variables.
-    // It's organized them to allow variables be reading first.
-    if (isTheme) { outputCssFiles.reverse(); }
-
-    const exportStatements = outputCssFiles.map((file) => `@import "${file}";`);
-
-    const indexContent = `${exportStatements.join('\n')}\n`;
-
-    fs.writeFile(path.join(directoryPath, 'index.css'), indexContent, (errFile) => {
-      if (errFile) {
-        // eslint-disable-next-line no-console
-        console.error('Error creating index file:', errFile);
-      }
-    });
-  });
-}
-
-/**
- * Composes a breakpoint name according to the Paragon namespace.
- *
- * @param {string} breakpointName - breakpoint initial name.
- * @param {string} format - screen width format.
- * @return {string} - new breakpoint name.
- */
-function composeBreakpointName(breakpointName, format) {
-  return `@custom-media --${breakpointName.replace(/breakpoint/g, `breakpoint-${format}-width`)}`;
-}
-
-module.exports = {
-  createIndexCssFile,
-  getFilesWithExtension,
-  getSCSStoCSSMap,
-  transformInPath,
-  composeBreakpointName,
-};