diff --git a/src/components/atoms/ToggleButtonGroup/ToggleButtonGroup.tsx b/src/components/atoms/ToggleButtonGroup/ToggleButtonGroup.tsx index d0994d6..0ce9e3f 100644 --- a/src/components/atoms/ToggleButtonGroup/ToggleButtonGroup.tsx +++ b/src/components/atoms/ToggleButtonGroup/ToggleButtonGroup.tsx @@ -42,6 +42,10 @@ export interface ToggleButtonGroupProps extends Omit< error?: boolean; /** Whether a selection is required */ required?: boolean; + /** Text alignment inside each option button */ + align?: 'start' | 'center'; + /** Layout direction for the button group */ + direction?: 'row' | 'column'; /** MUI sx prop for the root FormControl */ sx?: SxProps; } @@ -84,6 +88,8 @@ export const ToggleButtonGroup = React.forwardRef diff --git a/src/components/molecules/FilterPanel/FilterPanel.stories.tsx b/src/components/molecules/FilterPanel/FilterPanel.stories.tsx index 978ab25..80af134 100644 --- a/src/components/molecules/FilterPanel/FilterPanel.stories.tsx +++ b/src/components/molecules/FilterPanel/FilterPanel.stories.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { FilterPanel } from './FilterPanel'; import Box from '@mui/material/Box'; diff --git a/src/components/molecules/ServiceOption/ServiceOption.stories.tsx b/src/components/molecules/ServiceOption/ServiceOption.stories.tsx index 038de86..a5a4339 100644 --- a/src/components/molecules/ServiceOption/ServiceOption.stories.tsx +++ b/src/components/molecules/ServiceOption/ServiceOption.stories.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { ServiceOption } from './ServiceOption'; import Box from '@mui/material/Box'; diff --git a/src/components/organisms/FuneralFinder/FuneralFinderV3.stories.tsx b/src/components/organisms/FuneralFinder/FuneralFinderV3.stories.tsx index 096665c..70fbec5 100644 --- a/src/components/organisms/FuneralFinder/FuneralFinderV3.stories.tsx +++ b/src/components/organisms/FuneralFinder/FuneralFinderV3.stories.tsx @@ -5,6 +5,7 @@ import { FuneralFinderV3 } from './FuneralFinderV3'; const meta: Meta = { title: 'Organisms/FuneralFinder', component: FuneralFinderV3, + tags: ['autodocs'], parameters: { layout: 'padded', }, diff --git a/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx b/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx index 97d8d42..c7dde09 100644 --- a/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx +++ b/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx @@ -125,7 +125,8 @@ const StatusCard = React.forwardRef< cursor: 'pointer', fontFamily: 'inherit', textAlign: 'center', - transition: 'border-color 200ms ease, background-color 200ms ease, transform 100ms ease', + transition: + 'border-color 150ms ease-in-out, background-color 150ms ease-in-out, transform 150ms ease-in-out', '&:hover': { borderColor: selected ? 'var(--fa-color-border-brand, #BA834E)' diff --git a/src/components/organisms/Navigation/Navigation.tsx b/src/components/organisms/Navigation/Navigation.tsx index 539a057..0f6c50e 100644 --- a/src/components/organisms/Navigation/Navigation.tsx +++ b/src/components/organisms/Navigation/Navigation.tsx @@ -116,13 +116,23 @@ export const Navigation = React.forwardRef( )} { + e.preventDefault(); + onLogoClick(); + } + : undefined + } sx={{ display: 'flex', alignItems: 'center', cursor: onLogoClick ? 'pointer' : 'default', + textDecoration: 'none', + color: 'inherit', }} - role={onLogoClick ? 'link' : undefined} aria-label={onLogoClick ? 'Home' : undefined} > {logo} diff --git a/src/components/pages/CemeteryStep/CemeteryStep.tsx b/src/components/pages/CemeteryStep/CemeteryStep.tsx index af3e912..6c04ece 100644 --- a/src/components/pages/CemeteryStep/CemeteryStep.tsx +++ b/src/components/pages/CemeteryStep/CemeteryStep.tsx @@ -130,7 +130,7 @@ export const CemeteryStep: React.FC = ({ sx={sx} > {/* Page heading */} - + Cemetery diff --git a/src/components/pages/CoffinsStep/CoffinsStep.tsx b/src/components/pages/CoffinsStep/CoffinsStep.tsx index 0ff2655..a5011a0 100644 --- a/src/components/pages/CoffinsStep/CoffinsStep.tsx +++ b/src/components/pages/CoffinsStep/CoffinsStep.tsx @@ -419,7 +419,7 @@ export const CoffinsStep: React.FC = ({ {/* ─── Sidebar (left panel) ─── */} {/* Heading */} - + Choose a coffin diff --git a/src/components/pages/CrematoriumStep/CrematoriumStep.tsx b/src/components/pages/CrematoriumStep/CrematoriumStep.tsx index 8eb8893..c5f5644 100644 --- a/src/components/pages/CrematoriumStep/CrematoriumStep.tsx +++ b/src/components/pages/CrematoriumStep/CrematoriumStep.tsx @@ -124,7 +124,7 @@ export const CrematoriumStep: React.FC = ({ sx={sx} > {/* Page heading */} - + Crematorium diff --git a/src/components/pages/DateTimeStep/DateTimeStep.tsx b/src/components/pages/DateTimeStep/DateTimeStep.tsx index b149788..1fcac04 100644 --- a/src/components/pages/DateTimeStep/DateTimeStep.tsx +++ b/src/components/pages/DateTimeStep/DateTimeStep.tsx @@ -161,7 +161,7 @@ export const DateTimeStep: React.FC = ({ sx={sx} > {/* Page heading */} - + A few important details diff --git a/src/components/pages/ExtrasStep/ExtrasStep.tsx b/src/components/pages/ExtrasStep/ExtrasStep.tsx index 01d7a97..0154620 100644 --- a/src/components/pages/ExtrasStep/ExtrasStep.tsx +++ b/src/components/pages/ExtrasStep/ExtrasStep.tsx @@ -145,7 +145,7 @@ export const ExtrasStep: React.FC = ({ sx={sx} > {/* Page heading */} - + Optional extras diff --git a/src/components/pages/IncludedServicesStep/IncludedServicesStep.tsx b/src/components/pages/IncludedServicesStep/IncludedServicesStep.tsx index 3c690a2..54683fd 100644 --- a/src/components/pages/IncludedServicesStep/IncludedServicesStep.tsx +++ b/src/components/pages/IncludedServicesStep/IncludedServicesStep.tsx @@ -109,7 +109,7 @@ export const IncludedServicesStep: React.FC = ({ sx={sx} > {/* Page heading */} - + Included services diff --git a/src/components/pages/IntroStep/IntroStep.tsx b/src/components/pages/IntroStep/IntroStep.tsx index 7003809..3420c17 100644 --- a/src/components/pages/IntroStep/IntroStep.tsx +++ b/src/components/pages/IntroStep/IntroStep.tsx @@ -99,7 +99,7 @@ export const IntroStep: React.FC = ({ return ( {/* Page heading — receives focus on entry for screen readers */} - + Let's get started diff --git a/src/components/pages/PaymentStep/PaymentStep.tsx b/src/components/pages/PaymentStep/PaymentStep.tsx index 36d0cf6..48fb731 100644 --- a/src/components/pages/PaymentStep/PaymentStep.tsx +++ b/src/components/pages/PaymentStep/PaymentStep.tsx @@ -125,17 +125,19 @@ export const PaymentStep: React.FC = ({ sx={sx} > {/* Page heading */} - + Payment - - + + Your payment is processed securely. You won't be charged more than the total shown. + + {/* ─── Amount display ─── */} = ({ onChange={(v) => onChange({ ...values, paymentPlan: v as PaymentPlan })} error={!!errors?.paymentPlan} helperText={errors?.paymentPlan} + align="center" required fullWidth /> @@ -205,6 +208,7 @@ export const PaymentStep: React.FC = ({ onChange={(v) => onChange({ ...values, paymentMethod: v as PaymentMethod })} error={!!errors?.paymentMethod} helperText={errors?.paymentMethod} + direction="column" required fullWidth /> @@ -297,7 +301,7 @@ export const PaymentStep: React.FC = ({ } - sx={{ mb: 1, alignItems: 'flex-start', '& .MuiCheckbox-root': { pt: 0.5 } }} + sx={{ mb: 1, alignItems: 'center' }} /> {errors?.termsAccepted && ( = ({ sx={sx} > {/* Header */} - + Review your plan @@ -709,16 +709,11 @@ export const SummaryStep: React.FC = ({ {onSaveAndExit && ( - + + + )} {/* Share dialog */} diff --git a/src/components/pages/VenueServicesStep/VenueServicesStep.tsx b/src/components/pages/VenueServicesStep/VenueServicesStep.tsx index 7f0e15e..880897c 100644 --- a/src/components/pages/VenueServicesStep/VenueServicesStep.tsx +++ b/src/components/pages/VenueServicesStep/VenueServicesStep.tsx @@ -129,7 +129,7 @@ export const VenueServicesStep: React.FC = ({ sx={sx} > {/* Page heading */} - + Funeral Service diff --git a/src/theme/generated/tokens.d.ts b/src/theme/generated/tokens.d.ts new file mode 100644 index 0000000..7a921ce --- /dev/null +++ b/src/theme/generated/tokens.d.ts @@ -0,0 +1,401 @@ +/** + * Do not edit directly, this file was auto-generated. + */ +export declare const BadgeHeightSm: string; +export declare const BadgeHeightMd: string; +export declare const BadgeHeightLg: string; +export declare const BadgePaddingXSm: string; +export declare const BadgePaddingXMd: string; +export declare const BadgePaddingXLg: string; +export declare const BadgeFontSizeSm: string; +export declare const BadgeFontSizeMd: string; +export declare const BadgeFontSizeLg: string; +export declare const BadgeIconSizeSm: string; +export declare const BadgeIconSizeMd: string; +export declare const BadgeIconSizeLg: string; +export declare const BadgeIconGapDefault: string; +export declare const BadgeBorderRadiusDefault: string; +export declare const ButtonHeightXs: string; +export declare const ButtonHeightSm: string; +export declare const ButtonHeightMd: string; +export declare const ButtonHeightLg: string; +export declare const ButtonPaddingXXs: string; +export declare const ButtonPaddingXSm: string; +export declare const ButtonPaddingXMd: string; +export declare const ButtonPaddingXLg: string; +export declare const ButtonPaddingYXs: string; +export declare const ButtonPaddingYSm: string; +export declare const ButtonPaddingYMd: string; +export declare const ButtonPaddingYLg: string; +export declare const ButtonFontSizeXs: string; +export declare const ButtonFontSizeSm: string; +export declare const ButtonFontSizeMd: string; +export declare const ButtonFontSizeLg: string; +export declare const ButtonIconSizeXs: string; +export declare const ButtonIconSizeSm: string; +export declare const ButtonIconSizeMd: string; +export declare const ButtonIconSizeLg: string; +export declare const ButtonIconGapXs: string; +export declare const ButtonIconGapSm: string; +export declare const ButtonIconGapMd: string; +export declare const ButtonIconGapLg: string; +export declare const ButtonBorderRadiusDefault: string; +export declare const CardBorderRadiusDefault: string; +export declare const CardPaddingDefault: string; +export declare const CardPaddingCompact: string; +export declare const CardShadowDefault: string; +export declare const CardShadowHover: string; +export declare const CardBorderDefault: string; +export declare const CardBorderSelected: string; +export declare const CardBackgroundDefault: string; +export declare const CardBackgroundHover: string; +export declare const CardBackgroundSelected: string; +export declare const ChipHeightSm: string; +export declare const ChipHeightMd: string; +export declare const ChipPaddingXSm: string; +export declare const ChipPaddingXMd: string; +export declare const ChipFontSizeSm: string; +export declare const ChipFontSizeMd: string; +export declare const ChipIconSizeSm: string; +export declare const ChipIconSizeMd: string; +export declare const ChipDeleteIconSizeSm: string; +export declare const ChipDeleteIconSizeMd: string; +export declare const ChipIconGapDefault: string; +export declare const ChipBorderRadiusDefault: string; +export declare const InputHeightSm: string; +export declare const InputHeightMd: string; +export declare const InputPaddingXDefault: string; +export declare const InputPaddingYSm: string; +export declare const InputPaddingYMd: string; +export declare const InputFontSizeDefault: string; +export declare const InputBorderRadiusDefault: string; +export declare const InputGapDefault: string; +export declare const InputIconSizeDefault: string; +export declare const ProviderCardImageHeight: string; +export declare const ProviderCardLogoSize: string; +export declare const ProviderCardLogoBorderRadius: string; +export declare const ProviderCardContentPadding: string; +export declare const ProviderCardContentGap: string; +export declare const RadioSizeDefault: string; +export declare const RadioDotSizeDefault: string; +export declare const SwitchTrackWidth: string; +export declare const SwitchTrackHeight: string; +export declare const SwitchTrackBorderRadius: string; +export declare const SwitchThumbSize: string; +export declare const VenueCardImageHeight: string; +export declare const VenueCardContentPadding: string; +export declare const VenueCardContentGap: string; +export declare const ColorBrand50: string; +export declare const ColorBrand100: string; +export declare const ColorBrand200: string; +export declare const ColorBrand300: string; +export declare const ColorBrand400: string; +export declare const ColorBrand500: string; +export declare const ColorBrand600: string; +export declare const ColorBrand700: string; +export declare const ColorBrand800: string; +export declare const ColorBrand900: string; +export declare const ColorBrand950: string; +export declare const ColorSage50: string; +export declare const ColorSage100: string; +export declare const ColorSage200: string; +export declare const ColorSage300: string; +export declare const ColorSage400: string; +export declare const ColorSage500: string; +export declare const ColorSage600: string; +export declare const ColorSage700: string; +export declare const ColorSage800: string; +export declare const ColorSage900: string; +export declare const ColorSage950: string; +export declare const ColorNeutral50: string; +export declare const ColorNeutral100: string; +export declare const ColorNeutral200: string; +export declare const ColorNeutral300: string; +export declare const ColorNeutral400: string; +export declare const ColorNeutral500: string; +export declare const ColorNeutral600: string; +export declare const ColorNeutral700: string; +export declare const ColorNeutral800: string; +export declare const ColorNeutral900: string; +export declare const ColorNeutral950: string; +export declare const ColorRed50: string; +export declare const ColorRed100: string; +export declare const ColorRed200: string; +export declare const ColorRed300: string; +export declare const ColorRed400: string; +export declare const ColorRed500: string; +export declare const ColorRed600: string; +export declare const ColorRed700: string; +export declare const ColorRed800: string; +export declare const ColorRed900: string; +export declare const ColorRed950: string; +export declare const ColorAmber50: string; +export declare const ColorAmber100: string; +export declare const ColorAmber200: string; +export declare const ColorAmber300: string; +export declare const ColorAmber400: string; +export declare const ColorAmber500: string; +export declare const ColorAmber600: string; +export declare const ColorAmber700: string; +export declare const ColorAmber800: string; +export declare const ColorAmber900: string; +export declare const ColorAmber950: string; +export declare const ColorGreen50: string; +export declare const ColorGreen100: string; +export declare const ColorGreen200: string; +export declare const ColorGreen300: string; +export declare const ColorGreen400: string; +export declare const ColorGreen500: string; +export declare const ColorGreen600: string; +export declare const ColorGreen700: string; +export declare const ColorGreen800: string; +export declare const ColorGreen900: string; +export declare const ColorGreen950: string; +export declare const ColorBlue50: string; +export declare const ColorBlue100: string; +export declare const ColorBlue200: string; +export declare const ColorBlue300: string; +export declare const ColorBlue400: string; +export declare const ColorBlue500: string; +export declare const ColorBlue600: string; +export declare const ColorBlue700: string; +export declare const ColorBlue800: string; +export declare const ColorBlue900: string; +export declare const ColorBlue950: string; +export declare const ColorWhite: string; +export declare const ColorBlack: string; +export declare const ColorTextPrimary: string; +export declare const ColorTextSecondary: string; +export declare const ColorTextTertiary: string; +export declare const ColorTextDisabled: string; +export declare const ColorTextInverse: string; +export declare const ColorTextBrand: string; +export declare const ColorTextError: string; +export declare const ColorTextSuccess: string; +export declare const ColorTextWarning: string; +export declare const ColorSurfaceDefault: string; +export declare const ColorSurfaceSubtle: string; +export declare const ColorSurfaceRaised: string; +export declare const ColorSurfaceWarm: string; +export declare const ColorSurfaceCool: string; +export declare const ColorSurfaceOverlay: string; +export declare const ColorBorderDefault: string; +export declare const ColorBorderStrong: string; +export declare const ColorBorderSubtle: string; +export declare const ColorBorderBrand: string; +export declare const ColorBorderError: string; +export declare const ColorBorderSuccess: string; +export declare const ColorInteractiveDefault: string; +export declare const ColorInteractiveHover: string; +export declare const ColorInteractiveActive: string; +export declare const ColorInteractiveDisabled: string; +export declare const ColorInteractiveFocus: string; +export declare const ColorInteractiveSecondary: string; +export declare const ColorInteractiveSecondaryHover: string; +export declare const ColorFeedbackSuccess: string; +export declare const ColorFeedbackSuccessSubtle: string; +export declare const ColorFeedbackWarning: string; +export declare const ColorFeedbackWarningSubtle: string; +export declare const ColorFeedbackError: string; +export declare const ColorFeedbackErrorSubtle: string; +export declare const ColorFeedbackInfo: string; +export declare const ColorFeedbackInfoSubtle: string; +export declare const ShadowSm: string; +export declare const ShadowMd: string; +export declare const ShadowLg: string; +export declare const ShadowXl: string; +export declare const OpacityDisabled: number; +export declare const OpacityHover: number; +export declare const OpacityOverlay: number; +export declare const Spacing1: string; +export declare const Spacing2: string; +export declare const Spacing3: string; +export declare const Spacing4: string; +export declare const Spacing5: string; +export declare const Spacing6: string; +export declare const Spacing8: string; +export declare const Spacing10: string; +export declare const Spacing12: string; +export declare const Spacing16: string; +export declare const Spacing20: string; +export declare const Spacing05: string; +export declare const SpacingComponentXs: string; +export declare const SpacingComponentSm: string; +export declare const SpacingComponentMd: string; +export declare const SpacingComponentLg: string; +export declare const SpacingLayoutGutter: string; +export declare const SpacingLayoutGutterDesktop: string; +export declare const SpacingLayoutSection: string; +export declare const SpacingLayoutPage: string; +export declare const SpacingLayoutPagePadding: string; +export declare const SpacingLayoutPagePaddingDesktop: string; +export declare const BorderRadiusNone: string; +export declare const BorderRadiusSm: string; +export declare const BorderRadiusMd: string; +export declare const BorderRadiusLg: string; +export declare const BorderRadiusXl: string; +export declare const BorderRadiusFull: string; +export declare const FontFamilyBody: string; +export declare const FontFamilyDisplay: string; +export declare const FontFamilyMono: string; +export declare const FontSize2xs: string; +export declare const FontSizeXs: string; +export declare const FontSizeSm: string; +export declare const FontSizeBase: string; +export declare const FontSizeMd: string; +export declare const FontSizeLg: string; +export declare const FontSizeXl: string; +export declare const FontSize2xl: string; +export declare const FontSize3xl: string; +export declare const FontSize4xl: string; +export declare const FontSizeDisplay1: string; +export declare const FontSizeDisplay2: string; +export declare const FontSizeDisplay3: string; +export declare const FontSizeDisplaySm: string; +export declare const FontSizeDisplayHero: string; +export declare const FontSizeMobileDisplayHero: string; +export declare const FontSizeMobileDisplay1: string; +export declare const FontSizeMobileDisplay2: string; +export declare const FontSizeMobileDisplay3: string; +export declare const FontSizeMobileDisplaySm: string; +export declare const FontSizeMobileH1: string; +export declare const FontSizeMobileH2: string; +export declare const FontSizeMobileH3: string; +export declare const FontSizeMobileH4: string; +export declare const FontSizeMobileH5: string; +export declare const FontSizeMobileH6: string; +export declare const FontWeightRegular: number; +export declare const FontWeightMedium: number; +export declare const FontWeightSemibold: number; +export declare const FontWeightBold: number; +export declare const LineHeightTight: number; +export declare const LineHeightSnug: number; +export declare const LineHeightNormal: number; +export declare const LineHeightRelaxed: number; +export declare const LetterSpacingTighter: string; +export declare const LetterSpacingTight: string; +export declare const LetterSpacingNormal: string; +export declare const LetterSpacingWide: string; +export declare const LetterSpacingWider: string; +export declare const LetterSpacingWidest: string; +export declare const TypographyDisplayHeroFontFamily: string; +export declare const TypographyDisplayHeroFontSize: string; +export declare const TypographyDisplayHeroFontSizeMobile: string; +export declare const TypographyDisplayHeroFontWeight: number; +export declare const TypographyDisplayHeroLineHeight: number; +export declare const TypographyDisplayHeroLetterSpacing: string; +export declare const TypographyDisplay1FontFamily: string; +export declare const TypographyDisplay1FontSize: string; +export declare const TypographyDisplay1FontSizeMobile: string; +export declare const TypographyDisplay1FontWeight: number; +export declare const TypographyDisplay1LineHeight: number; +export declare const TypographyDisplay1LetterSpacing: string; +export declare const TypographyDisplay2FontFamily: string; +export declare const TypographyDisplay2FontSize: string; +export declare const TypographyDisplay2FontSizeMobile: string; +export declare const TypographyDisplay2FontWeight: number; +export declare const TypographyDisplay2LineHeight: number; +export declare const TypographyDisplay2LetterSpacing: string; +export declare const TypographyDisplay3FontFamily: string; +export declare const TypographyDisplay3FontSize: string; +export declare const TypographyDisplay3FontSizeMobile: string; +export declare const TypographyDisplay3FontWeight: number; +export declare const TypographyDisplay3LineHeight: number; +export declare const TypographyDisplay3LetterSpacing: string; +export declare const TypographyDisplaySmFontFamily: string; +export declare const TypographyDisplaySmFontSize: string; +export declare const TypographyDisplaySmFontSizeMobile: string; +export declare const TypographyDisplaySmFontWeight: number; +export declare const TypographyDisplaySmLineHeight: number; +export declare const TypographyDisplaySmLetterSpacing: string; +export declare const TypographyH1FontFamily: string; +export declare const TypographyH1FontSize: string; +export declare const TypographyH1FontSizeMobile: string; +export declare const TypographyH1FontWeight: number; +export declare const TypographyH1LineHeight: number; +export declare const TypographyH1LetterSpacing: string; +export declare const TypographyH2FontFamily: string; +export declare const TypographyH2FontSize: string; +export declare const TypographyH2FontSizeMobile: string; +export declare const TypographyH2FontWeight: number; +export declare const TypographyH2LineHeight: number; +export declare const TypographyH2LetterSpacing: string; +export declare const TypographyH3FontFamily: string; +export declare const TypographyH3FontSize: string; +export declare const TypographyH3FontSizeMobile: string; +export declare const TypographyH3FontWeight: number; +export declare const TypographyH3LineHeight: number; +export declare const TypographyH3LetterSpacing: string; +export declare const TypographyH4FontFamily: string; +export declare const TypographyH4FontSize: string; +export declare const TypographyH4FontSizeMobile: string; +export declare const TypographyH4FontWeight: number; +export declare const TypographyH4LineHeight: number; +export declare const TypographyH4LetterSpacing: string; +export declare const TypographyH5FontFamily: string; +export declare const TypographyH5FontSize: string; +export declare const TypographyH5FontSizeMobile: string; +export declare const TypographyH5FontWeight: number; +export declare const TypographyH5LineHeight: number; +export declare const TypographyH5LetterSpacing: string; +export declare const TypographyH6FontFamily: string; +export declare const TypographyH6FontSize: string; +export declare const TypographyH6FontSizeMobile: string; +export declare const TypographyH6FontWeight: number; +export declare const TypographyH6LineHeight: number; +export declare const TypographyH6LetterSpacing: string; +export declare const TypographyBodyLgFontFamily: string; +export declare const TypographyBodyLgFontSize: string; +export declare const TypographyBodyLgFontWeight: number; +export declare const TypographyBodyLgLineHeight: number; +export declare const TypographyBodyLgLetterSpacing: string; +export declare const TypographyBodyFontFamily: string; +export declare const TypographyBodyFontSize: string; +export declare const TypographyBodyFontWeight: number; +export declare const TypographyBodyLineHeight: number; +export declare const TypographyBodyLetterSpacing: string; +export declare const TypographyBodySmFontFamily: string; +export declare const TypographyBodySmFontSize: string; +export declare const TypographyBodySmFontWeight: number; +export declare const TypographyBodySmLineHeight: number; +export declare const TypographyBodySmLetterSpacing: string; +export declare const TypographyBodyXsFontFamily: string; +export declare const TypographyBodyXsFontSize: string; +export declare const TypographyBodyXsFontWeight: number; +export declare const TypographyBodyXsLineHeight: number; +export declare const TypographyBodyXsLetterSpacing: string; +export declare const TypographyLabelLgFontFamily: string; +export declare const TypographyLabelLgFontSize: string; +export declare const TypographyLabelLgFontWeight: number; +export declare const TypographyLabelLgLineHeight: number; +export declare const TypographyLabelLgLetterSpacing: string; +export declare const TypographyLabelFontFamily: string; +export declare const TypographyLabelFontSize: string; +export declare const TypographyLabelFontWeight: number; +export declare const TypographyLabelLineHeight: number; +export declare const TypographyLabelLetterSpacing: string; +export declare const TypographyLabelSmFontFamily: string; +export declare const TypographyLabelSmFontSize: string; +export declare const TypographyLabelSmFontWeight: number; +export declare const TypographyLabelSmLineHeight: number; +export declare const TypographyLabelSmLetterSpacing: string; +export declare const TypographyCaptionFontFamily: string; +export declare const TypographyCaptionFontSize: string; +export declare const TypographyCaptionFontWeight: number; +export declare const TypographyCaptionLineHeight: number; +export declare const TypographyCaptionLetterSpacing: string; +export declare const TypographyCaptionSmFontFamily: string; +export declare const TypographyCaptionSmFontSize: string; +export declare const TypographyCaptionSmFontWeight: number; +export declare const TypographyCaptionSmLineHeight: number; +export declare const TypographyCaptionSmLetterSpacing: string; +export declare const TypographyOverlineFontFamily: string; +export declare const TypographyOverlineFontSize: string; +export declare const TypographyOverlineFontWeight: number; +export declare const TypographyOverlineLineHeight: number; +export declare const TypographyOverlineLetterSpacing: string; +export declare const TypographyOverlineSmFontFamily: string; +export declare const TypographyOverlineSmFontSize: string; +export declare const TypographyOverlineSmFontWeight: number; +export declare const TypographyOverlineSmLineHeight: number; +export declare const TypographyOverlineSmLetterSpacing: string; diff --git a/style-dictionary/config.js b/style-dictionary/config.js index 355eb02..8a42612 100644 --- a/style-dictionary/config.js +++ b/style-dictionary/config.js @@ -51,3 +51,25 @@ const sd = new StyleDictionary({ }); await sd.buildAllPlatforms(); + +// Generate TypeScript declarations for the JS token output +import { readFileSync, writeFileSync } from 'fs'; + +const jsPath = 'src/theme/generated/tokens.js'; +const dtsPath = 'src/theme/generated/tokens.d.ts'; + +const jsContent = readFileSync(jsPath, 'utf-8') + .replace(/=\n\s+/g, '= '); // join continuation lines + +const declarations = ['/**', ' * Do not edit directly, this file was auto-generated.', ' */']; + +for (const line of jsContent.split('\n')) { + const m = line.match(/^export const (\w+)\s*=\s*(.+?)\s*;/); + if (!m) continue; + const [, name, val] = m; + const isNum = !val.startsWith('"') && !val.startsWith("'") && !isNaN(Number(val)); + declarations.push(`export declare const ${name}: ${isNum ? 'number' : 'string'};`); +} + +writeFileSync(dtsPath, declarations.join('\n') + '\n'); +console.log(`✓ Generated ${declarations.length - 3} TypeScript declarations`);