feat(ngx-diff): add named light and dark themes

rars · Mar 14, 2024 · f870bd8 · f870bd8
1 parent f7b7c1d
commit f870bd8
Show file tree

Hide file tree

Showing 10 changed files with 267 additions and 245 deletions.
diff --git a/projects/ngx-diff/ng-package.json b/projects/ngx-diff/ng-package.json
@@ -3,5 +3,8 @@
   "dest": "../../dist/ngx-diff",
   "lib": {
     "entryFile": "src/public-api.ts"
-  }
+  },
+  "assets": [
+    "styles/*"
+  ]
 }
diff --git a/projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.html b/projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.html
@@ -8,7 +8,9 @@
   <span class="inline-diff-summary-lines-removed">--- {{ diffSummary.numLinesRemoved }}</span>
 </div>
 @if (isContentEqual) {
-  <div class="inline-diff-no-changes-text">There are no changes to display.</div>
+  <div class="inline-diff">
+    <div class="inline-diff-no-changes-text">There are no changes to display.</div>
+  </div>
 }
 @if (!isContentEqual) {
   <div class="inline-diff">

diff --git a/projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.scss b/projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.scss
@@ -1,44 +1,13 @@
-:host {
-  --ngx-diff-border-color: #888888;
-  --ngx-diff-font-size: 0.9rem;
-  --ngx-diff-font-family: Consolas, Courier, monospace;
-  --ngx-diff-font-color: #000000;
-  --ngx-diff-line-number-font-color: #484848;
-  --ngx-diff-line-number-hover-font-color: #ffffff;
-  --ngx-diff-selected-border-color: #ff8000;
-
-  --ngx-diff-line-number-width: 2rem;
-  --ngx-diff-border-width: 1px;
-  --ngx-diff-line-left-padding: 1rem;
-  --ngx-diff-bottom-spacer-height: 1rem;
-  --ngx-diff-title-bar-padding: 0.5rem;
-  --ngx-diff-title-font-weight: 600;
-
-  --ngx-diff-insert-color: #d6ffd6;
-  --ngx-diff-delete-color: #ffd6d6;
-  --ngx-diff-equal-color: #ffffff;
-  --ngx-diff-mix-color: #000;
-  --ngx-diff-light-mix-percentage: 4%;
-  --ngx-diff-heavy-mix-percentage: 10%;
-
-  --ngx-diff-inserted-background-color: var(--ngx-diff-insert-color);
-  --ngx-diff-deleted-background-color: var(--ngx-diff-delete-color);
-  --ngx-diff-equal-background-color: var(--ngx-diff-equal-color);
-  --ngx-diff-margin-background-color: color-mix(in srgb, var(--ngx-diff-equal-color), var(--ngx-diff-mix-color) var(--ngx-diff-light-mix-percentage));
-
-  --ngx-diff-insert-color-darker: color-mix(in srgb, var(--ngx-diff-insert-color), var(--ngx-diff-mix-color) var(--ngx-diff-light-mix-percentage));
-  --ngx-diff-insert-color-darkest: color-mix(in srgb, var(--ngx-diff-insert-color), var(--ngx-diff-mix-color) var(--ngx-diff-heavy-mix-percentage));
-
-  --ngx-diff-delete-color-darker: color-mix(in srgb, var(--ngx-diff-delete-color), var(--ngx-diff-mix-color) var(--ngx-diff-light-mix-percentage));
-  --ngx-diff-delete-color-darkest: color-mix(in srgb, var(--ngx-diff-delete-color), var(--ngx-diff-mix-color) var(--ngx-diff-heavy-mix-percentage));
-}
-
 div.inline-diff-title-bar {
   background-color: var(--ngx-diff-margin-background-color);
+  color: var(--ngx-diff-font-color);
   font-family: var(--ngx-diff-font-family);
   font-size: var(--ngx-diff-font-size);
   font-weight: var(--ngx-diff-title-font-weight);
   padding: var(--ngx-diff-title-bar-padding);
+  border-top: var(--ngx-diff-border-width) solid var(--ngx-diff-border-color);
+  border-left: var(--ngx-diff-border-width) solid var(--ngx-diff-border-color);
+  border-right: var(--ngx-diff-border-width) solid var(--ngx-diff-border-color);
 }
 
 div.inline-diff-no-changes-text {
@@ -48,10 +17,11 @@ div.inline-diff-no-changes-text {
   padding: var(--ngx-diff-title-bar-padding);
   background-color: var(--ngx-diff-equal-background-color);
   color: var(--ngx-diff-font-color);
+  flex-grow: 1;
 }
 
 .inline-diff-summary-lines-added {
- color: var(--ngx-diff-insert-color-darkest);
+  color: var(--ngx-diff-insert-color-darkest);
 }
 
 .inline-diff-summary-lines-removed {
@@ -159,14 +129,16 @@ div.inline-diff-text {
   }
 
   &.selected {
-    border-top: var(--ngx-diff-border-width) solid var(--ngx-diff-selected-border-color);
-    border-left: var(--ngx-diff-border-width) solid var(--ngx-diff-selected-border-color);
-    border-bottom: var(--ngx-diff-border-width) solid var(--ngx-diff-selected-border-color);
+    border-top: var(--ngx-diff-selected-border-width) solid var(--ngx-diff-selected-border-color);
+    border-left: var(--ngx-diff-selected-border-width) solid var(--ngx-diff-selected-border-color);
+    border-bottom: var(--ngx-diff-selected-border-width) solid var(--ngx-diff-selected-border-color);
+    background-color: var(--ngx-diff-selected-line-background-color);
   }
 }
 
 .line-content.selected {
-  border-top: var(--ngx-diff-border-width) solid var(--ngx-diff-selected-border-color);
-  border-right: var(--ngx-diff-border-width) solid var(--ngx-diff-selected-border-color);
-  border-bottom: var(--ngx-diff-border-width) solid var(--ngx-diff-selected-border-color);
+  border-top: var(--ngx-diff-selected-border-width) solid var(--ngx-diff-selected-border-color);
+  border-right: var(--ngx-diff-selected-border-width) solid var(--ngx-diff-selected-border-color);
+  border-bottom: var(--ngx-diff-selected-border-width) solid var(--ngx-diff-selected-border-color);
+  background-color: var(--ngx-diff-selected-line-background-color);
 }
diff --git a/projects/ngx-diff/src/lib/components/side-by-side-diff/side-by-side-diff.component.html b/projects/ngx-diff/src/lib/components/side-by-side-diff/side-by-side-diff.component.html
@@ -8,7 +8,9 @@
   <span class="sbs-diff-summary-lines-removed">--- {{ diffSummary.numLinesRemoved }}</span>
 </div>
 @if (isContentEqual) {
-  <div class="sbs-diff-no-changes-text">There are no changes to display.</div>
+  <div class="sbs-diff">
+    <div class="sbs-diff-no-changes-text">There are no changes to display.</div>
+  </div>
 }
 @if (!isContentEqual) {
   <div class="sbs-diff">