// eslint-disable-next-line import/no-extraneous-dependencies
import { parse } from 'css-variables-parser'

import Palette from '../../storybookUtils/Palette'

// eslint-disable-next-line import/no-webpack-loader-syntax
import colorsRaw from '!!raw-loader!./colors.css'

const colors = parse(colorsRaw, {})

export default {
  title: 'CSS variables',
}

export const colorPalette = () => ({
  components: {
    Palette,
  },
  data() {
    return {
      colors,
    }
  },
  template: `
    <Palette :colors="colors" />
  `,
})
