Design Tokens

Design Tokens are a strategy employed in managing design systems.

They abstract reusable elements such as colors, fonts, and spacing into independent variables. These variables are then consistently used across the design system.

mdui employs global CSS custom properties to implement Design Tokens, ensuring style consistency across all components. By modifying these properties, you can globally adjust the styles of all mdui components. For your own styles, prioritize using these CSS custom properties to maintain consistency with mdui component styles. This also ensures your styles update synchronously when modifying dynamic color schemes.

Color

mdui provides CSS custom properties for both light and dark modes. In light mode, the property is named --mdui-color-{name}-light, and in dark mode, it's --mdui-color-{name}-dark.

Additionally, mdui provides CSS custom properties named --mdui-color-{name}. This property references --mdui-color-{name}-light in light mode and --mdui-color-{name}-dark in dark mode, enabling automatic color switching based on the current mode.

To modify specific colors, adjust both --mdui-color-{name}-light and --mdui-color-{name}-dark. When reading CSS custom properties, use the --mdui-color-{name} property.

The values of CSS custom properties are three RGB colors separated by ,. Here's an example of how to use color CSS custom properties:

/* Modify the color value of primary */
:root {
  --mdui-color-primary-light: 103, 80, 164;
  --mdui-color-primary-dark: 208, 188, 255;
}

/* Set the background color of the foo element to primary */
.foo {
  background-color: rgb(var(--mdui-color-primary));
}

/* Set the background color of the bar element to primary with 0.8 opacity */
.bar {
  background-color: rgba(var(--mdui-color-primary), 0.8);
}

For creating a completely new color scheme, consider using the setColorScheme function. This function generates a complete color scheme based on the provided color.

Corner Radius

mdui provides 7 corner radius sizes. These CSS custom properties allow you to adjust the corner radius:

/* Modify the corner radius size of extra-smal */
:root {
  --mdui-shape-corner-extra-small: 0.3rem;
}

/* Set the corner radius of the foo element to extra-small */
.foo {
  border-radius: var(--mdui-shape-corner-extra-small);
}

Typography

mdui provides 15 typography styles. Each style includes properties for line height, font size, letter spacing, and font weight.

Here's an example of how to use these properties:

/* Modify the text style of Body large */
:root {
  --mdui-typescale-body-large-line-height: 1.6rem;
  --mdui-typescale-body-large-size: 1.2rem;
  --mdui-typescale-body-large-tracking: 0.01rem;
  --mdui-typescale-body-large-weight: 400;
}

/* Set the text style of the foo element to Body large */
.foo {
  line-height: var(--mdui-typescale-body-large-line-height);
  font-size: var(--mdui-typescale-body-large-size);
  letter-spacing: var(--mdui-typescale-body-large-tracking);
  font-weight: var(--mdui-typescale-body-large-weight);
}

State Layer Opacity

mdui components, such as <mdui-button>, utilize a semi-transparent overlay layer during interaction states like hover, focus, press, and drag. The opacity of this layer can be adjusted by modifying the following CSS custom properties:

/* Modify the opacity of the state layer */
:root {
  --mdui-state-layer-hover: 0.08;
  --mdui-state-layer-focus: 0.12;
  --mdui-state-layer-pressed: 0.12;
  --mdui-state-layer-dragged: 0.16;
}

Elevation

mdui components use elevation to create depth with shadows. You can adjust these shadows by modifying the CSS custom properties:

/* Modify the elevation of level1 */
:root {
  --mdui-elevation-level1: 0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%);
}

/* Set the elevation of the foo element to level1 */
.foo {
  box-shadow: var(--mdui-elevation-level1);
}

Animation

mdui components incorporate animations, with customizable easing curves and durations. These properties can be adjusted using CSS custom properties:

/* Modify the standard easing curve and short1 duration */
:root {
  --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --mdui-motion-duration-short1: 40ms;
}

/* Apply the standard easing curve and short1 duration to the transition effect of the foo element */
.foo {
  transition: all var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard);
}

Breakpoint

mdui components adjust their layout based on various breakpoints, which are provided through CSS custom properties. Here's an example of how to modify a breakpoint:

/* Modify the breakpoint value for sm */
:root {
  --mdui-breakpoint-sm: 560px;
}

Please note that CSS custom properties cannot be used in CSS media queries. For example, the following usage is incorrect:

/* Incorrect usage. CSS custom properties cannot be used in media queries */
@media (min-width: var(--mdui-breakpoint-sm)) {

}

To determine breakpoints in JavaScript, use the breakpoint function.