@digigov/css 1.0.0-002c630d → 1.0.0-00643e1d

package/src/utilities/index.css

@@ -394,27 +394,6 @@
 .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__col-auto {
   @apply col-auto;
 }
@@ -462,4 +441,145 @@
 }
 .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-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/src/utilities/postcss.config.js

@@ -1,20 +1,19 @@
-module.exports = {
+/** @type {import('postcss-load-config').Config} */
+const config = {
   plugins: [
-    require('postcss-import'),
-    require('tailwindcss')('./src/utilities/tailwind.config.js'),
-    require('postcss-nested')({
-      "bubble": [
-        "screen"
-      ]
-    }),
-    require('autoprefixer'),
-    require('cssnano')({
-      "preset": [
+    require("postcss-import"),
+    require("tailwindcss/nesting"),
+    require("tailwindcss")("./src/utilities/tailwind.config.js"),
+    require("autoprefixer"),
+    require("cssnano")({
+      preset: [
         "default",
         {
-          "mergeRules": false
-        }
-      ]
+          mergeRules: false,
+        },
+      ],
     }),
-  ]
-}
+  ],
+};
+
+module.exports = config;

package/src/utilities/tailwind.config.js

@@ -1 +1,10 @@
-module.exports = require('../../tailwind.config.js');
+const tailwindConfig = require("../../tailwind.config");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  ...tailwindConfig,
+  content: {
+    files: ["./*.css"],
+    relative: true,
+  },
+};

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)],