| ... | ... | @@ -136,16 +136,37 @@ figure.code { |
| 136 | 136 | |
| 137 | 137 | &.server { |
| 138 | 138 | --secondary: #ff7770; |
| 139 | | |
| 140 | | .variable { |
| 141 | | color: lch(from var(--secondary) 70 c calc(h + 50)); |
| 142 | | } |
| 143 | 139 | } |
| 144 | 140 | &.client { |
| 145 | 141 | --secondary: #ffcd70; |
| 146 | 142 | |
| 147 | | .variable { |
| 148 | | color: lch(from var(--secondary) 70 c calc(h + 50)); |
| 143 | pre > code { |
| 144 | color: #fff2d2; |
| 145 | |
| 146 | .keyword { |
| 147 | color: #f4c755; |
| 148 | } |
| 149 | .string { |
| 150 | color: #d6e85e; |
| 151 | } |
| 152 | .constant { |
| 153 | color: #ffd978; |
| 154 | } |
| 155 | .method { |
| 156 | color: #ffab72; |
| 157 | } |
| 158 | .builtin { |
| 159 | color: #f0e46d; |
| 160 | } |
| 161 | .variable { |
| 162 | color: #9fe36f; |
| 163 | } |
| 164 | .comment { |
| 165 | color: #baa98b; |
| 166 | } |
| 167 | .property, .parameter { |
| 168 | color: #ffe5ad; |
| 169 | } |
| 149 | 170 | } |
| 150 | 171 | } |
| 151 | 172 | figcaption { |
| ... | ... | @@ -169,30 +190,29 @@ figure.code { |
| 169 | 190 | color: lch(from var(--secondary) 90 10 h); |
| 170 | 191 | |
| 171 | 192 | .keyword { |
| 172 | | color: var(--secondary); |
| 173 | | color: lch(from var(--secondary) l c h / 90%); |
| 193 | color: lch(from var(--secondary) 72 c h); |
| 174 | 194 | font-weight: bold; |
| 175 | 195 | } |
| 176 | 196 | .string { |
| 177 | | color: lch(from var(--secondary) 90 90 calc(h + 20)); |
| 197 | color: lch(from var(--secondary) 84 calc(c + 18) calc(h + 26)); |
| 178 | 198 | } |
| 179 | 199 | .constant { |
| 180 | | color: lch(from var(--secondary) 90 90 calc(h - 10)); |
| 200 | color: lch(from var(--secondary) 86 calc(c + 10) calc(h - 18)); |
| 181 | 201 | } |
| 182 | 202 | .method { |
| 183 | | color: lch(from var(--secondary) 70 c calc(h + 20)); |
| 203 | color: lch(from var(--secondary) 78 calc(c + 8) calc(h + 18)); |
| 184 | 204 | } |
| 185 | 205 | .builtin { |
| 186 | | color: lch(from var(--secondary) 90 90 calc(h - 25)); |
| 206 | color: lch(from var(--secondary) 82 calc(c + 12) calc(h - 32)); |
| 187 | 207 | } |
| 188 | 208 | .variable { |
| 189 | | color: lch(from var(--secondary) 50 c calc(h + 50)); |
| 209 | color: lch(from var(--secondary) 78 calc(c + 16) calc(h + 50)); |
| 190 | 210 | } |
| 191 | 211 | .comment { |
| 192 | | color: lch(from var(--secondary) 90 40 h / 50%); |
| 212 | color: lch(from var(--secondary) 72 22 h / 85%); |
| 193 | 213 | } |
| 194 | 214 | .property, .parameter { |
| 195 | | color: lch(from var(--secondary) 90 calc(c - 20) h); |
| 215 | color: lch(from var(--secondary) 88 calc(c - 14) h); |
| 196 | 216 | } |
| 197 | 217 | } |
| 198 | 218 | } |