@pzh-ui/css 0.0.76 → 0.0.78

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.76",
+    "version": "0.0.78",
     "description": "Contains default styling for projects whitin Provincie Zuid-Holland.",
     "license": "ISC",
     "publishConfig": {
@@ -21,7 +21,7 @@
         "react-datepicker": "^4.7.0",
         "react-toastify": "^9.1.2"
     },
-    "gitHead": "5fcd44077edac3bbe12ce61201e53b31481d9779",
+    "gitHead": "75da0c989fb3153635ac85fcc8b46d7a27c6a9cb",
     "devDependencies": {
         "tailwindcss": "^3.3.2"
     }

package/src/tailwind.css

@@ -1297,7 +1297,7 @@ select {
 
 .pzh-form-input:focus {
   --tw-border-opacity: 1;
-  border-color: rgb(40 31 107 / var(--tw-border-opacity));
+  border-color: rgb(35 96 197 / var(--tw-border-opacity));
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1305,7 +1305,7 @@ select {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(40 31 107 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(35 96 197 / var(--tw-ring-opacity));
 }
 
 .pzh-form-input:disabled {
@@ -1325,28 +1325,34 @@ select {
   .pzh-form-radio:not(:checked) + span:before {
   position: absolute;
   left: 0px;
-  top: 0px;
-  height: 1.5rem;
-  width: 1.5rem;
+  top: 0.125rem;
+  height: 1.25rem;
+  width: 1.25rem;
   border-radius: 9999px;
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(92 92 92 / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: rgb(230 230 230 / var(--tw-bg-opacity));
   content: "";
 }
 
+.pzh-form-radio:not(:checked):hover + span:before,
+  .pzh-form-checkbox:not(:checked):hover + span:before {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 128 77 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(237 250 240 / var(--tw-bg-opacity));
+}
+
 .pzh-form-radio:checked + span:after,
   .pzh-form-radio:not(:checked) + span:after {
   position: absolute;
-  left: 5px;
-  top: 5px;
-  height: 14px;
-  width: 14px;
+  left: 0.375rem;
+  top: 0.5rem;
+  height: 0.5rem;
+  width: 0.5rem;
   border-radius: 9999px;
   --tw-bg-opacity: 1;
-  background-color: rgb(0 128 77 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
@@ -1355,6 +1361,13 @@ select {
   content: "";
 }
 
+.pzh-form-radio:checked + span:before {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 128 77 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 128 77 / var(--tw-bg-opacity));
+}
+
 .pzh-form-radio:not(:checked) + span:after,
   .pzh-form-checkbox:not(:checked) + span:after {
   opacity: 0;
@@ -1370,7 +1383,7 @@ select {
 .pzh-form-radio:disabled + span:before,
   .pzh-form-checkbox:disabled + span:before {
   --tw-border-opacity: 1;
-  border-color: rgb(230 230 230 / var(--tw-border-opacity));
+  border-color: rgb(131 131 131 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
@@ -1378,15 +1391,13 @@ select {
 .pzh-form-checkbox + span:before {
   position: absolute;
   left: 0px;
-  top: 0px;
-  height: 1.5rem;
-  width: 1.5rem;
+  top: 0.125rem;
+  height: 1.25rem;
+  width: 1.25rem;
   border-radius: 0.25rem;
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(92 92 92 / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: rgb(230 230 230 / var(--tw-bg-opacity));
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
@@ -1396,6 +1407,8 @@ select {
 }
 
 .pzh-form-checkbox:checked:not(:disabled) + span:before {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 128 77 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(0 128 77 / var(--tw-bg-opacity));
 }
@@ -1403,10 +1416,10 @@ select {
 .pzh-form-checkbox:checked + span:after,
   .pzh-form-checkbox:not(:checked) + span:after {
   position: absolute;
-  left: 5px;
-  top: 0.125rem;
-  height: 14px;
-  width: 14px;
+  left: 0.25rem;
+  top: 1px;
+  height: 0.75rem;
+  width: 0.75rem;
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
@@ -1424,7 +1437,7 @@ select {
 .pzh-form-radio:focus + span:before,
   .pzh-form-checkbox:focus + span:before {
   --tw-border-opacity: 1;
-  border-color: rgb(40 31 107 / var(--tw-border-opacity));
+  border-color: rgb(35 96 197 / var(--tw-border-opacity));
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1432,7 +1445,7 @@ select {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(40 31 107 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(35 96 197 / var(--tw-ring-opacity));
 }
 
 /*
@@ -1532,6 +1545,7 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(0 128 77 / var(--tw-bg-opacity));
   font-weight: 700;
+  font-family: "Karbon Medium", sans-serif;
 }
 
 .pzh-datepicker .react-datepicker__year-read-view--down-arrow,
@@ -1551,6 +1565,13 @@ select {
   line-height: 14px;
 }
 
+.pzh-datepicker .react-datepicker__current-month,
+  .pzh-datepicker .react-datepicker__day-name,
+  .pzh-datepicker .react-datepicker__day--today {
+  font-weight: 700;
+  font-family: "Karbon Medium", sans-serif;
+}
+
 .pzh-select-input input {
   box-shadow: none !important;
 }
@@ -1813,6 +1834,10 @@ select {
   margin-right: 1rem;
 }
 
+.mr-8 {
+  margin-right: 2rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -1833,8 +1858,8 @@ select {
   margin-top: 1px;
 }
 
-.mt-\[3px\] {
-  margin-top: 3px;
+.mt-px {
+  margin-top: 1px;
 }
 
 .block {
@@ -1979,6 +2004,10 @@ select {
   min-width: 14px;
 }
 
+.min-w-\[18px\] {
+  min-width: 18px;
+}
+
 .min-w-\[320px\] {
   min-width: 320px;
 }
@@ -2235,6 +2264,11 @@ select {
   border-color: rgb(40 31 107 / var(--tw-border-opacity));
 }
 
+.border-pzh-blue-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(123 173 222 / var(--tw-border-opacity));
+}
+
 .border-pzh-blue-dark {
   --tw-border-opacity: 1;
   border-color: rgb(22 17 59 / var(--tw-border-opacity));
@@ -2269,6 +2303,11 @@ select {
   border-color: rgb(0 128 77 / var(--tw-border-opacity));
 }
 
+.border-pzh-green-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(97 179 117 / var(--tw-border-opacity));
+}
+
 .border-pzh-green-light {
   --tw-border-opacity: 1;
   border-color: rgb(97 179 117 / var(--tw-border-opacity));
@@ -2284,6 +2323,11 @@ select {
   border-color: rgb(209 31 61 / var(--tw-border-opacity));
 }
 
+.border-pzh-red-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(235 112 133 / var(--tw-border-opacity));
+}
+
 .border-pzh-red-light {
   --tw-border-opacity: 1;
   border-color: rgb(235 112 133 / var(--tw-border-opacity));
@@ -2299,6 +2343,11 @@ select {
   border-color: rgb(239 204 54 / var(--tw-border-opacity));
 }
 
+.border-pzh-yellow-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(241 219 126 / var(--tw-border-opacity));
+}
+
 .border-pzh-yellow-dark {
   --tw-border-opacity: 1;
   border-color: rgb(198 164 16 / var(--tw-border-opacity));
@@ -2318,6 +2367,11 @@ select {
   background-color: rgb(40 31 107 / var(--tw-bg-opacity));
 }
 
+.bg-pzh-blue-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(242 247 252 / var(--tw-bg-opacity));
+}
+
 .bg-pzh-blue-light {
   --tw-bg-opacity: 1;
   background-color: rgb(123 173 222 / var(--tw-bg-opacity));
@@ -2357,6 +2411,11 @@ select {
   background-color: rgb(0 128 77 / var(--tw-bg-opacity));
 }
 
+.bg-pzh-green-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(237 250 240 / var(--tw-bg-opacity));
+}
+
 .bg-pzh-green-light {
   --tw-bg-opacity: 1;
   background-color: rgb(97 179 117 / var(--tw-bg-opacity));
@@ -2377,6 +2436,11 @@ select {
   background-color: rgb(209 31 61 / var(--tw-bg-opacity));
 }
 
+.bg-pzh-red-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 237 240 / var(--tw-bg-opacity));
+}
+
 .bg-pzh-red-light {
   --tw-bg-opacity: 1;
   background-color: rgb(235 112 133 / var(--tw-bg-opacity));
@@ -2392,13 +2456,14 @@ select {
   background-color: rgb(239 204 54 / var(--tw-bg-opacity));
 }
 
-.bg-white {
+.bg-pzh-yellow-10 {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(255 249 227 / var(--tw-bg-opacity));
 }
 
-.bg-opacity-20 {
-  --tw-bg-opacity: 0.2;
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
 .bg-opacity-50 {
@@ -2464,6 +2529,11 @@ select {
   padding-bottom: 0.5rem;
 }
 
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -2478,10 +2548,6 @@ select {
   padding-bottom: 0.25rem;
 }
 
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
-
 .pb-3 {
   padding-bottom: 0.75rem;
 }
@@ -2494,6 +2560,10 @@ select {
   padding-bottom: 9px;
 }
 
+.pl-7 {
+  padding-left: 1.75rem;
+}
+
 .pl-\[34px\] {
   padding-left: 34px;
 }
@@ -2526,10 +2596,6 @@ select {
   padding-top: 0.5rem;
 }
 
-.pt-3 {
-  padding-top: 0.75rem;
-}
-
 .pt-4 {
   padding-top: 1rem;
 }
@@ -2641,10 +2707,6 @@ select {
   line-height: 125%;
 }
 
-.leading-\[30px\] {
-  line-height: 30px;
-}
-
 .leading-none {
   line-height: 1;
 }
@@ -2654,6 +2716,11 @@ select {
   color: rgb(40 31 107 / var(--tw-text-opacity));
 }
 
+.text-pzh-blue-900 {
+  --tw-text-opacity: 1;
+  color: rgb(22 17 59 / var(--tw-text-opacity));
+}
+
 .text-pzh-blue-dark {
   --tw-text-opacity: 1;
   color: rgb(22 17 59 / var(--tw-text-opacity));
@@ -2692,11 +2759,21 @@ select {
   color: rgb(92 92 92 / var(--tw-text-opacity));
 }
 
+.text-pzh-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(70 70 70 / var(--tw-text-opacity));
+}
+
 .text-pzh-green {
   --tw-text-opacity: 1;
   color: rgb(0 128 77 / var(--tw-text-opacity));
 }
 
+.text-pzh-green-900 {
+  --tw-text-opacity: 1;
+  color: rgb(0 77 46 / var(--tw-text-opacity));
+}
+
 .text-pzh-green-light {
   --tw-text-opacity: 1;
   color: rgb(97 179 117 / var(--tw-text-opacity));
@@ -2717,6 +2794,11 @@ select {
   color: rgb(209 31 61 / var(--tw-text-opacity));
 }
 
+.text-pzh-red-900 {
+  --tw-text-opacity: 1;
+  color: rgb(151 22 44 / var(--tw-text-opacity));
+}
+
 .text-pzh-red-light {
   --tw-text-opacity: 1;
   color: rgb(235 112 133 / var(--tw-text-opacity));
@@ -3303,10 +3385,6 @@ ol li ol li ol li {
     grid-column: span 4 / span 4;
   }
 
-  .md\:ml-4 {
-    margin-left: 1rem;
-  }
-
   .md\:flex {
     display: flex;
   }
@@ -3318,11 +3396,6 @@ ol li ol li ol li {
   .md\:gap-8 {
     gap: 2rem;
   }
-
-  .md\:text-m {
-    font-size: 1.25rem;
-    line-height: 1.875rem;
-  }
 }
 
 @media (min-width: 1024px) {

package/src/tailwind.src.css

@@ -84,7 +84,7 @@ ol li ol li ol li {
   }
 
   .pzh-form-input {
-    @apply placeholder-pzh-gray-600 text-pzh-blue-dark border-pzh-gray-600 hover:border-pzh-blue focus:ring-pzh-blue focus:border-pzh-blue disabled:bg-pzh-gray-200 text-m block w-full appearance-none rounded border pb-[6px] pt-[10px] leading-[30px] focus:outline-none focus:outline-none focus:ring focus:ring-2;
+    @apply placeholder-pzh-gray-600 text-pzh-blue-dark border-pzh-gray-600 hover:border-pzh-blue focus:ring-pzh-focus focus:border-pzh-focus disabled:bg-pzh-gray-200 text-m block w-full appearance-none rounded border pb-[6px] pt-[10px] leading-[30px] focus:outline-none focus:outline-none focus:ring focus:ring-2;
   }
 
   .pzh-form-error,
@@ -96,14 +96,21 @@ ol li ol li ol li {
 
   .pzh-form-radio:checked + span:before,
   .pzh-form-radio:not(:checked) + span:before {
-    @apply border-pzh-gray-600 bg-pzh-gray-200 absolute left-0 top-0 h-6 w-6 rounded-full border;
+    @apply border-pzh-gray-600 absolute left-0 top-0.5 h-5 w-5 rounded-full border;
     content: "";
   }
+  .pzh-form-radio:not(:checked):hover + span:before,
+  .pzh-form-checkbox:not(:checked):hover + span:before {
+    @apply border-pzh-green-500 bg-pzh-green-10;
+  }
   .pzh-form-radio:checked + span:after,
   .pzh-form-radio:not(:checked) + span:after {
-    @apply bg-pzh-green absolute left-[5px] top-[5px] h-[14px] w-[14px] rounded-full transition duration-200;
+    @apply bg-pzh-white absolute left-1.5 top-2 h-2 w-2 rounded-full transition duration-200;
     content: "";
   }
+  .pzh-form-radio:checked + span:before {
+    @apply bg-pzh-green-500 border-pzh-green-500;
+  }
   .pzh-form-radio:not(:checked) + span:after,
   .pzh-form-checkbox:not(:checked) + span:after {
     opacity: 0;
@@ -116,21 +123,21 @@ ol li ol li ol li {
   }
   .pzh-form-radio:disabled + span:before,
   .pzh-form-checkbox:disabled + span:before {
-    @apply border-pzh-gray-200 bg-pzh-gray-200;
+    @apply border-pzh-gray-500 bg-pzh-gray-200;
   }
 
   .pzh-form-checkbox + span:before {
-    @apply border-pzh-gray-600 bg-pzh-gray-200 absolute left-0 top-0 h-6 w-6 rounded border transition duration-200;
+    @apply border-pzh-gray-600 absolute left-0 top-0.5 h-5 w-5 rounded border transition duration-200;
     content: "";
   }
 
   .pzh-form-checkbox:checked:not(:disabled) + span:before {
-    @apply bg-pzh-green;
+    @apply bg-pzh-green-500 border-pzh-green-500;
   }
 
   .pzh-form-checkbox:checked + span:after,
   .pzh-form-checkbox:not(:checked) + span:after {
-    @apply absolute left-[5px] top-0.5 h-[14px] w-[14px] text-white transition duration-200;
+    @apply absolute left-1 top-px h-3 w-3 text-white transition duration-200;
     content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='white' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
   }
 
@@ -140,7 +147,7 @@ ol li ol li ol li {
 
   .pzh-form-radio:focus + span:before,
   .pzh-form-checkbox:focus + span:before {
-    @apply ring-pzh-blue border-pzh-blue outline-none ring ring-2;
+    @apply ring-pzh-focus border-pzh-focus outline-none ring ring-2;
   }
 
   .form-field-label {
@@ -220,7 +227,7 @@ ol li ol li ol li {
 
   .pzh-datepicker .react-datepicker__day--selected,
   .pzh-datepicker .react-datepicker__day--selected:hover {
-    @apply bg-pzh-green bold;
+    @apply bg-pzh-green font-bold;
   }
 
   .pzh-datepicker .react-datepicker__year-read-view--down-arrow,
@@ -234,6 +241,12 @@ ol li ol li ol li {
     @apply leading-[14px];
   }
 
+  .pzh-datepicker .react-datepicker__current-month,
+  .pzh-datepicker .react-datepicker__day-name,
+  .pzh-datepicker .react-datepicker__day--today {
+    @apply font-bold;
+  }
+
   .pzh-select-input input {
     box-shadow: none !important;
   }