Feat/component tokens

libs/shared/ui/src/lib/components/accordion/accordion.tsx

@@ -31,7 +31,7 @@ const AccordionTrigger = forwardRef<ElementRef<typeof AccordionPrimitive.Trigger
     >
       <Icon
         iconName="chevron-down"
-        className="text-neutral-350 transition-transform duration-200 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180"
+        className="text-neutral-subtle transition-transform duration-200 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180"
         aria-hidden
       />
       {children}

libs/shared/ui/src/lib/components/action-toolbar/action-toolbar.tsx

@@ -46,6 +46,9 @@ const toolbarButtonVariants = cva(['active:scale-100'], {
       className: [
         'first:rounded-l',
         'last:rounded-r',
+        'first:border-r-0',
+        'first:border-x',
+        'border-l-0',
         'hover:border-brand-strong',
         'data-[state=open]:bg-surface-brand-subtle',
         'data-[state=open]:border-brand-strong',

libs/shared/ui/src/lib/components/badge/badge.stories.tsx

@@ -6,7 +6,7 @@ const Story: Meta<typeof Badge> = {
   title: 'Badge',
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ background: 'bg-surface-neutral', padding: '3em' }}>
         <Story />
       </div>
     ),

libs/shared/ui/src/lib/components/badge/badge.tsx

@@ -35,7 +35,7 @@ const badgeVariants = cva(['text-neutral', 'inline-flex', 'items-center', 'shrin
     {
       variant: 'surface',
       color: 'red',
-      className: ['bg-surface-negative-subtle'],
+      className: ['bg-surface-negative-subtle', 'text-negative'],
     },
     {
       variant: 'outline',
@@ -45,7 +45,7 @@ const badgeVariants = cva(['text-neutral', 'inline-flex', 'items-center', 'shrin
     {
       variant: 'surface',
       color: 'purple',
-      className: ['bg-surface-accent1-component'],
+      className: ['bg-surface-accent1-component', 'text-accent1'],
     },
     {
       variant: 'outline',
@@ -55,7 +55,7 @@ const badgeVariants = cva(['text-neutral', 'inline-flex', 'items-center', 'shrin
     {
       variant: 'surface',
       color: 'sky',
-      className: ['bg-surface-info-subtle'],
+      className: ['bg-surface-info-subtle', 'text-info'],
     },
     {
       variant: 'outline',
@@ -65,7 +65,7 @@ const badgeVariants = cva(['text-neutral', 'inline-flex', 'items-center', 'shrin
     {
       variant: 'surface',
       color: 'green',
-      className: ['bg-surface-positive-subtle'],
+      className: ['bg-surface-positive-subtle', 'text-positive'],
     },
     {
       variant: 'outline',
@@ -75,7 +75,7 @@ const badgeVariants = cva(['text-neutral', 'inline-flex', 'items-center', 'shrin
     {
       variant: 'surface',
       color: 'yellow',
-      className: ['bg-surface-warning-subtle'],
+      className: ['bg-surface-warning-subtle', 'text-warning'],
     },
     {
       variant: 'outline',
@@ -85,7 +85,7 @@ const badgeVariants = cva(['text-neutral', 'inline-flex', 'items-center', 'shrin
     {
       variant: 'surface',
       color: 'brand',
-      className: ['bg-surface-brand-subtle'],
+      className: ['bg-surface-brand-subtle', 'text-brand'],
     },
     {
       variant: 'outline',

libs/shared/ui/src/lib/components/banner/banner.tsx

@@ -8,25 +8,12 @@ import Icon from '../icon/icon'
 const bannerVariants = cva('flex h-10 items-center justify-center text-sm font-medium', {
   variants: {
     color: {
-      brand: ['bg-brand-500', 'text-white'],
-      yellow: ['bg-yellow-500', 'text-yellow-900'],
-      purple: ['bg-purple-500', 'text-white'],
-      red: ['bg-red-500', 'text-white'],
+      brand: ['bg-surface-brand-component', 'text-brand'],
+      yellow: ['bg-surface-warning-component', 'text-warning'],
+      red: ['bg-surface-negative-component', 'text-negative'],
     },
   },
 })
-
-const buttonVariants = cva('ml-4', {
-  variants: {
-    color: {
-      brand: ['!bg-brand-400/50', 'hover:!bg-brand-400/75', '!text-white'],
-      yellow: ['!bg-yellow-600/50', 'hover:!bg-yellow-600/75', '!text-yellow-900'],
-      purple: ['!bg-purple-400', 'hover:!bg-purple-600', '!text-white'],
-      red: ['!bg-red-400', 'hover:!bg-red-600', '!text-white'],
-    },
-  },
-})
-
 export interface BannerProps extends VariantProps<typeof bannerVariants> {
   buttonLabel?: string
   buttonIconRight?: IconName
@@ -43,18 +30,17 @@ export const Banner = forwardRef<HTMLDivElement, PropsWithChildren<BannerProps>>
     <div className={twMerge(bannerVariants({ color }), 'relative')} ref={forwardedRef}>
       {children}
       {buttonLabel && (
-        <Button type="button" className={twMerge('gap-1', buttonVariants({ color }))} onClick={onClickButton}>
+        <Button type="button" className="ml-4 gap-1" variant="solid" color={color} onClick={onClickButton}>
           {buttonLabel}
           {buttonIconRight && <Icon iconName={buttonIconRight} />}
         </Button>
       )}
       {dismissible && (
         <Button
           type="button"
-          className={twMerge(
-            'absolute right-2 top-1/2 flex h-7 w-7 -translate-y-1/2 justify-center',
-            buttonVariants({ color })
-          )}
+          variant="plain"
+          color={color}
+          className="absolute right-2 top-1/2 flex h-7 w-7 -translate-y-1/2 justify-center"
           onClick={onDismiss}
           aria-label="Dismiss"
         >

libs/shared/ui/src/lib/components/board/board.stories.tsx

@@ -7,7 +7,7 @@ const Story: Meta<typeof Board.Root> = {
   title: 'Board',
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ background: 'bg-surface-neutral', padding: '3em' }}>
         <Story />
       </div>
     ),

libs/shared/ui/src/lib/components/board/board.tsx

@@ -194,15 +194,15 @@ const BoardColumn = <T extends Card>({
 
   return (
     <motion.div layout="position" layoutId={columnId} className="flex w-60 shrink-0 flex-col rounded">
-      <div className="flex h-[58px] items-center justify-between rounded-t border border-neutral-250 bg-neutral-100 px-3 py-2">
+      <div className="flex h-[58px] items-center justify-between rounded-t-lg border border-neutral bg-surface-neutral-subtle px-3 py-2 text-neutral">
         {heading}
       </div>
 
       <div
         onDrop={(e) => handleDragEnd(e)}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
-        className={`w-full rounded-b border border-t-0 border-neutral-250 px-1 transition-colors ${active ? 'bg-green-100' : 'bg-neutral-200'}`}
+        className={`w-full rounded-b-lg border border-t-0 border-neutral px-1 text-neutral transition-colors ${active ? 'bg-surface-neutral-componentHover' : 'bg-surface-neutral-component'}`}
       >
         {children}
         <BoardDropIndicator columnId={columnId} />
@@ -227,7 +227,7 @@ const BoardCard = ({ children, cardId, columnId }: BoardCardProps) => {
         layoutId={cardId}
         draggable="true"
         onDragStart={(e) => handleDragStart(e as unknown as DragEvent)}
-        className="cursor-grab rounded border border-neutral-200 bg-neutral-50 px-2 py-3 active:cursor-grabbing active:outline active:outline-green-500"
+        className="cursor-grab rounded border border-neutral bg-surface-neutral px-2 py-3 text-neutral active:cursor-grabbing active:border-neutral-strong"
       >
         {children}
       </motion.div>
@@ -248,7 +248,7 @@ const BoardDropIndicator = ({ beforeId, columnId }: BoardDropIndicatorProps) =>
       data-before={beforeId ?? '-1'}
       data-board={boardId}
       data-column={columnId}
-      className="my-0.5 h-0.5 w-full bg-violet-400 opacity-0"
+      className="my-0.5 h-0.5 w-full bg-surface-neutral-solid opacity-0"
     />
   )
 }

libs/shared/ui/src/lib/components/button-primitive/button-primitive.tsx

@@ -158,10 +158,26 @@ const _buttonVariants = cva(
           'hover:bg-surface-brand-component',
         ],
       },
+      //plain
       {
         variant: 'plain',
         color: 'neutral',
-        className: ['text-neutral-subtle', 'hover:bg-surface-neutral-subtle'],
+        className: ['text-neutral-subtle', 'border-0', 'border-neutral-subtle', 'hover:border'],
+      },
+      {
+        variant: 'plain',
+        color: 'red',
+        className: ['text-negative', 'border-0', 'border-negative-subtle', 'hover:border'],
+      },
+      {
+        variant: 'plain',
+        color: 'yellow',
+        className: ['text-warning', 'border-0', 'border-warning-subtle', 'hover:border'],
+      },
+      {
+        variant: 'plain',
+        color: 'brand',
+        className: ['text-brand', 'border-0', 'border-brand-subtle', 'hover:border'],
       },
     ],
     defaultVariants: {

libs/shared/ui/src/lib/components/callout/callout.stories.tsx

@@ -1,14 +1,22 @@
 import type { Meta } from '@storybook/react-webpack5'
 import { Button } from '../button/button'
 import { Icon } from '../icon/icon'
-import { Callout } from './callout'
+import { Callout, type CalloutRootProps } from './callout'
+
+const COLOR_OPTIONS = ['green', 'red', 'sky', 'yellow', 'neutral', 'purple'] as const
 
 const Story: Meta<typeof Callout.Root> = {
   component: Callout.Root,
   title: 'Callout',
+  argTypes: {
+    color: {
+      options: COLOR_OPTIONS,
+      control: { type: 'select' },
+    },
+  },
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ background: 'bg-background', padding: '3em' }}>
         <Story />
       </div>
     ),
@@ -17,18 +25,19 @@ const Story: Meta<typeof Callout.Root> = {
 export default Story
 
 export const Primary = {
-  render: () => (
-    <Callout.Root color="green">
+  args: {
+    color: 'green',
+  },
+  render: (props: CalloutRootProps) => (
+    <Callout.Root {...props}>
       <Callout.Icon>
         <Icon iconName="triangle-exclamation" iconStyle="regular" />
       </Callout.Icon>
       <Callout.Text>
         <Callout.TextHeading>Lorem ipsum</Callout.TextHeading>
         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 aliquip ex ea commodo
-        consequat. Duis aute irure dolor in 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.
+        consequat. laborum.
       </Callout.Text>
     </Callout.Root>
   ),

libs/shared/ui/src/lib/components/callout/callout.tsx

@@ -2,15 +2,15 @@ import { type VariantProps, cva } from 'class-variance-authority'
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react'
 import { twMerge } from '@qovery/shared/util-js'
 
-const calloutRootVariants = cva(['flex', 'flex-row', 'gap-x-3', 'p-3', 'border', 'rounded', 'text-sm'], {
+const calloutRootVariants = cva(['flex', 'flex-row', 'gap-x-4', 'p-4', 'border', 'rounded', 'text-sm'], {
   variants: {
     color: {
       green: ['border-positive-component', 'bg-surface-positive-subtle', 'text-positive'],
       red: ['border-negative-component', 'bg-surface-negative-subtle', 'text-negative'],
       sky: ['border-info-component', 'bg-surface-info-subtle', 'text-info'],
       yellow: ['border-warning-component', 'bg-surface-warning-subtle', 'text-warning'],
       neutral: ['bg-surface-neutral-subtle', 'border-surface-neutral-component', 'text-neutral'],
-      purple: ['border-purple-500', 'bg-purple-50', 'text-purple-500'],
+      purple: ['border-accent1-subtle', 'bg-surface-accent1-component', 'text-accent1'],
     },
   },
 })
@@ -37,7 +37,7 @@ const CalloutIcon = forwardRef<ElementRef<'div'>, CalloutIconProps>(function Cal
   ref
 ) {
   return (
-    <div {...props} className={twMerge('-order-2 text-lg leading-6', className)} ref={ref}>
+    <div {...props} className={twMerge('-order-2 text-base leading-6', className)} ref={ref}>
       {children}
     </div>
   )
@@ -50,7 +50,7 @@ const CalloutText = forwardRef<ElementRef<'div'>, CalloutTextProps>(function Cal
   ref
 ) {
   return (
-    <div {...props} className={twMerge('-order-1 mr-auto gap-x-3 text-neutral', className)} ref={ref}>
+    <div {...props} className={twMerge('-order-1 mr-auto gap-x-4 text-neutral', className)} ref={ref}>
       {children}
     </div>
   )

libs/shared/ui/src/lib/components/copy-to-clipboard/copy-to-clipboard.tsx

@@ -37,7 +37,7 @@ export function CopyToClipboard({ text, children, className = '' }: CopyToClipbo
               ...child.props,
               color: 'green',
               variant: 'solid',
-              className: twMerge(child.props.className, 'hover:bg-green-500'),
+              className: twMerge(child.props.className, 'hover:bg-surface-positive-solidHover'),
             },
             <Icon iconName="check" className="mr-1" />,
             'Copied'

libs/shared/ui/src/lib/components/description-list/description-list.stories.tsx

@@ -6,7 +6,7 @@ const Story: Meta<typeof DescriptionList.Root> = {
   title: 'Description List',
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ background: 'bg-background', padding: '3em' }}>
         <Story />
       </div>
     ),
@@ -17,15 +17,6 @@ export default Story
 export const HighlightDetails = {
   render: () => (
     <>
-      <div className="dark bg-neutral-550">
-        <DescriptionList.Root>
-          <DescriptionList.Term>Name:</DescriptionList.Term>
-          <DescriptionList.Details>Foobar</DescriptionList.Details>
-
-          <DescriptionList.Term>Version:</DescriptionList.Term>
-          <DescriptionList.Details>1.2.3</DescriptionList.Details>
-        </DescriptionList.Root>
-      </div>
       <DescriptionList.Root>
         <DescriptionList.Term>Name:</DescriptionList.Term>
         <DescriptionList.Details>Foobar</DescriptionList.Details>
@@ -40,15 +31,6 @@ export const HighlightDetails = {
 export const HighlightTerm = {
   render: () => (
     <>
-      <div className="dark bg-neutral-550">
-        <DescriptionList.Root hightlight="term">
-          <DescriptionList.Term>Name:</DescriptionList.Term>
-          <DescriptionList.Details>Foobar</DescriptionList.Details>
-
-          <DescriptionList.Term>Version:</DescriptionList.Term>
-          <DescriptionList.Details>1.2.3</DescriptionList.Details>
-        </DescriptionList.Root>
-      </div>
       <DescriptionList.Root hightlight="term">
         <DescriptionList.Term>Name:</DescriptionList.Term>
         <DescriptionList.Details>Foobar</DescriptionList.Details>

libs/shared/ui/src/lib/components/description-list/description-list.tsx

@@ -32,12 +32,7 @@ const DescriptionTerm = forwardRef<ElementRef<'dt'>, DescriptionTermProps>(funct
   return (
     <dt
       ref={ref}
-      className={twMerge(
-        highlight === 'term'
-          ? 'font-medium text-neutral-400 dark:font-normal dark:text-white'
-          : 'text-neutral-350 dark:text-neutral-300',
-        className
-      )}
+      className={twMerge(highlight === 'term' ? 'font-medium text-neutral' : 'text-neutral-subtle', className)}
       {...rest}
     >
       {children}
@@ -55,12 +50,7 @@ const DescriptionDetails = forwardRef<ElementRef<'dd'>, DescriptionDetailsProps>
   return (
     <dd
       ref={ref}
-      className={twMerge(
-        highlight === 'details'
-          ? 'font-medium text-neutral-400 dark:font-normal dark:text-white'
-          : 'text-neutral-350 dark:text-neutral-300',
-        className
-      )}
+      className={twMerge(highlight === 'details' ? 'font-medium text-neutral' : 'text-neutral-subtle', className)}
       {...rest}
     >
       {children}