Assembler: Use variation partials and move styles.blocks.variations t…

…o styles.variations (#7891) * add partials for section styles * remove styles.blocks.variations from theme.json * move to styles.variations * Remove button outline styles * remove extraneous style from type-only variations * use slug and title for each section * version 4 theme.json * Make forms and inputs better across more styles * Update style.css * remove custom.input values * tweak input styles * add vermilian and gainsboro * add default duotone * better duotones across all variations * tweak default duotone * Update 43-moss.json
Automattic · Jul 8, 2024 · f5bc619 · f5bc619
1 parent c85eebe
commit f5bc619
Show file tree

Hide file tree

Showing 69 changed files with 7,398 additions and 12,252 deletions.
diff --git a/assembler/style.css b/assembler/style.css
@@ -15,6 +15,7 @@ Tags: blog, one-column, three-columns, wide-blocks, block-patterns, custom-color
 */
 
 /* Progresive enhancement to reduce widows and orphans. */
+
 h1,
 h2,
 h3,
@@ -29,12 +30,94 @@ p {
  text-wrap: pretty;
 }
 
-/* Tiny tweak to make sure footers are properly spaced. */
+/* Set default line height for font size presets. */
+
+.has-xx-large-font-size {
+ line-height: 1;
+}
+
+/* Add space between the header and first element, if its a paragraph. */
+
+.entry-content > p:first-child {
+ margin-top: var(--wp--style--root--padding-left);
+}
+
+/* Fields */
+
+label,
+.jetpack-field-label .rich-text.jetpack-field-label__input,
+.wp-block-jetpack-contact-form-container .wp-block-jetpack-contact-form label {
+ display: inline-block;
+ font-size: var(--wp--preset--font-size--small);
+ margin-bottom: 0.25em;
+ font-weight: inherit;
+}
+
+textarea,
+input:not([type=submit]):not([type=checkbox]),
+.wp-block-post-comments-form textarea,
+.wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]),
+.jetpack-contact-form .jetpack-field .jetpack-field__input,
+.jetpack-contact-form .jetpack-field .jetpack-field__textarea {
+ backdrop-filter: saturate(1.075);
+ background-color: transparent;
+ border-color: currentColor;
+ border-style: solid;
+ border-radius: 6px;
+ border-width: 1px;
+ box-shadow: none;
+ box-sizing: border-box;
+ color: currentColor;
+ filter: brightness(1.05);
+ font-size: var(--wp--preset--font-size--small);
+ font-weight: inherit;
+ line-height: 1.5;
+ min-height: 42px;
+ padding: 0.8rem 1rem;
+ width: 100%;
+}
+
+textarea:focus,
+input:not([type=submit]):focus,
+.wp-block-post-comments-form textarea:focus,
+.wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]):focus {
+ outline: 1px solid currentColor;
+}
+
+/* Jetpack Forms: Clean up errors */
+
+.contact-form__error {
+ font-size: 13px;
+}
+
+.contact-form__input-error {
+ font-size: 13px;
+ gap: 8px;
+}
+
+.contact-form__input-error .contact-form__warning-icon {
+ border-width: 0;
+}
+
+/* Jetpack Forms: Animated block style tweaks */
+
+.contact-form .is-style-animated .grunion-field-wrap.grunion-field-select-wrap .animated-label__label label,
+.contact-form .is-style-animated .grunion-field-wrap .grunion-field.has-placeholder ~ .animated-label__label label,
+.contact-form .is-style-animated .grunion-field-wrap .grunion-field:focus ~ .animated-label__label label,
+.contact-form .is-style-animated .grunion-field-wrap .grunion-field:not(:placeholder-shown) ~ .animated-label__label label {
+ opacity: 0.7;
+ font-size: 11px;
+}
+
+
+/* Make sure footers have no margin. */
+
 footer {
  margin-top: 0 !important;
 }
 
-/* Provide better default color for social links */
+/* Social Links: Better default color. */
+
 .wp-block-social-links.is-style-logos-only li.wp-social-link {
  color: currentcolor;
 }
@@ -48,17 +131,8 @@ footer {
  font-size: 20px;
 }
 
-/* Set default line height for font size presets. */
-.has-xx-large-font-size {
- line-height: 1;
-}
-
-/* Add space between the header and first element, if its a paragraph. */
-.entry-content > p:first-child {
- margin-top: var(--wp--style--root--padding-left);
-}
-
 /* Move header core/navigation to the right on mobile. */
+
 .order-0 {
  order: 0;
 }
@@ -98,70 +172,3 @@ footer {
 .overflow-hidden {
  overflow: hidden;
 }
-
-/* Style Jetpack forms */
-.wp-block-jetpack-contact-form-container {
- --jetpack--contact-form--input-padding-left: 16px !important;
-}
-
-.wp-block-jetpack-contact-form input,
-.wp-block-jetpack-contact-form textarea {
- backdrop-filter: saturate(1.1);
- background-color: transparent;
- border-color: var(--wp--custom--input--border--color);
- border-radius: var(--wp--custom--input--border--radius) !important; /* Requires !important to override local variables with theme variables. */
- border-width: var(--wp--custom--input--border--width) !important; /* Requires !important to override local variables with theme variables. */
- filter: brightness(0.975);
- font-size: inherit;
- color: inherit;
- transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.jetpack-contact-form .jetpack-field .jetpack-field__input,
-.jetpack-contact-form .jetpack-field .jetpack-field__textarea {
- border-color: var(--wp--custom--input--border--color);
-}
-
-.wp-block-jetpack-contact-form input:not(:placeholder-shown),
-.wp-block-jetpack-contact-form textarea:not(:placeholder-shown),
-.wp-block-jetpack-contact-form input:focus,
-.wp-block-jetpack-contact-form textarea:focus {
- filter: brightness(1);
- backdrop-filter: saturate(1);
-}
-
-.wp-block-jetpack-contact-form input:focus,
-.wp-block-jetpack-contact-form textarea:focus {
- border-color: var(--wp--custom--input--focus--border--color);
-}
-
-.contact-form .is-style-animated .grunion-field-wrap:not(.no-label) select,
-.contact-form .is-style-animated .grunion-field-wrap:not(.no-label) > input,
-.contact-form .is-style-animated .grunion-field-wrap:not(.no-label) > textarea {
- padding-top: var(--field-padding); /* Remove unnecessary padding adjustment from Jetpack. */
-}
-
-.contact-form .is-style-animated .grunion-field-wrap .animated-label__label {
- font-size: inherit;
- width: auto;
- padding: 0 4px;
- transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), top 0.15s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.contact-form .is-style-animated .grunion-field-wrap.grunion-field-select-wrap .animated-label__label,
-.contact-form .is-style-animated .grunion-field-wrap .grunion-field.has-placeholder ~ .animated-label__label,
-.contact-form .is-style-animated .grunion-field-wrap .grunion-field:focus ~ .animated-label__label,
-.contact-form .is-style-animated .grunion-field-wrap .grunion-field:not(:placeholder-shown) ~ .animated-label__label {
- background-color: var(--wp--custom--input--color--background) !important;
- transform: translateY(-11px) translateX(-4px); /* Moves the label out of the field. */
-}
-
-.contact-form label,
-.wp-block-jetpack-contact-form label,
-.jetpack-field-label .rich-text.jetpack-field-label__input {
- font-weight: 500;
-}
-
-.contact-form__input-error {
- font-size: var(--wp--preset--font-size--small);
-}
diff --git a/assembler/styles/block/section-1.json b/assembler/styles/block/section-1.json
@@ -0,0 +1,58 @@
+{
+ "$schema": "https://schemas.wp.org/trunk/theme.json",
+ "version": 3,
+ "slug": "section-1",
+ "title": "Style 1",
+ "blockTypes": [
+ "core/group",
+ "core/columns",
+ "core/column"
+ ],
+ "styles": {
+ "color": {
+ "background": "var(--wp--preset--color--theme-2)",
+ "text": "var(--wp--preset--color--theme-5)"
+ },
+ "blocks": {
+ "core/paragraph": {
+ "elements": {
+ "link": {
+ "color": {
+ "text": "var(--wp--preset--color--theme-5)"
+ }
+ }
+ }
+ },
+ "core/separator": {
+ "color": {
+ "background": "var(--wp--preset--color--theme-5)",
+ "text": "var(--wp--preset--color--theme-5)"
+ }
+ }
+ },
+ "elements": {
+ "button": {
+ "color": {
+ "background": "var(--wp--preset--color--theme-4)",
+ "text": "var(--wp--preset--color--theme-1)"
+ },
+ ":hover": {
+ "color": {
+ "background": "var(--wp--preset--color--theme-5)",
+ "text": "var(--wp--preset--color--theme-1)"
+ }
+ }
+ },
+ "heading": {
+ "color": {
+ "text": "var(--wp--preset--color--theme-5)"
+ }
+ },
+ "link": {
+ "color": {
+ "text": "var(--wp--preset--color--theme-5)"
+ }
+ }
+ }
+ }
+}
diff --git a/assembler/styles/block/section-2.json b/assembler/styles/block/section-2.json
@@ -0,0 +1,58 @@
+{
+ "$schema": "https://schemas.wp.org/trunk/theme.json",
+ "version": 3,
+ "slug": "section-2",
+ "title": "Style 2",
+ "blockTypes": [
+ "core/group",
+ "core/columns",
+ "core/column"
+ ],
+ "styles": {
+ "color": {
+ "background": "var(--wp--preset--color--theme-4)",
+ "text": "var(--wp--preset--color--theme-3)"
+ },
+ "blocks": {
+ "core/paragraph": {
+ "elements": {
+ "link": {
+ "color": {
+ "text": "var(--wp--preset--color--theme-3)"
+ }
+ }
+ }
+ },
+ "core/separator": {
+ "color": {
+ "background": "var(--wp--preset--color--theme-3)",
+ "text": "var(--wp--preset--color--theme-3)"
+ }
+ }
+ },
+ "elements": {
+ "button": {
+ "color": {
+ "background": "var(--wp--preset--color--theme-1)",
+ "text": "var(--wp--preset--color--theme-5)"
+ },
+ ":hover": {
+ "color": {
+ "background": "var(--wp--preset--color--theme-2)",
+ "text": "var(--wp--preset--color--theme-5)"
+ }
+ }
+ },
+ "heading": {
+ "color": {
+ "text": "var(--wp--preset--color--theme-1)"
+ }
+ },
+ "link": {
+ "color": {
+ "text": "var(--wp--preset--color--theme-3)"
+ }
+ }
+ }
+ }
+}
diff --git a/assembler/styles/block/section-3.json b/assembler/styles/block/section-3.json
@@ -0,0 +1,58 @@
+{
+ "$schema": "https://schemas.wp.org/trunk/theme.json",
+ "version": 3,
+ "slug": "section-3",
+ "title": "Style 3",
+ "blockTypes": [
+ "core/group",
+ "core/columns",
+ "core/column"
+ ],
+ "styles": {
+ "color": {
+ "background": "var(--wp--preset--color--theme-5)",
+ "text": "var(--wp--preset--color--theme-3)"
+ },
+ "blocks": {
+ "core/paragraph": {
+ "elements": {
+ "link": {
+ "color": {
+ "text": "var(--wp--preset--color--theme-3)"
+ }
+ }
+ }
+ },
+ "core/separator": {
+ "color": {
+ "background": "var(--wp--preset--color--theme-3)",
+ "text": "var(--wp--preset--color--theme-3)"
+ }
+ }
+ },
+ "elements": {
+ "button": {
+ "color": {
+ "background": "var(--wp--preset--color--theme-1)",
+ "text": "var(--wp--preset--color--theme-5)"
+ },
+ ":hover": {
+ "color": {
+ "background": "var(--wp--preset--color--theme-2)",
+ "text": "var(--wp--preset--color--theme-5)"
+ }
+ }
+ },
+ "heading": {
+ "color": {
+ "text": "var(--wp--preset--color--theme-1)"
+ }
+ },
+ "link": {
+ "color": {
+ "text": "var(--wp--preset--color--theme-3)"
+ }
+ }
+ }
+ }
+}