CyCraft / planetar

A Vue framework for creating a design system styleguide with interactive component explorer 🪐

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SASS color file parser (4h)

mesqueeb opened this issue · comments

based on a list of colors, generate the colors page.

Define how to write the sass file for colors and make sure the following things are included & extractable in a json

  • name
    (automatically show the .c-, .bg- classes)
    (automatically show the $c- variable name)
  • value
  • description
  • subcolorOf
    (this makes sure the color is shown as a subcolor of another color, grouped together)
  • examplesSchema
    (this is an array with the EasyForms schema to show some examples on the right)
    (can be inline or can be a path pointing towards a json or js file that should export the schema array as default export)

Ways of tackling this:

example file

/**
 * There is no pure black in this interface, instead there is the awesomeness that is Blue-Zodiac.
 * Use blue-zodiac instead of black, and use it’s opacity variants for text and icon colors.
 */
$c-blue-zodiac: #0E2348
$c-primary: rgba($c-blue-zodiac, 0.96)
$c-secondary: rgba($c-blue-zodiac, 0.72)
$c-hint: rgba($c-blue-zodiac, 0.56)
$c-disabled: rgba($c-blue-zodiac, 0.28)