@trinitydesign/design-system 1.2.0 → 1.2.2

package/CHANGELOG.md

@@ -85,7 +85,7 @@ See [MIGRATION.md](./MIGRATION.md) for detailed upgrade instructions.
   - Status illustration colors: Tailwind-standard (red-500, amber-500, emerald-500) for universal recognition
 
 ### Added
-- **Accessibility Utilities** (`@trinity/design-system/accessibility`)
+- **Accessibility Utilities** (`@trinitydesign/design-system/accessibility`)
   - `useFocusTrap` - Hook for trapping focus within modal dialogs
   - `useReducedMotion` - Hook to detect user's reduced motion preference
   - `useAriaLive` - Hook for managing ARIA live regions

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 '@trinitydesign/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/@trinitydesign/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 '@trinitydesign/design-system';
 ```
 
 #### 2. New Peer Dependencies
@@ -151,7 +151,7 @@ import type {
   TrinitySemanticTokens,
   TrinityComponentTokens,
   TrinityDarkModeTokens,
-} from '@trinity/design-system';
+} from '@trinitydesign/design-system';
 ```
 
 #### 2. Auto-generated CSS Variables
@@ -164,7 +164,7 @@ import {
   generateDarkModeCssVariables,
   injectTrinityCssVariables,
   injectDarkModeCssVariables 
-} from '@trinity/design-system';
+} from '@trinitydesign/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 '@trinitydesign/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 '@trinitydesign/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 '@trinitydesign/design-system';
    ```
 
 2. **Update CSS variable references** to use the new naming convention.

package/README.md

@@ -17,7 +17,7 @@ A customizable MUI-based design system with Trinity branding, WCAG 2.1 AA access
 ### Install
 
 ```bash
-npm install @trinity/design-system @mui/material @mui/icons-material @emotion/react @emotion/styled
+npm install @trinitydesign/design-system @mui/material @mui/icons-material @emotion/react @emotion/styled
 ```
 
 **Optional dependencies** (only if using these features):
@@ -36,7 +36,7 @@ npm install recharts
 
 ```tsx
 import { ThemeProvider, CssBaseline } from '@mui/material';
-import { lightTheme } from '@trinity/design-system';
+import { lightTheme } from '@trinitydesign/design-system';
 
 function App() {
   return (
@@ -52,7 +52,7 @@ function App() {
 
 ```tsx
 import { Button, Card } from '@mui/material';
-import { StatusIndicator, Modal } from '@trinity/design-system';
+import { StatusIndicator, Modal } from '@trinitydesign/design-system';
 
 <Card sx={{ p: 3 }}>
   <Button variant="contained">Save</Button>
@@ -76,7 +76,7 @@ import { StatusIndicator, Modal } from '@trinity/design-system';
 
 ### Themes
 ```tsx
-import { lightTheme, darkTheme, createTrinityTheme } from '@trinity/design-system';
+import { lightTheme, darkTheme, createTrinityTheme } from '@trinitydesign/design-system';
 ```
 
 ### Components
@@ -89,12 +89,12 @@ import {
   FileUpload,         // Drag-and-drop upload
   AIChat,             // AI chat interface
   AIPromptInput,      // AI prompt input
-} from '@trinity/design-system';
+} from '@trinitydesign/design-system';
 ```
 
 ### Design Tokens
 ```tsx
-import { baseTokens, semanticTokens, brandColors } from '@trinity/design-system';
+import { baseTokens, semanticTokens, brandColors } from '@trinitydesign/design-system';
 ```
 
 ### Utilities
@@ -103,7 +103,7 @@ import {
   accessibleCombinations,  // Pre-validated color pairs
   getContrastRatio,        // Check color contrast
   validateAccessibility,   // WCAG validation
-} from '@trinity/design-system';
+} from '@trinitydesign/design-system';
 ```
 
 ---