Theming

How the Theme Skins and their Variables are structured

theme.json

{
    skins: {
        app: {...},
        web: {
            skin: {
                "skinVariant1": {
                    "dimension": {
                        "dimensionSet1": {
                            "variable1": "value",
                            "variable2": "value"
                        }
                    }
                }
            },
            themeBase: {
                "inherits": null,
                "themeVariantBase": {
                    "id": null,
                    "name": "base",
                    "inherits": null,
                    "tone": {
                        "dimensionVariantDefault": {
                            "textDarkFront": "",
                            "textLightFront": "",
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 255, 0, 1)"
                        },
                        "dimensionVariantDefaultInverted": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantWarmer": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantWarmerInverted": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantCooler": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantCoolerInverted": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        }
                    },
                    "typography": {
                        "dimensionVariantSans": {
                            "primaryFont": "Arial",
                            "secondaryFont": "Mono"
                        },
                        "dimensionVariantClassic": {
                            "primaryFont": "Times",
                            "secondaryFont": "Mono"
                        },
                        "dimensionVariantGloba": {
                            "globalFontSize": "12px",
                            "fontSizeLg": "16px",
                            "globalFontWeight": 400,
                            "primaryFont": "Times",
                            "secondaryFont": "Mono"
                        }
                    },
                    "spacial": {
                        "dimensionVariantCompact": {
                            "boxShadow": "",
                            "padding": "",
                            "margin": ""
                        },
                        "dimensionVariantOpen": {
                            "boxShadow": "",
                            "padding": "",
                            "margin": ""
                        }
                    },
                    "motion": {
                        "dimensionVariantSmooth": {
                            "transitionDuration": "2s",
                            "transitionTimingFunction": "cubic-bezier(.694,.0482,.335,1)"
                        },
                        "dimensionVariantPlayful": {
                            "transitionDuration": "1s",
                            "transitionTimingFunction": "cubic-bezier(.694,.0482,.335,1)"
                        }
                    }
                },
                themeVariantDefault: {
                    "id": null,
                    "name": "default",
                    "inherits": null,
                    "tone": {
                        "default": {
                            "textDarkFront": "green",
                            "textLightFront": "",
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantDefault": {
                            "textDarkFront": "",
                            "textLightFront": "",
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantDefaultInverted": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantWarmer": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantWarmerInverted": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantCooler": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantCoolerInverted": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        }
                    },
                    "typography": {
                        "dimensionVariantSans": {
                            "primaryFont": "Arial",
                            "secondaryFont": "Mono"
                        },
                        "dimensionVariantClassic": {
                            "primaryFont": "Times",
                            "secondaryFont": "Mono"
                        },
                        "dimensionVariantGloba": {
                            "globalFontSize": "12px",
                            "fontSizeLg": "16px",
                            "globalFontWeight": 400,
                            "primaryFont": "Times",
                            "secondaryFont": "Mono"
                        }
                    },
                    "spacial": {
                        "dimensionVariantCompact": {
                            "boxShadow": "",
                            "padding": "",
                            "margin": ""
                        },
                        "dimensionVariantOpen": {
                            "boxShadow": "",
                            "padding": "",
                            "margin": ""
                        }
                    },
                    "motion": {
                        "dimensionVariantSmooth": {
                            "transitionDuration": "2s",
                            "transitionTimingFunction": "cubic-bezier(.694,.0482,.335,1)"
                        },
                        "dimensionVariantPlayful": {
                            "transitionDuration": "1s",
                            "transitionTimingFunction": "cubic-bezier(.694,.0482,.335,1)"
                        }
                    }
                },
                themeVariantInverted: {
                    "id": null,
                    "name": "inverted",
                    "inherits": "default",
                    "tone": {
                        "dimensionVariantDefault": {
                            "textDarkFront": "",
                            "textLightFront": "",
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantDefaultInverted": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantWarmer": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantWarmerInverted": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantCooler": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantCoolerInverted": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        }
                    },
                    "typography": {
                        "dimensionVariantSans": {
                            "primaryFont": "Arial",
                            "secondaryFont": "Mono"
                        },
                        "dimensionVariantClassic": {
                            "primaryFont": "Times",
                            "secondaryFont": "Mono"
                        },
                        "dimensionVariantGloba": {
                            "globalFontSize": "12px",
                            "fontSizeLg": "16px",
                            "globalFontWeight": 400,
                            "primaryFont": "Times",
                            "secondaryFont": "Mono"
                        }
                    },
                    "spacial": {
                        "dimensionVariantCompact": {
                            "boxShadow": "",
                            "padding": "",
                            "margin": ""
                        },
                        "dimensionVariantOpen": {
                            "boxShadow": "",
                            "padding": "",
                            "margin": ""
                        }
                    },
                    "motion": {
                        "dimensionVariantSmooth": {
                            "transitionDuration": "2s",
                            "transitionTimingFunction": "cubic-bezier(.694,.0482,.335,1)"
                        },
                        "dimensionVariantPlayful": {
                            "transitionDuration": "1s",
                            "transitionTimingFunction": "cubic-bezier(.694,.0482,.335,1)"
                        }
                    }
                },
                themeVariantDarker: {
                    "id": null,
                    "name": "darker",
                    "inherits": "base",
                    "tone": {
                        "dimensionVariantDefault": {
                            "textDarkFront": "",
                            "textLightFront": "",
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantDefaultInverted": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantWarmer": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantWarmerInverted": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantCooler": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantCoolerInverted": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        }
                    },
                    "typography": {
                        "dimensionVariantSans": {
                            "primaryFont": "Arial",
                            "secondaryFont": "Mono"
                        },
                        "dimensionVariantClassic": {
                            "primaryFont": "Times",
                            "secondaryFont": "Mono"
                        },
                        "dimensionVariantGloba": {
                            "globalFontSize": "12px",
                            "fontSizeLg": "16px",
                            "globalFontWeight": 400,
                            "primaryFont": "Times",
                            "secondaryFont": "Mono"
                        }
                    },
                    "spacial": {
                        "dimensionVariantCompact": {
                            "boxShadow": "",
                            "padding": "",
                            "margin": ""
                        },
                        "dimensionVariantOpen": {
                            "boxShadow": "",
                            "padding": "",
                            "margin": ""
                        }
                    },
                    "motion": {
                        "dimensionVariantSmooth": {
                            "transitionDuration": "2s",
                            "transitionTimingFunction": "cubic-bezier(.694,.0482,.335,1)"
                        },
                        "dimensionVariantPlayful": {
                            "transitionDuration": "1s",
                            "transitionTimingFunction": "cubic-bezier(.694,.0482,.335,1)"
                        }
                    }
                },
                themeVariantHighlight: {
                    "id": null,
                    "name": "highlight",
                    "inherits": "base",
                    "tone": {
                        "dimensionVariantDefault": {
                            "textDarkFront": "",
                            "textLightFront": "",
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantDefaultInverted": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantWarmer": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantWarmerInverted": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantCooler": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        },
                        "dimensionVariantCoolerInverted": {
                            "themeColor": "",
                            "themeColorInverted": "",
                            "primaryColor": "rgba(255, 0, 0, 1)"
                        }
                    },
                    "typography": {
                        "dimensionVariantSans": {
                            "primaryFont": "Arial",
                            "secondaryFont": "Mono"
                        },
                        "dimensionVariantClassic": {
                            "primaryFont": "Times",
                            "secondaryFont": "Mono"
                        },
                        "dimensionVariantGloba": {
                            "globalFontSize": "12px",
                            "fontSizeLg": "16px",
                            "globalFontWeight": 400,
                            "primaryFont": "Times",
                            "secondaryFont": "Mono"
                        }
                    },
                    "spacial": {
                        "dimensionVariantCompact": {
                            "boxShadow": "",
                            "padding": "",
                            "margin": ""
                        },
                        "dimensionVariantOpen": {
                            "boxShadow": "",
                            "padding": "",
                            "margin": ""
                        }
                    },
                    "motion": {
                        "dimensionVariantSmooth": {
                            "transitionDuration": "2s",
                            "transitionTimingFunction": "cubic-bezier(.694,.0482,.335,1)"
                        },
                        "dimensionVariantPlayful": {
                            "transitionDuration": "1s",
                            "transitionTimingFunction": "cubic-bezier(.694,.0482,.335,1)"
                        }
                    }
                }
            }
        }
    }
}