@digigov/css 2.0.0-rc.7 → 2.0.2

package/tailwind.config.js

@@ -1,71 +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",
-  "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 }) => {
@@ -80,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)"
-    }
-  }
-}

package/defaultTheme/brandConfig.json

@@ -1,145 +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"]
-      },
-      "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"]
-      },
-      "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,90 +0,0 @@
-{
-  "btn": {
-    "border-radius": {
-      "xs": "0px"
-    },
-    "padding": {
-      "xs": "0.5rem 1.25rem",
-      "print": "0.5rem 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)"
-    }
-  }
-}