Skip to content

Commit

Permalink
fix(proton): login page and latte fix (#1202)
Browse files Browse the repository at this point in the history 
* fix(proton): style login page background

* fix(proton): latte fix

* fix(proton): add new missing vars

* fix(proton): bump version
  • Loading branch information
@soya-daizu
soya-daizu authored Aug 16, 2024
1 parent 80c6698 commit 356d2f1
Showing 1 changed file with 48 additions and 21 deletions.
69 changes: 48 additions & 21 deletions styles/proton/catppuccin.user.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@name Proton Catppuccin
@namespace github.com/catppuccin/userstyles/styles/proton
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/proton
@version 0.1.7
@version 0.1.8
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/proton/catppuccin.user.css
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aproton
@description Soothing pastel theme for Proton
Expand Down Expand Up @@ -133,51 +133,65 @@
);
}

#darkenOrLighten(@color, @value) {
@result: if(
@lookup=latte,
darken(@color, @value),
lighten(@color, @value)
);
}

--primary-minor-2: #lightenOrDarken(@accent-color, 60%) [ @result];
--primary-minor-1: #lightenOrDarken(@accent-color, 50%) [ @result];
--primary: @accent-color;
--primary-major-1: #darkenOrLighten(@accent-color, 4%) [ @result];
--primary-major-2: #darkenOrLighten(@accent-color, 8%) [ @result];
--primary-major-3: #darkenOrLighten(@accent-color, 12%) [ @result];
--primary-contrast: @mantle;
--signal-danger-minor-2: #lightenOrDarken(@maroon, 40%) [ @result];
--signal-danger-minor-1: #lightenOrDarken(@maroon, 30%) [ @result];
--signal-danger: @maroon;
--signal-danger-major-1: saturate(@maroon, 40%);
--signal-danger-major-2: saturate(@maroon, 30%);
--signal-danger-major-3: saturate(@maroon, 20%);
--signal-danger-major-1: #darkenOrLighten(@maroon, 4%) [ @result];
--signal-danger-major-2: #darkenOrLighten(@maroon, 8%) [ @result];
--signal-danger-major-3: #darkenOrLighten(@maroon, 12%) [ @result];
--signal-danger-contrast: @mantle;
--signal-warning-minor-2: #lightenOrDarken(@peach, 40%) [ @result];
--signal-warning-minor-1: #lightenOrDarken(@peach, 30%) [ @result];
--signal-warning: @peach;
--signal-warning-major-1: saturate(@peach, 40%);
--signal-warning-major-2: saturate(@peach, 30%);
--signal-warning-major-3: saturate(@peach, 20%);
--signal-warning-major-1: #darkenOrLighten(@peach, 4%) [ @result];
--signal-warning-major-2: #darkenOrLighten(@peach, 8%) [ @result];
--signal-warning-major-3: #darkenOrLighten(@peach, 12%) [ @result];
--signal-warning-contrast: @mantle;
--signal-success-minor-2: #lightenOrDarken(@green, 40%) [ @result];
--signal-success-minor-1: #lightenOrDarken(@green, 30%) [ @result];
--signal-success: @green;
--signal-success-major-1: saturate(@green, 40%);
--signal-success-major-2: saturate(@green, 30%);
--signal-success-major-3: saturate(@green, 20%);
--signal-success-major-1: #darkenOrLighten(@green, 4%) [ @result];
--signal-success-major-2: #darkenOrLighten(@green, 8%) [ @result];
--signal-success-major-3: #darkenOrLighten(@green, 12%) [ @result];
--signal-success-contrast: @mantle;
--signal-info-minor-2: #lightenOrDarken(@blue, 40%) [ @result];
--signal-info-minor-1: #lightenOrDarken(@blue, 30%) [ @result];
--signal-info: @blue;
--signal-info-major-1: saturate(@blue, 40%);
--signal-info-major-2: saturate(@blue, 30%);
--signal-info-major-3: saturate(@blue, 20%);
--signal-info-major-1: #darkenOrLighten(@blue, 4%) [ @result];
--signal-info-major-2: #darkenOrLighten(@blue, 8%) [ @result];
--signal-info-major-3: #darkenOrLighten(@blue, 12%) [ @result];
--signal-info-contrast: @mantle;
--interaction-norm-minor-2: #lightenOrDarken(@accent-color, 40%) [
@result];
--interaction-norm-minor-1: #lightenOrDarken(@accent-color, 30%) [
@result];
--interaction-norm: @accent-color;
--interaction-norm-major-1: saturate(@accent-color, 30%);
--interaction-norm-major-2: saturate(@accent-color, 20%);
--interaction-norm-major-3: saturate(@accent-color, 10%);
--interaction-norm-major-1: #darkenOrLighten(@accent-color, 4%) [ @result];
--interaction-norm-major-2: #darkenOrLighten(@accent-color, 8%) [ @result];
--interaction-norm-major-3: #darkenOrLighten(@accent-color, 12%) [
@result];
--interaction-norm-contrast: @mantle;
--interaction-weak-minor-2: darken(@surface0, 50%);
--interaction-weak-minor-1: darken(@surface0, 30%);
--interaction-weak-minor-2: #lightenOrDarken(@surface0, 20%) [ @result];
--interaction-weak-minor-1: #lightenOrDarken(@surface0, 10%) [ @result];
--interaction-weak: @surface0;
--interaction-weak-major-1: lighten(@surface0, 10%);
--interaction-weak-major-2: lighten(@surface0, 20%);
--interaction-weak-major-3: lighten(@surface0, 30%);
--interaction-weak-major-1: #darkenOrLighten(@surface0, 4%) [ @result];
--interaction-weak-major-2: #darkenOrLighten(@surface0, 8%) [ @result];
--interaction-weak-major-3: #darkenOrLighten(@surface0, 12%) [ @result];
--interaction-weak-contrast: @text;
--text-norm: @text;
--text-weak: @subtext0;
Expand All @@ -200,7 +214,10 @@
--interaction-default: transparent;
--interaction-default-hover: fadeout(@overlay1, 80%);
--interaction-default-active: fadeout(@overlay1, 60%);
--shadow-primary-color: red(@accent-color) green(@accent-color)
blue(@accent-color);
--shadow-norm-opacity: 0.5;
--shadow-raised-opacity: 1;
--shadow-lifted-opacity: 0.75;
--backdrop-norm: fadeout(@crust, 50%);
--optional-scrollbar-thumb-color: @surface0;
Expand Down Expand Up @@ -240,6 +257,16 @@
.message-content:not(.plain) .message-iframe iframe {
color-scheme: light;
}

@media (min-width: 28.135em) {
.sign-layout-bg {
background: linear-gradient(
68.66deg,
desaturate(@mantle, 5%) 1.3%,
desaturate(@base, 5%) 50%
);
}
}
}
}

Expand Down

0 comments on commit 356d2f1

Please sign in to comment.