Coordinate Sketch Plugin output with Design Kit

This issue is for coordinating what exactly will be delivered in the Sketch Plugin and how it will be used by the Design Kit. In particular, we’ll want to cover:

• IDL Colors
  • What should the naming conventions be for the shared styles?
• Theme tokens
  • What should the naming convention be for the shared styles?
• Type tokens
  • What should the naming convention be for the shared styles?
• Icons
  • What hierarchy do we want for icons?

Some of the initial explorations are doing the following:

• IDL Colors: color / color swatch / color grade, e.g. color / blue / 50
• Theme tokens: Theme / token, e.g. White 10 theme / interaction-01
• Type tokens:
  • Currently just the token name, optional divider for expressive versus productive
  • body-long-02
  • productive / heading-01
• Icons: category / icon name / size, e.g. action / add / 16

[joshblack]

Quick status update:

• Re-ordering of colors
• Tried to reset border style on new rectangles (was specific to sketch instances)
• Updated theme token names to include tokens

Going to defer on transparent as this has no representation in code 👍

[laurenmrice]

Colors For color symbol structure: currently IDL has it as: color / color name / color grade Ex: color / red / red-10

• There is a repetition of the color name with a dash between the grade. Was wondering if you are cool with sticking to this same structure.

---

Icons For icon symbol structure: currently IDL has it as: icon / category / subcategory / name / size Ex: icon / file / download / 32

• Download the current IDL kit to see how they are nesting icon symbols any further than subcategories.

• Icons are required to be categorized first by category, and second by subcategory. Then third, the structure may differ depending on how many variants there are per subcategory. I know that recently Olivia has been trying to unnest icons more in the library based on user feedback. For example: checkmark has a filled and unfilled variant but these will remain on the same level in the subcategory instead of having filled nested inside of the unfilled bucket.

---

Themes

IDL currently doesn’t have a themes page. If themes page includes only color tokens, we can structure this page similarly to what exists in the carbon elements themes (which looks similar to whats in the 4 kits and on the website)

We can structure the symbols like this: theme / token type / token name White theme / core color tokens / interactive-01 and theme / token type / token name White theme / interaction color tokens / focus

• We can categorize the type of token by core colors vs. interaction colors to make the tokens easier to find by function. This is how we present it on the website and in the kit. Let me know your thoughts on this.

• Was also thinking about structuring by token as a second level, and token type as the third level. Ex: White theme / token / core colors / interactive-01 but that may be too nested…

---

Type From looking at the Elements type style package, we could try starting with splitting the structure into productive and expressive.

type/type usage/type style name Ex: type / productive / caption-01