@pzh-ui/css 0.0.70 → 0.0.71

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.70",
+    "version": "0.0.71",
     "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": "a335068588e469ce0060f006d887215bd9af43a7",
     "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;
@@ -1499,7 +1501,7 @@ select {
   margin-bottom: 0.25rem;
   height: 26px;
   width: 26px;
-  line-height: 28px;
+  line-height: 1.75rem;
 }
 
 .pzh-datepicker .react-datepicker__day {
@@ -1652,6 +1654,10 @@ select {
   top: 0px;
 }
 
+.top-6 {
+  top: 1.5rem;
+}
+
 .top-\[14px\] {
   top: 14px;
 }
@@ -1660,10 +1666,6 @@ select {
   top: 192px;
 }
 
-.top-\[24px\] {
-  top: 24px;
-}
-
 .top-\[288px\] {
   top: 288px;
 }
@@ -1696,13 +1698,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 +1712,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,18 +1744,10 @@ 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;
 }
@@ -1791,10 +1776,6 @@ select {
   margin-right: 1rem;
 }
 
-.mr-\[8px\] {
-  margin-right: 8px;
-}
-
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -1855,6 +1836,22 @@ select {
   display: none;
 }
 
+.h-1 {
+  height: 0.25rem;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
+.h-2 {
+  height: 0.5rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -1871,30 +1868,10 @@ select {
   height: 2rem;
 }
 
-.h-\[24px\] {
-  height: 24px;
-}
-
-.h-\[28px\] {
-  height: 28px;
-}
-
-.h-\[36px\] {
-  height: 36px;
-}
-
 .h-\[48px\] {
   height: 48px;
 }
 
-.h-\[4px\] {
-  height: 4px;
-}
-
-.h-\[8px\] {
-  height: 8px;
-}
-
 .h-\[96px\] {
   height: 96px;
 }
@@ -1928,6 +1905,14 @@ select {
   width: max-content !important;
 }
 
+.w-10 {
+  width: 2.5rem;
+}
+
+.w-2 {
+  width: 0.5rem;
+}
+
 .w-4 {
   width: 1rem;
 }
@@ -1936,18 +1921,10 @@ select {
   width: 1.5rem;
 }
 
-.w-7 {
-  width: 1.75rem;
-}
-
 .w-8 {
   width: 2rem;
 }
 
-.w-\[8px\] {
-  width: 8px;
-}
-
 .w-\[96px\] {
   width: 96px;
 }
@@ -2091,6 +2068,10 @@ select {
   gap: 0.5rem;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .gap-8 {
   gap: 2rem;
 }
@@ -2142,14 +2123,6 @@ select {
   border-radius: 0.25rem;
 }
 
-.rounded-\[40px\] {
-  border-radius: 40px;
-}
-
-.rounded-\[4px\] {
-  border-radius: 4px;
-}
-
 .rounded-full {
   border-radius: 9999px;
 }
@@ -2162,11 +2135,6 @@ select {
   border-radius: 0.375rem;
 }
 
-.rounded-t-\[4px\] {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-}
-
 .rounded-t-md {
   border-top-left-radius: 0.375rem;
   border-top-right-radius: 0.375rem;
@@ -2202,6 +2170,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 +2234,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));
@@ -2374,6 +2342,10 @@ select {
   padding: 1rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .p-6 {
   padding: 1.5rem;
 }
@@ -2413,11 +2385,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 +2416,6 @@ select {
   padding-bottom: 1rem;
 }
 
-.pb-\[12px\] {
-  padding-bottom: 12px;
-}
-
 .pb-\[9px\] {
   padding-bottom: 9px;
 }
@@ -2521,10 +2484,6 @@ select {
   vertical-align: bottom;
 }
 
-.text-\[0\.8rem\] {
-  font-size: 0.8rem;
-}
-
 .text-\[1\.125rem\] {
   font-size: 1.125rem;
 }
@@ -2537,14 +2496,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 +2512,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 +2551,8 @@ select {
   line-height: 1.25rem;
 }
 
-.leading-6 {
-  line-height: 1.5rem;
+.leading-7 {
+  line-height: 1.75rem;
 }
 
 .leading-\[110\%\] {
@@ -2597,10 +2563,6 @@ select {
   line-height: 125%;
 }
 
-.leading-\[28px\] {
-  line-height: 28px;
-}
-
 .leading-\[30px\] {
   line-height: 30px;
 }
@@ -2609,10 +2571,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));
@@ -3172,6 +3130,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

@@ -68,7 +68,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 +80,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 +104,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 +114,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 +128,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;
     }
 
     /*
@@ -184,7 +184,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 {