testio-tailwind 1.1.0 → 1.1.2

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 (7) hide show
  1. package/package.json +1 -1
  2. package/src/assets/stylesheets/components/buttons.css +1 -1
  3. package/src/assets/stylesheets/components/designsystem/designsystem-styles.css +4 -0
  4. package/src/assets/stylesheets/components/forms.css +5 -2
  5. package/src/assets/stylesheets/tailwind.config.js +20 -7
  6. package/src/pages/buttons/buttons-round.haml +58 -0
  7. package/src/pages/colors.pug +94 -67
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "testio-tailwind",
3
- "version": "1.1.0",
3
+ "version": "1.1.2",
4
4
  "description": "Tailwind based design system for Test IO",
5
5
  "scripts": {
6
6
  "clean": "del dist",
package/src/assets/stylesheets/components/buttons.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .btn,
2
2
  input.btn,
3
3
  input[type="submit"].btn {
4
- @apply inline-flex justify-start items-center h-btn px-md text-buttons whitespace-nowrap text-primary border-0 rounded cursor-pointer select-none;
4
+ @apply inline-flex justify-start items-center h-btn px-md font-body font-semibold text-buttons whitespace-nowrap text-primary border-0 rounded cursor-pointer select-none;
5
5
 
6
6
  &:hover,
7
7
  &:focus,
package/src/assets/stylesheets/components/designsystem/designsystem-styles.css CHANGED
@@ -79,4 +79,8 @@
79
79
 
80
80
  .color-cell {
81
81
  @apply flex flex-col justify-start items-start text-left px-5 py-2.5;
82
+ }
83
+
84
+ .color-cell p {
85
+ @apply first:lowercase last:uppercase;
82
86
  }
package/src/assets/stylesheets/components/forms.css CHANGED
@@ -16,8 +16,7 @@
16
16
  }
17
17
  }
18
18
 
19
- .form-group .form-label,
20
- .form-group .field_with_errors {
19
+ .form-group .form-label {
21
20
  @apply pb-xxs md:pt-sm;
22
21
  }
23
22
 
@@ -46,6 +45,10 @@
46
45
  @apply text-danger;
47
46
  }
48
47
 
48
+ .field_with_errors .form-label {
49
+ @apply inline-block;
50
+ }
51
+
49
52
  .form-hint {
50
53
  @apply flex items-center text-sm mt-xs mb-xs;
51
54
 
package/src/assets/stylesheets/tailwind.config.js CHANGED
@@ -27,20 +27,27 @@ module.exports = {
27
27
  },
28
28
  red: {
29
29
  200: '#FF3131',
30
- 500: '#ec0404'
30
+ 'light': '#FF3131',
31
+ 500: '#ec0404',
32
+ DEFAULT: '#ec0404',
31
33
  },
32
34
  orange: {
33
- 500: '#f48d21'
35
+ 500: '#f48d21',
36
+ DEFAULT: '#f48d21',
34
37
  },
35
38
  green: {
36
39
  500: '#8cbd24',
40
+ DEFAULT: '#8cbd24',
37
41
  },
38
42
  yellow: {
39
- 500: '#d8ce0d'
43
+ 500: '#d8ce0d',
44
+ DEFAULT: '#d8ce0d',
40
45
  },
41
46
  blue: {
42
47
  200: '#21bef4',
43
- 500: '#326dd1'
48
+ 'light': '#21bef4',
49
+ 500: '#326dd1',
50
+ DEFAULT: '#326dd1',
44
51
  },
45
52
  petrol: {
46
53
  500: '#236a84',
@@ -50,15 +57,21 @@ module.exports = {
50
57
  },
51
58
  teal: {
52
59
  300: '#78eac1',
60
+ 'lighter': '#78eac1',
53
61
  400: '#6ddeba',
54
- 500: '#33ba9e'
62
+ 'light': '#6ddeba',
63
+ 500: '#33ba9e',
64
+ DEFAULT: '#33ba9e',
55
65
  },
56
66
  pink: {
57
- 500: '#e83e8c'
67
+ 500: '#e83e8c',
68
+ DEFAULT: '#e83e8c',
58
69
  },
59
70
  purple: {
60
71
  200: '#8988eb',
61
- 500: '#7954ff'
72
+ 'light': '#8988eb',
73
+ 500: '#7954ff',
74
+ DEFAULT: '#7954ff',
62
75
  },
63
76
  },
64
77
  fontFamily: {
package/src/pages/buttons/buttons-round.haml ADDED
@@ -0,0 +1,58 @@
1
+ ---
2
+ title: Round buttons
3
+ tags: button
4
+ ---
5
+
6
+ %ul.list-inline
7
+ %li
8
+ %button.btn.rounded-full.btn-primary Primary
9
+ %li
10
+ %button.btn.rounded-full.btn-primary
11
+ .icon.icon-check-circle-filled.mr-icon-spacing
12
+ Primary
13
+ %li
14
+ %button.btn.rounded-full.btn-secondary Secondary
15
+ %li
16
+ %button.btn.rounded-full.btn-secondary
17
+ .icon.icon-check-circle-filled.mr-icon-spacing
18
+ Secondary
19
+ %li
20
+ %button.btn.rounded-full.btn-success Success
21
+ %li
22
+ %button.btn.rounded-full.btn-success
23
+ .icon.icon-check-circle-filled.mr-icon-spacing
24
+ Success
25
+ %li
26
+ %button.btn.rounded-full.btn-danger Danger
27
+ %li
28
+ %button.btn.rounded-full.btn-danger
29
+ .icon.icon-check-circle-filled.mr-icon-spacing
30
+ Danger
31
+ %li
32
+ %button.btn.rounded-full.btn-warning Warning
33
+ %li
34
+ %button.btn.rounded-full.btn-info Info
35
+ %li
36
+ %button.btn.rounded-full.btn-dashed Dashed
37
+ %li
38
+ %button.btn.rounded-full.btn-link Link
39
+ %li
40
+ %button.btn.rounded-full.btn-ghost Ghost
41
+ %li
42
+ %button.btn.rounded-full{disabled: "disabled"} Disabled
43
+
44
+ .bg-petrol.p-2
45
+ %ul.list-inline
46
+ %li
47
+ %button.btn.rounded-full.btn-primary-inverted primary-inverted
48
+ %li
49
+ %button.btn.rounded-full.btn-inverted inverted
50
+ %li
51
+ %button.btn.rounded-full.btn-secondary-inverted secondary-inverted
52
+ %li
53
+ %button.btn.rounded-full.btn-outline-primary-inverted outline-primary-inverted
54
+ %li
55
+ %button.btn.rounded-full.btn-ghost-inverted Ghost inverted
56
+ %li
57
+ %button.btn.rounded-full.btn-primary-inverted{disabled: "disabled"} disabled
58
+
package/src/pages/colors.pug CHANGED
@@ -9,80 +9,52 @@ main.main-content.main-content-padding
9
9
 
10
10
  .grid.gap-5(class='md:grid-cols-4')
11
11
  .flex.flex-col
12
- .color-cell.bg-appbody
13
- p appbody
14
- p #FFFFFF
15
- .color-cell.bg-primary.text-white
16
- p Primary
17
- p #236a84
18
- .color-cell.bg-link.text-white
19
- p link
20
- p #236a84
21
- .color-cell.bg-link-hover.text-white
22
- p link-hover
23
- p #4860E5
24
- .color-cell.bg-header.text-white
25
- p header
26
- p #1d1d1d
27
- .color-cell.bg-actionbar.text-white
28
- p header
29
- p #236a84
30
- .color-cell.bg-bordercolor
31
- p bordercolor
32
- p #e6e6e6
33
- .color-cell.bg-bordercolor-dark
34
- p bordercolor-dark
35
- p #D4D6DC
36
- .color-cell.bg-success
37
- p success
38
- p #8cbd24
39
- .color-cell.bg-danger
40
- p danger
41
- p #ec0404
42
- .color-cell.bg-disabled
43
- p disabled
44
- p #bfc1c5
45
- .color-cell.bg-disabled-dark
46
- p disabled-dark
47
- p #5f656d
48
- .color-cell.bg-placeholder
49
- p placeholder
50
- p #bfc1c5
51
- .color-cell.bg-info
52
- p info
53
- p #326dd1
54
- .color-cell.bg-label-color
55
- p label-color
56
- p #5f656d
57
- .color-cell.bg-label-inverted-color
58
- p label-inverted-color
59
- p #bfc1c5
60
-
61
- .flex.flex-col
62
- .color-cell.bg-blue-500.text-white
63
- p blue-500
12
+ .color-cell.bg-blue.text-white
13
+ p blue
64
14
  p #4860E5
65
- .color-cell.bg-blue-200.text-white
66
- p blue-200
15
+ .color-cell.bg-blue-light.text-white
16
+ p blue-light
67
17
  p #3F50B4
68
- .color-cell.bg-petrol.text-white
69
- p petrol
70
- p #236a84
18
+ .color-cell.bg-purple.text-white
19
+ p Purple
20
+ p #7954ff
21
+ .color-cell.bg-purple-light.text-white
22
+ p Purple-light
23
+ p #8988eb
71
24
  .color-cell.bg-petrol-dark.text-white
72
25
  p petrol-dark
73
26
  p #263340
74
- .color-cell.bg-red-500.text-white
75
- p red-500
27
+ .color-cell.bg-petrol.text-white
28
+ p petrol
29
+ p #236a84
30
+ .flex.flex-col
31
+ .color-cell.bg-red.text-white
32
+ p red
33
+ p #FD1525
34
+ .color-cell.bg-red-light.text-white
35
+ p red-light
76
36
  p #FD1525
77
- .color-cell.bg-orange-500.text-white
78
- p orange-500
37
+ .color-cell.bg-pink.text-white
38
+ p Pink
39
+ p #AFB42A
40
+ .color-cell.bg-orange.text-white
41
+ p orange
79
42
  p #FF9D00
80
- .color-cell.bg-yellow-500.text-white
81
- p yellow-500
43
+ .color-cell.bg-yellow
44
+ p yellow
82
45
  p #FFCB00
83
- .color-cell.bg-green-500.text-white
84
- p green-500
85
- p #AFB42A
46
+ .color-cell.bg-green
47
+ p green
48
+ p #8cbd24
49
+ .color-cell.bg-teal
50
+ p teal
51
+ p #33ba9e
52
+ .color-cell.bg-teal-light
53
+ p teal-light
54
+ p #6ddeba
55
+ .color-cell.bg-teal-lighter
56
+ p teal-lighter
57
+ p #78eac1
86
58
 
87
59
  .flex.flex-col
88
60
  .color-cell.bg-black.text-white
@@ -110,7 +82,6 @@ main.main-content.main-content-padding
110
82
  p gray-lightest
111
83
  p #f2f2f2
112
84
 
113
-
114
85
  .flex.flex-col
115
86
  .color-cell.bg-gray-900.text-white
116
87
  p gray-900
@@ -139,3 +110,59 @@ main.main-content.main-content-padding
139
110
  .color-cell.bg-gray-100
140
111
  p gray-100
141
112
  p #f2f2f2
113
+
114
+ h2.mb-heading.mt-lg Functional colors
115
+
116
+ .grid.gap-5(class='md:grid-cols-4')
117
+ .flex.flex-col
118
+ .color-cell.bg-primary.text-white
119
+ p Primary
120
+ p #236a84
121
+ .color-cell.bg-link.text-white
122
+ p link
123
+ p #236a84
124
+ .color-cell.bg-link-hover.text-white
125
+ p link-hover
126
+ p #4860E5
127
+ .color-cell.bg-header.text-white
128
+ p header
129
+ p #1d1d1d
130
+ .color-cell.bg-actionbar.text-white
131
+ p Actionbar
132
+ p #236a84
133
+ .color-cell.bg-appbody
134
+ p appbody
135
+ p #FFFFFF
136
+ .flex.flex-col
137
+ .color-cell.bg-bordercolor
138
+ p bordercolor
139
+ p #e6e6e6
140
+ .color-cell.bg-bordercolor-dark
141
+ p bordercolor-dark
142
+ p #D4D6DC
143
+ .color-cell.bg-disabled
144
+ p disabled
145
+ p #bfc1c5
146
+ .color-cell.bg-disabled-dark.text-white
147
+ p disabled-dark
148
+ p #5f656d
149
+ .color-cell.bg-placeholder
150
+ p placeholder
151
+ p #bfc1c5
152
+ .color-cell.bg-label-color.text-white
153
+ p label-color
154
+ p #5f656d
155
+ .color-cell.bg-label-inverted-color
156
+ p label-inverted-color
157
+ p #bfc1c5
158
+ .flex.flex-col
159
+ .color-cell.bg-success
160
+ p success
161
+ p #8cbd24
162
+ .color-cell.bg-danger.text-white
163
+ p danger
164
+ p #ec0404
165
+ .color-cell.bg-info.text-white
166
+ p info
167
+ p #326dd1
168
+