diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx index 309b1f852a3..679346817a5 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx @@ -70,7 +70,7 @@ const getStyles = ( height: swatchSize, background: `${color}`, border, - borderRadius: '50%', + borderRadius: theme.shape.radius.circle, outlineOffset: '1px', outline: isFocusVisible ? `2px solid ${theme.colors.primary.main}` : 'none', boxShadow: isSelected diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx index 86ef8f53cf3..78761cc4e77 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx @@ -66,7 +66,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ width: 6px; height: 6px; background-color: ${theme.colors.text.disabled}; - border-radius: 50%; + border-radius: ${theme.shape.radius.circle}; display: inline-block; position: absolute; top: 4px; diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx index a93a6b89eb4..dc27a098336 100644 --- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx +++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx @@ -234,7 +234,7 @@ const getStyles = (theme: GrafanaTheme2) => { `, highlight: css` background-color: ${theme.colors.success.main}; - border-radius: 50%; + border-radius: ${theme.shape.radius.circle}; width: 6px; height: 6px; position: absolute; diff --git a/public/app/core/components/AppChrome/MegaMenu/NavBarItemIcon.tsx b/public/app/core/components/AppChrome/MegaMenu/NavBarItemIcon.tsx index e180e74d3aa..b259eb97660 100644 --- a/public/app/core/components/AppChrome/MegaMenu/NavBarItemIcon.tsx +++ b/public/app/core/components/AppChrome/MegaMenu/NavBarItemIcon.tsx @@ -32,7 +32,7 @@ function getStyles(theme: GrafanaTheme2) { width: theme.spacing(3), }), round: css({ - borderRadius: '50%', + borderRadius: theme.shape.radius.circle, }), }; } diff --git a/public/app/core/components/AppChrome/MegaMenu/NavFeatureHighlight.tsx b/public/app/core/components/AppChrome/MegaMenu/NavFeatureHighlight.tsx index c51e322ace1..9992d9fe2c8 100644 --- a/public/app/core/components/AppChrome/MegaMenu/NavFeatureHighlight.tsx +++ b/public/app/core/components/AppChrome/MegaMenu/NavFeatureHighlight.tsx @@ -22,7 +22,7 @@ const getStyles = (theme: GrafanaTheme2) => { return { highlight: css` background-color: ${theme.colors.success.main}; - border-radius: 50%; + border-radius: ${theme.shape.radius.circle}; width: 6px; height: 6px; display: inline-block; diff --git a/public/app/core/components/AppChrome/TopBar/TopSearchBar.tsx b/public/app/core/components/AppChrome/TopBar/TopSearchBar.tsx index ae1529db3b3..727f0cec7ef 100644 --- a/public/app/core/components/AppChrome/TopBar/TopSearchBar.tsx +++ b/public/app/core/components/AppChrome/TopBar/TopSearchBar.tsx @@ -99,7 +99,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ profileButton: css({ padding: theme.spacing(0, 0.25), img: { - borderRadius: '50%', + borderRadius: theme.shape.radius.circle, height: '24px', marginRight: 0, width: '24px', diff --git a/public/app/features/admin/LicenseChrome.tsx b/public/app/features/admin/LicenseChrome.tsx index e46d77dce48..51ddfc7c337 100644 --- a/public/app/features/admin/LicenseChrome.tsx +++ b/public/app/features/admin/LicenseChrome.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/css'; import React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '@grafana/ui'; +import { useStyles2, useTheme2 } from '@grafana/ui'; const title = { fontWeight: 500, fontSize: '26px', lineHeight: '123%' }; @@ -77,6 +77,7 @@ interface CircleProps { } export const Circle = ({ size, style, children }: React.PropsWithChildren) => { + const theme = useTheme2(); return (
diff --git a/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx b/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx index 3ff637806c3..2a5edf9cf95 100644 --- a/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx @@ -57,7 +57,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ width: ${theme.spacing(4)}; height: ${theme.spacing(4)}; line-height: ${theme.spacing(4)}; - border-radius: 100%; + border-radius: ${theme.shape.radius.circle}; text-align: center; color: ${theme.colors.text.maxContrast}; background-color: ${theme.colors.background.canvas}; diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemOverrides.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemOverrides.tsx index 769029e32f0..1e3fff28ca8 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemOverrides.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemOverrides.tsx @@ -28,7 +28,7 @@ const getStyles = (theme: GrafanaTheme2) => { const common: CSSObject = { width: 8, height: 8, - borderRadius: '50%', + borderRadius: theme.shape.radius.circle, marginLeft: theme.spacing(1), position: 'relative', top: '-1px', diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx index 0151a2ec4a4..ff5cfded663 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx @@ -40,7 +40,7 @@ function getStyles(theme: GrafanaTheme2) { height: 10px; background: ${theme.colors.text.disabled}; box-shadow: 0 0 2px ${theme.colors.text.disabled}; - border-radius: 50%; + border-radius: ${theme.shape.radius.circle}; position: relative; top: 6px; right: 1px; diff --git a/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx b/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx index 3560ce189c3..ba53f14fcbb 100644 --- a/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx +++ b/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx @@ -52,7 +52,7 @@ const getStyles = (theme: GrafanaTheme2) => { font-size: ${theme.typography.bodySmall.fontSize}; `, userAvatar: css` - border-radius: 50%; + border-radius: ${theme.shape.radius.circle}; box-sizing: content-box; width: 22px; height: 22px; diff --git a/public/app/features/logs/components/LogDetailsRow.tsx b/public/app/features/logs/components/LogDetailsRow.tsx index 38ee2727e63..c560d44a068 100644 --- a/public/app/features/logs/components/LogDetailsRow.tsx +++ b/public/app/features/logs/components/LogDetailsRow.tsx @@ -46,7 +46,7 @@ const getStyles = memoizeOne((theme: GrafanaTheme2) => { color: ${theme.colors.text.secondary}; padding: 0; justify-content: center; - border-radius: 50%; + border-radius: ${theme.shape.radius.circle}; height: ${theme.spacing(theme.components.height.sm)}; width: ${theme.spacing(theme.components.height.sm)}; svg { diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationExplainedBox.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationExplainedBox.tsx index 302b4b7d744..4812b302ad9 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationExplainedBox.tsx +++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationExplainedBox.tsx @@ -48,7 +48,7 @@ const getStyles = (theme: GrafanaTheme2) => { background: theme.colors.secondary.main, width: '20px', height: '20px', - borderRadius: '50%', + borderRadius: theme.shape.radius.circle, display: 'flex', alignItems: 'center', justifyContent: 'center', diff --git a/public/app/plugins/panel/annolist/AnnotationListItem.tsx b/public/app/plugins/panel/annolist/AnnotationListItem.tsx index 1578f9d057f..0e30c62fc35 100644 --- a/public/app/plugins/panel/annolist/AnnotationListItem.tsx +++ b/public/app/plugins/panel/annolist/AnnotationListItem.tsx @@ -148,7 +148,7 @@ function getStyles(theme: GrafanaTheme2) { margin: 0, padding: theme.spacing(0.5), img: { - borderRadius: '50%', + borderRadius: theme.shape.radius.circle, width: theme.spacing(2), height: theme.spacing(2), }, diff --git a/public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx b/public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx index d618ae1fcbc..944be9d2ffd 100644 --- a/public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx +++ b/public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx @@ -142,7 +142,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ pointer-events: auto; width: 16px; height: 16px; - border-radius: 50%; + border-radius: ${theme.shape.radius.circle}; display: none; z-index: 110; `, diff --git a/public/app/plugins/panel/geomap/components/MarkersLegend.tsx b/public/app/plugins/panel/geomap/components/MarkersLegend.tsx index cc036bf8e72..3abe7e0a6dd 100644 --- a/public/app/plugins/panel/geomap/components/MarkersLegend.tsx +++ b/public/app/plugins/panel/geomap/components/MarkersLegend.tsx @@ -159,7 +159,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ float: left; margin-right: 8px; opacity: 0.7; - border-radius: 50%; + border-radius: ${theme.shape.radius.circle}; } `, legendItem: css` diff --git a/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationTooltip.tsx b/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationTooltip.tsx index 4654dabb986..fca158f2e4a 100644 --- a/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationTooltip.tsx +++ b/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationTooltip.tsx @@ -124,7 +124,7 @@ const getStyles = (theme: GrafanaTheme2) => { } `, avatar: css` - border-radius: 50%; + border-radius: ${theme.shape.radius.circle}; width: 16px; height: 16px; margin-right: ${theme.spacing(1)};