@pzh-ui/css 0.0.11

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.
@@ -0,0 +1,48 @@
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ @font-face {
6
+ font-family: 'Karbon Regular';
7
+ src: url('../assets/Karbon-Regular.woff2') format('woff2');
8
+ font-weight: normal;
9
+ font-display: swap;
10
+ }
11
+
12
+ @font-face {
13
+ font-family: 'Karbon Medium';
14
+ src: url('../assets/Karbon-Medium.woff2') format('woff2');
15
+ font-weight: bold;
16
+ font-display: swap;
17
+ }
18
+
19
+ html {
20
+ height: 100%;
21
+ overflow: auto;
22
+ font-size: 20px;
23
+ line-height: 1.5em;
24
+ }
25
+
26
+ body {
27
+ margin: 0;
28
+ padding: 0;
29
+ font-family: 'Karbon Regular', sans-serif;
30
+ font-weight: 400;
31
+ -webkit-font-smoothing: antialiased;
32
+ -moz-osx-font-smoothing: grayscale;
33
+ }
34
+
35
+ h1,
36
+ h2,
37
+ h3,
38
+ h4,
39
+ h5,
40
+ h6,
41
+ .font-bold {
42
+ font-family: 'Karbon Medium', sans-serif;
43
+ font-weight: 700;
44
+ }
45
+
46
+ .bold {
47
+ font-weight: 700;
48
+ }
@@ -0,0 +1,218 @@
1
+ module.exports = {
2
+ corePlugins: {
3
+ fontWeight: false,
4
+ lineHeight: false,
5
+ },
6
+ purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
7
+ variants: {
8
+ pointerEvents: ['responsive', 'hover'],
9
+ display: ['responsive', 'hover', 'group-hover'],
10
+ textDecoration: ['responsive', 'hover', 'focus', 'group-hover'],
11
+ roundedFull: ['responsive', 'focus'],
12
+ margin: ['responsive', 'group-hover'],
13
+ textColor: ['responsive', 'hover', 'focus', 'group-hover'],
14
+ borderWidth: ['hover'],
15
+ borderOpacity: ['hover'],
16
+ },
17
+ plugins: [
18
+ require('@tailwindcss/line-clamp'),
19
+ require('@tailwindcss/forms'),
20
+ require('@tailwindcss/custom-forms'),
21
+ ],
22
+ theme: {
23
+ screens: {
24
+ sm: '640px',
25
+ md: '768px',
26
+ lg: '1024px',
27
+ xl: '1280px',
28
+ '2xl': '1440px',
29
+ },
30
+ fontSize: {
31
+ xs: '0.75rem',
32
+ sm: '0.875rem',
33
+ base: '1rem',
34
+ lg: '1.125rem',
35
+ xl: '1.25rem',
36
+ '2xl': '1.5rem',
37
+ '3xl': '1.875rem',
38
+ '4xl': '2.25rem',
39
+ '5xl': '3rem',
40
+ '6xl': '4rem',
41
+ },
42
+ colors: {
43
+ white: '#FFF',
44
+ 'pzh-form': '#F4F4F7',
45
+ gray: {
46
+ 50: '#f9fafb',
47
+ 100: '#f7fafc',
48
+ 200: '#edf2f7',
49
+ 300: '#e2e8f0',
50
+ 400: '#cbd5e0',
51
+ 500: '#a0aec0',
52
+ 600: '#718096',
53
+ 700: '#4a5568',
54
+ 800: '#2d3748',
55
+ 900: '#1a202c',
56
+ },
57
+ red: {
58
+ 100: '#fff5f5',
59
+ 200: '#fed7d7',
60
+ 300: '#feb2b2',
61
+ 400: '#fc8181',
62
+ 500: '#f56565',
63
+ 600: '#e53e3e',
64
+ 700: '#c53030',
65
+ 800: '#9b2c2c',
66
+ 900: '#742a2a',
67
+ },
68
+ orange: {
69
+ 100: '#fffaf0',
70
+ 200: '#feebc8',
71
+ 300: '#fbd38d',
72
+ 400: '#f6ad55',
73
+ 500: '#ed8936',
74
+ 600: '#dd6b20',
75
+ 700: '#c05621',
76
+ 800: '#9c4221',
77
+ 900: '#7b341e',
78
+ },
79
+ yellow: {
80
+ 100: '#fffff0',
81
+ 200: '#fefcbf',
82
+ 300: '#faf089',
83
+ 400: '#f6e05e',
84
+ 500: '#ecc94b',
85
+ 600: '#d69e2e',
86
+ 700: '#b7791f',
87
+ 800: '#975a16',
88
+ 900: '#744210',
89
+ },
90
+ green: {
91
+ 100: '#f0fff4',
92
+ 200: '#c6f6d5',
93
+ 300: '#9ae6b4',
94
+ 400: '#68d391',
95
+ 500: '#48bb78',
96
+ 600: '#38a169',
97
+ 700: '#2f855a',
98
+ 800: '#276749',
99
+ 900: '#22543d',
100
+ },
101
+ teal: {
102
+ 100: '#e6fffa',
103
+ 200: '#b2f5ea',
104
+ 300: '#81e6d9',
105
+ 400: '#4fd1c5',
106
+ 500: '#38b2ac',
107
+ 600: '#319795',
108
+ 700: '#2c7a7b',
109
+ 800: '#285e61',
110
+ 900: '#234e52',
111
+ },
112
+ blue: {
113
+ 100: '#ebf8ff',
114
+ 200: '#bee3f8',
115
+ 300: '#90cdf4',
116
+ 400: '#63b3ed',
117
+ 500: '#4299e1',
118
+ 600: '#3182ce',
119
+ 700: '#2b6cb0',
120
+ 800: '#2c5282',
121
+ 900: '#2a4365',
122
+ },
123
+ indigo: {
124
+ 100: '#ebf4ff',
125
+ 200: '#c3dafe',
126
+ 300: '#a3bffa',
127
+ 400: '#7f9cf5',
128
+ 500: '#667eea',
129
+ 600: '#5a67d8',
130
+ 700: '#4c51bf',
131
+ 800: '#434190',
132
+ 900: '#3c366b',
133
+ },
134
+ purple: {
135
+ 100: '#faf5ff',
136
+ 200: '#e9d8fd',
137
+ 300: '#d6bcfa',
138
+ 400: '#b794f4',
139
+ 500: '#9f7aea',
140
+ 600: '#805ad5',
141
+ 700: '#6b46c1',
142
+ 800: '#553c9a',
143
+ 900: '#44337a',
144
+ },
145
+ pink: {
146
+ 100: '#fff5f7',
147
+ 200: '#fed7e2',
148
+ 300: '#fbb6ce',
149
+ 400: '#f687b3',
150
+ 500: '#ed64a6',
151
+ 600: '#d53f8c',
152
+ 700: '#b83280',
153
+ 800: '#97266d',
154
+ 900: '#702459',
155
+ },
156
+ /** Add custom PZH colors */
157
+ 'pzh-red': {
158
+ DEFAULT: '#d11f3d',
159
+ light: '#eb7085',
160
+ dark: '#97162c',
161
+ },
162
+ 'pzh-yellow': {
163
+ DEFAULT: '#efcc36',
164
+ light: '#f1db7e',
165
+ dark: '#c6a410',
166
+ },
167
+ 'pzh-blue': {
168
+ DEFAULT: '#281f6b',
169
+ light: '#7badde',
170
+ dark: '#16113b',
171
+ 'super-light': '#ececf3', // Custom
172
+ },
173
+ 'pzh-pink': {
174
+ DEFAULT: '#aa0067',
175
+ light: '#d76aac',
176
+ dark: '#750047',
177
+ },
178
+ 'pzh-orange': {
179
+ DEFAULT: '#ff6b02',
180
+ light: '#fba66a',
181
+ dark: '#b24a00',
182
+ },
183
+ 'pzh-apple-green': {
184
+ DEFAULT: '#76bc21',
185
+ light: '#add57d',
186
+ dark: '#629623',
187
+ },
188
+ 'pzh-green': {
189
+ DEFAULT: '#00804d',
190
+ light: '#61b375',
191
+ dark: '#004d2e',
192
+ },
193
+ 'pzh-purple': {
194
+ DEFAULT: '#503d90',
195
+ light: '#9b99cc',
196
+ dark: '#32265a',
197
+ },
198
+ 'pzh-gray': {
199
+ DEFAULT: '#EBEBEB',
200
+ },
201
+ 'pzh-cool-gray': {
202
+ DEFAULT: '#838383',
203
+ light: '#bfbfbf',
204
+ dark: '#5c5c5c',
205
+ },
206
+ 'pzh-warm-gray': {
207
+ DEFAULT: '#847062',
208
+ light: '#beb1a7',
209
+ dark: '#584b41',
210
+ },
211
+ },
212
+ extend: {
213
+ opacity: {
214
+ 35: '0.35',
215
+ },
216
+ },
217
+ },
218
+ }