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
andline
will be changed fill
will NOT be changedtext
will be changed tofront
line
will be chaged tofront
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 |