diff --git a/packages/foundations/docs/Colors.md b/packages/foundations/docs/Colors.md index 54c2f1e07b4..0b31b712681 100644 --- a/packages/foundations/docs/Colors.md +++ b/packages/foundations/docs/Colors.md @@ -39,6 +39,13 @@ Besides of the variants above we deliver additional colors which aren't required ### Dark- & Light-Mode We provide tokens for both dark- and light-mode. If you include the **db-ui-42** style you get a media query `@media (prefers-color-scheme: dark)` with the relevant tokens. You can [emulate](https://developer.chrome.com/docs/devtools/rendering/emulate-css/) the modes inside the devtools. + +It's [recommended to set a `meta`-HTML-tag](https://web.dev/articles/color-scheme#the_color-scheme_meta_tag) to provide a signal to the browser on your accepted color schemes previous to loading the CSS: + +```html + +``` + We recommend using the default media query based on the user preference, but if you want to force a mode for your page or a container you can do it with adding the attributes `data-color-scheme="dark"` or `data-color-scheme="light"`: #### HTML diff --git a/packages/foundations/scss/colors/_default-color-scheme.scss b/packages/foundations/scss/colors/_default-color-scheme.scss index 82c5e6a7b07..5b7e48d57a2 100644 --- a/packages/foundations/scss/colors/_default-color-scheme.scss +++ b/packages/foundations/scss/colors/_default-color-scheme.scss @@ -1,1493 +1,1763 @@ -@mixin get-color-scheme-light { - --db-neutral-bg-lvl-1-enabled: var(--db-neutral-14); - --db-neutral-bg-lvl-1-hover: var(--db-neutral-13); - --db-neutral-bg-lvl-1-pressed: var(--db-neutral-12); - --db-neutral-bg-lvl-2-enabled: var(--db-neutral-13); - --db-neutral-bg-lvl-2-hover: var(--db-neutral-12); - --db-neutral-bg-lvl-2-pressed: var(--db-neutral-11); - --db-neutral-bg-lvl-3-enabled: var(--db-neutral-12); - --db-neutral-bg-lvl-3-hover: var(--db-neutral-11); - --db-neutral-bg-lvl-3-pressed: var(--db-neutral-10); - --db-neutral-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-neutral-6) +@mixin get-color-scheme { + --db-neutral-bg-lvl-1-enabled: light-dark( + var(--db-neutral-14), + var(--db-neutral-3) ); - --db-neutral-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 92%, - var(--db-neutral-6) + --db-neutral-bg-lvl-1-hover: light-dark( + var(--db-neutral-13), + var(--db-neutral-4) ); - --db-neutral-bg-transparent-hover: color-mix( - in srgb, - transparent 84%, - var(--db-neutral-6) + --db-neutral-bg-lvl-1-pressed: light-dark( + var(--db-neutral-12), + var(--db-neutral-5) ); - --db-neutral-bg-transparent-pressed: color-mix( - in srgb, - transparent 76%, - var(--db-neutral-6) + --db-neutral-bg-lvl-2-enabled: light-dark( + var(--db-neutral-13), + var(--db-neutral-2) ); - --db-neutral-on-bg-enabled: var(--db-neutral-3); - --db-neutral-on-bg-hover: var(--db-neutral-4); - --db-neutral-on-bg-pressed: var(--db-neutral-5); - --db-neutral-on-bg-weak-enabled: var(--db-neutral-5); - --db-neutral-on-bg-weak-hover: var(--db-neutral-6); - --db-neutral-on-bg-weak-pressed: var(--db-neutral-7); - --db-neutral-on-contrast-enabled: var(--db-neutral-14); - --db-neutral-on-contrast-hover: var(--db-neutral-13); - --db-neutral-on-contrast-pressed: var(--db-neutral-12); - --db-neutral-contrast-high-enabled: var(--db-neutral-6); - --db-neutral-contrast-high-hover: var(--db-neutral-5); - --db-neutral-contrast-high-pressed: var(--db-neutral-4); - --db-neutral-contrast-low-enabled: var(--db-neutral-7); - --db-neutral-contrast-low-hover: var(--db-neutral-6); - --db-neutral-contrast-low-pressed: var(--db-neutral-5); - --db-neutral-border: var(--db-neutral-10); - --db-brand-on-enabled: var(--db-brand-on-light); - --db-brand-on-hover: var(--db-brand-on-hover-light); - --db-brand-on-pressed: var(--db-brand-on-pressed-light); - --db-brand-origin-enabled: var(--db-brand-origin-light); - --db-brand-origin-hover: var(--db-brand-hover-light); - --db-brand-origin-pressed: var(--db-brand-pressed-light); - --db-brand-bg-lvl-1-enabled: var(--db-brand-14); - --db-brand-bg-lvl-1-hover: var(--db-brand-13); - --db-brand-bg-lvl-1-pressed: var(--db-brand-12); - --db-brand-bg-lvl-2-enabled: var(--db-brand-13); - --db-brand-bg-lvl-2-hover: var(--db-brand-12); - --db-brand-bg-lvl-2-pressed: var(--db-brand-11); - --db-brand-bg-lvl-3-enabled: var(--db-brand-12); - --db-brand-bg-lvl-3-hover: var(--db-brand-11); - --db-brand-bg-lvl-3-pressed: var(--db-brand-10); - --db-brand-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-brand-6) + --db-neutral-bg-lvl-2-hover: light-dark( + var(--db-neutral-12), + var(--db-neutral-3) ); - --db-brand-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 92%, - var(--db-brand-6) + --db-neutral-bg-lvl-2-pressed: light-dark( + var(--db-neutral-11), + var(--db-neutral-4) ); - --db-brand-bg-transparent-hover: color-mix( - in srgb, - transparent 84%, - var(--db-brand-6) + --db-neutral-bg-lvl-3-enabled: light-dark( + var(--db-neutral-12), + var(--db-neutral-1) ); - --db-brand-bg-transparent-pressed: color-mix( - in srgb, - transparent 76%, - var(--db-brand-6) + --db-neutral-bg-lvl-3-hover: light-dark( + var(--db-neutral-11), + var(--db-neutral-2) ); - --db-brand-on-bg-enabled: var(--db-brand-3); - --db-brand-on-bg-hover: var(--db-brand-4); - --db-brand-on-bg-pressed: var(--db-brand-5); - --db-brand-on-bg-weak-enabled: var(--db-brand-5); - --db-brand-on-bg-weak-hover: var(--db-brand-6); - --db-brand-on-bg-weak-pressed: var(--db-brand-7); - --db-brand-on-contrast-enabled: var(--db-brand-14); - --db-brand-on-contrast-hover: var(--db-brand-13); - --db-brand-on-contrast-pressed: var(--db-brand-12); - --db-brand-contrast-high-enabled: var(--db-brand-6); - --db-brand-contrast-high-hover: var(--db-brand-5); - --db-brand-contrast-high-pressed: var(--db-brand-4); - --db-brand-contrast-low-enabled: var(--db-brand-7); - --db-brand-contrast-low-hover: var(--db-brand-6); - --db-brand-contrast-low-pressed: var(--db-brand-5); - --db-brand-border: var(--db-brand-10); - --db-informational-bg-lvl-1-enabled: var(--db-informational-14); - --db-informational-bg-lvl-1-hover: var(--db-informational-13); - --db-informational-bg-lvl-1-pressed: var(--db-informational-12); - --db-informational-bg-lvl-2-enabled: var(--db-informational-13); - --db-informational-bg-lvl-2-hover: var(--db-informational-12); - --db-informational-bg-lvl-2-pressed: var(--db-informational-11); - --db-informational-bg-lvl-3-enabled: var(--db-informational-12); - --db-informational-bg-lvl-3-hover: var(--db-informational-11); - --db-informational-bg-lvl-3-pressed: var(--db-informational-10); - --db-informational-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-informational-6) + --db-neutral-bg-lvl-3-pressed: light-dark( + var(--db-neutral-10), + var(--db-neutral-3) ); - --db-informational-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 92%, - var(--db-informational-6) + --db-neutral-bg-transparent-full-enabled: light-dark( + color-mix(in srgb, transparent 100%, var(--db-neutral-6)), + color-mix(in srgb, transparent 100%, var(--db-neutral-9)) ); - --db-informational-bg-transparent-hover: color-mix( - in srgb, - transparent 84%, - var(--db-informational-6) + --db-neutral-bg-transparent-semi-enabled: light-dark( + color-mix(in srgb, transparent 92%, var(--db-neutral-6)), + color-mix(in srgb, transparent 84%, var(--db-neutral-9)) ); - --db-informational-bg-transparent-pressed: color-mix( - in srgb, - transparent 76%, - var(--db-informational-6) + --db-neutral-bg-transparent-hover: light-dark( + color-mix(in srgb, transparent 84%, var(--db-neutral-6)), + color-mix(in srgb, transparent 76%, var(--db-neutral-9)) ); - --db-informational-on-bg-enabled: var(--db-informational-3); - --db-informational-on-bg-hover: var(--db-informational-4); - --db-informational-on-bg-pressed: var(--db-informational-5); - --db-informational-on-bg-weak-enabled: var(--db-informational-5); - --db-informational-on-bg-weak-hover: var(--db-informational-6); - --db-informational-on-bg-weak-pressed: var(--db-informational-7); - --db-informational-on-contrast-enabled: var(--db-informational-14); - --db-informational-on-contrast-hover: var(--db-informational-13); - --db-informational-on-contrast-pressed: var(--db-informational-12); - --db-informational-contrast-high-enabled: var(--db-informational-6); - --db-informational-contrast-high-hover: var(--db-informational-5); - --db-informational-contrast-high-pressed: var(--db-informational-4); - --db-informational-contrast-low-enabled: var(--db-informational-7); - --db-informational-contrast-low-hover: var(--db-informational-6); - --db-informational-contrast-low-pressed: var(--db-informational-5); - --db-informational-border: var(--db-informational-10); - --db-warning-bg-lvl-1-enabled: var(--db-warning-14); - --db-warning-bg-lvl-1-hover: var(--db-warning-13); - --db-warning-bg-lvl-1-pressed: var(--db-warning-12); - --db-warning-bg-lvl-2-enabled: var(--db-warning-13); - --db-warning-bg-lvl-2-hover: var(--db-warning-12); - --db-warning-bg-lvl-2-pressed: var(--db-warning-11); - --db-warning-bg-lvl-3-enabled: var(--db-warning-12); - --db-warning-bg-lvl-3-hover: var(--db-warning-11); - --db-warning-bg-lvl-3-pressed: var(--db-warning-10); - --db-warning-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-warning-6) + --db-neutral-bg-transparent-pressed: light-dark( + color-mix(in srgb, transparent 76%, var(--db-neutral-6)), + color-mix(in srgb, transparent 68%, var(--db-neutral-9)) ); - --db-warning-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 92%, - var(--db-warning-6) + --db-neutral-on-bg-enabled: light-dark( + var(--db-neutral-3), + var(--db-neutral-12) ); - --db-warning-bg-transparent-hover: color-mix( - in srgb, - transparent 84%, - var(--db-warning-6) + --db-neutral-on-bg-hover: light-dark( + var(--db-neutral-4), + var(--db-neutral-11) ); - --db-warning-bg-transparent-pressed: color-mix( - in srgb, - transparent 76%, - var(--db-warning-6) + --db-neutral-on-bg-pressed: light-dark( + var(--db-neutral-5), + var(--db-neutral-10) ); - --db-warning-on-bg-enabled: var(--db-warning-3); - --db-warning-on-bg-hover: var(--db-warning-4); - --db-warning-on-bg-pressed: var(--db-warning-5); - --db-warning-on-bg-weak-enabled: var(--db-warning-5); - --db-warning-on-bg-weak-hover: var(--db-warning-6); - --db-warning-on-bg-weak-pressed: var(--db-warning-7); - --db-warning-on-contrast-enabled: var(--db-warning-14); - --db-warning-on-contrast-hover: var(--db-warning-13); - --db-warning-on-contrast-pressed: var(--db-warning-12); - --db-warning-contrast-high-enabled: var(--db-warning-6); - --db-warning-contrast-high-hover: var(--db-warning-5); - --db-warning-contrast-high-pressed: var(--db-warning-4); - --db-warning-contrast-low-enabled: var(--db-warning-7); - --db-warning-contrast-low-hover: var(--db-warning-6); - --db-warning-contrast-low-pressed: var(--db-warning-5); - --db-warning-border: var(--db-warning-10); - --db-successful-bg-lvl-1-enabled: var(--db-successful-14); - --db-successful-bg-lvl-1-hover: var(--db-successful-13); - --db-successful-bg-lvl-1-pressed: var(--db-successful-12); - --db-successful-bg-lvl-2-enabled: var(--db-successful-13); - --db-successful-bg-lvl-2-hover: var(--db-successful-12); - --db-successful-bg-lvl-2-pressed: var(--db-successful-11); - --db-successful-bg-lvl-3-enabled: var(--db-successful-12); - --db-successful-bg-lvl-3-hover: var(--db-successful-11); - --db-successful-bg-lvl-3-pressed: var(--db-successful-10); - --db-successful-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-successful-6) + --db-neutral-on-bg-weak-enabled: light-dark( + var(--db-neutral-5), + var(--db-neutral-10) ); - --db-successful-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 92%, - var(--db-successful-6) + --db-neutral-on-bg-weak-hover: light-dark( + var(--db-neutral-6), + var(--db-neutral-9) ); - --db-successful-bg-transparent-hover: color-mix( - in srgb, - transparent 84%, - var(--db-successful-6) + --db-neutral-on-bg-weak-pressed: light-dark( + var(--db-neutral-7), + var(--db-neutral-8) ); - --db-successful-bg-transparent-pressed: color-mix( - in srgb, - transparent 76%, - var(--db-successful-6) + --db-neutral-on-contrast-enabled: light-dark( + var(--db-neutral-14), + var(--db-neutral-3) ); - --db-successful-on-bg-enabled: var(--db-successful-3); - --db-successful-on-bg-hover: var(--db-successful-4); - --db-successful-on-bg-pressed: var(--db-successful-5); - --db-successful-on-bg-weak-enabled: var(--db-successful-5); - --db-successful-on-bg-weak-hover: var(--db-successful-6); - --db-successful-on-bg-weak-pressed: var(--db-successful-7); - --db-successful-on-contrast-enabled: var(--db-successful-14); - --db-successful-on-contrast-hover: var(--db-successful-13); - --db-successful-on-contrast-pressed: var(--db-successful-12); - --db-successful-contrast-high-enabled: var(--db-successful-6); - --db-successful-contrast-high-hover: var(--db-successful-5); - --db-successful-contrast-high-pressed: var(--db-successful-4); - --db-successful-contrast-low-enabled: var(--db-successful-7); - --db-successful-contrast-low-hover: var(--db-successful-6); - --db-successful-contrast-low-pressed: var(--db-successful-5); - --db-successful-border: var(--db-successful-10); - --db-critical-bg-lvl-1-enabled: var(--db-critical-14); - --db-critical-bg-lvl-1-hover: var(--db-critical-13); - --db-critical-bg-lvl-1-pressed: var(--db-critical-12); - --db-critical-bg-lvl-2-enabled: var(--db-critical-13); - --db-critical-bg-lvl-2-hover: var(--db-critical-12); - --db-critical-bg-lvl-2-pressed: var(--db-critical-11); - --db-critical-bg-lvl-3-enabled: var(--db-critical-12); - --db-critical-bg-lvl-3-hover: var(--db-critical-11); - --db-critical-bg-lvl-3-pressed: var(--db-critical-10); - --db-critical-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-critical-6) + --db-neutral-on-contrast-hover: light-dark( + var(--db-neutral-13), + var(--db-neutral-4) ); - --db-critical-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 92%, - var(--db-critical-6) + --db-neutral-on-contrast-pressed: light-dark( + var(--db-neutral-12), + var(--db-neutral-5) ); - --db-critical-bg-transparent-hover: color-mix( - in srgb, - transparent 84%, - var(--db-critical-6) + --db-neutral-contrast-high-enabled: light-dark( + var(--db-neutral-6), + var(--db-neutral-9) ); - --db-critical-bg-transparent-pressed: color-mix( - in srgb, - transparent 76%, - var(--db-critical-6) + --db-neutral-contrast-high-hover: light-dark( + var(--db-neutral-5), + var(--db-neutral-8) ); - --db-critical-on-bg-enabled: var(--db-critical-3); - --db-critical-on-bg-hover: var(--db-critical-4); - --db-critical-on-bg-pressed: var(--db-critical-5); - --db-critical-on-bg-weak-enabled: var(--db-critical-5); - --db-critical-on-bg-weak-hover: var(--db-critical-6); - --db-critical-on-bg-weak-pressed: var(--db-critical-7); - --db-critical-on-contrast-enabled: var(--db-critical-14); - --db-critical-on-contrast-hover: var(--db-critical-13); - --db-critical-on-contrast-pressed: var(--db-critical-12); - --db-critical-contrast-high-enabled: var(--db-critical-6); - --db-critical-contrast-high-hover: var(--db-critical-5); - --db-critical-contrast-high-pressed: var(--db-critical-4); - --db-critical-contrast-low-enabled: var(--db-critical-7); - --db-critical-contrast-low-hover: var(--db-critical-6); - --db-critical-contrast-low-pressed: var(--db-critical-5); - --db-critical-border: var(--db-critical-10); - - --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiMyODJkMzciIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg=="); - --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iIzI4MmQzNyIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K"); - --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjQ3MiA4LjY5Ni0zLjUzMiAzLjUzNGEuOTk4Ljk5OCAwIDEgMSAtMS40MTMtMS40MTNsMi44MjUtMi44MjUtMi44MjUtMi44MjVhLjk5OC45OTggMCAxIDEgMS40MTMtMS40MTNsMy41MzIgMy41MzJhLjk5OS45OTkgMCAwIDEgMCAxLjQxMnoiIGZpbGw9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoMCAxIC0xIDAgMTUuOTkxIC0uMDA5KSIvPjwvc3ZnPg0K"); - - color-scheme: light; -} - -@mixin get-color-scheme-dark { - --db-neutral-bg-lvl-1-enabled: var(--db-neutral-3); - --db-neutral-bg-lvl-1-hover: var(--db-neutral-4); - --db-neutral-bg-lvl-1-pressed: var(--db-neutral-5); - --db-neutral-bg-lvl-2-enabled: var(--db-neutral-2); - --db-neutral-bg-lvl-2-hover: var(--db-neutral-3); - --db-neutral-bg-lvl-2-pressed: var(--db-neutral-4); - --db-neutral-bg-lvl-3-enabled: var(--db-neutral-1); - --db-neutral-bg-lvl-3-hover: var(--db-neutral-2); - --db-neutral-bg-lvl-3-pressed: var(--db-neutral-3); - --db-neutral-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-neutral-9) + --db-neutral-contrast-high-pressed: light-dark( + var(--db-neutral-4), + var(--db-neutral-7) ); - --db-neutral-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 84%, - var(--db-neutral-9) + --db-neutral-contrast-low-enabled: light-dark( + var(--db-neutral-7), + var(--db-neutral-8) ); - --db-neutral-bg-transparent-hover: color-mix( - in srgb, - transparent 76%, - var(--db-neutral-9) + --db-neutral-contrast-low-hover: light-dark( + var(--db-neutral-6), + var(--db-neutral-7) ); - --db-neutral-bg-transparent-pressed: color-mix( - in srgb, - transparent 68%, - var(--db-neutral-9) + --db-neutral-contrast-low-pressed: light-dark( + var(--db-neutral-5), + var(--db-neutral-6) ); - --db-neutral-on-bg-enabled: var(--db-neutral-12); - --db-neutral-on-bg-hover: var(--db-neutral-11); - --db-neutral-on-bg-pressed: var(--db-neutral-10); - --db-neutral-on-bg-weak-enabled: var(--db-neutral-10); - --db-neutral-on-bg-weak-hover: var(--db-neutral-9); - --db-neutral-on-bg-weak-pressed: var(--db-neutral-8); - --db-neutral-on-contrast-enabled: var(--db-neutral-3); - --db-neutral-on-contrast-hover: var(--db-neutral-4); - --db-neutral-on-contrast-pressed: var(--db-neutral-5); - --db-neutral-contrast-high-enabled: var(--db-neutral-9); - --db-neutral-contrast-high-hover: var(--db-neutral-8); - --db-neutral-contrast-high-pressed: var(--db-neutral-7); - --db-neutral-contrast-low-enabled: var(--db-neutral-8); - --db-neutral-contrast-low-hover: var(--db-neutral-7); - --db-neutral-contrast-low-pressed: var(--db-neutral-6); - --db-neutral-border: var(--db-neutral-6); - --db-brand-on-enabled: var(--db-brand-on-dark); - --db-brand-on-hover: var(--db-brand-on-hover-dark); - --db-brand-on-pressed: var(--db-brand-on-pressed-dark); - --db-brand-origin-enabled: var(--db-brand-origin-dark); - --db-brand-origin-hover: var(--db-brand-hover-dark); - --db-brand-origin-pressed: var(--db-brand-pressed-dark); - --db-brand-bg-lvl-1-enabled: var(--db-brand-3); - --db-brand-bg-lvl-1-hover: var(--db-brand-4); - --db-brand-bg-lvl-1-pressed: var(--db-brand-5); - --db-brand-bg-lvl-2-enabled: var(--db-brand-2); - --db-brand-bg-lvl-2-hover: var(--db-brand-3); - --db-brand-bg-lvl-2-pressed: var(--db-brand-4); - --db-brand-bg-lvl-3-enabled: var(--db-brand-1); - --db-brand-bg-lvl-3-hover: var(--db-brand-2); - --db-brand-bg-lvl-3-pressed: var(--db-brand-3); - --db-brand-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-brand-9) + --db-neutral-border: light-dark(var(--db-neutral-10), var(--db-neutral-6)); + --db-brand-on-enabled: light-dark( + var(--db-brand-on-light), + var(--db-brand-on-dark) ); - --db-brand-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 84%, - var(--db-brand-9) + --db-brand-on-hover: light-dark( + var(--db-brand-on-hover-light), + var(--db-brand-on-hover-dark) + ); + --db-brand-on-pressed: light-dark( + var(--db-brand-on-pressed-light), + var(--db-brand-on-pressed-dark) + ); + --db-brand-origin-enabled: light-dark( + var(--db-brand-origin-light), + var(--db-brand-origin-dark) + ); + --db-brand-origin-hover: light-dark( + var(--db-brand-hover-light), + var(--db-brand-hover-dark) + ); + --db-brand-origin-pressed: light-dark( + var(--db-brand-pressed-light), + var(--db-brand-pressed-dark) + ); + --db-brand-bg-lvl-1-enabled: light-dark( + var(--db-brand-14), + var(--db-brand-3) + ); + --db-brand-bg-lvl-1-hover: light-dark( + var(--db-brand-13), + var(--db-brand-4) ); - --db-brand-bg-transparent-hover: color-mix( - in srgb, - transparent 76%, + --db-brand-bg-lvl-1-pressed: light-dark( + var(--db-brand-12), + var(--db-brand-5) + ); + --db-brand-bg-lvl-2-enabled: light-dark( + var(--db-brand-13), + var(--db-brand-2) + ); + --db-brand-bg-lvl-2-hover: light-dark( + var(--db-brand-12), + var(--db-brand-3) + ); + --db-brand-bg-lvl-2-pressed: light-dark( + var(--db-brand-11), + var(--db-brand-4) + ); + --db-brand-bg-lvl-3-enabled: light-dark( + var(--db-brand-12), + var(--db-brand-1) + ); + --db-brand-bg-lvl-3-hover: light-dark( + var(--db-brand-11), + var(--db-brand-2) + ); + --db-brand-bg-lvl-3-pressed: light-dark( + var(--db-brand-10), + var(--db-brand-3) + ); + --db-brand-bg-transparent-full-enabled: light-dark( + color-mix(in srgb, transparent 100%, var(--db-brand-6)), + color-mix(in srgb, transparent 100%, var(--db-brand-9)) + ); + --db-brand-bg-transparent-semi-enabled: light-dark( + color-mix(in srgb, transparent 92%, var(--db-brand-6)), + color-mix(in srgb, transparent 84%, var(--db-brand-9)) + ); + --db-brand-bg-transparent-hover: light-dark( + color-mix(in srgb, transparent 84%, var(--db-brand-6)), + color-mix(in srgb, transparent 76%, var(--db-brand-9)) + ); + --db-brand-bg-transparent-pressed: light-dark( + color-mix(in srgb, transparent 76%, var(--db-brand-6)), + color-mix(in srgb, transparent 68%, var(--db-brand-9)) + ); + --db-brand-on-bg-enabled: light-dark(var(--db-brand-3), var(--db-brand-12)); + --db-brand-on-bg-hover: light-dark(var(--db-brand-4), var(--db-brand-11)); + --db-brand-on-bg-pressed: light-dark(var(--db-brand-5), var(--db-brand-10)); + --db-brand-on-bg-weak-enabled: light-dark( + var(--db-brand-5), + var(--db-brand-10) + ); + --db-brand-on-bg-weak-hover: light-dark( + var(--db-brand-6), var(--db-brand-9) ); - --db-brand-bg-transparent-pressed: color-mix( - in srgb, - transparent 68%, + --db-brand-on-bg-weak-pressed: light-dark( + var(--db-brand-7), + var(--db-brand-8) + ); + --db-brand-on-contrast-enabled: light-dark( + var(--db-brand-14), + var(--db-brand-3) + ); + --db-brand-on-contrast-hover: light-dark( + var(--db-brand-13), + var(--db-brand-4) + ); + --db-brand-on-contrast-pressed: light-dark( + var(--db-brand-12), + var(--db-brand-5) + ); + --db-brand-contrast-high-enabled: light-dark( + var(--db-brand-6), var(--db-brand-9) ); - --db-brand-on-bg-enabled: var(--db-brand-12); - --db-brand-on-bg-hover: var(--db-brand-11); - --db-brand-on-bg-pressed: var(--db-brand-10); - --db-brand-on-bg-weak-enabled: var(--db-brand-10); - --db-brand-on-bg-weak-hover: var(--db-brand-9); - --db-brand-on-bg-weak-pressed: var(--db-brand-8); - --db-brand-on-contrast-enabled: var(--db-brand-3); - --db-brand-on-contrast-hover: var(--db-brand-4); - --db-brand-on-contrast-pressed: var(--db-brand-5); - --db-brand-contrast-high-enabled: var(--db-brand-9); - --db-brand-contrast-high-hover: var(--db-brand-8); - --db-brand-contrast-high-pressed: var(--db-brand-7); - --db-brand-contrast-low-enabled: var(--db-brand-8); - --db-brand-contrast-low-hover: var(--db-brand-7); - --db-brand-contrast-low-pressed: var(--db-brand-6); - --db-brand-border: var(--db-brand-6); - --db-informational-bg-lvl-1-enabled: var(--db-informational-3); - --db-informational-bg-lvl-1-hover: var(--db-informational-4); - --db-informational-bg-lvl-1-pressed: var(--db-informational-5); - --db-informational-bg-lvl-2-enabled: var(--db-informational-2); - --db-informational-bg-lvl-2-hover: var(--db-informational-3); - --db-informational-bg-lvl-2-pressed: var(--db-informational-4); - --db-informational-bg-lvl-3-enabled: var(--db-informational-1); - --db-informational-bg-lvl-3-hover: var(--db-informational-2); - --db-informational-bg-lvl-3-pressed: var(--db-informational-3); - --db-informational-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-informational-9) + --db-brand-contrast-high-hover: light-dark( + var(--db-brand-5), + var(--db-brand-8) ); - --db-informational-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 84%, - var(--db-informational-9) + --db-brand-contrast-high-pressed: light-dark( + var(--db-brand-4), + var(--db-brand-7) + ); + --db-brand-contrast-low-enabled: light-dark( + var(--db-brand-7), + var(--db-brand-8) + ); + --db-brand-contrast-low-hover: light-dark( + var(--db-brand-6), + var(--db-brand-7) + ); + --db-brand-contrast-low-pressed: light-dark( + var(--db-brand-5), + var(--db-brand-6) + ); + --db-brand-border: light-dark(var(--db-brand-10), var(--db-brand-6)); + --db-informational-bg-lvl-1-enabled: light-dark( + var(--db-informational-14), + var(--db-informational-3) + ); + --db-informational-bg-lvl-1-hover: light-dark( + var(--db-informational-13), + var(--db-informational-4) ); - --db-informational-bg-transparent-hover: color-mix( - in srgb, - transparent 76%, + --db-informational-bg-lvl-1-pressed: light-dark( + var(--db-informational-12), + var(--db-informational-5) + ); + --db-informational-bg-lvl-2-enabled: light-dark( + var(--db-informational-13), + var(--db-informational-2) + ); + --db-informational-bg-lvl-2-hover: light-dark( + var(--db-informational-12), + var(--db-informational-3) + ); + --db-informational-bg-lvl-2-pressed: light-dark( + var(--db-informational-11), + var(--db-informational-4) + ); + --db-informational-bg-lvl-3-enabled: light-dark( + var(--db-informational-12), + var(--db-informational-1) + ); + --db-informational-bg-lvl-3-hover: light-dark( + var(--db-informational-11), + var(--db-informational-2) + ); + --db-informational-bg-lvl-3-pressed: light-dark( + var(--db-informational-10), + var(--db-informational-3) + ); + --db-informational-bg-transparent-full-enabled: light-dark( + color-mix(in srgb, transparent 100%, var(--db-informational-6)), + color-mix(in srgb, transparent 100%, var(--db-informational-9)) + ); + --db-informational-bg-transparent-semi-enabled: light-dark( + color-mix(in srgb, transparent 92%, var(--db-informational-6)), + color-mix(in srgb, transparent 84%, var(--db-informational-9)) + ); + --db-informational-bg-transparent-hover: light-dark( + color-mix(in srgb, transparent 84%, var(--db-informational-6)), + color-mix(in srgb, transparent 76%, var(--db-informational-9)) + ); + --db-informational-bg-transparent-pressed: light-dark( + color-mix(in srgb, transparent 76%, var(--db-informational-6)), + color-mix(in srgb, transparent 68%, var(--db-informational-9)) + ); + --db-informational-on-bg-enabled: light-dark( + var(--db-informational-3), + var(--db-informational-12) + ); + --db-informational-on-bg-hover: light-dark( + var(--db-informational-4), + var(--db-informational-11) + ); + --db-informational-on-bg-pressed: light-dark( + var(--db-informational-5), + var(--db-informational-10) + ); + --db-informational-on-bg-weak-enabled: light-dark( + var(--db-informational-5), + var(--db-informational-10) + ); + --db-informational-on-bg-weak-hover: light-dark( + var(--db-informational-6), var(--db-informational-9) ); - --db-informational-bg-transparent-pressed: color-mix( - in srgb, - transparent 68%, + --db-informational-on-bg-weak-pressed: light-dark( + var(--db-informational-7), + var(--db-informational-8) + ); + --db-informational-on-contrast-enabled: light-dark( + var(--db-informational-14), + var(--db-informational-3) + ); + --db-informational-on-contrast-hover: light-dark( + var(--db-informational-13), + var(--db-informational-4) + ); + --db-informational-on-contrast-pressed: light-dark( + var(--db-informational-12), + var(--db-informational-5) + ); + --db-informational-contrast-high-enabled: light-dark( + var(--db-informational-6), var(--db-informational-9) ); - --db-informational-on-bg-enabled: var(--db-informational-12); - --db-informational-on-bg-hover: var(--db-informational-11); - --db-informational-on-bg-pressed: var(--db-informational-10); - --db-informational-on-bg-weak-enabled: var(--db-informational-10); - --db-informational-on-bg-weak-hover: var(--db-informational-9); - --db-informational-on-bg-weak-pressed: var(--db-informational-8); - --db-informational-on-contrast-enabled: var(--db-informational-3); - --db-informational-on-contrast-hover: var(--db-informational-4); - --db-informational-on-contrast-pressed: var(--db-informational-5); - --db-informational-contrast-high-enabled: var(--db-informational-9); - --db-informational-contrast-high-hover: var(--db-informational-8); - --db-informational-contrast-high-pressed: var(--db-informational-7); - --db-informational-contrast-low-enabled: var(--db-informational-8); - --db-informational-contrast-low-hover: var(--db-informational-7); - --db-informational-contrast-low-pressed: var(--db-informational-6); - --db-informational-border: var(--db-informational-6); - --db-warning-bg-lvl-1-enabled: var(--db-warning-3); - --db-warning-bg-lvl-1-hover: var(--db-warning-4); - --db-warning-bg-lvl-1-pressed: var(--db-warning-5); - --db-warning-bg-lvl-2-enabled: var(--db-warning-2); - --db-warning-bg-lvl-2-hover: var(--db-warning-3); - --db-warning-bg-lvl-2-pressed: var(--db-warning-4); - --db-warning-bg-lvl-3-enabled: var(--db-warning-1); - --db-warning-bg-lvl-3-hover: var(--db-warning-2); - --db-warning-bg-lvl-3-pressed: var(--db-warning-3); - --db-warning-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-warning-9) + --db-informational-contrast-high-hover: light-dark( + var(--db-informational-5), + var(--db-informational-8) ); - --db-warning-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 84%, - var(--db-warning-9) + --db-informational-contrast-high-pressed: light-dark( + var(--db-informational-4), + var(--db-informational-7) ); - --db-warning-bg-transparent-hover: color-mix( - in srgb, - transparent 76%, + --db-informational-contrast-low-enabled: light-dark( + var(--db-informational-7), + var(--db-informational-8) + ); + --db-informational-contrast-low-hover: light-dark( + var(--db-informational-6), + var(--db-informational-7) + ); + --db-informational-contrast-low-pressed: light-dark( + var(--db-informational-5), + var(--db-informational-6) + ); + --db-informational-border: light-dark( + var(--db-informational-10), + var(--db-informational-6) + ); + --db-warning-bg-lvl-1-enabled: light-dark( + var(--db-warning-14), + var(--db-warning-3) + ); + --db-warning-bg-lvl-1-hover: light-dark( + var(--db-warning-13), + var(--db-warning-4) + ); + --db-warning-bg-lvl-1-pressed: light-dark( + var(--db-warning-12), + var(--db-warning-5) + ); + --db-warning-bg-lvl-2-enabled: light-dark( + var(--db-warning-13), + var(--db-warning-2) + ); + --db-warning-bg-lvl-2-hover: light-dark( + var(--db-warning-12), + var(--db-warning-3) + ); + --db-warning-bg-lvl-2-pressed: light-dark( + var(--db-warning-11), + var(--db-warning-4) + ); + --db-warning-bg-lvl-3-enabled: light-dark( + var(--db-warning-12), + var(--db-warning-1) + ); + --db-warning-bg-lvl-3-hover: light-dark( + var(--db-warning-11), + var(--db-warning-2) + ); + --db-warning-bg-lvl-3-pressed: light-dark( + var(--db-warning-10), + var(--db-warning-3) + ); + --db-warning-bg-transparent-full-enabled: light-dark( + color-mix(in srgb, transparent 100%, var(--db-warning-6)), + color-mix(in srgb, transparent 100%, var(--db-warning-9)) + ); + --db-warning-bg-transparent-semi-enabled: light-dark( + color-mix(in srgb, transparent 92%, var(--db-warning-6)), + color-mix(in srgb, transparent 84%, var(--db-warning-9)) + ); + --db-warning-bg-transparent-hover: light-dark( + color-mix(in srgb, transparent 84%, var(--db-warning-6)), + color-mix(in srgb, transparent 76%, var(--db-warning-9)) + ); + --db-warning-bg-transparent-pressed: light-dark( + color-mix(in srgb, transparent 76%, var(--db-warning-6)), + color-mix(in srgb, transparent 68%, var(--db-warning-9)) + ); + --db-warning-on-bg-enabled: light-dark( + var(--db-warning-3), + var(--db-warning-12) + ); + --db-warning-on-bg-hover: light-dark( + var(--db-warning-4), + var(--db-warning-11) + ); + --db-warning-on-bg-pressed: light-dark( + var(--db-warning-5), + var(--db-warning-10) + ); + --db-warning-on-bg-weak-enabled: light-dark( + var(--db-warning-5), + var(--db-warning-10) + ); + --db-warning-on-bg-weak-hover: light-dark( + var(--db-warning-6), var(--db-warning-9) ); - --db-warning-bg-transparent-pressed: color-mix( - in srgb, - transparent 68%, + --db-warning-on-bg-weak-pressed: light-dark( + var(--db-warning-7), + var(--db-warning-8) + ); + --db-warning-on-contrast-enabled: light-dark( + var(--db-warning-14), + var(--db-warning-3) + ); + --db-warning-on-contrast-hover: light-dark( + var(--db-warning-13), + var(--db-warning-4) + ); + --db-warning-on-contrast-pressed: light-dark( + var(--db-warning-12), + var(--db-warning-5) + ); + --db-warning-contrast-high-enabled: light-dark( + var(--db-warning-6), var(--db-warning-9) ); - --db-warning-on-bg-enabled: var(--db-warning-12); - --db-warning-on-bg-hover: var(--db-warning-11); - --db-warning-on-bg-pressed: var(--db-warning-10); - --db-warning-on-bg-weak-enabled: var(--db-warning-10); - --db-warning-on-bg-weak-hover: var(--db-warning-9); - --db-warning-on-bg-weak-pressed: var(--db-warning-8); - --db-warning-on-contrast-enabled: var(--db-warning-3); - --db-warning-on-contrast-hover: var(--db-warning-4); - --db-warning-on-contrast-pressed: var(--db-warning-5); - --db-warning-contrast-high-enabled: var(--db-warning-9); - --db-warning-contrast-high-hover: var(--db-warning-8); - --db-warning-contrast-high-pressed: var(--db-warning-7); - --db-warning-contrast-low-enabled: var(--db-warning-8); - --db-warning-contrast-low-hover: var(--db-warning-7); - --db-warning-contrast-low-pressed: var(--db-warning-6); - --db-warning-border: var(--db-warning-6); - --db-successful-bg-lvl-1-enabled: var(--db-successful-3); - --db-successful-bg-lvl-1-hover: var(--db-successful-4); - --db-successful-bg-lvl-1-pressed: var(--db-successful-5); - --db-successful-bg-lvl-2-enabled: var(--db-successful-2); - --db-successful-bg-lvl-2-hover: var(--db-successful-3); - --db-successful-bg-lvl-2-pressed: var(--db-successful-4); - --db-successful-bg-lvl-3-enabled: var(--db-successful-1); - --db-successful-bg-lvl-3-hover: var(--db-successful-2); - --db-successful-bg-lvl-3-pressed: var(--db-successful-3); - --db-successful-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-successful-9) + --db-warning-contrast-high-hover: light-dark( + var(--db-warning-5), + var(--db-warning-8) ); - --db-successful-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 84%, - var(--db-successful-9) + --db-warning-contrast-high-pressed: light-dark( + var(--db-warning-4), + var(--db-warning-7) + ); + --db-warning-contrast-low-enabled: light-dark( + var(--db-warning-7), + var(--db-warning-8) + ); + --db-warning-contrast-low-hover: light-dark( + var(--db-warning-6), + var(--db-warning-7) + ); + --db-warning-contrast-low-pressed: light-dark( + var(--db-warning-5), + var(--db-warning-6) + ); + --db-warning-border: light-dark(var(--db-warning-10), var(--db-warning-6)); + --db-successful-bg-lvl-1-enabled: light-dark( + var(--db-successful-14), + var(--db-successful-3) + ); + --db-successful-bg-lvl-1-hover: light-dark( + var(--db-successful-13), + var(--db-successful-4) + ); + --db-successful-bg-lvl-1-pressed: light-dark( + var(--db-successful-12), + var(--db-successful-5) + ); + --db-successful-bg-lvl-2-enabled: light-dark( + var(--db-successful-13), + var(--db-successful-2) + ); + --db-successful-bg-lvl-2-hover: light-dark( + var(--db-successful-12), + var(--db-successful-3) + ); + --db-successful-bg-lvl-2-pressed: light-dark( + var(--db-successful-11), + var(--db-successful-4) ); - --db-successful-bg-transparent-hover: color-mix( - in srgb, - transparent 76%, + --db-successful-bg-lvl-3-enabled: light-dark( + var(--db-successful-12), + var(--db-successful-1) + ); + --db-successful-bg-lvl-3-hover: light-dark( + var(--db-successful-11), + var(--db-successful-2) + ); + --db-successful-bg-lvl-3-pressed: light-dark( + var(--db-successful-10), + var(--db-successful-3) + ); + --db-successful-bg-transparent-full-enabled: light-dark( + color-mix(in srgb, transparent 100%, var(--db-successful-6)), + color-mix(in srgb, transparent 100%, var(--db-successful-9)) + ); + --db-successful-bg-transparent-semi-enabled: light-dark( + color-mix(in srgb, transparent 92%, var(--db-successful-6)), + color-mix(in srgb, transparent 84%, var(--db-successful-9)) + ); + --db-successful-bg-transparent-hover: light-dark( + color-mix(in srgb, transparent 84%, var(--db-successful-6)), + color-mix(in srgb, transparent 76%, var(--db-successful-9)) + ); + --db-successful-bg-transparent-pressed: light-dark( + color-mix(in srgb, transparent 76%, var(--db-successful-6)), + color-mix(in srgb, transparent 68%, var(--db-successful-9)) + ); + --db-successful-on-bg-enabled: light-dark( + var(--db-successful-3), + var(--db-successful-12) + ); + --db-successful-on-bg-hover: light-dark( + var(--db-successful-4), + var(--db-successful-11) + ); + --db-successful-on-bg-pressed: light-dark( + var(--db-successful-5), + var(--db-successful-10) + ); + --db-successful-on-bg-weak-enabled: light-dark( + var(--db-successful-5), + var(--db-successful-10) + ); + --db-successful-on-bg-weak-hover: light-dark( + var(--db-successful-6), var(--db-successful-9) ); - --db-successful-bg-transparent-pressed: color-mix( - in srgb, - transparent 68%, + --db-successful-on-bg-weak-pressed: light-dark( + var(--db-successful-7), + var(--db-successful-8) + ); + --db-successful-on-contrast-enabled: light-dark( + var(--db-successful-14), + var(--db-successful-3) + ); + --db-successful-on-contrast-hover: light-dark( + var(--db-successful-13), + var(--db-successful-4) + ); + --db-successful-on-contrast-pressed: light-dark( + var(--db-successful-12), + var(--db-successful-5) + ); + --db-successful-contrast-high-enabled: light-dark( + var(--db-successful-6), var(--db-successful-9) ); - --db-successful-on-bg-enabled: var(--db-successful-12); - --db-successful-on-bg-hover: var(--db-successful-11); - --db-successful-on-bg-pressed: var(--db-successful-10); - --db-successful-on-bg-weak-enabled: var(--db-successful-10); - --db-successful-on-bg-weak-hover: var(--db-successful-9); - --db-successful-on-bg-weak-pressed: var(--db-successful-8); - --db-successful-on-contrast-enabled: var(--db-successful-3); - --db-successful-on-contrast-hover: var(--db-successful-4); - --db-successful-on-contrast-pressed: var(--db-successful-5); - --db-successful-contrast-high-enabled: var(--db-successful-9); - --db-successful-contrast-high-hover: var(--db-successful-8); - --db-successful-contrast-high-pressed: var(--db-successful-7); - --db-successful-contrast-low-enabled: var(--db-successful-8); - --db-successful-contrast-low-hover: var(--db-successful-7); - --db-successful-contrast-low-pressed: var(--db-successful-6); - --db-successful-border: var(--db-successful-6); - --db-critical-bg-lvl-1-enabled: var(--db-critical-3); - --db-critical-bg-lvl-1-hover: var(--db-critical-4); - --db-critical-bg-lvl-1-pressed: var(--db-critical-5); - --db-critical-bg-lvl-2-enabled: var(--db-critical-2); - --db-critical-bg-lvl-2-hover: var(--db-critical-3); - --db-critical-bg-lvl-2-pressed: var(--db-critical-4); - --db-critical-bg-lvl-3-enabled: var(--db-critical-1); - --db-critical-bg-lvl-3-hover: var(--db-critical-2); - --db-critical-bg-lvl-3-pressed: var(--db-critical-3); - --db-critical-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-critical-9) + --db-successful-contrast-high-hover: light-dark( + var(--db-successful-5), + var(--db-successful-8) ); - --db-critical-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 84%, - var(--db-critical-9) + --db-successful-contrast-high-pressed: light-dark( + var(--db-successful-4), + var(--db-successful-7) + ); + --db-successful-contrast-low-enabled: light-dark( + var(--db-successful-7), + var(--db-successful-8) + ); + --db-successful-contrast-low-hover: light-dark( + var(--db-successful-6), + var(--db-successful-7) + ); + --db-successful-contrast-low-pressed: light-dark( + var(--db-successful-5), + var(--db-successful-6) + ); + --db-successful-border: light-dark( + var(--db-successful-10), + var(--db-successful-6) + ); + --db-critical-bg-lvl-1-enabled: light-dark( + var(--db-critical-14), + var(--db-critical-3) + ); + --db-critical-bg-lvl-1-hover: light-dark( + var(--db-critical-13), + var(--db-critical-4) + ); + --db-critical-bg-lvl-1-pressed: light-dark( + var(--db-critical-12), + var(--db-critical-5) + ); + --db-critical-bg-lvl-2-enabled: light-dark( + var(--db-critical-13), + var(--db-critical-2) + ); + --db-critical-bg-lvl-2-hover: light-dark( + var(--db-critical-12), + var(--db-critical-3) + ); + --db-critical-bg-lvl-2-pressed: light-dark( + var(--db-critical-11), + var(--db-critical-4) + ); + --db-critical-bg-lvl-3-enabled: light-dark( + var(--db-critical-12), + var(--db-critical-1) + ); + --db-critical-bg-lvl-3-hover: light-dark( + var(--db-critical-11), + var(--db-critical-2) + ); + --db-critical-bg-lvl-3-pressed: light-dark( + var(--db-critical-10), + var(--db-critical-3) + ); + --db-critical-bg-transparent-full-enabled: light-dark( + color-mix(in srgb, transparent 100%, var(--db-critical-6)), + color-mix(in srgb, transparent 100%, var(--db-critical-9)) + ); + --db-critical-bg-transparent-semi-enabled: light-dark( + color-mix(in srgb, transparent 92%, var(--db-critical-6)), + color-mix(in srgb, transparent 84%, var(--db-critical-9)) + ); + --db-critical-bg-transparent-hover: light-dark( + color-mix(in srgb, transparent 84%, var(--db-critical-6)), + color-mix(in srgb, transparent 76%, var(--db-critical-9)) + ); + --db-critical-bg-transparent-pressed: light-dark( + color-mix(in srgb, transparent 76%, var(--db-critical-6)), + color-mix(in srgb, transparent 68%, var(--db-critical-9)) ); - --db-critical-bg-transparent-hover: color-mix( - in srgb, - transparent 76%, + --db-critical-on-bg-enabled: light-dark( + var(--db-critical-3), + var(--db-critical-12) + ); + --db-critical-on-bg-hover: light-dark( + var(--db-critical-4), + var(--db-critical-11) + ); + --db-critical-on-bg-pressed: light-dark( + var(--db-critical-5), + var(--db-critical-10) + ); + --db-critical-on-bg-weak-enabled: light-dark( + var(--db-critical-5), + var(--db-critical-10) + ); + --db-critical-on-bg-weak-hover: light-dark( + var(--db-critical-6), var(--db-critical-9) ); - --db-critical-bg-transparent-pressed: color-mix( - in srgb, - transparent 68%, + --db-critical-on-bg-weak-pressed: light-dark( + var(--db-critical-7), + var(--db-critical-8) + ); + --db-critical-on-contrast-enabled: light-dark( + var(--db-critical-14), + var(--db-critical-3) + ); + --db-critical-on-contrast-hover: light-dark( + var(--db-critical-13), + var(--db-critical-4) + ); + --db-critical-on-contrast-pressed: light-dark( + var(--db-critical-12), + var(--db-critical-5) + ); + --db-critical-contrast-high-enabled: light-dark( + var(--db-critical-6), var(--db-critical-9) ); - --db-critical-on-bg-enabled: var(--db-critical-12); - --db-critical-on-bg-hover: var(--db-critical-11); - --db-critical-on-bg-pressed: var(--db-critical-10); - --db-critical-on-bg-weak-enabled: var(--db-critical-10); - --db-critical-on-bg-weak-hover: var(--db-critical-9); - --db-critical-on-bg-weak-pressed: var(--db-critical-8); - --db-critical-on-contrast-enabled: var(--db-critical-3); - --db-critical-on-contrast-hover: var(--db-critical-4); - --db-critical-on-contrast-pressed: var(--db-critical-5); - --db-critical-contrast-high-enabled: var(--db-critical-9); - --db-critical-contrast-high-hover: var(--db-critical-8); - --db-critical-contrast-high-pressed: var(--db-critical-7); - --db-critical-contrast-low-enabled: var(--db-critical-8); - --db-critical-contrast-low-hover: var(--db-critical-7); - --db-critical-contrast-low-pressed: var(--db-critical-6); - --db-critical-border: var(--db-critical-6); + --db-critical-contrast-high-hover: light-dark( + var(--db-critical-5), + var(--db-critical-8) + ); + --db-critical-contrast-high-pressed: light-dark( + var(--db-critical-4), + var(--db-critical-7) + ); + --db-critical-contrast-low-enabled: light-dark( + var(--db-critical-7), + var(--db-critical-8) + ); + --db-critical-contrast-low-hover: light-dark( + var(--db-critical-6), + var(--db-critical-7) + ); + --db-critical-contrast-low-pressed: light-dark( + var(--db-critical-5), + var(--db-critical-6) + ); + --db-critical-border: light-dark( + var(--db-critical-10), + var(--db-critical-6) + ); +} + +@mixin get-color-scheme-light { + --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiMyODJkMzciIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg=="); + --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iIzI4MmQzNyIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K"); + --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjQ3MiA4LjY5Ni0zLjUzMiAzLjUzNGEuOTk4Ljk5OCAwIDEgMSAtMS40MTMtMS40MTNsMi44MjUtMi44MjUtMi44MjUtMi44MjVhLjk5OC45OTggMCAxIDEgMS40MTMtMS40MTNsMy41MzIgMy41MzJhLjk5OS45OTkgMCAwIDEgMCAxLjQxMnoiIGZpbGw9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoMCAxIC0xIDAgMTUuOTkxIC0uMDA5KSIvPjwvc3ZnPg0K"); +} +@mixin get-color-scheme-dark { --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiNmOGY4ZjkiIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg=="); --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iI2Y4ZjhmOSIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K"); --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDdhLjk5OC45OTggMCAwIDAgLS45OTQuOTk1YzAgLjI2Ni4xMzMuNTMxLjI5OC42OTdsNS4wMDYgNS4wMWMuMTk5LjE5OC40NjQuMjk4LjY5Ni4yOThhLjkzNi45MzYgMCAwIDAgLjYyLS4yMmw1LjA4Mi01LjA4OGMuMTk5LS4xNjYuMjk4LS40MzEuMjk4LS42OTdhLjk5OC45OTggMCAwIDAgLS45OTQtLjk5NWMtLjI2NiAwLS41My4xLS43My4yOTlsLTQuMjc2IDQuMjgtNC4yNzYtNC4yOGExLjAyOCAxLjAyOCAwIDAgMCAtLjczLS4yOTl6IiBmaWxsPSIjZjhmOGY5IiBzdHlsZT0idmFyKC0tZGItaWNvbi1jb2xvciwgY3VycmVudENvbG9yKSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+DQo="); - - color-scheme: dark; } -@mixin get-additional-color-scheme-light { - --db-yellow-on-enabled: var(--db-yellow-on-light); - --db-yellow-on-hover: var(--db-yellow-on-hover-light); - --db-yellow-on-pressed: var(--db-yellow-on-pressed-light); - --db-yellow-origin-enabled: var(--db-yellow-origin-light); - --db-yellow-origin-hover: var(--db-yellow-hover-light); - --db-yellow-origin-pressed: var(--db-yellow-pressed-light); - --db-yellow-bg-lvl-1-enabled: var(--db-yellow-14); - --db-yellow-bg-lvl-1-hover: var(--db-yellow-13); - --db-yellow-bg-lvl-1-pressed: var(--db-yellow-12); - --db-yellow-bg-lvl-2-enabled: var(--db-yellow-13); - --db-yellow-bg-lvl-2-hover: var(--db-yellow-12); - --db-yellow-bg-lvl-2-pressed: var(--db-yellow-11); - --db-yellow-bg-lvl-3-enabled: var(--db-yellow-12); - --db-yellow-bg-lvl-3-hover: var(--db-yellow-11); - --db-yellow-bg-lvl-3-pressed: var(--db-yellow-10); - --db-yellow-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-yellow-6) +@mixin get-additional-color-scheme { + --db-yellow-on-enabled: light-dark( + var(--db-yellow-on-light), + var(--db-yellow-on-dark) ); - --db-yellow-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 92%, - var(--db-yellow-6) + --db-yellow-on-hover: light-dark( + var(--db-yellow-on-hover-light), + var(--db-yellow-on-hover-dark) ); - --db-yellow-bg-transparent-hover: color-mix( - in srgb, - transparent 84%, - var(--db-yellow-6) + --db-yellow-on-pressed: light-dark( + var(--db-yellow-on-pressed-light), + var(--db-yellow-on-pressed-dark) ); - --db-yellow-bg-transparent-pressed: color-mix( - in srgb, - transparent 76%, - var(--db-yellow-6) + --db-yellow-origin-enabled: light-dark( + var(--db-yellow-origin-light), + var(--db-yellow-origin-dark) ); - --db-yellow-on-bg-enabled: var(--db-yellow-3); - --db-yellow-on-bg-hover: var(--db-yellow-4); - --db-yellow-on-bg-pressed: var(--db-yellow-5); - --db-yellow-on-bg-weak-enabled: var(--db-yellow-5); - --db-yellow-on-bg-weak-hover: var(--db-yellow-6); - --db-yellow-on-bg-weak-pressed: var(--db-yellow-7); - --db-yellow-on-contrast-enabled: var(--db-yellow-14); - --db-yellow-on-contrast-hover: var(--db-yellow-13); - --db-yellow-on-contrast-pressed: var(--db-yellow-12); - --db-yellow-contrast-high-enabled: var(--db-yellow-6); - --db-yellow-contrast-high-hover: var(--db-yellow-5); - --db-yellow-contrast-high-pressed: var(--db-yellow-4); - --db-yellow-contrast-low-enabled: var(--db-yellow-7); - --db-yellow-contrast-low-hover: var(--db-yellow-6); - --db-yellow-contrast-low-pressed: var(--db-yellow-5); - --db-yellow-border: var(--db-yellow-10); - --db-orange-on-enabled: var(--db-orange-on-light); - --db-orange-on-hover: var(--db-orange-on-hover-light); - --db-orange-on-pressed: var(--db-orange-on-pressed-light); - --db-orange-origin-enabled: var(--db-orange-origin-light); - --db-orange-origin-hover: var(--db-orange-hover-light); - --db-orange-origin-pressed: var(--db-orange-pressed-light); - --db-orange-bg-lvl-1-enabled: var(--db-orange-14); - --db-orange-bg-lvl-1-hover: var(--db-orange-13); - --db-orange-bg-lvl-1-pressed: var(--db-orange-12); - --db-orange-bg-lvl-2-enabled: var(--db-orange-13); - --db-orange-bg-lvl-2-hover: var(--db-orange-12); - --db-orange-bg-lvl-2-pressed: var(--db-orange-11); - --db-orange-bg-lvl-3-enabled: var(--db-orange-12); - --db-orange-bg-lvl-3-hover: var(--db-orange-11); - --db-orange-bg-lvl-3-pressed: var(--db-orange-10); - --db-orange-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-orange-6) + --db-yellow-origin-hover: light-dark( + var(--db-yellow-hover-light), + var(--db-yellow-hover-dark) ); - --db-orange-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 92%, - var(--db-orange-6) + --db-yellow-origin-pressed: light-dark( + var(--db-yellow-pressed-light), + var(--db-yellow-pressed-dark) ); - --db-orange-bg-transparent-hover: color-mix( - in srgb, - transparent 84%, - var(--db-orange-6) + --db-yellow-bg-lvl-1-enabled: light-dark( + var(--db-yellow-14), + var(--db-yellow-3) ); - --db-orange-bg-transparent-pressed: color-mix( - in srgb, - transparent 76%, - var(--db-orange-6) + --db-yellow-bg-lvl-1-hover: light-dark( + var(--db-yellow-13), + var(--db-yellow-4) ); - --db-orange-on-bg-enabled: var(--db-orange-3); - --db-orange-on-bg-hover: var(--db-orange-4); - --db-orange-on-bg-pressed: var(--db-orange-5); - --db-orange-on-bg-weak-enabled: var(--db-orange-5); - --db-orange-on-bg-weak-hover: var(--db-orange-6); - --db-orange-on-bg-weak-pressed: var(--db-orange-7); - --db-orange-on-contrast-enabled: var(--db-orange-14); - --db-orange-on-contrast-hover: var(--db-orange-13); - --db-orange-on-contrast-pressed: var(--db-orange-12); - --db-orange-contrast-high-enabled: var(--db-orange-6); - --db-orange-contrast-high-hover: var(--db-orange-5); - --db-orange-contrast-high-pressed: var(--db-orange-4); - --db-orange-contrast-low-enabled: var(--db-orange-7); - --db-orange-contrast-low-hover: var(--db-orange-6); - --db-orange-contrast-low-pressed: var(--db-orange-5); - --db-orange-border: var(--db-orange-10); - --db-red-on-enabled: var(--db-red-on-light); - --db-red-on-hover: var(--db-red-on-hover-light); - --db-red-on-pressed: var(--db-red-on-pressed-light); - --db-red-origin-enabled: var(--db-red-origin-light); - --db-red-origin-hover: var(--db-red-hover-light); - --db-red-origin-pressed: var(--db-red-pressed-light); - --db-red-bg-lvl-1-enabled: var(--db-red-14); - --db-red-bg-lvl-1-hover: var(--db-red-13); - --db-red-bg-lvl-1-pressed: var(--db-red-12); - --db-red-bg-lvl-2-enabled: var(--db-red-13); - --db-red-bg-lvl-2-hover: var(--db-red-12); - --db-red-bg-lvl-2-pressed: var(--db-red-11); - --db-red-bg-lvl-3-enabled: var(--db-red-12); - --db-red-bg-lvl-3-hover: var(--db-red-11); - --db-red-bg-lvl-3-pressed: var(--db-red-10); - --db-red-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-red-6) - ); - --db-red-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 92%, - var(--db-red-6) - ); - --db-red-bg-transparent-hover: color-mix( - in srgb, - transparent 84%, - var(--db-red-6) - ); - --db-red-bg-transparent-pressed: color-mix( - in srgb, - transparent 76%, - var(--db-red-6) - ); - --db-red-on-bg-enabled: var(--db-red-3); - --db-red-on-bg-hover: var(--db-red-4); - --db-red-on-bg-pressed: var(--db-red-5); - --db-red-on-bg-weak-enabled: var(--db-red-5); - --db-red-on-bg-weak-hover: var(--db-red-6); - --db-red-on-bg-weak-pressed: var(--db-red-7); - --db-red-on-contrast-enabled: var(--db-red-14); - --db-red-on-contrast-hover: var(--db-red-13); - --db-red-on-contrast-pressed: var(--db-red-12); - --db-red-contrast-high-enabled: var(--db-red-6); - --db-red-contrast-high-hover: var(--db-red-5); - --db-red-contrast-high-pressed: var(--db-red-4); - --db-red-contrast-low-enabled: var(--db-red-7); - --db-red-contrast-low-hover: var(--db-red-6); - --db-red-contrast-low-pressed: var(--db-red-5); - --db-red-border: var(--db-red-10); - --db-pink-on-enabled: var(--db-pink-on-light); - --db-pink-on-hover: var(--db-pink-on-hover-light); - --db-pink-on-pressed: var(--db-pink-on-pressed-light); - --db-pink-origin-enabled: var(--db-pink-origin-light); - --db-pink-origin-hover: var(--db-pink-hover-light); - --db-pink-origin-pressed: var(--db-pink-pressed-light); - --db-pink-bg-lvl-1-enabled: var(--db-pink-14); - --db-pink-bg-lvl-1-hover: var(--db-pink-13); - --db-pink-bg-lvl-1-pressed: var(--db-pink-12); - --db-pink-bg-lvl-2-enabled: var(--db-pink-13); - --db-pink-bg-lvl-2-hover: var(--db-pink-12); - --db-pink-bg-lvl-2-pressed: var(--db-pink-11); - --db-pink-bg-lvl-3-enabled: var(--db-pink-12); - --db-pink-bg-lvl-3-hover: var(--db-pink-11); - --db-pink-bg-lvl-3-pressed: var(--db-pink-10); - --db-pink-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-pink-6) + --db-yellow-bg-lvl-1-pressed: light-dark( + var(--db-yellow-12), + var(--db-yellow-5) ); - --db-pink-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 92%, - var(--db-pink-6) + --db-yellow-bg-lvl-2-enabled: light-dark( + var(--db-yellow-13), + var(--db-yellow-2) ); - --db-pink-bg-transparent-hover: color-mix( - in srgb, - transparent 84%, - var(--db-pink-6) + --db-yellow-bg-lvl-2-hover: light-dark( + var(--db-yellow-12), + var(--db-yellow-3) ); - --db-pink-bg-transparent-pressed: color-mix( - in srgb, - transparent 76%, - var(--db-pink-6) + --db-yellow-bg-lvl-2-pressed: light-dark( + var(--db-yellow-11), + var(--db-yellow-4) ); - --db-pink-on-bg-enabled: var(--db-pink-3); - --db-pink-on-bg-hover: var(--db-pink-4); - --db-pink-on-bg-pressed: var(--db-pink-5); - --db-pink-on-bg-weak-enabled: var(--db-pink-5); - --db-pink-on-bg-weak-hover: var(--db-pink-6); - --db-pink-on-bg-weak-pressed: var(--db-pink-7); - --db-pink-on-contrast-enabled: var(--db-pink-14); - --db-pink-on-contrast-hover: var(--db-pink-13); - --db-pink-on-contrast-pressed: var(--db-pink-12); - --db-pink-contrast-high-enabled: var(--db-pink-6); - --db-pink-contrast-high-hover: var(--db-pink-5); - --db-pink-contrast-high-pressed: var(--db-pink-4); - --db-pink-contrast-low-enabled: var(--db-pink-7); - --db-pink-contrast-low-hover: var(--db-pink-6); - --db-pink-contrast-low-pressed: var(--db-pink-5); - --db-pink-border: var(--db-pink-10); - --db-violet-on-enabled: var(--db-violet-on-light); - --db-violet-on-hover: var(--db-violet-on-hover-light); - --db-violet-on-pressed: var(--db-violet-on-pressed-light); - --db-violet-origin-enabled: var(--db-violet-origin-light); - --db-violet-origin-hover: var(--db-violet-hover-light); - --db-violet-origin-pressed: var(--db-violet-pressed-light); - --db-violet-bg-lvl-1-enabled: var(--db-violet-14); - --db-violet-bg-lvl-1-hover: var(--db-violet-13); - --db-violet-bg-lvl-1-pressed: var(--db-violet-12); - --db-violet-bg-lvl-2-enabled: var(--db-violet-13); - --db-violet-bg-lvl-2-hover: var(--db-violet-12); - --db-violet-bg-lvl-2-pressed: var(--db-violet-11); - --db-violet-bg-lvl-3-enabled: var(--db-violet-12); - --db-violet-bg-lvl-3-hover: var(--db-violet-11); - --db-violet-bg-lvl-3-pressed: var(--db-violet-10); - --db-violet-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-violet-6) + --db-yellow-bg-lvl-3-enabled: light-dark( + var(--db-yellow-12), + var(--db-yellow-1) ); - --db-violet-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 92%, - var(--db-violet-6) + --db-yellow-bg-lvl-3-hover: light-dark( + var(--db-yellow-11), + var(--db-yellow-2) ); - --db-violet-bg-transparent-hover: color-mix( - in srgb, - transparent 84%, - var(--db-violet-6) + --db-yellow-bg-lvl-3-pressed: light-dark( + var(--db-yellow-10), + var(--db-yellow-3) ); - --db-violet-bg-transparent-pressed: color-mix( - in srgb, - transparent 76%, - var(--db-violet-6) + --db-yellow-bg-transparent-full-enabled: light-dark( + color-mix(in srgb, transparent 100%, var(--db-yellow-6)), + color-mix(in srgb, transparent 100%, var(--db-yellow-9)) ); - --db-violet-on-bg-enabled: var(--db-violet-3); - --db-violet-on-bg-hover: var(--db-violet-4); - --db-violet-on-bg-pressed: var(--db-violet-5); - --db-violet-on-bg-weak-enabled: var(--db-violet-5); - --db-violet-on-bg-weak-hover: var(--db-violet-6); - --db-violet-on-bg-weak-pressed: var(--db-violet-7); - --db-violet-on-contrast-enabled: var(--db-violet-14); - --db-violet-on-contrast-hover: var(--db-violet-13); - --db-violet-on-contrast-pressed: var(--db-violet-12); - --db-violet-contrast-high-enabled: var(--db-violet-6); - --db-violet-contrast-high-hover: var(--db-violet-5); - --db-violet-contrast-high-pressed: var(--db-violet-4); - --db-violet-contrast-low-enabled: var(--db-violet-7); - --db-violet-contrast-low-hover: var(--db-violet-6); - --db-violet-contrast-low-pressed: var(--db-violet-5); - --db-violet-border: var(--db-violet-10); - --db-blue-on-enabled: var(--db-blue-on-light); - --db-blue-on-hover: var(--db-blue-on-hover-light); - --db-blue-on-pressed: var(--db-blue-on-pressed-light); - --db-blue-origin-enabled: var(--db-blue-origin-light); - --db-blue-origin-hover: var(--db-blue-hover-light); - --db-blue-origin-pressed: var(--db-blue-pressed-light); - --db-blue-bg-lvl-1-enabled: var(--db-blue-14); - --db-blue-bg-lvl-1-hover: var(--db-blue-13); - --db-blue-bg-lvl-1-pressed: var(--db-blue-12); - --db-blue-bg-lvl-2-enabled: var(--db-blue-13); - --db-blue-bg-lvl-2-hover: var(--db-blue-12); - --db-blue-bg-lvl-2-pressed: var(--db-blue-11); - --db-blue-bg-lvl-3-enabled: var(--db-blue-12); - --db-blue-bg-lvl-3-hover: var(--db-blue-11); - --db-blue-bg-lvl-3-pressed: var(--db-blue-10); - --db-blue-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-blue-6) + --db-yellow-bg-transparent-semi-enabled: light-dark( + color-mix(in srgb, transparent 92%, var(--db-yellow-6)), + color-mix(in srgb, transparent 84%, var(--db-yellow-9)) ); - --db-blue-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 92%, - var(--db-blue-6) + --db-yellow-bg-transparent-hover: light-dark( + color-mix(in srgb, transparent 84%, var(--db-yellow-6)), + color-mix(in srgb, transparent 76%, var(--db-yellow-9)) ); - --db-blue-bg-transparent-hover: color-mix( - in srgb, - transparent 84%, - var(--db-blue-6) + --db-yellow-bg-transparent-pressed: light-dark( + color-mix(in srgb, transparent 76%, var(--db-yellow-6)), + color-mix(in srgb, transparent 68%, var(--db-yellow-9)) ); - --db-blue-bg-transparent-pressed: color-mix( - in srgb, - transparent 76%, - var(--db-blue-6) + --db-yellow-on-bg-enabled: light-dark( + var(--db-yellow-3), + var(--db-yellow-12) ); - --db-blue-on-bg-enabled: var(--db-blue-3); - --db-blue-on-bg-hover: var(--db-blue-4); - --db-blue-on-bg-pressed: var(--db-blue-5); - --db-blue-on-bg-weak-enabled: var(--db-blue-5); - --db-blue-on-bg-weak-hover: var(--db-blue-6); - --db-blue-on-bg-weak-pressed: var(--db-blue-7); - --db-blue-on-contrast-enabled: var(--db-blue-14); - --db-blue-on-contrast-hover: var(--db-blue-13); - --db-blue-on-contrast-pressed: var(--db-blue-12); - --db-blue-contrast-high-enabled: var(--db-blue-6); - --db-blue-contrast-high-hover: var(--db-blue-5); - --db-blue-contrast-high-pressed: var(--db-blue-4); - --db-blue-contrast-low-enabled: var(--db-blue-7); - --db-blue-contrast-low-hover: var(--db-blue-6); - --db-blue-contrast-low-pressed: var(--db-blue-5); - --db-blue-border: var(--db-blue-10); - --db-cyan-on-enabled: var(--db-cyan-on-light); - --db-cyan-on-hover: var(--db-cyan-on-hover-light); - --db-cyan-on-pressed: var(--db-cyan-on-pressed-light); - --db-cyan-origin-enabled: var(--db-cyan-origin-light); - --db-cyan-origin-hover: var(--db-cyan-hover-light); - --db-cyan-origin-pressed: var(--db-cyan-pressed-light); - --db-cyan-bg-lvl-1-enabled: var(--db-cyan-14); - --db-cyan-bg-lvl-1-hover: var(--db-cyan-13); - --db-cyan-bg-lvl-1-pressed: var(--db-cyan-12); - --db-cyan-bg-lvl-2-enabled: var(--db-cyan-13); - --db-cyan-bg-lvl-2-hover: var(--db-cyan-12); - --db-cyan-bg-lvl-2-pressed: var(--db-cyan-11); - --db-cyan-bg-lvl-3-enabled: var(--db-cyan-12); - --db-cyan-bg-lvl-3-hover: var(--db-cyan-11); - --db-cyan-bg-lvl-3-pressed: var(--db-cyan-10); - --db-cyan-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-cyan-6) + --db-yellow-on-bg-hover: light-dark( + var(--db-yellow-4), + var(--db-yellow-11) ); - --db-cyan-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 92%, - var(--db-cyan-6) + --db-yellow-on-bg-pressed: light-dark( + var(--db-yellow-5), + var(--db-yellow-10) ); - --db-cyan-bg-transparent-hover: color-mix( - in srgb, - transparent 84%, - var(--db-cyan-6) + --db-yellow-on-bg-weak-enabled: light-dark( + var(--db-yellow-5), + var(--db-yellow-10) ); - --db-cyan-bg-transparent-pressed: color-mix( - in srgb, - transparent 76%, - var(--db-cyan-6) + --db-yellow-on-bg-weak-hover: light-dark( + var(--db-yellow-6), + var(--db-yellow-9) ); - --db-cyan-on-bg-enabled: var(--db-cyan-3); - --db-cyan-on-bg-hover: var(--db-cyan-4); - --db-cyan-on-bg-pressed: var(--db-cyan-5); - --db-cyan-on-bg-weak-enabled: var(--db-cyan-5); - --db-cyan-on-bg-weak-hover: var(--db-cyan-6); - --db-cyan-on-bg-weak-pressed: var(--db-cyan-7); - --db-cyan-on-contrast-enabled: var(--db-cyan-14); - --db-cyan-on-contrast-hover: var(--db-cyan-13); - --db-cyan-on-contrast-pressed: var(--db-cyan-12); - --db-cyan-contrast-high-enabled: var(--db-cyan-6); - --db-cyan-contrast-high-hover: var(--db-cyan-5); - --db-cyan-contrast-high-pressed: var(--db-cyan-4); - --db-cyan-contrast-low-enabled: var(--db-cyan-7); - --db-cyan-contrast-low-hover: var(--db-cyan-6); - --db-cyan-contrast-low-pressed: var(--db-cyan-5); - --db-cyan-border: var(--db-cyan-10); - --db-turquoise-on-enabled: var(--db-turquoise-on-light); - --db-turquoise-on-hover: var(--db-turquoise-on-hover-light); - --db-turquoise-on-pressed: var(--db-turquoise-on-pressed-light); - --db-turquoise-origin-enabled: var(--db-turquoise-origin-light); - --db-turquoise-origin-hover: var(--db-turquoise-hover-light); - --db-turquoise-origin-pressed: var(--db-turquoise-pressed-light); - --db-turquoise-bg-lvl-1-enabled: var(--db-turquoise-14); - --db-turquoise-bg-lvl-1-hover: var(--db-turquoise-13); - --db-turquoise-bg-lvl-1-pressed: var(--db-turquoise-12); - --db-turquoise-bg-lvl-2-enabled: var(--db-turquoise-13); - --db-turquoise-bg-lvl-2-hover: var(--db-turquoise-12); - --db-turquoise-bg-lvl-2-pressed: var(--db-turquoise-11); - --db-turquoise-bg-lvl-3-enabled: var(--db-turquoise-12); - --db-turquoise-bg-lvl-3-hover: var(--db-turquoise-11); - --db-turquoise-bg-lvl-3-pressed: var(--db-turquoise-10); - --db-turquoise-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-turquoise-6) + --db-yellow-on-bg-weak-pressed: light-dark( + var(--db-yellow-7), + var(--db-yellow-8) ); - --db-turquoise-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 92%, - var(--db-turquoise-6) + --db-yellow-on-contrast-enabled: light-dark( + var(--db-yellow-14), + var(--db-yellow-3) ); - --db-turquoise-bg-transparent-hover: color-mix( - in srgb, - transparent 84%, - var(--db-turquoise-6) + --db-yellow-on-contrast-hover: light-dark( + var(--db-yellow-13), + var(--db-yellow-4) ); - --db-turquoise-bg-transparent-pressed: color-mix( - in srgb, - transparent 76%, - var(--db-turquoise-6) + --db-yellow-on-contrast-pressed: light-dark( + var(--db-yellow-12), + var(--db-yellow-5) ); - --db-turquoise-on-bg-enabled: var(--db-turquoise-3); - --db-turquoise-on-bg-hover: var(--db-turquoise-4); - --db-turquoise-on-bg-pressed: var(--db-turquoise-5); - --db-turquoise-on-bg-weak-enabled: var(--db-turquoise-5); - --db-turquoise-on-bg-weak-hover: var(--db-turquoise-6); - --db-turquoise-on-bg-weak-pressed: var(--db-turquoise-7); - --db-turquoise-on-contrast-enabled: var(--db-turquoise-14); - --db-turquoise-on-contrast-hover: var(--db-turquoise-13); - --db-turquoise-on-contrast-pressed: var(--db-turquoise-12); - --db-turquoise-contrast-high-enabled: var(--db-turquoise-6); - --db-turquoise-contrast-high-hover: var(--db-turquoise-5); - --db-turquoise-contrast-high-pressed: var(--db-turquoise-4); - --db-turquoise-contrast-low-enabled: var(--db-turquoise-7); - --db-turquoise-contrast-low-hover: var(--db-turquoise-6); - --db-turquoise-contrast-low-pressed: var(--db-turquoise-5); - --db-turquoise-border: var(--db-turquoise-10); - --db-green-on-enabled: var(--db-green-on-light); - --db-green-on-hover: var(--db-green-on-hover-light); - --db-green-on-pressed: var(--db-green-on-pressed-light); - --db-green-origin-enabled: var(--db-green-origin-light); - --db-green-origin-hover: var(--db-green-hover-light); - --db-green-origin-pressed: var(--db-green-pressed-light); - --db-green-bg-lvl-1-enabled: var(--db-green-14); - --db-green-bg-lvl-1-hover: var(--db-green-13); - --db-green-bg-lvl-1-pressed: var(--db-green-12); - --db-green-bg-lvl-2-enabled: var(--db-green-13); - --db-green-bg-lvl-2-hover: var(--db-green-12); - --db-green-bg-lvl-2-pressed: var(--db-green-11); - --db-green-bg-lvl-3-enabled: var(--db-green-12); - --db-green-bg-lvl-3-hover: var(--db-green-11); - --db-green-bg-lvl-3-pressed: var(--db-green-10); - --db-green-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-green-6) + --db-yellow-contrast-high-enabled: light-dark( + var(--db-yellow-6), + var(--db-yellow-9) ); - --db-green-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 92%, - var(--db-green-6) + --db-yellow-contrast-high-hover: light-dark( + var(--db-yellow-5), + var(--db-yellow-8) ); - --db-green-bg-transparent-hover: color-mix( - in srgb, - transparent 84%, - var(--db-green-6) + --db-yellow-contrast-high-pressed: light-dark( + var(--db-yellow-4), + var(--db-yellow-7) ); - --db-green-bg-transparent-pressed: color-mix( - in srgb, - transparent 76%, - var(--db-green-6) + --db-yellow-contrast-low-enabled: light-dark( + var(--db-yellow-7), + var(--db-yellow-8) ); - --db-green-on-bg-enabled: var(--db-green-3); - --db-green-on-bg-hover: var(--db-green-4); - --db-green-on-bg-pressed: var(--db-green-5); - --db-green-on-bg-weak-enabled: var(--db-green-5); - --db-green-on-bg-weak-hover: var(--db-green-6); - --db-green-on-bg-weak-pressed: var(--db-green-7); - --db-green-on-contrast-enabled: var(--db-green-14); - --db-green-on-contrast-hover: var(--db-green-13); - --db-green-on-contrast-pressed: var(--db-green-12); - --db-green-contrast-high-enabled: var(--db-green-6); - --db-green-contrast-high-hover: var(--db-green-5); - --db-green-contrast-high-pressed: var(--db-green-4); - --db-green-contrast-low-enabled: var(--db-green-7); - --db-green-contrast-low-hover: var(--db-green-6); - --db-green-contrast-low-pressed: var(--db-green-5); - --db-green-border: var(--db-green-10); -} - -@mixin get-additional-color-scheme-dark { - --db-yellow-on-enabled: var(--db-yellow-on-dark); - --db-yellow-on-hover: var(--db-yellow-on-hover-dark); - --db-yellow-on-pressed: var(--db-yellow-on-pressed-dark); - --db-yellow-origin-enabled: var(--db-yellow-origin-dark); - --db-yellow-origin-hover: var(--db-yellow-hover-dark); - --db-yellow-origin-pressed: var(--db-yellow-pressed-dark); - --db-yellow-bg-lvl-1-enabled: var(--db-yellow-3); - --db-yellow-bg-lvl-1-hover: var(--db-yellow-4); - --db-yellow-bg-lvl-1-pressed: var(--db-yellow-5); - --db-yellow-bg-lvl-2-enabled: var(--db-yellow-2); - --db-yellow-bg-lvl-2-hover: var(--db-yellow-3); - --db-yellow-bg-lvl-2-pressed: var(--db-yellow-4); - --db-yellow-bg-lvl-3-enabled: var(--db-yellow-1); - --db-yellow-bg-lvl-3-hover: var(--db-yellow-2); - --db-yellow-bg-lvl-3-pressed: var(--db-yellow-3); - --db-yellow-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-yellow-9) + --db-yellow-contrast-low-hover: light-dark( + var(--db-yellow-6), + var(--db-yellow-7) ); - --db-yellow-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 84%, - var(--db-yellow-9) + --db-yellow-contrast-low-pressed: light-dark( + var(--db-yellow-5), + var(--db-yellow-6) ); - --db-yellow-bg-transparent-hover: color-mix( - in srgb, - transparent 76%, - var(--db-yellow-9) + --db-yellow-border: light-dark(var(--db-yellow-10), var(--db-yellow-6)); + --db-orange-on-enabled: light-dark( + var(--db-orange-on-light), + var(--db-orange-on-dark) ); - --db-yellow-bg-transparent-pressed: color-mix( - in srgb, - transparent 68%, - var(--db-yellow-9) + --db-orange-on-hover: light-dark( + var(--db-orange-on-hover-light), + var(--db-orange-on-hover-dark) ); - --db-yellow-on-bg-enabled: var(--db-yellow-12); - --db-yellow-on-bg-hover: var(--db-yellow-11); - --db-yellow-on-bg-pressed: var(--db-yellow-10); - --db-yellow-on-bg-weak-enabled: var(--db-yellow-10); - --db-yellow-on-bg-weak-hover: var(--db-yellow-9); - --db-yellow-on-bg-weak-pressed: var(--db-yellow-8); - --db-yellow-on-contrast-enabled: var(--db-yellow-3); - --db-yellow-on-contrast-hover: var(--db-yellow-4); - --db-yellow-on-contrast-pressed: var(--db-yellow-5); - --db-yellow-contrast-high-enabled: var(--db-yellow-9); - --db-yellow-contrast-high-hover: var(--db-yellow-8); - --db-yellow-contrast-high-pressed: var(--db-yellow-7); - --db-yellow-contrast-low-enabled: var(--db-yellow-8); - --db-yellow-contrast-low-hover: var(--db-yellow-7); - --db-yellow-contrast-low-pressed: var(--db-yellow-6); - --db-yellow-border: var(--db-yellow-6); - --db-orange-on-enabled: var(--db-orange-on-dark); - --db-orange-on-hover: var(--db-orange-on-hover-dark); - --db-orange-on-pressed: var(--db-orange-on-pressed-dark); - --db-orange-origin-enabled: var(--db-orange-origin-dark); - --db-orange-origin-hover: var(--db-orange-hover-dark); - --db-orange-origin-pressed: var(--db-orange-pressed-dark); - --db-orange-bg-lvl-1-enabled: var(--db-orange-3); - --db-orange-bg-lvl-1-hover: var(--db-orange-4); - --db-orange-bg-lvl-1-pressed: var(--db-orange-5); - --db-orange-bg-lvl-2-enabled: var(--db-orange-2); - --db-orange-bg-lvl-2-hover: var(--db-orange-3); - --db-orange-bg-lvl-2-pressed: var(--db-orange-4); - --db-orange-bg-lvl-3-enabled: var(--db-orange-1); - --db-orange-bg-lvl-3-hover: var(--db-orange-2); - --db-orange-bg-lvl-3-pressed: var(--db-orange-3); - --db-orange-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-orange-9) + --db-orange-on-pressed: light-dark( + var(--db-orange-on-pressed-light), + var(--db-orange-on-pressed-dark) ); - --db-orange-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 84%, - var(--db-orange-9) + --db-orange-origin-enabled: light-dark( + var(--db-orange-origin-light), + var(--db-orange-origin-dark) + ); + --db-orange-origin-hover: light-dark( + var(--db-orange-hover-light), + var(--db-orange-hover-dark) + ); + --db-orange-origin-pressed: light-dark( + var(--db-orange-pressed-light), + var(--db-orange-pressed-dark) + ); + --db-orange-bg-lvl-1-enabled: light-dark( + var(--db-orange-14), + var(--db-orange-3) ); - --db-orange-bg-transparent-hover: color-mix( - in srgb, - transparent 76%, + --db-orange-bg-lvl-1-hover: light-dark( + var(--db-orange-13), + var(--db-orange-4) + ); + --db-orange-bg-lvl-1-pressed: light-dark( + var(--db-orange-12), + var(--db-orange-5) + ); + --db-orange-bg-lvl-2-enabled: light-dark( + var(--db-orange-13), + var(--db-orange-2) + ); + --db-orange-bg-lvl-2-hover: light-dark( + var(--db-orange-12), + var(--db-orange-3) + ); + --db-orange-bg-lvl-2-pressed: light-dark( + var(--db-orange-11), + var(--db-orange-4) + ); + --db-orange-bg-lvl-3-enabled: light-dark( + var(--db-orange-12), + var(--db-orange-1) + ); + --db-orange-bg-lvl-3-hover: light-dark( + var(--db-orange-11), + var(--db-orange-2) + ); + --db-orange-bg-lvl-3-pressed: light-dark( + var(--db-orange-10), + var(--db-orange-3) + ); + --db-orange-bg-transparent-full-enabled: light-dark( + color-mix(in srgb, transparent 100%, var(--db-orange-6)), + color-mix(in srgb, transparent 100%, var(--db-orange-9)) + ); + --db-orange-bg-transparent-semi-enabled: light-dark( + color-mix(in srgb, transparent 92%, var(--db-orange-6)), + color-mix(in srgb, transparent 84%, var(--db-orange-9)) + ); + --db-orange-bg-transparent-hover: light-dark( + color-mix(in srgb, transparent 84%, var(--db-orange-6)), + color-mix(in srgb, transparent 76%, var(--db-orange-9)) + ); + --db-orange-bg-transparent-pressed: light-dark( + color-mix(in srgb, transparent 76%, var(--db-orange-6)), + color-mix(in srgb, transparent 68%, var(--db-orange-9)) + ); + --db-orange-on-bg-enabled: light-dark( + var(--db-orange-3), + var(--db-orange-12) + ); + --db-orange-on-bg-hover: light-dark( + var(--db-orange-4), + var(--db-orange-11) + ); + --db-orange-on-bg-pressed: light-dark( + var(--db-orange-5), + var(--db-orange-10) + ); + --db-orange-on-bg-weak-enabled: light-dark( + var(--db-orange-5), + var(--db-orange-10) + ); + --db-orange-on-bg-weak-hover: light-dark( + var(--db-orange-6), var(--db-orange-9) ); - --db-orange-bg-transparent-pressed: color-mix( - in srgb, - transparent 68%, + --db-orange-on-bg-weak-pressed: light-dark( + var(--db-orange-7), + var(--db-orange-8) + ); + --db-orange-on-contrast-enabled: light-dark( + var(--db-orange-14), + var(--db-orange-3) + ); + --db-orange-on-contrast-hover: light-dark( + var(--db-orange-13), + var(--db-orange-4) + ); + --db-orange-on-contrast-pressed: light-dark( + var(--db-orange-12), + var(--db-orange-5) + ); + --db-orange-contrast-high-enabled: light-dark( + var(--db-orange-6), var(--db-orange-9) ); - --db-orange-on-bg-enabled: var(--db-orange-12); - --db-orange-on-bg-hover: var(--db-orange-11); - --db-orange-on-bg-pressed: var(--db-orange-10); - --db-orange-on-bg-weak-enabled: var(--db-orange-10); - --db-orange-on-bg-weak-hover: var(--db-orange-9); - --db-orange-on-bg-weak-pressed: var(--db-orange-8); - --db-orange-on-contrast-enabled: var(--db-orange-3); - --db-orange-on-contrast-hover: var(--db-orange-4); - --db-orange-on-contrast-pressed: var(--db-orange-5); - --db-orange-contrast-high-enabled: var(--db-orange-9); - --db-orange-contrast-high-hover: var(--db-orange-8); - --db-orange-contrast-high-pressed: var(--db-orange-7); - --db-orange-contrast-low-enabled: var(--db-orange-8); - --db-orange-contrast-low-hover: var(--db-orange-7); - --db-orange-contrast-low-pressed: var(--db-orange-6); - --db-orange-border: var(--db-orange-6); - --db-red-on-enabled: var(--db-red-on-dark); - --db-red-on-hover: var(--db-red-on-hover-dark); - --db-red-on-pressed: var(--db-red-on-pressed-dark); - --db-red-origin-enabled: var(--db-red-origin-dark); - --db-red-origin-hover: var(--db-red-hover-dark); - --db-red-origin-pressed: var(--db-red-pressed-dark); - --db-red-bg-lvl-1-enabled: var(--db-red-3); - --db-red-bg-lvl-1-hover: var(--db-red-4); - --db-red-bg-lvl-1-pressed: var(--db-red-5); - --db-red-bg-lvl-2-enabled: var(--db-red-2); - --db-red-bg-lvl-2-hover: var(--db-red-3); - --db-red-bg-lvl-2-pressed: var(--db-red-4); - --db-red-bg-lvl-3-enabled: var(--db-red-1); - --db-red-bg-lvl-3-hover: var(--db-red-2); - --db-red-bg-lvl-3-pressed: var(--db-red-3); - --db-red-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-red-9) + --db-orange-contrast-high-hover: light-dark( + var(--db-orange-5), + var(--db-orange-8) ); - --db-red-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 84%, - var(--db-red-9) + --db-orange-contrast-high-pressed: light-dark( + var(--db-orange-4), + var(--db-orange-7) ); - --db-red-bg-transparent-hover: color-mix( - in srgb, - transparent 76%, - var(--db-red-9) + --db-orange-contrast-low-enabled: light-dark( + var(--db-orange-7), + var(--db-orange-8) + ); + --db-orange-contrast-low-hover: light-dark( + var(--db-orange-6), + var(--db-orange-7) ); - --db-red-bg-transparent-pressed: color-mix( - in srgb, - transparent 68%, + --db-orange-contrast-low-pressed: light-dark( + var(--db-orange-5), + var(--db-orange-6) + ); + --db-orange-border: light-dark(var(--db-orange-10), var(--db-orange-6)); + --db-red-on-enabled: light-dark( + var(--db-red-on-light), + var(--db-red-on-dark) + ); + --db-red-on-hover: light-dark( + var(--db-red-on-hover-light), + var(--db-red-on-hover-dark) + ); + --db-red-on-pressed: light-dark( + var(--db-red-on-pressed-light), + var(--db-red-on-pressed-dark) + ); + --db-red-origin-enabled: light-dark( + var(--db-red-origin-light), + var(--db-red-origin-dark) + ); + --db-red-origin-hover: light-dark( + var(--db-red-hover-light), + var(--db-red-hover-dark) + ); + --db-red-origin-pressed: light-dark( + var(--db-red-pressed-light), + var(--db-red-pressed-dark) + ); + --db-red-bg-lvl-1-enabled: light-dark(var(--db-red-14), var(--db-red-3)); + --db-red-bg-lvl-1-hover: light-dark(var(--db-red-13), var(--db-red-4)); + --db-red-bg-lvl-1-pressed: light-dark(var(--db-red-12), var(--db-red-5)); + --db-red-bg-lvl-2-enabled: light-dark(var(--db-red-13), var(--db-red-2)); + --db-red-bg-lvl-2-hover: light-dark(var(--db-red-12), var(--db-red-3)); + --db-red-bg-lvl-2-pressed: light-dark(var(--db-red-11), var(--db-red-4)); + --db-red-bg-lvl-3-enabled: light-dark(var(--db-red-12), var(--db-red-1)); + --db-red-bg-lvl-3-hover: light-dark(var(--db-red-11), var(--db-red-2)); + --db-red-bg-lvl-3-pressed: light-dark(var(--db-red-10), var(--db-red-3)); + --db-red-bg-transparent-full-enabled: light-dark( + color-mix(in srgb, transparent 100%, var(--db-red-6)), + color-mix(in srgb, transparent 100%, var(--db-red-9)) + ); + --db-red-bg-transparent-semi-enabled: light-dark( + color-mix(in srgb, transparent 92%, var(--db-red-6)), + color-mix(in srgb, transparent 84%, var(--db-red-9)) + ); + --db-red-bg-transparent-hover: light-dark( + color-mix(in srgb, transparent 84%, var(--db-red-6)), + color-mix(in srgb, transparent 76%, var(--db-red-9)) + ); + --db-red-bg-transparent-pressed: light-dark( + color-mix(in srgb, transparent 76%, var(--db-red-6)), + color-mix(in srgb, transparent 68%, var(--db-red-9)) + ); + --db-red-on-bg-enabled: light-dark(var(--db-red-3), var(--db-red-12)); + --db-red-on-bg-hover: light-dark(var(--db-red-4), var(--db-red-11)); + --db-red-on-bg-pressed: light-dark(var(--db-red-5), var(--db-red-10)); + --db-red-on-bg-weak-enabled: light-dark(var(--db-red-5), var(--db-red-10)); + --db-red-on-bg-weak-hover: light-dark(var(--db-red-6), var(--db-red-9)); + --db-red-on-bg-weak-pressed: light-dark(var(--db-red-7), var(--db-red-8)); + --db-red-on-contrast-enabled: light-dark(var(--db-red-14), var(--db-red-3)); + --db-red-on-contrast-hover: light-dark(var(--db-red-13), var(--db-red-4)); + --db-red-on-contrast-pressed: light-dark(var(--db-red-12), var(--db-red-5)); + --db-red-contrast-high-enabled: light-dark( + var(--db-red-6), var(--db-red-9) ); - --db-red-on-bg-enabled: var(--db-red-12); - --db-red-on-bg-hover: var(--db-red-11); - --db-red-on-bg-pressed: var(--db-red-10); - --db-red-on-bg-weak-enabled: var(--db-red-10); - --db-red-on-bg-weak-hover: var(--db-red-9); - --db-red-on-bg-weak-pressed: var(--db-red-8); - --db-red-on-contrast-enabled: var(--db-red-3); - --db-red-on-contrast-hover: var(--db-red-4); - --db-red-on-contrast-pressed: var(--db-red-5); - --db-red-contrast-high-enabled: var(--db-red-9); - --db-red-contrast-high-hover: var(--db-red-8); - --db-red-contrast-high-pressed: var(--db-red-7); - --db-red-contrast-low-enabled: var(--db-red-8); - --db-red-contrast-low-hover: var(--db-red-7); - --db-red-contrast-low-pressed: var(--db-red-6); - --db-red-border: var(--db-red-6); - --db-pink-on-enabled: var(--db-pink-on-dark); - --db-pink-on-hover: var(--db-pink-on-hover-dark); - --db-pink-on-pressed: var(--db-pink-on-pressed-dark); - --db-pink-origin-enabled: var(--db-pink-origin-dark); - --db-pink-origin-hover: var(--db-pink-hover-dark); - --db-pink-origin-pressed: var(--db-pink-pressed-dark); - --db-pink-bg-lvl-1-enabled: var(--db-pink-3); - --db-pink-bg-lvl-1-hover: var(--db-pink-4); - --db-pink-bg-lvl-1-pressed: var(--db-pink-5); - --db-pink-bg-lvl-2-enabled: var(--db-pink-2); - --db-pink-bg-lvl-2-hover: var(--db-pink-3); - --db-pink-bg-lvl-2-pressed: var(--db-pink-4); - --db-pink-bg-lvl-3-enabled: var(--db-pink-1); - --db-pink-bg-lvl-3-hover: var(--db-pink-2); - --db-pink-bg-lvl-3-pressed: var(--db-pink-3); - --db-pink-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, + --db-red-contrast-high-hover: light-dark(var(--db-red-5), var(--db-red-8)); + --db-red-contrast-high-pressed: light-dark( + var(--db-red-4), + var(--db-red-7) + ); + --db-red-contrast-low-enabled: light-dark(var(--db-red-7), var(--db-red-8)); + --db-red-contrast-low-hover: light-dark(var(--db-red-6), var(--db-red-7)); + --db-red-contrast-low-pressed: light-dark(var(--db-red-5), var(--db-red-6)); + --db-red-border: light-dark(var(--db-red-10), var(--db-red-6)); + --db-pink-on-enabled: light-dark( + var(--db-pink-on-light), + var(--db-pink-on-dark) + ); + --db-pink-on-hover: light-dark( + var(--db-pink-on-hover-light), + var(--db-pink-on-hover-dark) + ); + --db-pink-on-pressed: light-dark( + var(--db-pink-on-pressed-light), + var(--db-pink-on-pressed-dark) + ); + --db-pink-origin-enabled: light-dark( + var(--db-pink-origin-light), + var(--db-pink-origin-dark) + ); + --db-pink-origin-hover: light-dark( + var(--db-pink-hover-light), + var(--db-pink-hover-dark) + ); + --db-pink-origin-pressed: light-dark( + var(--db-pink-pressed-light), + var(--db-pink-pressed-dark) + ); + --db-pink-bg-lvl-1-enabled: light-dark(var(--db-pink-14), var(--db-pink-3)); + --db-pink-bg-lvl-1-hover: light-dark(var(--db-pink-13), var(--db-pink-4)); + --db-pink-bg-lvl-1-pressed: light-dark(var(--db-pink-12), var(--db-pink-5)); + --db-pink-bg-lvl-2-enabled: light-dark(var(--db-pink-13), var(--db-pink-2)); + --db-pink-bg-lvl-2-hover: light-dark(var(--db-pink-12), var(--db-pink-3)); + --db-pink-bg-lvl-2-pressed: light-dark(var(--db-pink-11), var(--db-pink-4)); + --db-pink-bg-lvl-3-enabled: light-dark(var(--db-pink-12), var(--db-pink-1)); + --db-pink-bg-lvl-3-hover: light-dark(var(--db-pink-11), var(--db-pink-2)); + --db-pink-bg-lvl-3-pressed: light-dark(var(--db-pink-10), var(--db-pink-3)); + --db-pink-bg-transparent-full-enabled: light-dark( + color-mix(in srgb, transparent 100%, var(--db-pink-6)), + color-mix(in srgb, transparent 100%, var(--db-pink-9)) + ); + --db-pink-bg-transparent-semi-enabled: light-dark( + color-mix(in srgb, transparent 92%, var(--db-pink-6)), + color-mix(in srgb, transparent 84%, var(--db-pink-9)) + ); + --db-pink-bg-transparent-hover: light-dark( + color-mix(in srgb, transparent 84%, var(--db-pink-6)), + color-mix(in srgb, transparent 76%, var(--db-pink-9)) + ); + --db-pink-bg-transparent-pressed: light-dark( + color-mix(in srgb, transparent 76%, var(--db-pink-6)), + color-mix(in srgb, transparent 68%, var(--db-pink-9)) + ); + --db-pink-on-bg-enabled: light-dark(var(--db-pink-3), var(--db-pink-12)); + --db-pink-on-bg-hover: light-dark(var(--db-pink-4), var(--db-pink-11)); + --db-pink-on-bg-pressed: light-dark(var(--db-pink-5), var(--db-pink-10)); + --db-pink-on-bg-weak-enabled: light-dark( + var(--db-pink-5), + var(--db-pink-10) + ); + --db-pink-on-bg-weak-hover: light-dark(var(--db-pink-6), var(--db-pink-9)); + --db-pink-on-bg-weak-pressed: light-dark( + var(--db-pink-7), + var(--db-pink-8) + ); + --db-pink-on-contrast-enabled: light-dark( + var(--db-pink-14), + var(--db-pink-3) + ); + --db-pink-on-contrast-hover: light-dark( + var(--db-pink-13), + var(--db-pink-4) + ); + --db-pink-on-contrast-pressed: light-dark( + var(--db-pink-12), + var(--db-pink-5) + ); + --db-pink-contrast-high-enabled: light-dark( + var(--db-pink-6), var(--db-pink-9) ); - --db-pink-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 84%, - var(--db-pink-9) + --db-pink-contrast-high-hover: light-dark( + var(--db-pink-5), + var(--db-pink-8) ); - --db-pink-bg-transparent-hover: color-mix( - in srgb, - transparent 76%, - var(--db-pink-9) + --db-pink-contrast-high-pressed: light-dark( + var(--db-pink-4), + var(--db-pink-7) ); - --db-pink-bg-transparent-pressed: color-mix( - in srgb, - transparent 68%, - var(--db-pink-9) + --db-pink-contrast-low-enabled: light-dark( + var(--db-pink-7), + var(--db-pink-8) ); - --db-pink-on-bg-enabled: var(--db-pink-12); - --db-pink-on-bg-hover: var(--db-pink-11); - --db-pink-on-bg-pressed: var(--db-pink-10); - --db-pink-on-bg-weak-enabled: var(--db-pink-10); - --db-pink-on-bg-weak-hover: var(--db-pink-9); - --db-pink-on-bg-weak-pressed: var(--db-pink-8); - --db-pink-on-contrast-enabled: var(--db-pink-3); - --db-pink-on-contrast-hover: var(--db-pink-4); - --db-pink-on-contrast-pressed: var(--db-pink-5); - --db-pink-contrast-high-enabled: var(--db-pink-9); - --db-pink-contrast-high-hover: var(--db-pink-8); - --db-pink-contrast-high-pressed: var(--db-pink-7); - --db-pink-contrast-low-enabled: var(--db-pink-8); - --db-pink-contrast-low-hover: var(--db-pink-7); - --db-pink-contrast-low-pressed: var(--db-pink-6); - --db-pink-border: var(--db-pink-6); - --db-violet-on-enabled: var(--db-violet-on-dark); - --db-violet-on-hover: var(--db-violet-on-hover-dark); - --db-violet-on-pressed: var(--db-violet-on-pressed-dark); - --db-violet-origin-enabled: var(--db-violet-origin-dark); - --db-violet-origin-hover: var(--db-violet-hover-dark); - --db-violet-origin-pressed: var(--db-violet-pressed-dark); - --db-violet-bg-lvl-1-enabled: var(--db-violet-3); - --db-violet-bg-lvl-1-hover: var(--db-violet-4); - --db-violet-bg-lvl-1-pressed: var(--db-violet-5); - --db-violet-bg-lvl-2-enabled: var(--db-violet-2); - --db-violet-bg-lvl-2-hover: var(--db-violet-3); - --db-violet-bg-lvl-2-pressed: var(--db-violet-4); - --db-violet-bg-lvl-3-enabled: var(--db-violet-1); - --db-violet-bg-lvl-3-hover: var(--db-violet-2); - --db-violet-bg-lvl-3-pressed: var(--db-violet-3); - --db-violet-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-violet-9) + --db-pink-contrast-low-hover: light-dark( + var(--db-pink-6), + var(--db-pink-7) ); - --db-violet-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 84%, - var(--db-violet-9) + --db-pink-contrast-low-pressed: light-dark( + var(--db-pink-5), + var(--db-pink-6) + ); + --db-pink-border: light-dark(var(--db-pink-10), var(--db-pink-6)); + --db-violet-on-enabled: light-dark( + var(--db-violet-on-light), + var(--db-violet-on-dark) + ); + --db-violet-on-hover: light-dark( + var(--db-violet-on-hover-light), + var(--db-violet-on-hover-dark) + ); + --db-violet-on-pressed: light-dark( + var(--db-violet-on-pressed-light), + var(--db-violet-on-pressed-dark) + ); + --db-violet-origin-enabled: light-dark( + var(--db-violet-origin-light), + var(--db-violet-origin-dark) + ); + --db-violet-origin-hover: light-dark( + var(--db-violet-hover-light), + var(--db-violet-hover-dark) + ); + --db-violet-origin-pressed: light-dark( + var(--db-violet-pressed-light), + var(--db-violet-pressed-dark) + ); + --db-violet-bg-lvl-1-enabled: light-dark( + var(--db-violet-14), + var(--db-violet-3) + ); + --db-violet-bg-lvl-1-hover: light-dark( + var(--db-violet-13), + var(--db-violet-4) + ); + --db-violet-bg-lvl-1-pressed: light-dark( + var(--db-violet-12), + var(--db-violet-5) + ); + --db-violet-bg-lvl-2-enabled: light-dark( + var(--db-violet-13), + var(--db-violet-2) + ); + --db-violet-bg-lvl-2-hover: light-dark( + var(--db-violet-12), + var(--db-violet-3) + ); + --db-violet-bg-lvl-2-pressed: light-dark( + var(--db-violet-11), + var(--db-violet-4) + ); + --db-violet-bg-lvl-3-enabled: light-dark( + var(--db-violet-12), + var(--db-violet-1) + ); + --db-violet-bg-lvl-3-hover: light-dark( + var(--db-violet-11), + var(--db-violet-2) + ); + --db-violet-bg-lvl-3-pressed: light-dark( + var(--db-violet-10), + var(--db-violet-3) ); - --db-violet-bg-transparent-hover: color-mix( - in srgb, - transparent 76%, + --db-violet-bg-transparent-full-enabled: light-dark( + color-mix(in srgb, transparent 100%, var(--db-violet-6)), + color-mix(in srgb, transparent 100%, var(--db-violet-9)) + ); + --db-violet-bg-transparent-semi-enabled: light-dark( + color-mix(in srgb, transparent 92%, var(--db-violet-6)), + color-mix(in srgb, transparent 84%, var(--db-violet-9)) + ); + --db-violet-bg-transparent-hover: light-dark( + color-mix(in srgb, transparent 84%, var(--db-violet-6)), + color-mix(in srgb, transparent 76%, var(--db-violet-9)) + ); + --db-violet-bg-transparent-pressed: light-dark( + color-mix(in srgb, transparent 76%, var(--db-violet-6)), + color-mix(in srgb, transparent 68%, var(--db-violet-9)) + ); + --db-violet-on-bg-enabled: light-dark( + var(--db-violet-3), + var(--db-violet-12) + ); + --db-violet-on-bg-hover: light-dark( + var(--db-violet-4), + var(--db-violet-11) + ); + --db-violet-on-bg-pressed: light-dark( + var(--db-violet-5), + var(--db-violet-10) + ); + --db-violet-on-bg-weak-enabled: light-dark( + var(--db-violet-5), + var(--db-violet-10) + ); + --db-violet-on-bg-weak-hover: light-dark( + var(--db-violet-6), var(--db-violet-9) ); - --db-violet-bg-transparent-pressed: color-mix( - in srgb, - transparent 68%, + --db-violet-on-bg-weak-pressed: light-dark( + var(--db-violet-7), + var(--db-violet-8) + ); + --db-violet-on-contrast-enabled: light-dark( + var(--db-violet-14), + var(--db-violet-3) + ); + --db-violet-on-contrast-hover: light-dark( + var(--db-violet-13), + var(--db-violet-4) + ); + --db-violet-on-contrast-pressed: light-dark( + var(--db-violet-12), + var(--db-violet-5) + ); + --db-violet-contrast-high-enabled: light-dark( + var(--db-violet-6), var(--db-violet-9) ); - --db-violet-on-bg-enabled: var(--db-violet-12); - --db-violet-on-bg-hover: var(--db-violet-11); - --db-violet-on-bg-pressed: var(--db-violet-10); - --db-violet-on-bg-weak-enabled: var(--db-violet-10); - --db-violet-on-bg-weak-hover: var(--db-violet-9); - --db-violet-on-bg-weak-pressed: var(--db-violet-8); - --db-violet-on-contrast-enabled: var(--db-violet-3); - --db-violet-on-contrast-hover: var(--db-violet-4); - --db-violet-on-contrast-pressed: var(--db-violet-5); - --db-violet-contrast-high-enabled: var(--db-violet-9); - --db-violet-contrast-high-hover: var(--db-violet-8); - --db-violet-contrast-high-pressed: var(--db-violet-7); - --db-violet-contrast-low-enabled: var(--db-violet-8); - --db-violet-contrast-low-hover: var(--db-violet-7); - --db-violet-contrast-low-pressed: var(--db-violet-6); - --db-violet-border: var(--db-violet-6); - --db-blue-on-enabled: var(--db-blue-on-dark); - --db-blue-on-hover: var(--db-blue-on-hover-dark); - --db-blue-on-pressed: var(--db-blue-on-pressed-dark); - --db-blue-origin-enabled: var(--db-blue-origin-dark); - --db-blue-origin-hover: var(--db-blue-hover-dark); - --db-blue-origin-pressed: var(--db-blue-pressed-dark); - --db-blue-bg-lvl-1-enabled: var(--db-blue-3); - --db-blue-bg-lvl-1-hover: var(--db-blue-4); - --db-blue-bg-lvl-1-pressed: var(--db-blue-5); - --db-blue-bg-lvl-2-enabled: var(--db-blue-2); - --db-blue-bg-lvl-2-hover: var(--db-blue-3); - --db-blue-bg-lvl-2-pressed: var(--db-blue-4); - --db-blue-bg-lvl-3-enabled: var(--db-blue-1); - --db-blue-bg-lvl-3-hover: var(--db-blue-2); - --db-blue-bg-lvl-3-pressed: var(--db-blue-3); - --db-blue-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-blue-9) + --db-violet-contrast-high-hover: light-dark( + var(--db-violet-5), + var(--db-violet-8) ); - --db-blue-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 84%, - var(--db-blue-9) + --db-violet-contrast-high-pressed: light-dark( + var(--db-violet-4), + var(--db-violet-7) ); - --db-blue-bg-transparent-hover: color-mix( - in srgb, - transparent 76%, - var(--db-blue-9) + --db-violet-contrast-low-enabled: light-dark( + var(--db-violet-7), + var(--db-violet-8) + ); + --db-violet-contrast-low-hover: light-dark( + var(--db-violet-6), + var(--db-violet-7) + ); + --db-violet-contrast-low-pressed: light-dark( + var(--db-violet-5), + var(--db-violet-6) ); - --db-blue-bg-transparent-pressed: color-mix( - in srgb, - transparent 68%, + --db-violet-border: light-dark(var(--db-violet-10), var(--db-violet-6)); + --db-blue-on-enabled: light-dark( + var(--db-blue-on-light), + var(--db-blue-on-dark) + ); + --db-blue-on-hover: light-dark( + var(--db-blue-on-hover-light), + var(--db-blue-on-hover-dark) + ); + --db-blue-on-pressed: light-dark( + var(--db-blue-on-pressed-light), + var(--db-blue-on-pressed-dark) + ); + --db-blue-origin-enabled: light-dark( + var(--db-blue-origin-light), + var(--db-blue-origin-dark) + ); + --db-blue-origin-hover: light-dark( + var(--db-blue-hover-light), + var(--db-blue-hover-dark) + ); + --db-blue-origin-pressed: light-dark( + var(--db-blue-pressed-light), + var(--db-blue-pressed-dark) + ); + --db-blue-bg-lvl-1-enabled: light-dark(var(--db-blue-14), var(--db-blue-3)); + --db-blue-bg-lvl-1-hover: light-dark(var(--db-blue-13), var(--db-blue-4)); + --db-blue-bg-lvl-1-pressed: light-dark(var(--db-blue-12), var(--db-blue-5)); + --db-blue-bg-lvl-2-enabled: light-dark(var(--db-blue-13), var(--db-blue-2)); + --db-blue-bg-lvl-2-hover: light-dark(var(--db-blue-12), var(--db-blue-3)); + --db-blue-bg-lvl-2-pressed: light-dark(var(--db-blue-11), var(--db-blue-4)); + --db-blue-bg-lvl-3-enabled: light-dark(var(--db-blue-12), var(--db-blue-1)); + --db-blue-bg-lvl-3-hover: light-dark(var(--db-blue-11), var(--db-blue-2)); + --db-blue-bg-lvl-3-pressed: light-dark(var(--db-blue-10), var(--db-blue-3)); + --db-blue-bg-transparent-full-enabled: light-dark( + color-mix(in srgb, transparent 100%, var(--db-blue-6)), + color-mix(in srgb, transparent 100%, var(--db-blue-9)) + ); + --db-blue-bg-transparent-semi-enabled: light-dark( + color-mix(in srgb, transparent 92%, var(--db-blue-6)), + color-mix(in srgb, transparent 84%, var(--db-blue-9)) + ); + --db-blue-bg-transparent-hover: light-dark( + color-mix(in srgb, transparent 84%, var(--db-blue-6)), + color-mix(in srgb, transparent 76%, var(--db-blue-9)) + ); + --db-blue-bg-transparent-pressed: light-dark( + color-mix(in srgb, transparent 76%, var(--db-blue-6)), + color-mix(in srgb, transparent 68%, var(--db-blue-9)) + ); + --db-blue-on-bg-enabled: light-dark(var(--db-blue-3), var(--db-blue-12)); + --db-blue-on-bg-hover: light-dark(var(--db-blue-4), var(--db-blue-11)); + --db-blue-on-bg-pressed: light-dark(var(--db-blue-5), var(--db-blue-10)); + --db-blue-on-bg-weak-enabled: light-dark( + var(--db-blue-5), + var(--db-blue-10) + ); + --db-blue-on-bg-weak-hover: light-dark(var(--db-blue-6), var(--db-blue-9)); + --db-blue-on-bg-weak-pressed: light-dark( + var(--db-blue-7), + var(--db-blue-8) + ); + --db-blue-on-contrast-enabled: light-dark( + var(--db-blue-14), + var(--db-blue-3) + ); + --db-blue-on-contrast-hover: light-dark( + var(--db-blue-13), + var(--db-blue-4) + ); + --db-blue-on-contrast-pressed: light-dark( + var(--db-blue-12), + var(--db-blue-5) + ); + --db-blue-contrast-high-enabled: light-dark( + var(--db-blue-6), var(--db-blue-9) ); - --db-blue-on-bg-enabled: var(--db-blue-12); - --db-blue-on-bg-hover: var(--db-blue-11); - --db-blue-on-bg-pressed: var(--db-blue-10); - --db-blue-on-bg-weak-enabled: var(--db-blue-10); - --db-blue-on-bg-weak-hover: var(--db-blue-9); - --db-blue-on-bg-weak-pressed: var(--db-blue-8); - --db-blue-on-contrast-enabled: var(--db-blue-3); - --db-blue-on-contrast-hover: var(--db-blue-4); - --db-blue-on-contrast-pressed: var(--db-blue-5); - --db-blue-contrast-high-enabled: var(--db-blue-9); - --db-blue-contrast-high-hover: var(--db-blue-8); - --db-blue-contrast-high-pressed: var(--db-blue-7); - --db-blue-contrast-low-enabled: var(--db-blue-8); - --db-blue-contrast-low-hover: var(--db-blue-7); - --db-blue-contrast-low-pressed: var(--db-blue-6); - --db-blue-border: var(--db-blue-6); - --db-cyan-on-enabled: var(--db-cyan-on-dark); - --db-cyan-on-hover: var(--db-cyan-on-hover-dark); - --db-cyan-on-pressed: var(--db-cyan-on-pressed-dark); - --db-cyan-origin-enabled: var(--db-cyan-origin-dark); - --db-cyan-origin-hover: var(--db-cyan-hover-dark); - --db-cyan-origin-pressed: var(--db-cyan-pressed-dark); - --db-cyan-bg-lvl-1-enabled: var(--db-cyan-3); - --db-cyan-bg-lvl-1-hover: var(--db-cyan-4); - --db-cyan-bg-lvl-1-pressed: var(--db-cyan-5); - --db-cyan-bg-lvl-2-enabled: var(--db-cyan-2); - --db-cyan-bg-lvl-2-hover: var(--db-cyan-3); - --db-cyan-bg-lvl-2-pressed: var(--db-cyan-4); - --db-cyan-bg-lvl-3-enabled: var(--db-cyan-1); - --db-cyan-bg-lvl-3-hover: var(--db-cyan-2); - --db-cyan-bg-lvl-3-pressed: var(--db-cyan-3); - --db-cyan-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-cyan-9) + --db-blue-contrast-high-hover: light-dark( + var(--db-blue-5), + var(--db-blue-8) ); - --db-cyan-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 84%, - var(--db-cyan-9) + --db-blue-contrast-high-pressed: light-dark( + var(--db-blue-4), + var(--db-blue-7) ); - --db-cyan-bg-transparent-hover: color-mix( - in srgb, - transparent 76%, - var(--db-cyan-9) + --db-blue-contrast-low-enabled: light-dark( + var(--db-blue-7), + var(--db-blue-8) + ); + --db-blue-contrast-low-hover: light-dark( + var(--db-blue-6), + var(--db-blue-7) + ); + --db-blue-contrast-low-pressed: light-dark( + var(--db-blue-5), + var(--db-blue-6) ); - --db-cyan-bg-transparent-pressed: color-mix( - in srgb, - transparent 68%, + --db-blue-border: light-dark(var(--db-blue-10), var(--db-blue-6)); + --db-cyan-on-enabled: light-dark( + var(--db-cyan-on-light), + var(--db-cyan-on-dark) + ); + --db-cyan-on-hover: light-dark( + var(--db-cyan-on-hover-light), + var(--db-cyan-on-hover-dark) + ); + --db-cyan-on-pressed: light-dark( + var(--db-cyan-on-pressed-light), + var(--db-cyan-on-pressed-dark) + ); + --db-cyan-origin-enabled: light-dark( + var(--db-cyan-origin-light), + var(--db-cyan-origin-dark) + ); + --db-cyan-origin-hover: light-dark( + var(--db-cyan-hover-light), + var(--db-cyan-hover-dark) + ); + --db-cyan-origin-pressed: light-dark( + var(--db-cyan-pressed-light), + var(--db-cyan-pressed-dark) + ); + --db-cyan-bg-lvl-1-enabled: light-dark(var(--db-cyan-14), var(--db-cyan-3)); + --db-cyan-bg-lvl-1-hover: light-dark(var(--db-cyan-13), var(--db-cyan-4)); + --db-cyan-bg-lvl-1-pressed: light-dark(var(--db-cyan-12), var(--db-cyan-5)); + --db-cyan-bg-lvl-2-enabled: light-dark(var(--db-cyan-13), var(--db-cyan-2)); + --db-cyan-bg-lvl-2-hover: light-dark(var(--db-cyan-12), var(--db-cyan-3)); + --db-cyan-bg-lvl-2-pressed: light-dark(var(--db-cyan-11), var(--db-cyan-4)); + --db-cyan-bg-lvl-3-enabled: light-dark(var(--db-cyan-12), var(--db-cyan-1)); + --db-cyan-bg-lvl-3-hover: light-dark(var(--db-cyan-11), var(--db-cyan-2)); + --db-cyan-bg-lvl-3-pressed: light-dark(var(--db-cyan-10), var(--db-cyan-3)); + --db-cyan-bg-transparent-full-enabled: light-dark( + color-mix(in srgb, transparent 100%, var(--db-cyan-6)), + color-mix(in srgb, transparent 100%, var(--db-cyan-9)) + ); + --db-cyan-bg-transparent-semi-enabled: light-dark( + color-mix(in srgb, transparent 92%, var(--db-cyan-6)), + color-mix(in srgb, transparent 84%, var(--db-cyan-9)) + ); + --db-cyan-bg-transparent-hover: light-dark( + color-mix(in srgb, transparent 84%, var(--db-cyan-6)), + color-mix(in srgb, transparent 76%, var(--db-cyan-9)) + ); + --db-cyan-bg-transparent-pressed: light-dark( + color-mix(in srgb, transparent 76%, var(--db-cyan-6)), + color-mix(in srgb, transparent 68%, var(--db-cyan-9)) + ); + --db-cyan-on-bg-enabled: light-dark(var(--db-cyan-3), var(--db-cyan-12)); + --db-cyan-on-bg-hover: light-dark(var(--db-cyan-4), var(--db-cyan-11)); + --db-cyan-on-bg-pressed: light-dark(var(--db-cyan-5), var(--db-cyan-10)); + --db-cyan-on-bg-weak-enabled: light-dark( + var(--db-cyan-5), + var(--db-cyan-10) + ); + --db-cyan-on-bg-weak-hover: light-dark(var(--db-cyan-6), var(--db-cyan-9)); + --db-cyan-on-bg-weak-pressed: light-dark( + var(--db-cyan-7), + var(--db-cyan-8) + ); + --db-cyan-on-contrast-enabled: light-dark( + var(--db-cyan-14), + var(--db-cyan-3) + ); + --db-cyan-on-contrast-hover: light-dark( + var(--db-cyan-13), + var(--db-cyan-4) + ); + --db-cyan-on-contrast-pressed: light-dark( + var(--db-cyan-12), + var(--db-cyan-5) + ); + --db-cyan-contrast-high-enabled: light-dark( + var(--db-cyan-6), var(--db-cyan-9) ); - --db-cyan-on-bg-enabled: var(--db-cyan-12); - --db-cyan-on-bg-hover: var(--db-cyan-11); - --db-cyan-on-bg-pressed: var(--db-cyan-10); - --db-cyan-on-bg-weak-enabled: var(--db-cyan-10); - --db-cyan-on-bg-weak-hover: var(--db-cyan-9); - --db-cyan-on-bg-weak-pressed: var(--db-cyan-8); - --db-cyan-on-contrast-enabled: var(--db-cyan-3); - --db-cyan-on-contrast-hover: var(--db-cyan-4); - --db-cyan-on-contrast-pressed: var(--db-cyan-5); - --db-cyan-contrast-high-enabled: var(--db-cyan-9); - --db-cyan-contrast-high-hover: var(--db-cyan-8); - --db-cyan-contrast-high-pressed: var(--db-cyan-7); - --db-cyan-contrast-low-enabled: var(--db-cyan-8); - --db-cyan-contrast-low-hover: var(--db-cyan-7); - --db-cyan-contrast-low-pressed: var(--db-cyan-6); - --db-cyan-border: var(--db-cyan-6); - --db-turquoise-on-enabled: var(--db-turquoise-on-dark); - --db-turquoise-on-hover: var(--db-turquoise-on-hover-dark); - --db-turquoise-on-pressed: var(--db-turquoise-on-pressed-dark); - --db-turquoise-origin-enabled: var(--db-turquoise-origin-dark); - --db-turquoise-origin-hover: var(--db-turquoise-hover-dark); - --db-turquoise-origin-pressed: var(--db-turquoise-pressed-dark); - --db-turquoise-bg-lvl-1-enabled: var(--db-turquoise-3); - --db-turquoise-bg-lvl-1-hover: var(--db-turquoise-4); - --db-turquoise-bg-lvl-1-pressed: var(--db-turquoise-5); - --db-turquoise-bg-lvl-2-enabled: var(--db-turquoise-2); - --db-turquoise-bg-lvl-2-hover: var(--db-turquoise-3); - --db-turquoise-bg-lvl-2-pressed: var(--db-turquoise-4); - --db-turquoise-bg-lvl-3-enabled: var(--db-turquoise-1); - --db-turquoise-bg-lvl-3-hover: var(--db-turquoise-2); - --db-turquoise-bg-lvl-3-pressed: var(--db-turquoise-3); - --db-turquoise-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-turquoise-9) + --db-cyan-contrast-high-hover: light-dark( + var(--db-cyan-5), + var(--db-cyan-8) ); - --db-turquoise-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 84%, - var(--db-turquoise-9) + --db-cyan-contrast-high-pressed: light-dark( + var(--db-cyan-4), + var(--db-cyan-7) + ); + --db-cyan-contrast-low-enabled: light-dark( + var(--db-cyan-7), + var(--db-cyan-8) + ); + --db-cyan-contrast-low-hover: light-dark( + var(--db-cyan-6), + var(--db-cyan-7) + ); + --db-cyan-contrast-low-pressed: light-dark( + var(--db-cyan-5), + var(--db-cyan-6) + ); + --db-cyan-border: light-dark(var(--db-cyan-10), var(--db-cyan-6)); + --db-turquoise-on-enabled: light-dark( + var(--db-turquoise-on-light), + var(--db-turquoise-on-dark) + ); + --db-turquoise-on-hover: light-dark( + var(--db-turquoise-on-hover-light), + var(--db-turquoise-on-hover-dark) + ); + --db-turquoise-on-pressed: light-dark( + var(--db-turquoise-on-pressed-light), + var(--db-turquoise-on-pressed-dark) + ); + --db-turquoise-origin-enabled: light-dark( + var(--db-turquoise-origin-light), + var(--db-turquoise-origin-dark) + ); + --db-turquoise-origin-hover: light-dark( + var(--db-turquoise-hover-light), + var(--db-turquoise-hover-dark) + ); + --db-turquoise-origin-pressed: light-dark( + var(--db-turquoise-pressed-light), + var(--db-turquoise-pressed-dark) + ); + --db-turquoise-bg-lvl-1-enabled: light-dark( + var(--db-turquoise-14), + var(--db-turquoise-3) + ); + --db-turquoise-bg-lvl-1-hover: light-dark( + var(--db-turquoise-13), + var(--db-turquoise-4) + ); + --db-turquoise-bg-lvl-1-pressed: light-dark( + var(--db-turquoise-12), + var(--db-turquoise-5) + ); + --db-turquoise-bg-lvl-2-enabled: light-dark( + var(--db-turquoise-13), + var(--db-turquoise-2) + ); + --db-turquoise-bg-lvl-2-hover: light-dark( + var(--db-turquoise-12), + var(--db-turquoise-3) + ); + --db-turquoise-bg-lvl-2-pressed: light-dark( + var(--db-turquoise-11), + var(--db-turquoise-4) + ); + --db-turquoise-bg-lvl-3-enabled: light-dark( + var(--db-turquoise-12), + var(--db-turquoise-1) + ); + --db-turquoise-bg-lvl-3-hover: light-dark( + var(--db-turquoise-11), + var(--db-turquoise-2) + ); + --db-turquoise-bg-lvl-3-pressed: light-dark( + var(--db-turquoise-10), + var(--db-turquoise-3) + ); + --db-turquoise-bg-transparent-full-enabled: light-dark( + color-mix(in srgb, transparent 100%, var(--db-turquoise-6)), + color-mix(in srgb, transparent 100%, var(--db-turquoise-9)) + ); + --db-turquoise-bg-transparent-semi-enabled: light-dark( + color-mix(in srgb, transparent 92%, var(--db-turquoise-6)), + color-mix(in srgb, transparent 84%, var(--db-turquoise-9)) + ); + --db-turquoise-bg-transparent-hover: light-dark( + color-mix(in srgb, transparent 84%, var(--db-turquoise-6)), + color-mix(in srgb, transparent 76%, var(--db-turquoise-9)) ); - --db-turquoise-bg-transparent-hover: color-mix( - in srgb, - transparent 76%, + --db-turquoise-bg-transparent-pressed: light-dark( + color-mix(in srgb, transparent 76%, var(--db-turquoise-6)), + color-mix(in srgb, transparent 68%, var(--db-turquoise-9)) + ); + --db-turquoise-on-bg-enabled: light-dark( + var(--db-turquoise-3), + var(--db-turquoise-12) + ); + --db-turquoise-on-bg-hover: light-dark( + var(--db-turquoise-4), + var(--db-turquoise-11) + ); + --db-turquoise-on-bg-pressed: light-dark( + var(--db-turquoise-5), + var(--db-turquoise-10) + ); + --db-turquoise-on-bg-weak-enabled: light-dark( + var(--db-turquoise-5), + var(--db-turquoise-10) + ); + --db-turquoise-on-bg-weak-hover: light-dark( + var(--db-turquoise-6), var(--db-turquoise-9) ); - --db-turquoise-bg-transparent-pressed: color-mix( - in srgb, - transparent 68%, + --db-turquoise-on-bg-weak-pressed: light-dark( + var(--db-turquoise-7), + var(--db-turquoise-8) + ); + --db-turquoise-on-contrast-enabled: light-dark( + var(--db-turquoise-14), + var(--db-turquoise-3) + ); + --db-turquoise-on-contrast-hover: light-dark( + var(--db-turquoise-13), + var(--db-turquoise-4) + ); + --db-turquoise-on-contrast-pressed: light-dark( + var(--db-turquoise-12), + var(--db-turquoise-5) + ); + --db-turquoise-contrast-high-enabled: light-dark( + var(--db-turquoise-6), var(--db-turquoise-9) ); - --db-turquoise-on-bg-enabled: var(--db-turquoise-12); - --db-turquoise-on-bg-hover: var(--db-turquoise-11); - --db-turquoise-on-bg-pressed: var(--db-turquoise-10); - --db-turquoise-on-bg-weak-enabled: var(--db-turquoise-10); - --db-turquoise-on-bg-weak-hover: var(--db-turquoise-9); - --db-turquoise-on-bg-weak-pressed: var(--db-turquoise-8); - --db-turquoise-on-contrast-enabled: var(--db-turquoise-3); - --db-turquoise-on-contrast-hover: var(--db-turquoise-4); - --db-turquoise-on-contrast-pressed: var(--db-turquoise-5); - --db-turquoise-contrast-high-enabled: var(--db-turquoise-9); - --db-turquoise-contrast-high-hover: var(--db-turquoise-8); - --db-turquoise-contrast-high-pressed: var(--db-turquoise-7); - --db-turquoise-contrast-low-enabled: var(--db-turquoise-8); - --db-turquoise-contrast-low-hover: var(--db-turquoise-7); - --db-turquoise-contrast-low-pressed: var(--db-turquoise-6); - --db-turquoise-border: var(--db-turquoise-6); - --db-green-on-enabled: var(--db-green-on-dark); - --db-green-on-hover: var(--db-green-on-hover-dark); - --db-green-on-pressed: var(--db-green-on-pressed-dark); - --db-green-origin-enabled: var(--db-green-origin-dark); - --db-green-origin-hover: var(--db-green-hover-dark); - --db-green-origin-pressed: var(--db-green-pressed-dark); - --db-green-bg-lvl-1-enabled: var(--db-green-3); - --db-green-bg-lvl-1-hover: var(--db-green-4); - --db-green-bg-lvl-1-pressed: var(--db-green-5); - --db-green-bg-lvl-2-enabled: var(--db-green-2); - --db-green-bg-lvl-2-hover: var(--db-green-3); - --db-green-bg-lvl-2-pressed: var(--db-green-4); - --db-green-bg-lvl-3-enabled: var(--db-green-1); - --db-green-bg-lvl-3-hover: var(--db-green-2); - --db-green-bg-lvl-3-pressed: var(--db-green-3); - --db-green-bg-transparent-full-enabled: color-mix( - in srgb, - transparent 100%, - var(--db-green-9) + --db-turquoise-contrast-high-hover: light-dark( + var(--db-turquoise-5), + var(--db-turquoise-8) ); - --db-green-bg-transparent-semi-enabled: color-mix( - in srgb, - transparent 84%, - var(--db-green-9) + --db-turquoise-contrast-high-pressed: light-dark( + var(--db-turquoise-4), + var(--db-turquoise-7) + ); + --db-turquoise-contrast-low-enabled: light-dark( + var(--db-turquoise-7), + var(--db-turquoise-8) + ); + --db-turquoise-contrast-low-hover: light-dark( + var(--db-turquoise-6), + var(--db-turquoise-7) + ); + --db-turquoise-contrast-low-pressed: light-dark( + var(--db-turquoise-5), + var(--db-turquoise-6) + ); + --db-turquoise-border: light-dark( + var(--db-turquoise-10), + var(--db-turquoise-6) + ); + --db-green-on-enabled: light-dark( + var(--db-green-on-light), + var(--db-green-on-dark) + ); + --db-green-on-hover: light-dark( + var(--db-green-on-hover-light), + var(--db-green-on-hover-dark) + ); + --db-green-on-pressed: light-dark( + var(--db-green-on-pressed-light), + var(--db-green-on-pressed-dark) + ); + --db-green-origin-enabled: light-dark( + var(--db-green-origin-light), + var(--db-green-origin-dark) + ); + --db-green-origin-hover: light-dark( + var(--db-green-hover-light), + var(--db-green-hover-dark) + ); + --db-green-origin-pressed: light-dark( + var(--db-green-pressed-light), + var(--db-green-pressed-dark) + ); + --db-green-bg-lvl-1-enabled: light-dark( + var(--db-green-14), + var(--db-green-3) ); - --db-green-bg-transparent-hover: color-mix( - in srgb, - transparent 76%, + --db-green-bg-lvl-1-hover: light-dark( + var(--db-green-13), + var(--db-green-4) + ); + --db-green-bg-lvl-1-pressed: light-dark( + var(--db-green-12), + var(--db-green-5) + ); + --db-green-bg-lvl-2-enabled: light-dark( + var(--db-green-13), + var(--db-green-2) + ); + --db-green-bg-lvl-2-hover: light-dark( + var(--db-green-12), + var(--db-green-3) + ); + --db-green-bg-lvl-2-pressed: light-dark( + var(--db-green-11), + var(--db-green-4) + ); + --db-green-bg-lvl-3-enabled: light-dark( + var(--db-green-12), + var(--db-green-1) + ); + --db-green-bg-lvl-3-hover: light-dark( + var(--db-green-11), + var(--db-green-2) + ); + --db-green-bg-lvl-3-pressed: light-dark( + var(--db-green-10), + var(--db-green-3) + ); + --db-green-bg-transparent-full-enabled: light-dark( + color-mix(in srgb, transparent 100%, var(--db-green-6)), + color-mix(in srgb, transparent 100%, var(--db-green-9)) + ); + --db-green-bg-transparent-semi-enabled: light-dark( + color-mix(in srgb, transparent 92%, var(--db-green-6)), + color-mix(in srgb, transparent 84%, var(--db-green-9)) + ); + --db-green-bg-transparent-hover: light-dark( + color-mix(in srgb, transparent 84%, var(--db-green-6)), + color-mix(in srgb, transparent 76%, var(--db-green-9)) + ); + --db-green-bg-transparent-pressed: light-dark( + color-mix(in srgb, transparent 76%, var(--db-green-6)), + color-mix(in srgb, transparent 68%, var(--db-green-9)) + ); + --db-green-on-bg-enabled: light-dark(var(--db-green-3), var(--db-green-12)); + --db-green-on-bg-hover: light-dark(var(--db-green-4), var(--db-green-11)); + --db-green-on-bg-pressed: light-dark(var(--db-green-5), var(--db-green-10)); + --db-green-on-bg-weak-enabled: light-dark( + var(--db-green-5), + var(--db-green-10) + ); + --db-green-on-bg-weak-hover: light-dark( + var(--db-green-6), var(--db-green-9) ); - --db-green-bg-transparent-pressed: color-mix( - in srgb, - transparent 68%, + --db-green-on-bg-weak-pressed: light-dark( + var(--db-green-7), + var(--db-green-8) + ); + --db-green-on-contrast-enabled: light-dark( + var(--db-green-14), + var(--db-green-3) + ); + --db-green-on-contrast-hover: light-dark( + var(--db-green-13), + var(--db-green-4) + ); + --db-green-on-contrast-pressed: light-dark( + var(--db-green-12), + var(--db-green-5) + ); + --db-green-contrast-high-enabled: light-dark( + var(--db-green-6), var(--db-green-9) ); - --db-green-on-bg-enabled: var(--db-green-12); - --db-green-on-bg-hover: var(--db-green-11); - --db-green-on-bg-pressed: var(--db-green-10); - --db-green-on-bg-weak-enabled: var(--db-green-10); - --db-green-on-bg-weak-hover: var(--db-green-9); - --db-green-on-bg-weak-pressed: var(--db-green-8); - --db-green-on-contrast-enabled: var(--db-green-3); - --db-green-on-contrast-hover: var(--db-green-4); - --db-green-on-contrast-pressed: var(--db-green-5); - --db-green-contrast-high-enabled: var(--db-green-9); - --db-green-contrast-high-hover: var(--db-green-8); - --db-green-contrast-high-pressed: var(--db-green-7); - --db-green-contrast-low-enabled: var(--db-green-8); - --db-green-contrast-low-hover: var(--db-green-7); - --db-green-contrast-low-pressed: var(--db-green-6); - --db-green-border: var(--db-green-6); + --db-green-contrast-high-hover: light-dark( + var(--db-green-5), + var(--db-green-8) + ); + --db-green-contrast-high-pressed: light-dark( + var(--db-green-4), + var(--db-green-7) + ); + --db-green-contrast-low-enabled: light-dark( + var(--db-green-7), + var(--db-green-8) + ); + --db-green-contrast-low-hover: light-dark( + var(--db-green-6), + var(--db-green-7) + ); + --db-green-contrast-low-pressed: light-dark( + var(--db-green-5), + var(--db-green-6) + ); + --db-green-border: light-dark(var(--db-green-10), var(--db-green-6)); } diff --git a/packages/foundations/scss/default-theme.scss b/packages/foundations/scss/default-theme.scss index a4ed5c5ea12..7c7077a09ad 100644 --- a/packages/foundations/scss/default-theme.scss +++ b/packages/foundations/scss/default-theme.scss @@ -833,23 +833,28 @@ /* COLORS */ @include default-palette.get-color-palette; @include default-palette.get-additional-color-palette; + @include default-color-scheme.get-color-scheme; @include default-color-scheme.get-color-scheme-light; - @include default-color-scheme.get-additional-color-scheme-light; + @include default-color-scheme.get-additional-color-scheme; @media (prefers-color-scheme: dark) { @include default-color-scheme.get-color-scheme-dark; - @include default-color-scheme.get-additional-color-scheme-dark; } } -[data-color-scheme="light"] { +// We'll set the color scheme (https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) to light and dark if it's not already set as a meta tag in the head, which would be the recommended way. +html:not(:has(> head > meta[name="color-scheme"])) { + color-scheme: light dark; +} + +[data-color-scheme] { @extend %db-neutral-bg-lvl-1; - @include default-color-scheme.get-color-scheme-light; - @include default-color-scheme.get-additional-color-scheme-light; +} + +[data-color-scheme="light"] { + color-scheme: light; } [data-color-scheme="dark"] { - @extend %db-neutral-bg-lvl-1; - @include default-color-scheme.get-color-scheme-dark; - @include default-color-scheme.get-additional-color-scheme-dark; + color-scheme: dark; } diff --git a/packages/foundations/scss/init/default-fonts.scss b/packages/foundations/scss/init/default-fonts.scss index e77a3187a6b..e70c920700a 100644 --- a/packages/foundations/scss/init/default-fonts.scss +++ b/packages/foundations/scss/init/default-fonts.scss @@ -17,12 +17,7 @@ $headlines: ( "h6": "2xs" ); -h1, -h2, -h3, -h4, -h5, -h6 { +:is(h1, h2, h3, h4, h5, h6) { font-family: var(--db-font-family-head); font-weight: 700;