@dynamic-framework/ui-react 2.0.0-dev.6 → 2.0.0-dev.8

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 (29) hide show
  1. package/dist/css/dynamic-ui-non-root.css +127 -510
  2. package/dist/css/dynamic-ui-non-root.min.css +2 -2
  3. package/dist/css/dynamic-ui-root.css +62 -556
  4. package/dist/css/dynamic-ui-root.min.css +2 -2
  5. package/dist/css/dynamic-ui.css +188 -1065
  6. package/dist/css/dynamic-ui.min.css +2 -2
  7. package/dist/index.esm.js +152 -98
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +150 -96
  10. package/dist/index.js.map +1 -1
  11. package/dist/types/components/DIconBase/DIconBase.d.ts +10 -2
  12. package/dist/types/components/DInput/DInput.d.ts +2 -1
  13. package/dist/types/components/DInputCounter/DInputCounter.d.ts +3 -2
  14. package/dist/types/components/DInputCurrency/DInputCurrency.d.ts +3 -2
  15. package/dist/types/components/DInputPhone/DInputPhone.d.ts +1 -1
  16. package/dist/types/components/config.d.ts +0 -2
  17. package/dist/types/hooks/useResponsiveProp.d.ts +35 -0
  18. package/package.json +16 -25
  19. package/src/style/abstracts/_mixins.scss +34 -16
  20. package/src/style/abstracts/variables/_colors.scss +8 -2
  21. package/src/style/base/_buttons.scss +11 -125
  22. package/src/style/base/_label.scss +0 -4
  23. package/src/style/components/_d-datepicker.scss +23 -4
  24. package/src/style/root/_root.scss +94 -88
  25. package/dist/types/components/DBarChart/DBarChart.d.ts +0 -9
  26. package/dist/types/components/DMinimalLineChart/DMinimalLineChart.d.ts +0 -9
  27. package/dist/types/components/DMultiLineChart/DMultiLineChart.d.ts +0 -9
  28. package/dist/types/components/DPieChart/DPieChart.d.ts +0 -9
  29. package/dist/types/components/DRadialBarChart/DRadialBarChart.d.ts +0 -6
package/src/style/root/_root.scss CHANGED
@@ -221,94 +221,100 @@
221
221
  --#{$prefix}btn-sm-border-radius: #{$btn-border-radius-sm};
222
222
 
223
223
  @each $color, $value in $theme-colors {
224
- @if $color == "light" {
225
- @include df-button-variant-variables(
226
- "light",
227
- $default-color: var(--#{$prefix}gray-25),
228
- $default-text-color: color-contrast-var(map-get($all-colors, gray-100)),
229
- $hover-color: var(--#{$prefix}gray-50),
230
- $hover-text-color: color-contrast-var(map-get($all-colors, gray-200)),
231
- $focus-color: var(--#{$prefix}gray-200),
232
- $focus-text-color: color-contrast-var(map-get($all-colors, gray-200)),
233
- $active-color: var(--#{$prefix}gray-300),
234
- $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
235
- $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
236
- );
237
- @include df-button-outline-variant-variables(
238
- "light",
239
- $default-color: var(--#{$prefix}gray-100),
240
- $hover-bg-color: var(--#{$prefix}gray-200),
241
- $hover-text-color: color-contrast-var(map-get($all-colors, gray-200)),
242
- $focus-bg-color: var(--#{$prefix}gray-200),
243
- $focus-text-color: color-contrast-var(map-get($all-colors, gray-200)),
244
- $active-bg-color: var(--#{$prefix}gray-300),
245
- $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
246
- $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
247
- );
248
- @include df-button-link-variant-variables(
249
- "light",
250
- $default-color: var(--#{$prefix}gray-100),
251
- $hover-text-color: var(--#{$prefix}gray-200),
252
- $focus-text-color: var(--#{$prefix}gray-200),
253
- $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
254
- $active-bg-color: var(--#{$prefix}gray-300),
255
- $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
256
- );
257
- } @else if $color == "dark" {
258
- @include df-button-variant-variables(
259
- "dark",
260
- $default-color: var(--#{$prefix}gray-900),
261
- $default-text-color: color-contrast-var(map-get($all-colors, gray-900)),
262
- $hover-color: var(--#{$prefix}gray-800),
263
- $hover-text-color: color-contrast-var(map-get($all-colors, gray-800)),
264
- $focus-color: var(--#{$prefix}gray-800),
265
- $focus-text-color: color-contrast-var(map-get($all-colors, gray-800)),
266
- $active-color: var(--#{$prefix}gray-700),
267
- $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
268
- $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
269
- );
270
- @include df-button-outline-variant-variables(
271
- "dark",
272
- $default-color: var(--#{$prefix}gray-900),
273
- $hover-bg-color: var(--#{$prefix}gray-800),
274
- $hover-text-color: color-contrast-var(map-get($all-colors, gray-800)),
275
- $focus-bg-color: var(--#{$prefix}gray-800),
276
- $focus-text-color: color-contrast-var(map-get($all-colors, gray-800)),
277
- $active-bg-color: var(--#{$prefix}gray-700),
278
- $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
279
- $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
280
- );
281
- @include df-button-link-variant-variables(
282
- "dark",
283
- $default-color: var(--#{$prefix}gray-900),
284
- $hover-text-color: var(--#{$prefix}gray-800),
285
- $focus-text-color: var(--#{$prefix}gray-800),
286
- $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
287
- $active-bg-color: var(--#{$prefix}gray-700),
288
- $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
289
- );
290
-
291
- } @else if $color == "secondary" {
292
- @include df-button-variant-variables(
293
- "secondary",
294
- $default-color: var(--#{$prefix}secondary-50),
295
- $default-text-color: var(--#{$prefix}secondary-700),
296
- $hover-color: var(--#{$prefix}secondary-100),
297
- $hover-text-color: var(--#{$prefix}secondary-700),
298
- $focus-color: var(--#{$prefix}secondary-100),
299
- $focus-text-color: var(--#{$prefix}secondary-700),
300
- $active-color: var(--#{$prefix}secondary-100),
301
- $active-text-color: var(--#{$prefix}secondary-700),
302
- $focus-shadow-rgb: var(--#{$prefix}secondary-100-rgb),
303
- );
304
- @include df-button-link-variant-variables(
305
- "secondary",
306
- $active-bg-color: var(--#{$prefix}secondary-100),
307
- );
308
- } @else {
309
- @include df-button-variant-variables($color);
310
- @include df-button-outline-variant-variables($color);
311
- @include df-button-link-variant-variables($color);
224
+ @if not map-has-key($theme-colors-extra, $color) {
225
+ @if $color == "light" {
226
+ @include df-button-variant-variables(
227
+ "light",
228
+ $default-color: var(--#{$prefix}gray-25),
229
+ $default-text-color: color-contrast-var(map-get($all-colors, gray-100)),
230
+ $hover-color: var(--#{$prefix}gray-50),
231
+ $hover-text-color: color-contrast-var(map-get($all-colors, gray-200)),
232
+ $focus-color: var(--#{$prefix}gray-200),
233
+ $focus-text-color: color-contrast-var(map-get($all-colors, gray-200)),
234
+ $active-color: var(--#{$prefix}gray-300),
235
+ $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
236
+ $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
237
+ );
238
+ @include df-button-outline-variant-variables(
239
+ "light",
240
+ $default-color: var(--#{$prefix}gray-100),
241
+ $hover-color: var(--#{$prefix}gray-200),
242
+ $focus-color: var(--#{$prefix}gray-200),
243
+ $active-color: var(--#{$prefix}gray-300),
244
+ $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
245
+ );
246
+ @include df-button-link-variant-variables(
247
+ "light",
248
+ $default-color: var(--#{$prefix}gray-100),
249
+ $hover-text-color: var(--#{$prefix}gray-200),
250
+ $focus-text-color: var(--#{$prefix}gray-200),
251
+ $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
252
+ $active-bg-color: var(--#{$prefix}gray-300),
253
+ $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
254
+ );
255
+ } @else if $color == "dark" {
256
+ @include df-button-variant-variables(
257
+ "dark",
258
+ $default-color: var(--#{$prefix}gray-900),
259
+ $default-text-color: color-contrast-var(map-get($all-colors, gray-900)),
260
+ $hover-color: var(--#{$prefix}gray-800),
261
+ $hover-text-color: color-contrast-var(map-get($all-colors, gray-800)),
262
+ $focus-color: var(--#{$prefix}gray-800),
263
+ $focus-text-color: color-contrast-var(map-get($all-colors, gray-800)),
264
+ $active-color: var(--#{$prefix}gray-700),
265
+ $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
266
+ $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
267
+ );
268
+ @include df-button-outline-variant-variables(
269
+ "dark",
270
+ $default-color: var(--#{$prefix}gray-900),
271
+ $hover-color: var(--#{$prefix}gray-800),
272
+ $focus-color: var(--#{$prefix}gray-800),
273
+ $active-color: var(--#{$prefix}gray-700),
274
+ $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
275
+ );
276
+ @include df-button-link-variant-variables(
277
+ "dark",
278
+ $default-color: var(--#{$prefix}gray-900),
279
+ $hover-text-color: var(--#{$prefix}gray-800),
280
+ $focus-text-color: var(--#{$prefix}gray-800),
281
+ $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
282
+ $active-bg-color: var(--#{$prefix}gray-700),
283
+ $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
284
+ );
285
+
286
+ } @else if $color == "secondary" {
287
+ @include df-button-variant-variables(
288
+ "secondary",
289
+ $default-color: var(--#{$prefix}secondary-50),
290
+ $default-text-color: var(--#{$prefix}secondary-700),
291
+ $hover-color: var(--#{$prefix}secondary-100),
292
+ $hover-text-color: var(--#{$prefix}secondary-700),
293
+ $focus-color: var(--#{$prefix}secondary-100),
294
+ $focus-text-color: var(--#{$prefix}secondary-700),
295
+ $active-color: var(--#{$prefix}secondary-100),
296
+ $active-text-color: var(--#{$prefix}secondary-700),
297
+ $focus-shadow-rgb: var(--#{$prefix}secondary-100-rgb),
298
+ );
299
+ @include df-button-outline-variant-variables(
300
+ "secondary",
301
+ $default-color: var(--#{$prefix}secondary-500),
302
+ $default-border-color: var(--#{$prefix}secondary-200),
303
+ $hover-color: var(--#{$prefix}secondary-700),
304
+ $hover-border-color: var(--#{$prefix}secondary-400),
305
+ $focus-color: var(--#{$prefix}secondary-700),
306
+ $active-color: var(--#{$prefix}secondary-700),
307
+ $active-border-color: var(--#{$prefix}secondary-600),
308
+ );
309
+ @include df-button-link-variant-variables(
310
+ "secondary",
311
+ $active-bg-color: var(--#{$prefix}secondary-100),
312
+ );
313
+ } @else {
314
+ @include df-button-variant-variables($color);
315
+ @include df-button-outline-variant-variables($color);
316
+ @include df-button-link-variant-variables($color);
317
+ }
312
318
  }
313
319
  }
314
320
 
package/dist/types/components/DBarChart/DBarChart.d.ts DELETED
@@ -1,9 +0,0 @@
1
- type DBarChartProps = {
2
- data: {
3
- name: string;
4
- value: number;
5
- }[];
6
- barColor?: string;
7
- };
8
- export default function DBarChart({ data, barColor, }: DBarChartProps): import("react/jsx-runtime").JSX.Element;
9
- export {};
package/dist/types/components/DMinimalLineChart/DMinimalLineChart.d.ts DELETED
@@ -1,9 +0,0 @@
1
- type DMinimalLineChartProps = {
2
- data: {
3
- time: string;
4
- value: number;
5
- }[];
6
- lineColor?: string;
7
- };
8
- export default function DMinimalLineChart({ data, lineColor, }: DMinimalLineChartProps): import("react/jsx-runtime").JSX.Element;
9
- export {};
package/dist/types/components/DMultiLineChart/DMultiLineChart.d.ts DELETED
@@ -1,9 +0,0 @@
1
- type DMultiLineChartProps = {
2
- data: unknown[];
3
- lineConfigs: {
4
- dataKey: string;
5
- color: string;
6
- }[];
7
- };
8
- export default function DMultiLineChart({ data, lineConfigs, }: DMultiLineChartProps): import("react/jsx-runtime").JSX.Element;
9
- export {};
package/dist/types/components/DPieChart/DPieChart.d.ts DELETED
@@ -1,9 +0,0 @@
1
- type DPieChartProps = {
2
- data: {
3
- name: string;
4
- value: number;
5
- color: string;
6
- }[];
7
- };
8
- export default function DPieChart({ data, }: DPieChartProps): import("react/jsx-runtime").JSX.Element;
9
- export {};
package/dist/types/components/DRadialBarChart/DRadialBarChart.d.ts DELETED
@@ -1,6 +0,0 @@
1
- type DRadialBarChartProps = {
2
- value: number;
3
- color?: string;
4
- };
5
- export default function DRadialBarChart({ value, color, }: DRadialBarChartProps): import("react/jsx-runtime").JSX.Element;
6
- export {};