IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-02 04:07:15 -06:00
Code Issues Packages Projects Releases Wiki Activity

Theme: Add borderTransparent to ThemeRichColor use in Box borders (#75407)

Browse Source 
* Theme: Add borderTransparent to ThemeRichColor use in Box borders

* Fix spelling

* Update comment

* Update DashboardEmpty

* Restore prev value
This commit is contained in:
Torkel Ödegaard 2023-09-27 20:19:46 +02:00 committed by GitHub
parent 6fc4e93f73
commit 6cede32535
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -294,6 +294,9 @@ export function createColors(colors: ThemeColorsInput): ThemeColors {
if (!color.contrastText) {
color.contrastText = getContrastText(color.main);
}
if (!color.borderTransparent) {
color.borderTransparent = alpha(color.border, 0.25);
}
return color as ThemeRichColor;
};

2
packages/grafana-data/src/themes/types.ts
View File

@ -49,6 +49,8 @@ export interface ThemeRichColor {
border: string;
/** Used subtly colored backgrounds */
transparent: string;
/** Used for weak colored borders like larger alert/banner boxes and smaller badges and tags */
borderTransparent: string;
/** Text color for text ontop of main */
contrastText: string;
}

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

@ -46,11 +46,11 @@ const getStyles = (theme: GrafanaTheme2, color: BadgeColor) => {
if (theme.isDark) {
bgColor = tinycolor(sourceColor).setAlpha(0.15).toString();
borderColor = tinycolor(sourceColor).darken(30).toString();
borderColor = tinycolor(sourceColor).setAlpha(0.25).toString();
textColor = tinycolor(sourceColor).lighten(15).toString();
} else {
bgColor = tinycolor(sourceColor).setAlpha(0.15).toString();
borderColor = tinycolor(sourceColor).lighten(20).toString();
borderColor = tinycolor(sourceColor).setAlpha(0.25).toString();
textColor = tinycolor(sourceColor).darken(20).toString();
}

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

@ -136,7 +136,7 @@ const customBorderColor = (color: BorderColor, theme: GrafanaTheme2) => {
case 'success':
case 'info':
case 'warning':
return theme.colors[color].border;
return theme.colors[color].borderTransparent;
default:
return color ? theme.colors.border[color] : undefined;
}

8
public/app/features/dashboard/dashgrid/DashboardEmpty.tsx
View File

@ -27,7 +27,7 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
<Flex alignItems="center" justifyContent="center">
<div className={styles.wrapper}>
<Flex alignItems="stretch" justifyContent="center" gap={4} direction="column">
<Box borderStyle="dashed" borderColor="info" padding={4}>
<Box borderColor="strong" borderStyle="dashed" padding={4}>
<Flex direction="column" alignItems="center" gap={2}>
<Text element="h1" textAlignment="center" weight="medium">
<Trans i18nKey="dashboard.empty.add-visualization-header">
@ -60,7 +60,7 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
</Box>
<Flex direction={{ xs: 'column', md: 'row' }} wrap="wrap" gap={4}>
{config.featureToggles.vizAndWidgetSplit && (
<Box borderStyle="dashed" borderColor="info" padding={3} grow={1}>
<Box borderColor="strong" borderStyle="dashed" padding={3} grow={1}>
<Flex direction="column" alignItems="center" gap={1}>
<Text element="h3" textAlignment="center" weight="medium">
<Trans i18nKey="dashboard.empty.add-widget-header">Add a widget</Trans>
@ -85,7 +85,7 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
</Flex>
</Box>
)}
<Box borderStyle="dashed" borderColor="info" padding={3} grow={1}>
<Box borderColor="strong" borderStyle="dashed" padding={3} grow={1}>
<Flex direction="column" alignItems="center" gap={1}>
<Text element="h3" textAlignment="center" weight="medium">
<Trans i18nKey="dashboard.empty.add-library-panel-header">Import panel</Trans>
@ -111,7 +111,7 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
</Button>
</Flex>
</Box>
<Box borderStyle="dashed" borderColor="info" padding={3} grow={1}>
<Box borderColor="strong" borderStyle="dashed" padding={3} grow={1}>
<Flex direction="column" alignItems="center" gap={1}>
<Text element="h3" textAlignment="center" weight="medium">
<Trans i18nKey="dashboard.empty.import-a-dashboard-header">Import a dashboard</Trans>