@dalexto/lexsys-registry 0.0.2 → 0.0.3

package/templates/blocks/Sidebar/Sidebar.tsx

@@ -33,59 +33,39 @@ import type {
   SidebarItemButtonProps,
   SidebarItemLinkProps,
   SidebarItemProps,
-  SidebarItemSize,
-  SidebarItemVariant,
   SidebarListProps,
   SidebarMobileHeaderProps,
   SidebarProps,
   SidebarTriggerProps,
 } from "./Sidebar.types"
 import {
-  sidebarBrandVariants,
-  sidebarDesktopVariants,
-  sidebarDrawerFooterVariants,
-  sidebarFooterVariants,
-  sidebarGroupContentVariants,
-  sidebarGroupLabelVariants,
-  sidebarGroupVariants,
-  sidebarMainVariants,
-  sidebarMobileHeaderVariants,
-  sidebarMobileTriggerVariants,
-  sidebarNavItemVariants,
-  sidebarNavListVariants,
-  sidebarNavVariants,
-  sidebarRootVariants,
+  sidebarBrandClasses,
+  sidebarDesktopClasses,
+  sidebarDrawerFooterClasses,
+  sidebarFooterClasses,
+  sidebarGroupContentClasses,
+  sidebarGroupLabelClasses,
+  sidebarGroupClasses,
+  sidebarMainClasses,
+  sidebarMobileHeaderClasses,
+  sidebarNavItemClasses,
+  sidebarNavListClasses,
+  sidebarNavClasses,
+  sidebarRootClasses,
 } from "./Sidebar.variants"
 import { cn } from "@/lib/utils"
 
-interface SidebarContextValue {
-  itemVariant: SidebarItemVariant
-  itemSize: SidebarItemSize
-}
-
 interface SidebarMobileContextValue {
   closeOnSelect: boolean
 }
 
-const SidebarContext = createContext<SidebarContextValue>({
-  itemVariant: "ghost",
-  itemSize: "sm",
-})
-
 const SidebarMobileContext = createContext<SidebarMobileContextValue>({
   closeOnSelect: false,
 })
 
 const useSidebarMobileContext = () => useContext(SidebarMobileContext)
 
-const Sidebar = ({
-  ref,
-  className,
-  itemVariant = "ghost",
-  itemSize = "sm",
-  children,
-  ...props
-}: SidebarProps) => {
+const Sidebar = ({ ref, className, children, ...props }: SidebarProps) => {
   const sidebarBody = (
     <SidebarMobileContext.Provider value={{ closeOnSelect: false }}>
       {children}
@@ -95,7 +75,7 @@ const Sidebar = ({
   const drawerBody = (
     <SidebarMobileContext.Provider value={{ closeOnSelect: true }}>
       {children}
-      <div className={sidebarDrawerFooterVariants()}>
+      <div className={sidebarDrawerFooterClasses()}>
         <DrawerClose render={<Button variant="secondary" size="sm" />}>
           Close
         </DrawerClose>
@@ -104,38 +84,26 @@ const Sidebar = ({
   )
 
   return (
-    <SidebarContext.Provider value={{ itemVariant, itemSize }}>
-      <aside
-        ref={ref}
-        className={cn(sidebarRootVariants(), className)}
-        {...props}
-      >
-        <div className={sidebarDesktopVariants()}>{sidebarBody}</div>
-
-        <div className={sidebarMobileTriggerVariants()}>
-          <Drawer swipeDirection="left">
-            <DrawerTrigger render={<Button variant="secondary" size="sm" />}>
-              Open navigation
-            </DrawerTrigger>
-            <DrawerPortal>
-              <DrawerBackdrop />
-              <DrawerViewport side="left">
-                <DrawerPopup side="left" size="sm">
-                  <DrawerClose aria-label="Close navigation" />
-                  <DrawerContent className={sidebarMainVariants()}>
-                    <DrawerTitle className="sr-only">Navigation</DrawerTitle>
-                    <DrawerDescription className="sr-only">
-                      Application navigation links
-                    </DrawerDescription>
-                    {drawerBody}
-                  </DrawerContent>
-                </DrawerPopup>
-              </DrawerViewport>
-            </DrawerPortal>
-          </Drawer>
-        </div>
-      </aside>
-    </SidebarContext.Provider>
+    <aside ref={ref} className={cn(sidebarRootClasses(), className)} {...props}>
+      <Drawer swipeDirection="left">
+        <div className={sidebarDesktopClasses()}>{sidebarBody}</div>
+        <DrawerPortal>
+          <DrawerBackdrop />
+          <DrawerViewport side="left">
+            <DrawerPopup side="left" size="sm">
+              <DrawerClose aria-label="Close navigation" />
+              <DrawerContent className={sidebarMainClasses()}>
+                <DrawerTitle className="sr-only">Navigation</DrawerTitle>
+                <DrawerDescription className="sr-only">
+                  Application navigation links
+                </DrawerDescription>
+                {drawerBody}
+              </DrawerContent>
+            </DrawerPopup>
+          </DrawerViewport>
+        </DrawerPortal>
+      </Drawer>
+    </aside>
   )
 }
 
@@ -148,7 +116,7 @@ const SidebarHeader = ({
   ...props
 }: SidebarHeaderProps) => {
   return (
-    <div ref={ref} className={cn(sidebarBrandVariants(), className)} {...props}>
+    <div ref={ref} className={cn(sidebarBrandClasses(), className)} {...props}>
       {children}
     </div>
   )
@@ -163,7 +131,7 @@ const SidebarContent = ({
   ...props
 }: SidebarContentProps) => {
   return (
-    <ScrollArea className={sidebarNavVariants()}>
+    <ScrollArea className={sidebarNavClasses()}>
       <ScrollAreaViewport>
         <ScrollAreaContent>
           <nav
@@ -189,11 +157,7 @@ const SidebarFooter = ({
   ...props
 }: SidebarFooterProps) => {
   return (
-    <div
-      ref={ref}
-      className={cn(sidebarFooterVariants(), className)}
-      {...props}
-    >
+    <div ref={ref} className={cn(sidebarFooterClasses(), className)} {...props}>
       {children}
     </div>
   )
@@ -237,7 +201,7 @@ const SidebarMobileHeader = ({
   return (
     <div
       ref={ref}
-      className={cn(sidebarMobileHeaderVariants(), className)}
+      className={cn(sidebarMobileHeaderClasses(), className)}
       {...props}
     >
       {children}
@@ -254,7 +218,7 @@ const SidebarGroup = ({
   ...props
 }: SidebarGroupProps) => {
   return (
-    <div ref={ref} className={cn(sidebarGroupVariants(), className)} {...props}>
+    <div ref={ref} className={cn(sidebarGroupClasses(), className)} {...props}>
       {children}
     </div>
   )
@@ -271,7 +235,7 @@ const SidebarGroupLabel = ({
   return (
     <div
       ref={ref}
-      className={cn(sidebarGroupLabelVariants(), className)}
+      className={cn(sidebarGroupLabelClasses(), className)}
       {...props}
     >
       {children}
@@ -290,7 +254,7 @@ const SidebarGroupContent = ({
   return (
     <div
       ref={ref}
-      className={cn(sidebarGroupContentVariants(), className)}
+      className={cn(sidebarGroupContentClasses(), className)}
       {...props}
     >
       {children}
@@ -307,11 +271,7 @@ const SidebarList = ({
   ...props
 }: SidebarListProps) => {
   return (
-    <ul
-      ref={ref}
-      className={cn(sidebarNavListVariants(), className)}
-      {...props}
-    >
+    <ul ref={ref} className={cn(sidebarNavListClasses(), className)} {...props}>
       {children}
     </ul>
   )
@@ -342,7 +302,7 @@ const SidebarItemLink = ({
   ...props
 }: SidebarItemLinkProps) => {
   const { closeOnSelect } = useSidebarMobileContext()
-  const linkClassName = cn(sidebarNavItemVariants(active), className)
+  const linkClassName = cn(sidebarNavItemClasses(active), className)
 
   if (!closeOnSelect) {
     return (
@@ -373,7 +333,7 @@ const SidebarItemButton = ({
   ...props
 }: SidebarItemButtonProps) => {
   const { closeOnSelect } = useSidebarMobileContext()
-  const buttonClassName = cn(sidebarNavItemVariants(active), className)
+  const buttonClassName = cn(sidebarNavItemClasses(active), className)
 
   if (!closeOnSelect) {
     return (

package/templates/blocks/Sidebar/Sidebar.types.ts

@@ -14,14 +14,9 @@ import type {
 } from "react"
 import type { ButtonProps } from "../../primitives/Button/Button.types"
 
-export type SidebarItemVariant = ButtonProps["variant"]
-export type SidebarItemSize = ButtonProps["size"]
-
 export interface SidebarProps extends HTMLAttributes<HTMLElement> {
   ref?: Ref<HTMLElement>
   className?: string
-  itemVariant?: SidebarItemVariant
-  itemSize?: SidebarItemSize
   children?: ReactNode
 }
 
@@ -31,8 +26,8 @@ export interface SidebarHeaderProps extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode
 }
 
-export interface SidebarContentProps extends HTMLAttributes<HTMLDivElement> {
-  ref?: Ref<HTMLDivElement>
+export interface SidebarContentProps extends HTMLAttributes<HTMLElement> {
+  ref?: Ref<HTMLElement>
   className?: string
   children?: ReactNode
 }

package/templates/blocks/Sidebar/Sidebar.variants.ts

@@ -4,81 +4,77 @@
  * Variant classes for the Sidebar block.
  */
 
-export const sidebarRootVariants = (): string => {
-  return "lsys-sidebar w-full shrink-0 md:h-full md:w-auto"
+export const sidebarRootClasses = (): string => {
+  return "lex-sidebar w-full shrink-0 md:h-full md:w-auto"
 }
 
-export const sidebarDesktopVariants = (): string => {
-  return "lsys-sidebar__desktop hidden h-full w-[var(--lsys-size-sidebar-width,16rem)] shrink-0 border-r border-[var(--lsys-border-default)] bg-[var(--lsys-color-background-subtle)] md:flex md:flex-col"
+export const sidebarDesktopClasses = (): string => {
+  return "lex-sidebar__desktop hidden h-full w-[var(--lex-size-sidebar-width,16rem)] shrink-0 border-r border-[var(--lex-border-default)] bg-[var(--lex-color-background-subtle)] md:flex md:flex-col"
 }
 
-export const sidebarMobileTriggerVariants = (): string => {
-  return "lsys-sidebar__mobile-trigger sticky top-0 z-(--lsys-z-index-local) border-b border-[var(--lsys-border-default)] bg-[var(--lsys-color-background-base)] p-[var(--lsys-space-2)] md:hidden"
+export const sidebarMobileHeaderClasses = (): string => {
+  return "lex-sidebar__mobile-header min-w-0 flex-1"
 }
 
-export const sidebarMobileHeaderVariants = (): string => {
-  return "lsys-sidebar__mobile-header min-w-0 flex-1"
+export const sidebarBrandClasses = (): string => {
+  return "lex-sidebar__brand border-b border-[var(--lex-border-default)] px-[var(--lex-space-4)] py-[var(--lex-space-3)]"
 }
 
-export const sidebarBrandVariants = (): string => {
-  return "lsys-sidebar__brand border-b border-[var(--lsys-border-default)] px-[var(--lsys-space-4)] py-[var(--lsys-space-3)]"
+export const sidebarNavClasses = (): string => {
+  return "lex-sidebar__nav min-h-0 flex-1 p-[var(--lex-space-2)]"
 }
 
-export const sidebarNavVariants = (): string => {
-  return "lsys-sidebar__nav min-h-0 flex-1 p-[var(--lsys-space-2)]"
+export const sidebarNavListClasses = (): string => {
+  return "lex-sidebar__list m-0 flex list-none flex-col gap-[var(--lex-space-1)] p-0"
 }
 
-export const sidebarNavListVariants = (): string => {
-  return "lsys-sidebar__list m-0 flex list-none flex-col gap-[var(--lsys-space-1)] p-0"
-}
-
-export const sidebarNavItemVariants = (active?: boolean): string => {
+export const sidebarNavItemClasses = (active?: boolean): string => {
   const base = [
-    "lsys-sidebar__item",
-    "flex w-full items-center rounded-(--lsys-menu-item-radius)",
-    "px-(--lsys-menu-item-padding-x) py-(--lsys-menu-item-padding-y)",
-    "text-(length:--lsys-menu-item-font-size) font-(--lsys-menu-item-font-weight)",
-    "leading-(--lsys-menu-item-font-line-height) text-(--lsys-menu-item-foreground)",
+    "lex-sidebar__item",
+    "flex w-full items-center rounded-(--lex-menu-item-radius)",
+    "px-(--lex-menu-item-padding-x) py-(--lex-menu-item-padding-y)",
+    "text-(length:--lex-menu-item-font-size) font-(--lex-menu-item-font-weight)",
+    "leading-(--lex-menu-item-font-line-height) text-(--lex-menu-item-foreground)",
     "no-underline outline-none transition-colors",
-    "focus-visible:ring-(length:--lsys-menu-item-focus-ring-width) focus-visible:ring-(--lsys-menu-item-focus-ring-color)",
-    "focus-visible:ring-offset-(length:--lsys-menu-item-focus-ring-offset) focus-visible:ring-offset-(--lsys-menu-item-focus-ring-offset-color)",
+    "focus-visible:ring-(length:--lex-menu-item-focus-ring-width) focus-visible:ring-(--lex-menu-item-focus-ring-color)",
+    "focus-visible:ring-offset-(length:--lex-menu-item-focus-ring-offset) focus-visible:ring-offset-(--lex-menu-item-focus-ring-offset-color)",
   ].join(" ")
 
   if (active) {
     return [
       base,
-      "lsys-sidebar__item--active",
-      "bg-(--lsys-menu-item-checked-background) text-(--lsys-menu-item-checked-foreground)",
-      "hover:bg-(--lsys-action-primary-hover) hover:text-(--lsys-menu-item-checked-foreground)",
+      "lex-sidebar__item--active",
+      "bg-(--lex-menu-item-checked-background) text-(--lex-menu-item-checked-foreground)",
+      "hover:bg-(--lex-action-primary-hover) hover:text-(--lex-menu-item-checked-foreground)",
     ].join(" ")
   }
 
   return [
     base,
-    "hover:bg-(--lsys-action-secondary-hover) hover:text-(--lsys-color-text-primary)",
+    "hover:bg-(--lex-action-secondary-hover) hover:text-(--lex-color-text-primary)",
   ].join(" ")
 }
 
-export const sidebarMainVariants = (): string => {
-  return "lsys-sidebar__drawer-content flex h-full min-h-0 flex-col"
+export const sidebarMainClasses = (): string => {
+  return "lex-sidebar__drawer-content flex h-full min-h-0 flex-col"
 }
 
-export const sidebarDrawerFooterVariants = (): string => {
-  return "lsys-sidebar__drawer-footer border-t border-[var(--lsys-border-default)] p-[var(--lsys-space-2)]"
+export const sidebarDrawerFooterClasses = (): string => {
+  return "lex-sidebar__drawer-footer border-t border-[var(--lex-border-default)] p-[var(--lex-space-2)]"
 }
 
-export const sidebarFooterVariants = (): string => {
-  return "lsys-sidebar__footer border-t border-[var(--lsys-border-default)] p-[var(--lsys-space-2)]"
+export const sidebarFooterClasses = (): string => {
+  return "lex-sidebar__footer border-t border-[var(--lex-border-default)] p-[var(--lex-space-2)]"
 }
 
-export const sidebarGroupVariants = (): string => {
-  return "lsys-sidebar__group flex flex-col gap-[var(--lsys-space-1)]"
+export const sidebarGroupClasses = (): string => {
+  return "lex-sidebar__group flex flex-col gap-[var(--lex-space-1)]"
 }
 
-export const sidebarGroupLabelVariants = (): string => {
-  return "lsys-sidebar__group-label px-[var(--lsys-space-3)] py-[var(--lsys-space-1)] text-(length:--lsys-menu-group-label-font-size) font-(--lsys-menu-group-label-font-weight) leading-(--lsys-menu-group-label-font-line-height) text-(--lsys-menu-group-label-foreground)"
+export const sidebarGroupLabelClasses = (): string => {
+  return "lex-sidebar__group-label px-[var(--lex-space-3)] py-[var(--lex-space-1)] text-(length:--lex-menu-group-label-font-size) font-(--lex-menu-group-label-font-weight) leading-(--lex-menu-group-label-font-line-height) text-(--lex-menu-group-label-foreground)"
 }
 
-export const sidebarGroupContentVariants = (): string => {
-  return "lsys-sidebar__group-content flex flex-col gap-[var(--lsys-space-1)]"
+export const sidebarGroupContentClasses = (): string => {
+  return "lex-sidebar__group-content flex flex-col gap-[var(--lex-space-1)]"
 }

package/templates/primitives/Accordion/Accordion.variants.ts

@@ -8,25 +8,25 @@ import { cva } from "class-variance-authority"
 import { disabledStateClasses } from "@/lib/utils"
 
 export const accordionVariants = cva(
-  "grid overflow-hidden rounded-(--lsys-accordion-radius) border border-(--lsys-accordion-border-color) bg-(--lsys-accordion-background) text-(--lsys-accordion-foreground)",
+  "grid overflow-hidden rounded-(--lex-accordion-radius) border border-(--lex-accordion-border-color) bg-(--lex-accordion-background) text-(--lex-accordion-foreground)",
 )
 
 export const accordionItemVariants = cva(
-  "border-b border-(--lsys-accordion-item-border-color) last:border-b-0",
+  "border-b border-(--lex-accordion-item-border-color) last:border-b-0",
 )
 
 export const accordionHeaderVariants = cva("flex")
 
 export const accordionTriggerVariants = cva(
   [
-    "flex w-full items-center justify-between px-(--lsys-accordion-trigger-padding-x) py-(--lsys-accordion-trigger-padding-y) text-left",
-    "text-(length:--lsys-accordion-trigger-font-size) font-(--lsys-accordion-trigger-font-weight) leading-(--lsys-accordion-trigger-font-line-height) text-(--lsys-accordion-foreground)",
-    "transition-colors duration-(--lsys-accordion-transition-duration) ease-(--lsys-accordion-transition-easing)",
-    "outline-none hover:bg-(--lsys-accordion-trigger-background-hover) focus-visible:ring-(length:--lsys-accordion-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lsys-accordion-focus-ring-color)",
+    "flex w-full items-center justify-between px-(--lex-accordion-trigger-padding-x) py-(--lex-accordion-trigger-padding-y) text-left",
+    "text-(length:--lex-accordion-trigger-font-size) font-(--lex-accordion-trigger-font-weight) leading-(--lex-accordion-trigger-font-line-height) text-(--lex-accordion-foreground)",
+    "transition-colors duration-(--lex-accordion-transition-duration) ease-(--lex-accordion-transition-easing)",
+    "outline-none hover:bg-(--lex-accordion-trigger-background-hover) focus-visible:ring-(length:--lex-accordion-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lex-accordion-focus-ring-color)",
     disabledStateClasses,
   ].join(" "),
 )
 
 export const accordionPanelVariants = cva(
-  "px-(--lsys-accordion-panel-padding-x) pb-(--lsys-accordion-panel-padding-bottom) text-(length:--lsys-accordion-panel-font-size) leading-(--lsys-accordion-panel-font-line-height) text-(--lsys-accordion-panel-foreground)",
+  "px-(--lex-accordion-panel-padding-x) pb-(--lex-accordion-panel-padding-bottom) text-(length:--lex-accordion-panel-font-size) leading-(--lex-accordion-panel-font-line-height) text-(--lex-accordion-panel-foreground)",
 )

package/templates/primitives/Alert/Alert.variants.ts

@@ -7,18 +7,18 @@
 import { cva } from "class-variance-authority"
 
 const neutralVariant =
-  "border-(--lsys-alert-neutral-border-color) bg-(--lsys-alert-neutral-background) text-(--lsys-alert-neutral-foreground)"
+  "border-(--lex-alert-neutral-border-color) bg-(--lex-alert-neutral-background) text-(--lex-alert-neutral-foreground)"
 
 const primaryVariant =
-  "border-(--lsys-alert-primary-border-color) bg-(--lsys-alert-primary-background) text-(--lsys-alert-primary-foreground)"
+  "border-(--lex-alert-primary-border-color) bg-(--lex-alert-primary-background) text-(--lex-alert-primary-foreground)"
 
 const dangerVariant =
-  "border-(--lsys-alert-danger-border-color) bg-(--lsys-alert-danger-background) text-(--lsys-alert-danger-foreground)"
+  "border-(--lex-alert-danger-border-color) bg-(--lex-alert-danger-background) text-(--lex-alert-danger-foreground)"
 
 export const alertVariants = cva(
   [
-    "grid gap-(--lsys-alert-gap) rounded-(--lsys-alert-radius) border p-(--lsys-alert-padding)",
-    "transition-colors duration-(--lsys-alert-transition-duration) ease-(--lsys-alert-transition-easing)",
+    "grid gap-(--lex-alert-gap) rounded-(--lex-alert-radius) border p-(--lex-alert-padding)",
+    "transition-colors duration-(--lex-alert-transition-duration) ease-(--lex-alert-transition-easing)",
   ].join(" "),
   {
     variants: {
@@ -35,7 +35,7 @@ export const alertVariants = cva(
 )
 
 export const alertTitleClassName =
-  "text-(length:--lsys-alert-title-font-size) font-(--lsys-alert-title-font-weight) leading-(--lsys-alert-title-font-line-height)"
+  "text-(length:--lex-alert-title-font-size) font-(--lex-alert-title-font-weight) leading-(--lex-alert-title-font-line-height)"
 
 export const alertDescriptionClassName =
-  "text-(length:--lsys-alert-description-font-size) leading-(--lsys-alert-description-font-line-height) text-(--lsys-alert-description-foreground)"
+  "text-(length:--lex-alert-description-font-size) leading-(--lex-alert-description-font-line-height) text-(--lex-alert-description-foreground)"

package/templates/primitives/AlertDialog/AlertDialog.variants.ts

@@ -9,49 +9,49 @@ import { disabledStateClasses } from "@/lib/utils"
 
 export const alertDialogTriggerVariants = cva(
   [
-    "inline-flex h-(--lsys-alert-dialog-trigger-height) items-center justify-center rounded-(--lsys-alert-dialog-trigger-radius)",
-    "bg-(--lsys-alert-dialog-trigger-background) px-(--lsys-alert-dialog-trigger-padding-x) text-(--lsys-alert-dialog-trigger-foreground)",
-    "text-(length:--lsys-alert-dialog-trigger-font-size) font-(--lsys-alert-dialog-trigger-font-weight) leading-(--lsys-alert-dialog-trigger-font-line-height)",
-    "transition-colors duration-(--lsys-alert-dialog-transition-duration) ease-(--lsys-alert-dialog-transition-easing)",
-    "outline-none hover:bg-(--lsys-alert-dialog-trigger-hover-background) focus-visible:ring-(length:--lsys-alert-dialog-focus-ring-width) focus-visible:ring-(--lsys-alert-dialog-focus-ring-color) focus-visible:ring-offset-(length:--lsys-alert-dialog-focus-ring-offset) focus-visible:ring-offset-(--lsys-alert-dialog-focus-ring-offset-color)",
+    "inline-flex h-(--lex-alert-dialog-trigger-height) items-center justify-center rounded-(--lex-alert-dialog-trigger-radius)",
+    "bg-(--lex-alert-dialog-trigger-background) px-(--lex-alert-dialog-trigger-padding-x) text-(--lex-alert-dialog-trigger-foreground)",
+    "text-(length:--lex-alert-dialog-trigger-font-size) font-(--lex-alert-dialog-trigger-font-weight) leading-(--lex-alert-dialog-trigger-font-line-height)",
+    "transition-colors duration-(--lex-alert-dialog-transition-duration) ease-(--lex-alert-dialog-transition-easing)",
+    "outline-none hover:bg-(--lex-alert-dialog-trigger-hover-background) focus-visible:ring-(length:--lex-alert-dialog-focus-ring-width) focus-visible:ring-(--lex-alert-dialog-focus-ring-color) focus-visible:ring-offset-(length:--lex-alert-dialog-focus-ring-offset) focus-visible:ring-offset-(--lex-alert-dialog-focus-ring-offset-color)",
     disabledStateClasses,
   ].join(" "),
 )
 
 export const alertDialogBackdropVariants = cva(
   [
-    "fixed inset-0 z-(--lsys-alert-dialog-backdrop-z-index) bg-(--lsys-alert-dialog-backdrop-background) opacity-(--lsys-alert-dialog-backdrop-opacity)",
+    "fixed inset-0 z-(--lex-alert-dialog-backdrop-z-index) bg-(--lex-alert-dialog-backdrop-background) opacity-(--lex-alert-dialog-backdrop-opacity)",
     "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
-    "transition-opacity duration-(--lsys-alert-dialog-transition-duration) ease-(--lsys-alert-dialog-transition-easing)",
+    "transition-opacity duration-(--lex-alert-dialog-transition-duration) ease-(--lex-alert-dialog-transition-easing)",
   ].join(" "),
 )
 
 export const alertDialogViewportVariants = cva(
-  "fixed inset-0 z-(--lsys-alert-dialog-viewport-z-index) grid place-items-center overflow-y-auto p-(--lsys-alert-dialog-viewport-padding)",
+  "fixed inset-0 z-(--lex-alert-dialog-viewport-z-index) grid place-items-center overflow-y-auto p-(--lex-alert-dialog-viewport-padding)",
 )
 
 export const alertDialogPopupVariants = cva(
   [
-    "grid w-[min(calc(100vw-(var(--lsys-alert-dialog-viewport-inset)*2)),var(--lsys-alert-dialog-popup-max-width))] gap-(--lsys-alert-dialog-popup-gap) rounded-(--lsys-alert-dialog-popup-radius) border",
-    "border-(--lsys-alert-dialog-popup-border-color) bg-(--lsys-alert-dialog-popup-background) p-(--lsys-alert-dialog-popup-padding) text-(--lsys-alert-dialog-popup-foreground) shadow-(--lsys-alert-dialog-popup-shadow)",
+    "grid w-[min(calc(100vw-(var(--lex-alert-dialog-viewport-inset)*2)),var(--lex-alert-dialog-popup-max-width))] gap-(--lex-alert-dialog-popup-gap) rounded-(--lex-alert-dialog-popup-radius) border",
+    "border-(--lex-alert-dialog-popup-border-color) bg-(--lex-alert-dialog-popup-background) p-(--lex-alert-dialog-popup-padding) text-(--lex-alert-dialog-popup-foreground) shadow-(--lex-alert-dialog-popup-shadow)",
     "outline-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
-    "transition-[opacity,transform] duration-(--lsys-alert-dialog-transition-duration) ease-(--lsys-alert-dialog-transition-easing)",
+    "transition-[opacity,transform] duration-(--lex-alert-dialog-transition-duration) ease-(--lex-alert-dialog-transition-easing)",
   ].join(" "),
 )
 
 export const alertDialogTitleVariants = cva(
-  "pr-(--lsys-alert-dialog-title-padding-end) text-(length:--lsys-alert-dialog-title-font-size) font-(--lsys-alert-dialog-title-font-weight) leading-(--lsys-alert-dialog-title-font-line-height) text-(--lsys-alert-dialog-title-foreground)",
+  "pr-(--lex-alert-dialog-title-padding-end) text-(length:--lex-alert-dialog-title-font-size) font-(--lex-alert-dialog-title-font-weight) leading-(--lex-alert-dialog-title-font-line-height) text-(--lex-alert-dialog-title-foreground)",
 )
 
 export const alertDialogDescriptionVariants = cva(
-  "text-(length:--lsys-alert-dialog-description-font-size) font-(--lsys-alert-dialog-description-font-weight) leading-(--lsys-alert-dialog-description-font-line-height) text-(--lsys-alert-dialog-description-foreground)",
+  "text-(length:--lex-alert-dialog-description-font-size) font-(--lex-alert-dialog-description-font-weight) leading-(--lex-alert-dialog-description-font-line-height) text-(--lex-alert-dialog-description-foreground)",
 )
 
 export const alertDialogCloseVariants = cva(
   [
-    "absolute right-(--lsys-alert-dialog-close-inset) top-(--lsys-alert-dialog-close-inset) inline-flex size-(--lsys-alert-dialog-close-size) items-center justify-center rounded-(--lsys-alert-dialog-close-radius)",
-    "text-(--lsys-alert-dialog-close-foreground) outline-none transition-colors duration-(--lsys-alert-dialog-transition-duration) ease-(--lsys-alert-dialog-transition-easing)",
-    "hover:bg-(--lsys-alert-dialog-close-hover-background) focus-visible:ring-(length:--lsys-alert-dialog-focus-ring-width) focus-visible:ring-(--lsys-alert-dialog-focus-ring-color) focus-visible:ring-offset-(length:--lsys-alert-dialog-focus-ring-offset) focus-visible:ring-offset-(--lsys-alert-dialog-focus-ring-offset-color)",
+    "absolute right-(--lex-alert-dialog-close-inset) top-(--lex-alert-dialog-close-inset) inline-flex size-(--lex-alert-dialog-close-size) items-center justify-center rounded-(--lex-alert-dialog-close-radius)",
+    "text-(--lex-alert-dialog-close-foreground) outline-none transition-colors duration-(--lex-alert-dialog-transition-duration) ease-(--lex-alert-dialog-transition-easing)",
+    "hover:bg-(--lex-alert-dialog-close-hover-background) focus-visible:ring-(length:--lex-alert-dialog-focus-ring-width) focus-visible:ring-(--lex-alert-dialog-focus-ring-color) focus-visible:ring-offset-(length:--lex-alert-dialog-focus-ring-offset) focus-visible:ring-offset-(--lex-alert-dialog-focus-ring-offset-color)",
     disabledStateClasses,
   ].join(" "),
 )