@teaui/core
Version:
A high-level terminal UI library for Node
187 lines • 6.69 kB
JavaScript
import { Style } from './Style.js';
const defaultText = 'default';
const defaultContrastText = '#FFF(16)';
const defaultDimText = '#808080(239)';
const defaultDimBackground = '#434343(238)';
export class Palette {
textColor;
contrastTextColor;
dimTextColor;
dimBackgroundColor;
controlBackgroundColor;
textBackgroundColor;
highlightColor;
darkenColor;
tableCheckedColor;
tableCheckedHighlightColor;
emoji;
static plain = new Palette({
controlBackground: '#4F4F4F(239)',
textBackground: 'default',
highlight: '#616161(241)',
darken: '#3F3F3F(237)',
tableChecked: '#3a2040',
tableCheckedHighlight: '#4d2a55',
});
static primary = new Palette({
controlBackground: '#3B5EA7',
textBackground: '#273F70',
highlight: '#5A7AC2',
darken: '#314F8C',
tableChecked: '#6b4a1d',
tableCheckedHighlight: '#8a5f24',
text: '#E2E2E2(253)',
contrastText: '#5A7AC2',
dimText: '#314F8C',
});
static secondary = new Palette({
controlBackground: '#D0851C',
textBackground: '#805211',
highlight: '#D0924B',
darken: '#A66A16',
tableChecked: '#234a7a',
tableCheckedHighlight: '#2e629f',
text: '#E2E2E2(253)',
contrastText: '#D0924B',
dimText: '#A66A16',
});
static proceed = new Palette({
controlBackground: '#4A7A5B',
textBackground: '#2E4E3A',
highlight: '#58A877',
darken: '#3D664C',
tableChecked: '#5a3a70',
tableCheckedHighlight: '#71498d',
text: '#E2E2E2(253)',
contrastText: '#58A877',
dimText: '#3D664C',
});
static cancel = new Palette({
controlBackground: '#A04A4C',
textBackground: '#5B282A',
highlight: '#C46264',
darken: '#853D3F',
tableChecked: '#1f5b63',
tableCheckedHighlight: '#2b737d',
text: '#E2E2E2(253)',
contrastText: '#C46264',
dimText: '#853D3F',
});
static selected = new Palette({
text: '#383838(236)',
controlBackground: '#BDBDBD(250)',
textBackground: '#BDBDBD(250)',
highlight: '#E6E6E6(254)',
darken: '#7F7F7F(243)',
tableChecked: '#8fa1c8',
tableCheckedHighlight: '#a7b8dc',
});
static red = Palette.cancel;
static green = Palette.proceed;
static blue = Palette.primary;
static orange = Palette.secondary;
constructor({ text, contrastText, dimText, dimBackground, controlBackground, textBackground, highlight, darken, tableChecked, tableCheckedHighlight, emoji, }) {
this.textColor = text ?? defaultText;
this.contrastTextColor = contrastText ?? defaultContrastText;
this.dimTextColor = dimText ?? defaultDimText;
this.dimBackgroundColor = dimBackground ?? defaultDimBackground;
this.controlBackgroundColor = controlBackground;
this.textBackgroundColor = textBackground ?? controlBackground;
this.highlightColor = highlight;
this.darkenColor = darken;
this.tableCheckedColor = tableChecked ?? Palette.plain.tableCheckedColor;
this.tableCheckedHighlightColor =
tableCheckedHighlight ?? Palette.plain.tableCheckedHighlightColor;
this.emoji = emoji ?? true;
}
/**
* "Ornament" is meant to draw decorative characters that disappear on hover/press
*/
ui({ isPressed, isHover, isOrnament, } = {}) {
if (isPressed) {
return new Style({
foreground: isOrnament ? this.darkenColor : this.textColor,
background: this.darkenColor,
});
}
else if (isHover) {
return new Style({
foreground: isOrnament ? this.highlightColor : this.textColor,
background: this.highlightColor,
});
}
else if (isOrnament) {
return new Style({
foreground: this.darkenColor,
background: this.controlBackgroundColor,
});
}
else {
return new Style({
foreground: this.textColor,
background: this.controlBackgroundColor,
});
}
}
/**
* Creates a text style using the current purpose.
*
* Not all combinations are supported:
* - isSelected and isPlaceholder revert to just isPlaceholder
*/
text({ isPressed, isHover, isSelected, isPlaceholder, hasFocus, } = {}) {
if (isPlaceholder) {
return new Style({
foreground: isPressed ? this.textColor : this.dimTextColor,
background: isHover
? this.dimBackgroundColor
: this.textBackgroundColor,
bold: hasFocus,
});
}
if (isPressed) {
return new Style({
foreground: this.highlightColor,
background: this.textBackgroundColor,
inverse: hasFocus && isSelected,
bold: hasFocus,
});
}
if (isHover) {
return new Style({
foreground: this.contrastTextColor,
background: this.textBackgroundColor,
inverse: hasFocus && isSelected,
bold: hasFocus,
});
}
if (isSelected && !hasFocus) {
return new Style({
foreground: this.dimTextColor,
background: this.dimBackgroundColor,
});
}
return new Style({
foreground: this.textColor,
background: this.textBackgroundColor,
inverse: hasFocus && isSelected,
bold: hasFocus,
});
}
merge(props) {
return new Palette({
text: props.text ?? this.textColor,
contrastText: props.contrastText ?? this.contrastTextColor,
dimText: props.dimText ?? this.dimTextColor,
dimBackground: props.dimBackground ?? this.dimBackgroundColor,
controlBackground: props.controlBackground ?? this.controlBackgroundColor,
textBackground: props.textBackground ?? this.textBackgroundColor,
highlight: props.highlight ?? this.highlightColor,
darken: props.darken ?? this.darkenColor,
tableChecked: props.tableChecked ?? this.tableCheckedColor,
tableCheckedHighlight: props.tableCheckedHighlight ?? this.tableCheckedHighlightColor,
emoji: props.emoji ?? this.emoji,
});
}
}
//# sourceMappingURL=Palette.js.map