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-type: none;
}

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

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

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

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

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

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

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

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

.only-right {
  --reveal-border-top-type: none;
  --reveal-border-bottom-type: none;
  --reveal-border-right-type: 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;
}
Welcome

Nested ShadowRoot

Dynamic size

No diffuse

.my-reveal-container{
  --reveal-diffuse: false;
}

Benchmark (100 Items)

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