Skip to content

style fixes for dashboards #197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 25, 2025
Merged

style fixes for dashboards #197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/grafana-data/src/themes/createColors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,13 +172,13 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {

primary = {
main: '#FF570AE5',
border: '#D9D9C8',
border: '#D7D7C7',
text: '#101828',
};

text = {
primary: '#101828',
secondary: '#344054',
secondary: '#363636',
disabled: '#9DA7B8',
link: '#FF4702',
maxContrast: palette.black,
Expand Down Expand Up @@ -220,9 +220,9 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
};

background = {
primary: '#F5F5F5',
primary: '#FFFFFF',
canvas: '#F5F5F5',
secondary: '#F5f5f5',
secondary: '#FFFFFF',
};

action = {
Expand Down
4 changes: 2 additions & 2 deletions packages/grafana-data/src/themes/createTypography.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,8 @@ export interface ThemeTypographyInput {
htmlFontSize?: number;
}

const defaultFontFamily = '"Poppins", Inter, Satoshi, sans-serif'; //'"Roboto", "Helvetica", "Arial", sans-serif';
const defaultFontFamilyMonospace = '"SatoshiLight", "FigtreeLight", monospace'; // "'Roboto Mono', monospace";
const defaultFontFamily = '"Work Sans", Inter, Satoshi, sans-serif';
const defaultFontFamilyMonospace = '"SatoshiLight", "FigtreeLight", monospace';

export function createTypography(colors: ThemeColors, typographyInput: ThemeTypographyInput = {}): ThemeTypography {
const {
Expand Down
16 changes: 8 additions & 8 deletions packages/grafana-ui/src/components/Pagination/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
import { useMemo } from 'react';

import { useStyles2 } from '../../themes';
import { Button, ButtonVariant } from '../Button';
import { Button } from '../Button';
import { Icon } from '../Icon/Icon';

export interface Props {
Expand Down Expand Up @@ -34,17 +34,17 @@ export const Pagination = ({
const pages = [...new Array(numberOfPages).keys()];

const condensePages = numberOfPages > pageLengthToCondense;
const getListItem = (page: number, variant: 'primary' | 'secondary') => (
const getListItem = (page: number, fill?: 'outline') => (
<li key={page} className={styles.item}>
<Button size="sm" variant={variant} onClick={() => onNavigate(page)}>
<Button size="sm" onClick={() => onNavigate(page)} fill={fill}>
{page}
</Button>
</li>
);

return pages.reduce<JSX.Element[]>((pagesToRender, pageIndex) => {
const page = pageIndex + 1;
const variant: ButtonVariant = page === currentPage ? 'primary' : 'secondary';
const fill: 'outline' | undefined = page === currentPage ? undefined : 'outline';

// The indexes at which to start and stop condensing pages
const lowerBoundIndex = pageLengthToCondense;
Expand Down Expand Up @@ -72,7 +72,7 @@ export const Pagination = ({
(currentPageIsBetweenBounds && page >= currentPage - pageOffset && page <= currentPage + pageOffset)
) {
// Renders a button for the page
pagesToRender.push(getListItem(page, variant));
pagesToRender.push(getListItem(page, fill));
} else if (
(page === lowerBoundIndex && currentPage < lowerBoundIndex) ||
(page === upperBoundIndex && currentPage > upperBoundIndex) ||
Expand All @@ -87,7 +87,7 @@ export const Pagination = ({
);
}
} else {
pagesToRender.push(getListItem(page, variant));
pagesToRender.push(getListItem(page, fill));
}
return pagesToRender;
}, []);
Expand All @@ -104,9 +104,9 @@ export const Pagination = ({
<Button
aria-label={`previous page`}
size="sm"
variant="secondary"
onClick={() => onNavigate(currentPage - 1)}
disabled={currentPage === 1}
fill="outline"
>
<Icon name="angle-left" />
</Button>
Expand All @@ -116,7 +116,7 @@ export const Pagination = ({
<Button
aria-label={`next page`}
size="sm"
variant="secondary"
fill="outline"
onClick={() => onNavigate(currentPage + 1)}
disabled={currentPage === numberOfPages}
>
Expand Down
11 changes: 10 additions & 1 deletion packages/grafana-ui/src/themes/GlobalStyles/dashboardGrid.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,18 @@ export function getDashboardGridStyles(theme: GrafanaTheme2) {
position: 'unset !important' as 'unset',
transform: 'translate(0px, 0px) !important',
marginBottom: theme.spacing(2),
boxShadow: `0 8px 24px ${theme.colors.primary.border} !important`,
borderRadius: theme.shape.borderRadius(2),
},
'.panel-repeater-grid-item': {
height: 'auto !important',
boxShadow: `0 8px 24px ${theme.colors.primary.border} !important`,
borderRadius: theme.shape.borderRadius(2),
},
},

'.react-grid-item.react-grid-placeholder': {
boxShadow: `0 0 4px ${theme.colors.primary.border} !important`,
boxShadow: `0 8px 24px ${theme.colors.primary.border} !important`,
background: `${theme.colors.primary.transparent} !important`,
zIndex: '-1 !important',
opacity: 'unset !important',
Expand All @@ -49,6 +53,11 @@ export function getDashboardGridStyles(theme: GrafanaTheme2) {
borderBottom: `2px solid ${theme.isDark ? theme.v1.palette.gray1 : theme.v1.palette.gray3} !important`,
},

'.react-grid-item > div:first-of-type': {
boxShadow: `0 8px 24px ${theme.colors.primary.border} !important`,
borderRadius: theme.shape.borderRadius(2),
},

// Hack for preventing panel menu overlapping.
'.react-grid-item.resizing.panel, .react-grid-item.panel.dropdown-menu-open, .react-grid-item.react-draggable-dragging.panel':
{
Expand Down
8 changes: 4 additions & 4 deletions public/app/features/variables/pickers/PickerRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,9 @@ const COMMON_PICKER_LABEL_STYLE: CSSProperties = {
border: 'none',
fontWeight: 500,
fontSize: '14px',
padding: '3px 6px',
letterSpacing: '0.15px',
height: '24px',
marginTop: '2px',
padding: '12px 6px',
display: 'flex',
alignItems: 'center',
};

function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | null {
Expand All @@ -76,6 +75,7 @@ function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | nul
() => ({
...COMMON_PICKER_LABEL_STYLE,
color: mode === 'light' ? '#2D333E' : '#DBD9D7',
backgroundColor: '#F6F6F1',
}),
[mode]
);
Expand Down
8 changes: 4 additions & 4 deletions public/microfrontends/fn_dashboard/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,16 @@
<script nonce="">
window.fnData = {
themePaths: {
light: '../../../public/build/grafana.light.11edba0e518ac6df7727.css',
dark: '../../../public/build/grafana.dark.75e907ac2464bdcdeb20.css',
light: '../../../public/build/grafana.light.1225898111a2fd093893.css',
dark: '../../../public/build/grafana.dark.cd0ed8a9f2cb3824f581.css',
}
};
</script>


<script nonce="" src="../../../public/build/runtime~fn_dashboard.832e70d83875a90e9629.js" type="text/javascript"></script>
<script nonce="" src="../../../public/build/runtime~fn_dashboard.c72758889b72f840d29c.js" type="text/javascript"></script>

<script nonce="" src="../../../public/build/fn_dashboard.0ebf23b22c9b8b6b19b9.js" type="text/javascript"></script>
<script nonce="" src="../../../public/build/fn_dashboard.5bf65485c5298da38ca6.js" type="text/javascript"></script>

</body>
</html>
2 changes: 1 addition & 1 deletion public/sass/_variables.generated.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ $height-lg: 48;
// Typography
// -------------------------
/* stylelint-disable-next-line string-quotes */
$font-family-sans-serif: "Poppins", Inter, Satoshi, sans-serif;
$font-family-sans-serif: "Work Sans", Inter, Satoshi, sans-serif;
/* stylelint-disable-next-line string-quotes */
$font-family-monospace: "SatoshiLight", "FigtreeLight", monospace;

Expand Down
48 changes: 24 additions & 24 deletions public/sass/_variables.light.generated.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ $gray-7: #fbfbfb;
$white: #ffffff;

$layer0: #F5F5F5;
$layer1: #F5F5F5;
$layer2: #F5f5f5;
$layer1: #FFFFFF;
$layer2: #FFFFFF;

$divider: rgba(45, 51, 62, 0.12);
$border0: rgba(45, 51, 62, 0.12);
Expand Down Expand Up @@ -99,8 +99,8 @@ $dashboard-bg: #F5F5F5;

$text-color: #101828;
$text-color-strong: #000000;
$text-color-semi-weak: #344054;
$text-color-weak: #344054;
$text-color-semi-weak: #363636;
$text-color-weak: #363636;
$text-color-faint: #9DA7B8;
$text-color-emphasis: #000000;
$text-blue: #101828;
Expand Down Expand Up @@ -128,7 +128,7 @@ $hr-border-color: $gray-4 !default;

// Panel
// -------------------------
$panel-bg: #F5F5F5;
$panel-bg: #FFFFFF;
$panel-border: 1px solid rgba(45, 51, 62, 0.12);
$panel-header-hover-bg: rgba(45, 51, 62, 0.12);
$panel-box-shadow: none;
Expand All @@ -142,16 +142,16 @@ $page-header-border-color: #F5F5F5;
$divider-border-color: $gray-2;

// Graphite Target Editor
$tight-form-func-bg: #F5f5f5;
$tight-form-func-highlight-bg: #f0f0f0;
$tight-form-func-bg: #FFFFFF;
$tight-form-func-highlight-bg: #fafafa;

$modal-backdrop-bg: #F5F5F5;
$modal-backdrop-bg: #FFFFFF;
$code-tag-bg: $gray-6;
$code-tag-border: $gray-4;

// cards
$card-background: #F5f5f5;
$card-background-hover: #F5f5f5;
$card-background: #FFFFFF;
$card-background-hover: #FFFFFF;
$card-shadow: none;

// Lists
Expand All @@ -168,10 +168,10 @@ $scrollbarBorder: $gray-7;

// Tables
// -------------------------
$table-bg-accent: #F5f5f5;
$table-bg-accent: #FFFFFF;
$table-border: rgba(45, 51, 62, 0.30);
$table-bg-odd: rgb(240, 240, 240);
$table-bg-hover: rgb(232, 232, 232);
$table-bg-odd: rgb(249, 249, 249);
$table-bg-hover: rgb(242, 242, 242);

// Buttons
// -------------------------
Expand Down Expand Up @@ -207,7 +207,7 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);

// Forms
// -------------------------
$input-bg: #F5F5F5;
$input-bg: #FFFFFF;
$input-bg-disabled: rgba(45, 51, 62, 0.04);

$input-color: #101828;
Expand All @@ -216,7 +216,7 @@ $input-box-shadow: none;
$input-border-focus: #5794f2;
$input-box-shadow-focus: #5794f2;
$input-color-placeholder: #9DA7B8;
$input-label-bg: #F5f5f5;
$input-label-bg: #FFFFFF;
$input-color-select-arrow: #7b8087;

// search
Expand All @@ -229,7 +229,7 @@ $typeahead-selected-color: $yellow;

// Dropdowns
// -------------------------
$dropdownBackground: #F5F5F5;
$dropdownBackground: #FFFFFF;
$dropdownBorder: rgba(45, 51, 62, 0.12);
$dropdownDividerTop: rgba(45, 51, 62, 0.12);
$dropdownDividerBottom: rgba(45, 51, 62, 0.12);
Expand Down Expand Up @@ -263,7 +263,7 @@ $side-menu-header-color: #e9edf2;

// Menu dropdowns
// -------------------------
$menu-dropdown-bg: #F5F5F5;
$menu-dropdown-bg: #FFFFFF;
$menu-dropdown-hover-bg: rgba(45, 51, 62, 0.12);
$menu-dropdown-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);

Expand All @@ -283,16 +283,16 @@ $alert-warning-bg: #F3D086;
$alert-info-bg: #F3D086;

// Tooltips and popovers
$tooltipBackground: #F5f5f5;
$tooltipBackground: #FFFFFF;
$tooltipColor: #101828;
$tooltipArrowColor: #F5f5f5;
$tooltipArrowColor: #FFFFFF;
$tooltipBackgroundError: #E0226E;
$tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.2);

$popover-bg: #F5F5F5;
$popover-bg: #FFFFFF;
$popover-color: #101828;
$popover-border-color: rgba(45, 51, 62, 0.12);
$popover-header-bg: #F5f5f5;
$popover-header-bg: #FFFFFF;
$popover-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);

$graph-tooltip-bg: $gray-5;
Expand All @@ -305,7 +305,7 @@ $popover-error-bg: $btn-danger-bg;
$popover-help-bg: $tooltipBackground;
$popover-help-color: $tooltipColor;

$popover-code-bg: #F5F5F5;
$popover-code-bg: #FFFFFF;
$popover-code-boxshadow: 0 0 5px $gray60;

// images
Expand Down Expand Up @@ -338,9 +338,9 @@ $diff-label-bg: rgba(45, 51, 62, 0.12);
$diff-label-fg: $gray-2;

$diff-arrow-color: $dark-2;
$diff-group-bg: #F5f5f5;
$diff-group-bg: #FFFFFF;

$diff-json-bg: #F5f5f5;
$diff-json-bg: #FFFFFF;
$diff-json-fg: #101828;

$diff-json-added: $blue-shade;
Expand Down