Skip to main content

Module theme

Module theme 

Source
Expand description

Design tokens shared by the neuro-kitchen apps, and their application to gpui-kit’s theme, so every gpui-kit component (buttons, menus, inputs, tooltips) and the apps’ own layout use one set of values.

  • Spacing on the 8 px grid with a 4 px half-step: XS 4, SM 8, MD 12, LG 16, XL 24, XXL 32 (designparser 8pt-grid, 4pt-system).
  • Type: base FONT_SIZE 15 px, so gpui’s text_xs ≈ 11 (captions), text_sm ≈ 13 (body), text_base 15 (titles), text_lg ≈ 17 (headings); weights 400 and 600 only. The sizes are relative to the base, so a larger base in Settings scales every one of them.
  • Radii by tier: RADIUS_SM 4 (chips, swatches), RADIUS 6 (controls), RADIUS_LG 8 (sections, panes, dialogs) (designparser corner-radius-tone: neutral, one per tier).
  • Panes are rounded cards PANE_GAP apart on the chrome, with PANE_PADDING inside (padding ≥ 1.5 × gap: designparser padding-gap-ratio).
  • Neutrals are shared plain greys (color); the accent is the app’s (Palette) unless the user picked another colour (Look::accent, any Rgb: made to pass contrast).

The look (dark or light, palette, accent, text size) is process-wide: set it with set_look, then apply hands it to gpui-kit and redraws every window.

Re-exports§

pub use color::Colors;
pub use color::colors;
pub use color::contrast;
pub use color::mix;
pub use color::rgb8;
pub use color::rgb_hsla;
pub use palette::Accent;
pub use palette::Palette;
pub use palette::Rgb;

Modules§

color
The colours: shared neutrals (plain greys: surfaces from the deepest, text, borders), status colours and the accent (super::Look::active_palette), resolved for the current look.
palette
Accent colours. The neutrals are shared (super::color); each app supplies a default Palette (dsp-kitchen Palette::LIME, lumen Palette::EOSIN), and the user may pick any colour instead (Rgb, stored in the app’s preferences): Palette::from_rgb turns it into light and dark accents that pass WCAG contrast.

Structs§

Look
What the user chose: dark or light, an accent of their own or the app’s, the base text size.

Constants§

CONTROL_MIN_W
Narrowest a row’s control gets before it drops under its label (px).
FONT_RANGE
Smallest and largest base text size Settings may choose (px).
FONT_SIZE
Base text size (px) by default.
LABEL_W
Width of a row’s label (crate::widgets::row) (px).
LG
Spacing: padding of panels (px).
MD
Spacing: padding inside sections and boxes (px).
PANE_GAP
Gap between panes on the chrome (px).
PANE_PADDING
Padding inside a pane (px).
RADIUS
Corner radius of controls: buttons, inputs, menus (px).
RADIUS_LG
Corner radius of large things: boxed sections, panes, dialogs (px).
RADIUS_SM
Corner radius of small things: chips, swatches, scrub labels (px).
SM
Spacing: the base unit; gaps between controls and rows (px).
TARGET_MIN
Smallest pointer target (px): WCAG 2.2 AA (designparser touch-target).
XL
Spacing: between groups (px).
XS
Spacing: a hairline step, icon gaps (px).
XXL
Spacing: around page-level blocks (px).

Functions§

apply
Applies the current look (set_look) and the tokens to gpui-kit’s theme, and redraws every window.
is_dark
Whether the current look is dark.
look
The current look.
set_look
Sets the look every colour reads. apply then hands it to gpui-kit.
sp
px of a token.
system_dark
Whether the system shows window dark (for a theme that follows the system).
use_look
Sets the look and applies it (set_look, then apply).