@phildenhoff/dig-86a9d6ae-6062-4783-9044-7b947bd79d9e

Digits design system package — pure React components, design tokens, icons, and utilities.

Installation

npm install @phildenhoff/dig-86a9d6ae-6062-4783-9044-7b947bd79d9e

Peer dependencies

Required:

• react ^18.0.0 || ^19.0.0
• react-dom ^18.0.0 || ^19.0.0
• styled-components ^6.0.0

Optional (needed by specific components):

• @radix-ui/react-* — used by Select, Menu, Popover, Tooltip, Slider, etc.
• framer-motion — used by animation components
• downshift — used by Autocomplete
• react-datepicker — used by DatePicker
• react-use — used by some hooks
• react-router-dom — used by LinkButton

Usage

import { DigitsButton, DigitsTooltip } from "@phildenhoff/dig-86a9d6ae-6062-4783-9044-7b947bd79d9e/components"
import { colors, fonts } from "@phildenhoff/dig-86a9d6ae-6062-4783-9044-7b947bd79d9e/tokens"
import { SvgAlertCircle } from "@phildenhoff/dig-86a9d6ae-6062-4783-9044-7b947bd79d9e/icons"
import { useStateBoolean } from "@phildenhoff/dig-86a9d6ae-6062-4783-9044-7b947bd79d9e/hooks"
import { colorHelper } from "@phildenhoff/dig-86a9d6ae-6062-4783-9044-7b947bd79d9e/helpers"

Entry points

| Import path | Contents | |---|---| | @phildenhoff/dig-86a9d6ae-6062-4783-9044-7b947bd79d9e | Everything (except icons) | | @phildenhoff/dig-86a9d6ae-6062-4783-9044-7b947bd79d9e/components | UI components: Button, Tooltip, Select, Menu, etc. | | @phildenhoff/dig-86a9d6ae-6062-4783-9044-7b947bd79d9e/tokens | Design tokens: colors, typography, borders, theme utilities | | @phildenhoff/dig-86a9d6ae-6062-4783-9044-7b947bd79d9e/icons | 900+ SVG icon components | | @phildenhoff/dig-86a9d6ae-6062-4783-9044-7b947bd79d9e/hooks | Pure React hooks | | @phildenhoff/dig-86a9d6ae-6062-4783-9044-7b947bd79d9e/helpers | Utility functions (color, string, array) |

Global Styles & Fonts

Import the global stylesheet once at your app's entry point to match the Digits app's base styles:

@import "@phildenhoff/dig-86a9d6ae-6062-4783-9044-7b947bd79d9e/globals";

Or in JavaScript/TypeScript:

import "@phildenhoff/dig-86a9d6ae-6062-4783-9044-7b947bd79d9e/globals"

This sets up:

• Avenir font family with Helvetica/Arial fallback
• Font rendering optimizations (antialiasing, ligatures)
• Box-sizing, element resets, and form element normalization

Avenir font

Avenir is the primary typeface. It ships with macOS as a system font — no extra setup needed on Mac.

On Windows and Linux, the fallback fonts (Helvetica, Arial) are used automatically. If you have your own Avenir license, add a @font-face declaration before the globals import:

/* Example — replace src with your own licensed font files */
@font-face {
  font-family: "Avenir";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/avenir-regular.woff2") format("woff2"),
       url("./fonts/avenir-regular.woff") format("woff");
}

@import "@phildenhoff/dig-86a9d6ae-6062-4783-9044-7b947bd79d9e/globals";

Theme colors

The globals stylesheet does not include theme colors or scrollbar styles — these are dynamic and depend on your theme setup. Use the tokens export (colors, themedValue, etc.) to apply themed styles in your components.

Versioning

Major versions have code names. See VERSIONS.md.

Changes are tracked with changesets. When modifying design system source files, run pnpm changeset to create a changeset describing the change.

Boundary rules

This package must contain only pure rendering code. See BOUNDARY.md for what is and isn't allowed.