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