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 snapshot
This commit is contained in:
Torkel Ödegaard
2020-04-14 11:32:14 +02:00
committed by GitHub
parent 16bc5c118d
commit bc60f9c403
70 changed files with 457 additions and 418 deletions

View File

@ -25,7 +25,7 @@ import { GrafanaTheme } from '@grafana/data';
| Property | Type | Description |
| --- | --- | --- |
| [background](#background-property) | <code>{</code><br/><code> dropdown: string;</code><br/><code> scrollbar: string;</code><br/><code> scrollbar2: string;</code><br/><code> pageHeader: string;</code><br/><code> }</code> | |
| [colors](#colors-property) | <code>{</code><br/><code> black: string;</code><br/><code> white: string;</code><br/><code> dark1: string;</code><br/><code> dark2: string;</code><br/><code> dark3: string;</code><br/><code> dark4: string;</code><br/><code> dark5: string;</code><br/><code> dark6: string;</code><br/><code> dark7: string;</code><br/><code> dark8: string;</code><br/><code> dark9: string;</code><br/><code> dark10: string;</code><br/><code> gray1: string;</code><br/><code> gray2: string;</code><br/><code> gray3: string;</code><br/><code> gray4: string;</code><br/><code> gray5: string;</code><br/><code> gray6: string;</code><br/><code> gray7: string;</code><br/><code> gray98: string;</code><br/><code> gray95: string;</code><br/><code> gray85: string;</code><br/><code> gray70: string;</code><br/><code> gray33: string;</code><br/><code> gray25: string;</code><br/><code> gray15: string;</code><br/><code> gray10: string;</code><br/><code> gray05: string;</code><br/><code> blue95: string;</code><br/><code> blue85: string;</code><br/><code> blue77: string;</code><br/><code> red88: string;</code><br/><code> grayBlue: string;</code><br/><code> inputBlack: string;</code><br/><code> blue: string;</code><br/><code> blueBase: string;</code><br/><code> blueShade: string;</code><br/><code> blueLight: string;</code><br/><code> blueFaint: string;</code><br/><code> redBase: string;</code><br/><code> redShade: string;</code><br/><code> greenBase: string;</code><br/><code> greenShade: string;</code><br/><code> red: string;</code><br/><code> yellow: string;</code><br/><code> purple: string;</code><br/><code> variable: string;</code><br/><code> orange: string;</code><br/><code> orangeDark: string;</code><br/><code> queryRed: string;</code><br/><code> queryGreen: string;</code><br/><code> queryPurple: string;</code><br/><code> queryKeyword: string;</code><br/><code> queryOrange: string;</code><br/><code> brandPrimary: string;</code><br/><code> brandSuccess: string;</code><br/><code> brandWarning: string;</code><br/><code> brandDanger: string;</code><br/><code> online: string;</code><br/><code> warn: string;</code><br/><code> critical: string;</code><br/><code> link: string;</code><br/><code> linkDisabled: string;</code><br/><code> linkHover: string;</code><br/><code> linkExternal: string;</code><br/><code> body: string;</code><br/><code> text: string;</code><br/><code> textStrong: string;</code><br/><code> textWeak: string;</code><br/><code> textFaint: string;</code><br/><code> textEmphasis: string;</code><br/><code> panelBg: string;</code><br/><code> bodyBg: string;</code><br/><code> pageBg: string;</code><br/><code> headingColor: string;</code><br/><code> pageHeaderBorder: string;</code><br/><code> formLabel: string;</code><br/><code> formDescription: string;</code><br/><code> formLegend: string;</code><br/><code> formInputBg: string;</code><br/><code> formInputBgDisabled: string;</code><br/><code> formInputBorder: string;</code><br/><code> formInputBorderHover: string;</code><br/><code> formInputBorderActive: string;</code><br/><code> formInputBorderInvalid: string;</code><br/><code> formFocusOutline: string;</code><br/><code> formInputText: string;</code><br/><code> formInputDisabledText: string;</code><br/><code> formInputTextStrong: string;</code><br/><code> formInputTextWhite: string;</code><br/><code> formValidationMessageText: string;</code><br/><code> formValidationMessageBg: string;</code><br/><code> formSwitchBg: string;</code><br/><code> formSwitchBgActive: string;</code><br/><code> formSwitchBgActiveHover: string;</code><br/><code> formSwitchBgHover: string;</code><br/><code> formSwitchBgDisabled: string;</code><br/><code> formSwitchDot: string;</code><br/><code> formCheckboxBg: string;</code><br/><code> formCheckboxBgChecked: string;</code><br/><code> formCheckboxBgCheckedHover: string;</code><br/><code> formCheckboxCheckmark: string;</code><br/><code> }</code> | |
| [colors](#colors-property) | <code>{</code><br/><code> black: string;</code><br/><code> white: string;</code><br/><code> dark1: string;</code><br/><code> dark2: string;</code><br/><code> dark3: string;</code><br/><code> dark4: string;</code><br/><code> dark5: string;</code><br/><code> dark6: string;</code><br/><code> dark7: string;</code><br/><code> dark8: string;</code><br/><code> dark9: string;</code><br/><code> dark10: string;</code><br/><code> gray1: string;</code><br/><code> gray2: string;</code><br/><code> gray3: string;</code><br/><code> gray4: string;</code><br/><code> gray5: string;</code><br/><code> gray6: string;</code><br/><code> gray7: string;</code><br/><code> gray98: string;</code><br/><code> gray95: string;</code><br/><code> gray85: string;</code><br/><code> gray70: string;</code><br/><code> gray33: string;</code><br/><code> gray25: string;</code><br/><code> gray15: string;</code><br/><code> gray10: string;</code><br/><code> gray05: string;</code><br/><code> blue95: string;</code><br/><code> blue85: string;</code><br/><code> blue77: string;</code><br/><code> red88: string;</code><br/><code> grayBlue: string;</code><br/><code> inputBlack: string;</code><br/><code> blue: string;</code><br/><code> blue80: string;</code><br/><code> blue77: string;</code><br/><code> blue95: string;</code><br/><code> blueFaint: string;</code><br/><code> redBase: string;</code><br/><code> redShade: string;</code><br/><code> greenBase: string;</code><br/><code> greenShade: string;</code><br/><code> red: string;</code><br/><code> yellow: string;</code><br/><code> purple: string;</code><br/><code> variable: string;</code><br/><code> orange: string;</code><br/><code> orangeDark: string;</code><br/><code> queryRed: string;</code><br/><code> queryGreen: string;</code><br/><code> queryPurple: string;</code><br/><code> queryKeyword: string;</code><br/><code> queryOrange: string;</code><br/><code> brandPrimary: string;</code><br/><code> brandSuccess: string;</code><br/><code> brandWarning: string;</code><br/><code> brandDanger: string;</code><br/><code> online: string;</code><br/><code> warn: string;</code><br/><code> critical: string;</code><br/><code> link: string;</code><br/><code> linkDisabled: string;</code><br/><code> linkHover: string;</code><br/><code> linkExternal: string;</code><br/><code> body: string;</code><br/><code> text: string;</code><br/><code> textStrong: string;</code><br/><code> textWeak: string;</code><br/><code> textFaint: string;</code><br/><code> textEmphasis: string;</code><br/><code> panelBg: string;</code><br/><code> bodyBg: string;</code><br/><code> pageBg: string;</code><br/><code> headingColor: string;</code><br/><code> pageHeaderBorder: string;</code><br/><code> formLabel: string;</code><br/><code> formDescription: string;</code><br/><code> formLegend: string;</code><br/><code> formInputBg: string;</code><br/><code> formInputBgDisabled: string;</code><br/><code> formInputBorder: string;</code><br/><code> formInputBorderHover: string;</code><br/><code> formInputBorderActive: string;</code><br/><code> formInputBorderInvalid: string;</code><br/><code> formFocusOutline: string;</code><br/><code> formInputText: string;</code><br/><code> formInputDisabledText: string;</code><br/><code> formInputTextStrong: string;</code><br/><code> formInputTextWhite: string;</code><br/><code> formValidationMessageText: string;</code><br/><code> formValidationMessageBg: string;</code><br/><code> formSwitchBg: string;</code><br/><code> formSwitchBgActive: string;</code><br/><code> formSwitchBgActiveHover: string;</code><br/><code> formSwitchBgHover: string;</code><br/><code> formSwitchBgDisabled: string;</code><br/><code> formSwitchDot: string;</code><br/><code> formCheckboxBg: string;</code><br/><code> formCheckboxBgChecked: string;</code><br/><code> formCheckboxBgCheckedHover: string;</code><br/><code> formCheckboxCheckmark: string;</code><br/><code> }</code> | |
| [isDark](#isdark-property) | <code>boolean</code> | |
| [isLight](#islight-property) | <code>boolean</code> | |
| [shadow](#shadow-property) | <code>{</code><br/><code> pageHeader: string;</code><br/><code> }</code> | |
@ -85,9 +85,9 @@ colors: {
grayBlue: string;
inputBlack: string;
blue: string;
blueBase: string;
blueShade: string;
blueLight: string;
blue80: string;
blue77: string;
blue95: string;
blueFaint: string;
redBase: string;
redShade: string;