Med 1450 create angular theme and update storybook#60
Open
dallasbpeters wants to merge 28 commits into
Open
Conversation
- Introduced `style-dictionary` for managing design tokens. - Updated `package.json` scripts to include token build commands. - Added `style-dictionary.config.mjs` for custom token formats. - Updated various Babel dependencies to their latest versions. - Excluded token source files from TypeScript compilation.
- Added design tokens for colors, typography, spacing, and shadows in JSON format. - Integrated Style Dictionary to generate TypeScript and CSS outputs from tokens. - Updated ThemesGraph to reflect new token sources and build steps. - Created a new Design Tokens guide in Storybook for documentation. - Adjusted existing theme files to auto-generate from the new token structure. - Updated Storybook preview to include the new Design Tokens section.
- Expanded the README.md to include a comprehensive development setup, design token structure, build commands, and generated outputs. - Updated DesignTokens.mdx to streamline the explanation of design tokens, their architecture, and usage in React and Angular Material. - Removed outdated sections and clarified the theme hierarchy and integration methods for better user guidance.
- Updated package.json scripts to include Angular theme build and concurrent Storybook launches for React and Angular. - Refactored Storybook manager and main configuration to integrate a new theme toggle addon. - Added custom formats for spacing, sizing, shape, and state tokens in style-dictionary.config.mjs. - Improved README.md to document new build commands and Angular integration details.
- Added .angular/cache to .gitignore to prevent caching issues. - Upgraded Storybook and related addons to version 10.2.10 for improved functionality. - Updated @chromatic-com/storybook to version 5.0.1 and chromatic to version 13.3.4. - Modified Storybook preview configuration to streamline background options and set initial global values. - Introduced middleware for CORS handling in Angular Storybook setup. - Added auto-generated theme files for spacing, sizing, shape, and state tokens to support design consistency.
- Added custom styles for the app switcher button to improve visual contrast when not disabled. - Updated CSS variables for better theme integration and consistency.
- Added new `provideBrandIcons` function to register a comprehensive set of brand icons for use in the application. - Updated Storybook preview to include the new brand icons and improved documentation for their usage. - Modified build script to include a new script for converting icons to SVG format. - Enhanced styles for the app launcher and brand icons to improve visual consistency and responsiveness. - Removed outdated middleware for CORS handling in Storybook setup.
- Modified the build script in package.json to include a new script for converting icons to SVG format. - Updated Storybook preview configuration to streamline background options and improve visual consistency. - Enhanced the build-angular-theme script to also copy the brand icon registry to the distribution folder. - Introduced a new script for converting TSX brand icon components into standalone SVG files, improving icon management and usage.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces significant improvements to documentation, Storybook configuration, and cross-platform design token workflows for the BetaNXT Design System. The changes modernize and clarify the repository structure, enhance Storybook theming (including a new dark mode toggle for Angular), and document the design token pipeline with updated diagrams and ignore rules.
Documentation and Developer Experience:
README.mdto clarify repository structure, build commands, token editing workflow, theme hierarchy, and Storybook usage. Added detailed instructions for both React/MUI and Angular workspaces, as well as publishing and consumption via GitHub Packages.Design Token and Build Process Visualization:
.prettierignorefile to prevent formatting of auto-generated Style Dictionary outputs and build artifacts.Storybook Theming and Configuration:
main.ts), including absolute path resolution for addons and static asset directories./index.json, enabling proper Storybook composition across workspaces.Cleanup and Refactoring:
.storybook/manager.tsand.storybook/addons/mui-theme-toggle/register.tsx, consolidating theme logic and reducing duplication. [1] [2]These changes collectively improve maintainability, developer onboarding, and cross-framework integration for the BetaNXT Design System.