@moyeorak/design-system 0.1.0 → 0.1.2

package/README.md

@@ -189,6 +189,22 @@ import "@moyeorak/design-system/dist/style.css"
 import { Button } from "@moyeorak/design-system"
 ```
 
+### 폰트 (Pretendard)
+
+라이브러리는 폰트 파일을 번들링하지 않고 `font-family: 'Pretendard Variable', Pretendard, sans-serif`로 이름만 참조해요. Pretendard를 직접 적용하려면 소비 앱에서 폰트를 로드해야 해요.
+
+```tsx
+// Next.js의 경우 next/font/local 사용 권장
+import localFont from "next/font/local"
+
+const pretendard = localFont({
+  src: "../fonts/PretendardVariable.woff2",
+  variable: "--font-pretendard",
+})
+```
+
+폰트를 로드하지 않으면 시스템 sans-serif 폰트로 자동 폴백돼요.
+
 ## Panda CSS 코드 생성
 
 `panda.config.ts`를 수정하면 반드시 codegen을 다시 실행해야 해요.

package/dist/index.d.ts

@@ -56,20 +56,18 @@ export declare type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & RecipeV
 
 declare const badgeStyles: RecipeRuntimeFn<    {
 variant: {
-brand: {
+"brand-weak": {
 bg: "fill.brand.subtler";
 color: "fg.brand.default";
 };
-neutral: {
-bg: "stroke.neutral.subtler";
-color: "fg.neutral.subtler";
+"neutral-weak": {
+bg: "fill.neutral.subtler";
+color: "fg.neutral.subtle";
 };
-stroke: {
-bg: "fill.neutral.default";
-color: "fg.neutral.subtler";
-borderWidth: "1px";
-borderStyle: "solid";
-borderColor: "stroke.neutral.subtle";
+outline: {
+bg: "fill.neutral.faintest";
+color: "fg.neutral.subtle";
+boxShadow: "inset 0 0 0 1px {colors.stroke.neutral.subtle}";
 };
 };
 size: {
@@ -84,51 +82,26 @@ textStyle: "body4";
 
 declare type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl"
 
-export declare function Button({ variant, size, leftIcon, rightIcon, asChild, className, children, ...props }: ButtonProps): JSX.Element;
-
-export declare function ButtonCta({ variant, asChild, className, children, ...props }: ButtonCtaProps): JSX.Element;
-
-export declare type ButtonCtaProps = React.ButtonHTMLAttributes<HTMLButtonElement> & RecipeVariantProps<typeof buttonCtaStyles> & {
-    asChild?: boolean;
-};
-
-declare const buttonCtaStyles: RecipeRuntimeFn<    {
-variant: {
-default: {
-bg: "fill.inverted.default";
-color: "fg.inverted.default";
-_active: {
-bg: "fill.inverted.default-pressed";
-};
-};
-brand: {
-bg: "fill.brand.default";
-color: "fg.inverted.default";
-_active: {
-bg: "fill.brand.default-pressed";
-};
-};
-};
-}>;
+export declare function Button({ variant, size, display, leadingIcon, trailingIcon, asChild, className, children, ...props }: ButtonProps): JSX.Element;
 
 export declare type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & RecipeVariantProps<typeof buttonStyles> & {
-    leftIcon?: React.ReactNode;
-    rightIcon?: React.ReactNode;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
     asChild?: boolean;
 };
 
 declare const buttonStyles: RecipeRuntimeFn<    {
 variant: {
 default: {
-bg: "fill.inverted.default";
-color: "fg.inverted.default";
+bg: "fill.neutral.default";
+color: "fg.neutral.faintest";
 _active: {
-bg: "fill.inverted.default-pressed";
+bg: "fill.neutral.default-pressed";
 };
 };
 brand: {
 bg: "fill.brand.default";
-color: "fg.inverted.default";
+color: "fg.neutral.faintest";
 _active: {
 bg: "fill.brand.default-pressed";
 };
@@ -140,29 +113,36 @@ _active: {
 bg: "fill.brand.subtle-pressed";
 };
 };
-stroke: {
-bg: "fill.neutral.default";
-color: "fg.neutral.subtle";
-borderWidth: "1px";
-borderStyle: "solid";
-borderColor: "stroke.neutral.subtle";
+outline: {
+bg: "fill.neutral.faintest";
+color: "fg.neutral.default";
+boxShadow: "inset 0 0 0 1px {colors.stroke.neutral.subtle}";
 _active: {
-bg: "fill.neutral.stronger";
+bg: "fill.neutral.subtler";
 };
 };
 ghost: {
 bg: "transparent";
-color: "fg.neutral.subtle";
+color: "fg.neutral.default";
 _active: {
-bg: "fill.neutral.stronger";
+bg: "fill.neutral.subtler";
 };
 };
 "ghost-brand": {
 bg: "transparent";
 color: "fg.brand.default";
 _active: {
-bg: "fill.neutral.stronger";
+bg: "fill.neutral.subtler";
+};
+};
+};
+display: {
+inline: {
+display: "inline-flex";
 };
+full: {
+display: "flex";
+width: "100%";
 };
 };
 size: {
@@ -200,33 +180,20 @@ declare const chipStyles: RecipeRuntimeFn<    {
 variant: {
 brand: {
 bg: "fill.brand.default";
-color: "fg.inverted.default";
+color: "fg.neutral.faintest";
 };
-"brand-weak": {
+"outlined-brand": {
 bg: "fill.brand.subtle";
 color: "fg.brand.default";
-borderWidth: "1px";
-borderStyle: "solid";
-borderColor: "stroke.brand.default";
+boxShadow: "inset 0 0 0 1px {colors.stroke.brand.default}";
 };
 neutral: {
-bg: "fill.inverted.default";
-color: "fg.inverted.default";
-_disabled: {
-bg: "fill.neutral.stronger";
-color: "fg.neutral.subtler";
-};
-};
-inverted: {
 bg: "fill.neutral.default";
-color: "fg.neutral.subtler";
+color: "fg.neutral.faintest";
 };
-"inverted-stroke": {
-bg: "fill.neutral.default";
+"neutral-weak": {
+bg: "fill.neutral.subtler";
 color: "fg.neutral.subtler";
-borderWidth: "1px";
-borderStyle: "solid";
-borderColor: "stroke.neutral.subtle";
 };
 };
 shape: {
@@ -241,7 +208,7 @@ px: "14px";
 };
 }>;
 
-declare type ColorToken = "neutral.0" | "neutral.50" | "neutral.100" | "neutral.200" | "neutral.300" | "neutral.400" | "neutral.500" | "neutral.600" | "neutral.700" | "neutral.800" | "neutral.900" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "neutralOpacity.100" | "neutralOpacity.200" | "neutralOpacity.300" | "neutralOpacity.400" | "neutralOpacity.500" | "neutralOpacity.600" | "neutralOpacity.700" | "neutralOpacity.800" | "neutralOpacity.900" | "red" | "green" | "fill.neutral.default" | "fill.neutral.strong" | "fill.neutral.stronger" | "fill.neutral.strongest" | "fill.inverted.default" | "fill.inverted.default-pressed" | "fill.inverted.default-disabled" | "fill.brand.subtlest" | "fill.brand.subtler" | "fill.brand.subtle" | "fill.brand.subtle-pressed" | "fill.brand.default" | "fill.brand.default-pressed" | "bg.neutral.default" | "bg.neutral.strong" | "bg.dim.default" | "stroke.neutral.subtler" | "stroke.neutral.subtle" | "stroke.neutral.default" | "stroke.neutral.strong" | "stroke.brand.subtle" | "stroke.brand.default" | "stroke.negative.default" | "shadow.subtle" | "shadow.default" | "shadow.strong" | "shadow.stronger" | "fg.neutral.faintest" | "fg.neutral.subtlest" | "fg.neutral.subtler" | "fg.neutral.subtle" | "fg.neutral.default" | "fg.neutral.strong" | "fg.neutral.default-disabled" | "fg.inverted.default" | "fg.brand.subtlest" | "fg.brand.default" | "fg.positive.default" | "fg.negative.default" | "colorPalette.0" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette" | "colorPalette.neutral.default" | "colorPalette.default" | "colorPalette.neutral.strong" | "colorPalette.strong" | "colorPalette.neutral.stronger" | "colorPalette.stronger" | "colorPalette.neutral.strongest" | "colorPalette.strongest" | "colorPalette.inverted.default" | "colorPalette.inverted.default-pressed" | "colorPalette.default-pressed" | "colorPalette.inverted.default-disabled" | "colorPalette.default-disabled" | "colorPalette.brand.subtlest" | "colorPalette.subtlest" | "colorPalette.brand.subtler" | "colorPalette.subtler" | "colorPalette.brand.subtle" | "colorPalette.subtle" | "colorPalette.brand.subtle-pressed" | "colorPalette.subtle-pressed" | "colorPalette.brand.default" | "colorPalette.brand.default-pressed" | "colorPalette.dim.default" | "colorPalette.neutral.subtler" | "colorPalette.neutral.subtle" | "colorPalette.negative.default" | "colorPalette.neutral.faintest" | "colorPalette.faintest" | "colorPalette.neutral.subtlest" | "colorPalette.neutral.default-disabled" | "colorPalette.positive.default"
+declare type ColorToken = "gray.0" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "grayOpacity.100" | "grayOpacity.200" | "grayOpacity.300" | "grayOpacity.400" | "grayOpacity.500" | "grayOpacity.600" | "grayOpacity.700" | "grayOpacity.800" | "grayOpacity.900" | "red" | "green" | "fill.neutral.default" | "fill.neutral.default-pressed" | "fill.neutral.default-disabled" | "fill.neutral.subtle" | "fill.neutral.subtler" | "fill.neutral.subtlest" | "fill.neutral.faintest" | "fill.brand.default" | "fill.brand.default-pressed" | "fill.brand.subtle" | "fill.brand.subtle-pressed" | "fill.brand.subtler" | "fill.brand.subtlest" | "bg.neutral.strongest" | "bg.neutral.strong" | "bg.neutral.default" | "overlay.neutral.stronger" | "overlay.neutral.strong" | "overlay.neutral.default" | "overlay.neutral.subtle" | "overlay.neutral.subtler" | "stroke.neutral.strong" | "stroke.neutral.default" | "stroke.neutral.subtle" | "stroke.neutral.subtler" | "stroke.brand.default" | "stroke.brand.subtle" | "stroke.negative.default" | "shadow.neutral.stronger" | "shadow.neutral.strong" | "shadow.neutral.default" | "shadow.neutral.subtle" | "fg.neutral.stronger" | "fg.neutral.strong" | "fg.neutral.default" | "fg.neutral.subtle" | "fg.neutral.subtler" | "fg.neutral.subtlest" | "fg.neutral.faintest" | "fg.brand.default" | "fg.brand.subtle" | "fg.brand.subtlest" | "fg.positive.default" | "fg.negative.default" | "colorPalette.0" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette" | "colorPalette.neutral.default" | "colorPalette.default" | "colorPalette.neutral.default-pressed" | "colorPalette.default-pressed" | "colorPalette.neutral.default-disabled" | "colorPalette.default-disabled" | "colorPalette.neutral.subtle" | "colorPalette.subtle" | "colorPalette.neutral.subtler" | "colorPalette.subtler" | "colorPalette.neutral.subtlest" | "colorPalette.subtlest" | "colorPalette.neutral.faintest" | "colorPalette.faintest" | "colorPalette.brand.default" | "colorPalette.brand.default-pressed" | "colorPalette.brand.subtle" | "colorPalette.brand.subtle-pressed" | "colorPalette.subtle-pressed" | "colorPalette.brand.subtler" | "colorPalette.brand.subtlest" | "colorPalette.neutral.strongest" | "colorPalette.strongest" | "colorPalette.neutral.strong" | "colorPalette.strong" | "colorPalette.neutral.stronger" | "colorPalette.stronger" | "colorPalette.negative.default" | "colorPalette.positive.default"
 
 declare type ConditionalValue<V> =
 | V
@@ -982,102 +949,107 @@ declare namespace DataType {
     type VisualBox = "border-box" | "content-box" | "padding-box";
 }
 
+declare type DecorativeIconProps = {
+    type: DecorativeIconType;
+    size?: IconSize;
+    variant?: IconStyle;
+    className?: string;
+};
+
+declare type DecorativeIconType = Exclude<IconType, SemanticIconType>;
+
 declare type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never
 
 declare type Fallback<T> = { [P in keyof T]: T[P] | readonly NonNullable<T[P]>[] };
 
-export declare function FloatingButton({ variant, className, ...props }: FloatingButtonProps): JSX.Element;
+export declare function FloatingButton({ type, className, ...props }: FloatingButtonProps): JSX.Element;
 
-export declare type FloatingButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant: FloatingButtonVariant;
+export declare type FloatingButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "aria-label"> & {
+    type: FloatingButtonType;
+    /** 텍스트 라벨이 없는 아이콘 전용 버튼이므로, 스크린 리더를 위한 접근 가능한 이름을 필수로 전달해야 해요. */
+    "aria-label": string;
 };
 
-export declare type FloatingButtonVariant = "up" | "back";
+export declare type FloatingButtonType = "up" | "back";
 
 declare type FontSizeToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
 
+declare type FontToken = "sans"
+
 declare type FontWeightToken = "regular" | "medium" | "semibold" | "bold"
 
 declare type Globals = "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset";
 
-export declare function Header({ title, onBack, actionLabel, onAction, className }: HeaderProps): JSX.Element;
+export declare function Icon({ type, size, variant, className }: IconProps): JSX.Element;
 
-export declare type HeaderProps = {
-    title: string;
-    onBack?: () => void;
-    actionLabel?: string;
-    onAction?: () => void;
-    className?: string;
-};
-
-export declare function Icon({ type, size, style, className }: IconProps): JSX.Element;
+export declare function IconButton({ size, variant, className, children, ...props }: IconButtonProps): JSX.Element;
 
-export declare function IconButton({ icon, iconStyle, iconSize, size, className, ...props }: IconButtonProps): JSX.Element;
-
-export declare type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & RecipeVariantProps<typeof iconButtonStyles> & {
-    icon: IconType;
-    iconStyle?: IconStyle;
-    iconSize?: IconSize;
+export declare type IconButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & RecipeVariantProps<typeof iconButtonStyles> & {
+    /** 텍스트 라벨이 없는 아이콘 전용 버튼이므로, 스크린 리더를 위한 접근 가능한 이름을 필수로 전달해야 해요. */
+    "aria-label": string;
 };
 
 declare const iconButtonStyles: RecipeRuntimeFn<    {
+variant: {
+clear: {
+bg: "transparent";
+color: "fg.neutral.subtle";
+_active: {
+color: "fg.neutral.subtler";
+};
+_disabled: {
+color: "fg.neutral.subtlest";
+bg: "transparent";
+_active: {
+color: "fg.neutral.subtlest";
+};
+};
+};
+fill: {
+bg: "fill.neutral.default";
+color: "fg.neutral.faintest";
+_active: {
+bg: "fill.neutral.default-pressed";
+};
+_disabled: {
+bg: "fill.neutral.default-disabled";
+color: "fg.neutral.subtler";
+_active: {
+bg: "fill.neutral.default-disabled";
+color: "fg.neutral.subtler";
+};
+};
+};
+};
 size: {
 sm: {
 width: "36px";
 height: "36px";
+borderRadius: "xs";
 };
 md: {
 width: "48px";
 height: "48px";
+borderRadius: "sm";
+};
+lg: {
+width: "54px";
+height: "54px";
+borderRadius: "sm";
 };
 };
 }>;
 
-export declare type IconProps = RecipeVariantProps<typeof iconStyles> & {
-    type: IconType;
-    size?: IconSize;
-    style?: IconStyle;
-    className?: string;
-};
+export declare type IconProps = SemanticIconProps | DecorativeIconProps;
 
-export declare type IconSize = "16px" | "20px" | "24px" | "32px";
+export declare type IconSize = "xs" | "sm" | "md" | "lg";
 
-export declare type IconStyle = "default" | "weak" | "brand" | "inverted";
-
-declare const iconStyles: RecipeRuntimeFn<    {
-iconStyle: {
-default: {
-color: "fg.neutral.default";
-};
-weak: {
-color: "fg.neutral.subtlest";
-};
-brand: {
-color: "fg.brand.default";
-};
-inverted: {
-color: "fg.inverted.default";
-};
-};
-}>;
+export declare type IconStyle = "default" | "weak" | "weakest" | "brand" | "inverted";
 
 export declare type IconType = "arrow_up" | "blank" | "cafe" | "calendar" | "car" | "check" | "chevron_down" | "chevron_left" | "chevron_right" | "chevron_up" | "clock" | "dash" | "delete" | "error" | "invalid" | "location" | "meetingroom" | "member" | "restaurant" | "search" | "share" | "studyroom" | "success" | "traffic" | "valid";
 
 declare type LetterSpacingToken = "tight" | "tighter"
 
-export declare function Modal({ open, onOpenChange, title, subtitle, confirmLabel, onConfirm, cancelLabel, onCancel, }: ModalProps): JSX.Element;
-
-export declare type ModalProps = {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    title: string;
-    subtitle?: string;
-    confirmLabel: string;
-    onConfirm: () => void;
-    cancelLabel?: string;
-    onCancel?: () => void;
-};
-
 declare interface ModernCssProperties {
     anchorName?: Globals | 'none' | DashedIdent | StringToMultiple<DashedIdent>
     anchorScope?: Globals | 'none' | 'all' | DashedIdent | StringToMultiple<DashedIdent>
@@ -1094,6 +1066,11 @@ declare interface ModernCssProperties {
     textWrapStyle?: Globals | 'auto' | 'balance' | 'pretty' | 'stable'
 }
 
+declare type NegativeToastProps = {
+    variant: "negative";
+    message: string;
+};
+
 declare type Nested<P> = P & {
     [K in Selectors]?: Nested<P>
 } & {
@@ -1102,6 +1079,12 @@ declare type Nested<P> = P & {
     [K in keyof Conditions]?: Nested<P>
 }
 
+declare type NeutralToastProps = {
+    variant: "neutral";
+    icon?: DecorativeIconType;
+    message: string;
+};
+
 declare type Number_2 = number & {}
 
 declare interface ObsoleteProperties<TLength = (string & {}) | 0, TTime = string & {}> {
@@ -2165,43 +2148,6 @@ declare type OneOrMore<T> = T | Array<T>
 
 declare type ParentSelector = `${DataAttributes | AriaAttributes} &`
 
-export declare function PinFacility({ type, selected, className }: PinFacilityProps): JSX.Element;
-
-export declare type PinFacilityProps = {
-    type: PinFacilityType;
-    selected?: boolean;
-    className?: string;
-};
-
-export declare type PinFacilityType = "studyroom" | "meetingroom" | "restaurant" | "cafe";
-
-export declare function PinLogo({ size, className }: PinLogoProps): JSX.Element;
-
-export declare type PinLogoProps = {
-    size?: PinLogoSize;
-    className?: string;
-};
-
-export declare type PinLogoSize = "small" | "large";
-
-export declare function PinLogoText({ size, text, className }: PinLogoTextProps): JSX.Element;
-
-export declare type PinLogoTextProps = {
-    size?: PinLogoSize;
-    text: string;
-    className?: string;
-};
-
-export declare function PinText({ style, text, className }: PinTextProps): JSX.Element;
-
-export declare type PinTextProps = {
-    style?: PinTextStyle;
-    text: string;
-    className?: string;
-};
-
-export declare type PinTextStyle = "brand" | "neutral";
-
 declare type PositionAreaAxis =
 | 'left'
 | 'center'
@@ -2266,6 +2212,11 @@ declare type PositionTry =
 | 'inline-end'
 | DashedIdent
 
+declare type PositiveToastProps = {
+    variant: "positive";
+    message: string;
+};
+
 declare type Pretty<T> = { [K in keyof T]: T[K] } & {}
 
 declare interface PropertiesFallback<TLength = (string & {}) | 0, TTime = string & {}>
@@ -4123,26 +4074,18 @@ T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, Slo
 
 declare type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>
 
-export declare function Search({ className, placeholder, value, defaultValue, onChange, onClear, onFocus, onBlur, ...props }: SearchProps): JSX.Element;
-
-export declare type SearchProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    onClear?: () => void;
-};
-
 declare type Selectors = AttributeSelector | ParentSelector
 
-declare type ShadowToken = "subtle" | "default" | "strong" | "stronger"
-
-export declare function ShareButton({ variant, selected, onClick, className }: ShareButtonProps): JSX.Element;
-
-export declare type ShareButtonProps = {
-    variant: ShareButtonVariant;
-    selected?: boolean;
-    onClick?: () => void;
+declare type SemanticIconProps = {
+    type: SemanticIconType;
+    size?: IconSize;
+    variant?: never;
     className?: string;
 };
 
-export declare type ShareButtonVariant = "kakao" | "link" | "more";
+declare type SemanticIconType = "check" | "valid" | "success" | "error" | "invalid";
+
+declare type ShadowToken = "strong"
 
 declare type SimplePseudos =
 | ":-khtml-any-link"
@@ -12791,7 +12734,7 @@ declare interface SystemProperties {
      *
      * @see https://developer.mozilla.org/docs/Web/CSS/font-family
      */
-    fontFamily?: ConditionalValue<CssProperties["fontFamily"] | AnyString>
+    fontFamily?: ConditionalValue<UtilityValues["fontFamily"] | CssVars | CssProperties["fontFamily"] | AnyString>
     /**
      * The **`font-feature-settings`** CSS property controls advanced typographic features in OpenType fonts.
      *
@@ -17925,28 +17868,17 @@ declare interface SystemProperties {
 
 export declare type SystemStyleObject = Omit<Nested<SystemProperties & CssVarProperties>, 'base'>
 
-export declare function TabBar({ tabs, selectedIndex, onChange, className }: TabBarProps): JSX.Element;
-
-export declare type TabBarProps = {
-    tabs: string[];
-    selectedIndex: number;
-    onChange: (index: number) => void;
-    className?: string;
-};
-
-export declare function Toast({ type, message }: ToastProps): JSX.Element;
+export declare function Toast(props: ToastProps): JSX.Element;
 
-export declare type ToastProps = {
-    type: ToastType;
-    message: string;
-};
+export declare type ToastProps = NeutralToastProps | NegativeToastProps | PositiveToastProps;
 
-export declare type ToastType = "success" | "error";
+export declare type ToastVariant = "neutral" | "negative" | "positive";
 
-declare type Token = "colors.neutral.0" | "colors.neutral.50" | "colors.neutral.100" | "colors.neutral.200" | "colors.neutral.300" | "colors.neutral.400" | "colors.neutral.500" | "colors.neutral.600" | "colors.neutral.700" | "colors.neutral.800" | "colors.neutral.900" | "colors.blue.100" | "colors.blue.200" | "colors.blue.300" | "colors.blue.400" | "colors.blue.500" | "colors.blue.600" | "colors.blue.700" | "colors.blue.800" | "colors.blue.900" | "colors.neutralOpacity.100" | "colors.neutralOpacity.200" | "colors.neutralOpacity.300" | "colors.neutralOpacity.400" | "colors.neutralOpacity.500" | "colors.neutralOpacity.600" | "colors.neutralOpacity.700" | "colors.neutralOpacity.800" | "colors.neutralOpacity.900" | "colors.red" | "colors.green" | "fontSizes.xs" | "fontSizes.sm" | "fontSizes.md" | "fontSizes.lg" | "fontSizes.xl" | "fontSizes.2xl" | "fontWeights.regular" | "fontWeights.medium" | "fontWeights.semibold" | "fontWeights.bold" | "letterSpacings.tight" | "letterSpacings.tighter" | "radii.2xs" | "radii.xs" | "radii.sm" | "radii.md" | "radii.lg" | "radii.xl" | "radii.full" | "shadows.subtle" | "shadows.default" | "shadows.strong" | "shadows.stronger" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "breakpoints.2xl" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "sizes.breakpoint-2xl" | "colors.fill.neutral.default" | "colors.fill.neutral.strong" | "colors.fill.neutral.stronger" | "colors.fill.neutral.strongest" | "colors.fill.inverted.default" | "colors.fill.inverted.default-pressed" | "colors.fill.inverted.default-disabled" | "colors.fill.brand.subtlest" | "colors.fill.brand.subtler" | "colors.fill.brand.subtle" | "colors.fill.brand.subtle-pressed" | "colors.fill.brand.default" | "colors.fill.brand.default-pressed" | "colors.bg.neutral.default" | "colors.bg.neutral.strong" | "colors.bg.dim.default" | "colors.stroke.neutral.subtler" | "colors.stroke.neutral.subtle" | "colors.stroke.neutral.default" | "colors.stroke.neutral.strong" | "colors.stroke.brand.subtle" | "colors.stroke.brand.default" | "colors.stroke.negative.default" | "colors.shadow.subtle" | "colors.shadow.default" | "colors.shadow.strong" | "colors.shadow.stronger" | "colors.fg.neutral.faintest" | "colors.fg.neutral.subtlest" | "colors.fg.neutral.subtler" | "colors.fg.neutral.subtle" | "colors.fg.neutral.default" | "colors.fg.neutral.strong" | "colors.fg.neutral.default-disabled" | "colors.fg.inverted.default" | "colors.fg.brand.subtlest" | "colors.fg.brand.default" | "colors.fg.positive.default" | "colors.fg.negative.default" | "colors.colorPalette.0" | "colors.colorPalette.50" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette" | "colors.colorPalette.neutral.default" | "colors.colorPalette.default" | "colors.colorPalette.neutral.strong" | "colors.colorPalette.strong" | "colors.colorPalette.neutral.stronger" | "colors.colorPalette.stronger" | "colors.colorPalette.neutral.strongest" | "colors.colorPalette.strongest" | "colors.colorPalette.inverted.default" | "colors.colorPalette.inverted.default-pressed" | "colors.colorPalette.default-pressed" | "colors.colorPalette.inverted.default-disabled" | "colors.colorPalette.default-disabled" | "colors.colorPalette.brand.subtlest" | "colors.colorPalette.subtlest" | "colors.colorPalette.brand.subtler" | "colors.colorPalette.subtler" | "colors.colorPalette.brand.subtle" | "colors.colorPalette.subtle" | "colors.colorPalette.brand.subtle-pressed" | "colors.colorPalette.subtle-pressed" | "colors.colorPalette.brand.default" | "colors.colorPalette.brand.default-pressed" | "colors.colorPalette.dim.default" | "colors.colorPalette.neutral.subtler" | "colors.colorPalette.neutral.subtle" | "colors.colorPalette.negative.default" | "colors.colorPalette.neutral.faintest" | "colors.colorPalette.faintest" | "colors.colorPalette.neutral.subtlest" | "colors.colorPalette.neutral.default-disabled" | "colors.colorPalette.positive.default"
+declare type Token = "colors.gray.0" | "colors.gray.50" | "colors.gray.100" | "colors.gray.200" | "colors.gray.300" | "colors.gray.400" | "colors.gray.500" | "colors.gray.600" | "colors.gray.700" | "colors.gray.800" | "colors.gray.900" | "colors.blue.100" | "colors.blue.200" | "colors.blue.300" | "colors.blue.400" | "colors.blue.500" | "colors.blue.600" | "colors.blue.700" | "colors.blue.800" | "colors.blue.900" | "colors.grayOpacity.100" | "colors.grayOpacity.200" | "colors.grayOpacity.300" | "colors.grayOpacity.400" | "colors.grayOpacity.500" | "colors.grayOpacity.600" | "colors.grayOpacity.700" | "colors.grayOpacity.800" | "colors.grayOpacity.900" | "colors.red" | "colors.green" | "fonts.sans" | "fontSizes.xs" | "fontSizes.sm" | "fontSizes.md" | "fontSizes.lg" | "fontSizes.xl" | "fontSizes.2xl" | "fontWeights.regular" | "fontWeights.medium" | "fontWeights.semibold" | "fontWeights.bold" | "letterSpacings.tight" | "letterSpacings.tighter" | "radii.2xs" | "radii.xs" | "radii.sm" | "radii.md" | "radii.lg" | "radii.xl" | "radii.full" | "shadows.strong" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "breakpoints.2xl" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "sizes.breakpoint-2xl" | "colors.fill.neutral.default" | "colors.fill.neutral.default-pressed" | "colors.fill.neutral.default-disabled" | "colors.fill.neutral.subtle" | "colors.fill.neutral.subtler" | "colors.fill.neutral.subtlest" | "colors.fill.neutral.faintest" | "colors.fill.brand.default" | "colors.fill.brand.default-pressed" | "colors.fill.brand.subtle" | "colors.fill.brand.subtle-pressed" | "colors.fill.brand.subtler" | "colors.fill.brand.subtlest" | "colors.bg.neutral.strongest" | "colors.bg.neutral.strong" | "colors.bg.neutral.default" | "colors.overlay.neutral.stronger" | "colors.overlay.neutral.strong" | "colors.overlay.neutral.default" | "colors.overlay.neutral.subtle" | "colors.overlay.neutral.subtler" | "colors.stroke.neutral.strong" | "colors.stroke.neutral.default" | "colors.stroke.neutral.subtle" | "colors.stroke.neutral.subtler" | "colors.stroke.brand.default" | "colors.stroke.brand.subtle" | "colors.stroke.negative.default" | "colors.shadow.neutral.stronger" | "colors.shadow.neutral.strong" | "colors.shadow.neutral.default" | "colors.shadow.neutral.subtle" | "colors.fg.neutral.stronger" | "colors.fg.neutral.strong" | "colors.fg.neutral.default" | "colors.fg.neutral.subtle" | "colors.fg.neutral.subtler" | "colors.fg.neutral.subtlest" | "colors.fg.neutral.faintest" | "colors.fg.brand.default" | "colors.fg.brand.subtle" | "colors.fg.brand.subtlest" | "colors.fg.positive.default" | "colors.fg.negative.default" | "colors.colorPalette.0" | "colors.colorPalette.50" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette" | "colors.colorPalette.neutral.default" | "colors.colorPalette.default" | "colors.colorPalette.neutral.default-pressed" | "colors.colorPalette.default-pressed" | "colors.colorPalette.neutral.default-disabled" | "colors.colorPalette.default-disabled" | "colors.colorPalette.neutral.subtle" | "colors.colorPalette.subtle" | "colors.colorPalette.neutral.subtler" | "colors.colorPalette.subtler" | "colors.colorPalette.neutral.subtlest" | "colors.colorPalette.subtlest" | "colors.colorPalette.neutral.faintest" | "colors.colorPalette.faintest" | "colors.colorPalette.brand.default" | "colors.colorPalette.brand.default-pressed" | "colors.colorPalette.brand.subtle" | "colors.colorPalette.brand.subtle-pressed" | "colors.colorPalette.subtle-pressed" | "colors.colorPalette.brand.subtler" | "colors.colorPalette.brand.subtlest" | "colors.colorPalette.neutral.strongest" | "colors.colorPalette.strongest" | "colors.colorPalette.neutral.strong" | "colors.colorPalette.strong" | "colors.colorPalette.neutral.stronger" | "colors.colorPalette.stronger" | "colors.colorPalette.negative.default" | "colors.colorPalette.positive.default"
 
 declare type Tokens = {
     		colors: ColorToken
+    		fonts: FontToken
     		fontSizes: FontSizeToken
     		fontWeights: FontWeightToken
     		letterSpacings: LetterSpacingToken
@@ -17994,6 +17926,7 @@ declare interface UtilityValues {
     	maxHeight: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
     	maxBlockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
     	color: Tokens["colors"];
+    	fontFamily: Tokens["fonts"];
     	fontSize: Tokens["fontSizes"];
     	fontWeight: Tokens["fontWeights"];
     	fontSmoothing: "antialiased" | "subpixel-antialiased";
@@ -18065,8 +17998,8 @@ declare interface UtilityValues {
     	srOnly: boolean;
     	debug: boolean;
     	containerName: CssProperties["containerName"];
-    	colorPalette: "neutral" | "blue" | "neutralOpacity" | "red" | "green" | "fill" | "fill.neutral" | "fill.inverted" | "fill.brand" | "bg" | "bg.neutral" | "bg.dim" | "stroke" | "stroke.neutral" | "stroke.brand" | "stroke.negative" | "shadow" | "fg" | "fg.neutral" | "fg.inverted" | "fg.brand" | "fg.positive" | "fg.negative";
-    	textStyle: "head1" | "head2" | "head3" | "title1" | "title2" | "title3" | "body1" | "body2" | "body3" | "body4" | "body5" | "caption1" | "caption2" | "caption3";
+    	colorPalette: "gray" | "blue" | "grayOpacity" | "red" | "green" | "fill" | "fill.neutral" | "fill.brand" | "bg" | "bg.neutral" | "overlay" | "overlay.neutral" | "stroke" | "stroke.neutral" | "stroke.brand" | "stroke.negative" | "shadow" | "shadow.neutral" | "fg" | "fg.neutral" | "fg.brand" | "fg.positive" | "fg.negative";
+    	textStyle: "head1" | "head2" | "head3" | "head4" | "title1" | "title2" | "title3" | "body1" | "body2" | "body3" | "body4" | "body5" | "caption1" | "caption2" | "caption3";
 }
 
 declare interface VendorLonghandProperties<TLength = (string & {}) | 0, TTime = string & {}> {
@@ -19985,6 +19918,6 @@ declare interface VendorShorthandProperties<TLength = (string & {}) | 0, TTime =
 
 declare type VendorShorthandPropertiesFallback<TLength = (string & {}) | 0, TTime = string & {}> = Fallback<VendorShorthandProperties<TLength, TTime>>;
 
-export declare const version = "0.1.0";
+export declare const version = "0.1.2";
 
 export { }