@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
@@ -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
 
@@ -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
 
package/styles/Switch.css CHANGED
@@ -36,6 +36,7 @@
36
36
  --switch-track-label-padding: var(--switch-track-label-padding-sm);
37
37
  --switch-radius: 1000px;
38
38
  --switch-color: var(--mantine-primary-color-filled);
39
+ --switch-disabled-color: var(--mantine-color-disabled);
39
40
 
40
41
  position: relative;
41
42
  }
@@ -99,13 +100,11 @@
99
100
  [data-mantine-color-scheme='light'] .m_9307d992 {
100
101
  --switch-bg: var(--mantine-color-gray-3);
101
102
  --switch-text-color: var(--mantine-color-gray-6);
102
- --switch-disabled-color: var(--mantine-color-gray-2);
103
103
  }
104
104
 
105
105
  [data-mantine-color-scheme='dark'] .m_9307d992 {
106
106
  --switch-bg: var(--mantine-color-dark-5);
107
107
  --switch-text-color: var(--mantine-color-dark-1);
108
- --switch-disabled-color: var(--mantine-color-dark-4);
109
108
  }
110
109
 
111
110
  .m_9307d992[data-label-position='left'] {
@@ -131,7 +130,8 @@
131
130
  background-color: var(--switch-bg);
132
131
  position: absolute;
133
132
  border-radius: var(--switch-radius);
134
- inset: 50%;
133
+ top: 50%;
134
+ left: 50%;
135
135
  transform: translate(-50%, -50%);
136
136
  }
137
137
 
@@ -36,6 +36,7 @@
36
36
  --switch-track-label-padding: var(--switch-track-label-padding-sm);
37
37
  --switch-radius: 1000px;
38
38
  --switch-color: var(--mantine-primary-color-filled);
39
+ --switch-disabled-color: var(--mantine-color-disabled);
39
40
 
40
41
  position: relative;
41
42
  }
@@ -99,13 +100,11 @@
99
100
  [data-mantine-color-scheme='light'] .m_9307d992 {
100
101
  --switch-bg: var(--mantine-color-gray-3);
101
102
  --switch-text-color: var(--mantine-color-gray-6);
102
- --switch-disabled-color: var(--mantine-color-gray-2);
103
103
  }
104
104
 
105
105
  [data-mantine-color-scheme='dark'] .m_9307d992 {
106
106
  --switch-bg: var(--mantine-color-dark-5);
107
107
  --switch-text-color: var(--mantine-color-dark-1);
108
- --switch-disabled-color: var(--mantine-color-dark-4);
109
108
  }
110
109
 
111
110
  .m_9307d992[data-label-position='left'] {
@@ -131,7 +130,8 @@
131
130
  background-color: var(--switch-bg);
132
131
  position: absolute;
133
132
  border-radius: var(--switch-radius);
134
- inset: 50%;
133
+ top: 50%;
134
+ left: 50%;
135
135
  transform: translate(-50%, -50%);
136
136
  }
137
137
 
package/styles/Table.css CHANGED
@@ -104,7 +104,7 @@
104
104
  position: sticky;
105
105
  }
106
106
 
107
- .m_b242d975:where([data-sticky]) .m_4e7aa4f3 {
107
+ .m_b242d975:where([data-sticky]) :where(.m_4e7aa4f3) {
108
108
  position: sticky;
109
109
  top: var(--table-sticky-header-offset, 0);
110
110
  background-color: var(--mantine-color-body);
@@ -104,7 +104,7 @@
104
104
  position: sticky;
105
105
  }
106
106
 
107
- .m_b242d975:where([data-sticky]) .m_4e7aa4f3 {
107
+ .m_b242d975:where([data-sticky]) :where(.m_4e7aa4f3) {
108
108
  position: sticky;
109
109
  top: var(--table-sticky-header-offset, 0);
110
110
  background-color: var(--mantine-color-body);
package/styles/Tabs.css CHANGED
@@ -151,6 +151,11 @@
151
151
  margin-inline-start: var(--mantine-spacing-xs);
152
152
  }
153
153
 
154
+ .m_42bbd1ae {
155
+ flex: 1;
156
+ text-align: center;
157
+ }
158
+
154
159
  /*************************************** default variant ***************************************/
155
160
  .m_576c9d4 {
156
161
  position: relative;
@@ -151,6 +151,11 @@
151
151
  margin-inline-start: var(--mantine-spacing-xs);
152
152
  }
153
153
 
154
+ .m_42bbd1ae {
155
+ flex: 1;
156
+ text-align: center;
157
+ }
158
+
154
159
  /*************************************** default variant ***************************************/
155
160
  .m_576c9d4 {
156
161
  position: relative;
@@ -264,6 +264,9 @@
264
264
  --mantine-color-default-color: var(--mantine-color-white);
265
265
  --mantine-color-default-border: var(--mantine-color-dark-4);
266
266
  --mantine-color-dimmed: var(--mantine-color-dark-2);
267
+ --mantine-color-disabled: var(--mantine-color-dark-6);
268
+ --mantine-color-disabled-color: var(--mantine-color-dark-3);
269
+ --mantine-color-disabled-border: var(--mantine-color-gray-6);
267
270
  --mantine-color-dark-text: var(--mantine-color-dark-4);
268
271
  --mantine-color-dark-filled: var(--mantine-color-dark-8);
269
272
  --mantine-color-dark-filled-hover: var(--mantine-color-dark-9);
@@ -392,6 +395,9 @@
392
395
  --mantine-color-default-color: var(--mantine-color-black);
393
396
  --mantine-color-default-border: var(--mantine-color-gray-4);
394
397
  --mantine-color-dimmed: var(--mantine-color-gray-6);
398
+ --mantine-color-disabled: var(--mantine-color-gray-2);
399
+ --mantine-color-disabled-color: var(--mantine-color-gray-5);
400
+ --mantine-color-disabled-border: var(--mantine-color-gray-3);
395
401
  --mantine-color-dark-text: var(--mantine-color-dark-filled);
396
402
  --mantine-color-dark-filled: var(--mantine-color-dark-6);
397
403
  --mantine-color-dark-filled-hover: var(--mantine-color-dark-7);
@@ -264,6 +264,9 @@
264
264
  --mantine-color-default-color: var(--mantine-color-white);
265
265
  --mantine-color-default-border: var(--mantine-color-dark-4);
266
266
  --mantine-color-dimmed: var(--mantine-color-dark-2);
267
+ --mantine-color-disabled: var(--mantine-color-dark-6);
268
+ --mantine-color-disabled-color: var(--mantine-color-dark-3);
269
+ --mantine-color-disabled-border: var(--mantine-color-gray-6);
267
270
  --mantine-color-dark-text: var(--mantine-color-dark-4);
268
271
  --mantine-color-dark-filled: var(--mantine-color-dark-8);
269
272
  --mantine-color-dark-filled-hover: var(--mantine-color-dark-9);
@@ -392,6 +395,9 @@
392
395
  --mantine-color-default-color: var(--mantine-color-black);
393
396
  --mantine-color-default-border: var(--mantine-color-gray-4);
394
397
  --mantine-color-dimmed: var(--mantine-color-gray-6);
398
+ --mantine-color-disabled: var(--mantine-color-gray-2);
399
+ --mantine-color-disabled-color: var(--mantine-color-gray-5);
400
+ --mantine-color-disabled-border: var(--mantine-color-gray-3);
395
401
  --mantine-color-dark-text: var(--mantine-color-dark-filled);
396
402
  --mantine-color-dark-filled: var(--mantine-color-dark-6);
397
403
  --mantine-color-dark-filled-hover: var(--mantine-color-dark-7);