To create or update a quilt using GraphQL, you must use the GraphQL createOrUpdateTheme mutation query and variables. When you make this mutation, this creates the theme JSON file and checks it into the git repository.
Mutation Query
mutation createOrUpdateTheme($themeInput: ThemeInput!, $baseThemeId: String, $quiltId: String, $setAsDefault: Boolean){
createOrUpdateTheme(themeInput: $themeInput, baseThemeId: $baseThemeId, quiltId: $quiltId, setAsDefault: $setAsDefault){
result{
id
colors{
black
white
gray100
gray200
gray300
gray400
gray500
gray600
gray700
gray800
gray900
dark
light
primary
secondary
bodyText
bodyBg
info
success
warning
danger
alertSystem
textMuted
highlight
outline
custom
}
coreTypes{
defaultMessageFontStyle
defaultMessageFontWeight
defaultMessageLinkColor
defaultMessageLinkFontStyle
defaultMessageLinkFontWeight
forumColor
forumFontFamily
forumFontWeight
forumLineHeight
forumFontStyle
forumMessageLinkColor
forumMessageLinkFontStyle
forumMessageLinkFontWeight
forumSolvedColor
blogColor
blogFontFamily
blogFontWeight
blogLineHeight
blogFontStyle
blogMessageLinkColor
blogMessageLinkFontStyle
blogMessageLinkFontWeight
tkbColor
tkbFontFamily
tkbFontWeight
tkbLineHeight
tkbFontStyle
tkbMessageLinkColor
tkbMessageLinkFontStyle
tkbMessageLinkFontWeight
qandaColor
qandaFontFamily
qandaFontWeight
qandaLineHeight
qandaFontStyle
qandaMessageLinkColor
qandaMessageLinkFontStyle
qandaMessageLinkFontWeight
qandaSolvedColor
ideaColor
ideaFontFamily
ideaFontWeight
ideaLineHeight
ideaFontStyle
ideaMessageLinkColor
ideaMessageLinkFontStyle
ideaMessageLinkFontWeight
contestColor
contestFontFamily
contestFontWeight
contestLineHeight
contestFontStyle
contestMessageLinkColor
contestMessageLinkFontStyle
contestMessageLinkFontWeight
eventColor
eventFontFamily
eventFontWeight
eventLineHeight
eventFontStyle
eventMessageLinkColor
eventMessageLinkFontStyle
eventMessageLinkFontWeight
grouphubColor
categoryColor
communityColor
productColor
}
modal{
contentTextColor
contentBg
backgroundBg
smSize
mdSize
lgSize
backdropOpacity
contentBoxShadowXs
contentBoxShadow
}
link{
color
hoverColor
decoration
hoverDecoration
}
input{
borderColor
disabledColor
focusBorderColor
labelMarginBottom
btnFontSize
focusBoxShadow
checkLabelMarginBottom
checkboxBorderRadius
borderRadiusSm
borderRadius
borderRadiusLg
formTextMarginTop
textAreaBorderRadius
activeFillColor
}
boxShadow{
xs
sm
md
lg
}
border{
color
mainContent
sideContent
radiusSm
radius
radiusLg
radius50
}
typography{
fontFamilyBase
fontWeightBase
fontWeightLight
fontWeightNormal
fontWeightMd
fontWeightBold
fontStyleBase
lineHeightBase
fontSizeBase
fontSizeXxs
fontSizeXs
fontSizeSm
fontSizeLg
fontSizeXl
smallFontSize
letterSpacingSm
letterSpacingXs
}
heading{
subHeaderFontSize
subHeaderFontWeight
color
lineHeight
fontFamily
fontWeight
fontStyle
h1FontSize
h2FontSize
h3FontSize
h4FontSize
h5FontSize
h6FontSize
h6LineHeight
h1LetterSpacing
h2LetterSpacing
h3LetterSpacing
h4LetterSpacing
h5LetterSpacing
h6LetterSpacing
subHeaderLetterSpacing
}
animation{
fast
normal
slow
slowest
function
}
icons{
size12
size14
size16
size20
size24
size30
size40
size50
size80
size120
size160
}
basics{
pageWidthStyle
maximumWidthOfPageContent
oneColumnNarrowWidth
}
avatar{
includeDefaultSet
borderRadius
custom
}
popover{
arrowHeight
arrowWidth
maxWidth
minWidth
headerBg
borderColor
borderRadius
boxShadow
}
toasts{
borderRadius
paddingX
}
dropdown{
fontSize
borderColor
borderRadius
dividerBg
itemPaddingY
itemPaddingX
headerColor
}
listGroup{
itemPaddingY
itemPaddingX
borderColor
}
unstyledListItem{
marginBottomSm
marginBottomMd
marginBottomLg
marginBottomXl
marginBottomXxl
}
imagePreview{
bgColor
titleColor
controlColor
controlBgColor
}
loading{
dotDarkColor
dotLightColor
barDarkColor
barLightColor
}
buttons{
fillStyle
borderRadiusSm
borderRadius
borderRadiusLg
fontWeight
textTransform
disabledOpacity
primaryTextColor
primaryTextHoverColor
primaryTextActiveColor
primaryBgColor
primaryBgHoverColor
primaryBgActiveColor
primaryBorder
primaryBorderHover
primaryBorderActive
primaryBorderFocus
primaryBoxShadowFocus
secondaryTextColor
secondaryTextHoverColor
secondaryTextActiveColor
secondaryBgColor
secondaryBgHoverColor
secondaryBgActiveColor
secondaryBorder
secondaryBorderHover
secondaryBorderActive
secondaryBorderFocus
secondaryBoxShadowFocus
tertiaryTextColor
tertiaryTextHoverColor
tertiaryTextActiveColor
tertiaryBgColor
tertiaryBgHoverColor
tertiaryBgActiveColor
tertiaryBorder
tertiaryBorderHover
tertiaryBorderActive
tertiaryBorderFocus
tertiaryBoxShadowFocus
destructiveTextColor
destructiveTextHoverColor
destructiveTextActiveColor
destructiveBgColor
destructiveBgHoverColor
destructiveBgActiveColor
destructiveBorder
destructiveBorderHover
destructiveBorderActive
destructiveBorderFocus
destructiveBoxShadowFocus
}
navbar{
position
paddingTop
paddingBottom
borderBottom
boxShadow
brandMarginRight
brandMarginRightSm
brandLogoHeight
linkGap
linkJustifyContent
linkPaddingY
linkPaddingX
linkDropdownPaddingY
linkDropdownPaddingX
linkColor
linkHoverColor
linkFontSize
linkFontStyle
linkFontWeight
linkTextTransform
linkLetterSpacing
linkBorderRadius
linkBgColor
linkBgHoverColor
linkBorder
linkBorderHover
linkBoxShadow
linkBoxShadowHover
linkTextBorderBottom
linkTextBorderBottomHover
dropdownPaddingTop
dropdownPaddingBottom
dropdownPaddingX
dropdownMenuOffset
dropdownDividerMarginTop
dropdownDividerMarginBottom
dropdownBorderColor
controllerBgHoverColor
controllerIconColor
controllerIconHoverColor
controllerHighlightColor
controllerHighlightTextColor
controllerBorderRadius
hamburgerColor
hamburgerHoverColor
hamburgerBgColor
hamburgerBgHoverColor
hamburgerBorder
hamburgerBorderHover
collapseMenuMarginLeft
}
panel{
bgColor
borderRadius
borderColor
boxShadow
}
rte{
bgColor
borderRadius
boxShadow
customColor1
customColor2
customColor3
customColor4
customColor5
customColor6
customColor7
customColor8
customColor9
customColor10
customColor11
customColor12
customColor13
customColor14
customColor15
customColor16
customColor17
customColor18
customColor19
customColor20
customColor21
customColor22
defaultMessageHeaderMarginTop
defaultMessageHeaderMarginBottom
defaultMessageItemMarginTop
defaultMessageItemMarginBottom
diffAddedColor
diffChangedColor
diffRemovedColor
specialMessageHeaderMarginTop
specialMessageHeaderMarginBottom
specialMessageItemMarginTop
specialMessageItemMarginBottom
}
prism{
color
bgColor
fontFamily
fontSize
fontWeightBold
fontStyleItalic
tabSize
highlightColor
commentColor
punctuationColor
namespaceOpacity
propColor
selectorColor
operatorColor
operatorBgColor
keywordColor
functionColor
variableColor
}
emoji{
skinToneDefault
skinToneLight
skinToneMediumLight
skinToneMedium
skinToneMediumDark
skinToneDark
}
cards{
bgColor
borderRadius
boxShadow
}
pager{
textColor
textFontWeight
textFontSize
}
divider{
size
marginLeft
marginRight
borderRadius
bgColor
bgColorActive
}
yiq{
light
dark
}
chip{
maxWidth
height
}
localOverride
}
removedAssets{
name
directoryName
subDirectoryName
feature
}
errors{
__typename
... on QuiltNotFoundError {
message
fields
quiltId
}
... on ThemeNotFoundError {
message
fields
themeId
}
... on ThemeAlreadyExistsError {
message
fields
themeId
}
... on BaseThemeNotFoundError {
message
fields
themeId
}
... on InvalidGitCommitInfoHeaderError {
message
fields
}
... on CreateOrUpdateThemeFailedError {
message
fields
themeId
}
}
}
}
Variables Example
{
"theme": {
"id": "myAwesomeTheme",
"basics": {
"customerLogo": {
"imageAssetName": "",
"imageLastModified": ""
},
"browserIcon": {
"imageAssetName": "",
"imageLastModified": ""
}
},
"boxShadow": {
"sm": "0 2px 4px hsla(var(--lia-bs-gray-900-h), var(--lia-bs-gray-900-s), var(--lia-bs-gray-900-l), 0.12)"
},
"navbar": {
"linkFontStyle": "NORMAL",
"linkFontWeight": "400"
},
"typography": {
"fontWeightBase": "400",
"customFonts": [
{
"name": "Roboto Condensed",
"source": "GOOGLE",
"styles": [
{
"style": "NORMAL",
"weight": "300"
}
]
}
]
},
"link": {
"color": "#0069D4",
"hoverColor": "hsl(210.29999999999995, 100%, 37.4%)"
},
"input": {
"textAreaBorderRadius": "var(--lia-bs-border-radius-lg)"
},
"buttons": {
"fillStyle": "OUTLINED",
"borderRadiusSm": "100vw",
"borderRadius": "100vw",
"borderRadiusLg": "100vw",
"primaryTextColor": "var(--lia-bs-primary)",
"primaryTextHoverColor": "hsl(var(--lia-bs-primary-h), var(--lia-bs-primary-s), calc(var(--lia-bs-primary-l) * 0.95))",
"primaryTextActiveColor": "hsl(var(--lia-bs-primary-h), var(--lia-bs-primary-s), calc(var(--lia-bs-primary-l) * 0.9))",
"primaryBgColor": "transparent",
"primaryBgHoverColor": "hsla(var(--lia-bs-primary-h), var(--lia-bs-primary-s), var(--lia-bs-primary-l), 0.15)",
"primaryBgActiveColor": "hsla(var(--lia-bs-primary-h), var(--lia-bs-primary-s), var(--lia-bs-primary-l), 0.25)",
"primaryBorder": "1
ATLAS
Comments