@nibin-org/tokens 1.0.0

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.
Files changed (9) hide show
  1. package/README.md +195 -0
  2. package/dist/index.cjs +700 -0
  3. package/dist/index.cjs.map +1 -0
  4. package/dist/index.d.cts +162 -0
  5. package/dist/index.d.ts +162 -0
  6. package/dist/index.js +662 -0
  7. package/dist/index.js.map +1 -0
  8. package/dist/styles.css +605 -0
  9. package/package.json +83 -0
package/dist/index.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.ts","../src/components/TokenDocumentation.tsx","../src/components/ColorGrid.tsx","../src/utils.ts","../src/components/SpacingScale.tsx","../src/components/RadiusShowcase.tsx","../src/components/SizeScale.tsx"],"sourcesContent":["/**\n * figma-token-docs\n * Beautiful visual documentation components for Figma design tokens\n * \n * @example\n * ```tsx\n * import { TokenDocumentation } from 'figma-token-docs';\n * import 'figma-token-docs/styles.css';\n * import tokens from './tokens.json';\n * \n * export default function DocsPage() {\n * return <TokenDocumentation tokens={tokens} />;\n * }\n * ```\n */\n\n// Main component\nexport { TokenDocumentation } from './components/TokenDocumentation';\nexport { default as TokenDocumentationDefault } from './components/TokenDocumentation';\n\n// Individual components for custom layouts\nexport { ColorGrid } from './components/ColorGrid';\nexport { SpacingScale } from './components/SpacingScale';\nexport { RadiusShowcase } from './components/RadiusShowcase';\nexport { SizeScale } from './components/SizeScale';\n\n// Types\nexport type {\n TokenDocumentationProps,\n ColorGridProps,\n SpacingScaleProps,\n RadiusShowcaseProps,\n SizeScaleProps,\n FigmaTokens,\n ParsedColorToken,\n ParsedSpacingToken,\n ParsedRadiusToken,\n ParsedSizeToken,\n ColorFamily,\n TokenValue,\n NestedTokens,\n} from './types';\n\n// Utilities (for advanced customization)\nexport {\n parseBaseColors,\n parseSemanticColors,\n parseSpacingTokens,\n parseRadiusTokens,\n parseSizeTokens,\n getContrastColor,\n copyToClipboard,\n} from './utils';\n","'use client';\n\nimport React, { useState, useMemo } from 'react';\nimport type { TokenDocumentationProps } from '../types';\nimport { ColorGrid } from './ColorGrid';\nimport { SpacingScale } from './SpacingScale';\nimport { RadiusShowcase } from './RadiusShowcase';\nimport { SizeScale } from './SizeScale';\n\ntype TabType = 'colors' | 'spacing' | 'sizes' | 'radius';\n\n/**\n * TokenDocumentation - Main wrapper component for design token visualization\n * \n * @example\n * ```tsx\n * import { TokenDocumentation } from 'figma-token-docs';\n * import 'figma-token-docs/styles.css';\n * import tokens from './tokens.json';\n * \n * export default function DocsPage() {\n * return <TokenDocumentation tokens={tokens} />;\n * }\n * ```\n */\nexport function TokenDocumentation({\n tokens,\n title = 'Design Tokens',\n subtitle = 'Interactive documentation for your design system',\n defaultTab = 'colors',\n showSearch = true,\n darkMode: initialDarkMode = false,\n onTokenClick,\n}: TokenDocumentationProps) {\n const [activeTab, setActiveTab] = useState<TabType>(defaultTab);\n const [searchQuery, setSearchQuery] = useState('');\n const [isDarkMode, setIsDarkMode] = useState(initialDarkMode);\n\n // Extract token sets\n const colorsValue = tokens['Colors/Value'];\n const spacingTokens = tokens['Spacing/Mode 1'] || {};\n const sizeTokens = tokens['Size/Mode 1'] || {};\n const radiusTokens = tokens['Radius/Mode 1'] || {};\n\n // Available tabs based on token data\n const availableTabs = useMemo(() => {\n const tabs: { id: TabType; label: string; icon: string }[] = [];\n\n if (colorsValue) {\n tabs.push({ id: 'colors', label: 'Colors', icon: '🎨' });\n }\n if (Object.keys(spacingTokens).length > 0) {\n tabs.push({ id: 'spacing', label: 'Spacing', icon: '📏' });\n }\n if (Object.keys(sizeTokens).length > 0) {\n tabs.push({ id: 'sizes', label: 'Sizes', icon: '📐' });\n }\n if (Object.keys(radiusTokens).length > 0) {\n tabs.push({ id: 'radius', label: 'Radius', icon: '⬜' });\n }\n\n return tabs;\n }, [colorsValue, spacingTokens, sizeTokens, radiusTokens]);\n\n // Ensure active tab is valid\n const validActiveTab = availableTabs.some(t => t.id === activeTab)\n ? activeTab\n : availableTabs[0]?.id || 'colors';\n\n const toggleDarkMode = () => {\n setIsDarkMode(!isDarkMode);\n };\n\n return (\n <div className=\"ftd-container\" data-theme={isDarkMode ? 'dark' : 'light'}>\n {/* Header */}\n <header className=\"ftd-header\">\n <div>\n <h1 className=\"ftd-title\">{title}</h1>\n <p className=\"ftd-subtitle\">{subtitle}</p>\n </div>\n <button\n className=\"ftd-theme-toggle\"\n onClick={toggleDarkMode}\n aria-label={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}\n >\n {isDarkMode ? '☀️' : '🌙'}\n <span>{isDarkMode ? 'Light' : 'Dark'}</span>\n </button>\n </header>\n\n {/* Search */}\n {showSearch && (\n <div className=\"ftd-search-container\">\n <div className=\"ftd-search-wrapper\">\n <svg\n className=\"ftd-search-icon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n >\n <circle cx=\"11\" cy=\"11\" r=\"8\" />\n <path d=\"M21 21l-4.35-4.35\" />\n </svg>\n <input\n type=\"text\"\n className=\"ftd-search-input\"\n placeholder=\"Search tokens...\"\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n />\n </div>\n </div>\n )}\n\n {/* Tabs */}\n {availableTabs.length > 1 && (\n <nav className=\"ftd-tabs\" role=\"tablist\">\n {availableTabs.map((tab) => (\n <button\n key={tab.id}\n className={`ftd-tab ${validActiveTab === tab.id ? 'active' : ''}`}\n onClick={() => setActiveTab(tab.id)}\n role=\"tab\"\n aria-selected={validActiveTab === tab.id}\n >\n <span style={{ marginRight: '8px' }}>{tab.icon}</span>\n {tab.label}\n </button>\n ))}\n </nav>\n )}\n\n {/* Tab Content */}\n <div role=\"tabpanel\">\n {validActiveTab === 'colors' && colorsValue && (\n <ColorGrid\n baseColors={colorsValue.base}\n fillColors={colorsValue.fill}\n strokeColors={colorsValue.stroke}\n textColors={colorsValue.text}\n onColorClick={onTokenClick}\n />\n )}\n\n {validActiveTab === 'spacing' && (\n <SpacingScale\n tokens={spacingTokens}\n onTokenClick={onTokenClick}\n />\n )}\n\n {validActiveTab === 'sizes' && (\n <SizeScale\n tokens={sizeTokens}\n onTokenClick={onTokenClick}\n />\n )}\n\n {validActiveTab === 'radius' && (\n <RadiusShowcase\n tokens={radiusTokens}\n onTokenClick={onTokenClick}\n />\n )}\n </div>\n\n {/* Empty State */}\n {availableTabs.length === 0 && (\n <div className=\"ftd-empty\">\n <div className=\"ftd-empty-icon\">📦</div>\n <h4 className=\"ftd-empty-title\">No tokens found</h4>\n <p className=\"ftd-empty-text\">\n Pass a valid tokens.json file from Figma Token Studio\n </p>\n </div>\n )}\n </div>\n );\n}\n\nexport default TokenDocumentation;\n","'use client';\n\nimport React, { useState, useCallback } from 'react';\nimport type { ColorGridProps, ParsedColorToken } from '../types';\nimport { parseBaseColors, parseSemanticColors, getContrastColor, copyToClipboard } from '../utils';\n\n/**\n * ColorGrid - Beautiful visualization of color tokens\n * Displays base colors as shade scales and semantic colors as grids\n */\nexport function ColorGrid({\n baseColors,\n fillColors,\n strokeColors,\n textColors,\n onColorClick,\n}: ColorGridProps) {\n const [copiedValue, setCopiedValue] = useState<string | null>(null);\n\n const handleCopy = useCallback(async (color: ParsedColorToken) => {\n const success = await copyToClipboard(color.value);\n if (success) {\n setCopiedValue(color.value);\n setTimeout(() => setCopiedValue(null), 2000);\n }\n onColorClick?.(color);\n }, [onColorClick]);\n\n const colorFamilies = baseColors ? parseBaseColors(baseColors) : [];\n const semanticFill = fillColors ? parseSemanticColors(fillColors, 'fill') : [];\n const semanticStroke = strokeColors ? parseSemanticColors(strokeColors, 'stroke') : [];\n const semanticText = textColors ? parseSemanticColors(textColors, 'text') : [];\n\n return (\n <div className=\"ftd-color-container\">\n {/* Base Colors */}\n {colorFamilies.length > 0 && (\n <div className=\"ftd-section\">\n <div className=\"ftd-section-header\">\n <div className=\"ftd-section-icon\">🎨</div>\n <h3 className=\"ftd-section-title\">Base Colors</h3>\n <span className=\"ftd-section-count\">{colorFamilies.length} families</span>\n </div>\n\n {colorFamilies.map((family) => (\n <div key={family.name} className=\"ftd-color-family\">\n <div className=\"ftd-color-family-header\">\n <div\n className=\"ftd-color-family-swatch\"\n style={{ backgroundColor: family.primaryColor }}\n />\n <h4 className=\"ftd-color-family-name\">{family.name}</h4>\n </div>\n\n <div className=\"ftd-color-scale\">\n {family.shades.map((shade) => (\n <div\n key={shade.name}\n className=\"ftd-color-shade\"\n style={{\n backgroundColor: shade.value,\n color: getContrastColor(shade.value),\n }}\n onClick={() => handleCopy(shade)}\n title={`Click to copy: ${shade.value}`}\n >\n <span className=\"ftd-color-shade-label\">{shade.shade}</span>\n <span className=\"ftd-color-shade-value\">{shade.value.substring(0, 7)}</span>\n </div>\n ))}\n </div>\n </div>\n ))}\n </div>\n )}\n\n {/* Semantic Fill Colors */}\n {semanticFill.length > 0 && (\n <div className=\"ftd-section\">\n <div className=\"ftd-section-header\">\n <div className=\"ftd-section-icon\">🖼️</div>\n <h3 className=\"ftd-section-title\">Fill Colors</h3>\n <span className=\"ftd-section-count\">{semanticFill.length} tokens</span>\n </div>\n\n <div className=\"ftd-token-grid\">\n {semanticFill.map((color) => (\n <ColorCard\n key={color.name}\n color={color}\n onClick={() => handleCopy(color)}\n />\n ))}\n </div>\n </div>\n )}\n\n {/* Semantic Stroke Colors */}\n {semanticStroke.length > 0 && (\n <div className=\"ftd-section\">\n <div className=\"ftd-section-header\">\n <div className=\"ftd-section-icon\">✏️</div>\n <h3 className=\"ftd-section-title\">Stroke Colors</h3>\n <span className=\"ftd-section-count\">{semanticStroke.length} tokens</span>\n </div>\n\n <div className=\"ftd-token-grid\">\n {semanticStroke.map((color) => (\n <ColorCard\n key={color.name}\n color={color}\n onClick={() => handleCopy(color)}\n />\n ))}\n </div>\n </div>\n )}\n\n {/* Semantic Text Colors */}\n {semanticText.length > 0 && (\n <div className=\"ftd-section\">\n <div className=\"ftd-section-header\">\n <div className=\"ftd-section-icon\">📝</div>\n <h3 className=\"ftd-section-title\">Text Colors</h3>\n <span className=\"ftd-section-count\">{semanticText.length} tokens</span>\n </div>\n\n <div className=\"ftd-token-grid\">\n {semanticText.map((color) => (\n <ColorCard\n key={color.name}\n color={color}\n onClick={() => handleCopy(color)}\n />\n ))}\n </div>\n </div>\n )}\n\n {/* Copy Toast */}\n {copiedValue && (\n <div className=\"ftd-copied-toast\">\n ✓ Copied: {copiedValue}\n </div>\n )}\n </div>\n );\n}\n\n/**\n * Individual color card component\n */\ninterface ColorCardInternalProps {\n color: ParsedColorToken;\n onClick: () => void;\n}\n\nfunction ColorCard({ color, onClick }: ColorCardInternalProps) {\n // Determine if this is an alias (reference to another token)\n const isAlias = color.value.startsWith('{');\n const displayValue = isAlias ? color.value : color.value.substring(0, 9);\n\n return (\n <div className=\"ftd-token-card\" onClick={onClick}>\n <div\n className=\"ftd-token-swatch\"\n style={{\n backgroundColor: isAlias ? 'var(--ftd-bg-tertiary)' : color.value,\n }}\n >\n {isAlias && (\n <span style={{\n fontSize: '0.625rem',\n color: 'var(--ftd-text-secondary)',\n padding: '4px',\n }}>\n Alias →\n </span>\n )}\n </div>\n <div className=\"ftd-token-info\">\n <p className=\"ftd-token-name\">{color.name}</p>\n <p className=\"ftd-token-value\">\n {displayValue}\n <svg\n className=\"ftd-copy-icon\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n >\n <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\" />\n <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\" />\n </svg>\n </p>\n </div>\n </div>\n );\n}\n\nexport default ColorGrid;\n","/**\n * Utility functions for parsing and processing Figma tokens\n */\n\nimport type {\n NestedTokens,\n TokenValue,\n ParsedColorToken,\n ParsedSpacingToken,\n ParsedRadiusToken,\n ParsedSizeToken,\n ColorFamily,\n} from './types';\n\n/**\n * Check if a value is a token (has value and type properties)\n */\nexport function isTokenValue(obj: unknown): obj is TokenValue {\n return (\n typeof obj === 'object' &&\n obj !== null &&\n 'value' in obj &&\n 'type' in obj\n );\n}\n\n/**\n * Parse a numeric value from a CSS dimension string\n */\nexport function parseNumericValue(value: string): number {\n const match = value.match(/^([\\d.]+)/);\n return match ? parseFloat(match[1]) : 0;\n}\n\n/**\n * Convert a token path to a CSS variable name\n */\nexport function toCssVariable(path: string, prefix: string = ''): string {\n const cleanPath = path.replace(/\\./g, '-').replace(/\\s+/g, '-').toLowerCase();\n return prefix ? `--${prefix}-${cleanPath}` : `--${cleanPath}`;\n}\n\n/**\n * Get text color (black or white) based on background luminance\n */\nexport function getContrastColor(hexColor: string): 'black' | 'white' {\n // Remove # if present\n const hex = hexColor.replace('#', '');\n \n // Handle 8-character hex (with alpha)\n const r = parseInt(hex.substring(0, 2), 16);\n const g = parseInt(hex.substring(2, 4), 16);\n const b = parseInt(hex.substring(4, 6), 16);\n \n // Calculate relative luminance\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n \n return luminance > 0.5 ? 'black' : 'white';\n}\n\n/**\n * Parse base color tokens into color families\n */\nexport function parseBaseColors(tokens: NestedTokens): ColorFamily[] {\n const families: ColorFamily[] = [];\n \n for (const [familyName, shades] of Object.entries(tokens)) {\n if (typeof shades !== 'object' || shades === null) continue;\n \n const family: ColorFamily = {\n name: familyName,\n primaryColor: '',\n shades: [],\n };\n \n for (const [shadeName, token] of Object.entries(shades as NestedTokens)) {\n if (isTokenValue(token)) {\n const colorToken: ParsedColorToken = {\n name: `${familyName}-${shadeName}`,\n value: token.value,\n cssVariable: `--base-${familyName}-${shadeName}`,\n shade: shadeName,\n family: familyName,\n };\n family.shades.push(colorToken);\n \n // Use shade 50 as primary color\n if (shadeName === '50') {\n family.primaryColor = token.value;\n }\n }\n }\n \n // Sort shades numerically\n family.shades.sort((a, b) => {\n const aNum = parseInt(a.shade || '0');\n const bNum = parseInt(b.shade || '0');\n return aNum - bNum;\n });\n \n // If no shade 50, use first available shade as primary\n if (!family.primaryColor && family.shades.length > 0) {\n family.primaryColor = family.shades[Math.floor(family.shades.length / 2)]?.value || '';\n }\n \n if (family.shades.length > 0) {\n families.push(family);\n }\n }\n \n return families;\n}\n\n/**\n * Parse semantic color tokens (fill, stroke, text)\n */\nexport function parseSemanticColors(tokens: NestedTokens, prefix: string): ParsedColorToken[] {\n const colors: ParsedColorToken[] = [];\n \n for (const [name, token] of Object.entries(tokens)) {\n if (isTokenValue(token)) {\n // Resolve alias if present\n let value = token.value;\n if (value.startsWith('{') && value.endsWith('}')) {\n // Keep the alias reference for display purposes\n value = token.value;\n }\n \n colors.push({\n name,\n value,\n cssVariable: `--${prefix}-${name}`,\n });\n }\n }\n \n return colors;\n}\n\n/**\n * Parse spacing tokens\n */\nexport function parseSpacingTokens(tokens: NestedTokens): ParsedSpacingToken[] {\n const spacings: ParsedSpacingToken[] = [];\n \n for (const [name, token] of Object.entries(tokens)) {\n if (isTokenValue(token)) {\n const cleanName = name.replace(/^space-/, '');\n spacings.push({\n name: cleanName,\n value: token.value,\n cssVariable: `--space-${cleanName}`,\n numericValue: parseNumericValue(token.value),\n });\n }\n }\n \n // Sort by numeric value\n return spacings.sort((a, b) => a.numericValue - b.numericValue);\n}\n\n/**\n * Parse radius tokens\n */\nexport function parseRadiusTokens(tokens: NestedTokens): ParsedRadiusToken[] {\n const radiuses: ParsedRadiusToken[] = [];\n \n for (const [name, token] of Object.entries(tokens)) {\n if (isTokenValue(token)) {\n const cleanName = name.replace(/^radius-/, '');\n radiuses.push({\n name: cleanName,\n value: token.value,\n cssVariable: `--radius-${cleanName}`,\n numericValue: parseNumericValue(token.value),\n });\n }\n }\n \n return radiuses.sort((a, b) => a.numericValue - b.numericValue);\n}\n\n/**\n * Parse size tokens\n */\nexport function parseSizeTokens(tokens: NestedTokens): ParsedSizeToken[] {\n const sizes: ParsedSizeToken[] = [];\n \n for (const [name, token] of Object.entries(tokens)) {\n if (isTokenValue(token)) {\n const cleanName = name.replace(/^size-/, '');\n sizes.push({\n name: cleanName,\n value: token.value,\n cssVariable: `--size-${cleanName}`,\n numericValue: parseNumericValue(token.value),\n });\n }\n }\n \n return sizes.sort((a, b) => a.numericValue - b.numericValue);\n}\n\n/**\n * Copy text to clipboard\n */\nexport async function copyToClipboard(text: string): Promise<boolean> {\n try {\n await navigator.clipboard.writeText(text);\n return true;\n } catch {\n // Fallback for older browsers\n const textarea = document.createElement('textarea');\n textarea.value = text;\n document.body.appendChild(textarea);\n textarea.select();\n const success = document.execCommand('copy');\n document.body.removeChild(textarea);\n return success;\n }\n}\n","'use client';\n\nimport React, { useState, useCallback } from 'react';\nimport type { SpacingScaleProps, ParsedSpacingToken } from '../types';\nimport { parseSpacingTokens, copyToClipboard } from '../utils';\n\n/**\n * SpacingScale - Visual representation of spacing tokens\n * Shows horizontal bars with proportional widths\n */\nexport function SpacingScale({ tokens, onTokenClick }: SpacingScaleProps) {\n const [copiedValue, setCopiedValue] = useState<string | null>(null);\n\n const spacingTokens = parseSpacingTokens(tokens);\n const maxValue = Math.max(...spacingTokens.map(t => t.numericValue), 1);\n\n const handleCopy = useCallback(async (token: ParsedSpacingToken) => {\n const success = await copyToClipboard(token.value);\n if (success) {\n setCopiedValue(token.value);\n setTimeout(() => setCopiedValue(null), 2000);\n }\n onTokenClick?.(token);\n }, [onTokenClick]);\n\n if (spacingTokens.length === 0) {\n return (\n <div className=\"ftd-empty\">\n <div className=\"ftd-empty-icon\">📏</div>\n <h4 className=\"ftd-empty-title\">No spacing tokens found</h4>\n <p className=\"ftd-empty-text\">Add spacing tokens to your tokens.json file</p>\n </div>\n );\n }\n\n return (\n <div className=\"ftd-section\">\n <div className=\"ftd-section-header\">\n <div className=\"ftd-section-icon\">📏</div>\n <h3 className=\"ftd-section-title\">Spacing Scale</h3>\n <span className=\"ftd-section-count\">{spacingTokens.length} tokens</span>\n </div>\n\n <div className=\"ftd-spacing-list\">\n {spacingTokens.map((token) => {\n const widthPercent = (token.numericValue / maxValue) * 100;\n\n return (\n <div\n key={token.name}\n className=\"ftd-spacing-item\"\n onClick={() => handleCopy(token)}\n style={{ cursor: 'pointer' }}\n >\n <span className=\"ftd-spacing-label\">{token.name}</span>\n <div className=\"ftd-spacing-bar-container\">\n <div\n className=\"ftd-spacing-bar\"\n style={{ width: `${Math.max(widthPercent, 5)}%` }}\n />\n </div>\n <span className=\"ftd-spacing-value\">{token.value}</span>\n </div>\n );\n })}\n </div>\n\n {/* Copy Toast */}\n {copiedValue && (\n <div className=\"ftd-copied-toast\">\n ✓ Copied: {copiedValue}\n </div>\n )}\n </div>\n );\n}\n\nexport default SpacingScale;\n","'use client';\n\nimport React, { useState, useCallback } from 'react';\nimport type { RadiusShowcaseProps, ParsedRadiusToken } from '../types';\nimport { parseRadiusTokens, copyToClipboard } from '../utils';\n\n/**\n * RadiusShowcase - Visual demonstration of border radius tokens\n * Shows boxes with actual border radius applied\n */\nexport function RadiusShowcase({ tokens, onTokenClick }: RadiusShowcaseProps) {\n const [copiedValue, setCopiedValue] = useState<string | null>(null);\n\n const radiusTokens = parseRadiusTokens(tokens);\n\n const handleCopy = useCallback(async (token: ParsedRadiusToken) => {\n const success = await copyToClipboard(token.value);\n if (success) {\n setCopiedValue(token.value);\n setTimeout(() => setCopiedValue(null), 2000);\n }\n onTokenClick?.(token);\n }, [onTokenClick]);\n\n if (radiusTokens.length === 0) {\n return (\n <div className=\"ftd-empty\">\n <div className=\"ftd-empty-icon\">⬜</div>\n <h4 className=\"ftd-empty-title\">No radius tokens found</h4>\n <p className=\"ftd-empty-text\">Add radius tokens to your tokens.json file</p>\n </div>\n );\n }\n\n return (\n <div className=\"ftd-section\">\n <div className=\"ftd-section-header\">\n <div className=\"ftd-section-icon\">⬜</div>\n <h3 className=\"ftd-section-title\">Border Radius</h3>\n <span className=\"ftd-section-count\">{radiusTokens.length} tokens</span>\n </div>\n\n <div className=\"ftd-radius-grid\">\n {radiusTokens.map((token) => (\n <div\n key={token.name}\n className=\"ftd-radius-item\"\n onClick={() => handleCopy(token)}\n style={{ cursor: 'pointer' }}\n >\n <div\n className=\"ftd-radius-preview\"\n style={{ borderRadius: token.value }}\n />\n <p className=\"ftd-radius-label\">{token.name}</p>\n <p className=\"ftd-radius-value\">{token.value}</p>\n </div>\n ))}\n </div>\n\n {/* Copy Toast */}\n {copiedValue && (\n <div className=\"ftd-copied-toast\">\n ✓ Copied: {copiedValue}\n </div>\n )}\n </div>\n );\n}\n\nexport default RadiusShowcase;\n","'use client';\n\nimport React, { useState, useCallback } from 'react';\nimport type { SizeScaleProps, ParsedSizeToken } from '../types';\nimport { parseSizeTokens, copyToClipboard } from '../utils';\n\n/**\n * SizeScale - Visual representation of size tokens\n * Shows vertical bars with proportional heights and horizontal bars\n */\nexport function SizeScale({ tokens, onTokenClick }: SizeScaleProps) {\n const [copiedValue, setCopiedValue] = useState<string | null>(null);\n\n const sizeTokens = parseSizeTokens(tokens);\n const maxValue = Math.max(...sizeTokens.map(t => t.numericValue), 1);\n\n const handleCopy = useCallback(async (token: ParsedSizeToken) => {\n const success = await copyToClipboard(token.value);\n if (success) {\n setCopiedValue(token.value);\n setTimeout(() => setCopiedValue(null), 2000);\n }\n onTokenClick?.(token);\n }, [onTokenClick]);\n\n if (sizeTokens.length === 0) {\n return (\n <div className=\"ftd-empty\">\n <div className=\"ftd-empty-icon\">📐</div>\n <h4 className=\"ftd-empty-title\">No size tokens found</h4>\n <p className=\"ftd-empty-text\">Add size tokens to your tokens.json file</p>\n </div>\n );\n }\n\n return (\n <div className=\"ftd-section\">\n <div className=\"ftd-section-header\">\n <div className=\"ftd-section-icon\">📐</div>\n <h3 className=\"ftd-section-title\">Size Scale</h3>\n <span className=\"ftd-section-count\">{sizeTokens.length} tokens</span>\n </div>\n\n {/* Vertical bar chart */}\n <div className=\"ftd-size-grid\">\n {sizeTokens.map((token) => {\n const heightPercent = (token.numericValue / maxValue) * 200;\n\n return (\n <div\n key={token.name}\n className=\"ftd-size-item\"\n onClick={() => handleCopy(token)}\n style={{ cursor: 'pointer' }}\n title={`${token.name}: ${token.value}`}\n >\n <div\n className=\"ftd-size-bar\"\n style={{\n height: `${Math.max(heightPercent, 8)}px`,\n width: '32px',\n }}\n />\n <span className=\"ftd-size-label\">{token.name}</span>\n </div>\n );\n })}\n </div>\n\n {/* Token list for reference */}\n <div style={{ marginTop: '24px' }}>\n <div className=\"ftd-spacing-list\">\n {sizeTokens.map((token) => (\n <div\n key={token.name}\n className=\"ftd-spacing-item\"\n onClick={() => handleCopy(token)}\n style={{ cursor: 'pointer' }}\n >\n <span className=\"ftd-spacing-label\">{token.name}</span>\n <div className=\"ftd-spacing-bar-container\">\n <div\n className=\"ftd-spacing-bar\"\n style={{ width: `${(token.numericValue / maxValue) * 100}%` }}\n />\n </div>\n <span className=\"ftd-spacing-value\">{token.value}</span>\n </div>\n ))}\n </div>\n </div>\n\n {/* Copy Toast */}\n {copiedValue && (\n <div className=\"ftd-copied-toast\">\n ✓ Copied: {copiedValue}\n </div>\n )}\n </div>\n );\n}\n\nexport default SizeScale;\n"],"mappings":"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","names":["import_react","import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime"]}
package/dist/index.d.cts ADDED
@@ -0,0 +1,162 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+
3
+ /**
4
+ * Type definitions for figma-token-docs
5
+ */
6
+ interface TokenValue {
7
+ value: string;
8
+ type: string;
9
+ }
10
+ interface NestedTokens {
11
+ [key: string]: TokenValue | NestedTokens;
12
+ }
13
+ interface ParsedColorToken {
14
+ name: string;
15
+ value: string;
16
+ cssVariable: string;
17
+ shade?: string;
18
+ family?: string;
19
+ }
20
+ interface ParsedSpacingToken {
21
+ name: string;
22
+ value: string;
23
+ cssVariable: string;
24
+ numericValue: number;
25
+ }
26
+ interface ParsedRadiusToken {
27
+ name: string;
28
+ value: string;
29
+ cssVariable: string;
30
+ numericValue: number;
31
+ }
32
+ interface ParsedSizeToken {
33
+ name: string;
34
+ value: string;
35
+ cssVariable: string;
36
+ numericValue: number;
37
+ }
38
+ interface ColorFamily {
39
+ name: string;
40
+ primaryColor: string;
41
+ shades: ParsedColorToken[];
42
+ }
43
+ interface FigmaTokens {
44
+ global?: Record<string, unknown>;
45
+ 'Colors/Value'?: {
46
+ base?: NestedTokens;
47
+ fill?: NestedTokens;
48
+ stroke?: NestedTokens;
49
+ text?: NestedTokens;
50
+ };
51
+ 'Spacing/Mode 1'?: NestedTokens;
52
+ 'Size/Mode 1'?: NestedTokens;
53
+ 'Radius/Mode 1'?: NestedTokens;
54
+ 'Components/Mode 1'?: NestedTokens;
55
+ $themes?: unknown[];
56
+ $metadata?: {
57
+ tokenSetOrder?: string[];
58
+ };
59
+ }
60
+ interface TokenDocumentationProps {
61
+ tokens: FigmaTokens;
62
+ title?: string;
63
+ subtitle?: string;
64
+ defaultTab?: 'colors' | 'spacing' | 'sizes' | 'radius';
65
+ showSearch?: boolean;
66
+ darkMode?: boolean;
67
+ onTokenClick?: (token: ParsedColorToken | ParsedSpacingToken | ParsedRadiusToken | ParsedSizeToken) => void;
68
+ }
69
+ interface ColorGridProps {
70
+ baseColors?: NestedTokens;
71
+ fillColors?: NestedTokens;
72
+ strokeColors?: NestedTokens;
73
+ textColors?: NestedTokens;
74
+ onColorClick?: (color: ParsedColorToken) => void;
75
+ }
76
+ interface SpacingScaleProps {
77
+ tokens: NestedTokens;
78
+ onTokenClick?: (token: ParsedSpacingToken) => void;
79
+ }
80
+ interface RadiusShowcaseProps {
81
+ tokens: NestedTokens;
82
+ onTokenClick?: (token: ParsedRadiusToken) => void;
83
+ }
84
+ interface SizeScaleProps {
85
+ tokens: NestedTokens;
86
+ onTokenClick?: (token: ParsedSizeToken) => void;
87
+ }
88
+
89
+ /**
90
+ * TokenDocumentation - Main wrapper component for design token visualization
91
+ *
92
+ * @example
93
+ * ```tsx
94
+ * import { TokenDocumentation } from 'figma-token-docs';
95
+ * import 'figma-token-docs/styles.css';
96
+ * import tokens from './tokens.json';
97
+ *
98
+ * export default function DocsPage() {
99
+ * return <TokenDocumentation tokens={tokens} />;
100
+ * }
101
+ * ```
102
+ */
103
+ declare function TokenDocumentation({ tokens, title, subtitle, defaultTab, showSearch, darkMode: initialDarkMode, onTokenClick, }: TokenDocumentationProps): react_jsx_runtime.JSX.Element;
104
+
105
+ /**
106
+ * ColorGrid - Beautiful visualization of color tokens
107
+ * Displays base colors as shade scales and semantic colors as grids
108
+ */
109
+ declare function ColorGrid({ baseColors, fillColors, strokeColors, textColors, onColorClick, }: ColorGridProps): react_jsx_runtime.JSX.Element;
110
+
111
+ /**
112
+ * SpacingScale - Visual representation of spacing tokens
113
+ * Shows horizontal bars with proportional widths
114
+ */
115
+ declare function SpacingScale({ tokens, onTokenClick }: SpacingScaleProps): react_jsx_runtime.JSX.Element;
116
+
117
+ /**
118
+ * RadiusShowcase - Visual demonstration of border radius tokens
119
+ * Shows boxes with actual border radius applied
120
+ */
121
+ declare function RadiusShowcase({ tokens, onTokenClick }: RadiusShowcaseProps): react_jsx_runtime.JSX.Element;
122
+
123
+ /**
124
+ * SizeScale - Visual representation of size tokens
125
+ * Shows vertical bars with proportional heights and horizontal bars
126
+ */
127
+ declare function SizeScale({ tokens, onTokenClick }: SizeScaleProps): react_jsx_runtime.JSX.Element;
128
+
129
+ /**
130
+ * Utility functions for parsing and processing Figma tokens
131
+ */
132
+
133
+ /**
134
+ * Get text color (black or white) based on background luminance
135
+ */
136
+ declare function getContrastColor(hexColor: string): 'black' | 'white';
137
+ /**
138
+ * Parse base color tokens into color families
139
+ */
140
+ declare function parseBaseColors(tokens: NestedTokens): ColorFamily[];
141
+ /**
142
+ * Parse semantic color tokens (fill, stroke, text)
143
+ */
144
+ declare function parseSemanticColors(tokens: NestedTokens, prefix: string): ParsedColorToken[];
145
+ /**
146
+ * Parse spacing tokens
147
+ */
148
+ declare function parseSpacingTokens(tokens: NestedTokens): ParsedSpacingToken[];
149
+ /**
150
+ * Parse radius tokens
151
+ */
152
+ declare function parseRadiusTokens(tokens: NestedTokens): ParsedRadiusToken[];
153
+ /**
154
+ * Parse size tokens
155
+ */
156
+ declare function parseSizeTokens(tokens: NestedTokens): ParsedSizeToken[];
157
+ /**
158
+ * Copy text to clipboard
159
+ */
160
+ declare function copyToClipboard(text: string): Promise<boolean>;
161
+
162
+ export { type ColorFamily, ColorGrid, type ColorGridProps, type FigmaTokens, type NestedTokens, type ParsedColorToken, type ParsedRadiusToken, type ParsedSizeToken, type ParsedSpacingToken, RadiusShowcase, type RadiusShowcaseProps, SizeScale, type SizeScaleProps, SpacingScale, type SpacingScaleProps, TokenDocumentation, TokenDocumentation as TokenDocumentationDefault, type TokenDocumentationProps, type TokenValue, copyToClipboard, getContrastColor, parseBaseColors, parseRadiusTokens, parseSemanticColors, parseSizeTokens, parseSpacingTokens };
package/dist/index.d.ts ADDED
@@ -0,0 +1,162 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+
3
+ /**
4
+ * Type definitions for figma-token-docs
5
+ */
6
+ interface TokenValue {
7
+ value: string;
8
+ type: string;
9
+ }
10
+ interface NestedTokens {
11
+ [key: string]: TokenValue | NestedTokens;
12
+ }
13
+ interface ParsedColorToken {
14
+ name: string;
15
+ value: string;
16
+ cssVariable: string;
17
+ shade?: string;
18
+ family?: string;
19
+ }
20
+ interface ParsedSpacingToken {
21
+ name: string;
22
+ value: string;
23
+ cssVariable: string;
24
+ numericValue: number;
25
+ }
26
+ interface ParsedRadiusToken {
27
+ name: string;
28
+ value: string;
29
+ cssVariable: string;
30
+ numericValue: number;
31
+ }
32
+ interface ParsedSizeToken {
33
+ name: string;
34
+ value: string;
35
+ cssVariable: string;
36
+ numericValue: number;
37
+ }
38
+ interface ColorFamily {
39
+ name: string;
40
+ primaryColor: string;
41
+ shades: ParsedColorToken[];
42
+ }
43
+ interface FigmaTokens {
44
+ global?: Record<string, unknown>;
45
+ 'Colors/Value'?: {
46
+ base?: NestedTokens;
47
+ fill?: NestedTokens;
48
+ stroke?: NestedTokens;
49
+ text?: NestedTokens;
50
+ };
51
+ 'Spacing/Mode 1'?: NestedTokens;
52
+ 'Size/Mode 1'?: NestedTokens;
53
+ 'Radius/Mode 1'?: NestedTokens;
54
+ 'Components/Mode 1'?: NestedTokens;
55
+ $themes?: unknown[];
56
+ $metadata?: {
57
+ tokenSetOrder?: string[];
58
+ };
59
+ }
60
+ interface TokenDocumentationProps {
61
+ tokens: FigmaTokens;
62
+ title?: string;
63
+ subtitle?: string;
64
+ defaultTab?: 'colors' | 'spacing' | 'sizes' | 'radius';
65
+ showSearch?: boolean;
66
+ darkMode?: boolean;
67
+ onTokenClick?: (token: ParsedColorToken | ParsedSpacingToken | ParsedRadiusToken | ParsedSizeToken) => void;
68
+ }
69
+ interface ColorGridProps {
70
+ baseColors?: NestedTokens;
71
+ fillColors?: NestedTokens;
72
+ strokeColors?: NestedTokens;
73
+ textColors?: NestedTokens;
74
+ onColorClick?: (color: ParsedColorToken) => void;
75
+ }
76
+ interface SpacingScaleProps {
77
+ tokens: NestedTokens;
78
+ onTokenClick?: (token: ParsedSpacingToken) => void;
79
+ }
80
+ interface RadiusShowcaseProps {
81
+ tokens: NestedTokens;
82
+ onTokenClick?: (token: ParsedRadiusToken) => void;
83
+ }
84
+ interface SizeScaleProps {
85
+ tokens: NestedTokens;
86
+ onTokenClick?: (token: ParsedSizeToken) => void;
87
+ }
88
+
89
+ /**
90
+ * TokenDocumentation - Main wrapper component for design token visualization
91
+ *
92
+ * @example
93
+ * ```tsx
94
+ * import { TokenDocumentation } from 'figma-token-docs';
95
+ * import 'figma-token-docs/styles.css';
96
+ * import tokens from './tokens.json';
97
+ *
98
+ * export default function DocsPage() {
99
+ * return <TokenDocumentation tokens={tokens} />;
100
+ * }
101
+ * ```
102
+ */
103
+ declare function TokenDocumentation({ tokens, title, subtitle, defaultTab, showSearch, darkMode: initialDarkMode, onTokenClick, }: TokenDocumentationProps): react_jsx_runtime.JSX.Element;
104
+
105
+ /**
106
+ * ColorGrid - Beautiful visualization of color tokens
107
+ * Displays base colors as shade scales and semantic colors as grids
108
+ */
109
+ declare function ColorGrid({ baseColors, fillColors, strokeColors, textColors, onColorClick, }: ColorGridProps): react_jsx_runtime.JSX.Element;
110
+
111
+ /**
112
+ * SpacingScale - Visual representation of spacing tokens
113
+ * Shows horizontal bars with proportional widths
114
+ */
115
+ declare function SpacingScale({ tokens, onTokenClick }: SpacingScaleProps): react_jsx_runtime.JSX.Element;
116
+
117
+ /**
118
+ * RadiusShowcase - Visual demonstration of border radius tokens
119
+ * Shows boxes with actual border radius applied
120
+ */
121
+ declare function RadiusShowcase({ tokens, onTokenClick }: RadiusShowcaseProps): react_jsx_runtime.JSX.Element;
122
+
123
+ /**
124
+ * SizeScale - Visual representation of size tokens
125
+ * Shows vertical bars with proportional heights and horizontal bars
126
+ */
127
+ declare function SizeScale({ tokens, onTokenClick }: SizeScaleProps): react_jsx_runtime.JSX.Element;
128
+
129
+ /**
130
+ * Utility functions for parsing and processing Figma tokens
131
+ */
132
+
133
+ /**
134
+ * Get text color (black or white) based on background luminance
135
+ */
136
+ declare function getContrastColor(hexColor: string): 'black' | 'white';
137
+ /**
138
+ * Parse base color tokens into color families
139
+ */
140
+ declare function parseBaseColors(tokens: NestedTokens): ColorFamily[];
141
+ /**
142
+ * Parse semantic color tokens (fill, stroke, text)
143
+ */
144
+ declare function parseSemanticColors(tokens: NestedTokens, prefix: string): ParsedColorToken[];
145
+ /**
146
+ * Parse spacing tokens
147
+ */
148
+ declare function parseSpacingTokens(tokens: NestedTokens): ParsedSpacingToken[];
149
+ /**
150
+ * Parse radius tokens
151
+ */
152
+ declare function parseRadiusTokens(tokens: NestedTokens): ParsedRadiusToken[];
153
+ /**
154
+ * Parse size tokens
155
+ */
156
+ declare function parseSizeTokens(tokens: NestedTokens): ParsedSizeToken[];
157
+ /**
158
+ * Copy text to clipboard
159
+ */
160
+ declare function copyToClipboard(text: string): Promise<boolean>;
161
+
162
+ export { type ColorFamily, ColorGrid, type ColorGridProps, type FigmaTokens, type NestedTokens, type ParsedColorToken, type ParsedRadiusToken, type ParsedSizeToken, type ParsedSpacingToken, RadiusShowcase, type RadiusShowcaseProps, SizeScale, type SizeScaleProps, SpacingScale, type SpacingScaleProps, TokenDocumentation, TokenDocumentation as TokenDocumentationDefault, type TokenDocumentationProps, type TokenValue, copyToClipboard, getContrastColor, parseBaseColors, parseRadiusTokens, parseSemanticColors, parseSizeTokens, parseSpacingTokens };