diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index a049296f35616f..4126f77790a8d3 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -51,6 +51,7 @@ $radius-20: $radius * 2; $radius-30: $radius * 3; $radius-full: $radius * 999; +$radius-atom: $radius / 2; $radius-primitive: $radius-10; $radius-small-container: $radius-20; $radius-large-container: $radius-30; diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss index 30d61a5e8ecd6d..7a5c4976b4aa01 100644 --- a/packages/components/src/dropdown-menu/style.scss +++ b/packages/components/src/dropdown-menu/style.scss @@ -41,7 +41,7 @@ color: $white; background: $gray-900; box-shadow: 0 0 0 $border-width $gray-900; - border-radius: $radius-primitive; + border-radius: $radius-atom; } } diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts index 7b3aa2c36b616e..78ae93d5680c66 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts +++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts @@ -117,7 +117,7 @@ const isIconStyles = ( { export const backdropView = css` background: ${ COLORS.gray[ 900 ] }; - border-radius: ${ CONFIG.radiusPrimitive }; + border-radius: ${ CONFIG.radiusAtom }; position: absolute; inset: 0; z-index: 1; diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js index e830aa8b3c02c1..4802e7518b2c9d 100644 --- a/packages/components/src/utils/config-values.js +++ b/packages/components/src/utils/config-values.js @@ -43,6 +43,7 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, { colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)', elevationIntensity: 1, radiusBlockUi: '2px', + radiusAtom: '2px', radiusPrimitive: '4px', radiusSmallContainer: '8px', radiusLargeContainer: '12px',