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/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-blackhsl(0, 0%, 0%)--bp-color-blue-100oklch(from var(--bp-color-blue-0) 0.95 0.05 h)--bp-color-blue-1000oklch(from var(--bp-color-blue-0) 0.1 c h)--bp-color-blue-200oklch(from var(--bp-color-blue-0) 0.9 0.1 h)--bp-color-blue-300oklch(from var(--bp-color-blue-0) 0.8 0.15 h)--bp-color-blue-400oklch(from var(--bp-color-blue-0) 0.7 c h)--bp-color-blue-500oklch(from var(--bp-color-blue-0) 0.6 c h)--bp-color-blue-600oklch(from var(--bp-color-blue-0) 0.5 c h)--bp-color-blue-700oklch(from var(--bp-color-blue-0) 0.4 c h)--bp-color-blue-800oklch(from var(--bp-color-blue-0) 0.3 c h)--bp-color-blue-900oklch(from var(--bp-color-blue-0) 0.2 c h)--bp-color-gray-100oklch(from var(--bp-color-gray-0) 0.95 0.008 h)--bp-color-gray-1000oklch(from var(--bp-color-gray-0) 0.15 0.01 h)--bp-color-gray-200oklch(from var(--bp-color-gray-0) 0.9 0.01 h)--bp-color-gray-300oklch(from var(--bp-color-gray-0) 0.8 c h)--bp-color-gray-400oklch(from var(--bp-color-gray-0) 0.65 c h)--bp-color-gray-500oklch(from var(--bp-color-gray-0) 0.5 c h)--bp-color-gray-600oklch(from var(--bp-color-gray-0) 0.4 c h)--bp-color-gray-700oklch(from var(--bp-color-gray-0) 0.3 c h)--bp-color-gray-800oklch(from var(--bp-color-gray-0) 0.25 c h)--bp-color-gray-900oklch(from var(--bp-color-gray-0) 0.2 0.01 h)--bp-color-green-100oklch(from var(--bp-color-green-0) 0.95 0.05 h)--bp-color-green-1000oklch(from var(--bp-color-green-0) 0.1 c h)--bp-color-green-200oklch(from var(--bp-color-green-0) 0.9 0.1 h)--bp-color-green-300oklch(from var(--bp-color-green-0) 0.8 0.15 h)--bp-color-green-400oklch(from var(--bp-color-green-0) 0.7 c h)--bp-color-green-500oklch(from var(--bp-color-green-0) 0.6 c h)--bp-color-green-600oklch(from var(--bp-color-green-0) 0.5 c h)--bp-color-green-700oklch(from var(--bp-color-green-0) 0.4 c h)--bp-color-green-800oklch(from var(--bp-color-green-0) 0.3 c h)--bp-color-green-900oklch(from var(--bp-color-green-0) 0.2 c h)--bp-color-red-100oklch(from var(--bp-color-red-0) 0.98 c h)--bp-color-red-1000oklch(from var(--bp-color-red-0) 0.2 c h)--bp-color-red-200oklch(from var(--bp-color-red-0) 0.95 c h)--bp-color-red-300oklch(from var(--bp-color-red-0) 0.9 c h)--bp-color-red-400oklch(from var(--bp-color-red-0) 0.8 c h)--bp-color-red-500oklch(from var(--bp-color-red-0) 0.7 c h)--bp-color-red-600oklch(from var(--bp-color-red-0) 0.59 c h)--bp-color-red-700oklch(from var(--bp-color-red-0) 0.5 c h)--bp-color-red-800oklch(from var(--bp-color-red-0) 0.4 c h)--bp-color-red-900oklch(from var(--bp-color-red-0) 0.3 c h)--bp-color-schemenormal--bp-color-violet-100oklch(from var(--bp-color-violet-0) 0.95 0.05 h)--bp-color-violet-1000oklch(from var(--bp-color-violet-0) 0.1 c h)--bp-color-violet-200oklch(from var(--bp-color-violet-0) 0.9 0.1 h)--bp-color-violet-300oklch(from var(--bp-color-violet-0) 0.8 0.15 h)--bp-color-violet-400oklch(from var(--bp-color-violet-0) 0.7 c h)--bp-color-violet-500oklch(from var(--bp-color-violet-0) 0.6 c h)--bp-color-violet-600oklch(from var(--bp-color-violet-0) 0.5 c h)--bp-color-violet-700oklch(from var(--bp-color-violet-0) 0.4 c h)--bp-color-violet-800oklch(from var(--bp-color-violet-0) 0.3 c h)--bp-color-violet-900oklch(from var(--bp-color-violet-0) 0.2 c h)--bp-color-whitehsl(0, 0%, 100%)--bp-color-yellow-100oklch(from var(--bp-color-yellow-0) 0.98 0.05 h)--bp-color-yellow-1000oklch(from var(--bp-color-yellow-0) 0.2 c h)--bp-color-yellow-200oklch(from var(--bp-color-yellow-0) 0.95 0.1 h)--bp-color-yellow-300oklch(from var(--bp-color-yellow-0) 0.9 0.15 h)--bp-color-yellow-400oklch(from var(--bp-color-yellow-0) 0.85 c h)--bp-color-yellow-500oklch(from var(--bp-color-yellow-0) 0.8 c h)--bp-color-yellow-600oklch(from var(--bp-color-yellow-0) 0.75 c h)--bp-color-yellow-700oklch(from var(--bp-color-yellow-0) 0.6 c h)--bp-color-yellow-800oklch(from var(--bp-color-yellow-0) 0.5 c h)--bp-color-yellow-900oklch(from var(--bp-color-yellow-0) 0.4 c h)Status
TokenValueExample--bp-status-accent-background-100oklch(from var(--bp-color-blue-0) 0.9 0.1 h)--bp-status-accent-background-200oklch(from var(--bp-color-blue-0) 0.5 c h)--bp-status-accent-background-300oklch(from var(--bp-color-blue-0) 0.4 c h)--bp-status-accent-color-100hsl(0, 0%, 100%)--bp-status-danger-background-100oklch(from var(--bp-color-red-0) 0.95 c h)--bp-status-danger-background-200oklch(from var(--bp-color-red-0) 0.59 c h)--bp-status-danger-background-300oklch(from var(--bp-color-red-0) 0.5 c h)--bp-status-danger-color-100hsl(0, 0%, 100%)--bp-status-disabled-background-100oklch(from var(--bp-color-gray-0) 0.8 c h)--bp-status-disabled-background-200oklch(from var(--bp-color-gray-0) 0.65 c h)--bp-status-disabled-background-300oklch(from var(--bp-color-gray-0) 0.5 c h)--bp-status-disabled-color-100oklch(from var(--bp-color-gray-0) 0.4 c h)--bp-status-neutral-background-100oklch(from var(--bp-color-gray-0) 0.9 0.01 h)--bp-status-neutral-background-200oklch(from var(--bp-color-gray-0) 0.4 c h)--bp-status-neutral-background-300oklch(from var(--bp-color-gray-0) 0.3 c h)--bp-status-neutral-color-100hsl(0, 0%, 100%)--bp-status-success-background-100oklch(from var(--bp-color-green-0) 0.9 0.1 h)--bp-status-success-background-200oklch(from var(--bp-color-green-0) 0.5 c h)--bp-status-success-background-300oklch(from var(--bp-color-green-0) 0.4 c h)--bp-status-success-color-100hsl(0, 0%, 100%)--bp-status-warning-background-100oklch(from var(--bp-color-yellow-0) 0.95 0.1 h)--bp-status-warning-background-200oklch(from var(--bp-color-yellow-0) 0.75 c h)--bp-status-warning-background-300oklch(from var(--bp-color-yellow-0) 0.6 c h)--bp-status-warning-color-100hsl(0, 0%, 0%)Object
TokenValueExample--bp-object-border-color-100oklch(from var(--bp-color-gray-0) 0.9 0.01 h)--bp-object-border-color-200oklch(from var(--bp-color-gray-0) 0.8 c h)--bp-object-border-color-300oklch(from var(--bp-color-gray-0) 0.65 c h)--bp-object-border-radius-1004px--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-opacity-100hsla(222, 7%, 46%, 0)--bp-object-opacity-200hsla(222, 7%, 46%, 0.1)--bp-object-opacity-300hsla(222, 7%, 46%, 0.4)--bp-object-opacity-400hsla(222, 7%, 46%, 0.6)--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)Layer
TokenValueExample--bp-layer100100--bp-layer-background-100oklch(from var(--bp-color-gray-0) 0.95 0.008 h)--bp-layer-background-200hsl(0, 0%, 100%)--bp-layer-background-300oklch(from var(--bp-color-gray-0) 0.95 0.008 h)--bp-layer-background-400oklch(from var(--bp-color-gray-0) 0.2 0.01 h)--bp-layer-header-backgroundoklch(from var(--bp-color-gray-0) 0.3 c h)--bp-layer-header-colorhsl(0, 0%, 100%)Interaction
TokenValueExample--bp-interaction-accent-backgroundoklch(from var(--bp-color-blue-0) 0.5 c h)--bp-interaction-active-coloroklch(from var(--bp-color-gray-0) 0.25 c h)--bp-interaction-active-offset7%7%--bp-interaction-default-coloroklch(from var(--bp-color-gray-0) 0.25 c h)--bp-interaction-default-offset0%0%--bp-interaction-disabled-coloroklch(from var(--bp-color-gray-0) 0.65 c h)--bp-interaction-disabled-offset10%10%--bp-interaction-focused-coloroklch(from var(--bp-color-gray-0) 0.3 c h)--bp-interaction-focused-offset0%0%--bp-interaction-highlight-backgroundhsla(211, 100%, 88%, 0.25)--bp-interaction-hover-coloroklch(from var(--bp-color-gray-0) 0.25 c h)--bp-interaction-hover-offset3.5%3.5%--bp-interaction-outlineHighlight solid 2pxHighlight solid 2px--bp-interaction-outline-offset2px2px--bp-interaction-outline-webkit5px auto -webkit-focus-ring-color5px auto -webkit-focus-ring-color--bp-interaction-selected-coloroklch(from var(--bp-color-gray-0) 0.25 c h)--bp-interaction-selected-offset3%3%--bp-interaction-touch-target36px36pxScale
TokenValueExample--bp-scale-size11--bp-scale-space11--bp-scale-text11Text
TokenValueExample--bp-text-color-100hsl(0, 0%, 100%)--bp-text-color-200oklch(from var(--bp-color-gray-0) 0.95 0.008 h)--bp-text-color-300oklch(from var(--bp-color-gray-0) 0.65 c h)--bp-text-color-400oklch(from var(--bp-color-gray-0) 0.4 c h)--bp-text-color-500oklch(from var(--bp-color-gray-0) 0.25 c h)--bp-text-color-600hsl(0, 0%, 0%)--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-monospace-font'ui-monospace', Consolas, Menlo, Monaco, monospace--bp-text-size-100calc(var(--bp-scale-text * 12px)calc(var(--bp-scale-text * 12px)
--bp-text-size-200calc(var(--bp-scale-text * 14px)calc(var(--bp-scale-text * 14px)
--bp-text-size-300calc(var(--bp-scale-text * 16px)calc(var(--bp-scale-text * 16px)
--bp-text-size-400calc(var(--bp-scale-text * 20px)calc(var(--bp-scale-text * 20px)
--bp-text-size-500calc(var(--bp-scale-text * 24px)calc(var(--bp-scale-text * 24px)
--bp-text-size-600calc(var(--bp-scale-text * 32px)calc(var(--bp-scale-text * 32px)
--bp-text-size-700calc(var(--bp-scale-text * 36px)calc(var(--bp-scale-text * 36px)
--bp-text-size-800calc(var(--bp-scale-text * 48px)calc(var(--bp-scale-text * 48px)
--bp-text-weight-bold600600
--bp-text-weight-extrabold600600
--bp-text-weight-light300300
--bp-text-weight-medium500500
--bp-text-weight-regular400400
--bp-text-weight-semibold500500
Layout
TokenValueExample--bp-layout-grid-cols1212--bp-layout-width-lg1200px1200px--bp-layout-width-md1024px1024px--bp-layout-width-sm768px768px--bp-layout-width-xl1440px1440px--bp-layout-width-xs576px576pxSize
TokenValueExample--bp-size-100calc(var(--bp-scale-size * 1px)--bp-size-1000calc(var(--bp-scale-size * 64px)--bp-size-1100calc(var(--bp-scale-size * 72px)--bp-size-1200calc(var(--bp-scale-size * 96px)--bp-size-200calc(var(--bp-scale-size * 2px)--bp-size-300calc(var(--bp-scale-size * 4px)--bp-size-400calc(var(--bp-scale-size * 8px)--bp-size-500calc(var(--bp-scale-size * 12px)--bp-size-600calc(var(--bp-scale-size * 16px)--bp-size-700calc(var(--bp-scale-size * 24px)--bp-size-800calc(var(--bp-scale-size * 32px)--bp-size-900calc(var(--bp-scale-size * 48px)Space
TokenValueExample--bp-space-lgcalc(var(--bp-scale-space * 48px)--bp-space-mdcalc(var(--bp-scale-space * 24px)--bp-space-smcalc(var(--bp-scale-space * 16px)--bp-space-xlcalc(var(--bp-scale-space * 64px)--bp-space-xscalc(var(--bp-scale-space * 8px)Animation
TokenValueExample--bp-animation-duration-1000.1s0.1s--bp-animation-duration-2000.2s0.2s--bp-animation-duration-3000.3s0.3s--bp-animation-easingease-in-outease-in-outCopied to clipboard