Color migration

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.

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

How to use the script

If the script gets called without a passed path, the working directory and all sub directories will be searched.

node colorMigration.js

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

node colorMigration.js src/components/

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.