diff --git a/composer.json b/composer.json index 4d123da..58be6cb 100644 --- a/composer.json +++ b/composer.json @@ -65,7 +65,6 @@ }, "extra": { "theme-json": { - "callable": "\\ItalyStrap\\ExperimentalTheme\\JsonData::getJsonData", "path-for-theme-sass": "assets/sass/" } }, diff --git a/src/Asset/Application/Root/Collection/Colors.php b/src/Asset/Application/Root/Collection/Colors.php index b28c6be..1a82240 100644 --- a/src/Asset/Application/Root/Collection/Colors.php +++ b/src/Asset/Application/Root/Collection/Colors.php @@ -13,12 +13,12 @@ class Colors { - private PresetsInterface $collection; + private PresetsInterface $presets; public function __construct( - PresetsInterface $collection + PresetsInterface $presets ) { - $this->collection = $collection; + $this->presets = $presets; } /** @@ -71,7 +71,7 @@ public function __invoke(Blueprint $blueprint): void $dangerClrPalette = new Palette('dangerColor', 'Danger color', $dangerClr); // Start by adding colors - $this->collection->add($baseClrPalette) + $this->presets->add($baseClrPalette) ->add($lightClrPalette) ->add($darkClrPalette) ->add($bodyBgClrPalette) diff --git a/src/Asset/Application/Root/Collection/Custom.php b/src/Asset/Application/Root/Collection/Custom.php index 149b955..63f7a11 100644 --- a/src/Asset/Application/Root/Collection/Custom.php +++ b/src/Asset/Application/Root/Collection/Custom.php @@ -7,17 +7,17 @@ use ItalyStrap\ExperimentalTheme\JsonData; use ItalyStrap\ThemeJsonGenerator\Application\Config\Blueprint; use ItalyStrap\ThemeJsonGenerator\Domain\Input\Settings\PresetsInterface; -use ItalyStrap\ThemeJsonGenerator\Domain\Input\Settings\Custom\CollectionAdapter; +use ItalyStrap\ThemeJsonGenerator\Domain\Input\Settings\Custom\CustomToPresets; use ItalyStrap\ThemeJsonGenerator\Domain\Input\Settings\Utilities\CalcExperimental; class Custom { - private PresetsInterface $collection; + private PresetsInterface $presets; public function __construct( - PresetsInterface $collection + PresetsInterface $presets ) { - $this->collection = $collection; + $this->presets = $presets; } public function __invoke(Blueprint $blueprint): void @@ -33,7 +33,7 @@ public function __invoke(Blueprint $blueprint): void // var_dump((string)$testCalc); // $testCalc = new Calc((string)$testDimension, '+', (string)$testDimension, '+', (string)$testDimension); - $collectionAdapter = new CollectionAdapter([ + $customToPresets = new CustomToPresets([ 'contentSize' => 'clamp(16rem, 60vw, 60rem)', 'wideSize' => 'clamp(16rem, 85vw, 70rem)', 'baseFontSize' => "1rem", @@ -54,30 +54,30 @@ public function __invoke(Blueprint $blueprint): void 'l' => '1.7' ], 'body' => [ - 'bg' => $this->collection->get(JsonData::COLOR_BASE), - 'text' => $this->collection->get(JsonData::COLOR_BODY_BG), + 'bg' => $this->presets->get(JsonData::COLOR_BASE), + 'text' => $this->presets->get(JsonData::COLOR_BODY_BG), ], 'link' => [ - 'bg' => $this->collection->get(JsonData::COLOR_BASE), - 'text' => $this->collection->get(JsonData::COLOR_BODY_BG), + 'bg' => $this->presets->get(JsonData::COLOR_BASE), + 'text' => $this->presets->get(JsonData::COLOR_BODY_BG), 'decoration' => 'underline', 'hover' => [ - 'text' => $this->collection->get(JsonData::COLOR_BODY_COLOR), + 'text' => $this->presets->get(JsonData::COLOR_BODY_COLOR), 'decoration' => 'underline', ], ], 'button' => [ - 'bg' => $this->collection->get(JsonData::COLOR_BASE), - 'text' => $this->collection->get(JsonData::COLOR_BUTTON_TEXT_HOVER), + 'bg' => $this->presets->get(JsonData::COLOR_BASE), + 'text' => $this->presets->get(JsonData::COLOR_BUTTON_TEXT_HOVER), 'borderColor' => 'transparent', 'borderRadius' => (string)(new CalcExperimental( - $this->collection->get(JsonData::FONT_SIZE_BASE)->var(), + $this->presets->get(JsonData::FONT_SIZE_BASE)->var(), '/', '3' )), 'hover' => [ - 'bg' => $this->collection->get(JsonData::COLOR_BUTTON_BG_HOVER), - 'text' => $this->collection->get(JsonData::COLOR_BUTTON_TEXT_HOVER), + 'bg' => $this->presets->get(JsonData::COLOR_BUTTON_BG_HOVER), + 'text' => $this->presets->get(JsonData::COLOR_BUTTON_TEXT_HOVER), 'borderColor' => 'transparent', ], 'padding' => [ @@ -105,8 +105,8 @@ public function __invoke(Blueprint $blueprint): void ], ]); - $this->collection->addMultiple( - $collectionAdapter->toArray() + $this->presets->addMultiple( + $customToPresets->toArray() ); // $this->collection diff --git a/src/Asset/Application/Root/Collection/Duotone.php b/src/Asset/Application/Root/Collection/Duotone.php index 6c2ed9e..dcc311e 100644 --- a/src/Asset/Application/Root/Collection/Duotone.php +++ b/src/Asset/Application/Root/Collection/Duotone.php @@ -10,40 +10,40 @@ class Duotone { - private PresetsInterface $collection; + private PresetsInterface $presets; public function __construct( - PresetsInterface $collection + PresetsInterface $presets ) { - $this->collection = $collection; + $this->presets = $presets; } public function __invoke(Blueprint $blueprint): void { - $this->collection + $this->presets ->add(new \ItalyStrap\ThemeJsonGenerator\Domain\Input\Settings\Color\Duotone( "black-to-white", "Black to White", - $this->collection->get(JsonData::COLOR_BODY_COLOR), - $this->collection->get(JsonData::COLOR_BODY_BG) + $this->presets->get(JsonData::COLOR_BODY_COLOR), + $this->presets->get(JsonData::COLOR_BODY_BG) )) ->add(new \ItalyStrap\ThemeJsonGenerator\Domain\Input\Settings\Color\Duotone( "white-to-black", "White to Black", - $this->collection->get(JsonData::COLOR_BODY_BG), - $this->collection->get(JsonData::COLOR_BODY_COLOR) + $this->presets->get(JsonData::COLOR_BODY_BG), + $this->presets->get(JsonData::COLOR_BODY_COLOR) )) ->add(new \ItalyStrap\ThemeJsonGenerator\Domain\Input\Settings\Color\Duotone( "base-to-white", "Base to White", - $this->collection->get(JsonData::COLOR_BASE), - $this->collection->get(JsonData::COLOR_BODY_BG) + $this->presets->get(JsonData::COLOR_BASE), + $this->presets->get(JsonData::COLOR_BODY_BG) )) ->add(new \ItalyStrap\ThemeJsonGenerator\Domain\Input\Settings\Color\Duotone( "base-to-black", "Base to Black", - $this->collection->get(JsonData::COLOR_BASE), - $this->collection->get(JsonData::COLOR_BODY_COLOR) + $this->presets->get(JsonData::COLOR_BASE), + $this->presets->get(JsonData::COLOR_BODY_COLOR) )); } } diff --git a/src/Asset/Application/Root/Collection/FontFamily.php b/src/Asset/Application/Root/Collection/FontFamily.php index 162d168..e688f29 100644 --- a/src/Asset/Application/Root/Collection/FontFamily.php +++ b/src/Asset/Application/Root/Collection/FontFamily.php @@ -9,17 +9,17 @@ class FontFamily { - private PresetsInterface $collection; + private PresetsInterface $presets; public function __construct( - PresetsInterface $collection + PresetsInterface $presets ) { - $this->collection = $collection; + $this->presets = $presets; } public function __invoke(Blueprint $blueprint): void { - $this->collection + $this->presets ->add(new \ItalyStrap\ThemeJsonGenerator\Domain\Input\Settings\Typography\FontFamily( 'base', 'Default font family', diff --git a/src/Asset/Application/Root/Collection/FontSizes.php b/src/Asset/Application/Root/Collection/FontSizes.php index f89a5da..9a6155a 100644 --- a/src/Asset/Application/Root/Collection/FontSizes.php +++ b/src/Asset/Application/Root/Collection/FontSizes.php @@ -10,17 +10,17 @@ class FontSizes { - private PresetsInterface $collection; + private PresetsInterface $presets; public function __construct( - PresetsInterface $collection + PresetsInterface $presets ) { - $this->collection = $collection; + $this->presets = $presets; } public function __invoke(Blueprint $blueprint): void { - $this->collection + $this->presets ->add(new FontSize('base', 'Base font size 16px', 'clamp(1rem, 2vw, 1.5rem)')) ->add(new FontSize('h1', 'Used in H1 titles', 'calc( {{fontSize.base}} * 2.8125)')) ->add(new FontSize('h2', 'Used in H2 titles', 'calc( {{fontSize.base}} * 2.1875)')) diff --git a/src/Asset/Application/Root/Collection/Gradient.php b/src/Asset/Application/Root/Collection/Gradient.php index 1fa05a7..21751e8 100644 --- a/src/Asset/Application/Root/Collection/Gradient.php +++ b/src/Asset/Application/Root/Collection/Gradient.php @@ -11,24 +11,24 @@ class Gradient { - private PresetsInterface $collection; + private PresetsInterface $presets; public function __construct( - PresetsInterface $collection + PresetsInterface $presets ) { - $this->collection = $collection; + $this->presets = $presets; } public function __invoke(Blueprint $blueprint): void { - $this->collection + $this->presets ->add(new \ItalyStrap\ThemeJsonGenerator\Domain\Input\Settings\Color\Gradient( 'light-to-dark', 'Black to white', new LinearGradient( '160deg', - $this->collection->get(JsonData::COLOR_LIGHT), - $this->collection->get(JsonData::COLOR_DARK) + $this->presets->get(JsonData::COLOR_LIGHT), + $this->presets->get(JsonData::COLOR_DARK) ) )) ->add(new \ItalyStrap\ThemeJsonGenerator\Domain\Input\Settings\Color\Gradient( @@ -36,8 +36,8 @@ public function __invoke(Blueprint $blueprint): void 'Base to white', new LinearGradient( '135deg', - $this->collection->get(JsonData::COLOR_BASE), - $this->collection->get(JsonData::COLOR_BASE_DARK) + $this->presets->get(JsonData::COLOR_BASE), + $this->presets->get(JsonData::COLOR_BASE_DARK) ) )); } diff --git a/src/Asset/Application/Root/GlobalStyle.php b/src/Asset/Application/Root/GlobalStyle.php index 5ad941f..0f8533c 100644 --- a/src/Asset/Application/Root/GlobalStyle.php +++ b/src/Asset/Application/Root/GlobalStyle.php @@ -20,20 +20,20 @@ class GlobalStyle private Typography $typography; private Spacing $spacing; private CssExperimental $css; - private PresetsInterface $collection; + private PresetsInterface $presets; public function __construct( Color $color, Typography $typography, Spacing $spacing, CssExperimental $css, - PresetsInterface $collection + PresetsInterface $presets ) { $this->color = $color; $this->typography = $typography; $this->spacing = $spacing; $this->css = $css; - $this->collection = $collection; + $this->presets = $presets; } /** @@ -64,7 +64,7 @@ public function __invoke(Blueprint $blueprint) ->textTransform('none')); $blueprint->set(SectionNames::STYLES . '.spacing', [ - 'blockGap' => $this->collection->get(JsonData::SPACER_M)->var(), + 'blockGap' => $this->presets->get(JsonData::SPACER_M)->var(), 'margin' => $this->spacing->shorthand(['0px']), 'padding' => $this->spacing->shorthand(['0px']), ]); diff --git a/src/Asset/Application/Root/TermDescription.php b/src/Asset/Application/Root/TermDescription.php index de13c6f..be13556 100644 --- a/src/Asset/Application/Root/TermDescription.php +++ b/src/Asset/Application/Root/TermDescription.php @@ -14,27 +14,18 @@ class TermDescription { - private Blueprint $blueprint; private Color $color; private Typography $typography; - private Border $border; private Spacing $spacing; - private PresetsInterface $collection; public function __construct( - Blueprint $blueprint, Color $color, Typography $typography, - Border $border, - Spacing $spacing, - PresetsInterface $collection + Spacing $spacing ) { - $this->blueprint = $blueprint; $this->color = $color; $this->typography = $typography; - $this->border = $border; $this->spacing = $spacing; - $this->collection = $collection; } public function __invoke(Blueprint $blueprint) diff --git a/src/Asset/Application/Root/Title.php b/src/Asset/Application/Root/Title.php index 5da68d5..ea296ea 100644 --- a/src/Asset/Application/Root/Title.php +++ b/src/Asset/Application/Root/Title.php @@ -11,16 +11,13 @@ class Title { - private Blueprint $blueprint; private Color $color; private Typography $typography; public function __construct( - Blueprint $blueprint, Color $color, Typography $typography ) { - $this->blueprint = $blueprint; $this->color = $color; $this->typography = $typography; } @@ -28,7 +25,7 @@ public function __construct( public function __invoke(Blueprint $blueprint): void { - $this->blueprint->setBlockStyle('core/site-title', [ + $blueprint->setBlockStyle('core/site-title', [ 'color' => $this->color ->text(JsonData::COLOR_HEADING_TEXT), 'typography' => $this->typography @@ -36,7 +33,7 @@ public function __invoke(Blueprint $blueprint): void ->fontWeight('600'), ]); - $this->blueprint->setBlockStyle('core/post-title', [ // .wp-block-post-title + $blueprint->setBlockStyle('core/post-title', [ // .wp-block-post-title 'color' => $this->color ->text(JsonData::COLOR_HEADING_TEXT), 'typography' => $this->typography @@ -55,7 +52,7 @@ public function __invoke(Blueprint $blueprint): void * * .wp-block-query-title */ - $this->blueprint->setBlockStyle('core/query-title', [ + $blueprint->setBlockStyle('core/query-title', [ 'color' => $this->color ->text(JsonData::COLOR_GRAY_400), 'typography' => $this->typography diff --git a/src/JsonData.php b/src/JsonData.php index d7e9780..8ced543 100644 --- a/src/JsonData.php +++ b/src/JsonData.php @@ -114,7 +114,7 @@ public static function getJsonData(ContainerInterface $container, PresetsInterfa (new self())($container, $collection); } - public function __invoke(ContainerInterface $container, PresetsInterface $collection): void + public function __invoke(ContainerInterface $container, PresetsInterface $presets): void { $blueprint = $container->get(Blueprint::class); $container->get(\ItalyStrap\ExperimentalTheme\Asset\Application\Root\Collection\Colors::class)($blueprint); @@ -152,8 +152,8 @@ public function __invoke(ContainerInterface $container, PresetsInterface $collec // ], 'layout' => [ - 'contentSize' => $collection->get(self::CONTENT_SIZE)->var(), - 'wideSize' => $collection->get(self::WIDE_SIZE)->var(), + 'contentSize' => $presets->get(self::CONTENT_SIZE)->var(), + 'wideSize' => $presets->get(self::WIDE_SIZE)->var(), ], ], diff --git a/styles/ice.json b/styles/ice.json index e7896bc..eb1656f 100644 --- a/styles/ice.json +++ b/styles/ice.json @@ -1,280 +1,282 @@ { - "$schema": "https://schemas.wp.org/trunk/theme.json", - "version": 2, - "title": "Ice", - "settings": { - "color": { - "gradients": [ - { - "slug": "gradient-1", - "gradient": "linear-gradient(to bottom, #cbd9e1 0%, #EBEBEF 100%)", - "name": "Vertical azure to ice" - }, - { - "slug": "gradient-2", - "gradient": "linear-gradient(to bottom, #466577 0%, #EBEBEF 100%)", - "name": "Vertical slate to ice" - }, - { - "slug": "gradient-3", - "gradient": "linear-gradient(to bottom, #37505d 0%, #EBEBEF 100%)", - "name": "Vertical ocean to ice" - }, - { - "slug": "gradient-4", - "gradient": "linear-gradient(to bottom, #1C2930 0%, #EBEBEF 100%)", - "name": "Vertical ink to ice" - }, - { - "slug": "gradient-5", - "gradient": "linear-gradient(to bottom, #37505d 0%, #466577 100%)", - "name": "Vertical ocean to slate" - }, - { - "slug": "gradient-6", - "gradient": "linear-gradient(to bottom, #1C2930 0%, #37505d 100%)", - "name": "Vertical ink to ocean" - }, - { - "slug": "gradient-7", - "gradient": "linear-gradient(to bottom, #EBEBEF 50%, #cbd9e1 50%)", - "name": "Vertical hard ice to azure" - }, - { - "slug": "gradient-8", - "gradient": "linear-gradient(to bottom, #466577 50%, #EBEBEF 50%)", - "name": "Vertical hard slate to ice" - }, - { - "slug": "gradient-9", - "gradient": "linear-gradient(to bottom, #37505d 50%, #EBEBEF 50%)", - "name": "Vertical hard ocean to ice" - }, - { - "slug": "gradient-10", - "gradient": "linear-gradient(to bottom, #1C2930 50%, #EBEBEF 50%)", - "name": "Vertical hard ink to ice" - }, - { - "slug": "gradient-11", - "gradient": "linear-gradient(to bottom, #37505d 50%, #466577 50%)", - "name": "Vertical hard ocean to slate" - }, - { - "slug": "gradient-12", - "gradient": "linear-gradient(to bottom, #1C2930 50%, #37505d 50%)", - "name": "Vertical hard ink to ocean" - } - ], - "palette": [ - { - "color": "#EBEBEF", - "name": "Base", - "slug": "base" - }, - { - "color": "#DCE0E6", - "name": "Base / Two", - "slug": "base-2" - }, - { - "color": "#1C2930", - "name": "Contrast", - "slug": "contrast" - }, - { - "color": "#37505d", - "name": "Contrast / Two", - "slug": "contrast-2" - }, - { - "color": "#96A5B2", - "name": "Contrast / Three", - "slug": "contrast-3" - } - ] - }, - "typography": { - "fontFamilies": [ - { - "fontFace": [ - { - "fontFamily": "Inter", - "fontStretch": "normal", - "fontStyle": "normal", - "fontWeight": "300 900", - "src": [ - "file:./assets/fonts/inter/Inter-VariableFont_slnt,wght.woff2" - ] - } - ], - "fontFamily": "\"Inter\", sans-serif", - "name": "Inter", - "slug": "heading" - }, - { - "fontFace": [ - { - "fontFamily": "Jost", - "fontStyle": "normal", - "fontWeight": "100 900", - "src": ["file:./assets/fonts/jost/Jost-VariableFont_wght.woff2"] - }, - { - "fontFamily": "Jost", - "fontStyle": "italic", - "fontWeight": "100 900", - "src": [ - "file:./assets/fonts/jost/Jost-Italic-VariableFont_wght.woff2" - ] - } - ], - "fontFamily": "\"Jost\", sans-serif", - "name": "Jost", - "slug": "body" - }, - { - "fontFamily": "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif", - "name": "System Sans-serif", - "slug": "system-sans-serif" - }, - { - "fontFamily": "Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", - "name": "System Serif", - "slug": "system-serif" - } - ], - "fontSizes": [ - { - "fluid": false, - "name": "Small", - "size": "1rem", - "slug": "small" - }, - { - "fluid": false, - "name": "Medium", - "size": "1.2rem", - "slug": "medium" - }, - { - "fluid": { - "min": "1.5rem", - "max": "2rem" - }, - "name": "Large", - "size": "2rem", - "slug": "large" - }, - { - "fluid": { - "min": "2rem", - "max": "2.65rem" - }, - "name": "Extra Large", - "size": "2.65rem", - "slug": "x-large" - }, - { - "fluid": { - "min": "2.65rem", - "max": "3.5rem" - }, - "name": "Extra Extra Large", - "size": "3.5rem", - "slug": "xx-large" - } - ] - } - }, - "styles": { - "blocks": { - "core/button": { - "variations": { - "outline": { - "spacing": { - "padding": { - "bottom": "calc(1rem - 1px)", - "left": "calc(2.2rem - 1px)", - "right": "calc(2.2rem - 1px)", - "top": "calc(1rem - 1px)" - } - }, - "border": { - "width": "1px" - } - } - } - }, - "core/pullquote": { - "typography": { - "fontSize": "var(--wp--preset--font-size--large)", - "fontStyle": "normal", - "fontWeight": "normal", - "lineHeight": "1.2" - } - }, - "core/quote": { - "typography": { - "fontFamily": "var(--wp--preset--font-family--heading)", - "fontSize": "var(--wp--preset--font-size--large)", - "fontStyle": "normal" - }, - "variations": { - "plain": { - "typography": { - "fontStyle": "normal", - "fontWeight": "400" - } - } - } - }, - "core/site-title": { - "typography": { - "fontWeight": "400" - } - } - }, - "elements": { - "button": { - "border": { - "radius": "4px", - "color": "var(--wp--preset--color--contrast-2)" - }, - "color": { - "background": "var(--wp--preset--color--contrast-2)", - "text": "var(--wp--preset--color--white)" - }, - "spacing": { - "padding": { - "bottom": "1rem", - "left": "2.2rem", - "right": "2.2rem", - "top": "1rem" - } - }, - "typography": { - "fontFamily": "var(--wp--preset--font-family--heading)", - "fontSize": "0.75rem", - "fontStyle": "normal", - "textTransform": "uppercase", - "letterSpacing": "0.1rem" - }, - ":hover": { - "color": { - "background": "var(--wp--preset--color--contrast)" - }, - "border": { - "color": "var(--wp--preset--color--contrast)" - } - } - }, - "heading": { - "typography": { - "fontWeight": "normal", - "letterSpacing": "0" - } - } - } - } + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 2, + "title": "Ice", + "settings": { + "color": { + "gradients": [ + { + "slug": "gradient-1", + "gradient": "linear-gradient(to bottom, #cbd9e1 0%, #EBEBEF 100%)", + "name": "Vertical azure to ice" + }, + { + "slug": "gradient-2", + "gradient": "linear-gradient(to bottom, #466577 0%, #EBEBEF 100%)", + "name": "Vertical slate to ice" + }, + { + "slug": "gradient-3", + "gradient": "linear-gradient(to bottom, #37505d 0%, #EBEBEF 100%)", + "name": "Vertical ocean to ice" + }, + { + "slug": "gradient-4", + "gradient": "linear-gradient(to bottom, #1C2930 0%, #EBEBEF 100%)", + "name": "Vertical ink to ice" + }, + { + "slug": "gradient-5", + "gradient": "linear-gradient(to bottom, #37505d 0%, #466577 100%)", + "name": "Vertical ocean to slate" + }, + { + "slug": "gradient-6", + "gradient": "linear-gradient(to bottom, #1C2930 0%, #37505d 100%)", + "name": "Vertical ink to ocean" + }, + { + "slug": "gradient-7", + "gradient": "linear-gradient(to bottom, #EBEBEF 50%, #cbd9e1 50%)", + "name": "Vertical hard ice to azure" + }, + { + "slug": "gradient-8", + "gradient": "linear-gradient(to bottom, #466577 50%, #EBEBEF 50%)", + "name": "Vertical hard slate to ice" + }, + { + "slug": "gradient-9", + "gradient": "linear-gradient(to bottom, #37505d 50%, #EBEBEF 50%)", + "name": "Vertical hard ocean to ice" + }, + { + "slug": "gradient-10", + "gradient": "linear-gradient(to bottom, #1C2930 50%, #EBEBEF 50%)", + "name": "Vertical hard ink to ice" + }, + { + "slug": "gradient-11", + "gradient": "linear-gradient(to bottom, #37505d 50%, #466577 50%)", + "name": "Vertical hard ocean to slate" + }, + { + "slug": "gradient-12", + "gradient": "linear-gradient(to bottom, #1C2930 50%, #37505d 50%)", + "name": "Vertical hard ink to ocean" + } + ], + "palette": [ + { + "color": "#EBEBEF", + "name": "Base", + "slug": "base" + }, + { + "color": "#DCE0E6", + "name": "Base / Two", + "slug": "base-2" + }, + { + "color": "#1C2930", + "name": "Contrast", + "slug": "contrast" + }, + { + "color": "#37505d", + "name": "Contrast / Two", + "slug": "contrast-2" + }, + { + "color": "#96A5B2", + "name": "Contrast / Three", + "slug": "contrast-3" + } + ] + }, + "typography": { + "fontFamilies": [ + { + "fontFace": [ + { + "fontFamily": "Inter", + "fontStretch": "normal", + "fontStyle": "normal", + "fontWeight": "300 900", + "src": [ + "file:./assets/fonts/inter/Inter-VariableFont_slnt,wght.woff2" + ] + } + ], + "fontFamily": "\"Inter\", sans-serif", + "name": "Inter", + "slug": "heading" + }, + { + "fontFace": [ + { + "fontFamily": "Jost", + "fontStyle": "normal", + "fontWeight": "100 900", + "src": [ + "file:./assets/fonts/jost/Jost-VariableFont_wght.woff2" + ] + }, + { + "fontFamily": "Jost", + "fontStyle": "italic", + "fontWeight": "100 900", + "src": [ + "file:./assets/fonts/jost/Jost-Italic-VariableFont_wght.woff2" + ] + } + ], + "fontFamily": "\"Jost\", sans-serif", + "name": "Jost", + "slug": "body" + }, + { + "fontFamily": "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif", + "name": "System Sans-serif", + "slug": "system-sans-serif" + }, + { + "fontFamily": "Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "name": "System Serif", + "slug": "system-serif" + } + ], + "fontSizes": [ + { + "fluid": false, + "name": "Small", + "size": "1rem", + "slug": "small" + }, + { + "fluid": false, + "name": "Medium", + "size": "1.2rem", + "slug": "medium" + }, + { + "fluid": { + "min": "1.5rem", + "max": "2rem" + }, + "name": "Large", + "size": "2rem", + "slug": "large" + }, + { + "fluid": { + "min": "2rem", + "max": "2.65rem" + }, + "name": "Extra Large", + "size": "2.65rem", + "slug": "x-large" + }, + { + "fluid": { + "min": "2.65rem", + "max": "3.5rem" + }, + "name": "Extra Extra Large", + "size": "3.5rem", + "slug": "xx-large" + } + ] + } + }, + "styles": { + "blocks": { + "core/button": { + "variations": { + "outline": { + "spacing": { + "padding": { + "bottom": "calc(1rem - 1px)", + "left": "calc(2.2rem - 1px)", + "right": "calc(2.2rem - 1px)", + "top": "calc(1rem - 1px)" + } + }, + "border": { + "width": "1px" + } + } + } + }, + "core/pullquote": { + "typography": { + "fontSize": "var(--wp--preset--font-size--large)", + "fontStyle": "normal", + "fontWeight": "normal", + "lineHeight": "1.2" + } + }, + "core/quote": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--heading)", + "fontSize": "var(--wp--preset--font-size--large)", + "fontStyle": "normal" + }, + "variations": { + "plain": { + "typography": { + "fontStyle": "normal", + "fontWeight": "400" + } + } + } + }, + "core/site-title": { + "typography": { + "fontWeight": "400" + } + } + }, + "elements": { + "button": { + "border": { + "radius": "4px", + "color": "var(--wp--preset--color--contrast-2)" + }, + "color": { + "background": "var(--wp--preset--color--contrast-2)", + "text": "var(--wp--preset--color--white)" + }, + "spacing": { + "padding": { + "bottom": "1rem", + "left": "2.2rem", + "right": "2.2rem", + "top": "1rem" + } + }, + "typography": { + "fontFamily": "var(--wp--preset--font-family--heading)", + "fontSize": "0.75rem", + "fontStyle": "normal", + "textTransform": "uppercase", + "letterSpacing": "0.1rem" + }, + ":hover": { + "color": { + "background": "var(--wp--preset--color--contrast)" + }, + "border": { + "color": "var(--wp--preset--color--contrast)" + } + } + }, + "heading": { + "typography": { + "fontWeight": "normal", + "letterSpacing": "0" + } + } + } + } } diff --git a/styles/ice.test.json b/styles/ice.test.json deleted file mode 100644 index eb1656f..0000000 --- a/styles/ice.test.json +++ /dev/null @@ -1,282 +0,0 @@ -{ - "$schema": "https://schemas.wp.org/trunk/theme.json", - "version": 2, - "title": "Ice", - "settings": { - "color": { - "gradients": [ - { - "slug": "gradient-1", - "gradient": "linear-gradient(to bottom, #cbd9e1 0%, #EBEBEF 100%)", - "name": "Vertical azure to ice" - }, - { - "slug": "gradient-2", - "gradient": "linear-gradient(to bottom, #466577 0%, #EBEBEF 100%)", - "name": "Vertical slate to ice" - }, - { - "slug": "gradient-3", - "gradient": "linear-gradient(to bottom, #37505d 0%, #EBEBEF 100%)", - "name": "Vertical ocean to ice" - }, - { - "slug": "gradient-4", - "gradient": "linear-gradient(to bottom, #1C2930 0%, #EBEBEF 100%)", - "name": "Vertical ink to ice" - }, - { - "slug": "gradient-5", - "gradient": "linear-gradient(to bottom, #37505d 0%, #466577 100%)", - "name": "Vertical ocean to slate" - }, - { - "slug": "gradient-6", - "gradient": "linear-gradient(to bottom, #1C2930 0%, #37505d 100%)", - "name": "Vertical ink to ocean" - }, - { - "slug": "gradient-7", - "gradient": "linear-gradient(to bottom, #EBEBEF 50%, #cbd9e1 50%)", - "name": "Vertical hard ice to azure" - }, - { - "slug": "gradient-8", - "gradient": "linear-gradient(to bottom, #466577 50%, #EBEBEF 50%)", - "name": "Vertical hard slate to ice" - }, - { - "slug": "gradient-9", - "gradient": "linear-gradient(to bottom, #37505d 50%, #EBEBEF 50%)", - "name": "Vertical hard ocean to ice" - }, - { - "slug": "gradient-10", - "gradient": "linear-gradient(to bottom, #1C2930 50%, #EBEBEF 50%)", - "name": "Vertical hard ink to ice" - }, - { - "slug": "gradient-11", - "gradient": "linear-gradient(to bottom, #37505d 50%, #466577 50%)", - "name": "Vertical hard ocean to slate" - }, - { - "slug": "gradient-12", - "gradient": "linear-gradient(to bottom, #1C2930 50%, #37505d 50%)", - "name": "Vertical hard ink to ocean" - } - ], - "palette": [ - { - "color": "#EBEBEF", - "name": "Base", - "slug": "base" - }, - { - "color": "#DCE0E6", - "name": "Base / Two", - "slug": "base-2" - }, - { - "color": "#1C2930", - "name": "Contrast", - "slug": "contrast" - }, - { - "color": "#37505d", - "name": "Contrast / Two", - "slug": "contrast-2" - }, - { - "color": "#96A5B2", - "name": "Contrast / Three", - "slug": "contrast-3" - } - ] - }, - "typography": { - "fontFamilies": [ - { - "fontFace": [ - { - "fontFamily": "Inter", - "fontStretch": "normal", - "fontStyle": "normal", - "fontWeight": "300 900", - "src": [ - "file:./assets/fonts/inter/Inter-VariableFont_slnt,wght.woff2" - ] - } - ], - "fontFamily": "\"Inter\", sans-serif", - "name": "Inter", - "slug": "heading" - }, - { - "fontFace": [ - { - "fontFamily": "Jost", - "fontStyle": "normal", - "fontWeight": "100 900", - "src": [ - "file:./assets/fonts/jost/Jost-VariableFont_wght.woff2" - ] - }, - { - "fontFamily": "Jost", - "fontStyle": "italic", - "fontWeight": "100 900", - "src": [ - "file:./assets/fonts/jost/Jost-Italic-VariableFont_wght.woff2" - ] - } - ], - "fontFamily": "\"Jost\", sans-serif", - "name": "Jost", - "slug": "body" - }, - { - "fontFamily": "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif", - "name": "System Sans-serif", - "slug": "system-sans-serif" - }, - { - "fontFamily": "Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", - "name": "System Serif", - "slug": "system-serif" - } - ], - "fontSizes": [ - { - "fluid": false, - "name": "Small", - "size": "1rem", - "slug": "small" - }, - { - "fluid": false, - "name": "Medium", - "size": "1.2rem", - "slug": "medium" - }, - { - "fluid": { - "min": "1.5rem", - "max": "2rem" - }, - "name": "Large", - "size": "2rem", - "slug": "large" - }, - { - "fluid": { - "min": "2rem", - "max": "2.65rem" - }, - "name": "Extra Large", - "size": "2.65rem", - "slug": "x-large" - }, - { - "fluid": { - "min": "2.65rem", - "max": "3.5rem" - }, - "name": "Extra Extra Large", - "size": "3.5rem", - "slug": "xx-large" - } - ] - } - }, - "styles": { - "blocks": { - "core/button": { - "variations": { - "outline": { - "spacing": { - "padding": { - "bottom": "calc(1rem - 1px)", - "left": "calc(2.2rem - 1px)", - "right": "calc(2.2rem - 1px)", - "top": "calc(1rem - 1px)" - } - }, - "border": { - "width": "1px" - } - } - } - }, - "core/pullquote": { - "typography": { - "fontSize": "var(--wp--preset--font-size--large)", - "fontStyle": "normal", - "fontWeight": "normal", - "lineHeight": "1.2" - } - }, - "core/quote": { - "typography": { - "fontFamily": "var(--wp--preset--font-family--heading)", - "fontSize": "var(--wp--preset--font-size--large)", - "fontStyle": "normal" - }, - "variations": { - "plain": { - "typography": { - "fontStyle": "normal", - "fontWeight": "400" - } - } - } - }, - "core/site-title": { - "typography": { - "fontWeight": "400" - } - } - }, - "elements": { - "button": { - "border": { - "radius": "4px", - "color": "var(--wp--preset--color--contrast-2)" - }, - "color": { - "background": "var(--wp--preset--color--contrast-2)", - "text": "var(--wp--preset--color--white)" - }, - "spacing": { - "padding": { - "bottom": "1rem", - "left": "2.2rem", - "right": "2.2rem", - "top": "1rem" - } - }, - "typography": { - "fontFamily": "var(--wp--preset--font-family--heading)", - "fontSize": "0.75rem", - "fontStyle": "normal", - "textTransform": "uppercase", - "letterSpacing": "0.1rem" - }, - ":hover": { - "color": { - "background": "var(--wp--preset--color--contrast)" - }, - "border": { - "color": "var(--wp--preset--color--contrast)" - } - } - }, - "heading": { - "typography": { - "fontWeight": "normal", - "letterSpacing": "0" - } - } - } - } -} diff --git a/styles/ice.test.json.php b/styles/ice.test.json.php deleted file mode 100644 index fe48bf6..0000000 --- a/styles/ice.test.json.php +++ /dev/null @@ -1,294 +0,0 @@ -merge([ - SectionNames::SCHEMA => 'https://schemas.wp.org/trunk/theme.json', - SectionNames::VERSION => 2, - SectionNames::TITLE => 'Ice', - SectionNames::SETTINGS => [ - 'color' => [ - 'gradients' => [ - [ - 'slug' => 'gradient-1', - 'gradient' => 'linear-gradient(to bottom, #cbd9e1 0%, #EBEBEF 100%)', - 'name' => 'Vertical azure to ice', - ], - [ - 'slug' => 'gradient-2', - 'gradient' => 'linear-gradient(to bottom, #466577 0%, #EBEBEF 100%)', - 'name' => 'Vertical slate to ice', - ], - [ - 'slug' => 'gradient-3', - 'gradient' => 'linear-gradient(to bottom, #37505d 0%, #EBEBEF 100%)', - 'name' => 'Vertical ocean to ice', - ], - [ - 'slug' => 'gradient-4', - 'gradient' => 'linear-gradient(to bottom, #1C2930 0%, #EBEBEF 100%)', - 'name' => 'Vertical ink to ice', - ], - [ - 'slug' => 'gradient-5', - 'gradient' => 'linear-gradient(to bottom, #37505d 0%, #466577 100%)', - 'name' => 'Vertical ocean to slate', - ], - [ - 'slug' => 'gradient-6', - 'gradient' => 'linear-gradient(to bottom, #1C2930 0%, #37505d 100%)', - 'name' => 'Vertical ink to ocean', - ], - [ - 'slug' => 'gradient-7', - 'gradient' => 'linear-gradient(to bottom, #EBEBEF 50%, #cbd9e1 50%)', - 'name' => 'Vertical hard ice to azure', - ], - [ - 'slug' => 'gradient-8', - 'gradient' => 'linear-gradient(to bottom, #466577 50%, #EBEBEF 50%)', - 'name' => 'Vertical hard slate to ice', - ], - [ - 'slug' => 'gradient-9', - 'gradient' => 'linear-gradient(to bottom, #37505d 50%, #EBEBEF 50%)', - 'name' => 'Vertical hard ocean to ice', - ], - [ - 'slug' => 'gradient-10', - 'gradient' => 'linear-gradient(to bottom, #1C2930 50%, #EBEBEF 50%)', - 'name' => 'Vertical hard ink to ice', - ], - [ - 'slug' => 'gradient-11', - 'gradient' => 'linear-gradient(to bottom, #37505d 50%, #466577 50%)', - 'name' => 'Vertical hard ocean to slate', - ], - [ - 'slug' => 'gradient-12', - 'gradient' => 'linear-gradient(to bottom, #1C2930 50%, #37505d 50%)', - 'name' => 'Vertical hard ink to ocean', - ], - ], - 'palette' => [ - [ - 'color' => '#EBEBEF', - 'name' => 'Base', - 'slug' => 'base', - ], - [ - 'color' => '#DCE0E6', - 'name' => 'Base / Two', - 'slug' => 'base-2', - ], - [ - 'color' => '#1C2930', - 'name' => 'Contrast', - 'slug' => 'contrast', - ], - [ - 'color' => '#37505d', - 'name' => 'Contrast / Two', - 'slug' => 'contrast-2', - ], - [ - 'color' => '#96A5B2', - 'name' => 'Contrast / Three', - 'slug' => 'contrast-3', - ], - ], - ], - 'typography' => [ - 'fontFamilies' => [ - [ - 'fontFace' => [ - [ - 'fontFamily' => 'Inter', - 'fontStretch' => 'normal', - 'fontStyle' => 'normal', - 'fontWeight' => '300 900', - 'src' => [ - 'file:./assets/fonts/inter/Inter-VariableFont_slnt,wght.woff2', - ], - ], - ], - 'fontFamily' => '"Inter", sans-serif', - 'name' => 'Inter', - 'slug' => 'heading', - ], - [ - 'fontFace' => [ - [ - 'fontFamily' => 'Jost', - 'fontStyle' => 'normal', - 'fontWeight' => '100 900', - 'src' => [ - 'file:./assets/fonts/jost/Jost-VariableFont_wght.woff2', - ], - ], - [ - 'fontFamily' => 'Jost', - 'fontStyle' => 'italic', - 'fontWeight' => '100 900', - 'src' => [ - 'file:./assets/fonts/jost/Jost-Italic-VariableFont_wght.woff2', - ], - ], - ], - 'fontFamily' => '"Jost", sans-serif', - 'name' => 'Jost', - 'slug' => 'body', - ], - [ - 'fontFamily' => '-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif', - 'name' => 'System Sans-serif', - 'slug' => 'system-sans-serif', - ], - [ - 'fontFamily' => 'Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol', - 'name' => 'System Serif', - 'slug' => 'system-serif', - ], - ], - 'fontSizes' => [ - [ - 'fluid' => false, - 'name' => 'Small', - 'size' => '1rem', - 'slug' => 'small', - ], - [ - 'fluid' => false, - 'name' => 'Medium', - 'size' => '1.2rem', - 'slug' => 'medium', - ], - [ - 'fluid' => [ - 'min' => '1.5rem', - 'max' => '2rem', - ], - 'name' => 'Large', - 'size' => '2rem', - 'slug' => 'large', - ], - [ - 'fluid' => [ - 'min' => '2rem', - 'max' => '2.65rem', - ], - 'name' => 'Extra Large', - 'size' => '2.65rem', - 'slug' => 'x-large', - ], - [ - 'fluid' => [ - 'min' => '2.65rem', - 'max' => '3.5rem', - ], - 'name' => 'Extra Extra Large', - 'size' => '3.5rem', - 'slug' => 'xx-large', - ], - ], - ], - ], - SectionNames::STYLES => [ - 'blocks' => [ - 'core/button' => [ - 'variations' => [ - 'outline' => [ - 'spacing' => [ - 'padding' => [ - 'bottom' => 'calc(1rem - 1px)', - 'left' => 'calc(2.2rem - 1px)', - 'right' => 'calc(2.2rem - 1px)', - 'top' => 'calc(1rem - 1px)', - ], - ], - 'border' => [ - 'width' => '1px', - ], - ], - ], - ], - 'core/pullquote' => [ - 'typography' => [ - 'fontSize' => 'var(--wp--preset--font-size--large)', - 'fontStyle' => 'normal', - 'fontWeight' => 'normal', - 'lineHeight' => '1.2', - ], - ], - 'core/quote' => [ - 'typography' => [ - 'fontFamily' => 'var(--wp--preset--font-family--heading)', - 'fontSize' => 'var(--wp--preset--font-size--large)', - 'fontStyle' => 'normal', - ], - 'variations' => [ - 'plain' => [ - 'typography' => [ - 'fontStyle' => 'normal', - 'fontWeight' => '400', - ], - ], - ], - ], - 'core/site-title' => [ - 'typography' => [ - 'fontWeight' => '400', - ], - ], - ], - 'elements' => [ - 'button' => [ - 'border' => [ - 'radius' => '4px', - 'color' => 'var(--wp--preset--color--contrast-2)', - ], - 'color' => [ - 'background' => 'var(--wp--preset--color--contrast-2)', - 'text' => 'var(--wp--preset--color--white)', - ], - 'spacing' => [ - 'padding' => [ - 'bottom' => '1rem', - 'left' => '2.2rem', - 'right' => '2.2rem', - 'top' => '1rem', - ], - ], - 'typography' => [ - 'fontFamily' => 'var(--wp--preset--font-family--heading)', - 'fontSize' => '0.75rem', - 'fontStyle' => 'normal', - 'textTransform' => 'uppercase', - 'letterSpacing' => '0.1rem', - ], - ':hover' => [ - 'color' => [ - 'background' => 'var(--wp--preset--color--contrast)', - ], - 'border' => [ - 'color' => 'var(--wp--preset--color--contrast)', - ], - ], - ], - 'heading' => [ - 'typography' => [ - 'fontWeight' => 'normal', - 'letterSpacing' => '0', - ], - ], - ], - ], - ]); -}; diff --git a/theme.json.php b/theme.json.php index 8d5a577..9867d65 100644 --- a/theme.json.php +++ b/theme.json.php @@ -2,862 +2,84 @@ declare(strict_types=1); +use ItalyStrap\ExperimentalTheme\Asset\Application\Root\Buttons; +use ItalyStrap\ExperimentalTheme\Asset\Application\Root\Containers; +use ItalyStrap\ExperimentalTheme\Asset\Application\Root\Elements; +use ItalyStrap\ExperimentalTheme\Asset\Application\Root\GlobalStyle; +use ItalyStrap\ExperimentalTheme\Asset\Application\Root\Heading; +use ItalyStrap\ExperimentalTheme\Asset\Application\Root\Media; +use ItalyStrap\ExperimentalTheme\Asset\Application\Root\Navigation; +use ItalyStrap\ExperimentalTheme\Asset\Application\Root\PostBody; +use ItalyStrap\ExperimentalTheme\Asset\Application\Root\PostComments; +use ItalyStrap\ExperimentalTheme\Asset\Application\Root\PostMeta; +use ItalyStrap\ExperimentalTheme\Asset\Application\Root\SiteTagline; +use ItalyStrap\ExperimentalTheme\Asset\Application\Root\SpacerSeparator; +use ItalyStrap\ExperimentalTheme\Asset\Application\Root\TermDescription; +use ItalyStrap\ExperimentalTheme\Asset\Application\Root\Title; +use ItalyStrap\ExperimentalTheme\Helper; +use ItalyStrap\ExperimentalTheme\JsonData; use ItalyStrap\ThemeJsonGenerator\Application\Config\Blueprint; use ItalyStrap\ThemeJsonGenerator\Domain\Input\SectionNames; use ItalyStrap\ThemeJsonGenerator\Domain\Input\Settings\PresetsInterface; use Psr\Container\ContainerInterface; -return static function (ContainerInterface $container, PresetsInterface $collection, Blueprint $blueprint) { +return static function (ContainerInterface $container, PresetsInterface $presets, Blueprint $blueprint) { + $container->get(\ItalyStrap\ExperimentalTheme\Asset\Application\Root\Collection\Colors::class)($blueprint); + $container->get(\ItalyStrap\ExperimentalTheme\Asset\Application\Root\Collection\Gradient::class)($blueprint); + $container->get(\ItalyStrap\ExperimentalTheme\Asset\Application\Root\Collection\Duotone::class)($blueprint); + $container->get(\ItalyStrap\ExperimentalTheme\Asset\Application\Root\Collection\FontSizes::class)($blueprint); + $container->get(\ItalyStrap\ExperimentalTheme\Asset\Application\Root\Collection\FontFamily::class)($blueprint); + $container->get(\ItalyStrap\ExperimentalTheme\Asset\Application\Root\Collection\Custom::class)($blueprint); - $blueprint->merge([ + $blueprint->merge([ SectionNames::SCHEMA => 'https://schemas.wp.org/trunk/theme.json', - SectionNames::VERSION => 2, + SectionNames::VERSION => JsonData::VERSION, SectionNames::TITLE => 'Experimental Theme', SectionNames::DESCRIPTION => 'Experimental Theme', SectionNames::SETTINGS => [ 'color' => [ - 'custom' => true, - 'link' => true, - 'palette' => [ - [ - 'slug' => 'base', - 'name' => 'Brand base color', - 'color' => 'hsla(212,73%,55%,1)', - ], - [ - 'slug' => 'light', - 'name' => 'Lighter color', - 'color' => 'hsla(0,0%,100%,1)', - ], - [ - 'slug' => 'dark', - 'name' => 'Darker color', - 'color' => 'hsla(0,0%,0%,1)', - ], - [ - 'slug' => 'bodyBg', - 'name' => 'Color for body background', - 'color' => 'hsla(0,0%,100%,1)', - ], - [ - 'slug' => 'bodyColor', - 'name' => 'Color for text', - 'color' => 'hsla(0,0%,0%,1)', - ], - [ - 'slug' => 'headingColor', - 'name' => 'Color for headings', - 'color' => 'hsla(0,0%,20%,1)', - ], - [ - 'slug' => 'linkColor', - 'name' => 'Color for links', - 'color' => 'hsla(212,73%,55%,1)', - ], - [ - 'slug' => 'buttonBgHover', - 'name' => 'Color for button background on hover', - 'color' => 'hsla(212,73%,35%,1)', - ], - [ - 'slug' => 'buttonTextHover', - 'name' => 'Color for button text on hover', - 'color' => 'hsla(0,0%,90%,1)', - ], - [ - 'slug' => 'borderColor', - 'name' => 'Color for borders', - 'color' => 'hsla(0,0%,80%,1)', - ], - [ - 'slug' => 'baseDark', - 'name' => 'Darker Brand base color', - 'color' => 'hsla(212,73%,35%,1)', - ], - [ - 'slug' => 'baseLight', - 'name' => 'Lighter Brand base color', - 'color' => 'hsla(212,73%,75%,1)', - ], - [ - 'slug' => 'baseComplementary', - 'name' => 'Brand base complementary color', - 'color' => 'hsla(604,73%,55%,1)', - ], - [ - 'slug' => 'infoColor', - 'name' => 'Info color', - 'color' => 'hsla(212,73%,55%,1)', - ], - [ - 'slug' => 'successColor', - 'name' => 'Success color', - 'color' => 'hsla(130,73%,55%,1)', - ], - [ - 'slug' => 'warningColor', - 'name' => 'Warning color', - 'color' => 'hsla(40,73%,55%,1)', - ], - [ - 'slug' => 'dangerColor', - 'name' => 'Danger color', - 'color' => 'hsla(0,73%,55%,1)', - ], - [ - 'slug' => 'base-100', - 'name' => 'Shade of Base by 10%', - 'color' => 'hsla(212,73%,45%,1)', - ], - [ - 'slug' => 'base-200', - 'name' => 'Shade of Base by 20%', - 'color' => 'hsla(212,73%,35%,1)', - ], - [ - 'slug' => 'base-300', - 'name' => 'Shade of Base by 30%', - 'color' => 'hsla(212,73%,25%,1)', - ], - [ - 'slug' => 'base-400', - 'name' => 'Shade of Base by 40%', - 'color' => 'hsla(212,73%,15%,1)', - ], - [ - 'slug' => 'base-500', - 'name' => 'Shade of Base by 50%', - 'color' => 'hsla(212,73%,5%,1)', - ], - [ - 'slug' => 'bodyColor-100', - 'name' => 'Shade of BodyColor by 10%', - 'color' => 'hsla(0,0%,10%,1)', - ], - [ - 'slug' => 'bodyColor-200', - 'name' => 'Shade of BodyColor by 20%', - 'color' => 'hsla(0,0%,20%,1)', - ], - [ - 'slug' => 'bodyColor-300', - 'name' => 'Shade of BodyColor by 30%', - 'color' => 'hsla(0,0%,30%,1)', - ], - [ - 'slug' => 'bodyColor-400', - 'name' => 'Shade of BodyColor by 40%', - 'color' => 'hsla(0,0%,40%,1)', - ], - [ - 'slug' => 'bodyColor-500', - 'name' => 'Shade of BodyColor by 50%', - 'color' => 'hsla(0,0%,50%,1)', - ], - [ - 'slug' => 'bodyColor-600', - 'name' => 'Shade of BodyColor by 60%', - 'color' => 'hsla(0,0%,60%,1)', - ], - [ - 'slug' => 'bodyColor-700', - 'name' => 'Shade of BodyColor by 70%', - 'color' => 'hsla(0,0%,70%,1)', - ], - [ - 'slug' => 'bodyColor-800', - 'name' => 'Shade of BodyColor by 80%', - 'color' => 'hsla(0,0%,80%,1)', - ], - [ - 'slug' => 'bodyColor-900', - 'name' => 'Shade of BodyColor by 90%', - 'color' => 'hsla(0,0%,90%,1)', - ], - ], - 'gradients' => [ - [ - 'slug' => 'light-to-dark', - 'name' => 'Black to white', - 'gradient' => 'linear-gradient(160deg, var(--wp--preset--color--light), var(--wp--preset--color--dark))', - ], - [ - 'slug' => 'base-to-white', - 'name' => 'Base to white', - 'gradient' => 'linear-gradient(135deg, var(--wp--preset--color--base), var(--wp--preset--color--base-dark))', - ], - ], - 'duotone' => [ - [ - 'slug' => 'black-to-white', - 'name' => 'Black to White', - 'colors' => [ - 'rgba(0,0,0,1.00)', - 'rgba(255,255,255,1.00)', - ], - ], - [ - 'slug' => 'white-to-black', - 'name' => 'White to Black', - 'colors' => [ - 'rgba(255,255,255,1.00)', - 'rgba(0,0,0,1.00)', - ], - ], - [ - 'slug' => 'base-to-white', - 'name' => 'Base to White', - 'colors' => [ - 'rgba(56,135,224,1.00)', - 'rgba(255,255,255,1.00)', - ], - ], - [ - 'slug' => 'base-to-black', - 'name' => 'Base to Black', - 'colors' => [ - 'rgba(56,135,224,1.00)', - 'rgba(0,0,0,1.00)', - ], - ], - ], + 'custom' => true, + 'link' => true, ], 'typography' => [ - 'customFontSize' => true, - 'fontSizes' => [ - [ - 'slug' => 'base', - 'name' => 'Base font size 16px', - 'size' => 'clamp(1rem, 2vw, 1.5rem)', - ], - [ - 'slug' => 'h1', - 'name' => 'Used in H1 titles', - 'size' => 'calc( var(--wp--preset--font-size--base) * 2.8125)', - ], - [ - 'slug' => 'h2', - 'name' => 'Used in H2 titles', - 'size' => 'calc( var(--wp--preset--font-size--base) * 2.1875)', - ], - [ - 'slug' => 'h3', - 'name' => 'Used in H3 titles', - 'size' => 'calc( var(--wp--preset--font-size--base) * 1.625)', - ], - [ - 'slug' => 'h4', - 'name' => 'Used in H4 titles', - 'size' => 'calc( var(--wp--preset--font-size--base) * 1.5)', - ], - [ - 'slug' => 'h5', - 'name' => 'Used in H5 titles', - 'size' => 'calc( var(--wp--preset--font-size--base) * 1.125)', - ], - [ - 'slug' => 'h6', - 'name' => 'Used in H6 titles', - 'size' => 'var(--wp--preset--font-size--base)', - ], - [ - 'slug' => 'small', - 'name' => 'Small font size', - 'size' => 'calc( var(--wp--preset--font-size--base) * 0.875)', - ], - [ - 'slug' => 'x-small', - 'name' => 'Extra Small font size', - 'size' => 'calc( var(--wp--preset--font-size--base) * 0.75)', - ], - ], - 'fontFamilies' => [ - [ - 'slug' => 'base', - 'name' => 'Default font family', - 'fontFamily' => 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"', - ], - [ - 'slug' => 'monospace', - 'name' => 'Font family for code', - 'fontFamily' => 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', - ], - ], + 'customFontSize' => true, +// 'customLineHeight' => true, ], 'spacing' => [ - 'blockGap' => true, - 'units' => [ - '%', - 'px', - 'em', - 'rem', - 'vh', - 'vw', - ], - ], - 'blocks' => [ - 'core/button' => [ - 'color' => [ - 'custom' => false, - ], - ], - 'core/navigation' => [ - 'color' => [ - 'custom' => false, - ], - ], + 'blockGap' => true, +// 'customMargin' => true, +// 'customPadding' => true, + 'units' => [ '%', 'px', 'em', 'rem', 'vh', 'vw' ] ], +// 'border' => [ +// 'customColor' => true, +// 'customRadius' => true, +// 'customStyle' => true, +// 'customWidth' => true, +// ], + 'layout' => [ - 'contentSize' => 'var(--wp--custom--content-size)', - 'wideSize' => 'var(--wp--custom--wide-size)', - ], - 'custom' => [ - 'contentSize' => 'clamp(16rem, 60vw, 60rem)', - 'wideSize' => 'clamp(16rem, 85vw, 70rem)', - 'baseFontSize' => '1rem', - 'spacer' => [ - 'base' => '1rem', - 'v' => 'calc( var(--wp--custom--spacer--base) * 4 )', - 'h' => 'calc( var(--wp--custom--spacer--base) * 4 )', - 's' => 'calc( var(--wp--custom--spacer--base) / 1.5 )', - 'm' => 'calc( var(--wp--custom--spacer--base) * 2 )', - 'l' => 'calc( var(--wp--custom--spacer--base) * 3 )', - 'xl' => 'calc( var(--wp--custom--spacer--base) * 4 )', - ], - 'lineHeight' => [ - 'base' => '1.5', - 'xs' => '1.1', - 's' => '1.3', - 'm' => 'var(--wp--custom--line-height--base)', - 'l' => '1.7', - ], - 'body' => [ - 'bg' => 'var(--wp--preset--color--base)', - 'text' => 'var(--wp--preset--color--body-bg)', - ], - 'link' => [ - 'bg' => 'var(--wp--preset--color--base)', - 'text' => 'var(--wp--preset--color--body-bg)', - 'decoration' => 'underline', - 'hover' => [ - 'text' => 'var(--wp--preset--color--body-color)', - 'decoration' => 'underline', - ], - ], - 'button' => [ - 'bg' => 'var(--wp--preset--color--base)', - 'text' => 'var(--wp--preset--color--button-text-hover)', - 'borderColor' => 'transparent', - 'borderRadius' => 'calc(var(--wp--preset--font-size--base) / 3)', - 'hover' => [ - 'bg' => 'var(--wp--preset--color--button-bg-hover)', - 'text' => 'var(--wp--preset--color--button-text-hover)', - 'borderColor' => 'transparent', - ], - 'padding' => [ - 'h' => '0.75em', - 'v' => '0.375em', - ], - ], - 'form' => [ - 'border' => [ - 'color' => '', - 'width' => '', - ], - 'input' => [ - 'color' => '', - ], - ], - 'navbar' => [ - 'min' => [ - 'height' => 'calc( var(--wp--custom--spacer--base) * 5.3125 )', - ], - ], + 'contentSize' => $presets->get(JsonData::CONTENT_SIZE)->var(), + 'wideSize' => $presets->get(JsonData::WIDE_SIZE)->var(), ], ], - SectionNames::STYLES => [ - 'color' => [ - 'background' => 'var(--wp--preset--color--body-bg)', - 'text' => 'var(--wp--preset--color--body-color)', - ], - 'typography' => [ - 'fontFamily' => 'var(--wp--preset--font-family--base)', - 'fontSize' => 'var(--wp--preset--font-size--base)', - 'fontStyle' => 'normal', - 'fontWeight' => '400', - 'letterSpacing' => 'normal', - 'lineHeight' => 'var(--wp--custom--line-height--m)', - 'textDecoration' => 'none', - 'textTransform' => 'none', - ], - 'spacing' => [ - 'blockGap' => 'var(--wp--custom--spacer--m)', - 'margin' => [ - 'top' => '0px', - 'right' => '0px', - 'bottom' => '0px', - 'left' => '0px', - ], - 'padding' => [ - 'top' => '0px', - 'right' => '0px', - 'bottom' => '0px', - 'left' => '0px', - ], - ], - 'elements' => [ - 'link' => [ - 'color' => [ - 'text' => 'var(--wp--preset--color--link-color)', - 'background' => 'transparent', - ], - ], - 'h1' => [ - 'typography' => [ - 'fontSize' => 'var(--wp--preset--font-size--h-1)', - ], - ], - 'h2' => [ - 'typography' => [ - 'fontSize' => 'var(--wp--preset--font-size--h-2)', - ], - ], - 'h3' => [ - 'typography' => [ - 'fontSize' => 'var(--wp--preset--font-size--h-3)', - ], - ], - 'h4' => [ - 'typography' => [ - 'fontSize' => 'var(--wp--preset--font-size--h-4)', - ], - ], - 'h5' => [ - 'typography' => [ - 'fontSize' => 'var(--wp--preset--font-size--h-5)', - ], - ], - 'h6' => [ - 'typography' => [ - 'fontSize' => 'var(--wp--preset--font-size--h-6)', - ], - ], - 'heading' => [ - 'typography' => [ - 'fontFamily' => 'var(--wp--preset--font-family--base)', - 'fontWeight' => '700', - 'lineHeight' => 'var(--wp--custom--line-height--xs)', - ], - 'spacing' => [ - 'margin' => [ - 'top' => 'var(--wp--custom--spacer--s)', - 'bottom' => '0', - ], - ], - 'color' => [ - 'text' => 'var(--wp--preset--color--heading-color)', - ], - ], - 'button' => [ - 'border' => [ - 'color' => 'var(--wp--custom--button--border-color)', - 'radius' => 'var(--wp--custom--button--border-radius)', - 'style' => 'solid', - 'width' => '1px', - ], - 'color' => [ - 'background' => 'var(--wp--custom--button--bg)', - 'text' => 'var(--wp--custom--button--text)', - ], - 'spacing' => [ - 'padding' => [ - 'top' => 'var(--wp--custom--button--padding--v)', - 'bottom' => 'var(--wp--custom--button--padding--v)', - 'right' => 'var(--wp--custom--button--padding--h)', - 'left' => 'var(--wp--custom--button--padding--h)', - ], - ], - 'typography' => [ - 'fontFamily' => 'var(--wp--preset--font-family--base)', - 'fontSize' => 'var(--wp--preset--font-size--base)', - 'textDecoration' => 'none', - 'lineHeight' => 'var(--wp--custom--line-height--s)', - ], - ':hover' => [ - 'color' => [ - 'background' => 'var(--wp--custom--button--hover--bg)', - 'text' => 'var(--wp--custom--button--hover--text)', - ], - 'border' => [ - 'color' => [ - 'background' => 'var(--wp--custom--button--hover--bg)', - 'text' => 'var(--wp--custom--button--hover--border-color)', - ], - ], - ], - ':focus' => [ - 'color' => [ - 'background' => 'var(--wp--custom--button--hover--bg)', - 'text' => 'var(--wp--custom--button--hover--border-color)', - ], - 'border' => [ - 'color' => [ - 'background' => 'var(--wp--custom--button--hover--bg)', - 'text' => 'var(--wp--custom--button--hover--border-color)', - ], - ], - 'outline' => [ - 'color' => 'var(--wp--preset--color--body-color-300)', - 'offset' => '1px', - 'style' => 'dotted', - 'width' => '1px', - ], - ], - ':active' => [ - 'color' => [ - 'background' => 'var(--wp--custom--button--hover--bg)', - 'text' => 'var(--wp--custom--button--hover--border-color)', - ], - 'border' => [ - 'color' => [ - 'background' => 'var(--wp--custom--button--hover--bg)', - 'text' => 'var(--wp--custom--button--hover--border-color)', - ], - ], - ], - ], - ], - 'blocks' => [ - 'core/term-description' => [ - 'typography' => [ - 'fontSize' => 'var(--wp--preset--font-size--x-small)', - ], - 'spacing' => [ - 'margin' => [ - 'top' => '0px !important', - 'right' => '0px !important', - 'bottom' => '0px !important', - 'left' => '0px !important', - ], - ], - 'color' => [ - 'text' => 'var(--wp--preset--color--body-color-400)', - ], - ], - 'core/site-logo' => [ - 'spacing' => [ - 'margin' => [ - 'top' => '0px', - 'right' => '0px', - 'bottom' => '0px', - 'left' => '0px', - ], - 'padding' => [ - 'top' => '0px', - 'right' => '0px', - 'bottom' => '0px', - 'left' => '0px', - ], - ], - ], - 'core/image' => [ - 'spacing' => [ - 'margin' => [ - 'top' => 'var(--wp--custom--spacer--m)', - 'bottom' => '0px', - ], - ], - ], - 'core/post-featured-image' => [ - 'spacing' => [ - 'margin' => [ - 'top' => 'var(--wp--custom--spacer--m)', - 'bottom' => '0', - ], - ], - ], - 'core/gallery' => [ - 'spacing' => [ - 'margin' => [ - 'top' => 'var(--wp--custom--spacer--m)', - 'bottom' => '0', - ], - ], - ], - 'core/post-content' => [ - 'color' => [ - 'text' => 'inherit', - ], - ], - 'core/post-excerpt' => [ - 'color' => [ - 'text' => 'inherit', - ], - ], - 'core/template-part' => [ - 'spacing' => [ - 'margin' => [ - 'top' => '0 !important', - 'right' => '0 !important', - 'bottom' => '0 !important', - 'left' => '0 !important', - ], - 'padding' => [ - 'top' => '0 !important', - 'right' => '0 !important', - 'bottom' => '0 !important', - 'left' => '0 !important', - ], - ], - ], - 'core/paragraph' => [ - 'spacing' => [ - 'margin' => [ - 'top' => 'var(--wp--custom--spacer--m)', - 'bottom' => '0px', - ], - ], - ], - 'core/file' => [ - 'spacing' => [ - 'margin' => [ - 'top' => 'var(--wp--custom--spacer--m)', - ], - ], - 'typography' => [ - 'fontFamily' => 'var(--wp--preset--font-family--base)', - 'fontSize' => 'var(--wp--preset--font-size--base)', - 'lineHeight' => 'var(--wp--custom--line-height--s)', - ], - 'elements' => [ - 'link' => [ - 'color' => [ - 'text' => 'var(--wp--preset--color--base)', - 'background' => 'transparent', - ], - ], - ], - ], - 'core/code' => [ - 'typography' => [ - 'fontFamily' => 'var(--wp--preset--font-family--monospace)', - ], - 'spacing' => [ - 'margin' => [ - 'top' => 'var(--wp--custom--spacer--l)', - ], - 'padding' => [ - 'top' => 'var(--wp--custom--spacer--v)', - 'right' => 'var(--wp--custom--spacer--h)', - 'bottom' => 'var(--wp--custom--spacer--v)', - 'left' => 'var(--wp--custom--spacer--h)', - ], - ], - 'border' => [ - 'color' => 'var(--wp--preset--color--border-color)', - 'radius' => '0px', - 'style' => 'solid', - 'width' => '1px', - ], - ], - 'core/quote' => [ - 'border' => [ - 'color' => 'var(--wp--preset--color--body-color)', - 'style' => 'solid', - 'width' => '0 0 0 1px', - ], - 'spacing' => [ - 'margin' => [ - 'top' => 'var(--wp--custom--spacer--l)', - ], - 'padding' => [ - 'top' => 'var(--wp--custom--spacer--h)', - ], - ], - 'typography' => [ - 'fontSize' => 'var(--wp--preset--font-size--base)', - 'fontStyle' => 'normal', - ], - ], - 'core/post-date' => [ - 'color' => [ - 'text' => 'var(--wp--preset--color--body-color-200)', - ], - 'typography' => [ - 'fontSize' => 'var(--wp--preset--font-size--x-small)', - ], - ], - 'core/post-terms' => [ - 'color' => [ - 'text' => 'var(--wp--preset--color--body-color-200)', - ], - 'typography' => [ - 'fontSize' => 'var(--wp--preset--font-size--x-small)', - ], - 'elements' => [ - 'link' => [ - 'color' => [ - 'text' => 'var(--wp--preset--color--body-color-200)', - 'background' => 'transparent', - ], - 'typography' => [ - 'textDecoration' => 'none', - ], - ], - ], - ], - 'core/post-author' => [ - 'border' => [ - 'color' => 'var(--wp--preset--color--body-color-700)', - 'style' => 'solid', - 'width' => '1px', - ], - 'color' => [ - 'text' => 'var(--wp--preset--color--body-color)', - 'background' => 'var(--wp--preset--color--body-color-900)', - ], - 'typography' => [ - 'fontSize' => 'var(--wp--preset--font-size--small)', - ], - 'spacing' => [ - 'padding' => [ - 'top' => 'var(--wp--custom--spacer--m)', - 'right' => 'var(--wp--custom--spacer--m)', - 'bottom' => 'var(--wp--custom--spacer--m)', - 'left' => 'var(--wp--custom--spacer--m)', - ], - ], - ], - 'core/post-comments' => [ - 'color' => [ - 'text' => 'var(--wp--preset--color--body-color)', - ], - 'typography' => [ - 'fontSize' => 'var(--wp--preset--font-size--base)', - 'fontWeight' => '300', - ], - ], - 'core/spacer' => [ - 'color' => [ - 'text' => 'var(--wp--preset--color--body-color)', - ], - 'border' => [ - 'color' => 'currentColor', - 'style' => 'solid', - 'width' => '0 0 0 0', - ], - ], - 'core/separator' => [ - 'border' => [ - 'color' => 'var(--wp--preset--color--body-color-700)', - 'style' => 'solid', - 'width' => '0 0 1px 0', - ], - ], - 'core/site-tagline' => [ - 'color' => [ - 'text' => 'var(--wp--preset--color--body-color)', - ], - 'typography' => [ - 'fontSize' => 'var(--wp--preset--font-size--h-3)', - 'fontWeight' => '600', - ], - ], - 'core/navigation' => [ - 'color' => [ - 'text' => 'var(--wp--preset--color--body-color)', - 'background' => 'var(--wp--preset--color--body-bg)', - ], - 'spacing' => [ - 'padding' => [ - 'top' => '1.1rem', - 'bottom' => '1.1rem', - ], - ], - 'typography' => [ - 'fontSize' => 'var(--wp--preset--font-size--x-small)', - 'fontWeight' => '400', - 'textTransform' => 'uppercase', - ], - ], - 'core/site-title' => [ - 'color' => [ - 'text' => 'var(--wp--preset--color--heading-color)', - ], - 'typography' => [ - 'fontSize' => 'var(--wp--preset--font-size--h-1)', - 'fontWeight' => '600', - ], - ], - 'core/post-title' => [ - 'color' => [ - 'text' => 'var(--wp--preset--color--heading-color)', - ], - 'typography' => [ - 'fontSize' => 'var(--wp--preset--font-size--h-1)', - ], - 'elements' => [ - 'link' => [ - 'color' => [ - 'text' => 'inherit', - 'background' => 'transparent', - ], - ], - ], - ], - 'core/query-title' => [ - 'color' => [ - 'text' => 'var(--wp--preset--color--body-color-400)', - ], - 'typography' => [ - 'fontSize' => 'var(--wp--preset--font-size--h-5)', - 'fontWeight' => '700', - ], - ], - 'core/button' => [ - 'variations' => [ - 'outline' => [ - 'border' => [ - 'color' => 'var(--wp--preset--color--base)', - 'radius' => 'var(--wp--custom--button--border-radius)', - 'style' => 'solid', - 'width' => '1px', - ], - 'color' => [ - 'background' => 'var(--wp--preset--color--body-bg)', - 'text' => 'var(--wp--preset--color--base)', - ], - 'spacing' => [ - 'padding' => [ - 'top' => 'var(--wp--custom--button--padding--v)', - 'bottom' => 'var(--wp--custom--button--padding--v)', - 'right' => 'var(--wp--custom--button--padding--h)', - 'left' => 'var(--wp--custom--button--padding--h)', - ], - ], - ], - ], - ], - ], + + /** + * ============================================ + * Styles for FSE and Front-End + * ============================================ + */ + SectionNames::STYLES => [ ], SectionNames::TEMPLATE_PARTS => [ - [ - 'name' => 'header', - 'area' => 'header', - ], - [ - 'name' => 'singular-header', - 'area' => 'header', - ], - [ - 'name' => 'footer', - 'area' => 'footer', - ], + Helper::templateParts('header', 'header'), + Helper::templateParts('singular-header', 'header'), + Helper::templateParts('footer', 'footer'), ], - SectionNames::CUSTOM_TEMPLATES => [ + SectionNames::CUSTOM_TEMPLATES => [ [ - 'name' => 'blank', - SectionNames::TITLE => 'Blank', + 'name' => 'blank', + 'title' => 'Blank', 'postTypes' => [ 'page', 'post', @@ -865,4 +87,19 @@ ], ], ]); + + $container->get(GlobalStyle::class)($blueprint); + $container->get(Elements::class)($blueprint); + $container->get(Containers::class)($blueprint); + $container->get(Heading::class)($blueprint); + $container->get(Buttons::class)($blueprint); + $container->get(Title::class)($blueprint); + $container->get(PostBody::class)($blueprint); + $container->get(PostComments::class)($blueprint); + $container->get(PostMeta::class)($blueprint); + $container->get(Navigation::class)($blueprint); + $container->get(Media::class)($blueprint); + $container->get(SpacerSeparator::class)($blueprint); + $container->get(TermDescription::class)($blueprint); + $container->get(SiteTagline::class)($blueprint); };