import { TextStyle, ViewStyle } from "react-native"; export type HexColorValue = `#${string}`; export type RGBAColorValue = `rgba(${string})`; export type RGBColorValue = `rgb(${string})`; export type EDSColor = "primary" | "secondary" | "warning" | "danger" | "success"; export type EDSTextColor = "textPrimary" | "textSecondary" | "textTertiary" | "textInverted" | "textDisabled"; export type Color = HexColorValue | RGBAColorValue | RGBColorValue | EDSColor | EDSTextColor; export type ColorScheme = "light" | "dark"; export type Density = "tablet" | "phone"; export type ColorSchemeValues = Record; export type DensityValues = Record; export type TypographyVariantGroupMap = { paragraph: "body_short" | "body_long" | "overline" | "caption"; basic: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "label" | "input"; interactive: "button" | "link"; ui: "tooltip" | "chipAndBadge"; cell: "groupTitle" | "title" | "description"; navigation: "menuTab"; }; export type TypographyGroup = keyof TypographyVariantGroupMap; export type TypographyVariant = TypographyVariantGroupMap[TKey]; export type Elevation = "raised" | "none" | "overlay" | "sticky" | "temporaryNav" | "aboveScrim"; export type TypographyStyle = Pick; export type ShadowStyle = Pick; export type MasterToken = { colors: { border: { lighter: ColorSchemeValues; light: ColorSchemeValues; medium: ColorSchemeValues; }; container: { background: ColorSchemeValues; default: ColorSchemeValues; warning: ColorSchemeValues; elevation: { none: ColorSchemeValues; aboveScrim: ColorSchemeValues; raised: ColorSchemeValues; overlay: ColorSchemeValues; sticky: ColorSchemeValues; temporaryNav: ColorSchemeValues; }; scrim: ColorSchemeValues; }; interactive: { primary: ColorSchemeValues; secondary: ColorSchemeValues; /** * @deprecated 29.12.2023 - This will not be available 6 months after deprecation. Use `feedback.success` instead. */ success: ColorSchemeValues; /** * @deprecated 29.12.2023 - This will not be available 6 months after deprecation. Use `feedback.warning` instead. */ warning: ColorSchemeValues; /** * @deprecated 29.12.2023 - This will not be available 6 months after deprecation. Use `feedback.danger` instead. */ danger: ColorSchemeValues; disabled: ColorSchemeValues; pressedOverlay: ColorSchemeValues; selectedHighlight: ColorSchemeValues; }; feedback: { success: ColorSchemeValues; warning: ColorSchemeValues; danger: ColorSchemeValues; }; environment: { dev: ColorSchemeValues; test: ColorSchemeValues; qa: ColorSchemeValues; text: ColorSchemeValues; }; toast: { error: { background: ColorSchemeValues; text: ColorSchemeValues; }; info: { background: ColorSchemeValues; text: ColorSchemeValues; }; warning: { background: ColorSchemeValues; text: ColorSchemeValues; }; success: { background: ColorSchemeValues; text: ColorSchemeValues; }; }; text: { primary: ColorSchemeValues; secondary: ColorSchemeValues; tertiary: ColorSchemeValues; primaryInverted: ColorSchemeValues; disabled: ColorSchemeValues; danger: ColorSchemeValues; menu: { resting: ColorSchemeValues; active: ColorSchemeValues; }; feedbackWarning: ColorSchemeValues; }; }; geometry: { border: { elementBorderRadius: number; containerBorderRadius: number; borderWidth: number; focusedBorderWidth: number; tabsBorderWidth: number; }; dimension: { icon: { size: number; }; button: { minHeight: DensityValues; }; cell: { minHeight: number; navigation: { height: DensityValues; }; accordion: { height: DensityValues; }; adornment: { widthSmall: DensityValues; widthMedium: DensityValues; widthLarge: DensityValues; }; }; dialog: { minHeight: DensityValues; defaultWidth: DensityValues; header: { height: DensityValues; }; }; tabs: { minWidth: DensityValues; }; }; shadow: { [TElev in Elevation]: ShadowStyle; }; }; spacing: { container: { paddingHorizontal: DensityValues; paddingVertical: DensityValues; }; element: { paddingHorizontal: DensityValues; paddingVertical: DensityValues; }; chip: { paddingHorizontal: DensityValues; paddingVertical: DensityValues; }; button: { paddingHorizontal: DensityValues; paddingVertical: DensityValues; iconGap: DensityValues; }; textField: { paddingHorizontal: DensityValues; paddingVertical: DensityValues; }; menu: { paddingVertical: DensityValues; item: { paddingHorizontal: DensityValues; paddingVertical: DensityValues; iconGap: DensityValues; }; }; dialog: { padding: DensityValues; gap: DensityValues; }; cell: { group: { titleBottomPadding: DensityValues; }; content: { titleDescriptionGap: DensityValues; }; paddingVertical: DensityValues; gapHorizontal: DensityValues; }; spacer: { small: DensityValues; medium: DensityValues; large: DensityValues; }; tabs: { paddingVerical: DensityValues; paddingHorizontal: DensityValues; }; }; typography: { [TGroup in TypographyGroup]: { [TKey in TypographyVariant]: TypographyStyle; }; }; timing: { animation: { slow: number; normal: number; fast: number; }; }; }; export type WithoutThemeOptionValues = { [K in keyof TToken]: TToken[K] extends ColorSchemeValues ? U : TToken[K] extends DensityValues ? V : TToken[K] extends object ? WithoutThemeOptionValues : TToken[K]; }; export type Token = WithoutThemeOptionValues;