refactor: update border radius from sm to md in UI components
This commit is contained in:
@@ -19,7 +19,7 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
|
|||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
gap: 'xs',
|
gap: 'xs',
|
||||||
width: 'fit-content',
|
width: 'fit-content',
|
||||||
borderRadius: 'sm',
|
borderRadius: 'md',
|
||||||
paddingBlock: 'xs',
|
paddingBlock: 'xs',
|
||||||
paddingInline: 'sm',
|
paddingInline: 'sm',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
|
|||||||
+1
-1
@@ -17,7 +17,7 @@ const chipRecipe = ({ semanticColorNames }: ChipRecipeArg) => {
|
|||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
gap: 'xs',
|
gap: 'xs',
|
||||||
lineHeight: '1',
|
lineHeight: '1',
|
||||||
borderRadius: 'sm',
|
borderRadius: 'md',
|
||||||
fontWeight: 'semibold',
|
fontWeight: 'semibold',
|
||||||
lineHeightStep: 'none',
|
lineHeightStep: 'none',
|
||||||
userSelect: 'none'
|
userSelect: 'none'
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ const detailsRecipe = ({ semanticColorNames }: DetailsRecipeArg) => {
|
|||||||
base: {
|
base: {
|
||||||
details: {
|
details: {
|
||||||
display: 'block',
|
display: 'block',
|
||||||
borderRadius: 'sm',
|
borderRadius: 'md',
|
||||||
backgroundColor: 'var(--details-background-color)',
|
backgroundColor: 'var(--details-background-color)',
|
||||||
color: 'var(--details-color)',
|
color: 'var(--details-color)',
|
||||||
border: '1px solid',
|
border: '1px solid',
|
||||||
@@ -29,7 +29,7 @@ const detailsRecipe = ({ semanticColorNames }: DetailsRecipeArg) => {
|
|||||||
},
|
},
|
||||||
summary: {
|
summary: {
|
||||||
display: 'block',
|
display: 'block',
|
||||||
borderRadius: 'sm',
|
borderRadius: 'md',
|
||||||
backgroundColor: 'var(--details-background-widget)',
|
backgroundColor: 'var(--details-background-widget)',
|
||||||
color: 'var(--details-color)',
|
color: 'var(--details-color)',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
|
|||||||
@@ -49,7 +49,7 @@ const iconButtonRecipe = ({ semanticColorNames }: IconButtonRecipeArg) => {
|
|||||||
return [
|
return [
|
||||||
shape,
|
shape,
|
||||||
{
|
{
|
||||||
borderRadius: 'sm'
|
borderRadius: 'md'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
default:
|
default:
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ export const inputRecipe = ({ semanticColorNames }: InputRecipeArg) => {
|
|||||||
className: 'input',
|
className: 'input',
|
||||||
base: {
|
base: {
|
||||||
display: 'inline-flex',
|
display: 'inline-flex',
|
||||||
borderRadius: 'sm',
|
borderRadius: 'md',
|
||||||
border: '1px solid',
|
border: '1px solid',
|
||||||
outline: 'none',
|
outline: 'none',
|
||||||
transitionProperty: 'color, background-color, border-color',
|
transitionProperty: 'color, background-color, border-color',
|
||||||
|
|||||||
+1
-1
@@ -25,7 +25,7 @@ const menuRecipe = ({ semanticColorNames }: MenuRecipeArg) => {
|
|||||||
width: 'fit-content',
|
width: 'fit-content',
|
||||||
border: '1px solid',
|
border: '1px solid',
|
||||||
borderColor: 'var(--menu-border-color)',
|
borderColor: 'var(--menu-border-color)',
|
||||||
borderRadius: 'sm',
|
borderRadius: 'md',
|
||||||
backgroundColor: 'var(--menu-background-color)',
|
backgroundColor: 'var(--menu-background-color)',
|
||||||
color: 'var(--menu-text-color)',
|
color: 'var(--menu-text-color)',
|
||||||
overflow: 'hidden'
|
overflow: 'hidden'
|
||||||
|
|||||||
@@ -12,11 +12,11 @@ const progressBarRecipe = ({ semanticColorNames }: ProgressBarRecipeArg) => {
|
|||||||
'-webkit-appearance': 'none',
|
'-webkit-appearance': 'none',
|
||||||
appearance: 'none',
|
appearance: 'none',
|
||||||
height: '1em',
|
height: '1em',
|
||||||
borderRadius: 'sm',
|
borderRadius: 'md',
|
||||||
border: '1px solid',
|
border: '1px solid',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
'&::-webkit-progress-value, &::-moz-progress-bar': {
|
'&::-webkit-progress-value, &::-moz-progress-bar': {
|
||||||
borderRadius: 'sm'
|
borderRadius: 'md'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
variants: {
|
variants: {
|
||||||
|
|||||||
@@ -31,7 +31,7 @@ const selectRecipe = ({ semanticColorNames }: SelectRecipeArg) => {
|
|||||||
justifyContent: 'space-between',
|
justifyContent: 'space-between',
|
||||||
gap: 'xs',
|
gap: 'xs',
|
||||||
minWidth: 'fit-content',
|
minWidth: 'fit-content',
|
||||||
borderRadius: 'sm',
|
borderRadius: 'md',
|
||||||
border: '1px solid',
|
border: '1px solid',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
transitionProperty: 'color, background-color, border-color',
|
transitionProperty: 'color, background-color, border-color',
|
||||||
@@ -47,7 +47,7 @@ const selectRecipe = ({ semanticColorNames }: SelectRecipeArg) => {
|
|||||||
width: 'var(--radix-select-trigger-width, min(max-content, 90dvw))',
|
width: 'var(--radix-select-trigger-width, min(max-content, 90dvw))',
|
||||||
backgroundColor: 'var(--select-background-color)',
|
backgroundColor: 'var(--select-background-color)',
|
||||||
color: 'var(--select-color)',
|
color: 'var(--select-color)',
|
||||||
borderRadius: 'sm',
|
borderRadius: 'md',
|
||||||
_active: {
|
_active: {
|
||||||
animationName: 'fade',
|
animationName: 'fade',
|
||||||
animationDuration: 'normal'
|
animationDuration: 'normal'
|
||||||
@@ -80,7 +80,7 @@ const selectRecipe = ({ semanticColorNames }: SelectRecipeArg) => {
|
|||||||
justifyContent: 'flex-start',
|
justifyContent: 'flex-start',
|
||||||
gap: 'xs',
|
gap: 'xs',
|
||||||
padding: 'xs',
|
padding: 'xs',
|
||||||
borderRadius: 'sm',
|
borderRadius: 'md',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
transitionProperty: 'color, background-color',
|
transitionProperty: 'color, background-color',
|
||||||
transitionDuration: 'normal',
|
transitionDuration: 'normal',
|
||||||
|
|||||||
Reference in New Issue
Block a user