css variables for inputs

rewiringamerica · Sep 30, 2023 · 1a45b6b · 1a45b6b
1 parent 83be5c1
commit 1a45b6b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/styles.ts b/src/styles.ts
@@ -71,6 +71,10 @@ export const baseStyles = css`
     /* input styles */
     --ra-input-border: 1px solid #cccccc;
     --ra-input-focus-color: blue;
+    --ra-input-padding: 0.5rem 1rem;
+    --ra-input-font-size: var(--ra-embed-font-size);
+    --ra-input-line-height: var(--ra-embed-line-height);
+    --ra-input-border-radius: 4px;
   }
 
   :host {

diff --git a/src/styles/input.ts b/src/styles/input.ts
@@ -2,11 +2,11 @@ import { css } from 'lit';
 
 export const inputStyles = css`
   input {
-    padding: 8px;
-    font-size: 16px;
-    line-height: 28px;
+    padding: var(--ra-input-padding);
+    font-size: var(--ra-input-font-size);
+    line-height: var(--ra-input-line-height);
     border: var(--ra-input-border);
-    border-radius: 4px;
+    border-radius: var(--ra-input-border-radius);
     width: 100%;
     margin-top: 4px;
     margin-left: 0;