@pzh-ui/css 0.0.70 → 0.0.72

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.70",
+    "version": "0.0.72",
     "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": "3dc349a730bb3eb48134374f767adc1236c92b7f",
+    "gitHead": "3b4fa9fa4c4a2f44e9ae19afb41a701b7eb9ab2f",
     "devDependencies": {
         "tailwindcss": "^3.3.2"
     }

package/src/tailwind.css

@@ -1273,6 +1273,8 @@ select {
   border-color: rgb(92 92 92 / var(--tw-border-opacity));
   padding-bottom: 6px;
   padding-top: 10px;
+  font-size: 1.25rem;
+  line-height: 1.875rem;
   line-height: 30px;
   --tw-text-opacity: 1;
   color: rgb(22 17 59 / var(--tw-text-opacity));
@@ -1324,8 +1326,8 @@ select {
   position: absolute;
   left: 0px;
   top: 0px;
-  height: 24px;
-  width: 24px;
+  height: 1.5rem;
+  width: 1.5rem;
   border-radius: 9999px;
   border-width: 1px;
   --tw-border-opacity: 1;
@@ -1338,8 +1340,8 @@ select {
 .pzh-form-radio:checked + span:after,
     .pzh-form-radio:not(:checked) + span:after {
   position: absolute;
-  left: 0.25rem;
-  top: 0.25rem;
+  left: 5px;
+  top: 5px;
   height: 14px;
   width: 14px;
   border-radius: 9999px;
@@ -1377,9 +1379,9 @@ select {
   position: absolute;
   left: 0px;
   top: 0px;
-  height: 24px;
-  width: 24px;
-  border-radius: 4px;
+  height: 1.5rem;
+  width: 1.5rem;
+  border-radius: 0.25rem;
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(92 92 92 / var(--tw-border-opacity));
@@ -1401,8 +1403,8 @@ select {
 .pzh-form-checkbox:checked + span:after,
     .pzh-form-checkbox:not(:checked) + span:after {
   position: absolute;
-  left: 0.25rem;
-  top: 2px;
+  left: 5px;
+  top: 0.125rem;
   height: 14px;
   width: 14px;
   --tw-text-opacity: 1;
@@ -1441,8 +1443,7 @@ select {
   font-family: 'Karbon Regular', sans-serif;
   font-weight: 400;
   font-size: 0.8rem;
-  box-shadow:
-            0px 18px 60px rgba(0, 0, 0, 0.07),
+  box-shadow: 0px 18px 60px rgba(0, 0, 0, 0.07),
             0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
             0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
   border-style: none;
@@ -1499,7 +1500,7 @@ select {
   margin-bottom: 0.25rem;
   height: 26px;
   width: 26px;
-  line-height: 28px;
+  line-height: 1.75rem;
 }
 
 .pzh-datepicker .react-datepicker__day {
@@ -1652,6 +1653,10 @@ select {
   top: 0px;
 }
 
+.top-6 {
+  top: 1.5rem;
+}
+
 .top-\[14px\] {
   top: 14px;
 }
@@ -1660,10 +1665,6 @@ select {
   top: 192px;
 }
 
-.top-\[24px\] {
-  top: 24px;
-}
-
 .top-\[288px\] {
   top: 288px;
 }
@@ -1696,13 +1697,8 @@ select {
   margin: 0px;
 }
 
-.m-0\.5 {
-  margin: 0.125rem;
-}
-
-.mx-1 {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
+.m-1 {
+  margin: 0.25rem;
 }
 
 .mx-auto {
@@ -1715,12 +1711,8 @@ select {
   margin-bottom: 0.5rem;
 }
 
-.-mb-0 {
-  margin-bottom: -0px;
-}
-
-.-mb-0\.5 {
-  margin-bottom: -0.125rem;
+.-mb-\[3px\] {
+  margin-bottom: -3px;
 }
 
 .-mb-px {
@@ -1751,22 +1743,18 @@ select {
   margin-top: -2px;
 }
 
-.-mt-\[4px\] {
-  margin-top: -4px;
-}
-
 .mb-0 {
   margin-bottom: 0px;
 }
 
-.mb-1 {
-  margin-bottom: 0.25rem;
-}
-
 .mb-2 {
   margin-bottom: 0.5rem;
 }
 
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
 .mb-\[1000px\] {
   margin-bottom: 1000px;
 }
@@ -1791,10 +1779,6 @@ select {
   margin-right: 1rem;
 }
 
-.mr-\[8px\] {
-  margin-right: 8px;
-}
-
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -1855,46 +1839,38 @@ select {
   display: none;
 }
 
-.h-4 {
-  height: 1rem;
+.h-1 {
+  height: 0.25rem;
 }
 
-.h-6 {
-  height: 1.5rem;
+.h-10 {
+  height: 2.5rem;
 }
 
-.h-7 {
-  height: 1.75rem;
+.h-12 {
+  height: 3rem;
 }
 
-.h-8 {
-  height: 2rem;
+.h-2 {
+  height: 0.5rem;
 }
 
-.h-\[24px\] {
-  height: 24px;
+.h-4 {
+  height: 1rem;
 }
 
-.h-\[28px\] {
-  height: 28px;
+.h-6 {
+  height: 1.5rem;
 }
 
-.h-\[36px\] {
-  height: 36px;
+.h-8 {
+  height: 2rem;
 }
 
 .h-\[48px\] {
   height: 48px;
 }
 
-.h-\[4px\] {
-  height: 4px;
-}
-
-.h-\[8px\] {
-  height: 8px;
-}
-
 .h-\[96px\] {
   height: 96px;
 }
@@ -1928,6 +1904,14 @@ select {
   width: max-content !important;
 }
 
+.w-10 {
+  width: 2.5rem;
+}
+
+.w-2 {
+  width: 0.5rem;
+}
+
 .w-4 {
   width: 1rem;
 }
@@ -1936,18 +1920,10 @@ select {
   width: 1.5rem;
 }
 
-.w-7 {
-  width: 1.75rem;
-}
-
 .w-8 {
   width: 2rem;
 }
 
-.w-\[8px\] {
-  width: 8px;
-}
-
 .w-\[96px\] {
   width: 96px;
 }
@@ -2037,6 +2013,16 @@ 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));
 }
 
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -2055,6 +2041,12 @@ select {
   cursor: pointer;
 }
 
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
 .resize-none {
   resize: none;
 }
@@ -2091,6 +2083,10 @@ select {
   gap: 0.5rem;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .gap-8 {
   gap: 2rem;
 }
@@ -2142,14 +2138,6 @@ select {
   border-radius: 0.25rem;
 }
 
-.rounded-\[40px\] {
-  border-radius: 40px;
-}
-
-.rounded-\[4px\] {
-  border-radius: 4px;
-}
-
 .rounded-full {
   border-radius: 9999px;
 }
@@ -2162,9 +2150,9 @@ select {
   border-radius: 0.375rem;
 }
 
-.rounded-t-\[4px\] {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+.rounded-t {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
 }
 
 .rounded-t-md {
@@ -2202,6 +2190,10 @@ select {
   border-color: rgb(22 17 59 / var(--tw-border-opacity));
 }
 
+.border-pzh-blue-dark\/35 {
+  border-color: rgb(22 17 59 / 0.35);
+}
+
 .border-pzh-cool-gray-dark {
   --tw-border-opacity: 1;
   border-color: rgb(92 92 92 / var(--tw-border-opacity));
@@ -2262,10 +2254,6 @@ select {
   border-color: rgb(198 164 16 / var(--tw-border-opacity));
 }
 
-.border-opacity-35 {
-  --tw-border-opacity: 0.35;
-}
-
 .bg-\[\#333333\] {
   --tw-bg-opacity: 1;
   background-color: rgb(51 51 51 / var(--tw-bg-opacity));
@@ -2305,6 +2293,10 @@ select {
   background-color: rgb(213 213 213 / var(--tw-bg-opacity));
 }
 
+.bg-pzh-gray-800\/10 {
+  background-color: rgb(34 34 34 / 0.1);
+}
+
 .bg-pzh-green {
   --tw-bg-opacity: 1;
   background-color: rgb(0 128 77 / var(--tw-bg-opacity));
@@ -2374,6 +2366,10 @@ select {
   padding: 1rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .p-6 {
   padding: 1.5rem;
 }
@@ -2383,16 +2379,6 @@ select {
   padding-bottom: 0px !important;
 }
 
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
-.px-1\.5 {
-  padding-left: 0.375rem;
-  padding-right: 0.375rem;
-}
-
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2413,11 +2399,6 @@ select {
   padding-right: 1.5rem;
 }
 
-.px-\[12px\] {
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -2449,10 +2430,6 @@ select {
   padding-bottom: 1rem;
 }
 
-.pb-\[12px\] {
-  padding-bottom: 12px;
-}
-
 .pb-\[9px\] {
   padding-bottom: 9px;
 }
@@ -2509,6 +2486,10 @@ select {
   padding-top: 15px;
 }
 
+.pt-px {
+  padding-top: 1px;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2521,10 +2502,6 @@ select {
   vertical-align: bottom;
 }
 
-.text-\[0\.8rem\] {
-  font-size: 0.8rem;
-}
-
 .text-\[1\.125rem\] {
   font-size: 1.125rem;
 }
@@ -2537,14 +2514,6 @@ select {
   font-size: 1.5rem;
 }
 
-.text-\[16px\] {
-  font-size: 16px;
-}
-
-.text-\[18px\] {
-  font-size: 18px;
-}
-
 .text-\[2\.5rem\] {
   font-size: 2.5rem;
 }
@@ -2561,6 +2530,21 @@ select {
   font-size: 4rem;
 }
 
+.text-l {
+  font-size: 1.5rem;
+  line-height: 1.875rem;
+}
+
+.text-m {
+  font-size: 1.25rem;
+  line-height: 1.875rem;
+}
+
+.text-s {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -2585,8 +2569,8 @@ select {
   line-height: 1.25rem;
 }
 
-.leading-6 {
-  line-height: 1.5rem;
+.leading-7 {
+  line-height: 1.75rem;
 }
 
 .leading-\[110\%\] {
@@ -2597,10 +2581,6 @@ select {
   line-height: 125%;
 }
 
-.leading-\[28px\] {
-  line-height: 28px;
-}
-
 .leading-\[30px\] {
   line-height: 30px;
 }
@@ -2609,10 +2589,6 @@ select {
   line-height: 1;
 }
 
-.leading-normal {
-  line-height: 1.5;
-}
-
 .text-pzh-blue {
   --tw-text-opacity: 1;
   color: rgb(40 31 107 / var(--tw-text-opacity));
@@ -2871,6 +2847,22 @@ b {
   font-family: 'Karbon Medium', sans-serif;
 }
 
+ul li ul li {
+  list-style-type: circle;
+}
+
+ul li ul li ul li {
+  list-style-type: square;
+}
+
+ol li ol li {
+  list-style-type: lower-alpha;
+}
+
+ol li ol li ol li {
+  list-style-type: lower-roman;
+}
+
 .font-normal {
   font-family: 'Karbon Regular', sans-serif;
 }
@@ -3043,6 +3035,10 @@ b {
   opacity: 1;
 }
 
+.group:hover .group-hover\:opacity-40 {
+  opacity: 0.4;
+}
+
 .prose-a\:text-pzh-green :is(:where(a):not(:where([class~="not-prose"] *))) {
   --tw-text-opacity: 1;
   color: rgb(0 128 77 / var(--tw-text-opacity));
@@ -3172,6 +3168,11 @@ b {
   .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

@@ -44,6 +44,22 @@ b {
     font-family: 'Karbon Medium', sans-serif;
 }
 
+ul li ul li {
+    list-style-type: circle;
+}
+
+ul li ul li ul li {
+    list-style-type: square;
+}
+
+ol li ol li {
+    list-style-type: lower-alpha;
+}
+
+ol li ol li ol li {
+    list-style-type: lower-roman;
+}
+
 .font-normal {
     font-family: 'Karbon Regular', sans-serif;
 }
@@ -68,7 +84,7 @@ b {
     }
 
     .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 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-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;
     }
 
     .pzh-form-error,
@@ -80,12 +96,12 @@ b {
 
     .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-[24px] w-[24px] rounded-full border;
+        @apply border-pzh-gray-600 bg-pzh-gray-200 absolute left-0 top-0 h-6 w-6 rounded-full border;
         content: '';
     }
     .pzh-form-radio:checked + span:after,
     .pzh-form-radio:not(:checked) + span:after {
-        @apply bg-pzh-green absolute left-1 top-1 h-[14px] w-[14px] rounded-full transition duration-200;
+        @apply bg-pzh-green absolute left-[5px] top-[5px] h-[14px] w-[14px] rounded-full transition duration-200;
         content: '';
     }
     .pzh-form-radio:not(:checked) + span:after,
@@ -104,7 +120,7 @@ b {
     }
 
     .pzh-form-checkbox + span:before {
-        @apply border-pzh-gray-600 bg-pzh-gray-200 absolute left-0 top-0 h-[24px] w-[24px] rounded-[4px] border transition duration-200;
+        @apply border-pzh-gray-600 bg-pzh-gray-200 absolute left-0 top-0 h-6 w-6 rounded border transition duration-200;
         content: '';
     }
 
@@ -114,7 +130,7 @@ b {
 
     .pzh-form-checkbox:checked + span:after,
     .pzh-form-checkbox:not(:checked) + span:after {
-        @apply absolute left-1 top-[2px] h-[14px] w-[14px] text-white transition duration-200;
+        @apply absolute left-[5px] top-0.5 h-[14px] w-[14px] 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>");
     }
 
@@ -128,11 +144,11 @@ b {
     }
 
     .form-field-label {
-        @apply mb-2 block text-xs uppercase tracking-wide text-gray-700;
+        @apply text-s mb-2 block uppercase tracking-wide text-gray-700;
     }
 
     .form-field-description {
-        @apply mb-2 text-sm text-gray-700;
+        @apply text-s mb-2 text-gray-700;
     }
 
     /*
@@ -143,8 +159,7 @@ b {
         font-family: 'Karbon Regular', sans-serif;
         font-weight: 400;
         font-size: 0.8rem;
-        box-shadow:
-            0px 18px 60px rgba(0, 0, 0, 0.07),
+        box-shadow: 0px 18px 60px rgba(0, 0, 0, 0.07),
             0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
             0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
         @apply text-pzh-blue-dark border-none;
@@ -184,7 +199,7 @@ b {
     .pzh-datepicker .react-datepicker__day-name,
     .pzh-datepicker .react-datepicker__day,
     .pzh-datepicker .react-datepicker__time-name {
-        @apply mx-2 my-1 h-[26px] w-[26px] leading-[28px];
+        @apply mx-2 my-1 h-[26px] w-[26px] leading-7;
     }
 
     .pzh-datepicker .react-datepicker__day {