stream-chat-react-native-core
Version:
The official React Native and Expo components for Stream Chat, a service for building chat applications
614 lines • 20.4 kB
JavaScript
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.semantics = exports.primitives = exports.foundations = exports.components = void 0;
var foundations = exports.foundations = {
colors: {
baseTransparent0: 'rgba(255, 255, 255, 0)',
baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)',
baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)',
baseTransparentWhite30: 'rgba(255, 255, 255, 0.3)',
baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)',
baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)',
baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)',
baseTransparentBlack70: 'rgba(0, 0, 0, 0.7)',
baseBlack: '#000000',
baseWhite: '#ffffff',
slate50: '#f6f8fa',
slate100: '#ebeef1',
slate150: '#d5dbe1',
slate200: '#c0c8d2',
slate300: '#a3acba',
slate400: '#87909f',
slate500: '#687385',
slate600: '#545969',
slate700: '#414552',
slate800: '#30313d',
slate900: '#1a1b25',
neutral50: '#f8f8f8',
neutral100: '#efefef',
neutral150: '#d8d8d8',
neutral200: '#c4c4c4',
neutral300: '#ababab',
neutral400: '#8f8f8f',
neutral500: '#6a6a6a',
neutral600: '#565656',
neutral700: '#464646',
neutral800: '#323232',
neutral900: '#1c1c1c',
blue50: '#f3f7ff',
blue100: '#e3edff',
blue150: '#c3d9ff',
blue200: '#a5c5ff',
blue300: '#78a8ff',
blue400: '#4586ff',
blue500: '#005fff',
blue600: '#1b53bd',
blue700: '#19418d',
blue800: '#142f63',
blue900: '#091a3b',
cyan50: '#f1fbfc',
cyan100: '#d1f3f6',
cyan150: '#a9e4ea',
cyan200: '#72d7e0',
cyan300: '#45bcc7',
cyan400: '#1e9ea9',
cyan500: '#248088',
cyan600: '#006970',
cyan700: '#065056',
cyan800: '#003a3f',
cyan900: '#002124',
green50: '#e1ffee',
green100: '#bdfcdb',
green150: '#8febbd',
green200: '#59dea3',
green300: '#00c384',
green400: '#00a46e',
green500: '#277e59',
green600: '#006643',
green700: '#004f33',
green800: '#003a25',
green900: '#002213',
purple50: '#f7f8ff',
purple100: '#ecedff',
purple150: '#d4d7ff',
purple200: '#c1c5ff',
purple300: '#a1a3ff',
purple400: '#8482fc',
purple500: '#644af9',
purple600: '#553bd8',
purple700: '#4032a1',
purple800: '#2e2576',
purple900: '#1a114d',
yellow50: '#fef9da',
yellow100: '#fcedb9',
yellow150: '#fcd579',
yellow200: '#f6bf57',
yellow300: '#fa922b',
yellow400: '#f26d10',
yellow500: '#c84801',
yellow600: '#a82c00',
yellow700: '#842106',
yellow800: '#5f1a05',
yellow900: '#331302',
red50: '#fff5fa',
red100: '#ffe7f2',
red150: '#ffccdf',
red200: '#ffb1cd',
red300: '#fe87a1',
red400: '#fc526a',
red500: '#d90d10',
red600: '#b3093c',
red700: '#890d37',
red800: '#68052b',
red900: '#3e021a',
violet50: '#fef4ff',
violet100: '#fbe8fe',
violet150: '#f7cffc',
violet200: '#eeb5f4',
violet300: '#e68bec',
violet400: '#d75fe7',
violet500: '#b716ca',
violet600: '#9d00ae',
violet700: '#7c0089',
violet800: '#5c0066',
violet900: '#36003d',
lime50: '#f1fde8',
lime100: '#d4ffb0',
lime150: '#b1ee79',
lime200: '#9cda5d',
lime300: '#78c100',
lime400: '#639e11',
lime500: '#4b7a0a',
lime600: '#3e6213',
lime700: '#355315',
lime800: '#203a00',
lime900: '#112100'
},
layout: {
size2: 2,
size4: 4,
size6: 6,
size8: 8,
size12: 12,
size16: 16,
size20: 20,
size24: 24,
size32: 32,
size40: 40,
size48: 48,
size64: 64,
size28: 28,
size80: 80,
size128: 128,
size240: 240,
size320: 320,
size480: 480,
size560: 560,
size640: 640,
size760: 760,
size144: 144,
size208: 208,
size56: 56
},
radius: {
radius0: 0,
radius2: 2,
radius4: 4,
radius6: 6,
radius8: 8,
radius12: 12,
radius16: 16,
radius20: 20,
radius24: 24,
radius32: 32,
radiusFull: 9999
},
spacing: {
space0: 0,
space2: 2,
space4: 4,
space8: 8,
space12: 12,
space16: 16,
space20: 20,
space24: 24,
space32: 32,
space40: 40,
space48: 48,
space64: 64,
space80: 80
},
stroke: {
w100: 1,
w150: 1.5,
w200: 2,
w300: 3,
w400: 4,
w120: 1.2
},
typography: {
fontFamilyGeist: '"Geist"',
fontFamilyGeistMono: '"Geist Mono"',
fontFamilySfPro: '"SF Pro"',
fontFamilySfMono: '"SF Mono"',
fontFamilyRoboto: '"Roboto"',
fontFamilyRobotoMono: '"Roboto Mono"',
fontWeightW400: '400',
fontWeightW500: '500',
fontWeightW600: '600',
fontWeightW700: '700',
fontSizeSize8: 8,
fontSizeSize10: 10,
fontSizeSize11: 11,
fontSizeSize12: 12,
fontSizeSize13: 13,
fontSizeSize14: 14,
fontSizeSize16: 16,
fontSizeSize15: 15,
fontSizeSize17: 17,
fontSizeSize18: 18,
fontSizeSize20: 20,
fontSizeSize22: 22,
fontSizeSize24: 24,
fontSizeSize28: 28,
fontSizeSize32: 32,
fontSizeSize40: 40,
fontSizeSize48: 48,
fontSizeSize64: 64,
lineHeightLineHeight8: 8,
lineHeightLineHeight10: 10,
lineHeightLineHeight12: 12,
lineHeightLineHeight13: 13,
lineHeightLineHeight14: 14,
lineHeightLineHeight15: 15,
lineHeightLineHeight16: 16,
lineHeightLineHeight17: 17,
lineHeightLineHeight18: 18,
lineHeightLineHeight20: 20,
lineHeightLineHeight24: 24,
lineHeightLineHeight28: 28,
lineHeightLineHeight32: 32,
lineHeightLineHeight40: 40,
lineHeightLineHeight48: 48
}
};
var primitives = exports.primitives = {
darkElevation1: {
elevation: 2,
shadowColor: 'rgb(0,0,0)',
shadowOffset: {
width: 0,
height: 1
},
shadowOpacity: 0.19999999999999996,
shadowRadius: 3
},
darkElevation2: {
elevation: 3,
shadowColor: 'rgb(0,0,0)',
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.21999999999999997,
shadowRadius: 6
},
darkElevation3: {
elevation: 6,
shadowColor: 'rgb(0,0,0)',
shadowOffset: {
width: 0,
height: 4
},
shadowOpacity: 0.24,
shadowRadius: 12.000000000000002
},
darkElevation4: {
elevation: 12,
shadowColor: 'rgb(0,0,0)',
shadowOffset: {
width: 0,
height: 8
},
shadowOpacity: 0.28,
shadowRadius: 24.000000000000004
},
lightElevation1: {
elevation: 2,
shadowColor: 'rgb(0,0,0)',
shadowOffset: {
width: 0,
height: 1
},
shadowOpacity: 0.12,
shadowRadius: 3.0000000000000004
},
lightElevation2: {
elevation: 3,
shadowColor: 'rgb(0,0,0)',
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.14,
shadowRadius: 6.000000000000001
},
lightElevation3: {
elevation: 6,
shadowColor: 'rgb(0,0,0)',
shadowOffset: {
width: 0,
height: 4
},
shadowOpacity: 0.16000000000000003,
shadowRadius: 12
},
lightElevation4: {
elevation: 12,
shadowColor: 'rgb(0,0,0)',
shadowOffset: {
width: 0,
height: 8
},
shadowOpacity: 0.19999999999999996,
shadowRadius: 24
},
radius2xl: foundations.radius.radius20,
radius3xl: foundations.radius.radius24,
radius4xl: foundations.radius.radius32,
radiusLg: foundations.radius.radius12,
radiusMax: foundations.radius.radiusFull,
radiusMd: foundations.radius.radius8,
radiusNone: foundations.radius.radius0,
radiusSm: foundations.radius.radius6,
radiusXl: foundations.radius.radius16,
radiusXs: foundations.radius.radius4,
radiusXxs: foundations.radius.radius2,
spacing2xl: foundations.spacing.space32,
spacing3xl: foundations.spacing.space40,
spacingLg: foundations.spacing.space20,
spacingMd: foundations.spacing.space16,
spacingNone: foundations.spacing.space0,
spacingSm: foundations.spacing.space12,
spacingXl: foundations.spacing.space24,
spacingXs: foundations.spacing.space8,
spacingXxs: foundations.spacing.space4,
spacingXxxs: foundations.spacing.space2,
typographyFontFamilyMono: foundations.typography.fontFamilySfMono,
typographyFontFamilySans: foundations.typography.fontFamilySfPro,
typographyFontSize2xl: foundations.typography.fontSizeSize24,
typographyFontSizeLg: foundations.typography.fontSizeSize20,
typographyFontSizeMd: foundations.typography.fontSizeSize17,
typographyFontSizeMicro: foundations.typography.fontSizeSize8,
typographyFontSizeSm: foundations.typography.fontSizeSize15,
typographyFontSizeXl: foundations.typography.fontSizeSize22,
typographyFontSizeXs: foundations.typography.fontSizeSize13,
typographyFontSizeXxs: foundations.typography.fontSizeSize12,
typographyFontWeightBold: 700,
typographyFontWeightMedium: 500,
typographyFontWeightRegular: 400,
typographyFontWeightSemiBold: 600,
typographyLineHeightNormal: foundations.typography.lineHeightLineHeight20,
typographyLineHeightRelaxed: foundations.typography.lineHeightLineHeight24,
typographyLineHeightTight: foundations.typography.lineHeightLineHeight16
};
var components = exports.components = {
buttonHitTargetMinHeight: foundations.layout.size48,
buttonHitTargetMinWidth: foundations.layout.size48,
buttonPaddingXIconOnlyLg: 14,
buttonPaddingXIconOnlyMd: 10,
buttonPaddingXIconOnlySm: 6,
buttonPaddingXIconOnlyXs: 4,
buttonPaddingXWithLabelLg: 16,
buttonPaddingXWithLabelMd: 16,
buttonPaddingXWithLabelSm: 16,
buttonPaddingXWithLabelXs: 12,
buttonPaddingYLg: 14,
buttonPaddingYMd: 10,
buttonPaddingYSm: 6,
buttonPaddingYXs: 4,
buttonRadiusFull: foundations.radius.radiusFull,
buttonRadiusLg: foundations.radius.radiusFull,
buttonRadiusMd: foundations.radius.radiusFull,
buttonRadiusSm: foundations.radius.radiusFull,
buttonVisualHeightLg: foundations.layout.size48,
buttonVisualHeightMd: foundations.layout.size40,
buttonVisualHeightSm: foundations.layout.size32,
buttonVisualHeightXs: foundations.layout.size24,
composerRadiusFixed: primitives.radius3xl,
composerRadiusFloating: primitives.radius3xl,
deviceRadius: 62,
deviceSafeAreaBottom: foundations.spacing.space32,
deviceSafeAreaTop: 50,
emoji2xl: foundations.typography.fontSizeSize64,
emojiLg: foundations.typography.fontSizeSize32,
emojiMd: foundations.typography.fontSizeSize24,
emojiSm: primitives.typographyFontSizeMd,
emojiXl: foundations.typography.fontSizeSize48,
iconSizeLg: foundations.layout.size32,
iconSizeMd: foundations.layout.size20,
iconSizeSm: foundations.layout.size16,
iconSizeXs: foundations.layout.size12,
iconStrokeDefault: foundations.stroke.w150,
iconStrokeEmphasis: foundations.stroke.w200,
iconStrokeSubtle: foundations.stroke.w120,
messageBubbleRadiusAttachment: primitives.radiusLg,
messageBubbleRadiusAttachmentInline: primitives.radiusMd,
messageBubbleRadiusGroupBottom: primitives.radius2xl,
messageBubbleRadiusGroupMiddle: primitives.radius2xl,
messageBubbleRadiusGroupTop: primitives.radius2xl,
messageBubbleRadiusTail: primitives.radiusNone
};
var semantics = exports.semantics = {
accentError: foundations.colors.red400,
accentNeutral: '$chrome500',
accentPrimary: '$brand400',
accentSuccess: foundations.colors.green300,
accentWarning: foundations.colors.yellow300,
avatarBgDefault: '$avatarPaletteBg1',
avatarBgPlaceholder: '$chrome150',
avatarPaletteBg1: foundations.colors.blue600,
avatarPaletteBg2: foundations.colors.cyan600,
avatarPaletteBg3: foundations.colors.green600,
avatarPaletteBg4: foundations.colors.purple600,
avatarPaletteBg5: foundations.colors.yellow600,
avatarPaletteText1: foundations.colors.blue100,
avatarPaletteText2: foundations.colors.cyan100,
avatarPaletteText3: foundations.colors.green100,
avatarPaletteText4: foundations.colors.purple100,
avatarPaletteText5: foundations.colors.yellow100,
avatarPresenceBgOffline: '$accentNeutral',
avatarPresenceBgOnline: '$accentSuccess',
avatarPresenceBorder: '$borderCoreOnInverse',
avatarTextDefault: '$avatarPaletteText1',
avatarTextPlaceholder: '$chrome500',
backgroundCoreApp: '$chrome0',
backgroundCoreElevation0: '$chrome0',
backgroundCoreElevation1: '$chrome50',
backgroundCoreElevation2: '$chrome100',
backgroundCoreElevation3: '$chrome200',
backgroundCoreHighlight: foundations.colors.yellow800,
backgroundCoreInverse: '$chrome1000',
backgroundCoreOnAccent: '$chrome1000',
backgroundCoreOverlayDark: 'rgba(0, 0, 0, 0.5)',
backgroundCoreOverlayLight: 'rgba(0, 0, 0, 0.75)',
backgroundCoreScrim: 'rgba(0, 0, 0, 0.75)',
backgroundCoreSurfaceCard: '$chrome100',
backgroundCoreSurfaceDefault: '$chrome100',
backgroundCoreSurfaceStrong: '$chrome150',
backgroundCoreSurfaceSubtle: '$chrome50',
backgroundUtilityDisabled: '$chrome100',
backgroundUtilityHover: 'rgba(255, 255, 255, 0.15)',
backgroundUtilityPressed: 'rgba(255, 255, 255, 0.2)',
backgroundUtilitySelected: 'rgba(255, 255, 255, 0.25)',
badgeBgDefault: '$backgroundCoreElevation3',
badgeBgError: '$accentError',
badgeBgInverse: '$chrome1000',
badgeBgNeutral: '$accentNeutral',
badgeBgOverlay: 'rgba(0, 0, 0, 0.75)',
badgeBgPrimary: '$accentPrimary',
badgeBorder: '$borderCoreOnInverse',
badgeText: '$textPrimary',
badgeTextOnAccent: '$textOnAccent',
badgeTextOnInverse: '$textOnInverse',
borderCoreDefault: '$chrome200',
borderCoreInverse: '$chrome0',
borderCoreOnAccent: '$chrome1000',
borderCoreOnInverse: '$chrome0',
borderCoreOnSurface: '$chrome300',
borderCoreOpacityStrong: 'rgba(255, 255, 255, 0.25)',
borderCoreOpacitySubtle: 'rgba(255, 255, 255, 0.2)',
borderCoreStrong: '$chrome300',
borderCoreSubtle: '$chrome100',
borderUtilityActive: '$accentPrimary',
borderUtilityDisabled: '$chrome100',
borderUtilityDisabledOnSurface: '$chrome150',
borderUtilityError: '$accentError',
borderUtilityFocused: '$brand150',
borderUtilityHover: 'rgba(255, 255, 255, 0.1)',
borderUtilityPressed: 'rgba(255, 255, 255, 0.2)',
borderUtilitySelected: 'rgba(255, 255, 255, 0.15)',
borderUtilitySuccess: '$accentSuccess',
borderUtilityWarning: '$accentWarning',
brand50: foundations.colors.blue900,
brand100: foundations.colors.blue800,
brand150: foundations.colors.blue700,
brand200: foundations.colors.blue600,
brand300: foundations.colors.blue500,
brand400: foundations.colors.blue400,
brand500: foundations.colors.blue300,
brand600: foundations.colors.blue200,
brand700: foundations.colors.blue150,
brand800: foundations.colors.blue100,
brand900: foundations.colors.blue50,
buttonDestructiveBg: '$accentError',
buttonDestructiveBgLiquidGlass: '$backgroundCoreElevation0',
buttonDestructiveBorder: '$accentError',
buttonDestructiveBorderOnDark: '$textOnInverse',
buttonDestructiveText: '$accentError',
buttonDestructiveTextOnAccent: '$textOnAccent',
buttonDestructiveTextOnDark: '$textOnInverse',
buttonPrimaryBg: '$accentPrimary',
buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0,
buttonPrimaryBorder: '$brand200',
buttonPrimaryBorderOnDark: '$borderCoreOnInverse',
buttonPrimaryText: '$accentPrimary',
buttonPrimaryTextOnAccent: '$textOnAccent',
buttonPrimaryTextOnDark: '$textOnInverse',
buttonSecondaryBg: '$backgroundCoreSurfaceDefault',
buttonSecondaryBgLiquidGlass: '$backgroundCoreElevation0',
buttonSecondaryBorder: '$borderCoreDefault',
buttonSecondaryBorderOnDark: '$borderCoreOnInverse',
buttonSecondaryText: '$textPrimary',
buttonSecondaryTextOnAccent: '$textPrimary',
buttonSecondaryTextOnDark: '$textOnInverse',
chatBgAttachmentIncoming: '$backgroundCoreSurfaceStrong',
chatBgAttachmentOutgoing: '$brand150',
chatBgIncoming: '$backgroundCoreSurfaceDefault',
chatBgMention: foundations.colors.baseTransparent0,
chatBgMentionBroadcast: '$chatBgMention',
chatBgMentionGroup: '$chatBgMention',
chatBgMentionRole: '$chatBgMention',
chatBgMentionUser: '$chatBgMention',
chatBgOutgoing: '$brand100',
chatBorderIncoming: '$borderCoreSubtle',
chatBorderOnChatIncoming: '$borderCoreStrong',
chatBorderOnChatOutgoing: '$brand300',
chatBorderOutgoing: '$brand100',
chatPollProgressFillIncoming: '$controlProgressBarFill',
chatPollProgressFillOutgoing: '$accentPrimary',
chatPollProgressTrackIncoming: '$controlProgressBarTrack',
chatPollProgressTrackOutgoing: '$brand200',
chatReplyIndicatorIncoming: '$chrome400',
chatReplyIndicatorOutgoing: '$brand400',
chatTextIncoming: '$textPrimary',
chatTextLink: '$textLink',
chatTextMention: '$accentPrimary',
chatTextMentionBroadcast: '$chatTextMention',
chatTextMentionGroup: '$chatTextMention',
chatTextMentionRole: '$chatTextMention',
chatTextMentionUser: '$chatTextMention',
chatTextOutgoing: '$brand900',
chatTextReaction: '$textSecondary',
chatTextRead: '$accentPrimary',
chatTextSystem: '$textSecondary',
chatTextTimestamp: '$textTertiary',
chatTextTypingIndicator: '$chatTextIncoming',
chatTextUsername: '$textSecondary',
chatThreadConnectorIncoming: '$borderCoreDefault',
chatThreadConnectorOutgoing: '$brand150',
chatWaveformBar: '$borderCoreOpacityStrong',
chatWaveformBarPlaying: '$accentPrimary',
chrome0: foundations.colors.baseBlack,
chrome50: foundations.colors.neutral900,
chrome100: foundations.colors.neutral800,
chrome150: foundations.colors.neutral700,
chrome200: foundations.colors.neutral600,
chrome300: foundations.colors.neutral500,
chrome400: foundations.colors.neutral400,
chrome500: foundations.colors.neutral300,
chrome600: foundations.colors.neutral200,
chrome700: foundations.colors.neutral150,
chrome800: foundations.colors.neutral100,
chrome900: foundations.colors.neutral50,
chrome1000: foundations.colors.baseWhite,
controlCheckboxBg: foundations.colors.baseTransparent0,
controlCheckboxBgSelected: '$accentPrimary',
controlCheckboxBorder: '$borderCoreDefault',
controlCheckboxIcon: '$textOnAccent',
controlChipBorder: '$borderCoreDefault',
controlChipText: '$textPrimary',
controlPlaybackThumbBgActive: '$accentPrimary',
controlPlaybackThumbBgDefault: '$backgroundCoreOnAccent',
controlPlaybackThumbBorderActive: '$borderCoreOnAccent',
controlPlaybackThumbBorderDefault: '$borderCoreOpacityStrong',
controlPlaybackToggleBorder: '$borderCoreDefault',
controlPlaybackToggleText: '$textPrimary',
controlPlayButtonBg: 'rgba(0, 0, 0, 0.75)',
controlPlayButtonIcon: '$textOnAccent',
controlProgressBarFill: '$accentNeutral',
controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
controlRadioButtonBg: foundations.colors.baseTransparent0,
controlRadioButtonBgSelected: '$accentPrimary',
controlRadioButtonBorder: '$borderCoreDefault',
controlRadioButtonIndicator: '$textOnAccent',
controlRadioCheckBg: foundations.colors.baseTransparent0,
controlRadioCheckBgSelected: '$accentPrimary',
controlRadioCheckBorder: '$borderCoreDefault',
controlRadioCheckIcon: '$textOnAccent',
controlRemoveControlBg: '$backgroundCoreInverse',
controlRemoveControlBorder: '$borderCoreOnInverse',
controlRemoveControlIcon: '$textOnInverse',
controlToggleSwitchBg: '$accentNeutral',
controlToggleSwitchBgDisabled: '$backgroundUtilityDisabled',
controlToggleSwitchBgSelected: '$accentPrimary',
controlToggleSwitchKnob: '$backgroundCoreOnAccent',
inputSendIcon: '$accentPrimary',
inputSendIconDisabled: '$textDisabled',
inputTextDefault: '$textPrimary',
inputTextDisabled: '$textDisabled',
inputTextIcon: '$textTertiary',
inputTextPlaceholder: '$textTertiary',
presenceBgOffline: '$accentNeutral',
presenceBgOnline: '$accentSuccess',
presenceBorder: '$borderCoreInverse',
reactionBg: '$backgroundCoreElevation3',
reactionBorder: '$borderCoreDefault',
reactionEmoji: '$textPrimary',
reactionText: '$textPrimary',
skeletonLoadingBase: foundations.colors.baseTransparent0,
skeletonLoadingHighlight: '$backgroundCoreOverlayLight',
systemBgBlur: 'rgba(0, 0, 0, 0.01)',
systemCaret: '$accentPrimary',
systemScrollbar: 'rgba(255, 255, 255, 0.5)',
systemText: '$chrome1000',
textDisabled: '$chrome300',
textLink: '$brand600',
textOnAccent: '$chrome1000',
textOnInverse: '$chrome0',
textPrimary: '$chrome900',
textSecondary: '$chrome700',
textTertiary: '$chrome500'
};
//# sourceMappingURL=StreamTokens.ios.js.map