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 Acrylic texture of Fluent design System.

You can switch the width of the Acrylic texture in this demo.

To use this package, install by one of following:

• Load the package directly:

  • <script src="https://unpkg.com/@ax-design/acrylic" />

  • <script>AxAcrylic.register()</script>

• Load the package by esmodule:

  <script type="module">
  import { register } from 'https://unpkg.com/@ax-design/acrylic/es/index.js'
  register()
  </script>
                      

• Load the package by module loader or bundler:
  yarn add @ax-design/acrylic or npm i @ax-design/acrylic
  • CommonJS

    require('@ax-design/acrylic').register()
    

  • ESModule

    import { register } from '@ax-design/acrylic'
    register()
    
                        

<ax-acrylic>
  Acrylic!
</ax-acrylic>

.my-tile-container{
  --acrylic-tint-color: white;
}

.my-tile-container{
  --acrylic-tint-opacity: 0.45;
}

.my-tile-container{
  --acrylic-noise-opacity: 0.3;
}

.my-tile-container{
  --acrylic-blur: 5px;
}