Getting style tokens from themes

v6
1

I am making a component out of CM 6 and I’d like to style some parts of it from the selected theme. This looks mostly not really possible, since themes types selectors, and unless there’s a class I could use that I’m sure I’m will to take all properties that the theme styles, it seems like I shouldn’t just add an existing class.

Has there been any consideration of making a token system so that I could make my own class/selector and just apply my desired colors, sizes, etc?

This might look something like:

  "&light .cm-panels": {
    backgroundColor: "var(--cm-panel-background-color)",
    color: "black"
  },
  "&light .cm-panels-top": {
    borderBottom: "1px solid var(--cm-panel-border-color)"
  },
  "&light .cm-panels-bottom": {
    borderTop: "1px solid var(--cm-panel-border-color)"
  },

A nice property of this is that you could customize tokens all editors across shadow root boundaries in a sub tree by defining the CSS variables.

2

Your example code doesn’t seem to concern tokens at all, so I’m not really sure what the question is. A theme like what you are showing should just work, no?

3

The variables like --cm-panel-background-color would represent the style tokens, so they could be reused throughout a theme rather than copying hard coded values around.

If themes were defined this way, other UI elements could use those same tokens/variables in their styles to adapt to the current theme.

4

The core library doesn’t rely on CSS variable support. But feel free to define your theme this way.