Updating customizations to the latest Carbon version

As new Carbon versions are released, Order Hub is often upgraded to the latest version. These changes bring improvements to the application. If you are on earlier Carbon versions, to take advantage of the new features, you want to migrate your custom applications to the latest Carbon version.

1. Update the Carbon icons as follows.
   1. Install the latest schematics.
   2. Update the @buc/schematics version in your project.
   3. Go to the module directory.
   4. Run the icon upgrade schematic by using the following command.

      cd MODULE ## Navigate to the app you want to upgrade
      ng g @buc/schematics:migrate-icons-angular-pkg

      This command updates all instances of <ibm-icon-* in your HTML file to use the new icon directives. If no declaration files exist, the command also creates declaration files such as module.d.ts.
   5. If you see the @carbon/icons-angular package in your package.json file, remove it.
   For more information and examples of importing and by using @carbon/icons, see Carbon components upgrade guide
2. Upgrade the Carbon version as follows.
   1. Go to the module directory.
   2. Run the Carbon upgrade schematic by using the following command.

      cd MODULE ## Navigate to the app you want to upgrade
      
      ng g @buc/schematics:migrate-carbon-11-pkg
      
      ## Verify your package.json changes & install
      yarn install

      This schematic updates the *.html, *.scss, and package.json files. The prefix for CSS classes is now cds--.
   3. Test for any bx-- prefix that were missed. In particular, the JSON files that are in the assets directories.

      /**
       * @todo
       * We should automate the prefix migration for JSON files too,
       * I recently discovered that`buc-field-details.json` can have container classes.
       */

3. Verify that no variable conflicts exist. The styles.scss file imports only from the @carbon/styles and @carbon/charts packages. If you see references to other Carbon packages, remove them.
   Carbon v11 uses css variables to set up themes and Carbon styling. For more information, see the following guide.

   /**
    * @todo
    * Add link to carbon components angular - Carbon 11 styling in Angular
    * * Break down how new styling works with css variables
    * * Set up `styles.scss`.
    * * What to keep / what to remove
    */

   By default, all variables are imported without using namespaces. If you see conflicts, remove the as *; from the @use statement. See the following example.

   Before (no namespace for imports)

   @use '@carbon/colors' as *;
   $primary-color: $blue-40;

   After (adding namespace)

   @use '@carbon/colors';
   $primary-color: colors.$blue-40;

   For more information on Carbon styling upgrades, see the Carbon v11 migration guide.