@digigov/css 2.0.0-36b707c1 → 2.0.0-44e7106a

package/src/utilities/margin.css

@@ -758,7 +758,7 @@
   @apply m-5;
 }
 .ds-m-xs-6 {
-  @apply m-6 ;
+  @apply m-6;
 }
 .ds-m-xs-7 {
   @apply m-7;
@@ -3278,106 +3278,106 @@
   @apply xl:ml-96 !important;
 }
 .ds-mx-xs-0 {
-  @apply mx-0 ;
+  @apply mx-0;
 }
 .ds-mx-xs-0\.5 {
-  @apply mx-0.5 ;
+  @apply mx-0.5;
 }
 .ds-mx-xs-1 {
-  @apply mx-1 ;
+  @apply mx-1;
 }
 .ds-mx-xs-1\.5 {
-  @apply mx-1.5 ;
+  @apply mx-1.5;
 }
 .ds-mx-xs-2 {
-  @apply mx-2 ;
+  @apply mx-2;
 }
 .ds-mx-xs-2\.5 {
-  @apply mx-2.5 ;
+  @apply mx-2.5;
 }
 .ds-mx-xs-3 {
-  @apply mx-3 ;
+  @apply mx-3;
 }
 .ds-mx-xs-3\.5 {
-  @apply mx-3.5 ;
+  @apply mx-3.5;
 }
 .ds-mx-xs-4 {
-  @apply mx-4 ;
+  @apply mx-4;
 }
 .ds-mx-xs-5 {
-  @apply mx-5 ;
+  @apply mx-5;
 }
 .ds-mx-xs-6 {
-  @apply mx-6 ;
+  @apply mx-6;
 }
 .ds-mx-xs-7 {
-  @apply mx-7 ;
+  @apply mx-7;
 }
 .ds-mx-xs-8 {
-  @apply mx-8 ;
+  @apply mx-8;
 }
 .ds-mx-xs-9 {
-  @apply mx-9 ;
+  @apply mx-9;
 }
 .ds-mx-xs-10 {
-  @apply mx-10 ;
+  @apply mx-10;
 }
 .ds-mx-xs-11 {
-  @apply mx-11 ;
+  @apply mx-11;
 }
 .ds-mx-xs-12 {
-  @apply mx-12 ;
+  @apply mx-12;
 }
 .ds-mx-xs-14 {
-  @apply mx-14 ;
+  @apply mx-14;
 }
 .ds-mx-xs-16 {
-  @apply mx-16 ;
+  @apply mx-16;
 }
 .ds-mx-xs-20 {
-  @apply mx-20 ;
+  @apply mx-20;
 }
 .ds-mx-xs-24 {
-  @apply mx-24 ;
+  @apply mx-24;
 }
 .ds-mx-xs-28 {
-  @apply mx-28 ;
+  @apply mx-28;
 }
 .ds-mx-xs-32 {
-  @apply mx-32 ;
+  @apply mx-32;
 }
 .ds-mx-xs-36 {
-  @apply mx-36 ;
+  @apply mx-36;
 }
 .ds-mx-xs-40 {
-  @apply mx-40 ;
+  @apply mx-40;
 }
 .ds-mx-xs-44 {
-  @apply mx-44 ;
+  @apply mx-44;
 }
 .ds-mx-xs-48 {
-  @apply mx-48 ;
+  @apply mx-48;
 }
 .ds-mx-xs-52 {
-  @apply mx-52 ;
+  @apply mx-52;
 }
 .ds-mx-xs-56 {
-  @apply mx-56 ;
+  @apply mx-56;
 }
 .ds-mx-xs-60 {
-  @apply mx-60 ;
+  @apply mx-60;
 }
 .ds-mx-xs-64 {
-  @apply mx-64 ;
+  @apply mx-64;
 }
 .ds-mx-xs-72 {
-  @apply mx-72 ;
+  @apply mx-72;
 }
 .ds-mx-xs-80 {
-  @apply mx-80 ;
+  @apply mx-80;
 }
 .ds-mx-xs-96 {
-  @apply mx-96 ;
+  @apply mx-96;
 }
 .ds-mx-sm-0 {
   @apply sm:mx-0 !important;

package/src/utilities/padding.css

@@ -4296,4 +4296,4 @@
 }
 .ds-py-xl-96 {
   @apply xl:py-96 !important;
-}
+}

package/src/utilities/postcss.config.js

@@ -1,13 +1,14 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: [
-    require("postcss-import"),
-    require("tailwindcss/nesting"),
-    require("tailwindcss")("./src/utilities/tailwind.config.js"),
-    require("autoprefixer"),
-    require("cssnano")({
+    require('postcss-import'),
+    require('tailwindcss/nesting'),
+    require('tailwindcss')('./src/utilities/tailwind.config.js'),
+    require('autoprefixer'),
+    require('postcss-sort-media-queries'),
+    require('cssnano')({
       preset: [
-        "default",
+        'default',
         {
           mergeRules: false,
         },

package/src/utilities/print.css

@@ -8,4 +8,4 @@
 
 .ds-print-visible-inline {
   @apply print:inline !important;
-}
+}

package/src/utilities/utilities.css

@@ -1,4 +1,3 @@
-@import "./gap.css";
-@import "./margin.css";
-@import "./padding.css";
-
+@import './gap.css';
+@import './margin.css';
+@import './padding.css';

package/tailwind.config.js

@@ -1,72 +1,70 @@
-const plugin = require("tailwindcss/plugin");
-const defaultTheme = require("tailwindcss/defaultTheme");
-const themesPlugin = require("./themes.plugin");
+const defaultTheme = require('tailwindcss/defaultTheme');
 
 const allColors = [
-  "transparent",
-  "current",
-  "primary",
-  "primary-100",
-  "primary-200",
-  "primary-300",
-  "secondary",
-  "secondary-100",
-  "secondary-200",
-  "secondary-300",
-  "tertiary",
-  "tertiary-100",
-  "tertiary-200",
-  "tertiary-300",
-  "accent",
-  "accent-focus",
-  "accent-content",
-  "base-100",
-  "base-200",
-  "base-300",
-  "base-400",
-  "base-500",
-  "base-600",
-  "base-700",
-  "base-800",
-  "base-900",
-  "base-1000",
-  "base-11000",
-  "base-content",
-  "base-content-secondary",
-  "base-content-invert",
-  "info",
-  "info-hover",
-  "success",
-  "success-hover",
-  "warning",
-  "error",
-  "error-hover",
-  "error-text",
-  "focus",
-  "link",
-  "link-hover",
-  "link-visited",
-  "link-active",
-  "white",
-  "gray-100",
-  "gray-200",
-  "gray-300",
-  "gray-400",
-  "gray-500",
-  "gray-600",
-  "gray-700",
-  "gray-800",
-  "gray-900",
-  "gray-1000",
-  "gray-1100",
-  "gray-1200",
-  "black",
-  "shadow200",
-  "shadow600",
+  'transparent',
+  'current',
+  'primary',
+  'primary-100',
+  'primary-200',
+  'primary-300',
+  'secondary',
+  'secondary-100',
+  'secondary-200',
+  'secondary-300',
+  'tertiary',
+  'tertiary-100',
+  'tertiary-200',
+  'tertiary-300',
+  'accent',
+  'accent-focus',
+  'accent-content',
+  'base-100',
+  'base-200',
+  'base-300',
+  'base-400',
+  'base-500',
+  'base-600',
+  'base-700',
+  'base-800',
+  'base-900',
+  'base-1000',
+  'base-11000',
+  'base-content',
+  'base-content-secondary',
+  'base-content-invert',
+  'info',
+  'info-hover',
+  'success',
+  'success-hover',
+  'warning',
+  'error',
+  'error-hover',
+  'error-text',
+  'focus',
+  'link',
+  'link-hover',
+  'link-visited',
+  'link-active',
+  'white',
+  'gray-100',
+  'gray-200',
+  'gray-300',
+  'gray-400',
+  'gray-500',
+  'gray-600',
+  'gray-700',
+  'gray-800',
+  'gray-900',
+  'gray-1000',
+  'gray-1100',
+  'gray-1200',
+  'black',
+  'shadow200',
+  'shadow600',
 ];
 
 const colorVariables = allColors.reduce((colorVars, color) => {
-  if (["transparent", "currentColor"].includes(color)) {
+  if (['transparent', 'currentColor'].includes(color)) {
     colorVars[color] = color;
   } else {
     colorVars[color] = ({ opacityVariable, opacityValue }) => {
@@ -81,94 +79,92 @@ const colorVariables = allColors.reduce((colorVars, color) => {
   }
   return colorVars;
 }, {});
+
 const screens = require('./screens.json');
 const screensWithPixels = Object.keys(screens).reduce((screenVars, screen) => {
   screenVars[screen] = `${screens[screen]}px`;
   return screenVars;
-},{})
+}, {});
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: "class",
+  darkMode: 'class',
   content: {
-    files: ["./src/*.css"],
+    files: ['./src/*.css'],
     relative: true,
   },
-  themes: {
-    light: require.resolve("./defaultTheme"),
-  },
-  defaultTheme: "light",
   theme: {
     colors: colorVariables,
+    screens: {
+      ...screensWithPixels,
+      print: { raw: 'print' },
+      xsOnly: { min: '0px', max: '639.98px' },
+      smOnly: { min: '640px', max: '767.98px' },
+      mdOnly: { min: '768px', max: '1023.98px' },
+      lgOnly: { min: '1024px', max: '1279.98px' },
+      xlOnly: { min: '1280px', max: '1535.98px' },
+    },
     container: {
       center: true,
     },
     fontSize: {
       ...defaultTheme.fontSize,
-      lg: "1.1875rem",
-    },
-    screens: {
-        ...screensWithPixels,
-      print: { raw: "print" },
-      xsOnly: { min: "0px", max: "639.98px" },
-      smOnly: { min: "640px", max: "767.98px" },
-      mdOnly: { min: "768px", max: "1023.98px" },
-      lgOnly: { min: "1024px", max: "1279.98px" },
-      xlOnly: { min: "1280px", max: "1535.98px" },
+      lg: '1.1875rem',
     },
     fontFamily: {
-      sans: ["Roboto", ...defaultTheme.fontFamily.sans],
+      sans: ['Roboto', ...defaultTheme.fontFamily.sans],
     },
     extend: {
       height: {
-        fit: "fit-content",
+        fit: 'fit-content',
       },
       width: {
-        fit: "fit-content",
-        "2xl": "42rem",
-        "4xl": "56rem",
+        fit: 'fit-content',
+        '2xl': '42rem',
+        '4xl': '56rem',
       },
       maxWidth: {
-        fit: "fit-content",
+        fit: 'fit-content',
       },
       minWidth: {
-        4: "1rem",
-        10: "2.5rem",
-        32: "8rem",
-        52: "13rem",
+        4: '1rem',
+        10: '2.5rem',
+        12: '3rem',
+        32: '8rem',
+        52: '13rem',
       },
       minHeight: {
-        4: "1rem",
-        6: "1.5rem",
-        8: "2rem",
-        10: "2.5rem",
-        12: "3rem",
-        14: "3.5rem",
+        4: '1rem',
+        6: '1.5rem',
+        8: '2rem',
+        10: '2.5rem',
+        12: '3rem',
+        14: '3.5rem',
       },
       borderWidth: {
-        3: "3px",
-        5: "5px",
-        6: "6px",
+        3: '3px',
+        5: '5px',
+        6: '6px',
       },
       flexGrow: {
-        2: "2",
+        2: '2',
       },
       zIndex: {
-        "/1": -1,
+        '/1': -1,
         1: 1,
         2: 2,
         3: 3,
         5: 5,
       },
       opacity: {
-        85: "0.85",
+        85: '0.85',
       },
       margin: {
-        15: "3.75rem",
+        15: '3.75rem',
       },
       boxShadow: {
-        thick: "0 0 30px rgba(0, 0, 0, 0.6)",
+        thick: '0 0 30px rgba(0, 0, 0, 0.6)',
       },
     },
   },
-  plugins: [plugin(themesPlugin)],
 };

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)"
-    }
-  }
-}