@infonomic/uikit 3.2.0 → 3.3.0
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 +172 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,11 +8,17 @@ We created this project because while we appreciate Tailwind CSS for front-end d
|
|
|
8
8
|
|
|
9
9
|
It just doesn't belong in UI kits and libraries.
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## Rationale
|
|
12
|
+
|
|
13
|
+
In addition to our thoughts above, this kit is built around the philosophy of adopting or 'folding in' best-in-class components, like the ones in well-known 'à la carte' headless component libraries such as [Base UI](https://base-ui.com/), [Radix UI](https://www.radix-ui.com/), and [React Aria](https://react-spectrum.adobe.com/react-aria/index.html) as well as individually well-known components such as [React Day Picker](https://github.com/gpbl/react-day-picker) and more.
|
|
14
|
+
|
|
15
|
+
Having lived through a full generation of 'all-in-one' and difficult to override themed UI kits like Bootstrap and Material UI, the trend towards composable headless (unstyled) component libraries is a welcome one - and one that forms the basis of this kit.
|
|
12
16
|
|
|
13
|
-
|
|
17
|
+
Many of the current components are built on Radix UI. The great thing about wrapping these components in a client-consumable interface and library, is that in theory at least, the consumer of our kit's components won't have to worry about implementation details, or migration from Radix UI to Base UI or other. The 'contract' and core styling semantics will never change.
|
|
18
|
+
|
|
19
|
+
## Design Goals
|
|
14
20
|
|
|
15
|
-
We built this with the following goals in mind:
|
|
21
|
+
We built this with the following design goals in mind:
|
|
16
22
|
|
|
17
23
|
1. We'd like a structure and style system that will work with any component framework - [Astro](https://astro.build/), [React](https://react.dev/), [Vue.js](https://vuejs.org/), [Solid](https://www.solidjs.com/), [Svelte](https://svelte.dev/) etc.
|
|
18
24
|
2. We'd like to be able to easily target various front-end meta frameworks, from [Astro](https://astro.build/), to [Next.js](https://nextjs.org/) to [React Router v7](https://reactrouter.com/) (formerly Remix) - and even plain old HTML/CSS.
|
|
@@ -69,11 +75,172 @@ And then in your application in a global.css or other root css file...
|
|
|
69
75
|
@import './app.css';
|
|
70
76
|
```
|
|
71
77
|
|
|
72
|
-
Followed by the below in any of your components or routes
|
|
78
|
+
Followed by the below in any of your components or routes where you'd like to import a component...
|
|
73
79
|
|
|
74
80
|
```ts
|
|
75
81
|
import { Button, Card, Container, Section } from '@infonomic/uikit/react
|
|
76
82
|
|
|
77
83
|
```
|
|
78
84
|
|
|
79
|
-
|
|
85
|
+
## Documentation
|
|
86
|
+
|
|
87
|
+
At the moment self-documented component examples are all based on [Storybook](https://storybook.js.org/). For now at least, in order to view our Storybook stories, you'll need to clone this repo, install all dependencies, then change into the packages/ui directory and start Storybook with `pnpm storybook` or `npm run storybook`.
|
|
88
|
+
|
|
89
|
+
## Tailwind CSS Integration
|
|
90
|
+
|
|
91
|
+
Here's an example Tailwind CSS integration. Note that we have our own reset, and optional typography system and so the order of our imports are a little different from the usual 'Tailwind first' approach. The example below does NOT use the Tailwind CSS rest.
|
|
92
|
+
|
|
93
|
+
```css
|
|
94
|
+
@layer theme, base, components, utilities;
|
|
95
|
+
@import "tailwindcss/theme.css" layer(theme);
|
|
96
|
+
/* @import "tailwindcss/preflight.css" layer(base); */
|
|
97
|
+
@import "tailwindcss/utilities.css" layer(utilities);
|
|
98
|
+
|
|
99
|
+
@custom-variant dark (&:is(.dark *));
|
|
100
|
+
|
|
101
|
+
/*
|
|
102
|
+
Set the utility class in Tailwind to match our own, as for now
|
|
103
|
+
at least, we add the 'container' class attribute to our container
|
|
104
|
+
component - which conflicts with Tailwind's own container utility.
|
|
105
|
+
*/
|
|
106
|
+
@utility container {
|
|
107
|
+
width: 100%;
|
|
108
|
+
padding: 0 16px;
|
|
109
|
+
margin: 0 auto;
|
|
110
|
+
max-width: 960px;
|
|
111
|
+
|
|
112
|
+
/* Large */
|
|
113
|
+
@media (min-width: 1050px) {
|
|
114
|
+
max-width: 1024px;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* X-Large */
|
|
118
|
+
@media (min-width: 1230px) {
|
|
119
|
+
max-width: 1190px;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* 2X-Large */
|
|
123
|
+
@media (min-width: 1500px) {
|
|
124
|
+
max-width: 1400px;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
@theme {
|
|
129
|
+
--breakpoint-*: initial;
|
|
130
|
+
--breakpoint-sm: 640px;
|
|
131
|
+
--breakpoint-md: 768px;
|
|
132
|
+
--breakpoint-lg: 1050px;
|
|
133
|
+
--breakpoint-xl: 1230px;
|
|
134
|
+
--breakpoint-2xl: 1500px;
|
|
135
|
+
|
|
136
|
+
--font-*: initial;
|
|
137
|
+
--font-sans:
|
|
138
|
+
'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
|
|
139
|
+
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
140
|
+
--font-serif: Merriweather, Georgia, Cambria, 'Times New Roman', Times, serif;
|
|
141
|
+
--font-display:
|
|
142
|
+
Roboto, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji,
|
|
143
|
+
Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
|
144
|
+
--font-mono:
|
|
145
|
+
'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
|
146
|
+
'Liberation Mono', 'Courier New', monospace;
|
|
147
|
+
|
|
148
|
+
--color-theme-25: var(--theme-25);
|
|
149
|
+
--color-theme-50: var(--theme-50);
|
|
150
|
+
--color-theme-100: var(--theme-100);
|
|
151
|
+
--color-theme-200: var(--theme-200);
|
|
152
|
+
--color-theme-300: var(--theme-300);
|
|
153
|
+
--color-theme-400: var(--theme-400);
|
|
154
|
+
--color-theme-500: var(--theme-500);
|
|
155
|
+
--color-theme-600: var(--theme-600);
|
|
156
|
+
--color-theme-700: var(--theme-700);
|
|
157
|
+
--color-theme-800: var(--theme-800);
|
|
158
|
+
--color-theme-900: var(--theme-900);
|
|
159
|
+
--color-theme-950: var(--theme-950);
|
|
160
|
+
--color-primary-25: var(--primary-25);
|
|
161
|
+
--color-primary-50: var(--primary-50);
|
|
162
|
+
--color-primary-100: var(--primary-100);
|
|
163
|
+
--color-primary-200: var(--primary-200);
|
|
164
|
+
--color-primary-300: var(--primary-300);
|
|
165
|
+
--color-primary-400: var(--primary-400);
|
|
166
|
+
--color-primary-500: var(--primary-500);
|
|
167
|
+
--color-primary-600: var(--primary-600);
|
|
168
|
+
--color-primary-700: var(--primary-700);
|
|
169
|
+
--color-primary-800: var(--primary-800);
|
|
170
|
+
--color-primary-900: var(--primary-900);
|
|
171
|
+
--color-primary-950: var(--primary-950);
|
|
172
|
+
--color-secondary-25: var(--secondary-25);
|
|
173
|
+
--color-secondary-50: var(--secondary-50);
|
|
174
|
+
--color-secondary-100: var(--secondary-100);
|
|
175
|
+
--color-secondary-200: var(--secondary-200);
|
|
176
|
+
--color-secondary-300: var(--secondary-300);
|
|
177
|
+
--color-secondary-400: var(--secondary-400);
|
|
178
|
+
--color-secondary-500: var(--secondary-500);
|
|
179
|
+
--color-secondary-600: var(--secondary-600);
|
|
180
|
+
--color-secondary-700: var(--secondary-700);
|
|
181
|
+
--color-secondary-800: var(--secondary-800);
|
|
182
|
+
--color-secondary-900: var(--secondary-900);
|
|
183
|
+
--color-secondary-950: var(--secondary-950);
|
|
184
|
+
--color-accent-25: var(--accent-25);
|
|
185
|
+
--color-accent-50: var(--accent-50);
|
|
186
|
+
--color-accent-100: var(--accent-100);
|
|
187
|
+
--color-accent-200: var(--accent-200);
|
|
188
|
+
--color-accent-300: var(--accent-300);
|
|
189
|
+
--color-accent-400: var(--accent-400);
|
|
190
|
+
--color-accent-500: var(--accent-500);
|
|
191
|
+
--color-accent-600: var(--accent-600);
|
|
192
|
+
--color-accent-700: var(--accent-700);
|
|
193
|
+
--color-accent-800: var(--accent-800);
|
|
194
|
+
--color-accent-900: var(--accent-900);
|
|
195
|
+
--color-accent-950: var(--accent-950);
|
|
196
|
+
--color-gray-25: var(--gray-25);
|
|
197
|
+
--color-gray-50: var(--gray-50);
|
|
198
|
+
--color-gray-100: var(--gray-100);
|
|
199
|
+
--color-gray-200: var(--gray-200);
|
|
200
|
+
--color-gray-300: var(--gray-300);
|
|
201
|
+
--color-gray-400: var(--gray-400);
|
|
202
|
+
--color-gray-500: var(--gray-500);
|
|
203
|
+
--color-gray-600: var(--gray-600);
|
|
204
|
+
--color-gray-700: var(--gray-700);
|
|
205
|
+
--color-gray-800: var(--gray-800);
|
|
206
|
+
--color-gray-900: var(--gray-900);
|
|
207
|
+
--color-gray-950: var(--gray-950);
|
|
208
|
+
--color-canvas-25: var(--canvas-25);
|
|
209
|
+
--color-canvas-50: var(--canvas-50);
|
|
210
|
+
--color-canvas-100: var(--canvas-100);
|
|
211
|
+
--color-canvas-200: var(--canvas-200);
|
|
212
|
+
--color-canvas-300: var(--canvas-300);
|
|
213
|
+
--color-canvas-400: var(--canvas-400);
|
|
214
|
+
--color-canvas-500: var(--canvas-500);
|
|
215
|
+
--color-canvas-600: var(--canvas-600);
|
|
216
|
+
--color-canvas-700: var(--canvas-700);
|
|
217
|
+
--color-canvas-800: var(--canvas-800);
|
|
218
|
+
--color-canvas-900: var(--canvas-900);
|
|
219
|
+
--color-canvas-950: var(--canvas-950);
|
|
220
|
+
--color-background: var(--background);
|
|
221
|
+
--color-foreground: var(--foreground);
|
|
222
|
+
|
|
223
|
+
--grid-template-columns-auto-fit-240: repeat(auto-fit, minmax(240px, 1fr));
|
|
224
|
+
--grid-template-columns-auto-fit-280: repeat(auto-fit, minmax(280px, 1fr));
|
|
225
|
+
--grid-template-columns-auto-fit-320: repeat(auto-fit, minmax(320px, 1fr));
|
|
226
|
+
--grid-template-columns-auto-fit-480: repeat(auto-fit, minmax(480px, 1fr));
|
|
227
|
+
|
|
228
|
+
--shadow-slider: 0 0 0 5px rgba(0, 0, 0, 0.3);
|
|
229
|
+
}
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
## Questions or Comments?
|
|
233
|
+
|
|
234
|
+
Feel free to get in touch by reaching out to us at https://infonomic.io, or by posting questions, issues, or PRs to our github repo at https://github.com/infonomic/uikit
|
|
235
|
+
|
|
236
|
+
## License
|
|
237
|
+
|
|
238
|
+
Infonomic UI Kit is free software licensed under the MIT license.
|
|
239
|
+
For full details, please refer to the [LICENSE](LICENSE) and [COPYRIGHT](COPYRIGHT) files in this repository.
|
|
240
|
+
|
|
241
|
+
Copyright © 2025 Anthony Bouch and contributors.
|
|
242
|
+
|
|
243
|
+
### Major Contributors
|
|
244
|
+
|
|
245
|
+
* Anthony Bouch https://www.linkedin.com/in/anthonybouch/ anthony@infonomic.io
|
|
246
|
+
* David Lipsky https://www.linkedin.com/in/david-lipsky-4391862a8/ david@infonomic.io
|
package/package.json
CHANGED