#BLUE FOCUS COLOR UI CODE#
Use functional design tokens in designs and code to build product interfaces.īy using Primer's functional color system you make sure that your interface: The functional system is based on the meaning, or purpose, that colors have in the interface. Check the Primer Primitives repository to follow along as we release new design tokens and systems. For example, button.bg references from the system to be used as the background of a button component.Īs the system grows, it will provide more APIs that fit different color needs. Component: To represent a specific use case.In a functional system, green design tokens are named with the suffix. For example, from a functional perspective the color green is used to reinforce positive messaging. Functional: To convey a meaning or a state.These design tokens don't support color modes. For example, the color steps in the Primer scale are named by color and lightness, such as scale.blue.5. Color design tokens are grouped based on their purpose: If the user changes to dark mode, the underlying color that those tokens reference change, but the token names stay the same. Design tokens are a layer of abstraction that allows better maintainability, consistency and easy theming.įor example use bg-default for the background of the page and fg-default for the text color.
Primer delivers colors in the form of design tokens. To preview your work in other modes, use the Figma color mode plugin. This is best because the Primer Figma components are only available in light mode. When designing product interfaces in Figma, we recommend using light mode. Every pattern in Primer is built to work across all color modes out of the box. GitHub's UI offers a variety of different color modes.
0 kommentar(er)
