@pzh-ui/css 0.0.66 → 0.0.68

package/config/index.js

@@ -194,12 +194,14 @@ module.exports = {
                 dark: '#32265a',
             },
             'pzh-gray': {
-                600: '#8A889D',
-                500: '#A2A0B1',
-                400: '#ADACBA',
-                300: '#E8E7EB',
-                200: '#EBEBEB',
-                100: '#F5F5F5',
+                800: '#222222',
+                700: '#464646',
+                600: '#5C5C5C',
+                500: '#838383',
+                400: '#BFBFBF',
+                300: '#D5D5D5',
+                200: '#E6E6E6',
+                100: '#F8F8F8',
             },
             'pzh-cool-gray': {
                 DEFAULT: '#838383',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.66",
+    "version": "0.0.68",
     "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": "9896c23c44cc94a0df25d1d95ca67b0e0fb25616",
+    "gitHead": "2adc87e34605f3bba8170a8aaf6571c7d523baf7",
     "devDependencies": {
         "tailwindcss": "^3.3.2"
     }

package/src/tailwind.css

@@ -1256,7 +1256,7 @@ select {
 .pzh-button:disabled {
   cursor: not-allowed;
   --tw-bg-opacity: 1;
-  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
+  background-color: rgb(230 230 230 / var(--tw-bg-opacity));
   color: rgb(22 17 59 / var(--tw-text-opacity));
   --tw-text-opacity: 0.35;
 }
@@ -1270,9 +1270,9 @@ select {
   border-radius: 0.25rem;
   border-width: 1px;
   --tw-border-opacity: 1;
-  border-color: rgb(138 136 157 / var(--tw-border-opacity));
-  padding-top: 10px;
+  border-color: rgb(92 92 92 / var(--tw-border-opacity));
   padding-bottom: 6px;
+  padding-top: 10px;
   line-height: 30px;
   --tw-text-opacity: 1;
   color: rgb(22 17 59 / var(--tw-text-opacity));
@@ -1280,12 +1280,12 @@ select {
 
 .pzh-form-input::-moz-placeholder {
   --tw-placeholder-opacity: 1;
-  color: rgb(138 136 157 / var(--tw-placeholder-opacity));
+  color: rgb(92 92 92 / var(--tw-placeholder-opacity));
 }
 
 .pzh-form-input::placeholder {
   --tw-placeholder-opacity: 1;
-  color: rgb(138 136 157 / var(--tw-placeholder-opacity));
+  color: rgb(92 92 92 / var(--tw-placeholder-opacity));
 }
 
 .pzh-form-input:hover {
@@ -1308,7 +1308,7 @@ select {
 
 .pzh-form-input:disabled {
   --tw-bg-opacity: 1;
-  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
+  background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
 
 .pzh-form-error,
@@ -1329,17 +1329,17 @@ select {
   border-radius: 9999px;
   border-width: 1px;
   --tw-border-opacity: 1;
-  border-color: rgb(138 136 157 / var(--tw-border-opacity));
+  border-color: rgb(92 92 92 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
-  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
+  background-color: rgb(230 230 230 / var(--tw-bg-opacity));
   content: '';
 }
 
 .pzh-form-radio:checked + span:after,
     .pzh-form-radio:not(:checked) + span:after {
   position: absolute;
-  top: 0.25rem;
   left: 0.25rem;
+  top: 0.25rem;
   height: 14px;
   width: 14px;
   border-radius: 9999px;
@@ -1368,9 +1368,9 @@ select {
 .pzh-form-radio:disabled + span:before,
     .pzh-form-checkbox:disabled + span:before {
   --tw-border-opacity: 1;
-  border-color: rgb(235 235 235 / var(--tw-border-opacity));
+  border-color: rgb(230 230 230 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
-  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
+  background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
 
 .pzh-form-checkbox + span:before {
@@ -1382,9 +1382,9 @@ select {
   border-radius: 4px;
   border-width: 1px;
   --tw-border-opacity: 1;
-  border-color: rgb(138 136 157 / var(--tw-border-opacity));
+  border-color: rgb(92 92 92 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
-  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
+  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;
@@ -1401,8 +1401,8 @@ select {
 .pzh-form-checkbox:checked + span:after,
     .pzh-form-checkbox:not(:checked) + span:after {
   position: absolute;
-  top: 2px;
   left: 0.25rem;
+  top: 2px;
   height: 14px;
   width: 14px;
   --tw-text-opacity: 1;
@@ -1441,7 +1441,8 @@ 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;
@@ -1482,7 +1483,9 @@ select {
 }
 
 .pzh-datepicker
-        .react-datepicker__day--outside-month:not(.react-datepicker__day--selected) {
+        .react-datepicker__day--outside-month:not(
+            .react-datepicker__day--selected
+        ) {
   color: rgb(22 17 59 / var(--tw-text-opacity));
   --tw-text-opacity: 0.35;
 }
@@ -1507,8 +1510,12 @@ select {
   border-radius: 9999px;
 }
 
-.pzh-datepicker .react-datepicker__day--today:not(.react-datepicker__day--selected),
-    .pzh-datepicker .react-datepicker__day--today:hover:not(.react-datepicker__day--selected),
+.pzh-datepicker
+        .react-datepicker__day--today:not(.react-datepicker__day--selected),
+    .pzh-datepicker
+        .react-datepicker__day--today:hover:not(
+            .react-datepicker__day--selected
+        ),
     .pzh-datepicker .react-datepicker__day--keyboard-selected {
   background-color: rgb(22 17 59 / var(--tw-bg-opacity));
   --tw-bg-opacity: 0.1;
@@ -1535,8 +1542,8 @@ select {
   height: 7px;
   width: 7px;
   border-width: 0px;
-  border-top-width: 1px;
   border-right-width: 1px;
+  border-top-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
@@ -1549,6 +1556,25 @@ select {
   box-shadow: none !important;
 }
 
+.pzh-modal {
+  &[data-entering] {
+    animation: fade 150ms;
+  }
+  &[data-exiting] {
+    animation: fade 150ms reverse ease-in;
+  }
+}
+
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1614,6 +1640,10 @@ select {
   right: 0.75rem;
 }
 
+.right-8 {
+  right: 2rem;
+}
+
 .right-\[14px\] {
   right: 14px;
 }
@@ -1630,6 +1660,10 @@ select {
   top: 192px;
 }
 
+.top-\[24px\] {
+  top: 24px;
+}
+
 .top-\[288px\] {
   top: 288px;
 }
@@ -1642,6 +1676,18 @@ select {
   z-index: 50;
 }
 
+.z-\[100\] {
+  z-index: 100;
+}
+
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
+.col-span-4 {
+  grid-column: span 4 / span 4;
+}
+
 .col-span-6 {
   grid-column: span 6 / span 6;
 }
@@ -1713,10 +1759,18 @@ select {
   margin-bottom: 0px;
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
 
+.mb-\[1000px\] {
+  margin-bottom: 1000px;
+}
+
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -1857,6 +1911,10 @@ select {
   height: 100vh;
 }
 
+.max-h-\[85vh\] {
+  max-height: 85vh;
+}
+
 .min-h-\[48px\] {
   min-height: 48px;
 }
@@ -1915,6 +1973,10 @@ select {
   max-width: 72rem;
 }
 
+.max-w-\[1200px\] {
+  max-width: 1200px;
+}
+
 .max-w-\[2rem\] {
   max-width: 2rem;
 }
@@ -1927,6 +1989,18 @@ select {
   max-width: 400px;
 }
 
+.max-w-\[600px\] {
+  max-width: 600px;
+}
+
+.max-w-\[812px\] {
+  max-width: 812px;
+}
+
+.max-w-\[980px\] {
+  max-width: 980px;
+}
+
 .max-w-full {
   max-width: 100%;
 }
@@ -2017,6 +2091,14 @@ select {
   gap: 0.5rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -2043,6 +2125,10 @@ select {
   white-space: nowrap;
 }
 
+.whitespace-pre-line {
+  white-space: pre-line;
+}
+
 .break-words {
   overflow-wrap: break-word;
 }
@@ -2116,14 +2202,19 @@ select {
   border-color: rgb(92 92 92 / var(--tw-border-opacity));
 }
 
+.border-pzh-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(213 213 213 / var(--tw-border-opacity));
+}
+
 .border-pzh-gray-400 {
   --tw-border-opacity: 1;
-  border-color: rgb(173 172 186 / var(--tw-border-opacity));
+  border-color: rgb(191 191 191 / var(--tw-border-opacity));
 }
 
 .border-pzh-gray-600 {
   --tw-border-opacity: 1;
-  border-color: rgb(138 136 157 / var(--tw-border-opacity));
+  border-color: rgb(92 92 92 / var(--tw-border-opacity));
 }
 
 .border-pzh-green {
@@ -2175,6 +2266,10 @@ select {
   background-color: rgb(51 51 51 / var(--tw-bg-opacity));
 }
 
+.bg-black\/30 {
+  background-color: rgb(0 0 0 / 0.3);
+}
+
 .bg-pzh-blue {
   --tw-bg-opacity: 1;
   background-color: rgb(40 31 107 / var(--tw-bg-opacity));
@@ -2192,17 +2287,17 @@ select {
 
 .bg-pzh-gray-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+  background-color: rgb(248 248 248 / var(--tw-bg-opacity));
 }
 
 .bg-pzh-gray-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
+  background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
 
 .bg-pzh-gray-300 {
   --tw-bg-opacity: 1;
-  background-color: rgb(232 231 235 / var(--tw-bg-opacity));
+  background-color: rgb(213 213 213 / var(--tw-bg-opacity));
 }
 
 .bg-pzh-green {
@@ -2519,12 +2614,12 @@ select {
 
 .text-pzh-gray-400 {
   --tw-text-opacity: 1;
-  color: rgb(173 172 186 / var(--tw-text-opacity));
+  color: rgb(191 191 191 / var(--tw-text-opacity));
 }
 
 .text-pzh-gray-600 {
   --tw-text-opacity: 1;
-  color: rgb(138 136 157 / var(--tw-text-opacity));
+  color: rgb(92 92 92 / var(--tw-text-opacity));
 }
 
 .text-pzh-green {
@@ -2596,6 +2691,12 @@ select {
   opacity: 0.5;
 }
 
+.shadow-\[0_1\.1970183849334717px_3\.9900612831115723px_0_rgba\(0\2c 0\2c 0\2c 0\.0283\)\2c 0_4\.020535469055176px_13\.401785850524902px_0_rgba\(0\2c 0\2c 0\2c 0\.0417\)\2c 0_18px_60px_0_rgba\(0\2c 0\2c 0\2c 0\.07\)\] {
+  --tw-shadow: 0 1.1970183849334717px 3.9900612831115723px 0 rgba(0,0,0,0.0283),0 4.020535469055176px 13.401785850524902px 0 rgba(0,0,0,0.0417),0 18px 60px 0 rgba(0,0,0,0.07);
+  --tw-shadow-colored: 0 1.1970183849334717px 3.9900612831115723px 0 var(--tw-shadow-color), 0 4.020535469055176px 13.401785850524902px 0 var(--tw-shadow-color), 0 18px 60px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-card {
   --tw-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);
   --tw-shadow-colored: 0px 18px 60px var(--tw-shadow-color), 0px 4.02054px 13.4018px var(--tw-shadow-color), 0px 1.19702px 3.99006px var(--tw-shadow-color);
@@ -2804,6 +2905,11 @@ b {
   border-color: rgb(22 17 59 / var(--tw-border-opacity));
 }
 
+.hover\:border-pzh-green-dark:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 77 46 / var(--tw-border-opacity));
+}
+
 .hover\:bg-pzh-blue-dark:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(22 17 59 / var(--tw-bg-opacity));
@@ -2811,12 +2917,7 @@ b {
 
 .hover\:bg-pzh-gray-100:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-pzh-green:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 128 77 / var(--tw-bg-opacity));
+  background-color: rgb(248 248 248 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-pzh-green-dark:hover {
@@ -2869,7 +2970,7 @@ b {
 
 .focus\:bg-pzh-gray-100:focus {
   --tw-bg-opacity: 1;
-  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+  background-color: rgb(248 248 248 / var(--tw-bg-opacity));
 }
 
 .focus\:text-white:focus {

package/src/tailwind.src.css

@@ -64,11 +64,11 @@ b {
     */
 
     .pzh-button {
-        @apply inline-block transition duration-200 ease-in rounded focus:outline-none focus:ring focus:ring-pzh-blue-dark ring-offset-2 leading-none disabled:bg-pzh-gray-200 disabled:text-pzh-blue-dark disabled:text-opacity-35 disabled:cursor-not-allowed;
+        @apply focus:ring-pzh-blue-dark disabled:bg-pzh-gray-200 disabled:text-pzh-blue-dark disabled:text-opacity-35 inline-block rounded leading-none ring-offset-2 transition duration-200 ease-in focus:outline-none focus:ring disabled:cursor-not-allowed;
     }
 
     .pzh-form-input {
-        @apply block w-full pt-[10px] pb-[6px] leading-[30px] placeholder-pzh-gray-600 text-pzh-blue-dark border border-pzh-gray-600 rounded appearance-none focus:outline-none hover:border-pzh-blue focus:ring focus:ring-2 focus:ring-pzh-blue focus:outline-none focus:border-pzh-blue disabled:bg-pzh-gray-200;
+        @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;
     }
 
     .pzh-form-error,
@@ -80,12 +80,12 @@ b {
 
     .pzh-form-radio:checked + span:before,
     .pzh-form-radio:not(:checked) + span:before {
-        @apply absolute left-0 top-0 w-[24px] h-[24px] border-pzh-gray-600 border bg-pzh-gray-200 rounded-full;
+        @apply border-pzh-gray-600 bg-pzh-gray-200 absolute left-0 top-0 h-[24px] w-[24px] rounded-full border;
         content: '';
     }
     .pzh-form-radio:checked + span:after,
     .pzh-form-radio:not(:checked) + span:after {
-        @apply absolute top-1 left-1 w-[14px] h-[14px] rounded-full bg-pzh-green transition duration-200;
+        @apply bg-pzh-green absolute left-1 top-1 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 absolute left-0 top-0 w-[24px] h-[24px] border-pzh-gray-600 border bg-pzh-gray-200 rounded-[4px] transition duration-200;
+        @apply border-pzh-gray-600 bg-pzh-gray-200 absolute left-0 top-0 h-[24px] w-[24px] rounded-[4px] 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 top-[2px] left-1 w-[14px] h-[14px] text-white transition duration-200;
+        @apply absolute left-1 top-[2px] 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>");
     }
 
@@ -124,11 +124,11 @@ b {
 
     .pzh-form-radio:focus + span:before,
     .pzh-form-checkbox:focus + span:before {
-        @apply ring ring-2 ring-pzh-blue outline-none border-pzh-blue;
+        @apply ring-pzh-blue border-pzh-blue outline-none ring ring-2;
     }
 
     .form-field-label {
-        @apply block mb-2 text-xs tracking-wide text-gray-700 uppercase;
+        @apply mb-2 block text-xs uppercase tracking-wide text-gray-700;
     }
 
     .form-field-description {
@@ -143,7 +143,8 @@ 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;
@@ -154,11 +155,11 @@ b {
     }
 
     .pzh-datepicker .react-datepicker__header {
-        @apply bg-white border-none;
+        @apply border-none bg-white;
     }
 
     .pzh-datepicker .react-datepicker__month {
-        @apply mt-0 mx-0.5;
+        @apply mx-0.5 mt-0;
     }
 
     .pzh-datepicker .react-datepicker__day-names {
@@ -166,7 +167,7 @@ b {
     }
 
     .pzh-datepicker .react-datepicker__day-name {
-        @apply bold leading-[26px] my-0;
+        @apply bold my-0 leading-[26px];
     }
 
     .pzh-datepicker .react-datepicker__current-month {
@@ -174,24 +175,30 @@ b {
     }
 
     .pzh-datepicker
-        .react-datepicker__day--outside-month:not(.react-datepicker__day--selected) {
+        .react-datepicker__day--outside-month:not(
+            .react-datepicker__day--selected
+        ) {
         @apply text-pzh-blue-dark text-opacity-35;
     }
 
     .pzh-datepicker .react-datepicker__day-name,
     .pzh-datepicker .react-datepicker__day,
     .pzh-datepicker .react-datepicker__time-name {
-        @apply w-[26px] h-[26px] leading-[28px] mx-2 my-1;
+        @apply mx-2 my-1 h-[26px] w-[26px] leading-[28px];
     }
 
     .pzh-datepicker .react-datepicker__day {
         @apply rounded-full hover:rounded-full;
     }
 
-    .pzh-datepicker .react-datepicker__day--today:not(.react-datepicker__day--selected),
-    .pzh-datepicker .react-datepicker__day--today:hover:not(.react-datepicker__day--selected),
+    .pzh-datepicker
+        .react-datepicker__day--today:not(.react-datepicker__day--selected),
+    .pzh-datepicker
+        .react-datepicker__day--today:hover:not(
+            .react-datepicker__day--selected
+        ),
     .pzh-datepicker .react-datepicker__day--keyboard-selected {
-        @apply bg-pzh-blue-dark bg-opacity-10 text-pzh-blue-dark;
+        @apply bg-pzh-blue-dark text-pzh-blue-dark bg-opacity-10;
     }
 
     .pzh-datepicker .react-datepicker__day--keyboard-selected:hover {
@@ -207,7 +214,7 @@ b {
     .pzh-datepicker .react-datepicker__month-read-view--down-arrow,
     .pzh-datepicker .react-datepicker__month-year-read-view--down-arrow,
     .pzh-datepicker .react-datepicker__navigation-icon::before {
-        @apply w-[7px] h-[7px] border border-black border-0 border-t-[1px] border-r-[1px];
+        @apply h-[7px] w-[7px] border border-0 border-r-[1px] border-t-[1px] border-black;
     }
 
     .pzh-datepicker .react-datepicker__navigation-icon {
@@ -225,4 +232,24 @@ b {
         pointer-events: none;
         height: 0;
     }
+
+    .pzh-modal {
+        &[data-entering] {
+            animation: fade 150ms;
+        }
+
+        &[data-exiting] {
+            animation: fade 150ms reverse ease-in;
+        }
+    }
+
+    @keyframes fade {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
 }