Design Tokens

AITable defines a set of named patterns that create predictable behavior across tokens.For example, additional levels can be created by adding secondary or third level to any text, icon, or background color, and interaction behavior can be specified by adding hover, selected, and disabled.

Naming Structure

The AITable token follows the following format.

--{type}-{colorRole}-{prominence}-{interaction}

Type (required)

Required parameter that specifies which type of object we want to assign a color to.Our four types are background bg,text&icon text, border border and shadow shadow.For ease of use, text and icons share text.

Example
--bg-common-default
--text-common-primary

Color Role (required)

Required parameters, the colors in our user interface have a specific meaning, so we organize the colors according to the way they are used, not the colors themselves.For example, if the theme color is brand, it may switch between purple and other colors depending on the theme.

Example
--bg-brand-default
--text-common-primary
--bg-warn-default

Prominence (optional)

Optional parameters to create a visual hierarchy with background, text and icons supporting Level 1, Level 2, Level 3 and Level 4.

Example
--text-common-secondary
--bg-common-lowest

Interaction (optional)

Optional Parameters.Some tokens support interaction states such as hover and press.

Example
--bg-brand-active
--text-link-hover

Font, icon text color

Default theme

Dark theme

Text-Common-Primary

First-level text color, used for main text and icons, such as titles, body text, etc.

colors.textCommonPrimary

var(--textCommonPrimary)

Text-Common-Secondary

The text color of the second level, used for secondary text and icons, such as body text, sub text, etc.

colors.textCommonSecondary

var(--textCommonSecondary)

Text-Common-Tertiary

The third level of text color, used for unimportant text and icons, such as descriptions, labels, subtitles, etc.

colors.textCommonTertiary

var(--textCommonTertiary)

Text-Common-Quaternary

The fourth level of text color, used for very unimportant text and icons, such as input box placeholders, etc.

colors.textCommonQuaternary

var(--textCommonQuaternary)

Text-Brand-Default

Text color of the brand color

colors.textBrandDefault

var(--textBrandDefault)

Text-Brand-Hover

The hover state of the text color matches the brand color

colors.textBrandHover

var(--textBrandHover)

Text-Brand-Active

The active state of the text color of the brand color

colors.textBrandActive

var(--textBrandActive)

Text-Selected-Primary

Only used on --bg-selected-primary for selected text

colors.textSelectedPrimary

var(--textSelectedPrimary)

Text-Selected-Secondary

Only used on --bg-selected-secondary for selected text

colors.textSelectedSecondary

var(--textSelectedSecondary)

Text-Danger-Default

The text color of the danger color, expressing the status of danger, error, failure, etc.

colors.textDangerDefault

var(--textDangerDefault)

Text-Danger-Hover

hover state for danger colored text

colors.textDangerHover

var(--textDangerHover)

Text-Danger-Active

active state for danger-colored text

colors.textDangerActive

var(--textDangerActive)

Text-Success-Default

The text color of the safe color, expressing the status of success, safety, correct, complete, etc.

colors.textSuccessDefault

var(--textSuccessDefault)

Text-Success-Hover

The hover state of safe text

colors.textSuccessHover

var(--textSuccessHover)

Text-Success-Active

active state of safe color text

colors.textSuccessActive

var(--textSuccessActive)

Text-Warn-Default

The text color of the warning color, expressing the status of reminder, warning, unsafe, etc.

colors.textWarnDefault

var(--textWarnDefault)

Text-Warn-Hover

The hover state of the warning color text

colors.textWarnHover

var(--textWarnHover)

Text-Warn-Active

The active state of the warning color text

colors.textWarnActive

var(--textWarnActive)

Text-Link-Default

link text color

colors.textLinkDefault

var(--textLinkDefault)

Text-Link-Hover

The hover state of the link text color

colors.textLinkHover

var(--textLinkHover)

Text-Link-Active

active state of link text color

colors.textLinkActive

var(--textLinkActive)

Text-Link-Visted

Visited link text color

colors.textLinkVisted

var(--textLinkVisted)

Text-Static-Primary

Inherent first-level text color, generally used for dark backgrounds, does not follow the theme change, such as the text color in the button

colors.textStaticPrimary

var(--textStaticPrimary)

Text-Static-Secondary

The inherent second-level text color, generally used for dark backgrounds, does not follow the theme, such as the text color in the button

colors.textStaticSecondary

var(--textStaticSecondary)

Text-Static-Tertiary

The inherent third-level text color, generally used for dark backgrounds, does not follow the theme change, such as the text color in the button

colors.textStaticTertiary

var(--textStaticTertiary)

Text-Reverse-Default

Inverse text colors under different themes, generally used for text in tooltips

colors.textReverseDefault

var(--textReverseDefault)

Background

Default theme

Dark theme

Bg-Common-Lower

The background color of the lowest level

colors.bgCommonLower

var(--bgCommonLower)

Bg-Common-Default

Medium level background color, used by default

colors.bgCommonDefault

var(--bgCommonDefault)

Bg-Common-High

Higher-level background color, generally used for the background of the floating layer above bg-common-Default

colors.bgCommonHigh

var(--bgCommonHigh)

Bg-Common-Highest

The highest-level background color, generally used for drop-down/right-click menus, notification reminders, unmasked modal windows, etc.

colors.bgCommonHighest

var(--bgCommonHighest)

Bg-Bgless-Hover

Hover state without background elements, such as directory tree node Item, right-click menu Item, etc.

colors.bgBglessHover

var(--bgBglessHover)

Bg-Bgless-Active

Active state without background elements, such as directory tree node Item, right-click menu Item, etc.

colors.bgBglessActive

var(--bgBglessActive)

Bg-Controls-Default

The background color of regular controls, such as input boxes, selectors, secondary buttons, etc.

colors.bgControlsDefault

var(--bgControlsDefault)

Bg-Controls-Hover

The hover state of the background color of regular controls, such as input boxes, selectors, secondary buttons, etc.

colors.bgControlsHover

var(--bgControlsHover)

Bg-Controls-Active

The active state of the background color of regular controls, such as input boxes, selectors, secondary buttons, etc.

colors.bgControlsActive

var(--bgControlsActive)

Bg-Controls-Elevate

Elements that need to be promoted at the inner level of regular controls

colors.bgControlsElevate

var(--bgControlsElevate)

Bg-Tag-Default

The background color of regular tag components, such as Two-way Link, MagicLookUp, Member tags, etc.

colors.bgTagDefault

var(--bgTagDefault)

Bg-Tag-Hover

The hover state of the background color of regular tag components, such as Two-way Link, MagicLookUp, Member tags, etc.

colors.bgTagHover

var(--bgTagHover)

Bg-Scrollbar-Default

The background color of the scrollbar

colors.bgScrollbarDefault

var(--bgScrollbarDefault)

Bg-Mask-Default

The background color of the modal overlay

colors.bgMaskDefault

var(--bgMaskDefault)

Bg-Selected-Primary-Default

The background color of the selected state, such as selected directory node, toolbar button activation, selected row, etc.

colors.bgSelectedPrimaryDefault

var(--bgSelectedPrimaryDefault)

Bg-Selected-Primary-Hover

The hover state of the background color in the selected state, such as selecting a directory node, activating a toolbar button, selecting a row, etc.

colors.bgSelectedPrimaryHover

var(--bgSelectedPrimaryHover)

Bg-Selected-Primary-Active

The active state of the background color in the selected state, such as selecting a directory node, activating a toolbar button, selecting a row, etc.

colors.bgSelectedPrimaryActive

var(--bgSelectedPrimaryActive)

Bg-Selected-Secondary-Default

The background color of the selected state, such as the state of internal file nodes when a folder is selected

colors.bgSelectedSecondaryDefault

var(--bgSelectedSecondaryDefault)

Bg-Selected-Secondary-Hover

The hover state of the background color in the selected state, such as the state of the internal file node when a folder is selected

colors.bgSelectedSecondaryHover

var(--bgSelectedSecondaryHover)

Bg-Selected-Secondary-Active

The active state of the background color of the selected state, such as the state of the internal file node when a folder is selected

colors.bgSelectedSecondaryActive

var(--bgSelectedSecondaryActive)

Bg-Brand-Default

Background color of brand color

colors.bgBrandDefault

var(--bgBrandDefault)

Bg-Brand-Hover

The hover state of the background color of the brand color

colors.bgBrandHover

var(--bgBrandHover)

Bg-Brand-Active

The active state of the background color of the brand color

colors.bgBrandActive

var(--bgBrandActive)

Bg-Brand-Light-Default

A light version of the brand color background

colors.bgBrandLightDefault

var(--bgBrandLightDefault)

Bg-Brand-Light-Hover

Light version of the hover state for the brand color background

colors.bgBrandLightHover

var(--bgBrandLightHover)

Bg-Brand-Light-Active

The active state is a light version of the brand color background

colors.bgBrandLightActive

var(--bgBrandLightActive)

Bg-Danger-Default

The background color of the danger color, expressing danger, error, failure and other states

colors.bgDangerDefault

var(--bgDangerDefault)

Bg-Danger-Hover

The hover state for a dangerously colored background

colors.bgDangerHover

var(--bgDangerHover)

Bg-Danger-Active

The active state of the background of the hazard color

colors.bgDangerActive

var(--bgDangerActive)

Bg-Danger-Light-Default

Light version of danger color, expressing danger, error, failure and other states

colors.bgDangerLightDefault

var(--bgDangerLightDefault)

Bg-Danger-Light-Hover

Light version of the hover state of the hazard color

colors.bgDangerLightHover

var(--bgDangerLightHover)

Bg-Danger-Light-Active

active state in light hazard color

colors.bgDangerLightActive

var(--bgDangerLightActive)

Bg-Success-Default

The background color of the safe color, expressing the status of success, safety, correctness, completion, etc.

colors.bgSuccessDefault

var(--bgSuccessDefault)

Bg-Success-Hover

The hover state of a safe-colored background

colors.bgSuccessHover

var(--bgSuccessHover)

Bg-Success-Active

The active state of the background of the safe color

colors.bgSuccessActive

var(--bgSuccessActive)

Bg-Success-Light-Default

Light version of safety color, expressing success, safety, correctness, completion and other states

colors.bgSuccessLightDefault

var(--bgSuccessLightDefault)

Bg-Success-Light-Hover

hover state for light safe colors

colors.bgSuccessLightHover

var(--bgSuccessLightHover)

Bg-Success-Light-Active

active state for light safe colors

colors.bgSuccessLightActive

var(--bgSuccessLightActive)

Bg-Warn-Default

The background color of the warning color, expressing the status of reminder, warning, unsafe, etc.

colors.bgWarnDefault

var(--bgWarnDefault)

Bg-Warn-Hover

The hover state of the background of the warning color

colors.bgWarnHover

var(--bgWarnHover)

Bg-Warn-Active

The active state of the background of the warning color

colors.bgWarnActive

var(--bgWarnActive)

Bg-Warn-Light-Default

Light version of warning color, expressing reminder, warning, unsafe and other states

colors.bgWarnLightDefault

var(--bgWarnLightDefault)

Bg-Warn-Light-Hover

Light version of the hover state of the warning color

colors.bgWarnLightHover

var(--bgWarnLightHover)

Bg-Warn-Light-Active

active state with light warning color

colors.bgWarnLightActive

var(--bgWarnLightActive)

Bg-Static-Light

Bright intrinsic color that doesn't follow the theme

colors.bgStaticLight

var(--bgStaticLight)

Bg-Static-Dark-Primary

The inherent color of the dark first level, does not change with the theme, currently used for API panel and template center

colors.bgStaticDarkPrimary

var(--bgStaticDarkPrimary)

Bg-Static-Dark-Secondary

Dark second-level inherent color, does not change with the theme, currently used for API panel and template center

colors.bgStaticDarkSecondary

var(--bgStaticDarkSecondary)

Bg-Static-Dark-Tertiary

Dark third-level inherent color, does not change with the theme, currently used for API panel and template center

colors.bgStaticDarkTertiary

var(--bgStaticDarkTertiary)

Bg-Reverse-Default

The opposite text color under different themes, generally used for the background color of tooltips

colors.bgReverseDefault

var(--bgReverseDefault)

Bg-Extralight-Deeppurple

Very light brand purple, generally used for decorative element backgrounds

colors.bgExtralightDeeppurple

var(--bgExtralightDeeppurple)

Bg-Extralight-Red

Very light red, generally used for decorative element backgrounds

colors.bgExtralightRed

var(--bgExtralightRed)

Bg-Extralight-Teal

Very light cyan, generally used for decorative element backgrounds

colors.bgExtralightTeal

var(--bgExtralightTeal)

Bg-Extralight-Orange

Very light orange, generally used for decorative element backgrounds

colors.bgExtralightOrange

var(--bgExtralightOrange)

Bg-Extralight-Indigo

Very light blue, generally used for decorative element backgrounds

colors.bgExtralightIndigo

var(--bgExtralightIndigo)

Bg-Extralight-Gray

Very light orange, generally used for decorative element backgrounds and background colors for calendar views, Gantt view weekends

colors.bgExtralightGray

var(--bgExtralightGray)

Bg-Gradient-Horizontal

Gradient background color in the horizontal direction, generally used for the transition effect when the upper container blocks the lower elements

colors.bgGradientHorizontal

var(--bgGradientHorizontal)

Bg-Gradient-Vertical

Gradient background color in the vertical direction, generally used for the transition effect when the upper container blocks the lower elements

colors.bgGradientVertical

var(--bgGradientVertical)

Stroke

Default theme

Dark theme

Border-Common

For general dividing lines and strokes

colors.borderCommon

var(--borderCommon)

Border-Grid-Vertical

Grid lines in the vertical direction of the vig view

colors.borderGridVertical

var(--borderGridVertical)

Border-Grid-Horizontal

Grid lines in the horizontal direction of the vig view

colors.borderGridHorizontal

var(--borderGridHorizontal)

Border-Brand

Stroke of brand color

colors.borderBrand

var(--borderBrand)

Border-Onbrand-Default

Stroke used for elements whose background is the brand color

colors.borderOnbrandDefault

var(--borderOnbrandDefault)

Border-Onbrand-Light

Used for strokes on elements with a light brand color background

colors.borderOnbrandLight

var(--borderOnbrandLight)

Border-Danger

Dangerous color strokes, expressing danger, error, failure and other states

colors.borderDanger

var(--borderDanger)

Border-Ondanger-Default

Used for strokes on elements with a hazard-colored background

colors.borderOndangerDefault

var(--borderOndangerDefault)

Border-Ondanger-Light

Used for strokes on elements with a light hazard background

colors.borderOndangerLight

var(--borderOndangerLight)

Border-Success

The stroke of safe color expresses the status of success, safety, correctness and completion

colors.borderSuccess

var(--borderSuccess)

Border-Onsuccess-Default

Used for strokes on elements whose background is a safe color

colors.borderOnsuccessDefault

var(--borderOnsuccessDefault)

Border-Onsuccess-Light

Used for strokes on elements whose background is a light safe color

colors.borderOnsuccessLight

var(--borderOnsuccessLight)

Border-Warn

The stroke of the warning color expresses the status of reminder, warning, unsafe, etc.

colors.borderWarn

var(--borderWarn)

Border-Onwarn-Default

Used for strokes on elements whose background is a warning color

colors.borderOnwarnDefault

var(--borderOnwarnDefault)

Border-Onwarn-Light

Used for strokes on elements whose background is a light alert color

colors.borderOnwarnLight

var(--borderOnwarnLight)

Naming Structure​

Type (required)​

Color Role (required)​

Prominence (optional)​

Interaction (optional)​

Font, icon text color​

Background​

Stroke​

Naming Structure

Type (required)

Color Role (required)

Prominence (optional)

Interaction (optional)

Font, icon text color

Background

Stroke