tessl/npm-keystone-ui--core

Core design system components and utilities for KeystoneJS applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Typography Components

Name: tessl/npm-keystone-ui--core
Author: tessl

Typography components with theme-integrated styling, semantic heading support, and responsive design capabilities. All typography components extend from Box and inherit its styling props.

Capabilities

Text Component

Primary text component with theme-based typography controls including size, weight, color, and spacing.

/**
 * Text component with typography controls and Box styling
 * @param props - Text styling and content props
 * @returns JSX element with typography styles applied
 */
function Text(props: TextProps): JSX.Element;

interface TextProps extends BoxProps {
  /** Line height from theme leading scale */
  leading?: keyof Theme['typography']['leading'];
  /** Font size preset */
  size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
  /** Letter spacing from theme tracking scale */
  tracking?: keyof Theme['typography']['tracking'];
  /** Text color from theme palette */
  color?: keyof Theme['palette'];
  /** Font weight from theme fontWeight scale */
  weight?: keyof Theme['typography']['fontWeight'];
}

Usage Examples:

import { Text } from "@keystone-ui/core";

// Basic text with theme styling
<Text size="large" weight="bold" color="neutral900">
  Important heading text
</Text>

// Paragraph text with custom spacing
<Text 
  leading="loose" 
  tracking="base" 
  marginBottom="medium"
>
  This is a paragraph with comfortable line height and spacing.
</Text>

// Small caption text
<Text 
  size="xsmall" 
  color="neutral600" 
  weight="medium"
  tracking="tight"
>
  Caption or helper text
</Text>

// Responsive text sizing
<Text size={["small", "medium", "large"]}>
  Responsive text that grows with screen size
</Text>

Heading Component

Generic heading component that supports different heading types with theme-based styling.

/**
 * Generic heading component with theme-integrated styles
 * @param props - Heading type and styling props
 * @returns JSX element with heading styles applied
 */
function Heading(props: HeadingProps): JSX.Element;

interface HeadingProps extends BoxProps {
  /** Heading type determining visual style */
  type?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
}

/** Array of valid heading types */
const HeadingTypes: readonly ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

Usage Examples:

import { Heading } from "@keystone-ui/core";

// Heading with specific type
<Heading type="h2" marginBottom="medium">
  Section Title
</Heading>

// Heading as different element but with h3 styling
<Heading as="h1" type="h3">
  Page title with h3 visual style
</Heading>

// Heading with custom spacing
<Heading 
  type="h4" 
  marginTop="large" 
  marginBottom="small"
>
  Subsection Heading
</Heading>

Specific Heading Components

Semantic heading components (H1-H6) that automatically apply appropriate heading styles from the theme.

/**
 * H1 heading component with theme h1 styles
 * @param props - Box styling props
 * @returns JSX element with h1 styles
 */
function H1(props: BoxProps): JSX.Element;

/**
 * H2 heading component with theme h2 styles
 * @param props - Box styling props
 * @returns JSX element with h2 styles
 */
function H2(props: BoxProps): JSX.Element;

/**
 * H3 heading component with theme h3 styles
 * @param props - Box styling props
 * @returns JSX element with h3 styles
 */
function H3(props: BoxProps): JSX.Element;

/**
 * H4 heading component with theme h4 styles
 * @param props - Box styling props
 * @returns JSX element with h4 styles
 */
function H4(props: BoxProps): JSX.Element;

/**
 * H5 heading component with theme h5 styles
 * @param props - Box styling props
 * @returns JSX element with h5 styles
 */
function H5(props: BoxProps): JSX.Element;

/**
 * H6 heading component with theme h6 styles
 * @param props - Box styling props
 * @returns JSX element with h6 styles
 */
function H6(props: BoxProps): JSX.Element;

Usage Examples:

import { H1, H2, H3, H4, H5, H6 } from "@keystone-ui/core";

// Semantic heading hierarchy
<article>
  <H1 marginBottom="large">Article Title</H1>
  
  <H2 marginTop="xlarge" marginBottom="medium">Section Title</H2>
  <H3 marginTop="large" marginBottom="small">Subsection Title</H3>
  
  <H4 marginTop="medium" marginBottom="small">Sub-subsection</H4>
  <H5 marginTop="small" marginBottom="xsmall">Minor Heading</H5>
  <H6 marginTop="small" marginBottom="xsmall">Caption Heading</H6>
</article>

// Headings with custom elements
<H2 as="legend">Form Section Legend</H2>
<H3 as="summary">Details Summary</H3>

// Headings with additional styling
<H1 
  textAlign="center" 
  padding="large" 
  background="neutral50"
  rounding="medium"
>
  Featured Title
</H1>

Typography Theme Structure

The theme provides comprehensive typography scales that all components utilize:

Font Families

typography.fontFamily = {
  body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
  heading: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
  monospace: 'Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace'
}

Font Sizes

typography.fontSize = {
  xxxsmall: '0.5rem',   // 8px
  xxsmall: '0.6rem',    // ~10px
  xsmall: '0.75rem',    // 12px
  small: '0.875rem',    // 14px
  medium: '1rem',       // 16px
  large: '1.125rem',    // 18px
  xlarge: '1.25rem',    // 20px
  xxlarge: '1.5rem',    // 24px
  xxxlarge: '1.875rem', // 30px
  xxxxlarge: '2.25rem', // 36px
  xxxxxlarge: '3rem',   // 48px
  xxxxxxlarge: '4rem'   // 64px
}

Font Weights

typography.fontWeight = {
  light: 300,
  regular: 400,
  medium: 500,
  semibold: 600,
  bold: 700,
  heavy: 800
}

Line Heights (Leading)

typography.leading = {
  tighter: 1,
  tight: 1.2,
  base: 1.4,
  loose: 1.6,
  looser: 1.8
}

Letter Spacing (Tracking)

typography.tracking = {
  tighter: '-0.02em',
  tight: '-0.01em',
  base: '0em',
  loose: '0.01em',
  looser: '0.02em'
}

Heading Styles

Each heading type has predefined styles in the theme:

headingStyles = {
  h1: { color: neutral900, family: heading, size: xxxlarge, weight: heavy, transform: 'none' },
  h2: { color: neutral900, family: heading, size: xxlarge, weight: bold, transform: 'none' },
  h3: { color: neutral900, family: heading, size: xlarge, weight: bold, transform: 'none' },
  h4: { color: neutral900, family: heading, size: large, weight: bold, transform: 'none' },
  h5: { color: neutral900, family: heading, size: medium, weight: bold, transform: 'none' },
  h6: { color: neutral900, family: heading, size: small, weight: bold, transform: 'uppercase' }
}

Responsive Typography

Typography components support responsive sizing and styling:

// Responsive font sizes
<Text size={["small", "medium", "large"]}>
  Text that scales with breakpoints
</Text>

// Responsive spacing
<H1 marginBottom={["medium", "large", "xlarge"]}>
  Heading with responsive margins
</H1>

// Responsive alignment
<Text textAlign={["left", "center"]}>
  Left-aligned on mobile, centered on larger screens
</Text>