@dynamic-framework/ui-react 2.3.1 → 2.5.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 (28) hide show
  1. package/dist/css/dynamic-ui.css +14173 -7319
  2. package/dist/css/dynamic-ui.min.css +2 -2
  3. package/dist/index.esm.js +89 -25
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +88 -25
  6. package/dist/index.js.map +1 -1
  7. package/dist/types/components/DDropdown/DDropdown.d.ts +2 -1
  8. package/dist/types/components/DLayout/DLayout.d.ts +8 -9
  9. package/dist/types/components/DLayout/index.d.ts +1 -0
  10. package/dist/types/components/DToastContainer/DToastContainer.d.ts +39 -2
  11. package/dist/types/components/DToastContainer/index.d.ts +2 -0
  12. package/dist/types/components/DToastContainer/useDToast.d.ts +38 -5
  13. package/dist/types/components/index.d.ts +2 -0
  14. package/dist/types/components/interface.d.ts +1 -1
  15. package/dist/types/contexts/DContext.d.ts +67 -9
  16. package/dist/types/contexts/DPortalContext.d.ts +66 -8
  17. package/dist/types/contexts/index.d.ts +1 -1
  18. package/dist/types/hooks/index.d.ts +0 -1
  19. package/dist/types/hooks/usePortal.d.ts +6 -0
  20. package/package.json +4 -2
  21. package/src/style/abstracts/_mixins.scss +46 -0
  22. package/src/style/abstracts/_utilities.scss +1 -1
  23. package/src/style/abstracts/variables/_colors.scss +4 -4
  24. package/src/style/abstracts/variables/_dropdowns.scss +18 -8
  25. package/src/style/base/_buttons.scss +4 -0
  26. package/src/style/base/_dropdown.scss +5 -16
  27. package/src/style/base/_toast.scss +18 -16
  28. package/src/style/root/_root.scss +27 -12
package/src/style/base/_toast.scss CHANGED
@@ -25,29 +25,31 @@
25
25
  --#{$prefix}icon-color: var(--#{$prefix}toast-icon-color);
26
26
  }
27
27
 
28
- @each $theme, $value in map-remove($theme-colors, "light", "dark") {
29
- $color: color-contrast-var($value);
28
+ @each $theme, $value in map-remove($theme-colors-base, "warning", "light", "dark") {
30
29
  &.toast-#{$theme} {
31
- --#{$prefix}toast-border-color: var(--#{$prefix}#{$theme});
32
- --#{$prefix}toast-color: #{$color};
33
- --#{$prefix}toast-close-color: #{$color};
34
- --#{$prefix}toast-header-color: #{$color};
35
- --#{$prefix}toast-bg: var(--#{$prefix}#{$theme});
36
- --#{$prefix}toast-header-bg: var(--#{$prefix}#{$theme});
30
+ --#{$prefix}toast-border-color: var(--#{$prefix}#{$theme}-50);
31
+ --#{$prefix}toast-color: var(--#{$prefix}#{$theme}-700);
32
+ --#{$prefix}toast-close-color: var(--#{$prefix}#{$theme}-700);
33
+ --#{$prefix}toast-header-color: var(--#{$prefix}#{$theme}-700);
34
+ --#{$prefix}toast-bg: var(--#{$prefix}#{$theme}-50);
35
+ --#{$prefix}toast-header-bg: var(--#{$prefix}#{$theme}-50);
37
36
 
38
37
  .d-close {
39
38
  color: var(--#{$prefix}toast-close-color);
40
39
  }
41
40
  }
41
+ }
42
+
43
+ &.toast-warning {
44
+ --#{$prefix}toast-border-color: var(--#{$prefix}warning-50);
45
+ --#{$prefix}toast-color: var(--#{$prefix}warning-800);
46
+ --#{$prefix}toast-close-color: var(--#{$prefix}warning-800);
47
+ --#{$prefix}toast-header-color: var(--#{$prefix}warning-800);
48
+ --#{$prefix}toast-bg: var(--#{$prefix}warning-50);
49
+ --#{$prefix}toast-header-bg: var(--#{$prefix}warning-50);
42
50
 
43
- &.toast-soft-#{$theme} {
44
- --#{$prefix}toast-color: var(--#{$prefix}gray-900);
45
- --#{$prefix}toast-close-color: var(--#{$prefix}gray-900);
46
- --#{$prefix}toast-header-color: var(--#{$prefix}gray-900);
47
- --#{$prefix}toast-icon-color: var(--#{$prefix}#{$theme}-500);
48
- --#{$prefix}toast-border-color: var(--#{$prefix}#{$theme}-100);
49
- --#{$prefix}toast-bg: var(--#{$prefix}#{$theme}-100);
50
- --#{$prefix}toast-header-bg: var(--#{$prefix}#{$theme}-100);
51
+ .d-close {
52
+ color: var(--#{$prefix}toast-close-color);
51
53
  }
52
54
  }
53
55
  }
package/src/style/root/_root.scss CHANGED
@@ -63,17 +63,6 @@
63
63
  --#{$prefix}#{$color}-text-emphasis: #{$value};
64
64
  }
65
65
 
66
- $theme-colors-bg-subtle: (
67
- "primary": $primary-bg-subtle,
68
- "secondary": $secondary-bg-subtle,
69
- "success": $green-25,
70
- "info": $blue-25,
71
- "warning": $yellow-25,
72
- "danger": $red-25,
73
- "light": $light-bg-subtle,
74
- "dark": $dark-bg-subtle,
75
- );
76
-
77
66
  @each $color, $value in $theme-colors-bg-subtle {
78
67
  --#{$prefix}#{$color}-bg-subtle: #{$value};
79
68
  }
@@ -251,6 +240,18 @@
251
240
  $active-bg-color: var(--#{$prefix}gray-300),
252
241
  $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
253
242
  );
243
+ @include df-button-soft-variant-variables(
244
+ "light",
245
+ $default-color: var(--#{$prefix}gray-700),
246
+ $default-bg: var(--#{$prefix}gray-25),
247
+ $hover-color: var(--#{$prefix}gray-700),
248
+ $hover-bg: var(--#{$prefix}gray-50),
249
+ $focus-color: var(--#{$prefix}gray-700),
250
+ $focus-bg: var(--#{$prefix}gray-50),
251
+ $active-color: var(--#{$prefix}gray-700),
252
+ $active-bg: var(--#{$prefix}gray-100),
253
+ $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
254
+ );
254
255
  } @else if $color == "dark" {
255
256
  @include df-button-variant-variables(
256
257
  "dark",
@@ -281,6 +282,18 @@
281
282
  $active-bg-color: var(--#{$prefix}gray-700),
282
283
  $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
283
284
  );
285
+ @include df-button-soft-variant-variables(
286
+ "dark",
287
+ $default-color: var(--#{$prefix}gray-700),
288
+ $default-bg: var(--#{$prefix}gray-50),
289
+ $hover-color: var(--#{$prefix}gray-800),
290
+ $hover-bg: var(--#{$prefix}gray-100),
291
+ $focus-color: var(--#{$prefix}gray-800),
292
+ $focus-bg: var(--#{$prefix}gray-100),
293
+ $active-color: var(--#{$prefix}gray-900),
294
+ $active-bg: var(--#{$prefix}gray-200),
295
+ $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
296
+ );
284
297
 
285
298
  } @else if $color == "secondary" {
286
299
  @include df-button-variant-variables(
@@ -309,10 +322,12 @@
309
322
  "secondary",
310
323
  $active-bg-color: var(--#{$prefix}secondary-100),
311
324
  );
325
+ @include df-button-soft-variant-variables("secondary");
312
326
  } @else {
313
327
  @include df-button-variant-variables($color);
314
328
  @include df-button-outline-variant-variables($color);
315
329
  @include df-button-link-variant-variables($color);
330
+ @include df-button-soft-variant-variables($color);
316
331
  }
317
332
  }
318
333
  }
@@ -355,7 +370,7 @@
355
370
  --#{$prefix}default-accordion-body-padding-x: var(--#{$prefix}default-accordion-padding-x);
356
371
  --#{$prefix}default-accordion-body-padding-y: var(--#{$prefix}default-accordion-padding-y);
357
372
  --#{$prefix}default-accordion-active-color: var(--#{$prefix}body-color);
358
- --#{$prefix}default-accordion-active-bg: var(--#{$prefix}secondary-soft);
373
+ --#{$prefix}default-accordion-active-bg: var(--#{$prefix}secondary-50);
359
374
  }
360
375
 
361
376
  @if $enable-dark-mode {