@toptal/picasso-tailwind 2.4.0 → 2.5.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.
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso-tailwind",
3
- "version": "2.4.0",
3
+ "version": "2.5.0",
4
4
  "description": "Picasso Tailwind configuration",
5
5
  "author": "Toptal",
6
6
  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-tailwind#readme",
@@ -31,11 +31,15 @@ module.exports = {
31
31
  12: '3rem',
32
32
  },
33
33
  borderRadius: {
34
+ none: '0px',
34
35
  sm: '4px',
35
36
  md: '8px',
37
+ // to support fully rounded corners, use the same approach as TailwindCSS proposes
38
+ full: '9999px',
36
39
  },
37
40
  borderWidth: {
38
41
  DEFAULT: '1px',
42
+ 0: '0px',
39
43
  },
40
44
  fontFamily: {
41
45
  sans: ['proxima-nova', 'Arial', 'sans-serif'],
@@ -66,6 +70,9 @@ module.exports = {
66
70
  xl: ['1.25rem', { lineHeight: '1.875rem' }],
67
71
  '2xl': ['1.75rem', { lineHeight: '2.625rem' }],
68
72
  xxl: ['1.75rem', { lineHeight: '2.625rem' }],
73
+ 'button-small': ['12px', { lineHeight: '15px' }],
74
+ 'button-medium': ['13px', { lineHeight: '16px' }],
75
+ 'button-large': ['15px', { lineHeight: '18px' }],
69
76
  },
70
77
  // TODO: [FX-5003] Deprecate legacy shadow classes
71
78
  // Shadows 0-5 correspond to BASE design https://www.figma.com/file/9xnyixadrhlHe9UuXBMRlT/Foundations?type=design&node-id=22%3A21&mode=design&t=8d8TKUUuHKWosUtX-1
@@ -110,6 +117,7 @@ module.exports = {
110
117
  colors: {
111
118
  white: '#FFFFFF',
112
119
  black: '#000000',
120
+ transparent: 'transparent',
113
121
  blue: {
114
122
  100: '#EDF1FD',
115
123
  400: '#25A9EF',
@@ -163,8 +171,18 @@ module.exports = {
163
171
  padding: {
164
172
  input: '0.5rem',
165
173
  },
174
+ transitionDuration: {
175
+ 350: '350ms',
176
+ },
177
+ minWidth: ({ theme }) => ({
178
+ ...theme('spacing'),
179
+ 14: '3.5rem',
180
+ 16: '4rem',
181
+ 24: '6rem',
182
+ }),
166
183
  // Needed to support all possible grid item widths in 12-columns grid
167
- maxWidth: {
184
+ maxWidth: ({ theme }) => ({
185
+ ...theme('spacing'),
168
186
  '1/12': '8.333333%',
169
187
  '2/12': '16.666667%',
170
188
  '3/12': '25%',
@@ -176,7 +194,13 @@ module.exports = {
176
194
  '9/12': '75%',
177
195
  '10/12': '83.333333%',
178
196
  '11/12': '91.666667%',
179
- },
197
+ }),
198
+ minHeight: ({ theme }) => ({
199
+ ...theme('spacing'),
200
+ }),
201
+ maxHeight: ({ theme }) => ({
202
+ ...theme('spacing'),
203
+ }),
180
204
  },
181
205
  },
182
206
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso-tailwind",
3
- "version": "2.4.0",
3
+ "version": "2.5.0",
4
4
  "description": "Picasso Tailwind configuration",
5
5
  "author": "Toptal",
6
6
  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-tailwind#readme",
package/src/index.js CHANGED
@@ -31,11 +31,15 @@ module.exports = {
31
31
  12: '3rem',
32
32
  },
33
33
  borderRadius: {
34
+ none: '0px',
34
35
  sm: '4px',
35
36
  md: '8px',
37
+ // to support fully rounded corners, use the same approach as TailwindCSS proposes
38
+ full: '9999px',
36
39
  },
37
40
  borderWidth: {
38
41
  DEFAULT: '1px',
42
+ 0: '0px',
39
43
  },
40
44
  fontFamily: {
41
45
  sans: ['proxima-nova', 'Arial', 'sans-serif'],
@@ -66,6 +70,9 @@ module.exports = {
66
70
  xl: ['1.25rem', { lineHeight: '1.875rem' }],
67
71
  '2xl': ['1.75rem', { lineHeight: '2.625rem' }],
68
72
  xxl: ['1.75rem', { lineHeight: '2.625rem' }],
73
+ 'button-small': ['12px', { lineHeight: '15px' }],
74
+ 'button-medium': ['13px', { lineHeight: '16px' }],
75
+ 'button-large': ['15px', { lineHeight: '18px' }],
69
76
  },
70
77
  // TODO: [FX-5003] Deprecate legacy shadow classes
71
78
  // Shadows 0-5 correspond to BASE design https://www.figma.com/file/9xnyixadrhlHe9UuXBMRlT/Foundations?type=design&node-id=22%3A21&mode=design&t=8d8TKUUuHKWosUtX-1
@@ -110,6 +117,7 @@ module.exports = {
110
117
  colors: {
111
118
  white: '#FFFFFF',
112
119
  black: '#000000',
120
+ transparent: 'transparent',
113
121
  blue: {
114
122
  100: '#EDF1FD',
115
123
  400: '#25A9EF',
@@ -163,8 +171,18 @@ module.exports = {
163
171
  padding: {
164
172
  input: '0.5rem',
165
173
  },
174
+ transitionDuration: {
175
+ 350: '350ms',
176
+ },
177
+ minWidth: ({ theme }) => ({
178
+ ...theme('spacing'),
179
+ 14: '3.5rem',
180
+ 16: '4rem',
181
+ 24: '6rem',
182
+ }),
166
183
  // Needed to support all possible grid item widths in 12-columns grid
167
- maxWidth: {
184
+ maxWidth: ({ theme }) => ({
185
+ ...theme('spacing'),
168
186
  '1/12': '8.333333%',
169
187
  '2/12': '16.666667%',
170
188
  '3/12': '25%',
@@ -176,7 +194,13 @@ module.exports = {
176
194
  '9/12': '75%',
177
195
  '10/12': '83.333333%',
178
196
  '11/12': '91.666667%',
179
- },
197
+ }),
198
+ minHeight: ({ theme }) => ({
199
+ ...theme('spacing'),
200
+ }),
201
+ maxHeight: ({ theme }) => ({
202
+ ...theme('spacing'),
203
+ }),
180
204
  },
181
205
  },
182
206
  }