diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 0d3e139a7dd55..0f0c9e6d019ba 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 e758e457bdd03..a2fbc3a820d2e 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 bdb015ec64c6a..efbd23ab2be0a 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 0141bd860d7df..f57d60db0744b 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 28669ebf3ccc7..2c77a2d21465d 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 171722b409f69..96a9e8f458c84 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 7d67dcc0748b8..444e4d397b3ef 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 33ba6070dde79..74a380e0936be 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 e70b8a09ca5bf..4029b50340e62 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 2d6bc4ddc1db3..9d922a8130692 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 e7828127ff8d3..a8c6d6b872caf 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 2793dc708cf03..d3cd18a75b1f8 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 950a549f8566a..3260a83f45f1c 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 71bf4b651b4ad..fba3eda2fb0f2 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 76f7b03ac4aaf..073bfc0684307 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 166f225790ce2..66c6158f9af1a 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 e563b29070bef..c862363a0d3c8 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 aa4ed720b93bf..ad918d8590cf2 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 e046ce1e3a427..61090c81110a5 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 c7ff0510986bf..f9f43870a6b92 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 79b9103e73a1e..585b9ab262075 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 7444ea1343b84..e9732558f2901 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 0ba1774d67382..5bea7076599b5 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 2855f8c2b06a0..ab73a7affaeed 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 c7d4855279593..e777ed4f0941d 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 d055ea5fcc983..e9b4f4ca22ab8 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 999a25df8bdd4..86efc5224077f 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 7310024706e1d..8d01c150a45ea 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 eccfc3bf705cb..c0cabacb84c77 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 feda6cfa81c88..eaac8b3ad1c7f 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 321bfb8406569..5f59771bd48a6 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 02c6f69544c2b..0ad1b3294a926 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 f03a1d9c77abb..9eebd1c0bcea7 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 ) {