diff --git a/assets/sass/theme.scss b/assets/sass/theme.scss index bbffcfc..873697b 100644 --- a/assets/sass/theme.scss +++ b/assets/sass/theme.scss @@ -11,6 +11,11 @@ $wp--preset--color--border-color: --wp--preset--color--border-color; $wp--preset--color--base-dark: --wp--preset--color--base-dark; $wp--preset--color--base-light: --wp--preset--color--base-light; $wp--preset--color--base-complementary: --wp--preset--color--base-complementary; +$wp--preset--color--base-100: --wp--preset--color--base-100; +$wp--preset--color--base-200: --wp--preset--color--base-200; +$wp--preset--color--base-300: --wp--preset--color--base-300; +$wp--preset--color--base-400: --wp--preset--color--base-400; +$wp--preset--color--base-500: --wp--preset--color--base-500; $wp--preset--color--body-color-100: --wp--preset--color--body-color-100; $wp--preset--color--body-color-200: --wp--preset--color--body-color-200; $wp--preset--color--body-color-300: --wp--preset--color--body-color-300; diff --git a/src/JsonData.php b/src/JsonData.php index eca4de3..4a48874 100644 --- a/src/JsonData.php +++ b/src/JsonData.php @@ -11,13 +11,14 @@ use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Color\Duotone; use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Color\Gradient; use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Color\Utilities\ColorModifier; -use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Color\Utilities\ColorInfo as UtilityColor; +use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Color\Utilities\ColorInfo; use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Color\Utilities\LinearGradient; use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Color\Utilities\ShadesGeneratorExperimental; use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Custom\CollectionAdapter; use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Custom\Item; use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Typography\FontFamily; use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Typography\FontSize; +use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Utilities\CalcExperimental; use ItalyStrap\ThemeJsonGenerator\Domain\Styles\Border; use ItalyStrap\ThemeJsonGenerator\Domain\Styles\Color; use ItalyStrap\ThemeJsonGenerator\Domain\Styles\Spacing; @@ -39,15 +40,15 @@ final class JsonData public const COLOR_BASE_DARK = Palette::CATEGORY . '.baseDark'; public const COLOR_BASE_LIGHT = Palette::CATEGORY . '.baseLight'; public const COLOR_BASE_COMPLEMENTARY = Palette::CATEGORY . '.baseComplementary'; - public const COLOR_GRAY_100 = Palette::CATEGORY . '.gray-100'; - public const COLOR_GRAY_200 = Palette::CATEGORY . '.gray-200'; - public const COLOR_GRAY_300 = Palette::CATEGORY . '.gray-300'; - public const COLOR_GRAY_400 = Palette::CATEGORY . '.gray-400'; - public const COLOR_GRAY_500 = Palette::CATEGORY . '.gray-500'; - public const COLOR_GRAY_600 = Palette::CATEGORY . '.gray-600'; - public const COLOR_GRAY_700 = Palette::CATEGORY . '.gray-700'; - public const COLOR_GRAY_800 = Palette::CATEGORY . '.gray-800'; - public const COLOR_GRAY_900 = Palette::CATEGORY . '.gray-900'; + public const COLOR_GRAY_100 = Palette::CATEGORY . '.bodyColor-100'; + public const COLOR_GRAY_200 = Palette::CATEGORY . '.bodyColor-200'; + public const COLOR_GRAY_300 = Palette::CATEGORY . '.bodyColor-300'; + public const COLOR_GRAY_400 = Palette::CATEGORY . '.bodyColor-400'; + public const COLOR_GRAY_500 = Palette::CATEGORY . '.bodyColor-500'; + public const COLOR_GRAY_600 = Palette::CATEGORY . '.bodyColor-600'; + public const COLOR_GRAY_700 = Palette::CATEGORY . '.bodyColor-700'; + public const COLOR_GRAY_800 = Palette::CATEGORY . '.bodyColor-800'; + public const COLOR_GRAY_900 = Palette::CATEGORY . '.bodyColor-900'; public const GRADIENT_LIGHT_TO_DARK = Gradient::CATEGORY . '.light-to-dark'; @@ -64,47 +65,50 @@ final class JsonData public const FONT_SIZE_SMALL = FontSize::CATEGORY . '.small'; public const FONT_SIZE_X_SMALL = FontSize::CATEGORY . '.x-small'; - public const CONTENT_SIZE = 'custom.contentSize'; - public const WIDE_SIZE = 'custom.wideSize'; - public const BASE_FONT_SIZE = 'custom.baseFontSize'; - public const SPACER_BASE = 'custom.spacer.base'; - public const SPACER_V = 'custom.spacer.v'; - public const SPACER_H = 'custom.spacer.h'; - public const SPACER_S = 'custom.spacer.s'; - public const SPACER_M = 'custom.spacer.m'; - public const SPACER_L = 'custom.spacer.l'; - public const SPACER_XL = 'custom.spacer.xl'; - public const LINE_HEIGHT_BASE = 'custom.lineHeight.base'; - public const LINE_HEIGHT_XS = 'custom.lineHeight.xs'; - public const LINE_HEIGHT_S = 'custom.lineHeight.s'; - public const LINE_HEIGHT_M = 'custom.lineHeight.m'; - public const LINE_HEIGHT_L = 'custom.lineHeight.l'; - public const BODY_BG = 'custom.body.bg'; - public const BODY_TEXT = 'custom.body.text'; - public const LINK_BG = 'custom.link.bg'; - public const LINK_TEXT = 'custom.link.text'; - public const LINK_DECORATION = 'custom.link.decoration'; - public const LINK_HOVER_TEXT = 'custom.link.hover.text'; - public const LINK_HOVER_DECORATION = 'custom.link.hover.decoration'; - public const BUTTON_BG = 'custom.button.bg'; - public const BUTTON_TEXT = 'custom.button.text'; - public const BUTTON_BORDER_COLOR = 'custom.button.borderColor'; - public const BUTTON_BORDER_RADIUS = 'custom.button.borderRadius'; - public const BUTTON_HOVER_BG = 'custom.button.hover.bg'; - public const BUTTON_HOVER_TEXT = 'custom.button.hover.text'; - public const BUTTON_HOVER_BORDER_COLOR = 'custom.button.hover.borderColor'; - public const BUTTON_PADDING = 'custom.button.padding'; - public const FORM_BORDER_COLOR = 'custom.form.borderColor'; - public const FORM_BORDER_WIDTH = 'custom.form.borderWidth'; - public const FORM_INPUT_COLOR = 'custom.form.input.color'; - public const NAVBAR_MIN_HEIGHT = 'custom.navbar.min.height'; - public const QUERY_POST_TITLE = 'custom.query.post.title'; - public const SITE_BLOCKS_MARGIN_TOP = 'custom.site-blocks.margin.top'; + public const CONTENT_SIZE = Item::CATEGORY . '.contentSize'; + public const WIDE_SIZE = Item::CATEGORY . '.wideSize'; + public const BASE_FONT_SIZE = Item::CATEGORY . '.baseFontSize'; + public const SPACER_BASE = Item::CATEGORY . '.spacer.base'; + public const SPACER_V = Item::CATEGORY . '.spacer.v'; + public const SPACER_H = Item::CATEGORY . '.spacer.h'; + public const SPACER_S = Item::CATEGORY . '.spacer.s'; + public const SPACER_M = Item::CATEGORY . '.spacer.m'; + public const SPACER_L = Item::CATEGORY . '.spacer.l'; + public const SPACER_XL = Item::CATEGORY . '.spacer.xl'; + public const LINE_HEIGHT_BASE = Item::CATEGORY . '.lineHeight.base'; + public const LINE_HEIGHT_XS = Item::CATEGORY . '.lineHeight.xs'; + public const LINE_HEIGHT_S = Item::CATEGORY . '.lineHeight.s'; + public const LINE_HEIGHT_M = Item::CATEGORY . '.lineHeight.m'; + public const LINE_HEIGHT_L = Item::CATEGORY . '.lineHeight.l'; + public const BODY_BG = Item::CATEGORY . '.body.bg'; + public const BODY_TEXT = Item::CATEGORY . '.body.text'; + public const LINK_BG = Item::CATEGORY . '.link.bg'; + public const LINK_TEXT = Item::CATEGORY . '.link.text'; + public const LINK_DECORATION = Item::CATEGORY . '.link.decoration'; + public const LINK_HOVER_TEXT = Item::CATEGORY . '.link.hover.text'; + public const LINK_HOVER_DECORATION = Item::CATEGORY . '.link.hover.decoration'; + public const BUTTON_BG = Item::CATEGORY . '.button.bg'; + public const BUTTON_TEXT = Item::CATEGORY . '.button.text'; + public const BUTTON_BORDER_COLOR = Item::CATEGORY . '.button.borderColor'; + public const BUTTON_BORDER_RADIUS = Item::CATEGORY . '.button.borderRadius'; + public const BUTTON_HOVER_BG = Item::CATEGORY . '.button.hover.bg'; + public const BUTTON_HOVER_TEXT = Item::CATEGORY . '.button.hover.text'; + public const BUTTON_HOVER_BORDER_COLOR = Item::CATEGORY . '.button.hover.borderColor'; + public const BUTTON_PADDING = Item::CATEGORY . '.button.padding'; + public const FORM_BORDER_COLOR = Item::CATEGORY . '.form.borderColor'; + public const FORM_BORDER_WIDTH = Item::CATEGORY . '.form.borderWidth'; + public const FORM_INPUT_COLOR = Item::CATEGORY . '.form.input.color'; + public const NAVBAR_MIN_HEIGHT = Item::CATEGORY . '.navbar.min.height'; + public const QUERY_POST_TITLE = Item::CATEGORY . '.query.post.title'; + public const SITE_BLOCKS_MARGIN_TOP = Item::CATEGORY . '.site-blocks.margin.top'; public static function getJsonData(): array { - return (new self())->buildJsonData(); + var_dump('getJsonData args'); + var_dump(func_get_args()); + + return (new self())->buildJsonData(new Collection()); } /** @@ -114,14 +118,14 @@ public static function getJsonData(): array */ private function registerColors(CollectionInterface $collection): void { - $light = (new UtilityColor('#ffffff'))->toHsla(); - $dark = (new UtilityColor('#000000'))->toHsla(); - $body_bg = (new UtilityColor('#ffffff'))->toHsla(); - $body_text = (new UtilityColor('#000000'))->toHsla(); + $light = (new ColorInfo('#ffffff'))->toHsla(); + $dark = (new ColorInfo('#000000'))->toHsla(); + $body_bg = (new ColorInfo('#ffffff'))->toHsla(); + $body_text = (new ColorInfo('#000000'))->toHsla(); $heading_text = (new ColorModifier($body_text))->lighten(20); - $base_clr = (new UtilityColor('#3986E0'))->toHsla(); + $base_clr = (new ColorInfo('#3986E0'))->toHsla(); - $border_color = (new UtilityColor('#cccccc'))->toHsla(); + $border_color = (new ColorInfo('#cccccc'))->toHsla(); $button_bg_hover = (new ColorModifier($base_clr))->darken(20); $button_text_hover = (new ColorModifier($body_bg))->darken(10); @@ -159,6 +163,9 @@ private function registerColors(CollectionInterface $collection): void ->add($baseDarkClrPalette) ->add($baseLightClrPalette) ->add($baseComplementaryClrPalette) + ->addMultiple( + ShadesGeneratorExperimental::fromPalette($baseClrPalette)->toArray() + ) ->addMultiple( ShadesGeneratorExperimental::fromPalette($bodyClrPalette)->toArray() ); @@ -348,10 +355,8 @@ private function registerCustom(CollectionInterface $collection): void // )); } - public function buildJsonData(): array + public function buildJsonData(CollectionInterface $collection): array { - $collection = new Collection(); - $this->registerColors($collection); $this->registerGradient($collection); $this->registerDuotone($collection); @@ -359,8 +364,6 @@ public function buildJsonData(): array $this->registerFontFamily($collection); $this->registerCustom($collection); - var_dump($collection->get('color.bodyColor-900')->var()); - return [ SectionNames::SCHEMA => 'https://schemas.wp.org/trunk/theme.json', SectionNames::VERSION => 1, @@ -434,7 +437,7 @@ public function buildJsonData(): array * ============================================ */ 'color' => (new Color($collection)) - ->background(self::COLOR_BASE) + ->background(self::COLOR_BODY_BG) ->text(self::COLOR_BODY_COLOR) ->toArray(), 'typography' => (new Typography($collection)) @@ -723,10 +726,15 @@ public function buildJsonData(): array 'core/button' => [ // .wp-block-button__link 'border' => (new Border($collection)) ->color(self::BUTTON_BORDER_COLOR) - ->radius(\sprintf( - 'calc(%s/3)', - $collection->get(self::FONT_SIZE_BASE)->var() - )) +// ->radius(\sprintf( +// 'calc(%s/3)', +// $collection->get(self::FONT_SIZE_BASE)->var() +// )) + ->radius((string)(new CalcExperimental( + $collection->get(self::FONT_SIZE_BASE)->var(), + '/', + '3' + ))) ->style('solid') ->width('2px') ->toArray(), diff --git a/theme.json b/theme.json index 43b5c06..b6e011f 100644 --- a/theme.json +++ b/theme.json @@ -71,50 +71,75 @@ "name": "Brand base complementary color", "color": "hsla(604,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%,100%,1)" + "color": "hsla(0,0%,10%,1)" }, { "slug": "bodyColor-200", "name": "Shade of BodyColor by 20%", - "color": "hsla(0,0%,100%,1)" + "color": "hsla(0,0%,20%,1)" }, { "slug": "bodyColor-300", "name": "Shade of BodyColor by 30%", - "color": "hsla(0,0%,100%,1)" + "color": "hsla(0,0%,30%,1)" }, { "slug": "bodyColor-400", "name": "Shade of BodyColor by 40%", - "color": "hsla(0,0%,100%,1)" + "color": "hsla(0,0%,40%,1)" }, { "slug": "bodyColor-500", "name": "Shade of BodyColor by 50%", - "color": "hsla(0,0%,100%,1)" + "color": "hsla(0,0%,50%,1)" }, { "slug": "bodyColor-600", "name": "Shade of BodyColor by 60%", - "color": "hsla(0,0%,100%,1)" + "color": "hsla(0,0%,60%,1)" }, { "slug": "bodyColor-700", "name": "Shade of BodyColor by 70%", - "color": "hsla(0,0%,100%,1)" + "color": "hsla(0,0%,70%,1)" }, { "slug": "bodyColor-800", "name": "Shade of BodyColor by 80%", - "color": "hsla(0,0%,100%,1)" + "color": "hsla(0,0%,80%,1)" }, { "slug": "bodyColor-900", "name": "Shade of BodyColor by 90%", - "color": "hsla(0,0%,100%,1)" + "color": "hsla(0,0%,90%,1)" } ], "gradients": [ @@ -176,27 +201,27 @@ { "slug": "h1", "name": "Used in H1 titles", - "size": "var(--wp--preset--font-size--base)" + "size": "calc( var(--wp--preset--font-size--base) * 2.8125)" }, { "slug": "h2", "name": "Used in H2 titles", - "size": "var(--wp--preset--font-size--base)" + "size": "calc( var(--wp--preset--font-size--base) * 2.1875)" }, { "slug": "h3", "name": "Used in H3 titles", - "size": "var(--wp--preset--font-size--base)" + "size": "calc( var(--wp--preset--font-size--base) * 1.625)" }, { "slug": "h4", "name": "Used in H4 titles", - "size": "var(--wp--preset--font-size--base)" + "size": "calc( var(--wp--preset--font-size--base) * 1.5)" }, { "slug": "h5", "name": "Used in H5 titles", - "size": "var(--wp--preset--font-size--base)" + "size": "calc( var(--wp--preset--font-size--base) * 1.125)" }, { "slug": "h6", @@ -206,12 +231,12 @@ { "slug": "small", "name": "Small font size", - "size": "var(--wp--preset--font-size--base)" + "size": "calc( var(--wp--preset--font-size--base) * 0.875)" }, { "slug": "x-small", "name": "Extra Small font size", - "size": "var(--wp--preset--font-size--base)" + "size": "calc( var(--wp--preset--font-size--base) * 0.75)" } ], "fontFamilies": [ @@ -247,62 +272,62 @@ "customWidth": true }, "custom": { - "contentSize": "var(--wp--custom--content-size)", - "wideSize": "var(--wp--custom--wide-size)", - "baseFontSize": "var(--wp--custom--base-font-size)", + "contentSize": "clamp(16rem, 60vw, 60rem)", + "wideSize": "clamp(16rem, 85vw, 70rem)", + "baseFontSize": "1rem", "spacer": { - "base": "var(--wp--custom--spacer--base)", - "v": "var(--wp--custom--spacer--v)", - "h": "var(--wp--custom--spacer--h)", - "s": "var(--wp--custom--spacer--s)", - "m": "var(--wp--custom--spacer--m)", - "l": "var(--wp--custom--spacer--l)", - "xl": "var(--wp--custom--spacer--xl)" + "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": "var(--wp--custom--line-height--base)", - "xs": "var(--wp--custom--line-height--xs)", - "s": "var(--wp--custom--line-height--s)", - "m": "var(--wp--custom--line-height--m)", - "l": "var(--wp--custom--line-height--l)" + "base": "1.5", + "xs": "1.1", + "s": "1.3", + "m": "var(--wp--custom--line-height--base)", + "l": "1.7" }, "body": { - "bg": "var(--wp--custom--body--bg)", - "text": "var(--wp--custom--body--text)" + "bg": "var(--wp--preset--color--base)", + "text": "var(--wp--preset--color--body-bg)" }, "link": { - "bg": "var(--wp--custom--link--bg)", - "text": "var(--wp--custom--link--text)", - "decoration": "var(--wp--custom--link--decoration)", + "bg": "var(--wp--preset--color--base)", + "text": "var(--wp--preset--color--body-bg)", + "decoration": "underline", "hover": { - "text": "var(--wp--custom--link--hover--text)", - "decoration": "var(--wp--custom--link--hover--decoration)" + "text": "var(--wp--preset--color--body-color)", + "decoration": "underline" } }, "button": { - "bg": "var(--wp--custom--button--bg)", - "text": "var(--wp--custom--button--text)", - "borderColor": "var(--wp--custom--button--border-color)", - "borderRadius": "var(--wp--custom--button--border-radius)", + "bg": "var(--wp--preset--color--base)", + "text": "var(--wp--preset--color--button-text-hover)", + "borderColor": "transparent", + "borderRadius": "calc( var(--wp--preset--font-size--base) /4)", "hover": { - "bg": "var(--wp--custom--button--hover--bg)", - "text": "var(--wp--custom--button--hover--text)", - "borderColor": "var(--wp--custom--button--hover--border-color)" + "bg": "var(--wp--preset--color--button-bg-hover)", + "text": "var(--wp--preset--color--button-text-hover)", + "borderColor": "transparent" }, - "padding": "var(--wp--custom--button--padding)" + "padding": " 0.25em 0.7em" }, "form": { "border": { - "color": "var(--wp--custom--form--border--color)", - "width": "var(--wp--custom--form--border--width)" + "color": "", + "width": "" }, "input": { - "color": "var(--wp--custom--form--input--color)" + "color": "" } }, "navbar": { "min": { - "height": "var(--wp--custom--navbar--min--height)" + "height": "calc( var(--wp--custom--spacer--base) * 5.3125 )" } } }, @@ -325,7 +350,7 @@ }, "styles": { "color": { - "background": "var(--wp--preset--color--base)", + "background": "var(--wp--preset--color--body-bg)", "text": "var(--wp--preset--color--body-color)" }, "typography": { @@ -467,7 +492,7 @@ "fontWeight": "700" }, "color": { - "text": "color.gray-400" + "text": "var(--wp--preset--color--body-color-400)" } }, "core/term-description": { @@ -483,7 +508,7 @@ } }, "color": { - "text": "color.gray-400" + "text": "var(--wp--preset--color--body-color-400)" } }, "core/site-logo": { @@ -541,7 +566,7 @@ "core/button": { "border": { "color": "var(--wp--custom--button--border-color)", - "radius": "calc(var(--wp--preset--font-size--base)/3)", + "radius": "calc(var(--wp--preset--font-size--base) / 3)", "style": "solid", "width": "2px" }, @@ -631,7 +656,7 @@ }, "core/post-date": { "color": { - "text": "color.gray-200" + "text": "var(--wp--preset--color--body-color-200)" }, "typography": { "fontSize": "var(--wp--preset--font-size--x-small)" @@ -639,7 +664,7 @@ }, "core/post-terms": { "color": { - "text": "color.gray-200" + "text": "var(--wp--preset--color--body-color-200)" }, "typography": { "fontSize": "var(--wp--preset--font-size--x-small)" @@ -647,7 +672,7 @@ "elements": { "link": { "color": { - "text": "color.gray-200", + "text": "var(--wp--preset--color--body-color-200)", "background": "transparent" }, "typography": { @@ -658,13 +683,13 @@ }, "core/post-author": { "border": { - "color": "color.gray-700", + "color": "var(--wp--preset--color--body-color-700)", "style": "solid", "width": "1px" }, "color": { "text": "var(--wp--preset--color--body-color)", - "background": "color.gray-900" + "background": "var(--wp--preset--color--body-color-900)" }, "typography": { "fontSize": "var(--wp--preset--font-size--small)" @@ -699,7 +724,7 @@ }, "core/separator": { "border": { - "color": "color.gray-700", + "color": "var(--wp--preset--color--body-color-700)", "style": "solid", "width": "0 0 1px 0" }