Color migration

With updates to release 2.0.0 and 4.0.0, each time major color updates are introduced. Please see related sections below for further information how to update respectively.

How to migrate

To start the migration process, run the following command: If the script gets called without a passed path, the working directory and all sub directories will be searched.

node migration/colorMigration.js

A relative path to the current working directory can be passed to the command line, to narrow down the searched folders

node migration/colorMigration.js src/components/

After this the user will be prompted with question do decide, to which version should be updated. For the migration to version 4.0.0 it can also be decided if tsx and ts should be included, otherwise only scss and css files will be treated.

Release 4.0.0 specifics

The mapping for the manual migration can be found in the repo under dist/color-migration-mapping-4-0-0.json

Release 2.0.0 specifics

With the update of release 2.0.0, a new color naming schema will be used. To ease the migration from a former release for self written components, the Frontend-Kit provide a migration script called color-migration.js. The script will change css-variables color names, e.g. var(--plain__enabled__fill__default)

What will be migrated

The script will only migrate scss or css files.

CSS-inJS or single file components with style tags solutions needs to be migrated manually.

Please see mapping for further information and how to migrate manually.

Mapping

The following 3 css-variables color name variants are present in the frontend-kit:

  • --<schema>__<state>__fill__<css-pseudo-state>
  • --<schema>__<state>__text__<css-pseudo-state>
  • --<schema>__<state>__line__<css-pseudo-state>

The following rules will be applied:

  • only text and line will be changed
  • fill will NOT be changed
  • text will be changed to front
  • line will be chaged to front

That means only 2 css-variables color name variants will be present in the frontend-kit:

  • --<schema>__<state>__fill__<css-pseudo-state>
  • --<schema>__<state>__front__<css-pseudo-state>

In this example the plain schema is used as an example.

old name new name change
--<schema>__<state>__fill__<css-pseudo-state> --<schema>__<state>__fill__<css-pseudo-state> no
--<schema>__<state>__text__<css-pseudo-state> --<schema>__<state>__front__<css-pseudo-state> yes
--<schema>__<state>__line__<css-pseudo-state> --<schema>__<state>__front__<css-pseudo-state> yes