// This CSS is usually generated by Global Styles. // However when a colors is not defined, the CSS for that color isn't output. // This means that when users switch between themes colors set in one theme won't be carried over to another. // By including all this CSS in every theme we ensure that these colors work across themes. // The difference between this and the Global Styles CSS is that we reference the custom variables not the preset ones. // This means that undefined colors are mapped to defined ones. .has-primary-background-color { background-color: var(--wp--custom--color--primary) !important } .has-secondary-background-color { background-color: var(--wp--custom--color--secondary) !important } .has-foreground-background-color { background-color: var(--wp--custom--color--foreground) !important } .has-background-background-color { background-color: var(--wp--custom--color--background) !important } .has-tertiary-background-color { background-color: var(--wp--custom--color--tertiary) !important } .has-primary-color { color: var(--wp--custom--color--primary) !important; } .has-secondary-color { color: var(--wp--custom--color--secondary) !important; } .has-foreground-color { color: var(--wp--custom--color--foreground) !important; } .has-background-color { color: var(--wp--custom--color--background) !important; } .has-tertiary-color { color: var(--wp--custom--color--tertiary) !important; }