@v1nt1248/3nclient-lib 0.3.51 → 0.4.0

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 (54) hide show
  1. package/README.md +2 -0
  2. package/dist/chunks/{ui3n-notification-o0tuhTpO.js → ui3n-notification-CTYQV3nR.js} +38 -37
  3. package/dist/src/components/ui3n-chip/ui3n-chip.d.ts +0 -5
  4. package/dist/src/components/ui3n-icon/ui3n-icon.d.ts +0 -1
  5. package/dist/src/components/ui3n-progress/ui3n-progress-circular.d.ts +0 -2
  6. package/dist/src/components/ui3n-progress/ui3n-progress-linear.d.ts +0 -2
  7. package/dist/src/components/ui3n-scrollbar-horizontal/ui3n-scrollbar-horizontal.d.ts +0 -7
  8. package/dist/src/components/ui3n-scrollbar-vertical/ui3n-scrollbar-vertical.d.ts +0 -7
  9. package/dist/src/components/ui3n-slider/ui3n-slider.d.ts +0 -5
  10. package/dist/src/components/ui3n-tabs/ui3n-tabs.d.ts +0 -4
  11. package/dist/src/components/ui3n-tooltip/ui3n-tooltip.d.ts +0 -3
  12. package/dist/style.css +1 -1
  13. package/dist/ui3n-components.js +1697 -1748
  14. package/dist/ui3n-plugins.js +2 -1
  15. package/package.json +11 -4
  16. package/src/components/ui3n-autocomplete/ui3n-autocomplete.vue +28 -25
  17. package/src/components/ui3n-badge/ui3n-badge-simple.vue +18 -17
  18. package/src/components/ui3n-badge/ui3n-badge.vue +3 -2
  19. package/src/components/ui3n-breadcrumbs/ui3n-breadcrumb.vue +11 -10
  20. package/src/components/ui3n-breadcrumbs/ui3n-breadcrumbs.vue +4 -1
  21. package/src/components/ui3n-button/ui3n-button.vue +244 -158
  22. package/src/components/ui3n-checkbox/ui3n-checkbox.vue +22 -21
  23. package/src/components/ui3n-chip/ui3n-chip.vue +56 -40
  24. package/src/components/ui3n-dialog/ui3n-dialog-provider.vue +1 -0
  25. package/src/components/ui3n-dialog/ui3n-dialog.vue +19 -18
  26. package/src/components/ui3n-drop-files/ui3n-drop-files.vue +8 -7
  27. package/src/components/ui3n-editable/ui3n-content-editable.vue +11 -10
  28. package/src/components/ui3n-editable/ui3n-editable.vue +26 -25
  29. package/src/components/ui3n-emoji/ui3n-emoji.vue +7 -6
  30. package/src/components/ui3n-icon/ui3n-icon.vue +26 -16
  31. package/src/components/ui3n-input/ui3n-input.vue +36 -32
  32. package/src/components/ui3n-input-file/ui3n-input-file.vue +8 -5
  33. package/src/components/ui3n-list/ui3n-list.vue +8 -7
  34. package/src/components/ui3n-menu/ui3n-menu.vue +6 -5
  35. package/src/components/ui3n-mobile-menu/ui3n-mobile-menu.vue +4 -3
  36. package/src/components/ui3n-mobile-menu-item/ui3n-mobile-menu-item.vue +7 -6
  37. package/src/components/ui3n-notification/ui3n-notification-container.vue +1 -0
  38. package/src/components/ui3n-notification/ui3n-notification.vue +28 -26
  39. package/src/components/ui3n-progress/ui3n-progress-circular.vue +32 -19
  40. package/src/components/ui3n-progress/ui3n-progress-linear.vue +31 -18
  41. package/src/components/ui3n-radio-group/ui3n-radio-group.vue +4 -1
  42. package/src/components/ui3n-radio-group/ui3n-radio.vue +6 -5
  43. package/src/components/ui3n-scrollbar/ui3n-scrollbar.vue +94 -83
  44. package/src/components/ui3n-scrollbar-horizontal/ui3n-scrollbar-horizontal.vue +51 -39
  45. package/src/components/ui3n-scrollbar-vertical/ui3n-scrollbar-vertical.vue +51 -39
  46. package/src/components/ui3n-selector/ui3n-selector.vue +33 -28
  47. package/src/components/ui3n-slider/ui3n-slider.vue +53 -34
  48. package/src/components/ui3n-step-line-bar/ui3n-step-line-bar.vue +10 -6
  49. package/src/components/ui3n-switch/ui3n-switch.vue +23 -22
  50. package/src/components/ui3n-table/ui3n-table.vue +50 -48
  51. package/src/components/ui3n-tabs/ui3n-tabs.vue +38 -20
  52. package/src/components/ui3n-text/ui3n-text.vue +15 -14
  53. package/src/components/ui3n-tooltip/ui3n-tooltip-old.vue +14 -11
  54. package/src/components/ui3n-tooltip/ui3n-tooltip.vue +38 -27
package/src/components/ui3n-button/ui3n-button.vue CHANGED
@@ -105,6 +105,7 @@
105
105
  ref="buttonEl"
106
106
  v-ui3n-ripple
107
107
  :id="id"
108
+ data-ui3n="button"
108
109
  :class="mainCssClasses"
109
110
  type="button"
110
111
  :disabled="disabled"
@@ -134,34 +135,42 @@
134
135
  @use '../../assets/styles/mixins' as mixins;
135
136
 
136
137
  .ui3nButton {
137
- --ui3n-button-height: 32px;
138
- --ui3n-button-border-radius: calc(var(--ui3n-button-height) / 2);
139
- --ui3n-button-gap: 4px;
140
- --ui3n-button-outline-color: transparent;
141
- --ui3n-button-padding: 0 16px;
142
- --ui3n-button-padding-when-icon: 8px;
143
- --ui3n-button-text-size: 12px;
144
- --ui3n-button-text-color: var(--color-text-button-primary-default);
145
- --ui3n-button-bg-color: var(--color-bg-button-primary-default);
146
- --ui3n-button-icon-small: 24px;
147
- --ui3n-button-icon-regular: 32px;
148
- --ui3n-button-icon-large: 48px;
138
+ /*
139
+ * Public variables are never declared here, only read with a fixed default,
140
+ * so an application can set them at any level: :root, a container, the
141
+ * element itself or from JS.
142
+ */
143
+ --_button-height: var(--ui3n-button-height, 32px);
144
+ --_button-border-radius: var(--ui3n-button-border-radius, calc(var(--_button-height) / 2));
145
+ --_button-gap: var(--ui3n-button-gap, 4px);
146
+ --_button-outline-color: var(--ui3n-button-outline-color, transparent);
147
+ --_button-padding: var(--ui3n-button-padding, 0 16px);
148
+ --_button-padding-when-icon: var(--ui3n-button-padding-when-icon, 8px);
149
+ --_button-font-size: var(--ui3n-button-font-size, 12px);
150
+ --_button-text-color: var(--ui3n-button-text-color, var(--color-text-button-primary-default));
151
+ --_button-bg-color: var(--ui3n-button-bg-color, var(--color-bg-button-primary-default));
152
+ --_button-icon-small: var(--ui3n-button-icon-size-small, 24px);
153
+ --_button-icon-regular: var(--ui3n-button-icon-size-regular, 32px);
154
+ --_button-icon-large: var(--ui3n-button-icon-size-large, 48px);
155
+ --_button-shadow-near: var(--ui3n-button-shadow-near-color, var(--shadow-key-1));
156
+ --_button-shadow-far: var(--ui3n-button-shadow-far-color, var(--shadow-key-2));
157
+ --_button-shadow-inset: var(--ui3n-button-shadow-inset-color, var(--shadow-key-3));
149
158
 
150
159
  position: relative;
151
160
  width: max-content;
152
- height: var(--ui3n-button-height);
153
- padding: var(--ui3n-button-padding);
161
+ height: var(--_button-height);
162
+ padding: var(--_button-padding);
154
163
  display: flex;
155
164
  justify-content: center;
156
165
  align-items: center;
157
- column-gap: var(--ui3n-button-gap);
166
+ column-gap: var(--_button-gap);
158
167
  border: none;
159
- border-radius: var(--ui3n-button-border-radius);
160
- outline: 2px solid var(--ui3n-button-outline-color);
161
- font-size: var(--ui3n-button-text-size);
168
+ border-radius: var(--_button-border-radius);
169
+ outline: 2px solid var(--_button-outline-color);
170
+ font-size: var(--_button-font-size);
162
171
  font-weight: 600;
163
- color: var(--ui3n-button-text-color);
164
- background-color: var(--ui3n-button-bg-color);
172
+ color: var(--_button-text-color);
173
+ background-color: var(--_button-bg-color);
165
174
  user-select: none;
166
175
  overflow: hidden;
167
176
  transition:
@@ -169,15 +178,15 @@
169
178
  transform 0.1s;
170
179
 
171
180
  &.withIcon-left {
172
- padding-left: var(--ui3n-button-padding-when-icon);
181
+ padding-left: var(--_button-padding-when-icon);
173
182
  }
174
183
 
175
184
  &.withIcon-right {
176
- padding-right: var(--ui3n-button-padding-when-icon);
185
+ padding-right: var(--_button-padding-when-icon);
177
186
  }
178
187
 
179
188
  &.square {
180
- --ui3n-button-border-radius: calc(var(--ui3n-button-height) / 6);
189
+ --_button-border-radius: var(--ui3n-button-border-radius, calc(var(--_button-height) / 6));
181
190
  }
182
191
 
183
192
  &:not([disabled]) {
@@ -185,25 +194,35 @@
185
194
  }
186
195
  }
187
196
 
197
+ /* Each size reads its own variable first, then the one shared by every size. */
188
198
  .regular {
189
- --ui3n-button-height: 32px;
190
- --ui3n-button-padding: 0 16px;
191
- --ui3n-button-padding-when-icon: 8px;
192
- --ui3n-button-text-size: 12px;
199
+ --_button-height: var(--ui3n-button-height-regular, var(--ui3n-button-height, 32px));
200
+ --_button-padding: var(--ui3n-button-padding-regular, var(--ui3n-button-padding, 0 16px));
201
+ --_button-padding-when-icon: var(
202
+ --ui3n-button-padding-when-icon-regular,
203
+ var(--ui3n-button-padding-when-icon, 8px)
204
+ );
205
+ --_button-font-size: var(--ui3n-button-font-size-regular, var(--ui3n-button-font-size, 12px));
193
206
  }
194
207
 
195
208
  .small {
196
- --ui3n-button-height: 24px;
197
- --ui3n-button-padding: 0 8px;
198
- --ui3n-button-padding-when-icon: 4px;
199
- --ui3n-button-text-size: 12px;
209
+ --_button-height: var(--ui3n-button-height-small, var(--ui3n-button-height, 24px));
210
+ --_button-padding: var(--ui3n-button-padding-small, var(--ui3n-button-padding, 0 8px));
211
+ --_button-padding-when-icon: var(
212
+ --ui3n-button-padding-when-icon-small,
213
+ var(--ui3n-button-padding-when-icon, 4px)
214
+ );
215
+ --_button-font-size: var(--ui3n-button-font-size-small, var(--ui3n-button-font-size, 12px));
200
216
  }
201
217
 
202
218
  .large {
203
- --ui3n-button-height: 48px;
204
- --ui3n-button-padding: 0 16px;
205
- --ui3n-button-padding-when-icon: 8px;
206
- --ui3n-button-text-size: 15px;
219
+ --_button-height: var(--ui3n-button-height-large, var(--ui3n-button-height, 48px));
220
+ --_button-padding: var(--ui3n-button-padding-large, var(--ui3n-button-padding, 0 16px));
221
+ --_button-padding-when-icon: var(
222
+ --ui3n-button-padding-when-icon-large,
223
+ var(--ui3n-button-padding-when-icon, 8px)
224
+ );
225
+ --_button-font-size: var(--ui3n-button-font-size-large, var(--ui3n-button-font-size, 15px));
207
226
  }
208
227
 
209
228
  .block {
@@ -211,93 +230,102 @@
211
230
  }
212
231
 
213
232
  .primary {
214
- --ui3n-button-bg-color: var(--color-bg-button-primary-default);
215
- --ui3n-button-text-color: var(--color-text-button-primary-default);
233
+ --_button-bg-color: var(--ui3n-button-bg-color, var(--color-bg-button-primary-default));
234
+ --_button-text-color: var(--ui3n-button-text-color, var(--color-text-button-primary-default));
216
235
 
217
236
  &:hover {
218
- --ui3n-button-bg-color: var(--color-bg-button-primary-hover);
219
- --ui3n-button-text-color: var(--color-text-button-primary-hover);
237
+ --_button-bg-color: var(--ui3n-button-bg-color-hover, var(--color-bg-button-primary-hover));
238
+ --_button-text-color: var(--ui3n-button-text-color-hover, var(--color-text-button-primary-hover));
220
239
  }
221
240
 
222
241
  &:focus {
223
- --ui3n-button-text-color: var(--color-text-button-primary-default);
224
- --ui3n-button-outline-color: oklch(from var(--color-bg-button-primary-default) calc(l - 0.185) c 260deg);
242
+ --_button-text-color: var(--ui3n-button-text-color-focused, var(--color-text-button-primary-default));
243
+ --_button-outline-color: var(
244
+ --ui3n-button-outline-color-focused,
245
+ oklch(from var(--color-bg-button-primary-default) calc(l - 0.185) c 260deg)
246
+ );
225
247
  }
226
248
 
227
249
  &:active {
228
- --ui3n-button-bg-color: var(--color-bg-button-primary-pressed);
229
- --ui3n-button-text-color: var(--color-text-button-primary-pressed);
230
- --ui3n-button-outline-color: transparent;
250
+ --_button-bg-color: var(--ui3n-button-bg-color-pressed, var(--color-bg-button-primary-pressed));
251
+ --_button-text-color: var(--ui3n-button-text-color-pressed, var(--color-text-button-primary-pressed));
252
+ --_button-outline-color: transparent;
231
253
  }
232
254
 
233
255
  &[disabled] {
234
- --ui3n-button-bg-color: var(--color-bg-button-primary-disabled);
235
- --ui3n-button-text-color: var(--color-text-button-primary-disabled);
256
+ --_button-bg-color: var(--ui3n-button-bg-color-disabled, var(--color-bg-button-primary-disabled));
257
+ --_button-text-color: var(--ui3n-button-text-color-disabled, var(--color-text-button-primary-disabled));
236
258
 
237
259
  opacity: 0.7;
238
260
  pointer-events: none;
239
261
  }
240
262
 
241
263
  &.elevation {
242
- --ui3n-button-text-color: var(--color-text-button-primary-default);
264
+ --_button-text-color: var(--ui3n-button-text-color, var(--color-text-button-primary-default));
243
265
 
244
266
  background-image: linear-gradient(
245
267
  var(--color-bg-button-primary-default),
246
268
  var(--color-bg-button-primary-hover)
247
269
  );
248
270
  box-shadow:
249
- 0 1px 1px 0 oklch(from var(--blue-100) l c h / 0.25),
250
- 0 2px 8px 0 oklch(from var(--blue-100) l c h / 0.4),
251
- inset 0 1px 1px 0 oklch(from var(--blue-0) l c h / 0.25);
271
+ 0 1px 1px 0 var(--_button-shadow-near),
272
+ 0 2px 8px 0 var(--_button-shadow-far),
273
+ inset 0 1px 1px 0 var(--_button-shadow-inset);
252
274
 
253
275
  .text {
254
- text-shadow: 0 1px 0 oklch(from var(--blue-100) l c h / 0.25);
276
+ text-shadow: 0 1px 0 var(--_button-shadow-near);
255
277
  }
256
278
 
257
279
  &:hover {
258
- --ui3n-button-text-color: var(--color-text-button-primary-hover);
280
+ --_button-text-color: var(--ui3n-button-text-color-hover, var(--color-text-button-primary-hover));
259
281
 
260
282
  background-image: linear-gradient(
261
283
  var(--color-bg-button-primary-default),
262
284
  var(--color-bg-button-primary-pressed)
263
285
  );
264
286
  box-shadow:
265
- 0 1px 1px 0 oklch(from var(--blue-100) l c h / 0.25),
266
- 0 2px 8px 0 oklch(from var(--blue-100) l c h / 0.25),
267
- inset 0 1px 1px 0 oklch(from var(--blue-30) l c h / 0.25);
287
+ 0 1px 1px 0 var(--_button-shadow-near),
288
+ 0 2px 8px 0 var(--_button-shadow-far),
289
+ inset 0 1px 1px 0 var(--_button-shadow-inset);
268
290
  }
269
291
 
270
292
  &:focus {
271
- --ui3n-button-text-color: var(--color-text-button-primary-default);
272
- --ui3n-button-outline-color: oklch(from var(--color-bg-button-primary-default) calc(l - 0.185) c 260deg);
293
+ --_button-text-color: var(--ui3n-button-text-color-focused, var(--color-text-button-primary-default));
294
+ --_button-outline-color: var(
295
+ --ui3n-button-outline-color-focused,
296
+ oklch(from var(--color-bg-button-primary-default) calc(l - 0.185) c 260deg)
297
+ );
273
298
 
274
299
  background-image: linear-gradient(
275
300
  var(--color-bg-button-primary-default),
276
301
  var(--color-bg-button-primary-hover)
277
302
  );
278
303
  box-shadow:
279
- 0 1px 1px 0 oklch(from var(--blue-100) l c h / 0.25),
280
- 0 2px 8px 0 oklch(from var(--blue-100) l c h / 0.25),
281
- inset 0 1px 1px 0 oklch(from var(--blue-30) l c h / 0.25);
304
+ 0 1px 1px 0 var(--_button-shadow-near),
305
+ 0 2px 8px 0 var(--_button-shadow-far),
306
+ inset 0 1px 1px 0 var(--_button-shadow-inset);
282
307
  }
283
308
 
284
309
  &:active {
285
- --ui3n-button-text-color: var(--color-text-button-primary-pressed);
286
- --ui3n-button-outline-color: transparent;
310
+ --_button-text-color: var(--ui3n-button-text-color-pressed, var(--color-text-button-primary-pressed));
311
+ --_button-outline-color: transparent;
287
312
 
288
313
  background-image: linear-gradient(
289
314
  var(--color-bg-button-primary-hover),
290
315
  var(--color-bg-button-primary-pressed)
291
316
  );
292
317
  box-shadow:
293
- 0 1px 1px 0 oklch(from var(--blue-100) l c h / 0.25),
294
- 0 2px 8px 0 oklch(from var(--blue-100) l c h / 0.25),
295
- inset 0 1px 1px 0 oklch(from var(--blue-30) l c h / 0.25);
318
+ 0 1px 1px 0 var(--_button-shadow-near),
319
+ 0 2px 8px 0 var(--_button-shadow-far),
320
+ inset 0 1px 1px 0 var(--_button-shadow-inset);
296
321
  }
297
322
 
298
323
  &[disabled] {
299
- --ui3n-button-bg-color: var(--color-bg-button-primary-disabled);
300
- --ui3n-button-text-color: var(--color-text-button-primary-disabled);
324
+ --_button-bg-color: var(--ui3n-button-bg-color-disabled, var(--color-bg-button-primary-disabled));
325
+ --_button-text-color: var(
326
+ --ui3n-button-text-color-disabled,
327
+ var(--color-text-button-primary-disabled)
328
+ );
301
329
 
302
330
  opacity: 0.7;
303
331
  background-image: none;
@@ -312,89 +340,107 @@
312
340
  }
313
341
 
314
342
  .secondary {
315
- --ui3n-button-bg-color: var(--color-bg-button-secondary-default);
316
- --ui3n-button-text-color: var(--color-text-button-secondary-default);
343
+ --_button-bg-color: var(--ui3n-button-bg-color, var(--color-bg-button-secondary-default));
344
+ --_button-text-color: var(--ui3n-button-text-color, var(--color-text-button-secondary-default));
317
345
 
318
346
  &:hover {
319
- --ui3n-button-bg-color: var(--color-bg-button-secondary-hover);
320
- --ui3n-button-text-color: var(--color-text-button-secondary-hover);
347
+ --_button-bg-color: var(--ui3n-button-bg-color-hover, var(--color-bg-button-secondary-hover));
348
+ --_button-text-color: var(--ui3n-button-text-color-hover, var(--color-text-button-secondary-hover));
321
349
  }
322
350
 
323
351
  &:focus {
324
- --ui3n-button-text-color: var(--color-text-button-secondary-default);
325
- --ui3n-button-outline-color: oklch(from var(--color-bg-button-secondary-default) calc(l - 0.185) c 260deg);
352
+ --_button-text-color: var(--ui3n-button-text-color-focused, var(--color-text-button-secondary-default));
353
+ --_button-outline-color: var(
354
+ --ui3n-button-outline-color-focused,
355
+ oklch(from var(--color-bg-button-secondary-default) calc(l - 0.185) c 260deg)
356
+ );
326
357
  }
327
358
 
328
359
  &:active {
329
- --ui3n-button-bg-color: var(--color-bg-button-secondary-pressed);
330
- --ui3n-button-text-color: var(--color-text-button-secondary-pressed);
331
- --ui3n-button-outline-color: transparent;
360
+ --_button-bg-color: var(--ui3n-button-bg-color-pressed, var(--color-bg-button-secondary-pressed));
361
+ --_button-text-color: var(--ui3n-button-text-color-pressed, var(--color-text-button-secondary-pressed));
362
+ --_button-outline-color: transparent;
332
363
  }
333
364
 
334
365
  &[disabled] {
335
- --ui3n-button-bg-color: var(--color-bg-button-secondary-disabled);
336
- --ui3n-button-text-color: var(--color-text-button-secondary-disabled);
366
+ --_button-bg-color: var(--ui3n-button-bg-color-disabled, var(--color-bg-button-secondary-disabled));
367
+ --_button-text-color: var(
368
+ --ui3n-button-text-color-disabled,
369
+ var(--color-text-button-secondary-disabled)
370
+ );
337
371
 
338
372
  opacity: 0.7;
339
373
  pointer-events: none;
340
374
  }
341
375
 
342
376
  &.elevation {
343
- --ui3n-button-text-color: var(--color-text-button-secondary-default);
377
+ --_button-text-color: var(--ui3n-button-text-color, var(--color-text-button-secondary-default));
344
378
 
345
379
  background-image: linear-gradient(
346
380
  var(--color-bg-button-secondary-default),
347
381
  var(--color-bg-button-secondary-hover)
348
382
  );
349
383
  box-shadow:
350
- 0 1px 1px 0 oklch(from var(--blue-100) l c h / 0.25),
351
- 0 2px 8px 0 oklch(from var(--blue-100) l c h / 0.25),
352
- inset 0 1px 1px 0 oklch(from var(--blue-30) l c h / 0.25);
384
+ 0 1px 1px 0 var(--_button-shadow-near),
385
+ 0 2px 8px 0 var(--_button-shadow-far),
386
+ inset 0 1px 1px 0 var(--_button-shadow-inset);
353
387
 
354
388
  &:hover {
355
- --ui3n-button-text-color: var(--color-text-button-secondary-hover);
389
+ --_button-text-color: var(--ui3n-button-text-color-hover, var(--color-text-button-secondary-hover));
356
390
 
357
391
  background-image: linear-gradient(
358
392
  var(--color-bg-button-secondary-hover),
359
393
  var(--color-bg-button-secondary-pressed)
360
394
  );
361
395
  box-shadow:
362
- 0 1px 1px 0 oklch(from var(--blue-100) l c h / 0.25),
363
- 0 2px 8px 0 oklch(from var(--blue-100) l c h / 0.25),
364
- inset 0 1px 1px 0 oklch(from var(--blue-30) l c h / 0.25);
396
+ 0 1px 1px 0 var(--_button-shadow-near),
397
+ 0 2px 8px 0 var(--_button-shadow-far),
398
+ inset 0 1px 1px 0 var(--_button-shadow-inset);
365
399
  }
366
400
 
367
401
  &:focus {
368
- --ui3n-button-text-color: var(--color-text-button-secondary-default);
369
- --ui3n-button-outline-color: var(--color-border-button-secondary-focused);
402
+ --_button-text-color: var(
403
+ --ui3n-button-text-color-focused,
404
+ var(--color-text-button-secondary-default)
405
+ );
406
+ --_button-outline-color: var(
407
+ --ui3n-button-outline-color-focused,
408
+ var(--color-border-button-secondary-focused)
409
+ );
370
410
 
371
411
  background-image: linear-gradient(
372
412
  var(--color-bg-button-secondary-default),
373
413
  var(--color-bg-button-secondary-hover)
374
414
  );
375
415
  box-shadow:
376
- 0 1px 1px 0 oklch(from var(--blue-100) l c h / 0.25),
377
- 0 2px 8px 0 oklch(from var(--blue-100) l c h / 0.25),
378
- inset 0 1px 1px 0 oklch(from var(--blue-30) l c h / 0.25);
416
+ 0 1px 1px 0 var(--_button-shadow-near),
417
+ 0 2px 8px 0 var(--_button-shadow-far),
418
+ inset 0 1px 1px 0 var(--_button-shadow-inset);
379
419
  }
380
420
 
381
421
  &:active {
382
- --ui3n-button-text-color: var(--color-text-button-secondary-pressed);
383
- --ui3n-button-outline-color: transparent;
422
+ --_button-text-color: var(
423
+ --ui3n-button-text-color-pressed,
424
+ var(--color-text-button-secondary-pressed)
425
+ );
426
+ --_button-outline-color: transparent;
384
427
 
385
428
  background-image: linear-gradient(
386
429
  var(--color-bg-button-secondary-hover),
387
430
  var(--color-bg-button-secondary-pressed)
388
431
  );
389
432
  box-shadow:
390
- 0 1px 1px 0 oklch(from var(--blue-100) l c h / 0.25),
391
- 0 2px 8px 0 oklch(from var(--blue-100) l c h / 0.25),
392
- inset 0 1px 1px 0 oklch(from var(--blue-30) l c h / 0.25);
433
+ 0 1px 1px 0 var(--_button-shadow-near),
434
+ 0 2px 8px 0 var(--_button-shadow-far),
435
+ inset 0 1px 1px 0 var(--_button-shadow-inset);
393
436
  }
394
437
 
395
438
  &[disabled] {
396
- --ui3n-button-bg-color: var(--color-bg-button-secondary-disabled);
397
- --ui3n-button-text-color: var(--color-text-button-secondary-disabled);
439
+ --_button-bg-color: var(--ui3n-button-bg-color-disabled, var(--color-bg-button-secondary-disabled));
440
+ --_button-text-color: var(
441
+ --ui3n-button-text-color-disabled,
442
+ var(--color-text-button-secondary-disabled)
443
+ );
398
444
 
399
445
  opacity: 0.7;
400
446
  background-image: none;
@@ -405,90 +451,105 @@
405
451
  }
406
452
 
407
453
  .tertiary {
408
- --ui3n-button-bg-color: var(--color-bg-button-tritery-default);
409
- --ui3n-button-text-color: var(--color-text-button-tritery-default);
454
+ --_button-bg-color: var(--ui3n-button-bg-color, var(--color-bg-button-tritery-default));
455
+ --_button-text-color: var(--ui3n-button-text-color, var(--color-text-button-tritery-default));
410
456
 
411
457
  &:hover {
412
- --ui3n-button-bg-color: var(--color-bg-button-tritery-hover);
413
- --ui3n-button-text-color: var(--color-text-button-tritery-hover);
458
+ --_button-bg-color: var(--ui3n-button-bg-color-hover, var(--color-bg-button-tritery-hover));
459
+ --_button-text-color: var(--ui3n-button-text-color-hover, var(--color-text-button-tritery-hover));
414
460
  }
415
461
 
416
462
  &:focus {
417
- --ui3n-button-bg-color: var(--color-bg-button-tritery-default);
418
- --ui3n-button-text-color: var(--color-text-button-tritery-focused);
419
- --ui3n-button-outline-color: oklch(from var(--color-bg-button-tritery-default) calc(l - 0.185) c 260deg);
463
+ --_button-bg-color: var(--ui3n-button-bg-color, var(--color-bg-button-tritery-default));
464
+ --_button-text-color: var(--ui3n-button-text-color-focused, var(--color-text-button-tritery-focused));
465
+ --_button-outline-color: var(
466
+ --ui3n-button-outline-color-focused,
467
+ oklch(from var(--color-bg-button-tritery-default) calc(l - 0.185) c 260deg)
468
+ );
420
469
  }
421
470
 
422
471
  &:active {
423
- --ui3n-button-bg-color: var(--color-bg-button-tritery-pressed);
424
- --ui3n-button-text-color: var(--color-text-button-tritery-pressed);
425
- --ui3n-button-outline-color: transparent;
472
+ --_button-bg-color: var(--ui3n-button-bg-color-pressed, var(--color-bg-button-tritery-pressed));
473
+ --_button-text-color: var(--ui3n-button-text-color-pressed, var(--color-text-button-tritery-pressed));
474
+ --_button-outline-color: transparent;
426
475
  }
427
476
 
428
477
  &[disabled] {
429
- --ui3n-button-bg-color: var(--color-bg-button-tritery-disabled);
430
- --ui3n-button-text-color: var(--color-text-button-tritery-disabled);
478
+ --_button-bg-color: var(--ui3n-button-bg-color-disabled, var(--color-bg-button-tritery-disabled));
479
+ --_button-text-color: var(--ui3n-button-text-color-disabled, var(--color-text-button-tritery-disabled));
431
480
 
432
481
  opacity: 0.7;
433
482
  pointer-events: none;
434
483
  }
435
484
 
436
485
  &.elevation {
437
- --ui3n-button-text-color: var(--color-text-button-tritery-default);
486
+ --_button-text-color: var(--ui3n-button-text-color, var(--color-text-button-tritery-default));
438
487
 
439
488
  background-image: linear-gradient(
440
489
  var(--color-bg-button-tritery-default),
441
490
  var(--color-bg-button-tritery-hover)
442
491
  );
443
492
  box-shadow:
444
- 0 1px 1px 0 oklch(from var(--blue-100) l c h / 0.25),
445
- 0 2px 8px 0 oklch(from var(--blue-100) l c h / 0.25),
446
- inset 0 1px 1px 0 var(--black-12);
493
+ 0 1px 1px 0 var(--_button-shadow-near),
494
+ 0 2px 8px 0 var(--_button-shadow-far),
495
+ inset 0 1px 1px 0 var(--_button-shadow-inset);
447
496
 
448
497
  &:hover {
449
- --ui3n-button-text-color: var(--color-text-button-tritery-hover);
498
+ --_button-text-color: var(--ui3n-button-text-color-hover, var(--color-text-button-tritery-hover));
450
499
 
451
500
  background-image: linear-gradient(
452
501
  var(--color-bg-button-tritery-hover),
453
502
  var(--color-bg-button-tritery-pressed)
454
503
  );
455
504
  box-shadow:
456
- 0 1px 1px 0 oklch(from var(--blue-100) l c h / 0.25),
457
- 0 2px 8px 0 oklch(from var(--blue-100) l c h / 0.25),
458
- inset 0 1px 1px 0 var(--black-12);
505
+ 0 1px 1px 0 var(--_button-shadow-near),
506
+ 0 2px 8px 0 var(--_button-shadow-far),
507
+ inset 0 1px 1px 0 var(--_button-shadow-inset);
459
508
  }
460
509
 
461
510
  &:focus {
462
- --ui3n-button-text-color: var(--color-text-button-tritery-focused);
463
- --ui3n-button-outline-color: oklch(from var(--color-bg-button-tritery-default) calc(l - 0.185) c 260deg);
511
+ --_button-text-color: var(
512
+ --ui3n-button-text-color-focused,
513
+ var(--color-text-button-tritery-focused)
514
+ );
515
+ --_button-outline-color: var(
516
+ --ui3n-button-outline-color-focused,
517
+ oklch(from var(--color-bg-button-tritery-default) calc(l - 0.185) c 260deg)
518
+ );
464
519
 
465
520
  background-image: linear-gradient(
466
521
  var(--color-bg-button-tritery-default),
467
522
  var(--color-bg-button-tritery-hover)
468
523
  );
469
524
  box-shadow:
470
- 0 1px 1px 0 oklch(from var(--blue-100) l c h / 0.25),
471
- 0 2px 8px 0 oklch(from var(--blue-100) l c h / 0.25),
472
- inset 0 1px 1px 0 var(--black-12);
525
+ 0 1px 1px 0 var(--_button-shadow-near),
526
+ 0 2px 8px 0 var(--_button-shadow-far),
527
+ inset 0 1px 1px 0 var(--_button-shadow-inset);
473
528
  }
474
529
 
475
530
  &:active {
476
- --ui3n-button-text-color: var(--color-text-button-tritery-pressed);
477
- --ui3n-button-outline-color: transparent;
531
+ --_button-text-color: var(
532
+ --ui3n-button-text-color-pressed,
533
+ var(--color-text-button-tritery-pressed)
534
+ );
535
+ --_button-outline-color: transparent;
478
536
 
479
537
  background-image: linear-gradient(
480
538
  var(--color-bg-button-tritery-hover),
481
539
  var(--color-bg-button-tritery-pressed)
482
540
  );
483
541
  box-shadow:
484
- 0 1px 1px 0 oklch(from var(--blue-100) l c h / 0.25),
485
- 0 2px 8px 0 oklch(from var(--blue-100) l c h / 0.25),
486
- inset 0 1px 1px 0 var(--black-12);
542
+ 0 1px 1px 0 var(--_button-shadow-near),
543
+ 0 2px 8px 0 var(--_button-shadow-far),
544
+ inset 0 1px 1px 0 var(--_button-shadow-inset);
487
545
  }
488
546
 
489
547
  &[disabled] {
490
- --ui3n-button-bg-color: var(--color-bg-button-tritery-disabled);
491
- --ui3n-button-text-color: var(--color-text-button-tritery-disabled);
548
+ --_button-bg-color: var(--ui3n-button-bg-color-disabled, var(--color-bg-button-tritery-disabled));
549
+ --_button-text-color: var(
550
+ --ui3n-button-text-color-disabled,
551
+ var(--color-text-button-tritery-disabled)
552
+ );
492
553
 
493
554
  opacity: 0.7;
494
555
  background-image: none;
@@ -499,33 +560,43 @@
499
560
  }
500
561
 
501
562
  .outline {
502
- --ui3n-button-bg-color: transparent;
503
- --ui3n-button-text-color: var(--color-text-button-secondary-default);
504
- --ui3n-button-outline-color: var(--ui3n-button-text-color);
563
+ --_button-bg-color: var(--ui3n-button-bg-color, transparent);
564
+ --_button-text-color: var(--ui3n-button-text-color, var(--color-text-button-secondary-default));
565
+ --_button-outline-color: var(--ui3n-button-outline-color, var(--_button-text-color));
505
566
 
506
567
  &:hover {
507
- --ui3n-button-bg-color: oklch(from var(--color-text-button-secondary-default) l c h / 0.08);
508
- --ui3n-button-text-color: var(--color-text-button-secondary-hover);
509
- --ui3n-button-outline-color: var(--ui3n-button-text-color);
568
+ --_button-bg-color: var(
569
+ --ui3n-button-bg-color-hover,
570
+ oklch(from var(--color-text-button-secondary-default) l c h / 0.08)
571
+ );
572
+ --_button-text-color: var(--ui3n-button-text-color-hover, var(--color-text-button-secondary-hover));
573
+ --_button-outline-color: var(--ui3n-button-outline-color-hover, var(--_button-text-color));
510
574
  }
511
575
 
512
576
  &:focus {
513
- --ui3n-button-bg-color: transparent;
514
- --ui3n-button-text-color: oklch(
515
- from var(--color-text-button-secondary-default) calc(l * 0.9) c calc(h * 1.1)
577
+ --_button-bg-color: transparent;
578
+ --_button-text-color: var(
579
+ --ui3n-button-text-color-focused,
580
+ oklch(from var(--color-text-button-secondary-default) calc(l * 0.9) c calc(h * 1.1))
516
581
  );
517
- --ui3n-button-outline-color: var(--ui3n-button-text-color);
582
+ --_button-outline-color: var(--ui3n-button-outline-color-focused, var(--_button-text-color));
518
583
  }
519
584
 
520
585
  &:active {
521
- --ui3n-button-bg-color: oklch(from var(--color-text-button-secondary-default) l c h / 0.12);
522
- --ui3n-button-text-color: var(--color-text-button-secondary-pressed);
523
- --ui3n-button-outline-color: var(--ui3n-button-text-color);
586
+ --_button-bg-color: var(
587
+ --ui3n-button-bg-color-pressed,
588
+ oklch(from var(--color-text-button-secondary-default) l c h / 0.12)
589
+ );
590
+ --_button-text-color: var(--ui3n-button-text-color-pressed, var(--color-text-button-secondary-pressed));
591
+ --_button-outline-color: var(--ui3n-button-outline-color-pressed, var(--_button-text-color));
524
592
  }
525
593
 
526
594
  &[disabled] {
527
- --ui3n-button-bg-color: transparent;
528
- --ui3n-button-text-color: var(--color-text-button-secondary-disabled);
595
+ --_button-bg-color: transparent;
596
+ --_button-text-color: var(
597
+ --ui3n-button-text-color-disabled,
598
+ var(--color-text-button-secondary-disabled)
599
+ );
529
600
 
530
601
  pointer-events: none;
531
602
  }
@@ -539,42 +610,57 @@
539
610
  }
540
611
 
541
612
  &.regular {
542
- min-width: var(--ui3n-button-icon-regular);
543
- width: var(--ui3n-button-icon-regular);
613
+ min-width: var(--_button-icon-regular);
614
+ width: var(--_button-icon-regular);
544
615
  }
545
616
 
546
617
  &.small {
547
- min-width: var(--ui3n-button-icon-small);
548
- width: var(--ui3n-button-icon-small);
618
+ min-width: var(--_button-icon-small);
619
+ width: var(--_button-icon-small);
549
620
  }
550
621
 
551
622
  &.large {
552
- min-width: var(--ui3n-button-icon-large);
553
- width: var(--ui3n-button-icon-large);
623
+ min-width: var(--_button-icon-large);
624
+ width: var(--_button-icon-large);
554
625
  }
555
626
  }
556
627
 
557
628
  .icon,
558
629
  .custom {
559
630
  &:hover {
560
- background-color: oklch(from var(--ui3n-button-bg-color) calc(l - 0.185) c h);
631
+ background-color: var(
632
+ --ui3n-button-bg-color-hover,
633
+ oklch(from var(--_button-bg-color) calc(l - 0.185) c h)
634
+ );
561
635
  }
562
636
 
563
637
  &:focus {
564
- --ui3n-button-outline-color: oklch(from var(--ui3n-button-bg-color) calc(l - 0.185) c h);
638
+ --_button-outline-color: var(
639
+ --ui3n-button-outline-color-focused,
640
+ oklch(from var(--_button-bg-color) calc(l - 0.185) c h)
641
+ );
565
642
 
566
- background-color: var(--ui3n-button-bg-color);
643
+ background-color: var(--_button-bg-color);
567
644
  }
568
645
 
569
646
  &:active {
570
- --ui3n-button-outline-color: transparent;
647
+ --_button-outline-color: transparent;
571
648
 
572
- background-color: oklch(from var(--ui3n-button-bg-color) calc(l - 0.205) c h);
649
+ background-color: var(
650
+ --ui3n-button-bg-color-pressed,
651
+ oklch(from var(--_button-bg-color) calc(l - 0.205) c h)
652
+ );
573
653
  }
574
654
 
575
655
  &[disabled] {
576
- background-color: oklch(from var(--ui3n-button-bg-color) calc(l + 0.15) c h);
577
- color: oklch(from var(--ui3n-button-text-color) calc(l + 0.15) c 260deg);
656
+ background-color: var(
657
+ --ui3n-button-bg-color-disabled,
658
+ oklch(from var(--_button-bg-color) calc(l + 0.15) c h)
659
+ );
660
+ color: var(
661
+ --ui3n-button-text-color-disabled,
662
+ oklch(from var(--_button-text-color) calc(l + 0.15) c 260deg)
663
+ );
578
664
  opacity: 0.7;
579
665
  pointer-events: none;
580
666
  }