wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fallbacks for unsupported browsers, make work for iOS

Browse source
This commit is contained in:
madrilene 2024-03-08 11:07:11 +01:00
parent ef92f3fcb3
commit db2db623e2
1 changed files with 88 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
src/assets/css/global/variables.css
View file

@ -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);
}
}