@vinicunca/unocss-preset 0.1.2 → 0.2.3

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 (4) hide show
  1. package/dist/index.cjs +464 -232
  2. package/dist/index.d.ts +22 -16
  3. package/dist/index.mjs +465 -233
  4. package/package.json +6 -6
package/dist/index.cjs CHANGED
@@ -2,15 +2,15 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ const pluginutils = require('@rollup/pluginutils');
5
6
  const jsUtilities = require('@vinicunca/js-utilities');
6
7
  const core = require('@unocss/core');
7
8
 
8
9
  const DEFAULT_PREFIX = "vin-";
9
- class PresetCore {
10
+ class VinicuncaCore {
10
11
  constructor(options) {
11
12
  this.prefix = options.prefix ?? DEFAULT_PREFIX;
12
- this.classBase = options.classBase ?? "";
13
- this.classProps = options.classProps ?? {};
13
+ this.classes = options.classes ?? {};
14
14
  }
15
15
  genVariable(key = "") {
16
16
  return `--${this.prefix}${key}`;
@@ -22,111 +22,186 @@ class PresetCore {
22
22
  return prev;
23
23
  }, {});
24
24
  }
25
+ generatePrefixRegex(name) {
26
+ const negativeLookbehind = "(?<![\\w:/\\\\,%#.$\\?-])";
27
+ const component = `${this.prefix}\\[${name}\\]`;
28
+ return `${negativeLookbehind}${component}`;
29
+ }
30
+ }
31
+
32
+ function trimAll(str) {
33
+ return str.replace(/[\s\n\r]+/g, " ").trim();
25
34
  }
26
35
 
27
- class Color extends PresetCore {
36
+ class Button extends VinicuncaCore {
28
37
  constructor(options) {
29
38
  super(options);
30
- this.varTextOpacity = "--un-text-opacity";
31
39
  }
32
- getRules() {
33
- return [
34
- this.getTextRule(),
35
- this.getBgRule()
36
- ];
40
+ transfromClasses(content) {
41
+ const {
42
+ base: baseClasses,
43
+ props: propClasses = {},
44
+ types: typeClasses = {}
45
+ } = this.classes;
46
+ const rePrefix = this.generatePrefixRegex("button");
47
+ return content.replace(
48
+ new RegExp(`${rePrefix}(?:--\\[(.+?)\\])?`, "gm"),
49
+ (from, body) => {
50
+ const results = [];
51
+ if (body) {
52
+ if (baseClasses) {
53
+ results.push(baseClasses);
54
+ }
55
+ const properties = body.split(/\s/g).filter(Boolean);
56
+ const [props_, types_] = jsUtilities.partition(properties, (str) => /^\w+--.+$/.test(str));
57
+ for (const el of types_) {
58
+ if (!Object.keys(typeClasses).includes(el)) {
59
+ return from;
60
+ }
61
+ results.push(typeClasses[el]);
62
+ }
63
+ for (const propKey of Object.keys(propClasses)) {
64
+ const propRegex = new RegExp(`(${propKey})--(.+)`, "g");
65
+ const defaultValue = propClasses[propKey].default || "";
66
+ let hasProp = false;
67
+ for (let idx = 0; idx < props_.length; idx++) {
68
+ const match = propRegex.exec(props_[idx]);
69
+ if (match) {
70
+ const [, , propValue] = match;
71
+ if (Object.keys(propClasses[propKey]).includes(propValue)) {
72
+ results.push(propClasses[propKey][propValue]);
73
+ props_.splice(idx, 1);
74
+ hasProp = true;
75
+ break;
76
+ } else {
77
+ return from;
78
+ }
79
+ }
80
+ }
81
+ if (!hasProp) {
82
+ results.push(defaultValue);
83
+ }
84
+ }
85
+ } else {
86
+ if (baseClasses) {
87
+ results.push(baseClasses);
88
+ }
89
+ results.push(
90
+ ...Object.keys(propClasses).map(
91
+ (key) => propClasses[key].default || ""
92
+ )
93
+ );
94
+ }
95
+ return trimAll(results.join(" "));
96
+ }
97
+ );
37
98
  }
38
- getTextRule() {
39
- return [
40
- /^text-brand-(?<body>(?:on-)?(?<color>.+))/,
41
- ({ groups }) => {
42
- const { body, color } = groups;
43
- const colorBody = /^on-[a-z]/.test(body) ? `on-${color}` : color;
44
- const colorVar = this.genVariable(`theme-${colorBody}`);
45
- return {
46
- [this.varTextOpacity]: 1,
47
- color: `rgba(var(${colorVar}), var(${this.varTextOpacity}))`
48
- };
99
+ static getThemes() {
100
+ return {
101
+ letterSpacing: {
102
+ button: "0.0892857143em"
49
103
  },
50
- { layer: "vinicunca" }
51
- ];
104
+ textIndent: {
105
+ button: "0.0892857143em"
106
+ }
107
+ };
52
108
  }
53
- getBgRule() {
54
- return [
55
- /^bg-brand-(.+)$/,
56
- ([, body]) => {
57
- const bgColorVar = this.genVariable(`theme-${body}`);
58
- const colorVar = this.genVariable(`theme-on-${body}`);
59
- return {
60
- [this.varTextOpacity]: 1,
61
- "--un-bg-opacity": 1,
62
- "background-color": `rgba(var(${bgColorVar}),var(--un-bg-opacity))`,
63
- "color": `rgba(var(${colorVar}), var(${this.varTextOpacity}))`
64
- };
65
- },
66
- { layer: "vinicunca" }
67
- ];
109
+ }
110
+
111
+ class Divider extends VinicuncaCore {
112
+ constructor(options) {
113
+ super(options);
114
+ }
115
+ transfromClasses(content) {
116
+ const { types: typeClasses = {} } = this.classes;
117
+ const rePrefix = this.generatePrefixRegex("divider");
118
+ return content.replace(
119
+ new RegExp(`${rePrefix}(?:-(\\w))?(?:--\\[(.+?)\\])?`, "gm"),
120
+ (from, dimension, props) => {
121
+ const resolveDimension = dimension ?? "x";
122
+ const results = [];
123
+ if (dimension) {
124
+ if (["x", "y"].includes(dimension)) {
125
+ results.push(typeClasses[dimension]);
126
+ } else {
127
+ return from;
128
+ }
129
+ } else {
130
+ results.push(typeClasses.x);
131
+ }
132
+ let hasThickness = false;
133
+ if (props) {
134
+ const properties = props.split(/\s/g).filter(Boolean);
135
+ for (const el of properties) {
136
+ const hasMatch = el.match(/^(\w+):(\d+)/);
137
+ if (hasMatch) {
138
+ const [, key, value] = hasMatch;
139
+ if (key === "length") {
140
+ if (resolveDimension === "x") {
141
+ results.push(`max-w-[${value}px]`);
142
+ } else {
143
+ results.push(`max-h-[${value}px]`);
144
+ }
145
+ } else if (key === "thick") {
146
+ hasThickness = true;
147
+ if (resolveDimension === "x") {
148
+ results.push(`border-t-${value}`);
149
+ } else {
150
+ results.push(`border-r-${value}`);
151
+ }
152
+ } else {
153
+ return from;
154
+ }
155
+ } else {
156
+ return from;
157
+ }
158
+ }
159
+ }
160
+ if (!hasThickness) {
161
+ if (resolveDimension === "x") {
162
+ results.push("border-t-1");
163
+ } else {
164
+ results.push("border-r-1");
165
+ }
166
+ }
167
+ return trimAll(results.join(" "));
168
+ }
169
+ );
68
170
  }
69
171
  }
70
172
 
71
- const COLOR_RING_OFFSET = "rgba(0, 0, 0, 0.2)";
72
- const COLOR_RING_SHADOW = "rgba(0, 0, 0, 0.14)";
73
- const COLOR_SHADOW = "rgba(0, 0, 0, 0.12)";
74
- const ELEVATION_DICTIONARY = {
75
- 0: [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]],
76
- 1: [[0, 2, 1, -1], [0, 1, 1, 0], [0, 1, 3, 0]],
77
- 2: [[0, 3, 1, -2], [0, 2, 2, 0], [0, 1, 5, 0]],
78
- 3: [[0, 3, 3, -2], [0, 3, 4, 0], [0, 1, 8, 0]],
79
- 4: [[0, 2, 4, -1], [0, 4, 5, 0], [0, 1, 10, 0]],
80
- 5: [[0, 3, 5, -1], [0, 5, 8, 0], [0, 1, 14, 0]],
81
- 6: [[0, 3, 5, -1], [0, 6, 10, 0], [0, 1, 18, 0]],
82
- 7: [[0, 4, 5, -2], [0, 7, 10, 1], [0, 2, 16, 1]],
83
- 8: [[0, 5, 5, -3], [0, 8, 10, 1], [0, 3, 14, 2]],
84
- 9: [[0, 5, 6, -3], [0, 9, 12, 1], [0, 3, 16, 2]],
85
- 10: [[0, 6, 6, -3], [0, 10, 14, 1], [0, 4, 18, 3]],
86
- 11: [[0, 6, 7, -4], [0, 11, 15, 1], [0, 4, 20, 3]],
87
- 12: [[0, 7, 8, -4], [0, 12, 17, 2], [0, 5, 22, 4]],
88
- 13: [[0, 7, 8, -4], [0, 13, 19, 2], [0, 5, 24, 4]],
89
- 14: [[0, 7, 9, -4], [0, 14, 21, 2], [0, 5, 26, 4]],
90
- 15: [[0, 8, 9, -5], [0, 15, 22, 2], [0, 6, 28, 5]],
91
- 16: [[0, 8, 10, -5], [0, 16, 24, 2], [0, 6, 30, 5]],
92
- 17: [[0, 8, 11, -5], [0, 17, 26, 2], [0, 6, 32, 5]],
93
- 18: [[0, 9, 11, -5], [0, 18, 28, 2], [0, 7, 34, 6]],
94
- 19: [[0, 9, 12, -6], [0, 19, 29, 2], [0, 7, 36, 6]],
95
- 20: [[0, 1, 13, -6], [0, 20, 31, 3], [0, 8, 38, 7]],
96
- 21: [[0, 1, 13, -6], [0, 21, 33, 3], [0, 8, 40, 7]],
97
- 22: [[0, 1, 14, -6], [0, 22, 35, 3], [0, 8, 42, 7]],
98
- 23: [[0, 1, 14, -7], [0, 23, 36, 3], [0, 9, 44, 8]],
99
- 24: [[0, 1, 15, -7], [0, 24, 38, 3], [0, 9, 46, 8]]
100
- };
101
- class Elevation {
102
- getRules() {
103
- return [
104
- this.getBaseRule()
105
- ];
173
+ function createCssSelector({ selector, content }) {
174
+ return `${selector} { ${content.join(" ")} }`;
175
+ }
176
+
177
+ class Overlay extends VinicuncaCore {
178
+ constructor(options) {
179
+ super(options);
180
+ this.scrollBlockedClass = options.scrollBlockedClass ?? {};
106
181
  }
107
- addPixels(value) {
108
- return value.map((v) => jsUtilities.convertToUnit(v)).join(" ");
182
+ getPreflight() {
183
+ return {
184
+ layer: "preflight",
185
+ getCSS: () => {
186
+ const lines = [];
187
+ lines.push(createCssSelector({
188
+ selector: `html.${this.scrollBlockedClass.name}`,
189
+ content: [
190
+ core.entriesToCss(Object.entries(this.scrollBlockedClass.html))
191
+ ]
192
+ }));
193
+ return lines.join("");
194
+ }
195
+ };
109
196
  }
110
- getBaseRule() {
197
+ getShortcuts() {
198
+ const trimmedClass = this.scrollBlockedClass.name.replace(this.prefix, "");
111
199
  return [
112
- /^elevation-([\d.]+)$/,
113
- ([, body]) => {
114
- const elevation = ELEVATION_DICTIONARY[body];
115
- if (!elevation) {
116
- return;
117
- }
118
- const [ringOffset, ringShadow, shadow] = elevation;
119
- const unRingOffsetShadow = this.addPixels(ringOffset);
120
- const unRingShadow = this.addPixels(ringShadow);
121
- const unShadow = this.addPixels(shadow);
122
- return {
123
- "--un-ring-offset-shadow": `${unRingOffsetShadow} ${COLOR_RING_OFFSET}`,
124
- "--un-ring-shadow": `${unRingShadow} ${COLOR_RING_SHADOW}`,
125
- "--un-shadow": `${unShadow} ${COLOR_SHADOW}`,
126
- "box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)"
127
- };
128
- },
129
- { layer: "vinicunca" }
200
+ [
201
+ trimmedClass,
202
+ this.scrollBlockedClass.rules,
203
+ { layer: "vinicunca" }
204
+ ]
130
205
  ];
131
206
  }
132
207
  }
@@ -144,10 +219,10 @@ const DEFAULT_THEME = {
144
219
  "error": "#d32f2f",
145
220
  "info": "#0288d1",
146
221
  "success": "#2e7d32",
147
- "warning": "#ed6c02"
222
+ "warning": "#ed6c02",
223
+ "border": "#000000"
148
224
  },
149
225
  variables: {
150
- "border-color": "#000000",
151
226
  "opacity-border": 0.12,
152
227
  "opacity-high-emphasis": 0.87,
153
228
  "opacity-medium-emphasis": 0.6,
@@ -173,10 +248,10 @@ const DEFAULT_THEME = {
173
248
  "error": "#c62828",
174
249
  "info": "#01579b",
175
250
  "success": "#1b5e20",
176
- "warning": "#e65100"
251
+ "warning": "#e65100",
252
+ "border": "#FFFFFF"
177
253
  },
178
254
  variables: {
179
- "border-color": "#FFFFFF",
180
255
  "opacity-border": 0.12,
181
256
  "opacity-high-emphasis": 0.87,
182
257
  "opacity-medium-emphasis": 0.6,
@@ -192,20 +267,15 @@ const DEFAULT_THEME = {
192
267
  }
193
268
  };
194
269
 
195
- function createCssSelector({ selector, content }) {
196
- return `${selector} { ${content.join(" ")} }`;
197
- }
198
-
199
- class Brand extends PresetCore {
270
+ class Brand extends VinicuncaCore {
200
271
  constructor(options) {
201
272
  super(options);
202
- const parsedOptions = this.parseThemeOptions(options?.themes);
203
- this.themes = this.parseTheme(parsedOptions);
273
+ const parsedOptions = this.parseBrandOptions(options?.themes);
274
+ this.themes = this.parseBrand(parsedOptions);
204
275
  this.preflights = options?.preflights ?? {};
205
276
  }
206
277
  getPreflight() {
207
278
  return {
208
- layer: "preflight",
209
279
  getCSS: () => {
210
280
  const lines = [];
211
281
  lines.push(createCssSelector({
@@ -244,7 +314,7 @@ class Brand extends PresetCore {
244
314
  core.entriesToCss(Object.entries(this.remapVariables({ tokens: variables })))
245
315
  ];
246
316
  }
247
- parseThemeOptions(options) {
317
+ parseBrandOptions(options) {
248
318
  if (!options) {
249
319
  return DEFAULT_THEME;
250
320
  }
@@ -253,7 +323,7 @@ class Brand extends PresetCore {
253
323
  { ...options }
254
324
  );
255
325
  }
256
- parseTheme(_themes) {
326
+ parseBrand(_themes) {
257
327
  const acc = {};
258
328
  for (const [name, original] of Object.entries(_themes)) {
259
329
  const theme = acc[name] = {
@@ -277,129 +347,271 @@ class Brand extends PresetCore {
277
347
  }
278
348
  }
279
349
 
280
- class Button extends PresetCore {
281
- constructor(options) {
282
- super(options);
283
- this.regexCache = {};
284
- this.classPropsKeys = Object.keys(this.classProps);
285
- this.regexes = {
286
- core: new RegExp(`(?<!w|-)(${this.prefix}button)(--\\[[\\w\\s-]+?\\]|[\\w-]+)?(?!\\s*?=>)`, "gm")
287
- };
288
- this.classPropsKeys.forEach((key) => {
289
- this.regexes[key] = new RegExp(`${key}-(${Object.keys(this.classProps[key]).join("|")})`, "g");
290
- });
291
- }
292
- makeRegexClass(key) {
293
- if (!this.regexCache[key]) {
294
- this.regexCache[key] = this.regexes[key];
295
- }
296
- this.regexCache[key].lastIndex = 0;
297
- return this.regexCache[key];
298
- }
299
- parseButtonClasses(str) {
300
- const regexCore = this.makeRegexClass("core");
301
- let hasChanged = false;
302
- let content = str.toString();
303
- let depth = 5;
304
- do {
305
- const before = content;
306
- content = content.replace(
307
- regexCore,
308
- (_from, _core, body) => {
309
- const results = [];
310
- if (body) {
311
- const hasProps = body.match(/--\[([\w\s-]+?)\]/);
312
- if (!hasProps) {
313
- results.push(_from);
314
- } else {
315
- results.push(this.classBase);
316
- const [, properties] = hasProps;
317
- const bodyContent = properties.split(/\s/g).filter(Boolean);
318
- this.classPropsKeys.forEach((propKey) => {
319
- const propRegex = this.makeRegexClass(propKey);
320
- const defaultValue = this.classProps[propKey].default || "";
321
- let hasProp = true;
322
- if (bodyContent.length) {
323
- for (let idx = 0; idx < bodyContent.length; idx++) {
324
- const propBody = bodyContent[idx];
325
- const match = propRegex.exec(propBody);
326
- if (match) {
327
- const [, key] = match;
328
- results.push(this.classProps[propKey][key]);
329
- bodyContent.splice(idx, 1);
330
- hasProp = true;
331
- break;
332
- }
333
- hasProp = false;
334
- }
335
- if (!hasProp) {
336
- results.push(defaultValue);
337
- }
338
- } else {
339
- results.push(defaultValue);
340
- }
341
- });
342
- }
343
- } else {
344
- results.push(this.classBase);
345
- results.push(
346
- ...this.classPropsKeys.map(
347
- (key) => this.classProps[key].default || ""
348
- )
349
- );
350
+ const KEY_CIRCULAR_DASH = "progress-circular-dash";
351
+ const KEY_CIRCULAR_ROTATE = "progress-circular-rotate";
352
+ const KEY_LINE = "progress-line";
353
+ const KEY_LINE_SHORT = "progress-line-short";
354
+ const KEY_LINE_STREAM = "progress-line-stream";
355
+ const KEY_LINE_STRIPES = "progress-line-stripes";
356
+ class Animation {
357
+ static getThemes() {
358
+ return {
359
+ animation: {
360
+ keyframes: {
361
+ [KEY_CIRCULAR_DASH]: "{ 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0px; } 50% { stroke-dasharray: 100, 200; stroke-dashoffset: -15px; } 100% { stroke-dasharray: 100, 200; stroke-dashoffset: -124px; } }",
362
+ [KEY_CIRCULAR_ROTATE]: "{ 100% { transform: rotate(270deg); } }",
363
+ [KEY_LINE]: "{ 0% { left: -90%; right: 100%; } 60% { left: -90%; right: 100%; } 100% { left: 100%; right: -35%; } }",
364
+ [KEY_LINE_SHORT]: "{ 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } }",
365
+ [KEY_LINE_STREAM]: "{ to { transform: translateX(var(--vin-progress-linear-stream-to)); } }",
366
+ [KEY_LINE_STRIPES]: "{ 0% { background-position-x: var(--vin-progress-linear-height); } }"
367
+ },
368
+ durations: {
369
+ [KEY_CIRCULAR_DASH]: "1.4s",
370
+ [KEY_CIRCULAR_ROTATE]: "1.4s",
371
+ [KEY_LINE_STREAM]: "0.25s",
372
+ [KEY_LINE_STRIPES]: "1s"
373
+ },
374
+ timingFns: {
375
+ [KEY_CIRCULAR_DASH]: "ease-in-out",
376
+ [KEY_CIRCULAR_ROTATE]: "linear",
377
+ [KEY_LINE_STREAM]: "linear",
378
+ [KEY_LINE_STRIPES]: "linear"
379
+ },
380
+ counts: {
381
+ [KEY_CIRCULAR_DASH]: "infinite",
382
+ [KEY_CIRCULAR_ROTATE]: "infinite",
383
+ [KEY_LINE_STREAM]: "infinite",
384
+ [KEY_LINE_STRIPES]: "infinite"
385
+ },
386
+ properties: {
387
+ [KEY_CIRCULAR_DASH]: {
388
+ "stroke-dasharray": "25, 200",
389
+ "stroke-dashoffset": "0",
390
+ "stroke-linecap": "round"
391
+ },
392
+ [KEY_CIRCULAR_ROTATE]: {
393
+ "transform-origin": "center center",
394
+ "transition": "all 0.2s ease-in-out"
395
+ },
396
+ [KEY_LINE_STRIPES]: {
397
+ "background-image": "linear-gradient(135deg, hsla(0, 0%, 100%, 0.25) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, 0.25) 0, hsla(0, 0%, 100%, 0.25) 75%, transparent 0, transparent)",
398
+ "background-repeat": "repeat",
399
+ "background-size": "var(--vin-progress-linear-height)"
350
400
  }
351
- return results.join(" ").replace(/(\r\n|\n|\r)/gm, " ");
352
401
  }
353
- );
354
- hasChanged = content !== before;
355
- depth -= 1;
356
- } while (hasChanged && depth);
357
- return {
358
- expanded: content.replace(/\s+/gm, " "),
359
- hasChanged
402
+ }
360
403
  };
361
404
  }
362
- transfromClasses(str) {
363
- const { expanded } = this.parseButtonClasses(str.toString());
364
- return str.length() ? str.overwrite(0, str.length(), expanded) : str;
365
- }
366
405
  }
367
406
 
368
- class Overlay extends PresetCore {
407
+ class Color extends VinicuncaCore {
369
408
  constructor(options) {
370
409
  super(options);
371
- this.scrollBlockedClass = options.scrollBlockedClass ?? {};
372
410
  }
373
- getPreflight() {
374
- return {
375
- layer: "preflight",
376
- getCSS: () => {
377
- const lines = [];
378
- lines.push(createCssSelector({
379
- selector: `html.${this.scrollBlockedClass.name}`,
380
- content: [
381
- core.entriesToCss(Object.entries(this.scrollBlockedClass.html))
382
- ]
383
- }));
384
- return lines.join("");
385
- }
386
- };
411
+ getRules() {
412
+ return [
413
+ this.getTextRule(),
414
+ this.getBgRule(),
415
+ this.getBorderRule()
416
+ ];
387
417
  }
388
- getShortcuts() {
389
- const trimmedClass = this.scrollBlockedClass.name.replace(this.prefix, "");
418
+ getBorderRule() {
419
+ return [
420
+ /^border-brand-(?<body>(?:on-)?(?<color>.+))/,
421
+ ({ groups }) => {
422
+ const { body, color } = groups;
423
+ const colorBody = /^on-[a-z]/.test(body) ? `on-${color}` : color;
424
+ const colorVar = this.genVariable(`theme-${colorBody}`);
425
+ return {
426
+ "--un-border-opacity": 1,
427
+ "border-color": `rgba(var(${colorVar}), var(--un-border-opacity))`
428
+ };
429
+ },
430
+ { layer: "vinicunca" }
431
+ ];
432
+ }
433
+ getTextRule() {
434
+ return [
435
+ /^text-brand-(?<body>(?:on-)?(?<color>.+))/,
436
+ ({ groups }) => {
437
+ const { body, color } = groups;
438
+ const colorBody = /^on-[a-z]/.test(body) ? `on-${color}` : color;
439
+ const colorVar = this.genVariable(`theme-${colorBody}`);
440
+ return {
441
+ "--un-text-opacity": 1,
442
+ "color": `rgba(var(${colorVar}), var(--un-text-opacity))`
443
+ };
444
+ },
445
+ { layer: "vinicunca" }
446
+ ];
447
+ }
448
+ getBgRule() {
449
+ return [
450
+ /^bg-brand-(.+)$/,
451
+ ([, body]) => {
452
+ const bgColorVar = this.genVariable(`theme-${body}`);
453
+ const colorVar = this.genVariable(`theme-on-${body}`);
454
+ return {
455
+ "--un-text-opacity": 1,
456
+ "--un-bg-opacity": 1,
457
+ "background-color": `rgba(var(${bgColorVar}),var(--un-bg-opacity))`,
458
+ "color": `rgba(var(${colorVar}), var(--un-text-opacity))`
459
+ };
460
+ },
461
+ { layer: "vinicunca" }
462
+ ];
463
+ }
464
+ }
465
+
466
+ const COLOR_RING_OFFSET = "rgba(0, 0, 0, 0.2)";
467
+ const COLOR_RING_SHADOW = "rgba(0, 0, 0, 0.14)";
468
+ const COLOR_SHADOW = "rgba(0, 0, 0, 0.12)";
469
+ const ELEVATION_DICTIONARY = {
470
+ 0: [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]],
471
+ 1: [[0, 2, 1, -1], [0, 1, 1, 0], [0, 1, 3, 0]],
472
+ 2: [[0, 3, 1, -2], [0, 2, 2, 0], [0, 1, 5, 0]],
473
+ 3: [[0, 3, 3, -2], [0, 3, 4, 0], [0, 1, 8, 0]],
474
+ 4: [[0, 2, 4, -1], [0, 4, 5, 0], [0, 1, 10, 0]],
475
+ 5: [[0, 3, 5, -1], [0, 5, 8, 0], [0, 1, 14, 0]],
476
+ 6: [[0, 3, 5, -1], [0, 6, 10, 0], [0, 1, 18, 0]],
477
+ 7: [[0, 4, 5, -2], [0, 7, 10, 1], [0, 2, 16, 1]],
478
+ 8: [[0, 5, 5, -3], [0, 8, 10, 1], [0, 3, 14, 2]],
479
+ 9: [[0, 5, 6, -3], [0, 9, 12, 1], [0, 3, 16, 2]],
480
+ 10: [[0, 6, 6, -3], [0, 10, 14, 1], [0, 4, 18, 3]],
481
+ 11: [[0, 6, 7, -4], [0, 11, 15, 1], [0, 4, 20, 3]],
482
+ 12: [[0, 7, 8, -4], [0, 12, 17, 2], [0, 5, 22, 4]],
483
+ 13: [[0, 7, 8, -4], [0, 13, 19, 2], [0, 5, 24, 4]],
484
+ 14: [[0, 7, 9, -4], [0, 14, 21, 2], [0, 5, 26, 4]],
485
+ 15: [[0, 8, 9, -5], [0, 15, 22, 2], [0, 6, 28, 5]],
486
+ 16: [[0, 8, 10, -5], [0, 16, 24, 2], [0, 6, 30, 5]],
487
+ 17: [[0, 8, 11, -5], [0, 17, 26, 2], [0, 6, 32, 5]],
488
+ 18: [[0, 9, 11, -5], [0, 18, 28, 2], [0, 7, 34, 6]],
489
+ 19: [[0, 9, 12, -6], [0, 19, 29, 2], [0, 7, 36, 6]],
490
+ 20: [[0, 1, 13, -6], [0, 20, 31, 3], [0, 8, 38, 7]],
491
+ 21: [[0, 1, 13, -6], [0, 21, 33, 3], [0, 8, 40, 7]],
492
+ 22: [[0, 1, 14, -6], [0, 22, 35, 3], [0, 8, 42, 7]],
493
+ 23: [[0, 1, 14, -7], [0, 23, 36, 3], [0, 9, 44, 8]],
494
+ 24: [[0, 1, 15, -7], [0, 24, 38, 3], [0, 9, 46, 8]]
495
+ };
496
+ function addPixels(value) {
497
+ return value.map((v) => jsUtilities.convertToUnit(v)).join(" ");
498
+ }
499
+ class Elevation {
500
+ static getRules() {
390
501
  return [
391
502
  [
392
- trimmedClass,
393
- this.scrollBlockedClass.rules,
503
+ /^elevation-([\d.]+)$/,
504
+ ([, body]) => {
505
+ const elevation = ELEVATION_DICTIONARY[body];
506
+ if (!elevation) {
507
+ return;
508
+ }
509
+ const [ringOffset, ringShadow, shadow] = elevation;
510
+ const unRingOffsetShadow = addPixels(ringOffset);
511
+ const unRingShadow = addPixels(ringShadow);
512
+ const unShadow = addPixels(shadow);
513
+ return {
514
+ "--un-ring-offset-shadow": `${unRingOffsetShadow} ${COLOR_RING_OFFSET}`,
515
+ "--un-ring-shadow": `${unRingShadow} ${COLOR_RING_SHADOW}`,
516
+ "--un-shadow": `${unShadow} ${COLOR_SHADOW}`,
517
+ "box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)"
518
+ };
519
+ },
394
520
  { layer: "vinicunca" }
395
521
  ]
396
522
  ];
397
523
  }
398
524
  }
399
525
 
526
+ const FONT_NAMES = {
527
+ "h1": {
528
+ fontSize: "6rem",
529
+ lineHeight: "6rem",
530
+ letterSpacing: "-0.015625em"
531
+ },
532
+ "h2": {
533
+ fontSize: "3.75rem",
534
+ lineHeight: "3.75rem",
535
+ letterSpacing: "-0.0083333333em"
536
+ },
537
+ "h3": {
538
+ fontSize: "3rem",
539
+ lineHeight: "3.125rem",
540
+ letterSpacing: "normal"
541
+ },
542
+ "h4": {
543
+ fontSize: "2.125rem",
544
+ lineHeight: "2.5rem",
545
+ letterSpacing: "0.0073529412em"
546
+ },
547
+ "h5": {
548
+ fontSize: "1.5rem",
549
+ lineHeight: "2rem",
550
+ letterSpacing: "normal"
551
+ },
552
+ "h6": {
553
+ fontSize: "1.25rem",
554
+ lineHeight: "2rem",
555
+ letterSpacing: "0.0125em"
556
+ },
557
+ "subtitle-1": {
558
+ fontSize: "1rem",
559
+ lineHeight: "1.75rem",
560
+ letterSpacing: "0.009375em"
561
+ },
562
+ "subtitle-2": {
563
+ fontSize: "0.875rem",
564
+ lineHeight: "1.375rem",
565
+ letterSpacing: "0.0071428571em"
566
+ },
567
+ "body-1": {
568
+ fontSize: "1rem",
569
+ lineHeight: "1.5rem",
570
+ letterSpacing: "0.03125em"
571
+ },
572
+ "body-2": {
573
+ fontSize: "0.875rem",
574
+ lineHeight: "1.25rem",
575
+ letterSpacing: "0.0178571429em"
576
+ },
577
+ "caption": {
578
+ fontSize: "0.75rem",
579
+ lineHeight: "1.25rem",
580
+ letterSpacing: "0.0333333333em"
581
+ },
582
+ "overline": {
583
+ fontSize: "0.75rem",
584
+ lineHeight: "2rem",
585
+ letterSpacing: "0.1666666667em"
586
+ },
587
+ "collapse-panel": {
588
+ fontSize: " 0.9375rem",
589
+ lineHeight: "1"
590
+ }
591
+ };
592
+ class Typography {
593
+ static getThemes() {
594
+ const theme = {
595
+ fontSize: {},
596
+ lineHeight: {},
597
+ letterSpacing: {}
598
+ };
599
+ Object.keys(FONT_NAMES).forEach((key) => {
600
+ const { fontSize, lineHeight, letterSpacing } = FONT_NAMES[key];
601
+ theme.fontSize[key] = [fontSize, lineHeight];
602
+ theme.lineHeight[key] = lineHeight;
603
+ if (letterSpacing) {
604
+ theme.letterSpacing[key] = letterSpacing;
605
+ }
606
+ });
607
+ return theme;
608
+ }
609
+ }
610
+
400
611
  class VinicuncaConfig {
401
612
  constructor(options) {
402
613
  const { prefix, components, brands } = options;
614
+ this.enablePreflight = options.enablePreflight ?? true;
403
615
  this.brand = new Brand({
404
616
  prefix,
405
617
  ...brands
@@ -407,7 +619,10 @@ class VinicuncaConfig {
407
619
  this.color = new Color({
408
620
  prefix
409
621
  });
410
- this.elevation = new Elevation();
622
+ this.divider = new Divider({
623
+ prefix,
624
+ ...components?.divider
625
+ });
411
626
  this.button = new Button({
412
627
  prefix,
413
628
  ...components?.button
@@ -418,6 +633,7 @@ class VinicuncaConfig {
418
633
  });
419
634
  }
420
635
  getPreset() {
636
+ const preflights = this.enablePreflight ? this.definePreflights() : [];
421
637
  return {
422
638
  name: "unocss-preset-vinicunca",
423
639
  layers: {
@@ -426,44 +642,60 @@ class VinicuncaConfig {
426
642
  default: 0,
427
643
  variants: 1
428
644
  },
429
- preflights: this.definePreflights(),
430
- rules: this.defineRules(),
431
- shortcuts: this.defineShortcuts(),
432
- theme: {
433
- letterSpacing: {
434
- button: "0.0892857143em"
435
- },
436
- textIndent: {
437
- button: "0.0892857143em"
645
+ preflights,
646
+ theme: this.defineTheme(),
647
+ rules: this.defineRules()
648
+ };
649
+ }
650
+ definePreflights() {
651
+ return [
652
+ this.brand.getPreflight()
653
+ ];
654
+ }
655
+ defineTheme() {
656
+ const themes = [
657
+ Typography.getThemes(),
658
+ Animation.getThemes(),
659
+ Button.getThemes(),
660
+ {
661
+ lineWidth: {
662
+ thin: "thin",
663
+ medium: "medium",
664
+ thick: "thick"
438
665
  }
439
666
  }
440
- };
667
+ ];
668
+ return themes.reduce((prev, acc) => jsUtilities.mergeDeep(prev, acc), {});
441
669
  }
442
670
  getTransformer() {
671
+ const idFilter = pluginutils.createFilter(
672
+ [
673
+ /\.tsx?$/,
674
+ /\.vue$/,
675
+ /\.vue\?vue/
676
+ ],
677
+ [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/]
678
+ );
443
679
  return {
444
680
  name: "vinicunca-transformers",
445
681
  enforce: "pre",
446
- idFilter: (id) => !!id.match(/\.(vue)($|\?)/),
682
+ idFilter,
447
683
  transform: (str) => {
448
- this.button.transfromClasses(str);
684
+ let content = str.toString();
685
+ content = this.button.transfromClasses(content);
686
+ content = this.divider.transfromClasses(content);
687
+ str.overwrite(0, str.length(), content);
449
688
  }
450
689
  };
451
690
  }
452
- definePreflights() {
453
- return [
454
- this.brand.getPreflight()
455
- ];
456
- }
457
691
  defineRules() {
458
692
  return [
459
693
  this.color.getRules(),
460
- this.elevation.getRules()
694
+ Elevation.getRules()
461
695
  ].flat(1);
462
696
  }
463
697
  defineShortcuts() {
464
- return [
465
- ...this.overlay.getShortcuts()
466
- ];
698
+ return [];
467
699
  }
468
700
  }
469
701