@digigov/css 0.6.2 → 0.8.0

package/src/components/form.css

@@ -23,7 +23,7 @@
 .govgr-input, .govgr-select, .govgr-textarea{
     @apply md:text-lg text-base w-full p-2 border-2 border-base-content;
     &:focus {
-        outline: 3px solid #fd0;
+        outline: 4px solid var(--color-focus);
         outline-offset: 0;
         -webkit-box-shadow: inset 0 0 0 2px;
         box-shadow: inset 0 0 0 2px;
@@ -31,7 +31,7 @@
 }
 .govgr-file-upload:focus {
     outline: 3px solid;
-    box-shadow: 0 0 0 7px #fd0;
+    box-shadow: 0 0 0 7px var(--color-focus);
 }
 .govgr-date-input {
     @apply flex;
@@ -93,11 +93,19 @@
 }
 /* error handling  */
 .govgr-field__error {
-    @apply border-l-5 border-error px-0 pl-4;
+  @apply border-l-5 border-error px-0 pl-4;
 }
 .govgr-error-message {
     @apply md:text-lg text-base block mb-4 text-error font-semibold;
 }
 .govgr-error-input {
     @apply border-error border-3;
-}
+    &:focus {
+      outline: 4px solid var(--color-focus);
+      outline-offset: 0;
+      -webkit-box-shadow: inset 0 0 0 1px var(--color-error);
+      box-shadow: inset 0 0 0 1px var(--color-error);
+  }
+}
+
+

package/src/components/header.css

@@ -4,7 +4,7 @@
   
 }
 .govgr-header__container {
-  @apply container px-4 py-2 max-w-5xl flex justify-between items-center;
+  @apply px-4 py-2 mx-auto max-w-5xl w-full flex justify-between items-center;
 }
 .govgr-header__container-full {
   @apply max-w-full;
@@ -20,11 +20,9 @@
 }
 
 .govgr-header-title:focus {
-  @apply text-gray-900;
-  background-color: #fd0;
-  box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
   text-decoration:none;
-  outline: none;
+  outline: 4px solid var(--color-focus);
+  outline-offset: 4px;
 }
 .govgr-header-logo {
   @apply h-12;
@@ -33,9 +31,9 @@
   @apply h-10;
 }
 .govgr-header-link:focus{
-  box-shadow: 0px 0px 0px 4px #fd0;
-  -webkit-box-shadow: 0px 0px 0px 4px #fd0;
-  -moz-box-shadow: 0px 0px 0px 4px #fd0;
+  box-shadow: 0px 0px 0px 4px var(--color-focus);
+  -webkit-box-shadow: 0px 0px 0px 4px var(--color-focus);
+  -moz-box-shadow: 0px 0px 0px 4px var(--color-focus);
   outline: none; 
   text-decoration: none;
 }

package/src/components/index.css

@@ -21,4 +21,5 @@
 @import "./phase-banner.css";
 @import "./summary-list.css";
 @import "./tabs.css";
-@import "./misc.css"
+@import "./misc.css";
+@import "./modal.css"

package/src/components/modal.css

@@ -0,0 +1,29 @@
+.govgr-modal {
+  @apply hidden justify-center items-center content-center
+  mb-7 text-base-content bg-opacity-50
+  fixed z-10 left-0 top-0 w-full h-full overflow-auto; 
+}
+.govgr-modal__body {
+  @apply w-full max-w-md md:max-w-lg lg:max-w-4xl 
+  h-fit-content md:h-auto my-auto mx-4
+  bg-white
+  border border-solid border-base-200;
+}
+.govgr-modal__content {
+  @apply grid gap-6 p-5;
+}
+.govgr-modal__open {
+  @apply flex;
+}
+.govgr-modal__heading {
+  @apply md:text-2xl text-xl font-bold;
+}
+.govgr-modal__text {
+  @apply text-base lg:text-xl text-lg;
+}
+.govgr-modal__action {
+  @apply flex flex-wrap items-center gap-y-4;
+  * {
+    @apply mb-0;
+  }
+}

package/src/components/nav.css

@@ -65,8 +65,8 @@
 }
 
 .govgr-horizontal-nav__item:focus {
-      background-color: #fd0;
-      box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+      background-color: var(--color-focus);
+      box-shadow: 0 -2px var(--color-focus), 0 4px #0b0c0c;
       outline: none; 
   }
 .govgr-horizontal-nav__item-active, .govgr-vertical-nav__item--active {

package/src/components/notification-banner.css

@@ -36,8 +36,8 @@
     text-decoration-thickness: 2px;
   }
   &:focus {
-        background-color: #fd0;
-        box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+        background-color: var(--color-focus);
+        box-shadow: 0 -2px var(--color-focus), 0 4px #0b0c0c;
         text-decoration:none;
         outline: none; 
   }

package/src/components/radios.css

@@ -1,5 +1,5 @@
 .govgr-radios__item {
-  @apply block relative mb-4 pl-10; 
+  @apply block relative mb-4 pl-12; 
   min-height: 40px;
 
 }
@@ -45,13 +45,6 @@
     background: currentColor;
   }
   &:checked { 
-    &:before {
-      /* border-width: 4px;
-      outline: 3px solid transparent;
-      outline-offset: 1px;
-      -webkit-box-shadow: 0 0 0 3px #fd0;
-      box-shadow: 0 0 0 3px #fd0; */
-    }
     &:after {
       opacity: 1;
     }
@@ -61,7 +54,7 @@
     &:before {
       outline: 3px solid transparent;
       outline-offset: 1px;
-      box-shadow: 0 0 0 3px #fd0;
+      box-shadow: 0 0 0 4px var(--color-focus);
       border-width: 4px;
     }
   }

package/src/components/tabs.css

@@ -39,10 +39,10 @@
         left: 0;
       }
       &:focus {
-        background-color: #fd0;
+        background-color: var(--color-focus);
         outline: 3px solid transparent;
-        -webkit-box-shadow: inset 0 0 0 3px #fd0;
-        box-shadow: inset 0 0 0 3px #fd0;
+        -webkit-box-shadow: inset 0 0 0 3px var(--color-focus);
+        box-shadow: inset 0 0 0 3px var(--color-focus);
         outline-offset: 0px;
         text-decoration-thickness: .2rem;
       }

package/src/components/typography.css

@@ -101,8 +101,8 @@
     text-decoration-thickness: 2px;
   }
   &:focus {
-        background-color: #fd0;
-        box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+        background-color: var(--color-focus);
+        box-shadow: 0 -2px var(--color-focus), 0 4px #0b0c0c;
         text-decoration:none;
         outline: none; 
   }
@@ -131,8 +131,8 @@
       text-decoration-thickness: 2px;
     }
   &:focus {
-        background-color: #fd0;
-        box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+        background-color: var(--color-focus);
+        box-shadow: 0 -2px var(--color-focus), 0 4px #0b0c0c;
         text-decoration:none;
         outline: none; 
   }

package/src/utilities/index.css

@@ -63,4 +63,19 @@
 }
 .govgr-grid__col-span-12 {
   @apply col-span-12;
+}
+.govgr-lg-up {
+  @apply lg:hidden;
+}
+.govgr-md-up {
+  @apply md:hidden;
+}
+.govgr-sm-up {
+  @apply sm:hidden;
+}
+.govgr-xl-up {
+  @apply xl:hidden;
+}
+.govgr-xs-up {
+  @apply xs:hidden;
 }

package/src/utilities/utilities.css

@@ -69,4 +69,19 @@
   .govgr-grid__col-span-12 {
     @apply col-span-12;
   }
+  .govgr-lg-up {
+    @apply lg:hidden;
+  }
+  .govgr-md-up {
+    @apply md:hidden;
+  }
+  .govgr-sm-up {
+    @apply sm:hidden;
+  }
+  .govgr-xl-up {
+    @apply xl:hidden;
+  }
+  .govgr-xs-up {
+    @apply xs:hidden;
+  }
 };

package/tailwind.config.js

@@ -1,11 +1,15 @@
+const plugin = require('tailwindcss/plugin')
 const defaultTheme = require('tailwindcss/defaultTheme')
+const colors = require('./colors');
+const colorVarsPlugin = require('./color-vars.plugin')
+
 const buildOnly = !process.env['DIGIGOV_CSS_BUILD'] ? {
   mode: 'jit',
 } : {}
 module.exports = {
   ...buildOnly,
   theme: {
-    colors: require('./colors'),
+    colors,
     container: {
       center: true,
     },
@@ -91,21 +95,7 @@ module.exports = {
       borderColor: ['active']
     }
   },
-  // corePlugins: [
-  //   'animation',
-  //   'backgroundColor',
-  //   'backgroundImage',
-  //   'borderColor',
-  //   'divideColor',
-  //   'gradientColorStops',
-  //   'placeholderColor',
-  //   'preflight',
-  //   'ringColor',
-  //   'ringOffsetColor',
-  //   'ringOffsetWidth',
-  //   'ringOpacity',
-  //   'ringWidth',
-  //   'textColor',
-  //   'transitionProperty',
-  // ],
+  plugins: [
+    plugin(colorVarsPlugin) 
+  ],
 };

package/colors/windi.js

@@ -1,12 +0,0 @@
-const colorValues = require('./color-values')
-
-let colorObject = {
-  "transparent": "transparent",
-  "current": "currentColor",
-}
-
-for (const [key, item] of Object.entries(colorValues)) {
-  colorObject[key] = `hsla(var(--${item.name}, ${item.value}) / var(--tw-bg-opacity, 1))`
-}
-
-module.exports = colorObject