From 30100b31e48f997a309556e804b20727a2e7cf22 Mon Sep 17 00:00:00 2001 From: jin Date: Sat, 4 Nov 2023 00:16:07 +0300 Subject: [PATCH] $mol_theme: use oklab --- theme/theme.css | 106 ++++++++++++++++++++++++++++-------------------- 1 file changed, 61 insertions(+), 45 deletions(-) diff --git a/theme/theme.css b/theme/theme.css index 23812511216..d64d11f526d 100644 --- a/theme/theme.css +++ b/theme/theme.css @@ -1,69 +1,85 @@ :root { - --mol_theme_hue: 210deg; - --mol_theme_luma: -1; - --mol_theme_satur: 1; - --mol_theme_image: none; + --mol_theme_hue: 240deg; } -[mol_theme] { +:where([mol_theme]) { color: var(--mol_theme_text); fill: var(--mol_theme_text); -} -:where([mol_theme]) { background-color: var(--mol_theme_back); } -:root, [mol_theme] { - --mol_theme_back: hsl( var(--mol_theme_hue), calc( var(--mol_theme_satur) * 20% ), calc( 55% + 45% * var(--mol_theme_luma) ) ); - --mol_theme_text: hsl( var(--mol_theme_hue), 0%, calc( 40% - 40% * var(--mol_theme_luma) ) ); - --mol_theme_field: hsl( var(--mol_theme_hue), calc( var(--mol_theme_satur) * 50% ), calc( 54% + 46% * var(--mol_theme_luma) ), .25 ); - - --mol_theme_card: hsl( var(--mol_theme_hue), calc( var(--mol_theme_satur) * 50% ), calc( 55% + 35% * var(--mol_theme_luma) ), .25 ); - --mol_theme_hover: hsl( var(--mol_theme_hue), 0%, 50%, .1 ); - --mol_theme_line: hsl( var(--mol_theme_hue), 0%, 50%, .2 ); - --mol_theme_shade: hsl( var(--mol_theme_hue), 0%, 50%, 1 ); +:root, [mol_theme="$mol_theme_dark"], :where([mol_theme="$mol_theme_dark"]) [mol_theme] { + + --mol_theme_image: invert(1) hue-rotate( 180deg ); + + --mol_theme_back: oklch( 20% .03 var(--mol_theme_hue) ); + --mol_theme_card: oklch( 30% .05 var(--mol_theme_hue) / .25 ); + --mol_theme_field: oklch( 0% 0 var(--mol_theme_hue) / .25 ); + --mol_theme_hover: oklch( 50% 0 var(--mol_theme_hue) / .1 ); - --mol_theme_control: hsl( var(--mol_theme_hue), 50%, calc( 50% - 10% * var(--mol_theme_luma) ) ); - --mol_theme_current: hsl( calc( var(--mol_theme_hue) - 90deg ), 50%, calc( 50% - 10% * var(--mol_theme_luma) ) ); - --mol_theme_special: hsl( calc( var(--mol_theme_hue) + 90deg ), 50%, calc( 50% - 10% * var(--mol_theme_luma) ) ); - --mol_theme_focus: hsl( calc( var(--mol_theme_hue) + 180deg ), 100%, calc( 55% - 10% * var(--mol_theme_luma) ) ); + --mol_theme_text: oklch( 80% 0 var(--mol_theme_hue) ); + --mol_theme_shade: oklch( 60% 0 var(--mol_theme_hue) ); + --mol_theme_line: oklch( 50% 0 var(--mol_theme_hue) / .2 ); + --mol_theme_focus: oklch( 75% .12 calc( var(--mol_theme_hue) + 120deg ) ); + --mol_theme_control: oklch( 70% .12 var(--mol_theme_hue) ); + --mol_theme_current: oklch( 70% .12 calc( var(--mol_theme_hue) - 60deg ) ); + --mol_theme_special: oklch( 70% .12 calc( var(--mol_theme_hue) + 60deg ) ); + } -[mol_theme="$mol_theme_light"] { - --mol_theme_luma: 1; +[mol_theme="$mol_theme_light"], :where([mol_theme="$mol_theme_light"]) [mol_theme] { + --mol_theme_image: none; -} + + --mol_theme_back: oklch( 98% .01 var(--mol_theme_hue) ); + --mol_theme_card: oklch( 90% .05 var(--mol_theme_hue) / .25 ); + --mol_theme_field: oklch( 100% 0 var(--mol_theme_hue) / .25 ); + --mol_theme_hover: oklch( 80% 0 var(--mol_theme_hue) / .1 ); + + --mol_theme_text: oklch( 20% 0 var(--mol_theme_hue) ); + --mol_theme_shade: oklch( 60% 0 var(--mol_theme_hue) ); + --mol_theme_line: oklch( 70% 0 var(--mol_theme_hue) / .2 ); + --mol_theme_focus: oklch( 40% .5 calc( var(--mol_theme_hue) + 120deg ) ); + + --mol_theme_control: oklch( 40% .2 var(--mol_theme_hue) ); + --mol_theme_current: oklch( 45% .3 calc( var(--mol_theme_hue) - 60deg ) ); + --mol_theme_special: oklch( 40% .3 calc( var(--mol_theme_hue) + 60deg ) ); -[mol_theme="$mol_theme_dark"] { - --mol_theme_luma: -1; - --mol_theme_image: invert(1) hue-rotate( 180deg ); } -[mol_theme="$mol_theme_base"] { - --mol_theme_luma: -2; - --mol_theme_back: hsl( var(--mol_theme_hue), 50%, 40% ); - --mol_theme_hover: hsl( var(--mol_theme_hue), 60%, 30% ); - --mol_theme_current: hsl( var(--mol_theme_hue), 100%, 20% ); +:where( :root, [mol_theme="$mol_theme_dark"] ) [mol_theme="$mol_theme_base"] { + --mol_theme_back: oklch( 25% .04 var(--mol_theme_hue) ); + --mol_theme_card: oklch( 35% .04 var(--mol_theme_hue) / .25 ); } - -[mol_theme="$mol_theme_current"] { - background-color: var(--mol_theme_back); - --mol_theme_back: hsl( calc( var(--mol_theme_hue) - 90deg ), 50%, calc( 50% + 30% * var(--mol_theme_luma) ) ); +:where( [mol_theme="$mol_theme_light"] ) [mol_theme="$mol_theme_base"] { + --mol_theme_back: oklch( 95% .02 var(--mol_theme_hue) ); + --mol_theme_card: oklch( 80% .1 var(--mol_theme_hue) / .25 ); } -[mol_theme="$mol_theme_special"] { - --mol_theme_card: hsl( calc( var(--mol_theme_hue) + 90deg ), 50%, calc( 55% + 35% * var(--mol_theme_luma) ), .25 ); +:where( :root, [mol_theme="$mol_theme_dark"] ) [mol_theme="$mol_theme_accent"] { + --mol_theme_back: oklch( 35% .06 calc( var(--mol_theme_hue) + 120deg ) ); + --mol_theme_card: oklch( 45% .06 calc( var(--mol_theme_hue) + 120deg ) / .25 ); +} +:where( [mol_theme="$mol_theme_light"] ) [mol_theme="$mol_theme_accent"] { + --mol_theme_back: oklch( 90% .05 calc( var(--mol_theme_hue) + 120deg ) ); + --mol_theme_card: oklch( 80% .05 calc( var(--mol_theme_hue) + 120deg ) / .25 ); } -[mol_theme="$mol_theme_accent"] { - background-color: var(--mol_theme_back); - --mol_theme_luma: -2; - --mol_theme_shade: hsl( var(--mol_theme_hue), 50%, 95%, .8 ); - --mol_theme_back: hsl( calc( var(--mol_theme_hue) + 180deg ), 90%, 50% ); - --mol_theme_hover: hsl( calc( var(--mol_theme_hue) + 180deg ), 80%, 35% ); +:where( :root, [mol_theme="$mol_theme_dark"] ) [mol_theme="$mol_theme_current"] { + --mol_theme_back: oklch( 25% .04 calc( var(--mol_theme_hue) - 60deg ) ); + --mol_theme_card: oklch( 35% .04 calc( var(--mol_theme_hue) - 60deg ) / .25 ); +} +:where( [mol_theme="$mol_theme_light"] ) [mol_theme="$mol_theme_current"] { + --mol_theme_back: oklch( 95% .02 calc( var(--mol_theme_hue) - 60deg ) ); + --mol_theme_card: oklch( 80% .1 calc( var(--mol_theme_hue) - 60deg ) / .25 ); } -[mol_theme="$mol_theme_accent"] [mol_theme="$mol_theme_accent"] { - --mol_theme_back: black; +:where( :root, [mol_theme="$mol_theme_dark"] ) [mol_theme="$mol_theme_special"] { + --mol_theme_back: oklch( 25% .04 calc( var(--mol_theme_hue) + 60deg ) ); + --mol_theme_card: oklch( 35% .04 calc( var(--mol_theme_hue) + 60deg ) / .25 ); +} +:where( [mol_theme="$mol_theme_light"] ) [mol_theme="$mol_theme_special"] { + --mol_theme_back: oklch( 95% .02 calc( var(--mol_theme_hue) + 60deg ) ); + --mol_theme_card: oklch( 80% .1 calc( var(--mol_theme_hue) + 60deg ) / .25 ); }