Paleta de colores

Una colección de colores reutilizables a los que se puede hacer referencia en los diseños.

Propiedades

default - object, opcional. Una colección de definiciones de color hexadecimal a las que se puede hacer referencia mediante una referencia de color. highContrast - object, opcional. Una colección de definiciones de color hexadecimal a las que se puede hacer referencia mediante una referencia de color. Invalida las definiciones de default cuando está habilitado el modo de contraste alto.

Ejemplo

{
  "$schema": "https://raw.githubusercontent.com/microsoft/xbox-game-streaming-tools/main/touch-adaptation-kit/schemas/layout/4.0/layout.json",
  "styles": {
    "colors": {
      "default": {
        "myColor1": "#ff0000ff",
        "myColor2": "#00ff00ff",
        "system_contentPrimary": "#0000ffff"
      },
      "highContrast": {
        "myColor1": "#00ff00ff",
        "system_contrastPrimary": "#0000ffaa"
      }
    }
  },
  "content": {
    "left": {
      "inner": [
        {
          "type": "directionalPad",
          "styles": {
            "idle": {
              "background": {
                "type": "color",
                "value": "colors/myColor1"
              }
            }
          }
        }
      ]
    },
    "right": {
      "inner": [
          {
              "type": "button",
              "action": "gamepadY"
          },
          {
              "type": "button",
              "action": "gamepadB"
          },
          {
              "type": "button",
              "action": "gamepadA",
              "styles": {
                "idle": {
                  "background": {
                    "type": "color",
                    "value": "colors/myColor2"
                  }
                }
              }
          },
          {
              "type": "button",
              "action": "gamepadX"
          }
      ]
    }
  }
}

El diseño anterior con el modo de contraste alto deshabilitado:

Diseño táctil con paleta de colores y modo de contraste alto deshabilitado

Y con el modo de contraste alto habilitado:

Diseño táctil con paleta de colores y modo de contraste alto habilitado

Comentarios

El ejemplo anterior incluye definiciones de color que invalidan colores del sistema (por ejemplo, system_contentPrimary, system_accentPrimary, etc.), así como definiciones de color personalizadas (myColor1, myColor2). Los controles toman muestras de los colores del sistema de forma implícita al aplicar estilos, lo que significa que cualquier invalidación afectará a los estilos globales de todos los controles (a menos que un control tenga su propia invalidación dentro de un bloque styles personalizado). Los colores personalizados deben referenciarse de forma explícita mediante una referencia de color (por ejemplo, colors/myColor1). Además, las definiciones de color personalizadas no pueden usar el prefijo reservado system_, ya que está reservado para los colores del sistema. Las definiciones de color se declaran en los objetos default y highContrast, y se activan cuando el modo de contraste alto está deshabilitado o habilitado, respectivamente. Cuando el modo de contraste alto está deshabilitado, los colores se toman de default. Cuando está habilitado, los colores se toman primero de highContrast y, si no existe ninguna definición, se recurre a default. Si una invalidación de color del sistema no está presente en default, se usa un valor predeterminado del sistema, mientras que los colores personalizados deben definirse en default. En la tabla siguiente se describe cómo se resolverán las definiciones de color anteriores en función de si el modo de contraste alto (HC) está habilitado o no:

Definición de color	Modo HC deshabilitado	Modo HC habilitado
myColor1	`#ff0000ff`	`#00ff00ff`
myColor2	`#00ff00ff`	`#00ff00ff`
system_contentPrimary	`#0000ffff`	`#0000ffff`
system_contrastPrimary	valor predeterminado del sistema	`#0000ffaa`

Colores del sistema

En la tabla siguiente se resume la lista de colores del sistema del Touch Adaptation Kit, una descripción de cómo se usan para aplicar estilos a los controles, así como sus valores predeterminados del sistema cuando el modo de contraste alto (HC) está deshabilitado o habilitado.

Color del sistema	Descripción	Modo HC deshabilitado	Modo HC habilitado
system_contentPrimary	Color usado para aplicar estilos a componentes como trazos intermedios, tintes de iconos y degradados de la cruceta.	`#ffffffff`	`#ffffffff`
system_contentSecondary	Color usado para aplicar estilos a componentes como fondos y rellenos.	`#ffffff1a`	`#ffffffff`
system_contrastPrimary	Color usado para aplicar estilos a componentes de contraste como trazos internos y externos y placas de fondo de la imagen frontal.	`#00000000`	`#000000bf`
system_contrastSecondary	Color usado para aplicar estilos a componentes de contraste como los trazos del panel táctil.	`#00000000`	`#ffffffff`
system_actionColorDefault	Color usado para aplicar estilos a componentes de controles cuyo campo `action` está establecido en una acción que no es de mando.	`#ffffffff`	`#ffffffe6`
system_actionColorA	Color usado para aplicar estilos a componentes de controles cuyo campo `action` está establecido en `gamepadA`.	`#7eb902ff`	`#ffffffe6`
system_actionColorB	Color usado para aplicar estilos a componentes de controles cuyo campo `action` está establecido en `gamepadB`.	`#f25127ff`	`#ffffffe6`
system_actionColorX	Color usado para aplicar estilos a componentes de controles cuyo campo `action` está establecido en `gamepadX`.	`#00a2eeff`	`#ffffffe6`
system_actionColorY	Color usado para aplicar estilos a componentes de controles cuyo campo `action` está establecido en `gamepadY`.	`#ffb807ff`	`#ffffffe6`
system_accentPrimary	Color usado para aplicar estilos a componentes como la rueda interna de edición ergonómica.	`#8cc08cff`	`#8cc08cff`
system_accentSecondary	Color usado para aplicar estilos a componentes como la rueda externa de edición ergonómica.	`#61ab61ff`	`#61ab61ff`

Para obtener una lista actualizada, consulte las definiciones con el prefijo _SystemColor en el esquema más reciente.

Consulte también

Referencia del Touch Adaptation Kit
Modo de contraste alto para diseños de adaptación táctil

Introduction

Onboarding & Access

Setup & Install

Build Your First Title

Paleta de colores

Paleta de colores

Propiedades

Ejemplo

Comentarios

Colores del sistema

Consulte también

​Paleta de colores

​Propiedades

​Ejemplo

​Comentarios

​Colores del sistema

​Consulte también

Paleta de colores

Propiedades

Ejemplo

Comentarios

Colores del sistema

Consulte también