Design Tokens

Los Design Tokens son una estrategia para gestionar sistemas de diseño.

Abstraen todos los elementos reutilizables en un sistema de diseño (como colores, fuentes, espaciados, etc.) en variables independientes para su gestión y aplicación uniforme en todo el sistema de diseño.

mdui utiliza CSS Custom Properties globales para implementar los Design Tokens. Esto significa que solo necesitas modificar las CSS Custom Properties para cambiar globalmente el estilo de todos los componentes de mdui. Al mismo tiempo, para tus propios estilos, también se recomienda hacer referencia a estas CSS Custom Properties para asegurar que tus estilos se mantengan uniformes con los componentes de mdui. Además, al modificar el Color dinámico, tus propios estilos también se actualizarán simultáneamente.

Color

mdui ofrece un conjunto de CSS Custom Properties para el modo claro y otro para el modo oscuro. En el modo claro, el nombre de la CSS Custom Property es --mdui-color-{name}-light, donde {name} es el nombre del color; en el modo oscuro es --mdui-color-{name}-dark.

Además, mdui ofrece un conjunto de CSS Custom Properties llamadas --mdui-color-{name}. En el modo claro, estas propiedades hacen referencia a --mdui-color-{name}-light, y en el modo oscuro a --mdui-color-{name}-dark, por lo que el color cambia automáticamente según el modo claro u oscuro.

Si necesitas modificar el valor de algunas CSS Custom Properties de color, debes modificar tanto --mdui-color-{name}-light como --mdui-color-{name}-dark. Para leer el valor de la CSS Custom Property, usa directamente la propiedad --mdui-color-{name}.

El valor de las CSS Custom Properties son los tres componentes RGB separados por comas ,. El siguiente ejemplo muestra el uso de las CSS Custom Properties de color:

/* Modificar el valor del color primary */
:root {
  --mdui-color-primary-light: 103, 80, 164;
  --mdui-color-primary-dark: 208, 188, 255;
}

/* Establecer el color de fondo del elemento.foo a primary */
.foo {
  background-color: rgb(var(--mdui-color-primary));
}

/* Establecer el color de fondo del elemento.bar a primary con 0.8 de opacidad */
.bar {
  background-color: rgba(var(--mdui-color-primary), 0.8);
}

Si necesitas crear un Esquema de colores completamente nuevo, se recomienda usar la función setColorScheme, que genera un esquema de colores completo a partir de un valor de color dado.

Shape Corner

mdui ofrece 7 tamaños de esquinas redondeadas. A continuación se muestra un ejemplo de cómo usar estas CSS Custom Properties de esquinas:

/* Modificar el tamaño de la esquina extra-small */
:root {
  --mdui-shape-corner-extra-small: 0.3rem;
}

/* Establecer el borde redondeado del elemento.foo a extra-small */
.foo {
  border-radius: var(--mdui-shape-corner-extra-small);
}

Typescale

mdui ofrece 15 estilos de texto diferentes, incluyendo Display large, Display medium, Display small, Headline large, Headline medium, Headline small, Title large, Title medium, Title small, Label large, Label medium, Label small, Body large, Body medium, Body small.

Uso:

/* Modificar el estilo de texto 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;
}

/* Establecer el estilo de texto del elemento.foo a 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);
}

Opacidad de la capa de estado

Algunos componentes de mdui agregan una capa semitransparente sobre ellos durante la interacción. Por ejemplo, el componente <mdui-button> muestra una capa semitransparente al pasar el ratón, enfocar, presionar o arrastrar. Puedes modificar las CSS Custom Properties para ajustar la opacidad de estas capas.

Uso:

/* Modificar la opacidad de la capa de estado */
: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;
}

Elevación (sombras)

Algunos componentes de mdui tienen efectos de sombra para simular la elevación en la página. Puedes modificar las CSS Custom Properties para ajustar las sombras de los componentes.

Uso:

/* Modificar la sombra de nivel 1 */
: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%);
}

/* Establecer la sombra del elemento.foo a level1 */
.foo {
  box-shadow: var(--mdui-elevation-level1);
}

Animación

Las curvas de aceleración y las duraciones de las animaciones en los componentes de mdui se pueden configurar mediante CSS Custom Properties.

Uso:

/* Modificar la curva de aceleración standard y la duración short1 */
:root {
  --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --mdui-motion-duration-short1: 40ms;
}

/* Establecer la transición del elemento.foo con la curva standard y la duración short1 */
.foo {
  transition: all var(--mdui-motion-duration-short1)
    var(--mdui-motion-easing-standard);
}

Breakpoints responsivos

mdui ofrece una serie de Breakpoints responsivos que se pueden configurar mediante CSS Custom Properties. Uso:

/* Modificar el valor del breakpoint sm */
:root {
  --mdui-breakpoint-sm: 560px;
}

Ten en cuenta que estas CSS Custom Properties no se pueden usar en consultas de medios CSS. El siguiente es un ejemplo incorrecto:

/* Uso incorrecto. Las consultas de medios no pueden usar CSS Custom Properties */
@media (min-width: var(--mdui-breakpoint-sm)) {
}

Si necesitas evaluar breakpoints en JavaScript, puedes usar la función breakpoint.