@use "sass:color"; $accent-color: #ff7800; $crt-bg-l: radial-gradient( color.mix($accent-color, black, 30%), color.mix($accent-color, black, 20%) ); $crt-bg-d: radial-gradient( color.mix($accent-color, black, 20%), color.mix($accent-color, black, 10%) ); $bg1-l: color.mix($accent-color, rgb(250, 250, 250), 10%); $bg2-l: color.mix($accent-color, rgb(255, 255, 255), 20%); $bg3-l: color.mix($accent-color, rgb(75, 75, 75), 30%); $bg1-d: color.mix($accent-color, rgb(36, 36, 36), 15%); $bg2-d: color.mix($accent-color, rgb(30, 30, 30), 10%); $bg3-d: color.mix($accent-color, rgb(11, 11, 11), 5%); $marked: color.scale($accent-color, $alpha: -80%); :root { // GENERAL SETUP --accent-color: #{$accent-color}; --text: var(--dark4); --background: var(--bg1); --border: rgba(120, 120, 120, 0.4); --border-radius: 0.75rem; --border-radius-big: 1.2rem; --border-radius-small: 0.5rem; --content-width: 720px; // CUSTOM COLOR PALETTE --bg1: #{$bg1-l}; --bg2: #{$bg2-l}; --bg3: #{$bg3-l}; --fg01: rgba(0, 0, 0, 0.01); --fg03: rgba(0, 0, 0, 0.03); --fg05: rgba(0, 0, 0, 0.05); --fg07: rgba(0, 0, 0, 0.07); --fg09: rgba(0, 0, 0, 0.09); --fg40: rgba(0, 0, 0, 0.4); --fg50: rgba(0, 0, 0, 0.5); --purple-bg: rgba(145, 65, 172, 0.1); --purple-fg: rgb(145, 65, 172); --red-bg: rgba(224, 27, 36, 0.1); --red-fg: rgb(224, 27, 36); --yellow-bg: rgba(156, 110, 3, 0.1); --yellow-fg: rgb(156, 110, 3); --orange-bg: rgba(255, 120, 0, 0.1); --orange-fg: rgb(255, 120, 0); --crt-bg: #{$crt-bg-l}; --marked: #{$marked}; // CUSTOM VARIABLES --shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03); --shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06); --drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)); --transition: 200ms; --transition-longer: 400ms; --transition-long: 800ms; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --text: var(--light2); --background: var(--bg3); --fg01: rgba(255, 255, 255, 0.01); --fg03: rgba(255, 255, 255, 0.03); --fg05: rgba(255, 255, 255, 0.05); --fg07: rgba(255, 255, 255, 0.07); --fg09: rgba(255, 255, 255, 0.09); --fg40: rgba(255, 255, 255, 0.4); --fg50: rgba(255, 255, 255, 0.5); --bg1: #{$bg1-d}; --bg2: #{$bg2-d}; --bg3: #{$bg3-d}; --purple-bg: rgba(220, 138, 221, 0.1); --purple-fg: rgb(220, 138, 221); --red-bg: rgba(226, 97, 81, 0.1); --red-fg: rgb(246, 97, 81); --yellow-bg: rgba(248, 228, 92, 0.1); --yellow-fg: rgb(248, 228, 92); --orange-bg: rgba(255, 190, 111, 0.1); --orange-fg: rgb(255, 190, 111); --crt-bg: #{$crt-bg-d}; } }