Increase border-radius of form fields

sumup-oss · May 22, 2023 · 5fee865 · 5fee865
1 parent 78a1cc0
commit 5fee865
Show file tree

Hide file tree

Showing 11 changed files with 46 additions and 46 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
@@ -58,7 +58,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;
@@ -186,7 +186,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;
@@ -362,7 +362,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
@@ -36,7 +36,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;
@@ -144,7 +144,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;
@@ -251,7 +251,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;
@@ -401,7 +401,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;
@@ -524,7 +524,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;
@@ -664,7 +664,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;
@@ -783,7 +783,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;
@@ -901,7 +901,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;
@@ -1008,7 +1008,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;
@@ -1143,7 +1143,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;
@@ -1263,7 +1263,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;
@@ -1382,7 +1382,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;
@@ -1500,7 +1500,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
@@ -805,7 +805,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
@@ -52,7 +52,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
@@ -45,7 +45,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;
@@ -177,7 +177,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
@@ -42,7 +42,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;
@@ -236,7 +236,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;
@@ -435,7 +435,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;
@@ -661,7 +661,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;
@@ -855,7 +855,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;
@@ -1049,7 +1049,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;
@@ -1232,7 +1232,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
@@ -96,7 +96,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 {
@@ -109,7 +109,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};
   }