@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/Textarea/Textarea.variants.ts CHANGED
@@ -9,27 +9,27 @@ import { disabledStateClasses } from "@/lib/utils"
9
9
 
10
10
  export const textareaVariants = cva(
11
11
  [
12
- "flex w-full min-w-0 border bg-(--lsys-textarea-background) text-(--lsys-textarea-foreground)",
13
- "rounded-(--lsys-textarea-radius) border-(--lsys-textarea-border-color)",
14
- "font-(family-name:--lsys-textarea-font-family) font-(--lsys-textarea-font-weight) leading-(--lsys-textarea-font-line-height) tracking-(--lsys-textarea-font-letter-spacing)",
15
- "placeholder:text-(--lsys-textarea-placeholder-color)",
16
- "transition-colors duration-(--lsys-textarea-transition-duration) ease-(--lsys-textarea-transition-easing)",
17
- "outline-none focus-visible:border-(--lsys-textarea-focus-border-color) focus-visible:ring-(length:--lsys-textarea-focus-ring-width) focus-visible:ring-(--lsys-textarea-focus-ring-color) focus-visible:ring-offset-(length:--lsys-textarea-focus-ring-offset) focus-visible:ring-offset-(--lsys-textarea-focus-ring-offset-color)",
12
+ "flex w-full min-w-0 border bg-(--lex-textarea-background) text-(--lex-textarea-foreground)",
13
+ "rounded-(--lex-textarea-radius) border-(--lex-textarea-border-color)",
14
+ "font-(family-name:--lex-textarea-font-family) font-(--lex-textarea-font-weight) leading-(--lex-textarea-font-line-height) tracking-(--lex-textarea-font-letter-spacing)",
15
+ "placeholder:text-(--lex-textarea-placeholder-color)",
16
+ "transition-colors duration-(--lex-textarea-transition-duration) ease-(--lex-textarea-transition-easing)",
17
+ "outline-none focus-visible:border-(--lex-textarea-focus-border-color) focus-visible:ring-(length:--lex-textarea-focus-ring-width) focus-visible:ring-(--lex-textarea-focus-ring-color) focus-visible:ring-offset-(length:--lex-textarea-focus-ring-offset) focus-visible:ring-offset-(--lex-textarea-focus-ring-offset-color)",
18
18
  "disabled:cursor-not-allowed",
19
19
  disabledStateClasses,
20
- "aria-invalid:border-(--lsys-textarea-invalid-border-color) aria-invalid:ring-(--lsys-textarea-invalid-ring-color) data-[invalid]:border-(--lsys-textarea-invalid-border-color) data-[invalid]:ring-(--lsys-textarea-invalid-ring-color)",
20
+ "aria-invalid:border-(--lex-textarea-invalid-border-color) aria-invalid:ring-(--lex-textarea-invalid-ring-color) data-[invalid]:border-(--lex-textarea-invalid-border-color) data-[invalid]:ring-(--lex-textarea-invalid-ring-color)",
21
21
  ].join(" "),
22
22
  {
23
23
  variants: {
24
24
  variant: {
25
25
  default: "",
26
26
  ghost:
27
- "border-transparent bg-transparent focus-visible:bg-(--lsys-textarea-background)",
27
+ "border-transparent bg-transparent focus-visible:bg-(--lex-textarea-background)",
28
28
  },
29
29
  size: {
30
- sm: "min-h-(--lsys-textarea-min-height-sm) px-(--lsys-textarea-padding-x-sm) py-(--lsys-textarea-padding-y-sm) text-(length:--lsys-textarea-font-size-sm)",
31
- md: "min-h-(--lsys-textarea-min-height-md) px-(--lsys-textarea-padding-x-md) py-(--lsys-textarea-padding-y-md) text-(length:--lsys-textarea-font-size-md)",
32
- lg: "min-h-(--lsys-textarea-min-height-lg) px-(--lsys-textarea-padding-x-lg) py-(--lsys-textarea-padding-y-lg) text-(length:--lsys-textarea-font-size-lg)",
30
+ sm: "min-h-(--lex-textarea-min-height-sm) px-(--lex-textarea-padding-x-sm) py-(--lex-textarea-padding-y-sm) text-(length:--lex-textarea-font-size-sm)",
31
+ md: "min-h-(--lex-textarea-min-height-md) px-(--lex-textarea-padding-x-md) py-(--lex-textarea-padding-y-md) text-(length:--lex-textarea-font-size-md)",
32
+ lg: "min-h-(--lex-textarea-min-height-lg) px-(--lex-textarea-padding-x-lg) py-(--lex-textarea-padding-y-lg) text-(length:--lex-textarea-font-size-lg)",
33
33
  },
34
34
  resize: {
35
35
  none: "resize-none",
package/templates/primitives/Toast/Toast.variants.ts CHANGED
@@ -9,8 +9,8 @@ import { disabledStateClasses } from "@/lib/utils"
9
9
 
10
10
  export const toastViewportVariants = cva(
11
11
  [
12
- "fixed z-(--lsys-toast-viewport-z-index) flex max-h-(--lsys-toast-viewport-max-height) w-[min(calc(100vw-(var(--lsys-toast-viewport-inset)*2)),var(--lsys-toast-viewport-width))] flex-col gap-(--lsys-toast-viewport-gap) p-(--lsys-toast-viewport-padding)",
13
- "data-[expanded]:gap-(--lsys-toast-viewport-gap-expanded)",
12
+ "fixed z-(--lex-toast-viewport-z-index) flex max-h-(--lex-toast-viewport-max-height) w-[min(calc(100vw-(var(--lex-toast-viewport-inset)*2)),var(--lex-toast-viewport-width))] flex-col gap-(--lex-toast-viewport-gap) p-(--lex-toast-viewport-padding)",
13
+ "data-[expanded]:gap-(--lex-toast-viewport-gap-expanded)",
14
14
  ].join(" "),
15
15
  {
16
16
  variants: {
@@ -28,61 +28,61 @@ export const toastViewportVariants = cva(
28
28
  )
29
29
 
30
30
  const toastTypeSurfaceClasses = [
31
- "border-(--lsys-toast-border-color) bg-(--lsys-toast-background) text-(--lsys-toast-foreground)",
32
- "data-[type=success]:border-(--lsys-toast-success-border-color) data-[type=success]:bg-(--lsys-toast-success-background) data-[type=success]:text-(--lsys-toast-success-foreground)",
33
- "data-[type=info]:border-(--lsys-toast-info-border-color) data-[type=info]:bg-(--lsys-toast-info-background) data-[type=info]:text-(--lsys-toast-info-foreground)",
34
- "data-[type=destructive]:border-(--lsys-toast-danger-border-color) data-[type=destructive]:bg-(--lsys-toast-danger-background) data-[type=destructive]:text-(--lsys-toast-danger-foreground)",
31
+ "border-(--lex-toast-border-color) bg-(--lex-toast-background) text-(--lex-toast-foreground)",
32
+ "data-[type=success]:border-(--lex-toast-success-border-color) data-[type=success]:bg-(--lex-toast-success-background) data-[type=success]:text-(--lex-toast-success-foreground)",
33
+ "data-[type=info]:border-(--lex-toast-info-border-color) data-[type=info]:bg-(--lex-toast-info-background) data-[type=info]:text-(--lex-toast-info-foreground)",
34
+ "data-[type=destructive]:border-(--lex-toast-danger-border-color) data-[type=destructive]:bg-(--lex-toast-danger-background) data-[type=destructive]:text-(--lex-toast-danger-foreground)",
35
35
  ].join(" ")
36
36
 
37
37
  export const toastVariants = cva(
38
38
  [
39
- "relative grid gap-(--lsys-toast-gap) rounded-(--lsys-toast-radius) border p-(--lsys-toast-padding) pr-(--lsys-toast-padding-end) shadow-(--lsys-toast-shadow) outline-none",
39
+ "relative grid gap-(--lex-toast-gap) rounded-(--lex-toast-radius) border p-(--lex-toast-padding) pr-(--lex-toast-padding-end) shadow-(--lex-toast-shadow) outline-none",
40
40
  toastTypeSurfaceClasses,
41
- "transition-[opacity,transform] duration-(--lsys-toast-transition-duration) ease-(--lsys-toast-transition-easing)",
42
- "data-[starting-style]:translate-y-(--lsys-toast-motion-offset-y) data-[starting-style]:opacity-0 data-[ending-style]:translate-y-(--lsys-toast-motion-offset-y) data-[ending-style]:opacity-0 data-[swiping]:transition-none",
41
+ "transition-[opacity,transform] duration-(--lex-toast-transition-duration) ease-(--lex-toast-transition-easing)",
42
+ "data-[starting-style]:translate-y-(--lex-toast-motion-offset-y) data-[starting-style]:opacity-0 data-[ending-style]:translate-y-(--lex-toast-motion-offset-y) data-[ending-style]:opacity-0 data-[swiping]:transition-none",
43
43
  "translate-x-[var(--toast-swipe-movement-x,0px)] translate-y-[var(--toast-swipe-movement-y,0px)]",
44
44
  ].join(" "),
45
45
  )
46
46
 
47
47
  export const toastContentVariants = cva(
48
- "grid gap-(--lsys-toast-content-gap) data-[behind]:opacity-(--lsys-toast-content-behind-opacity)",
48
+ "grid gap-(--lex-toast-content-gap) data-[behind]:opacity-(--lex-toast-content-behind-opacity)",
49
49
  )
50
50
 
51
51
  export const toastPositionerVariants = cva(
52
- "z-(--lsys-toast-viewport-z-index) max-w-[min(var(--available-width,calc(100vw-(var(--lsys-toast-viewport-inset)*2))),var(--lsys-toast-viewport-width))]",
52
+ "z-(--lex-toast-viewport-z-index) max-w-[min(var(--available-width,calc(100vw-(var(--lex-toast-viewport-inset)*2))),var(--lex-toast-viewport-width))]",
53
53
  )
54
54
 
55
55
  export const toastArrowVariants = cva(
56
56
  [
57
- "size-(--lsys-toast-arrow-size) rotate-45 border",
57
+ "size-(--lex-toast-arrow-size) rotate-45 border",
58
58
  toastTypeSurfaceClasses,
59
59
  ].join(" "),
60
60
  )
61
61
 
62
62
  export const toastTitleVariants = cva(
63
- "text-(length:--lsys-toast-title-font-size) font-(--lsys-toast-title-font-weight) leading-(--lsys-toast-title-font-line-height)",
63
+ "text-(length:--lex-toast-title-font-size) font-(--lex-toast-title-font-weight) leading-(--lex-toast-title-font-line-height)",
64
64
  )
65
65
 
66
66
  export const toastDescriptionVariants = cva(
67
67
  [
68
- "text-(length:--lsys-toast-description-font-size) font-(--lsys-toast-description-font-weight) leading-(--lsys-toast-description-font-line-height)",
69
- "text-(--lsys-toast-description-foreground) data-[type=success]:text-(--lsys-toast-success-foreground) data-[type=info]:text-(--lsys-toast-info-foreground) data-[type=destructive]:text-(--lsys-toast-danger-foreground)",
68
+ "text-(length:--lex-toast-description-font-size) font-(--lex-toast-description-font-weight) leading-(--lex-toast-description-font-line-height)",
69
+ "text-(--lex-toast-description-foreground) data-[type=success]:text-(--lex-toast-success-foreground) data-[type=info]:text-(--lex-toast-info-foreground) data-[type=destructive]:text-(--lex-toast-danger-foreground)",
70
70
  ].join(" "),
71
71
  )
72
72
 
73
73
  export const toastActionVariants = cva(
74
74
  [
75
- "inline-flex h-(--lsys-toast-action-height) items-center justify-center rounded-(--lsys-toast-action-radius) border border-(--lsys-toast-action-border-color) px-(--lsys-toast-action-padding-x)",
76
- "text-(length:--lsys-toast-action-font-size) font-(--lsys-toast-action-font-weight) leading-(--lsys-toast-action-font-line-height) text-(--lsys-toast-action-foreground)",
77
- "outline-none transition-colors duration-(--lsys-toast-transition-duration) ease-(--lsys-toast-transition-easing) hover:bg-(--lsys-toast-action-hover-background) focus-visible:ring-(length:--lsys-toast-focus-ring-width) focus-visible:ring-(--lsys-toast-focus-ring-color)",
75
+ "inline-flex h-(--lex-toast-action-height) items-center justify-center rounded-(--lex-toast-action-radius) border border-(--lex-toast-action-border-color) px-(--lex-toast-action-padding-x)",
76
+ "text-(length:--lex-toast-action-font-size) font-(--lex-toast-action-font-weight) leading-(--lex-toast-action-font-line-height) text-(--lex-toast-action-foreground)",
77
+ "outline-none transition-colors duration-(--lex-toast-transition-duration) ease-(--lex-toast-transition-easing) hover:bg-(--lex-toast-action-hover-background) focus-visible:ring-(length:--lex-toast-focus-ring-width) focus-visible:ring-(--lex-toast-focus-ring-color)",
78
78
  disabledStateClasses,
79
79
  ].join(" "),
80
80
  )
81
81
 
82
82
  export const toastCloseVariants = cva(
83
83
  [
84
- "absolute right-(--lsys-toast-close-inset) top-(--lsys-toast-close-inset) inline-flex size-(--lsys-toast-close-size) items-center justify-center rounded-(--lsys-toast-close-radius)",
85
- "text-(--lsys-toast-close-foreground) outline-none transition-colors duration-(--lsys-toast-transition-duration) ease-(--lsys-toast-transition-easing) hover:bg-(--lsys-toast-close-hover-background) focus-visible:ring-(length:--lsys-toast-focus-ring-width) focus-visible:ring-(--lsys-toast-focus-ring-color)",
84
+ "absolute right-(--lex-toast-close-inset) top-(--lex-toast-close-inset) inline-flex size-(--lex-toast-close-size) items-center justify-center rounded-(--lex-toast-close-radius)",
85
+ "text-(--lex-toast-close-foreground) outline-none transition-colors duration-(--lex-toast-transition-duration) ease-(--lex-toast-transition-easing) hover:bg-(--lex-toast-close-hover-background) focus-visible:ring-(length:--lex-toast-focus-ring-width) focus-visible:ring-(--lex-toast-focus-ring-color)",
86
86
  disabledStateClasses,
87
87
  ].join(" "),
88
88
  )
package/templates/primitives/Toggle/Toggle.variants.ts CHANGED
@@ -9,20 +9,20 @@ import { disabledStateClasses } from "@/lib/utils"
9
9
 
10
10
  export const toggleVariants = cva(
11
11
  [
12
- "inline-flex items-center justify-center rounded-(--lsys-toggle-radius) border",
13
- "border-(--lsys-toggle-border-color) bg-(--lsys-toggle-background) text-(--lsys-toggle-foreground)",
14
- "font-(family-name:--lsys-toggle-font-family) font-(--lsys-toggle-font-weight) leading-(--lsys-toggle-font-line-height) tracking-(--lsys-toggle-font-letter-spacing)",
15
- "transition-colors duration-(--lsys-toggle-transition-duration) ease-(--lsys-toggle-transition-easing)",
16
- "outline-none hover:bg-(--lsys-toggle-hover-background) data-[pressed]:border-(--lsys-toggle-pressed-border-color) data-[pressed]:bg-(--lsys-toggle-pressed-background) data-[pressed]:text-(--lsys-toggle-pressed-foreground)",
17
- "focus-visible:ring-(length:--lsys-toggle-focus-ring-width) focus-visible:ring-(--lsys-toggle-focus-ring-color) focus-visible:ring-offset-(length:--lsys-toggle-focus-ring-offset) focus-visible:ring-offset-(--lsys-toggle-focus-ring-offset-color)",
12
+ "inline-flex items-center justify-center rounded-(--lex-toggle-radius) border",
13
+ "border-(--lex-toggle-border-color) bg-(--lex-toggle-background) text-(--lex-toggle-foreground)",
14
+ "font-(family-name:--lex-toggle-font-family) font-(--lex-toggle-font-weight) leading-(--lex-toggle-font-line-height) tracking-(--lex-toggle-font-letter-spacing)",
15
+ "transition-colors duration-(--lex-toggle-transition-duration) ease-(--lex-toggle-transition-easing)",
16
+ "outline-none hover:bg-(--lex-toggle-hover-background) data-[pressed]:border-(--lex-toggle-pressed-border-color) data-[pressed]:bg-(--lex-toggle-pressed-background) data-[pressed]:text-(--lex-toggle-pressed-foreground)",
17
+ "focus-visible:ring-(length:--lex-toggle-focus-ring-width) focus-visible:ring-(--lex-toggle-focus-ring-color) focus-visible:ring-offset-(length:--lex-toggle-focus-ring-offset) focus-visible:ring-offset-(--lex-toggle-focus-ring-offset-color)",
18
18
  disabledStateClasses,
19
19
  ].join(" "),
20
20
  {
21
21
  variants: {
22
22
  size: {
23
- sm: "h-(--lsys-toggle-height-sm) px-(--lsys-toggle-padding-x-sm) text-(length:--lsys-toggle-font-size-sm)",
24
- md: "h-(--lsys-toggle-height-md) px-(--lsys-toggle-padding-x-md) text-(length:--lsys-toggle-font-size-md)",
25
- lg: "h-(--lsys-toggle-height-lg) px-(--lsys-toggle-padding-x-lg) text-(length:--lsys-toggle-font-size-lg)",
23
+ sm: "h-(--lex-toggle-height-sm) px-(--lex-toggle-padding-x-sm) text-(length:--lex-toggle-font-size-sm)",
24
+ md: "h-(--lex-toggle-height-md) px-(--lex-toggle-padding-x-md) text-(length:--lex-toggle-font-size-md)",
25
+ lg: "h-(--lex-toggle-height-lg) px-(--lex-toggle-padding-x-lg) text-(length:--lex-toggle-font-size-lg)",
26
26
  },
27
27
  },
28
28
  defaultVariants: {
package/templates/primitives/ToggleGroup/ToggleGroup.variants.ts CHANGED
@@ -8,8 +8,8 @@ import { cva } from "class-variance-authority"
8
8
 
9
9
  export const toggleGroupVariants = cva(
10
10
  [
11
- "inline-flex rounded-(--lsys-toggle-group-radius) border border-(--lsys-toggle-group-border-color)",
12
- "bg-(--lsys-toggle-group-background) p-(--lsys-toggle-group-padding)",
11
+ "inline-flex rounded-(--lex-toggle-group-radius) border border-(--lex-toggle-group-border-color)",
12
+ "bg-(--lex-toggle-group-background) p-(--lex-toggle-group-padding)",
13
13
  "[&_[data-toggle]]:border-0 [&_[data-toggle]]:shadow-none",
14
14
  ].join(" "),
15
15
  {
@@ -19,9 +19,9 @@ export const toggleGroupVariants = cva(
19
19
  vertical: "flex-col",
20
20
  },
21
21
  size: {
22
- sm: "gap-(--lsys-toggle-group-gap-sm)",
23
- md: "gap-(--lsys-toggle-group-gap-md)",
24
- lg: "gap-(--lsys-toggle-group-gap-lg)",
22
+ sm: "gap-(--lex-toggle-group-gap-sm)",
23
+ md: "gap-(--lex-toggle-group-gap-md)",
24
+ lg: "gap-(--lex-toggle-group-gap-lg)",
25
25
  },
26
26
  },
27
27
  defaultVariants: {
package/templates/primitives/Toolbar/Toolbar.variants.ts CHANGED
@@ -8,7 +8,7 @@ import { cva } from "class-variance-authority"
8
8
  import { disabledStateClasses } from "@/lib/utils"
9
9
 
10
10
  export const toolbarRootVariants = cva(
11
- "flex items-center gap-(--lsys-button-padding-x-sm) rounded-(--lsys-button-radius) border border-(--lsys-button-secondary-border-color) bg-(--lsys-button-secondary-background) p-(--lsys-button-padding-x-sm)",
11
+ "flex items-center gap-(--lex-button-padding-x-sm) rounded-(--lex-button-radius) border border-(--lex-button-secondary-border-color) bg-(--lex-button-secondary-background) p-(--lex-button-padding-x-sm)",
12
12
  {
13
13
  variants: {
14
14
  orientation: {
@@ -23,7 +23,7 @@ export const toolbarRootVariants = cva(
23
23
  )
24
24
 
25
25
  export const toolbarGroupVariants = cva(
26
- "flex items-center gap-(--lsys-space-1)",
26
+ "flex items-center gap-(--lex-space-1)",
27
27
  {
28
28
  variants: {
29
29
  orientation: {
@@ -39,42 +39,42 @@ export const toolbarGroupVariants = cva(
39
39
 
40
40
  export const toolbarButtonVariants = cva(
41
41
  [
42
- "inline-flex h-(--lsys-button-height-sm) items-center justify-center rounded-(--lsys-button-radius) border border-transparent px-(--lsys-button-padding-x-sm)",
43
- "text-(length:--lsys-button-font-size-sm) font-(--lsys-button-font-weight) leading-(--lsys-button-font-line-height) text-(--lsys-button-secondary-foreground)",
44
- "transition-colors duration-(--lsys-button-transition-duration) ease-(--lsys-button-transition-easing)",
45
- "outline-none hover:bg-(--lsys-button-secondary-hover-background) focus-visible:ring-(length:--lsys-button-focus-ring-width) focus-visible:ring-(--lsys-button-focus-ring-color) focus-visible:ring-offset-(length:--lsys-button-focus-ring-offset) focus-visible:ring-offset-(--lsys-button-focus-ring-offset-color)",
42
+ "inline-flex h-(--lex-button-height-sm) items-center justify-center rounded-(--lex-button-radius) border border-transparent px-(--lex-button-padding-x-sm)",
43
+ "text-(length:--lex-button-font-size-sm) font-(--lex-button-font-weight) leading-(--lex-button-font-line-height) text-(--lex-button-secondary-foreground)",
44
+ "transition-colors duration-(--lex-button-transition-duration) ease-(--lex-button-transition-easing)",
45
+ "outline-none hover:bg-(--lex-button-secondary-hover-background) focus-visible:ring-(length:--lex-button-focus-ring-width) focus-visible:ring-(--lex-button-focus-ring-color) focus-visible:ring-offset-(length:--lex-button-focus-ring-offset) focus-visible:ring-offset-(--lex-button-focus-ring-offset-color)",
46
46
  disabledStateClasses,
47
47
  ].join(" "),
48
48
  )
49
49
 
50
50
  export const toolbarLinkVariants = cva(
51
51
  [
52
- "inline-flex h-(--lsys-button-height-sm) items-center justify-center rounded-(--lsys-button-radius) px-(--lsys-button-padding-x-sm)",
53
- "text-(length:--lsys-button-font-size-sm) font-(--lsys-button-font-weight) leading-(--lsys-button-font-line-height) text-(--lsys-button-secondary-foreground)",
54
- "transition-colors duration-(--lsys-button-transition-duration) ease-(--lsys-button-transition-easing)",
55
- "outline-none hover:bg-(--lsys-button-secondary-hover-background) focus-visible:ring-(length:--lsys-button-focus-ring-width) focus-visible:ring-(--lsys-button-focus-ring-color) focus-visible:ring-offset-(length:--lsys-button-focus-ring-offset) focus-visible:ring-offset-(--lsys-button-focus-ring-offset-color)",
52
+ "inline-flex h-(--lex-button-height-sm) items-center justify-center rounded-(--lex-button-radius) px-(--lex-button-padding-x-sm)",
53
+ "text-(length:--lex-button-font-size-sm) font-(--lex-button-font-weight) leading-(--lex-button-font-line-height) text-(--lex-button-secondary-foreground)",
54
+ "transition-colors duration-(--lex-button-transition-duration) ease-(--lex-button-transition-easing)",
55
+ "outline-none hover:bg-(--lex-button-secondary-hover-background) focus-visible:ring-(length:--lex-button-focus-ring-width) focus-visible:ring-(--lex-button-focus-ring-color) focus-visible:ring-offset-(length:--lex-button-focus-ring-offset) focus-visible:ring-offset-(--lex-button-focus-ring-offset-color)",
56
56
  disabledStateClasses,
57
57
  ].join(" "),
58
58
  )
59
59
 
60
60
  export const toolbarInputVariants = cva(
61
61
  [
62
- "h-(--lsys-input-height-sm) min-w-0 rounded-(--lsys-input-radius) border border-(--lsys-input-border-color) bg-(--lsys-input-background) px-(--lsys-input-padding-x-sm)",
63
- "text-(length:--lsys-input-font-size-sm) font-(family-name:--lsys-input-font-family) font-(--lsys-input-font-weight) leading-(--lsys-input-font-line-height) text-(--lsys-input-foreground)",
64
- "placeholder:text-(--lsys-input-placeholder-color)",
65
- "transition-colors duration-(--lsys-input-transition-duration) ease-(--lsys-input-transition-easing)",
66
- "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)",
62
+ "h-(--lex-input-height-sm) min-w-0 rounded-(--lex-input-radius) border border-(--lex-input-border-color) bg-(--lex-input-background) px-(--lex-input-padding-x-sm)",
63
+ "text-(length:--lex-input-font-size-sm) font-(family-name:--lex-input-font-family) font-(--lex-input-font-weight) leading-(--lex-input-font-line-height) text-(--lex-input-foreground)",
64
+ "placeholder:text-(--lex-input-placeholder-color)",
65
+ "transition-colors duration-(--lex-input-transition-duration) ease-(--lex-input-transition-easing)",
66
+ "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)",
67
67
  disabledStateClasses,
68
68
  ].join(" "),
69
69
  )
70
70
 
71
71
  export const toolbarSeparatorVariants = cva(
72
- "shrink-0 bg-(--lsys-separator-color)",
72
+ "shrink-0 bg-(--lex-separator-color)",
73
73
  {
74
74
  variants: {
75
75
  orientation: {
76
- horizontal: "mx-(--lsys-space-1) h-(--lsys-separator-thickness) w-full",
77
- vertical: "my-(--lsys-space-1) h-full w-(--lsys-separator-thickness)",
76
+ horizontal: "mx-(--lex-space-1) h-(--lex-separator-thickness) w-full",
77
+ vertical: "my-(--lex-space-1) h-full w-(--lex-separator-thickness)",
78
78
  },
79
79
  },
80
80
  defaultVariants: {
package/templates/primitives/Tooltip/Tooltip.variants.ts CHANGED
@@ -9,16 +9,16 @@ import { cva } from "class-variance-authority"
9
9
  export const tooltipTriggerVariants = cva("inline-flex")
10
10
 
11
11
  export const tooltipPositionerVariants = cva(
12
- "z-(--lsys-tooltip-positioner-z-index)",
12
+ "z-(--lex-tooltip-positioner-z-index)",
13
13
  )
14
14
 
15
15
  export const tooltipPopupVariants = cva(
16
16
  [
17
- "rounded-(--lsys-tooltip-radius) border border-(--lsys-tooltip-border-color) bg-(--lsys-tooltip-background) px-(--lsys-tooltip-padding-x) py-(--lsys-tooltip-padding-y) text-(--lsys-tooltip-foreground) shadow-(--lsys-tooltip-shadow)",
18
- "text-(length:--lsys-tooltip-font-size) font-(--lsys-tooltip-font-weight) leading-(--lsys-tooltip-font-line-height)",
17
+ "rounded-(--lex-tooltip-radius) border border-(--lex-tooltip-border-color) bg-(--lex-tooltip-background) px-(--lex-tooltip-padding-x) py-(--lex-tooltip-padding-y) text-(--lex-tooltip-foreground) shadow-(--lex-tooltip-shadow)",
18
+ "text-(length:--lex-tooltip-font-size) font-(--lex-tooltip-font-weight) leading-(--lex-tooltip-font-line-height)",
19
19
  "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
20
- "transition-opacity duration-(--lsys-tooltip-transition-duration) ease-(--lsys-tooltip-transition-easing)",
20
+ "transition-opacity duration-(--lex-tooltip-transition-duration) ease-(--lex-tooltip-transition-easing)",
21
21
  ].join(" "),
22
22
  )
23
23
 
24
- export const tooltipArrowVariants = cva("fill-(--lsys-tooltip-background)")
24
+ export const tooltipArrowVariants = cva("fill-(--lex-tooltip-background)")