令牌
| 令牌名称 | 当前值 | Figma用法 | 描述 | |
|---|---|---|---|---|
|
——p-background
|
Rgba (246, 246, 247, 1) | 使用默认背景/ | 用于作为背景色，在页面和框架背景等组件中。 | |
|
——p-background-hovered
|
Rgba (241,242,243,1) | 使用背景/徘徊 | 当在后台使用操作或导航时使用。 | |
|
——p-background-pressed
|
Rgba (237,238,239,1) | 使用背景/压 | 当在后台使用操作或导航时使用。 | |
|
——p-background-selected
|
Rgba (237,238,239,1) | 使用背景/选择 | 用于导航中的选定项目 | |
|
——p-surface
|
Rgba (255,255,255,1) | - - - - - - | 用作背景色，在组件中，如卡片，模态，和弹出窗口。 | |
|
——p-surface-dark
|
Rgba (32, 33, 35, 1) | - - - - - - | 在卡、模态和弹出窗口等组件中用作深色背景色。 | |
|
——p-surface-neutral
|
Rgba (228, 229, 231, 1) | 使用表面中立/默认 | 用作中性徽章的背景色。 | |
|
——p-surface-neutral-hovered
|
Rgba (219, 221, 223, 1) | 使用地面空挡/悬停 | 用作中性徽章的悬停背景色。 | |
|
——p-surface-neutral-pressed
|
Rgba (201, 204, 208, 1) | 使用表面中性/压制 | 用作中性徽章的背景色。 | |
|
——p-surface-neutral-disabled
|
Rgba (241,242,243,1) | 使用表面中立/禁用 | 在中性徽章中作为禁用背景色使用。 | |
|
——p-surface-neutral-subdued
|
Rgba (246, 246, 247, 1) | 使用表面中性/柔和 | 用作中性横幅的背景色。 | |
|
——p-surface-neutral-subdued-dark
|
Rgba (68, 71, 74, 1) | - - - - - - | 用作中性横幅的深色背景色。 | |
|
——p-surface-subdued
|
Rgba (250, 251, 251, 1) | 使用表面/减弱 | 用作柔和的背景色，在组件中，如卡片，模态，和弹出窗口。 | |
|
——p-surface-disabled
|
Rgba (250, 251, 251, 1) | 使用表面/禁用 | 当处于禁用状态时，用作禁用交互元素(如选项列表项和操作列表项)的表面颜色。 | |
|
——p-surface-hovered
|
Rgba (246, 246, 247, 1) | 使用表面/徘徊 | 当资源列表项和操作列表项处于悬浮状态时，用作交互元素的表面颜色。 | |
|
——p-surface-hovered-dark
|
Rgba (47,49,51,1) | - - - - - - | 当资源列表项和操作列表项处于悬浮状态时，用作交互元素的深色表面颜色。 | |
|
——p-surface-pressed
|
Rgba (241,242,243,1) | 使用表面/压 | 当处于按下状态时，用作交互元素(如资源列表项和操作列表项)的表面颜色。 | |
|
——p-surface-pressed-dark
|
Rgba (62,64,67,1) | - - - - - - | 在资源列表项和操作列表项等交互元素处于按下状态时，用作深色表面颜色。 | |
|
——p-surface-depressed
|
Rgba (237,238,239,1) | 使用表面/抑郁 | 在资源列表项和操作列表项等交互元素处于压抑状态时用作表面颜色。 | |
|
——p-surface-search-field
|
Rgba (241,242,243,1) | 使用表面/ SearchField | 用于作为背景色，在组件的表面元素，如SearchField | |
|
——p-surface-search-field-dark
|
Rgba (47,49,51,1) | - - - - - - | 用作深色背景色，在组件的表面元素，如SearchField | |
|
——p-backdrop
|
Rgba (0,0,0,0.5) | - - - - - - | 用作导航和模式背景组件的背景色。这个颜色的alpha值是0.5。 | |
|
——p-overlay
|
Rgba (255, 255, 255, 0.5) | - - - - - - | 用作元素的背景色，放置在表面的顶部，以掩盖其内容。这个颜色的alpha值是0.5。 | |
|
——p-shadow-color-picker
|
Rgba (0,0,0,0.5) | - - - - - - | - - - - - - | |
|
——p-shadow-color-picker-dragger
|
Rgba (33, 43, 54, 0.32) | - - - - - - | - - - - - - | |
|
——p-hint-from-direct-light
|
Rgba (0,0,0,0.15) | 使用提示/来自直射光 | 用于建筑阴影卷轴。 | |
|
——p-border
|
Rgba (140, 145, 150, 1) | - - - - - - | 用作元素的默认边框。 | |
|
——p-border-on-dark
|
Rgba (80,83,86,1) | - - - - - - | 用作暗色元素的默认边框。 | |
|
——p-border-neutral-subdued
|
Rgba (186, 191, 195, 1) | 使用边界中立/柔和 | 用作横幅的边框。 | |
|
——p-border-hovered
|
Rgba (153, 158, 164, 1) | 使用边界/徘徊 | 用于悬停交互元素的边框 | |
|
——p-border-disabled
|
Rgba (210, 213, 216, 1) | 使用边界/禁用 | 用于交互元素上禁用的边框 | |
|
——p-border-subdued
|
Rgba (201, 204, 207, 1) | 使用边界/减弱 | 用作元素上的柔和边框。 | |
|
——p-border-depressed
|
Rgba (87, 89, 89, 1) | 使用边界/抑郁 | 用作凹陷元素的边框。 | |
|
——p-border-shadow
|
Rgba (174, 180, 185, 1) | 使用BorderShadow | 用作元素的附加下边框。 | |
|
——p-border-shadow-subdued
|
Rgba (186, 191, 196, 1) | 使用BorderShadow /减弱 | 用作元素上附加的、柔和的底部边框。 | |
|
——p-divider
|
Rgba (225,227,229,1) | - - - - - - | 用作元素之间的分隔符。 | |
|
——p-divider-dark
|
Rgba (69, 71, 73, 1) | - - - - - - | 用于元素之间的暗分隔。 | |
|
——p图标
|
Rgba (92, 95, 98, 1) | - - - - - - | 用作图标的填充色。 | |
|
——p-icon-on-dark
|
Rgba (166, 172, 178, 1) | - - - - - - | 用作深色图标的填充色。 | |
|
——p-icon-hovered
|
Rgba (26,28,29,1) | 使用图标/徘徊 | 用作悬停图标的填充色。 | |
|
——p-icon-pressed
|
Rgba (68, 71, 74, 1) | 使用图标/压 | 用作按下图标的填充色。 | |
|
——p-icon-disabled
|
Rgba (186, 190, 195, 1) | 使用图标/禁用 | 用于作为禁用图标的填充颜色。 | |
|
——p-icon-subdued
|
Rgba (140, 145, 150, 1) | 使用图标/减弱 | 用作柔和图标的填充色。 | |
|
——p-text
|
Rgba (32, 34, 35, 1) | - - - - - - | 用作文本颜色。 | |
|
——p-text-on-dark
|
Rgba (227, 229, 231, 1) | - - - - - - | 用作深色元素上的文本颜色。 | |
|
——p-text-disabled
|
Rgba (140, 145, 150, 1) | 使用文本/禁用 | 用于作为禁用文本颜色和作为占位符文本颜色。 | |
|
——p-text-subdued
|
Rgba (109, 113, 117, 1) | 使用文本/减弱 | 用作柔和的文本颜色。 | |
|
——p-text-subdued-on-dark
|
Rgba (153, 159, 164, 1) | - - - - - - | 用于在深色元素上作为柔和的文本颜色。 | |
|
——p-interactive
|
Rgba (44, 110, 203, 1) | - - - - - - | 用于链接、普通按钮，并作为所选复选框和单选按钮的填充颜色。 | |
|
——p-interactive-on-dark
|
Rgba (54,163,255,1) | - - - - - - | 用于链接、普通按钮，并在暗元素上作为所选复选框和单选按钮的填充色。 | |
|
——p-interactive-disabled
|
Rgba (189, 193, 204, 1) | 使用交互式/禁用 | 用于禁用链接和普通按钮。 | |
|
——p-interactive-hovered
|
Rgba (31, 81, 153, 1) | 使用交互式/徘徊 | 用于悬停链接和普通按钮。 | |
|
——p-interactive-pressed
|
Rgba (16, 50, 98, 1) | 使用交互式/压 | 用于按下的链接和普通按钮。 | |
|
——p-interactive-pressed-on-dark
|
Rgba (136,188,255,1) | - - - - - - | 用于按下链接和暗元素上的普通按钮。 | |
|
——p-focused
|
Rgba (69, 143, 255, 1) | - - - - - - | 用于交互元素的焦点环。 | |
|
——p-surface-selected
|
Rgba (242, 247, 254, 1) | 使用Surface Selected/Default | 在操作列表和资源列表等组件中作为选定交互元素的表面颜色使用。 | |
|
——p-surface-selected-hovered
|
Rgba (237, 244, 254, 1) | 使用表面选定/悬停 | 在操作列表和资源列表等组件中，作为悬停的选定交互元素的表面颜色使用。 | |
|
——p-surface-selected-pressed
|
Rgba (229, 239, 253, 1) | 使用表面选择/按下 | 在操作列表和资源列表等组件中，作为被按下的选定交互元素的表面颜色使用。 | |
|
——p-icon-on-interactive
|
Rgba (255,255,255,1) | 使用图标打开/交互式 | 用作交互式元素上图标的填充色。 | |
|
——p-text-on-interactive
|
Rgba (255,255,255,1) | 使用文本打开/交互式 | 用作交互元素上的文本颜色。 | |
|
——p-action-secondary
|
Rgba (255,255,255,1) | 使用动作辅助/默认 | 用于次要按钮和第三个按钮，以及在表单元素中作为背景色和其他潜在的次要表面。 | |
|
——p-action-secondary-disabled
|
Rgba (255,255,255,1) | 使用动作辅助/禁用 | 用作次要按钮的禁用状态 | |
|
——p-action-secondary-hovered
|
Rgba (246, 246, 247, 1) | 使用动作辅助/悬停 | 用作辅助按钮的悬浮状态 | |
|
——p-action-secondary-hovered-dark
|
Rgba (84, 87, 91, 1) | - - - - - - | 用作次要按钮的暗悬停状态 | |
|
——p-action-secondary-pressed
|
Rgba (241,242,243,1) | 使用二级/按下动作 | 用作辅助按钮的按下状态 | |
|
——p-action-secondary-pressed-dark
|
Rgba (96, 100, 103, 1) | - - - - - - | 用作次要按钮的暗按状态 | |
|
——p-action-secondary-depressed
|
Rgba (109, 113, 117, 1) | 使用次要/压抑动作 | 用作辅助按钮的按下状态 | |
|
——p-action-primary
|
Rgba (0, 128, 96, 1) | 使用动作主要/默认 | 用作主要操作的背景色，并用作图标的填充色以及导航和选项卡中的文本颜色，以传达交互状态。 | |
|
——p-action-primary-disabled
|
Rgba (241, 241, 241, 1) | 使用动作主要/禁用 | 用作禁用的主要操作的背景色，并用作图标的填充色以及导航和选项卡中的文本颜色，以传达交互状态。 | |
|
——p-action-primary-hovered
|
Rgba (0, 110, 82, 1) | 使用动作初级/悬停 | 用作悬停主要操作的背景色，并用作图标的填充色以及导航和选项卡中的文本颜色，以传达交互状态。 | |
|
——p-action-primary-pressed
|
Rgba (0,94,70,1) | 使用动作主要/按下 | 用作按下的主要操作的背景色，并作为图标的填充色以及导航和选项卡中的文本颜色，以传达交互状态。 | |
|
——p-action-primary-depressed
|
Rgba (0,61,44,1) | 使用初级/压抑动作 | 用作按下的主要操作的背景色，并作为图标的填充色以及导航和选项卡中的文本颜色，以传达交互状态。 | |
|
——p-icon-on-primary
|
Rgba (255,255,255,1) | 使用Icon On/Primary | 用于主要操作上的图标的填充颜色。不用于导航和选项卡上的图标。 | |
|
——p-text-on-primary
|
Rgba (255,255,255,1) | 使用Text On/Primary | 用于作为主要操作的文本颜色。不用于导航和选项卡的文本中。 | |
|
——p-text-primary
|
Rgba (0, 123, 92, 1) | 使用文本主/默认 | 用于作为背景上的主要文本颜色。用于导航等组件中的文本。 | |
|
——p-text-primary-hovered
|
Rgba (0, 108, 80, 1) | 使用文本主/悬停 | 用于作为背景上悬浮文本的主要颜色。用于导航等组件中的文本。 | |
|
——p-text-primary-pressed
|
Rgba (0,92,68,1) | 使用文本主/按下 | 用于在背景上作为主要的文字颜色。用于导航等组件中的文本。 | |
|
——p-surface-primary-selected
|
Rgba (241,248,245,1) | 使用Surface Primary/Selected | 用作表面颜色，以指示导航和选项卡中选定的交互状态。 | |
|
——p-surface-primary-selected-hovered
|
Rgba (179, 208, 195, 1) | 使用地面主/选定悬停 | 用作表面颜色，以指示导航和选项卡中悬浮的选定交互状态。 | |
|
——p-surface-primary-selected-pressed
|
Rgba (162, 188, 176, 1) | 使用Surface Primary/Selected Pressed | 用作表面颜色，以指示在导航和选项卡中按下的选定交互状态。 | |
|
——p-border-critical
|
Rgba (253, 87, 73, 1) | 使用临界边界/默认边界 | 用于作为关键组件的边框，例如处于错误状态的交互元素的轮廓。 | |
|
——p-border-critical-subdued
|
Rgba (224, 179, 178, 1) | 使用边界临界/抑制 | 用作关键组件(如横幅)上的边框。 | |
|
——p-border-critical-disabled
|
Rgba (255, 167, 163, 1) | 使用边界紧急/禁用 | 用于在关键组件(如横幅)上作为禁用边框使用，以及在错误状态下作为交互式元素的大纲使用。 | |
|
——p-icon-critical
|
Rgba (215,44,13,1) | 使用图标/关键 | 用于关键元素顶部的图标填充颜色。 | |
|
——p-surface-critical
|
Rgba (254,211, 209, 1) | 使用Surface Critical/Default | 用于关键元素的表面颜色，包括徽章。 | |
|
——p-surface-critical-subdued
|
Rgba (255, 244, 244, 1) | 使用表面临界/缓和 | 用于在关键元素上使用柔和的表面颜色，包括横幅。 | |
|
——p-surface-critical-subdued-hovered
|
Rgba (255,240,240,1) | 使用水面紧急/克制悬停 | 用于作为关键交互元素的表面颜色，包括处于悬浮状态的操作列表项。 | |
|
——p-surface-critical-subdued-pressed
|
Rgba (255,233,232,1) | 使用表面临界/弱压 | 用作关键交互元素的表面颜色，包括处于按下状态的操作列表项。 | |
|
——p-surface-critical-subdued-depressed
|
Rgba (254, 188, 185, 1) | 使用表面临界/压抑 | 用作关键交互元素的表面颜色，包括处于压抑状态的操作列表项。 | |
|
——p-text-critical
|
Rgba (215,44,13,1) | 使用文本/关键 | 在惰性关键元素(如异常列表)中用作文本颜色。不能用作旗帜和徽章上的文本颜色。 | |
|
——p-action-critical
|
Rgba (216,44,13,1) | 使用紧急/默认动作 | 用于作为破坏性按钮的背景色，并作为错误吐司消息的背景色。 | |
|
——p-action-critical-disabled
|
Rgba (241, 241, 241, 1) | 使用紧急/禁用操作 | 用于作为禁用的破坏性按钮的背景色，并作为错误吐司消息的背景色。 | |
|
——p-action-critical-hovered
|
Rgba (188, 34, 0,1) | 使用动作紧急/悬停 | 用于作为悬停破坏性按钮的背景色，并作为错误吐司消息的背景色。 | |
|
——p-action-critical-pressed
|
Rgba (162,27,0,1) | 使用紧急/按下动作 | 用于作为按下破坏性按钮的背景色，并作为错误吐司消息的背景色。 | |
|
——p-action-critical-depressed
|
Rgba (108,15,0,1) | 使用关键/压抑动作 | 用于作为被压抑的破坏性按钮的背景色，并作为错误吐司消息的背景色。 | |
|
——p-icon-on-critical
|
Rgba (255,255,255,1) | 使用图标打开/紧急 | 用于作为关键操作图标的填充颜色。 | |
|
——p-text-on-critical
|
Rgba (255,255,255,1) | 使用文本打开/关键 | 用于作为关键动作的文本颜色。 | |
|
——p-interactive-critical
|
Rgba (216,44,13,1) | 使用交互式/关键 | 用作破坏性交互元素的文本颜色:链接，普通按钮，所选复选框和单选按钮的错误状态，以及破坏性操作列表项上的文本颜色。不用于重要的横幅和徽章。 | |
|
——p-interactive-critical-disabled
|
Rgba (253,147,141,1) | 使用交互式/关键禁用 | 在禁用的破坏性普通按钮中作为文本颜色使用，以及在破坏性操作列表项上作为文本颜色使用。不用于重要的横幅和徽章。 | |
|
——p-interactive-critical-hovered
|
Rgba (205,41,12,1) | 使用互动/关键悬停 | 用于作为一个文本颜色在悬浮破坏性的普通按钮，以及一个文本颜色在破坏性的行动列表项。不用于重要的横幅和徽章。 | |
|
——p-interactive-critical-pressed
|
Rgba (103,15,3,1) | 使用互动/关键按键 | 用于作为按下破坏性普通按钮的文本颜色，以及破坏性操作列表项上的文本颜色。不用于重要的横幅和徽章。 | |
|
——p-border-warning
|
Rgba (185, 137, 0,1) | 使用边界警告/默认 | 用作警告组件的边界，如… | |
|
——p-border-warning-subdued
|
Rgba (225, 184, 120, 1) | 使用边界警告/克制 | 用作警告组件(如横幅)上的边框。 | |
|
——p-icon-warning
|
Rgba (185, 137, 0,1) | 使用图标/警告 | 用于警告元素顶部的图标填充颜色。 | |
|
——p-surface-warning
|
Rgba (255, 215, 157, 1) | 使用表面警告/默认 | 用于警告元素(包括徽章)的表面颜色。 | |
|
——p-surface-warning-subdued
|
Rgba (255, 245, 234, 1) | 使用地面警告/克制 | 用作警告元素(包括横幅)的柔和表面颜色。 | |
|
——p-surface-warning-subdued-hovered
|
Rgba (255, 242, 226, 1) | 使用水面警告/克制悬停 | 用作警告元素(包括横幅)的柔和表面颜色。 | |
|
——p-surface-warning-subdued-pressed
|
Rgba (255, 235, 211, 1) | 使用地面警告/压制 | 用作警告元素(包括横幅)的柔和表面颜色。 | |
|
——p-text-warning
|
Rgba (145, 106, 0, 1) | 使用文本/警告 | 在惰性关键元素(如异常列表)中用作文本颜色。不能用作旗帜和徽章上的文本颜色。 | |
|
——p-border-highlight
|
Rgba (68, 157, 167, 1) | 使用边框高亮/默认 | 用作信息组件的边界，如… | |
|
——p-border-highlight-subdued
|
Rgba (152, 198, 205, 1) | 使用边界高亮/柔和 | 用于作为信息组件(如横幅)的边框。 | |
|
——p-icon-highlight
|
Rgba (0, 160, 172, 1) | 使用图标/突出 | 用于作为信息元素顶部的图标填充颜色。 | |
|
——p-surface-highlight
|
Rgba (164, 232, 242, 1) | 使用表面高亮/默认 | 用作信息元素的表面颜色，包括徽章。 | |
|
——p-surface-highlight-subdued
|
Rgba (235,249,252,1) | 使用表面高亮/柔和 | 用作信息元素的表面颜色，包括横幅。 | |
|
——p-surface-highlight-subdued-hovered
|
Rgba (228, 247, 250, 1) | 使用表面高亮/柔和悬停 | 用作信息元素的表面颜色，包括横幅。 | |
|
——p-surface-highlight-subdued-pressed
|
Rgba (213, 243, 248, 1) | 使用表面高亮/柔和压制 | 用作信息元素的表面颜色，包括横幅。 | |
|
——p-text-highlight
|
Rgba (52, 124, 132, 1) | 使用文本/突出 | 用作惰性信息元素的文本颜色。不能用作旗帜和徽章上的文本颜色。 | |
|
——p-border-success
|
Rgba (0, 164, 124, 1) | 使用Border Success/Default | 用于作为成功组件的边框，如文本输入。 | |
|
——p-border-success-subdued
|
Rgba (149, 201, 180, 1) | 使用边界成功/克制 | 用于作为成功组件的边界，如横幅。 | |
|
——p-icon-success
|
Rgba (0,127,95,1) | 使用图标/成功 | 用于成功元素顶部的图标填充颜色。 | |
|
——p-surface-success
|
Rgba (174, 233, 209, 1) | 使用Surface Success/Default | 用于成功元素的表面颜色，包括徽章。 | |
|
——p-surface-success-subdued
|
Rgba (241,248,245,1) | 使用表面成功/克制 | 用作信息元素的表面颜色，包括横幅。 | |
|
——p-surface-success-subdued-hovered
|
Rgba (236,246, 241, 1) | 使用地面成功/克制悬停 | 用作信息元素的表面颜色，包括横幅。 | |
|
——p-surface-success-subdued-pressed
|
Rgba (226, 241, 234, 1) | 使用表面成功/柔和压制 | 用作信息元素的表面颜色，包括横幅。 | |
|
——p-text-success
|
Rgba (0, 128, 96, 1) | 使用文本/成功 | 用作惰性成功元素的文本颜色。不能用作旗帜和徽章上的文本颜色。 | |
|
——p-icon-attention
|
Rgba (138, 97, 22, 1) | - - - - - - | - - - - - - | |
|
——p-surface-attention
|
Rgba (255, 234, 138, 1) | - - - - - - | - - - - - - | |
|
——p-decorative-one-icon
|
Rgba (126, 87, 0, 1) | 使用装饰/图标/ | 用于作为应用于装饰表面上的装饰图标颜色。 | |
|
——p-decorative-one-surface
|
Rgba (255, 201, 107, 1) | 使用表面装饰/ / | 用作装饰表面颜色。 | |
|
——p-decorative-one-text
|
Rgba (61,40,0,1) | 使用装饰/文本 | 用作应用于装饰表面的装饰性文本颜色。 | |
|
——p-decorative-two-icon
|
Rgba (175, 41, 78, 1) | 使用装饰/图标/ 2 | 用于作为应用于装饰表面上的装饰图标颜色。 | |
|
——p-decorative-two-surface
|
Rgba (255, 196, 176, 1) | 使用表面装饰/ / 2 | 用作装饰表面颜色。 | |
|
——p-decorative-two-text
|
Rgba (73, 11, 28, 1) | 使用装饰/文本/ 2 | 用作应用于装饰表面的装饰性文本颜色。 | |
|
——p-decorative-three-icon
|
Rgba (0, 109, 65, 1) | 使用装饰/图标/ 3 | 用于作为应用于装饰表面上的装饰图标颜色。 | |
|
——p-decorative-three-surface
|
Rgba (146, 230, 181, 1) | 使用装饰/表面/ 3 | 用作装饰表面颜色。 | |
|
——p-decorative-three-text
|
Rgba (0, 47, 25, 1) | 使用装饰/文本/ 3 | 用作应用于装饰表面的装饰性文本颜色。 | |
|
——p-decorative-four-icon
|
Rgba (0, 106, 104, 1) | 使用装饰/图标/ 4 | 用于作为应用于装饰表面上的装饰图标颜色。 | |
|
——p-decorative-four-surface
|
Rgba (145, 224, 214, 1) | 使用表面装饰/ / 4 | 用作装饰表面颜色。 | |
|
——p-decorative-four-text
|
Rgba (0,45,45,1) | 使用装饰/文本/ 4 | 用作应用于装饰表面的装饰性文本颜色。 | |
|
——p-decorative-five-icon
|
Rgba (174, 43, 76, 1) | 使用装饰/图标/ 5 | 用于作为应用于装饰表面上的装饰图标颜色。 | |
|
——p-decorative-five-surface
|
Rgba (253, 201, 208, 1) | 使用表面装饰/ / 5 | 用作装饰表面颜色。 | |
|
——p-decorative-five-text
|
Rgba (79, 14, 31, 1) | 使用装饰/文本/ 5 | 用作应用于装饰表面的装饰性文本颜色。 |