From 8816013a15ceb9a52a733a919b8e0a3d0b4851f2 Mon Sep 17 00:00:00 2001 From: Tanuj Kanti Date: Tue, 17 Sep 2024 22:45:45 +0530 Subject: [PATCH 1/2] fix: style issues in no-js mode --- src/_includes/components/logo.html | 21 ++++++--------------- src/assets/scss/components/logo.scss | 12 ++++++++++++ src/assets/scss/forms.scss | 6 +----- src/assets/scss/sponsors.scss | 9 +++------ src/assets/scss/styles.scss | 2 ++ src/assets/scss/tokens/opacity.scss | 18 ++++++++++++++++++ src/assets/scss/tokens/themes.scss | 19 +++++++++++++++++++ src/assets/scss/tokens/ui.scss | 17 +++++++++++++++++ 8 files changed, 78 insertions(+), 26 deletions(-) create mode 100644 src/assets/scss/components/logo.scss create mode 100644 src/assets/scss/tokens/opacity.scss diff --git a/src/_includes/components/logo.html b/src/_includes/components/logo.html index 1b874feb22..bd4c2ba4be 100644 --- a/src/_includes/components/logo.html +++ b/src/_includes/components/logo.html @@ -1,21 +1,12 @@ diff --git a/src/assets/scss/components/logo.scss b/src/assets/scss/components/logo.scss new file mode 100644 index 0000000000..3c514d2aee --- /dev/null +++ b/src/assets/scss/components/logo.scss @@ -0,0 +1,12 @@ +.logo-component { + fill: var(--logo-color); +} + +.logo-title { + fill: var(--headings-color); +} + +#logo-center { + opacity: var(--logo-center-opacity); + fill: var(--logo-center-color); +} diff --git a/src/assets/scss/forms.scss b/src/assets/scss/forms.scss index cf9ec5175f..6b93412048 100644 --- a/src/assets/scss/forms.scss +++ b/src/assets/scss/forms.scss @@ -63,15 +63,11 @@ input::placeholder { gap: 0.5rem; font-size: 0.875rem; font-family: var(--text-font); - color: var(--color-neutral-700); + color: var(--label-text-color); font-weight: 400; line-height: 1.5; margin-bottom: 0.25rem; margin-block-end: 0.25rem; - - [data-theme="dark"] & { - color: var(--color-neutral-100); - } } input { diff --git a/src/assets/scss/sponsors.scss b/src/assets/scss/sponsors.scss index 5eb7c148a8..90f761ae56 100644 --- a/src/assets/scss/sponsors.scss +++ b/src/assets/scss/sponsors.scss @@ -26,18 +26,15 @@ display: block; height: auto; max-height: 3rem; - - [data-theme="dark"] & { - background-color: #fff; - border-radius: var(--border-radius); - } + background-color: var(--sponsor-background-color); + border-radius: var(--sponsor-img-border-radius); } } .sponsors.sponsors--backers { picture, img { - border-radius: 50%; + border-radius: var(--sponsor-backers-img-border-radius); } } diff --git a/src/assets/scss/styles.scss b/src/assets/scss/styles.scss index d2195c9499..6227312cfe 100644 --- a/src/assets/scss/styles.scss +++ b/src/assets/scss/styles.scss @@ -2,6 +2,7 @@ @import "tokens/spacing"; @import "tokens/typography"; @import "tokens/ui"; +@import "tokens/opacity"; @import "foundations"; @import "syntax-highlighter"; @@ -38,5 +39,6 @@ @import "components/index"; @import "components/playground-configuration"; @import "components/popup"; +@import "components/logo"; @import "utilities"; diff --git a/src/assets/scss/tokens/opacity.scss b/src/assets/scss/tokens/opacity.scss new file mode 100644 index 0000000000..cda62f6dd8 --- /dev/null +++ b/src/assets/scss/tokens/opacity.scss @@ -0,0 +1,18 @@ +:root { + --opacity-100: 1; + --opaticy-60: 0.6; +} + +@media (prefers-color-scheme: "dark") { + :root { + --logo-center-opacity: var(--opaticy-60); + } +} + +html[data-theme="light"] { + --logo-center-opacity: var(--opaticy-100); +} + +html[data-theme="dark"] { + --logo-center-opacity: var(--opaticy-60); +} diff --git a/src/assets/scss/tokens/themes.scss b/src/assets/scss/tokens/themes.scss index 7518534fb8..86b9ba3563 100644 --- a/src/assets/scss/tokens/themes.scss +++ b/src/assets/scss/tokens/themes.scss @@ -129,6 +129,13 @@ --editor-bracket-match-outline-color: var(--color-neutral-600); --editor-bracket-match-background-color: var(--color-neutral-700); --editor-bracket-match-color: var(--color-neutral-25); + + --logo-color: #fff; + --logo-center-color: #fff; + + --sponsor-background-color: #fff; + + --label-text-color: var(--color-neutral-100); } } @@ -158,6 +165,11 @@ html[data-theme="light"] { --editor-bracket-match-outline-color: var(--color-neutral-200); --editor-bracket-match-background-color: var(--color-neutral-100); --editor-bracket-match-color: none; + + --logo-color: var(--color-primary-800); + --logo-center-color: var(--color-primary-600); + + --label-text-color: var(--color-neutral-700); } html[data-theme="dark"] { @@ -188,4 +200,11 @@ html[data-theme="dark"] { --editor-bracket-match-outline-color: var(--color-neutral-600); --editor-bracket-match-background-color: var(--color-neutral-700); --editor-bracket-match-color: var(--color-neutral-25); + + --logo-color: #fff; + --logo-center-color: #fff; + + --sponsor-background-color: #fff; + + --label-text-color: var(--color-neutral-100); } diff --git a/src/assets/scss/tokens/ui.scss b/src/assets/scss/tokens/ui.scss index 7865467aff..051bee2d23 100644 --- a/src/assets/scss/tokens/ui.scss +++ b/src/assets/scss/tokens/ui.scss @@ -6,3 +6,20 @@ --border-radius: 0.5rem; } + +@media (prefers-color-scheme: "dark") { + :root { + --sponsor-img-border-radius: var(--border-radius); + --sponsor-backers-img-border-radius: var(--border-radius); + } +} + +html[data-theme="light"] { + --sponsor-img-border-radius: 0; + --sponsor-backers-img-border-radius: 50%; +} + +html[data-theme="dark"] { + --sponsor-img-border-radius: var(--border-radius); + --sponsor-backers-img-border-radius: var(--border-radius); +} From e0e5fb5a27cbc453dc573b063826a9f29f0a0f30 Mon Sep 17 00:00:00 2001 From: Tanuj Kanti Date: Wed, 18 Sep 2024 13:07:23 +0530 Subject: [PATCH 2/2] fix linting error --- src/assets/scss/components/logo.scss | 8 ++++---- src/assets/scss/tokens/opacity.scss | 14 +++++++------- src/assets/scss/tokens/themes.scss | 4 ++-- src/assets/scss/tokens/ui.scss | 4 ++-- 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/assets/scss/components/logo.scss b/src/assets/scss/components/logo.scss index 3c514d2aee..351e6653db 100644 --- a/src/assets/scss/components/logo.scss +++ b/src/assets/scss/components/logo.scss @@ -1,12 +1,12 @@ .logo-component { - fill: var(--logo-color); + fill: var(--logo-color); } .logo-title { - fill: var(--headings-color); + fill: var(--headings-color); } #logo-center { - opacity: var(--logo-center-opacity); - fill: var(--logo-center-color); + opacity: var(--logo-center-opacity); + fill: var(--logo-center-color); } diff --git a/src/assets/scss/tokens/opacity.scss b/src/assets/scss/tokens/opacity.scss index cda62f6dd8..04503e917e 100644 --- a/src/assets/scss/tokens/opacity.scss +++ b/src/assets/scss/tokens/opacity.scss @@ -1,18 +1,18 @@ :root { - --opacity-100: 1; - --opaticy-60: 0.6; + --opacity-100: 1; + --opaticy-60: 0.6; } @media (prefers-color-scheme: "dark") { - :root { - --logo-center-opacity: var(--opaticy-60); - } + :root { + --logo-center-opacity: var(--opaticy-60); + } } html[data-theme="light"] { - --logo-center-opacity: var(--opaticy-100); + --logo-center-opacity: var(--opaticy-100); } html[data-theme="dark"] { - --logo-center-opacity: var(--opaticy-60); + --logo-center-opacity: var(--opaticy-60); } diff --git a/src/assets/scss/tokens/themes.scss b/src/assets/scss/tokens/themes.scss index 86b9ba3563..ecc3ccfcd4 100644 --- a/src/assets/scss/tokens/themes.scss +++ b/src/assets/scss/tokens/themes.scss @@ -167,7 +167,7 @@ html[data-theme="light"] { --editor-bracket-match-color: none; --logo-color: var(--color-primary-800); - --logo-center-color: var(--color-primary-600); + --logo-center-color: var(--color-primary-600); --label-text-color: var(--color-neutral-700); } @@ -202,7 +202,7 @@ html[data-theme="dark"] { --editor-bracket-match-color: var(--color-neutral-25); --logo-color: #fff; - --logo-center-color: #fff; + --logo-center-color: #fff; --sponsor-background-color: #fff; diff --git a/src/assets/scss/tokens/ui.scss b/src/assets/scss/tokens/ui.scss index 051bee2d23..6c30afe778 100644 --- a/src/assets/scss/tokens/ui.scss +++ b/src/assets/scss/tokens/ui.scss @@ -16,10 +16,10 @@ html[data-theme="light"] { --sponsor-img-border-radius: 0; - --sponsor-backers-img-border-radius: 50%; + --sponsor-backers-img-border-radius: 50%; } html[data-theme="dark"] { - --sponsor-img-border-radius: var(--border-radius); + --sponsor-img-border-radius: var(--border-radius); --sponsor-backers-img-border-radius: var(--border-radius); }