From 4e0415a4563adb8f9ce817ac16ac630644e9693a Mon Sep 17 00:00:00 2001 From: Axel Cureno Basurto Date: Mon, 15 Dec 2025 13:28:52 -0800 Subject: [PATCH 1/2] MWPW-183392: Strikethrough price fix in express cards Fixes strikethrough issues in prices for simplified-pricing-express and full-pricing-express cards. --- web-components/dist/mas.js | 61 ++++++++++--------- web-components/dist/merch-card-collection.js | 61 ++++++++++--------- web-components/dist/merch-card.js | 61 ++++++++++--------- .../src/variants/full-pricing-express.css.js | 35 +++++------ .../simplified-pricing-express.css.js | 26 +++++--- 5 files changed, 128 insertions(+), 116 deletions(-) diff --git a/web-components/dist/mas.js b/web-components/dist/mas.js index f146af686..8f6c5f35c 100644 --- a/web-components/dist/mas.js +++ b/web-components/dist/mas.js @@ -4185,6 +4185,12 @@ merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child margin: 0; } +merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline-price"] .price-recurrence { + font-size: 12px; + font-weight: 700; + line-height: 15.6px; +} + merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline-price"] { font-size: var(--merch-card-simplified-pricing-express-price-p-font-size); line-height: var(--merch-card-simplified-pricing-express-price-p-line-height); @@ -4223,7 +4229,7 @@ merch-card[variant="simplified-pricing-express"] [slot="price"] .price-currency- line-height: var(--merch-card-simplified-pricing-express-price-p-line-height); } -merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline-price"] .price-recurrence { +merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline-price"] .price-unit-type { font-size: var(--merch-card-simplified-pricing-express-price-recurrence-font-size); font-weight: var(--merch-card-simplified-pricing-express-price-recurrence-font-weight); line-height: var(--merch-card-simplified-pricing-express-price-recurrence-line-height); @@ -4232,13 +4238,16 @@ merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline- /* Strikethrough price styling */ merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-strikethrough, -merch-card[variant="simplified-pricing-express"] span.placeholder-resolved[data-template='strikethrough'] { +merch-card[variant="simplified-pricing-express"] span.placeholder-resolved[data-template='strikethrough'], +merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough { text-decoration: none; font-size: var(--merch-card-simplified-pricing-express-price-p-font-size); line-height: var(--merch-card-simplified-pricing-express-price-p-line-height); } -merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price { +merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, +merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough, +merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='legal'] { color: var(--spectrum-gray-500); } @@ -4260,16 +4269,13 @@ merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='strikethrough'] .price-integer, merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='strikethrough'] .price-decimals-delimiter, -merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='strikethrough'] .price-decimals { +merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='strikethrough'] .price-decimals, +merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='price'] .price-strikethrough .price-integer, +merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='price'] .price-strikethrough .price-decimals-delimiter, +merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='price'] .price-strikethrough .price-decimals { text-decoration: line-through; } -/* Apply indigo-800 color to optical price when preceded by strikethrough */ -merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"][data-template='optical'], -merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"][data-template='optical'] .price-currency-symbol { - color: var(--spectrum-indigo-900); -} - /* Ensure non-first paragraph prices have normal font weight */ merch-card[variant="simplified-pricing-express"] [slot="price"] > p:not(:first-child) span[is="inline-price"] .price-integer, merch-card[variant="simplified-pricing-express"] [slot="price"] > p:not(:first-child) span[is="inline-price"] .price-decimals-delimiter, @@ -5025,7 +5031,8 @@ merch-card[variant="full-pricing-express"] [slot="price"] .price-currency-symbol line-height: var(--merch-card-full-pricing-express-price-line-height); } -merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"] .price-recurrence { +merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"] .price-recurrence, +merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"] .price-unit-type { font-size: 12px; font-weight: 700; line-height: 15.6px; @@ -5039,11 +5046,7 @@ merch-card[variant="full-pricing-express"] [slot="price"] p { } merch-card[variant="full-pricing-express"] [slot="price"] > p span[is="inline-price"]:only-child { - color: var(--spectrum-gray-700); -} - -merch-card[variant="full-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template="strikethrough"] + span[is="inline-price"] { - color: var(--spectrum-indigo-900); + color: var(--spectrum-gray-900); } /* Target inline prices in paragraphs that are not the first paragraph */ @@ -5064,10 +5067,6 @@ merch-card[variant="full-pricing-express"] [slot="price"] > p:not(:first-child) line-height: 15.6px; } - -merch-card[variant="full-pricing-express"] [slot="price"] strong { - color: var(--spectrum-indigo-900); -} merch-card[variant="full-pricing-express"] [slot="price"] p a { color: var(--spectrum-indigo-900); font-weight: 700; @@ -5077,16 +5076,23 @@ merch-card[variant="full-pricing-express"] [slot="price"] p a { /* Strikethrough price styling */ merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-strikethrough, -merch-card[variant="full-pricing-express"] span.placeholder-resolved[data-template='strikethrough'] { +merch-card[variant="full-pricing-express"] span.placeholder-resolved[data-template='strikethrough'], +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough { text-decoration: none; font-size: 12px; line-height: 15.6px; } -merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price { +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough { color: var(--spectrum-gray-700); } +merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"], +merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"][data-template='strikethrough'] ~ strong { + color: var(--spectrum-gray-900); +} + merch-card[variant="full-pricing-express"] [slot="price"] p .heading-xs, merch-card[variant="full-pricing-express"] [slot="price"] p .heading-s, merch-card[variant="full-pricing-express"] [slot="price"] p .heading-m, @@ -5099,17 +5105,14 @@ merch-card[variant="full-pricing-express"] [slot="price"] p .heading-l { merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-integer, merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-decimals-delimiter, -merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-decimals { +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-decimals, +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough .price-integer, +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough .price-decimals-delimiter, +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough .price-decimals { text-decoration: line-through; text-decoration-thickness: 2px; } -/* Apply indigo-800 color to optical price when preceded by strikethrough */ -merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"][data-template='optical'], -merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"][data-template='optical'] .price-currency-symbol { - color: var(--spectrum-indigo-900); -} - /* CTA button styling */ merch-card[variant="full-pricing-express"] [slot="cta"] { width: 100%; diff --git a/web-components/dist/merch-card-collection.js b/web-components/dist/merch-card-collection.js index 99b4dfa53..d5155696a 100644 --- a/web-components/dist/merch-card-collection.js +++ b/web-components/dist/merch-card-collection.js @@ -3159,6 +3159,12 @@ merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child margin: 0; } +merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline-price"] .price-recurrence { + font-size: 12px; + font-weight: 700; + line-height: 15.6px; +} + merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline-price"] { font-size: var(--merch-card-simplified-pricing-express-price-p-font-size); line-height: var(--merch-card-simplified-pricing-express-price-p-line-height); @@ -3197,7 +3203,7 @@ merch-card[variant="simplified-pricing-express"] [slot="price"] .price-currency- line-height: var(--merch-card-simplified-pricing-express-price-p-line-height); } -merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline-price"] .price-recurrence { +merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline-price"] .price-unit-type { font-size: var(--merch-card-simplified-pricing-express-price-recurrence-font-size); font-weight: var(--merch-card-simplified-pricing-express-price-recurrence-font-weight); line-height: var(--merch-card-simplified-pricing-express-price-recurrence-line-height); @@ -3206,13 +3212,16 @@ merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline- /* Strikethrough price styling */ merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-strikethrough, -merch-card[variant="simplified-pricing-express"] span.placeholder-resolved[data-template='strikethrough'] { +merch-card[variant="simplified-pricing-express"] span.placeholder-resolved[data-template='strikethrough'], +merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough { text-decoration: none; font-size: var(--merch-card-simplified-pricing-express-price-p-font-size); line-height: var(--merch-card-simplified-pricing-express-price-p-line-height); } -merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price { +merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, +merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough, +merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='legal'] { color: var(--spectrum-gray-500); } @@ -3234,16 +3243,13 @@ merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='strikethrough'] .price-integer, merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='strikethrough'] .price-decimals-delimiter, -merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='strikethrough'] .price-decimals { +merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='strikethrough'] .price-decimals, +merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='price'] .price-strikethrough .price-integer, +merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='price'] .price-strikethrough .price-decimals-delimiter, +merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='price'] .price-strikethrough .price-decimals { text-decoration: line-through; } -/* Apply indigo-800 color to optical price when preceded by strikethrough */ -merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"][data-template='optical'], -merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"][data-template='optical'] .price-currency-symbol { - color: var(--spectrum-indigo-900); -} - /* Ensure non-first paragraph prices have normal font weight */ merch-card[variant="simplified-pricing-express"] [slot="price"] > p:not(:first-child) span[is="inline-price"] .price-integer, merch-card[variant="simplified-pricing-express"] [slot="price"] > p:not(:first-child) span[is="inline-price"] .price-decimals-delimiter, @@ -3999,7 +4005,8 @@ merch-card[variant="full-pricing-express"] [slot="price"] .price-currency-symbol line-height: var(--merch-card-full-pricing-express-price-line-height); } -merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"] .price-recurrence { +merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"] .price-recurrence, +merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"] .price-unit-type { font-size: 12px; font-weight: 700; line-height: 15.6px; @@ -4013,11 +4020,7 @@ merch-card[variant="full-pricing-express"] [slot="price"] p { } merch-card[variant="full-pricing-express"] [slot="price"] > p span[is="inline-price"]:only-child { - color: var(--spectrum-gray-700); -} - -merch-card[variant="full-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template="strikethrough"] + span[is="inline-price"] { - color: var(--spectrum-indigo-900); + color: var(--spectrum-gray-900); } /* Target inline prices in paragraphs that are not the first paragraph */ @@ -4038,10 +4041,6 @@ merch-card[variant="full-pricing-express"] [slot="price"] > p:not(:first-child) line-height: 15.6px; } - -merch-card[variant="full-pricing-express"] [slot="price"] strong { - color: var(--spectrum-indigo-900); -} merch-card[variant="full-pricing-express"] [slot="price"] p a { color: var(--spectrum-indigo-900); font-weight: 700; @@ -4051,16 +4050,23 @@ merch-card[variant="full-pricing-express"] [slot="price"] p a { /* Strikethrough price styling */ merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-strikethrough, -merch-card[variant="full-pricing-express"] span.placeholder-resolved[data-template='strikethrough'] { +merch-card[variant="full-pricing-express"] span.placeholder-resolved[data-template='strikethrough'], +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough { text-decoration: none; font-size: 12px; line-height: 15.6px; } -merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price { +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough { color: var(--spectrum-gray-700); } +merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"], +merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"][data-template='strikethrough'] ~ strong { + color: var(--spectrum-gray-900); +} + merch-card[variant="full-pricing-express"] [slot="price"] p .heading-xs, merch-card[variant="full-pricing-express"] [slot="price"] p .heading-s, merch-card[variant="full-pricing-express"] [slot="price"] p .heading-m, @@ -4073,17 +4079,14 @@ merch-card[variant="full-pricing-express"] [slot="price"] p .heading-l { merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-integer, merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-decimals-delimiter, -merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-decimals { +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-decimals, +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough .price-integer, +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough .price-decimals-delimiter, +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough .price-decimals { text-decoration: line-through; text-decoration-thickness: 2px; } -/* Apply indigo-800 color to optical price when preceded by strikethrough */ -merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"][data-template='optical'], -merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"][data-template='optical'] .price-currency-symbol { - color: var(--spectrum-indigo-900); -} - /* CTA button styling */ merch-card[variant="full-pricing-express"] [slot="cta"] { width: 100%; diff --git a/web-components/dist/merch-card.js b/web-components/dist/merch-card.js index dc8c37d5e..c235c2fd3 100644 --- a/web-components/dist/merch-card.js +++ b/web-components/dist/merch-card.js @@ -3677,6 +3677,12 @@ merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child margin: 0; } +merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline-price"] .price-recurrence { + font-size: 12px; + font-weight: 700; + line-height: 15.6px; +} + merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline-price"] { font-size: var(--merch-card-simplified-pricing-express-price-p-font-size); line-height: var(--merch-card-simplified-pricing-express-price-p-line-height); @@ -3715,7 +3721,7 @@ merch-card[variant="simplified-pricing-express"] [slot="price"] .price-currency- line-height: var(--merch-card-simplified-pricing-express-price-p-line-height); } -merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline-price"] .price-recurrence { +merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline-price"] .price-unit-type { font-size: var(--merch-card-simplified-pricing-express-price-recurrence-font-size); font-weight: var(--merch-card-simplified-pricing-express-price-recurrence-font-weight); line-height: var(--merch-card-simplified-pricing-express-price-recurrence-line-height); @@ -3724,13 +3730,16 @@ merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline- /* Strikethrough price styling */ merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-strikethrough, -merch-card[variant="simplified-pricing-express"] span.placeholder-resolved[data-template='strikethrough'] { +merch-card[variant="simplified-pricing-express"] span.placeholder-resolved[data-template='strikethrough'], +merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough { text-decoration: none; font-size: var(--merch-card-simplified-pricing-express-price-p-font-size); line-height: var(--merch-card-simplified-pricing-express-price-p-line-height); } -merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price { +merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, +merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough, +merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='legal'] { color: var(--spectrum-gray-500); } @@ -3752,16 +3761,13 @@ merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='strikethrough'] .price-integer, merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='strikethrough'] .price-decimals-delimiter, -merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='strikethrough'] .price-decimals { +merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='strikethrough'] .price-decimals, +merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='price'] .price-strikethrough .price-integer, +merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='price'] .price-strikethrough .price-decimals-delimiter, +merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='price'] .price-strikethrough .price-decimals { text-decoration: line-through; } -/* Apply indigo-800 color to optical price when preceded by strikethrough */ -merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"][data-template='optical'], -merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"][data-template='optical'] .price-currency-symbol { - color: var(--spectrum-indigo-900); -} - /* Ensure non-first paragraph prices have normal font weight */ merch-card[variant="simplified-pricing-express"] [slot="price"] > p:not(:first-child) span[is="inline-price"] .price-integer, merch-card[variant="simplified-pricing-express"] [slot="price"] > p:not(:first-child) span[is="inline-price"] .price-decimals-delimiter, @@ -4517,7 +4523,8 @@ merch-card[variant="full-pricing-express"] [slot="price"] .price-currency-symbol line-height: var(--merch-card-full-pricing-express-price-line-height); } -merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"] .price-recurrence { +merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"] .price-recurrence, +merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"] .price-unit-type { font-size: 12px; font-weight: 700; line-height: 15.6px; @@ -4531,11 +4538,7 @@ merch-card[variant="full-pricing-express"] [slot="price"] p { } merch-card[variant="full-pricing-express"] [slot="price"] > p span[is="inline-price"]:only-child { - color: var(--spectrum-gray-700); -} - -merch-card[variant="full-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template="strikethrough"] + span[is="inline-price"] { - color: var(--spectrum-indigo-900); + color: var(--spectrum-gray-900); } /* Target inline prices in paragraphs that are not the first paragraph */ @@ -4556,10 +4559,6 @@ merch-card[variant="full-pricing-express"] [slot="price"] > p:not(:first-child) line-height: 15.6px; } - -merch-card[variant="full-pricing-express"] [slot="price"] strong { - color: var(--spectrum-indigo-900); -} merch-card[variant="full-pricing-express"] [slot="price"] p a { color: var(--spectrum-indigo-900); font-weight: 700; @@ -4569,16 +4568,23 @@ merch-card[variant="full-pricing-express"] [slot="price"] p a { /* Strikethrough price styling */ merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-strikethrough, -merch-card[variant="full-pricing-express"] span.placeholder-resolved[data-template='strikethrough'] { +merch-card[variant="full-pricing-express"] span.placeholder-resolved[data-template='strikethrough'], +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough { text-decoration: none; font-size: 12px; line-height: 15.6px; } -merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price { +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough { color: var(--spectrum-gray-700); } +merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"], +merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"][data-template='strikethrough'] ~ strong { + color: var(--spectrum-gray-900); +} + merch-card[variant="full-pricing-express"] [slot="price"] p .heading-xs, merch-card[variant="full-pricing-express"] [slot="price"] p .heading-s, merch-card[variant="full-pricing-express"] [slot="price"] p .heading-m, @@ -4591,17 +4597,14 @@ merch-card[variant="full-pricing-express"] [slot="price"] p .heading-l { merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-integer, merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-decimals-delimiter, -merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-decimals { +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-decimals, +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough .price-integer, +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough .price-decimals-delimiter, +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough .price-decimals { text-decoration: line-through; text-decoration-thickness: 2px; } -/* Apply indigo-800 color to optical price when preceded by strikethrough */ -merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"][data-template='optical'], -merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"][data-template='optical'] .price-currency-symbol { - color: var(--spectrum-indigo-900); -} - /* CTA button styling */ merch-card[variant="full-pricing-express"] [slot="cta"] { width: 100%; diff --git a/web-components/src/variants/full-pricing-express.css.js b/web-components/src/variants/full-pricing-express.css.js index d0cdea2f3..b9b787da1 100644 --- a/web-components/src/variants/full-pricing-express.css.js +++ b/web-components/src/variants/full-pricing-express.css.js @@ -223,7 +223,8 @@ merch-card[variant="full-pricing-express"] [slot="price"] .price-currency-symbol line-height: var(--merch-card-full-pricing-express-price-line-height); } -merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"] .price-recurrence { +merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"] .price-recurrence, +merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"] .price-unit-type { font-size: 12px; font-weight: 700; line-height: 15.6px; @@ -237,11 +238,7 @@ merch-card[variant="full-pricing-express"] [slot="price"] p { } merch-card[variant="full-pricing-express"] [slot="price"] > p span[is="inline-price"]:only-child { - color: var(--spectrum-gray-700); -} - -merch-card[variant="full-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template="strikethrough"] + span[is="inline-price"] { - color: var(--spectrum-indigo-900); + color: var(--spectrum-gray-900); } /* Target inline prices in paragraphs that are not the first paragraph */ @@ -262,10 +259,6 @@ merch-card[variant="full-pricing-express"] [slot="price"] > p:not(:first-child) line-height: 15.6px; } - -merch-card[variant="full-pricing-express"] [slot="price"] strong { - color: var(--spectrum-indigo-900); -} merch-card[variant="full-pricing-express"] [slot="price"] p a { color: var(--spectrum-indigo-900); font-weight: 700; @@ -275,16 +268,23 @@ merch-card[variant="full-pricing-express"] [slot="price"] p a { /* Strikethrough price styling */ merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-strikethrough, -merch-card[variant="full-pricing-express"] span.placeholder-resolved[data-template='strikethrough'] { +merch-card[variant="full-pricing-express"] span.placeholder-resolved[data-template='strikethrough'], +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough { text-decoration: none; font-size: 12px; line-height: 15.6px; } -merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price { +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough { color: var(--spectrum-gray-700); } +merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"], +merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"][data-template='strikethrough'] ~ strong { + color: var(--spectrum-gray-900); +} + merch-card[variant="full-pricing-express"] [slot="price"] p .heading-xs, merch-card[variant="full-pricing-express"] [slot="price"] p .heading-s, merch-card[variant="full-pricing-express"] [slot="price"] p .heading-m, @@ -297,17 +297,14 @@ merch-card[variant="full-pricing-express"] [slot="price"] p .heading-l { merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-integer, merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-decimals-delimiter, -merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-decimals { +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-decimals, +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough .price-integer, +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough .price-decimals-delimiter, +merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough .price-decimals { text-decoration: line-through; text-decoration-thickness: 2px; } -/* Apply indigo-800 color to optical price when preceded by strikethrough */ -merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"][data-template='optical'], -merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"][data-template='optical'] .price-currency-symbol { - color: var(--spectrum-indigo-900); -} - /* CTA button styling */ merch-card[variant="full-pricing-express"] [slot="cta"] { width: 100%; diff --git a/web-components/src/variants/simplified-pricing-express.css.js b/web-components/src/variants/simplified-pricing-express.css.js index f98766ce6..68efdf4d0 100644 --- a/web-components/src/variants/simplified-pricing-express.css.js +++ b/web-components/src/variants/simplified-pricing-express.css.js @@ -129,6 +129,12 @@ merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child margin: 0; } +merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline-price"] .price-recurrence { + font-size: 12px; + font-weight: 700; + line-height: 15.6px; +} + merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline-price"] { font-size: var(--merch-card-simplified-pricing-express-price-p-font-size); line-height: var(--merch-card-simplified-pricing-express-price-p-line-height); @@ -167,7 +173,7 @@ merch-card[variant="simplified-pricing-express"] [slot="price"] .price-currency- line-height: var(--merch-card-simplified-pricing-express-price-p-line-height); } -merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline-price"] .price-recurrence { +merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline-price"] .price-unit-type { font-size: var(--merch-card-simplified-pricing-express-price-recurrence-font-size); font-weight: var(--merch-card-simplified-pricing-express-price-recurrence-font-weight); line-height: var(--merch-card-simplified-pricing-express-price-recurrence-line-height); @@ -176,13 +182,16 @@ merch-card[variant="simplified-pricing-express"] [slot="price"] span[is="inline- /* Strikethrough price styling */ merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price-strikethrough, -merch-card[variant="simplified-pricing-express"] span.placeholder-resolved[data-template='strikethrough'] { +merch-card[variant="simplified-pricing-express"] span.placeholder-resolved[data-template='strikethrough'], +merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough { text-decoration: none; font-size: var(--merch-card-simplified-pricing-express-price-p-font-size); line-height: var(--merch-card-simplified-pricing-express-price-p-line-height); } -merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price { +merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, +merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough, +merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='legal'] { color: var(--spectrum-gray-500); } @@ -204,16 +213,13 @@ merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='strikethrough'] .price-integer, merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='strikethrough'] .price-decimals-delimiter, -merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='strikethrough'] .price-decimals { +merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='strikethrough'] .price-decimals, +merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='price'] .price-strikethrough .price-integer, +merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='price'] .price-strikethrough .price-decimals-delimiter, +merch-card[variant="simplified-pricing-express"] [slot="price"] > p:first-child span[is="inline-price"][data-template='price'] .price-strikethrough .price-decimals { text-decoration: line-through; } -/* Apply indigo-800 color to optical price when preceded by strikethrough */ -merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"][data-template='optical'], -merch-card[variant="simplified-pricing-express"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"][data-template='optical'] .price-currency-symbol { - color: var(--spectrum-indigo-900); -} - /* Ensure non-first paragraph prices have normal font weight */ merch-card[variant="simplified-pricing-express"] [slot="price"] > p:not(:first-child) span[is="inline-price"] .price-integer, merch-card[variant="simplified-pricing-express"] [slot="price"] > p:not(:first-child) span[is="inline-price"] .price-decimals-delimiter, From 8a23d163b64372a8805455c64ac37194e9b4dde6 Mon Sep 17 00:00:00 2001 From: Axel Cureno Basurto Date: Mon, 5 Jan 2026 12:48:12 -0800 Subject: [PATCH 2/2] fixed strikethrough color on full pricing --- web-components/dist/mas.js | 2 +- web-components/dist/merch-card-collection.js | 2 +- web-components/dist/merch-card.js | 2 +- web-components/src/variants/full-pricing-express.css.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/web-components/dist/mas.js b/web-components/dist/mas.js index 8f6c5f35c..43c3a54b1 100644 --- a/web-components/dist/mas.js +++ b/web-components/dist/mas.js @@ -5085,7 +5085,7 @@ merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough { - color: var(--spectrum-gray-700); + color: var(--spectrum-gray-500); } merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"], diff --git a/web-components/dist/merch-card-collection.js b/web-components/dist/merch-card-collection.js index d5155696a..3f05dcc97 100644 --- a/web-components/dist/merch-card-collection.js +++ b/web-components/dist/merch-card-collection.js @@ -4059,7 +4059,7 @@ merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough { - color: var(--spectrum-gray-700); + color: var(--spectrum-gray-500); } merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"], diff --git a/web-components/dist/merch-card.js b/web-components/dist/merch-card.js index c235c2fd3..8ca5f23c6 100644 --- a/web-components/dist/merch-card.js +++ b/web-components/dist/merch-card.js @@ -4577,7 +4577,7 @@ merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough { - color: var(--spectrum-gray-700); + color: var(--spectrum-gray-500); } merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"], diff --git a/web-components/src/variants/full-pricing-express.css.js b/web-components/src/variants/full-pricing-express.css.js index b9b787da1..d1c1fe243 100644 --- a/web-components/src/variants/full-pricing-express.css.js +++ b/web-components/src/variants/full-pricing-express.css.js @@ -277,7 +277,7 @@ merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price, merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough { - color: var(--spectrum-gray-700); + color: var(--spectrum-gray-500); } merch-card[variant="full-pricing-express"] [slot="price"] span[is="inline-price"][data-template='strikethrough'] + span[is="inline-price"],