@placeholderco/placeholder-ui 1.0.3 → 1.0.6

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 (136) hide show
  1. package/LICENSE +26 -26
  2. package/README.md +179 -179
  3. package/dist/display/Alert.svelte +179 -179
  4. package/dist/display/Avatar.svelte +166 -166
  5. package/dist/display/LinkCollection.svelte +161 -161
  6. package/dist/display/Paper.svelte +118 -118
  7. package/dist/form/Autocomplete.svelte +223 -191
  8. package/dist/form/Autocomplete.svelte.d.ts +3 -1
  9. package/dist/form/AutocompleteMulti.svelte +356 -0
  10. package/dist/form/AutocompleteMulti.svelte.d.ts +28 -0
  11. package/dist/form/Checkbox.svelte +201 -201
  12. package/dist/form/Chips.svelte +128 -128
  13. package/dist/form/ComboBox.svelte +158 -158
  14. package/dist/form/ComboBox.svelte.d.ts +1 -1
  15. package/dist/form/ComboBoxItemBuilder.svelte +460 -460
  16. package/dist/form/ComboBoxMulti.svelte +197 -197
  17. package/dist/form/ComboBoxMulti.svelte.d.ts +1 -1
  18. package/dist/form/CronBuilder.svelte +693 -693
  19. package/dist/form/DatePicker.svelte +672 -672
  20. package/dist/form/DateTimePicker.svelte +712 -712
  21. package/dist/form/FileInput.svelte +235 -235
  22. package/dist/form/FormGroup.svelte +68 -68
  23. package/dist/form/Number.svelte +238 -238
  24. package/dist/form/PasswordInput.svelte +252 -252
  25. package/dist/form/RadioGroup.svelte +210 -210
  26. package/dist/form/Rating.svelte +235 -235
  27. package/dist/form/SegmentedControl.svelte +149 -149
  28. package/dist/form/Select.svelte +590 -590
  29. package/dist/form/Select.svelte.d.ts +1 -1
  30. package/dist/form/SelectMulti.svelte +613 -613
  31. package/dist/form/SelectMulti.svelte.d.ts +1 -1
  32. package/dist/form/Slider.svelte +358 -358
  33. package/dist/form/Switch.svelte +147 -147
  34. package/dist/form/TextArea.svelte +148 -148
  35. package/dist/form/Textbox.svelte +228 -228
  36. package/dist/form/TimePicker.svelte +267 -267
  37. package/dist/icon/Icon.svelte +52 -52
  38. package/dist/icon/alert-octagon.svg +5 -5
  39. package/dist/icon/alert-triangle.svg +5 -5
  40. package/dist/icon/archive.svg +1 -1
  41. package/dist/icon/arrow-down.svg +1 -1
  42. package/dist/icon/arrow-left.svg +1 -1
  43. package/dist/icon/arrow-right.svg +1 -1
  44. package/dist/icon/arrow-up.svg +1 -1
  45. package/dist/icon/at.svg +1 -1
  46. package/dist/icon/bell.svg +1 -1
  47. package/dist/icon/bookmark.svg +1 -1
  48. package/dist/icon/calendar.svg +1 -1
  49. package/dist/icon/camera.svg +1 -1
  50. package/dist/icon/chart-bar.svg +1 -1
  51. package/dist/icon/chart-line.svg +1 -1
  52. package/dist/icon/chart-pie.svg +1 -1
  53. package/dist/icon/checkbox.svg +1 -1
  54. package/dist/icon/checklist.svg +1 -1
  55. package/dist/icon/circle-check.svg +1 -1
  56. package/dist/icon/circle-x.svg +1 -1
  57. package/dist/icon/clock.svg +1 -1
  58. package/dist/icon/credit-card.svg +1 -1
  59. package/dist/icon/dots-vertical.svg +1 -1
  60. package/dist/icon/dots.svg +1 -1
  61. package/dist/icon/external-link.svg +1 -1
  62. package/dist/icon/eye-off.svg +1 -1
  63. package/dist/icon/eye.svg +1 -1
  64. package/dist/icon/filter.svg +1 -1
  65. package/dist/icon/fingerprint.svg +1 -1
  66. package/dist/icon/flag.svg +1 -1
  67. package/dist/icon/heart.svg +1 -1
  68. package/dist/icon/home.svg +1 -1
  69. package/dist/icon/key.svg +1 -1
  70. package/dist/icon/list-check.svg +1 -1
  71. package/dist/icon/login.svg +1 -1
  72. package/dist/icon/logout.svg +1 -1
  73. package/dist/icon/map-pin.svg +1 -1
  74. package/dist/icon/maximize.svg +1 -1
  75. package/dist/icon/microphone.svg +1 -1
  76. package/dist/icon/minimize.svg +1 -1
  77. package/dist/icon/note.svg +1 -1
  78. package/dist/icon/player-pause.svg +1 -1
  79. package/dist/icon/printer.svg +1 -1
  80. package/dist/icon/qrcode.svg +1 -1
  81. package/dist/icon/send.svg +1 -1
  82. package/dist/icon/settings.svg +1 -1
  83. package/dist/icon/share.svg +1 -1
  84. package/dist/icon/shopping-cart.svg +1 -1
  85. package/dist/icon/sort-ascending.svg +1 -1
  86. package/dist/icon/sort-descending.svg +1 -1
  87. package/dist/icon/star.svg +1 -1
  88. package/dist/icon/tag.svg +1 -1
  89. package/dist/icon/trending-down.svg +1 -1
  90. package/dist/icon/trending-up.svg +1 -1
  91. package/dist/icon/upload.svg +1 -1
  92. package/dist/icon/volume-off.svg +1 -1
  93. package/dist/icon/volume.svg +1 -1
  94. package/dist/icon/world.svg +1 -1
  95. package/dist/icon/zoom-in.svg +1 -1
  96. package/dist/icon/zoom-out.svg +1 -1
  97. package/dist/index.d.ts +1 -0
  98. package/dist/index.js +1 -0
  99. package/dist/layout/AppShell.svelte +169 -169
  100. package/dist/layout/CustomNavbar.svelte +61 -61
  101. package/dist/layout/Navbar.svelte +206 -206
  102. package/dist/layout/NavbarItemDisplay.svelte +29 -29
  103. package/dist/layout/Sidenav.svelte +712 -712
  104. package/dist/styles/components.css +199 -199
  105. package/dist/styles/dark.css +146 -146
  106. package/dist/styles/index.css +116 -116
  107. package/dist/styles/reset.css +110 -110
  108. package/dist/styles/semantic.css +86 -86
  109. package/dist/styles/tokens.css +203 -197
  110. package/dist/styles/utilities.css +523 -523
  111. package/dist/ui/Accordion.svelte +289 -289
  112. package/dist/ui/ActionIcon.svelte +76 -76
  113. package/dist/ui/Badge.svelte +329 -279
  114. package/dist/ui/Breadcrumbs.svelte +131 -131
  115. package/dist/ui/Button.svelte +432 -370
  116. package/dist/ui/ButtonVariant.d.ts +1 -1
  117. package/dist/ui/Dialog.svelte +307 -307
  118. package/dist/ui/Drawer.svelte +524 -524
  119. package/dist/ui/Dropdown.svelte +97 -97
  120. package/dist/ui/Dropzone.svelte +122 -122
  121. package/dist/ui/Link.svelte +32 -32
  122. package/dist/ui/Loader.svelte +70 -70
  123. package/dist/ui/LoadingOverlay.svelte +53 -53
  124. package/dist/ui/Pagination.svelte +135 -135
  125. package/dist/ui/Popover.svelte +225 -225
  126. package/dist/ui/Progress.svelte +191 -191
  127. package/dist/ui/RingProgress.svelte +141 -141
  128. package/dist/ui/Skeleton.svelte +85 -85
  129. package/dist/ui/Stepper.svelte +355 -355
  130. package/dist/ui/Table.svelte +345 -345
  131. package/dist/ui/Tabs.svelte +146 -146
  132. package/dist/ui/ThemeSwitcher.svelte +39 -39
  133. package/dist/ui/Timeline.svelte +225 -225
  134. package/dist/ui/Toaster.svelte +6 -6
  135. package/dist/ui/Tooltip.svelte +434 -434
  136. package/package.json +14 -14
package/dist/styles/tokens.css CHANGED
@@ -1,197 +1,203 @@
1
- /**
2
- * Design Tokens (Primitives)
3
- * Raw design values that form the foundation of the design system.
4
- */
5
-
6
- :root {
7
- /* ============================================
8
- * COLORS - Brand Palette
9
- * ============================================ */
10
- --pui-color-primary: #7a4a99;
11
- --pui-color-primary-rgb: 122, 74, 153;
12
- --pui-color-primary-light: #a271bd;
13
- --pui-color-primary-dark: #433e72;
14
- --pui-color-primary-darker: #302C51;
15
-
16
- --pui-color-secondary: #e0ddf0;
17
- --pui-color-secondary-rgb: 224, 221, 240;
18
- --pui-color-secondary-hover: #b8cc66;
19
- --pui-color-secondary-dark: #697f1a;
20
-
21
- --pui-color-accent-rgb: 135, 209, 201;
22
- --pui-color-accent: #87d1c9;
23
- --pui-color-accent-hover: #6bc4ba;
24
- --pui-color-accent-light: #c3e8e4;
25
- --pui-color-accent-dark: #318180;
26
-
27
- /* ============================================
28
- * COLORS - Semantic Palette
29
- * ============================================ */
30
- --pui-color-danger: #e03131;
31
- --pui-color-danger-hover: #c92a2a;
32
- --pui-color-danger-active: #b02a37;
33
- --pui-color-danger-light: #ff5e5e;
34
- --pui-color-danger-lighter: #ffa8a8;
35
- --pui-color-danger-subtle: rgba(250, 82, 82, 0.12);
36
- --pui-color-danger-subtle-dark: rgba(250, 82, 82, 0.2);
37
-
38
- --pui-color-warning: #fcc419;
39
- --pui-color-warning-hover: #fab005;
40
- --pui-color-warning-dark: #e8b508;
41
-
42
- --pui-color-success: #37b24d;
43
- --pui-color-success-hover: #2f9e44;
44
- --pui-color-success-dark: #2b8a3e;
45
-
46
- --pui-color-info: #1c7ed6;
47
- --pui-color-info-hover: #1971c2;
48
- --pui-color-info-dark: #1864ab;
49
-
50
- /* ============================================
51
- * COLORS - Neutral Palette
52
- * ============================================ */
53
- --pui-color-white: #ffffff;
54
- --pui-color-black: #000000;
55
- --pui-color-off-white: rgb(221, 221, 221);
56
-
57
- --pui-color-gray-50: #f8f9fa;
58
- --pui-color-gray-100: #f1f3f5;
59
- --pui-color-gray-200: #e9ecef;
60
- --pui-color-gray-300: #dee2e6;
61
- --pui-color-gray-400: #ced4da;
62
- --pui-color-gray-500: #adb5bd;
63
- --pui-color-gray-600: #868e96;
64
- --pui-color-gray-700: #495057;
65
- --pui-color-gray-800: #343a40;
66
- --pui-color-gray-900: #212529;
67
-
68
- --pui-color-dark-100: rgb(36, 37, 40);
69
- --pui-color-dark-200: rgb(33, 37, 41);
70
- --pui-color-dark-300: rgb(25, 26, 28);
71
- --pui-color-dark-400: rgb(18, 18, 18);
72
- --pui-color-dark-500: #111111;
73
- --pui-color-dark-border: rgb(55, 58, 64);
74
- --pui-color-dark-border-subtle: rgb(46, 46, 46);
75
-
76
- /* ============================================
77
- * TYPOGRAPHY
78
- * ============================================ */
79
- --pui-font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
80
- Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
81
- 'Segoe UI Symbol', 'Noto Color Emoji';
82
- --pui-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
83
- 'Liberation Mono', monospace;
84
-
85
- --pui-font-size-xs: 0.75rem;
86
- --pui-font-size-sm: 0.8125rem;
87
- --pui-font-size-base: 0.875rem;
88
- --pui-font-size-md: 1rem;
89
- --pui-font-size-lg: 1.125rem;
90
- --pui-font-size-xl: 1.25rem;
91
- --pui-font-size-2xl: 1.5rem;
92
- --pui-font-size-3xl: 1.875rem;
93
- --pui-font-size-4xl: 2.25rem;
94
-
95
- --pui-font-weight-thin: 100;
96
- --pui-font-weight-light: 300;
97
- --pui-font-weight-normal: 400;
98
- --pui-font-weight-medium: 500;
99
- --pui-font-weight-semibold: 600;
100
- --pui-font-weight-bold: 700;
101
- --pui-font-weight-extrabold: 800;
102
- --pui-font-weight-black: 900;
103
-
104
- --pui-line-height-none: 1;
105
- --pui-line-height-tight: 1.25;
106
- --pui-line-height-snug: 1.375;
107
- --pui-line-height-normal: 1.5;
108
- --pui-line-height-relaxed: 1.625;
109
- --pui-line-height-loose: 2;
110
-
111
- --pui-letter-spacing-tighter: -0.05em;
112
- --pui-letter-spacing-tight: -0.025em;
113
- --pui-letter-spacing-normal: 0;
114
- --pui-letter-spacing-wide: 0.025em;
115
- --pui-letter-spacing-wider: 0.05em;
116
- --pui-letter-spacing-widest: 0.1em;
117
-
118
- /* ============================================
119
- * SPACING
120
- * ============================================ */
121
- --pui-spacing-0: 0;
122
- --pui-spacing-px: 1px;
123
- --pui-spacing-0_5: 0.125rem;
124
- --pui-spacing-1: 0.25rem;
125
- --pui-spacing-1_5: 0.375rem;
126
- --pui-spacing-2: 0.5rem;
127
- --pui-spacing-2_5: 0.625rem;
128
- --pui-spacing-3: 0.75rem;
129
- --pui-spacing-3_5: 0.875rem;
130
- --pui-spacing-4: 1rem;
131
- --pui-spacing-5: 1.25rem;
132
- --pui-spacing-6: 1.5rem;
133
- --pui-spacing-7: 1.75rem;
134
- --pui-spacing-8: 2rem;
135
- --pui-spacing-9: 2.25rem;
136
- --pui-spacing-10: 2.5rem;
137
- --pui-spacing-11: 2.75rem;
138
- --pui-spacing-12: 3rem;
139
- --pui-spacing-14: 3.5rem;
140
- --pui-spacing-16: 4rem;
141
- --pui-spacing-20: 5rem;
142
- --pui-spacing-24: 6rem;
143
-
144
- /* ============================================
145
- * BORDER RADIUS
146
- * ============================================ */
147
- --pui-radius-none: 0;
148
- --pui-radius-sm: 0.125rem;
149
- --pui-radius-base: 0.25rem;
150
- --pui-radius-md: 0.375rem;
151
- --pui-radius-lg: 0.5rem;
152
- --pui-radius-xl: 0.75rem;
153
- --pui-radius-2xl: 1rem;
154
- --pui-radius-3xl: 1.5rem;
155
- --pui-radius-full: 9999px;
156
-
157
- /* ============================================
158
- * SHADOWS
159
- * ============================================ */
160
- --pui-shadow-none: none;
161
- --pui-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
162
- --pui-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
163
- --pui-shadow-base: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
164
- --pui-shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
165
- --pui-shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
166
- --pui-shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
167
- --pui-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
168
-
169
- /* ============================================
170
- * TRANSITIONS
171
- * ============================================ */
172
- --pui-transition-fastest: 75ms;
173
- --pui-transition-faster: 100ms;
174
- --pui-transition-fast: 150ms;
175
- --pui-transition-base: 200ms;
176
- --pui-transition-slow: 300ms;
177
- --pui-transition-slower: 500ms;
178
-
179
- --pui-ease-linear: linear;
180
- --pui-ease-in: cubic-bezier(0.4, 0, 1, 1);
181
- --pui-ease-out: cubic-bezier(0, 0, 0.2, 1);
182
- --pui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
183
-
184
- /* ============================================
185
- * Z-INDEX SCALE
186
- * ============================================ */
187
- --pui-z-behind: -1;
188
- --pui-z-base: 0;
189
- --pui-z-dropdown: 50;
190
- --pui-z-sticky: 100;
191
- --pui-z-fixed: 200;
192
- --pui-z-modal-backdrop: 300;
193
- --pui-z-modal: 400;
194
- --pui-z-popover: 500;
195
- --pui-z-tooltip: 600;
196
- --pui-z-toast: 700;
197
- }
1
+ /**
2
+ * Design Tokens (Primitives)
3
+ * Raw design values that form the foundation of the design system.
4
+ */
5
+
6
+ :root {
7
+ /* ============================================
8
+ * COLORS - Brand Palette
9
+ * ============================================ */
10
+ --pui-color-primary: #7a4a99;
11
+ --pui-color-primary-rgb: 122, 74, 153;
12
+ --pui-color-primary-light: #a271bd;
13
+ --pui-color-primary-dark: #433e72;
14
+ --pui-color-primary-darker: #302C51;
15
+
16
+ --pui-color-secondary: #e0ddf0;
17
+ --pui-color-secondary-rgb: 224, 221, 240;
18
+ --pui-color-secondary-hover: #b8cc66;
19
+ --pui-color-secondary-dark: #697f1a;
20
+
21
+ --pui-color-accent-rgb: 135, 209, 201;
22
+ --pui-color-accent: #87d1c9;
23
+ --pui-color-accent-hover: #6bc4ba;
24
+ --pui-color-accent-light: #c3e8e4;
25
+ --pui-color-accent-dark: #318180;
26
+
27
+ /* ============================================
28
+ * COLORS - Semantic Palette
29
+ * ============================================ */
30
+ --pui-color-danger: #e03131;
31
+ --pui-color-danger-hover: #c92a2a;
32
+ --pui-color-danger-active: #b02a37;
33
+ --pui-color-danger-light: #ff5e5e;
34
+ --pui-color-danger-lighter: #ffa8a8;
35
+ --pui-color-danger-subtle: rgba(250, 82, 82, 0.12);
36
+ --pui-color-danger-subtle-dark: rgba(250, 82, 82, 0.2);
37
+
38
+ --pui-color-warning: #fcc419;
39
+ --pui-color-warning-hover: #fab005;
40
+ --pui-color-warning-active: #f59f00;
41
+ --pui-color-warning-dark: #e8b508;
42
+ --pui-color-warning-subtle: rgba(252, 196, 25, 0.12);
43
+ --pui-color-warning-subtle-dark: rgba(252, 196, 25, 0.2);
44
+
45
+ --pui-color-success: #37b24d;
46
+ --pui-color-success-hover: #2f9e44;
47
+ --pui-color-success-active: #2b8a3e;
48
+ --pui-color-success-dark: #2b8a3e;
49
+ --pui-color-success-subtle: rgba(55, 178, 77, 0.12);
50
+ --pui-color-success-subtle-dark: rgba(55, 178, 77, 0.2);
51
+
52
+ --pui-color-info: #1c7ed6;
53
+ --pui-color-info-hover: #1971c2;
54
+ --pui-color-info-dark: #1864ab;
55
+
56
+ /* ============================================
57
+ * COLORS - Neutral Palette
58
+ * ============================================ */
59
+ --pui-color-white: #ffffff;
60
+ --pui-color-black: #000000;
61
+ --pui-color-off-white: rgb(221, 221, 221);
62
+
63
+ --pui-color-gray-50: #f8f9fa;
64
+ --pui-color-gray-100: #f1f3f5;
65
+ --pui-color-gray-200: #e9ecef;
66
+ --pui-color-gray-300: #dee2e6;
67
+ --pui-color-gray-400: #ced4da;
68
+ --pui-color-gray-500: #adb5bd;
69
+ --pui-color-gray-600: #868e96;
70
+ --pui-color-gray-700: #495057;
71
+ --pui-color-gray-800: #343a40;
72
+ --pui-color-gray-900: #212529;
73
+
74
+ --pui-color-dark-100: rgb(36, 37, 40);
75
+ --pui-color-dark-200: rgb(33, 37, 41);
76
+ --pui-color-dark-300: rgb(25, 26, 28);
77
+ --pui-color-dark-400: rgb(18, 18, 18);
78
+ --pui-color-dark-500: #111111;
79
+ --pui-color-dark-border: rgb(55, 58, 64);
80
+ --pui-color-dark-border-subtle: rgb(46, 46, 46);
81
+
82
+ /* ============================================
83
+ * TYPOGRAPHY
84
+ * ============================================ */
85
+ --pui-font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
86
+ Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
87
+ 'Segoe UI Symbol', 'Noto Color Emoji';
88
+ --pui-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
89
+ 'Liberation Mono', monospace;
90
+
91
+ --pui-font-size-xs: 0.75rem;
92
+ --pui-font-size-sm: 0.8125rem;
93
+ --pui-font-size-base: 0.875rem;
94
+ --pui-font-size-md: 1rem;
95
+ --pui-font-size-lg: 1.125rem;
96
+ --pui-font-size-xl: 1.25rem;
97
+ --pui-font-size-2xl: 1.5rem;
98
+ --pui-font-size-3xl: 1.875rem;
99
+ --pui-font-size-4xl: 2.25rem;
100
+
101
+ --pui-font-weight-thin: 100;
102
+ --pui-font-weight-light: 300;
103
+ --pui-font-weight-normal: 400;
104
+ --pui-font-weight-medium: 500;
105
+ --pui-font-weight-semibold: 600;
106
+ --pui-font-weight-bold: 700;
107
+ --pui-font-weight-extrabold: 800;
108
+ --pui-font-weight-black: 900;
109
+
110
+ --pui-line-height-none: 1;
111
+ --pui-line-height-tight: 1.25;
112
+ --pui-line-height-snug: 1.375;
113
+ --pui-line-height-normal: 1.5;
114
+ --pui-line-height-relaxed: 1.625;
115
+ --pui-line-height-loose: 2;
116
+
117
+ --pui-letter-spacing-tighter: -0.05em;
118
+ --pui-letter-spacing-tight: -0.025em;
119
+ --pui-letter-spacing-normal: 0;
120
+ --pui-letter-spacing-wide: 0.025em;
121
+ --pui-letter-spacing-wider: 0.05em;
122
+ --pui-letter-spacing-widest: 0.1em;
123
+
124
+ /* ============================================
125
+ * SPACING
126
+ * ============================================ */
127
+ --pui-spacing-0: 0;
128
+ --pui-spacing-px: 1px;
129
+ --pui-spacing-0_5: 0.125rem;
130
+ --pui-spacing-1: 0.25rem;
131
+ --pui-spacing-1_5: 0.375rem;
132
+ --pui-spacing-2: 0.5rem;
133
+ --pui-spacing-2_5: 0.625rem;
134
+ --pui-spacing-3: 0.75rem;
135
+ --pui-spacing-3_5: 0.875rem;
136
+ --pui-spacing-4: 1rem;
137
+ --pui-spacing-5: 1.25rem;
138
+ --pui-spacing-6: 1.5rem;
139
+ --pui-spacing-7: 1.75rem;
140
+ --pui-spacing-8: 2rem;
141
+ --pui-spacing-9: 2.25rem;
142
+ --pui-spacing-10: 2.5rem;
143
+ --pui-spacing-11: 2.75rem;
144
+ --pui-spacing-12: 3rem;
145
+ --pui-spacing-14: 3.5rem;
146
+ --pui-spacing-16: 4rem;
147
+ --pui-spacing-20: 5rem;
148
+ --pui-spacing-24: 6rem;
149
+
150
+ /* ============================================
151
+ * BORDER RADIUS
152
+ * ============================================ */
153
+ --pui-radius-none: 0;
154
+ --pui-radius-sm: 0.125rem;
155
+ --pui-radius-base: 0.25rem;
156
+ --pui-radius-md: 0.375rem;
157
+ --pui-radius-lg: 0.5rem;
158
+ --pui-radius-xl: 0.75rem;
159
+ --pui-radius-2xl: 1rem;
160
+ --pui-radius-3xl: 1.5rem;
161
+ --pui-radius-full: 9999px;
162
+
163
+ /* ============================================
164
+ * SHADOWS
165
+ * ============================================ */
166
+ --pui-shadow-none: none;
167
+ --pui-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
168
+ --pui-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
169
+ --pui-shadow-base: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
170
+ --pui-shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
171
+ --pui-shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
172
+ --pui-shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
173
+ --pui-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
174
+
175
+ /* ============================================
176
+ * TRANSITIONS
177
+ * ============================================ */
178
+ --pui-transition-fastest: 75ms;
179
+ --pui-transition-faster: 100ms;
180
+ --pui-transition-fast: 150ms;
181
+ --pui-transition-base: 200ms;
182
+ --pui-transition-slow: 300ms;
183
+ --pui-transition-slower: 500ms;
184
+
185
+ --pui-ease-linear: linear;
186
+ --pui-ease-in: cubic-bezier(0.4, 0, 1, 1);
187
+ --pui-ease-out: cubic-bezier(0, 0, 0.2, 1);
188
+ --pui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
189
+
190
+ /* ============================================
191
+ * Z-INDEX SCALE
192
+ * ============================================ */
193
+ --pui-z-behind: -1;
194
+ --pui-z-base: 0;
195
+ --pui-z-dropdown: 50;
196
+ --pui-z-sticky: 100;
197
+ --pui-z-fixed: 200;
198
+ --pui-z-modal-backdrop: 300;
199
+ --pui-z-modal: 400;
200
+ --pui-z-popover: 500;
201
+ --pui-z-tooltip: 600;
202
+ --pui-z-toast: 700;
203
+ }