Theme: V8 theme updates to text colors and buttons (#32905)

* Theme text colors

* Theme text colors

* More theme tweaks

* reduce input disabled border

* More updates

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',

packages/grafana-data/src/themes/createPalette.ts

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

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,

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};
+      border: 1px solid ${theme.v2.palette.border1};      
-      box-shadow: ${theme.v2.shadows.z0};
       white-space: nowrap;
       transition: ${theme.v2.transitions.create(['background', 'box-shadow', 'border-color', 'color'], {
         duration: theme.v2.transitions.duration.short,

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 {

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

@@ -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;

packages/grafana-ui/src/themes/dark.ts

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

packages/grafana-ui/src/themes/light.ts

@@ -52,17 +52,17 @@ const borders = {
 
 const textColors = {
   // Text colors
-  textStrong: basicColors.gray15,
+  textStrong: v2.palette.text.maxContrast,
-  text: basicColors.gray33,
+  text: v2.palette.text.primary,
-  textSemiWeak: basicColors.gray33,
+  textSemiWeak: v2.palette.text.secondary,
-  textWeak: basicColors.gray60,
+  textWeak: v2.palette.text.disabled,
-  textFaint: basicColors.gray70,
+  textFaint: v2.palette.text.disabled,
-  textBlue: basicColors.blue85,
+  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',

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;

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;

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: rgba(0, 0, 0, 0.75);
-$text-color-strong: #202226;
+$text-color-strong: #000;
-$text-color-semi-weak: #464c54;
+$text-color-semi-weak: rgba(0, 0, 0, 0.60);
-$text-color-weak: #7b8087;
+$text-color-weak: rgba(0, 0, 0, 0.45);
-$text-color-faint: #9fa7b3;
+$text-color-faint: rgba(0, 0, 0, 0.45);
-$text-color-emphasis: #202226;
+$text-color-emphasis: #000;
-$text-blue: #33a2e5;
+$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: rgba(0, 0, 0, 0.75);
-$link-color-disabled: #7b8087;
+$link-color-disabled: rgba(0, 0, 0, 0.45);
-$link-hover-color: #202226;
+$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;