@bitrise/bitkit 12.101.1-alpha.1 → 12.102.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.101.1-alpha.1",
+  "version": "12.102.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -35,8 +35,6 @@
     "@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",
@@ -57,15 +55,15 @@
     "@bitrise/eslint-plugin": "^2.5.0",
     "@chakra-ui/cli": "^2.4.1",
     "@google-cloud/storage": "^7.7.0",
-    "@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",
+    "@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",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
@@ -93,7 +91,7 @@
     "prettier": "^3.2.5",
     "react-hook-form": "^7.50.1",
     "release-it": "^17.0.3",
-    "storybook": "^7.6.13",
+    "storybook": "^7.6.12",
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3"
   },

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

@@ -1,12 +1,14 @@
-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',
-    paddingY: '4',
-    ...getTextToken('comp.badge.sm'),
+    textTransform: 'uppercase',
   },
 };
 

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

@@ -1,4 +1,4 @@
-import { ColorScheme } from '../../types/colors';
+import { ColorScheme } from '../../tokens/tokens';
 
 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 '../../types/colors';
+import { ColorScheme } from '../../tokens/tokens';
 
 export interface ColorButtonProps extends ChakraButtonProps {
   as?: 'a' | 'button';

package/src/Components/DatePicker/useDateRange.ts

@@ -23,6 +23,19 @@ export class DateRange {
     }
     return true;
   }
+
+  containsEqual(date: DateTime): boolean {
+    if (this.from && this.to) {
+      return this.to >= date && this.from <= date;
+    }
+    if (this.from && !this.to) {
+      return this.from <= date;
+    }
+    if (this.to && !this.from) {
+      return this.to >= date;
+    }
+    return true;
+  }
 }
 
 function useDateRange(range: [DateTime | undefined, DateTime | undefined]): DateRange;

package/src/Components/Dialog/Dialog.tsx

@@ -10,7 +10,6 @@ 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';
@@ -67,7 +66,7 @@ const Dialog: ComponentWithAs<'section', DialogProps> = ({
         {variant !== 'empty' && (
           <>
             <ModalHeader marginRight="48">
-              <Text as="h1" id={headerId} {...getTextToken('comp.dialog.title')}>
+              <Text as="h1" id={headerId} size="5">
                 {title}
               </Text>
             </ModalHeader>

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

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

package/src/Components/Form/DateInput/DateInput.tsx

@@ -2,25 +2,27 @@ import { useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import { forwardRef } from '@chakra-ui/react';
 import { IMask, useIMask } from 'react-imask';
 import { DateTime } from 'luxon';
-import { datePickerMaxYear, datePickerMinYear } from '../../DatePicker/DatePickerMonth';
-import DatePicker from '../../DatePicker/DatePicker';
+import DatePicker, { DateRange } from '../../DatePicker/DatePicker';
 import IconButton from '../../IconButton/IconButton';
 import Input, { InputProps } from '../Input/Input';
 
+export type DateInputError = 'outOfRange';
+
 export type DateInputProps = Omit<InputProps, 'value' | 'onChange' | 'placeholder'> & {
-  onCalendarClick?(): void;
-  value?: string;
   onChange?(value: string): void;
+  onError?(error: DateInputError, message: string): void;
+  value?: string;
+  selectable?: DateRange;
 };
 
+export const dateInputDateFormat = 'MM/dd/yyyy';
+
 const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
-  const { inputRef, onCalendarClick, onChange, value, ...rest } = props;
+  const { inputRef, onChange, onError, selectable, value, ...rest } = props;
   const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
   const [isEmpty, setIsEmpty] = useState(true);
 
-  const dateFormat = 'MM/dd/yyyy';
-
   const {
     ref: innerRef,
     setValue,
@@ -43,18 +45,22 @@ const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
         },
         yyyy: {
           autofix: false,
-          from: datePickerMinYear,
+          from: 0,
           mask: IMask.MaskedRange,
           placeholderChar: 'y',
-          to: datePickerMaxYear,
+          to: 9999,
         },
       },
-      format: (date: Date | null) => (date ? DateTime.fromJSDate(date).toFormat(dateFormat) : ''),
+      format: (date: Date | null) => (date ? DateTime.fromJSDate(date).toFormat(dateInputDateFormat) : ''),
       lazy: !isFocused && isEmpty,
       mask: Date,
       parse: (str: string) => {
         try {
-          return DateTime.fromFormat(str, dateFormat).toJSDate();
+          const parsedDate = DateTime.fromFormat(str, dateInputDateFormat);
+          if (selectable && !selectable.containsEqual(parsedDate)) {
+            onError?.('outOfRange', 'Date is not selectable.');
+          }
+          return parsedDate.toJSDate();
         } catch {
           return DateTime.now().toJSDate();
         }
@@ -75,7 +81,7 @@ const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
 
   const currentDate = useMemo(() => {
     try {
-      return DateTime.fromFormat(currentValue, dateFormat);
+      return DateTime.fromFormat(currentValue, dateInputDateFormat);
     } catch {
       return undefined;
     }
@@ -84,8 +90,9 @@ const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
   return (
     <DatePicker
       mode="day"
-      onApply={(day) => setValue(day?.toFormat(dateFormat) || '')}
+      onApply={(day) => setValue(day?.toFormat(dateInputDateFormat) || '')}
       onClose={() => setIsDatePickerVisible(false)}
+      selectable={selectable}
       selected={currentDate}
       variant="default"
       visible={isDatePickerVisible}
@@ -96,7 +103,7 @@ const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
         inputRef={innerRef}
         onBlur={() => setIsFocused(false)}
         onFocus={() => setIsFocused(true)}
-        placeholder={dateFormat.toLocaleLowerCase()}
+        placeholder={dateInputDateFormat.toLocaleLowerCase()}
         rightAddon={
           <IconButton
             _active={{ background: 'transparent' }}

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,8 +15,9 @@ const FormTheme = {
     baseStyle: {
       text: {
         color: 'red.50',
+        fontSize: '2',
+        lineHeight: '1.25rem',
         marginTop: '4',
-        ...getTextToken('comp.input.helperText'),
       },
     } as ComponentStyleConfig,
   },
@@ -26,7 +27,8 @@ const FormTheme = {
         color: 'neutral.80',
       },
       color: 'purple.10',
-      ...getTextToken('comp.input.label'),
+      fontSize: '2',
+      fontWeight: 'bold',
     } 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 TextTheme from '../Text/Text.theme';
+import { textSizes } from '../../Foundations/Typography/Typography';
 
 const schemeColors = {
   default: { color: 'inherit', hover: 'inherit' },
@@ -21,7 +21,7 @@ const LinkTheme = {
       fontSize: 'inherit',
     };
   },
-  ...TextTheme,
+  ...textSizes,
 };
 
 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 '../../types/typography';
+import { TextSizes } from '../../Foundations/Typography/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 '../../types/colors';
+import { TypeColors } from '../../tokens/tokens';
 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 '../../types/colors';
+import { ColorScheme } from '../../tokens/tokens';
 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 '../../types/colors';
+import { ColorScheme } from '../../tokens/tokens';
 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: 'semibold',
+      fontWeight: 'demiBold',
       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: 'semibold',
+        fontWeight: 'demiBold',
       },
     },
   },

package/src/Components/Tabs/ContainedTab.tsx

@@ -1,9 +1,8 @@
 import { Button, forwardRef, TabProps as ChakraTabProps, useTab, useTabsStyles } from '@chakra-ui/react';
-import { TypeColors } from '../../types/colors';
+import { TypeColors } from '../../tokens/tokens';
 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;
@@ -20,14 +19,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" hasEllipsis {...getTextToken('comp.tabs.contained')}>
+        <Text as="span" fontWeight="bold" hasEllipsis>
           {tabProps.children}
         </Text>
         {isWarning && <Icon name="WarningColored" />}
         {!isWarning && iconName && <Icon color={iconColor} name={iconName} />}
       </Box>
       {secondaryText && (
-        <Text as="span" display="block" hasEllipsis {...getTextToken('comp.tabs.contained-secondary')}>
+        <Text as="span" display="block" hasEllipsis size="2">
           {secondaryText}
         </Text>
       )}

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

@@ -1,5 +1,4 @@
 import { defineStyle, defineStyleConfig, SystemStyleObject } from '@chakra-ui/styled-system';
-import { getTextToken } from '../../tokens/textTokens';
 
 const baseStyle = defineStyle(
   ({ variant }): SystemStyleObject => ({
@@ -76,12 +75,14 @@ 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,6 +1,5 @@
 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([
@@ -27,7 +26,10 @@ const sizes = {
         paddingRight: onClose ? rem(4) : rem(12),
         paddingY: leftIcon || onClose ? rem(4) : rem(6),
       },
-      label: getTextToken('comp.tag.md'),
+      label: {
+        fontSize: '2',
+        lineHeight: rem(20),
+      },
     };
   }),
   sm: definePartsStyle((props) => {
@@ -44,7 +46,10 @@ const sizes = {
         paddingRight: onClose ? rem(2) : rem(8),
         paddingY: onClose ? rem(2) : rem(4),
       },
-      label: getTextToken('comp.tag.sm'),
+      label: {
+        fontSize: rem(12),
+        lineHeight: rem(16),
+      },
     };
   }),
 };

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 '../../types/colors';
+import { TypeColors } from '../../tokens/tokens';
 
 export interface TagProps extends Omit<ChakraTagProps, 'colorScheme' | 'size' | 'variant'> {
   closeButtonTooltip?: string;

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

@@ -1,48 +1,5 @@
-import { StyleProps } from '@chakra-ui/styled-system';
-import { TextSizes } from '../../types/typography';
+import { textSizes } from '../../Foundations/Typography/Typography';
 
-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,
-};
+const TextTheme = textSizes;
 
 export default TextTheme;

package/src/Components/Text/Text.tsx

@@ -1,20 +1,30 @@
 import { forwardRef, ResponsiveValue, Text as ChakraText, TextProps as ChakraTextProps } from '@chakra-ui/react';
-import { getTextToken } from '../../tokens/textTokens';
-import { TextSizes, TokenStrings } from '../../types/typography';
+import { TextSizes } from '../../Foundations/Typography/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 { hasEllipsis, size, token, ...rest } = props;
-  const properties: ChakraTextProps = { size, ...rest };
-
+  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';
+  }
   if (hasEllipsis) {
     if (!properties.maxWidth) {
       properties.maxWidth = '100%';
@@ -23,7 +33,7 @@ const Text = forwardRef<TextProps, 'p'>((props, ref) => {
     properties.whiteSpace = 'nowrap';
     properties.overflow = 'hidden';
   }
-  return <ChakraText {...properties} {...getTextToken(token)} ref={ref} />;
+  return <ChakraText {...properties} ref={ref} />;
 });
 
 Text.defaultProps = {

package/src/Foundations/Colors/Colors.tsx

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

package/src/Foundations/Colors/CommonTokens.tsx

@@ -0,0 +1,21 @@
+import { semanticTokens } from '../../tokens/tokens';
+import Card from '../../Components/Card/Card';
+import Text from '../../Components/Text/Text';
+import TokenTable from '../docComponents/TokenTable';
+
+const commonColorKeys = ['background', 'border', 'icon', 'text'];
+
+const CommonTokens = () => (
+  <>
+    <Text as="h2" color="pal.purple.10" fontWeight="normal" marginBlockEnd="8" size="8">
+      Common Tokens
+    </Text>
+    <Card boxShadow="medium" padding="24">
+      {commonColorKeys.map((groupName) => (
+        <TokenTable key={groupName} data={semanticTokens.colors[groupName]} groupName={groupName} marginBottom="24" />
+      ))}
+    </Card>
+  </>
+);
+
+export default CommonTokens;

package/src/Foundations/Colors/SystemTokens.tsx

@@ -0,0 +1,27 @@
+import { semanticTokens } from '../../tokens/tokens';
+import Card from '../../Components/Card/Card';
+import Text from '../../Components/Text/Text';
+import TokenTable from '../docComponents/TokenTable';
+
+const systemColorKeys = Object.keys(semanticTokens.colors.sys);
+
+const SystemTokens = () => (
+  <>
+    <Text as="h2" color="pal.purple.10" fontWeight="normal" marginBlockEnd="8" size="8">
+      System Tokens
+    </Text>
+    <Card boxShadow="medium" padding="24">
+      {systemColorKeys.map((groupName) => (
+        <TokenTable
+          key={groupName}
+          data={semanticTokens.colors.sys[groupName]}
+          groupName={groupName}
+          marginBottom="24"
+          tokenPrefix="sys."
+        />
+      ))}
+    </Card>
+  </>
+);
+
+export default SystemTokens;