Add CSS variables

Branches from #507

src/filetreediff.css

@@ -1,25 +1,54 @@
+/* Using --addons-* prefix variables for consistency and to allow for overrides */
+:host {
+  --addons-filetreediff-background-color: var(
+    --readthedocs-filetreediff-background-color,
+    #f8f9fa
+  );
+  --addons-filetreediff-box-shadow: var(
+    --readthedocs-filetreediff-box-shadow,
+    0 0.1rem 0.25rem rgba(0, 0, 0, 0.1)
+  );
+  --addons-filetreediff-border-color: var(
+    --readthedocs-filetreediff-border-color,
+    #ddd
+  );
+  --addons-filetreediff-font-size: var(
+    --readthedocs-filetreediff-font-size,
+    0.85rem
+  );
+  --addons-filetreediff-padding: var(
+    --readthedocs-filetreediff-padding,
+    0.25rem 0.75rem
+  );
+  --addons-filetreediff-gap: var(--readthedocs-filetreediff-gap, 0.75rem);
+  --addons-filetreediff-label-color: var(
+    --readthedocs-filetreediff-label-color,
+    #333
+  );
+}
+
 :host > div {
   position: fixed;
   top: 0;
   right: 1rem;
-  background-color: #f8f9fa;
-  padding: 0.25rem 0.75rem;
-  box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
+  background-color: var(--addons-filetreediff-background-color);
+  padding: var(--addons-filetreediff-padding);
+  box-shadow: var(--addons-filetreediff-box-shadow);
   z-index: 2000;
   border-radius: 0 0 0.375rem 0.375rem;
-  font-size: 0.85rem;
+  font-size: var(--addons-filetreediff-font-size);
 }
 
 :host > div > div {
   display: flex;
-  gap: 0.75rem;
+  gap: var(--addons-filetreediff-gap);
   align-items: center;
 }
 
 :host > div > div > select {
   flex: 1;
   padding: 0.25rem 0.5rem;
-  border: 0.0625rem solid #ddd;
+  border: 0.0625rem solid var(--addons-filetreediff-border-color);
   border-radius: 0.25rem;
   appearance: revert;
 }
@@ -28,8 +57,8 @@
   display: flex;
   align-items: center;
   gap: 0.35rem;
-  font-size: 0.85rem;
-  color: #333;
+  font-size: var(--addons-filetreediff-font-size);
+  color: var(--addons-filetreediff-label-color);
   white-space: nowrap;
   cursor: pointer;
 }