@pzh-ui/css 0.0.99 → 0.0.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzh-ui/css",
-  "version": "0.0.99",
+  "version": "0.0.100",
   "description": "Contains default styling for projects within Provincie Zuid-Holland.",
   "license": "ISC",
   "publishConfig": {
@@ -21,8 +21,8 @@
     "react-datepicker": "^4.7.0",
     "react-toastify": "^9.1.2"
   },
-  "gitHead": "97d46398ac20337f6d8a0925b03b46b92fd305d0",
+  "gitHead": "5dcde75eef9a890194f7c5e7e06591fea2628ffd",
   "devDependencies": {
-    "tailwindcss": "^3.3.2"
+    "tailwindcss": "^3.4.10"
   }
 }

package/src/tailwind.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -32,9 +32,11 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -44,12 +46,14 @@ html {
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
   font-variation-settings: normal;
   /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
 }
 
 /*
@@ -121,8 +125,10 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -131,8 +137,12 @@ samp,
 pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
-  font-size: 1em;
+  font-feature-settings: normal;
   /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
 }
 
 /*
@@ -191,12 +201,18 @@ select,
 textarea {
   font-family: inherit;
   /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
   font-size: 100%;
   /* 1 */
   font-weight: inherit;
   /* 1 */
   line-height: inherit;
   /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
   color: inherit;
   /* 1 */
   margin: 0;
@@ -220,9 +236,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -341,6 +357,14 @@ menu {
   padding: 0;
 }
 
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
 /*
 Prevent resizing textareas horizontally by default.
 */
@@ -635,6 +659,10 @@ select {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 ::backdrop {
@@ -685,6 +713,10 @@ select {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 .container {
@@ -1326,7 +1358,7 @@ select {
   .pzh-form-radio:not(:checked) + span:before {
   position: absolute;
   left: 0px;
-  top: 0.125rem;
+  top: 0.25rem;
   height: 1.25rem;
   width: 1.25rem;
   border-radius: 9999px;
@@ -1348,7 +1380,7 @@ select {
   .pzh-form-radio:not(:checked) + span:after {
   position: absolute;
   left: 0.375rem;
-  top: 0.5rem;
+  top: 0.625rem;
   height: 0.5rem;
   width: 0.5rem;
   border-radius: 9999px;
@@ -1392,7 +1424,7 @@ select {
 .pzh-form-checkbox + span:before {
   position: absolute;
   left: 0px;
-  top: 0.125rem;
+  top: 0.25rem;
   height: 1.25rem;
   width: 1.25rem;
   border-radius: 0.25rem;
@@ -1418,7 +1450,7 @@ select {
   .pzh-form-checkbox:not(:checked) + span:after {
   position: absolute;
   left: 0.25rem;
-  top: 1px;
+  top: 0.125rem;
   height: 0.75rem;
   width: 0.75rem;
   --tw-text-opacity: 1;
@@ -1763,10 +1795,6 @@ select {
   margin-bottom: -1px;
 }
 
-.-mt-0 {
-  margin-top: -0px;
-}
-
 .-mt-0\.5 {
   margin-top: -0.125rem;
 }
@@ -1815,10 +1843,6 @@ select {
   margin-right: 1rem;
 }
 
-.mr-8 {
-  margin-right: 2rem;
-}
-
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -2133,6 +2157,10 @@ select {
   gap: 1rem;
 }
 
+.gap-6 {
+  gap: 1.5rem;
+}
+
 .gap-8 {
   gap: 2rem;
 }
@@ -2225,10 +2253,6 @@ select {
   border-color: rgb(40 31 107 / 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));
@@ -2527,6 +2551,10 @@ select {
   padding-right: 0.5rem;
 }
 
+.pr-4 {
+  padding-right: 1rem;
+}
+
 .pr-8 {
   padding-right: 2rem;
 }
@@ -2708,6 +2736,11 @@ select {
   color: rgb(0 128 77 / var(--tw-text-opacity));
 }
 
+.text-pzh-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(0 128 77 / var(--tw-text-opacity));
+}
+
 .text-pzh-green-900 {
   --tw-text-opacity: 1;
   color: rgb(0 77 46 / var(--tw-text-opacity));
@@ -3085,6 +3118,11 @@ ol li ol li ol li {
   border-color: rgb(22 17 59 / var(--tw-border-opacity));
 }
 
+.hover\:border-pzh-green-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 128 77 / var(--tw-border-opacity));
+}
+
 .hover\:border-pzh-green-dark:hover {
   --tw-border-opacity: 1;
   border-color: rgb(0 77 46 / var(--tw-border-opacity));
@@ -3129,6 +3167,11 @@ ol li ol li ol li {
   color: rgb(0 128 77 / var(--tw-text-opacity));
 }
 
+.hover\:text-pzh-green-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(0 128 77 / var(--tw-text-opacity));
+}
+
 .hover\:text-pzh-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -3172,6 +3215,33 @@ ol li ol li ol li {
   opacity: 0.4;
 }
 
+.has-\[\:checked\]\:border-pzh-green-500:has(:checked) {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 128 77 / var(--tw-border-opacity));
+}
+
+.has-\[\:checked\]\:bg-pzh-green-10:has(:checked) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(237 250 240 / var(--tw-bg-opacity));
+}
+
+.has-\[\:focus\]\:ring:has(:focus) {
+  --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(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.has-\[\:focus\]\:ring-2:has(:focus) {
+  --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, 0 0 #0000);
+}
+
+.has-\[\:focus\]\:ring-pzh-focus:has(:focus) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(35 96 197 / var(--tw-ring-opacity));
+}
+
 @keyframes accordion-up {
   from {
     height: var(--radix-accordion-content-height);
@@ -3182,7 +3252,7 @@ ol li ol li ol li {
   }
 }
 
-.data-\[state\=closed\]\:animate-accordion-up[data-state=closed] {
+.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
   animation: accordion-up 0.2s ease-out;
 }
 
@@ -3196,7 +3266,7 @@ ol li ol li ol li {
   }
 }
 
-.data-\[state\=open\]\:animate-accordion-down[data-state=open] {
+.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
   animation: accordion-down 0.2s ease-out;
 }
 
@@ -3256,6 +3326,10 @@ ol li ol li ol li {
     grid-column: span 4 / span 4;
   }
 
+  .md\:gap-4 {
+    gap: 1rem;
+  }
+
   .md\:gap-8 {
     gap: 2rem;
   }

package/src/tailwind.src.css

@@ -96,7 +96,7 @@ ol li ol li ol li {
 
   .pzh-form-radio:checked + span:before,
   .pzh-form-radio:not(:checked) + span:before {
-    @apply border-pzh-gray-600 absolute left-0 top-0.5 h-5 w-5 rounded-full border;
+    @apply border-pzh-gray-600 absolute left-0 top-1 h-5 w-5 rounded-full border;
     content: "";
   }
   .pzh-form-radio:not(:checked):not(:disabled):hover + span:before,
@@ -105,7 +105,7 @@ ol li ol li ol li {
   }
   .pzh-form-radio:checked + span:after,
   .pzh-form-radio:not(:checked) + span:after {
-    @apply bg-pzh-white absolute left-1.5 top-2 h-2 w-2 rounded-full transition duration-200;
+    @apply bg-pzh-white absolute left-1.5 top-2.5 h-2 w-2 rounded-full transition duration-200;
     content: "";
   }
   .pzh-form-radio:checked + span:before {
@@ -127,7 +127,7 @@ ol li ol li ol li {
   }
 
   .pzh-form-checkbox + span:before {
-    @apply border-pzh-gray-600 absolute left-0 top-0.5 h-5 w-5 rounded border transition duration-200;
+    @apply border-pzh-gray-600 absolute left-0 top-1 h-5 w-5 rounded border transition duration-200;
     content: "";
   }
 
@@ -137,7 +137,7 @@ ol li ol li ol li {
 
   .pzh-form-checkbox:checked + span:after,
   .pzh-form-checkbox:not(:checked) + span:after {
-    @apply absolute left-1 top-px h-3 w-3 text-white transition duration-200;
+    @apply absolute left-1 top-0.5 h-3 w-3 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>");
   }