diff --git a/.changeset/lazy-eyes-bow.md b/.changeset/lazy-eyes-bow.md new file mode 100644 index 00000000000..6103291c1de --- /dev/null +++ b/.changeset/lazy-eyes-bow.md @@ -0,0 +1,7 @@ +--- +"@primer/react": patch +--- + +Use `control` CSS var with fallback for form component border-color + + diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-high-contrast-linux.png index c0bc296dec9..44fb643ff46 100644 Binary files a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-high-contrast-linux.png index c0bc296dec9..44fb643ff46 100644 Binary files a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-high-contrast-linux.png and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-high-contrast-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-high-contrast-linux.png index 4bb20fc23e6..64865c946c0 100644 Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-high-contrast-linux.png and b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-high-contrast-linux.png index 6c3cd06a117..4d1a36a1c80 100644 Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-high-contrast-linux.png index f92076a9d09..e0eb9c3a30e 100644 Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-high-contrast-linux.png and b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-high-contrast-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-high-contrast-linux.png index 7a9afe1f35e..9b13ada7339 100644 Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-high-contrast-linux.png and b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Block-dark-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Block-dark-high-contrast-linux.png index 76ae38eddf9..9a5fd565acd 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Block-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Block-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Default-dark-high-contrast-linux.png index af5fd4cf240..0c753119a0a 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Large-dark-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Large-dark-high-contrast-linux.png index 93330d2fbd9..9eb29e7efa3 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Large-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Large-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Small-dark-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Small-dark-high-contrast-linux.png index a19e438ace5..6f8bcadfb98 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Small-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Small-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Visually-Hidden-Label-dark-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Visually-Hidden-Label-dark-high-contrast-linux.png index fc5e2559373..faf832a256c 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Visually-Hidden-Label-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Visually-Hidden-Label-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Caption-dark-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Caption-dark-high-contrast-linux.png index 5aa2f827161..7ddb5606ae7 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Caption-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Caption-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Option-Groups-dark-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Option-Groups-dark-high-contrast-linux.png index 98d0d1ea46d..de98c532d5b 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Option-Groups-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Option-Groups-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Block-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Block-dark-high-contrast-linux.png index 628246b4788..364b6aea55d 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Block-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Block-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Default-dark-high-contrast-linux.png index d5ac3a118e2..e8567e6453c 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Large-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Large-dark-high-contrast-linux.png index 65fedee905e..34b9c793445 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Large-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Large-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Small-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Small-dark-high-contrast-linux.png index b27c3988345..14b9891f0f8 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Small-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Small-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-high-contrast-linux.png index 2861126a0be..64fb9ee75f2 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Caption-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Caption-dark-high-contrast-linux.png index ccb3a0be89e..3d0edba0fa9 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Caption-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Caption-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Leading-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Leading-Visual-dark-high-contrast-linux.png index 5572fedc2d9..a0edb67c2cc 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Leading-Visual-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Leading-Visual-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-high-contrast-linux.png index 8f0fddef7cd..545185b6ee9 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Icon-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Icon-dark-high-contrast-linux.png index 57484e57217..1e6dd51a39b 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Icon-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Icon-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Default-dark-high-contrast-linux.png index a3df5f57d36..cd6c9297d17 100644 Binary files a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-With-Leading-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-With-Leading-Visual-dark-high-contrast-linux.png index 179236751a4..96505f91071 100644 Binary files a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-With-Leading-Visual-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-With-Leading-Visual-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-With-Trailing-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-With-Trailing-Visual-dark-high-contrast-linux.png index 82cd0b6a11e..7d94a79dd56 100644 Binary files a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-With-Trailing-Visual-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-With-Trailing-Visual-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Block-dark-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Block-dark-high-contrast-linux.png index 48d72407fae..acccf92ef5a 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Block-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Block-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Default-dark-high-contrast-linux.png index 3c1449070c0..9f01078a3d5 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Visually-Hidden-Label-dark-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Visually-Hidden-Label-dark-high-contrast-linux.png index 527d2d6fb2b..66c5e0c920a 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Visually-Hidden-Label-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Visually-Hidden-Label-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Warning-dark-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Warning-dark-high-contrast-linux.png index 0a477e6e5a1..dbd810a45a4 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Warning-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Warning-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-With-Caption-dark-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-With-Caption-dark-high-contrast-linux.png index 22cce7a5a37..1a5e894fe75 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-With-Caption-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-With-Caption-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Keep-selected-item-visible-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Keep-selected-item-visible-vrt-1-linux.png index 97ae3d1564b..07a5544e03e 100644 Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Keep-selected-item-visible-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Keep-selected-item-visible-vrt-1-linux.png differ diff --git a/blob-report/report-1.zip b/blob-report/report-1.zip new file mode 100644 index 00000000000..19e4f71feb7 Binary files /dev/null and b/blob-report/report-1.zip differ diff --git a/blob-report/report-2.zip b/blob-report/report-2.zip new file mode 100644 index 00000000000..f7cd9defe50 Binary files /dev/null and b/blob-report/report-2.zip differ diff --git a/blob-report/report-3.zip b/blob-report/report-3.zip new file mode 100644 index 00000000000..730ab4ac384 Binary files /dev/null and b/blob-report/report-3.zip differ diff --git a/blob-report/report-4.zip b/blob-report/report-4.zip new file mode 100644 index 00000000000..d6f56515be0 Binary files /dev/null and b/blob-report/report-4.zip differ diff --git a/package-lock.json b/package-lock.json index 33f5840dd22..e811ce9bdbf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@primer/react", - "version": "35.27.1", + "version": "35.28.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@primer/react", - "version": "35.27.1", + "version": "35.28.0", "license": "MIT", "dependencies": { "@github/combobox-nav": "^2.1.5", diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index 263505f77a8..cef5f98dddf 100644 --- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -8,7 +8,7 @@ exports[`snapshots renders a custom empty state message 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -167,7 +167,7 @@ exports[`snapshots renders a loading state 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -361,7 +361,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -1318,7 +1318,7 @@ exports[`snapshots renders a multiselect input 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -2185,7 +2185,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -3063,7 +3063,7 @@ exports[`snapshots renders a single select input 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -4071,7 +4071,7 @@ exports[`snapshots renders with an input value 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index c36b5df05f3..daf421a825e 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -7,7 +7,7 @@ exports[`TextInput renders 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -125,7 +125,7 @@ exports[`TextInput renders block 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -251,7 +251,7 @@ exports[`TextInput renders consistently 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -368,7 +368,7 @@ exports[`TextInput renders contrast 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -487,7 +487,7 @@ exports[`TextInput renders error 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -612,7 +612,7 @@ exports[`TextInput renders large 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -737,7 +737,7 @@ exports[`TextInput renders leadingVisual 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -882,7 +882,7 @@ exports[`TextInput renders leadingVisual 2`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -1027,7 +1027,7 @@ exports[`TextInput renders leadingVisual 3`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -1153,7 +1153,7 @@ exports[`TextInput renders leadingVisual 4`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -1279,7 +1279,7 @@ exports[`TextInput renders monospace 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -1398,7 +1398,7 @@ exports[`TextInput renders placeholder 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -1517,7 +1517,7 @@ exports[`TextInput renders small 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -1885,7 +1885,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -2534,7 +2534,7 @@ exports[`TextInput renders trailingAction text button 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -2937,7 +2937,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -3324,7 +3324,7 @@ exports[`TextInput renders trailingVisual 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -3469,7 +3469,7 @@ exports[`TextInput renders trailingVisual 2`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -3614,7 +3614,7 @@ exports[`TextInput renders trailingVisual 3`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -3740,7 +3740,7 @@ exports[`TextInput renders trailingVisual 4`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -3866,7 +3866,7 @@ exports[`TextInput renders warning 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -4006,7 +4006,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -4178,7 +4178,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -4382,7 +4382,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -4563,7 +4563,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -4813,7 +4813,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -5063,7 +5063,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -5307,7 +5307,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -5519,7 +5519,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -5763,7 +5763,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -5984,7 +5984,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -6283,7 +6283,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -6573,7 +6573,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -6836,7 +6836,7 @@ exports[`TextInput should render a password input 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index bd1f7ba606b..8f04bc3e792 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -58,7 +58,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -835,7 +835,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -1244,7 +1244,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -1448,7 +1448,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -2172,7 +2172,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -2897,7 +2897,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -3622,7 +3622,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -4340,7 +4340,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -5060,7 +5060,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -5780,7 +5780,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -6502,7 +6502,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -6947,7 +6947,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -7722,7 +7722,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -8529,7 +8529,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -9313,7 +9313,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -10166,7 +10166,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -11019,7 +11019,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -11866,7 +11866,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -12681,7 +12681,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -13528,7 +13528,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -14352,7 +14352,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -15250,7 +15250,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -16143,7 +16143,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -17000,7 +17000,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -17707,7 +17707,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); @@ -18386,7 +18386,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); diff --git a/src/__tests__/__snapshots__/Textarea.test.tsx.snap b/src/__tests__/__snapshots__/Textarea.test.tsx.snap index b0c63ebe245..991912f521a 100644 --- a/src/__tests__/__snapshots__/Textarea.test.tsx.snap +++ b/src/__tests__/__snapshots__/Textarea.test.tsx.snap @@ -7,7 +7,7 @@ exports[`Textarea renders consistently 1`] = ` color: #1F2328; vertical-align: middle; background-color: #ffffff; - border: 1px solid #d0d7de; + border: 1px solid var(--control-borderColor-rest,#d0d7de); border-radius: 6px; outline: none; box-shadow: inset 0 1px 0 rgba(208,215,222,0.2); diff --git a/src/internal/components/TextInputWrapper.tsx b/src/internal/components/TextInputWrapper.tsx index 168afac56cf..364a8834c34 100644 --- a/src/internal/components/TextInputWrapper.tsx +++ b/src/internal/components/TextInputWrapper.tsx @@ -96,7 +96,7 @@ export const TextInputBaseWrapper = styled.span` color: ${get('colors.fg.default')}; vertical-align: middle; background-color: ${get('colors.canvas.default')}; - border: 1px solid ${get('colors.border.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')};