ソースを参照

Lynx: Add style variations. (#6607)

* Lynx: Misc updates to theme.jason in preparation for style variations.

* Lynx: Add color style variations.

* Lynx: Add a basic link in bio pattern.

* Lynx: Remove unnecessary bits of code.
alaczek 2 年 前
コミット
4349c05a09

+ 40 - 0
lynx/patterns/link-in-bio-basic.php

@@ -0,0 +1,40 @@
+<?php
+/**
+ * Title: Basic Link in Bio pattern
+ * Slug: lynx/link-in-bio-basic
+ * Inserter: yes
+ * Categories: featured, link-in-bio
+ */
+?>
+
+<!-- wp:cover {"overlayColor":"background","minHeight":100,"minHeightUnit":"vh","isDark":false,"align":"full"} -->
+<div class="wp-block-cover alignfull is-light" style="min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"type":"constrained"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}}} -->
+<div class="wp-block-group"><!-- wp:site-logo {"align":"center","className":"is-style-rounded"} /-->
+
+<!-- wp:site-title {"textAlign":"center","isLink":false,"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"x-large"} /-->
+
+<!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /-->
+
+<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}}} -->
+<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--60)"><!-- wp:button {"width":100,"className":"is-style-fill"} -->
+<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"><a class="wp-block-button__link wp-element-button"><?php echo  esc_html__( 'Must read: The Place That Made Me', 'lynx' ); ?></a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"width":100,"className":"is-style-fill"} -->
+<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"><a class="wp-block-button__link wp-element-button"><?php echo  esc_html__( 'Rain Journal by Richard Johnson', 'lynx' ); ?></a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"width":100,"className":"is-style-fill"} -->
+<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"><a class="wp-block-button__link wp-element-button"><?php echo  esc_html__( '10th Day of Rain', 'lynx' ); ?></a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"width":100,"className":"is-style-fill"} -->
+<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"><a class="wp-block-button__link wp-element-button"><?php echo  esc_html__( 'Blurring the Lines Between Architecture and Nature', 'lynx' ); ?></a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"width":100,"className":"is-style-fill"} -->
+<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"><a class="wp-block-button__link wp-element-button"><?php echo  esc_html__( 'Instant Classic: A story of Persistence', 'lynx' ); ?></a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:group --></div></div>
+<!-- /wp:cover -->

+ 35 - 0
lynx/styles/blue.json

@@ -0,0 +1,35 @@
+{
+	"version": 2,
+	"title": "Blue",
+	"settings": {
+		"color": {
+			"palette": [
+				{
+					"slug": "foreground",
+					"color": "#3F67C6",
+					"name": "Foreground"
+				},
+				{
+					"slug": "background",
+					"color": "#FCF5ED",
+					"name": "Background"
+				},
+				{
+					"slug": "primary",
+					"color": "#385BAD",
+					"name": "Primary"
+				},
+				{
+					"slug": "secondary",
+					"color": "#F7EBDD",
+					"name": "Secondary"
+				},
+				{
+					"slug": "tertiary",
+					"color": "#ffffff",
+					"name": "Tertiary"
+				}
+			]
+		}
+	}
+}

+ 30 - 0
lynx/styles/green.json

@@ -0,0 +1,30 @@
+{
+	"version": 2,
+	"title": "Green",
+	"settings": {
+		"color": {
+			"palette": [
+				{
+					"slug": "primary",
+					"color": "#98ADAE",
+					"name": "Primary"
+				},
+				{
+					"slug": "tertiary",
+					"color": "#0a2c25",
+					"name": "Tertiary"
+				},
+				{
+					"slug": "foreground",
+					"color": "#f5d5ca",
+					"name": "Foreground"
+				},
+				{
+					"slug": "background",
+					"color": "#103931",
+					"name": "Background"
+				}
+			]
+		}
+	}
+}

+ 50 - 0
lynx/styles/navy.json

@@ -0,0 +1,50 @@
+{
+	"version": 2,
+	"title": "Dark Navy",
+	"settings": {
+		"color": {
+			"palette": [
+				{
+					"slug": "primary",
+					"color": "#DEFFEF",
+					"name": "Primary"
+				},
+				{
+					"slug": "tertiary",
+					"color": "#0F1E42",
+					"name": "Tertiary"
+				},
+				{
+					"slug": "foreground",
+					"color": "#A6FFD4",
+					"name": "Foreground"
+				},
+				{
+					"slug": "background",
+					"color": "#050E24",
+					"name": "Background"
+				}
+			]
+		}
+	},
+	"styles": {
+		"blocks": {
+			"core/button": {
+				"border": {
+					"radius": "0px"
+				},
+				"color": {
+					"background": "var(--wp--preset--color--foreground)",
+					"text": "var(--wp--preset--color--background)"
+				},
+				"typography": {
+					"fontSize": "0.9rem",
+					"fontWeight": "600",
+					"letterSpacing": "0.1em",
+					"lineHeight": 1.7,
+					"textTransform": "uppercase"
+				}
+			}
+		}
+	}
+}

+ 43 - 0
lynx/styles/neon.json

@@ -0,0 +1,43 @@
+{
+	"version": 2,
+	"title": "Neon",
+	"settings": {
+		"color": {
+			"palette": [
+				{
+					"slug": "primary",
+					"color": "#DFF76D",
+					"name": "Primary"
+				},
+				{
+					"slug": "foreground",
+					"color": "#000000",
+					"name": "Foreground"
+				},
+				{
+					"slug": "background",
+					"color": "#C5A8F9",
+					"name": "Background"
+				},
+				{
+					"slug": "tertiary",
+					"color": "#F9EAFF",
+					"name": "Tertiary"
+				}
+			]
+		}
+	},
+	"styles": {
+		"blocks": {
+			"core/button": {
+				"border": {
+					"radius": "100px"
+				},
+				"color": {
+					"background": "var(--wp--preset--color--primary)",
+					"text": "var(--wp--preset--color--foreground)"
+				}
+			}
+		}
+	}
+}

+ 48 - 0
lynx/styles/orange.json

@@ -0,0 +1,48 @@
+{
+	"version": 2,
+	"title": "Yellow",
+	"settings": {
+		"color": {
+			"palette": [
+				{
+					"slug": "primary",
+					"color": "#EC602E",
+					"name": "Primary"
+				},
+				{
+					"slug": "secondary",
+					"color": "#ffffff",
+					"name": "Secondary"
+				},
+				{
+					"slug": "tertiary",
+					"color": "#FAE14C",
+					"name": "Tertiary"
+				},
+				{
+					"slug": "foreground",
+					"color": "#000000",
+					"name": "Foreground"
+				},
+				{
+					"slug": "background",
+					"color": "#FAE14C",
+					"name": "Background"
+				}
+			]
+		}
+	},
+	"styles": {
+		"blocks": {
+			"core/button": {
+				"border": {
+					"radius": "100px"
+				},
+				"color": {
+					"background": "var(--wp--preset--color--primary)",
+					"text": "var(--wp--preset--color--secondary)"
+				}
+			}
+		}
+	}
+}

+ 30 - 0
lynx/styles/pink.json

@@ -0,0 +1,30 @@
+{
+	"version": 2,
+	"title": "Pink",
+	"settings": {
+		"color": {
+			"palette": [
+				{
+					"slug": "primary",
+					"color": "#000000",
+					"name": "Primary"
+				},
+				{
+					"slug": "foreground",
+					"color": "#000000",
+					"name": "Foreground"
+				},
+				{
+					"slug": "background",
+					"color": "#F5DAFF",
+					"name": "Background"
+				},
+				{
+					"slug": "tertiary",
+					"color": "#F9EAFF",
+					"name": "Tertiary"
+				}
+			]
+		}
+	}
+}

+ 8 - 5
lynx/theme.json

@@ -33,7 +33,13 @@
 					"slug": "foreground",
 					"color": "#1E1E1E",
 					"name": "Foreground"
+				},
+				{
+					"slug": "background",
+					"color": "#FFFFFF",
+					"name": "Background"
 				}
+
 			]
 		},
 		"custom": {
@@ -147,10 +153,7 @@
 				},
 				"color": {
 					"background": "var(--wp--preset--color--foreground)",
-					"text": "var(--wp--preset--color--secondary)"
-				},
-				"spacing": {
-					"padding": "1.25em 1.15em 1.15em 1.15em"
+					"text": "var(--wp--preset--color--background)"
 				},
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--small)"
@@ -195,7 +198,7 @@
 			}
 		},
 		"color": {
-			"background": "#fff",
+			"background": "var(--wp--preset--color--background)",
 			"text": "var(--wp--preset--color--foreground)"
 		},
 		"elements": {