wip

webiny · Jan 23, 2025 · fcfe1eb · fcfe1eb
1 parent 6c9f38f
commit fcfe1eb
Show file tree

Hide file tree

Showing 26 changed files with 122 additions and 120 deletions.
diff --git a/packages/admin-ui/src/AutoComplete/primitives/components/AutoCompleteInputIcons.tsx b/packages/admin-ui/src/AutoComplete/primitives/components/AutoCompleteInputIcons.tsx
@@ -13,7 +13,7 @@ interface AutoCompleteInputIconsProps {
 
 export const AutoCompleteInputIcons = (props: AutoCompleteInputIconsProps) => {
     return (
-        <div className={"flex items-center gap-sm"}>
+        <div className={"wby-flex wby-items-center wby-gap-sm"}>
             {props.displayResetAction && (
                 <IconButton
                     size={"xs"}

diff --git a/packages/admin-ui/src/AutoComplete/primitives/components/AutoCompleteList.tsx b/packages/admin-ui/src/AutoComplete/primitives/components/AutoCompleteList.tsx
@@ -28,7 +28,9 @@ export const AutoCompleteList = ({
                 return null;
             }
 
-            const elements = [<Command.Item key={"dummy-element"} value="-" className="hidden" />];
+            const elements = [
+                <Command.Item key={"dummy-element"} value="-" className="wby-hidden" />
+            ];
 
             return items.reduce((acc, item, currentIndex) => {
                 acc.push(

diff --git a/packages/admin-ui/src/Checkbox/CheckboxPrimitive.tsx b/packages/admin-ui/src/Checkbox/CheckboxPrimitive.tsx
@@ -14,7 +14,7 @@ const IndeterminateIcon = () => {
     return (
         <span
             className={
-                "wby-block wby-w-sm wby-h-xxs wby-rounded-sm wby-bg-primary-default wby-group-disabled:wby-bg-primary-disabled"
+                "wby-block wby-w-sm wby-h-xxs wby-rounded-sm wby-bg-primary-default group-disabled:wby-bg-primary-disabled"
             }
         />
     );
@@ -27,22 +27,22 @@ const checkboxVariants = cva(
     [
         "wby-group wby-peer wby-h-md wby-w-md wby-shrink-0 wby-rounded-sm wby-border-sm ",
         "wby-border-neutral-muted wby-bg-neutral-base wby-[&_svg]:!wby-fill-neutral-base wby-ring-offset-background",
-        "wby-hover:wby-border-neutral-dark",
-        "wby-focus:wby-outline-none wby-focus-visible:wby-border-accent-default wby-focus-visible:wby-ring-lg wby-focus-visible:wby-ring-primary-dimmed wby-focus-visible:wby-ring-offset-0",
-        "wby-disabled:wby-cursor-not-allowed wby-disabled:wby-border-transparent wby-disabled:wby-bg-neutral-disabled",
-        "wby-data-[state=checked]:wby-bg-primary-default wby-data-[state=checked]:wby-border-transparent",
-        "wby-data-[state=checked]:wby-hover:wby-bg-primary-strong",
-        "wby-data-[state=checked]:wby-disabled:wby-bg-neutral-disabled wby-data-[state=checked]:wby-disabled:wby-fill-neutral-strong"
+        "hover:wby-border-neutral-dark",
+        "focus:wby-outline-none focus-visible:wby-border-accent-default focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed focus-visible:wby-ring-offset-0",
+        "disabled:wby-cursor-not-allowed disabled:wby-border-transparent disabled:wby-bg-neutral-disabled",
+        "data-[state=checked]:wby-bg-primary-default data-[state=checked]:wby-border-transparent",
+        "data-[state=checked]:hover:wby-bg-primary-strong",
+        "data-[state=checked]:disabled:wby-bg-neutral-disabled data-[state=checked]:disabled:wby-fill-neutral-strong"
     ],
     {
         variants: {
             indeterminate: {
                 true: [
                     "wby-border-neutral-muted",
-                    "wby-data-[state=checked]:wby-bg-neutral-base wby-data-[state=checked]:wby-border-neutral-muted",
-                    "wby-data-[state=checked]:wby-hover:wby-bg-neutral-base wby-data-[state=checked]:wby-hover:wby-border-neutral-strong",
-                    "wby-data-[state=checked]:wby-focus-visible:wby-border-accent-default",
-                    "wby-data-[state=checked]:wby-disabled:wby-border-transparent"
+                    "data-[state=checked]:wby-bg-neutral-base data-[state=checked]:wby-border-neutral-muted",
+                    "data-[state=checked]:hover:wby-bg-neutral-base data-[state=checked]:hover:wby-border-neutral-strong",
+                    "data-[state=checked]:focus-visible:wby-border-accent-default",
+                    "data-[state=checked]:disabled:wby-border-transparent"
                 ]
             },
             hasLabel: {

diff --git a/packages/admin-ui/src/Dialog/components/DialogContent.tsx b/packages/admin-ui/src/Dialog/components/DialogContent.tsx
@@ -30,7 +30,7 @@ const DialogContent = React.forwardRef<
             {...props}
             ref={ref}
             className={cn(
-                "wby-fixed wby-left-[50%] wby-top-[50%] wby-z-50 wby-grid wby-w-full wby-max-w-lg wby-border wby-bg-neutral-base wby-shadow-lg wby-focus-visible:outline-none wby-rounded-xl wby-text-md wby-text-neutral-strong",
+                "wby-fixed wby-left-[50%] wby-top-[50%] wby-z-50 wby-grid wby-w-full wby-max-w-lg wby-border wby-bg-neutral-base wby-shadow-lg focus-visible:outline-none wby-rounded-xl wby-text-md wby-text-neutral-strong",
                 "wby-translate-x-[-50%] wby-translate-y-[-50%] wby-duration-200 data-[state=open]:wby-animate-in data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out-0 data-[state=open]:wby-fade-in-0 data-[state=closed]:wby-zoom-out-95 data-[state=open]:wby-zoom-in-95 data-[state=closed]:wby-slide-out-to-left-1/2 data-[state=closed]:wby-slide-out-to-top-[48%] data-[state=open]:wby-slide-in-from-left-1/2 data-[state=open]:wby-slide-in-from-top-[48%]",
                 className
             )}

diff --git a/packages/admin-ui/src/Dialog/components/DialogDescription.tsx b/packages/admin-ui/src/Dialog/components/DialogDescription.tsx
@@ -9,6 +9,6 @@ export type DialogDescriptionProps = React.ComponentPropsWithoutRef<
 export const DialogDescription = ({ className, ...props }: DialogDescriptionProps) => (
     <DialogPrimitive.Description
         {...props}
-        className={cn("wby-text-sm wby-text-neutral-strong", className)}
+        className={cn("wby-text-sm wby-text-neutral-strong wby-text-left", className)}
     />
 );
diff --git a/packages/admin-ui/src/Dialog/components/DialogOverlay.tsx b/packages/admin-ui/src/Dialog/components/DialogOverlay.tsx
@@ -9,7 +9,7 @@ export const DialogOverlay = React.forwardRef<
     <DialogPrimitive.Overlay
         ref={ref}
         className={cn(
-            "wby-fixed wby-inset-0 wby-z-50 wby-bg-neutral-dark/50 wby-data-[state=open]:animate-in wby-data-[state=closed]:animate-out wby-data-[state=closed]:fade-out-0 wby-data-[state=open]:fade-in-0",
+            "wby-fixed wby-inset-0 wby-z-50 wby-bg-neutral-dark/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
             className
         )}
         {...props}

diff --git a/packages/admin-ui/src/Drawer/components/DrawerContent.tsx b/packages/admin-ui/src/Drawer/components/DrawerContent.tsx
@@ -12,7 +12,7 @@ export interface DrawerContentProps
 
 const drawerVariants = cva(
     [
-        "wby-fixed wby-z-50 wby-gap-4 wby-bg-neutral-base wby-text-md wby-text-neutral-strong wby-focus-visible:outline-none wby-shadow-lg",
+        "wby-fixed wby-z-50 wby-gap-4 wby-bg-neutral-base wby-text-md wby-text-neutral-strong focus-visible:outline-none wby-shadow-lg",
         "wby-transition wby-ease-in-out data-[state=open]:wby-animate-in data-[state=closed]:wby-animate-out data-[state=closed]:wby-duration-300 data-[state=open]:wby-duration-500"
     ],
     {

diff --git a/packages/admin-ui/src/Drawer/components/DrawerDescription.tsx b/packages/admin-ui/src/Drawer/components/DrawerDescription.tsx
@@ -9,6 +9,6 @@ export type DrawerDescriptionProps = React.ComponentPropsWithoutRef<
 export const DrawerDescription = ({ className, ...props }: DrawerDescriptionProps) => (
     <DrawerPrimitive.Description
         {...props}
-        className={cn("wby-text-sm wby-text-neutral-strong", className)}
+        className={cn("wby-text-sm wby-text-neutral-strong wby-text-left", className)}
     />
 );
diff --git a/packages/admin-ui/src/Input/InputPrimitive.tsx b/packages/admin-ui/src/Input/InputPrimitive.tsx
@@ -88,8 +88,8 @@ const InputIcon = ({ icon, disabled, position, inputSize, className }: InputIcon
 const inputVariants = cva(
     [
         "wby-w-full wby-border-sm wby-text-md wby-peer",
-        "wby-focus-visible:wby-outline-none",
-        "wby-disabled:wby-cursor-not-allowed wby-data-[disabled=true]:wby-cursor-not-allowed",
+        "focus-visible:wby-outline-none",
+        "disabled:wby-cursor-not-allowed data-[disabled=true]:wby-cursor-not-allowed",
         "wby-file:wby-bg-transparent wby-file:wby-border-none wby-file:wby-text-sm wby-file:wby-font-semibold"
     ],
     {
@@ -111,27 +111,27 @@ const inputVariants = cva(
             variant: {
                 primary: [
                     "wby-bg-neutral-base wby-border-neutral-muted wby-text-neutral-strong wby-placeholder:wby-text-neutral-dimmed",
-                    "wby-hover:wby-border-neutral-strong",
-                    "wby-focus:wby-border-neutral-black",
-                    "wby-data-[focused=true]:wby-border-neutral-black",
-                    "wby-disabled:wby-bg-neutral-disabled wby-disabled:wby-border-neutral-dimmed wby-disabled:wby-text-neutral-disabled wby-disabled:wby-placeholder:wby-text-neutral-disabled",
-                    "wby-data-[disabled=true]:wby-bg-neutral-disabled wby-data-[disabled=true]:wby-border-neutral-dimmed wby-data-[disabled=true]:wby-text-neutral-disabled wby-data-[disabled=true]:wby-placeholder:wby-text-neutral-disabled"
+                    "hover:wby-border-neutral-strong",
+                    "focus:wby-border-neutral-black",
+                    "data-[focused=true]:wby-border-neutral-black",
+                    "disabled:wby-bg-neutral-disabled disabled:wby-border-neutral-dimmed disabled:wby-text-neutral-disabled disabled:wby-placeholder:wby-text-neutral-disabled",
+                    "data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-border-neutral-dimmed data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:wby-placeholder:wby-text-neutral-disabled"
                 ],
                 secondary: [
                     "wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong wby-placeholder:wby-text-neutral-dimmed",
-                    "wby-hover:wby-bg-neutral-dimmed",
-                    "wby-focus:wby-bg-neutral-base wby-focus:wby-border-neutral-black",
-                    "wby-data-[focused=true]:wby-bg-neutral-base wby-data-[focused=true]:wby-border-neutral-black",
-                    "wby-disabled:wby-bg-neutral-disabled wby-disabled:wby-text-neutral-disabled wby-disabled:wby-placeholder:wby-text-neutral-disabled",
-                    "wby-data-[disabled=true]:wby-bg-neutral-disabled wby-data-[disabled=true]:wby-text-neutral-disabled wby-data-[disabled=true]:wby-placeholder:wby-text-neutral-disabled"
+                    "hover:wby-bg-neutral-dimmed",
+                    "focus:wby-bg-neutral-base focus:wby-border-neutral-black",
+                    "data-[focused=true]:wby-bg-neutral-base data-[focused=true]:wby-border-neutral-black",
+                    "disabled:wby-bg-neutral-disabled disabled:wby-text-neutral-disabled disabled:wby-placeholder:wby-text-neutral-disabled",
+                    "data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:wby-placeholder:wby-text-neutral-disabled"
                 ],
                 ghost: [
                     "wby-bg-transparent wby-border-transparent wby-text-neutral-strong wby-placeholder:wby-text-neutral-dimmed",
-                    "wby-hover:wby-bg-neutral-dimmed/95",
-                    "wby-focus:wby-bg-neutral-base wby-focus:wby-border-neutral-black",
-                    "wby-data-[focused=true]:wby-bg-neutral-base wby-data-[focused=true]:wby-border-neutral-black",
-                    "wby-disabled:wby-bg-transparent wby-disabled:wby-text-neutral-disabled wby-disabled:wby-placeholder:wby-text-neutral-disabled",
-                    "wby-data-[disabled=true]:wby-bg-transparent wby-data-[disabled=true]:wby-text-neutral-disabled wby-data-[disabled=true]:wby-placeholder:wby-text-neutral-disabled"
+                    "hover:wby-bg-neutral-dimmed/95",
+                    "focus:wby-bg-neutral-base focus:wby-border-neutral-black",
+                    "data-[focused=true]:wby-bg-neutral-base data-[focused=true]:wby-border-neutral-black",
+                    "disabled:wby-bg-transparent disabled:wby-text-neutral-disabled disabled:wby-placeholder:wby-text-neutral-disabled",
+                    "data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:wby-placeholder:wby-text-neutral-disabled"
                 ]
             },
             iconPosition: {

diff --git a/packages/admin-ui/src/Link/Link.tsx b/packages/admin-ui/src/Link/Link.tsx
@@ -18,24 +18,24 @@ const linkVariants = cva("wby-font-sans wby-rounded-xs", {
         variant: {
             primary: [
                 "wby-text-accent-primary",
-                "wby-focus-visible:wby-outline-none wby-focus-visible:wby-ring-[2px] wby-focus-visible:wby-ring-primary-dimmed"
+                "focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-dimmed"
             ],
             secondary: [
                 "wby-text-neutral-primary",
-                "wby-focus-visible:wby-outline-none wby-focus-visible:wby-ring-[2px] wby-focus-visible:wby-ring-primary-dimmed"
+                "focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-dimmed"
             ],
             "primary-negative": [
                 "wby-text-accent-primary",
-                "wby-focus-visible:wby-outline-none wby-focus-visible:wby-ring-[2px] wby-focus-visible:wby-ring-primary-strong"
+                "focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-strong"
             ],
             "secondary-negative": [
                 "wby-text-neutral-light",
-                "wby-focus-visible:wby-outline-none wby-focus-visible:wby-ring-[2px] wby-focus-visible:wby-ring-primary-strong"
+                "focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-strong"
             ]
         },
         underline: {
-            true: "wby-underline wby-hover:wby-no-underline",
-            false: "wby-hover:wby-underline"
+            true: "wby-underline hover:wby-no-underline",
+            false: "hover:wby-underline"
         }
     },
     defaultVariants: {

diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteInput.tsx b/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteInput.tsx
@@ -4,10 +4,10 @@ import { Command, CommandOptionFormatted } from "~/Command";
 import { Tag } from "~/Tag";
 import { cn, cva, VariantProps } from "~/utils";
 
-const multiAutoCompleteInputVariants = cva("relative placeholder:text-neutral-dimmed", {
+const multiAutoCompleteInputVariants = cva("wby-relative wby-placeholder:text-neutral-dimmed", {
     variants: {
         disabled: {
-            true: "cursor-not-allowed disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled"
+            true: "wby-cursor-not-allowed disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled"
         }
     }
 });
@@ -101,10 +101,10 @@ const MultiAutoCompleteInput = ({
                     position={"start"}
                 />
             )}
-            <div className="relative flex flex-wrap gap-xs">
+            <div className="wby-relative wby-flex wby-flex-wrap wby-gap-xs">
                 {renderSelectedOptions(selectedOptions)}
                 <Command.Input
-                    className={"flex-1 bg-transparent border-none outline-none"}
+                    className={"wby-flex-1 wby-bg-transparent wby-border-none wby-outline-none"}
                     value={value}
                     onValueChange={changeValue}
                     placeholder={placeholder}

diff --git a/...ages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteInputIcons.tsx b/...ages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteInputIcons.tsx
@@ -13,7 +13,7 @@ interface MultiAutoCompleteInputIconsProps {
 
 export const MultiAutoCompleteInputIcons = (props: MultiAutoCompleteInputIconsProps) => {
     return (
-        <div className={"flex items-center gap-sm"}>
+        <div className={"wby-flex wby-items-center wby-gap-sm"}>
             {props.displayResetAction && (
                 <IconButton
                     size={"xs"}

diff --git a/packages/admin-ui/src/RadioGroup/Radio.tsx b/packages/admin-ui/src/RadioGroup/Radio.tsx
@@ -24,8 +24,8 @@ const DecoratableRadio = React.forwardRef<
                     [
                         "wby-group wby-peer wby-aspect-square wby-h-md wby-w-md wby-rounded-xl wby-mt-xxs",
                         "wby-bg-neutral-base wby-border-sm wby-border-neutral-muted wby-ring-offset-background",
-                        "wby-focus:outline-none wby-focus-visible:border-accent-default wby-focus-visible:ring-lg wby-focus-visible:ring-primary-dimmed wby-focus-visible:ring-offset-0",
-                        "wby-disabled:cursor-not-allowed wby-disabled:border-neutral-muted wby-disabled:bg-neutral-disabled"
+                        "focus:outline-none focus-visible:border-accent-default focus-visible:ring-lg focus-visible:ring-primary-dimmed focus-visible:ring-offset-0",
+                        "disabled:cursor-not-allowed disabled:border-neutral-muted disabled:bg-neutral-disabled"
                     ],
                     className
                 )}
@@ -36,7 +36,7 @@ const DecoratableRadio = React.forwardRef<
                         className={cn([
                             "wby-h-sm wby-w-sm wby-rounded-xl",
                             "wby-bg-primary-default",
-                            "wby-group-disabled:bg-neutral-strong"
+                            "group-disabled:bg-neutral-strong"
                         ])}
                     />
                 </RadioGroupPrimitive.Indicator>