Radish alpha
r
radicle-desktop
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Commits › ea2982f
Improve contrast in light and dark modes
dnlklmn committed 1 year ago
commit ea2982faa2824caa676d135aa4197bea8964427e
parent 0cac631
10 files changed +63 -55
modified public/colors.css
@@ -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;

}
modified public/index.css
@@ -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;
modified src/components/CommentToggleInput.svelte
@@ -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 => {
modified src/components/Diff.svelte
@@ -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;
modified src/components/Discussion.svelte
@@ -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>
modified src/components/Id.svelte
@@ -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);
modified src/components/PatchesSecondColumn.svelte
@@ -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);
modified src/components/Reviews.svelte
@@ -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}
modified src/components/Thread.svelte
@@ -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}
modified src/views/repo/Patch.svelte
@@ -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