# @tmaito/themes

> 基于 less 的样式主题

Latest version **0.2.2** (published 2021-04-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install @tmaito/themes
pnpm add @tmaito/themes
yarn add @tmaito/themes
bun add @tmaito/themes
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2021-04-15 |
| First published | 2021-01-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 朱孟韩 |
| Maintainers | zmh7057 |
| Keywords | less, mixins |

## Links

- npm: https://www.npmjs.com/package/@tmaito/themes
- Repository: https://github.com/zmh7057/tmaito
- Homepage: https://github.com/zmh7057/tmaito/tree/master/packages/themes#readme
- Issues: https://github.com/zmh7057/tmaito/issues
- npm.io page: https://npm.io/package/@tmaito/themes

## Recent versions

- 0.2.2 (latest) — 2021-04-15
- 0.2.1 — 2021-03-17
- 0.2.0 — 2021-01-19
- 0.1.0 — 2021-01-19

## README

### 变量列表

```style

/* Font */
@font-size-sm: 12px * @hd;
@font-size-base: 14px * @hd;
@font-size-l: 16px * @hd;
@font-size-lg: 18px * @hd;
@font-size-xl: 24px * @hd;
@font-size-xxl: 32px * @hd;
@font-size-xxxl: 48px * @hd;
@font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", Tahoma, Arial, PingFangSC-Regular, "Hiragino Sans GB",
  "Microsoft Yahei", "Noto Sans", sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

// Color
@info-color: #00aafb;
@error-color: #ff2233;
@primary-color: #006cd2;
@success-color: #14c437;
@warning-color: #ff8607;

// Text Color
@text-color-0: #000;
@text-color-3: #333;
@text-color-6: #666;
@text-color-9: #999;
@text-color-c: #ccc;
@text-color-f: #fff;

// Link Color
@link-color: #006cd2;
@link-hover-color: #0060bc;
@link-active-color: #0060bc;

// Icon Color
@icon-color: #ccc;
@icon-active-color: @link-active-color;

// Border Color
@border-color: #f0f0f0;
@border-color-extra: #e5f7ff;

// Background Color
@bg-base: #f8f9fd;
@bg-white: #fff;
@bg-1: #fafafa;
@bg-extra: #e5effc;
@bg-primary: @primary-color;

// vertical paddings
@padding-x: 8px; // small items
@padding-l: 16px; // small containers and buttons
@padding-lg: 24px; // containers

// vertical margins
@margin-x: 8px; // small items
@margin-l: 16px; // small containers and buttons
@margin-lg: 24px; // containers

// Animation
@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

```

### mixins 列表

```less
/*
 * 溢出(...)省略展示
 * @rowCount 须展示行数
 */
.ellipsis(@rowCount);

/*
 * 横线
 * @dir 方向
 * @style 样式
 * @width 宽度
 * @color 颜色
 */
.border(@dir: bottom, @style: solid, @width: 1px, @color: @color-border)
```

### common 公用样式

可直接使用

```html
<!-- 居中 -->
<div className="align-center">XXXX</div>
<!-- 居右 -->
<div className="align-right">XXXX</div>
<!-- 数字 -->
<div className="num">XXXX</div>
<!-- 链接 -->
<div className="link">XXXX</div>
<!-- 单行溢出... -->
<div className="ellipsis">XXXX</div>
<!-- 禁止操作 -->
<div className="not-allowed">XXXX</div>
```

---
_Source: https://npm.io/package/@tmaito/themes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._