@digigov/css 1.0.0-blabla-test → 1.0.0-e322b0cc

package/src/utilities/utilities.css

@@ -2,7 +2,7 @@
 @layer utilities {
   .govgr-m-0 {
     @apply m-0 !important;
-  }  
+  }
   .govgr-m-1 {
     @apply m-1 !important;
   }
@@ -41,7 +41,7 @@
   }
   .govgr-mt-0 {
     @apply mt-0 !important;
-  }  
+  }
   .govgr-mt-1 {
     @apply mt-1 !important;
   }
@@ -80,7 +80,7 @@
   }
   .govgr-mb-0 {
     @apply mb-0 !important;
-  }  
+  }
   .govgr-mb-1 {
     @apply mb-1 !important;
   }
@@ -119,7 +119,7 @@
   }
   .govgr-ml-0 {
     @apply ml-0 !important;
-  }  
+  }
   .govgr-ml-1 {
     @apply ml-1 !important;
   }
@@ -158,7 +158,7 @@
   }
   .govgr-mr-0 {
     @apply mr-0 !important;
-  }  
+  }
   .govgr-mr-1 {
     @apply mr-1 !important;
   }
@@ -197,7 +197,7 @@
   }
   .govgr-p-0 {
     @apply p-0 !important;
-  }  
+  }
   .govgr-p-1 {
     @apply p-1 !important;
   }
@@ -236,7 +236,7 @@
   }
   .govgr-pt-0 {
     @apply pt-0 !important;
-  }  
+  }
   .govgr-pt-1 {
     @apply pt-1 !important;
   }
@@ -275,7 +275,7 @@
   }
   .govgr-pb-0 {
     @apply pb-0 !important;
-  }  
+  }
   .govgr-pb-1 {
     @apply pb-1 !important;
   }
@@ -314,7 +314,7 @@
   }
   .govgr-pl-0 {
     @apply pl-0 !important;
-  }  
+  }
   .govgr-pl-1 {
     @apply pl-1 !important;
   }
@@ -353,7 +353,7 @@
   }
   .govgr-pr-0 {
     @apply pr-0 !important;
-  }  
+  }
   .govgr-pr-1 {
     @apply pr-1 !important;
   }
@@ -390,32 +390,11 @@
   .govgr-pr-12 {
     @apply pr-11 md:pr-20 !important;
   }
-  .govgr-grid {
-    @apply grid grid-cols-12;
-  }
   .govgr-grid-inline {
     @apply inline-grid;
   }
-  .govgr-grid__gap-1 {
-    @apply gap-1;
-  }
-  .govgr-grid__gap-2 {
-    @apply gap-2;
-  }
-  .govgr-grid__gap-4 {
-    @apply gap-4;
-  }
-  .govgr-grid__gap-6 {
-    @apply gap-6;
-  }
-  .govgr-grid__gap-8 {
-    @apply gap-8;
-  }
-  .govgr-grid__gap-10 {
-    @apply gap-10;
-  }
-  .govgr-grid__gap-12 {
-    @apply gap-12;
+  .govgr-grid {
+    @apply grid grid-cols-12;
   }
   .govgr-grid__col-auto {
     @apply col-auto;
@@ -465,4 +444,149 @@
   .govgr-print-visible-inline {
     @apply print:inline !important;
   }
-};
+  .govgr-gap-1 {
+    @apply gap-1;
+  }
+  .govgr-gap-2 {
+    @apply gap-2;
+  }
+  .govgr-gap-4 {
+    @apply gap-4;
+  }
+  .govgr-gap-5 {
+    @apply gap-5;
+  }
+  .govgr-gap-6 {
+    @apply gap-6;
+  }
+  .govgr-gap-8 {
+    @apply gap-8;
+  }
+  .govgr-gap-10 {
+    @apply gap-10;
+  }
+  .govgr-gap-12 {
+    @apply gap-12;
+  }
+  .govgr-gap-xs-1 {
+    @apply gap-1;
+  }
+  .govgr-gap-xs-2 {
+    @apply gap-2;
+  }
+  .govgr-gap-xs-4 {
+    @apply gap-4;
+  }
+  .govgr-gap-xs-5 {
+    @apply gap-5;
+  }
+  .govgr-gap-xs-6 {
+    @apply gap-6;
+  }
+  .govgr-gap-xs-8 {
+    @apply gap-8;
+  }
+  .govgr-gap-xs-10 {
+    @apply gap-10;
+  }
+  .govgr-gap-xs-12 {
+    @apply gap-12;
+  }
+  .govgr-gap-sm-1 {
+    @apply sm:gap-1;
+  }
+  .govgr-gap-sm-2 {
+    @apply sm:gap-2;
+  }
+  .govgr-gap-sm-4 {
+    @apply sm:gap-4;
+  }
+  .govgr-gap-sm-5 {
+    @apply sm:gap-5;
+  }
+  .govgr-gap-sm-6 {
+    @apply sm:gap-6;
+  }
+  .govgr-gap-sm-8 {
+    @apply sm:gap-8;
+  }
+  .govgr-gap-sm-10 {
+    @apply sm:gap-10;
+  }
+  .govgr-gap-sm-12 {
+    @apply sm:gap-12;
+  }
+  .govgr-gap-md-1 {
+    @apply md:gap-1;
+  }
+  .govgr-gap-md-2 {
+    @apply md:gap-2;
+  }
+  .govgr-gap-md-4 {
+    @apply md:gap-4;
+  }
+  .govgr-gap-md-5 {
+    @apply md:gap-5;
+  }
+  .govgr-gap-md-6 {
+    @apply md:gap-6;
+  }
+  .govgr-gap-md-8 {
+    @apply md:gap-8;
+  }
+  .govgr-gap-md-10 {
+    @apply md:gap-10;
+  }
+  .govgr-gap-md-12 {
+    @apply md:gap-12;
+  }
+  .govgr-gap-lg-1 {
+    @apply lg:gap-1;
+  }
+  .govgr-gap-lg-2 {
+    @apply lg:gap-2;
+  }
+  .govgr-gap-lg-4 {
+    @apply lg:gap-4;
+  }
+  .govgr-gap-lg-5 {
+    @apply lg:gap-5;
+  }
+  .govgr-gap-lg-6 {
+    @apply lg:gap-6;
+  }
+  .govgr-gap-lg-8 {
+    @apply lg:gap-8;
+  }
+  .govgr-gap-lg-10 {
+    @apply lg:gap-10;
+  }
+  .govgr-gap-lg-12 {
+    @apply lg:gap-12;
+  }
+  .govgr-gap-xl-1 {
+    @apply xl:gap-1;
+  }
+  .govgr-gap-xl-2 {
+    @apply xl:gap-2;
+  }
+  .govgr-gap-xl-4 {
+    @apply xl:gap-4;
+  }
+  .govgr-gap-xl-5 {
+    @apply xl:gap-5;
+  }
+  .govgr-gap-xl-6 {
+    @apply xl:gap-6;
+  }
+  .govgr-gap-xl-8 {
+    @apply xl:gap-8;
+  }
+  .govgr-gap-xl-10 {
+    @apply xl:gap-10;
+  }
+  .govgr-gap-xl-12 {
+    @apply xl:gap-12;
+  }
+};
+

package/tailwind.config.js

@@ -64,14 +64,8 @@ const allColors = [
   "shadow600",
 ];
 
-const buildOnly = !process.env["DIGIGOV_CSS_BUILD"]
-  ? {
-    mode: "jit",
-  }
-  : {};
-
 const colorVariables = allColors.reduce((colorVars, color) => {
-  if (['transparent', 'currentColor'].includes(color)) {
+  if (["transparent", "currentColor"].includes(color)) {
     colorVars[color] = color;
   } else {
     colorVars[color] = ({ opacityVariable, opacityValue }) => {
@@ -87,13 +81,17 @@ const colorVariables = allColors.reduce((colorVars, color) => {
   return colorVars;
 }, {});
 
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  ...buildOnly,
-  darkMode: 'class',
+  darkMode: "class",
+  content: {
+    files: ["./src/*.css"],
+    relative: true,
+  },
   themes: {
-    light: require.resolve('./defaultTheme'),
+    light: require.resolve("./defaultTheme"),
   },
-  defaultTheme: 'light',
+  defaultTheme: "light",
   theme: {
     colors: colorVariables,
     container: {
@@ -111,11 +109,11 @@ module.exports = {
       xl: "1280px",
       "2xl": "1280px",
       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' },
+      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" },
     },
     fontFamily: {
       sans: ["Roboto", ...defaultTheme.fontFamily.sans],
@@ -126,8 +124,8 @@ module.exports = {
       },
       width: {
         fit: "fit-content",
-        '2xl': '42rem',
-        '4xl': '56rem',
+        "2xl": "42rem",
+        "4xl": "56rem",
       },
       maxWidth: {
         fit: "fit-content",
@@ -156,6 +154,8 @@ module.exports = {
       zIndex: {
         "/1": -1,
         1: 1,
+        2: 2,
+        3: 3,
       },
       opacity: {
         85: "0.85",
@@ -166,18 +166,6 @@ module.exports = {
       boxShadow: {
         thick: "0 0 30px rgba(0, 0, 0, 0.6)",
       },
-      borderColor: {
-        // TODO: fix this invalid value in the future
-        // Read more: https://gitlab.grnet.gr/devs/digigov/digigov-sdk/-/merge_requests/818
-        DEFAULT: 'reset',
-      }
-    },
-  },
-  variants: {
-    extend: {
-      textDecoration: ["active"],
-      backgroundColor: ["active"],
-      borderColor: ["active"],
     },
   },
   plugins: [plugin(themesPlugin)],

package/themes.plugin.js

@@ -6,92 +6,20 @@ const postcssJs = require("postcss-js");
 
 const prefix = "govgr";
 const mediaQueriesMapping = {
-  xs: "",
+  xs: "@media (min-width: 0px)",
   sm: "@media (min-width: 640px)",
   md: "@media (min-width: 768px)",
   lg: "@media (min-width: 1024px)",
   print: "@media print",
 };
 
-function hexToRGB(hex) {
-  var 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;
-}
 let hasRun = false;
 
-function addThemes({ addBase, addComponents, theme, config }) {
+module.exports = function addThemes({ addBase, config }) {
   if (hasRun) {
     return;
   }
   hasRun = true;
-  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 extractMediaQueriesFromComponentVars(componentObj, customTheme) {
-    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;
-  }
-
-  function extractGlobalVars(globalVarsObj) {
-    return Object.keys(globalVarsObj).reduce((vars, varKey) => {
-      const value = globalVarsObj[varKey];
-      vars[`--${varKey}`] = value;
-      return vars;
-    }, {});
-  }
-  function extractVars(themeObj) {
-    const colorVars = extractColorVars(themeObj.colors);
-    const globalVars =
-      themeObj.variables && themeObj.variables.globals
-        ? extractGlobalVars(themeObj.variables.globals)
-        : {};
-    return { ...colorVars, ...globalVars };
-  }
 
   let base = {};
   const themes = config("themes");
@@ -99,44 +27,35 @@ function addThemes({ addBase, addComponents, theme, config }) {
   for (const customTheme in themes) {
     const customThemeObject = require(themes[customTheme]);
     if (customThemeObject.overrides) {
-      if (config("mode") === "jit") {
-        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).root;
-        const cssJs = postcssJs.objectify(result);
-        base[`.${customTheme}`] = cssJs;
-      } else {
-        customThemeObject.overrides.forEach((override) => {
-          const cssJs = require(path.resolve(
+      console.log("Loading theme css from source...");
+      const css = fs
+        .readFileSync(
+          path.resolve(
             path.dirname(themes[customTheme]),
-            override
-          ));
-          base[`.${customTheme}`] = cssJs;
-        });
-      }
+            "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} *::before,.${customTheme} *::after`
+        `:root.${customTheme},.${customTheme},.${customTheme} *::before,.${customTheme} *::after`
       ] = extractVars(customThemeObject);
     }
 
     if (customThemeObject.variables && customThemeObject.variables.components) {
       const extractedVariables = extractMediaQueriesFromComponentVars(
         customThemeObject.variables.components,
-        customTheme
+        customTheme,
+        defaultTheme,
       );
       Object.keys(extractedVariables).forEach((key) => {
         if (base[key]) {
@@ -148,6 +67,82 @@ function addThemes({ addBase, addComponents, theme, config }) {
     }
   }
   addBase(base);
+};
+
+function extractVars(themeObj) {
+  const colorVars = extractColorVars(themeObj.colors);
+  const globalVars =
+    themeObj.variables && themeObj.variables.globals
+      ? extractGlobalVars(themeObj.variables.globals)
+      : {};
+  return { ...colorVars, ...globalVars };
 }
 
-module.exports = addThemes;
+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;
+}

package/src/components/accessibility-menu.css

@@ -1,71 +0,0 @@
-.govgr-accessibility-menu {}
-.govgr-accessibility-menu--left {
-  .govgr-accessibility-menu__btn {
-    @apply left-4;
-  }
-  .govgr-accessibility-menu__content {
-    @apply left-0;
-  }
-}
-.govgr-accessibility-menu--right {
-  .govgr-accessibility-menu__btn {
-    @apply right-4;
-  }
-  .govgr-accessibility-menu__content {
-    @apply right-0;
-  }
-}
-.govgr-accessibility-menu__btn {
-  @apply absolute bottom-4 bg-base-300;
-  @apply p-4 rounded-full !important;
-  box-shadow: 0px 2px 5px rgba(var(--color-base-900-rgb), 0.3);
-  &:hover {
-    @apply bg-base-400;
-  }
-}
-.govgr-accessibility-menu__content {
-  @apply bg-base-200 absolute top-0 bottom-0 p-4 flex flex-col max-w-md;
-}
-
-.govgr-accessibility-menu__header {
-  @apply inline-flex justify-between items-center mb-6 gap-2;
-}
-.govgr-accessibility-menu__header-btn {
- @apply flex flex-nowrap; 
-}
-.govgr-accessibility-menu__body {
-  @apply overflow-y-scroll p-3 flex-grow;
-}
-.govgr-accessibility-menu__list {
-  @apply grid grid-cols-1 sm:grid-cols-2 gap-5;
-}
-.govgr-accessibility-menu__list-item {
-  @apply col-span-1;
-}
-.govgr-accessibility-menu__option-btn {
-  @apply flex flex-col gap-2;
-  @apply bg-base-100 border-base-100 border-2;
-  @apply w-full sm:w-fit leading-tight m-0 !important;
-  padding: calc(1rem + 2px) !important;
-  &:hover {
-    @apply border-base-content;
-  }
-}
-.govgr-accessibility-menu__option-btn--selected {
-  @apply border-success border-4 text-success p-4 !important;
-  .govgr-svg-icon {
-    fill: var(--color-success) !important;
-  }
-  .govgr-accessibility-menu__steps {
-    @apply opacity-100;
-  }
-}
-.govgr-accessibility-menu__steps {
-  @apply flex flex-nowrap w-full gap-2 h-1 mt-2 opacity-0;
-}
-.govgr-accessibility-menu__step {
-  @apply bg-base-300 w-full;
-}
-.govgr-accessibility-menu__step--active {
-  @apply bg-success;
-}