mirror of
https://github.com/grafana/grafana.git
synced 2025-02-20 11:48:34 -06:00
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:
parent
522f298b27
commit
e0587dfb30
@ -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;
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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',
|
||||
};
|
||||
|
@ -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),
|
||||
|
@ -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': {
|
||||
|
@ -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),
|
||||
|
@ -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}`,
|
||||
});
|
||||
|
@ -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`,
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
@ -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),
|
||||
|
@ -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,
|
||||
}),
|
||||
|
@ -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({
|
||||
|
@ -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,
|
||||
|
@ -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)}`,
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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,
|
||||
|
@ -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({
|
||||
|
@ -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%',
|
||||
})
|
||||
|
@ -33,7 +33,7 @@ const getStyles = (theme: GrafanaTheme2) => {
|
||||
width: '100%',
|
||||
}),
|
||||
table: css({
|
||||
borderRadius: theme.shape.borderRadius(),
|
||||
borderRadius: theme.shape.radius.default,
|
||||
width: '100%',
|
||||
|
||||
td: {
|
||||
|
@ -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)}`,
|
||||
}),
|
||||
};
|
||||
|
@ -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%',
|
||||
|
@ -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({
|
||||
|
@ -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}`,
|
||||
}),
|
||||
};
|
||||
|
@ -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',
|
||||
|
@ -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',
|
||||
|
@ -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,
|
||||
|
@ -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}`,
|
||||
|
@ -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,
|
||||
|
@ -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}`,
|
||||
|
@ -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',
|
||||
|
@ -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),
|
||||
}),
|
||||
};
|
||||
|
@ -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
|
||||
|
||||
|
@ -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,
|
||||
},
|
||||
}),
|
||||
|
@ -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,
|
||||
},
|
||||
}),
|
||||
|
@ -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%;
|
||||
|
@ -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;
|
||||
|
@ -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,
|
||||
|
@ -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`
|
||||
|
@ -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;
|
||||
|
@ -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};
|
||||
`,
|
||||
|
@ -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>
|
||||
|
@ -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};
|
||||
`,
|
||||
});
|
||||
|
||||
|
@ -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};
|
||||
|
@ -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`
|
||||
|
@ -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};
|
||||
|
@ -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;
|
||||
|
@ -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};
|
||||
|
@ -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};
|
||||
`,
|
||||
|
@ -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``,
|
||||
});
|
||||
|
@ -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;
|
||||
|
@ -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};
|
||||
|
||||
|
@ -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;
|
||||
`,
|
||||
|
@ -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`
|
||||
|
@ -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`
|
||||
|
@ -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};
|
||||
|
@ -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)};
|
||||
|
@ -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};
|
||||
`,
|
||||
};
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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)};
|
||||
|
@ -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)};
|
||||
`,
|
||||
};
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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};
|
||||
|
||||
|
@ -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),
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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`
|
||||
|
@ -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)};
|
||||
|
@ -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',
|
||||
|
@ -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',
|
||||
}),
|
||||
};
|
||||
|
@ -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',
|
||||
|
@ -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};
|
||||
`,
|
||||
});
|
||||
|
@ -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};
|
||||
`,
|
||||
|
@ -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};
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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};
|
||||
|
@ -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;
|
||||
|
@ -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({
|
||||
|
@ -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;
|
||||
|
@ -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};
|
||||
|
||||
|
@ -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,
|
||||
|
@ -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};
|
||||
|
@ -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,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
@ -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 {
|
||||
|
@ -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`,
|
||||
|
@ -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 {
|
||||
|
@ -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,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
@ -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`
|
||||
|
@ -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 {
|
||||
|
@ -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%',
|
||||
|
@ -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({
|
||||
|
@ -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({
|
||||
|
@ -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,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
@ -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;
|
||||
`,
|
||||
|
@ -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;
|
||||
`,
|
||||
|
@ -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`
|
||||
|
@ -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)};
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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
Loading…
Reference in New Issue
Block a user