a671706 Use colors in badges and icons consistently — radicle-explorer

modified src/App/ColorPaletteModal.svelte

@@ -42,6 +42,7 @@

   // rg "\--color-\w*(-\d)*" -o --no-line-number --no-filename -g "\!public/colors.css" -g "\!src/ColorPalette.svelte" | sort | uniq | jq -sRM 'split("\n")[:-1]'
   const usedColors = [
     "--color-background",
     "--color-background-1",
     "--color-caution",
     "--color-caution-2",
     "--color-caution-3",

@@ -68,6 +69,7 @@

     "--color-primary",
     "--color-primary-3",
     "--color-primary-5",
     "--color-primary-6",
     "--color-secondary",
     "--color-secondary-1",
     "--color-secondary-2",

modified src/components/Badge.svelte

@@ -5,8 +5,7 @@

     | "negative"
     | "positive"
     | "primary"
     | "secondary"
     | "tertiary";
     | "secondary";
 </script>
 <script lang="ts">

@@ -26,32 +25,27 @@

   }
   .foreground {
     color: var(--color-foreground-6);
     background: var(--color-foreground-2);
     background: var(--color-foreground-3);
   }
   .positive {
     color: var(--color-positive-6);
     background-color: var(--color-positive-3);
   }
   .secondary {
     color: var(--color-secondary);
     color: var(--color-secondary-6);
     background-color: var(--color-secondary-3);
   }
   .negative {
     color: var(--color-negative);
     background-color: var(--color-negative-4);
     color: var(--color-negative-6);
     background-color: var(--color-negative-3);
   }
   .primary {
     color: var(--color-primary);
     background: linear-gradient(var(--color-primary-3), var(--color-primary-3)),
       linear-gradient(var(--color-background), var(--color-background));
   }
   .tertiary {
     color: var(--color-tertiary-6);
     background: var(--color-tertiary-1);
     color: var(--color-primary-6);
     background: var(--color-primary-3);
   }
   .caution {
     color: var(--color-caution);
     background: var(--color-caution-2);
     color: var(--color-caution-6);
     background: var(--color-caution-3);
   }
 </style>

@@ -65,7 +59,6 @@

   class:negative={variant === "negative"}
   class:positive={variant === "positive"}
   class:primary={variant === "primary"}
   class:secondary={variant === "secondary"}
   class:tertiary={variant === "tertiary"}>
   class:secondary={variant === "secondary"}>
   <slot />
 </span>

modified src/components/DiffStatBadge.svelte

@@ -16,13 +16,13 @@

     padding: 0.125rem 0.5rem;
     border-radius: var(--border-radius) 0 0 var(--border-radius);
     color: var(--color-positive-6);
     background-color: var(--color-positive-2);
     background-color: var(--color-positive-3);
   }
   .negative {
     padding: 0.125rem 0.5rem;
     border-radius: 0 var(--border-radius) var(--border-radius) 0;
     color: var(--color-negative-6);
     background-color: var(--color-negative-2);
     background-color: var(--color-negative-3);
   }
 </style>

modified src/views/projects/CloneButton.svelte

@@ -25,7 +25,7 @@

 <style>
   .clone-button {
     background-color: var(--color-caution-2);
     background-color: var(--color-caution-3);
     border-radius: var(--border-radius-small);
     color: var(--color-caution-6);
     font-family: var(--font-family-monospace);

@@ -35,7 +35,7 @@

     padding: 0.5rem 0.75rem;
   }
   .clone-button:hover {
     background-color: var(--color-caution-3);
     background-color: var(--color-caution-4);
   }
   .dropdown {
     background-color: var(--color-background-1);

@@ -77,14 +77,14 @@

     white-space: nowrap;
     line-height: 1.4;
     color: var(--color-caution-6);
     background: linear-gradient(var(--color-caution-2), var(--color-caution-2)),
     background: linear-gradient(var(--color-caution-3), var(--color-caution-3)),
       linear-gradient(var(--color-background), var(--color-background));
   }
   .clipboard {
     position: absolute;
     right: 0;
     color: var(--color-caution-6);
     background: linear-gradient(var(--color-caution-2), var(--color-caution-2)),
     background: linear-gradient(var(--color-caution-3), var(--color-caution-3)),
       linear-gradient(var(--color-background), var(--color-background));
     visibility: hidden;
     width: 4rem;

modified src/views/projects/Cob/Revision.svelte

@@ -70,11 +70,11 @@

     justify-content: space-between;
   }
   .merge {
     color: var(--color-primary);
     color: var(--color-primary-6);
     background-color: var(--color-primary-3);
   }
   .positive-review {
     color: var(--color-positive);
     color: var(--color-positive-6);
     background-color: var(--color-positive-3);
   }
   .revision {

modified src/views/projects/Issue.svelte

@@ -205,7 +205,7 @@

     color: var(--color-positive-6);
   }
   .closed {
     color: var(--color-negative);
     color: var(--color-negative-6);
   }
   @media (max-width: 960px) {

modified src/views/projects/Issue/IssueTeaser.svelte

@@ -85,10 +85,10 @@

     margin: 0 1rem 0 1.25rem;
   }
   .open {
     color: var(--color-positive);
     color: var(--color-positive-6);
   }
   .closed {
     color: var(--color-negative);
     color: var(--color-negative-6);
   }
   @media (max-width: 960px) {

modified src/views/projects/Patch.svelte

@@ -223,10 +223,10 @@

     color: var(--color-positive-6);
   }
   .archived {
     color: var(--color-caution);
     color: var(--color-caution-6);
   }
   .merged {
     color: var(--color-primary);
     color: var(--color-primary-6);
   }
   @media (max-width: 1092px) {

modified src/views/projects/Patch/PatchTeaser.svelte

@@ -90,13 +90,13 @@

     color: var(--color-foreground-4);
   }
   .open {
     color: var(--color-positive);
     color: var(--color-positive-6);
   }
   .archived {
     color: var(--color-caution);
     color: var(--color-caution-6);
   }
   .merged {
     color: var(--color-primary);
     color: var(--color-primary-6);
   }
   @media (max-width: 960px) {
     .tags {

modified src/views/projects/SourceBrowser/Changeset.svelte

@@ -32,10 +32,10 @@

     margin-left: 1rem;
   }
   .changeset-summary .additions {
     color: var(--color-positive);
     color: var(--color-positive-6);
   }
   .changeset-summary .deletions {
     color: var(--color-negative);
     color: var(--color-negative-6);
   }
 </style>