import { rgbaObjectToHex8 } from '../utilities/convertColor' ; import { internalTokenInterface } from '@typings/propertyObject' ; import { StandardTokenInterface , StandardTokenTypes , StandardTokenDataInterface , StandardTokenGroup } from '@typings/standardToken' ; import roundWithDecimals from '../utilities/roundWithDecimals' ; import { tokenExtensions } from './tokenExtensions' ; import config from '@config/config' ; const lineHeightToDimension = ( values ) : number => { if ( values . lineHeight . unit === 'pixel' ) { return roundWithDecimals ( values . lineHeight . value , 3 ) ; } if ( values . lineHeight . unit === 'percent' ) { return roundWithDecimals ( values . fontSize . value * ( values . lineHeight . value / 100 ) , 3 ) ; } return roundWithDecimals ( values . fontSize . value * 1.2 , 3 ) ; } ; const letterSpacingToDimensions = ( values ) : number => { if ( values . letterSpacing . unit === 'pixel' ) { return roundWithDecimals ( values . letterSpacing . value , 3 ) ; } if ( values . letterSpacing . unit === 'percent' ) { return roundWithDecimals ( values . fontSize . value * ( values . letterSpacing . value / 100 ) , 3 ) ; } return 0 ; } ; const widthToDimensionTransformer = ( { values } ) : StandardTokenDataInterface => ( { value : values . width . value , type : 'dimension' as StandardTokenTypes } ) ; const radiusValueTransformer = ( { values } ) : StandardTokenDataInterface => ( { type : 'custom-radius' as StandardTokenTypes , value : { smoothing : values . smoothing . value , topLeft : values . radii . topLeft . value , topRight : values . radii . topRight . value , bottomLeft : values . radii . bottomLeft . value , bottomRight : values . radii . bottomRight . value } } ) ; const gridValueTransformer = ( { values } ) : StandardTokenDataInterface | StandardTokenGroup => { const grids = values . map ( grid => ( { type : 'custom-grid' as StandardTokenTypes , value : { pattern : grid . pattern . value , ... ( grid . sectionSize ? { sectionSize : grid . sectionSize . value } : { } ) , ... ( grid . gutterSize ? { gutterSize : grid . gutterSize . value } : { } ) , ... ( grid . alignment ? { alignment : grid . alignment . value } : { } ) , ... ( grid . count ? { count : grid . count . value } : { } ) , ... ( grid . offset ? { offset : grid . offset . value } : { } ) } } ) ) ; if ( grids . length === 1 ) { return grids [ 0 ] ; } return { ... grids } ; } ; const spacingValueTransformer = ( { values } ) : StandardTokenDataInterface => ( { type : 'custom-spacing' as StandardTokenTypes , value : { top : values . top . value , bottom : values . bottom . value , left : values . left . value , right : values . right . value } } ) ; const fontStyleValueTransformer = ( { values } ) : StandardTokenDataInterface => ( { type : 'custom-fontStyle' as StandardTokenTypes , value : { fontSize : values . fontSize . value , textDecoration : values . textDecoration . value , fontFamily : values . fontFamily . value , fontWeight : values . fontWeight . value , fontStyle : values . fontStyle . value , fontStretch : values . fontStretch . value , letterSpacing : letterSpacingToDimensions ( values ) , lineHeight : lineHeightToDimension ( values ) , paragraphIndent : values . paragraphIndent . value , paragraphSpacing : values . paragraphSpacing . value , textCase : values . textCase . value } } ) ; const typographyValueTransformer = ( { name , values } ) => ( { fontSize : { type : 'dimension' as StandardTokenTypes , value : values . fontSize . value } , textDecoration : { type : 'string' as StandardTokenTypes , value : values . textDecoration . value } , fontFamily : { type : 'string' as StandardTokenTypes , value : values . fontFamily . value } , fontWeight : { type : 'number' as StandardTokenTypes , value : values . fontWeight . value } , fontStyle : { type : 'string' as StandardTokenTypes , value : values . fontStyle . value } , fontStretch : { type : 'string' as StandardTokenTypes , value : values . fontStretch . value } , letterSpacing : { type : 'dimension' as StandardTokenTypes , value : letterSpacingToDimensions ( values ) } , lineHeight : { type : 'dimension' as StandardTokenTypes , value : lineHeightToDimension ( values ) } , paragraphIndent : { type : 'dimension' as StandardTokenTypes , value : values . paragraphIndent . value } , paragraphSpacing : { type : 'dimension' as StandardTokenTypes , value : values . paragraphSpacing . value } , textCase : { type : 'string' as StandardTokenTypes , value : values . textCase . value } } ) ; const colorValueTransformer = ( { fill } ) : StandardTokenDataInterface => ( { type : 'color' as StandardTokenTypes , value : rgbaObjectToHex8 ( fill . value ) } ) ; const gradientValueTransformer = ( { gradientType , rotation , stops , opacity } ) : StandardTokenDataInterface => ( { type : 'custom-gradient' as StandardTokenTypes , value : { gradientType : gradientType . value , rotation : rotation . value , stops : stops . map ( stop => ( { position : stop . position . value , color : rgbaObjectToHex8 ( { ... stop . color . value , ... { a : stop . color . value . a * opacity . value } } ) } ) ) } } ) ; const fillValueTransformer = ( token ) : StandardTokenDataInterface | StandardTokenGroup => { if ( token . extensions && token . extensions [ config . key . extensionPluginData ] && token . extensions [ config . key . extensionPluginData ] . alias ) { return { type : Object . hasOwnProperty . call ( token . values [ 0 ] , 'fill' ) ? 'color' : 'custom-gradient' , value : `{${ token . extensions [ config . key . extensionPluginData ] . alias }}` } ; } const fills = token . values . map ( fill => { if ( Object . hasOwnProperty . call ( fill , 'fill' ) ) { return colorValueTransformer ( fill ) ; } return gradientValueTransformer ( fill ) ; } ) ; if ( fills . length === 1 ) { return fills [ 0 ] ; } return { ... fills } ; } ; const borderValueTransformer = ( { values } ) : StandardTokenDataInterface => ( { type : 'custom-stroke' as StandardTokenTypes , value : { align : values . strokeAlign . value , dashPattern : values . dashPattern . value , lineCap : values . strokeCap . value , lineJoin : values . strokeJoin . value , miterLimit : values . strokeMiterLimit . value , weight : values . strokeWeight . value , color : rgbaObjectToHex8 ( values . stroke . value ) } } ) ; const shadowValueTransformer = ( value ) : StandardTokenDataInterface => ( { type : 'custom-shadow' as StandardTokenTypes , value : { shadowType : value . effectType . value , radius : value . radius . value , color : rgbaObjectToHex8 ( value . color . value ) , offsetX : value . offset . x . value , offsetY : value . offset . y . value , spread : value . spread . value } } ) ; const effectValueTransformer = ( { values } ) : StandardTokenDataInterface | StandardTokenGroup => { const effects = values . map ( effect => { if ( [ 'dropShadow' , 'innerShadow' ] . includes ( effect . effectType . value ) ) { return shadowValueTransformer ( effect ) ; } return null ; } ) ; if ( effects . length === 1 ) { return effects [ 0 ] ; } return { ... effects } ; } ; const motionValueTransformer = ( { values } ) : StandardTokenDataInterface => ( { type : 'custom-transition' as StandardTokenTypes , value : { transitionType : values . transitionType . value , duration : values . duration . value , ... ( values . direction ? { direction : values . direction . value } : { } ) , easingFunction : { x1 : values . easingFunction . x1 . value , x2 : values . easingFunction . x2 . value , y1 : values . easingFunction . y1 . value , y2 : values . easingFunction . y2 . value } } } ) ; const valueTransformer = { size : widthToDimensionTransformer , color : fillValueTransformer , gradient : fillValueTransformer , font : fontStyleValueTransformer , effect : effectValueTransformer , grid : gridValueTransformer , border : borderValueTransformer , breakpoint : widthToDimensionTransformer , radius : radiusValueTransformer , spacing : spacingValueTransformer , motion : motionValueTransformer } ; const transformTokens = ( token ) : StandardTokenDataInterface | StandardTokenGroup => valueTransformer [ token . category ] ( token ) ; const transformer = ( token ) : StandardTokenInterface | StandardTokenGroup => { if ( token . category === 'typography' ) { return { name : token . name , description : token . description , ... typographyValueTransformer ( token ) } ; } return { name : token . name , description : token . description , ... transformTokens ( token ) , ... tokenExtensions ( token ) } ; } ; export { transformer } ;