Skip to content

Commit b2747b1

Browse files
paulcpedersonpaulcpederson
authored
Merge pull request #2 from Esri/sync-config
Sync config w/ @esri/[email protected]
2 parents f123bbb + d792475 commit b2747b1

File tree

1 file changed

+103
-89
lines changed

1 file changed

+103
-89
lines changed

‎tailwind.config.js

Lines changed: 103 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
var flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default;
1+
// eslint-disable-next-line @typescript-eslint/no-var-requires
2+
var flattenColorPalette = require("tailwindcss/lib/util/flattenColorPalette").default;
23

34
module.exports = {
45
theme: {
5-
borderColor: theme => ({
6+
borderColor: (theme) => ({
67
color: {
78
1: "var(--calcite-ui-border-1)",
89
2: "var(--calcite-ui-border-2)",
@@ -18,16 +19,16 @@ module.exports = {
1819
"color-warning": theme("colors.warning"),
1920
"color-danger": theme("colors.danger"),
2021
"color-danger-hover": theme("colors.danger-hover"),
21-
"color-danger-press": theme("colors.danger-press"),
22+
"color-danger-press": theme("colors.danger-press")
2223
}),
2324
colors: {
24-
"brand": "var(--calcite-ui-brand)",
25+
brand: "var(--calcite-ui-brand)",
2526
"brand-hover": "var(--calcite-ui-brand-hover)",
2627
"brand-press": "var(--calcite-ui-brand-press)",
27-
"info": "var(--calcite-ui-info)",
28-
"success": "var(--calcite-ui-success)",
29-
"warning": "var(--calcite-ui-warning)",
30-
"danger": "var(--calcite-ui-danger)",
28+
info: "var(--calcite-ui-info)",
29+
success: "var(--calcite-ui-success)",
30+
warning: "var(--calcite-ui-warning)",
31+
danger: "var(--calcite-ui-danger)",
3132
"danger-hover": "var(--calcite-ui-danger-hover)",
3233
"danger-press": "var(--calcite-ui-danger-press)",
3334
background: {
@@ -36,7 +37,7 @@ module.exports = {
3637
1: "var(--calcite-ui-foreground-1)",
3738
2: "var(--calcite-ui-foreground-2)",
3839
3: "var(--calcite-ui-foreground-3)"
39-
},
40+
}
4041
},
4142
text: {
4243
1: "var(--calcite-ui-text-1)",
@@ -55,78 +56,81 @@ module.exports = {
5556
},
5657
fontSize: {
5758
// assets/styles/_type
58-
"-3": "var(--calcite-font-size--3)", // 10px
59-
"-2": "var(--calcite-font-size--2)", // 12px
60-
"-1": "var(--calcite-font-size--1)", // 14px
61-
0: "var(--calcite-font-size-0)", // 16px
62-
1: "var(--calcite-font-size-1)", // 18px
63-
2: "var(--calcite-font-size-2)", // 20px
64-
3: "var(--calcite-font-size-3)", // 26px
65-
4: "var(--calcite-font-size-4)", // 32px
66-
5: "var(--calcite-font-size-5)", // 40px
67-
6: "var(--calcite-font-size-6)", // 48px
68-
7: "var(--calcite-font-size-7)", // 56px
69-
8: "var(--calcite-font-size-8)", // 64px
70-
"-3h": [ "var(--calcite-font-size--3)", { lineHeight: '0.75rem' } ], // 10px (0.625rem)
71-
"-2h": [ "var(--calcite-font-size--2)", { lineHeight: '1rem' } ], // 12px (0.75rem)
72-
"-1h": [ "var(--calcite-font-size--1)", { lineHeight: '1rem' } ], // 14px (0.875rem)
73-
"0h": [ "var(--calcite-font-size-0)", { lineHeight: '1.25rem' } ], // 16px (1rem)
74-
"1h": [ "var(--calcite-font-size-1)", { lineHeight: '1.5rem' } ], // 18px (1.125rem)
75-
"2h": [ "var(--calcite-font-size-2)", { lineHeight: '1.5rem' } ], // 20px (1.25rem)
76-
"3h": [ "var(--calcite-font-size-3)", { lineHeight: '2rem' } ], // 26px (1.625rem)
77-
"4h": [ "var(--calcite-font-size-4)", { lineHeight: '2.5rem' } ], // 32px (2rem)
78-
"5h": [ "var(--calcite-font-size-5)", { lineHeight: '3rem' } ], // 40px (2.5rem)
79-
"6h": [ "var(--calcite-font-size-6)", { lineHeight: '4rem' } ], // 48px (3rem)
80-
"7h": [ "var(--calcite-font-size-7)", { lineHeight: '4rem' } ], // 56px (3.5rem)
81-
"8h": [ "var(--calcite-font-size-8)", { lineHeight: '5rem' } ], // 64px (4rem)
82-
"-3-wrap": [ "var(--calcite-font-size--3)", { lineHeight: '1.375' } ],
83-
"-2-wrap": [ "var(--calcite-font-size--2)", { lineHeight: '1.375' } ],
84-
"-1-wrap": [ "var(--calcite-font-size--1)", { lineHeight: '1.375' } ],
85-
"0-wrap": [ "var(--calcite-font-size-0)", { lineHeight: '1.375' } ],
86-
"1-wrap": [ "var(--calcite-font-size-1)", { lineHeight: '1.375' } ],
87-
"2-wrap": [ "var(--calcite-font-size-2)", { lineHeight: '1.375' } ],
88-
"3-wrap": [ "var(--calcite-font-size-3)", { lineHeight: '1.25' } ],
89-
"4-wrap": [ "var(--calcite-font-size-4)", { lineHeight: '1.25' } ],
90-
"5-wrap": [ "var(--calcite-font-size-5)", { lineHeight: '1.25' } ],
91-
"6-wrap": [ "var(--calcite-font-size-6)", { lineHeight: '1.25' } ],
92-
"7-wrap": [ "var(--calcite-font-size-7)", { lineHeight: '1.25' } ],
93-
"8-wrap": [ "var(--calcite-font-size-8)", { lineHeight: '1.25' } ],
59+
"-3": "var(--calcite-font-size--3)", // 10px
60+
"-2": "var(--calcite-font-size--2)", // 12px
61+
"-1": "var(--calcite-font-size--1)", // 14px
62+
0: "var(--calcite-font-size-0)", // 16px
63+
1: "var(--calcite-font-size-1)", // 18px
64+
2: "var(--calcite-font-size-2)", // 20px
65+
3: "var(--calcite-font-size-3)", // 26px
66+
4: "var(--calcite-font-size-4)", // 32px
67+
5: "var(--calcite-font-size-5)", // 40px
68+
6: "var(--calcite-font-size-6)", // 48px
69+
7: "var(--calcite-font-size-7)", // 56px
70+
8: "var(--calcite-font-size-8)", // 64px
71+
// TODO: temp selectors to be renamed before closing https://github.com/Esri/calcite-components/issues/1500.
72+
// at this point all existing instances of text-N should be replaced with either text-Nh or text-N-wrap and we
73+
// should be able to safely drop the "h" suffix.
74+
"-3h": ["var(--calcite-font-size--3)", { lineHeight: "0.75rem" }], // 10px (0.625rem)
75+
"-2h": ["var(--calcite-font-size--2)", { lineHeight: "1rem" }], // 12px (0.75rem)
76+
"-1h": ["var(--calcite-font-size--1)", { lineHeight: "1rem" }], // 14px (0.875rem)
77+
"0h": ["var(--calcite-font-size-0)", { lineHeight: "1.25rem" }], // 16px (1rem)
78+
"1h": ["var(--calcite-font-size-1)", { lineHeight: "1.5rem" }], // 18px (1.125rem)
79+
"2h": ["var(--calcite-font-size-2)", { lineHeight: "1.5rem" }], // 20px (1.25rem)
80+
"3h": ["var(--calcite-font-size-3)", { lineHeight: "2rem" }], // 26px (1.625rem)
81+
"4h": ["var(--calcite-font-size-4)", { lineHeight: "2.5rem" }], // 32px (2rem)
82+
"5h": ["var(--calcite-font-size-5)", { lineHeight: "3rem" }], // 40px (2.5rem)
83+
"6h": ["var(--calcite-font-size-6)", { lineHeight: "4rem" }], // 48px (3rem)
84+
"7h": ["var(--calcite-font-size-7)", { lineHeight: "4rem" }], // 56px (3.5rem)
85+
"8h": ["var(--calcite-font-size-8)", { lineHeight: "5rem" }], // 64px (4rem)
86+
"-3-wrap": ["var(--calcite-font-size--3)", { lineHeight: "1.375" }],
87+
"-2-wrap": ["var(--calcite-font-size--2)", { lineHeight: "1.375" }],
88+
"-1-wrap": ["var(--calcite-font-size--1)", { lineHeight: "1.375" }],
89+
"0-wrap": ["var(--calcite-font-size-0)", { lineHeight: "1.375" }],
90+
"1-wrap": ["var(--calcite-font-size-1)", { lineHeight: "1.375" }],
91+
"2-wrap": ["var(--calcite-font-size-2)", { lineHeight: "1.375" }],
92+
"3-wrap": ["var(--calcite-font-size-3)", { lineHeight: "1.25" }],
93+
"4-wrap": ["var(--calcite-font-size-4)", { lineHeight: "1.25" }],
94+
"5-wrap": ["var(--calcite-font-size-5)", { lineHeight: "1.25" }],
95+
"6-wrap": ["var(--calcite-font-size-6)", { lineHeight: "1.25" }],
96+
"7-wrap": ["var(--calcite-font-size-7)", { lineHeight: "1.25" }],
97+
"8-wrap": ["var(--calcite-font-size-8)", { lineHeight: "1.25" }]
9498
},
9599
fontWeight: {
100+
// assets/styles/_type
96101
light: "var(--calcite-font-weight-light)",
97102
normal: "var(--calcite-font-weight-normal)",
98103
medium: "var(--calcite-font-weight-medium)",
99104
bold: "var(--calcite-font-weight-bold)"
100105
},
101106
screens: {
102-
's': '480px',
103-
'm': '864px',
104-
'l': '1024px',
105-
'xl': '1440px'
107+
s: "480px",
108+
m: "864px",
109+
l: "1024px",
110+
xl: "1440px"
106111
},
107-
textColor: theme => ({
112+
textColor: (theme) => ({
108113
color: theme("colors.text")
109114
}),
110-
backgroundColor: theme => ({
115+
backgroundColor: (theme) => ({
111116
...theme("colors.background"),
112117
transparent: theme("colors.transparent"),
113118
brand: theme("colors.brand"),
114119
"brand-hover": theme("colors.brand-hover"),
115120
"brand-press": theme("colors.brand-press"),
116-
"brand": theme("colors.brand"),
117-
"info": theme("colors.info"),
118-
"success": theme("colors.success"),
119-
"warning": theme("colors.warning"),
120-
"danger": theme("colors.danger"),
121+
info: theme("colors.info"),
122+
success: theme("colors.success"),
123+
warning: theme("colors.warning"),
124+
danger: theme("colors.danger"),
121125
"danger-hover": theme("colors.danger-hover"),
122-
"danger-press": theme("colors.danger-press"),
126+
"danger-press": theme("colors.danger-press")
123127
}),
124128
extend: {
125129
animation: {
126-
"in": "in 300ms ease-in-out",
127-
"in-down": "in-down 300ms ease-in-out",
128-
"in-up": "in-up 300ms ease-in-out",
129-
"in-scale": "in-scale 300ms linear"
130+
in: "in var(--calcite-animation-timing) ease-in-out",
131+
"in-down": "in-down var(--calcite-animation-timing) ease-in-out",
132+
"in-up": "in-up var(--calcite-animation-timing) ease-in-out",
133+
"in-scale": "in-scale var(--calcite-animation-timing) linear"
130134
},
131135
borderRadius: {
132136
half: "50%"
@@ -139,15 +143,15 @@ module.exports = {
139143
2: "0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08)",
140144
"2-lg": "0 12px 32px -2px rgba(0, 0, 0, 0.1), 0 4px 20px 0 rgba(0, 0, 0, 0.08)",
141145
"2-sm": "0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16)",
142-
'border-bottom': '0 1px 0 var(--calcite-ui-border-3)',
143-
'outline-active': '0 0 0 1px var(--calcite-ui-brand)',
144-
'none': 'none',
146+
"border-bottom": "0 1px 0 var(--calcite-ui-border-3)",
147+
"outline-active": "0 0 0 1px var(--calcite-ui-brand)",
148+
none: "none"
145149
},
146-
fill: theme => ({
150+
fill: (theme) => ({
147151
color: theme("colors.text")
148152
}),
149153
keyframes: {
150-
"in": {
154+
in: {
151155
"0%": {
152156
opacity: 0
153157
},
@@ -187,12 +191,14 @@ module.exports = {
187191
}
188192
},
189193
opacity: {
190-
disabled: "0.5"
194+
disabled: "var(--calcite-ui-opacity-disabled)"
191195
},
192196
spacing: {
193-
"0.5": "0.125rem",
194-
"2.5": "0.625rem",
195-
"3.5": "0.875rem"
197+
0.5: "0.125rem",
198+
2.5: "0.625rem",
199+
3.5: "0.875rem",
200+
9: "2.25rem",
201+
11: "2.75rem"
196202
},
197203
transitionProperty: {
198204
margin: "margin",
@@ -213,14 +219,22 @@ module.exports = {
213219
".focus-base": {
214220
"outline-offset": 0,
215221
"outline-color": "transparent",
216-
"transition": "outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out"
222+
transition: "outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out"
217223
},
218224
".focus-outset": {
219-
"outline": "2px solid var(--calcite-ui-brand)",
225+
outline: "2px solid var(--calcite-ui-brand)",
220226
"outline-offset": "2px"
221227
},
222228
".focus-inset": {
223-
"outline": "2px solid var(--calcite-ui-brand)",
229+
outline: "2px solid var(--calcite-ui-brand)",
230+
"outline-offset": "-2px"
231+
},
232+
".focus-outset-danger": {
233+
outline: "2px solid var(--calcite-ui-danger)",
234+
"outline-offset": "2px"
235+
},
236+
".focus-inset-danger": {
237+
outline: "2px solid var(--calcite-ui-danger)",
224238
"outline-offset": "-2px"
225239
},
226240
".transition-default": {
@@ -229,29 +243,29 @@ module.exports = {
229243
"transition-timing-function": "ease-in-out",
230244
"transition-delay": "0s"
231245
}
232-
}
246+
};
233247
addUtilities(newUtilities);
234248
},
235-
({ addUtilities, e, theme, variants }) => {
236-
const colors = flattenColorPalette(theme('borderColor'));
237-
delete colors['default'];
249+
({ addUtilities, theme, variants }) => {
250+
const colors = flattenColorPalette(theme("borderColor"));
251+
delete colors["default"];
238252

239-
const colorMap = Object.keys(colors)
240-
.map(color => ({
241-
[`.border-t-${color}`]: {borderTopColor: colors[color]},
242-
[`.border-r-${color}`]: {borderRightColor: colors[color]},
243-
[`.border-b-${color}`]: {borderBottomColor: colors[color]},
244-
[`.border-l-${color}`]: {borderLeftColor: colors[color]},
245-
}));
253+
const colorMap = Object.keys(colors).map((color) => ({
254+
[`.border-t-${color}`]: { borderTopColor: colors[color] },
255+
[`.border-r-${color}`]: { borderRightColor: colors[color] },
256+
[`.border-b-${color}`]: { borderBottomColor: colors[color] },
257+
[`.border-l-${color}`]: { borderLeftColor: colors[color] }
258+
}));
246259
const utilities = Object.assign({}, ...colorMap);
247260

248-
addUtilities(utilities, variants('borderColor'));
249-
},
261+
addUtilities(utilities, variants("borderColor"));
262+
}
250263
],
251264
future: {
252-
removeDeprecatedGapUtilities: true,
265+
removeDeprecatedGapUtilities: true
253266
},
254267
variants: {
255-
boxShadow: ['responsive', 'hover', 'focus', 'active']
268+
boxShadow: ["responsive", "hover", "focus", "active"],
269+
borderWidth: ["responsive", "hover", "focus", "active"]
256270
}
257-
}
271+
};

0 commit comments

Comments
 (0)