block-border to work with dark and light themes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/pashto-inflector",
-  "version": "3.5.2",
+  "version": "3.5.3",
   "author": "lingdocs.com",
   "description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations",
   "homepage": "https://verbs.lingdocs.com",

src/App.css

@@ -52,6 +52,10 @@ body {
     color: var(--high-contrast);
 }
 
+.block-border {
+    border: 2px solid var(--farthest);
+}
+
 .p-text {
     font-size: var(--p-text-size);
 }

src/components/blocks/Block.tsx

@@ -70,9 +70,8 @@ export default Block;
 
 function Border({ children, extraClassName, padding }: { children: JSX.Element | JSX.Element[] | string, extraClassName?: string, padding?: string }) {
     return <div
-        className={`d-flex flex-row justify-content-center align-items-center ${extraClassName ? extraClassName : ""}`}
+        className={`block-border d-flex flex-row justify-content-center align-items-center ${extraClassName ? extraClassName : ""}`}
         style={{
-            border: "2px solid black",
             padding: padding ? padding : "1rem",
             textAlign: "center",
         }}