themes-wordpress/varia/sass/blocks/utilities/_editor.scss

/**
 * Editor Post Title
 * - Needs a special styles
 */

.editor-post-title__block .editor-post-title__input {
	color: #{map-deep-get($config-global, "color", "foreground", "default")};

	@include font-family( map-deep-get($config-heading, "font", "family") );
	font-weight: #{map-deep-get($config-heading, "font", "weight")};
	font-size: (strip-unit(map-deep-get($config-heading, "font", "size", "h2")) + 0);
	letter-spacing: #{map-deep-get($config-heading, "font", "letter-spacing", "h2")};
	line-height: #{map-deep-get($config-heading, "font", "line-height", "h2")};
}

// Gutenberg text color options
// .has-text-color {}

.wp-block .has-primary-color,
.has-primary-color {
	color: #{map-deep-get($config-global, "color", "primary", "default")};
}

.wp-block .has-secondary-color,
.has-secondary-color {
	color: #{map-deep-get($config-global, "color", "secondary", "default")};
}

.wp-block .has-foreground-color,
.has-foreground-color {
	color: #{map-deep-get($config-global, "color", "foreground", "default")};
}

.wp-block .has-foreground-light-color,
.has-foreground-light-color {
	color: #{map-deep-get($config-global, "color", "foreground", "light")};
}

.wp-block .has-foreground-dark-color,
.has-foreground-dark-color {
	color: #{map-deep-get($config-global, "color", "foreground", "dark")};
}

.wp-block .has-background-light-color,
.has-background-light-color {
	color: #{map-deep-get($config-global, "color", "background", "light")};
}

.wp-block .has-background-dark-color,
.has-background-dark-color {
	color: #{map-deep-get($config-global, "color", "background", "dark")};
}

.wp-block .has-background-color,
.has-background-color {
	color: #{map-deep-get($config-global, "color", "background", "default")};
}

@if map-has-key(map-deep-get($config-global, "color"), "tertiary") {

	.wp-block .has-tertiary-color,
	.has-tertiary-color {
		color: #{map-deep-get($config-global, "color", "tertiary", "default")};
	}
}

// Gutenberg background-color options
.has-background {

	p:not(.has-text-color),
	h1:not(.has-text-color),
	h2:not(.has-text-color),
	h3:not(.has-text-color),
	h4:not(.has-text-color),
	h5:not(.has-text-color),
	h6:not(.has-text-color) {
		color: currentColor;
	}
}

.has-primary-background-color,
.has-primary-background-color.has-background-dim {
	background-color: #{map-deep-get($config-global, "color", "primary", "default")};
	color: #{map-deep-get($config-global, "color", "background", "default")};
}

.has-primary-background-color:not(.has-text-color),
.has-primary-background-color.has-background-dim:not(.has-text-color) {
	color: #{map-deep-get($config-global, "color", "background", "default")};
}

.has-secondary-background-color,
.has-secondary-background-color.has-background-dim {
	background-color: #{map-deep-get($config-global, "color", "secondary", "default")};
}

.has-secondary-background-color:not(.has-text-color),
.has-secondary-background-color.has-background-dim:not(.has-text-color) {
	color: #{map-deep-get($config-global, "color", "background", "default")};
}

.has-background-dim,
.has-foreground-background-color,
.has-foreground-background-color.has-background-dim {
	background-color: #{map-deep-get($config-global, "color", "foreground", "default")};
}

.has-background-dim,
.has-foreground-background-color,
.has-foreground-background-color.has-background-dim {
	color: #{map-deep-get($config-global, "color", "background", "default")};
}

.has-foreground-light-background-color,
.has-foreground-light-background-color.has-background-dim {
	background-color: #{map-deep-get($config-global, "color", "foreground", "light")};
}

.has-foreground-light-background-color:not(.has-text-color),
.has-foreground-light-background-color.has-background-dim:not(.has-text-color) {
	color: #{map-deep-get($config-global, "color", "background", "default")};
}

.has-foreground-dark-background-color,
.has-foreground-dark-background-color.has-background-dim {
	background-color: #{map-deep-get($config-global, "color", "foreground", "dark")};
}

.has-foreground-dark-background-color:not(.has-text-color),
.has-foreground-dark-background-color.has-background-dim:not(.has-text-color) {
	color: #{map-deep-get($config-global, "color", "background", "default")};
}

.has-background-light-background-color,
.has-background-light-background-color.has-background-dim {
	background-color: #{map-deep-get($config-global, "color", "background", "light")};
}

.has-background-light-background-color:not(.has-text-color),
.has-background-light-background-color.has-background-dim:not(.has-text-color) {
	color: #{map-deep-get($config-global, "color", "foreground", "default")};
}

.has-background-dark-background-color,
.has-background-dark-background-color.has-background-dim {
	background-color: #{map-deep-get($config-global, "color", "background", "dark")};
}

.has-background-dark-background-color:not(.has-text-color),
.has-background-dark-background-color.has-background-dim:not(.has-text-color) {
	color: #{map-deep-get($config-global, "color", "foreground", "default")};
}

.has-background-background-color,
.has-background-background-color.has-background-dim {
	background-color: #{map-deep-get($config-global, "color", "background", "default")};
	color: #{map-deep-get($config-global, "color", "foreground", "default")};
}

.has-background-background-color:not(.has-text-color),
.has-background-background-color.has-background-dim:not(.has-text-color) {
	color: #{map-deep-get($config-global, "color", "foreground", "default")};
}

@if map-has-key(map-deep-get($config-global, "color"), "tertiary") {

	.has-tertiary-background-color,
	.has-tertiary-background-color.has-background-dim {
		background-color: #{map-deep-get($config-global, "color", "tertiary", "default")};
	}

	.has-tertiary-background-color:not(.has-text-color),
	.has-tertiary-background-color.has-background-dim:not(.has-text-color) {
		color: #{map-deep-get($config-global, "color", "foreground", "default")};
	}
}

// Gutenberg Font-size utility classes
.is-small-text,
.has-small-font-size {
	font-size: (strip-unit(map-deep-get($config-global, "font", "size", "sm")) + 0);
}

.is-regular-text,
.has-regular-font-size,
.has-normal-font-size,
.has-medium-font-size {
	font-size: (strip-unit(map-deep-get($config-global, "font", "size", "md")) + 0);
}

.is-large-text,
.has-large-font-size {
	font-size: (strip-unit(map-deep-get($config-global, "font", "size", "lg")) + 0);
	line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
}

.is-larger-text,
.has-larger-font-size,
.has-huge-font-size {
	font-size: (strip-unit(map-deep-get($config-global, "font", "size", "xl")) + 0);
	line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
}

// Drop cap
.has-drop-cap:not(:focus)::first-letter {

	@include font-family( map-deep-get($config-heading, "font", "family") );
	font-size: calc(2 * #{strip-unit(map-deep-get($config-heading, "font", "size", "h1")) + 0em});
	font-weight: #{map-deep-get($config-heading, "font", "weight")};
}

/**
 * Spacing Overrides
 */

[data-block] {
	margin-top: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
	margin-bottom: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };

	@include media(mobile) {
		margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
		margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
	}
}

@import "spacing-overrides";