or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

Files

docs

colors-styling.mdindex.mdkey-bindings.mdmain-interface.mdpopups.mdwidgets.md

colors-styling.mddocs/

0

# Colors and Styling

1

2

Color system with predefined color pairs, custom color rules for syntax highlighting, border customization, and visual theming options.

3

4

## Capabilities

5

6

### Predefined Color Pairs

7

8

Built-in color combinations for common UI elements and themes.

9

10

```python { .api }

11

# Black background colors

12

WHITE_ON_BLACK: int # Default color scheme (1)

13

YELLOW_ON_BLACK: int # Warning text (2)

14

RED_ON_BLACK: int # Error text on dark (3)

15

CYAN_ON_BLACK: int # Highlight text (4)

16

MAGENTA_ON_BLACK: int # Special text (5)

17

GREEN_ON_BLACK: int # Success text (6)

18

BLUE_ON_BLACK: int # Info text (7)

19

20

# Green background colors

21

BLACK_ON_GREEN: int # Terminal green theme (8)

22

WHITE_ON_GREEN: int # (9)

23

YELLOW_ON_GREEN: int # (10)

24

RED_ON_GREEN: int # (11)

25

CYAN_ON_GREEN: int # (12)

26

MAGENTA_ON_GREEN: int # (13)

27

BLUE_ON_GREEN: int # (14)

28

29

# White background colors

30

BLACK_ON_WHITE: int # Inverted scheme (15)

31

YELLOW_ON_WHITE: int # (16)

32

RED_ON_WHITE: int # (17)

33

CYAN_ON_WHITE: int # (18)

34

GREEN_ON_WHITE: int # (19)

35

MAGENTA_ON_WHITE: int # (20)

36

BLUE_ON_WHITE: int # (21)

37

38

# Red background colors

39

WHITE_ON_RED: int # Error/alert theme (22)

40

BLACK_ON_RED: int # (23)

41

YELLOW_ON_RED: int # (24)

42

CYAN_ON_RED: int # (25)

43

GREEN_ON_RED: int # (26)

44

BLUE_ON_RED: int # (27)

45

MAGENTA_ON_RED: int # (28)

46

47

# Cyan background colors

48

WHITE_ON_CYAN: int # (29)

49

BLACK_ON_CYAN: int # (30)

50

RED_ON_CYAN: int # (31)

51

YELLOW_ON_CYAN: int # (32)

52

MAGENTA_ON_CYAN: int # (33)

53

GREEN_ON_CYAN: int # (34)

54

BLUE_ON_CYAN: int # (35)

55

56

# Yellow background colors

57

BLACK_ON_YELLOW: int # (36)

58

WHITE_ON_YELLOW: int # (37)

59

RED_ON_YELLOW: int # (38)

60

GREEN_ON_YELLOW: int # (39)

61

BLUE_ON_YELLOW: int # (40)

62

CYAN_ON_YELLOW: int # (41)

63

MAGENTA_ON_YELLOW: int # (42)

64

65

# Magenta background colors

66

BLACK_ON_MAGENTA: int # (43)

67

WHITE_ON_MAGENTA: int # (44)

68

RED_ON_MAGENTA: int # (45)

69

GREEN_ON_MAGENTA: int # (46)

70

BLUE_ON_MAGENTA: int # (47)

71

YELLOW_ON_MAGENTA: int # (48)

72

CYAN_ON_MAGENTA: int # (49)

73

74

# Blue background colors

75

BLACK_ON_BLUE: int # (50)

76

WHITE_ON_BLUE: int # (51)

77

RED_ON_BLUE: int # (52)

78

GREEN_ON_BLUE: int # (53)

79

YELLOW_ON_BLUE: int # (54)

80

CYAN_ON_BLUE: int # (55)

81

MAGENTA_ON_BLUE: int # (56)

82

```

83

84

Usage example:

85

```python

86

import py_cui

87

88

root = py_cui.PyCUI(3, 3)

89

90

# Create widgets with different color schemes

91

title = root.add_block_label('Success!', 0, 0, column_span=3)

92

title.set_standard_color(py_cui.GREEN_ON_BLACK)

93

94

warning_text = root.add_text_block('Warnings', 1, 0)

95

warning_text.set_standard_color(py_cui.YELLOW_ON_BLACK)

96

97

error_button = root.add_button('Error', 1, 1)

98

error_button.set_standard_color(py_cui.WHITE_ON_RED)

99

100

# Show different colored popups

101

def show_success():

102

root.show_message_popup('Success', 'Operation completed!', py_cui.GREEN_ON_BLACK)

103

104

def show_warning():

105

root.show_message_popup('Warning', 'Check your input.', py_cui.YELLOW_ON_BLACK)

106

107

def show_error():

108

root.show_message_popup('Error', 'Something went wrong!', py_cui.RED_ON_BLACK)

109

110

success_btn = root.add_button('Success', 2, 0, command=show_success)

111

warning_btn = root.add_button('Warning', 2, 1, command=show_warning)

112

error_btn = root.add_button('Error', 2, 2, command=show_error)

113

```

114

115

### Widget Color Configuration

116

117

Methods for setting colors on individual widgets including standard colors and border colors.

118

119

```python { .api }

120

# Widget color methods

121

def set_standard_color(color: int) -> None:

122

"""

123

Set the default color for this widget.

124

125

Parameters:

126

- color: Color pair constant

127

"""

128

129

def set_border_color(color: int) -> None:

130

"""

131

Set the border color for this widget.

132

133

Parameters:

134

- color: Color pair constant for widget borders

135

"""

136

```

137

138

Usage example:

139

```python

140

root = py_cui.PyCUI(3, 3)

141

142

# Create widgets with custom colors

143

menu = root.add_scroll_menu('Files', 0, 0)

144

menu.set_standard_color(py_cui.WHITE_ON_BLUE)

145

menu.set_border_color(py_cui.YELLOW_ON_BLACK)

146

147

text_output = root.add_text_block('Output', 0, 1, column_span=2)

148

text_output.set_standard_color(py_cui.GREEN_ON_BLACK)

149

text_output.set_border_color(py_cui.WHITE_ON_GREEN)

150

151

# Input box with error styling

152

error_input = root.add_text_box('Error Input', 1, 0)

153

error_input.set_standard_color(py_cui.WHITE_ON_RED)

154

error_input.set_border_color(py_cui.RED_ON_BLACK)

155

```

156

157

### Color Rules for Text Highlighting

158

159

System for applying color rules to text content based on patterns, enabling syntax highlighting and conditional formatting.

160

161

```python { .api }

162

def set_color_rule(regex: str, color: int, rule_type: str,

163

match_type: str = "line") -> None:

164

"""

165

Add a color rule for pattern-based text coloring.

166

167

Parameters:

168

- regex: Regular expression pattern to match

169

- color: Color pair to apply to matches

170

- rule_type: Type of color rule ("startswith", "endswith", "contains", "regex")

171

- match_type: What to color - "line" or "match" (default: "line")

172

"""

173

174

def clear_color_rules() -> None:

175

"""Remove all color rules from this widget."""

176

```

177

178

Usage example:

179

```python

180

import py_cui

181

182

root = py_cui.PyCUI(3, 3)

183

log_viewer = root.add_text_block('System Log', 0, 0, column_span=3, row_span=2)

184

185

# Set up color rules for log levels

186

log_viewer.set_color_rule('ERROR', py_cui.RED_ON_BLACK, 'contains', 'line')

187

log_viewer.set_color_rule('WARNING', py_cui.YELLOW_ON_BLACK, 'contains', 'line')

188

log_viewer.set_color_rule('INFO', py_cui.BLUE_ON_BLACK, 'contains', 'line')

189

log_viewer.set_color_rule('SUCCESS', py_cui.GREEN_ON_BLACK, 'contains', 'line')

190

191

# Add sample log content

192

log_content = """

193

2023-01-01 10:00:00 INFO Application started

194

2023-01-01 10:01:00 INFO Loading configuration

195

2023-01-01 10:02:00 WARNING Configuration file outdated

196

2023-01-01 10:03:00 ERROR Failed to connect to database

197

2023-01-01 10:04:00 SUCCESS Database connection restored

198

"""

199

log_viewer.set_text(log_content)

200

201

# Code syntax highlighting example

202

code_viewer = root.add_text_block('Code', 2, 0, column_span=3)

203

204

# Python syntax highlighting rules

205

code_viewer.set_color_rule(r'def \w+', py_cui.BLUE_ON_BLACK, 'regex', 'match')

206

code_viewer.set_color_rule(r'class \w+', py_cui.MAGENTA_ON_BLACK, 'regex', 'match')

207

code_viewer.set_color_rule(r'#.*', py_cui.GREEN_ON_BLACK, 'regex', 'match') # Comments

208

code_viewer.set_color_rule(r'".*?"', py_cui.YELLOW_ON_BLACK, 'regex', 'match') # Strings

209

210

code_content = '''

211

def hello_world():

212

"""A simple greeting function."""

213

# Print greeting message

214

print("Hello, World!")

215

216

class MyClass:

217

pass

218

'''

219

code_viewer.set_text(code_content)

220

```

221

222

### Border Customization

223

224

System for customizing widget border appearance with different character sets.

225

226

```python { .api }

227

def toggle_unicode_borders() -> None:

228

"""Toggle between Unicode and ASCII border characters for all widgets."""

229

230

def set_widget_border_characters(upper_left_corner: str, upper_right_corner: str,

231

lower_left_corner: str, lower_right_corner: str,

232

horizontal: str, vertical: str) -> None:

233

"""

234

Set custom border characters for all widgets.

235

236

Parameters:

237

- upper_left_corner: Character for upper left corner

238

- upper_right_corner: Character for upper right corner

239

- lower_left_corner: Character for lower left corner

240

- lower_right_corner: Character for lower right corner

241

- horizontal: Character for horizontal borders

242

- vertical: Character for vertical borders

243

"""

244

```

245

246

Usage example:

247

```python

248

root = py_cui.PyCUI(3, 3)

249

250

# Start with ASCII borders (default)

251

menu1 = root.add_scroll_menu('ASCII Borders', 0, 0)

252

253

# Switch to Unicode borders

254

root.toggle_unicode_borders()

255

menu2 = root.add_scroll_menu('Unicode Borders', 0, 1)

256

257

# Custom border style - double lines

258

root.set_widget_border_characters('╔', '╗', '╚', '╝', '═', '║')

259

menu3 = root.add_scroll_menu('Double Border', 0, 2)

260

261

# Custom border style - rounded corners

262

root.set_widget_border_characters('╭', '╮', '╰', '╯', '─', '│')

263

info_box = root.add_text_block('Rounded Border', 1, 0, column_span=3)

264

265

# Custom border style - thick borders

266

root.set_widget_border_characters('┏', '┓', '┗', '┛', '━', '┃')

267

button = root.add_button('Thick Border Button', 2, 1)

268

```

269

270

### Advanced Color Patterns

271

272

Examples of complex color schemes and theming patterns.

273

274

```python { .api }

275

# Advanced color usage patterns (examples)

276

```

277

278

Usage example:

279

```python

280

import py_cui

281

282

class ThemedApplication:

283

def __init__(self):

284

self.root = py_cui.PyCUI(4, 4)

285

self.current_theme = 'dark'

286

self.setup_widgets()

287

self.apply_theme(self.current_theme)

288

289

def setup_widgets(self):

290

# Header

291

self.header = self.root.add_block_label('Themed App', 0, 0, column_span=4)

292

293

# Navigation menu

294

self.nav_menu = self.root.add_scroll_menu('Navigation', 1, 0, row_span=2)

295

self.nav_menu.add_item_list(['Home', 'Settings', 'About', 'Exit'])

296

297

# Main content area

298

self.content = self.root.add_text_block('Content', 1, 1,

299

row_span=2, column_span=2)

300

301

# Status/info panel

302

self.status = self.root.add_text_box('Status', 1, 3, row_span=2)

303

304

# Control buttons

305

self.theme_btn = self.root.add_button('Switch Theme', 3, 0,

306

command=self.toggle_theme)

307

self.exit_btn = self.root.add_button('Exit', 3, 3,

308

command=self.root.stop)

309

310

def apply_theme(self, theme_name):

311

if theme_name == 'dark':

312

self.apply_dark_theme()

313

elif theme_name == 'light':

314

self.apply_light_theme()

315

elif theme_name == 'terminal':

316

self.apply_terminal_theme()

317

318

def apply_dark_theme(self):

319

# Dark theme colors

320

header_color = py_cui.WHITE_ON_BLUE

321

content_color = py_cui.WHITE_ON_BLACK

322

accent_color = py_cui.CYAN_ON_BLACK

323

324

self.header.set_standard_color(header_color)

325

self.nav_menu.set_standard_color(content_color)

326

self.nav_menu.set_border_color(accent_color)

327

self.content.set_standard_color(content_color)

328

self.status.set_standard_color(py_cui.YELLOW_ON_BLACK)

329

330

# Set color rules for content

331

self.content.clear_color_rules()

332

self.content.set_color_rule('TODO', py_cui.YELLOW_ON_BLACK, 'contains')

333

self.content.set_color_rule('DONE', py_cui.GREEN_ON_BLACK, 'contains')

334

self.content.set_color_rule('ERROR', py_cui.RED_ON_BLACK, 'contains')

335

336

self.root.set_title('Themed App - Dark Mode')

337

338

def apply_light_theme(self):

339

# Light theme colors

340

header_color = py_cui.BLACK_ON_WHITE

341

content_color = py_cui.BLACK_ON_WHITE

342

accent_color = py_cui.BLACK_ON_CYAN

343

344

self.header.set_standard_color(header_color)

345

self.nav_menu.set_standard_color(content_color)

346

self.nav_menu.set_border_color(accent_color)

347

self.content.set_standard_color(content_color)

348

self.status.set_standard_color(py_cui.BLACK_ON_YELLOW)

349

350

self.root.set_title('Themed App - Light Mode')

351

352

def apply_terminal_theme(self):

353

# Retro terminal theme

354

header_color = py_cui.BLACK_ON_GREEN

355

content_color = py_cui.GREEN_ON_BLACK

356

accent_color = py_cui.WHITE_ON_GREEN

357

358

self.header.set_standard_color(header_color)

359

self.nav_menu.set_standard_color(content_color)

360

self.nav_menu.set_border_color(accent_color)

361

self.content.set_standard_color(content_color)

362

self.status.set_standard_color(content_color)

363

364

# Terminal-style borders

365

self.root.set_widget_border_characters('+', '+', '+', '+', '-', '|')

366

367

self.root.set_title('Themed App - Terminal Mode')

368

369

def toggle_theme(self):

370

themes = ['dark', 'light', 'terminal']

371

current_index = themes.index(self.current_theme)

372

next_index = (current_index + 1) % len(themes)

373

self.current_theme = themes[next_index]

374

self.apply_theme(self.current_theme)

375

376

self.status.set_text(f'Theme: {self.current_theme}')

377

378

def run(self):

379

self.content.set_text('Welcome to the themed application!\n\nThis demonstrates various color schemes and styling options.')

380

self.status.set_text(f'Theme: {self.current_theme}')

381

self.root.start()

382

383

# Usage

384

app = ThemedApplication()

385

app.run()

386

```