import { typeColors } from '@workday/canvas-colors-web' ; import { CanvasFontFamilies , fontFamilies } from './fontFamilies' ; import { CanvasFontSizes , fontSizes } from './fontSizes' ; import { CanvasFontWeights , fontWeights } from './fontWeights' ; example export const levels = { title : { large : { fontFamily : fontFamilies . default , /** 56px converted to base-16 rem (3.5rem)*/ fontSize : fontSizes [ 56 ] , /** 64px converted to base-16 rem (4rem) */ lineHeight : '4rem' , fontWeight : fontWeights . bold , color : typeColors . heading , } , medium : { fontFamily : fontFamilies . default , /** 48px converted to base-16 rem (3rem)*/ fontSize : fontSizes [ 48 ] , /** 56px converted to base-16 rem (3.5rem) */ lineHeight : '3.5rem' , fontWeight : fontWeights . bold , color : typeColors . heading , } , small : { fontFamily : fontFamilies . default , /** 40px converted to base-16 rem (2.5rem)*/ fontSize : fontSizes [ 40 ] , /** 48px converted to base-16 rem (3rem) */ lineHeight : '3rem' , fontWeight : fontWeights . bold , color : typeColors . heading , } , } , heading : { large : { fontFamily : fontFamilies . default , /** 32px converted to base-16 rem (2rem)*/ fontSize : fontSizes [ 32 ] , /** 40px converted to base-16 rem (2.5rem) */ lineHeight : '2.5rem' , fontWeight : fontWeights . bold , color : typeColors . heading , } , medium : { fontFamily : fontFamilies . default , /** 28px converted to base-16 rem (1.75rem)*/ fontSize : fontSizes [ 28 ] , /** 36px converted to base-16 rem (2.25rem) */ lineHeight : '2.25rem' , fontWeight : fontWeights . bold , color : typeColors . heading , } , small : { fontFamily : fontFamilies . default , /** 24px converted to base-16 rem (1.5rem)*/ fontSize : fontSizes [ 24 ] , /** 32px converted to base-16 rem (2rem) */ lineHeight : '2rem' , fontWeight : fontWeights . bold , color : typeColors . heading , } , } , body : { large : { fontFamily : fontFamilies . default , /** 20px converted to base-16 rem (1.25rem)*/ fontSize : fontSizes [ 20 ] , /** 28px converted to base-16 rem (1.75rem) */ lineHeight : '1.75rem' , fontWeight : fontWeights . regular , color : typeColors . body , } , medium : { fontFamily : fontFamilies . default , /** 18px converted to base-16 rem (1.125rem)*/ fontSize : fontSizes [ 18 ] , /** 28px converted to base-16 rem (1.75rem) */ lineHeight : '1.75rem' , fontWeight : fontWeights . regular , color : typeColors . body , } , small : { fontFamily : fontFamilies . default , /** 16px converted to base-16 rem (1rem)*/ fontSize : fontSizes [ 16 ] , /** 24px converted to base-16 rem (1.5rem) */ lineHeight : '1.5rem' , /** 0.16px converted to base-16 rem (0.01rem) */ letterSpacing : '0.01rem' , fontWeight : fontWeights . regular , color : typeColors . body , } , } , subtext : { large : { fontFamily : fontFamilies . default , /** 14px converted to base-16 rem (0.875rem)*/ fontSize : fontSizes [ 14 ] , /** 20px converted to base-16 rem (1.25rem) */ lineHeight : '1.25rem' , /** 0.24px converted to base-16 rem (0.015rem) */ letterSpacing : '0.015rem' , fontWeight : fontWeights . regular , color : typeColors . body , } , medium : { fontFamily : fontFamilies . default , /** 12px converted to base-16 rem (0.75rem)*/ fontSize : fontSizes [ 12 ] , /** 16px converted to base-16 rem (1rem) */ lineHeight : '1rem' , /** 0.32px converted to base-16 rem (0.02rem) */ letterSpacing : '0.02rem' , fontWeight : fontWeights . regular , color : typeColors . body , } , small : { fontFamily : fontFamilies . default , /** 10px converted to base-16 rem (0.625rem)*/ fontSize : fontSizes [ 10 ] , /** 16px converted to base-16 rem (1rem) */ lineHeight : '1rem' , /** 0.4px converted to base-16 rem (0.025rem) */ letterSpacing : '0.025rem' , fontWeight : fontWeights . regular , color : typeColors . body , } , } , } ; export type CanvasTypeHierarchy = { example title : CanvasTypeTitleLevel ; example heading : CanvasTypeHeadingLevel ; example body : CanvasTypeBodyLevel ; example subtext : CanvasTypeSubtextLevel ; } ; type CanvasTypeTitleLevel = { large : { fontFamily : CanvasFontFamilies [ 'default' ] ; /** 56px converted to base-16 rem (3.5rem)*/ fontSize : CanvasFontSizes [ 56 ] ; /** 64px converted to base-16 rem (4rem) */ lineHeight : '4rem' ; fontWeight : CanvasFontWeights [ 'bold' ] ; color : typeof typeColors . heading ; } ; medium : { fontFamily : CanvasFontFamilies [ 'default' ] ; /** 48px converted to base-16 rem (3rem)*/ fontSize : CanvasFontSizes [ 48 ] ; /** 56px converted to base-16 rem (3.5rem) */ lineHeight : '3.5rem' ; fontWeight : CanvasFontWeights [ 'bold' ] ; color : typeof typeColors . heading ; } ; small : { fontFamily : CanvasFontFamilies [ 'default' ] ; /** 40px converted to base-16 rem (2.5rem)*/ fontSize : CanvasFontSizes [ 40 ] ; /** 48px converted to base-16 rem (3rem) */ lineHeight : '3rem' ; fontWeight : CanvasFontWeights [ 'bold' ] ; color : typeof typeColors . heading ; } ; } ; type CanvasTypeHeadingLevel = { large : { fontFamily : CanvasFontFamilies [ 'default' ] ; /** 32px converted to base-16 rem (2rem)*/ fontSize : CanvasFontSizes [ 32 ] ; /** 40px converted to base-16 rem (2.5rem) */ lineHeight : '2.5rem' ; fontWeight : CanvasFontWeights [ 'bold' ] ; color : typeof typeColors . heading ; } ; medium : { fontFamily : CanvasFontFamilies [ 'default' ] ; /** 28px converted to base-16 rem (1.75rem)*/ fontSize : CanvasFontSizes [ 28 ] ; /** 36px converted to base-16 rem (2.25rem) */ lineHeight : '2.25rem' ; fontWeight : CanvasFontWeights [ 'bold' ] ; color : typeof typeColors . heading ; } ; small : { fontFamily : CanvasFontFamilies [ 'default' ] ; /** 24px converted to base-16 rem (1.5rem)*/ fontSize : CanvasFontSizes [ 24 ] ; /** 32px converted to base-16 rem (2rem) */ lineHeight : '2rem' ; fontWeight : CanvasFontWeights [ 'bold' ] ; color : typeof typeColors . heading ; } ; } ; type CanvasTypeBodyLevel = { large : { fontFamily : CanvasFontFamilies [ 'default' ] ; /** 20px converted to base-16 rem (1.25rem)*/ fontSize : CanvasFontSizes [ 20 ] ; /** 28px converted to base-16 rem (1.75rem) */ lineHeight : '1.75rem' ; fontWeight : CanvasFontWeights [ 'regular' ] ; color : typeof typeColors . body ; } ; medium : { fontFamily : CanvasFontFamilies [ 'default' ] ; /** 18px converted to base-16 rem (1.125rem)*/ fontSize : CanvasFontSizes [ 18 ] ; /** 28px converted to base-16 rem (1.75rem) */ lineHeight : '1.75rem' ; fontWeight : CanvasFontWeights [ 'regular' ] ; color : typeof typeColors . body ; } ; small : { fontFamily : CanvasFontFamilies [ 'default' ] ; /** 16px converted to base-16 rem (1rem)*/ fontSize : CanvasFontSizes [ 16 ] ; /** 24px converted to base-16 rem (1.5rem) */ lineHeight : '1.5rem' ; /** 0.16px converted to base-16 rem (0.01rem) */ letterSpacing : '0.01rem' ; fontWeight : CanvasFontWeights [ 'regular' ] ; color : typeof typeColors . body ; } ; } ; type CanvasTypeSubtextLevel = { large : { fontFamily : CanvasFontFamilies [ 'default' ] ; /** 14px converted to base-16 rem (0.875rem)*/ fontSize : CanvasFontSizes [ 14 ] ; /** 20px converted to base-16 rem (1.25rem) */ lineHeight : '1.25rem' ; /** 0.24px converted to base-16 rem (0.015rem) */ letterSpacing : '0.015rem' ; fontWeight : CanvasFontWeights [ 'regular' ] ; color : typeof typeColors . body ; } ; medium : { fontFamily : CanvasFontFamilies [ 'default' ] ; /** 12px converted to base-16 rem (0.75rem)*/ fontSize : CanvasFontSizes [ 12 ] ; /** 16px converted to base-16 rem (1rem) */ lineHeight : '1rem' ; /** 0.32px converted to base-16 rem (0.02rem) */ letterSpacing : '0.02rem' ; fontWeight : CanvasFontWeights [ 'regular' ] ; color : typeof typeColors . body ; } ; small : { fontFamily : CanvasFontFamilies [ 'default' ] ; /** 10px converted to base-16 rem (0.625rem)*/ fontSize : CanvasFontSizes [ 10 ] ; /** 16px converted to base-16 rem (1rem) */ lineHeight : '1rem' ; /** 0.4px converted to base-16 rem (0.025rem) */ letterSpacing : '0.025rem' ; fontWeight : CanvasFontWeights [ 'regular' ] ; color : typeof typeColors . body ; } ; } ;