@spark-web/text 1.0.3 → 1.0.4

package/README.md

@@ -11,7 +11,7 @@ Constrained, purposeful text styles as a component.
 <Columns gap="large" collapseBelow="wide">
   <Stack gap="medium">
     <Text size="large">large regular</Text>
-    <Text size="large" weight="medium">
+    <Text size="large" weight="semibold">
       large medium
     </Text>
     <Text size="large" weight="strong">
@@ -20,7 +20,7 @@ Constrained, purposeful text styles as a component.
   </Stack>
   <Stack gap="medium">
     <Text size="standard">standard regular</Text>
-    <Text size="standard" weight="medium">
+    <Text size="standard" weight="semibold">
       standard medium
     </Text>
     <Text size="standard" weight="strong">
@@ -29,7 +29,7 @@ Constrained, purposeful text styles as a component.
   </Stack>
   <Stack gap="small">
     <Text size="small">small regular</Text>
-    <Text size="small" weight="medium">
+    <Text size="small" weight="semibold">
       small medium
     </Text>
     <Text size="small" weight="strong">
@@ -38,7 +38,7 @@ Constrained, purposeful text styles as a component.
   </Stack>
   <Stack gap="small">
     <Text size="xsmall">xsmall regular</Text>
-    <Text size="xsmall" weight="medium">
+    <Text size="xsmall" weight="semibold">
       xsmall medium
     </Text>
     <Text size="xsmall" weight="strong">
@@ -108,6 +108,17 @@ the foundation tones, “muted” provides a way to de-emphasise text.
 </Inline>
 ```
 
+### Weight
+
+Text is available in two weight: `regular` and `semibold`.
+
+```jsx live
+<Inline gap="small">
+  <Text weight="regular">Regular</Text>
+  <Text weight="semibold">Semibold</Text>
+</Inline>
+```
+
 ### Contrast
 
 To ensure text has sufficient contrast, when on a dark background the foreground
@@ -126,12 +137,20 @@ tones “neutral” and “muted” will be inverted.
 
 ## Props
 
-| Prop              | Type                                  | Default | Description                                                                  |
-| ----------------- | ------------------------------------- | ------- | ---------------------------------------------------------------------------- |
-| children          | React.ReactNode                       |         | The text content to be rendered.                                             |
-| id?               | string                                |         | Sets a unique idenitifier for the component.                                 |
-| tabularNumbers?   | boolean                               |         | When enabled, numbers will be the same width. Similar to a monospaced font.  |
-| transform?        | CSSProperties['textTransform']        |         | Transforms the text casing.                                                  |
-| align?            | 'left' \| 'center' \| 'right'         |         | Sets the horizontal alignment of the component. Used if displaying as block. |
-| inline?           | boolean                               |         | Indicates if text should be inline or not.                                   |
-| overflowStrategy? | 'nowrap' \| 'truncate' \| 'breakword' |         | Sets how text behaves with regards to overflow. Used if displaying as block. |
+| Prop              | Type                                                            | Default | Description                                                                  |
+| ----------------- | --------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------- |
+| align?            | 'left' \| 'center' \| 'right'                                   |         | Sets the horizontal alignment of the component. Used if displaying as block. |
+| children          | React.ReactNode                                                 |         | The text content to be rendered.                                             |
+| data?             | [DataAttributeMap][data-attribute-map]                          |         | Sets data attributes on the component.                                       |
+| id?               | string                                                          |         | Sets a unique idenitifier for the component.                                 |
+| inline?           | boolean                                                         |         | Indicates if text should be inline or not.                                   |
+| overflowStrategy? | 'nowrap' \| 'truncate' \| 'breakword'                           |         | Sets how text behaves with regards to overflow. Used if displaying as block. |
+| tabularNumbers?   | boolean                                                         |         | When enabled, numbers will be the same width. Similar to a monospaced font.  |
+| tone?             | keyof [BrighteTheme][brighte-theme]['color']['foreground']      |         | The tone of the text.                                                        |
+| transform?        | CSSProperties['textTransform']                                  |         | Transforms the text casing.                                                  |
+| weight?           | keyof [BrighteTheme][brighte-theme]['typography']['fontweight'] |         | The weight of the text.                                                      |
+
+[brighte-theme]:
+  https://github.com/brighte-labs/spark-web/blob/e503bea4f7668d187ec7a78f99c5ed374417588b/packages/theme/src/makeTheme.ts#L158
+[data-attribute-map]:
+  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1

package/dist/declarations/src/Text.d.ts

@@ -1,4 +1,5 @@
 import type { BoxProps } from '@spark-web/box';
+import type { DataAttributeMap } from '@spark-web/utils/internal';
 import type { CSSProperties, ReactNode } from 'react';
 import type { TextOverflowStrategy } from './useOverflowStrategy';
 import type { UseTextProps } from './useText';
@@ -18,6 +19,8 @@ declare type BlockProps = {
 export declare type TextProps = Partial<UseTextProps> & {
     /** The text content. */
     children?: ReactNode;
+    /** Sets data attributes on the component. */
+    data?: DataAttributeMap;
     /** An identifier which must be unique in the whole document. */
     id?: BoxProps['id'];
     /** When enabled, numbers will be the same width. Similar to a monospaced font. */

package/dist/declarations/src/context.d.ts

@@ -2,10 +2,10 @@
 export declare const TextContext: import("react").Context<{
     size: "large" | "small" | "xsmall" | "standard";
     tone: "disabled" | "link" | "placeholder" | "muted" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
-    weight: "medium" | "strong" | "regular";
+    weight: "regular" | "semibold";
 } | undefined>;
 export declare function useTextContext(): {
     size: "large" | "small" | "xsmall" | "standard";
     tone: "disabled" | "link" | "placeholder" | "muted" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
-    weight: "medium" | "strong" | "regular";
+    weight: "regular" | "semibold";
 } | undefined;

package/dist/declarations/src/defaultTextProps.d.ts

@@ -11,6 +11,6 @@ export declare function DefaultTextPropsProvider({ children, size, tone, weight,
 export declare const useDefaultTextProps: ({ size: sizeProp, tone: toneProp, weight: weightProp, }: DefaultTextProps) => {
     size: "large" | "small" | "xsmall" | "standard";
     tone: "disabled" | "link" | "placeholder" | "muted" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
-    weight: "medium" | "strong" | "regular";
+    weight: "regular" | "semibold";
 };
 export {};

package/dist/spark-web-text.cjs.dev.js

@@ -63,7 +63,7 @@ var Strong = function Strong(_ref) {
       typography = _useTheme.typography;
 
   var styles = {
-    fontWeight: typography.fontWeight.strong
+    fontWeight: typography.fontWeight.semibold
   };
   return /*#__PURE__*/jsxRuntime.jsx("strong", {
     className: css.css(styles),
@@ -182,6 +182,7 @@ function createTextStyles(_ref2) {
 var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   var as = _ref.as,
       children = _ref.children,
+      data = _ref.data,
       id = _ref.id,
       align = _ref.align,
       baselineProp = _ref.baseline,
@@ -221,6 +222,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   if (inline) {
     return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
       as: as !== null && as !== void 0 ? as : 'span',
+      data: data,
       ref: forwardedRef,
       id: id,
       className: css.css(styles),
@@ -244,6 +246,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
     value: textContextValue,
     children: /*#__PURE__*/jsxRuntime.jsx(box.Box, {
       as: as,
+      data: data,
       ref: forwardedRef,
       id: id,
       className: css.css(styles),

package/dist/spark-web-text.cjs.prod.js

@@ -63,7 +63,7 @@ var Strong = function Strong(_ref) {
       typography = _useTheme.typography;
 
   var styles = {
-    fontWeight: typography.fontWeight.strong
+    fontWeight: typography.fontWeight.semibold
   };
   return /*#__PURE__*/jsxRuntime.jsx("strong", {
     className: css.css(styles),
@@ -182,6 +182,7 @@ function createTextStyles(_ref2) {
 var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   var as = _ref.as,
       children = _ref.children,
+      data = _ref.data,
       id = _ref.id,
       align = _ref.align,
       baselineProp = _ref.baseline,
@@ -221,6 +222,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   if (inline) {
     return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
       as: as !== null && as !== void 0 ? as : 'span',
+      data: data,
       ref: forwardedRef,
       id: id,
       className: css.css(styles),
@@ -244,6 +246,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
     value: textContextValue,
     children: /*#__PURE__*/jsxRuntime.jsx(box.Box, {
       as: as,
+      data: data,
       ref: forwardedRef,
       id: id,
       className: css.css(styles),

package/dist/spark-web-text.esm.js

@@ -59,7 +59,7 @@ var Strong = function Strong(_ref) {
       typography = _useTheme.typography;
 
   var styles = {
-    fontWeight: typography.fontWeight.strong
+    fontWeight: typography.fontWeight.semibold
   };
   return /*#__PURE__*/jsx("strong", {
     className: css(styles),
@@ -178,6 +178,7 @@ function createTextStyles(_ref2) {
 var Text = forwardRefWithAs(function (_ref, forwardedRef) {
   var as = _ref.as,
       children = _ref.children,
+      data = _ref.data,
       id = _ref.id,
       align = _ref.align,
       baselineProp = _ref.baseline,
@@ -217,6 +218,7 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
   if (inline) {
     return /*#__PURE__*/jsx(Box, {
       as: as !== null && as !== void 0 ? as : 'span',
+      data: data,
       ref: forwardedRef,
       id: id,
       className: css(styles),
@@ -240,6 +242,7 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
     value: textContextValue,
     children: /*#__PURE__*/jsx(Box, {
       as: as,
+      data: data,
       ref: forwardedRef,
       id: id,
       className: css(styles),

package/package.json

@@ -1,15 +1,18 @@
 {
   "name": "@spark-web/text",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "MIT",
   "main": "dist/spark-web-text.cjs.js",
   "module": "dist/spark-web-text.esm.js",
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "@babel/runtime": "^7.14.6",
     "@emotion/css": "^11.7.1",
-    "@spark-web/box": "^1.0.3",
-    "@spark-web/theme": "^2.0.2",
-    "@spark-web/utils": "^1.1.1"
+    "@spark-web/box": "^1.0.4",
+    "@spark-web/theme": "^3.0.0",
+    "@spark-web/utils": "^1.1.2"
   },
   "devDependencies": {
     "@types/react": "^17.0.12",

package/CHANGELOG.md

@@ -1,63 +0,0 @@
-# @spark-web/text
-
-## 1.0.3
-
-### Patch Changes
-
-- [#42](https://github.com/brighte-labs/spark-web/pull/42)
-  [`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)
-  Thanks [@lukebennett88](https://github.com/lukebennett88)! - Prevent multiple
-  versions of React
-
-- Updated dependencies
-  [[`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)]:
-  - @spark-web/box@1.0.3
-  - @spark-web/theme@2.0.2
-  - @spark-web/utils@1.1.1
-
-## 1.0.2
-
-### Patch Changes
-
-- [#40](https://github.com/brighte-labs/spark-web/pull/40)
-  [`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)
-  Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add
-  @babel/transform-runtime
-
-- Updated dependencies
-  [[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)]:
-  - @spark-web/box@1.0.2
-  - @spark-web/theme@2.0.1
-  - @spark-web/utils@1.0.2
-
-## 1.0.1
-
-### Patch Changes
-
-- [#36](https://github.com/brighte-labs/spark-web/pull/36)
-  [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
-  Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
-  config
-
-- Updated dependencies
-  [[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
-  [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
-  - @spark-web/theme@2.0.0
-  - @spark-web/box@1.0.1
-  - @spark-web/utils@1.0.1
-
-## 1.0.0
-
-### Major Changes
-
-- [#27](https://github.com/brighte-labs/spark-web/pull/27)
-  [`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
-  Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
-
-### Patch Changes
-
-- Updated dependencies
-  [[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
-  - @spark-web/box@1.0.0
-  - @spark-web/theme@1.0.0
-  - @spark-web/utils@1.0.0

package/src/Strong.tsx

@@ -1,13 +0,0 @@
-import { css } from '@emotion/css';
-import { useTheme } from '@spark-web/theme';
-import type { ReactNode } from 'react';
-
-export type StrongProps = {
-  children: ReactNode;
-};
-
-export const Strong = ({ children }: StrongProps) => {
-  const { typography } = useTheme();
-  const styles = { fontWeight: typography.fontWeight.strong };
-  return <strong className={css(styles)}>{children}</strong>;
-};

package/src/Text.stories.tsx

@@ -1,20 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-import type { TextProps } from './Text';
-import { Text } from './Text';
-
-export default {
-  title: 'Typography / Text',
-  component: Text,
-} as ComponentMeta<typeof Text>;
-
-const LinkStory: ComponentStory<typeof Text> = (args: TextProps) => (
-  <Text {...args} />
-);
-
-export const Default = LinkStory.bind({});
-
-Default.args = {
-  children:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus ex purus, nec rutrum lorem placerat vestibulum. Ut sit amet libero non tellus aliquam pretium nec ac dui. Vivamus erat nibh, placerat vitae nisi eu, aliquet auctor dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;',
-};

package/src/Text.tsx

@@ -1,113 +0,0 @@
-import { css } from '@emotion/css';
-import type { BoxProps } from '@spark-web/box';
-import { Box } from '@spark-web/box';
-import { forwardRefWithAs } from '@spark-web/utils/ts';
-import type { CSSProperties, ReactNode } from 'react';
-import { useMemo } from 'react';
-
-import { TextContext, useTextContext } from './context';
-import { useDefaultTextProps } from './defaultTextProps';
-import type { TextOverflowStrategy } from './useOverflowStrategy';
-import { useOverflowStrategy } from './useOverflowStrategy';
-import type { UseTextProps } from './useText';
-import { useText } from './useText';
-
-type InlineProps = {
-  align?: never;
-  /** Display as an inline element. */
-  inline?: boolean;
-  overflowStrategy?: never;
-};
-type BlockProps = {
-  /** The horizontal alignment. */
-  align?: 'left' | 'center' | 'right';
-  inline?: never;
-  /** Manage how text behaves with regard to overflow. */
-  overflowStrategy?: TextOverflowStrategy;
-};
-
-export type TextProps = Partial<UseTextProps> & {
-  /** The text content. */
-  children?: ReactNode;
-  /** An identifier which must be unique in the whole document. */
-  id?: BoxProps['id'];
-  /** When enabled, numbers will be the same width. Similar to a monospaced font. */
-  tabularNumbers?: boolean;
-  /** Transform the text casing. */
-  transform?: CSSProperties['textTransform'];
-} & (InlineProps | BlockProps);
-
-export const Text = forwardRefWithAs<'div', TextProps>(
-  (
-    {
-      // box props
-      as,
-      children,
-      id,
-
-      //text props
-      align,
-      baseline: baselineProp,
-      inline,
-      overflowStrategy,
-      size: sizeProp,
-      tabularNumbers,
-      tone: toneProp,
-      transform,
-      weight: weightProp,
-    },
-    forwardedRef
-  ) => {
-    const overflowStyles = useOverflowStrategy(overflowStrategy);
-    const textContext = useTextContext();
-    const { size, tone, weight } = useDefaultTextProps({
-      size: sizeProp ?? textContext?.size,
-      tone: toneProp ?? textContext?.tone,
-      weight: weightProp ?? textContext?.weight,
-    });
-    const baseline = !inline && baselineProp;
-    const textStyles = useText({ baseline, size, tone, weight });
-    const styles = [
-      textStyles,
-      {
-        display: inline ? 'inline' : 'block',
-        fontVariantNumeric: tabularNumbers ? 'tabular-nums' : undefined,
-        textAlign: align,
-        textTransform: transform,
-      },
-    ];
-
-    // early exit for inline variant
-    if (inline) {
-      return (
-        <Box
-          as={as ?? 'span'}
-          ref={forwardedRef}
-          id={id}
-          className={css(styles)}
-        >
-          {children}
-        </Box>
-      );
-    }
-
-    // prepare block variant
-    const content = overflowStrategy ? (
-      <span className={css(overflowStyles)}>{children}</span>
-    ) : (
-      children
-    );
-    const textContextValue = useMemo(
-      () => ({ size, tone, weight }),
-      [size, tone, weight]
-    );
-
-    return (
-      <TextContext.Provider value={textContextValue}>
-        <Box as={as} ref={forwardedRef} id={id} className={css(styles)}>
-          {content}
-        </Box>
-      </TextContext.Provider>
-    );
-  }
-);

package/src/context.ts

@@ -1,13 +0,0 @@
-import { createContext, useContext } from 'react';
-
-import type { useDefaultTextProps } from './defaultTextProps';
-
-type TextContextType = ReturnType<typeof useDefaultTextProps>;
-
-export const TextContext = createContext<TextContextType | undefined>(
-  undefined
-);
-
-export function useTextContext() {
-  return useContext(TextContext);
-}

package/src/defaultTextProps.tsx

@@ -1,48 +0,0 @@
-import type { ReactNode } from 'react';
-import { createContext, useContext, useMemo } from 'react';
-
-import type { UseTextProps } from './useText';
-
-type DefaultTextProps = {
-  size?: NonNullable<UseTextProps['size']>;
-  tone?: NonNullable<UseTextProps['tone']>;
-  weight?: NonNullable<UseTextProps['weight']>;
-};
-
-const DefaultTextPropsContext = createContext<DefaultTextProps>({
-  size: undefined,
-  tone: undefined,
-  weight: undefined,
-});
-
-export function DefaultTextPropsProvider({
-  children,
-  size,
-  tone,
-  weight,
-}: DefaultTextProps & { children: ReactNode }) {
-  const defaultTextProps = useMemo(
-    () => ({ size, tone, weight }),
-    [size, tone, weight]
-  );
-
-  return (
-    <DefaultTextPropsContext.Provider value={defaultTextProps}>
-      {children}
-    </DefaultTextPropsContext.Provider>
-  );
-}
-
-export const useDefaultTextProps = ({
-  size: sizeProp,
-  tone: toneProp,
-  weight: weightProp,
-}: DefaultTextProps) => {
-  const { size, tone, weight } = useContext(DefaultTextPropsContext);
-
-  return {
-    size: sizeProp ?? size ?? 'standard',
-    tone: toneProp ?? tone ?? 'neutral',
-    weight: weightProp ?? weight ?? 'regular',
-  };
-};

package/src/index.ts

@@ -1,17 +0,0 @@
-export { useTextContext } from './context';
-export {
-  DefaultTextPropsProvider,
-  useDefaultTextProps,
-} from './defaultTextProps';
-export { Strong } from './Strong';
-export { Text } from './Text';
-export { useForegroundTone } from './useForegroundTone';
-export { useOverflowStrategy } from './useOverflowStrategy';
-export { createTextStyles, useText } from './useText';
-
-// types
-
-export type { StrongProps } from './Strong';
-export type { TextProps } from './Text';
-export type { ForegroundTone } from './useForegroundTone';
-export type { TextOverflowStrategy } from './useOverflowStrategy';

package/src/useForegroundTone.ts

@@ -1,36 +0,0 @@
-import { useBackgroundLightness } from '@spark-web/box';
-import type { BrighteTheme } from '@spark-web/theme';
-import { useTheme } from '@spark-web/theme';
-
-export type ForegroundTone = keyof Omit<
-  BrighteTheme['color']['foreground'],
-  'neutralInverted' | 'mutedInverted'
->;
-
-const invertableTones = {
-  neutral: {
-    dark: 'neutralInverted',
-    light: 'neutral',
-  },
-  muted: {
-    dark: 'mutedInverted',
-    light: 'muted',
-  },
-  link: {
-    dark: 'neutralInverted',
-    light: 'link',
-  },
-} as const;
-
-export function useForegroundTone(tone: ForegroundTone) {
-  const theme = useTheme();
-  const backgroundLightness = useBackgroundLightness();
-
-  if (tone in invertableTones) {
-    return theme.color.foreground[
-      invertableTones[tone as keyof typeof invertableTones][backgroundLightness]
-    ];
-  }
-
-  return theme.color.foreground[tone];
-}

package/src/useOverflowStrategy.ts

@@ -1,28 +0,0 @@
-const strategyMap = {
-  truncate: {
-    display: 'block',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-  },
-  nowrap: {
-    whiteSpace: 'nowrap',
-  },
-  // https://css-tricks.com/better-line-breaks-for-long-urls/
-  breakword: {
-    display: 'block',
-    overflowWrap: 'break-word',
-    wordBreak: 'break-word',
-    wordWrap: 'break-word',
-  },
-} as const;
-
-export type TextOverflowStrategy = keyof typeof strategyMap;
-
-export function useOverflowStrategy(strategy?: TextOverflowStrategy) {
-  if (!strategy) {
-    return null;
-  }
-
-  return strategyMap[strategy];
-}

package/src/useText.ts

@@ -1,56 +0,0 @@
-import type { BrighteTextDefinition, BrighteTheme } from '@spark-web/theme';
-import { useTheme } from '@spark-web/theme';
-
-import type { ForegroundTone } from './useForegroundTone';
-import { useForegroundTone } from './useForegroundTone';
-
-export type UseTextProps = {
-  /** Apply leading-trim styles. */
-  baseline?: boolean;
-  /** The size of the text. */
-  size: keyof BrighteTheme['typography']['text'];
-  /** The tone of the text. */
-  tone: ForegroundTone;
-  /** The weight of the text. */
-  weight: keyof BrighteTheme['typography']['fontWeight'];
-};
-
-export function useText({ baseline = true, size, tone, weight }: UseTextProps) {
-  const { typography, utils } = useTheme();
-  const color = useForegroundTone(tone);
-  const { mobile, tablet } = typography.text[size];
-  const responsiveStyles = utils.responsiveStyles({
-    mobile: createTextStyles(mobile, { includeTrims: baseline }),
-    tablet: createTextStyles(tablet, { includeTrims: baseline }),
-  });
-
-  const styles = [
-    {
-      color,
-      fontFamily: typography.fontFamily.sans.name,
-      fontWeight: typography.fontWeight[weight],
-    },
-    responsiveStyles,
-  ];
-
-  return styles;
-}
-
-export function createTextStyles(
-  { fontSize, lineHeight, trims }: BrighteTextDefinition,
-  { includeTrims = true } = {}
-) {
-  const pseudo = { content: '" "', display: 'table' };
-  const leadingTrim = includeTrims
-    ? {
-        '::before': { ...pseudo, marginBottom: trims.capHeightTrim },
-        '::after': { ...pseudo, marginTop: trims.baselineTrim },
-      }
-    : null;
-
-  return {
-    fontSize,
-    lineHeight,
-    ...leadingTrim,
-  };
-}