mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: Use theme.shape.radius.circle everywhere (#70896)
* use theme.shape.radius.circle everywhere * add useTheme2 import
This commit is contained in:
parent
890316c105
commit
9ee2cc742a
@ -70,7 +70,7 @@ const getStyles = (
|
|||||||
height: swatchSize,
|
height: swatchSize,
|
||||||
background: `${color}`,
|
background: `${color}`,
|
||||||
border,
|
border,
|
||||||
borderRadius: '50%',
|
borderRadius: theme.shape.radius.circle,
|
||||||
outlineOffset: '1px',
|
outlineOffset: '1px',
|
||||||
outline: isFocusVisible ? `2px solid ${theme.colors.primary.main}` : 'none',
|
outline: isFocusVisible ? `2px solid ${theme.colors.primary.main}` : 'none',
|
||||||
boxShadow: isSelected
|
boxShadow: isSelected
|
||||||
|
@ -66,7 +66,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
|
|||||||
width: 6px;
|
width: 6px;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
background-color: ${theme.colors.text.disabled};
|
background-color: ${theme.colors.text.disabled};
|
||||||
border-radius: 50%;
|
border-radius: ${theme.shape.radius.circle};
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
|
@ -234,7 +234,7 @@ const getStyles = (theme: GrafanaTheme2) => {
|
|||||||
`,
|
`,
|
||||||
highlight: css`
|
highlight: css`
|
||||||
background-color: ${theme.colors.success.main};
|
background-color: ${theme.colors.success.main};
|
||||||
border-radius: 50%;
|
border-radius: ${theme.shape.radius.circle};
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -32,7 +32,7 @@ function getStyles(theme: GrafanaTheme2) {
|
|||||||
width: theme.spacing(3),
|
width: theme.spacing(3),
|
||||||
}),
|
}),
|
||||||
round: css({
|
round: css({
|
||||||
borderRadius: '50%',
|
borderRadius: theme.shape.radius.circle,
|
||||||
}),
|
}),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -22,7 +22,7 @@ const getStyles = (theme: GrafanaTheme2) => {
|
|||||||
return {
|
return {
|
||||||
highlight: css`
|
highlight: css`
|
||||||
background-color: ${theme.colors.success.main};
|
background-color: ${theme.colors.success.main};
|
||||||
border-radius: 50%;
|
border-radius: ${theme.shape.radius.circle};
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -99,7 +99,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
|
|||||||
profileButton: css({
|
profileButton: css({
|
||||||
padding: theme.spacing(0, 0.25),
|
padding: theme.spacing(0, 0.25),
|
||||||
img: {
|
img: {
|
||||||
borderRadius: '50%',
|
borderRadius: theme.shape.radius.circle,
|
||||||
height: '24px',
|
height: '24px',
|
||||||
marginRight: 0,
|
marginRight: 0,
|
||||||
width: '24px',
|
width: '24px',
|
||||||
|
@ -2,7 +2,7 @@ import { css } from '@emotion/css';
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { GrafanaTheme2 } from '@grafana/data';
|
import { GrafanaTheme2 } from '@grafana/data';
|
||||||
import { useStyles2 } from '@grafana/ui';
|
import { useStyles2, useTheme2 } from '@grafana/ui';
|
||||||
|
|
||||||
const title = { fontWeight: 500, fontSize: '26px', lineHeight: '123%' };
|
const title = { fontWeight: 500, fontSize: '26px', lineHeight: '123%' };
|
||||||
|
|
||||||
@ -77,6 +77,7 @@ interface CircleProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const Circle = ({ size, style, children }: React.PropsWithChildren<CircleProps>) => {
|
export const Circle = ({ size, style, children }: React.PropsWithChildren<CircleProps>) => {
|
||||||
|
const theme = useTheme2();
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
@ -85,7 +86,7 @@ export const Circle = ({ size, style, children }: React.PropsWithChildren<Circle
|
|||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
right: 0,
|
right: 0,
|
||||||
borderRadius: '50%',
|
borderRadius: theme.shape.radius.circle,
|
||||||
...style,
|
...style,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
@ -57,7 +57,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
|
|||||||
width: ${theme.spacing(4)};
|
width: ${theme.spacing(4)};
|
||||||
height: ${theme.spacing(4)};
|
height: ${theme.spacing(4)};
|
||||||
line-height: ${theme.spacing(4)};
|
line-height: ${theme.spacing(4)};
|
||||||
border-radius: 100%;
|
border-radius: ${theme.shape.radius.circle};
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: ${theme.colors.text.maxContrast};
|
color: ${theme.colors.text.maxContrast};
|
||||||
background-color: ${theme.colors.background.canvas};
|
background-color: ${theme.colors.background.canvas};
|
||||||
|
@ -28,7 +28,7 @@ const getStyles = (theme: GrafanaTheme2) => {
|
|||||||
const common: CSSObject = {
|
const common: CSSObject = {
|
||||||
width: 8,
|
width: 8,
|
||||||
height: 8,
|
height: 8,
|
||||||
borderRadius: '50%',
|
borderRadius: theme.shape.radius.circle,
|
||||||
marginLeft: theme.spacing(1),
|
marginLeft: theme.spacing(1),
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
top: '-1px',
|
top: '-1px',
|
||||||
|
@ -40,7 +40,7 @@ function getStyles(theme: GrafanaTheme2) {
|
|||||||
height: 10px;
|
height: 10px;
|
||||||
background: ${theme.colors.text.disabled};
|
background: ${theme.colors.text.disabled};
|
||||||
box-shadow: 0 0 2px ${theme.colors.text.disabled};
|
box-shadow: 0 0 2px ${theme.colors.text.disabled};
|
||||||
border-radius: 50%;
|
border-radius: ${theme.shape.radius.circle};
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 6px;
|
top: 6px;
|
||||||
right: 1px;
|
right: 1px;
|
||||||
|
@ -52,7 +52,7 @@ const getStyles = (theme: GrafanaTheme2) => {
|
|||||||
font-size: ${theme.typography.bodySmall.fontSize};
|
font-size: ${theme.typography.bodySmall.fontSize};
|
||||||
`,
|
`,
|
||||||
userAvatar: css`
|
userAvatar: css`
|
||||||
border-radius: 50%;
|
border-radius: ${theme.shape.radius.circle};
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
width: 22px;
|
width: 22px;
|
||||||
height: 22px;
|
height: 22px;
|
||||||
|
@ -46,7 +46,7 @@ const getStyles = memoizeOne((theme: GrafanaTheme2) => {
|
|||||||
color: ${theme.colors.text.secondary};
|
color: ${theme.colors.text.secondary};
|
||||||
padding: 0;
|
padding: 0;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: 50%;
|
border-radius: ${theme.shape.radius.circle};
|
||||||
height: ${theme.spacing(theme.components.height.sm)};
|
height: ${theme.spacing(theme.components.height.sm)};
|
||||||
width: ${theme.spacing(theme.components.height.sm)};
|
width: ${theme.spacing(theme.components.height.sm)};
|
||||||
svg {
|
svg {
|
||||||
|
@ -48,7 +48,7 @@ const getStyles = (theme: GrafanaTheme2) => {
|
|||||||
background: theme.colors.secondary.main,
|
background: theme.colors.secondary.main,
|
||||||
width: '20px',
|
width: '20px',
|
||||||
height: '20px',
|
height: '20px',
|
||||||
borderRadius: '50%',
|
borderRadius: theme.shape.radius.circle,
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
|
@ -148,7 +148,7 @@ function getStyles(theme: GrafanaTheme2) {
|
|||||||
margin: 0,
|
margin: 0,
|
||||||
padding: theme.spacing(0.5),
|
padding: theme.spacing(0.5),
|
||||||
img: {
|
img: {
|
||||||
borderRadius: '50%',
|
borderRadius: theme.shape.radius.circle,
|
||||||
width: theme.spacing(2),
|
width: theme.spacing(2),
|
||||||
height: theme.spacing(2),
|
height: theme.spacing(2),
|
||||||
},
|
},
|
||||||
|
@ -142,7 +142,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
|
|||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
border-radius: 50%;
|
border-radius: ${theme.shape.radius.circle};
|
||||||
display: none;
|
display: none;
|
||||||
z-index: 110;
|
z-index: 110;
|
||||||
`,
|
`,
|
||||||
|
@ -159,7 +159,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
|
|||||||
float: left;
|
float: left;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
border-radius: 50%;
|
border-radius: ${theme.shape.radius.circle};
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
legendItem: css`
|
legendItem: css`
|
||||||
|
@ -124,7 +124,7 @@ const getStyles = (theme: GrafanaTheme2) => {
|
|||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
avatar: css`
|
avatar: css`
|
||||||
border-radius: 50%;
|
border-radius: ${theme.shape.radius.circle};
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
margin-right: ${theme.spacing(1)};
|
margin-right: ${theme.spacing(1)};
|
||||||
|
Loading…
Reference in New Issue
Block a user