colorful-tones

<!-- wp:spacer {"height":"150px"} -->
<div style="height:150px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"align":"wide","layout":{"inherit":false}} -->
<div class="wp-block-group alignwide"><!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"backgroundColor":"contrast","className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color has-contrast-background-color has-background" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:paragraph {"textColor":"base","fontSize":"small"} -->
<p class="has-base-color has-text-color has-small-font-size">Contrast</p>
<!-- /wp:paragraph --></div>

colorful-tones

{
    "apiVersion": 2,
    "name": "namespace/carousel",
    "title": "Carousel",
    "category": "custom-category",
    "icon": "slides",
    "keywords": [ "carousel", "slider" ],
    "description": "Add a swipeable carousel of content.",
    "supports": {
        "html": false

colorful-tones

import { SVG, Path } from '@wordpress/components';

const arrowLeft = (
	<SVG fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		<Path
			d="m1.333 14.389 9.466-9.466c.872-.872 2.326-.872 3.198 0s.872 2.326 0 3.198l-5.589 5.621h20.677c1.26 0 2.262 1.002 2.262 2.261s-1.002 2.262-2.262 2.262h-20.677l5.589 5.589c.872.872.872 2.326 0 3.198-.452.452-1.034.678-1.615.678s-1.163-.226-1.615-.678l-9.434-9.434c-.42-.42-.678-1.002-.678-1.615s.226-1.195.678-1.615z"
			fill="currentColor"
		/>
	</SVG>
);

colorful-tones

<?php
/**
 * Customizer setup
 *
 * @package YourChildTheme
 */

namespace YourChildTheme\Customizer;

/**

colorful-tones

<!-- wp:heading {"level":1} -->
<h1>This is a heading (H1)</h1>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2>This is a heading (H2)</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>This is a heading (H3)</h3>

colorful-tones

:root {
    --my-var: 🎃;
}

.foo {
    color: var(--my-var);
}

colorful-tones

.foo {
    color: var(--my-var, red); /* Red if --my-var is not defined */
}

colorful-tones

:root {
    /* Set initial saturation and lightness values */
    --sat: 50%;
    --light: 50%;

    /* Set amount of light & saturation to change for darker & lighter color variants */
    --shader: 15%;

    /* Calculate saturation values for lighter & darker color variations */
    --satDarker: calc(var(--sat) + var(--shader));

colorful-tones

.button {
    --button-bg: var(--button-bg-base);
 
    background-color: var(--button-bg);
    color: var(--button-c-base);
    // other button default styling stuff...
    &:hover {
        --button-bg: var(--button-bg-base-hover);
    }
}

colorful-tones

.button {
    --button-bg: var(--button-bg-base);
 
    background-color: var(--button-bg);
    color: var(--button-c-base);
    // other button default styling stuff...

    &:hover {
        --button-bg: var(--button-bg-base-hover);
    }