From ec7fb14b60c799b4dbafca3532fe58f15f84ae71 Mon Sep 17 00:00:00 2001 From: Matt Yoder Date: Fri, 9 Aug 2024 11:50:33 -0400 Subject: [PATCH] fix(style): make styles work with shadow DOM --- README.md | 8 +++++--- index.html | 17 +++++++++++++---- src/bootstrap/access.scss | 9 +++++---- src/main.jsx | 22 ++++++++++------------ 4 files changed, 33 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 36ac669..ecdfc5e 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ This component provides a user interface to browse available Resources and their | `allowedFilters` | A list of filters you want users to see. Ex: `["GPU Compute"]` | **False** | | `excludedCategories` | A list of filter **categories** that you want hidden from users. Ex: `["Specialized Support", "Specialized Hardware"]` | **False** | | `excludedFilters` | A list of filters that you want hidden from users. Ex: `["ACCESS Allocated", "ACCESS OnDemand"]` | **False** | -| `excludedResources` | A list of Resources that you want hidden from users. Ex: `["ACCESS Credits"]` | **False** | +| `excludedResources` | A list of Resources that you want hidden from users. Ex: `["ACCESS Credits"]` | **False** | | `target` | The DOM element where the component will be rendered. | **True** | Note: Avoid combining `allowedCategories` and `excludedCategories`, or `allowedFilters` and `excludedFilters`. If an invalid combination is found, it will default to what is specified in the `allowed*` options @@ -65,8 +65,10 @@ In order for the Bootstrap styles to be applied, the component target element ne ```html
-
-
+
+
+
+
``` diff --git a/index.html b/index.html index 5bc5440..aea806c 100644 --- a/index.html +++ b/index.html @@ -10,16 +10,25 @@ integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" /> - --> + --> + -
diff --git a/src/bootstrap/access.scss b/src/bootstrap/access.scss index c05201b..f35115b 100644 --- a/src/bootstrap/access.scss +++ b/src/bootstrap/access.scss @@ -9,7 +9,8 @@ $warning: #ef7537; $accordion-button-icon: url("data:image/svg+xml,"); $accordion-button-active-icon: $accordion-button-icon; -body { +body, +:root { --contrast: #232323; --contrast-2: #3f3f3f; --contrast-3: #707070; @@ -18,14 +19,14 @@ body { --base-3: #ffffff; --black: #000000; --teal-200: #ecf9f8; - --teal-300: #CEE8E9; + --teal-300: #cee8e9; --teal-400: #48c0b9; --teal-600: #107180; --teal-700: #1a5b6e; --yellow-400: #ffc42d; --orange-400: #f07537; // Bootstrap - --bs-font-sans-serif: 'Archivo', sans-serif; + --bs-font-sans-serif: "Archivo", sans-serif; --bs-link-color: var(--teal-600); --bs-link-hover-color: var(--orange-400); -} \ No newline at end of file +} diff --git a/src/main.jsx b/src/main.jsx index 3aacf13..cfce43e 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -26,6 +26,7 @@ export function shadowTarget( ) { const shadow = host.attachShadow({ mode: "open" }); const bsOuter = document.createElement("div"); + const bsMiddle = document.createElement("div"); const bsInner = document.createElement("div"); const target = document.createElement("div"); const bsStyle = document.createElement("link"); @@ -41,15 +42,19 @@ export function shadowTarget( accessStyle.href = `${baseUrl}/access.css`; bsInner.appendChild(target); - bsOuter.appendChild(bsInner); + bsMiddle.appendChild(bsInner); + bsOuter.appendChild(bsMiddle); shadow.appendChild(bsStyle); shadow.appendChild(uiStyle); shadow.appendChild(accessStyle); shadow.appendChild(bsOuter); bsOuter.classList.add("bootstrap"); - if (bootstrapVariables) bsInner.classList.add("bootstrap-variables"); - if (bootstrapFonts) bsInner.classList.add("bootstrap-fonts"); + if (bootstrapVariables) bsMiddle.classList.add("bootstrap-variables"); + if (bootstrapFonts) { + bsInner.classList.add("bootstrap-fonts"); + bsInner.setAttribute("data-bs-theme", "light"); + } return target; } @@ -123,11 +128,7 @@ export function publicationsSelect({ target, routes }) { ); } -export function resourceCatalog({ - target, - catalogSources, - onRamps -}) { +export function resourceCatalog({ target, catalogSources, onRamps }) { const store = configureStore({ reducer: { resourceCatalog: catalogSlice, @@ -135,10 +136,7 @@ export function resourceCatalog({ }); ReactDOM.createRoot(target).render( - + ); }