feat: add Text component

.storybook/preview.tsx

@@ -36,6 +36,7 @@ const preview: Preview = {
         order: [
           'Components',
           [
+            'Text',
             'Button',
             'Icon Button',
             'Switch',

figma-kit/package.json

@@ -47,6 +47,7 @@
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",

figma-kit/src/components/text/index.ts

@@ -0,0 +1 @@
+export * from './text';

figma-kit/src/components/text/text.css

@@ -0,0 +1,119 @@
+.fp-Text {
+  margin: 0;
+  font-family: var(--font-family-default);
+  color: var(--figma-color-text);
+
+  &:where(.fp-size-1) {
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
+  }
+  &:where(.fp-size-2) {
+    font-size: var(--font-size-2);
+    line-height: var(--line-height-2);
+  }
+  &:where(.fp-size-3) {
+    font-size: var(--font-size-3);
+    line-height: var(--line-height-3);
+  }
+  &:where(.fp-size-4) {
+    font-size: var(--font-size-4);
+    line-height: var(--line-height-4);
+  }
+  &:where(.fp-size-5) {
+    font-size: var(--font-size-5);
+    line-height: var(--line-height-5);
+  }
+  &:where(.fp-size-6) {
+    font-size: var(--font-size-6);
+    line-height: var(--line-height-6);
+  }
+  &:where(.fp-size-7) {
+    font-size: var(--font-size-7);
+    line-height: var(--line-height-7);
+  }
+  &:where(.fp-size-8) {
+    font-size: var(--font-size-8);
+    line-height: var(--line-height-8);
+  }
+  &:where(.fp-size-9) {
+    font-size: var(--font-size-9);
+    line-height: var(--line-height-9);
+  }
+  &:where(.fp-size-10) {
+    font-size: var(--font-size-10);
+    line-height: var(--line-height-10);
+  }
+  &:where(.fp-size-11) {
+    font-size: var(--font-size-11);
+    line-height: var(--line-height-11);
+  }
+  &:where(.fp-size-12) {
+    font-size: var(--font-size-12);
+    line-height: var(--line-height-12);
+  }
+  &:where(.fp-size-13) {
+    font-size: var(--font-size-13);
+    line-height: var(--line-height-13);
+  }
+  &:where(.fp-size-14) {
+    font-size: var(--font-size-14);
+    line-height: var(--line-height-14);
+  }
+  &:where(.fp-size-15) {
+    font-size: var(--font-size-15);
+    line-height: var(--line-height-15);
+  }
+  &:where(.fp-size-16) {
+    font-size: var(--font-size-16);
+    line-height: var(--line-height-16);
+  }
+  &:where(.fp-size-17) {
+    font-size: var(--font-size-17);
+    line-height: var(--line-height-17);
+  }
+  &:where(.fp-size-18) {
+    font-size: var(--font-size-18);
+    line-height: var(--line-height-18);
+  }
+
+  /* Naming here is in anticipation of UI3 */
+  &:where(.fp-weight-default) {
+    font-weight: var(--font-weight-base);
+  }
+  &:where(.fp-weight-medium) {
+    font-weight: var(--font-weight-medium);
+  }
+  &:where(.fp-weight-strong) {
+    font-weight: var(--font-weight-strong);
+  }
+
+  &:where(.fp-align-start) {
+    text-align: start;
+  }
+  &:where(.fp-align-center) {
+    text-align: center;
+  }
+  &:where(.fp-align-end) {
+    text-align: end;
+  }
+
+  &:where(.fp-block) {
+    display: block;
+  }
+
+  & strong {
+    font-weight: var(--font-weight-strong);
+  }
+
+  & code {
+    font-family: var(--font-family-monospace);
+    background-color: var(--figma-color-bg-brand-tertiary);
+    font-size: 0.9em;
+    padding: 0.05rem 0.15rem;
+    border-radius: var(--radius-extra-small);
+  }
+
+  mark {
+    background-color: var(--figma-color-bg-onselected);
+  }
+}

figma-kit/src/components/text/text.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { Text } from './text';
+
+const meta = {
+  title: 'Components/Text',
+  component: Text,
+  decorators: [
+    (Story) => {
+      return (
+        <div style={{ maxWidth: 500, margin: '0 auto' }}>
+          <Story />
+        </div>
+      );
+    },
+  ],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18'],
+      table: {
+        defaultValue: { summary: '3' },
+      },
+    },
+    weight: {
+      control: 'radio',
+      options: ['default', 'medium', 'strong'],
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    align: {
+      control: 'radio',
+      options: ['start', 'center', 'end'],
+      table: {
+        defaultValue: { summary: 'start' },
+      },
+    },
+    asChild: {
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+} satisfies Meta<typeof Text>;
+
+export default meta;
+
+export const TextStory: StoryObj<typeof Text> = {
+  args: {
+    children: (
+      <>
+        <strong>This is strong text</strong> to highlight important points. <em>This is emphasized text</em> to indicate
+        subtle importance. Use <code>inline code</code> for code snippets. <mark>This is marked text</mark> to draw
+        attention.
+      </>
+    ),
+  },
+};

figma-kit/src/components/text/text.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import { Slot } from '@radix-ui/react-slot';
+
+const text = cva('fp-Text', {
+  variants: {
+    size: {
+      '1': 'fp-size-1',
+      '2': 'fp-size-2',
+      '3': 'fp-size-3',
+      '4': 'fp-size-4',
+      '5': 'fp-size-5',
+      '6': 'fp-size-6',
+      '7': 'fp-size-7',
+      '8': 'fp-size-8',
+      '9': 'fp-size-9',
+      '10': 'fp-size-10',
+      '11': 'fp-size-11',
+      '12': 'fp-size-12',
+      '13': 'fp-size-13',
+      '14': 'fp-size-14',
+      '15': 'fp-size-15',
+      '16': 'fp-size-16',
+      '17': 'fp-size-17',
+      '18': 'fp-size-18',
+    },
+    weight: {
+      default: 'fp-weight-default',
+      medium: 'fp-weight-medium',
+      strong: 'fp-weight-strong',
+    },
+    align: {
+      start: 'fp-align-start',
+      center: 'fp-align-center',
+      end: 'fp-align-end',
+    },
+    block: {
+      true: 'fp-block',
+    },
+  },
+  defaultVariants: {
+    size: '3',
+    weight: 'default',
+    align: 'start',
+  },
+});
+
+type TextElement = React.ElementRef<'span'>;
+type TextProps = React.ComponentPropsWithoutRef<'span'> &
+  VariantProps<typeof text> & {
+    asChild?: boolean;
+  };
+
+const Text = React.forwardRef<TextElement, TextProps>((props, ref) => {
+  const { asChild, className, size, weight, align, ...textProps } = props;
+  const Element = asChild ? Slot : 'span';
+
+  return (
+    <Element
+      ref={ref}
+      className={text({
+        className,
+        size,
+        weight,
+        align,
+      })}
+      {...textProps}
+    />
+  );
+});
+
+type LabelElement = React.ElementRef<'label'>;
+type LabelProps = React.ComponentPropsWithoutRef<'label'> & VariantProps<typeof text>;
+
+const Label = React.forwardRef<LabelElement, LabelProps>((props, ref) => {
+  const { className, size, weight, align, ...labelProps } = props;
+
+  return (
+    <label
+      ref={ref}
+      className={text({
+        className,
+        size,
+        weight,
+        align,
+      })}
+      {...labelProps}
+    />
+  );
+});
+
+type ParagraphElement = React.ElementRef<'p'>;
+type ParagraphProps = React.ComponentPropsWithoutRef<'p'> & VariantProps<typeof text>;
+
+const Paragraph = React.forwardRef<ParagraphElement, ParagraphProps>((props, ref) => {
+  const { className, size, weight, align, ...paragraphProps } = props;
+
+  return (
+    <p
+      ref={ref}
+      className={text({
+        className,
+        size,
+        weight,
+        align,
+      })}
+      {...paragraphProps}
+    />
+  );
+});
+
+export type { TextProps, LabelProps, ParagraphProps };
+export { Text, Label, Paragraph };

figma-kit/src/styles/index.css

@@ -6,6 +6,7 @@
 @import 'tokens/line-height.css';
 @import 'tokens/shadow.css';
 @import 'tokens/components.css';
+@import '../components/text/text.css';
 @import '../components/icon/icon.css';
 @import '../components/input/input.css';
 @import '../components/value-field/value-field.css';

figma-kit/src/styles/tokens/font.css

@@ -2,4 +2,5 @@
   --font-family-default: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans,
     sans-serif, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
     SFProLocalRange;
+  --font-family-monospace: 'Roboto Mono', monospace;
 }