@jimka/typescript-ui

Appearance

@jimka/typescript-ui / core / Theme

Interface: Theme ​

Defined in: src/typescript/lib/core/Theme.ts:17

Defines the full set of design tokens that make up a UI theme.

Background tokens (e.g. button.bg, button.pressed.bg, toggle.selected.bg) accept any CSS background-image value such as a gradient, or any CSS background-color value such as a plain colour. The framework applies the same variable to both background-color and background-image, so CSS's "invalid at computed-value time" rule routes automatically: a plain colour takes effect via background-color; a gradient via background-image.

Properties ​

accordion ​

ts
accordion: {
  header: {
     background: string;
     border: string;
     color: string;
    };
  indicator: {
     color: string;
    };
  panel: {
     border: string;
    };
};

Defined in: src/typescript/lib/core/Theme.ts:206

ts
header: {
  background: string;
  border: string;
  color: string;
};
header.background ​
ts
background: string;
header.border ​
ts
border: string;
header.color ​
ts
color: string;

indicator ​

ts
indicator: {
  color: string;
};
indicator.color ​
ts
color: string;

panel ​

ts
panel: {
  border: string;
};
panel.border ​
ts
border: string;

autoComplete ​

ts
autoComplete: {
  background: string;
  border: string;
  item: {
     disabledColor: string;
     highlightBackground: string;
     highlightColor: string;
     hoverBackground: string;
    };
  shadow: string;
};

Defined in: src/typescript/lib/core/Theme.ts:231

background ​

ts
background: string;

border ​

ts
border: string;

item ​

ts
item: {
  disabledColor: string;
  highlightBackground: string;
  highlightColor: string;
  hoverBackground: string;
};
item.disabledColor ​
ts
disabledColor: string;
item.highlightBackground ​
ts
highlightBackground: string;
item.highlightColor ​
ts
highlightColor: string;
item.hoverBackground ​
ts
hoverBackground: string;

shadow ​

ts
shadow: string;

body ​

ts
body: {
  background: string;
};

Defined in: src/typescript/lib/core/Theme.ts:36

background ​

ts
background: string;

border ​

ts
border: {
  color: string;
  radius: string;
};

Defined in: src/typescript/lib/core/Theme.ts:40

color ​

ts
color: string;

radius ​

ts
radius: string;

button ​

ts
button: {
  background: string;
  border: string;
  font: {
     size: string;
    };
  hover: {
     background: string;
     foreground: string;
     shadow: string;
    };
  padding: string;
  pressed: {
     background: string;
     foreground: string;
     shadow: string;
    };
  shadow: string;
};

Defined in: src/typescript/lib/core/Theme.ts:45

background ​

ts
background: string;

border ​

ts
border: string;

font ​

ts
font: {
  size: string;
};
font.size ​
ts
size: string;

hover ​

ts
hover: {
  background: string;
  foreground: string;
  shadow: string;
};
hover.background ​
ts
background: string;
hover.foreground ​
ts
foreground: string;
hover.shadow ​
ts
shadow: string;

padding ​

ts
padding: string;

pressed ​

ts
pressed: {
  background: string;
  foreground: string;
  shadow: string;
};
pressed.background ​
ts
background: string;
pressed.foreground ​
ts
foreground: string;
pressed.shadow ​
ts
shadow: string;

shadow ​

ts
shadow: string;

colorScheme ​

ts
colorScheme: string;

Defined in: src/typescript/lib/core/Theme.ts:18

contextMenu ​

ts
contextMenu: {
  background: string;
  border: string;
  item: {
     disabledColor: string;
     hoverBackground: string;
    };
  separatorColor: string;
  shadow: string;
};

Defined in: src/typescript/lib/core/Theme.ts:128

background ​

ts
background: string;

border ​

ts
border: string;

item ​

ts
item: {
  disabledColor: string;
  hoverBackground: string;
};
item.disabledColor ​
ts
disabledColor: string;
item.hoverBackground ​
ts
hoverBackground: string;

separatorColor ​

ts
separatorColor: string;

shadow ​

ts
shadow: string;

dialog ​

ts
dialog: {
  backdrop: {
     background: string;
    };
  border: string;
  shadow: string;
};

Defined in: src/typescript/lib/core/Theme.ts:198

backdrop ​

ts
backdrop: {
  background: string;
};
backdrop.background ​
ts
background: string;

border ​

ts
border: string;

shadow ​

ts
shadow: string;
ts
dropdown: {
  fade: {
     duration: string;
     translate: string;
    };
};

Defined in: src/typescript/lib/core/Theme.ts:243

fade ​

ts
fade: {
  duration: string;
  translate: string;
};
fade.duration ​
ts
duration: string;
fade.translate ​
ts
translate: string;

font ​

ts
font: {
  family: string;
  lineHeight: number;
  size: string;
};

Defined in: src/typescript/lib/core/Theme.ts:20

family ​

ts
family: string;

lineHeight ​

ts
lineHeight: number;

Unitless multiplier of the current font size. CSS treats a unitless line-height as "this many times the element's own font-size", so the value scales automatically when the font size changes. Typical UI values are around 1.2 (compact) to 1.5 (loose).

size ​

ts
size: string;

glyph ​

ts
glyph: {
  beatDuration: string;
  pulseDuration: string;
  spinDuration: string;
};

Defined in: src/typescript/lib/core/Theme.ts:274

beatDuration ​

ts
beatDuration: string;

pulseDuration ​

ts
pulseDuration: string;

spinDuration ​

ts
spinDuration: string;

gutter ​

ts
gutter: {
  background: string;
};

Defined in: src/typescript/lib/core/Theme.ts:76

background ​

ts
background: string;

header ​

ts
header: {
  font: {
     size: string;
    };
  padding: number;
};

Defined in: src/typescript/lib/core/Theme.ts:94

font ​

ts
font: {
  size: string;
};
font.size ​
ts
size: string;

padding ​

ts
padding: number;

input ​

ts
input: {
  background: string;
};

Defined in: src/typescript/lib/core/Theme.ts:72

background ​

ts
background: string;
ts
menuBar: {
  background: string;
  border: string;
  button: {
     background: string;
     foreground: string;
     hoverBackground: string;
    };
  item: {
     disabledColor: string;
     hoverBackground: string;
     shortcutColor: string;
    };
  panel: {
     background: string;
     border: string;
     minWidth: string;
     shadow: string;
    };
  separatorColor: string;
};

Defined in: src/typescript/lib/core/Theme.ts:139

background ​

ts
background: string;

border ​

ts
border: string;

button ​

ts
button: {
  background: string;
  foreground: string;
  hoverBackground: string;
};
button.background ​
ts
background: string;
button.foreground ​
ts
foreground: string;
button.hoverBackground ​
ts
hoverBackground: string;

item ​

ts
item: {
  disabledColor: string;
  hoverBackground: string;
  shortcutColor: string;
};
item.disabledColor ​
ts
disabledColor: string;
item.hoverBackground ​
ts
hoverBackground: string;
item.shortcutColor ​
ts
shortcutColor: string;

panel ​

ts
panel: {
  background: string;
  border: string;
  minWidth: string;
  shadow: string;
};
panel.background ​
ts
background: string;
panel.border ​
ts
border: string;
panel.minWidth ​
ts
minWidth: string;
panel.shadow ​
ts
shadow: string;

separatorColor ​

ts
separatorColor: string;

notification ​

ts
notification: {
  error: {
     background: string;
     border: string;
    };
  info: {
     background: string;
     border: string;
    };
  shadow: string;
  success: {
     background: string;
     border: string;
    };
  warning: {
     background: string;
     border: string;
    };
};

Defined in: src/typescript/lib/core/Theme.ts:178

error ​

ts
error: {
  background: string;
  border: string;
};
error.background ​
ts
background: string;
error.border ​
ts
border: string;

info ​

ts
info: {
  background: string;
  border: string;
};
info.background ​
ts
background: string;
info.border ​
ts
border: string;

shadow ​

ts
shadow: string;

success ​

ts
success: {
  background: string;
  border: string;
};
success.background ​
ts
background: string;
success.border ​
ts
border: string;

warning ​

ts
warning: {
  background: string;
  border: string;
};
warning.background ​
ts
background: string;
warning.border ​
ts
border: string;

popover ​

ts
popover: {
  arrowSize: string;
  background: string;
  border: string;
  color: string;
  padding: string;
  radius: string;
  shadow: string;
};

Defined in: src/typescript/lib/core/Theme.ts:168

arrowSize ​

ts
arrowSize: string;

background ​

ts
background: string;

border ​

ts
border: string;

color ​

ts
color: string;

padding ​

ts
padding: string;

radius ​

ts
radius: string;

shadow ​

ts
shadow: string;

progressBar ​

ts
progressBar: {
  fill: {
     background: string;
    };
  indeterminate: {
     background: string;
    };
  track: {
     background: string;
     borderRadius: string;
    };
};

Defined in: src/typescript/lib/core/Theme.ts:255

fill ​

ts
fill: {
  background: string;
};
fill.background ​
ts
background: string;

indeterminate ​

ts
indeterminate: {
  background: string;
};
indeterminate.background ​
ts
background: string;

track ​

ts
track: {
  background: string;
  borderRadius: string;
};
track.background ​
ts
background: string;
track.borderRadius ​
ts
borderRadius: string;

progressSpinner ​

ts
progressSpinner: {
  backdrop: string;
  color: string;
  size: string;
};

Defined in: src/typescript/lib/core/Theme.ts:268

backdrop ​

ts
backdrop: string;

color ​

ts
color: string;

size ​

ts
size: string;

spinner ​

ts
spinner: {
  buttonWidth: string;
  dividerColor: string;
};

Defined in: src/typescript/lib/core/Theme.ts:250

buttonWidth ​

ts
buttonWidth: string;

dividerColor ​

ts
dividerColor: string;

tab ​

ts
tab: {
  button: {
     background: string;
    };
  toolbar: {
     background: string;
     border: string;
    };
};

Defined in: src/typescript/lib/core/Theme.ts:80

button ​

ts
button: {
  background: string;
};
button.background ​
ts
background: string;

toolbar ​

ts
toolbar: {
  background: string;
  border: string;
};
toolbar.background ​
ts
background: string;
toolbar.border ​
ts
border: string;

table ​

ts
table: {
  cell: {
     background: string;
     border: string;
     color: string;
     editorBorderColor: string;
     height: string;
     padding: number;
    };
  header: {
     border: string;
     font: {
        size: string;
       };
     glyph: {
        color: string;
        gap: string;
       };
    };
  row: {
     dirty: string;
     new: string;
     selected: string;
     selectedBorder: string;
    };
};

Defined in: src/typescript/lib/core/Theme.ts:101

cell ​

ts
cell: {
  background: string;
  border: string;
  color: string;
  editorBorderColor: string;
  height: string;
  padding: number;
};
cell.background ​
ts
background: string;
cell.border ​
ts
border: string;
cell.color ​
ts
color: string;
cell.editorBorderColor ​
ts
editorBorderColor: string;
cell.height ​
ts
height: string;
cell.padding ​
ts
padding: number;

header ​

ts
header: {
  border: string;
  font: {
     size: string;
    };
  glyph: {
     color: string;
     gap: string;
    };
};
header.border ​
ts
border: string;
header.font ​
ts
font: {
  size: string;
};
header.font.size ​
ts
size: string;
header.glyph ​
ts
glyph: {
  color: string;
  gap: string;
};
header.glyph.color ​
ts
color: string;
header.glyph.gap ​
ts
gap: string;

row ​

ts
row: {
  dirty: string;
  new: string;
  selected: string;
  selectedBorder: string;
};
row.dirty ​
ts
dirty: string;
row.new ​
ts
new: string;
row.selected ​
ts
selected: string;
row.selectedBorder ​
ts
selectedBorder: string;

text ​

ts
text: {
  color: string;
};

Defined in: src/typescript/lib/core/Theme.ts:32

color ​

ts
color: string;

toggle ​

ts
toggle: {
  selected: {
     background: string;
     shadow: string;
    };
};

Defined in: src/typescript/lib/core/Theme.ts:65

selected ​

ts
selected: {
  background: string;
  shadow: string;
};
selected.background ​
ts
background: string;
selected.shadow ​
ts
shadow: string;

tooltip ​

ts
tooltip: {
  background: string;
  border: string;
  color: string;
  shadow: string;
};

Defined in: src/typescript/lib/core/Theme.ts:161

background ​

ts
background: string;

border ​

ts
border: string;

color ​

ts
color: string;

shadow ​

ts
shadow: string;

validation ​

ts
validation: {
  error: {
     border: string;
     tooltip: {
        background: string;
        border: string;
        color: string;
       };
    };
};

Defined in: src/typescript/lib/core/Theme.ts:220

error ​

ts
error: {
  border: string;
  tooltip: {
     background: string;
     border: string;
     color: string;
    };
};
error.border ​
ts
border: string;
error.tooltip ​
ts
tooltip: {
  background: string;
  border: string;
  color: string;
};
error.tooltip.background ​
ts
background: string;
error.tooltip.border ​
ts
border: string;
error.tooltip.color ​
ts
color: string;

window ​

ts
window: {
  shadow: string;
};

Defined in: src/typescript/lib/core/Theme.ts:90

shadow ​

ts
shadow: string;