# @beisen-phoenix/style-token

> pc端UI样式原子组件

Latest version **3.3.55** (published 2019-11-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-phoenix/style-token
pnpm add @beisen-phoenix/style-token
yarn add @beisen-phoenix/style-token
bun add @beisen-phoenix/style-token
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.3.55 |
| Published | 2019-11-25 |
| First published | 2019-02-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 32.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | beisencorp |

## Links

- npm: https://www.npmjs.com/package/@beisen-phoenix/style-token
- npm.io page: https://npm.io/package/@beisen-phoenix/style-token

## Dependencies (1)

- [typescript](https://npm.io/package/typescript.md) ^3.3.3

## Recent versions

- 3.3.55 (latest) — 2019-11-25
- 3.2.44-rc.1 (rc) — 2019-10-24
- 3.3.54 — 2019-11-25
- 3.3.53 — 2019-11-25
- 3.3.52 — 2019-11-24
- 3.3.51 — 2019-11-23
- 3.3.50 — 2019-11-22
- 3.3.49 — 2019-11-22
- 3.3.48 — 2019-11-22
- 3.3.47 — 2019-11-22
- 3.3.46 — 2019-11-22
- 3.3.45 — 2019-11-21
- 3.3.43 — 2019-11-21
- 3.3.42 — 2019-11-21
- 3.3.41-beta.1 — 2019-11-21
- … 348 more at https://npm.io/package/@beisen-phoenix/style-token/versions

## README

#### 组件说明
> 此组件为pc端基础样式组件,定义了符合平台设计样式变量,并且为换肤奠定了可实现的基础.
> 
> 此组件是你开发其他组件所必须依赖的包

#### 变量说明
> 该组件封装了平台预定义的pc端基本样式变量以及mixin

> $S1 ~ $S6 定义了平台预定义的背景色,对应设计稿的S1~S4

> $M1 ~ $M10 定义了平台预定义的字体色,对应设计稿的M1~M10

> $Sp1 ~ $Sp11 预定义了 几种间距,对应设计稿的Sp-1 ~ Sp-11

> $Ra1 ~ $Ra5 预定义了五种圆角,对应了设计稿的Ra-1 ~ Ra-5

> $blue $green $yellow $red 预定义了四中功能色(一般用于页面的tip),对应了设计稿的 F-blue F-green F-yellow F-red

> $D1 ~ $D11 以及 $D1n1 ~ $D11n1 预定义了辅助色,分别对应了设计稿的D1 ~ D11 以及 D1-1 ~ D11-1
> 
> $Fs1 ~ $Fs8 预定义了8种字体样式(包括了字号以及行高),对应了设计稿的Fs-1 ~ Fs-8

> $Sh1 ~ $Sh5 预定义了5种阴影效果,对应了设计稿的Sh-1 ~ Sh-5

#### className说明(通过使用预定义的类名,组件将支持换肤特性)
> 如果组件的某个DOM元素支持更换背景色,那么你可以给该元素设置预定义的className(skinBgS1 ~ skinBgS4)
> 
> 如果组件的某个DOM元素支持更换字体颜色,那么你可以给该元素设置预定义的className(skinFntM1 ~ skinFntM10)

> skinBgS1 ~ skinBgS6 预定义了六种背景色

> skinFntM1 ~ skinFntM10 预定义了十种字体颜色

#### 如何使用

> 在package.json中奖该组件作为依赖引入

```
    "@beisen-phoenix/style-token": "0.0.1"
```

> 在react组件中,如果某个组件有换肤的特性需求,需要使用预定义的class

```
import * as skin from '@beisen-phoenix/mobile-style-token';
export default class A extends Component {
    render() {
        return (
            <div className={skin.skinBgS1 skin.skinFntM1} >
                <h1>Hello World</h1>
            </div>
        );
    }
}

```

#### 关于reset样式

> 平台移动端会在承载页首先加载reset.css,所以在开发组件的时候,不必担心浏览器默认样式的问题,如果你在开发组件的过程中,需要运行example,并且需要屏蔽掉默认样式,你可以将reset.css引入到你的example中。
> 
> 另外该组件还提供了默认的背景色和字体色,你可以在example中引入该样式文件(default.css)来查看效果

```
import '@beisen-phoenix/mobile-style-token/css/reset.css';
import '@beisen-phoenix/mobile-style-token/css/default.css';

```

#### 结合 Styled-components 完成样式的定义
##### 参照[示例](http://gitlab.beisencorp.com/ux-share-platform/change-theme-example/tree/master)

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