@matthiaskrijgsman/mat-ui 0.0.17 → 0.0.18
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.
- package/README.md +13 -0
- package/dist/index.js +3537 -3466
- package/dist/index.js.map +1 -1
- package/dist/index.umd.cjs +29 -24
- package/dist/index.umd.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/dist/table/Table.d.ts +20 -2
- package/dist/table/TableColumnHead.d.ts +7 -1
- package/dist/types.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -87,6 +87,19 @@ Define your overrides after importing the mat-ui stylesheet:
|
|
|
87
87
|
| `--color-input-focus-ring` | Focus ring color for buttons and inputs | `rgb(17 24 39 / 0.15)` |
|
|
88
88
|
| `--border-radius-input` | Border radius for inputs and selects | `var(--radius-xl)` |
|
|
89
89
|
|
|
90
|
+
#### Control sizing
|
|
91
|
+
|
|
92
|
+
`Button`, `ButtonIconSquare`, `ButtonIconRound`, `Input`, `InputTextArea`, `InputSelectNative`, `InputSelect`, `InputSelectSearchable`, and `InputSelectSearchableAsync` accept a `size?: 'sm' | 'md' | 'lg'` prop (default `'md'`) and read their dimensions from a single shared scale. Override these to adjust heights, padding, font size, and icon sizing consistently across all controls. Replace `{size}` with `sm`, `md`, or `lg`.
|
|
93
|
+
|
|
94
|
+
| Token | Description | sm · md · lg defaults |
|
|
95
|
+
|-------|-------------|------------------------|
|
|
96
|
+
| `--control-size-{size}-height` | Control height (also width for square/round icon buttons) | `2.5rem` · `3rem` · `3.5rem` |
|
|
97
|
+
| `--control-size-{size}-px` | Horizontal padding | `1rem` · `1rem` · `1.25rem` |
|
|
98
|
+
| `--control-size-{size}-gap` | Gap between icon and label inside buttons | `0.5rem` · `0.5rem` · `0.75rem` |
|
|
99
|
+
| `--control-size-{size}-font-size` | Text size | `1rem` · `1rem` · `1rem` |
|
|
100
|
+
| `--control-size-{size}-icon` | Icon glyph size inside controls | `1rem` · `1.25rem` · `1.5rem` |
|
|
101
|
+
| `--control-size-{size}-icon-offset` | Distance from the input edge to a leading icon (used when an `Icon` prop is set on `Input`) | `1rem` · `1rem` · `1.25rem` |
|
|
102
|
+
|
|
90
103
|
#### Buttons
|
|
91
104
|
|
|
92
105
|
Each button variant (`primary`, `white`, `black`, `transparent`, `secondary`, `tertiary`) uses the same set of tokens. Replace `{variant}` with the variant name.
|