CSS Styling

$bg-primary: black;
$fg-primary: white;
$accent: cyan;
$border-color: dark-gray;

Panel {
    background: $bg-primary;
    color: $fg-primary;
    border-color: $border-color;
}

Panel:focus {
    border-color: $accent;
}

Panel {
    border-type: rounded;
}

Text {
    color: white;
}

.primary {
    color: cyan;
    text-style: bold;
}

.danger {
    color: red;
}

#sidebar {
    width: 30;
    background: dark-gray;
}

#main-content {
    padding: 1;
}

Panel:focus {
    border-color: cyan;
    border-type: double;
}

Button:hover {
    text-style: bold;
}

ListElement-item:selected {
    background: blue;
}

ListElement-item:nth-child(even) {
    background: #1a1a1a;
}

Panel.primary#main {
    border-color: cyan;
}

/* Text element WITH class "muted" (compound - no space) */
Text.muted {
    color: gray;
}

/* Element with class "muted" INSIDE a Text element (descendant - with space) */
Text .muted {
    color: gray;
}

/* Text element INSIDE an element with class "muted" */
.muted Text {
    color: gray;
}

/* Any Button inside a Panel */
Panel Button {
    color: white;
}

/* Direct child only */
Panel > Button {
    text-style: bold;
}

/* Apply same styles to multiple selectors */
.error, .warning, .danger {
    text-style: bold;
}

Panel.primary, Panel.secondary {
    border-type: rounded;
}

/* Match elements with a specific attribute value */
Panel[title="Settings"] {
    border-color: cyan;
}

/* Match elements that have an attribute (any value) */
Panel[title] {
    border-type: double;
}

/* Starts with */
Panel[title^="Test"] {
    border-color: yellow;
}

/* Ends with */
Panel[title$="Output"] {
    border-color: green;
}

/* Contains */
Panel[title*="Tree"] {
    border-color: magenta;
}

/* Attribute selector with class */
Panel.sidebar[title="Navigation"] {
    border-color: cyan;
    border-type: double;
}

/* Attribute selector with pseudo-class */
TextInputElement[placeholder]:focus {
    border-color: yellow;
}

/* Nested elements inside a panel with specific title */
Panel[title="Settings"] TextInputElement {
    border-type: rounded;
}

/* Direct child with attribute */
Panel[title="Form"] > TextInputElement[placeholder="Enter name..."] {
    border-color: green;
}

/* Multiple attribute selectors */
TextInputElement[title="Username"][placeholder] {
    color: cyan;
}

/* Selector list with attribute selectors */
Panel[title="Input"], Panel[title="Output"], Panel[title="Logs"] {
    border-color: blue;
}

/* Style child elements based on parent's attribute */
Panel[title^="Test"] GaugeElement {
    color: yellow;
}

/* Combine with ID selector */
#main-panel[title="Dashboard"] {
    border-type: double;
    border-color: cyan;
}

Panel {
    border-type: rounded;
    border-color: gray;

    &:focus {
        border-color: cyan;
        border-type: double;
    }

    &.primary {
        border-color: blue;
    }
}

.error {
    color: red !important;
}

// Simple non-inheritable property
PropertyDefinition<Color> GAUGE_COLOR =
    PropertyDefinition.of("gauge-color", ColorConverter.INSTANCE);

// Inheritable property with default value
PropertyDefinition<Color> COLOR =
    PropertyDefinition.builder("color", ColorConverter.INSTANCE)
        .inheritable()
        .build();

// Register a single property
PropertyRegistry.register(MY_PROPERTY);

// Register multiple properties at once
PropertyRegistry.registerAll(PROPERTY_A, PROPERTY_B, PROPERTY_C);

public static class MyWidget {
    public static final PropertyDefinition<Color> BAR_COLOR =
        PropertyDefinition.of("bar-color", ColorConverter.INSTANCE);
    public static final PropertyDefinition<Integer> BAR_WIDTH =
        PropertyDefinition.of("bar-width", intConverter());

    static {
        PropertyRegistry.registerAll(BAR_COLOR, BAR_WIDTH);
    }

    private static PropertyConverter<Integer> intConverter() {
        return value -> Optional.of(Integer.parseInt(value));
    }
}

public static final PropertyDefinition<Color> GAUGE_COLOR =
    PropertyDefinition.of("gauge-color", ColorConverter.INSTANCE);

GaugeElement {
    gauge-color: green;
}

Element settingsPanel = panel("Settings",
    () -> column(
        text("Username").addClass("label"),
        textInput(usernameState).id("username-input"),
        text("Password").addClass("label"),
        textInput(passwordState).id("password-input").addClass("secret")
    )
)
.id("settings-panel")
.addClass("primary");

StyleEngine engine = StyleEngine.create();
engine.loadStylesheet("dark", "/themes/dark.tcss");
engine.setActiveStylesheet("dark");

try (var runner = ToolkitRunner.builder()
        .styleEngine(engine)
        .build()) {
    runner.run(() -> myApp());
}

public static class MyStylableWidget implements Styleable {
    private String id;
    private Set<String> classes = new HashSet<>();

    @Override
    public String styleType() {
        return "MyWidget";  // Used for type selectors
    }

    @Override
    public Optional<String> cssId() {
        return Optional.ofNullable(id);
    }

    @Override
    public Set<String> cssClasses() {
        return classes;
    }

    @Override
    public Optional<Styleable> cssParent() {
        return Optional.empty();  // Or return parent for descendant selectors
    }
}

CssStyleResolver resolved = engine.resolve(widget);

Style style = Style.EMPTY;
if (resolved.foreground().isPresent()) {
    style = style.fg(resolved.foreground().get());
}
if (resolved.background().isPresent()) {
    style = style.bg(resolved.background().get());
}
for (var modifier : resolved.modifiers()) {
    style = style.addModifier(modifier);
}