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/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/dropdown-menu/dropdown-menu.stories.tsx

@@ -7,6 +7,13 @@ import { DropdownMenu } from './dropdown-menu'
 const Story: Meta<typeof DropdownMenu.Root> = {
   component: DropdownMenu.Root,
   title: 'DropdownMenu',
+  argTypes: {
+    side: {
+      control: { type: 'inline-radio' },
+      options: ['bottom', 'left', 'right', 'top'],
+      labels: { bottom: 'down' },
+    },
+  },
   decorators: [
     (Story) => (
       <div style={{ background: 'white', padding: '3em' }}>
@@ -18,14 +25,17 @@ const Story: Meta<typeof DropdownMenu.Root> = {
 export default Story
 
 export const Primary = {
-  render: () => (
+  args: {
+    side: 'bottom',
+  },
+  render: (args: { side: 'bottom' | 'left' | 'right' | 'top' }) => (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
         <Button size="md" variant="outline" color="neutral">
           Trigger
         </Button>
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
+      <DropdownMenu.Content side={args.side}>
         <DropdownMenu.Item icon={<Icon iconName="play" />}>Deploy</DropdownMenu.Item>
         <DropdownMenu.Item icon={<Icon iconName="play" />} color="yellow">
           Update

libs/shared/ui/src/lib/components/dropdown-menu/dropdown-menu.tsx

@@ -5,15 +5,15 @@ import { type ComponentPropsWithoutRef, type ElementRef, type ReactElement, clon
 import { twMerge } from '@qovery/shared/util-js'
 
 const dropdownMenuItemVariants = cva(
-  ['px-3', 'flex', 'items-center', 'h-8', 'text-sm', 'font-medium', 'rounded-sm', 'outline-none', 'select-none'],
+  ['px-3', 'flex', 'items-center', 'h-8', 'text-sm', 'font-medium', 'rounded-sm', 'outline-none', 'select-none', 'rounded'],
   {
     variants: {
       color: {
         brand: [
-          'data-[highlighted]:bg-brand-2',
-          'data-[highlighted]:text-brand-11',
-          'hover:bg-brand-2',
-          'hover:text-brand-11',
+          'data-[highlighted]:bg-surface-brand-component',
+          'data-[highlighted]:text-brand',
+          'hover:bg-surface-brand-component',
+          'hover:text-brand',
         ],
         red: [
           'data-[highlighted]:bg-surface-negative-component',
@@ -29,7 +29,7 @@ const dropdownMenuItemVariants = cva(
         ],
       },
       disabled: {
-        true: ['cursor-not-allowed'],
+        true: ['cursor-not-allowed, hover:bg-transparent, hover:text-neutral-disabled'],
         false: ['cursor-pointer'],
       },
     },
@@ -67,7 +67,7 @@ const dropdownMenuItemVariants = cva(
   }
 )
 
-const dropdownMenuItemIconVariants = cva(['text-sm', 'mr-3'], {
+const dropdownMenuItemIconVariants = cva(['text-sm', 'mr-2'], {
   variants: {
     color: {
       brand: [],
@@ -145,7 +145,7 @@ const DropdownMenuContent = forwardRef<ElementRef<typeof DropdownMenuPrimitive.C
           sideOffset={sideOffset}
           align={align}
           className={twMerge(
-            'flex w-[258px] flex-col gap-1 rounded-md border border-neutral bg-surface-neutral p-2 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded',
+            'flex w-[258px] flex-col gap-1 rounded-md border border-neutral bg-surface-neutral p-2 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-down-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-up-md-faded',
             className
           )}
           ref={ref}

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

@@ -13,12 +13,12 @@ export function Dropzone({ isDragActive, typeFile = '.env', className }: Dropzon
   return (
     <div
       className={twMerge(
-        `flex min-h-[140px] w-full cursor-pointer items-center justify-center rounded border border-neutral-250 bg-neutral-100 text-xs text-neutral-350 transition-all duration-150 ease-in-out hover:border-neutral-300`,
+        `flex min-h-[140px] w-full cursor-pointer items-center justify-center rounded border border-neutral-component bg-surface-neutral-component text-xs text-neutral-subtle transition-all duration-150 ease-in-out hover:bg-surface-neutral-componentHover`,
         classNamesDragIsActive,
         className
       )}
     >
-      <div className="flex h-full flex-col items-center justify-center text-center text-neutral-350">
+      <div className="flex h-full flex-col items-center justify-center text-center text-neutral-subtle">
         <Icon iconName="file-arrow-down" iconStyle="regular" className="mb-2 text-xl" />
         {!isDragActive ? (
           <p className="text-ssm">Click to import your {typeFile} file or drag and drop it</p>

libs/shared/ui/src/lib/components/empty-state/empty-state.tsx

@@ -14,7 +14,7 @@ export function EmptyState({ title, description, className, icon, children }: Em
   return (
     <div
       className={twMerge(
-        'flex h-56 flex-col items-center justify-center gap-4 rounded-lg border border-neutral bg-surface-neutral p-10 text-center text-sm text-neutral-subtle',
+        'flex h-56 flex-col items-center justify-center gap-4 rounded-lg border border-neutral bg-surface-neutral-subtle p-10 text-center text-sm text-neutral-subtle',
         className
       )}
     >

libs/shared/ui/src/lib/components/inputs/input-select/input-select.tsx

@@ -226,7 +226,7 @@ export function InputSelect({
 
   const inputActions =
     hasFocus && !disabled
-      ? '!border-brand-strong !shadow-[0_2px_2px_rgba(0, 0, 0, 0.05)] input--focused'
+      ? '!border-brand-strong input--focused'
       : disabled
         ? '!bg-surface-neutral-subtle !border-neutral !pointer-events-none'
         : hasError
@@ -273,6 +273,7 @@ export function InputSelect({
         ...base,
         backgroundColor: 'var(--neutral-1)',
         borderRadius: '6px',
+        borderColor: 'var(--neutral-6)',
       }),
       menuList: (base) => ({
         ...base,

libs/shared/ui/src/lib/styles/components/select.scss

@@ -63,6 +63,7 @@
   width: calc(100% + 2rem) !important;
   left: -1rem;
   margin-top: 1rem !important;
+  box-shadow: 0 0 0 1px var(--neutral-6), 0 4px 11px hsla(0,0,0,0.1) !important;
   @apply p-2;
 }
 
@@ -84,7 +85,7 @@
   }
 
   .input-select__checkbox {
-    @apply flex h-4 w-4 shrink-0 items-center justify-center rounded border border-neutral bg-surface-neutral;
+    @apply flex h-4 w-4 shrink-0 items-center justify-center rounded border border-neutral bg-surface-neutral text-neutralInvert;
   }
 }
 

tailwind-workspace-preset.js

@@ -290,6 +290,7 @@ module.exports = {
             componentHover: 'var(--neutral-4)',
             componentActive: 'var(--neutral-5)',
             solid: 'var(--neutral-9)',
+            contrasted: 'var(--contrast)',
           },
           neutralInvert: {
             DEFAULT: 'var(--neutral-invert-1)',