WorkDS provides a global theme containing values used in both light and dark color modes.
Theme values can be used as prop values on any UI component. For example, adding margin-right to a button component can be achieved by using the mr prop and passing in a scale value from the spacing scale.
Typically components inherintly have the props needed to style them, but in some cases you may need to add a style that is not available as a prop or set a value that is outside of the specified prop type.
In this case, you can use the style prop to override the component’s default styles. To use theme values with this method, pass the CSS variable name to the CSS property you wish to override. This should be used sparingly, and only when there is no other way to achieve the desired style. For example, to absolute position a box 8px from the top of the page, you can use the style prop to set a top value and pass --space-2 to it.
WorkDS spacing values should be used to create consistent rhythm between elements. These values are based on a 4px base unit. Spacing scale values are typically applied to the margin and padding properties.
Much like Radix Colors, each WorkDS color scale value has a specific use case in mind to ensure that the application of color is accessible and consistent throughout the system.
In certain cases, we need to use colors that are different scale values per color mode or are not mapped to a specific color palette. These colors are built into components like Card and Select and should not be used outside of their intended use-case.
Each color palette also includes an alpha scale which is used to create opacity values for the color. These alpha values are created to match the solid color value on the default canvas background. Alpha scale values are identified by the letter a followed by the scale value. For example, --gray-a1 is the alpha value for --gray-1 on the default canvas background.
Fonts are automatically applied to the correct components, for example the <CodeBlock /> components will get the --code-font-family font family. However, if you need to apply a font family to a custom component, you can use the following font-family CSS variables.
Like the spacing scale, font sizing is based on a 4px base unit, however these values are adjust optically for better sizing contrast and baseline alignment.