@beeq/tailwindcss 1.8.0-beta.9 → 1.8.1

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.
package/index.cjs.js CHANGED
@@ -53,6 +53,60 @@ const ColorMix = plugin(function ({
53
53
  }, {
54
54
  values: flattenColorPalette$1(theme('colors'))
55
55
  });
56
+ matchUtilities({
57
+ 'bg-hover': value => blendColor({
58
+ color: value,
59
+ base: 'var(--bq-hover)'
60
+ }),
61
+ 'bg-active': value => blendColor({
62
+ color: value,
63
+ base: 'var(--bq-active)'
64
+ })
65
+ }, {
66
+ values: flattenColorPalette$1(theme('backgroundColor'))
67
+ });
68
+ matchUtilities({
69
+ 'border-hover': value => blendColor({
70
+ color: value,
71
+ base: 'var(--bq-hover)',
72
+ property: 'border-color'
73
+ }),
74
+ 'border-active': value => blendColor({
75
+ color: value,
76
+ base: 'var(--bq-active)',
77
+ property: 'border-color'
78
+ })
79
+ }, {
80
+ values: flattenColorPalette$1(theme('borderColor'))
81
+ });
82
+ matchUtilities({
83
+ 'text-hover': value => blendColor({
84
+ color: value,
85
+ base: 'var(--bq-hover)',
86
+ property: 'color'
87
+ }),
88
+ 'text-active': value => blendColor({
89
+ color: value,
90
+ base: 'var(--bq-active)',
91
+ property: 'color'
92
+ })
93
+ }, {
94
+ values: flattenColorPalette$1(theme('textColor'))
95
+ });
96
+ matchUtilities({
97
+ 'stroke-hover': value => blendColor({
98
+ color: value,
99
+ base: 'var(--bq-hover)',
100
+ property: 'color'
101
+ }),
102
+ 'stroke-active': value => blendColor({
103
+ color: value,
104
+ base: 'var(--bq-active)',
105
+ property: 'color'
106
+ })
107
+ }, {
108
+ values: flattenColorPalette$1(theme('stroke'))
109
+ });
56
110
  });
57
111
 
58
112
  const {
@@ -1198,13 +1252,24 @@ const TYPOGRAPHY_DEFAULT = {
1198
1252
  }
1199
1253
  };
1200
1254
 
1255
+ const inherit = 'inherit';
1201
1256
  var index = {
1202
1257
  theme: {
1203
1258
  colors: {
1259
+ inherit,
1204
1260
  current: 'currentColor',
1205
1261
  transparent: 'transparent',
1206
- ...DECLARATIVE_COLORS,
1207
- ...PRIMITIVE_COLORS
1262
+ ...PRIMITIVE_COLORS,
1263
+ focus: DECLARATIVE_COLORS.focus,
1264
+ data: {
1265
+ ...DECLARATIVE_COLORS.data
1266
+ },
1267
+ icon: {
1268
+ ...DECLARATIVE_COLORS.icon
1269
+ },
1270
+ ui: {
1271
+ ...DECLARATIVE_COLORS.ui
1272
+ }
1208
1273
  },
1209
1274
  borderRadius: {
1210
1275
  none: 'var(--bq-radius--none)',
@@ -1228,6 +1293,7 @@ var index = {
1228
1293
  l: 'var(--bq-box-shadow--l)'
1229
1294
  },
1230
1295
  fontFamily: {
1296
+ inherit,
1231
1297
  default: 'var(--bq-font-family)',
1232
1298
  outfit: 'var(--bq-font-family--outfit)',
1233
1299
  poppins: 'var(--bq-font-family--poppins)'
@@ -1253,23 +1319,44 @@ var index = {
1253
1319
  bold: 'var(--bq-font-weight--bold)'
1254
1320
  },
1255
1321
  lineHeight: {
1322
+ inherit,
1256
1323
  small: 'var(--bq-font-line-height--small)',
1257
1324
  regular: 'var(--bq-font-line-height--regular)',
1258
1325
  large: 'var(--bq-font-line-height--large)'
1259
1326
  },
1260
1327
  strokeWidth: {
1328
+ inherit,
1261
1329
  none: '0',
1262
1330
  s: 'var(--bq-stroke-s)',
1263
1331
  m: 'var(--bq-stroke-m)',
1264
1332
  l: 'var(--bq-stroke-l)'
1265
1333
  },
1266
1334
  extend: {
1267
- height: {
1268
- 'dynamic-vh': '100dvh'
1335
+ backgroundColor: {
1336
+ ...DECLARATIVE_COLORS.bg
1337
+ },
1338
+ borderColor: {
1339
+ ...DECLARATIVE_COLORS.stroke
1340
+ },
1341
+ stroke: {
1342
+ ...DECLARATIVE_COLORS.stroke
1343
+ },
1344
+ textColor: {
1345
+ ...DECLARATIVE_COLORS.text
1346
+ },
1347
+ fill: {
1348
+ ...DECLARATIVE_COLORS.icon
1269
1349
  },
1270
1350
  content: {
1271
1351
  empty: "''"
1272
1352
  },
1353
+ cursor: {
1354
+ inherit
1355
+ },
1356
+ height: {
1357
+ inherit,
1358
+ 'dynamic-vh': '100dvh'
1359
+ },
1273
1360
  spacing: {
1274
1361
  xs3: 'var(--bq-spacing-xs3)',
1275
1362
  xs2: 'var(--bq-spacing-xs2)',
package/index.esm.js CHANGED
@@ -49,6 +49,60 @@ const ColorMix = plugin(function ({
49
49
  }, {
50
50
  values: flattenColorPalette$1(theme('colors'))
51
51
  });
52
+ matchUtilities({
53
+ 'bg-hover': value => blendColor({
54
+ color: value,
55
+ base: 'var(--bq-hover)'
56
+ }),
57
+ 'bg-active': value => blendColor({
58
+ color: value,
59
+ base: 'var(--bq-active)'
60
+ })
61
+ }, {
62
+ values: flattenColorPalette$1(theme('backgroundColor'))
63
+ });
64
+ matchUtilities({
65
+ 'border-hover': value => blendColor({
66
+ color: value,
67
+ base: 'var(--bq-hover)',
68
+ property: 'border-color'
69
+ }),
70
+ 'border-active': value => blendColor({
71
+ color: value,
72
+ base: 'var(--bq-active)',
73
+ property: 'border-color'
74
+ })
75
+ }, {
76
+ values: flattenColorPalette$1(theme('borderColor'))
77
+ });
78
+ matchUtilities({
79
+ 'text-hover': value => blendColor({
80
+ color: value,
81
+ base: 'var(--bq-hover)',
82
+ property: 'color'
83
+ }),
84
+ 'text-active': value => blendColor({
85
+ color: value,
86
+ base: 'var(--bq-active)',
87
+ property: 'color'
88
+ })
89
+ }, {
90
+ values: flattenColorPalette$1(theme('textColor'))
91
+ });
92
+ matchUtilities({
93
+ 'stroke-hover': value => blendColor({
94
+ color: value,
95
+ base: 'var(--bq-hover)',
96
+ property: 'color'
97
+ }),
98
+ 'stroke-active': value => blendColor({
99
+ color: value,
100
+ base: 'var(--bq-active)',
101
+ property: 'color'
102
+ })
103
+ }, {
104
+ values: flattenColorPalette$1(theme('stroke'))
105
+ });
52
106
  });
53
107
 
54
108
  const {
@@ -1194,13 +1248,24 @@ const TYPOGRAPHY_DEFAULT = {
1194
1248
  }
1195
1249
  };
1196
1250
 
1251
+ const inherit = 'inherit';
1197
1252
  var index = {
1198
1253
  theme: {
1199
1254
  colors: {
1255
+ inherit,
1200
1256
  current: 'currentColor',
1201
1257
  transparent: 'transparent',
1202
- ...DECLARATIVE_COLORS,
1203
- ...PRIMITIVE_COLORS
1258
+ ...PRIMITIVE_COLORS,
1259
+ focus: DECLARATIVE_COLORS.focus,
1260
+ data: {
1261
+ ...DECLARATIVE_COLORS.data
1262
+ },
1263
+ icon: {
1264
+ ...DECLARATIVE_COLORS.icon
1265
+ },
1266
+ ui: {
1267
+ ...DECLARATIVE_COLORS.ui
1268
+ }
1204
1269
  },
1205
1270
  borderRadius: {
1206
1271
  none: 'var(--bq-radius--none)',
@@ -1224,6 +1289,7 @@ var index = {
1224
1289
  l: 'var(--bq-box-shadow--l)'
1225
1290
  },
1226
1291
  fontFamily: {
1292
+ inherit,
1227
1293
  default: 'var(--bq-font-family)',
1228
1294
  outfit: 'var(--bq-font-family--outfit)',
1229
1295
  poppins: 'var(--bq-font-family--poppins)'
@@ -1249,23 +1315,44 @@ var index = {
1249
1315
  bold: 'var(--bq-font-weight--bold)'
1250
1316
  },
1251
1317
  lineHeight: {
1318
+ inherit,
1252
1319
  small: 'var(--bq-font-line-height--small)',
1253
1320
  regular: 'var(--bq-font-line-height--regular)',
1254
1321
  large: 'var(--bq-font-line-height--large)'
1255
1322
  },
1256
1323
  strokeWidth: {
1324
+ inherit,
1257
1325
  none: '0',
1258
1326
  s: 'var(--bq-stroke-s)',
1259
1327
  m: 'var(--bq-stroke-m)',
1260
1328
  l: 'var(--bq-stroke-l)'
1261
1329
  },
1262
1330
  extend: {
1263
- height: {
1264
- 'dynamic-vh': '100dvh'
1331
+ backgroundColor: {
1332
+ ...DECLARATIVE_COLORS.bg
1333
+ },
1334
+ borderColor: {
1335
+ ...DECLARATIVE_COLORS.stroke
1336
+ },
1337
+ stroke: {
1338
+ ...DECLARATIVE_COLORS.stroke
1339
+ },
1340
+ textColor: {
1341
+ ...DECLARATIVE_COLORS.text
1342
+ },
1343
+ fill: {
1344
+ ...DECLARATIVE_COLORS.icon
1265
1345
  },
1266
1346
  content: {
1267
1347
  empty: "''"
1268
1348
  },
1349
+ cursor: {
1350
+ inherit
1351
+ },
1352
+ height: {
1353
+ inherit,
1354
+ 'dynamic-vh': '100dvh'
1355
+ },
1269
1356
  spacing: {
1270
1357
  xs3: 'var(--bq-spacing-xs3)',
1271
1358
  xs2: 'var(--bq-spacing-xs2)',
package/package.json CHANGED
@@ -1,26 +1,26 @@
1
1
  {
2
- "name": "@beeq/tailwindcss",
3
- "version": "1.8.0-beta.9",
4
- "license": "Apache-2.0",
5
- "description": "BEEQ's opinionated TailwindCSS configuration",
6
- "main": "./index.cjs.js",
7
- "module": "./index.esm.js",
8
- "types": "./src/index.d.ts",
9
- "peerDependencies": {
10
- "tailwindcss": "^3.4.4",
11
- "tailwindcss-theme-swapper": "^0.12.0"
12
- },
13
- "repository": {
14
- "type": "git",
15
- "url": "https://github.com/Endava/BEEQ"
16
- },
17
- "exports": {
18
- "./package.json": "./package.json",
19
- ".": {
20
- "module": "./index.esm.js",
21
- "types": "./index.esm.d.ts",
22
- "import": "./index.cjs.mjs",
23
- "default": "./index.cjs.js"
24
- }
2
+ "name": "@beeq/tailwindcss",
3
+ "version": "1.8.1",
4
+ "license": "Apache-2.0",
5
+ "description": "BEEQ's opinionated TailwindCSS configuration",
6
+ "main": "./index.cjs.js",
7
+ "module": "./index.esm.js",
8
+ "types": "./src/index.d.ts",
9
+ "peerDependencies": {
10
+ "tailwindcss": "^3.4.4",
11
+ "tailwindcss-theme-swapper": "^0.12.0"
12
+ },
13
+ "repository": {
14
+ "type": "git",
15
+ "url": "https://github.com/Endava/BEEQ"
16
+ },
17
+ "exports": {
18
+ "./package.json": "./package.json",
19
+ ".": {
20
+ "module": "./index.esm.js",
21
+ "types": "./index.esm.d.ts",
22
+ "import": "./index.cjs.mjs",
23
+ "default": "./index.cjs.js"
25
24
  }
25
+ }
26
26
  }
package/src/index.d.ts CHANGED
@@ -2,6 +2,47 @@ import { CSS_COLORS, DECLARATIVE_COLORS, DefaultDarkTheme, DefaultLightTheme, De
2
2
  declare const _default: {
3
3
  theme: {
4
4
  colors: {
5
+ focus: string;
6
+ data: {
7
+ '01': string;
8
+ '02': string;
9
+ '03': string;
10
+ '04': string;
11
+ '05': string;
12
+ '06': string;
13
+ '07': string;
14
+ '08': string;
15
+ '09': string;
16
+ '10': string;
17
+ '11': string;
18
+ '12': string;
19
+ };
20
+ icon: {
21
+ primary: string;
22
+ alt: string;
23
+ secondary: string;
24
+ inverse: string;
25
+ brand: string;
26
+ info: string;
27
+ success: string;
28
+ warning: string;
29
+ danger: string;
30
+ };
31
+ ui: {
32
+ primary: string;
33
+ alt: string;
34
+ secondary: string;
35
+ tertiary: string;
36
+ inverse: string;
37
+ brand: string;
38
+ 'brand-alt': string;
39
+ success: string;
40
+ 'success-alt': string;
41
+ warning: string;
42
+ 'warning-alt': string;
43
+ danger: string;
44
+ 'danger-alt': string;
45
+ };
5
46
  blue: {
6
47
  100: string;
7
48
  200: string;
@@ -212,82 +253,7 @@ declare const _default: {
212
253
  900: string;
213
254
  1000: string;
214
255
  };
215
- bg: {
216
- primary: string;
217
- secondary: string;
218
- tertiary: string;
219
- alt: string;
220
- inverse: string;
221
- brand: string;
222
- overlay: string;
223
- };
224
- data: {
225
- '01': string;
226
- '02': string;
227
- '03': string;
228
- '04': string;
229
- '05': string;
230
- '06': string;
231
- '07': string;
232
- '08': string;
233
- '09': string;
234
- '10': string;
235
- '11': string;
236
- '12': string;
237
- };
238
- focus: string;
239
- icon: {
240
- primary: string;
241
- alt: string;
242
- secondary: string;
243
- inverse: string;
244
- brand: string;
245
- info: string;
246
- success: string;
247
- warning: string;
248
- danger: string;
249
- };
250
- state: {
251
- hover: string;
252
- active: string;
253
- };
254
- stroke: {
255
- primary: string;
256
- secondary: string;
257
- tertiary: string;
258
- inverse: string;
259
- brand: string;
260
- alt: string;
261
- success: string;
262
- warning: string;
263
- danger: string;
264
- };
265
- text: {
266
- primary: string;
267
- alt: string;
268
- secondary: string;
269
- inverse: string;
270
- brand: string;
271
- info: string;
272
- success: string;
273
- warning: string;
274
- danger: string;
275
- };
276
- ui: {
277
- primary: string;
278
- alt: string;
279
- secondary: string;
280
- tertiary: string;
281
- inverse: string;
282
- brand: string;
283
- 'brand-alt': string;
284
- success: string;
285
- 'success-alt': string;
286
- warning: string;
287
- 'warning-alt': string;
288
- danger: string;
289
- 'danger-alt': string;
290
- };
256
+ inherit: string;
291
257
  current: string;
292
258
  transparent: string;
293
259
  };
@@ -313,6 +279,7 @@ declare const _default: {
313
279
  l: string;
314
280
  };
315
281
  fontFamily: {
282
+ inherit: string;
316
283
  default: string;
317
284
  outfit: string;
318
285
  poppins: string;
@@ -338,23 +305,82 @@ declare const _default: {
338
305
  bold: string;
339
306
  };
340
307
  lineHeight: {
308
+ inherit: string;
341
309
  small: string;
342
310
  regular: string;
343
311
  large: string;
344
312
  };
345
313
  strokeWidth: {
314
+ inherit: string;
346
315
  none: string;
347
316
  s: string;
348
317
  m: string;
349
318
  l: string;
350
319
  };
351
320
  extend: {
352
- height: {
353
- 'dynamic-vh': string;
321
+ backgroundColor: {
322
+ primary: string;
323
+ secondary: string;
324
+ tertiary: string;
325
+ alt: string;
326
+ inverse: string;
327
+ brand: string;
328
+ overlay: string;
329
+ };
330
+ borderColor: {
331
+ primary: string;
332
+ secondary: string;
333
+ tertiary: string;
334
+ inverse: string;
335
+ brand: string;
336
+ alt: string;
337
+ success: string;
338
+ warning: string;
339
+ danger: string;
340
+ };
341
+ stroke: {
342
+ primary: string;
343
+ secondary: string;
344
+ tertiary: string;
345
+ inverse: string;
346
+ brand: string;
347
+ alt: string;
348
+ success: string;
349
+ warning: string;
350
+ danger: string;
351
+ };
352
+ textColor: {
353
+ primary: string;
354
+ alt: string;
355
+ secondary: string;
356
+ inverse: string;
357
+ brand: string;
358
+ info: string;
359
+ success: string;
360
+ warning: string;
361
+ danger: string;
362
+ };
363
+ fill: {
364
+ primary: string;
365
+ alt: string;
366
+ secondary: string;
367
+ inverse: string;
368
+ brand: string;
369
+ info: string;
370
+ success: string;
371
+ warning: string;
372
+ danger: string;
354
373
  };
355
374
  content: {
356
375
  empty: string;
357
376
  };
377
+ cursor: {
378
+ inherit: string;
379
+ };
380
+ height: {
381
+ inherit: string;
382
+ 'dynamic-vh': string;
383
+ };
358
384
  spacing: {
359
385
  xs3: string;
360
386
  xs2: string;