@trackunit/css-component-tokens 0.0.30 → 0.0.31
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 +282 -231
- package/index.js +284 -229
- package/package.json +2 -2
- package/src/component-tokens/ComponentTokenDefinition.d.ts +11 -11
- package/src/component-tokens/ComponentTokenVariablesByThemeName.d.ts +220 -220
- package/src/component-tokens/ComponentTokens.d.ts +250 -250
- package/src/component-tokens/MockComponent.d.ts +26 -26
- package/src/component-tokens/components/BaseInput.tokens.d.ts +33 -33
- package/src/component-tokens/components/Button.tokens.d.ts +35 -35
- package/src/component-tokens/components/Card.tokens.d.ts +51 -51
- package/src/component-tokens/components/FormGroup.tokens.d.ts +21 -21
- package/src/component-tokens/components/Popover/Popover.tokens.d.ts +13 -13
- package/src/component-tokens/components/Popover/PopoverListItem.tokens.d.ts +13 -13
- package/src/component-tokens/components/Search.tokens.d.ts +83 -83
- package/src/component-tokens/pluginUtilityFunctions.d.ts +30 -30
- package/src/index.d.ts +3 -3
- package/src/plugin.d.ts +4 -4
package/index.cjs
CHANGED
|
@@ -3,262 +3,313 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var cssTailwindCustomPropertiesPlugin = require('@trackunit/css-tailwind-custom-properties-plugin');
|
|
6
|
-
var plugin = require('tailwindcss/plugin');
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
var createPlugin$2 = {};
|
|
9
8
|
|
|
10
|
-
var
|
|
9
|
+
var createPlugin$1 = {};
|
|
11
10
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
(function (exports) {
|
|
12
|
+
Object.defineProperty(exports, "__esModule", {
|
|
13
|
+
value: true
|
|
14
|
+
});
|
|
15
|
+
Object.defineProperty(exports, "default", {
|
|
16
|
+
enumerable: true,
|
|
17
|
+
get: ()=>_default
|
|
18
|
+
});
|
|
19
|
+
function createPlugin(plugin, config) {
|
|
20
|
+
return {
|
|
21
|
+
handler: plugin,
|
|
22
|
+
config
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
createPlugin.withOptions = function(pluginFunction, configFunction = ()=>({})) {
|
|
26
|
+
const optionsFunction = function(options) {
|
|
27
|
+
return {
|
|
28
|
+
__options: options,
|
|
29
|
+
handler: pluginFunction(options),
|
|
30
|
+
config: configFunction(options)
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
optionsFunction.__isOptionsFunction = true;
|
|
34
|
+
// Expose plugin dependencies so that `object-hash` returns a different
|
|
35
|
+
// value if anything here changes, to ensure a rebuild is triggered.
|
|
36
|
+
optionsFunction.__pluginFunction = pluginFunction;
|
|
37
|
+
optionsFunction.__configFunction = configFunction;
|
|
38
|
+
return optionsFunction;
|
|
39
|
+
};
|
|
40
|
+
const _default = createPlugin;
|
|
41
|
+
}(createPlugin$1));
|
|
42
|
+
|
|
43
|
+
(function (exports) {
|
|
44
|
+
Object.defineProperty(exports, "__esModule", {
|
|
45
|
+
value: true
|
|
46
|
+
});
|
|
47
|
+
Object.defineProperty(exports, "default", {
|
|
48
|
+
enumerable: true,
|
|
49
|
+
get: ()=>_default
|
|
50
|
+
});
|
|
51
|
+
const _createPlugin = /*#__PURE__*/ _interopRequireDefault(createPlugin$1);
|
|
52
|
+
function _interopRequireDefault(obj) {
|
|
53
|
+
return obj && obj.__esModule ? obj : {
|
|
54
|
+
default: obj
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
const _default = _createPlugin.default;
|
|
58
|
+
}(createPlugin$2));
|
|
59
|
+
|
|
60
|
+
let createPlugin = createPlugin$2;
|
|
61
|
+
var plugin = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default;
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* Returns the designTokens passed, but ensures it satisfies DesignTokens type while keeping it literal
|
|
65
|
+
*/
|
|
15
66
|
const AsComponentTokenDefinition = (designTokens) => designTokens;
|
|
16
67
|
|
|
17
|
-
/*
|
|
18
|
-
* This file holds the custom design tokens for this component.
|
|
19
|
-
* These will be added to the tailwind configuration.
|
|
20
|
-
*/
|
|
21
|
-
const BaseInputTokenDefinition = AsComponentTokenDefinition({
|
|
22
|
-
DEFAULT: {
|
|
23
|
-
border: { borderRadius: "var(--border-radius-lg)", borderWidth: "1px" },
|
|
24
|
-
shadow: { boxShadow: "var(--box-shadow-sm)" },
|
|
25
|
-
background: { backgroundColor: "white" },
|
|
26
|
-
prefix: { borderRightWidth: "1px" },
|
|
27
|
-
},
|
|
28
|
-
"theme-marketing": {
|
|
29
|
-
border: { borderRadius: "70px", borderWidth: "0px" },
|
|
30
|
-
shadow: { boxShadow: "none" },
|
|
31
|
-
background: { backgroundColor: "rgb(var(--color-stone-50))" },
|
|
32
|
-
prefix: { borderRightWidth: "0px" },
|
|
33
|
-
},
|
|
68
|
+
/*
|
|
69
|
+
* This file holds the custom design tokens for this component.
|
|
70
|
+
* These will be added to the tailwind configuration.
|
|
71
|
+
*/
|
|
72
|
+
const BaseInputTokenDefinition = AsComponentTokenDefinition({
|
|
73
|
+
DEFAULT: {
|
|
74
|
+
border: { borderRadius: "var(--border-radius-lg)", borderWidth: "1px" },
|
|
75
|
+
shadow: { boxShadow: "var(--box-shadow-sm)" },
|
|
76
|
+
background: { backgroundColor: "white" },
|
|
77
|
+
prefix: { borderRightWidth: "1px" },
|
|
78
|
+
},
|
|
79
|
+
"theme-marketing": {
|
|
80
|
+
border: { borderRadius: "70px", borderWidth: "0px" },
|
|
81
|
+
shadow: { boxShadow: "none" },
|
|
82
|
+
background: { backgroundColor: "rgb(var(--color-stone-50))" },
|
|
83
|
+
prefix: { borderRightWidth: "0px" },
|
|
84
|
+
},
|
|
34
85
|
});
|
|
35
86
|
|
|
36
|
-
/*
|
|
37
|
-
* This file holds the custom design tokens for this component.
|
|
38
|
-
* These will be added to the tailwind configuration.
|
|
39
|
-
*/
|
|
40
|
-
const ButtonTokenDefinition = AsComponentTokenDefinition({
|
|
41
|
-
DEFAULT: {
|
|
42
|
-
"secondary-color": { backgroundColor: "rgb(var(--color-secondary-200))", color: "rgb(var(--color-secondary-600))" },
|
|
43
|
-
border: { borderRadius: "var(--border-radius-lg)" },
|
|
44
|
-
height: { height: "auto" },
|
|
45
|
-
padding: { paddingLeft: "var(--spacing-2-5)", paddingRight: "var(--spacing-2-5)" },
|
|
46
|
-
},
|
|
47
|
-
"theme-marketing": {
|
|
48
|
-
"secondary-color": { backgroundColor: "rgb(var(--color-secondary-600))", color: "rgb(var(--color-secondary-50))" },
|
|
49
|
-
border: { borderRadius: "50px" },
|
|
50
|
-
height: { height: "55px" },
|
|
51
|
-
padding: { paddingLeft: "var(--spacing-12)", paddingRight: "var(--spacing-12)" },
|
|
52
|
-
},
|
|
87
|
+
/*
|
|
88
|
+
* This file holds the custom design tokens for this component.
|
|
89
|
+
* These will be added to the tailwind configuration.
|
|
90
|
+
*/
|
|
91
|
+
const ButtonTokenDefinition = AsComponentTokenDefinition({
|
|
92
|
+
DEFAULT: {
|
|
93
|
+
"secondary-color": { backgroundColor: "rgb(var(--color-secondary-200))", color: "rgb(var(--color-secondary-600))" },
|
|
94
|
+
border: { borderRadius: "var(--border-radius-lg)" },
|
|
95
|
+
height: { height: "auto" },
|
|
96
|
+
padding: { paddingLeft: "var(--spacing-2-5)", paddingRight: "var(--spacing-2-5)" },
|
|
97
|
+
},
|
|
98
|
+
"theme-marketing": {
|
|
99
|
+
"secondary-color": { backgroundColor: "rgb(var(--color-secondary-600))", color: "rgb(var(--color-secondary-50))" },
|
|
100
|
+
border: { borderRadius: "50px" },
|
|
101
|
+
height: { height: "55px" },
|
|
102
|
+
padding: { paddingLeft: "var(--spacing-12)", paddingRight: "var(--spacing-12)" },
|
|
103
|
+
},
|
|
53
104
|
});
|
|
54
105
|
|
|
55
|
-
/*
|
|
56
|
-
* This file holds the custom design tokens for this component.
|
|
57
|
-
* These will be added to the tailwind configuration.
|
|
58
|
-
*/
|
|
59
|
-
const CardTokenDefinition = AsComponentTokenDefinition({
|
|
60
|
-
DEFAULT: {
|
|
61
|
-
border: { borderColor: "rgb(var(--color-slate-200))", borderRadius: "var(--border-radius-DEFAULT)" },
|
|
62
|
-
"popover-border": { borderRadius: "var(--border-radius-DEFAULT)" },
|
|
63
|
-
shadow: { boxShadow: "var(--box-shadow-DEFAULT)" },
|
|
64
|
-
spacing: { gap: "var(--spacing-3)", padding: "var(--spacing-3)" },
|
|
65
|
-
"spacing-sm": { gap: "var(--spacing-4)", padding: "var(--spacing-4)" },
|
|
66
|
-
"spacing-md": { gap: "var(--spacing-4)", padding: "var(--spacing-6)" },
|
|
67
|
-
},
|
|
68
|
-
"theme-marketing": {
|
|
69
|
-
border: { borderColor: "rgba(0, 0, 0, 0)", borderRadius: "2rem" },
|
|
70
|
-
"popover-border": { borderRadius: "1rem" },
|
|
71
|
-
shadow: { boxShadow: "0px 20px 48px rgba(73, 55, 54, 0.1)" },
|
|
72
|
-
spacing: { gap: "var(--spacing-1)", padding: "var(--spacing-1)" },
|
|
73
|
-
"spacing-sm": { gap: "var(--spacing-1)", padding: "var(--spacing-1)" },
|
|
74
|
-
"spacing-md": { gap: "var(--spacing-1)", padding: "var(--spacing-1)" },
|
|
75
|
-
},
|
|
106
|
+
/*
|
|
107
|
+
* This file holds the custom design tokens for this component.
|
|
108
|
+
* These will be added to the tailwind configuration.
|
|
109
|
+
*/
|
|
110
|
+
const CardTokenDefinition = AsComponentTokenDefinition({
|
|
111
|
+
DEFAULT: {
|
|
112
|
+
border: { borderColor: "rgb(var(--color-slate-200))", borderRadius: "var(--border-radius-DEFAULT)" },
|
|
113
|
+
"popover-border": { borderRadius: "var(--border-radius-DEFAULT)" },
|
|
114
|
+
shadow: { boxShadow: "var(--box-shadow-DEFAULT)" },
|
|
115
|
+
spacing: { gap: "var(--spacing-3)", padding: "var(--spacing-3)" },
|
|
116
|
+
"spacing-sm": { gap: "var(--spacing-4)", padding: "var(--spacing-4)" },
|
|
117
|
+
"spacing-md": { gap: "var(--spacing-4)", padding: "var(--spacing-6)" },
|
|
118
|
+
},
|
|
119
|
+
"theme-marketing": {
|
|
120
|
+
border: { borderColor: "rgba(0, 0, 0, 0)", borderRadius: "2rem" },
|
|
121
|
+
"popover-border": { borderRadius: "1rem" },
|
|
122
|
+
shadow: { boxShadow: "0px 20px 48px rgba(73, 55, 54, 0.1)" },
|
|
123
|
+
spacing: { gap: "var(--spacing-1)", padding: "var(--spacing-1)" },
|
|
124
|
+
"spacing-sm": { gap: "var(--spacing-1)", padding: "var(--spacing-1)" },
|
|
125
|
+
"spacing-md": { gap: "var(--spacing-1)", padding: "var(--spacing-1)" },
|
|
126
|
+
},
|
|
76
127
|
});
|
|
77
128
|
|
|
78
|
-
/*
|
|
79
|
-
* This file holds the custom design tokens for this component.
|
|
80
|
-
* These will be added to the tailwind configuration.
|
|
81
|
-
*/
|
|
82
|
-
const FormGroupTokenDefinition = AsComponentTokenDefinition({
|
|
83
|
-
DEFAULT: {
|
|
84
|
-
gap: { display: "auto", gap: "auto" },
|
|
85
|
-
font: { fontWeight: "normal" },
|
|
86
|
-
},
|
|
87
|
-
"theme-marketing": {
|
|
88
|
-
gap: { display: "grid", gap: "var(--spacing-4)" },
|
|
89
|
-
font: { fontWeight: "700" },
|
|
90
|
-
},
|
|
129
|
+
/*
|
|
130
|
+
* This file holds the custom design tokens for this component.
|
|
131
|
+
* These will be added to the tailwind configuration.
|
|
132
|
+
*/
|
|
133
|
+
const FormGroupTokenDefinition = AsComponentTokenDefinition({
|
|
134
|
+
DEFAULT: {
|
|
135
|
+
gap: { display: "auto", gap: "auto" },
|
|
136
|
+
font: { fontWeight: "normal" },
|
|
137
|
+
},
|
|
138
|
+
"theme-marketing": {
|
|
139
|
+
gap: { display: "grid", gap: "var(--spacing-4)" },
|
|
140
|
+
font: { fontWeight: "700" },
|
|
141
|
+
},
|
|
91
142
|
});
|
|
92
143
|
|
|
93
|
-
/*
|
|
94
|
-
* This file holds the custom design tokens for this component.
|
|
95
|
-
* These will be added to the tailwind configuration.
|
|
96
|
-
*/
|
|
97
|
-
const PopoverTokenDefinition = AsComponentTokenDefinition({
|
|
98
|
-
DEFAULT: {
|
|
99
|
-
border: { borderRadius: "var(--border-radius-DEFAULT)" },
|
|
100
|
-
},
|
|
101
|
-
"theme-marketing": {
|
|
102
|
-
border: { borderRadius: "1rem" },
|
|
103
|
-
},
|
|
144
|
+
/*
|
|
145
|
+
* This file holds the custom design tokens for this component.
|
|
146
|
+
* These will be added to the tailwind configuration.
|
|
147
|
+
*/
|
|
148
|
+
const PopoverTokenDefinition = AsComponentTokenDefinition({
|
|
149
|
+
DEFAULT: {
|
|
150
|
+
border: { borderRadius: "var(--border-radius-DEFAULT)" },
|
|
151
|
+
},
|
|
152
|
+
"theme-marketing": {
|
|
153
|
+
border: { borderRadius: "1rem" },
|
|
154
|
+
},
|
|
104
155
|
});
|
|
105
156
|
|
|
106
|
-
/*
|
|
107
|
-
* This file holds the custom design tokens for this component.
|
|
108
|
-
* These will be added to the tailwind configuration.
|
|
109
|
-
*/
|
|
110
|
-
const PopoverListItemTokenDefinition = AsComponentTokenDefinition({
|
|
111
|
-
DEFAULT: {
|
|
112
|
-
border: { borderRadius: "var(--border-radius-DEFAULT)" },
|
|
113
|
-
},
|
|
114
|
-
"theme-marketing": {
|
|
115
|
-
border: { borderRadius: "1rem" },
|
|
116
|
-
},
|
|
157
|
+
/*
|
|
158
|
+
* This file holds the custom design tokens for this component.
|
|
159
|
+
* These will be added to the tailwind configuration.
|
|
160
|
+
*/
|
|
161
|
+
const PopoverListItemTokenDefinition = AsComponentTokenDefinition({
|
|
162
|
+
DEFAULT: {
|
|
163
|
+
border: { borderRadius: "var(--border-radius-DEFAULT)" },
|
|
164
|
+
},
|
|
165
|
+
"theme-marketing": {
|
|
166
|
+
border: { borderRadius: "1rem" },
|
|
167
|
+
},
|
|
117
168
|
});
|
|
118
169
|
|
|
119
|
-
/*
|
|
120
|
-
* This file holds the custom design tokens for this component.
|
|
121
|
-
* These will be added to the tailwind configuration.
|
|
122
|
-
*/
|
|
123
|
-
const SearchTokenDefinition = AsComponentTokenDefinition({
|
|
124
|
-
DEFAULT: {
|
|
125
|
-
width: { width: "9rem" },
|
|
126
|
-
background: { backgroundColor: "" },
|
|
127
|
-
borderless: { borderStyle: "hidden" },
|
|
128
|
-
"focus-hover": {
|
|
129
|
-
borderWidth: "1px",
|
|
130
|
-
borderBottomWidth: "1px",
|
|
131
|
-
borderColor: "rgb(var(--color-gray-400))",
|
|
132
|
-
borderBottomColor: "rgb(var(--color-gray-400))",
|
|
133
|
-
backgroundColor: "rgb(var(--color-slate-50))",
|
|
134
|
-
},
|
|
135
|
-
border: {
|
|
136
|
-
borderStyle: "solid",
|
|
137
|
-
borderWidth: "1px",
|
|
138
|
-
borderBottomWidth: "1px",
|
|
139
|
-
borderColor: "rgb(var(--color-gray-200))",
|
|
140
|
-
borderBottomColor: "rgb(var(--color-gray-200))",
|
|
141
|
-
borderRadius: "0.5rem",
|
|
142
|
-
},
|
|
143
|
-
"focus-within": {
|
|
144
|
-
borderColor: "rgb(var(--color-slate-400))",
|
|
145
|
-
boxShadow: "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)",
|
|
146
|
-
},
|
|
147
|
-
widen: { borderBottomColor: "rgb(var(--color-gray-400))" },
|
|
148
|
-
"widen-focus": { borderBottomColor: "rgb(var(--color-gray-400))" },
|
|
149
|
-
prefix: {
|
|
150
|
-
color: "rgb(var(--color-slate-400))",
|
|
151
|
-
cursor: "default",
|
|
152
|
-
},
|
|
153
|
-
},
|
|
154
|
-
"theme-marketing": {
|
|
155
|
-
width: { width: "0px" },
|
|
156
|
-
background: { backgroundColor: "transparent" },
|
|
157
|
-
borderless: {
|
|
158
|
-
borderStyle: "hidden",
|
|
159
|
-
},
|
|
160
|
-
"focus-hover": {
|
|
161
|
-
borderWidth: "0px",
|
|
162
|
-
borderBottomWidth: "2px",
|
|
163
|
-
borderColor: "rgb(var(--color-black-DEFAULT))",
|
|
164
|
-
borderBottomColor: "rgb(var(--color-black-DEFAULT))",
|
|
165
|
-
backgroundColor: "transparent",
|
|
166
|
-
},
|
|
167
|
-
border: {
|
|
168
|
-
borderStyle: "solid",
|
|
169
|
-
borderWidth: "0px",
|
|
170
|
-
borderBottomWidth: "2px",
|
|
171
|
-
borderColor: "rgb(var(--color-white-DEFAULT))",
|
|
172
|
-
borderBottomColor: "rgb(var(--color-black-DEFAULT))",
|
|
173
|
-
borderRadius: "0px",
|
|
174
|
-
},
|
|
175
|
-
"focus-within": {
|
|
176
|
-
borderColor: "none",
|
|
177
|
-
boxShadow: "none",
|
|
178
|
-
},
|
|
179
|
-
widen: {
|
|
180
|
-
borderBottomColor: "rgb(var(--color-white-DEFAULT))",
|
|
181
|
-
},
|
|
182
|
-
"widen-focus": {
|
|
183
|
-
borderBottomColor: "rgb(var(--color-black-DEFAULT))",
|
|
184
|
-
},
|
|
185
|
-
prefix: {
|
|
186
|
-
color: "rgb(var(--color-slate-600))",
|
|
187
|
-
cursor: "pointer",
|
|
188
|
-
},
|
|
189
|
-
},
|
|
170
|
+
/*
|
|
171
|
+
* This file holds the custom design tokens for this component.
|
|
172
|
+
* These will be added to the tailwind configuration.
|
|
173
|
+
*/
|
|
174
|
+
const SearchTokenDefinition = AsComponentTokenDefinition({
|
|
175
|
+
DEFAULT: {
|
|
176
|
+
width: { width: "9rem" },
|
|
177
|
+
background: { backgroundColor: "" },
|
|
178
|
+
borderless: { borderStyle: "hidden" },
|
|
179
|
+
"focus-hover": {
|
|
180
|
+
borderWidth: "1px",
|
|
181
|
+
borderBottomWidth: "1px",
|
|
182
|
+
borderColor: "rgb(var(--color-gray-400))",
|
|
183
|
+
borderBottomColor: "rgb(var(--color-gray-400))",
|
|
184
|
+
backgroundColor: "rgb(var(--color-slate-50))",
|
|
185
|
+
},
|
|
186
|
+
border: {
|
|
187
|
+
borderStyle: "solid",
|
|
188
|
+
borderWidth: "1px",
|
|
189
|
+
borderBottomWidth: "1px",
|
|
190
|
+
borderColor: "rgb(var(--color-gray-200))",
|
|
191
|
+
borderBottomColor: "rgb(var(--color-gray-200))",
|
|
192
|
+
borderRadius: "0.5rem",
|
|
193
|
+
},
|
|
194
|
+
"focus-within": {
|
|
195
|
+
borderColor: "rgb(var(--color-slate-400))",
|
|
196
|
+
boxShadow: "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)",
|
|
197
|
+
},
|
|
198
|
+
widen: { borderBottomColor: "rgb(var(--color-gray-400))" },
|
|
199
|
+
"widen-focus": { borderBottomColor: "rgb(var(--color-gray-400))" },
|
|
200
|
+
prefix: {
|
|
201
|
+
color: "rgb(var(--color-slate-400))",
|
|
202
|
+
cursor: "default",
|
|
203
|
+
},
|
|
204
|
+
},
|
|
205
|
+
"theme-marketing": {
|
|
206
|
+
width: { width: "0px" },
|
|
207
|
+
background: { backgroundColor: "transparent" },
|
|
208
|
+
borderless: {
|
|
209
|
+
borderStyle: "hidden",
|
|
210
|
+
},
|
|
211
|
+
"focus-hover": {
|
|
212
|
+
borderWidth: "0px",
|
|
213
|
+
borderBottomWidth: "2px",
|
|
214
|
+
borderColor: "rgb(var(--color-black-DEFAULT))",
|
|
215
|
+
borderBottomColor: "rgb(var(--color-black-DEFAULT))",
|
|
216
|
+
backgroundColor: "transparent",
|
|
217
|
+
},
|
|
218
|
+
border: {
|
|
219
|
+
borderStyle: "solid",
|
|
220
|
+
borderWidth: "0px",
|
|
221
|
+
borderBottomWidth: "2px",
|
|
222
|
+
borderColor: "rgb(var(--color-white-DEFAULT))",
|
|
223
|
+
borderBottomColor: "rgb(var(--color-black-DEFAULT))",
|
|
224
|
+
borderRadius: "0px",
|
|
225
|
+
},
|
|
226
|
+
"focus-within": {
|
|
227
|
+
borderColor: "none",
|
|
228
|
+
boxShadow: "none",
|
|
229
|
+
},
|
|
230
|
+
widen: {
|
|
231
|
+
borderBottomColor: "rgb(var(--color-white-DEFAULT))",
|
|
232
|
+
},
|
|
233
|
+
"widen-focus": {
|
|
234
|
+
borderBottomColor: "rgb(var(--color-black-DEFAULT))",
|
|
235
|
+
},
|
|
236
|
+
prefix: {
|
|
237
|
+
color: "rgb(var(--color-slate-600))",
|
|
238
|
+
cursor: "pointer",
|
|
239
|
+
},
|
|
240
|
+
},
|
|
190
241
|
});
|
|
191
242
|
|
|
192
|
-
const componentTokenDefinitions = {
|
|
193
|
-
card: CardTokenDefinition,
|
|
194
|
-
button: ButtonTokenDefinition,
|
|
195
|
-
search: SearchTokenDefinition,
|
|
196
|
-
popover: PopoverTokenDefinition,
|
|
197
|
-
popoverListItem: PopoverListItemTokenDefinition,
|
|
198
|
-
baseInput: BaseInputTokenDefinition,
|
|
199
|
-
formGroup: FormGroupTokenDefinition,
|
|
243
|
+
const componentTokenDefinitions = {
|
|
244
|
+
card: CardTokenDefinition,
|
|
245
|
+
button: ButtonTokenDefinition,
|
|
246
|
+
search: SearchTokenDefinition,
|
|
247
|
+
popover: PopoverTokenDefinition,
|
|
248
|
+
popoverListItem: PopoverListItemTokenDefinition,
|
|
249
|
+
baseInput: BaseInputTokenDefinition,
|
|
250
|
+
formGroup: FormGroupTokenDefinition,
|
|
200
251
|
};
|
|
201
252
|
|
|
202
|
-
/** Returns object structure for Tailwind variable config for specified theme for ALL ComponentTokenDefinitions. */
|
|
203
|
-
const getComponentTokenVariablesByThemeName = (theme, componentTokenDefinitions) => {
|
|
204
|
-
const themeTokenObject = Object.fromEntries(Object.entries(componentTokenDefinitions).map(([componentName, componentThemes]) => [
|
|
205
|
-
componentName,
|
|
206
|
-
componentThemes[theme],
|
|
207
|
-
]));
|
|
208
|
-
return themeTokenObject;
|
|
253
|
+
/** Returns object structure for Tailwind variable config for specified theme for ALL ComponentTokenDefinitions. */
|
|
254
|
+
const getComponentTokenVariablesByThemeName = (theme, componentTokenDefinitions) => {
|
|
255
|
+
const themeTokenObject = Object.fromEntries(Object.entries(componentTokenDefinitions).map(([componentName, componentThemes]) => [
|
|
256
|
+
componentName,
|
|
257
|
+
componentThemes[theme],
|
|
258
|
+
]));
|
|
259
|
+
return themeTokenObject;
|
|
209
260
|
};
|
|
210
261
|
|
|
211
|
-
/** The prefix for css variables and tailwind component classes */
|
|
212
|
-
const PREFIX = "component";
|
|
213
|
-
/**
|
|
214
|
-
* Get the css variable value for the component tokens specific property.
|
|
215
|
-
*
|
|
216
|
-
* @param component The name of the component to get the variable for.
|
|
217
|
-
* @param token The component-level token name
|
|
218
|
-
* @param cssProperty The css property on the component-level Token
|
|
219
|
-
* @returns {string} `var(--${PREFIX}-${component}-${token}-${cssProperty})`
|
|
220
|
-
*/
|
|
221
|
-
const componentTokenAsCssVariableString = (component, token, cssProperty) => `var(--${PREFIX}-${component}-${token}-${cssProperty})`;
|
|
222
|
-
/**
|
|
223
|
-
* Get the full CSSProperties for a component token.
|
|
224
|
-
* Replaces the css values from the ComponentTokenDefinition with the corresponding css variable.
|
|
225
|
-
*
|
|
226
|
-
* @param {ComponentNames} component The name of the component
|
|
227
|
-
* @param {ComponentTokenNames} token The name of the token
|
|
228
|
-
* @param {CSSProperties} tokenObject The CSSProperties for the component token
|
|
229
|
-
* @returns {*} {CSSProperties} CSSProperties converted to use the css variable for the correstonding token
|
|
230
|
-
*/
|
|
231
|
-
const componentTokenToCSSProperties = (component, token, tokenObject) => {
|
|
232
|
-
return Object.fromEntries(Object.keys(tokenObject).map(key => [
|
|
233
|
-
key,
|
|
234
|
-
componentTokenAsCssVariableString(component, token, key),
|
|
235
|
-
]));
|
|
236
|
-
};
|
|
237
|
-
/**
|
|
238
|
-
* Generate the full object og componentToken rules for the Tailwind plugin.
|
|
239
|
-
*/
|
|
240
|
-
const getAllComponentTokenRules = (componentDefinitions) => {
|
|
241
|
-
const components = {};
|
|
242
|
-
Object.entries(componentDefinitions).forEach(([componentName, themes]) => Object.entries(themes.DEFAULT).forEach(([tokenName, value]) => {
|
|
243
|
-
const typedComponentName = componentName; // TS does not do literals from Object keys so we do it manually
|
|
244
|
-
const typedTokenName = tokenName; // TS does not do literals from Object keys so we do it manually
|
|
245
|
-
const selector = `.${PREFIX}-${typedComponentName}-${typedTokenName}`;
|
|
246
|
-
components[selector] = componentTokenToCSSProperties(typedComponentName, typedTokenName, value);
|
|
247
|
-
}));
|
|
248
|
-
return components;
|
|
262
|
+
/** The prefix for css variables and tailwind component classes */
|
|
263
|
+
const PREFIX = "component";
|
|
264
|
+
/**
|
|
265
|
+
* Get the css variable value for the component tokens specific property.
|
|
266
|
+
*
|
|
267
|
+
* @param component The name of the component to get the variable for.
|
|
268
|
+
* @param token The component-level token name
|
|
269
|
+
* @param cssProperty The css property on the component-level Token
|
|
270
|
+
* @returns {string} `var(--${PREFIX}-${component}-${token}-${cssProperty})`
|
|
271
|
+
*/
|
|
272
|
+
const componentTokenAsCssVariableString = (component, token, cssProperty) => `var(--${PREFIX}-${component}-${token}-${cssProperty})`;
|
|
273
|
+
/**
|
|
274
|
+
* Get the full CSSProperties for a component token.
|
|
275
|
+
* Replaces the css values from the ComponentTokenDefinition with the corresponding css variable.
|
|
276
|
+
*
|
|
277
|
+
* @param {ComponentNames} component The name of the component
|
|
278
|
+
* @param {ComponentTokenNames} token The name of the token
|
|
279
|
+
* @param {CSSProperties} tokenObject The CSSProperties for the component token
|
|
280
|
+
* @returns {*} {CSSProperties} CSSProperties converted to use the css variable for the correstonding token
|
|
281
|
+
*/
|
|
282
|
+
const componentTokenToCSSProperties = (component, token, tokenObject) => {
|
|
283
|
+
return Object.fromEntries(Object.keys(tokenObject).map(key => [
|
|
284
|
+
key,
|
|
285
|
+
componentTokenAsCssVariableString(component, token, key),
|
|
286
|
+
]));
|
|
287
|
+
};
|
|
288
|
+
/**
|
|
289
|
+
* Generate the full object og componentToken rules for the Tailwind plugin.
|
|
290
|
+
*/
|
|
291
|
+
const getAllComponentTokenRules = (componentDefinitions) => {
|
|
292
|
+
const components = {};
|
|
293
|
+
Object.entries(componentDefinitions).forEach(([componentName, themes]) => Object.entries(themes.DEFAULT).forEach(([tokenName, value]) => {
|
|
294
|
+
const typedComponentName = componentName; // TS does not do literals from Object keys so we do it manually
|
|
295
|
+
const typedTokenName = tokenName; // TS does not do literals from Object keys so we do it manually
|
|
296
|
+
const selector = `.${PREFIX}-${typedComponentName}-${typedTokenName}`;
|
|
297
|
+
components[selector] = componentTokenToCSSProperties(typedComponentName, typedTokenName, value);
|
|
298
|
+
}));
|
|
299
|
+
return components;
|
|
249
300
|
};
|
|
250
301
|
|
|
251
|
-
const cssVariablesDefinition = cssTailwindCustomPropertiesPlugin.variablesToCSSRules({
|
|
252
|
-
DEFAULT: {
|
|
253
|
-
component: getComponentTokenVariablesByThemeName("DEFAULT", componentTokenDefinitions),
|
|
254
|
-
},
|
|
255
|
-
"theme-marketing": {
|
|
256
|
-
component: getComponentTokenVariablesByThemeName("theme-marketing", componentTokenDefinitions),
|
|
257
|
-
},
|
|
258
|
-
});
|
|
259
|
-
const ComponentTokensPlugin =
|
|
260
|
-
addComponents(cssVariablesDefinition);
|
|
261
|
-
addComponents(getAllComponentTokenRules(componentTokenDefinitions));
|
|
302
|
+
const cssVariablesDefinition = cssTailwindCustomPropertiesPlugin.variablesToCSSRules({
|
|
303
|
+
DEFAULT: {
|
|
304
|
+
component: getComponentTokenVariablesByThemeName("DEFAULT", componentTokenDefinitions),
|
|
305
|
+
},
|
|
306
|
+
"theme-marketing": {
|
|
307
|
+
component: getComponentTokenVariablesByThemeName("theme-marketing", componentTokenDefinitions),
|
|
308
|
+
},
|
|
309
|
+
});
|
|
310
|
+
const ComponentTokensPlugin = plugin(function ({ addComponents }) {
|
|
311
|
+
addComponents(cssVariablesDefinition);
|
|
312
|
+
addComponents(getAllComponentTokenRules(componentTokenDefinitions));
|
|
262
313
|
});
|
|
263
314
|
|
|
264
315
|
exports.ComponentTokensPlugin = ComponentTokensPlugin;
|