feat: add variant options with new colors (#2121)

In this PR I've updated the divider to support the new colors and have the options to choose which one to use.

Different colors are being used when using the new variant prop.

.changeset/shiny-crews-sleep.md

@@ -0,0 +1,5 @@
+---
+"@kadena/react-ui": minor
+---
+
+Added a new variant to apply different colors to the Divider component

packages/libs/react-ui/src/components/Divider/Divider.css.ts

@@ -1,15 +1,35 @@
-import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { token } from '../../styles';
 import { atoms } from '../../styles/atoms.css';
-import { tokens } from '../../styles/index';
 
-export const dividerClass = style([
-  atoms({
-    width: '100%',
-    marginBlock: 'lg',
-    border: 'none',
-  }),
-  {
-    backgroundColor: tokens.kda.foundation.color.border.base.bold,
-    height: tokens.kda.foundation.border.width.hairline,
+export const dividerClass = recipe({
+  base: [
+    atoms({
+      width: '100%',
+      marginBlock: 'lg',
+      border: 'none',
+    }),
+    {
+      height: token('border.width.hairline'),
+    },
+  ],
+  variants: {
+    variant: {
+      subtle: {
+        backgroundColor: token('color.border.base.subtle'),
+      },
+      base: {
+        backgroundColor: token('color.border.base.default'),
+      },
+      bold: {
+        backgroundColor: token('color.border.base.bold'),
+      },
+      boldest: {
+        backgroundColor: token('color.border.base.boldest'),
+      },
+      highContrast: {
+        backgroundColor: token('color.border.base.high-contrast'),
+      },
+    },
   },
-]);
+});

packages/libs/react-ui/src/components/Divider/Divider.stories.tsx

@@ -1,14 +1,26 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { withContentWidth } from '../../storyDecorators';
+import { getVariants } from '../../storyDecorators/getVariants';
 import { Card } from '../Card';
 import { Divider } from './Divider';
+import { dividerClass } from './Divider.css';
+
+const variants = getVariants(dividerClass);
 
 const meta: Meta = {
   title: 'Layout/Divider',
   decorators: [withContentWidth],
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: variants.variant,
+    },
+  },
   parameters: {
-    status: { type: 'releaseCandidate' },
+    status: { type: 'stable' },
     docs: {
       description: {
         component:
@@ -24,7 +36,7 @@ type Story = StoryObj;
 export const Static: Story = {
   name: 'Divider',
 
-  render: () => {
+  render: (args) => {
     return (
       <>
         <Card>
@@ -35,7 +47,7 @@ export const Static: Story = {
           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
           culpa qui officia deserunt mollit anim id est laborum.
-          <Divider />
+          <Divider {...args} />
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
           minim veniam, quis nostrud exercitation ullamco laboris nisi ut

packages/libs/react-ui/src/components/Divider/Divider.tsx

@@ -1,16 +1,31 @@
+import type { RecipeVariants } from '@vanilla-extract/recipes';
 import cn from 'classnames';
 import type { ComponentPropsWithRef, FC } from 'react';
 import React from 'react';
 import { useSeparator } from 'react-aria';
 import { dividerClass } from './Divider.css';
 
-export interface IDividerProps extends ComponentPropsWithRef<'hr'> {}
+type Variants = NonNullable<RecipeVariants<typeof dividerClass>>;
 
-export const Divider: FC<IDividerProps> = ({ className, ...props }) => {
+export interface IDividerProps extends ComponentPropsWithRef<'hr'> {
+  variant?: Variants['variant'];
+}
+
+export const Divider: FC<IDividerProps> = ({
+  className,
+  variant = 'base',
+  ...props
+}) => {
   const { separatorProps } = useSeparator({
     ...props,
     elementType: 'hr',
     orientation: 'horizontal',
   });
-  return <hr className={cn(dividerClass, className)} {...separatorProps} />;
+
+  return (
+    <hr
+      className={cn(dividerClass({ variant }), className)}
+      {...separatorProps}
+    />
+  );
 };