diff --git a/src/styles/core.css b/src/styles/core.css index 3644fec..a40953c 100644 --- a/src/styles/core.css +++ b/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; + } } } diff --git a/src/styles/generic/typography.css b/src/styles/generic/typography.css index 9c5a27b..7e9c8bd 100644 --- a/src/styles/generic/typography.css +++ b/src/styles/generic/typography.css @@ -1,4 +1,4 @@ -.cv { +.cv-panel { * { max-inline-size: var(--cv-max-line-length); } diff --git a/src/styles/results.css b/src/styles/results.css index f3c468f..9d48fff 100644 --- a/src/styles/results.css +++ b/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; -} \ No newline at end of file diff --git a/src/styles/themes/default.css b/src/styles/themes/default.css index a5544e6..283d4b7 100644 --- a/src/styles/themes/default.css +++ b/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 */ diff --git a/src/styles/tokens/color.css b/src/styles/tokens/color.css index 2b9ccdf..937bff3 100644 --- a/src/styles/tokens/color.css +++ b/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); diff --git a/src/styles/tokens/size.css b/src/styles/tokens/size.css index 0197ec2..714641d 100644 --- a/src/styles/tokens/size.css +++ b/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; diff --git a/src/styles/tokens/typography.css b/src/styles/tokens/typography.css index d3e21e4..8e41969 100644 --- a/src/styles/tokens/typography.css +++ b/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; diff --git a/src/styles/welcome.css b/src/styles/welcome.css index f016ca9..a07af74 100644 --- a/src/styles/welcome.css +++ b/src/styles/welcome.css @@ -1,33 +1,36 @@ /* Welcome panel variant styles */ -.cv-panel--welcome { - text-align: center; - background: linear-gradient(to bottom,var(--cv-primary-green-10), var(--cv-primary-green-70) 80%); - color: var(--cv-white); -} +#carbon-visualizer-welcome-panel { + &.cv-panel--welcome { + text-align: center; + background: linear-gradient(to bottom,var(--cv-primary-green-10), var(--cv-primary-green-70) 80%); + color: var(--cv-white); + } -.cv-panel--welcome__icon { - font-size: 3rem; - margin-bottom: 1rem; -} + .cv-panel--welcome__icon { + font-size: 3rem; + margin-bottom: 1rem; + } -.cv-panel--welcome__title { - margin: 0 0 1rem 0; - font-size: 1.25rem; - font-weight: 600; - color: var(--cv-white); -} + .cv-panel--welcome__title { + margin: 0 0 1rem 0; + font-size: 1.25rem; + font-weight: 600; + color: var(--cv-white); + } -.cv-panel--welcome__description { - margin: 0 0 2rem 0; - color: var(--cv-white); - line-height: 1.5; -} + .cv-panel--welcome__description { + margin: 0 0 2rem 0; + color: var(--cv-white); + line-height: 1.5; + } -.cv-panel--welcome__features { - display: flex; - flex-direction: column; - gap: 0.75rem; - margin-bottom: 2rem; + .cv-panel--welcome__features { + display: flex; + flex-direction: column; + gap: 0.75rem; + margin-bottom: 2rem; + padding-inline: 0; + } }