@ardium-ui/ui 5.0.0-alpha.40 → 5.0.0-alpha.42

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 (39) hide show
  1. package/fesm2022/ardium-ui-ui.mjs +3 -3
  2. package/fesm2022/ardium-ui-ui.mjs.map +1 -1
  3. package/lib/star/rating-input/rating-input.component.d.ts +3 -2
  4. package/lib/star/rating-input/rating-input.defaults.d.ts +2 -2
  5. package/package.json +1 -1
  6. package/prebuilt-themes/default/buttons/button.css +1 -1
  7. package/prebuilt-themes/default/buttons/fab.css +1 -1
  8. package/prebuilt-themes/default/buttons/icon-button.css +6 -6
  9. package/prebuilt-themes/default/calendar.css +3 -3
  10. package/prebuilt-themes/default/inputs/autocomplete-input.css +11 -11
  11. package/prebuilt-themes/default/inputs/date-input.css +8 -8
  12. package/prebuilt-themes/default/inputs/file-input.css +11 -11
  13. package/prebuilt-themes/default/inputs/hex-input.css +9 -9
  14. package/prebuilt-themes/default/inputs/input.css +8 -8
  15. package/prebuilt-themes/default/inputs/number-input.css +8 -8
  16. package/prebuilt-themes/default/inputs/password-input.css +9 -9
  17. package/prebuilt-themes/default/inputs/search-bar.css +8 -8
  18. package/prebuilt-themes/default/segment.css +3 -3
  19. package/prebuilt-themes/default/select.css +13 -13
  20. package/prebuilt-themes/default/slider.css +7 -7
  21. package/prebuilt-themes/default/tabber.css +1 -1
  22. package/prebuilt-themes/default/table.css +8 -8
  23. package/themes/default/buttons/button.scss +1 -1
  24. package/themes/default/buttons/fab.scss +1 -1
  25. package/themes/default/buttons/icon-button.scss +6 -6
  26. package/themes/default/calendar.scss +3 -3
  27. package/themes/default/inputs/autocomplete-input.scss +11 -11
  28. package/themes/default/inputs/date-input.scss +8 -8
  29. package/themes/default/inputs/file-input.scss +11 -11
  30. package/themes/default/inputs/hex-input.scss +9 -9
  31. package/themes/default/inputs/input.scss +8 -8
  32. package/themes/default/inputs/number-input.scss +8 -8
  33. package/themes/default/inputs/password-input.scss +9 -9
  34. package/themes/default/inputs/search-bar.scss +8 -8
  35. package/themes/default/segment.scss +3 -3
  36. package/themes/default/select.scss +13 -13
  37. package/themes/default/slider.scss +7 -7
  38. package/themes/default/tabber.scss +1 -1
  39. package/themes/default/table.scss +8 -8
@@ -2,18 +2,18 @@
2
2
  @use '../../variables' as ARD;
3
3
 
4
4
  :root {
5
- --ard-date-input-height: var(--ard-form-field-height, 2.3125rem);
6
- --ard-date-input-height-compact: var(--ard-form-field-height-compact, 1.6875rem);
5
+ --ard-date-input-height: ;
6
+ --ard-date-input-height-compact: ;
7
7
  --ard-date-input-gap: 0.625rem;
8
- --ard-date-input-font-size: var(--ard-form-field-font-size, 1rem);
9
- --ard-date-input-font-size-compact: var(--ard-form-field-font-size-compact, 0.875rem);
8
+ --ard-date-input-font-size: ;
9
+ --ard-date-input-font-size-compact: ;
10
10
  --ard-date-input-line-height: 1.25;
11
11
  --ard-date-input-line-height-compact: 1;
12
12
  --ard-date-input-font-weight: 400;
13
- --ard-date-input-padding: var(--ard-form-field-padding, 0 0.375rem);
14
- --ard-date-input-padding-compact: var(--ard-form-field-padding-compact, 0 0.375rem);
15
- --ard-date-input-color: #{ARD.$text};
16
- --ard-date-input-placeholder-color: #{ARD.$text};
13
+ --ard-date-input-padding: ;
14
+ --ard-date-input-padding-compact: ;
15
+ --ard-date-input-color: ;
16
+ --ard-date-input-placeholder-color: ;
17
17
  --ard-date-input-placeholder-opacity: 60%;
18
18
 
19
19
  --ard-date-input-padding: 0 0 0 0.375rem;
@@ -5,18 +5,18 @@
5
5
  @use '../../variables' as ARD;
6
6
 
7
7
  :root {
8
- --ard-file-input-height: var(--ard-form-field-height, 2.3125rem);
9
- --ard-file-input-height-compact: var(--ard-form-field-height-compact, 1.6875rem);
8
+ --ard-file-input-height: ;
9
+ --ard-file-input-height-compact: ;
10
10
  --ard-file-input-gap: 0.625rem;
11
- --ard-file-input-font-size: var(--ard-form-field-font-size, 1rem);
12
- --ard-file-input-font-size-compact: var(--ard-form-field-font-size-compact, 0.875rem);
11
+ --ard-file-input-font-size: ;
12
+ --ard-file-input-font-size-compact: ;
13
13
  --ard-file-input-line-height: 1.25;
14
14
  --ard-file-input-line-height-compact: 1;
15
15
  --ard-file-input-font-weight: 400;
16
- --ard-file-input-padding: var(--ard-form-field-padding, 0 0.375rem);
17
- --ard-file-input-padding-compact: var(--ard-form-field-padding-compact, 0 0.375rem);
18
- --ard-file-input-color: #{ARD.$text};
19
- --ard-file-input-placeholder-color: #{ARD.$text};
16
+ --ard-file-input-padding: ;
17
+ --ard-file-input-padding-compact: ;
18
+ --ard-file-input-color: ;
19
+ --ard-file-input-placeholder-color: ;
20
20
  --ard-file-input-placeholder-opacity: 60%;
21
21
 
22
22
  --ard-file-input-min-width: 10rem;
@@ -32,10 +32,10 @@
32
32
  --ard-file-input-browse-button-border-radius: 9999px;
33
33
  --ard-file-input-browse-button-background: none;
34
34
  --ard-file-input-browse-button-padding: 0;
35
- --ard-file-input-browse-button-color: #{ARD.$text2};
36
- --ard-file-input-browse-button-color-error: #{ARD.$danger700};
35
+ --ard-file-input-browse-button-color: ;
36
+ --ard-file-input-browse-button-color-error: ;
37
37
  --ard-file-input-browse-button-overlay-offset: 0rem;
38
- --ard-file-input-browse-button-overlay-color: #{ARD.$overlay};
38
+ --ard-file-input-browse-button-overlay-color: ;
39
39
  --ard-file-input-browse-button-overlay-hover-opacity: 4%;
40
40
  --ard-file-input-browse-button-overlay-focus-opacity: 0;
41
41
  --ard-file-input-browse-button-overlay-active-opacity: 12%;
@@ -4,24 +4,24 @@
4
4
  @use '../../variables' as ARD;
5
5
 
6
6
  :root {
7
- --ard-hex-input-height: var(--ard-form-field-height, 2.3125rem);
8
- --ard-hex-input-height-compact: var(--ard-form-field-height-compact, 1.6875rem);
7
+ --ard-hex-input-height: ;
8
+ --ard-hex-input-height-compact: ;
9
9
  --ard-hex-input-gap: 0.625rem;
10
- --ard-hex-input-font-size: var(--ard-form-field-font-size, 1rem);
11
- --ard-hex-input-font-size-compact: var(--ard-form-field-font-size-compact, 0.875rem);
10
+ --ard-hex-input-font-size: ;
11
+ --ard-hex-input-font-size-compact: ;
12
12
  --ard-hex-input-line-height: 1.25;
13
13
  --ard-hex-input-line-height-compact: 1;
14
14
  --ard-hex-input-font-weight: 400;
15
- --ard-hex-input-padding: var(--ard-form-field-padding, 0 0.375rem);
16
- --ard-hex-input-padding-compact: var(--ard-form-field-padding-compact, 0 0.375rem);
17
- --ard-hex-input-color: #{ARD.$text};
18
- --ard-hex-input-placeholder-color: #{ARD.$text};
15
+ --ard-hex-input-padding: ;
16
+ --ard-hex-input-padding-compact: ;
17
+ --ard-hex-input-color: ;
18
+ --ard-hex-input-placeholder-color: ;
19
19
  --ard-hex-input-placeholder-opacity: 60%;
20
20
 
21
21
  --ard-hex-input-min-width: 10rem;
22
22
  --ard-hex-input-max-width: 100%;
23
23
  --ard-hex-input-hash-margin: 0 0 -0.5rem 0;
24
- --ard-hex-input-hash-color: #{ARD.$text};
24
+ --ard-hex-input-hash-color: ;
25
25
  --ard-hex-input-hash-opacity: 70%;
26
26
  }
27
27
 
@@ -4,18 +4,18 @@
4
4
  @use '../../variables' as ARD;
5
5
 
6
6
  :root {
7
- --ard-input-height: var(--ard-form-field-height, 2.3125rem);
8
- --ard-input-height-compact: var(--ard-form-field-height-compact, 1.6875rem);
7
+ --ard-input-height: ;
8
+ --ard-input-height-compact: ;
9
9
  --ard-input-gap: 0.625rem;
10
- --ard-input-font-size: var(--ard-form-field-font-size, 1rem);
11
- --ard-input-font-size-compact: var(--ard-form-field-font-size-compact, 0.875rem);
10
+ --ard-input-font-size: ;
11
+ --ard-input-font-size-compact: ;
12
12
  --ard-input-line-height: 1.25;
13
13
  --ard-input-line-height-compact: 1;
14
14
  --ard-input-font-weight: 400;
15
- --ard-input-padding: var(--ard-form-field-padding, 0 0.375rem);
16
- --ard-input-padding-compact: var(--ard-form-field-padding-compact, 0 0.375rem);
17
- --ard-input-color: #{ARD.$text};
18
- --ard-input-placeholder-color: #{ARD.$text};
15
+ --ard-input-padding: ;
16
+ --ard-input-padding-compact: ;
17
+ --ard-input-color: ;
18
+ --ard-input-placeholder-color: ;
19
19
  --ard-input-placeholder-opacity: 60%;
20
20
 
21
21
  --ard-input-min-width: 10rem;
@@ -3,18 +3,18 @@
3
3
  @use '../../variables' as ARD;
4
4
 
5
5
  :root {
6
- --ard-number-input-height: var(--ard-form-field-height, 2.3125rem);
7
- --ard-number-input-height-compact: var(--ard-form-field-height-compact, 1.6875rem);
6
+ --ard-number-input-height: ;
7
+ --ard-number-input-height-compact: ;
8
8
  --ard-number-input-gap: 0.625rem;
9
- --ard-number-input-font-size: var(--ard-form-field-font-size, 1rem);
10
- --ard-number-input-font-size-compact: var(--ard-form-field-font-size-compact, 0.875rem);
9
+ --ard-number-input-font-size: ;
10
+ --ard-number-input-font-size-compact: ;
11
11
  --ard-number-input-line-height: 1.25;
12
12
  --ard-number-input-line-height-compact: 1;
13
13
  --ard-number-input-font-weight: 400;
14
- --ard-number-input-padding: var(--ard-form-field-padding, 0 0.375rem);
15
- --ard-number-input-padding-compact: var(--ard-form-field-padding-compact, 0 0.375rem);
16
- --ard-number-input-color: #{ARD.$text};
17
- --ard-number-input-placeholder-color: #{ARD.$text};
14
+ --ard-number-input-padding: ;
15
+ --ard-number-input-padding-compact: ;
16
+ --ard-number-input-color: ;
17
+ --ard-number-input-placeholder-color: ;
18
18
  --ard-number-input-placeholder-opacity: 60%;
19
19
 
20
20
  --ard-number-input-width: 9.5rem;
@@ -4,18 +4,18 @@
4
4
  @use '../../variables' as ARD;
5
5
 
6
6
  :root {
7
- --ard-password-input-height: var(--ard-form-field-height, 2.3125rem);
8
- --ard-password-input-height-compact: var(--ard-form-field-height-compact, 1.6875rem);
7
+ --ard-password-input-height: ;
8
+ --ard-password-input-height-compact: ;
9
9
  --ard-password-input-gap: 0.625rem;
10
- --ard-password-input-font-size: var(--ard-form-field-font-size, 1rem);
11
- --ard-password-input-font-size-compact: var(--ard-form-field-font-size-compact, 0.875rem);
10
+ --ard-password-input-font-size: ;
11
+ --ard-password-input-font-size-compact: ;
12
12
  --ard-password-input-line-height: 1.25;
13
13
  --ard-password-input-line-height-compact: 1;
14
14
  --ard-password-input-font-weight: 400;
15
- --ard-password-input-padding: var(--ard-form-field-padding, 0 0.375rem);
16
- --ard-password-input-padding-compact: var(--ard-form-field-padding-compact, 0 0.375rem);
17
- --ard-password-input-color: #{ARD.$text};
18
- --ard-password-input-placeholder-color: #{ARD.$text};
15
+ --ard-password-input-padding: ;
16
+ --ard-password-input-padding-compact: ;
17
+ --ard-password-input-color: ;
18
+ --ard-password-input-placeholder-color: ;
19
19
  --ard-password-input-placeholder-opacity: 60%;
20
20
 
21
21
  --ard-password-input-min-width: 10rem;
@@ -27,7 +27,7 @@
27
27
  --ard-password-input-reveal-button-width: unset;
28
28
  --ard-password-input-reveal-button-aspect-ratio: 1;
29
29
  --ard-password-input-reveal-button-padding: 0;
30
- --ard-password-input-reveal-button-color: #{ARD.$text};
30
+ --ard-password-input-reveal-button-color: ;
31
31
  --ard-password-input-reveal-button-border-radius: 9999px;
32
32
  --ard-password-input-reveal-button-border: none;
33
33
  --ard-password-input-reveal-button-background: transparent;
@@ -4,18 +4,18 @@
4
4
  @use '../../variables' as ARD;
5
5
 
6
6
  :root {
7
- --ard-search-bar-height: var(--ard-form-field-height, 2.3125rem);
8
- --ard-search-bar-height-compact: var(--ard-form-field-height-compact, 1.6875rem);
7
+ --ard-search-bar-height: ;
8
+ --ard-search-bar-height-compact: ;
9
9
  --ard-search-bar-gap: 0.625rem;
10
- --ard-search-bar-font-size: var(--ard-form-field-font-size, 1rem);
11
- --ard-search-bar-font-size-compact: var(--ard-form-field-font-size-compact, 0.875rem);
10
+ --ard-search-bar-font-size: ;
11
+ --ard-search-bar-font-size-compact: ;
12
12
  --ard-search-bar-line-height: 1.25;
13
13
  --ard-search-bar-line-height-compact: 1;
14
14
  --ard-search-bar-font-weight: 400;
15
- --ard-search-bar-padding: var(--ard-form-field-padding, 0 0.375rem);
16
- --ard-search-bar-padding-compact: var(--ard-form-field-padding-compact, 0 0.375rem);
17
- --ard-search-bar-color: #{ARD.$text};
18
- --ard-search-bar-placeholder-color: #{ARD.$text};
15
+ --ard-search-bar-padding: ;
16
+ --ard-search-bar-padding-compact: ;
17
+ --ard-search-bar-color: ;
18
+ --ard-search-bar-placeholder-color: ;
19
19
  --ard-search-bar-placeholder-opacity: 60%;
20
20
 
21
21
  --ard-search-bar-min-width: 10rem;
@@ -5,8 +5,8 @@
5
5
  :root {
6
6
  --ard-segment-margin: 0;
7
7
  --ard-segment-padding: 0.15rem;
8
- --ard-segment-option-gap: var(--ard-segment-padding, 0.15rem);
9
- --ard-segment-font-family: var(--ard-font-family);
8
+ --ard-segment-option-gap: ;
9
+ --ard-segment-font-family: ;
10
10
  --ard-segment-font-size: 0.875rem;
11
11
  --ard-segment-font-size-compact: 0.75rem;
12
12
  --ard-segment-rounded-border-radius: 0.5rem;
@@ -21,7 +21,7 @@
21
21
  --ard-segment-option-active-bg-opacity: 12%;
22
22
  --ard-segment-option-active-keyboard-bg-opacity: 34%;
23
23
  --ard-segment-option-selected-bg-opacity: 16%;
24
- --ard-segment-border-color: #{ARD.$border-light};
24
+ --ard-segment-border-color: ;
25
25
  }
26
26
 
27
27
  .ard-segment-container {
@@ -3,8 +3,8 @@
3
3
  @use '../variables' as ARD;
4
4
 
5
5
  :root {
6
- --ard-select-height: var(--ard-form-field-height, 2.3125rem);
7
- --ard-select-height-compact: var(--ard-form-field-height-compact, 1.6875rem);
6
+ --ard-select-height: ;
7
+ --ard-select-height-compact: ;
8
8
  --ard-select-gap: 0.625rem;
9
9
  --ard-select-gap-compact: 0.5rem;
10
10
  --ard-select-controls-gap: 0.625rem;
@@ -12,12 +12,12 @@
12
12
  --ard-select-padding: 0 1em 0 0.375em;
13
13
  --ard-select-padding-compact: 0 0.625em 0 0.375em;
14
14
 
15
- --ard-select-font-size: var(--ard-form-field-font-size, 1rem);
16
- --ard-select-font-size-compact: var(--ard-form-field-font-size-compact, 0.875rem);
17
- --ard-select-text-color: var(--ard-text, rgba(0, 0, 0, 100%));
18
- --ard-select-placeholder-color: var(--ard-text3, rgba(0, 0, 0, 75%));
15
+ --ard-select-font-size: ;
16
+ --ard-select-font-size-compact: ;
17
+ --ard-select-text-color: ;
18
+ --ard-select-placeholder-color: ;
19
19
  --ard-select-search-min-width: 10ch;
20
- --ard-select-dropdown-arrow-color: var(--ard-detail, rgba(0, 0, 0, 60%));
20
+ --ard-select-dropdown-arrow-color: ;
21
21
  --ard-select-dropdown-arrow-active-transform: rotate(180deg);
22
22
  --ard-select-dropdown-arrow-transition: 0.2s ease-in-out;
23
23
 
@@ -28,8 +28,8 @@
28
28
  --ard-select-dropdown-max-width: max(25em, 100%);
29
29
  --ard-select-dropdown-min-width: 100%;
30
30
  --ard-select-dropdown-max-height: 15em;
31
- --ard-select-dropdown-font-size: var(--ard-select-font-size, var(--ard-form-field-font-size, 1rem));
32
- --ard-select-dropdown-font-size-compact: var(--ard-select-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
31
+ --ard-select-dropdown-font-size: ;
32
+ --ard-select-dropdown-font-size-compact: ;
33
33
  --ard-select-dropdown-padding: 0.375em 0.625em;
34
34
  --ard-select-dropdown-gap: 0;
35
35
 
@@ -39,11 +39,11 @@
39
39
  --ard-select-dropdown-optgroup-label-padding: 0.375em 0.625em 0.0625em 0.625em;
40
40
 
41
41
  --ard-select-dropdown-option-padding: 0.375em 0.625em;
42
- --ard-select-dropdown-option-text-color: var(--ard-text2, rgba(0, 0, 0, 87%));
43
- --ard-select-dropdown-option-highlighted-bg: var(--ard-darken-overlay-light, rgba(0, 0, 0, 5%));
42
+ --ard-select-dropdown-option-text-color: ;
43
+ --ard-select-dropdown-option-highlighted-bg: ;
44
44
  --ard-select-dropdown-option-selected-font-weight: 500;
45
- --ard-select-dropdown-option-selected-bg: var(--ard-darken-overlay-medium, rgba(0, 0, 0, 10%));
46
- --ard-select-dropdown-option-selected-highlighted-bg: var(--ard-darken-overlay-medium-strong, rgba(0, 0, 0, 13%));
45
+ --ard-select-dropdown-option-selected-bg: ;
46
+ --ard-select-dropdown-option-selected-highlighted-bg: ;
47
47
  --ard-select-dropdown-option-disabled-opacity: 50%;
48
48
 
49
49
  --ard-select-dropdown-add-custom-gap: 0.375rem;
@@ -4,22 +4,22 @@
4
4
  @use '../variables' as ARD;
5
5
 
6
6
  :root {
7
- --ard-slider-font-size: var(--ard-form-field-font-size, 1rem);
8
- --ard-slider-font-size-compact: var(--ard-form-field-font-size-compact, 0.875rem);
7
+ --ard-slider-font-size: ;
8
+ --ard-slider-font-size-compact: ;
9
9
  --ard-slider-width: 100%;
10
10
  --ard-slider-padding: 0 calc(var(--ard-slider-handle-size, 1.25em) / 2);
11
11
  --ard-slider-track-height: 0.25em;
12
- --ard-slider-track-color: var(--ard-cmpcl--bg-colored);
12
+ --ard-slider-track-color: ;
13
13
  --ard-slider-track-opacity: 20%;
14
14
  --ard-slider-track-border-radius: 9999px;
15
15
  --ard-slider-active-track-height: calc(100% + 0.125em);
16
- --ard-slider-active-color: var(--ard-cmpcl--bg-colored);
16
+ --ard-slider-active-color: ;
17
17
  --ard-slider-active-track-opacity: 100%;
18
18
  --ard-slider-value-tick-size: 0.125em;
19
19
  --ard-slider-value-tick-opacity: 30%;
20
20
  --ard-slider-track-hitbox-size: calc(var(--ard-slider-handle-size, 1.25em) / 2);
21
21
  --ard-slider-handle-size: 1.25em;
22
- --ard-slider-handle-bg: var(--ard-cmpcl--bg-colored);
22
+ --ard-slider-handle-bg: ;
23
23
  --ard-slider-handle-border: none;
24
24
  --ard-slider-handle-border-radius: 9999px;
25
25
  --ard-slider-handle-hitbox-size: 0.375em;
@@ -29,8 +29,8 @@
29
29
  --ard-slider-handle-overlay-active-opacity: 25%;
30
30
  --ard-slider-label-font-size: 0.875rem;
31
31
  --ard-slider-label-padding-top: 0.2em;
32
- --ard-slider-label-bg: #{ARD.$text3};
33
- --ard-slider-label-color: #{ARD.$text2-alt};
32
+ --ard-slider-label-bg: ;
33
+ --ard-slider-label-color: ;
34
34
  --ard-slider-label-height: 2em;
35
35
  --ard-slider-label-border: none;
36
36
  --ard-slider-label-border-radius: 0.375em;
@@ -11,7 +11,7 @@
11
11
  --ard-tabber-tab-gap: 0;
12
12
  --ard-tabber-tab-content-gap: 0.375rem;
13
13
  --ard-tabber-separator-border: 1px solid var(--ard-detail-ultralight, rgba(0, 0, 0, 12%));
14
- --ard-tabber-tab-overlay-color: var(--ard-bg-alt, black);
14
+ --ard-tabber-tab-overlay-color: ;
15
15
  --ard-tabber-tab-hover-opacity: 4%;
16
16
  --ard-tabber-tab-active-opacity: 12%;
17
17
  --ard-tabber-tab-focus-visible-opacity: 18%;
@@ -161,15 +161,15 @@
161
161
  }
162
162
 
163
163
  //! color
164
- --ard-_table-header-border: var(--ard-cmpcl--border);
165
- --ard-_table-header-border-light: var(--ard-cmpcl--border-light);
164
+ --ard-_table-header-border: ;
165
+ --ard-_table-header-border-light: ;
166
166
  --ard-_table-border: ARD.$border;
167
- --ard-_table-header-background: var(--ard-cmpcl--bg);
168
- --ard-_table-header-background-light: var(--ard-cmpcl--bg-header);
169
- --ard-_table-header-color: var(--ard-cmpcl--content);
170
- --ard-_table-header-color-on-bg: var(--ard-cmpcl--on-bg);
171
- --ard-_table-overlay: var(--ard-cmpcl--overlay-rgb);
172
- --ard-_table-overlay-colorless: var(--ard-overlay-rgb);
167
+ --ard-_table-header-background: ;
168
+ --ard-_table-header-background-light: ;
169
+ --ard-_table-header-color: ;
170
+ --ard-_table-header-color-on-bg: ;
171
+ --ard-_table-overlay: ;
172
+ --ard-_table-overlay-colorless: ;
173
173
 
174
174
  //! appearances
175
175
  &.ard-appearance-strong {