import m from 'mithril' ; import tinycolor from 'tinycolor2' ; import { Colors , Grid , Col } from '@/' ; const colors = Object . keys ( Colors ) ; const colorGroups = colors . filter ( color => ! color . includes ( 'WHITE' ) ) . reduce ( ( colorGroup , color , index ) => { const groupIndex = Math . floor ( index / 10 ) ; if ( ! colorGroup [ groupIndex ] ) { colorGroup [ groupIndex ] = [ ] ; } colorGroup [ groupIndex ] . push ( color ) ; return colorGroup ; } , [ ] as any ) ; const greyScaleColors = colorGroups . slice ( 0 , 2 ) ; const coreColors = colorGroups . slice ( 2 , colorGroups . length ) ; export class ColorsExample { public view ( ) { return m ( '.cui-example-colors' , [ m ( 'h2' , 'Greyscale Colors' ) , this . renderColorGrid ( greyScaleColors ) , m ( 'h2' , 'Core colors' ) , this . renderColorGrid ( coreColors ) ] ) ; } private renderColorGrid ( groups ) { const colSpan = { xs : 12 , md : 6 , sm : 6 , lg : 4 } ; return m ( Grid , { gutter : 20 } , groups . map ( colorGroup => [ m ( Col , { span : colSpan } , [ m ( '.cui-example-colors-group' , colorGroup . map ( color => this . renderColorbar ( color ) ) ) ] ) ] ) ) ; } private renderColorbar ( color ) { const style = { background : Colors [ color ] , color : tinycolor ( Colors [ color ] ) . isLight ( ) ? 'black' : 'white' } ; return m ( '.cui-example-colors-bar' , { style } , [ m ( '' , color ) , m ( '' , Colors [ color ] ) ] ) ; } }