raystack / raystack/apsara

Enhance component API with responsive props, color propagation, and typography utilities

Open
#650 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

global triage
Dominant language
TypeScript
Stars
70
Forks
13
Avg merge
2d 5h
Merged PRs (30d)
8

Description

Summary

Enhance Apsara's component-level APIs to improve developer experience, reduce boilerplate, and provide consistent patterns across the library.

1. Responsive Props on Layout Components

Add responsive object syntax to all layout prop values (gap, direction, padding, etc.):

<Flex gap={{ initial: "3", md: "5" }} direction={{ initial: "column", sm: "row" }}>

Support breakpoints: initial, sm, md, lg, xl.

2. Inline Spacing Props

Add shorthand padding/margin props (p, px, py, pt, pr, pb, pl, m, mx, my, mt, mr, mb, ml) to layout components that map to the space scale:

<Box p="4" mx="auto" mt="6">
3. Systematic color Prop

Extend the color prop to all visual components (Badge, Callout, Text, Avatar, Chip, etc.), not just Button. Color should propagate to children through nesting, automatically adjusting internal tokens.

4. highContrast Prop

Add a highContrast boolean to all components that accept a color prop. This shifts colors to steps 9–12 of the scale for better contrast against the page background.

5. Typography Utility Props

Add the following props to Text and Headline:

  • trim — remove leading/trailing whitespace for precise vertical alignment
  • truncate — single-line ellipsis truncation
  • wrap — control text wrapping (wrap, nowrap, balance, pretty)
  • align — text alignment (left, center, right)
  • Expand font weight options to 4 levels: light (300), regular (400), medium (500), bold (700)
6. Section Layout Component

Add a Section component for consistent vertical spacing between major page sections, with predefined size variants (small, medium, large).

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading the existing layout, visual component, Text, Headline, and Button APIs to identify current prop and color patterns. Inventory the affected components and define completion against the requested responsive props, spacing shorthands, color propagation, contrast behavior, typography utilities, and Section size variants; the issue names no specific files or tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.