forked from hyoo-ru/mam_mol
-
Notifications
You must be signed in to change notification settings - Fork 0
/
theme.css
132 lines (109 loc) · 6.53 KB
/
theme.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
:root {
--mol_theme_hue: 210deg;
--mol_theme_hue_spread: 90deg;
}
:where([mol_theme]) {
color: var(--mol_theme_text);
fill: var(--mol_theme_text);
background-color: var(--mol_theme_back);
}
:root, [mol_theme="$mol_theme_dark"], :where([mol_theme="$mol_theme_dark"]) [mol_theme] {
--mol_theme_luma: -1;
--mol_theme_image: invert(1) hue-rotate( 180deg );
--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%, .25 );
--mol_theme_focus: hsl( calc( var(--mol_theme_hue) + 180deg ), 100%, 65% );
--mol_theme_control: hsl( var(--mol_theme_hue), 60%, 65% );
--mol_theme_current: hsl( calc( var(--mol_theme_hue) - var(--mol_theme_hue_spread) ), 60%, 65% );
--mol_theme_special: hsl( calc( var(--mol_theme_hue) + var(--mol_theme_hue_spread) ), 60%, 65% );
/* --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 );
--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( 80% .2 calc( var(--mol_theme_hue) + 120deg ) );
--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="$mol_theme_light"], :where([mol_theme="$mol_theme_light"]) [mol_theme] {
--mol_theme_luma: 1;
--mol_theme_image: none;
--mol_theme_back: hsl( var(--mol_theme_hue), 20%, 92% );
--mol_theme_card: hsl( var(--mol_theme_hue), 50%, 100%, .5 );
--mol_theme_field: hsl( var(--mol_theme_hue), 50%, 100%, .75 );
--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%, .25 );
--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) - var(--mol_theme_hue_spread) ), 80%, 30% );
--mol_theme_special: hsl( calc( var(--mol_theme_hue) + var(--mol_theme_hue_spread) ), 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 );
--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( 20% .8 calc( var(--mol_theme_hue) + 120deg ) );
--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 ) ); */
}
:where( :root, [mol_theme="$mol_theme_dark"] ) [mol_theme="$mol_theme_base"] {
--mol_theme_back: hsl( var(--mol_theme_hue), 50%, 30% );
--mol_theme_card: hsl( var(--mol_theme_hue), 40%, 20%, .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: hsl( var(--mol_theme_hue), 50%, 80% );
--mol_theme_card: hsl( var(--mol_theme_hue), 80%, 95%, .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: hsl( calc( var(--mol_theme_hue) + 180deg ), 90%, 30% );
--mol_theme_card: hsl( calc( var(--mol_theme_hue) + 180deg ), 80%, 20%, .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: hsl( calc( var(--mol_theme_hue) + 180deg ), 90%, 75% );
--mol_theme_card: hsl( calc( var(--mol_theme_hue) + 180deg ), 80%, 90%, .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: hsl( calc( var(--mol_theme_hue) - var(--mol_theme_hue_spread) ), 50%, 30% );
--mol_theme_card: hsl( calc( var(--mol_theme_hue) - var(--mol_theme_hue_spread) ), 40%, 20%, .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: hsl( calc( var(--mol_theme_hue) - var(--mol_theme_hue_spread) ), 50%, 92% );
--mol_theme_card: hsl( calc( var(--mol_theme_hue) - var(--mol_theme_hue_spread) ), 80%, 100%, .5 );
/* --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: hsl( calc( var(--mol_theme_hue) + var(--mol_theme_hue_spread) ), 50%, 30% );
--mol_theme_card: hsl( calc( var(--mol_theme_hue) + var(--mol_theme_hue_spread) ), 40%, 20%, .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: hsl( calc( var(--mol_theme_hue) + var(--mol_theme_hue_spread) ), 50%, 92% );
--mol_theme_card: hsl( calc( var(--mol_theme_hue) + var(--mol_theme_hue_spread) ), 80%, 100%, .5 );
/* --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 ); */
}