@digigov/css 1.0.0-6b93ebf2 → 1.0.0-758a1807

package/src/utilities/utilities.css

@@ -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

@@ -156,6 +156,8 @@ module.exports = {
       zIndex: {
         "/1": -1,
         1: 1,
+        2: 2,
+        3: 3,
       },
       opacity: {
         85: "0.85",

package/themes.plugin.js

@@ -6,7 +6,7 @@ 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)",
@@ -28,21 +28,21 @@ function addThemes({ addBase, addComponents, theme, config }) {
   }
   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 };
-      }, {});
+    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) {