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-colorBlackhsl(0, 0%, 0%)--bp-colorBlue0oklch(0.63 0.2 255)--bp-colorBlue100oklch(from var(--bp-color-blue-0) 0.95 0.05 h)--bp-colorBlue1000oklch(from var(--bp-color-blue-0) 0.1 c h)--bp-colorBlue200oklch(from var(--bp-color-blue-0) 0.9 0.1 h)--bp-colorBlue300oklch(from var(--bp-color-blue-0) 0.8 0.15 h)--bp-colorBlue400oklch(from var(--bp-color-blue-0) 0.7 c h)--bp-colorBlue500oklch(from var(--bp-color-blue-0) 0.6 c h)--bp-colorBlue600oklch(from var(--bp-color-blue-0) 0.5 c h)--bp-colorBlue700oklch(from var(--bp-color-blue-0) 0.4 c h)--bp-colorBlue800oklch(from var(--bp-color-blue-0) 0.3 c h)--bp-colorBlue900oklch(from var(--bp-color-blue-0) 0.2 c h)--bp-colorGray0oklch(0.5 0.015 268)--bp-colorGray100oklch(from var(--bp-color-gray-0) 0.95 0.008 h)--bp-colorGray1000oklch(from var(--bp-color-gray-0) 0.15 0.01 h)--bp-colorGray200oklch(from var(--bp-color-gray-0) 0.9 0.01 h)--bp-colorGray300oklch(from var(--bp-color-gray-0) 0.8 c h)--bp-colorGray400oklch(from var(--bp-color-gray-0) 0.65 c h)--bp-colorGray500oklch(from var(--bp-color-gray-0) 0.5 c h)--bp-colorGray600oklch(from var(--bp-color-gray-0) 0.4 c h)--bp-colorGray700oklch(from var(--bp-color-gray-0) 0.3 c h)--bp-colorGray800oklch(from var(--bp-color-gray-0) 0.25 c h)--bp-colorGray900oklch(from var(--bp-color-gray-0) 0.2 0.01 h)--bp-colorGreen0oklch(0.7 0.16 155.48)--bp-colorGreen100oklch(from var(--bp-color-green-0) 0.95 0.05 h)--bp-colorGreen1000oklch(from var(--bp-color-green-0) 0.1 c h)--bp-colorGreen200oklch(from var(--bp-color-green-0) 0.9 0.1 h)--bp-colorGreen300oklch(from var(--bp-color-green-0) 0.8 0.15 h)--bp-colorGreen400oklch(from var(--bp-color-green-0) 0.7 c h)--bp-colorGreen500oklch(from var(--bp-color-green-0) 0.6 c h)--bp-colorGreen600oklch(from var(--bp-color-green-0) 0.5 c h)--bp-colorGreen700oklch(from var(--bp-color-green-0) 0.4 c h)--bp-colorGreen800oklch(from var(--bp-color-green-0) 0.3 c h)--bp-colorGreen900oklch(from var(--bp-color-green-0) 0.2 c h)--bp-colorRed0oklch(0.59 0.23 19)--bp-colorRed100oklch(from var(--bp-color-red-0) 0.98 c h)--bp-colorRed1000oklch(from var(--bp-color-red-0) 0.2 c h)--bp-colorRed200oklch(from var(--bp-color-red-0) 0.95 c h)--bp-colorRed300oklch(from var(--bp-color-red-0) 0.9 c h)--bp-colorRed400oklch(from var(--bp-color-red-0) 0.8 c h)--bp-colorRed500oklch(from var(--bp-color-red-0) 0.7 c h)--bp-colorRed600oklch(from var(--bp-color-red-0) 0.59 c h)--bp-colorRed700oklch(from var(--bp-color-red-0) 0.5 c h)--bp-colorRed800oklch(from var(--bp-color-red-0) 0.4 c h)--bp-colorRed900oklch(from var(--bp-color-red-0) 0.3 c h)--bp-colorSchemenormal--bp-colorViolet0oklch(0.56 0.19 295)--bp-colorViolet100oklch(from var(--bp-color-violet-0) 0.95 0.05 h)--bp-colorViolet1000oklch(from var(--bp-color-violet-0) 0.1 c h)--bp-colorViolet200oklch(from var(--bp-color-violet-0) 0.9 0.1 h)--bp-colorViolet300oklch(from var(--bp-color-violet-0) 0.8 0.15 h)--bp-colorViolet400oklch(from var(--bp-color-violet-0) 0.7 c h)--bp-colorViolet500oklch(from var(--bp-color-violet-0) 0.6 c h)--bp-colorViolet600oklch(from var(--bp-color-violet-0) 0.5 c h)--bp-colorViolet700oklch(from var(--bp-color-violet-0) 0.4 c h)--bp-colorViolet800oklch(from var(--bp-color-violet-0) 0.3 c h)--bp-colorViolet900oklch(from var(--bp-color-violet-0) 0.2 c h)--bp-colorWhitehsl(0, 0%, 100%)--bp-colorYellow0oklch(0.85 0.18 79)--bp-colorYellow100oklch(from var(--bp-color-yellow-0) 0.98 0.05 h)--bp-colorYellow1000oklch(from var(--bp-color-yellow-0) 0.2 c h)--bp-colorYellow200oklch(from var(--bp-color-yellow-0) 0.95 0.1 h)--bp-colorYellow300oklch(from var(--bp-color-yellow-0) 0.9 0.15 h)--bp-colorYellow400oklch(from var(--bp-color-yellow-0) 0.85 c h)--bp-colorYellow500oklch(from var(--bp-color-yellow-0) 0.8 c h)--bp-colorYellow600oklch(from var(--bp-color-yellow-0) 0.75 c h)--bp-colorYellow700oklch(from var(--bp-color-yellow-0) 0.6 c h)--bp-colorYellow800oklch(from var(--bp-color-yellow-0) 0.5 c h)--bp-colorYellow900oklch(from var(--bp-color-yellow-0) 0.4 c h)Status
TokenValueExample--bp-statusAccentBackground100oklch(from var(--bp-color-blue-0) 0.9 0.1 h)--bp-statusAccentBackground200oklch(from var(--bp-color-blue-0) 0.5 c h)--bp-statusAccentBackground300oklch(from var(--bp-color-blue-0) 0.4 c h)--bp-statusAccentColor100hsl(0, 0%, 100%)--bp-statusDangerBackground100oklch(from var(--bp-color-red-0) 0.95 c h)--bp-statusDangerBackground200oklch(from var(--bp-color-red-0) 0.59 c h)--bp-statusDangerBackground300oklch(from var(--bp-color-red-0) 0.5 c h)--bp-statusDangerColor100hsl(0, 0%, 100%)--bp-statusDisabledBackground100oklch(from var(--bp-color-gray-0) 0.8 c h)--bp-statusDisabledBackground200oklch(from var(--bp-color-gray-0) 0.65 c h)--bp-statusDisabledBackground300oklch(from var(--bp-color-gray-0) 0.5 c h)--bp-statusDisabledColor100oklch(from var(--bp-color-gray-0) 0.4 c h)--bp-statusNeutralBackground100oklch(from var(--bp-color-gray-0) 0.9 0.01 h)--bp-statusNeutralBackground200oklch(from var(--bp-color-gray-0) 0.4 c h)--bp-statusNeutralBackground300oklch(from var(--bp-color-gray-0) 0.3 c h)--bp-statusNeutralColor100hsl(0, 0%, 100%)--bp-statusSuccessBackground100oklch(from var(--bp-color-green-0) 0.9 0.1 h)--bp-statusSuccessBackground200oklch(from var(--bp-color-green-0) 0.5 c h)--bp-statusSuccessBackground300oklch(from var(--bp-color-green-0) 0.4 c h)--bp-statusSuccessColor100hsl(0, 0%, 100%)--bp-statusWarningBackground100oklch(from var(--bp-color-yellow-0) 0.95 0.1 h)--bp-statusWarningBackground200oklch(from var(--bp-color-yellow-0) 0.75 c h)--bp-statusWarningBackground300oklch(from var(--bp-color-yellow-0) 0.6 c h)--bp-statusWarningColor100hsl(0, 0%, 0%)Object
TokenValueExample--bp-objectBorderColor100oklch(from var(--bp-color-gray-0) 0.9 0.01 h)oklch(from var(--bp-color-gray-0) 0.9 0.01 h)--bp-objectBorderColor200oklch(from var(--bp-color-gray-0) 0.8 c h)oklch(from var(--bp-color-gray-0) 0.8 c h)--bp-objectBorderColor300oklch(from var(--bp-color-gray-0) 0.65 c h)oklch(from var(--bp-color-gray-0) 0.65 c h)--bp-objectBorderRadius1004px4px--bp-objectBorderRadius20024px24px--bp-objectBorderRadius30050%50%--bp-objectBorderWidth1001px1px--bp-objectBorderWidth2002px2px--bp-objectBorderWidth3004px4px--bp-objectOpacity100hsla(222, 7%, 46%, 0)hsla(222, 7%, 46%, 0)--bp-objectOpacity200hsla(222, 7%, 46%, 0.1)hsla(222, 7%, 46%, 0.1)--bp-objectOpacity300hsla(222, 7%, 46%, 0.4)hsla(222, 7%, 46%, 0.4)--bp-objectOpacity400hsla(222, 7%, 46%, 0.6)hsla(222, 7%, 46%, 0.6)--bp-objectShadow1000 2px 2px hsla(0, 0%, 0%, 0.2)0 2px 2px hsla(0, 0%, 0%, 0.2)--bp-objectShadow2000 3px 4px hsla(0, 0%, 0%, 0.2)0 3px 4px hsla(0, 0%, 0%, 0.2)--bp-objectShadow3000 4px 6px hsla(0, 0%, 0%, 0.2)0 4px 6px hsla(0, 0%, 0%, 0.2)Layer
TokenValueExample--bp-layer100100--bp-layerBackground100oklch(from var(--bp-color-gray-0) 0.95 0.008 h)oklch(from var(--bp-color-gray-0) 0.95 0.008 h)--bp-layerBackground200hsl(0, 0%, 100%)hsl(0, 0%, 100%)--bp-layerBackground300oklch(from var(--bp-color-gray-0) 0.95 0.008 h)oklch(from var(--bp-color-gray-0) 0.95 0.008 h)--bp-layerBackground400oklch(from var(--bp-color-gray-0) 0.2 0.01 h)oklch(from var(--bp-color-gray-0) 0.2 0.01 h)--bp-layerHeaderBackgroundoklch(from var(--bp-color-gray-0) 0.3 c h)oklch(from var(--bp-color-gray-0) 0.3 c h)--bp-layerHeaderColorhsl(0, 0%, 100%)hsl(0, 0%, 100%)Interaction
TokenValueExample--bp-interactionAccentBackgroundoklch(from var(--bp-color-blue-0) 0.5 c h)oklch(from var(--bp-color-blue-0) 0.5 c h)--bp-interactionActiveColoroklch(from var(--bp-color-gray-0) 0.25 c h)oklch(from var(--bp-color-gray-0) 0.25 c h)--bp-interactionActiveOffset7%7%--bp-interactionDefaultColoroklch(from var(--bp-color-gray-0) 0.25 c h)oklch(from var(--bp-color-gray-0) 0.25 c h)--bp-interactionDefaultOffset0%0%--bp-interactionDisabledColoroklch(from var(--bp-color-gray-0) 0.65 c h)oklch(from var(--bp-color-gray-0) 0.65 c h)--bp-interactionDisabledOffset10%10%--bp-interactionFocusedColoroklch(from var(--bp-color-gray-0) 0.3 c h)oklch(from var(--bp-color-gray-0) 0.3 c h)--bp-interactionFocusedOffset0%0%--bp-interactionHighlightBackgroundhsla(211, 100%, 88%, 0.25)hsla(211, 100%, 88%, 0.25)--bp-interactionHoverColoroklch(from var(--bp-color-gray-0) 0.25 c h)oklch(from var(--bp-color-gray-0) 0.25 c h)--bp-interactionHoverOffset3.5%3.5%--bp-interactionOutlineHighlight solid 2pxHighlight solid 2px--bp-interactionOutlineOffset2px2px--bp-interactionOutlineWebkit5px auto -webkit-focus-ring-color5px auto -webkit-focus-ring-color--bp-interactionSelectedColoroklch(from var(--bp-color-gray-0) 0.25 c h)oklch(from var(--bp-color-gray-0) 0.25 c h)--bp-interactionSelectedOffset3%3%--bp-interactionTouchTarget36px36pxScale
TokenValueExample--bp-scaleSize11--bp-scaleSpace11--bp-scaleText11Text
TokenValueExample--bp-textColor100hsl(0, 0%, 100%)hsl(0, 0%, 100%)--bp-textColor200oklch(from var(--bp-color-gray-0) 0.95 0.008 h)oklch(from var(--bp-color-gray-0) 0.95 0.008 h)--bp-textColor300oklch(from var(--bp-color-gray-0) 0.65 c h)oklch(from var(--bp-color-gray-0) 0.65 c h)--bp-textColor400oklch(from var(--bp-color-gray-0) 0.4 c h)oklch(from var(--bp-color-gray-0) 0.4 c h)--bp-textColor500oklch(from var(--bp-color-gray-0) 0.25 c h)oklch(from var(--bp-color-gray-0) 0.25 c h)--bp-textColor600hsl(0, 0%, 0%)hsl(0, 0%, 0%)--bp-textFont'system-ui', 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif'system-ui', 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif--bp-textMonospaceFont'ui-monospace', Consolas, Menlo, Monaco, monospace--bp-textSize100calc(var(--bp-scale-text * 12px)calc(var(--bp-scale-text * 12px)--bp-textSize200calc(var(--bp-scale-text * 14px)calc(var(--bp-scale-text * 14px)--bp-textSize300calc(var(--bp-scale-text * 16px)calc(var(--bp-scale-text * 16px)--bp-textSize400calc(var(--bp-scale-text * 20px)calc(var(--bp-scale-text * 20px)--bp-textSize500calc(var(--bp-scale-text * 24px)calc(var(--bp-scale-text * 24px)--bp-textSize600calc(var(--bp-scale-text * 32px)calc(var(--bp-scale-text * 32px)--bp-textSize700calc(var(--bp-scale-text * 36px)calc(var(--bp-scale-text * 36px)--bp-textSize800calc(var(--bp-scale-text * 48px)calc(var(--bp-scale-text * 48px)--bp-textWeightBold600600--bp-textWeightExtrabold600600--bp-textWeightLight300300--bp-textWeightMedium500500--bp-textWeightRegular400400--bp-textWeightSemibold500500Layout
TokenValueExample--bp-layoutGridCols1212--bp-layoutWidthLg1200px1200px--bp-layoutWidthMd1024px1024px--bp-layoutWidthSm768px768px--bp-layoutWidthXl1440px1440px--bp-layoutWidthXs576px576pxSize
TokenValueExample--bp-size0calc(var(--bp-scale-size * 0px)--bp-size100calc(var(--bp-scale-size * 1px)--bp-size1000calc(var(--bp-scale-size * 64px)--bp-size1100calc(var(--bp-scale-size * 72px)--bp-size1200calc(var(--bp-scale-size * 96px)--bp-size200calc(var(--bp-scale-size * 2px)--bp-size300calc(var(--bp-scale-size * 4px)--bp-size400calc(var(--bp-scale-size * 8px)--bp-size500calc(var(--bp-scale-size * 12px)--bp-size600calc(var(--bp-scale-size * 16px)--bp-size700calc(var(--bp-scale-size * 24px)--bp-size800calc(var(--bp-scale-size * 32px)--bp-size900calc(var(--bp-scale-size * 48px)Space
TokenValueExample--bp-spaceLgcalc(var(--bp-scale-space * 48px)--bp-spaceMdcalc(var(--bp-scale-space * 24px)--bp-spaceSmcalc(var(--bp-scale-space * 16px)--bp-spaceXlcalc(var(--bp-scale-space * 64px)--bp-spaceXscalc(var(--bp-scale-space * 8px)Animation
TokenValueExample--bp-animationDuration1000.1s0.1s--bp-animationDuration2000.2s0.2s--bp-animationDuration3000.3s0.3s--bp-animationEasingease-in-outease-in-outCopied to clipboard