Referencia de propiedades JSON del tema Adobe Learning Manager Content Composer
Una referencia completa para cada propiedad de un archivo JSON de tema de Content Composer, con descripciones y valores de ejemplo.
Campos de nivel superior que identifican y describen el tema.
Metadatos
foundation.palette
Los siete tokens de color principales que forman la base de color del tema. Todos los valores de elemento hacen referencia a estos tokens mediante var(—tokenName) en lugar de valores hexadecimales codificados.
foundation.fonts
Se han aplicado dos pilas de fuentes en todas las funciones de texto del tema. Referencia en valores de elemento mediante var(—font-heading) o var(—font-body).
foundation.spacing
Distintivos de espaciado horizontal y vertical utilizados como línea de base. Los componentes se escalan a partir de estos mediante multiplicadores horizontalesSpacingScale y verticalesSpacingScale.
foundation.radius
Tokens de radio de borde que controlan el redondeo de las esquinas para componentes y tarjetas.
foundation.logo
elements.text
Propiedades tipográficas para cada función de texto con nombre del curso. Todas las funciones comparten el mismo conjunto de propiedades.
Funciones de texto
Propiedades de texto compartido
Las siguientes propiedades se aplican a todas las funciones de texto enumeradas anteriormente.
Valores de función de texto: tema de pizarra
elementos - superficies estructurales
Propiedades que controlan el fondo y el borde de las superficies de diseño fijas del curso.
elements - propiedades de componente compartido
Estas propiedades aparecen en todos los componentes del bloque de contenido: ParagraphBlock, videoBlock, imageGrid, accordion, carousel, flipCard y timeline.
Valores de componentes compartidos: tema de pizarra
elements: propiedades específicas de componentes
Propiedades exclusivas de tipos de componentes individuales.
elements.assessment
Propiedades de los componentes de prueba y comprobación de conocimientos.
Referencia var() del token de paleta
Utilice estas expresiones var() en valores de elemento para hacer referencia a tokens de paleta. Al actualizar un distintivo de paleta, se actualizan automáticamente todos los elementos que lo utilizan.
Ejemplo de un json de tema
{
"id": "slate",
"name": "Slate",
"version": "1.0.0",
"description": "A warm, authoritative theme with cream background, Adobe red accents, and the Roboto Slab + Roboto type system",
"author": "Content Composer",
"source": "custom",
"isDefault": false,
"foundation": {
"palette": {
"foreground": "#1A1A1A",
"background": "#FAF7F2",
"accent": "#E8001C",
"backgroundSubtle": "#F0EBE1",
"secondary": "#D9D3C9",
"textPrimary": "#1A1A1A",
"textInverse": "#FFFFFF"
},
"fonts": {
"heading": "Roboto Slab, Georgia, 'Times New Roman', serif",
"body": "Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
},
"spacing": {
"horizontal": {
"xs": "4px",
"s": "8px",
"m": "12px",
"l": "16px",
"xl": "24px"
},
"vertical": {
"xs": "4px",
"s": "8px",
"m": "16px",
"l": "24px",
"xl": "32px"
}
},
"radius": {
"none": "0px",
"s": "4px",
"m": "8px",
"l": "16px",
"full": "9999px"
},
"logo": null
},
"elements": {
"text": {
"lessonTitle": {
"fontFamily": "var(--font-heading)",
"fontSize": "48px",
"fontWeight": "bold",
"fontStyle": "normal",
"color": "var(--textPrimary)",
"textAlign": "center",
"letterSpacing": "-0.01em",
"lineHeight": "130%",
"textDecoration": "none",
"textTransform": "none",
"paddingInlineStart": "0px",
"paragraphSpacing": "0px"
},
"topicTitle": {
"fontFamily": "var(--font-heading)",
"fontSize": "40px",
"fontWeight": "normal",
"fontStyle": "normal",
"color": "var(--textPrimary)",
"textAlign": "left",
"letterSpacing": "0",
"lineHeight": "135%",
"textDecoration": "none",
"textTransform": "none",
"paddingInlineStart": "0px",
"paragraphSpacing": "0px"
},
"blockHeading": {
"fontFamily": "var(--font-heading)",
"fontSize": "24px",
"fontWeight": "bold",
"fontStyle": "normal",
"color": "var(--textPrimary)",
"textAlign": "left",
"letterSpacing": "0",
"lineHeight": "140%",
"textDecoration": "none",
"textTransform": "none",
"paddingInlineStart": "0px",
"paragraphSpacing": "0px"
},
"subheading": {
"fontFamily": "var(--font-body)",
"fontSize": "20px",
"fontWeight": "bold",
"fontStyle": "normal",
"color": "var(--textPrimary)",
"textAlign": "left",
"letterSpacing": "0.01em",
"lineHeight": "150%",
"textDecoration": "none",
"textTransform": "none",
"paddingInlineStart": "0px",
"paragraphSpacing": "0px"
},
"question": {
"fontFamily": "var(--font-heading)",
"fontSize": "24px",
"fontWeight": "normal",
"fontStyle": "normal",
"color": "var(--textPrimary)",
"textAlign": "left",
"letterSpacing": "0",
"lineHeight": "150%",
"textDecoration": "none",
"textTransform": "none",
"paddingInlineStart": "0px",
"paragraphSpacing": "0px"
},
"caption": {
"fontFamily": "var(--font-body)",
"fontSize": "13px",
"fontWeight": "normal",
"fontStyle": "normal",
"color": "var(--textPrimary)",
"textAlign": "left",
"letterSpacing": "0.02em",
"lineHeight": "170%",
"textDecoration": "none",
"textTransform": "none",
"paddingInlineStart": "0px",
"paragraphSpacing": "0px"
},
"paragraph": {
"fontFamily": "var(--font-body)",
"fontSize": "16px",
"fontWeight": "normal",
"fontStyle": "normal",
"color": "var(--textPrimary)",
"textAlign": "left",
"letterSpacing": "0.01em",
"lineHeight": "190%",
"textDecoration": "none",
"textTransform": "none",
"paddingInlineStart": "0px",
"paragraphSpacing": "0px"
},
"buttonLabel": {
"fontFamily": "var(--font-body)",
"fontSize": "14px",
"fontWeight": "bold",
"fontStyle": "normal",
"color": "var(--textInverse)",
"textAlign": "center",
"letterSpacing": "0.06em",
"lineHeight": "125%",
"textDecoration": "none",
"textTransform": "uppercase",
"paddingInlineStart": "0px",
"paragraphSpacing": "0px"
}
},
"canvas": {
"background": "var(--background)"
},
"header": {
"background": "var(--background)",
"border": "1px solid var(--secondary)"
},
"footer": {
"background": "var(--background)",
"border": "1px solid var(--secondary)"
},
"lessonHeader": {
"background": "var(--accent)"
},
"topic": {
"background": "var(--background)",
"border": "1px solid var(--secondary)"
},
"navigation": {
"background": "var(--backgroundSubtle)",
"border": "1px solid var(--secondary)"
},
"button": {
"background": "var(--accent)"
},
"pagination": {
"background": "var(--backgroundSubtle)",
"horizontalSpacingScale": "1",
"verticalSpacingScale": "1",
"radiusScale": "1"
},
"paragraphBlock": {
"background": "transparent",
"cardBackgroundColor": "var(--backgroundSubtle)",
"cardBorder": "1px solid var(--secondary)",
"cardShadowOffset": "0px 2px 6px",
"cardShadowColor": "var(--foreground)",
"cardShadowOpacity": "8%",
"nestedAccentColor": "var(--accent)",
"horizontalSpacingScale": "1",
"verticalSpacingScale": "1",
"radiusScale": "1"
},
"imageBlock": {
"background": "transparent",
"horizontalSpacingScale": "1",
"verticalSpacingScale": "1",
"radiusScale": "1"
},
"videoBlock": {
"background": "transparent",
"cardBackgroundColor": "var(--backgroundSubtle)",
"cardBorder": "1px solid var(--secondary)",
"cardShadowOffset": "0px 2px 6px",
"cardShadowColor": "var(--foreground)",
"cardShadowOpacity": "8%",
"horizontalSpacingScale": "1",
"verticalSpacingScale": "1",
"radiusScale": "1"
},
"imageGrid": {
"background": "transparent",
"cardBackgroundColor": "var(--backgroundSubtle)",
"cardBorder": "1px solid var(--accent)",
"cardShadowOffset": "0px 2px 8px",
"cardShadowColor": "var(--foreground)",
"cardShadowOpacity": "8%",
"horizontalSpacingScale": "1",
"verticalSpacingScale": "1",
"radiusScale": "1"
},
"accordion": {
"background": "transparent",
"cardBackgroundColor": "var(--backgroundSubtle)",
"cardBorder": "1px solid var(--secondary)",
"cardShadowOffset": "0px 2px 6px",
"cardShadowColor": "var(--foreground)",
"cardShadowOpacity": "8%",
"horizontalSpacingScale": "1",
"verticalSpacingScale": "1",
"radiusScale": "1"
},
"carousel": {
"background": "transparent",
"cardBackgroundColor": "var(--backgroundSubtle)",
"cardBorder": "1px solid var(--secondary)",
"cardShadowOffset": "0px 2px 6px",
"cardShadowColor": "var(--foreground)",
"cardShadowOpacity": "8%",
"horizontalSpacingScale": "1",
"verticalSpacingScale": "1",
"radiusScale": "1"
},
"flipCard": {
"background": "transparent",
"cardFrontBackgroundColor": "var(--backgroundSubtle)",
"cardBackBackgroundColor": "var(--accent)",
"arrowColor": "var(--textInverse)",
"cardBorder": "1px solid var(--secondary)",
"cardShadowOffset": "0px 2px 6px",
"cardShadowColor": "var(--foreground)",
"cardShadowOpacity": "8%",
"horizontalSpacingScale": "1",
"verticalSpacingScale": "1",
"radiusScale": "1"
},
"tabs": {
"background": "transparent",
"activeBg": "var(--accent)",
"inactiveBg": "var(--backgroundSubtle)",
"containerBg": "var(--backgroundSubtle)",
"horizontalSpacingScale": "1",
"verticalSpacingScale": "1",
"radiusScale": "1"
},
"timeline": {
"background": "transparent",
"cardBackgroundColor": "var(--backgroundSubtle)",
"cardBorder": "1px solid var(--secondary)",
"cardShadowOffset": "0px 2px 6px",
"cardShadowColor": "var(--foreground)",
"cardShadowOpacity": "8%",
"trackColor": "var(--secondary)",
"progressCompletedBg": "var(--accent)",
"progressCurrentBorder": "var(--accent)",
"progressUnreachedBg": "var(--secondary)",
"progressUnreachedBorder": "var(--backgroundSubtle)",
"horizontalSpacingScale": "1",
"verticalSpacingScale": "1",
"radiusScale": "1"
},
"assessment": {
"background": "transparent",
"optionTextColor": "var(--textPrimary)",
"optionIndicatorColor": "var(--accent)",
"optionSelectedColor": "var(--accent)",
"optionCheckmarkColor": "var(--textInverse)",
"optionBackgroundColor": "var(--background)",
"optionHoverBackgroundColor": "var(--backgroundSubtle)",
"buttonBackgroundColor": "var(--accent)",
"buttonTextColor": "var(--textInverse)",
"buttonHoverBackgroundColor": "var(--accent)",
"feedbackCorrectColor": "#D7F7E1",
"feedbackIncorrectColor": "#FFEBE8",
"feedbackTextColor": "#111111",
"optionBorderCorrectColor": "#079355",
"optionBorderIncorrectColor": "#D73220",
"horizontalSpacingScale": "1",
"verticalSpacingScale": "1",
"radiusScale": "1"
}
}
}