Add some vars to usa-text-input.css.js

src/components/usa-text-input/index.js

@@ -6,9 +6,9 @@ import styles from "./usa-text-input.css.js";
  *
  * @slot - This element has a slot
  *
-
  * @cssprop --theme-input-line-height - Sets the line-height of input element
  * @cssprop --theme-input-max-width - Sets the max width of the input element
+ * @cssprop --theme-input-state-border-width - Sets the border width of error and success states.
  *
  * @tagname usa-text-input
  */

src/components/usa-text-input/usa-text-input.css.js

@@ -1,19 +1,25 @@
 import { css } from "lit";
+import "../uswds-core/system-vars.css";
+import "../uswds-core/theme-vars.css";
 
 export default css`
   :host {
+    --theme-input-line-height: 1.3;
+    --theme-input-max-width: 30rem;
+    --theme-input-state-border-width: var(--usa-system-unit-05);
+
     .usa-input {
       box-sizing: border-box;
-      background: white;
+      background: var(--usa-theme-page-background-color);
       border-width: 1px;
-      border-color: #565c65;
+      border-color: var(--usa-system-color-gray-cool-60);
       border-style: solid;
       border-radius: 0;
-      color: #1b1b1b;
+      color: var(--usa-theme-text-color);
       display: block;
       height: 2.5rem;
       margin-top: 0.5rem;
-      max-width: 30rem;
+      max-width: var(--usa-system-unit-mobile-lg);
       padding: 0.5rem;
       width: 100%;
       -webkit-appearance: none;
@@ -27,17 +33,19 @@ export default css`
         Arial,
         sans-serif;
       font-size: 1.06rem;
-      line-height: 1.3;
+      line-height: var(--theme-input-line-height);
     }
 
     input:not([disabled]):focus,
     textarea:not([disabled]):focus {
-      outline: 0.25rem solid #2491ff;
-      outline-offset: 0;
+      outline-width: var(--usa-theme-focus-width);
+      outline-color: var(--usa-theme-focus-color);
+      outline-style: var(--usa-theme-focus-style);
+      outline-offset: var(--usa-theme-focus-offset);
     }
 
     .usa-label {
-      color: #1b1b1b;
+      color: var(--usa-theme-text-color);
       font-family:
         Source Sans Pro Web,
         Helvetica Neue,
@@ -46,11 +54,11 @@ export default css`
         Arial,
         sans-serif;
       font-size: 1.06rem;
-      line-height: 1.3;
+      line-height: var(--theme-input-line-height);
       display: block;
       font-weight: 400;
-      margin-top: 1.5rem;
-      max-width: 30rem;
+      margin-top: var(--usa-system-unit-3);
+      max-width: var(--usa-system-unit-mobile-lg);
     }
   }
 `;

src/components/uswds-core/system-vars.css

@@ -0,0 +1,26 @@
+:root {
+  --usa-system-color-white: #fff;
+  --usa-system-color-gray-5: #f0f0f0;
+  --usa-system-color-gray-10: #e6e6e6;
+  --usa-system-color-gray-30: #adadad;
+  --usa-system-color-gray-cool-10: #dfe1e2;
+  --usa-system-color-gray-cool-30: #a9aeb1;
+  --usa-system-color-gray-cool-60: #565c65;
+  --usa-system-color-blue-50: #2378c3;
+  --usa-system-color-blue-40v: #2491ff;
+
+  --usa-system-color-ink: #1b1b1b;
+  /* Spacing */
+  --usa-system-unit-05: .25rem;
+  --usa-system-unit-1: .5rem;
+  --usa-system-unit-105: .75rem;
+  --usa-system-unit-2: 1rem;
+  --usa-system-unit-205: 1.25rem;
+  --usa-system-unit-3: 1.5rem;
+  --usa-system-unit-4: 2rem;
+  --usa-system-unit-5: 2.5rem;
+  --usa-system-unit-6: 3rem;
+  --usa-system-unit-7: 3.5rem;
+  --usa-system-unit-mobile-lg: 30rem;
+  --usa-system-unit-desktop: 64rem;
+}

src/components/uswds-core/theme-vars.css

@@ -0,0 +1,18 @@
+:root {
+  /* Theme colors */
+  --usa-theme-color-base-lightest: var(--usa-system-color-gray-5);
+  /* Applied colors */
+  --usa-theme-page-background-color: var(--usa-system-color-white);
+  --usa-theme-text-color: var(--usa-system-color-ink);
+  /* Font weight */
+  --usa-theme-text-light: 100;
+  --usa-theme-text-bold: 700;
+  /* Font family */
+  --usa-theme-font-body: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
+  --usa-theme-grid-container-max-width: var(--usa-system-unit-desktop);
+  /* Focus styles */
+  --usa-theme-focus-color: var(--usa-system-color-blue-40v);
+  --usa-theme-focus-offset: 0;
+  --usa-theme-focus-style: solid;
+  --usa-theme-focus-width: var(--usa-system-unit-05);
+}