@rovula/ui 0.1.4 → 0.1.6

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -28,7 +28,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       // "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-primary data-[state=open]:bg-primary",
-      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none",
+      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
       "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
       "active:opacity-75",
       "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
@@ -96,7 +96,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none",
+      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
       "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
       "active:opacity-75",
       "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
@@ -116,11 +116,11 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none",
+      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
       "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
       "active:opacity-75",
       "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
-      "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]  data-[state='checked']:typography-subtitile5",
+      "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]  data-[state='checked']:typography-subtitle5",
       "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
       className
     )}
@@ -145,11 +145,11 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none",
+      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
       "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
       "active:opacity-75",
       "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
-      "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]  data-[state='checked']:typography-subtitile5",
+      "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]  data-[state='checked']:typography-subtitle5",
       "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
       className
     )}

package/src/components/Footer/Footer.tsx

@@ -46,7 +46,7 @@ const Footer: FC<FooterProps> = ({
   return (
     <footer
       className={cn(
-        "relative w-full px-4 py-6 box-border overflow-hidden typography-subtitile2 border-solid border-t-2 text-[var(--footer-text-color)] border-t-[var(--footer-border-color)]",
+        "relative w-full px-4 py-6 box-border overflow-hidden typography-subtitle2 border-solid border-t-2 text-[var(--footer-text-color)] border-t-[var(--footer-border-color)]",
         isSimple ? "h-[var(--footer-height-simple)]" : "h-[var(--footer-height)]",
         { position },
         className

package/src/components/Input/Input.styles.tsx

@@ -10,8 +10,8 @@ export const inputVariants = cva(
     variants: {
       size: {
         sm: "p-2 px-3 typography-small1",
-        md: "py-2 px-3 typography-subtitile4",
-        lg: "p-4 typography-subtitile1",
+        md: "py-2 px-3 typography-subtitle4",
+        lg: "p-4 typography-subtitle1",
       },
       rounded: {
         none: "rounded-none",

package/src/components/InputFilter/InputFilter.tsx

@@ -179,7 +179,7 @@ const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
                     value: option.value,
                     label: option.label,
                     handleOnClick: () => handleOptionClick(option),
-                    className: `p-4 typography-subtitile4 hover:bg-gray-100 cursor-pointer  flex items-center gap-3 ${selectedOptions.some(
+                    className: `p-4 typography-subtitle4 hover:bg-gray-100 cursor-pointer  flex items-center gap-3 ${selectedOptions.some(
                       (selected) => selected.value === option.value
                     )
                       ? "bg-gray-200"
@@ -193,7 +193,7 @@ const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
               <li
                 key={option.value}
                 onMouseDown={() => handleOptionClick(option)}
-                className={`p-4 typography-subtitile4 hover:bg-primary-hover-bg cursor-pointer  flex items-center gap-3 ${selectedOptions.some(
+                className={`p-4 typography-subtitle4 hover:bg-primary-hover-bg cursor-pointer  flex items-center gap-3 ${selectedOptions.some(
                   (selected) => selected.value === option.value
                 )
                   ? "bg-base-popup-highlight"

package/src/components/Label/Label.styles.ts

@@ -8,8 +8,8 @@ export const labelVariant = cva(
     variants: {
       size: {
         sm: "typography-small1",
-        md: "typography-subtitile2",
-        lg: "typography-subtitile1",
+        md: "typography-subtitle2",
+        lg: "typography-subtitle1",
       },
       disabled: {
         true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled peer-disabled:cursor-not-allowed",
@@ -37,7 +37,7 @@ export const labelVariant = cva(
         isFloatable: true,
         className: [
           "left-3 -top-1.5 typography-label1 bg-input-label-background",
-          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent",
+          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4 peer-placeholder-shown:bg-transparent",
           "peer-focus:-top-1.5 peer-focus:typography-label1",
         ],
       },
@@ -46,7 +46,7 @@ export const labelVariant = cva(
         isFloatable: true,
         className: [
           "left-4 -top-1.5 typography-label1 bg-input-label-background",
-          "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent",
+          "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1 peer-placeholder-shown:bg-transparent",
           "peer-focus:-top-1.5 peer-focus:typography-label1",
         ],
       },

package/src/components/Menu/Menu.tsx

@@ -159,12 +159,12 @@ export const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
       <div
         ref={ref}
         className={cn(
-          "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitile4 outline-none transition-colors",
+          "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitle4 outline-none transition-colors",
           "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
           "active:opacity-75",
           "hover:bg-[var(--dropdown-menu-hover-bg)] hover:text-[var(--dropdown-menu-hover-text)]",
           {
-            "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)] typography-subtitile5":
+            "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)] typography-subtitle5":
               isChecked,
             "pointer-events-none opacity-50": option.disabled,
             "text-red-500": option.danger,

package/src/components/Navbar/Navbar.tsx

@@ -57,7 +57,7 @@ const Navbar: FC<NavbarProps> = ({
   return (
     <header
       className={cn(
-        "relative w-full px-4 py-6 h-[var(--navbar-height)] box-border overflow-hidden typography-subtitile2 border-solid border-b-2 text-[rgb(var(--navbar-text-color))] border-b-[rgb(var(--navbar-border-color))] transition-shadow duration-200",
+        "relative w-full px-4 py-6 h-[var(--navbar-height)] box-border overflow-hidden typography-subtitle2 border-solid border-b-2 text-[rgb(var(--navbar-text-color))] border-b-[rgb(var(--navbar-border-color))] transition-shadow duration-200",
         { position },
         scrollShadow && isScrolled && "shadow-[var(--navbar-shadow-scrolled)]",
         className

package/src/components/PasswordInput/PasswordInput.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full bg-[rgb(var(--base-bg-2))]">
+      <div className="p-5 flex w-full bg-base-bg2">
         <Story />
       </div>
     ),

package/src/components/PasswordInput/PasswordInput.tsx

@@ -26,8 +26,8 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
     };
 
     const toggleIcon = visible
-      ? showIcon ?? <Icon name="eye" type="lucide" size="inherit" className="size-full stroke-input-default-stroke hover:stroke-input-active-stroke" aria-label="Hide password" />
-      : hideIcon ?? <Icon name="eye-closed" type="lucide" size="inherit" className="size-full stroke-input-default-stroke hover:stroke-input-active-stroke" aria-label="Show password" />;
+      ? showIcon ?? <Icon name="eye" type="lucide" size="inherit" className="size-full" aria-label="Hide password" />
+      : hideIcon ?? <Icon name="eye-closed" type="lucide" size="inherit" className="size-full" aria-label="Show password" />;
 
     return (
       <TextInput

package/src/components/Tabs/Tabs.tsx

@@ -184,7 +184,7 @@ const Tabs: React.FC<TabsProps> = ({
                 disabled={disabled || tab.disabled}
                 id={`tab-${index}`}
                 className={cn(
-                  "flex justify-center flex-row items-center py-3 cursor-pointer transition-colors duration-300 box-border gap-1 flex-shrink-0  typography-subtitile6",
+                  "flex justify-center flex-row items-center py-3 cursor-pointer transition-colors duration-300 box-border gap-1 flex-shrink-0  typography-subtitle6",
                   {
                     "text-foreground": index === activeTab,
                     "text-text-grey-medium hover:text-text-grey-dark active:text-text-dark":

package/src/components/Text/Text.stories.tsx

@@ -30,12 +30,12 @@ const variant: any = [
   "h4",
   "h5",
   "h6",
-  "subtitile1",
-  "subtitile2",
-  "subtitile3",
-  "subtitile4",
-  "subtitile5",
-  "subtitile6",
+  "subtitle1",
+  "subtitle2",
+  "subtitle3",
+  "subtitle4",
+  "subtitle5",
+  "subtitle6",
   "body1",
   "body2",
   "body3",

package/src/components/Text/Text.tsx

@@ -10,11 +10,35 @@ export type TextProps = {
     | "h4"
     | "h5"
     | "h6"
+    | "subtitle1"
+    | "subtitle2"
+    | "subtitle3"
+    | "subtitle4"
+    | "subtitle5"
+    | "subtitle6"
+    /**
+     * @deprecated Use subtitle1 instead.
+     */
     | "subtitile1"
+    /**
+     * @deprecated Use subtitle2 instead.
+     */
     | "subtitile2"
+    /**
+     * @deprecated Use subtitle3 instead.
+     */
     | "subtitile3"
+    /**
+     * @deprecated Use subtitle4 instead.
+     */
     | "subtitile4"
+    /**
+     * @deprecated Use subtitle5 instead.
+     */
     | "subtitile5"
+    /**
+     * @deprecated Use subtitle6 instead.
+     */
     | "subtitile6"
     | "body1"
     | "body2"
@@ -62,6 +86,15 @@ const textVariants = cva(["text-foreground"], {
   },
 });
 
+const deprecatedSubtitleVariantMap: Record<string, string> = {
+  subtitile1: "subtitle1",
+  subtitile2: "subtitle2",
+  subtitile3: "subtitle3",
+  subtitile4: "subtitle4",
+  subtitile5: "subtitle5",
+  subtitile6: "subtitle6",
+};
+
 // montserrat: ["Montserrat", "sans-serif"],
 // poppins: ["Poppins", "sans-serif"],  font-montserrat, font-poppins
 // TODO font, fontBold, elipt
@@ -78,11 +111,13 @@ const Text = forwardRef<React.ElementRef<React.ElementType>, TextProps>(
     },
     ref
   ) => {
+    const normalizedVariant = deprecatedSubtitleVariantMap[variant] ?? variant;
+
     return (
       <Tag
         ref={ref}
         className={cn(
-          `typography-${variant}`,
+          `typography-${normalizedVariant}`,
           textVariants({ color }),
           className
         )}

package/src/components/TextArea/TextArea.styles.ts

@@ -9,8 +9,8 @@ export const textareaVariant = cva(
     variants: {
       size: {
         sm: "p-2 px-3 typography-small1",
-        md: "py-2 px-3 typography-subtitile4",
-        lg: "p-4 typography-subtitile1",
+        md: "py-2 px-3 typography-subtitle4",
+        lg: "p-4 typography-subtitle1",
       },
       rounded: {
         none: "rounded-none",
@@ -120,7 +120,7 @@ export const labelVariant = cva(
         size: "md",
         className: [
           "left-3 -top-1.5 typography-label1 bg-input-label-bg",
-          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent",
+          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4 peer-placeholder-shown:bg-transparent",
           "peer-focus:-top-1.5 peer-focus:typography-label1",
         ],
       },
@@ -129,7 +129,7 @@ export const labelVariant = cva(
         size: "lg",
         className: [
           "left-4 -top-1.5 typography-label1 bg-input-label-bg",
-          "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent",
+          "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1 peer-placeholder-shown:bg-transparent",
           "peer-focus:-top-1.5 peer-focus:typography-label1",
         ],
       },
@@ -146,14 +146,14 @@ export const labelVariant = cva(
         isFloatingLabel: false,
         size: "md",
         className: [
-          "left-3 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4",
+          "left-3 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4",
         ],
       },
       {
         isFloatingLabel: false,
         size: "lg",
         className: [
-          "left-4 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
+          "left-4 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1",
         ],
       },
     ],

package/src/components/TextInput/TextInput.stories.tsx

@@ -226,7 +226,7 @@ const KeepFooterSpaceDemo = () => {
           />
           Show error message
         </label>
-        <div className="flex flex-col">
+        <div className="flex flex-col gap-4">
           <div>
             <h4 className="text-sm font-medium mb-2 text-text-grey-dark">
               With keepFooterSpace (layout stays stable)
@@ -235,6 +235,7 @@ const KeepFooterSpaceDemo = () => {
               id="with-keep"
               label="Email"
               keepFooterSpace
+              size="lg"
               error={hasError}
               errorMessage={hasError ? "Please enter a valid email address" : undefined}
             />
@@ -246,6 +247,7 @@ const KeepFooterSpaceDemo = () => {
             <TextInput
               id="no-keep"
               label="Email"
+              size="lg"
               error={hasError}
               errorMessage={hasError ? "Please enter a valid email address" : undefined}
             />

package/src/components/TextInput/TextInput.styles.ts

@@ -11,8 +11,8 @@ export const inputVariant = cva(
     variants: {
       size: {
         sm: "p-2 px-3 typography-small1",
-        md: "py-2 px-3 typography-subtitile4",
-        lg: "p-4 typography-subtitile1",
+        md: "py-2 px-3 typography-subtitle4",
+        lg: "p-4 typography-subtitle1",
       },
       rounded: {
         none: "rounded-none",
@@ -140,7 +140,7 @@ export const inputVariant = cva(
 
 export const labelVariant = cva(
   [
-    "absolute block duration-450 transition-all px-[2px] text-input-default-text",
+    "absolute block select-none duration-450 transition-all px-[2px] text-input-default-text",
     "peer-focus:text-input-default-text peer-focus:bg-input-label-bg", // TODO bg
   ],
   {
@@ -182,7 +182,7 @@ export const labelVariant = cva(
         size: "md",
         className: [
           "left-3 -top-1.5 typography-label1 bg-input-label-bg",
-          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent",
+          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4 peer-placeholder-shown:bg-transparent",
           "peer-focus:-top-1.5 peer-focus:typography-label1",
         ],
       },
@@ -191,7 +191,7 @@ export const labelVariant = cva(
         size: "lg",
         className: [
           "left-4 -top-1.5 typography-label1 bg-input-label-bg",
-          "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent",
+          "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1 peer-placeholder-shown:bg-transparent",
           "peer-focus:-top-1.5 peer-focus:typography-label1",
         ],
       },
@@ -208,14 +208,14 @@ export const labelVariant = cva(
         isFloatingLabel: false,
         size: "md",
         className: [
-          "left-3 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4",
+          "left-3 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4",
         ],
       },
       {
         isFloatingLabel: false,
         size: "lg",
         className: [
-          "left-4 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
+          "left-4 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1",
         ],
       },
       // --------------
@@ -235,7 +235,7 @@ export const labelVariant = cva(
         size: "md",
         className: [
           "left-9 -top-1.5 typography-label1 bg-input-label-bg",
-          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent",
+          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4 peer-placeholder-shown:bg-transparent",
           "peer-focus:-top-1.5 peer-focus:typography-label1",
         ],
       },
@@ -245,7 +245,7 @@ export const labelVariant = cva(
         size: "lg",
         className: [
           "left-11 -top-1.5 typography-label1 bg-input-label-bg",
-          "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent",
+          "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1 peer-placeholder-shown:bg-transparent",
           "peer-focus:-top-1.5 peer-focus:typography-label1",
         ],
       },
@@ -263,7 +263,7 @@ export const labelVariant = cva(
         hasSearchIcon: true,
         size: "md",
         className: [
-          "left-9 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4",
+          "left-9 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4",
         ],
       },
       {
@@ -271,7 +271,7 @@ export const labelVariant = cva(
         hasSearchIcon: true,
         size: "lg",
         className: [
-          "left-11 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
+          "left-11 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1",
         ],
       },
 
@@ -292,7 +292,7 @@ export const labelVariant = cva(
         size: "md",
         className: [
           "left-[46px] -top-1.5 typography-label1 bg-input-label-bg",
-          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent",
+          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4 peer-placeholder-shown:bg-transparent",
           "peer-focus:-top-1.5 peer-focus:typography-label1",
         ],
       },
@@ -302,7 +302,7 @@ export const labelVariant = cva(
         size: "lg",
         className: [
           "left-[72px] -top-1.5 typography-label1 bg-input-label-bg",
-          "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent",
+          "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1 peer-placeholder-shown:bg-transparent",
           "peer-focus:-top-1.5 peer-focus:typography-label1",
         ],
       },
@@ -320,7 +320,7 @@ export const labelVariant = cva(
         hasLeftSectionIcon: true,
         size: "md",
         className: [
-          "left-[46px] peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4",
+          "left-[46px] peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4",
         ],
       },
       {
@@ -328,7 +328,7 @@ export const labelVariant = cva(
         hasLeftSectionIcon: true,
         size: "lg",
         className: [
-          "left-[72px] peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
+          "left-[72px] peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1",
         ],
       },
     ],
@@ -349,8 +349,8 @@ export const helperTextVariant = cva(
     variants: {
       size: {
         sm: "mt-1",
-        md: "mt-[6px]",
-        lg: "mt-[6px]",
+        md: "mt-1",
+        lg: "mt-1",
       },
       disabled: {
         true: "text-input-disable-text",
@@ -374,10 +374,10 @@ export const helperTextVariant = cva(
 
 const iconInteractiveColorStateClasses = [
   "fill-input-default-text",
-  "peer-hover:fill-input-filled-text peer-focus:fill-input-filled-text peer-active:fill-input-filled-text",
+  "hover:fill-input-filled-text peer-hover:fill-input-filled-text peer-focus:fill-input-filled-text peer-active:fill-input-filled-text",
   "peer-disabled:fill-input-disable-stroke",
   "[&_svg]:text-input-default-text",
-  "peer-hover:[&_svg]:text-input-filled-text peer-focus:[&_svg]:text-input-filled-text peer-active:[&_svg]:text-input-filled-text",
+  "hover:[&_svg]:text-input-filled-text peer-hover:[&_svg]:text-input-filled-text peer-focus:[&_svg]:text-input-filled-text peer-active:[&_svg]:text-input-filled-text",
   "peer-disabled:[&_svg]:text-input-disable-stroke",
 ];
 
@@ -419,21 +419,18 @@ export const inlineStartIconWrapperVariant = cva(
   },
 );
 
-export const iconActionVariant = cva(
-  ["cursor-pointer z-50"],
-  {
-    variants: {
-      size: {
-        sm: "size-3",
-        md: "size-4",
-        lg: "size-5",
-      },
-    },
-    defaultVariants: {
-      size: "md",
+export const iconActionVariant = cva(["cursor-pointer z-50 select-none"], {
+  variants: {
+    size: {
+      sm: "size-3",
+      md: "size-4",
+      lg: "size-5",
     },
   },
-);
+  defaultVariants: {
+    size: "md",
+  },
+});
 
 export const segmentedIconWrapperVariant = cva(
   [
@@ -462,11 +459,11 @@ export const segmentedIconWrapperVariant = cva(
       position: {
         start: [
           "inset-y-0 left-0 ",
-          "border-r border-r-input-default-stroke peer-hover:border-r-input-active-stroke peer-focus:border-r-input-active-stroke peer-disabled:border-r-input-disable-stroke",
+          "border-r border-r-input-default-stroke hover:border-r-input-active-stroke peer-hover:border-r-input-active-stroke peer-focus:border-r-input-active-stroke peer-disabled:border-r-input-disable-stroke",
         ],
         end: [
           "inset-y-0 right-0 ",
-          "border-l border-l-input-default-stroke peer-hover:border-l-input-active-stroke peer-focus:border-l-input-active-stroke peer-disabled:border-l-input-disable-stroke",
+          "border-l border-l-input-default-stroke hover:border-l-input-active-stroke peer-hover:border-l-input-active-stroke peer-focus:border-l-input-active-stroke peer-disabled:border-l-input-disable-stroke",
         ],
       },
     },

package/src/components/Toast/Toast.tsx

@@ -81,7 +81,7 @@ const ToastTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Title
     ref={ref}
-    className={cn("typography-subtitile6", className)}
+    className={cn("typography-subtitle6", className)}
     {...props}
   />
 ));
@@ -93,7 +93,7 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cn("typography-subtitile4 text-grey-light", className)}
+    className={cn("typography-subtitle4 text-grey-light", className)}
     {...props}
   />
 ));

package/src/theme/THEME_MAPPING.md

@@ -153,7 +153,7 @@
 | base-bg2 | --base-color-bg2 | --base-bg-bg2-{theme} |
 | base-bg3 | --base-color-bg3 | --base-bg-bg3-{theme} |
 | base-popup | --base-color-popup | - |
-| base-popup-highlight | --base-color-popup-hightlight *(typo)* | --base-modal-modal-hightlight-{theme} *(typo)* |
+| base-popup-highlight | --base-color-popup-highlight | --base-modal-modal-highlight-{theme} |
 | base-popup-curtain | --base-color-popup-curtain | --base-modal-modal-curtain-{theme} |
 | base-popup-foreground | --base-color-popup-foreground | - |
 | base-stroke | --base-color-workspace-stroke | --base-bg-stroke1-{theme} |
@@ -194,10 +194,10 @@
 | **Function** | `--function-{state}-{property}-{theme}` | --function-default-solid-skyller |
 | **Common** | `--common-{color}-{theme}` | --common-white-skyller |
 
-### 3.3 Known typos in variable.css
-- `tertiery` → should be `tertiary`
-- `backgroud` → should be `background`
-- `hightlight` → should be `highlight`
+### 3.3 Spelling updates in variable.css
+- `tertiary`
+- `background`
+- `highlight`
 
 ---
 

package/src/theme/global.css

@@ -13,7 +13,7 @@
   }
   body {
     /* @apply bg-background text-foreground; */
-    /* @apply bg-[var(--backgroud)] text-[var(--foreground)]; */
+    /* @apply bg-[var(--background)] text-[var(--foreground)]; */
   }
 
   /* hide input number arrow */

package/src/theme/main-preset.js

@@ -60,6 +60,55 @@ module.exports = {
             fontFamily: "var(--h6-family, 'Poppins')",
           },
         ],
+        subtitle1: [
+          "var(--subtitle1-size, 16px)",
+          {
+            lineHeight: "var(--subtitle1-line-height, 24px)",
+            fontWeight: "var(--subtitle1-weight, 400)",
+            fontFamily: "var(--subtitle1-family, 'Poppins')",
+          },
+        ],
+        subtitle2: [
+          "var(--subtitle2-size, 16px)",
+          {
+            lineHeight: "var(--subtitle2-line-height, 24px)",
+            fontWeight: "var(--subtitle2-weight, 500)",
+            fontFamily: "var(--subtitle2-family, 'Poppins')",
+          },
+        ],
+        subtitle3: [
+          "var(--subtitle3-size, 16px)",
+          {
+            lineHeight: "var(--subtitle3-line-height, 24px)",
+            fontWeight: "var(--subtitle3-weight, 600)",
+            fontFamily: "var(--subtitle3-family, 'Poppins')",
+          },
+        ],
+        subtitle4: [
+          "var(--subtitle4-size, 14px)",
+          {
+            lineHeight: "var(--subtitle4-line-height, 22px)",
+            fontWeight: "var(--subtitle4-weight, 400)",
+            fontFamily: "var(--subtitle4-family, 'Poppins')",
+          },
+        ],
+        subtitle5: [
+          "var(--subtitle5-size, 14px)",
+          {
+            lineHeight: "var(--subtitle5-line-height, 22px)",
+            fontWeight: "var(--subtitle5-weight, 500)",
+            fontFamily: "var(--subtitle5-family, 'Poppins')",
+          },
+        ],
+        subtitle6: [
+          "var(--subtitle6-size, 14px)",
+          {
+            lineHeight: "var(--subtitle6-line-height, 22px)",
+            fontWeight: "var(--subtitle6-weight, 600)",
+            fontFamily: "var(--subtitle6-family, 'Poppins')",
+          },
+        ],
+        // Deprecated aliases, kept for backward compatibility.
         subtitile1: [
           "var(--subtitle1-size, 16px)",
           {