# Design Tokens for Website

This document outlines the design tokens defined in the `Tokens.xlsx` file, including global tokens (base values) and web system tokens (specific to Tailwind CSS integration). The tokens are organized into two sections corresponding to the Excel sheets: `Global tokens` and `Web sys tokens`.

## Global Tokens

The `Global tokens` sheet defines foundational design tokens, including colors, transparency, angles, typography, ratios, radii, borders, spacing, and breakpoints. These serve as the base values referenced by other tokens.

| Type        | Token                      | Value                  | 移动端约定值 | 有调整会标黄 | 新增会标蓝 | 可不录入的文字会变红 |
| ----------- | -------------------------- | ---------------------- | ------------ | ------------ | ---------- | -------------------- |
| color       | glo.color.orange.0         | #FFECDE                |              |              |            |                      |
|             | glo.color.orange.10        | #FFD7B8                |              |              |            |                      |
|             | glo.color.orange.20        | #FFBF8F                |              |              |            |                      |
|             | glo.color.orange.30        | #FFA264                |              |              |            |                      |
|             | glo.color.orange.40        | #FD8239                |              |              |            |                      |
|             | glo.color.orange.50        | #F25E0F                |              |              |            |                      |
|             | glo.color.orange.60        | #D04500                |              |              |            |                      |
|             | glo.color.orange.70        | #A83400                |              |              |            |                      |
|             | glo.color.orange.80        | #7B2300                |              |              |            |                      |
|             | glo.color.orange.90        | #4D1400                |              |              |            |                      |
|             | glo.color.yellow.0         | #FFF8DE                |              |              |            |                      |
|             | glo.color.yellow.10        | #FFEFB3                |              |              |            |                      |
|             | glo.color.yellow.20        | #FFE386                |              |              |            |                      |
|             | glo.color.yellow.30        | #FCD258                |              |              |            |                      |
|             | glo.color.yellow.40        | #F3BC2A                |              |              |            |                      |
|             | glo.color.yellow.50        | #E6A100                |              |              |            |                      |
|             | glo.color.yellow.60        | #C78800                |              |              |            |                      |
|             | glo.color.yellow.70        | #A26B00                |              |              |            |                      |
|             | glo.color.yellow.80        | #784D00                |              |              |            |                      |
|             | glo.color.yellow.90        | #4D2F00                |              |              |            |                      |
|             | glo.color.grass.0          | #F8FFDE                |              |              |            |                      |
|             | glo.color.grass.10         | #EDFCB8                |              |              |            |                      |
|             | glo.color.grass.20         | #E0F68F                |              |              |            |                      |
|             | glo.color.grass.30         | #CFED67                |              |              |            |                      |
|             | glo.color.grass.40         | #BAE041                |              |              |            |                      |
|             | glo.color.grass.50         | #A0CD1E                |              |              |            |                      |
|             | glo.color.grass.60         | #82B500                |              |              |            |                      |
|             | glo.color.grass.70         | #689600                |              |              |            |                      |
|             | glo.color.grass.80         | #4B7200                |              |              |            |                      |
|             | glo.color.grass.90         | #304D00                |              |              |            |                      |
|             | glo.color.green.0          | #DEFFE7                |              |              |            |                      |
|             | glo.color.green.10         | #B9FCCD                |              |              |            |                      |
|             | glo.color.green.20         | #94F7B1                |              |              |            |                      |
|             | glo.color.green.30         | #6FEE96                |              |              |            |                      |
|             | glo.color.green.40         | #4AE27B                |              |              |            |                      |
|             | glo.color.green.50         | #28D061                |              |              |            |                      |
|             | glo.color.green.60         | #0BB84A                |              |              |            |                      |
|             | glo.color.green.70         | #00983C                |              |              |            |                      |
|             | glo.color.green.80         | #007331                |              |              |            |                      |
|             | glo.color.green.90         | #004D22                |              |              |            |                      |
|             | glo.color.mint.0           | #DEFFF8                |              |              |            |                      |
|             | glo.color.mint.10          | #B6FBED                |              |              |            |                      |
|             | glo.color.mint.20          | #8DF3E2                |              |              |            |                      |
|             | glo.color.mint.30          | #65E9D5                |              |              |            |                      |
|             | glo.color.mint.40          | #3FDAC4                |              |              |            |                      |
|             | glo.color.mint.50          | #1DC7B0                |              |              |            |                      |
|             | glo.color.mint.60          | #00AD96                |              |              |            |                      |
|             | glo.color.mint.70          | #009182                |              |              |            |                      |
|             | glo.color.mint.80          | #006F67                |              |              |            |                      |
|             | glo.color.mint.90          | #004D49                |              |              |            |                      |
|             | glo.color.sky.0            | #DEECFF                |              |              |            |                      |
|             | glo.color.sky.10           | #B5D2FD                |              |              |            |                      |
|             | glo.color.sky.20           | #8CB5F9                |              |              |            |                      |
|             | glo.color.sky.30           | #6296F2                |              |              |            |                      |
|             | glo.color.sky.40           | #3A76E6                |              |              |            |                      |
|             | glo.color.sky.50           | #1E58D2                |              |              |            |                      |
|             | glo.color.sky.60           | #063BB8                |              |              |            |                      |
|             | glo.color.sky.70           | #002A98                |              |              |            |                      |
|             | glo.color.sky.80           | #001E73                |              |              |            |                      |
|             | glo.color.sky.90           | #00134D                |              |              |            |                      |
|             | glo.color.blue.0           | #DEE0FF                |              |              |            |                      |
|             | glo.color.blue.10          | #BCBEFF                |              |              |            |                      |
|             | glo.color.blue.20          | #9797FF                |              |              |            |                      |
|             | glo.color.blue.30          | #7370FF                |              |              |            |                      |
|             | glo.color.blue.40          | #4E48FF                |              |              |            |                      |
|             | glo.color.blue.50          | #3126E6                |              |              |            |                      |
|             | glo.color.blue.60          | #180AC7                |              |              |            |                      |
|             | glo.color.blue.70          | #0F00A2                |              |              |            |                      |
|             | glo.color.blue.80          | #0D0078                |              |              |            |                      |
|             | glo.color.blue.90          | #09004D                |              |              |            |                      |
|             | glo.color.violet.0         | #E4DEFF                |              |              |            |                      |
|             | glo.color.violet.10        | #C7B7FD                |              |              |            |                      |
|             | glo.color.violet.20        | #AA90F9                |              |              |            |                      |
|             | glo.color.violet.30        | #8D68F2                |              |              |            |                      |
|             | glo.color.violet.40        | #7B47FF                |              |              |            |                      |
|             | glo.color.violet.50        | #5923D2                |              |              |            |                      |
|             | glo.color.violet.60        | #4309B8                |              |              |            |                      |
|             | glo.color.violet.70        | #340098                |              |              |            |                      |
|             | glo.color.violet.80        | #290073                |              |              |            |                      |
|             | glo.color.violet.90        | #1C004D                |              |              |            |                      |
|             | glo.color.purple.0         | #FBDEFF                |              |              |            |                      |
|             | glo.color.purple.10        | #F2B7FD                |              |              |            |                      |
|             | glo.color.purple.20        | #E690F9                |              |              |            |                      |
|             | glo.color.purple.30        | #D668F2                |              |              |            |                      |
|             | glo.color.purple.40        | #C241E6                |              |              |            |                      |
|             | glo.color.purple.50        | #A823D2                |              |              |            |                      |
|             | glo.color.purple.60        | #8A09B8                |              |              |            |                      |
|             | glo.color.purple.70        | #6E0098                |              |              |            |                      |
|             | glo.color.purple.80        | #520073                |              |              |            |                      |
|             | glo.color.purple.90        | #36004D                |              |              |            |                      |
|             | glo.color.magenta.0        | #FBDEFF                |              |              |            |                      |
|             | glo.color.magenta.10       | #FDB6D3                |              |              |            |                      |
|             | glo.color.magenta.20       | #F98DBC                |              |              |            |                      |
|             | glo.color.magenta.30       | #F264A4                |              |              |            |                      |
|             | glo.color.magenta.40       | #E63C8B                |              |              |            |                      |
|             | glo.color.magenta.50       | #D21F77                |              |              |            |                      |
|             | glo.color.magenta.60       | #B80761                |              |              |            |                      |
|             | glo.color.magenta.70       | #980050                |              |              |            |                      |
|             | glo.color.magenta.80       | #73003E                |              |              |            |                      |
|             | glo.color.magenta.90       | #4D002A                |              |              |            |                      |
|             | glo.color.red.0            | #FFDEDE                |              |              |            |                      |
|             | glo.color.red.10           | #FFBCBC                |              |              |            |                      |
|             | glo.color.red.20           | #FF9696                |              |              |            |                      |
|             | glo.color.red.30           | #F97372                |              |              |            |                      |
|             | glo.color.red.40           | #EF4E4D                |              |              |            |                      |
|             | glo.color.red.50           | #E12A2A                |              |              |            |                      |
|             | glo.color.red.60           | #C2110E                |              |              |            |                      |
|             | glo.color.red.70           | #A00700                |              |              |            |                      |
|             | glo.color.red.80           | #770800                |              |              |            |                      |
|             | glo.color.red.90           | #4D0600                |              |              |            |                      |
|             | glo.color.grey.0           | #E8E4EB                |              |              |            |                      |
|             | glo.color.grey.10          | #D4D0D8                |              |              |            |                      |
|             | glo.color.grey.20          | #AAA3B1                |              |              |            |                      |
|             | glo.color.grey.30          | #958E9E                |              |              |            |                      |
|             | glo.color.grey.40          | #847D8B                |              |              |            |                      |
|             | glo.color.grey.50          | #706A78                |              |              |            |                      |
|             | glo.color.grey.60          | #5C5565                |              |              |            |                      |
|             | glo.color.grey.70          | #484151                |              |              |            |                      |
|             | glo.color.grey.80          | #352E3E                |              |              |            |                      |
|             | glo.color.grey.90          | #282233                |              |              |            |                      |
|             | glo.color.grey.100         | #211A2B                |              |              |            |                      |
|             | glo.color.white            | #FFFFFF                |              |              |            |                      |
|             | glo.color.black            | #000000                |              |              |            |                      |
| Transparent | glo.transparent.t0         | 0                      |              |              |            |                      |
|             | glo.transparent.t2         | 0.02                   |              |              |            |                      |
|             | glo.transparent.t4         | 0.04                   |              |              |            |                      |
|             | glo.transparent.t6         | 0.06                   |              |              |            |                      |
|             | glo.transparent.t8         | 0.08                   |              |              |            |                      |
|             | glo.transparent.t12        | 0.12                   |              |              |            |                      |
|             | glo.transparent.t15        | 0.15                   |              |              |            |                      |
|             | glo.transparent.t20        | 0.2                    |              |              |            |                      |
|             | glo.transparent.t25        | 0.25                   |              |              |            |                      |
|             | glo.transparent.t30        | 0.3                    |              |              |            |                      |
|             | glo.transparent.t45        | 0.45                   |              |              |            |                      |
|             | glo.transparent.t65        | 0.65                   |              |              |            |                      |
|             | glo.transparent.t85        | 0.85                   |              |              |            |                      |
| Degree      | glo.deg.ltr                | to Right               |              |              |            |                      |
|             | glo.deg.ttb                | to Bottom              |              |              |            |                      |
|             | glo.deg.lttrb              | to Bottom Right        |              |              |            |                      |
| Typeface    | glo.font.family.sys        | Poppins                |              |              |            |                      |
|             | glo.font.family.numDisplay | DIN Alternate          |              |              |            |                      |
|             | glo.font.family.num        | Poppins                |              |              |            |                      |
|             | glo.font.family.display    | Oleo Script Swash Caps |              |              |            |                      |
|             | glo.font.style.italic      | Italic                 |              |              |            |                      |
|             | glo.font.size.64           | 64                     |              |              |            |                      |
|             | glo.font.size.48           | 48                     |              |              |            |                      |
|             | glo.font.size.36           | 36                     |              |              |            |                      |
|             | glo.font.size.24           | 24                     |              |              |            |                      |
|             | glo.font.size.20           | 20                     |              |              |            |                      |
|             | glo.font.size.18           | 18                     |              |              |            |                      |
|             | glo.font.size.16           | 16                     |              |              |            |                      |
|             | glo.font.size.14           | 14                     |              |              |            |                      |
|             | glo.font.size.12           | 12                     |              |              |            |                      |
|             | glo.font.weight.regular    | 400                    |              |              |            |                      |
|             | glo.font.weight.medium     | 500                    |              |              |            |                      |
|             | glo.font.weight.semibold   | 600                    |              |              |            |                      |
|             | glo.font.weight.bold       | 700                    |              |              |            |                      |
|             | glo.font.lineheight.size64 | 80px                   |              |              |            |                      |
|             | glo.font.lineheight.size48 | 56px                   |              |              |            |                      |
|             | glo.font.lineheight.size36 | 48px                   |              |              |            |                      |
|             | glo.font.lineheight.size24 | 28px                   |              |              |            |                      |
|             | glo.font.lineheight.size20 | 24px                   |              |              |            |                      |
|             | glo.font.lineheight.size18 | 24px                   |              |              |            |                      |
|             | glo.font.lineheight.size16 | 24px                   |              |              |            |                      |
|             | glo.font.lineheight.size14 | 20px                   |              |              |            |                      |
|             | glo.font.lineheight.size12 | 20px                   |              |              |            |                      |
|             | glo.font.lineheight.size0  | 1                      |              |              |            |                      |
| radio       | glo.radio.1.1              | 1:1                    |              |              |            |                      |
|             | glo.radio.4.3              | 4:3                    |              |              |            |                      |
|             | glo.radio.3.2              | 3:2                    |              |              |            |                      |
|             | glo.radio.2.1              | 2:1                    |              |              |            |                      |
|             | glo.radio.16.9             | 16:9                   |              |              |            |                      |
| radius      | glo.radius.4               | 4                      |              |              |            |                      |
|             | glo.radius.8               | 8                      |              |              |            |                      |
|             | glo.radius.12              | 12                     |              |              |            |                      |
|             | glo.radius.16              | 16                     |              |              |            |                      |
|             | glo.radius.24              | 24                     |              |              |            |                      |
|             | glo.radius.round           | 0.5                    |              |              |            |                      |
| border      | glo.border.1               | 1px                    |              |              |            |                      |
|             | glo.border.2               | 2px                    |              |              |            |                      |
|             | glo.border.4               | 4px                    |              |              |            |                      |
| space       | glo.spacing.4              | 4px                    |              |              |            |                      |
|             | glo.spacing.8              | 8px                    |              |              |            |                      |
|             | glo.spacing.12             | 12px                   |              |              |            |                      |
|             | glo.spacing.16             | 16px                   |              |              |            |                      |
|             | glo.spacing.24             | 24px                   |              |              |            |                      |
|             | glo.spacing.32             | 32px                   |              |              |            |                      |
|             | glo.spacing.48             | 48px                   |              |              |            |                      |
|             | glo.spacing.64             | 64px                   |              |              |            |                      |
|             | glo.spacing.80             | 80px                   |              |              |            |                      |
|             | glo.spacing.128            | 128px                  |              |              |            |                      |
| breackpoint | breackpoint.xs             | <768px                 |              |              |            |                      |
|             | breackpoint.s              | ≥768px                 |              |              |            |                      |
|             | breackpoint.m              | ≥1024px                |              |              |            |                      |
|             | breackpoint.l              | ≥1280px                |              |              |            |                      |
|             | breackpoint.xl             | ≥1536                  |              |              |            |                      |

## Web System Tokens

The `Web sys tokens` sheet defines tokens specifically for web use, including colors, typography, shadows, radii, and borders. These are intended for integration with Tailwind CSS, particularly for color definitions in dark and light themes.

| Type         |            | Token                                  | Value@Dark Theme(Default)                                                                                                     | Value on White       |
| ------------ | ---------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| color        | primary    | color.primary.normal                   | $glo.color.magenta.50                                                                                                         |                      |
|              |            | color.primary.hover                    | $glo.color.magenta.40                                                                                                         |                      |
|              |            | color.primary.press                    | $glo.color.magenta.60                                                                                                         |                      |
|              |            | color.primary.disabled                 | $color.surface.nest.disabled                                                                                                  |                      |
|              |            | color.primary.variant.normal           | $glo.color.magenta.40                                                                                                         |                      |
|              |            | color.primary.variant.hover            | $glo.color.magenta.30                                                                                                         |                      |
|              |            | color.primary.variant.press            | $glo.color.magenta.50                                                                                                         |                      |
|              |            | color.primary.variant.disabled         | $color.surface.nest.disabled                                                                                                  |                      |
|              |            | color.primary.gradient.normal          | linear-gradient($glo.deg.ltr,$glo.color.magenta.30,$glo.color.purple.40)                                                      |                      |
|              |            | color.primary.gradient.hover           | linear-gradient($glo.deg.ltr,$glo.color.magenta.20,$glo.color.purple.30)                                                      |                      |
|              |            | color.primary.gradient.press           | linear-gradient($glo.deg.ltr,$glo.color.magenta.40,$glo.color.purple.50)                                                      |                      |
|              |            | color.primary.gradient.disabled        | $color.surface.nest.disabled                                                                                                  |                      |
|              |            | color.primary.onpic.normal             | $glo.color.violet.40                                                                                                          | $glo.transparent.t85 |
|              |            | color.primary.onpic.hover              | $glo.color.violet.30                                                                                                          | $glo.transparent.t85 |
|              |            | color.primary.onpic.press              | $glo.color.violet.50                                                                                                          | $glo.transparent.t85 |
|              | Important  | color.important.normal                 | $glo.color.red.50                                                                                                             |                      |
|              |            | color.important.hover                  | $glo.color.red.40                                                                                                             |                      |
|              |            | color.important.press                  | $glo.color.red.60                                                                                                             |                      |
|              |            | color.important.disabled               | $color.surface.nest.disabled                                                                                                  |                      |
|              |            | color.important.variant.normal         | $glo.color.red.40                                                                                                             |                      |
|              |            | color.important.variant.hover          | $glo.color.red.30                                                                                                             |                      |
|              |            | color.important.variant.press          | $glo.color.red.50                                                                                                             |                      |
|              |            | color.important.variant.disabled       | $glo.color.blue.10                                                                                                            | $glo.transparent.t25 |
|              |            | color.important.gradient.normal        | sha                                                                                                                           |                      |
|              |            | color.important.gradient.hover         | linear-gradient($glo.deg.ltr,$glo.color.orange.40,$glo.color.red.40)                                                          |                      |
|              |            | color.important.gradient.press         | linear-gradient($glo.deg.ltr,$glo.color.orange.60,$glo.color.red.60)                                                          |                      |
|              |            | color.important.gradient.disabled      | $color.surface.nest.disabled                                                                                                  |                      |
|              |            | color.important.onpic.normal           | $glo.color.red.50                                                                                                             | $glo.transparent.t85 |
|              | positive   | color.positive.normal                  | $glo.color.mint.60                                                                                                            |                      |
|              |            | color.positive.hover                   | $glo.color.mint.50                                                                                                            |                      |
|              |            | color.positive.press                   | $glo.color.mint.70                                                                                                            |                      |
|              |            | color.positive.disabled                | $color.surface.nest.disabled                                                                                                  |                      |
|              |            | color.positive.variant.normal          | $glo.color.mint.40                                                                                                            |                      |
|              |            | color.positive.variant.hover           | $glo.color.mint.30                                                                                                            |                      |
|              |            | color.positive.variant.press           | $glo.color.mint.50                                                                                                            |                      |
|              |            | color.positive.variant.disabled        | $glo.color.blue.10                                                                                                            | $glo.transparent.t25 |
|              |            | color.positive.gradient.normal         | linear-gradient($glo.deg.ltr,$glo.color.green.40,$glo.color.mint.60)                                                          |                      |
|              |            | color.positive.gradient.hover          | linear-gradient($glo.deg.ltr,$glo.color.green.40,$glo.color.mint.50)                                                          |                      |
|              |            | color.positive.gradient.press          |                                                                                                                               |                      |
|              |            | color.positive.gradient.disabled       | $color.surface.nest.disabled                                                                                                  |                      |
|              |            | color.positive.onpic.normal            | $glo.color.mint.60                                                                                                            | $glo.transparent.t85 |
|              | warning    | color.warning.normal                   | $glo.color.orange.50                                                                                                          |                      |
|              |            | color.warning.hover                    | $glo.color.orange.40                                                                                                          |                      |
|              |            | color.warning.press                    | $glo.color.orange.60                                                                                                          |                      |
|              |            | color.warning.disabled                 | $color.surface.nest.disabled                                                                                                  |                      |
|              |            | color.warning.variant.normal           | $glo.color.orange.40                                                                                                          |                      |
|              |            | color.warning.variant.hover            | $glo.color.orange.30                                                                                                          |                      |
|              |            | color.warning.variant.press            | $glo.color.orange.50                                                                                                          |                      |
|              |            | color.warning.variant.disabled         | $glo.color.blue.10                                                                                                            | $glo.transparent.t25 |
|              |            | color.warning.gradient.normal          | linear-gradient($glo.deg.ltr,$glo.color.yellow.40,$glo.color.orange.50)                                                       |                      |
|              |            | color.warning.gradient.hover           | linear-gradient($glo.deg.ltr,$glo.color.yellow.30,$glo.color.orange40)                                                        |                      |
|              |            | color.warning.gradient.press           | linear-gradient($glo.deg.ltr,$glo.color.yellow.50,$glo.color.orange.60)                                                       |                      |
|              |            | color.warning.gradient.disabled        | $color.surface.nest.disabled                                                                                                  |                      |
|              |            | color.warning.onpic.normal             | $glo.color.orange.50                                                                                                          | $glo.transparent.t85 |
|              | emphasis   | color.emphasis.normal                  | $glo.color.blue.40                                                                                                            |                      |
|              |            | color.emphasis.hover                   | $glo.color.blue.30                                                                                                            |                      |
|              |            | color.emphasis.press                   | $glo.color.blue.50                                                                                                            |                      |
|              |            | color.emphasis.disabled                | $color.surface.nest.disabled                                                                                                  |                      |
|              |            | color.emphasis.variant.normal          | $glo.color.blue.30                                                                                                            |                      |
|              |            | color.emphasis.variant.hover           | $glo.color.blue.20                                                                                                            |                      |
|              |            | color.emphasis.variant.press           | $glo.color.blue.40                                                                                                            |                      |
|              |            | color.emphasis.variant.disabled        | $glo.color.blue.10                                                                                                            | $glo.transparent.t25 |
|              |            | color.emphasis.gradient.normal         | linear-gradient($glo.deg.ltr,$glo.color.sky.30,$glo.color.blue.40)                                                            |                      |
|              |            | color.emphasis.gradient.hover          | linear-gradient($glo.deg.ltr,$glo.color.sky.20,$glo.color.blue.30)                                                            |                      |
|              |            | color.emphasis.gradient.press          | linear-gradient($glo.deg.ltr,$glo.color.sky.40,$glo.color.blue.50)                                                            |                      |
|              |            | color.emphasis.gradient.disabled       | $color.surface.nest.disabled                                                                                                  |                      |
|              |            | color.emphasis.onpic.normal            | $glo.color.blue.40                                                                                                            | $glo.transparent.t85 |
|              | Background | color.background.default               | $glo.color.grey.100                                                                                                           |                      |
|              |            | color.background.specialmap            | $glo.color.grey.100                                                                                                           |                      |
|              |            | color.background.district              | $glo.color.black                                                                                                              | $glo.transparent.t30 |
|              | Surface    | color.surface.base.normal              | $glo.color.grey.80                                                                                                            |                      |
|              |            | color.surface.base.hover               | $glo.color.grey.70                                                                                                            |                      |
|              |            | color.surface.base.press               | $glo.color.grey.90                                                                                                            |                      |
|              |            | color.surface.base.disabled            | $glo.color.grey.90                                                                                                            |                      |
|              |            | color.surface.base.specialmap.normal   | $glo.color.grey.80                                                                                                            |                      |
|              |            | color.surface.base.specialmap.hover    | $glo.color.grey.70                                                                                                            |                      |
|              |            | color.surface.base.specialmap.press    | $glo.color.grey.90                                                                                                            | $glo.transparent.t30 |
|              |            | color.surface.base.specialmap.disabled | $glo.color.white                                                                                                              | $glo.transparent.t8  |
|              |            | color.surface.float.normal             | $glo.color.grey.70                                                                                                            |                      |
|              |            | color.surface.float.hover              | $glo.color.grey.60                                                                                                            |                      |
|              |            | color.surface.float.press              | $glo.color.grey.80                                                                                                            |                      |
|              |            | color.surface.float.disabled           | $glo.color.grey.80                                                                                                            |                      |
|              |            | color.surface.top.normal               | $glo.color.black                                                                                                              | $glo.transparent.t65 |
|              |            | color.surface.top.hover                | $glo.color.black                                                                                                              | $glo.transparent.t45 |
|              |            | color.surface.top.press                | $glo.color.black                                                                                                              | $glo.transparent.t85 |
|              |            | color.surface.top.disabled             | $glo.color.black                                                                                                              | $glo.transparent.t30 |
|              |            | color.surface.district.normal          | $glo.color.purple.0                                                                                                           | $glo.transparent.t4  |
|              |            | color.surface.district.hover           | $glo.color.purple.0                                                                                                           | $glo.transparent.t12 |
|              |            | color.surface.district.press           | $glo.color.black                                                                                                              | $glo.transparent.t25 |
|              |            | color.surface.district.disabled        | $glo.color.black                                                                                                              | $glo.transparent.t25 |
|              |            | color.surface.nest.normal              | $glo.color.purple.0                                                                                                           | $glo.transparent.t8  |
|              |            | color.surface.nest.hover               | $glo.color.purple.0                                                                                                           | $glo.transparent.t12 |
|              |            | color.surface.nest.press               | $glo.color.purple.0                                                                                                           | $glo.transparent.t4  |
|              |            | color.surface.nest.disabled            | $glo.color.purple.0                                                                                                           | $glo.transparent.t4  |
|              |            | color.surface.element.normal           | $color.surface.nest.normal                                                                                                    |                      |
|              |            | color.surface.element.hover            | $color.surface.nest.hover                                                                                                     |                      |
|              |            | color.surface.element.press            | $color.surface.nest.press                                                                                                     |                      |
|              |            | color.surface.element.disabled         | $color.surface.nest.disabled                                                                                                  |                      |
|              |            | color.surface.element.dark.normal      | $glo.color.black                                                                                                              | $glo.transparent.t65 |
|              |            | color.surface.element.dark.hover       | $glo.color.black                                                                                                              | $glo.transparent.t45 |
|              |            | color.surface.element.dark.press       | $glo.color.black                                                                                                              | $glo.transparent.t85 |
|              |            | color.surface.element.dark.disabled    | $glo.color.black                                                                                                              | $glo.transparent.t45 |
|              |            | color.surface.element.light.normal     | $glo.color.white                                                                                                              | $glo.transparent.t15 |
|              |            | color.surface.element.light.hover      | $glo.color.white                                                                                                              | $glo.transparent.t25 |
|              |            | color.surface.element.light.press      | $glo.color.white                                                                                                              | $glo.transparent.t8  |
|              |            | color.surface.element.light.disabled   | $glo.color.white                                                                                                              | $glo.transparent.t8  |
|              |            | color.surface.white.normal             | $glo.color.white                                                                                                              |                      |
|              |            | color.surface.white.hover              | $glo.color.white                                                                                                              | $glo.transparent.t85 |
|              |            | color.surface.white.press              | $glo.color.white                                                                                                              | $glo.transparent.t65 |
|              |            | color.surface.white.disabled           | $glo.color.white                                                                                                              | $glo.transparent.t45 |
|              |            | color.surface.black.normal             | $glo.color.black                                                                                                              |                      |
|              | Outline    | color.outline.normal                   | $glo.color.purple.0                                                                                                           | $glo.transparent.t20 |
|              |            | color.outline.hover                    | $glo.color.purple.0                                                                                                           | $glo.transparent.t30 |
|              |            | color.outline.press                    | $glo.color.purple.0                                                                                                           | $glo.transparent.t8  |
|              |            | color.outline.disabled                 | $color.surface.element.disabled                                                                                               |                      |
|              | Overlay    | color.overlay.primary                  | $glo.color.violet.30                                                                                                          | $glo.transparent.t30 |
|              |            | color.overlay.gradient                 | linear-gradient($glo.deg.ttb,$glo.color.black $glo.transparent.t0,$glo.color.black $glo.transparent.t100)                     |                      |
|              |            | color.overlay.dark                     | $glo.color.black                                                                                                              | $glo.transparent.t65 |
|              |            | color.overlay.background               | linear-gradient($glo.deg.ttb,$color.background.default $glo.transparent.t0,$color.background.default $glo.transparent.t100)   |                      |
|              |            | color.overlay.base                     | linear-gradient($glo.deg.ttb,$color.surface.base.normal $glo.transparent.t100,$color.surface.base.normal $glo.transparent.t0) |                      |
|              | Context    | color.context.subscribe.normal         | linear-gradient($glo.deg.ltr,$glo.color.purple.50,$glo.color.violet.50)                                                       |                      |
|              |            | color.context.subscribe.hover          | linear-gradient($glo.deg.ltr,$glo.color.purple.30,$glo.color.violet.30)                                                       |                      |
|              |            | color.context.subscribe.press          | linear-gradient($glo.deg.ltr,$glo.color.purple.70,$glo.color.violet.70)                                                       |                      |
|              |            | color.context.subscribe.disabled       | $color.surface.nest.disabled                                                                                                  |                      |
|              |            | color.context.legends.normal           | linear-gradient($glo.deg.ltr,$glo.color.yellow.20,$glo.color.yellow.60)                                                       |                      |
|              |            | color.context.legends.hover            | linear-gradient($glo.deg.ltr,$glo.color.yellow.10,$glo.color.yellow.40)                                                       |                      |
|              |            | color.context.legends.press            | linear-gradient($glo.deg.ltr,$glo.color.yellow.60,$glo.color.yellow.90)                                                       |                      |
|              |            | color.context.legends.disabled         | $color.surface.nest.disabled                                                                                                  |                      |
|              |            | color.context.legends.variant.normal   | $glo.color.yellow.20                                                                                                          |                      |
|              |            | color.context.legends.variant.hover    | $glo.color.yellow.10                                                                                                          |                      |
|              |            | color.context.legends.variant.press    | $glo.color.yellow.40                                                                                                          |                      |
|              |            | color.context.legends.variant.disabled | $color.surface.nest.disabled                                                                                                  |                      |
|              |            | color.context.vip.normal               | linear-gradient($glo.deg.ltr,$glo.color.sky.20 0%,$glo.color.violet.40 60%,$glo.color.purple.30 100%)                         |                      |
|              |            | color.context.recharge.normal          | linear-gradient($glo.deg.ltr, $glo.color.yellow.0, $glo.color.yellow.70)                                                      |                      |
|              | Text&icon  | color.txt.primary.normal               | $glo.color.white                                                                                                              |                      |
|              |            | color.txt.primary.hover                | $glo.color.magenta.30                                                                                                         |                      |
|              |            | color.txt.primary.press                | $glo.color.magenta.40                                                                                                         |                      |
|              |            | color.txt.primary.disabled             | $color.txt.disabled                                                                                                           |                      |
|              |            | color.txt.primary.specialmap.normal    | $glo.color.white                                                                                                              |                      |
|              |            | color.txt.primary.specialmap.hover     | $glo.color.white                                                                                                              | $glo.transparent.t85 |
|              |            | color.txt.primary.specialmap.press     | $glo.color.white                                                                                                              | $glo.transparent.t65 |
|              |            | color.txt.primary.specialmap.disable   | $glo.color.white                                                                                                              | $glo.transparent.t45 |
|              |            | color.txt.secondary.normal             | $glo.color.grey.30                                                                                                            |                      |
|              |            | color.txt.secondary.hover              | $glo.color.magenta.30                                                                                                         |                      |
|              |            | color.txt.secondary.press              | $glo.color.magenta.40                                                                                                         |                      |
|              |            | color.txt.secondary.disabled           | $color.txt.disabled                                                                                                           |                      |
|              |            | color.txt.tertiary.normal              | $glo.color.grey.40                                                                                                            |                      |
|              |            | color.txt.tertiary.hover               | $glo.color.grey.30                                                                                                            |                      |
|              |            | color.txt.tertiary                     | $glo.color.grey.50                                                                                                            |                      |
|              |            | color.txt.tertiary.disabled            | $color.txt.disabled                                                                                                           |                      |
|              |            | color.txt.grass                        | $glo.color.grass.40                                                                                                           |                      |
|              |            | color.txt.disabled                     | $glo.color.grey.50                                                                                                            |                      |
| Typography   | display    | txt.display.l                          | $glo.font.family.display,$glo.font.size.64,$glo.font.weight.regular,$glo.font.lineheight.size64                               |                      |
|              |            | txt.display.m                          | $glo.font.family.display,$glo.font.size.48,$glo.font.weight.regular,$glo.font.lineheight.size48                               |                      |
|              |            | txt.display.s                          | $glo.font.family.display,$glo.font.size.24,$glo.font.weight.regular,$glo.font.lineheight.size24                               |                      |
|              | headline   | txt.headline.l                         | $glo.font.family.sys,$glo.font.size.48,$glo.font.weight.bold,$glo.font.lineheight.size48                                      |                      |
|              |            | txt.headline.m                         | $glo.font.family.sys,$glo.font.size.36,$glo.font.weight.bold,$glo.font.lineheight.size36                                      |                      |
|              | title      | txt.title.l                            | $glo.font.family.sys,$glo.font.size.24,$glo.font.weight.semibold,$glo.font.lineheight.size24                                  |                      |
|              |            | txt.title.m                            | $glo.font.family.sys,$glo.font.size.20,$glo.font.weight.semibold,$glo.font.lineheight.size20                                  |                      |
|              |            | txt.title.s                            | $glo.font.family.sys,$glo.font.size.16,$glo.font.weight.semibold,$glo.font.lineheight.size16                                  |                      |
|              | body       | txt.bodySemibold.l                     | $glo.font.family.sys,$glo.font.size.16,$glo.font.weight.semibold,$glo.font.lineheight.size16                                  |                      |
|              |            | txt.bodySemibold.m                     | $glo.font.family.sys,$glo.font.size.14,$glo.font.weight.semibold,$glo.font.lineheight.size14                                  |                      |
|              |            | txt.bodySemibold.s                     | $glo.font.family.sys,$glo.font.size.12,$glo.font.weight.semibold,$glo.font.lineheight.size12                                  |                      |
|              |            | txt.body.l                             | $glo.font.family.sys,$glo.font.size.16,$glo.font.weight.regular,$glo.font.lineheight.size16                                   |                      |
|              |            | txt.body.m                             | $glo.font.family.sys,$glo.font.size.14,$glo.font.weight.regular,$glo.font.lineheight.size14                                   |                      |
|              |            | txt.body.s                             | $glo.font.family.sys,$glo.font.size.12,$glo.font.weight.regular,$glo.font.lineheight.size12                                   |                      |
|              |            | txt.bodyItalic.l                       | $glo.font.family.sys,$glo.font.size.16,$glo.font.weight.regular,$glo.font.lineheight.size16,$glo.font.style.italic            |                      |
|              | label      | txt.label.l                            | $glo.font.family.sys,$glo.font.size.16,$glo.font.weight.medium,$glo.font.lineheight.size16                                    |                      |
|              |            | txt.label.m                            | $glo.font.family.sys,$glo.font.size.14,$glo.font.weight.medium,$glo.font.lineheight.size14                                    |                      |
|              |            | txt.label.s                            | $glo.font.family.sys,$glo.font.size.12,$glo.font.weight.medium,$glo.font.lineheight.size12                                    |                      |
|              | number     | txt.numDisplay.xl                      | $glo.font.family.numDisplay,$glo.font.size.64,$glo.font.weight.bold,$glo.font.lineheight.size64                               |                      |
|              |            | txt.numDisplay.l                       | $glo.font.family.numDisplay,$glo.font.size.48,$glo.font.weight.bold,$glo.font.lineheight.size48                               |                      |
|              |            | txt.numMonotype.xl                     | $glo.font.family.sys,$glo.font.size.24,$glo.font.weight.bold,$glo.font.lineheight.size24                                      |                      |
|              |            | txt.numMonotype.l                      | $glo.font.family.sys,$glo.font.size.20,$glo.font.weight.bold,$glo.font.lineheight.size20                                      |                      |
|              |            | txt.numMonotype.m                      | $glo.font.family.sys,$glo.font.size.16,$glo.font.weight.bold,$glo.font.lineheight.size16                                      |                      |
|              |            | txt.numMonotype.s                      | $glo.font.family.sys,$glo.font.size.14,$glo.font.weight.medium,$glo.font.lineheight.size14                                    |                      |
|              |            | txt.numMonotype.xs                     | $glo.font.family.sys,$glo.font.size.12,$glo.font.weight.regular,$glo.font.lineheight.size12                                   |                      |
| visual style | shadow     | shadow.s                               | @SHA:$glo.color.black,$$glo.transparent.t45,0&0,4,渐变色,ShadowOpacity,便宜,半径                                              |                      |
|              |            | shadow.m                               | @SHA:$glo.color.black,$$glo.transparent.t45,0&0,8                                                                             |                      |
|              |            | shadow.l                               | @SHA:$glo.color.black,$$glo.transparent.t45,0&0,16                                                                            |                      |
|              | radius     | radius.xs                              | $glo.radius.4                                                                                                                 |                      |
|              |            | radius.s                               | $glo.radius.8                                                                                                                 |                      |
|              |            | radius.m                               | $glo.radius.12                                                                                                                |                      |
|              |            | radius.l                               | $glo.radius.16                                                                                                                |                      |
|              |            | radius.xl                              | $glo.radius.24                                                                                                                |                      |
|              |            | radius.round                           | $glo.radius.round                                                                                                             |                      |
|              |            | radius.pill                            | $glo.radius.round                                                                                                             |                      |
|              | border     | border.divider                         | $glo.border.1                                                                                                                 |                      |
|              |            | border.s                               | $glo.border.1                                                                                                                 |                      |
|              |            | border.m                               | $glo.border.2                                                                                                                 |                      |
|              |            | border.l                               | $glo.border.4                                                                                                                 |                      |
