diff --git a/CHANGELOG.md b/CHANGELOG.md index 4182c5e2..13175903 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). Each changelog entry gets prefixed with the category of the item (Added, Changed, Depreciated, Removed, Fixed, Security). +## [2024.08] +- Updated: Moose 2.0; See specific updates in the [Github PR here](https://github.com/moderntribe/moose/pull/152). Design requirements in the [Jira ticket here](https://moderntribe.atlassian.net/browse/MOOSE-99). + ## [2024.07] - Chore: WP version to 6.6.1 - Chore: Package updates for composer & NPM, including plugins: limit-login-attempts-reloaded (2.26.11 => 2.26.12), seo-by-rank-math (1.0.221 => 1.0.224), advanced-custom-fields-pro (6.3.2.1 => 6.3.4), user-switching (1.7.3 => 1.8.0). diff --git a/wp-content/plugins/core/src/Blocks/Blocks_Definer.php b/wp-content/plugins/core/src/Blocks/Blocks_Definer.php index 748c22f6..df6e5c00 100644 --- a/wp-content/plugins/core/src/Blocks/Blocks_Definer.php +++ b/wp-content/plugins/core/src/Blocks/Blocks_Definer.php @@ -12,10 +12,8 @@ use Tribe\Theme\blocks\core\column\Column; use Tribe\Theme\blocks\core\columns\Columns; use Tribe\Theme\blocks\core\embed\Embed; -use Tribe\Theme\blocks\core\heading\Heading; use Tribe\Theme\blocks\core\image\Image; use Tribe\Theme\blocks\core\lists\Lists; -use Tribe\Theme\blocks\core\paragraph\Paragraph; use Tribe\Theme\blocks\core\postauthorname\Post_Author_Name; use Tribe\Theme\blocks\core\posttemplate\Post_Template; use Tribe\Theme\blocks\core\postterms\Post_Terms; @@ -25,7 +23,6 @@ use Tribe\Theme\blocks\core\quote\Quote; use Tribe\Theme\blocks\core\search\Search; use Tribe\Theme\blocks\core\separator\Separator; -use Tribe\Theme\blocks\core\spacer\Spacer; use Tribe\Theme\blocks\core\table\Table; use Tribe\Theme\blocks\core\video\Video; use Tribe\Theme\blocks\outermost\socialsharing\Social_Sharing; @@ -50,10 +47,8 @@ public function define(): array { DI\get( Column::class ), DI\get( Columns::class ), DI\get( Embed::class ), - DI\get( Heading::class ), DI\get( Image::class ), DI\get( Lists::class ), - DI\get( Paragraph::class ), DI\get( Post_Author_Name::class ), DI\get( Post_Template::class ), DI\get( Post_Terms::class ), @@ -63,7 +58,6 @@ public function define(): array { DI\get( Quote::class ), DI\get( Search::class ), DI\get( Separator::class ), - DI\get( Spacer::class ), DI\get( Table::class ), DI\get( Video::class ), DI\get( Social_Sharing::class ), diff --git a/wp-content/themes/core/assets/fonts/Roboto-Bold.woff b/wp-content/themes/core/assets/fonts/Roboto-Bold.woff deleted file mode 100644 index 8d749882..00000000 Binary files a/wp-content/themes/core/assets/fonts/Roboto-Bold.woff and /dev/null differ diff --git a/wp-content/themes/core/assets/fonts/Roboto-Bold.woff2 b/wp-content/themes/core/assets/fonts/Roboto-Bold.woff2 deleted file mode 100644 index 3f850667..00000000 Binary files a/wp-content/themes/core/assets/fonts/Roboto-Bold.woff2 and /dev/null differ diff --git a/wp-content/themes/core/assets/fonts/Roboto-BoldItalic.woff b/wp-content/themes/core/assets/fonts/Roboto-BoldItalic.woff deleted file mode 100644 index 27b5be84..00000000 Binary files a/wp-content/themes/core/assets/fonts/Roboto-BoldItalic.woff and /dev/null differ diff --git a/wp-content/themes/core/assets/fonts/Roboto-BoldItalic.woff2 b/wp-content/themes/core/assets/fonts/Roboto-BoldItalic.woff2 deleted file mode 100644 index 4d2414f3..00000000 Binary files a/wp-content/themes/core/assets/fonts/Roboto-BoldItalic.woff2 and /dev/null differ diff --git a/wp-content/themes/core/assets/fonts/Roboto-Italic.woff b/wp-content/themes/core/assets/fonts/Roboto-Italic.woff deleted file mode 100644 index 0124cca0..00000000 Binary files a/wp-content/themes/core/assets/fonts/Roboto-Italic.woff and /dev/null differ diff --git a/wp-content/themes/core/assets/fonts/Roboto-Italic.woff2 b/wp-content/themes/core/assets/fonts/Roboto-Italic.woff2 deleted file mode 100644 index 75af4b94..00000000 Binary files a/wp-content/themes/core/assets/fonts/Roboto-Italic.woff2 and /dev/null differ diff --git a/wp-content/themes/core/assets/fonts/Roboto-Regular.woff b/wp-content/themes/core/assets/fonts/Roboto-Regular.woff deleted file mode 100644 index 558a6e1f..00000000 Binary files a/wp-content/themes/core/assets/fonts/Roboto-Regular.woff and /dev/null differ diff --git a/wp-content/themes/core/assets/fonts/Roboto-Regular.woff2 b/wp-content/themes/core/assets/fonts/Roboto-Regular.woff2 deleted file mode 100644 index 730399ba..00000000 Binary files a/wp-content/themes/core/assets/fonts/Roboto-Regular.woff2 and /dev/null differ diff --git a/wp-content/themes/core/assets/fonts/inter-tight-v7-latin-700.woff2 b/wp-content/themes/core/assets/fonts/inter-tight-v7-latin-700.woff2 new file mode 100644 index 00000000..ba0b2938 Binary files /dev/null and b/wp-content/themes/core/assets/fonts/inter-tight-v7-latin-700.woff2 differ diff --git a/wp-content/themes/core/assets/fonts/inter-tight-v7-latin-700italic.woff2 b/wp-content/themes/core/assets/fonts/inter-tight-v7-latin-700italic.woff2 new file mode 100644 index 00000000..8ea3d1ed Binary files /dev/null and b/wp-content/themes/core/assets/fonts/inter-tight-v7-latin-700italic.woff2 differ diff --git a/wp-content/themes/core/assets/fonts/inter-tight-v7-latin-italic.woff2 b/wp-content/themes/core/assets/fonts/inter-tight-v7-latin-italic.woff2 new file mode 100644 index 00000000..bee95b75 Binary files /dev/null and b/wp-content/themes/core/assets/fonts/inter-tight-v7-latin-italic.woff2 differ diff --git a/wp-content/themes/core/assets/fonts/inter-tight-v7-latin-regular.woff2 b/wp-content/themes/core/assets/fonts/inter-tight-v7-latin-regular.woff2 new file mode 100644 index 00000000..308f3c02 Binary files /dev/null and b/wp-content/themes/core/assets/fonts/inter-tight-v7-latin-regular.woff2 differ diff --git a/wp-content/themes/core/assets/pcss/_utilities.pcss b/wp-content/themes/core/assets/pcss/_utilities.pcss index 4d6dcc9f..a0bd3642 100644 --- a/wp-content/themes/core/assets/pcss/_utilities.pcss +++ b/wp-content/themes/core/assets/pcss/_utilities.pcss @@ -7,9 +7,6 @@ * * ------------------------------------------------------------------------- */ -/* Color */ -@import "color/_utilities.pcss"; - /* Spacing */ @import "spacing/_utilities.pcss"; diff --git a/wp-content/themes/core/assets/pcss/actions/_mixins.pcss b/wp-content/themes/core/assets/pcss/actions/_mixins.pcss index e8601855..16717414 100644 --- a/wp-content/themes/core/assets/pcss/actions/_mixins.pcss +++ b/wp-content/themes/core/assets/pcss/actions/_mixins.pcss @@ -4,6 +4,27 @@ * * ------------------------------------------------------------------------- */ +/* ------------------------------------------------------------------------- + * Focus Visible + * Box-shadow is required to display double border in all browsers + * ------------------------------------------------------------------------- */ + +@define-mixin focus-visible { + box-shadow: 0 0 0 3px var(--color-focus-contrast-dark), 0 0 0 5px var(--color-focus-contrast-light); + outline: 0; +} + +/* ------------------------------------------------------------------------- + * Inline Text - Focus Visible + * Inline text links that wrap lines look better w/ outline vs box-shadow + * ------------------------------------------------------------------------- */ + +@define-mixin focus-visible-inline-text { + box-shadow: none; + outline: 2px solid currentcolor; + outline-offset: 2px; +} + /* ------------------------------------------------------------------------- * Inline Text Links * ------------------------------------------------------------------------- */ @@ -26,4 +47,9 @@ color: var(--themed-link-hover-text-color); text-decoration-color: currentcolor; } + + &:focus-visible { + + @mixin focus-visible-inline-text; + } } diff --git a/wp-content/themes/core/assets/pcss/actions/_variables.pcss b/wp-content/themes/core/assets/pcss/actions/_variables.pcss index af61401d..26f371d8 100644 --- a/wp-content/themes/core/assets/pcss/actions/_variables.pcss +++ b/wp-content/themes/core/assets/pcss/actions/_variables.pcss @@ -13,7 +13,14 @@ * ----------------------------------------------------------------------- */ --themed-link-text-color: var(--color-black); - --themed-link-hover-text-color: var(--color-royal-blue); + --themed-link-hover-text-color: var(--color-blue); + + /* ----------------------------------------------------------------------- + * Focus + * ----------------------------------------------------------------------- */ + + --color-focus-contrast-light: var(--color-black); /* outer border */ + --color-focus-contrast-dark: var(--color-white); /* inner border */ } /* ------------------------------------------------------------------------- @@ -22,7 +29,19 @@ * * ------------------------------------------------------------------------- */ -.has-jacksons-purple-background-color { +.wp-block-group.is-style-dark { + + /* ----------------------------------------------------------------------- + * Themed Color Properties + * ----------------------------------------------------------------------- */ + --themed-link-text-color: var(--color-white); - --themed-link-hover-text-color: var(--color-royal-blue); + --themed-link-hover-text-color: var(--color-neutral-10); + + /* ----------------------------------------------------------------------- + * Focus + * ----------------------------------------------------------------------- */ + + --color-focus-contrast-light: var(--color-white); /* outer border */ + --color-focus-contrast-dark: var(--color-black); /* inner border */ } diff --git a/wp-content/themes/core/assets/pcss/color/_utilities.pcss b/wp-content/themes/core/assets/pcss/color/_utilities.pcss deleted file mode 100644 index 738eb8d3..00000000 --- a/wp-content/themes/core/assets/pcss/color/_utilities.pcss +++ /dev/null @@ -1,11 +0,0 @@ -/* ------------------------------------------------------------------------- - * - * Utility Classes: Color - * - * ------------------------------------------------------------------------- */ - -/* ------------------------------------------------------------------------- - * - * TODO: Color Theme classes - * - * ------------------------------------------------------------------------- */ diff --git a/wp-content/themes/core/assets/pcss/color/_variables.pcss b/wp-content/themes/core/assets/pcss/color/_variables.pcss index 45738eec..1f395276 100644 --- a/wp-content/themes/core/assets/pcss/color/_variables.pcss +++ b/wp-content/themes/core/assets/pcss/color/_variables.pcss @@ -13,69 +13,71 @@ * Color Naming Site: https://chir.ag/projects/name-that-color/ * ----------------------------------------------------------------------- */ - --color-royal-blue: var(--wp--preset--color--royal-blue); - --color-jacksons-purple: var(--wp--preset--color--jacksons-purple); + --color-blue: var(--wp--preset--color--blue, #3050e5); + --color-dark-blue: #2238a0; /* ----------------------------------------------------------------------- * Neutral: Grey * ----------------------------------------------------------------------- */ - --color-neutral-10: var(--wp--preset--color--neutral-10); - --color-neutral-20: var(--wp--preset--color--neutral-20); - --color-neutral-30: var(--wp--preset--color--neutral-30); - --color-neutral-40: var(--wp--preset--color--neutral-40); - --color-neutral-50: var(--wp--preset--color--neutral-50); - --color-neutral-60: var(--wp--preset--color--neutral-60); - --color-neutral-70: var(--wp--preset--color--neutral-70); - --color-neutral-80: var(--wp--preset--color--neutral-80); - --color-neutral-90: var(--wp--preset--color--neutral-90); + --color-neutral-10: var(--wp--preset--color--neutral-10, #f5f5f5); + --color-neutral-20: #e8e8e8; + --color-neutral-30: #d1d1d1; + --color-neutral-40: #a3a3a3; + --color-neutral-50: var(--wp--preset--color--neutral-50, #767676); + --color-neutral-60: #5d5d5d; + --color-neutral-70: #464646; + --color-neutral-80: #2f2f2f; + --color-neutral-90: #1f1f1f; /* ----------------------------------------------------------------------- * Whites * ----------------------------------------------------------------------- */ - --color-white: var(--wp--preset--color--white); + --color-white: var(--wp--preset--color--base-white, #fff); /* ----------------------------------------------------------------------- * Blacks * ----------------------------------------------------------------------- */ - --color-black: var(--wp--preset--color--black); + --color-black: var(--wp--preset--color--base-black, #000); /* ----------------------------------------------------------------------- * Text * ----------------------------------------------------------------------- */ - --color-text: var(--wp--preset--color--base-black); + --color-text: var(--color-black); /* ----------------------------------------------------------------------- * Borders * ----------------------------------------------------------------------- */ - --color-border: var(--wp--preset--color--neutral-40); + --color-border: var(--color-neutral-40); /* ----------------------------------------------------------------------- - * Semantic + * Selection Highlight Color + * Use https://www.fffuel.co/cccolor/ to generate a hexa value based on + * the RGBA value from Figma * ----------------------------------------------------------------------- */ - --color-alert-success: var(--wp--preset--color--success); - --color-alert-error: var(--wp--preset--color--error); - --color-alert-warning: var(--wp--preset--color--warning); + --color-selection-highlight: #3050e533; /* ----------------------------------------------------------------------- - * Social + * Semantic * ----------------------------------------------------------------------- */ - --color-facebook: #3b5998; - --color-linkedin: #0077b5; - --color-outlook: #0072c6; - --color-pinterest: #bd081c; - --color-twitter: #0084b4; + --color-alert-success: #84bd00; + --color-alert-error: #df3a3a; + --color-alert-warning: #f1c400; /* ----------------------------------------------------------------------- * Box Shadows * ----------------------------------------------------------------------- */ - --box-shadow-default: var(--wp--preset--shadow--default); - --box-shadow-hover: var(--wp--preset--shadow--hover); + --box-shadow-10: var(--wp--preset--shadow--10); + --box-shadow-20: var(--wp--preset--shadow--20); + --box-shadow-30: var(--wp--preset--shadow--30); + --box-shadow-40: var(--wp--preset--shadow--40); + --box-shadow-50: var(--wp--preset--shadow--50); + --box-shadow-60: var(--wp--preset--shadow--60); } diff --git a/wp-content/themes/core/assets/pcss/global/_mixins.pcss b/wp-content/themes/core/assets/pcss/global/_mixins.pcss deleted file mode 100644 index d99c5ab5..00000000 --- a/wp-content/themes/core/assets/pcss/global/_mixins.pcss +++ /dev/null @@ -1,20 +0,0 @@ -/* ------------------------------------------------------------------------- - * - * Mixins: Global - * - * Limit mixins as much as possible to reduce global CSS size. - * - * ------------------------------------------------------------------------- */ - -/* Box-shadow is required to display double border in all browsers */ -@define-mixin focus-visible { - box-shadow: 0 0 0 3px var(--color-focus-contrast-dark), 0 0 0 5px var(--color-focus-contrast-light); - outline: 0; -} - -/* Inline text links that wrap lines look better w/ outline vs box-shadow */ -@define-mixin focus-visible-inline-text { - box-shadow: none; - outline: 2px solid currentcolor; - outline-offset: 2px; -} diff --git a/wp-content/themes/core/assets/pcss/global/_variables.pcss b/wp-content/themes/core/assets/pcss/global/_variables.pcss index 64580c5d..4f17b505 100644 --- a/wp-content/themes/core/assets/pcss/global/_variables.pcss +++ b/wp-content/themes/core/assets/pcss/global/_variables.pcss @@ -7,9 +7,11 @@ :root { /* ----------------------------------------------------------------------- - * Focus + * Border Radius * ----------------------------------------------------------------------- */ - --color-focus-contrast-light: var(--color-black); /* outer border */ - --color-focus-contrast-dark: var(--color-white); /* inner border */ + --border-radius-s: 4px; + --border-radius-m: 8px; + --border-radius-l: 16px; + --border-radius-full: 9999px; } diff --git a/wp-content/themes/core/assets/pcss/global/stacking-order.pcss b/wp-content/themes/core/assets/pcss/global/stacking-order.pcss deleted file mode 100644 index b89ef094..00000000 --- a/wp-content/themes/core/assets/pcss/global/stacking-order.pcss +++ /dev/null @@ -1,14 +0,0 @@ -:root { - --tribe-stacking-order: 0; -} - -/** - * need to target .is-not-stacked-on-mobile to make sure - * stacking order actually makes sense - */ -.wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column.tribe-has-stacking-order { - - @media (--mq-wp-small-max) { - order: var(--tribe-stacking-order); - } -} diff --git a/wp-content/themes/core/assets/pcss/icons/_mixins.pcss b/wp-content/themes/core/assets/pcss/icons/_mixins.pcss deleted file mode 100644 index 7d903963..00000000 --- a/wp-content/themes/core/assets/pcss/icons/_mixins.pcss +++ /dev/null @@ -1,16 +0,0 @@ -/* ------------------------------------------------------------------------- - * - * Mixins: Icons - * - * Limit mixins as much as possible to reduce global CSS size. - * - * ------------------------------------------------------------------------- */ - -/* ------------------------------------------------------------------------- - * SVG Icon - * ------------------------------------------------------------------------- */ - -@define-mixin svg-icon { - background-size: contain; - background-repeat: no-repeat; -} diff --git a/wp-content/themes/core/assets/pcss/icons/_variables.pcss b/wp-content/themes/core/assets/pcss/icons/_variables.pcss index 5dd4b6a2..ab27caed 100644 --- a/wp-content/themes/core/assets/pcss/icons/_variables.pcss +++ b/wp-content/themes/core/assets/pcss/icons/_variables.pcss @@ -10,40 +10,15 @@ * * ------------------------------------------------------------------------- */ -@svg-load chevron-right-white url(chevron-right.svg) { - fill: #fff; -} - -@svg-load chevron-right-black url(chevron-right.svg) { - fill: #000; -} - -@svg-load chevron-right-primary url(chevron-right.svg) { - fill: #3050e5; -} - -@svg-load chevron-left-white url(chevron-left.svg) { - fill: #fff; -} - -@svg-load chevron-left-black url(chevron-left.svg) { - fill: #000; -} - -@svg-load chevron-left-primary url(chevron-left.svg) { - fill: #3050e5; -} +@svg-load chevron-right url(chevron-right.svg); +@svg-load chevron-left url(chevron-left.svg); @svg-load list-bullet url(list-bullet.svg) { fill: currentcolor; } :root { - --icon-chevron-right-white: svg-inline(chevron-right-white); - --icon-chevron-right-black: svg-inline(chevron-right-black); - --icon-chevron-right-primary: svg-inline(chevron-right-primary); - --icon-chevron-left-white: svg-inline(chevron-left-white); - --icon-chevron-left-black: svg-inline(chevron-left-black); - --icon-chevron-left-primary: svg-inline(chevron-left-primary); + --icon-chevron-right: svg-inline(chevron-right); + --icon-chevron-left: svg-inline(chevron-left); --icon-list-bullet: svg-inline(list-bullet); } diff --git a/wp-content/themes/core/assets/pcss/media-queries/_variables.pcss b/wp-content/themes/core/assets/pcss/media-queries/_variables.pcss index ce857d1b..f0960b11 100644 --- a/wp-content/themes/core/assets/pcss/media-queries/_variables.pcss +++ b/wp-content/themes/core/assets/pcss/media-queries/_variables.pcss @@ -7,24 +7,28 @@ * * ------------------------------------------------------------------------- */ -@custom-media --viewport-xxsmall (min-width: 320px); -@custom-media --viewport-xsmall (min-width: 500px); -@custom-media --viewport-small (min-width: 600px); -@custom-media --viewport-small-max (max-width: 767px); -@custom-media --viewport-medium (min-width: 768px); -@custom-media --viewport-wpadmin (min-width: 783px); -@custom-media --viewport-medium-max (max-width: 959px); -@custom-media --viewport-full (min-width: 960px); -@custom-media --viewport-large (min-width: 1200px); -@custom-media --viewport-xlarge (min-width: 1260px); -@custom-media --viewport-retina (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx); +@custom-media --mq-mobile (min-width: 320px); +@custom-media --mq-tablet (min-width: 782px); +@custom-media --mq-desktop (min-width: 992px); +@custom-media --mq-large (min-width: 1280px); +@custom-media --mq-max (min-width: 1920px); -/* -------------------------------------------------- +/* ------------------------------------------------------------------------- + * Page State Media Queries + * + * Hover media query: + * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover + * - used to apply styles when the device accepts hover effects + * ------------------------------------------------------------------------- */ + +@custom-media --has-hover (hover: hover); + +/* ------------------------------------------------------------------------- * WP Breakpoints * https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/_breakpoints.scss - * -------------------------------------------------- */ + * ------------------------------------------------------------------------- */ @custom-media --mq-wp-mobile-max (max-width: 600px); @custom-media --mq-wp-small (min-width: 601px); @custom-media --mq-wp-small-max (max-width: 781px); -@custom-media --mq-wp-medium (min-width: 782px); +@custom-media --mq-wp-adminbar (min-width: 782px); diff --git a/wp-content/themes/core/assets/pcss/media/_mixins.pcss b/wp-content/themes/core/assets/pcss/media/_mixins.pcss index 648f558b..b5ec1bca 100644 --- a/wp-content/themes/core/assets/pcss/media/_mixins.pcss +++ b/wp-content/themes/core/assets/pcss/media/_mixins.pcss @@ -11,12 +11,12 @@ &.alignleft, &.alignright { - @media (--mq-wp-medium) { + @media (--mq-tablet) { max-width: 220px; } /* Ensure media can only obtain a max-width of 100% of the container */ - @media (--viewport-large) { + @media (--mq-large) { max-width: 100%; } } diff --git a/wp-content/themes/core/assets/pcss/spacing/_variables.pcss b/wp-content/themes/core/assets/pcss/spacing/_variables.pcss index 01c46792..3bf0c191 100644 --- a/wp-content/themes/core/assets/pcss/spacing/_variables.pcss +++ b/wp-content/themes/core/assets/pcss/spacing/_variables.pcss @@ -18,10 +18,21 @@ --spacer-60: var(--wp--preset--spacing--60); --spacer-70: var(--wp--preset--spacing--70); + /* ------------------------------------------------------------- + * Spacing Scale + * ------------------------------------------------------------- */ + + --grid-gutter: var(--wp--custom--spacing--grid-gutter); + --grid-margin: var(--wp--custom--spacing--grid-margin); + /* ------------------------------------------------------------- * Spacers (WP Admin Bar) + * * WP's CSS custom property handles mobile/desktop height change + * If not set, we need to set to 0px in order for this property + * to properly be used in calculations - stylelint doesn't like + * the "px", so we disable linting for this line. * ------------------------------------------------------------- */ - --spacer-wpadmin: var(--wp-admin--admin-bar--height); + --spacer-wpadmin: var(--wp-admin--admin-bar--height, 0px); /* stylelint-disable-line */ } diff --git a/wp-content/themes/core/assets/pcss/theme.pcss b/wp-content/themes/core/assets/pcss/theme.pcss index 08ac8ad6..b9875d82 100644 --- a/wp-content/themes/core/assets/pcss/theme.pcss +++ b/wp-content/themes/core/assets/pcss/theme.pcss @@ -11,7 +11,6 @@ /* Global Theme Styles */ @import "global/reset.pcss"; @import "typography/anchors.pcss"; -@import "global/stacking-order.pcss"; /* Patterns */ @import "cards/post.pcss"; diff --git a/wp-content/themes/core/assets/pcss/transitions/_variables.pcss b/wp-content/themes/core/assets/pcss/transitions/_variables.pcss index d8e22c1c..3b27f657 100644 --- a/wp-content/themes/core/assets/pcss/transitions/_variables.pcss +++ b/wp-content/themes/core/assets/pcss/transitions/_variables.pcss @@ -6,57 +6,9 @@ :root { - /* --------------------------------------------------------------------- - * Easing - * --------------------------------------------------------------------- */ - - /* Easing: Sine */ - --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715); - --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1); - --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95); - - /* Easing: Quad */ - --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); - --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); - --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); - - /* Easing: Cubic */ - --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); - --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); - --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); - - /* Easing: Quart */ - --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); - --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); - --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); - - /* Easing: Quint */ - --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); - --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); - --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); - - /* Easing: Expo */ - --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); - --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); - --ease-in-out-expo: cubic-bezier(1, 0, 0, 1); - - /* Easing: Circ */ - --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); - --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); - --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); - - /* Easing: Back */ - --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045); - --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275); - --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55); - /* --------------------------------------------------------------------- * Transitions * --------------------------------------------------------------------- */ --transition: all 0.15s ease-in-out; - --transition-opacity: opacity 0.3s ease; - --transition-ease-out-opacity: opacity 0.25s ease-out; - --transition-ease-in-opacity: opacity 0.25s 0.3s ease-in; - --transition-nav-swap: opacity 400ms ease-in-out; } diff --git a/wp-content/themes/core/assets/pcss/typography/_mixins.pcss b/wp-content/themes/core/assets/pcss/typography/_mixins.pcss index ccf83932..8f26b0c5 100644 --- a/wp-content/themes/core/assets/pcss/typography/_mixins.pcss +++ b/wp-content/themes/core/assets/pcss/typography/_mixins.pcss @@ -11,10 +11,10 @@ * ------------------------------------------------------------------------- */ @define-mixin t-display-x-large { - font-family: var(--wp--preset--font-family--roboto); - font-size: var(--wp--preset--font-size--80); + font-family: var(--font-family-sans-serif); + font-size: var(--font-size-80); line-height: 1.1; - font-weight: var(--wp--custom--font-weight--bold); + font-weight: var(--font-weight-bold); } /* ------------------------------------------------------------------------- @@ -22,10 +22,10 @@ * ------------------------------------------------------------------------- */ @define-mixin t-display-large { - font-family: var(--wp--preset--font-family--roboto); - font-size: var(--wp--preset--font-size--70); + font-family: var(--font-family-sans-serif); + font-size: var(--font-size-70); line-height: 1.12; - font-weight: var(--wp--custom--font-weight--bold); + font-weight: var(--font-weight-bold); } /* ------------------------------------------------------------------------- @@ -33,10 +33,10 @@ * ------------------------------------------------------------------------- */ @define-mixin t-display-medium { - font-family: var(--wp--preset--font-family--roboto); - font-size: var(--wp--preset--font-size--60); + font-family: var(--font-family-sans-serif); + font-size: var(--font-size-60); line-height: 1.15; - font-weight: var(--wp--custom--font-weight--bold); + font-weight: var(--font-weight-bold); } /* ------------------------------------------------------------------------- @@ -44,10 +44,10 @@ * ------------------------------------------------------------------------- */ @define-mixin t-display-small { - font-family: var(--wp--preset--font-family--roboto); - font-size: var(--wp--preset--font-size--50); + font-family: var(--font-family-sans-serif); + font-size: var(--font-size-50); line-height: 1.2; - font-weight: var(--wp--custom--font-weight--bold); + font-weight: var(--font-weight-bold); } /* ------------------------------------------------------------------------- @@ -55,10 +55,10 @@ * ------------------------------------------------------------------------- */ @define-mixin t-display-x-small { - font-family: var(--wp--preset--font-family--roboto); - font-size: var(--wp--preset--font-size--40); + font-family: var(--font-family-sans-serif); + font-size: var(--font-size-40); line-height: 1.25; - font-weight: var(--wp--custom--font-weight--bold); + font-weight: var(--font-weight-bold); } /* ------------------------------------------------------------------------- @@ -66,10 +66,10 @@ * ------------------------------------------------------------------------- */ @define-mixin t-display-xx-small { - font-family: var(--wp--preset--font-family--roboto); - font-size: var(--wp--preset--font-size--30); + font-family: var(--font-family-sans-serif); + font-size: var(--font-size-30); line-height: 1.4; - font-weight: var(--wp--custom--font-weight--bold); + font-weight: var(--font-weight-bold); } /* ------------------------------------------------------------------------- @@ -77,10 +77,10 @@ * ------------------------------------------------------------------------- */ @define-mixin t-body-large { - font-family: var(--wp--preset--font-family--roboto); - font-size: var(--wp--preset--font-size--30); + font-family: var(--font-family-sans-serif); + font-size: var(--font-size-30); line-height: 1.4; - font-weight: var(--wp--custom--font-weight--regular); + font-weight: var(--font-weight-regular); } /* ------------------------------------------------------------------------- @@ -88,10 +88,10 @@ * ------------------------------------------------------------------------- */ @define-mixin t-body { - font-family: var(--wp--preset--font-family--roboto); - font-size: var(--wp--preset--font-size--20); + font-family: var(--font-family-sans-serif); + font-size: var(--font-size-20); line-height: 1.5; - font-weight: var(--wp--custom--font-weight--regular); + font-weight: var(--font-weight-regular); } /* ------------------------------------------------------------------------- @@ -99,10 +99,21 @@ * ------------------------------------------------------------------------- */ @define-mixin t-body-small { - font-family: var(--wp--preset--font-family--roboto); - font-size: var(--wp--preset--font-size--10); + font-family: var(--font-family-sans-serif); + font-size: var(--font-size-10); line-height: 1.6; - font-weight: var(--wp--custom--font-weight--regular); + font-weight: var(--font-weight-regular); +} + +/* ------------------------------------------------------------------------- + * Overline + * ------------------------------------------------------------------------- */ + +@define-mixin t-overline { + font-family: var(--font-family-sans-serif); + font-size: var(--font-size-20); + line-height: 1.6; + font-weight: var(--font-weight-bold); } /* ------------------------------------------------------------------------- @@ -112,10 +123,10 @@ @define-mixin t-category { color: var(--color-black); - font-family: var(--wp--preset--font-family--roboto); - font-size: var(--wp--preset--font-size--10); + font-family: var(--font-family-sans-serif); + font-size: var(--font-size-10); line-height: 1.6; - font-weight: var(--wp--custom--font-weight--regular); + font-weight: var(--font-weight-regular); text-transform: uppercase; text-decoration: none !important; /* override block editor default */ @@ -136,10 +147,10 @@ * ------------------------------------------------------------------------- */ @define-mixin t-caption { - font-family: var(--wp--preset--font-family--roboto); - font-size: var(--wp--preset--font-size--10); + font-family: var(--font-family-sans-serif); + font-size: var(--font-size-10); line-height: 1.6; - font-weight: var(--wp--custom--font-weight--regular); + font-weight: var(--font-weight-regular); } /* ------------------------------------------------------------------------- @@ -151,13 +162,13 @@ align-items: center; padding: 4px 16px; background-color: var(--color-neutral-20); - border-radius: 100px; + border-radius: var(--border-radius-full); color: var(--color-black); text-decoration: none !important; /* override block editor default */ - font-family: var(--wp--preset--font-family--roboto); - font-size: var(--wp--preset--font-size--10); + font-family: var(--font-family-sans-serif); + font-size: var(--font-size-10); line-height: 1.6; - font-weight: var(--wp--custom--font-weight--bold); + font-weight: var(--font-weight-bold); transition: var(--transition); /* target links for the hover/focus effect */ diff --git a/wp-content/themes/core/assets/pcss/typography/_utilities.pcss b/wp-content/themes/core/assets/pcss/typography/_utilities.pcss index af9f5e5f..d43b710d 100644 --- a/wp-content/themes/core/assets/pcss/typography/_utilities.pcss +++ b/wp-content/themes/core/assets/pcss/typography/_utilities.pcss @@ -85,6 +85,15 @@ @mixin t-body-small; } +/* ------------------------------------------------------------------------- + * Overline + * ------------------------------------------------------------------------- */ + +.t-overline { + + @mixin t-overline; +} + /* ------------------------------------------------------------------------- * Category * ------------------------------------------------------------------------- */ diff --git a/wp-content/themes/core/assets/pcss/typography/_variables.pcss b/wp-content/themes/core/assets/pcss/typography/_variables.pcss index 067434dc..b7dfa028 100644 --- a/wp-content/themes/core/assets/pcss/typography/_variables.pcss +++ b/wp-content/themes/core/assets/pcss/typography/_variables.pcss @@ -11,7 +11,7 @@ * ------------------------------------------------------------------------- */ --font-family-serif: serif; - --font-family-sans-serif: var(--wp--preset--font-family--roboto); + --font-family-sans-serif: var(--wp--preset--font-family--inter); /* ------------------------------------------------------------------------- * Font Size Scale @@ -33,4 +33,12 @@ --font-weight-normal: var(--wp--custom--font-weight--regular); --font-weight-bold: var(--wp--custom--font-weight--bold); + + /* ------------------------------------------------------------------------- + * Font Selection + * ------------------------------------------------------------------------- */ + + ::selection { + background-color: var(--color-selection-highlight); + } } diff --git a/wp-content/themes/core/blocks/core/button/Button.php b/wp-content/themes/core/blocks/core/button/Button.php index 214d88b7..51847019 100644 --- a/wp-content/themes/core/blocks/core/button/Button.php +++ b/wp-content/themes/core/blocks/core/button/Button.php @@ -10,12 +10,4 @@ public function get_block_name(): string { return 'core/button'; } - public function get_block_styles(): array { - return [ - 'primary' => esc_html__( 'Primary', 'tribe' ), - 'secondary' => esc_html__( 'Secondary', 'tribe' ), - 'ghost' => esc_html__( 'Ghost', 'tribe' ), - ]; - } - } diff --git a/wp-content/themes/core/blocks/core/button/_variables.pcss b/wp-content/themes/core/blocks/core/button/_variables.pcss deleted file mode 100644 index 05797e01..00000000 --- a/wp-content/themes/core/blocks/core/button/_variables.pcss +++ /dev/null @@ -1,61 +0,0 @@ -/* ------------------------------------------------------------------------- - * - * Variables: Button Block - * - * ------------------------------------------------------------------------- */ - -/* @TODO: Add documentation on setting up theming to properly utilize */ - -:root { - --themed-button-background-color: var(--color-royal-blue); - --themed-button-border-color: transparent; - --themed-button-text-color: var(--color-white); - --themed-button-icon: var(--icon-chevron-right-white); - --themed-button-icon-color: var(--color-royal-blue); - --themed-button-hover-background-color: var(--color-black); - --themed-button-hover-border-color: transparent; - --themed-button-hover-text-color: var(--color-white); - --themed-button-hover-icon: var(--icon-chevron-right-white); - --themed-button-hover-icon-color: var(--color-royal-blue); -} - -/* CASE: Secondary Button Properties */ -.is-style-secondary { - --themed-button-background-color: var(--color-white); - --themed-button-border-color: var(--color-black); - --themed-button-text-color: var(--color-black); - --themed-button-icon: var(--icon-chevron-right-black); - --themed-button-hover-icon: var(--icon-chevron-right-white); -} - -/* CASE: Ghost Button Properties */ -.is-style-ghost { - --themed-button-background-color: transparent; - --themed-button-text-color: var(--color-black); - --themed-button-hover-icon-color: var(--color-black); -} - -/* ------------------------------------------------------------------------- - * - * Color Theme: Dark - * - * ------------------------------------------------------------------------- */ - -.has-jacksons-purple-background-color { - - /* CASE: Secondary Button Properties */ - .is-style-secondary { - --themed-button-background-color: transparent; - --themed-button-border-color: var(--color-white); - --themed-button-text-color: var(--color-white); - --themed-button-icon: var(--icon-chevron-right-white); - --themed-button-hover-border-color: var(--color-black); - --themed-button-hover-icon: var(--icon-chevron-right-white); - } - - /* CASE: Ghost Button Properties */ - .is-style-ghost { - --themed-button-text-color: var(--color-white); - --themed-button-hover-text-color: var(--color-white); - } -} diff --git a/wp-content/themes/core/blocks/core/button/editor.js b/wp-content/themes/core/blocks/core/button/editor.js index 97640bb7..af8973f5 100644 --- a/wp-content/themes/core/blocks/core/button/editor.js +++ b/wp-content/themes/core/blocks/core/button/editor.js @@ -2,8 +2,34 @@ * Admin scripts specific to this block */ +import createWPControls from 'utils/create-wp-controls'; import { ready } from 'utils/events.js'; import { unregisterBlockStyle } from '@wordpress/blocks'; +import { __ } from '@wordpress/i18n'; + +const settings = { + attributes: { + hasIcon: { + type: 'boolean', + }, + }, + blocks: [ 'core/button' ], + controls: [ + { + applyClass: 'tribe-button-has-icon', + attribute: 'hasIcon', + defaultValue: false, + helpText: __( + 'Toggle to display the button with an arrow icon. Note that this setting does not apply to the "Ghost" button style.', + 'tribe' + ), + label: __( 'Has Arrow Icon', 'tribe' ), + type: 'toggle', + }, + ], +}; + +createWPControls( settings ); ready( () => { unregisterBlockStyle( 'core/button', 'fill' ); diff --git a/wp-content/themes/core/blocks/core/button/style.pcss b/wp-content/themes/core/blocks/core/button/style.pcss index 850d711e..edcfc90b 100644 --- a/wp-content/themes/core/blocks/core/button/style.pcss +++ b/wp-content/themes/core/blocks/core/button/style.pcss @@ -2,77 +2,69 @@ * Styles specific to this block */ -@import "_variables.pcss"; - .wp-block-buttons { - gap: var(--wp--preset--spacing--30); + gap: var(--spacer-30); } .wp-block-button__link { + display: inline-flex; + align-items: center; + gap: 8px; transition: var(--transition); /* ------------------------------------------------------------------------- - * Button: Arrow After Label + * Button: Has Icon + * Note here that the "Ghost" button always contains the icon * ------------------------------------------------------------------------- */ - :is(.is-style-primary, .is-style-secondary) & { - display: inline-flex; - flex-direction: row; - align-items: center; - gap: 10px; - position: relative; + :is(.tribe-button-has-icon) &, + :is(.is-style-ghost) & { &::after { content: ""; - background: var(--themed-button-icon) center center no-repeat; display: block; - height: 16px; width: 10px; + height: 16px; + mask: var(--icon-chevron-right) center no-repeat; + mask-size: contain; + background-color: currentcolor; transition: var(--transition); } + } - &:hover, - &:focus { + &:focus-visible { - &::after { - background-image: var(--themed-button-hover-icon); - } - } + @mixin focus-visible; } +} - /* ------------------------------------------------------------------------- - * Button: Ghost - * ------------------------------------------------------------------------- */ +/* ------------------------------------------------------------------------- + * Group block - Dark Theme + * Everything here unfortunately needs to have !important rules due to the + * current nature of the WP block variations. + * ------------------------------------------------------------------------- */ - :is(.is-style-ghost) & { - display: inline-flex; - align-items: center; - gap: 16px; - position: relative; +.is-style-dark .wp-block-button { - &::after { - background-color: var(--themed-button-icon-color); - background-image: var(--themed-button-icon); - background-position: center; - background-repeat: no-repeat; - background-size: 10px 16px; - border-radius: 50%; - content: ""; - display: inline-block; - width: 48px; - height: 48px; - transition: var(--transition); + .wp-block-button__link { + + :is(.is-style-outlined) & { + border-color: var(--color-white) !important; + color: var(--color-white) !important; + + &:hover, + &:focus { + background-color: var(--color-white) !important; + color: var(--color-black) !important; + } } - &:hover, - &:focus { - background-color: var(--themed-button-background-color); - color: var(--themed-button-text-color); + :is(.is-style-ghost) & { + color: var(--color-white) !important; - &::after { - transform: none; - background-color: var(--themed-button-hover-icon-color); - background-image: var(--themed-button-hover-icon); + &:hover, + &:focus { + color: var(--color-neutral-20) !important; } } } diff --git a/wp-content/themes/core/blocks/core/columns/style.pcss b/wp-content/themes/core/blocks/core/columns/style.pcss index 28565336..8603f2b0 100644 --- a/wp-content/themes/core/blocks/core/columns/style.pcss +++ b/wp-content/themes/core/blocks/core/columns/style.pcss @@ -2,6 +2,24 @@ * Styles specific to this block */ +:root { + --tribe-stacking-order: 0; +} + .wp-block-columns { - gap: var(--spacer-40) var(--wp--custom--spacing--grid-gutter); + gap: var(--spacer-40) var(--grid-gutter); + + /* ------------------------------------------------------------------------- + * Stacking Order - Tribe Plugin + * Need to target .is-not-stacked-on-mobile to ensure stacking actually + * makes sense to apply to this context + * ------------------------------------------------------------------------- */ + + &:not(.is-not-stacked-on-mobile) .wp-block-column.tribe-has-stacking-order { + + @media (--mq-wp-small-max) { + order: var(--tribe-stacking-order); + } + } + } diff --git a/wp-content/themes/core/blocks/core/heading/Heading.php b/wp-content/themes/core/blocks/core/heading/Heading.php deleted file mode 100644 index fa2f148b..00000000 --- a/wp-content/themes/core/blocks/core/heading/Heading.php +++ /dev/null @@ -1,24 +0,0 @@ - esc_html__( 'XX-Small', 'tribe' ), - 'x-small' => esc_html__( 'X-Small', 'tribe' ), - 'small' => esc_html__( 'Small', 'tribe' ), - 'medium' => esc_html__( 'Medium', 'tribe' ), - 'large' => esc_html__( 'Large', 'tribe' ), - 'x-large' => esc_html__( 'X-Large', 'tribe' ), - ]; - } - -} diff --git a/wp-content/themes/core/blocks/core/paragraph/Paragraph.php b/wp-content/themes/core/blocks/core/paragraph/Paragraph.php deleted file mode 100644 index 56a8ae4a..00000000 --- a/wp-content/themes/core/blocks/core/paragraph/Paragraph.php +++ /dev/null @@ -1,20 +0,0 @@ - esc_html__( 'Small', 'tribe' ), - 'large' => esc_html__( 'Large', 'tribe' ), - ]; - } - -} diff --git a/wp-content/themes/core/blocks/core/posttemplate/style.pcss b/wp-content/themes/core/blocks/core/posttemplate/style.pcss index 4be0c4e4..4195897f 100644 --- a/wp-content/themes/core/blocks/core/posttemplate/style.pcss +++ b/wp-content/themes/core/blocks/core/posttemplate/style.pcss @@ -25,21 +25,21 @@ &.columns-2, &.columns-4 { - @media (--mq-wp-medium) { + @media (--mq-tablet) { --post-template-grid-template-columns: repeat(2, minmax(0, 1fr)); } } &.columns-3 { - @media (--viewport-full) { + @media (--mq-desktop) { --post-template-grid-template-columns: repeat(3, minmax(0, 1fr)); } } &.columns-4 { - @media (--viewport-full) { + @media (--mq-desktop) { --post-template-grid-template-columns: repeat(4, minmax(0, 1fr)); } } diff --git a/wp-content/themes/core/blocks/core/postterms/style.pcss b/wp-content/themes/core/blocks/core/postterms/style.pcss index e760535e..fd62ec9c 100644 --- a/wp-content/themes/core/blocks/core/postterms/style.pcss +++ b/wp-content/themes/core/blocks/core/postterms/style.pcss @@ -36,7 +36,7 @@ padding: 4px 16px; align-items: center; background-color: var(--color-neutral-20); - border-radius: 100px; + border-radius: var(--border-radius-full); color: var(--color-black); transition: var(--transition); diff --git a/wp-content/themes/core/blocks/core/pullquote/style.pcss b/wp-content/themes/core/blocks/core/pullquote/style.pcss index c5f94a6d..fc78a0b3 100644 --- a/wp-content/themes/core/blocks/core/pullquote/style.pcss +++ b/wp-content/themes/core/blocks/core/pullquote/style.pcss @@ -7,8 +7,8 @@ /* typography settings for the paragraph within the pullquote block don't seem to be working, for now, set them here */ > blockquote p { - font-size: var(--wp--preset--font-size--50); - font-weight: var(--wp--custom--font-weight--bold); + font-size: var(--font-size-50); + font-weight: var(--font-weight-bold); line-height: 1.2; } } diff --git a/wp-content/themes/core/blocks/core/quote/style.pcss b/wp-content/themes/core/blocks/core/quote/style.pcss index 39446e77..afe1975e 100644 --- a/wp-content/themes/core/blocks/core/quote/style.pcss +++ b/wp-content/themes/core/blocks/core/quote/style.pcss @@ -7,8 +7,8 @@ /* typography settings for the paragraph within the quote block don't seem to be working, for now, set them here */ > p { - font-size: var(--wp--preset--font-size--30); - font-weight: var(--wp--custom--font-weight--bold); + font-size: var(--font-size-30); + font-weight: var(--font-weight-bold); line-height: 1.4; } } diff --git a/wp-content/themes/core/blocks/core/spacer/Spacer.php b/wp-content/themes/core/blocks/core/spacer/Spacer.php deleted file mode 100644 index 32567df9..00000000 --- a/wp-content/themes/core/blocks/core/spacer/Spacer.php +++ /dev/null @@ -1,25 +0,0 @@ - esc_html__( 'XX Small', 'tribe' ), - 'x-small' => esc_html__( 'X Small', 'tribe' ), - 'small' => esc_html__( 'Small', 'tribe' ), - 'medium' => esc_html__( 'Medium', 'tribe' ), - 'large' => esc_html__( 'Large', 'tribe' ), - 'x-large' => esc_html__( 'X Large', 'tribe' ), - 'xx-large' => esc_html__( 'XX Large', 'tribe' ), - ]; - } - -} diff --git a/wp-content/themes/core/blocks/outermost/socialsharing/style.pcss b/wp-content/themes/core/blocks/outermost/socialsharing/style.pcss index fe218e4e..ffa61fc4 100644 --- a/wp-content/themes/core/blocks/outermost/socialsharing/style.pcss +++ b/wp-content/themes/core/blocks/outermost/socialsharing/style.pcss @@ -38,7 +38,7 @@ background-color: var(--ssb-button-background-hover-color); color: var(--ssb-button-hover-color); fill: var(--ssb-button-hover-color); - border-radius: 9999px; /* Value provided by their base CSS for the plugin */ + border-radius: var(--border-radius-full); } } } diff --git a/wp-content/themes/core/patterns/page.php b/wp-content/themes/core/patterns/page.php index 5c278937..8dfd8d68 100644 --- a/wp-content/themes/core/patterns/page.php +++ b/wp-content/themes/core/patterns/page.php @@ -10,7 +10,7 @@ */ ?> -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam urna eros, ultricies nec massa a, congue dignissim mauris. Maecenas ut ante eu eros rhoncus vestibulum eget id nibh. Sed malesuada, odio eget bibendum gravida, eros leo molestie arcu, at iaculis purus magna id nunc. Maecenas ultricies volutpat dictum. Sed vel convallis augue. Vestibulum ligula urna, cursus id dolor sed, convallis venenatis erat. Quisque magna nisl, tincidunt vitae mattis vitae, tincidunt id dolor. Mauris congue arcu urna, sed vulputate ligula laoreet nec. Maecenas porttitor egestas ultricies. Suspendisse varius ligula rhoncus tortor auctor, vitae semper ligula vulputate. Maecenas nisi mi, pellentesque quis est in, efficitur efficitur nunc. In nec arcu porta, condimentum purus vel, euismod leo. Morbi pretium luctus dolor, sit amet viverra lorem mollis aliquam.
diff --git a/wp-content/themes/core/styles/blocks/button/10-outlined.json b/wp-content/themes/core/styles/blocks/button/10-outlined.json new file mode 100644 index 00000000..28ce26d1 --- /dev/null +++ b/wp-content/themes/core/styles/blocks/button/10-outlined.json @@ -0,0 +1,41 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "outlined", + "title": "Outlined", + "blockTypes": [ "core/button" ], + "styles": { + "color": { + "background": "transparent", + "text": "var(--wp--preset--color--base-black)" + }, + "border": { + "width": "1px", + "color": "var(--wp--preset--color--base-black)" + }, + "spacing": { + "padding": { + "top": "var(--wp--preset--spacing--20)", + "right": "var(--wp--preset--spacing--30)", + "bottom": "var(--wp--preset--spacing--20)", + "left": "var(--wp--preset--spacing--30)" + } + }, + "elements": { + "button": { + ":hover": { + "color": { + "background": "var(--wp--preset--color--base-black) !important", + "text": "var(--wp--preset--color--base-white) !important" + } + }, + ":focus": { + "color": { + "background": "var(--wp--preset--color--base-black) !important", + "text": "var(--wp--preset--color--base-white) !important" + } + } + } + } + } +} diff --git a/wp-content/themes/core/styles/blocks/button/20-ghost.json b/wp-content/themes/core/styles/blocks/button/20-ghost.json new file mode 100644 index 00000000..d1fe73c0 --- /dev/null +++ b/wp-content/themes/core/styles/blocks/button/20-ghost.json @@ -0,0 +1,38 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "ghost", + "title": "Ghost", + "blockTypes": [ "core/button" ], + "styles": { + "border": { + "radius": "0" + }, + "color": { + "background": "transparent", + "text": "var(--wp--preset--color--blue)" + }, + "spacing": { + "padding": { + "top": "0", + "right": "0", + "bottom": "0", + "left": "0" + } + }, + "elements": { + "button": { + ":hover": { + "color": { + "text": "var(--color-dark-blue) !important" + } + }, + ":focus": { + "color": { + "text": "var(--color-dark-blue) !important" + } + } + } + } + } +} diff --git a/wp-content/themes/core/styles/blocks/group/dark.json b/wp-content/themes/core/styles/blocks/group/dark.json new file mode 100644 index 00000000..e6a174d9 --- /dev/null +++ b/wp-content/themes/core/styles/blocks/group/dark.json @@ -0,0 +1,33 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "dark", + "title": "Dark", + "blockTypes": [ "core/group" ], + "styles": { + "color": { + "background": "var(--wp--preset--color--base-black)", + "text": "var(--wp--preset--color--base-white)" + }, + "elements": { + "button": { + "color": { + "background": "var(--wp--preset--color--base-white)", + "text": "var(--wp--preset--color--base-black)" + }, + ":hover": { + "color": { + "background": "var(--color-neutral-20)", + "text": "var(--wp--preset--color--base-black)" + } + }, + ":focus": { + "color": { + "background": "var(--color-neutral-20)", + "text": "var(--wp--preset--color--base-black)" + } + } + } + } + } +} diff --git a/wp-content/themes/core/styles/blocks/heading/10-xx-small.json b/wp-content/themes/core/styles/blocks/heading/10-xx-small.json new file mode 100644 index 00000000..1ec8b2ab --- /dev/null +++ b/wp-content/themes/core/styles/blocks/heading/10-xx-small.json @@ -0,0 +1,13 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "xx-small", + "title": "XX Small", + "blockTypes": [ "core/heading" ], + "styles": { + "typography": { + "fontSize": "var(--wp--preset--font-size--30)", + "lineHeight": "1.4" + } + } +} diff --git a/wp-content/themes/core/styles/blocks/heading/20-x-small.json b/wp-content/themes/core/styles/blocks/heading/20-x-small.json new file mode 100644 index 00000000..42cdc175 --- /dev/null +++ b/wp-content/themes/core/styles/blocks/heading/20-x-small.json @@ -0,0 +1,13 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "x-small", + "title": "X Small", + "blockTypes": [ "core/heading" ], + "styles": { + "typography": { + "fontSize": "var(--wp--preset--font-size--40)", + "lineHeight": "1.25" + } + } +} diff --git a/wp-content/themes/core/styles/blocks/heading/30-small.json b/wp-content/themes/core/styles/blocks/heading/30-small.json new file mode 100644 index 00000000..1d122a39 --- /dev/null +++ b/wp-content/themes/core/styles/blocks/heading/30-small.json @@ -0,0 +1,13 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "small", + "title": "Small", + "blockTypes": [ "core/heading" ], + "styles": { + "typography": { + "fontSize": "var(--wp--preset--font-size--50)", + "lineHeight": "1.2" + } + } +} diff --git a/wp-content/themes/core/styles/blocks/heading/40-medium.json b/wp-content/themes/core/styles/blocks/heading/40-medium.json new file mode 100644 index 00000000..03183e2d --- /dev/null +++ b/wp-content/themes/core/styles/blocks/heading/40-medium.json @@ -0,0 +1,13 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "medium", + "title": "Medium", + "blockTypes": [ "core/heading" ], + "styles": { + "typography": { + "fontSize": "var(--wp--preset--font-size--60)", + "lineHeight": "1.15" + } + } +} diff --git a/wp-content/themes/core/styles/blocks/heading/50-large.json b/wp-content/themes/core/styles/blocks/heading/50-large.json new file mode 100644 index 00000000..6641c6c6 --- /dev/null +++ b/wp-content/themes/core/styles/blocks/heading/50-large.json @@ -0,0 +1,13 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "large", + "title": "Large", + "blockTypes": [ "core/heading" ], + "styles": { + "typography": { + "fontSize": "var(--wp--preset--font-size--70)", + "lineHeight": "1.12" + } + } +} diff --git a/wp-content/themes/core/styles/blocks/heading/60-x-large.json b/wp-content/themes/core/styles/blocks/heading/60-x-large.json new file mode 100644 index 00000000..da4387a4 --- /dev/null +++ b/wp-content/themes/core/styles/blocks/heading/60-x-large.json @@ -0,0 +1,13 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "x-large", + "title": "X Large", + "blockTypes": [ "core/heading" ], + "styles": { + "typography": { + "fontSize": "var(--wp--preset--font-size--80)", + "lineHeight": "1.1" + } + } +} diff --git a/wp-content/themes/core/styles/blocks/paragraph/10-small.json b/wp-content/themes/core/styles/blocks/paragraph/10-small.json new file mode 100644 index 00000000..a85fcbde --- /dev/null +++ b/wp-content/themes/core/styles/blocks/paragraph/10-small.json @@ -0,0 +1,13 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "small", + "title": "Small", + "blockTypes": [ "core/paragraph" ], + "styles": { + "typography": { + "fontSize": "var(--wp--preset--font-size--10)", + "lineHeight": "1.6" + } + } +} diff --git a/wp-content/themes/core/styles/blocks/paragraph/20-large.json b/wp-content/themes/core/styles/blocks/paragraph/20-large.json new file mode 100644 index 00000000..1ed7aa23 --- /dev/null +++ b/wp-content/themes/core/styles/blocks/paragraph/20-large.json @@ -0,0 +1,13 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "large", + "title": "Large", + "blockTypes": [ "core/paragraph" ], + "styles": { + "typography": { + "fontSize": "var(--wp--preset--font-size--30)", + "lineHeight": "1.4" + } + } +} diff --git a/wp-content/themes/core/styles/blocks/paragraph/30-overline.json b/wp-content/themes/core/styles/blocks/paragraph/30-overline.json new file mode 100644 index 00000000..29882fd2 --- /dev/null +++ b/wp-content/themes/core/styles/blocks/paragraph/30-overline.json @@ -0,0 +1,14 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "overline", + "title": "Overline", + "blockTypes": [ "core/paragraph" ], + "styles": { + "typography": { + "fontSize": "var(--wp--preset--font-size--20)", + "lineHeight": "1.6", + "fontWeight": "var(--wp--custom--font-weight--bold)" + } + } +} diff --git a/wp-content/themes/core/styles/blocks/post-title/page.json b/wp-content/themes/core/styles/blocks/post-title/page.json new file mode 100644 index 00000000..5bb50698 --- /dev/null +++ b/wp-content/themes/core/styles/blocks/post-title/page.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "page", + "title": "Page", + "blockTypes": [ "core/post-title" ], + "styles": { + "typography": { + "fontSize": "var(--wp--preset--font-size--90)" + } + } +} diff --git a/wp-content/themes/core/styles/blocks/spacer/10-xx-small.json b/wp-content/themes/core/styles/blocks/spacer/10-xx-small.json new file mode 100644 index 00000000..60f700f7 --- /dev/null +++ b/wp-content/themes/core/styles/blocks/spacer/10-xx-small.json @@ -0,0 +1,10 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "xx-small", + "title": "XX Small", + "blockTypes": [ "core/spacer" ], + "styles": { + "css": "height: var(--wp--preset--spacing--10) !important" + } +} diff --git a/wp-content/themes/core/styles/blocks/spacer/20-x-small.json b/wp-content/themes/core/styles/blocks/spacer/20-x-small.json new file mode 100644 index 00000000..fb06812f --- /dev/null +++ b/wp-content/themes/core/styles/blocks/spacer/20-x-small.json @@ -0,0 +1,10 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "x-small", + "title": "X Small", + "blockTypes": [ "core/spacer" ], + "styles": { + "css": "height: var(--wp--preset--spacing--20) !important" + } +} diff --git a/wp-content/themes/core/styles/blocks/spacer/30-small.json b/wp-content/themes/core/styles/blocks/spacer/30-small.json new file mode 100644 index 00000000..bec0de0e --- /dev/null +++ b/wp-content/themes/core/styles/blocks/spacer/30-small.json @@ -0,0 +1,10 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "small", + "title": "Small", + "blockTypes": [ "core/spacer" ], + "styles": { + "css": "height: var(--wp--preset--spacing--30) !important" + } +} diff --git a/wp-content/themes/core/styles/blocks/spacer/40-medium.json b/wp-content/themes/core/styles/blocks/spacer/40-medium.json new file mode 100644 index 00000000..8573dbf2 --- /dev/null +++ b/wp-content/themes/core/styles/blocks/spacer/40-medium.json @@ -0,0 +1,10 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "medium", + "title": "Medium", + "blockTypes": [ "core/spacer" ], + "styles": { + "css": "height: var(--wp--preset--spacing--40) !important" + } +} diff --git a/wp-content/themes/core/styles/blocks/spacer/50-large.json b/wp-content/themes/core/styles/blocks/spacer/50-large.json new file mode 100644 index 00000000..4904c98d --- /dev/null +++ b/wp-content/themes/core/styles/blocks/spacer/50-large.json @@ -0,0 +1,10 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "large", + "title": "Large", + "blockTypes": [ "core/spacer" ], + "styles": { + "css": "height: var(--wp--preset--spacing--50) !important" + } +} diff --git a/wp-content/themes/core/styles/blocks/spacer/60-x-large.json b/wp-content/themes/core/styles/blocks/spacer/60-x-large.json new file mode 100644 index 00000000..16b76134 --- /dev/null +++ b/wp-content/themes/core/styles/blocks/spacer/60-x-large.json @@ -0,0 +1,10 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "x-large", + "title": "X Large", + "blockTypes": [ "core/spacer" ], + "styles": { + "css": "height: var(--wp--preset--spacing--60) !important" + } +} diff --git a/wp-content/themes/core/styles/blocks/spacer/70-xx-large.json b/wp-content/themes/core/styles/blocks/spacer/70-xx-large.json new file mode 100644 index 00000000..b0f873bf --- /dev/null +++ b/wp-content/themes/core/styles/blocks/spacer/70-xx-large.json @@ -0,0 +1,10 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "slug": "xx-large", + "title": "XX Large", + "blockTypes": [ "core/spacer" ], + "styles": { + "css": "height: var(--wp--preset--spacing--70) !important" + } +} diff --git a/wp-content/themes/core/theme.json b/wp-content/themes/core/theme.json index 2140d1d7..3bdc9aa9 100644 --- a/wp-content/themes/core/theme.json +++ b/wp-content/themes/core/theme.json @@ -26,11 +26,6 @@ "textTransform": false } }, - "core/group": { - "color": { - "background": true - } - }, "core/heading": { "typography": { "fontFamilies": [], @@ -109,85 +104,30 @@ "gradients": [], "link": false, "palette": [ - { - "color": "#ffffff", - "name": "Base White", - "slug": "base-white" - }, - { - "color": "#000000", - "name": "Base Black", - "slug": "base-black" - }, { "color": "#3050E5", - "name": "Royal Blue", - "slug": "royal-blue" + "name": "Blue", + "slug": "blue" }, { - "color": "#2238a0", - "name": "Jacksons Purple", - "slug": "jacksons-purple" + "color": "#ffffff", + "name": "White", + "slug": "base-white" }, { "color": "#f5f5f5", - "name": "Neutral Gray 10", + "name": "Neutral 10", "slug": "neutral-10" }, { - "color": "#e8e8e8", - "name": "Neutral Gray 20", - "slug": "neutral-20" - }, - { - "color": "#d1d1d1", - "name": "Neutral Gray 30", - "slug": "neutral-30" - }, - { - "color": "#a3a3a3", - "name": "Neutral Gray 40", - "slug": "neutral-40" - }, - { - "color": "#8c8c8c", - "name": "Neutral Gray 50", + "color": "#767676", + "name": "Neutral 50", "slug": "neutral-50" }, { - "color": "#747474", - "name": "Neutral Gray 60", - "slug": "neutral-60" - }, - { - "color": "#5d5d5d", - "name": "Neutral Gray 70", - "slug": "neutral-70" - }, - { - "color": "#464646", - "name": "Neutral Gray 80", - "slug": "neutral-80" - }, - { - "color": "#2f2f2f", - "name": "Neutral Gray 90", - "slug": "neutral-90" - }, - { - "color": "#f1c400", - "name": "Warning", - "slug": "warning" - }, - { - "color": "#df3a3a", - "name": "Error", - "slug": "error" - }, - { - "color": "#84bd00", - "name": "Success", - "slug": "success" + "color": "#000000", + "name": "Black", + "slug": "base-black" } ] }, @@ -198,7 +138,7 @@ }, "spacing": { "grid-gutter": "clamp(1.5rem, 1.2rem + 1.5vw, 3rem)", - "grid-margin": "clamp(1rem, 0rem + 5vw, 6rem)" + "grid-margin": "clamp(1rem, -0.3rem + 6.5vw, 7.5rem)" } }, "layout": { @@ -212,48 +152,44 @@ "fluid": false, "fontFamilies": [ { - "fontFamily": "\"Roboto\", sans-serif", - "name": "Roboto", - "slug": "roboto", + "fontFamily": "\"Inter\", sans-serif", + "name": "Inter", + "slug": "inter", "fontFace": [ { - "fontFamily": "Roboto", + "fontFamily": "Inter", "fontDisplay": "swap", "fontStyle": "normal", "fontWeight": "400", "src": [ - "file:./assets/fonts/Roboto-Regular.woff2", - "file:./assets/fonts/Roboto-Regular.woff" + "file:./assets/fonts/inter-tight-v7-latin-regular.woff2" ] }, { - "fontFamily": "Roboto", + "fontFamily": "Inter", "fontDisplay": "swap", "fontStyle": "italic", "fontWeight": "400", "src": [ - "file:./assets/fonts/Roboto-Italic.woff2", - "file:./assets/fonts/Roboto-Italic.woff" + "file:./assets/fonts/inter-tight-v7-latin-italic.woff2" ] }, { - "fontFamily": "Roboto", + "fontFamily": "Inter", "fontDisplay": "swap", "fontStyle": "normal", "fontWeight": "700", "src": [ - "file:./assets/fonts/Roboto-Bold.woff2", - "file:./assets/fonts/Roboto-Bold.woff" + "file:./assets/fonts/inter-tight-v7-latin-700.woff2" ] }, { - "fontFamily": "Roboto", + "fontFamily": "Inter", "fontDisplay": "swap", "fontStyle": "italic", "fontWeight": "700", "src": [ - "file:./assets/fonts/Roboto-BoldItalic.woff2", - "file:./assets/fonts/Roboto-BoldItalic.woff" + "file:./assets/fonts/inter-tight-v7-latin-700italic.woff2" ] } ] @@ -315,14 +251,34 @@ "shadow": { "presets": [ { - "name": "Default", - "slug": "default", - "shadow": "0px 0px 1px rgba(48, 49, 51, 0.05), 0px 8px 16px rgba(48, 49, 51, 0.1)" + "name": "Shadow 10", + "slug": "10", + "shadow": "0px 0.5px 2px 0px rgba(31, 31, 31, 0.11)" + }, + { + "name": "Shadow 20", + "slug": "20", + "shadow": "0px 1px 4px 0px rgba(31, 31, 31, 0.08)" + }, + { + "name": "Shadow 30", + "slug": "30", + "shadow": "0px 2px 6px 0px rgba(31, 31, 31, 0.14)" + }, + { + "name": "Shadow 40", + "slug": "40", + "shadow": "0px 5px 15px 0px rgba(31, 31, 31, 0.11)" + }, + { + "name": "Shadow 50", + "slug": "50", + "shadow": "0px 12px 26px 0px rgba(31, 31, 31, 0.12)" }, { - "name": "Hover", - "slug": "hover", - "shadow": "0px 0px 1px rgba(48, 49, 51, 0.05), 0px 8px 50px rgba(48, 49, 51, 0.1)" + "name": "Shadow 60", + "slug": "60", + "shadow": "0px 22px 36px 0px rgba(31, 31, 31, 0.12)" } ] }, @@ -337,32 +293,32 @@ "name": "XX Small" }, { - "size": "clamp(0.5rem, 0.4rem + 0.5vw, 1rem)", + "size": "clamp(0.75rem, 0.7rem + 0.25vw, 1rem)", "slug": "20", "name": "X Small" }, { - "size": "clamp(1rem, 0.8rem + 1vw, 2rem)", + "size": "clamp(1rem, 0.9rem + 0.5vw, 1.5rem)", "slug": "30", "name": "Small" }, { - "size": "clamp(1.5rem, 1.2rem + 1.5vw, 3rem)", + "size": "clamp(1.5rem, 1.4rem + 0.5vw, 2rem)", "slug": "40", "name": "Medium" }, { - "size": "clamp(2rem, 1.6rem + 2vw, 4rem)", + "size": "clamp(2rem, 1.8rem + 1vw, 3rem)", "slug": "50", "name": "Large" }, { - "size": "clamp(3rem, 2.4rem + 3vw, 6rem)", + "size": "clamp(3rem, 2.8rem + 1vw, 4rem)", "slug": "60", "name": "X Large" }, { - "size": "clamp(3.75rem, 3rem + 3.75vw, 7.5rem)", + "size": "clamp(4rem, 3.6rem + 2vw, 6rem)", "slug": "70", "name": "XX Large" } @@ -376,38 +332,6 @@ "background": "var(--wp--preset--color--base-white)" }, "blocks": { - "core/button": { - "variations": { - "secondary": { - "border": { - "width": "1px", - "style": "solid", - "color": "var(--themed-button-border-color)" - }, - "spacing": { - "padding": { - "top": "0.7188rem", - "right": "1.5rem", - "bottom": "0.7188rem", - "left": "1.5rem" - } - } - }, - "ghost": { - "border": { - "radius": "0" - }, - "spacing": { - "padding": { - "top": "0", - "right": "0", - "bottom": "0", - "left": "0" - } - } - } - } - }, "core/embed": { "elements": { "caption": { @@ -425,44 +349,6 @@ "core/heading": { "typography": { "fontWeight": "var(--wp--custom--font-weight--bold)" - }, - "variations": { - "xx-small": { - "typography": { - "fontSize": "var(--wp--preset--font-size--30)", - "lineHeight": "1.4" - } - }, - "x-small": { - "typography": { - "fontSize": "var(--wp--preset--font-size--40)", - "lineHeight": "1.25" - } - }, - "small": { - "typography": { - "fontSize": "var(--wp--preset--font-size--50)", - "lineHeight": "1.2" - } - }, - "medium": { - "typography": { - "fontSize": "var(--wp--preset--font-size--60)", - "lineHeight": "1.15" - } - }, - "large": { - "typography": { - "fontSize": "var(--wp--preset--font-size--70)", - "lineHeight": "1.12" - } - }, - "x-large": { - "typography": { - "fontSize": "var(--wp--preset--font-size--80)", - "lineHeight": "1.1" - } - } } }, "core/image": { @@ -509,30 +395,24 @@ "fontSize": "var(--wp--preset--font-size--20)", "fontWeight": "var(--wp--custom--font-weight--regular)", "lineHeight": "1.5" - }, - "variations": { - "small": { - "typography": { - "fontSize": "var(--wp--preset--font-size--10)", - "lineHeight": "1.6" - } - }, - "large": { - "typography": { - "fontSize": "var(--wp--preset--font-size--30)", - "lineHeight": "1.4" - } - } } }, "core/post-author-name": { "typography": { - "fontFamily": "var(--wp--preset--font-family--roboto)", + "fontFamily": "var(--wp--preset--font-family--inter)", "fontSize": "var(--wp--preset--font-size--10)", "lineHeight": "1.6", "fontWeight": "var(--wp--custom--font-weight--regular)" } }, + "core/post-title": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--inter)", + "fontSize": "var(--wp--preset--font-size--70)", + "lineHeight": "1.1", + "fontWeight": "var(--wp--custom--font-weight--bold)" + } + }, "core/pullquote": { "border": { "top": { @@ -605,7 +485,8 @@ "width": "0" }, "bottom": { - "width": "1px" + "width": "1px", + "style": "solid" } }, "spacing": { @@ -615,31 +496,6 @@ } } }, - "core/spacer": { - "variations": { - "xx-small": { - "css": "height: var(--wp--preset--spacing--10) !important" - }, - "x-small": { - "css": "height: var(--wp--preset--spacing--20) !important" - }, - "small": { - "css": "height: var(--wp--preset--spacing--30) !important" - }, - "medium": { - "css": "height: var(--wp--preset--spacing--40) !important" - }, - "large": { - "css": "height: var(--wp--preset--spacing--50) !important" - }, - "x-large": { - "css": "height: var(--wp--preset--spacing--60) !important" - }, - "xx-large": { - "css": "height: var(--wp--preset--spacing--70) !important" - } - } - }, "core/table": { "spacing": { "margin": { @@ -684,7 +540,7 @@ } }, "typography": { - "fontFamily": "var(--wp--preset--font-family--roboto)", + "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "var(--wp--custom--font-weight--bold)" } }, @@ -753,41 +609,44 @@ }, "button": { "border": { - "radius": "100px" + "width": "1px", + "style": "solid", + "color": "transparent", + "radius": "var(--border-radius-full)" }, "color": { - "background": "var(--themed-button-background-color)", - "text": "var(--themed-button-text-color)" + "background": "var(--wp--preset--color--blue)", + "text": "var(--wp--preset--color--base-white)" }, "spacing": { "padding": { - "top": "0.7813rem", - "right": "1.5625rem", - "bottom": "0.7813rem", - "left": "1.5625rem" + "top": "var(--wp--preset--spacing--20)", + "right": "var(--wp--preset--spacing--30)", + "bottom": "var(--wp--preset--spacing--20)", + "left": "var(--wp--preset--spacing--30)" } }, "typography": { "fontSize": "var(--wp--preset--font-size--20)", "fontWeight": "var(--wp--custom--font-weight--bold)", - "lineHeight": "1.3" + "lineHeight": "1" }, ":hover": { "color": { - "background": "var(--themed-button-hover-background-color)", - "text": "var(--themed-button-hover-text-color)" + "background": "var(--color-dark-blue)", + "text": "var(--wp--preset--color--base-white)" } }, ":focus": { "color": { - "background": "var(--themed-button-hover-background-color)", - "text": "var(--themed-button-hover-text-color)" + "background": "var(--color-dark-blue)", + "text": "var(--wp--preset--color--base-white)" } } } }, "typography": { - "fontFamily": "var(--wp--preset--font-family--roboto)", + "fontFamily": "var(--wp--preset--font-family--inter)", "fontSize": "var(--wp--preset--font-size--20)", "fontStyle": "normal", "fontWeight": "var(--wp--custom--font-weight--regular)",