From 3c1e7a5f050223e530973f246ad1d34d0326bcc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 15 Apr 2021 08:45:19 +0200 Subject: [PATCH] Theme: tweaking dark theme colors (#33007) --- packages/grafana-data/src/themes/colors.ts | 2 +- .../grafana-data/src/themes/createShadows.ts | 8 ++++---- .../grafana-ui/src/components/Alert/Alert.tsx | 1 - .../src/themes/_variables.dark.scss.tmpl.ts | 2 +- packages/grafana-ui/src/themes/mixins.ts | 6 +----- public/sass/_variables.dark.generated.scss | 18 +++++++++--------- 6 files changed, 16 insertions(+), 21 deletions(-) diff --git a/packages/grafana-data/src/themes/colors.ts b/packages/grafana-data/src/themes/colors.ts index 24115501d39..1465463fd50 100644 --- a/packages/grafana-data/src/themes/colors.ts +++ b/packages/grafana-data/src/themes/colors.ts @@ -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', diff --git a/packages/grafana-data/src/themes/createShadows.ts b/packages/grafana-data/src/themes/createShadows.ts index 56351b90043..6a8646b45d5 100644 --- a/packages/grafana-data/src/themes/createShadows.ts +++ b/packages/grafana-data/src/themes/createShadows.ts @@ -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), diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx index 93029ab4d94..c129e9ac992 100644 --- a/packages/grafana-ui/src/components/Alert/Alert.tsx +++ b/packages/grafana-ui/src/components/Alert/Alert.tsx @@ -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; diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index e5dc862f54e..f1bc76967f2 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -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}; diff --git a/packages/grafana-ui/src/themes/mixins.ts b/packages/grafana-ui/src/themes/mixins.ts index 204ab41e207..77fb8eaa39c 100644 --- a/packages/grafana-ui/src/themes/mixins.ts +++ b/packages/grafana-ui/src/themes/mixins.ts @@ -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}; - } `; } diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index 732582c6b18..917ed2b3aa6 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -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;