@digigov/css 2.0.0-60d81ed8 → 2.0.0-6452adf3

package/defaultTheme/layout.json

@@ -1,55 +0,0 @@
-{
-  "footer__copyright": {
-    "font-size": {
-      "xs": "var(--text-sm)",
-      "md": "var(--text-base)"
-    }
-  },
-  "footer": {
-    "border": {
-      "xs": "solid var(--color-tertiary)"
-    },
-    "border-width": {
-      "xs": "4px 0 0 0"
-    },
-    "background-color": {
-      "xs": "var(--color-base-200)"
-    },
-    "color": {
-      "xs": "var(--color-base-800)"
-    }
-  },
-  "footer__link": {
-    "text-decoration": {
-      "xs": "underline"
-    },
-    "text-decoration-hover": {
-      "xs": "underline"
-    },
-    "color-hover": {
-      "xs": "var(--link-color-hover)"
-    },
-    "color-focus": {
-      "xs": "var(--link-color-active)"
-    }
-  },
-  "header": {
-    "border": {
-      "xs": "solid var(--color-tertiary)"
-    },
-    "border-width": {
-      "xs": "0 0 8px 0"
-    },
-    "background": {
-      "xs": "var(--color-primary)"
-    }
-  },
-  "header__title": {
-    "color": {
-      "xs": "var(--color-header-text)"
-    },
-    "color-hover": {
-      "xs": "var(--color-header-text-hover)"
-    }
-  }
-}

package/defaultTheme/misc.json

@@ -1,68 +0,0 @@
-{
-  "warning-text": {
-    "font-size": {
-      "xs": "var(--text-base)",
-      "md": "var(--text-lg)"
-    }
-  },
-  "details": {
-    "font-size": {
-      "xs": "var(--text-base)",
-      "md": "var(--text-lg)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-base)",
-      "md": "var(--line-h-lg)"
-    }
-  },
-  "details__summary": {
-    "font-size": {
-      "xs": "var(--text-base)",
-      "md": "var(--text-lg)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-base)",
-      "md": "var(--line-h-lg)"
-    }
-  },
-  "details__summary--lg": {
-    "font-size": {
-      "xs": "var(--text-lg)",
-      "md": "var(--text-xl)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-lg)",
-      "md": "var(--line-h-xl)"
-    }
-  },
-  "blockquote": {
-    "font-size": {
-      "xs": "var(--text-base)",
-      "md": "var(--text-lg)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-base)",
-      "md": "var(--line-h-lg)"
-    }
-  },
-  "notification-banner": {
-    "border-radius": {
-      "xs": "var(--border-radius-md)"
-    }
-  },
-  "circular-progress__circle--1": {
-    "stroke": {
-      "xs": "var(--color-secondary)"
-    }
-  },
-  "circular-progress__circle--2": {
-    "stroke": {
-      "xs": "var(--color-primary)"
-    }
-  },
-  "tabs__panel": {
-    "border-radius": {
-      "xs": "0"
-    }
-  }
-}

package/defaultTheme/panel.json

@@ -1,48 +0,0 @@
-{
-  "panel": {
-    "border-radius": {
-      "xs": "var(--border-radius-md)"
-    }
-  },
-  "panel__title": {
-    "font-size": {
-      "xs": "var(--text-4xl)",
-      "md": "var(--text-5xl)",
-      "print": "var(--text-4xl)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-4xl)",
-      "md": "var(--line-h-5xl)",
-      "print": "var(--line-h-4xl)"
-    },
-    "margin-bottom": {
-      "xs": "1rem",
-      "md": "1.5rem",
-      "print": "1.5rem"
-    },
-    "font-weight": {
-      "xs": "700"
-    },
-    "letter-spacing": {
-      "xs": "var(--letter-spacing-normal)"
-    }
-  },
-  "panel__body": {
-    "font-size": {
-      "xs": "var(--text-2xl)",
-      "md": "var(--text-4xl)",
-      "print": "var(--text-2xl)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-2xl)",
-      "md": "var(--line-h-4xl)",
-      "print": "var(--line-h-2xl)"
-    },
-    "margin": {
-      "xs": "auto"
-    },
-    "letter-spacing": {
-      "xs": "var(--letter-spacing-normal)"
-    }
-  }
-}

package/defaultTheme/phase-banner.json

@@ -1,8 +0,0 @@
-{
-  "phase-banner__content": {
-    "font-size": {
-      "xs": "var(--text-base)",
-      "md": "var(--text-lg)"
-    }
-  }
-}

package/defaultTheme/radios.json

@@ -1,8 +0,0 @@
-{
-  "radios__label": {
-    "font-size": {
-      "xs": "var(--text-base)",
-      "md": "var(--text-lg)"
-    }
-  }
-}

package/defaultTheme/summary-list.json

@@ -1,8 +0,0 @@
-{
-  "summary-list": {
-    "font-size": {
-      "xs": "var(--text-base)",
-      "md": "var(--text-lg)"
-    }
-  }
-}

package/defaultTheme/typography.json

@@ -1,295 +0,0 @@
-{
-  "heading-xl": {
-    "font-size": {
-      "xs": "var(--text-3xl)",
-      "md": "var(--text-5xl)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-3xl)",
-      "md": "var(--line-h-5xl)"
-    },
-    "margin-bottom": {
-      "xs": "2rem",
-      "md": "3rem"
-    },
-    "font-weight": {
-      "xs": "700"
-    },
-    "letter-spacing": {
-      "xs": "var(--letter-spacing-normal)"
-    }
-  },
-  "heading-lg": {
-    "font-size": {
-      "xs": "var(--text-2xl)",
-      "md": "var(--text-4xl)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-2xl)",
-      "md": "var(--line-h-4xl)"
-    },
-    "margin-bottom": {
-      "xs": "2rem",
-      "md": "2.5rem"
-    },
-    "font-weight": {
-      "xs": "700"
-    },
-    "letter-spacing": {
-      "xs": "var(--letter-spacing-normal)"
-    }
-  },
-  "heading-md": {
-    "font-size": {
-      "xs": "var(--text-xl)",
-      "md": "var(--text-2xl)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-xl)",
-      "md": "var(--line-h-2xl)"
-    },
-    "margin-bottom": {
-      "xs": "1.5rem",
-      "md": "2rem"
-    },
-    "font-weight": {
-      "xs": "700"
-    },
-    "letter-spacing": {
-      "xs": "var(--letter-spacing-normal)"
-    }
-  },
-  "heading-sm": {
-    "font-size": {
-      "xs": "var(--text-base)",
-      "md": "var(--text-lg)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-base)",
-      "md": "var(--line-h-lg)"
-    },
-    "margin-bottom": {
-      "xs": "0.75rem",
-      "md": "1.25rem"
-    },
-    "font-weight": {
-      "xs": "700"
-    },
-    "letter-spacing": {
-      "xs": "var(--letter-spacing-normal)"
-    }
-  },
-  "heading-xs": {
-    "font-size": {
-      "xs": "var(--text-sm)",
-      "md": "var(--text-base)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-sm)",
-      "md": "var(--line-h-base)"
-    },
-    "margin-bottom": {
-      "xs": "0.5rem",
-      "md": "1rem"
-    },
-    "font-weight": {
-      "xs": "700"
-    },
-    "letter-spacing": {
-      "xs": "var(--letter-spacing-normal)"
-    }
-  },
-  "caption-xl": {
-    "font-size": {
-      "xs": "var(--text-xl)",
-      "md": "var(--text-2xl)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-xl)",
-      "md": "var(--line-h-2xl)"
-    },
-    "margin-bottom": {
-      "xs": "0.25rem",
-      "md": "0.5rem"
-    },
-    "color": {
-      "xs": "var(--color-base-800)"
-    },
-    "font-weight": {
-      "xs": "400"
-    },
-    "letter-spacing": {
-      "xs": "var(--letter-spacing-normal)"
-    }
-  },
-  "caption-lg": {
-    "font-size": {
-      "xs": "var(--text-lg)",
-      "md": "var(--text-xl)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-lg)",
-      "md": "var(--line-h-xl)"
-    },
-    "margin-bottom": {
-      "xs": "0rem"
-    },
-    "color": {
-      "xs": "var(--color-base-800)"
-    },
-    "font-weight": {
-      "xs": "400"
-    },
-    "letter-spacing": {
-      "xs": "var(--letter-spacing-normal)"
-    }
-  },
-  "caption-md": {
-    "font-size": {
-      "xs": "var(--text-base)",
-      "md": "var(--text-lg)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-base)",
-      "md": "var(--line-h-lg)"
-    },
-    "margin-bottom": {
-      "xs": "0rem"
-    },
-    "color": {
-      "xs": "var(--color-base-800)"
-    },
-    "font-weight": {
-      "xs": "400"
-    },
-    "letter-spacing": {
-      "xs": "var(--letter-spacing-normal)"
-    }
-  },
-  "body": {
-    "font-size": {
-      "xs": "var(--text-base)",
-      "md": "var(--text-lg)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-base)",
-      "md": "var(--line-h-lg)"
-    },
-    "margin-bottom": {
-      "xs": "1rem",
-      "md": "2rem"
-    },
-    "color": {
-      "xs": "var(--color-base-content)"
-    },
-    "letter-spacing": {
-      "xs": "var(--letter-spacing-normal)"
-    }
-  },
-  "body--lg": {
-    "font-size": {
-      "xs": "var(--text-lg)",
-      "md": "var(--text-2xl)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-lg)",
-      "md": "var(--line-h-2xl)"
-    }
-  },
-  "body--sm": {
-    "font-size": {
-      "xs": "var(--text-sm)",
-      "md": "var(--text-base)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-sm)",
-      "md": "var(--text-base)"
-    }
-  },
-  "hint": {
-    "font-size": {
-      "xs": "var(--text-base)",
-      "md": "var(--text-lg)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-base)",
-      "md": "var(--line-h-lg)"
-    },
-    "margin-bottom": {
-      "xs": "1rem"
-    },
-    "color": {
-      "xs": "var(--color-base-800)"
-    },
-    "letter-spacing": {
-      "xs": "var(--letter-spacing-normal)"
-    }
-  },
-  "hint--lg": {
-    "font-size": {
-      "xs": "var(--text-lg)",
-      "md": "var(--text-2xl)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-lg)",
-      "md": "var(--line-h-2xl)"
-    }
-  },
-  "hint--sm": {
-    "font-size": {
-      "xs": "var(--text-sm)",
-      "md": "var(--text-base)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-sm)",
-      "md": "var(--text-lg)"
-    }
-  },
-  "link": {
-    "color": {
-      "xs": "var(--color-link)"
-    },
-    "color-active": {
-      "xs": "var(--color-link-active)"
-    },
-    "color-hover": {
-      "xs": "var(--color-link-hover)"
-    },
-    "padding": {
-      "xs": "0px"
-    },
-    "font-size": {
-      "xs": "var(--text-base)",
-      "md": "var(--text-lg)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-base)",
-      "md": "var(--line-h-lg)"
-    },
-    "letter-spacing": {
-      "xs": "var(--letter-spacing-normal)"
-    }
-  },
-  "back-link": {
-    "font-size": {
-      "xs": "var(--text-base)",
-      "md": "var(--text-lg)"
-    },
-    "letter-spacing": {
-      "xs": "var(--letter-spacing-normal)"
-    }
-  },
-  "list": {
-    "font-size": {
-      "xs": "var(--text-base)",
-      "md": "var(--text-lg)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-base)",
-      "md": "var(--line-h-lg)"
-    },
-    "letter-spacing": {
-      "xs": "var(--letter-spacing-normal)"
-    }
-  }
-}

package/themes.plugin.js

@@ -1,148 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-const postcss = require("postcss");
-const postcssrc = require("postcss-load-config");
-const postcssJs = require("postcss-js");
-
-const prefix = "ds";
-const mediaQueriesMapping = {
-  xs: "@media (min-width: 0px)",
-  sm: "@media (min-width: 640px)",
-  md: "@media (min-width: 768px)",
-  lg: "@media (min-width: 1024px)",
-  print: "@media print",
-};
-
-let hasRun = false;
-
-module.exports = function addThemes({ addBase, config }) {
-  if (hasRun) {
-    return;
-  }
-  hasRun = true;
-
-  let base = {};
-  const themes = config("themes");
-  const defaultTheme = config("defaultTheme");
-  for (const customTheme in themes) {
-    const customThemeObject = require(themes[customTheme]);
-    if (customThemeObject.overrides) {
-      console.log("Loading theme css from source...");
-      const css = fs
-        .readFileSync(
-          path.resolve(
-            path.dirname(themes[customTheme]),
-            "overrides/index.css",
-          ),
-        )
-        .toString();
-      const ctx = {};
-      const { plugins, options } = postcssrc.sync(ctx);
-      const result = postcss(plugins).process(css, options).result.root;
-      const cssJs = postcssJs.objectify(result);
-      base[`.${customTheme}`] = cssJs;
-    }
-    if (customTheme === defaultTheme) {
-      base[`:root,:root.${customTheme},::before,::after`] =
-        extractVars(customThemeObject);
-    } else {
-      base[
-        `:root.${customTheme},.${customTheme},.${customTheme} *::before,.${customTheme} *::after`
-      ] = extractVars(customThemeObject);
-    }
-
-    if (customThemeObject.variables && customThemeObject.variables.components) {
-      const extractedVariables = extractMediaQueriesFromComponentVars(
-        customThemeObject.variables.components,
-        customTheme,
-        defaultTheme,
-      );
-      Object.keys(extractedVariables).forEach((key) => {
-        if (base[key]) {
-          base[key] = { ...base[key], ...extractedVariables[key] };
-        } else {
-          base[key] = extractedVariables[key];
-        }
-      });
-    }
-  }
-  addBase(base);
-};
-
-function extractVars(themeObj) {
-  const colorVars = extractColorVars(themeObj.colors);
-  const globalVars =
-    themeObj.variables && themeObj.variables.globals
-      ? extractGlobalVars(themeObj.variables.globals)
-      : {};
-  return { ...colorVars, ...globalVars };
-}
-
-function extractColorVars(colorObj, colorGroup = "") {
-  return Object.keys(colorObj).reduce((vars, colorKey) => {
-    const value = colorObj[colorKey];
-    const colorName =
-      colorKey == "default"
-        ? `--color${colorGroup}`
-        : `--color${colorGroup}-${colorKey}`;
-    const newVars =
-      typeof value === "string"
-        ? {
-            [colorName]: value,
-            [`${colorName}-rgb`]: hexToRGB(value),
-          }
-        : extractColorVars(value, `-${colorKey}`);
-    return { ...vars, ...newVars };
-  }, {});
-}
-
-function extractGlobalVars(globalVarsObj) {
-  return Object.keys(globalVarsObj).reduce((vars, varKey) => {
-    const value = globalVarsObj[varKey];
-    vars[`--${varKey}`] = value;
-    return vars;
-  }, {});
-}
-
-function hexToRGB(hex) {
-  const r = parseInt(hex.slice(1, 3), 16),
-    g = parseInt(hex.slice(3, 5), 16),
-    b = parseInt(hex.slice(5, 7), 16);
-
-  return r + ", " + g + ", " + b;
-}
-
-function extractMediaQueriesFromComponentVars(
-  componentObj,
-  customTheme,
-  defaultTheme,
-) {
-  let mediaObj = {};
-  Object.keys(componentObj).forEach((componentClass) => {
-    Object.keys(componentObj[componentClass]).forEach((componentAttr) => {
-      Object.keys(componentObj[componentClass][componentAttr]).forEach(
-        (componentMedia) => {
-          const newAttrKey = `--${componentClass}-${componentAttr}`;
-          const newAttrValue =
-            componentObj[componentClass][componentAttr][componentMedia];
-          const newAttr = { [newAttrKey]: newAttrValue };
-          const newClass = `.${prefix}-${componentClass}`;
-          const newMedia = mediaQueriesMapping[componentMedia];
-          const newTheme =
-            customTheme === defaultTheme ? "" : `.${customTheme}`;
-
-          if (mediaObj[newMedia]) {
-            if (mediaObj[newMedia][newTheme][newClass]) {
-              mediaObj[newMedia][newTheme][newClass][newAttrKey] = newAttrValue;
-            } else {
-              mediaObj[newMedia][newTheme][newClass] = newAttr;
-            }
-          } else {
-            mediaObj[newMedia] = { [newTheme]: { [newClass]: newAttr } };
-          }
-        },
-      );
-    });
-  });
-  return mediaObj;
-}