Do not name the colors by their usage. Name them by their mood, meaning or so. Usage of color can change but name should be persistent. Also same color can be used across components and pages so the naming has to be still correct.
.color-brand-primary
.color-brand-secondary
.color-brand-secondary-off1
.color-brand-secondary-off2
.color-system-success
.color-system-warning
.color-system-info
.color-system-danger
Make sure to follow the Gulp log to see if there is any new undocumented icon.
For example: WARNING: Documentation missing for icon: external-link
.icon icon--code
.icon icon--code-commit
.icon icon--code-branch
.icon icon--code-merge
.icon icon--pull-request
.icon icon--git
.icon icon--git-square
.icon icon--github-alt
.icon icon--github-square
.icon icon--github
.icon icon--gitlab
.icon icon--bitbucket
.icon icon--css3
.icon icon--html5
.icon icon--js
.icon icon--sass
.icon icon--less
.icon icon--node-js
.icon icon--node
.icon icon--npm
.icon icon--react
.icon icon--typescript
.icon icon--php
.icon icon--python
.icon icon--ruby
.icon icon--java
.icon icon--android
.icon icon--swift
.icon icon--codeflow
.icon icon--cube
.icon icon--cubes
.icon icon--sliders-v
.icon icon--tachometer-alt
.icon icon--tasks
.icon icon--cog
.icon icon--cogs
.icon icon--copy
.icon icon--browser
.icon icon--chart-line