@pzh-ui/css 0.0.75 → 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 (2) hide show
  1. package/config/index.js +188 -131
  2. package/package.json +2 -2
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.75",
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": "ef4201fded56a19038ba54158c074b876f073504",
24
+ "gitHead": "5fcd44077edac3bbe12ce61201e53b31481d9779",
25
25
  "devDependencies": {
26
26
  "tailwindcss": "^3.3.2"
27
27
  }