gordon/re-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: De-duplicate CSS variable definition in color

Browse Source
This commit is contained in:
Vĩnh Phước
2025-03-11 18:31:51 +07:00
parent 3e101bd51e
commit 41fe5f3cc7
9 changed files with 64 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
assets/css/color/blue.scss
View File

@@ -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);
}

23
assets/css/color/green.scss
View File

@@ -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);
}

23
assets/css/color/orange.scss
View File

@@ -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);
}

23
assets/css/color/paper.scss
View File

@@ -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);
}

23
assets/css/color/pink.scss
View File

@@ -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);
}

23
assets/css/color/red.scss
View File

@@ -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);
}

4
assets/css/style.scss
View File

@@ -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";

29
assets/css/variables-light.scss Normal file
View File

@@ -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;

27
assets/css/variables.scss
View File

@@ -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;