mirror of
https://github.com/catppuccin/gitea.git
synced 2026-03-11 14:44:23 +00:00
Merge db75ff2bfa into b9d0857cab
This commit is contained in:
Toria
GitHub
commit
0f481e85d0
1 changed files with 106 additions and 36 deletions
142
src/_theme.scss
142
src/_theme.scss
|
|
@ -1,6 +1,6 @@
|
|||
@use "sass:color";
|
||||
|
||||
// context-aware lighten: darkens if dark, lightens if light
|
||||
/* context-aware lighten: darkens if dark, lightens if light */
|
||||
@function ctx_lighten($color, $amount) {
|
||||
$multiplier: if($isDark, -1, 1);
|
||||
@return color.adjust($color, $lightness: $amount * $multiplier);
|
||||
|
|
@ -24,6 +24,7 @@ $lvl3: if($isDark, $base, $crust);
|
|||
--color-primary: #{$accent};
|
||||
--color-primary-contrast: #{$lvl1};
|
||||
--color-primary-hover: #{ctx_lighten($accent, 5%)};
|
||||
--color-primary-active: #{ctx_lighten($accent, 10%)};
|
||||
|
||||
--color-primary-dark-1: #{ctx_lighten($accent, 3%)};
|
||||
--color-primary-dark-2: #{ctx_lighten($accent, 6%)};
|
||||
|
|
@ -52,6 +53,9 @@ $lvl3: if($isDark, $base, $crust);
|
|||
--color-primary-alpha-90: #{color.change($accent, $alpha: 0.9)};
|
||||
|
||||
--color-secondary: #{$surface1};
|
||||
--color-secondary-button: #{color.change($overlay2, $alpha: 0.2)};
|
||||
--color-secondary-hover: #{color.change($overlay2, $alpha: 0.4)};
|
||||
--color-secondary-active: #{color.change($overlay2, $alpha: 0.6)};
|
||||
|
||||
--color-secondary-dark-1: #{ctx_lighten($surface0, -3%)};
|
||||
--color-secondary-dark-2: #{ctx_lighten($surface0, -6%)};
|
||||
|
|
@ -82,6 +86,11 @@ $lvl3: if($isDark, $base, $crust);
|
|||
--color-secondary-alpha-80: #{color.change($surface0, $alpha: 0.8)};
|
||||
--color-secondary-alpha-90: #{color.change($surface0, $alpha: 0.9)};
|
||||
|
||||
/* reactions */
|
||||
--color-reaction-bg: #{$surface0};
|
||||
--color-reaction-hover-bg: #{$surface1};
|
||||
--color-reaction-active-bg: #{$surface2};
|
||||
|
||||
/* colors */
|
||||
--color-red: #{$red};
|
||||
--color-orange: #{$peach};
|
||||
|
|
@ -97,6 +106,52 @@ $lvl3: if($isDark, $base, $crust);
|
|||
--color-grey: #{$overlay2};
|
||||
--color-black: #{if(isDark, $mantle, $text)};
|
||||
|
||||
@function ansibright($color) {
|
||||
@if isDark {
|
||||
@return oklch(
|
||||
calc(lightness($color) * 0.94)
|
||||
calc(saturation($color) + 8)
|
||||
calc(hue($color) + 2deg)
|
||||
);
|
||||
}
|
||||
@else {
|
||||
@return oklch(
|
||||
calc(lightness($color) * 1.09)
|
||||
saturation($color)
|
||||
calc(hue($color) + 2deg)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/* ANSI colours */
|
||||
--color-ansi-black: #{if(isDark, $surface1, $subtext1)};
|
||||
--color-ansi-red: $red;
|
||||
--color-ansi-green: $green;
|
||||
--color-ansi-yellow: $yellow;
|
||||
--color-ansi-blue: $blue;
|
||||
--color-ansi-magenta: $pink;
|
||||
--color-ansi-cyan: $teal;
|
||||
--color-ansi-white: #{if(isDark, $subtext0, $surface2)};
|
||||
|
||||
--color-ansi-bright-black: #{if(isDark, $surface2, subtext0)};
|
||||
--color-ansi-bright-red: ansibright($red);
|
||||
--color-ansi-bright-green: ansibright($green);
|
||||
--color-ansi-bright-yellow: ansibright($yellow);
|
||||
--color-ansi-bright-blue: ansibright($blue);
|
||||
--color-ansi-bright-magenta: ansibright($pink);
|
||||
--color-ansi-bright-cyan: ansibright($teal);
|
||||
--color-ansi-bright-white: #{if(isDark), $subtext1, $surface1};
|
||||
|
||||
/* console colors */
|
||||
--color-console-fg: $text;
|
||||
--color-console-fg-subtle: $subtext0;
|
||||
--color-console-bg: $surface0;
|
||||
--color-console-border: $overlay0;
|
||||
--color-console-hover-bg: $surface1;
|
||||
--color-console-active-bg: $surface2;
|
||||
--color-console-menu-bg: $surface1;
|
||||
--color-console-menu-border: $overlay0;
|
||||
|
||||
/* light variants - produced via Sass scale-color(color, $lightness: -10%) */
|
||||
--color-red-light: #{ctx_lighten($red, 10%)};
|
||||
--color-orange-light: #{ctx_lighten($peach, 10%)};
|
||||
|
|
@ -155,34 +210,36 @@ $lvl3: if($isDark, $base, $crust);
|
|||
--color-diff-moved-row-border: #{color.change($yellow, $alpha: 0.07)};
|
||||
--color-diff-added-row-border: #{color.change($green, $alpha: 0.07)};
|
||||
--color-diff-inactive: #{$overlay2};
|
||||
--color-error-border: #{$red};
|
||||
--color-error-bg: #{$red};
|
||||
--color-error-bg-active: #{ctx_lighten($red, 5%)};
|
||||
--color-error-bg-hover: #{ctx_lighten($red, 10%)};
|
||||
--color-error-text: #{$lvl1};
|
||||
--color-success-border: #{ctx_lighten($green, 10%)};
|
||||
--color-success-bg: #{$green};
|
||||
--color-success-text: #{$lvl1};
|
||||
--color-warning-border: #{ctx_lighten($yellow, 10%)};
|
||||
--color-warning-bg: #{$yellow};
|
||||
--color-warning-text: #{$lvl1};
|
||||
--color-info-border: #{ctx_lighten($blue, 10%)};
|
||||
--color-info-bg: #{$lvl1};
|
||||
--color-info-text: #{$text};
|
||||
--color-red-badge: #{ctx_lighten($red, 10%)};
|
||||
--color-red-badge-bg: #{$lvl1};
|
||||
--color-red-badge-hover-bg: #{ctx_lighten($red, 5%)};
|
||||
--color-green-badge: #{$green};
|
||||
--color-green-badge-bg: #{$green};
|
||||
--color-green-badge-hover-bg: #{ctx_lighten($green, 5%)};
|
||||
--color-yellow-badge: #{$yellow};
|
||||
--color-yellow-badge-bg: #{$lvl1};
|
||||
--color-yellow-badge-hover-bg: #{ctx_lighten($yellow, 5%)};
|
||||
--color-orange-badge: #{$peach};
|
||||
--color-orange-badge-bg: #{$lvl1};
|
||||
--color-orange-badge-hover-bg: #{ctx_lighten($peach, 5%)};
|
||||
|
||||
--color-error-border: $red;
|
||||
--color-error-bg: color.change($red, $alpha: 15%);
|
||||
--color-error-bg-active: color.change($red, $alpha: 45%);
|
||||
--color-error-bg-hover: color.change($red, $alpha: 30%);
|
||||
--color-error-text: $red;
|
||||
--color-success-border: $green;
|
||||
--color-success-bg: color.change($green, $alpha: 30%);
|
||||
--color-success-text: $green;
|
||||
--color-warning-border: $peach;
|
||||
--color-warning-bg: color.change($peach, $alpha: 15%);
|
||||
--color-warning-text: $peach;
|
||||
--color-info-border: $teal;
|
||||
--color-info-bg: color.change($teal, $alpha: 15%);
|
||||
--color-info-text: $teal;
|
||||
--color-red-badge: $red;
|
||||
--color-red-badge-bg: color.change($red, $alpha: 20%);
|
||||
--color-red-badge-hover-bg: color.change($red, $alpha: 40%);
|
||||
--color-green-badge: $green;
|
||||
--color-green-badge-bg: color.change($green, $alpha: 20%);
|
||||
--color-green-badge-hover-bg: color.change($green, $alpha: 40%);
|
||||
--color-yellow-badge: $yellow;
|
||||
--color-yellow-badge-bg: color.change($yellow, $alpha: 20%);
|
||||
--color-yellow-badge-hover-bg: color.change($yellow, $alpha: 40%);
|
||||
--color-orange-badge: $peach;
|
||||
--color-orange-badge-bg: color.change($peach, $alpha: 20%);
|
||||
--color-orange-badge-hover-bg: color.change($peach, $alpha: 40%);
|
||||
--color-git: #{$peach};
|
||||
--color-highlight-bg: #{color.change($yellow, $alpha: 0.15)};
|
||||
--color-highlight-fg: #{$peach};
|
||||
--color-highlight-bg: #{color.change($peach, $alpha: 15%)};
|
||||
|
||||
/* target-based colors */
|
||||
--color-body: #{$lvl1};
|
||||
|
|
@ -196,6 +253,7 @@ $lvl3: if($isDark, $base, $crust);
|
|||
--color-text-light-2: #{$subtext1};
|
||||
--color-text-light-3: #{$subtext1};
|
||||
--color-footer: #{$lvl2};
|
||||
--color-footer-text: $subtext0;
|
||||
--color-timeline: #{$surface0};
|
||||
--color-input-text: #{$text};
|
||||
--color-input-background: #{$surface0};
|
||||
|
|
@ -203,6 +261,8 @@ $lvl3: if($isDark, $base, $crust);
|
|||
--color-input-border: #{$surface1};
|
||||
--color-input-border-hover: #{$surface2};
|
||||
--color-nav-bg: #{$lvl2};
|
||||
--color-nav-text: $text;
|
||||
--color-secondary-nav-bg: $surface0;
|
||||
--color-nav-hover-bg: var(--color-hover);
|
||||
--color-navbar: #{$lvl2};
|
||||
--color-navbar-transparent: #{color.change($lvl1, $alpha: 0)};
|
||||
|
|
@ -247,6 +307,13 @@ $lvl3: if($isDark, $base, $crust);
|
|||
--color-accent: var(--color-primary-light-1);
|
||||
--color-small-accent: var(--color-primary-light-5);
|
||||
--color-active-line: #{$surface1};
|
||||
|
||||
/* tooltips */
|
||||
--color-overlay-backdrop: #{color.change($crust, $alpha: 60%)};
|
||||
--checkerboard-color-1: #{$surface0};
|
||||
--checkerboard-color-2: #{$surface1};
|
||||
--color-tooltip-text: #{$text}; /* tippy box text (fixed page info) */
|
||||
--color-tooltip-bg: #{$surface0}; /* tippy box bg (popup) */
|
||||
}
|
||||
|
||||
@if $isDark {
|
||||
|
|
@ -292,17 +359,17 @@ $lvl3: if($isDark, $base, $crust);
|
|||
background-color: $lvl3;
|
||||
}
|
||||
|
||||
// link color for signed commits
|
||||
/* link color for signed commits */
|
||||
.ui.commit-header-row .svg.gitea-lock ~ a {
|
||||
color: $lvl1;
|
||||
}
|
||||
|
||||
// error message headers weirdly don't seem to be using --color-error-text
|
||||
/* error message headers weirdly don't seem to be using --color-error-text */
|
||||
.ui.negative.message .header {
|
||||
color: var(--color-error-text);
|
||||
}
|
||||
|
||||
// most recent commit hover when signed
|
||||
/* most recent commit hover when signed */
|
||||
.ui.sha.isSigned.isVerified {
|
||||
.shortsha {
|
||||
color: $lvl1;
|
||||
|
|
@ -312,7 +379,7 @@ $lvl3: if($isDark, $base, $crust);
|
|||
}
|
||||
}
|
||||
|
||||
// modal text color for the "Remove GPG Key" modal
|
||||
/* modal text color for the "Remove GPG Key" modal */
|
||||
.ui.basic.modal,
|
||||
.ui.basic.modal > .header,
|
||||
.ui.inverted.button {
|
||||
|
|
@ -320,18 +387,21 @@ $lvl3: if($isDark, $base, $crust);
|
|||
}
|
||||
|
||||
#repo-topics,
|
||||
// repository topics when in edit mode
|
||||
/* repository topics when in edit mode */
|
||||
#topic_edit > .ui.selection.dropdown {
|
||||
color: var(--color-label-text) !important;
|
||||
}
|
||||
|
||||
// repository topics edit button
|
||||
/* repository topics edit button */
|
||||
#manage_topic {
|
||||
color: var(--color-text-light-2) !important;
|
||||
}
|
||||
|
||||
// admonitions are using *-text variables for border/text colour
|
||||
// can't change values of the *-text variables without breaking readability on accented backgrounds
|
||||
/*
|
||||
* admonitions are using *-text variables for border/text colour
|
||||
* can't change values of the *-text variables without breaking
|
||||
* readability on accented backgrounds
|
||||
*/
|
||||
blockquote {
|
||||
&.attention-tip {
|
||||
border-left-color: var(--color-success-bg);
|
||||
|
|
|
|||
Loading…
Reference in a new issue