gulp-theo icon indicating copy to clipboard operation
gulp-theo copied to clipboard

Theo doesn't parse hex values for color

Open MindSculpt opened this issue 7 years ago • 3 comments

Unless I'm missing something, if I have the following in my aliases.yml:

---
aliases:
  # colors
  dark-blue: #003e52
  orange: #c18510

The output doesn't read hex values and I get:

$dark-blue: rgb(0, 0, 0);
$orange rgb(0, 0, 0);

...for all colors.

I'm also noticing the ability to just pass through token values that don't necessarily map to one of your existing formats. Might be worth allowing a general type/category for this.

MindSculpt avatar Dec 11 '17 18:12 MindSculpt

Nevermind—the hex issue was totally my fault. This works fine. I'd still love your thoughts on being able to add other design tokens that might not fit into the categories you provide (even though they are thorough).

MindSculpt avatar Dec 11 '17 19:12 MindSculpt

@MindSculpt could you please tell me how you solved the issue? I'm trying to figure this out.

julzmon avatar Jul 09 '18 16:07 julzmon

@julzmon I wound up adding colors to my _aliases.yml file like this:

aliases:
  #colors
  white: '#fff'
  black: '#000'

Then I created a _color.yml file where I have the following:

imports:
 - _aliases.yml

props: 
  white: "{!white}"
    type: color
    category: text-color
    comment: ""

  black: "{!black}"
    type: color
    category: text-color
    comment: ""

Then obviously import _color.yml into your main app.yml file. This seems to get around not having categories that map since I'm just using this to generate the tokens, not the styles doc.

MindSculpt avatar Jul 21 '18 00:07 MindSculpt