=============
border-radius
=============

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

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

.. code-block:: css

  .custom-button {
    border-radius: 0.5rem;
  }

.. code-block:: css

  .card {
    border-radius: 8px;
  }

.. code-block:: css

  .avatar {
    border-radius: 50%;
  }

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

.. code-block:: css

  .custom-button {
    border-radius: var(--border-radius-small);
  }

.. code-block:: css

  .custom-button {
    border-radius: var(--border-radius-medium);
  }

.. code-block:: css

  .custom-button {
    border-radius: var(--border-radius-circle);
  }

.. code-block:: css

  .custom-button {
    border-radius: var(--border-radius-large);
  }

.. code-block:: css

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

  .custom-button {
    border-radius: var(--custom-border-radius);
  }

.. code-block:: css

    .custom-button {
      border-radius: var(--custom-border-radius, --border-radius-small);
    }


The rule also allows these values non-token values:

.. code-block:: css

    .no-radius {
      border-radius: 0;
    }

.. code-block:: css

    .inherited-radius {
      border-radius: inherit;
    }

.. code-block:: css

    .unset-radius {
      border-radius: unset;
    }

.. code-block:: css

    .initial-radius {
      border-radius: initial;
    }

Autofix functionality
---------------------

This rule can automatically fix some violations by replacing raw values with
appropriate design tokens. Examples of autofixable violations:

.. code-block:: css

  /* Before */
  .a {
    border-radius: 50%;
  }

  /* After autofix */
  .a {
    border-radius: var(--border-radius-circle);
  }

.. code-block:: css

  /* Before */
  .a {
    border-radius: 100%;
  }

  /* After autofix */
  .a {
    border-radius: var(--border-radius-circle);
  }

.. code-block:: css

  /* Before */
  .a {
    border-radius: 1000px;
  }

  /* After autofix */
  .a {
    border-radius: var(--border-radius-circle);
  }

.. code-block:: css

  /* Before */
  .a {
    border-radius: 4px;
  }

  /* After autofix */
  .a {
    border-radius: var(--border-radius-small);
  }

.. code-block:: css

  /* Before */
  .a {
    border-radius: 8px;
  }

  /* After autofix */
  .a {
    border-radius: var(--border-radius-medium);
  }

.. code-block:: css

  /* Before */
  .a {
    border-radius: 16px;
  }

  /* After autofix */
  .a {
    border-radius: var(--border-radius-large);
  }

.. code-block:: css

  /* Before */
  .a {
    border-radius: 4px 8px;
  }

  /* After autofix */
  .a {
    border-radius: var(--border-radius-small) var(--border-radius-medium);
  }