CSS Variables

Most defaults are declared on :root. The built-in themes other than basic set their own values on the modal through its data-theme attribute, which overrides :root. A value you set on .tp-ui-wrapper applies inside the panel with any theme.

1/* Every picker */
2.tp-ui-wrapper {
3  --tp-primary: #0b57d0;
4}
5
6/* One picker, created with ui: { cssClass: 'my-picker' } */
7.tp-ui-wrapper.my-picker {
8  --tp-primary: #b3261e;
9  --tp-border-radius: 8px;
10}

1import { TimepickerUI } from 'timepicker-ui';
2import 'timepicker-ui/main.css';
3
4const picker = new TimepickerUI('#time', {
5  ui: { cssClass: 'my-picker' },
6});
7picker.create();

A variable reaches only the element you set it on and the elements inside it. .tp-ui-wrapper sits inside .tp-ui-modal. When Used by lists .tp-ui-modal, a rule may read the variable on the modal itself, where a value on the wrapper does not reach. Set those variables on .tp-ui-modal or :root.

CSS Classes shows which element each class belongs to. Custom Styling has complete themes and covers the focus ring and the ripple.

Default is the value in main.css, which the basic theme uses. Hex, rgb() and hsl() values have a color swatch. Used by lists the classes named in the rules that read the variable. Other entries in these two columns:

A class, such as .tp-ui-hour

A rule that names this class reads the variable. A row shows three entries and puts the rest under "more".

An attribute in brackets

A rule that matches the attribute, not a class, reads the variable. [data-md3-ripple] is on the controls that have the ripple and state layer.

Set by the library at runtime

The picker writes the value as an inline style while it is open, which replaces a value from your stylesheet. You can still read it in your own CSS.

Not read by the library

The stylesheet declares it, but no rule reads it and the picker does not set it. Changing it has no visible effect in this version.

Fallback

The stylesheet does not declare the variable. The value shown is the fallback written in the var() that reads it, and it applies until you set the variable.

Not set

The stylesheet gives the variable no value.