# 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>

## Round Corner

    .my-reveal-container{
      --reveal-border-decoration-type: round;
      --reveal-border-decoration-size: 4px;
    }

## Custom border radius

    .my-reveal-container{
      --reveal-border-decoration-type: round;
      --reveal-border-decoration-top-left-radius: 0;
      --reveal-border-decoration-top-right-radius: 10px;
      --reveal-border-decoration-bottom-left-radius: 20px;
      --reveal-border-decoration-bottom-right-radius: 0;
    }

## Even more fancy

    .my-reveal-container{
      --reveal-border-decoration-type: bevel;
      --reveal-border-decoration-size: 16px;
    }

## Opacity

    .my-reveal-container{
      --reveal-opacity: 1.0;
    }

## Colored Button

    .colored-button1 {
      --reveal-color: red;
    }

    .colored-button2 {
      --reveal-color: #7cbb00;
    }

    .colored-button3 {
      --reveal-color: rgb(255, 187, 0);
    }

    .colored-button4 {
      --reveal-color: #00A1F1;
    }

## Customize Every Parts

    .my-reveal-container{
      --reveal-border-color: #FF00C1;
      --reveal-hover-light-color: #00B8FF;
      --reveal-press-animation-color: #FFFFFF;
      --reveal-opacity: 1.0;
    }

## Border Width

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

## Border Fill Radius

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

## No border

    .my-reveal-container{
      --reveal-border-width: 0;
    }

No Single Border
With Round Border Radius
With Bevel Border Radius

## No border

    .no-top {
      --reveal-border-top: none;
    }

    .no-bottom {
      --reveal-border-bottom: none;
    }

    .no-left {
      --reveal-border-left: none;
    }

    .no-right {
      --reveal-border-right: none;
    }

    .horizontal {
      --reveal-border-left: none;
      --reveal-border-right: none;
    }

    .vertical {
      --reveal-border-top: none;
      --reveal-border-bottom: none;
    }

    .only-top {
      --reveal-border-bottom: none;
      --reveal-border-left: none;
      --reveal-border-right: none;
    }

    .only-bottom {
      --reveal-border-top: none;
      --reveal-border-left: none;
      --reveal-border-right: none;
    }

    .only-left {
      --reveal-border-top: none;
      --reveal-border-bottom: none;
      --reveal-border-right: none;
    }

    .only-right {
      --reveal-border-top: none;
      --reveal-border-bottom: none;
      --reveal-border-right: none;
    }

## Fill Radius

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

## No Fill

    .my-reveal-container{
      --reveal-hover-light: false;
    }

## Hold animation

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

## Release animation

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

## Animation Fill Mode

    .my-reveal-container{
      --reveal-hover-light-fill-radius: 0.1;
      --reveal-press-animation-radius-mode: constrained;
    }

## No animation

    .my-reveal-container{
      --reveal-press-animation: false;
    }

## List style

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

## Dynamic size

## No diffuse

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

## Benchmark (100 Items)

🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎 🥩🥚🥛👀📎