Skip to content

Commit

Permalink
$mol_theme: return hsl
Browse files Browse the repository at this point in the history
  • Loading branch information
jin committed Nov 9, 2023
1 parent 88103c4 commit 1e35197
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 22 deletions.
2 changes: 1 addition & 1 deletion theme/demo/demo.view.tree
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ $mol_theme_demo $mol_example_large
--mol_theme_hue <= hue_deg \
sub /
<= Hue $mol_number
value? <=> hue? 240
value? <=> hue? 210
precision_change 15
<= Scroll $mol_scroll sub /
<= Cases $mol_theme_demo_case
Expand Down
86 changes: 65 additions & 21 deletions theme/theme.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
:root {
--mol_theme_hue: 240deg;
--mol_theme_hue: 210deg;
}

:where([mol_theme]) {
Expand All @@ -13,7 +13,21 @@
--mol_theme_luma: -1;
--mol_theme_image: invert(1) hue-rotate( 180deg );

--mol_theme_back: oklch( 20% .03 var(--mol_theme_hue) );
--mol_theme_back: hsl( var(--mol_theme_hue), 20%, 10% );
--mol_theme_card: hsl( var(--mol_theme_hue), 50%, 20%, .25 );
--mol_theme_field: hsl( var(--mol_theme_hue), 50%, 8%, .25 );
--mol_theme_hover: hsl( var(--mol_theme_hue), 0%, 50%, .1 );

--mol_theme_text: hsl( var(--mol_theme_hue), 0%, 80% );
--mol_theme_shade: hsl( var(--mol_theme_hue), 0%, 60%, 1 );
--mol_theme_line: hsl( var(--mol_theme_hue), 0%, 50%, .2 );
--mol_theme_focus: hsl( calc( var(--mol_theme_hue) + 180deg ), 100%, 65% );

--mol_theme_control: hsl( var(--mol_theme_hue), 60%, 70% );
--mol_theme_current: hsl( calc( var(--mol_theme_hue) - 60deg ), 60%, 70% );
--mol_theme_special: hsl( calc( var(--mol_theme_hue) + 60deg ), 60%, 70% );

/* --mol_theme_back: oklch( 20% .03 var(--mol_theme_hue) );
--mol_theme_card: oklch( 35% .05 var(--mol_theme_hue) / .25 );
--mol_theme_field: oklch( 0% 0 var(--mol_theme_hue) / .25 );
--mol_theme_hover: oklch( 70% 0 var(--mol_theme_hue) / .1 );
Expand All @@ -25,7 +39,7 @@
--mol_theme_control: oklch( 70% .1 var(--mol_theme_hue) );
--mol_theme_current: oklch( 80% .2 calc( var(--mol_theme_hue) - 60deg ) );
--mol_theme_special: oklch( 80% .3 calc( var(--mol_theme_hue) + 60deg ) );
--mol_theme_special: oklch( 80% .3 calc( var(--mol_theme_hue) + 60deg ) ); */

}

Expand All @@ -34,7 +48,21 @@
--mol_theme_luma: 1;
--mol_theme_image: none;

--mol_theme_back: oklch( 93% .01 var(--mol_theme_hue) );
--mol_theme_back: hsl( var(--mol_theme_hue), 20%, 99% );
--mol_theme_card: hsl( var(--mol_theme_hue), 50%, 90%, .25 );
--mol_theme_field: hsl( var(--mol_theme_hue), 50%, 100%, .5 );
--mol_theme_hover: hsl( var(--mol_theme_hue), 0%, 50%, .1 );

--mol_theme_text: hsl( var(--mol_theme_hue), 0%, 0% );
--mol_theme_shade: hsl( var(--mol_theme_hue), 0%, 40%, 1 );
--mol_theme_line: hsl( var(--mol_theme_hue), 0%, 50%, .2 );
--mol_theme_focus: hsl( calc( var(--mol_theme_hue) + 180deg ), 100%, 40% );

--mol_theme_control: hsl( var(--mol_theme_hue), 80%, 30% );
--mol_theme_current: hsl( calc( var(--mol_theme_hue) - 90deg ), 80%, 30% );
--mol_theme_special: hsl( calc( var(--mol_theme_hue) + 90deg ), 80%, 30% );

/* --mol_theme_back: oklch( 93% .01 var(--mol_theme_hue) );
--mol_theme_card: oklch( 100% .02 var(--mol_theme_hue) / .25 );
--mol_theme_field: oklch( 100% 0 var(--mol_theme_hue) / .5 );
--mol_theme_hover: oklch( 70% 0 var(--mol_theme_hue) / .1 );
Expand All @@ -46,42 +74,58 @@
--mol_theme_control: oklch( 45% .25 var(--mol_theme_hue) );
--mol_theme_current: oklch( 45% .5 calc( var(--mol_theme_hue) - 60deg ) );
--mol_theme_special: oklch( 45% .5 calc( var(--mol_theme_hue) + 60deg ) );
--mol_theme_special: oklch( 45% .5 calc( var(--mol_theme_hue) + 60deg ) ); */

}

:where( :root, [mol_theme="$mol_theme_dark"] ) [mol_theme="$mol_theme_base"] {
--mol_theme_back: oklch( 25% .05 var(--mol_theme_hue) );
--mol_theme_card: oklch( 35% .1 var(--mol_theme_hue) / .25 );
--mol_theme_back: hsl( var(--mol_theme_hue), 50%, 20% );
--mol_theme_card: hsl( var(--mol_theme_hue), 40%, 10%, .25 );
/* --mol_theme_back: oklch( 25% .05 var(--mol_theme_hue) );
--mol_theme_card: oklch( 35% .1 var(--mol_theme_hue) / .25 ); */
}
: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% .05 var(--mol_theme_hue) / .25 );
--mol_theme_back: hsl( var(--mol_theme_hue), 50%, 90% );
--mol_theme_card: hsl( var(--mol_theme_hue), 80%, 99%, .25 );
/* --mol_theme_back: oklch( 95% .02 var(--mol_theme_hue) );
--mol_theme_card: oklch( 80% .05 var(--mol_theme_hue) / .25 ); */
}

:where( :root, [mol_theme="$mol_theme_dark"] ) [mol_theme="$mol_theme_accent"] {
--mol_theme_back: oklch( 40% .2 calc( var(--mol_theme_hue) + 120deg ) );
--mol_theme_card: oklch( 50% .3 calc( var(--mol_theme_hue) + 120deg ) / .25 );
--mol_theme_back: hsl( calc( var(--mol_theme_hue) + 180deg ), 90%, 25% );
--mol_theme_card: hsl( calc( var(--mol_theme_hue) + 180deg ), 80%, 15%, .25 );
/* --mol_theme_back: oklch( 40% .2 calc( var(--mol_theme_hue) + 120deg ) );
--mol_theme_card: oklch( 50% .3 calc( var(--mol_theme_hue) + 120deg ) / .25 ); */
}
:where( [mol_theme="$mol_theme_light"] ) [mol_theme="$mol_theme_accent"] {
--mol_theme_back: oklch( 90% .03 calc( var(--mol_theme_hue) + 120deg ) );
--mol_theme_card: oklch( 80% .05 calc( var(--mol_theme_hue) + 120deg ) / .25 );
--mol_theme_back: hsl( calc( var(--mol_theme_hue) + 180deg ), 90%, 80% );
--mol_theme_card: hsl( calc( var(--mol_theme_hue) + 180deg ), 80%, 95%, .25 );
/* --mol_theme_back: oklch( 90% .03 calc( var(--mol_theme_hue) + 120deg ) );
--mol_theme_card: oklch( 80% .05 calc( var(--mol_theme_hue) + 120deg ) / .25 ); */
}

:where( :root, [mol_theme="$mol_theme_dark"] ) [mol_theme="$mol_theme_current"] {
--mol_theme_back: oklch( 25% .05 calc( var(--mol_theme_hue) - 60deg ) );
--mol_theme_card: oklch( 35% .1 calc( var(--mol_theme_hue) - 60deg ) / .25 );
--mol_theme_back: hsl( calc( var(--mol_theme_hue) - 60deg ), 50%, 20% );
--mol_theme_card: hsl( calc( var(--mol_theme_hue) - 60deg ), 40%, 10%, .25 );
/* --mol_theme_back: oklch( 25% .05 calc( var(--mol_theme_hue) - 60deg ) );
--mol_theme_card: oklch( 35% .1 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% .05 calc( var(--mol_theme_hue) - 60deg ) / .25 );
--mol_theme_back: hsl( calc( var(--mol_theme_hue) - 60deg ), 50%, 90% );
--mol_theme_card: hsl( calc( var(--mol_theme_hue) - 60deg ), 80%, 99%, .25 );
/* --mol_theme_back: oklch( 95% .02 calc( var(--mol_theme_hue) - 60deg ) );
--mol_theme_card: oklch( 80% .05 calc( var(--mol_theme_hue) - 60deg ) / .25 ); */
}

:where( :root, [mol_theme="$mol_theme_dark"] ) [mol_theme="$mol_theme_special"] {
--mol_theme_back: oklch( 25% .05 calc( var(--mol_theme_hue) + 60deg ) );
--mol_theme_card: oklch( 35% .1 calc( var(--mol_theme_hue) + 60deg ) / .25 );
--mol_theme_back: hsl( calc( var(--mol_theme_hue) + 60deg ), 50%, 20% );
--mol_theme_card: hsl( calc( var(--mol_theme_hue) + 60deg ), 40%, 10%, .25 );
/* --mol_theme_back: oklch( 25% .05 calc( var(--mol_theme_hue) + 60deg ) );
--mol_theme_card: oklch( 35% .1 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% .05 calc( var(--mol_theme_hue) + 60deg ) / .25 );
--mol_theme_back: hsl( calc( var(--mol_theme_hue) + 60deg ), 50%, 90% );
--mol_theme_card: hsl( calc( var(--mol_theme_hue) + 60deg ), 80%, 99%, .25 );
/* --mol_theme_back: oklch( 95% .02 calc( var(--mol_theme_hue) + 60deg ) );
--mol_theme_card: oklch( 80% .05 calc( var(--mol_theme_hue) + 60deg ) / .25 ); */
}

0 comments on commit 1e35197

Please sign in to comment.