Source code
Revision control
Copy as Markdown
Other Tools
========================
use-font-weight-tokens
========================
This rule checks that CSS declarations use font-weight design token variables
instead of hardcoded values. This ensures consistent font-weight usage across
the application and makes it easier to maintain design system consistency.
This rule is autofixable and can automatically replace some font-weight values
with appropriate design tokens where possible.
Examples of incorrect code for this rule:
-----------------------------------------
.. code-block:: css
.normal-text {
font-weight: normal;
}
.. code-block:: css
.bold-text {
font-weight: bold;
}
.. code-block:: css
.bolder-text {
font-weight: bolder;
}
.. code-block:: css
.lighter-text {
font-weight: lighter;
}
.. code-block:: css
.custom-text {
font-weight: 400;
}
.. code-block:: css
.heading {
font-weight: 600;
}
.. code-block:: css
.bold-text {
font-weight: 700;
}
.. code-block:: css
.light-text {
font-weight: 300;
}
.. code-block:: css
.heavy-text {
font-weight: 900;
}
Examples of correct token usage for this rule:
----------------------------------------------
.. code-block:: css
.normal-text {
font-weight: var(--font-weight);
}
.. code-block:: css
.bold-text {
font-weight: var(--font-weight-bold);
}
.. code-block:: css
.button-text {
font-weight: var(--button-font-weight);
}
.. code-block:: css
.heading-text {
font-weight: var(--heading-font-weight);
}
.. code-block:: css
/* Local CSS variables that reference valid font-weight tokens are allowed */
:root {
--custom-font-weight: var(--font-weight-bold);
}
.custom-text {
font-weight: var(--custom-font-weight);
}
.. code-block:: css
.custom-text {
font-weight: var(--custom-font-weight, var(--font-weight-bold));
}
The rule also allows these non-token values:
.. code-block:: css
.inherited-text {
font-weight: inherit;
}
.. code-block:: css
.initial-text {
font-weight: initial;
}
.. code-block:: css
.unset-text {
font-weight: unset;
}
Autofix functionality
---------------------
This rule can automatically fix some violations by replacing values with
appropriate design tokens:
- ``normal`` → ``var(--font-weight)``
- ``600`` → ``var(--font-weight-bold)``
Examples of autofixable violations:
.. code-block:: css
/* Before */
.normal-text {
font-weight: normal;
}
/* After autofix */
.normal-text {
font-weight: var(--font-weight);
}
.. code-block:: css
/* Before */
.bold-text {
font-weight: 600;
}
/* After autofix */
.bold-text {
font-weight: var(--font-weight-bold);
}