import { SxProps, Theme, ThemeOptions } from '@mui/material'; import { greyTheme, redTheme, greenTheme, dataVisualizationColors, extraColors, allColors, allMainColors, orangeTheme, yellowTheme, blueTheme, coralTheme, shadows } from './colors'; /** * Shared stroke contract from the published Foods design system. * Figma provenance: Product breadcrumb row `12819:67396` and Page link set `14270:126177`. */ export declare const strokes: { readonly containerDivider: { readonly color: "#E0DEDD"; readonly style: "solid"; readonly width: "1px"; }; }; /** * Shared layout geometry for the published Doughnut card component. * Figma provenance: component key `269038bfd4fe010322dadf5cbad03883d044cf4a`, * Product empty `12819:67597`, and Product filled `13154:221906`. */ export declare const doughnutCard: { readonly width: "300px"; }; /** * Shared semantic colors for status surfaces. * Figma provenance: `Status/Green/green-50` on Product score comparison * `13154:221924`. */ export declare const status: { readonly green: { readonly surface: "#F2FFF9"; }; }; /** * Shared score card colors. * Figma provenance: Product empty score card `12819:67604`, empty guidance * `13621:101305`, and filled score card `13154:221913`. * Loading provenance: established Product score-card behavior preserved during * the Product V2 migration and approved on 2026-08-20. */ export declare const scoreCard: { readonly surface: "#025155"; readonly emptyGuidanceForeground: "#EDF9FA"; readonly loading: { readonly opacity: 0.7; readonly transition: "opacity 120ms ease-out"; }; }; /** * Shared Product score-overview card geometry. * Figma provenance: selected score card `14219:66823` and inactive score * cards `14219:66824`, `14219:66825`, and `14219:66826`. */ export declare const scoreOverviewCard: { readonly width: "300px"; readonly heights: { readonly inactive: "215px"; readonly selected: "231px"; }; readonly icon: { readonly containerSize: "48px"; readonly glyphSize: { readonly width: 40; readonly height: 40; }; }; readonly carouselControl: { readonly inlineEndOffset: "-5px"; }; /** * Embedded score-overview chart geometry. * Figma provenance: Product score overview graph `14219:66850`. */ readonly details: { readonly chartHeight: "481px"; }; }; /** * Shared Ingredient card surface stroke. * Figma provenance: Product filled Ingredient card `13154:221702`. */ export declare const ingredientCard: { readonly stroke: { readonly color: "#E5E3E0"; readonly style: "solid"; readonly width: "1px"; }; }; /** * Shared Score value geometry. * Figma provenance: Number empty state `13603:94567`, instantiated by * Product score value `12819:67607`. */ export declare const scoreValue: { readonly emptyIndicator: { readonly size: "44px"; readonly iconSize: { readonly width: 26; readonly height: 26; }; }; /** * Figma provenance: compact inline score in Product Packaging row * `13154:221872`. */ readonly inline: { readonly width: "70px"; }; }; /** * Shared NumberWithUnit empty-state geometry. * Figma provenance: Product transport inline score `13162:68281` (micro) * and Product section score tag `13162:68276` (small). * Inter and big preserve the previously published Foods runtime geometry. */ export declare const numberWithUnit: { readonly emptyIndicator: { readonly micro: { readonly size: "20px"; readonly iconSize: { readonly width: 11; readonly height: 11; }; }; readonly small: { readonly size: "24px"; readonly iconSize: { readonly width: 13; readonly height: 13; }; }; readonly inter: { readonly size: "30px"; readonly iconSize: { readonly width: 20; readonly height: 20; }; }; readonly big: { readonly size: "38px"; readonly iconSize: { readonly width: 28; readonly height: 28; }; }; }; readonly unitOffset: { readonly compact: "-1px"; readonly regular: "-2px"; }; }; /** * Shared compact form field geometry. * Figma provenance: compact Text input `13626:66777`, instantiated by * Product Packaging row `13154:221868`. */ export declare const formField: { readonly compact: { readonly width: "100px"; /** * Figma provenance: Product Processing option frame `13162:67710`. */ readonly optionWidth: "130px"; }; }; /** * Shared bar-chart geometry. * Figma provenance: zero-value Product life-cycle segments `13154:221949` * and `13154:221974`. */ export declare const barChart: { readonly zeroValueWidth: "1px"; }; /** * Shared media upload layout contract. * Figma provenance: Product Identity upload containers `12819:68229` and * `13154:221625`. The default state preserves the published application * geometry while the compact state maps the Product V2 composition. */ export declare const mediaUpload: { readonly borderRadius: "8px"; readonly loadingIndicatorSize: 28; readonly errorMaxWidth: "260px"; readonly default: { readonly size: 120; readonly stroke: { readonly color: "#E0DEDD"; readonly style: "solid"; readonly width: "1px"; }; readonly emptyCopy: { readonly typographyVariant: "body-regular"; readonly lineHeight: 1.3; }; }; readonly compact: { readonly size: 110; readonly contentInset: "6px"; readonly stroke: { readonly style: "dashed"; readonly color: "#E0DEDD"; readonly width: "1px"; }; readonly boxShadow: "0px 2px 8px 0px #2A2B270A"; readonly emptyCopy: { readonly width: "76px"; readonly typographyVariant: "small-regular"; }; }; /** * Figma provenance: Product information header thumbnail * `13407:63114` / image `13407:63115`. */ readonly thumbnail: { readonly size: 70; readonly contentInset: "4px"; readonly stroke: { readonly color: "#E0DEDD"; readonly style: "solid"; readonly width: "1px"; }; readonly boxShadow: "0px 2px 8px 0px #2A2B270A"; }; }; /** * Shared read-only tag geometry. * Figma provenance: Product information neutral tag `13314:83282` and * custom-color tag `13314:83272`. */ export declare const tags: { readonly display: { readonly height: "26px"; }; }; /** * Shared count-tab contract. * Figma provenance: Packaging count filters `12885:70126` and `13407:62429`. */ export declare const countTabs: { readonly gap: "8px"; readonly minHeight: "36px"; readonly padding: "8px 12px"; readonly borderRadius: "8px"; readonly focusRing: { readonly color: "#393A36"; readonly width: "2px"; readonly offset: "2px"; }; readonly separatorPaddingInline: "4px"; readonly loadingWidth: 24; readonly loadingSelectedOpacity: 0.3; readonly default: { readonly background: "linear-gradient(180deg, #FFFFFF 0%, #F6F5F3 154.5%)"; readonly hoverBackground: "linear-gradient(180deg, #FFFFFF 0%, #EFEDEC 154.5%)"; readonly borderColor: "#E7E6E4"; readonly boxShadow: "0px 2px 8px 0px #2A2B270A"; readonly color: "#393A36"; }; readonly selected: { readonly background: "linear-gradient(180deg, #484945 0%, #2A2B27 100%)"; readonly hoverBackground: "#393A36"; readonly borderColor: "#393A36"; readonly boxShadow: "0px 4px 8px 0px #2A2B2714"; readonly color: "#FFFFFF"; }; }; /** * Shared navigation-tab geometry. * Figma provenance: Product Information primary tabs `13314:83199` and * Product score-detail secondary tabs `13140:99648`. */ export declare const tabs: { readonly primary: { readonly height: "60px"; }; readonly secondary: { readonly height: "60px"; }; }; /** * Shared score-detail layout geometry. * Figma provenance: Product score details lifecycle `13140:99648`, * sub-scores `13140:100217`, impacts `13140:100596`, zero-impact bars * `13162:67454`/`13162:67459`/`13162:67464`, and benefit bar `13162:67440`. */ export declare const scoreDetail: { readonly summaryWidth: "250px"; readonly barWidth: "250px"; readonly lifecycleBreakdownWidth: "364px"; readonly subscoreBreakdownWidth: "346px"; readonly impactBreakdownWidth: "318px"; readonly impactZeroBreakdownWidth: "292px"; readonly impactBenefitBreakdownWidth: "551px"; }; /** * Shared Toggle switch geometry and neutral state colors. * Figma provenance: component key `b5b084023a568d6b5ccc4ab4d718fcdddf7b1237`, * Product unchecked `12819:67419`, and Product checked `13154:221630`. * Default and small sizes preserve the previously published Foods geometry. */ export declare const toggleSwitch: { readonly handleBorderRadius: "50%"; readonly legacyTrackBackground: "rgba(0,0,0,.25)"; readonly sizes: { readonly default: { readonly width: "52px"; readonly height: "28px"; readonly thumbSize: "20px"; readonly thumbInset: "4px"; readonly thumbTravel: "24px"; readonly trackBorderRadius: "16px"; }; readonly medium: { readonly width: "44px"; readonly height: "24px"; readonly thumbSize: "16px"; readonly thumbInset: "4px"; readonly thumbTravel: "20px"; readonly trackBorderRadius: "14px"; }; readonly small: { readonly width: "36px"; readonly height: "20px"; readonly thumbSize: "12px"; readonly thumbInset: "4px"; readonly thumbTravel: "16px"; readonly trackBorderRadius: "10px"; }; }; readonly status: { readonly uncheckedColor: "#A3A2A0"; readonly uncheckedIconColor: "#767673"; readonly handleBackground: "linear-gradient(180deg, #FFFFFF 0%, #F6F5F3 100%)"; readonly iconSize: { readonly width: 14; readonly height: 14; }; readonly trackBorderRadius: "20px"; }; }; /** * Shared Delete button contract. * Figma provenance: Delete button set `12455:9285`; default `12455:9286`, * hovered `12455:9292`, pressed `12455:9304`; Product instance `13154:221873`. */ export declare const deleteButton: { readonly size: "40px"; readonly iconSize: { readonly width: 20; readonly height: 20; }; readonly borderRadius: "44px"; readonly default: { readonly background: "linear-gradient(180deg, #FFFFFF 0%, #F6F5F3 154.5%)"; readonly borderColor: "#EE3C15"; readonly color: "#EE3C15"; }; readonly hovered: { readonly background: "#F16040"; readonly borderColor: "#EE3C15"; readonly color: "#FFFFFF"; }; readonly pressed: { readonly background: "#D03210"; readonly borderColor: "#D03210"; readonly color: "#FFFFFF"; }; }; /** * Shared Breadcrumb geometry from the published Foods design system. * Figma provenance: Page link `14270:126177`, Breadcrumb `14270:126197`, and overflow menu `14270:126193`. */ export declare const breadcrumb: { readonly gap: "4px"; readonly separatorIconSize: { readonly width: 16; readonly height: 16; }; readonly pageLink: { readonly height: "26px"; readonly paddingBlock: "2px"; readonly paddingInline: "8px"; readonly borderRadius: "8px"; readonly maxWidth: "226px"; readonly stroke: { readonly default: string; readonly hover: string; }; readonly collapsed: { readonly width: "24px"; readonly height: "16px"; readonly paddingInline: "4px"; readonly borderRadius: "4px"; }; }; readonly overflowMenu: { readonly offset: "4px"; readonly padding: "16px"; readonly gap: "8px"; readonly borderRadius: "12px"; readonly boxShadow: `${string}, 0px 4px 20px 0px rgba(81, 78, 78, 0.12)`; }; }; /** * Shared Tooltip variants from the published Foods design system. * Default provenance: exact legacy FoodsTooltip runtime contract; its existing source references frame `6071:34293`. * Simple provenance: Tooltip `14270:126111`, instance `14270:126188`. * Approved implementation constraint (2026-08-11): `53px` is derived from the instance's `60px` outer * height, its `8px` arrow, and the component's `-1px` overlap. Figma does not expose a min-height property. * Its margin preserves the established FoodsTooltip runtime spacing; it is not a measured Figma anchor gap. */ export declare const tooltip: { readonly contentAlignment: "center"; readonly default: { readonly maxCharacters: 100; readonly width: "202px"; readonly maxWidth: "unset"; readonly padding: "12px 16px 12px 16px"; readonly borderRadius: "0.5rem"; readonly border: string; readonly backgroundColor: "#FFFFFF"; readonly boxShadow: "0px 4px 20px 0px #E7E6E4"; readonly color: "#393A36"; readonly margin: "8px"; readonly typographyVariant: "body-medium"; readonly arrow: { readonly color: "#FFFFFF"; readonly border: string; }; }; readonly simple: { readonly width: "300px"; readonly maxWidth: "300px"; readonly contentMinHeight: "53px"; readonly paddingBlock: "2px"; readonly paddingInline: "8px"; readonly borderRadius: "8px"; readonly border: string; readonly backgroundColor: "#FFFFFF"; readonly boxShadow: "0px 4px 20px 0px rgba(81, 78, 78, 0.12)"; readonly color: "#50504D"; readonly margin: "8px"; readonly typographyVariant: "body-medium"; readonly arrow: { readonly width: "16px"; readonly height: "8px"; readonly color: "#FFFFFF"; readonly border: string; }; }; }; type CustomThemeKeys = { custom: { grey: typeof greyTheme; red: typeof redTheme; green: typeof greenTheme; orange: typeof orangeTheme; yellow: typeof yellowTheme; blue: typeof blueTheme; coral: typeof coralTheme; shadows: typeof shadows; dataviz: { colors: typeof dataVisualizationColors; extra: typeof extraColors; colorsWithExtra: typeof allColors; onlyMainFromAll: typeof allMainColors; }; doughnutCard: typeof doughnutCard; strokes: typeof strokes; status: typeof status; scoreCard: typeof scoreCard; scoreOverviewCard: typeof scoreOverviewCard; ingredientCard: typeof ingredientCard; scoreValue: typeof scoreValue; numberWithUnit: typeof numberWithUnit; formField: typeof formField; barChart: typeof barChart; mediaUpload: typeof mediaUpload; tags: typeof tags; countTabs: typeof countTabs; tabs: typeof tabs; scoreDetail: typeof scoreDetail; toggleSwitch: typeof toggleSwitch; deleteButton: typeof deleteButton; breadcrumb: typeof breadcrumb; tooltip: typeof tooltip; searchBox: SxProps; rowMenuElement: SxProps; }; numbers: { valueFormatterFn: (value: number, precision?: number) => string; }; }; declare module "@mui/material/styles" { interface Theme extends CustomThemeKeys { } interface ThemeOptions extends CustomThemeKeys { } } export declare const custom: ThemeOptions["custom"]; export declare const numbers: ThemeOptions["numbers"]; export {};