@versini/ui-styles 8.1.0 → 8.1.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/dist/cli/tokens.ts +137 -0
- package/dist/cli/ui-doctor.js +8 -11
- package/dist/index.js +3 -3
- package/package.json +6 -3
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import colors from "tailwindcss/colors";
|
|
2
|
+
|
|
3
|
+
const errorColorLight = "#ff3f3f";
|
|
4
|
+
const accentColor = colors.violet[300];
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
colors: {
|
|
8
|
+
/**
|
|
9
|
+
* Action tokens.
|
|
10
|
+
* To be used for background color for interactive elements
|
|
11
|
+
* like buttons, links, etc.
|
|
12
|
+
* @example bg-action-dark, hover:bg-action-dark-hover
|
|
13
|
+
*/
|
|
14
|
+
"action-dark": colors.slate[600],
|
|
15
|
+
"action-dark-hover": colors.slate[700],
|
|
16
|
+
"action-dark-active": colors.slate[800],
|
|
17
|
+
|
|
18
|
+
"action-light": accentColor,
|
|
19
|
+
"action-light-hover": colors.violet[400],
|
|
20
|
+
"action-light-active": colors.violet[500],
|
|
21
|
+
|
|
22
|
+
"action-danger-dark": colors.red[900],
|
|
23
|
+
"action-danger-dark-hover": colors.red[700],
|
|
24
|
+
"action-danger-dark-active": colors.red[600],
|
|
25
|
+
|
|
26
|
+
"action-danger-light": colors.red[900],
|
|
27
|
+
"action-danger-light-hover": colors.red[700],
|
|
28
|
+
"action-danger-light-active": colors.red[600],
|
|
29
|
+
|
|
30
|
+
"action-selected-dark": colors.green[700],
|
|
31
|
+
"action-selected-dark-hover": colors.green[600],
|
|
32
|
+
"action-selected-dark-active": colors.green[500],
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Surface tokens.
|
|
36
|
+
* To be used for background colors of containers, cards, modals, etc.
|
|
37
|
+
* @example bg-surface-medium
|
|
38
|
+
*/
|
|
39
|
+
"surface-darker": colors.slate[900],
|
|
40
|
+
"surface-dark": colors.slate[700],
|
|
41
|
+
"surface-medium": colors.slate[500],
|
|
42
|
+
"surface-light": colors.slate[300],
|
|
43
|
+
"surface-lighter": colors.slate[200],
|
|
44
|
+
"surface-lightest": colors.slate[100],
|
|
45
|
+
"surface-accent": "#0071EB",
|
|
46
|
+
"surface-information": colors.violet[200],
|
|
47
|
+
"surface-success": colors.green[200],
|
|
48
|
+
"surface-warning": colors.orange[200],
|
|
49
|
+
"surface-error": colors.red[200],
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* Typography tokens.
|
|
53
|
+
* To be used for text colors.
|
|
54
|
+
* @example text-copy-light, hover:text-copy-light-hover
|
|
55
|
+
*/
|
|
56
|
+
"copy-dark": colors.slate[900],
|
|
57
|
+
"copy-dark-hover": colors.slate[900],
|
|
58
|
+
"copy-dark-active": colors.slate[900],
|
|
59
|
+
|
|
60
|
+
"copy-medium": colors.slate[400],
|
|
61
|
+
"copy-medium-hover": colors.slate[400],
|
|
62
|
+
"copy-medium-active": colors.slate[400],
|
|
63
|
+
|
|
64
|
+
"copy-light": colors.slate[200],
|
|
65
|
+
"copy-light-hover": colors.slate[200],
|
|
66
|
+
"copy-light-active": colors.slate[200],
|
|
67
|
+
|
|
68
|
+
"copy-lighter": colors.white,
|
|
69
|
+
"copy-lighter-hover": colors.white,
|
|
70
|
+
"copy-lighter-active": colors.white,
|
|
71
|
+
|
|
72
|
+
"copy-error": colors.red[800],
|
|
73
|
+
"copy-error-dark": colors.red[700],
|
|
74
|
+
"copy-error-light": colors.red[500],
|
|
75
|
+
|
|
76
|
+
"copy-success": colors.green[800],
|
|
77
|
+
"copy-success-light": colors.green[500],
|
|
78
|
+
|
|
79
|
+
"copy-information": colors.violet[800],
|
|
80
|
+
"copy-warning": colors.orange[800],
|
|
81
|
+
|
|
82
|
+
"copy-accent": "#a9b9ad",
|
|
83
|
+
"copy-accent-dark": "#cde8d4",
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Border tokens.
|
|
87
|
+
* To be used for border colors.
|
|
88
|
+
* @example border-border-medium
|
|
89
|
+
*/
|
|
90
|
+
"border-dark": colors.slate[900],
|
|
91
|
+
"border-medium": colors.slate[400],
|
|
92
|
+
"border-light": colors.slate[300],
|
|
93
|
+
"border-accent": accentColor,
|
|
94
|
+
|
|
95
|
+
"border-danger-dark": colors.red[900],
|
|
96
|
+
"border-danger-medium": colors.red[400],
|
|
97
|
+
"border-danger-light": colors.red[300],
|
|
98
|
+
|
|
99
|
+
"border-selected-dark": colors.green[800],
|
|
100
|
+
"border-selected-medium": colors.green[400],
|
|
101
|
+
"border-selected-light": colors.green[300],
|
|
102
|
+
|
|
103
|
+
"border-white": colors.white,
|
|
104
|
+
"border-error-dark": colors.red[700],
|
|
105
|
+
"border-error-light": errorColorLight,
|
|
106
|
+
|
|
107
|
+
"border-information": colors.violet[400],
|
|
108
|
+
"border-success": colors.green[400],
|
|
109
|
+
"border-warning": colors.orange[400],
|
|
110
|
+
"border-error": colors.red[400],
|
|
111
|
+
|
|
112
|
+
/**
|
|
113
|
+
* Focus tokens.
|
|
114
|
+
* To be used for focus outlines and rings.
|
|
115
|
+
* @example outline-focus-dark, focus:ring-focus-dark
|
|
116
|
+
*/
|
|
117
|
+
"focus-dark": colors.slate[400],
|
|
118
|
+
"focus-light": colors.slate[400],
|
|
119
|
+
"focus-error-dark": colors.red[700],
|
|
120
|
+
"focus-error-light": errorColorLight,
|
|
121
|
+
|
|
122
|
+
/**
|
|
123
|
+
* Table tokens
|
|
124
|
+
* To be used for table row and header backgrounds.
|
|
125
|
+
* @example bg-table-dark-odd
|
|
126
|
+
*/
|
|
127
|
+
"table-head-dark": colors.gray[950],
|
|
128
|
+
"table-dark": colors.gray[700],
|
|
129
|
+
"table-dark-odd": colors.gray[800],
|
|
130
|
+
"table-dark-even": colors.gray[900],
|
|
131
|
+
|
|
132
|
+
"table-head-light": colors.gray[100],
|
|
133
|
+
"table-light": colors.gray[100],
|
|
134
|
+
"table-light-odd": colors.gray[200],
|
|
135
|
+
"table-light-even": colors.gray[300],
|
|
136
|
+
},
|
|
137
|
+
};
|
package/dist/cli/ui-doctor.js
CHANGED
|
@@ -289,18 +289,15 @@ function printReport(report, json = false) {
|
|
|
289
289
|
function getTokensFilePath() {
|
|
290
290
|
const __filename = fileURLToPath(import.meta.url);
|
|
291
291
|
const __dirname = dirname(__filename);
|
|
292
|
-
const
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
if (existsSync(path2)) {
|
|
300
|
-
return path2;
|
|
301
|
-
}
|
|
292
|
+
const prodPath = resolve(__dirname, "tokens.ts");
|
|
293
|
+
if (existsSync(prodPath)) {
|
|
294
|
+
return prodPath;
|
|
295
|
+
}
|
|
296
|
+
const devPath = resolve(__dirname, "../plugins/tailwindcss/tokens.ts");
|
|
297
|
+
if (existsSync(devPath)) {
|
|
298
|
+
return devPath;
|
|
302
299
|
}
|
|
303
|
-
return
|
|
300
|
+
return devPath;
|
|
304
301
|
}
|
|
305
302
|
function parseVariables(content) {
|
|
306
303
|
const variables = /* @__PURE__ */ new Map();
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-styles v8.1.
|
|
2
|
+
@versini/ui-styles v8.1.1
|
|
3
3
|
© 2025 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
try {
|
|
6
6
|
if (!window.__VERSINI_UI_STYLES__) {
|
|
7
7
|
window.__VERSINI_UI_STYLES__ = {
|
|
8
|
-
version: "8.1.
|
|
9
|
-
buildTime: "12/21/2025
|
|
8
|
+
version: "8.1.1",
|
|
9
|
+
buildTime: "12/21/2025 04:51 PM EST",
|
|
10
10
|
homepage: "https://www.npmjs.com/package/@versini/ui-styles",
|
|
11
11
|
license: "MIT",
|
|
12
12
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-styles",
|
|
3
|
-
"version": "8.1.
|
|
3
|
+
"version": "8.1.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -43,8 +43,11 @@
|
|
|
43
43
|
"@tailwindcss/container-queries": "0.1.1",
|
|
44
44
|
"@tailwindcss/typography": "0.5.19",
|
|
45
45
|
"culori": "4.0.2",
|
|
46
|
-
"fs-extra": "11.3.
|
|
46
|
+
"fs-extra": "11.3.3",
|
|
47
47
|
"tailwindcss": "4.1.18"
|
|
48
48
|
},
|
|
49
|
-
"
|
|
49
|
+
"devDependencies": {
|
|
50
|
+
"rollup-plugin-copy": "3.5.0"
|
|
51
|
+
},
|
|
52
|
+
"gitHead": "72dae70f6fb65a797e1abbca1afd471af34b804e"
|
|
50
53
|
}
|