Adobe Learning Manager Content Composer 테마 JSON 속성 참조
Content Composer 테마 JSON 파일의 모든 속성에 대한 설명 및 예제 값이 포함된 전체 참조입니다.
테마를 식별하고 설명하는 최상위 필드
메타데이터
foundation.palette
테마의 색상 기초를 형성하는 7가지 핵심 색상 토큰입니다. 모든 요소 값은 하드 코딩된 16진수 값이 아닌 var(—tokenName)을 사용하여 이러한 토큰을 참조합니다.
foundation.fonts
테마의 모든 텍스트 역할에 적용되는 두 개의 글꼴 스택입니다. var(—font-heading) 또는 var(—font-body)를 사용하여 요소 값을 참조합니다.
foundation.spacing
기준선으로 사용되는 가로 및 세로 간격 토큰입니다. 구성 요소는 horizontalSpacingScale 및 verticalSpacingScale 승수를 사용하여 크기를 조정합니다.
foundation.radius
구성 요소 및 카드의 모서리 라운딩을 제어하는 테두리 반경 토큰입니다.
foundation.logo
elements.text
강의의 각 명명된 텍스트 역할에 대한 입력 체계 속성입니다. 모든 역할은 동일한 속성 집합을 공유합니다.
텍스트 역할
공유 텍스트 속성
다음 속성은 위에 나열된 모든 텍스트 역할에 적용됩니다.
텍스트 역할 값 - 슬레이트 테마
요소 - 구조적 표면
강의의 고정 레이아웃 표면의 배경과 테두리를 제어하는 속성입니다.
요소 - 공유 구성 요소 속성
이러한 속성은 모든 콘텐츠 블록 구성 요소(paragraphBlock, videoBlock, imageGrid, 아코디언, 캐러셀, flipCard 및 타임라인)에 나타납니다.
공유 구성 요소 값 - 슬레이트 테마
요소 - 구성 요소별 속성
개별 구성 요소 유형에 고유한 등록 정보입니다.
elements.assessment
퀴즈 및 지식 검사 구성 요소에 대한 속성입니다.
팔레트 토큰 var() 참조
요소 값에 이러한 var() 표현식을 사용하여 팔레트 토큰을 참조합니다. 팔레트 토큰을 업데이트하면 해당 토큰을 사용하는 모든 요소가 자동으로 업데이트됩니다.
테마 json의 예
{
"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"
}
}
}