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

package/theming.js

@@ -0,0 +1,121 @@
+const fs = require('fs');
+const path = require('path');
+const postcss = require('postcss');
+const postcssrc = require('postcss-load-config');
+const postcssJs = require('postcss-js');
+
+const DEFAULT_THEME = '@digigov/theme-default';
+
+/**
+ * Load custom theme CSS as base styles.
+ *
+ * @param {object} [options={}]
+ * @param {string} [options.theme] - Custom theme package name or file path.
+ * @param {boolean} [options.eject] - Whether to ignore the default Digigov CSS base styles.
+ * @param {boolean} [options.debug] - Whether to log debug information.
+ * @returns {object} - The base styles as CSS-in-JS object.
+ */
+function getThemeBaseStyle(options = {}) {
+  const { theme: userTheme, eject, debug } = options;
+
+  if (!userTheme) {
+    // do not load any theme
+    if (eject) return;
+    // load default theme
+    const css = loadCss(debug, DEFAULT_THEME);
+    return processCss(css);
+  }
+
+  // only load user theme
+  if (eject) {
+    const css = loadCss(debug, userTheme);
+    return processCss(css);
+  }
+
+  // load both default and user theme
+  const css = loadCss(debug, DEFAULT_THEME, userTheme);
+  return processCss(css);
+}
+
+/**
+ * Check if the given theme is a local file or package.
+ *
+ * @param {string} userTheme - File path or package name.
+ * @returns {boolean} - Whether the theme is a local file.
+ */
+function isLocalTheme(userTheme) {
+  return (
+    userTheme.startsWith('./') ||
+    userTheme.startsWith('../') ||
+    path.isAbsolute(userTheme)
+  );
+}
+
+/**
+ * Load CSS from given package or file path.
+ *
+ * @param {boolean} debug - Whether to log debug information.
+ * @param {...string} pkgOrPathList - Package name or file path.
+ *
+ * @returns {string} - The CSS content.
+ */
+function loadCss(debug, ...pkgOrPathList) {
+  const includedThemes = [...pkgOrPathList];
+  const css = pkgOrPathList
+    .map((pkgOrPath) => {
+      try {
+        let cssFilePath = isLocalTheme(pkgOrPath)
+          ? path.resolve(pkgOrPath)
+          : require.resolve(pkgOrPath);
+
+        if (!fs.existsSync(cssFilePath)) {
+          throw new Error(`File not found: ${cssFilePath}`);
+        }
+
+        if (path.extname(cssFilePath) === '.js') {
+          const dir = path.dirname(cssFilePath);
+          const indexCssFile = path.join(dir, 'index.css');
+          if (fs.existsSync(indexCssFile)) {
+            cssFilePath = indexCssFile;
+          } else {
+            throw new Error('No CSS index file found');
+          }
+        }
+
+        return fs.readFileSync(cssFilePath).toString();
+      } catch (error) {
+        console.error(`Failed to load CSS from ${pkgOrPath}.`, error);
+        delete includedThemes[includedThemes.indexOf(pkgOrPath)];
+        return '';
+      }
+    })
+    .join('\n');
+
+  if (debug && includedThemes.length > 0)
+    console.log(
+      '\x1b[32m%s\x1b[0m',
+      `🎨 Including theme${includedThemes.length > 1 ? 's' : ''}:`,
+      '\x1b[0m',
+      '' + includedThemes.join(', ')
+    );
+
+  return css;
+}
+
+/**
+ * Process CSS into a CSS-in-JS object.
+ * @param {string} css - The CSS content to process.
+ * @returns {object} - The merged CSS-in-JS object.
+ */
+function processCss(css) {
+  try {
+    const { plugins, options } = postcssrc.sync({}, __dirname);
+    const processedCss = postcss(plugins).process(css, options).result.root;
+    return postcssJs.objectify(processedCss);
+  } catch (error) {
+    console.error('Failed to process CSS.', error);
+    return {};
+  }
+}
+
+module.exports = getThemeBaseStyle;

package/defaultTheme/accordion.json

@@ -1,16 +0,0 @@
-{
-  "accordion__section-heading": {
-    "font-size": {
-      "xs": "var(--text-lg)",
-      "md": "var(--text-xl)"
-    }
-  },
-  "accordion__section-summary": {
-    "background": {
-      "xs": "var(--color-base-100)"
-    },
-    "background-hover": {
-      "xs": "var(--color-base-200)"
-    }
-  }
-}

package/defaultTheme/back-to-top.json

@@ -1,27 +0,0 @@
-{
-  "back-to-top-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)"
-    }
-  }
-}

package/defaultTheme/brandConfig.json

@@ -1,147 +0,0 @@
-{
-  "backgroundColor": "gray",
-  "backgroundContrastRatios": [
-    1, 1.19, 1.6, 2.11, 2.87, 3.9, 5.3, 7.91, 12.13, 14.74, 18, 21
-  ],
-  "colors": {
-    "dynamic": {
-      "gray": ["#6c6a71", "#252930"],
-      "red": ["#b60202"],
-      "orange": ["#ff9900"],
-      "green": ["#10874c", "#006636"],
-      "blue": ["#00b0f0", "#0149a7"],
-      "purple": ["#9B69E2", "#4c2b91"]
-    },
-    "static": {
-      "yellow": "#ffdd00"
-    }
-  },
-  "contrastRatios": [2.39, 3.1, 4.54, 5.65, 7, 10.2, 12.13],
-  "brandColors": {
-    "primary": "#003375",
-    "secondary": "#00b0f0",
-    "tertiary": "#0065b3"
-  },
-  "defaultTheme": "light",
-  "themes": {
-    "default": {
-      "base": {
-        "100": ["gray", "100"],
-        "200": ["gray", "200"],
-        "300": ["gray", "300"],
-        "400": ["gray", "400"],
-        "500": ["gray", "500"],
-        "600": ["gray", "600"],
-        "700": ["gray", "700"],
-        "800": ["gray", "800"],
-        "900": ["gray", "900"],
-        "1000": ["gray", "1000"],
-        "1100": ["gray", "1100"],
-        "content": ["gray", "1000"],
-        "content-secondary": ["gray", "700"],
-        "content-invert": ["gray", "100"]
-      },
-      "accent": {
-        "default": ["gray", "1000"],
-        "focus": ["gray", "900"],
-        "content": ["gray", "100"]
-      },
-      "focus": {
-        "default": ["yellow", "100"]
-      },
-      "error": {
-        "default": ["red", "500"],
-        "hover": ["red", "600"],
-        "text": ["red", "500"]
-      },
-      "success": {
-        "default": ["green", "500"],
-        "hover": ["green", "600"]
-      },
-      "link": {
-        "default": ["blue", "500"],
-        "hover": ["blue", "600"],
-        "active": ["gray", "1000"],
-        "visited": ["purple", "600"]
-      },
-      "warning": { "default": ["orange", "100"] },
-      "info": {
-        "default": ["blue", "400"],
-        "hover": ["blue", "500"]
-      },
-      "footer": {
-        "default": [
-          "blue",
-          "500"
-        ],
-        "hover": [
-          "blue",
-          "600"
-        ]
-      },
-      "white": { "default": ["gray", "100"] },
-      "black": { "default": ["gray", "1200"] }
-    },
-    "light": {
-      "_config": {
-        "lightness": 100,
-        "fgColor": "#0D0F15"
-      }
-    },
-    "dark": {
-      "_config": {
-        "lightness": 6,
-        "fgColor": "#F5F5F6"
-      },
-      "error": {
-        "default": ["red", "200"],
-        "hover": ["red", "300"],
-        "text": ["red", "300"]
-      },
-      "success": {
-        "default": ["green", "200"],
-        "hover": ["green", "300"]
-      },
-      "link": {
-        "default": ["blue", "400"],
-        "hover": ["blue", "500"],
-        "active": ["blue", "100"],
-        "visited": ["purple", "300"]
-      },
-      "warning": { "default": ["orange", "500"] },
-      "info": {
-        "default": ["blue", "300"],
-        "hover": ["blue", "400"]
-      },
-      "white": { "default": ["gray", "1200"] },
-      "black": { "default": ["gray", "100"] }
-    },
-    "darker": {
-      "_config": {
-        "lightness": 0,
-        "fgColor": "#EAEAEB"
-      },
-      "error": {
-        "default": ["red", "300"],
-        "hover": ["red", "400"]
-      },
-      "success": {
-        "default": ["green", "300"],
-        "hover": ["green", "400"]
-      },
-      "link": {
-        "default": ["blue", "400"],
-        "hover": ["blue", "500"],
-        "active": ["blue", "100"],
-        "visited": ["purple", "300"]
-      },
-      "warning": { "default": ["orange", "500"] },
-      "info": {
-        "default": ["blue", "200"],
-        "hover": ["blue", "300"]
-      },
-      "white": { "default": ["gray", "1200"] },
-      "black": { "default": ["gray", "100"] }
-    }
-  }
-}

package/defaultTheme/breadcrumbs.json

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

package/defaultTheme/button.json

@@ -1,94 +0,0 @@
-{
-  "btn": {
-    "border-radius": {
-      "xs": "0px"
-    },
-    "padding-y": {
-      "xs": "0.5rem",
-      "print": "0.5rem"
-    },
-    "padding-x": {
-      "xs": "1.25rem",
-      "print": "1rem"
-    },
-    "letter-spacing": {
-      "xs": "var(--letter-spacing-wide)"
-    },
-    "font-size": {
-      "xs": "var(--text-base)",
-      "md": "var(--text-lg)"
-    }
-  },
-  "btn-cta": {
-    "font-size": {
-      "xs": "var(--text-lg)",
-      "md": "var(--text-xl)"
-    }
-  },
-  "btn-primary": {
-    "background-color": {
-      "xs": "var(--color-success)",
-      "print": "var(--color-white)"
-    },
-    "color": {
-      "xs": "var(--color-white)",
-      "print": "var(--color-base-content)"
-    },
-    "background-color-hover": {
-      "xs": "var(--color-success-hover)"
-    },
-    "color-hover": {
-      "xs": "var(--color-white)"
-    },
-    "background-color-active": {
-      "xs": "var(--color-success-hover)"
-    },
-    "box-shadow": {
-      "xs": "0 2px 0 var(--color-base-content)"
-    }
-  },
-  "btn-secondary": {
-    "background-color": {
-      "xs": "var(--color-base-300)",
-      "print": "var(--color-white)"
-    },
-    "color": {
-      "xs": "var(--color-base-content)",
-      "print": "var(--color-base-content)"
-    },
-    "background-color-hover": {
-      "xs": "var(--color-base-400)"
-    },
-    "color-hover": {
-      "xs": "var(--color-base-content)"
-    },
-    "background-color-active": {
-      "xs": "var(--color-base-500)"
-    },
-    "box-shadow": {
-      "xs": "0 2px 0 var(--color-base-500)"
-    }
-  },
-  "btn-warning": {
-    "background-color": {
-      "xs": "var(--color-error)",
-      "print": "var(--color-white)"
-    },
-    "color": {
-      "xs": "var(--color-white)",
-      "print": "var(--color-base-content)"
-    },
-    "background-color-hover": {
-      "xs": "var(--color-error-hover)"
-    },
-    "color-hover": {
-      "xs": "var(--color-white)"
-    },
-    "background-color-active": {
-      "xs": "var(--color-error-hover)"
-    },
-    "box-shadow": {
-      "xs": "0 2px 0 var(--color-base-content)"
-    }
-  }
-}

package/defaultTheme/card.json

@@ -1,23 +0,0 @@
-{
-  "card__content": {
-    "font-size": {
-      "xs": "var(--text-sm)",
-      "md": "var(--text-base)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-sm)",
-      "md": "var(--line-h-base)"
-    }
-  },
-  "card": {
-    "border-radius": {
-      "xs": "var(--border-radius-lg)"
-    },
-    "background-color": {
-      "xs": "var(--color-base-100)"
-    },
-    "padding": {
-      "xs": "0"
-    }
-  }
-}

package/defaultTheme/form.json

@@ -1,132 +0,0 @@
-{
-  "fieldset__legend": {
-    "margin-bottom": {
-      "xs": "1rem"
-    },
-    "font-weight": {
-      "xs": "700"
-    },
-    "letter-spacing": {
-      "xs": "var(--letter-spacing-normal)"
-    }
-  },
-  "fieldset__legend--xl": {
-    "font-size": {
-      "xs": "var(--text-3xl)",
-      "md": "var(--text-5xl)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-3xl)",
-      "md": "var(--line-h-5xl)"
-    }
-  },
-  "fieldset__legend--lg": {
-    "font-size": {
-      "xs": "var(--text-2xl)",
-      "md": "var(--text-4xl)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-2xl)",
-      "md": "var(--line-h-4xl)"
-    }
-  },
-  "fieldset__legend--md": {
-    "font-size": {
-      "xs": "var(--text-xl)",
-      "md": "var(--text-2xl)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-xl)",
-      "md": "var(--line-h-2xl)"
-    }
-  },
-  "fieldset__legend--sm": {
-    "font-size": {
-      "xs": "var(--text-base)",
-      "md": "var(--text-lg)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-base)",
-      "md": "var(--line-h-lg)"
-    }
-  },
-  "label": {
-    "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)"
-    }
-  },
-  "label__title": {
-    "margin-bottom": {
-      "xs": "0rem"
-    },
-    "font-weight": {
-      "xs": "700"
-    },
-    "letter-spacing": {
-      "xs": "var(--letter-spacing-normal)"
-    }
-  },
-  "label__title--xl": {
-    "font-size": {
-      "xs": "var(--text-3xl)",
-      "md": "var(--text-5xl)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-3xl)",
-      "md": "var(--line-h-5xl)"
-    }
-  },
-  "label__title--lg": {
-    "font-size": {
-      "xs": "var(--text-2xl)",
-      "md": "var(--text-4xl)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-2xl)",
-      "md": "var(--line-h-4xl)"
-    }
-  },
-  "label__title--md": {
-    "font-size": {
-      "xs": "var(--text-xl)",
-      "md": "var(--text-2xl)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-xl)",
-      "md": "var(--line-h-2xl)"
-    }
-  },
-  "label__title--sm": {
-    "font-size": {
-      "xs": "var(--text-base)",
-      "md": "var(--text-lg)"
-    },
-    "line-height": {
-      "xs": "var(--line-h-base)",
-      "md": "var(--line-h-lg)"
-    }
-  },
-  "input": {
-    "border-radius": {
-      "xs": "var(--border-radius-md)"
-    }
-  },
-  "textarea": {
-    "border-radius": {
-      "xs": "var(--border-radius-md)"
-    }
-  },
-  "select": {
-    "border-radius": {
-      "xs": "var(--border-radius-md)"
-    }
-  }
-}

package/defaultTheme/globals.json

@@ -1,81 +0,0 @@
-{
-
-  "text-sm-default": "0.875rem",
-  "text-base-default": "1rem",
-  "text-lg-default": "1.1875rem",
-  "text-xl-default": "1.25rem",
-  "text-2xl-default": "1.5rem",
-  "text-3xl-default": "1.875rem",
-  "text-4xl-default": "2.25rem",
-  "text-5xl-default": "3rem",
-
-  "text-sm-large": "1rem",
-  "text-base-large": "1.25rem",
-  "text-lg-large": "1.4rem",
-  "text-xl-large": "1.6rem",
-  "text-2xl-large": "1.875rem",
-  "text-3xl-large": "2.25rem",
-  "text-4xl-large": "2.5rem",
-  "text-5xl-large": "3rem",
-
-  "text-sm": "var(--text-sm-default)",
-  "text-base": "var(--text-base-default)",
-  "text-lg": "var(--text-lg-default)",
-  "text-xl": "var(--text-xl-default)",
-  "text-2xl": "var(--text-2xl-default)",
-  "text-3xl": "var(--text-3xl-default)",
-  "text-4xl": "var(--text-4xl-default)",
-  "text-5xl": "var(--text-5xl-default)",
-
-  "line-h-sm-default": "1.375",
-  "line-h-base-default": "1.375",
-  "line-h-lg-default": "1.375",
-  "line-h-xl-default": "1.25",
-  "line-h-2xl-default": "1.25",
-  "line-h-3xl-default": "1.25",
-  "line-h-4xl-default": "1.25",
-  "line-h-5xl-default": "1.25",
-
-  "line-h-sm-large": "2",
-  "line-h-base-large": "2",
-  "line-h-lg-large": "2",
-  "line-h-xl-large": "1.75",
-  "line-h-2xl-large": "1.75",
-  "line-h-3xl-large": "1.5",
-  "line-h-4xl-large": "1.5",
-  "line-h-5xl-large": "1.25",
-
-  "line-h-sm": "var(--line-h-sm-default)",
-  "line-h-base": "var(--line-h-base-default)",
-  "line-h-lg": "var(--line-h-lg-default)",
-  "line-h-xl": "var(--line-h-xl-default)",
-  "line-h-2xl": "var(--line-h-2xl-default)",
-  "line-h-3xl": "var(--line-h-3xl-default)",
-  "line-h-4xl": "var(--line-h-4xl-default)",
-  "line-h-5xl": "var(--line-h-5xl-default)",
-
-  "letter-spacing-normal-default": "normal",
-  "letter-spacing-wide-default": "0.025rem",
-  "letter-spacing-wider-default": "0.05rem",
-  "letter-spacing-widest-default": "0.075rem",
-
-  "letter-spacing-normal-extra": "0.05rem",
-  "letter-spacing-wide-extra": "0.075rem",
-  "letter-spacing-wider-extra": "0.01rem",
-  "letter-spacing-widest-extra": "0.125rem",
-
-  "letter-spacing-normal": "var(--letter-spacing-normal-default)",
-  "letter-spacing-wide": "var(--letter-spacing-wide-default)",
-  "letter-spacing-wider": "var(--letter-spacing-wider-default)",
-  "letter-spacing-widest": "var(--letter-spacing-widest-default)",
-
-  "border-radius-md": "0px",
-  "border-radius-lg": "0px",
-
-  "color-footer-link": "var(--color-link)",
-  "color-footer-link-hover": "var(--color-link-hover)",
-
-  "color-header-text": "var(--color-white)",
-  "color-header-text-hover": "var(--color-white)"
-  
-}

package/defaultTheme/index.js

@@ -1,27 +0,0 @@
-const extractFromLeo = require("../leoTheme");
-const brandConfig = require("./brandConfig.json");
-
-module.exports = {
-  name: "light",
-  variables: {
-    globals: {
-      ...require("./globals.json"),
-    },
-    components: {
-      ...require("./accordion.json"),
-      ...require("./breadcrumbs.json"),
-      ...require("./back-to-top.json"),
-      ...require("./button.json"),
-      ...require("./card.json"),
-      ...require("./form.json"),
-      ...require("./layout.json"),
-      ...require("./misc.json"),
-      ...require("./panel.json"),
-      ...require("./phase-banner.json"),
-      ...require("./radios.json"),
-      ...require("./summary-list.json"),
-      ...require("./typography.json"),
-    },
-  },
-  colors: extractFromLeo(brandConfig, "light"),
-};