diff --git a/packages/grafana-data/src/themes/colors.ts b/packages/grafana-data/src/themes/colors.ts index 076051a289b..24115501d39 100644 --- a/packages/grafana-data/src/themes/colors.ts +++ b/packages/grafana-data/src/themes/colors.ts @@ -27,7 +27,7 @@ export const colors = { // Dashboard bg / layer 0 (light theme) gray90: '#F4F5F5', // Card bg / layer 1 - gray100: '#F7F7F8', + gray100: '#F4F5F5', // divider line gray80: '#D0D1D3', // from figma diff --git a/packages/grafana-data/src/themes/createPalette.ts b/packages/grafana-data/src/themes/createPalette.ts index e61f7820aed..23468b30817 100644 --- a/packages/grafana-data/src/themes/createPalette.ts +++ b/packages/grafana-data/src/themes/createPalette.ts @@ -69,8 +69,8 @@ export interface ThemeHoverStrengh {} export interface ThemePalette extends ThemePaletteBase { /** Returns a text color for the background */ getContrastText(background: string): string; - /* Return a hover color for any color */ - getHoverColor(color: string, hoverFactor?: number): string; + /* Brighten or darken a color by specified factor (0-1) */ + emphasize(color: string, amount?: number): string; } /** @internal */ @@ -81,7 +81,7 @@ class DarkPalette implements ThemePaletteBase> { text = { primary: 'rgba(255, 255, 255, 0.77)', - secondary: 'rgba(255, 255, 255, 0.55)', + secondary: 'rgba(255, 255, 255, 0.50)', disabled: 'rgba(255, 255, 255, 0.35)', link: colors.blueDarkText, maxContrast: colors.white, @@ -247,10 +247,6 @@ export function createPalette(palette: ThemePaletteInput): ThemePalette { return contrastText; } - function getHoverColor(color: string, factorOverride?: number) { - return emphasize(color, factorOverride ?? hoverFactor); - } - const getRichColor = ({ color, name }: GetRichColorProps): ThemePaletteColor => { color = { ...color, name }; if (!color.main) { @@ -284,7 +280,9 @@ export function createPalette(palette: ThemePaletteInput): ThemePalette { success: getRichColor({ color: success, name: 'success' }), warning: getRichColor({ color: warning, name: 'warning' }), getContrastText, - getHoverColor, + emphasize: (color: string, factor?: number) => { + return emphasize(color, factor ?? hoverFactor); + }, }, other ); diff --git a/packages/grafana-data/src/themes/createTypography.ts b/packages/grafana-data/src/themes/createTypography.ts index 623cf851193..887a1f39eca 100644 --- a/packages/grafana-data/src/themes/createTypography.ts +++ b/packages/grafana-data/src/themes/createTypography.ts @@ -25,8 +25,12 @@ export interface ThemeTypography { h6: ThemeTypographyVariant; body: ThemeTypographyVariant; + bodySmall: ThemeTypographyVariant; - /** from legacy old theme */ + /** + * @deprecated + * from legacy old theme + * */ size: { base: string; xs: string; @@ -59,8 +63,8 @@ export interface ThemeTypographyInput { htmlFontSize?: number; } -const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif'; -const defaultFontFamilyMonospace = "Menlo, Monaco, Consolas, 'Courier New', monospace"; +const defaultFontFamily = '"Inter", "Helvetica", "Arial", sans-serif'; +const defaultFontFamilyMonospace = "'Roboto Mono', monospace"; export function createTypography(palette: ThemePalette, typographyInput: ThemeTypographyInput = {}): ThemeTypography { const { @@ -71,7 +75,7 @@ export function createTypography(palette: ThemePalette, typographyInput: ThemeTy fontWeightLight = 300, fontWeightRegular = 400, fontWeightMedium = 500, - fontWeightBold = 700, + fontWeightBold = 500, // Tell Grafana-UI what's the font-size on the html element. // 16px is the default font-size used by browsers. htmlFontSize = 14, @@ -99,22 +103,20 @@ export function createTypography(palette: ThemePalette, typographyInput: ThemeTy fontFamily, fontWeight, fontSize: pxToRem(size), - // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/ lineHeight, - // The letter spacing was designed for the Roboto font-family. Using the same letter-spacing - // across font-families can cause issues with the kerning. - ...(fontFamily === defaultFontFamily ? { letterSpacing: `${round(letterSpacing / size)}em` } : {}), + letterSpacing: `${letterSpacing}em`, ...casing, }); const variants = { - h1: buildVariant(fontWeightLight, 28, 1.167, -1.5), - h2: buildVariant(fontWeightLight, 24, 1.2, -0.5), - h3: buildVariant(fontWeightRegular, 21, 1.167, 0), - h4: buildVariant(fontWeightRegular, 18, 1.235, 0.25), - h5: buildVariant(fontWeightRegular, 16, 1.334, 0), - h6: buildVariant(fontWeightMedium, 14, 1.6, 0.15), - body: buildVariant(fontWeightRegular, 14, 1.5, 0.15), + h1: buildVariant(fontWeightMedium, 28, 1.2, -0.01), + h2: buildVariant(fontWeightMedium, 24, 1.2, -0.01), + h3: buildVariant(fontWeightMedium, 21, 1.3, -0.01), + h4: buildVariant(fontWeightRegular, 18, 1.4, -0.005), + h5: buildVariant(fontWeightRegular, 16, 1.334, -0.005), + h6: buildVariant(fontWeightRegular, 14, 1.6, -0.005), + body: buildVariant(fontWeightRegular, 14, 1.5, -0.005), + bodySmall: buildVariant(fontWeightRegular, 12, 1.5, -0.005), }; const size = { @@ -139,7 +141,3 @@ export function createTypography(palette: ThemePalette, typographyInput: ThemeTy ...variants, }; } - -function round(value: number) { - return Math.round(value * 1e5) / 1e5; -} diff --git a/packages/grafana-data/src/themes/index.ts b/packages/grafana-data/src/themes/index.ts index ec2d483c1e9..ab2106cf7d8 100644 --- a/packages/grafana-data/src/themes/index.ts +++ b/packages/grafana-data/src/themes/index.ts @@ -4,7 +4,7 @@ export { ThemePalette } from './createPalette'; export { ThemeBreakpoints } from './breakpoints'; export { ThemeShadows } from './createShadows'; export { ThemeShape } from './createShape'; -export { ThemeTypography } from './createTypography'; +export { ThemeTypography, ThemeTypographyVariant } from './createTypography'; export { ThemeTransitions } from './createTransitions'; export { ThemeSpacing } from './createSpacing'; export { ThemeZIndices } from './zIndex'; diff --git a/packages/grafana-ui/.storybook/storybookTheme.ts b/packages/grafana-ui/.storybook/storybookTheme.ts index 195fc81365b..5b3ca332f00 100644 --- a/packages/grafana-ui/.storybook/storybookTheme.ts +++ b/packages/grafana-ui/.storybook/storybookTheme.ts @@ -3,6 +3,7 @@ import { create } from '@storybook/theming/create'; import lightTheme from '../src/themes/light'; import darkTheme from '../src/themes/dark'; import { GrafanaTheme } from '@grafana/data'; +import '../src/components/Icon/iconBundle'; const createTheme = (theme: GrafanaTheme) => { return create({ @@ -27,7 +28,7 @@ const createTheme = (theme: GrafanaTheme) => { // Toolbar default and active colors barTextColor: theme.v2.palette.primary.text, - barSelectedColor: theme.v2.palette.getHoverColor(theme.v2.palette.primary.text), + barSelectedColor: theme.v2.palette.emphasize(theme.v2.palette.primary.text), barBg: theme.v2.palette.layer1, // Form colors diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx index deb29615c95..712785d55ff 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx +++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx @@ -499,7 +499,6 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles // shift empty region back to fill gaps due to border radius emptyBar.left = '-3px'; - emptyBar.width = `${maxBarWidth - barWidth}px`; if (isBasic) { // Basic styles diff --git a/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap b/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap index eed60db60c9..cb2c15faf80 100644 --- a/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap +++ b/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap @@ -62,7 +62,6 @@ exports[`BarGauge Render with basic options should render 1`] = ` "flexGrow": 1, "left": "-3px", "position": "relative", - "width": "180px", } } /> diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx index b7fd20db1d6..1c28345fab5 100644 --- a/packages/grafana-ui/src/components/Card/Card.tsx +++ b/packages/grafana-ui/src/components/Card/Card.tsx @@ -151,7 +151,7 @@ const getContainerStyles = stylesFactory((theme: GrafanaTheme, disabled = false, ...(!disableHover && { '&:hover': { - background: theme.v2.palette.getHoverColor(theme.v2.palette.layer2, 0.03), + background: theme.v2.palette.emphasize(theme.v2.palette.layer2, 0.03), cursor: 'pointer', zIndex: 1, }, diff --git a/packages/grafana-ui/src/components/Icon/Icon.story.tsx b/packages/grafana-ui/src/components/Icon/Icon.story.tsx index 345faeabea5..b9a41e68b8d 100644 --- a/packages/grafana-ui/src/components/Icon/Icon.story.tsx +++ b/packages/grafana-ui/src/components/Icon/Icon.story.tsx @@ -1,6 +1,5 @@ import React, { ChangeEvent, useState } from 'react'; import { css } from '@emotion/css'; - import { Input, Field, Icon } from '@grafana/ui'; import { getAvailableIcons, IconName } from '../../types'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; @@ -8,7 +7,7 @@ import { useTheme } from '../../themes'; import mdx from './Icon.mdx'; export default { - title: 'Docs Overview/Icon', + title: 'General/Icon', component: Icon, decorators: [withCenteredStory], parameters: { diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx index f8c5f757bc8..4bbb56b37f7 100644 --- a/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx +++ b/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx @@ -2,8 +2,7 @@ import React from 'react'; import { css } from '@emotion/css'; import { IconButton } from '@grafana/ui'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; -import { useTheme } from '../../themes/ThemeContext'; -import { GrafanaTheme } from '@grafana/data'; +import { useTheme } from '../../themes'; import { IconSize, IconName } from '../../types'; import mdx from './IconButton.mdx'; @@ -19,42 +18,29 @@ export default { }; export const Simple = () => { - const theme = useTheme(); - return (
- {renderScenario( - 'dashboard', - theme, - ['sm', 'md', 'lg', 'xl', 'xxl'], - ['search', 'trash-alt', 'arrow-left', 'times'] - )} - {renderScenario('panel', theme, ['sm', 'md', 'lg', 'xl', 'xxl'], ['search', 'trash-alt', 'arrow-left', 'times'])} - {renderScenario('header', theme, ['sm', 'md', 'lg', 'xl', 'xxl'], ['search', 'trash-alt', 'arrow-left', 'times'])} + + +
); }; -function renderScenario(surface: string, theme: GrafanaTheme, sizes: IconSize[], icons: IconName[]) { - let bg = 'red'; +interface ScenarioProps { + layer: 'layer0' | 'layer1' | 'layer2'; +} - switch (surface) { - case 'dashboard': - bg = theme.colors.dashboardBg; - break; - case 'panel': - bg = theme.colors.bodyBg; - break; - case 'header': { - bg = theme.colors.pageHeaderBg; - } - } +const RenderScenario = ({ layer }: ScenarioProps) => { + const theme = useTheme(); + const sizes: IconSize[] = ['sm', 'md', 'lg', 'xl', 'xxl']; + const icons: IconName[] = ['search', 'trash-alt', 'arrow-left', 'times']; return (
-
Surface: {surface}
+
{layer}
{icons.map((icon) => { return sizes.map((size) => ( - + )); })}
); -} +}; diff --git a/packages/grafana-ui/src/components/Tabs/Tab.tsx b/packages/grafana-ui/src/components/Tabs/Tab.tsx index b104ed403da..6c8a027ab1c 100644 --- a/packages/grafana-ui/src/components/Tabs/Tab.tsx +++ b/packages/grafana-ui/src/components/Tabs/Tab.tsx @@ -31,10 +31,16 @@ export const Tab = React.forwardRef( ); + const itemClass = cx( + tabsStyles.tabItem, + active ? tabsStyles.activeStyle : tabsStyles.notActive, + !href && tabsStyles.padding + ); + return (
  • { return { tabItem: css` list-style: none; - margin-right: ${theme.v2.spacing(2)}; position: relative; display: block; color: ${theme.v2.palette.text.secondary}; @@ -72,15 +77,28 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme) => { height: 100%; color: ${theme.v2.palette.text.secondary}; } - + `, + notActive: css` a:hover, &:hover, &:focus { color: ${theme.v2.palette.text.primary}; + + &::before { + display: block; + content: ' '; + position: absolute; + left: 0; + right: 0; + height: 4px; + border-radius: 2px; + bottom: 0px; + background: ${theme.v2.palette.action.hover}; + } } `, padding: css` - padding: 11px 15px 9px; + padding: ${theme.v2.spacing(1.5, 2, 1)}; `, activeStyle: css` label: activeTabStyle; @@ -100,8 +118,8 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme) => { right: 0; height: 4px; border-radius: 2px; - bottom: 2px; - background-image: ${theme.v2.palette.gradients.brandHorizontal}; + bottom: 0px; + background-image: ${theme.v2.palette.gradients.brandHorizontal} !important; } `, }; diff --git a/packages/grafana-ui/src/components/Typography/Typography.story.tsx b/packages/grafana-ui/src/components/Typography/Typography.story.tsx new file mode 100644 index 00000000000..4069fc442a1 --- /dev/null +++ b/packages/grafana-ui/src/components/Typography/Typography.story.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { StoryExample } from '../../utils/storybook/StoryExample'; +import { VerticalGroup } from '../Layout/Layout'; +import { Typography } from './Typography'; + +export default { + title: 'General/Typography', + component: Typography, + parameters: { + docs: {}, + }, +}; + +export const Typopgraphy = () => { + return ( + + +

    h1. Heading

    +

    h2. Heading

    +

    h3. Heading

    +

    h4. Heading

    +
    h5. Heading
    +
    h6. Heading
    +     +     + ); +}; diff --git a/packages/grafana-ui/src/components/Typography/Typography.tsx b/packages/grafana-ui/src/components/Typography/Typography.tsx new file mode 100644 index 00000000000..90aa7d11379 --- /dev/null +++ b/packages/grafana-ui/src/components/Typography/Typography.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +/** @internal */ +export interface Props { + children: React.ReactNode; +} + +/** + * @internal + * TODO implementation coming + **/ +export const Typography = ({ children }: Props) => { + return

    {children}

    ; +}; + +Typography.displayName = 'Typography'; diff --git a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx new file mode 100644 index 00000000000..f63a158c5b6 --- /dev/null +++ b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Global } from '@emotion/react'; +import { useTheme } from '..'; +import { getElementStyles } from './elements'; + +/** @internal */ +export function GlobalStyles() { + const theme = useTheme(); + const types = getElementStyles(theme.v2); + + return ; +} diff --git a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts new file mode 100644 index 00000000000..cb577c68664 --- /dev/null +++ b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts @@ -0,0 +1,153 @@ +import { css } from '@emotion/react'; +import { GrafanaThemeV2, ThemeTypographyVariant } from '@grafana/data'; + +export function getElementStyles(theme: GrafanaThemeV2) { + return css` + html { + -ms-overflow-style: scrollbar; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + height: 100%; + font-size: ${theme.typography.htmlFontSize}px; + font-family: ${theme.typography.fontFamily}; + line-height: ${theme.typography.body.lineHeight}; + font-kerning: normal; + } + + body { + height: 100%; + width: 100%; + position: absolute; + color: ${theme.palette.text.primary}; + background-color: ${theme.palette.layer0}; + ${getVariantStyles(theme.typography.body)} + } + + h1, + .h1 { + ${getVariantStyles(theme.typography.h1)} + } + h2, + .h2 { + ${getVariantStyles(theme.typography.h2)} + } + h3, + .h3 { + ${getVariantStyles(theme.typography.h3)} + } + h4, + .h4 { + ${getVariantStyles(theme.typography.h4)} + } + h5, + .h5 { + ${getVariantStyles(theme.typography.h5)} + } + h6, + .h6 { + ${getVariantStyles(theme.typography.h6)} + } + + p { + margin: 0 0 ${theme.spacing(2)}; + } + + // Ex: 14px base font * 85% = about 12px + small { + font-size: ${theme.typography.bodySmall.fontSize}; + } + + b, + strong { + font-weight: ${theme.typography.fontWeightMedium}; + } + + em { + font-style: italic; + color: ${theme.palette.text.primary}; + } + + cite { + font-style: normal; + } + + // Utility classes + .muted { + color: ${theme.palette.text.secondary}; + } + + a.muted:hover, + a.muted:focus { + color: ${theme.palette.text.primary}; + } + + .text-warning { + color: ${theme.palette.warning.text}; + + &:hover, + &:focus { + color: ${theme.palette.emphasize(theme.palette.warning.text, 0.15)}; + } + } + + .text-error { + color: ${theme.palette.error.text}; + + &:hover, + &:focus { + color: ${theme.palette.emphasize(theme.palette.error.text, 0.15)}; + } + } + + .text-success { + color: $success-text-color; + + &:hover, + &:focus { + color: ${theme.palette.emphasize(theme.palette.success.text, 0.15)}; + } + } + + a { + cursor: pointer; + color: ${theme.palette.text.primary}; + text-decoration: none; + + &:focus { + outline: none; + } + + &: [disabled] { + cursor: default; + pointer-events: none !important; + } + } + + .text-link { + text-decoration: underline; + } + + .text-left { + text-align: left; + } + + .text-right { + text-align: right; + } + + .text-center { + text-align: center; + } + `; +} + +export function getVariantStyles(variant: ThemeTypographyVariant) { + return ` + margin: 0; + font-size: ${variant.fontSize}; + line-height: ${variant.lineHeight}; + font-weight: ${variant.fontWeight}; + letter-spacing: ${variant.letterSpacing}; + font-family: ${variant.fontFamily}; + margin-bottom: 0.35em; + `; +} 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 1884e2d23c1..e5dc862f54e 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -2,7 +2,6 @@ import { GrafanaTheme } from '@grafana/data'; import { renderGeneratedFileBanner } from '../utils/generatedFileBanner'; -import { styleMixins } from '.'; export const darkThemeVarsTemplate = (theme: GrafanaTheme) => `${renderGeneratedFileBanner('grafana-ui/src/themes/dark.ts', 'grafana-ui/src/themes/_variables.dark.scss.tmpl.ts')} @@ -142,8 +141,8 @@ $page-header-border-color: ${theme.colors.pageHeaderBorder}; $divider-border-color: $gray-1; // Graphite Target Editor -$tight-form-func-bg: ${theme.colors.bg2}; -$tight-form-func-highlight-bg: ${styleMixins.hoverColor(theme.colors.bg2, theme)}; +$tight-form-func-bg: ${theme.v2.palette.layer2}; +$tight-form-func-highlight-bg: ${theme.v2.palette.emphasize(theme.v2.palette.layer2, 0.03)}; $modal-backdrop-bg: ${theme.colors.bg3}; $code-tag-bg: $dark-1; @@ -151,7 +150,7 @@ $code-tag-border: $dark-9; // cards $card-background: ${theme.v2.palette.layer2}; -$card-background-hover: ${theme.v2.palette.layer2}; +$card-background-hover: ${theme.v2.palette.emphasize(theme.v2.palette.layer2, 0.03)}; $card-shadow: none; // Lists @@ -170,8 +169,8 @@ $scrollbarBorder: black; // ------------------------- $table-bg-accent: ${theme.v2.palette.layer2}; $table-border: ${theme.v2.palette.border1}; -$table-bg-odd: ${theme.v2.palette.getHoverColor(theme.v2.palette.layer1, 0.02)}; -$table-bg-hover: ${theme.v2.palette.getHoverColor(theme.v2.palette.layer1, 0.05)}; +$table-bg-odd: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.02)}; +$table-bg-hover: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.05)}; // Buttons // ------------------------- diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index e8b0325933a..30e892208a6 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -164,8 +164,8 @@ $scrollbarBorder: $gray-7; // ------------------------- $table-bg-accent: ${theme.v2.palette.layer2}; $table-border: ${theme.v2.palette.border1}; -$table-bg-odd: ${theme.v2.palette.getHoverColor(theme.v2.palette.layer1, 0.02)}; -$table-bg-hover: ${theme.v2.palette.getHoverColor(theme.v2.palette.layer1, 0.05)}; +$table-bg-odd: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.02)}; +$table-bg-hover: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.05)}; // Buttons // ------------------------- diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index dd74f5bd863..91f21bc5f40 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/packages/grafana-ui/src/themes/dark.ts @@ -56,7 +56,7 @@ const textColors = { textHeading: v2.palette.text.primary, text: v2.palette.text.primary, textSemiWeak: v2.palette.text.secondary, - textWeak: v2.palette.text.disabled, + textWeak: v2.palette.text.secondary, textFaint: v2.palette.text.disabled, textBlue: v2.palette.primary.text, }; diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index eab46d5135b..9857694420e 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/packages/grafana-ui/src/themes/default.ts @@ -31,8 +31,8 @@ const theme: GrafanaThemeCommons = { name: 'Grafana Default', typography: { fontFamily: { - sansSerif: "'Roboto', 'Helvetica Neue', Arial, sans-serif", - monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace", + sansSerif: "'Inter', 'Helvetica Neue', Arial, sans-serif", + monospace: "'Roboto Mono', monospace", }, size: { base: '14px', @@ -53,7 +53,7 @@ const theme: GrafanaThemeCommons = { light: 300, regular: 400, semibold: 500, - bold: 600, + bold: 500, }, lineHeight: { xs: 1, diff --git a/packages/grafana-ui/src/themes/index.ts b/packages/grafana-ui/src/themes/index.ts index 77f86a763fe..dab89720d78 100644 --- a/packages/grafana-ui/src/themes/index.ts +++ b/packages/grafana-ui/src/themes/index.ts @@ -3,6 +3,7 @@ import { getTheme, mockTheme } from './getTheme'; import { selectThemeVariant } from './selectThemeVariant'; export { stylesFactory } from './stylesFactory'; export { ThemeContext, withTheme, mockTheme, getTheme, selectThemeVariant, useTheme, mockThemeContext, useStyles }; +export { GlobalStyles } from './GlobalStyles/GlobalStyles'; import * as styleMixins from './mixins'; export { styleMixins }; diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts index 239ec29264b..c89b5b47874 100644 --- a/packages/grafana-ui/src/themes/light.ts +++ b/packages/grafana-ui/src/themes/light.ts @@ -55,7 +55,7 @@ const textColors = { textStrong: v2.palette.text.maxContrast, text: v2.palette.text.primary, textSemiWeak: v2.palette.text.secondary, - textWeak: v2.palette.text.disabled, + textWeak: v2.palette.text.secondary, textFaint: v2.palette.text.disabled, textBlue: v2.palette.primary.text, }; diff --git a/packages/grafana-ui/src/themes/mixins.ts b/packages/grafana-ui/src/themes/mixins.ts index 77fb8eaa39c..204ab41e207 100644 --- a/packages/grafana-ui/src/themes/mixins.ts +++ b/packages/grafana-ui/src/themes/mixins.ts @@ -19,12 +19,16 @@ 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/packages/grafana-ui/src/utils/measureText.ts b/packages/grafana-ui/src/utils/measureText.ts index 2b20a5c8ae6..13efb04b2cf 100644 --- a/packages/grafana-ui/src/utils/measureText.ts +++ b/packages/grafana-ui/src/utils/measureText.ts @@ -21,7 +21,7 @@ export function getCanvasContext() { * @beta */ export function measureText(text: string, fontSize: number): TextMetrics { - const fontStyle = `${fontSize}px 'Roboto'`; + const fontStyle = `${fontSize}px 'Inter'`; const cacheKey = text + fontStyle; const fromCache = cache[cacheKey]; diff --git a/packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx b/packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx index 59c5791fd13..82d6a0fa8ea 100644 --- a/packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx +++ b/packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { GlobalStyles } from '../../themes'; import { RenderFunction } from '../../types'; const PaddedStory: React.FunctionComponent<{}> = ({ children }) => { @@ -10,6 +11,7 @@ const PaddedStory: React.FunctionComponent<{}> = ({ children }) => { display: 'flex', }} > + {children} ); diff --git a/public/app/AppWrapper.tsx b/public/app/AppWrapper.tsx index e1c6c617797..9ff34d1656d 100644 --- a/public/app/AppWrapper.tsx +++ b/public/app/AppWrapper.tsx @@ -3,7 +3,7 @@ import { Router, Route, Redirect, Switch } from 'react-router-dom'; import { config, locationService, navigationLogger } from '@grafana/runtime'; import { Provider } from 'react-redux'; import { store } from 'app/store/store'; -import { ErrorBoundaryAlert, ModalRoot, ModalsProvider } from '@grafana/ui'; +import { ErrorBoundaryAlert, GlobalStyles, ModalRoot, ModalsProvider } from '@grafana/ui'; import { GrafanaApp } from './app'; import { getAppRoutes } from 'app/routes/routes'; import { ConfigContext, ThemeProvider } from './core/utils/ConfigProvider'; @@ -92,6 +92,7 @@ export class AppWrapper extends React.Component +
    diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx index a734c797553..ef9a2f40519 100644 --- a/public/app/core/components/PageHeader/PageHeader.tsx +++ b/public/app/core/components/PageHeader/PageHeader.tsx @@ -124,7 +124,7 @@ function renderTitle(title: string, breadcrumbs: NavModelBreadcrumb[]) { for (const bc of breadcrumbs) { if (bc.url) { breadcrumbsResult.push( - + {bc.title} ); diff --git a/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap b/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap index d0c505394dd..fa07cb3251f 100644 --- a/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap +++ b/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap @@ -2,7 +2,7 @@ exports[`MetaInfoText should render component 1`] = `
    ` has no `background-color` so we set one as a best practice. - background-color: $body-bg; - height: 100%; - width: 100%; - position: absolute; -} - // Suppress the focus outline on elements that cannot be accessed via keyboard. // This prevents an unwanted focus outline from appearing around elements that // might still respond to pointer events. @@ -90,6 +62,24 @@ body { outline: none !important; } +// This is specified in runtime Emotion GlobalStyles but we need them for the Grafana loading styles +html { + font-size: $font-size-base; + height: 100%; +} + +// This is specified in runtime Emotion GlobalStyles but we need them for the Grafana loading styles +body { + font-family: $font-family-sans-serif; + font-size: $font-size-base; + line-height: $line-height-base; + color: $text-color; + background-color: $body-bg; + height: 100%; + width: 100%; + position: absolute; +} + // // Typography // @@ -160,20 +150,6 @@ blockquote { // Links // -a { - color: $link-color; - text-decoration: $link-decoration; - - @include hover-focus { - color: $link-hover-color; - text-decoration: $link-hover-decoration; - } - - &:focus { - @include no-focus(); - } -} - // // Code // diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 3ecb80d49ab..13fec6a77ce 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -2,148 +2,6 @@ // Typography // -------------------------------------------------- -// Body text -// ------------------------- - -p { - margin: 0 0 $line-height-base / 2; -} -.lead { - margin-bottom: $line-height-base; - font-size: $font-size-base * 1.5; - font-weight: 200; - line-height: $line-height-base * 1.5; -} - -// Emphasis & misc - -// ------------------------- - -// Ex: 14px base font * 85% = about 12px -small { - font-size: $font-size-sm; -} - -b, -strong { - font-weight: $font-weight-semi-bold; -} - -em { - font-style: italic; - color: $headings-color; -} - -cite { - font-style: normal; -} - -// Utility classes -.muted { - color: $text-muted; -} -a.muted:hover, -a.muted:focus { - color: darken($text-muted, 10%); -} - -.text-warning { - color: $warning-text-color; -} -a.text-warning:hover, -a.text-warning:focus { - color: darken($warning-text-color, 10%); -} - -.text-error { - color: $error-text-color; -} -a.text-error:hover, -a.text-error:focus { - color: darken($error-text-color, 10%); -} - -.text-success { - color: $success-text-color; -} -a.text-success:hover, -a.text-success:focus { - color: darken($success-text-color, 10%); -} -a { - cursor: pointer; -} - -.text-link { - text-decoration: underline; -} - -a:focus { - outline: 0 none !important; -} - -a[disabled] { - cursor: default; - pointer-events: none !important; -} - -.text-left { - text-align: left; -} -.text-right { - text-align: right; -} -.text-center { - text-align: center; -} - -// -// Headings -// - -h1, -h2, -h3, -h4, -h5, -h6, -.h1, -.h2, -.h3, -.h4, -.h5, -.h6 { - margin-bottom: $space-sm; - font-weight: $font-weight-regular; - line-height: $headings-line-height; - color: $headings-color; -} - -h1, -.h1 { - font-size: $font-size-h1; -} -h2, -.h2 { - font-size: $font-size-h2; -} -h3, -.h3 { - font-size: $font-size-h3; -} -h4, -.h4 { - font-size: $font-size-h4; -} -h5, -.h5 { - font-size: $font-size-h5; -} -h6, -.h6 { - font-size: $font-size-h6; -} - // // Horizontal rules // diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss index e10f65ce223..970492dd204 100644 --- a/public/sass/components/_page_header.scss +++ b/public/sass/components/_page_header.scss @@ -72,6 +72,11 @@ } } +.page-header__link { + color: $text-color; + text-decoration: underline; +} + .page-header__tabs { display: none; @include media-breakpoint-up(lg) { @@ -92,74 +97,3 @@ border-radius: 5px; counter-reset: flag; } - -.breadcrumb-item { - @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); - - text-decoration: none; - outline: none; - display: block; - float: left; - font-size: 12px; - line-height: 30px; - padding: 0 7px 0 37px; - position: relative; - box-shadow: $card-shadow; - - &:first-child { - padding-left: 10px; - border-radius: 5px 0 0 5px; /*to match with the parent's radius*/ - font-size: 18px; - } - - &:first-child::before { - left: 14px; - } - - &:last-child { - border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/ - padding-right: 20px; - } - - &.active, - &:hover { - background: #333; - background: linear-gradient(#333, #000); - } - - &.active::after, - &:hover::after { - background: #333; - background: linear-gradient(135deg, #333, #000); - } - - &::after { - content: ''; - position: absolute; - top: 0; - right: -14px; // half of square's length - - // same dimension as the line-height of .breadcrumb-item - width: 30px; - height: 30px; - - transform: scale(0.707) rotate(45deg); - // we need to prevent the arrows from getting buried under the next link - z-index: 1; - - // background same as links but the gradient will be rotated to compensate with the transform applied - background: linear-gradient(135deg, $btn-inverse-bg, $btn-inverse-bg-hl); - - // stylish arrow design using box shadow - box-shadow: 2px -2px 0 2px rgb(35, 31, 31), 3px -3px 0 2px rgba(255, 255, 255, 0.1); - - // 5px - for rounded arrows and - // 50px - to prevent hover glitches on the border created using shadows*/ - border-radius: 0 5px 0 50px; - } - - // we dont need an arrow after the last link - &:last-child::after { - content: none; - } -} diff --git a/public/sass/pages/_admin.scss b/public/sass/pages/_admin.scss index 63cf1269f05..0c1c588ed65 100644 --- a/public/sass/pages/_admin.scss +++ b/public/sass/pages/_admin.scss @@ -1,6 +1,6 @@ .admin-settings-section { color: $variable; - font-weight: bold; + font-weight: 500; } td.admin-settings-key { diff --git a/public/views/index-template.html b/public/views/index-template.html index 1f48e004c6c..0444860ca55 100644 --- a/public/views/index-template.html +++ b/public/views/index-template.html @@ -12,7 +12,7 @@