From abfaf368dc4b3432048f9cef8cce470792f3808a Mon Sep 17 00:00:00 2001
From: memosys <hello@vishal.design>
Date: Thu, 28 Dec 2023 21:46:27 +0530
Subject: [PATCH] Styling updates for DM v2.2 and SEO-RODEO-II (#109)

* 01- Buttons

* 02- Tabs

* 03- radio items

* 03- TextArea, Selects, Inputs

Added solid outline variant

* bumped package number

* Code Review updates + breaking changes fixed
---
 .vscode/settings.json                         |  7 +-
 package.json                                  |  2 +-
 src/components/chakra/index.ts                |  2 +
 .../forms/DatePicker/DatePicker.tsx           |  2 +-
 src/components/forms/Select/Select.tsx        |  2 +-
 .../ControlledSelect/ControlledSelect.tsx     |  2 +-
 .../molecules/ButtonGroup/ButtonGroup.tsx     |  2 +-
 src/stories/atoms/Tabs.stories.tsx            | 33 +++++---
 src/stories/forms/Input.stories.tsx           |  1 +
 src/stories/forms/NumberInput.stories.tsx     |  1 +
 src/stories/forms/Select.stories.tsx          | 17 +++-
 src/stories/forms/Textarea.stories.tsx        |  1 +
 .../controlled/ControlledInput.stories.tsx    |  1 +
 .../ControlledNumberInput.stories.tsx         |  1 +
 .../controlled/ControlledSelect.stories.tsx   |  4 +-
 .../controlled/ControlledTextarea.stories.tsx |  1 +
 src/theme/colors.ts                           |  4 +-
 src/theme/components/Button.ts                | 77 +++++++++++--------
 src/theme/components/Input.ts                 |  8 ++
 src/theme/components/NumberInput.ts           |  8 ++
 src/theme/components/RadioBox.ts              |  9 ++-
 src/theme/components/Select.ts                |  7 ++
 src/theme/components/Tabs.ts                  | 29 +++++++
 src/theme/components/Textarea.ts              |  6 ++
 src/theme/gradientStyles.ts                   |  8 ++
 src/theme/index.ts                            |  2 +
 26 files changed, 177 insertions(+), 60 deletions(-)
 create mode 100644 src/theme/components/Tabs.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3975db1..9459714 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,13 +2,16 @@
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "dbaeumer.vscode-eslint",
     "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-},
+        "source.fixAll.eslint": "always"
+    },
     "eslint.validate": [
         "javascript",
         "typescript"
     ],
     "[yaml]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
     }
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 4ca687d..e863bbb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@raidguild/design-system",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "license": "MIT",
   "author": "Raid Guild",
   "main": "./dist/src/index.js",
diff --git a/src/components/chakra/index.ts b/src/components/chakra/index.ts
index ce240fa..8e4447d 100644
--- a/src/components/chakra/index.ts
+++ b/src/components/chakra/index.ts
@@ -200,4 +200,6 @@ export type {
   ToastProps as ChakraToastProps,
   TooltipProps as ChakraTooltipProps,
   WrapProps as ChakraWrapProps,
+  TabsProps,
+  TabProps,
 } from '@chakra-ui/react';
diff --git a/src/components/forms/DatePicker/DatePicker.tsx b/src/components/forms/DatePicker/DatePicker.tsx
index ac20e47..0321bd1 100644
--- a/src/components/forms/DatePicker/DatePicker.tsx
+++ b/src/components/forms/DatePicker/DatePicker.tsx
@@ -36,7 +36,7 @@ const DatePicker: React.FC<DatePickerProps> = ({
   localForm,
   registerOptions,
   tooltip,
-  variant,
+  variant = 'ghost',
   spacing,
   ...props
 }: DatePickerProps) => {
diff --git a/src/components/forms/Select/Select.tsx b/src/components/forms/Select/Select.tsx
index 1119018..e58da00 100644
--- a/src/components/forms/Select/Select.tsx
+++ b/src/components/forms/Select/Select.tsx
@@ -41,7 +41,7 @@ export interface SelectProps {
   isSearchable?: boolean;
   onChange?: (option: Option) => void;
   isDisabled?: boolean;
-  variant?: 'outline' | 'filled' | 'flushed' | undefined;
+  variant?: 'outline' | 'filled' | 'flushed' | 'solidOutline' | undefined;
   basicStyles?: boolean;
   value?: unknown;
   colorScheme?:
diff --git a/src/components/forms/controlled/ControlledSelect/ControlledSelect.tsx b/src/components/forms/controlled/ControlledSelect/ControlledSelect.tsx
index bd37623..35fb285 100644
--- a/src/components/forms/controlled/ControlledSelect/ControlledSelect.tsx
+++ b/src/components/forms/controlled/ControlledSelect/ControlledSelect.tsx
@@ -23,7 +23,7 @@ export interface ControlledSelectProps {
   isClearable?: boolean;
   onChange?: (option: Option) => void;
   isDisabled?: boolean;
-  variant?: 'outline' | 'filled' | 'flushed' | undefined;
+  variant?: 'outline' | 'filled' | 'flushed' | 'solidOutline' | undefined;
   basicStyles?: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value?: any;
diff --git a/src/components/molecules/ButtonGroup/ButtonGroup.tsx b/src/components/molecules/ButtonGroup/ButtonGroup.tsx
index 748dcf2..b844f59 100644
--- a/src/components/molecules/ButtonGroup/ButtonGroup.tsx
+++ b/src/components/molecules/ButtonGroup/ButtonGroup.tsx
@@ -61,7 +61,7 @@ const ButtonGroup: React.FC<ButtonGroupProps> = ({
         return (
           <Button
             key={label}
-            variant={i === selected ? 'solid' : 'outline'}
+            variant={i === selected ? 'solid' : 'ghost'}
             color='white'
             size={size}
             onClick={() => handleSelection(i)}
diff --git a/src/stories/atoms/Tabs.stories.tsx b/src/stories/atoms/Tabs.stories.tsx
index ee2eed8..dd6ebaa 100644
--- a/src/stories/atoms/Tabs.stories.tsx
+++ b/src/stories/atoms/Tabs.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { StoryFn } from '@storybook/react';
+import { Flex, Heading } from '@chakra-ui/react';
 import {
   Tabs as TabsComponent,
   Tab,
@@ -8,22 +9,34 @@ import {
   TabPanel,
 } from '../..';
 
+const tabVariants = [
+  { name: 'Unstyled', variant: 'unstyled' },
+  { name: 'Default', variant: 'default' },
+];
+
 export default {
   title: 'Components/Atoms/Tabs',
   component: TabsComponent,
 } as any; // as Meta<typeof TabsComponent>;
 
 const Tabs: StoryFn<typeof TabsComponent> = () => (
-  <TabsComponent>
-    <TabList>
-      <Tab>Test 1</Tab>
-      <Tab>Test 2</Tab>
-    </TabList>
-    <TabPanels>
-      <TabPanel>Content 1</TabPanel>
-      <TabPanel>Content 2</TabPanel>
-    </TabPanels>
-  </TabsComponent>
+  <>
+    {tabVariants.map((tab) => (
+      <Flex align='center' key={tab.variant} justify='space-between' w='300px'>
+        <Heading size='sm'>{tab.name}</Heading>
+        <TabsComponent variant={tab.variant}>
+          <TabList>
+            <Tab>Test 1</Tab>
+            <Tab>Test 2</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>Content 1</TabPanel>
+            <TabPanel>Content 2</TabPanel>
+          </TabPanels>
+        </TabsComponent>
+      </Flex>
+    ))}
+  </>
 );
 
 export { Tabs };
diff --git a/src/stories/forms/Input.stories.tsx b/src/stories/forms/Input.stories.tsx
index d6afdb0..6cc343b 100644
--- a/src/stories/forms/Input.stories.tsx
+++ b/src/stories/forms/Input.stories.tsx
@@ -12,6 +12,7 @@ const inputVariants = [
   { name: 'Outline', variant: 'outline' },
   { name: 'Flushed', variant: 'flushed' },
   { name: 'Filled', variant: 'filled' },
+  { name: 'Solid Outline', variant: 'solidOutline' },
 ];
 
 const HookForm: StoryFn<typeof InputComponent> = () => (
diff --git a/src/stories/forms/NumberInput.stories.tsx b/src/stories/forms/NumberInput.stories.tsx
index 14e5d0f..412abf9 100644
--- a/src/stories/forms/NumberInput.stories.tsx
+++ b/src/stories/forms/NumberInput.stories.tsx
@@ -13,6 +13,7 @@ const numberInputVariants = [
   { name: 'Outline', variant: 'outline', ...stepConfig },
   { name: 'Flushed', variant: 'flushed', ...stepConfig },
   { name: 'Filled', variant: 'filled', ...stepConfig },
+  { name: 'Solid Outline', variant: 'solidOutline', ...stepConfig },
 ];
 
 const HookForm: StoryFn<typeof NumberInputComponent> = () => (
diff --git a/src/stories/forms/Select.stories.tsx b/src/stories/forms/Select.stories.tsx
index 259d466..feacf22 100644
--- a/src/stories/forms/Select.stories.tsx
+++ b/src/stories/forms/Select.stories.tsx
@@ -10,7 +10,7 @@ export default {
 
 type SelectVariant = {
   name: string;
-  variant: 'outline' | 'filled' | 'flushed';
+  variant: 'outline' | 'filled' | 'flushed' | 'solidOutline';
   isMulti?: boolean;
   creatable?: boolean;
   basicStyles?: boolean;
@@ -40,13 +40,19 @@ const selectVariants: SelectVariant[] = [
     tooltip: 'this is a tooltip',
     helperText: 'This is a helper text',
   },
+  {
+    name: 'Single Solid Outline',
+    variant: 'solidOutline',
+    isMulti: false,
+    tooltip: 'this is a tooltip',
+    helperText: 'This is a helper text',
+  },
   {
     name: 'Single Outline Basic',
     variant: 'outline',
     isMulti: false,
     basicStyles: true,
   },
-
   {
     name: 'Multi Outline',
     variant: 'outline',
@@ -60,12 +66,19 @@ const selectVariants: SelectVariant[] = [
     isMulti: true,
     tooltip: 'this is a tooltip',
   },
+
   {
     name: 'Multi Flushed',
     variant: 'flushed',
     isMulti: true,
     tooltip: 'this is a tooltip',
   },
+  {
+    name: 'Multi Solid Outline',
+    variant: 'solidOutline',
+    isMulti: true,
+    tooltip: 'this is a tooltip',
+  },
   {
     name: 'Multi Outline Basic',
     variant: 'outline',
diff --git a/src/stories/forms/Textarea.stories.tsx b/src/stories/forms/Textarea.stories.tsx
index 304b9e9..7719140 100644
--- a/src/stories/forms/Textarea.stories.tsx
+++ b/src/stories/forms/Textarea.stories.tsx
@@ -12,6 +12,7 @@ const textareaVariants = [
   { name: 'Outline', variant: 'outline' },
   { name: 'Flushed', variant: 'flushed' },
   { name: 'Filled', variant: 'filled' },
+  { name: 'Solid Outline', variant: 'solidOutline' },
 ];
 
 const HookForm: StoryFn<typeof TextareaComponent> = () => (
diff --git a/src/stories/forms/controlled/ControlledInput.stories.tsx b/src/stories/forms/controlled/ControlledInput.stories.tsx
index e73c243..80b6da8 100644
--- a/src/stories/forms/controlled/ControlledInput.stories.tsx
+++ b/src/stories/forms/controlled/ControlledInput.stories.tsx
@@ -11,6 +11,7 @@ const inputVariants = [
   { name: 'Outline', variant: 'outline' },
   { name: 'Flushed', variant: 'flushed' },
   { name: 'Filled', variant: 'filled' },
+  { name: 'Solid Outline', variant: 'solidOutline' },
 ];
 
 const Controlled: StoryFn<typeof InputComponent> = () => (
diff --git a/src/stories/forms/controlled/ControlledNumberInput.stories.tsx b/src/stories/forms/controlled/ControlledNumberInput.stories.tsx
index fcd7cba..717bffc 100644
--- a/src/stories/forms/controlled/ControlledNumberInput.stories.tsx
+++ b/src/stories/forms/controlled/ControlledNumberInput.stories.tsx
@@ -12,6 +12,7 @@ const numberInputVariants = [
   { name: 'Outline', variant: 'outline', ...stepConfig },
   { name: 'Flushed', variant: 'flushed', ...stepConfig },
   { name: 'Filled', variant: 'filled', ...stepConfig },
+  { name: 'Solid Outline', variant: 'solidOutline', ...stepConfig },
 ];
 
 const Controlled: StoryFn<typeof NumberInput> = () => (
diff --git a/src/stories/forms/controlled/ControlledSelect.stories.tsx b/src/stories/forms/controlled/ControlledSelect.stories.tsx
index 900454d..52e8cd1 100644
--- a/src/stories/forms/controlled/ControlledSelect.stories.tsx
+++ b/src/stories/forms/controlled/ControlledSelect.stories.tsx
@@ -14,7 +14,7 @@ export default {
 
 type SelectVariant = {
   name: string;
-  variant: 'outline' | 'filled' | 'flushed';
+  variant: 'outline' | 'filled' | 'flushed' | 'solidOutline';
   isMulti?: boolean;
   creatable?: boolean;
   basicStyles?: boolean;
@@ -33,6 +33,7 @@ type Option =
 
 const selectVariants: SelectVariant[] = [
   { name: 'Single Outline', variant: 'outline', isMulti: false },
+  { name: 'Single Solid Outline', variant: 'solidOutline', isMulti: false },
   { name: 'Single Filled', variant: 'filled', isMulti: false },
   { name: 'Single Flushed', variant: 'flushed', isMulti: false },
   {
@@ -43,6 +44,7 @@ const selectVariants: SelectVariant[] = [
   },
 
   { name: 'Multi Outline', variant: 'outline', isMulti: true },
+  { name: 'Multi Solid Outline', variant: 'solidOutline', isMulti: true },
   { name: 'Multi Filled', variant: 'filled', isMulti: true },
   { name: 'Multi Flushed', variant: 'flushed', isMulti: true },
   {
diff --git a/src/stories/forms/controlled/ControlledTextarea.stories.tsx b/src/stories/forms/controlled/ControlledTextarea.stories.tsx
index aeccb18..3d246d4 100644
--- a/src/stories/forms/controlled/ControlledTextarea.stories.tsx
+++ b/src/stories/forms/controlled/ControlledTextarea.stories.tsx
@@ -11,6 +11,7 @@ const textareaVariants = [
   { name: 'Outline', variant: 'outline' },
   { name: 'Flushed', variant: 'flushed' },
   { name: 'Filled', variant: 'filled' },
+  { name: 'Solid Outline', variant: 'solidOutline' },
 ];
 
 const Controlled: StoryFn<typeof TextareaComponent> = () => (
diff --git a/src/theme/colors.ts b/src/theme/colors.ts
index 5a5bde3..9fbf55b 100644
--- a/src/theme/colors.ts
+++ b/src/theme/colors.ts
@@ -1,13 +1,13 @@
 import _ from 'lodash';
 import RGTokens from './tokens';
 
-interface colorTokenInterface {
+interface ColorTokenInterface {
   value: string;
   type: string;
 }
 
 const chakraColors = _.mapValues(RGTokens.colors, (colors) =>
-  _.mapValues(colors, (color: colorTokenInterface) => color.value)
+  _.mapValues(colors, (color: ColorTokenInterface) => color.value)
 );
 
 const Colors = {
diff --git a/src/theme/components/Button.ts b/src/theme/components/Button.ts
index 6ae4306..061a3ae 100644
--- a/src/theme/components/Button.ts
+++ b/src/theme/components/Button.ts
@@ -1,3 +1,5 @@
+import GradientStyles from '../gradientStyles';
+
 const Button = {
   baseStyle: {
     textTransform: 'uppercase',
@@ -11,24 +13,28 @@ const Button = {
   variants: {
     solid: {
       bg: 'purple.500',
+      borderRadius: '2px',
+      maxWidth: '100%',
+      width: 'auto',
+      height: '40px',
+      paddingLeft: '24px',
+      paddingRight: '24px',
       color: 'white',
       _hover: {
         bg: 'primary.500',
       },
     },
     bright: {
+      color: 'white',
+      borderRadius: '2px',
       maxWidth: '100%',
       width: 'auto',
       height: '40px',
-      color: 'white',
-      borderRadius: '2px',
-      background:
-        'linear-gradient(94.89deg, #FF5A00 0%, #D62789 70.2%, #AD17AD 100%)',
       paddingLeft: '24px',
       paddingRight: '24px',
+      background: GradientStyles.orangeToPurpleDiagonalGradient.bgGradient,
       _hover: {
-        background:
-          'linear-gradient(94.89deg, #f78040 0%, #dd459b 70.2%, #ad3bad 100%)',
+        background: GradientStyles.orangeToPurpleSharpGradient.bgGradient,
       },
       _focus: {
         boxShadow: 'none',
@@ -37,56 +43,59 @@ const Button = {
     outline: {
       bg: 'transparent',
       border: '2px solid',
-      borderColor: 'purple.500',
-      borderRadius: 'lg',
-      color: 'whiteAlpha.800',
+      maxWidth: '100%',
+      width: 'auto',
+      height: '40px',
+      paddingLeft: '24px',
+      paddingRight: '24px',
+      borderRadius: '2px',
+      color: 'purple.500',
       _hover: {
-        bg: 'purple.500',
-        color: 'white',
-        border: '2px solid',
-        borderColor: 'white',
+        borderImageSlice: 1,
+        borderImageSource: 'linear-gradient(96deg, #FF3864 0%, #8B1DBA 71.35%)',
+        background: 'linear-gradient(96deg, #FF3864 0%, #8B1DBA 71.35%)',
+        color: 'transparent',
+        backgroundClip: 'text',
       },
     },
     gradientOutline: {
-      textTransform: 'uppercase',
+      border: '2px solid',
+      borderRadius: '2px',
       maxWidth: '100%',
       width: 'auto',
       height: '40px',
-      border: '2px solid',
-      borderRadius: '3px',
-      borderImageSlice: 1,
-      borderImageSource:
-        'linear-gradient(95.58deg, #FF3864 0%, #8B1DBA 53.65%, #4353DF 100%)',
-      background:
-        'linear-gradient(96.18deg, #FF3864 -44.29%, #8B1DBA 53.18%, #4353DF 150.65%);',
-      color: { base: 'whiteAlpha.700', md: 'transparent' }, // added a media query to display RG red on mobile
-      backgroundClip: 'text',
       paddingLeft: '24px',
       paddingRight: '24px',
-      transistion: 'all .8s ease-out',
+      borderImageSlice: 1,
+      borderImageSource: 'linear-gradient(96deg, #FF3864 0%, #8B1DBA 71.35%)',
+      background: 'linear-gradient(96deg, #FF3864 0%, #8B1DBA 71.35%)',
+      color: 'transparent',
+      backgroundClip: 'text',
       _hover: {
-        background:
-          'linear-gradient(96.18deg, #e26f88 0%, #a15ebe 53.65%, #6c77db 100%)',
-        backgroundClip: 'text',
-        color: { base: 'white', md: 'transparent' }, // added a media query to display RG red on mobile
+        background: 'linear-gradient(96deg, #FF3864 0%, #8B1DBA 71.35%)',
+        color: 'white',
       },
       _focus: {
         boxShadow: 'none',
       },
     },
-    ghost: () => ({
-      textTransform: 'uppercase',
+    ghost: {
+      color: 'purple.500',
+      borderRadius: '2px',
       maxWidth: '100%',
       width: 'auto',
       height: '40px',
-      color: '#8B1DBA',
+      paddingLeft: '24px',
+      paddingRight: '24px',
       bg: 'whiteAlpha.100',
-      // paddingLeft: '24px',
-      // paddingRight: '24px',
+      _hover: {
+        bg: 'purple.500',
+        color: 'white',
+      },
       _focus: {
         boxShadow: 'none',
       },
-    }),
+    },
   },
 };
 
diff --git a/src/theme/components/Input.ts b/src/theme/components/Input.ts
index 9f5135b..21acbe2 100644
--- a/src/theme/components/Input.ts
+++ b/src/theme/components/Input.ts
@@ -18,6 +18,14 @@ const Input = {
         },
       },
     },
+    solidOutline: {
+      field: {
+        border: '1px solid',
+        backgroundColor: 'transparent',
+        borderRadius: '0px',
+        borderColor: 'primary.500',
+      },
+    },
     outline: {
       field: {
         border: '1px solid',
diff --git a/src/theme/components/NumberInput.ts b/src/theme/components/NumberInput.ts
index a75393d..503a135 100644
--- a/src/theme/components/NumberInput.ts
+++ b/src/theme/components/NumberInput.ts
@@ -30,6 +30,14 @@ const NumberInput = {
           'linear-gradient(95.58deg, #FF3864 0%, #8B1DBA 53.65%, #4353DF 100%)',
       },
     },
+    solidOutline: {
+      field: {
+        border: '1px solid',
+        backgroundColor: 'transparent',
+        borderRadius: '0px',
+        borderColor: 'primary.500',
+      },
+    },
     flushed: {
       field: {
         bg: 'none',
diff --git a/src/theme/components/RadioBox.ts b/src/theme/components/RadioBox.ts
index 0118f57..696d797 100644
--- a/src/theme/components/RadioBox.ts
+++ b/src/theme/components/RadioBox.ts
@@ -4,13 +4,14 @@ const RadioBox = {
       _hover: {
         cursor: 'pointer',
       },
-      color: '#7f5af0',
+      color: 'primary.500',
       boxShadow: 'md',
-      border: '1px solid #7f5af0',
+      border: '1px solid',
+      borderColor: 'primary.500',
       _checked: {
-        bg: '#7f5af0',
+        bg: 'primary.500',
         color: 'white',
-        borderColor: 'teal.600',
+        borderColor: 'primary.500',
       },
       label: {
         fontFamily: 'spaceMono',
diff --git a/src/theme/components/Select.ts b/src/theme/components/Select.ts
index 6b2416f..af12151 100644
--- a/src/theme/components/Select.ts
+++ b/src/theme/components/Select.ts
@@ -16,6 +16,13 @@ const Select = {
           'linear-gradient(95.58deg, #FF3864 0%, #8B1DBA 53.65%, #4353DF 100%)',
       },
     },
+    solidOutline: {
+      field: {
+        border: '1px solid',
+        borderRadius: '0px',
+        borderColor: 'primary.500',
+      },
+    },
     flushed: {
       field: {
         borderBottom: '1px solid',
diff --git a/src/theme/components/Tabs.ts b/src/theme/components/Tabs.ts
new file mode 100644
index 0000000..953d4c1
--- /dev/null
+++ b/src/theme/components/Tabs.ts
@@ -0,0 +1,29 @@
+const Tabs = {
+  baseStyle: {
+    tab: {
+      alignItems: 'flex-start',
+    },
+  },
+  variants: {
+    default: {
+      tab: {
+        fontFamily: 'texturina',
+        _selected: {
+          color: 'primary.500',
+          borderBottomColor: 'primary.500',
+          borderBottomWidth: '2px',
+        },
+      },
+    },
+    unstyled: {
+      tab: {
+        _selected: {
+          color: 'blue.500',
+          borderBottomColor: 'blue.500',
+          borderBottomWidth: '2px',
+        },
+      },
+    },
+  },
+};
+export default Tabs;
diff --git a/src/theme/components/Textarea.ts b/src/theme/components/Textarea.ts
index 3b42405..81a8866 100644
--- a/src/theme/components/Textarea.ts
+++ b/src/theme/components/Textarea.ts
@@ -20,6 +20,12 @@ const Textarea = {
         'linear-gradient(95.58deg, #FF3864 0%, #8B1DBA 53.65%, #4353DF 100%)',
       borderRadius: '0px',
     },
+    solidOutline: {
+      border: '1px solid',
+      backgroundColor: 'transparent',
+      borderRadius: '0px',
+      borderColor: 'primary.500',
+    },
     flushed: {
       borderBottom: '1px solid',
       borderImageSlice: 1,
diff --git a/src/theme/gradientStyles.ts b/src/theme/gradientStyles.ts
index 2455efd..bf5f86b 100644
--- a/src/theme/gradientStyles.ts
+++ b/src/theme/gradientStyles.ts
@@ -31,6 +31,14 @@ const GradientStyles = {
     bgGradient:
       'linear-gradient(157.1deg, #22002b 0%, #390418 29.17%, #48093A 61.98%, #1F0442 100%)',
   },
+  orangeToPurpleDiagonalGradient: {
+    bgGradient:
+      'linear-gradient(95deg, #FF5A00 0%, #D62789 70.2%, #AD17AD 100%)',
+  },
+  orangeToPurpleSharpGradient: {
+    bgGradient:
+      'linear-gradient(105deg, #FF5A00 0%, #D62789 20.2%, #AD17AD 80%)',
+  },
 };
 
 export default GradientStyles;
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 3a1d03f..be77b84 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -24,6 +24,7 @@ import Switch from './components/Switch';
 import Text from './components/Text';
 import Textarea from './components/Textarea';
 import Tooltip from './components/Tooltip';
+import Tabs from './components/Tabs';
 
 const theme = extendTheme({
   styles: (props: StyleFunctionProps) => ({
@@ -84,6 +85,7 @@ const theme = extendTheme({
     Slider,
     Spinner,
     Switch,
+    Tabs,
     Textarea,
     Text,
     Tooltip,