radicle/radicle-explorer
1
0
Fork 0
mirror of https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git synced 2026-10-27 07:30:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve contrast in light and dark modes

Browse Source
This commit is contained in:
dnlklmn
2025-04-16 11:51:06 +02:00
committed by Rūdolfs Ošiņš
parent 0cac6319d8
commit ea2982faa2
10 changed files with 63 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/colors.css
+38 -38
View File
@@ -1,12 +1,12 @@
:root {
--color-background-default: #f5f5ff;
--color-background-float: #fafaff;
--color-background-dip: #f5f5ff;
--color-background-default: #ebebff;
--color-background-float: #f5f5ff;
--color-background-dip: #dbdbff;
--color-foreground-contrast: #232563;
--color-foreground-dim: #6a6a81;
--color-foreground-emphasized: #8585ff;
--color-foreground-dim: #5c5c70;
--color-foreground-emphasized: #7070ff;
--color-foreground-emphasized-hover: #7070ff;
--color-foreground-match-background: #f5f5ff;
--color-foreground-match-background: #ebebff;
--color-foreground-white: #ffffff;
--color-foreground-black: #000000;
--color-foreground-primary: #ff55ff;
@@ -16,21 +16,21 @@
--color-foreground-yellow: #b29401;
--color-foreground-disabled: #9b9bb1;
--color-border-hint: #dbdbff;
--color-border-default: #dbdbff;
--color-border-default: #ccceff;
--color-border-focus: #7070ff;
--color-border-contrast: #24252d;
--color-border-contrast: #25262d;
--color-border-error: #ce97af;
--color-border-merged: #ffe5ff;
--color-border-match-background: #f5f5ff;
--color-border-match-background: #ebebff;
--color-border-primary: #ff1aff;
--color-border-primary-hover: #ff55ff;
--color-border-selected: #dbdbff;
--color-border-warning: #ffe609;
--color-border-success: #97ceb0;
--color-fill-secondary: #7070ff;
--color-fill-secondary-hover: #8585ff;
--color-fill-ghost: #ebebff;
--color-fill-ghost-hover: #f5f5ff;
--color-fill-secondary: #5555ff;
--color-fill-secondary-hover: #7070ff;
--color-fill-ghost: #dbdbff;
--color-fill-ghost-hover: #ebebff;
--color-fill-separator: #dbdbff;
--color-fill-primary: #ff55ff;
--color-fill-primary-hover: #ff70ff;
@@ -42,7 +42,7 @@
--color-fill-yellow: #ffe609;
--color-fill-yellow-iconic: #ffff55;
--color-fill-gray: #9b9bb1;
--color-fill-secondary-shade: #5555ff;
--color-fill-secondary-shade: #4545ef;
--color-fill-diff-red: #efdce4;
--color-fill-diff-red-light: #f7eef2;
--color-fill-success-counter: #97ceb0;
@@ -51,55 +51,55 @@
--color-fill-success-shade: #408760;
--color-fill-diff-green: #badeca;
--color-fill-diff-green-light: #dcefe5;
--color-fill-float: #fafaff;
--color-fill-float-hover: #dbdbff;
--color-fill-float: #f5f5ff;
--color-fill-float-hover: #fafaff;
--color-fill-merged: #ffeeff;
--color-fill-selected: #ebebff;
--color-fill-warning: #ffffe5;
--color-fill-counter: #fafaff;
--color-fill-counter-emphasized: #dbdbff;
--color-fill-counter: #dbdbff;
--color-fill-counter-emphasized: #ebebff;
--color-fill-delegate: #ffe5ff;
--color-fill-private: #fff5d6;
--color-fill-secondary-counter: #9497ff;
--color-fill-secondary-counter: #b2b5ff;
--color-fill-primary-counter: #ff8fff;
--color-fill-ghost-shade: #dbdbff;
--color-fill-ghost-shade: #ccceff;
}
:root[data-theme="dark"] {
--color-background-default: #0a0d10;
--color-background-float: #14151a;
--color-background-default: #0a0e0f;
--color-background-float: #25262d;
--color-background-dip: #000000;
--color-foreground-contrast: #f9f9fb;
--color-foreground-dim: #9b9bb1;
--color-foreground-emphasized: #7070ff;
--color-foreground-emphasized-hover: #8585ff;
--color-foreground-match-background: #0a0d10;
--color-foreground-emphasized-hover: #b2b5ff;
--color-foreground-match-background: #0a0e0f;
--color-foreground-white: #ffffff;
--color-foreground-black: #000000;
--color-foreground-primary: #ff55ff;
--color-foreground-primary-hover: #ff8fff;
--color-foreground-success: #4fa877;
--color-foreground-red: #aa5078;
--color-foreground-red: #be7495;
--color-foreground-yellow: #e5c001;
--color-foreground-disabled: #6a6a81;
--color-border-hint: #24252d;
--color-border-default: #2e2f38;
--color-foreground-disabled: #5c5c70;
--color-border-hint: #2e2f38;
--color-border-default: #393a46;
--color-border-focus: #7070ff;
--color-border-contrast: #ebebff;
--color-border-error: #6b2b42;
--color-border-merged: #6b006b;
--color-border-match-background: #0a0d10;
--color-border-match-background: #0a0e0f;
--color-border-primary: #ff1aff;
--color-border-primary-hover: #ff55ff;
--color-border-selected: #232563;
--color-border-warning: #4c4000;
--color-border-success: #2a5a40;
--color-fill-secondary: #7070ff;
--color-fill-secondary-hover: #8585ff;
--color-fill-secondary-hover: #b2b5ff;
--color-fill-secondary-shade: #5555ff;
--color-fill-ghost: #24252d;
--color-fill-ghost-hover: #2e2f38;
--color-fill-separator: #24252d;
--color-fill-ghost: #2e2f38;
--color-fill-ghost-hover: #393a46;
--color-fill-separator: #2e2f38;
--color-fill-primary: #ff1aff;
--color-fill-primary-hover: #ff4dff;
--color-fill-primary-shade: #e500e5;
@@ -118,16 +118,16 @@
--color-fill-success-shade: #408760;
--color-fill-diff-green: #183425;
--color-fill-diff-green-light: #142a1d;
--color-fill-float: #14151a;
--color-fill-float-hover: #1b1c22;
--color-fill-float: #25262d;
--color-fill-float-hover: #2e2f38;
--color-fill-merged: #1a001a;
--color-fill-selected: #16173d;
--color-fill-warning: #191500;
--color-fill-counter: #393a46;
--color-fill-counter-emphasized: #16173d;
--color-fill-counter-emphasized: #5c5c70;
--color-fill-delegate: #3d003d;
--color-fill-private: #4c4000;
--color-fill-secondary-counter: #9497ff;
--color-fill-secondary-counter: #ccceff;
--color-fill-primary-counter: #ff8fff;
--color-fill-ghost-shade: #1b1c22;
--color-fill-ghost-shade: #25262d;
}
public/index.css
+1 -1
View File
@@ -67,7 +67,7 @@ body {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-fill-ghost-hover);
background-color: var(--color-fill-counter);
clip-path: var(--1px-corner-fill);
height: 1.5rem;
padding: 0 0.5rem;
src/components/CommentToggleInput.svelte
+2 -1
View File
@@ -47,6 +47,7 @@
{disallowEmptyBody}
{rid}
{placeholder}
borderVariant="ghost"
submitInProgress={state === "submit"}
{focus}
stylePadding="0.5rem 0.75rem"
@@ -69,7 +70,7 @@
<Border
hoverable
styleCursor="text"
variant="float"
variant="ghost"
styleHeight="2.5rem"
styleWidth="100%"
onclick={e => {
src/components/Diff.svelte
+6 -6
View File
@@ -239,10 +239,10 @@
cursor: default;
}
.addition {
background-color: var(--color-fill-diff-green-light);
background-color: var(--color-fill-diff-green);
}
.deletion {
background-color: var(--color-fill-diff-red-light);
background-color: var(--color-fill-diff-red);
}
.addition > .left,
.addition > .right,
@@ -299,17 +299,17 @@
align-self: flex-start;
}
.thread {
background-color: var(--color-fill-float-hover);
background-color: var(--color-background-default);
box-shadow: inset 0 0 0 2px var(--color-border-hint);
padding: 0.5rem;
margin-bottom: 1rem;
}
.comment-form {
background-color: var(--color-fill-float-hover);
background-color: var(--color-background-default);
box-shadow: inset 0 0 0 2px var(--color-border-default);
font-family: var(--font-family-sans-serif);
display: flex;
flex-direction: column;
padding: 1rem;
margin-bottom: 1rem;
}
.comment-header {
display: flex;
src/components/Discussion.svelte
+1 -1
View File
@@ -88,7 +88,7 @@
width: 2px;
height: 1rem;
margin-left: 1.25rem;
background-color: var(--color-background-float);
background-color: var(--color-border-hint);
}
</style>
src/components/Id.svelte
+2 -2
View File
@@ -65,8 +65,8 @@
justify-content: center;
z-index: 20;
bottom: 1.5rem;
background: var(--color-fill-ghost);
color: var(--color-fill-gray);
background: var(--color-fill-counter);
color: var(--color-foreground-contrast);
box-shadow: var(--elevation-low);
font-family: var(--font-family-sans-serif);
font-size: var(--font-size-small);
src/components/PatchesSecondColumn.svelte
+1 -1
View File
@@ -54,7 +54,7 @@
color: var(--color-fill-success);
}
.archived {
color: var(--color-fill-yellow-iconic);
color: var(--color-foreground-yellow);
}
.merged {
color: var(--color-foreground-primary);
src/components/Reviews.svelte
+1 -1
View File
@@ -199,7 +199,7 @@
</div>
{#if revision.reviews && revision.reviews.length}
<div style:display={hideReviews ? "none" : "revert"} class="review-list">
<div style:display={hideReviews ? "none" : "flex"} class="review-list">
{#each revision.reviews as review, idx}
<ReviewTeaser
{rid}
src/components/Thread.svelte
+4 -2
View File
@@ -166,11 +166,13 @@
</div>
{#if replies.length > 0 || (createReply && showReplyForm)}
{#if inline}
<div style:background-color="var(--color-background-float)">
<div
style:background-color="var(--color-background-deafult)"
style:border="2px solid var(--color-border-hint)">
{@render repliesSnippet()}
</div>
{:else}
<Border variant="float" styleOverflow="hidden" flatTop={!inline}>
<Border variant="ghost" styleOverflow="hidden" flatTop={!inline}>
{@render repliesSnippet()}
</Border>
{/if}
src/views/repo/Patch.svelte
+7 -2
View File
@@ -367,11 +367,16 @@
{#snippet secondColumn()}
<div
class="txt-medium global-flex"
style:font-weight="var(--font-weight-medium)"
style:min-width="450px"
class="txt-regular txt-semibold global-flex"
style:min-height="2.5rem"
style:margin-bottom="1rem">
<div class="global-flex" style:gap="4px">
<div
class="global-flex"
style:font-weight="var(--font-weight-medium)"
style:gap="4px"
style:white-space="nowrap">
{project.data.name}
<Icon name="chevron-right" />
<Link