Make colors easily adjustable

Add prefix to avoid mixing styles.

src/components/action_line.ts

@@ -36,7 +36,9 @@ export class ActionLine {
 	private triggerRebuild: VoidCallback
 
 	build(container: HTMLDivElement): void {
-		const actionLine = container.createDiv({ cls: 'flex-row gap-2 py-2' })
+		const actionLine = container.createDiv({
+			cls: 'flex flex-row gap-1 py-0-5',
+		})
 
 		const hasMinusLines = this.difference.file1Lines.length > 0
 		const hasPlusLines = this.difference.file2Lines.length > 0

src/components/action_line_button.ts

@@ -12,7 +12,7 @@ export class ActionLineButton {
 		actionLine
 			.createEl('a', {
 				text: this.text,
-				cls: 'no-decoration text-xxs text-gray',
+				cls: 'no-decoration text-xxs file-diff__action-line',
 			})
 			.onClickEvent(this.onClick)
 	}

src/components/action_line_divider.ts

@@ -1,5 +1,8 @@
 export class ActionLineDivider {
 	static build(actionLine: HTMLDivElement): void {
-		actionLine.createEl('span', { text: '|', cls: 'text-xxs text-gray' })
+		actionLine.createEl('span', {
+			text: '|',
+			cls: 'text-xxs file-diff__action-line',
+		})
 	}
 }

src/components/differences_view.ts

@@ -82,7 +82,9 @@ export class DifferencesView extends ItemView {
 	private build(): void {
 		this.contentEl.empty()
 
-		const container = this.contentEl.createDiv({ cls: 'container' })
+		const container = this.contentEl.createDiv({
+			cls: 'file-diff__container',
+		})
 
 		this.buildLines(container)
 
@@ -117,7 +119,7 @@ export class DifferencesView extends ItemView {
 				container.createDiv({
 					// Necessary to give the line a height when it's empty.
 					text: preventEmptyString(line),
-					cls: 'line',
+					cls: 'file-diff__line',
 				})
 				i += 1
 			}
@@ -149,7 +151,7 @@ export class DifferencesView extends ItemView {
 			container.createDiv({
 				// Necessary to give the line a height when it's empty.
 				text: preventEmptyString(line),
-				cls: 'line bg-turquoise-light',
+				cls: 'file-diff__line file-diff__top-line__bg',
 			})
 		}
 
@@ -158,7 +160,7 @@ export class DifferencesView extends ItemView {
 			container.createDiv({
 				// Necessary to give the line a height when it's empty.
 				text: preventEmptyString(line),
-				cls: 'line bg-blue-light',
+				cls: 'file-diff__line file-diff__bottom-line__bg',
 			})
 		}
 	}
@@ -169,7 +171,7 @@ export class DifferencesView extends ItemView {
 		}
 
 		const containerRect = this.contentEl
-			.getElementsByClassName('container')[0]
+			.getElementsByClassName('file-diff__container')[0]
 			.getBoundingClientRect()
 		const elementRect = this.contentEl
 			.getElementsByClassName('difference')[0]

src/components/modals/delete_file_modal.ts

@@ -21,7 +21,7 @@ export class DeleteFileModal extends Modal {
 
 	onOpen(): void {
 		// Counteract gravity pull by moving box up for balanced composition
-		this.modalEl.addClass('mb-16')
+		this.modalEl.addClass('mb-20')
 
 		this.contentEl.createEl('h2', {
 			text: `Delete "${this.file2.name}"?`,
@@ -37,12 +37,12 @@ export class DeleteFileModal extends Modal {
 		const buttonContainer = this.contentEl.createDiv('button-container')
 		const cancelButton = buttonContainer.createEl('button', {
 			text: 'Cancel',
-			cls: 'mr-8',
+			cls: 'mr-2',
 		})
 		cancelButton.addEventListener('click', () => this.close())
 		const deleteButton = buttonContainer.createEl('button', {
 			text: 'Delete',
-			cls: 'button-danger',
+			cls: 'file-diff__button-danger',
 		})
 		deleteButton.addEventListener('click', () => {
 			this.app.vault.delete(this.file2)

src/components/modals/risky_action_modal.ts

@@ -10,7 +10,7 @@ export class RiskyActionModal extends Modal {
 
 	onOpen(): void {
 		// Counteract gravity pull by moving box up for balanced composition
-		this.modalEl.addClass('mb-16')
+		this.modalEl.addClass('mb-20')
 
 		this.contentEl.createEl('h2', { text: `Do you accept the risk?` })
 		this.contentEl.createEl('p', {
@@ -23,12 +23,12 @@ export class RiskyActionModal extends Modal {
 		const buttonContainer = this.contentEl.createDiv('button-container')
 		const cancelButton = buttonContainer.createEl('button', {
 			text: 'Cancel',
-			cls: 'mr-8',
+			cls: 'mr-2',
 		})
 		cancelButton.addEventListener('click', () => this.close())
 		const deleteButton = buttonContainer.createEl('button', {
 			text: 'Accept Risk',
-			cls: 'button-danger',
+			cls: 'file-diff__button-danger',
 		})
 		deleteButton.addEventListener('click', () => {
 			this.close()

styles.css

@@ -1,11 +1,11 @@
-.container {
+.file-diff__container {
 	width: 100%;
 	max-width: 100%;
 	overflow-x: scroll;
 	padding: 1rem;
 }
 
-.line {
+.file-diff__line {
 	padding: 0.1rem 0;
 }
 
@@ -14,61 +14,71 @@ button:focus-visible {
 }
 
 @media (prefers-color-scheme: light) {
-	.bg-turquoise-light {
+	.file-diff__top-line__bg {
 		background-color: #d9f4ef;
 	}
 
-	.bg-blue-light {
+	.file-diff__bottom-line__bg {
 		background-color: #d9edff;
 	}
 
-	.button-danger {
+	.file-diff__button-danger {
 		background-color: #b00020 !important;
 		color: #ffffff;
 	}
 
-	.button-danger:hover {
+	.file-diff__button-danger:hover {
 		background-color: #9f0020 !important;
 		color: #ffffff;
 	}
+
+	.file-diff__action-line {
+		color: #919191;
+	}
 }
 
 @media (prefers-color-scheme: dark) {
-	.bg-turquoise-light {
+	.file-diff__top-line__bg {
 		background-color: #25403b;
 	}
 
-	.bg-blue-light {
+	.file-diff__bottom-line__bg {
 		background-color: #25394b;
 	}
 
-	.button-danger {
+	.file-diff__button-danger {
 		background-color: #cf6679 !important;
 		color: #ffffff;
 	}
 
-	.button-danger:hover {
+	.diff__button-danger:hover {
 		background-color: #b85a6d !important;
 		color: #ffffff;
 	}
+
+	.file-diff__action-line {
+		color: #919191;
+	}
+}
+
+/* Tailwind CSS */
+.flex {
+	display: flex;
 }
 
 .flex-row {
-	display: flex;
 	flex-direction: row;
 }
 
-.gap-2 {
-	gap: 4px;
+.gap-1 {
+	gap: 0.25rem; /* 4px */
 }
 
 .no-decoration {
-	text-decoration: none;
 	text-decoration-line: none;
 }
 
 .no-decoration:hover {
-	text-decoration: none;
 	text-decoration-line: none;
 }
 
@@ -76,19 +86,16 @@ button:focus-visible {
 	font-size: 0.65rem;
 }
 
-.py-2 {
-	padding-top: 2px;
-	padding-bottom: 2px;
+/* Rename from py-0.5 to py-0-5, because dots aren't allowed in class names */
+.py-0-5 {
+	padding-top: 0.125rem; /* 2px */
+    padding-bottom: 0.125rem; /* 2px */
 }
 
-.mr-8 {
-	margin-right: 8px;
+.mr-2 {
+	margin-right: 0.5rem; /* 8px */
 }
 
-.mb-16 {
-	margin-bottom: 80px;
-}
-
-.text-gray {
-	color: #919191;
+.mb-20 {
+	margin-bottom: 5rem; /* 80px */
 }