How to do Variant ?

[maxired]

Is your feature request related to a problem? Please describe.
Hi @chrisdwheatley

I discovered that library recently thanks to @temsa and would like to know more about the future of it.
It seems a great start to implement a basic design system, but I feel it's still really early.
What I like the best is that you have a single file which contains the whole theme. And the fact that it's standardised make it possible to think of it as a file used in different tools.

Still, it remains several question.
One of them would be : how can I document that a color should only be used as text color on a h1 element but not in standard text ?

when playing with this library, as a developper my primary goal is to develop Components.
A component, based on props will change many styling attributes, not just one.

Styled theming and other libraries such as styledcomponent-variant introduced the notion of variant when developing your component. Styles theming as a good expanation of why you need that https://jamie.build/styled-theming.html

So my question is what the best way in you opinion to have variant using saluki ?

Describe the solution you'd like
I am not entirely sure about what i'd like, not sur about your vision of the future of that library.

I know we can already do some kind of variant using props, but I am not 100% sure you would recommand do it that way.

import React from 'react';
import styled from 'styled-components/macro'
import { color, backgroundColor, fontSize, borderWidth, borderStyle, borderColor } from 'saluki'

const variant = (name, params) => {
  return (props) => {
    if(props[name] && params[props[name]]){
        return params[props[name]]
    }
  }
}

const StyledHeader = styled.h1`
  ${fontSize('large')}

  ${variant('variant', {
    primary : [
      color('red'),
      backgroundColor('white')
    ],
    secondary: [
      color('white'),
      backgroundColor('red')
    ] })
  }
  ${props => props.border && [
    borderStyle('solid'),
    borderWidth('thick'),
    borderColor('blue'),
  ]}
}`


export default () => (<StyledHeader border variant='secondary'>Hello</StyledHeader>)

Describe alternatives you've considered

Instead of using the demonstrated approach, I think I would like to be able to describe those props combinaison directly in the theming file.
From what I understand that would require some changes in the library, but implementing variants seem to me pretty similar to what we have for breakpoints.