Creating Palette API as a Design System Manager

Still in the thinking stage 🧠

import { style, mergeStyle } from '@kaze-style/core';

import React from 'react';

// from https://cva.style/
// from https://vanilla-extract.style/documentation/api/style-variants/
// from https://stitches.dev/docs/variants

const palette = (..._) => (...__) => _[0];

const classes = style({
  $base: {
    display: 'flex',
  },
})

const className = palette({
  base: {
    display: 'flex',
  },
  color: {
    default: {
      color: 'black'
    },
    red: {
      color: 'red',
    },
    blue: {
      color: 'blue',
    },
  },
  space: {
    2: {
      margin: '10px',
      padding: '10px',
    },
    4: {
      margin: '10px',
      padding: '10px',
    },
  },
});

<div className={mergeStyle(classes.$base, className({ color: 'red', spase: 2 }))}></div>

taishinaritomi / kaze-style

Creating Palette API as a Design System Manager #138