@mantine/core 8.0.0-alpha.3 → 8.0.1

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 (121) hide show
  1. package/cjs/components/Collapse/use-collapse.cjs +1 -1
  2. package/cjs/components/Collapse/use-collapse.cjs.map +1 -1
  3. package/cjs/components/Drawer/DrawerRoot.cjs +2 -0
  4. package/cjs/components/Drawer/DrawerRoot.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/Menu/MenuSub/MenuSub.cjs +1 -1
  8. package/cjs/components/Menu/MenuSub/MenuSub.cjs.map +1 -1
  9. package/cjs/components/Modal/ModalRoot.cjs +2 -0
  10. package/cjs/components/Modal/ModalRoot.cjs.map +1 -1
  11. package/cjs/components/MultiSelect/MultiSelect.cjs +0 -1
  12. package/cjs/components/MultiSelect/MultiSelect.cjs.map +1 -1
  13. package/cjs/components/NavLink/NavLink.cjs +2 -2
  14. package/cjs/components/NavLink/NavLink.cjs.map +1 -1
  15. package/cjs/components/NumberInput/NumberInput.cjs +12 -5
  16. package/cjs/components/NumberInput/NumberInput.cjs.map +1 -1
  17. package/cjs/components/PasswordInput/PasswordInput.cjs +9 -2
  18. package/cjs/components/PasswordInput/PasswordInput.cjs.map +1 -1
  19. package/cjs/components/Select/Select.cjs +6 -1
  20. package/cjs/components/Select/Select.cjs.map +1 -1
  21. package/cjs/components/Slider/Track/Track.cjs +1 -1
  22. package/cjs/components/Slider/Track/Track.cjs.map +1 -1
  23. package/cjs/components/Switch/Switch.cjs +1 -0
  24. package/cjs/components/Switch/Switch.cjs.map +1 -1
  25. package/cjs/components/Table/TableScrollContainer.cjs +2 -1
  26. package/cjs/components/Table/TableScrollContainer.cjs.map +1 -1
  27. package/cjs/components/Tabs/Tabs.module.css.cjs +1 -1
  28. package/cjs/components/Transition/use-transition.cjs +8 -4
  29. package/cjs/components/Transition/use-transition.cjs.map +1 -1
  30. package/cjs/core/MantineProvider/MantineCssVariables/default-css-variables-resolver.cjs +8 -2
  31. package/cjs/core/MantineProvider/MantineCssVariables/default-css-variables-resolver.cjs.map +1 -1
  32. package/cjs/core/utils/units-converters/rem.cjs +0 -3
  33. package/cjs/core/utils/units-converters/rem.cjs.map +1 -1
  34. package/esm/components/Collapse/use-collapse.mjs +1 -1
  35. package/esm/components/Collapse/use-collapse.mjs.map +1 -1
  36. package/esm/components/Drawer/DrawerRoot.mjs +2 -0
  37. package/esm/components/Drawer/DrawerRoot.mjs.map +1 -1
  38. package/esm/components/FileButton/FileButton.mjs +2 -2
  39. package/esm/components/FileButton/FileButton.mjs.map +1 -1
  40. package/esm/components/Menu/MenuSub/MenuSub.mjs +1 -1
  41. package/esm/components/Menu/MenuSub/MenuSub.mjs.map +1 -1
  42. package/esm/components/Modal/ModalRoot.mjs +2 -0
  43. package/esm/components/Modal/ModalRoot.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/NavLink/NavLink.mjs +2 -2
  47. package/esm/components/NavLink/NavLink.mjs.map +1 -1
  48. package/esm/components/NumberInput/NumberInput.mjs +12 -5
  49. package/esm/components/NumberInput/NumberInput.mjs.map +1 -1
  50. package/esm/components/PasswordInput/PasswordInput.mjs +9 -2
  51. package/esm/components/PasswordInput/PasswordInput.mjs.map +1 -1
  52. package/esm/components/Select/Select.mjs +6 -1
  53. package/esm/components/Select/Select.mjs.map +1 -1
  54. package/esm/components/Slider/Track/Track.mjs +1 -1
  55. package/esm/components/Slider/Track/Track.mjs.map +1 -1
  56. package/esm/components/Switch/Switch.mjs +1 -0
  57. package/esm/components/Switch/Switch.mjs.map +1 -1
  58. package/esm/components/Table/TableScrollContainer.mjs +2 -1
  59. package/esm/components/Table/TableScrollContainer.mjs.map +1 -1
  60. package/esm/components/Tabs/Tabs.module.css.mjs +1 -1
  61. package/esm/components/Transition/use-transition.mjs +8 -4
  62. package/esm/components/Transition/use-transition.mjs.map +1 -1
  63. package/esm/core/MantineProvider/MantineCssVariables/default-css-variables-resolver.mjs +8 -2
  64. package/esm/core/MantineProvider/MantineCssVariables/default-css-variables-resolver.mjs.map +1 -1
  65. package/esm/core/utils/units-converters/rem.mjs +0 -3
  66. package/esm/core/utils/units-converters/rem.mjs.map +1 -1
  67. package/lib/components/Input/use-input-props.d.ts +26 -26
  68. package/lib/components/Table/TableScrollContainer.d.ts +3 -0
  69. package/lib/components/Table/index.d.ts +1 -0
  70. package/lib/core/MantineProvider/use-mantine-color-scheme/use-computed-color-scheme.d.ts +1 -1
  71. package/lib/core/types.d.ts +1 -1
  72. package/package.json +3 -3
  73. package/styles/ActionIcon.css +2 -10
  74. package/styles/ActionIcon.layer.css +2 -10
  75. package/styles/AngleSlider.css +3 -4
  76. package/styles/AngleSlider.layer.css +3 -4
  77. package/styles/Button.css +2 -10
  78. package/styles/Button.layer.css +2 -10
  79. package/styles/Checkbox.css +5 -17
  80. package/styles/Checkbox.layer.css +5 -17
  81. package/styles/CheckboxIndicator.css +2 -10
  82. package/styles/CheckboxIndicator.layer.css +2 -10
  83. package/styles/Chip.css +2 -10
  84. package/styles/Chip.layer.css +2 -10
  85. package/styles/InlineInput.css +4 -7
  86. package/styles/InlineInput.layer.css +4 -7
  87. package/styles/Input.css +2 -10
  88. package/styles/Input.layer.css +2 -10
  89. package/styles/Menu.css +1 -1
  90. package/styles/Menu.layer.css +1 -1
  91. package/styles/ModalBase.css +1 -1
  92. package/styles/ModalBase.layer.css +1 -1
  93. package/styles/NumberInput.css +1 -8
  94. package/styles/NumberInput.layer.css +1 -8
  95. package/styles/Pill.css +2 -2
  96. package/styles/Pill.layer.css +2 -2
  97. package/styles/Radio.css +5 -17
  98. package/styles/Radio.layer.css +5 -17
  99. package/styles/RadioIndicator.css +5 -17
  100. package/styles/RadioIndicator.layer.css +5 -17
  101. package/styles/SegmentedControl.css +5 -18
  102. package/styles/SegmentedControl.layer.css +5 -18
  103. package/styles/Slider.css +8 -16
  104. package/styles/Slider.layer.css +8 -16
  105. package/styles/Stepper.css +21 -45
  106. package/styles/Stepper.layer.css +21 -45
  107. package/styles/Switch.css +3 -3
  108. package/styles/Switch.layer.css +3 -3
  109. package/styles/Table.css +1 -1
  110. package/styles/Table.layer.css +1 -1
  111. package/styles/Tabs.css +5 -0
  112. package/styles/Tabs.layer.css +5 -0
  113. package/styles/default-css-variables.css +6 -0
  114. package/styles/default-css-variables.layer.css +6 -0
  115. package/styles.css +86 -207
  116. package/styles.layer.css +86 -207
  117. package/cjs/core/MantineProvider/suppress-nextjs-warning.cjs +0 -14
  118. package/cjs/core/MantineProvider/suppress-nextjs-warning.cjs.map +0 -1
  119. package/esm/core/MantineProvider/suppress-nextjs-warning.mjs +0 -12
  120. package/esm/core/MantineProvider/suppress-nextjs-warning.mjs.map +0 -1
  121. package/lib/core/MantineProvider/suppress-nextjs-warning.d.ts +0 -1
package/styles/Chip.css CHANGED
@@ -62,18 +62,10 @@
62
62
 
63
63
  .m_be049a53:where([data-disabled]) {
64
64
  cursor: not-allowed;
65
+ background-color: var(--mantine-color-disabled);
66
+ color: var(--mantine-color-disabled-color);
65
67
  }
66
68
 
67
- :where([data-mantine-color-scheme='light']) .m_be049a53:where([data-disabled]) {
68
- background-color: var(--mantine-color-gray-2);
69
- color: var(--mantine-color-gray-5);
70
- }
71
-
72
- :where([data-mantine-color-scheme='dark']) .m_be049a53:where([data-disabled]) {
73
- background-color: var(--mantine-color-dark-6);
74
- color: var(--mantine-color-dark-3);
75
- }
76
-
77
69
  :where([data-mantine-color-scheme='light']) .m_3904c1af:not([data-disabled]) {
78
70
  background-color: var(--mantine-color-white);
79
71
  border: 1px solid var(--mantine-color-gray-3);
package/styles/Chip.layer.css CHANGED
@@ -62,18 +62,10 @@
62
62
 
63
63
  .m_be049a53:where([data-disabled]) {
64
64
  cursor: not-allowed;
65
+ background-color: var(--mantine-color-disabled);
66
+ color: var(--mantine-color-disabled-color);
65
67
  }
66
68
 
67
- :where([data-mantine-color-scheme='light']) .m_be049a53:where([data-disabled]) {
68
- background-color: var(--mantine-color-gray-2);
69
- color: var(--mantine-color-gray-5);
70
- }
71
-
72
- :where([data-mantine-color-scheme='dark']) .m_be049a53:where([data-disabled]) {
73
- background-color: var(--mantine-color-dark-6);
74
- color: var(--mantine-color-dark-3);
75
- }
76
-
77
69
  :where([data-mantine-color-scheme='light']) .m_3904c1af:not([data-disabled]) {
78
70
  background-color: var(--mantine-color-white);
79
71
  border: 1px solid var(--mantine-color-gray-3);
package/styles/InlineInput.css CHANGED
@@ -47,13 +47,10 @@ fieldset:disabled .m_d3ea56bb,
47
47
  padding-inline-end: var(--label-offset-end);
48
48
  }
49
49
 
50
- :where([data-mantine-color-scheme='light']) fieldset:disabled .m_8ee546b8, :where([data-mantine-color-scheme='light']) .m_8ee546b8:where([data-disabled]) {
51
- color: var(--mantine-color-gray-5);
52
- }
53
-
54
- :where([data-mantine-color-scheme='dark']) fieldset:disabled .m_8ee546b8, :where([data-mantine-color-scheme='dark']) .m_8ee546b8:where([data-disabled]) {
55
- color: var(--mantine-color-dark-3);
56
- }
50
+ fieldset:disabled .m_8ee546b8,
51
+ .m_8ee546b8:where([data-disabled]) {
52
+ color: var(--mantine-color-disabled-color);
53
+ }
57
54
 
58
55
  .m_328f68c0 {
59
56
  margin-top: calc(var(--mantine-spacing-xs) / 2);
package/styles/InlineInput.layer.css CHANGED
@@ -47,13 +47,10 @@ fieldset:disabled .m_d3ea56bb,
47
47
  padding-inline-end: var(--label-offset-end);
48
48
  }
49
49
 
50
- :where([data-mantine-color-scheme='light']) fieldset:disabled .m_8ee546b8, :where([data-mantine-color-scheme='light']) .m_8ee546b8:where([data-disabled]) {
51
- color: var(--mantine-color-gray-5);
52
- }
53
-
54
- :where([data-mantine-color-scheme='dark']) fieldset:disabled .m_8ee546b8, :where([data-mantine-color-scheme='dark']) .m_8ee546b8:where([data-disabled]) {
55
- color: var(--mantine-color-dark-3);
56
- }
50
+ fieldset:disabled .m_8ee546b8,
51
+ .m_8ee546b8:where([data-disabled]) {
52
+ color: var(--mantine-color-disabled-color);
53
+ }
57
54
 
58
55
  .m_328f68c0 {
59
56
  margin-top: calc(var(--mantine-spacing-xs) / 2);
package/styles/Input.css CHANGED
@@ -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/Input.layer.css CHANGED
@@ -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
  }
package/styles/Menu.layer.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
  }
package/styles/ModalBase.css CHANGED
@@ -38,7 +38,7 @@
38
38
  z-index: 1001;
39
39
  }
40
40
 
41
- .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
 
package/styles/ModalBase.layer.css CHANGED
@@ -38,7 +38,7 @@
38
38
  z-index: 1001;
39
39
  }
40
40
 
41
- .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
 
package/styles/NumberInput.css CHANGED
@@ -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/NumberInput.layer.css CHANGED
@@ -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 {
package/styles/Pill.layer.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 {
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);
package/styles/Radio.layer.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);
package/styles/RadioIndicator.css CHANGED
@@ -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]) {
package/styles/RadioIndicator.layer.css CHANGED
@@ -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]) {
package/styles/SegmentedControl.css CHANGED
@@ -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/SegmentedControl.layer.css CHANGED
@@ -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));
package/styles/Slider.layer.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));