@pzh-ui/css 0.0.35 → 0.0.40

package/config/index.js

@@ -1,7 +1,4 @@
 module.exports = {
-    corePlugins: {
-        fontWeight: false,
-    },
     content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
     variants: {
         pointerEvents: ['responsive', 'hover'],
@@ -196,8 +193,12 @@ module.exports = {
                 dark: '#32265a',
             },
             'pzh-gray': {
-                DEFAULT: '#EBEBEB',
-                light: '#F5F5F5',
+                "600": "#8A889D",
+                "500": "#A2A0B1",
+                "400": "#ADACBA",
+                "300": "#E8E7EB",
+                "200": '#EBEBEB',
+                "100": '#F5F5F5',
             },
             'pzh-cool-gray': {
                 DEFAULT: '#838383',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.35",
+    "version": "0.0.40",
     "description": "Contains default styling for projects whitin Provincie Zuid-Holland.",
     "license": "ISC",
     "publishConfig": {
@@ -19,7 +19,7 @@
         "@tailwindcss/line-clamp": "^0.3.1",
         "react-datepicker": "^4.7.0"
     },
-    "gitHead": "9776a99c5f9dd48d56c9fed1ce7fa52290ac39ac",
+    "gitHead": "c44871e1746547ff6a483a23f34a9578802ba9ae",
     "devDependencies": {
         "tailwindcss": "^3.0.23"
     }

package/src/tailwind.css

@@ -809,6 +809,10 @@ select{
   margin-left: 1rem;
 }
 
+.mr-4{
+  margin-right: 1rem;
+}
+
 .mt-1{
   margin-top: 0.25rem;
 }
@@ -821,8 +825,8 @@ select{
   margin-right: -2rem;
 }
 
-.ml-3{
-  margin-left: 0.75rem;
+.mt-\[3px\]{
+  margin-top: 3px;
 }
 
 .mb-2{
@@ -849,6 +853,10 @@ select{
   display: flex;
 }
 
+.inline-flex{
+  display: inline-flex;
+}
+
 .table{
   display: table;
 }
@@ -885,6 +893,10 @@ select{
   height: 1px;
 }
 
+.h-full{
+  height: 100%;
+}
+
 .h-4{
   height: 1rem;
 }
@@ -893,6 +905,10 @@ select{
   height: 2rem;
 }
 
+.h-\[8px\]{
+  height: 8px;
+}
+
 .min-h-screen{
   min-height: 100vh;
 }
@@ -917,6 +933,10 @@ select{
   width: 1rem;
 }
 
+.w-\[8px\]{
+  width: 8px;
+}
+
 .max-w-screen-xl{
   max-width: 1280px;
 }
@@ -944,6 +964,11 @@ select{
   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));
 }
 
+.rotate-45{
+  --tw-rotate: 45deg;
+  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));
+}
+
 .transform{
   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));
 }
@@ -992,6 +1017,10 @@ select{
   border-radius: 0.5rem;
 }
 
+.rounded-\[4px\]{
+  border-radius: 4px;
+}
+
 .rounded-md{
   border-radius: 0.375rem;
 }
@@ -1000,10 +1029,6 @@ select{
   border-radius: 9999px;
 }
 
-.rounded-\[4px\]{
-  border-radius: 4px;
-}
-
 .rounded-t-md{
   border-top-left-radius: 0.375rem;
   border-top-right-radius: 0.375rem;
@@ -1021,19 +1046,19 @@ select{
   border-style: dashed;
 }
 
-.border-pzh-badge-green{
+.border-pzh-green{
   --tw-border-opacity: 1;
-  border-color: rgb(80 166 88 / var(--tw-border-opacity));
+  border-color: rgb(0 128 77 / var(--tw-border-opacity));
 }
 
-.border-pzh-badge-orange{
+.border-pzh-yellow-dark{
   --tw-border-opacity: 1;
-  border-color: rgb(249 181 60 / var(--tw-border-opacity));
+  border-color: rgb(198 164 16 / var(--tw-border-opacity));
 }
 
-.border-pzh-badge-red{
+.border-pzh-red{
   --tw-border-opacity: 1;
-  border-color: rgb(203 59 54 / var(--tw-border-opacity));
+  border-color: rgb(209 31 61 / var(--tw-border-opacity));
 }
 
 .border-pzh-cool-gray{
@@ -1046,11 +1071,6 @@ select{
   border-color: rgb(22 17 59 / var(--tw-border-opacity));
 }
 
-.border-pzh-red{
-  --tw-border-opacity: 1;
-  border-color: rgb(209 31 61 / var(--tw-border-opacity));
-}
-
 .border-opacity-35{
   --tw-border-opacity: 0.35;
 }
@@ -1103,7 +1123,12 @@ select{
   background-color: rgb(123 173 222 / var(--tw-bg-opacity));
 }
 
-.bg-pzh-gray{
+.bg-black{
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.bg-pzh-gray-200{
   --tw-bg-opacity: 1;
   background-color: rgb(235 235 235 / var(--tw-bg-opacity));
 }
@@ -1116,6 +1141,10 @@ select{
   --tw-bg-opacity: 0.2;
 }
 
+.bg-opacity-80{
+  --tw-bg-opacity: 0.8;
+}
+
 .p-1{
   padding: 0.25rem;
 }
@@ -1163,6 +1192,11 @@ select{
   padding-right: 1.5rem;
 }
 
+.px-2{
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .py-6{
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
@@ -1277,6 +1311,14 @@ select{
   font-size: 0.8rem;
 }
 
+.font-bold{
+  font-weight: 700;
+}
+
+.font-normal{
+  font-weight: 400;
+}
+
 .uppercase{
   text-transform: uppercase;
 }
@@ -1293,14 +1335,14 @@ select{
   line-height: 1.5;
 }
 
-.leading-\[28px\]{
-  line-height: 28px;
-}
-
 .leading-5{
   line-height: 1.25rem;
 }
 
+.leading-\[28px\]{
+  line-height: 28px;
+}
+
 .leading-none{
   line-height: 1;
 }
@@ -1310,19 +1352,19 @@ select{
   color: rgb(22 17 59 / var(--tw-text-opacity));
 }
 
-.text-pzh-badge-green{
+.text-pzh-green{
   --tw-text-opacity: 1;
-  color: rgb(80 166 88 / var(--tw-text-opacity));
+  color: rgb(0 128 77 / var(--tw-text-opacity));
 }
 
-.text-pzh-badge-orange{
+.text-pzh-yellow-dark{
   --tw-text-opacity: 1;
-  color: rgb(249 181 60 / var(--tw-text-opacity));
+  color: rgb(198 164 16 / var(--tw-text-opacity));
 }
 
-.text-pzh-badge-red{
+.text-pzh-red{
   --tw-text-opacity: 1;
-  color: rgb(203 59 54 / var(--tw-text-opacity));
+  color: rgb(209 31 61 / var(--tw-text-opacity));
 }
 
 .text-pzh-cool-gray{
@@ -1340,16 +1382,6 @@ select{
   color: rgb(40 31 107 / var(--tw-text-opacity));
 }
 
-.text-pzh-red{
-  --tw-text-opacity: 1;
-  color: rgb(209 31 61 / var(--tw-text-opacity));
-}
-
-.text-pzh-green{
-  --tw-text-opacity: 1;
-  color: rgb(0 128 77 / var(--tw-text-opacity));
-}
-
 .text-opacity-35{
   --tw-text-opacity: 0.35;
 }
@@ -1923,7 +1955,7 @@ h6,
   background-color: rgb(0 77 46 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-pzh-gray-light:hover{
+.hover\:bg-pzh-gray-100:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity));
 }
@@ -1952,6 +1984,11 @@ h6,
           text-decoration-line: underline;
 }
 
+.focus\:bg-pzh-gray-100:focus{
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+}
+
 .focus\:bg-pzh-blue:focus{
   --tw-bg-opacity: 1;
   background-color: rgb(40 31 107 / var(--tw-bg-opacity));
@@ -1988,6 +2025,10 @@ h6,
   --tw-ring-offset-width: 2px;
 }
 
+.group:hover .group-hover\:opacity-100{
+  opacity: 1;
+}
+
 @media (min-width: 640px){
   .sm\:my-8{
     margin-top: 2rem;

package/src/tailwind.src.css

@@ -58,11 +58,11 @@ h6,
  */
 
 .pzh-button {
-    @apply inline-block transition duration-200 ease-in rounded focus:outline-none focus:ring font-bold leading-none disabled:bg-pzh-gray 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 font-bold 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 disabled:text-opacity-55;
+    @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;
 }
 
 .pzh-form-error,
@@ -94,7 +94,7 @@ h6,
 }
 .pzh-form-radio:disabled + span:before,
 .pzh-form-checkbox:disabled + span:before {
-    @apply border-pzh-gray bg-pzh-gray;
+    @apply border-pzh-gray-200 bg-pzh-gray-200;
 }
 
 .pzh-form-checkbox + span:before {