Styling your own Web Component

Theme & Core Colors

• --bbc-color-primary → Used in buttons, links, texts and more to hightlight and emphasize.

• --bbc-color-secondary → Used for hints, descriptions and subtitles.

• --bbc-color-theme → Used as the app-wide default background.

• --bbc-icon-hover-color → Used for icon color on hover.

• --bbc-button-hover-bg-color → Used for button background on hover.

• --bbc-button-hover-text-color → Used for button text color on hover.

Sidebar (Navigation)

• --bbc-sidebar-bg-color → Sidebar background color

• --bbc-sidebar-text-color → Sidebar text color

• --bbc-sidebar-font-size → Sidebar font size

• --bbc-sidebar-font-weight → Sidebar font weight

• --bbc-sidebar-font-family → Sidebar font family

• --bbc-sidebar-active-item-bg-color → Active-item background in sidebar

Top Bar

You can hide the top bar using the hideTopbar parameter.

• --bbc-top-bar-text-color → Top bar text color

• --bbc-top-bar-bg-color → Top bar background color

• --bbc-top-bar-font-family → Top bar font family

• --bbc-top-bar-font-weight → Top bar font weight

• --bbc-top-bar-font-size → Top bar font size

Message Citation

• --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 message

  • --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 message

  • --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

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>