From dab02575ce5056d6ed7ef12adf3129e32ca4ef33 Mon Sep 17 00:00:00 2001 From: Rui Jiang Date: Mon, 16 Dec 2024 16:12:34 -0600 Subject: [PATCH] added catppuccin latte and frappe --- theme/flavors/catppuccin-frappe.theme.css | 87 +++++++++++++++++++++++ theme/flavors/catppuccin-latte.theme.css | 87 +++++++++++++++++++++++ 2 files changed, 174 insertions(+) create mode 100644 theme/flavors/catppuccin-frappe.theme.css create mode 100644 theme/flavors/catppuccin-latte.theme.css diff --git a/theme/flavors/catppuccin-frappe.theme.css b/theme/flavors/catppuccin-frappe.theme.css new file mode 100644 index 0000000..1888bfd --- /dev/null +++ b/theme/flavors/catppuccin-frappe.theme.css @@ -0,0 +1,87 @@ +/** + * @name system24 (catppuccin frappe) + * @description A tui-style discord theme. Based on the catppuccin frappe color palette. + * @author refact0r, ruiiiijiiiiang + * @version 1.0.0 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/system24 + * @source https://github.com/refact0r/system24/blob/master/flavors/catppuccin-frappe.theme.css + * @authorId 508863359777505290 + * @authorLink https://www.refact0r.dev +*/ + +/* import theme modules */ +@import url('https://refact0r.github.io/system24/src/main.css'); /* main theme css. DO NOT REMOVE */ +@import url('https://refact0r.github.io/system24/src/unrounding.css'); /* gets rid of all rounded corners. remove if you want rounded corners. */ + +/* customize things here */ +:root { + --font: 'DM Mono'; /* UI font name. it must be installed on your system. */ + letter-spacing: -0.05ch; /* decreases letter spacing for better readability. */ + font-weight: 300; /* UI font weight. */ + --label-font-weight: 500; /* font weight for panel labels. */ + --corner-text: 'catppuccin24'; /* custom text to display in the corner. only works on windows. */ + --pad: 16px; /* padding between panels. */ + --txt-pad: 10px; /* padding inside panels to prevent labels from clipping */ + --panel-roundness: 0px; /* corner roundness of panels. ONLY WORKS IF unrounding.css IS REMOVED (see above). */ + + /* background colors */ + --bg-0: oklch(32.91% 0.0324 274.76); /* main background color. */ /* Catppuccin Base */ + --bg-1: oklch(29.73% 0.0294 276.21); /* background color for secondary elements like code blocks, embeds, etc. */ /* Catppuccin Mantle */ + --bg-2: oklch(39.49% 0.0342 275.9); /* color of neutral buttons. */ /* Catppuccin Surface 0 */ + --bg-3: oklch(46.01% 0.0367 272.97); /* color of neutral buttons when hovered. */ /* Catppuccin Surface 1 */ + + /* state modifiers */ + --hover: color-mix(in oklch, var(--txt-3), transparent 80%); /* color of hovered elements. */ + --active: color-mix(in oklch, var(--txt-3), transparent 60%); /* color of elements when clicked. */ + --selected: var(--active); /* color of selected elements. */ + + /* text colors */ + --txt-dark: var(--bg-0); /* color of dark text on colored backgrounds. */ + --txt-link: var(--cyan); /* color of links. */ + --txt-0: oklch(96.19% 0.0526 273.35); /* color of bright/white text. */ /* +10% lightness from Text */ + --txt-1: oklch(86.19% 0.0526 273.35); /* main text color. */ /* Catppuccin Text */ + --txt-2: oklch(69.7% 0.0464 273.78); /* color of secondary text like channel list. */ /* Catppuccin Overlay 2 */ + --txt-3: oklch(52.11% 0.0386 274); /* color of muted text. */ /* Catppuccin Surface 2 */ + + /* accent colors */ + --acc-0: var(--purple); /* main accent color. */ + --acc-1: var(--purple-1); /* color of accent buttons when hovered. */ + --acc-2: var(--purple-2); /* color of accent buttons when clicked. */ + + /* borders */ + --border-width: 2px; /* panel border thickness. */ + --border-color: var(--bg-2); /* panel border color. */ + --border-hover-color: var(--acc-0); /* panel border color when hovered. */ + --border-transition: 0.2s ease; /* panel border transition. */ + + /* status dot colors */ + --online-dot: var(--green); /* color of online dot. */ + --dnd-dot: var(--pink); /* color of do not disturb dot. */ + --idle-dot: var(--yellow); /* color of idle dot. */ + --streaming-dot: var(--purple); /* color of streaming dot. */ + + /* mention/ping and message colors */ + --mention-txt: var(--acc-0); /* color of mention text. */ + --mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%); /* background highlight of mention text. */ + --mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%); /* overlay color of messages that mention you. */ + --mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%); /* overlay color of messages that mention you when hovered. */ + --reply-overlay: var(--active); /* overlay color of message you are replying to. */ + --reply-hover-overlay: var(--hover); /* overlay color of message you are replying to when hovered. */ + + /* color shades */ + --pink: oklch(71.71% 0.1244 19.39); /* Catppuccin Red */ + --pink-1: oklch(61.71% 0.1244 19.39); /* -10% Lightness from Red */ + --pink-2: oklch(51.71% 0.1244 19.39); /* -20% Lightness from Red */ + --purple: oklch(76.48% 0.1108 311.74); /* Catppuccin Mauve */ + --purple-1: oklch(66.48% 0.1108 311.74); /* -10% Lightness from Mauve */ + --purple-2: oklch(56.48% 0.1108 311.74); /* -20% Lightness from Mauve */ + --cyan: oklch(77.96% 0.0727 227.88); /* Catppuccin Sapphire */ + --yellow: oklch(84.43% 0.0795 83.47); /* Catppuccin Yellow */ + --green: oklch(81.24% 0.1071 133.39); /* Catppuccin Green */ + --green-1: oklch(71.24% 0.1071 133.39); /* -10% Lightness from Green */ + --green-2: oklch(61.24% 0.1071 133.39); /* -20% Lightness from Green */ + --lavender: oklch(80.99% 0.0759 283.74); /* Catppuccin Lavender */ + --lavender-1: oklch(70.99% 0.0759 283.74); /* -10% Lightness from Lavender */ + --lavender-2: oklch(60.99% 0.0759 283.74); /* -20% Lightness from Lavender */ +} diff --git a/theme/flavors/catppuccin-latte.theme.css b/theme/flavors/catppuccin-latte.theme.css new file mode 100644 index 0000000..9891d40 --- /dev/null +++ b/theme/flavors/catppuccin-latte.theme.css @@ -0,0 +1,87 @@ +/** + * @name system24 (catppuccin latte) + * @description A tui-style discord theme. Based on the catppuccin latte color palette. + * @author refact0r, ruiiiijiiiiang + * @version 1.0.0 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/system24 + * @source https://github.com/refact0r/system24/blob/master/flavors/catppuccin-latte.theme.css + * @authorId 508863359777505290 + * @authorLink https://www.refact0r.dev +*/ + +/* import theme modules */ +@import url('https://refact0r.github.io/system24/src/main.css'); /* main theme css. DO NOT REMOVE */ +@import url('https://refact0r.github.io/system24/src/unrounding.css'); /* gets rid of all rounded corners. remove if you want rounded corners. */ + +/* customize things here */ +:root { + --font: 'DM Mono'; /* UI font name. it must be installed on your system. */ + letter-spacing: -0.05ch; /* decreases letter spacing for better readability. */ + font-weight: 300; /* UI font weight. */ + --label-font-weight: 500; /* font weight for panel labels. */ + --corner-text: 'catppuccin24'; /* custom text to display in the corner. only works on windows. */ + --pad: 16px; /* padding between panels. */ + --txt-pad: 10px; /* padding inside panels to prevent labels from clipping */ + --panel-roundness: 0px; /* corner roundness of panels. ONLY WORKS IF unrounding.css IS REMOVED (see above). */ + + /* background colors */ + --bg-0: oklch(95.78% 0.0058 264.53); /* main background color. */ /* Catppuccin Base */ + --bg-1: oklch(93.35% 0.0087 264.52); /* background color for secondary elements like code blocks, embeds, etc. */ /* Catppuccin Mantle */ + --bg-2: oklch(85.75% 0.0145 268.48); /* color of neutral buttons. */ /* Catppuccin Surface 0 */ + --bg-3: oklch(80.83% 0.0174 271.2); /* color of neutral buttons when hovered. */ /* Catppuccin Surface 1 */ + + /* state modifiers */ + --hover: color-mix(in oklch, var(--txt-3), transparent 80%); /* color of hovered elements. */ + --active: color-mix(in oklch, var(--txt-3), transparent 60%); /* color of elements when clicked. */ + --selected: var(--active); /* color of selected elements. */ + + /* text colors */ + --txt-dark: var(--bg-0); /* color of dark text on colored backgrounds. */ + --txt-link: var(--cyan); /* color of links. */ + --txt-0: oklch(53.55% 0.043 279.33); /* color of bright/white text. */ /* +10% lightness from Text */ + --txt-1: oklch(43.55% 0.043 279.33); /* main text color. */ /* Catppuccin Text */ + --txt-2: oklch(60.09% 0.0305 278.69); /* color of secondary text like channel list. */ /* Catppuccin Overlay 2 */ + --txt-3: oklch(75.84% 0.0205 273.15); /* color of muted text. */ /* Catppuccin Surface 2 */ + + /* accent colors */ + --acc-0: var(--purple); /* main accent color. */ + --acc-1: var(--purple-1); /* color of accent buttons when hovered. */ + --acc-2: var(--purple-2); /* color of accent buttons when clicked. */ + + /* borders */ + --border-width: 2px; /* panel border thickness. */ + --border-color: var(--bg-2); /* panel border color. */ + --border-hover-color: var(--acc-0); /* panel border color when hovered. */ + --border-transition: 0.2s ease; /* panel border transition. */ + + /* status dot colors */ + --online-dot: var(--green); /* color of online dot. */ + --dnd-dot: var(--pink); /* color of do not disturb dot. */ + --idle-dot: var(--yellow); /* color of idle dot. */ + --streaming-dot: var(--purple); /* color of streaming dot. */ + + /* mention/ping and message colors */ + --mention-txt: var(--acc-0); /* color of mention text. */ + --mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%); /* background highlight of mention text. */ + --mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%); /* overlay color of messages that mention you. */ + --mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%); /* overlay color of messages that mention you when hovered. */ + --reply-overlay: var(--active); /* overlay color of message you are replying to. */ + --reply-hover-overlay: var(--hover); /* overlay color of message you are replying to when hovered. */ + + /* color shades */ + --pink: oklch(55.05% 0.2155 19.81); /* Catppuccin Red */ + --pink-1: oklch(45.05% 0.2155 19.81); /* -10% Lightness from Red */ + --pink-2: oklch(35.05% 0.2155 19.81); /* -20% Lightness from Red */ + --purple: oklch(55.47% 0.2503 297.02); /* Catppuccin Mauve */ + --purple-1: oklch(45.47% 0.2503 297.02); /* -10% Lightness from Mauve */ + --purple-2: oklch(35.47% 0.2503 297.02); /* -20% Lightness from Mauve */ + --cyan: oklch(64.77% 0.1068 212.89); /* Catppuccin Sapphire */ + --yellow: oklch(71.4% 0.1494 67.78); /* Catppuccin Yellow */ + --green: oklch(62.5% 0.1772 140.44); /* Catppuccin Green */ + --green-1: oklch(52.5% 0.1772 140.44); /* -10% Lightness from Green */ + --green-2: oklch(42.5% 0.1772 140.44); /* -20% Lightness from Green */ + --lavender: oklch(66.38% 0.1751 273.13); /* Catppuccin Lavender */ + --lavender-1: oklch(56.38% 0.1751 273.13); /* -10% Lightness from Lavender */ + --lavender-2: oklch(46.38% 0.1751 273.13); /* -20% Lightness from Lavender */ +}