Added css variables

Author: phalkone

README.md

@@ -78,6 +78,14 @@ function App() {
 | **secondsWrapper** | Seconds-specific container   | Seconds input + " symbol                |
 | **signInput**      | Cardinal direction container | N/S/E/W dropdown selector               |
 
+### CSS variables
+
+| Variable Name              | Default Value | Description                           |
+| -------------------------- | ------------- | ------------------------------------- |
+| **border-color**           | #ccc          | Border color for input fields         |
+| **focus-background-color** | #eef6ff       | Border color for focused input fields |
+| **symbol-color**           | #6c757d       | Color for measurement symbols         |
+
 ## License
 
 MIT

lib/DMSInput.module.css

@@ -1,6 +1,6 @@
 .DMSInput {
     --border-color: #ccc;
-    --focus-border-color: #007bff;
+    --focus-background-color: #eef6ff;
     --symbol-color: #666;
     display: inline-flex;
     align-items: center;
@@ -45,7 +45,7 @@
 
 .DMSInput select:focus,
 .DMSInput input:focus {
-    background-color: var(--focus-border-color);
+    background-color: var(--focus-background-color);
 }
 
 .degrees-wrapper input {

tsconfig.app.json

@@ -8,7 +8,6 @@
     "skipLibCheck": true,
     "types": ["vitest/globals", "./lib/global.d.ts"],
 
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
@@ -18,7 +17,6 @@
     "emitDeclarationOnly": true,
     "outDir": "dist",
 
-    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,