-545

src/alf/themes.ts

reviewed

··· 1 1 import {atoms} from '#/alf/atoms' 2 2 import {mocha} from '#/alf/catppuccin/palette' 3 3 import {type Palette, type Theme} from '#/alf/types' 4 4 - import {type Palette, type Theme} from '#/alf/types' 5 5 - import {defaultScale, dimScale} from '#/alf/util/colorGeneration' 6 4 import { 7 5 BLUE_HUE, 8 6 defaultScale, ··· 613 611 dim, 614 612 } 615 613 } 616 616 - 617 617 - export const defaultTheme = themes.light 618 618 - 619 619 - export function createThemes({ 620 620 - hues, 621 621 - }: { 622 622 - hues: { 623 623 - primary: number 624 624 - negative: number 625 625 - positive: number 626 626 - } 627 627 - }): { 628 628 - lightPalette: Palette 629 629 - darkPalette: Palette 630 630 - dimPalette: Palette 631 631 - light: Theme 632 632 - dark: Theme 633 633 - dim: Theme 634 634 - } { 635 635 - const color = { 636 636 - like: '#ec4899', 637 637 - trueBlack: '#000000', 638 638 - 639 639 - gray_0: `hsl(${hues.primary}, 20%, ${defaultScale[14]}%)`, 640 640 - gray_25: `hsl(${hues.primary}, 20%, ${defaultScale[13]}%)`, 641 641 - gray_50: `hsl(${hues.primary}, 20%, ${defaultScale[12]}%)`, 642 642 - gray_100: `hsl(${hues.primary}, 20%, ${defaultScale[11]}%)`, 643 643 - gray_200: `hsl(${hues.primary}, 20%, ${defaultScale[10]}%)`, 644 644 - gray_300: `hsl(${hues.primary}, 20%, ${defaultScale[9]}%)`, 645 645 - gray_400: `hsl(${hues.primary}, 20%, ${defaultScale[8]}%)`, 646 646 - gray_500: `hsl(${hues.primary}, 20%, ${defaultScale[7]}%)`, 647 647 - gray_600: `hsl(${hues.primary}, 24%, ${defaultScale[6]}%)`, 648 648 - gray_700: `hsl(${hues.primary}, 24%, ${defaultScale[5]}%)`, 649 649 - gray_800: `hsl(${hues.primary}, 28%, ${defaultScale[4]}%)`, 650 650 - gray_900: `hsl(${hues.primary}, 28%, ${defaultScale[3]}%)`, 651 651 - gray_950: `hsl(${hues.primary}, 28%, ${defaultScale[2]}%)`, 652 652 - gray_975: `hsl(${hues.primary}, 28%, ${defaultScale[1]}%)`, 653 653 - gray_1000: `hsl(${hues.primary}, 28%, ${defaultScale[0]}%)`, 654 654 - 655 655 - primary_25: `hsl(${hues.primary}, 99%, 97%)`, 656 656 - primary_50: `hsl(${hues.primary}, 99%, 95%)`, 657 657 - primary_100: `hsl(${hues.primary}, 99%, 90%)`, 658 658 - primary_200: `hsl(${hues.primary}, 99%, 80%)`, 659 659 - primary_300: `hsl(${hues.primary}, 99%, 70%)`, 660 660 - primary_400: `hsl(${hues.primary}, 99%, 60%)`, 661 661 - primary_500: `hsl(${hues.primary}, 99%, 53%)`, 662 662 - primary_600: `hsl(${hues.primary}, 99%, 42%)`, 663 663 - primary_700: `hsl(${hues.primary}, 99%, 34%)`, 664 664 - primary_800: `hsl(${hues.primary}, 99%, 26%)`, 665 665 - primary_900: `hsl(${hues.primary}, 99%, 18%)`, 666 666 - primary_950: `hsl(${hues.primary}, 99%, 10%)`, 667 667 - primary_975: `hsl(${hues.primary}, 99%, 7%)`, 668 668 - 669 669 - green_25: `hsl(${hues.positive}, 82%, 97%)`, 670 670 - green_50: `hsl(${hues.positive}, 82%, 95%)`, 671 671 - green_100: `hsl(${hues.positive}, 82%, 90%)`, 672 672 - green_200: `hsl(${hues.positive}, 82%, 80%)`, 673 673 - green_300: `hsl(${hues.positive}, 82%, 70%)`, 674 674 - green_400: `hsl(${hues.positive}, 82%, 60%)`, 675 675 - green_500: `hsl(${hues.positive}, 82%, 50%)`, 676 676 - green_600: `hsl(${hues.positive}, 82%, 42%)`, 677 677 - green_700: `hsl(${hues.positive}, 82%, 34%)`, 678 678 - green_800: `hsl(${hues.positive}, 82%, 26%)`, 679 679 - green_900: `hsl(${hues.positive}, 82%, 18%)`, 680 680 - green_950: `hsl(${hues.positive}, 82%, 10%)`, 681 681 - green_975: `hsl(${hues.positive}, 82%, 7%)`, 682 682 - 683 683 - red_25: `hsl(${hues.negative}, 91%, 97%)`, 684 684 - red_50: `hsl(${hues.negative}, 91%, 95%)`, 685 685 - red_100: `hsl(${hues.negative}, 91%, 90%)`, 686 686 - red_200: `hsl(${hues.negative}, 91%, 80%)`, 687 687 - red_300: `hsl(${hues.negative}, 91%, 70%)`, 688 688 - red_400: `hsl(${hues.negative}, 91%, 60%)`, 689 689 - red_500: `hsl(${hues.negative}, 91%, 50%)`, 690 690 - red_600: `hsl(${hues.negative}, 91%, 42%)`, 691 691 - red_700: `hsl(${hues.negative}, 91%, 34%)`, 692 692 - red_800: `hsl(${hues.negative}, 91%, 26%)`, 693 693 - red_900: `hsl(${hues.negative}, 91%, 18%)`, 694 694 - red_950: `hsl(${hues.negative}, 91%, 10%)`, 695 695 - red_975: `hsl(${hues.negative}, 91%, 7%)`, 696 696 - } as const 697 697 - 698 698 - const lightPalette = { 699 699 - white: color.gray_0, 700 700 - black: color.gray_1000, 701 701 - like: color.like, 702 702 - 703 703 - contrast_25: color.gray_25, 704 704 - contrast_50: color.gray_50, 705 705 - contrast_100: color.gray_100, 706 706 - contrast_200: color.gray_200, 707 707 - contrast_300: color.gray_300, 708 708 - contrast_400: color.gray_400, 709 709 - contrast_500: color.gray_500, 710 710 - contrast_600: color.gray_600, 711 711 - contrast_700: color.gray_700, 712 712 - contrast_800: color.gray_800, 713 713 - contrast_900: color.gray_900, 714 714 - contrast_950: color.gray_950, 715 715 - contrast_975: color.gray_975, 716 716 - 717 717 - primary_25: color.primary_25, 718 718 - primary_50: color.primary_50, 719 719 - primary_100: color.primary_100, 720 720 - primary_200: color.primary_200, 721 721 - primary_300: color.primary_300, 722 722 - primary_400: color.primary_400, 723 723 - primary_500: color.primary_500, 724 724 - primary_600: color.primary_600, 725 725 - primary_700: color.primary_700, 726 726 - primary_800: color.primary_800, 727 727 - primary_900: color.primary_900, 728 728 - primary_950: color.primary_950, 729 729 - primary_975: color.primary_975, 730 730 - 731 731 - positive_25: color.green_25, 732 732 - positive_50: color.green_50, 733 733 - positive_100: color.green_100, 734 734 - positive_200: color.green_200, 735 735 - positive_300: color.green_300, 736 736 - positive_400: color.green_400, 737 737 - positive_500: color.green_500, 738 738 - positive_600: color.green_600, 739 739 - positive_700: color.green_700, 740 740 - positive_800: color.green_800, 741 741 - positive_900: color.green_900, 742 742 - positive_950: color.green_950, 743 743 - positive_975: color.green_975, 744 744 - 745 745 - negative_25: color.red_25, 746 746 - negative_50: color.red_50, 747 747 - negative_100: color.red_100, 748 748 - negative_200: color.red_200, 749 749 - negative_300: color.red_300, 750 750 - negative_400: color.red_400, 751 751 - negative_500: color.red_500, 752 752 - negative_600: color.red_600, 753 753 - negative_700: color.red_700, 754 754 - negative_800: color.red_800, 755 755 - negative_900: color.red_900, 756 756 - negative_950: color.red_950, 757 757 - negative_975: color.red_975, 758 758 - } as const 759 759 - 760 760 - const darkPalette: Palette = { 761 761 - white: color.gray_25, 762 762 - black: color.trueBlack, 763 763 - like: color.like, 764 764 - 765 765 - contrast_25: color.gray_975, 766 766 - contrast_50: color.gray_950, 767 767 - contrast_100: color.gray_900, 768 768 - contrast_200: color.gray_800, 769 769 - contrast_300: color.gray_700, 770 770 - contrast_400: color.gray_600, 771 771 - contrast_500: color.gray_500, 772 772 - contrast_600: color.gray_400, 773 773 - contrast_700: color.gray_300, 774 774 - contrast_800: color.gray_200, 775 775 - contrast_900: color.gray_100, 776 776 - contrast_950: color.gray_50, 777 777 - contrast_975: color.gray_25, 778 778 - 779 779 - primary_25: color.primary_975, 780 780 - primary_50: color.primary_950, 781 781 - primary_100: color.primary_900, 782 782 - primary_200: color.primary_800, 783 783 - primary_300: color.primary_700, 784 784 - primary_400: color.primary_600, 785 785 - primary_500: color.primary_500, 786 786 - primary_600: color.primary_400, 787 787 - primary_700: color.primary_300, 788 788 - primary_800: color.primary_200, 789 789 - primary_900: color.primary_100, 790 790 - primary_950: color.primary_50, 791 791 - primary_975: color.primary_25, 792 792 - 793 793 - positive_25: color.green_975, 794 794 - positive_50: color.green_950, 795 795 - positive_100: color.green_900, 796 796 - positive_200: color.green_800, 797 797 - positive_300: color.green_700, 798 798 - positive_400: color.green_600, 799 799 - positive_500: color.green_500, 800 800 - positive_600: color.green_400, 801 801 - positive_700: color.green_300, 802 802 - positive_800: color.green_200, 803 803 - positive_900: color.green_100, 804 804 - positive_950: color.green_50, 805 805 - positive_975: color.green_25, 806 806 - 807 807 - negative_25: color.red_975, 808 808 - negative_50: color.red_950, 809 809 - negative_100: color.red_900, 810 810 - negative_200: color.red_800, 811 811 - negative_300: color.red_700, 812 812 - negative_400: color.red_600, 813 813 - negative_500: color.red_500, 814 814 - negative_600: color.red_400, 815 815 - negative_700: color.red_300, 816 816 - negative_800: color.red_200, 817 817 - negative_900: color.red_100, 818 818 - negative_950: color.red_50, 819 819 - negative_975: color.red_25, 820 820 - } as const 821 821 - 822 822 - const dimPalette: Palette = { 823 823 - ...darkPalette, 824 824 - black: `hsl(${hues.primary}, 28%, ${dimScale[0]}%)`, 825 825 - like: color.like, 826 826 - 827 827 - contrast_25: `hsl(${hues.primary}, 28%, ${dimScale[1]}%)`, 828 828 - contrast_50: `hsl(${hues.primary}, 28%, ${dimScale[2]}%)`, 829 829 - contrast_100: `hsl(${hues.primary}, 28%, ${dimScale[3]}%)`, 830 830 - contrast_200: `hsl(${hues.primary}, 28%, ${dimScale[4]}%)`, 831 831 - contrast_300: `hsl(${hues.primary}, 24%, ${dimScale[5]}%)`, 832 832 - contrast_400: `hsl(${hues.primary}, 24%, ${dimScale[6]}%)`, 833 833 - contrast_500: `hsl(${hues.primary}, 20%, ${dimScale[7]}%)`, 834 834 - contrast_600: `hsl(${hues.primary}, 20%, ${dimScale[8]}%)`, 835 835 - contrast_700: `hsl(${hues.primary}, 20%, ${dimScale[9]}%)`, 836 836 - contrast_800: `hsl(${hues.primary}, 20%, ${dimScale[10]}%)`, 837 837 - contrast_900: `hsl(${hues.primary}, 20%, ${dimScale[11]}%)`, 838 838 - contrast_950: `hsl(${hues.primary}, 20%, ${dimScale[12]}%)`, 839 839 - contrast_975: `hsl(${hues.primary}, 20%, ${dimScale[13]}%)`, 840 840 - 841 841 - primary_25: `hsl(${hues.primary}, 50%, ${dimScale[1]}%)`, 842 842 - primary_50: `hsl(${hues.primary}, 60%, ${dimScale[2]}%)`, 843 843 - primary_100: `hsl(${hues.primary}, 70%, ${dimScale[3]}%)`, 844 844 - primary_200: `hsl(${hues.primary}, 82%, ${dimScale[4]}%)`, 845 845 - primary_300: `hsl(${hues.primary}, 90%, ${dimScale[5]}%)`, 846 846 - primary_400: `hsl(${hues.primary}, 95%, ${dimScale[6]}%)`, 847 847 - primary_500: `hsl(${hues.primary}, 99%, ${dimScale[7]}%)`, 848 848 - primary_600: `hsl(${hues.primary}, 99%, ${dimScale[8]}%)`, 849 849 - primary_700: `hsl(${hues.primary}, 99%, ${dimScale[9]}%)`, 850 850 - primary_800: `hsl(${hues.primary}, 99%, ${dimScale[10]}%)`, 851 851 - primary_900: `hsl(${hues.primary}, 99%, ${dimScale[11]}%)`, 852 852 - primary_950: `hsl(${hues.primary}, 99%, ${dimScale[12]}%)`, 853 853 - primary_975: `hsl(${hues.primary}, 99%, ${dimScale[13]}%)`, 854 854 - 855 855 - positive_25: `hsl(${hues.positive}, 50%, ${dimScale[1]}%)`, 856 856 - positive_50: `hsl(${hues.positive}, 60%, ${dimScale[2]}%)`, 857 857 - positive_100: `hsl(${hues.positive}, 70%, ${dimScale[3]}%)`, 858 858 - positive_200: `hsl(${hues.positive}, 82%, ${dimScale[4]}%)`, 859 859 - positive_300: `hsl(${hues.positive}, 82%, ${dimScale[5]}%)`, 860 860 - positive_400: `hsl(${hues.positive}, 82%, ${dimScale[6]}%)`, 861 861 - positive_500: `hsl(${hues.positive}, 82%, ${dimScale[7]}%)`, 862 862 - positive_600: `hsl(${hues.positive}, 82%, ${dimScale[8]}%)`, 863 863 - positive_700: `hsl(${hues.positive}, 82%, ${dimScale[9]}%)`, 864 864 - positive_800: `hsl(${hues.positive}, 82%, ${dimScale[10]}%)`, 865 865 - positive_900: `hsl(${hues.positive}, 82%, ${dimScale[11]}%)`, 866 866 - positive_950: `hsl(${hues.positive}, 82%, ${dimScale[12]}%)`, 867 867 - positive_975: `hsl(${hues.positive}, 82%, ${dimScale[13]}%)`, 868 868 - 869 869 - negative_25: `hsl(${hues.negative}, 70%, ${dimScale[1]}%)`, 870 870 - negative_50: `hsl(${hues.negative}, 80%, ${dimScale[2]}%)`, 871 871 - negative_100: `hsl(${hues.negative}, 84%, ${dimScale[3]}%)`, 872 872 - negative_200: `hsl(${hues.negative}, 88%, ${dimScale[4]}%)`, 873 873 - negative_300: `hsl(${hues.negative}, 91%, ${dimScale[5]}%)`, 874 874 - negative_400: `hsl(${hues.negative}, 91%, ${dimScale[6]}%)`, 875 875 - negative_500: `hsl(${hues.negative}, 91%, ${dimScale[7]}%)`, 876 876 - negative_600: `hsl(${hues.negative}, 91%, ${dimScale[8]}%)`, 877 877 - negative_700: `hsl(${hues.negative}, 91%, ${dimScale[9]}%)`, 878 878 - negative_800: `hsl(${hues.negative}, 91%, ${dimScale[10]}%)`, 879 879 - negative_900: `hsl(${hues.negative}, 91%, ${dimScale[11]}%)`, 880 880 - negative_950: `hsl(${hues.negative}, 91%, ${dimScale[12]}%)`, 881 881 - negative_975: `hsl(${hues.negative}, 91%, ${dimScale[13]}%)`, 882 882 - } as const 883 883 - 884 884 - const light: Theme = { 885 885 - scheme: 'light', 886 886 - name: 'light', 887 887 - palette: lightPalette, 888 888 - atoms: { 889 889 - text: { 890 890 - color: lightPalette.black, 891 891 - }, 892 892 - text_contrast_low: { 893 893 - color: lightPalette.contrast_400, 894 894 - }, 895 895 - text_contrast_medium: { 896 896 - color: lightPalette.contrast_700, 897 897 - }, 898 898 - text_contrast_high: { 899 899 - color: lightPalette.contrast_900, 900 900 - }, 901 901 - text_inverted: { 902 902 - color: lightPalette.white, 903 903 - }, 904 904 - bg: { 905 905 - backgroundColor: lightPalette.white, 906 906 - }, 907 907 - bg_contrast_25: { 908 908 - backgroundColor: lightPalette.contrast_25, 909 909 - }, 910 910 - bg_contrast_50: { 911 911 - backgroundColor: lightPalette.contrast_50, 912 912 - }, 913 913 - bg_contrast_100: { 914 914 - backgroundColor: lightPalette.contrast_100, 915 915 - }, 916 916 - bg_contrast_200: { 917 917 - backgroundColor: lightPalette.contrast_200, 918 918 - }, 919 919 - bg_contrast_300: { 920 920 - backgroundColor: lightPalette.contrast_300, 921 921 - }, 922 922 - bg_contrast_400: { 923 923 - backgroundColor: lightPalette.contrast_400, 924 924 - }, 925 925 - bg_contrast_500: { 926 926 - backgroundColor: lightPalette.contrast_500, 927 927 - }, 928 928 - bg_contrast_600: { 929 929 - backgroundColor: lightPalette.contrast_600, 930 930 - }, 931 931 - bg_contrast_700: { 932 932 - backgroundColor: lightPalette.contrast_700, 933 933 - }, 934 934 - bg_contrast_800: { 935 935 - backgroundColor: lightPalette.contrast_800, 936 936 - }, 937 937 - bg_contrast_900: { 938 938 - backgroundColor: lightPalette.contrast_900, 939 939 - }, 940 940 - bg_contrast_950: { 941 941 - backgroundColor: lightPalette.contrast_950, 942 942 - }, 943 943 - bg_contrast_975: { 944 944 - backgroundColor: lightPalette.contrast_975, 945 945 - }, 946 946 - border_contrast_low: { 947 947 - borderColor: lightPalette.contrast_100, 948 948 - }, 949 949 - border_contrast_medium: { 950 950 - borderColor: lightPalette.contrast_200, 951 951 - }, 952 952 - border_contrast_high: { 953 953 - borderColor: lightPalette.contrast_300, 954 954 - }, 955 955 - shadow_sm: { 956 956 - ...atoms.shadow_sm, 957 957 - shadowColor: lightPalette.black, 958 958 - }, 959 959 - shadow_md: { 960 960 - ...atoms.shadow_md, 961 961 - shadowColor: lightPalette.black, 962 962 - }, 963 963 - shadow_lg: { 964 964 - ...atoms.shadow_lg, 965 965 - shadowColor: lightPalette.black, 966 966 - }, 967 967 - }, 968 968 - } 969 969 - 970 970 - const dark: Theme = { 971 971 - scheme: 'dark', 972 972 - name: 'dark', 973 973 - palette: darkPalette, 974 974 - atoms: { 975 975 - text: { 976 976 - color: darkPalette.white, 977 977 - }, 978 978 - text_contrast_low: { 979 979 - color: darkPalette.contrast_400, 980 980 - }, 981 981 - text_contrast_medium: { 982 982 - color: darkPalette.contrast_600, 983 983 - }, 984 984 - text_contrast_high: { 985 985 - color: darkPalette.contrast_900, 986 986 - }, 987 987 - text_inverted: { 988 988 - color: darkPalette.black, 989 989 - }, 990 990 - bg: { 991 991 - backgroundColor: darkPalette.black, 992 992 - }, 993 993 - bg_contrast_25: { 994 994 - backgroundColor: darkPalette.contrast_25, 995 995 - }, 996 996 - bg_contrast_50: { 997 997 - backgroundColor: darkPalette.contrast_50, 998 998 - }, 999 999 - bg_contrast_100: { 1000 1000 - backgroundColor: darkPalette.contrast_100, 1001 1001 - }, 1002 1002 - bg_contrast_200: { 1003 1003 - backgroundColor: darkPalette.contrast_200, 1004 1004 - }, 1005 1005 - bg_contrast_300: { 1006 1006 - backgroundColor: darkPalette.contrast_300, 1007 1007 - }, 1008 1008 - bg_contrast_400: { 1009 1009 - backgroundColor: darkPalette.contrast_400, 1010 1010 - }, 1011 1011 - bg_contrast_500: { 1012 1012 - backgroundColor: darkPalette.contrast_500, 1013 1013 - }, 1014 1014 - bg_contrast_600: { 1015 1015 - backgroundColor: darkPalette.contrast_600, 1016 1016 - }, 1017 1017 - bg_contrast_700: { 1018 1018 - backgroundColor: darkPalette.contrast_700, 1019 1019 - }, 1020 1020 - bg_contrast_800: { 1021 1021 - backgroundColor: darkPalette.contrast_800, 1022 1022 - }, 1023 1023 - bg_contrast_900: { 1024 1024 - backgroundColor: darkPalette.contrast_900, 1025 1025 - }, 1026 1026 - bg_contrast_950: { 1027 1027 - backgroundColor: darkPalette.contrast_950, 1028 1028 - }, 1029 1029 - bg_contrast_975: { 1030 1030 - backgroundColor: darkPalette.contrast_975, 1031 1031 - }, 1032 1032 - border_contrast_low: { 1033 1033 - borderColor: darkPalette.contrast_100, 1034 1034 - }, 1035 1035 - border_contrast_medium: { 1036 1036 - borderColor: darkPalette.contrast_200, 1037 1037 - }, 1038 1038 - border_contrast_high: { 1039 1039 - borderColor: darkPalette.contrast_300, 1040 1040 - }, 1041 1041 - shadow_sm: { 1042 1042 - ...atoms.shadow_sm, 1043 1043 - shadowOpacity: 0.7, 1044 1044 - shadowColor: color.trueBlack, 1045 1045 - }, 1046 1046 - shadow_md: { 1047 1047 - ...atoms.shadow_md, 1048 1048 - shadowOpacity: 0.7, 1049 1049 - shadowColor: color.trueBlack, 1050 1050 - }, 1051 1051 - shadow_lg: { 1052 1052 - ...atoms.shadow_lg, 1053 1053 - shadowOpacity: 0.7, 1054 1054 - shadowColor: color.trueBlack, 1055 1055 - }, 1056 1056 - }, 1057 1057 - } 1058 1058 - 1059 1059 - const dim: Theme = { 1060 1060 - ...dark, 1061 1061 - scheme: 'dark', 1062 1062 - name: 'dim', 1063 1063 - palette: dimPalette, 1064 1064 - atoms: { 1065 1065 - ...dark.atoms, 1066 1066 - text: { 1067 1067 - color: dimPalette.white, 1068 1068 - }, 1069 1069 - text_contrast_low: { 1070 1070 - color: dimPalette.contrast_400, 1071 1071 - }, 1072 1072 - text_contrast_medium: { 1073 1073 - color: dimPalette.contrast_600, 1074 1074 - }, 1075 1075 - text_contrast_high: { 1076 1076 - color: dimPalette.contrast_900, 1077 1077 - }, 1078 1078 - text_inverted: { 1079 1079 - color: dimPalette.black, 1080 1080 - }, 1081 1081 - bg: { 1082 1082 - backgroundColor: dimPalette.black, 1083 1083 - }, 1084 1084 - bg_contrast_25: { 1085 1085 - backgroundColor: dimPalette.contrast_25, 1086 1086 - }, 1087 1087 - bg_contrast_50: { 1088 1088 - backgroundColor: dimPalette.contrast_50, 1089 1089 - }, 1090 1090 - bg_contrast_100: { 1091 1091 - backgroundColor: dimPalette.contrast_100, 1092 1092 - }, 1093 1093 - bg_contrast_200: { 1094 1094 - backgroundColor: dimPalette.contrast_200, 1095 1095 - }, 1096 1096 - bg_contrast_300: { 1097 1097 - backgroundColor: dimPalette.contrast_300, 1098 1098 - }, 1099 1099 - bg_contrast_400: { 1100 1100 - backgroundColor: dimPalette.contrast_400, 1101 1101 - }, 1102 1102 - bg_contrast_500: { 1103 1103 - backgroundColor: dimPalette.contrast_500, 1104 1104 - }, 1105 1105 - bg_contrast_600: { 1106 1106 - backgroundColor: dimPalette.contrast_600, 1107 1107 - }, 1108 1108 - bg_contrast_700: { 1109 1109 - backgroundColor: dimPalette.contrast_700, 1110 1110 - }, 1111 1111 - bg_contrast_800: { 1112 1112 - backgroundColor: dimPalette.contrast_800, 1113 1113 - }, 1114 1114 - bg_contrast_900: { 1115 1115 - backgroundColor: dimPalette.contrast_900, 1116 1116 - }, 1117 1117 - bg_contrast_950: { 1118 1118 - backgroundColor: dimPalette.contrast_950, 1119 1119 - }, 1120 1120 - bg_contrast_975: { 1121 1121 - backgroundColor: dimPalette.contrast_975, 1122 1122 - }, 1123 1123 - border_contrast_low: { 1124 1124 - borderColor: dimPalette.contrast_100, 1125 1125 - }, 1126 1126 - border_contrast_medium: { 1127 1127 - borderColor: dimPalette.contrast_200, 1128 1128 - }, 1129 1129 - border_contrast_high: { 1130 1130 - borderColor: dimPalette.contrast_300, 1131 1131 - }, 1132 1132 - shadow_sm: { 1133 1133 - ...atoms.shadow_sm, 1134 1134 - shadowOpacity: 0.7, 1135 1135 - shadowColor: `hsl(${hues.primary}, 28%, 6%)`, 1136 1136 - }, 1137 1137 - shadow_md: { 1138 1138 - ...atoms.shadow_md, 1139 1139 - shadowOpacity: 0.7, 1140 1140 - shadowColor: `hsl(${hues.primary}, 28%, 6%)`, 1141 1141 - }, 1142 1142 - shadow_lg: { 1143 1143 - ...atoms.shadow_lg, 1144 1144 - shadowOpacity: 0.7, 1145 1145 - shadowColor: `hsl(${hues.primary}, 28%, 6%)`, 1146 1146 - }, 1147 1147 - }, 1148 1148 - } 1149 1149 - 1150 1150 - return { 1151 1151 - lightPalette, 1152 1152 - darkPalette, 1153 1153 - dimPalette, 1154 1154 - light, 1155 1155 - dark, 1156 1156 - dim, 1157 1157 - } 1158 1158 - }

-1

src/view/com/composer/Composer.tsx

reviewed

··· 65 65 SUPPORTED_MIME_TYPES, 66 66 type SupportedMimeTypes, 67 67 } from '#/lib/constants' 68 68 - import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED' 69 68 import {useAppState} from '#/lib/hooks/useAppState' 70 69 import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible' 71 70 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'