From 50ced3dafba11a37bcb790e032d02be4fa65608e Mon Sep 17 00:00:00 2001 From: BinaryDigit Date: Tue, 17 Jun 2025 08:48:44 -0400 Subject: [PATCH] Quartz sync: Jun 17, 2025, 8:48 AM --- quartz/styles/themes/_index.scss | 384 ++++++++++++++++++++----------- 1 file changed, 250 insertions(+), 134 deletions(-) diff --git a/quartz/styles/themes/_index.scss b/quartz/styles/themes/_index.scss index 41931d3..c64290e 100644 --- a/quartz/styles/themes/_index.scss +++ b/quartz/styles/themes/_index.scss @@ -5,18 +5,14 @@ @use "sass:string"; /* Quartz imports */ @use "../variables.scss" as *; -/* quartz themes dark-only */ +/* quartz themes */ -:root:root { - --background-modifier-border: var(--s-bg-transparent); - --background-modifier-border-focus: var(--s-green-primary-color); +:root[saved-theme="dark"] { --background-modifier-form-field: var(--color-base-25); - --background-modifier-hover: var(--s-hover-bg-color-green); - --background-primary: var(--s-bg-transparent); - --background-primary-alt: var(--s-bg-transparent); - --background-secondary: var(--s-bg-transparent); - --caret-color: #ff0000; - --color-accent: var(--s-green-primary-color); + --background-primary: rgb(25, 18, 63); + --background-secondary: var(--background-secondary-dark, rgb(45, 45, 45)); + --code-background: var(--code-background-dark, rgb(33, 19, 19)); + --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); --color-accent-1: hsl( calc(var(--accent-h) - 3), calc(var(--accent-s) * 1.02), @@ -53,19 +49,15 @@ --color-red-rgb: 251, 70, 76; --color-yellow: #e0de71; --highlight-mix-blend-mode: darken; - --inline-title-color: white; - --interactive-accent: var(--s-green-primary-color); - --interactive-accent-hover: var(--yellow-faint); + --interactive-accent: var(--color-accent); + --interactive-accent-hover: var(--color-accent-1); --mono-rgb-100: 255, 255, 255; --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); --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.121), 0px 3.4px 6.7px rgba(0, 0, 0, 0.179), 0px 15px 30px rgba(0, 0, 0, 0.3); - --text-accent: var(--s-green-secondary-color); - --text-accent-hover: var(--s-green-primary-color); - --text-faint: var(--platinum-faint); - --text-highlight-bg: #5b5721; - --text-normal: var(--platinum); + --text-accent: var(--color-accent-1); + --text-normal: #ffffff; color-scheme: dark; .callout { @@ -73,16 +65,103 @@ } } -.darkmode { - display: none; +:root[saved-theme="light"] { + --background-primary: rgb(255, 250, 205); + --background-secondary: var(--background-secondary-light, rgb(240, 240, 240)); + --code-background: var(--code-background-light, rgb(255, 255, 255)); + --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); + --color-accent-1: hsl( + calc(var(--accent-h) - 1), + calc(var(--accent-s) * 1.01), + calc(var(--accent-l) * 1.075) + ); + --color-accent-2: hsl( + calc(var(--accent-h) - 3), + calc(var(--accent-s) * 1.02), + calc(var(--accent-l) * 1.15) + ); + --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); + --color-base-00: #ffffff; + --color-base-10: #fafafa; + --color-base-100: #222222; + --color-base-20: #f6f6f6; + --color-base-25: #e3e3e3; + --color-base-30: #e0e0e0; + --color-base-35: #d4d4d4; + --color-base-40: #bdbdbd; + --color-base-50: #ababab; + --color-base-70: #5c5c5c; + --color-blue: #086ddd; + --color-blue-rgb: 8, 109, 221; + --color-cyan: #00bfbc; + --color-cyan-rgb: 0, 191, 188; + --color-green: #08b94e; + --color-green-rgb: 8, 185, 78; + --color-orange: #ec7500; + --color-orange-rgb: 236, 117, 0; + --color-pink: #d53984; + --color-purple: #7852ee; + --color-purple-rgb: 120, 82, 238; + --color-red: #e93147; + --color-red-rgb: 233, 49, 71; + --color-yellow: #e0ac00; + --highlight-mix-blend-mode: darken; + --mono-rgb-100: 0, 0, 0; + --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); + --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.028), 0px 3.4px 6.7px rgba(0, 0, 0, 0.042), + 0px 15px 30px rgba(0, 0, 0, 0.07); + --text-normal: #0c0909; + color-scheme: light; + + .callout { + --callout-blend-mode: darken; + } } -/* latin-ext */ +/* cyrillic-ext */ @font-face { - font-family: "Figtree"; + font-family: "Manrope"; font-style: normal; font-weight: 400; - src: url(https://fonts.gstatic.com/s/figtree/v7/_Xmz-HUzqDCFdgfMsYiV_F7wfS-Bs_d_QG5XyEA25WTzZO_OSg.woff2) + src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_P-bnTfc7AGraJwA.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: "Manrope"; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_G-bnTfc7AGraJwA.woff2) + format("woff2"); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek */ +@font-face { + font-family: "Manrope"; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_B-bnTfc7AGraJwA.woff2) + format("woff2"); + unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; +} +/* vietnamese */ +@font-face { + font-family: "Manrope"; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_N-bnTfc7AGraJwA.woff2) + format("woff2"); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, + U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: "Manrope"; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_M-bnTfc7AGraJwA.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, @@ -90,10 +169,10 @@ } /* latin */ @font-face { - font-family: "Figtree"; + font-family: "Manrope"; font-style: normal; font-weight: 400; - src: url(https://fonts.gstatic.com/s/figtree/v7/_Xmz-HUzqDCFdgfMsYiV_F7wfS-Bs_d_QG5ZyEA25WTzZO8.woff2) + src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_C-bnTfc7AGrY.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; @@ -101,47 +180,42 @@ /* cyrillic-ext */ @font-face { - font-family: "JetBrains Mono"; + font-family: "Nunito Sans"; font-style: normal; font-weight: 400; - src: url(https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTN1OVk6OThhvAWV8.woff2) + font-stretch: 100%; + src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4G1ilXvlUlIfM0qh1d65g.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { - font-family: "JetBrains Mono"; + font-family: "Nunito Sans"; font-style: normal; font-weight: 400; - src: url(https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTPlOVk6OThhvAWV8.woff2) + font-stretch: 100%; + src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4G1ilXt1UlIfM0qh1d65g.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } -/* greek */ -@font-face { - font-family: "JetBrains Mono"; - font-style: normal; - font-weight: 400; - src: url(https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOVOVk6OThhvAWV8.woff2) - format("woff2"); - unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; -} /* vietnamese */ @font-face { - font-family: "JetBrains Mono"; + font-family: "Nunito Sans"; font-style: normal; font-weight: 400; - src: url(https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTNVOVk6OThhvAWV8.woff2) + font-stretch: 100%; + src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4G1ilXvFUlIfM0qh1d65g.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { - font-family: "JetBrains Mono"; + font-family: "Nunito Sans"; font-style: normal; font-weight: 400; - src: url(https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTNFOVk6OThhvAWV8.woff2) + font-stretch: 100%; + src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4G1ilXvVUlIfM0qh1d65g.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, @@ -149,34 +223,17 @@ } /* latin */ @font-face { - font-family: "JetBrains Mono"; + font-family: "Nunito Sans"; font-style: normal; font-weight: 400; - src: url(https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOlOVk6OThhvA.woff2) + font-stretch: 100%; + src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4G1ilXs1UlIfM0qh1d.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { - --accent-h: 110; - --accent-l: 77%; - --accent-s: 90; - --level-1: rgb(191, 96, 107); - --level-2: rgb(207, 134, 110); - --level-3: rgb(235, 203, 140); - --level-4: rgb(153, 190, 141); - --level-5: rgb(179, 138, 163); - --level-6: rgb(155, 180, 196); - --platinum: #c7c7c7; - --platinum-faint: #b2b2b8; - --s-bg-primary-color: #141414; - --s-bg-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuZGV2L3N2Z2pzIiB2aWV3Qm94PSIwIDAgNzAwIDcwMCIgd2lkdGg9IjcwMCIgaGVpZ2h0PSI3MDAiPjxkZWZzPjxmaWx0ZXIgaWQ9Im5ubm9pc2UtZmlsdGVyIiB4PSItMjAlIiB5PSItMjAlIiB3aWR0aD0iMTQwJSIgaGVpZ2h0PSIxNDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHByaW1pdGl2ZVVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJsaW5lYXJSR0IiPgoJPGZlVHVyYnVsZW5jZSB0eXBlPSJ0dXJidWxlbmNlIiBiYXNlRnJlcXVlbmN5PSIwLjIiIG51bU9jdGF2ZXM9IjQiIHNlZWQ9IjE1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIiB4PSIwJSIgeT0iMCUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHJlc3VsdD0idHVyYnVsZW5jZSI+PC9mZVR1cmJ1bGVuY2U+Cgk8ZmVTcGVjdWxhckxpZ2h0aW5nIHN1cmZhY2VTY2FsZT0iNDAiIHNwZWN1bGFyQ29uc3RhbnQ9IjAuNzUiIHNwZWN1bGFyRXhwb25lbnQ9IjIwIiBsaWdodGluZy1jb2xvcj0iI2JlYjdkZiIgeD0iMCUiIHk9IjAlIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBpbj0idHVyYnVsZW5jZSIgcmVzdWx0PSJzcGVjdWxhckxpZ2h0aW5nIj4KICAgIAkJPGZlRGlzdGFudExpZ2h0IGF6aW11dGg9IjMiIGVsZXZhdGlvbj0iMTAwIj48L2ZlRGlzdGFudExpZ2h0PgogIAk8L2ZlU3BlY3VsYXJMaWdodGluZz4KICAKPC9maWx0ZXI+PC9kZWZzPjxyZWN0IHdpZHRoPSI3MDAiIGhlaWdodD0iNzAwIiBmaWxsPSJ0cmFuc3BhcmVudCI+PC9yZWN0PjxyZWN0IHdpZHRoPSI3MDAiIGhlaWdodD0iNzAwIiBmaWxsPSIjYmViN2RmIiBmaWx0ZXI9InVybCgjbm5ub2lzZS1maWx0ZXIpIj48L3JlY3Q+PC9zdmc+"); - --s-bg-transparent: transparent; - --s-green-primary-color: #a1f98f; - --s-green-secondary-color: #36a372; - --s-hover-bg-color-green: #a1f98f24; - --yellow-faint: #ffe699; } body { --accent-h: 258; @@ -197,27 +254,28 @@ body { --callout-blend-mode: var(--highlight-mix-blend-mode); --callout-border-opacity: 0.25; --callout-border-width: 0px; - --callout-bug: var(--s-color-red, var(--color-red-rgb)); + --callout-bug: var(--color-red-rgb); --callout-content-background: transparent; --callout-content-padding: 0; - --callout-default: var(--s-color-blue, var(--color-blue-rgb)); - --callout-error: var(--s-color-red, var(--color-red-rgb)); - --callout-example: var(--s-color-purple, var(--color-purple-rgb)); - --callout-fail: var(--s-color-red, var(--color-red-rgb)); - --callout-important: var(--s-color-bright-blue, var(--color-cyan-rgb)); - --callout-info: var(--s-color-blue, var(--color-blue-rgb)); - --callout-question: var(--s-color-orange, var(--color-orange-rgb)); - --callout-quote: var(--s-color-gray, var(--gray)); + --callout-default: var(--color-blue-rgb); + --callout-error: var(--color-red-rgb); + --callout-example: var(--color-purple-rgb); + --callout-fail: var(--color-red-rgb); + --callout-important: var(--color-cyan-rgb); + --callout-info: var(--color-blue-rgb); + --callout-padding: var(--size-4-3) var(--size-4-3) var(--size-4-3) var(--size-4-6); + --callout-question: var(--color-orange-rgb); + --callout-quote: 158, 158, 158; --callout-radius: var(--radius-s); - --callout-success: var(--s-color-green, var(--color-green-rgb)); - --callout-summary: var(--s-color-bright-blue, var(--color-cyan-rgb)); - --callout-tip: var(--s-color-bright-blue, var(--color-cyan-rgb)); + --callout-success: var(--color-green-rgb); + --callout-summary: var(--color-cyan-rgb); + --callout-tip: var(--color-cyan-rgb); --callout-title-color: inherit; --callout-title-padding: 0; --callout-title-size: inherit; --callout-title-weight: calc(var(--font-weight) + var(--bold-modifier)); - --callout-todo: var(--s-color-blue, var(--color-blue-rgb)); - --callout-warning: var(--s-color-orange, var(--color-orange-rgb)); + --callout-todo: var(--color-blue-rgb); + --callout-warning: var(--color-orange-rgb); --caret-color: var(--text-normal); --checkbox-border-color: var(--text-faint); --checkbox-border-color-hover: var(--text-muted); @@ -251,69 +309,62 @@ body { --font-interface: var(--font-interface-override), var(--font-interface-theme), var(--default-font, "??"), var(--font-default); --font-interface-override: "??"; - --font-interface-theme: "Figtree", "azer"; + --font-interface-theme: "??"; --font-medium: 500; --font-monospace: var(--font-monospace-override), var(--font-monospace-theme), var(--font-monospace-default); --font-monospace-default: ui-monospace, SFMono-Regular, "Cascadia Mono", "Roboto Mono", "DejaVu Sans Mono", "Liberation Mono", Menlo, Monaco, "Consolas", "Source Code Pro", monospace; --font-monospace-override: "??"; - --font-monospace-theme: "JetBrains Mono", "azer"; + --font-monospace-theme: "??"; --font-normal: 400; - --font-print: var(--font-print-override), var(--font-text-override), var(--font-text-theme), - "Arial"; - --font-print-override: "??"; --font-smaller: 0.875em; - --font-text: var(--font-print); - --font-text-override: "??"; + --font-text: var(--body-font, Manrope), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Helvetica, Arial, sans-serif; --font-text-size: 16px; - --font-text-theme: "Figtree", "azer"; --font-ui-medium: 15px; --font-ui-small: 13px; --font-ui-smaller: 12px; --font-weight: var(--font-normal); --graph-line: var(--color-base-35, var(--background-modifier-border-focus)); - --graph-node: var(--text-muted); --graph-node-tag: var(--color-green); --graph-node-unresolved: var(--text-faint); - --graph-text: var(--text-normal); - --gray: 158, 158, 158; - --h1-color: var(--level-1); + --h1-color: inherit; --h1-font: inherit; --h1-line-height: 1.2; --h1-size: 1.802em; --h1-style: normal; --h1-variant: normal; --h1-weight: 700; - --h2-color: var(--level-2); + --h2-color: inherit; --h2-font: inherit; --h2-line-height: 1.2; --h2-size: 1.602em; --h2-style: normal; --h2-variant: normal; --h2-weight: 600; - --h3-color: var(--level-3); + --h3-color: inherit; --h3-font: inherit; --h3-line-height: 1.3; --h3-size: 1.424em; --h3-style: normal; --h3-variant: normal; --h3-weight: 600; - --h4-color: var(--level-4); + --h4-color: inherit; --h4-font: inherit; --h4-line-height: 1.4; --h4-size: 1.266em; --h4-style: normal; --h4-variant: normal; --h4-weight: 600; - --h5-color: var(--level-5); + --h5-color: inherit; --h5-font: inherit; --h5-line-height: var(--line-height-normal); --h5-size: 1.125em; --h5-style: normal; --h5-variant: normal; --h5-weight: 600; - --h6-color: var(--level-6); + --h6-color: inherit; --h6-font: inherit; --h6-line-height: var(--line-height-normal); --h6-size: 1em; @@ -394,12 +445,12 @@ body { --text-normal: var(--color-base-100); -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; - background: var(--s-bg-svg); - background-color: var(--s-bg-primary-color); + background: none; + background-color: var(--background-primary); caret-color: var(--caret-color); color: var(--text-normal); contain: initial; - font-family: var(--font-interface); + font-family: var(--font-text); font-size: var(--font-ui-medium); height: 100%; line-height: var(--line-height-tight); @@ -413,17 +464,13 @@ body { width: 100%; } /* START DARK */ -:root, -html { - --background-modifier-border: var(--s-bg-transparent); - --background-modifier-border-focus: var(--s-green-primary-color); +:root[saved-theme="dark"], +html[saved-theme="dark"] { --background-modifier-form-field: var(--color-base-25); - --background-modifier-hover: var(--s-hover-bg-color-green); - --background-primary: var(--s-bg-transparent); - --background-primary-alt: var(--s-bg-transparent); - --background-secondary: var(--s-bg-transparent); - --caret-color: #ff0000; - --color-accent: var(--s-green-primary-color); + --background-primary: rgb(25, 18, 63); + --background-secondary: var(--background-secondary-dark, rgb(45, 45, 45)); + --code-background: var(--code-background-dark, rgb(33, 19, 19)); + --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); --color-accent-1: hsl( calc(var(--accent-h) - 3), calc(var(--accent-s) * 1.02), @@ -460,19 +507,15 @@ html { --color-red-rgb: 251, 70, 76; --color-yellow: #e0de71; --highlight-mix-blend-mode: darken; - --inline-title-color: white; - --interactive-accent: var(--s-green-primary-color); - --interactive-accent-hover: var(--yellow-faint); + --interactive-accent: var(--color-accent); + --interactive-accent-hover: var(--color-accent-1); --mono-rgb-100: 255, 255, 255; --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); --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.121), 0px 3.4px 6.7px rgba(0, 0, 0, 0.179), 0px 15px 30px rgba(0, 0, 0, 0.3); - --text-accent: var(--s-green-secondary-color); - --text-accent-hover: var(--s-green-primary-color); - --text-faint: var(--platinum-faint); - --text-highlight-bg: #5b5721; - --text-normal: var(--platinum); + --text-accent: var(--color-accent-1); + --text-normal: #ffffff; color-scheme: dark; code[data-theme*=" "] { color: var(--shiki-dark); @@ -483,6 +526,65 @@ html { } } /* END DARK */ +/* START LIGHT */ +:root[saved-theme="light"], +html[saved-theme="light"] { + --background-primary: rgb(255, 250, 205); + --background-secondary: var(--background-secondary-light, rgb(240, 240, 240)); + --code-background: var(--code-background-light, rgb(255, 255, 255)); + --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); + --color-accent-1: hsl( + calc(var(--accent-h) - 1), + calc(var(--accent-s) * 1.01), + calc(var(--accent-l) * 1.075) + ); + --color-accent-2: hsl( + calc(var(--accent-h) - 3), + calc(var(--accent-s) * 1.02), + calc(var(--accent-l) * 1.15) + ); + --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); + --color-base-00: #ffffff; + --color-base-10: #fafafa; + --color-base-100: #222222; + --color-base-20: #f6f6f6; + --color-base-25: #e3e3e3; + --color-base-30: #e0e0e0; + --color-base-35: #d4d4d4; + --color-base-40: #bdbdbd; + --color-base-50: #ababab; + --color-base-70: #5c5c5c; + --color-blue: #086ddd; + --color-blue-rgb: 8, 109, 221; + --color-cyan: #00bfbc; + --color-cyan-rgb: 0, 191, 188; + --color-green: #08b94e; + --color-green-rgb: 8, 185, 78; + --color-orange: #ec7500; + --color-orange-rgb: 236, 117, 0; + --color-pink: #d53984; + --color-purple: #7852ee; + --color-purple-rgb: 120, 82, 238; + --color-red: #e93147; + --color-red-rgb: 233, 49, 71; + --color-yellow: #e0ac00; + --highlight-mix-blend-mode: darken; + --mono-rgb-100: 0, 0, 0; + --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); + --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.028), 0px 3.4px 6.7px rgba(0, 0, 0, 0.042), + 0px 15px 30px rgba(0, 0, 0, 0.07); + --text-normal: #0c0909; + color-scheme: light; + code[data-theme*=" "] { + color: var(--shiki-light); + background-color: var(--shiki-light-bg); + } + code[data-theme*=" "] span { + color: var(--shiki-light); + } +} +/* END LIGHT */ /* CALLOUTS */ :root, html { @@ -496,7 +598,7 @@ html { margin: 1em 0; mix-blend-mode: var(--callout-blend-mode); overflow: hidden; - padding: var(--size-4-3); + padding: var(--callout-padding); background-color: rgba(var(--callout-color), 0.1); overflow-x: auto; overflow-y: hidden; @@ -963,10 +1065,9 @@ body { } } .clipboard-button { - background-color: var(--s-hover-bg-color-green); + background-color: transparent; box-shadow: none; color: var(--text-muted); - cursor: pointer; font-family: var(--font-interface); font-size: var(--font-ui-smaller); height: auto; @@ -1057,7 +1158,7 @@ body { -webkit-mask-image: var(--folder-open-icon); } .folder-outer > ul.content { - border-inline-start: var(--nav-indentation-guide-width) dashed + border-inline-start: var(--nav-indentation-guide-width) solid var(--nav-indentation-guide-color); margin-bottom: 1px; margin-inline-start: var( @@ -1207,7 +1308,7 @@ body { border-radius: var(--input-radius); color: var(--text-normal); font-family: inherit; - font-size: var(--font-normal); + font-size: var(--font-ui-small); height: var(--input-height); outline: none; padding: var(--size-4-1) var(--size-4-2); @@ -1228,7 +1329,7 @@ body { border: none; border-bottom: 1px solid var(--background-secondary); border-radius: 0; - font-size: var(--font-normal); + font-size: var(--font-ui-medium); height: var(--prompt-input-height); padding: var(--size-4-6); padding-inline-end: var(--size-4-12); @@ -1323,7 +1424,6 @@ body { } /* POPOVER */ .popover { - animation: 0.3s pop cubic-bezier(0.17, 0.89, 0.32, 1.27); background-color: var(--background-primary); border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); @@ -1402,13 +1502,13 @@ body { user-select: text; -webkit-user-select: text; } -:root { +:root[saved-theme="light"] { button.darkmode { mask-image: var(--sun-icon); -webkit-mask-image: var(--sun-icon); } } -:root { +:root[saved-theme="dark"] { button.darkmode { mask-image: var(--moon-icon); -webkit-mask-image: var(--moon-icon); @@ -1418,8 +1518,34 @@ body { :root:root:root { } /* START CANVAS GRAPH WORKAROUND */ +/* START LIGHT GRAPH */ +:root:root[saved-theme="light"] { + --highlight-fallback: 258, 88%, 66%; + --lightgray: var( + --graph-line, + var( + --color-base-35, + var( + --background-modifier-border-focus, + var(--background-modifier-border, var(--color-base-30, #e0e0e0)) + ) + ) + ) !important; + --darkgray: var( + --graph-node-unresolved, + var(--text-faint, var(--text-normal, var(--color-base-100, #222222))) + ) !important; + --tertiary: var( + --graph-node-tag, + var( + --color-green, + var(--link-color-hover, var(--text-accent-hover, var(--color-accent-2, #a386f9))) + ) + ) !important; +} +/* END LIGHT GRAPH */ /* START DARK GRAPH */ -:root:root { +:root:root[saved-theme="dark"] { --highlight-fallback: 258, 88%, 66%; --lightgray: var( --graph-line, @@ -1431,16 +1557,6 @@ body { ) ) ) !important; - --gray: var( - --graph-node, - var( - --text-muted, - var( - --graph-text, - var(--text-normal, var(--checkbox-border-color, var(--text-faint, #666666))) - ) - ) - ) !important; --darkgray: var( --graph-node-unresolved, var(--text-faint, var(--text-normal, var(--color-base-100, #dadada)))