@pzh-ui/css 0.0.68 → 0.0.70

package/config/index.js

@@ -25,132 +25,14 @@ module.exports = {
             '2xl': '1440px',
         },
         fontSize: {
-            xs: '0.75rem',
-            sm: '0.875rem',
-            base: '1rem',
-            lg: '1.125rem',
-            xl: '1.25rem',
-            '2xl': '1.5rem',
-            '3xl': '1.875rem',
-            '4xl': '2.25rem',
-            '5xl': '3rem',
-            '6xl': '4rem',
+            s: ['1rem', '1.5rem'],
+            m: ['1.25rem', '1.875rem'],
+            l: ['1.5rem', '1.875rem'],
         },
         colors: {
             black: '#000000',
             white: '#FFF',
             'pzh-form': '#F4F4F7',
-            gray: {
-                50: '#f9fafb',
-                100: '#f7fafc',
-                200: '#edf2f7',
-                300: '#e2e8f0',
-                400: '#cbd5e0',
-                500: '#a0aec0',
-                600: '#718096',
-                700: '#4a5568',
-                800: '#2d3748',
-                900: '#1a202c',
-            },
-            red: {
-                100: '#fff5f5',
-                200: '#fed7d7',
-                300: '#feb2b2',
-                400: '#fc8181',
-                500: '#f56565',
-                600: '#e53e3e',
-                700: '#c53030',
-                800: '#9b2c2c',
-                900: '#742a2a',
-            },
-            orange: {
-                100: '#fffaf0',
-                200: '#feebc8',
-                300: '#fbd38d',
-                400: '#f6ad55',
-                500: '#ed8936',
-                600: '#dd6b20',
-                700: '#c05621',
-                800: '#9c4221',
-                900: '#7b341e',
-            },
-            yellow: {
-                100: '#fffff0',
-                200: '#fefcbf',
-                300: '#faf089',
-                400: '#f6e05e',
-                500: '#ecc94b',
-                600: '#d69e2e',
-                700: '#b7791f',
-                800: '#975a16',
-                900: '#744210',
-            },
-            green: {
-                100: '#f0fff4',
-                200: '#c6f6d5',
-                300: '#9ae6b4',
-                400: '#68d391',
-                500: '#48bb78',
-                600: '#38a169',
-                700: '#2f855a',
-                800: '#276749',
-                900: '#22543d',
-            },
-            teal: {
-                100: '#e6fffa',
-                200: '#b2f5ea',
-                300: '#81e6d9',
-                400: '#4fd1c5',
-                500: '#38b2ac',
-                600: '#319795',
-                700: '#2c7a7b',
-                800: '#285e61',
-                900: '#234e52',
-            },
-            blue: {
-                100: '#ebf8ff',
-                200: '#bee3f8',
-                300: '#90cdf4',
-                400: '#63b3ed',
-                500: '#4299e1',
-                600: '#3182ce',
-                700: '#2b6cb0',
-                800: '#2c5282',
-                900: '#2a4365',
-            },
-            indigo: {
-                100: '#ebf4ff',
-                200: '#c3dafe',
-                300: '#a3bffa',
-                400: '#7f9cf5',
-                500: '#667eea',
-                600: '#5a67d8',
-                700: '#4c51bf',
-                800: '#434190',
-                900: '#3c366b',
-            },
-            purple: {
-                100: '#faf5ff',
-                200: '#e9d8fd',
-                300: '#d6bcfa',
-                400: '#b794f4',
-                500: '#9f7aea',
-                600: '#805ad5',
-                700: '#6b46c1',
-                800: '#553c9a',
-                900: '#44337a',
-            },
-            pink: {
-                100: '#fff5f7',
-                200: '#fed7e2',
-                300: '#fbb6ce',
-                400: '#f687b3',
-                500: '#ed64a6',
-                600: '#d53f8c',
-                700: '#b83280',
-                800: '#97266d',
-                900: '#702459',
-            },
             /** Add custom PZH colors */
             'pzh-red': {
                 DEFAULT: '#d11f3d',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pzh-ui/css",
-    "version": "0.0.68",
+    "version": "0.0.70",
     "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": "2adc87e34605f3bba8170a8aaf6571c7d523baf7",
+    "gitHead": "3dc349a730bb3eb48134374f767adc1236c92b7f",
     "devDependencies": {
         "tailwindcss": "^3.3.2"
     }

package/src/tailwind.css

@@ -16,7 +16,7 @@
   /* 2 */
   border-style: solid;
   /* 2 */
-  border-color: #edf2f7;
+  border-color: currentColor;
   /* 2 */
 }
 
@@ -357,7 +357,7 @@ textarea {
 input::-moz-placeholder, textarea::-moz-placeholder {
   opacity: 1;
   /* 1 */
-  color: #cbd5e0;
+  color: #9ca3af;
   /* 2 */
 }
 
@@ -365,7 +365,7 @@ input::placeholder,
 textarea::placeholder {
   opacity: 1;
   /* 1 */
-  color: #cbd5e0;
+  color: #9ca3af;
   /* 2 */
 }
 
@@ -427,7 +427,7 @@ video {
      -moz-appearance: none;
           appearance: none;
   background-color: #fff;
-  border-color: #a0aec0;
+  border-color: #6b7280;
   border-width: 1px;
   border-radius: 0px;
   padding-top: 0.5rem;
@@ -445,20 +445,20 @@ video {
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: #3182ce;
+  --tw-ring-color: #2563eb;
   --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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  border-color: #3182ce;
+  border-color: #2563eb;
 }
 
 input::-moz-placeholder, textarea::-moz-placeholder {
-  color: #a0aec0;
+  color: #6b7280;
   opacity: 1;
 }
 
 input::placeholder,textarea::placeholder {
-  color: #a0aec0;
+  color: #6b7280;
   opacity: 1;
 }
 
@@ -476,7 +476,7 @@ input::placeholder,textarea::placeholder {
 }
 
 select {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a0aec0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
   background-position: right 0.5rem center;
   background-repeat: no-repeat;
   background-size: 1.5em 1.5em;
@@ -511,9 +511,9 @@ select {
   flex-shrink: 0;
   height: 1rem;
   width: 1rem;
-  color: #3182ce;
+  color: #2563eb;
   background-color: #fff;
-  border-color: #a0aec0;
+  border-color: #6b7280;
   border-width: 1px;
   --tw-shadow: 0 0 #0000;
 }
@@ -532,7 +532,7 @@ select {
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
   --tw-ring-offset-width: 2px;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: #3182ce;
+  --tw-ring-color: #2563eb;
   --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);
@@ -612,7 +612,7 @@ select {
   --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(66 153 225 / 0.5);
+  --tw-ring-color: rgb(59 130 246 / 0.5);
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
@@ -662,7 +662,7 @@ select {
   --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(66 153 225 / 0.5);
+  --tw-ring-color: rgb(59 130 246 / 0.5);
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
@@ -2121,6 +2121,11 @@ select {
   white-space: nowrap;
 }
 
+.hyphens-manual {
+  -webkit-hyphens: manual;
+          hyphens: manual;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -2520,6 +2525,18 @@ select {
   font-size: 0.8rem;
 }
 
+.text-\[1\.125rem\] {
+  font-size: 1.125rem;
+}
+
+.text-\[1\.25rem\] {
+  font-size: 1.25rem;
+}
+
+.text-\[1\.5rem\] {
+  font-size: 1.5rem;
+}
+
 .text-\[16px\] {
   font-size: 16px;
 }
@@ -2528,16 +2545,20 @@ select {
   font-size: 18px;
 }
 
-.text-base {
-  font-size: 1rem;
+.text-\[2\.5rem\] {
+  font-size: 2.5rem;
+}
+
+.text-\[2rem\] {
+  font-size: 2rem;
 }
 
-.text-sm {
-  font-size: 0.875rem;
+.text-\[3rem\] {
+  font-size: 3rem;
 }
 
-.text-xs {
-  font-size: 0.75rem;
+.text-\[4rem\] {
+  font-size: 4rem;
 }
 
 .font-bold {
@@ -2568,6 +2589,14 @@ select {
   line-height: 1.5rem;
 }
 
+.leading-\[110\%\] {
+  line-height: 110%;
+}
+
+.leading-\[125\%\] {
+  line-height: 125%;
+}
+
 .leading-\[28px\] {
   line-height: 28px;
 }
@@ -2817,13 +2846,13 @@ select {
 html {
   height: 100%;
   overflow: auto;
-  font-size: 20px;
-  line-height: 1.5em;
 }
 
 body {
   margin: 0;
   padding: 0;
+  font-size: 20px;
+  line-height: 1.5em;
   font-family: 'Karbon Regular', sans-serif;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
@@ -3143,10 +3172,6 @@ b {
   .md\:gap-8 {
     gap: 2rem;
   }
-
-  .md\:text-base {
-    font-size: 1rem;
-  }
 }
 
 @media (min-width: 1024px) {

package/src/tailwind.src.css

@@ -19,13 +19,13 @@
 html {
     height: 100%;
     overflow: auto;
-    font-size: 20px;
-    line-height: 1.5em;
 }
 
 body {
     margin: 0;
     padding: 0;
+    font-size: 20px;
+    line-height: 1.5em;
     font-family: 'Karbon Regular', sans-serif;
     font-weight: 400;
     -webkit-font-smoothing: antialiased;