@matthiaskrijgsman/mat-ui 0.0.12 → 0.0.13

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 (8) hide show
  1. package/README.md +213 -1
  2. package/dist/components/BadgeColors.d.ts +24 -24
  3. package/dist/index.js +1108 -1111
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.umd.cjs +24 -27
  6. package/dist/index.umd.cjs.map +1 -1
  7. package/dist/style.css +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -27,4 +27,216 @@ import { Button } from "@matthiaskrijgsman/mat-ui";
27
27
  function App() {
28
28
  return <Button variant={'primary'}>Click me</Button>;
29
29
  }
30
- ```
30
+ ```
31
+
32
+ ## Dark Theme
33
+
34
+ mat-ui ships with built-in dark theme support. Add the `dark` class to the `<html>` element to activate it:
35
+
36
+ ```html
37
+ <html class="dark">
38
+ ```
39
+
40
+ Toggle it with JavaScript:
41
+
42
+ ```ts
43
+ // Manual toggle
44
+ document.documentElement.classList.toggle('dark');
45
+
46
+ // Follow OS preference
47
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
48
+ document.documentElement.classList.toggle('dark', prefersDark);
49
+ ```
50
+
51
+ All components adapt automatically — no additional props or configuration needed.
52
+
53
+ ## CSS Design Tokens
54
+
55
+ mat-ui uses CSS custom properties (design tokens) for all component colors. These are defined on `:root` for light mode and overridden under `.dark` for dark mode. You can customize the look of any component by overriding these tokens in your own CSS.
56
+
57
+ ### Overriding tokens
58
+
59
+ Define your overrides after importing the mat-ui stylesheet:
60
+
61
+ ```css
62
+ @import "@matthiaskrijgsman/mat-ui/style";
63
+
64
+ :root {
65
+ /* Change the primary button to your brand color */
66
+ --color-button-primary-bg: #0ea5e9;
67
+ --color-button-primary-border: #0ea5e9;
68
+ --color-button-primary-bg-active: #0284c7;
69
+ --color-button-primary-border-active: #0284c7;
70
+ }
71
+
72
+ /* Override dark theme values too */
73
+ .dark {
74
+ --color-button-primary-bg: #38bdf8;
75
+ --color-button-primary-border: #38bdf8;
76
+ --color-button-primary-bg-active: #0ea5e9;
77
+ --color-button-primary-border-active: #0ea5e9;
78
+ }
79
+ ```
80
+
81
+ ### Token reference
82
+
83
+ #### General
84
+
85
+ | Token | Description | Light default |
86
+ |-------|-------------|---------------|
87
+ | `--color-input-focus-ring` | Focus ring color for buttons and inputs | `rgb(17 24 39 / 0.15)` |
88
+ | `--border-radius-input` | Border radius for inputs and selects | `var(--radius-xl)` |
89
+
90
+ #### Buttons
91
+
92
+ Each button variant (`primary`, `white`, `black`, `transparent`, `secondary`, `tertiary`) uses the same set of tokens. Replace `{variant}` with the variant name.
93
+
94
+ | Token | Description |
95
+ |-------|-------------|
96
+ | `--color-button-{variant}-bg` | Background color |
97
+ | `--color-button-{variant}-bg-hover` | Background on hover |
98
+ | `--color-button-{variant}-bg-active` | Background on press |
99
+ | `--color-button-{variant}-border` | Border color |
100
+ | `--color-button-{variant}-border-hover` | Border on hover |
101
+ | `--color-button-{variant}-border-active` | Border on press |
102
+ | `--color-button-{variant}-text` | Text color |
103
+ | `--color-button-{variant}-text-active` | Text color on press |
104
+ | `--color-button-{variant}-bg-disabled` | Background when disabled |
105
+ | `--color-button-{variant}-border-disabled` | Border when disabled |
106
+ | `--color-button-{variant}-text-disabled` | Text color when disabled |
107
+
108
+ #### Inputs
109
+
110
+ | Token | Description | Light default |
111
+ |-------|-------------|---------------|
112
+ | `--color-input-bg` | Input background | `#ffffff` |
113
+ | `--color-input-border` | Input border | `#e5e7eb` |
114
+ | `--color-input-text` | Input text color | `#111827` |
115
+ | `--color-input-placeholder` | Placeholder text color | `#9ca3af` |
116
+ | `--color-input-ring` | Ring color on hover | `rgb(17 24 39 / 0.1)` |
117
+ | `--color-input-border-error` | Border color in error state | `#dc2626` |
118
+ | `--color-input-ring-error` | Ring color in error state | `rgb(220 38 38 / 0.2)` |
119
+ | `--color-input-icon` | Leading icon color | `rgb(17 24 39 / 0.6)` |
120
+
121
+ #### Input labels, descriptions & errors
122
+
123
+ | Token | Description | Light default |
124
+ |-------|-------------|---------------|
125
+ | `--color-input-label-text` | Label text color | `#111827` |
126
+ | `--color-input-description-text` | Description text color | `#6b7280` |
127
+ | `--color-input-error-text` | Error message text color | `#dc2626` |
128
+
129
+ #### Input icon buttons
130
+
131
+ | Token | Description | Light default |
132
+ |-------|-------------|---------------|
133
+ | `--color-input-icon-button-ring` | Ring color for icon buttons inside inputs | `#e5e7eb` |
134
+ | `--color-input-icon-button-icon` | Icon color for icon buttons inside inputs | `#6b7280` |
135
+
136
+ #### Select options
137
+
138
+ | Token | Description | Light default |
139
+ |-------|-------------|---------------|
140
+ | `--color-option-bg-hover` | Option background on hover | `#f3f4f6` |
141
+ | `--color-option-bg-active` | Option background on press | `#e5e7eb` |
142
+ | `--color-option-bg-selected` | Selected option background | `#eff6ff` |
143
+ | `--color-option-bg-selected-hover` | Selected option background on hover | `#dbeafe` |
144
+ | `--color-option-bg-selected-active` | Selected option background on press | `#dbeafe` |
145
+ | `--color-option-text-disabled` | Disabled option text color | `#9ca3af` |
146
+ | `--color-input-select-placeholder` | Select placeholder text color | `#6b7280` |
147
+
148
+ #### Select search bar
149
+
150
+ | Token | Description | Light default |
151
+ |-------|-------------|---------------|
152
+ | `--color-select-search-border` | Search input border | `#e5e7eb` |
153
+ | `--color-select-search-bg` | Search input background | `rgb(255 255 255 / 0.5)` |
154
+ | `--color-select-search-icon` | Search icon color | `#6b7280` |
155
+
156
+ #### Toggle
157
+
158
+ | Token | Description | Light default |
159
+ |-------|-------------|---------------|
160
+ | `--color-toggle-track-on-bg` | Track background when on | `#2563eb` |
161
+ | `--color-toggle-track-on-border` | Track border when on | `#2563eb` |
162
+ | `--color-toggle-track-off-bg` | Track background when off | `#d1d5db` |
163
+ | `--color-toggle-track-off-border` | Track border when off | `#d1d5db` |
164
+ | `--color-toggle-thumb-bg` | Thumb background | `#ffffff` |
165
+
166
+ #### Checkbox & Radio
167
+
168
+ | Token | Description | Light default |
169
+ |-------|-------------|---------------|
170
+ | `--color-check-border` | Checkbox/radio border | `#d1d5db` |
171
+ | `--color-check-ring` | Checkbox/radio focus ring | `rgb(17 24 39 / 0.1)` |
172
+
173
+ #### Dropdown menu
174
+
175
+ | Token | Description | Light default |
176
+ |-------|-------------|---------------|
177
+ | `--color-dropdown-bg` | Dropdown panel background | `#ffffff` |
178
+ | `--color-dropdown-border` | Dropdown panel border | `#e5e7eb` |
179
+ | `--color-dropdown-item-bg-hover` | Item background on hover | `#f3f4f6` |
180
+ | `--color-dropdown-item-bg-active` | Item background on press | `#e5e7eb` |
181
+ | `--color-dropdown-item-text` | Item text color | `#111827` |
182
+ | `--color-dropdown-item-ring` | Item focus ring | `rgb(17 24 39 / 0.1)` |
183
+ | `--color-dropdown-group-label` | Group label text color | `#6b7280` |
184
+
185
+ #### Tab buttons
186
+
187
+ | Token | Description | Light default |
188
+ |-------|-------------|---------------|
189
+ | `--color-tab-text` | Tab text and icon color | `#111827` |
190
+ | `--color-tab-container-bg` | Tab bar background | `#f3f4f6` |
191
+ | `--color-tab-bg-hover` | Tab background on hover | `#e5e7eb` |
192
+ | `--color-tab-bg-active` | Tab background on press | `rgb(209 213 219 / 0.8)` |
193
+ | `--color-tab-active-bg` | Active tab background | `#ffffff` |
194
+ | `--color-tab-active-border` | Active tab border | `#e5e7eb` |
195
+
196
+ #### Panel
197
+
198
+ | Token | Description | Light default |
199
+ |-------|-------------|---------------|
200
+ | `--color-panel-bg` | Panel background | `#ffffff` |
201
+ | `--color-panel-border` | Panel border | `#e5e7eb` |
202
+
203
+ #### Modal & Sidebar modal
204
+
205
+ | Token | Description | Light default |
206
+ |-------|-------------|---------------|
207
+ | `--color-modal-overlay` | Backdrop overlay color | `rgb(156 163 175 / 0.3)` |
208
+ | `--color-modal-bg` | Modal content background | `#ffffff` |
209
+
210
+ #### Table
211
+
212
+ | Token | Description | Light default |
213
+ |-------|-------------|---------------|
214
+ | `--color-table-header-text` | Header text color | `#1f2937` |
215
+ | `--color-table-header-bg` | Header background | `#f9fafb` |
216
+ | `--color-table-header-bg-hover` | Header background on hover | `#f3f4f6` |
217
+ | `--color-table-header-bg-active` | Header background on press | `#e5e7eb` |
218
+ | `--color-table-border` | Table border color | `#e5e7eb` |
219
+ | `--color-table-row-bg` | Row background | `#ffffff` |
220
+ | `--color-table-row-bg-hover` | Row background on hover | `#f9fafb` |
221
+ | `--color-table-resize-handle` | Column resize handle | `#e5e7eb` |
222
+ | `--color-table-resize-handle-hover` | Resize handle on hover | `#d1d5db` |
223
+ | `--color-table-resize-handle-active` | Resize handle while dragging | `#2563eb` |
224
+
225
+ #### Divider
226
+
227
+ | Token | Description | Light default |
228
+ |-------|-------------|---------------|
229
+ | `--color-divider` | Divider line color | `#e5e7eb` |
230
+
231
+ #### Badge
232
+
233
+ | Token | Description | Light default |
234
+ |-------|-------------|---------------|
235
+ | `--color-badge-white-bg` | White badge background | `#ffffff` |
236
+ | `--color-badge-white-text` | White badge text | `#111827` |
237
+ | `--color-badge-white-ring` | White badge ring | `#d6d3d1` |
238
+ | `--color-badge-black-bg` | Black badge background | `#000000` |
239
+ | `--color-badge-black-text` | Black badge text | `#ffffff` |
240
+ | `--color-badge-black-ring` | Black badge ring | `#d6d3d1` |
241
+
242
+ > Colored badges (red, blue, green, etc.) use Tailwind color utility classes and are not token-based. They adapt to dark mode automatically via Tailwind's `dark:` variants.
package/dist/components/BadgeColors.d.ts CHANGED
@@ -1,27 +1,27 @@
1
1
  export declare const BadgeColor: {
2
- readonly red: "bg-red-100 text-red-700 ring-red-200";
3
- readonly orange: "bg-orange-100 text-orange-700 ring-orange-200";
4
- readonly amber: "bg-amber-100 text-amber-700 ring-amber-200";
5
- readonly yellow: "bg-yellow-100 text-yellow-700 ring-yellow-200";
6
- readonly lime: "bg-lime-100 text-lime-700 ring-lime-200";
7
- readonly green: "bg-green-100 text-green-700 ring-green-200";
8
- readonly emerald: "bg-emerald-100 text-emerald-700 ring-emerald-200";
9
- readonly teal: "bg-teal-100 text-teal-700 ring-teal-200";
10
- readonly cyan: "bg-cyan-100 text-cyan-700 ring-cyan-200";
11
- readonly sky: "bg-sky-100 text-sky-700 ring-sky-200";
12
- readonly blue: "bg-blue-100 text-blue-700 ring-blue-200";
13
- readonly indigo: "bg-indigo-100 text-indigo-700 ring-indigo-200";
14
- readonly violet: "bg-violet-100 text-violet-700 ring-violet-200";
15
- readonly purple: "bg-purple-100 text-purple-700 ring-purple-200";
16
- readonly fuchsia: "bg-fuchsia-100 text-fuchsia-700 ring-fuchsia-200";
17
- readonly pink: "bg-pink-100 text-pink-700 ring-pink-200";
18
- readonly rose: "bg-rose-100 text-rose-700 ring-rose-200";
19
- readonly slate: "bg-slate-100 text-slate-700 ring-slate-200";
20
- readonly gray: "bg-gray-100 text-gray-700 ring-gray-200";
21
- readonly zinc: "bg-zinc-100 text-zinc-700 ring-zinc-200";
22
- readonly neutral: "bg-neutral-100 text-neutral-700 ring-neutral-200";
23
- readonly stone: "bg-stone-100 text-stone-700 ring-stone-200";
24
- readonly white: "bg-white text-gray-900 ring-stone-200";
25
- readonly black: "bg-black text-white ring-stone-200";
2
+ readonly red: "bg-red-100 text-red-700 ring-red-200 dark:bg-red-950 dark:text-red-300 dark:ring-red-800";
3
+ readonly orange: "bg-orange-100 text-orange-700 ring-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:ring-orange-800";
4
+ readonly amber: "bg-amber-100 text-amber-700 ring-amber-200 dark:bg-amber-950 dark:text-amber-300 dark:ring-amber-800";
5
+ readonly yellow: "bg-yellow-100 text-yellow-700 ring-yellow-200 dark:bg-yellow-950 dark:text-yellow-300 dark:ring-yellow-800";
6
+ readonly lime: "bg-lime-100 text-lime-700 ring-lime-200 dark:bg-lime-950 dark:text-lime-300 dark:ring-lime-800";
7
+ readonly green: "bg-green-100 text-green-700 ring-green-200 dark:bg-green-950 dark:text-green-300 dark:ring-green-800";
8
+ readonly emerald: "bg-emerald-100 text-emerald-700 ring-emerald-200 dark:bg-emerald-950 dark:text-emerald-300 dark:ring-emerald-800";
9
+ readonly teal: "bg-teal-100 text-teal-700 ring-teal-200 dark:bg-teal-950 dark:text-teal-300 dark:ring-teal-800";
10
+ readonly cyan: "bg-cyan-100 text-cyan-700 ring-cyan-200 dark:bg-cyan-950 dark:text-cyan-300 dark:ring-cyan-800";
11
+ readonly sky: "bg-sky-100 text-sky-700 ring-sky-200 dark:bg-sky-950 dark:text-sky-300 dark:ring-sky-800";
12
+ readonly blue: "bg-blue-100 text-blue-700 ring-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:ring-blue-800";
13
+ readonly indigo: "bg-indigo-100 text-indigo-700 ring-indigo-200 dark:bg-indigo-950 dark:text-indigo-300 dark:ring-indigo-800";
14
+ readonly violet: "bg-violet-100 text-violet-700 ring-violet-200 dark:bg-violet-950 dark:text-violet-300 dark:ring-violet-800";
15
+ readonly purple: "bg-purple-100 text-purple-700 ring-purple-200 dark:bg-purple-950 dark:text-purple-300 dark:ring-purple-800";
16
+ readonly fuchsia: "bg-fuchsia-100 text-fuchsia-700 ring-fuchsia-200 dark:bg-fuchsia-950 dark:text-fuchsia-300 dark:ring-fuchsia-800";
17
+ readonly pink: "bg-pink-100 text-pink-700 ring-pink-200 dark:bg-pink-950 dark:text-pink-300 dark:ring-pink-800";
18
+ readonly rose: "bg-rose-100 text-rose-700 ring-rose-200 dark:bg-rose-950 dark:text-rose-300 dark:ring-rose-800";
19
+ readonly slate: "bg-slate-100 text-slate-700 ring-slate-200 dark:bg-slate-950 dark:text-slate-300 dark:ring-slate-800";
20
+ readonly gray: "bg-gray-100 text-gray-700 ring-gray-200 dark:bg-gray-950 dark:text-gray-300 dark:ring-gray-800";
21
+ readonly zinc: "bg-zinc-100 text-zinc-700 ring-zinc-200 dark:bg-zinc-950 dark:text-zinc-300 dark:ring-zinc-800";
22
+ readonly neutral: "bg-neutral-100 text-neutral-700 ring-neutral-200 dark:bg-neutral-950 dark:text-neutral-300 dark:ring-neutral-800";
23
+ readonly stone: "bg-stone-100 text-stone-700 ring-stone-200 dark:bg-stone-950 dark:text-stone-300 dark:ring-stone-800";
24
+ readonly white: "bg-[var(--color-badge-white-bg)] text-[var(--color-badge-white-text)] ring-[var(--color-badge-white-ring)]";
25
+ readonly black: "bg-[var(--color-badge-black-bg)] text-[var(--color-badge-black-text)] ring-[var(--color-badge-black-ring)]";
26
26
  };
27
27
  export type BadgeColorKey = keyof typeof BadgeColor;