@mantine/core 8.0.0 → 8.0.2

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 (117) hide show
  1. package/cjs/components/AngleSlider/AngleSlider.cjs +22 -10
  2. package/cjs/components/AngleSlider/AngleSlider.cjs.map +1 -1
  3. package/cjs/components/Collapse/use-collapse.cjs +10 -2
  4. package/cjs/components/Collapse/use-collapse.cjs.map +1 -1
  5. package/cjs/components/FileButton/FileButton.cjs +2 -2
  6. package/cjs/components/FileButton/FileButton.cjs.map +1 -1
  7. package/cjs/components/List/List.cjs.map +1 -1
  8. package/cjs/components/Menu/MenuSub/MenuSub.cjs +1 -1
  9. package/cjs/components/Menu/MenuSub/MenuSub.cjs.map +1 -1
  10. package/cjs/components/MultiSelect/MultiSelect.cjs +0 -1
  11. package/cjs/components/MultiSelect/MultiSelect.cjs.map +1 -1
  12. package/cjs/components/PasswordInput/PasswordInput.cjs +9 -2
  13. package/cjs/components/PasswordInput/PasswordInput.cjs.map +1 -1
  14. package/cjs/components/Popover/Popover.cjs +2 -1
  15. package/cjs/components/Popover/Popover.cjs.map +1 -1
  16. package/cjs/components/Popover/use-popover.cjs +2 -2
  17. package/cjs/components/Popover/use-popover.cjs.map +1 -1
  18. package/cjs/components/ScrollArea/ScrollArea.cjs +1 -1
  19. package/cjs/components/ScrollArea/ScrollArea.cjs.map +1 -1
  20. package/cjs/components/Select/Select.cjs +2 -2
  21. package/cjs/components/Select/Select.cjs.map +1 -1
  22. package/cjs/components/Slider/Track/Track.cjs +1 -1
  23. package/cjs/components/Slider/Track/Track.cjs.map +1 -1
  24. package/cjs/components/Switch/Switch.cjs +1 -0
  25. package/cjs/components/Switch/Switch.cjs.map +1 -1
  26. package/cjs/components/Table/TableScrollContainer.cjs +2 -1
  27. package/cjs/components/Table/TableScrollContainer.cjs.map +1 -1
  28. package/cjs/components/Tabs/Tabs.module.css.cjs +1 -1
  29. package/cjs/components/Transition/use-transition.cjs +8 -4
  30. package/cjs/components/Transition/use-transition.cjs.map +1 -1
  31. package/cjs/core/MantineProvider/MantineCssVariables/default-css-variables-resolver.cjs +8 -2
  32. package/cjs/core/MantineProvider/MantineCssVariables/default-css-variables-resolver.cjs.map +1 -1
  33. package/cjs/core/utils/units-converters/rem.cjs +0 -3
  34. package/cjs/core/utils/units-converters/rem.cjs.map +1 -1
  35. package/esm/components/AngleSlider/AngleSlider.mjs +22 -10
  36. package/esm/components/AngleSlider/AngleSlider.mjs.map +1 -1
  37. package/esm/components/Collapse/use-collapse.mjs +7 -3
  38. package/esm/components/Collapse/use-collapse.mjs.map +1 -1
  39. package/esm/components/FileButton/FileButton.mjs +2 -2
  40. package/esm/components/FileButton/FileButton.mjs.map +1 -1
  41. package/esm/components/List/List.mjs.map +1 -1
  42. package/esm/components/Menu/MenuSub/MenuSub.mjs +1 -1
  43. package/esm/components/Menu/MenuSub/MenuSub.mjs.map +1 -1
  44. package/esm/components/MultiSelect/MultiSelect.mjs +0 -1
  45. package/esm/components/MultiSelect/MultiSelect.mjs.map +1 -1
  46. package/esm/components/PasswordInput/PasswordInput.mjs +9 -2
  47. package/esm/components/PasswordInput/PasswordInput.mjs.map +1 -1
  48. package/esm/components/Popover/Popover.mjs +2 -1
  49. package/esm/components/Popover/Popover.mjs.map +1 -1
  50. package/esm/components/Popover/use-popover.mjs +2 -2
  51. package/esm/components/Popover/use-popover.mjs.map +1 -1
  52. package/esm/components/ScrollArea/ScrollArea.mjs +1 -1
  53. package/esm/components/ScrollArea/ScrollArea.mjs.map +1 -1
  54. package/esm/components/Select/Select.mjs +2 -2
  55. package/esm/components/Select/Select.mjs.map +1 -1
  56. package/esm/components/Slider/Track/Track.mjs +1 -1
  57. package/esm/components/Slider/Track/Track.mjs.map +1 -1
  58. package/esm/components/Switch/Switch.mjs +1 -0
  59. package/esm/components/Switch/Switch.mjs.map +1 -1
  60. package/esm/components/Table/TableScrollContainer.mjs +2 -1
  61. package/esm/components/Table/TableScrollContainer.mjs.map +1 -1
  62. package/esm/components/Tabs/Tabs.module.css.mjs +1 -1
  63. package/esm/components/Transition/use-transition.mjs +8 -4
  64. package/esm/components/Transition/use-transition.mjs.map +1 -1
  65. package/esm/core/MantineProvider/MantineCssVariables/default-css-variables-resolver.mjs +8 -2
  66. package/esm/core/MantineProvider/MantineCssVariables/default-css-variables-resolver.mjs.map +1 -1
  67. package/esm/core/utils/units-converters/rem.mjs +0 -3
  68. package/esm/core/utils/units-converters/rem.mjs.map +1 -1
  69. package/lib/components/Collapse/use-collapse.d.ts +1 -0
  70. package/lib/components/List/List.d.ts +1 -1
  71. package/lib/components/Menu/MenuSub/MenuSub.d.ts +8 -0
  72. package/lib/components/Popover/use-popover.d.ts +2 -1
  73. package/lib/components/Table/TableScrollContainer.d.ts +3 -0
  74. package/lib/core/types.d.ts +1 -1
  75. package/package.json +2 -2
  76. package/styles/ActionIcon.css +2 -10
  77. package/styles/ActionIcon.layer.css +2 -10
  78. package/styles/AngleSlider.css +3 -4
  79. package/styles/AngleSlider.layer.css +3 -4
  80. package/styles/Button.css +2 -10
  81. package/styles/Button.layer.css +2 -10
  82. package/styles/Checkbox.css +5 -17
  83. package/styles/Checkbox.layer.css +5 -17
  84. package/styles/CheckboxIndicator.css +2 -10
  85. package/styles/CheckboxIndicator.layer.css +2 -10
  86. package/styles/Chip.css +2 -10
  87. package/styles/Chip.layer.css +2 -10
  88. package/styles/InlineInput.css +4 -7
  89. package/styles/InlineInput.layer.css +4 -7
  90. package/styles/Input.css +2 -10
  91. package/styles/Input.layer.css +2 -10
  92. package/styles/Menu.css +1 -1
  93. package/styles/Menu.layer.css +1 -1
  94. package/styles/ModalBase.css +1 -1
  95. package/styles/ModalBase.layer.css +1 -1
  96. package/styles/NumberInput.css +1 -8
  97. package/styles/NumberInput.layer.css +1 -8
  98. package/styles/Pill.css +2 -2
  99. package/styles/Pill.layer.css +2 -2
  100. package/styles/Radio.css +5 -17
  101. package/styles/Radio.layer.css +5 -17
  102. package/styles/RadioIndicator.css +5 -17
  103. package/styles/RadioIndicator.layer.css +5 -17
  104. package/styles/SegmentedControl.css +5 -18
  105. package/styles/SegmentedControl.layer.css +5 -18
  106. package/styles/Slider.css +8 -16
  107. package/styles/Slider.layer.css +8 -16
  108. package/styles/Stepper.css +21 -45
  109. package/styles/Stepper.layer.css +21 -45
  110. package/styles/Switch.css +3 -3
  111. package/styles/Switch.layer.css +3 -3
  112. package/styles/Tabs.css +5 -0
  113. package/styles/Tabs.layer.css +5 -0
  114. package/styles/default-css-variables.css +6 -0
  115. package/styles/default-css-variables.layer.css +6 -0
  116. package/styles.css +85 -206
  117. package/styles.layer.css +85 -206
@@ -26,6 +26,8 @@
26
26
  --input-padding-inline-end: var(--input-padding);
27
27
  --input-placeholder-color: var(--mantine-color-placeholder);
28
28
  --input-color: var(--mantine-color-text);
29
+ --input-disabled-bg: var(--mantine-color-disabled);
30
+ --input-disabled-color: var(--mantine-color-disabled-color);
29
31
 
30
32
  --input-left-section-size: var(--input-left-section-width, calc(var(--input-height) - calc(0.125rem * var(--mantine-scale))));
31
33
 
@@ -75,11 +77,6 @@
75
77
  --input-padding-inline-end: var(--input-right-section-size);
76
78
  }
77
79
 
78
- [data-mantine-color-scheme='light'] .m_6c018570 {
79
- --input-disabled-bg: var(--mantine-color-gray-1);
80
- --input-disabled-color: var(--mantine-color-gray-6);
81
- }
82
-
83
80
  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='default'] {
84
81
  --input-bd: var(--mantine-color-gray-4);
85
82
  --input-bg: var(--mantine-color-white);
@@ -98,11 +95,6 @@
98
95
  --input-bd-focus: transparent;
99
96
  }
100
97
 
101
- [data-mantine-color-scheme='dark'] .m_6c018570 {
102
- --input-disabled-bg: var(--mantine-color-dark-6);
103
- --input-disabled-color: var(--mantine-color-dark-2);
104
- }
105
-
106
98
  [data-mantine-color-scheme='dark'] .m_6c018570[data-variant='default'] {
107
99
  --input-bd: var(--mantine-color-dark-4);
108
100
  --input-bg: var(--mantine-color-dark-6);
package/styles/Menu.css CHANGED
@@ -36,7 +36,7 @@
36
36
  }
37
37
 
38
38
  .m_99ac2aa1:where([data-disabled], :disabled) {
39
- color: var(--mantine-color-dimmed);
39
+ color: var(--mantine-color-disabled-color);
40
40
  opacity: 0.6;
41
41
  cursor: not-allowed;
42
42
  }
@@ -36,7 +36,7 @@
36
36
  }
37
37
 
38
38
  .m_99ac2aa1:where([data-disabled], :disabled) {
39
- color: var(--mantine-color-dimmed);
39
+ color: var(--mantine-color-disabled-color);
40
40
  opacity: 0.6;
41
41
  cursor: not-allowed;
42
42
  }
@@ -38,7 +38,7 @@
38
38
  z-index: 1001;
39
39
  }
40
40
 
41
- [data-offset-scrollbars] .m_fd1ab0aa:has([data-mantine-scrollbar][data-state='visible']) .m_b5489c3c {
41
+ [data-offset-scrollbars] .m_fd1ab0aa:has([data-mantine-scrollbar]) .m_b5489c3c {
42
42
  padding-inline-end: calc(var(--mb-padding, var(--mantine-spacing-md)) + calc(0.3125rem * var(--mantine-scale)));
43
43
  }
44
44
 
@@ -38,7 +38,7 @@
38
38
  z-index: 1001;
39
39
  }
40
40
 
41
- [data-offset-scrollbars] .m_fd1ab0aa:has([data-mantine-scrollbar][data-state='visible']) .m_b5489c3c {
41
+ [data-offset-scrollbars] .m_fd1ab0aa:has([data-mantine-scrollbar]) .m_b5489c3c {
42
42
  padding-inline-end: calc(var(--mb-padding, var(--mantine-spacing-md)) + calc(0.3125rem * var(--mantine-scale)));
43
43
  }
44
44
 
@@ -43,16 +43,9 @@
43
43
  background-color: transparent;
44
44
  cursor: not-allowed;
45
45
  opacity: 0.6;
46
+ color: var(--mantine-color-disabled-color);
46
47
  }
47
48
 
48
- :where([data-mantine-color-scheme='light']) .m_80b4b171:where(:disabled) {
49
- color: var(--mantine-color-gray-4);
50
- }
51
-
52
- :where([data-mantine-color-scheme='dark']) .m_80b4b171:where(:disabled) {
53
- color: var(--mantine-color-dark-3);
54
- }
55
-
56
49
  .m_e2f5cd4e[data-error] :where(.m_80b4b171) {
57
50
  color: var(--mantine-color-error);
58
51
  }
@@ -43,16 +43,9 @@
43
43
  background-color: transparent;
44
44
  cursor: not-allowed;
45
45
  opacity: 0.6;
46
+ color: var(--mantine-color-disabled-color);
46
47
  }
47
48
 
48
- :where([data-mantine-color-scheme='light']) .m_80b4b171:where(:disabled) {
49
- color: var(--mantine-color-gray-4);
50
- }
51
-
52
- :where([data-mantine-color-scheme='dark']) .m_80b4b171:where(:disabled) {
53
- color: var(--mantine-color-dark-3);
54
- }
55
-
56
49
  .m_e2f5cd4e[data-error] :where(.m_80b4b171) {
57
50
  color: var(--mantine-color-error);
58
51
  }
package/styles/Pill.css CHANGED
@@ -50,7 +50,7 @@
50
50
  }
51
51
 
52
52
  :where([data-mantine-color-scheme='light']) .m_44da308b:where([data-disabled], :has(button:disabled)) {
53
- background-color: var(--mantine-color-gray-3);
53
+ background-color: var(--mantine-color-disabled);
54
54
  }
55
55
 
56
56
  :where([data-mantine-color-scheme='light']) .m_e3a01f8 {
@@ -58,7 +58,7 @@
58
58
  }
59
59
 
60
60
  :where([data-mantine-color-scheme='light']) .m_e3a01f8:where([data-disabled], :has(button:disabled)) {
61
- background-color: var(--mantine-color-gray-3);
61
+ background-color: var(--mantine-color-disabled);
62
62
  }
63
63
 
64
64
  .m_1e0e6180 {
@@ -50,7 +50,7 @@
50
50
  }
51
51
 
52
52
  :where([data-mantine-color-scheme='light']) .m_44da308b:where([data-disabled], :has(button:disabled)) {
53
- background-color: var(--mantine-color-gray-3);
53
+ background-color: var(--mantine-color-disabled);
54
54
  }
55
55
 
56
56
  :where([data-mantine-color-scheme='light']) .m_e3a01f8 {
@@ -58,7 +58,7 @@
58
58
  }
59
59
 
60
60
  :where([data-mantine-color-scheme='light']) .m_e3a01f8:where([data-disabled], :has(button:disabled)) {
61
- background-color: var(--mantine-color-gray-3);
61
+ background-color: var(--mantine-color-disabled);
62
62
  }
63
63
 
64
64
  .m_1e0e6180 {
package/styles/Radio.css CHANGED
@@ -81,25 +81,13 @@
81
81
 
82
82
  .m_8a3dbb89:disabled {
83
83
  cursor: not-allowed;
84
+ background-color: var(--mantine-color-disabled);
85
+ border-color: var(--mantine-color-disabled-border);
84
86
  }
85
87
 
86
- :where([data-mantine-color-scheme='light']) .m_8a3dbb89:disabled {
87
- background-color: var(--mantine-color-gray-1);
88
- border-color: var(--mantine-color-gray-2);
89
- }
90
-
91
- :where([data-mantine-color-scheme='light']) .m_8a3dbb89:disabled + .m_f3ed6b2b {
92
- --radio-icon-color: var(--mantine-color-gray-3);
93
- }
94
-
95
- :where([data-mantine-color-scheme='dark']) .m_8a3dbb89:disabled {
96
- background-color: var(--mantine-color-dark-5);
97
- border-color: var(--mantine-color-dark-4);
98
- }
99
-
100
- :where([data-mantine-color-scheme='dark']) .m_8a3dbb89:disabled + .m_f3ed6b2b {
101
- --radio-icon-color: var(--mantine-color-dark-7);
102
- }
88
+ .m_8a3dbb89:disabled + .m_f3ed6b2b {
89
+ --radio-icon-color: var(--mantine-color-disabled-color);
90
+ }
103
91
 
104
92
  .m_8a3dbb89:where([data-error]) {
105
93
  border-color: var(--mantine-color-error);
@@ -81,25 +81,13 @@
81
81
 
82
82
  .m_8a3dbb89:disabled {
83
83
  cursor: not-allowed;
84
+ background-color: var(--mantine-color-disabled);
85
+ border-color: var(--mantine-color-disabled-border);
84
86
  }
85
87
 
86
- :where([data-mantine-color-scheme='light']) .m_8a3dbb89:disabled {
87
- background-color: var(--mantine-color-gray-1);
88
- border-color: var(--mantine-color-gray-2);
89
- }
90
-
91
- :where([data-mantine-color-scheme='light']) .m_8a3dbb89:disabled + .m_f3ed6b2b {
92
- --radio-icon-color: var(--mantine-color-gray-3);
93
- }
94
-
95
- :where([data-mantine-color-scheme='dark']) .m_8a3dbb89:disabled {
96
- background-color: var(--mantine-color-dark-5);
97
- border-color: var(--mantine-color-dark-4);
98
- }
99
-
100
- :where([data-mantine-color-scheme='dark']) .m_8a3dbb89:disabled + .m_f3ed6b2b {
101
- --radio-icon-color: var(--mantine-color-dark-7);
102
- }
88
+ .m_8a3dbb89:disabled + .m_f3ed6b2b {
89
+ --radio-icon-color: var(--mantine-color-disabled-color);
90
+ }
103
91
 
104
92
  .m_8a3dbb89:where([data-error]) {
105
93
  border-color: var(--mantine-color-error);
@@ -57,25 +57,13 @@
57
57
 
58
58
  .m_717d7ff6[data-disabled] {
59
59
  cursor: not-allowed;
60
+ background-color: var(--mantine-color-disabled);
61
+ border-color: var(--mantine-color-disabled-border);
60
62
  }
61
63
 
62
- :where([data-mantine-color-scheme='light']) .m_717d7ff6[data-disabled] {
63
- background-color: var(--mantine-color-gray-2);
64
- border-color: var(--mantine-color-gray-3);
65
- }
66
-
67
- :where([data-mantine-color-scheme='dark']) .m_717d7ff6[data-disabled] {
68
- background-color: var(--mantine-color-dark-6);
69
- border-color: var(--mantine-color-dark-6);
70
- }
71
-
72
- [data-mantine-color-scheme='light'] .m_717d7ff6[data-disabled][data-checked] > .m_3e4da632 {
73
- color: var(--mantine-color-gray-5);
74
- }
75
-
76
- [data-mantine-color-scheme='dark'] .m_717d7ff6[data-disabled][data-checked] > .m_3e4da632 {
77
- color: var(--mantine-color-dark-3);
78
- }
64
+ .m_717d7ff6[data-disabled][data-checked] > .m_3e4da632 {
65
+ color: var(--mantine-color-disabled-color);
66
+ }
79
67
 
80
68
  .m_2980836c[data-indeterminate]:not([data-disabled]),
81
69
  .m_2980836c[data-checked]:not([data-disabled]) {
@@ -57,25 +57,13 @@
57
57
 
58
58
  .m_717d7ff6[data-disabled] {
59
59
  cursor: not-allowed;
60
+ background-color: var(--mantine-color-disabled);
61
+ border-color: var(--mantine-color-disabled-border);
60
62
  }
61
63
 
62
- :where([data-mantine-color-scheme='light']) .m_717d7ff6[data-disabled] {
63
- background-color: var(--mantine-color-gray-2);
64
- border-color: var(--mantine-color-gray-3);
65
- }
66
-
67
- :where([data-mantine-color-scheme='dark']) .m_717d7ff6[data-disabled] {
68
- background-color: var(--mantine-color-dark-6);
69
- border-color: var(--mantine-color-dark-6);
70
- }
71
-
72
- [data-mantine-color-scheme='light'] .m_717d7ff6[data-disabled][data-checked] > .m_3e4da632 {
73
- color: var(--mantine-color-gray-5);
74
- }
75
-
76
- [data-mantine-color-scheme='dark'] .m_717d7ff6[data-disabled][data-checked] > .m_3e4da632 {
77
- color: var(--mantine-color-dark-3);
78
- }
64
+ .m_717d7ff6[data-disabled][data-checked] > .m_3e4da632 {
65
+ color: var(--mantine-color-disabled-color);
66
+ }
79
67
 
80
68
  .m_2980836c[data-indeterminate]:not([data-disabled]),
81
69
  .m_2980836c[data-checked]:not([data-disabled]) {
@@ -92,16 +92,9 @@
92
92
  fieldset:disabled .m_1738fcb2,
93
93
  .m_1738fcb2:where([data-disabled]) {
94
94
  cursor: not-allowed;
95
+ color: var(--mantine-color-disabled-color);
95
96
  }
96
97
 
97
- :where([data-mantine-color-scheme='light']) fieldset:disabled .m_1738fcb2, :where([data-mantine-color-scheme='light']) .m_1738fcb2:where([data-disabled]) {
98
- color: var(--mantine-color-gray-5);
99
- }
100
-
101
- :where([data-mantine-color-scheme='dark']) fieldset:disabled .m_1738fcb2, :where([data-mantine-color-scheme='dark']) .m_1738fcb2:where([data-disabled]) {
102
- color: var(--mantine-color-dark-3);
103
- }
104
-
105
98
  :where([data-mantine-color-scheme='light']) .m_1738fcb2:where([data-active]) {
106
99
  color: var(--sc-label-color, var(--mantine-color-black));
107
100
  }
@@ -153,22 +146,16 @@ fieldset:disabled .m_1738fcb2,
153
146
  }
154
147
 
155
148
  @media (hover: hover) {
156
- :where([data-mantine-color-scheme='light']) fieldset:disabled .m_1738fcb2:hover {
157
- color: var(--mantine-color-gray-5) !important;
158
- }
159
149
 
160
- :where([data-mantine-color-scheme='dark']) fieldset:disabled .m_1738fcb2:hover {
161
- color: var(--mantine-color-dark-3) !important;
150
+ fieldset:disabled .m_1738fcb2:hover {
151
+ color: var(--mantine-color-disabled-color) !important;
162
152
  }
163
153
  }
164
154
 
165
155
  @media (hover: none) {
166
- :where([data-mantine-color-scheme='light']) fieldset:disabled .m_1738fcb2:active {
167
- color: var(--mantine-color-gray-5) !important;
168
- }
169
156
 
170
- :where([data-mantine-color-scheme='dark']) fieldset:disabled .m_1738fcb2:active {
171
- color: var(--mantine-color-dark-3) !important;
157
+ fieldset:disabled .m_1738fcb2:active {
158
+ color: var(--mantine-color-disabled-color) !important;
172
159
  }
173
160
  }
174
161
 
@@ -92,16 +92,9 @@
92
92
  fieldset:disabled .m_1738fcb2,
93
93
  .m_1738fcb2:where([data-disabled]) {
94
94
  cursor: not-allowed;
95
+ color: var(--mantine-color-disabled-color);
95
96
  }
96
97
 
97
- :where([data-mantine-color-scheme='light']) fieldset:disabled .m_1738fcb2, :where([data-mantine-color-scheme='light']) .m_1738fcb2:where([data-disabled]) {
98
- color: var(--mantine-color-gray-5);
99
- }
100
-
101
- :where([data-mantine-color-scheme='dark']) fieldset:disabled .m_1738fcb2, :where([data-mantine-color-scheme='dark']) .m_1738fcb2:where([data-disabled]) {
102
- color: var(--mantine-color-dark-3);
103
- }
104
-
105
98
  :where([data-mantine-color-scheme='light']) .m_1738fcb2:where([data-active]) {
106
99
  color: var(--sc-label-color, var(--mantine-color-black));
107
100
  }
@@ -153,22 +146,16 @@ fieldset:disabled .m_1738fcb2,
153
146
  }
154
147
 
155
148
  @media (hover: hover) {
156
- :where([data-mantine-color-scheme='light']) fieldset:disabled .m_1738fcb2:hover {
157
- color: var(--mantine-color-gray-5) !important;
158
- }
159
149
 
160
- :where([data-mantine-color-scheme='dark']) fieldset:disabled .m_1738fcb2:hover {
161
- color: var(--mantine-color-dark-3) !important;
150
+ fieldset:disabled .m_1738fcb2:hover {
151
+ color: var(--mantine-color-disabled-color) !important;
162
152
  }
163
153
  }
164
154
 
165
155
  @media (hover: none) {
166
- :where([data-mantine-color-scheme='light']) fieldset:disabled .m_1738fcb2:active {
167
- color: var(--mantine-color-gray-5) !important;
168
- }
169
156
 
170
- :where([data-mantine-color-scheme='dark']) fieldset:disabled .m_1738fcb2:active {
171
- color: var(--mantine-color-dark-3) !important;
157
+ fieldset:disabled .m_1738fcb2:active {
158
+ color: var(--mantine-color-disabled-color) !important;
172
159
  }
173
160
  }
174
161
 
package/styles/Slider.css CHANGED
@@ -8,6 +8,7 @@
8
8
  --slider-size: var(--slider-size-md);
9
9
  --slider-radius: 1000px;
10
10
  --slider-color: var(--mantine-primary-color-filled);
11
+ --slider-track-disabled-bg: var(--mantine-color-disabled);
11
12
 
12
13
  -webkit-tap-highlight-color: transparent;
13
14
  outline: none;
@@ -22,12 +23,10 @@
22
23
 
23
24
  [data-mantine-color-scheme='light'] .m_dd36362e {
24
25
  --slider-track-bg: var(--mantine-color-gray-2);
25
- --slider-track-disabled-bg: var(--mantine-color-gray-4);
26
26
  }
27
27
 
28
28
  [data-mantine-color-scheme='dark'] .m_dd36362e {
29
29
  --slider-track-bg: var(--mantine-color-dark-4);
30
- --slider-track-disabled-bg: var(--mantine-color-dark-3);
31
30
  }
32
31
 
33
32
  .m_c9357328 {
@@ -154,13 +153,10 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
154
153
  background-color: var(--slider-track-bg);
155
154
  }
156
155
 
157
- :where([data-mantine-color-scheme='light']) fieldset:disabled .m_38aeed47:where(:not([data-inverted])), :where([data-mantine-color-scheme='light']) .m_38aeed47:where([data-disabled]:not([data-inverted])) {
158
- background-color: var(--mantine-color-gray-4);
159
- }
160
-
161
- :where([data-mantine-color-scheme='dark']) fieldset:disabled .m_38aeed47:where(:not([data-inverted])), :where([data-mantine-color-scheme='dark']) .m_38aeed47:where([data-disabled]:not([data-inverted])) {
162
- background-color: var(--mantine-color-dark-3);
163
- }
156
+ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
157
+ .m_38aeed47:where([data-disabled]:not([data-inverted])) {
158
+ background-color: var(--mantine-color-disabled-color);
159
+ }
164
160
 
165
161
  .m_b7b0423a {
166
162
  position: absolute;
@@ -192,13 +188,9 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
192
188
  border-color: var(--slider-color);
193
189
  }
194
190
 
195
- :where([data-mantine-color-scheme='light']) .m_dd33bc19:where([data-filled]):where([data-disabled]) {
196
- border-color: var(--mantine-color-gray-4);
197
- }
198
-
199
- :where([data-mantine-color-scheme='dark']) .m_dd33bc19:where([data-filled]):where([data-disabled]) {
200
- border-color: var(--mantine-color-dark-3);
201
- }
191
+ .m_dd33bc19:where([data-filled]):where([data-disabled]) {
192
+ border-color: var(--mantine-color-disabled-border);
193
+ }
202
194
 
203
195
  .m_68c77a5b {
204
196
  transform: translate(calc(-50% + var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));
@@ -8,6 +8,7 @@
8
8
  --slider-size: var(--slider-size-md);
9
9
  --slider-radius: 1000px;
10
10
  --slider-color: var(--mantine-primary-color-filled);
11
+ --slider-track-disabled-bg: var(--mantine-color-disabled);
11
12
 
12
13
  -webkit-tap-highlight-color: transparent;
13
14
  outline: none;
@@ -22,12 +23,10 @@
22
23
 
23
24
  [data-mantine-color-scheme='light'] .m_dd36362e {
24
25
  --slider-track-bg: var(--mantine-color-gray-2);
25
- --slider-track-disabled-bg: var(--mantine-color-gray-4);
26
26
  }
27
27
 
28
28
  [data-mantine-color-scheme='dark'] .m_dd36362e {
29
29
  --slider-track-bg: var(--mantine-color-dark-4);
30
- --slider-track-disabled-bg: var(--mantine-color-dark-3);
31
30
  }
32
31
 
33
32
  .m_c9357328 {
@@ -154,13 +153,10 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
154
153
  background-color: var(--slider-track-bg);
155
154
  }
156
155
 
157
- :where([data-mantine-color-scheme='light']) fieldset:disabled .m_38aeed47:where(:not([data-inverted])), :where([data-mantine-color-scheme='light']) .m_38aeed47:where([data-disabled]:not([data-inverted])) {
158
- background-color: var(--mantine-color-gray-4);
159
- }
160
-
161
- :where([data-mantine-color-scheme='dark']) fieldset:disabled .m_38aeed47:where(:not([data-inverted])), :where([data-mantine-color-scheme='dark']) .m_38aeed47:where([data-disabled]:not([data-inverted])) {
162
- background-color: var(--mantine-color-dark-3);
163
- }
156
+ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
157
+ .m_38aeed47:where([data-disabled]:not([data-inverted])) {
158
+ background-color: var(--mantine-color-disabled-color);
159
+ }
164
160
 
165
161
  .m_b7b0423a {
166
162
  position: absolute;
@@ -192,13 +188,9 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
192
188
  border-color: var(--slider-color);
193
189
  }
194
190
 
195
- :where([data-mantine-color-scheme='light']) .m_dd33bc19:where([data-filled]):where([data-disabled]) {
196
- border-color: var(--mantine-color-gray-4);
197
- }
198
-
199
- :where([data-mantine-color-scheme='dark']) .m_dd33bc19:where([data-filled]):where([data-disabled]) {
200
- border-color: var(--mantine-color-dark-3);
201
- }
191
+ .m_dd33bc19:where([data-filled]):where([data-disabled]) {
192
+ border-color: var(--mantine-color-disabled-border);
193
+ }
202
194
 
203
195
  .m_68c77a5b {
204
196
  transform: translate(calc(-50% + var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));
@@ -11,6 +11,15 @@
11
11
  --stepper-spacing: var(--mantine-spacing-md);
12
12
  --stepper-radius: 1000px;
13
13
  --stepper-fz: var(--mantine-font-size-md);
14
+ --stepper-outline-thickness: 2px;
15
+ }
16
+
17
+ [data-mantine-color-scheme='light'] .m_cbb4ea7e {
18
+ --stepper-outline-color: var(--mantine-color-gray-2);
19
+ }
20
+
21
+ [data-mantine-color-scheme='dark'] .m_cbb4ea7e {
22
+ --stepper-outline-color: var(--mantine-color-dark-5);
14
23
  }
15
24
 
16
25
  .m_aaf89d0b {
@@ -41,43 +50,17 @@
41
50
  }
42
51
 
43
52
  .m_2a371ac9 {
44
- --separator-offset: calc(var(--stepper-icon-size) / 2 - calc(0.0625rem * var(--mantine-scale)));
45
-
46
53
  transition: background-color 150ms ease;
47
54
  flex: 1;
48
- }
49
-
50
- :where([data-mantine-color-scheme='light']) .m_2a371ac9 {
51
- background-color: var(--mantine-color-gray-2);
52
- }
53
-
54
- :where([data-mantine-color-scheme='dark']) .m_2a371ac9 {
55
- background-color: var(--mantine-color-dark-2);
55
+ height: var(--stepper-outline-thickness);
56
+ margin-inline: var(--mantine-spacing-md);
57
+ background-color: var(--stepper-outline-color);
56
58
  }
57
59
 
58
60
  .m_2a371ac9:where([data-active]) {
59
61
  background-color: var(--stepper-color);
60
62
  }
61
63
 
62
- .m_2a371ac9:where([data-orientation='horizontal']) {
63
- height: 2px;
64
- margin-inline: var(--mantine-spacing-md);
65
- }
66
-
67
- .m_2a371ac9:where([data-orientation='vertical']) {
68
- width: 2px;
69
- margin-top: calc(var(--mantine-spacing-xs) / 2);
70
- margin-bottom: calc(var(--mantine-spacing-xs) - calc(0.125rem * var(--mantine-scale)));
71
- }
72
-
73
- .m_2a371ac9:where([data-orientation='vertical']):where([data-icon-position='left']) {
74
- margin-inline-start: var(--separator-offset);
75
- }
76
-
77
- .m_2a371ac9:where([data-orientation='vertical']):where([data-icon-position='right']) {
78
- margin-inline-end: var(--separator-offset);
79
- }
80
-
81
64
  .m_78da155d {
82
65
  padding-top: var(--stepper-content-padding);
83
66
  }
@@ -118,10 +101,14 @@
118
101
  margin-top: 0;
119
102
  }
120
103
 
121
- .m_833edb7e:where(:last-of-type) .m_6496b3f3 {
122
- display: none;
104
+ .m_833edb7e:where(:last-of-type) {
105
+ min-height: auto;
123
106
  }
124
107
 
108
+ .m_833edb7e:where(:last-of-type) .m_6496b3f3 {
109
+ display: none;
110
+ }
111
+
125
112
  .m_818e70b {
126
113
  position: relative;
127
114
  }
@@ -131,15 +118,7 @@
131
118
  inset-inline-start: calc(var(--stepper-icon-size) / 2);
132
119
  height: 100vh;
133
120
  position: absolute;
134
- border-inline-start: 2px solid;
135
- }
136
-
137
- :where([data-mantine-color-scheme='light']) .m_6496b3f3 {
138
- border-color: var(--mantine-color-gray-1);
139
- }
140
-
141
- :where([data-mantine-color-scheme='dark']) .m_6496b3f3 {
142
- border-color: var(--mantine-color-dark-5);
121
+ border-inline-start: var(--stepper-outline-thickness) solid var(--stepper-outline-color);
143
122
  }
144
123
 
145
124
  .m_6496b3f3:where([data-active]) {
@@ -161,18 +140,15 @@
161
140
  transition:
162
141
  background-color 150ms ease,
163
142
  border-color 150ms ease;
164
- border: 2px solid;
143
+ border: var(--stepper-outline-thickness) solid var(--stepper-outline-color);
144
+ background-color: var(--stepper-outline-color);
165
145
  }
166
146
 
167
147
  :where([data-mantine-color-scheme='light']) .m_1959ad01 {
168
- background-color: var(--mantine-color-gray-1);
169
- border-color: var(--mantine-color-gray-1);
170
148
  color: var(--mantine-color-gray-7);
171
149
  }
172
150
 
173
151
  :where([data-mantine-color-scheme='dark']) .m_1959ad01 {
174
- background-color: var(--mantine-color-dark-5);
175
- border-color: var(--mantine-color-dark-5);
176
152
  color: var(--mantine-color-dark-1);
177
153
  }
178
154