diff --git a/packages/grafana-data/src/themes/createShape.ts b/packages/grafana-data/src/themes/createShape.ts index 8e6497639a7..42291fb78d0 100644 --- a/packages/grafana-data/src/themes/createShape.ts +++ b/packages/grafana-data/src/themes/createShape.ts @@ -7,8 +7,28 @@ export interface ThemeShape { radius: Radii; } -interface Radii { +export interface Radii { + /** + * Use for most things (inputs, buttons, cards, panels, etc) + * Same as `md` + */ default: string; + /** + * Use for most things (inputs, buttons, cards, panels, etc) + * Same as `default` + */ + md: string; + /** + * Use for smaller things like chips, tags and badges + */ + sm: string; + /** + * Use for large things, like modals + */ + lg: string; + /** + * Used to create maximum half circle sides (e.g. for pills) + */ pill: string; circle: string; } @@ -19,10 +39,13 @@ export interface ThemeShapeInput { } export function createShape(options: ThemeShapeInput): ThemeShape { - const baseBorderRadius = options.borderRadius ?? 2; + const baseBorderRadius = options.borderRadius ?? 6; const radius = { default: `${baseBorderRadius}px`, + md: `${baseBorderRadius}px`, + sm: `${Math.ceil(baseBorderRadius * (2 / 3))}px`, // for default base becomes 4 + lg: `${Math.ceil(baseBorderRadius * (5 / 3))}px`, // for default base becomes 10 pill: '9999px', circle: '100%', }; diff --git a/packages/grafana-data/src/themes/themeDefinitions/aubergine.ts b/packages/grafana-data/src/themes/themeDefinitions/aubergine.ts index aaaa79f51a1..967621ebc60 100644 --- a/packages/grafana-data/src/themes/themeDefinitions/aubergine.ts +++ b/packages/grafana-data/src/themes/themeDefinitions/aubergine.ts @@ -48,9 +48,6 @@ const aubergineTheme: NewThemeOptions = { hoverFactor: 0.07, tonalOffset: 0.15, }, - shape: { - borderRadius: 6, - }, }; export default aubergineTheme; diff --git a/packages/grafana-data/src/themes/themeDefinitions/desertbloom.ts b/packages/grafana-data/src/themes/themeDefinitions/desertbloom.ts index 8c08ca75da1..8a86b73a0f7 100644 --- a/packages/grafana-data/src/themes/themeDefinitions/desertbloom.ts +++ b/packages/grafana-data/src/themes/themeDefinitions/desertbloom.ts @@ -70,9 +70,6 @@ const desertBloomTheme: NewThemeOptions = { hoverFactor: 0.03, tonalOffset: 0.15, }, - shape: { - borderRadius: 6, - }, }; export default desertBloomTheme; diff --git a/packages/grafana-data/src/themes/themeDefinitions/gildedgrove.ts b/packages/grafana-data/src/themes/themeDefinitions/gildedgrove.ts index 6492aaa906f..bfa3e121329 100644 --- a/packages/grafana-data/src/themes/themeDefinitions/gildedgrove.ts +++ b/packages/grafana-data/src/themes/themeDefinitions/gildedgrove.ts @@ -60,9 +60,6 @@ const gildedGroveTheme: NewThemeOptions = { hoverFactor: 0.03, tonalOffset: 0.15, }, - shape: { - borderRadius: 5, - }, }; export default gildedGroveTheme; diff --git a/packages/grafana-data/src/themes/themeDefinitions/gloom.ts b/packages/grafana-data/src/themes/themeDefinitions/gloom.ts index 8eda705ced8..49c105626fb 100644 --- a/packages/grafana-data/src/themes/themeDefinitions/gloom.ts +++ b/packages/grafana-data/src/themes/themeDefinitions/gloom.ts @@ -75,9 +75,6 @@ const gloomTheme: NewThemeOptions = { hoverFactor: 0.03, tonalOffset: 0.15, }, - shape: { - borderRadius: 5, - }, }; export default gloomTheme; diff --git a/packages/grafana-data/src/themes/themeDefinitions/mars.ts b/packages/grafana-data/src/themes/themeDefinitions/mars.ts index 2d3680aacfe..f1db51e23b2 100644 --- a/packages/grafana-data/src/themes/themeDefinitions/mars.ts +++ b/packages/grafana-data/src/themes/themeDefinitions/mars.ts @@ -48,9 +48,6 @@ const marsTheme: NewThemeOptions = { hoverFactor: 0.05, tonalOffset: 0.2, }, - shape: { - borderRadius: 4, - }, }; export default marsTheme; diff --git a/packages/grafana-data/src/themes/themeDefinitions/sapphiredusk.ts b/packages/grafana-data/src/themes/themeDefinitions/sapphiredusk.ts index 596ef029490..c777c61b055 100644 --- a/packages/grafana-data/src/themes/themeDefinitions/sapphiredusk.ts +++ b/packages/grafana-data/src/themes/themeDefinitions/sapphiredusk.ts @@ -74,9 +74,6 @@ const sapphireDuskTheme: NewThemeOptions = { hoverFactor: 0.03, tonalOffset: 0.15, }, - shape: { - borderRadius: 5, - }, }; export default sapphireDuskTheme; diff --git a/packages/grafana-data/src/themes/themeDefinitions/synthwave.ts b/packages/grafana-data/src/themes/themeDefinitions/synthwave.ts index 9e7e227621d..5fc53cda0bb 100644 --- a/packages/grafana-data/src/themes/themeDefinitions/synthwave.ts +++ b/packages/grafana-data/src/themes/themeDefinitions/synthwave.ts @@ -48,9 +48,6 @@ const synthwaveTheme: NewThemeOptions = { hoverFactor: 0.03, tonalOffset: 0.15, }, - shape: { - borderRadius: 6, - }, }; export default synthwaveTheme; diff --git a/packages/grafana-data/src/themes/themeDefinitions/tron.ts b/packages/grafana-data/src/themes/themeDefinitions/tron.ts index c95c9dea4fa..a9f0b8c3ed4 100644 --- a/packages/grafana-data/src/themes/themeDefinitions/tron.ts +++ b/packages/grafana-data/src/themes/themeDefinitions/tron.ts @@ -48,9 +48,6 @@ const tronTheme: NewThemeOptions = { hoverFactor: 0.05, tonalOffset: 0.2, }, - shape: { - borderRadius: 6, - }, }; export default tronTheme; diff --git a/packages/grafana-data/src/themes/themeDefinitions/victorian.ts b/packages/grafana-data/src/themes/themeDefinitions/victorian.ts index 504b06f80ad..32ddbcb244e 100644 --- a/packages/grafana-data/src/themes/themeDefinitions/victorian.ts +++ b/packages/grafana-data/src/themes/themeDefinitions/victorian.ts @@ -48,9 +48,6 @@ const victorianTheme: NewThemeOptions = { hoverFactor: 0.07, tonalOffset: 0.15, }, - shape: { - borderRadius: 6, - }, typography: { fontFamily: '"Georgia", "Times New Roman", serif', fontFamilyMonospace: "'Courier New', monospace", diff --git a/packages/grafana-data/src/themes/themeDefinitions/zen.ts b/packages/grafana-data/src/themes/themeDefinitions/zen.ts index 8fd12542c21..f2735f41b74 100644 --- a/packages/grafana-data/src/themes/themeDefinitions/zen.ts +++ b/packages/grafana-data/src/themes/themeDefinitions/zen.ts @@ -48,9 +48,6 @@ const zenTheme: NewThemeOptions = { hoverFactor: 0.03, tonalOffset: 0.2, }, - shape: { - borderRadius: 8, - }, }; export default zenTheme; diff --git a/packages/grafana-ui/src/components/Badge/Badge.tsx b/packages/grafana-ui/src/components/Badge/Badge.tsx index f28f4d35a1d..201957ab534 100644 --- a/packages/grafana-ui/src/components/Badge/Badge.tsx +++ b/packages/grafana-ui/src/components/Badge/Badge.tsx @@ -81,7 +81,7 @@ const getStyles = (theme: GrafanaTheme2, color: BadgeColor) => { wrapper: css({ display: 'inline-flex', padding: '1px 4px', - borderRadius: theme.shape.radius.default, + borderRadius: theme.shape.radius.sm, background: bgColor, border: `1px solid ${borderColor}`, color: textColor, diff --git a/packages/grafana-ui/src/components/Combobox/ValuePill.tsx b/packages/grafana-ui/src/components/Combobox/ValuePill.tsx index e597c329103..f911dff1e28 100644 --- a/packages/grafana-ui/src/components/Combobox/ValuePill.tsx +++ b/packages/grafana-ui/src/components/Combobox/ValuePill.tsx @@ -43,7 +43,7 @@ ValuePill.displayName = 'ValuePill'; const getValuePillStyles = (theme: GrafanaTheme2, disabled?: boolean) => ({ wrapper: css({ display: 'inline-flex', - borderRadius: theme.shape.radius.default, + borderRadius: theme.shape.radius.sm, color: theme.colors.text.primary, background: theme.colors.background.secondary, padding: theme.spacing(0.25), @@ -67,7 +67,7 @@ const getValuePillStyles = (theme: GrafanaTheme2, disabled?: boolean) => ({ separator: css({ background: theme.colors.border.weak, - width: '2px', + width: '1px', height: '100%', marginRight: theme.spacing(0.5), }), diff --git a/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap b/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap index 578c6f96821..bfdedc58db4 100644 --- a/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap +++ b/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap @@ -3,7 +3,7 @@ exports[`CustomScrollbar renders correctly 1`] = `
{ display: 'inline-block', width: theme.spacing(checkboxSize), height: theme.spacing(checkboxSize), - borderRadius: theme.shape.radius.default, + borderRadius: theme.shape.radius.sm, background: theme.components.input.background, border: `1px solid ${getBorderColor(theme.components.input.borderColor)}`, diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts index 9847f8df418..d6ef33245b6 100644 --- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts +++ b/packages/grafana-ui/src/components/Modal/getModalStyles.ts @@ -3,15 +3,13 @@ import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; export const getModalStyles = (theme: GrafanaTheme2) => { - const borderRadius = theme.shape.radius.default; - return { modal: css({ position: 'fixed', zIndex: theme.zIndex.modal, background: theme.colors.background.primary, boxShadow: theme.shadows.z3, - borderRadius, + borderRadius: theme.shape.radius.lg, border: `1px solid ${theme.colors.border.weak}`, backgroundClip: 'padding-box', outline: 'none', diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts index 8d6292c432b..392c1523a33 100644 --- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts +++ b/packages/grafana-ui/src/components/Select/getSelectStyles.ts @@ -127,7 +127,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => { alignItems: 'center', lineHeight: 1, background: theme.colors.background.secondary, - borderRadius: theme.shape.radius.default, + borderRadius: theme.shape.radius.sm, 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/Tags/Tag.tsx b/packages/grafana-ui/src/components/Tags/Tag.tsx index 2550cb052c5..e1dde995bad 100644 --- a/packages/grafana-ui/src/components/Tags/Tag.tsx +++ b/packages/grafana-ui/src/components/Tags/Tag.tsx @@ -85,7 +85,7 @@ const getTagStyles = (theme: GrafanaTheme2, name: string, colorIndex?: number) = whiteSpace: 'pre', textShadow: 'none', padding: '3px 6px', - borderRadius: theme.shape.radius.default, + borderRadius: theme.shape.radius.sm, }), hover: css({ '&:hover': { diff --git a/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap b/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap index 16c464e795d..63b6a8cd1dd 100644 --- a/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap +++ b/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap @@ -19,7 +19,7 @@ exports[`VariableQueryEditor renders correctly 1`] = `