From 41fe5f3cc7475bdf36ffb323419a1ef1af66c269 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C4=A9nh=20Ph=C6=B0=E1=BB=9Bc?= Date: Tue, 11 Mar 2025 18:31:51 +0700 Subject: [PATCH] refactor: De-duplicate CSS variable definition in color --- assets/css/color/blue.scss | 23 +---------------------- assets/css/color/green.scss | 23 +---------------------- assets/css/color/orange.scss | 23 +---------------------- assets/css/color/paper.scss | 23 +---------------------- assets/css/color/pink.scss | 23 +---------------------- assets/css/color/red.scss | 23 +---------------------- assets/css/style.scss | 4 ++++ assets/css/variables-light.scss | 29 +++++++++++++++++++++++++++++ assets/css/variables.scss | 27 +++++++++++++++++++++++++-- 9 files changed, 64 insertions(+), 134 deletions(-) create mode 100644 assets/css/variables-light.scss diff --git a/assets/css/color/blue.scss b/assets/css/color/blue.scss index 5e88334..747d3d2 100644 --- a/assets/css/color/blue.scss +++ b/assets/css/color/blue.scss @@ -1,24 +1,3 @@ -:root { +html:root { --accent: #23b0ff; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); - --border-color: rgba(255, 255, 255, 0.1); - --color: white; - --menu-color: white; - - // Use in code syntax highlighting - --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); - --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); - --syntax-punctuation-color: white; - --syntax-value-color: color-mix(in srgb, var(--accent), white); - --syntax-comment-color: rgba(255, 255, 255, 0.3); - --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); - --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4); - --syntax-line-highlight-color: hsl(24, 20%, 95%); - --syntax-line-highlight-box-shadow: white; - --syntax-code-border-color: rgba(255, 255, 255, 0.1); - --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); - --syntax-code-copy-button-color: #bbb; - --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); } \ No newline at end of file diff --git a/assets/css/color/green.scss b/assets/css/color/green.scss index 9637c72..8193ab3 100644 --- a/assets/css/color/green.scss +++ b/assets/css/color/green.scss @@ -1,24 +1,3 @@ -:root { +html:root { --accent: #78e2a0; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); - --border-color: rgba(255, 255, 255, 0.1); - --color: white; - --menu-color: white; - - // Use in code syntax highlighting - --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); - --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); - --syntax-value-color: color-mix(in srgb, var(--accent), white); - --syntax-punctuation-color: white; - --syntax-comment-color: rgba(255, 255, 255, 0.3); - --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); - --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4); - --syntax-line-highlight-color: hsl(24, 20%, 95%); - --syntax-line-highlight-box-shadow: white; - --syntax-code-border-color: rgba(255, 255, 255, 0.1); - --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); - --syntax-code-copy-button-color: #bbb; - --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); } \ No newline at end of file diff --git a/assets/css/color/orange.scss b/assets/css/color/orange.scss index bc7c240..0cc71b1 100644 --- a/assets/css/color/orange.scss +++ b/assets/css/color/orange.scss @@ -1,24 +1,3 @@ -:root { +html:root { --accent: #ffa86a; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); - --border-color: rgba(255, 255, 255, 0.1); - --color: white; - --menu-color: white; - - // Use in code syntax highlighting - --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); - --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); - --syntax-value-color: color-mix(in srgb, var(--accent), white); - --syntax-punctuation-color: white; - --syntax-comment-color: rgba(255, 255, 255, 0.3); - --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); - --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4); - --syntax-line-highlight-color: hsl(24, 20%, 95%); - --syntax-line-highlight-box-shadow: white; - --syntax-code-border-color: rgba(255, 255, 255, 0.1); - --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); - --syntax-code-copy-button-color: #bbb; - --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); } \ No newline at end of file diff --git a/assets/css/color/paper.scss b/assets/css/color/paper.scss index 9555d5b..1ae8f3b 100644 --- a/assets/css/color/paper.scss +++ b/assets/css/color/paper.scss @@ -1,24 +1,3 @@ -:root { +html:root { --accent: #1d1e28; - --accent-contrast-color: white; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #fefcfa 98%); - --border-color: rgba(0, 0, 0, 0.1); - --color: black; - --menu-color: black; - - // Use in code syntax highlighting - --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #000 30%); - --syntax-var-color: color-mix(in srgb, var(--accent) 90%, #000); - --syntax-value-color: color-mix(in srgb, var(--accent), black); - --syntax-punctuation-color: black; - --syntax-comment-color: rgba(0, 0, 0, 0.3); - --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #000 10%); - --syntax-line-highlight-background-color: hsla(336, 20%, 50%, 0.4); - --syntax-line-highlight-color: hsl(336, 20%, 95%); - --syntax-line-highlight-box-shadow: black; - --syntax-code-border-color: rgba(0, 0, 0, 0.1); - --syntax-code-copy-button-background: hsla(360, 0%, 87.8%, 0.2); - --syntax-code-copy-button-color: #444; - --syntax-code-copy-button-box-shadow-color: rgba(255, 255, 255, 0.2); } \ No newline at end of file diff --git a/assets/css/color/pink.scss b/assets/css/color/pink.scss index e99b477..373b4c9 100644 --- a/assets/css/color/pink.scss +++ b/assets/css/color/pink.scss @@ -1,24 +1,3 @@ -:root { +html:root { --accent: #ee72f1; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); - --border-color: rgba(255, 255, 255, 0.1); - --color: white; - --menu-color: white; - - // Use in code syntax highlighting - --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); - --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); - --syntax-value-color: color-mix(in srgb, var(--accent), white); - --syntax-punctuation-color: white; - --syntax-comment-color: rgba(255, 255, 255, 0.3); - --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); - --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4); - --syntax-line-highlight-color: hsl(24, 20%, 95%); - --syntax-line-highlight-box-shadow: white; - --syntax-code-border-color: rgba(255, 255, 255, 0.1); - --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); - --syntax-code-copy-button-color: #bbb; - --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); } \ No newline at end of file diff --git a/assets/css/color/red.scss b/assets/css/color/red.scss index 38b6229..ba1ea95 100644 --- a/assets/css/color/red.scss +++ b/assets/css/color/red.scss @@ -1,24 +1,3 @@ -:root { +html:root { --accent: #ff6266; - --accent-contrast-color: black; - --article-link-color: var(inherit); - --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); - --border-color: rgba(255, 255, 255, 0.1); - --color: white; - --menu-color: white; - - // Use in code syntax highlighting - --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); - --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); - --syntax-value-color: color-mix(in srgb, var(--accent), white); - --syntax-punctuation-color: white; - --syntax-comment-color: rgba(255, 255, 255, 0.3); - --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); - --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4); - --syntax-line-highlight-color: hsl(24, 20%, 95%); - --syntax-line-highlight-box-shadow: white; - --syntax-code-border-color: rgba(255, 255, 255, 0.1); - --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); - --syntax-code-copy-button-color: #bbb; - --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); } \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss index 173b292..9779cca 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -1,6 +1,10 @@ $centerTheme: {{ if $.Site.Params.CenterTheme }}center{{ else }}flex-start{{ end }}; +{{ if in (slice "paper") $.Site.Params.ThemeColor }} +@import "variables-light"; +{{ else }} @import "variables"; +{{ end }} @import "font"; @import "buttons"; diff --git a/assets/css/variables-light.scss b/assets/css/variables-light.scss new file mode 100644 index 0000000..8d71369 --- /dev/null +++ b/assets/css/variables-light.scss @@ -0,0 +1,29 @@ +:root { + --accent-contrast-color: white; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #fefcfa 98%); + --border-color: rgba(0, 0, 0, 0.1); + --color: black; + --menu-color: black; + + // Use in code syntax highlighting + --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #000 30%); + --syntax-var-color: color-mix(in srgb, var(--accent) 90%, #000); + --syntax-value-color: color-mix(in srgb, var(--accent), black); + --syntax-punctuation-color: black; + --syntax-comment-color: rgba(0, 0, 0, 0.3); + --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #000 10%); + --syntax-line-highlight-background-color: hsla(336, 20%, 50%, 0.4); + --syntax-line-highlight-color: hsl(336, 20%, 95%); + --syntax-line-highlight-box-shadow: black; + --syntax-code-border-color: rgba(0, 0, 0, 0.1); + --syntax-code-copy-button-background: hsla(360, 0%, 87.8%, 0.2); + --syntax-code-copy-button-color: #444; + --syntax-code-copy-button-box-shadow-color: rgba(255, 255, 255, 0.2); +} + +// Native CSS Variable aren't supported in a combination with MEDIA QUERIES. Wait for a new standard https://drafts.csswg.org/css-env-1/ +// --phone: "max-width: 684px"; +// --tablet: "max-width: 900px"; +$phone: 684px; +$tablet: 900px; \ No newline at end of file diff --git a/assets/css/variables.scss b/assets/css/variables.scss index 82d8599..d178b22 100644 --- a/assets/css/variables.scss +++ b/assets/css/variables.scss @@ -1,6 +1,29 @@ +:root { + --accent-contrast-color: black; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); + --border-color: rgba(255, 255, 255, 0.1); + --color: white; + --menu-color: white; + + // Use in code syntax highlighting + --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); + --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); + --syntax-punctuation-color: white; + --syntax-value-color: color-mix(in srgb, var(--accent), white); + --syntax-comment-color: rgba(255, 255, 255, 0.3); + --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); + --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4); + --syntax-line-highlight-color: hsl(24, 20%, 95%); + --syntax-line-highlight-box-shadow: white; + --syntax-code-border-color: rgba(255, 255, 255, 0.1); + --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); + --syntax-code-copy-button-color: #bbb; + --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); +} + // Native CSS Variable aren't supported in a combination with MEDIA QUERIES. Wait for a new standard https://drafts.csswg.org/css-env-1/ // --phone: "max-width: 684px"; // --tablet: "max-width: 900px"; - $phone: 684px; -$tablet: 900px; +$tablet: 900px; \ No newline at end of file