@pzh-ui/css 0.0.28 → 0.0.31

package/README.md

@@ -1,3 +1,21 @@
 # `css`
 
 This package contains default styling for projects whitin Provincie Zuid-Holland.
+
+We use the [Tailwind framework](https://tailwindcss.com/) to style the components. In order to apply the correct styles, install [@pzh-ui/css](https://www.npmjs.com/package/@pzh-ui/css) in your project.
+
+`npm install @pzh-ui/css`
+
+After installing the dependency, you can start using the styles as follows:
+
+```jsx
+// tailwind.config.js
+module.exports = {
+    presets: [require('@pzh-ui/css/config')],
+    content: [
+        './src/**/*.{js,jsx,ts,tsx}',
+        './node_modules/@pzh-ui/components/dist/**/*.{js,jsx,ts,tsx}',
+        './public/index.html',
+    ],
+}
+```

package/config/index.js

@@ -213,6 +213,9 @@ module.exports = {
                 red: '#CB3B36',
                 orange: '#F9B53C',
             },
+            'pzh-white': {
+                DEFAULT: '#FFFFFF',
+            },
         },
         extend: {
             opacity: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.28",
+    "version": "0.0.31",
     "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": "67fdc6ba4f0526fbec519af7679f5f388f98a08f",
+    "gitHead": "7ad20a4be9e43b9ff5af00763b51aef9fc002ddc",
     "devDependencies": {
         "tailwindcss": "^3.0.23"
     }

package/src/tailwind.css

@@ -723,6 +723,18 @@ select{
   right: 0px;
 }
 
+.top-0{
+  top: 0px;
+}
+
+.top-\[192px\]{
+  top: 192px;
+}
+
+.top-\[288px\]{
+  top: 288px;
+}
+
 .bottom-0{
   bottom: 0px;
 }
@@ -731,10 +743,6 @@ select{
   left: 0px;
 }
 
-.top-0{
-  top: 0px;
-}
-
 .-left-\[9999px\]{
   left: -9999px;
 }
@@ -764,6 +772,11 @@ select{
   margin-right: auto;
 }
 
+.my-2{
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .mr-2{
   margin-right: 0.5rem;
 }
@@ -792,8 +805,8 @@ select{
   margin-left: 1rem;
 }
 
-.mt-2{
-  margin-top: 0.5rem;
+.mt-1{
+  margin-top: 0.25rem;
 }
 
 .-mt-8{
@@ -812,6 +825,10 @@ select{
   margin-bottom: 0.5rem;
 }
 
+.mt-2{
+  margin-top: 0.5rem;
+}
+
 .ml-1{
   margin-left: 0.25rem;
 }
@@ -852,6 +869,14 @@ select{
   height: 36px;
 }
 
+.h-\[96px\]{
+  height: 96px;
+}
+
+.h-px{
+  height: 1px;
+}
+
 .h-4{
   height: 1rem;
 }
@@ -868,6 +893,10 @@ select{
   width: 1.5rem;
 }
 
+.w-\[96px\]{
+  width: 96px;
+}
+
 .w-full{
   width: 100%;
 }
@@ -993,6 +1022,11 @@ 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;
 }
@@ -1001,6 +1035,10 @@ select{
   --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));
@@ -1021,6 +1059,11 @@ select{
   background-color: rgb(0 128 77 / var(--tw-bg-opacity));
 }
 
+.bg-pzh-cool-gray-light{
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 191 191 / var(--tw-bg-opacity));
+}
+
 .bg-pzh-cool-gray-dark{
   --tw-bg-opacity: 1;
   background-color: rgb(92 92 92 / var(--tw-bg-opacity));
@@ -1218,6 +1261,10 @@ select{
   font-style: italic;
 }
 
+.leading-\[30px\]{
+  line-height: 30px;
+}
+
 .leading-normal{
   line-height: 1.5;
 }
@@ -1513,6 +1560,11 @@ h6,
   --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{
+  --tw-border-opacity: 1;
+  border-color: rgb(209 31 61 / var(--tw-border-opacity));
+}
+
 .pzh-form-radio:checked + span:before, .pzh-form-radio:not(:checked) + span:before{
   position: absolute;
   left: 0px;

package/src/tailwind.src.css

@@ -65,6 +65,13 @@ h6,
     @apply block w-full pt-[15px] pb-[11px] placeholder-pzh-blue-dark placeholder-opacity-55 text-pzh-blue-dark border border-pzh-blue-dark border-opacity-35 rounded appearance-none leading-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;
 }
 
+.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 {
+    @apply border-pzh-red;
+}
+
 .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;