Styling your own Web Component

Theme & Core Colors

  • --bbc-color-primary β†’ Primary brand/accent color

  • --bbc-color-hover β†’ Hover/highlight color

  • --bbc-color-theme β†’ Default overall background


Sidebar (Navigation)

  • --bbc-color-sidebar-bg β†’ Sidebar/nav background

  • --bbc-color-sidebar-active-item-bg β†’ Active-item background in sidebar


Citation Block

  • --bbc-msg-citation-text-color β†’ Citation text color

  • --bbc-msg-citation-bg-color β†’ Citation background color

  • --bbc-msg-citation-font-family β†’ Citation font family

  • --bbc-msg-citation-font-size β†’ Citation font size

  • --bbc-msg-citation-font-weight β†’ Citation font weight

  • --bbc-msg-citation-py β†’ Citation vertical padding

  • --bbc-msg-citation-px β†’ Citation horizontal padding


Desktop Messages

  • Bot

    • --bbc-bot-msg-bg-color β†’ Bot-message background

    • --bbc-bot-msg-text-color β†’ Bot-message text color

    • --bbc-bot-msg-font-family β†’ Bot font family

    • --bbc-bot-msg-font-size β†’ Bot font size

    • --bbc-bot-msg-font-weight β†’ Bot font weight

    • --bbc-bot-msg-py β†’ Bot vertical padding

    • --bbc-bot-msg-px β†’ Bot horizontal padding

  • User

    • --bbc-user-msg-bg-color β†’ User-message background

    • --bbc-user-msg-text-color β†’ User-message text color

    • --bbc-user-msg-font-family β†’ User font family

    • --bbc-user-msg-font-size β†’ User font size

    • --bbc-user-msg-font-weight β†’ User font weight

    • --bbc-user-msg-py β†’ User vertical padding

    • --bbc-user-msg-px β†’ User horizontal padding


Mobile Messages

  • Bot

    • --bbc-bot-msg-sm-bg-color β†’ Mobile bot background

    • --bbc-bot-msg-sm-text-color β†’ Mobile bot text color

    • --bbc-bot-msg-sm-font-family β†’ Mobile bot font family

    • --bbc-bot-msg-sm-font-size β†’ Mobile bot font size

    • --bbc-bot-msg-sm-font-weight β†’ Mobile bot font weight

    • --bbc-bot-msg-sm-py β†’ Mobile bot vertical padding

    • --bbc-bot-msg-sm-px β†’ Mobile bot horizontal padding

  • User

    • --bbc-user-msg-sm-bg-color β†’ Mobile user background

    • --bbc-user-msg-sm-text-color β†’ Mobile user text color

    • --bbc-user-msg-sm-font-family β†’ Mobile user font family

    • --bbc-user-msg-sm-font-size β†’ Mobile user font size

    • --bbc-user-msg-sm-font-weight β†’ Mobile user font weight

    • --bbc-user-msg-sm-py β†’ Mobile user vertical padding

    • --bbc-user-msg-sm-px β†’ Mobile user horizontal padding


Document Layout

  • Title

    • --bbc-document-title-font-size β†’ Title font size

    • --bbc-document-title-font-weight β†’ Title font weight

    • --bbc-document-title-text-color β†’ Title text color

  • Chunk

    • --bbc-document-chunk-text-color β†’ Chunk text color

    • --bbc-document-chunk-bg-color β†’ Chunk background color


Reference List & Cards

  • List Title

    • --bbc-ref-list-title-font-size β†’ List title font size

    • --bbc-ref-list-title-font-weight β†’ List title font weight

    • --bbc-ref-list-title-text-color β†’ List title text color

  • Card

    • --bbc-ref-list-card-border-color β†’ Card border color

    • --bbc-ref-list-card-border-radius β†’ Card corner radius

    • --bbc-ref-list-card-text-color β†’ Card text color

    • --bbc-ref-list-card-bg-gradient-start β†’ Card gradient start

    • --bbc-ref-list-card-bg-gradient-stop β†’ Card gradient end

    • --bbc-ref-list-card-icon-bg-color β†’ Card-icon background


Example Usage

<blockbrain-main 
    style="
        /* Theme & Core */
        --bbc-color-primary: #007b5e;
        --bbc-color-hover: #007b5e;
        --bbc-color-theme: #f3f4f6;

/* Sidebar */
--bbc-color-sidebar-bg:             #ffffff;
--bbc-color-sidebar-active-item-bg: #f5f9ff;

/* Citation */
--bbc-msg-citation-text-color:  #000000;
--bbc-msg-citation-font-weight: bold;

/* Mobile Messages */
--bbc-bot-msg-sm-bg-color:    #f2f2f2;
--bbc-user-msg-sm-bg-color:   #007b5e;
--bbc-user-msg-sm-text-color: #f2f2f2;
--bbc-user-msg-sm-px:         4px;
--bbc-bot-msg-sm-px:          4px;

/* Document */
--bbc-document-title-text-color: #313131;
--bbc-document-chunk-bg-color:   #f2f2f2;

/* Reference List */
--bbc-ref-list-title-text-color:    #7f7f7f;
--bbc-ref-list-title-font-weight:   500;
--bbc-ref-list-card-border-color:   #d9d9d9;
--bbc-ref-list-card-bg-gradient-start: #f2f2f2;
--bbc-ref-list-card-bg-gradient-stop:  #ffffff;
--bbc-ref-list-card-icon-bg-color:    #007b5e;
"
clientId="KbotWebCom"
orgId="233513864103202013"
secretKey="…"
uid="citation-test"
userUid="tung"
layout="compact"
height="calc(90dvh - 180px)"
hideTopbar
></blockbrain-main>

Last updated