Merge pull request #342 from uyupun/fix/305_text-link

テキストリンクのデザイン修正
uyupun · Dec 29, 2023 · 7320454 · 7320454
2 parents 3471ce4 + a07d526
commit 7320454
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 38 deletions.
diff --git a/src/components/base/TextLink/index.stories.tsx b/src/components/base/TextLink/index.stories.tsx
@@ -14,16 +14,22 @@ type Story = StoryObj<typeof BaseTextLink>;
 export const TextLink: Story = {
   render: () => (
     <dl>
-      <dt>Default</dt>
+      <dt style={{ color: 'white' }}>Default</dt>
       <dd style={{ marginBottom: '16px' }}>
         <BaseTextLink href={pagesPath.$url()}>Default TextLink</BaseTextLink>
       </dd>
-      <dt>target=&quot;_blank&quot;</dt>
+      <dt style={{ color: 'white' }}>target=&quot;_blank&quot;</dt>
       <dd style={{ marginBottom: '16px' }}>
         <BaseTextLink href={pagesPath.$url()} target={'_blank'}>
           target=&quot;_blank&quot; TextLink
         </BaseTextLink>
       </dd>
+      <dt style={{ color: 'white' }}>size=&quot;lg&quot;</dt>
+      <dd style={{ marginBottom: '16px' }}>
+        <BaseTextLink href={pagesPath.$url()} size={'lg'}>
+          size=&quot;lg&quot; TextLink
+        </BaseTextLink>
+      </dd>
     </dl>
   ),
 };
diff --git a/src/components/base/TextLink/index.tsx b/src/components/base/TextLink/index.tsx
@@ -2,7 +2,7 @@ import NextLink, { type LinkProps } from 'next/link';
 
 import { getSafeLinkRel } from '@/utils/getSafeLinkRel';
 
-import { styles } from './styles.css';
+import { styles, type Size } from './styles.css';
 
 import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 
@@ -16,6 +16,10 @@ type BaseProps = {
    * <TextLink href={pagesPath.$url()}>link text</TextLink>
    */
   href: LinkProps['href'];
+  /**
+   * 文字のサイズ
+   */
+  size?: Size;
   /**
    * リンクのコンテンツ
    */
@@ -24,11 +28,11 @@ type BaseProps = {
 
 type Props = BaseProps & Omit<ComponentPropsWithoutRef<'a'>, keyof BaseProps>;
 
-const TextLink: FC<Props> = ({ href, children, rel, target, ...props }) => {
+const TextLink: FC<Props> = ({ href, size = 'md', children, rel, target, ...props }) => {
   return (
     <NextLink
       {...props}
-      className={styles.link}
+      className={styles({ size })}
       href={href}
       rel={getSafeLinkRel(rel, target)}
       target={target}

diff --git a/src/components/base/TextLink/styles.css.ts b/src/components/base/TextLink/styles.css.ts
@@ -1,25 +1,39 @@
 import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
 
 import { sprinkles } from '@/styles/sprinkles.css';
 
-const styles = {
-  link: style([
+type Size = 'md' | 'lg';
+
+const size: { [Key in Size]: string } = {
+  md: sprinkles({
+    fontSize: {
+      mobile: 14,
+      desktop: 16,
+    },
+  }),
+  lg: sprinkles({
+    fontSize: {
+      mobile: 24,
+      desktop: 36,
+    },
+  }),
+};
+
+const styles = recipe({
+  base: style([
     sprinkles({
       display: 'inline-block',
-      fontSize: {
-        mobile: 14,
-        desktop: 16,
+      lineHeight: 1,
+      color: 'white',
+      outlineWidth: {
+        focusVisible: 1,
       },
-      color: {
-        default: 'lightBlue',
-        visited: 'purple',
+      outlineStyle: {
+        focusVisible: 'solid',
       },
       outlineColor: {
-        focusVisible: 'lightBlue',
-      },
-      opacity: {
-        focusVisible: 0.8,
-        hover: 0.8,
+        focusVisible: 'white',
       },
       cursor: {
         default: 'pointer',
@@ -29,6 +43,9 @@ const styles = {
       textDecoration: 'underline',
     },
   ]),
-};
+  variants: {
+    size,
+  },
+});
 
-export { styles };
+export { styles, type Size };
diff --git a/src/components/common/ImageLink/styles.css.ts b/src/components/common/ImageLink/styles.css.ts
@@ -68,10 +68,7 @@ const styles = {
       fontSize: {
         mobile: 18,
       },
-      color: {
-        default: 'lightBlue',
-        visited: 'purple',
-      },
+      color: 'lightBlue',
       marginTop: {
         mobile: 1,
       },

diff --git a/src/styles/sprinkles.css.ts b/src/styles/sprinkles.css.ts
@@ -44,18 +44,6 @@ const responsiveProperties = defineProperties({
   },
 });
 
-const colorProperties = defineProperties({
-  conditions: {
-    default: {},
-    visited: { selector: '&:visited' },
-  },
-  defaultCondition: 'default',
-  properties: {
-    color: vars.colors,
-    backgroundColor: vars.colors,
-  },
-});
-
 const lineHeightProperties = defineProperties({
   properties: {
     lineHeight: vars.lineHeight,
@@ -72,8 +60,10 @@ const selectorProperties = defineProperties({
   },
   defaultCondition: 'default',
   properties: {
+    color: vars.colors,
+    backgroundColor: vars.colors,
     borderColor: vars.colors,
-    outlineWidth: [2],
+    outlineWidth: [1, 2],
     outlineStyle: ['solid'],
     outlineColor: vars.colors,
     outlineOffset: [-1],
@@ -91,7 +81,6 @@ const fontProperties = defineProperties({
 
 export const sprinkles = createSprinkles(
   responsiveProperties,
-  colorProperties,
   lineHeightProperties,
   fontProperties,
   selectorProperties