@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/components.css CHANGED
@@ -1,199 +1,199 @@
1
- /**
2
- * Component Variables
3
- * Component-specific CSS variables for fine-grained customization.
4
- */
5
-
6
- :root {
7
- /* ============================================
8
- * FORM INPUTS
9
- * ============================================ */
10
- --pui-input-bg: var(--pui-color-white);
11
- --pui-input-bg-disabled: var(--pui-color-gray-200);
12
- --pui-input-border: var(--pui-border-default);
13
- --pui-input-border-focus: var(--pui-color-primary);
14
- --pui-input-border-error: var(--pui-color-danger);
15
- --pui-input-placeholder: var(--pui-text-placeholder);
16
- --pui-input-text: var(--pui-text-primary);
17
- --pui-input-padding-y: var(--pui-spacing-1);
18
- --pui-input-padding-x: var(--pui-spacing-2);
19
- --pui-input-font-size: var(--pui-font-size-md);
20
- --pui-input-border-radius: var(--pui-radius-base);
21
- --pui-input-border-width: 1px;
22
-
23
- /* ============================================
24
- * BUTTON
25
- * ============================================ */
26
- --pui-btn-padding-y: var(--pui-spacing-2);
27
- --pui-btn-padding-x: var(--pui-spacing-4);
28
- --pui-btn-font-size: var(--pui-font-size-base);
29
- --pui-btn-font-weight: var(--pui-font-weight-semibold);
30
- --pui-btn-border-radius: var(--pui-radius-md);
31
- --pui-btn-border-width: 1px;
32
-
33
- /* ============================================
34
- * PAPER
35
- * ============================================ */
36
- --pui-paper-bg: var(--pui-bg-surface);
37
- --pui-paper-shadow: var(--pui-shadow-sm);
38
- --pui-paper-radius: var(--pui-radius-base);
39
- --pui-paper-padding: var(--pui-spacing-3);
40
- --pui-paper-title-bg: rgb(252, 252, 252);
41
- --pui-paper-title-border: rgb(229, 231, 235);
42
- --pui-paper-body-bg: var(--pui-color-white);
43
-
44
- /* ============================================
45
- * DIALOG
46
- * ============================================ */
47
- --pui-dialog-backdrop: var(--pui-bg-overlay-dark);
48
- --pui-dialog-bg: var(--pui-bg-page);
49
- --pui-dialog-radius: var(--pui-radius-base);
50
- --pui-dialog-shadow: var(--pui-shadow-lg);
51
- --pui-dialog-sm-width: 20rem;
52
- --pui-dialog-md-width: 30rem;
53
- --pui-dialog-lg-width: 40rem;
54
- --pui-dialog-xl-width: 50rem;
55
-
56
- /* ============================================
57
- * DRAWER
58
- * ============================================ */
59
- --pui-drawer-bg: var(--pui-bg-page);
60
- --pui-drawer-shadow: var(--pui-shadow-lg);
61
- --pui-drawer-width: 400px;
62
- --pui-drawer-max-width: 90vw;
63
-
64
- /* ============================================
65
- * SIDENAV
66
- * ============================================ */
67
- --pui-sidenav-width: 260px;
68
- --pui-sidenav-collapsed-width: 60px;
69
- --pui-sidenav-bg: var(--pui-bg-surface);
70
- --pui-sidenav-border: var(--pui-border-default);
71
- --pui-sidenav-item-hover-bg: rgba(var(--pui-color-primary-rgb), 0.08);
72
- --pui-sidenav-item-active-bg: rgba(var(--pui-color-secondary-rgb), 0.2);
73
- --pui-sidenav-item-active-border: var(--pui-color-secondary);
74
-
75
- /* ============================================
76
- * NAVBAR
77
- * ============================================ */
78
- --pui-navbar-height: 60px;
79
- --pui-navbar-bg: var(--pui-bg-surface);
80
- --pui-navbar-border: var(--pui-border-default);
81
-
82
- /* ============================================
83
- * DROPDOWN
84
- * ============================================ */
85
- --pui-dropdown-bg: var(--pui-bg-surface);
86
- --pui-dropdown-border: var(--pui-border-default);
87
- --pui-dropdown-radius: var(--pui-radius-md);
88
- --pui-dropdown-shadow: var(--pui-shadow-md);
89
- --pui-dropdown-item-hover-bg: var(--pui-bg-surface-raised);
90
- --pui-dropdown-item-active-bg: rgba(var(--pui-color-secondary-rgb), 0.15);
91
-
92
- /* ============================================
93
- * POPOVER
94
- * ============================================ */
95
- --pui-popover-bg: var(--pui-bg-surface);
96
- --pui-popover-border: var(--pui-border-default);
97
- --pui-popover-radius: var(--pui-radius-md);
98
- --pui-popover-shadow: var(--pui-shadow-md);
99
-
100
- /* ============================================
101
- * TOOLTIP
102
- * ============================================ */
103
- --pui-tooltip-bg: var(--pui-color-gray-900);
104
- --pui-tooltip-text: var(--pui-color-white);
105
- --pui-tooltip-radius: var(--pui-radius-base);
106
-
107
- /* ============================================
108
- * BADGE
109
- * ============================================ */
110
- --pui-badge-padding-y: var(--pui-spacing-0_5);
111
- --pui-badge-padding-x: var(--pui-spacing-2);
112
- --pui-badge-font-size: var(--pui-font-size-xs);
113
- --pui-badge-radius: var(--pui-radius-full);
114
-
115
- /* ============================================
116
- * TABLE
117
- * ============================================ */
118
- --pui-table-bg: var(--pui-bg-surface);
119
- --pui-table-border: var(--pui-border-subtle);
120
- --pui-table-radius: var(--pui-radius-base);
121
- --pui-table-header-bg: var(--pui-bg-surface-raised);
122
- --pui-table-row-hover-bg: var(--pui-bg-surface-raised);
123
-
124
- /* ============================================
125
- * TABS
126
- * ============================================ */
127
- --pui-tabs-border: var(--pui-border-default);
128
- --pui-tab-hover-bg: var(--pui-bg-surface-raised);
129
- --pui-tab-active-border: var(--pui-color-secondary);
130
-
131
- /* ============================================
132
- * ALERT
133
- * ============================================ */
134
- --pui-alert-radius: var(--pui-radius-md);
135
- --pui-alert-info-bg: rgba(28, 126, 214, 0.1);
136
- --pui-alert-info-border: var(--pui-color-info);
137
- --pui-alert-success-bg: rgba(55, 178, 77, 0.1);
138
- --pui-alert-success-border: var(--pui-color-success);
139
- --pui-alert-warning-bg: rgba(252, 196, 25, 0.1);
140
- --pui-alert-warning-border: var(--pui-color-warning);
141
- --pui-alert-danger-bg: var(--pui-color-danger-subtle);
142
- --pui-alert-danger-border: var(--pui-color-danger);
143
-
144
- /* ============================================
145
- * AVATAR
146
- * ============================================ */
147
- --pui-avatar-bg: var(--pui-color-gray-300);
148
- --pui-avatar-text: var(--pui-color-gray-700);
149
- --pui-avatar-radius: var(--pui-radius-full);
150
-
151
- /* ============================================
152
- * LOADER
153
- * ============================================ */
154
- --pui-loader-color: var(--pui-color-primary);
155
- --pui-loader-size: 2rem;
156
-
157
- /* ============================================
158
- * SWITCH
159
- * ============================================ */
160
- --pui-switch-width: 2.5rem;
161
- --pui-switch-height: 1.5rem;
162
- --pui-switch-bg: var(--pui-color-gray-300);
163
- --pui-switch-bg-checked: var(--pui-color-secondary);
164
- --pui-switch-thumb-bg: var(--pui-color-white);
165
-
166
- /* ============================================
167
- * CHECKBOX & RADIO
168
- * ============================================ */
169
- --pui-check-size: 1.125rem;
170
- --pui-check-bg: var(--pui-input-bg);
171
- --pui-check-border: var(--pui-input-border);
172
- --pui-check-bg-checked: var(--pui-color-primary);
173
- --pui-check-icon-color: var(--pui-color-primary);
174
-
175
- /* ============================================
176
- * DATEPICKER
177
- * ============================================ */
178
- --pui-datepicker-bg: var(--pui-bg-surface);
179
- --pui-datepicker-border: var(--pui-border-default);
180
- --pui-datepicker-shadow: var(--pui-shadow-md);
181
- --pui-datepicker-day-selected-bg: var(--pui-color-secondary);
182
- --pui-datepicker-day-selected-text: var(--pui-color-primary);
183
- --pui-datepicker-day-today-border: var(--pui-color-accent);
184
-
185
- /* ============================================
186
- * PAGINATION
187
- * ============================================ */
188
- --pui-pagination-item-hover-bg: var(--pui-bg-surface-raised);
189
- --pui-pagination-item-active-bg: var(--pui-color-primary);
190
- --pui-pagination-item-active-text: var(--pui-color-white);
191
-
192
- /* ============================================
193
- * TOAST
194
- * ============================================ */
195
- --pui-toast-bg: var(--pui-bg-surface);
196
- --pui-toast-border: var(--pui-border-default);
197
- --pui-toast-radius: var(--pui-radius-md);
198
- --pui-toast-shadow: var(--pui-shadow-lg);
199
- }
1
+ /**
2
+ * Component Variables
3
+ * Component-specific CSS variables for fine-grained customization.
4
+ */
5
+
6
+ :root {
7
+ /* ============================================
8
+ * FORM INPUTS
9
+ * ============================================ */
10
+ --pui-input-bg: var(--pui-color-white);
11
+ --pui-input-bg-disabled: var(--pui-color-gray-200);
12
+ --pui-input-border: var(--pui-border-default);
13
+ --pui-input-border-focus: var(--pui-color-primary);
14
+ --pui-input-border-error: var(--pui-color-danger);
15
+ --pui-input-placeholder: var(--pui-text-placeholder);
16
+ --pui-input-text: var(--pui-text-primary);
17
+ --pui-input-padding-y: var(--pui-spacing-1);
18
+ --pui-input-padding-x: var(--pui-spacing-2);
19
+ --pui-input-font-size: var(--pui-font-size-md);
20
+ --pui-input-border-radius: var(--pui-radius-base);
21
+ --pui-input-border-width: 1px;
22
+
23
+ /* ============================================
24
+ * BUTTON
25
+ * ============================================ */
26
+ --pui-btn-padding-y: var(--pui-spacing-2);
27
+ --pui-btn-padding-x: var(--pui-spacing-4);
28
+ --pui-btn-font-size: var(--pui-font-size-base);
29
+ --pui-btn-font-weight: var(--pui-font-weight-semibold);
30
+ --pui-btn-border-radius: var(--pui-radius-md);
31
+ --pui-btn-border-width: 1px;
32
+
33
+ /* ============================================
34
+ * PAPER
35
+ * ============================================ */
36
+ --pui-paper-bg: var(--pui-bg-surface);
37
+ --pui-paper-shadow: var(--pui-shadow-sm);
38
+ --pui-paper-radius: var(--pui-radius-base);
39
+ --pui-paper-padding: var(--pui-spacing-3);
40
+ --pui-paper-title-bg: rgb(252, 252, 252);
41
+ --pui-paper-title-border: rgb(229, 231, 235);
42
+ --pui-paper-body-bg: var(--pui-color-white);
43
+
44
+ /* ============================================
45
+ * DIALOG
46
+ * ============================================ */
47
+ --pui-dialog-backdrop: var(--pui-bg-overlay-dark);
48
+ --pui-dialog-bg: var(--pui-bg-page);
49
+ --pui-dialog-radius: var(--pui-radius-base);
50
+ --pui-dialog-shadow: var(--pui-shadow-lg);
51
+ --pui-dialog-sm-width: 20rem;
52
+ --pui-dialog-md-width: 30rem;
53
+ --pui-dialog-lg-width: 40rem;
54
+ --pui-dialog-xl-width: 50rem;
55
+
56
+ /* ============================================
57
+ * DRAWER
58
+ * ============================================ */
59
+ --pui-drawer-bg: var(--pui-bg-page);
60
+ --pui-drawer-shadow: var(--pui-shadow-lg);
61
+ --pui-drawer-width: 400px;
62
+ --pui-drawer-max-width: 90vw;
63
+
64
+ /* ============================================
65
+ * SIDENAV
66
+ * ============================================ */
67
+ --pui-sidenav-width: 260px;
68
+ --pui-sidenav-collapsed-width: 60px;
69
+ --pui-sidenav-bg: var(--pui-bg-surface);
70
+ --pui-sidenav-border: var(--pui-border-default);
71
+ --pui-sidenav-item-hover-bg: rgba(var(--pui-color-primary-rgb), 0.08);
72
+ --pui-sidenav-item-active-bg: rgba(var(--pui-color-secondary-rgb), 0.2);
73
+ --pui-sidenav-item-active-border: var(--pui-color-secondary);
74
+
75
+ /* ============================================
76
+ * NAVBAR
77
+ * ============================================ */
78
+ --pui-navbar-height: 60px;
79
+ --pui-navbar-bg: var(--pui-bg-surface);
80
+ --pui-navbar-border: var(--pui-border-default);
81
+
82
+ /* ============================================
83
+ * DROPDOWN
84
+ * ============================================ */
85
+ --pui-dropdown-bg: var(--pui-bg-surface);
86
+ --pui-dropdown-border: var(--pui-border-default);
87
+ --pui-dropdown-radius: var(--pui-radius-md);
88
+ --pui-dropdown-shadow: var(--pui-shadow-md);
89
+ --pui-dropdown-item-hover-bg: var(--pui-bg-surface-raised);
90
+ --pui-dropdown-item-active-bg: rgba(var(--pui-color-secondary-rgb), 0.15);
91
+
92
+ /* ============================================
93
+ * POPOVER
94
+ * ============================================ */
95
+ --pui-popover-bg: var(--pui-bg-surface);
96
+ --pui-popover-border: var(--pui-border-default);
97
+ --pui-popover-radius: var(--pui-radius-md);
98
+ --pui-popover-shadow: var(--pui-shadow-md);
99
+
100
+ /* ============================================
101
+ * TOOLTIP
102
+ * ============================================ */
103
+ --pui-tooltip-bg: var(--pui-color-gray-900);
104
+ --pui-tooltip-text: var(--pui-color-white);
105
+ --pui-tooltip-radius: var(--pui-radius-base);
106
+
107
+ /* ============================================
108
+ * BADGE
109
+ * ============================================ */
110
+ --pui-badge-padding-y: var(--pui-spacing-0_5);
111
+ --pui-badge-padding-x: var(--pui-spacing-2);
112
+ --pui-badge-font-size: var(--pui-font-size-xs);
113
+ --pui-badge-radius: var(--pui-radius-full);
114
+
115
+ /* ============================================
116
+ * TABLE
117
+ * ============================================ */
118
+ --pui-table-bg: var(--pui-bg-surface);
119
+ --pui-table-border: var(--pui-border-subtle);
120
+ --pui-table-radius: var(--pui-radius-base);
121
+ --pui-table-header-bg: var(--pui-bg-surface-raised);
122
+ --pui-table-row-hover-bg: var(--pui-bg-surface-raised);
123
+
124
+ /* ============================================
125
+ * TABS
126
+ * ============================================ */
127
+ --pui-tabs-border: var(--pui-border-default);
128
+ --pui-tab-hover-bg: var(--pui-bg-surface-raised);
129
+ --pui-tab-active-border: var(--pui-color-secondary);
130
+
131
+ /* ============================================
132
+ * ALERT
133
+ * ============================================ */
134
+ --pui-alert-radius: var(--pui-radius-md);
135
+ --pui-alert-info-bg: rgba(28, 126, 214, 0.1);
136
+ --pui-alert-info-border: var(--pui-color-info);
137
+ --pui-alert-success-bg: rgba(55, 178, 77, 0.1);
138
+ --pui-alert-success-border: var(--pui-color-success);
139
+ --pui-alert-warning-bg: rgba(252, 196, 25, 0.1);
140
+ --pui-alert-warning-border: var(--pui-color-warning);
141
+ --pui-alert-danger-bg: var(--pui-color-danger-subtle);
142
+ --pui-alert-danger-border: var(--pui-color-danger);
143
+
144
+ /* ============================================
145
+ * AVATAR
146
+ * ============================================ */
147
+ --pui-avatar-bg: var(--pui-color-gray-300);
148
+ --pui-avatar-text: var(--pui-color-gray-700);
149
+ --pui-avatar-radius: var(--pui-radius-full);
150
+
151
+ /* ============================================
152
+ * LOADER
153
+ * ============================================ */
154
+ --pui-loader-color: var(--pui-color-primary);
155
+ --pui-loader-size: 2rem;
156
+
157
+ /* ============================================
158
+ * SWITCH
159
+ * ============================================ */
160
+ --pui-switch-width: 2.5rem;
161
+ --pui-switch-height: 1.5rem;
162
+ --pui-switch-bg: var(--pui-color-gray-300);
163
+ --pui-switch-bg-checked: var(--pui-color-secondary);
164
+ --pui-switch-thumb-bg: var(--pui-color-white);
165
+
166
+ /* ============================================
167
+ * CHECKBOX & RADIO
168
+ * ============================================ */
169
+ --pui-check-size: 1.125rem;
170
+ --pui-check-bg: var(--pui-input-bg);
171
+ --pui-check-border: var(--pui-input-border);
172
+ --pui-check-bg-checked: var(--pui-color-primary);
173
+ --pui-check-icon-color: var(--pui-color-primary);
174
+
175
+ /* ============================================
176
+ * DATEPICKER
177
+ * ============================================ */
178
+ --pui-datepicker-bg: var(--pui-bg-surface);
179
+ --pui-datepicker-border: var(--pui-border-default);
180
+ --pui-datepicker-shadow: var(--pui-shadow-md);
181
+ --pui-datepicker-day-selected-bg: var(--pui-color-secondary);
182
+ --pui-datepicker-day-selected-text: var(--pui-color-primary);
183
+ --pui-datepicker-day-today-border: var(--pui-color-accent);
184
+
185
+ /* ============================================
186
+ * PAGINATION
187
+ * ============================================ */
188
+ --pui-pagination-item-hover-bg: var(--pui-bg-surface-raised);
189
+ --pui-pagination-item-active-bg: var(--pui-color-primary);
190
+ --pui-pagination-item-active-text: var(--pui-color-white);
191
+
192
+ /* ============================================
193
+ * TOAST
194
+ * ============================================ */
195
+ --pui-toast-bg: var(--pui-bg-surface);
196
+ --pui-toast-border: var(--pui-border-default);
197
+ --pui-toast-radius: var(--pui-radius-md);
198
+ --pui-toast-shadow: var(--pui-shadow-lg);
199
+ }