@pzh-ui/css 0.0.67 → 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.67",
+    "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": "39b583329c63a8f7dc7cd5bb5b1ed144311cb817",
+    "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,7 +1270,7 @@ select {
   border-radius: 0.25rem;
   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));
   padding-bottom: 6px;
   padding-top: 10px;
   line-height: 30px;
@@ -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,9 +1329,9 @@ 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: '';
 }
 
@@ -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;
@@ -1652,10 +1652,6 @@ select {
   top: 0px;
 }
 
-.top-4 {
-  top: 1rem;
-}
-
 .top-\[14px\] {
   top: 14px;
 }
@@ -1664,6 +1660,10 @@ select {
   top: 192px;
 }
 
+.top-\[24px\] {
+  top: 24px;
+}
+
 .top-\[288px\] {
   top: 288px;
 }
@@ -1680,6 +1680,14 @@ select {
   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;
 }
@@ -1751,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;
 }
@@ -1895,6 +1911,10 @@ select {
   height: 100vh;
 }
 
+.max-h-\[85vh\] {
+  max-height: 85vh;
+}
+
 .min-h-\[48px\] {
   min-height: 48px;
 }
@@ -2071,6 +2091,14 @@ select {
   gap: 0.5rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -2097,6 +2125,10 @@ select {
   white-space: nowrap;
 }
 
+.whitespace-pre-line {
+  white-space: pre-line;
+}
+
 .break-words {
   overflow-wrap: break-word;
 }
@@ -2170,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 {
@@ -2250,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 {
@@ -2577,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 {
@@ -2880,7 +2917,7 @@ b {
 
 .hover\:bg-pzh-gray-100:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+  background-color: rgb(248 248 248 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-pzh-green-dark:hover {
@@ -2933,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 {