@spark-web/text 1.0.0

package/src/defaultTextProps.tsx

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,56 @@
+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,
+  };
+}