Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: [WIP] other way to fix no-js dark theme #18077

Closed
wants to merge 4 commits into from
Closed

docs: [WIP] other way to fix no-js dark theme #18077

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dd5a661
docs: [WIP] no-js dark theme fix
amareshsm Feb 3, 2024
b99d498
Merge branch 'main' into fix-no-js-dark-theme-2
amareshsm Feb 6, 2024
3b8b4f5
Merge branch 'main' into fix-no-js-dark-theme-2
amareshsm Feb 19, 2024
3378fcf
Merge branch 'main' into fix-no-js-dark-theme-2
amareshsm Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 0 additions & 9 deletions docs/src/_includes/components/logo.html
View file
Open in desktop
@@ -1,13 +1,4 @@
<div class="logo">
<style>
[data-theme="dark"] .logo-component {
fill: #fff;
}

[data-theme="dark"] #logo-center {
opacity: 0.6;
}
</style>
<svg class="brand-logo" width="203" height="58" viewBox="0 0 203 58" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="ESLint logo">
<path d="M46.5572 21.1093L34.0167 13.8691C33.7029 13.6879 33.3161 13.6879 33.0023 13.8691L20.4616 21.1093C20.148 21.2905 19.9543 21.6253 19.9543 21.9878V36.4681C19.9543 36.8304 20.148 37.1654 20.4616 37.347L33.0023 44.5871C33.3161 44.7684 33.7029 44.7684 34.0167 44.5871L46.5572 37.347C46.871 37.1657 47.0644 36.8306 47.0644 36.4681V21.9878C47.0641 21.6253 46.8707 21.2905 46.5572 21.1093Z" fill="#8080F2" id="logo-center" class="logo-component" />
<path d="M0.904381 27.7046L15.8878 1.63772C16.4321 0.695223 17.4375 0 18.5258 0H48.4931C49.5817 0 50.5873 0.695223 51.1316 1.63772L66.115 27.6471C66.6593 28.5899 66.6593 29.7796 66.115 30.7224L51.1316 56.5756C50.5873 57.5181 49.5817 58 48.4931 58H18.526C17.4377 58 16.4321 57.5326 15.8881 56.5899L0.90464 30.6944C0.359854 29.7522 0.359854 28.6471 0.904381 27.7046ZM13.3115 40.2393C13.3115 40.6225 13.5422 40.977 13.8744 41.1689L32.96 52.1803C33.2919 52.3719 33.7078 52.3719 34.0397 52.1803L53.1401 41.1689C53.4721 40.977 53.7043 40.6228 53.7043 40.2393V18.2161C53.7043 17.8327 53.4754 17.4785 53.1432 17.2866L34.0584 6.27513C33.7264 6.08327 33.3111 6.08327 32.9792 6.27513L13.8775 17.2866C13.5453 17.4785 13.3115 17.8327 13.3115 18.2161V40.2393V40.2393Z" fill="#4B32C3" class="logo-component" />
Expand Down
7 changes: 7 additions & 0 deletions docs/src/assets/scss/components/logo.scss
View file
Open in desktop
@@ -0,0 +1,7 @@
.logo-component {
fill: var(--logo-fill-color);
}

#logo-center {
opacity: var(--logo-opacity);
}
2 changes: 2 additions & 0 deletions docs/src/assets/scss/styles.scss
View file
Open in desktop
Expand Up @@ -2,6 +2,7 @@
@import "tokens/spacing";
@import "tokens/typography";
@import "tokens/ui";
@import "tokens/opacity";

@import "foundations";
@import "syntax-highlighter";
Expand Down Expand Up @@ -29,6 +30,7 @@
@import "components/index"; // used in component library
@import "components/tabs";
@import "components/resources";
@import "components/logo";

@import "ads";

Expand Down
12 changes: 2 additions & 10 deletions docs/src/assets/scss/syntax-highlighter.scss
View file
Open in desktop
Expand Up @@ -33,11 +33,7 @@ pre[class*="language-"] {
overflow: auto;
border-radius: var(--border-radius);
background-color: var(--lightest-background-color);
color: var(--color-neutral-900);

[data-theme="dark"] & {
color: var(--color-neutral-100);
}
color: var(--code-color);

&.line-numbers-mode {
padding-left: calc(1.5rem + 2.4em + 1.2rem);
Expand All @@ -60,11 +56,7 @@ pre[class*="language-"] {
.token.prolog,
.token.doctype,
.token.cdata {
color: #6e7f8e;

[data-theme="dark"] & {
color: #8e9fae;
}
color: var(--code-token-color);
}

.token.namespace {
Expand Down
18 changes: 18 additions & 0 deletions docs/src/assets/scss/tokens/opacity.scss
View file
Open in desktop
@@ -0,0 +1,18 @@
:root {
--opacity-100: 1;
--opacity-60: 0.6;
}

html[data-theme="light"] {
--logo-opacity: var(--opacity-100);
}

html[data-theme="dark"] {
--logo-opacity: var(--opacity-60);
}

@media (prefers-color-scheme: dark) {
:root {
--logo-opacity: var(--opacity-60);
}
}
20 changes: 20 additions & 0 deletions docs/src/assets/scss/tokens/themes.scss
View file
Open in desktop
Expand Up @@ -61,6 +61,9 @@
--color-rose-800: #a11043;
--color-rose-900: #89123e;

--color-slate-grey: #6e7f8e;
--color-cadet-grey: #8e9fae;

/* Tier 2 variables */
--primary-button-background-color: var(--color-primary-800);
--primary-button-hover-color: var(--color-primary-900);
Expand Down Expand Up @@ -89,6 +92,10 @@
--hero-background-color: var(--color-neutral-25);
--footer-background-color: var(--color-neutral-25);
--outline-color: var(--color-brand);

--logo-fill-color: var(--color-primary-800);
--code-color: var(--color-neutral-900);
--code-token-color: var(--color-slate-grey);
}

@media (prefers-color-scheme: dark) {
Expand All @@ -110,6 +117,11 @@
--hero-background-color: var(--color-neutral-800);
--footer-background-color: var(--color-neutral-800);
--outline-color: #fff;
--img-background-color: var(--color-neutral-300);

--logo-fill-color: #fff;
--code-color: var(--color-neutral-100);
--code-token-color: var(--color-cadet-grey);
}
}

Expand All @@ -132,6 +144,10 @@ html[data-theme="light"] {
--footer-background-color: var(--color-neutral-25);
--outline-color: var(--color-brand);
--img-background-color: #fff;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Non-Actionable] Existing code: this --img-background-color is only used in div.img-container, which is used in contribute/architecture and extend/code-path-analysis pages. In light mode the images on those pages have a white background anyway. So 👍 there's no visual difference from manually adding this to the default :root styles.

Just noting as it's the only exception to the styles matching up. 🙂


--logo-fill-color: var(--color-primary-800);
--code-color: var(--color-neutral-900);
--code-token-color: var(--color-slate-grey);
}

html[data-theme="dark"] {
Expand All @@ -155,4 +171,8 @@ html[data-theme="dark"] {
--footer-background-color: var(--color-neutral-800);
--outline-color: #fff;
--img-background-color: var(--color-neutral-300);

--logo-fill-color: #fff;
--code-color: var(--color-neutral-100);
--code-token-color: var(--color-cadet-grey);
}