tailwind-preset-mantine 3.0.1 → 3.0.3

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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/generate.js +240 -237
  3. package/src/index.css +15 -0
  4. package/src/theme.css +15 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tailwind-preset-mantine",
3
- "version": "3.0.1",
3
+ "version": "3.0.3",
4
4
  "description": "Integrate Mantine with Tailwind CSS",
5
5
  "keywords": [
6
6
  "mantine",
package/src/generate.js CHANGED
@@ -1,5 +1,6 @@
1
1
  // for reference:
2
2
  // https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/MantineCssVariables/default-css-variables-resolver.ts
3
+ // https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/MantineCssVariables/get-css-color-variables.ts
3
4
  // https://tailwindcss.com/docs/theme#default-theme-variable-reference
4
5
 
5
6
  import { DEFAULT_THEME } from "@mantine/core";
@@ -30,280 +31,282 @@ ${
30
31
  }
31
32
 
32
33
  @theme {
33
- ${
34
+ ${
34
35
  isDefault
35
36
  ? `
36
- /* font */
37
- --font-sans: var(--mantine-font-family);
38
- --font-mono: var(--mantine-font-family-monospace);
39
- --font-headings: var(--mantine-font-family-headings);
37
+ /* font */
38
+ --font-sans: var(--mantine-font-family);
39
+ --font-mono: var(--mantine-font-family-monospace);
40
+ --font-headings: var(--mantine-font-family-headings);
40
41
 
41
- /* colors - primary */
42
- --color-primary-50: var(--mantine-primary-color-0);
43
- --color-primary-100: var(--mantine-primary-color-1);
44
- --color-primary-200: var(--mantine-primary-color-2);
45
- --color-primary-300: var(--mantine-primary-color-3);
46
- --color-primary-400: var(--mantine-primary-color-4);
47
- --color-primary-500: var(--mantine-primary-color-5);
48
- --color-primary-600: var(--mantine-primary-color-6);
49
- --color-primary-700: var(--mantine-primary-color-7);
50
- --color-primary-800: var(--mantine-primary-color-8);
51
- --color-primary-900: var(--mantine-primary-color-9);
52
- --color-primary: var(--mantine-primary-color-filled);
42
+ /* colors - primary */
43
+ --color-primary-50: var(--mantine-primary-color-0);
44
+ --color-primary-100: var(--mantine-primary-color-1);
45
+ --color-primary-200: var(--mantine-primary-color-2);
46
+ --color-primary-300: var(--mantine-primary-color-3);
47
+ --color-primary-400: var(--mantine-primary-color-4);
48
+ --color-primary-500: var(--mantine-primary-color-5);
49
+ --color-primary-600: var(--mantine-primary-color-6);
50
+ --color-primary-700: var(--mantine-primary-color-7);
51
+ --color-primary-800: var(--mantine-primary-color-8);
52
+ --color-primary-900: var(--mantine-primary-color-9);
53
+ --color-primary: var(--mantine-primary-color-filled);
53
54
 
54
- /* colors - variant specific primary */
55
- --color-primary-filled: var(--mantine-primary-color-filled);
56
- --color-primary-filled-hover: var(--mantine-primary-color-filled-hover);
57
- --color-primary-light: var(--mantine-primary-color-light);
58
- --color-primary-light-hover: var(--mantine-primary-color-light-hover);
59
- --color-primary-light-color: var(--mantine-primary-color-light-color);
60
- --color-primary-outline: var(--mantine-primary-color-outline);
61
- --color-primary-outline-hover: var(--mantine-primary-color-outline-hover);
62
- --color-primary-contrast: var(--mantine-primary-color-contrast);
55
+ /* colors - variant specific primary */
56
+ --color-primary-filled: var(--mantine-primary-color-filled);
57
+ --color-primary-filled-hover: var(--mantine-primary-color-filled-hover);
58
+ --color-primary-light: var(--mantine-primary-color-light);
59
+ --color-primary-light-hover: var(--mantine-primary-color-light-hover);
60
+ --color-primary-light-color: var(--mantine-primary-color-light-color);
61
+ --color-primary-outline: var(--mantine-primary-color-outline);
62
+ --color-primary-outline-hover: var(--mantine-primary-color-outline-hover);
63
+ --color-primary-contrast: var(--mantine-primary-color-contrast);
63
64
 
64
- /* colors - others */
65
- --color-white: var(--mantine-color-white);
66
- --color-black: var(--mantine-color-black);
67
- --color-bright: var(--mantine-color-bright);
68
- --color-body: var(--mantine-color-body);
69
- --color-error: var(--mantine-color-error);
70
- --color-placeholder: var(--mantine-color-placeholder);
71
- --color-anchor: var(--mantine-color-anchor);
72
- --color-default: var(--mantine-color-default);
73
- --color-default-hover: var(--mantine-color-default-hover);
74
- --color-default-color: var(--mantine-color-default-color);
75
- --color-default-border: var(--mantine-color-default-border);
76
- --color-dimmed: var(--mantine-color-dimmed);
77
- --color-disabled: var(--mantine-color-disabled);
78
- --color-disabled-color: var(--mantine-color-disabled-color);
79
- --color-disabled-border: var(--mantine-color-disabled-border);
65
+ /* colors - others */
66
+ --color-white: var(--mantine-color-white);
67
+ --color-black: var(--mantine-color-black);
68
+ --color-bright: var(--mantine-color-bright);
69
+ --color-body: var(--mantine-color-body);
70
+ --color-text: var(--mantine-color-text);
71
+ --color-error: var(--mantine-color-error);
72
+ --color-placeholder: var(--mantine-color-placeholder);
73
+ --color-anchor: var(--mantine-color-anchor);
74
+ --color-default: var(--mantine-color-default);
75
+ --color-default-hover: var(--mantine-color-default-hover);
76
+ --color-default-color: var(--mantine-color-default-color);
77
+ --color-default-border: var(--mantine-color-default-border);
78
+ --color-dimmed: var(--mantine-color-dimmed);
79
+ --color-disabled: var(--mantine-color-disabled);
80
+ --color-disabled-color: var(--mantine-color-disabled-color);
81
+ --color-disabled-border: var(--mantine-color-disabled-border);
80
82
 
81
- /* spacing */
82
- --spacing-xs: var(--mantine-spacing-xs);
83
- --spacing-sm: var(--mantine-spacing-sm);
84
- --spacing-md: var(--mantine-spacing-md);
85
- --spacing-lg: var(--mantine-spacing-lg);
86
- --spacing-xl: var(--mantine-spacing-xl);
83
+ /* spacing */
84
+ --spacing-xs: var(--mantine-spacing-xs);
85
+ --spacing-sm: var(--mantine-spacing-sm);
86
+ --spacing-md: var(--mantine-spacing-md);
87
+ --spacing-lg: var(--mantine-spacing-lg);
88
+ --spacing-xl: var(--mantine-spacing-xl);
87
89
 
88
- /* font size */
89
- --text-xs: var(--mantine-font-size-xs);
90
- --text-sm: var(--mantine-font-size-sm);
91
- --text-md: var(--mantine-font-size-md);
92
- --text-lg: var(--mantine-font-size-lg);
93
- --text-xl: var(--mantine-font-size-xl);
94
- --text-h1: var(--mantine-h1-font-size);
95
- --text-h2: var(--mantine-h2-font-size);
96
- --text-h3: var(--mantine-h3-font-size);
97
- --text-h4: var(--mantine-h4-font-size);
98
- --text-h5: var(--mantine-h5-font-size);
99
- --text-h6: var(--mantine-h6-font-size);
100
- --text-base: var(--mantine-font-size-md);
90
+ /* font size */
91
+ --text-xs: var(--mantine-font-size-xs);
92
+ --text-sm: var(--mantine-font-size-sm);
93
+ --text-md: var(--mantine-font-size-md);
94
+ --text-lg: var(--mantine-font-size-lg);
95
+ --text-xl: var(--mantine-font-size-xl);
96
+ --text-h1: var(--mantine-h1-font-size);
97
+ --text-h2: var(--mantine-h2-font-size);
98
+ --text-h3: var(--mantine-h3-font-size);
99
+ --text-h4: var(--mantine-h4-font-size);
100
+ --text-h5: var(--mantine-h5-font-size);
101
+ --text-h6: var(--mantine-h6-font-size);
102
+ --text-base: var(--mantine-font-size-md);
101
103
 
102
- /* line height */
103
- --text-xs--line-height: var(--mantine-line-height-xs);
104
- --text-sm--line-height: var(--mantine-line-height-sm);
105
- --text-md--line-height: var(--mantine-line-height-md);
106
- --text-lg--line-height: var(--mantine-line-height-lg);
107
- --text-xl--line-height: var(--mantine-line-height-xl);
108
- --text-h1--line-height: var(--mantine-h1-line-height);
109
- --text-h2--line-height: var(--mantine-h2-line-height);
110
- --text-h3--line-height: var(--mantine-h3-line-height);
111
- --text-h4--line-height: var(--mantine-h4-line-height);
112
- --text-h5--line-height: var(--mantine-h5-line-height);
113
- --text-h6--line-height: var(--mantine-h6-line-height);
114
- --text-base--line-height: var(--mantine-line-height-md);
115
- --text-heading--line-height: var(--mantine-heading-line-height);
116
- --text-base--line-height: var(--mantine-line-height);
104
+ /* line height */
105
+ --text-xs--line-height: var(--mantine-line-height-xs);
106
+ --text-sm--line-height: var(--mantine-line-height-sm);
107
+ --text-md--line-height: var(--mantine-line-height-md);
108
+ --text-lg--line-height: var(--mantine-line-height-lg);
109
+ --text-xl--line-height: var(--mantine-line-height-xl);
110
+ --text-h1--line-height: var(--mantine-h1-line-height);
111
+ --text-h2--line-height: var(--mantine-h2-line-height);
112
+ --text-h3--line-height: var(--mantine-h3-line-height);
113
+ --text-h4--line-height: var(--mantine-h4-line-height);
114
+ --text-h5--line-height: var(--mantine-h5-line-height);
115
+ --text-h6--line-height: var(--mantine-h6-line-height);
116
+ --text-base--line-height: var(--mantine-line-height-md);
117
+ --text-heading--line-height: var(--mantine-heading-line-height);
118
+ --text-base--line-height: var(--mantine-line-height);
117
119
 
118
- /* font weight */
119
- --font-weight-h1: var(--mantine-h1-font-weight);
120
- --font-weight-h2: var(--mantine-h2-font-weight);
121
- --font-weight-h3: var(--mantine-h3-font-weight);
122
- --font-weight-h4: var(--mantine-h4-font-weight);
123
- --font-weight-h5: var(--mantine-h5-font-weight);
124
- --font-weight-h6: var(--mantine-h6-font-weight);
120
+ /* font weight */
121
+ --font-weight-h1: var(--mantine-h1-font-weight);
122
+ --font-weight-h2: var(--mantine-h2-font-weight);
123
+ --font-weight-h3: var(--mantine-h3-font-weight);
124
+ --font-weight-h4: var(--mantine-h4-font-weight);
125
+ --font-weight-h5: var(--mantine-h5-font-weight);
126
+ --font-weight-h6: var(--mantine-h6-font-weight);
125
127
 
126
- /* border radius */
127
- --radius-xs: var(--mantine-radius-xs);
128
- --radius-sm: var(--mantine-radius-sm);
129
- --radius-md: var(--mantine-radius-md);
130
- --radius-lg: var(--mantine-radius-lg);
131
- --radius-xl: var(--mantine-radius-xl);
132
- --radius: var(--mantine-radius-default);
128
+ /* border radius */
129
+ --radius-xs: var(--mantine-radius-xs);
130
+ --radius-sm: var(--mantine-radius-sm);
131
+ --radius-md: var(--mantine-radius-md);
132
+ --radius-lg: var(--mantine-radius-lg);
133
+ --radius-xl: var(--mantine-radius-xl);
134
+ --radius: var(--mantine-radius-default);
133
135
 
134
- /* shadow */
135
- --shadow-xs: var(--mantine-shadow-xs);
136
- --shadow-sm: var(--mantine-shadow-sm);
137
- --shadow-md: var(--mantine-shadow-md);
138
- --shadow-lg: var(--mantine-shadow-lg);
139
- --shadow-xl: var(--mantine-shadow-xl);
140
- --shadow: var(--mantine-shadow-xs);
136
+ /* shadow */
137
+ --shadow-xs: var(--mantine-shadow-xs);
138
+ --shadow-sm: var(--mantine-shadow-sm);
139
+ --shadow-md: var(--mantine-shadow-md);
140
+ --shadow-lg: var(--mantine-shadow-lg);
141
+ --shadow-xl: var(--mantine-shadow-xl);
142
+ --shadow: var(--mantine-shadow-xs);
141
143
 
142
- /* z-index */
143
- --z-index-app: var(--mantine-z-index-app);
144
- --z-index-modal: var(--mantine-z-index-modal);
145
- --z-index-popover: var(--mantine-z-index-popover);
146
- --z-index-overlay: var(--mantine-z-index-overlay);
147
- --z-index-max: var(--mantine-z-index-max);
148
- `.trimEnd()
144
+ /* z-index */
145
+ --z-index-app: var(--mantine-z-index-app);
146
+ --z-index-modal: var(--mantine-z-index-modal);
147
+ --z-index-popover: var(--mantine-z-index-popover);
148
+ --z-index-overlay: var(--mantine-z-index-overlay);
149
+ --z-index-max: var(--mantine-z-index-max);
150
+ `.trimEnd()
149
151
  : ""
150
152
  }
151
153
 
152
- /* colors - all */
153
- ${Object.keys(theme.colors ?? {})
154
+ /* colors - all */
155
+ ${Object.keys(theme.colors ?? {})
154
156
  .map((key) =>
155
157
  `
156
- --color-${key}-50: var(--mantine-color-${key}-0);
157
- --color-${key}-100: var(--mantine-color-${key}-1);
158
- --color-${key}-200: var(--mantine-color-${key}-2);
159
- --color-${key}-300: var(--mantine-color-${key}-3);
160
- --color-${key}-400: var(--mantine-color-${key}-4);
161
- --color-${key}-500: var(--mantine-color-${key}-5);
162
- --color-${key}-600: var(--mantine-color-${key}-6);
163
- --color-${key}-700: var(--mantine-color-${key}-7);
164
- --color-${key}-800: var(--mantine-color-${key}-8);
165
- --color-${key}-900: var(--mantine-color-${key}-9);
166
- --color-${key}: var(--mantine-color-${key}-filled);
167
- `.trimEnd(),
158
+ --color-${key}-50: var(--mantine-color-${key}-0);
159
+ --color-${key}-100: var(--mantine-color-${key}-1);
160
+ --color-${key}-200: var(--mantine-color-${key}-2);
161
+ --color-${key}-300: var(--mantine-color-${key}-3);
162
+ --color-${key}-400: var(--mantine-color-${key}-4);
163
+ --color-${key}-500: var(--mantine-color-${key}-5);
164
+ --color-${key}-600: var(--mantine-color-${key}-6);
165
+ --color-${key}-700: var(--mantine-color-${key}-7);
166
+ --color-${key}-800: var(--mantine-color-${key}-8);
167
+ --color-${key}-900: var(--mantine-color-${key}-9);
168
+ --color-${key}: var(--mantine-color-${key}-filled);
169
+ `.trimEnd(),
168
170
  )
169
171
  .join("\n")}
170
172
 
171
- /* colors - variant specific */
172
- ${Object.keys(theme.colors ?? {})
173
+ /* colors - variant specific */
174
+ ${Object.keys(theme.colors ?? {})
173
175
  .map((key) =>
174
176
  `
175
- --color-${key}-filled: var(--mantine-color-${key}-filled);
176
- --color-${key}-filled-hover: var(--mantine-color-${key}-filled-hover);
177
- --color-${key}-light: var(--mantine-color-${key}-light);
178
- --color-${key}-light-hover: var(--mantine-color-${key}-light-hover);
179
- --color-${key}-light-color: var(--mantine-color-${key}-light-color);
180
- --color-${key}-outline: var(--mantine-color-${key}-outline);
181
- --color-${key}-outline-hover: var(--mantine-color-${key}-outline-hover);
182
- `.trimEnd(),
177
+ --color-${key}-text: var(--mantine-color-${key}-text);
178
+ --color-${key}-filled: var(--mantine-color-${key}-filled);
179
+ --color-${key}-filled-hover: var(--mantine-color-${key}-filled-hover);
180
+ --color-${key}-light: var(--mantine-color-${key}-light);
181
+ --color-${key}-light-hover: var(--mantine-color-${key}-light-hover);
182
+ --color-${key}-light-color: var(--mantine-color-${key}-light-color);
183
+ --color-${key}-outline: var(--mantine-color-${key}-outline);
184
+ --color-${key}-outline-hover: var(--mantine-color-${key}-outline-hover);
185
+ `.trimEnd(),
183
186
  )
184
187
  .join("\n")}
185
188
 
186
- /* breakpoints */
187
- ${theme.breakpoints ? "--breakpoint-*: initial;" : ""}
189
+ /* breakpoints */
190
+ ${theme.breakpoints ? "--breakpoint-*: initial;" : ""}
188
191
  ${Object.entries(theme.breakpoints ?? {})
189
192
  .map(([key, value]) =>
190
- ` --breakpoint-${key}: ${value};
191
- `.trimEnd(),
193
+ `--breakpoint-${key}: ${value};
194
+ `.trimEnd(),
192
195
  )
193
196
  .join("\n")}
194
197
 
195
- /* read back tailwind's default containers vars to fix #24 */
196
- --size-3xs: 16rem;
197
- --size-2xs: 18rem;
198
- --size-xs: 20rem;
199
- --size-sm: 24rem;
200
- --size-md: 28rem;
201
- --size-lg: 32rem;
202
- --size-xl: 36rem;
203
- --size-2xl: 42rem;
204
- --size-3xl: 48rem;
205
- --size-4xl: 56rem;
206
- --size-5xl: 64rem;
207
- --size-6xl: 72rem;
208
- --size-7xl: 80rem;
198
+ /* read back tailwind's default containers vars to fix #24 */
199
+ --size-3xs: 16rem;
200
+ --size-2xs: 18rem;
201
+ --size-xs: 20rem;
202
+ --size-sm: 24rem;
203
+ --size-md: 28rem;
204
+ --size-lg: 32rem;
205
+ --size-xl: 36rem;
206
+ --size-2xl: 42rem;
207
+ --size-3xl: 48rem;
208
+ --size-4xl: 56rem;
209
+ --size-5xl: 64rem;
210
+ --size-6xl: 72rem;
211
+ --size-7xl: 80rem;
209
212
 
210
- --container-3xs: var(--size-3xs);
211
- --container-2xs: var(--size-2xs);
212
- --container-xs: var(--size-xs);
213
- --container-sm: var(--size-sm);
214
- --container-md: var(--size-md);
215
- --container-lg: var(--size-lg);
216
- --container-xl: var(--size-xl);
217
- --container-2xl: var(--size-2xl);
218
- --container-3xl: var(--size-3xl);
219
- --container-4xl: var(--size-4xl);
220
- --container-5xl: var(--size-5xl);
221
- --container-6xl: var(--size-6xl);
222
- --container-7xl: var(--size-7xl);
213
+ --container-3xs: var(--size-3xs);
214
+ --container-2xs: var(--size-2xs);
215
+ --container-xs: var(--size-xs);
216
+ --container-sm: var(--size-sm);
217
+ --container-md: var(--size-md);
218
+ --container-lg: var(--size-lg);
219
+ --container-xl: var(--size-xl);
220
+ --container-2xl: var(--size-2xl);
221
+ --container-3xl: var(--size-3xl);
222
+ --container-4xl: var(--size-4xl);
223
+ --container-5xl: var(--size-5xl);
224
+ --container-6xl: var(--size-6xl);
225
+ --container-7xl: var(--size-7xl);
223
226
 
224
- --width-3xs: var(--size-3xs);
225
- --width-2xs: var(--size-2xs);
226
- --width-xs: var(--size-xs);
227
- --width-sm: var(--size-sm);
228
- --width-md: var(--size-md);
229
- --width-lg: var(--size-lg);
230
- --width-xl: var(--size-xl);
231
- --width-2xl: var(--size-2xl);
232
- --width-3xl: var(--size-3xl);
233
- --width-4xl: var(--size-4xl);
234
- --width-5xl: var(--size-5xl);
235
- --width-6xl: var(--size-6xl);
236
- --width-7xl: var(--size-7xl);
227
+ --width-3xs: var(--size-3xs);
228
+ --width-2xs: var(--size-2xs);
229
+ --width-xs: var(--size-xs);
230
+ --width-sm: var(--size-sm);
231
+ --width-md: var(--size-md);
232
+ --width-lg: var(--size-lg);
233
+ --width-xl: var(--size-xl);
234
+ --width-2xl: var(--size-2xl);
235
+ --width-3xl: var(--size-3xl);
236
+ --width-4xl: var(--size-4xl);
237
+ --width-5xl: var(--size-5xl);
238
+ --width-6xl: var(--size-6xl);
239
+ --width-7xl: var(--size-7xl);
237
240
 
238
- --min-width-3xs: var(--size-3xs);
239
- --min-width-2xs: var(--size-2xs);
240
- --min-width-xs: var(--size-xs);
241
- --min-width-sm: var(--size-sm);
242
- --min-width-md: var(--size-md);
243
- --min-width-lg: var(--size-lg);
244
- --min-width-xl: var(--size-xl);
245
- --min-width-2xl: var(--size-2xl);
246
- --min-width-3xl: var(--size-3xl);
247
- --min-width-4xl: var(--size-4xl);
248
- --min-width-5xl: var(--size-5xl);
249
- --min-width-6xl: var(--size-6xl);
250
- --min-width-7xl: var(--size-7xl);
241
+ --min-width-3xs: var(--size-3xs);
242
+ --min-width-2xs: var(--size-2xs);
243
+ --min-width-xs: var(--size-xs);
244
+ --min-width-sm: var(--size-sm);
245
+ --min-width-md: var(--size-md);
246
+ --min-width-lg: var(--size-lg);
247
+ --min-width-xl: var(--size-xl);
248
+ --min-width-2xl: var(--size-2xl);
249
+ --min-width-3xl: var(--size-3xl);
250
+ --min-width-4xl: var(--size-4xl);
251
+ --min-width-5xl: var(--size-5xl);
252
+ --min-width-6xl: var(--size-6xl);
253
+ --min-width-7xl: var(--size-7xl);
251
254
 
252
- --max-width-3xs: var(--size-3xs);
253
- --max-width-2xs: var(--size-2xs);
254
- --max-width-xs: var(--size-xs);
255
- --max-width-sm: var(--size-sm);
256
- --max-width-md: var(--size-md);
257
- --max-width-lg: var(--size-lg);
258
- --max-width-xl: var(--size-xl);
259
- --max-width-2xl: var(--size-2xl);
260
- --max-width-3xl: var(--size-3xl);
261
- --max-width-4xl: var(--size-4xl);
262
- --max-width-5xl: var(--size-5xl);
263
- --max-width-6xl: var(--size-6xl);
264
- --max-width-7xl: var(--size-7xl);
255
+ --max-width-3xs: var(--size-3xs);
256
+ --max-width-2xs: var(--size-2xs);
257
+ --max-width-xs: var(--size-xs);
258
+ --max-width-sm: var(--size-sm);
259
+ --max-width-md: var(--size-md);
260
+ --max-width-lg: var(--size-lg);
261
+ --max-width-xl: var(--size-xl);
262
+ --max-width-2xl: var(--size-2xl);
263
+ --max-width-3xl: var(--size-3xl);
264
+ --max-width-4xl: var(--size-4xl);
265
+ --max-width-5xl: var(--size-5xl);
266
+ --max-width-6xl: var(--size-6xl);
267
+ --max-width-7xl: var(--size-7xl);
265
268
 
266
- --height-3xs: var(--size-3xs);
267
- --height-2xs: var(--size-2xs);
268
- --height-xs: var(--size-xs);
269
- --height-sm: var(--size-sm);
270
- --height-md: var(--size-md);
271
- --height-lg: var(--size-lg);
272
- --height-xl: var(--size-xl);
273
- --height-2xl: var(--size-2xl);
274
- --height-3xl: var(--size-3xl);
275
- --height-4xl: var(--size-4xl);
276
- --height-5xl: var(--size-5xl);
277
- --height-6xl: var(--size-6xl);
278
- --height-7xl: var(--size-7xl);
269
+ --height-3xs: var(--size-3xs);
270
+ --height-2xs: var(--size-2xs);
271
+ --height-xs: var(--size-xs);
272
+ --height-sm: var(--size-sm);
273
+ --height-md: var(--size-md);
274
+ --height-lg: var(--size-lg);
275
+ --height-xl: var(--size-xl);
276
+ --height-2xl: var(--size-2xl);
277
+ --height-3xl: var(--size-3xl);
278
+ --height-4xl: var(--size-4xl);
279
+ --height-5xl: var(--size-5xl);
280
+ --height-6xl: var(--size-6xl);
281
+ --height-7xl: var(--size-7xl);
279
282
 
280
- --min-height-3xs: var(--size-3xs);
281
- --min-height-2xs: var(--size-2xs);
282
- --min-height-xs: var(--size-xs);
283
- --min-height-sm: var(--size-sm);
284
- --min-height-md: var(--size-md);
285
- --min-height-lg: var(--size-lg);
286
- --min-height-xl: var(--size-xl);
287
- --min-height-2xl: var(--size-2xl);
288
- --min-height-3xl: var(--size-3xl);
289
- --min-height-4xl: var(--size-4xl);
290
- --min-height-5xl: var(--size-5xl);
291
- --min-height-6xl: var(--size-6xl);
292
- --min-height-7xl: var(--size-7xl);
283
+ --min-height-3xs: var(--size-3xs);
284
+ --min-height-2xs: var(--size-2xs);
285
+ --min-height-xs: var(--size-xs);
286
+ --min-height-sm: var(--size-sm);
287
+ --min-height-md: var(--size-md);
288
+ --min-height-lg: var(--size-lg);
289
+ --min-height-xl: var(--size-xl);
290
+ --min-height-2xl: var(--size-2xl);
291
+ --min-height-3xl: var(--size-3xl);
292
+ --min-height-4xl: var(--size-4xl);
293
+ --min-height-5xl: var(--size-5xl);
294
+ --min-height-6xl: var(--size-6xl);
295
+ --min-height-7xl: var(--size-7xl);
293
296
 
294
- --max-height-3xs: var(--size-3xs);
295
- --max-height-2xs: var(--size-2xs);
296
- --max-height-xs: var(--size-xs);
297
- --max-height-sm: var(--size-sm);
298
- --max-height-md: var(--size-md);
299
- --max-height-lg: var(--size-lg);
300
- --max-height-xl: var(--size-xl);
301
- --max-height-2xl: var(--size-2xl);
302
- --max-height-3xl: var(--size-3xl);
303
- --max-height-4xl: var(--size-4xl);
304
- --max-height-5xl: var(--size-5xl);
305
- --max-height-6xl: var(--size-6xl);
306
- --max-height-7xl: var(--size-7xl);
297
+ --max-height-3xs: var(--size-3xs);
298
+ --max-height-2xs: var(--size-2xs);
299
+ --max-height-xs: var(--size-xs);
300
+ --max-height-sm: var(--size-sm);
301
+ --max-height-md: var(--size-md);
302
+ --max-height-lg: var(--size-lg);
303
+ --max-height-xl: var(--size-xl);
304
+ --max-height-2xl: var(--size-2xl);
305
+ --max-height-3xl: var(--size-3xl);
306
+ --max-height-4xl: var(--size-4xl);
307
+ --max-height-5xl: var(--size-5xl);
308
+ --max-height-6xl: var(--size-6xl);
309
+ --max-height-7xl: var(--size-7xl);
307
310
  }
308
311
  `;
309
312
  }
package/src/index.css CHANGED
@@ -45,6 +45,7 @@
45
45
  --color-black: var(--mantine-color-black);
46
46
  --color-bright: var(--mantine-color-bright);
47
47
  --color-body: var(--mantine-color-body);
48
+ --color-text: var(--mantine-color-text);
48
49
  --color-error: var(--mantine-color-error);
49
50
  --color-placeholder: var(--mantine-color-placeholder);
50
51
  --color-anchor: var(--mantine-color-anchor);
@@ -297,6 +298,7 @@
297
298
 
298
299
  /* colors - variant specific */
299
300
 
301
+ --color-dark-text: var(--mantine-color-dark-text);
300
302
  --color-dark-filled: var(--mantine-color-dark-filled);
301
303
  --color-dark-filled-hover: var(--mantine-color-dark-filled-hover);
302
304
  --color-dark-light: var(--mantine-color-dark-light);
@@ -305,6 +307,7 @@
305
307
  --color-dark-outline: var(--mantine-color-dark-outline);
306
308
  --color-dark-outline-hover: var(--mantine-color-dark-outline-hover);
307
309
 
310
+ --color-gray-text: var(--mantine-color-gray-text);
308
311
  --color-gray-filled: var(--mantine-color-gray-filled);
309
312
  --color-gray-filled-hover: var(--mantine-color-gray-filled-hover);
310
313
  --color-gray-light: var(--mantine-color-gray-light);
@@ -313,6 +316,7 @@
313
316
  --color-gray-outline: var(--mantine-color-gray-outline);
314
317
  --color-gray-outline-hover: var(--mantine-color-gray-outline-hover);
315
318
 
319
+ --color-red-text: var(--mantine-color-red-text);
316
320
  --color-red-filled: var(--mantine-color-red-filled);
317
321
  --color-red-filled-hover: var(--mantine-color-red-filled-hover);
318
322
  --color-red-light: var(--mantine-color-red-light);
@@ -321,6 +325,7 @@
321
325
  --color-red-outline: var(--mantine-color-red-outline);
322
326
  --color-red-outline-hover: var(--mantine-color-red-outline-hover);
323
327
 
328
+ --color-pink-text: var(--mantine-color-pink-text);
324
329
  --color-pink-filled: var(--mantine-color-pink-filled);
325
330
  --color-pink-filled-hover: var(--mantine-color-pink-filled-hover);
326
331
  --color-pink-light: var(--mantine-color-pink-light);
@@ -329,6 +334,7 @@
329
334
  --color-pink-outline: var(--mantine-color-pink-outline);
330
335
  --color-pink-outline-hover: var(--mantine-color-pink-outline-hover);
331
336
 
337
+ --color-grape-text: var(--mantine-color-grape-text);
332
338
  --color-grape-filled: var(--mantine-color-grape-filled);
333
339
  --color-grape-filled-hover: var(--mantine-color-grape-filled-hover);
334
340
  --color-grape-light: var(--mantine-color-grape-light);
@@ -337,6 +343,7 @@
337
343
  --color-grape-outline: var(--mantine-color-grape-outline);
338
344
  --color-grape-outline-hover: var(--mantine-color-grape-outline-hover);
339
345
 
346
+ --color-violet-text: var(--mantine-color-violet-text);
340
347
  --color-violet-filled: var(--mantine-color-violet-filled);
341
348
  --color-violet-filled-hover: var(--mantine-color-violet-filled-hover);
342
349
  --color-violet-light: var(--mantine-color-violet-light);
@@ -345,6 +352,7 @@
345
352
  --color-violet-outline: var(--mantine-color-violet-outline);
346
353
  --color-violet-outline-hover: var(--mantine-color-violet-outline-hover);
347
354
 
355
+ --color-indigo-text: var(--mantine-color-indigo-text);
348
356
  --color-indigo-filled: var(--mantine-color-indigo-filled);
349
357
  --color-indigo-filled-hover: var(--mantine-color-indigo-filled-hover);
350
358
  --color-indigo-light: var(--mantine-color-indigo-light);
@@ -353,6 +361,7 @@
353
361
  --color-indigo-outline: var(--mantine-color-indigo-outline);
354
362
  --color-indigo-outline-hover: var(--mantine-color-indigo-outline-hover);
355
363
 
364
+ --color-blue-text: var(--mantine-color-blue-text);
356
365
  --color-blue-filled: var(--mantine-color-blue-filled);
357
366
  --color-blue-filled-hover: var(--mantine-color-blue-filled-hover);
358
367
  --color-blue-light: var(--mantine-color-blue-light);
@@ -361,6 +370,7 @@
361
370
  --color-blue-outline: var(--mantine-color-blue-outline);
362
371
  --color-blue-outline-hover: var(--mantine-color-blue-outline-hover);
363
372
 
373
+ --color-cyan-text: var(--mantine-color-cyan-text);
364
374
  --color-cyan-filled: var(--mantine-color-cyan-filled);
365
375
  --color-cyan-filled-hover: var(--mantine-color-cyan-filled-hover);
366
376
  --color-cyan-light: var(--mantine-color-cyan-light);
@@ -369,6 +379,7 @@
369
379
  --color-cyan-outline: var(--mantine-color-cyan-outline);
370
380
  --color-cyan-outline-hover: var(--mantine-color-cyan-outline-hover);
371
381
 
382
+ --color-teal-text: var(--mantine-color-teal-text);
372
383
  --color-teal-filled: var(--mantine-color-teal-filled);
373
384
  --color-teal-filled-hover: var(--mantine-color-teal-filled-hover);
374
385
  --color-teal-light: var(--mantine-color-teal-light);
@@ -377,6 +388,7 @@
377
388
  --color-teal-outline: var(--mantine-color-teal-outline);
378
389
  --color-teal-outline-hover: var(--mantine-color-teal-outline-hover);
379
390
 
391
+ --color-green-text: var(--mantine-color-green-text);
380
392
  --color-green-filled: var(--mantine-color-green-filled);
381
393
  --color-green-filled-hover: var(--mantine-color-green-filled-hover);
382
394
  --color-green-light: var(--mantine-color-green-light);
@@ -385,6 +397,7 @@
385
397
  --color-green-outline: var(--mantine-color-green-outline);
386
398
  --color-green-outline-hover: var(--mantine-color-green-outline-hover);
387
399
 
400
+ --color-lime-text: var(--mantine-color-lime-text);
388
401
  --color-lime-filled: var(--mantine-color-lime-filled);
389
402
  --color-lime-filled-hover: var(--mantine-color-lime-filled-hover);
390
403
  --color-lime-light: var(--mantine-color-lime-light);
@@ -393,6 +406,7 @@
393
406
  --color-lime-outline: var(--mantine-color-lime-outline);
394
407
  --color-lime-outline-hover: var(--mantine-color-lime-outline-hover);
395
408
 
409
+ --color-yellow-text: var(--mantine-color-yellow-text);
396
410
  --color-yellow-filled: var(--mantine-color-yellow-filled);
397
411
  --color-yellow-filled-hover: var(--mantine-color-yellow-filled-hover);
398
412
  --color-yellow-light: var(--mantine-color-yellow-light);
@@ -401,6 +415,7 @@
401
415
  --color-yellow-outline: var(--mantine-color-yellow-outline);
402
416
  --color-yellow-outline-hover: var(--mantine-color-yellow-outline-hover);
403
417
 
418
+ --color-orange-text: var(--mantine-color-orange-text);
404
419
  --color-orange-filled: var(--mantine-color-orange-filled);
405
420
  --color-orange-filled-hover: var(--mantine-color-orange-filled-hover);
406
421
  --color-orange-light: var(--mantine-color-orange-light);
package/src/theme.css CHANGED
@@ -38,6 +38,7 @@
38
38
  --color-black: var(--mantine-color-black);
39
39
  --color-bright: var(--mantine-color-bright);
40
40
  --color-body: var(--mantine-color-body);
41
+ --color-text: var(--mantine-color-text);
41
42
  --color-error: var(--mantine-color-error);
42
43
  --color-placeholder: var(--mantine-color-placeholder);
43
44
  --color-anchor: var(--mantine-color-anchor);
@@ -290,6 +291,7 @@
290
291
 
291
292
  /* colors - variant specific */
292
293
 
294
+ --color-dark-text: var(--mantine-color-dark-text);
293
295
  --color-dark-filled: var(--mantine-color-dark-filled);
294
296
  --color-dark-filled-hover: var(--mantine-color-dark-filled-hover);
295
297
  --color-dark-light: var(--mantine-color-dark-light);
@@ -298,6 +300,7 @@
298
300
  --color-dark-outline: var(--mantine-color-dark-outline);
299
301
  --color-dark-outline-hover: var(--mantine-color-dark-outline-hover);
300
302
 
303
+ --color-gray-text: var(--mantine-color-gray-text);
301
304
  --color-gray-filled: var(--mantine-color-gray-filled);
302
305
  --color-gray-filled-hover: var(--mantine-color-gray-filled-hover);
303
306
  --color-gray-light: var(--mantine-color-gray-light);
@@ -306,6 +309,7 @@
306
309
  --color-gray-outline: var(--mantine-color-gray-outline);
307
310
  --color-gray-outline-hover: var(--mantine-color-gray-outline-hover);
308
311
 
312
+ --color-red-text: var(--mantine-color-red-text);
309
313
  --color-red-filled: var(--mantine-color-red-filled);
310
314
  --color-red-filled-hover: var(--mantine-color-red-filled-hover);
311
315
  --color-red-light: var(--mantine-color-red-light);
@@ -314,6 +318,7 @@
314
318
  --color-red-outline: var(--mantine-color-red-outline);
315
319
  --color-red-outline-hover: var(--mantine-color-red-outline-hover);
316
320
 
321
+ --color-pink-text: var(--mantine-color-pink-text);
317
322
  --color-pink-filled: var(--mantine-color-pink-filled);
318
323
  --color-pink-filled-hover: var(--mantine-color-pink-filled-hover);
319
324
  --color-pink-light: var(--mantine-color-pink-light);
@@ -322,6 +327,7 @@
322
327
  --color-pink-outline: var(--mantine-color-pink-outline);
323
328
  --color-pink-outline-hover: var(--mantine-color-pink-outline-hover);
324
329
 
330
+ --color-grape-text: var(--mantine-color-grape-text);
325
331
  --color-grape-filled: var(--mantine-color-grape-filled);
326
332
  --color-grape-filled-hover: var(--mantine-color-grape-filled-hover);
327
333
  --color-grape-light: var(--mantine-color-grape-light);
@@ -330,6 +336,7 @@
330
336
  --color-grape-outline: var(--mantine-color-grape-outline);
331
337
  --color-grape-outline-hover: var(--mantine-color-grape-outline-hover);
332
338
 
339
+ --color-violet-text: var(--mantine-color-violet-text);
333
340
  --color-violet-filled: var(--mantine-color-violet-filled);
334
341
  --color-violet-filled-hover: var(--mantine-color-violet-filled-hover);
335
342
  --color-violet-light: var(--mantine-color-violet-light);
@@ -338,6 +345,7 @@
338
345
  --color-violet-outline: var(--mantine-color-violet-outline);
339
346
  --color-violet-outline-hover: var(--mantine-color-violet-outline-hover);
340
347
 
348
+ --color-indigo-text: var(--mantine-color-indigo-text);
341
349
  --color-indigo-filled: var(--mantine-color-indigo-filled);
342
350
  --color-indigo-filled-hover: var(--mantine-color-indigo-filled-hover);
343
351
  --color-indigo-light: var(--mantine-color-indigo-light);
@@ -346,6 +354,7 @@
346
354
  --color-indigo-outline: var(--mantine-color-indigo-outline);
347
355
  --color-indigo-outline-hover: var(--mantine-color-indigo-outline-hover);
348
356
 
357
+ --color-blue-text: var(--mantine-color-blue-text);
349
358
  --color-blue-filled: var(--mantine-color-blue-filled);
350
359
  --color-blue-filled-hover: var(--mantine-color-blue-filled-hover);
351
360
  --color-blue-light: var(--mantine-color-blue-light);
@@ -354,6 +363,7 @@
354
363
  --color-blue-outline: var(--mantine-color-blue-outline);
355
364
  --color-blue-outline-hover: var(--mantine-color-blue-outline-hover);
356
365
 
366
+ --color-cyan-text: var(--mantine-color-cyan-text);
357
367
  --color-cyan-filled: var(--mantine-color-cyan-filled);
358
368
  --color-cyan-filled-hover: var(--mantine-color-cyan-filled-hover);
359
369
  --color-cyan-light: var(--mantine-color-cyan-light);
@@ -362,6 +372,7 @@
362
372
  --color-cyan-outline: var(--mantine-color-cyan-outline);
363
373
  --color-cyan-outline-hover: var(--mantine-color-cyan-outline-hover);
364
374
 
375
+ --color-teal-text: var(--mantine-color-teal-text);
365
376
  --color-teal-filled: var(--mantine-color-teal-filled);
366
377
  --color-teal-filled-hover: var(--mantine-color-teal-filled-hover);
367
378
  --color-teal-light: var(--mantine-color-teal-light);
@@ -370,6 +381,7 @@
370
381
  --color-teal-outline: var(--mantine-color-teal-outline);
371
382
  --color-teal-outline-hover: var(--mantine-color-teal-outline-hover);
372
383
 
384
+ --color-green-text: var(--mantine-color-green-text);
373
385
  --color-green-filled: var(--mantine-color-green-filled);
374
386
  --color-green-filled-hover: var(--mantine-color-green-filled-hover);
375
387
  --color-green-light: var(--mantine-color-green-light);
@@ -378,6 +390,7 @@
378
390
  --color-green-outline: var(--mantine-color-green-outline);
379
391
  --color-green-outline-hover: var(--mantine-color-green-outline-hover);
380
392
 
393
+ --color-lime-text: var(--mantine-color-lime-text);
381
394
  --color-lime-filled: var(--mantine-color-lime-filled);
382
395
  --color-lime-filled-hover: var(--mantine-color-lime-filled-hover);
383
396
  --color-lime-light: var(--mantine-color-lime-light);
@@ -386,6 +399,7 @@
386
399
  --color-lime-outline: var(--mantine-color-lime-outline);
387
400
  --color-lime-outline-hover: var(--mantine-color-lime-outline-hover);
388
401
 
402
+ --color-yellow-text: var(--mantine-color-yellow-text);
389
403
  --color-yellow-filled: var(--mantine-color-yellow-filled);
390
404
  --color-yellow-filled-hover: var(--mantine-color-yellow-filled-hover);
391
405
  --color-yellow-light: var(--mantine-color-yellow-light);
@@ -394,6 +408,7 @@
394
408
  --color-yellow-outline: var(--mantine-color-yellow-outline);
395
409
  --color-yellow-outline-hover: var(--mantine-color-yellow-outline-hover);
396
410
 
411
+ --color-orange-text: var(--mantine-color-orange-text);
397
412
  --color-orange-filled: var(--mantine-color-orange-filled);
398
413
  --color-orange-filled-hover: var(--mantine-color-orange-filled-hover);
399
414
  --color-orange-light: var(--mantine-color-orange-light);