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: Variable name changes & progress (#33088)

Browse Source 
* Theme variable renames

* Fixed variable issue issue

* Fixed test

* fixed story

* More tweaks

* Updated snapshot
This commit is contained in:
Torkel Ödegaard
2021-04-17 19:17:18 +02:00
committed by GitHub
parent c46f992bfb
commit d62601e664
40 changed files with 219 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/core/components/PageHeader/PageHeader.tsx
View File

@@ -139,8 +139,8 @@ function renderTitle(title: string, breadcrumbs: NavModelBreadcrumb[]) {
const getStyles = (theme: GrafanaTheme) => ({
headerCanvas: css`
background: ${theme.v2.palette.layer0};
border-bottom: 1px solid ${theme.v2.palette.border0};
background: ${theme.v2.palette.background.canvas};
border-bottom: 1px solid ${theme.v2.palette.border.weak};
`,
});

4
public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
View File

@@ -2,7 +2,7 @@
exports[`Render should render component 1`] = `
<div
className="panel-container css-bopjp7"
className="panel-container css-ozhi9g"
>
<AddPanelWidgetHandle
onCancel={[Function]}
@@ -15,7 +15,7 @@ exports[`Render should render component 1`] = `
"libraryPanelsWrapper": "css-18m13of",
"noMargin": "css-u023fv",
"panelSearchInput": "css-2ug8g3",
"wrapper": "css-bopjp7",
"wrapper": "css-ozhi9g",
}
}
>

17
public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
View File

@@ -90,7 +90,7 @@ export const OptionsPaneCategory: FC<OptionsPaneCategoryProps> = React.memo(
const getStyles = (theme: GrafanaTheme) => {
return {
box: css`
border-bottom: 1px solid ${theme.v2.palette.divider};
border-bottom: 1px solid ${theme.v2.palette.border.weak};
&:last-child {
border-bottom: none;
}
@@ -102,7 +102,7 @@ const getStyles = (theme: GrafanaTheme) => {
margin-bottom: ${theme.spacing.formSpacingBase * 2}px;
`,
toggle: css`
color: ${theme.colors.textWeak};
color: ${theme.v2.palette.text.secondary};
margin-right: ${theme.spacing.sm};
`,
title: css`
@@ -113,23 +113,22 @@ const getStyles = (theme: GrafanaTheme) => {
display: flex;
cursor: pointer;
align-items: baseline;
padding: ${theme.spacing.sm};
padding: ${theme.v2.spacing(1)};
color: ${theme.v2.palette.text.primary};
font-weight: ${theme.typography.weight.semibold};
font-weight: ${theme.v2.typography.fontWeightMedium};
&:hover {
background: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.03)};
background: ${theme.v2.palette.emphasize(theme.v2.palette.background.primary, 0.03)};
}
`,
headerExpanded: css`
color: ${theme.v2.palette.text.primary};
`,
headerNested: css`
padding-left: 0;
padding-right: 0;
padding: ${theme.v2.spacing(0.5, 0, 0.5, 0)};
`,
body: css`
padding: ${theme.spacing.sm} ${theme.spacing.md} ${theme.spacing.sm} ${theme.spacing.xl};
padding: ${theme.v2.spacing(1, 2, 1, 4)};
`,
bodyNested: css`
position: relative;
@@ -141,7 +140,7 @@ const getStyles = (theme: GrafanaTheme) => {
left: 8px;
width: 1px;
height: 100%;
background: ${theme.colors.pageHeaderBorder};
background: ${theme.v2.palette.border.weak};
}
`,
};

2
public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
View File

@@ -180,7 +180,7 @@ const getStyles = (theme: GrafanaTheme) => ({
`,
mainBox: css`
background: ${theme.colors.bg1};
border: 1px solid ${theme.colors.border1};
border: 1px solid ${theme.v2.components.panel.border};
border-top: none;
flex-grow: 1;
`,

10
public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
View File

@@ -36,7 +36,7 @@ export const PanelEditorTabs: FC<PanelEditorTabsProps> = React.memo(({ panel, da
return (
<div className={styles.wrapper}>
<TabsBar className={styles.tabBar}>
<TabsBar className={styles.tabBar} hideBorder>
{tabs.map((tab) => {
return (
<Tab
@@ -91,12 +91,8 @@ const getStyles = (theme: GrafanaTheme) => {
flex-direction: column;
flex-grow: 1;
min-height: 0;
background: ${theme.colors.panelBg};
border-right: 1px solid ${theme.colors.pageHeaderBorder};
.toolbar {
background: transparent;
}
background: ${theme.v2.palette.background.primary};
border-right: 1px solid ${theme.v2.components.panel.border};
`,
};
};

4
public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx
View File

@@ -69,7 +69,7 @@ const getStyles = (theme: GrafanaTheme) => {
display: flex;
flex-shrink: 0;
cursor: pointer;
background: ${theme.v2.palette.layer2};
background: ${theme.v2.palette.background.secondary};
border-radius: ${theme.v2.shape.borderRadius()};
box-shadow: ${theme.v2.shadows.z0};
align-items: center;
@@ -83,7 +83,7 @@ const getStyles = (theme: GrafanaTheme) => {
})};
&:hover {
background: ${styleMixins.hoverColor(theme.v2.palette.layer2, theme)};
background: ${styleMixins.hoverColor(theme.v2.palette.background.secondary, theme)};
}
`,
itemContent: css`

2
public/app/features/query/components/QueryEditorRowTitle.tsx
View File

@@ -137,7 +137,7 @@ const getQueryEditorRowTitleStyles = stylesFactory((theme: GrafanaTheme) => {
&:hover {
.query-name-wrapper {
background: ${theme.v2.palette.action.hover};
border: 1px dashed ${theme.v2.palette.border1};
border: 1px dashed ${theme.v2.palette.border.medium};
}
.query-name-edit-icon {

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

@@ -64,7 +64,7 @@ $layer2: #22252b;
$divider: rgba(201, 209, 217, 0.10);
$border0: #181b1f;
$border0: rgba(201, 209, 217, 0.10);
$border1: rgba(201, 209, 217, 0.15);
// Accent colors
@@ -94,8 +94,8 @@ $critical: #e02f44;
// Scaffolding
// -------------------------
$body-bg: #181b1f;
$page-bg: #181b1f;
$body-bg: #111217;
$page-bg: #111217;
$dashboard-bg: #111217;
$text-color-strong: #fff;
@@ -137,9 +137,9 @@ $panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0
$panel-corner: $panel-bg;
// page header
$page-header-bg: #22252b;
$page-header-bg: #111217;
$page-header-shadow: inset 0px -4px 14px $dark-3;
$page-header-border-color: #181b1f;
$page-header-border-color: #111217;
$divider-border-color: $gray-1;
@@ -232,7 +232,7 @@ $typeahead-selected-color: $yellow;
// Dropdowns
// -------------------------
$dropdownBackground: #22252b;
$dropdownBorder: #181b1f;
$dropdownBorder: rgba(201, 209, 217, 0.10);
$dropdownDividerTop: rgba(201, 209, 217, 0.10);
$dropdownDividerBottom: rgba(201, 209, 217, 0.10);

10
public/sass/_variables.light.generated.scss
View File

@@ -59,7 +59,7 @@ $layer2: #F4F5F5;
$divider: rgba(36, 41, 46, 0.12);
$border0: #fff;
$border0: rgba(36, 41, 46, 0.12);
$border1: rgba(36, 41, 46, 0.30);
// Accent colors
@@ -89,8 +89,8 @@ $critical: #c4162a;
// Scaffolding
// -------------------------
$body-bg: #fff;
$page-bg: #fff;
$body-bg: #F4F5F5;
$page-bg: #F4F5F5;
$dashboard-bg: #F4F5F5;
$text-color: rgba(36, 41, 46, 1);
@@ -133,7 +133,7 @@ $panel-corner: $panel-bg;
// Page header
$page-header-bg: #F4F5F5;
$page-header-shadow: inset 0px -3px 10px $gray-6;
$page-header-border-color: #fff;
$page-header-border-color: rgba(36, 41, 46, 0.12);
$divider-border-color: $gray-2;
@@ -226,7 +226,7 @@ $typeahead-selected-color: $yellow;
// Dropdowns
// -------------------------
$dropdownBackground: #F4F5F5;
$dropdownBorder: #fff;
$dropdownBorder: rgba(36, 41, 46, 0.12);
$dropdownDividerTop: rgba(36, 41, 46, 0.12);
$dropdownDividerBottom: rgba(36, 41, 46, 0.12);