Theming: Updates Tabs design to v8 theme desing, adds new gradients from theme (#32956)

* Theming: Updates Tabs design to v8 theme desing, adds new gradients from theme

* fixing link color

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

@@ -36,6 +36,11 @@ export interface ThemePaletteBase<TColor> {
   border1: string;
   border2: string;
 
+  gradients: {
+    brandVertical: string;
+    brandHorizontal: string;
+  };
+
   action: {
     /** Used for selected menu item / select option */
     selected: string;
@@ -132,6 +137,11 @@ class DarkPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
     disabledOpacity: 0.38,
   };
 
+  gradients = {
+    brandHorizontal: ' linear-gradient(270deg, #F55F3E 0%, #FF8833 100%);',
+    brandVertical: 'linear-gradient(0.01deg, #F55F3E 0.01%, #FF8833 99.99%);',
+  };
+
   contrastThreshold = 3;
   hoverFactor = 0.15;
   tonalOffset = 0.15;
@@ -201,6 +211,11 @@ class LightPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
     disabledOpacity: 0.38,
   };
 
+  gradients = {
+    brandHorizontal: 'linear-gradient(90deg, #FF8833 0%, #F53E4C 100%);',
+    brandVertical: 'linear-gradient(0.01deg, #F53E4C -31.2%, #FF8833 113.07%);',
+  };
+
   contrastThreshold = 3;
   hoverFactor = 0.15;
   tonalOffset = 0.2;

packages/grafana-ui/src/components/Tabs/Tab.tsx

@@ -54,31 +54,29 @@ export const Tab = React.forwardRef<HTMLLIElement, TabProps>(
 Tab.displayName = 'Tab';
 
 const getTabStyles = stylesFactory((theme: GrafanaTheme) => {
-  const colors = theme.colors;
-
   return {
     tabItem: css`
       list-style: none;
-      margin-right: ${theme.spacing.md};
+      margin-right: ${theme.v2.spacing(2)};
       position: relative;
       display: block;
-      border: solid transparent;
-      border-width: 0 1px 1px;
-      border-radius: ${theme.border.radius.md} ${theme.border.radius.md} 0 0;
-      color: ${colors.text};
+      color: ${theme.v2.palette.text.secondary};
       cursor: pointer;
 
       svg {
-        margin-right: ${theme.spacing.sm};
+        margin-right: ${theme.v2.spacing(1)};
       }
 
       a {
         display: block;
         height: 100%;
+        color: ${theme.v2.palette.text.secondary};
       }
+
+      a:hover,
       &:hover,
       &:focus {
-        color: ${colors.linkHover};
+        color: ${theme.v2.palette.text.primary};
       }
     `,
     padding: css`
@@ -86,20 +84,23 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     activeStyle: css`
       label: activeTabStyle;
-      border-color: ${theme.palette.orange} ${colors.pageHeaderBorder} transparent;
-      background: ${colors.bodyBg};
-      color: ${colors.link};
+      color: ${theme.v2.palette.text.primary};
       overflow: hidden;
 
+      a {
+        color: ${theme.v2.palette.text.primary};
+      }
+
       &::before {
         display: block;
         content: ' ';
         position: absolute;
         left: 0;
         right: 0;
-        height: 2px;
-        top: 0;
-        background-image: linear-gradient(to right, #f05a28 30%, #fbca0a 99%);
+        height: 4px;
+        border-radius: 2px;
+        bottom: 2px;
+        background-image: ${theme.v2.palette.gradients.brandHorizontal};
       }
     `,
   };

packages/grafana-ui/src/components/Tabs/TabContent.tsx

@@ -11,6 +11,7 @@ const getTabContentStyle = stylesFactory((theme: GrafanaTheme) => {
   return {
     tabContent: css`
       padding: ${theme.spacing.sm};
+      background: ${theme.v2.palette.layer1};
     `,
   };
 });

packages/grafana-ui/src/components/Tabs/Tabs.story.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Story } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { UseState } from '../../utils/storybook/UseState';
 import { TabsBar, Tab, TabContent, Counter as TabCounter } from '@grafana/ui';
 import mdx from './TabsBar.mdx';
 import { CounterProps } from './Counter';
+import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
 
 export default {
   title: 'Layout/Tabs',
@@ -23,33 +23,28 @@ const tabs = [
 ];
 
 export const Simple = () => {
+  const [state, updateState] = useState(tabs);
   return (
-    <UseState initialState={tabs}>
-      {(state, updateState) => {
-        return (
-          <div>
-            <TabsBar>
-              {state.map((tab, index) => {
-                return (
-                  <Tab
-                    key={index}
-                    label={tab.label}
-                    active={tab.active}
-                    onChangeTab={() => updateState(state.map((tab, idx) => ({ ...tab, active: idx === index })))}
-                    counter={(index + 1) * 1000}
-                  />
-                );
-              })}
-            </TabsBar>
-            <TabContent>
-              {state[0].active && <div>First tab content</div>}
-              {state[1].active && <div>Second tab content</div>}
-              {state[2].active && <div>Third tab content</div>}
-            </TabContent>
-          </div>
-        );
-      }}
-    </UseState>
+    <DashboardStoryCanvas>
+      <TabsBar>
+        {state.map((tab, index) => {
+          return (
+            <Tab
+              key={index}
+              label={tab.label}
+              active={tab.active}
+              onChangeTab={() => updateState(state.map((tab, idx) => ({ ...tab, active: idx === index })))}
+              counter={(index + 1) * 1000}
+            />
+          );
+        })}
+      </TabsBar>
+      <TabContent>
+        {state[0].active && <div>First tab content</div>}
+        {state[1].active && <div>Second tab content</div>}
+        {state[2].active && <div>Third tab content</div>}
+      </TabContent>
+    </DashboardStoryCanvas>
   );
 };