@3fn/core 14.1.0 → 15.0.0

package/src/components/__tests__/colorInheritanceValidation.test.ts

@@ -1,267 +0,0 @@
-/**
- * @category evergreen
- * @purpose Verify colorInheritanceValidation component renders correctly and behaves as expected
- */
-/**
- * Color Inheritance Validation Tests
- * 
- * Validates that components automatically inherit new colors from updated semantic tokens.
- * 
- * Tests verify:
- * - ButtonCTA success variant shows green (not cyan)
- * - TextInputField error state shows pink (not orange)
- * - Warning states show amber (not yellow)
- * - Components automatically inherited new colors through token references
- * 
- * Requirements: 2.7, 10.1, 10.2, 10.3
- * 
- * UPDATED (Spec 052): Token names migrated to concept-first pattern
- * - Old: color.success.strong → New: color.feedback.success.text
- * - Old: color.error.strong → New: color.feedback.error.text
- * - Old: color.warning.strong → New: color.feedback.warning.text
- * 
- * @module components/__tests__/colorInheritanceValidation
- */
-
-import { colorTokens, getColorToken as getSemanticColorToken } from '../../tokens/semantic/ColorTokens';
-import { getColorToken as getPrimitiveColorToken } from '../../tokens/ColorTokens';
-
-describe('Color Inheritance Validation', () => {
-  describe('Semantic Token Updates', () => {
-    it('should verify color.feedback.success.text references green400 (not cyan400)', () => {
-      const successToken = colorTokens['color.feedback.success.text'];
-      
-      expect(successToken).toBeDefined();
-      expect(successToken.primitiveReferences.value).toBe('green400');
-      
-      // Verify it's NOT the old cyan color
-      expect(successToken.primitiveReferences.value).not.toBe('cyan400');
-    });
-
-    it('should verify color.feedback.error.text references pink400 (not orange300)', () => {
-      const errorToken = colorTokens['color.feedback.error.text'];
-      
-      expect(errorToken).toBeDefined();
-      expect(errorToken.primitiveReferences.value).toBe('pink400');
-      
-      // Verify it's NOT the old orange color
-      expect(errorToken.primitiveReferences.value).not.toBe('orange300');
-    });
-
-    it('should verify color.feedback.warning.text references amber (orange400, not yellow400)', () => {
-      const warningToken = colorTokens['color.feedback.warning.text'];
-      
-      expect(warningToken).toBeDefined();
-      expect(warningToken.primitiveReferences.value).toBe('orange400');
-      
-      // Verify it's NOT the old yellow color
-      expect(warningToken.primitiveReferences.value).not.toBe('yellow400');
-    });
-  });
-
-  describe('Primitive Color Values', () => {
-    it('should verify green400 has electric green color value', () => {
-      const green400 = getPrimitiveColorToken('green400');
-      
-      expect(green400).toBeDefined();
-      expect(green400.description).toContain('electric green');
-      
-      // Verify it has mode-aware values
-      const webValue = green400.platforms.web.value;
-      expect(webValue).toHaveProperty('light');
-      expect(webValue).toHaveProperty('dark');
-    });
-
-    it('should verify pink400 has hot pink color value', () => {
-      const pink400 = getPrimitiveColorToken('pink400');
-      
-      expect(pink400).toBeDefined();
-      expect(pink400.description).toContain('hot pink');
-      
-      // Verify it has mode-aware values
-      const webValue = pink400.platforms.web.value;
-      expect(webValue).toHaveProperty('light');
-      expect(webValue).toHaveProperty('dark');
-    });
-
-    it('should verify orange400 (amber) has appropriate color value', () => {
-      const orange400 = getPrimitiveColorToken('orange400');
-      
-      expect(orange400).toBeDefined();
-      // Orange is used for amber/warning colors
-      
-      // Verify it has mode-aware values
-      const webValue = orange400.platforms.web.value;
-      expect(webValue).toHaveProperty('light');
-      expect(webValue).toHaveProperty('dark');
-    });
-  });
-
-  describe('Component Color Inheritance', () => {
-    describe('ButtonCTA Success Variant', () => {
-      it('should inherit green color through semantic token chain', () => {
-        // ButtonCTA would use color.feedback.success.text for success variant
-        // Verify the token chain: ButtonCTA → color.feedback.success.text → green400
-        
-        const successToken = colorTokens['color.feedback.success.text'];
-        const primitiveRef = successToken.primitiveReferences.value;
-        
-        expect(primitiveRef).toBe('green400');
-        
-        // Verify the primitive token exists and has green color
-        const primitiveToken = getPrimitiveColorToken(primitiveRef as any);
-        expect(primitiveToken).toBeDefined();
-        expect(primitiveToken.description).toContain('electric green');
-      });
-
-      it('should NOT use old cyan color for success', () => {
-        const successToken = colorTokens['color.feedback.success.text'];
-        
-        // Verify it doesn't reference cyan
-        expect(successToken.primitiveReferences.value).not.toContain('cyan');
-      });
-    });
-
-    describe('TextInputField Error State', () => {
-      it('should inherit pink color through semantic token chain', () => {
-        // TextInputField uses color.feedback.error.text for error state
-        // Verify the token chain: TextInputField → color.feedback.error.text → pink400
-        
-        const errorToken = colorTokens['color.feedback.error.text'];
-        const primitiveRef = errorToken.primitiveReferences.value;
-        
-        expect(primitiveRef).toBe('pink400');
-        
-        // Verify the primitive token exists and has pink color
-        const primitiveToken = getPrimitiveColorToken(primitiveRef as any);
-        expect(primitiveToken).toBeDefined();
-        expect(primitiveToken.description).toContain('hot pink');
-      });
-
-      it('should NOT use old orange color for error', () => {
-        const errorToken = colorTokens['color.feedback.error.text'];
-        
-        // Verify it doesn't reference orange300 (old error color)
-        expect(errorToken.primitiveReferences.value).not.toBe('orange300');
-      });
-    });
-
-    describe('Warning States', () => {
-      it('should inherit amber (orange) color through semantic token chain', () => {
-        // Components using color.feedback.warning.text should get amber/orange
-        // Verify the token chain: Component → color.feedback.warning.text → orange400
-        
-        const warningToken = colorTokens['color.feedback.warning.text'];
-        const primitiveRef = warningToken.primitiveReferences.value;
-        
-        expect(primitiveRef).toBe('orange400');
-        
-        // Verify the primitive token exists
-        const primitiveToken = getPrimitiveColorToken(primitiveRef as any);
-        expect(primitiveToken).toBeDefined();
-      });
-
-      it('should NOT use old yellow color for warning', () => {
-        const warningToken = colorTokens['color.feedback.warning.text'];
-        
-        // Verify it doesn't reference yellow400 (old warning color)
-        expect(warningToken.primitiveReferences.value).not.toBe('yellow400');
-      });
-    });
-  });
-
-  describe('Automatic Inheritance Verification', () => {
-    it('should verify all semantic color tokens reference valid primitive tokens', () => {
-      const semanticTokenNames = Object.keys(colorTokens);
-      
-      semanticTokenNames.forEach(tokenName => {
-        const semanticToken = colorTokens[tokenName];
-        const primitiveRefs = semanticToken.primitiveReferences;
-        
-        // Handle both patterns:
-        // 1. Simple reference: { value: 'tokenName' }
-        // 2. Opacity composition: { color: 'tokenName', opacity: 'opacityToken' }
-        if (primitiveRefs.value) {
-          // Simple reference pattern
-          const primitiveRef = primitiveRefs.value;
-          const primitiveToken = getPrimitiveColorToken(primitiveRef as any);
-          expect(primitiveToken).toBeDefined();
-          
-          // Log for debugging
-          if (!primitiveToken) {
-            console.error(`Semantic token ${tokenName} references non-existent primitive ${primitiveRef}`);
-          }
-        } else if (primitiveRefs.color) {
-          // Opacity composition pattern
-          const colorRef = primitiveRefs.color;
-          const primitiveToken = getPrimitiveColorToken(colorRef as any);
-          expect(primitiveToken).toBeDefined();
-          
-          // Log for debugging
-          if (!primitiveToken) {
-            console.error(`Semantic token ${tokenName} references non-existent primitive color ${colorRef}`);
-          }
-          
-          // Verify opacity reference exists (optional - opacity tokens are in a different module)
-          expect(primitiveRefs.opacity).toBeDefined();
-        } else {
-          // Unknown pattern - fail the test
-          throw new Error(`Semantic token ${tokenName} has unknown primitiveReferences pattern: ${JSON.stringify(primitiveRefs)}`);
-        }
-      });
-    });
-
-    it('should verify components inherit colors without code changes', () => {
-      // This test verifies the architectural principle:
-      // Components reference semantic tokens (e.g., color.feedback.success.text)
-      // Semantic tokens reference primitive tokens (e.g., green400)
-      // When primitive tokens change, components automatically inherit new colors
-      
-      // Verify the chain is intact for success colors
-      const successToken = colorTokens['color.feedback.success.text'];
-      expect(successToken.primitiveReferences.value).toBe('green400');
-      
-      // Verify the chain is intact for error colors
-      const errorToken = colorTokens['color.feedback.error.text'];
-      expect(errorToken.primitiveReferences.value).toBe('pink400');
-      
-      // Verify the chain is intact for warning colors
-      const warningToken = colorTokens['color.feedback.warning.text'];
-      expect(warningToken.primitiveReferences.value).toBe('orange400');
-      
-      // This confirms components using these semantic tokens will automatically
-      // display the new colors without requiring component code changes
-    });
-  });
-
-  describe('Color Palette Completeness', () => {
-    it('should verify green color family exists with all variants', () => {
-      const greenVariants = ['green100', 'green200', 'green300', 'green400', 'green500'];
-      
-      greenVariants.forEach(variant => {
-        const token = getPrimitiveColorToken(variant as any);
-        expect(token).toBeDefined();
-        expect(token.description).toContain('green');
-      });
-    });
-
-    it('should verify pink color family exists with all variants', () => {
-      const pinkVariants = ['pink100', 'pink200', 'pink300', 'pink400', 'pink500'];
-      
-      pinkVariants.forEach(variant => {
-        const token = getPrimitiveColorToken(variant as any);
-        expect(token).toBeDefined();
-        expect(token.description).toContain('pink');
-      });
-    });
-
-    it('should verify violet color family is removed', () => {
-      const violetVariants = ['violet100', 'violet200', 'violet300', 'violet400', 'violet500'];
-      
-      violetVariants.forEach(variant => {
-        // getColorToken throws an error for non-existent tokens, so we need to catch it
-        expect(() => getPrimitiveColorToken(variant as any)).toThrow();
-      });
-    });
-  });
-});

package/src/components/__tests__/componentTypographyInheritance.test.ts

@@ -1,326 +0,0 @@
-/**
- * @category evergreen
- * @purpose Verify componentTypographyInheritance component renders correctly and behaves as expected
- */
-/**
- * Component Typography Token Structure Validation Tests
- * 
- * Validates typography token system integrity:
- * - All typography tokens reference valid primitive font family tokens
- * - Cross-platform consistency (same token references across platforms)
- * - Token structure follows semantic → primitive hierarchy
- * - Font stacks include proper fallbacks
- * 
- * These tests validate SYSTEM INTEGRITY, not design decisions.
- * Design decisions (which styles use which fonts) are flexible and can change.
- * 
- * These tests verify Requirements 4.5, 10.4, 10.5 from Spec 015
- * 
- * Task: 9.3 Validate component typography token structure
- */
-
-import { typographyTokens } from '../../tokens/semantic/TypographyTokens';
-import { fontFamilyTokens } from '../../tokens/FontFamilyTokens';
-
-describe('Component Typography Token Structure', () => {
-  describe('Token Structure Validation', () => {
-    it('should verify all typography tokens reference valid primitive font family tokens', () => {
-      const allTokenNames = Object.keys(typographyTokens);
-      const validFontFamilyTokens = ['fontFamilyBody', 'fontFamilyDisplay', 'fontFamilyMono'];
-      
-      allTokenNames.forEach(tokenName => {
-        const token = typographyTokens[tokenName];
-        const fontFamilyRef = token.primitiveReferences.fontFamily;
-        
-        // Verify fontFamily reference is a valid primitive token
-        expect(validFontFamilyTokens).toContain(fontFamilyRef);
-        
-        // Verify the referenced primitive token exists
-        expect(fontFamilyTokens[fontFamilyRef]).toBeDefined();
-      });
-    });
-
-    it('should verify heading tokens (h1-h6) reference font family tokens', () => {
-      const headingTokens = [
-        'typography.h1',
-        'typography.h2',
-        'typography.h3',
-        'typography.h4',
-        'typography.h5',
-        'typography.h6'
-      ];
-
-      headingTokens.forEach(tokenName => {
-        const token = typographyTokens[tokenName];
-        const fontFamilyRef = token.primitiveReferences.fontFamily;
-        
-        // Verify fontFamily reference starts with 'fontFamily' (is a primitive token)
-        expect(fontFamilyRef).toMatch(/^fontFamily/);
-        
-        // Verify the referenced token exists
-        expect(fontFamilyTokens[fontFamilyRef]).toBeDefined();
-      });
-    });
-  });
-
-  describe('Label Token Structure', () => {
-    it('should verify label tokens reference valid font family tokens', () => {
-      const labelTokens = [
-        'typography.labelXs',
-        'typography.labelSm',
-        'typography.labelMd',
-        'typography.labelMdFloat',
-        'typography.labelLg'
-      ];
-
-      labelTokens.forEach(tokenName => {
-        const token = typographyTokens[tokenName];
-        const fontFamilyRef = token.primitiveReferences.fontFamily;
-        
-        // Verify fontFamily reference is a primitive token
-        expect(fontFamilyRef).toMatch(/^fontFamily/);
-        
-        // Verify the referenced token exists
-        expect(fontFamilyTokens[fontFamilyRef]).toBeDefined();
-      });
-    });
-  });
-
-  describe('Button Token Structure', () => {
-    it('should verify button tokens reference valid font family tokens', () => {
-      const buttonTokens = [
-        'typography.buttonSm',
-        'typography.buttonMd',
-        'typography.buttonLg'
-      ];
-
-      buttonTokens.forEach(tokenName => {
-        const token = typographyTokens[tokenName];
-        const fontFamilyRef = token.primitiveReferences.fontFamily;
-        
-        // Verify fontFamily reference is a primitive token
-        expect(fontFamilyRef).toMatch(/^fontFamily/);
-        
-        // Verify the referenced token exists
-        expect(fontFamilyTokens[fontFamilyRef]).toBeDefined();
-      });
-    });
-  });
-
-  describe('Body Text Token Structure', () => {
-    it('should verify body text tokens reference valid font family tokens', () => {
-      const bodyTokens = [
-        'typography.bodySm',
-        'typography.bodyMd',
-        'typography.bodyLg',
-        'typography.caption',
-        'typography.legal'
-      ];
-
-      bodyTokens.forEach(tokenName => {
-        const token = typographyTokens[tokenName];
-        const fontFamilyRef = token.primitiveReferences.fontFamily;
-        
-        // Verify fontFamily reference is a primitive token
-        expect(fontFamilyRef).toMatch(/^fontFamily/);
-        
-        // Verify the referenced token exists
-        expect(fontFamilyTokens[fontFamilyRef]).toBeDefined();
-      });
-    });
-  });
-
-  describe('Code Text Token Structure', () => {
-    it('should verify code tokens reference valid font family tokens', () => {
-      const codeTokens = [
-        'typography.codeSm',
-        'typography.codeMd',
-        'typography.codeLg'
-      ];
-
-      codeTokens.forEach(tokenName => {
-        const token = typographyTokens[tokenName];
-        const fontFamilyRef = token.primitiveReferences.fontFamily;
-        
-        // Verify fontFamily reference is a primitive token
-        expect(fontFamilyRef).toMatch(/^fontFamily/);
-        
-        // Verify the referenced token exists
-        expect(fontFamilyTokens[fontFamilyRef]).toBeDefined();
-      });
-    });
-  });
-
-  describe('Token Inheritance Chain Validation', () => {
-    it('should verify all typography tokens follow semantic → primitive hierarchy', () => {
-      // Verify the inheritance chain:
-      // Component → Typography Token → Font Family Token → Font File
-      
-      const allTokenNames = Object.keys(typographyTokens);
-      
-      allTokenNames.forEach(tokenName => {
-        const token = typographyTokens[tokenName];
-        const fontFamilyRef = token.primitiveReferences.fontFamily;
-        
-        // Verify semantic token references a primitive token
-        expect(fontFamilyRef).toMatch(/^fontFamily/);
-        
-        // Verify the primitive token exists
-        const primitiveToken = fontFamilyTokens[fontFamilyRef];
-        expect(primitiveToken).toBeDefined();
-        
-        // Verify primitive token has platform-specific values
-        expect(primitiveToken.platforms.web).toBeDefined();
-        expect(primitiveToken.platforms.web.value).toBeDefined();
-      });
-    });
-
-    it('should verify token references are consistent (no hard-coded values)', () => {
-      const allTokenNames = Object.keys(typographyTokens);
-      
-      allTokenNames.forEach(tokenName => {
-        const token = typographyTokens[tokenName];
-        const fontFamilyRef = token.primitiveReferences.fontFamily;
-        
-        // Verify fontFamily is a token reference, not a hard-coded value
-        // Token references start with 'fontFamily'
-        expect(fontFamilyRef).toMatch(/^fontFamily/);
-        
-        // Verify it's not a hard-coded font name
-        expect(fontFamilyRef).not.toMatch(/Inter|Rajdhani|Arial|Helvetica/);
-      });
-    });
-  });
-
-  describe('Font Stack Validation', () => {
-    it('should verify all font family tokens include proper fallbacks', () => {
-      const fontFamilyTokenNames = Object.keys(fontFamilyTokens);
-      
-      fontFamilyTokenNames.forEach(tokenName => {
-        const fontToken = fontFamilyTokens[tokenName];
-        const fontValue = String(fontToken.platforms.web.value);
-        
-        // Should include generic font family fallback (sans-serif, serif, or monospace)
-        const hasGenericFallback = 
-          fontValue.includes('sans-serif') ||
-          fontValue.includes('serif') ||
-          fontValue.includes('monospace');
-        expect(hasGenericFallback).toBe(true);
-        
-        // Should have at least 2 fonts in the stack (primary + fallback)
-        const fontCount = fontValue.split(',').length;
-        expect(fontCount).toBeGreaterThanOrEqual(2);
-      });
-    });
-
-    it('should verify font stacks follow best practices', () => {
-      const fontFamilyTokenNames = Object.keys(fontFamilyTokens);
-      
-      fontFamilyTokenNames.forEach(tokenName => {
-        const fontToken = fontFamilyTokens[tokenName];
-        const fontValue = String(fontToken.platforms.web.value);
-        
-        // Should not be empty
-        expect(fontValue.length).toBeGreaterThan(0);
-        
-        // Should not have trailing commas
-        expect(fontValue).not.toMatch(/,\s*$/);
-        
-        // Should not have leading commas
-        expect(fontValue).not.toMatch(/^\s*,/);
-      });
-    });
-  });
-
-  describe('Cross-Platform Consistency', () => {
-    it('should verify all typography tokens have consistent structure across platforms', () => {
-      const allTokenNames = Object.keys(typographyTokens);
-      
-      allTokenNames.forEach(tokenName => {
-        const token = typographyTokens[tokenName];
-        const fontFamilyRef = token.primitiveReferences.fontFamily;
-        
-        // Verify the primitive token has all required platforms
-        const primitiveToken = fontFamilyTokens[fontFamilyRef];
-        expect(primitiveToken.platforms.web).toBeDefined();
-        expect(primitiveToken.platforms.ios).toBeDefined();
-        expect(primitiveToken.platforms.android).toBeDefined();
-        
-        // Verify each platform has a value
-        expect(primitiveToken.platforms.web.value).toBeDefined();
-        expect(primitiveToken.platforms.ios.value).toBeDefined();
-        expect(primitiveToken.platforms.android.value).toBeDefined();
-      });
-    });
-  });
-
-  describe('Requirements Validation', () => {
-    it('should satisfy Requirement 4.5: Typography tokens automatically inherit fonts through token references', () => {
-      // Requirement 4.5: WHEN fontFamily tokens are updated THEN all semantic 
-      // typography tokens SHALL automatically inherit new fonts through token references
-      
-      const allTokenNames = Object.keys(typographyTokens);
-      
-      allTokenNames.forEach(tokenName => {
-        const token = typographyTokens[tokenName];
-        const fontFamilyRef = token.primitiveReferences.fontFamily;
-        
-        // Verify semantic token references a primitive token (not hard-coded)
-        expect(fontFamilyRef).toMatch(/^fontFamily/);
-        
-        // Verify the primitive token exists and has values
-        const primitiveToken = fontFamilyTokens[fontFamilyRef];
-        expect(primitiveToken).toBeDefined();
-        expect(primitiveToken.platforms.web.value).toBeDefined();
-      });
-    });
-
-    it('should satisfy Requirement 10.4: Heading tokens reference valid font family tokens', () => {
-      const headingTokens = [
-        'typography.h1', 'typography.h2', 'typography.h3',
-        'typography.h4', 'typography.h5', 'typography.h6'
-      ];
-      
-      headingTokens.forEach(tokenName => {
-        const token = typographyTokens[tokenName];
-        const fontFamilyRef = token.primitiveReferences.fontFamily;
-        
-        // Verify heading references a valid primitive token
-        expect(fontFamilyRef).toMatch(/^fontFamily/);
-        expect(fontFamilyTokens[fontFamilyRef]).toBeDefined();
-      });
-    });
-
-    it('should satisfy Requirement 10.4: Label and button tokens reference valid font family tokens', () => {
-      const uiTokens = [
-        'typography.labelXs', 'typography.labelSm', 'typography.labelMd', 'typography.labelLg',
-        'typography.buttonSm', 'typography.buttonMd', 'typography.buttonLg'
-      ];
-      
-      uiTokens.forEach(tokenName => {
-        const token = typographyTokens[tokenName];
-        const fontFamilyRef = token.primitiveReferences.fontFamily;
-        
-        // Verify UI token references a valid primitive token
-        expect(fontFamilyRef).toMatch(/^fontFamily/);
-        expect(fontFamilyTokens[fontFamilyRef]).toBeDefined();
-      });
-    });
-
-    it('should satisfy Requirement 10.5: Body text tokens reference valid font family tokens', () => {
-      const bodyTokens = [
-        'typography.bodySm', 'typography.bodyMd', 'typography.bodyLg',
-        'typography.caption', 'typography.legal'
-      ];
-      
-      bodyTokens.forEach(tokenName => {
-        const token = typographyTokens[tokenName];
-        const fontFamilyRef = token.primitiveReferences.fontFamily;
-        
-        // Verify body token references a valid primitive token
-        expect(fontFamilyRef).toMatch(/^fontFamily/);
-        expect(fontFamilyTokens[fontFamilyRef]).toBeDefined();
-      });
-    });
-  });
-});