@coldsurf/ocean-road 1.13.7 → 1.14.0

package/package.json

@@ -5,7 +5,7 @@
     "email": "imcoldsurf@gmail.com",
     "url": "https://coldsurf.io"
   },
-  "version": "1.13.7",
+  "version": "1.14.0",
   "bugs": {
     "url": "https://github.com/coldsurfers/ocean-road/issues"
   },

package/src/base/text/text.styled.ts

@@ -1,17 +1,51 @@
 import styled from '@emotion/styled';
+import { semantics, typography } from '../../tokens';
 
-export const StyledTextContainer = styled.span<{ numberOfLines?: number }>`
+type TextVariant = 'heading1' | 'heading2' | 'heading3' | 'body1' | 'body2' | 'caption' | 'label';
+
+type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+
+type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+
+export type StyledTextContainerProps = {
+  numberOfLines?: number;
+  variant?: TextVariant;
+  size?: TextSize;
+  weight?: TextWeight;
+};
+
+export const StyledTextContainer = styled.span<StyledTextContainerProps>`
   white-space: pre-wrap;
   line-height: 1.25;
 
+  ${({ variant }) =>
+    variant &&
+    `
+    font-size: ${semantics.typography[variant].fontSize};
+    font-weight: ${semantics.typography[variant].fontWeight};
+    line-height: ${semantics.typography[variant].lineHeight};
+  `}
+
+  ${({ size }) =>
+    size &&
+    `
+    font-size: ${typography.fontSize[size]};
+  `}
+
+  ${({ weight }) =>
+    weight &&
+    `
+    font-weight: ${typography.fontWeight[weight]};
+  `}
+
   ${({ numberOfLines }) =>
     numberOfLines &&
     `
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: ${numberOfLines};
-  -webkit-box-orient: vertical;
-  word-break: break-all;
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: ${numberOfLines};
+    -webkit-box-orient: vertical;
+    word-break: break-all;
   `}
 `;

package/src/base/text/text.tsx

@@ -5,7 +5,7 @@ import {
   type PropsWithChildren,
   forwardRef,
 } from 'react';
-import { StyledTextContainer } from './text.styled';
+import { StyledTextContainer, type StyledTextContainerProps } from './text.styled';
 
 type TextProps = PropsWithChildren<
   ComponentPropsWithRef<'span'> & {
@@ -13,16 +13,19 @@ type TextProps = PropsWithChildren<
     // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     as?: ElementType<any, keyof JSX.IntrinsicElements>;
     numberOfLines?: number;
-  }
+  } & Pick<StyledTextContainerProps, 'variant' | 'size' | 'weight'>
 >;
 
 export const Text = forwardRef<HTMLSpanElement, TextProps>(
-  ({ children, style, as, numberOfLines, ...otherProps }, ref) => {
+  ({ children, style, as, numberOfLines, variant, size, weight, ...otherProps }, ref) => {
     return (
       <StyledTextContainer
         ref={ref}
         as={as}
         numberOfLines={numberOfLines}
+        variant={variant}
+        size={size}
+        weight={weight}
         style={{
           ...style,
         }}