@dynamic-framework/ui-react 1.26.0 → 1.28.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 (58) hide show
  1. package/dist/css/dynamic-ui-non-root.css +851 -927
  2. package/dist/css/dynamic-ui-non-root.min.css +2 -2
  3. package/dist/css/dynamic-ui-root.css +228 -152
  4. package/dist/css/dynamic-ui-root.min.css +2 -2
  5. package/dist/css/dynamic-ui.css +1062 -1062
  6. package/dist/css/dynamic-ui.min.css +2 -2
  7. package/dist/index.esm.js +125 -58
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +126 -57
  10. package/dist/index.js.map +1 -1
  11. package/dist/types/components/DButtonIcon/DButtonIcon.d.ts +19 -0
  12. package/dist/types/components/DButtonIcon/index.d.ts +2 -0
  13. package/dist/types/components/DDatePicker/DDatePicker.d.ts +3 -3
  14. package/dist/types/components/DDatePickerInput/DDatePickerInput.d.ts +2 -0
  15. package/dist/types/components/DInput/DInput.d.ts +3 -2
  16. package/dist/types/components/DInputCheck/DInputCheck.d.ts +3 -1
  17. package/dist/types/components/DInputCounter/DInputCounter.d.ts +2 -1
  18. package/dist/types/components/DInputCurrency/DInputCurrency.d.ts +2 -1
  19. package/dist/types/components/DInputCurrencyBase/DInputCurrencyBase.d.ts +2 -1
  20. package/dist/types/components/DInputMask/DInputMask.d.ts +2 -1
  21. package/dist/types/components/DInputSearch/DInputSearch.d.ts +2 -1
  22. package/dist/types/components/DInputSelect/DInputSelect.d.ts +3 -2
  23. package/dist/types/components/DInputSwitch/DInputSwitch.d.ts +3 -1
  24. package/dist/types/components/DSelect/DSelect.d.ts +3 -3
  25. package/dist/types/components/DStepper/DStepper.d.ts +2 -1
  26. package/dist/types/components/DStepperDesktop/DStepperDesktop.d.ts +2 -1
  27. package/dist/types/components/DTableHead/DTableHead.d.ts +9 -0
  28. package/dist/types/components/DTableHead/index.d.ts +2 -0
  29. package/dist/types/components/DToastContainer/DToastContainer.d.ts +2 -14
  30. package/dist/types/components/DToastContainer/useDToast.d.ts +11 -12
  31. package/dist/types/components/index.d.ts +2 -0
  32. package/dist/types/contexts/DContext.d.ts +1 -1
  33. package/dist/types/hooks/useFormatCurrency.d.ts +2 -1
  34. package/package.json +7 -5
  35. package/setupJest.js +16 -0
  36. package/src/style/abstracts/_mixins.scss +41 -21
  37. package/src/style/abstracts/variables/_+import.scss +12 -3
  38. package/src/style/abstracts/variables/_border.scss +1 -1
  39. package/src/style/abstracts/variables/_buttons.scss +3 -5
  40. package/src/style/abstracts/variables/_colors.scss +10 -10
  41. package/src/style/abstracts/variables/_forms.scss +24 -50
  42. package/src/style/abstracts/variables/_options.scss +1 -1
  43. package/src/style/abstracts/variables/_quick-action-switch.scss +0 -2
  44. package/src/style/abstracts/variables/_toast.scss +5 -0
  45. package/src/style/base/_+import.scss +1 -0
  46. package/src/style/base/_alert.scss +1 -1
  47. package/src/style/base/_buttons.scss +41 -16
  48. package/src/style/base/_form-check.scss +2 -19
  49. package/src/style/base/_form-switch.scss +4 -53
  50. package/src/style/base/_toast.scss +56 -0
  51. package/src/style/components/_+import.scss +3 -2
  52. package/src/style/components/_d-button-icon.scss +26 -0
  53. package/src/style/components/_d-close.scss +11 -0
  54. package/src/style/components/_d-modal.scss +0 -11
  55. package/src/style/components/_d-offcanvas.scss +0 -11
  56. package/src/style/components/_d-quick-action-switch.scss +0 -7
  57. package/src/style/components/_d-table-head.scss +18 -0
  58. package/src/style/root/_root.scss +42 -36
package/src/style/root/_root.scss CHANGED
@@ -167,7 +167,11 @@
167
167
  // scss-docs-start root-focus-variables
168
168
  --#{$prefix}focus-ring-width: #{$focus-ring-width};
169
169
  --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
170
- --#{$prefix}focus-ring-color: rgba(var(--#{$prefix}#{$focus-ring-color-mapping}), var(--#{$prefix}focus-ring-opacity));
170
+ --#{$prefix}focus-ring-border-color-rgb: #{$focus-ring-border-color};
171
+ --#{$prefix}focus-ring-border-color: rgb(var(--#{$prefix}focus-ring-border-color-rgb));
172
+ --#{$prefix}focus-ring-base-color-rgb: var(--#{$prefix}#{$focus-ring-color-mapping});
173
+ --#{$prefix}focus-ring-base-color: rgb(var(--#{$prefix}focus-ring-base-color-rgb));
174
+ --#{$prefix}focus-ring-color: rgba(var(--#{$prefix}focus-ring-base-color-rgb), var(--#{$prefix}focus-ring-opacity));
171
175
  // scss-docs-end root-focus-variables
172
176
 
173
177
  // scss-docs-start root-form-validation-variables
@@ -207,7 +211,7 @@
207
211
  --#{$prefix}label-padding-x: var(--#{$prefix}ref-spacer-2);
208
212
  --#{$prefix}label-font-size: var(--#{$prefix}fs-small);
209
213
  --#{$prefix}label-font-weight: var(--#{$prefix}fw-normal);
210
- --#{$prefix}label-color: var(--#{$prefix}gray);
214
+ --#{$prefix}label-color: var(--#{$prefix}gray-700);
211
215
 
212
216
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
213
217
  --#{$prefix}btn-lg-border-radius: #{$btn-border-radius-lg};
@@ -217,66 +221,68 @@
217
221
  @if $color == "light" {
218
222
  @include df-button-variant-variables(
219
223
  "light",
220
- $default-color: var(--#{$prefix}light),
224
+ $default-color: var(--#{$prefix}gray-100),
225
+ $default-text-color: color-contrast-var(map-get($all-colors, gray-100)),
221
226
  $hover-color: var(--#{$prefix}gray-200),
222
- $focus-color: var(--#{$prefix}light),
223
- $active-color: var(--#{$prefix}gray-300),
224
- $default-text-color: color-contrast-var(map-get($all-colors, light)),
225
227
  $hover-text-color: color-contrast-var(map-get($all-colors, gray-200)),
228
+ $focus-color: var(--#{$prefix}gray-200),
226
229
  $focus-text-color: color-contrast-var(map-get($all-colors, gray-200)),
230
+ $active-color: var(--#{$prefix}gray-300),
227
231
  $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
228
- $disabled-opacity: .65
232
+ $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
229
233
  );
230
234
  @include df-button-outline-variant-variables(
231
235
  "light",
232
- $default-color: var(--#{$prefix}light),
233
- $hover-bg-color: var(--#{$prefix}light),
234
- $hover-text-color: color-contrast-var(map-get($all-colors, light)),
235
- $focus-text-color: var(--#{$prefix}light),
236
- $active-text-color: color-contrast-var(map-get($all-colors, light)),
236
+ $default-color: var(--#{$prefix}gray-100),
237
+ $hover-bg-color: var(--#{$prefix}gray-200),
238
+ $hover-text-color: color-contrast-var(map-get($all-colors, gray-200)),
239
+ $focus-bg-color: var(--#{$prefix}gray-200),
240
+ $focus-text-color: color-contrast-var(map-get($all-colors, gray-200)),
237
241
  $active-bg-color: var(--#{$prefix}gray-300),
238
- $active-border-color: var(--#{$prefix}gray-300)
242
+ $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
243
+ $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
239
244
  );
240
245
  @include df-button-link-variant-variables(
241
246
  "light",
242
- $default-color: var(--#{$prefix}light),
243
- $hover-bg-color: var(--#{$prefix}light),
244
- $hover-text-color: color-contrast-var(map-get($all-colors, light)),
245
- $focus-text-color: var(--#{$prefix}light),
246
- $active-text-color: color-contrast-var(map-get($all-colors, light)),
247
- $active-bg-color: var(--#{$prefix}gray-300)
247
+ $default-color: var(--#{$prefix}gray-100),
248
+ $hover-text-color: var(--#{$prefix}gray-200),
249
+ $focus-text-color: var(--#{$prefix}gray-200),
250
+ $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
251
+ $active-bg-color: var(--#{$prefix}gray-300),
252
+ $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
248
253
  );
249
254
  } @else if $color == "dark" {
250
255
  @include df-button-variant-variables(
251
256
  "dark",
252
- $default-color: var(--#{$prefix}dark),
257
+ $default-color: var(--#{$prefix}gray-900),
258
+ $default-text-color: color-contrast-var(map-get($all-colors, gray-900)),
253
259
  $hover-color: var(--#{$prefix}gray-800),
254
- $focus-color: var(--#{$prefix}dark),
255
- $active-color: var(--#{$prefix}gray-700),
256
- $default-text-color: color-contrast-var(map-get($all-colors, dark)),
257
260
  $hover-text-color: color-contrast-var(map-get($all-colors, gray-800)),
261
+ $focus-color: var(--#{$prefix}gray-800),
258
262
  $focus-text-color: color-contrast-var(map-get($all-colors, gray-800)),
263
+ $active-color: var(--#{$prefix}gray-700),
259
264
  $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
260
- $disabled-opacity: .65
265
+ $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
261
266
  );
262
267
  @include df-button-outline-variant-variables(
263
268
  "dark",
264
- $default-color: var(--#{$prefix}dark),
265
- $hover-bg-color: var(--#{$prefix}dark),
266
- $hover-text-color: color-contrast-var(map-get($all-colors, dark)),
267
- $focus-text-color: var(--#{$prefix}dark),
268
- $active-text-color: color-contrast-var(map-get($all-colors, dark)),
269
+ $default-color: var(--#{$prefix}gray-900),
270
+ $hover-bg-color: var(--#{$prefix}gray-800),
271
+ $hover-text-color: color-contrast-var(map-get($all-colors, gray-800)),
272
+ $focus-bg-color: var(--#{$prefix}gray-800),
273
+ $focus-text-color: color-contrast-var(map-get($all-colors, gray-800)),
269
274
  $active-bg-color: var(--#{$prefix}gray-700),
270
- $active-border-color: var(--#{$prefix}gray-700)
275
+ $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
276
+ $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
271
277
  );
272
278
  @include df-button-link-variant-variables(
273
279
  "dark",
274
- $default-color: var(--#{$prefix}dark),
275
- $hover-bg-color: var(--#{$prefix}dark),
276
- $hover-text-color: color-contrast-var(map-get($all-colors, dark)),
277
- $focus-text-color: var(--#{$prefix}dark),
278
- $active-text-color: color-contrast-var(map-get($all-colors, dark)),
279
- $active-bg-color: var(--#{$prefix}gray-700)
280
+ $default-color: var(--#{$prefix}gray-900),
281
+ $hover-text-color: var(--#{$prefix}gray-800),
282
+ $focus-text-color: var(--#{$prefix}gray-800),
283
+ $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
284
+ $active-bg-color: var(--#{$prefix}gray-700),
285
+ $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
280
286
  );
281
287
  } @else {
282
288
  @include df-button-variant-variables($color);