encapsulate styles to shadow dom only

src/app/index.ts

@@ -1,7 +1,7 @@
 import { State, stateProvider } from '../models/state';
 import '../components/UsgApp.mjs';
 import { TDataEntries } from '../models/types';
-import 'style-loader!../components/styles/light-dom.css';
+// import '../components/styles/shadow-dom.css';
 
 async function start() {
 	const usgData = (await import('../data/usaid_data.csv'))

src/components/styles/common-styles.scss

@@ -0,0 +1,250 @@
+// Commons Styles
+:host {
+    // Typography
+    --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
+        "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+        "Segoe UI Symbol", "Noto Color Emoji";
+    --line-height: 1.5;
+    --font-weight: 400;
+    --font-size: 16px;
+
+    // Responsive typography
+    @if $enable-responsive-typography {
+        @if map-get($breakpoints, "sm") {
+            @media (min-width: map-get($breakpoints, "sm")) {
+                --font-size: 17px;
+            }
+        }
+
+        @if map-get($breakpoints, "md") {
+            @media (min-width: map-get($breakpoints, "md")) {
+                --font-size: 18px;
+            }
+        }
+
+        @if map-get($breakpoints, "lg") {
+            @media (min-width: map-get($breakpoints, "lg")) {
+                --font-size: 19px;
+            }
+        }
+
+        @if map-get($breakpoints, "xl") {
+            @media (min-width: map-get($breakpoints, "xl")) {
+                --font-size: 20px;
+            }
+        }
+    }
+
+    // Borders
+    --border-radius: 0.25rem;
+    --border-width: 1px;
+    --outline-width: 3px;
+
+    // Spacings
+    --spacing: 1rem;
+
+    // Spacings for typography elements
+    --typography-spacing-vertical: 1.5rem;
+
+    // Spacings for body > header, body > main, body > footer, section, article
+    --block-spacing-vertical: calc(var(--spacing) * 2);
+    --block-spacing-horizontal: var(--spacing);
+
+    @if ($enable-classes and $enable-grid) {
+        --grid-spacing-vertical: 0;
+        --grid-spacing-horizontal: var(--spacing);
+    }
+
+    // Spacings for form elements and button
+    --form-element-spacing-vertical: 0.75rem;
+    --form-element-spacing-horizontal: 1rem;
+
+    // Spacings for nav component
+    --nav-element-spacing-vertical: 1rem;
+    --nav-element-spacing-horizontal: 0.5rem;
+    --nav-link-spacing-vertical: 0.5rem;
+    --nav-link-spacing-horizontal: 0.5rem;
+
+    // Font weight for form labels & fieldsets legend
+    --form-label-font-weight: var(--font-weight);
+
+    // Transitions
+    --transition: 0.2s ease-in-out;
+
+    // Modal (<dialog>)
+    --modal-overlay-backdrop-filter: blur(0.25rem);
+}
+
+// Responsives spacings
+@if $enable-responsive-spacings {
+
+    // Sectioning
+    #{$semantic-root-element}>header,
+    #{$semantic-root-element}>main,
+    #{$semantic-root-element}>footer,
+    section {
+        @if map-get($breakpoints, "sm") {
+            @media (min-width: map-get($breakpoints, "sm")) {
+                --block-spacing-vertical: calc(var(--spacing) * 2.5);
+            }
+        }
+
+        @if map-get($breakpoints, "md") {
+            @media (min-width: map-get($breakpoints, "md")) {
+                --block-spacing-vertical: calc(var(--spacing) * 3);
+            }
+        }
+
+        @if map-get($breakpoints, "lg") {
+            @media (min-width: map-get($breakpoints, "lg")) {
+                --block-spacing-vertical: calc(var(--spacing) * 3.5);
+            }
+        }
+
+        @if map-get($breakpoints, "xl") {
+            @media (min-width: map-get($breakpoints, "xl")) {
+                --block-spacing-vertical: calc(var(--spacing) * 4);
+            }
+        }
+    }
+
+    // Card (<article>)
+    article {
+        @if map-get($breakpoints, "sm") {
+            @media (min-width: map-get($breakpoints, "sm")) {
+                --block-spacing-horizontal: calc(var(--spacing) * 1.25);
+            }
+        }
+
+        @if map-get($breakpoints, "md") {
+            @media (min-width: map-get($breakpoints, "md")) {
+                --block-spacing-horizontal: calc(var(--spacing) * 1.5);
+            }
+        }
+
+        @if map-get($breakpoints, "lg") {
+            @media (min-width: map-get($breakpoints, "lg")) {
+                --block-spacing-horizontal: calc(var(--spacing) * 1.75);
+            }
+        }
+
+        @if map-get($breakpoints, "xl") {
+            @media (min-width: map-get($breakpoints, "xl")) {
+                --block-spacing-horizontal: calc(var(--spacing) * 2);
+            }
+        }
+    }
+
+    // Modal
+    dialog>article {
+
+        --block-spacing-vertical: calc(var(--spacing) * 2);
+        --block-spacing-horizontal: var(--spacing);
+
+        @if map-get($breakpoints, "sm") {
+            @media (min-width: map-get($breakpoints, "sm")) {
+                --block-spacing-vertical: calc(var(--spacing) * 2.5);
+                --block-spacing-horizontal: calc(var(--spacing) * 1.25);
+            }
+        }
+
+        @if map-get($breakpoints, "md") {
+            @media (min-width: map-get($breakpoints, "md")) {
+                --block-spacing-vertical: calc(var(--spacing) * 3);
+                --block-spacing-horizontal: calc(var(--spacing) * 1.5);
+            }
+        }
+    }
+}
+
+// Link
+a {
+    --text-decoration: none;
+
+    // Secondary & Contrast
+    @if $enable-classes {
+
+        &.secondary,
+        &.contrast {
+            --text-decoration: underline;
+        }
+    }
+}
+
+// Small
+small {
+    --font-size: 0.875em;
+}
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    --font-weight: 700;
+}
+
+h1 {
+    --font-size: 2rem;
+    --typography-spacing-vertical: 3rem;
+}
+
+h2 {
+    --font-size: 1.75rem;
+    --typography-spacing-vertical: 2.625rem;
+}
+
+h3 {
+    --font-size: 1.5rem;
+    --typography-spacing-vertical: 2.25rem;
+}
+
+h4 {
+    --font-size: 1.25rem;
+    --typography-spacing-vertical: 1.874rem;
+}
+
+h5 {
+    --font-size: 1.125rem;
+    --typography-spacing-vertical: 1.6875rem;
+}
+
+// Forms elements
+[type="checkbox"],
+[type="radio"] {
+    --border-width: 2px;
+}
+
+[type="checkbox"][role="switch"] {
+    --border-width: 3px;
+}
+
+// Table
+thead,
+tfoot {
+
+    th,
+    td {
+        --border-width: 3px;
+    }
+}
+
+:not(thead, tfoot)>*>td {
+    --font-size: 0.875em;
+}
+
+// Code
+pre,
+code,
+kbd,
+samp {
+    --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
+        "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
+        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+kbd {
+    --font-weight: bolder;
+}