From db2db623e2a849ee15eccc6b921d51280ad80cad Mon Sep 17 00:00:00 2001 From: madrilene Date: Fri, 8 Mar 2024 11:07:11 +0100 Subject: [PATCH] fallbacks for unsupported browsers, make work for iOS --- src/assets/css/global/variables.css | 129 +++++++++++++++++++--------- 1 file changed, 88 insertions(+), 41 deletions(-) diff --git a/src/assets/css/global/variables.css b/src/assets/css/global/variables.css index 2ffde0a..8192a22 100644 --- a/src/assets/css/global/variables.css +++ b/src/assets/css/global/variables.css @@ -1,6 +1,11 @@ -/* Global variables */ +/* Global variables. */ +/* This turned out a little too complex, and probably is overly specific. I'm still fiddling with this. Should work by itself though, once you define your design token colors. +/* Feel free to delete the modern CSS enhancements starting on line 74. Adjust fallbacks if modern color syntax not supported for text and bg variants. */ +/* Basic variable definitions for color schemes */ :root { + color-scheme: light dark; + --gutter: var(--space-m-l); --border-radius: 0.3rem; --transition-duration: 250ms; @@ -32,29 +37,89 @@ ); } +/* Default / Light theme specific variables */ :root, :root[data-theme='light'] { - color-scheme: light dark; --color-text: var(--color-base-dark); --color-bg: var(--color-base-light); - --color-base: var(--color-base-highlight); + --color-base: var(--color-base-dark); --color-primary: var(--color-primary-highlight); --color-secondary: var(--color-secondary-highlight); --color-tertiary: var(--color-tertiary-highlight); - - /* modify base colors with color-mix - https://caniuse.com/?search=color-mix */ - --color-text-accent: color-mix(in oklab, var(--color-base-dark) 80%, var(--color-bg)); - --color-bg-accent: color-mix(in oklab, var(--color-bg) 90%, var(--color-text)); - --color-bg-accent-2: color-mix(in oklab, var(--color-bg) 70%, var(--color-text)); + /* Fallbacks if modern color syntax not supported */ + --color-text-accent: #505050; + --color-bg-accent: #fdfdfd; + --color-bg-accent-2: #f7f7f7; } -/* Dark Color Scheme (System Preference) */ +/* Dark theme specific variables based on system preference */ @media (prefers-color-scheme: dark) { :root { --color-text: var(--color-base-light); --color-bg: var(--color-base-dark); + --color-base: var(--color-base-light); + --color-primary: var(--color-primary-highlight); + --color-secondary: var(--color-secondary-highlight); + --color-tertiary: var(--color-tertiary-highlight); + /* Fallbacks if modern color syntax not supported */ + --color-text-accent: #a8a8a8; + --color-bg-accent: #383838; + --color-bg-accent-2: #404040; + } +} - /* less "intensity" with color-mix */ +/* Dark theme specific variables based on manual override */ +:root[data-theme='dark'] { + --color-text: var(--color-base-light); + --color-bg: var(--color-base-dark); + --color-base: var(--color-base-light); + --color-primary: var(--color-primary-highlight); + --color-secondary: var(--color-secondary-highlight); + --color-tertiary: var(--color-tertiary-highlight); + /* Fallbacks if modern color syntax not supported */ + --color-text-accent: #a8a8a8; + --color-bg-accent: #383838; + --color-bg-accent-2: #404040; +} + +/* Enhancements for browsers that support color-mix */ +@supports (background: color-mix(in srgb, red 50%, blue)) { + :root, + :root[data-theme='light'] { + --color-text-accent: color-mix(in oklab, var(--color-base-dark) 80%, var(--color-bg)); + --color-bg-accent: color-mix(in oklab, var(--color-bg) 90%, var(--color-text)); + --color-bg-accent-2: color-mix(in oklab, var(--color-bg) 70%, var(--color-text)); + } + + @media (prefers-color-scheme: dark) { + :root { + --color-text-accent: color-mix( + in oklab, + var(--color-base-light) 70%, + var(--color-bg) + ); + --color-bg-accent: color-mix(in oklab, var(--color-bg) 92%, var(--color-text)); + --color-bg-accent-2: color-mix(in oklab, var(--color-bg) 80%, var(--color-text)); + /* add opacity with color-mix */ + --color-primary: color-mix( + in oklab, + var(--color-primary-highlight), + transparent 20% + ); + --color-secondary: color-mix( + in oklab, + var(--color-secondary-highlight), + transparent 20% + ); + --color-tertiary: color-mix( + in oklab, + var(--color-tertiary-highlight), + transparent 20% + ); + } + } + + :root[data-theme='dark'] { --color-text-accent: color-mix( in oklab, var(--color-base-light) 70%, @@ -62,7 +127,6 @@ ); --color-bg-accent: color-mix(in oklab, var(--color-bg) 92%, var(--color-text)); --color-bg-accent-2: color-mix(in oklab, var(--color-bg) 80%, var(--color-text)); - /* add opacity with color-mix */ --color-primary: color-mix(in oklab, var(--color-primary-highlight), transparent 20%); --color-secondary: color-mix( @@ -75,39 +139,22 @@ var(--color-tertiary-highlight), transparent 20% ); + } +} - /* desaturate with CSS Relative colors */ - @supports (color: hsl(from white h s l)) { - --color-primary: hsl(from var(--color-primary-highlight) h calc(s - 0.2) l); - --color-secondary: hsl(from var(--color-secondary-highlight) h calc(s - 0.2) l); - --color-tertiary: hsl(from var(--color-tertiary-highlight) h calc(s - 0.2) l); +/* Enhancements for browsers that support relative color values */ +@supports (color: color(display-p3 1 0 0)) { + @media (prefers-color-scheme: dark) { + :root { + --color-primary: hsl(from var(--color-primary-highlight) h calc(s / 1.2) l); + --color-secondary: hsl(from var(--color-secondary-highlight) h calc(s / 1.2) l); + --color-tertiary: hsl(from var(--color-tertiary-highlight) h calc(s / 1.2) l); } } -} -/* Dark Color Scheme (Override) */ -:root[data-theme='dark'] { - --color-text: var(--color-base-light); - --color-bg: var(--color-base-dark); - - /* less "intensity" with color-mix */ - --color-text-accent: color-mix(in oklab, var(--color-base-light) 70%, var(--color-bg)); - --color-bg-accent: color-mix(in oklab, var(--color-bg) 92%, var(--color-text)); - --color-bg-accent-2: color-mix(in oklab, var(--color-bg) 80%, var(--color-text)); - - /* add opacity with color-mix */ - --color-primary: color-mix(in oklab, var(--color-primary-highlight), transparent 20%); - --color-secondary: color-mix( - in oklab, - var(--color-secondary-highlight), - transparent 20% - ); - --color-tertiary: color-mix(in oklab, var(--color-tertiary-highlight), transparent 20%); - - /* desaturate with CSS Relative colors */ - @supports (color: hsl(from white h s l)) { - --color-primary: hsl(from var(--color-primary-highlight) h calc(s - 0.2) l); - --color-secondary: hsl(from var(--color-secondary-highlight) h calc(s - 0.2) l); - --color-tertiary: hsl(from var(--color-tertiary-highlight) h calc(s - 0.2) l); + :root[data-theme='dark'] { + --color-primary: hsl(from var(--color-primary-highlight) h calc(s / 1.2) l); + --color-secondary: hsl(from var(--color-secondary-highlight) h calc(s / 1.2) l); + --color-tertiary: hsl(from var(--color-tertiary-highlight) h calc(s / 1.2) l); } }