[Archived] Archived WIP of vielle.dev

refactor palette injection to avoid the intermediate `--_(dark|light)-*`

vielle.dev 377271e1 79eefb8d

verified
+13 -57
+13 -57
src/pages/blog/[id].astro
··· 511 511 512 512 <!-- page styles --> 513 513 <style> 514 - :root { 515 - color-scheme: light dark; 516 - 517 - --bg-main: light-dark(var(--_light-bg-main), var(--_dark-bg-main)); 518 - 519 - --bg-secondary: light-dark( 520 - var(--_light-bg-secondary), 521 - var(--_dark-bg-secondary) 522 - ); 523 - 524 - --bg-code: light-dark(var(--_light-bg-code), var(--_dark-bg-code)); 525 - 526 - --typo-body: light-dark(var(--_light-typo-body), var(--_dark-typo-body)); 527 - 528 - --typo-body-inv: light-dark( 529 - var(--_dark-typo-body), 530 - var(--_light-typo-body) 531 - ); 532 - 533 - --typo-heading: light-dark( 534 - var(--_light-typo-heading), 535 - var(--_dark-typo-heading) 536 - ); 537 - 538 - --typo-subheading: light-dark( 539 - var(--_light-typo-subheading), 540 - var(--_dark-typo-subheading) 541 - ); 542 - 543 - --typo-url: light-dark(var(--_light-typo-url), var(--_dark-typo-url)); 544 - --typo-visited: light-dark( 545 - var(--_light-typo-visited), 546 - var(--_dark-typo-visited) 547 - ); 548 - 549 - --typo-code: light-dark(var(--_light-typo-code), var(--_dark-typo-code)); 550 - } 551 - 552 514 header { 553 515 font-size: 1.6rem; 554 516 ··· 637 599 <style 638 600 set:html={` 639 601 :root { 640 - --_light-bg-main: ${light.background.main}; 641 - --_light-bg-secondary: ${light.background.secondary}; 642 - --_light-bg-code: ${light.background.code}; 643 - --_light-typo-body: ${light.typography.body}; 644 - --_light-typo-heading: ${light.typography.heading}; 645 - --_light-typo-subheading: ${light.typography.subheading}; 646 - --_light-typo-url: ${light.typography.url}; 647 - --_light-typo-visited: ${light.typography.visited}; 648 - --_light-typo-code: ${light.typography.code}; 649 - 650 - --_dark-bg-main: ${dark.background.main}; 651 - --_dark-bg-secondary: ${dark.background.secondary}; 652 - --_dark-bg-code: ${dark.background.code}; 653 - --_dark-typo-body: ${dark.typography.body}; 654 - --_dark-typo-heading: ${dark.typography.heading}; 655 - --_dark-typo-subheading: ${dark.typography.subheading}; 656 - --_dark-typo-url: ${dark.typography.url}; 657 - --_dark-typo-visited: ${dark.typography.visited}; 658 - --_dark-typo-code: ${dark.typography.code}; 602 + color-scheme: light dark; 603 + 604 + --bg-main: light-dark(${light.background.main}, ${dark.background.main}); 605 + --bg-secondary: light-dark(${light.background.secondary}, ${dark.background.secondary}); 606 + --bg-code: light-dark(${light.background.code}, ${dark.background.code}); 659 607 608 + --typo-body: light-dark(${light.typography.body}, ${dark.typography.body}); 609 + --typo-heading: light-dark(${light.typography.heading}, ${dark.typography.heading}); 610 + --typo-subheading: light-dark(${light.typography.subheading}, ${dark.typography.subheading}); 611 + --typo-code: light-dark(${light.typography.code}, ${dark.typography.code}); 612 + 613 + --typo-url: light-dark(${light.typography.url}, ${dark.typography.url}); 614 + --typo-visited: light-dark(${light.typography.visited}, ${dark.typography.visited}); 615 + 660 616 --rainbow-0: ${rainbow[0]}; 661 617 --rainbow-1: ${rainbow[1]}; 662 618 --rainbow-2: ${rainbow[2]};