diff --git a/libs/deps/mas/merch-card-collection.js b/libs/deps/mas/merch-card-collection.js index 9c59ebb04e9..5e1cc93bf3d 100644 --- a/libs/deps/mas/merch-card-collection.js +++ b/libs/deps/mas/merch-card-collection.js @@ -3020,6 +3020,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); @@ -3058,7 +3064,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); @@ -3067,13 +3073,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); } @@ -3095,16 +3104,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, @@ -3749,7 +3755,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; @@ -3763,11 +3770,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 */ @@ -3789,9 +3792,6 @@ merch-card[variant="full-pricing-express"] [slot="price"] > p:not(:first-child) } -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; @@ -3801,16 +3801,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, @@ -3823,17 +3830,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/libs/deps/mas/merch-card.js b/libs/deps/mas/merch-card.js index 82d7e7b5831..d34a3ae6df3 100644 --- a/libs/deps/mas/merch-card.js +++ b/libs/deps/mas/merch-card.js @@ -3525,6 +3525,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); @@ -3563,7 +3569,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); @@ -3572,13 +3578,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); } @@ -3600,16 +3609,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, @@ -4254,7 +4260,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; @@ -4268,11 +4275,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 */ @@ -4294,9 +4297,6 @@ merch-card[variant="full-pricing-express"] [slot="price"] > p:not(:first-child) } -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; @@ -4306,16 +4306,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, @@ -4328,17 +4335,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/libs/features/mas/dist/mas.js b/libs/features/mas/dist/mas.js index efbcfd88607..794e0b64820 100644 --- a/libs/features/mas/dist/mas.js +++ b/libs/features/mas/dist/mas.js @@ -3535,6 +3535,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); @@ -3573,7 +3579,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); @@ -3582,13 +3588,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); } @@ -3610,16 +3619,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, @@ -4264,7 +4270,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; @@ -4278,11 +4285,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 */ @@ -4304,9 +4307,6 @@ merch-card[variant="full-pricing-express"] [slot="price"] > p:not(:first-child) } -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; @@ -4316,16 +4316,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, @@ -4338,17 +4345,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/libs/features/mas/src/variants/full-pricing-express.css.js b/libs/features/mas/src/variants/full-pricing-express.css.js index d0cdea2f3d0..6a35021bb9a 100644 --- a/libs/features/mas/src/variants/full-pricing-express.css.js +++ b/libs/features/mas/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 */ @@ -263,9 +260,6 @@ merch-card[variant="full-pricing-express"] [slot="price"] > p:not(:first-child) } -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 +269,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 +298,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/libs/features/mas/src/variants/simplified-pricing-express.css.js b/libs/features/mas/src/variants/simplified-pricing-express.css.js index f1b3851fc1f..0148c288d52 100644 --- a/libs/features/mas/src/variants/simplified-pricing-express.css.js +++ b/libs/features/mas/src/variants/simplified-pricing-express.css.js @@ -124,6 +124,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); @@ -162,7 +168,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); @@ -171,13 +177,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); } @@ -199,16 +208,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,