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>