diff --git a/src/common/components/Toast.tsx b/src/common/components/Toast.tsx index 1fa1d8b8..5d04232f 100644 --- a/src/common/components/Toast.tsx +++ b/src/common/components/Toast.tsx @@ -257,24 +257,22 @@ function ToastPrefix({ variety }: Pick) { ToastPrefix.displayName = 'ToastPrefix'; export function ToastGlobalStyles() { - return ( - - ); + return ; } ToastGlobalStyles.displayName = 'ToastGlobalStyles'; + +const toastGlobalStyles = css` + [data-sonner-toaster] { + z-index: 0; + } + + [data-sonner-toast] { + border-radius: ${cssVar('border-radius-400')}; + + &:focus-visible { + outline: ${cssVar('color-focus-default')} solid ${cssVar('focus-border-width-default')}; + outline-offset: ${cssVar('focus-border-offset-default')}; + box-shadow: none; + } + } +`; diff --git a/src/components/links/LinkBaseStyled.tsx b/src/components/links/LinkBaseStyled.tsx index 8439c79d..55e8ca2e 100644 --- a/src/components/links/LinkBaseStyled.tsx +++ b/src/components/links/LinkBaseStyled.tsx @@ -18,7 +18,6 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { LinkBase } from './LinkBase'; import { LinkHighlight } from './LinkTypes'; @@ -26,19 +25,19 @@ import { LinkHighlight } from './LinkTypes'; import { cssVar } from '~utils/design-tokens'; const LinkBaseStyledHighlight = { - [LinkHighlight.Accent]: css` + [LinkHighlight.Accent]: ` --color: ${cssVar('color-text-accent')}; --hover: ${cssVar('color-text-link-hover')}; `, - [LinkHighlight.Default]: css` + [LinkHighlight.Default]: ` --color: ${cssVar('color-text-default')}; --hover: ${cssVar('color-text-link-hover')}; `, - [LinkHighlight.Subtle]: css` + [LinkHighlight.Subtle]: ` --color: ${cssVar('color-text-subtle')}; --hover: ${cssVar('color-text-link-hover')}; `, - [LinkHighlight.CurrentColor]: css` + [LinkHighlight.CurrentColor]: ` --color: 'currentColor'; --hover: ${cssVar('color-text-link-hover')}; `, diff --git a/src/components/links/LinkStandalone.tsx b/src/components/links/LinkStandalone.tsx index 14f02d3e..0483511b 100644 --- a/src/components/links/LinkStandalone.tsx +++ b/src/components/links/LinkStandalone.tsx @@ -18,13 +18,13 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { forwardRef } from 'react'; import { LinkBaseStyled } from './LinkBaseStyled'; import { LinkStandaloneProps } from './LinkTypes'; import { cssVar } from '~utils/design-tokens'; +import { IconCustomWrapper, IconMaterialWrapper } from '../icons/IconWrapper'; const LinkStandaloneBase = forwardRef((props, ref) => { const { children, iconLeft, isDiscreet, ...linkProps } = props; @@ -41,11 +41,7 @@ const LinkStandaloneBase = forwardRef((p LinkStandaloneBase.displayName = 'LinkStandaloneBase'; export const LinkStandalone = styled(LinkStandaloneBase)` - ${({ isDiscreet }) => - isDiscreet && - css` - font-weight: ${cssVar('font-weight-regular')}; - `} + ${({ isDiscreet }) => isDiscreet && `font-weight: ${cssVar('font-weight-regular')};`} text-decoration-line: ${cssVar('text-decoration-none')}; @@ -62,9 +58,11 @@ export const LinkStandalone = styled(LinkStandaloneBase)` ${({ iconLeft }) => iconLeft && - css` + ` & > svg, - & > img { + & > img, + & > ${IconMaterialWrapper}, + & > ${IconCustomWrapper} { margin-right: ${cssVar('dimension-space-50')}; } `}; diff --git a/src/components/select/SelectCommons.tsx b/src/components/select/SelectCommons.tsx index 750edd5a..b284efe2 100644 --- a/src/components/select/SelectCommons.tsx +++ b/src/components/select/SelectCommons.tsx @@ -385,71 +385,69 @@ export const SelectStyled = styled(MantineSelect)` * Instead, these styles are added as Global emotion styles in the EchoesProvider. */ export function SelectGlobalStyles() { - return ( - ; +} - overflow: hidden; +const selectGlobalStyles = css` + // Dropdown element - wrapper around the select items + .echoes-select-dropdown, + .echoes-select-dropdown-auto-width { + position: absolute; - background-color: ${cssVar('color-surface-default')}; - border: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')}; - border-radius: ${cssVar('border-radius-400')}; + overflow: hidden; - box-shadow: ${cssVar('box-shadow-medium')}; + background-color: ${cssVar('color-surface-default')}; + border: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')}; + border-radius: ${cssVar('border-radius-400')}; - & .echoes-select-options-wrapper { - max-height: 250px; - overflow-y: auto; + box-shadow: ${cssVar('box-shadow-medium')}; - padding: ${cssVar('dimension-space-100')} ${cssVar('dimension-space-0')}; - } - } + & .echoes-select-options-wrapper { + max-height: 250px; + overflow-y: auto; - .echoes-select-dropdown-auto-width { - width: auto !important; // We need to override the element width set by Mantine - } + padding: ${cssVar('dimension-space-100')} ${cssVar('dimension-space-0')}; + } + } - // Inside the dropdown - Group wrapper, contains a group label and all the items of a group - .echoes-select-group { - display: flex; - flex-direction: column; - padding: ${cssVar('dimension-space-0')}; - } + .echoes-select-dropdown-auto-width { + width: auto !important; // We need to override the element width set by Mantine + } + + // Inside the dropdown - Group wrapper, contains a group label and all the items of a group + .echoes-select-group { + display: flex; + flex-direction: column; + padding: ${cssVar('dimension-space-0')}; + } - // Inside the dropdown - Group header label - .echoes-select-group-label { - padding: ${cssVar('dimension-space-50')} ${cssVar('dimension-space-200')} - ${cssVar('dimension-space-100')}; + // Inside the dropdown - Group header label + .echoes-select-group-label { + padding: ${`${cssVar('dimension-space-50')} ${cssVar('dimension-space-200')} + ${cssVar('dimension-space-100')}`}; - font: ${cssVar('typography-text-small-semi-bold')}; - color: ${cssVar('color-text-default')}; - } + font: ${cssVar('typography-text-small-semi-bold')}; + color: ${cssVar('color-text-default')}; + } - // Inside the dropdown - Adds a divider between two groups - .echoes-select-group + .echoes-select-group::before { - content: ''; + // Inside the dropdown - Adds a divider between two groups + .echoes-select-group + .echoes-select-group::before { + content: ''; - flex: 1; - padding: ${cssVar('dimension-space-25')} ${cssVar('dimension-space-0')}; + flex: 1; + padding: ${cssVar('dimension-space-25')} ${cssVar('dimension-space-0')}; - border-top: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')}; - } + border-top: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')}; + } - .echoes-select-empty { - font: ${cssVar('typography-text-small-medium')}; - color: ${cssVar('color-text-subtle')}; - text-align: center; + .echoes-select-empty { + font: ${cssVar('typography-text-small-medium')}; + color: ${cssVar('color-text-subtle')}; + text-align: center; - padding: ${cssVar('dimension-space-50')} ${cssVar('dimension-space-0')}; - } - `} - /> - ); -} + padding: ${cssVar('dimension-space-50')} ${cssVar('dimension-space-0')}; + } +`; interface SelectRightSectionProps extends Pick { hasValue: boolean; diff --git a/src/components/typography/TypographyGlobalStyles.tsx b/src/components/typography/TypographyGlobalStyles.tsx index 76363251..cd4a52f6 100644 --- a/src/components/typography/TypographyGlobalStyles.tsx +++ b/src/components/typography/TypographyGlobalStyles.tsx @@ -23,23 +23,21 @@ import { css, Global } from '@emotion/react'; import { cssVar } from '~utils/design-tokens'; export function TypographyGlobalStyles() { - return ( - - ); + return ; } TypographyGlobalStyles.displayName = 'TypographyGlobalStyles'; + +const typographyGlobalStyles = css` + body { + font: ${cssVar('typography-text-default-regular')}; + color: ${cssVar('color-text-default')}; + } + + pre, + code, + kbd, + samp, + tt { + font: ${cssVar('typography-code-default')}; + } +`; diff --git a/stories/link/LinkStandalone-stories.tsx b/stories/link/LinkStandalone-stories.tsx index c182c04a..3221546d 100644 --- a/stories/link/LinkStandalone-stories.tsx +++ b/stories/link/LinkStandalone-stories.tsx @@ -80,11 +80,7 @@ export const LinkStandaloneWithIcon: Story = { ...defaultArgs, children: 'Standalone Link With Icon', highlight: LinkHighlight.Default, - iconLeft: ( - - - - ), + iconLeft: , }, };