From 1ad4566f823755ff5e8cd9cb9d33c2d338732af7 Mon Sep 17 00:00:00 2001 From: Alan Zou Date: Fri, 15 Apr 2022 16:29:29 +0800 Subject: [PATCH] chore(Snapshot): update snapshot --- .../AccordionDetails.story.tsx.snap | 26 +- .../AccordionSummary.story.tsx.snap | 52 +- .../__snapshots__/Accordion.story.tsx.snap | 104 +- .../__snapshots__/Autocomplete.story.tsx.snap | 82 +- .../__snapshots__/IconButton.story.tsx.snap | 3815 +++++++++++++---- .../IconButtonGroup.story.tsx.snap | 138 +- .../__snapshots__/Card.story.tsx.snap | 34 +- .../__snapshots__/CardHeader.story.tsx.snap | 26 +- .../CardHoverActions.story.tsx.snap | 26 +- .../CardSelectionArea.story.tsx.snap | 4 +- .../__snapshots__/CardExample.story.tsx.snap | 52 +- .../__snapshots__/Chip.story.tsx.snap | 156 +- .../__snapshots__/DialDelete.story.tsx.snap | 26 +- .../__snapshots__/DialPad.story.tsx.snap | 26 +- .../__snapshots__/Dialer.story.tsx.snap | 188 +- .../__snapshots__/DialogTitle.story.tsx.snap | 56 +- .../__snapshots__/Dialog.story.tsx.snap | 36 +- .../__snapshots__/Downshift.story.tsx.snap | 996 +++-- .../useSuggestionList.story.tsx.snap | 30 +- .../__snapshots__/Drawer.story.tsx.snap | 4 +- .../__snapshots__/Checkbox.story.tsx.snap | 20 +- .../__snapshots__/FormGroup.story.tsx.snap | 24 +- .../__snapshots__/DatePicker.story.tsx.snap | 182 +- .../__snapshots__/TimePicker.story.tsx.snap | 234 +- .../__snapshots__/Radio.story.tsx.snap | 32 +- .../__snapshots__/RadioGroup.story.tsx.snap | 40 +- .../__snapshots__/PlainSelects.story.tsx.snap | 2 +- .../__snapshots__/Slider.story.tsx.snap | 32 +- .../__snapshots__/Switch.story.tsx.snap | 24 +- .../OutlineTextField.story.tsx.snap | 446 +- .../__snapshots__/TextField.story.tsx.snap | 312 +- .../__snapshots__/Hidden.story.tsx.snap | 2 +- .../__snapshots__/Icon.story.tsx.snap | 8 +- .../__snapshots__/ListExamples.story.tsx.snap | 26 +- .../ListItemExamples.story.tsx.snap | 182 +- .../ListItemSecondaryAction.story.tsx.snap | 4 +- .../MenuItemExamples.story.tsx.snap | 50 +- .../__snapshots__/Portal.story.tsx.snap | 2 +- .../__snapshots__/PortalHost.story.tsx.snap | 28 +- .../__snapshots__/Table.story.tsx.snap | 112 +- .../TablePaginationComponent.story.tsx.snap | 364 +- .../__snapshots__/TabList.story.tsx.snap | 2 +- .../__snapshots__/TabPanel.story.tsx.snap | 2 +- .../__snapshots__/Tabs.story.tsx.snap | 16 +- .../__snapshots__/Tooltip.story.tsx.snap | 44 +- .../__snapshots__/Collapse.story.tsx.snap | 6 +- .../__snapshots__/Fade.story.tsx.snap | 8 +- .../__snapshots__/Grow.story.tsx.snap | 8 +- .../__snapshots__/Slide.story.tsx.snap | 8 +- .../__snapshots__/Zoom.story.tsx.snap | 8 +- .../__snapshots__/ZoomFrom.story.tsx.snap | 8 +- .../ZoomInFadeOut.story.tsx.snap | 4 +- .../__snapshots__/Palette.story.tsx.snap | 26 +- .../__snapshots__/useAudio.story.tsx.snap | 26 +- .../useKeyDownOnce.story.tsx.snap | 52 +- .../useOnlyOneFocusable.story.tsx.snap | 26 +- sync-github.json | 2 +- 57 files changed, 5798 insertions(+), 2451 deletions(-) diff --git a/packages/juno-core/src/components/Accordion/AccordionDetails/__stories__/__snapshots__/AccordionDetails.story.tsx.snap b/packages/juno-core/src/components/Accordion/AccordionDetails/__stories__/__snapshots__/AccordionDetails.story.tsx.snap index 05b85444..81aa4fbf 100644 --- a/packages/juno-core/src/components/Accordion/AccordionDetails/__stories__/__snapshots__/AccordionDetails.story.tsx.snap +++ b/packages/juno-core/src/components/Accordion/AccordionDetails/__stories__/__snapshots__/AccordionDetails.story.tsx.snap @@ -110,9 +110,21 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/AccordionDetails Accordion background-color: #666666; } -.c4.RcIconButton-contained.focus-visible, -.c4.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c4.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c4.RcIconButton-contained.focus-visible:before, +.c4.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c4.RcIconButton-contained.focus-visible, @@ -122,10 +134,6 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/AccordionDetails Accordion color: #fff; } -.c4.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c4.RcIconButton-contained:active, .c4.RcIconButton-contained:active .c5 { color: #fff; @@ -183,8 +191,8 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/AccordionDetails Accordion } @media (hover:hover) and (pointer:fine) { - .c4.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c4.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c4.RcIconButton-contained:hover, diff --git a/packages/juno-core/src/components/Accordion/AccordionSummary/__stories__/__snapshots__/AccordionSummary.story.tsx.snap b/packages/juno-core/src/components/Accordion/AccordionSummary/__stories__/__snapshots__/AccordionSummary.story.tsx.snap index 16321916..ef27f5dc 100644 --- a/packages/juno-core/src/components/Accordion/AccordionSummary/__stories__/__snapshots__/AccordionSummary.story.tsx.snap +++ b/packages/juno-core/src/components/Accordion/AccordionSummary/__stories__/__snapshots__/AccordionSummary.story.tsx.snap @@ -110,9 +110,21 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/AccordionSummary Accordion background-color: #666666; } -.c4.RcIconButton-contained.focus-visible, -.c4.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c4.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c4.RcIconButton-contained.focus-visible:before, +.c4.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c4.RcIconButton-contained.focus-visible, @@ -122,10 +134,6 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/AccordionSummary Accordion color: #fff; } -.c4.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c4.RcIconButton-contained:active, .c4.RcIconButton-contained:active .c5 { color: #fff; @@ -183,8 +191,8 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/AccordionSummary Accordion } @media (hover:hover) and (pointer:fine) { - .c4.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c4.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c4.RcIconButton-contained:hover, @@ -421,9 +429,21 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/AccordionSummary Accordion background-color: #666666; } -.c4.RcIconButton-contained.focus-visible, -.c4.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c4.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c4.RcIconButton-contained.focus-visible:before, +.c4.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c4.RcIconButton-contained.focus-visible, @@ -433,10 +453,6 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/AccordionSummary Accordion color: #fff; } -.c4.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c4.RcIconButton-contained:active, .c4.RcIconButton-contained:active .c5 { color: #fff; @@ -494,8 +510,8 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/AccordionSummary Accordion } @media (hover:hover) and (pointer:fine) { - .c4.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c4.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c4.RcIconButton-contained:hover, diff --git a/packages/juno-core/src/components/Accordion/__stories__/__snapshots__/Accordion.story.tsx.snap b/packages/juno-core/src/components/Accordion/__stories__/__snapshots__/Accordion.story.tsx.snap index d1ba6fc5..51884e7b 100644 --- a/packages/juno-core/src/components/Accordion/__stories__/__snapshots__/Accordion.story.tsx.snap +++ b/packages/juno-core/src/components/Accordion/__stories__/__snapshots__/Accordion.story.tsx.snap @@ -110,9 +110,21 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/Accordion Accordion 1`] = background-color: #666666; } -.c4.RcIconButton-contained.focus-visible, -.c4.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c4.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c4.RcIconButton-contained.focus-visible:before, +.c4.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c4.RcIconButton-contained.focus-visible, @@ -122,10 +134,6 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/Accordion Accordion 1`] = color: #fff; } -.c4.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c4.RcIconButton-contained:active, .c4.RcIconButton-contained:active .c5 { color: #fff; @@ -183,8 +191,8 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/Accordion Accordion 1`] = } @media (hover:hover) and (pointer:fine) { - .c4.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c4.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c4.RcIconButton-contained:hover, @@ -422,9 +430,21 @@ Array [ background-color: #666666; } -.c4.RcIconButton-contained.focus-visible, -.c4.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c4.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c4.RcIconButton-contained.focus-visible:before, +.c4.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c4.RcIconButton-contained.focus-visible, @@ -434,10 +454,6 @@ Array [ color: #fff; } -.c4.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c4.RcIconButton-contained:active, .c4.RcIconButton-contained:active .c5 { color: #fff; @@ -495,8 +511,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c4.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c4.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c4.RcIconButton-contained:hover, @@ -728,9 +744,21 @@ Array [ background-color: #666666; } -.c4.RcIconButton-contained.focus-visible, -.c4.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c4.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c4.RcIconButton-contained.focus-visible:before, +.c4.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c4.RcIconButton-contained.focus-visible, @@ -740,10 +768,6 @@ Array [ color: #fff; } -.c4.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c4.RcIconButton-contained:active, .c4.RcIconButton-contained:active .c5 { color: #fff; @@ -801,8 +825,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c4.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c4.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c4.RcIconButton-contained:hover, @@ -1034,9 +1058,21 @@ Array [ background-color: #666666; } -.c4.RcIconButton-contained.focus-visible, -.c4.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c4.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c4.RcIconButton-contained.focus-visible:before, +.c4.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c4.RcIconButton-contained.focus-visible, @@ -1046,10 +1082,6 @@ Array [ color: #fff; } -.c4.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c4.RcIconButton-contained:active, .c4.RcIconButton-contained:active .c5 { color: #fff; @@ -1107,8 +1139,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c4.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c4.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c4.RcIconButton-contained:hover, diff --git a/packages/juno-core/src/components/Autocomplete/__stories__/__snapshots__/Autocomplete.story.tsx.snap b/packages/juno-core/src/components/Autocomplete/__stories__/__snapshots__/Autocomplete.story.tsx.snap index fe9f5b48..f9044170 100644 --- a/packages/juno-core/src/components/Autocomplete/__stories__/__snapshots__/Autocomplete.story.tsx.snap +++ b/packages/juno-core/src/components/Autocomplete/__stories__/__snapshots__/Autocomplete.story.tsx.snap @@ -141,9 +141,21 @@ Array [ background-color: #666666; } -.c2.RcIconButton-contained.focus-visible, -.c2.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c2.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c2.RcIconButton-contained.focus-visible:before, +.c2.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c2.RcIconButton-contained.focus-visible, @@ -153,10 +165,6 @@ Array [ color: #fff; } -.c2.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c2.RcIconButton-contained:active, .c2.RcIconButton-contained:active .c5 { color: #fff; @@ -373,8 +381,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c2.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c2.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c2.RcIconButton-contained:hover, @@ -458,7 +466,7 @@ Array [ value="" />
+ + + +
+
+
+ Disabled ripple +
+ + +
+
+
+ disabledFakeBorder +
+ + (Only use in highContractMode) + +
+ + +
+`; + exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1`] = ` .c4 { width: 1em; @@ -94,9 +1511,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 background-color: #666666; } -.c1.RcIconButton-contained.focus-visible, -.c1.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c1.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c1.RcIconButton-contained.focus-visible:before, +.c1.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c1.RcIconButton-contained.focus-visible, @@ -106,10 +1535,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 color: #fff; } -.c1.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c1.RcIconButton-contained:active, .c1.RcIconButton-contained:active .c2 { color: #fff; @@ -198,9 +1623,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 background-color: #666666; } -.c5.RcIconButton-contained.focus-visible, -.c5.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c5.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 4px; + position: absolute; +} + +.c5.RcIconButton-contained.focus-visible:before, +.c5.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c5.RcIconButton-contained.focus-visible, @@ -210,10 +1647,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 color: #fff; } -.c5.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c5.RcIconButton-contained:active, .c5.RcIconButton-contained:active .c2 { color: #fff; @@ -308,9 +1741,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 background-color: #666666; } -.c6.RcIconButton-contained.focus-visible, -.c6.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c6.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 3px; + position: absolute; +} + +.c6.RcIconButton-contained.focus-visible:before, +.c6.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c6.RcIconButton-contained.focus-visible, @@ -320,10 +1765,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 color: #fff; } -.c6.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c6.RcIconButton-contained:active, .c6.RcIconButton-contained:active .c2 { color: #fff; @@ -418,9 +1859,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 background-color: #666666; } -.c7.RcIconButton-contained.focus-visible, -.c7.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c7.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 100vw; + position: absolute; +} + +.c7.RcIconButton-contained.focus-visible:before, +.c7.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c7.RcIconButton-contained.focus-visible, @@ -430,10 +1883,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 color: #fff; } -.c7.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c7.RcIconButton-contained:active, .c7.RcIconButton-contained:active .c2 { color: #fff; @@ -522,9 +1971,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 background-color: #666666; } -.c8.RcIconButton-contained.focus-visible, -.c8.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c8.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 2px; + position: absolute; +} + +.c8.RcIconButton-contained.focus-visible:before, +.c8.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c8.RcIconButton-contained.focus-visible, @@ -534,10 +1995,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 color: #fff; } -.c8.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c8.RcIconButton-contained:active, .c8.RcIconButton-contained:active .c2 { color: #fff; @@ -632,9 +2089,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 background-color: #666666; } -.c9.RcIconButton-contained.focus-visible, -.c9.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c9.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 8px; + position: absolute; +} + +.c9.RcIconButton-contained.focus-visible:before, +.c9.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c9.RcIconButton-contained.focus-visible, @@ -644,10 +2113,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 color: #fff; } -.c9.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c9.RcIconButton-contained:active, .c9.RcIconButton-contained:active .c2 { color: #fff; @@ -742,9 +2207,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 background-color: #666666; } -.c10.RcIconButton-contained.focus-visible, -.c10.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c10.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 16px; + position: absolute; +} + +.c10.RcIconButton-contained.focus-visible:before, +.c10.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c10.RcIconButton-contained.focus-visible, @@ -754,10 +2231,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 color: #fff; } -.c10.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c10.RcIconButton-contained:active, .c10.RcIconButton-contained:active .c2 { color: #fff; @@ -852,9 +2325,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 background-color: #666666; } -.c11.RcIconButton-contained.focus-visible, -.c11.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c11.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 0px; + position: absolute; +} + +.c11.RcIconButton-contained.focus-visible:before, +.c11.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c11.RcIconButton-contained.focus-visible, @@ -864,10 +2349,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 color: #fff; } -.c11.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c11.RcIconButton-contained:active, .c11.RcIconButton-contained:active .c2 { color: #fff; @@ -906,8 +2387,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 } @media (hover:hover) and (pointer:fine) { - .c1.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c1.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c1.RcIconButton-contained:hover, @@ -928,8 +2409,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 } @media (hover:hover) and (pointer:fine) { - .c5.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c5.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c5.RcIconButton-contained:hover, @@ -950,8 +2431,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 } @media (hover:hover) and (pointer:fine) { - .c6.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c6.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c6.RcIconButton-contained:hover, @@ -972,8 +2453,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 } @media (hover:hover) and (pointer:fine) { - .c7.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c7.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c7.RcIconButton-contained:hover, @@ -994,8 +2475,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 } @media (hover:hover) and (pointer:fine) { - .c8.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c8.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c8.RcIconButton-contained:hover, @@ -1016,8 +2497,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 } @media (hover:hover) and (pointer:fine) { - .c9.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c9.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c9.RcIconButton-contained:hover, @@ -1038,8 +2519,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 } @media (hover:hover) and (pointer:fine) { - .c10.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c10.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c10.RcIconButton-contained:hover, @@ -1060,8 +2541,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 } @media (hover:hover) and (pointer:fine) { - .c11.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c11.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c11.RcIconButton-contained:hover, @@ -1071,10 +2552,10 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1 }
-
-
-
-
-
-
-
-
@@ -1531,9 +2988,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton 1`] = ` background-color: #666666; } -.c0.RcIconButton-contained.focus-visible, -.c0.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c0.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c0.RcIconButton-contained.focus-visible:before, +.c0.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c0.RcIconButton-contained.focus-visible, @@ -1543,10 +3012,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton 1`] = ` color: #fff; } -.c0.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c0.RcIconButton-contained:active, .c0.RcIconButton-contained:active .c1 { color: #fff; @@ -1571,8 +3036,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton 1`] = ` } @media (hover:hover) and (pointer:fine) { - .c0.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c0.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c0.RcIconButton-contained:hover, @@ -1702,9 +3167,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = background-color: #666666; } -.c1.RcIconButton-contained.focus-visible, -.c1.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c1.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c1.RcIconButton-contained.focus-visible:before, +.c1.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c1.RcIconButton-contained.focus-visible, @@ -1714,10 +3191,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = color: #fff; } -.c1.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c1.RcIconButton-contained:active, .c1.RcIconButton-contained:active .c2 { color: #fff; @@ -1799,9 +3272,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = background-color: #666666; } -.c5.RcIconButton-contained.focus-visible, -.c5.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c5.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c5.RcIconButton-contained.focus-visible:before, +.c5.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c5.RcIconButton-contained.focus-visible, @@ -1811,10 +3296,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = color: #fff; } -.c5.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c5.RcIconButton-contained:active, .c5.RcIconButton-contained:active .c2 { color: #fff; @@ -1903,9 +3384,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = background-color: #666666; } -.c6.RcIconButton-contained.focus-visible, -.c6.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c6.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c6.RcIconButton-contained.focus-visible:before, +.c6.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c6.RcIconButton-contained.focus-visible, @@ -1915,10 +3408,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = color: #fff; } -.c6.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c6.RcIconButton-contained:active, .c6.RcIconButton-contained:active .c2 { color: #fff; @@ -2007,9 +3496,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = background-color: #666666; } -.c7.RcIconButton-contained.focus-visible, -.c7.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c7.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c7.RcIconButton-contained.focus-visible:before, +.c7.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c7.RcIconButton-contained.focus-visible, @@ -2019,10 +3520,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = color: #fff; } -.c7.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c7.RcIconButton-contained:active, .c7.RcIconButton-contained:active .c2 { color: #fff; @@ -2109,9 +3606,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = background-color: #666666; } -.c8.RcIconButton-contained.focus-visible, -.c8.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c8.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c8.RcIconButton-contained.focus-visible:before, +.c8.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c8.RcIconButton-contained.focus-visible, @@ -2121,10 +3630,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = color: #fff; } -.c8.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c8.RcIconButton-contained:active, .c8.RcIconButton-contained:active .c2 { color: #fff; @@ -2211,9 +3716,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = background-color: #666666; } -.c9.RcIconButton-contained.focus-visible, -.c9.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c9.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c9.RcIconButton-contained.focus-visible:before, +.c9.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c9.RcIconButton-contained.focus-visible, @@ -2223,10 +3740,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = color: #fff; } -.c9.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c9.RcIconButton-contained:active, .c9.RcIconButton-contained:active .c2 { color: #fff; @@ -2308,9 +3821,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = background-color: #666666; } -.c10.RcIconButton-contained.focus-visible, -.c10.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c10.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 4px; + position: absolute; +} + +.c10.RcIconButton-contained.focus-visible:before, +.c10.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c10.RcIconButton-contained.focus-visible, @@ -2320,10 +3845,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = color: #fff; } -.c10.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c10.RcIconButton-contained:active, .c10.RcIconButton-contained:active .c2 { color: #fff; @@ -2411,9 +3932,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = background-color: #666666; } -.c11.RcIconButton-contained.focus-visible, -.c11.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c11.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 4px; + position: absolute; +} + +.c11.RcIconButton-contained.focus-visible:before, +.c11.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c11.RcIconButton-contained.focus-visible, @@ -2423,10 +3956,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = color: #fff; } -.c11.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c11.RcIconButton-contained:active, .c11.RcIconButton-contained:active .c2 { color: #fff; @@ -2528,9 +4057,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = background-color: #666666; } -.c12.RcIconButton-contained.focus-visible, -.c12.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c12.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c12.RcIconButton-contained.focus-visible:before, +.c12.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c12.RcIconButton-contained.focus-visible, @@ -2540,10 +4081,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = color: #fff; } -.c12.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c12.RcIconButton-contained:active, .c12.RcIconButton-contained:active .c2 { color: #fff; @@ -2576,8 +4113,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = } @media (hover:hover) and (pointer:fine) { - .c1.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c1.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c1.RcIconButton-contained:hover, @@ -2598,8 +4135,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = } @media (hover:hover) and (pointer:fine) { - .c5.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c5.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c5.RcIconButton-contained:hover, @@ -2620,8 +4157,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = } @media (hover:hover) and (pointer:fine) { - .c6.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c6.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c6.RcIconButton-contained:hover, @@ -2642,8 +4179,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = } @media (hover:hover) and (pointer:fine) { - .c7.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c7.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c7.RcIconButton-contained:hover, @@ -2664,8 +4201,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = } @media (hover:hover) and (pointer:fine) { - .c8.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c8.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c8.RcIconButton-contained:hover, @@ -2686,8 +4223,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = } @media (hover:hover) and (pointer:fine) { - .c9.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c9.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c9.RcIconButton-contained:hover, @@ -2708,8 +4245,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = } @media (hover:hover) and (pointer:fine) { - .c10.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c10.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c10.RcIconButton-contained:hover, @@ -2730,8 +4267,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = } @media (hover:hover) and (pointer:fine) { - .c11.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c11.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c11.RcIconButton-contained:hover, @@ -2752,8 +4289,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] = } @media (hover:hover) and (pointer:fine) { - .c12.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c12.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c12.RcIconButton-contained:hover, @@ -2950,7 +4487,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =

@@ -7708,11 +9528,14 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and +



@@ -7776,6 +9602,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and +

@@ -7815,7 +9644,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
+

@@ -7899,11 +9731,14 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and +



@@ -7967,6 +9805,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and +

@@ -8006,7 +9847,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
+

@@ -8090,11 +9934,14 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and +



@@ -8158,6 +10008,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and +

@@ -8197,7 +10050,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
+

@@ -8281,11 +10137,14 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and +



@@ -8349,6 +10211,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and +

@@ -8388,7 +10253,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
+

@@ -8472,11 +10340,14 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and +



@@ -8540,6 +10414,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and +

@@ -8579,7 +10456,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
+

@@ -8663,11 +10543,14 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and +



@@ -8731,6 +10617,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and +

@@ -8770,7 +10659,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
+

@@ -8854,11 +10746,14 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and +



@@ -8922,6 +10820,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and +

@@ -9051,9 +10952,21 @@ Array [ background-color: #FF8800; } -.c0.RcIconButton-contained.focus-visible, -.c0.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(255,136,0,0.84); +.c0.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c0.RcIconButton-contained.focus-visible:before, +.c0.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(0,0,0,0.16); } .c0.RcIconButton-contained.focus-visible, @@ -9063,10 +10976,6 @@ Array [ color: rgba(0,0,0,0.87); } -.c0.RcIconButton-contained:active { - background-color: rgba(255,136,0,0.76); -} - .c0.RcIconButton-contained:active, .c0.RcIconButton-contained:active .c1 { color: rgba(0,0,0,0.87); @@ -9125,8 +11034,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c0.RcIconButton-contained:hover { - background-color: rgba(255,136,0,0.92); + .c0.RcIconButton-contained:hover:before { + background-color: rgba(0,0,0,0.08); } .c0.RcIconButton-contained:hover, @@ -9302,9 +11211,21 @@ Array [ background-color: #FF8800; } -.c0.RcIconButton-contained.focus-visible, -.c0.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(255,136,0,0.84); +.c0.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c0.RcIconButton-contained.focus-visible:before, +.c0.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(0,0,0,0.16); } .c0.RcIconButton-contained.focus-visible, @@ -9314,10 +11235,6 @@ Array [ color: rgba(0,0,0,0.87); } -.c0.RcIconButton-contained:active { - background-color: rgba(255,136,0,0.76); -} - .c0.RcIconButton-contained:active, .c0.RcIconButton-contained:active .c1 { color: rgba(0,0,0,0.87); @@ -9356,8 +11273,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c0.RcIconButton-contained:hover { - background-color: rgba(255,136,0,0.92); + .c0.RcIconButton-contained:hover:before { + background-color: rgba(0,0,0,0.08); } .c0.RcIconButton-contained:hover, @@ -9497,9 +11414,21 @@ Array [ background-color: #666666; } -.c1.RcIconButton-contained.focus-visible, -.c1.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c1.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c1.RcIconButton-contained.focus-visible:before, +.c1.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c1.RcIconButton-contained.focus-visible, @@ -9509,10 +11438,6 @@ Array [ color: #fff; } -.c1.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c1.RcIconButton-contained:active, .c1.RcIconButton-contained:active .c2 { color: #fff; @@ -9601,9 +11526,21 @@ Array [ background-color: #666666; } -.c5.RcIconButton-contained.focus-visible, -.c5.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c5.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c5.RcIconButton-contained.focus-visible:before, +.c5.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c5.RcIconButton-contained.focus-visible, @@ -9613,10 +11550,6 @@ Array [ color: #fff; } -.c5.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c5.RcIconButton-contained:active, .c5.RcIconButton-contained:active .c2 { color: #fff; @@ -9705,9 +11638,21 @@ Array [ background-color: #666666; } -.c6.RcIconButton-contained.focus-visible, -.c6.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c6.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c6.RcIconButton-contained.focus-visible:before, +.c6.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c6.RcIconButton-contained.focus-visible, @@ -9717,10 +11662,6 @@ Array [ color: #fff; } -.c6.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c6.RcIconButton-contained:active, .c6.RcIconButton-contained:active .c2 { color: #fff; @@ -9809,9 +11750,21 @@ Array [ background-color: #666666; } -.c7.RcIconButton-contained.focus-visible, -.c7.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c7.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c7.RcIconButton-contained.focus-visible:before, +.c7.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c7.RcIconButton-contained.focus-visible, @@ -9821,10 +11774,6 @@ Array [ color: #fff; } -.c7.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c7.RcIconButton-contained:active, .c7.RcIconButton-contained:active .c2 { color: #fff; @@ -9913,9 +11862,21 @@ Array [ background-color: #666666; } -.c8.RcIconButton-contained.focus-visible, -.c8.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c8.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c8.RcIconButton-contained.focus-visible:before, +.c8.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c8.RcIconButton-contained.focus-visible, @@ -9925,10 +11886,6 @@ Array [ color: #fff; } -.c8.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c8.RcIconButton-contained:active, .c8.RcIconButton-contained:active .c2 { color: #fff; @@ -10017,9 +11974,21 @@ Array [ background-color: #666666; } -.c9.RcIconButton-contained.focus-visible, -.c9.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c9.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c9.RcIconButton-contained.focus-visible:before, +.c9.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c9.RcIconButton-contained.focus-visible, @@ -10029,10 +11998,6 @@ Array [ color: #fff; } -.c9.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c9.RcIconButton-contained:active, .c9.RcIconButton-contained:active .c2 { color: #fff; @@ -10121,9 +12086,21 @@ Array [ background-color: #666666; } -.c10.RcIconButton-contained.focus-visible, -.c10.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c10.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c10.RcIconButton-contained.focus-visible:before, +.c10.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c10.RcIconButton-contained.focus-visible, @@ -10133,10 +12110,6 @@ Array [ color: #fff; } -.c10.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c10.RcIconButton-contained:active, .c10.RcIconButton-contained:active .c2 { color: #fff; @@ -10225,9 +12198,21 @@ Array [ background-color: #666666; } -.c11.RcIconButton-contained.focus-visible, -.c11.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c11.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c11.RcIconButton-contained.focus-visible:before, +.c11.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c11.RcIconButton-contained.focus-visible, @@ -10237,10 +12222,6 @@ Array [ color: #fff; } -.c11.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c11.RcIconButton-contained:active, .c11.RcIconButton-contained:active .c2 { color: #fff; @@ -10329,9 +12310,21 @@ Array [ background-color: #666666; } -.c12.RcIconButton-contained.focus-visible, -.c12.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c12.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c12.RcIconButton-contained.focus-visible:before, +.c12.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c12.RcIconButton-contained.focus-visible, @@ -10341,10 +12334,6 @@ Array [ color: #fff; } -.c12.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c12.RcIconButton-contained:active, .c12.RcIconButton-contained:active .c2 { color: #fff; @@ -10433,9 +12422,21 @@ Array [ background-color: #666666; } -.c13.RcIconButton-contained.focus-visible, -.c13.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c13.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c13.RcIconButton-contained.focus-visible:before, +.c13.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c13.RcIconButton-contained.focus-visible, @@ -10445,10 +12446,6 @@ Array [ color: #fff; } -.c13.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c13.RcIconButton-contained:active, .c13.RcIconButton-contained:active .c2 { color: #fff; @@ -10537,9 +12534,21 @@ Array [ background-color: #666666; } -.c14.RcIconButton-contained.focus-visible, -.c14.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c14.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c14.RcIconButton-contained.focus-visible:before, +.c14.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c14.RcIconButton-contained.focus-visible, @@ -10549,10 +12558,6 @@ Array [ color: #fff; } -.c14.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c14.RcIconButton-contained:active, .c14.RcIconButton-contained:active .c2 { color: #fff; @@ -10641,9 +12646,21 @@ Array [ background-color: #666666; } -.c15.RcIconButton-contained.focus-visible, -.c15.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c15.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c15.RcIconButton-contained.focus-visible:before, +.c15.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c15.RcIconButton-contained.focus-visible, @@ -10653,10 +12670,6 @@ Array [ color: #fff; } -.c15.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c15.RcIconButton-contained:active, .c15.RcIconButton-contained:active .c2 { color: #fff; @@ -10745,9 +12758,21 @@ Array [ background-color: #666666; } -.c16.RcIconButton-contained.focus-visible, -.c16.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c16.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c16.RcIconButton-contained.focus-visible:before, +.c16.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c16.RcIconButton-contained.focus-visible, @@ -10757,10 +12782,6 @@ Array [ color: #fff; } -.c16.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c16.RcIconButton-contained:active, .c16.RcIconButton-contained:active .c2 { color: #fff; @@ -10849,9 +12870,21 @@ Array [ background-color: #666666; } -.c17.RcIconButton-contained.focus-visible, -.c17.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c17.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c17.RcIconButton-contained.focus-visible:before, +.c17.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c17.RcIconButton-contained.focus-visible, @@ -10861,10 +12894,6 @@ Array [ color: #fff; } -.c17.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c17.RcIconButton-contained:active, .c17.RcIconButton-contained:active .c2 { color: #fff; @@ -10953,9 +12982,21 @@ Array [ background-color: #666666; } -.c18.RcIconButton-contained.focus-visible, -.c18.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c18.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c18.RcIconButton-contained.focus-visible:before, +.c18.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c18.RcIconButton-contained.focus-visible, @@ -10965,10 +13006,6 @@ Array [ color: #fff; } -.c18.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c18.RcIconButton-contained:active, .c18.RcIconButton-contained:active .c2 { color: #fff; @@ -11057,9 +13094,21 @@ Array [ background-color: #666666; } -.c19.RcIconButton-contained.focus-visible, -.c19.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c19.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c19.RcIconButton-contained.focus-visible:before, +.c19.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c19.RcIconButton-contained.focus-visible, @@ -11069,10 +13118,6 @@ Array [ color: #fff; } -.c19.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c19.RcIconButton-contained:active, .c19.RcIconButton-contained:active .c2 { color: #fff; @@ -11161,9 +13206,21 @@ Array [ background-color: #666666; } -.c20.RcIconButton-contained.focus-visible, -.c20.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c20.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c20.RcIconButton-contained.focus-visible:before, +.c20.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c20.RcIconButton-contained.focus-visible, @@ -11173,10 +13230,6 @@ Array [ color: #fff; } -.c20.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c20.RcIconButton-contained:active, .c20.RcIconButton-contained:active .c2 { color: #fff; @@ -11265,9 +13318,21 @@ Array [ background-color: #666666; } -.c21.RcIconButton-contained.focus-visible, -.c21.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c21.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c21.RcIconButton-contained.focus-visible:before, +.c21.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c21.RcIconButton-contained.focus-visible, @@ -11277,10 +13342,6 @@ Array [ color: #fff; } -.c21.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c21.RcIconButton-contained:active, .c21.RcIconButton-contained:active .c2 { color: #fff; @@ -11369,9 +13430,21 @@ Array [ background-color: #666666; } -.c22.RcIconButton-contained.focus-visible, -.c22.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c22.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c22.RcIconButton-contained.focus-visible:before, +.c22.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c22.RcIconButton-contained.focus-visible, @@ -11381,10 +13454,6 @@ Array [ color: #fff; } -.c22.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c22.RcIconButton-contained:active, .c22.RcIconButton-contained:active .c2 { color: #fff; @@ -11473,9 +13542,21 @@ Array [ background-color: #666666; } -.c23.RcIconButton-contained.focus-visible, -.c23.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c23.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c23.RcIconButton-contained.focus-visible:before, +.c23.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c23.RcIconButton-contained.focus-visible, @@ -11485,10 +13566,6 @@ Array [ color: #fff; } -.c23.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c23.RcIconButton-contained:active, .c23.RcIconButton-contained:active .c2 { color: #fff; @@ -11577,9 +13654,21 @@ Array [ background-color: #666666; } -.c24.RcIconButton-contained.focus-visible, -.c24.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c24.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c24.RcIconButton-contained.focus-visible:before, +.c24.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c24.RcIconButton-contained.focus-visible, @@ -11589,10 +13678,6 @@ Array [ color: #fff; } -.c24.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c24.RcIconButton-contained:active, .c24.RcIconButton-contained:active .c2 { color: #fff; @@ -11681,9 +13766,21 @@ Array [ background-color: #666666; } -.c25.RcIconButton-contained.focus-visible, -.c25.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c25.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c25.RcIconButton-contained.focus-visible:before, +.c25.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c25.RcIconButton-contained.focus-visible, @@ -11693,10 +13790,6 @@ Array [ color: #fff; } -.c25.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c25.RcIconButton-contained:active, .c25.RcIconButton-contained:active .c2 { color: #fff; @@ -11785,9 +13878,21 @@ Array [ background-color: #666666; } -.c26.RcIconButton-contained.focus-visible, -.c26.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c26.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c26.RcIconButton-contained.focus-visible:before, +.c26.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c26.RcIconButton-contained.focus-visible, @@ -11797,10 +13902,6 @@ Array [ color: #fff; } -.c26.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c26.RcIconButton-contained:active, .c26.RcIconButton-contained:active .c2 { color: #fff; @@ -11889,9 +13990,21 @@ Array [ background-color: #666666; } -.c27.RcIconButton-contained.focus-visible, -.c27.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c27.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c27.RcIconButton-contained.focus-visible:before, +.c27.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c27.RcIconButton-contained.focus-visible, @@ -11901,10 +14014,6 @@ Array [ color: #fff; } -.c27.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c27.RcIconButton-contained:active, .c27.RcIconButton-contained:active .c2 { color: #fff; @@ -11993,9 +14102,21 @@ Array [ background-color: #666666; } -.c28.RcIconButton-contained.focus-visible, -.c28.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c28.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c28.RcIconButton-contained.focus-visible:before, +.c28.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c28.RcIconButton-contained.focus-visible, @@ -12005,10 +14126,6 @@ Array [ color: #fff; } -.c28.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c28.RcIconButton-contained:active, .c28.RcIconButton-contained:active .c2 { color: #fff; @@ -12075,8 +14192,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c1.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c1.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c1.RcIconButton-contained:hover, @@ -12097,8 +14214,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c5.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c5.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c5.RcIconButton-contained:hover, @@ -12119,8 +14236,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c6.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c6.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c6.RcIconButton-contained:hover, @@ -12141,8 +14258,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c7.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c7.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c7.RcIconButton-contained:hover, @@ -12163,8 +14280,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c8.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c8.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c8.RcIconButton-contained:hover, @@ -12185,8 +14302,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c9.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c9.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c9.RcIconButton-contained:hover, @@ -12207,8 +14324,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c10.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c10.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c10.RcIconButton-contained:hover, @@ -12229,8 +14346,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c11.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c11.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c11.RcIconButton-contained:hover, @@ -12251,8 +14368,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c12.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c12.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c12.RcIconButton-contained:hover, @@ -12273,8 +14390,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c13.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c13.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c13.RcIconButton-contained:hover, @@ -12295,8 +14412,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c14.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c14.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c14.RcIconButton-contained:hover, @@ -12317,8 +14434,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c15.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c15.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c15.RcIconButton-contained:hover, @@ -12339,8 +14456,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c16.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c16.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c16.RcIconButton-contained:hover, @@ -12361,8 +14478,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c17.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c17.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c17.RcIconButton-contained:hover, @@ -12383,8 +14500,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c18.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c18.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c18.RcIconButton-contained:hover, @@ -12405,8 +14522,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c19.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c19.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c19.RcIconButton-contained:hover, @@ -12427,8 +14544,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c20.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c20.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c20.RcIconButton-contained:hover, @@ -12449,8 +14566,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c21.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c21.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c21.RcIconButton-contained:hover, @@ -12471,8 +14588,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c22.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c22.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c22.RcIconButton-contained:hover, @@ -12493,8 +14610,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c23.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c23.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c23.RcIconButton-contained:hover, @@ -12515,8 +14632,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c24.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c24.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c24.RcIconButton-contained:hover, @@ -12537,8 +14654,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c25.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c25.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c25.RcIconButton-contained:hover, @@ -12559,8 +14676,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c26.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c26.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c26.RcIconButton-contained:hover, @@ -12581,8 +14698,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c27.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c27.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c27.RcIconButton-contained:hover, @@ -12603,8 +14720,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c28.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c28.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c28.RcIconButton-contained:hover, @@ -12628,10 +14745,10 @@ Array [ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
, @@ -15068,9 +17260,21 @@ Array [ background-color: #666666; } -.c1.RcIconButton-contained.focus-visible, -.c1.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c1.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c1.RcIconButton-contained.focus-visible:before, +.c1.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c1.RcIconButton-contained.focus-visible, @@ -15080,10 +17284,6 @@ Array [ color: #fff; } -.c1.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c1.RcIconButton-contained:active, .c1.RcIconButton-contained:active .c2 { color: #fff; @@ -15466,8 +17666,8 @@ Array [ } @media (hover:hover) and (pointer:fine) { - .c1.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c1.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c1.RcIconButton-contained:hover, @@ -15477,7 +17677,7 @@ Array [ }
+
, ] diff --git a/packages/juno-core/src/components/Buttons/IconButtonGroup/__stories__/__snapshots__/IconButtonGroup.story.tsx.snap b/packages/juno-core/src/components/Buttons/IconButtonGroup/__stories__/__snapshots__/IconButtonGroup.story.tsx.snap index 1477b079..4f4890ef 100644 --- a/packages/juno-core/src/components/Buttons/IconButtonGroup/__stories__/__snapshots__/IconButtonGroup.story.tsx.snap +++ b/packages/juno-core/src/components/Buttons/IconButtonGroup/__stories__/__snapshots__/IconButtonGroup.story.tsx.snap @@ -101,9 +101,21 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr background-color: #666666; } -.c2.RcIconButton-contained.focus-visible, -.c2.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c2.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c2.RcIconButton-contained.focus-visible:before, +.c2.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c2.RcIconButton-contained.focus-visible, @@ -113,10 +125,6 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr color: #fff; } -.c2.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c2.RcIconButton-contained:active, .c2.RcIconButton-contained:active .c3 { color: #fff; @@ -173,8 +181,8 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr } @media (hover:hover) and (pointer:fine) { - .c2.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c2.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c2.RcIconButton-contained:hover, @@ -441,9 +449,21 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr background-color: #666666; } -.c3.RcIconButton-contained.focus-visible, -.c3.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c3.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c3.RcIconButton-contained.focus-visible:before, +.c3.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c3.RcIconButton-contained.focus-visible, @@ -453,10 +473,6 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr color: #fff; } -.c3.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c3.RcIconButton-contained:active, .c3.RcIconButton-contained:active .c4 { color: #fff; @@ -538,9 +554,21 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr background-color: #666666; } -.c8.RcIconButton-contained.focus-visible, -.c8.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c8.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c8.RcIconButton-contained.focus-visible:before, +.c8.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c8.RcIconButton-contained.focus-visible, @@ -550,10 +578,6 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr color: #fff; } -.c8.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c8.RcIconButton-contained:active, .c8.RcIconButton-contained:active .c4 { color: #fff; @@ -640,9 +664,21 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr background-color: #666666; } -.c9.RcIconButton-contained.focus-visible, -.c9.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c9.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; +} + +.c9.RcIconButton-contained.focus-visible:before, +.c9.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c9.RcIconButton-contained.focus-visible, @@ -652,10 +688,6 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr color: #fff; } -.c9.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c9.RcIconButton-contained:active, .c9.RcIconButton-contained:active .c4 { color: #fff; @@ -737,9 +769,21 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr background-color: #666666; } -.c11.RcIconButton-contained.focus-visible, -.c11.RcIconButton-contained[data-focus-visible-added] { - background-color: rgba(102,102,102,0.84); +.c11.RcIconButton-contained:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 4px; + position: absolute; +} + +.c11.RcIconButton-contained.focus-visible:before, +.c11.RcIconButton-contained[data-focus-visible-added]:before { + background-color: rgba(255,255,255,0.16); } .c11.RcIconButton-contained.focus-visible, @@ -749,10 +793,6 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr color: #fff; } -.c11.RcIconButton-contained:active { - background-color: rgba(102,102,102,0.76); -} - .c11.RcIconButton-contained:active, .c11.RcIconButton-contained:active .c4 { color: #fff; @@ -875,8 +915,8 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr } @media (hover:hover) and (pointer:fine) { - .c3.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c3.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c3.RcIconButton-contained:hover, @@ -897,8 +937,8 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr } @media (hover:hover) and (pointer:fine) { - .c8.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c8.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c8.RcIconButton-contained:hover, @@ -919,8 +959,8 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr } @media (hover:hover) and (pointer:fine) { - .c9.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c9.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c9.RcIconButton-contained:hover, @@ -941,8 +981,8 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr } @media (hover:hover) and (pointer:fine) { - .c11.RcIconButton-contained:hover { - background-color: rgba(102,102,102,0.92); + .c11.RcIconButton-contained:hover:before { + background-color: rgba(255,255,255,0.08); } .c11.RcIconButton-contained:hover, @@ -1303,7 +1343,7 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
diff --git a/packages/juno-core/src/components/Tabs/Tabs/__stories__/__snapshots__/Tabs.story.tsx.snap b/packages/juno-core/src/components/Tabs/Tabs/__stories__/__snapshots__/Tabs.story.tsx.snap index 2c331f45..22def159 100644 --- a/packages/juno-core/src/components/Tabs/Tabs/__stories__/__snapshots__/Tabs.story.tsx.snap +++ b/packages/juno-core/src/components/Tabs/Tabs/__stories__/__snapshots__/Tabs.story.tsx.snap @@ -289,7 +289,7 @@ exports[`Storyshots 🚀 Cleanup Components/Tabs/Tabs Tabs 1`] = ` @@ -1116,7 +1116,7 @@ Array [