From 36909c082bfd2589aa8b555d1b6e034c75621138 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Tue, 17 Oct 2023 15:45:35 -0400 Subject: [PATCH 1/6] wip --- packages/components/src/modal/src/Modal.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/modal/src/Modal.css b/packages/components/src/modal/src/Modal.css index 420f9e45f..a67cbffc6 100644 --- a/packages/components/src/modal/src/Modal.css +++ b/packages/components/src/modal/src/Modal.css @@ -2,7 +2,7 @@ .o-ui-modal-choice-container { display: grid; align-items: stretch; - grid-template-columns: repeat(auto-fit, minmax(var(--o-ui-sz-15), 1fr)); + grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--o-ui-sp-7); } From 0565d198579139422a813cbf06377715f44c74f9 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Tue, 17 Oct 2023 22:09:28 -0400 Subject: [PATCH 2/6] updated tokens for modal --- packages/components/src/dialog/src/Dialog.css | 29 +++++++++--------- packages/components/src/dialog/src/Dialog.tsx | 4 +-- .../src/modal/docs/Modal.stories.mdx | 30 +++++++++---------- packages/components/src/modal/src/Modal.css | 2 +- 4 files changed, 33 insertions(+), 32 deletions(-) diff --git a/packages/components/src/dialog/src/Dialog.css b/packages/components/src/dialog/src/Dialog.css index 1c73fe853..d871198cc 100644 --- a/packages/components/src/dialog/src/Dialog.css +++ b/packages/components/src/dialog/src/Dialog.css @@ -20,8 +20,8 @@ /* DIALOG */ .o-ui-dialog { position: relative; - background-color: var(--o-ui-bg-alias-surface); - border-radius: var(--o-ui-br-4); + background-color: var(--hop-neutral-surface); + border-radius: var(--hop-shape-rounded-md); display: grid; overflow: hidden; align-items: stretch; @@ -39,7 +39,7 @@ /* DIALOG | ASIDE */ .o-ui-dialog-aside { - padding: var(--o-ui-sp-9); + padding: var(--hop-space-inset-lg); grid-area: aside; overflow: hidden; display: flex; @@ -48,22 +48,22 @@ /* DIALOG | SIZES */ .o-ui-dialog-sm { - width: 544px; + width: 34rem; } .o-ui-dialog-md { - width: 800px; + width: 50rem; } .o-ui-dialog-lg { - width: 960px; + width: 60rem; } /* DIALOG | IMAGE & ILLUSTRATION */ .o-ui-dialog-image, .o-ui-dialog-illustration { width: 100%; - height: var(--o-ui-sz-14); + height: 12rem; grid-area: image; overflow: hidden; } @@ -71,7 +71,7 @@ @media screen and (min-width: 768px) { .o-ui-dialog-image, .o-ui-dialog-illustration { - width: var(--o-ui-sz-15); + width: 16rem; height: 100%; } } @@ -94,7 +94,7 @@ .o-ui-dialog-header-section { display: flex; justify-content: space-between; - gap: var(--o-ui-sp-4); + gap: var(--hop-space-inline-md); flex-wrap: wrap; } @@ -113,7 +113,8 @@ /* DIALOG | CONTENT */ .o-ui-dialog-content { - margin-top: var(--o-ui-sp-4); + color: var(--hop-neutral-text-weak); + margin-top: var(--hop-space-stack-md); display: flex; flex-direction: column; align-items: stretch; @@ -123,9 +124,9 @@ .o-ui-dialog-footer-section { display: flex; justify-content: space-between; - padding-top: var(--o-ui-sp-6); + padding-top: var(--hop-space-inset-lg); margin-top: auto; - gap: var(--o-ui-sp-4); + gap: var(--hop-space-inline-md); } /* DIALOG | FOOTER SECTION | FOOTER */ @@ -148,6 +149,6 @@ /* DISMISS BUTTON */ .o-ui-dialog .o-ui-dialog-dismiss-button { position: absolute; - right: var(--o-ui-sp-4); - top: var(--o-ui-sp-4); + right: 0.5rem; + top: 0.5rem; } diff --git a/packages/components/src/dialog/src/Dialog.tsx b/packages/components/src/dialog/src/Dialog.tsx index c18ee8f73..9cc9c0e50 100644 --- a/packages/components/src/dialog/src/Dialog.tsx +++ b/packages/components/src/dialog/src/Dialog.tsx @@ -262,11 +262,11 @@ export function InnerDialog({ ); const headerMarkup = isString(header?.props?.children) - ? cloneElement(header, { children: {header?.props?.children} }) + ? cloneElement(header, { children: {header?.props?.children} }) : header; const footerMarkup = isString(footer?.props?.children) - ? cloneElement(footer, { children: {footer?.props?.children} }) + ? cloneElement(footer, { children: {footer?.props?.children} }) : footer; const dismissButtonMarkup = dismissable && ( diff --git a/packages/components/src/modal/docs/Modal.stories.mdx b/packages/components/src/modal/docs/Modal.stories.mdx index 59abc7365..e1efe9a15 100644 --- a/packages/components/src/modal/docs/Modal.stories.mdx +++ b/packages/components/src/modal/docs/Modal.stories.mdx @@ -62,8 +62,8 @@ A modal must have an heading and a content. Cloud City - Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature. - The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors. + Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature. + The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors. @@ -82,8 +82,8 @@ A modal can have a side banner [image](?path=/story/chromatic-image--default). M City over clouds Cloud City - Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature. - The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors. + Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature. + The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors. @@ -102,8 +102,8 @@ Or an [illustration](?path=/docs/illustration--horizontal). Prefer 1:1 ratio for Cloud City - Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature. - The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors. + Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature. + The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors. @@ -150,11 +150,11 @@ Use an header to provide additional information usually in the form of a link or Cloud City
- Wikipedia + Wikipedia
- Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature. - The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors. + Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature. + The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors. @@ -172,8 +172,8 @@ Use a footer to provide trivial information about content present in the modal, Cloud City - Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature. - The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors. + Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature. + The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors.
Copyright 2021
 @@ -192,8 +192,8 @@ A modal can have a single [button](?path=/docs/button--default-story). Use a pri Cloud City - Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature. - The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors. + Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature. + The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors. @@ -210,8 +210,8 @@ Or a [group of button](?path=/docs/button--default-story#button-group). A maximu Cloud City - Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature. - The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors. + Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature. + The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors. diff --git a/packages/components/src/modal/src/Modal.css b/packages/components/src/modal/src/Modal.css index a67cbffc6..cdcad9f77 100644 --- a/packages/components/src/modal/src/Modal.css +++ b/packages/components/src/modal/src/Modal.css @@ -3,7 +3,7 @@ display: grid; align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); - gap: var(--o-ui-sp-7); + gap: var(--hop-space-inline-xl); } .o-ui-modal-choice { From 16b229e03b73ed9edf5696d2dea981dc1d38be7b Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Wed, 18 Oct 2023 09:34:14 -0400 Subject: [PATCH 3/6] updated modal tests --- .../modal/tests/chromatic/Modal.stories.tsx | 54 +++++++++---------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/packages/components/src/modal/tests/chromatic/Modal.stories.tsx b/packages/components/src/modal/tests/chromatic/Modal.stories.tsx index f5c7c1f60..7b7870a51 100644 --- a/packages/components/src/modal/tests/chromatic/Modal.stories.tsx +++ b/packages/components/src/modal/tests/chromatic/Modal.stories.tsx @@ -23,9 +23,9 @@ export const Default: ModalStory = { Iconic Arecibo Observatory collapses - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. ) @@ -38,9 +38,9 @@ export const ModalImage: ModalStory = { Apollo 11 Iconic Arecibo Observatory collapses - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. ) @@ -55,9 +55,9 @@ export const ModalIllustration: ModalStory = { Iconic Arecibo Observatory collapses - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. ) @@ -92,7 +92,7 @@ export const ChoiceWithText: ModalStory = { Space agencies - Which of the following space agency do you prefer? + Which of the following space agency do you prefer? SpaceX Space X @@ -116,14 +116,14 @@ export const ChoiceWithContentBetweenCards: ModalStory = { Space agencies - Which of the following space agency do you prefer? + Which of the following space agency do you prefer? SpaceX Space X It's about believing in the future and thinking that the future will be better than the past. - Thank you for participating. + Thank you for participating. Blue Origin Blue Origin @@ -141,9 +141,9 @@ export const StyledSystemStyleProp: ModalStory = { Iconic Arecibo Observatory collapses - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. ) @@ -155,9 +155,9 @@ export const ClassName: ModalStory = { Iconic Arecibo Observatory collapses - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. ) @@ -170,9 +170,9 @@ export const ZoomIn: ModalStory = { Iconic Arecibo Observatory collapses - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. @@ -186,9 +186,9 @@ export const ZoomOut: ModalStory = { Iconic Arecibo Observatory collapses - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. @@ -200,9 +200,9 @@ export const StyledSystem: ModalStory = { Iconic Arecibo Observatory collapses - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. ) From f3f94a8a055a639faca76862672dc1580c59dcf6 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Wed, 18 Oct 2023 10:50:33 -0400 Subject: [PATCH 4/6] modified padding to acknowledge X position --- packages/components/src/dialog/src/Dialog.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/dialog/src/Dialog.css b/packages/components/src/dialog/src/Dialog.css index d871198cc..a4ec18fef 100644 --- a/packages/components/src/dialog/src/Dialog.css +++ b/packages/components/src/dialog/src/Dialog.css @@ -39,7 +39,7 @@ /* DIALOG | ASIDE */ .o-ui-dialog-aside { - padding: var(--hop-space-inset-lg); + padding: var(--hop-space-inset-lg) var(--hop-space-inset-xl); grid-area: aside; overflow: hidden; display: flex; From abfe6049a9fb6b96fa86ebce02bdd97ef8ec9e69 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Wed, 18 Oct 2023 11:34:16 -0400 Subject: [PATCH 5/6] updated Alert brand with icon color --- packages/components/src/alert/src/Alert.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/alert/src/Alert.css b/packages/components/src/alert/src/Alert.css index 33d1b4d01..cc954ec56 100644 --- a/packages/components/src/alert/src/Alert.css +++ b/packages/components/src/alert/src/Alert.css @@ -1,7 +1,7 @@ .o-ui-alert-warning-icon { - color: var(--o-ui-icon-alias-warning); + color: var(--hop-warning-icon-weak); } .o-ui-alert-negative-icon { - color: var(--o-ui-icon-alias-alert); + color: var(--hop-danger-icon-weak); } From 332143e9f153d058e750b46c20a77a389a444236 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Wed, 18 Oct 2023 12:20:23 -0400 Subject: [PATCH 6/6] added shadow to dialog and updated underlay color --- packages/components/src/dialog/src/Dialog.css | 1 + packages/components/src/overlay/src/Underlay.css | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/dialog/src/Dialog.css b/packages/components/src/dialog/src/Dialog.css index a4ec18fef..c4e695311 100644 --- a/packages/components/src/dialog/src/Dialog.css +++ b/packages/components/src/dialog/src/Dialog.css @@ -22,6 +22,7 @@ position: relative; background-color: var(--hop-neutral-surface); border-radius: var(--hop-shape-rounded-md); + box-shadow: var(--hop-elevation-lifted); display: grid; overflow: hidden; align-items: stretch; diff --git a/packages/components/src/overlay/src/Underlay.css b/packages/components/src/overlay/src/Underlay.css index 144ad2f1a..a5e5d0727 100644 --- a/packages/components/src/overlay/src/Underlay.css +++ b/packages/components/src/overlay/src/Underlay.css @@ -5,6 +5,6 @@ width: 100%; height: 100%; isolation: isolate; - background-color: var(--o-ui-bg-alias-underlay); + background-color: rgba(60, 60, 60, 0.6); overflow: hidden; }