@dalexto/lexsys-registry 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/dist/index.js +23 -2
  2. package/dist/items/empty.d.ts +7 -0
  3. package/dist/items/index.d.ts +1 -0
  4. package/package.json +1 -1
  5. package/templates/blocks/AuthForm/AuthForm.tsx +3 -3
  6. package/templates/blocks/AuthForm/AuthForm.variants.ts +3 -3
  7. package/templates/blocks/CommandPalette/CommandPalette.tsx +14 -14
  8. package/templates/blocks/CommandPalette/CommandPalette.types.ts +3 -9
  9. package/templates/blocks/CommandPalette/CommandPalette.variants.ts +13 -14
  10. package/templates/blocks/Empty/Empty.tsx +91 -0
  11. package/templates/blocks/Empty/Empty.types.ts +8 -0
  12. package/templates/blocks/Empty/Empty.variants.ts +51 -0
  13. package/templates/blocks/FormField/FormField.tsx +2 -6
  14. package/templates/blocks/FormField/FormField.variants.ts +2 -2
  15. package/templates/blocks/SettingsPanel/SettingsPanel.tsx +2 -2
  16. package/templates/blocks/SettingsPanel/SettingsPanel.variants.ts +2 -2
  17. package/templates/blocks/Sidebar/Sidebar.tsx +45 -85
  18. package/templates/blocks/Sidebar/Sidebar.types.ts +2 -7
  19. package/templates/blocks/Sidebar/Sidebar.variants.ts +36 -40
  20. package/templates/primitives/Accordion/Accordion.variants.ts +7 -7
  21. package/templates/primitives/Alert/Alert.variants.ts +7 -7
  22. package/templates/primitives/AlertDialog/AlertDialog.variants.ts +16 -16
  23. package/templates/primitives/Autocomplete/Autocomplete.variants.ts +49 -49
  24. package/templates/primitives/Avatar/Avatar.variants.ts +10 -10
  25. package/templates/primitives/Badge/Badge.variants.ts +14 -14
  26. package/templates/primitives/Button/Button.variants.ts +26 -26
  27. package/templates/primitives/Card/Card.tsx +19 -1
  28. package/templates/primitives/Card/Card.types.ts +1 -0
  29. package/templates/primitives/Card/Card.variants.ts +14 -11
  30. package/templates/primitives/Checkbox/Checkbox.variants.ts +11 -15
  31. package/templates/primitives/CheckboxGroup/CheckboxGroup.variants.ts +2 -2
  32. package/templates/primitives/Collapsible/Collapsible.variants.ts +10 -10
  33. package/templates/primitives/Combobox/Combobox.variants.ts +58 -58
  34. package/templates/primitives/ContextMenu/ContextMenu.variants.ts +1 -1
  35. package/templates/primitives/Dialog/Dialog.variants.ts +16 -16
  36. package/templates/primitives/Drawer/Drawer.types.ts +3 -1
  37. package/templates/primitives/Drawer/Drawer.variants.ts +37 -37
  38. package/templates/primitives/Field/Field.variants.ts +22 -22
  39. package/templates/primitives/Fieldset/Fieldset.variants.ts +8 -8
  40. package/templates/primitives/Form/Form.variants.ts +1 -1
  41. package/templates/primitives/Input/Input.variants.ts +11 -11
  42. package/templates/primitives/Menu/Menu.variants.ts +25 -25
  43. package/templates/primitives/Menubar/Menubar.variants.ts +1 -1
  44. package/templates/primitives/Meter/Meter.variants.ts +11 -11
  45. package/templates/primitives/NavigationMenu/NavigationMenu.variants.ts +2 -2
  46. package/templates/primitives/NumberField/NumberField.variants.ts +25 -25
  47. package/templates/primitives/OtpField/OtpField.variants.ts +12 -12
  48. package/templates/primitives/Popover/Popover.variants.ts +18 -20
  49. package/templates/primitives/PreviewCard/PreviewCard.variants.ts +1 -1
  50. package/templates/primitives/Progress/Progress.variants.ts +8 -8
  51. package/templates/primitives/RadioGroup/RadioGroup.variants.ts +14 -14
  52. package/templates/primitives/ScrollArea/ScrollArea.variants.ts +3 -3
  53. package/templates/primitives/Select/Select.tsx +29 -29
  54. package/templates/primitives/Select/Select.types.ts +4 -4
  55. package/templates/primitives/Select/Select.variants.ts +44 -59
  56. package/templates/primitives/Separator/Separator.variants.ts +3 -3
  57. package/templates/primitives/Slider/Slider.tsx +14 -14
  58. package/templates/primitives/Slider/Slider.variants.ts +17 -26
  59. package/templates/primitives/Switch/Switch.types.ts +2 -2
  60. package/templates/primitives/Switch/Switch.variants.ts +13 -13
  61. package/templates/primitives/Tabs/Tabs.variants.ts +8 -8
  62. package/templates/primitives/Textarea/Textarea.variants.ts +11 -11
  63. package/templates/primitives/Toast/Toast.variants.ts +20 -20
  64. package/templates/primitives/Toggle/Toggle.variants.ts +9 -9
  65. package/templates/primitives/ToggleGroup/ToggleGroup.variants.ts +5 -5
  66. package/templates/primitives/Toolbar/Toolbar.variants.ts +18 -18
  67. package/templates/primitives/Tooltip/Tooltip.variants.ts +5 -5
  68. package/templates/styles/theme.css +301 -299
  69. package/templates/styles/tokens.css +1477 -1441
  70. package/templates/templates/DashboardShell/DashboardShell.tsx +10 -10
  71. package/templates/templates/DashboardShell/DashboardShell.variants.ts +10 -10
package/templates/primitives/Fieldset/Fieldset.variants.ts CHANGED
@@ -8,17 +8,17 @@ import { cva } from "class-variance-authority"
8
8
 
9
9
  export const fieldsetVariants = cva(
10
10
  [
11
- "m-0 grid min-w-0 gap-(--lsys-fieldset-gap) rounded-(--lsys-fieldset-radius)",
12
- "border border-(--lsys-fieldset-border-color) p-(--lsys-fieldset-padding)",
13
- "bg-(--lsys-fieldset-background) text-(--lsys-fieldset-foreground)",
14
- "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
11
+ "m-0 grid min-w-0 gap-(--lex-fieldset-gap) rounded-(--lex-fieldset-radius)",
12
+ "border border-(--lex-fieldset-border-color) p-(--lex-fieldset-padding)",
13
+ "bg-(--lex-fieldset-background) text-(--lex-fieldset-foreground)",
14
+ "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lex-opacity-disabled)",
15
15
  ].join(" "),
16
16
  {
17
17
  variants: {
18
18
  variant: {
19
19
  surface: "",
20
20
  plain:
21
- "border-transparent bg-transparent p-0 shadow-none data-[disabled]:opacity-(--lsys-opacity-disabled)",
21
+ "border-transparent bg-transparent p-0 shadow-none data-[disabled]:opacity-(--lex-opacity-disabled)",
22
22
  },
23
23
  },
24
24
  defaultVariants: {
@@ -29,9 +29,9 @@ export const fieldsetVariants = cva(
29
29
 
30
30
  export const fieldsetLegendVariants = cva(
31
31
  [
32
- "mb-(--lsys-fieldset-legend-margin-bottom) text-(length:--lsys-fieldset-legend-font-size)",
33
- "font-(--lsys-fieldset-legend-font-weight) leading-(--lsys-fieldset-legend-font-line-height)",
34
- "tracking-(--lsys-fieldset-legend-font-letter-spacing) text-(--lsys-fieldset-legend-foreground)",
32
+ "mb-(--lex-fieldset-legend-margin-bottom) text-(length:--lex-fieldset-legend-font-size)",
33
+ "font-(--lex-fieldset-legend-font-weight) leading-(--lex-fieldset-legend-font-line-height)",
34
+ "tracking-(--lex-fieldset-legend-font-letter-spacing) text-(--lex-fieldset-legend-foreground)",
35
35
  "data-[disabled]:cursor-not-allowed",
36
36
  ].join(" "),
37
37
  )
package/templates/primitives/Form/Form.variants.ts CHANGED
@@ -7,5 +7,5 @@
7
7
  import { cva } from "class-variance-authority"
8
8
 
9
9
  export const formVariants = cva(
10
- "grid gap-(--lsys-form-gap) text-(--lsys-form-foreground)",
10
+ "grid gap-(--lex-form-gap) text-(--lex-form-foreground)",
11
11
  )
package/templates/primitives/Input/Input.variants.ts CHANGED
@@ -9,14 +9,14 @@ import { disabledStateClasses, invalidStateClasses } from "@/lib/utils"
9
9
 
10
10
  export const inputVariants = cva(
11
11
  [
12
- "flex w-full min-w-0 border bg-(--lsys-input-background) text-(--lsys-input-foreground)",
13
- "rounded-(--lsys-input-radius) border-(--lsys-input-border-color)",
14
- "font-(family-name:--lsys-input-font-family) font-(--lsys-input-font-weight) leading-(--lsys-input-font-line-height) tracking-(--lsys-input-font-letter-spacing)",
15
- "placeholder:text-(--lsys-input-placeholder-color)",
16
- "transition-colors duration-(--lsys-input-transition-duration) ease-(--lsys-input-transition-easing)",
17
- "outline-none focus-visible:border-(--lsys-input-focus-border-color) focus-visible:ring-(length:--lsys-input-focus-ring-width) focus-visible:ring-(--lsys-input-focus-ring-color) focus-visible:ring-offset-(length:--lsys-input-focus-ring-offset) focus-visible:ring-offset-(--lsys-input-focus-ring-offset-color)",
12
+ "flex w-full min-w-0 border bg-(--lex-input-background) text-(--lex-input-foreground)",
13
+ "rounded-(--lex-input-radius) border-(--lex-input-border-color)",
14
+ "font-(family-name:--lex-input-font-family) font-(--lex-input-font-weight) leading-(--lex-input-font-line-height) tracking-(--lex-input-font-letter-spacing)",
15
+ "placeholder:text-(--lex-input-placeholder-color)",
16
+ "transition-colors duration-(--lex-input-transition-duration) ease-(--lex-input-transition-easing)",
17
+ "outline-none focus-visible:border-(--lex-input-focus-border-color) focus-visible:ring-(length:--lex-input-focus-ring-width) focus-visible:ring-(--lex-input-focus-ring-color) focus-visible:ring-offset-(length:--lex-input-focus-ring-offset) focus-visible:ring-offset-(--lex-input-focus-ring-offset-color)",
18
18
  "disabled:cursor-not-allowed",
19
- "read-only:cursor-default read-only:bg-(--lsys-color-background-subtle) read-only:text-(--lsys-color-text-secondary)",
19
+ "read-only:cursor-default read-only:bg-(--lex-color-background-subtle) read-only:text-(--lex-color-text-secondary)",
20
20
  disabledStateClasses,
21
21
  invalidStateClasses,
22
22
  ].join(" "),
@@ -25,12 +25,12 @@ export const inputVariants = cva(
25
25
  variant: {
26
26
  default: "",
27
27
  ghost:
28
- "border-transparent bg-transparent focus-visible:bg-(--lsys-input-background)",
28
+ "border-transparent bg-transparent focus-visible:bg-(--lex-input-background)",
29
29
  },
30
30
  size: {
31
- sm: "h-(--lsys-input-height-sm) px-(--lsys-input-padding-x-sm) text-(length:--lsys-input-font-size-sm)",
32
- md: "h-(--lsys-input-height-md) px-(--lsys-input-padding-x-md) text-(length:--lsys-input-font-size-md)",
33
- lg: "h-(--lsys-input-height-lg) px-(--lsys-input-padding-x-lg) text-(length:--lsys-input-font-size-lg)",
31
+ sm: "h-(--lex-input-height-sm) px-(--lex-input-padding-x-sm) text-(length:--lex-input-font-size-sm)",
32
+ md: "h-(--lex-input-height-md) px-(--lex-input-padding-x-md) text-(length:--lex-input-font-size-md)",
33
+ lg: "h-(--lex-input-height-lg) px-(--lex-input-padding-x-lg) text-(length:--lex-input-font-size-lg)",
34
34
  },
35
35
  },
36
36
  defaultVariants: {
package/templates/primitives/Menu/Menu.variants.ts CHANGED
@@ -8,66 +8,66 @@ import { cva } from "class-variance-authority"
8
8
 
9
9
  export const menuTriggerVariants = cva(
10
10
  [
11
- "inline-flex min-w-0 items-center justify-center gap-(--lsys-menu-trigger-gap) rounded-(--lsys-menu-trigger-radius) border",
12
- "h-(--lsys-menu-trigger-height) border-(--lsys-menu-trigger-border-color) bg-(--lsys-menu-trigger-background) px-(--lsys-menu-trigger-padding-x)",
13
- "text-(length:--lsys-menu-trigger-font-size) font-(--lsys-menu-trigger-font-weight) leading-(--lsys-menu-trigger-font-line-height) text-(--lsys-menu-trigger-foreground)",
14
- "transition-colors duration-(--lsys-menu-transition-duration) ease-(--lsys-menu-transition-easing)",
15
- "outline-none data-[popup-open]:border-(--lsys-menu-trigger-open-border-color) data-[popup-open]:bg-(--lsys-menu-trigger-open-background)",
16
- "data-[focused]:border-(--lsys-menu-focus-border-color) data-[focused]:ring-(length:--lsys-menu-focus-ring-width) data-[focused]:ring-(--lsys-menu-focus-ring-color) data-[focused]:ring-offset-(length:--lsys-menu-focus-ring-offset) data-[focused]:ring-offset-(--lsys-menu-focus-ring-offset-color)",
17
- "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
11
+ "inline-flex min-w-0 items-center justify-center gap-(--lex-menu-trigger-gap) rounded-(--lex-menu-trigger-radius) border",
12
+ "h-(--lex-menu-trigger-height) border-(--lex-menu-trigger-border-color) bg-(--lex-menu-trigger-background) px-(--lex-menu-trigger-padding-x)",
13
+ "text-(length:--lex-menu-trigger-font-size) font-(--lex-menu-trigger-font-weight) leading-(--lex-menu-trigger-font-line-height) text-(--lex-menu-trigger-foreground)",
14
+ "transition-colors duration-(--lex-menu-transition-duration) ease-(--lex-menu-transition-easing)",
15
+ "outline-none data-[popup-open]:border-(--lex-menu-trigger-open-border-color) data-[popup-open]:bg-(--lex-menu-trigger-open-background)",
16
+ "data-[focused]:border-(--lex-menu-focus-border-color) data-[focused]:ring-(length:--lex-menu-focus-ring-width) data-[focused]:ring-(--lex-menu-focus-ring-color) data-[focused]:ring-offset-(length:--lex-menu-focus-ring-offset) data-[focused]:ring-offset-(--lex-menu-focus-ring-offset-color)",
17
+ "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lex-opacity-disabled)",
18
18
  ].join(" "),
19
19
  )
20
20
 
21
21
  export const menuBackdropVariants = cva(
22
- "fixed inset-0 z-(--lsys-menu-backdrop-z-index) bg-(--lsys-menu-backdrop-background) opacity-(--lsys-menu-backdrop-opacity) data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
22
+ "fixed inset-0 z-(--lex-menu-backdrop-z-index) bg-(--lex-menu-backdrop-background) opacity-(--lex-menu-backdrop-opacity) data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
23
23
  )
24
24
 
25
- export const menuPositionerVariants = cva("z-(--lsys-menu-positioner-z-index)")
25
+ export const menuPositionerVariants = cva("z-(--lex-menu-positioner-z-index)")
26
26
 
27
27
  export const menuPopupVariants = cva(
28
28
  [
29
- "min-w-[var(--anchor-width)] max-w-(--lsys-menu-popup-max-width) rounded-(--lsys-menu-radius) border",
30
- "border-(--lsys-menu-popup-border-color) bg-(--lsys-menu-popup-background) text-(--lsys-menu-popup-foreground) shadow-(--lsys-menu-popup-shadow)",
29
+ "min-w-[var(--anchor-width)] max-w-(--lex-menu-popup-max-width) rounded-(--lex-menu-radius) border",
30
+ "border-(--lex-menu-popup-border-color) bg-(--lex-menu-popup-background) text-(--lex-menu-popup-foreground) shadow-(--lex-menu-popup-shadow)",
31
31
  "data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
32
- "origin-[var(--transform-origin)] transition-[opacity,transform] duration-(--lsys-menu-transition-duration) ease-(--lsys-menu-transition-easing)",
32
+ "origin-[var(--transform-origin)] transition-[opacity,transform] duration-(--lex-menu-transition-duration) ease-(--lex-menu-transition-easing)",
33
33
  ].join(" "),
34
34
  )
35
35
 
36
36
  export const menuViewportVariants = cva(
37
- "grid max-h-(--lsys-menu-viewport-max-height) gap-(--lsys-menu-list-gap) overflow-y-auto p-(--lsys-menu-list-padding)",
37
+ "grid max-h-(--lex-menu-viewport-max-height) gap-(--lex-menu-list-gap) overflow-y-auto p-(--lex-menu-list-padding)",
38
38
  )
39
39
 
40
40
  export const menuItemVariants = cva(
41
41
  [
42
- "relative flex min-w-0 cursor-default select-none items-center gap-(--lsys-menu-item-gap) rounded-(--lsys-menu-item-radius)",
43
- "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)",
44
- "text-(--lsys-menu-item-foreground) outline-none",
45
- "data-[highlighted]:bg-(--lsys-menu-item-highlight-background) data-[highlighted]:text-(--lsys-menu-item-highlight-foreground)",
46
- "data-[checked]:bg-(--lsys-menu-item-checked-background) data-[checked]:text-(--lsys-menu-item-checked-foreground)",
47
- "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lsys-opacity-disabled)",
42
+ "relative flex min-w-0 cursor-default select-none items-center gap-(--lex-menu-item-gap) rounded-(--lex-menu-item-radius)",
43
+ "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)",
44
+ "text-(--lex-menu-item-foreground) outline-none",
45
+ "data-[highlighted]:bg-(--lex-menu-item-highlight-background) data-[highlighted]:text-(--lex-menu-item-highlight-foreground)",
46
+ "data-[checked]:bg-(--lex-menu-item-checked-background) data-[checked]:text-(--lex-menu-item-checked-foreground)",
47
+ "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lex-opacity-disabled)",
48
48
  ].join(" "),
49
49
  )
50
50
 
51
51
  export const menuItemTextVariants = cva("min-w-0 flex-1 truncate")
52
52
 
53
53
  export const menuItemIndicatorVariants = cva(
54
- "inline-flex size-(--lsys-menu-item-indicator-size) shrink-0 items-center justify-center text-current",
54
+ "inline-flex size-(--lex-menu-item-indicator-size) shrink-0 items-center justify-center text-current",
55
55
  )
56
56
 
57
57
  export const menuSubmenuTriggerIconVariants = cva(
58
- "ml-auto inline-flex size-(--lsys-menu-submenu-icon-size) shrink-0 items-center justify-center text-current",
58
+ "ml-auto inline-flex size-(--lex-menu-submenu-icon-size) shrink-0 items-center justify-center text-current",
59
59
  )
60
60
 
61
61
  export const menuArrowVariants = cva(
62
- "size-(--lsys-menu-arrow-size) rotate-45 border border-(--lsys-menu-popup-border-color) bg-(--lsys-menu-popup-background)",
62
+ "size-(--lex-menu-arrow-size) rotate-45 border border-(--lex-menu-popup-border-color) bg-(--lex-menu-popup-background)",
63
63
  )
64
64
 
65
- export const menuGroupVariants = cva("grid gap-(--lsys-menu-group-gap)")
65
+ export const menuGroupVariants = cva("grid gap-(--lex-menu-group-gap)")
66
66
 
67
67
  export const menuGroupLabelVariants = cva(
68
- "px-(--lsys-menu-item-padding-x) py-(--lsys-menu-group-label-padding-y) 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)",
68
+ "px-(--lex-menu-item-padding-x) py-(--lex-menu-group-label-padding-y) 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)",
69
69
  )
70
70
 
71
71
  export const menuSeparatorVariants = cva(
72
- "my-(--lsys-menu-separator-margin-y) h-px bg-(--lsys-menu-separator-background)",
72
+ "my-(--lex-menu-separator-margin-y) h-px bg-(--lex-menu-separator-background)",
73
73
  )
package/templates/primitives/Menubar/Menubar.variants.ts CHANGED
@@ -7,7 +7,7 @@
7
7
  import { cva } from "class-variance-authority"
8
8
 
9
9
  export const menubarVariants = cva(
10
- "flex items-center gap-(--lsys-menu-list-gap) rounded-(--lsys-menu-radius) border border-(--lsys-menu-trigger-border-color) bg-(--lsys-menu-trigger-background) p-(--lsys-menu-list-padding)",
10
+ "flex items-center gap-(--lex-menu-list-gap) rounded-(--lex-menu-radius) border border-(--lex-menu-trigger-border-color) bg-(--lex-menu-trigger-background) p-(--lex-menu-list-padding)",
11
11
  {
12
12
  variants: {
13
13
  orientation: {
package/templates/primitives/Meter/Meter.variants.ts CHANGED
@@ -7,29 +7,29 @@
7
7
  import { cva } from "class-variance-authority"
8
8
 
9
9
  export const meterVariants = cva(
10
- "grid gap-(--lsys-meter-gap) text-(length:--lsys-meter-label-font-size) leading-(--lsys-meter-label-font-line-height) text-(--lsys-meter-label-foreground)",
10
+ "grid gap-(--lex-meter-gap) text-(length:--lex-meter-label-font-size) leading-(--lex-meter-label-font-line-height) text-(--lex-meter-label-foreground)",
11
11
  )
12
12
 
13
13
  export const meterHeaderVariants = cva(
14
- "flex items-center justify-between gap-(--lsys-meter-header-gap)",
14
+ "flex items-center justify-between gap-(--lex-meter-header-gap)",
15
15
  )
16
16
 
17
17
  export const meterLabelVariants = cva(
18
- "font-(--lsys-meter-label-font-weight) text-(--lsys-meter-label-foreground)",
18
+ "font-(--lex-meter-label-font-weight) text-(--lex-meter-label-foreground)",
19
19
  )
20
20
 
21
21
  export const meterValueVariants = cva(
22
- "font-(--lsys-meter-value-font-weight) text-(--lsys-meter-value-foreground)",
22
+ "font-(--lex-meter-value-font-weight) text-(--lex-meter-value-foreground)",
23
23
  )
24
24
 
25
25
  export const meterTrackVariants = cva(
26
- "overflow-hidden rounded-(--lsys-meter-track-radius) bg-(--lsys-meter-track-background)",
26
+ "overflow-hidden rounded-(--lex-meter-track-radius) bg-(--lex-meter-track-background)",
27
27
  {
28
28
  variants: {
29
29
  size: {
30
- sm: "h-(--lsys-meter-track-height-sm)",
31
- md: "h-(--lsys-meter-track-height-md)",
32
- lg: "h-(--lsys-meter-track-height-lg)",
30
+ sm: "h-(--lex-meter-track-height-sm)",
31
+ md: "h-(--lex-meter-track-height-md)",
32
+ lg: "h-(--lex-meter-track-height-lg)",
33
33
  },
34
34
  },
35
35
  defaultVariants: {
@@ -40,8 +40,8 @@ export const meterTrackVariants = cva(
40
40
 
41
41
  export const meterIndicatorVariants = cva(
42
42
  [
43
- "h-full bg-(--lsys-meter-indicator-background) transition-transform",
44
- "duration-(--lsys-meter-transition-duration) ease-(--lsys-meter-transition-easing)",
45
- "data-[complete]:bg-(--lsys-meter-indicator-background-complete)",
43
+ "h-full bg-(--lex-meter-indicator-background) transition-transform",
44
+ "duration-(--lex-meter-transition-duration) ease-(--lex-meter-transition-easing)",
45
+ "data-[complete]:bg-(--lex-meter-indicator-background-complete)",
46
46
  ].join(" "),
47
47
  )
package/templates/primitives/NavigationMenu/NavigationMenu.variants.ts CHANGED
@@ -30,11 +30,11 @@ export const navigationMenuRootVariants = cva(
30
30
  )
31
31
 
32
32
  export const navigationMenuListVariants = cva(
33
- "flex flex-1 list-none items-center justify-center gap-(--lsys-menu-list-gap) p-(--lsys-menu-list-padding)",
33
+ "flex flex-1 list-none items-center justify-center gap-(--lex-menu-list-gap) p-(--lex-menu-list-padding)",
34
34
  )
35
35
 
36
36
  export const navigationMenuItemVariants = cva("relative")
37
37
 
38
38
  export const navigationMenuContentVariants = cva(
39
- "grid gap-(--lsys-menu-list-gap) p-(--lsys-menu-list-padding)",
39
+ "grid gap-(--lex-menu-list-gap) p-(--lex-menu-list-padding)",
40
40
  )
package/templates/primitives/NumberField/NumberField.variants.ts CHANGED
@@ -8,22 +8,22 @@ import { cva } from "class-variance-authority"
8
8
  import { disabledStateClasses } from "@/lib/utils"
9
9
 
10
10
  export const numberFieldVariants = cva(
11
- "grid gap-(--lsys-number-field-gap) text-(--lsys-number-field-foreground) data-[disabled]:opacity-(--lsys-opacity-disabled)",
11
+ "grid gap-(--lex-number-field-gap) text-(--lex-number-field-foreground) data-[disabled]:opacity-(--lex-opacity-disabled)",
12
12
  )
13
13
 
14
14
  export const numberFieldGroupVariants = cva(
15
15
  [
16
- "inline-flex w-full min-w-0 items-stretch overflow-hidden rounded-(--lsys-number-field-radius)",
17
- "border border-(--lsys-number-field-border-color) bg-(--lsys-number-field-background)",
18
- "transition-colors duration-(--lsys-number-field-transition-duration) ease-(--lsys-number-field-transition-easing)",
19
- "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
16
+ "inline-flex w-full min-w-0 items-stretch overflow-hidden rounded-(--lex-number-field-radius)",
17
+ "border border-(--lex-number-field-border-color) bg-(--lex-number-field-background)",
18
+ "transition-colors duration-(--lex-number-field-transition-duration) ease-(--lex-number-field-transition-easing)",
19
+ "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lex-opacity-disabled)",
20
20
  ].join(" "),
21
21
  {
22
22
  variants: {
23
23
  size: {
24
- sm: "h-(--lsys-number-field-height-sm)",
25
- md: "h-(--lsys-number-field-height-md)",
26
- lg: "h-(--lsys-number-field-height-lg)",
24
+ sm: "h-(--lex-number-field-height-sm)",
25
+ md: "h-(--lex-number-field-height-md)",
26
+ lg: "h-(--lex-number-field-height-lg)",
27
27
  },
28
28
  },
29
29
  defaultVariants: {
@@ -34,19 +34,19 @@ export const numberFieldGroupVariants = cva(
34
34
 
35
35
  export const numberFieldInputVariants = cva(
36
36
  [
37
- "min-w-0 flex-1 border-0 bg-transparent text-(--lsys-number-field-input-foreground)",
38
- "font-(family-name:--lsys-number-field-input-font-family) font-(--lsys-number-field-input-font-weight) leading-(--lsys-number-field-input-font-line-height) tracking-(--lsys-number-field-input-font-letter-spacing)",
39
- "placeholder:text-(--lsys-number-field-input-placeholder-color)",
40
- "outline-none focus-visible:ring-(length:--lsys-number-field-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lsys-number-field-focus-ring-color)",
41
- "aria-invalid:ring-(length:--lsys-number-field-invalid-ring-width) aria-invalid:ring-inset aria-invalid:ring-(--lsys-number-field-invalid-ring-color) data-[invalid]:ring-(length:--lsys-number-field-invalid-ring-width) data-[invalid]:ring-inset data-[invalid]:ring-(--lsys-number-field-invalid-ring-color)",
37
+ "min-w-0 flex-1 border-0 bg-transparent text-(--lex-number-field-input-foreground)",
38
+ "font-(family-name:--lex-number-field-input-font-family) font-(--lex-number-field-input-font-weight) leading-(--lex-number-field-input-font-line-height) tracking-(--lex-number-field-input-font-letter-spacing)",
39
+ "placeholder:text-(--lex-number-field-input-placeholder-color)",
40
+ "outline-none focus-visible:ring-(length:--lex-number-field-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lex-number-field-focus-ring-color)",
41
+ "aria-invalid:ring-(length:--lex-number-field-invalid-ring-width) aria-invalid:ring-inset aria-invalid:ring-(--lex-number-field-invalid-ring-color) data-[invalid]:ring-(length:--lex-number-field-invalid-ring-width) data-[invalid]:ring-inset data-[invalid]:ring-(--lex-number-field-invalid-ring-color)",
42
42
  "disabled:cursor-not-allowed data-[disabled]:cursor-not-allowed",
43
43
  ].join(" "),
44
44
  {
45
45
  variants: {
46
46
  size: {
47
- sm: "px-(--lsys-number-field-input-padding-x-sm) text-(length:--lsys-number-field-input-font-size-sm)",
48
- md: "px-(--lsys-number-field-input-padding-x-md) text-(length:--lsys-number-field-input-font-size-md)",
49
- lg: "px-(--lsys-number-field-input-padding-x-lg) text-(length:--lsys-number-field-input-font-size-lg)",
47
+ sm: "px-(--lex-number-field-input-padding-x-sm) text-(length:--lex-number-field-input-font-size-sm)",
48
+ md: "px-(--lex-number-field-input-padding-x-md) text-(length:--lex-number-field-input-font-size-md)",
49
+ lg: "px-(--lex-number-field-input-padding-x-lg) text-(length:--lex-number-field-input-font-size-lg)",
50
50
  },
51
51
  },
52
52
  defaultVariants: {
@@ -57,10 +57,10 @@ export const numberFieldInputVariants = cva(
57
57
 
58
58
  export const numberFieldButtonVariants = cva(
59
59
  [
60
- "inline-flex shrink-0 select-none items-center justify-center border-(--lsys-number-field-stepper-border-color)",
61
- "bg-(--lsys-number-field-stepper-background) text-(--lsys-number-field-stepper-foreground)",
62
- "font-(--lsys-number-field-stepper-font-weight) transition-colors duration-(--lsys-number-field-transition-duration) ease-(--lsys-number-field-transition-easing)",
63
- "hover:bg-(--lsys-number-field-stepper-hover-background) focus-visible:outline-none focus-visible:ring-(length:--lsys-number-field-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lsys-number-field-focus-ring-color)",
60
+ "inline-flex shrink-0 select-none items-center justify-center border-(--lex-number-field-stepper-border-color)",
61
+ "bg-(--lex-number-field-stepper-background) text-(--lex-number-field-stepper-foreground)",
62
+ "font-(--lex-number-field-stepper-font-weight) transition-colors duration-(--lex-number-field-transition-duration) ease-(--lex-number-field-transition-easing)",
63
+ "hover:bg-(--lex-number-field-stepper-hover-background) focus-visible:outline-none focus-visible:ring-(length:--lex-number-field-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lex-number-field-focus-ring-color)",
64
64
  "disabled:cursor-not-allowed",
65
65
  disabledStateClasses,
66
66
  ].join(" "),
@@ -71,9 +71,9 @@ export const numberFieldButtonVariants = cva(
71
71
  increment: "border-l",
72
72
  },
73
73
  size: {
74
- sm: "w-(--lsys-number-field-stepper-width-sm) text-(length:--lsys-number-field-stepper-font-size-sm)",
75
- md: "w-(--lsys-number-field-stepper-width-md) text-(length:--lsys-number-field-stepper-font-size-md)",
76
- lg: "w-(--lsys-number-field-stepper-width-lg) text-(length:--lsys-number-field-stepper-font-size-lg)",
74
+ sm: "w-(--lex-number-field-stepper-width-sm) text-(length:--lex-number-field-stepper-font-size-sm)",
75
+ md: "w-(--lex-number-field-stepper-width-md) text-(length:--lex-number-field-stepper-font-size-md)",
76
+ lg: "w-(--lex-number-field-stepper-width-lg) text-(length:--lex-number-field-stepper-font-size-lg)",
77
77
  },
78
78
  },
79
79
  defaultVariants: {
@@ -84,9 +84,9 @@ export const numberFieldButtonVariants = cva(
84
84
  )
85
85
 
86
86
  export const numberFieldScrubAreaVariants = cva(
87
- "w-fit cursor-ew-resize text-(length:--lsys-number-field-scrub-font-size) font-(--lsys-number-field-scrub-font-weight) text-(--lsys-number-field-scrub-foreground)",
87
+ "w-fit cursor-ew-resize text-(length:--lex-number-field-scrub-font-size) font-(--lex-number-field-scrub-font-weight) text-(--lex-number-field-scrub-foreground)",
88
88
  )
89
89
 
90
90
  export const numberFieldScrubAreaCursorVariants = cva(
91
- "size-(--lsys-number-field-scrub-cursor-size) rounded-(--lsys-number-field-scrub-cursor-radius) bg-(--lsys-number-field-scrub-cursor-background)",
91
+ "size-(--lex-number-field-scrub-cursor-size) rounded-(--lex-number-field-scrub-cursor-radius) bg-(--lex-number-field-scrub-cursor-background)",
92
92
  )
package/templates/primitives/OtpField/OtpField.variants.ts CHANGED
@@ -9,19 +9,19 @@ import { disabledStateClasses, invalidStateClasses } from "@/lib/utils"
9
9
 
10
10
  export const otpFieldVariants = cva(
11
11
  [
12
- "inline-flex items-center gap-(--lsys-input-padding-x-sm) text-(--lsys-field-foreground)",
13
- "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
12
+ "inline-flex items-center gap-(--lex-input-padding-x-sm) text-(--lex-field-foreground)",
13
+ "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lex-opacity-disabled)",
14
14
  ].join(" "),
15
15
  )
16
16
 
17
17
  export const otpFieldInputVariants = cva(
18
18
  [
19
- "flex shrink-0 items-center justify-center border bg-(--lsys-input-background) text-center text-(--lsys-input-foreground)",
20
- "rounded-(--lsys-input-radius) border-(--lsys-input-border-color)",
21
- "font-(family-name:--lsys-input-font-family) font-(--lsys-input-font-weight) leading-(--lsys-input-font-line-height) tracking-(--lsys-input-font-letter-spacing)",
22
- "transition-colors duration-(--lsys-input-transition-duration) ease-(--lsys-input-transition-easing)",
23
- "outline-none focus-visible:border-(--lsys-input-focus-border-color) focus-visible:ring-(length:--lsys-input-focus-ring-width) focus-visible:ring-(--lsys-input-focus-ring-color) focus-visible:ring-offset-(length:--lsys-input-focus-ring-offset) focus-visible:ring-offset-(--lsys-input-focus-ring-offset-color)",
24
- "data-[filled]:border-(--lsys-input-focus-border-color)",
19
+ "flex shrink-0 items-center justify-center border bg-(--lex-input-background) text-center text-(--lex-input-foreground)",
20
+ "rounded-(--lex-input-radius) border-(--lex-input-border-color)",
21
+ "font-(family-name:--lex-input-font-family) font-(--lex-input-font-weight) leading-(--lex-input-font-line-height) tracking-(--lex-input-font-letter-spacing)",
22
+ "transition-colors duration-(--lex-input-transition-duration) ease-(--lex-input-transition-easing)",
23
+ "outline-none focus-visible:border-(--lex-input-focus-border-color) focus-visible:ring-(length:--lex-input-focus-ring-width) focus-visible:ring-(--lex-input-focus-ring-color) focus-visible:ring-offset-(length:--lex-input-focus-ring-offset) focus-visible:ring-offset-(--lex-input-focus-ring-offset-color)",
24
+ "data-[filled]:border-(--lex-input-focus-border-color)",
25
25
  "disabled:cursor-not-allowed",
26
26
  disabledStateClasses,
27
27
  invalidStateClasses,
@@ -29,9 +29,9 @@ export const otpFieldInputVariants = cva(
29
29
  {
30
30
  variants: {
31
31
  size: {
32
- sm: "size-(--lsys-input-height-sm) text-(length:--lsys-input-font-size-sm)",
33
- md: "size-(--lsys-input-height-md) text-(length:--lsys-input-font-size-md)",
34
- lg: "size-(--lsys-input-height-lg) text-(length:--lsys-input-font-size-lg)",
32
+ sm: "size-(--lex-input-height-sm) text-(length:--lex-input-font-size-sm)",
33
+ md: "size-(--lex-input-height-md) text-(length:--lex-input-font-size-md)",
34
+ lg: "size-(--lex-input-height-lg) text-(length:--lex-input-font-size-lg)",
35
35
  },
36
36
  },
37
37
  defaultVariants: {
@@ -41,5 +41,5 @@ export const otpFieldInputVariants = cva(
41
41
  )
42
42
 
43
43
  export const otpFieldSeparatorVariants = cva(
44
- "select-none text-(length:--lsys-input-font-size-md) font-(--lsys-input-font-weight) text-(--lsys-input-placeholder-color)",
44
+ "select-none text-(length:--lex-input-font-size-md) font-(--lex-input-font-weight) text-(--lex-input-placeholder-color)",
45
45
  )
package/templates/primitives/Popover/Popover.variants.ts CHANGED
@@ -9,60 +9,58 @@ import { disabledStateClasses } from "@/lib/utils"
9
9
 
10
10
  export const popoverTriggerVariants = cva(
11
11
  [
12
- "inline-flex h-(--lsys-popover-trigger-height) items-center justify-center rounded-(--lsys-popover-trigger-radius)",
13
- "border border-(--lsys-popover-trigger-border-color) bg-(--lsys-popover-trigger-background) px-(--lsys-popover-trigger-padding-x) text-(--lsys-popover-trigger-foreground)",
14
- "text-(length:--lsys-popover-trigger-font-size) font-(--lsys-popover-trigger-font-weight) leading-(--lsys-popover-trigger-font-line-height)",
15
- "transition-colors duration-(--lsys-popover-transition-duration) ease-(--lsys-popover-transition-easing)",
16
- "outline-none hover:bg-(--lsys-popover-trigger-hover-background) focus-visible:ring-(length:--lsys-popover-focus-ring-width) focus-visible:ring-(--lsys-popover-focus-ring-color) focus-visible:ring-offset-(length:--lsys-popover-focus-ring-offset) focus-visible:ring-offset-(--lsys-popover-focus-ring-offset-color)",
12
+ "inline-flex h-(--lex-popover-trigger-height) items-center justify-center rounded-(--lex-popover-trigger-radius)",
13
+ "border border-(--lex-popover-trigger-border-color) bg-(--lex-popover-trigger-background) px-(--lex-popover-trigger-padding-x) text-(--lex-popover-trigger-foreground)",
14
+ "text-(length:--lex-popover-trigger-font-size) font-(--lex-popover-trigger-font-weight) leading-(--lex-popover-trigger-font-line-height)",
15
+ "transition-colors duration-(--lex-popover-transition-duration) ease-(--lex-popover-transition-easing)",
16
+ "outline-none hover:bg-(--lex-popover-trigger-hover-background) focus-visible:ring-(length:--lex-popover-focus-ring-width) focus-visible:ring-(--lex-popover-focus-ring-color) focus-visible:ring-offset-(length:--lex-popover-focus-ring-offset) focus-visible:ring-offset-(--lex-popover-focus-ring-offset-color)",
17
17
  disabledStateClasses,
18
18
  ].join(" "),
19
19
  )
20
20
 
21
21
  export const popoverBackdropVariants = cva(
22
22
  [
23
- "fixed inset-0 z-(--lsys-popover-backdrop-z-index) bg-(--lsys-popover-backdrop-background) opacity-(--lsys-popover-backdrop-opacity)",
23
+ "fixed inset-0 z-(--lex-popover-backdrop-z-index) bg-(--lex-popover-backdrop-background) opacity-(--lex-popover-backdrop-opacity)",
24
24
  "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
25
- "transition-opacity duration-(--lsys-popover-transition-duration) ease-(--lsys-popover-transition-easing)",
25
+ "transition-opacity duration-(--lex-popover-transition-duration) ease-(--lex-popover-transition-easing)",
26
26
  ].join(" "),
27
27
  )
28
28
 
29
29
  export const popoverPositionerVariants = cva(
30
- "z-(--lsys-popover-positioner-z-index) outline-none data-[anchor-hidden]:hidden",
30
+ "z-(--lex-popover-positioner-z-index) outline-none data-[anchor-hidden]:hidden",
31
31
  )
32
32
 
33
33
  export const popoverPopupVariants = cva(
34
34
  [
35
- "grid w-[min(calc(100vw-(var(--lsys-popover-popup-inset)*2)),var(--lsys-popover-popup-max-width))] gap-(--lsys-popover-popup-gap) rounded-(--lsys-popover-popup-radius) border",
36
- "border-(--lsys-popover-popup-border-color) bg-(--lsys-popover-popup-background) p-(--lsys-popover-popup-padding) text-(--lsys-popover-popup-foreground) shadow-(--lsys-popover-popup-shadow)",
35
+ "grid w-[min(calc(100vw-(var(--lex-popover-popup-inset)*2)),var(--lex-popover-popup-max-width))] gap-(--lex-popover-popup-gap) rounded-(--lex-popover-popup-radius) border",
36
+ "border-(--lex-popover-popup-border-color) bg-(--lex-popover-popup-background) p-(--lex-popover-popup-padding) text-(--lex-popover-popup-foreground) shadow-(--lex-popover-popup-shadow)",
37
37
  "outline-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
38
- "transition-[opacity,transform] duration-(--lsys-popover-transition-duration) ease-(--lsys-popover-transition-easing)",
38
+ "transition-[opacity,transform] duration-(--lex-popover-transition-duration) ease-(--lex-popover-transition-easing)",
39
39
  ].join(" "),
40
40
  )
41
41
 
42
42
  export const popoverArrowVariants = cva(
43
43
  [
44
- "size-(--lsys-popover-arrow-size) rotate-45 border border-(--lsys-popover-popup-border-color) bg-(--lsys-popover-popup-background)",
44
+ "size-(--lex-popover-arrow-size) rotate-45 border border-(--lex-popover-popup-border-color) bg-(--lex-popover-popup-background)",
45
45
  "data-[side=bottom]:-translate-y-1/2 data-[side=left]:translate-x-1/2 data-[side=right]:-translate-x-1/2 data-[side=top]:translate-y-1/2",
46
46
  ].join(" "),
47
47
  )
48
48
 
49
49
  export const popoverTitleVariants = cva(
50
- "pr-(--lsys-popover-title-padding-end) text-(length:--lsys-popover-title-font-size) font-(--lsys-popover-title-font-weight) leading-(--lsys-popover-title-font-line-height) text-(--lsys-popover-title-foreground)",
50
+ "pr-(--lex-popover-title-padding-end) text-(length:--lex-popover-title-font-size) font-(--lex-popover-title-font-weight) leading-(--lex-popover-title-font-line-height) text-(--lex-popover-title-foreground)",
51
51
  )
52
52
 
53
53
  export const popoverDescriptionVariants = cva(
54
- "text-(length:--lsys-popover-description-font-size) font-(--lsys-popover-description-font-weight) leading-(--lsys-popover-description-font-line-height) text-(--lsys-popover-description-foreground)",
54
+ "text-(length:--lex-popover-description-font-size) font-(--lex-popover-description-font-weight) leading-(--lex-popover-description-font-line-height) text-(--lex-popover-description-foreground)",
55
55
  )
56
56
 
57
57
  export const popoverCloseVariants = cva(
58
58
  [
59
- "absolute right-(--lsys-popover-close-inset) top-(--lsys-popover-close-inset) inline-flex size-(--lsys-popover-close-size) items-center justify-center rounded-(--lsys-popover-close-radius)",
60
- "text-(--lsys-popover-close-foreground) outline-none transition-colors duration-(--lsys-popover-transition-duration) ease-(--lsys-popover-transition-easing)",
61
- "hover:bg-(--lsys-popover-close-hover-background) focus-visible:ring-(length:--lsys-popover-focus-ring-width) focus-visible:ring-(--lsys-popover-focus-ring-color) focus-visible:ring-offset-(length:--lsys-popover-focus-ring-offset) focus-visible:ring-offset-(--lsys-popover-focus-ring-offset-color)",
59
+ "absolute right-(--lex-popover-close-inset) top-(--lex-popover-close-inset) inline-flex size-(--lex-popover-close-size) items-center justify-center rounded-(--lex-popover-close-radius)",
60
+ "text-(--lex-popover-close-foreground) outline-none transition-colors duration-(--lex-popover-transition-duration) ease-(--lex-popover-transition-easing)",
61
+ "hover:bg-(--lex-popover-close-hover-background) focus-visible:ring-(length:--lex-popover-focus-ring-width) focus-visible:ring-(--lex-popover-focus-ring-color) focus-visible:ring-offset-(length:--lex-popover-focus-ring-offset) focus-visible:ring-offset-(--lex-popover-focus-ring-offset-color)",
62
62
  disabledStateClasses,
63
63
  ].join(" "),
64
64
  )
65
65
 
66
- export const popoverViewportVariants = cva(
67
- "grid gap-(--lsys-popover-popup-gap)",
68
- )
66
+ export const popoverViewportVariants = cva("grid gap-(--lex-popover-popup-gap)")
package/templates/primitives/PreviewCard/PreviewCard.variants.ts CHANGED
@@ -20,5 +20,5 @@ export const previewCardArrowVariants = popoverArrowVariants
20
20
  export const previewCardViewportVariants = popoverViewportVariants
21
21
 
22
22
  export const previewCardTriggerVariants = cva(
23
- "inline-flex outline-none focus-visible:ring-(length:--lsys-popover-focus-ring-width) focus-visible:ring-(--lsys-popover-focus-ring-color)",
23
+ "inline-flex outline-none focus-visible:ring-(length:--lex-popover-focus-ring-width) focus-visible:ring-(--lex-popover-focus-ring-color)",
24
24
  )
package/templates/primitives/Progress/Progress.variants.ts CHANGED
@@ -7,17 +7,17 @@
7
7
  import { cva } from "class-variance-authority"
8
8
 
9
9
  export const progressVariants = cva(
10
- "grid gap-(--lsys-progress-gap) text-(length:--lsys-progress-label-font-size) leading-(--lsys-progress-label-font-line-height) text-(--lsys-progress-label-foreground)",
10
+ "grid gap-(--lex-progress-gap) text-(length:--lex-progress-label-font-size) leading-(--lex-progress-label-font-line-height) text-(--lex-progress-label-foreground)",
11
11
  )
12
12
 
13
13
  export const progressTrackVariants = cva(
14
- "overflow-hidden rounded-(--lsys-progress-track-radius) bg-(--lsys-progress-track-background)",
14
+ "overflow-hidden rounded-(--lex-progress-track-radius) bg-(--lex-progress-track-background)",
15
15
  {
16
16
  variants: {
17
17
  size: {
18
- sm: "h-(--lsys-progress-track-height-sm)",
19
- md: "h-(--lsys-progress-track-height-md)",
20
- lg: "h-(--lsys-progress-track-height-lg)",
18
+ sm: "h-(--lex-progress-track-height-sm)",
19
+ md: "h-(--lex-progress-track-height-md)",
20
+ lg: "h-(--lex-progress-track-height-lg)",
21
21
  },
22
22
  },
23
23
  defaultVariants: {
@@ -27,13 +27,13 @@ export const progressTrackVariants = cva(
27
27
  )
28
28
 
29
29
  export const progressIndicatorVariants = cva(
30
- "h-full bg-(--lsys-progress-indicator-background) transition-transform duration-(--lsys-progress-transition-duration) ease-(--lsys-progress-transition-easing) data-[indeterminate]:animate-pulse",
30
+ "h-full bg-(--lex-progress-indicator-background) transition-transform duration-(--lex-progress-transition-duration) ease-(--lex-progress-transition-easing) data-[indeterminate]:animate-pulse",
31
31
  )
32
32
 
33
33
  export const progressLabelVariants = cva(
34
- "text-(--lsys-progress-label-foreground)",
34
+ "text-(--lex-progress-label-foreground)",
35
35
  )
36
36
 
37
37
  export const progressValueVariants = cva(
38
- "font-(--lsys-meter-value-font-weight) text-(--lsys-meter-value-foreground)",
38
+ "font-(--lex-meter-value-font-weight) text-(--lex-meter-value-foreground)",
39
39
  )
package/templates/primitives/RadioGroup/RadioGroup.variants.ts CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  import { cva } from "class-variance-authority"
8
8
 
9
- export const radioGroupVariants = cva("grid gap-(--lsys-radio-group-gap)", {
9
+ export const radioGroupVariants = cva("grid gap-(--lex-radio-group-gap)", {
10
10
  variants: {
11
11
  orientation: {
12
12
  horizontal: "grid-flow-col justify-start",
@@ -20,19 +20,19 @@ export const radioGroupVariants = cva("grid gap-(--lsys-radio-group-gap)", {
20
20
 
21
21
  export const radioGroupItemVariants = cva(
22
22
  [
23
- "inline-flex shrink-0 items-center justify-center rounded-(--lsys-radio-group-item-radius) border",
24
- "border-(--lsys-radio-group-item-border-color) bg-(--lsys-radio-group-item-background) text-(--lsys-radio-group-item-foreground)",
25
- "transition-colors duration-(--lsys-radio-group-transition-duration) ease-(--lsys-radio-group-transition-easing)",
26
- "outline-none data-[checked]:border-(--lsys-radio-group-item-checked-border-color)",
27
- "data-[focused]:ring-(length:--lsys-radio-group-focus-ring-width) data-[focused]:ring-(--lsys-radio-group-focus-ring-color) data-[focused]:ring-offset-(length:--lsys-radio-group-focus-ring-offset) data-[focused]:ring-offset-(--lsys-radio-group-focus-ring-offset-color)",
28
- "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
23
+ "inline-flex shrink-0 items-center justify-center rounded-(--lex-radio-group-item-radius) border",
24
+ "border-(--lex-radio-group-item-border-color) bg-(--lex-radio-group-item-background) text-(--lex-radio-group-item-foreground)",
25
+ "transition-colors duration-(--lex-radio-group-transition-duration) ease-(--lex-radio-group-transition-easing)",
26
+ "outline-none data-[checked]:border-(--lex-radio-group-item-checked-border-color)",
27
+ "data-[focused]:ring-(length:--lex-radio-group-focus-ring-width) data-[focused]:ring-(--lex-radio-group-focus-ring-color) data-[focused]:ring-offset-(length:--lex-radio-group-focus-ring-offset) data-[focused]:ring-offset-(--lex-radio-group-focus-ring-offset-color)",
28
+ "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lex-opacity-disabled)",
29
29
  ].join(" "),
30
30
  {
31
31
  variants: {
32
32
  size: {
33
- sm: "size-(--lsys-radio-group-item-size-sm)",
34
- md: "size-(--lsys-radio-group-item-size-md)",
35
- lg: "size-(--lsys-radio-group-item-size-lg)",
33
+ sm: "size-(--lex-radio-group-item-size-sm)",
34
+ md: "size-(--lex-radio-group-item-size-md)",
35
+ lg: "size-(--lex-radio-group-item-size-lg)",
36
36
  },
37
37
  },
38
38
  defaultVariants: {
@@ -42,15 +42,15 @@ export const radioGroupItemVariants = cva(
42
42
  )
43
43
 
44
44
  export const radioGroupLabelVariants = cva(
45
- "inline-flex items-center gap-(--lsys-radio-group-label-gap) text-(length:--lsys-radio-group-label-font-size) font-(--lsys-radio-group-label-font-weight) leading-(--lsys-radio-group-label-font-line-height) text-(--lsys-radio-group-label-foreground)",
45
+ "inline-flex items-center gap-(--lex-radio-group-label-gap) text-(length:--lex-radio-group-label-font-size) font-(--lex-radio-group-label-font-weight) leading-(--lex-radio-group-label-font-line-height) text-(--lex-radio-group-label-foreground)",
46
46
  )
47
47
 
48
48
  export const radioGroupIndicatorVariants = cva("rounded-full bg-current", {
49
49
  variants: {
50
50
  size: {
51
- sm: "size-(--lsys-radio-group-indicator-size-sm)",
52
- md: "size-(--lsys-radio-group-indicator-size-md)",
53
- lg: "size-(--lsys-radio-group-indicator-size-lg)",
51
+ sm: "size-(--lex-radio-group-indicator-size-sm)",
52
+ md: "size-(--lex-radio-group-indicator-size-md)",
53
+ lg: "size-(--lex-radio-group-indicator-size-lg)",
54
54
  },
55
55
  },
56
56
  defaultVariants: {