@effindomv2/fui-as 0.1.25 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effindomv2/fui-as",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "private": false,
   "license": "AGPL-3.0-only OR LicenseRef-EffinDom-Commercial",
   "description": "EffinDom v2 AssemblyScript frontend framework SDK and browser harness",
@@ -86,7 +86,7 @@
   },
   "dependencies": {
     "@assemblyscript/loader": "^0.28.17",
-    "@effindomv2/runtime": "0.1.9"
+    "@effindomv2/runtime": "0.1.10"
   },
   "devDependencies": {
     "@as-pect/assembly": "8.1.0",

package/src/Fui.ts

@@ -159,6 +159,7 @@ export {
   DropdownFieldTemplate,
   DropdownFieldVisualState,
   DropdownItem,
+  DropdownColors,
   DropdownOptionRowMetrics,
   DropdownOptionRowPresenter,
   DropdownOptionRowTemplate,
@@ -168,6 +169,7 @@ export {
   MenuItem,
   NavLink,
   LabeledControlSizing,
+  LabeledControlColors,
   PressableIndicatorMetrics,
   ProgressBar,
   RadioIndicatorPresenter,
@@ -178,6 +180,7 @@ export {
   SelectionArea,
   Slider,
   SliderSizing,
+  SliderColors,
   SliderPresenter,
   SliderPresenterMetrics,
   SliderTemplate,
@@ -190,6 +193,7 @@ export {
   TextInputPresenter,
   TextInput,
   TextInputTemplate,
+  TextInputColors,
   TextInputVisualState,
   useControlTemplates,
 } from "./controls";

package/src/controls/Dropdown.ts

@@ -23,6 +23,7 @@ import { registerScrollHook } from "../core/ScrollHooks";
 import { FlexBox, Portal, ScrollBarVisibility, ScrollBox, ScrollView } from "../nodes";
 import { bind2 } from "../core/bind";
 import { DropdownSizing } from "./ControlSizing";
+import { DropdownColors } from "./DropdownColors";
 import { getControlTemplates } from "./ControlTemplateSet";
 import {
   createDefaultDropdownChevronPresenter,
@@ -158,10 +159,10 @@ class DropdownOptionNode extends FlexBox {
     return this.presenter.metrics.height;
   }
 
-  applyTheme(theme: Theme, highlighted: bool, selected: bool, enabled: bool): void {
+  applyTheme(theme: Theme, highlighted: bool, selected: bool, enabled: bool, colors: DropdownColors | null): void {
     this.semanticSelected(selected);
     this.semanticDisabled(!enabled);
-    this.presenter.apply(theme, new DropdownOptionRowVisualState(highlighted, selected, enabled));
+    this.presenter.apply(theme, new DropdownOptionRowVisualState(highlighted, selected, enabled), colors);
   }
 
   _handlePointerEvent(eventType: PointerEventType, x: f32, y: f32, modifiers: u32 = 0): void {
@@ -193,6 +194,7 @@ export class Dropdown extends FlexBox implements GlobalKeyHandler {
   private chevronTemplateValue: DropdownChevronTemplate | null = null;
   private optionRowTemplateValue: DropdownOptionRowTemplate | null = null;
   private sizingValue: DropdownSizing | null = null;
+  private colorsValue: DropdownColors | null = null;
   private fieldPresenter: DropdownFieldPresenter;
   private chevronPresenter: DropdownChevronPresenter;
   private readonly popupRoot: Portal;
@@ -375,6 +377,12 @@ export class Dropdown extends FlexBox implements GlobalKeyHandler {
     return this;
   }
 
+  colors(colors: DropdownColors | null): this {
+    this.colorsValue = colors;
+    this.handleThemeChanged();
+    return this;
+  }
+
   fieldTemplate(template: DropdownFieldTemplate | null): this {
     this.close();
     this.fieldTemplateValue = template;
@@ -768,6 +776,7 @@ export class Dropdown extends FlexBox implements GlobalKeyHandler {
         index == this.highlightedIndexValue,
         index == this.selectedIndexValue,
         this.isEnabled,
+        this.colorsValue,
       );
     }
   }
@@ -904,6 +913,7 @@ export class Dropdown extends FlexBox implements GlobalKeyHandler {
           ? unchecked(this.itemsValue[this.selectedIndexValue]).label
           : "",
       ),
+      this.colorsValue,
     );
     this.chevronPresenter.apply(
       theme,

package/src/controls/DropdownColors.ts

@@ -0,0 +1,61 @@
+export class DropdownColors {
+  private backgroundSet: bool = false;
+  private backgroundValue: u32 = 0;
+
+  private textPrimarySet: bool = false;
+  private textPrimaryValue: u32 = 0;
+
+  private placeholderSet: bool = false;
+  private placeholderValue: u32 = 0;
+
+  private borderSet: bool = false;
+  private borderValue: u32 = 0;
+
+  private accentSet: bool = false;
+  private accentValue: u32 = 0;
+
+  background(color: u32): this {
+    this.backgroundValue = color;
+    this.backgroundSet = true;
+    return this;
+  }
+
+  textPrimary(color: u32): this {
+    this.textPrimaryValue = color;
+    this.textPrimarySet = true;
+    return this;
+  }
+
+  placeholder(color: u32): this {
+    this.placeholderValue = color;
+    this.placeholderSet = true;
+    return this;
+  }
+
+  border(color: u32): this {
+    this.borderValue = color;
+    this.borderSet = true;
+    return this;
+  }
+
+  accent(color: u32): this {
+    this.accentValue = color;
+    this.accentSet = true;
+    return this;
+  }
+
+  get hasBackground(): bool { return this.backgroundSet; }
+  get backgroundColor(): u32 { return this.backgroundValue; }
+
+  get hasTextPrimary(): bool { return this.textPrimarySet; }
+  get textPrimaryColor(): u32 { return this.textPrimaryValue; }
+
+  get hasPlaceholder(): bool { return this.placeholderSet; }
+  get placeholderColor(): u32 { return this.placeholderValue; }
+
+  get hasBorder(): bool { return this.borderSet; }
+  get borderColor(): u32 { return this.borderValue; }
+
+  get hasAccent(): bool { return this.accentSet; }
+  get accentColor(): u32 { return this.accentValue; }
+}

package/src/controls/LabeledControlColors.ts

@@ -0,0 +1,25 @@
+export class LabeledControlColors {
+  private textPrimarySet: bool = false;
+  private textPrimaryValue: u32 = 0;
+
+  private textMutedSet: bool = false;
+  private textMutedValue: u32 = 0;
+
+  textPrimary(color: u32): this {
+    this.textPrimaryValue = color;
+    this.textPrimarySet = true;
+    return this;
+  }
+
+  textMuted(color: u32): this {
+    this.textMutedValue = color;
+    this.textMutedSet = true;
+    return this;
+  }
+
+  get hasTextPrimary(): bool { return this.textPrimarySet; }
+  get textPrimaryColor(): u32 { return this.textPrimaryValue; }
+
+  get hasTextMuted(): bool { return this.textMutedSet; }
+  get textMutedColor(): u32 { return this.textMutedValue; }
+}

package/src/controls/Slider.ts

@@ -21,6 +21,7 @@ import { Node } from "../core/Node";
 import { FlexBox } from "../nodes";
 import { bind1 } from "../core/bind";
 import { SliderSizing } from "./ControlSizing";
+import { SliderColors } from "./SliderColors";
 import { getControlTemplates } from "./ControlTemplateSet";
 import {
   createDefaultSliderPresenter,
@@ -79,6 +80,7 @@ export class Slider extends FlexBox implements DragGestureHost {
   private sliderPresenter: SliderPresenter = createSliderPresenter(null, null);
   private templateOverride: SliderTemplate | null = null;
   private sizingValue: SliderSizing | null = null;
+  private colorsValue: SliderColors | null = null;
   private readonly disposables: Array<Disposable> = new Array<Disposable>();
   private readonly dragGesture!: DragGesture;
   private changedCallback: ((value: f32) => void) | null = null;
@@ -190,6 +192,12 @@ export class Slider extends FlexBox implements DragGestureHost {
     return this;
   }
 
+  colors(colors: SliderColors | null): this {
+    this.colorsValue = colors;
+    this.syncPresentation();
+    return this;
+  }
+
   template(template: SliderTemplate | null): this {
     this.templateOverride = template;
     const nextPresenter = createSliderPresenter(this.templateOverride, this.sizingValue);
@@ -398,7 +406,7 @@ export class Slider extends FlexBox implements DragGestureHost {
     );
     this.padding(SLIDER_PADDING, SLIDER_PADDING, SLIDER_PADDING, SLIDER_PADDING);
     this.opacity(this.isEnabled ? 1.0 : 0.6);
-    this.sliderPresenter.apply(theme, state);
+    this.sliderPresenter.apply(theme, state, this.colorsValue);
   }
 
   private syncVisualState(): void {

package/src/controls/SliderColors.ts

@@ -0,0 +1,37 @@
+export class SliderColors {
+  private trackSet: bool = false;
+  private trackValue: u32 = 0;
+
+  private fillSet: bool = false;
+  private fillValue: u32 = 0;
+
+  private thumbSet: bool = false;
+  private thumbValue: u32 = 0;
+
+  track(color: u32): this {
+    this.trackValue = color;
+    this.trackSet = true;
+    return this;
+  }
+
+  fill(color: u32): this {
+    this.fillValue = color;
+    this.fillSet = true;
+    return this;
+  }
+
+  thumb(color: u32): this {
+    this.thumbValue = color;
+    this.thumbSet = true;
+    return this;
+  }
+
+  get hasTrack(): bool { return this.trackSet; }
+  get trackColor(): u32 { return this.trackValue; }
+
+  get hasFill(): bool { return this.fillSet; }
+  get fillColor(): u32 { return this.fillValue; }
+
+  get hasThumb(): bool { return this.thumbSet; }
+  get thumbColor(): u32 { return this.thumbValue; }
+}

package/src/controls/TextInputColors.ts

@@ -0,0 +1,85 @@
+export class TextInputColors {
+  private backgroundSet: bool = false;
+  private backgroundValue: u32 = 0;
+
+  private textPrimarySet: bool = false;
+  private textPrimaryValue: u32 = 0;
+
+  private textMutedSet: bool = false;
+  private textMutedValue: u32 = 0;
+
+  private placeholderSet: bool = false;
+  private placeholderValue: u32 = 0;
+
+  private caretSet: bool = false;
+  private caretValue: u32 = 0;
+
+  private borderSet: bool = false;
+  private borderValue: u32 = 0;
+
+  private accentSet: bool = false;
+  private accentValue: u32 = 0;
+
+  background(color: u32): this {
+    this.backgroundValue = color;
+    this.backgroundSet = true;
+    return this;
+  }
+
+  textPrimary(color: u32): this {
+    this.textPrimaryValue = color;
+    this.textPrimarySet = true;
+    return this;
+  }
+
+  textMuted(color: u32): this {
+    this.textMutedValue = color;
+    this.textMutedSet = true;
+    return this;
+  }
+
+  placeholder(color: u32): this {
+    this.placeholderValue = color;
+    this.placeholderSet = true;
+    return this;
+  }
+
+  caret(color: u32): this {
+    this.caretValue = color;
+    this.caretSet = true;
+    return this;
+  }
+
+  border(color: u32): this {
+    this.borderValue = color;
+    this.borderSet = true;
+    return this;
+  }
+
+  accent(color: u32): this {
+    this.accentValue = color;
+    this.accentSet = true;
+    return this;
+  }
+
+  get hasBackground(): bool { return this.backgroundSet; }
+  get backgroundColor(): u32 { return this.backgroundValue; }
+
+  get hasTextPrimary(): bool { return this.textPrimarySet; }
+  get textPrimaryColor(): u32 { return this.textPrimaryValue; }
+
+  get hasTextMuted(): bool { return this.textMutedSet; }
+  get textMutedColor(): u32 { return this.textMutedValue; }
+
+  get hasPlaceholder(): bool { return this.placeholderSet; }
+  get placeholderColor(): u32 { return this.placeholderValue; }
+
+  get hasCaret(): bool { return this.caretSet; }
+  get caretColor(): u32 { return this.caretValue; }
+
+  get hasBorder(): bool { return this.borderSet; }
+  get borderColor(): u32 { return this.borderValue; }
+
+  get hasAccent(): bool { return this.accentSet; }
+  get accentColor(): u32 { return this.accentValue; }
+}

package/src/controls/index.ts

@@ -1,6 +1,10 @@
 export { Button } from "./Button";
 export { Checkbox } from "./Checkbox";
 export { DropdownSizing, LabeledControlSizing, SliderSizing } from "./ControlSizing";
+export { LabeledControlColors } from "./LabeledControlColors";
+export { TextInputColors } from "./TextInputColors";
+export { DropdownColors } from "./DropdownColors";
+export { SliderColors } from "./SliderColors";
 export { ContextMenu, MenuItem } from "./ContextMenu";
 export { Dialog } from "./Dialog";
 export { Dropdown, DropdownItem } from "./Dropdown";

package/src/controls/internal/DropdownFieldPresenter.ts

@@ -9,6 +9,7 @@ import {
 import { Theme } from "../../core/Theme";
 import { FlexBox, Text } from "../../nodes";
 import { DropdownSizing } from "../ControlSizing";
+import { DropdownColors } from "../DropdownColors";
 
 const DEFAULT_CHEVRON_BOX_SIZE: f32 = 16.0;
 const DEFAULT_FIELD_PADDING_X: f32 = 16.0;
@@ -98,7 +99,7 @@ export abstract class DropdownFieldPresenter {
     return this.metricsValue;
   }
 
-  abstract apply(theme: Theme, state: DropdownFieldVisualState): void;
+  abstract apply(theme: Theme, state: DropdownFieldVisualState, colors?: DropdownColors | null): void;
 }
 
 export abstract class DropdownFieldTemplate {
@@ -131,26 +132,31 @@ class DefaultDropdownFieldPresenter extends DropdownFieldPresenter {
     super(root, valueHost, valueNode, chevronHost, metrics);
   }
 
-  apply(theme: Theme, state: DropdownFieldVisualState): void {
+  apply(theme: Theme, state: DropdownFieldVisualState, colors: DropdownColors | null = null): void {
     const metrics = this.metrics;
     const contentHeight = <f32>Math.max(
       metrics.fontSize,
       metrics.height - metrics.paddingTop - metrics.paddingBottom,
     );
+    const bg = colors !== null && colors.hasBackground ? colors.backgroundColor : (state.pressed && state.enabled ? theme.colors.background : theme.colors.surface);
+    const borderColor = colors !== null && colors.hasBorder ? colors.borderColor : theme.colors.border;
     this.root
       .flexDirection(FlexDirection.Row)
       .alignItems(AlignItems.Center)
       .height(metrics.height, Unit.Pixel)
       .cornerRadius(theme.spacing.sm)
-      .border(2.0, theme.colors.border, BorderStyle.Solid)
+      .border(2.0, borderColor, BorderStyle.Solid)
       .padding(metrics.paddingLeft, metrics.paddingTop, metrics.paddingRight, metrics.paddingBottom)
-      .bgColor(state.pressed && state.enabled ? theme.colors.background : theme.colors.surface);
+      .bgColor(bg);
     this.valueHost
       .fillSize();
+    const textColor = !state.enabled
+      ? theme.colors.textMuted
+      : (colors !== null && colors.hasTextPrimary ? colors.textPrimaryColor : theme.colors.textPrimary);
     this.valueNode
       .font(theme.fonts.body, metrics.fontSize)
       .lineHeight(contentHeight)
-      .textColor(state.enabled ? theme.colors.textPrimary : theme.colors.textMuted);
+      .textColor(textColor);
     this.chevronHost
       .width(metrics.chevronBoxSize, Unit.Pixel)
       .height(metrics.chevronBoxSize, Unit.Pixel)

package/src/controls/internal/DropdownOptionRowPresenter.ts

@@ -2,6 +2,7 @@ import { AlignItems, TextVerticalAlign } from "../../core/ffi";
 import { Theme } from "../../core/Theme";
 import { FlexBox, Text } from "../../nodes";
 import { DropdownSizing } from "../ControlSizing";
+import { DropdownColors } from "../DropdownColors";
 
 export class DropdownOptionRowMetrics {
   constructor(
@@ -55,7 +56,7 @@ export abstract class DropdownOptionRowPresenter {
     return this.metricsValue;
   }
 
-  abstract apply(theme: Theme, state: DropdownOptionRowVisualState): void;
+  abstract apply(theme: Theme, state: DropdownOptionRowVisualState, colors?: DropdownColors | null): void;
 }
 
 export abstract class DropdownOptionRowTemplate {
@@ -79,19 +80,20 @@ class DefaultDropdownOptionRowPresenter extends DropdownOptionRowPresenter {
     super(root, labelNode, metrics);
   }
 
-  apply(theme: Theme, state: DropdownOptionRowVisualState): void {
+  apply(theme: Theme, state: DropdownOptionRowVisualState, colors: DropdownColors | null = null): void {
     const metrics = this.metrics;
     this.root
       .padding(metrics.paddingLeft, 0.0, metrics.paddingRight, 0.0)
       .cornerRadius(theme.spacing.xs)
       .bgColor(state.highlighted ? theme.contextMenu.item.hoverBackground : 0x00000000);
+    const labelColor = !state.enabled
+      ? theme.colors.textMuted
+      : (state.selected
+         ? (colors !== null && colors.hasAccent ? colors.accentColor : theme.colors.accent)
+         : (colors !== null && colors.hasTextPrimary ? colors.textPrimaryColor : theme.colors.textPrimary));
     this.labelNode
       .font(theme.fonts.body, metrics.fontSize)
-      .textColor(
-        !state.enabled
-          ? theme.colors.textMuted
-          : (state.selected ? theme.colors.accent : theme.colors.textPrimary),
-      );
+      .textColor(labelColor);
   }
 }
 

package/src/controls/internal/PressableLabeledControl.ts

@@ -16,6 +16,7 @@ import {
 } from "../../core/ffi";
 import { Theme, activeTheme } from "../../core/Theme";
 import { FlexBox, TextCore } from "../../nodes";
+import { LabeledControlColors } from "../LabeledControlColors";
 
 const TRANSPARENT: u32 = rgba(0x00, 0x00, 0x00, 0x00);
 
@@ -31,6 +32,7 @@ export class PressableLabeledControl extends FlexBox {
   private readonly disposables: Array<Disposable> = new Array<Disposable>();
   private disposed: bool = false;
   private labelFontSizeOverride: f32 = 0.0;
+  private colorsValue: LabeledControlColors | null = null;
   protected hoveredState: bool = false;
   protected pressedState: bool = false;
   protected focusedState: bool = false;
@@ -177,6 +179,12 @@ export class PressableLabeledControl extends FlexBox {
     this.syncBaseTheme(activeTheme.value);
   }
 
+  colors(colors: LabeledControlColors | null): this {
+    this.colorsValue = colors;
+    this.syncBaseTheme(activeTheme.value);
+    return this;
+  }
+
   protected syncBaseTheme(theme: Theme): void {
     this.cursor(this.isEnabled ? CursorStyle.Pointer : CursorStyle.Default);
     this.cornerRadius(theme.spacing.sm);
@@ -192,7 +200,22 @@ export class PressableLabeledControl extends FlexBox {
       theme.fonts.body,
       this.labelFontSizeOverride > 0.0 ? this.labelFontSizeOverride : theme.fonts.sizeBody,
     );
-    this.labelNode.textColor(this.isEnabled ? theme.colors.textPrimary : theme.colors.textMuted);
+    const colors = this.colorsValue;
+    let labelColor: u32;
+    if (this.isEnabled) {
+      if (colors !== null && colors.hasTextPrimary) {
+        labelColor = colors.textPrimaryColor;
+      } else {
+        labelColor = theme.colors.textPrimary;
+      }
+    } else {
+      if (colors !== null && colors.hasTextMuted) {
+        labelColor = colors.textMutedColor;
+      } else {
+        labelColor = theme.colors.textMuted;
+      }
+    }
+    this.labelNode.textColor(labelColor);
     this.syncFocusChrome(theme);
   }
 

package/src/controls/internal/SliderPresenter.ts

@@ -2,6 +2,7 @@ import { BorderStyle, Orientation, Unit } from "../../core/ffi";
 import { Theme } from "../../core/Theme";
 import { FlexBox } from "../../nodes";
 import { SliderSizing } from "../ControlSizing";
+import { SliderColors } from "../SliderColors";
 
 function clamp(value: f32, min: f32, max: f32): f32 {
   if (value < min) {
@@ -76,7 +77,7 @@ export abstract class SliderPresenter {
   }
 
   abstract layout(state: SliderVisualState, length: f32): void;
-  abstract apply(theme: Theme, state: SliderVisualState): void;
+  abstract apply(theme: Theme, state: SliderVisualState, colors?: SliderColors | null): void;
 }
 
 export abstract class SliderTemplate {
@@ -163,7 +164,7 @@ class DefaultSliderPresenter extends SliderPresenter {
     );
   }
 
-  apply(theme: Theme, state: SliderVisualState): void {
+  apply(theme: Theme, state: SliderVisualState, colors: SliderColors | null = null): void {
     const accent = state.dragging
       ? theme.colors.accentPressed
       : (state.hovered ? theme.colors.accentHovered : theme.colors.accent);
@@ -172,14 +173,17 @@ class DefaultSliderPresenter extends SliderPresenter {
     const trackThickness = resolveTrackThickness(metrics);
     const trackRadius = trackThickness * 0.5;
     this.trackNode.cornerRadius(trackRadius);
-    this.trackNode.bgColor(theme.colors.scrollbarTrack);
+    const trackColor = colors !== null && colors.hasTrack ? colors.trackColor : theme.colors.scrollbarTrack;
+    this.trackNode.bgColor(trackColor);
     this.fillNode.cornerRadius(trackRadius);
-    this.fillNode.bgColor(accent);
+    const fillColor = colors !== null && colors.hasFill ? colors.fillColor : accent;
+    this.fillNode.bgColor(fillColor);
     this.thumbNode
       .width(thumbSize, Unit.Pixel)
       .height(thumbSize, Unit.Pixel)
       .cornerRadius(thumbSize * 0.5);
-    this.thumbNode.bgColor(accent);
+    const thumbColor = colors !== null && colors.hasThumb ? colors.thumbColor : accent;
+    this.thumbNode.bgColor(thumbColor);
     this.thumbNode.border(1.0, theme.colors.surface, BorderStyle.Solid);
   }
 }

package/src/controls/internal/TextInputCore.ts

@@ -22,6 +22,7 @@ import { bind1, bind2 } from "../../core/bind";
 import { ScrollState } from "../../nodes/ScrollState";
 import { ScrollView } from "../../nodes/ScrollView";
 import { getControlTemplates } from "../ControlTemplateSet";
+import { TextInputColors } from "../TextInputColors";
 import {
   defaultTextInputTemplate,
   TextInputPresenter,
@@ -179,6 +180,7 @@ export class TextInputCore extends FlexBox {
   private focusChangedListener: ((focused: bool) => void) | null = null;
   private textInputFocusChangedBinding: Callback1<bool> | null = null;
   private templateValue: TextInputTemplate | null = null;
+  private colorsValue: TextInputColors | null = null;
 
   constructor(profile: TextInputProfile, text: string = "") {
     super();
@@ -256,6 +258,12 @@ export class TextInputCore extends FlexBox {
     return this;
   }
 
+  colors(colors: TextInputColors | null): this {
+    this.colorsValue = colors;
+    this.syncThemeState(activeTheme.value);
+    return this;
+  }
+
   text(value: string): this {
     this.textValue = value;
     this.clampSelectionToText();
@@ -461,30 +469,49 @@ export class TextInputCore extends FlexBox {
     const resolvedFontSize = this.hasFontSizeOverride ? this.fontSizeOverride : theme.fonts.sizeBody;
     const lineHeight = resolvedFontSize + theme.spacing.sm;
     const editableCursor = this.isEnabled ? CursorStyle.Text : CursorStyle.Default;
-    this.presenter.apply(theme, this.createVisualState());
+    this.presenter.apply(theme, this.createVisualState(), this.colorsValue);
 
     const textVerticalAlign = this.profile.multiline ? TextVerticalAlign.Top : TextVerticalAlign.Center;
+
+    const colors = this.colorsValue;
+    let resolvedTextColor: u32;
+    if (this.isEnabled) {
+      if (colors !== null && colors.hasTextPrimary) {
+        resolvedTextColor = colors.textPrimaryColor;
+      } else {
+        resolvedTextColor = theme.colors.textPrimary;
+      }
+    } else {
+      if (colors !== null && colors.hasTextMuted) {
+        resolvedTextColor = colors.textMutedColor;
+      } else {
+        resolvedTextColor = theme.colors.textMuted;
+      }
+    }
+    const resolvedCaretColor = colors !== null && colors.hasCaret ? colors.caretColor : theme.colors.accent;
+
     this.editorText
       .width(this.shouldEditorTrackViewportWidth() ? 100.0 : 0.0, this.shouldEditorTrackViewportWidth() ? Unit.Percent : Unit.Auto)
       .height(this.profile.multiline ? 0.0 : lineHeight, this.profile.multiline ? Unit.Auto : Unit.Pixel)
       .fontFamily(resolvedFontFamily)
       .fontSize(resolvedFontSize)
       .verticalAlign(textVerticalAlign)
-      .textColor(this.isEnabled ? theme.colors.textPrimary : theme.colors.textMuted)
-      .caretColor(theme.colors.accent);
+      .textColor(resolvedTextColor)
+      .caretColor(resolvedCaretColor);
     this.syncEditorWrapping();
 
     this.placeholderHost
       .width(100.0, Unit.Percent)
       .height(this.profile.multiline ? 0.0 : lineHeight, this.profile.multiline ? Unit.Auto : Unit.Pixel)
       .cursor(editableCursor);
+    const resolvedPlaceholderColor = colors !== null && colors.hasPlaceholder ? colors.placeholderColor : theme.colors.textMuted;
     this.placeholderText
       .width(100.0, Unit.Percent)
       .height(this.profile.multiline ? 0.0 : lineHeight, this.profile.multiline ? Unit.Auto : Unit.Pixel)
       .fontFamily(resolvedFontFamily)
       .fontSize(resolvedFontSize)
       .verticalAlign(textVerticalAlign)
-      .textColor(theme.colors.textMuted);
+      .textColor(resolvedPlaceholderColor);
     const scrollBox = this.editorScrollBox;
     if (scrollBox !== null) {
       scrollBox.cursor(CursorStyle.Default);
@@ -492,6 +519,14 @@ export class TextInputCore extends FlexBox {
       scrollBox.fillSize();
       this.syncScrollChromeState();
     }
+
+    if (colors !== null && colors.hasBackground) {
+      this.bgColor(colors.backgroundColor);
+    }
+    if (colors !== null && colors.hasBorder) {
+      this.border(1.0, colors.borderColor, BorderStyle.Solid);
+    }
+
     this.syncFocusChrome(theme);
   }
 

package/src/controls/internal/TextInputPresenter.ts

@@ -2,6 +2,7 @@ import { BorderStyle, CursorStyle, Unit } from "../../core/ffi";
 import { Node } from "../../core/Node";
 import { Theme } from "../../core/Theme";
 import { FlexBox } from "../../nodes";
+import { TextInputColors } from "../TextInputColors";
 
 export class TextInputVisualState {
   constructor(
@@ -35,7 +36,7 @@ export abstract class TextInputPresenter {
     return changetype<FlexBox>(this.placeholderHostValue);
   }
 
-  abstract apply(theme: Theme, state: TextInputVisualState): void;
+  abstract apply(theme: Theme, state: TextInputVisualState, colors?: TextInputColors | null): void;
 }
 
 export abstract class TextInputTemplate {
@@ -43,15 +44,17 @@ export abstract class TextInputTemplate {
 }
 
 class DefaultTextInputPresenter extends TextInputPresenter {
-  apply(theme: Theme, state: TextInputVisualState): void {
+  apply(theme: Theme, state: TextInputVisualState, colors: TextInputColors | null = null): void {
     const horizontalPadding = theme.spacing.md;
     const verticalPadding = theme.spacing.sm;
     const editableCursor = state.enabled ? CursorStyle.Text : CursorStyle.Default;
     const shellCursor = !state.multiline && state.enabled ? CursorStyle.Text : CursorStyle.Default;
+    const bg = colors !== null && colors.hasBackground ? colors.backgroundColor : theme.colors.surface;
+    const borderColor = colors !== null && colors.hasBorder ? colors.borderColor : theme.colors.border;
     this.host
-      .bgColor(theme.colors.surface)
+      .bgColor(bg)
       .cornerRadius(theme.spacing.sm)
-      .border(1.0, theme.colors.border, BorderStyle.Solid)
+      .border(1.0, borderColor, BorderStyle.Solid)
       .padding(horizontalPadding, verticalPadding, horizontalPadding, verticalPadding)
       .cursor(shellCursor);
     this.host.opacity(state.enabled ? 1.0 : 0.6);