clean up select and input styles for state calc

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

Hide file tree

Showing 4 changed files with 30 additions and 16 deletions.
diff --git a/src/select.ts b/src/select.ts
@@ -87,18 +87,18 @@ export const selectStyles = css`
     /* max-width: 30ch; */
 
     width: 100%;
-    border: var(--select-border);
-    border-radius: 4px;
-    padding: 8px;
+    border: var(--ra-select-border);
+    border-radius: var(--ra-select-border-radius);
+    padding: var(--ra-select-padding);
 
     /*   font-size: 1.25rem; */
     cursor: pointer;
     /*   line-height: 1.1; */
 
     /*   // Optional styles
   // remove for transparency */
-    background-color: #fff;
-    background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
+    background-color: var(--ra-select-background-color);
+    background-image: var(--ra-select-background-image);
 
     margin-top: 4px;
   }
@@ -116,9 +116,9 @@ export const selectStyles = css`
   .select:not(.select--multiple)::after {
     content: '';
     justify-self: end;
-    width: 0.6em;
+    width: 0.7em;
     height: 0.4em;
-    background-color: var(--select-arrow);
+    background-color: var(--ra-select-arrow-color);
     clip-path: polygon(100% 0%, 0 0%, 50% 100%);
   }
 
@@ -129,7 +129,7 @@ export const selectStyles = css`
     left: -1px;
     right: -1px;
     bottom: -1px;
-    border: 2px solid var(--select-focus);
+    border: 2px solid var(--ra-select-focus-color);
     border-radius: inherit;
   }
 
@@ -166,7 +166,7 @@ export const selectStyles = css`
     white-space: normal;
 
     // Only affects Chrome
-    outline-color: var(--select-focus);
+    outline-color: var(--ra-select-focus-color);
   }
 
   .select--disabled {

diff --git a/src/state-incentive-details.ts b/src/state-incentive-details.ts
@@ -12,7 +12,7 @@ export const stateIncentivesStyles = css`
     --ra-embed-card-border: none;
     --ra-embed-card-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.08);
     --ra-embed-card-border-radius: 0.75rem;
-    /* forms */
+    /* labels */
     --ra-form-label-font-size: 11px;
     --ra-form-label-line-height: 125%;
     --ra-form-label-font-weight: 700;
@@ -24,6 +24,13 @@ export const stateIncentivesStyles = css`
     --ra-embed-primary-button-background-color: var(--rewiring-purple);
     --ra-embed-primary-button-background-hover-color: var(--rewiring-purple-darker);
     --ra-embed-primary-button-text-color: white;
+    /* select */
+    --ra-select-border: 1px solid #E2E2E2;
+    --ra-select-focus-color: var(--rewiring-purple);
+    --ra-select-background-image: none;
+    /* input */
+    --ra-input-border: 1px solid #E2E2E2;
+    --ra-input-focus-color: var(--rewiring-purple);
   }
 
 

diff --git a/src/styles.ts b/src/styles.ts
@@ -60,6 +60,17 @@ export const baseStyles = css`
     --ra-form-label-margin: 0;
     --ra-form-label-text-transform: none;
     --ra-form-label-letter-spacing: normal;
+    /* select styles */
+    --ra-select-border: 1px solid #cccccc;
+    --ra-select-background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
+    --ra-select-border-radius: 4px;
+    --ra-select-background-color: #fff;
+    --ra-select-padding: 0.5rem 1rem;
+    --ra-select-arrow-color: #222;
+    --ra-select-focus-color: blue;
+    /* input styles */
+    --ra-input-border: 1px solid #cccccc;
+    --ra-input-focus-color: blue;
   }
 
   :host {
@@ -75,10 +86,6 @@ export const baseStyles = css`
     display: block; /* required for max-width to kick in */
     width: 100%;
     max-width: 1280px;
-    --select-border: 1px solid #cccccc;
-    --input-border: 1px solid #cccccc;
-    --select-arrow: #222;
-    --select-focus: blue;
   }
 
   * {

diff --git a/src/styles/input.ts b/src/styles/input.ts
@@ -5,7 +5,7 @@ export const inputStyles = css`
     padding: 8px;
     font-size: 16px;
     line-height: 28px;
-    border: var(--input-border);
+    border: var(--ra-input-border);
     border-radius: 4px;
     width: 100%;
     margin-top: 4px;
@@ -14,7 +14,7 @@ export const inputStyles = css`
   }
 
   input:focus {
-    box-shadow: 0 0 0 2px var(--select-focus) inset;
+    box-shadow: 0 0 0 2px var(--ra-input-focus-color) inset;
     outline: none;
   }
 `;