========================
use-font-size-tokens
========================

This rule checks that CSS declarations use font-size design token variables
instead of hardcoded values. This ensures consistent font-size usage across
the application and makes it easier to maintain design system consistency.

Examples of incorrect code for this rule:
-----------------------------------------

.. code-block:: css

  .custom-text {
    font-size: 12px;
  }

.. code-block:: css

  .heading {
    font-size: 1rem;
  }

.. code-block:: css

  .small-text {
    font-size: 0.867rem;
  }

.. code-block:: css

  .large-text {
    font-size: 1.2em;
  }

.. code-block:: css

  .percentage-text {
    font-size: 100%;
  }

.. code-block:: css

  .point-text {
    font-size: 16pt;
  }

Examples of correct token usage for this rule:
----------------------------------------------

.. code-block:: css

  .custom-text {
    font-size: var(--font-size-root);
  }

.. code-block:: css

  .small-text {
    font-size: var(--font-size-small);
  }

.. code-block:: css

  .large-text {
    font-size: var(--font-size-large);
  }

.. code-block:: css

  .xlarge-text {
    font-size: var(--font-size-xlarge);
  }

.. code-block:: css

  .xxlarge-text {
    font-size: var(--font-size-xxlarge);
  }

.. code-block:: css

  .xxxlarge-text {
    font-size: var(--font-size-xxxlarge);
  }

.. code-block:: css

  .heading-medium {
    font-size: var(--heading-font-size-medium);
  }

.. code-block:: css

  .heading-large {
    font-size: var(--heading-font-size-large);
  }

.. code-block:: css

  .heading-xlarge {
    font-size: var(--heading-font-size-xlarge);
  }

.. code-block:: css

  /* Local CSS variables that reference valid font-size tokens are allowed */
  :root {
    --custom-font-size: var(--font-size-small);
  }

  .custom-text {
    font-size: var(--custom-font-size);
  }

.. code-block:: css

  .custom-text {
    font-size: var(--custom-font-size, var(--font-size-small));
  }

The rule also allows these non-token values:

.. code-block:: css

  .xxsmall-text {
    font-size: xxsmall;
  }

.. code-block:: css

  .xsmall-text {
    font-size: xsmall;
  }

.. code-block:: css

  .small-text {
    font-size: small;
  }

.. code-block:: css

  .medium-text {
    font-size: medium;
  }

.. code-block:: css

  .large-text {
    font-size: large;
  }

.. code-block:: css

  .xlarge-text {
    font-size: x-large;
  }

.. code-block:: css

  .xxlarge-text {
    font-size: xx-large;
  }

.. code-block:: css

  .xxxlarge-text {
    font-size: xxx-large;
  }

.. code-block:: css

  .smaller-text {
    font-size: smaller;
  }

.. code-block:: css

  .larger-text {
    font-size: larger;
  }

.. code-block:: css

  .inherited-text {
    font-size: inherit;
  }

.. code-block:: css

  .initial-text {
    font-size: initial;
  }

.. code-block:: css

  .unset-text {
    font-size: unset;
  }