Enumeration ColorRole

Example

export class ColorRoleExamplePanel extends PanelPlugin {
  connections: any[];
  static descriptor() {
    const d = new Descriptor();
    d.id = 'com.docs.ColorRoleExample';
    d.name = 'ColorRole Example';
    d.defaultDockState = DockState.Detached;
    d.defaultSize = new Size(350, 300);
    return d;
  }
  constructor(pluginSystem: Editor.PluginSystem, descriptor?: Descriptor) {
    super(pluginSystem, descriptor);
    this.connections = [];
  }
  createWidget(parent: Widget): Widget {
    const root = new Widget(parent);
    const layout = new BoxLayout();
    layout.setDirection(Direction.TopToBottom);
    layout.spacing = 6;
    root.layout = layout;

    const title = new Label(root);
    title.text = 'ColorRole Demo';
    layout.addWidget(title);

    // ColorRole controls the semantic foreground color of a widget.
    // Set foregroundRole to style labels with theme-aware colors.
    const linkLabel = new Label(root);
    linkLabel.text = 'This label uses ColorRole.Link';
    linkLabel.foregroundRole = ColorRole.Link;
    layout.addWidget(linkLabel);

    const highlightLabel = new Label(root);
    highlightLabel.text = 'This label uses ColorRole.Highlight';
    highlightLabel.foregroundRole = ColorRole.Highlight;
    layout.addWidget(highlightLabel);

    const textLabel = new Label(root);
    textLabel.text = 'This label uses ColorRole.Text (default)';
    textLabel.foregroundRole = ColorRole.Text;
    layout.addWidget(textLabel);

    const brightLabel = new Label(root);
    brightLabel.text = 'This label uses ColorRole.BrightText';
    brightLabel.foregroundRole = ColorRole.BrightText;
    layout.addWidget(brightLabel);

    const btnTextLabel = new Label(root);
    btnTextLabel.text = 'This label uses ColorRole.ButtonText';
    btnTextLabel.foregroundRole = ColorRole.ButtonText;
    layout.addWidget(btnTextLabel);

    return root;
  }
  deinit(): void {
    this.connections.forEach((c: any) => c?.disconnect());
    this.connections = [];
  }
}
Copy