carbon-design-system/carbon

This system is the Carbon Design System monorepo, serving as the foundational library for IBM's UI components, design tokens, and developer tooling. It provides a comprehensive suite of React and web components, alongside standardized packages for styling, icons, and layout, all built upon a modernized, DTCG-compliant token architecture. The repository also includes a CLI for scaffolding and release management, automated GitHub actions for issue triage and publishing, and extensive accessibility and visual regression testing infrastructure to ensure component quality.

34 changes.

This period established the Carbon Design System as a structured monorepo, introducing foundational tooling, CLI utilities, and extensive test coverage. It focused on modularizing core design assets by releasing dedicated packages for colors, type, grid, layout, motion, and themes, while standardizing build processes for icons and pictograms.

38 changes.

This period focused on standardizing the Carbon Design System's development tooling by releasing dedicated configuration packages for ESLint, Prettier, Stylelint, Babel, and Jest. It also established a robust testing infrastructure through comprehensive snapshot tests for public APIs and the introduction of a plugin-based issue triage system. Additionally, new features such as runtime feature flags and a CLI component scaffolding command were introduced to support developer workflows.

40 changes.

The Carbon design system refactored its styling architecture by consolidating SCSS implementations into the new @carbon/styles package, effectively deprecating the legacy carbon-components and carbon-components-react packages. This period also focused on enhancing developer experience through modernized build examples and rigorous quality assurance, characterized by the extensive addition of end-to-end accessibility and visual regression tests across the component library.

18 changes.

This period focused on establishing the foundation for the v12 release by introducing new framework-agnostic utility packages for carousels, date pickers, and stepped workflows. Significant effort was dedicated to standardizing design tokens across colors and motion using the DTCG format and Style Dictionary, alongside comprehensive accessibility testing and CI automation improvements.

Introduces a new \cli-reporter\ package that provides a \ConsoleReporter\ class for formatting and writing CLI output. The reporter uses \chalk\ to style messages with specific colors for different categories (error, info, success) and supports writing to stdout and stderr. It also includes an \.npmignore\ file to exclude test, mock, example, and task files from the published package.

packages/cli-reporter · high confidence

The CSS Grid example application in \packages/grid/examples/css-grid/src\ has been added, providing a Next.js-based demo that showcases the \@carbon/grid\ CSS Grid implementation. The example includes pages demonstrating wide, narrow, and condensed grid modes, as well as subgrid support, with specific styling for RTL layouts and visual indicators for different grid states via CSS variables and background colors.

packages/grid/examples/css-grid/src · high confidence

A new example located at examples/codesandbox-styles demonstrates how to use Carbon styles in a CodeSandbox environment without requiring Sass compilation. The example includes a Vite configuration, a SCSS file importing @carbon/styles, and a basic HTML/JS setup to render a Carbon button, providing a ready-to-run template for users.

examples/codesandbox-styles · high confidence

A new Next.js example has been added to the repository, providing a complete starter project that integrates with the Carbon Design System. The example includes configuration for ESLint, Next.js (with Turbopack and strict mode), and SCSS styling that imports Carbon's reset, grid, and theme utilities. It features a client-side React page demonstrating a Carbon Button component and supports automatic dark mode theming via the Carbon G100 theme.

examples/nextjs · high confidence

A new Vite-based example has been added to the repository, providing a ready-to-run demonstration of Carbon React with Vite. The example includes configuration for the Vite build tool, setup for React 18 using the \createRoot\ API, and SCSS integration via \@carbon/react\ with the IBM Plex font path configured. Users can now explore and run this example to see how to integrate Carbon components in a Vite environment.

examples/vite · high confidence

The \packages/motion/tasks\ directory now includes build scripts (\build.js\ and \build.mjs\) that automate the generation of SCSS files from the library's TypeScript surface definitions. The CommonJS entry point delegates to a Style Dictionary configuration, while the ES module entry point uses \@carbon/scss-generator\ to convert TypeScript surface data into a \\_surfaces.scss\ file, ensuring that developers have an automated way to produce the necessary Sass assets for motion surfaces.

packages/motion/tasks · high confidence

The CLI now includes a new 'component' command, implemented in packages/cli/src/component/index.js. This module loads and compiles file templates from a local templates directory using lodash, enabling users to generate component scaffolding.

packages/cli/src/component · high confidence

A new example project at examples/custom-theme demonstrates how to override Carbon Design System theme tokens and component styles using SCSS. The example uses Vite for development and includes a React app that visualizes custom tokens (such as a new 'custom-token') and overridden existing tokens (like 'text-error', 'focus', and 'button-primary'). It also provides a README with build and run instructions.

examples/custom-theme · high confidence

A new Next.js-based preview application has been added to the colors package, allowing users to locally view and inspect the full set of Carbon color tokens. The example renders a table displaying each color swatch, its hex value, and its corresponding hover state, providing a visual reference for developers working with the design system's palette.

packages/colors/examples/preview · high confidence

A new Next.js-based preview application has been added to \packages/layout/examples/preview\ to visually demonstrate the Carbon layout package's conversion utilities and spacing scales. This example includes a README with \yarn build\ and \yarn develop\ instructions, a Next.js configuration for production exports, and a React page that renders fixed and fluid spacing scale items using the \to-rem\ function and layout variables. The preview also displays a timestamp of when the static site was last built.

packages/layout/examples · high confidence

A new working example has been added to demonstrate switching between light and dark themes using the Carbon Design System and Next.js. The implementation uses the Next.js App Router structure (src/app) and includes a ThemePreference component that manages theme state via context, applying the 'g10' (light) or 'g100' (dark) theme to both Carbon's GlobalTheme provider and the document's data-carbon-theme attribute. The example page showcases various Carbon UI components styled according to the selected theme.

examples/light-dark-mode · high confidence

A new GitHub Action named 'wait-for-it' has been added to the repository. This action accepts a required 'URL' input and repeatedly attempts to reach that URL until it receives a 200 OK response, with a maximum of 10 retries and a 1-second timeout per request. It specifically handles 'localhost' URLs by replacing them with the host's network IP (172.17.0.1) to ensure connectivity works correctly within the Docker container environment where the action runs.

actions/wait-for-it · high confidence

A new CSS Grid example has been added to the repository, including a README with build and development instructions and a Next.js configuration file. The configuration sets up Turbopack for the root directory and defines a production build path and export output for the example.

packages/grid/examples/css-grid · high confidence

A new Next.js-based example application has been added to the Carbon Colors package to demonstrate how to use the experimental Sass Modules feature. This example shows users how to import Carbon color tokens (such as $gray-20 and $white) using the @use syntax and apply them to styles within a running development server.

packages/colors/examples/sass-modules · high confidence

A new Next.js/Vite example application has been added to demonstrate how to use Carbon V10 tokens within a Carbon V11 project. The app showcases the usage of V10 theme tokens (such as $ui-01, $icon-01, and $link-01) via the \@carbon/react/scss/compat/theme\ module, alongside V10 motion, layout, and type tokens, providing a reference implementation for developers migrating or maintaining legacy token usage.

examples/v10-token-compat-in-v11 · high confidence

A new build script (tasks/build.js) has been added to the icons-vue package. This script uses the @carbon/icon-build-helpers library to load metadata from the @carbon/icons SVG source and generates the Vue component output in the current directory.

packages/icons-vue/tasks · high confidence

A new build script has been added to the colors package that executes the style-dictionary configuration to generate color tokens. This provides a standardized entry point for users to trigger the color asset generation process.

packages/colors/tasks · high confidence

A new vue-cli-based example project has been added to the \packages/icons-vue/examples\ directory, providing a ready-to-run demonstration of the \@carbon/icons-vue\ package. This example includes the necessary configuration files (such as \babel.config.js\ and \vue.config.js\), a \.gitignore\, and source code that registers and renders the \Bee32\ icon component, along with a README detailing how to install dependencies and run the development server.

packages/icons-vue/examples · high confidence

A new GitHub Action in the \actions/validate-pr-template\ directory now enforces that pull request bodies adhere to the repository's PR template. The action verifies that all required headings from the template are present in the PR description and checks that all checklist items defined in the template are acknowledged in the body. This ensures consistent PR formatting and completeness before review.

actions/validate-pr-template · high confidence

The CLI's \component\ command now generates a richer set of files for new components, including a Storybook story template (with MDX documentation integration), an MDX documentation template, and a test template that includes an automated accessibility check using \toHaveNoAxeViolations\. This ensures that newly scaffolded components come with pre-configured documentation, visual testing, and basic accessibility validation out of the box.

packages/cli/src/component/templates · high confidence

The CLI's contribution workflow now includes a new \getGitHubClient\ utility that automatically prompts users for a GitHub access token if one is not already set in the environment. It initializes the GitHub API client with built-in throttling and retry logic to handle rate limits gracefully, ensuring smoother interactions with GitHub during contribution tasks.

packages/cli/src/commands/contribute/tools · high confidence

The grid examples preview page now includes a 'Last built on' timestamp displayed at the top of the page, helping users verify the freshness of the documentation. This change introduces the \lastBuiltOn\ prop to the main index page and utilizes Next.js static generation to populate the current date.

packages/grid/examples/preview/src · high confidence

The \browserslist-config-carbon\ package has been added to the \config\ directory, providing a shared Browserslist configuration for the Carbon Design System. The package exports a standard set of browser targets (last 2 versions, Firefox ESR, and \>0.5% global usage) via \index.js\, includes an \.npmignore\ file to exclude test and example directories from the published package, and provides documentation in \README.md\.

config/browserslist-config-carbon · high confidence

The \@carbon/grid\ package is now available, providing Sass-based utilities for building layouts using both CSS Grid and Flexbox. Users can install the package and include grid styles via \@use '@carbon/grid'\, which exposes classes like \cds--grid\, \cds--row\, and \cds--col\ to structure content across five breakpoints (sm, md, lg, xlg, max). The package supports various gutter modes (wide, narrow, condensed) and includes column span, offset, and hang helper classes for precise alignment. It also integrates IBM Telemetry for collecting de-identified usage metrics.

packages/grid, packages/layout · high confidence

A new \@carbon/elements\ package is available, bundling design tokens from \@carbon/colors\, \@carbon/themes\, \@carbon/layout\, \@carbon/grid\, \@carbon/type\, and \@carbon/motion\ into a single entry point. Users can now import these design elements via JavaScript (e.g., \import { colors } from '@carbon/elements'\) or Sass (e.g., \@import '@carbon/elements/scss/elements'\), simplifying setup by avoiding the need to install individual sub-packages. The package includes TypeScript configuration for type generation and is instrumented with IBM Telemetry for usage metrics.

packages/elements · high confidence

The new @carbon/feature-flags package provides a runtime-based system to enable or disable preview features in Carbon, available for both JavaScript and Sass. It exposes functions like \enabled\, \enable\, \disable\, and \merge\ to manage flags, and includes a configuration file (\feature-flags.yml\) that defines specific flags such as \enable-css-grid\, \enable-v12-release\, and \enable-dialog-element\. This allows developers to opt into experimental behaviors or v12 defaults before they become standard.

packages/feature-flags · high confidence

The new \@carbon/icon-build-helpers\ package centralizes the tooling used to process SVG assets and generate icon libraries. It provides a \Registry\ to scan and organize SVG files by size and prefix, and a \Metadata\ system to validate and extend icon information using YAML-based extensions. The package includes a modular builder system that generates output for various frameworks, including Vanilla JS, React, and Vue, as well as raw SVGs. This tooling powers the generation of \@carbon/icons\, \@carbon/icons-react\, \@carbon/pictograms\, and \@carbon/pictograms-react\.

packages/icon-build-helpers · high confidence

The new @carbon/motion package provides motion helpers for digital and software products using the Carbon Design System. It introduces a TypeScript-based API alongside existing Sass support, allowing developers to access standard, entrance, and exit easing curves in both productive and expressive modes. The package is built on Design Token Community Group (DTCG) format definitions for durations and easings, and includes a new 'surfaces' concept—composite transition recipes like 'disclosure' and 'contextual'—that can be used via a \getMotionSurface\ function or defined customly. It also includes IBM Telemetry integration for de-identified metrics collection.

packages/motion · high confidence

The \packages/pictograms\ directory is now a standalone package (\@carbon/pictograms\) containing the core pictogram assets, metadata, and categorization. It includes a \categories.yml\ file defining the new 'AI' category alongside existing ones, and a \deprecated.yml\ file that formally deprecates assets like \watson--logo\ and \ibm--z-and-linuxone-\*\ in favor of their replacements. A Next.js-based preview application is added under \examples/preview\ to allow developers to browse and inspect the pictograms locally. The package also integrates IBM Telemetry for anonymized usage metrics and provides a \contributing.md\ guide for managing metadata and deprecations.

packages/pictograms · high confidence

The new @carbon/pictograms-react package provides React components for Carbon pictograms, including build tasks that generate TypeScript definitions for ES and CommonJS outputs. The package includes a telemetry configuration (telemetry.yml) to collect de-identified usage metrics and an .npmignore file to exclude test and mock directories from the published bundle.

packages/pictograms-react · high confidence

Adds a new \@carbon/scss-generator\ package that allows developers to programmatically generate SCSS code from an Abstract Syntax Tree (AST). The package exposes a \generate\ function and a \types\ namespace for constructing SCSS nodes (such as variables, maps, lists, functions, and rules) and printing them to formatted SCSS strings. It includes a printer that leverages Prettier for consistent output formatting and provides a type-definition system with validation assertions to ensure AST integrity.

packages/scss-generator · high confidence

The \@carbon/styles\ package is now available, providing a single entrypoint (\index.scss\) that consolidates and re-exports core design system modules including colors, grid, icons, layout, motion, themes, and type. This allows consumers to import the entire design system from one location while leveraging the Sass module system to prevent duplication. The package also includes public API tests to ensure the stability of these exposed styles.

packages/styles · high confidence

The new @carbon/themes package provides a unified way to apply Carbon color themes (white, gray 10, gray 90, gray 100) in both Sass and JavaScript. It generates theme tokens from a Design Token Community Group (DTCG) source file, producing SCSS variables and JavaScript exports that respect per-theme values. Users can import the package to access theme maps, individual token values, and a theme mixin for emitting CSS custom properties, with configuration options for fallback themes and property prefixes.

packages/themes · high confidence

The new @carbon/type package provides a unified way to apply Carbon typography in both Sass and JavaScript. In Sass, it exposes mixins like type-style, type-classes, reset, and default-type, along with configuration options for font families, weights, and prefixes. In JavaScript, it exports token objects (e.g., productiveHeading01), helpers for font families and weights, a type scale, and fluid style computation, enabling consistent, configurable typography across applications.

packages/type · high confidence

The new @carbon/upgrade package provides a command-line interface to automate Carbon upgrades and code migrations. It detects available upgrades for packages like carbon-components-react and @carbon/icons-react, updating package.json dependencies and running codemods to transform source code. The CLI includes specific migrations for Carbon v12, such as enabling the new OverflowMenu API and applying feature flags, and checks for uncommitted git changes before running to prevent data loss.

packages/upgrade · high confidence

A new executable script \packages/cli/bin/carbon-cli.js\ has been added to serve as the entry point for the Carbon CLI. This script initializes the Node.js environment by handling unhandled promise rejections and enforces a minimum Node.js version requirement of 8 before invoking the core CLI logic.

packages/cli/bin · high confidence

A new \.storybook-v12\ directory has been added to provide a separate Storybook instance for the v12 release. This environment includes a custom welcome page that highlights v12-specific stories, a manager configuration that visually tags migrated components, and documentation pages detailing the new \DatePicker\ (built on the Temporal API) and updated border-radius tokens. This setup allows developers to preview and test v12 features and parity changes independently from the current stable v3.x release.

packages/web-components · high confidence

A new \icon-helpers\ package has been added to provide utilities for converting icon descriptors into SVG elements or strings. This includes \getAttributes\ for managing accessibility attributes (such as \aria-label\, \role\, and \focusable\), \toSVG\ for creating DOM nodes, and \toString\ for generating HTML strings. The package also exports type definitions for icon descriptors and utility functions for formatting attributes, enabling consistent and accessible icon rendering across the application.

packages/icon-helpers/src · high confidence

A new \jest-config-carbon\ package has been added to provide a shared Jest configuration preset for Carbon projects. This config sets up a jsdom test environment, includes support for transforming TypeScript, JavaScript, and SCSS files, and configures specific watch plugins and memory limits to prevent OOM errors in CI runners. It also defines patterns to ignore build artifacts and AVT tests during execution.

config/jest-config-carbon · high confidence

The Carbon CLI now includes a new changelog command that automatically generates release notes by parsing commit history, grouping changes into sections like features, fixes, and documentation, and highlighting upcoming v12 changes. The CLI also adds workspace support to detect and manage multiple packages within a monorepo structure, enabling commands to operate across the entire project. Additional commands include bundle, check, ci-check, component, contribute, inline, publish, and release, providing a comprehensive toolset for development and release workflows.

packages/cli/src · high confidence

A new \typescript-config-carbon\ package has been added to provide a shared TypeScript configuration for the Carbon project. It includes a base \tsconfig.base.json\ that sets the target to ES2017, enables React JSX support, and enforces strict type checking, alongside a \tsconfig.json\ for the package itself. The package also exports utility functions in \index.ts\ to load and validate these compiler options programmatically, allowing other projects to easily integrate and reuse this standardized configuration.

config/typescript-config-carbon · high confidence

The \@carbon/utilities\ package is introduced to provide framework-agnostic utilities for Carbon products. It includes a headless JavaScript carousel utility with swipe support, height management, and accessibility features, alongside SCSS mixins for styling. The package also adds an \AddSelectData\ utility for managing hierarchical data selection and a \date-picker\ module containing a state machine for date selection logic and calendar grid generation, which includes a Temporal polyfill to ensure compatibility across browsers.

packages/utilities · high confidence

The Carbon CLI now includes several new commands to streamline development and release workflows. Users can bundle JavaScript entrypoints with the \bundle\ command, which supports UMD naming, global module definitions, and TypeScript declaration generation. A new \component\ command scaffolds React components with optional test and Storybook story files. Release workflows are enhanced with \release\ to create version branches and \publish\ to handle npm publishing, git tagging, and changelog generation. Additional commands include \changelog\ for generating release notes, \check\ for validating SCSS compilation, \ci-check\ for running CI test suites, \inline\ for bundling SCSS dependencies, and \contribute\ to help new contributors set up their development environment.

packages/cli/src/commands · high confidence

A new GitHub Action named 'Issue Triage' has been added to automatically post comments on pull requests that are referenced in recent releases. The action, implemented in JavaScript and packaged as a Docker container, accepts inputs for the GitHub token, owner, and repository name. When enabled, it retrieves the latest two release tags, identifies commits between them, finds associated pull requests, and posts a notification comment on each PR informing contributors of the new release.

actions/release-notifications · high confidence

A new GitHub Action named 'Promote Packages' has been added to the repository. This action automates the process of updating the 'latest' dist-tag for npm packages within the monorepo. It scans all workspace packages, skips private or denylisted packages, and uses the provided NPM\_TOKEN to publish updates via the npm CLI. The action supports a dry-run mode for testing and generates a summary table of the packages that were promoted.

actions/promote · high confidence

A new preview environment has been added to the Grid package, allowing users to run and view grid examples locally via a Next.js application. This includes a dedicated README with build and development instructions, a Next.js configuration for local and production builds, a SASS configuration for resolving styles, and comprehensive styling for the demo pages, including support for condensed and narrow grid modes.

packages/grid/examples/preview · high confidence

Developers can now use the \toHaveNoAxeViolations\ matcher in their Jest tests to verify that UI components do not contain accessibility violations detected by axe-core. This custom matcher runs accessibility checks against a provided DOM node and fails the test if any violations are found, providing detailed output including the rule ID, impact, description, and affected HTML nodes to help fix issues quickly.

config/jest-config-carbon/matchers · high confidence

The \@carbon/utilities-react\ package now includes a new \StepFlow\ utility that provides a headless, composable way to build stepped user experiences. This addition introduces \StepProvider\, \StepGroup\, and the \useStepContext\ hook, allowing developers to manage step navigation and form state across any component variation. \StepGroup\ ensures that only the current step is rendered in the DOM, while the context provides methods like \handleNext\, \handlePrevious\, and \handleGoToStep\ to control flow. This utility is designed to be flexible and can be integrated into existing components, such as Tearsheets, to create consistent multi-step interactions.

packages/utilities-react · high confidence

The Carbon design system introduces three new Stylelint rule configuration files (\limit-language-features.js\, \possible-errors.js\, and \stylistic-issues.js\) within the \config/stylelint-config-carbon/rules\ directory. These files define specific linting behaviors for CSS/SCSS, including restrictions on color notation, enforcement of no-invalid-hex and no-unknown-properties checks, and stylistic requirements like lowercase function names and double-colon pseudo-elements. This change standardizes code quality checks for developers using the Carbon stylelint config.

config/stylelint-config-carbon/rules · high confidence

Added a new interactive colors-explorer application that provides a visual representation of color tokens and their relationships. The tool allows users to view color swatches in a table or graph format, filter by swatch, and inspect how specific color tokens are used across different themes (white, g10, g90, g100) by mapping DTCG theme aliases to concrete color values.

packages/colors/examples/colors-explorer · high confidence

Added new helper modules in e2e/test-utils to support end-to-end testing workflows. The storybook.js utility provides a visitStory function that navigates to Storybook stories with support for args and globals, and explicitly waits for font loading to ensure accurate visual regression testing. The icon-package.js and icon-package.mjs files introduce a Node-based inspector that verifies icon package exports and direct module paths, replacing previous Jest-based verification methods. Additionally, env.js exports a list of supported themes (white, g10, g90, g100) for use in test configurations.

e2e/test-utils · high confidence

A new Next.js-based preview application has been added to \packages/icons/examples/preview\ to display the available Carbon icons. This example renders a table of icons with their names, sizes, previews, and import paths, and now includes a \lastBuiltOn\ timestamp on the homepage to indicate when the preview was generated. The setup includes a \next.config.js\ configured for static export and specific styling via SCSS files.

packages/icons/examples · high confidence

Added a new Next.js-based example application (\motion-tokens-dtcg\) that provides a visual interface for exploring motion design tokens. The app reads \motion.json\ and \surfaces.json\ to flatten and display token data, offering users the ability to view tokens in either a table or a hierarchical graph layout, with controls to filter by category (duration, easing, surface) and expand/collapse groups.

packages/motion/examples · high confidence

The issue-triage action now uses a modular plugin system in \actions/issues/src/plugins\ to automate workflow steps. For formal Bugs, the new \bob-bug-triage\ plugin runs a read-only assessment via the Bob tool, strictly validating output format (2-3 bullet items or a single paragraph) and sanitizing logs to prevent token leakage, while \initialize-bug-metadata\ automatically maps reporter severity suggestions to project fields and adds community-help labels. For enhancements, the \manage-contribution-comments\ plugin consolidates previous workflows to post standardized comments on proposal acceptance, rejection, or readiness for community work.

actions/issues/src/plugins · high confidence

The stylelint configuration now includes dedicated plugin modules to enforce specific coding standards. The new \a11y\ plugin enables the \@double-great/stylelint-a11y\ rule to check for reduced-motion media queries, improving accessibility compliance. The \prettier\ plugin integrates \stylelint-config-prettier\ and \stylelint-prettier\ to resolve conflicts with Prettier formatting. The \scss\ plugin adds comprehensive rules via \stylelint-scss\ and \stylelint-use-logical\, enforcing SCSS syntax best practices (such as newline handling and variable patterns) and mandating CSS logical properties for better RTL support.

config/stylelint-config-carbon/plugins · high confidence

The test-utils package now provides a suite of helpers to simplify testing. It includes DOM utilities (getByText, getByLabel, isElementVisible) for querying and checking element visibility, React integration helpers (render, cleanup) built on React 18's createRoot, and a SassRenderer that compiles SCSS using the modern Dart Sass API, allowing tests to inspect compiled CSS and Sass values.

packages/test-utils · high confidence

The Carbon stylelint configuration is now available as a standalone, installable npm package. Users can install it via npm or Yarn and extend it in their own stylelint configuration to automatically apply Carbon's standard linting rules, including support for SCSS, idiomatic order, browser feature compatibility, and accessibility checks.

config/stylelint-config-carbon · high confidence

The repository has been scaffolded as a monorepo for IBM's Carbon Design System, establishing the foundational structure for React components, web components, Sass styles, and tooling packages. This change introduces the core configuration files required for development and maintenance, including \.editorconfig\ and \.gitattributes\ for consistent line endings and indentation, a comprehensive \.gitignore\ to exclude build artifacts and caches, and \.yarnrc.yml\ to configure Yarn v4 with node-modules linker. It also sets up the build and testing infrastructure via \eslint.config.mjs\ (migrating to flat config), \jest.config.js\, \playwright.config.js\ for e2e/AVT testing, and \lerna.json\ for independent versioning. Additionally, it adds \SECURITY.md\ for vulnerability reporting, \AGENTS.md\ for repository guidelines, and \catalog-info.yaml\ for Backstage integration.

(repo-wide) · high confidence

A change to existing behaviour in packages/react — 2704 commits (1196 fixs), 1962 files.

packages/react · medium confidence · unverified

A new build script (build.mjs) has been added to the feature-flags package that reads the feature-flags.yml configuration and generates corresponding JavaScript and SCSS modules. This automation ensures that the runtime feature flag logic and styles are kept in sync with the central configuration file, removing the need for manual updates to the generated source files.

packages/feature-flags/tasks · high confidence

The build process for the icons-react package now uses the \reactNext\ builder from \@carbon/icon-build-helpers\ to generate the library. This change replaces the previous build strategy, updating how icons are compiled and output to the current working directory.

packages/icons-react/tasks · high confidence

The Carbon build system now uses a dedicated Babel preset configuration that sets up Babel 8-compatible defaults. This includes targeting browsers via the Carbon-specific Browserslist config, enabling TypeScript support with explicit type-import handling, and enforcing the classic JSX runtime to maintain compatibility with existing React component output. The preset also includes specific plugins for class properties, export transformations, and development expressions, while excluding test and example files from the published package.

config/babel-preset-carbon · high confidence

The CLI bundle command has been refactored to use the tsdown bundler instead of the previous implementation. This change introduces new files in the bundle command directory (bundlers.js, javascript.js, typescript.js, tsdown.js, utils.js) that handle the bundling process. The new implementation supports multiple output formats (ESM, CJS, UMD), generates TypeScript declarations, and uses the change-case-all library for case conversion. This represents a significant shift in how the CLI handles package bundling, moving from the previous bundler to tsdown.

packages/cli/src/commands/bundle · high confidence

The @carbon/colors package has migrated its source of truth to the Design Token Community Group (DTCG) format, introducing a new \src/dtcg/colors.json\ file that defines the full color palette (including hover states) as structured tokens. This change replaces the previous hand-authored TypeScript/SCSS files with an automated build pipeline using Style Dictionary; the \style-dictionary\ configuration and custom format scripts now generate the JavaScript exports (\js/generated/colors.js\), TypeScript declarations, and SCSS variables (\index.scss\) from this single JSON source. For users, this ensures that the public API (individual color constants, swatch groups, and aggregate maps) remains consistent while providing a standardized, machine-readable token definition that can be more easily maintained and extended.

packages/colors/src · high confidence

The \carbon-components\ and \carbon-components-react\ packages have been refactored to remove their internal SCSS implementations in favor of delegating to the new \@carbon/styles\ package. Generated SCSS files in the \scss/compat\, \scss/fonts\, and \scss/type\ directories now simply forward imports to \@carbon/styles\, and the main entry points (\src/index.js\ for React) re-export from \@carbon/react\. This change updates the layout for v11, meaning users should rely on the new styles package for theming and typography rather than the legacy internal stylesheets.

(repo-wide) · high confidence

The date picker now correctly detects focus loss when used inside web components by switching from the non-standard \e.path\ property to the standard \e.composedPath()\ API. This change also removes the automatic date-setting behavior on blur when \allowInput\ is enabled, preventing unintended value updates when the user clicks away from the input field.

.yarn · high confidence

Post-installation scripts have been added to the carbon-components and carbon-components-react packages to display a console warning indicating that these packages are no longer supported. Upon installation, users will now see a message directing them to the deprecation page for more information, ensuring they are aware of the end-of-life status for these legacy components.

packages/carbon-components-react/scripts, packages/carbon-components/scripts · high confidence

The best-practices ESLint rules now enforce the use of curly braces for all control statements and disallow the use of the \\_\DEV\\_\ global variable, requiring developers to use \process.env.NODE\_ENV !== 'production'\ instead.

config/eslint-config-carbon/rules · high confidence

The feature flags system now logs a one-time console notice when a v12 default flag is available but not enabled, helping developers preview and migrate to new default behaviors before the v12 release. This change introduces a \notifyAvailableFlag\ function and a \FeatureFlagScope\ class that automatically enables v12 flags when the \enable-v12-release\ flag is set, while ensuring notifications are only shown once per flag and only for v12-specific flags.

packages/feature-flags/src · high confidence

The build process for the layout package now generates a new \\_border-radius.scss\ file in the \scss/generated\ directory. This change adds border-radius token variables and maps to the output, allowing users to access these specific layout tokens via the generated Sass modules alongside existing tokens like spacing and container sizes.

packages/layout/tasks · high confidence

The grid-related SCSS files in both carbon-components and carbon-components-react have been replaced with thin wrappers that forward to the corresponding modules in the @carbon/styles package. This change centralizes grid implementation details, meaning updates to grid behavior, CSS Grid support, Flexbox support, and mixins are now managed through the shared styles package rather than being maintained separately in each component library.

packages/carbon-components-react/scss/grid, packages/carbon-components/scss/grid · high confidence

The grid layout styles have been updated to use CSS logical properties (such as \inline-size\, \margin-inline\, and \padding-inline\) instead of physical properties like \width\ and \margin-left\, improving support for right-to-left (RTL) layouts and internationalization. Additionally, the underlying SCSS has been modernized to use the \sass:\ module system (e.g., \sass:math\, \sass:map\) and modern functions like \math.div\, replacing deprecated legacy syntax. This change also introduces new CSS custom properties for grid configuration and supports new grid modes like 'narrow' and 'condensed' with updated gutter handling.

packages/grid/scss · high confidence

The \config/jest-config-carbon/transform\ directory now provides three new Jest transformers implemented as ES modules: \cssTransform.js\ compiles SCSS to compressed CSS and injects it into the DOM during tests using the modern Sass API; \jsTransform.js\ handles JavaScript and TypeScript files via Babel, explicitly configuring \@babel/preset-typescript\ to preserve type imports and setting React JSX to 'classic' runtime to maintain compatibility with existing Carbon output; and \fileTransform.js\ stubs static file imports as their filenames. These changes enable the test suite to process modern SCSS and TypeScript syntax correctly within the Jest environment.

config/jest-config-carbon/transform · high confidence

The layout SCSS module now provides a new \to-rem\ function for converting pixel values to rem units, which uses the modern \math.div\ operation. The legacy \rem\ function has been marked as deprecated to address compatibility issues with Sass versions greater than 1.65.0, ensuring that styles compile correctly without errors in newer environments while maintaining the same conversion logic.

packages/layout/scss/modules · high confidence

The \packages/icons/tasks\ directory now contains three new Node.js scripts (\build.js\, \ci-check.js\, and \scaffold.js\) that replace the previous monolithic build process. These tasks leverage the \@carbon/icon-build-helpers\ library to manage icon metadata and generation. The build task now explicitly configures a set of metadata extensions—including icons, assets, deprecated status, output, categories, and module info—and runs separate builders for SVG and vanilla outputs. The CI check task validates metadata structure using specific extensions like moduleName and categories, while the scaffold task initializes metadata from SVG sources. This change shifts the icon package to a more modular, extension-based build architecture.

packages/icons/tasks · high confidence

The issue triage action has been restructured to use a plugin-based execution model, allowing individual triage steps to run independently and report specific failures without blocking other plugins. A new \manageComment\ utility enables idempotent handling of automation-owned issue comments (create, replace, append, delete, collapse) using a hidden HTML header for stable identity, including a fallback to match legacy comments. The action now uses \getOctokit()\ for GitHub client instantiation and supports dedicated tokens for specific plugins, improving isolation and security.

actions/issues/src · high confidence

The layout package now exposes SCSS files for border-radius, spacing, and utility functions. The \_convert.scss file introduces a new \to-rem\ function for pixel-to-rem conversion and marks the legacy \rem\ function as deprecated, while also providing an \em\ conversion function. The \_utilities.scss file adds helper functions like \map-deep-get\, \key-by-index\, and \last-map-item\ to assist with map manipulation. The \_spacing.scss file forwards generated spacing and layout tokens, and \_border-radius.scss forwards generated border-radius tokens.

packages/layout/scss · high confidence

The @carbon/layout package has migrated its design tokens to the Design Tokens Community Group (DTCG) JSON format, establishing src/dtcg/layout.json as the single source of truth. This change introduces a new Style Dictionary build pipeline that automatically generates the corresponding JavaScript/TypeScript exports and Sass variables, ensuring that the public API remains consistent while simplifying token maintenance and improving tree-shaking capabilities.

packages/layout/src · high confidence

The project has updated to Husky v9, introducing new hook scripts to manage pre-commit and commit-msg checks. The pre-commit hook now explicitly runs \yarn lint-staged\, while a new commit-msg hook has been added to validate commit messages using \commitlint\ via npx. This change reflects the structural updates required for Husky v9, where hooks are now standard executable scripts rather than configuration entries in package.json.

.husky · high confidence

The @carbon/motion package has switched its token generation pipeline to Style Dictionary. This introduces custom transforms to handle DTCG-specific shapes (converting duration objects to CSS strings and cubic-bezier arrays to CSS functions) and new output formats that emit JavaScript/TypeScript and SCSS files for both motion tokens and surfaces. The generated outputs include V11 canonical duration exports alongside V10 deprecated aliases for backwards compatibility, as well as a \getMotionSurface\ helper and a \surfaces\ map in the JS build.

packages/motion/style-dictionary · high confidence

The \config/eslint-config-carbon/plugins\ directory now includes dedicated configuration files for several linting plugins, enforcing new standards across the codebase. The \jest.js\ plugin configures \eslint-plugin-jest\ and \jest-dom\ for test files, enforcing rules like \no-focused-tests\ and \valid-expect\. The \react.js\ plugin enables \react/button-has-type\ and forbids the \style\ prop on components and DOM elements (with exceptions for tests and e2e files), while also adding TypeScript-specific rules. The \storybook.js\ plugin enforces Storybook best practices, such as awaiting interactions and using PascalCase for story names. Additionally, \eslint-plugin-playwright.js\ enforces specific title prefixes for AVT e2e tests, \testing-library.js\ restricts direct node access in React tests, and \jsdoc.js\ standardizes JSDoc tag preferences.

config/eslint-config-carbon/plugins · high confidence

The test configuration now includes a new setup file that patches JSDOM to support focusable node detection via \HTMLElement.prototype.offsetParent\, mocks \ResizeObserver\ and \AnimationEvent\, and implements \HTMLDialogElement\ methods (\show\, \showModal\, \close\) to enable testing of dialog components. Additionally, a setup-after-env file extends Jest's \expect\ API with a \toHaveNoAxeViolations\ matcher for accessibility checks and enforces strict console logging by throwing errors on unexpected \console.error\, \console.warn\, and \console.log\ (in CI) calls.

config/jest-config-carbon/setup · high confidence

The \tasks\ directory now includes new automation scripts that change how the repository is built and maintained. The \examples.js\ task builds and mirrors example code from specific packages (colors, grid, icons, layout, motion, pictograms, themes, type) into a \build\ folder for deployment, while also handling the \colors-explorer\ separately. The \sync.js\ task standardizes \package.json\ files by enforcing a specific field order, adding default keywords, setting repository and license metadata, and configuring npm provenance; it also generates \.npmignore\ files to exclude test and example directories from published packages. Additionally, \generate-repo-structure.mjs\ creates documentation artifacts by parsing the monorepo structure and dependency graph via Lerna, and \prepare-v12-storybook.mjs\ assists in migrating Storybook stories to a v12 configuration by handling feature flags and path resolution.

tasks · high confidence

The NotificationsPanel component has been migrated from the carbon-for-ibm-products library. This change includes updated end-to-end accessibility tests for the component, which are currently skipped pending the re-enablement of v12 Storybook in CI.

e2e/components/NotificationsPanel · high confidence

The \prettier-config-carbon\ package has been moved to the \config/\ directory. This change includes the addition of an \.npmignore\ file to exclude development artifacts (such as tests and examples) from the published package, a new README with installation and usage instructions, and the core \index.js\ file which exports the Carbon Design System's Prettier settings (80-character print width, single quotes, ES5 trailing commas, etc.).

config/prettier-config-carbon · high confidence

The eslint-config-carbon package has been reorganized to provide distinct configuration profiles for different project needs. The new structure includes a 'base' configuration for general JavaScript/Node.js development, a 'vanilla' profile for non-React projects using airbnb-base and prettier, and an 'internal' profile that extends the base with additional plugins for Jest, React, Storybook, Testing Library, and Playwright. This modular approach allows users to select only the linting rules relevant to their specific stack, rather than inheriting all Carbon's default rules.

config/eslint-config-carbon · high confidence

The SCSS files in the React components package have been refactored to act as thin wrappers that forward imports to the corresponding styles in the @carbon/styles package. This change centralizes the styling logic, meaning the React package no longer maintains its own duplicate SCSS definitions for components like Accordion, Button, and the new Fluid variants; instead, it reuses the source of truth from the shared styles library.

packages/carbon-components-react/scss/components, packages/carbon-components/scss/components · high confidence

The SCSS entry points in both the \carbon-components\ and \carbon-components-react\ packages have been updated to re-export their design tokens and utilities (such as border-radius, colors, layout, spacing, and themes) directly from the \@carbon/styles\ package. This change centralizes the source of these styles, ensuring that consumers of either package receive the same underlying design system definitions.

packages/carbon-components-react/scss, packages/carbon-components/scss · high confidence

The \ui-icon-master.ai\ source file in the \packages/icons/master\ directory has been updated to the latest version (dated July 9, 2025). This change refreshes the master design asset used to generate the library's icon set, incorporating the latest visual updates and ensuring the source reflects the most recent design decisions.

packages/icons/master · high confidence

The class-prefix example has been migrated from a Create React App setup to Vite, upgrading the runtime to React 18 (using createRoot) and adjusting the build configuration to properly resolve the IBM Plex font path via Vite aliases. This change ensures the example correctly demonstrates the ClassPrefix component with the 'custom' prefix in a modern, faster development environment.

examples/class-prefix · high confidence

The SCSS utility modules in both \carbon-components\ and \carbon-components-react\ have been refactored to act as thin wrappers that forward to the new \@carbon/styles\ package. This change centralizes utility logic, meaning styles for layout, box-shadows, and other utilities are now sourced from the shared styles library rather than being defined locally in each component package.

packages/carbon-components-react/scss/utilities, packages/carbon-components/scss/utilities · high confidence

The carbon-components package has been updated to include IBM Telemetry for collecting de-identified usage metrics, requiring users to opt out if they do not wish to participate. Additionally, a new index.scss entry point has been added that forwards to @carbon/styles, and the package documentation has been refreshed to reflect its deprecated status and provide updated usage instructions.

packages/carbon-components · high confidence

The carbon-components-react package has been onboarded to the monorepo structure, introducing a new build configuration via tsdown (producing ESM and CJS outputs) and integrating IBM Telemetry for anonymized metrics collection. The package's README now explicitly states that carbon-components-react is deprecated and will not receive further updates, directing users to the Carbon Design System website for more information.

packages/carbon-components-react · high confidence

Accessibility validation tests added for DefinitionTooltip keyboard navigation; Added AVT accessibility tests for Notifications component; Added AVT accessibility tests for multiple components; Added SCSS tests for feature flags package; Added accessibility and interaction tests for Button component; Added accessibility and interaction tests for EditInPlace; Added accessibility and interaction tests for Interactive Tag variants; Added accessibility and keyboard navigation tests for Search component; Added accessibility baseline test for OverFlowMenuV2; Added accessibility test for PageHeader.Content; Added accessibility tests for Skeleton and Theme components; Added accessibility tests for TextArea component; Added accessibility validation tests for InterstitialScreen; Added accessibility validation tests for the ShapeIndicator component; Added accessibility visual regression test for TagOverflow; Added accessibility visual regression tests for Card component; Added accessibility visual regression tests for List components; Added accessibility visual regression tests for TreeView; Added e2e accessibility tests for Modal keyboard navigation; Added e2e tests for icon package exports; Added e2e tests for pictograms and pictograms-react package exports; Added snapshot test for the public API surface; Added snapshot tests for color palette and SCSS public API; Added tests for @carbon/colors package; Added tests for layout token resolution and SCSS exports; Added tests for motion package DTCG token validation and public API; Added tests for postinstall scripts and SCSS importability; Added tests for the grid package's SCSS public API; Added unit tests for icon-helpers utility functions; Snapshot test for grid public API exports; Snapshot tests added for @carbon/motion public API and SCSS exports; Snapshot tests added for public API exports; Updated Public API snapshot for elements package; Updated icon export snapshot for @carbon/icons-vue; Updated pictogram export snapshot; Updated pictogram export snapshot for Public API tests.

A dependency / build maintenance change in (dependencies) — 2519 commits (369 fixs), 141 files.

(dependencies) · high confidence · unverified

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 52 → 52 (-0.3)
• Rubric changed (rubric-2026.09.12 → rubric-2026.09.18) — scores are not directly comparable.

• Code Health 57 → 57 (+0.4)
• Architecture 59 → 64 (+5.6)
• Maturity 85 → 85 (+0.1)
• Readiness 44 → 43 (-1.5)
• Security 58 → 60 (+2.1)
• Accessibility 65 → 65 (-0.1)
• Performance 60 (new)

• CDSTearsheet._handleBlur (cognitive 19) (packages/web-components/src/components/tearsheet/tearsheet.ts)
• CDSTearsheet._handleBlur (cyclomatic 18) (packages/web-components/src/components/tearsheet/tearsheet.ts)
• CDSTearsheet.updated (cognitive 26) (packages/web-components/src/components/tearsheet/tearsheet.ts)
• CDSTearsheet.updated (cyclomatic 20) (packages/web-components/src/components/tearsheet/tearsheet.ts)
• Change coupling: HeaderContainer.tsx ↔ SideNav.tsx (packages/react/src/components/UIShell/HeaderContainer.tsx)
• ClassTooLong: CDSTearsheet (packages/web-components/src/components/tearsheet/tearsheet.ts)
• Decision and consequences rest on an external reference (Michael Nygard's blog post) rather than being written by the author herself; no concrete content of the ADR itself (docs/decisions/0001-record-project-decisions.md)
• Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (no pnpm-resolved versions to grade)
• Documentation: no architecture or design documentation (packages/react/README.md)
• Documentation: no architecture or design documentation (packages/utilities-react/README.md)
• Documentation: no installation or build instructions (README.md)
• Documentation: no usage examples (e2e/README.md)
• Documentation: written for insiders
• Documentation: written for insiders (packages/icons-react/README.md)
• High CVE: [GHSA redacted] (yarn.lock)
• Hotspot: actions/issues/src/plugins/bob-bug-triage.js (actions/issues/src/plugins/bob-bug-triage.js)
• Hotspot: packages/react/src/components/Coachmark/CoachmarkContent.tsx (packages/react/src/components/Coachmark/CoachmarkContent.tsx)
• Hotspot: packages/react/src/components/NumberInput/NumberInput.tsx (packages/react/src/components/NumberInput/NumberInput.tsx)
• Hotspot: packages/react/src/components/Tag/Tag.tsx (packages/react/src/components/Tag/Tag.tsx)
• Hotspot: packages/react/src/components/Tile/Tile.tsx (packages/react/src/components/Tile/Tile.tsx)
• …and 23 more

• AddSelectBody.AddSelectBody (cognitive 27) (packages/react/src/components/AddSelect/AddSelectBody.tsx)
• AddSelectBody.AddSelectBody (cyclomatic 32) (packages/react/src/components/AddSelect/AddSelectBody.tsx)
• AddSelectRow.AddSelectRow (cognitive 16) (packages/react/src/components/AddSelect/AddSelectRow.tsx)
• AddSelectRow.AddSelectRow (cyclomatic 18) (packages/react/src/components/AddSelect/AddSelectRow.tsx)
• AddSelectSelectionSummaryItem.AddSelectSelectionSummaryItem (cognitive 16) (packages/react/src/components/AddSelect/AddSelectSelectionSummaryItem.tsx)
• CDSOverflowMenuBody._handleKeydown (cyclomatic 18) (packages/web-components/src/components/overflow-menu/overflow-menu-body.ts)
• CDSTearsheetHeaderContent._handleDecoratorChange (cognitive 25) (packages/web-components/src/components/tearsheet/tearsheet-header-content.ts)
• CDSTearsheetHeaderContent.render (cognitive 16) (packages/web-components/src/components/tearsheet/tearsheet-header-content.ts)
• CDSTearsheetHeaderContent.render (cyclomatic 16) (packages/web-components/src/components/tearsheet/tearsheet-header-content.ts)
• ConditionBuilderContent.ConditionBuilderContent (cognitive 31) (packages/react/src/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.tsx)
• ConditionBuilderContent.ConditionBuilderContent (cyclomatic 28) (packages/react/src/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.tsx)
• ConditionBuilderItem.ConditionBuilderItem (cognitive 54) (packages/react/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.tsx)
• ConditionBuilderItem.ConditionBuilderItem (cyclomatic 53) (packages/react/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.tsx)
• ConditionBuilderItemDate.ConditionBuilderItemDate (cognitive 23) (packages/react/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.tsx)
• ConditionBuilderItemDate.ConditionBuilderItemDate (cyclomatic 22) (packages/react/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.tsx)
• ConditionBuilderItemNumber.ConditionBuilderItemNumber (cyclomatic 16) (packages/react/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.tsx)
• ConditionGroupBuilder.ConditionGroupBuilder (cognitive 60) (packages/react/src/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.tsx)
• ConditionGroupBuilder.ConditionGroupBuilder (cyclomatic 51) (packages/react/src/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.tsx)
• Documentation: contradicts the code (packages/carbon-components-react/README.md)
• Documentation: contradicts the code (packages/carbon-components/README.md)
• …and 149 more

• 75 commits — 43 feature/other, 32 fixes

• packages/react — 36 commits
• packages/web-components — 15 commits
• .github/workflows — 10 commits
• packages/styles — 6 commits
• (root) — 4 commits
• docs/guides — 1 commit
• packages/colors — 1 commit
• packages/icons — 1 commit
• packages/type — 1 commit

• fix: fix(Card): resolve issues mentioned design review (React) (#23302)
• fix: fix(ChatButton): add Storybook controls (#23040)
• fix: fix(DataTable): clear removed row selection state (#22994)
• fix: fix(DatePicker): call onChange for typed dates (#23165)
• fix: fix(FluidComboBox): add Storybook controls (#22835)
• fix: fix(FluidTextInput): add Storybook controls (#22848)
• fix: fix(Loading): reset overlay dialog focus outline (#23495)
• fix: fix(Notifications): add Storybook controls (#22864)
• fix: fix(SideNav): keep fixed collapsed nav inert (#23452)
• fix: fix(Tearsheet): correct Carbon layer hierarchy - body elevated instead of header (#23390)
• fix: fix(Tile): add Storybook controls (#22993)
• fix: fix(TreeNode): type error on onToggle (#23467)
• fix: fix(TreeView): add Storybook controls (#23027)
• fix: fix(code snippet): a11y redundant tab stop issue (#23428)
• fix: fix(colors): publish generated type declarations (#23492)
• fix: fix(deps): update dependency eslint-plugin-react-hooks to v7 (#23010)
• fix: fix(deps): update dependency stylelint-config-standard-scss to v17 (#23119)
• fix: fix(file-uploader): support required drop container (#23512)
• fix: fix(guidebanner): wc fix spacing when there is no title v12 (#23525)
• fix: fix(notifications): web component callout and inline bugs from review (#23498)
• …and 55 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

carbon-design-system/carbon was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.