IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Theme: tweaking dark theme colors (#33007)

Browse Source
This commit is contained in:
Torkel Ödegaard 2021-04-15 08:45:19 +02:00 committed by GitHub
parent bcd0958849
commit 3c1e7a5f05
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 16 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,7 @@ export const colors = {
gray25: '#2c3235',
gray15: '#22252b', //'#202226',
gray10: '#181b1f', // old '#141619',
gray05: '#0d0f16', // old '#0b0c0e',
gray05: '#111217', // old '#0b0c0e',
// new from figma,
darkLayer0: '#18181A',

8
packages/grafana-data/src/themes/createShadows.ts
View File

@ -10,9 +10,9 @@ export interface ThemeShadows {
}
function createDarkShadow(...px: number[]) {
const shadowKeyUmbraOpacity = 0.5;
const shadowKeyPenumbraOpacity = 0.4;
const shadowAmbientShadowOpacity = 0.3;
const shadowKeyUmbraOpacity = 0.2;
const shadowKeyPenumbraOpacity = 0.15;
const shadowAmbientShadowOpacity = 0.1;
return [
`${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`,
@ -38,7 +38,7 @@ export function createShadows(palette: ThemePalette): ThemeShadows {
if (palette.mode === 'dark') {
return {
z0: createDarkShadow(0, 1, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0),
z1: createDarkShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0),
z1: createDarkShadow(0, 1, 1, -1, 0, 1, 2, 0, 0, 1, 3, 0),
z2: createDarkShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0),
z3: createDarkShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0),
z4: createDarkShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2),

1
packages/grafana-ui/src/components/Alert/Alert.tsx
View File

@ -74,7 +74,6 @@ const getStyles = (theme: GrafanaTheme, severity: AlertVariant, elevated?: boole
return {
alert: css`
flex-grow: 1;
margin-bottom: ${theme.v2.spacing(0.5)};
position: relative;
border-radius: ${theme.v2.shape.borderRadius()};
display: flex;

2
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
View File

@ -253,7 +253,7 @@ $side-menu-bg: $panel-bg;
$side-menu-bg-mobile: $panel-bg;
$side-menu-border: none;
$side-menu-item-hover-bg: ${theme.colors.bg2};
$side-menu-shadow: 0 0 20px black;
$side-menu-shadow: 0 0 30px #111;
$side-menu-icon-color: ${theme.palette.gray70};
$side-menu-header-color: ${theme.colors.text};

6
packages/grafana-ui/src/themes/mixins.ts
View File

@ -19,16 +19,12 @@ export function hoverColor(color: string, theme: GrafanaTheme): string {
export function listItem(theme: GrafanaTheme): string {
return `
background: ${theme.colors.bg2};
background: ${theme.colors.bg2};
&:hover {
background: ${hoverColor(theme.colors.bg2, theme)};
}
box-shadow: ${theme.shadows.listItem};
border-radius: ${theme.border.radius.md};
a {
color: ${theme.v2.palette.text.primary};
}
`;
}

18
public/sass/_variables.dark.generated.scss
View File

@ -58,7 +58,7 @@ $gray-6: #f4f5f8;
$input-black: #0b0c0e;
$white: #ffffff;
$layer0: #0d0f16;
$layer0: #111217;
$layer1: #181b1f;
$layer2: #22252b;
@ -96,12 +96,12 @@ $critical: #e02f44;
// -------------------------
$body-bg: #181b1f;
$page-bg: #181b1f;
$dashboard-bg: #0d0f16;
$dashboard-bg: #111217;
$text-color-strong: #fff;
$text-color: rgba(255, 255, 255, 0.77);
$text-color-semi-weak: rgba(255, 255, 255, 0.55);
$text-color-weak: rgba(255, 255, 255, 0.55);
$text-color-semi-weak: rgba(255, 255, 255, 0.50);
$text-color-weak: rgba(255, 255, 255, 0.50);
$text-color-faint: rgba(255, 255, 255, 0.35);
$text-color-emphasis: #fff;
$text-blue: #33a2e5;
@ -133,7 +133,7 @@ $hr-border-color: $dark-9;
$panel-bg: #181b1f;
$panel-border: #181b1f;
$panel-header-hover-bg: rgba(255, 255, 255, 0.08);
$panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.5),0px 1px 1px 0px rgba(0,0,0,0.4),0px 1px 3px 0px rgba(0,0,0,0.3);
$panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.15),0px 1px 3px 0px rgba(0,0,0,0.1);
$panel-corner: $panel-bg;
// page header
@ -256,7 +256,7 @@ $side-menu-bg: $panel-bg;
$side-menu-bg-mobile: $panel-bg;
$side-menu-border: none;
$side-menu-item-hover-bg: #22252b;
$side-menu-shadow: 0 0 20px black;
$side-menu-shadow: 0 0 30px #111;
$side-menu-icon-color: #9fa7b3;
$side-menu-header-color: rgba(255, 255, 255, 0.77);
@ -264,7 +264,7 @@ $side-menu-header-color: rgba(255, 255, 255, 0.77);
// -------------------------
$menu-dropdown-bg: #22252b;
$menu-dropdown-hover-bg: rgba(255, 255, 255, 0.08);
$menu-dropdown-shadow: 0px 2px 4px -1px rgba(0,0,0,0.5),0px 4px 5px 0px rgba(0,0,0,0.4),0px 1px 10px 0px rgba(0,0,0,0.3);
$menu-dropdown-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.15),0px 1px 10px 0px rgba(0,0,0,0.1);
// Tabs
// -------------------------
@ -291,13 +291,13 @@ $tooltipBackground: #22252b;
$tooltipColor: rgba(255, 255, 255, 0.77);
$tooltipArrowColor: #22252b;
$tooltipBackgroundError: #D10E5C;
$tooltipShadow: 0px 3px 1px -2px rgba(0,0,0,0.5),0px 2px 2px 0px rgba(0,0,0,0.4),0px 1px 5px 0px rgba(0,0,0,0.3);
$tooltipShadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.15),0px 1px 5px 0px rgba(0,0,0,0.1);
$popover-bg: #22252b;
$popover-color: rgba(255, 255, 255, 0.77);
$popover-border-color: rgba(218,224,254,0.15);
$popover-header-bg: #22252b;
$popover-shadow: 0px 5px 5px -3px rgba(0,0,0,0.5),0px 8px 10px 1px rgba(0,0,0,0.4),0px 3px 14px 2px rgba(0,0,0,0.3);
$popover-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.15),0px 3px 14px 2px rgba(0,0,0,0.1);
$popover-help-bg: $tooltipBackground;
$popover-help-color: $text-color;