@trinityui/design-system 1.0.2 → 1.0.3

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [1.0.3](https://github.com/Trinity-UI-Components/trinity-design-system/compare/v1.0.0...v1.0.3) (2026-02-24)
+
+### Features
+
+* **css:** expand trinity.css with comprehensive design tokens ([e1a9f22](https://github.com/Trinity-UI-Components/trinity-design-system/commit/e1a9f22c97d58959afcbf0d4c1aa76a76db52126))
+* simplify dependencies - remove date-pickers, add SimpleTable ([ee02f3e](https://github.com/Trinity-UI-Components/trinity-design-system/commit/ee02f3e299e13173e77355925dca513f3becf8a4))
+* simplify developer experience with essentials entry point ([a7e4a2f](https://github.com/Trinity-UI-Components/trinity-design-system/commit/a7e4a2fb1b221da9c2ee01f1b8c1a851f4e45697))
+* **storybook:** add interactive Component Picker page ([2642326](https://github.com/Trinity-UI-Components/trinity-design-system/commit/2642326fbb68d30c865ea008cdb283fff96562a1))
+* **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)
+* **theme:** add theme presets system for app variations ([ec21481](https://github.com/Trinity-UI-Components/trinity-design-system/commit/ec2148114bfb33b508755675abcd00a0abf3662c))
+* **TopNav:** add white-label logo support with invert option ([0d0a337](https://github.com/Trinity-UI-Components/trinity-design-system/commit/0d0a337de5500ac75919b4ccead9c6b159775600))
+
+### Bug Fixes
+
+* **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)
+* improve Storybook configurability and documentation ([912194f](https://github.com/Trinity-UI-Components/trinity-design-system/commit/912194f35d20903d9252f25cb87ae7b7fc266db5))
+* replace light-mode-only overlays with theme-aware action palette ([00ff8ad](https://github.com/Trinity-UI-Components/trinity-design-system/commit/00ff8adb5a5b345e6a8c239da792276d2e38aa94))
+* update CSS theme to match brandColors from theme.ts ([481e0ca](https://github.com/Trinity-UI-Components/trinity-design-system/commit/481e0cafb55eed6c6d426115f25c3cfaef918b1e))
 ## [1.0.2](https://github.com/Trinity-UI-Components/trinity-design-system/compare/v1.0.0...v1.0.2) (2026-02-24)
 
 ### Features
@@ -45,7 +63,7 @@ All notable changes to the Trinity Design System will be documented in this file
 
 - Complete Trinity Design System component library
 - MUI v6/v7 compatible themes (light and dark mode)
-- CSS-only theme entry point (`@trinity/design-system/css`)
+- CSS-only theme entry point (`@trinityui/design-system/css`)
 - Design tokens system (baseTokens, semanticTokens, componentTokens)
 - Extended MUI palette with Trinity semantic colors
 - Accessibility utilities with WCAG 2.1 AA compliance

package/MIGRATION.md

@@ -21,18 +21,18 @@ The following exports are **no longer available** from the main package:
 
 ```typescript
 // ❌ No longer works
-import { gradientIcons, backgroundImages, brandGradients } from '@trinity/design-system';
+import { gradientIcons, backgroundImages, brandGradients } from '@trinityui/design-system';
 ```
 
 **Migration:** If you need Trinity brand assets:
-1. Copy from `node_modules/@trinity/design-system/src/assets/` to your public folder
+1. Copy from `node_modules/@trinityui/design-system/src/assets/` to your public folder
 2. Import directly in your source (your bundler will handle them)
 3. Use a CDN for production
 
 Type definitions are still exported:
 ```typescript
 // ✅ Still works
-import type { GradientIconName, BackgroundCategory } from '@trinity/design-system';
+import type { GradientIconName, BackgroundCategory } from '@trinityui/design-system';
 ```
 
 #### 2. New Peer Dependencies
@@ -151,7 +151,7 @@ import type {
   TrinitySemanticTokens,
   TrinityComponentTokens,
   TrinityDarkModeTokens,
-} from '@trinity/design-system';
+} from '@trinityui/design-system';
 ```
 
 #### 2. Auto-generated CSS Variables
@@ -164,7 +164,7 @@ import {
   generateDarkModeCssVariables,
   injectTrinityCssVariables,
   injectDarkModeCssVariables 
-} from '@trinity/design-system';
+} from '@trinityui/design-system';
 
 // Inject all variables into :root
 injectTrinityCssVariables();
@@ -187,7 +187,7 @@ Available CSS variables follow the pattern:
 New React hook for accessing tokens with theme awareness:
 
 ```typescript
-import { useTrinityTokens } from '@trinity/design-system';
+import { useTrinityTokens } from '@trinityui/design-system';
 
 function MyComponent() {
   const { 
@@ -225,7 +225,7 @@ Dark mode tokens now include complete overrides for:
 - Status colors (error, warning, success, info)
 
 ```typescript
-import { darkModeTokens } from '@trinity/design-system';
+import { darkModeTokens } from '@trinityui/design-system';
 
 // New dark mode interactive colors
 darkModeTokens.colors.interactive.hover
@@ -327,7 +327,7 @@ export {
 1. **Update imports** to use the new main entry point if needed:
    ```typescript
    // New unified import
-   import { tokens, useTrinityTokens, injectTrinityCssVariables } from '@trinity/design-system';
+   import { tokens, useTrinityTokens, injectTrinityCssVariables } from '@trinityui/design-system';
    ```
 
 2. **Update CSS variable references** to use the new naming convention.

package/README.md

@@ -3,7 +3,7 @@
 MUI v6/7 with Trinity branding. WCAG 2.1 AA accessible.
 
 ```bash
-npm install @trinity/design-system @mui/material @mui/icons-material @emotion/react @emotion/styled
+npm install @trinityui/design-system @mui/material @mui/icons-material @emotion/react @emotion/styled
 ```
 
 ## Setup (One Time)
@@ -11,7 +11,7 @@ npm install @trinity/design-system @mui/material @mui/icons-material @emotion/re
 ```tsx
 // App.tsx
 import { ThemeProvider, CssBaseline } from '@mui/material';
-import { lightTheme } from '@trinity/design-system';
+import { lightTheme } from '@trinityui/design-system';
 
 function App() {
   return (
@@ -49,7 +49,7 @@ import {
   FileUpload,         // Drag-and-drop upload
   SimpleTable,        // Basic table (no dependencies)
   DataCard,           // KPI/metric cards
-} from '@trinity/design-system';
+} from '@trinityui/design-system';
 ```
 
 ### Quick Reference
@@ -78,10 +78,10 @@ import {
 
 ```tsx
 // Recommended for most projects
-import { lightTheme, StatusIndicator, Modal } from '@trinity/design-system/essentials';
+import { lightTheme, StatusIndicator, Modal } from '@trinityui/design-system/essentials';
 
 // Full API when needed
-import { TopNavHeader, InsightEngine, DataTable } from '@trinity/design-system';
+import { TopNavHeader, InsightEngine, DataTable } from '@trinityui/design-system';
 ```
 
 ---
@@ -89,7 +89,7 @@ import { TopNavHeader, InsightEngine, DataTable } from '@trinity/design-system';
 ## Dark Mode
 
 ```tsx
-import { lightTheme, darkTheme } from '@trinity/design-system';
+import { lightTheme, darkTheme } from '@trinityui/design-system';
 
 const theme = isDarkMode ? darkTheme : lightTheme;
 ```
@@ -116,7 +116,7 @@ For projects **without React** (static HTML, Vue, Angular, vanilla JS), use the
 
 ```html
 <!-- Option 1: Link directly -->
-<link rel="stylesheet" href="node_modules/@trinity/design-system/dist/trinity.css" />
+<link rel="stylesheet" href="node_modules/@trinityui/design-system/dist/trinity.css" />
 
 <!-- Option 2: Copy to your project -->
 <link rel="stylesheet" href="/css/trinity.css" />
@@ -124,7 +124,7 @@ For projects **without React** (static HTML, Vue, Angular, vanilla JS), use the
 
 ```css
 /* Option 3: Import in your CSS/SCSS */
-@import '@trinity/design-system/css';
+@import '@trinityui/design-system/css';
 ```
 
 ### Usage

package/dist/trinity.css

@@ -18,7 +18,7 @@
  * Usage:
  *   <link rel="stylesheet" href="path/to/trinity.css">
  *   OR
- *   @import "@trinity/design-system/css";
+ *   @import "@trinityui/design-system/css";
  * 
  * Dark mode: Add data-theme="dark" to <html> or <body>
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@trinityui/design-system",
   "private": false,
-  "version": "1.0.2",
+  "version": "1.0.3",
   "type": "module",
   "description": "Trinity Design System - A customizable MUI-based component library",
   "main": "dist/index.js",