From 8aaf109a731557b1560d632af4037786b55e5aef Mon Sep 17 00:00:00 2001 From: dustin-jw Date: Tue, 11 Nov 2025 11:54:26 -0700 Subject: [PATCH 1/2] feat: isolate styles from page contents --- src/styles/core.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/styles/core.css b/src/styles/core.css index 83f5c27..f50fab8 100644 --- a/src/styles/core.css +++ b/src/styles/core.css @@ -1,10 +1,17 @@ /* 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; +} + /* 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 { +#carbon-visualizer-welcome-panel { /* greens */ --cv-primary-green: hsl(114deg 64.9% 32.0%); --cv-primary-green-base: 0.05; @@ -18,7 +25,7 @@ --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%); From 6199d597f76556ac7cf87844c93204d0be9fec60 Mon Sep 17 00:00:00 2001 From: dustin-jw Date: Tue, 2 Dec 2025 11:46:01 -0700 Subject: [PATCH 2/2] feat: improve style isolation without breaking things --- src/styles/core.css | 18 ++++++++++++++---- src/styles/generic/typography.css | 2 +- src/styles/themes/default.css | 2 +- src/styles/tokens/color.css | 2 +- src/styles/tokens/size.css | 2 +- src/styles/tokens/typography.css | 6 +++--- 6 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/styles/core.css b/src/styles/core.css index f50fab8..5aac3e6 100644 --- a/src/styles/core.css +++ b/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 { diff --git a/src/styles/generic/typography.css b/src/styles/generic/typography.css index 9c5a27b..c86ae3b 100644 --- a/src/styles/generic/typography.css +++ b/src/styles/generic/typography.css @@ -1,4 +1,4 @@ -.cv { +#carbon-visualizer-welcome-panel { * { max-inline-size: var(--cv-max-line-length); } diff --git a/src/styles/themes/default.css b/src/styles/themes/default.css index a5544e6..2de2078 100644 --- a/src/styles/themes/default.css +++ b/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 */ diff --git a/src/styles/tokens/color.css b/src/styles/tokens/color.css index 2b9ccdf..f2ef365 100644 --- a/src/styles/tokens/color.css +++ b/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); diff --git a/src/styles/tokens/size.css b/src/styles/tokens/size.css index 0197ec2..c53d792 100644 --- a/src/styles/tokens/size.css +++ b/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; diff --git a/src/styles/tokens/typography.css b/src/styles/tokens/typography.css index d3e21e4..051121d 100644 --- a/src/styles/tokens/typography.css +++ b/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;