@pzh-ui/css 0.0.34 → 0.0.39

package/config/index.js

@@ -1,7 +1,4 @@
 module.exports = {
-    corePlugins: {
-        fontWeight: false,
-    },
     content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
     variants: {
         pointerEvents: ['responsive', 'hover'],
@@ -196,7 +193,12 @@ module.exports = {
                 dark: '#32265a',
             },
             'pzh-gray': {
-                DEFAULT: '#EBEBEB',
+                "600": "#8A889D",
+                "500": "#A2A0B1",
+                "400": "#ADACBA",
+                "300": "#E8E7EB",
+                "200": '#EBEBEB',
+                "100": '#F5F5F5',
             },
             'pzh-cool-gray': {
                 DEFAULT: '#838383',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.34",
+    "version": "0.0.39",
     "description": "Contains default styling for projects whitin Provincie Zuid-Holland.",
     "license": "ISC",
     "publishConfig": {
@@ -19,7 +19,7 @@
         "@tailwindcss/line-clamp": "^0.3.1",
         "react-datepicker": "^4.7.0"
     },
-    "gitHead": "9306f80e6b95736d6ff4655fd840481548d4b865",
+    "gitHead": "174607cd1c919eb6df5cff984aafc4d6b0d33484",
     "devDependencies": {
         "tailwindcss": "^3.0.23"
     }

package/src/tailwind.css

@@ -785,14 +785,14 @@ select{
   margin-right: 0.5rem;
 }
 
-.ml-2{
-  margin-left: 0.5rem;
-}
-
 .-mt-\[2px\]{
   margin-top: -2px;
 }
 
+.ml-2{
+  margin-left: 0.5rem;
+}
+
 .-mt-0\.5{
   margin-top: -0.125rem;
 }
@@ -821,8 +821,8 @@ select{
   margin-right: -2rem;
 }
 
-.ml-3{
-  margin-left: 0.75rem;
+.mt-\[3px\]{
+  margin-top: 3px;
 }
 
 .mb-2{
@@ -849,6 +849,14 @@ select{
   display: flex;
 }
 
+.inline-flex{
+  display: inline-flex;
+}
+
+.table{
+  display: table;
+}
+
 .contents{
   display: contents;
 }
@@ -881,10 +889,22 @@ select{
   height: 1px;
 }
 
+.h-full{
+  height: 100%;
+}
+
 .h-4{
   height: 1rem;
 }
 
+.h-8{
+  height: 2rem;
+}
+
+.h-\[8px\]{
+  height: 8px;
+}
+
 .min-h-screen{
   min-height: 100vh;
 }
@@ -909,6 +929,10 @@ select{
   width: 1rem;
 }
 
+.w-\[8px\]{
+  width: 8px;
+}
+
 .max-w-screen-xl{
   max-width: 1280px;
 }
@@ -936,6 +960,11 @@ select{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.rotate-45{
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -984,12 +1013,16 @@ select{
   border-radius: 0.5rem;
 }
 
+.rounded-\[4px\]{
+  border-radius: 4px;
+}
+
 .rounded-md{
   border-radius: 0.375rem;
 }
 
-.rounded-\[4px\]{
-  border-radius: 4px;
+.rounded-full{
+  border-radius: 9999px;
 }
 
 .rounded-t-md{
@@ -1001,23 +1034,27 @@ select{
   border-width: 1px;
 }
 
+.border-b{
+  border-bottom-width: 1px;
+}
+
 .border-dashed{
   border-style: dashed;
 }
 
-.border-pzh-badge-green{
+.border-pzh-green{
   --tw-border-opacity: 1;
-  border-color: rgb(80 166 88 / var(--tw-border-opacity));
+  border-color: rgb(0 128 77 / var(--tw-border-opacity));
 }
 
-.border-pzh-badge-orange{
+.border-pzh-yellow-dark{
   --tw-border-opacity: 1;
-  border-color: rgb(249 181 60 / var(--tw-border-opacity));
+  border-color: rgb(198 164 16 / var(--tw-border-opacity));
 }
 
-.border-pzh-badge-red{
+.border-pzh-red{
   --tw-border-opacity: 1;
-  border-color: rgb(203 59 54 / var(--tw-border-opacity));
+  border-color: rgb(209 31 61 / var(--tw-border-opacity));
 }
 
 .border-pzh-cool-gray{
@@ -1030,11 +1067,6 @@ select{
   border-color: rgb(22 17 59 / var(--tw-border-opacity));
 }
 
-.border-pzh-red{
-  --tw-border-opacity: 1;
-  border-color: rgb(209 31 61 / var(--tw-border-opacity));
-}
-
 .border-opacity-35{
   --tw-border-opacity: 0.35;
 }
@@ -1087,6 +1119,11 @@ select{
   background-color: rgb(123 173 222 / var(--tw-bg-opacity));
 }
 
+.bg-black{
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .bg-pzh-gray{
   --tw-bg-opacity: 1;
   background-color: rgb(235 235 235 / var(--tw-bg-opacity));
@@ -1100,6 +1137,10 @@ select{
   --tw-bg-opacity: 0.2;
 }
 
+.bg-opacity-80{
+  --tw-bg-opacity: 0.8;
+}
+
 .p-1{
   padding: 0.25rem;
 }
@@ -1147,6 +1188,11 @@ select{
   padding-right: 1.5rem;
 }
 
+.px-2{
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .py-6{
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
@@ -1261,6 +1307,14 @@ select{
   font-size: 0.8rem;
 }
 
+.font-bold{
+  font-weight: 700;
+}
+
+.font-normal{
+  font-weight: 400;
+}
+
 .uppercase{
   text-transform: uppercase;
 }
@@ -1277,31 +1331,36 @@ select{
   line-height: 1.5;
 }
 
-.leading-\[28px\]{
-  line-height: 28px;
-}
-
 .leading-5{
   line-height: 1.25rem;
 }
 
+.leading-\[28px\]{
+  line-height: 28px;
+}
+
 .leading-none{
   line-height: 1;
 }
 
-.text-pzh-badge-green{
+.text-pzh-blue-dark{
   --tw-text-opacity: 1;
-  color: rgb(80 166 88 / var(--tw-text-opacity));
+  color: rgb(22 17 59 / var(--tw-text-opacity));
+}
+
+.text-pzh-green{
+  --tw-text-opacity: 1;
+  color: rgb(0 128 77 / var(--tw-text-opacity));
 }
 
-.text-pzh-badge-orange{
+.text-pzh-yellow-dark{
   --tw-text-opacity: 1;
-  color: rgb(249 181 60 / var(--tw-text-opacity));
+  color: rgb(198 164 16 / var(--tw-text-opacity));
 }
 
-.text-pzh-badge-red{
+.text-pzh-red{
   --tw-text-opacity: 1;
-  color: rgb(203 59 54 / var(--tw-text-opacity));
+  color: rgb(209 31 61 / var(--tw-text-opacity));
 }
 
 .text-pzh-cool-gray{
@@ -1319,21 +1378,6 @@ select{
   color: rgb(40 31 107 / var(--tw-text-opacity));
 }
 
-.text-pzh-red{
-  --tw-text-opacity: 1;
-  color: rgb(209 31 61 / var(--tw-text-opacity));
-}
-
-.text-pzh-blue-dark{
-  --tw-text-opacity: 1;
-  color: rgb(22 17 59 / var(--tw-text-opacity));
-}
-
-.text-pzh-green{
-  --tw-text-opacity: 1;
-  color: rgb(0 128 77 / var(--tw-text-opacity));
-}
-
 .text-opacity-35{
   --tw-text-opacity: 0.35;
 }
@@ -1907,6 +1951,11 @@ h6,
   background-color: rgb(0 77 46 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-pzh-gray-light:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-opacity-10:hover{
   --tw-bg-opacity: 0.1;
 }
@@ -1931,6 +1980,11 @@ h6,
           text-decoration-line: underline;
 }
 
+.focus\:bg-pzh-gray-light:focus{
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+}
+
 .focus\:bg-pzh-blue:focus{
   --tw-bg-opacity: 1;
   background-color: rgb(40 31 107 / var(--tw-bg-opacity));
@@ -1967,6 +2021,10 @@ h6,
   --tw-ring-offset-width: 2px;
 }
 
+.group:hover .group-hover\:opacity-100{
+  opacity: 1;
+}
+
 @media (min-width: 640px){
   .sm\:my-8{
     margin-top: 2rem;
@@ -2062,6 +2120,14 @@ h6,
     margin-left: 1rem;
   }
 
+  .md\:flex{
+    display: flex;
+  }
+
+  .md\:hidden{
+    display: none;
+  }
+
   .md\:p-4{
     padding: 1rem;
   }

package/src/tailwind.src.css

@@ -62,7 +62,7 @@ h6,
 }
 
 .pzh-form-input {
-    @apply block w-full pt-[10px] pb-[6px] leading-[30px] placeholder-pzh-blue-dark placeholder-opacity-55 text-pzh-blue-dark border border-pzh-blue-dark border-opacity-35 rounded appearance-none focus:outline-none hover:border-gray-500 focus:border-pzh-blue-light disabled:border-pzh-blue-dark disabled:border-opacity-10 disabled:bg-pzh-gray disabled:text-opacity-55;
+    @apply block w-full pt-[10px] pb-[6px] leading-[30px] placeholder-pzh-blue-dark placeholder-opacity-55 text-pzh-blue-dark border border-pzh-blue-dark border-opacity-35 rounded appearance-none focus:outline-none hover:border-gray-500 focus:border-pzh-blue-light disabled:border-pzh-blue-dark disabled:border-opacity-10 disabled:bg-pzh-gray-200 disabled:text-opacity-55;
 }
 
 .pzh-form-error,