Merge pull request #152 from moderntribe/MOOSE-99/moose-2.0

[MOOSE-99] Moose 2.0

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).

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 ),

wp-content/themes/core/assets/pcss/_utilities.pcss

@@ -7,9 +7,6 @@
  *
  * ------------------------------------------------------------------------- */
 
-/* Color */
-@import "color/_utilities.pcss";
-
 /* Spacing */
 @import "spacing/_utilities.pcss";
 

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;
+	}
 }

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 */
 }

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);
 }

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;
 }

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);
 }