index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Home</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <nav>
    <a href="./" aria-current="page">Home</a>
    <a href="./file-input.html">File Input</a>
  </nav>
  <main>
    <h1 id="versatile-component-styling-with-css-variables">Versatile Component Styling with CSS Variables</h1>
    <p>This is my take on using CSS variables to create versatile styling for web components. It uses three types of
      classes:</p>
    <ul>
      <li>
        <p><code>file-input</code>: a component class that defines the basic structure and functionality of a file input
          element.</p>
      </li>
      <li>
        <p><code>*-var</code>: a trait class that provides variables with optional defaults along with necessary
          modifications for the css properties, such as colors, fonts, borders, etc.</p>
      </li>
      <li>
        <p><code>primary, accent, thick ...</code>: modifier classes that change the values of the variables provided by
          the trait class, allowing for different variations of the component</p>
      </li>
    </ul>
  </main>
</body>

</html>