@openedx/paragon 22.6.0 → 23.0.0-alpha.2

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

@@ -0,0 +1,201 @@
+{
+  "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

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

package/tokens/style-dictionary.js

@@ -0,0 +1,229 @@
+/**
+ * This module creates and exports custom StyleDictionary instance for Paragon.
+ */
+const toml = require('js-toml');
+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,
+});
+
+StyleDictionary.registerParser({
+  pattern: /\.toml$/,
+  parse: ({ contents }) => toml.load(contents),
+});
+
+module.exports = {
+  StyleDictionary,
+  createCustomCSSVariables,
+  colorTransform,
+};

package/tokens/utils.js

@@ -0,0 +1,210 @@
+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,
+};

package/dist/ActionRow/_variables.scss

@@ -1,2 +0,0 @@
-$action-row-gap-x:                   .5rem !default;
-$action-row-gap-y:                   .5rem !default;

package/dist/Alert/_variables.scss

@@ -1,24 +0,0 @@
-// Alerts
-//
-// Define alert colors, border radius, and padding.
-
-$alert-padding-y:                   1.5rem !default;
-$alert-padding-x:                   1.5rem !default;
-$alert-margin-bottom:               1rem !default;
-$alert-border-radius:               $border-radius !default;
-$alert-link-font-weight:            $font-weight-normal !default;
-$alert-border-width:                0 !default;
-$alert-title-color:                 #000000 !default;
-$alert-box-shadow:                  0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15) !default;
-
-$alert-bg-level:                    -10 !default;
-$alert-border-level:                -9 !default;
-$alert-color-level:                 6 !default;
-
-$alert-icon-space:                  .8rem !default;
-
-$alert-font-size:                   .875rem !default;
-$alert-line-height:                 1.5rem !default;
-$alert-content-color:               $gray-700 !default;
-
-$alert-actions-gap:                 map-get($spacers, 3);

package/dist/Annotation/_variables.scss

@@ -1,18 +0,0 @@
-$annotation-padding:               .5rem !default;
-$annotation-box-shadow:            drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
-  drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
-$annotation-border-radius:         .25rem !default;
-$annotation-max-width:             18.75rem !default;
-$annotation-font-size:             $font-size-sm !default;
-$annotation-line-height:           $line-height-sm !default;
-
-$annotation-variants: (
-  "success": ( "background-color": $success, "color": $white ),
-  "warning": ( "background-color": $accent-b, "color": $black ),
-  "error":   ( "background-color": $danger, "color": $white ),
-  "light":   ( "background-color": $white, "color": $primary-500 ),
-  "dark":    ( "background-color": $dark, "color": $white ),
-) !default;
-
-$annotation-arrow-side-margin:     .25rem !default;
-$annotation-arrow-border-width:    .5rem !default;