Why use variables
Variables actually decouple the basic elements of design from specific styles. For designers, if the style of the product needs to be updated iteratively, for example, the dangerous function color, namely color danger, needs to be updated, they only need to modify its corresponding color default value to complete the UI iteration of the whole product. For R & D, in order to adapt to the iteration of product style update, design token can update the style of all components more quickly without modifying everywhere. This is why we need to pay special attention to using variables instead of fixed default values in the development process. If the style of the product is shared by multiple platforms, it can get twice the result with half the effort. In particular, for platforms with dark mode requirements, Semi Design Next's color variable is needed to achieve the effect of one click switching between light and dark. Therefore, here we will introduce the design token system of Semi Design Next in detail and how to use them.
Basic color
A palette of 16 hues in gradient steps, 160 colors in total. In general, we use the color in the base color to further define the function color.
Color conversion
Functional color
From the basic color disk reference, including the interface background, text icons, links, stroke and other user interface elements.
Primary color - primary
User interface main tone and interactive colors, usually used for main operation button, etc
Secondary color - secondary
Secondary color - secondary
Tertiary color - tertiary
In the user interface, non emphasis color and interactive color are usually used for general and non emphasis function operation buttons
Information - info
It is usually used to express objective and neutral information in the context with the above semantics
Success - success
It is usually used to express the success, completion and opening status, and is used in scenarios with the above semantics
Warning - warning
It is usually used to express warning and unsafe state, and is used in scenarios with the above semantics
Danger - danger
It is usually used to express the dangerous state, and is used in the scene with the above semantics
AI - general
Background and text colors for AI scenarios
AI - purple
Background and text colors for secondary AI scenarios
AI - background
Background colors for AI scenarios
Text and icon colors - text
Four different levels of text / icon colors represent the most important, secondary, minor and minor contents in the product interface
Link color - link
Text used for hyperlinks in products
Background color - bg
All levels of background color in the application, including container, menu, navigation bar, etc. In dark mode, we usually use the background color to distinguish the front and back levels
Fill color - fill
For an element, if the background color of its container is not fixed, and the contrast between the filling color of the element and the top background color is small, use the filling color as the background color to ensure that the element will not "melt" into a certain level of background color, such as a form control.
Border color - border
Colors with stroke attributes in the interface
Disabled state - disabled
It is used to fill all kinds of forbidden elements in the interface, such as background, text, stroke, fill, etc
Constant color - static
The interface does not follow the theme and light and dark mode switching color
Simulated shadow color - shadow
Shallow shadow, a flat shadow effect simulated by border, is mainly used in the table component
Typesetting
Typesetting is used to convey information content, and the interface looks orderly
Trade name
Determines the size of different levels of text
Word weight
Determine the thickness of different levels of text
Font
In order to reduce the packing volume, the default English font inter needs to be introduced separately
If you want to use it on the business side, you need to add a font face statement in your CSS (it is not included in Semi, because the font is slightly larger, and the default loading may affect the speed of the first screen of the business). It is up to the business to decide whether to use it or not.
@font-face {
font-family: 'Inter';
src: url('/assets/fonts/Inter-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Inter-Bold';
src: url('/assets/fonts/Inter-Bold.ttf') format('truetype');
}Fillet
Fillet is used to describe the outline of container and interface elements, which determines the visual tonality of product to a certain extent
Shadow
Shadow is usually used to express the level of interface elements. The heavier the shadow, the closer the element is to the user
Dimensions
The size variable is used in various components and internal elements to adjust the size of the control, stroke thickness, etc
Height
Stroke size
Spacing
The spacing variable is applied in each component or between components to adjust the density and compactness of the whole product
z-index
It is used to describe the sequence of interface elements
Animation
Variables not yet supported
Currently, Semi does not support global variables in the following categories. If you have related requirements, you can give feedback through issue and describe your expected needs in detail.
Line height
Letter spacing
Media query
Customization
The --semi-* CSS variables on this page are Semi's global customization surface. Override them in your own stylesheet; no build plugin or theme package is needed:
:root {
--semi-color-primary: var(--semi-violet-5);
--semi-border-radius-medium: 8px;
}- Light values go on
:root, dark values on[theme-mode='dark']; see Dark Mode. - Semi's styles sit in
@layer semi, so your unlayered CSS rules always win and can override a component's own styles without!important. - With Tailwind, import
@fibrous/semi-ui-react/tailwind.css(@fibrous/semi-ui-vue/tailwind.cssfor Vue) to map these variables to Tailwind theme values (e.g.bg-semi-color-primary). - The Design Token tables on the component pages list each component's internal Sass variables, which cannot be overridden.