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: V8 theme updates to text colors and buttons (#32905)

Browse Source 
* Theme text colors

* Theme text colors

* More theme tweaks

* reduce input disabled border

* More updates
This commit is contained in:
Torkel Ödegaard 2021-04-12 19:44:43 +02:00 committed by GitHub
parent 0a56527ed9
commit 00ecd37778
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 45 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-data/src/themes/colors.ts
View File

@ -34,7 +34,7 @@ export const colors = {
lightBorder1: '#E4E7E7',
blueDarkMain: '#4165F5',
blueDarkText: '#5790FF',
blueDarkText: '#33a2e5', // '#5790FF',
redDarkMain: '#D10E5C',
redDarkText: '#FF5286',
greenDarkMain: '#1A7F4B',

6
packages/grafana-data/src/themes/createPalette.ts
View File

@ -174,9 +174,9 @@ class LightPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
};
text = {
primary: 'rgba(0, 0, 0, 0.87)',
secondary: 'rgba(0, 0, 0, 0.55)',
disabled: 'rgba(0, 0, 0, 0.40)',
primary: 'rgba(0, 0, 0, 0.75)',
secondary: 'rgba(0, 0, 0, 0.60)',
disabled: 'rgba(0, 0, 0, 0.45)',
link: this.primary.text,
maxContrast: colors.black,
};

2
packages/grafana-ui/src/components/Button/Button.tsx
View File

@ -95,6 +95,7 @@ export const getButtonStyles = (props: StyleProps) => {
'&:hover': {
background: theme.v2.palette.action.disabledBackground,
color: theme.v2.palette.text.disabled,
boxShadow: 'none',
},
};
@ -144,7 +145,6 @@ function getButtonVariantStyles(theme: GrafanaThemeV2, color: ThemePaletteColor)
return {
background: color.main,
color: color.contrastText,
boxShadow: theme.shadows.z1,
border: `1px solid transparent`,
transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
duration: theme.transitions.duration.short,

3
packages/grafana-ui/src/components/Button/ToolbarButton.tsx
View File

@ -117,8 +117,7 @@ const getStyles = (theme: GrafanaTheme) => {
border-radius: ${theme.v2.shape.borderRadius()};
line-height: ${theme.v2.components.height.md * theme.v2.spacing.gridSize - 2}px;
font-weight: ${theme.v2.typography.fontWeightMedium};
border: 1px solid ${theme.v2.palette.border1};
box-shadow: ${theme.v2.shadows.z0};
border: 1px solid ${theme.v2.palette.border1};
white-space: nowrap;
transition: ${theme.v2.transitions.create(['background', 'box-shadow', 'border-color', 'color'], {
duration: theme.v2.transitions.duration.short,

5
packages/grafana-ui/src/components/Forms/commonStyles.ts
View File

@ -48,6 +48,11 @@ export const sharedInputStyle = (theme: GrafanaTheme, invalid = false) => {
&:disabled {
background-color: ${theme.v2.palette.action.disabledBackground};
color: ${theme.v2.palette.action.disabledText};
border: 1px solid ${theme.v2.palette.action.disabledBackground};
&:hover {
border-color: ${borderColor};
}
}
&::placeholder {

2
packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx
View File

@ -85,7 +85,7 @@ export const TimePickerFooter: FC<Props> = (props) => {
const getStyle = stylesFactory((theme: GrafanaTheme) => {
return {
container: css`
border-top: 1px solid ${theme.colors.border1};
border-top: 1px solid ${theme.v2.palette.divider};
padding: 11px;
display: flex;
flex-direction: row;

4
packages/grafana-ui/src/themes/dark.ts
View File

@ -63,8 +63,8 @@ const textColors = {
const form = {
// Next-gen forms functional colors
formLabel: textColors.textSemiWeak,
formDescription: basicColors.gray60,
formLabel: v2.palette.text.primary,
formDescription: v2.palette.text.secondary,
formInputBg: basicColors.gray05,
formInputBgDisabled: basicColors.gray10,
formInputBorder: borders.border2,

16
packages/grafana-ui/src/themes/light.ts
View File

@ -52,17 +52,17 @@ const borders = {
const textColors = {
// Text colors
textStrong: basicColors.gray15,
text: basicColors.gray33,
textSemiWeak: basicColors.gray33,
textWeak: basicColors.gray60,
textFaint: basicColors.gray70,
textBlue: basicColors.blue85,
textStrong: v2.palette.text.maxContrast,
text: v2.palette.text.primary,
textSemiWeak: v2.palette.text.secondary,
textWeak: v2.palette.text.disabled,
textFaint: v2.palette.text.disabled,
textBlue: v2.palette.primary.text,
};
const form = {
formLabel: textColors.text,
formDescription: textColors.textWeak,
formDescription: v2.palette.text.secondary,
formLegend: basicColors.gray25,
formInputBg: basicColors.white,
formInputBgDisabled: basicColors.gray95,
@ -128,7 +128,7 @@ const lightTheme: GrafanaTheme = {
linkDisabled: textColors.textWeak,
linkHover: textColors.textStrong,
linkExternal: basicColors.blue85,
textHeading: basicColors.gray25,
textHeading: v2.palette.text.primary,
},
shadows: {
listItem: 'none',

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

@ -114,11 +114,11 @@ const getStyles = (theme: GrafanaTheme) => {
cursor: pointer;
align-items: baseline;
padding: ${theme.spacing.sm};
color: ${theme.colors.formLabel};
color: ${theme.v2.palette.text.secondary};
font-weight: ${theme.typography.weight.semibold};
&:hover {
color: ${theme.colors.text};
color: ${theme.v2.palette.text.primary};
.editor-options-group-toggle {
color: ${theme.colors.text};
@ -126,7 +126,7 @@ const getStyles = (theme: GrafanaTheme) => {
}
`,
headerExpanded: css`
color: ${theme.colors.text};
color: ${theme.v2.palette.text.primary};
`,
headerNested: css`
padding-left: 0;

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

@ -74,7 +74,7 @@ $red: $red-base;
$yellow: #ecbb13;
$orange: #eb7b18;
$purple: #9933cc;
$variable: #5790FF;
$variable: #33a2e5;
$brand-primary: #eb7b18;
$brand-success: #299c46;
@ -104,7 +104,7 @@ $text-color-semi-weak: rgba(255, 255, 255, 0.50);
$text-color-weak: rgba(255, 255, 255, 0.35);
$text-color-faint: rgba(255, 255, 255, 0.35);
$text-color-emphasis: #fff;
$text-blue: #5790FF;
$text-blue: #33a2e5;
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
$textShadow: none;

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

@ -64,12 +64,12 @@ $border1: rgba(0, 2, 78, 0.20);
// Accent colors
// -------------------------
$blue: #33a2e5;
$blue: #1F62E0;
$red: $red-base;
$yellow: #ff851b;
$orange: #ff7941;
$purple: #9954bb;
$variable: #33a2e5;
$variable: #1F62E0;
$brand-primary: #ff7941;
$brand-success: #3eb15b;
@ -93,13 +93,13 @@ $body-bg: #fff;
$page-bg: #fff;
$dashboard-bg: #F4F5F5;
$text-color: #464c54;
$text-color-strong: #202226;
$text-color-semi-weak: #464c54;
$text-color-weak: #7b8087;
$text-color-faint: #9fa7b3;
$text-color-emphasis: #202226;
$text-blue: #33a2e5;
$text-color: rgba(0, 0, 0, 0.75);
$text-color-strong: #000;
$text-color-semi-weak: rgba(0, 0, 0, 0.60);
$text-color-weak: rgba(0, 0, 0, 0.45);
$text-color-faint: rgba(0, 0, 0, 0.45);
$text-color-emphasis: #000;
$text-blue: #1F62E0;
$text-shadow-faint: none;
@ -109,14 +109,14 @@ $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
// Links
// -------------------------
$link-color: #464c54;
$link-color-disabled: #7b8087;
$link-hover-color: #202226;
$link-color: rgba(0, 0, 0, 0.75);
$link-color-disabled: rgba(0, 0, 0, 0.45);
$link-hover-color: #000;
$external-link-color: #33a2e5;
// Typography
// -------------------------
$headings-color: #2c3235;
$headings-color: rgba(0, 0, 0, 0.75);
$abbr-border-color: $gray-2 !default;
$text-muted: $text-color-weak;
@ -206,12 +206,12 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
$input-bg: $white;
$input-bg-disabled: $gray-5;
$input-color: #464c54;
$input-color: rgba(0, 0, 0, 0.75);
$input-border-color: #c7d0d9;
$input-box-shadow: none;
$input-border-focus: #5794f2;
$input-box-shadow-focus: #5794f2;
$input-color-placeholder: #9fa7b3;
$input-color-placeholder: rgba(0, 0, 0, 0.45);
$input-label-bg: #F7F7F8;
$input-color-select-arrow: #7b8087;
@ -279,13 +279,13 @@ $alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
// Tooltips and popovers
$tooltipBackground: #F7F7F8;
$tooltipColor: rgba(0, 0, 0, 0.87);
$tooltipColor: rgba(0, 0, 0, 0.75);
$tooltipArrowColor: #F7F7F8;
$tooltipBackgroundError: #E0226E;
$tooltipShadow: 0px 2px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
$popover-bg: #F7F7F8;
$popover-color: rgba(0, 0, 0, 0.87);
$popover-color: rgba(0, 0, 0, 0.75);
$popover-border-color: rgba(0, 2, 78, 0.20);
$popover-header-bg: #F7F7F8;
$popover-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
@ -335,7 +335,7 @@ $diff-arrow-color: $dark-2;
$diff-group-bg: #F7F7F8;
$diff-json-bg: #F7F7F8;
$diff-json-fg: #464c54;
$diff-json-fg: rgba(0, 0, 0, 0.75);
$diff-json-added: $blue-shade;
$diff-json-deleted: $red-shade;