IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Replace deprecated usage of shape.borderRadius() (#72672)

Browse Source 
* properly mark borderRadius() as deprecated, replace borderRadius() with default

* undo a couple of changes

* use radius.pill in FilterPill
This commit is contained in:
Ashley Harrison 2023-08-01 14:46:07 +01:00 committed by GitHub
parent 522f298b27
commit e0587dfb30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
106 changed files with 125 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/grafana-data/src/themes/createShape.ts
View File

@ -1,5 +1,8 @@
/** @beta */ /** @beta */
export interface ThemeShape { export interface ThemeShape {
/**
* @deprecated Use `theme.shape.radius.default`, `theme.shape.radius.pill` or `theme.shape.radius.circle` instead
*/
borderRadius: (amount?: number) => string; borderRadius: (amount?: number) => string;
radius: Radii; radius: Radii;
} }

2
packages/grafana-ui/src/components/Alert/Alert.tsx
View File

@ -120,7 +120,7 @@ const getStyles = (
topSpacing?: number topSpacing?: number
) => { ) => {
const color = theme.colors[severity]; 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(); const borderColor = tinycolor2(color.border).setAlpha(0.2).toString();
return { return {

2
packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
View File

@ -127,7 +127,7 @@ export abstract class BigValueLayout {
width: `${width}px`, width: `${width}px`,
height: `${height}px`, height: `${height}px`,
padding: `${this.panelPadding}px`, padding: `${this.panelPadding}px`,
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
position: 'relative', position: 'relative',
display: 'flex', display: 'flex',
}; };

2
packages/grafana-ui/src/components/BrowserLabel/Label.tsx
View File

@ -111,7 +111,7 @@ const getLabelStyles = (theme: GrafanaTheme2) => ({
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
textShadow: 'none', textShadow: 'none',
padding: theme.spacing(0.5), padding: theme.spacing(0.5),
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
border: 'none', border: 'none',
marginRight: theme.spacing(1), marginRight: theme.spacing(1),
marginBottom: theme.spacing(0.5), marginBottom: theme.spacing(0.5),

2
packages/grafana-ui/src/components/Card/Card.tsx
View File

@ -133,7 +133,7 @@ const getHeadingStyles = (theme: GrafanaTheme2) => ({
bottom: 0, bottom: 0,
left: 0, left: 0,
right: 0, right: 0,
borderRadius: theme.shape.borderRadius(1), borderRadius: theme.shape.radius.default,
}, },
'&:focus-visible': { '&:focus-visible': {

4
packages/grafana-ui/src/components/Card/CardContainer.tsx
View File

@ -86,7 +86,7 @@ export const getCardContainerStyles = stylesFactory(
width: '100%', width: '100%',
padding: theme.spacing(2), padding: theme.spacing(2),
background: theme.colors.background.secondary, background: theme.colors.background.secondary,
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
marginBottom: '8px', marginBottom: '8px',
pointerEvents: disabled ? 'none' : 'auto', pointerEvents: disabled ? 'none' : 'auto',
transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], { transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
@ -114,7 +114,7 @@ export const getCardContainerStyles = stylesFactory(
display: 'flex', display: 'flex',
width: '100%', width: '100%',
background: theme.colors.background.secondary, background: theme.colors.background.secondary,
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
position: 'relative', position: 'relative',
pointerEvents: disabled ? 'none' : 'auto', pointerEvents: disabled ? 'none' : 'auto',
marginBottom: theme.spacing(1), marginBottom: theme.spacing(1),

2
packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx
View File

@ -104,6 +104,6 @@ const getColorPreviewStyles = (theme: GrafanaTheme2) =>
css({ css({
height: '100%', height: '100%',
width: `${theme.spacing.gridSize * 4}px`, 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}`, border: `1px solid ${theme.colors.border.medium}`,
}); });

4
packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
View File

@ -141,7 +141,7 @@ ColorPickerPopover.displayName = 'ColorPickerPopover';
const getStyles = stylesFactory((theme: GrafanaTheme2) => { const getStyles = stylesFactory((theme: GrafanaTheme2) => {
return { return {
colorPickerPopover: css({ colorPickerPopover: css({
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
boxShadow: theme.shadows.z3, boxShadow: theme.shadows.z3,
background: theme.colors.background.primary, background: theme.colors.background.primary,
border: `1px solid ${theme.colors.border.weak}`, border: `1px solid ${theme.colors.border.weak}`,
@ -183,7 +183,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
colorPickerPopoverTabs: css({ colorPickerPopoverTabs: css({
display: 'flex', display: 'flex',
width: '100%', width: '100%',
borderRadius: `${theme.shape.borderRadius()} ${theme.shape.borderRadius()} 0 0`, borderRadius: `${theme.shape.radius.default} ${theme.shape.radius.default} 0 0`,
}), }),
}; };
}); });

4
packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx
View File

@ -54,10 +54,10 @@ export const getStyles = (theme: GrafanaTheme2) => ({
'.react-colorful': { '.react-colorful': {
'&__saturation': { '&__saturation': {
borderRadius: `${theme.shape.borderRadius(1)} ${theme.shape.borderRadius(1)} 0 0`, borderRadius: `${theme.shape.radius.default} ${theme.shape.radius.default} 0 0`,
}, },
'&__alpha': { '&__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': { '&__alpha, &__hue': {
height: theme.spacing(2), height: theme.spacing(2),

2
packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx
View File

@ -328,7 +328,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
container: css({ container: css({
padding: theme.spacing(1), padding: theme.spacing(1),
border: `1px ${theme.colors.border.weak} solid`, border: `1px ${theme.colors.border.weak} solid`,
borderRadius: theme.shape.borderRadius(1), borderRadius: theme.shape.radius.default,
backgroundColor: theme.colors.background.primary, backgroundColor: theme.colors.background.primary,
zIndex: theme.zIndex.modal, zIndex: theme.zIndex.modal,
}), }),

2
packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx
View File

@ -78,7 +78,7 @@ const getStyles = (theme: GrafanaTheme2) => {
const bgColor = theme.components.input.background; const bgColor = theme.components.input.background;
const menuShadowColor = theme.v1.palette.black; const menuShadowColor = theme.v1.palette.black;
const optionBgHover = theme.colors.background.secondary; const optionBgHover = theme.colors.background.secondary;
const borderRadius = theme.shape.borderRadius(1); const borderRadius = theme.shape.radius.default;
const borderColor = theme.components.input.borderColor; const borderColor = theme.components.input.borderColor;
return { return {
caretWrapper: css({ caretWrapper: css({

2
packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
View File

@ -30,7 +30,7 @@ const getStyles = (theme: GrafanaTheme2) => {
return { return {
wrapper: css({ wrapper: css({
background: theme.colors.background.secondary, background: theme.colors.background.secondary,
borderRadius: theme.shape.borderRadius(8), borderRadius: theme.shape.radius.pill,
padding: theme.spacing(0, 2), padding: theme.spacing(0, 2),
fontSize: theme.typography.bodySmall.fontSize, fontSize: theme.typography.bodySmall.fontSize,
fontWeight: theme.typography.fontWeightMedium, fontWeight: theme.typography.fontWeightMedium,

2
packages/grafana-ui/src/components/Forms/Checkbox.tsx
View File

@ -183,7 +183,7 @@ export const getCheckboxStyles = (theme: GrafanaTheme2, invalid = false) => {
display: 'inline-block', display: 'inline-block',
width: theme.spacing(checkboxSize), width: theme.spacing(checkboxSize),
height: theme.spacing(checkboxSize), height: theme.spacing(checkboxSize),
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
background: theme.components.input.background, background: theme.components.input.background,
border: `1px solid ${getBorderColor(theme.components.input.borderColor)}`, border: `1px solid ${getBorderColor(theme.components.input.borderColor)}`,

2
packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx
View File

@ -19,7 +19,7 @@ export const getFieldValidationMessageStyles = stylesFactory((theme: GrafanaThem
padding: ${theme.spacing(0.5, 1)}; padding: ${theme.spacing(0.5, 1)};
color: ${theme.colors.error.contrastText}; color: ${theme.colors.error.contrastText};
background: ${theme.colors.error.main}; background: ${theme.colors.error.main};
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
position: relative; position: relative;
display: inline-block; display: inline-block;
align-self: flex-start; align-self: flex-start;

2
packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
View File

@ -107,7 +107,7 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme2, size: RadioBut
lineHeight: `${labelHeight}px`, lineHeight: `${labelHeight}px`,
color: textColor, color: textColor,
padding: theme.spacing(0, padding), padding: theme.spacing(0, padding),
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
background: theme.colors.background.primary, background: theme.colors.background.primary,
cursor: 'pointer', cursor: 'pointer',
zIndex: 1, zIndex: 1,

2
packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
View File

@ -111,7 +111,7 @@ const getStyles = (theme: GrafanaTheme2) => {
flexDirection: 'row', flexDirection: 'row',
flexWrap: 'nowrap', flexWrap: 'nowrap',
border: `1px solid ${theme.components.input.borderColor}`, border: `1px solid ${theme.components.input.borderColor}`,
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
padding: '2px', padding: '2px',
}), }),
fullWidth: css({ fullWidth: css({

4
packages/grafana-ui/src/components/Input/Input.tsx
View File

@ -106,7 +106,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false, width }:
display: 'flex', display: 'flex',
width: width ? theme.spacing(width) : '100%', width: width ? theme.spacing(width) : '100%',
height: theme.spacing(theme.components.height.md), height: theme.spacing(theme.components.height.md),
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
'&:hover': { '&:hover': {
'> .prefix, .suffix, .input': { '> .prefix, .suffix, .input': {
borderColor: invalid ? theme.colors.error.border : theme.colors.primary.border, borderColor: invalid ? theme.colors.error.border : theme.colors.primary.border,
@ -186,7 +186,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false, width }:
position: 'relative', position: 'relative',
zIndex: 0, zIndex: 0,
flexGrow: 1, flexGrow: 1,
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
height: '100%', height: '100%',
width: '100%', width: '100%',
}) })

2
packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx
View File

@ -33,7 +33,7 @@ const getStyles = (theme: GrafanaTheme2) => {
width: '100%', width: '100%',
}), }),
table: css({ table: css({
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
width: '100%', width: '100%',
td: { td: {

2
packages/grafana-ui/src/components/Menu/Menu.tsx
View File

@ -75,7 +75,7 @@ const getStyles = (theme: GrafanaTheme2) => {
background: `${theme.colors.background.primary}`, background: `${theme.colors.background.primary}`,
boxShadow: `${theme.shadows.z3}`, boxShadow: `${theme.shadows.z3}`,
display: `inline-block`, display: `inline-block`,
borderRadius: `${theme.shape.borderRadius()}`, borderRadius: `${theme.shape.radius.default}`,
padding: `${theme.spacing(0.5, 0)}`, padding: `${theme.spacing(0.5, 0)}`,
}), }),
}; };

2
packages/grafana-ui/src/components/Menu/SubMenu.tsx
View File

@ -88,7 +88,7 @@ const getStyles = (theme: GrafanaTheme2) => {
background: theme.colors.background.primary, background: theme.colors.background.primary,
boxShadow: theme.shadows.z3, boxShadow: theme.shadows.z3,
display: 'inline-block', display: 'inline-block',
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
}), }),
pushLeft: css({ pushLeft: css({
right: '100%', right: '100%',

2
packages/grafana-ui/src/components/Modal/getModalStyles.ts
View File

@ -5,7 +5,7 @@ import { GrafanaTheme2 } from '@grafana/data';
import { stylesFactory } from '../../themes'; import { stylesFactory } from '../../themes';
export const getModalStyles = stylesFactory((theme: GrafanaTheme2) => { export const getModalStyles = stylesFactory((theme: GrafanaTheme2) => {
const borderRadius = theme.shape.borderRadius(1); const borderRadius = theme.shape.radius.default;
return { return {
modal: css({ modal: css({

2
packages/grafana-ui/src/components/Monaco/CodeEditor.tsx
View File

@ -178,7 +178,7 @@ export const CodeEditor = withTheme2(UnthemedCodeEditor);
const getStyles = (theme: GrafanaTheme2) => { const getStyles = (theme: GrafanaTheme2) => {
return { return {
container: css({ container: css({
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
border: `1px solid ${theme.components.input.borderColor}`, border: `1px solid ${theme.components.input.borderColor}`,
}), }),
}; };

2
packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
View File

@ -333,7 +333,7 @@ const getStyles = (theme: GrafanaTheme2) => {
backgroundColor: background, backgroundColor: background,
border: `1px solid ${borderColor}`, border: `1px solid ${borderColor}`,
position: 'relative', position: 'relative',
borderRadius: theme.shape.borderRadius(1), borderRadius: theme.shape.radius.default,
height: '100%', height: '100%',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',

2
packages/grafana-ui/src/components/PanelChrome/TitleItem.tsx
View File

@ -60,7 +60,7 @@ const getStyles = (theme: GrafanaTheme2) => {
label: 'panel-header-item', label: 'panel-header-item',
cursor: 'auto', cursor: 'auto',
border: 'none', border: 'none',
borderRadius: `${theme.shape.borderRadius()}`, borderRadius: `${theme.shape.radius.default}`,
padding: `${theme.spacing(0, 1)}`, padding: `${theme.spacing(0, 1)}`,
height: `${theme.spacing(theme.components.panel.headerHeight)}`, height: `${theme.spacing(theme.components.panel.headerHeight)}`,
display: 'flex', display: 'flex',

2
packages/grafana-ui/src/components/Select/getSelectStyles.ts
View File

@ -102,7 +102,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
alignItems: 'center', alignItems: 'center',
lineHeight: 1, lineHeight: 1,
background: theme.colors.background.secondary, background: theme.colors.background.secondary,
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
margin: theme.spacing(0.25, 1, 0.25, 0), margin: theme.spacing(0.25, 1, 0.25, 0),
padding: theme.spacing(0.25, 0, 0.25, 1), padding: theme.spacing(0.25, 0, 0.25, 1),
color: theme.colors.text.primary, color: theme.colors.text.primary,

2
packages/grafana-ui/src/components/Switch/Switch.tsx
View File

@ -151,7 +151,7 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme2, transparent?: boole
alignItems: 'center', alignItems: 'center',
background: transparent ? 'transparent' : theme.components.input.background, background: transparent ? 'transparent' : theme.components.input.background,
border: `1px solid ${transparent ? 'transparent' : theme.components.input.borderColor}`, border: `1px solid ${transparent ? 'transparent' : theme.components.input.borderColor}`,
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
'&:hover': { '&:hover': {
border: `1px solid ${transparent ? 'transparent' : theme.components.input.borderHover}`, border: `1px solid ${transparent ? 'transparent' : theme.components.input.borderHover}`,

2
packages/grafana-ui/src/components/TextArea/TextArea.tsx
View File

@ -25,7 +25,7 @@ const getTextAreaStyle = stylesFactory((theme: GrafanaTheme2, invalid = false) =
getFocusStyle(theme), getFocusStyle(theme),
css({ css({
display: 'block', display: 'block',
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
padding: `${theme.spacing.gridSize / 4}px ${theme.spacing.gridSize}px`, padding: `${theme.spacing.gridSize / 4}px ${theme.spacing.gridSize}px`,
width: '100%', width: '100%',
borderColor: invalid ? theme.colors.error.border : theme.components.input.borderColor, borderColor: invalid ? theme.colors.error.border : theme.components.input.borderColor,

2
packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx
View File

@ -147,7 +147,7 @@ const getStyles = (theme: GrafanaTheme2) => {
alignItems: 'center', alignItems: 'center',
height: theme.spacing(theme.components.height.md), height: theme.spacing(theme.components.height.md),
padding: theme.spacing(0, 1), padding: theme.spacing(0, 1),
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
lineHeight: `${theme.components.height.md * theme.spacing.gridSize - 2}px`, lineHeight: `${theme.components.height.md * theme.spacing.gridSize - 2}px`,
fontWeight: theme.typography.fontWeightMedium, fontWeight: theme.typography.fontWeightMedium,
border: `1px solid ${theme.colors.secondary.border}`, border: `1px solid ${theme.colors.secondary.border}`,

2
packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
View File

@ -116,7 +116,7 @@ const getStyles = (theme: GrafanaTheme2, overflowButtonOrder: number, alignment:
overflowItems: css({ overflowItems: css({
alignItems: 'center', alignItems: 'center',
backgroundColor: theme.colors.background.primary, backgroundColor: theme.colors.background.primary,
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
boxShadow: theme.shadows.z3, boxShadow: theme.shadows.z3,
display: 'flex', display: 'flex',
flexWrap: 'wrap', flexWrap: 'wrap',

2
packages/grafana-ui/src/components/VizLayout/VizLayout.tsx
View File

@ -107,7 +107,7 @@ export const getVizStyles = (theme: GrafanaTheme2) => {
return { return {
viz: css({ viz: css({
flexGrow: 2, flexGrow: 2,
borderRadius: theme.shape.borderRadius(1), borderRadius: theme.shape.radius.default,
'&:focus-visible': getFocusStyles(theme), '&:focus-visible': getFocusStyles(theme),
}), }),
}; };

4
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
View File

@ -130,9 +130,9 @@ $headings-line-height: ${theme.typography.bodySmall.lineHeight} !default;
$border-width: 1px !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-lg: ${theme.shape.borderRadius(3)} !default;
$border-radius-sm: ${theme.shape.borderRadius(1)} !default; $border-radius-sm: ${theme.shape.radius.default} !default;
// Page // Page

4
public/app/core/components/AppChrome/MegaMenu/NavBarMenuItem.tsx
View File

@ -98,7 +98,7 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive'], isChild: P
color: isActive ? theme.colors.text.primary : theme.colors.text.secondary, color: isActive ? theme.colors.text.primary : theme.colors.text.secondary,
padding: theme.spacing(1, 1, 1, isChild ? 5 : 0), padding: theme.spacing(1, 1, 1, isChild ? 5 : 0),
...(isChild && { ...(isChild && {
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
}), }),
width: '100%', width: '100%',
'&:hover, &:focus-visible': { '&:hover, &:focus-visible': {
@ -123,7 +123,7 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive'], isChild: P
top: '50%', top: '50%',
transform: 'translateY(-50%)', transform: 'translateY(-50%)',
width: theme.spacing(0.5), width: theme.spacing(0.5),
borderRadius: theme.shape.borderRadius(1), borderRadius: theme.shape.radius.default,
backgroundImage: theme.colors.gradients.brandVertical, backgroundImage: theme.colors.gradients.brandVertical,
}, },
}), }),

2
public/app/core/components/AppChrome/MegaMenu/NavBarMenuSection.tsx
View File

@ -107,7 +107,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
top: '50%', top: '50%',
transform: 'translateY(-50%)', transform: 'translateY(-50%)',
width: theme.spacing(0.5), width: theme.spacing(0.5),
borderRadius: theme.shape.borderRadius(1), borderRadius: theme.shape.radius.default,
backgroundImage: theme.colors.gradients.brandVertical, backgroundImage: theme.colors.gradients.brandVertical,
}, },
}), }),

2
public/app/core/components/CardButton.tsx
View File

@ -35,7 +35,7 @@ const getStyles = (theme: GrafanaTheme2) => {
justify-self: center; justify-self: center;
cursor: pointer; cursor: pointer;
background: ${theme.colors.background.secondary}; background: ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius(1)}; border-radius: ${theme.shape.radius.default};
color: ${theme.colors.text.primary}; color: ${theme.colors.text.primary};
border: unset; border: unset;
width: 100%; width: 100%;

2
public/app/core/components/Layers/LayerDragDropList.tsx
View File

@ -132,7 +132,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
`, `,
row: css` row: css`
padding: ${theme.spacing(0.5, 1)}; padding: ${theme.spacing(0.5, 1)};
border-radius: ${theme.shape.borderRadius(1)}; border-radius: ${theme.shape.radius.default};
background: ${theme.colors.background.secondary}; background: ${theme.colors.background.secondary};
min-height: ${theme.spacing(4)}; min-height: ${theme.spacing(4)};
display: flex; display: flex;

2
public/app/core/components/Page/Page.tsx
View File

@ -98,7 +98,7 @@ const getStyles = (theme: GrafanaTheme2) => {
pageInner: css({ pageInner: css({
label: 'page-inner', label: 'page-inner',
padding: theme.spacing(2), padding: theme.spacing(2),
borderRadius: theme.shape.borderRadius(1), borderRadius: theme.shape.radius.default,
border: `1px solid ${theme.colors.border.weak}`, border: `1px solid ${theme.colors.border.weak}`,
borderBottom: 'none', borderBottom: 'none',
background: theme.colors.background.primary, background: theme.colors.background.primary,

2
public/app/core/components/QueryOperationRow/OperationRowHelp.tsx
View File

@ -31,7 +31,7 @@ function markdownHelper(markdown: string) {
OperationRowHelp.displayName = 'OperationRowHelp'; OperationRowHelp.displayName = 'OperationRowHelp';
const getStyles = (theme: GrafanaTheme2) => { const getStyles = (theme: GrafanaTheme2) => {
const borderRadius = theme.shape.borderRadius(); const borderRadius = theme.shape.radius.default;
return { return {
wrapper: css` wrapper: css`

2
public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
View File

@ -79,7 +79,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
header: css` header: css`
label: Header; label: Header;
padding: ${theme.spacing(0.5, 0.5)}; padding: ${theme.spacing(0.5, 0.5)};
border-radius: ${theme.shape.borderRadius(1)}; border-radius: ${theme.shape.radius.default};
background: ${theme.colors.background.secondary}; background: ${theme.colors.background.secondary};
min-height: ${theme.spacing(4)}; min-height: ${theme.spacing(4)};
display: grid; display: grid;

2
public/app/core/components/RolePicker/styles.ts
View File

@ -50,7 +50,7 @@ export const getStyles = (theme: GrafanaTheme2) => {
container: css` container: css`
padding: ${theme.spacing(1)}; padding: ${theme.spacing(1)};
border: 1px ${theme.colors.border.weak} solid; 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}; background-color: ${theme.colors.background.primary};
z-index: ${theme.zIndex.modal}; z-index: ${theme.zIndex.modal};
`, `,

2
public/app/core/utils/ConfigProvider.tsx
View File

@ -26,7 +26,7 @@ export const ThemeProvider = ({ children, value }: { children: React.ReactNode;
<SkeletonTheme <SkeletonTheme
baseColor={theme.colors.background.secondary} baseColor={theme.colors.background.secondary}
highlightColor={theme.colors.emphasize(theme.colors.background.secondary)} highlightColor={theme.colors.emphasize(theme.colors.background.secondary)}
borderRadius={theme.shape.borderRadius()} borderRadius={theme.shape.radius.default}
> >
{children} {children}
</SkeletonTheme> </SkeletonTheme>

2
public/app/features/alerting/unified/Home.tsx
View File

@ -249,7 +249,7 @@ const getContentBoxStyles = (theme: GrafanaTheme2) => ({
box: css` box: css`
padding: ${theme.spacing(2)}; padding: ${theme.spacing(2)};
background-color: ${theme.colors.background.secondary}; background-color: ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
`, `,
}); });

2
public/app/features/alerting/unified/components/AlertLabel.tsx
View File

@ -27,7 +27,7 @@ export const AlertLabel = ({ labelKey, value, operator = '=', onRemoveLabel }: P
export const getStyles = (theme: GrafanaTheme2) => ({ export const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css` wrapper: css`
padding: ${theme.spacing(0.5, 1)}; 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}; border: solid 1px ${theme.colors.border.medium};
font-size: ${theme.typography.bodySmall.fontSize}; font-size: ${theme.typography.bodySmall.fontSize};
background-color: ${theme.colors.background.secondary}; background-color: ${theme.colors.background.secondary};

2
public/app/features/alerting/unified/components/DynamicTable.tsx
View File

@ -191,7 +191,7 @@ const getStyles = <T extends unknown>(
return (theme: GrafanaTheme2) => ({ return (theme: GrafanaTheme2) => ({
container: css` container: css`
border: 1px solid ${theme.colors.border.weak}; border: 1px solid ${theme.colors.border.weak};
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
color: ${theme.colors.text.secondary}; color: ${theme.colors.text.secondary};
`, `,
row: css` row: css`

2
public/app/features/alerting/unified/components/HoverCard.tsx
View File

@ -84,7 +84,7 @@ export const HoverCard = ({
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
popover: (offset: number) => css` popover: (offset: number) => css`
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
box-shadow: ${theme.shadows.z3}; box-shadow: ${theme.shadows.z3};
background: ${theme.colors.background.primary}; background: ${theme.colors.background.primary};
border: 1px solid ${theme.colors.border.medium}; border: 1px solid ${theme.colors.border.medium};

2
public/app/features/alerting/unified/components/StateTag.tsx
View File

@ -26,7 +26,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
common: css` common: css`
display: inline-block; display: inline-block;
color: white; color: white;
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
font-size: ${theme.typography.size.sm}; font-size: ${theme.typography.size.sm};
text-transform: capitalize; text-transform: capitalize;
line-height: 1.2; line-height: 1.2;

2
public/app/features/alerting/unified/components/Tokenize.tsx
View File

@ -135,7 +135,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
font-family: ${theme.typography.fontFamilyMonospace}; font-family: ${theme.typography.fontFamilyMonospace};
`, `,
popover: css` popover: css`
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
box-shadow: ${theme.shadows.z3}; box-shadow: ${theme.shadows.z3};
background: ${theme.colors.background.primary}; background: ${theme.colors.background.primary};
border: 1px solid ${theme.colors.border.medium}; border: 1px solid ${theme.colors.border.medium};

2
public/app/features/alerting/unified/components/Well.tsx
View File

@ -14,7 +14,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css` wrapper: css`
background-color: ${theme.components.panel.background}; background-color: ${theme.components.panel.background};
border: solid 1px ${theme.components.input.borderColor}; 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)}; padding: ${theme.spacing(0.5, 1)};
font-family: ${theme.typography.fontFamilyMonospace}; font-family: ${theme.typography.fontFamilyMonospace};
`, `,

10
public/app/features/alerting/unified/components/contact-points/ContactPoints.v2.tsx
View File

@ -297,7 +297,7 @@ const ContactPointReceiverMetadataRow = (props: ContactPointReceiverMetadata) =>
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
contactPointWrapper: css` contactPointWrapper: css`
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
border: solid 1px ${theme.colors.border.weak}; border: solid 1px ${theme.colors.border.weak};
border-bottom: none; border-bottom: none;
`, `,
@ -313,8 +313,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
background: ${theme.colors.background.secondary}; background: ${theme.colors.background.secondary};
border-bottom: solid 1px ${theme.colors.border.weak}; border-bottom: solid 1px ${theme.colors.border.weak};
border-top-left-radius: ${theme.shape.borderRadius()}; border-top-left-radius: ${theme.shape.radius.default};
border-top-right-radius: ${theme.shape.borderRadius()}; border-top-right-radius: ${theme.shape.radius.default};
`, `,
receiverDescriptionRow: css` receiverDescriptionRow: css`
padding: ${theme.spacing(1)} ${theme.spacing(1.5)}; padding: ${theme.spacing(1)} ${theme.spacing(1.5)};
@ -322,8 +322,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
metadataRow: css` metadataRow: css`
padding: 0 ${theme.spacing(1.5)} ${theme.spacing(1.5)} ${theme.spacing(1.5)}; padding: 0 ${theme.spacing(1.5)} ${theme.spacing(1.5)} ${theme.spacing(1.5)};
border-bottom-left-radius: ${theme.shape.borderRadius()}; border-bottom-left-radius: ${theme.shape.radius.default};
border-bottom-right-radius: ${theme.shape.borderRadius()}; border-bottom-right-radius: ${theme.shape.radius.default};
`, `,
receiversWrapper: css``, receiversWrapper: css``,
}); });

4
public/app/features/alerting/unified/components/expressions/Expression.tsx
View File

@ -427,7 +427,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
border: solid 1px ${theme.colors.border.medium}; border: solid 1px ${theme.colors.border.medium};
flex: 1; flex: 1;
flex-basis: 400px; flex-basis: 400px;
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
`, `,
stack: css` stack: css`
display: flex; display: flex;
@ -532,7 +532,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
editable: css` editable: css`
padding: ${theme.spacing(0.5)} ${theme.spacing(1)}; padding: ${theme.spacing(0.5)} ${theme.spacing(1)};
border: solid 1px ${theme.colors.border.weak}; border: solid 1px ${theme.colors.border.weak};
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
display: flex; display: flex;
flex-direction: row; flex-direction: row;

2
public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeInterval.tsx
View File

@ -236,7 +236,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
border: solid 1px ${theme.colors.border.medium}; border: solid 1px ${theme.colors.border.medium};
background: none; background: none;
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
color: ${theme.colors.text.secondary}; color: ${theme.colors.text.secondary};

6
public/app/features/alerting/unified/components/notification-policies/Policy.tsx
View File

@ -607,7 +607,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
font-size: ${theme.typography.bodySmall.fontSize}; font-size: ${theme.typography.bodySmall.fontSize};
border: solid 1px ${borderColor}; 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; position: relative;
background: ${theme.colors.background.secondary}; background: ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius(1)}; border-radius: ${theme.shape.radius.default};
border: solid 1px ${theme.colors.border.weak}; border: solid 1px ${theme.colors.border.weak};
${hasFocus && ${hasFocus &&
@ -674,7 +674,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
text-align: center; text-align: center;
border: solid 1px ${theme.colors.border.weak}; border: solid 1px ${theme.colors.border.weak};
border-radius: ${theme.shape.borderRadius(1)}; border-radius: ${theme.shape.radius.default};
padding: 0; padding: 0;
`, `,

2
public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
View File

@ -200,7 +200,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
margin: ${theme.spacing(2, 0)}; margin: ${theme.spacing(2, 0)};
padding: ${theme.spacing(1)}; padding: ${theme.spacing(1)};
border: solid 1px ${theme.colors.border.medium}; 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}; max-width: ${theme.breakpoints.values.xl}${theme.breakpoints.unit};
`, `,
topRow: css` topRow: css`

2
public/app/features/alerting/unified/components/receivers/form/fields/styles.ts
View File

@ -11,7 +11,7 @@ export const getReceiverFormFieldStyles = (theme: GrafanaTheme2) => ({
margin: ${theme.spacing(2, 0)}; margin: ${theme.spacing(2, 0)};
padding: ${theme.spacing(1)}; padding: ${theme.spacing(1)};
border: solid 1px ${theme.colors.border.medium}; border: solid 1px ${theme.colors.border.medium};
border-radius: ${theme.shape.borderRadius(1)}; border-radius: ${theme.shape.radius.default};
position: relative; position: relative;
`, `,
description: css` description: css`

2
public/app/features/alerting/unified/components/receivers/grafanaAppReceivers/GrafanaAppBadge.tsx
View File

@ -26,7 +26,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
height: 22px; height: 22px;
display: inline-flex; display: inline-flex;
padding: 1px 4px; padding: 1px 4px;
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
border: 1px solid rgba(245, 95, 62, 1); border: 1px solid rgba(245, 95, 62, 1);
color: rgba(245, 95, 62, 1); color: rgba(245, 95, 62, 1);
font-weight: ${theme.typography.fontWeightRegular}; font-weight: ${theme.typography.fontWeightRegular};

2
public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx
View File

@ -365,7 +365,7 @@ const getStyles = (theme: GrafanaTheme2) => {
contentOuter: css` contentOuter: css`
background: ${theme.colors.background.primary}; background: ${theme.colors.background.primary};
border: 1px solid ${theme.colors.border.weak}; border: 1px solid ${theme.colors.border.weak};
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
overflow: hidden; overflow: hidden;
flex: 1; flex: 1;
margin-top: ${theme.spacing(1)}; margin-top: ${theme.spacing(1)};

2
public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx
View File

@ -84,7 +84,7 @@ function getStyles(theme: GrafanaTheme2) {
height: 135px; height: 135px;
margin-top: ${theme.spacing(2)}; margin-top: ${theme.spacing(2)};
border: 1px solid ${theme.colors.border.medium}; border: 1px solid ${theme.colors.border.medium};
border-radius: ${theme.shape.borderRadius(1)}; border-radius: ${theme.shape.radius.default};
`, `,
}; };
} }

2
public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx
View File

@ -278,7 +278,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
label: AlertingQueryWrapper; label: AlertingQueryWrapper;
margin-bottom: ${theme.spacing(1)}; margin-bottom: ${theme.spacing(1)};
border: 1px solid ${theme.colors.border.weak}; border: 1px solid ${theme.colors.border.weak};
border-radius: ${theme.shape.borderRadius(1)}; border-radius: ${theme.shape.radius.default};
button { button {
overflow: visible; overflow: visible;

2
public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx
View File

@ -70,7 +70,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
`, `,
instantVectorResultWrapper: css` instantVectorResultWrapper: css`
border: solid 1px ${theme.colors.border.medium}; border: solid 1px ${theme.colors.border.medium};
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
padding: 0; padding: 0;
display: flex; display: flex;

2
public/app/features/alerting/unified/components/rule-viewer/RuleViewer.v1.tsx
View File

@ -268,7 +268,7 @@ const getStyles = (theme: GrafanaTheme2) => {
collapse: css` collapse: css`
margin-top: ${theme.spacing(2)}; margin-top: ${theme.spacing(2)};
border-color: ${theme.colors.border.weak}; border-color: ${theme.colors.border.weak};
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
`, `,
queriesTitle: css` queriesTitle: css`
padding: ${theme.spacing(2, 0.5)}; padding: ${theme.spacing(2, 0.5)};

2
public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.tsx
View File

@ -52,7 +52,7 @@ const getContentStyles = (padding: number) => (theme: GrafanaTheme2) => {
wrapper: css` wrapper: css`
background: ${theme.colors.background.primary}; background: ${theme.colors.background.primary};
border: 1px solid ${theme.colors.border.weak}; border: 1px solid ${theme.colors.border.weak};
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
padding: ${theme.spacing(padding)}; padding: ${theme.spacing(padding)};
`, `,
}; };

2
public/app/features/alerting/unified/components/rules/RulesTable.tsx
View File

@ -98,7 +98,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({
`, `,
wrapper: css` wrapper: css`
width: auto; width: auto;
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
`, `,
pagination: css` pagination: css`
display: flex; display: flex;

2
public/app/features/alerting/unified/components/silences/SilencesTable.tsx
View File

@ -183,7 +183,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
callout: css` callout: css`
background-color: ${theme.colors.background.secondary}; background-color: ${theme.colors.background.secondary};
border-top: 3px solid ${theme.colors.info.border}; border-top: 3px solid ${theme.colors.info.border};
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
height: 62px; height: 62px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;

2
public/app/features/alerting/unified/styles/table.ts
View File

@ -5,7 +5,7 @@ import { GrafanaTheme2 } from '@grafana/data';
export const getAlertTableStyles = (theme: GrafanaTheme2) => ({ export const getAlertTableStyles = (theme: GrafanaTheme2) => ({
table: css` table: css`
width: 100%; width: 100%;
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
border: solid 1px ${theme.colors.border.weak}; border: solid 1px ${theme.colors.border.weak};
background-color: ${theme.colors.background.secondary}; background-color: ${theme.colors.background.secondary};

2
public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/SettingsBarHeader.tsx
View File

@ -49,7 +49,7 @@ function getStyles(theme: GrafanaTheme2) {
wrapper: css({ wrapper: css({
label: 'header', label: 'header',
padding: theme.spacing(0.5, 0.5), padding: theme.spacing(0.5, 0.5),
borderRadius: theme.shape.borderRadius(1), borderRadius: theme.shape.radius.default,
background: theme.colors.background.secondary, background: theme.colors.background.secondary,
minHeight: theme.spacing(4), minHeight: theme.spacing(4),

2
public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx
View File

@ -162,7 +162,7 @@ const getStyles = (theme: GrafanaTheme2) => {
padding: 0 ${theme.spacing(1, 1, 1)}; padding: 0 ${theme.spacing(1, 1, 1)};
border: 1px solid ${debugBorder}; border: 1px solid ${debugBorder};
background: ${theme.isLight ? theme.v1.palette.white : theme.v1.palette.gray05}; 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%; width: 100%;
min-height: 300px; min-height: 300px;
display: flex; display: flex;

2
public/app/features/dashboard/components/TransformationsEditor/TransformationFilter.tsx
View File

@ -41,7 +41,7 @@ export const TransformationFilter = ({ index, data, config, onChange }: Transfor
}; };
const getStyles = (theme: GrafanaTheme2) => { const getStyles = (theme: GrafanaTheme2) => {
const borderRadius = theme.shape.borderRadius(); const borderRadius = theme.shape.radius.default;
return { return {
wrapper: css` wrapper: css`

2
public/app/features/dashboard/components/VersionHistory/DiffValues.tsx
View File

@ -28,7 +28,7 @@ export const DiffValues = ({ diff }: DiffProps) => {
const getStyles = (theme: GrafanaTheme2) => css` const getStyles = (theme: GrafanaTheme2) => css`
background-color: ${theme.colors.action.hover}; background-color: ${theme.colors.action.hover};
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
color: ${theme.colors.text.primary}; color: ${theme.colors.text.primary};
font-size: ${theme.typography.body.fontSize}; font-size: ${theme.typography.body.fontSize};
margin: 0 ${theme.spacing(0.5)}; margin: 0 ${theme.spacing(0.5)};

4
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotice.tsx
View File

@ -50,14 +50,14 @@ const getStyles = (theme: GrafanaTheme2) => ({
notice: css({ notice: css({
background: 'inherit', background: 'inherit',
border: 'none', border: 'none',
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
}), }),
iconTooltip: css({ iconTooltip: css({
color: `${theme.colors.text.secondary}`, color: `${theme.colors.text.secondary}`,
backgroundColor: 'inherit', backgroundColor: 'inherit',
cursor: 'auto', cursor: 'auto',
border: 'none', border: 'none',
borderRadius: `${theme.shape.borderRadius()}`, borderRadius: `${theme.shape.radius.default}`,
padding: `${theme.spacing(0, 1)}`, padding: `${theme.spacing(0, 1)}`,
height: ` ${theme.spacing(theme.components.height.md)}`, height: ` ${theme.spacing(theme.components.height.md)}`,
display: 'flex', display: 'flex',

2
public/app/features/dashboard/dashgrid/PanelLinks.tsx
View File

@ -50,7 +50,7 @@ const getStyles = (theme: GrafanaTheme2) => {
height: '100%', height: '100%',
background: 'inherit', background: 'inherit',
border: 'none', border: 'none',
borderRadius: `${theme.shape.borderRadius()}`, borderRadius: `${theme.shape.radius.default}`,
cursor: 'context-menu', cursor: 'context-menu',
}), }),
}; };

4
public/app/features/dimensions/editors/ResourcePickerPopover.tsx
View File

@ -142,7 +142,7 @@ export const ResourcePickerPopover = (props: Props) => {
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
resourcePickerPopover: css` resourcePickerPopover: css`
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
box-shadow: ${theme.shadows.z3}; box-shadow: ${theme.shadows.z3};
background: ${theme.colors.background.primary}; background: ${theme.colors.background.primary};
border: 1px solid ${theme.colors.border.weak}; border: 1px solid ${theme.colors.border.weak};
@ -182,7 +182,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
resourcePickerPopoverTabs: css` resourcePickerPopoverTabs: css`
display: flex; display: flex;
width: 100%; 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({ buttonRow: css({
display: 'flex', display: 'flex',

2
public/app/features/explore/FlameGraph/FlameGraphExploreContainer.tsx
View File

@ -25,6 +25,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
display: flow-root; display: flow-root;
padding: 0 ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)}; padding: 0 ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)};
border: 1px solid ${theme.components.panel.borderColor}; border: 1px solid ${theme.components.panel.borderColor};
border-radius: ${theme.shape.borderRadius(1)}; border-radius: ${theme.shape.radius.default};
`, `,
}); });

2
public/app/features/explore/Logs/Logs.tsx
View File

@ -762,7 +762,7 @@ const getStyles = (theme: GrafanaTheme2, wrapLogMessage: boolean) => {
flex-wrap: wrap; flex-wrap: wrap;
background-color: ${theme.colors.background.primary}; background-color: ${theme.colors.background.primary};
padding: ${theme.spacing(1, 2)}; padding: ${theme.spacing(1, 2)};
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
margin: ${theme.spacing(0, 0, 1)}; margin: ${theme.spacing(0, 0, 1)};
border: 1px solid ${theme.colors.border.medium}; border: 1px solid ${theme.colors.border.medium};
`, `,

2
public/app/features/explore/RichHistory/RichHistoryCard.tsx
View File

@ -62,7 +62,7 @@ const getStyles = (theme: GrafanaTheme2) => {
border: 1px solid ${theme.colors.border.weak}; border: 1px solid ${theme.colors.border.weak};
margin: ${theme.spacing(1)} 0; margin: ${theme.spacing(1)} 0;
background-color: ${cardColor}; background-color: ${cardColor};
border-radius: ${theme.shape.borderRadius(1)}; border-radius: ${theme.shape.radius.default};
.starred { .starred {
color: ${theme.v1.palette.orange}; color: ${theme.v1.palette.orange};
} }

2
public/app/features/expressions/components/Condition.tsx
View File

@ -148,7 +148,7 @@ const getStyles = (theme: GrafanaTheme2) => {
css` css`
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: ${theme.shape.borderRadius(1)}; border-radius: ${theme.shape.radius.default};
font-weight: ${theme.typography.fontWeightMedium}; font-weight: ${theme.typography.fontWeightMedium};
border: 1px solid ${theme.colors.border.weak}; border: 1px solid ${theme.colors.border.weak};
white-space: nowrap; white-space: nowrap;

2
public/app/features/expressions/components/Threshold.tsx
View File

@ -142,7 +142,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: ${theme.shape.borderRadius(1)}; border-radius: ${theme.shape.radius.default};
font-weight: ${theme.typography.fontWeightBold}; font-weight: ${theme.typography.fontWeightBold};
border: 1px solid ${theme.colors.border.medium}; border: 1px solid ${theme.colors.border.medium};
white-space: nowrap; white-space: nowrap;

2
public/app/features/library-panels/styles.ts
View File

@ -9,7 +9,7 @@ export function getModalStyles(theme: GrafanaTheme2) {
overflow-y: auto; overflow-y: auto;
margin-top: 11px; margin-top: 11px;
margin-bottom: 28px; margin-bottom: 28px;
border-radius: ${theme.shape.borderRadius(1)}; border-radius: ${theme.shape.radius.default};
border: 1px solid ${theme.colors.action.hover}; border: 1px solid ${theme.colors.action.hover};
background: ${theme.colors.background.primary}; background: ${theme.colors.background.primary};
color: ${theme.colors.text.secondary}; color: ${theme.colors.text.secondary};

2
public/app/features/logs/components/LogLabels.tsx
View File

@ -55,7 +55,7 @@ const getStyles = (theme: GrafanaTheme2) => {
display: flex; display: flex;
padding: ${theme.spacing(0, 0.25)}; padding: ${theme.spacing(0, 0.25)};
background-color: ${theme.colors.background.secondary}; 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)}; margin: ${theme.spacing(0.125, 0.5, 0, 0)};
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

2
public/app/features/notifications/StoredNotifications.tsx
View File

@ -125,7 +125,7 @@ function getStyles(theme: GrafanaTheme2) {
top: 0, top: 0,
background: theme.colors.gradients.brandVertical, background: theme.colors.gradients.brandVertical,
width: theme.spacing(0.5), width: theme.spacing(0.5),
borderRadius: theme.shape.borderRadius(1), borderRadius: theme.shape.radius.default,
}, },
}), }),
noNotifsWrapper: css({ noNotifsWrapper: css({

2
public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx
View File

@ -84,7 +84,7 @@ const getStyles = (theme: GrafanaTheme2) => {
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
background: ${theme.colors.background.secondary}; background: ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
box-shadow: ${theme.shadows.z1}; box-shadow: ${theme.shadows.z1};
border: 1px solid ${theme.colors.background.secondary}; border: 1px solid ${theme.colors.background.secondary};
align-items: center; align-items: center;

2
public/app/features/panel/components/VizTypePicker/VisualizationSuggestionCard.tsx
View File

@ -86,7 +86,7 @@ const getStyles = (theme: GrafanaTheme2) => {
vizBox: css` vizBox: css`
position: relative; position: relative;
background: none; background: none;
border-radius: ${theme.shape.borderRadius(1)}; border-radius: ${theme.shape.radius.default};
cursor: pointer; cursor: pointer;
border: 1px solid ${theme.colors.border.medium}; border: 1px solid ${theme.colors.border.medium};

2
public/app/features/plugins/admin/components/PluginListItem.tsx
View File

@ -46,7 +46,7 @@ export const getStyles = (theme: GrafanaTheme2) => {
gap: ${theme.spacing(2)}; gap: ${theme.spacing(2)};
grid-auto-flow: row; grid-auto-flow: row;
background: ${theme.colors.background.secondary}; background: ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
padding: ${theme.spacing(3)}; padding: ${theme.spacing(3)};
transition: ${theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], { transition: ${theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
duration: theme.transitions.duration.short, duration: theme.transitions.duration.short,

2
public/app/features/variables/pickers/shared/VariableLink.tsx
View File

@ -104,7 +104,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
padding: 0 ${theme.spacing(1)}; padding: 0 ${theme.spacing(1)};
background-color: ${theme.components.input.background}; background-color: ${theme.components.input.background};
border: 1px solid ${theme.components.input.borderColor}; border: 1px solid ${theme.components.input.borderColor};
border-radius: ${theme.shape.borderRadius(1)}; border-radius: ${theme.shape.radius.default};
display: flex; display: flex;
align-items: center; align-items: center;
color: ${theme.colors.text}; color: ${theme.colors.text};

2
public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorRow.tsx
View File

@ -28,7 +28,7 @@ const getStyles = (theme: GrafanaTheme2) => {
root: css({ root: css({
padding: theme.spacing(1), padding: theme.spacing(1),
backgroundColor: theme.colors.background.secondary, backgroundColor: theme.colors.background.secondary,
borderRadius: theme.shape.borderRadius(1), borderRadius: theme.shape.radius.default,
}), }),
}; };
}; };

2
public/app/plugins/datasource/grafana/components/TimePickerInput.tsx
View File

@ -96,7 +96,7 @@ const getStyles = (theme: GrafanaTheme2) => {
const bgColor = theme.components.input.background; const bgColor = theme.components.input.background;
const menuShadowColor = theme.v1.palette.black; const menuShadowColor = theme.v1.palette.black;
const optionBgHover = theme.colors.background.secondary; const optionBgHover = theme.colors.background.secondary;
const borderRadius = theme.shape.borderRadius(1); const borderRadius = theme.shape.radius.default;
const borderColor = theme.components.input.borderColor; const borderColor = theme.components.input.borderColor;
return { return {

2
public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx
View File

@ -84,7 +84,7 @@ export function GraphiteFunctionEditor({ func }: FunctionEditorProps) {
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
container: css({ container: css({
backgroundColor: theme.colors.background.secondary, backgroundColor: theme.colors.background.secondary,
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
marginRight: theme.spacing(0.5), marginRight: theme.spacing(0.5),
padding: `0 ${theme.spacing(1)}`, padding: `0 ${theme.spacing(1)}`,
height: `${theme.v1.spacing.formInputHeight}px`, height: `${theme.v1.spacing.formInputHeight}px`,

2
public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.tsx
View File

@ -74,7 +74,7 @@ function ensureLogQL(monaco: Monaco) {
const getStyles = (theme: GrafanaTheme2, placeholder: string) => { const getStyles = (theme: GrafanaTheme2, placeholder: string) => {
return { return {
container: css` container: css`
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
border: 1px solid ${theme.components.input.borderColor}; border: 1px solid ${theme.components.input.borderColor};
width: 100%; width: 100%;
.monaco-editor .suggest-widget { .monaco-editor .suggest-widget {

2
public/app/plugins/datasource/parca/QueryEditor/EditorRow.tsx
View File

@ -28,7 +28,7 @@ const getStyles = (theme: GrafanaTheme2) => {
root: css({ root: css({
padding: theme.spacing(1), padding: theme.spacing(1),
backgroundColor: theme.colors.background.secondary, backgroundColor: theme.colors.background.secondary,
borderRadius: theme.shape.borderRadius(1), borderRadius: theme.shape.radius.default,
}), }),
}; };
}; };

2
public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx
View File

@ -75,7 +75,7 @@ function ensurePromQL(monaco: Monaco) {
const getStyles = (theme: GrafanaTheme2, placeholder: string) => { const getStyles = (theme: GrafanaTheme2, placeholder: string) => {
return { return {
container: css` container: css`
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
border: 1px solid ${theme.components.input.borderColor}; border: 1px solid ${theme.components.input.borderColor};
`, `,
placeholder: css` placeholder: css`

2
public/app/plugins/datasource/prometheus/querybuilder/components/metrics-modal/ResultsTable.tsx
View File

@ -188,7 +188,7 @@ const getStyles = (theme: GrafanaTheme2, disableTextWrap: boolean) => {
return { return {
table: css` table: css`
${disableTextWrap ? '' : 'table-layout: fixed;'} ${disableTextWrap ? '' : 'table-layout: fixed;'}
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
width: 100%; width: 100%;
white-space: ${disableTextWrap ? 'nowrap' : 'normal'}; white-space: ${disableTextWrap ? 'nowrap' : 'normal'};
td { td {

2
public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx
View File

@ -255,7 +255,7 @@ const getStyles = (theme: GrafanaTheme2, isConflicting: boolean) => {
background: theme.colors.background.primary, background: theme.colors.background.primary,
border: `1px solid ${theme.colors.border.medium}`, border: `1px solid ${theme.colors.border.medium}`,
cursor: 'grab', cursor: 'grab',
borderRadius: theme.shape.borderRadius(1), borderRadius: theme.shape.radius.default,
position: 'relative', position: 'relative',
transition: 'all 0.5s ease-in 0s', transition: 'all 0.5s ease-in 0s',
height: isConflicting ? 'auto' : '100%', height: isConflicting ? 'auto' : '100%',

2
public/app/plugins/datasource/prometheus/querybuilder/shared/OperationExplainedBox.tsx
View File

@ -37,7 +37,7 @@ const getStyles = (theme: GrafanaTheme2) => {
box: css({ box: css({
background: theme.colors.background.secondary, background: theme.colors.background.secondary,
padding: theme.spacing(1), padding: theme.spacing(1),
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
position: 'relative', position: 'relative',
}), }),
boxInner: css({ boxInner: css({

2
public/app/plugins/datasource/prometheus/querybuilder/shared/OperationInfoButton.tsx
View File

@ -71,7 +71,7 @@ const getStyles = (theme: GrafanaTheme2) => {
boxShadow: theme.shadows.z3, boxShadow: theme.shadows.z3,
maxWidth: '600px', maxWidth: '600px',
padding: theme.spacing(1), padding: theme.spacing(1),
borderRadius: theme.shape.borderRadius(), borderRadius: theme.shape.radius.default,
zIndex: theme.zIndex.tooltip, zIndex: theme.zIndex.tooltip,
}), }),
docBoxHeader: css({ docBoxHeader: css({

2
public/app/plugins/datasource/prometheus/querybuilder/shared/OperationsEditorRow.tsx
View File

@ -24,7 +24,7 @@ const getStyles = (theme: GrafanaTheme2) => {
root: css({ root: css({
padding: theme.spacing(1, 1, 0, 1), padding: theme.spacing(1, 1, 0, 1),
backgroundColor: theme.colors.background.secondary, backgroundColor: theme.colors.background.secondary,
borderRadius: theme.shape.borderRadius(1), borderRadius: theme.shape.radius.default,
}), }),
}; };
}; };

2
public/app/plugins/datasource/tempo/NativeSearch/TagsField/TagsField.tsx
View File

@ -167,7 +167,7 @@ interface EditorStyles {
const getStyles = (theme: GrafanaTheme2, placeholder: string): EditorStyles => { const getStyles = (theme: GrafanaTheme2, placeholder: string): EditorStyles => {
return { return {
queryField: css` queryField: css`
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
border: 1px solid ${theme.components.input.borderColor}; border: 1px solid ${theme.components.input.borderColor};
flex: 1; flex: 1;
`, `,

2
public/app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx
View File

@ -207,7 +207,7 @@ interface EditorStyles {
const getStyles = (theme: GrafanaTheme2, placeholder: string): EditorStyles => { const getStyles = (theme: GrafanaTheme2, placeholder: string): EditorStyles => {
return { return {
queryField: css` queryField: css`
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
border: 1px solid ${theme.components.input.borderColor}; border: 1px solid ${theme.components.input.borderColor};
flex: 1; flex: 1;
`, `,

2
public/app/plugins/panel/alertlist/AlertList.tsx
View File

@ -234,7 +234,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
height: 100%; height: 100%;
background: ${theme.colors.background.secondary}; background: ${theme.colors.background.secondary};
padding: ${theme.spacing(0.5)} ${theme.spacing(1)}; 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)}; margin-bottom: ${theme.spacing(0.5)};
`, `,
alertRuleItemIcon: css` alertRuleItemIcon: css`

2
public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
View File

@ -374,7 +374,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({
height: 100%; height: 100%;
background: ${theme.colors.background.secondary}; background: ${theme.colors.background.secondary};
padding: ${theme.spacing(0.5)} ${theme.spacing(1)}; 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)}; margin-bottom: ${theme.spacing(0.5)};
gap: ${theme.spacing(2)}; gap: ${theme.spacing(2)};

2
public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx
View File

@ -147,7 +147,7 @@ const getStateTagStyles = (theme: GrafanaTheme2) => ({
display: inline-block; display: inline-block;
color: white; color: white;
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.radius.default};
font-size: ${theme.typography.bodySmall.fontSize}; font-size: ${theme.typography.bodySmall.fontSize};
text-transform: capitalize; text-transform: capitalize;
line-height: 1.2; line-height: 1.2;

2
public/app/plugins/panel/canvas/globalStyles.ts
View File

@ -89,7 +89,7 @@ export function getGlobalStyles(theme: GrafanaTheme2) {
display: flex; display: flex;
border: 1px solid ${theme.components.input.borderColor}; border: 1px solid ${theme.components.input.borderColor};
border-radius: ${theme.shape.borderRadius(1)}; border-radius: ${theme.shape.radius.default};
background: ${theme.colors.background.secondary}; background: ${theme.colors.background.secondary};
min-height: ${theme.spacing.gridSize * 4}px; min-height: ${theme.spacing.gridSize * 4}px;

2
public/app/plugins/panel/dashlist/DashList.tsx
View File

@ -266,7 +266,7 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
appearance: 'none', appearance: 'none',
'&:focus-visible + *': { '&:focus-visible + *': {
...getFocusStyles(theme), ...getFocusStyles(theme),
borderRadius: theme.shape.borderRadius(1), borderRadius: theme.shape.radius.default,
}, },
}), }),
icon: css({ icon: css({

Some files were not shown because too many files have changed in this diff Show More