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
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

View File

@ -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;
}

View File

@ -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 {

View File

@ -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',
};

View File

@ -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),

View File

@ -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': {

View File

@ -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),

View File

@ -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}`,
});

View File

@ -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`,
}),
};
});

View File

@ -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),

View File

@ -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,
}),

View File

@ -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({

View File

@ -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,

View File

@ -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)}`,

View File

@ -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;

View File

@ -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,

View File

@ -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({

View File

@ -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%',
})

View File

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

View File

@ -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)}`,
}),
};

View File

@ -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%',

View File

@ -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({

View File

@ -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}`,
}),
};

View File

@ -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',

View File

@ -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',

View File

@ -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,

View File

@ -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}`,

View File

@ -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,

View File

@ -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}`,

View File

@ -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',

View File

@ -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),
}),
};

View File

@ -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

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,
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,
},
}),

View File

@ -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,
},
}),

View File

@ -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%;

View File

@ -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;

View File

@ -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,

View File

@ -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`

View File

@ -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;

View File

@ -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};
`,

View File

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

View File

@ -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};
`,
});

View File

@ -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};

View File

@ -191,7 +191,7 @@ const getStyles = <T extends unknown>(
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`

View File

@ -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};

View File

@ -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;

View File

@ -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};

View File

@ -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};
`,

View File

@ -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``,
});

View File

@ -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;

View File

@ -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};

View File

@ -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;
`,

View File

@ -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`

View File

@ -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`

View File

@ -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};

View File

@ -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)};

View File

@ -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};
`,
};
}

View File

@ -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;

View File

@ -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;

View File

@ -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)};

View File

@ -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)};
`,
};

View File

@ -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;

View File

@ -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;

View File

@ -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};

View File

@ -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),

View File

@ -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;

View File

@ -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`

View File

@ -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)};

View File

@ -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',

View File

@ -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',
}),
};

View File

@ -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',

View File

@ -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};
`,
});

View File

@ -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};
`,

View File

@ -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};
}

View File

@ -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;

View File

@ -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;

View File

@ -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};

View File

@ -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;

View File

@ -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({

View File

@ -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;

View File

@ -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};

View File

@ -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,

View File

@ -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};

View File

@ -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,
}),
};
};

View File

@ -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 {

View File

@ -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`,

View File

@ -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 {

View File

@ -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,
}),
};
};

View File

@ -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`

View File

@ -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 {

View File

@ -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%',

View File

@ -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({

View File

@ -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({

View File

@ -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,
}),
};
};

View File

@ -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;
`,

View File

@ -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;
`,

View File

@ -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`

View File

@ -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)};

View File

@ -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;

View File

@ -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;

View File

@ -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({

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