The themes package defines collections of symbols that are used to draw lines, blocks, tables, charts, etc.

Theme definition

The theme structure is defined as follows:

• t — the top row of a table consisting of three symbols: the top-left symbol, the top-middle symbol, and the top-right symbol.
• m — the middle row of a table consisting of three symbols: the middle-left symbol, the middle-middle symbol, and the middle-right symbol.
• b — the bottom row of a table consisting of three symbols: the bottom-left symbol, the bottom-middle symbol, and the bottom-right symbol.
• v — the vertical separators consisting of three symbols: the left vertical separator, the internal vertical separator, and the right vertical separator.
• h — the horizontal separators consisting of three symbols: the top horizontal separator, the internal horizontal separator, and the bottom horizontal separator.
• w — the width of a symbol. The default value is 1.
• f — the fill symbol. The default value is a space ( ). It is used to fill the interior of a box by box drawing functions.

t, m, b, and v should have the same width (w) for each symbol. h should have three symbols of length 1.

The same theme object can define several sub-themes with different names. Usually the default theme is named 1 and it is drawn with a single line symbols. Some themes may define the sub-theme called 2, which is drawn with double line symbols. Sometimes these themes can be combined, e.g., horizontal lines are drawn with 2, while vertical lines with 1. What sub-themes are defined and valid combinations depends on the theme definition.

Example (from themes/lines/ascii.js):

import {populateTheme} from 'console-toolkit/themes/utils.js';

export const theme = {};

const table11 = {t: '+++', m: '+++', b: '+++', v: '|||', h: '---'},
  table21 = {t: '+++', m: '+++', b: '+++', v: '|||', h: '==='};

populateTheme(theme, table11, 1, 1); // can draw 1 and 1 together
populateTheme(theme, table21, 2, 1); // can draw 2 and 1 together

// It will produce the following box:

// +-------+
// |       |
// |       |
// |       |
// +-------+

// It will produce the following table:

// +---+---+
// |   |   |
// +---+---+
// |   |   |
// +---+---+

// The "double" version will use double horizontal lines:

// +===+===+
// |   |   |
// +===+===+
// |   |   |
// +===+===+

Line themes

All themes export their theme object as the default export.

All examples below were generated using scripts/table-theme.js.

Unicode

themes/lines/unicode.js

h: 1 - v: 1  h: 2 - v: 1  h: 1 - v: 2  h: 2 - v: 2
┌────┬────┐  ╓────╥────╖  ╒════╤════╕  ╔════╦════╗
│ lt │ rt │  ║ lt ║ rt ║  │ lt │ rt │  ║ lt ║ rt ║
├────┼────┤  ╟────╫────╢  ╞════╪════╡  ╠════╬════╣
│ lb │ rb │  ║ lb ║ rb ║  │ lb │ rb │  ║ lb ║ rb ║
└────┴────┘  ╙────╨────╜  ╘════╧════╛  ╚════╩════╝

themes/lines/unicode-bold.js

h: 1 - v: 1  h: 2 - v: 1  h: 1 - v: 2  h: 2 - v: 2
┌────┬────┐  ┎────┰────┒  ┍━━━━┯━━━━┑  ┏━━━━┳━━━━┓
│ lt │ rt │  ┃ lt ┃ rt ┃  │ lt │ rt │  ┃ lt ┃ rt ┃
├────┼────┤  ┠────╂────┨  ┝━━━━┿━━━━┥  ┣━━━━╋━━━━┫
│ lb │ rb │  ┃ lb ┃ rb ┃  │ lb │ rb │  ┃ lb ┃ rb ┃
└────┴────┘  ┖────┸────┚  ┕━━━━┷━━━━┙  ┗━━━━┻━━━━┛

themes/lines/unicode-rounded.js

h: 1 - v: 1  h: 2 - v: 1  h: 1 - v: 2  h: 2 - v: 2
╭────┬────╮  ╓────╥────╖  ╒════╤════╕  ╔════╦════╗
│ lt │ rt │  ║ lt ║ rt ║  │ lt │ rt │  ║ lt ║ rt ║
├────┼────┤  ╟────╫────╢  ╞════╪════╡  ╠════╬════╣
│ lb │ rb │  ║ lb ║ rb ║  │ lb │ rb │  ║ lb ║ rb ║
╰────┴────╯  ╙────╨────╜  ╘════╧════╛  ╚════╩════╝

ASCII

themes/lines/ascii.js

h: 1 - v: 1  h: 1 - v: 2
+----+----+  +====+====+
| lt | rt |  | lt | rt |
+----+----+  +====+====+
| lb | rb |  | lb | rb |
+----+----+  +====+====+

themes/lines/ascii-compact.js

h: 1 - v: 1  h: 1 - v: 2
 ---- ----    ==== ====
  lt   rt      lt   rt
 ---- ----    ==== ====
  lb   rb      lb   rb
 ---- ----    ==== ====

themes/lines/ascii-dots.js

h: 1 - v: 1
...........
: lt : rt :
.....:.....
: lb : rb :
:....:....:

themes/lines/ascii-girder.js

h: 1 - v: 1
//====[]====\\
|| lt || rt ||
|]====[]====[|
|| lb || rb ||
\\====[]====//

themes/lines/ascii-github.js

h: 1 - v: 1  h: 1 - v: 2
|----|----|  |====|====|
| lt | rt |  | lt | rt |
|----|----|  |====|====|
| lb | rb |  | lb | rb |
|----|----|  |====|====|

themes/lines/ascii-reddit.js

h: 1 - v: 1  h: 1 - v: 2
 ----|----    ====|====
  lt | rt      lt | rt
 ----|----    ====|====
  lb | rb      lb | rb
 ----|----    ====|====

themes/lines/ascii-rounded.js

h: 1 - v: 1  h: 1 - v: 2
.----.----.  .====.====.
| lt | rt |  | lt | rt |
:----+----:  :====+====:
| lb | rb |  | lb | rb |
'----'----'  '===='===='

Block themes

Block themes are similar to line themes but design to generate a block. Usually they have a rectangular frame and filled with a full block symbol (not shown in examples).

Unicode

themes/blocks/unicode-half.js

h: 1 - v: 1
▗▄▄▄▄▄▄▄▄▄▖
▐ lt   rt ▌
▐         ▌
▐ lb   rb ▌
▝▀▀▀▀▀▀▀▀▀▘

themes/blocks/unicode-thin.js

h: 1 - v: 1
 ▁▁▁▁▁▁▁▁▁
▕ lt   rt ▏
▕         ▏
▕ lb   rb ▏
 ▔▔▔▔▔▔▔▔▔

themes/utils.js

The utilities are used to generate a theme object from a theme definition.

Function populateTheme()

This function is used to define custom themes for lines, blocks, tables, etc.

populateTheme(lineTheme, tableDefinition, hTheme, vTheme) populates lineTheme with the theme definition for given hTheme and vTheme.

hTheme is a sub-theme id used for the horizontal axis to define vertical lines. vTheme is the same but for the vertical axis.

tableDefinition is an object with the properties defined in the beginning of the document: t, m, b, v, h, w and f.

lineTheme is an object that will be populated with the theme definition.

See any theme file to learn more about defining a theme.

Exports

populateTheme() is exported by name. The module has no default export.