@pzh-ui/css 0.0.75 → 0.0.77

package/config/index.js

@@ -1,138 +1,195 @@
 module.exports = {
-    content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
-    variants: {
-        pointerEvents: ['responsive', 'hover'],
-        display: ['responsive', 'hover', 'group-hover'],
-        textDecoration: ['responsive', 'hover', 'focus', 'group-hover'],
-        roundedFull: ['responsive', 'focus'],
-        margin: ['responsive', 'group-hover'],
-        textColor: ['responsive', 'hover', 'focus', 'group-hover'],
-        borderWidth: ['hover'],
-        borderOpacity: ['hover'],
+  content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
+  variants: {
+    pointerEvents: ["responsive", "hover"],
+    display: ["responsive", "hover", "group-hover"],
+    textDecoration: ["responsive", "hover", "focus", "group-hover"],
+    roundedFull: ["responsive", "focus"],
+    margin: ["responsive", "group-hover"],
+    textColor: ["responsive", "hover", "focus", "group-hover"],
+    borderWidth: ["hover"],
+    borderOpacity: ["hover"],
+  },
+  plugins: [
+    require("@tailwindcss/line-clamp"),
+    require("@tailwindcss/forms"),
+    require("@tailwindcss/custom-forms"),
+    require("@tailwindcss/typography"),
+  ],
+  theme: {
+    screens: {
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px",
+      "2xl": "1440px",
     },
-    plugins: [
-        require('@tailwindcss/line-clamp'),
-        require('@tailwindcss/forms'),
-        require('@tailwindcss/custom-forms'),
-        require('@tailwindcss/typography'),
-    ],
-    theme: {
-        screens: {
-            sm: '640px',
-            md: '768px',
-            lg: '1024px',
-            xl: '1280px',
-            '2xl': '1440px',
+    fontSize: {
+      s: ["1rem", "1.5rem"],
+      m: ["1.25rem", "1.875rem"],
+      l: ["1.5rem", "1.875rem"],
+    },
+    colors: {
+      black: "#000000",
+      white: "#FFF",
+      "pzh-form": "#F4F4F7",
+      /** Add custom PZH colors */
+      pzh: {
+        red: {
+          10: "#FFEDF0",
+          100: "#EB7085",
+          500: "#D11F3D",
+          900: "#97162C",
         },
-        fontSize: {
-            s: ['1rem', '1.5rem'],
-            m: ['1.25rem', '1.875rem'],
-            l: ['1.5rem', '1.875rem'],
+        yellow: {
+          10: "#FFF9E3",
+          100: "#F1DB7E",
+          500: "#EFCC36",
+          900: "#C6A410",
         },
-        colors: {
-            black: '#000000',
-            white: '#FFF',
-            'pzh-form': '#F4F4F7',
-            /** Add custom PZH colors */
-            'pzh-red': {
-                DEFAULT: '#d11f3d',
-                light: '#eb7085',
-                dark: '#97162c',
-            },
-            'pzh-yellow': {
-                DEFAULT: '#efcc36',
-                light: '#f1db7e',
-                dark: '#c6a410',
-            },
-            'pzh-blue': {
-                DEFAULT: '#281f6b',
-                light: '#7badde',
-                dark: '#16113b',
-                'super-light': '#ececf3', // Custom
-            },
-            'pzh-pink': {
-                DEFAULT: '#aa0067',
-                light: '#d76aac',
-                dark: '#750047',
-            },
-            'pzh-orange': {
-                DEFAULT: '#ff6b02',
-                light: '#fba66a',
-                dark: '#b24a00',
-            },
-            'pzh-apple-green': {
-                DEFAULT: '#76bc21',
-                light: '#add57d',
-                dark: '#629623',
-            },
-            'pzh-green': {
-                DEFAULT: '#00804d',
-                light: '#61b375',
-                dark: '#004d2e',
-            },
-            'pzh-purple': {
-                DEFAULT: '#503d90',
-                light: '#9b99cc',
-                dark: '#32265a',
-            },
-            'pzh-gray': {
-                800: '#222222',
-                700: '#464646',
-                600: '#5C5C5C',
-                500: '#838383',
-                400: '#BFBFBF',
-                300: '#D5D5D5',
-                200: '#E6E6E6',
-                100: '#F8F8F8',
-            },
-            'pzh-cool-gray': {
-                DEFAULT: '#838383',
-                light: '#bfbfbf',
-                dark: '#5c5c5c',
-            },
-            'pzh-warm-gray': {
-                DEFAULT: '#847062',
-                light: '#beb1a7',
-                dark: '#584b41',
-            },
-            'pzh-badge': {
-                green: '#50A658',
-                red: '#CB3B36',
-                orange: '#F9B53C',
-            },
-            'pzh-white': {
-                DEFAULT: '#FFFFFF',
-            },
-            'pzh-ui': {
-                white: '#FFFFFF',
-                'light-blue': '#E5EFF8',
-            },
+        blue: {
+          10: "#F2F7FC",
+          100: "#7BADDE",
+          500: "#281F6B",
+          900: "#16113B",
         },
-        extend: {
-            opacity: {
-                35: '0.35',
-                55: '0.55',
-            },
-            boxShadow: {
-                card: '0px 18px 60px rgba(0, 0, 0, 0.07), 0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275), 0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725)',
-            },
-            typography: {
-                DEFAULT: {
-                    css: {
-                        li: {
-                            p: {
-                                margin: 0,
-                            },
-                            '&>ol': {
-                                margin: 0,
-                            },
-                            '&>ul': {
-                                margin: 0,
-                            },
-                        },
-                    },
-                },
-            },
+        pink: {
+          100: "#D76AAC",
+          500: "#AA0067",
+          900: "#750047",
+        },
+        orange: {
+          100: "#FBA66A",
+          500: "#FF6B02",
+          900: "#B24A00",
+        },
+        "apple-green": {
+          100: "#ADD57D",
+          500: "#76BC21",
+          900: "#629623",
+        },
+        purple: {
+          100: "#9B99CC",
+          500: "#503D90",
+          900: "#32265A",
+        },
+        "warm-gray": {
+          100: "#BEB1A7",
+          500: "#847062",
+          900: "#584B41",
+        },
+        green: {
+          10: "#EDFAF0",
+          100: "#61B375",
+          500: "#00804D",
+          900: "#004D2E",
+        },
+        gray: {
+          100: "#F8F8F8",
+          200: "#E6E6E6",
+          300: "#D5D5D5",
+          400: "#BFBFBF",
+          500: "#838383",
+          600: "#5C5C5C",
+          700: "#464646",
+          800: "#222222",
+        },
+        positive: "#00804D",
+        neutral: "#7BADDE",
+        negative: "#D11F3D",
+        white: "#FFFFFF",
+        black: "#000000",
+        "visited-link": "#5F29A2",
+        backdrop: "#5C5C5C",
+        focus: "#2360C5",
+      },
+      /** OLD colors */
+      "pzh-red": {
+        DEFAULT: "#d11f3d",
+        light: "#eb7085",
+        dark: "#97162c",
+      },
+      "pzh-yellow": {
+        DEFAULT: "#efcc36",
+        light: "#f1db7e",
+        dark: "#c6a410",
+      },
+      "pzh-blue": {
+        DEFAULT: "#281f6b",
+        light: "#7badde",
+        dark: "#16113b",
+        "super-light": "#ececf3", // Custom
+      },
+      "pzh-pink": {
+        DEFAULT: "#aa0067",
+        light: "#d76aac",
+        dark: "#750047",
+      },
+      "pzh-orange": {
+        DEFAULT: "#ff6b02",
+        light: "#fba66a",
+        dark: "#b24a00",
+      },
+      "pzh-apple-green": {
+        DEFAULT: "#76bc21",
+        light: "#add57d",
+        dark: "#629623",
+      },
+      "pzh-green": {
+        DEFAULT: "#00804d",
+        light: "#61b375",
+        dark: "#004d2e",
+      },
+      "pzh-purple": {
+        DEFAULT: "#503d90",
+        light: "#9b99cc",
+        dark: "#32265a",
+      },
+      "pzh-cool-gray": {
+        DEFAULT: "#838383",
+        light: "#bfbfbf",
+        dark: "#5c5c5c",
+      },
+      "pzh-warm-gray": {
+        DEFAULT: "#847062",
+        light: "#beb1a7",
+        dark: "#584b41",
+      },
+      "pzh-badge": {
+        green: "#50A658",
+        red: "#CB3B36",
+        orange: "#F9B53C",
+      },
+      "pzh-ui": {
+        white: "#FFFFFF",
+        "light-blue": "#E5EFF8",
+      },
+    },
+    extend: {
+      opacity: {
+        35: "0.35",
+        55: "0.55",
+      },
+      boxShadow: {
+        card: "0px 18px 60px rgba(0, 0, 0, 0.07), 0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275), 0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725)",
+      },
+      typography: {
+        DEFAULT: {
+          css: {
+            li: {
+              p: {
+                margin: 0,
+              },
+              "&>ol": {
+                margin: 0,
+              },
+              "&>ul": {
+                margin: 0,
+              },
+            },
+          },
         },
+      },
     },
-}
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.75",
+    "version": "0.0.77",
     "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": "ef4201fded56a19038ba54158c074b876f073504",
+    "gitHead": "47638eba752130e2f6ea7120e9da39723d70ae8b",
     "devDependencies": {
         "tailwindcss": "^3.3.2"
     }

package/src/tailwind.css

@@ -1532,6 +1532,7 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(0 128 77 / var(--tw-bg-opacity));
   font-weight: 700;
+  font-family: "Karbon Medium", sans-serif;
 }
 
 .pzh-datepicker .react-datepicker__year-read-view--down-arrow,
@@ -1551,6 +1552,13 @@ select {
   line-height: 14px;
 }
 
+.pzh-datepicker .react-datepicker__current-month,
+  .pzh-datepicker .react-datepicker__day-name,
+  .pzh-datepicker .react-datepicker__day--today {
+  font-weight: 700;
+  font-family: "Karbon Medium", sans-serif;
+}
+
 .pzh-select-input input {
   box-shadow: none !important;
 }
@@ -1833,8 +1841,8 @@ select {
   margin-top: 1px;
 }
 
-.mt-\[3px\] {
-  margin-top: 3px;
+.mt-px {
+  margin-top: 1px;
 }
 
 .block {
@@ -1979,6 +1987,10 @@ select {
   min-width: 14px;
 }
 
+.min-w-\[18px\] {
+  min-width: 18px;
+}
+
 .min-w-\[320px\] {
   min-width: 320px;
 }
@@ -2235,6 +2247,11 @@ select {
   border-color: rgb(40 31 107 / var(--tw-border-opacity));
 }
 
+.border-pzh-blue-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(123 173 222 / var(--tw-border-opacity));
+}
+
 .border-pzh-blue-dark {
   --tw-border-opacity: 1;
   border-color: rgb(22 17 59 / var(--tw-border-opacity));
@@ -2269,6 +2286,11 @@ select {
   border-color: rgb(0 128 77 / var(--tw-border-opacity));
 }
 
+.border-pzh-green-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(97 179 117 / var(--tw-border-opacity));
+}
+
 .border-pzh-green-light {
   --tw-border-opacity: 1;
   border-color: rgb(97 179 117 / var(--tw-border-opacity));
@@ -2284,6 +2306,11 @@ select {
   border-color: rgb(209 31 61 / var(--tw-border-opacity));
 }
 
+.border-pzh-red-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(235 112 133 / var(--tw-border-opacity));
+}
+
 .border-pzh-red-light {
   --tw-border-opacity: 1;
   border-color: rgb(235 112 133 / var(--tw-border-opacity));
@@ -2299,6 +2326,11 @@ select {
   border-color: rgb(239 204 54 / var(--tw-border-opacity));
 }
 
+.border-pzh-yellow-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(241 219 126 / var(--tw-border-opacity));
+}
+
 .border-pzh-yellow-dark {
   --tw-border-opacity: 1;
   border-color: rgb(198 164 16 / var(--tw-border-opacity));
@@ -2318,6 +2350,11 @@ select {
   background-color: rgb(40 31 107 / var(--tw-bg-opacity));
 }
 
+.bg-pzh-blue-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(242 247 252 / var(--tw-bg-opacity));
+}
+
 .bg-pzh-blue-light {
   --tw-bg-opacity: 1;
   background-color: rgb(123 173 222 / var(--tw-bg-opacity));
@@ -2357,6 +2394,11 @@ select {
   background-color: rgb(0 128 77 / var(--tw-bg-opacity));
 }
 
+.bg-pzh-green-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(237 250 240 / var(--tw-bg-opacity));
+}
+
 .bg-pzh-green-light {
   --tw-bg-opacity: 1;
   background-color: rgb(97 179 117 / var(--tw-bg-opacity));
@@ -2377,6 +2419,11 @@ select {
   background-color: rgb(209 31 61 / var(--tw-bg-opacity));
 }
 
+.bg-pzh-red-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 237 240 / var(--tw-bg-opacity));
+}
+
 .bg-pzh-red-light {
   --tw-bg-opacity: 1;
   background-color: rgb(235 112 133 / var(--tw-bg-opacity));
@@ -2392,13 +2439,14 @@ select {
   background-color: rgb(239 204 54 / var(--tw-bg-opacity));
 }
 
-.bg-white {
+.bg-pzh-yellow-10 {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(255 249 227 / var(--tw-bg-opacity));
 }
 
-.bg-opacity-20 {
-  --tw-bg-opacity: 0.2;
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
 .bg-opacity-50 {
@@ -2464,6 +2512,11 @@ select {
   padding-bottom: 0.5rem;
 }
 
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -2478,10 +2531,6 @@ select {
   padding-bottom: 0.25rem;
 }
 
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
-
 .pb-3 {
   padding-bottom: 0.75rem;
 }
@@ -2526,10 +2575,6 @@ select {
   padding-top: 0.5rem;
 }
 
-.pt-3 {
-  padding-top: 0.75rem;
-}
-
 .pt-4 {
   padding-top: 1rem;
 }
@@ -2641,10 +2686,6 @@ select {
   line-height: 125%;
 }
 
-.leading-\[30px\] {
-  line-height: 30px;
-}
-
 .leading-none {
   line-height: 1;
 }
@@ -2654,6 +2695,11 @@ select {
   color: rgb(40 31 107 / var(--tw-text-opacity));
 }
 
+.text-pzh-blue-900 {
+  --tw-text-opacity: 1;
+  color: rgb(22 17 59 / var(--tw-text-opacity));
+}
+
 .text-pzh-blue-dark {
   --tw-text-opacity: 1;
   color: rgb(22 17 59 / var(--tw-text-opacity));
@@ -2692,11 +2738,21 @@ select {
   color: rgb(92 92 92 / var(--tw-text-opacity));
 }
 
+.text-pzh-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(70 70 70 / var(--tw-text-opacity));
+}
+
 .text-pzh-green {
   --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));
+}
+
 .text-pzh-green-light {
   --tw-text-opacity: 1;
   color: rgb(97 179 117 / var(--tw-text-opacity));
@@ -2717,6 +2773,11 @@ select {
   color: rgb(209 31 61 / var(--tw-text-opacity));
 }
 
+.text-pzh-red-900 {
+  --tw-text-opacity: 1;
+  color: rgb(151 22 44 / var(--tw-text-opacity));
+}
+
 .text-pzh-red-light {
   --tw-text-opacity: 1;
   color: rgb(235 112 133 / var(--tw-text-opacity));
@@ -3303,10 +3364,6 @@ ol li ol li ol li {
     grid-column: span 4 / span 4;
   }
 
-  .md\:ml-4 {
-    margin-left: 1rem;
-  }
-
   .md\:flex {
     display: flex;
   }
@@ -3318,11 +3375,6 @@ ol li ol li ol li {
   .md\:gap-8 {
     gap: 2rem;
   }
-
-  .md\:text-m {
-    font-size: 1.25rem;
-    line-height: 1.875rem;
-  }
 }
 
 @media (min-width: 1024px) {

package/src/tailwind.src.css

@@ -220,7 +220,7 @@ ol li ol li ol li {
 
   .pzh-datepicker .react-datepicker__day--selected,
   .pzh-datepicker .react-datepicker__day--selected:hover {
-    @apply bg-pzh-green bold;
+    @apply bg-pzh-green font-bold;
   }
 
   .pzh-datepicker .react-datepicker__year-read-view--down-arrow,
@@ -234,6 +234,12 @@ ol li ol li ol li {
     @apply leading-[14px];
   }
 
+  .pzh-datepicker .react-datepicker__current-month,
+  .pzh-datepicker .react-datepicker__day-name,
+  .pzh-datepicker .react-datepicker__day--today {
+    @apply font-bold;
+  }
+
   .pzh-select-input input {
     box-shadow: none !important;
   }