Increase border-radius of form fields

sumup-oss · May 22, 2023 · af944ce · af944ce
1 parent 8ac68d7
commit af944ce
Show file tree

Hide file tree

Showing 13 changed files with 58 additions and 58 deletions.
diff --git a/packages/circuit-ui/components/CurrencyInput/__snapshots__/CurrencyInput.spec.tsx.snap b/packages/circuit-ui/components/CurrencyInput/__snapshots__/CurrencyInput.spec.tsx.snap
@@ -56,7 +56,7 @@ exports[`CurrencyInput Styles should render a currency as a prefix 1`] = `
   background-color: var(--cui-bg-normal);
   border: none;
   outline: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 12px 16px;
   -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
@@ -182,7 +182,7 @@ exports[`CurrencyInput Styles should render a currency as a suffix 1`] = `
   background-color: var(--cui-bg-normal);
   border: none;
   outline: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 12px 16px;
   -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
@@ -356,7 +356,7 @@ exports[`CurrencyInput Styles should render with default styles and format 1`] =
   background-color: var(--cui-bg-normal);
   border: none;
   outline: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 12px 16px;
   -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;

diff --git a/packages/circuit-ui/components/Input/Input.tsx b/packages/circuit-ui/components/Input/Input.tsx
@@ -121,7 +121,7 @@ const inputBaseStyles = ({ theme }: StyleProps) => css`
   background-color: var(--cui-bg-normal);
   border: none;
   outline: 0;
-  border-radius: ${theme.borderRadius.byte};
+  border-radius: ${theme.borderRadius.kilo};
   padding: ${theme.spacings.kilo} ${theme.spacings.mega};
   transition: box-shadow ${theme.transitions.default},
     padding ${theme.transitions.default};

diff --git a/packages/circuit-ui/components/Input/__snapshots__/Input.spec.tsx.snap b/packages/circuit-ui/components/Input/__snapshots__/Input.spec.tsx.snap
@@ -34,7 +34,7 @@ exports[`Input Styles should prioritize disabled over error styles 1`] = `
   background-color: var(--cui-bg-normal);
   border: none;
   outline: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 12px 16px;
   -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
@@ -140,7 +140,7 @@ exports[`Input Styles should prioritize disabled over warning styles 1`] = `
   background-color: var(--cui-bg-normal);
   border: none;
   outline: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 12px 16px;
   -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
@@ -245,7 +245,7 @@ exports[`Input Styles should render with a description when passed the validatio
   background-color: var(--cui-bg-normal);
   border: none;
   outline: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 12px 16px;
   -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
@@ -392,7 +392,7 @@ exports[`Input Styles should render with a prefix when passed the prefix prop 1`
   background-color: var(--cui-bg-normal);
   border: none;
   outline: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 12px 16px;
   -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
@@ -513,7 +513,7 @@ exports[`Input Styles should render with a suffix when passed the suffix prop 1`
   background-color: var(--cui-bg-normal);
   border: none;
   outline: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 12px 16px;
   -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
@@ -651,7 +651,7 @@ exports[`Input Styles should render with custom styles 1`] = `
   background-color: var(--cui-bg-normal);
   border: none;
   outline: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 12px 16px;
   -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
@@ -768,7 +768,7 @@ exports[`Input Styles should render with default styles 1`] = `
   background-color: var(--cui-bg-normal);
   border: none;
   outline: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 12px 16px;
   -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
@@ -884,7 +884,7 @@ exports[`Input Styles should render with disabled styles when passed the disable
   background-color: var(--cui-bg-normal);
   border: none;
   outline: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 12px 16px;
   -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
@@ -989,7 +989,7 @@ exports[`Input Styles should render with invalid styles when passed the invalid
   background-color: var(--cui-bg-normal);
   border: none;
   outline: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 12px 16px;
   -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
@@ -1122,7 +1122,7 @@ exports[`Input Styles should render with readonly styles when passed the readOnl
   background-color: var(--cui-bg-normal);
   border: none;
   outline: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 12px 16px;
   -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
@@ -1240,7 +1240,7 @@ exports[`Input Styles should render with right aligned text 1`] = `
   background-color: var(--cui-bg-normal);
   border: none;
   outline: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 12px 16px;
   -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
@@ -1357,7 +1357,7 @@ exports[`Input Styles should render with valid styles when passed the showValid
   background-color: var(--cui-bg-normal);
   border: none;
   outline: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 12px 16px;
   -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
@@ -1473,7 +1473,7 @@ exports[`Input Styles should render with warning styles when passed the hasWarni
   background-color: var(--cui-bg-normal);
   border: none;
   outline: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 12px 16px;
   -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;

diff --git a/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap b/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap
@@ -803,7 +803,7 @@ exports[`Pagination with more than 5 pages should render with default styles 1`]
   background-color: var(--cui-bg-normal);
   outline: none;
   border: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   box-shadow: none;
   color: var(--cui-fg-normal);
   margin: 0;

diff --git a/...uit-ui/components/Pagination/components/PageSelect/__snapshots__/PageSelect.spec.tsx.snap b/...uit-ui/components/Pagination/components/PageSelect/__snapshots__/PageSelect.spec.tsx.snap
@@ -50,7 +50,7 @@ HTMLCollection [
   background-color: var(--cui-bg-normal);
   outline: none;
   border: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   box-shadow: none;
   color: var(--cui-fg-normal);
   margin: 0;

diff --git a/packages/circuit-ui/components/SearchInput/SearchInput.tsx b/packages/circuit-ui/components/SearchInput/SearchInput.tsx
@@ -46,7 +46,7 @@ const clearButtonStyles = ({ theme }: StyleProps) => css`
   pointer-events: all !important;
   cursor: pointer !important;
   padding: 16px !important;
-  border-radius: ${theme.borderRadius.byte};
+  border-radius: ${theme.borderRadius.kilo};
 `;
 
 const ClearButton = styled(IconButton)(clearButtonStyles);

diff --git a/packages/circuit-ui/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap b/packages/circuit-ui/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap
@@ -43,7 +43,7 @@ exports[`SearchInput should grey out icon when disabled 1`] = `
   background-color: var(--cui-bg-normal);
   border: none;
   outline: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 12px 16px;
   -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
@@ -173,7 +173,7 @@ exports[`SearchInput should render with default styles 1`] = `
   background-color: var(--cui-bg-normal);
   border: none;
   outline: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 12px 16px;
   -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;

diff --git a/packages/circuit-ui/components/Select/Select.tsx b/packages/circuit-ui/components/Select/Select.tsx
@@ -130,7 +130,7 @@ const selectBaseStyles = ({ theme }: StyleProps) => css`
   background-color: var(--cui-bg-normal);
   outline: none;
   border: 0;
-  border-radius: ${theme.borderRadius.byte};
+  border-radius: ${theme.borderRadius.kilo};
   box-shadow: none;
   color: var(--cui-fg-normal);
   margin: 0;

diff --git a/packages/circuit-ui/components/Select/__snapshots__/Select.spec.tsx.snap b/packages/circuit-ui/components/Select/__snapshots__/Select.spec.tsx.snap
@@ -40,7 +40,7 @@ exports[`Select Styles should not render with invalid styles when also passed th
   background-color: var(--cui-bg-normal);
   outline: none;
   border: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   box-shadow: none;
   color: var(--cui-fg-normal);
   margin: 0;
@@ -232,7 +232,7 @@ exports[`Select Styles should render with a prefix when passed the prefix prop 1
   background-color: var(--cui-bg-normal);
   outline: none;
   border: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   box-shadow: none;
   color: var(--cui-fg-normal);
   margin: 0;
@@ -429,7 +429,7 @@ exports[`Select Styles should render with a tooltip when passed a validation hin
   background-color: var(--cui-bg-normal);
   outline: none;
   border: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   box-shadow: none;
   color: var(--cui-fg-normal);
   margin: 0;
@@ -652,7 +652,7 @@ exports[`Select Styles should render with a visually-hidden label 1`] = `
   background-color: var(--cui-bg-normal);
   outline: none;
   border: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   box-shadow: none;
   color: var(--cui-fg-normal);
   margin: 0;
@@ -844,7 +844,7 @@ exports[`Select Styles should render with default styles 1`] = `
   background-color: var(--cui-bg-normal);
   outline: none;
   border: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   box-shadow: none;
   color: var(--cui-fg-normal);
   margin: 0;
@@ -1036,7 +1036,7 @@ exports[`Select Styles should render with disabled styles when passed the disabl
   background-color: var(--cui-bg-normal);
   outline: none;
   border: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   box-shadow: none;
   color: var(--cui-fg-normal);
   margin: 0;
@@ -1217,7 +1217,7 @@ exports[`Select Styles should render with invalid styles when passed the invalid
   background-color: var(--cui-bg-normal);
   outline: none;
   border: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   box-shadow: none;
   color: var(--cui-fg-normal);
   margin: 0;

diff --git a/packages/circuit-ui/components/Selector/Selector.tsx b/packages/circuit-ui/components/Selector/Selector.tsx
@@ -89,7 +89,7 @@ const baseStyles = ({ theme }: StyleProps) => css`
   color: var(--cui-fg-normal);
   text-align: center;
   position: relative;
-  border-radius: ${theme.borderRadius.byte};
+  border-radius: ${theme.borderRadius.kilo};
   transition: box-shadow ${theme.transitions.default};
 
   &::before {
@@ -102,7 +102,7 @@ const baseStyles = ({ theme }: StyleProps) => css`
     left: 0;
     width: 100%;
     height: 100%;
-    border-radius: ${theme.borderRadius.byte};
+    border-radius: ${theme.borderRadius.kilo};
     border: ${theme.borderWidth.kilo} solid var(--cui-border-normal);
     transition: border ${theme.transitions.default};
   }

diff --git a/packages/circuit-ui/components/Selector/__snapshots__/Selector.spec.tsx.snap b/packages/circuit-ui/components/Selector/__snapshots__/Selector.spec.tsx.snap
@@ -77,7 +77,7 @@ exports[`Selector should render a checked selector 1`] = `
   color: var(--cui-fg-normal);
   text-align: center;
   position: relative;
-  border-radius: 8px;
+  border-radius: 12px;
   -webkit-transition: box-shadow 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out;
   padding: calc(12px) 24px;
@@ -93,7 +93,7 @@ exports[`Selector should render a checked selector 1`] = `
   left: 0;
   width: 100%;
   height: 100%;
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid var(--cui-border-normal);
   -webkit-transition: border 120ms ease-in-out;
   transition: border 120ms ease-in-out;
@@ -213,7 +213,7 @@ exports[`Selector should render a default selector 1`] = `
   color: var(--cui-fg-normal);
   text-align: center;
   position: relative;
-  border-radius: 8px;
+  border-radius: 12px;
   -webkit-transition: box-shadow 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out;
   padding: calc(12px) 24px;
@@ -229,7 +229,7 @@ exports[`Selector should render a default selector 1`] = `
   left: 0;
   width: 100%;
   height: 100%;
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid var(--cui-border-normal);
   -webkit-transition: border 120ms ease-in-out;
   transition: border 120ms ease-in-out;
@@ -348,7 +348,7 @@ exports[`Selector should render a disabled selector 1`] = `
   color: var(--cui-fg-normal);
   text-align: center;
   position: relative;
-  border-radius: 8px;
+  border-radius: 12px;
   -webkit-transition: box-shadow 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out;
   padding: calc(12px) 24px;
@@ -364,7 +364,7 @@ exports[`Selector should render a disabled selector 1`] = `
   left: 0;
   width: 100%;
   height: 100%;
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid var(--cui-border-normal);
   -webkit-transition: border 120ms ease-in-out;
   transition: border 120ms ease-in-out;
@@ -484,7 +484,7 @@ exports[`Selector should render with a description 1`] = `
   color: var(--cui-fg-normal);
   text-align: center;
   position: relative;
-  border-radius: 8px;
+  border-radius: 12px;
   -webkit-transition: box-shadow 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out;
   padding: calc(12px) 24px;
@@ -505,7 +505,7 @@ exports[`Selector should render with a description 1`] = `
   left: 0;
   width: 100%;
   height: 100%;
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid var(--cui-border-normal);
   -webkit-transition: border 120ms ease-in-out;
   transition: border 120ms ease-in-out;

diff --git a/packages/circuit-ui/components/SelectorGroup/__snapshots__/SelectorGroup.spec.tsx.snap b/packages/circuit-ui/components/SelectorGroup/__snapshots__/SelectorGroup.spec.tsx.snap
@@ -120,7 +120,7 @@ exports[`SelectorGroup should render with default styles 1`] = `
   color: var(--cui-fg-normal);
   text-align: center;
   position: relative;
-  border-radius: 8px;
+  border-radius: 12px;
   -webkit-transition: box-shadow 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out;
   padding: calc(12px) 24px;
@@ -137,7 +137,7 @@ exports[`SelectorGroup should render with default styles 1`] = `
   left: 0;
   width: 100%;
   height: 100%;
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid var(--cui-border-normal);
   -webkit-transition: border 120ms ease-in-out;
   transition: border 120ms ease-in-out;
@@ -348,7 +348,7 @@ exports[`SelectorGroup should render with horizontal layout by default 1`] = `
   color: var(--cui-fg-normal);
   text-align: center;
   position: relative;
-  border-radius: 8px;
+  border-radius: 12px;
   -webkit-transition: box-shadow 120ms ease-in-out;
   transition: box-shadow 120ms ease-in-out;
   padding: calc(12px) 24px;
@@ -365,7 +365,7 @@ exports[`SelectorGroup should render with horizontal layout by default 1`] = `
   left: 0;
   width: 100%;
   height: 100%;
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid var(--cui-border-normal);
   -webkit-transition: border 120ms ease-in-out;
   transition: border 120ms ease-in-out;