diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 0d3e139a7dd555..0f0c9e6d019ba3 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -47,7 +47,7 @@ $radius-x-small: 1px; // Applied to elements like buttons nested within primit
$radius-small: 2px; // Applied to most primitives.
$radius-medium: 4px; // Applied to containers with smaller padding.
$radius-large: 8px; // Applied to containers with larger padding.
-$radius-full: 9999px; // For lozenges.
+$radius-full: 9999px; // For pills.
$radius-round: 50%; // For circles and ovals.
/**
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index e758e457bdd03e..a2fbc3a820d2e9 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -27,6 +27,32 @@
- `TimePicker`: add `hideLabelFromVision` prop ([#64267](https://github.com/WordPress/gutenberg/pull/64267)).
- `FocalPointPicker`: Default to new 40px size ([#64456](https://github.com/WordPress/gutenberg/pull/64456)).
- `DropdownMenuV2`: adopt elevation scale ([#64432](https://github.com/WordPress/gutenberg/pull/64432)).
+- `AlignmentMatrixControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `AnglePickerControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `BorderControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `ButtonGroup`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `Button`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `CircularOptionPicker`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `ColorIndicator`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `ColorPalette`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `CustomGradientPicker`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `DropZone`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `DropdownMenuV2`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `FocalPointPicker`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `Guide`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `Modal`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `Placeholder`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `Popover`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `ProgressBar`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `RadioControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `Snackbar`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `TabPanel`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `Text`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `ToggleGroupControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `ToolbarGroup`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `Toolbar`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `Tooltip`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+- `UnitControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
- `Popover`: allow `style` prop usage ([#64489](https://github.com/WordPress/gutenberg/pull/64489)).
diff --git a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts
index bdb015ec64c6a7..efbd23ab2be0af 100644
--- a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts
+++ b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts
@@ -7,7 +7,7 @@ import { css } from '@emotion/react';
/**
* Internal dependencies
*/
-import { COLORS } from '../../utils';
+import { COLORS, CONFIG } from '../../utils';
import type {
AlignmentMatrixControlProps,
AlignmentMatrixControlCellProps,
@@ -15,7 +15,7 @@ import type {
export const rootBase = () => {
return css`
- border-radius: 2px;
+ border-radius: ${ CONFIG.radiusMedium };
box-sizing: border-box;
direction: ltr;
display: grid;
diff --git a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
index 0141bd860d7df9..f57d60db0744b1 100644
--- a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
+++ b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
@@ -15,7 +15,7 @@ const CIRCLE_SIZE = 32;
const INNER_CIRCLE_SIZE = 6;
export const CircleRoot = styled.div`
- border-radius: 50%;
+ border-radius: ${ CONFIG.radiusRound };
border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
box-sizing: border-box;
cursor: grab;
@@ -41,7 +41,7 @@ export const CircleIndicatorWrapper = styled.div`
export const CircleIndicator = styled.div`
background: ${ COLORS.theme.accent };
- border-radius: 50%;
+ border-radius: ${ CONFIG.radiusRound };
box-sizing: border-box;
display: block;
left: 50%;
diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts
index 28669ebf3ccc78..2c77a2d21465d6 100644
--- a/packages/components/src/border-control/styles.ts
+++ b/packages/components/src/border-control/styles.ts
@@ -99,7 +99,7 @@ export const colorIndicatorWrapper = (
const { style } = border || {};
return css`
- border-radius: 9999px;
+ border-radius: ${ CONFIG.radiusFull };
border: 2px solid transparent;
${ style ? colorIndicatorBorder( border ) : undefined }
width: ${ size === '__unstable-large' ? '24px' : '22px' };
diff --git a/packages/components/src/button-group/style.scss b/packages/components/src/button-group/style.scss
index 171722b409f693..96a9e8f458c84c 100644
--- a/packages/components/src/button-group/style.scss
+++ b/packages/components/src/button-group/style.scss
@@ -12,11 +12,11 @@
}
&:first-child {
- border-radius: $radius-block-ui 0 0 $radius-block-ui;
+ border-radius: $radius-small 0 0 $radius-small;
}
&:last-child {
- border-radius: 0 $radius-block-ui $radius-block-ui 0;
+ border-radius: 0 $radius-small $radius-small 0;
}
// The focused button should be elevated so the focus ring isn't cropped,
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 7d67dcc0748b85..444e4d397b3ef8 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -22,7 +22,7 @@
align-items: center;
box-sizing: border-box;
padding: 6px 12px;
- border-radius: $radius-block-ui;
+ border-radius: $radius-small;
color: $components-color-foreground;
&.is-next-40px-default-size {
@@ -249,7 +249,7 @@
height: auto;
&:focus {
- border-radius: $radius-block-ui;
+ border-radius: $radius-small;
}
&:disabled,
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index 33ba6070dde799..74a380e0936be8 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -70,7 +70,7 @@ $color-palette-circle-spacing: 12px;
height: 100%;
width: 100%;
border: none;
- border-radius: 50%;
+ border-radius: $radius-round;
background: transparent;
box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5);
transition: 100ms box-shadow ease;
@@ -93,7 +93,7 @@ $color-palette-circle-spacing: 12px;
position: absolute;
left: 2px;
top: 2px;
- border-radius: 50%;
+ border-radius: $radius-round;
z-index: z-index(".components-circular-option-picker__option.is-pressed + svg");
pointer-events: none;
}
diff --git a/packages/components/src/color-indicator/style.scss b/packages/components/src/color-indicator/style.scss
index e70b8a09ca5bf5..4029b50340e62a 100644
--- a/packages/components/src/color-indicator/style.scss
+++ b/packages/components/src/color-indicator/style.scss
@@ -2,7 +2,7 @@
width: $grid-unit-50 * 0.5;
height: $grid-unit-50 * 0.5;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
- border-radius: 50%;
+ border-radius: $radius-round;
display: inline-block;
padding: 0;
background: $white linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index 2d6bc4ddc1db3d..9d922a8130692a 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -14,7 +14,7 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
cursor: pointer;
// Show a thin outline in Windows high contrast mode.
outline: 1px solid transparent;
- border-radius: $radius-block-ui $radius-block-ui 0 0;
+ border-radius: $radius-medium $radius-medium 0 0;
box-shadow: $border-as-box-shadow;
&:focus {
@@ -46,7 +46,7 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
.components-color-palette__custom-color-text-wrapper {
padding: $grid-unit-15 $grid-unit-20;
- border-radius: 0 0 $radius-block-ui $radius-block-ui;
+ border-radius: 0 0 $radius-medium $radius-medium;
position: relative;
font-size: $default-font-size;
diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss
index e7828127ff8d33..a8c6d6b872caf0 100644
--- a/packages/components/src/custom-gradient-picker/style.scss
+++ b/packages/components/src/custom-gradient-picker/style.scss
@@ -1,7 +1,7 @@
$components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 16px handles inside, that leaves 32px padding, half of which is 1å6.
.components-custom-gradient-picker__gradient-bar {
- border-radius: $radius-block-ui;
+ border-radius: $radius-small;
width: 100%;
height: $grid-unit-60;
position: relative;
diff --git a/packages/components/src/drop-zone/style.scss b/packages/components/src/drop-zone/style.scss
index 2793dc708cf03f..d3cd18a75b1f8f 100644
--- a/packages/components/src/drop-zone/style.scss
+++ b/packages/components/src/drop-zone/style.scss
@@ -7,7 +7,7 @@
z-index: z-index(".components-drop-zone");
visibility: hidden;
opacity: 0;
- border-radius: $radius-block-ui;
+ border-radius: $radius-small;
&.is-active {
opacity: 1;
diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts
index 950a549f8566a4..3260a83f45f1c1 100644
--- a/packages/components/src/dropdown-menu-v2/styles.ts
+++ b/packages/components/src/dropdown-menu-v2/styles.ts
@@ -87,7 +87,7 @@ export const DropdownMenu = styled( Ariakit.Menu )<
padding: ${ CONTENT_WRAPPER_PADDING };
background-color: ${ COLORS.ui.background };
- border-radius: 4px;
+ border-radius: ${ CONFIG.radiusMedium };
${ ( props ) => css`
box-shadow: ${ props.variant === 'toolbar'
? TOOLBAR_VARIANT_BOX_SHADOW
@@ -150,7 +150,7 @@ const baseItem = css`
line-height: 20px;
color: ${ COLORS.gray[ 900 ] };
- border-radius: ${ CONFIG.radiusBlockUi };
+ border-radius: ${ CONFIG.radiusSmall };
padding-block: ${ ITEM_PADDING_BLOCK };
padding-inline: ${ ITEM_PADDING_INLINE };
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
index 71bf4b651b4ad7..fba3eda2fb0f29 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
+++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
@@ -22,7 +22,7 @@ export const MediaWrapper = styled.div`
export const MediaContainer = styled.div`
align-items: center;
- border-radius: ${ CONFIG.radiusBlockUi };
+ border-radius: ${ CONFIG.radiusSmall };
cursor: pointer;
display: inline-flex;
justify-content: center;
diff --git a/packages/components/src/guide/style.scss b/packages/components/src/guide/style.scss
index 76f7b03ac4aafc..073bfc06843075 100644
--- a/packages/components/src/guide/style.scss
+++ b/packages/components/src/guide/style.scss
@@ -9,7 +9,6 @@
.components-modal__content {
padding: 0;
margin-top: 0;
- border-radius: $radius-block-ui;
&::before {
content: none;
diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts
index 166f225790ce27..66c6158f9af1a3 100644
--- a/packages/components/src/item-group/styles.ts
+++ b/packages/components/src/item-group/styles.ts
@@ -70,7 +70,7 @@ export const separated = css`
}
`;
-const borderRadius = CONFIG.controlBorderRadius;
+const borderRadius = CONFIG.radiusSmall;
export const spacedAround = css`
border-radius: ${ borderRadius };
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index e563b29070bef2..c862363a0d3c81 100644
--- a/packages/components/src/modal/style.scss
+++ b/packages/components/src/modal/style.scss
@@ -21,7 +21,7 @@
width: 100%;
background: $white;
box-shadow: $shadow-modal;
- border-radius: $grid-unit-05 $grid-unit-05 0 0;
+ border-radius: $radius-large $radius-large 0 0;
overflow: hidden;
// Have the content element fill the vertical space yet not overflow.
display: flex;
@@ -32,7 +32,7 @@
// Show a centered modal on bigger screens.
@include break-small() {
- border-radius: $grid-unit-05;
+ border-radius: $radius-large;
margin: auto;
width: auto;
min-width: $modal-min-width;
diff --git a/packages/components/src/palette-edit/styles.ts b/packages/components/src/palette-edit/styles.ts
index aa4ed720b93bfe..ad918d8590cf23 100644
--- a/packages/components/src/palette-edit/styles.ts
+++ b/packages/components/src/palette-edit/styles.ts
@@ -31,7 +31,7 @@ export const IndicatorStyled = styled( ColorIndicator )`
export const NameInputControl = styled( InputControl )`
${ InputControlContainer } {
background: ${ COLORS.gray[ 100 ] };
- border-radius: ${ CONFIG.controlBorderRadius };
+ border-radius: ${ CONFIG.radiusXSmall };
${ Input }${ Input }${ Input }${ Input } {
height: ${ space( 8 ) };
}
@@ -85,8 +85,8 @@ export const PaletteItem = styled( View )`
outline-offset: 0;
}
- border-top-left-radius: ${ CONFIG.controlBorderRadius };
- border-top-right-radius: ${ CONFIG.controlBorderRadius };
+ border-top-left-radius: ${ CONFIG.radiusSmall };
+ border-top-right-radius: ${ CONFIG.radiusSmall };
& + & {
border-top-left-radius: 0;
@@ -94,8 +94,8 @@ export const PaletteItem = styled( View )`
}
&:last-child {
- border-bottom-left-radius: ${ CONFIG.controlBorderRadius };
- border-bottom-right-radius: ${ CONFIG.controlBorderRadius };
+ border-bottom-left-radius: ${ CONFIG.radiusSmall };
+ border-bottom-right-radius: ${ CONFIG.radiusSmall };
border-bottom-color: ${ CONFIG.surfaceBorderColor };
}
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index e046ce1e3a427e..61090c81110a5c 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -19,7 +19,7 @@
// Block UI appearance.
- border-radius: $radius-block-ui;
+ border-radius: $radius-medium;
background-color: $white;
box-shadow: inset 0 0 0 $border-width $gray-900;
outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
index c7ff0510986bfa..f9f43870a6b927 100644
--- a/packages/components/src/popover/style.scss
+++ b/packages/components/src/popover/style.scss
@@ -23,7 +23,7 @@ $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
.components-popover__content {
background: $white;
box-shadow: $shadow-popover-border-default, $shadow-popover;
- border-radius: $radius-block-ui;
+ border-radius: $radius-medium;
box-sizing: border-box;
width: min-content;
diff --git a/packages/components/src/progress-bar/styles.ts b/packages/components/src/progress-bar/styles.ts
index 79b9103e73a1ed..585b9ab2620753 100644
--- a/packages/components/src/progress-bar/styles.ts
+++ b/packages/components/src/progress-bar/styles.ts
@@ -40,7 +40,7 @@ export const Track = styled.div`
${ COLORS.theme.foreground },
transparent 90%
);
- border-radius: ${ CONFIG.radiusBlockUi };
+ border-radius: ${ CONFIG.radiusFull };
// Windows high contrast mode.
outline: 2px solid transparent;
@@ -58,7 +58,7 @@ export const Indicator = styled.div< {
position: absolute;
top: 0;
height: 100%;
- border-radius: ${ CONFIG.radiusBlockUi };
+ border-radius: ${ CONFIG.radiusFull };
/* Text color at 90% opacity */
background-color: color-mix(
in srgb,
diff --git a/packages/components/src/radio-control/style.scss b/packages/components/src/radio-control/style.scss
index 7444ea1343b842..e9732558f2901e 100644
--- a/packages/components/src/radio-control/style.scss
+++ b/packages/components/src/radio-control/style.scss
@@ -32,7 +32,7 @@
&::before {
content: "";
- border-radius: 50%;
+ border-radius: $radius-round;
}
}
}
diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss
index 0ba1774d67382f..5bea7076599b56 100644
--- a/packages/components/src/snackbar/style.scss
+++ b/packages/components/src/snackbar/style.scss
@@ -3,7 +3,7 @@
font-size: $default-font-size;
background: rgba($black, 0.85); // Emulates #1e1e1e closely.
backdrop-filter: blur($grid-unit-20) saturate(180%);
- border-radius: $radius-block-ui;
+ border-radius: $radius-medium;
box-shadow: $shadow-popover;
color: $white;
padding: $grid-unit-15 ($grid-unit-05 * 5);
diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss
index 2855f8c2b06a01..ab73a7affaeed4 100644
--- a/packages/components/src/tab-panel/style.scss
+++ b/packages/components/src/tab-panel/style.scss
@@ -67,7 +67,7 @@
// Draw the indicator.
box-shadow: 0 0 0 0 transparent;
- border-radius: $radius-block-ui;
+ border-radius: $radius-small;
// Animation
transition: all 0.1s linear;
diff --git a/packages/components/src/text/styles.ts b/packages/components/src/text/styles.ts
index c7d48552795938..e777ed4f0941de 100644
--- a/packages/components/src/text/styles.ts
+++ b/packages/components/src/text/styles.ts
@@ -35,7 +35,7 @@ export const muted = css`
export const highlighterText = css`
mark {
background: ${ COLORS.alert.yellow };
- border-radius: 2px;
+ border-radius: ${ CONFIG.radiusSmall };
box-shadow:
0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,
0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;
diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
index d055ea5fcc9838..e9b4f4ca22ab85 100644
--- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
@@ -84,7 +84,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
appearance: none;
background: transparent;
border: none;
- border-radius: 2px;
+ border-radius: 1px;
color: #757575;
fill: currentColor;
cursor: pointer;
@@ -152,7 +152,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
.emotion-15 {
background: #1e1e1e;
- border-radius: 2px;
+ border-radius: 1px;
position: absolute;
inset: 0;
z-index: 1;
@@ -171,7 +171,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
appearance: none;
background: transparent;
border: none;
- border-radius: 2px;
+ border-radius: 1px;
color: #757575;
fill: currentColor;
cursor: pointer;
@@ -416,7 +416,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
appearance: none;
background: transparent;
border: none;
- border-radius: 2px;
+ border-radius: 1px;
color: #757575;
fill: currentColor;
cursor: pointer;
@@ -636,7 +636,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
appearance: none;
background: transparent;
border: none;
- border-radius: 2px;
+ border-radius: 1px;
color: #757575;
fill: currentColor;
cursor: pointer;
@@ -704,7 +704,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
.emotion-15 {
background: #1e1e1e;
- border-radius: 2px;
+ border-radius: 1px;
position: absolute;
inset: 0;
z-index: 1;
@@ -723,7 +723,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
appearance: none;
background: transparent;
border: none;
- border-radius: 2px;
+ border-radius: 1px;
color: #757575;
fill: currentColor;
cursor: pointer;
@@ -962,7 +962,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
appearance: none;
background: transparent;
border: none;
- border-radius: 2px;
+ border-radius: 1px;
color: #757575;
fill: currentColor;
cursor: pointer;
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 999a25df8bdd40..86efc5224077f4 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
@@ -37,7 +37,7 @@ export const buttonView = ( {
appearance: none;
background: transparent;
border: none;
- border-radius: ${ CONFIG.controlBorderRadius };
+ border-radius: ${ CONFIG.radiusXSmall };
color: ${ COLORS.gray[ 700 ] };
fill: currentColor;
cursor: pointer;
@@ -122,7 +122,7 @@ const isIconStyles = ( {
export const backdropView = css`
background: ${ COLORS.gray[ 900 ] };
- border-radius: ${ CONFIG.controlBorderRadius };
+ border-radius: ${ CONFIG.radiusXSmall };
position: absolute;
inset: 0;
z-index: 1;
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
index 7310024706e1de..8d01c150a45eaf 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
@@ -19,7 +19,7 @@ export const toggleGroupControl = ( {
} ) => css`
background: ${ COLORS.ui.background };
border: 1px solid transparent;
- border-radius: ${ CONFIG.controlBorderRadius };
+ border-radius: ${ CONFIG.radiusSmall };
display: inline-flex;
min-width: 0;
position: relative;
diff --git a/packages/components/src/toolbar/toolbar/style.scss b/packages/components/src/toolbar/toolbar/style.scss
index eccfc3bf705cbd..c0cabacb84c77e 100644
--- a/packages/components/src/toolbar/toolbar/style.scss
+++ b/packages/components/src/toolbar/toolbar/style.scss
@@ -1,7 +1,7 @@
.components-accessible-toolbar {
display: inline-flex;
border: $border-width solid $gray-900;
- border-radius: $radius-block-ui;
+ border-radius: $radius-small;
flex-shrink: 0;
& > .components-toolbar-group:last-child {
@@ -47,7 +47,7 @@
content: "";
position: absolute;
display: block;
- border-radius: $radius-block-ui;
+ border-radius: $radius-small;
height: $grid-unit-40;
// Position the focus rectangle.
diff --git a/packages/components/src/tooltip/style.scss b/packages/components/src/tooltip/style.scss
index feda6cfa81c887..eaac8b3ad1c7f6 100644
--- a/packages/components/src/tooltip/style.scss
+++ b/packages/components/src/tooltip/style.scss
@@ -1,7 +1,7 @@
.components-tooltip {
background: $black;
font-family: $default-font;
- border-radius: $radius-block-ui;
+ border-radius: $radius-small;
color: $gray-100;
text-align: center;
line-height: 1.4;
diff --git a/packages/components/src/unit-control/styles/unit-control-styles.ts b/packages/components/src/unit-control/styles/unit-control-styles.ts
index 321bfb8406569d..5f59771bd48a6a 100644
--- a/packages/components/src/unit-control/styles/unit-control-styles.ts
+++ b/packages/components/src/unit-control/styles/unit-control-styles.ts
@@ -135,7 +135,7 @@ export const UnitSelect = styled.select< SelectProps >`
&&& {
appearance: none;
background: transparent;
- border-radius: 2px;
+ border-radius: ${ CONFIG.radiusXSmall };
border: none;
display: block;
outline: none;
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index 02c6f69544c2bf..0ad1b3294a926b 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -14,7 +14,6 @@ const CONTROL_PROPS = {
controlPaddingXLarge: `calc(${ CONTROL_PADDING_X } * 1.3334)`,
controlPaddingXSmall: `calc(${ CONTROL_PADDING_X } / 1.3334)`,
controlBackgroundColor: COLORS.white,
- controlBorderRadius: '2px',
controlBoxShadow: 'transparent',
controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.theme.accent }`,
controlDestructiveBorderColor: COLORS.alert.red,
@@ -48,7 +47,6 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
radiusLarge: '8px',
radiusFull: '9999px',
radiusRound: '50%',
- radiusBlockUi: '2px',
borderWidth: '1px',
borderWidthFocus: '1.5px',
borderWidthTab: '4px',
diff --git a/packages/components/src/utils/input/base.js b/packages/components/src/utils/input/base.js
index f03a1d9c77abbe..9eebd1c0bcea78 100644
--- a/packages/components/src/utils/input/base.js
+++ b/packages/components/src/utils/input/base.js
@@ -11,7 +11,7 @@ import { CONFIG } from '../';
export const inputStyleNeutral = css`
box-shadow: 0 0 0 transparent;
- border-radius: ${ CONFIG.radiusBlockUi };
+ border-radius: ${ CONFIG.radiusSmall };
border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
@media not ( prefers-reduced-motion ) {