feat: isolate styles from page contents

src/styles/core.css

@@ -1,10 +1,15 @@
 /* Core styles for Carbon Visualizer extension */
 
+.cv-panel,
+.cv-panel :where(*, *::before, *::after):not(svg *) {
+  all: revert;
+}
+
 /* TODO: these green values were generated using https://oklchroma.utilitybend.com/ and are not part of any design specs.
  * The custom properties are used in this file and welcome.css.
  * Feel free to remove them in favor of our own color palette!
  */
-:root {
+.cv-panel {
   /* greens */
   --cv-primary-green: hsl(114deg 64.9% 32.0%);
   --cv-primary-green-base: 0.05;
@@ -18,128 +23,138 @@
   --cv-primary-green-80: oklch(from var(--cv-primary-green) 80% calc(var(--cv-primary-green-base) + (sin(0.3 * pi) * c)) h);
   --cv-primary-green-90: oklch(from var(--cv-primary-green) 90% calc(var(--cv-primary-green-base) + (sin(0.2 * pi) * c)) h);
   --cv-primary-green-100: oklch(from var(--cv-primary-green) 100% calc(var(--cv-primary-green-base) + (sin(0.1 * pi) * c)) h);
-  
+
   /* neutrals */
   --cv-black: hsl(0deg 0% 0%);
   --cv-white: hsl(0deg 0% 100%);
-}
 
-.cv-panel {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 18.75rem;
-  height: 100vh;
-  z-index: 999999;
-  transform: translateX(-100%);
-  transition: transform 0.3s ease;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  box-shadow: 0.125rem 0 0.625rem var(--cv-black);
-  overflow-y: auto;
-}
+  font-family: var(--cv-font-family-sans);
 
-.cv-panel--visible {
-  transform: translateX(0);
-}
+  :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, figure, blockquote) {
+    line-height: calc(1em + 0.5rem);
 
-/* Panel header */
-.cv-header {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  padding: 1rem 1.5rem;
-  /* TODO: The `border-bottom` color is equal to `--cv-color-gray-50` and should be replaced with the variable when implemented */
-  border-bottom: 1px solid oklch(from oklch(50.0% 0.000 0) 50% calc(0 + (sin(0.6 * pi) * c)) h);
-  background-color: var(--cv-white);
-}
+    &:not(:first-child) {
+      margin-block-start: 1em;
+    }
+  }
 
-.cv-header__logo {
-  --header-logo-dimensions: 2rem;
+  &.cv-panel {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 18.75rem;
+    height: 100vh;
+    z-index: 999999;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    box-shadow: 0.125rem 0 0.625rem var(--cv-black);
+    overflow-y: auto;
+  }
 
-  width: var(--header-logo-dimensions);
-  height: var(--header-logo-dimensions);
-}
+  &.cv-panel--visible {
+    transform: translateX(0);
+  }
 
-.cv-header__title {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--cv-black);
-}
+  /* Panel header */
+  .cv-header {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    padding: 1rem 1.5rem;
+    /* TODO: The `border-bottom` color is equal to `--cv-color-gray-50` and should be replaced with the variable when implemented */
+    border-bottom: 1px solid oklch(from oklch(50.0% 0.000 0) 50% calc(0 + (sin(0.6 * pi) * c)) h);
+    background-color: var(--cv-white);
+  }
 
-/* Panel content */
-.cv-panel__content {
-  padding: 1.5rem;
-}
+  .cv-header__logo {
+    --header-logo-dimensions: 2rem;
 
-/* Features list & content */
-.cv-feature {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem;
-}
+    width: var(--header-logo-dimensions);
+    height: var(--header-logo-dimensions);
+  }
 
-.cv-feature__icon {
-  font-size: 1.25rem;
-  flex-shrink: 0;
-}
+  .cv-header__title {
+    margin: 0;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--cv-black);
+  }
 
-.cv-feature__text {
-  color: var(--cv-white);
-  font-weight: 500;
-}
+  /* Panel content */
+  .cv-panel__content {
+    padding: 1.5rem;
+  }
 
-/* Button */
-.cv-btn {
-  width: 100%;
-  padding: 1rem;
-  border: none;
-  border-radius: 0.5rem;
-  font-size: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
+  /* Features list & content */
+  .cv-feature {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem;
+  }
 
-.cv-btn--primary {
-  background: transparent;
-  color: var(--cv-white);
-  border: 2px solid var(--cv-white);
-}
+  .cv-feature__icon {
+    font-size: 1.25rem;
+    flex-shrink: 0;
+  }
 
-.cv-btn--primary:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px var(--cv-black);
-}
+  .cv-feature__text {
+    color: var(--cv-white);
+    font-weight: 500;
+  }
 
-.cv-btn--primary:active {
-  transform: translateY(0);
-}
+  /* Button */
+  .cv-btn {
+    width: 100%;
+    padding: 1rem;
+    border: none;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
 
-.cv-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: none;
-}
+  .cv-btn--primary {
+    background: transparent;
+    color: var(--cv-white);
+    border: 2px solid var(--cv-white);
+  }
 
-/* Responsive design */
-@media (max-width: 480px) {
-  .cv-panel {
-    width: 100%;
+  .cv-btn--primary:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px var(--cv-black);
   }
-}
 
-/* High contrast mode support */
-@media (prefers-contrast: more) {
-  .cv-panel {
-    border: 2px solid var(--cv-black);
+  .cv-btn--primary:active {
+    transform: translateY(0);
+  }
+
+  .cv-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+  }
+
+  /* Responsive design */
+  @media (max-width: 480px) {
+    .cv-panel {
+      width: 100%;
+    }
+  }
+
+  /* High contrast mode support */
+  @media (prefers-contrast: more) {
+    .cv-panel {
+      border: 2px solid var(--cv-black);
+    }
   }
-}
 
-/* Reduced motion support */
-@media (prefers-reduced-motion) {
-  .cv-panel {
-    transition: none;
+  /* Reduced motion support */
+  @media (prefers-reduced-motion) {
+    .cv-panel {
+      transition: none;
+    }
   }
 }

src/styles/generic/typography.css

@@ -1,4 +1,4 @@
-.cv {
+.cv-panel {
   * {
     max-inline-size: var(--cv-max-line-length);
   }

src/styles/results.css

@@ -1,50 +1,51 @@
 
 /* Results panel variant styles */
-
-.cv-panel--results {
-  text-align: center;
-  background: linear-gradient(to bottom,var(--cv-primary-green-10), var(--cv-primary-green-70) 80%);
-  color: var(--cv-white);
-}
-
-.cv-results__icon {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-}
-
-.cv-results__title {
-  margin: 0 0 1rem 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--cv-white);
-}
-
-.cv-results__description {
-  margin: 0 0 2rem 0;
-  color: var(--cv-white);
-  line-height: 1.5;
-}
-
-.cv-results__sections {
-  text-align: start;
-  margin-bottom: 2.0rem;
-}
-
-.cv-results__group {
-  padding: 1.0rem;
-  border: 1px solid currentColor;
-  border-inline-start-width: 4px;
-  border-radius: 1.0rem;
-}
-
-.cv-results__group > *:first-child {
-  margin-block-start: 0;
-}
-
-.cv-results__group > *:last-child {
-  margin-block-end: 0;
+#carbon-visualizer-results-panel {
+  &.cv-panel--results {
+    text-align: center;
+    background: linear-gradient(to bottom,var(--cv-primary-green-10), var(--cv-primary-green-70) 80%);
+    color: var(--cv-white);
+  }
+
+  .cv-results__icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+  }
+
+  .cv-results__title {
+    margin: 0 0 1rem 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--cv-white);
+  }
+
+  .cv-results__description {
+    margin: 0 0 2rem 0;
+    color: var(--cv-white);
+    line-height: 1.5;
+  }
+
+  .cv-results__sections {
+    text-align: start;
+    margin-bottom: 2.0rem;
+  }
+
+  .cv-results__group {
+    padding: 1.0rem;
+    border: 1px solid currentColor;
+    border-inline-start-width: 4px;
+    border-radius: 1.0rem;
+  }
+
+  .cv-results__group > *:first-child {
+    margin-block-start: 0;
+  }
+
+  .cv-results__group > *:last-child {
+    margin-block-end: 0;
+  }
+
+  .cv-results__details summary {
+    margin-block-end: 0.5rem;
+  }
 }
-
-.cv-results__details summary {
-  margin-block-end: 0.5rem;
-}

src/styles/themes/default.css

@@ -1,4 +1,4 @@
-.cv,
+.cv-panel,
 [data-theme] {
   /* set up light and dark mode colors */
   /* don't use these directly in components */

src/styles/tokens/color.css

@@ -1,4 +1,4 @@
-.cv {
+.cv-panel {
   --cv-color-pink: oklch(50.0% 0.200 345);
   --cv-color-pink-base: 0.05;
   --cv-color-pink-10: oklch(from var(--cv-color-pink) 10% calc(var(--cv-color-pink-base) + (sin(1.0 * pi) * c)) h);

src/styles/tokens/size.css

@@ -1,4 +1,4 @@
-.cv {
+.cv-panel {
   --cv-page-gutter: 1.5rem;
   --cv-max-content-width: 75rem;
   --cv-max-line-length: 72ch;

src/styles/tokens/typography.css

@@ -1,15 +1,15 @@
-.cv {
+.cv-panel {
   /* somewhat randomly selected system font stacks from https://modernfontstacks.com/ (replace as needed) */
   --cv-font-family-display: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
   --cv-font-family-sans: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
-  --cv-font-family-serif: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
+  --cv-font-family-serif: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
   --cv-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
 
   /* commonly needed font sizes, named for what they're used for (avoiding overly specific names like h1, h2, etc.) */
   --cv-font-size-display-lg: 7.25rem;
   --cv-font-size-display-md: 5.5rem;
   --cv-font-size-display-sm: 4rem;
-  --cv-font-size-heading-xxl: 3rem;
+  --cv-font-size-heading-xxl: 2.75rem;
   --cv-font-size-heading-xl: 2.25rem;
   --cv-font-size-heading-lg: 1.75rem;
   --cv-font-size-heading-md: 1.25rem;