@pzh-ui/css 0.0.55 → 0.0.57

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.55",
+    "version": "0.0.57",
     "description": "Contains default styling for projects whitin Provincie Zuid-Holland.",
     "license": "ISC",
     "publishConfig": {
@@ -20,7 +20,7 @@
         "@tailwindcss/typography": "^0.5.9",
         "react-datepicker": "^4.7.0"
     },
-    "gitHead": "028147ecc533985d8fd8b0b5e72f9186a661ef7e",
+    "gitHead": "cd6469245644bb6d3026d6168d61fd9073782fc2",
     "devDependencies": {
         "tailwindcss": "^3.0.23"
     }

package/src/tailwind.css

@@ -1679,6 +1679,11 @@ select {
   border-color: rgb(80 61 144 / var(--tw-border-opacity));
 }
 
+.border-pzh-gray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(138 136 157 / var(--tw-border-opacity));
+}
+
 .border-pzh-blue-dark {
   --tw-border-opacity: 1;
   border-color: rgb(22 17 59 / var(--tw-border-opacity));
@@ -1689,23 +1694,10 @@ select {
   border-color: rgb(173 172 186 / var(--tw-border-opacity));
 }
 
-.border-pzh-gray-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(138 136 157 / var(--tw-border-opacity));
-}
-
 .border-opacity-35 {
   --tw-border-opacity: 0.35;
 }
 
-.border-opacity-10 {
-  --tw-border-opacity: 0.1;
-}
-
-.border-opacity-100 {
-  --tw-border-opacity: 1;
-}
-
 .bg-pzh-blue {
   --tw-bg-opacity: 1;
   background-color: rgb(40 31 107 / var(--tw-bg-opacity));
@@ -1731,9 +1723,9 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-pzh-cool-gray-light {
+.bg-pzh-gray-300 {
   --tw-bg-opacity: 1;
-  background-color: rgb(191 191 191 / var(--tw-bg-opacity));
+  background-color: rgb(232 231 235 / var(--tw-bg-opacity));
 }
 
 .bg-pzh-cool-gray-dark {
@@ -2033,18 +2025,15 @@ select {
   color: rgb(40 31 107 / var(--tw-text-opacity));
 }
 
-.text-opacity-35 {
-  --tw-text-opacity: 0.35;
+.text-pzh-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(138 136 157 / var(--tw-text-opacity));
 }
 
 .text-opacity-50 {
   --tw-text-opacity: 0.5;
 }
 
-.text-opacity-55 {
-  --tw-text-opacity: 0.55;
-}
-
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -2218,8 +2207,6 @@ b {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-  font-family: 'Karbon Medium', sans-serif;
-  font-weight: 700;
 }
 
 .pzh-button:focus {
@@ -2246,8 +2233,8 @@ b {
           appearance: none;
   border-radius: 0.25rem;
   border-width: 1px;
-  border-color: rgb(22 17 59 / var(--tw-border-opacity));
-  --tw-border-opacity: 0.35;
+  --tw-border-opacity: 1;
+  border-color: rgb(138 136 157 / var(--tw-border-opacity));
   padding-top: 10px;
   padding-bottom: 6px;
   line-height: 30px;
@@ -2256,23 +2243,23 @@ b {
 }
 
 .pzh-form-input::-moz-placeholder {
-  color: rgb(22 17 59 / var(--tw-placeholder-opacity));
-  --tw-placeholder-opacity: 0.55;
+  --tw-placeholder-opacity: 1;
+  color: rgb(138 136 157 / var(--tw-placeholder-opacity));
 }
 
 .pzh-form-input:-ms-input-placeholder {
-  color: rgb(22 17 59 / var(--tw-placeholder-opacity));
-  --tw-placeholder-opacity: 0.55;
+  --tw-placeholder-opacity: 1;
+  color: rgb(138 136 157 / var(--tw-placeholder-opacity));
 }
 
 .pzh-form-input::placeholder {
-  color: rgb(22 17 59 / var(--tw-placeholder-opacity));
-  --tw-placeholder-opacity: 0.55;
+  --tw-placeholder-opacity: 1;
+  color: rgb(138 136 157 / var(--tw-placeholder-opacity));
 }
 
 .pzh-form-input:hover {
   --tw-border-opacity: 1;
-  border-color: rgb(160 174 192 / var(--tw-border-opacity));
+  border-color: rgb(22 17 59 / var(--tw-border-opacity));
 }
 
 .pzh-form-input:focus {
@@ -2283,11 +2270,8 @@ b {
 }
 
 .pzh-form-input:disabled {
-  border-color: rgb(22 17 59 / var(--tw-border-opacity));
-  --tw-border-opacity: 0.1;
   --tw-bg-opacity: 1;
   background-color: rgb(235 235 235 / var(--tw-bg-opacity));
-  --tw-text-opacity: 0.55;
 }
 
 .pzh-form-error, .pzh-form-checkbox.pzh-form-error + span:before, .pzh-form-radio:checked.pzh-form-error + span:before, .pzh-form-radio:not(:checked).pzh-form-error + span:before {
@@ -2303,10 +2287,10 @@ b {
   width: 24px;
   border-radius: 9999px;
   border-width: 1px;
-  border-color: rgb(22 17 59 / var(--tw-border-opacity));
-  --tw-border-opacity: 0.35;
+  --tw-border-opacity: 1;
+  border-color: rgb(138 136 157 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
-  background-color: rgb(244 244 247 / var(--tw-bg-opacity));
+  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
   content: '';
 }
 
@@ -2354,10 +2338,10 @@ b {
   width: 24px;
   border-radius: 4px;
   border-width: 1px;
-  border-color: rgb(22 17 59 / var(--tw-border-opacity));
-  --tw-border-opacity: 0.35;
+  --tw-border-opacity: 1;
+  border-color: rgb(138 136 157 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
-  background-color: rgb(244 244 247 / var(--tw-bg-opacity));
+  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -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-text-decoration-color, -webkit-backdrop-filter;
@@ -2638,17 +2622,14 @@ b {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.hover\:border-pzh-blue-dark:hover {
+.hover\:border-pzh-blue:hover {
   --tw-border-opacity: 1;
-  border-color: rgb(22 17 59 / var(--tw-border-opacity));
+  border-color: rgb(40 31 107 / var(--tw-border-opacity));
 }
 
-.hover\:border-opacity-100:hover {
+.hover\:border-pzh-blue-dark:hover {
   --tw-border-opacity: 1;
-}
-
-.hover\:border-opacity-35:hover {
-  --tw-border-opacity: 0.35;
+  border-color: rgb(22 17 59 / var(--tw-border-opacity));
 }
 
 .hover\:bg-white:hover {

package/src/tailwind.src.css

@@ -58,11 +58,11 @@ b {
  */
 
 .pzh-button {
-    @apply inline-block transition duration-200 ease-in rounded focus:outline-none focus:ring font-bold leading-none disabled:bg-pzh-gray-200 disabled:text-pzh-blue-dark disabled:text-opacity-35 disabled:cursor-not-allowed;
+    @apply inline-block transition duration-200 ease-in rounded focus:outline-none focus:ring leading-none disabled:bg-pzh-gray-200 disabled:text-pzh-blue-dark disabled:text-opacity-35 disabled:cursor-not-allowed;
 }
 
 .pzh-form-input {
-    @apply block w-full pt-[10px] pb-[6px] leading-[30px] placeholder-pzh-blue-dark placeholder-opacity-55 text-pzh-blue-dark border border-pzh-blue-dark border-opacity-35 rounded appearance-none focus:outline-none hover:border-gray-500 focus:border-pzh-blue-light disabled:border-pzh-blue-dark disabled:border-opacity-10 disabled:bg-pzh-gray-200 disabled:text-opacity-55;
+    @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-dark focus:border-pzh-blue-light disabled:bg-pzh-gray-200;
 }
 
 .pzh-form-error,
@@ -74,7 +74,7 @@ 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-blue-dark border border-opacity-35 bg-pzh-form rounded-full;
+    @apply absolute left-0 top-0 w-[24px] h-[24px] border-pzh-gray-600 border bg-pzh-gray-200 rounded-full;
     content: '';
 }
 .pzh-form-radio:checked + span:after,
@@ -98,7 +98,7 @@ b {
 }
 
 .pzh-form-checkbox + span:before {
-    @apply absolute left-0 top-0 w-[24px] h-[24px] border-pzh-blue-dark border border-opacity-35 bg-pzh-form rounded-[4px] transition duration-200;
+    @apply absolute left-0 top-0 w-[24px] h-[24px] border-pzh-gray-600 border bg-pzh-gray-200 rounded-[4px] transition duration-200;
     content: '';
 }