Something went wrong. Try again.
A design system in a box. hip-ui.tngl.io/docs/introduction
Something went wrong. Try again.
TypeScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187"use client";
import * as stylex from "@stylexjs/stylex";import { use } from "react";
import type { ButtonVariant, Size } from "../types";
import { ButtonGroupContext } from "../button/context";import { SizeContext } from "../context";import { animationDuration } from "./animations.stylex";import { slate } from "./colors.stylex";import { radius } from "./radius.stylex";import { critical, gray, primary } from "./semantic-color.stylex";import { shadow } from "./shadow.stylex";import { spacing } from "./spacing.stylex";import { fontFamily, fontSize, fontWeight, lineHeight,} from "./typography.stylex";
const styles = stylex.create({ shadow: { boxShadow: shadow["xs"], }, base: { borderRadius: radius["md"], borderStyle: "solid", borderWidth: 1, gap: spacing["1"], alignItems: "center", boxSizing: "border-box", display: "inline-flex", flexShrink: 0, fontFamily: fontFamily["sans"], fontWeight: fontWeight["medium"], justifyContent: "center", opacity: { ":disabled": 0.5, }, pointerEvents: { ":disabled": "none", }, transitionDuration: animationDuration.fast, transitionProperty: "all", transitionTimingFunction: "ease-in-out", whiteSpace: "nowrap",
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles ":is(*) svg": { flexShrink: 0, pointerEvents: "none", height: spacing["4"], width: spacing["4"], }, }, small: { fontSize: fontSize["xs"], lineHeight: lineHeight["xs"], height: spacing["7"], paddingLeft: { default: spacing["2"], }, paddingRight: spacing["2"],
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles ":is(*) svg": { flexShrink: 0, pointerEvents: "none", height: spacing["3.5"], width: spacing["3.5"], }, }, medium: { gap: spacing["1.5"], fontSize: fontSize["sm"], lineHeight: lineHeight["xs"], height: spacing["8"], paddingLeft: { default: spacing["3"], ":has(svg+*)": spacing["2.5"], }, paddingRight: spacing["3"], }, large: { gap: spacing["2"], height: spacing["10"], paddingLeft: { default: spacing["4"], ":has(svg+*)": spacing["3"], }, paddingRight: spacing["4"], }, outline: { borderWidth: 1, }, secondary: { borderColor: { default: slate.component1, ":hover": slate.component2, ":active": slate.component3, }, }, tertiary: { borderColor: { default: "transparent", ":hover": slate.component2, ":active": slate.component3, }, },
groupHorizontal: { borderBottomLeftRadius: { ":not(:first-child)": 0 }, borderBottomRightRadius: { ":not(:last-child)": 0 }, borderLeftWidth: { ":not(:first-child)": 0 }, borderTopLeftRadius: { ":not(:first-child)": 0 }, borderTopRightRadius: { ":not(:last-child)": 0 }, }, secondaryGroupHorizontal: { borderRightColor: { ":not(:last-child)": slate.border2 }, }, groupVertical: { borderBottomLeftRadius: { ":not(:last-child)": 0 }, borderBottomRightRadius: { ":not(:last-child)": 0 }, borderTopLeftRadius: { ":not(:first-child)": 0 }, borderTopRightRadius: { ":not(:first-child)": 0 }, borderTopWidth: { ":not(:first-child)": 0 }, }, secondaryGroupVertical: { borderBottomColor: { ":not(:last-child)": slate.border2 }, },});
export const useButtonStyles = ({ variant = "primary", size: sizeProp,}: { variant?: ButtonVariant; size?: Size;}) => { const size = sizeProp || use(SizeContext); const group = use(ButtonGroupContext);
return [ styles.base, group === "horizontal" && styles.groupHorizontal, group === "vertical" && styles.groupVertical, variant === "primary" && [ primary.bgAction, primary.borderInteractive, primary.text, styles.shadow, ], variant === "secondary" && [ gray.bgUi, styles.secondary, gray.text, group === "horizontal" && styles.secondaryGroupHorizontal, group === "vertical" && styles.secondaryGroupVertical, ], variant === "tertiary" && [ gray.bgGhost, styles.tertiary, gray.text, group === "horizontal" && styles.secondaryGroupHorizontal, group === "vertical" && styles.secondaryGroupVertical, ], variant === "outline" && [ gray.borderInteractive, gray.bgGhost, gray.text, styles.outline, styles.shadow, ], variant === "critical" && [ critical.bgSolidAction, critical.borderInteractive, critical.textContrast, styles.shadow, ], size === "sm" && styles.small, size === "md" && styles.medium, size === "lg" && styles.large, ];};