@dynamic-framework/ui-react 1.28.1 → 1.30.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 (55) hide show
  1. package/dist/css/dynamic-ui-non-root.css +6635 -151
  2. package/dist/css/dynamic-ui-non-root.min.css +2 -2
  3. package/dist/css/dynamic-ui-root.css +44 -2
  4. package/dist/css/dynamic-ui-root.min.css +2 -2
  5. package/dist/css/dynamic-ui.css +6678 -152
  6. package/dist/css/dynamic-ui.min.css +2 -2
  7. package/dist/index.esm.js +93 -92
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +93 -92
  10. package/dist/index.js.map +1 -1
  11. package/dist/types/components/DAlert/DAlert.d.ts +3 -5
  12. package/dist/types/components/DAvatar/DAvatar.d.ts +1 -1
  13. package/dist/types/components/DBadge/DBadge.d.ts +7 -2
  14. package/dist/types/components/DBoxFile/DBoxFile.d.ts +1 -1
  15. package/dist/types/components/DButton/DButton.d.ts +1 -1
  16. package/dist/types/components/DButtonIcon/DButtonIcon.d.ts +1 -1
  17. package/dist/types/components/DCard/DCard.d.ts +1 -1
  18. package/dist/types/components/DChip/DChip.d.ts +1 -1
  19. package/dist/types/components/DCollapse/DCollapse.d.ts +1 -1
  20. package/dist/types/components/DCurrencyText/DCurrencyText.d.ts +1 -1
  21. package/dist/types/components/DDatePicker/DDatePicker.d.ts +1 -1
  22. package/dist/types/components/DIconBase/DIconBase.d.ts +1 -1
  23. package/dist/types/components/DInputCheck/DInputCheck.d.ts +3 -3
  24. package/dist/types/components/DInputPin/DInputPin.d.ts +1 -1
  25. package/dist/types/components/DInputSelect/DInputSelect.d.ts +1 -1
  26. package/dist/types/components/DInputSwitch/DInputSwitch.d.ts +1 -1
  27. package/dist/types/components/DList/DList.d.ts +1 -1
  28. package/dist/types/components/DModal/DModal.d.ts +1 -1
  29. package/dist/types/components/DOffcanvas/DOffcanvas.d.ts +1 -1
  30. package/dist/types/components/DPaginator/DPaginator.d.ts +2 -0
  31. package/dist/types/components/DPopover/DPopover.d.ts +1 -1
  32. package/dist/types/components/DProgress/DProgress.d.ts +1 -1
  33. package/dist/types/components/DQuickActionButton/DQuickActionButton.d.ts +1 -1
  34. package/dist/types/components/DQuickActionCheck/DQuickActionCheck.d.ts +1 -1
  35. package/dist/types/components/DQuickActionSelect/DQuickActionSelect.d.ts +1 -1
  36. package/dist/types/components/DQuickActionSwitch/DQuickActionSwitch.d.ts +1 -1
  37. package/dist/types/components/DSelect/DSelect.d.ts +1 -1
  38. package/dist/types/components/DStepper/DStepper.d.ts +1 -1
  39. package/dist/types/components/DTabs/DTabs.d.ts +1 -1
  40. package/dist/types/components/DToast/DToast.d.ts +1 -1
  41. package/dist/types/components/interface.d.ts +5 -3
  42. package/dist/types/contexts/DContext.d.ts +2 -2
  43. package/package.json +2 -2
  44. package/src/style/abstracts/variables/_accordion.scss +33 -12
  45. package/src/style/abstracts/variables/_alerts.scss +1 -6
  46. package/src/style/abstracts/variables/_badges.scss +1 -1
  47. package/src/style/abstracts/variables/_border.scss +1 -1
  48. package/src/style/abstracts/variables/_buttons.scss +2 -0
  49. package/src/style/abstracts/variables/_spacers.scss +32 -0
  50. package/src/style/base/_+import.scss +1 -0
  51. package/src/style/base/_alert.scss +10 -45
  52. package/src/style/base/_badge.scss +49 -0
  53. package/src/style/base/_toast.scss +8 -13
  54. package/src/style/components/_d-close.scss +0 -1
  55. package/src/style/root/_root.scss +27 -0
package/src/style/base/_badge.scss ADDED
@@ -0,0 +1,49 @@
1
+ .badge {
2
+ --#{$prefix}badge-gap: #{$badge-gap};
3
+ --#{$prefix}badge-icon-size: #{$badge-font-size};
4
+ --#{$prefix}badge-bg: #{$badge-bg};
5
+ --#{$prefix}badge-color: #{$badge-color};
6
+
7
+ display: inline-flex;
8
+ gap: var(--#{$prefix}badge-gap);
9
+ color: var(--#{$prefix}badge-color);
10
+
11
+ background-color: var(--#{$prefix}badge-bg);
12
+
13
+ .d-icon {
14
+ --#{$prefix}icon-size: var(--#{$prefix}badge-icon-size);
15
+ }
16
+
17
+ @each $theme, $value in map-remove($theme-colors, "light") {
18
+ $color: color-contrast-var($value);
19
+
20
+ &.badge-#{$theme} {
21
+ --#{$prefix}badge-bg: var(--#{$prefix}#{$theme});
22
+ --#{$prefix}badge-color: #{$color};
23
+ }
24
+ }
25
+
26
+ &.badge-light {
27
+ --#{$prefix}badge-bg: var(--#{$prefix}gray-200);
28
+ --#{$prefix}badge-color: var(--#{$prefix}gray-900);
29
+ }
30
+
31
+ @each $theme, $value in map-remove($theme-colors, "light", "dark") {
32
+ $color: color-contrast-var($value);
33
+
34
+ &.badge-soft-#{$theme} {
35
+ --#{$prefix}badge-bg: var(--#{$prefix}surface-#{$theme});
36
+ --#{$prefix}badge-color: var(--#{$prefix}body-color);
37
+ }
38
+ }
39
+
40
+ &.badge-soft-light {
41
+ --#{$prefix}badge-bg: var(--#{$prefix}gray-700);
42
+ --#{$prefix}badge-color: var(--#{$prefix}white);
43
+ }
44
+
45
+ &.badge-soft-dark {
46
+ --#{$prefix}badge-bg: var(--#{$prefix}gray-100);
47
+ --#{$prefix}badge-color: var(--#{$prefix}body-color);
48
+ }
49
+ }
package/src/style/base/_toast.scss CHANGED
@@ -37,20 +37,15 @@
37
37
  color: var(--#{$prefix}toast-close-color);
38
38
  }
39
39
  }
40
- }
41
-
42
- &.toast-soft {
43
- --#{$prefix}toast-color: var(--#{$prefix}gray-900);
44
- --#{$prefix}toast-close-color: var(--#{$prefix}gray-900);
45
- --#{$prefix}toast-header-color: var(--#{$prefix}gray-900);
46
40
 
47
- @each $theme, $value in map-remove($theme-colors, "light", "dark") {
48
- &.toast-#{$theme} {
49
- --#{$prefix}toast-icon-color: var(--#{$prefix}#{$theme}-500);
50
- --#{$prefix}toast-border-color: var(--#{$prefix}#{$theme}-100);
51
- --#{$prefix}toast-bg: var(--#{$prefix}#{$theme}-100);
52
- --#{$prefix}toast-header-bg: var(--#{$prefix}#{$theme}-100);
53
- }
41
+ &.toast-soft-#{$theme} {
42
+ --#{$prefix}toast-color: var(--#{$prefix}gray-900);
43
+ --#{$prefix}toast-close-color: var(--#{$prefix}gray-900);
44
+ --#{$prefix}toast-header-color: var(--#{$prefix}gray-900);
45
+ --#{$prefix}toast-icon-color: var(--#{$prefix}#{$theme}-500);
46
+ --#{$prefix}toast-border-color: var(--#{$prefix}#{$theme}-100);
47
+ --#{$prefix}toast-bg: var(--#{$prefix}#{$theme}-100);
48
+ --#{$prefix}toast-header-bg: var(--#{$prefix}#{$theme}-100);
54
49
  }
55
50
  }
56
51
  }
package/src/style/components/_d-close.scss CHANGED
@@ -1,6 +1,5 @@
1
1
  .d-close {
2
2
  display: flex;
3
- align-self: center;
4
3
  padding: 0;
5
4
  background: transparent;
6
5
  border: 0;
package/src/style/root/_root.scss CHANGED
@@ -295,6 +295,33 @@
295
295
  @each $level, $value in $spacers {
296
296
  --#{$prefix}ref-spacer-#{$level}: #{$value};
297
297
  }
298
+
299
+ --#{$prefix}default-accordion-padding-x: var(--#{$prefix}ref-spacer-4);
300
+ --#{$prefix}default-accordion-padding-y: var(--#{$prefix}ref-spacer-6);
301
+ --#{$prefix}default-accordion-color: var(--#{$prefix}gray-700);
302
+ --#{$prefix}default-accordion-bg: var(--#{$prefix}white);
303
+ --#{$prefix}default-accordion-transition: #{$btn-transition}, border-radius .15s ease;
304
+ --#{$prefix}default-accordion-border-color: var(--#{$prefix}border-color);
305
+ --#{$prefix}default-accordion-border-width: var(--#{$prefix}border-width);
306
+ --#{$prefix}default-accordion-border-radius: var(--#{$prefix}border-radius);
307
+ --#{$prefix}default-accordion-inner-border-radius: calc(var(--#{$prefix}default-accordion-border-radius) - var(--#{$prefix}default-accordion-border-width));
308
+ --#{$prefix}default-accordion-btn-padding-x: var(--#{$prefix}default-accordion-padding-x);
309
+ --#{$prefix}default-accordion-btn-padding-y: var(--#{$prefix}default-accordion-padding-y);
310
+ --#{$prefix}default-accordion-btn-color: var(--#{$prefix}body-color);
311
+ --#{$prefix}default-accordion-btn-bg: var(--#{$prefix}default-accordion-bg);
312
+ --#{$prefix}default-accordion-btn-icon: #{escape-svg($accordion-button-icon-url)};
313
+ --#{$prefix}default-accordion-btn-icon-width: var(--#{$prefix}ref-spacer-5);
314
+ --#{$prefix}default-accordion-btn-icon-transform: rotate(-180deg);
315
+ --#{$prefix}default-accordion-btn-icon-transition: transform .2s ease-in-out;
316
+ --#{$prefix}default-accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-url)};
317
+ --#{$prefix}default-accordion-btn-focus-box-shadow: #{$input-btn-focus-box-shadow};
318
+ --#{$prefix}default-accordion-btn-font-weight: var(--#{$prefix}fw-bold);
319
+ --#{$prefix}default-accordion-btn-font-size: var(--#{$prefix}fs-6);
320
+ --#{$prefix}default-accordion-body-padding-top: var(--#{$prefix}default-accordion-padding-y);
321
+ --#{$prefix}default-accordion-body-padding-x: var(--#{$prefix}default-accordion-padding-x);
322
+ --#{$prefix}default-accordion-body-padding-y: var(--#{$prefix}default-accordion-padding-y);
323
+ --#{$prefix}default-accordion-active-color: var(--#{$prefix}body-color);
324
+ --#{$prefix}default-accordion-active-bg: var(--#{$prefix}secondary-soft);
298
325
  }
299
326
 
300
327
  @if $enable-dark-mode {