@pzh-ui/css 0.0.74 → 0.0.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/config/index.js +188 -131
  2. package/package.json +2 -2
  3. package/src/tailwind.css +9 -9
  4. package/src/tailwind.src.css +9 -9
package/config/index.js CHANGED
@@ -1,138 +1,195 @@
1
1
  module.exports = {
2
- content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
3
- variants: {
4
- pointerEvents: ['responsive', 'hover'],
5
- display: ['responsive', 'hover', 'group-hover'],
6
- textDecoration: ['responsive', 'hover', 'focus', 'group-hover'],
7
- roundedFull: ['responsive', 'focus'],
8
- margin: ['responsive', 'group-hover'],
9
- textColor: ['responsive', 'hover', 'focus', 'group-hover'],
10
- borderWidth: ['hover'],
11
- borderOpacity: ['hover'],
2
+ content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
3
+ variants: {
4
+ pointerEvents: ["responsive", "hover"],
5
+ display: ["responsive", "hover", "group-hover"],
6
+ textDecoration: ["responsive", "hover", "focus", "group-hover"],
7
+ roundedFull: ["responsive", "focus"],
8
+ margin: ["responsive", "group-hover"],
9
+ textColor: ["responsive", "hover", "focus", "group-hover"],
10
+ borderWidth: ["hover"],
11
+ borderOpacity: ["hover"],
12
+ },
13
+ plugins: [
14
+ require("@tailwindcss/line-clamp"),
15
+ require("@tailwindcss/forms"),
16
+ require("@tailwindcss/custom-forms"),
17
+ require("@tailwindcss/typography"),
18
+ ],
19
+ theme: {
20
+ screens: {
21
+ sm: "640px",
22
+ md: "768px",
23
+ lg: "1024px",
24
+ xl: "1280px",
25
+ "2xl": "1440px",
12
26
  },
13
- plugins: [
14
- require('@tailwindcss/line-clamp'),
15
- require('@tailwindcss/forms'),
16
- require('@tailwindcss/custom-forms'),
17
- require('@tailwindcss/typography'),
18
- ],
19
- theme: {
20
- screens: {
21
- sm: '640px',
22
- md: '768px',
23
- lg: '1024px',
24
- xl: '1280px',
25
- '2xl': '1440px',
27
+ fontSize: {
28
+ s: ["1rem", "1.5rem"],
29
+ m: ["1.25rem", "1.875rem"],
30
+ l: ["1.5rem", "1.875rem"],
31
+ },
32
+ colors: {
33
+ black: "#000000",
34
+ white: "#FFF",
35
+ "pzh-form": "#F4F4F7",
36
+ /** Add custom PZH colors */
37
+ pzh: {
38
+ red: {
39
+ 10: "#FFEDF0",
40
+ 100: "#EB7085",
41
+ 500: "#D11F3D",
42
+ 900: "#97162C",
26
43
  },
27
- fontSize: {
28
- s: ['1rem', '1.5rem'],
29
- m: ['1.25rem', '1.875rem'],
30
- l: ['1.5rem', '1.875rem'],
44
+ yellow: {
45
+ 10: "#FFF9E3",
46
+ 100: "#F1DB7E",
47
+ 500: "#EFCC36",
48
+ 900: "#C6A410",
31
49
  },
32
- colors: {
33
- black: '#000000',
34
- white: '#FFF',
35
- 'pzh-form': '#F4F4F7',
36
- /** Add custom PZH colors */
37
- 'pzh-red': {
38
- DEFAULT: '#d11f3d',
39
- light: '#eb7085',
40
- dark: '#97162c',
41
- },
42
- 'pzh-yellow': {
43
- DEFAULT: '#efcc36',
44
- light: '#f1db7e',
45
- dark: '#c6a410',
46
- },
47
- 'pzh-blue': {
48
- DEFAULT: '#281f6b',
49
- light: '#7badde',
50
- dark: '#16113b',
51
- 'super-light': '#ececf3', // Custom
52
- },
53
- 'pzh-pink': {
54
- DEFAULT: '#aa0067',
55
- light: '#d76aac',
56
- dark: '#750047',
57
- },
58
- 'pzh-orange': {
59
- DEFAULT: '#ff6b02',
60
- light: '#fba66a',
61
- dark: '#b24a00',
62
- },
63
- 'pzh-apple-green': {
64
- DEFAULT: '#76bc21',
65
- light: '#add57d',
66
- dark: '#629623',
67
- },
68
- 'pzh-green': {
69
- DEFAULT: '#00804d',
70
- light: '#61b375',
71
- dark: '#004d2e',
72
- },
73
- 'pzh-purple': {
74
- DEFAULT: '#503d90',
75
- light: '#9b99cc',
76
- dark: '#32265a',
77
- },
78
- 'pzh-gray': {
79
- 800: '#222222',
80
- 700: '#464646',
81
- 600: '#5C5C5C',
82
- 500: '#838383',
83
- 400: '#BFBFBF',
84
- 300: '#D5D5D5',
85
- 200: '#E6E6E6',
86
- 100: '#F8F8F8',
87
- },
88
- 'pzh-cool-gray': {
89
- DEFAULT: '#838383',
90
- light: '#bfbfbf',
91
- dark: '#5c5c5c',
92
- },
93
- 'pzh-warm-gray': {
94
- DEFAULT: '#847062',
95
- light: '#beb1a7',
96
- dark: '#584b41',
97
- },
98
- 'pzh-badge': {
99
- green: '#50A658',
100
- red: '#CB3B36',
101
- orange: '#F9B53C',
102
- },
103
- 'pzh-white': {
104
- DEFAULT: '#FFFFFF',
105
- },
106
- 'pzh-ui': {
107
- white: '#FFFFFF',
108
- 'light-blue': '#E5EFF8',
109
- },
50
+ blue: {
51
+ 10: "#F2F7FC",
52
+ 100: "#7BADDE",
53
+ 500: "#281F6B",
54
+ 900: "#16113B",
110
55
  },
111
- extend: {
112
- opacity: {
113
- 35: '0.35',
114
- 55: '0.55',
115
- },
116
- boxShadow: {
117
- 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)',
118
- },
119
- typography: {
120
- DEFAULT: {
121
- css: {
122
- li: {
123
- p: {
124
- margin: 0,
125
- },
126
- '&>ol': {
127
- margin: 0,
128
- },
129
- '&>ul': {
130
- margin: 0,
131
- },
132
- },
133
- },
134
- },
135
- },
56
+ pink: {
57
+ 100: "#D76AAC",
58
+ 500: "#AA0067",
59
+ 900: "#750047",
60
+ },
61
+ orange: {
62
+ 100: "#FBA66A",
63
+ 500: "#FF6B02",
64
+ 900: "#B24A00",
65
+ },
66
+ "apple-green": {
67
+ 100: "#ADD57D",
68
+ 500: "#76BC21",
69
+ 900: "#629623",
70
+ },
71
+ purple: {
72
+ 100: "#9B99CC",
73
+ 500: "#503D90",
74
+ 900: "#32265A",
75
+ },
76
+ "warm-gray": {
77
+ 100: "#BEB1A7",
78
+ 500: "#847062",
79
+ 900: "#584B41",
80
+ },
81
+ green: {
82
+ 10: "#EDFAF0",
83
+ 100: "#61B375",
84
+ 500: "#00804D",
85
+ 900: "#004D2E",
86
+ },
87
+ gray: {
88
+ 100: "#F8F8F8",
89
+ 200: "#E6E6E6",
90
+ 300: "#D5D5D5",
91
+ 400: "#BFBFBF",
92
+ 500: "#838383",
93
+ 600: "#5C5C5C",
94
+ 700: "#464646",
95
+ 800: "#222222",
96
+ },
97
+ positive: "#00804D",
98
+ neutral: "#7BADDE",
99
+ negative: "#D11F3D",
100
+ white: "#FFFFFF",
101
+ black: "#000000",
102
+ "visited-link": "#5F29A2",
103
+ backdrop: "#5C5C5C",
104
+ focus: "#2360C5",
105
+ },
106
+ /** OLD colors */
107
+ "pzh-red": {
108
+ DEFAULT: "#d11f3d",
109
+ light: "#eb7085",
110
+ dark: "#97162c",
111
+ },
112
+ "pzh-yellow": {
113
+ DEFAULT: "#efcc36",
114
+ light: "#f1db7e",
115
+ dark: "#c6a410",
116
+ },
117
+ "pzh-blue": {
118
+ DEFAULT: "#281f6b",
119
+ light: "#7badde",
120
+ dark: "#16113b",
121
+ "super-light": "#ececf3", // Custom
122
+ },
123
+ "pzh-pink": {
124
+ DEFAULT: "#aa0067",
125
+ light: "#d76aac",
126
+ dark: "#750047",
127
+ },
128
+ "pzh-orange": {
129
+ DEFAULT: "#ff6b02",
130
+ light: "#fba66a",
131
+ dark: "#b24a00",
132
+ },
133
+ "pzh-apple-green": {
134
+ DEFAULT: "#76bc21",
135
+ light: "#add57d",
136
+ dark: "#629623",
137
+ },
138
+ "pzh-green": {
139
+ DEFAULT: "#00804d",
140
+ light: "#61b375",
141
+ dark: "#004d2e",
142
+ },
143
+ "pzh-purple": {
144
+ DEFAULT: "#503d90",
145
+ light: "#9b99cc",
146
+ dark: "#32265a",
147
+ },
148
+ "pzh-cool-gray": {
149
+ DEFAULT: "#838383",
150
+ light: "#bfbfbf",
151
+ dark: "#5c5c5c",
152
+ },
153
+ "pzh-warm-gray": {
154
+ DEFAULT: "#847062",
155
+ light: "#beb1a7",
156
+ dark: "#584b41",
157
+ },
158
+ "pzh-badge": {
159
+ green: "#50A658",
160
+ red: "#CB3B36",
161
+ orange: "#F9B53C",
162
+ },
163
+ "pzh-ui": {
164
+ white: "#FFFFFF",
165
+ "light-blue": "#E5EFF8",
166
+ },
167
+ },
168
+ extend: {
169
+ opacity: {
170
+ 35: "0.35",
171
+ 55: "0.55",
172
+ },
173
+ boxShadow: {
174
+ 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)",
175
+ },
176
+ typography: {
177
+ DEFAULT: {
178
+ css: {
179
+ li: {
180
+ p: {
181
+ margin: 0,
182
+ },
183
+ "&>ol": {
184
+ margin: 0,
185
+ },
186
+ "&>ul": {
187
+ margin: 0,
188
+ },
189
+ },
190
+ },
136
191
  },
192
+ },
137
193
  },
138
- }
194
+ },
195
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pzh-ui/css",
3
- "version": "0.0.74",
3
+ "version": "0.0.76",
4
4
  "description": "Contains default styling for projects whitin Provincie Zuid-Holland.",
5
5
  "license": "ISC",
6
6
  "publishConfig": {
@@ -21,7 +21,7 @@
21
21
  "react-datepicker": "^4.7.0",
22
22
  "react-toastify": "^9.1.2"
23
23
  },
24
- "gitHead": "d776c5b243f3ff0b43b83da8795e61996e9350c3",
24
+ "gitHead": "5fcd44077edac3bbe12ce61201e53b31481d9779",
25
25
  "devDependencies": {
26
26
  "tailwindcss": "^3.3.2"
27
27
  }
package/src/tailwind.css CHANGED
@@ -1574,38 +1574,38 @@ select {
1574
1574
  }
1575
1575
  }
1576
1576
 
1577
- table {
1577
+ .prose table {
1578
1578
  font-size: 1.25rem !important;
1579
1579
  line-height: 1.875rem !important;
1580
1580
  }
1581
1581
 
1582
- table,
1583
- table td,
1584
- table th {
1582
+ .prose table,
1583
+ .prose table td,
1584
+ .prose table th {
1585
1585
  border-width: 1px;
1586
1586
  --tw-border-opacity: 1;
1587
1587
  border-color: rgb(92 92 92 / var(--tw-border-opacity));
1588
1588
  }
1589
1589
 
1590
- table tr th {
1590
+ .prose table tr th {
1591
1591
  --tw-bg-opacity: 1;
1592
1592
  background-color: rgb(248 248 248 / var(--tw-bg-opacity));
1593
1593
  font-weight: 700;
1594
1594
  font-family: "Karbon Medium", sans-serif;
1595
1595
  }
1596
1596
 
1597
- table tr {
1597
+ .prose table tr {
1598
1598
  border-bottom-width: 1px;
1599
1599
  --tw-border-opacity: 1;
1600
1600
  border-color: rgb(92 92 92 / var(--tw-border-opacity));
1601
1601
  }
1602
1602
 
1603
- table td,
1604
- table th {
1603
+ .prose table td,
1604
+ .prose table th {
1605
1605
  padding: 0.5rem !important;
1606
1606
  }
1607
1607
 
1608
- table p {
1608
+ .prose table p {
1609
1609
  margin-top: 0px !important;
1610
1610
  margin-bottom: 0px !important;
1611
1611
  }
package/src/tailwind.src.css CHANGED
@@ -266,30 +266,30 @@ ol li ol li ol li {
266
266
  }
267
267
  }
268
268
 
269
- table {
269
+ .prose table {
270
270
  @apply !text-m;
271
271
  }
272
272
 
273
- table,
274
- table td,
275
- table th {
273
+ .prose table,
274
+ .prose table td,
275
+ .prose table th {
276
276
  @apply border border-pzh-gray-600;
277
277
  }
278
278
 
279
- table tr th {
279
+ .prose table tr th {
280
280
  @apply bg-pzh-gray-100 font-bold;
281
281
  }
282
282
 
283
- table tr {
283
+ .prose table tr {
284
284
  @apply border-b border-pzh-gray-600;
285
285
  }
286
286
 
287
- table td,
288
- table th {
287
+ .prose table td,
288
+ .prose table th {
289
289
  @apply !p-2;
290
290
  }
291
291
 
292
- table p {
292
+ .prose table p {
293
293
  @apply !my-0;
294
294
  }
295
295
  }