Generate CSS variables from instructure-ui theme

generate-css-stylesheet.js

const sort = (a, b) => (a < b ? -1 : 1);

function generateVars(theme) {
  let cssParts = [];
  for (const [key, val] of Object.entries(theme.variables)) {
    if (typeof val === "string") {
      cssParts.push(`--${key}: ${val};`);
    } else if (typeof val === "object") {
      for (const [key2, val2] of Object.entries(val)) {
        cssParts.push(`--${key}-${key2}: ${val2};`);
      }
    }
  }
  return `:root {
${cssParts
    .sort(sort)
    .map(part => `  ${part}`)
    .join("\n")}
}`;
}

variables.css

:root {
  --borders-radiusLarge: 0.5rem;
  --borders-radiusMedium: 0.25rem;
  --borders-radiusSmall: 0.125rem;
  --borders-style: solid;
  --borders-widthLarge: 0.25rem;
  --borders-widthMedium: 0.125rem;
  --borders-widthSmall: 0.0625rem;
  --breakpoints-large: 62em;
  --breakpoints-maxWidth: 61.9375em;
  --breakpoints-medium: 48em;
  --breakpoints-small: 30em;
  --breakpoints-xLarge: 75em;
  --breakpoints-xSmall: 16em;
  --breakpoints-xxSmall: 8em;
  --colors-ash: #8B969E;
  --colors-backgroundAlert: #BF32A4;
  --colors-backgroundBrand: #008EE2;
  --colors-backgroundBrandSecondary: #394B58;
  --colors-backgroundDanger: #EE0612;
  --colors-backgroundDark: #8B969E;
  --colors-backgroundDarkest: #2D3B45;
  --colors-backgroundInfo: #008EE2;
  --colors-backgroundLight: #F5F5F5;
  --colors-backgroundLightest: #FFFFFF;
  --colors-backgroundMedium: #C7CDD1;
  --colors-backgroundSuccess: #00AC18;
  --colors-backgroundWarning: #FC5E13;
  --colors-barney: #BF32A4;
  --colors-borderAlert: #BF32A4;
  --colors-borderBrand: #008EE2;
  --colors-borderDanger: #EE0612;
  --colors-borderDark: #8B969E;
  --colors-borderDarkest: #2D3B45;
  --colors-borderDebug: #EE0612;
  --colors-borderInfo: #008EE2;
  --colors-borderLight: #F5F5F5;
  --colors-borderLightest: #FFFFFF;
  --colors-borderMedium: #C7CDD1;
  --colors-borderSuccess: #00AC18;
  --colors-borderWarning: #FC5E13;
  --colors-brand: #008EE2;
  --colors-crimson: #EE0612;
  --colors-electric: #008EE2;
  --colors-fire: #FC5E13;
  --colors-licorice: #2D3B45;
  --colors-link: #2578CB;
  --colors-oxford: #394B58;
  --colors-porcelain: #F5F5F5;
  --colors-shamrock: #00AC18;
  --colors-slate: #8B969E;
  --colors-textAlert: #BF32A4;
  --colors-textBrand: #008EE2;
  --colors-textDanger: #EE0612;
  --colors-textDark: #8B969E;
  --colors-textDarkest: #2D3B45;
  --colors-textInfo: #008EE2;
  --colors-textLight: #F5F5F5;
  --colors-textLightest: #FFFFFF;
  --colors-textLink: #2578CB;
  --colors-textSuccess: #00AC18;
  --colors-textWarning: #FC5E13;
  --colors-tiara: #C7CDD1;
  --colors-white: #FFFFFF;
  --forms-inputHeightLarge: 3rem;
  --forms-inputHeightMedium: 2.375rem;
  --forms-inputHeightSmall: 1.75rem;
  --ic-brand-button--primary-bgd: #008EE2;
  --ic-brand-button--primary-text: #FFFFFF;
  --ic-brand-button--secondary-bgd: #2D3B45;
  --ic-brand-button--secondary-text: #FFFFFF;
  --ic-brand-font-color-dark: #2D3B45;
  --ic-brand-global-nav-bgd: #394B58;
  --ic-brand-global-nav-ic-icon-svg-fill--active: #008EE2;
  --ic-brand-global-nav-ic-icon-svg-fill: #FFFFFF;
  --ic-brand-global-nav-menu-item__text-color--active: #008EE2;
  --ic-brand-global-nav-menu-item__text-color: #FFFFFF;
  --ic-brand-primary: #008EE2;
  --ic-global-nav-link-hover: #2D3B45;
  --ic-link-color: #2578CB;
  --ic-link-decoration: none;
  --media-largeMin: min-width: 62em;
  --media-mediumMin: min-width: 48em;
  --media-xLargeMin: min-width: 75em;
  --shadows-above: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.1), 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
  --shadows-depth1: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2), 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
  --shadows-depth2: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.1), 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
  --shadows-depth3: 0 0.375rem 0.4375rem rgba(0, 0, 0, 0.1), 0 0.625rem 1.75rem rgba(0, 0, 0, 0.25);
  --shadows-resting: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2), 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
  --shadows-topmost: 0 0.375rem 0.4375rem rgba(0, 0, 0, 0.1), 0 0.625rem 1.75rem rgba(0, 0, 0, 0.25);
  --spacing-large: 2.25rem;
  --spacing-medium: 1.5rem;
  --spacing-small: 0.75rem;
  --spacing-xLarge: 3rem;
  --spacing-xSmall: 0.5rem;
  --spacing-xxLarge: 3.75rem;
  --spacing-xxSmall: 0.375rem;
  --spacing-xxxSmall: 0.125rem;
  --stacking-above: 1;
  --stacking-below: -1;
  --stacking-deepest: -9999;
  --stacking-topmost: 9999;
  --transitions-duration: 300ms;
  --transitions-timing: ease-in-out;
  --typography-fontFamily: LatoWeb, Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --typography-fontFamilyMonospace: Menlo, Consolas, Monaco, "Andale Mono", monospace;
  --typography-fontSizeLarge: 1.375rem;
  --typography-fontSizeMedium: 1rem;
  --typography-fontSizeSmall: 0.875rem;
  --typography-fontSizeXLarge: 1.75rem;
  --typography-fontSizeXSmall: 0.75rem;
  --typography-fontSizeXXLarge: 2.375rem;
  --typography-fontWeightBold: 700;
  --typography-fontWeightLight: 300;
  --typography-fontWeightNormal: 400;
  --typography-letterSpacingCondensed: -0.0625rem;
  --typography-letterSpacingExpanded: 0.0625rem;
  --typography-letterSpacingNormal: 0;
  --typography-lineHeight: 1.5;
  --typography-lineHeightCondensed: 1.25;
  --typography-lineHeightDouble: 2;
  --typography-lineHeightFit: 1.125;
}