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-schemenormal--bp-color-blackhsl(0, 0%, 0%)--bp-color-whitehsl(0, 0%, 100%)--bp-color-yellow-100oklch(from var(--bp-color-yellow-0) 0.98 0.05 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)--bp-color-yellow-1000oklch(from var(--bp-color-yellow-0) 0.2 c h)--bp-color-violet-100oklch(from var(--bp-color-violet-0) 0.95 0.05 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-violet-1000oklch(from var(--bp-color-violet-0) 0.1 c h)--bp-color-blue-100oklch(from var(--bp-color-blue-0) 0.95 0.05 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-blue-1000oklch(from var(--bp-color-blue-0) 0.1 c h)--bp-color-green-100oklch(from var(--bp-color-green-0) 0.95 0.05 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-green-1000oklch(from var(--bp-color-green-0) 0.1 c h)--bp-color-red-100oklch(from var(--bp-color-red-0) 0.98 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-red-1000oklch(from var(--bp-color-red-0) 0.2 c h)--bp-color-gray-100oklch(from var(--bp-color-gray-0) 0.95 0.008 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-gray-1000oklch(from var(--bp-color-gray-0) 0.15 0.01 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-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%)--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-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-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)Object
TokenValueExample--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-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-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(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)Layer
TokenValueExample--bp-layer-@100100--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-colorhsl(0, 0%, 100%)--bp-layer-header-backgroundoklch(from var(--bp-color-gray-0) 0.3 c h)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-backgroundhsla(211, 100%, 88%, 0.25)--bp-interaction-accent-backgroundoklch(from var(--bp-color-blue-0) 0.5 c h)--bp-interaction-default-offset0%0%--bp-interaction-default-coloroklch(from var(--bp-color-gray-0) 0.25 c h)--bp-interaction-hover-offset3.5%3.5%--bp-interaction-hover-coloroklch(from var(--bp-color-gray-0) 0.25 c h)--bp-interaction-focused-offset0%0%--bp-interaction-focused-coloroklch(from var(--bp-color-gray-0) 0.3 c h)--bp-interaction-active-offset7%7%--bp-interaction-active-coloroklch(from var(--bp-color-gray-0) 0.25 c h)--bp-interaction-selected-offset3%3%--bp-interaction-selected-coloroklch(from var(--bp-color-gray-0) 0.25 c h)--bp-interaction-disabled-offset10%10%--bp-interaction-disabled-coloroklch(from var(--bp-color-gray-0) 0.65 c h)Scale
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-weight-light300300
--bp-text-weight-regular400400
--bp-text-weight-medium500500
--bp-text-weight-semibold500500
--bp-text-weight-bold600600
--bp-text-weight-extrabold600600
--bp-text-size-10012px12px
--bp-text-size-20014px14px
--bp-text-size-30016px16px
--bp-text-size-40020px20px
--bp-text-size-50024px24px
--bp-text-size-60032px32px
--bp-text-size-70036px36px
--bp-text-size-80048px48px
--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-monospaceFont'ui-monospace', Consolas, Menlo, Monaco, monospaceLayout
TokenValueExample--bp-layout-grid-cols1212--bp-layout-width-xs576px576px--bp-layout-width-sm768px768px--bp-layout-width-md1024px1024px--bp-layout-width-lg1200px1200px--bp-layout-width-xl1440px1440pxSize
TokenValueExample--bp-size-1001px--bp-size-2002px--bp-size-3004px--bp-size-4008px--bp-size-50012px--bp-size-60016px--bp-size-70024px--bp-size-80032px--bp-size-90048px--bp-size-100064px--bp-size-110072px--bp-size-120096pxSpace
TokenValueExample--bp-space-xs8px--bp-space-sm16px--bp-space-md24px--bp-space-lg48px--bp-space-xl64px