@remember-web/primitive 0.2.6 → 0.2.8

package/src/Floating/DropdownMenu/styles.tsx

@@ -6,7 +6,7 @@ import {
   getTypographyStyles,
 } from '@remember-web/mixin';
 import type { ConvertTransientProps } from '@remember-web/shared';
-import styled, { css, CSSProperties } from 'styled-components';
+import styled, { css, type CSSProperties } from 'styled-components';
 
 import { StyledPopoverContent } from '../Popover/styles';
 
@@ -15,7 +15,7 @@ export const dropdownMenuItemCSS = css`
   align-items: center;
   padding: 8px 12px;
 
-  ${getTypographyStyles('Body1')};
+  ${getTypographyStyles('UIBody2')};
   color: ${contents000};
   transition: background-color 0.07s;
   border-radius: unset;
@@ -35,7 +35,7 @@ export const DropdownMenuItemDisabledCSS = css`
 
 export const StyledDropdownMenuSectionTitle = styled.span`
   ${dropdownMenuItemCSS};
-  ${getTypographyStyles('Body2_M')};
+  ${getTypographyStyles('Caption1')};
   color: ${contents200};
 `;
 
@@ -58,6 +58,10 @@ export const getDropdownMenuItemCss = ({
     css`
       font-weight: ${$active ? 600 : 400};
 
+      &:hover{
+        font-weight: 600;
+      }
+
       &:focus-visible {
         outline: none;
       }
@@ -73,12 +77,13 @@ export const StyledDropdownMenuItem = styled.div.attrs<DropdownMenuItemProps>(
   })
 )<StyledDropdownMenuItemProps>(getDropdownMenuItemCss);
 
-
-export const StyledDropdownMenuContentWrapper = styled.div<{$zIndex?: CSSProperties['zIndex']}>`
+export const StyledDropdownMenuContentWrapper = styled.div<{
+  $zIndex?: CSSProperties['zIndex'];
+}>`
   [data-radix-popper-content-wrapper]{
-    ${({$zIndex}) => $zIndex && css` z-index: ${$zIndex} !important; `}
+    ${({ $zIndex }) => $zIndex && css` z-index: ${$zIndex} !important; `}
   }
-`
+`;
 
 export const StyledDropdownMenuSection = styled.div``;
 

package/src/Floating/Tooltip/styles.ts

@@ -9,8 +9,8 @@ import {
 } from '@remember-web/mixin';
 import styled, { css, keyframes } from 'styled-components';
 
+import type { CSSProperties } from 'react';
 import type { TooltipSize, TooltipTextAlign } from './types';
-import { CSSProperties } from 'react';
 
 const TOOLTIP_CONTENT_CONSTANTS: Record<
   TooltipSize,
@@ -18,11 +18,11 @@ const TOOLTIP_CONTENT_CONSTANTS: Record<
 > = {
   large: {
     padding: '8px 12px',
-    typography: 'Body1',
+    typography: 'UIBody2',
   },
   small: {
     padding: '4px 8px',
-    typography: 'Body2',
+    typography: 'UIBody3',
   },
 };
 
@@ -43,11 +43,13 @@ export const TooltipTriggerWrapper = styled.div`
   }
 `;
 
-export const TooltipContentWrapper = styled.div<{$zIndex?: CSSProperties['zIndex']}>`
+export const TooltipContentWrapper = styled.div<{
+  $zIndex?: CSSProperties['zIndex'];
+}>`
   [data-radix-popper-content-wrapper]{
-    ${({$zIndex}) => $zIndex && css` z-index: ${$zIndex} !important; `}
+    ${({ $zIndex }) => $zIndex && css` z-index: ${$zIndex} !important; `}
   }
-`
+`;
 
 export const TooltipContent = styled(RadixTooltip.Content)<{
   $size: TooltipSize;
@@ -65,13 +67,7 @@ export const TooltipContent = styled(RadixTooltip.Content)<{
   will-change: opacity;
   animation: ${fadeIn} 200ms forwards;
   gap: 4px;
-  ${({
-    $size,
-    $maxWidth,
-    $backgroundColor,
-    $contentColor,
-    $textAlign,
-  }) => [
+  ${({ $size, $maxWidth, $backgroundColor, $contentColor, $textAlign }) => [
     css`
       padding: ${TOOLTIP_CONTENT_CONSTANTS[$size].padding};
       ${getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography)};

package/src/Inputs/Select/NativeSelect/styles.ts

@@ -16,7 +16,7 @@ export const StyledSelect = styled.select<{
 }>`
   all: unset;
 
-  ${getTypographyStyles('Body1_M')}
+  ${getTypographyStyles('UIBody2')}
   border: 1px solid ${contents300};
   border-radius: 4px;
   padding: 10px 36px 10px 12px;

package/src/Inputs/Select/styles.ts

@@ -11,7 +11,7 @@ import {
 import styled from 'styled-components';
 
 export const SelectContainer = styled.div<{ $width?: number | string }>`
-  ${getTypographyStyles('Body1_M')}
+  ${getTypographyStyles('UIBody2')}
   color: ${contents000};
   width: ${({ $width }) => {
     if (!$width) {
@@ -39,7 +39,7 @@ export const SelectContainer = styled.div<{ $width?: number | string }>`
 `;
 
 export const SelectLabel = styled.label`
-  ${getTypographyStyles('Headline4_B')}
+  ${getTypographyStyles('SubTitle1')}
   display: block;
   margin-bottom: 12px;
   display: flex;

package/src/Inputs/TextInput/styles.ts

@@ -62,7 +62,7 @@ export const InputDecorator = styled.div`
 `;
 
 export const InputInner = styled.input`
-  ${getTypographyStyles('Body1_M')}
+  ${getTypographyStyles('UIBody2')}
   color: ${contents000};
 
   display: block;
@@ -86,7 +86,7 @@ export const InputInner = styled.input`
 `;
 
 export const InputLabel = styled.label`
-  ${getTypographyStyles('Headline4_B')}
+  ${getTypographyStyles('SubTitle1')}
   display: block;
   margin-bottom: 12px;
   display: flex;
@@ -100,14 +100,14 @@ export const InputLabel = styled.label`
 `;
 
 export const InputError = styled.div`
-  ${getTypographyStyles('Body2_M')}
+  ${getTypographyStyles('Caption1')}
   color: ${roleRed};
 
   margin-top: 8px;
 `;
 
 export const InputHintText = styled.span<{ textColor?: ColorVariable }>`
-  ${getTypographyStyles('Body1_M')}
+  ${getTypographyStyles('UIBody2')}
   color: ${({ textColor }) => textColor};
   white-space: nowrap;
 `;

package/src/Logos/RememberServiceLogo/index.tsx

@@ -1,6 +1,6 @@
 import type { GetStyledComponentProps } from '@remember-web/shared';
 
-import { Divider } from '@/Common';
+import { Divider, Flex, Typography } from '@/Common';
 import type { RememberLogoProps } from '@/Logos/types';
 
 import { RememberLogo } from '../RememberLogo';
@@ -22,10 +22,12 @@ export const RememberServiceLogo = <As,>({
   <StyledServiceLogoRoot $color={color} {...props}>
     <RememberLogo color={color} />
     {label && (
-      <>
+      <Flex gap={8}>
         <Divider decorative orientation="vertical" style={{ height: '15px' }} />
-        <b>{label}</b>
-      </>
+        <Typography variant="SubTitle1" style={{ lineHeight: 1 }}>
+          {label}
+        </Typography>
+      </Flex>
     )}
   </StyledServiceLogoRoot>
 );

package/src/Logos/RememberServiceLogo/style.ts

@@ -7,12 +7,6 @@ export const StyledServiceLogoRoot = styled.a<{ $color?: string }>`
   color: ${({ $color = contents000 }) => $color};
 
   display: flex;
-  align-items: end;
+  align-items: flex-end;
   gap: 8px;
-
-  > b {
-    ${getTypographyStyles('Title2')};
-    text-decoration: none;
-    line-height: 16px;
-  }
 `;

package/src/Modals/Dialog/styles.ts

@@ -66,7 +66,7 @@ export const IconButton = styled.button`
 `;
 
 export const DialogTitle = styled(DialogPrimitive.Title)`
-  ${getTypographyStyles('Headline4_B')}
+  ${getTypographyStyles('SubTitle1')}
 
   color: ${contents000};
   margin: 0;
@@ -75,7 +75,7 @@ export const DialogTitle = styled(DialogPrimitive.Title)`
 `;
 
 export const DialogDescription = styled(DialogPrimitive.Description)`
-  ${getTypographyStyles('Body1_M')}
+  ${getTypographyStyles('UIBody3')}
 
   color: ${contents100};
   margin: 4px 0 24px;

package/src/Paginations/styles.ts

@@ -30,7 +30,7 @@ export const PaginationContainer = styled.nav`
 export const CompactPaginationContainer = styled.div`
   all: unset;
 
-  ${getTypographyStyles('Body1_M')}
+  ${getTypographyStyles('UIBody3')}
   gap: 16px;
   display: flex;
   align-items: center;
@@ -39,7 +39,7 @@ export const CompactPaginationContainer = styled.div`
 `;
 
 export const CurrentPage = styled.span`
-  ${getTypographyStyles('Body1_B')}
+  ${getTypographyStyles('SubTitle2')}
 `;
 
 export const Pages = styled.ul`
@@ -55,7 +55,7 @@ const DefaultButton = styled.button.attrs({ type: 'button' })`
   appearance: none;
   box-sizing: border-box;
 
-  ${getTypographyStyles('Body1_M')}
+  ${getTypographyStyles('UIBody3')}
   display: grid;
   place-items: center;