Use control CSS var with fallback for form component border-color (#…

…3654) * use css var with fallback * Create lazy-eyes-bow.md * syntax * test(vrt): update snapshots --------- Co-authored-by: langermank <langermank@users.noreply.github.com>
primer · Aug 22, 2023 · 556d826 · 556d826
1 parent 27f3ff9
commit 556d826
Show file tree

Hide file tree

Showing 42 changed files with 78 additions and 71 deletions.
diff --git a/.changeset/lazy-eyes-bow.md b/.changeset/lazy-eyes-bow.md
@@ -0,0 +1,7 @@
+---
+"@primer/react": patch
+---
+
+Use `control` CSS var with fallback for form component border-color
+
+<!-- Changed components: _none_ -->
diff --git a/...redSearch.test.ts-snapshots/FilteredSearch-Default-dark-high-contrast-linux.png b/...redSearch.test.ts-snapshots/FilteredSearch-Default-dark-high-contrast-linux.png
diff --git a/...Search.test.ts-snapshots/FilteredSearch-Playground-dark-high-contrast-linux.png b/...Search.test.ts-snapshots/FilteredSearch-Playground-dark-high-contrast-linux.png
diff --git a/...t.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-high-contrast-linux.png b/...t.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-high-contrast-linux.png
diff --git a/...plete.test.ts-snapshots/InlineAutocomplete-Default-dark-high-contrast-linux.png b/...plete.test.ts-snapshots/InlineAutocomplete-Default-dark-high-contrast-linux.png
diff --git a/...te.test.ts-snapshots/InlineAutocomplete-Playground-dark-high-contrast-linux.png b/...te.test.ts-snapshots/InlineAutocomplete-Playground-dark-high-contrast-linux.png
diff --git a/...e.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-high-contrast-linux.png b/...e.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-high-contrast-linux.png
diff --git a/...s/components/Select.test.ts-snapshots/Select-Block-dark-high-contrast-linux.png b/...s/components/Select.test.ts-snapshots/Select-Block-dark-high-contrast-linux.png
diff --git a/...components/Select.test.ts-snapshots/Select-Default-dark-high-contrast-linux.png b/...components/Select.test.ts-snapshots/Select-Default-dark-high-contrast-linux.png
diff --git a/...s/components/Select.test.ts-snapshots/Select-Large-dark-high-contrast-linux.png b/...s/components/Select.test.ts-snapshots/Select-Large-dark-high-contrast-linux.png
diff --git a/...s/components/Select.test.ts-snapshots/Select-Small-dark-high-contrast-linux.png b/...s/components/Select.test.ts-snapshots/Select-Small-dark-high-contrast-linux.png
diff --git a/...ect.test.ts-snapshots/Select-Visually-Hidden-Label-dark-high-contrast-linux.png b/...ect.test.ts-snapshots/Select-Visually-Hidden-Label-dark-high-contrast-linux.png
diff --git a/...nents/Select.test.ts-snapshots/Select-With-Caption-dark-high-contrast-linux.png b/...nents/Select.test.ts-snapshots/Select-With-Caption-dark-high-contrast-linux.png
diff --git a/...Select.test.ts-snapshots/Select-With-Option-Groups-dark-high-contrast-linux.png b/...Select.test.ts-snapshots/Select-With-Option-Groups-dark-high-contrast-linux.png
diff --git a/...onents/TextInput.test.ts-snapshots/TextInput-Block-dark-high-contrast-linux.png b/...onents/TextInput.test.ts-snapshots/TextInput-Block-dark-high-contrast-linux.png
diff --git a/...ents/TextInput.test.ts-snapshots/TextInput-Default-dark-high-contrast-linux.png b/...ents/TextInput.test.ts-snapshots/TextInput-Default-dark-high-contrast-linux.png
diff --git a/...onents/TextInput.test.ts-snapshots/TextInput-Large-dark-high-contrast-linux.png b/...onents/TextInput.test.ts-snapshots/TextInput-Large-dark-high-contrast-linux.png
diff --git a/...onents/TextInput.test.ts-snapshots/TextInput-Small-dark-high-contrast-linux.png b/...onents/TextInput.test.ts-snapshots/TextInput-Small-dark-high-contrast-linux.png
diff --git a/....test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-high-contrast-linux.png b/....test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-high-contrast-linux.png
diff --git a/...TextInput.test.ts-snapshots/TextInput-With-Caption-dark-high-contrast-linux.png b/...TextInput.test.ts-snapshots/TextInput-With-Caption-dark-high-contrast-linux.png
diff --git a/...ut.test.ts-snapshots/TextInput-With-Leading-Visual-dark-high-contrast-linux.png b/...ut.test.ts-snapshots/TextInput-With-Leading-Visual-dark-high-contrast-linux.png
diff --git a/...t.test.ts-snapshots/TextInput-With-Trailing-Action-dark-high-contrast-linux.png b/...t.test.ts-snapshots/TextInput-With-Trailing-Action-dark-high-contrast-linux.png
diff --git a/...put.test.ts-snapshots/TextInput-With-Trailing-Icon-dark-high-contrast-linux.png b/...put.test.ts-snapshots/TextInput-With-Trailing-Icon-dark-high-contrast-linux.png
diff --git a/...kens.test.ts-snapshots/TextInputWithTokens-Default-dark-high-contrast-linux.png b/...kens.test.ts-snapshots/TextInputWithTokens-Default-dark-high-contrast-linux.png
diff --git a/...-snapshots/TextInputWithTokens-With-Leading-Visual-dark-high-contrast-linux.png b/...-snapshots/TextInputWithTokens-With-Leading-Visual-dark-high-contrast-linux.png
diff --git a/...snapshots/TextInputWithTokens-With-Trailing-Visual-dark-high-contrast-linux.png b/...snapshots/TextInputWithTokens-With-Trailing-Visual-dark-high-contrast-linux.png
diff --git a/...mponents/Textarea.test.ts-snapshots/Textarea-Block-dark-high-contrast-linux.png b/...mponents/Textarea.test.ts-snapshots/Textarea-Block-dark-high-contrast-linux.png
diff --git a/...onents/Textarea.test.ts-snapshots/Textarea-Default-dark-high-contrast-linux.png b/...onents/Textarea.test.ts-snapshots/Textarea-Default-dark-high-contrast-linux.png
diff --git a/...a.test.ts-snapshots/Textarea-Visually-Hidden-Label-dark-high-contrast-linux.png b/...a.test.ts-snapshots/Textarea-Visually-Hidden-Label-dark-high-contrast-linux.png
diff --git a/...onents/Textarea.test.ts-snapshots/Textarea-Warning-dark-high-contrast-linux.png b/...onents/Textarea.test.ts-snapshots/Textarea-Warning-dark-high-contrast-linux.png
diff --git a/...s/Textarea.test.ts-snapshots/Textarea-With-Caption-dark-high-contrast-linux.png b/...s/Textarea.test.ts-snapshots/Textarea-With-Caption-dark-high-contrast-linux.png
diff --git a/...eNav-Interactions-dark-high-contrast-Keep-selected-item-visible-vrt-1-linux.png b/...eNav-Interactions-dark-high-contrast-Keep-selected-item-visible-vrt-1-linux.png
diff --git a/blob-report/report-1.zip b/blob-report/report-1.zip
diff --git a/blob-report/report-2.zip b/blob-report/report-2.zip
diff --git a/blob-report/report-3.zip b/blob-report/report-3.zip
diff --git a/blob-report/report-4.zip b/blob-report/report-4.zip
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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);