RevelaNetwork/Revelav3
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix catppuccin theme

Browse source
This commit is contained in:
Toshit Chawda 2024-01-02 12:59:17 -08:00
parent 59bad794e5
commit 61da89c1a9
No known key found for this signature in database
GPG key ID: 91480ED99E2B3D9D
9 changed files with 192 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
gen_ctp_palette.sh Normal file
View file

@ -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

30
public/themes/catppuccin.gen.css Normal file
View file

@ -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";
}

13
public/themes/catppuccinFrappe.css
View file

@ -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 {

42
public/themes/catppuccinLatte.css
View file

@ -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
}
font-family: "Roboto";
}

15
public/themes/catppuccinMacchiato.css
View file

@ -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 {

13
public/themes/catppuccinMocha.css
View file

@ -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 {

2
src/pages/Home.tsx
View file

@ -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"

6
src/pages/Settings/Dropdown.tsx
View file

@ -36,10 +36,10 @@ const Dropdown = ({
>
<div className="flex h-full w-full select-none flex-row items-center">
<div className="h-full w-1/4"></div>
<div className="flex w-2/4 flex-col items-center">
<div className="flex w-2/4 flex-col items-center text-input-text">
{options.find((o) => o.id === choice)?.label}
</div>
<div className="flex w-1/4 flex-col items-center">
<div className="flex w-1/4 flex-col items-center text-input-text">
<FaAngleDown />
</div>
</div>
@ -48,7 +48,7 @@ const Dropdown = ({
{options.map((option, index) => (
<div
key={option.id}
className={`border border-input-border-color bg-input p-2 hover:bg-dropdown-option-hover-color ${
className={`border border-input-border-color bg-input p-2 hover:bg-dropdown-option-hover-color text-input-text ${
index === options.length - 1 ? "rounded-b-2xl" : ""
}`}
onClick={() => {

8
src/pages/discord.tsx
View file

@ -15,13 +15,13 @@ export function DiscordPage() {
<div className="flex h-full flex-col items-center justify-center">
<img src="/services.png" className="h-72 w-72"></img>
<div className="flex flex-col items-center p-6">
<p className="font-roboto text-4xl font-bold">
<p className="font-roboto text-4xl font-bold text-input-text">
{t("discord.title")}
</p>
<span className="font-roboto text-3xl">{t("discord.sub")}</span>
<span className="font-roboto text-3xl text-input-text">{t("discord.sub")}</span>
</div>
<a href="https://discord.gg/unblocker" className="p-6">
<button className="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
<button className="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none text-input-text">
{t("discord.button1")}
</button>
</a>
@ -29,7 +29,7 @@ export function DiscordPage() {
href="/~/uv/https%3A%2F%2Fdiscord.com%2Finvite%2Funblocker"
className="p-6"
>
<button className="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
<button className="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none text-input-text">
{t("discord.button2")}
</button>
</a>