Skip to content

Commit

Permalink
added logical properties to subs blocks (#1860)
Browse files Browse the repository at this point in the history
* added logical properties to subs blocks

* updated widths

* updated margins

* updated margin-top
blakeganderson authored Dec 22, 2023
1 parent f1f5195 commit 4e575c0
Showing 2 changed files with 308 additions and 160 deletions.
234 changes: 154 additions & 80 deletions blocks/subscriptions-block/themes/commerce.json
Original file line number Diff line number Diff line change
@@ -3,18 +3,22 @@
"styles": {
"default": {
"font-family": "var(--font-family-primary)",
"margin-bottom": "var(--global-spacing-5)",
"margin-block-end": "var(--global-spacing-5)",
"components": {
"heading": {
"font-size": "var(--global-font-size-12)"
},
"link": {
"color": "var(--color-primary)",
"border-bottom": "1px solid var(--color-primary)"
"border-block-end-width": "1px",
"border-block-end-style": "solid",
"border-block-end-color": "var(--color-primary)"
},
"link-hover": {
"color": "var(--color-primary-hover)",
"border-bottom": "1px solid var(--color-primary-hover)"
"border-block-end-width": "1px",
"border-block-end-style": "solid",
"border-block-end-color": "var(--color-primary-hover)"
}
}
}
@@ -23,10 +27,10 @@
"checkout-cart": {
"styles": {
"default": {
"margin-top": "var(--global-spacing-6)",
"margin-block-start": "var(--global-spacing-6)",
"components": {
"heading": {
"margin-bottom": "var(--global-spacing-5)",
"margin-block-end": "var(--global-spacing-5)",
"font-size": "var(--global-font-size-11)"
}
}
@@ -36,7 +40,18 @@
"checkout-cart-items": {
"styles": {
"default": {
"border": "1px solid var(--border-color)"
"border-block-start-width": "1px",
"border-block-end-width": "1px",
"border-inline-start-width": "1px",
"border-inline-end-width": "1px",
"border-block-start-style": "solid",
"border-block-end-style": "solid",
"border-inline-start-style": "solid",
"border-inline-end-style": "solid",
"border-block-start-color": "var(--border-color)",
"border-block-end-color": "var(--border-color)",
"border-inline-start-color": "var(--border-color)",
"border-inline-end-color": "var(--border-color)"
}
}
},
@@ -45,8 +60,14 @@
"default": {
"color": "$global.neutral-6",
"font-size": "var(--global-font-size-4)",
"margin": "0 var(--global-spacing-2)",
"padding": "var(--global-spacing-2) 0"
"margin-block-start": "0",
"margin-inline-end": "var(--global-spacing-2)",
"margin-block-end": "0",
"margin-inline-start": "var(--global-spacing-2)",
"padding-block-start": "var(--global-spacing-2)",
"padding-inline-end": "0",
"padding-block-end": "var(--global-spacing-2)",
"padding-inline-start": "0"
}
}
},
@@ -68,10 +89,10 @@
"checkout-contact-info": {
"styles": {
"default": {
"margin-top": "var(--global-spacing-6)",
"margin-block-start": "var(--global-spacing-6)",
"components": {
"heading": {
"margin-bottom": "var(--global-spacing-5)",
"margin-block-end": "var(--global-spacing-5)",
"font-size": "var(--global-font-size-11)"
},
"input": {
@@ -82,7 +103,6 @@
},
"input-input": {
"inline-size": "100%",
"width": "100%",
"padding-block-end": "var(--global-spacing-2)",
"padding-block-start": "var(--global-spacing-2)",
"padding-inline-end": "var(--global-spacing-2)",
@@ -96,7 +116,7 @@
"styles": {
"default": {
"display": "grid",
"width": "100%",
"inline-size": "100%",
"grid-template-columns": "repeat(2, 1fr)",
"column-gap": "var(--global-spacing-5)"
}
@@ -105,21 +125,27 @@
"checkout-identity-row": {
"styles": {
"default": {
"width": "100%",
"inline-size": "100%",
"display": "inline-flex",
"align-items": "center",
"line-height": "var(--global-line-height-4)",
"components": {
"image": {
"width": "var(--global-spacing-4)",
"height": "var(--global-spacing-4)",
"margin": "0 var(--global-spacing-2) 0 0"
"inline-size": "var(--global-spacing-4)",
"block-size": "var(--global-spacing-4)",
"margin-block-start": "0",
"margin-inline-end": "var(--global-spacing-2)",
"margin-block-end": "0",
"margin-inline-start": "0"
},
"icon": {
"fill": "#415993",
"width": "var(--global-spacing-4)",
"height": "var(--global-spacing-4)",
"margin": "0 var(--global-spacing-2) 0 0"
"inline-size": "var(--global-spacing-4)",
"block-size": "var(--global-spacing-4)",
"margin-block-start": "0",
"margin-inline-end": "var(--global-spacing-2)",
"margin-block-end": "0",
"margin-inline-start": "0"
}
}
}
@@ -128,31 +154,31 @@
"checkout-payment": {
"styles": {
"default": {
"width": "100%"
"inline-size": "100%"
}
}
},
"checkout-payment-form": {
"styles": {
"default": {
"display": "grid",
"margin-top": "var(--global-spacing-5)",
"margin-block-start": "var(--global-spacing-5)",
"gap": "var(--global-spacing-6)"
}
}
},
"checkout-payment-info": {
"styles": {
"default": {
"width": "100%",
"margin-top": "var(--global-spacing-6)",
"inline-size": "100%",
"margin-block-start": "var(--global-spacing-6)",
"align-items": "flex-start",
"display": "flex",
"flex-direction": "column",
"components": {
"paragraph": {
"margin-top": "var(--global-spacing-2)",
"text-align":"center",
"margin-block-start": "var(--global-spacing-2)",
"text-align": "center",
"font-size": "0.875rem",
"font-style": "normal",
"line-height": "1rem",
@@ -167,8 +193,8 @@
"checkout-payment-info-payments": {
"styles": {
"default": {
"margin-top": "var(--global-spacing-5)",
"width": "100%",
"margin-block-start": "var(--global-spacing-5)",
"inline-size": "100%",
"display": "flex",
"flex-direction": "row",
"justify-content": "space-around"
@@ -178,7 +204,7 @@
"checkout-payment-info-paypal": {
"styles": {
"default": {
"width": "33%",
"inline-size": "33%",
"align-items": "center",
"display": "flex",
"flex-direction": "column"
@@ -188,8 +214,8 @@
"checkout-payment-info-paypal-button": {
"styles": {
"default": {
"width": "9.5rem",
"height": "var(--global-spacing-7)",
"inline-size": "9.5rem",
"block-size": "var(--global-spacing-7)",
"background-color": "#E0E3EE",
"border-radius": "3.13rem",
"justify-content": "center",
@@ -198,7 +224,7 @@
"flex-wrap": "wrap",
"components": {
"img": {
"width": "4.97rem"
"inline-size": "4.97rem"
}
}
}
@@ -216,22 +242,22 @@
"default": {
"display": "flex",
"flex-direction": "row",
"align-items":"center",
"width":"100%",
"justify-content":"center",
"margin-top": "var(--global-spacing-5)",
"align-items": "center",
"inline-size": "100%",
"justify-content": "center",
"margin-block-start": "var(--global-spacing-5)",
"components": {
"paragraph": {
"margin-left":"var(--global-spacing-5)",
"margin-right":"var(--global-spacing-5)",
"text-align":"center",
"margin-inline-start": "var(--global-spacing-5)",
"margin-inline-end": "var(--global-spacing-5)",
"text-align": "center",
"font-family": "sans-serif",
"font-size": "0.875rem",
"font-style": "normal",
"font-weight": "500",
"line-height": "1rem",
"letter-spacing": "0.0175rem",
"min-width": "max-content"
"min-inline-size": "max-content"
}
}
}
@@ -241,16 +267,16 @@
"styles": {
"default": {
"background-color": "#DADADA",
"height": "0.0625rem",
"width": "100%",
"min-width": "13.5625rem"
"block-size": "0.0625rem",
"inline-size": "100%",
"min-inline-size": "13.5625rem"
}
}
},
"checkout-payment-information": {
"styles": {
"default": {
"width": "100%",
"inline-size": "100%",
"gap": "var(--global-spacing-5)",
"grid-template-columns": "1fr",
"components": {
@@ -264,7 +290,6 @@
},
"input-input": {
"inline-size": "100%",
"width": "100%",
"padding-block-end": "var(--global-spacing-2)",
"padding-block-start": "var(--global-spacing-2)",
"padding-inline-end": "var(--global-spacing-2)",
@@ -294,7 +319,10 @@
"checkout-payment-form--stripe-element": {
"styles": {
"default": {
"padding": "var(--global-spacing-2)"
"padding-block-start": "var(--global-spacing-2)",
"padding-inline-end": "var(--global-spacing-2)",
"padding-block-end": "var(--global-spacing-2)",
"padding-inline-start": "var(--global-spacing-2)"
}
}
},
@@ -304,7 +332,18 @@
"display": "grid",
"gap": "none",
"border-radius": "var(--border-radius)",
"border": "1px solid var(--border-color)"
"border-block-start-width": "1px",
"border-block-end-width": "1px",
"border-inline-start-width": "1px",
"border-inline-end-width": "1px",
"border-block-start-style": "solid",
"border-block-end-style": "solid",
"border-inline-start-style": "solid",
"border-inline-end-style": "solid",
"border-block-start-color": "var(--border-color)",
"border-block-end-color": "var(--border-color)",
"border-inline-start-color": "var(--border-color)",
"border-inline-end-color": "var(--border-color)"
}
}
},
@@ -314,33 +353,51 @@
"display": "grid",
"gap": "none",
"border-radius": "var(--border-radius)",
"border": "1px solid var(--border-color)",
"border-block-start-width": "1px",
"border-block-end-width": "1px",
"border-inline-start-width": "1px",
"border-inline-end-width": "1px",
"border-block-start-style": "solid",
"border-block-end-style": "solid",
"border-inline-start-style": "solid",
"border-inline-end-style": "solid",
"border-block-start-color": "var(--border-color)",
"border-block-end-color": "var(--border-color)",
"border-inline-start-color": "var(--border-color)",
"border-inline-end-color": "var(--border-color)",
"input-input": {
"padding": "0"
"padding-block-start": "0",
"padding-inline-end": "0",
"padding-block-end": "0",
"padding-inline-start": "0"
}
}
}
},
"checkout-payment-form--border-bottom": {
"styles": {
"default": {
"border-bottom": "1px solid var(--border-color)"
"border-block-end-width": "1px",
"border-block-end-style": "solid",
"border-block-end-color": "var(--border-color)"
}
}
},
"checkout-payment-form--stripe-row": {
"styles": {
"default": {
"display": "grid",
"width": "100%",
"inline-size": "100%",
"grid-template-columns": "repeat(2, 1fr)"
}
}
},
"checkout-payment-form--border-right": {
"styles": {
"default": {
"border-right": "1px solid var(--border-color)"
"border-inline-end-width": "1px",
"border-inline-end-style": "solid",
"border-inline-end-color": "var(--border-color)"
}
}
},
@@ -357,8 +414,8 @@
"offer-headings": {
"styles": {
"default": {
"margin-top": "var(--global-spacing-9)",
"max-width": "40%",
"margin-block-start": "var(--global-spacing-9)",
"max-inline-size": "40%",
"display": "flex",
"flex-direction": "column",
"justify-content": "center",
@@ -373,7 +430,7 @@
"font-weight": "var(--global-font-weight-7)",
"font-size": "var(--global-font-size-15)",
"line-height": "var(--global-line-height-6)",
"margin-bottom": "var(--global-spacing-4)"
"margin-block-end": "var(--global-spacing-4)"
}
}
},
@@ -388,8 +445,8 @@
"offer-wrapper": {
"styles": {
"default": {
"margin-top": "var(--global-spacing-5)",
"margin-bottom": "var(--global-spacing-6)"
"margin-block-start": "var(--global-spacing-5)",
"margin-block-end": "var(--global-spacing-6)"
}
}
},
@@ -448,30 +505,41 @@
"styles": {
"default": {
"align-items": "center",
"border": "1px solid var(--border-color)",
"border-block-start-width": "1px",
"border-block-end-width": "1px",
"border-inline-start-width": "1px",
"border-inline-end-width": "1px",
"border-block-start-style": "solid",
"border-block-end-style": "solid",
"border-inline-start-style": "solid",
"border-inline-end-style": "solid",
"border-block-start-color": "var(--border-color)",
"border-block-end-color": "var(--border-color)",
"border-inline-start-color": "var(--border-color)",
"border-inline-end-color": "var(--border-color)",
"border-radius": "var(--border-radius)",
"display": "flex",
"flex-direction": "column",
"padding-top": "var(--global-spacing-8)",
"padding-right": "var(--global-spacing-6)",
"padding-bottom": "var(--global-spacing-6)",
"padding-left": "var(--global-spacing-6)",
"padding-block-start": "var(--global-spacing-8)",
"padding-inline-end": "var(--global-spacing-6)",
"padding-block-end": "var(--global-spacing-6)",
"padding-inline-start": "var(--global-spacing-6)",
"components": {
"heading": {
"font-size": "var(--global-font-size-9)",
"text-align": "center",
"margin-bottom": "var(--global-spacing-4)",
"margin-block-end": "var(--global-spacing-4)",
"font-weight": "var(--global-font-weight-7)",
"line-height": "var(--global-line-height-6)"
},
"paragraph": {
"font-size": "var(--global-font-size-7)",
"font-weight": "var(--global-font-weight-4)",
"text-align": "center",
"margin-bottom": "var(--global-spacing-4)"
"margin-block-end": "var(--global-spacing-4)"
},
"button-large": {
"margin-bottom": "var(--global-spacing-4)"
"margin-block-end": "var(--global-spacing-4)"
}
}
}
@@ -493,9 +561,12 @@
"components": {
"icon": {
"display": "flex",
"width": "var(--global-spacing-4)",
"height": "var(--global-spacing-4)",
"margin": "0 var(--global-spacing-2) 0 0"
"inline-size": "var(--global-spacing-4)",
"block-size": "var(--global-spacing-4)",
"margin-block-start": "0",
"margin-inline-end": "var(--global-spacing-2)",
"margin-block-end": "0",
"margin-inline-start": "0"
}
}
}
@@ -505,14 +576,14 @@
"styles": {
"default": {
"background-color": "rgba(0, 0, 0, 0.63)",
"bottom": 0,
"left": 0,
"right": 0,
"top": 0,
"inset-block-end": 0,
"inset-inline-start": 0,
"inset-inline-end": 0,
"inset-block-start": 0,
"overflow": "auto",
"pointer-events": "all",
"position": "fixed",
"height": "100vh",
"block-size": "100vh",
"z-index": 1
}
}
@@ -525,13 +596,13 @@
"background-color": "var(--global-white)",
"display": "flex",
"flex-direction": "column",
"margin-top": "50vh",
"max-height": "75vh",
"min-height": "50vh",
"margin-block-start": "50vh",
"max-block-size": "75vh",
"min-block-size": "50vh",
"overflow": "auto",
"components": {
"stack": {
"width": "100%"
"inline-size": "100%"
}
}
}
@@ -540,7 +611,10 @@
"paywall-subscription-dialog": {
"styles": {
"default": {
"padding": "var(--global-spacing-6)",
"padding-block-start": "var(--global-spacing-6)",
"padding-inline-end": "var(--global-spacing-6)",
"padding-block-end": "var(--global-spacing-6)",
"padding-inline-start": "var(--global-spacing-6)",
"align-items": "center",
"grid-template-rows": "auto",
"gap": "var(--global-spacing-6)",
@@ -564,7 +638,7 @@
"paywall-subscription-dialog-link-prompt-pre-link": {
"styles": {
"default": {
"margin-right": "var(--global-spacing-2)"
"margin-inline-end": "var(--global-spacing-2)"
}
}
},
@@ -575,7 +649,7 @@
}
}
},
"paywall-subscription-dialog-offer-info":{
"paywall-subscription-dialog-offer-info": {
"styles": {
"default": {
"gap": "var(--global-spacing-4)",
@@ -588,7 +662,7 @@
}
}
},
"paywall-subscription-dialog-subheadline":{
"paywall-subscription-dialog-subheadline": {
"styles": {
"default": {
"font-size": "var(--heading-level-6-font-size)"
234 changes: 154 additions & 80 deletions blocks/subscriptions-block/themes/news.json
Original file line number Diff line number Diff line change
@@ -3,18 +3,22 @@
"styles": {
"default": {
"font-family": "var(--font-family-primary)",
"margin-bottom": "var(--global-spacing-5)",
"margin-block-end": "var(--global-spacing-5)",
"components": {
"heading": {
"font-size": "var(--global-font-size-12)"
},
"link": {
"color": "var(--color-primary)",
"border-bottom": "1px solid var(--color-primary)"
"border-block-end-width": "1px",
"border-block-end-style": "solid",
"border-block-end-color": "var(--color-primary)"
},
"link-hover": {
"color": "var(--color-primary-hover)",
"border-bottom": "1px solid var(--color-primary-hover)"
"border-block-end-width": "1px",
"border-block-end-style": "solid",
"border-block-end-color": "var(--color-primary-hover)"
}
}
}
@@ -23,10 +27,10 @@
"checkout-cart": {
"styles": {
"default": {
"margin-top": "var(--global-spacing-6)",
"margin-block-start": "var(--global-spacing-6)",
"components": {
"heading": {
"margin-bottom": "var(--global-spacing-5)",
"margin-block-end": "var(--global-spacing-5)",
"font-size": "var(--global-font-size-11)"
}
}
@@ -36,7 +40,18 @@
"checkout-cart-items": {
"styles": {
"default": {
"border": "1px solid var(--border-color)"
"border-block-start-width": "1px",
"border-block-end-width": "1px",
"border-inline-start-width": "1px",
"border-inline-end-width": "1px",
"border-block-start-style": "solid",
"border-block-end-style": "solid",
"border-inline-start-style": "solid",
"border-inline-end-style": "solid",
"border-block-start-color": "var(--border-color)",
"border-block-end-color": "var(--border-color)",
"border-inline-start-color": "var(--border-color)",
"border-inline-end-color": "var(--border-color)"
}
}
},
@@ -45,8 +60,14 @@
"default": {
"color": "$global.neutral-6",
"font-size": "var(--global-font-size-4)",
"margin": "0 var(--global-spacing-2)",
"padding": "var(--global-spacing-2) 0"
"margin-block-start": "0",
"margin-inline-end": "var(--global-spacing-2)",
"margin-block-end": "0",
"margin-inline-start": "var(--global-spacing-2)",
"padding-block-start": "var(--global-spacing-2)",
"padding-inline-end": "0",
"padding-block-end": "var(--global-spacing-2)",
"padding-inline-start": "0"
}
}
},
@@ -68,10 +89,10 @@
"checkout-contact-info": {
"styles": {
"default": {
"margin-top": "var(--global-spacing-6)",
"margin-block-start": "var(--global-spacing-6)",
"components": {
"heading": {
"margin-bottom": "var(--global-spacing-5)",
"margin-block-end": "var(--global-spacing-5)",
"font-size": "var(--global-font-size-11)"
},
"input": {
@@ -82,7 +103,6 @@
},
"input-input": {
"inline-size": "100%",
"width": "100%",
"padding-block-end": "var(--global-spacing-2)",
"padding-block-start": "var(--global-spacing-2)",
"padding-inline-end": "var(--global-spacing-2)",
@@ -96,7 +116,7 @@
"styles": {
"default": {
"display": "grid",
"width": "100%",
"inline-size": "100%",
"grid-template-columns": "repeat(2, 1fr)",
"column-gap": "var(--global-spacing-5)"
}
@@ -105,21 +125,27 @@
"checkout-identity-row": {
"styles": {
"default": {
"width": "100%",
"inline-size": "100%",
"display": "inline-flex",
"align-items": "center",
"line-height": "var(--global-line-height-4)",
"components": {
"image": {
"width": "var(--global-spacing-4)",
"height": "var(--global-spacing-4)",
"margin": "0 var(--global-spacing-2) 0 0"
"inline-size": "var(--global-spacing-4)",
"block-size": "var(--global-spacing-4)",
"margin-block-start": "0",
"margin-inline-end": "var(--global-spacing-2)",
"margin-block-end": "0",
"margin-inline-start": "0"
},
"icon": {
"fill": "#415993",
"width": "var(--global-spacing-4)",
"height": "var(--global-spacing-4)",
"margin": "0 var(--global-spacing-2) 0 0"
"inline-size": "var(--global-spacing-4)",
"block-size": "var(--global-spacing-4)",
"margin-block-start": "0",
"margin-inline-end": "var(--global-spacing-2)",
"margin-block-end": "0",
"margin-inline-start": "0"
}
}
}
@@ -128,31 +154,31 @@
"checkout-payment": {
"styles": {
"default": {
"width": "100%"
"inline-size": "100%"
}
}
},
"checkout-payment-form": {
"styles": {
"default": {
"display": "grid",
"margin-top": "var(--global-spacing-5)",
"margin-block-start": "var(--global-spacing-5)",
"gap": "var(--global-spacing-6)"
}
}
},
"checkout-payment-info": {
"styles": {
"default": {
"width": "100%",
"margin-top": "var(--global-spacing-6)",
"inline-size": "100%",
"margin-block-start": "var(--global-spacing-6)",
"align-items": "flex-start",
"display": "flex",
"flex-direction": "column",
"components": {
"paragraph": {
"margin-top": "var(--global-spacing-2)",
"text-align":"center",
"margin-block-start": "var(--global-spacing-2)",
"text-align": "center",
"font-size": "0.875rem",
"font-style": "normal",
"line-height": "1rem",
@@ -167,8 +193,8 @@
"checkout-payment-info-payments": {
"styles": {
"default": {
"margin-top": "var(--global-spacing-5)",
"width": "100%",
"margin-block-start": "var(--global-spacing-5)",
"inline-size": "100%",
"display": "flex",
"flex-direction": "row",
"justify-content": "space-around"
@@ -178,7 +204,7 @@
"checkout-payment-info-paypal": {
"styles": {
"default": {
"width": "33%",
"inline-size": "33%",
"align-items": "center",
"display": "flex",
"flex-direction": "column"
@@ -188,8 +214,8 @@
"checkout-payment-info-paypal-button": {
"styles": {
"default": {
"width": "9.5rem",
"height": "var(--global-spacing-7)",
"inline-size": "9.5rem",
"block-size": "var(--global-spacing-7)",
"background-color": "#E0E3EE",
"border-radius": "3.13rem",
"justify-content": "center",
@@ -198,7 +224,7 @@
"flex-wrap": "wrap",
"components": {
"img": {
"width": "4.97rem"
"inline-size": "4.97rem"
}
}
}
@@ -216,22 +242,22 @@
"default": {
"display": "flex",
"flex-direction": "row",
"align-items":"center",
"width":"100%",
"justify-content":"center",
"margin-top": "var(--global-spacing-5)",
"align-items": "center",
"inline-size": "100%",
"justify-content": "center",
"margin-block-start": "var(--global-spacing-5)",
"components": {
"paragraph": {
"margin-left":"var(--global-spacing-5)",
"margin-right":"var(--global-spacing-5)",
"text-align":"center",
"margin-inline-start": "var(--global-spacing-5)",
"margin-inline-end": "var(--global-spacing-5)",
"text-align": "center",
"font-family": "sans-serif",
"font-size": "0.875rem",
"font-style": "normal",
"font-weight": "500",
"line-height": "1rem",
"letter-spacing": "0.0175rem",
"min-width": "max-content"
"min-inline-size": "max-content"
}
}
}
@@ -241,16 +267,16 @@
"styles": {
"default": {
"background-color": "#DADADA",
"height": "0.0625rem",
"width": "100%",
"min-width": "13.5625rem"
"block-size": "0.0625rem",
"inline-size": "100%",
"min-inline-size": "13.5625rem"
}
}
},
"checkout-payment-information": {
"styles": {
"default": {
"width": "100%",
"inline-size": "100%",
"gap": "var(--global-spacing-5)",
"grid-template-columns": "1fr",
"components": {
@@ -264,7 +290,6 @@
},
"input-input": {
"inline-size": "100%",
"width": "100%",
"padding-block-end": "var(--global-spacing-2)",
"padding-block-start": "var(--global-spacing-2)",
"padding-inline-end": "var(--global-spacing-2)",
@@ -294,7 +319,10 @@
"checkout-payment-form--stripe-element": {
"styles": {
"default": {
"padding": "var(--global-spacing-2)"
"padding-block-start": "var(--global-spacing-2)",
"padding-inline-end": "var(--global-spacing-2)",
"padding-block-end": "var(--global-spacing-2)",
"padding-inline-start": "var(--global-spacing-2)"
}
}
},
@@ -304,7 +332,18 @@
"display": "grid",
"gap": "none",
"border-radius": "var(--border-radius)",
"border": "1px solid var(--border-color)"
"border-block-start-width": "1px",
"border-block-end-width": "1px",
"border-inline-start-width": "1px",
"border-inline-end-width": "1px",
"border-block-start-style": "solid",
"border-block-end-style": "solid",
"border-inline-start-style": "solid",
"border-inline-end-style": "solid",
"border-block-start-color": "var(--border-color)",
"border-block-end-color": "var(--border-color)",
"border-inline-start-color": "var(--border-color)",
"border-inline-end-color": "var(--border-color)"
}
}
},
@@ -314,33 +353,51 @@
"display": "grid",
"gap": "none",
"border-radius": "var(--border-radius)",
"border": "1px solid var(--border-color)",
"border-block-start-width": "1px",
"border-block-end-width": "1px",
"border-inline-start-width": "1px",
"border-inline-end-width": "1px",
"border-block-start-style": "solid",
"border-block-end-style": "solid",
"border-inline-start-style": "solid",
"border-inline-end-style": "solid",
"border-block-start-color": "var(--border-color)",
"border-block-end-color": "var(--border-color)",
"border-inline-start-color": "var(--border-color)",
"border-inline-end-color": "var(--border-color)",
"input-input": {
"padding": "0"
"padding-block-start": "0",
"padding-inline-end": "0",
"padding-block-end": "0",
"padding-inline-start": "0"
}
}
}
},
"checkout-payment-form--border-bottom": {
"styles": {
"default": {
"border-bottom": "1px solid var(--border-color)"
"border-block-end-width": "1px",
"border-block-end-style": "solid",
"border-block-end-color": "var(--border-color)"
}
}
},
"checkout-payment-form--stripe-row": {
"styles": {
"default": {
"display": "grid",
"width": "100%",
"inline-size": "100%",
"grid-template-columns": "repeat(2, 1fr)"
}
}
},
"checkout-payment-form--border-right": {
"styles": {
"default": {
"border-right": "1px solid var(--border-color)"
"border-inline-end-width": "1px",
"border-inline-end-style": "solid",
"border-inline-end-color": "var(--border-color)"
}
}
},
@@ -357,8 +414,8 @@
"offer-headings": {
"styles": {
"default": {
"margin-top": "var(--global-spacing-9)",
"max-width": "40%",
"margin-block-start": "var(--global-spacing-9)",
"max-inline-size": "40%",
"display": "flex",
"flex-direction": "column",
"justify-content": "center",
@@ -373,7 +430,7 @@
"font-weight": "var(--global-font-weight-7)",
"font-size": "var(--global-font-size-15)",
"line-height": "var(--global-line-height-6)",
"margin-bottom": "var(--global-spacing-4)"
"margin-block-end": "var(--global-spacing-4)"
}
}
},
@@ -388,8 +445,8 @@
"offer-wrapper": {
"styles": {
"default": {
"margin-top": "var(--global-spacing-5)",
"margin-bottom": "var(--global-spacing-6)"
"margin-block-start": "var(--global-spacing-5)",
"margin-block-end": "var(--global-spacing-6)"
}
}
},
@@ -448,30 +505,41 @@
"styles": {
"default": {
"align-items": "center",
"border": "1px solid var(--border-color)",
"border-block-start-width": "1px",
"border-block-end-width": "1px",
"border-inline-start-width": "1px",
"border-inline-end-width": "1px",
"border-block-start-style": "solid",
"border-block-end-style": "solid",
"border-inline-start-style": "solid",
"border-inline-end-style": "solid",
"border-block-start-color": "var(--border-color)",
"border-block-end-color": "var(--border-color)",
"border-inline-start-color": "var(--border-color)",
"border-inline-end-color": "var(--border-color)",
"border-radius": "var(--border-radius)",
"display": "flex",
"flex-direction": "column",
"padding-top": "var(--global-spacing-8)",
"padding-right": "var(--global-spacing-6)",
"padding-bottom": "var(--global-spacing-6)",
"padding-left": "var(--global-spacing-6)",
"padding-block-start": "var(--global-spacing-8)",
"padding-inline-end": "var(--global-spacing-6)",
"padding-block-end": "var(--global-spacing-6)",
"padding-inline-start": "var(--global-spacing-6)",
"components": {
"heading": {
"font-size": "var(--global-font-size-9)",
"text-align": "center",
"margin-bottom": "var(--global-spacing-4)",
"margin-block-end": "var(--global-spacing-4)",
"font-weight": "var(--global-font-weight-7)",
"line-height": "var(--global-line-height-6)"
},
"paragraph": {
"font-size": "var(--global-font-size-7)",
"font-weight": "var(--global-font-weight-4)",
"text-align": "center",
"margin-bottom": "var(--global-spacing-4)"
"margin-block-end": "var(--global-spacing-4)"
},
"button-large": {
"margin-bottom": "var(--global-spacing-4)"
"margin-block-end": "var(--global-spacing-4)"
}
}
}
@@ -493,9 +561,12 @@
"components": {
"icon": {
"display": "flex",
"width": "var(--global-spacing-4)",
"height": "var(--global-spacing-4)",
"margin": "0 var(--global-spacing-2) 0 0"
"inline-size": "var(--global-spacing-4)",
"block-size": "var(--global-spacing-4)",
"margin-block-start": "0",
"margin-inline-end": "var(--global-spacing-2)",
"margin-block-end": "0",
"margin-inline-start": "0"
}
}
}
@@ -505,14 +576,14 @@
"styles": {
"default": {
"background-color": "rgba(0, 0, 0, 0.63)",
"bottom": 0,
"left": 0,
"right": 0,
"top": 0,
"inset-block-end": 0,
"inset-inline-start": 0,
"inset-inline-end": 0,
"inset-block-start": 0,
"overflow": "auto",
"pointer-events": "all",
"position": "fixed",
"height": "100vh",
"block-size": "100vh",
"z-index": 1
}
}
@@ -525,13 +596,13 @@
"background-color": "var(--global-white)",
"display": "flex",
"flex-direction": "column",
"margin-top": "50vh",
"max-height": "75vh",
"min-height": "50vh",
"margin-block-start": "50vh",
"max-block-size": "75vh",
"min-block-size": "50vh",
"overflow": "auto",
"components": {
"stack": {
"width": "100%"
"inline-size": "100%"
}
}
}
@@ -540,7 +611,10 @@
"paywall-subscription-dialog": {
"styles": {
"default": {
"padding": "var(--global-spacing-6)",
"padding-block-start": "var(--global-spacing-6)",
"padding-inline-end": "var(--global-spacing-6)",
"padding-block-end": "var(--global-spacing-6)",
"padding-inline-start": "var(--global-spacing-6)",
"align-items": "center",
"grid-template-rows": "auto",
"gap": "var(--global-spacing-6)",
@@ -564,7 +638,7 @@
"paywall-subscription-dialog-link-prompt-pre-link": {
"styles": {
"default": {
"margin-right": "var(--global-spacing-2)"
"margin-inline-end": "var(--global-spacing-2)"
}
}
},
@@ -575,7 +649,7 @@
}
}
},
"paywall-subscription-dialog-offer-info":{
"paywall-subscription-dialog-offer-info": {
"styles": {
"default": {
"gap": "var(--global-spacing-4)",
@@ -588,7 +662,7 @@
}
}
},
"paywall-subscription-dialog-subheadline":{
"paywall-subscription-dialog-subheadline": {
"styles": {
"default": {
"font-size": "var(--heading-level-6-font-size)"

0 comments on commit 4e575c0

Please sign in to comment.