From 669d8f914078e1459eb539efb5951746ac902ac1 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Wed, 6 Nov 2024 17:12:12 +0000
Subject: [PATCH 1/9] chore(TextInput): Update TextInput to use data attributes
 for styling

---
 .../react/src/__tests__/Textarea.test.tsx     |    8 +-
 .../__snapshots__/Autocomplete.test.tsx.snap  | 1162 +++-
 .../__snapshots__/TextInput.test.tsx.snap     | 5555 +++++++++++++----
 .../TextInputWithTokens.test.tsx.snap         | 4520 +++++++++++---
 .../internal/components/TextInputWrapper.tsx  |  300 +-
 packages/react/src/utils/testing.tsx          |   12 +-
 6 files changed, 9189 insertions(+), 2368 deletions(-)

diff --git a/packages/react/src/__tests__/Textarea.test.tsx b/packages/react/src/__tests__/Textarea.test.tsx
index 2bc0c7f6e20..b460655558c 100644
--- a/packages/react/src/__tests__/Textarea.test.tsx
+++ b/packages/react/src/__tests__/Textarea.test.tsx
@@ -84,11 +84,11 @@ describe('Textarea', () => {
       width: '100%',
       display: 'flex',
     }
-    const defaultStyles = renderStyles(<Textarea block />)
-    const blockStyles = renderStyles(<Textarea />)
+    const defaultStyles = renderStyles(<Textarea />)
+    const blockStyles = renderStyles(<Textarea block />)
 
-    expect(defaultStyles).toEqual(expect.objectContaining(expectedStyles))
-    expect(blockStyles).not.toEqual(expect.objectContaining(expectedStyles))
+    expect(defaultStyles).not.toEqual(expect.objectContaining(expectedStyles))
+    expect(blockStyles).toEqual(expect.objectContaining(expectedStyles))
   })
 
   it('renders default resize values correctly', () => {
diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index c3dd83b8058..083fbc1f028 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -3,25 +3,25 @@
 exports[`snapshots renders a custom empty state message 1`] = `
 [
   .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -36,46 +36,142 @@ exports[`snapshots renders a custom empty state message 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -83,16 +179,28 @@ exports[`snapshots renders a custom empty state message 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -109,9 +217,9 @@ exports[`snapshots renders a custom empty state message 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -157,7 +265,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
   border-width: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
 
 }
 
@@ -178,25 +286,25 @@ exports[`snapshots renders a custom empty state message 1`] = `
 exports[`snapshots renders a loading state 1`] = `
 [
   .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -211,46 +319,142 @@ exports[`snapshots renders a loading state 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -258,16 +462,28 @@ exports[`snapshots renders a loading state 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -284,9 +500,9 @@ exports[`snapshots renders a loading state 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -355,7 +571,7 @@ exports[`snapshots renders a loading state 1`] = `
   border-width: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
 
 }
 
@@ -410,25 +626,25 @@ exports[`snapshots renders a loading state 1`] = `
 exports[`snapshots renders a menu that contains an item to add to the menu 1`] = `
 [
   .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -443,46 +659,142 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -490,16 +802,28 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -540,9 +864,9 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -861,7 +1185,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
 
 }
 
@@ -1261,25 +1585,25 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 exports[`snapshots renders a multiselect input 1`] = `
 [
   .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -1294,46 +1618,142 @@ exports[`snapshots renders a multiselect input 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -1341,16 +1761,28 @@ exports[`snapshots renders a multiselect input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -1379,9 +1811,9 @@ exports[`snapshots renders a multiselect input 1`] = `
 
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -1647,7 +2079,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   }
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
 
 }
 
@@ -1990,25 +2422,25 @@ exports[`snapshots renders a multiselect input 1`] = `
 exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 [
   .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -2023,46 +2455,142 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -2070,16 +2598,28 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -2120,9 +2660,9 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -2559,7 +3099,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   }
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
 
 }
 
@@ -2902,25 +3442,25 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 exports[`snapshots renders a single select input 1`] = `
 [
   .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -2935,46 +3475,142 @@ exports[`snapshots renders a single select input 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -2982,16 +3618,28 @@ exports[`snapshots renders a single select input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -3016,9 +3664,9 @@ exports[`snapshots renders a single select input 1`] = `
 
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -3240,7 +3888,7 @@ exports[`snapshots renders a single select input 1`] = `
   }
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
 
 }
 
@@ -4006,25 +4654,25 @@ exports[`snapshots renders with a custom text input component 1`] = `
 exports[`snapshots renders with an input value 1`] = `
 [
   .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -4039,46 +4687,142 @@ exports[`snapshots renders with an input value 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -4086,16 +4830,28 @@ exports[`snapshots renders with an input value 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -4120,9 +4876,9 @@ exports[`snapshots renders with an input value 1`] = `
 
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -4176,7 +4932,7 @@ exports[`snapshots renders with an input value 1`] = `
 
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
 
 }
 
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 2c67fb764da..4c8b52d61f0 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -2,25 +2,25 @@
 
 exports[`TextInput renders 1`] = `
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -35,46 +35,142 @@ exports[`TextInput renders 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -82,16 +178,28 @@ exports[`TextInput renders 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -108,9 +216,9 @@ exports[`TextInput renders 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -132,33 +240,25 @@ exports[`TextInput renders 1`] = `
 
 exports[`TextInput renders block 1`] = `
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
 }
 
 .c0 input,
@@ -173,46 +273,142 @@ exports[`TextInput renders block 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -220,16 +416,28 @@ exports[`TextInput renders block 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -246,15 +454,16 @@ exports[`TextInput renders block 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-block={true}
   onClick={[Function]}
 >
   <input
@@ -270,26 +479,25 @@ exports[`TextInput renders block 1`] = `
 
 exports[`TextInput renders contrast 1`] = `
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0 input,
@@ -304,46 +512,142 @@ exports[`TextInput renders contrast 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -351,16 +655,28 @@ exports[`TextInput renders contrast 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -377,15 +693,16 @@ exports[`TextInput renders contrast 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-contrast={true}
   onClick={[Function]}
 >
   <input
@@ -401,26 +718,25 @@ exports[`TextInput renders contrast 1`] = `
 
 exports[`TextInput renders error 1`] = `
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0 input,
@@ -435,52 +751,142 @@ exports[`TextInput renders error 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c1 {
+  padding-right: 0;
+  padding-left: 0;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -488,16 +894,28 @@ exports[`TextInput renders error 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -514,15 +932,16 @@ exports[`TextInput renders error 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-validation="error"
   onClick={[Function]}
 >
   <input
@@ -539,31 +958,25 @@ exports[`TextInput renders error 1`] = `
 
 exports[`TextInput renders large 1`] = `
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 28px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  height: 40px;
 }
 
 .c0 input,
@@ -578,46 +991,142 @@ exports[`TextInput renders large 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -625,16 +1134,28 @@ exports[`TextInput renders large 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -651,17 +1172,17 @@ exports[`TextInput renders large 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-size="large"
   onClick={[Function]}
-  size="large"
 >
   <input
     className="c2"
@@ -676,25 +1197,25 @@ exports[`TextInput renders large 1`] = `
 
 exports[`TextInput renders leadingVisual 1`] = `
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -709,46 +1230,142 @@ exports[`TextInput renders leadingVisual 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -756,16 +1373,28 @@ exports[`TextInput renders leadingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -782,15 +1411,16 @@ exports[`TextInput renders leadingVisual 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-leading-visual={true}
   onClick={[Function]}
 >
   <span
@@ -835,25 +1465,25 @@ exports[`TextInput renders leadingVisual 1`] = `
 
 exports[`TextInput renders leadingVisual 2`] = `
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -868,70 +1498,178 @@ exports[`TextInput renders leadingVisual 2`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
 }
 
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 0;
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
 }
 
-.c1 > :not(:last-child) {
-  margin-right: 8px;
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
 }
 
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
 }
 
-.c2 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
+}
+
+.c1 {
+  padding-right: 0;
+  padding-left: 0;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: var(--base-size-8);
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted);
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
   -webkit-appearance: none;
   color: inherit;
   width: 100%;
@@ -941,15 +1679,16 @@ exports[`TextInput renders leadingVisual 2`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-leading-visual={true}
   onClick={[Function]}
 >
   <span
@@ -994,25 +1733,25 @@ exports[`TextInput renders leadingVisual 2`] = `
 
 exports[`TextInput renders leadingVisual 3`] = `
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -1027,46 +1766,142 @@ exports[`TextInput renders leadingVisual 3`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -1074,16 +1909,28 @@ exports[`TextInput renders leadingVisual 3`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -1100,15 +1947,16 @@ exports[`TextInput renders leadingVisual 3`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-leading-visual={true}
   onClick={[Function]}
 >
   <span
@@ -1135,25 +1983,25 @@ exports[`TextInput renders leadingVisual 3`] = `
 
 exports[`TextInput renders leadingVisual 4`] = `
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -1168,46 +2016,142 @@ exports[`TextInput renders leadingVisual 4`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -1215,16 +2159,28 @@ exports[`TextInput renders leadingVisual 4`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -1241,15 +2197,16 @@ exports[`TextInput renders leadingVisual 4`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-leading-visual={true}
   onClick={[Function]}
 >
   <span
@@ -1276,26 +2233,25 @@ exports[`TextInput renders leadingVisual 4`] = `
 
 exports[`TextInput renders monospace 1`] = `
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  font-family: var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);
 }
 
 .c0 input,
@@ -1310,46 +2266,142 @@ exports[`TextInput renders monospace 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -1357,16 +2409,28 @@ exports[`TextInput renders monospace 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -1383,15 +2447,16 @@ exports[`TextInput renders monospace 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-monospace={true}
   onClick={[Function]}
 >
   <input
@@ -1407,25 +2472,25 @@ exports[`TextInput renders monospace 1`] = `
 
 exports[`TextInput renders placeholder 1`] = `
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -1440,46 +2505,142 @@ exports[`TextInput renders placeholder 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input::-moz-placeholder,
+.c0 textarea::-moz-placeholder,
+.c0 select::-moz-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
 }
 
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
 }
 
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -1487,16 +2648,28 @@ exports[`TextInput renders placeholder 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -1513,9 +2686,9 @@ exports[`TextInput renders placeholder 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
@@ -1538,33 +2711,25 @@ exports[`TextInput renders placeholder 1`] = `
 
 exports[`TextInput renders small 1`] = `
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 20px;
-  min-height: 28px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  font-size: 12px;
-  line-height: 20px;
 }
 
 .c0 input,
@@ -1579,46 +2744,142 @@ exports[`TextInput renders small 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -1626,16 +2887,28 @@ exports[`TextInput renders small 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -1652,17 +2925,17 @@ exports[`TextInput renders small 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-size="small"
   onClick={[Function]}
-  size="small"
 >
   <input
     className="c2"
@@ -2100,25 +3373,25 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -2133,40 +3406,142 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -2174,16 +3549,28 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -2226,15 +3613,16 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   }
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-action={true}
   onClick={[Function]}
 >
   <input
@@ -2627,25 +4015,25 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -2653,47 +4041,149 @@ exports[`TextInput renders trailingAction text button 1`] = `
   cursor: text;
 }
 
-.c0 select {
-  cursor: pointer;
+.c0 select {
+  cursor: pointer;
+}
+
+.c0 input::-webkit-input-placeholder,
+.c0 textarea::-webkit-input-placeholder,
+.c0 select::-webkit-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input::-moz-placeholder,
+.c0 textarea::-moz-placeholder,
+.c0 select::-moz-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
 }
 
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
 }
 
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
 }
 
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -2701,16 +4191,28 @@ exports[`TextInput renders trailingAction text button 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -2747,15 +4249,16 @@ exports[`TextInput renders trailingAction text button 1`] = `
   }
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-action={true}
   onClick={[Function]}
 >
   <input
@@ -3233,25 +4736,25 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -3266,40 +4769,142 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -3307,16 +4912,28 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -3359,15 +4976,16 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   }
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-action={true}
   onClick={[Function]}
 >
   <input
@@ -3429,25 +5047,25 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 exports[`TextInput renders trailingVisual 1`] = `
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -3462,46 +5080,142 @@ exports[`TextInput renders trailingVisual 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -3509,16 +5223,28 @@ exports[`TextInput renders trailingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -3535,15 +5261,16 @@ exports[`TextInput renders trailingVisual 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-visual={true}
   onClick={[Function]}
 >
   <input
@@ -3588,25 +5315,25 @@ exports[`TextInput renders trailingVisual 1`] = `
 
 exports[`TextInput renders trailingVisual 2`] = `
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -3621,46 +5348,142 @@ exports[`TextInput renders trailingVisual 2`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input::-moz-placeholder,
+.c0 textarea::-moz-placeholder,
+.c0 select::-moz-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
 }
 
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
 }
 
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -3668,16 +5491,28 @@ exports[`TextInput renders trailingVisual 2`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -3694,15 +5529,16 @@ exports[`TextInput renders trailingVisual 2`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-visual={true}
   onClick={[Function]}
 >
   <input
@@ -3747,25 +5583,25 @@ exports[`TextInput renders trailingVisual 2`] = `
 
 exports[`TextInput renders trailingVisual 3`] = `
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -3780,46 +5616,142 @@ exports[`TextInput renders trailingVisual 3`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -3827,16 +5759,28 @@ exports[`TextInput renders trailingVisual 3`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -3853,15 +5797,16 @@ exports[`TextInput renders trailingVisual 3`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-visual={true}
   onClick={[Function]}
 >
   <input
@@ -3888,25 +5833,25 @@ exports[`TextInput renders trailingVisual 3`] = `
 
 exports[`TextInput renders trailingVisual 4`] = `
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -3921,46 +5866,142 @@ exports[`TextInput renders trailingVisual 4`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -3968,16 +6009,28 @@ exports[`TextInput renders trailingVisual 4`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -3994,15 +6047,16 @@ exports[`TextInput renders trailingVisual 4`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
+  data-trailing-visual={true}
   onClick={[Function]}
 >
   <input
@@ -4057,25 +6111,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -4090,46 +6144,142 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -4137,16 +6287,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -4163,23 +6325,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-trailing-visual={true}
     onClick={[Function]}
   >
     <input
@@ -4275,25 +6430,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -4308,46 +6463,142 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -4355,16 +6606,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -4381,23 +6644,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-leading-visual={true}
     onClick={[Function]}
   >
     <span
@@ -4531,25 +6787,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -4564,46 +6820,142 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -4611,16 +6963,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -4637,23 +7001,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-trailing-visual={true}
     onClick={[Function]}
   >
     <input
@@ -4758,25 +7115,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -4791,46 +7148,142 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -4838,16 +7291,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c5 {
@@ -4864,23 +7329,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-leading-visual={true}
     onClick={[Function]}
   >
     <span
@@ -5059,25 +7517,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -5092,46 +7550,142 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -5139,16 +7693,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c5 {
@@ -5165,23 +7731,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-leading-visual={true}
     onClick={[Function]}
   >
     <span
@@ -5360,25 +7919,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -5393,46 +7952,142 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -5440,16 +8095,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c5 {
@@ -5466,23 +8133,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-leading-visual={true}
+    data-trailing-visual={true}
     onClick={[Function]}
   >
     <span
@@ -5655,25 +8316,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -5688,46 +8349,142 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -5735,16 +8492,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -5761,23 +8530,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-trailing-visual={true}
     onClick={[Function]}
   >
     <input
@@ -5912,25 +8674,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -5945,46 +8707,142 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -5992,16 +8850,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -6018,23 +8888,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-leading-visual={true}
+    data-trailing-visual={true}
     onClick={[Function]}
   >
     <span
@@ -6207,25 +9071,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -6240,46 +9104,142 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
   padding-left: 0;
-  padding-right: 12px;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -6287,16 +9247,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -6313,23 +9285,16 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-trailing-visual={true}
     onClick={[Function]}
   >
     <input
@@ -6473,33 +9438,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 20px;
-  min-height: 28px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  font-size: 12px;
-  line-height: 20px;
 }
 
 .c0 input,
@@ -6514,46 +9471,142 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -6561,16 +9614,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c5 {
@@ -6587,25 +9652,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-leading-visual={true}
+    data-size="small"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="small"
   >
     <span
       className="TextInput-icon"
@@ -6822,25 +9881,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -6855,46 +9914,142 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -6902,16 +10057,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c5 {
@@ -6928,23 +10095,17 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-leading-visual={true}
+    data-trailing-visual={true}
     onClick={[Function]}
   >
     <span
@@ -7162,31 +10323,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 28px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  height: 40px;
 }
 
 .c0 input,
@@ -7201,46 +10356,142 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-right: 12px;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -7248,16 +10499,28 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c5 {
@@ -7274,25 +10537,19 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
+    data-leading-visual={true}
+    data-size="large"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="large"
   >
     <span
       className="TextInput-icon"
@@ -7462,25 +10719,25 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 exports[`TextInput should render a password input 1`] = `
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
 }
 
 .c0 input,
@@ -7495,46 +10752,142 @@ exports[`TextInput should render a password input 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
+}
+
+.c1 > input,
+.c1 > select {
   padding-right: 0;
+  padding-left: 0;
 }
 
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -7542,16 +10895,28 @@ exports[`TextInput should render a password input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c2 {
@@ -7568,9 +10933,9 @@ exports[`TextInput should render a password input 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index 14af2deae2f..5232b41375f 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -53,26 +53,25 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -90,49 +89,145 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-left: 12px;
-  padding-right: 12px;
-  padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -140,16 +235,28 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -293,16 +400,18 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-leading-visual={true}
+  data-size="medium"
+  data-trailing-visual={true}
   onClick={[Function]}
-  size="medium"
 >
   <span
     aria-hidden="true"
@@ -865,26 +974,25 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -902,49 +1010,145 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -952,16 +1156,28 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -1105,16 +1321,16 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -1284,34 +1500,25 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -1334,42 +1541,132 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -1380,8 +1677,14 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   width: 100%;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -1389,16 +1692,28 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -1416,16 +1731,17 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-block={true}
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -1500,26 +1816,25 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -1539,42 +1854,132 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -1582,8 +1987,14 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   overflow: auto;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -1591,16 +2002,28 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -1744,16 +2167,16 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -2228,33 +2651,25 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 20px;
-  min-height: 28px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  font-size: 12px;
-  line-height: 20px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -2272,49 +2687,145 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -2322,16 +2833,28 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -2473,16 +2996,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="small"
   onClick={[Function]}
-  size="small"
 >
   <div
     className="c2"
@@ -2957,33 +3480,25 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 20px;
-  min-height: 28px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  font-size: 12px;
-  line-height: 20px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -3001,49 +3516,145 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -3051,16 +3662,28 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -3202,16 +3825,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="small"
   onClick={[Function]}
-  size="small"
 >
   <div
     className="c2"
@@ -3686,86 +4309,181 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
-.c0 input,
-.c0 textarea {
-  cursor: text;
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0 input::-webkit-input-placeholder,
+.c0 textarea::-webkit-input-placeholder,
+.c0 select::-webkit-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input::-moz-placeholder,
+.c0 textarea::-moz-placeholder,
+.c0 select::-moz-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
 }
 
-.c0 select {
-  cursor: pointer;
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
 }
 
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
 }
 
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
 }
 
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
 }
 
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -3773,16 +4491,28 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -3924,20 +4654,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -4412,26 +5138,25 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -4449,49 +5174,145 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -4499,16 +5320,28 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -4652,20 +5485,16 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -5140,26 +5969,25 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -5178,50 +6006,146 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
   overflow: auto;
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -5229,16 +6153,28 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -5382,16 +6318,16 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -5866,26 +6802,25 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -5896,56 +6831,152 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   cursor: text;
 }
 
-.c0 select {
-  cursor: pointer;
+.c0 select {
+  cursor: pointer;
+}
+
+.c0 input::-webkit-input-placeholder,
+.c0 textarea::-webkit-input-placeholder,
+.c0 select::-webkit-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input::-moz-placeholder,
+.c0 textarea::-moz-placeholder,
+.c0 select::-moz-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
 }
 
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
 }
 
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
 }
 
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -5953,16 +6984,28 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -6056,16 +7099,16 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -6323,26 +7366,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -6360,49 +7402,145 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 12px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -6410,16 +7548,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -6563,20 +7713,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-size="medium"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="medium"
   >
     <div
       className="c2"
@@ -7111,26 +8258,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -7148,49 +8294,145 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-left: 12px;
-  padding-right: 0;
-  padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -7198,16 +8440,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c6 {
@@ -7351,20 +8605,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-leading-visual={true}
+    data-size="medium"
     onClick={[Function]}
-    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -7936,86 +9187,181 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
-.c0 input,
-.c0 textarea {
-  cursor: text;
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0 input::-webkit-input-placeholder,
+.c0 textarea::-webkit-input-placeholder,
+.c0 select::-webkit-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input::-moz-placeholder,
+.c0 textarea::-moz-placeholder,
+.c0 select::-moz-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
 }
 
-.c0 select {
-  cursor: pointer;
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
 }
 
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
 }
 
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
 }
 
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 12px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -8023,16 +9369,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -8176,20 +9534,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-size="medium"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="medium"
   >
     <div
       className="c2"
@@ -8733,26 +10088,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -8770,49 +10124,145 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-left: 12px;
-  padding-right: 0;
-  padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -8820,16 +10270,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c7 {
@@ -8973,20 +10435,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-leading-visual={true}
+    data-size="medium"
     onClick={[Function]}
-    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -9603,26 +11062,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -9640,49 +11098,145 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-left: 12px;
-  padding-right: 0;
-  padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -9690,16 +11244,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c7 {
@@ -9843,20 +11409,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-leading-visual={true}
+    data-size="medium"
     onClick={[Function]}
-    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -10473,86 +12036,181 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
-.c0 input,
-.c0 textarea {
-  cursor: text;
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0 input::-webkit-input-placeholder,
+.c0 textarea::-webkit-input-placeholder,
+.c0 select::-webkit-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input::-moz-placeholder,
+.c0 textarea::-moz-placeholder,
+.c0 select::-moz-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
 }
 
-.c0 select {
-  cursor: pointer;
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
 }
 
-.c0 input::-webkit-input-placeholder,
-.c0 textarea::-webkit-input-placeholder,
-.c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
 }
 
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
 }
 
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
 }
 
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-left: 12px;
-  padding-right: 12px;
-  padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -10560,16 +12218,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c7 {
@@ -10713,20 +12383,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-leading-visual={true}
+    data-size="medium"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -11337,26 +13005,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -11374,49 +13041,145 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 12px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -11424,16 +13187,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -11577,20 +13352,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-size="medium"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="medium"
   >
     <div
       className="c2"
@@ -12164,26 +13936,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -12201,49 +13972,145 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-left: 12px;
-  padding-right: 12px;
-  padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -12251,16 +14118,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c6 {
@@ -12404,20 +14283,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-leading-visual={true}
+    data-size="medium"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -13028,26 +14905,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -13065,49 +14941,145 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input::-moz-placeholder,
+.c0 textarea::-moz-placeholder,
+.c0 select::-moz-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
 }
 
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
 }
 
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 12px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -13115,16 +15087,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -13268,20 +15252,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-size="medium"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="medium"
   >
     <div
       className="c2"
@@ -13864,33 +15845,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 20px;
-  min-height: 28px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  font-size: 12px;
-  line-height: 20px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -13908,49 +15881,145 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-left: 12px;
-  padding-right: 12px;
-  padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -13958,16 +16027,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c7 {
@@ -14109,20 +16190,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
     className="c0 c1"
+    data-leading-visual={true}
+    data-size="small"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="small"
   >
     <span
       className="TextInput-icon"
@@ -14778,26 +16857,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -14815,49 +16893,145 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-left: 12px;
-  padding-right: 12px;
-  padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -14865,16 +17039,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c7 {
@@ -15018,20 +17204,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-leading-visual={true}
+    data-size="medium"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -15687,26 +17871,25 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -15724,49 +17907,145 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input::-moz-placeholder,
+.c0 textarea::-moz-placeholder,
+.c0 select::-moz-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input:-ms-input-placeholder,
+.c0 textarea:-ms-input-placeholder,
+.c0 select:-ms-input-placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0 input::placeholder,
+.c0 textarea::placeholder,
+.c0 select::placeholder {
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
+}
+
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
 }
 
-.c0 input::-moz-placeholder,
-.c0 textarea::-moz-placeholder,
-.c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 input:-ms-input-placeholder,
-.c0 textarea:-ms-input-placeholder,
-.c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
 }
 
-.c0 input::placeholder,
-.c0 textarea::placeholder,
-.c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -1px;
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
 }
 
-.c0 > textarea {
-  padding: 12px;
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-left: 12px;
-  padding-right: 12px;
-  padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -15774,16 +18053,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 0;
-  padding-right: 0;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c7 {
@@ -15925,20 +18216,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
-@media (min-width:768px) {
-
-}
-
 <span
     className="c0 c1"
+    data-leading-visual={true}
+    data-size="medium"
+    data-trailing-visual={true}
     onClick={[Function]}
-    size="medium"
   >
     <span
       className="TextInput-icon"
@@ -16560,26 +18849,25 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -16597,49 +18885,145 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -16647,16 +19031,28 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -16800,16 +19196,16 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -17271,26 +19667,25 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -17308,49 +19703,145 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -17358,16 +19849,28 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -17523,16 +20026,16 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   bottom: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
@@ -17954,26 +20457,25 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 }
 
 .c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  vertical-align: middle;
-  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
-  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
-  border-radius: 6px;
-  outline: none;
-  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  min-height: 32px;
+  overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  min-height: 32px;
-  overflow: hidden;
-  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -17991,49 +20493,145 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 .c0 input::-webkit-input-placeholder,
 .c0 textarea::-webkit-input-placeholder,
 .c0 select::-webkit-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::-moz-placeholder,
 .c0 textarea::-moz-placeholder,
 .c0 select::-moz-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input:-ms-input-placeholder,
 .c0 textarea:-ms-input-placeholder,
 .c0 select:-ms-input-placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
 .c0 input::placeholder,
 .c0 textarea::placeholder,
 .c0 select::placeholder {
-  color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
+  color: var(---control-fgColor-placeholder,var(--fgColor-muted));
 }
 
-.c0:focus-within {
-  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+.c0:where([data-trailing-action][data-focused]),
+.c0:where(:not([data-trailing-action]):focus-within) {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
   outline-offset: -1px;
 }
 
 .c0 > textarea {
-  padding: 12px;
+  padding: var(--base-size-12);
+}
+
+.c0:where([data-contrast]) {
+  background-color: var(--bgColor-inset);
+}
+
+.c0:where([data-disabled]) {
+  color: var(--fgColor-disabled);
+  background-color: var(--control-bgColor-disabled);
+  border-color: var(--control-borderColor-disabled);
+  box-shadow: none;
+}
+
+.c0:where([data-disabled]) input,
+.c0:where([data-disabled]) textarea,
+.c0:where([data-disabled]) select {
+  cursor: not-allowed;
+}
+
+.c0:where([data-monospace]) {
+  font-family: var(--fontStack-monospace);
+}
+
+.c0:where([data-validation='error']) {
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.c0:where([data-validation='error']):where([data-trailing-action][data-focused]),
+.c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within {
+  border-color: var(--fgColor-accent);
+  outline: 2px solid var(--fgColor-accent);
+  outline-offset: -1px;
+}
+
+.c0:where([data-validation='success']) {
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.c0:where([data-block]) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0:where([data-size='small']) {
+  --inner-action-size: var(--base-size-20);
+  min-height: var(--base-size-28);
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-size='medium']) {
+  --inner-action-size: var(--base-size-24);
+}
+
+.c0:where([data-size='large']) {
+  --inner-action-size: var(--base-size-28);
+  height: var(--base-size-40);
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+}
+
+.c0:where([data-variant='small']) {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 3px;
+  padding-left: var(--base-size-8);
+  font-size: (--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.c0:where([data-variant='large']) {
+  padding-top: 10px;
+  padding-right: var(--base-size-8);
+  padding-bottom: 10px;
+  padding-left: var(--base-size-8);
+  font-size: var(--text-title-size-medium);
 }
 
 .c1 {
+  padding-right: 0;
+  padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
 }
 
+.c1 > input,
+.c1 > select {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .c1 > :not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 }
 
 .c1 .TextInput-icon,
@@ -18041,16 +20639,28 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  color: var(--fgColor-muted);
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 12px;
+.c1:where([data-leading-visual]) {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where([data-trailing-visual]:not([data-trailing-action])) {
+  padding-right: var(--base-size-12);
+}
+
+.c1:where(:not([data-leading-visual])) > input,
+.c1:where(:not([data-leading-visual])) > select {
+  padding-left: var(--base-size-12);
+}
+
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+.c1:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+  padding-right: var(--base-size-12);
 }
 
 .c4 {
@@ -18068,16 +20678,16 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   outline: 0;
 }
 
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
-    font-size: 14px;
+    font-size: var(--text-body-size-medium);
   }
 }
 
 <span
   className="c0 c1"
+  data-size="medium"
   onClick={[Function]}
-  size="medium"
 >
   <div
     className="c2"
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 2ae20272b5b..543b931e809 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -1,7 +1,7 @@
-import styled, {css} from 'styled-components'
+import React from 'react'
+import styled from 'styled-components'
 import type {MaxWidthProps, MinWidthProps, WidthProps} from 'styled-system'
 import {maxWidth, minWidth, variant, width} from 'styled-system'
-import {get} from '../../constants'
 import type {SxProp} from '../../sx'
 import sx from '../../sx'
 import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
@@ -56,56 +56,37 @@ export type StyledBaseWrapperProps = {
   isInputFocused?: boolean
   monospace?: boolean
   validationStatus?: FormValidationStatus
+  /** @deprecated Use `size` prop instead */
+  variant?: TextInputSizes
+  size?: TextInputSizes
 } & WidthProps &
   MinWidthProps &
   MaxWidthProps &
-  SxProp
+  SxProp &
+  React.ComponentPropsWithoutRef<'span'>
 
 export type StyledWrapperProps = {
   hasLeadingVisual?: boolean
   hasTrailingVisual?: boolean
-  /** @deprecated Use `size` prop instead */
-  variant?: TextInputSizes
-  size?: TextInputSizes
 } & StyledBaseWrapperProps
 
 const textInputBasePadding = '12px'
 export const textInputHorizPadding = textInputBasePadding
 
-const renderFocusStyles = (hasTrailingAction: boolean, isInputFocused: boolean) => {
-  if (hasTrailingAction) {
-    return (
-      isInputFocused &&
-      css`
-        border-color: ${get('colors.accent.fg')};
-        outline: 2px solid ${get('colors.accent.fg')};
-        outline-offset: -1px;
-      `
-    )
-  }
-  return css`
-    &:focus-within {
-      border-color: ${get('colors.accent.fg')};
-      outline: 2px solid ${get('colors.accent.fg')};
-      outline-offset: -1px;
-    }
-  `
-}
-
-export const TextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
-  font-size: ${get('fontSizes.1')};
-  line-height: 20px;
-  color: ${get('colors.fg.default')};
-  vertical-align: middle;
-  background-color: ${get('colors.canvas.default')};
-  border: 1px solid var(--control-borderColor-rest, ${get('colors.border.default')});
-  border-radius: ${get('radii.2')};
-  outline: none;
-  box-shadow: ${get('shadows.primer.shadow.inset')};
+export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
   display: inline-flex;
-  align-items: stretch;
   min-height: 32px;
   overflow: hidden;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--base-size-20);
+  color: var(--fgColor-default);
+  vertical-align: middle;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-inset);
+  align-items: stretch;
 
   input,
   textarea {
@@ -120,68 +101,112 @@ export const TextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
   textarea,
   select {
     &::placeholder {
-      color: var(---control-fgColor-placeholder, ${get('colors.fg.muted')});
+      color: var(---control-fgColor-placeholder, var(--fgColor-muted));
     }
   }
 
-  ${props => renderFocusStyles(Boolean(props.hasTrailingAction), Boolean(props.isInputFocused))}
+  &:where([data-trailing-action][data-focused]),
+  &:where(:not([data-trailing-action]):focus-within) {
+    border-color: var(--fgColor-accent);
+    outline: 2px solid var(--fgColor-accent);
+    outline-offset: -1px;
+  }
 
   > textarea {
-    padding: ${textInputBasePadding};
-  }
-
-  ${props =>
-    props.contrast &&
-    css`
-      background-color: ${get('colors.canvas.inset')};
-    `}
-
-  ${props =>
-    props.disabled &&
-    css`
-      color: ${get('colors.primer.fg.disabled')};
-      background-color: ${get('colors.input.disabledBg')};
-      box-shadow: none;
-      border-color: var(--control-borderColor-disabled, ${get('colors.border.default')});
-
-      input,
-      textarea,
-      select {
-        cursor: not-allowed;
-      }
-    `}
-
-    ${props =>
-    props.monospace &&
-    css`
-      font-family: ${get('fonts.mono')};
-    `}
-
-  ${props =>
-    props.validationStatus === 'error' &&
-    css`
-      border-color: ${get('colors.danger.emphasis')};
-      ${renderFocusStyles(Boolean(props.hasTrailingAction), Boolean(props.isInputFocused))}
-    `}
-
-
-  ${props =>
-    props.validationStatus === 'success' &&
-    css`
-      border-color: ${get('colors.success.emphasis')};
-    `}
-
-  ${props =>
-    props.block &&
-    css`
-      width: 100%;
-      display: flex;
-      align-self: stretch;
-    `}
-
-  // Ensures inputs don' t zoom on mobile but are body-font size on desktop
-  @media (min-width: ${get('breakpoints.1')}) {
-    font-size: ${get('fontSizes.1')};
+    padding: var(--base-size-12);
+  }
+
+  &:where([data-contrast]) {
+    background-color: var(--bgColor-inset);
+  }
+
+  &:where([data-disabled]) {
+    color: var(--fgColor-disabled);
+    background-color: var(--control-bgColor-disabled);
+    border-color: var(--control-borderColor-disabled);
+    box-shadow: none;
+
+    input,
+    textarea,
+    select {
+      cursor: not-allowed;
+    }
+  }
+
+  &:where([data-monospace]) {
+    font-family: var(--fontStack-monospace);
+  }
+
+  &:where([data-validation='error']) {
+    border-color: var(--borderColor-danger-emphasis);
+
+    &:where([data-trailing-action][data-focused]),
+    &:where(:not([data-trailing-action])):focus-within {
+      border-color: var(--fgColor-accent);
+      outline: 2px solid var(--fgColor-accent);
+      outline-offset: -1px;
+    }
+  }
+
+  &:where([data-validation='success']) {
+    border-color: var(--borderColor-success-emphasis);
+  }
+
+  &:where([data-block]) {
+    display: flex;
+    width: 100%;
+    align-self: stretch;
+  }
+
+  /* Ensures inputs don' t zoom on mobile but are body-font size on desktop */
+  @media (min-width: var(--breakpoint-medium)) {
+    font-size: var(--text-body-size-medium);
+  }
+
+  &:where([data-size='small']) {
+    --inner-action-size: var(--base-size-20);
+
+    min-height: var(--base-size-28);
+    padding-top: 3px;
+    padding-right: var(--base-size-8);
+    padding-bottom: 3px;
+    padding-left: var(--base-size-8);
+    font-size: var(--text-body-size-small);
+    line-height: var(--base-size-20);
+  }
+
+  &:where([data-size='medium']) {
+    --inner-action-size: var(--base-size-24);
+  }
+
+  &:where([data-size='large']) {
+    --inner-action-size: var(--base-size-28);
+
+    height: var(--base-size-40);
+    padding-top: 10px;
+    padding-right: var(--base-size-8);
+    padding-bottom: 10px;
+    padding-left: var(--base-size-8);
+  }
+
+  /* Deprecated */
+  &:where([data-variant='small']) {
+    min-height: 28px;
+    padding-top: 3px;
+    padding-right: var(--base-size-8);
+    padding-bottom: 3px;
+    padding-left: var(--base-size-8);
+    font-size: (--text-body-size-small);
+    line-height: var(--base-size-20);
+  }
+
+  /* Deprecated */
+  &:where([data-variant='large']) {
+    padding-top: 10px;
+    padding-right: var(--base-size-8);
+    padding-bottom: 10px;
+    padding-left: var(--base-size-8);
+    font-size: var(--text-title-size-medium);
   }
 
   ${width}
@@ -192,33 +217,92 @@ export const TextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
   ${sx};
 `
 
-const TextInputWrapper = styled(TextInputBaseWrapper)<StyledWrapperProps>`
-  background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
-  background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
+export function TextInputBaseWrapper(props: React.PropsWithChildren<StyledBaseWrapperProps>) {
+  const {
+    variant,
+    size,
+    isInputFocused,
+    hasTrailingAction,
+    validationStatus,
+    disabled,
+    contrast,
+    monospace,
+    block,
+    ...restProps
+  } = props
+  return (
+    <StyledTextInputBaseWrapper
+      data-variant={variant}
+      data-size={size}
+      data-focused={isInputFocused || undefined}
+      data-trailing-action={hasTrailingAction || undefined}
+      data-validation={validationStatus}
+      data-disabled={disabled || undefined}
+      data-contrast={contrast || undefined}
+      data-monospace={monospace || undefined}
+      data-block={block || undefined}
+      {...restProps}
+    />
+  )
+}
+
+const StyledTextInputWrapper = styled(TextInputBaseWrapper)<StyledWrapperProps>`
+  padding-right: 0;
+  padding-left: 0;
+
+  > input,
+  > select {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  /* Repeat and position set for form states (success, error, etc) */
+  background-repeat: no-repeat;
+
+  /* For form validation. This keeps images 8px from right and centered vertically. */
+  background-position: right 8px center;
 
   & > :not(:last-child) {
-    margin-right: ${get('space.2')};
+    margin-right: var(--base-size-8);
   }
 
   .TextInput-icon,
   .TextInput-action {
     align-self: center;
-    color: ${get('colors.fg.muted')};
+    color: var(--fgColor-muted);
     flex-shrink: 0;
   }
 
-  ${props => css`
-    padding-left: ${props.hasLeadingVisual ? textInputHorizPadding : 0};
-    padding-right: ${props.hasTrailingVisual && !props.hasTrailingAction ? textInputHorizPadding : 0};
+  &:where([data-leading-visual]) {
+    padding-left: var(--base-size-12);
+  }
 
-    > input,
-    > select {
-      padding-left: ${!props.hasLeadingVisual ? textInputHorizPadding : 0};
-      padding-right: ${!props.hasTrailingVisual && !props.hasTrailingAction ? textInputHorizPadding : 0};
-    }
-  `}
+  &:where([data-trailing-visual]:not([data-trailing-action])) {
+    padding-right: var(--base-size-12);
+  }
+
+  &:where(:not([data-leading-visual])) > input,
+  &:where(:not([data-leading-visual])) > select {
+    padding-left: var(--base-size-12);
+  }
+
+  &:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,
+  &:where(:not([data-trailing-visual]):not([data-trailing-action])) > select {
+    padding-right: var(--base-size-12);
+  }
 
   ${sx};
 `
 
+export function TextInputWrapper(props: React.PropsWithChildren<StyledWrapperProps>) {
+  const {hasLeadingVisual, hasTrailingVisual, ...restProps} = props
+  return (
+    <StyledTextInputWrapper
+      data-leading-visual={hasLeadingVisual || undefined}
+      data-trailing-visual={hasTrailingVisual || undefined}
+      {...restProps}
+    />
+  )
+}
+
 export default TextInputWrapper
diff --git a/packages/react/src/utils/testing.tsx b/packages/react/src/utils/testing.tsx
index 5699aa85ca1..a36424381d7 100644
--- a/packages/react/src/utils/testing.tsx
+++ b/packages/react/src/utils/testing.tsx
@@ -87,15 +87,21 @@ export function percent(value: number | string): string {
 
 export function renderStyles(node: React.ReactElement) {
   const {
-    props: {className},
+    props: {className, ...restProps},
   } = render(node)
-  return getComputedStyles(className)
+  return getComputedStyles(className, restProps)
 }
 
-export function getComputedStyles(className: string) {
+export function getComputedStyles(className: string, restProps?: Record<string, string | undefined>) {
   const div = document.createElement('div')
   div.className = className
 
+  if (restProps) {
+    for (const [key, value] of Object.entries(restProps)) {
+      if (value !== undefined) div.setAttribute(key, value)
+    }
+  }
+
   const computed: ComputedStyles = {}
   for (const sheet of document.styleSheets) {
     // CSSRulesLists assumes every rule is a CSSRule, not a CSSStyleRule

From 19d0b08708542adc59a7d25c3f64d88188880980 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Wed, 6 Nov 2024 17:31:17 +0000
Subject: [PATCH 2/9] remove variant functions

---
 .../internal/components/TextInputWrapper.tsx  | 44 +------------------
 1 file changed, 1 insertion(+), 43 deletions(-)

diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 543b931e809..08d5348084f 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -1,53 +1,13 @@
 import React from 'react'
 import styled from 'styled-components'
 import type {MaxWidthProps, MinWidthProps, WidthProps} from 'styled-system'
-import {maxWidth, minWidth, variant, width} from 'styled-system'
+import {maxWidth, minWidth, width} from 'styled-system'
 import type {SxProp} from '../../sx'
 import sx from '../../sx'
 import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
 
 export type TextInputSizes = 'small' | 'medium' | 'large'
 
-const sizeDeprecatedVariants = variant({
-  variants: {
-    small: {
-      minHeight: '28px',
-      px: 2,
-      py: '3px',
-      fontSize: 0,
-      lineHeight: '20px',
-    },
-    large: {
-      px: 2,
-      py: '10px',
-      fontSize: 3,
-    },
-  },
-})
-
-const sizeVariants = variant({
-  prop: 'size',
-  variants: {
-    small: {
-      '--inner-action-size': '20px',
-      minHeight: '28px',
-      px: 2,
-      py: '3px',
-      fontSize: 0,
-      lineHeight: '20px',
-    },
-    medium: {
-      '--inner-action-size': '24px',
-    },
-    large: {
-      '--inner-action-size': '28px',
-      px: 2,
-      py: '10px',
-      height: '40px',
-    },
-  },
-})
-
 export type StyledBaseWrapperProps = {
   block?: boolean
   contrast?: boolean
@@ -212,8 +172,6 @@ export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
   ${width}
   ${minWidth}
   ${maxWidth}
-  ${sizeDeprecatedVariants}
-  ${sizeVariants}
   ${sx};
 `
 

From 51aed915f31a4f4b4fe75dac1d9621ebb9de0bb7 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Wed, 6 Nov 2024 17:37:49 +0000
Subject: [PATCH 3/9] add data attrs

---
 packages/react/src/utils/testing.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/utils/testing.tsx b/packages/react/src/utils/testing.tsx
index a36424381d7..a01cb435dec 100644
--- a/packages/react/src/utils/testing.tsx
+++ b/packages/react/src/utils/testing.tsx
@@ -98,7 +98,7 @@ export function getComputedStyles(className: string, restProps?: Record<string,
 
   if (restProps) {
     for (const [key, value] of Object.entries(restProps)) {
-      if (value !== undefined) div.setAttribute(key, value)
+      if (key.startsWith('data-') && value !== undefined) div.setAttribute(key, value)
     }
   }
 

From e3617eef1e0a30ca95ee38efc628f9aba313b085 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Wed, 6 Nov 2024 20:16:54 +0000
Subject: [PATCH 4/9] update jest snapshots

---
 .../__snapshots__/TextInput.test.tsx.snap     | 238 ------------------
 .../TextInputWithTokens.test.tsx.snap         | 231 +----------------
 2 files changed, 1 insertion(+), 468 deletions(-)

diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 3db4bfb4661..4c8b52d61f0 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -2931,18 +2931,6 @@ exports[`TextInput renders small 1`] = `
   }
 }
 
-@media screen and (min-width:544px) {
-  .c0 {
-    font-size: 12px;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c0 {
-    font-size: 12px;
-  }
-}
-
 <span
   aria-busy={false}
   className="c0 c1 TextInput-wrapper"
@@ -6343,22 +6331,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
@@ -6678,25 +6650,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
@@ -7054,25 +7007,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
@@ -7401,25 +7335,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
@@ -7822,25 +7737,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
@@ -8243,25 +8139,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
@@ -8659,25 +8536,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
@@ -9036,25 +8894,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
@@ -9452,25 +9291,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
@@ -9838,25 +9658,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media screen and (min-width:544px) {
-  .c0 {
-    font-size: 12px;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c0 {
-    font-size: 12px;
-  }
-}
-
-@media (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
@@ -10300,25 +10101,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     aria-busy={true}
     className="c0 c1 TextInput-wrapper"
@@ -10755,27 +10537,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   outline: 0;
 }
 
-<<<<<<< HEAD
 @media (min-width:var(--breakpoint-medium)) {
-=======
-@media (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
   .c0 {
     font-size: var(--text-body-size-medium);
   }
diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index b387cc83800..5232b41375f 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -3002,18 +3002,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   }
 }
 
-@media screen and (min-width:544px) {
-  .c0 {
-    font-size: 12px;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c0 {
-    font-size: 12px;
-  }
-}
-
 <span
   className="c0 c1"
   data-size="small"
@@ -3843,18 +3831,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   }
 }
 
-@media screen and (min-width:544px) {
-  .c0 {
-    font-size: 12px;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c0 {
-    font-size: 12px;
-  }
-}
-
 <span
   className="c0 c1"
   data-size="small"
@@ -4678,19 +4654,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   bottom: 0;
 }
 
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
+@media (min-width:var(--breakpoint-medium)) {
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -5521,23 +5485,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   bottom: 0;
 }
 
-<<<<<<< HEAD
 @media (min-width:var(--breakpoint-medium)) {
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
-@media (min-width:768px) {
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
   .c0 {
     font-size: var(--text-body-size-medium);
   }
@@ -7771,21 +7719,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     className="c0 c1"
     data-size="medium"
@@ -8678,21 +8611,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     className="c0 c1"
     data-leading-visual={true}
@@ -9622,21 +9540,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     className="c0 c1"
     data-size="medium"
@@ -10538,21 +10441,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     className="c0 c1"
     data-leading-visual={true}
@@ -11527,21 +11415,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     className="c0 c1"
     data-leading-visual={true}
@@ -12516,21 +12389,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     className="c0 c1"
     data-leading-visual={true}
@@ -13500,21 +13358,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     className="c0 c1"
     data-size="medium"
@@ -14446,21 +14289,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     className="c0 c1"
     data-leading-visual={true}
@@ -15430,21 +15258,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     className="c0 c1"
     data-size="medium"
@@ -16383,18 +16196,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-@media screen and (min-width:544px) {
-  .c0 {
-    font-size: 12px;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c0 {
-    font-size: 12px;
-  }
-}
-
 <span
     className="c0 c1"
     data-leading-visual={true}
@@ -17409,21 +17210,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     className="c0 c1"
     data-leading-visual={true}
@@ -18436,21 +18222,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   }
 }
 
-<<<<<<< HEAD
-=======
-@media (min-width:768px) {
-
-}
-
-@media screen and (min-width:544px) {
-
-}
-
-@media screen and (min-width:768px) {
-
-}
-
->>>>>>> bc9c696320d83c9d871ac49978e213a9c5cb39d2
 <span
     className="c0 c1"
     data-leading-visual={true}

From 6a241ce1b53a7f6778fcc3a20e85c7af99043f0f Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Wed, 6 Nov 2024 20:18:06 +0000
Subject: [PATCH 5/9] changeset

---
 .changeset/real-fans-tap.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/real-fans-tap.md

diff --git a/.changeset/real-fans-tap.md b/.changeset/real-fans-tap.md
new file mode 100644
index 00000000000..f419b1ad11d
--- /dev/null
+++ b/.changeset/real-fans-tap.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert TextInput to use data attributes

From 6db3a71cd4dc83d2e27bdfa6821c314a89fffce0 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Wed, 6 Nov 2024 20:48:45 +0000
Subject: [PATCH 6/9] add width to block

---
 packages/react/src/internal/components/TextInputWrapper.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 08d5348084f..45f02148a97 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -116,6 +116,7 @@ export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
     display: flex;
     width: 100%;
     align-self: stretch;
+    ${width}
   }
 
   /* Ensures inputs don' t zoom on mobile but are body-font size on desktop */

From 189a565f5e71841fca1c761816b104e7cc16fda7 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Wed, 6 Nov 2024 23:51:37 +0000
Subject: [PATCH 7/9] add higher specificity to passing in sx

---
 .../TextInputWithTokens.tsx                   |  6 ++--
 .../internal/components/TextInputWrapper.tsx  | 30 +++++++++----------
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index e2c97ac77f1..fa03c61a48e 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -13,7 +13,7 @@ import Token from '../Token/Token'
 import type {TokenSizeKeys} from '../Token/TokenBase'
 
 import type {TextInputSizes} from '../internal/components/TextInputWrapper'
-import TextInputWrapper, {textInputHorizPadding} from '../internal/components/TextInputWrapper'
+import TextInputWrapper from '../internal/components/TextInputWrapper'
 import UnstyledTextInput from '../internal/components/UnstyledTextInput'
 import TextInputInnerVisualSlot from '../internal/components/TextInputInnerVisualSlot'
 
@@ -266,8 +266,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       variant={variantProp} // deprecated. use `size` prop instead
       onClick={focusInput}
       sx={{
-        paddingLeft: textInputHorizPadding,
-        py: `calc(${textInputHorizPadding} / 2)`,
+        paddingLeft: '12px',
+        py: `calc(12px / 2)`,
         ...(block
           ? {
               display: 'flex',
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 45f02148a97..d9a1cfa991f 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -30,12 +30,9 @@ export type StyledWrapperProps = {
   hasTrailingVisual?: boolean
 } & StyledBaseWrapperProps
 
-const textInputBasePadding = '12px'
-export const textInputHorizPadding = textInputBasePadding
-
 export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -67,8 +64,8 @@ export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
 
   &:where([data-trailing-action][data-focused]),
   &:where(:not([data-trailing-action]):focus-within) {
-    border-color: var(--fgColor-accent);
-    outline: 2px solid var(--fgColor-accent);
+    border-color: var(--borderColor-accent-emphasis);
+    outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
     outline-offset: -1px;
   }
 
@@ -116,7 +113,6 @@ export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
     display: flex;
     width: 100%;
     align-self: stretch;
-    ${width}
   }
 
   /* Ensures inputs don' t zoom on mobile but are body-font size on desktop */
@@ -124,6 +120,8 @@ export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
     font-size: var(--text-body-size-medium);
   }
 
+  --inner-action-size: var(--base-size-24); /* Default size */
+
   &:where([data-size='small']) {
     --inner-action-size: var(--base-size-20);
 
@@ -136,10 +134,6 @@ export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
     line-height: var(--base-size-20);
   }
 
-  &:where([data-size='medium']) {
-    --inner-action-size: var(--base-size-24);
-  }
-
   &:where([data-size='large']) {
     --inner-action-size: var(--base-size-28);
 
@@ -170,10 +164,12 @@ export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
     font-size: var(--text-title-size-medium);
   }
 
-  ${width}
-  ${minWidth}
-  ${maxWidth}
-  ${sx};
+  & {
+    ${width}
+    ${minWidth}
+    ${maxWidth}
+    ${sx}
+  }
 `
 
 export function TextInputBaseWrapper(props: React.PropsWithChildren<StyledBaseWrapperProps>) {
@@ -250,7 +246,9 @@ const StyledTextInputWrapper = styled(TextInputBaseWrapper)<StyledWrapperProps>`
     padding-right: var(--base-size-12);
   }
 
-  ${sx};
+  & {
+    ${sx}
+  }
 `
 
 export function TextInputWrapper(props: React.PropsWithChildren<StyledWrapperProps>) {

From e90210230286204176ba9daa3513614607247031 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Wed, 6 Nov 2024 23:56:04 +0000
Subject: [PATCH 8/9] update snapshots

---
 .../__snapshots__/Autocomplete.test.tsx.snap  |  77 +-
 .../__snapshots__/TextInput.test.tsx.snap     | 352 +++-----
 .../TextInputWithTokens.test.tsx.snap         | 753 ++++++++++--------
 3 files changed, 570 insertions(+), 612 deletions(-)

diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index 083fbc1f028..e26d585495d 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -22,6 +22,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -59,8 +60,8 @@ exports[`snapshots renders a custom empty state message 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -126,10 +127,6 @@ exports[`snapshots renders a custom empty state message 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -290,7 +287,7 @@ exports[`snapshots renders a loading state 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -305,6 +302,7 @@ exports[`snapshots renders a loading state 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -342,8 +340,8 @@ exports[`snapshots renders a loading state 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -409,10 +407,6 @@ exports[`snapshots renders a loading state 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -630,7 +624,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -645,6 +639,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -682,8 +677,8 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -749,10 +744,6 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -1589,7 +1580,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -1604,6 +1595,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1641,8 +1633,8 @@ exports[`snapshots renders a multiselect input 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -1708,10 +1700,6 @@ exports[`snapshots renders a multiselect input 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -2426,7 +2414,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -2441,6 +2429,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -2478,8 +2467,8 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -2545,10 +2534,6 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -3446,7 +3431,7 @@ exports[`snapshots renders a single select input 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -3461,6 +3446,7 @@ exports[`snapshots renders a single select input 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -3498,8 +3484,8 @@ exports[`snapshots renders a single select input 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -3565,10 +3551,6 @@ exports[`snapshots renders a single select input 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -4658,7 +4640,7 @@ exports[`snapshots renders with an input value 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -4673,6 +4655,7 @@ exports[`snapshots renders with an input value 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -4710,8 +4693,8 @@ exports[`snapshots renders with an input value 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -4777,10 +4760,6 @@ exports[`snapshots renders with an input value 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 4c8b52d61f0..0e338aafbb9 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`TextInput renders 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -21,6 +21,7 @@ exports[`TextInput renders 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -58,8 +59,8 @@ exports[`TextInput renders 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -125,10 +126,6 @@ exports[`TextInput renders 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -244,7 +241,7 @@ exports[`TextInput renders block 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -259,6 +256,7 @@ exports[`TextInput renders block 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -296,8 +294,8 @@ exports[`TextInput renders block 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -363,10 +361,6 @@ exports[`TextInput renders block 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -483,7 +477,7 @@ exports[`TextInput renders contrast 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -498,6 +492,7 @@ exports[`TextInput renders contrast 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -535,8 +530,8 @@ exports[`TextInput renders contrast 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -602,10 +597,6 @@ exports[`TextInput renders contrast 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -722,7 +713,7 @@ exports[`TextInput renders error 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -737,6 +728,7 @@ exports[`TextInput renders error 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -774,8 +766,8 @@ exports[`TextInput renders error 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -841,10 +833,6 @@ exports[`TextInput renders error 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -962,7 +950,7 @@ exports[`TextInput renders large 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -977,6 +965,7 @@ exports[`TextInput renders large 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1014,8 +1003,8 @@ exports[`TextInput renders large 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -1081,10 +1070,6 @@ exports[`TextInput renders large 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -1201,7 +1186,7 @@ exports[`TextInput renders leadingVisual 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -1216,6 +1201,7 @@ exports[`TextInput renders leadingVisual 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1253,8 +1239,8 @@ exports[`TextInput renders leadingVisual 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -1320,10 +1306,6 @@ exports[`TextInput renders leadingVisual 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -1469,7 +1451,7 @@ exports[`TextInput renders leadingVisual 2`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -1484,6 +1466,7 @@ exports[`TextInput renders leadingVisual 2`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1521,8 +1504,8 @@ exports[`TextInput renders leadingVisual 2`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -1588,10 +1571,6 @@ exports[`TextInput renders leadingVisual 2`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -1737,7 +1716,7 @@ exports[`TextInput renders leadingVisual 3`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -1752,6 +1731,7 @@ exports[`TextInput renders leadingVisual 3`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1789,8 +1769,8 @@ exports[`TextInput renders leadingVisual 3`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -1856,10 +1836,6 @@ exports[`TextInput renders leadingVisual 3`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -1987,7 +1963,7 @@ exports[`TextInput renders leadingVisual 4`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -2002,6 +1978,7 @@ exports[`TextInput renders leadingVisual 4`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -2039,8 +2016,8 @@ exports[`TextInput renders leadingVisual 4`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -2106,10 +2083,6 @@ exports[`TextInput renders leadingVisual 4`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -2237,7 +2210,7 @@ exports[`TextInput renders monospace 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -2252,6 +2225,7 @@ exports[`TextInput renders monospace 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -2289,8 +2263,8 @@ exports[`TextInput renders monospace 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -2356,10 +2330,6 @@ exports[`TextInput renders monospace 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -2476,7 +2446,7 @@ exports[`TextInput renders placeholder 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -2491,6 +2461,7 @@ exports[`TextInput renders placeholder 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -2528,8 +2499,8 @@ exports[`TextInput renders placeholder 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -2595,10 +2566,6 @@ exports[`TextInput renders placeholder 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -2715,7 +2682,7 @@ exports[`TextInput renders small 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -2730,6 +2697,7 @@ exports[`TextInput renders small 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -2767,8 +2735,8 @@ exports[`TextInput renders small 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -2834,10 +2802,6 @@ exports[`TextInput renders small 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -3377,7 +3341,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -3392,6 +3356,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -3429,8 +3394,8 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -3496,10 +3461,6 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -4019,7 +3980,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -4034,6 +3995,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -4071,8 +4033,8 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -4138,10 +4100,6 @@ exports[`TextInput renders trailingAction text button 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -4740,7 +4698,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -4755,6 +4713,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -4792,8 +4751,8 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -4859,10 +4818,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -5051,7 +5006,7 @@ exports[`TextInput renders trailingVisual 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -5066,6 +5021,7 @@ exports[`TextInput renders trailingVisual 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -5103,8 +5059,8 @@ exports[`TextInput renders trailingVisual 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -5170,10 +5126,6 @@ exports[`TextInput renders trailingVisual 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -5319,7 +5271,7 @@ exports[`TextInput renders trailingVisual 2`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -5334,6 +5286,7 @@ exports[`TextInput renders trailingVisual 2`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -5371,8 +5324,8 @@ exports[`TextInput renders trailingVisual 2`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -5438,10 +5391,6 @@ exports[`TextInput renders trailingVisual 2`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -5587,7 +5536,7 @@ exports[`TextInput renders trailingVisual 3`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -5602,6 +5551,7 @@ exports[`TextInput renders trailingVisual 3`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -5639,8 +5589,8 @@ exports[`TextInput renders trailingVisual 3`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -5706,10 +5656,6 @@ exports[`TextInput renders trailingVisual 3`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -5837,7 +5783,7 @@ exports[`TextInput renders trailingVisual 4`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -5852,6 +5798,7 @@ exports[`TextInput renders trailingVisual 4`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -5889,8 +5836,8 @@ exports[`TextInput renders trailingVisual 4`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -5956,10 +5903,6 @@ exports[`TextInput renders trailingVisual 4`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -6115,7 +6058,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -6130,6 +6073,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -6167,8 +6111,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -6234,10 +6178,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -6434,7 +6374,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -6449,6 +6389,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -6486,8 +6427,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -6553,10 +6494,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -6791,7 +6728,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -6806,6 +6743,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -6843,8 +6781,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -6910,10 +6848,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -7119,7 +7053,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -7134,6 +7068,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -7171,8 +7106,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -7238,10 +7173,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -7521,7 +7452,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -7536,6 +7467,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -7573,8 +7505,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -7640,10 +7572,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -7923,7 +7851,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -7938,6 +7866,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -7975,8 +7904,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -8042,10 +7971,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -8320,7 +8245,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -8335,6 +8260,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -8372,8 +8298,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -8439,10 +8365,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -8678,7 +8600,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -8693,6 +8615,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -8730,8 +8653,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -8797,10 +8720,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -9075,7 +8994,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -9090,6 +9009,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -9127,8 +9047,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -9194,10 +9114,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -9442,7 +9358,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -9457,6 +9373,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -9494,8 +9411,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -9561,10 +9478,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -9885,7 +9798,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -9900,6 +9813,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -9937,8 +9851,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -10004,10 +9918,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -10327,7 +10237,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -10342,6 +10252,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -10379,8 +10290,8 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -10446,10 +10357,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -10723,7 +10630,7 @@ exports[`TextInput should render a password input 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -10738,6 +10645,7 @@ exports[`TextInput should render a password input 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -10775,8 +10683,8 @@ exports[`TextInput should render a password input 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -10842,10 +10750,6 @@ exports[`TextInput should render a password input 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index 5232b41375f..94295137572 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -57,7 +57,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -72,9 +72,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -112,8 +110,8 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -179,10 +177,6 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -210,14 +204,17 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -259,6 +256,12 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c4 {
   border: 0;
   font-size: inherit;
@@ -978,7 +981,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -993,9 +996,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1033,8 +1034,8 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -1100,10 +1101,6 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -1131,14 +1128,17 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -1180,6 +1180,12 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c4 {
   border: 0;
   font-size: inherit;
@@ -1504,7 +1510,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -1519,14 +1525,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1564,8 +1563,8 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -1631,10 +1630,6 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -1662,11 +1657,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   font-size: var(--text-title-size-medium);
 }
 
-.c1 {
-  padding-right: 0;
-  padding-left: 0;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
+.c0 {
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -1677,6 +1668,13 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   width: 100%;
 }
 
+.c1 {
+  padding-right: 0;
+  padding-left: 0;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+}
+
 .c1 > input,
 .c1 > select {
   padding-right: 0;
@@ -1716,6 +1714,17 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+}
+
 .c4 {
   border: 0;
   font-size: inherit;
@@ -1820,7 +1829,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -1835,11 +1844,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-  max-height: 20px;
-  overflow: auto;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -1877,8 +1882,8 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -1944,10 +1949,6 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -1975,11 +1976,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   font-size: var(--text-title-size-medium);
 }
 
-.c1 {
-  padding-right: 0;
-  padding-left: 0;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
+.c0 {
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -1987,6 +1984,13 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   overflow: auto;
 }
 
+.c1 {
+  padding-right: 0;
+  padding-left: 0;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+}
+
 .c1 > input,
 .c1 > select {
   padding-right: 0;
@@ -2026,6 +2030,14 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  max-height: 20px;
+  overflow: auto;
+}
+
 .c4 {
   border: 0;
   font-size: inherit;
@@ -2655,7 +2667,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -2670,9 +2682,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -2710,8 +2720,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -2777,10 +2787,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -2808,14 +2814,17 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -2857,6 +2866,12 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c4 {
   border: 0;
   font-size: inherit;
@@ -3484,7 +3499,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -3499,9 +3514,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -3539,8 +3552,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -3606,10 +3619,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -3637,14 +3646,17 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -3686,6 +3698,12 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c4 {
   border: 0;
   font-size: inherit;
@@ -4313,7 +4331,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -4328,9 +4346,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -4368,8 +4384,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -4435,10 +4451,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -4466,14 +4478,17 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -4515,6 +4530,12 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c4 {
   border: 0;
   font-size: inherit;
@@ -5142,7 +5163,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -5157,9 +5178,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -5197,8 +5216,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -5264,10 +5283,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -5295,14 +5310,17 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -5344,6 +5362,12 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c4 {
   border: 0;
   font-size: inherit;
@@ -5973,7 +5997,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -5988,10 +6012,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-  overflow: auto;
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -6029,8 +6050,8 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -6096,10 +6117,6 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -6127,15 +6144,18 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  overflow: auto;
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
-  overflow: auto;
 }
 
 .c1 > input,
@@ -6177,6 +6197,13 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  overflow: auto;
+}
+
 .c4 {
   border: 0;
   font-size: inherit;
@@ -6806,7 +6833,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -6821,9 +6848,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -6861,8 +6886,8 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -6928,10 +6953,6 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -6959,14 +6980,17 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -7008,6 +7032,12 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c4 {
   border: 0;
   font-size: inherit;
@@ -7370,7 +7400,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -7385,9 +7415,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -7425,8 +7453,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -7492,10 +7520,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -7523,14 +7547,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -7572,6 +7599,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c4 {
   border: 0;
   font-size: inherit;
@@ -8262,7 +8295,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -8277,9 +8310,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -8317,8 +8348,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -8384,10 +8415,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -8415,14 +8442,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -8464,6 +8494,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c6 {
   border: 0;
   font-size: inherit;
@@ -9191,7 +9227,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -9206,9 +9242,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -9246,8 +9280,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -9313,10 +9347,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -9344,14 +9374,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -9393,6 +9426,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c4 {
   border: 0;
   font-size: inherit;
@@ -10092,7 +10131,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -10107,9 +10146,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -10147,8 +10184,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -10214,10 +10251,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -10245,14 +10278,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -10294,6 +10330,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c7 {
   border: 0;
   font-size: inherit;
@@ -11066,7 +11108,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -11081,9 +11123,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -11121,8 +11161,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -11185,11 +11225,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-bottom: 3px;
   padding-left: var(--base-size-8);
   font-size: var(--text-body-size-small);
-  line-height: var(--base-size-20);
-}
-
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
+  line-height: var(--base-size-20);
 }
 
 .c0:where([data-size='large']) {
@@ -11219,14 +11255,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -11268,6 +11307,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c7 {
   border: 0;
   font-size: inherit;
@@ -12040,7 +12085,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -12055,9 +12100,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -12095,8 +12138,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -12162,10 +12205,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -12193,14 +12232,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -12242,6 +12284,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c7 {
   border: 0;
   font-size: inherit;
@@ -13009,7 +13057,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -13024,9 +13072,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -13064,8 +13110,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -13131,10 +13177,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -13162,14 +13204,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -13211,6 +13256,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c4 {
   border: 0;
   font-size: inherit;
@@ -13940,7 +13991,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -13955,9 +14006,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -13995,8 +14044,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -14062,10 +14111,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -14093,14 +14138,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -14142,6 +14190,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c6 {
   border: 0;
   font-size: inherit;
@@ -14909,7 +14963,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -14924,9 +14978,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -14964,8 +15016,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -15031,10 +15083,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -15062,14 +15110,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -15111,6 +15162,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c4 {
   border: 0;
   font-size: inherit;
@@ -15849,7 +15906,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -15864,9 +15921,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -15904,8 +15959,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -15971,10 +16026,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -16002,14 +16053,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -16051,6 +16105,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c7 {
   border: 0;
   font-size: inherit;
@@ -16861,7 +16921,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -16876,9 +16936,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -16916,8 +16974,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -16983,10 +17041,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -17014,14 +17068,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -17063,6 +17120,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c7 {
   border: 0;
   font-size: inherit;
@@ -17875,7 +17938,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -17890,9 +17953,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -17930,8 +17991,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -17997,10 +18058,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -18028,14 +18085,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -18077,6 +18137,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c7 {
   border: 0;
   font-size: inherit;
@@ -18853,7 +18919,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -18868,9 +18934,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -18908,8 +18972,8 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -18975,10 +19039,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -19006,14 +19066,17 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -19055,6 +19118,12 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c4 {
   border: 0;
   font-size: inherit;
@@ -19671,7 +19740,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -19686,9 +19755,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -19726,8 +19793,8 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -19793,10 +19860,6 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -19824,14 +19887,17 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -19873,6 +19939,12 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c4 {
   border: 0;
   font-size: inherit;
@@ -20461,7 +20533,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 32px;
+  min-height: var(--base-size-32);
   overflow: hidden;
   font-size: var(--text-body-size-medium);
   line-height: var(--base-size-20);
@@ -20476,9 +20548,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
+  --inner-action-size: var(--base-size-24);
 }
 
 .c0 input,
@@ -20516,8 +20586,8 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 
 .c0:where([data-trailing-action][data-focused]),
 .c0:where(:not([data-trailing-action]):focus-within) {
-  border-color: var(--fgColor-accent);
-  outline: 2px solid var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+  outline: var(--borderWidth-thick) solid var(--borderColor-accent-emphasis);
   outline-offset: -1px;
 }
 
@@ -20583,10 +20653,6 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   line-height: var(--base-size-20);
 }
 
-.c0:where([data-size='medium']) {
-  --inner-action-size: var(--base-size-24);
-}
-
 .c0:where([data-size='large']) {
   --inner-action-size: var(--base-size-28);
   height: var(--base-size-40);
@@ -20614,14 +20680,17 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   font-size: var(--text-title-size-medium);
 }
 
+.c0 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c1 {
   padding-right: 0;
   padding-left: 0;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  padding-left: 12px;
-  padding-top: calc(12px / 2);
-  padding-bottom: calc(12px / 2);
 }
 
 .c1 > input,
@@ -20663,6 +20732,12 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   padding-right: var(--base-size-12);
 }
 
+.c1 {
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
 .c4 {
   border: 0;
   font-size: inherit;

From d99cd58ac65bed40fc5d034d8cf31e956f9aacf7 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Thu, 7 Nov 2024 00:07:37 +0000
Subject: [PATCH 9/9] revert success border color

---
 .../__snapshots__/Autocomplete.test.tsx.snap  | 14 ++--
 .../__snapshots__/TextInput.test.tsx.snap     | 64 +++++++++----------
 .../TextInputWithTokens.test.tsx.snap         | 50 +++++++--------
 .../internal/components/TextInputWrapper.tsx  |  2 +-
 4 files changed, 65 insertions(+), 65 deletions(-)

diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index e26d585495d..878a316cad6 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -102,7 +102,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -382,7 +382,7 @@ exports[`snapshots renders a loading state 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -719,7 +719,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -1675,7 +1675,7 @@ exports[`snapshots renders a multiselect input 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -2509,7 +2509,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -3526,7 +3526,7 @@ exports[`snapshots renders a single select input 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -4735,7 +4735,7 @@ exports[`snapshots renders with an input value 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 0e338aafbb9..45716fa41e9 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -101,7 +101,7 @@ exports[`TextInput renders 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -336,7 +336,7 @@ exports[`TextInput renders block 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -572,7 +572,7 @@ exports[`TextInput renders contrast 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -808,7 +808,7 @@ exports[`TextInput renders error 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -1045,7 +1045,7 @@ exports[`TextInput renders large 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -1281,7 +1281,7 @@ exports[`TextInput renders leadingVisual 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -1546,7 +1546,7 @@ exports[`TextInput renders leadingVisual 2`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -1811,7 +1811,7 @@ exports[`TextInput renders leadingVisual 3`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -2058,7 +2058,7 @@ exports[`TextInput renders leadingVisual 4`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -2305,7 +2305,7 @@ exports[`TextInput renders monospace 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -2541,7 +2541,7 @@ exports[`TextInput renders placeholder 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -2777,7 +2777,7 @@ exports[`TextInput renders small 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -3436,7 +3436,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -4075,7 +4075,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -4793,7 +4793,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -5101,7 +5101,7 @@ exports[`TextInput renders trailingVisual 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -5366,7 +5366,7 @@ exports[`TextInput renders trailingVisual 2`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -5631,7 +5631,7 @@ exports[`TextInput renders trailingVisual 3`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -5878,7 +5878,7 @@ exports[`TextInput renders trailingVisual 4`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -6153,7 +6153,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -6469,7 +6469,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -6823,7 +6823,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -7148,7 +7148,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -7547,7 +7547,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -7946,7 +7946,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -8340,7 +8340,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -8695,7 +8695,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -9089,7 +9089,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -9453,7 +9453,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -9893,7 +9893,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -10332,7 +10332,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -10725,7 +10725,7 @@ exports[`TextInput should render a password input 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index 94295137572..bd6c3c5cf5f 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -152,7 +152,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -1076,7 +1076,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -1605,7 +1605,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -1924,7 +1924,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -2762,7 +2762,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -3594,7 +3594,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -4426,7 +4426,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -5258,7 +5258,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -6092,7 +6092,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -6928,7 +6928,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -7495,7 +7495,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -8390,7 +8390,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -9322,7 +9322,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -10226,7 +10226,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -11203,7 +11203,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -12180,7 +12180,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -13152,7 +13152,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -14086,7 +14086,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -15058,7 +15058,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -16001,7 +16001,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -17016,7 +17016,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -18033,7 +18033,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -19014,7 +19014,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -19835,7 +19835,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
@@ -20628,7 +20628,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 }
 
 .c0:where([data-validation='success']) {
-  border-color: var(--borderColor-success-emphasis);
+  border-color: var(--bgColor-success-emphasis);
 }
 
 .c0:where([data-block]) {
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index d9a1cfa991f..56557456493 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -106,7 +106,7 @@ export const StyledTextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
   }
 
   &:where([data-validation='success']) {
-    border-color: var(--borderColor-success-emphasis);
+    border-color: var(--bgColor-success-emphasis);
   }
 
   &:where([data-block]) {