Design md#332
Conversation
| if (key in target && typeof target[key] === 'object' && !Array.isArray(target[key])) { | ||
| deepMerge(target[key], source[key]) | ||
| } else { | ||
| target[key] = source[key] |
|
|
||
| ## Format and tone | ||
|
|
||
| - Write for a developer who knows CSS but is new to Optics |
There was a problem hiding this comment.
This is probably the wrong format and tone. Would need to tune for the desired DESIGN.md format
| @@ -0,0 +1,42 @@ | |||
| --- | |||
| name: wrap-up | |||
There was a problem hiding this comment.
This is very generic right now and should be tuned for Optics specifically. I've been doing some experiments on other projects for better AGENTS structure that could eventually be incorporated here.
|
|
||
| ## Notes | ||
|
|
||
| * Colors are limited to Hex in srgb. This means that hsl is not supported and colors have to be converted when generating a DESIGN.md document. |
There was a problem hiding this comment.
This was initial notes that probably can go away
|
|
||
| ## Goal | ||
|
|
||
| Generate a `dist/design-tokens.json` file from the Optics CSS token source files that conforms to the [Design Tokens Community Group (DTCG) spec](https://tr.designtokens.org/format/). |
There was a problem hiding this comment.
This script is still in progress. Not sure it is capturing all the necessary variables. I think it is missing component specific stuff at the moment
There was a problem hiding this comment.
This plan can go away once this script is finished
|
|
||
| ## Key constraints | ||
|
|
||
| - No JavaScript in components. Interactivity is handled by consumers. |
There was a problem hiding this comment.
Or natively supported HTML + CSS interaction
| return sg ? `{op-color.${sg}.${after.slice(sg.length + 1)}}` : `{op-color.${after}}` | ||
| } | ||
|
|
||
| function parseColors() { |
Task
Rough work. Mostly sketching out the possibilities.