@trinityui/design-system 1.0.9 → 1.0.11

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 (3) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/README.md +79 -238
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,39 @@
1
+ ## [1.0.11](https://github.com/Trinity-UI-Components/trinity-design-system/compare/v1.0.0...v1.0.11) (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))
19
+ ## [1.0.10](https://github.com/Trinity-UI-Components/trinity-design-system/compare/v1.0.0...v1.0.10) (2026-02-24)
20
+
21
+ ### Features
22
+
23
+ * **css:** expand trinity.css with comprehensive design tokens ([e1a9f22](https://github.com/Trinity-UI-Components/trinity-design-system/commit/e1a9f22c97d58959afcbf0d4c1aa76a76db52126))
24
+ * simplify dependencies - remove date-pickers, add SimpleTable ([ee02f3e](https://github.com/Trinity-UI-Components/trinity-design-system/commit/ee02f3e299e13173e77355925dca513f3becf8a4))
25
+ * simplify developer experience with essentials entry point ([a7e4a2f](https://github.com/Trinity-UI-Components/trinity-design-system/commit/a7e4a2fb1b221da9c2ee01f1b8c1a851f4e45697))
26
+ * **storybook:** add interactive Component Picker page ([2642326](https://github.com/Trinity-UI-Components/trinity-design-system/commit/2642326fbb68d30c865ea008cdb283fff96562a1))
27
+ * **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)
28
+ * **theme:** add theme presets system for app variations ([ec21481](https://github.com/Trinity-UI-Components/trinity-design-system/commit/ec2148114bfb33b508755675abcd00a0abf3662c))
29
+ * **TopNav:** add white-label logo support with invert option ([0d0a337](https://github.com/Trinity-UI-Components/trinity-design-system/commit/0d0a337de5500ac75919b4ccead9c6b159775600))
30
+
31
+ ### Bug Fixes
32
+
33
+ * **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)
34
+ * improve Storybook configurability and documentation ([912194f](https://github.com/Trinity-UI-Components/trinity-design-system/commit/912194f35d20903d9252f25cb87ae7b7fc266db5))
35
+ * replace light-mode-only overlays with theme-aware action palette ([00ff8ad](https://github.com/Trinity-UI-Components/trinity-design-system/commit/00ff8adb5a5b345e6a8c239da792276d2e38aa94))
36
+ * update CSS theme to match brandColors from theme.ts ([481e0ca](https://github.com/Trinity-UI-Components/trinity-design-system/commit/481e0cafb55eed6c6d426115f25c3cfaef918b1e))
1
37
  ## [1.0.9](https://github.com/Trinity-UI-Components/trinity-design-system/compare/v1.0.0...v1.0.9) (2026-02-24)
2
38
 
3
39
  ### Features
package/README.md CHANGED
@@ -1,304 +1,145 @@
1
1
  # Trinity Design System
2
2
 
3
- MUI v6/7 with Trinity branding. WCAG 2.1 AA accessible.
3
+ Trinity Design System is an enterprise component platform built on MUI for [Trinity LifeSciences](https://trinitylifesciences.com).
4
+
5
+ [![npm version](https://img.shields.io/npm/v/@trinityui/design-system.svg)](https://www.npmjs.com/package/@trinityui/design-system)
6
+ [![npm css package](https://img.shields.io/npm/v/@trinityui/design-system-css.svg)](https://www.npmjs.com/package/@trinityui/design-system-css)
7
+ [![license](https://img.shields.io/npm/l/@trinityui/design-system.svg)](./LICENSE)
8
+
9
+ It provides:
10
+ - A React component library: `@trinityui/design-system`
11
+ - A CSS-only package for non-React apps: `@trinityui/design-system-css`
12
+
13
+ ## Architecture
14
+
15
+ `Design Tokens` -> `Theme Layer` -> `React Components (@trinityui/design-system)` -> `React Consumer Apps`
16
+ `Design Tokens` -> `CSS Variables Build` -> `CSS Package (@trinityui/design-system-css)` -> `Angular / Vue / Static Apps`
17
+
18
+ ## Packages
19
+
20
+ | Package | Use Case |
21
+ |---|---|
22
+ | `@trinityui/design-system` | React + MUI applications |
23
+ | `@trinityui/design-system-css` | Angular, Vue, static HTML, or any CSS-only integration |
24
+
25
+ ## Installation
26
+
27
+ ### React package
4
28
 
5
29
  ```bash
6
- npm install @trinityui/design-system @mui/material @mui/icons-material @emotion/react @emotion/styled
30
+ pnpm add @trinityui/design-system react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled
7
31
  ```
8
32
 
9
- For Angular/Vue/static HTML (CSS only, no React components):
33
+ ### CSS-only package
10
34
 
11
35
  ```bash
12
- npm install @trinityui/design-system-css
36
+ pnpm add @trinityui/design-system-css
13
37
  ```
14
38
 
15
- ## Setup (One Time)
39
+ ## React Quick Start
16
40
 
17
41
  ```tsx
18
- // App.tsx
19
42
  import { ThemeProvider, CssBaseline } from '@mui/material';
20
43
  import { lightTheme } from '@trinityui/design-system';
21
44
 
22
- function App() {
45
+ export function AppProviders({ children }: { children: React.ReactNode }) {
23
46
  return (
24
47
  <ThemeProvider theme={lightTheme}>
25
48
  <CssBaseline />
26
- <YourApp />
49
+ {children}
27
50
  </ThemeProvider>
28
51
  );
29
52
  }
30
53
  ```
31
54
 
32
- **That's it.** All MUI components now have Trinity styling.
33
-
34
- ---
35
-
36
- ## The Golden Rule
37
-
38
- > **Use MUI for everything.** Trinity just gives you a theme + a few custom components.
55
+ ## Import Strategy
39
56
 
40
- ### ✅ Use MUI (99% of your code)
57
+ Use MUI for standard UI primitives, and Trinity for domain-specific components and tokens.
41
58
 
42
59
  ```tsx
43
- import { Button, Card, TextField, Typography, Chip } from '@mui/material';
60
+ import { Button, Card, TextField } from '@mui/material';
61
+ import { StatusIndicator, Toast, useToast } from '@trinityui/design-system';
44
62
  ```
45
63
 
46
- These are already styled by Trinity's theme. No extra imports needed.
47
-
48
- ### ✅ Use Trinity (only for these)
49
-
50
- ```tsx
51
- import {
52
- StatusIndicator, // Status badges (success/warning/error)
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';
59
- ```
60
-
61
- ### Quick Reference
64
+ ## Entry Points
62
65
 
63
- | Need | Import From |
64
- |------|-------------|
65
- | Button, Card, TextField, etc. | `@mui/material` |
66
- | Status badge | `StatusIndicator` from Trinity |
67
- | Modal dialog | `Modal` from Trinity |
68
- | Toast notification | `Toast` from Trinity |
69
- | Simple table | `SimpleTable` from Trinity |
70
- | Advanced data grid | `@mui/x-data-grid` (optional dep) |
71
- | Charts | `recharts` (optional dep) |
66
+ | Import | Purpose |
67
+ |---|---|
68
+ | `@trinityui/design-system` | Full API |
69
+ | `@trinityui/design-system/essentials` | Lean entry for common setup and core components |
70
+ | `@trinityui/design-system/theme` | Theme-only exports |
71
+ | `@trinityui/design-system/tokens` | Token-only exports |
72
+ | `@trinityui/design-system/data-table` | DataTable exports (requires `@mui/x-data-grid`) |
73
+ | `@trinityui/design-system/css` | CSS file from the React package |
72
74
 
73
- ---
75
+ ## Optional Feature Dependency
74
76
 
75
- ## Entry Points
77
+ `DataTable` is intentionally isolated behind a subpath.
76
78
 
77
- | Import | What You Get |
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) |
79
+ Install dependency only if you use it:
84
80
 
85
- ```tsx
86
- // Recommended for most projects
87
- import { lightTheme, StatusIndicator, Modal } from '@trinityui/design-system/essentials';
88
-
89
- // Full API when needed
90
- import { TopNavHeader, InsightEngine, DataTable } from '@trinityui/design-system';
81
+ ```bash
82
+ pnpm add @mui/x-data-grid
91
83
  ```
92
84
 
93
- ---
94
-
95
- ## Dark Mode
85
+ Import from:
96
86
 
97
87
  ```tsx
98
- import { lightTheme, darkTheme } from '@trinityui/design-system';
99
-
100
- const theme = isDarkMode ? darkTheme : lightTheme;
88
+ import { DataTable } from '@trinityui/design-system/data-table';
101
89
  ```
102
90
 
103
- ---
104
-
105
- ## CSS-Only Theme (No React)
106
-
107
- For projects **without React** (static HTML, Vue, Angular, vanilla JS), use the CSS file directly.
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
91
+ ## CSS-Only Usage
122
92
 
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
- ```
93
+ ### Option 1: package CSS import
130
94
 
131
95
  ```css
132
- /* Option 3: Import in your CSS/SCSS */
133
- @import '@trinityui/design-system/css';
96
+ @import '@trinityui/design-system-css';
134
97
  ```
135
98
 
136
- ### Usage
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
- }
99
+ ### Option 2: direct file path
155
100
 
156
- .status-success {
157
- color: var(--trinity-success);
158
- background: var(--trinity-success-bg);
159
- }
101
+ ```html
102
+ <link rel="stylesheet" href="node_modules/@trinityui/design-system-css/dist/trinity.css" />
160
103
  ```
161
104
 
162
- ### Dark Mode
105
+ ### Dark mode
163
106
 
164
107
  ```html
165
- <!-- Add attribute to enable dark mode -->
166
108
  <html data-theme="dark">
167
109
  ```
168
110
 
169
- ```js
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` |
111
+ ## Theming
185
112
 
186
- ---
187
-
188
- ## Optional Dependencies
189
-
190
- Only install if you need these features:
113
+ ```tsx
114
+ import { lightTheme, darkTheme } from '@trinityui/design-system';
191
115
 
192
- ```bash
193
- npm install @mui/x-data-grid # For DataTable component
194
- npm install recharts # For Charts components
116
+ const theme = isDarkMode ? darkTheme : lightTheme;
195
117
  ```
196
118
 
197
- > 💡 Use `SimpleTable` for basic tables — no extra deps needed.
198
-
199
- ---
200
-
201
119
  ## Development
202
120
 
203
121
  ```bash
204
- npm run storybook # Component docs at localhost:6006
205
- npm run dev # Dev server at localhost:5173
206
- npm run build # Production build
207
- npm run test # Run tests
208
- npm run lint # Lint code
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
122
+ pnpm install
123
+ pnpm run start
124
+ pnpm run build
125
+ pnpm run test
126
+ pnpm run lint
227
127
  ```
228
128
 
229
- Open http://localhost:6006 to see all components with live examples.
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
- ```
129
+ ## Release and Publishing
293
130
 
294
- ---
131
+ - Push to `main` triggers publish workflows for:
132
+ - `@trinityui/design-system`
133
+ - `@trinityui/design-system-css`
134
+ - Version is auto-bumped if the current version is already published.
135
+ - `CHANGELOG.md` is generated during release workflow.
295
136
 
296
- ## Links
137
+ ## Support Docs
297
138
 
298
- - [Storybook](http://localhost:6006) — Interactive component demos
299
- - [Quick Start Guide](./docs/QUICK_START.md)
300
- - [Developer Guide](./docs/DEVELOPER_GUIDE.md)
139
+ - [MIGRATION.md](./MIGRATION.md)
140
+ - [CONTRIBUTING.md](./CONTRIBUTING.md)
141
+ - [CHANGELOG.md](./CHANGELOG.md)
301
142
 
302
- ---
143
+ ## License
303
144
 
304
- MIT License • Built with [MUI](https://mui.com) + [Vite](https://vite.dev)
145
+ MIT
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@trinityui/design-system",
3
3
  "private": false,
4
- "version": "1.0.9",
4
+ "version": "1.0.11",
5
5
  "type": "module",
6
6
  "description": "Trinity Design System - A customizable MUI-based component library",
7
7
  "main": "dist/index.js",