diff --git a/packages/grafana-data/src/themes/colors.ts b/packages/grafana-data/src/themes/colors.ts index 14c0d81f45e..076051a289b 100644 --- a/packages/grafana-data/src/themes/colors.ts +++ b/packages/grafana-data/src/themes/colors.ts @@ -34,7 +34,7 @@ export const colors = { lightBorder1: '#E4E7E7', blueDarkMain: '#4165F5', - blueDarkText: '#5790FF', + blueDarkText: '#33a2e5', // '#5790FF', redDarkMain: '#D10E5C', redDarkText: '#FF5286', greenDarkMain: '#1A7F4B', diff --git a/packages/grafana-data/src/themes/createPalette.ts b/packages/grafana-data/src/themes/createPalette.ts index eb779eee6d0..cb3fe3e08f3 100644 --- a/packages/grafana-data/src/themes/createPalette.ts +++ b/packages/grafana-data/src/themes/createPalette.ts @@ -174,9 +174,9 @@ class LightPalette implements ThemePaletteBase> { }; 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, }; diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx index c7436a406e8..c5732c3f5c8 100644 --- a/packages/grafana-ui/src/components/Button/Button.tsx +++ b/packages/grafana-ui/src/components/Button/Button.tsx @@ -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, diff --git a/packages/grafana-ui/src/components/Button/ToolbarButton.tsx b/packages/grafana-ui/src/components/Button/ToolbarButton.tsx index 90540605bfa..2c30f610db1 100644 --- a/packages/grafana-ui/src/components/Button/ToolbarButton.tsx +++ b/packages/grafana-ui/src/components/Button/ToolbarButton.tsx @@ -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, diff --git a/packages/grafana-ui/src/components/Forms/commonStyles.ts b/packages/grafana-ui/src/components/Forms/commonStyles.ts index 4ac0956ba02..2fa37f0c188 100644 --- a/packages/grafana-ui/src/components/Forms/commonStyles.ts +++ b/packages/grafana-ui/src/components/Forms/commonStyles.ts @@ -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 { diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx index f599b02a450..5f5b9a3ab13 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx +++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx @@ -85,7 +85,7 @@ export const TimePickerFooter: FC = (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; diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index 01ac857883d..dd74f5bd863 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/packages/grafana-ui/src/themes/dark.ts @@ -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, diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts index 96d7763a260..239ec29264b 100644 --- a/packages/grafana-ui/src/themes/light.ts +++ b/packages/grafana-ui/src/themes/light.ts @@ -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', diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx index a668b2eaaea..e0d32a81e95 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx @@ -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; diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index 9855e9837c5..bf0a8a3d90c 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -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; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index 2efb2074394..903b8b43557 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -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;