feat: improve style isolation without breaking things

Author: dustin-jw

src/styles/core.css

@@ -1,10 +1,10 @@
 /* Core styles for Carbon Visualizer extension */
 
 :where(#carbon-visualizer-welcome-panel,
-#carbon-visualizer-welcome-panel *,
-#carbon-visualizer-welcome-panel *::before,
-#carbon-visualizer-welcome-panel *::after) {
-  all: initial;
+  #carbon-visualizer-welcome-panel *,
+  #carbon-visualizer-welcome-panel *::before,
+  #carbon-visualizer-welcome-panel *::after) {
+  all: revert;
 }
 
 /* TODO: these green values were generated using https://oklchroma.utilitybend.com/ and are not part of any design specs.
@@ -29,6 +29,16 @@
   /* neutrals */
   --cv-black: hsl(0deg 0% 0%);
   --cv-white: hsl(0deg 0% 100%);
+
+  font-family: var(--cv-font-family-sans);
+
+  :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, figure, blockquote) {
+    line-height: calc(1em + 0.5rem);
+
+    &:not(:first-child) {
+      margin-block-start: 1em;
+    }
+  }
 }
 
 .cv-panel {

src/styles/generic/typography.css

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

src/styles/themes/default.css

@@ -1,4 +1,4 @@
-.cv,
+#carbon-visualizer-welcome-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 {
+#carbon-visualizer-welcome-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 {
+#carbon-visualizer-welcome-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 {
+#carbon-visualizer-welcome-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;