From e0587dfb30b6b6f1d349b5e4a7345068e67f0b07 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Tue, 1 Aug 2023 14:46:07 +0100 Subject: [PATCH] Chore: Replace deprecated usage of `shape.borderRadius()` (#72672) * properly mark borderRadius() as deprecated, replace borderRadius() with default * undo a couple of changes * use radius.pill in FilterPill --- packages/grafana-data/src/themes/createShape.ts | 3 +++ packages/grafana-ui/src/components/Alert/Alert.tsx | 2 +- .../src/components/BigValue/BigValueLayout.tsx | 2 +- .../grafana-ui/src/components/BrowserLabel/Label.tsx | 2 +- packages/grafana-ui/src/components/Card/Card.tsx | 2 +- .../grafana-ui/src/components/Card/CardContainer.tsx | 4 ++-- .../src/components/ColorPicker/ColorInput.tsx | 2 +- .../src/components/ColorPicker/ColorPickerPopover.tsx | 4 ++-- .../src/components/ColorPicker/SpectrumPalette.tsx | 4 ++-- .../DateTimePickers/DateTimePicker/DateTimePicker.tsx | 2 +- .../src/components/DateTimePickers/TimeOfDayPicker.tsx | 2 +- .../src/components/FilterPill/FilterPill.tsx | 2 +- packages/grafana-ui/src/components/Forms/Checkbox.tsx | 2 +- .../src/components/Forms/FieldValidationMessage.tsx | 2 +- .../components/Forms/RadioButtonGroup/RadioButton.tsx | 2 +- .../Forms/RadioButtonGroup/RadioButtonGroup.tsx | 2 +- packages/grafana-ui/src/components/Input/Input.tsx | 4 ++-- .../components/InteractiveTable/InteractiveTable.tsx | 2 +- packages/grafana-ui/src/components/Menu/Menu.tsx | 2 +- packages/grafana-ui/src/components/Menu/SubMenu.tsx | 2 +- .../grafana-ui/src/components/Modal/getModalStyles.ts | 2 +- .../grafana-ui/src/components/Monaco/CodeEditor.tsx | 2 +- .../src/components/PanelChrome/PanelChrome.tsx | 2 +- .../src/components/PanelChrome/TitleItem.tsx | 2 +- .../src/components/Select/getSelectStyles.ts | 2 +- packages/grafana-ui/src/components/Switch/Switch.tsx | 2 +- .../grafana-ui/src/components/TextArea/TextArea.tsx | 2 +- .../src/components/ToolbarButton/ToolbarButton.tsx | 2 +- .../src/components/ToolbarButton/ToolbarButtonRow.tsx | 2 +- .../grafana-ui/src/components/VizLayout/VizLayout.tsx | 2 +- packages/grafana-ui/src/themes/_variables.scss.tmpl.ts | 4 ++-- .../components/AppChrome/MegaMenu/NavBarMenuItem.tsx | 4 ++-- .../AppChrome/MegaMenu/NavBarMenuSection.tsx | 2 +- public/app/core/components/CardButton.tsx | 2 +- .../app/core/components/Layers/LayerDragDropList.tsx | 2 +- public/app/core/components/Page/Page.tsx | 2 +- .../components/QueryOperationRow/OperationRowHelp.tsx | 2 +- .../QueryOperationRow/QueryOperationRowHeader.tsx | 2 +- public/app/core/components/RolePicker/styles.ts | 2 +- public/app/core/utils/ConfigProvider.tsx | 2 +- public/app/features/alerting/unified/Home.tsx | 2 +- .../alerting/unified/components/AlertLabel.tsx | 2 +- .../alerting/unified/components/DynamicTable.tsx | 2 +- .../features/alerting/unified/components/HoverCard.tsx | 2 +- .../features/alerting/unified/components/StateTag.tsx | 2 +- .../features/alerting/unified/components/Tokenize.tsx | 2 +- .../app/features/alerting/unified/components/Well.tsx | 2 +- .../components/contact-points/ContactPoints.v2.tsx | 10 +++++----- .../unified/components/expressions/Expression.tsx | 4 ++-- .../components/mute-timings/MuteTimingTimeInterval.tsx | 2 +- .../components/notification-policies/Policy.tsx | 6 +++--- .../components/receivers/form/ChannelSubForm.tsx | 2 +- .../unified/components/receivers/form/fields/styles.ts | 2 +- .../receivers/grafanaAppReceivers/GrafanaAppBadge.tsx | 2 +- .../unified/components/rule-editor/AlertRuleForm.tsx | 2 +- .../components/rule-editor/PreviewRuleResult.tsx | 2 +- .../unified/components/rule-editor/QueryWrapper.tsx | 2 +- .../unified/components/rule-editor/VizWrapper.tsx | 2 +- .../unified/components/rule-viewer/RuleViewer.v1.tsx | 2 +- .../components/rule-viewer/RuleViewerLayout.tsx | 2 +- .../alerting/unified/components/rules/RulesTable.tsx | 2 +- .../unified/components/silences/SilencesTable.tsx | 2 +- public/app/features/alerting/unified/styles/table.ts | 2 +- .../ConfigPublicDashboard/SettingsBarHeader.tsx | 2 +- .../TransformationsEditor/TransformationEditor.tsx | 2 +- .../TransformationsEditor/TransformationFilter.tsx | 2 +- .../dashboard/components/VersionHistory/DiffValues.tsx | 2 +- .../dashgrid/PanelHeader/PanelHeaderNotice.tsx | 4 ++-- public/app/features/dashboard/dashgrid/PanelLinks.tsx | 2 +- .../dimensions/editors/ResourcePickerPopover.tsx | 4 ++-- .../explore/FlameGraph/FlameGraphExploreContainer.tsx | 2 +- public/app/features/explore/Logs/Logs.tsx | 2 +- .../features/explore/RichHistory/RichHistoryCard.tsx | 2 +- .../app/features/expressions/components/Condition.tsx | 2 +- .../app/features/expressions/components/Threshold.tsx | 2 +- public/app/features/library-panels/styles.ts | 2 +- public/app/features/logs/components/LogLabels.tsx | 2 +- .../app/features/notifications/StoredNotifications.tsx | 2 +- .../panel/components/VizTypePicker/PanelTypeCard.tsx | 2 +- .../VizTypePicker/VisualizationSuggestionCard.tsx | 2 +- .../plugins/admin/components/PluginListItem.tsx | 2 +- .../features/variables/pickers/shared/VariableLink.tsx | 2 +- .../QueryEditor/EditorRow.tsx | 2 +- .../datasource/grafana/components/TimePickerInput.tsx | 2 +- .../graphite/components/GraphiteFunctionEditor.tsx | 2 +- .../components/monaco-query-field/MonacoQueryField.tsx | 2 +- .../plugins/datasource/parca/QueryEditor/EditorRow.tsx | 2 +- .../components/monaco-query-field/MonacoQueryField.tsx | 2 +- .../components/metrics-modal/ResultsTable.tsx | 2 +- .../prometheus/querybuilder/shared/OperationEditor.tsx | 2 +- .../querybuilder/shared/OperationExplainedBox.tsx | 2 +- .../querybuilder/shared/OperationInfoButton.tsx | 2 +- .../querybuilder/shared/OperationsEditorRow.tsx | 2 +- .../tempo/NativeSearch/TagsField/TagsField.tsx | 2 +- .../plugins/datasource/tempo/traceql/TraceQLEditor.tsx | 2 +- public/app/plugins/panel/alertlist/AlertList.tsx | 2 +- .../app/plugins/panel/alertlist/UnifiedAlertList.tsx | 2 +- .../panel/alertlist/unified-alerting/UngroupedView.tsx | 2 +- public/app/plugins/panel/canvas/globalStyles.ts | 2 +- public/app/plugins/panel/dashlist/DashList.tsx | 2 +- public/app/plugins/panel/nodeGraph/NodeGraph.tsx | 2 +- public/app/plugins/panel/text/TextPanelEditor.tsx | 2 +- .../panel/timeseries/plugins/ThresholdDragHandle.tsx | 6 +++--- .../plugins/annotations/AnnotationEditorForm.tsx | 2 +- public/app/plugins/panel/xychart/AutoEditor.tsx | 2 +- public/app/plugins/panel/xychart/ManualEditor.tsx | 2 +- 106 files changed, 125 insertions(+), 122 deletions(-) diff --git a/packages/grafana-data/src/themes/createShape.ts b/packages/grafana-data/src/themes/createShape.ts index 4afb884b2ed..881633523f4 100644 --- a/packages/grafana-data/src/themes/createShape.ts +++ b/packages/grafana-data/src/themes/createShape.ts @@ -1,5 +1,8 @@ /** @beta */ export interface ThemeShape { + /** + * @deprecated Use `theme.shape.radius.default`, `theme.shape.radius.pill` or `theme.shape.radius.circle` instead + */ borderRadius: (amount?: number) => string; radius: Radii; } diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx index d426697aaea..bfec7a96e8f 100644 --- a/packages/grafana-ui/src/components/Alert/Alert.tsx +++ b/packages/grafana-ui/src/components/Alert/Alert.tsx @@ -120,7 +120,7 @@ const getStyles = ( topSpacing?: number ) => { const color = theme.colors[severity]; - const borderRadius = theme.shape.borderRadius(); + const borderRadius = theme.shape.radius.default; const borderColor = tinycolor2(color.border).setAlpha(0.2).toString(); return { diff --git a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx index ed547a6f685..8e52e9f379b 100644 --- a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx +++ b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx @@ -127,7 +127,7 @@ export abstract class BigValueLayout { width: `${width}px`, height: `${height}px`, padding: `${this.panelPadding}px`, - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, position: 'relative', display: 'flex', }; diff --git a/packages/grafana-ui/src/components/BrowserLabel/Label.tsx b/packages/grafana-ui/src/components/BrowserLabel/Label.tsx index 31f47aae5ee..1b83a57bc26 100644 --- a/packages/grafana-ui/src/components/BrowserLabel/Label.tsx +++ b/packages/grafana-ui/src/components/BrowserLabel/Label.tsx @@ -111,7 +111,7 @@ const getLabelStyles = (theme: GrafanaTheme2) => ({ whiteSpace: 'nowrap', textShadow: 'none', padding: theme.spacing(0.5), - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, border: 'none', marginRight: theme.spacing(1), marginBottom: theme.spacing(0.5), diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx index af92839c29c..13a01ab8a2f 100644 --- a/packages/grafana-ui/src/components/Card/Card.tsx +++ b/packages/grafana-ui/src/components/Card/Card.tsx @@ -133,7 +133,7 @@ const getHeadingStyles = (theme: GrafanaTheme2) => ({ bottom: 0, left: 0, right: 0, - borderRadius: theme.shape.borderRadius(1), + borderRadius: theme.shape.radius.default, }, '&:focus-visible': { diff --git a/packages/grafana-ui/src/components/Card/CardContainer.tsx b/packages/grafana-ui/src/components/Card/CardContainer.tsx index 09a2a25df79..7205f6df6cb 100644 --- a/packages/grafana-ui/src/components/Card/CardContainer.tsx +++ b/packages/grafana-ui/src/components/Card/CardContainer.tsx @@ -86,7 +86,7 @@ export const getCardContainerStyles = stylesFactory( width: '100%', padding: theme.spacing(2), background: theme.colors.background.secondary, - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, marginBottom: '8px', pointerEvents: disabled ? 'none' : 'auto', transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], { @@ -114,7 +114,7 @@ export const getCardContainerStyles = stylesFactory( display: 'flex', width: '100%', background: theme.colors.background.secondary, - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, position: 'relative', pointerEvents: disabled ? 'none' : 'auto', marginBottom: theme.spacing(1), diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx index 7ab60ed10ca..d8891939c66 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx @@ -104,6 +104,6 @@ const getColorPreviewStyles = (theme: GrafanaTheme2) => css({ height: '100%', width: `${theme.spacing.gridSize * 4}px`, - borderRadius: `${theme.shape.borderRadius()} 0 0 ${theme.shape.borderRadius()}`, + borderRadius: `${theme.shape.radius.default} 0 0 ${theme.shape.radius.default}`, border: `1px solid ${theme.colors.border.medium}`, }); diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx index 3be130383da..e6037228b56 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx @@ -141,7 +141,7 @@ ColorPickerPopover.displayName = 'ColorPickerPopover'; const getStyles = stylesFactory((theme: GrafanaTheme2) => { return { colorPickerPopover: css({ - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, boxShadow: theme.shadows.z3, background: theme.colors.background.primary, border: `1px solid ${theme.colors.border.weak}`, @@ -183,7 +183,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => { colorPickerPopoverTabs: css({ display: 'flex', width: '100%', - borderRadius: `${theme.shape.borderRadius()} ${theme.shape.borderRadius()} 0 0`, + borderRadius: `${theme.shape.radius.default} ${theme.shape.radius.default} 0 0`, }), }; }); diff --git a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx index c6087a16416..825b59dbd1c 100644 --- a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx @@ -54,10 +54,10 @@ export const getStyles = (theme: GrafanaTheme2) => ({ '.react-colorful': { '&__saturation': { - borderRadius: `${theme.shape.borderRadius(1)} ${theme.shape.borderRadius(1)} 0 0`, + borderRadius: `${theme.shape.radius.default} ${theme.shape.radius.default} 0 0`, }, '&__alpha': { - borderRadius: `0 0 ${theme.shape.borderRadius(1)} ${theme.shape.borderRadius(1)}`, + borderRadius: `0 0 ${theme.shape.radius.default} ${theme.shape.radius.default}`, }, '&__alpha, &__hue': { height: theme.spacing(2), diff --git a/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx index 093e7b7b691..0371341e09e 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx @@ -328,7 +328,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ container: css({ padding: theme.spacing(1), border: `1px ${theme.colors.border.weak} solid`, - borderRadius: theme.shape.borderRadius(1), + borderRadius: theme.shape.radius.default, backgroundColor: theme.colors.background.primary, zIndex: theme.zIndex.modal, }), diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx index 90d0cd24357..ed5ec3cfdec 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx @@ -78,7 +78,7 @@ const getStyles = (theme: GrafanaTheme2) => { const bgColor = theme.components.input.background; const menuShadowColor = theme.v1.palette.black; const optionBgHover = theme.colors.background.secondary; - const borderRadius = theme.shape.borderRadius(1); + const borderRadius = theme.shape.radius.default; const borderColor = theme.components.input.borderColor; return { caretWrapper: css({ diff --git a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx b/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx index a09be61c3af..1612747b533 100644 --- a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx +++ b/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx @@ -30,7 +30,7 @@ const getStyles = (theme: GrafanaTheme2) => { return { wrapper: css({ background: theme.colors.background.secondary, - borderRadius: theme.shape.borderRadius(8), + borderRadius: theme.shape.radius.pill, padding: theme.spacing(0, 2), fontSize: theme.typography.bodySmall.fontSize, fontWeight: theme.typography.fontWeightMedium, diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.tsx index f254c49711b..97ee940235b 100644 --- a/packages/grafana-ui/src/components/Forms/Checkbox.tsx +++ b/packages/grafana-ui/src/components/Forms/Checkbox.tsx @@ -183,7 +183,7 @@ export const getCheckboxStyles = (theme: GrafanaTheme2, invalid = false) => { display: 'inline-block', width: theme.spacing(checkboxSize), height: theme.spacing(checkboxSize), - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, background: theme.components.input.background, border: `1px solid ${getBorderColor(theme.components.input.borderColor)}`, diff --git a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx index 517fa7be28b..55f460653bf 100644 --- a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx +++ b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx @@ -19,7 +19,7 @@ export const getFieldValidationMessageStyles = stylesFactory((theme: GrafanaThem padding: ${theme.spacing(0.5, 1)}; color: ${theme.colors.error.contrastText}; background: ${theme.colors.error.main}; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; position: relative; display: inline-block; align-self: flex-start; diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx index 9da6eb7c236..8cce37a8195 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx @@ -107,7 +107,7 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme2, size: RadioBut lineHeight: `${labelHeight}px`, color: textColor, padding: theme.spacing(0, padding), - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, background: theme.colors.background.primary, cursor: 'pointer', zIndex: 1, diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx index ac4f4882dee..208c9b0763f 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx @@ -111,7 +111,7 @@ const getStyles = (theme: GrafanaTheme2) => { flexDirection: 'row', flexWrap: 'nowrap', border: `1px solid ${theme.components.input.borderColor}`, - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, padding: '2px', }), fullWidth: css({ diff --git a/packages/grafana-ui/src/components/Input/Input.tsx b/packages/grafana-ui/src/components/Input/Input.tsx index 855dbc7077b..8f451f2c73b 100644 --- a/packages/grafana-ui/src/components/Input/Input.tsx +++ b/packages/grafana-ui/src/components/Input/Input.tsx @@ -106,7 +106,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false, width }: display: 'flex', width: width ? theme.spacing(width) : '100%', height: theme.spacing(theme.components.height.md), - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, '&:hover': { '> .prefix, .suffix, .input': { borderColor: invalid ? theme.colors.error.border : theme.colors.primary.border, @@ -186,7 +186,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false, width }: position: 'relative', zIndex: 0, flexGrow: 1, - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, height: '100%', width: '100%', }) diff --git a/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx b/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx index d122b5b3463..2c856dd61ea 100644 --- a/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx +++ b/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx @@ -33,7 +33,7 @@ const getStyles = (theme: GrafanaTheme2) => { width: '100%', }), table: css({ - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, width: '100%', td: { diff --git a/packages/grafana-ui/src/components/Menu/Menu.tsx b/packages/grafana-ui/src/components/Menu/Menu.tsx index aaf18da48ee..4d52692fe69 100644 --- a/packages/grafana-ui/src/components/Menu/Menu.tsx +++ b/packages/grafana-ui/src/components/Menu/Menu.tsx @@ -75,7 +75,7 @@ const getStyles = (theme: GrafanaTheme2) => { background: `${theme.colors.background.primary}`, boxShadow: `${theme.shadows.z3}`, display: `inline-block`, - borderRadius: `${theme.shape.borderRadius()}`, + borderRadius: `${theme.shape.radius.default}`, padding: `${theme.spacing(0.5, 0)}`, }), }; diff --git a/packages/grafana-ui/src/components/Menu/SubMenu.tsx b/packages/grafana-ui/src/components/Menu/SubMenu.tsx index a3db8c07233..03b9229b1bf 100644 --- a/packages/grafana-ui/src/components/Menu/SubMenu.tsx +++ b/packages/grafana-ui/src/components/Menu/SubMenu.tsx @@ -88,7 +88,7 @@ const getStyles = (theme: GrafanaTheme2) => { background: theme.colors.background.primary, boxShadow: theme.shadows.z3, display: 'inline-block', - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, }), pushLeft: css({ right: '100%', diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts index ec031088f58..c9b115736da 100644 --- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts +++ b/packages/grafana-ui/src/components/Modal/getModalStyles.ts @@ -5,7 +5,7 @@ import { GrafanaTheme2 } from '@grafana/data'; import { stylesFactory } from '../../themes'; export const getModalStyles = stylesFactory((theme: GrafanaTheme2) => { - const borderRadius = theme.shape.borderRadius(1); + const borderRadius = theme.shape.radius.default; return { modal: css({ diff --git a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx index b29cd124119..c27e41cb6c9 100644 --- a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx +++ b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx @@ -178,7 +178,7 @@ export const CodeEditor = withTheme2(UnthemedCodeEditor); const getStyles = (theme: GrafanaTheme2) => { return { container: css({ - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, border: `1px solid ${theme.components.input.borderColor}`, }), }; diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx index fe185263ee0..79f795875a7 100644 --- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx @@ -333,7 +333,7 @@ const getStyles = (theme: GrafanaTheme2) => { backgroundColor: background, border: `1px solid ${borderColor}`, position: 'relative', - borderRadius: theme.shape.borderRadius(1), + borderRadius: theme.shape.radius.default, height: '100%', display: 'flex', flexDirection: 'column', diff --git a/packages/grafana-ui/src/components/PanelChrome/TitleItem.tsx b/packages/grafana-ui/src/components/PanelChrome/TitleItem.tsx index 2bd0fa99e52..b3a87fb4919 100644 --- a/packages/grafana-ui/src/components/PanelChrome/TitleItem.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/TitleItem.tsx @@ -60,7 +60,7 @@ const getStyles = (theme: GrafanaTheme2) => { label: 'panel-header-item', cursor: 'auto', border: 'none', - borderRadius: `${theme.shape.borderRadius()}`, + borderRadius: `${theme.shape.radius.default}`, padding: `${theme.spacing(0, 1)}`, height: `${theme.spacing(theme.components.panel.headerHeight)}`, display: 'flex', diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts index 152abf772da..d0a017089f9 100644 --- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts +++ b/packages/grafana-ui/src/components/Select/getSelectStyles.ts @@ -102,7 +102,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => { alignItems: 'center', lineHeight: 1, background: theme.colors.background.secondary, - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, margin: theme.spacing(0.25, 1, 0.25, 0), padding: theme.spacing(0.25, 0, 0.25, 1), color: theme.colors.text.primary, diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx index e6a7ca65cee..aa9cbd60262 100644 --- a/packages/grafana-ui/src/components/Switch/Switch.tsx +++ b/packages/grafana-ui/src/components/Switch/Switch.tsx @@ -151,7 +151,7 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme2, transparent?: boole alignItems: 'center', background: transparent ? 'transparent' : theme.components.input.background, border: `1px solid ${transparent ? 'transparent' : theme.components.input.borderColor}`, - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, '&:hover': { border: `1px solid ${transparent ? 'transparent' : theme.components.input.borderHover}`, diff --git a/packages/grafana-ui/src/components/TextArea/TextArea.tsx b/packages/grafana-ui/src/components/TextArea/TextArea.tsx index c70e709c3f4..bae097216e1 100644 --- a/packages/grafana-ui/src/components/TextArea/TextArea.tsx +++ b/packages/grafana-ui/src/components/TextArea/TextArea.tsx @@ -25,7 +25,7 @@ const getTextAreaStyle = stylesFactory((theme: GrafanaTheme2, invalid = false) = getFocusStyle(theme), css({ display: 'block', - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, padding: `${theme.spacing.gridSize / 4}px ${theme.spacing.gridSize}px`, width: '100%', borderColor: invalid ? theme.colors.error.border : theme.components.input.borderColor, diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx index f22c2b632cb..f34b96c99f9 100644 --- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx +++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx @@ -147,7 +147,7 @@ const getStyles = (theme: GrafanaTheme2) => { alignItems: 'center', height: theme.spacing(theme.components.height.md), padding: theme.spacing(0, 1), - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, lineHeight: `${theme.components.height.md * theme.spacing.gridSize - 2}px`, fontWeight: theme.typography.fontWeightMedium, border: `1px solid ${theme.colors.secondary.border}`, diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx index 0e8f0871abf..c6cecb958b5 100644 --- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx +++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx @@ -116,7 +116,7 @@ const getStyles = (theme: GrafanaTheme2, overflowButtonOrder: number, alignment: overflowItems: css({ alignItems: 'center', backgroundColor: theme.colors.background.primary, - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, boxShadow: theme.shadows.z3, display: 'flex', flexWrap: 'wrap', diff --git a/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx b/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx index b18a687db41..d41ca7fd46c 100644 --- a/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx +++ b/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx @@ -107,7 +107,7 @@ export const getVizStyles = (theme: GrafanaTheme2) => { return { viz: css({ flexGrow: 2, - borderRadius: theme.shape.borderRadius(1), + borderRadius: theme.shape.radius.default, '&:focus-visible': getFocusStyles(theme), }), }; diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index dcb5dee1935..75a8ad0d4af 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -130,9 +130,9 @@ $headings-line-height: ${theme.typography.bodySmall.lineHeight} !default; $border-width: 1px !default; -$border-radius: ${theme.shape.borderRadius(1)} !default; +$border-radius: ${theme.shape.radius.default} !default; $border-radius-lg: ${theme.shape.borderRadius(3)} !default; -$border-radius-sm: ${theme.shape.borderRadius(1)} !default; +$border-radius-sm: ${theme.shape.radius.default} !default; // Page diff --git a/public/app/core/components/AppChrome/MegaMenu/NavBarMenuItem.tsx b/public/app/core/components/AppChrome/MegaMenu/NavBarMenuItem.tsx index e7bf36f5fd8..4829d36701a 100644 --- a/public/app/core/components/AppChrome/MegaMenu/NavBarMenuItem.tsx +++ b/public/app/core/components/AppChrome/MegaMenu/NavBarMenuItem.tsx @@ -98,7 +98,7 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive'], isChild: P color: isActive ? theme.colors.text.primary : theme.colors.text.secondary, padding: theme.spacing(1, 1, 1, isChild ? 5 : 0), ...(isChild && { - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, }), width: '100%', '&:hover, &:focus-visible': { @@ -123,7 +123,7 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive'], isChild: P top: '50%', transform: 'translateY(-50%)', width: theme.spacing(0.5), - borderRadius: theme.shape.borderRadius(1), + borderRadius: theme.shape.radius.default, backgroundImage: theme.colors.gradients.brandVertical, }, }), diff --git a/public/app/core/components/AppChrome/MegaMenu/NavBarMenuSection.tsx b/public/app/core/components/AppChrome/MegaMenu/NavBarMenuSection.tsx index bcfaf54833c..978181f6b08 100644 --- a/public/app/core/components/AppChrome/MegaMenu/NavBarMenuSection.tsx +++ b/public/app/core/components/AppChrome/MegaMenu/NavBarMenuSection.tsx @@ -107,7 +107,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ top: '50%', transform: 'translateY(-50%)', width: theme.spacing(0.5), - borderRadius: theme.shape.borderRadius(1), + borderRadius: theme.shape.radius.default, backgroundImage: theme.colors.gradients.brandVertical, }, }), diff --git a/public/app/core/components/CardButton.tsx b/public/app/core/components/CardButton.tsx index d8a73799e12..eb8c8fbc222 100644 --- a/public/app/core/components/CardButton.tsx +++ b/public/app/core/components/CardButton.tsx @@ -35,7 +35,7 @@ const getStyles = (theme: GrafanaTheme2) => { justify-self: center; cursor: pointer; background: ${theme.colors.background.secondary}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; color: ${theme.colors.text.primary}; border: unset; width: 100%; diff --git a/public/app/core/components/Layers/LayerDragDropList.tsx b/public/app/core/components/Layers/LayerDragDropList.tsx index ee95549d150..9bbfd683507 100644 --- a/public/app/core/components/Layers/LayerDragDropList.tsx +++ b/public/app/core/components/Layers/LayerDragDropList.tsx @@ -132,7 +132,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ `, row: css` padding: ${theme.spacing(0.5, 1)}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; background: ${theme.colors.background.secondary}; min-height: ${theme.spacing(4)}; display: flex; diff --git a/public/app/core/components/Page/Page.tsx b/public/app/core/components/Page/Page.tsx index 88a11b3fce2..595cd466199 100644 --- a/public/app/core/components/Page/Page.tsx +++ b/public/app/core/components/Page/Page.tsx @@ -98,7 +98,7 @@ const getStyles = (theme: GrafanaTheme2) => { pageInner: css({ label: 'page-inner', padding: theme.spacing(2), - borderRadius: theme.shape.borderRadius(1), + borderRadius: theme.shape.radius.default, border: `1px solid ${theme.colors.border.weak}`, borderBottom: 'none', background: theme.colors.background.primary, diff --git a/public/app/core/components/QueryOperationRow/OperationRowHelp.tsx b/public/app/core/components/QueryOperationRow/OperationRowHelp.tsx index 9283db39cc7..600b2f5eb15 100644 --- a/public/app/core/components/QueryOperationRow/OperationRowHelp.tsx +++ b/public/app/core/components/QueryOperationRow/OperationRowHelp.tsx @@ -31,7 +31,7 @@ function markdownHelper(markdown: string) { OperationRowHelp.displayName = 'OperationRowHelp'; const getStyles = (theme: GrafanaTheme2) => { - const borderRadius = theme.shape.borderRadius(); + const borderRadius = theme.shape.radius.default; return { wrapper: css` diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx index c47df9f117d..e3cbace1aeb 100644 --- a/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx +++ b/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx @@ -79,7 +79,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ header: css` label: Header; padding: ${theme.spacing(0.5, 0.5)}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; background: ${theme.colors.background.secondary}; min-height: ${theme.spacing(4)}; display: grid; diff --git a/public/app/core/components/RolePicker/styles.ts b/public/app/core/components/RolePicker/styles.ts index f38b21356b1..51fff18701d 100644 --- a/public/app/core/components/RolePicker/styles.ts +++ b/public/app/core/components/RolePicker/styles.ts @@ -50,7 +50,7 @@ export const getStyles = (theme: GrafanaTheme2) => { container: css` padding: ${theme.spacing(1)}; border: 1px ${theme.colors.border.weak} solid; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; background-color: ${theme.colors.background.primary}; z-index: ${theme.zIndex.modal}; `, diff --git a/public/app/core/utils/ConfigProvider.tsx b/public/app/core/utils/ConfigProvider.tsx index bed3e2fedae..43851d729a7 100644 --- a/public/app/core/utils/ConfigProvider.tsx +++ b/public/app/core/utils/ConfigProvider.tsx @@ -26,7 +26,7 @@ export const ThemeProvider = ({ children, value }: { children: React.ReactNode; {children} diff --git a/public/app/features/alerting/unified/Home.tsx b/public/app/features/alerting/unified/Home.tsx index 96f0fec3c0e..0dfb5e88db4 100644 --- a/public/app/features/alerting/unified/Home.tsx +++ b/public/app/features/alerting/unified/Home.tsx @@ -249,7 +249,7 @@ const getContentBoxStyles = (theme: GrafanaTheme2) => ({ box: css` padding: ${theme.spacing(2)}; background-color: ${theme.colors.background.secondary}; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; `, }); diff --git a/public/app/features/alerting/unified/components/AlertLabel.tsx b/public/app/features/alerting/unified/components/AlertLabel.tsx index 8cfe5104449..f4d0f2664c0 100644 --- a/public/app/features/alerting/unified/components/AlertLabel.tsx +++ b/public/app/features/alerting/unified/components/AlertLabel.tsx @@ -27,7 +27,7 @@ export const AlertLabel = ({ labelKey, value, operator = '=', onRemoveLabel }: P export const getStyles = (theme: GrafanaTheme2) => ({ wrapper: css` padding: ${theme.spacing(0.5, 1)}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; border: solid 1px ${theme.colors.border.medium}; font-size: ${theme.typography.bodySmall.fontSize}; background-color: ${theme.colors.background.secondary}; diff --git a/public/app/features/alerting/unified/components/DynamicTable.tsx b/public/app/features/alerting/unified/components/DynamicTable.tsx index ba3033a73fb..d7fc5e48864 100644 --- a/public/app/features/alerting/unified/components/DynamicTable.tsx +++ b/public/app/features/alerting/unified/components/DynamicTable.tsx @@ -191,7 +191,7 @@ const getStyles = ( return (theme: GrafanaTheme2) => ({ container: css` border: 1px solid ${theme.colors.border.weak}; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; color: ${theme.colors.text.secondary}; `, row: css` diff --git a/public/app/features/alerting/unified/components/HoverCard.tsx b/public/app/features/alerting/unified/components/HoverCard.tsx index 8239bd86426..dfe470be13e 100644 --- a/public/app/features/alerting/unified/components/HoverCard.tsx +++ b/public/app/features/alerting/unified/components/HoverCard.tsx @@ -84,7 +84,7 @@ export const HoverCard = ({ const getStyles = (theme: GrafanaTheme2) => ({ popover: (offset: number) => css` - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; box-shadow: ${theme.shadows.z3}; background: ${theme.colors.background.primary}; border: 1px solid ${theme.colors.border.medium}; diff --git a/public/app/features/alerting/unified/components/StateTag.tsx b/public/app/features/alerting/unified/components/StateTag.tsx index e3e03d6ad63..c068403e7c6 100644 --- a/public/app/features/alerting/unified/components/StateTag.tsx +++ b/public/app/features/alerting/unified/components/StateTag.tsx @@ -26,7 +26,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ common: css` display: inline-block; color: white; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; font-size: ${theme.typography.size.sm}; text-transform: capitalize; line-height: 1.2; diff --git a/public/app/features/alerting/unified/components/Tokenize.tsx b/public/app/features/alerting/unified/components/Tokenize.tsx index 12ca16617ff..5eaa491fa22 100644 --- a/public/app/features/alerting/unified/components/Tokenize.tsx +++ b/public/app/features/alerting/unified/components/Tokenize.tsx @@ -135,7 +135,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ font-family: ${theme.typography.fontFamilyMonospace}; `, popover: css` - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; box-shadow: ${theme.shadows.z3}; background: ${theme.colors.background.primary}; border: 1px solid ${theme.colors.border.medium}; diff --git a/public/app/features/alerting/unified/components/Well.tsx b/public/app/features/alerting/unified/components/Well.tsx index 106889e42ca..56ae466b621 100644 --- a/public/app/features/alerting/unified/components/Well.tsx +++ b/public/app/features/alerting/unified/components/Well.tsx @@ -14,7 +14,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({ wrapper: css` background-color: ${theme.components.panel.background}; border: solid 1px ${theme.components.input.borderColor}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; padding: ${theme.spacing(0.5, 1)}; font-family: ${theme.typography.fontFamilyMonospace}; `, diff --git a/public/app/features/alerting/unified/components/contact-points/ContactPoints.v2.tsx b/public/app/features/alerting/unified/components/contact-points/ContactPoints.v2.tsx index feee11ab5dd..b5252a5e076 100644 --- a/public/app/features/alerting/unified/components/contact-points/ContactPoints.v2.tsx +++ b/public/app/features/alerting/unified/components/contact-points/ContactPoints.v2.tsx @@ -297,7 +297,7 @@ const ContactPointReceiverMetadataRow = (props: ContactPointReceiverMetadata) => const getStyles = (theme: GrafanaTheme2) => ({ contactPointWrapper: css` - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; border: solid 1px ${theme.colors.border.weak}; border-bottom: none; `, @@ -313,8 +313,8 @@ const getStyles = (theme: GrafanaTheme2) => ({ background: ${theme.colors.background.secondary}; border-bottom: solid 1px ${theme.colors.border.weak}; - border-top-left-radius: ${theme.shape.borderRadius()}; - border-top-right-radius: ${theme.shape.borderRadius()}; + border-top-left-radius: ${theme.shape.radius.default}; + border-top-right-radius: ${theme.shape.radius.default}; `, receiverDescriptionRow: css` padding: ${theme.spacing(1)} ${theme.spacing(1.5)}; @@ -322,8 +322,8 @@ const getStyles = (theme: GrafanaTheme2) => ({ metadataRow: css` padding: 0 ${theme.spacing(1.5)} ${theme.spacing(1.5)} ${theme.spacing(1.5)}; - border-bottom-left-radius: ${theme.shape.borderRadius()}; - border-bottom-right-radius: ${theme.shape.borderRadius()}; + border-bottom-left-radius: ${theme.shape.radius.default}; + border-bottom-right-radius: ${theme.shape.radius.default}; `, receiversWrapper: css``, }); diff --git a/public/app/features/alerting/unified/components/expressions/Expression.tsx b/public/app/features/alerting/unified/components/expressions/Expression.tsx index cbf10a60dbc..45d125558b0 100644 --- a/public/app/features/alerting/unified/components/expressions/Expression.tsx +++ b/public/app/features/alerting/unified/components/expressions/Expression.tsx @@ -427,7 +427,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ border: solid 1px ${theme.colors.border.medium}; flex: 1; flex-basis: 400px; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; `, stack: css` display: flex; @@ -532,7 +532,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ editable: css` padding: ${theme.spacing(0.5)} ${theme.spacing(1)}; border: solid 1px ${theme.colors.border.weak}; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; display: flex; flex-direction: row; diff --git a/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeInterval.tsx b/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeInterval.tsx index 84ccd821fc8..36dce42c543 100644 --- a/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeInterval.tsx +++ b/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeInterval.tsx @@ -236,7 +236,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ border: solid 1px ${theme.colors.border.medium}; background: none; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; color: ${theme.colors.text.secondary}; diff --git a/public/app/features/alerting/unified/components/notification-policies/Policy.tsx b/public/app/features/alerting/unified/components/notification-policies/Policy.tsx index cb361932b7d..0b5e47c369e 100644 --- a/public/app/features/alerting/unified/components/notification-policies/Policy.tsx +++ b/public/app/features/alerting/unified/components/notification-policies/Policy.tsx @@ -607,7 +607,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ font-size: ${theme.typography.bodySmall.fontSize}; border: solid 1px ${borderColor}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; `, }; }, @@ -640,7 +640,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ position: relative; background: ${theme.colors.background.secondary}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; border: solid 1px ${theme.colors.border.weak}; ${hasFocus && @@ -674,7 +674,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ text-align: center; border: solid 1px ${theme.colors.border.weak}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; padding: 0; `, diff --git a/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx b/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx index 33e70a39a75..7d967e247e3 100644 --- a/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx +++ b/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx @@ -200,7 +200,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ margin: ${theme.spacing(2, 0)}; padding: ${theme.spacing(1)}; border: solid 1px ${theme.colors.border.medium}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; max-width: ${theme.breakpoints.values.xl}${theme.breakpoints.unit}; `, topRow: css` diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/styles.ts b/public/app/features/alerting/unified/components/receivers/form/fields/styles.ts index baae5279258..da458d99999 100644 --- a/public/app/features/alerting/unified/components/receivers/form/fields/styles.ts +++ b/public/app/features/alerting/unified/components/receivers/form/fields/styles.ts @@ -11,7 +11,7 @@ export const getReceiverFormFieldStyles = (theme: GrafanaTheme2) => ({ margin: ${theme.spacing(2, 0)}; padding: ${theme.spacing(1)}; border: solid 1px ${theme.colors.border.medium}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; position: relative; `, description: css` diff --git a/public/app/features/alerting/unified/components/receivers/grafanaAppReceivers/GrafanaAppBadge.tsx b/public/app/features/alerting/unified/components/receivers/grafanaAppReceivers/GrafanaAppBadge.tsx index 39fb34cd0dc..de926c5ac26 100644 --- a/public/app/features/alerting/unified/components/receivers/grafanaAppReceivers/GrafanaAppBadge.tsx +++ b/public/app/features/alerting/unified/components/receivers/grafanaAppReceivers/GrafanaAppBadge.tsx @@ -26,7 +26,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ height: 22px; display: inline-flex; padding: 1px 4px; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; border: 1px solid rgba(245, 95, 62, 1); color: rgba(245, 95, 62, 1); font-weight: ${theme.typography.fontWeightRegular}; diff --git a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx index 038a776fb35..34e18fcfba4 100644 --- a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx @@ -365,7 +365,7 @@ const getStyles = (theme: GrafanaTheme2) => { contentOuter: css` background: ${theme.colors.background.primary}; border: 1px solid ${theme.colors.border.weak}; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; overflow: hidden; flex: 1; margin-top: ${theme.spacing(1)}; diff --git a/public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx b/public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx index 94b22e376b9..0d0414bdac3 100644 --- a/public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx @@ -84,7 +84,7 @@ function getStyles(theme: GrafanaTheme2) { height: 135px; margin-top: ${theme.spacing(2)}; border: 1px solid ${theme.colors.border.medium}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; `, }; } diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx index 20d1a5e02fb..a12ccb246a2 100644 --- a/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx @@ -278,7 +278,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ label: AlertingQueryWrapper; margin-bottom: ${theme.spacing(1)}; border: 1px solid ${theme.colors.border.weak}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; button { overflow: visible; diff --git a/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx b/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx index 12c76bb5b4d..347738dce36 100644 --- a/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx @@ -70,7 +70,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ `, instantVectorResultWrapper: css` border: solid 1px ${theme.colors.border.medium}; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; padding: 0; display: flex; diff --git a/public/app/features/alerting/unified/components/rule-viewer/RuleViewer.v1.tsx b/public/app/features/alerting/unified/components/rule-viewer/RuleViewer.v1.tsx index 12584fb07a1..5d0db496ca4 100644 --- a/public/app/features/alerting/unified/components/rule-viewer/RuleViewer.v1.tsx +++ b/public/app/features/alerting/unified/components/rule-viewer/RuleViewer.v1.tsx @@ -268,7 +268,7 @@ const getStyles = (theme: GrafanaTheme2) => { collapse: css` margin-top: ${theme.spacing(2)}; border-color: ${theme.colors.border.weak}; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; `, queriesTitle: css` padding: ${theme.spacing(2, 0.5)}; diff --git a/public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.tsx b/public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.tsx index 96d0224bb65..e3a4c435f46 100644 --- a/public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.tsx +++ b/public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.tsx @@ -52,7 +52,7 @@ const getContentStyles = (padding: number) => (theme: GrafanaTheme2) => { wrapper: css` background: ${theme.colors.background.primary}; border: 1px solid ${theme.colors.border.weak}; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; padding: ${theme.spacing(padding)}; `, }; diff --git a/public/app/features/alerting/unified/components/rules/RulesTable.tsx b/public/app/features/alerting/unified/components/rules/RulesTable.tsx index dd372f0ba86..d5a3453da7c 100644 --- a/public/app/features/alerting/unified/components/rules/RulesTable.tsx +++ b/public/app/features/alerting/unified/components/rules/RulesTable.tsx @@ -98,7 +98,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({ `, wrapper: css` width: auto; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; `, pagination: css` display: flex; diff --git a/public/app/features/alerting/unified/components/silences/SilencesTable.tsx b/public/app/features/alerting/unified/components/silences/SilencesTable.tsx index 5ea21ded2a3..8626d20184d 100644 --- a/public/app/features/alerting/unified/components/silences/SilencesTable.tsx +++ b/public/app/features/alerting/unified/components/silences/SilencesTable.tsx @@ -183,7 +183,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ callout: css` background-color: ${theme.colors.background.secondary}; border-top: 3px solid ${theme.colors.info.border}; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; height: 62px; display: flex; flex-direction: row; diff --git a/public/app/features/alerting/unified/styles/table.ts b/public/app/features/alerting/unified/styles/table.ts index cbfc63d7245..63494cb13a3 100644 --- a/public/app/features/alerting/unified/styles/table.ts +++ b/public/app/features/alerting/unified/styles/table.ts @@ -5,7 +5,7 @@ import { GrafanaTheme2 } from '@grafana/data'; export const getAlertTableStyles = (theme: GrafanaTheme2) => ({ table: css` width: 100%; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; border: solid 1px ${theme.colors.border.weak}; background-color: ${theme.colors.background.secondary}; diff --git a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/SettingsBarHeader.tsx b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/SettingsBarHeader.tsx index 29851897eee..66150a33b99 100644 --- a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/SettingsBarHeader.tsx +++ b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/SettingsBarHeader.tsx @@ -49,7 +49,7 @@ function getStyles(theme: GrafanaTheme2) { wrapper: css({ label: 'header', padding: theme.spacing(0.5, 0.5), - borderRadius: theme.shape.borderRadius(1), + borderRadius: theme.shape.radius.default, background: theme.colors.background.secondary, minHeight: theme.spacing(4), diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx index 833550b632a..71d60048059 100644 --- a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx +++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx @@ -162,7 +162,7 @@ const getStyles = (theme: GrafanaTheme2) => { padding: 0 ${theme.spacing(1, 1, 1)}; border: 1px solid ${debugBorder}; background: ${theme.isLight ? theme.v1.palette.white : theme.v1.palette.gray05}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; width: 100%; min-height: 300px; display: flex; diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationFilter.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationFilter.tsx index 1597da71db9..af96c50c98e 100644 --- a/public/app/features/dashboard/components/TransformationsEditor/TransformationFilter.tsx +++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationFilter.tsx @@ -41,7 +41,7 @@ export const TransformationFilter = ({ index, data, config, onChange }: Transfor }; const getStyles = (theme: GrafanaTheme2) => { - const borderRadius = theme.shape.borderRadius(); + const borderRadius = theme.shape.radius.default; return { wrapper: css` diff --git a/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx b/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx index 55c9105925c..cff84ade26d 100644 --- a/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx +++ b/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx @@ -28,7 +28,7 @@ export const DiffValues = ({ diff }: DiffProps) => { const getStyles = (theme: GrafanaTheme2) => css` background-color: ${theme.colors.action.hover}; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; color: ${theme.colors.text.primary}; font-size: ${theme.typography.body.fontSize}; margin: 0 ${theme.spacing(0.5)}; diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotice.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotice.tsx index e4575e0b075..9a9ff4be290 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotice.tsx +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotice.tsx @@ -50,14 +50,14 @@ const getStyles = (theme: GrafanaTheme2) => ({ notice: css({ background: 'inherit', border: 'none', - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, }), iconTooltip: css({ color: `${theme.colors.text.secondary}`, backgroundColor: 'inherit', cursor: 'auto', border: 'none', - borderRadius: `${theme.shape.borderRadius()}`, + borderRadius: `${theme.shape.radius.default}`, padding: `${theme.spacing(0, 1)}`, height: ` ${theme.spacing(theme.components.height.md)}`, display: 'flex', diff --git a/public/app/features/dashboard/dashgrid/PanelLinks.tsx b/public/app/features/dashboard/dashgrid/PanelLinks.tsx index 4dcf9c9a86d..2d7c8d9e491 100644 --- a/public/app/features/dashboard/dashgrid/PanelLinks.tsx +++ b/public/app/features/dashboard/dashgrid/PanelLinks.tsx @@ -50,7 +50,7 @@ const getStyles = (theme: GrafanaTheme2) => { height: '100%', background: 'inherit', border: 'none', - borderRadius: `${theme.shape.borderRadius()}`, + borderRadius: `${theme.shape.radius.default}`, cursor: 'context-menu', }), }; diff --git a/public/app/features/dimensions/editors/ResourcePickerPopover.tsx b/public/app/features/dimensions/editors/ResourcePickerPopover.tsx index 4eaae4a512f..50df16fdc2e 100644 --- a/public/app/features/dimensions/editors/ResourcePickerPopover.tsx +++ b/public/app/features/dimensions/editors/ResourcePickerPopover.tsx @@ -142,7 +142,7 @@ export const ResourcePickerPopover = (props: Props) => { const getStyles = (theme: GrafanaTheme2) => ({ resourcePickerPopover: css` - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; box-shadow: ${theme.shadows.z3}; background: ${theme.colors.background.primary}; border: 1px solid ${theme.colors.border.weak}; @@ -182,7 +182,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ resourcePickerPopoverTabs: css` display: flex; width: 100%; - border-radius: ${theme.shape.borderRadius()} ${theme.shape.borderRadius()} 0 0; + border-radius: ${theme.shape.radius.default} ${theme.shape.radius.default} 0 0; `, buttonRow: css({ display: 'flex', diff --git a/public/app/features/explore/FlameGraph/FlameGraphExploreContainer.tsx b/public/app/features/explore/FlameGraph/FlameGraphExploreContainer.tsx index 9e64f393c45..05a27a90501 100644 --- a/public/app/features/explore/FlameGraph/FlameGraphExploreContainer.tsx +++ b/public/app/features/explore/FlameGraph/FlameGraphExploreContainer.tsx @@ -25,6 +25,6 @@ const getStyles = (theme: GrafanaTheme2) => ({ display: flow-root; padding: 0 ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)}; border: 1px solid ${theme.components.panel.borderColor}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; `, }); diff --git a/public/app/features/explore/Logs/Logs.tsx b/public/app/features/explore/Logs/Logs.tsx index 72190ecebdb..2cf73968220 100644 --- a/public/app/features/explore/Logs/Logs.tsx +++ b/public/app/features/explore/Logs/Logs.tsx @@ -762,7 +762,7 @@ const getStyles = (theme: GrafanaTheme2, wrapLogMessage: boolean) => { flex-wrap: wrap; background-color: ${theme.colors.background.primary}; padding: ${theme.spacing(1, 2)}; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; margin: ${theme.spacing(0, 0, 1)}; border: 1px solid ${theme.colors.border.medium}; `, diff --git a/public/app/features/explore/RichHistory/RichHistoryCard.tsx b/public/app/features/explore/RichHistory/RichHistoryCard.tsx index ca78122403e..b702926d13b 100644 --- a/public/app/features/explore/RichHistory/RichHistoryCard.tsx +++ b/public/app/features/explore/RichHistory/RichHistoryCard.tsx @@ -62,7 +62,7 @@ const getStyles = (theme: GrafanaTheme2) => { border: 1px solid ${theme.colors.border.weak}; margin: ${theme.spacing(1)} 0; background-color: ${cardColor}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; .starred { color: ${theme.v1.palette.orange}; } diff --git a/public/app/features/expressions/components/Condition.tsx b/public/app/features/expressions/components/Condition.tsx index 7ca15d80584..8aa8457b811 100644 --- a/public/app/features/expressions/components/Condition.tsx +++ b/public/app/features/expressions/components/Condition.tsx @@ -148,7 +148,7 @@ const getStyles = (theme: GrafanaTheme2) => { css` display: flex; align-items: center; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; font-weight: ${theme.typography.fontWeightMedium}; border: 1px solid ${theme.colors.border.weak}; white-space: nowrap; diff --git a/public/app/features/expressions/components/Threshold.tsx b/public/app/features/expressions/components/Threshold.tsx index 1c2c81dd6ad..11bc65da84b 100644 --- a/public/app/features/expressions/components/Threshold.tsx +++ b/public/app/features/expressions/components/Threshold.tsx @@ -142,7 +142,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ display: flex; align-items: center; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; font-weight: ${theme.typography.fontWeightBold}; border: 1px solid ${theme.colors.border.medium}; white-space: nowrap; diff --git a/public/app/features/library-panels/styles.ts b/public/app/features/library-panels/styles.ts index bfe0c543695..c836ea6a06a 100644 --- a/public/app/features/library-panels/styles.ts +++ b/public/app/features/library-panels/styles.ts @@ -9,7 +9,7 @@ export function getModalStyles(theme: GrafanaTheme2) { overflow-y: auto; margin-top: 11px; margin-bottom: 28px; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; border: 1px solid ${theme.colors.action.hover}; background: ${theme.colors.background.primary}; color: ${theme.colors.text.secondary}; diff --git a/public/app/features/logs/components/LogLabels.tsx b/public/app/features/logs/components/LogLabels.tsx index d80ae9e41cb..3f76fda46dd 100644 --- a/public/app/features/logs/components/LogLabels.tsx +++ b/public/app/features/logs/components/LogLabels.tsx @@ -55,7 +55,7 @@ const getStyles = (theme: GrafanaTheme2) => { display: flex; padding: ${theme.spacing(0, 0.25)}; background-color: ${theme.colors.background.secondary}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; margin: ${theme.spacing(0.125, 0.5, 0, 0)}; text-overflow: ellipsis; white-space: nowrap; diff --git a/public/app/features/notifications/StoredNotifications.tsx b/public/app/features/notifications/StoredNotifications.tsx index acaa25910c5..37522586636 100644 --- a/public/app/features/notifications/StoredNotifications.tsx +++ b/public/app/features/notifications/StoredNotifications.tsx @@ -125,7 +125,7 @@ function getStyles(theme: GrafanaTheme2) { top: 0, background: theme.colors.gradients.brandVertical, width: theme.spacing(0.5), - borderRadius: theme.shape.borderRadius(1), + borderRadius: theme.shape.radius.default, }, }), noNotifsWrapper: css({ diff --git a/public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx b/public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx index 308af9b6850..0065c697210 100644 --- a/public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx +++ b/public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx @@ -84,7 +84,7 @@ const getStyles = (theme: GrafanaTheme2) => { flex-shrink: 0; cursor: pointer; background: ${theme.colors.background.secondary}; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; box-shadow: ${theme.shadows.z1}; border: 1px solid ${theme.colors.background.secondary}; align-items: center; diff --git a/public/app/features/panel/components/VizTypePicker/VisualizationSuggestionCard.tsx b/public/app/features/panel/components/VizTypePicker/VisualizationSuggestionCard.tsx index a094f32067c..b5d5880fcb1 100644 --- a/public/app/features/panel/components/VizTypePicker/VisualizationSuggestionCard.tsx +++ b/public/app/features/panel/components/VizTypePicker/VisualizationSuggestionCard.tsx @@ -86,7 +86,7 @@ const getStyles = (theme: GrafanaTheme2) => { vizBox: css` position: relative; background: none; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; cursor: pointer; border: 1px solid ${theme.colors.border.medium}; diff --git a/public/app/features/plugins/admin/components/PluginListItem.tsx b/public/app/features/plugins/admin/components/PluginListItem.tsx index 012f9b0803a..31de4c21133 100644 --- a/public/app/features/plugins/admin/components/PluginListItem.tsx +++ b/public/app/features/plugins/admin/components/PluginListItem.tsx @@ -46,7 +46,7 @@ export const getStyles = (theme: GrafanaTheme2) => { gap: ${theme.spacing(2)}; grid-auto-flow: row; background: ${theme.colors.background.secondary}; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; padding: ${theme.spacing(3)}; transition: ${theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], { duration: theme.transitions.duration.short, diff --git a/public/app/features/variables/pickers/shared/VariableLink.tsx b/public/app/features/variables/pickers/shared/VariableLink.tsx index 5c2d4fb233c..ffedacd78bb 100644 --- a/public/app/features/variables/pickers/shared/VariableLink.tsx +++ b/public/app/features/variables/pickers/shared/VariableLink.tsx @@ -104,7 +104,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ padding: 0 ${theme.spacing(1)}; background-color: ${theme.components.input.background}; border: 1px solid ${theme.components.input.borderColor}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; display: flex; align-items: center; color: ${theme.colors.text}; diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorRow.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorRow.tsx index 9a5730602e0..5fe10a24999 100644 --- a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorRow.tsx +++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorRow.tsx @@ -28,7 +28,7 @@ const getStyles = (theme: GrafanaTheme2) => { root: css({ padding: theme.spacing(1), backgroundColor: theme.colors.background.secondary, - borderRadius: theme.shape.borderRadius(1), + borderRadius: theme.shape.radius.default, }), }; }; diff --git a/public/app/plugins/datasource/grafana/components/TimePickerInput.tsx b/public/app/plugins/datasource/grafana/components/TimePickerInput.tsx index 00d9fe07671..6c735c45604 100644 --- a/public/app/plugins/datasource/grafana/components/TimePickerInput.tsx +++ b/public/app/plugins/datasource/grafana/components/TimePickerInput.tsx @@ -96,7 +96,7 @@ const getStyles = (theme: GrafanaTheme2) => { const bgColor = theme.components.input.background; const menuShadowColor = theme.v1.palette.black; const optionBgHover = theme.colors.background.secondary; - const borderRadius = theme.shape.borderRadius(1); + const borderRadius = theme.shape.radius.default; const borderColor = theme.components.input.borderColor; return { diff --git a/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx b/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx index cf687ecf46e..6132b92a604 100644 --- a/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx +++ b/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx @@ -84,7 +84,7 @@ export function GraphiteFunctionEditor({ func }: FunctionEditorProps) { const getStyles = (theme: GrafanaTheme2) => ({ container: css({ backgroundColor: theme.colors.background.secondary, - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, marginRight: theme.spacing(0.5), padding: `0 ${theme.spacing(1)}`, height: `${theme.v1.spacing.formInputHeight}px`, diff --git a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.tsx b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.tsx index caf85fde0c5..f389d4c24a1 100644 --- a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.tsx +++ b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.tsx @@ -74,7 +74,7 @@ function ensureLogQL(monaco: Monaco) { const getStyles = (theme: GrafanaTheme2, placeholder: string) => { return { container: css` - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; border: 1px solid ${theme.components.input.borderColor}; width: 100%; .monaco-editor .suggest-widget { diff --git a/public/app/plugins/datasource/parca/QueryEditor/EditorRow.tsx b/public/app/plugins/datasource/parca/QueryEditor/EditorRow.tsx index 9a5730602e0..5fe10a24999 100644 --- a/public/app/plugins/datasource/parca/QueryEditor/EditorRow.tsx +++ b/public/app/plugins/datasource/parca/QueryEditor/EditorRow.tsx @@ -28,7 +28,7 @@ const getStyles = (theme: GrafanaTheme2) => { root: css({ padding: theme.spacing(1), backgroundColor: theme.colors.background.secondary, - borderRadius: theme.shape.borderRadius(1), + borderRadius: theme.shape.radius.default, }), }; }; diff --git a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx index 6527f583de2..364842537ec 100644 --- a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx +++ b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx @@ -75,7 +75,7 @@ function ensurePromQL(monaco: Monaco) { const getStyles = (theme: GrafanaTheme2, placeholder: string) => { return { container: css` - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; border: 1px solid ${theme.components.input.borderColor}; `, placeholder: css` diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/metrics-modal/ResultsTable.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/metrics-modal/ResultsTable.tsx index a66ef050c42..a474098bbc0 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/components/metrics-modal/ResultsTable.tsx +++ b/public/app/plugins/datasource/prometheus/querybuilder/components/metrics-modal/ResultsTable.tsx @@ -188,7 +188,7 @@ const getStyles = (theme: GrafanaTheme2, disableTextWrap: boolean) => { return { table: css` ${disableTextWrap ? '' : 'table-layout: fixed;'} - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; width: 100%; white-space: ${disableTextWrap ? 'nowrap' : 'normal'}; td { diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx index bd552920d0c..12f59778029 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx +++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx @@ -255,7 +255,7 @@ const getStyles = (theme: GrafanaTheme2, isConflicting: boolean) => { background: theme.colors.background.primary, border: `1px solid ${theme.colors.border.medium}`, cursor: 'grab', - borderRadius: theme.shape.borderRadius(1), + borderRadius: theme.shape.radius.default, position: 'relative', transition: 'all 0.5s ease-in 0s', height: isConflicting ? 'auto' : '100%', diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationExplainedBox.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationExplainedBox.tsx index 4812b302ad9..f38597c3c10 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationExplainedBox.tsx +++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationExplainedBox.tsx @@ -37,7 +37,7 @@ const getStyles = (theme: GrafanaTheme2) => { box: css({ background: theme.colors.background.secondary, padding: theme.spacing(1), - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, position: 'relative', }), boxInner: css({ diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationInfoButton.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationInfoButton.tsx index 20e21009d08..4e5bc80065a 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationInfoButton.tsx +++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationInfoButton.tsx @@ -71,7 +71,7 @@ const getStyles = (theme: GrafanaTheme2) => { boxShadow: theme.shadows.z3, maxWidth: '600px', padding: theme.spacing(1), - borderRadius: theme.shape.borderRadius(), + borderRadius: theme.shape.radius.default, zIndex: theme.zIndex.tooltip, }), docBoxHeader: css({ diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationsEditorRow.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationsEditorRow.tsx index 6800e86f726..5493968f3ed 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationsEditorRow.tsx +++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationsEditorRow.tsx @@ -24,7 +24,7 @@ const getStyles = (theme: GrafanaTheme2) => { root: css({ padding: theme.spacing(1, 1, 0, 1), backgroundColor: theme.colors.background.secondary, - borderRadius: theme.shape.borderRadius(1), + borderRadius: theme.shape.radius.default, }), }; }; diff --git a/public/app/plugins/datasource/tempo/NativeSearch/TagsField/TagsField.tsx b/public/app/plugins/datasource/tempo/NativeSearch/TagsField/TagsField.tsx index 2be0bcc1b5c..236b99eee0c 100644 --- a/public/app/plugins/datasource/tempo/NativeSearch/TagsField/TagsField.tsx +++ b/public/app/plugins/datasource/tempo/NativeSearch/TagsField/TagsField.tsx @@ -167,7 +167,7 @@ interface EditorStyles { const getStyles = (theme: GrafanaTheme2, placeholder: string): EditorStyles => { return { queryField: css` - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; border: 1px solid ${theme.components.input.borderColor}; flex: 1; `, diff --git a/public/app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx b/public/app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx index b2126bbe2b7..65eaef3992c 100644 --- a/public/app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx +++ b/public/app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx @@ -207,7 +207,7 @@ interface EditorStyles { const getStyles = (theme: GrafanaTheme2, placeholder: string): EditorStyles => { return { queryField: css` - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; border: 1px solid ${theme.components.input.borderColor}; flex: 1; `, diff --git a/public/app/plugins/panel/alertlist/AlertList.tsx b/public/app/plugins/panel/alertlist/AlertList.tsx index 59094ee0fd1..f0d8c893103 100644 --- a/public/app/plugins/panel/alertlist/AlertList.tsx +++ b/public/app/plugins/panel/alertlist/AlertList.tsx @@ -234,7 +234,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ height: 100%; background: ${theme.colors.background.secondary}; padding: ${theme.spacing(0.5)} ${theme.spacing(1)}; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; margin-bottom: ${theme.spacing(0.5)}; `, alertRuleItemIcon: css` diff --git a/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx b/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx index a29404959f7..544834f3422 100644 --- a/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx +++ b/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx @@ -374,7 +374,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({ height: 100%; background: ${theme.colors.background.secondary}; padding: ${theme.spacing(0.5)} ${theme.spacing(1)}; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; margin-bottom: ${theme.spacing(0.5)}; gap: ${theme.spacing(2)}; diff --git a/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx b/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx index fee5fc8d59c..6868e620a42 100644 --- a/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx +++ b/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx @@ -147,7 +147,7 @@ const getStateTagStyles = (theme: GrafanaTheme2) => ({ display: inline-block; color: white; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; font-size: ${theme.typography.bodySmall.fontSize}; text-transform: capitalize; line-height: 1.2; diff --git a/public/app/plugins/panel/canvas/globalStyles.ts b/public/app/plugins/panel/canvas/globalStyles.ts index 480e25e809d..6357ba6e897 100644 --- a/public/app/plugins/panel/canvas/globalStyles.ts +++ b/public/app/plugins/panel/canvas/globalStyles.ts @@ -89,7 +89,7 @@ export function getGlobalStyles(theme: GrafanaTheme2) { display: flex; border: 1px solid ${theme.components.input.borderColor}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; background: ${theme.colors.background.secondary}; min-height: ${theme.spacing.gridSize * 4}px; diff --git a/public/app/plugins/panel/dashlist/DashList.tsx b/public/app/plugins/panel/dashlist/DashList.tsx index ae64b3339ea..75912315190 100644 --- a/public/app/plugins/panel/dashlist/DashList.tsx +++ b/public/app/plugins/panel/dashlist/DashList.tsx @@ -266,7 +266,7 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => { appearance: 'none', '&:focus-visible + *': { ...getFocusStyles(theme), - borderRadius: theme.shape.borderRadius(1), + borderRadius: theme.shape.radius.default, }, }), icon: css({ diff --git a/public/app/plugins/panel/nodeGraph/NodeGraph.tsx b/public/app/plugins/panel/nodeGraph/NodeGraph.tsx index d8ec693359b..b029c242af3 100644 --- a/public/app/plugins/panel/nodeGraph/NodeGraph.tsx +++ b/public/app/plugins/panel/nodeGraph/NodeGraph.tsx @@ -86,7 +86,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ padding: 5px 8px; font-size: 10px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; align-items: center; position: absolute; top: 0; diff --git a/public/app/plugins/panel/text/TextPanelEditor.tsx b/public/app/plugins/panel/text/TextPanelEditor.tsx index d366458b05e..5c8f3718dd9 100644 --- a/public/app/plugins/panel/text/TextPanelEditor.tsx +++ b/public/app/plugins/panel/text/TextPanelEditor.tsx @@ -53,7 +53,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ editorBox: css` label: editorBox; border: 1px solid ${theme.colors.border.medium}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; margin: ${theme.spacing(0.5)} 0; width: 100%; `, diff --git a/public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx b/public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx index a6446933858..458c9bde384 100644 --- a/public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx +++ b/public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx @@ -98,12 +98,12 @@ const getStyles = (theme: GrafanaTheme2, step: Threshold, outOfBounds: OutOfBoun margin-top: -9px; border-color: ${mainColor}; cursor: ${disabled ? 'initial' : 'grab'}; - border-top-right-radius: ${theme.shape.borderRadius(1)}; - border-bottom-right-radius: ${theme.shape.borderRadius(1)}; + border-top-right-radius: ${theme.shape.radius.default}; + border-bottom-right-radius: ${theme.shape.radius.default}; ${isOutOfBounds && css` margin-top: 0; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; `} background: ${mainColor}; font-size: ${theme.typography.bodySmall.fontSize}; diff --git a/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationEditorForm.tsx b/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationEditorForm.tsx index b829c1ebc85..26e041a1789 100644 --- a/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationEditorForm.tsx +++ b/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationEditorForm.tsx @@ -159,7 +159,7 @@ const getStyles = (theme: GrafanaTheme2) => { box-shadow: ${theme.shadows.z3}; z-index: ${theme.zIndex.dropdown}; border: 1px solid ${theme.colors.border.weak}; - border-radius: ${theme.shape.borderRadius()}; + border-radius: ${theme.shape.radius.default}; width: 460px; `, editorForm: css` diff --git a/public/app/plugins/panel/xychart/AutoEditor.tsx b/public/app/plugins/panel/xychart/AutoEditor.tsx index b4867f79afe..f8eb9aad8ec 100644 --- a/public/app/plugins/panel/xychart/AutoEditor.tsx +++ b/public/app/plugins/panel/xychart/AutoEditor.tsx @@ -151,7 +151,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ row: css` padding: ${theme.spacing(0.5, 1)}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; background: ${theme.colors.background.secondary}; min-height: ${theme.spacing(4)}; display: flex; diff --git a/public/app/plugins/panel/xychart/ManualEditor.tsx b/public/app/plugins/panel/xychart/ManualEditor.tsx index c4f70e63211..a63ee4470fc 100644 --- a/public/app/plugins/panel/xychart/ManualEditor.tsx +++ b/public/app/plugins/panel/xychart/ManualEditor.tsx @@ -134,7 +134,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ `, row: css` padding: ${theme.spacing(0.5, 1)}; - border-radius: ${theme.shape.borderRadius(1)}; + border-radius: ${theme.shape.radius.default}; background: ${theme.colors.background.secondary}; min-height: ${theme.spacing(4)}; display: flex;