wip

src/frontend/apps/impress/cunningham.ts

@@ -67,6 +67,11 @@ const config = {
           alt: '',
         },
       },
+      global: {
+        hover: {
+          'greyscale-100': '#055fd214',
+        },
+      },
       components: {
         datagrid: {
           header: {

src/frontend/apps/impress/src/components/Box.tsx

@@ -15,7 +15,7 @@ export interface BoxProps {
   $align?: CSSProperties['alignItems'];
   $background?: CSSProperties['background'];
   $color?: CSSProperties['color'];
-  $css?: string;
+  $css?: string | RuleSet<object>;
   $direction?: CSSProperties['flexDirection'];
   $display?: CSSProperties['display'];
   $effect?: 'show' | 'hide';
@@ -38,7 +38,6 @@ export interface BoxProps {
   $width?: CSSProperties['width'];
   $wrap?: CSSProperties['flexWrap'];
   $zIndex?: CSSProperties['zIndex'];
-  $styledCss?: RuleSet<object>;
 }
 
 export type BoxType = ComponentPropsWithRef<typeof Box>;
@@ -46,7 +45,7 @@ export type BoxType = ComponentPropsWithRef<typeof Box>;
 export const Box = styled('div')<BoxProps>`
   display: flex;
   flex-direction: column;
-  ${({ $styledCss }) => $styledCss && $styledCss}
+
   ${({ $align }) => $align && `align-items: ${$align};`}
   ${({ $background }) => $background && `background: ${$background};`}
   ${({ $color }) => $color && `color: ${$color};`}
@@ -75,7 +74,7 @@ export const Box = styled('div')<BoxProps>`
   ${({ $transition }) => $transition && `transition: ${$transition};`}
   ${({ $width }) => $width && `width: ${$width};`}
   ${({ $wrap }) => $wrap && `flex-wrap: ${$wrap};`}
-  ${({ $css }) => $css && `${$css};`}
+  ${({ $css }) => $css && (typeof $css === 'string' ? `${$css};` : $css)}
   ${({ $zIndex }) => $zIndex && `z-index: ${$zIndex};`}
   ${({ $effect }) => {
     let effect;

src/frontend/apps/impress/src/features/docs/doc-management/components/items/SimpleDocItem.tsx

@@ -46,16 +46,11 @@ export const SimpleDocItem = ({ doc, isPinned = false, subText }: Props) => {
         {isPinned ? <PinnedDocumentIcon /> : <SimpleFileIcon />}
       </Box>
       <div>
-        <Text
-          $weight={500}
-          $variation="1000"
-          $size="sm"
-          $styledCss={ItemTextCss}
-        >
+        <Text $weight={500} $variation="1000" $size="sm" $css={ItemTextCss}>
           {doc.title}
         </Text>
 
-        <Text $variation="500" $size="xs" $styledCss={ItemTextCss}>
+        <Text $variation="500" $size="xs" $css={ItemTextCss}>
           {subText ??
             'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel ante libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed imperdiet neque quam, sed euismod metus mollis ut. '}
         </Text>

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridList.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
 
 import { Box, Card, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
@@ -47,14 +48,14 @@ export const DocsGridList = () => {
       <section>
         <Box
           as="header"
-          $css={`
+          $css={css`
             display: flex;
             flex-direction: row;
             margin-bottom: ${spacings['100W']};
             font-size: ${themeTokens().font?.sizes.xs};
             color: ${colors['greyscale-500']};
             padding-bottom: ${spacings['150V']} ${spacings['100W']};
-        `}
+          `}
         >
           <Box $flex={7}>{t('Name')}</Box>