@bitrise/bitkit 12.101.0 → 12.101.1-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.101.0",
+  "version": "12.101.1-alpha.1",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -35,6 +35,8 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@floating-ui/react-dom-interactions": "^0.8.1",
+    "@fontsource/figtree": "^5.0.18",
+    "@fontsource/source-code-pro": "^5.0.16",
     "framer-motion": "^11.0.3",
     "luxon": "^3.4.4",
     "react": "^18.2.0",
@@ -55,15 +57,15 @@
     "@bitrise/eslint-plugin": "^2.5.0",
     "@chakra-ui/cli": "^2.4.1",
     "@google-cloud/storage": "^7.7.0",
-    "@storybook/addon-actions": "^7.6.12",
-    "@storybook/addon-essentials": "^7.6.12",
-    "@storybook/addon-interactions": "^7.6.12",
-    "@storybook/addon-links": "^7.6.12",
-    "@storybook/addons": "^7.6.12",
-    "@storybook/blocks": "^7.6.12",
-    "@storybook/react": "^7.6.12",
-    "@storybook/react-webpack5": "^7.6.12",
-    "@storybook/theming": "^7.6.12",
+    "@storybook/addon-actions": "^7.6.13",
+    "@storybook/addon-essentials": "^7.6.13",
+    "@storybook/addon-interactions": "^7.6.13",
+    "@storybook/addon-links": "^7.6.13",
+    "@storybook/addons": "^7.6.13",
+    "@storybook/blocks": "^7.6.13",
+    "@storybook/react": "^7.6.13",
+    "@storybook/react-webpack5": "^7.6.13",
+    "@storybook/theming": "^7.6.13",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
@@ -91,7 +93,7 @@
     "prettier": "^3.2.5",
     "react-hook-form": "^7.50.1",
     "release-it": "^17.0.3",
-    "storybook": "^7.6.12",
+    "storybook": "^7.6.13",
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3"
   },

package/src/Components/Badge/Badge.theme.ts

@@ -1,14 +1,12 @@
+import { getTextToken } from '../../tokens/textTokens';
+
 const BadgeTheme = {
   baseStyle: {
     borderRadius: '4',
     display: 'inline-block',
-    fontSize: '1',
-    fontWeight: 'bold',
-    lineHeight: '11px',
-    paddingBottom: '5px',
-    paddingTop: '6px',
     paddingX: '8',
-    textTransform: 'uppercase',
+    paddingY: '4',
+    ...getTextToken('comp.badge.sm'),
   },
 };
 

package/src/Components/ColorButton/ColorButton.theme.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from '../../tokens/tokens';
+import { ColorScheme } from '../../types/colors';
 
 const schemeColors: Record<ColorScheme, any> = {
   blue: {

package/src/Components/ColorButton/ColorButton.tsx

@@ -1,5 +1,5 @@
 import { Button as ChakraButton, ButtonProps as ChakraButtonProps, forwardRef, useStyleConfig } from '@chakra-ui/react';
-import { ColorScheme } from '../../tokens/tokens';
+import { ColorScheme } from '../../types/colors';
 
 export interface ColorButtonProps extends ChakraButtonProps {
   as?: 'a' | 'button';

package/src/Components/Dialog/Dialog.tsx

@@ -10,6 +10,7 @@ import {
   useBreakpointValue,
   usePrefersReducedMotion,
 } from '@chakra-ui/react';
+import { getTextToken } from '../../tokens/textTokens';
 import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
 import Icon from '../Icon/Icon';
 import Text from '../Text/Text';
@@ -66,7 +67,7 @@ const Dialog: ComponentWithAs<'section', DialogProps> = ({
         {variant !== 'empty' && (
           <>
             <ModalHeader marginRight="48">
-              <Text as="h1" id={headerId} size="5">
+              <Text as="h1" id={headerId} {...getTextToken('comp.dialog.title')}>
                 {title}
               </Text>
             </ModalHeader>

package/src/Components/Filter/Filter.theme.ts

@@ -74,7 +74,7 @@ const FilterTheme = defineMultiStyleConfig({
     },
     formTitle: {
       color: 'purpe.10',
-      fontWeight: 'demiBold',
+      fontWeight: 'semibold',
     },
     icon: {
       color: 'neutral.60',

package/src/Components/Form/Form.theme.ts

@@ -1,13 +1,13 @@
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import { getTextToken } from '../../tokens/textTokens';
 
 const FormTheme = {
   Form: {
     baseStyle: {
       helperText: {
         color: 'neutral.50',
-        fontSize: '2',
-        lineHeight: '1.25rem',
         marginTop: '4',
+        ...getTextToken('comp.input.helperText'),
       },
     } as ComponentStyleConfig,
   },
@@ -15,9 +15,8 @@ const FormTheme = {
     baseStyle: {
       text: {
         color: 'red.50',
-        fontSize: '2',
-        lineHeight: '1.25rem',
         marginTop: '4',
+        ...getTextToken('comp.input.helperText'),
       },
     } as ComponentStyleConfig,
   },
@@ -27,8 +26,7 @@ const FormTheme = {
         color: 'neutral.80',
       },
       color: 'purple.10',
-      fontSize: '2',
-      fontWeight: 'bold',
+      ...getTextToken('comp.input.label'),
     } as ComponentStyleConfig,
   },
 };

package/src/Components/Form/Input/Input.tsx

@@ -14,11 +14,11 @@ import {
   InputRightElement,
   SystemStyleObject,
 } from '@chakra-ui/react';
-import { TypeColors } from '../../../tokens/tokens';
 import Icon, { TypeIconName } from '../../Icon/Icon';
 import Text from '../../Text/Text';
 import Box from '../../Box/Box';
 import Tooltip, { TooltipProps } from '../../Tooltip/Tooltip';
+import { TypeColors } from '../../../types/colors';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
 type UsedChakraInputProps = Pick<

package/src/Components/Link/Link.theme.ts

@@ -1,4 +1,4 @@
-import { textSizes } from '../../Foundations/Typography/Typography';
+import TextTheme from '../Text/Text.theme';
 
 const schemeColors = {
   default: { color: 'inherit', hover: 'inherit' },
@@ -21,7 +21,7 @@ const LinkTheme = {
       fontSize: 'inherit',
     };
   },
-  ...textSizes,
+  ...TextTheme,
 };
 
 export default LinkTheme;

package/src/Components/Link/Link.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, Link as ChakraLink, LinkProps as ChakraLinkProps } from '@chakra-ui/react';
-import { TextSizes } from '../../Foundations/Typography/Typography';
+import { TextSizes } from '../../types/typography';
 
 export interface LinkProps extends ChakraLinkProps {
   as?: 'a' | 'button';

package/src/Components/Menu/MenuItem.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, MenuItem as ChakraMenuItem, MenuItemProps as ChakraMenuItemProps } from '@chakra-ui/react';
-import { TypeColors } from '../../tokens/tokens';
+import { TypeColors } from '../../types/colors';
 import Box from '../Box/Box';
 import Icon, { TypeIconName } from '../Icon/Icon';
 

package/src/Components/Notification/Notification.tsx

@@ -1,7 +1,7 @@
 import { cloneElement, createContext, ReactElement, useContext, useMemo } from 'react';
 import { Alert as ChakraAlert, AlertProps, forwardRef } from '@chakra-ui/react';
 
-import { ColorScheme } from '../../tokens/tokens';
+import { ColorScheme } from '../../types/colors';
 import Box from '../Box/Box';
 import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';

package/src/Components/Ribbon/Ribbon.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext, useMemo } from 'react';
 import { Alert as ChakraAlert, AlertProps, forwardRef } from '@chakra-ui/react';
 
-import { ColorScheme } from '../../tokens/tokens';
+import { ColorScheme } from '../../types/colors';
 import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';
 import Box from '../Box/Box';

package/src/Components/SegmentedControl/SegmentedControl.theme.ts

@@ -50,7 +50,7 @@ const SegmentedControlTheme = itemHelpers.defineMultiStyleConfig({
       cursor: 'pointer',
       flexGrow: 1,
       fontSize: '3',
-      fontWeight: 'demiBold',
+      fontWeight: 'semibold',
       lineHeight: '2.375rem',
       paddingX: '0.375rem',
       textAlign: 'center',

package/src/Components/Sidebar/SidebarItem.theme.ts

@@ -55,7 +55,7 @@ const SidebarItemTheme = itemHelpers.defineMultiStyleConfig({
           bg: 'purple.93',
         },
         bg: 'purple.95',
-        fontWeight: 'demiBold',
+        fontWeight: 'semibold',
       },
     },
   },

package/src/Components/Tabs/ContainedTab.tsx

@@ -1,8 +1,9 @@
 import { Button, forwardRef, TabProps as ChakraTabProps, useTab, useTabsStyles } from '@chakra-ui/react';
-import { TypeColors } from '../../tokens/tokens';
+import { TypeColors } from '../../types/colors';
 import Box from '../Box/Box';
 import Icon, { TypeIconName } from '../Icon/Icon';
 import Text from '../Text/Text';
+import { getTextToken } from '../../tokens/textTokens';
 
 export interface ContainedTabProps extends ChakraTabProps {
   id: string;
@@ -19,14 +20,14 @@ const ContainedTab = forwardRef<ContainedTabProps, 'button'>((props, ref) => {
   return (
     <Button __css={styles.containedTab} {...tabProps}>
       <Box display="flex" gap="16" justifyContent="space-between">
-        <Text as="span" fontWeight="bold" hasEllipsis>
+        <Text as="span" hasEllipsis {...getTextToken('comp.tabs.contained')}>
           {tabProps.children}
         </Text>
         {isWarning && <Icon name="WarningColored" />}
         {!isWarning && iconName && <Icon color={iconColor} name={iconName} />}
       </Box>
       {secondaryText && (
-        <Text as="span" display="block" hasEllipsis size="2">
+        <Text as="span" display="block" hasEllipsis {...getTextToken('comp.tabs.contained-secondary')}>
           {secondaryText}
         </Text>
       )}

package/src/Components/Tabs/Tabs.theme.ts

@@ -1,4 +1,5 @@
 import { defineStyle, defineStyleConfig, SystemStyleObject } from '@chakra-ui/styled-system';
+import { getTextToken } from '../../tokens/textTokens';
 
 const baseStyle = defineStyle(
   ({ variant }): SystemStyleObject => ({
@@ -75,14 +76,12 @@ const baseStyle = defineStyle(
       alignItems: 'center',
       color: 'neutral.50',
       display: 'flex',
-      fontSize: '3',
-      fontWeight: 'bold',
       gap: '8',
       justifyContent: 'flex-start',
-      lineHeight: '1.5rem',
       paddingX: '16',
       paddingY: '12',
       whiteSpace: 'nowrap',
+      ...getTextToken('comp.tabs.line'),
     },
     tablist: {
       borderBottom: variant === 'line' ? '1px solid' : undefined,

package/src/Components/Tag/Tag.theme.ts

@@ -1,5 +1,6 @@
 import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
 import { rem } from '../../utils/utils';
+import { getTextToken } from '../../tokens/textTokens';
 import { TagProps } from './Tag';
 
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers([
@@ -26,10 +27,7 @@ const sizes = {
         paddingRight: onClose ? rem(4) : rem(12),
         paddingY: leftIcon || onClose ? rem(4) : rem(6),
       },
-      label: {
-        fontSize: '2',
-        lineHeight: rem(20),
-      },
+      label: getTextToken('comp.tag.md'),
     };
   }),
   sm: definePartsStyle((props) => {
@@ -46,10 +44,7 @@ const sizes = {
         paddingRight: onClose ? rem(2) : rem(8),
         paddingY: onClose ? rem(2) : rem(4),
       },
-      label: {
-        fontSize: rem(12),
-        lineHeight: rem(16),
-      },
+      label: getTextToken('comp.tag.sm'),
     };
   }),
 };

package/src/Components/Tag/Tag.tsx

@@ -4,7 +4,7 @@ import Skeleton from '../Skeleton/Skeleton';
 import SkeletonBox from '../Skeleton/SkeletonBox';
 import Text from '../Text/Text';
 import Tooltip from '../Tooltip/Tooltip';
-import { TypeColors } from '../../tokens/tokens';
+import { TypeColors } from '../../types/colors';
 
 export interface TagProps extends Omit<ChakraTagProps, 'colorScheme' | 'size' | 'variant'> {
   closeButtonTooltip?: string;

package/src/Components/Text/Text.theme.ts

@@ -1,5 +1,48 @@
-import { textSizes } from '../../Foundations/Typography/Typography';
+import { StyleProps } from '@chakra-ui/styled-system';
+import { TextSizes } from '../../types/typography';
 
-const TextTheme = textSizes;
+const sizes: Record<TextSizes, StyleProps> = {
+  '1': {
+    fontSize: '0.6875rem',
+    lineHeight: '1rem',
+    textTransform: 'uppercase',
+  },
+  '2': {
+    fontSize: '0.875rem',
+    lineHeight: '1.25rem',
+  },
+  '3': {
+    fontSize: '1rem',
+    lineHeight: '1.5rem',
+  },
+  '4': {
+    fontSize: '1.1875rem',
+    lineHeight: '1.75rem',
+  },
+  '5': {
+    fontSize: '1.5rem',
+    fontWeight: 'bold',
+    lineHeight: '2.25rem',
+  },
+  '6': {
+    fontSize: '1.875rem',
+    fontWeight: 'bold',
+    lineHeight: '2.5rem',
+  },
+  '7': {
+    fontSize: '2.25rem',
+    fontWeight: 'bold',
+    lineHeight: '3rem',
+  },
+  '8': {
+    fontSize: '3rem',
+    fontWeight: 'bold',
+    lineHeight: '3.75rem',
+  },
+};
+
+const TextTheme = {
+  sizes,
+};
 
 export default TextTheme;

package/src/Components/Text/Text.tsx

@@ -1,30 +1,20 @@
 import { forwardRef, ResponsiveValue, Text as ChakraText, TextProps as ChakraTextProps } from '@chakra-ui/react';
-import { TextSizes } from '../../Foundations/Typography/Typography';
+import { getTextToken } from '../../tokens/textTokens';
+import { TextSizes, TokenStrings } from '../../types/typography';
 
 export interface TextProps extends ChakraTextProps {
-  /**
-   * Font weight
-   */
-  fontWeight?: ResponsiveValue<'bold' | 'demiBold' | 'normal'>;
   hasEllipsis?: boolean;
-  /**
-   * Size config (https://www.figma.com/file/grik9mTaJ5DfhydhWhXdP5/Bitkit-Foundations?node-id=211%3A12)
-   */
   size?: ResponsiveValue<TextSizes>;
+  token?: TokenStrings;
 }
 
 /**
  * `Text` component is the used to render text and paragraphs within an interface. It renders a `<p>` tag by default.
  */
 const Text = forwardRef<TextProps, 'p'>((props, ref) => {
-  const { fontWeight, hasEllipsis, size, textTransform, ...rest } = props;
-  const properties: ChakraTextProps = { fontWeight, size, textTransform, ...rest };
-  if (size === '1' && (!textTransform || textTransform === 'none')) {
-    properties.textTransform = 'uppercase';
-  }
-  if (!fontWeight && (size === '5' || size === '6' || size === '7' || size === '8')) {
-    properties.fontWeight = 'bold';
-  }
+  const { hasEllipsis, size, token, ...rest } = props;
+  const properties: ChakraTextProps = { size, ...rest };
+
   if (hasEllipsis) {
     if (!properties.maxWidth) {
       properties.maxWidth = '100%';
@@ -33,7 +23,7 @@ const Text = forwardRef<TextProps, 'p'>((props, ref) => {
     properties.whiteSpace = 'nowrap';
     properties.overflow = 'hidden';
   }
-  return <ChakraText {...properties} ref={ref} />;
+  return <ChakraText {...properties} {...getTextToken(token)} ref={ref} />;
 });
 
 Text.defaultProps = {

package/src/Components/components.theme.ts

@@ -0,0 +1,103 @@
+import Alert from '../Foundations/Themes/Alert.theme';
+import Accordion from './AccordionLegacy/Accordion.theme';
+import Avatar from './Avatar/Avatar.theme';
+import Badge from './Badge/Badge.theme';
+import Breadcrumb from './Breadcrumb/Breadcrumb.theme';
+import Button from './Button/Button.theme';
+import Card from './Card/Card.theme';
+import Checkbox from './Form/Checkbox/Checkbox.theme';
+import ColorButton from './ColorButton/ColorButton.theme';
+import Dialog from './Dialog/Dialog.theme';
+import Divider from './Divider/Divider.theme';
+import Drawer from './Drawer/Drawer.theme';
+import EmptyState from './EmptyState/EmptyState.theme';
+import Link from './Link/Link.theme';
+import List from './List/List.theme';
+import Menu from './Menu/Menu.theme';
+import Radio from './Form/Radio/Radio.theme';
+import Select from './Select/Select.theme';
+import Input from './Form/Input/Input.theme';
+import Dropdown from './Dropdown/Dropdown.theme';
+import Tabs from './Tabs/Tabs.theme';
+import Text from './Text/Text.theme';
+import Table from './Table/Table.theme';
+import Tooltip from './Tooltip/Tooltip.theme';
+import CloseButton from './CloseButton/CloseButton.theme';
+import Popover from './Popover/Popover.theme';
+import Toggle from './Toggle/Toggle.theme';
+import Textarea from './Form/Textarea/Textarea.theme';
+import Form from './Form/Form.theme';
+import DatePickerDay from './DatePicker/DatePickerDay.theme';
+import NumberInput from './NumberInput/NumberInput.theme';
+import Skeleton from './Skeleton/Skeleton.theme';
+import ProgressBar from './ProgressBar/ProgressBar.theme';
+import ProgressIndicator from './ProgressIndicator/ProgressIndicator.theme';
+import Slider from './Slider/Slider.theme';
+import Sidebar from './Sidebar/Sidebar.theme';
+import SidebarItem from './Sidebar/SidebarItem.theme';
+import SegmentedControl from './SegmentedControl/SegmentedControl.theme';
+import Tag from './Tag/Tag.theme';
+import Note from './Note/Note.theme';
+import CodeBlock from './CodeBlock/CodeBlock.theme';
+import CodeSnippet from './CodeSnippet/CodeSnippet.theme';
+import DefinitionTooltip from './DefinitionTooltip/DefinitionTooltip.theme';
+import ExpandableCard from './ExpandableCard/ExpandableCard.theme';
+import FileInput from './Form/FileInput/FileInput.theme';
+import Filter from './Filter/Filter.theme';
+import Toggletip from './Toggletip/Toggletip.theme';
+import FilterSwitch from './Filter/FilterSwitch/FilterSwitch.theme';
+import TagsInput from './Form/TagsInput/TagsInput.theme';
+
+const components = {
+  Accordion,
+  Avatar,
+  Badge,
+  Breadcrumb,
+  Button,
+  Card,
+  Checkbox,
+  ColorButton,
+  Divider,
+  Drawer,
+  Dropdown,
+  EmptyState,
+  FilterSwitch,
+  ...Form,
+  Alert,
+  CloseButton,
+  CodeBlock,
+  CodeSnippet,
+  DatePickerDay,
+  DefinitionTooltip,
+  ExpandableCard,
+  FileInput,
+  Filter,
+  Input,
+  Link,
+  List,
+  Menu,
+  Modal: Dialog,
+  Note,
+  NumberInput,
+  Popover,
+  Progress: ProgressBar,
+  ProgressIndicator,
+  Radio,
+  SegmentedControl,
+  Select,
+  Sidebar,
+  SidebarItem,
+  Skeleton,
+  Slider,
+  Switch: Toggle,
+  Table,
+  Tabs,
+  Tag,
+  TagsInput,
+  Text,
+  Textarea,
+  Toggletip,
+  Tooltip,
+};
+
+export default components;

package/src/Foundations/Colors/Colors.tsx

@@ -2,17 +2,43 @@
 import { Unstyled } from '@storybook/blocks';
 import Provider from '../../Components/Provider/Provider';
 import Divider from '../../Components/Divider/Divider';
-import CommonTokens from './CommonTokens';
-import SystemTokens from './SystemTokens';
+import { semanticTokens } from '../../tokens/semanticTokens';
+import Card from '../../Components/Card/Card';
+import TokenTable from '../docComponents/TokenTable';
+import DocTitle from '../docComponents/DocTitle';
 import Palette from './Palette';
 
+const commonColorKeys = ['background', 'border', 'icon', 'text'];
+const systemColorKeys = Object.keys(semanticTokens.colors.sys);
+
 const Colors = () => {
   return (
     <Unstyled>
       <Provider>
-        <CommonTokens />
+        <DocTitle>Common Tokens</DocTitle>
+        <Card boxShadow="medium" padding="24">
+          {commonColorKeys.map((groupName) => (
+            <TokenTable
+              key={groupName}
+              data={semanticTokens.colors[groupName]}
+              groupName={groupName}
+              marginBottom="24"
+            />
+          ))}
+        </Card>
         <Divider marginBottom="32" marginTop="48" size="1" />
-        <SystemTokens />
+        <DocTitle>System Tokens</DocTitle>
+        <Card boxShadow="medium" padding="24">
+          {systemColorKeys.map((groupName) => (
+            <TokenTable
+              key={groupName}
+              data={semanticTokens.colors.sys[groupName]}
+              groupName={groupName}
+              marginBottom="24"
+              tokenPrefix="sys."
+            />
+          ))}
+        </Card>
         <Divider marginBottom="32" marginTop="48" size="1" />
         <Palette />
       </Provider>

package/src/Foundations/Themes/Alert.theme.ts

@@ -1,4 +1,5 @@
-import { ColorScheme } from '../../tokens/tokens';
+import { ColorScheme } from '../../types/colors';
+import { getTextToken } from '../../tokens/textTokens';
 
 const AlertTheme = {
   baseStyle({ colorScheme }: { colorScheme: ColorScheme }) {
@@ -12,19 +13,16 @@ const AlertTheme = {
         borderWidth: '1px',
         color: `${colorScheme}.40`,
         display: 'flex',
-        fontSize: '3',
         gap: '8',
-        lineHeight: '1.5rem',
         padding: '12',
+        ...getTextToken('comp.notification.message'),
       },
       icon: {
         h: 24,
         marginEnd: 8,
         w: 24,
       },
-      title: {
-        fontWeight: 'bold',
-      },
+      title: getTextToken('comp.notification.title'),
     };
   },
   defaultProps: {

package/src/Foundations/Typography/Typography.tsx

@@ -0,0 +1,30 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Unstyled } from '@storybook/blocks';
+import Provider from '../../Components/Provider/Provider';
+import DocTitle from '../docComponents/DocTitle';
+import TokenTable from '../docComponents/TokenTable';
+import textTokens, { getTextToken } from '../../tokens/textTokens';
+import { TOKEN_STRINGS } from '../../types/typography';
+
+const bodyStyles = TOKEN_STRINGS.filter((token) => token.includes('body')).reduce(
+  (obj, current) => {
+    obj[current.replace('body.', '')] = getTextToken(current);
+    return obj;
+  },
+  {} as Record<string, Record<string, string>>,
+);
+
+const Typography = () => {
+  return (
+    <Unstyled>
+      <Provider>
+        <DocTitle>Text Tokens</DocTitle>
+        <TokenTable data={textTokens.heading} groupName="heading" marginBottom="24" type="text" />
+        <TokenTable data={bodyStyles} groupName="body" marginBottom="24" type="text" />
+        <TokenTable data={textTokens.code} groupName="code" type="text" />
+      </Provider>
+    </Unstyled>
+  );
+};
+
+export default Typography;

package/src/Foundations/docComponents/DocTitle.tsx

@@ -0,0 +1,11 @@
+import Text from '../../Components/Text/Text';
+
+const DocTitle = ({ children }: { children: string }) => {
+  return (
+    <Text as="h2" color="pal.purple.10" fontWeight="normal" marginBlockEnd="8" size="8">
+      {children}
+    </Text>
+  );
+};
+
+export default DocTitle;