@nice2dev/icons 1.3.15 → 1.3.16
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/CHANGELOG.md +9 -0
- package/dist/cjs/NiceDesktopIconExporter.js +688 -599
- package/dist/cjs/NiceFaviconGenerator.js +603 -417
- package/dist/cjs/NiceIconPicker.js +788 -508
- package/dist/cjs/NiceIconPreview.js +246 -188
- package/dist/cjs/NiceIconSetCreator.js +683 -552
- package/dist/cjs/NiceIconStacker.js +547 -171
- package/dist/cjs/NiceIconValue.js +27 -35
- package/dist/cjs/NtdIconBadge.js +384 -360
- package/dist/cjs/NtdIconMorph.js +419 -354
- package/dist/cjs/NtdStateMorph.js +150 -147
- package/dist/cjs/advancedIconSearch.js +373 -510
- package/dist/cjs/animationControls.js +518 -642
- package/dist/cjs/client.js +12 -15
- package/dist/cjs/createIcon.js +349 -251
- package/dist/cjs/design-tokens.js +324 -390
- package/dist/cjs/figmaExport.js +162 -257
- package/dist/cjs/figmaSync.js +234 -316
- package/dist/cjs/headless-ui.js +240 -368
- package/dist/cjs/iconAnalytics.js +337 -393
- package/dist/cjs/iconHtml.js +64 -86
- package/dist/cjs/iconMetadata.js +392 -472
- package/dist/cjs/iconParts.js +120 -90
- package/dist/cjs/iconStack.js +136 -155
- package/dist/cjs/iconStyles.js +1609 -504
- package/dist/cjs/iconValue.js +359 -430
- package/dist/cjs/icons/accessibility.js +1119 -134
- package/dist/cjs/icons/actions.js +1290 -330
- package/dist/cjs/icons/ai.js +1424 -144
- package/dist/cjs/icons/brand.js +1344 -172
- package/dist/cjs/icons/business.js +903 -193
- package/dist/cjs/icons/devtech.js +1656 -227
- package/dist/cjs/icons/ecommerce.js +802 -111
- package/dist/cjs/icons/education.js +1345 -199
- package/dist/cjs/icons/files.js +1597 -328
- package/dist/cjs/icons/fintech.js +793 -104
- package/dist/cjs/icons/food.js +1507 -153
- package/dist/cjs/icons/fun.js +786 -109
- package/dist/cjs/icons/gaming.js +916 -170
- package/dist/cjs/icons/health.js +623 -112
- package/dist/cjs/icons/index.js +32 -35
- package/dist/cjs/icons/input.js +282 -83
- package/dist/cjs/icons/legal.js +1065 -122
- package/dist/cjs/icons/media.js +1061 -267
- package/dist/cjs/icons/navigation.js +387 -122
- package/dist/cjs/icons/omniverk.js +747 -90
- package/dist/cjs/icons/realestate.js +1520 -193
- package/dist/cjs/icons/saas.js +867 -98
- package/dist/cjs/icons/science.js +1451 -202
- package/dist/cjs/icons/shapes.js +1316 -308
- package/dist/cjs/icons/smarthome.js +786 -90
- package/dist/cjs/icons/social.js +591 -59
- package/dist/cjs/icons/sports.js +1225 -133
- package/dist/cjs/icons/sustainability.js +1211 -139
- package/dist/cjs/icons/travel.js +1470 -148
- package/dist/cjs/icons/ui.js +1508 -315
- package/dist/cjs/icons/weather.js +1160 -173
- package/dist/cjs/index.js +566 -568
- package/dist/cjs/lottieIntegration.js +261 -266
- package/dist/cjs/nicetodev-icons.css +1 -1
- package/dist/cjs/particleEffects.js +270 -251
- package/dist/cjs/resolver.js +229 -284
- package/dist/cjs/rsc.js +175 -193
- package/dist/cjs/sharpen.js +73 -130
- package/dist/cjs/smilAnimations.js +371 -165
- package/dist/cjs/stacking.js +87 -122
- package/dist/cjs/tailwind-plugin.js +280 -320
- package/dist/cjs/types.js +46 -72
- package/dist/cjs/utilities.js +163 -324
- package/dist/cjs/variantProps.js +12 -52
- package/dist/esm/NiceDesktopIconExporter.js +671 -598
- package/dist/esm/NiceFaviconGenerator.js +583 -416
- package/dist/esm/NiceIconPicker.js +789 -507
- package/dist/esm/NiceIconPreview.js +247 -187
- package/dist/esm/NiceIconSetCreator.js +685 -551
- package/dist/esm/NiceIconStacker.js +549 -170
- package/dist/esm/NiceIconValue.js +29 -34
- package/dist/esm/NtdIconBadge.js +388 -359
- package/dist/esm/NtdIconMorph.js +423 -353
- package/dist/esm/NtdStateMorph.js +152 -146
- package/dist/esm/advancedIconSearch.js +391 -509
- package/dist/esm/animationControls.js +527 -641
- package/dist/esm/client.js +48 -10
- package/dist/esm/createIcon.js +350 -250
- package/dist/esm/design-tokens.js +334 -387
- package/dist/esm/figmaExport.js +170 -256
- package/dist/esm/figmaSync.js +237 -315
- package/dist/esm/headless-ui.js +254 -365
- package/dist/esm/iconAnalytics.js +342 -392
- package/dist/esm/iconHtml.js +67 -85
- package/dist/esm/iconMetadata.js +404 -471
- package/dist/esm/iconParts.js +125 -89
- package/dist/esm/iconStack.js +145 -154
- package/dist/esm/iconStyles.js +1620 -503
- package/dist/esm/iconValue.js +361 -429
- package/dist/esm/icons/accessibility.js +1133 -133
- package/dist/esm/icons/actions.js +1320 -329
- package/dist/esm/icons/ai.js +1441 -143
- package/dist/esm/icons/brand.js +1351 -171
- package/dist/esm/icons/business.js +931 -201
- package/dist/esm/icons/devtech.js +1687 -226
- package/dist/esm/icons/ecommerce.js +816 -110
- package/dist/esm/icons/education.js +1364 -198
- package/dist/esm/icons/files.js +1628 -327
- package/dist/esm/icons/fintech.js +807 -103
- package/dist/esm/icons/food.js +1524 -152
- package/dist/esm/icons/fun.js +801 -108
- package/dist/esm/icons/gaming.js +933 -169
- package/dist/esm/icons/health.js +636 -111
- package/dist/esm/icons/index.js +596 -32
- package/dist/esm/icons/input.js +326 -82
- package/dist/esm/icons/legal.js +1079 -121
- package/dist/esm/icons/media.js +1086 -266
- package/dist/esm/icons/navigation.js +401 -121
- package/dist/esm/icons/omniverk.js +759 -89
- package/dist/esm/icons/realestate.js +1544 -198
- package/dist/esm/icons/saas.js +880 -97
- package/dist/esm/icons/science.js +1477 -208
- package/dist/esm/icons/shapes.js +1343 -307
- package/dist/esm/icons/smarthome.js +799 -89
- package/dist/esm/icons/social.js +599 -58
- package/dist/esm/icons/sports.js +1240 -132
- package/dist/esm/icons/sustainability.js +1226 -138
- package/dist/esm/icons/travel.js +1486 -147
- package/dist/esm/icons/ui.js +1540 -314
- package/dist/esm/icons/weather.js +1181 -172
- package/dist/esm/index.js +756 -58
- package/dist/esm/lottieIntegration.js +264 -265
- package/dist/esm/nicetodev-icons.css +1 -1
- package/dist/esm/particleEffects.js +271 -250
- package/dist/esm/resolver.js +231 -283
- package/dist/esm/rsc.js +182 -192
- package/dist/esm/sharpen.js +78 -129
- package/dist/esm/smilAnimations.js +376 -164
- package/dist/esm/stacking.js +99 -121
- package/dist/esm/tailwind-plugin.js +282 -319
- package/dist/esm/types.js +50 -71
- package/dist/esm/utilities.js +177 -321
- package/dist/esm/variantProps.js +23 -52
- package/package.json +15 -22
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
5
3
|
/**
|
|
6
4
|
* @file design-tokens.ts
|
|
7
5
|
* @description Design Tokens Integration for @nice2dev/icons
|
|
@@ -32,423 +30,359 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
32
30
|
*
|
|
33
31
|
* audit-allow: i18n-file — token descriptions written into Style Dictionary output, not UI copy.
|
|
34
32
|
*/
|
|
35
|
-
/* ────────────────────────────────────────────────────────────────────────────
|
|
36
|
-
DEFAULT TOKEN VALUES
|
|
37
|
-
───────────────────────────────────────────────────────────────────────────── */
|
|
38
|
-
/**
|
|
39
|
-
* Default icon size tokens
|
|
40
|
-
*/
|
|
41
33
|
const DEFAULT_SIZE_TOKENS = {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
34
|
+
xs: "0.75rem",
|
|
35
|
+
// 12px
|
|
36
|
+
sm: "1rem",
|
|
37
|
+
// 16px
|
|
38
|
+
md: "1.5rem",
|
|
39
|
+
// 24px
|
|
40
|
+
lg: "2rem",
|
|
41
|
+
// 32px
|
|
42
|
+
xl: "3rem",
|
|
43
|
+
// 48px
|
|
44
|
+
"2xl": "4rem"
|
|
45
|
+
// 64px
|
|
48
46
|
};
|
|
49
|
-
/**
|
|
50
|
-
* Default icon color tokens
|
|
51
|
-
*/
|
|
52
47
|
const DEFAULT_COLOR_TOKENS = {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
48
|
+
primary: "#3b82f6",
|
|
49
|
+
// Blue 500
|
|
50
|
+
secondary: "#64748b",
|
|
51
|
+
// Slate 500
|
|
52
|
+
accent: "#8b5cf6",
|
|
53
|
+
// Violet 500
|
|
54
|
+
success: "#22c55e",
|
|
55
|
+
// Green 500
|
|
56
|
+
warning: "#f59e0b",
|
|
57
|
+
// Amber 500
|
|
58
|
+
error: "#ef4444",
|
|
59
|
+
// Red 500
|
|
60
|
+
info: "#06b6d4",
|
|
61
|
+
// Cyan 500
|
|
62
|
+
muted: "#9ca3af"
|
|
63
|
+
// Gray 400
|
|
61
64
|
};
|
|
62
|
-
/**
|
|
63
|
-
* Default stroke width tokens
|
|
64
|
-
*/
|
|
65
65
|
const DEFAULT_STROKE_TOKENS = {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
66
|
+
thin: "1",
|
|
67
|
+
normal: "1.5",
|
|
68
|
+
medium: "2",
|
|
69
|
+
thick: "2.5",
|
|
70
|
+
bold: "3"
|
|
71
71
|
};
|
|
72
|
-
/**
|
|
73
|
-
* Default animation tokens
|
|
74
|
-
*/
|
|
75
72
|
const DEFAULT_ANIMATION_TOKENS = {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
73
|
+
duration: {
|
|
74
|
+
instant: "0ms",
|
|
75
|
+
fast: "150ms",
|
|
76
|
+
normal: "300ms",
|
|
77
|
+
slow: "500ms",
|
|
78
|
+
slower: "1000ms"
|
|
79
|
+
},
|
|
80
|
+
easing: {
|
|
81
|
+
linear: "linear",
|
|
82
|
+
easeIn: "cubic-bezier(0.4, 0, 1, 1)",
|
|
83
|
+
easeOut: "cubic-bezier(0, 0, 0.2, 1)",
|
|
84
|
+
easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
85
|
+
spring: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
|
|
86
|
+
}
|
|
90
87
|
};
|
|
91
|
-
/* ────────────────────────────────────────────────────────────────────────────
|
|
92
|
-
TOKEN GENERATION
|
|
93
|
-
───────────────────────────────────────────────────────────────────────────── */
|
|
94
|
-
/**
|
|
95
|
-
* Generates Style Dictionary compatible design tokens for icons.
|
|
96
|
-
*
|
|
97
|
-
* @param config - Token configuration
|
|
98
|
-
* @returns Token group object ready for Style Dictionary
|
|
99
|
-
*
|
|
100
|
-
* @example
|
|
101
|
-
* ```ts
|
|
102
|
-
* const tokens = generateIconTokens({
|
|
103
|
-
* prefix: 'ntd',
|
|
104
|
-
* colorTokens: {
|
|
105
|
-
* primary: '{color.brand.500}',
|
|
106
|
-
* },
|
|
107
|
-
* });
|
|
108
|
-
*
|
|
109
|
-
* // Output:
|
|
110
|
-
* // {
|
|
111
|
-
* // ntd: {
|
|
112
|
-
* // icon: {
|
|
113
|
-
* // size: { md: { value: '1.5rem', type: 'dimension' } },
|
|
114
|
-
* // color: { primary: { value: '{color.brand.500}', type: 'color' } },
|
|
115
|
-
* // }
|
|
116
|
-
* // }
|
|
117
|
-
* // }
|
|
118
|
-
* ```
|
|
119
|
-
*/
|
|
120
88
|
function generateIconTokens(config = {}) {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
89
|
+
const {
|
|
90
|
+
prefix = "ntd",
|
|
91
|
+
namespace = "icon",
|
|
92
|
+
colorTokens = {},
|
|
93
|
+
sizeTokens = {},
|
|
94
|
+
strokeTokens = {},
|
|
95
|
+
includeAnimations = true,
|
|
96
|
+
includeVariants = true
|
|
97
|
+
} = config;
|
|
98
|
+
const mergedColors = { ...DEFAULT_COLOR_TOKENS, ...colorTokens };
|
|
99
|
+
const mergedSizes = { ...DEFAULT_SIZE_TOKENS, ...sizeTokens };
|
|
100
|
+
const mergedStrokes = { ...DEFAULT_STROKE_TOKENS, ...strokeTokens };
|
|
101
|
+
const result = {
|
|
102
|
+
[prefix]: {
|
|
103
|
+
[namespace]: {
|
|
104
|
+
// Size tokens
|
|
105
|
+
size: Object.entries(mergedSizes).reduce((acc, [key, value]) => {
|
|
106
|
+
acc[key] = {
|
|
107
|
+
value: typeof value === "number" ? `${value}px` : value,
|
|
108
|
+
type: "dimension",
|
|
109
|
+
description: `Icon size: ${key}`,
|
|
110
|
+
$extensions: {
|
|
111
|
+
"org.nice2dev.icons": {
|
|
112
|
+
cssVariable: `--${prefix}-${namespace}-size-${key}`,
|
|
113
|
+
tailwindClass: `${prefix}-${namespace}-${key}`
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
return acc;
|
|
118
|
+
}, {}),
|
|
119
|
+
// Color tokens
|
|
120
|
+
color: Object.entries(mergedColors).reduce((acc, [key, value]) => {
|
|
121
|
+
acc[key] = {
|
|
122
|
+
value,
|
|
123
|
+
type: "color",
|
|
124
|
+
description: `Icon color: ${key}`,
|
|
125
|
+
$extensions: {
|
|
126
|
+
"org.nice2dev.icons": {
|
|
127
|
+
cssVariable: `--${prefix}-${namespace}-color-${key}`,
|
|
128
|
+
tailwindClass: `${prefix}-${namespace}-${key}`
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
return acc;
|
|
133
|
+
}, {}),
|
|
134
|
+
// Stroke tokens
|
|
135
|
+
stroke: Object.entries(mergedStrokes).reduce((acc, [key, value]) => {
|
|
136
|
+
acc[key] = {
|
|
137
|
+
value: String(value),
|
|
138
|
+
type: "number",
|
|
139
|
+
description: `Icon stroke width: ${key}`,
|
|
140
|
+
$extensions: {
|
|
141
|
+
"org.nice2dev.icons": {
|
|
142
|
+
cssVariable: `--${prefix}-${namespace}-stroke-${key}`,
|
|
143
|
+
tailwindClass: `${prefix}-${namespace}-stroke-${key}`
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
return acc;
|
|
148
|
+
}, {}),
|
|
149
|
+
// Secondary opacity
|
|
150
|
+
opacity: {
|
|
151
|
+
secondary: {
|
|
152
|
+
value: "0.35",
|
|
153
|
+
type: "number",
|
|
154
|
+
description: "Secondary color opacity for duotone variant"
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
};
|
|
160
|
+
if (includeAnimations) {
|
|
161
|
+
result[prefix][namespace] = {
|
|
162
|
+
...result[prefix][namespace],
|
|
163
|
+
animation: {
|
|
164
|
+
duration: Object.entries(DEFAULT_ANIMATION_TOKENS.duration).reduce((acc, [key, value]) => {
|
|
165
|
+
acc[key] = {
|
|
166
|
+
value,
|
|
167
|
+
type: "duration",
|
|
168
|
+
description: `Animation duration: ${key}`
|
|
169
|
+
};
|
|
170
|
+
return acc;
|
|
171
|
+
}, {}),
|
|
172
|
+
easing: Object.entries(DEFAULT_ANIMATION_TOKENS.easing).reduce((acc, [key, value]) => {
|
|
173
|
+
acc[key] = {
|
|
174
|
+
value,
|
|
175
|
+
type: "cubicBezier",
|
|
176
|
+
description: `Animation easing: ${key}`
|
|
177
|
+
};
|
|
178
|
+
return acc;
|
|
179
|
+
}, {})
|
|
180
|
+
}
|
|
181
|
+
};
|
|
182
|
+
}
|
|
183
|
+
if (includeVariants) {
|
|
184
|
+
result[prefix][namespace] = {
|
|
185
|
+
...result[prefix][namespace],
|
|
186
|
+
variant: {
|
|
187
|
+
solid: { value: "solid", type: "string", description: "Filled icon variant" },
|
|
188
|
+
outline: { value: "outline", type: "string", description: "Outlined icon variant" },
|
|
189
|
+
wireframe: {
|
|
190
|
+
value: "wireframe",
|
|
191
|
+
type: "string",
|
|
192
|
+
description: "Thin construction-line variant"
|
|
182
193
|
},
|
|
194
|
+
duotone: { value: "duotone", type: "string", description: "Two-tone icon variant" },
|
|
195
|
+
cutout: {
|
|
196
|
+
value: "cutout",
|
|
197
|
+
type: "string",
|
|
198
|
+
description: "Knockout/cutout background variant"
|
|
199
|
+
},
|
|
200
|
+
sharp: { value: "sharp", type: "string", description: "Sharp corners variant" },
|
|
201
|
+
rounded: { value: "rounded", type: "string", description: "Rounded corners variant" },
|
|
202
|
+
mini: { value: "mini", type: "string", description: "Compact small size variant" },
|
|
203
|
+
vivid: { value: "vivid", type: "string", description: "Colorful multi-fill variant" },
|
|
204
|
+
"3d": { value: "3d", type: "string", description: "Extruded depth variant" }
|
|
205
|
+
}
|
|
183
206
|
};
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
result[prefix][namespace] = {
|
|
187
|
-
...result[prefix][namespace],
|
|
188
|
-
animation: {
|
|
189
|
-
duration: Object.entries(DEFAULT_ANIMATION_TOKENS.duration).reduce((acc, [key, value]) => {
|
|
190
|
-
acc[key] = {
|
|
191
|
-
value,
|
|
192
|
-
type: 'duration',
|
|
193
|
-
description: `Animation duration: ${key}`,
|
|
194
|
-
};
|
|
195
|
-
return acc;
|
|
196
|
-
}, {}),
|
|
197
|
-
easing: Object.entries(DEFAULT_ANIMATION_TOKENS.easing).reduce((acc, [key, value]) => {
|
|
198
|
-
acc[key] = {
|
|
199
|
-
value,
|
|
200
|
-
type: 'cubicBezier',
|
|
201
|
-
description: `Animation easing: ${key}`,
|
|
202
|
-
};
|
|
203
|
-
return acc;
|
|
204
|
-
}, {}),
|
|
205
|
-
},
|
|
206
|
-
};
|
|
207
|
-
}
|
|
208
|
-
// Add variant tokens
|
|
209
|
-
if (includeVariants) {
|
|
210
|
-
result[prefix][namespace] = {
|
|
211
|
-
...result[prefix][namespace],
|
|
212
|
-
variant: {
|
|
213
|
-
solid: { value: 'solid', type: 'string', description: 'Filled icon variant' },
|
|
214
|
-
outline: { value: 'outline', type: 'string', description: 'Outlined icon variant' },
|
|
215
|
-
wireframe: {
|
|
216
|
-
value: 'wireframe',
|
|
217
|
-
type: 'string',
|
|
218
|
-
description: 'Thin construction-line variant',
|
|
219
|
-
},
|
|
220
|
-
duotone: { value: 'duotone', type: 'string', description: 'Two-tone icon variant' },
|
|
221
|
-
cutout: {
|
|
222
|
-
value: 'cutout',
|
|
223
|
-
type: 'string',
|
|
224
|
-
description: 'Knockout/cutout background variant',
|
|
225
|
-
},
|
|
226
|
-
sharp: { value: 'sharp', type: 'string', description: 'Sharp corners variant' },
|
|
227
|
-
rounded: { value: 'rounded', type: 'string', description: 'Rounded corners variant' },
|
|
228
|
-
mini: { value: 'mini', type: 'string', description: 'Compact small size variant' },
|
|
229
|
-
vivid: { value: 'vivid', type: 'string', description: 'Colorful multi-fill variant' },
|
|
230
|
-
'3d': { value: '3d', type: 'string', description: 'Extruded depth variant' },
|
|
231
|
-
},
|
|
232
|
-
};
|
|
233
|
-
}
|
|
234
|
-
return result;
|
|
207
|
+
}
|
|
208
|
+
return result;
|
|
235
209
|
}
|
|
236
|
-
/**
|
|
237
|
-
* Creates a Style Dictionary configuration for icon tokens.
|
|
238
|
-
*
|
|
239
|
-
* @param options - Configuration options
|
|
240
|
-
* @returns Style Dictionary config object
|
|
241
|
-
*/
|
|
242
210
|
function createStyleDictionaryConfig(options = {}) {
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
transformGroup: 'js',
|
|
292
|
-
buildPath: `${outputPath}/json/`,
|
|
293
|
-
files: [
|
|
294
|
-
{
|
|
295
|
-
destination: 'icon-tokens.json',
|
|
296
|
-
format: 'json/nested',
|
|
297
|
-
filter: { attributes: { category: 'ntd' } },
|
|
298
|
-
},
|
|
299
|
-
],
|
|
300
|
-
};
|
|
301
|
-
}
|
|
302
|
-
return {
|
|
303
|
-
source: [`${sourcePath}/**/*.json`],
|
|
304
|
-
platforms: platformConfigs,
|
|
211
|
+
const {
|
|
212
|
+
sourcePath = "./tokens",
|
|
213
|
+
outputPath = "./dist/tokens",
|
|
214
|
+
platforms = ["css", "scss", "js", "json"]
|
|
215
|
+
} = options;
|
|
216
|
+
const platformConfigs = {};
|
|
217
|
+
if (platforms.includes("css")) {
|
|
218
|
+
platformConfigs.css = {
|
|
219
|
+
transformGroup: "css",
|
|
220
|
+
buildPath: `${outputPath}/css/`,
|
|
221
|
+
files: [
|
|
222
|
+
{
|
|
223
|
+
destination: "icon-tokens.css",
|
|
224
|
+
format: "css/variables",
|
|
225
|
+
filter: { attributes: { category: "ntd" } }
|
|
226
|
+
}
|
|
227
|
+
]
|
|
228
|
+
};
|
|
229
|
+
}
|
|
230
|
+
if (platforms.includes("scss")) {
|
|
231
|
+
platformConfigs.scss = {
|
|
232
|
+
transformGroup: "scss",
|
|
233
|
+
buildPath: `${outputPath}/scss/`,
|
|
234
|
+
files: [
|
|
235
|
+
{
|
|
236
|
+
destination: "_icon-tokens.scss",
|
|
237
|
+
format: "scss/variables",
|
|
238
|
+
filter: { attributes: { category: "ntd" } }
|
|
239
|
+
}
|
|
240
|
+
]
|
|
241
|
+
};
|
|
242
|
+
}
|
|
243
|
+
if (platforms.includes("js")) {
|
|
244
|
+
platformConfigs.js = {
|
|
245
|
+
transformGroup: "js",
|
|
246
|
+
buildPath: `${outputPath}/js/`,
|
|
247
|
+
files: [
|
|
248
|
+
{
|
|
249
|
+
destination: "icon-tokens.js",
|
|
250
|
+
format: "javascript/module",
|
|
251
|
+
filter: { attributes: { category: "ntd" } }
|
|
252
|
+
},
|
|
253
|
+
{
|
|
254
|
+
destination: "icon-tokens.d.ts",
|
|
255
|
+
format: "typescript/module-declarations",
|
|
256
|
+
filter: { attributes: { category: "ntd" } }
|
|
257
|
+
}
|
|
258
|
+
]
|
|
305
259
|
};
|
|
260
|
+
}
|
|
261
|
+
if (platforms.includes("json")) {
|
|
262
|
+
platformConfigs.json = {
|
|
263
|
+
transformGroup: "js",
|
|
264
|
+
buildPath: `${outputPath}/json/`,
|
|
265
|
+
files: [
|
|
266
|
+
{
|
|
267
|
+
destination: "icon-tokens.json",
|
|
268
|
+
format: "json/nested",
|
|
269
|
+
filter: { attributes: { category: "ntd" } }
|
|
270
|
+
}
|
|
271
|
+
]
|
|
272
|
+
};
|
|
273
|
+
}
|
|
274
|
+
return {
|
|
275
|
+
source: [`${sourcePath}/**/*.json`],
|
|
276
|
+
platforms: platformConfigs
|
|
277
|
+
};
|
|
306
278
|
}
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
function processTokens(obj, path = []) {
|
|
320
|
-
for (const [key, value] of Object.entries(obj)) {
|
|
321
|
-
const newPath = [...path, key];
|
|
322
|
-
if (typeof value === 'object' && value !== null) {
|
|
323
|
-
if ('value' in value && typeof value.value !== 'object') {
|
|
324
|
-
// It's a token
|
|
325
|
-
const token = value;
|
|
326
|
-
const varName = `--${newPath.join('-')}`;
|
|
327
|
-
variables.push(` ${varName}: ${token.value};`);
|
|
328
|
-
}
|
|
329
|
-
else {
|
|
330
|
-
// It's a nested group
|
|
331
|
-
processTokens(value, newPath);
|
|
332
|
-
}
|
|
333
|
-
}
|
|
279
|
+
function generateCSSVariables(tokens, selector = ":root") {
|
|
280
|
+
const variables = [];
|
|
281
|
+
function processTokens(obj, path = []) {
|
|
282
|
+
for (const [key, value] of Object.entries(obj)) {
|
|
283
|
+
const newPath = [...path, key];
|
|
284
|
+
if (typeof value === "object" && value !== null) {
|
|
285
|
+
if ("value" in value && typeof value.value !== "object") {
|
|
286
|
+
const token = value;
|
|
287
|
+
const varName = `--${newPath.join("-")}`;
|
|
288
|
+
variables.push(` ${varName}: ${token.value};`);
|
|
289
|
+
} else {
|
|
290
|
+
processTokens(value, newPath);
|
|
334
291
|
}
|
|
292
|
+
}
|
|
335
293
|
}
|
|
336
|
-
|
|
337
|
-
|
|
294
|
+
}
|
|
295
|
+
processTokens(tokens);
|
|
296
|
+
return `${selector} {
|
|
297
|
+
${variables.join("\n")}
|
|
298
|
+
}`;
|
|
338
299
|
}
|
|
339
|
-
/**
|
|
340
|
-
* Generates Tailwind CSS config from icon tokens.
|
|
341
|
-
*
|
|
342
|
-
* @param tokens - Token group
|
|
343
|
-
* @returns Tailwind config extend object
|
|
344
|
-
*/
|
|
345
300
|
function generateTailwindConfig(tokens) {
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
}
|
|
361
|
-
else if (type === 'stroke') {
|
|
362
|
-
strokeWidth[tokenKey] = String(token.value);
|
|
363
|
-
}
|
|
364
|
-
}
|
|
365
|
-
else if (typeof value === 'object' && value !== null) {
|
|
366
|
-
extractTokens(value, type, key);
|
|
367
|
-
}
|
|
301
|
+
const colors = {};
|
|
302
|
+
const spacing = {};
|
|
303
|
+
const strokeWidth = {};
|
|
304
|
+
function extractTokens(obj, type, prefix = "") {
|
|
305
|
+
for (const [key, value] of Object.entries(obj)) {
|
|
306
|
+
if (typeof value === "object" && value !== null && "value" in value) {
|
|
307
|
+
const token = value;
|
|
308
|
+
const tokenKey = prefix ? `${prefix}-${key}` : key;
|
|
309
|
+
if (token.type === "color") {
|
|
310
|
+
colors[tokenKey] = String(token.value);
|
|
311
|
+
} else if (token.type === "dimension") {
|
|
312
|
+
spacing[tokenKey] = String(token.value);
|
|
313
|
+
} else if (type === "stroke") {
|
|
314
|
+
strokeWidth[tokenKey] = String(token.value);
|
|
368
315
|
}
|
|
316
|
+
} else if (typeof value === "object" && value !== null) {
|
|
317
|
+
extractTokens(value, type, key);
|
|
318
|
+
}
|
|
369
319
|
}
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
}
|
|
320
|
+
}
|
|
321
|
+
const iconTokens = tokens.ntd?.icon;
|
|
322
|
+
if (iconTokens) {
|
|
323
|
+
if (iconTokens.color) {
|
|
324
|
+
extractTokens(iconTokens.color, "color", "icon");
|
|
325
|
+
}
|
|
326
|
+
if (iconTokens.size) {
|
|
327
|
+
extractTokens(iconTokens.size, "size", "icon");
|
|
328
|
+
}
|
|
329
|
+
if (iconTokens.stroke) {
|
|
330
|
+
extractTokens(iconTokens.stroke, "stroke", "icon");
|
|
382
331
|
}
|
|
383
|
-
|
|
332
|
+
}
|
|
333
|
+
return { colors, spacing, strokeWidth };
|
|
384
334
|
}
|
|
385
|
-
/* ────────────────────────────────────────────────────────────────────────────
|
|
386
|
-
FIGMA TOKENS EXPORT
|
|
387
|
-
───────────────────────────────────────────────────────────────────────────── */
|
|
388
|
-
/**
|
|
389
|
-
* Converts icon tokens to Figma Tokens format.
|
|
390
|
-
* Compatible with the Figma Tokens plugin.
|
|
391
|
-
*
|
|
392
|
-
* @param tokens - Token group
|
|
393
|
-
* @returns Figma Tokens compatible object
|
|
394
|
-
*/
|
|
395
335
|
function toFigmaTokens(tokens) {
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
}
|
|
409
|
-
currentObj = currentObj[part];
|
|
410
|
-
}
|
|
411
|
-
currentObj[newPath[newPath.length - 1]] = {
|
|
412
|
-
value: token.value,
|
|
413
|
-
type: mapToFigmaType(token.type),
|
|
414
|
-
};
|
|
415
|
-
}
|
|
416
|
-
else {
|
|
417
|
-
processTokens(value, newPath);
|
|
418
|
-
}
|
|
336
|
+
const figmaTokens = {};
|
|
337
|
+
function processTokens(obj, path = []) {
|
|
338
|
+
for (const [key, value] of Object.entries(obj)) {
|
|
339
|
+
const newPath = [...path, key];
|
|
340
|
+
if (typeof value === "object" && value !== null) {
|
|
341
|
+
if ("value" in value && typeof value.value !== "object") {
|
|
342
|
+
const token = value;
|
|
343
|
+
let currentObj = figmaTokens;
|
|
344
|
+
for (let i = 0; i < newPath.length - 1; i++) {
|
|
345
|
+
const part = newPath[i];
|
|
346
|
+
if (!currentObj[part]) {
|
|
347
|
+
currentObj[part] = {};
|
|
419
348
|
}
|
|
349
|
+
currentObj = currentObj[part];
|
|
350
|
+
}
|
|
351
|
+
currentObj[newPath[newPath.length - 1]] = {
|
|
352
|
+
value: token.value,
|
|
353
|
+
type: mapToFigmaType(token.type)
|
|
354
|
+
};
|
|
355
|
+
} else {
|
|
356
|
+
processTokens(value, newPath);
|
|
420
357
|
}
|
|
358
|
+
}
|
|
421
359
|
}
|
|
422
|
-
|
|
423
|
-
|
|
360
|
+
}
|
|
361
|
+
processTokens(tokens);
|
|
362
|
+
return figmaTokens;
|
|
424
363
|
}
|
|
425
364
|
function mapToFigmaType(type) {
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
return (_a = typeMap[type !== null && type !== void 0 ? type : 'other']) !== null && _a !== void 0 ? _a : 'other';
|
|
365
|
+
const typeMap = {
|
|
366
|
+
color: "color",
|
|
367
|
+
dimension: "sizing",
|
|
368
|
+
number: "number",
|
|
369
|
+
duration: "other",
|
|
370
|
+
cubicBezier: "other",
|
|
371
|
+
string: "other"
|
|
372
|
+
};
|
|
373
|
+
return typeMap[type ?? "other"] ?? "other";
|
|
436
374
|
}
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
DEFAULT_COLOR_TOKENS,
|
|
448
|
-
DEFAULT_STROKE_TOKENS,
|
|
449
|
-
DEFAULT_ANIMATION_TOKENS,
|
|
375
|
+
const designTokens = {
|
|
376
|
+
generateIconTokens,
|
|
377
|
+
createStyleDictionaryConfig,
|
|
378
|
+
generateCSSVariables,
|
|
379
|
+
generateTailwindConfig,
|
|
380
|
+
toFigmaTokens,
|
|
381
|
+
DEFAULT_SIZE_TOKENS,
|
|
382
|
+
DEFAULT_COLOR_TOKENS,
|
|
383
|
+
DEFAULT_STROKE_TOKENS,
|
|
384
|
+
DEFAULT_ANIMATION_TOKENS
|
|
450
385
|
};
|
|
451
|
-
|
|
452
386
|
exports.DEFAULT_ANIMATION_TOKENS = DEFAULT_ANIMATION_TOKENS;
|
|
453
387
|
exports.DEFAULT_COLOR_TOKENS = DEFAULT_COLOR_TOKENS;
|
|
454
388
|
exports.DEFAULT_SIZE_TOKENS = DEFAULT_SIZE_TOKENS;
|