-
-
Notifications
You must be signed in to change notification settings - Fork 59
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
jin
committed
Nov 3, 2023
1 parent
fb5b53b
commit 30100b3
Showing
1 changed file
with
61 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ); | ||
| } |