Merge pull request atom#1949 from atom/sm/diff-colors

simurai · web-flow · commit 81dbde7cf1f8 · 2019-02-18T16:04:40.000+09:00
Diff color tweaks
diff --git a/styles/file-patch-view.less b/styles/file-patch-view.less
@@ -184,20 +184,32 @@
 
   &-line {
     // mixin
-    .hunk-line-mixin(@bg;) {
-      background-color: fade(@bg, 16%);
+    .hunk-line-mixin(@color) {
+      background-color: fade(@color, 15%);
 
       &.line.cursor-line {
-        background-color: fade(@bg, 22%);
+        background-color: fade(@color, 25%);
       }
     }
 
-    &--deleted {
-      .hunk-line-mixin(@background-color-error);
+    // light themes
+    & when (lightness(@syntax-background-color) >= 50) {
+      &--deleted {
+        .hunk-line-mixin( hsl(353, 100%, 55%) ); // close to .com's hsl(353, 100%, 93%)
+      }
+      &--added {
+        .hunk-line-mixin( hsl(133, 100%, 50%) ); // close to .com's hsl(133, 100%, 90%)
+      }
     }
 
-    &--added {
-      .hunk-line-mixin(@background-color-success);
+    // dark themes
+    & when (lightness(@syntax-background-color) < 50) {
+      &--deleted {
+        .hunk-line-mixin( hsl(353, 100%, 65%) ); // close to .com's hsl(353, 100%, 93%)
+      }
+      &--added {
+        .hunk-line-mixin( hsl(133, 40%, 60%) ); // close to .com's hsl(133, 100%, 90%)
+      }
     }
   }
 
@@ -216,26 +228,32 @@
     }
 
     &.icons .line-number {
-      .octicon-font();
+      padding: 0;
       opacity: 1;
       width: 2ch;
+      font-family: @font-family;
+      text-align: center;
+      color: mix(@syntax-gutter-text-color, @syntax-text-color);
+      -webkit-font-smoothing: antialiased;
 
       &:before {
         display: inline-block;
-        min-width: 1ch;
-        text-align: center;
+        min-width: 2ch;
       }
 
       &.github-FilePatchView-line--added:before {
-        content: @plus;
+        content: "+";
       }
 
       &.github-FilePatchView-line--deleted:before {
-        content: @dash;
+        content: "-";
       }
 
       &.github-FilePatchView-line--nonewline:before {
         content: @no-newline;
+        .octicon-font();
+        width: inherit;
+        min-width: auto;
       }
     }
   }
@@ -273,7 +291,7 @@
 
   atom-text-editor {
     .selection .region {
-      background-color: transparent;
+      background-color: transparent; // remove default selection
     }
   }
 }
@@ -293,7 +311,17 @@
 
   atom-text-editor {
     .selection .region {
-      background-color: mix(@button-background-color-selected, @syntax-background-color, 24%);
+      background-color: mix(@button-background-color-selected, @syntax-background-color, 25%);
+    }
+  }
+}
+
+// Selected + focused hunkmode
+.github-FilePatchView.github-FilePatchView--hunkMode:focus-within {
+
+  atom-text-editor {
+    .selection .region {
+      background-color: mix(@button-background-color-selected, @syntax-background-color, 8%);
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -184,20 +184,32 @@`
`184`	`184`
`185`	`185`	`&-line {`
`186`	`186`	`// mixin`
`187`		`- .hunk-line-mixin(@bg;) {`
`188`		`- background-color: fade(@bg, 16%);`
	`187`	`+ .hunk-line-mixin(@color) {`
	`188`	`+ background-color: fade(@color, 15%);`
`189`	`189`
`190`	`190`	`&.line.cursor-line {`
`191`		`- background-color: fade(@bg, 22%);`
	`191`	`+ background-color: fade(@color, 25%);`
`192`	`192`	`}`
`193`	`193`	`}`
`194`	`194`
`195`		`- &--deleted {`
`196`		`- .hunk-line-mixin(@background-color-error);`
	`195`	`+ // light themes`
	`196`	`+ & when (lightness(@syntax-background-color) >= 50) {`
	`197`	`+ &--deleted {`
	`198`	`+ .hunk-line-mixin( hsl(353, 100%, 55%) ); // close to .com's hsl(353, 100%, 93%)`
	`199`	`+ }`
	`200`	`+ &--added {`
	`201`	`+ .hunk-line-mixin( hsl(133, 100%, 50%) ); // close to .com's hsl(133, 100%, 90%)`
	`202`	`+ }`
`197`	`203`	`}`
`198`	`204`
`199`		`- &--added {`
`200`		`- .hunk-line-mixin(@background-color-success);`
	`205`	`+ // dark themes`
	`206`	`+ & when (lightness(@syntax-background-color) < 50) {`
	`207`	`+ &--deleted {`
	`208`	`+ .hunk-line-mixin( hsl(353, 100%, 65%) ); // close to .com's hsl(353, 100%, 93%)`
	`209`	`+ }`
	`210`	`+ &--added {`
	`211`	`+ .hunk-line-mixin( hsl(133, 40%, 60%) ); // close to .com's hsl(133, 100%, 90%)`
	`212`	`+ }`
`201`	`213`	`}`
`202`	`214`	`}`
`203`	`215`
`@@ -216,26 +228,32 @@`
`216`	`228`	`}`
`217`	`229`
`218`	`230`	`&.icons .line-number {`
`219`		`- .octicon-font();`
	`231`	`+ padding: 0;`
`220`	`232`	`opacity: 1;`
`221`	`233`	`width: 2ch;`
	`234`	`+ font-family: @font-family;`
	`235`	`+ text-align: center;`
	`236`	`+ color: mix(@syntax-gutter-text-color, @syntax-text-color);`
	`237`	`+ -webkit-font-smoothing: antialiased;`
`222`	`238`
`223`	`239`	`&:before {`
`224`	`240`	`display: inline-block;`
`225`		`- min-width: 1ch;`
`226`		`- text-align: center;`
	`241`	`+ min-width: 2ch;`
`227`	`242`	`}`
`228`	`243`
`229`	`244`	`&.github-FilePatchView-line--added:before {`
`230`		`- content: @plus;`
	`245`	`+ content: "+";`
`231`	`246`	`}`
`232`	`247`
`233`	`248`	`&.github-FilePatchView-line--deleted:before {`
`234`		`- content: @dash;`
	`249`	`+ content: "-";`
`235`	`250`	`}`
`236`	`251`
`237`	`252`	`&.github-FilePatchView-line--nonewline:before {`
`238`	`253`	`content: @no-newline;`
	`254`	`+ .octicon-font();`
	`255`	`+ width: inherit;`
	`256`	`+ min-width: auto;`
`239`	`257`	`}`
`240`	`258`	`}`
`241`	`259`	`}`
`@@ -273,7 +291,7 @@`
`273`	`291`
`274`	`292`	`atom-text-editor {`
`275`	`293`	`.selection .region {`
`276`		`- background-color: transparent;`
	`294`	`+ background-color: transparent; // remove default selection`
`277`	`295`	`}`
`278`	`296`	`}`
`279`	`297`	`}`
`@@ -293,7 +311,17 @@`
`293`	`311`
`294`	`312`	`atom-text-editor {`
`295`	`313`	`.selection .region {`
`296`		`- background-color: mix(@button-background-color-selected, @syntax-background-color, 24%);`
	`314`	`+ background-color: mix(@button-background-color-selected, @syntax-background-color, 25%);`
	`315`	`+ }`
	`316`	`+ }`
	`317`	`+}`
	`318`	`+`
	`319`	`+// Selected + focused hunkmode`
	`320`	`+.github-FilePatchView.github-FilePatchView--hunkMode:focus-within {`
	`321`	`+`
	`322`	`+ atom-text-editor {`
	`323`	`+ .selection .region {`
	`324`	`+ background-color: mix(@button-background-color-selected, @syntax-background-color, 8%);`
`297`	`325`	`}`
`298`	`326`	`}`
`299`	`327`	`}`