🧐[问题]: text styles, layer styles and document colors

[jlarmstrongiv]

🧐 问题描述

How can I create text styles, layer styles, and document colors?

For symbols, how can I create a symbol, and then use an instance of the symbol when importing my existing html?

💻 示例代码

I was digging around in the source code and found related code:

• https://github.com/ant-design/html2sketch/blob/master/src/parser/colorAsset.ts#L16
  • not exported in https://github.com/ant-design/html2sketch/blob/master/src/parser/index.ts
• https://github.com/ant-design/html2sketch/blob/master/src/parser/sharedTextStyle.ts

🚑 其他信息

In html-sketchapp, the docs show:

• https://github.com/html-sketchapp/html-sketchapp/wiki/Usage-Examples#create-sketch-text-styles-layer-styles-and-document-colors

In html-sketchapp-cli, the docs show:

• data-sketch-* https://github.com/seek-oss/html-sketchapp-cli#html-sketchapp-cli

If it has not been implemented yet, I think the custom data attributes from html-sketchapp-cli are a nice solution:

<div data-sketch-symbol="Button/Primary">...</div>
<div data-sketch-text="Heading">...</div>
<div data-sketch-color="#212121">...</div>
<div data-sketch-symbol="Icon/Reply">...</div>
<div data-sketch-symbol="Icon/Retweet">...</div>
<div data-sketch-symbol="Icon/Like">...</div>

<div data-sketch-symbol="IconRow">
  <div data-sketch-symbol-instance="Icon/Reply">...</div>
  <div data-sketch-symbol-instance="Icon/Retweet">...</div>
  <div data-sketch-symbol-instance="Icon/Like">...</div>
</div>

[arvinxx]

Actually we don't implement shared styles yet. We should discuss it how to implement

[jlarmstrongiv]

@arvinxx

That makes sense—I noticed the nodeToSymbol method, but didn’t find anything on the styles or colors.

I personally like being able to infer everything from the markup—the data-sketch-* is just one way to do that. My use case is generating a sketch library from an html page—importing symbols, text-styles, layer-styles, and color swatches all in one go.

The https://github.com/html-sketchapp/html-sketchapp package came very close to doing that with https://github.com/brainly/html-sketchapp-style-guide, but it required sketch to be installed. I see they did fix the custom ids issue html-sketchapp/html-sketchapp#151, but there haven’t been any releases in years.