diff --git a/packages/circuit-ui/components/CurrencyInput/__snapshots__/CurrencyInput.spec.tsx.snap b/packages/circuit-ui/components/CurrencyInput/__snapshots__/CurrencyInput.spec.tsx.snap index 88713d6c92..5a560ce837 100644 --- 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 index 6f169a22f6..774118fdd1 100644 --- 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 index bfbf59c4f4..8627600502 100644 --- 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 index 3ba73abc15..349a3a0c59 100644 --- 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/packages/circuit-ui/components/Pagination/components/PageSelect/__snapshots__/PageSelect.spec.tsx.snap b/packages/circuit-ui/components/Pagination/components/PageSelect/__snapshots__/PageSelect.spec.tsx.snap index f63597d299..51d51c4a95 100644 --- a/packages/circuit-ui/components/Pagination/components/PageSelect/__snapshots__/PageSelect.spec.tsx.snap +++ b/packages/circuit-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 index debb5ffb4e..f7df8cb1d7 100644 --- 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 index 20faca66af..07102911e2 100644 --- 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 index 30be1c571d..71252630e5 100644 --- 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 index 23596c2497..0229a30bb4 100644 --- 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 index 1d134be1a4..b078e66caa 100644 --- 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}; } diff --git a/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap b/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap index c3a682469b..21991c9ad8 100644 --- a/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap +++ b/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap @@ -36,7 +36,7 @@ exports[`TextArea 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[`TextArea 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[`TextArea should render minRows props as rows when passed if rows is aut 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; @@ -371,7 +371,7 @@ exports[`TextArea should render rows props when passed 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; @@ -490,7 +490,7 @@ exports[`TextArea should render with a Tooltip when passed the validationHint pr 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; @@ -640,7 +640,7 @@ exports[`TextArea 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; @@ -763,7 +763,7 @@ exports[`TextArea 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; @@ -899,7 +899,7 @@ exports[`TextArea 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; @@ -1017,7 +1017,7 @@ exports[`TextArea should render with disabled styled when passed the disabled pr 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; @@ -1124,7 +1124,7 @@ exports[`TextArea should render with invalid styles when passed the invalid prop 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; @@ -1259,7 +1259,7 @@ exports[`TextArea should render with readonly styles when passed the readonly pr 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; @@ -1379,7 +1379,7 @@ exports[`TextArea should render with valid styles when passed the showValid prop 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; @@ -1497,7 +1497,7 @@ exports[`TextArea should render with warning styles when passed the hasWarning p 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; @@ -1631,7 +1631,7 @@ exports[`TextArea should render without rows props when passed if rows is auto 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;