Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

THEMES-1195 Updated headline, overline and image opacity #1690

Merged
merged 19 commits into from
Jul 27, 2023
Merged

THEMES-1195 Updated headline, overline and image opacity #1690

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
e970a24
Updated headline, overline and image opacity
Jun 29, 2023
ae68bc3
Fixed image opacity
Jul 5, 2023
d97bec3
removed console statements
Jul 5, 2023
068ec0d
Merge branch 'arc-themes-release-version-2.0.3' into THEMES-1195
Jul 5, 2023
3c4f616
Merge branch 'arc-themes-release-version-2.0.3' into THEMES-1195
Jul 5, 2023
45a8c15
Merge branch 'arc-themes-release-version-2.0.3' into THEMES-1195
malavikakoppula Jul 6, 2023
59d248f
Merge branch 'arc-themes-release-version-2.0.3' into THEMES-1195
Jul 12, 2023
741a1fa
Merge branch 'arc-themes-release-version-2.0.3' into THEMES-1195
Jul 17, 2023
21ef594
Fixed hover state and images with link
Jul 19, 2023
5b9ad1d
Merge branch 'arc-themes-release-version-2.0.3' into THEMES-1195
Jul 19, 2023
8f770d0
chnaged imgWithLink to img
Jul 19, 2023
011f2cb
removed hover tokens
Jul 21, 2023
0485297
Merge branch 'arc-themes-release-version-2.0.3' into THEMES-1195
Jul 21, 2023
a622ba2
reverted img token and class
Jul 26, 2023
cad4b5a
Merge branch 'arc-themes-release-version-2.0.3' into THEMES-1195
Jul 26, 2023
8a050cf
Removed opacity from link-hover
Jul 26, 2023
9036af9
removed opacity from link-hover
Jul 26, 2023
808d50b
Updated token definitions
Jul 26, 2023
884b849
Merge branch 'arc-themes-release-version-2.0.3' into THEMES-1195
malavikakoppula Jul 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .storybook/mock-content/extraLargePromo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,5 +56,12 @@ export const extraLargePromo = {
},
website_url: "/test/promo-image-variations/2021/04/23/basic-promo-image/",
},
"story-book": {
website_section: {
_id: "/test/promo-image-variations",
name: "Promo image variations",
},
website_url: "/test/promo-image-variations/2021/04/23/basic-promo-image/",
},
},
};
7 changes: 7 additions & 0 deletions .storybook/mock-content/largePromo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,5 +76,12 @@ export const largePromoMock = {
},
website_url: "/2019/12/02/baby-panda-born-at-the-zoo/",
},
"story-book": {
website_section: {
_id: "/health",
name: "Health",
},
website_url: "/2019/12/02/baby-panda-born-at-the-zoo/",
},
},
};
4 changes: 4 additions & 0 deletions .storybook/mock-content/mediumPromo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,5 +51,9 @@ export const mediumPromoMock = {
website_url:
"/local/2020/01/14/in-albania-age-old-traditions-and-mediterranean-beaches-on-the-cheap/",
},
"story-book": {
website_url:
"/local/2020/01/14/in-albania-age-old-traditions-and-mediterranean-beaches-on-the-cheap/",
},
},
};
4 changes: 4 additions & 0 deletions .storybook/mock-content/smallPromo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,9 @@ export const smallPromoMock = {
website_url:
"/local/2020/01/14/in-albania-age-old-traditions-and-mediterranean-beaches-on-the-cheap/",
},
"story-book": {
website_url:
"/local/2020/01/14/in-albania-age-old-traditions-and-mediterranean-beaches-on-the-cheap/",
},
},
};
70 changes: 69 additions & 1 deletion .storybook/themes/news.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -403,7 +403,7 @@
outline-color: var(--status-color-warning),
),
link: (
color: var(--color-primary),
color: var(--text-color),
),
link-active: (
text-decoration: none,
Expand Down Expand Up @@ -1563,14 +1563,27 @@
),
large-manual-promo: (
gap: var(--global-spacing-4),
components: (
link-hover: (
color: var(--text-color-subtle),
opacity: 0.8,
),
),
),
large-manual-promo-text: (
gap: 0,
components: (
heading: (
color: var(--text-color),
),
overline: (
color: var(--text-color),
font-size: var(--heading-level-6-font-size),
line-height: var(--heading-level-6-line-height),
),
overline-hover: (
color: var(--text-color-subtle),
),
paragraph: (
font-size: var(--body-font-size),
),
Expand All @@ -1585,6 +1598,10 @@
link: (
position: relative,
),
link-hover: (
color: var(--text-color-subtle),
opacity: 0.8,
),
),
),
large-promo-icon-label: (
Expand Down Expand Up @@ -1613,13 +1630,18 @@
gap: 0,
components: (
heading: (
color: var(--text-color),
font-size: var(--heading-level-3-font-size),
line-height: var(--heading-level-3-line-height),
),
overline: (
color: var(--text-color),
font-size: var(--heading-level-6-font-size),
line-height: var(--heading-level-6-line-height),
),
overline-hover: (
color: var(--text-color-subtle),
),
paragraph: (
font-size: var(--body-font-size),
line-height: var(--body-line-height),
Expand Down Expand Up @@ -1811,6 +1833,7 @@
max-width: 100px,
),
heading: (
color: var(--text-color),
font-size: var(--heading-level-5-font-size),
font-weight: var(--heading-level-5-font-weight),
line-height: var(--heading-level-5-line-height),
Expand All @@ -1826,6 +1849,10 @@
link: (
position: relative,
),
link-hover: (
color: var(--text-color-subtle),
opacity: 0.8,
),
),
),
medium-promo-show-image: (
Expand Down Expand Up @@ -1870,11 +1897,16 @@
line-height: var(--body-line-height-small),
),
heading: (
color: var(--text-color),
font-size: var(--heading-level-5-font-size),
font-weight: var(--heading-level-5-font-weight),
line-height: var(--heading-level-5-line-height),
margin-bottom: var(--global-spacing-4),
),
link-hover: (
color: var(--text-color-subtle),
opacity: 0.8,
),
media-item: (
float: right,
max-width: 100px,
Expand Down Expand Up @@ -2309,10 +2341,15 @@
grid-template-columns: 1fr,
components: (
heading: (
color: var(--text-color),
font-size: var(--body-font-size),
font-weight: var(--body-font-weight),
line-height: var(--body-line-height),
),
link-hover: (
color: var(--text-color-subtle),
opacity: 0.8,
),
),
),
small-manual-promo-above: (
Expand All @@ -2335,10 +2372,15 @@
grid-template-columns: 1fr,
components: (
heading: (
color: var(--text-color),
font-size: var(--body-font-size),
font-weight: var(--body-font-weight),
line-height: var(--body-line-height),
),
link-hover: (
color: var(--text-color-subtle),
opacity: 0.8,
),
),
),
small-promo-left: (
Expand Down Expand Up @@ -2630,15 +2672,28 @@
),
xl-manual-promo: (
components: (
heading: (
color: var(--text-color),
),
link: (
font-family: inherit,
font-size: inherit,
font-weight: inherit,
line-height: inherit,
),
overline: (
color: var(--text-color),
),
overline-hover: (
color: var(--text-color-subtle),
),
stack: (
gap: var(--global-spacing-4),
),
link-hover: (
color: var(--text-color-subtle),
opacity: 0.8,
),
),
),
xl-promo: (
Expand All @@ -2649,6 +2704,15 @@
font-weight: inherit,
line-height: inherit,
),
heading: (
color: var(--text-color),
),
overline: (
color: var(--text-color),
),
overline-hover: (
color: var(--text-color-subtle),
),
separator: (
padding: 0 var(--global-spacing-2),
),
Expand All @@ -2658,6 +2722,10 @@
media-item: (
position: relative,
),
link-hover: (
color: var(--text-color-subtle),
opacity: 0.8,
),
),
),
xl-promo-icon-label: (
Expand Down
13 changes: 13 additions & 0 deletions blocks/extra-large-manual-promo-block/themes/news.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,18 @@
"styles": {
"default": {
"components": {
"heading": {
"color": "var(--text-color)"
},
"link": {
"font-family": "inherit",
"font-size": "inherit",
"font-weight": "inherit",
"line-height": "inherit"
},
"overline": {
"color": "var(--text-color)"
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To go with the other comment, we can move

"overline-hover": {
  "color": "var(--text-color-subtle)"
}

here, and eliminate the *-promo-overline tokens.

"stack": {
"gap": "var(--global-spacing-4)"
}
Expand All @@ -22,10 +28,17 @@
"justify-content": "center",
"line-height": "var(--heading-level-1-line-height)"
},
"link-hover": {
"color": "var(--text-color-subtle)",
"opacity": 0.8
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding opacity here is making the links too light of a color.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vgalatro, Fixed it in 8a050cf

},
"overline": {
"display": "flex",
"justify-content": "center"
},
"overline-hover": {
"color": "var(--text-color-subtle)"
},
"stack": {
"gap": "var(--global-spacing-5)"
}
Expand Down
1 change: 0 additions & 1 deletion blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,7 +289,6 @@ const ExtraLargePromo = ({ customFields }) => {
}

const hasOverline = showOverline && overlineText;

const contentDescription = showDescription ? content?.description?.basic : null;
const contentHeading = showHeadline ? content?.headlines?.basic : null;
const contentUrl = content?.websites?.[arcSite]?.website_url;
Expand Down
13 changes: 13 additions & 0 deletions blocks/extra-large-promo-block/themes/news.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,25 @@
"styles": {
"default": {
"components": {
"heading": {
"color": "var(--text-color)"
},
"link": {
"font-family": "inherit",
"font-size": "inherit",
"font-weight": "inherit",
"line-height": "inherit"
},
"link-hover": {
"color": "var(--text-color-subtle)",
"opacity": 0.8
},
"overline": {
"color": "var(--text-color)"
},
"overline-hover": {
"color": "var(--text-color-subtle)"
},
"separator": {
"padding": "0 var(--global-spacing-2)"
},
Expand Down
15 changes: 14 additions & 1 deletion blocks/large-manual-promo-block/themes/news.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,13 @@
"large-manual-promo": {
"styles": {
"default": {
"gap": "var(--global-spacing-4)"
"gap": "var(--global-spacing-4)",
"components": {
"link-hover": {
"color": "var(--text-color-subtle)",
"opacity": 0.8
}
}
},
"desktop": {
"gap": "var(--global-spacing-6)",
Expand All @@ -22,10 +28,17 @@
"default": {
"gap": 0,
"components": {
"heading": {
"color": "var(--text-color)"
},
"overline": {
"color": "var(--text-color)",
"font-size": "var(--heading-level-6-font-size)",
"line-height": "var(--heading-level-6-line-height)"
},
"overline-hover": {
"color": "var(--text-color-subtle)"
},
"paragraph": {
"font-size": "var(--body-font-size)"
},
Expand Down
9 changes: 9 additions & 0 deletions blocks/large-promo-block/themes/news.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@
"components": {
"link": {
"position": "relative"
},
"link-hover": {
"color": "var(--text-color-subtle)",
"opacity": 0.8
}
}
},
Expand Down Expand Up @@ -57,13 +61,18 @@
"gap": 0,
"components": {
"heading": {
"color": "var(--text-color)",
"font-size": "var(--heading-level-3-font-size)",
"line-height": "var(--heading-level-3-line-height)"
},
"overline": {
"color": "var(--text-color)",
"font-size": "var(--heading-level-6-font-size)",
"line-height": "var(--heading-level-6-line-height)"
},
"overline-hover": {
"color": "var(--text-color-subtle)"
},
"paragraph": {
"font-size": "var(--body-font-size)",
"line-height": "var(--body-line-height)"
Expand Down
5 changes: 5 additions & 0 deletions blocks/medium-manual-promo-block/themes/news.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,16 @@
"line-height": "var(--body-line-height-small)"
},
"heading": {
"color": "var(--text-color)",
"font-size": "var(--heading-level-5-font-size)",
"font-weight": "var(--heading-level-5-font-weight)",
"line-height": "var(--heading-level-5-line-height)",
"margin-bottom": "var(--global-spacing-4)"
},
"link-hover": {
"color": "var(--text-color-subtle)",
"opacity": 0.8
},
"media-item": {
"float": "right",
"max-width": "100px"
Expand Down
Loading