Style

Tweak UI has a precompiled stylesheet. The components are styled with component classes in the style of daisyUI, e.g. twk-btn twk-btn-ghost. The classes are built from tailwindcss utilities. The application does not need tailwind.

import 'tweak-ui/style.css'

Root

A panel is in an element with the class tweak-ui. mount adds the class to the host element. The class sets the background, the font and the colors. It resets the native styles of inputs, buttons and selects in the panel.

The classes twk-dark and twk-light select the built-in dark and light themes. For colors and sizes, see Theme.

Isolation

The stylesheet does not change the styles of the application:

• All classes and theme variables have a prefix, e.g. twk-btn, twk:flex and --twk-color-accent.
• There is no global reset. The base styles apply only in .tweak-ui.
• There are no cascade layers. Thus the base styles override element selectors of the application, e.g. button { ... }.
• The components use no table elements. Applications often style table elements globally.

Component classes

The class names follow daisyUI, with the prefix twk-: twk-<component> for the root element, twk-<component>-<part> for its parts and twk-<component>-<modifier> for a variant. The components set these classes. Use them as selectors, or on elements of your own, e.g. a native checkbox with twk-checkbox.

Component	Classes
Widget row	twk-widget, twk-widget-label, twk-widget-content, and one per control, e.g. twk-scalar-widget
Group	twk-group (-flush), twk-group-title, twk-group-chevron, twk-group-content
Button	twk-btn, modifiers twk-btn-accent, twk-btn-ghost, twk-btn-square, twk-btn-block, twk-btn-lg. twk-join joins buttons
Badge	twk-badge, colors twk-badge-accent, -info, -success, -warning, -error, styles twk-badge-outline, twk-badge-soft
Alert	twk-alert (-icon, -content), colors twk-alert-info, -success, -warning, -error, style twk-alert-soft
Input	twk-input: the box of an input, twk-input-hint: a muted part, e.g. a unit. twk-checkbox, twk-toggle, twk-select
Inputs	twk-scalar-input, twk-text-input, twk-bool-input, twk-select-input, twk-vector-input, twk-matrix-input, twk-angle-input, twk-point-input, twk-spherical-input, twk-bitmask-input
Color	twk-color-input, twk-color-swatch, twk-color-popover, twk-color-picker, twk-color-area, twk-color-slider, twk-color-modes, twk-color-fields
Layout	twk-bar (-start, -content, -end), twk-section (-header, -content, -footer), twk-split (-row, -pane, -gutter)
Toolbar	twk-toolbar, twk-statusbar
Tabs	twk-tabs, twk-tabs-vertical, twk-tabs-list, twk-tab, twk-tab-content
Tree	twk-tree, twk-tree-row, twk-tree-toggle, twk-tree-icon, twk-tree-label
Others	twk-divider (-vertical), twk-chevron (-right, -up), twk-icon, twk-dialog, twk-image, twk-poll, twk-graph

Data attributes show the state:

Attribute	Element
data-readonly	a read-only input
data-dragging	a scalar, point or spherical input, or a split, during a drag
data-collapsible, data-collapsed	a group
data-state="enter" / "leave"	the content of a group during its animation
data-active	a pressed button, the active tab, an active bit of a bitmask, the active color mode
data-empty	a divider without content
data-selected	the selected row of a tree
data-checked	a checked bool input

.my-panel .twk-group-title {
  text-transform: none;
}

.my-panel .twk-scalar-input[data-dragging] {
  outline: 1px dashed currentColor;
}

Utilities

The stylesheet has a set of tailwind utilities with the prefix twk:. Use them for your own content in a panel. They override the component classes.

Utility	Classes
Background	twk:bg-base-100, twk:bg-base-200, twk:bg-base-300, twk:bg-neutral, twk:bg-accent, twk:bg-transparent
Text	twk:text-base-content, twk:text-neutral-content, twk:text-accent, twk:text-accent-content, twk:text-muted
Padding	twk:p-*, twk:px-*, twk:py-*, twk:pt-*, twk:pr-*, twk:pb-*, twk:pl-*
Margin	twk:m-*, twk:mx-*, twk:my-*, twk:mt-*, twk:mr-*, twk:mb-*, twk:ml-*, and twk:m-auto, twk:mx-auto, twk:my-auto
Gap	twk:gap-*, twk:gap-x-*, twk:gap-y-*
Flex container	twk:flex, twk:inline-flex, twk:flex-row, twk:flex-col, twk:flex-wrap, twk:flex-nowrap
Flex item	twk:flex-1, twk:flex-auto, twk:flex-initial, twk:flex-none, twk:grow, twk:grow-0, twk:shrink, twk:shrink-0, twk:min-w-0
Alignment	twk:items-{start,center,end,stretch,baseline}, twk:justify-{start,center,end,between,around,evenly}, twk:self-{auto,start,center,end,stretch}

The spacing values are 0, sm, md and lg: 0.5, 1 and 1.5 times --twk-spacing. twk:text-muted is the text color at half opacity, e.g. for hints and units.

The stylesheet is precompiled: only these utilities are guaranteed, other twk: classes may be missing.

uiButton({ class: 'twk:px-lg twk:bg-base-300' }, 'Wide')
el('div', { class: 'twk:flex twk:items-center twk:gap-sm twk:p-md twk:text-muted' }, 'Note')

Background patterns

The classes twk-bg-checker, twk-bg-grid, twk-bg-grid-axis, twk-bg-dots and twk-bg-stripes set a background pattern. See Background.

Example

This panel uses components without the builder. Only the stylesheet styles it.

Contributing

• Style components with component classes. Each component has a stylesheet in src/styles/components/. Build the classes from twk: utilities with @apply:

  .twk-btn {
    @apply twk:inline-flex twk:min-h-field twk:items-center twk:rounded-field;
  
    &[data-active] {
      @apply twk:bg-base-100 twk:text-accent;
    }
  }
  
  .twk-btn-ghost {
    --twk-btn-bg: transparent;
  }

• Toggle a modifier class in the component, e.g. classList: () => ({ 'twk-btn-ghost': !!props.ghost }).

• Set a state as a data attribute, e.g. data-active, and select it in the stylesheet.

• A modifier comes after its component in the stylesheet, so it overrides the component. The component stylesheets come before the utilities, so a twk: utility in the class of a component overrides them.

• src/styles/index.css has the theme tokens. src/styles/base.css has the base styles. src/styles/utilities.css lists the public utilities.