Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton Icon GroupButton ResizeButton SortCardCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleRadioRangeRatingSearchSelectSwitchTabsTagTextareaTimeToastTooltipData GridGetting StartedFooterPlaceholderAsyncResponsiveScroll HeightPaginationBordersHoverColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

Design tokens enable easy theming for all BlueprintUI components. The base theme and additional built in themes are defined in the @blueprintui/themes package. BlueprintUI Themes can be used standalone of other BlueprintUI components and utilities.

Installation

npm install @blueprintui/themes
@import '@blueprintui/themes/index.min.css'; // light
@import '@blueprintui/themes/dark/index.min.css'; // dark
@import '@blueprintui/themes/modern/index.min.css'; // modern
@import '@blueprintui/themes/modern-dark/index.min.css'; // modern-dark
@import '@blueprintui/themes/compact/index.min.css'; // compact

To enable the tokens and addon themes add the bp-theme attribute to the root HTML element.

<html bp-theme="">

Color

TokenValueExample--bp-color-schemenormal--bp-color-blackhsl(0, 0%, 0%)--bp-color-whitehsl(0, 0%, 100%)--bp-color-yellow-100hsl(56, 86%, 90%)--bp-color-yellow-200hsl(56, 86%, 80%)--bp-color-yellow-300hsl(56, 86%, 70%)--bp-color-yellow-400hsl(56, 86%, 60%)--bp-color-yellow-500hsl(56, 86%, 50%)--bp-color-yellow-600hsl(56, 86%, 40%)--bp-color-yellow-700hsl(56, 86%, 30%)--bp-color-yellow-800hsl(56, 86%, 20%)--bp-color-yellow-900hsl(56, 86%, 10%)--bp-color-yellow-1000hsl(56, 86%, 5%)--bp-color-violet-100hsl(300, 76%, 90%)--bp-color-violet-200hsl(300, 76%, 80%)--bp-color-violet-300hsl(300, 76%, 70%)--bp-color-violet-400hsl(300, 76%, 60%)--bp-color-violet-500hsl(300, 76%, 50%)--bp-color-violet-600hsl(300, 76%, 40%)--bp-color-violet-700hsl(300, 76%, 30%)--bp-color-violet-800hsl(300, 76%, 20%)--bp-color-violet-900hsl(300, 76%, 10%)--bp-color-violet-1000hsl(300, 76%, 5%)--bp-color-blue-100hsl(240, 100%, 90%)--bp-color-blue-200hsl(240, 100%, 80%)--bp-color-blue-300hsl(240, 100%, 70%)--bp-color-blue-400hsl(240, 100%, 60%)--bp-color-blue-500hsl(240, 100%, 50%)--bp-color-blue-600hsl(240, 100%, 40%)--bp-color-blue-700hsl(240, 100%, 30%)--bp-color-blue-800hsl(240, 100%, 20%)--bp-color-blue-900hsl(240, 100%, 10%)--bp-color-blue-1000hsl(240, 100%, 5%)--bp-color-green-100hsl(120, 100%, 90%)--bp-color-green-200hsl(120, 100%, 80%)--bp-color-green-300hsl(120, 100%, 70%)--bp-color-green-400hsl(120, 100%, 60%)--bp-color-green-500hsl(120, 100%, 50%)--bp-color-green-600hsl(120, 100%, 40%)--bp-color-green-700hsl(120, 100%, 30%)--bp-color-green-800hsl(120, 100%, 20%)--bp-color-green-900hsl(120, 100%, 10%)--bp-color-green-1000hsl(120, 100%, 5%)--bp-color-red-100hsl(0, 100%, 90%)--bp-color-red-200hsl(0, 100%, 80%)--bp-color-red-300hsl(0, 100%, 70%)--bp-color-red-400hsl(0, 100%, 60%)--bp-color-red-500hsl(0, 100%, 50%)--bp-color-red-600hsl(0, 100%, 40%)--bp-color-red-700hsl(0, 100%, 30%)--bp-color-red-800hsl(0, 100%, 20%)--bp-color-red-900hsl(0, 100%, 10%)--bp-color-red-1000hsl(0, 100%, 5%)--bp-color-gray-100hsl(0, 0%, 95%)--bp-color-gray-200hsl(0, 0%, 90%)--bp-color-gray-300hsl(0, 0%, 80%)--bp-color-gray-400hsl(0, 0%, 70%)--bp-color-gray-500hsl(0, 0%, 60%)--bp-color-gray-600hsl(0, 0%, 50%)--bp-color-gray-700hsl(0, 0%, 40%)--bp-color-gray-800hsl(0, 0%, 30%)--bp-color-gray-900hsl(0, 0%, 20%)--bp-color-gray-1000hsl(0, 0%, 10%)

Status

TokenValueExample--bp-status-accent-background-100hsl(240, 100%, 80%)--bp-status-accent-background-200hsl(240, 100%, 40%)--bp-status-accent-background-300hsl(240, 100%, 30%)--bp-status-accent-color-100hsl(0, 0%, 100%)--bp-status-success-background-100hsl(120, 100%, 80%)--bp-status-success-background-200hsl(120, 100%, 40%)--bp-status-success-background-300hsl(120, 100%, 30%)--bp-status-success-color-100hsl(0, 0%, 100%)--bp-status-warning-background-100hsl(56, 86%, 80%)--bp-status-warning-background-200hsl(56, 86%, 50%)--bp-status-warning-background-300hsl(56, 86%, 40%)--bp-status-warning-color-100hsl(0, 0%, 0%)--bp-status-danger-background-100hsl(0, 100%, 80%)--bp-status-danger-background-200hsl(0, 100%, 40%)--bp-status-danger-background-300hsl(0, 100%, 30%)--bp-status-danger-color-100hsl(0, 0%, 100%)--bp-status-neutral-background-100hsl(0, 0%, 90%)--bp-status-neutral-background-200hsl(0, 0%, 40%)--bp-status-neutral-background-300hsl(0, 0%, 30%)--bp-status-neutral-color-100hsl(0, 0%, 100%)--bp-status-disabled-background-100hsl(0, 0%, 80%)--bp-status-disabled-background-200hsl(0, 0%, 70%)--bp-status-disabled-background-300hsl(0, 0%, 60%)--bp-status-disabled-color-100GrayText

Object

TokenValueExample--bp-object-border-radius-1002px--bp-object-border-radius-20024px--bp-object-border-radius-30050%--bp-object-border-width-1001px--bp-object-border-width-2002px--bp-object-border-width-3004px--bp-object-border-color-100ButtonBorder--bp-object-border-color-200ButtonBorder--bp-object-border-color-300ButtonBorder--bp-object-shadow-1000 2px 2px hsla(0, 0%, 0%, 0.2)--bp-object-shadow-2000 3px 4px hsla(0, 0%, 0%, 0.2)--bp-object-shadow-3000 4px 6px hsla(0, 0%, 0%, 0.2)--bp-object-opacity-100hsla(0, 0%, 0%, 0)--bp-object-opacity-200hsla(0, 0%, 0%, 0.1)--bp-object-opacity-300hsla(0, 0%, 0%, 0.4)--bp-object-opacity-400hsla(0, 0%, 0%, 0.6)

Layer

TokenValueExample--bp-layer-canvas-backgroundCanvas--bp-layer-container-backgroundhsl(0, 0%, 95%)--bp-layer-field-colorFieldText--bp-layer-field-background-100Field--bp-layer-field-background-200Field--bp-layer-header-backgroundhsl(0, 0%, 95%)--bp-layer-header-colorCanvasText--bp-layer-popover-backgroundhsl(0, 0%, 100%)--bp-layer-popover-colorhsl(0, 0%, 0%)--bp-layer-popover-backdrop-backgroundhsla(0, 0%, 0%, 0.6)

Interaction

TokenValueExample--bp-interaction-outlineHighlight solid 2pxHighlight solid 2px--bp-interaction-outline-webkit5px auto -webkit-focus-ring-color5px auto -webkit-focus-ring-color--bp-interaction-outline-offset2px2px--bp-interaction-touch-target36px36px--bp-interaction-highlight-backgroundHighlight--bp-interaction-accent-backgroundhsl(240, 100%, 40%)--bp-interaction-default-offset0%0%--bp-interaction-default-colorButtonText--bp-interaction-hover-offset5%5%--bp-interaction-hover-colorButtonText--bp-interaction-focused-offset0%0%--bp-interaction-focused-colorButtonText--bp-interaction-active-offset7%7%--bp-interaction-active-colorActiveText--bp-interaction-selected-offset5%5%--bp-interaction-selected-colorButtonText--bp-interaction-disabled-offset10%10%--bp-interaction-disabled-colorGrayText

Scale

TokenValueExample--bp-scale-size11--bp-scale-space11--bp-scale-text11

Text

TokenValueExample--bp-text-color-100hsl(0, 0%, 100%)--bp-text-color-200hsl(0, 0%, 95%)--bp-text-color-300hsl(0, 0%, 70%)--bp-text-color-400hsl(0, 0%, 40%)--bp-text-color-500hsl(0, 0%, 30%)--bp-text-color-600hsl(0, 0%, 0%)--bp-text-weight-light300

300

--bp-text-weight-regular400

400

--bp-text-weight-medium500

500

--bp-text-weight-semibold500

500

--bp-text-weight-bold600

600

--bp-text-weight-extrabold600

600

--bp-text-size-10012px

12px

--bp-text-size-20014px

14px

--bp-text-size-30016px

16px

--bp-text-size-40020px

20px

--bp-text-size-50024px

24px

--bp-text-size-60032px

32px

--bp-text-size-70036px

36px

--bp-text-size-80048px

48px

--bp-text-font'system-ui', 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif'system-ui', 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif--bp-text-headerFont'system-ui', 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif'system-ui', 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif--bp-text-monospaceFont'ui-monospace', Consolas, Menlo, Monaco, monospace

Layout

TokenValueExample--bp-layout-grid-cols1212--bp-layout-width-xs576px576px--bp-layout-width-sm768px768px--bp-layout-width-md1024px1024px--bp-layout-width-lg1200px1200px--bp-layout-width-xl1440px1440px

Size

TokenValueExample--bp-size-00px--bp-size-11px--bp-size-22px--bp-size-34px--bp-size-48px--bp-size-512px--bp-size-616px--bp-size-724px--bp-size-832px--bp-size-948px--bp-size-1064px--bp-size-1172px--bp-size-1296px

Space

TokenValueExample--bp-space-xs8px--bp-space-sm16px--bp-space-md24px--bp-space-lg48px--bp-space-xl64px