From 8bc50190613362d2414fd5234f0f86feedbd94b2 Mon Sep 17 00:00:00 2001 From: Arthurk12 Date: Wed, 30 Sep 2026 14:04:53 -0300 Subject: [PATCH 1/2] fix(BBBModal): follow the BBB client dark theme for the modal background BBBModal and its sticky footer take their background from colorWhite, which resolves to --color-neutral-white. The BBB client does not know that variable: its own palette and its dark theme are built on --color-white, so in dark mode the modal keeps a white background, or at best gets darkreader's generic inversion, which does not match the client's native modals. The background is also set through react-modal's inline `style`, so consumers can only override it with `!important` on the modal id. Map colorWhite to --color-white, falling back to --color-neutral-white, following the same "mapped to core css vars" pattern used by colorBrand1 and colorError. This makes every library use of colorWhite follow the client's --color-white, which is what BBB's own components already do. Move the modal background out of the inline style into a styled(ReactModal) class. Passing a className makes react-modal drop its default content styles, including a 1px #ccc border; that border is not restated, matching BBB's native BaseModal, which has none. A dedicated token used only by the modal was considered, but it would leave the rest of the library out of sync with the client theme. --- src/components/Modal/component.tsx | 5 ++--- src/components/Modal/styles.ts | 8 ++++++-- src/stylesheets/palette.ts | 4 +++- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/Modal/component.tsx b/src/components/Modal/component.tsx index 6376cf1..0ab2e07 100644 --- a/src/components/Modal/component.tsx +++ b/src/components/Modal/component.tsx @@ -1,5 +1,4 @@ import React, { useCallback } from 'react'; -import ReactModal from 'react-modal'; import * as Styled from './styles'; import { BBBTypography } from '../Typography'; import { MdClose } from 'react-icons/md'; @@ -49,7 +48,7 @@ const Modal: React.FC = ({ ), [footerContent, showDividers]); return ( - = ({ {!noFooter && !stickyFooter && renderFooter(stickyFooter)} {!noFooter && stickyFooter && renderFooter(stickyFooter)} - + ) } diff --git a/src/components/Modal/styles.ts b/src/components/Modal/styles.ts index 1002ac9..8c98409 100644 --- a/src/components/Modal/styles.ts +++ b/src/components/Modal/styles.ts @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { Styles } from 'react-modal'; +import ReactModal, { Styles } from 'react-modal'; import * as React from 'react'; import { spacingLarge, spacingMedium, spacingSmallMedium, borderRadiusDefault } from '../../stylesheets/sizing'; import { colorWhite, colorOverlay } from '../../stylesheets/palette'; @@ -25,7 +25,6 @@ export const modalStyles: Styles = { right: 'auto', bottom: 'auto', borderRadius: borderRadiusDefault, - background: colorWhite, overflow: 'hidden', WebkitOverflowScrolling: 'touch', outline: 'none', @@ -73,3 +72,8 @@ export const ModalFooter = styled.div` background-color: ${colorWhite}; `} `; + +// Background lives in a class instead of the inline `style` so the BBB dark theme and consumers can override it. +export const Modal = styled(ReactModal)` + background: ${colorWhite}; +`; diff --git a/src/stylesheets/palette.ts b/src/stylesheets/palette.ts index 6b43f8e..953b719 100644 --- a/src/stylesheets/palette.ts +++ b/src/stylesheets/palette.ts @@ -2,10 +2,12 @@ export const colorNeutral2 = 'var(--color-neutral-2, #717C91)'; export const colorNeutral3 = 'var(--color-neutral-3, #B0BDC9)'; export const colorNeutral4 = 'var(--color-neutral-4, #DCE4EC)'; -export const colorWhite = 'var(--color-neutral-white, #FFFFFF)'; export const colorLightGray = 'var(--color-light-gray, #F4F6FA)'; export const colorGray = 'var(--color-gray, #4E5A66)'; export const colorDarkGray = 'var(--color-dark-gray, #393C48)'; +const colorWhite_base = 'var(--color-neutral-white, #FFFFFF)'; +// Mapped to core css vars +export const colorWhite = `var(--color-white, ${colorWhite_base})`; // Brand colors // Last-resort fallbacks mirror bigbluebutton-html5's palette so that a client From 2344ef73721108cbf5a29fa33343d8de4e12119c Mon Sep 17 00:00:00 2001 From: Arthurk12 Date: Wed, 30 Sep 2026 16:41:02 -0300 Subject: [PATCH 2/2] fix(BBButton): follow --color-primary in the secondary variant border The border of the secondary (outlined) BBButton stays blue even when the client overrides --color-primary, while the button's text and outline already follow it. The border comes from colorBorderSelected, which falls back straight to the library's base brand color (--color-brand-1, #0F70D7), skipping --color-primary. Fall back to colorBrand1 instead, so the chain becomes --color-border-selected -> --color-primary -> --color-brand-1 -> #0F70D7. The border-specific variable still wins when set, and otherwise the border follows the client's primary color. colorBorderSelected is also used for the focus/selected borders of BBBSelect, BBBSearch, BBBInput and BBBTextInput, which now follow --color-primary the same way. --- src/stylesheets/palette.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stylesheets/palette.ts b/src/stylesheets/palette.ts index 953b719..d00cee3 100644 --- a/src/stylesheets/palette.ts +++ b/src/stylesheets/palette.ts @@ -41,7 +41,7 @@ export const colorBackgroundBlue = `var(--color-background-blue, ${colorBrandLig // Border colors const colorBorderDefault_base = `var(--color-border-default, ${colorNeutral3})`; -export const colorBorderSelected = `var(--color-border-selected, ${colorBrand1_base})`; +export const colorBorderSelected = `var(--color-border-selected, ${colorBrand1})`; export const colorBorderError = `var(--color-border-error, ${colorError_base})`; // Mapped to core css vars export const colorBorderDefault = `var(--default-border, ${colorBorderDefault_base})`;