@texturehq/edges

v2.4.6

Published

a day ago

A shared component library for Texture

0High
0Medium
0Low

Edges

A shared component library for Texture

Installation

yarn add @texturehq/edges

Usage

CSS Imports (Required)

Important: Import the CSS files in this exact order for proper functionality:

@import "@texturehq/edges/theme.css";
@import "@texturehq/edges/styles.css";
@import "tailwindcss";

This order is crucial because:

The theme CSS defines custom color variables and design tokens
The styles CSS provides component-specific styles
Tailwind CSS needs to be imported last to properly process the custom theme

Font loading

Edges ships font-family variables and typography role tokens, but it does not fetch webfonts for consumers. Load the font files at your app boundary, then map those loaded faces into the Edges variables.

Canonical font-family variables:

--font-family-brand: "Rethink Sans", -apple-system, BlinkMacSystemFont, sans-serif;
--font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
--font-family-mono: "Geist Mono", "JetBrains Mono", "SF Mono", "Menlo", monospace;
--font-family-agent: "Source Serif 4", Charter, Georgia, serif;

For Next apps, prefer next/font/google and wire the generated variables into Edges:

import { Geist_Mono, Inter, Rethink_Sans, Source_Serif_4 } from "next/font/google";

const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
const rethinkSans = Rethink_Sans({ subsets: ["latin"], variable: "--font-rethink-sans", display: "swap" });
const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono", display: "swap" });
const sourceSerif = Source_Serif_4({
  subsets: ["latin"],
  weight: "variable",
  variable: "--font-source-serif-4",
  display: "swap",
  axes: ["opsz"],
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html className={`${inter.variable} ${rethinkSans.variable} ${geistMono.variable} ${sourceSerif.variable}`}>
      <body>{children}</body>
    </html>
  );
}

:root {
  --font-family-brand: var(--font-rethink-sans), "Rethink Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-sans: var(--font-inter), "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono: var(--font-geist-mono), "Geist Mono", "JetBrains Mono", "SF Mono", Menlo, monospace;
  --font-family-agent: var(--font-source-serif-4), "Source Serif 4", Charter, Georgia, serif;
}

Components

Import and use components as needed:

import { Button, TextField, Card } from '@texturehq/edges';

function MyComponent() {
  return (
    <Card>
      <TextField label="Name" />
      <Button>Submit</Button>
    </Card>
  );
}

Color System

The package includes a comprehensive color system from @texturehq/edges-tokens, exposed through src/theme.css. All custom colors are automatically available as utility classes.

Using Custom Colors

Your custom colors are available as utility classes:

// Brand colors
<div className="bg-brand-primary text-text-inverse">Brand content</div>

// Font colors
<div className="text-text-primary">Primary editorial text</div>
<div className="text-text-secondary">Supporting text, descriptions, and metadata</div>
<div className="text-text-disabled">Disabled or placeholder text</div>

// Device state colors
<div className="bg-device-charging-background border-device-charging-border">
  Charging device
</div>

// Feedback colors
<div className="bg-feedback-success-background text-feedback-success-text">
  Success message
</div>

Available Color Categories

Text colors: text-primary, text-secondary, text-inverse, text-disabled
Brand/action colors: action-brand-*, action-default-*
Device states: device-charging-*, device-heat-*, device-cool-*, etc.
Feedback colors: feedback-success-*, feedback-error-*, feedback-warning-*, feedback-info-*
Standard color scales: All Tailwind color scales (red, blue, green, etc.)

Development

Build

yarn build

Development Server

yarn dev