@pzh-ui/css 0.0.69 → 0.0.71

package/config/index.js

@@ -25,132 +25,14 @@ module.exports = {
             '2xl': '1440px',
         },
         fontSize: {
-            xs: '0.75rem',
-            sm: '0.875rem',
-            base: '1rem',
-            lg: '1.125rem',
-            xl: '1.25rem',
-            '2xl': '1.5rem',
-            '3xl': '1.875rem',
-            '4xl': '2.25rem',
-            '5xl': '3rem',
-            '6xl': '4rem',
+            s: ['1rem', '1.5rem'],
+            m: ['1.25rem', '1.875rem'],
+            l: ['1.5rem', '1.875rem'],
         },
         colors: {
             black: '#000000',
             white: '#FFF',
             'pzh-form': '#F4F4F7',
-            gray: {
-                50: '#f9fafb',
-                100: '#f7fafc',
-                200: '#edf2f7',
-                300: '#e2e8f0',
-                400: '#cbd5e0',
-                500: '#a0aec0',
-                600: '#718096',
-                700: '#4a5568',
-                800: '#2d3748',
-                900: '#1a202c',
-            },
-            red: {
-                100: '#fff5f5',
-                200: '#fed7d7',
-                300: '#feb2b2',
-                400: '#fc8181',
-                500: '#f56565',
-                600: '#e53e3e',
-                700: '#c53030',
-                800: '#9b2c2c',
-                900: '#742a2a',
-            },
-            orange: {
-                100: '#fffaf0',
-                200: '#feebc8',
-                300: '#fbd38d',
-                400: '#f6ad55',
-                500: '#ed8936',
-                600: '#dd6b20',
-                700: '#c05621',
-                800: '#9c4221',
-                900: '#7b341e',
-            },
-            yellow: {
-                100: '#fffff0',
-                200: '#fefcbf',
-                300: '#faf089',
-                400: '#f6e05e',
-                500: '#ecc94b',
-                600: '#d69e2e',
-                700: '#b7791f',
-                800: '#975a16',
-                900: '#744210',
-            },
-            green: {
-                100: '#f0fff4',
-                200: '#c6f6d5',
-                300: '#9ae6b4',
-                400: '#68d391',
-                500: '#48bb78',
-                600: '#38a169',
-                700: '#2f855a',
-                800: '#276749',
-                900: '#22543d',
-            },
-            teal: {
-                100: '#e6fffa',
-                200: '#b2f5ea',
-                300: '#81e6d9',
-                400: '#4fd1c5',
-                500: '#38b2ac',
-                600: '#319795',
-                700: '#2c7a7b',
-                800: '#285e61',
-                900: '#234e52',
-            },
-            blue: {
-                100: '#ebf8ff',
-                200: '#bee3f8',
-                300: '#90cdf4',
-                400: '#63b3ed',
-                500: '#4299e1',
-                600: '#3182ce',
-                700: '#2b6cb0',
-                800: '#2c5282',
-                900: '#2a4365',
-            },
-            indigo: {
-                100: '#ebf4ff',
-                200: '#c3dafe',
-                300: '#a3bffa',
-                400: '#7f9cf5',
-                500: '#667eea',
-                600: '#5a67d8',
-                700: '#4c51bf',
-                800: '#434190',
-                900: '#3c366b',
-            },
-            purple: {
-                100: '#faf5ff',
-                200: '#e9d8fd',
-                300: '#d6bcfa',
-                400: '#b794f4',
-                500: '#9f7aea',
-                600: '#805ad5',
-                700: '#6b46c1',
-                800: '#553c9a',
-                900: '#44337a',
-            },
-            pink: {
-                100: '#fff5f7',
-                200: '#fed7e2',
-                300: '#fbb6ce',
-                400: '#f687b3',
-                500: '#ed64a6',
-                600: '#d53f8c',
-                700: '#b83280',
-                800: '#97266d',
-                900: '#702459',
-            },
             /** Add custom PZH colors */
             'pzh-red': {
                 DEFAULT: '#d11f3d',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.69",
+    "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": "3611625402d193356709504d5731e88ddc619b02",
+    "gitHead": "a335068588e469ce0060f006d887215bd9af43a7",
     "devDependencies": {
         "tailwindcss": "^3.3.2"
     }

package/src/tailwind.css

@@ -16,7 +16,7 @@
   /* 2 */
   border-style: solid;
   /* 2 */
-  border-color: #edf2f7;
+  border-color: currentColor;
   /* 2 */
 }
 
@@ -357,7 +357,7 @@ textarea {
 input::-moz-placeholder, textarea::-moz-placeholder {
   opacity: 1;
   /* 1 */
-  color: #cbd5e0;
+  color: #9ca3af;
   /* 2 */
 }
 
@@ -365,7 +365,7 @@ input::placeholder,
 textarea::placeholder {
   opacity: 1;
   /* 1 */
-  color: #cbd5e0;
+  color: #9ca3af;
   /* 2 */
 }
 
@@ -427,7 +427,7 @@ video {
      -moz-appearance: none;
           appearance: none;
   background-color: #fff;
-  border-color: #a0aec0;
+  border-color: #6b7280;
   border-width: 1px;
   border-radius: 0px;
   padding-top: 0.5rem;
@@ -445,20 +445,20 @@ video {
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: #3182ce;
+  --tw-ring-color: #2563eb;
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  border-color: #3182ce;
+  border-color: #2563eb;
 }
 
 input::-moz-placeholder, textarea::-moz-placeholder {
-  color: #a0aec0;
+  color: #6b7280;
   opacity: 1;
 }
 
 input::placeholder,textarea::placeholder {
-  color: #a0aec0;
+  color: #6b7280;
   opacity: 1;
 }
 
@@ -476,7 +476,7 @@ input::placeholder,textarea::placeholder {
 }
 
 select {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a0aec0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
   background-position: right 0.5rem center;
   background-repeat: no-repeat;
   background-size: 1.5em 1.5em;
@@ -511,9 +511,9 @@ select {
   flex-shrink: 0;
   height: 1rem;
   width: 1rem;
-  color: #3182ce;
+  color: #2563eb;
   background-color: #fff;
-  border-color: #a0aec0;
+  border-color: #6b7280;
   border-width: 1px;
   --tw-shadow: 0 0 #0000;
 }
@@ -532,7 +532,7 @@ select {
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
   --tw-ring-offset-width: 2px;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: #3182ce;
+  --tw-ring-color: #2563eb;
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --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);
@@ -612,7 +612,7 @@ select {
   --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(66 153 225 / 0.5);
+  --tw-ring-color: rgb(59 130 246 / 0.5);
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
@@ -662,7 +662,7 @@ select {
   --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(66 153 225 / 0.5);
+  --tw-ring-color: rgb(59 130 246 / 0.5);
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
@@ -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;
 }
@@ -2121,6 +2102,11 @@ select {
   white-space: nowrap;
 }
 
+.hyphens-manual {
+  -webkit-hyphens: manual;
+          hyphens: manual;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -2137,14 +2123,6 @@ select {
   border-radius: 0.25rem;
 }
 
-.rounded-\[40px\] {
-  border-radius: 40px;
-}
-
-.rounded-\[4px\] {
-  border-radius: 4px;
-}
-
 .rounded-full {
   border-radius: 9999px;
 }
@@ -2157,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;
@@ -2197,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));
@@ -2257,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));
@@ -2369,6 +2342,10 @@ select {
   padding: 1rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .p-6 {
   padding: 1.5rem;
 }
@@ -2408,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;
@@ -2444,10 +2416,6 @@ select {
   padding-bottom: 1rem;
 }
 
-.pb-\[12px\] {
-  padding-bottom: 12px;
-}
-
 .pb-\[9px\] {
   padding-bottom: 9px;
 }
@@ -2516,28 +2484,47 @@ select {
   vertical-align: bottom;
 }
 
-.text-\[0\.8rem\] {
-  font-size: 0.8rem;
+.text-\[1\.125rem\] {
+  font-size: 1.125rem;
 }
 
-.text-\[16px\] {
-  font-size: 16px;
+.text-\[1\.25rem\] {
+  font-size: 1.25rem;
 }
 
-.text-\[18px\] {
-  font-size: 18px;
+.text-\[1\.5rem\] {
+  font-size: 1.5rem;
 }
 
-.text-base {
-  font-size: 1rem;
+.text-\[2\.5rem\] {
+  font-size: 2.5rem;
+}
+
+.text-\[2rem\] {
+  font-size: 2rem;
+}
+
+.text-\[3rem\] {
+  font-size: 3rem;
+}
+
+.text-\[4rem\] {
+  font-size: 4rem;
 }
 
-.text-sm {
-  font-size: 0.875rem;
+.text-l {
+  font-size: 1.5rem;
+  line-height: 1.875rem;
 }
 
-.text-xs {
-  font-size: 0.75rem;
+.text-m {
+  font-size: 1.25rem;
+  line-height: 1.875rem;
+}
+
+.text-s {
+  font-size: 1rem;
+  line-height: 1.5rem;
 }
 
 .font-bold {
@@ -2564,12 +2551,16 @@ select {
   line-height: 1.25rem;
 }
 
-.leading-6 {
-  line-height: 1.5rem;
+.leading-7 {
+  line-height: 1.75rem;
 }
 
-.leading-\[28px\] {
-  line-height: 28px;
+.leading-\[110\%\] {
+  line-height: 110%;
+}
+
+.leading-\[125\%\] {
+  line-height: 125%;
 }
 
 .leading-\[30px\] {
@@ -2580,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));
@@ -3144,8 +3131,9 @@ b {
     gap: 2rem;
   }
 
-  .md\:text-base {
-    font-size: 1rem;
+  .md\:text-m {
+    font-size: 1.25rem;
+    line-height: 1.875rem;
   }
 }
 

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 {