sample

gistfile1.txt

type StyleProperty = {
        [key: string]: string 
} & { 
    style:   
    | FlattenInterpolation<ThemedCssFunction<DefaultTheme>>   
    | FlattenInterpolation<ThemeProps<DefaultTheme>> 
}

const sizes: StyleProperty[] = [
    { 
        name: 'XSmall', 
        style: css`
            height: 32px;
            font-size: 14px;
            padding: 0 16px;
        ` 
    }, 
    { 
        name: 'Small', 
        style: css`
            height: 40px;
            font-size: 16px;
            padding: 0 16px;
        `
    }
]

const variants: StyleProperty[] = [
    { 
        name: 'LightGrey', 
        style: css`
            color: ${getPaletteColor('shades', 600)};
            background: ${getPaletteColor('shades', 200)};
            box-shadow: 0 1px 0 0 ${getPaletteColor('shades', 300)};
            &:hover,&:focus {
                background: ${getPaletteColor('shades', 300)};
                box-shadow: 0 1px 0 0 ${getPaletteColor('shades', 400)};
            }
            &:active {
                background: ${getPaletteColor('shades', 400)};
                color: ${getPaletteColor('shades', 0)};
                transition: background 0s ease;
            }
        ` 
    }, 
    { 
        name: 'DarkGrey', 
        style: css`
            color: ${getPaletteColor('shades', 0)};
            background: ${getPaletteColor('shades', 600)};
            box-shadow: 0 1px 0 0 ${getPaletteColor('shades', 700)};
            &:hover,&:focus {
                background: ${getPaletteColor('shades', 700)};
                box-shadow: 0 1px 0 0 ${getPaletteColor('shades', 900)};
            }
            &:active {
                background: ${getPaletteColor('shades', 900)};
                transition: background 0s ease;
            }
        ` 
    }
]

const VARIANT = variants.reduce(
    (names: StyleProperty, variant: StyleProperty) => {
        names[variant.name] = variant.namereturn names
    }, {})