# Welcome to project Axiom!

Project Axiom is a web component set which aims to combine good part of Fluent Design System and Material Design to a single design language.

This repo contains code of Reveal Highlight effect of Fluent design System.

## General Button

In order to use this component, we need to prepare some HTML:

    <ax-reveal-provider>
      <ax-reveal-bound class="my-reveal-container">
          <ax-reveal>
            <button class="ax-reveal-button">Reveal</button>
          </ax-reveal>
          <ax-reveal>
            <button class="ax-reveal-button">To</button>
          </ax-reveal>
        </div>
      </ax-reveal-bound>
    </ax-reveal-provider>

## Colored Button

    .my-reveal-container{
      --reveal-color: red;
    }

## Border Width

    .my-reveal-container{
      --reveal-border-width: 3px;
    }

## Fill Radius

    .my-reveal-container{
      --reveal-fill-radius: 0.2;
    }

## Hold animation

    .my-reveal-container{
      --reveal-animate-speed: 8000;
    }

## Release animation

    .my-reveal-container{
      --reveal-released-accelerate-rate: 20;
    }

## List style

    .my-reveal-container{
      --reveal-border-style: half;
    }

## No diffuse

    .my-reveal-container{
      --reveal-border-style: half;
      --reveal-diffuse: false;
    }