Version Packages (preview) (#2847)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: github-actions[bot]

.changeset/pre.json

@@ -23,5 +23,9 @@
     "@equinor/fusion-react-utils": "3.0.0",
     "@equinor/fusion-react-components-stories": "5.0.0"
   },
-  "changesets": []
+  "changesets": [
+    "react-styles-remove-material-ui",
+    "react-styles-theme-extensions",
+    "storybook-styles-docs"
+  ]
 }

packages/styles/CHANGELOG.md

@@ -1,5 +1,76 @@
 # Change Log
 
+## 2.0.0-preview.1
+
+### Major Changes
+
+- 07a06d2: Remove `@material-ui/styles` dependency and replace with custom JSS-based implementation for React 19 compatibility.
+
+  ref: https://github.com/equinor/fusion-framework/issues/3698
+
+  ### Breaking Changes
+  - Removed `@material-ui/styles` dependency - replaced with direct JSS integration
+  - All Material-UI v4 styling APIs are now implemented internally
+  - No API changes - existing code should work without modifications
+
+  ### Added
+  - Custom `makeStyles` implementation using JSS directly
+  - Custom `StylesProvider` with enhanced scope isolation via seed prefixes
+  - Custom `ThemeProvider` with React 19 compatibility
+  - Comprehensive test suite with Vitest (52 tests, 100% statement coverage)
+  - Utility modules in `src/utils/`:
+    - `jss-setup.ts` - JSS instance configuration
+    - `class-name-generator.ts` - Class name generation logic
+    - `sheet-manager.ts` - Stylesheet caching and management
+    - `contexts.ts` - React context definitions
+  - TSDoc documentation for all exported APIs
+  - Updated README with comprehensive documentation
+
+  ### Changed
+  - Package now uses JSS directly instead of Material-UI wrapper
+  - Improved TypeScript types with better inference
+  - Enhanced class name isolation for micro-frontend scenarios
+
+  ### Technical Details
+  - React 19 compatible (tested with React ^18 || ^19)
+  - Uses JSS v10 with all necessary plugins
+  - Maintains backward compatibility with existing API surface
+  - Full test coverage with Vitest and React Testing Library
+
+### Minor Changes
+
+- 0a1bf8d: Enhanced theme system with support for extending `FusionTheme` with custom properties, improved nested theme composition, and comprehensive documentation.
+
+  ### Added
+  - **Theme Extension Support**: `FusionTheme` now supports extending with custom properties using generics:
+    ```typescript
+    type MyTheme = FusionTheme<{ colors: { primary: ColorStyleProperty } }>;
+    ```
+  - **Custom Base Theme Merging**: `createTheme` now accepts an optional `baseTheme` parameter for merging with custom base themes:
+    ```typescript
+    const extendedTheme = createTheme(
+      { colors: { ui: { background__danger: newColor } } },
+      outerTheme,
+    );
+    ```
+  - **Deep Merging Improvements**: Enhanced `deepMerge` function properly handles nested theme properties, `Record` types, and `StyleProperty` instances
+  - **Type Exports**: Explicitly exported `ThemeProviderProps`, `StylesProviderProps`, `FusionTheme`, `StyleDefinition`, and `createTheme` for better TypeScript support
+  - **Complete TSDoc Documentation**: All exported functions, types, and interfaces now have comprehensive TSDoc comments with examples, parameter descriptions, and usage patterns
+  - **Theme Extension Storybook Story**: New `ThemeExtension` story demonstrating how to extend themes with custom properties, including step-by-step examples for type definition, theme creation, and usage with `useTheme` and `makeStyles`
+
+  ### Changed
+  - `createTheme` signature now accepts optional `baseTheme` parameter (backward compatible)
+  - Improved type inference for extended themes in `ThemeProvider`, `useTheme`, and `makeStyles`
+  - Better handling of nested theme composition when using theme functions in nested `ThemeProvider` components
+  - **Storybook Stories Updated**: All stories now use theme CSS values (`theme.colors.*.css`, `theme.spacing.*.css`, `theme.typography.*.style.*`) instead of hardcoded custom CSS, ensuring proper integration with Fusion design system tokens
+
+  ### Technical Details
+  - Deep merging now correctly handles `StyleProperty` instances (replaces instead of merging)
+  - Theme composition works correctly with nested `ThemeProvider` components
+  - All types are properly exported and documented with complete TSDoc comments
+  - Typography properties accessed via `.style.fontSize`, `.style.fontWeight`, etc. for proper CSS value extraction
+  - Color and spacing properties accessed via `.css` property for CSS variable or value string
+
 ## 2.0.0-preview.0
 
 ### Major Changes

packages/styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-react-styles",
-  "version": "2.0.0-preview.0",
+  "version": "2.0.0-preview.1",
   "description": "style lib inspired by @material-ui/styles",
   "keywords": [
     "styling",

storybook/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Change Log
 
+## 5.0.1-preview.1
+
+### Patch Changes
+
+- f9c381b: Add comprehensive Storybook documentation and stories for `@equinor/fusion-react-styles` package.
+
+  ref: https://github.com/equinor/fusion-framework/issues/3698
+
+  ### Added
+  - **Styles Documentation (`styles.mdx`)**: Comprehensive MDX documentation page showcasing all styling features
+  - **Story Groups**: Organized stories into logical groups:
+    - **Basic Usage**: Basic styles, dynamic styles, and theme-based styles
+    - **Scope Isolation**: Demonstrates critical micro-frontend style isolation with nested and side-by-side `StylesProvider` examples
+    - **Advanced Features**: Nested selectors, multiple style rules, and style caching
+    - **Theme System**: Theme composition, `useTheme` hook examples, and **Theme Extension** guide
+    - **Utilities**: `createStyles` helper examples
+  - **Visual Demonstrations**: Interactive stories showing:
+    - Class name generation and isolation
+    - Dynamic style updates based on props
+    - Theme integration using actual Fusion theme CSS values
+    - CSS features like nested selectors and hover states
+    - **Theme Extension**: Step-by-step guide for extending `FusionTheme` with custom properties
+
+  ### Changed
+  - Storybook port updated to 3000
+  - Removed `@material-ui/styles` dependency from Storybook package
+  - **All stories now use Fusion theme CSS values**: Replaced hardcoded custom CSS with proper theme values (`theme.colors.*.css`, `theme.spacing.*.css`, `theme.typography.*.style.*`) for consistent design system integration
+
+- Updated dependencies [07a06d2]
+- Updated dependencies [0a1bf8d]
+  - @equinor/fusion-react-styles@2.0.0-preview.1
+
 ## 5.0.1-preview.0
 
 ### Patch Changes

storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-react-components-stories",
-  "version": "5.0.1-preview.0",
+  "version": "5.0.1-preview.1",
   "description": "",
   "private": true,
   "scripts": {