Styling

How the devkit's CSS is organised, and where the full token list lives.

Package

@tetherto/mdk-react-devkit

Two stylesheets

The devkit ships its CSS in two files, because most apps need only the first:

import '@tetherto/mdk-react-devkit/styles.css'
import '@tetherto/mdk-react-devkit/styles-domain.css'

styles.css carries the design tokens and the styles for the generic primitives: buttons, forms, dialogs, layout. styles-domain.css carries the mining-domain components: the cards, charts, dashboard, settings, tables and widgets categories. Import it only if you use those, and always after the core styles, which define the tokens it references.

Design tokens

Every token is a CSS custom property named --mdk-*, declared on :root. They range from the broad (--mdk-color-primary, --mdk-radius) to the per-component (--mdk-button-danger-bg, --mdk-breadcrumbs-link-hover-color). Override them in your own stylesheet, loaded after the devkit's.

The authoritative list is the source file, which is long and changes with the components:

• _colors.scss lists every token and its default
• _mixins.scss holds the shared SCSS mixins

Both are published as subpath exports, so a SCSS build can consume them directly: @tetherto/mdk-react-devkit/tokens.scss and @tetherto/mdk-react-devkit/styles.

Class names and layers

Components use BEM-style class names (.mdk-button, .mdk-card__header), and the devkit's rules sit in an @layer mdk so your own @layer app always wins without specificity fights. Install and wire the React packages walks through a worked override.

For how the stylesheets are built and what each subpath exports, see the devkit's README.