From 61da89c1a92cdf5837ee1310aef0248a5644dfe9 Mon Sep 17 00:00:00 2001 From: Toshit Chawda Date: Tue, 2 Jan 2024 12:59:17 -0800 Subject: [PATCH 1/2] fix catppuccin theme --- gen_ctp_palette.sh | 111 ++++++++++++++++++++++++++ public/themes/catppuccin.gen.css | 30 +++++++ public/themes/catppuccinFrappe.css | 13 +-- public/themes/catppuccinLatte.css | 42 +++++----- public/themes/catppuccinMacchiato.css | 15 ++-- public/themes/catppuccinMocha.css | 13 +-- src/pages/Home.tsx | 2 +- src/pages/Settings/Dropdown.tsx | 6 +- src/pages/discord.tsx | 8 +- 9 files changed, 192 insertions(+), 48 deletions(-) create mode 100644 gen_ctp_palette.sh create mode 100644 public/themes/catppuccin.gen.css diff --git a/gen_ctp_palette.sh b/gen_ctp_palette.sh new file mode 100644 index 0000000..83c8496 --- /dev/null +++ b/gen_ctp_palette.sh @@ -0,0 +1,111 @@ +if [[ $1 == "latte" ]]; then + export ROSEWATER="#dc8a78" + export FLAMINGO="#dd7878" + export PINK="#ea76cb" + export MAUVE="#8839ef" + export RED="#d20f39" + export MAROON="#e64553" + export PEACH="#fe640b" + export YELLOW="#df8e1d" + export GREEN="#40a02b" + export TEAL="#179299" + export SKY="#04a5e5" + export SAPPHIRE="#209fb5" + export BLUE="#1e66f5" + export LAVENDER="#7287fd" + export TEXT="#4c4f69" + export SUBTEXT1="#5c5f77" + export SUBTEXT0="#6c6f85" + export OVERLAY2="#7c7f93" + export OVERLAY1="#8c8fa1" + export OVERLAY0="#9ca0b0" + export SURFACE2="#acb0be" + export SURFACE1="#bcc0cc" + export SURFACE0="#ccd0da" + export BASE="#eff1f5" + export MANTLE="#e6e9ef" + export CRUST="#dce0e8" +elif [[ $1 == "frappe" ]]; then + export ROSEWATER="#f2d5cf" + export FLAMINGO="#eebebe" + export PINK="#f4b8e4" + export MAUVE="#ca9ee6" + export RED="#e78284" + export MAROON="#ea999c" + export PEACH="#ef9f76" + export YELLOW="#e5c890" + export GREEN="#a6d189" + export TEAL="#81c8be" + export SKY="#99d1db" + export SAPPHIRE="#85c1dc" + export BLUE="#8caaee" + export LAVENDER="#babbf1" + export TEXT="#c6d0f5" + export SUBTEXT1="#b5bfe2" + export SUBTEXT0="#a5adce" + export OVERLAY2="#949cbb" + export OVERLAY1="#838ba7" + export OVERLAY0="#737994" + export SURFACE2="#626880" + export SURFACE1="#51576d" + export SURFACE0="#414559" + export BASE="#303446" + export MANTLE="#292c3c" + export CRUST="#232634" +elif [[ $1 == "macchiato" ]]; then + export ROSEWATER="#f4dbd6" + export FLAMINGO="#f0c6c6" + export PINK="#f5bde6" + export MAUVE="#c6a0f6" + export RED="#ed8796" + export MAROON="#ee99a0" + export PEACH="#f5a97f" + export YELLOW="#eed49f" + export GREEN="#a6da95" + export TEAL="#8bd5ca" + export SKY="#91d7e3" + export SAPPHIRE="#7dc4e4" + export BLUE="#8aadf4" + export LAVENDER="#b7bdf8" + export TEXT="#cad3f5" + export SUBTEXT1="#b8c0e0" + export SUBTEXT0="#a5adcb" + export OVERLAY2="#939ab7" + export OVERLAY1="#8087a2" + export OVERLAY0="#6e738d" + export SURFACE2="#5b6078" + export SURFACE1="#494d64" + export SURFACE0="#363a4f" + export BASE="#24273a" + export MANTLE="#1e2030" + export CRUST="#181926" +else + export ROSEWATER="#f5e0dc" + export FLAMINGO="#f2cdcd" + export PINK="#f5c2e7" + export MAUVE="#cba6f7" + export RED="#f38ba8" + export MAROON="#eba0ac" + export PEACH="#fab387" + export YELLOW="#f9e2af" + export GREEN="#a6e3a1" + export TEAL="#94e2d5" + export SKY="#89dceb" + export SAPPHIRE="#74c7ec" + export BLUE="#89b4fa" + export LAVENDER="#b4befe" + export TEXT="#cdd6f4" + export SUBTEXT1="#bac2de" + export SUBTEXT0="#a6adc8" + export OVERLAY2="#9399b2" + export OVERLAY1="#7f849c" + export OVERLAY0="#6c7086" + export SURFACE2="#585b70" + export SURFACE1="#45475a" + export SURFACE0="#313244" + export BASE="#1e1e2e" + export MANTLE="#181825" + export CRUST="#11111b" +fi + +cat $2 | envsubst diff --git a/public/themes/catppuccin.gen.css b/public/themes/catppuccin.gen.css new file mode 100644 index 0000000..9560c78 --- /dev/null +++ b/public/themes/catppuccin.gen.css @@ -0,0 +1,30 @@ +@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); + +:root { + --background-primary: $BASE !important; + --background-lighter: $MANTLE !important; + --navbar-color: $MANTLE !important; + --navbar-height: 60px !important; + --navbar-text-color: $TEXT !important; + --navbar-link-color: $BLUE !important; + --navbar-link-hover-color: $MAUVE !important; + --navbar-font: "Roboto" !important; + --input-text-color: $TEXT !important; + --input-placeholder-color: $SUBTEXT0 !important; + --input-background-color: $CRUST !important; + --input-border-color: color-mix(in srgb, $CRUST, $MAUVE 50%) !important; + --input-border-size: 1.3px !important; + --navbar-logo-filter: none !important; + --dropdown-option-hover-color: $CRUST !important; + --tab-color: $SURFACE0 !important; + --active-color: $MAUVE !important; +} + +.font-inter { + font-family: "Inter", sans-serif; + font-weight: 300; +} + +.font-roboto { + font-family: "Roboto"; +} diff --git a/public/themes/catppuccinFrappe.css b/public/themes/catppuccinFrappe.css index 0a0c52c..1b15499 100644 --- a/public/themes/catppuccinFrappe.css +++ b/public/themes/catppuccinFrappe.css @@ -2,21 +2,22 @@ :root { --background-primary: #303446 !important; - --background-lighter: #232634 !important; - --navbar-color: #232634 !important; + --background-lighter: #292c3c !important; + --navbar-color: #292c3c !important; --navbar-height: 60px !important; - --navbar-text-color: #ca9ee6 !important; + --navbar-text-color: #c6d0f5 !important; --navbar-link-color: #8caaee !important; --navbar-link-hover-color: #ca9ee6 !important; --navbar-font: "Roboto" !important; --input-text-color: #c6d0f5 !important; - --input-placeholder-color: #b5bfe2 !important; - --input-background-color: #292c3c !important; - --input-border-color: #ca9ee6 !important; + --input-placeholder-color: #a5adce !important; + --input-background-color: #232634 !important; + --input-border-color: color-mix(in srgb, #232634, #ca9ee6 50%) !important; --input-border-size: 1.3px !important; --navbar-logo-filter: none !important; --dropdown-option-hover-color: #232634 !important; --tab-color: #414559 !important; + --active-color: #ca9ee6 !important; } .font-inter { diff --git a/public/themes/catppuccinLatte.css b/public/themes/catppuccinLatte.css index 58feefb..f96111d 100644 --- a/public/themes/catppuccinLatte.css +++ b/public/themes/catppuccinLatte.css @@ -1,30 +1,30 @@ @import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); :root { - --background-primary: #eff1f5 !important; - --background-lighter: #dce0e8 !important; - --navbar-color: #dce0e8 !important; - --navbar-height: 60px !important; - --navbar-text-color: #8839ef !important; - --navbar-link-color: #1e66f5 !important; - --navbar-link-hover-color: #8839ef !important; - --navbar-font: "Roboto" !important; - --input-text-color: #4c4f69 !important; - --input-placeholder-color: #5c5f77 !important; - --input-background-color: #e6e9ef !important; - --input-border-color: #8839ef !important; - --input-border-size: 1.3px !important; - --navbar-logo-filter: none !important; - --dropdown-option-hover-color: #dce0e8 !important; - --tab-color: #ccd0da; !important + --background-primary: #eff1f5 !important; + --background-lighter: #e6e9ef !important; + --navbar-color: #e6e9ef !important; + --navbar-height: 60px !important; + --navbar-text-color: #4c4f69 !important; + --navbar-link-color: #1e66f5 !important; + --navbar-link-hover-color: #8839ef !important; + --navbar-font: "Roboto" !important; + --input-text-color: #4c4f69 !important; + --input-placeholder-color: #6c6f85 !important; + --input-background-color: #dce0e8 !important; + --input-border-color: color-mix(in srgb, #dce0e8, #8839ef 50%) !important; + --input-border-size: 1.3px !important; + --navbar-logo-filter: none !important; + --dropdown-option-hover-color: #dce0e8 !important; + --tab-color: #ccd0da !important; + --active-color: #8839ef !important; } .font-inter { - font-family: "Inter", sans-serif; - font-weight: 300; + font-family: "Inter", sans-serif; + font-weight: 300; } .font-roboto { - font-family: "Roboto"; - color: #4c4f69 -} \ No newline at end of file + font-family: "Roboto"; +} diff --git a/public/themes/catppuccinMacchiato.css b/public/themes/catppuccinMacchiato.css index 9d1ba4f..5daee45 100644 --- a/public/themes/catppuccinMacchiato.css +++ b/public/themes/catppuccinMacchiato.css @@ -2,21 +2,22 @@ :root { --background-primary: #24273a !important; - --background-lighter: #181926 !important; - --navbar-color: #181926 !important; + --background-lighter: #1e2030 !important; + --navbar-color: #1e2030 !important; --navbar-height: 60px !important; - --navbar-text-color: #c6a0f6 !important; + --navbar-text-color: #cad3f5 !important; --navbar-link-color: #8aadf4 !important; --navbar-link-hover-color: #c6a0f6 !important; --navbar-font: "Roboto" !important; --input-text-color: #cad3f5 !important; - --input-placeholder-color: #b8c0e0 !important; - --input-background-color: #1e2030 !important; - --input-border-color: #c6a0f6 !important; + --input-placeholder-color: #a5adcb !important; + --input-background-color: #181926 !important; + --input-border-color: color-mix(in srgb, #181926, #c6a0f6 50%) !important; --input-border-size: 1.3px !important; --navbar-logo-filter: none !important; --dropdown-option-hover-color: #181926 !important; - --tab-color: #363a4f; + --tab-color: #363a4f !important; + --active-color: #c6a0f6 !important; } .font-inter { diff --git a/public/themes/catppuccinMocha.css b/public/themes/catppuccinMocha.css index 1cb8a26..ec96a5a 100644 --- a/public/themes/catppuccinMocha.css +++ b/public/themes/catppuccinMocha.css @@ -2,21 +2,22 @@ :root { --background-primary: #1e1e2e !important; - --background-lighter: #11111b !important; - --navbar-color: #11111b !important; + --background-lighter: #181825 !important; + --navbar-color: #181825 !important; --navbar-height: 60px !important; - --navbar-text-color: #cba6f7 !important; + --navbar-text-color: #cdd6f4 !important; --navbar-link-color: #89b4fa !important; --navbar-link-hover-color: #cba6f7 !important; --navbar-font: "Roboto" !important; --input-text-color: #cdd6f4 !important; - --input-placeholder-color: #bac2de !important; - --input-background-color: #181825 !important; - --input-border-color: #cba6f7 !important; + --input-placeholder-color: #a6adc8 !important; + --input-background-color: #11111b !important; + --input-border-color: color-mix(in srgb, #11111b, #cba6f7 50%) !important; --input-border-size: 1.3px !important; --navbar-logo-filter: none !important; --dropdown-option-hover-color: #11111b !important; --tab-color: #313244 !important; + --active-color: #cba6f7 !important; } .font-inter { diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 8530f47..bfa67f0 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -70,7 +70,7 @@ export function Home() { type="text" value={inputValue} onChange={handleInputChange} - className={`font-roboto h-14 rounded-t-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none ${ + className={`font-roboto h-14 rounded-t-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none text-input-text ${ isFocused && inputValue.trim() !== "" ? "w-10/12 md:w-3/12" : "w-80 rounded-2xl" diff --git a/src/pages/Settings/Dropdown.tsx b/src/pages/Settings/Dropdown.tsx index 52fcddb..e018645 100644 --- a/src/pages/Settings/Dropdown.tsx +++ b/src/pages/Settings/Dropdown.tsx @@ -36,10 +36,10 @@ const Dropdown = ({ >
-
+
{options.find((o) => o.id === choice)?.label}
-
+
@@ -48,7 +48,7 @@ const Dropdown = ({ {options.map((option, index) => (
{ diff --git a/src/pages/discord.tsx b/src/pages/discord.tsx index bdb7894..cc40ecd 100644 --- a/src/pages/discord.tsx +++ b/src/pages/discord.tsx @@ -15,13 +15,13 @@ export function DiscordPage() {
-

+

{t("discord.title")}

- {t("discord.sub")} + {t("discord.sub")}
- @@ -29,7 +29,7 @@ export function DiscordPage() { href="/~/uv/https%3A%2F%2Fdiscord.com%2Finvite%2Funblocker" className="p-6" > - From 85b933e3396c13396f26a7f0d2e524622408cc56 Mon Sep 17 00:00:00 2001 From: Toshit Chawda Date: Tue, 2 Jan 2024 13:02:09 -0800 Subject: [PATCH 2/2] remove generator script --- gen_ctp_palette.sh | 111 ------------------------------- public/themes/catppuccin.gen.css | 30 --------- 2 files changed, 141 deletions(-) delete mode 100644 gen_ctp_palette.sh delete mode 100644 public/themes/catppuccin.gen.css diff --git a/gen_ctp_palette.sh b/gen_ctp_palette.sh deleted file mode 100644 index 83c8496..0000000 --- a/gen_ctp_palette.sh +++ /dev/null @@ -1,111 +0,0 @@ -if [[ $1 == "latte" ]]; then - export ROSEWATER="#dc8a78" - export FLAMINGO="#dd7878" - export PINK="#ea76cb" - export MAUVE="#8839ef" - export RED="#d20f39" - export MAROON="#e64553" - export PEACH="#fe640b" - export YELLOW="#df8e1d" - export GREEN="#40a02b" - export TEAL="#179299" - export SKY="#04a5e5" - export SAPPHIRE="#209fb5" - export BLUE="#1e66f5" - export LAVENDER="#7287fd" - export TEXT="#4c4f69" - export SUBTEXT1="#5c5f77" - export SUBTEXT0="#6c6f85" - export OVERLAY2="#7c7f93" - export OVERLAY1="#8c8fa1" - export OVERLAY0="#9ca0b0" - export SURFACE2="#acb0be" - export SURFACE1="#bcc0cc" - export SURFACE0="#ccd0da" - export BASE="#eff1f5" - export MANTLE="#e6e9ef" - export CRUST="#dce0e8" -elif [[ $1 == "frappe" ]]; then - export ROSEWATER="#f2d5cf" - export FLAMINGO="#eebebe" - export PINK="#f4b8e4" - export MAUVE="#ca9ee6" - export RED="#e78284" - export MAROON="#ea999c" - export PEACH="#ef9f76" - export YELLOW="#e5c890" - export GREEN="#a6d189" - export TEAL="#81c8be" - export SKY="#99d1db" - export SAPPHIRE="#85c1dc" - export BLUE="#8caaee" - export LAVENDER="#babbf1" - export TEXT="#c6d0f5" - export SUBTEXT1="#b5bfe2" - export SUBTEXT0="#a5adce" - export OVERLAY2="#949cbb" - export OVERLAY1="#838ba7" - export OVERLAY0="#737994" - export SURFACE2="#626880" - export SURFACE1="#51576d" - export SURFACE0="#414559" - export BASE="#303446" - export MANTLE="#292c3c" - export CRUST="#232634" -elif [[ $1 == "macchiato" ]]; then - export ROSEWATER="#f4dbd6" - export FLAMINGO="#f0c6c6" - export PINK="#f5bde6" - export MAUVE="#c6a0f6" - export RED="#ed8796" - export MAROON="#ee99a0" - export PEACH="#f5a97f" - export YELLOW="#eed49f" - export GREEN="#a6da95" - export TEAL="#8bd5ca" - export SKY="#91d7e3" - export SAPPHIRE="#7dc4e4" - export BLUE="#8aadf4" - export LAVENDER="#b7bdf8" - export TEXT="#cad3f5" - export SUBTEXT1="#b8c0e0" - export SUBTEXT0="#a5adcb" - export OVERLAY2="#939ab7" - export OVERLAY1="#8087a2" - export OVERLAY0="#6e738d" - export SURFACE2="#5b6078" - export SURFACE1="#494d64" - export SURFACE0="#363a4f" - export BASE="#24273a" - export MANTLE="#1e2030" - export CRUST="#181926" -else - export ROSEWATER="#f5e0dc" - export FLAMINGO="#f2cdcd" - export PINK="#f5c2e7" - export MAUVE="#cba6f7" - export RED="#f38ba8" - export MAROON="#eba0ac" - export PEACH="#fab387" - export YELLOW="#f9e2af" - export GREEN="#a6e3a1" - export TEAL="#94e2d5" - export SKY="#89dceb" - export SAPPHIRE="#74c7ec" - export BLUE="#89b4fa" - export LAVENDER="#b4befe" - export TEXT="#cdd6f4" - export SUBTEXT1="#bac2de" - export SUBTEXT0="#a6adc8" - export OVERLAY2="#9399b2" - export OVERLAY1="#7f849c" - export OVERLAY0="#6c7086" - export SURFACE2="#585b70" - export SURFACE1="#45475a" - export SURFACE0="#313244" - export BASE="#1e1e2e" - export MANTLE="#181825" - export CRUST="#11111b" -fi - -cat $2 | envsubst diff --git a/public/themes/catppuccin.gen.css b/public/themes/catppuccin.gen.css deleted file mode 100644 index 9560c78..0000000 --- a/public/themes/catppuccin.gen.css +++ /dev/null @@ -1,30 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); - -:root { - --background-primary: $BASE !important; - --background-lighter: $MANTLE !important; - --navbar-color: $MANTLE !important; - --navbar-height: 60px !important; - --navbar-text-color: $TEXT !important; - --navbar-link-color: $BLUE !important; - --navbar-link-hover-color: $MAUVE !important; - --navbar-font: "Roboto" !important; - --input-text-color: $TEXT !important; - --input-placeholder-color: $SUBTEXT0 !important; - --input-background-color: $CRUST !important; - --input-border-color: color-mix(in srgb, $CRUST, $MAUVE 50%) !important; - --input-border-size: 1.3px !important; - --navbar-logo-filter: none !important; - --dropdown-option-hover-color: $CRUST !important; - --tab-color: $SURFACE0 !important; - --active-color: $MAUVE !important; -} - -.font-inter { - font-family: "Inter", sans-serif; - font-weight: 300; -} - -.font-roboto { - font-family: "Roboto"; -}