Skip to content

Commit

Permalink
fix: Oddly themed custom user profile cards (#333)
Browse files Browse the repository at this point in the history 
* fix: Oddly themed custom user profile cards

* fix: at least include this for latte
  • Loading branch information
@ToxicAven
ToxicAven authored Nov 9, 2024
1 parent 5419994 commit a5e483b
Show file tree
Hide file tree
Showing 5 changed files with 385 additions and 318 deletions.
5 changes: 5 additions & 0 deletions src/catppuccin-frappe.theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@

$brand: $blue;

:root .theme-light {
@import "@catppuccin/palette/scss/latte";
@import "components/lightfix";
}

@import "theme";
.theme-dark {
@include theme.highlights("frappe", "hex");
Expand Down
355 changes: 37 additions & 318 deletions src/catppuccin-latte.theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,337 +14,56 @@

$brand: $blue;

// for dark sidebars :clueless:
:root .theme-dark {
@import "@catppuccin/palette/scss/mocha";
@import "components/lightfix";

// weighted brand colors
--brand-experiment: #{$brand};
--brand-experiment-100: #{lighten($brand, math.div(90%, 2))};
--brand-experiment-130: #{lighten($brand, math.div(85%, 2))};
--brand-experiment-160: #{lighten($brand, math.div(80%, 2))};
--brand-experiment-200: #{lighten($brand, math.div(75%, 2))};
--brand-experiment-230: #{lighten($brand, math.div(70%, 2))};
--brand-experiment-260: #{lighten($brand, math.div(65%, 2))};
--brand-experiment-300: #{lighten($brand, math.div(60%, 2))};
--brand-experiment-330: #{lighten($brand, math.div(50%, 2))};
--brand-experiment-360: #{lighten($brand, math.div(40%, 2))};
--brand-experiment-400: #{lighten($brand, math.div(30%, 2))};
--brand-experiment-430: #{lighten($brand, math.div(20%, 2))};
--brand-experiment-460: #{lighten($brand, math.div(10%, 2))};
--brand-experiment-500: #{$brand};
--brand-experiment-530: #{darken($brand, math.div(10%, 2))};
--brand-experiment-560: #{darken($brand, math.div(20%, 2))};
--brand-experiment-600: #{darken($brand, math.div(30%, 2))};
--brand-experiment-630: #{darken($brand, math.div(40%, 2))};
--brand-experiment-660: #{darken($brand, math.div(50%, 2))};
--brand-experiment-700: #{darken($brand, math.div(60%, 2))};
--brand-experiment-730: #{darken($brand, math.div(65%, 2))};
--brand-experiment-760: #{darken($brand, math.div(70%, 2))};
--brand-experiment-800: #{darken($brand, math.div(75%, 2))};
--brand-experiment-830: #{darken($brand, math.div(80%, 2))};
--brand-experiment-860: #{darken($brand, math.div(85%, 2))};
--brand-experiment-900: #{darken($brand, math.div(90%, 2))};
// similar to other brand colors, except alpha only
--brand-experiment-05a: #{adjust-color($brand, $alpha: -0.95)};
--brand-experiment-10a: #{adjust-color($brand, $alpha: -0.9)};
--brand-experiment-15a: #{adjust-color($brand, $alpha: -0.85)};
--brand-experiment-20a: #{adjust-color($brand, $alpha: -0.8)};
--brand-experiment-25a: #{adjust-color($brand, $alpha: -0.75)};
--brand-experiment-30a: #{adjust-color($brand, $alpha: -0.7)};
--brand-experiment-35a: #{adjust-color($brand, $alpha: -0.65)};
--brand-experiment-40a: #{adjust-color($brand, $alpha: -0.6)};
--brand-experiment-45a: #{adjust-color($brand, $alpha: -0.55)};
--brand-experiment-50a: #{adjust-color($brand, $alpha: -0.5)};
--brand-experiment-55a: #{adjust-color($brand, $alpha: -0.45)};
--brand-experiment-60a: #{adjust-color($brand, $alpha: -0.4)};
--brand-experiment-65a: #{adjust-color($brand, $alpha: -0.35)};
--brand-experiment-70a: #{adjust-color($brand, $alpha: -0.3)};
--brand-experiment-75a: #{adjust-color($brand, $alpha: -0.25)};
--brand-experiment-80a: #{adjust-color($brand, $alpha: -0.2)};
--brand-experiment-85a: #{adjust-color($brand, $alpha: -0.15)};
--brand-experiment-90a: #{adjust-color($brand, $alpha: -0.1)};
--brand-experiment-95a: #{adjust-color($brand, $alpha: -0.05)};
nav[class*="guilds-"].theme-dark {
@import "@catppuccin/palette/scss/mocha";

--header-primary: #{$text};
--header-secondary: #{$subtext0};
// server icons
foreignObject > div[data-list-item-id^="guildsnav_"] {
background-color: lighten($base, 2%);

--text-normal: #{$text};
--text-muted: #{$subtext0};
--text-link: #{$blue};
--text-link-low-saturation: #{$sapphire};
--text-positive: #{$green};
--text-warning: #{$yellow};
--text-danger: #{$red};
--text-brand: #{$brand};

--background-primary: #{$base};
--background-secondary: #{$mantle};
--background-secondary-alt: #{darken($mantle, 2%)};
--background-tertiary: #{$crust};
--background-accent: #{$brand};
--background-floating: #{darken($crust, 2%)};
--background-nested-floating: #{$mantle};
--background-mobile-primary: #{$base};
--background-mobile-secondary: #{$mantle};

--chat-background: #{$base};
--chat-border: #{$crust};
--chat-input-container-background: #{$base};

--background-modifier-hover: #{adjust-color($text, $alpha: -0.85)};
--background-modifier-selected: #{adjust-color($text, $alpha: -0.8)};
--background-modifier-accent: #{adjust-color($text, $alpha: -0.74)};
--background-modifier-active: #{adjust-color($text, $alpha: -0.83)};

--info-positive-background: #{adjust-color($green, $alpha: -0.85)};
--info-positive-foreground: #{$green};
--info-positive-text: #{$text};

--info-warning-background: #{adjust-color($yellow, $alpha: -0.85)};
--info-warning-foreground: #{$yellow};
--info-warning-text: #{$text};

--info-danger-background: #{adjust-color($red, $alpha: -0.85)};
--info-danger-foreground: #{$red};
--info-danger-text: #{$text};

--info-help-background: #{adjust-color($sky, $alpha: -0.85)};
--info-help-foreground: #{$sky};
--info-help-text: #{$text};

--status-positive-background: #{$green};
--status-positive-text: #{$base};

--status-warning-background: #{$yellow};
--status-warning-text: #{$base};

--status-danger-background: #{$red};
--status-danger-text: #{$base};

--status-danger: #{$red};
--status-positive: #{$green};
--status-warning: #{$yellow};

--button-danger-background: #{$red};
--button-danger-background-hover: #{darken($red, math.div(10%, 2))};
--button-danger-background-active: #{darken($brand, math.div(15%, 2))};
--button-danger-background-disabled: #{$red};

--button-positive-background: #{$green};
--button-positive-background-hover: #{darken($green, math.div(10%, 2))};
--button-positive-background-active: #{darken($green, math.div(15%, 2))};
--button-positive-background-disabled: #{$green};

--button-secondary-background: #{$surface1};
--button-secondary-background-hover: #{darken($surface1, math.div(10%, 2))};
--button-secondary-background-active: #{darken($surface1, math.div(10%, 2))};
--button-secondary-background-disabled: #{$surface1};

--button-outline-danger-text: #{$text};
--button-outline-danger-border: #{$red};
--button-outline-danger-background: transparent;
--button-outline-danger-background-hover: #{darken($red, math.div(5%, 2))};
--button-outline-danger-text-hover: #{$base};
--button-outline-danger-border-hover: #{darken($red, math.div(5%, 2))};
--button-outline-danger-background-active: #{darken($red, math.div(10%, 2))};
--button-outline-danger-text-active: #{$base};
--button-outline-danger-border-active: #{darken($red, math.div(5%, 2))};

--button-outline-positive-text: #{$text};
--button-outline-positive-border: #{$green};
--button-outline-positive-background: transparent;
--button-outline-positive-background-hover: #{darken($green, math.div(5%, 2))};
--button-outline-positive-text-hover: #{$base};
--button-outline-positive-border-hover: #{darken($green, math.div(5%, 2))};
--button-outline-positive-background-active: #{darken(
$green,
math.div(10%, 2)
)};
--button-outline-positive-text-active: #{$base};
--button-outline-positive-border-active: #{darken($green, math.div(5%, 2))};

--button-outline-brand-text: #{$text};
--button-outline-brand-border: #{$brand};
--button-outline-brand-background: transparent;
--button-outline-brand-background-hover: #{darken($brand, math.div(5%, 2))};
--button-outline-brand-text-hover: #{$base};
--button-outline-brand-border-hover: #{darken($brand, math.div(5%, 2))};
--button-outline-brand-background-active: #{darken($brand, math.div(10%, 2))};
--button-outline-brand-text-active: #{$base};
--button-outline-brand-border-active: #{darken($brand, math.div(5%, 2))};

--button-outline-primary-text: #{$text};
--button-outline-primary-border: #{$surface2};
--button-outline-primary-background: transparent;
--button-outline-primary-background-hover: #{darken(
$surface2,
math.div(5%, 2)
)};
--button-outline-primary-text-hover: #{$base};
--button-outline-primary-border-hover: #{darken($surface2, math.div(5%, 2))};
--button-outline-primary-background-active: #{darken(
$surface2,
math.div(10%, 2)
)};
--button-outline-primary-text-active: #{$base};
--button-outline-primary-border-active: #{darken($surface2, math.div(5%, 2))};

--modal-background: #{$base};
--modal-footer-background: #{$crust};

--scrollbar-thin-thumb: #{$brand};
--scrollbar-thin-track: transparent;
--scrollbar-auto-thumb: #{$brand};
--scrollbar-auto-track: #{$crust};

--scrollbar-auto-scrollbar-color-thumb: #{$brand};
--scrollbar-auto-scrollbar-color-track: #{$crust};

--input-background: #{$crust};
--input-placeholder-text: #{$subtext1};

--logo-primary: #{$text};

--control-brand-foreground: #{$brand};
--control-brand-foreground-new: #{$brand};

--background-mentioned: #{adjust-color($yellow, $alpha: -0.9)};
--background-mentioned-hover: #{adjust-color($yellow, $alpha: -0.92)};
--background-message-hover: #{adjust-color($crust, $alpha: -0.93)};
--background-message-automod: #{adjust-color($rosewater, $alpha: -0.95)};
--background-message-automod-hover: #{adjust-color($rosewater, $alpha: -0.9)};
--background-message-highlight: #{adjust-color($brand, $alpha: -0.9)};
--background-message-highlight-hover: #{adjust-color($brand, $alpha: -0.92)};

--channels-default: #{darken($subtext0, 5%)};
--channel-icon: #{darken($subtext0, 5%)};
--channel-text-area-placeholder: #{adjust-color($text, $alpha: -0.5)};
--channeltextarea-background: #{$mantle};

--activity-card-background: #{$crust};

--textbox-markdown-syntax: #{$overlay0};

--spoiler-revealed-background: #{$surface0};
--spoiler-hidden-background: #{$surface2};

--android-navigation-bar-background: #{$crust};
--android-ripple: #{adjust-color($crust, $alpha: -0.7)};

--deprecated-card-bg: #{adjust-color($crust, $alpha: -0.4)};
--deprecated-card-editable-bg: #{adjust-color($crust, $alpha: -0.7)};

--deprecated-store-bg: #{$base};
--deprecated-quickswitcher-input-background: #{darken(
$surface2,
math.div(10%, 2)
)};
--deprecated-quickswitcher-input-placeholder: #{adjust-color(
$crust,
$alpha: -0.7
)};
--deprecated-text-input-bg: #{$crust};
--deprecated-text-input-border: #{adjust-color($crust, $alpha: -0.7)};
--deprecated-text-input-border-hover: #{darken($crust, math.div(10%, 2))};
--deprecated-text-input-border-disabled: #{$mantle};
--deprecated-text-input-prefix: #{$subtext0};

--focus-primary: #{$brand};

--interactive-normal: #{$text};
--interactive-muted: #{adjust-color($text, $alpha: -0.7)};
--interactive-hover: #{$text};
--interactive-active: #{$text};

// "spine" svgs before threads
svg[class^="spine"] {
color: $surface2;
}

// rainbow threads
ul[aria-label$=" threads"] > li:nth-child(1n) {
--channels-default: #{mix($red, $text, 30%)};
--interactive-hover: #{$red};
--interactive-active: #{$red};
}

ul[aria-label$=" threads"] > li:nth-child(2n) {
--channels-default: #{mix($peach, $text, 30%)};
--interactive-hover: #{$peach};
--interactive-active: #{$peach};
}

ul[aria-label$=" threads"] > li:nth-child(3n) {
--channels-default: #{mix($yellow, $text, 30%)};
--interactive-hover: #{$yellow};
--interactive-active: #{$yellow};
}

ul[aria-label$=" threads"] > li:nth-child(4n) {
--channels-default: #{mix($green, $text, 30%)};
--interactive-hover: #{$green};
--interactive-active: #{$green};
}

ul[aria-label$=" threads"] > li:nth-child(5n) {
--channels-default: #{mix($blue, $text, 30%)};
--interactive-hover: #{$sapphire};
--interactive-active: #{$sapphire};
}

ul[aria-label$=" threads"] > li:nth-child(6n) {
--channels-default: #{mix($mauve, $text, 30%)};
--interactive-hover: #{$mauve};
--interactive-active: #{$mauve};
}
}

nav[class*="guilds-"].theme-dark {
@import "@catppuccin/palette/scss/mocha";

// server icons
foreignObject > div[data-list-item-id^="guildsnav_"] {
background-color: lighten($base, 2%);

&:hover,
&[class*="selected"] {
> div[class^="childWrapper"] {
color: $crust;
font-weight: 600;
&:hover,
&[class*="selected"] {
> div[class^="childWrapper"] {
color: $crust;
font-weight: 600;
}
}
}
}

// lightens home nav bg
div[data-list-item-id="guildsnav___home"] {
--background-primary: #{lighten($base, 3%)};
}
// lightens home nav bg
div[data-list-item-id="guildsnav___home"] {
--background-primary: #{lighten($base, 3%)};
}

// lightens folder wrapper bg
span[class^="expandedFolderBackground"] {
background-color: lighten($base, 3%);
}
div[class^="folder"][class*="hover-"] {
background-color: lighten($base, 8%);
}
// lightens folder wrapper bg
span[class^="expandedFolderBackground"] {
background-color: lighten($base, 3%);
}
div[class^="folder"][class*="hover-"] {
background-color: lighten($base, 8%);
}

// create server/discovery
div[data-list-item-id="guildsnav___create-join-button"] svg > path,
div[data-list-item-id="guildsnav___guild-discover-button"] svg > path {
fill: $green;
}
// create server/discovery
div[data-list-item-id="guildsnav___create-join-button"] svg > path,
div[data-list-item-id="guildsnav___guild-discover-button"] svg > path {
fill: $green;
}

// server list icons
div[class^="upperBadge"] {
> div[class^="iconBadge"] {
path {
color: $base;
// server list icons
div[class^="upperBadge"] {
> div[class^="iconBadge"] {
path {
color: $base;
}
}
}

div[class*="participating-"] {
background: $green;
div[class*="participating-"] {
background: $green;
}
}
}
}
Expand Down
5 changes: 5 additions & 0 deletions src/catppuccin-macchiato.theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@

$brand: $blue;

:root .theme-light {
@import "@catppuccin/palette/scss/latte";
@import "components/lightfix";
}

@import "theme";
.theme-dark {
@include theme.highlights("macchiato", "hex");
Expand Down
Loading

0 comments on commit a5e483b

Please sign in to comment.