Classes

Classes holds Blueprint's CSS class names as constants. Use them to style your own elements like Blueprint components.

Usage#

import { Classes } from "@clawscale/react";

In React Server Components, import it from @clawscale/react/common. The values are the same.

import { Classes } from "@clawscale/react/common";

@clawscale/react marks its exports "use client". A server component gets Classes from there as a client reference and cannot read its fields.

Namespace#

Every Blueprint class starts with bp6-, for Blueprint 6. Classes.DARK is "bp6-dark". Use the constants, not the strings: the prefix changes with each major version of Blueprint.

Prefer props where a component has them. Write <Button intent="primary" />, not className={Classes.INTENT_PRIMARY}.

Modifiers#

Constant	Class	Effect
`Classes.DARK`	`bp6-dark`	Switches a subtree to the dark color scheme
`Classes.ELEVATION_1` to `Classes.ELEVATION_4`	`bp6-elevation-1` to `bp6-elevation-4`	Adds a shadow, from `--cs-shadow-1` to `--cs-shadow-4`
`Classes.TEXT_MUTED`	`bp6-text-muted`	Sets the muted text color
`Classes.SKELETON`	`bp6-skeleton`	Replaces content with a loading placeholder
`Classes.RUNNING_TEXT`	`bp6-running-text`	Styles nested headings, lists, code and quotes for long-form text
`Classes.FILL`	`bp6-fill`	Stretches buttons, inputs, selects and groups to fill their container

Example#

Blueprint's styles apply to any element with the right classes. Both cards below are plain div elements.

orders-daily

Finished 6 min ago in eu-west-1

1,284,093 rows exported

orders-hourly

Finished 2 min ago in eu-west-1

84,120 rows exported

core/classes/modifiers.tsx

import { Classes } from "@clawscale/react";

const card = { display: "grid", gap: 6, width: 300 };

export default function ClassesModifiers() {
  return (
    <>
      <div className={`${Classes.CARD} ${Classes.ELEVATION_2}`} style={card}>
        <h5 className={Classes.HEADING}>orders-daily</h5>
        <div className={Classes.TEXT_MUTED}>Finished 6 min ago in eu-west-1</div>
        <div>1,284,093 rows exported</div>
      </div>
      <div className={`${Classes.CARD} ${Classes.ELEVATION_2}`} style={card}>
        <h5 className={`${Classes.HEADING} ${Classes.SKELETON}`}>orders-hourly</h5>
        <div className={Classes.SKELETON}>Finished 2 min ago in eu-west-1</div>
        <div className={Classes.SKELETON}>84,120 rows exported</div>
      </div>
    </>
  );
}

Clawscale classes#

ClawscaleClasses holds the cs- classes of Clawscale. Import it from @clawscale/react, or from @clawscale/react/common in server components.

Constant	Class	Effect
`ClawscaleClasses.NUMERIC`	`cs-numeric`	Tabular numbers, so digits line up in columns
`ClawscaleClasses.MONOSPACE`	`cs-monospace`	Monospace font for ids, hashes and paths

The other constants name the parts of Clawscale patterns, such as ClawscaleClasses.METRIC_VALUE for cs-metric-value. Use them to target those parts in your CSS.