@yfill-series/theme v1.0.2

Theme ·

An html theme.

Install

using npm:

npm install @yfill-series/theme --save

or using yarn:

yarn add @yfill-series/theme

Usage

• Import resources and use the run method to get started.

  import Theme from "@yfill-series/theme";
  Theme.run();

  <script src="https://unpkg.com/@yfill-series/theme"></script>
  <script>
    Theme.run();
  </script>

• Set the theme attribute on the tag.

  background-color-[?main]-[-10-10]-[?a]-[?hover]
  font-color-[?main]-[-10-10]-[?a]-[?hover]
  border-color-[?main]-[-10-10]-[?a]-[?hover]
  box-shadow-[?main]-[0-2]-[?hover]
  font-size-[12-52]-[?hover]

Code example

<div
  background-color-0
  font-color-0
  font-color-main-0-a-hover
  font-size-18-hover
>
  <style>
    .item {
      line-height: 40px;
      border-width: 0;
      border-style: solid;
      transition: all 0.2s;
      padding-left: 10px;
      border-radius: 6px;
    }
  </style>
  <div
    class="item"
    background-color-1-hover
    border-color-4-a
    box-shadow-2
    box-shadow-main-0-hover
    border-color-1-hover
  >
    Content
  </div>
</div>
<div class="item" font-size-12>font12</div>
<div class="item" font-size-52>font52</div>