@trinityui/design-system 1.0.9 → 1.0.10
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/CHANGELOG.md +18 -0
- package/README.md +88 -238
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,21 @@
|
|
|
1
|
+
## [1.0.10](https://github.com/Trinity-UI-Components/trinity-design-system/compare/v1.0.0...v1.0.10) (2026-02-24)
|
|
2
|
+
|
|
3
|
+
### Features
|
|
4
|
+
|
|
5
|
+
* **css:** expand trinity.css with comprehensive design tokens ([e1a9f22](https://github.com/Trinity-UI-Components/trinity-design-system/commit/e1a9f22c97d58959afcbf0d4c1aa76a76db52126))
|
|
6
|
+
* simplify dependencies - remove date-pickers, add SimpleTable ([ee02f3e](https://github.com/Trinity-UI-Components/trinity-design-system/commit/ee02f3e299e13173e77355925dca513f3becf8a4))
|
|
7
|
+
* simplify developer experience with essentials entry point ([a7e4a2f](https://github.com/Trinity-UI-Components/trinity-design-system/commit/a7e4a2fb1b221da9c2ee01f1b8c1a851f4e45697))
|
|
8
|
+
* **storybook:** add interactive Component Picker page ([2642326](https://github.com/Trinity-UI-Components/trinity-design-system/commit/2642326fbb68d30c865ea008cdb283fff96562a1))
|
|
9
|
+
* **storybook:** add Trinity branding with custom logo and theme ([8859283](https://github.com/Trinity-UI-Components/trinity-design-system/commit/8859283b58ad77f22b303f0e31f915c0f4f9aecd)), closes [#050742](https://github.com/Trinity-UI-Components/trinity-design-system/issues/050742) [#7841C9](https://github.com/Trinity-UI-Components/trinity-design-system/issues/7841C9)
|
|
10
|
+
* **theme:** add theme presets system for app variations ([ec21481](https://github.com/Trinity-UI-Components/trinity-design-system/commit/ec2148114bfb33b508755675abcd00a0abf3662c))
|
|
11
|
+
* **TopNav:** add white-label logo support with invert option ([0d0a337](https://github.com/Trinity-UI-Components/trinity-design-system/commit/0d0a337de5500ac75919b4ccead9c6b159775600))
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* **DataCard:** use theme-aware status backgrounds for dark mode ([621a039](https://github.com/Trinity-UI-Components/trinity-design-system/commit/621a039446736238cabb7ed5919333c97145f009)), closes [#F0FDF4](https://github.com/Trinity-UI-Components/trinity-design-system/issues/F0FDF4) [#FFFBEB](https://github.com/Trinity-UI-Components/trinity-design-system/issues/FFFBEB)
|
|
16
|
+
* improve Storybook configurability and documentation ([912194f](https://github.com/Trinity-UI-Components/trinity-design-system/commit/912194f35d20903d9252f25cb87ae7b7fc266db5))
|
|
17
|
+
* replace light-mode-only overlays with theme-aware action palette ([00ff8ad](https://github.com/Trinity-UI-Components/trinity-design-system/commit/00ff8adb5a5b345e6a8c239da792276d2e38aa94))
|
|
18
|
+
* update CSS theme to match brandColors from theme.ts ([481e0ca](https://github.com/Trinity-UI-Components/trinity-design-system/commit/481e0cafb55eed6c6d426115f25c3cfaef918b1e))
|
|
1
19
|
## [1.0.9](https://github.com/Trinity-UI-Components/trinity-design-system/compare/v1.0.0...v1.0.9) (2026-02-24)
|
|
2
20
|
|
|
3
21
|
### Features
|
package/README.md
CHANGED
|
@@ -1,304 +1,154 @@
|
|
|
1
1
|
# Trinity Design System
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Trinity Design System is an enterprise component platform built on MUI.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@trinityui/design-system)
|
|
6
|
+
[](https://www.npmjs.com/package/@trinityui/design-system-css)
|
|
7
|
+
[](https://github.com/Trinity-UI-Components/trinity-design-system/actions/workflows/publish-npm-on-main.yml)
|
|
8
|
+
[](https://github.com/Trinity-UI-Components/trinity-design-system/actions/workflows/publish-css-on-main.yml)
|
|
9
|
+
[](./LICENSE)
|
|
10
|
+
|
|
11
|
+
It provides:
|
|
12
|
+
- A React component library: `@trinityui/design-system`
|
|
13
|
+
- A CSS-only package for non-React apps: `@trinityui/design-system-css`
|
|
14
|
+
|
|
15
|
+
## Architecture
|
|
16
|
+
|
|
17
|
+
```mermaid
|
|
18
|
+
flowchart LR
|
|
19
|
+
A["Design Tokens"] --> B["Theme Layer"]
|
|
20
|
+
B --> C["React Components<br/>@trinityui/design-system"]
|
|
21
|
+
A --> D["CSS Variables Build"]
|
|
22
|
+
D --> E["CSS Package<br/>@trinityui/design-system-css"]
|
|
23
|
+
C --> F["React Consumer Apps"]
|
|
24
|
+
E --> G["Angular / Vue / Static Apps"]
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Packages
|
|
28
|
+
|
|
29
|
+
| Package | Use Case |
|
|
30
|
+
|---|---|
|
|
31
|
+
| `@trinityui/design-system` | React + MUI applications |
|
|
32
|
+
| `@trinityui/design-system-css` | Angular, Vue, static HTML, or any CSS-only integration |
|
|
33
|
+
|
|
34
|
+
## Installation
|
|
35
|
+
|
|
36
|
+
### React package
|
|
4
37
|
|
|
5
38
|
```bash
|
|
6
|
-
|
|
39
|
+
pnpm add @trinityui/design-system react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled
|
|
7
40
|
```
|
|
8
41
|
|
|
9
|
-
|
|
42
|
+
### CSS-only package
|
|
10
43
|
|
|
11
44
|
```bash
|
|
12
|
-
|
|
45
|
+
pnpm add @trinityui/design-system-css
|
|
13
46
|
```
|
|
14
47
|
|
|
15
|
-
##
|
|
48
|
+
## React Quick Start
|
|
16
49
|
|
|
17
50
|
```tsx
|
|
18
|
-
// App.tsx
|
|
19
51
|
import { ThemeProvider, CssBaseline } from '@mui/material';
|
|
20
52
|
import { lightTheme } from '@trinityui/design-system';
|
|
21
53
|
|
|
22
|
-
function
|
|
54
|
+
export function AppProviders({ children }: { children: React.ReactNode }) {
|
|
23
55
|
return (
|
|
24
56
|
<ThemeProvider theme={lightTheme}>
|
|
25
57
|
<CssBaseline />
|
|
26
|
-
|
|
58
|
+
{children}
|
|
27
59
|
</ThemeProvider>
|
|
28
60
|
);
|
|
29
61
|
}
|
|
30
62
|
```
|
|
31
63
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
---
|
|
35
|
-
|
|
36
|
-
## The Golden Rule
|
|
64
|
+
## Import Strategy
|
|
37
65
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
### ✅ Use MUI (99% of your code)
|
|
41
|
-
|
|
42
|
-
```tsx
|
|
43
|
-
import { Button, Card, TextField, Typography, Chip } from '@mui/material';
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
These are already styled by Trinity's theme. No extra imports needed.
|
|
47
|
-
|
|
48
|
-
### ✅ Use Trinity (only for these)
|
|
66
|
+
Use MUI for standard UI primitives, and Trinity for domain-specific components and tokens.
|
|
49
67
|
|
|
50
68
|
```tsx
|
|
51
|
-
import {
|
|
52
|
-
|
|
53
|
-
Modal, // Accessible modal dialogs
|
|
54
|
-
Toast, useToast, // Notifications
|
|
55
|
-
FileUpload, // Drag-and-drop upload
|
|
56
|
-
SimpleTable, // Basic table (no dependencies)
|
|
57
|
-
DataCard, // KPI/metric cards
|
|
58
|
-
} from '@trinityui/design-system';
|
|
69
|
+
import { Button, Card, TextField } from '@mui/material';
|
|
70
|
+
import { StatusIndicator, Toast, useToast } from '@trinityui/design-system';
|
|
59
71
|
```
|
|
60
72
|
|
|
61
|
-
|
|
73
|
+
## Entry Points
|
|
62
74
|
|
|
63
|
-
|
|
|
64
|
-
|
|
65
|
-
|
|
|
66
|
-
|
|
|
67
|
-
|
|
|
68
|
-
|
|
|
69
|
-
|
|
|
70
|
-
|
|
|
71
|
-
| Charts | `recharts` (optional dep) |
|
|
75
|
+
| Import | Purpose |
|
|
76
|
+
|---|---|
|
|
77
|
+
| `@trinityui/design-system` | Full API |
|
|
78
|
+
| `@trinityui/design-system/essentials` | Lean entry for common setup and core components |
|
|
79
|
+
| `@trinityui/design-system/theme` | Theme-only exports |
|
|
80
|
+
| `@trinityui/design-system/tokens` | Token-only exports |
|
|
81
|
+
| `@trinityui/design-system/data-table` | DataTable exports (requires `@mui/x-data-grid`) |
|
|
82
|
+
| `@trinityui/design-system/css` | CSS file from the React package |
|
|
72
83
|
|
|
73
|
-
|
|
84
|
+
## Optional Feature Dependency
|
|
74
85
|
|
|
75
|
-
|
|
86
|
+
`DataTable` is intentionally isolated behind a subpath.
|
|
76
87
|
|
|
77
|
-
|
|
78
|
-
|--------|--------------|
|
|
79
|
-
| `/essentials` | **Start here.** Theme + 10 components (16 exports) |
|
|
80
|
-
| Main | Full API (100+ exports) |
|
|
81
|
-
| `/theme` | Theme utilities only |
|
|
82
|
-
| `/tokens` | Design tokens only |
|
|
83
|
-
| `/css` | CSS variables (no React) |
|
|
84
|
-
|
|
85
|
-
```tsx
|
|
86
|
-
// Recommended for most projects
|
|
87
|
-
import { lightTheme, StatusIndicator, Modal } from '@trinityui/design-system/essentials';
|
|
88
|
+
Install dependency only if you use it:
|
|
88
89
|
|
|
89
|
-
|
|
90
|
-
|
|
90
|
+
```bash
|
|
91
|
+
pnpm add @mui/x-data-grid
|
|
91
92
|
```
|
|
92
93
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
## Dark Mode
|
|
94
|
+
Import from:
|
|
96
95
|
|
|
97
96
|
```tsx
|
|
98
|
-
import {
|
|
99
|
-
|
|
100
|
-
const theme = isDarkMode ? darkTheme : lightTheme;
|
|
97
|
+
import { DataTable } from '@trinityui/design-system/data-table';
|
|
101
98
|
```
|
|
102
99
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
## CSS-Only Theme (No React)
|
|
100
|
+
## CSS-Only Usage
|
|
106
101
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
📄 **[View CSS Source](src/styles/trinity.css)**
|
|
110
|
-
|
|
111
|
-
### When to Use CSS-Only
|
|
112
|
-
|
|
113
|
-
| Use Case | Solution |
|
|
114
|
-
|----------|----------|
|
|
115
|
-
| React + MUI app | Use `lightTheme` / `darkTheme` (JS) |
|
|
116
|
-
| Static HTML site | Use CSS file |
|
|
117
|
-
| Vue / Angular / Svelte | Use CSS file |
|
|
118
|
-
| WordPress / PHP | Use CSS file |
|
|
119
|
-
| Email templates | Use CSS file |
|
|
120
|
-
|
|
121
|
-
### Setup
|
|
122
|
-
|
|
123
|
-
```html
|
|
124
|
-
<!-- Option 1: Link directly -->
|
|
125
|
-
<link rel="stylesheet" href="node_modules/@trinityui/design-system/dist/trinity.css" />
|
|
126
|
-
|
|
127
|
-
<!-- Option 2: Copy to your project -->
|
|
128
|
-
<link rel="stylesheet" href="/css/trinity.css" />
|
|
129
|
-
```
|
|
102
|
+
### Option 1: package CSS import
|
|
130
103
|
|
|
131
104
|
```css
|
|
132
|
-
|
|
133
|
-
@import '@trinityui/design-system/css';
|
|
105
|
+
@import '@trinityui/design-system-css';
|
|
134
106
|
```
|
|
135
107
|
|
|
136
|
-
###
|
|
137
|
-
|
|
138
|
-
```css
|
|
139
|
-
/* Use Trinity variables in your styles */
|
|
140
|
-
.card {
|
|
141
|
-
background: var(--trinity-surface);
|
|
142
|
-
border: 1px solid var(--trinity-border);
|
|
143
|
-
border-radius: var(--trinity-radius-lg);
|
|
144
|
-
padding: var(--trinity-space-4);
|
|
145
|
-
box-shadow: var(--trinity-shadow-md);
|
|
146
|
-
font-family: var(--trinity-font-family);
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
.button-primary {
|
|
150
|
-
background: var(--trinity-coral);
|
|
151
|
-
color: var(--trinity-white);
|
|
152
|
-
border-radius: var(--trinity-radius-pill);
|
|
153
|
-
padding: var(--trinity-space-2) var(--trinity-space-4);
|
|
154
|
-
}
|
|
108
|
+
### Option 2: direct file path
|
|
155
109
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
background: var(--trinity-success-bg);
|
|
159
|
-
}
|
|
110
|
+
```html
|
|
111
|
+
<link rel="stylesheet" href="node_modules/@trinityui/design-system-css/dist/trinity.css" />
|
|
160
112
|
```
|
|
161
113
|
|
|
162
|
-
### Dark
|
|
114
|
+
### Dark mode
|
|
163
115
|
|
|
164
116
|
```html
|
|
165
|
-
<!-- Add attribute to enable dark mode -->
|
|
166
117
|
<html data-theme="dark">
|
|
167
118
|
```
|
|
168
119
|
|
|
169
|
-
|
|
170
|
-
// Toggle with JavaScript
|
|
171
|
-
document.documentElement.setAttribute('data-theme', 'dark');
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
### Available Variables
|
|
175
|
-
|
|
176
|
-
| Category | Examples |
|
|
177
|
-
|----------|----------|
|
|
178
|
-
| Brand | `--trinity-navy`, `--trinity-coral`, `--trinity-purple`, `--trinity-azure` |
|
|
179
|
-
| Semantic | `--trinity-text`, `--trinity-background`, `--trinity-surface`, `--trinity-border` |
|
|
180
|
-
| Status | `--trinity-success`, `--trinity-warning`, `--trinity-error`, `--trinity-info` |
|
|
181
|
-
| Spacing | `--trinity-space-1` through `--trinity-space-16` |
|
|
182
|
-
| Radius | `--trinity-radius-sm`, `--trinity-radius-md`, `--trinity-radius-lg`, `--trinity-radius-pill` |
|
|
183
|
-
| Typography | `--trinity-font-family`, `--trinity-text-sm`, `--trinity-font-bold` |
|
|
184
|
-
| Shadows | `--trinity-shadow-sm`, `--trinity-shadow-md`, `--trinity-shadow-lg` |
|
|
120
|
+
## Theming
|
|
185
121
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
## Optional Dependencies
|
|
189
|
-
|
|
190
|
-
Only install if you need these features:
|
|
122
|
+
```tsx
|
|
123
|
+
import { lightTheme, darkTheme } from '@trinityui/design-system';
|
|
191
124
|
|
|
192
|
-
|
|
193
|
-
npm install @mui/x-data-grid # For DataTable component
|
|
194
|
-
npm install recharts # For Charts components
|
|
125
|
+
const theme = isDarkMode ? darkTheme : lightTheme;
|
|
195
126
|
```
|
|
196
127
|
|
|
197
|
-
> 💡 Use `SimpleTable` for basic tables — no extra deps needed.
|
|
198
|
-
|
|
199
|
-
---
|
|
200
|
-
|
|
201
128
|
## Development
|
|
202
129
|
|
|
203
130
|
```bash
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
```
|
|
210
|
-
|
|
211
|
-
---
|
|
212
|
-
|
|
213
|
-
## Developer Quick Start
|
|
214
|
-
|
|
215
|
-
### 1. Clone & Install
|
|
216
|
-
|
|
217
|
-
```bash
|
|
218
|
-
git clone git@github.com:Trinity-UI-Components/trinity-design-system.git
|
|
219
|
-
cd trinity-design-system
|
|
220
|
-
npm install
|
|
221
|
-
```
|
|
222
|
-
|
|
223
|
-
### 2. Run Storybook
|
|
224
|
-
|
|
225
|
-
```bash
|
|
226
|
-
npm run storybook
|
|
131
|
+
pnpm install
|
|
132
|
+
pnpm run start
|
|
133
|
+
pnpm run build
|
|
134
|
+
pnpm run test
|
|
135
|
+
pnpm run lint
|
|
227
136
|
```
|
|
228
137
|
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
### 3. Project Structure
|
|
232
|
-
|
|
233
|
-
```
|
|
234
|
-
src/
|
|
235
|
-
├── components/ # All components
|
|
236
|
-
├── theme.ts # MUI theme (lightTheme, darkTheme)
|
|
237
|
-
├── tokens.ts # Design tokens
|
|
238
|
-
├── essentials.ts # Simplified entry point
|
|
239
|
-
├── index.ts # Full public API
|
|
240
|
-
└── stories/ # Storybook stories
|
|
241
|
-
```
|
|
242
|
-
|
|
243
|
-
### 4. Create a New Component
|
|
244
|
-
|
|
245
|
-
```tsx
|
|
246
|
-
// src/components/MyComponent/MyComponent.tsx
|
|
247
|
-
import { Box } from '@mui/material';
|
|
248
|
-
import { semanticTokens } from '../../tokens';
|
|
249
|
-
|
|
250
|
-
export interface MyComponentProps {
|
|
251
|
-
label: string;
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
export const MyComponent = ({ label }: MyComponentProps) => (
|
|
255
|
-
<Box sx={{ color: semanticTokens.text.primary }}>
|
|
256
|
-
{label}
|
|
257
|
-
</Box>
|
|
258
|
-
);
|
|
259
|
-
|
|
260
|
-
// src/components/MyComponent/index.ts
|
|
261
|
-
export { MyComponent } from './MyComponent';
|
|
262
|
-
export type { MyComponentProps } from './MyComponent';
|
|
263
|
-
```
|
|
264
|
-
|
|
265
|
-
### 5. Add a Story
|
|
266
|
-
|
|
267
|
-
```tsx
|
|
268
|
-
// src/stories/MyComponent.stories.tsx
|
|
269
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
|
270
|
-
import { MyComponent } from '../components/MyComponent';
|
|
271
|
-
|
|
272
|
-
const meta: Meta<typeof MyComponent> = {
|
|
273
|
-
title: 'Components/MyComponent',
|
|
274
|
-
component: MyComponent,
|
|
275
|
-
tags: ['autodocs'],
|
|
276
|
-
};
|
|
277
|
-
export default meta;
|
|
278
|
-
|
|
279
|
-
type Story = StoryObj<typeof meta>;
|
|
280
|
-
|
|
281
|
-
export const Default: Story = {
|
|
282
|
-
args: { label: 'Hello World' },
|
|
283
|
-
};
|
|
284
|
-
```
|
|
285
|
-
|
|
286
|
-
### 6. Export from Public API
|
|
287
|
-
|
|
288
|
-
```tsx
|
|
289
|
-
// src/index.ts
|
|
290
|
-
export { MyComponent } from './components/MyComponent';
|
|
291
|
-
export type { MyComponentProps } from './components/MyComponent';
|
|
292
|
-
```
|
|
138
|
+
## Release and Publishing
|
|
293
139
|
|
|
294
|
-
|
|
140
|
+
- Push to `main` triggers publish workflows for:
|
|
141
|
+
- `@trinityui/design-system`
|
|
142
|
+
- `@trinityui/design-system-css`
|
|
143
|
+
- Version is auto-bumped if the current version is already published.
|
|
144
|
+
- `CHANGELOG.md` is generated during release workflow.
|
|
295
145
|
|
|
296
|
-
##
|
|
146
|
+
## Support Docs
|
|
297
147
|
|
|
298
|
-
- [
|
|
299
|
-
- [
|
|
300
|
-
- [
|
|
148
|
+
- [MIGRATION.md](./MIGRATION.md)
|
|
149
|
+
- [CONTRIBUTING.md](./CONTRIBUTING.md)
|
|
150
|
+
- [CHANGELOG.md](./CHANGELOG.md)
|
|
301
151
|
|
|
302
|
-
|
|
152
|
+
## License
|
|
303
153
|
|
|
304
|
-
MIT
|
|
154
|
+
MIT
|
package/package.json
CHANGED