@nice2dev/icons 1.1.5 → 1.1.6

package/dist/esm/design-tokens.js

@@ -0,0 +1,446 @@
+/**
+ * @file design-tokens.ts
+ * @description Design Tokens Integration for @nice2dev/icons
+ *
+ * Provides Style Dictionary compatible design tokens for icon styling.
+ * Supports auto-generation from design systems and custom token sources.
+ *
+ * @example
+ * ```ts
+ * // Generate tokens for Style Dictionary
+ * import { generateIconTokens, createTokensConfig } from '@nice2dev/icons/design-tokens';
+ *
+ * const tokens = generateIconTokens({
+ *   prefix: 'ntd',
+ *   namespace: 'icon',
+ *   colorTokens: {
+ *     primary: '{color.brand.500}',
+ *     secondary: '{color.gray.400}',
+ *   },
+ * });
+ *
+ * // tokens.json output
+ * ```
+ *
+ * @version 1.0.0
+ * @since 2026-03
+ * @license MIT
+ */
+/* ────────────────────────────────────────────────────────────────────────────
+   DEFAULT TOKEN VALUES
+───────────────────────────────────────────────────────────────────────────── */
+/**
+ * Default icon size tokens
+ */
+const DEFAULT_SIZE_TOKENS = {
+    xs: '0.75rem', // 12px
+    sm: '1rem', // 16px
+    md: '1.5rem', // 24px
+    lg: '2rem', // 32px
+    xl: '3rem', // 48px
+    '2xl': '4rem', // 64px
+};
+/**
+ * Default icon color tokens
+ */
+const DEFAULT_COLOR_TOKENS = {
+    primary: '#3b82f6', // Blue 500
+    secondary: '#64748b', // Slate 500
+    accent: '#8b5cf6', // Violet 500
+    success: '#22c55e', // Green 500
+    warning: '#f59e0b', // Amber 500
+    error: '#ef4444', // Red 500
+    info: '#06b6d4', // Cyan 500
+    muted: '#9ca3af', // Gray 400
+};
+/**
+ * Default stroke width tokens
+ */
+const DEFAULT_STROKE_TOKENS = {
+    thin: '1',
+    normal: '1.5',
+    medium: '2',
+    thick: '2.5',
+    bold: '3',
+};
+/**
+ * Default animation tokens
+ */
+const DEFAULT_ANIMATION_TOKENS = {
+    duration: {
+        instant: '0ms',
+        fast: '150ms',
+        normal: '300ms',
+        slow: '500ms',
+        slower: '1000ms',
+    },
+    easing: {
+        linear: 'linear',
+        easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+        easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
+        easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+        spring: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+    },
+};
+/* ────────────────────────────────────────────────────────────────────────────
+   TOKEN GENERATION
+───────────────────────────────────────────────────────────────────────────── */
+/**
+ * Generates Style Dictionary compatible design tokens for icons.
+ *
+ * @param config - Token configuration
+ * @returns Token group object ready for Style Dictionary
+ *
+ * @example
+ * ```ts
+ * const tokens = generateIconTokens({
+ *   prefix: 'ntd',
+ *   colorTokens: {
+ *     primary: '{color.brand.500}',
+ *   },
+ * });
+ *
+ * // Output:
+ * // {
+ * //   ntd: {
+ * //     icon: {
+ * //       size: { md: { value: '1.5rem', type: 'dimension' } },
+ * //       color: { primary: { value: '{color.brand.500}', type: 'color' } },
+ * //     }
+ * //   }
+ * // }
+ * ```
+ */
+function generateIconTokens(config = {}) {
+    const { prefix = 'ntd', namespace = 'icon', colorTokens = {}, sizeTokens = {}, strokeTokens = {}, includeAnimations = true, includeVariants = true, } = config;
+    const mergedColors = { ...DEFAULT_COLOR_TOKENS, ...colorTokens };
+    const mergedSizes = { ...DEFAULT_SIZE_TOKENS, ...sizeTokens };
+    const mergedStrokes = { ...DEFAULT_STROKE_TOKENS, ...strokeTokens };
+    const result = {
+        [prefix]: {
+            [namespace]: {
+                // Size tokens
+                size: Object.entries(mergedSizes).reduce((acc, [key, value]) => {
+                    acc[key] = {
+                        value: typeof value === 'number' ? `${value}px` : value,
+                        type: 'dimension',
+                        description: `Icon size: ${key}`,
+                        $extensions: {
+                            'org.nice2dev.icons': {
+                                cssVariable: `--${prefix}-${namespace}-size-${key}`,
+                                tailwindClass: `${prefix}-${namespace}-${key}`,
+                            },
+                        },
+                    };
+                    return acc;
+                }, {}),
+                // Color tokens
+                color: Object.entries(mergedColors).reduce((acc, [key, value]) => {
+                    acc[key] = {
+                        value,
+                        type: 'color',
+                        description: `Icon color: ${key}`,
+                        $extensions: {
+                            'org.nice2dev.icons': {
+                                cssVariable: `--${prefix}-${namespace}-color-${key}`,
+                                tailwindClass: `${prefix}-${namespace}-${key}`,
+                            },
+                        },
+                    };
+                    return acc;
+                }, {}),
+                // Stroke tokens
+                stroke: Object.entries(mergedStrokes).reduce((acc, [key, value]) => {
+                    acc[key] = {
+                        value: String(value),
+                        type: 'number',
+                        description: `Icon stroke width: ${key}`,
+                        $extensions: {
+                            'org.nice2dev.icons': {
+                                cssVariable: `--${prefix}-${namespace}-stroke-${key}`,
+                                tailwindClass: `${prefix}-${namespace}-stroke-${key}`,
+                            },
+                        },
+                    };
+                    return acc;
+                }, {}),
+                // Secondary opacity
+                opacity: {
+                    secondary: {
+                        value: '0.35',
+                        type: 'number',
+                        description: 'Secondary color opacity for duotone variant',
+                    },
+                },
+            },
+        },
+    };
+    // Add animation tokens
+    if (includeAnimations) {
+        result[prefix][namespace] = {
+            ...result[prefix][namespace],
+            animation: {
+                duration: Object.entries(DEFAULT_ANIMATION_TOKENS.duration).reduce((acc, [key, value]) => {
+                    acc[key] = {
+                        value,
+                        type: 'duration',
+                        description: `Animation duration: ${key}`,
+                    };
+                    return acc;
+                }, {}),
+                easing: Object.entries(DEFAULT_ANIMATION_TOKENS.easing).reduce((acc, [key, value]) => {
+                    acc[key] = {
+                        value,
+                        type: 'cubicBezier',
+                        description: `Animation easing: ${key}`,
+                    };
+                    return acc;
+                }, {}),
+            },
+        };
+    }
+    // Add variant tokens
+    if (includeVariants) {
+        result[prefix][namespace] = {
+            ...result[prefix][namespace],
+            variant: {
+                solid: { value: 'solid', type: 'string', description: 'Filled icon variant' },
+                outline: { value: 'outline', type: 'string', description: 'Outlined icon variant' },
+                wireframe: {
+                    value: 'wireframe',
+                    type: 'string',
+                    description: 'Thin construction-line variant',
+                },
+                duotone: { value: 'duotone', type: 'string', description: 'Two-tone icon variant' },
+                cutout: {
+                    value: 'cutout',
+                    type: 'string',
+                    description: 'Knockout/cutout background variant',
+                },
+                sharp: { value: 'sharp', type: 'string', description: 'Sharp corners variant' },
+                rounded: { value: 'rounded', type: 'string', description: 'Rounded corners variant' },
+                mini: { value: 'mini', type: 'string', description: 'Compact small size variant' },
+                vivid: { value: 'vivid', type: 'string', description: 'Colorful multi-fill variant' },
+                '3d': { value: '3d', type: 'string', description: 'Extruded depth variant' },
+            },
+        };
+    }
+    return result;
+}
+/**
+ * Creates a Style Dictionary configuration for icon tokens.
+ *
+ * @param options - Configuration options
+ * @returns Style Dictionary config object
+ */
+function createStyleDictionaryConfig(options = {}) {
+    const { sourcePath = './tokens', outputPath = './dist/tokens', platforms = ['css', 'scss', 'js', 'json'], } = options;
+    const platformConfigs = {};
+    if (platforms.includes('css')) {
+        platformConfigs.css = {
+            transformGroup: 'css',
+            buildPath: `${outputPath}/css/`,
+            files: [
+                {
+                    destination: 'icon-tokens.css',
+                    format: 'css/variables',
+                    filter: { attributes: { category: 'ntd' } },
+                },
+            ],
+        };
+    }
+    if (platforms.includes('scss')) {
+        platformConfigs.scss = {
+            transformGroup: 'scss',
+            buildPath: `${outputPath}/scss/`,
+            files: [
+                {
+                    destination: '_icon-tokens.scss',
+                    format: 'scss/variables',
+                    filter: { attributes: { category: 'ntd' } },
+                },
+            ],
+        };
+    }
+    if (platforms.includes('js')) {
+        platformConfigs.js = {
+            transformGroup: 'js',
+            buildPath: `${outputPath}/js/`,
+            files: [
+                {
+                    destination: 'icon-tokens.js',
+                    format: 'javascript/module',
+                    filter: { attributes: { category: 'ntd' } },
+                },
+                {
+                    destination: 'icon-tokens.d.ts',
+                    format: 'typescript/module-declarations',
+                    filter: { attributes: { category: 'ntd' } },
+                },
+            ],
+        };
+    }
+    if (platforms.includes('json')) {
+        platformConfigs.json = {
+            transformGroup: 'js',
+            buildPath: `${outputPath}/json/`,
+            files: [
+                {
+                    destination: 'icon-tokens.json',
+                    format: 'json/nested',
+                    filter: { attributes: { category: 'ntd' } },
+                },
+            ],
+        };
+    }
+    return {
+        source: [`${sourcePath}/**/*.json`],
+        platforms: platformConfigs,
+    };
+}
+/* ────────────────────────────────────────────────────────────────────────────
+   CSS GENERATION
+───────────────────────────────────────────────────────────────────────────── */
+/**
+ * Generates CSS custom properties from icon tokens.
+ *
+ * @param tokens - Token group
+ * @param selector - CSS selector (default: ':root')
+ * @returns CSS string with custom properties
+ */
+function generateCSSVariables(tokens, selector = ':root') {
+    const variables = [];
+    function processTokens(obj, path = []) {
+        for (const [key, value] of Object.entries(obj)) {
+            const newPath = [...path, key];
+            if (typeof value === 'object' && value !== null) {
+                if ('value' in value && typeof value.value !== 'object') {
+                    // It's a token
+                    const token = value;
+                    const varName = `--${newPath.join('-')}`;
+                    variables.push(`  ${varName}: ${token.value};`);
+                }
+                else {
+                    // It's a nested group
+                    processTokens(value, newPath);
+                }
+            }
+        }
+    }
+    processTokens(tokens);
+    return `${selector} {\n${variables.join('\n')}\n}`;
+}
+/**
+ * Generates Tailwind CSS config from icon tokens.
+ *
+ * @param tokens - Token group
+ * @returns Tailwind config extend object
+ */
+function generateTailwindConfig(tokens) {
+    var _a;
+    const colors = {};
+    const spacing = {};
+    const strokeWidth = {};
+    function extractTokens(obj, type, prefix = '') {
+        for (const [key, value] of Object.entries(obj)) {
+            if (typeof value === 'object' && value !== null && 'value' in value) {
+                const token = value;
+                const tokenKey = prefix ? `${prefix}-${key}` : key;
+                if (token.type === 'color') {
+                    colors[tokenKey] = String(token.value);
+                }
+                else if (token.type === 'dimension') {
+                    spacing[tokenKey] = String(token.value);
+                }
+                else if (type === 'stroke') {
+                    strokeWidth[tokenKey] = String(token.value);
+                }
+            }
+            else if (typeof value === 'object' && value !== null) {
+                extractTokens(value, type, key);
+            }
+        }
+    }
+    // Navigate to the icon tokens
+    const iconTokens = (_a = tokens.ntd) === null || _a === void 0 ? void 0 : _a.icon;
+    if (iconTokens) {
+        if (iconTokens.color) {
+            extractTokens(iconTokens.color, 'color', 'icon');
+        }
+        if (iconTokens.size) {
+            extractTokens(iconTokens.size, 'size', 'icon');
+        }
+        if (iconTokens.stroke) {
+            extractTokens(iconTokens.stroke, 'stroke', 'icon');
+        }
+    }
+    return { colors, spacing, strokeWidth };
+}
+/* ────────────────────────────────────────────────────────────────────────────
+   FIGMA TOKENS EXPORT
+───────────────────────────────────────────────────────────────────────────── */
+/**
+ * Converts icon tokens to Figma Tokens format.
+ * Compatible with the Figma Tokens plugin.
+ *
+ * @param tokens - Token group
+ * @returns Figma Tokens compatible object
+ */
+function toFigmaTokens(tokens) {
+    const figmaTokens = {};
+    function processTokens(obj, path = []) {
+        for (const [key, value] of Object.entries(obj)) {
+            const newPath = [...path, key];
+            if (typeof value === 'object' && value !== null) {
+                if ('value' in value && typeof value.value !== 'object') {
+                    const token = value;
+                    let currentObj = figmaTokens;
+                    for (let i = 0; i < newPath.length - 1; i++) {
+                        const part = newPath[i];
+                        if (!currentObj[part]) {
+                            currentObj[part] = {};
+                        }
+                        currentObj = currentObj[part];
+                    }
+                    currentObj[newPath[newPath.length - 1]] = {
+                        value: token.value,
+                        type: mapToFigmaType(token.type),
+                    };
+                }
+                else {
+                    processTokens(value, newPath);
+                }
+            }
+        }
+    }
+    processTokens(tokens);
+    return figmaTokens;
+}
+function mapToFigmaType(type) {
+    var _a;
+    const typeMap = {
+        color: 'color',
+        dimension: 'sizing',
+        number: 'number',
+        duration: 'other',
+        cubicBezier: 'other',
+        string: 'other',
+    };
+    return (_a = typeMap[type !== null && type !== void 0 ? type : 'other']) !== null && _a !== void 0 ? _a : 'other';
+}
+/* ────────────────────────────────────────────────────────────────────────────
+   EXPORTS
+───────────────────────────────────────────────────────────────────────────── */
+var designTokens = {
+    generateIconTokens,
+    createStyleDictionaryConfig,
+    generateCSSVariables,
+    generateTailwindConfig,
+    toFigmaTokens,
+    DEFAULT_SIZE_TOKENS,
+    DEFAULT_COLOR_TOKENS,
+    DEFAULT_STROKE_TOKENS,
+    DEFAULT_ANIMATION_TOKENS,
+};
+
+export { DEFAULT_ANIMATION_TOKENS, DEFAULT_COLOR_TOKENS, DEFAULT_SIZE_TOKENS, DEFAULT_STROKE_TOKENS, createStyleDictionaryConfig, designTokens as default, generateCSSVariables, generateIconTokens, generateTailwindConfig, toFigmaTokens };

package/dist/esm/figmaExport.js

@@ -287,4 +287,3 @@ function batchExportIcons(svgElements, format, options) {
 }
 
 export { batchExportIcons, copyIconToClipboard, downloadIconAsPng, downloadIconAsSvg, exportIconToDataUrl, exportIconToFigmaNode, exportIconToSvgString, generateFigmaPluginManifest };
-//# sourceMappingURL=figmaExport.js.map

package/dist/esm/figmaSync.js

@@ -336,4 +336,3 @@ class FigmaSyncManager {
 }
 
 export { FigmaSyncManager, createFigmaSyncManager, diffIconSets };
-//# sourceMappingURL=figmaSync.js.map