testio-tailwind 1.1.1 → 2.0.0

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 (49) hide show
  1. package/.eleventy.js +2 -5
  2. package/README.md +1 -37
  3. package/icon-classes-extractor.js +3 -3
  4. package/package.json +13 -29
  5. package/src/_includes/head.njk +3 -3
  6. package/src/assets/images/pencil.svg +11 -0
  7. package/src/assets/stylesheets/app.css +94 -69
  8. package/src/assets/stylesheets/components/alerts.css +1 -1
  9. package/src/assets/stylesheets/components/buttons.css +1 -1
  10. package/src/assets/stylesheets/components/cards.css +9 -9
  11. package/src/assets/stylesheets/components/chat.css +9 -6
  12. package/src/assets/stylesheets/components/customer/customer_productcards.css +3 -3
  13. package/src/assets/stylesheets/components/designsystem/designsystem-styles.css +4 -0
  14. package/src/assets/stylesheets/components/devices.css +1 -1
  15. package/src/assets/stylesheets/components/forms.css +3 -10
  16. package/src/assets/stylesheets/components/header.css +1 -2
  17. package/src/assets/stylesheets/components/icons.css +25 -5
  18. package/src/assets/stylesheets/components/list_item.css +1 -2
  19. package/src/assets/stylesheets/components/lists.css +1 -2
  20. package/src/assets/stylesheets/components/loading_spinner.css +61 -79
  21. package/src/assets/stylesheets/components/metasidebar.css +1 -2
  22. package/src/assets/stylesheets/components/notifications.css +1 -1
  23. package/src/assets/stylesheets/components/select.css +1 -1
  24. package/src/assets/stylesheets/components/select2.css +1 -1
  25. package/src/assets/stylesheets/components/splitview.css +6 -6
  26. package/src/assets/stylesheets/components/tables.css +18 -18
  27. package/src/assets/stylesheets/components/tags.css +10 -3
  28. package/src/assets/stylesheets/components/test_header.css +3 -3
  29. package/src/assets/stylesheets/components/tester/tester_cards.css +4 -4
  30. package/src/assets/stylesheets/components/trix_editor.css +3 -3
  31. package/src/assets/stylesheets/components/typography.css +12 -11
  32. package/src/assets/stylesheets/tailwind_config.css +299 -0
  33. package/src/assets/stylesheets/tailwind_custom_utilities.css +268 -0
  34. package/src/index.pug +8 -39
  35. package/src/pages/buttons/buttons-round.haml +58 -0
  36. package/src/pages/colors.pug +94 -67
  37. package/src/pages/components/banner_cards.haml +0 -10
  38. package/src/pages/components/loading_spinner.haml +5 -5
  39. package/src/pages/forms/search.haml +2 -2
  40. package/src/pages/icons/index.njk +35 -2
  41. package/src/static/icons.json +1 -0
  42. package/src/static/site.webmanifest +2 -2
  43. package/src/assets/stylesheets/postcss.config.js +0 -24
  44. package/src/assets/stylesheets/tailwind.config.js +0 -333
  45. /package/src/{static → assets/images}/android-chrome-192x192.png +0 -0
  46. /package/src/{static → assets/images}/android-chrome-512x512.png +0 -0
  47. /package/src/{static → assets/images}/apple-touch-icon.png +0 -0
  48. /package/src/{static → assets/images}/favicon-16x16.png +0 -0
  49. /package/src/{static → assets/images}/favicon-32x32.png +0 -0
@@ -1,333 +0,0 @@
1
- module.exports = {
2
- theme: {
3
- colors: {
4
- transparent: 'transparent',
5
- current: 'currentColor',
6
-
7
- black: '#1d1d1d',
8
- white: '#fff',
9
-
10
- gray: {
11
- 100: '#f2f2f2',
12
- 200: '#e6e6e6',
13
- 300: '#bfc1c5',
14
- 400: '#9fa2a8',
15
- 500: '#7c8188',
16
- 600: '#5f656d',
17
- 700: '#343A40',
18
- 800: '#262626',
19
- 900: '#222222',
20
- 'lightest': '#f2f2f2',
21
- 'lighter': '#e6e6e6',
22
- 'light': '#bfc1c5',
23
- DEFAULT: '#9fa2a8',
24
- 'dark': '#7c8188',
25
- 'darker': '#5f656d',
26
- 'darkest': '#262626',
27
- },
28
- red: {
29
- 200: '#FF3131',
30
- 500: '#ec0404'
31
- },
32
- orange: {
33
- 500: '#f48d21'
34
- },
35
- green: {
36
- 500: '#8cbd24',
37
- },
38
- yellow: {
39
- 500: '#d8ce0d'
40
- },
41
- blue: {
42
- 200: '#21bef4',
43
- 500: '#326dd1'
44
- },
45
- petrol: {
46
- 500: '#236a84',
47
- DEFAULT: '#236a84',
48
- 800: '#263340',
49
- 'dark': '#263340',
50
- },
51
- teal: {
52
- 300: '#78eac1',
53
- 400: '#6ddeba',
54
- 500: '#33ba9e'
55
- },
56
- pink: {
57
- 500: '#e83e8c'
58
- },
59
- purple: {
60
- 200: '#8988eb',
61
- 500: '#7954ff'
62
- },
63
- },
64
- fontFamily: {
65
- 'sans': ['Source Sans Pro', 'sans-serif'],
66
- 'serif': ['Source Sans Pro', 'sans-serif'],
67
- 'mono': ['Source Code Pro', 'monospace'],
68
- 'display': ['Source Sans Pro', 'sans-serif'],
69
- 'body': ['Source Sans Pro', 'sans-serif']
70
- },
71
- borderWidth: {
72
- DEFAULT: '1px',
73
- '0': '0px',
74
- '1': '1px',
75
- '2': '2px',
76
- '4': '4px',
77
- '6': '6px',
78
- '10': '10px',
79
- },
80
- extend: {
81
- colors: {
82
- 'appbody': '#FFFFFF',
83
- 'black': '#1d1d1d',
84
- 'primary': '#236a84',
85
- 'link': '#236a84',
86
- 'link-hover': '#21bef4',
87
- 'header': '#1d1d1d',
88
- 'actionbar': '#236a84',
89
- 'bordercolor': '#e6e6e6',
90
- 'bordercolor-dark': '#D4D6DC',
91
- 'success': '#8cbd24',
92
- 'danger': '#ec0404',
93
- 'disabled': '#bfc1c5',
94
- 'disabled-dark': '#5f656d',
95
- 'placeholder': '#bfc1c5',
96
- 'info': '#326dd1',
97
- 'label-color': '#5f656d',
98
- 'label-inverted-color': '#bfc1c5',
99
- 'dark': '#222222',
100
- 'card': '#e6e6e6',
101
- 'critical': '#ec0404',
102
- 'high': '#d8ce0d',
103
- 'low': '#9fa2a8',
104
- 'visual': '#f48d21',
105
- 'content': '#326dd1',
106
- 'usability': '#263340',
107
- 'color-product-website': '#236a84',
108
- 'color-product-apple': '#326dd1',
109
- 'color-product-android': '#8cbd24',
110
- 'color-product-streaming': '#FF3131',
111
- 'color-product-gaming': '#f48d21',
112
- 'color-product-windows': '#d8ce0d',
113
- 'navigation-customer-color': '#262626',
114
- 'navlink-customer-hover-color': '#78eac1',
115
- 'navlink-customer-hover-bg': '#343A40',
116
- 'navlink-customer-active-bg': '#78eac1',
117
- 'navigation-tester-color': '#1d1d1d',
118
- 'navlink-tester-hover-color': '#7954ff',
119
- 'navlink-tester-hover-bg': '#343A40',
120
- 'navlink-tester-active-bg': '#7954ff',
121
- 'navigation-manager-color': '#ffffff',
122
- 'navlink-manager-hover-color': '#222222',
123
- 'navlink-manager-hover-bg': '#e6e6e6',
124
- 'navlink-manager-active-bg': '#6ddeba',
125
-
126
- },
127
- fontSize: {
128
- 'heading-1': ['2.25rem', '2.25rem'],
129
- 'heading-2': ['1.875rem', '1.875rem'],
130
- 'heading-3': ['1.563rem', '1.563rem'],
131
- 'heading-4': ['1.375rem', '1.375rem'],
132
- 'heading-5': ['1.125rem', '1.125rem'],
133
- 'heading-6': ['1rem', '1rem'],
134
- 'navlinks': ['14px', '16px'],
135
- 'base': ['14px', '18px'],
136
- 'buttons': ['14px', '16px'],
137
- 'label': ['13px', '13px'],
138
- 'label-sm': ['12px', '12px'],
139
- 'icon': '20px',
140
- 'icon-lg': '40px',
141
- 'icon-xl': '60px',
142
- 'icon-sm': '18px',
143
- 'icon-xs': '16px',
144
- 'icon-xxs': '14px',
145
- 'icon-xxxs': '10px',
146
- 'xl': ['4.25rem', '4.25rem'],
147
- 'lg': ['1.25rem', '1.25rem'],
148
- 'sm': ['0.813rem', '0.813rem'],
149
- 'xs': ['11px', '11px'],
150
- 'xxs': ['10px', '10px'],
151
- 'display-1': ['3.25rem','3.25rem'],
152
- 'display-2': ['3rem','3rem'],
153
- 'display-3': ['2.75rem','2.75rem'],
154
- 'display-4': ['2.5rem','2.5rem'],
155
- 'hidden': ['0rem','0rem'],
156
- },
157
- fontWeight: {
158
- 'headings': ['300'],
159
- 'navlinks': ['600'],
160
- 'display': ['300']
161
- },
162
- borderRadius: {
163
- DEFAULT: '5px',
164
- 'default': '0.3rem'
165
- },
166
- spacing: {
167
- 'spacing': '30px',
168
- 'xxs': '5px',
169
- 'xs': '10px',
170
- 'sm': '15px',
171
- 'md': '20px',
172
- 'lg': '50px',
173
- 'xl': '60px',
174
- 'xxl': '90px',
175
- 'spacing-2xl': '120px',
176
- 'spacing-3xl': '180px',
177
- 'spacing-4xl': '240px',
178
- 'spacing-5xl': '300px',
179
- 'spacing-6xl': '360px',
180
- 'spacing-7xl': '420px',
181
- 'spacing-8xl': '480px',
182
- 'btn': '40px',
183
- 'btn-xs': '20px',
184
- 'btn-sm': '30px',
185
- 'btn-lg': '90px',
186
- 'btn-xl': '150px',
187
- 'header' : '50px',
188
- 'icon' : '20px',
189
- 'icon-lg' : '40px',
190
- 'icon-xl' : '60px',
191
- 'icon-sm' : '18px',
192
- 'icon-xs' : '16px',
193
- 'icon-xxs' : '14px',
194
- 'icon-spacing' : '8px',
195
- 'heading' : '1rem',
196
- 'heading-lg' : '2rem',
197
- 'section-margin' : '30px',
198
- 'actionbar' : '70px',
199
- 'aside' : '20rem',
200
- 'sidebar' : '200px',
201
- 'grid-gutter' : '20px',
202
- '13': '3.25rem',
203
- '30': '7.25rem',
204
- '144': '36rem',
205
- '192': '48rem',
206
- '240': '60rem',
207
- 'body-padding-mobile': '15px',
208
- 'body-padding-tablet': '30px',
209
- 'body-padding-desktop': '50px',
210
- 'card-lg': '380px',
211
- 'card-md': '280px',
212
- 'card-sm': '180px',
213
- 'card-xs': '80px',
214
- '1px': '1px',
215
- 'modal-lg': '1200px',
216
- 'modal-md': '700px',
217
- 'modal-sm': '400px',
218
- 'progress-bar-thin-height': '2px',
219
- 'progress-bar-thick-height': '10px',
220
- 'meta-sidebar-width': '350px',
221
- 'popover-width': '15rem'
222
- },
223
- minWidth: {
224
- 'auto': 'auto',
225
- 'btn': '40px',
226
- 'btn-sm': '30px',
227
- 'cell': '10rem',
228
- '6': '1.5rem',
229
- '9': '2.25rem',
230
- '11': '2.75rem',
231
- '12': '3rem',
232
- '24': '6rem',
233
- '30': '7.25rem',
234
- '36': '9rem',
235
- '56': '14rem',
236
- 'spacing': '30px',
237
- 'xxs': '5px',
238
- 'xs': '10px',
239
- 'sm': '15px',
240
- 'md': '20px',
241
- 'lg': '50px',
242
- 'xl': '60px',
243
- 'xxl': '90px',
244
- 'spacing-2xl': '150px',
245
- 'spacing-3xl': '180px',
246
- 'spacing-4xl': '240px',
247
- 'spacing-5xl': '300px',
248
- 'spacing-6xl': '360px',
249
- 'spacing-7xl': '420px',
250
- 'spacing-8xl': '480px'
251
- },
252
- minHeight: {
253
- 'auto': 'auto',
254
- 'btn': '40px',
255
- 'btn-sm': '30px',
256
- '8': '2rem',
257
- '11': '2.75rem',
258
- '12': '3rem',
259
- '16': '4rem',
260
- '22': '5.5rem',
261
- '24': '6rem',
262
- '30': '7.25rem',
263
- '32': '8rem',
264
- '48': '12rem',
265
- '96': '24rem',
266
- '144': '36rem',
267
- 'spacing': '30px',
268
- 'xxs': '5px',
269
- 'xs': '10px',
270
- 'sm': '15px',
271
- 'md': '20px',
272
- 'lg': '50px',
273
- 'xl': '60px',
274
- 'xxl': '90px',
275
- },
276
- maxWidth: {
277
- '1/2': '50%',
278
- '2/3': '66%',
279
- '8': '2rem',
280
- '32': '8rem',
281
- '44': '11rem',
282
- '48': '12rem',
283
- '96': '24rem',
284
- '144': '36rem',
285
- '192': '48rem',
286
- 'xxl': '90px',
287
- 'card-lg': '380px',
288
- 'card-md': '280px',
289
- 'card-sm': '180px',
290
- 'card-xs': '80px',
291
- 'capped': '700px',
292
- },
293
- boxShadow: {
294
- DEFAULT: '0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 0px 0px 0 rgba(0, 0, 0, 0.05)',
295
- },
296
- backgroundImage: theme => ({
297
- 'pattern-disabled-bright': "url('/assets/images/pattern-striped-bright.png')",
298
- 'pattern-disabled-dark': "url('/assets/images/pattern-striped-dark.png')"
299
- }),
300
- gridTemplateColumns: {
301
- '3-1': '3fr 1fr',
302
- '1-3': '1fr 3fr',
303
- 'max-auto': 'max-content auto',
304
- '4-auto': 'auto auto auto auto',
305
- '3-auto': 'auto auto auto',
306
- '2-auto': 'auto auto',
307
- '2-auto-fr': 'auto auto 1fr',
308
- 'auto-fr-auto': 'auto 1fr auto',
309
- 'auto-fr-2-auto': 'auto 1fr auto auto',
310
- 'auto-fr': 'auto 1fr',
311
- 'auto': 'auto',
312
- '14': 'repeat(14, minmax(0, 1fr))',
313
- },
314
- gridTemplateRows: {
315
- 'auto': 'auto',
316
- 'auto-auto': 'auto auto',
317
- },
318
- screens: {
319
- '3xl': '1930px',
320
- },
321
- lineHeight: {
322
- 'ultratight': '0.5',
323
- },
324
- outline: {
325
- 'link-hover': '2px solid #21bef4',
326
- }
327
- }
328
- },
329
- plugins: [
330
- require('@tailwindcss/forms'),
331
- require('@tailwindcss/typography'),
332
- ]
333
- }
File without changes
File without changes