mirror of https://github.com/grafana/grafana
Theme: Typography variables overhaul, theme cleanup, improvents to storybook ThemeColors component (#23531)
* Began text theme refactoring * Consolidating blue varaibles * Theme: Typography overhaul and theme cleanup * Theme updates, alignment and fixes * Updated snapshots * Restored template variable class * Updates * added container * Updated snapshotpull/23574/head
Torkel Ödegaard
6 years ago
committed by
GitHub
parent
16bc5c118d
commit
bc60f9c403
@ -1,76 +1,15 @@ |
|||||||
import React from 'react'; |
import React from 'react'; |
||||||
import { css, cx } from 'emotion'; |
import { ThemeColors } from './ThemeColors'; |
||||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; |
|
||||||
import { useTheme } from '../../themes/ThemeContext'; |
|
||||||
|
|
||||||
export default { |
export default { |
||||||
title: 'General/ThemeColors', |
title: 'General/ThemeColors', |
||||||
component: () => {}, |
component: ThemeColors, |
||||||
decorators: [withCenteredStory], |
decorators: [], |
||||||
parameters: { |
parameters: { |
||||||
docs: {}, |
docs: {}, |
||||||
}, |
}, |
||||||
}; |
}; |
||||||
|
|
||||||
interface DemoElement { |
export const ThemeColorsDemo = () => { |
||||||
name: string; |
return <ThemeColors />; |
||||||
bg: string; |
|
||||||
border?: string; |
|
||||||
textColor?: string; |
|
||||||
child?: DemoElement; |
|
||||||
} |
|
||||||
|
|
||||||
function renderElement(el: DemoElement) { |
|
||||||
const style = cx( |
|
||||||
css` |
|
||||||
padding: 36px; |
|
||||||
background: ${el.bg}; |
|
||||||
`,
|
|
||||||
el.border |
|
||||||
? css` |
|
||||||
border: 1px solid ${el.border}; |
|
||||||
` |
|
||||||
: null |
|
||||||
); |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className={style}> |
|
||||||
<div |
|
||||||
className={css` |
|
||||||
padding: 8px; |
|
||||||
`}
|
|
||||||
> |
|
||||||
{el.name} |
|
||||||
</div> |
|
||||||
{el.child && renderElement(el.child)} |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export const BackgroundsAndBorders = () => { |
|
||||||
const theme = useTheme(); |
|
||||||
|
|
||||||
const lvl1 = { |
|
||||||
name: 'dashbord background', |
|
||||||
bg: theme.colors.dashboardBg, |
|
||||||
child: { |
|
||||||
name: 'colors.bg1', |
|
||||||
bg: theme.colors.bg1, |
|
||||||
border: theme.colors.border1, |
|
||||||
child: { |
|
||||||
name: |
|
||||||
'colors.bg2 background used for elements placed on colors.bg1. Using colors.border1 should be used on elements placed ontop of bg1', |
|
||||||
bg: theme.colors.bg2, |
|
||||||
border: theme.colors.border2, |
|
||||||
child: { |
|
||||||
name: |
|
||||||
'colors.bg3 background used for elements placed on colors.bg2 with colors.border2 used for elements placed on bg2', |
|
||||||
bg: theme.colors.bg3, |
|
||||||
border: theme.colors.border2, |
|
||||||
}, |
|
||||||
}, |
|
||||||
}, |
|
||||||
}; |
|
||||||
|
|
||||||
return <div>{renderElement(lvl1)}</div>; |
|
||||||
}; |
}; |
||||||
|
|||||||
@ -0,0 +1,143 @@ |
|||||||
|
import React, { FC } from 'react'; |
||||||
|
import { css, cx } from 'emotion'; |
||||||
|
import { useTheme } from '../../themes/ThemeContext'; |
||||||
|
import { Icon } from '../Icon/Icon'; |
||||||
|
import { HorizontalGroup } from '../Layout/Layout'; |
||||||
|
|
||||||
|
interface DemoBoxProps { |
||||||
|
bg: string; |
||||||
|
border?: string; |
||||||
|
textColor?: string; |
||||||
|
} |
||||||
|
|
||||||
|
const DemoBox: FC<DemoBoxProps> = ({ bg, border, children }) => { |
||||||
|
const style = cx( |
||||||
|
css` |
||||||
|
padding: 16px 32px; |
||||||
|
background: ${bg}; |
||||||
|
width: 100%; |
||||||
|
`,
|
||||||
|
border |
||||||
|
? css` |
||||||
|
border: 1px solid ${border}; |
||||||
|
` |
||||||
|
: null |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={style}> |
||||||
|
<div |
||||||
|
className={css` |
||||||
|
padding-bottom: 16px; |
||||||
|
`}
|
||||||
|
> |
||||||
|
{name} |
||||||
|
</div> |
||||||
|
{children} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const DemoText: FC<{ color?: string; bold?: boolean; size?: number }> = ({ color, bold, size, children }) => { |
||||||
|
const style = css` |
||||||
|
padding: 4px; |
||||||
|
color: ${color ?? 'inherit'}; |
||||||
|
font-weight: ${bold ? 500 : 400}; |
||||||
|
font-size: ${size ?? 14}px; |
||||||
|
`;
|
||||||
|
|
||||||
|
return <div className={style}>{children}</div>; |
||||||
|
}; |
||||||
|
|
||||||
|
export const ThemeColors = () => { |
||||||
|
const theme = useTheme(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={css` |
||||||
|
width: 100%; |
||||||
|
`}
|
||||||
|
> |
||||||
|
<DemoBox bg={theme.colors.dashboardBg}> |
||||||
|
<DemoText>theme.colors.dashboardBg</DemoText> |
||||||
|
<DemoBox bg={theme.colors.bg1} border={theme.colors.border1}> |
||||||
|
<DemoText> |
||||||
|
theme.colors.bg1 is the main & preferred content background for text and elements This box is using border1 |
||||||
|
</DemoText> |
||||||
|
<DemoBox bg={theme.colors.bg2} border={theme.colors.border2}> |
||||||
|
<DemoText> |
||||||
|
colors.bg2 background used for elements placed on colors.bg1. Using colors.border1 should be used on |
||||||
|
elements placed ontop of bg1. Ths box is using border2. |
||||||
|
</DemoText> |
||||||
|
<DemoBox bg={theme.colors.bg3} border={theme.colors.border2}> |
||||||
|
<DemoText>colors.bg3 background used for elements placed on colors.bg2.</DemoText> |
||||||
|
</DemoBox> |
||||||
|
</DemoBox> |
||||||
|
</DemoBox> |
||||||
|
</DemoBox> |
||||||
|
|
||||||
|
<HorizontalGroup> |
||||||
|
<DemoBox bg={theme.colors.bodyBg}> |
||||||
|
<> |
||||||
|
Text on main body background (bg1) |
||||||
|
<DemoText color={theme.colors.textHeading} size={24}> |
||||||
|
textHeading Usually a bit bigger text <Icon name="trash-alt" /> |
||||||
|
</DemoText> |
||||||
|
<DemoText color={theme.colors.text}> |
||||||
|
text <Icon name="trash-alt" /> |
||||||
|
</DemoText> |
||||||
|
<DemoText color={theme.colors.textSemiWeak}> |
||||||
|
textSemiWeak <Icon name="trash-alt" /> |
||||||
|
</DemoText> |
||||||
|
<DemoText color={theme.colors.textWeak}> |
||||||
|
textWeak <Icon name="trash-alt" /> |
||||||
|
</DemoText> |
||||||
|
<DemoText color={theme.colors.textFaint}> |
||||||
|
textFaint <Icon name="trash-alt" /> |
||||||
|
</DemoText> |
||||||
|
<DemoText color={theme.colors.textStrong}> |
||||||
|
textStrong <Icon name="trash-alt" /> |
||||||
|
</DemoText> |
||||||
|
<DemoText color={theme.colors.formInputText}> |
||||||
|
formInputText <Icon name="trash-alt" /> |
||||||
|
</DemoText> |
||||||
|
<DemoText color={theme.colors.formLabel} bold> |
||||||
|
formLabel is also bold <Icon name="trash-alt" /> |
||||||
|
</DemoText> |
||||||
|
<DemoText color={theme.colors.formDescription}> |
||||||
|
formDescription <Icon name="trash-alt" /> |
||||||
|
</DemoText> |
||||||
|
<DemoText color={theme.colors.textBlue} bold> |
||||||
|
textBlue usually bold |
||||||
|
</DemoText> |
||||||
|
<DemoText color={theme.colors.link}>link</DemoText> |
||||||
|
<DemoText color={theme.colors.linkHover}>linkHover</DemoText> |
||||||
|
<DemoText color={theme.colors.linkDisabled}>linkDisabled</DemoText> |
||||||
|
<DemoText color={theme.colors.linkExternal}>linkExternal</DemoText> |
||||||
|
</> |
||||||
|
</DemoBox> |
||||||
|
<DemoBox bg={theme.colors.formInputBg}> |
||||||
|
This is inside form input bg (same as dashboard bg) |
||||||
|
<DemoText color={theme.colors.formInputText}>formInputText</DemoText> |
||||||
|
<DemoText color={theme.colors.formInputDisabledText}>formInputDisabledText</DemoText> |
||||||
|
<DemoText color={theme.colors.formInputPlaceholderText}>formInputPlaceholderText</DemoText> |
||||||
|
</DemoBox> |
||||||
|
<DemoBox bg={theme.colors.bg2}> |
||||||
|
Inside bg2 |
||||||
|
<DemoText color={theme.colors.text}> |
||||||
|
text <Icon name="trash-alt" /> |
||||||
|
</DemoText> |
||||||
|
<DemoText color={theme.colors.textWeak}> |
||||||
|
textWeak <Icon name="trash-alt" /> |
||||||
|
</DemoText> |
||||||
|
<DemoText color={theme.colors.textFaint}> |
||||||
|
textFaint <Icon name="trash-alt" /> |
||||||
|
</DemoText> |
||||||
|
<DemoText color={theme.colors.textStrong}> |
||||||
|
textStrong <Icon name="trash-alt" /> |
||||||
|
</DemoText> |
||||||
|
</DemoBox> |
||||||
|
</HorizontalGroup> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
Loading…
Reference in new issue