@beeq/tailwindcss 1.5.0 → 1.6.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 (6) hide show
  1. package/index.cjs.js +181 -38
  2. package/index.esm.js +181 -38
  3. package/package.json +2 -2
  4. package/src/plugins/color-mix.d.ts +2 -0
  5. package/src/plugins/index.d.ts +2 -0
  6. package/src/plugins/logical-properties.d.ts +2 -0
package/index.cjs.js CHANGED
@@ -14,6 +14,186 @@ const blendColor = ({
14
14
  [property]: `color-mix(in srgb, ${color}, ${base} ${percentage}%)`
15
15
  });
16
16
 
17
+ const {
18
+ default: flattenColorPalette$1
19
+ } = require('tailwindcss/lib/util/flattenColorPalette');
20
+ const ColorMix = plugin(function ({
21
+ matchUtilities,
22
+ theme
23
+ }) {
24
+ matchUtilities({
25
+ 'bg-hover': value => blendColor({
26
+ color: value,
27
+ base: 'var(--bq-hover)'
28
+ }),
29
+ 'bg-active': value => blendColor({
30
+ color: value,
31
+ base: 'var(--bq-active)'
32
+ }),
33
+ 'border-hover': value => blendColor({
34
+ color: value,
35
+ base: 'var(--bq-hover)',
36
+ property: 'border-color'
37
+ }),
38
+ 'border-active': value => blendColor({
39
+ color: value,
40
+ base: 'var(--bq-active)',
41
+ property: 'border-color'
42
+ }),
43
+ 'text-hover': value => blendColor({
44
+ color: value,
45
+ base: 'var(--bq-hover)',
46
+ property: 'color'
47
+ }),
48
+ 'text-active': value => blendColor({
49
+ color: value,
50
+ base: 'var(--bq-active)',
51
+ property: 'color'
52
+ })
53
+ }, {
54
+ values: flattenColorPalette$1(theme('colors'))
55
+ });
56
+ });
57
+
58
+ const {
59
+ default: flattenColorPalette
60
+ } = require('tailwindcss/lib/util/flattenColorPalette');
61
+ const LogicalProperties = plugin(function ({
62
+ matchUtilities,
63
+ theme
64
+ }) {
65
+ matchUtilities({
66
+ 'border-bl': value => ({
67
+ 'border-block-width': value
68
+ }),
69
+ 'border-bs': value => ({
70
+ 'border-block-start-width': value
71
+ }),
72
+ 'border-be': value => ({
73
+ 'border-block-end-width': value
74
+ }),
75
+ 'border-i': value => ({
76
+ 'border-inline-width': value
77
+ }),
78
+ 'border-is': value => ({
79
+ 'border-inline-start-width': value
80
+ }),
81
+ 'border-ie': value => ({
82
+ 'border-inline-end-width': value
83
+ })
84
+ }, {
85
+ values: theme('borderWidth')
86
+ });
87
+ matchUtilities({
88
+ 'border-bl': value => ({
89
+ 'border-block-color': value
90
+ }),
91
+ 'border-bs': value => ({
92
+ 'border-block-start-color': value
93
+ }),
94
+ 'border-be': value => ({
95
+ 'border-block-end-color': value
96
+ }),
97
+ 'border-i': value => ({
98
+ 'border-inline-color': value
99
+ }),
100
+ 'border-is': value => ({
101
+ 'border-inline-start-color': value
102
+ }),
103
+ 'border-ie': value => ({
104
+ 'border-inline-end-color': value
105
+ })
106
+ }, {
107
+ values: flattenColorPalette(theme('colors'))
108
+ });
109
+ matchUtilities({
110
+ bs: value => ({
111
+ 'block-size': value
112
+ }),
113
+ 'max-bs': value => ({
114
+ 'max-block-size': value
115
+ }),
116
+ 'min-bs': value => ({
117
+ 'min-block-size': value
118
+ }),
119
+ is: value => ({
120
+ 'inline-size': value
121
+ }),
122
+ 'max-is': value => ({
123
+ 'max-inline-size': value
124
+ }),
125
+ 'min-is': value => ({
126
+ 'min-inline-size': value
127
+ })
128
+ }, {
129
+ values: theme('width')
130
+ });
131
+ matchUtilities({
132
+ 'border-bl': value => ({
133
+ 'border-block': value
134
+ }),
135
+ 'border-bs': value => ({
136
+ 'border-block-start': value
137
+ }),
138
+ 'border-be': value => ({
139
+ 'border-block-end': value
140
+ }),
141
+ 'border-i': value => ({
142
+ 'border-inline': value
143
+ }),
144
+ 'border-is': value => ({
145
+ 'border-inline-start': value
146
+ }),
147
+ 'border-ie': value => ({
148
+ 'border-inline-end': value
149
+ }),
150
+ 'inset-b': value => ({
151
+ 'inset-block': value
152
+ }),
153
+ 'inset-bs': value => ({
154
+ 'inset-block-start': value
155
+ }),
156
+ 'inset-be': value => ({
157
+ 'inset-block-end': value
158
+ }),
159
+ 'inset-i': value => ({
160
+ 'inset-inline': value
161
+ }),
162
+ 'inset-is': value => ({
163
+ 'inset-inline-start': value
164
+ }),
165
+ 'inset-ie': value => ({
166
+ 'inset-inline-end': value
167
+ }),
168
+ 'm-b': value => ({
169
+ 'margin-block': value
170
+ }),
171
+ 'm-bs': value => ({
172
+ 'margin-block-start': value
173
+ }),
174
+ 'm-be': value => ({
175
+ 'margin-block-end': value
176
+ }),
177
+ 'm-i': value => ({
178
+ 'margin-inline': value
179
+ }),
180
+ 'p-b': value => ({
181
+ 'padding-block': value
182
+ }),
183
+ 'p-bs': value => ({
184
+ 'padding-block-start': value
185
+ }),
186
+ 'p-be': value => ({
187
+ 'padding-block-end': value
188
+ }),
189
+ 'p-i': value => ({
190
+ 'padding-inline': value
191
+ })
192
+ }, {
193
+ values: theme('spacing')
194
+ });
195
+ });
196
+
17
197
  const CSS_COLORS = {
18
198
  '--bq-blue-100': '#e7f0fd',
19
199
  '--bq-blue-200': '#d0e2fb',
@@ -1013,9 +1193,6 @@ const TYPOGRAPHY_DEFAULT = {
1013
1193
  }
1014
1194
  };
1015
1195
 
1016
- const {
1017
- default: flattenColorPalette
1018
- } = require('tailwindcss/lib/util/flattenColorPalette');
1019
1196
  var index = {
1020
1197
  theme: {
1021
1198
  colors: {
@@ -1106,7 +1283,6 @@ var index = {
1106
1283
  plugins: [plugin(function ({
1107
1284
  addBase,
1108
1285
  addComponents,
1109
- matchUtilities,
1110
1286
  theme
1111
1287
  }) {
1112
1288
  addBase({
@@ -1121,40 +1297,7 @@ var index = {
1121
1297
  outlineOffset: 'var(--bq-ring-offset-width, 1px)'
1122
1298
  }
1123
1299
  });
1124
- matchUtilities({
1125
- 'bg-hover': value => blendColor({
1126
- color: value,
1127
- base: 'var(--bq-hover)'
1128
- }),
1129
- 'bg-active': value => blendColor({
1130
- color: value,
1131
- base: 'var(--bq-active)'
1132
- }),
1133
- 'border-hover': value => blendColor({
1134
- color: value,
1135
- base: 'var(--bq-hover)',
1136
- property: 'border-color'
1137
- }),
1138
- 'border-active': value => blendColor({
1139
- color: value,
1140
- base: 'var(--bq-active)',
1141
- property: 'border-color'
1142
- }),
1143
- 'text-hover': value => blendColor({
1144
- color: value,
1145
- base: 'var(--bq-hover)',
1146
- property: 'color'
1147
- }),
1148
- 'text-active': value => blendColor({
1149
- color: value,
1150
- base: 'var(--bq-active)',
1151
- property: 'color'
1152
- })
1153
- }, {
1154
- values: flattenColorPalette(theme('colors')),
1155
- type: 'color'
1156
- });
1157
- }), ThemeSwapper({
1300
+ }), ColorMix, LogicalProperties, ThemeSwapper({
1158
1301
  themes: [{
1159
1302
  name: 'root',
1160
1303
  selectors: [':root'],
package/index.esm.js CHANGED
@@ -10,6 +10,186 @@ const blendColor = ({
10
10
  [property]: `color-mix(in srgb, ${color}, ${base} ${percentage}%)`
11
11
  });
12
12
 
13
+ const {
14
+ default: flattenColorPalette$1
15
+ } = require('tailwindcss/lib/util/flattenColorPalette');
16
+ const ColorMix = plugin(function ({
17
+ matchUtilities,
18
+ theme
19
+ }) {
20
+ matchUtilities({
21
+ 'bg-hover': value => blendColor({
22
+ color: value,
23
+ base: 'var(--bq-hover)'
24
+ }),
25
+ 'bg-active': value => blendColor({
26
+ color: value,
27
+ base: 'var(--bq-active)'
28
+ }),
29
+ 'border-hover': value => blendColor({
30
+ color: value,
31
+ base: 'var(--bq-hover)',
32
+ property: 'border-color'
33
+ }),
34
+ 'border-active': value => blendColor({
35
+ color: value,
36
+ base: 'var(--bq-active)',
37
+ property: 'border-color'
38
+ }),
39
+ 'text-hover': value => blendColor({
40
+ color: value,
41
+ base: 'var(--bq-hover)',
42
+ property: 'color'
43
+ }),
44
+ 'text-active': value => blendColor({
45
+ color: value,
46
+ base: 'var(--bq-active)',
47
+ property: 'color'
48
+ })
49
+ }, {
50
+ values: flattenColorPalette$1(theme('colors'))
51
+ });
52
+ });
53
+
54
+ const {
55
+ default: flattenColorPalette
56
+ } = require('tailwindcss/lib/util/flattenColorPalette');
57
+ const LogicalProperties = plugin(function ({
58
+ matchUtilities,
59
+ theme
60
+ }) {
61
+ matchUtilities({
62
+ 'border-bl': value => ({
63
+ 'border-block-width': value
64
+ }),
65
+ 'border-bs': value => ({
66
+ 'border-block-start-width': value
67
+ }),
68
+ 'border-be': value => ({
69
+ 'border-block-end-width': value
70
+ }),
71
+ 'border-i': value => ({
72
+ 'border-inline-width': value
73
+ }),
74
+ 'border-is': value => ({
75
+ 'border-inline-start-width': value
76
+ }),
77
+ 'border-ie': value => ({
78
+ 'border-inline-end-width': value
79
+ })
80
+ }, {
81
+ values: theme('borderWidth')
82
+ });
83
+ matchUtilities({
84
+ 'border-bl': value => ({
85
+ 'border-block-color': value
86
+ }),
87
+ 'border-bs': value => ({
88
+ 'border-block-start-color': value
89
+ }),
90
+ 'border-be': value => ({
91
+ 'border-block-end-color': value
92
+ }),
93
+ 'border-i': value => ({
94
+ 'border-inline-color': value
95
+ }),
96
+ 'border-is': value => ({
97
+ 'border-inline-start-color': value
98
+ }),
99
+ 'border-ie': value => ({
100
+ 'border-inline-end-color': value
101
+ })
102
+ }, {
103
+ values: flattenColorPalette(theme('colors'))
104
+ });
105
+ matchUtilities({
106
+ bs: value => ({
107
+ 'block-size': value
108
+ }),
109
+ 'max-bs': value => ({
110
+ 'max-block-size': value
111
+ }),
112
+ 'min-bs': value => ({
113
+ 'min-block-size': value
114
+ }),
115
+ is: value => ({
116
+ 'inline-size': value
117
+ }),
118
+ 'max-is': value => ({
119
+ 'max-inline-size': value
120
+ }),
121
+ 'min-is': value => ({
122
+ 'min-inline-size': value
123
+ })
124
+ }, {
125
+ values: theme('width')
126
+ });
127
+ matchUtilities({
128
+ 'border-bl': value => ({
129
+ 'border-block': value
130
+ }),
131
+ 'border-bs': value => ({
132
+ 'border-block-start': value
133
+ }),
134
+ 'border-be': value => ({
135
+ 'border-block-end': value
136
+ }),
137
+ 'border-i': value => ({
138
+ 'border-inline': value
139
+ }),
140
+ 'border-is': value => ({
141
+ 'border-inline-start': value
142
+ }),
143
+ 'border-ie': value => ({
144
+ 'border-inline-end': value
145
+ }),
146
+ 'inset-b': value => ({
147
+ 'inset-block': value
148
+ }),
149
+ 'inset-bs': value => ({
150
+ 'inset-block-start': value
151
+ }),
152
+ 'inset-be': value => ({
153
+ 'inset-block-end': value
154
+ }),
155
+ 'inset-i': value => ({
156
+ 'inset-inline': value
157
+ }),
158
+ 'inset-is': value => ({
159
+ 'inset-inline-start': value
160
+ }),
161
+ 'inset-ie': value => ({
162
+ 'inset-inline-end': value
163
+ }),
164
+ 'm-b': value => ({
165
+ 'margin-block': value
166
+ }),
167
+ 'm-bs': value => ({
168
+ 'margin-block-start': value
169
+ }),
170
+ 'm-be': value => ({
171
+ 'margin-block-end': value
172
+ }),
173
+ 'm-i': value => ({
174
+ 'margin-inline': value
175
+ }),
176
+ 'p-b': value => ({
177
+ 'padding-block': value
178
+ }),
179
+ 'p-bs': value => ({
180
+ 'padding-block-start': value
181
+ }),
182
+ 'p-be': value => ({
183
+ 'padding-block-end': value
184
+ }),
185
+ 'p-i': value => ({
186
+ 'padding-inline': value
187
+ })
188
+ }, {
189
+ values: theme('spacing')
190
+ });
191
+ });
192
+
13
193
  const CSS_COLORS = {
14
194
  '--bq-blue-100': '#e7f0fd',
15
195
  '--bq-blue-200': '#d0e2fb',
@@ -1009,9 +1189,6 @@ const TYPOGRAPHY_DEFAULT = {
1009
1189
  }
1010
1190
  };
1011
1191
 
1012
- const {
1013
- default: flattenColorPalette
1014
- } = require('tailwindcss/lib/util/flattenColorPalette');
1015
1192
  var index = {
1016
1193
  theme: {
1017
1194
  colors: {
@@ -1102,7 +1279,6 @@ var index = {
1102
1279
  plugins: [plugin(function ({
1103
1280
  addBase,
1104
1281
  addComponents,
1105
- matchUtilities,
1106
1282
  theme
1107
1283
  }) {
1108
1284
  addBase({
@@ -1117,40 +1293,7 @@ var index = {
1117
1293
  outlineOffset: 'var(--bq-ring-offset-width, 1px)'
1118
1294
  }
1119
1295
  });
1120
- matchUtilities({
1121
- 'bg-hover': value => blendColor({
1122
- color: value,
1123
- base: 'var(--bq-hover)'
1124
- }),
1125
- 'bg-active': value => blendColor({
1126
- color: value,
1127
- base: 'var(--bq-active)'
1128
- }),
1129
- 'border-hover': value => blendColor({
1130
- color: value,
1131
- base: 'var(--bq-hover)',
1132
- property: 'border-color'
1133
- }),
1134
- 'border-active': value => blendColor({
1135
- color: value,
1136
- base: 'var(--bq-active)',
1137
- property: 'border-color'
1138
- }),
1139
- 'text-hover': value => blendColor({
1140
- color: value,
1141
- base: 'var(--bq-hover)',
1142
- property: 'color'
1143
- }),
1144
- 'text-active': value => blendColor({
1145
- color: value,
1146
- base: 'var(--bq-active)',
1147
- property: 'color'
1148
- })
1149
- }, {
1150
- values: flattenColorPalette(theme('colors')),
1151
- type: 'color'
1152
- });
1153
- }), ThemeSwapper({
1296
+ }), ColorMix, LogicalProperties, ThemeSwapper({
1154
1297
  themes: [{
1155
1298
  name: 'root',
1156
1299
  selectors: [':root'],
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@beeq/tailwindcss",
3
- "version": "1.5.0",
3
+ "version": "1.6.0",
4
4
  "license": "Apache-2.0",
5
5
  "description": "BEEQ's opinionated TailwindCSS configuration",
6
6
  "main": "./index.cjs.js",
7
7
  "module": "./index.esm.js",
8
8
  "types": "./src/index.d.ts",
9
9
  "peerDependencies": {
10
- "tailwindcss": "^3.4.3",
10
+ "tailwindcss": "^3.4.4",
11
11
  "tailwindcss-theme-swapper": "^0.12.0"
12
12
  },
13
13
  "repository": {
package/src/plugins/color-mix.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { Config } from 'tailwindcss';
2
+ export declare const ColorMix: Partial<Config>;
package/src/plugins/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './color-mix';
2
+ export * from './logical-properties';
package/src/plugins/logical-properties.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { Config } from 'tailwindcss';
2
+ export declare const LogicalProperties: Partial<Config>;