feat: add base light colors & add new variables

This commit is contained in:
krios2146 2022-11-01 17:40:00 +07:00
parent 4f682b69d6
commit ecdc0753c3

View file

@ -389,9 +389,9 @@ body {
--table-header-border-width: var(--table-border-width);
--table-header-border-color: var(--table-border-color);
--table-header-font: inherit;
--table-header-size: var(--font-smaller);
--table-header-weight: var(--font-normal);
--table-header-color: var(--text-muted);
--table-header-size: inherit;
--table-header-weight: var(--font-semibold);
--table-header-color: var(--text-normal);
--table-text-size: inherit;
--table-text-color: inherit;
--table-column-max-width: none;
@ -444,9 +444,9 @@ body {
--workspace-background-translucent: rgba(var(--mono-rgb-0), 0.6);
/* Color mappings ------------------------ */
/* Accent HSL values */
--accent-h: 212;
--accent-s: 100%;
--accent-l: 67%;
--accent-h: var(--accent-h-theme);
--accent-s: var(--accent-s-theme);
--accent-l: var(--accent-l-theme);
/* Backgrounds */
--background-primary: var(--color-base-00);
--background-primary-alt: var(--color-base-10);
@ -524,6 +524,10 @@ body {
--input-shadow-hover: none;
--shadow-s: none;
--shadow-l: none;
--accent-h-theme: 212;
--accent-s-theme: 100%;
--accent-l-theme: 67%;
--inline-code-background: #6e768166;
}
.is-mobile.theme-dark {
--color-base-00: #0d1117;
@ -537,15 +541,59 @@ body {
--background-modifier-hover: rgba(var(--mono-rgb-100), 0.15);
--settings-home-background: var(--background-primary);
}
.theme-light {
color-scheme: light;
--highlight-mix-blend-mode: darken;
--mono-rgb-0: 255, 255, 255;
--mono-rgb-100: 0, 0, 0;
--color-red-rgb: 228, 55, 75;
--color-red: #E4374B;
--color-green-rgb: 12, 181, 79;
--color-green: #0cb54f;
--color-orange: #d96c00;
--color-yellow: #BD8E37;
--color-cyan: #2db7b5;
--color-blue: #086DDD;
--color-purple: #876be0;
--color-pink: #C32B74;
--color-base-00: #ffffff;
--color-base-05: #fcfcfc;
--color-base-10: #fafafa;
--color-base-20: #f6f8fa;
--color-base-25: #e3e3e3;
--color-base-30: #e0e0e0;
--color-base-35: #d4d4d4;
--color-base-40: #bdbdbd;
--color-base-50: #6e7781;
--color-base-60: #707070;
--color-base-70: #57606a;
--color-base-100: #24292f;
--color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
--color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
--color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 2.5%));
--color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 5%));
--background-secondary-alt: var(--color-base-05);
--background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
--background-modifier-cover: rgba(220, 220, 220, 0.4);
--text-highlight-bg: rgba(255, 208, 0, 0.4);
--text-highlight-bg-active: rgba(255, 128, 0, 0.4);
--input-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 2px 3px 0 rgba(0,0,0,.05), 0 1px 1.5px 0 rgba(0,0,0,.03), 0 1px 2px 0 rgba(0,0,0,.04), 0 0 0 0 transparent;
--input-shadow-hover: inset 0 0 0 1px rgba(0, 0, 0, 0.17), 0 2px 3px 0 rgba(0,0,0,.1), 0 1px 1.5px 0 rgba(0,0,0,.03), 0 1px 2px 0 rgba(0,0,0,.04), 0 0 0 0 transparent;
--shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.028), 0px 3.4px 6.7px rgba(0, 0, 0, .042), 0px 15px 30px rgba(0, 0, 0, .07);
--shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 0px 6.3px 24.7px rgba(0, 0, 0, 0.112), 0px 30px 90px rgba(0, 0, 0, 0.2);
--accent-h-theme: 212;
--accent-s-theme: 92%;
--accent-l-theme: 45%;
--inline-code-background: #aeb8c133;
}
/* Tables */
.markdown-rendered th {
color: var(--text-normal);
font-weight: 600;
}
.markdown-rendered td,
.markdown-rendered th {
padding: var(--size-2-3) var(--size-4-3);
}
.markdown-rendered th {
text-align: center;
}
.markdown-rendered tbody tr:nth-child(2n) {
background-color: var(--background-secondary);
@ -652,7 +700,7 @@ select:focus, .dropdown:focus {
/* inline code block */
.markdown-rendered :not(pre) > code {
background-color: #6e768166;
background-color: var(--inline-code-background);
padding: 0.2em 0.4em;
border-radius: 6px;
color: var(--color-base-100);