diff --git a/examples/SampleApp/ios/Podfile.lock b/examples/SampleApp/ios/Podfile.lock index e42179c14..223862994 100644 --- a/examples/SampleApp/ios/Podfile.lock +++ b/examples/SampleApp/ios/Podfile.lock @@ -3584,7 +3584,7 @@ SPEC CHECKSUMS: op-sqlite: b9a4028bef60145d7b98fbbc4341c83420cdcfd5 PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47 PromisesSwift: 9d77319bbe72ebf6d872900551f7eeba9bce2851 - RCT-Folly: 846fda9475e61ec7bcbf8a3fe81edfcaeb090669 + RCT-Folly: 59ec0ac1f2f39672a0c6e6cecdd39383b764646f RCTDeprecation: 300c5eb91114d4339b0bb39505d0f4824d7299b7 RCTRequired: e0446b01093475b7082fbeee5d1ef4ad1fe20ac4 RCTTypeSafety: cb974efcdc6695deedf7bf1eb942f2a0603a063f diff --git a/examples/SampleApp/src/components/ScreenHeader.tsx b/examples/SampleApp/src/components/ScreenHeader.tsx index fda612e38..b8cf024d6 100644 --- a/examples/SampleApp/src/components/ScreenHeader.tsx +++ b/examples/SampleApp/src/components/ScreenHeader.tsx @@ -118,7 +118,8 @@ export const ScreenHeader: React.FC = (props) => { const { theme: { - colors: { black, border, grey, white }, + colors: { black, grey, white }, + semantics, }, } = useTheme(); const insets = useSafeAreaInsets(); @@ -129,7 +130,7 @@ export const ScreenHeader: React.FC = (props) => { styles.safeAreaContainer, { backgroundColor: white, - borderBottomColor: border.surfaceSubtle, + borderBottomColor: semantics.borderCoreSubtle, height: HEADER_CONTENT_HEIGHT + (inSafeArea ? 0 : insets.top), }, style, diff --git a/package/eslint.config.mjs b/package/eslint.config.mjs index 0508bad26..a154ab2d9 100644 --- a/package/eslint.config.mjs +++ b/package/eslint.config.mjs @@ -75,7 +75,18 @@ export default tsEslint.config( settings: { 'import/resolver': { node: { - extensions: ['.js', '.jsx', '.ts', '.tsx'], + extensions: [ + '.js', + '.jsx', + '.ts', + '.tsx', + '.ios.ts', + '.android.ts', + '.web.ts', + '.ios.tsx', + '.android.tsx', + '.web.tsx', + ], paths: ['src'], }, }, diff --git a/package/src/components/Attachment/AttachmentActions.tsx b/package/src/components/Attachment/AttachmentActions.tsx index 3418a38e3..158bdd441 100644 --- a/package/src/components/Attachment/AttachmentActions.tsx +++ b/package/src/components/Attachment/AttachmentActions.tsx @@ -45,7 +45,8 @@ const AttachmentActionsWithContext = (props: AttachmentActionsPropsWithContext) const { theme: { - colors: { accent_blue, black, border, transparent, white }, + semantics, + colors: { accent_blue, black, transparent, white }, messageSimple: { actions: { button: { @@ -82,7 +83,7 @@ const AttachmentActionsWithContext = (props: AttachmentActionsPropsWithContext) ? primaryBackgroundColor || accent_blue : defaultBackgroundColor || white, borderColor: primary - ? primaryBorderColor || border.surfaceSubtle + ? primaryBorderColor || semantics.borderCoreDefault : defaultBorderColor || transparent, }, buttonStyle, diff --git a/package/src/components/ChannelList/Skeleton.tsx b/package/src/components/ChannelList/Skeleton.tsx index ec086a14b..f709931e6 100644 --- a/package/src/components/ChannelList/Skeleton.tsx +++ b/package/src/components/ChannelList/Skeleton.tsx @@ -46,7 +46,8 @@ export const Skeleton = () => { height = 64, maskFillColor, }, - colors: { border, grey_gainsboro, white_snow }, + colors: { grey_gainsboro, white_snow }, + semantics, }, } = useTheme(); @@ -126,7 +127,7 @@ export const Skeleton = () => { return ( diff --git a/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx b/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx index 40a9b65f0..4193be977 100644 --- a/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx +++ b/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx @@ -119,7 +119,8 @@ const ChannelPreviewMessengerWithContext = (props: ChannelPreviewMessengerPropsW const { theme: { channelPreview: { container, contentContainer, row, title }, - colors: { border, white_snow }, + colors: { white_snow }, + semantics, }, } = useTheme(); @@ -138,7 +139,7 @@ const ChannelPreviewMessengerWithContext = (props: ChannelPreviewMessengerPropsW style={[ // { opacity: pressed ? 0.5 : 1 }, styles.container, - { backgroundColor: white_snow, borderBottomColor: border.surfaceSubtle }, + { backgroundColor: white_snow, borderBottomColor: semantics.borderCoreDefault }, container, ]} testID='channel-preview-button' diff --git a/package/src/components/Message/MessageSimple/MessageAvatar.tsx b/package/src/components/Message/MessageSimple/MessageAvatar.tsx index eb02ed9ea..ec5e58c0b 100644 --- a/package/src/components/Message/MessageSimple/MessageAvatar.tsx +++ b/package/src/components/Message/MessageSimple/MessageAvatar.tsx @@ -26,6 +26,8 @@ const MessageAvatarWithContext = (props: MessageAvatarPropsWithContext) => { const visible = typeof showAvatar === 'boolean' ? showAvatar : lastGroupMessage; + console.log(message); + return ( { + let chatClient; + + beforeEach(async () => { + chatClient = await getTestClientWithUser({ id: 'me' }); + }); + it('should render message avatar', async () => { const staticUser = generateStaticUser(0); const message = generateMessage({ user: { ...staticUser, image: undefined }, }); render( - + - , + , ); await waitFor(() => { @@ -30,9 +37,9 @@ describe('MessageAvatar', () => { }); screen.rerender( - + - , + , ); await waitFor(() => { @@ -45,14 +52,14 @@ describe('MessageAvatar', () => { }); screen.rerender( - + - , + , ); await waitFor(() => { diff --git a/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap b/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap index 1fd9086fb..c94f93477 100644 --- a/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap +++ b/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap @@ -29,10 +29,10 @@ exports[`MessageAvatar should render message avatar 1`] = ` "width": 24, }, { - "backgroundColor": "#D7F7FB", + "backgroundColor": "#d1f3f6", }, { - "borderColor": "hsla(0, 0%, 0%, 0.1)", + "borderColor": "rgba(0, 0, 0, 0.1)", "borderWidth": 1, }, ] diff --git a/package/src/components/MessageInput/MessageInput.tsx b/package/src/components/MessageInput/MessageInput.tsx index 1f8d91e66..b091d2b87 100644 --- a/package/src/components/MessageInput/MessageInput.tsx +++ b/package/src/components/MessageInput/MessageInput.tsx @@ -264,7 +264,8 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => { const { height } = useStateStore(messageInputHeightStore.store, messageInputHeightStoreSelector); const { theme: { - colors: { border, grey_whisper, white, white_smoke }, + semantics, + colors: { grey_whisper, white, white_smoke }, messageInput: { attachmentSelectionBar, container, @@ -478,7 +479,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => { styles.wrapper, { backgroundColor: white, - borderColor: border.surfaceSubtle, + borderColor: semantics.borderCoreDefault, paddingBottom: BOTTOM_OFFSET, }, wrapper, diff --git a/package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx b/package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx index d8dcf3c04..1c373b0fb 100644 --- a/package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx +++ b/package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx @@ -21,7 +21,8 @@ export const SendMessageDisallowedIndicator = () => { const { t } = useTranslationContext(); const { theme: { - colors: { border, grey_dark, white }, + semantics, + colors: { grey_dark, white }, messageInput: { sendMessageDisallowedIndicator: { container, text }, }, @@ -34,7 +35,7 @@ export const SendMessageDisallowedIndicator = () => { styles.container, { backgroundColor: white, - borderTopColor: border.surfaceSubtle, + borderTopColor: semantics.borderCoreDefault, height: 50, }, container, diff --git a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx index 79fdbf3ca..3ede59328 100644 --- a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx +++ b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx @@ -4,13 +4,14 @@ import { Pressable, PressableProps, StyleSheet } from 'react-native'; import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { NewClose } from '../../../../icons/NewClose'; +import { primitives } from '../../../../theme'; type AttachmentRemoveControlProps = PressableProps; export const AttachmentRemoveControl = ({ onPress }: AttachmentRemoveControlProps) => { const { theme: { - colors: { control }, + semantics, messageInput: { dismissAttachmentUpload: { dismiss, dismissIcon, dismissIconColor }, }, @@ -30,29 +31,34 @@ export const AttachmentRemoveControl = ({ onPress }: AttachmentRemoveControlProp ]} testID='remove-upload-preview' > - + ); }; const useStyles = () => { const { - theme: { - colors: { control }, - radius, - }, + theme: { semantics }, } = useTheme(); + + const { controlRemoveControlBg, controlRemoveControlBorder } = semantics; + return useMemo( () => StyleSheet.create({ dismiss: { - backgroundColor: control.bg, - borderColor: control.border, - borderRadius: radius.xl, + backgroundColor: controlRemoveControlBg, + borderColor: controlRemoveControlBorder, + borderRadius: primitives.radiusXl, borderWidth: 2, overflow: 'hidden', }, }), - [control, radius], + [controlRemoveControlBg, controlRemoveControlBorder], ); }; diff --git a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList.tsx b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList.tsx index 60b2fa8ec..9e0273548 100644 --- a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList.tsx +++ b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useMemo } from 'react'; +import React, { useCallback } from 'react'; import { FlatList, StyleSheet, View } from 'react-native'; import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated'; @@ -20,6 +20,7 @@ import { } from '../../../../contexts/messageInputContext/MessageInputContext'; import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { isSoundPackageAvailable } from '../../../../native'; +import { primitives } from '../../../../theme'; const IMAGE_PREVIEW_SIZE = 72; const FILE_PREVIEW_HEIGHT = 224; @@ -33,7 +34,6 @@ export type AttachmentUploadListPreviewPropsWithContext = Pick< >; const ItemSeparatorComponent = () => { - const styles = useStyles(); const { theme: { messageInput: { @@ -76,7 +76,6 @@ const UnMemoizedAttachmentUploadPreviewList = ( const { attachmentManager } = useMessageComposer(); const { attachments } = useAttachmentManagerState(); - const styles = useStyles(); const { theme: { messageInput: { @@ -234,25 +233,15 @@ export const AttachmentUploadPreviewList = (props: AttachmentUploadPreviewListPr ); }; -const useStyles = () => { - const { - theme: { spacing }, - } = useTheme(); - - return useMemo( - () => - StyleSheet.create({ - flatList: { - overflow: 'visible', - }, - itemSeparator: { - width: spacing.xs, - }, - wrapper: {}, - }), - [spacing.xs], - ); -}; +const styles = StyleSheet.create({ + flatList: { + overflow: 'visible', + }, + itemSeparator: { + width: primitives.spacingXs, + }, + wrapper: {}, +}); AttachmentUploadPreviewList.displayName = 'AttachmentUploadPreviewList{messageInput{attachmentUploadPreviewList}}'; diff --git a/package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx b/package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx index 06e615616..91c2c6a0b 100644 --- a/package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx +++ b/package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx @@ -13,6 +13,7 @@ import { WritingDirectionAwareText } from '../../../../components/RTLComponents/ import { useChatContext } from '../../../../contexts/chatContext/ChatContext'; import { useMessagesContext } from '../../../../contexts/messagesContext/MessagesContext'; import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; +import { primitives } from '../../../../theme'; import { UploadAttachmentPreviewProps } from '../../../../types/types'; import { getDurationLabelFromDuration, @@ -106,25 +107,23 @@ export const FileAttachmentUploadPreview = ({ const useStyles = () => { const { - theme: { - colors: { border, text }, - radius, - spacing, - typography: { fontSize, fontWeight }, - }, + theme: { semantics }, } = useTheme(); + + const { borderCoreDefault, textPrimary, textSecondary } = semantics; + return useMemo( () => StyleSheet.create({ dismissWrapper: { position: 'absolute', right: 0, top: 0 }, fileContainer: { - borderRadius: radius.lg, - borderColor: border.surfaceSubtle, + borderRadius: primitives.radiusLg, + borderColor: borderCoreDefault, borderWidth: 1, flexDirection: 'row', - gap: spacing.sm, + gap: primitives.spacingSm, width: 224, // TODO: Not sure how to omit this - padding: spacing.md, + padding: primitives.spacingMd, }, fileContent: { flexShrink: 1, @@ -136,21 +135,21 @@ const useStyles = () => { justifyContent: 'center', }, filenameText: { - color: text.primary, - fontSize: fontSize.xs, - fontWeight: fontWeight.semibold, + color: textPrimary, + fontSize: primitives.typographyFontSizeXs, + fontWeight: primitives.typographyFontWeightSemiBold, }, fileSizeText: { - color: text.secondary, - fontSize: fontSize.xs, + color: textSecondary, + fontSize: primitives.typographyFontSizeXs, }, overlay: { - borderRadius: radius.lg, + borderRadius: primitives.radiusLg, }, wrapper: { - padding: spacing.xxs, + padding: primitives.spacingXxs, }, }), - [radius, border, spacing, text, fontSize, fontWeight], + [borderCoreDefault, textPrimary, textSecondary], ); }; diff --git a/package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx b/package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx index f28c6a489..552bfe925 100644 --- a/package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx +++ b/package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx @@ -10,6 +10,7 @@ import { AttachmentUploadProgressIndicator } from './AttachmentUploadProgressInd import { useChatContext } from '../../../../contexts/chatContext/ChatContext'; import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; +import { primitives } from '../../../../theme'; import { UploadAttachmentPreviewProps } from '../../../../types/types'; import { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../../../utils/utils'; @@ -83,14 +84,17 @@ export const ImageAttachmentUploadPreview = ({ const useStyles = () => { const { - theme: { spacing, radius, colors }, + theme: { semantics }, } = useTheme(); + + const { borderCoreOpacity10 } = semantics; + return useMemo( () => StyleSheet.create({ container: { - borderColor: colors.border.image, - borderRadius: radius.lg, + borderColor: borderCoreOpacity10, + borderRadius: primitives.radiusLg, borderWidth: 1, flexDirection: 'row', overflow: 'hidden', @@ -101,9 +105,9 @@ const useStyles = () => { width: IMAGE_PREVIEW_SIZE, }, wrapper: { - padding: spacing.xxs, + padding: primitives.spacingXxs, }, }), - [colors, radius, spacing], + [borderCoreOpacity10], ); }; diff --git a/package/src/components/MessageMenu/__tests__/MessageUserReactionsAvatar.test.tsx b/package/src/components/MessageMenu/__tests__/MessageUserReactionsAvatar.test.tsx index b34f4d157..dd8d675c0 100644 --- a/package/src/components/MessageMenu/__tests__/MessageUserReactionsAvatar.test.tsx +++ b/package/src/components/MessageMenu/__tests__/MessageUserReactionsAvatar.test.tsx @@ -2,18 +2,24 @@ import React from 'react'; import { render } from '@testing-library/react-native'; -import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext'; import { defaultTheme } from '../../../contexts/themeContext/utils/theme'; +import { getTestClientWithUser } from '../../../mock-builders/mock'; +import { Chat } from '../../Chat/Chat'; import { MessageUserReactionsAvatar } from '../MessageUserReactionsAvatar'; describe('MessageUserReactionsAvatar', () => { const reaction = { id: 'test-user', image: 'image-url', name: 'Test User', type: 'like' }; // Mock reaction data + let chatClient; + + beforeEach(async () => { + chatClient = await getTestClientWithUser({ id: 'me' }); + }); it('should render Avatar with correct image, name, and default size', () => { const { queryByTestId } = render( - + - , + , ); // Check if the mocked Avatar component is rendered with correct props @@ -21,12 +27,10 @@ describe('MessageUserReactionsAvatar', () => { }); it('should render Avatar with correct image, name, and custom size', () => { - const customSize = 40; - const { queryByTestId } = render( - - - , + + + , ); // Check if the mocked Avatar component is rendered with correct custom size diff --git a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap index 2975d9b1d..dd198003b 100644 --- a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap +++ b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap @@ -313,10 +313,10 @@ exports[`Thread should match thread snapshot 1`] = ` "width": 24, }, { - "backgroundColor": "#FFF1C2", + "backgroundColor": "#fcedb9", }, { - "borderColor": "hsla(0, 0%, 0%, 0.1)", + "borderColor": "rgba(0, 0, 0, 0.1)", "borderWidth": 1, }, ] @@ -689,10 +689,10 @@ exports[`Thread should match thread snapshot 1`] = ` "width": 24, }, { - "backgroundColor": "#C9FCE7", + "backgroundColor": "#bdfcdb", }, { - "borderColor": "hsla(0, 0%, 0%, 0.1)", + "borderColor": "rgba(0, 0, 0, 0.1)", "borderWidth": 1, }, ] @@ -1103,10 +1103,10 @@ exports[`Thread should match thread snapshot 1`] = ` "width": 24, }, { - "backgroundColor": "#FFF1C2", + "backgroundColor": "#fcedb9", }, { - "borderColor": "hsla(0, 0%, 0%, 0.1)", + "borderColor": "rgba(0, 0, 0, 0.1)", "borderWidth": 1, }, ] @@ -1483,10 +1483,10 @@ exports[`Thread should match thread snapshot 1`] = ` "width": 24, }, { - "backgroundColor": "#C9FCE7", + "backgroundColor": "#bdfcdb", }, { - "borderColor": "hsla(0, 0%, 0%, 0.1)", + "borderColor": "rgba(0, 0, 0, 0.1)", "borderWidth": 1, }, ] @@ -1887,7 +1887,7 @@ exports[`Thread should match thread snapshot 1`] = ` }, { "backgroundColor": "#FFFFFF", - "borderColor": "#E2E6EA", + "borderColor": "#d5dbe1", "paddingBottom": 16, }, {}, diff --git a/package/src/components/ui/Avatar/Avatar.tsx b/package/src/components/ui/Avatar/Avatar.tsx index 7a6b393f9..a869d095c 100644 --- a/package/src/components/ui/Avatar/Avatar.tsx +++ b/package/src/components/ui/Avatar/Avatar.tsx @@ -1,26 +1,27 @@ import React, { useCallback, useMemo, useState } from 'react'; -import { Image, StyleSheet, View } from 'react-native'; +import { ColorValue, StyleSheet, View } from 'react-native'; import { avatarSizes } from './constants'; +import { useChatContext } from '../../../contexts'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; +import { primitives } from '../../../theme'; export type AvatarProps = { size: 'xs' | 'sm' | 'md' | 'lg'; imageUrl?: string; placeholder?: React.ReactNode; showBorder?: boolean; - backgroundColor?: string; + backgroundColor?: ColorValue; }; export const Avatar = (props: AvatarProps) => { const [error, setError] = useState(false); const { - theme: { - colors: { avatarPalette }, - }, + theme: { semantics }, } = useTheme(); - const defaultAvatarBg = avatarPalette?.[0].bg; + const { ImageComponent } = useChatContext(); + const defaultAvatarBg = semantics.avatarPaletteBg1; const { backgroundColor = defaultAvatarBg, size, imageUrl, placeholder, showBorder } = props; const styles = useStyles(); @@ -39,7 +40,7 @@ export const Avatar = (props: AvatarProps) => { testID='avatar-image' > {imageUrl && !error ? ( - { const useStyles = () => { const { - theme: { colors, radius }, + theme: { semantics }, } = useTheme(); + const { borderCoreOpacity10 } = semantics; return useMemo( () => StyleSheet.create({ border: { - borderColor: colors.border.image, + borderColor: borderCoreOpacity10, borderWidth: 1, }, container: { alignItems: 'center', - borderRadius: radius.full, + borderRadius: primitives.radiusMax, justifyContent: 'center', overflow: 'hidden', }, image: {}, }), - [colors, radius], + [borderCoreOpacity10], ); }; diff --git a/package/src/components/ui/Avatar/ChannelAvatar.tsx b/package/src/components/ui/Avatar/ChannelAvatar.tsx index bc1c6dd2d..9755528ba 100644 --- a/package/src/components/ui/Avatar/ChannelAvatar.tsx +++ b/package/src/components/ui/Avatar/ChannelAvatar.tsx @@ -28,24 +28,21 @@ export const ChannelAvatar = (props: ChannelAvatarProps) => { const online = useChannelPreviewDisplayPresence(channel); const { - theme: { - colors: { avatarPalette }, - }, + theme: { semantics }, } = useTheme(); const hashedValue = hashStringToNumber(channel.cid); - const index = hashedValue % (avatarPalette?.length ?? 1); - const avatarColors = avatarPalette?.[index]; + const index = ((hashedValue % 5) + 1) as 1 | 2 | 3 | 4 | 5; + const avatarBackgroundColor = semantics[`avatarPaletteBg${index}`]; + const avatarTextColor = semantics[`avatarPaletteText${index}`]; const { size, showBorder = true, showOnlineIndicator = online } = props; const channelImage = channel.data?.image; const placeholder = useMemo(() => { - return ( - - ); - }, [size, avatarColors]); + return ; + }, [size, avatarTextColor]); if (!channelImage) { const otherMembers = members.filter((member) => member.user?.id !== client?.user?.id); @@ -66,7 +63,7 @@ export const ChannelAvatar = (props: ChannelAvatarProps) => { return ( { const { user, size, showBorder = !!user.image, showOnlineIndicator } = props; const { - theme: { - colors: { avatarPalette }, - }, + theme: { semantics }, } = useTheme(); const styles = useStyles(); const hashedValue = hashStringToNumber(user.id); - const index = hashedValue % (avatarPalette?.length ?? 1); - const avatarColors = avatarPalette?.[index]; + const index = ((hashedValue % 5) + 1) as 1 | 2 | 3 | 4 | 5; + const avatarBackgroundColor = semantics[`avatarPaletteBg${index}`]; + const avatarTextColor = semantics[`avatarPaletteText${index}`]; const placeholder = useMemo(() => { if (user.name) { return ( - + {getInitialsFromName(user.name, numberOfInitials[size])} ); } else { return ( - + ); } - }, [user.name, size, avatarColors]); + }, [user.name, size, avatarTextColor]); return ( = { const fontSizes: Record< UserAvatarProps['size'], - { fontSize: number; lineHeight: number; fontWeight: FontWeightType } + { fontSize: number; lineHeight: number; fontWeight: TextStyle['fontWeight'] } > = { xs: { fontSize: 12, lineHeight: 16, fontWeight: '600' }, sm: { fontSize: 13, lineHeight: 16, fontWeight: '600' }, diff --git a/package/src/components/ui/BadgeCount.tsx b/package/src/components/ui/BadgeCount.tsx index 87fb66136..f96653ab4 100644 --- a/package/src/components/ui/BadgeCount.tsx +++ b/package/src/components/ui/BadgeCount.tsx @@ -2,6 +2,7 @@ import React, { useMemo } from 'react'; import { StyleSheet, Text } from 'react-native'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; +import { primitives } from '../../theme'; export type BadgeCountProps = { count: number; @@ -30,26 +31,25 @@ export const BadgeCount = (props: BadgeCountProps) => { const useStyles = () => { const { - theme: { - colors: { border, badge }, - typography, - }, + theme: { semantics }, } = useTheme(); + const { badgeBgInverse, badgeTextInverse, borderCoreSubtle } = semantics; + return useMemo( () => StyleSheet.create({ text: { - backgroundColor: badge.bgInverse, - borderColor: border.surfaceSubtle, + backgroundColor: badgeBgInverse, + borderColor: borderCoreSubtle, borderWidth: 1, - color: badge.textInverse, - fontSize: typography.fontSize.xs, - fontWeight: typography.fontWeight.bold, + color: badgeTextInverse, + fontSize: primitives.typographyFontSizeXs, + fontWeight: primitives.typographyFontWeightBold, includeFontPadding: false, textAlign: 'center', }, }), - [border, badge, typography], + [badgeBgInverse, badgeTextInverse, borderCoreSubtle], ); }; diff --git a/package/src/components/ui/BadgeNotification.tsx b/package/src/components/ui/BadgeNotification.tsx index 36b81811f..28227262e 100644 --- a/package/src/components/ui/BadgeNotification.tsx +++ b/package/src/components/ui/BadgeNotification.tsx @@ -2,6 +2,7 @@ import React, { useMemo } from 'react'; import { StyleSheet, Text } from 'react-native'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; +import { primitives } from '../../theme'; export type BadgeNotificationProps = { type: 'primary' | 'error' | 'neutral'; @@ -29,15 +30,13 @@ export const BadgeNotification = (props: BadgeNotificationProps) => { const { type, count, size = 'md', testID } = props; const styles = useStyles(); const { - theme: { - colors: { accent }, - }, + theme: { semantics }, } = useTheme(); const colors = { - error: accent.error, - neutral: accent.neutral, - primary: accent.primary, + error: semantics.badgeBgError, + neutral: semantics.badgeBgNeutral, + primary: semantics.badgeBgPrimary, }; return ( @@ -49,26 +48,24 @@ export const BadgeNotification = (props: BadgeNotificationProps) => { const useStyles = () => { const { - theme: { - radius, - colors: { badge }, - typography, - spacing, - }, + theme: { semantics }, } = useTheme(); + + const { badgeText, badgeBorder } = semantics; + return useMemo( () => StyleSheet.create({ text: { - color: badge.text, - fontWeight: typography.fontWeight.bold, + color: badgeText, + fontWeight: primitives.typographyFontWeightBold, includeFontPadding: false, textAlign: 'center', - paddingHorizontal: spacing.xxs, - borderColor: badge.border, - borderRadius: radius.full, + paddingHorizontal: primitives.spacingXxs, + borderColor: badgeBorder, + borderRadius: primitives.radiusMax, }, }), - [radius, badge, typography, spacing], + [badgeText, badgeBorder], ); }; diff --git a/package/src/components/ui/OnlineIndicator.tsx b/package/src/components/ui/OnlineIndicator.tsx index 2dda8b0c3..129aee3dc 100644 --- a/package/src/components/ui/OnlineIndicator.tsx +++ b/package/src/components/ui/OnlineIndicator.tsx @@ -2,6 +2,7 @@ import React, { useMemo } from 'react'; import { StyleSheet, View } from 'react-native'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; +import { primitives } from '../../theme'; export type OnlineIndicatorProps = { online: boolean; @@ -33,25 +34,25 @@ export const OnlineIndicator = ({ online, size = 'md' }: OnlineIndicatorProps) = const useStyles = () => { const { - theme: { - colors: { accent, presence }, - radius, - }, + theme: { semantics }, } = useTheme(); + + const { presenceBorder, presenceBgOffline, presenceBgOnline } = semantics; + return useMemo( () => StyleSheet.create({ indicator: { - borderColor: presence.border, - borderRadius: radius.full, + borderColor: presenceBorder, + borderRadius: primitives.radiusMax, }, online: { - backgroundColor: accent.success, + backgroundColor: presenceBgOnline, }, offline: { - backgroundColor: accent.neutral, + backgroundColor: presenceBgOffline, }, }), - [accent, presence, radius], + [presenceBgOnline, presenceBgOffline, presenceBorder], ); }; diff --git a/package/src/components/ui/VideoPlayIndicator.tsx b/package/src/components/ui/VideoPlayIndicator.tsx index 3bffc0dba..eea69aadc 100644 --- a/package/src/components/ui/VideoPlayIndicator.tsx +++ b/package/src/components/ui/VideoPlayIndicator.tsx @@ -1,9 +1,9 @@ import React, { useMemo } from 'react'; import { StyleSheet, View } from 'react-native'; -import { useTheme } from '../../contexts/themeContext/ThemeContext'; +import { useTheme } from '../../contexts'; import { NewPlayIcon } from '../../icons/NewPlayIcon'; -import { palette } from '../../theme/primitives/palette'; +import { primitives } from '../../theme'; const sizes = { lg: { @@ -32,27 +32,37 @@ export type VideoPlayIndicatorProps = { export const VideoPlayIndicator = (props: VideoPlayIndicatorProps) => { const { size = 'md' } = props; + const { + theme: { semantics }, + } = useTheme(); const styles = useStyles(); return ( - + ); }; const useStyles = () => { const { - theme: { radius }, + theme: { semantics }, } = useTheme(); + + const { controlPlayControlBgInverse } = semantics; + return useMemo(() => { return StyleSheet.create({ container: { alignItems: 'center', - backgroundColor: palette.black, - borderRadius: radius.full, + backgroundColor: controlPlayControlBgInverse, + borderRadius: primitives.radiusMax, justifyContent: 'center', }, }); - }, [radius]); + }, [controlPlayControlBgInverse]); }; diff --git a/package/src/contexts/themeContext/ThemeContext.tsx b/package/src/contexts/themeContext/ThemeContext.tsx index 7df5f4328..3d7db92b7 100644 --- a/package/src/contexts/themeContext/ThemeContext.tsx +++ b/package/src/contexts/themeContext/ThemeContext.tsx @@ -4,6 +4,7 @@ import merge from 'lodash/merge'; import { defaultTheme, Theme } from './utils/theme'; +import { resolveTokensTopologically } from '../../theme/topologicalResolution'; import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue'; import { isTestEnvironment } from '../utils/isTestEnvironment'; @@ -37,7 +38,9 @@ export const mergeThemes = (params: MergedThemesParams) => { merge(finalTheme, style); } - return finalTheme; + const semantics = resolveTokensTopologically(finalTheme.semantics); + + return { ...finalTheme, semantics }; }; export const ThemeContext = React.createContext(DEFAULT_BASE_CONTEXT_VALUE as Theme); diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts index c7cf91cab..6bf086b5b 100644 --- a/package/src/contexts/themeContext/utils/theme.ts +++ b/package/src/contexts/themeContext/utils/theme.ts @@ -2,10 +2,7 @@ import { type ColorValue, type ImageStyle, type TextStyle, type ViewStyle } from import type { CircleProps, StopProps } from 'react-native-svg'; import type { IconProps } from '../../../icons/utils/base'; -import { AvatarPalette, lightColors, type NewColors } from '../../../theme/primitives/colors'; -import { Radius } from '../../../theme/primitives/radius'; -import { Spacing } from '../../../theme/primitives/spacing'; -import { Typography } from '../../../theme/primitives/typography'; +import { semantics } from '../../../theme'; export const DEFAULT_STATUS_ICON_SIZE = 16; export const BASE_AVATAR_SIZE = 32; @@ -169,6 +166,7 @@ export type Theme = { height: number; maskFillColor?: ColorValue; }; + colors: typeof Colors; channelPreview: { avatar: { size: number; @@ -191,8 +189,6 @@ export type Theme = { unreadContainer: ViewStyle; unreadText: TextStyle; }; - colors: typeof Colors & - NewColors & { [key: string]: string | { [key: string]: string } | AvatarPalette }; dateHeader: { container: ViewStyle; text: TextStyle; @@ -890,15 +886,11 @@ export type Theme = { thumb: ViewStyle; waveform: ViewStyle; }; - spacing: typeof Spacing; - radius: typeof Radius; - typography: typeof Typography; + semantics: typeof semantics; }; export const defaultTheme: Theme = { - spacing: Spacing, - radius: Radius, - typography: Typography, + semantics, aiTypingIndicatorView: { container: {}, text: {}, @@ -1013,10 +1005,7 @@ export const defaultTheme: Theme = { unreadContainer: {}, unreadText: {}, }, - colors: { - ...Colors, - ...lightColors, - }, + colors: Colors, dateHeader: { container: {}, text: {}, diff --git a/package/src/theme/StreamTokens.types.ts b/package/src/theme/StreamTokens.types.ts new file mode 100644 index 000000000..8375e8089 --- /dev/null +++ b/package/src/theme/StreamTokens.types.ts @@ -0,0 +1,494 @@ +// This file is autogenerated. Please do not edit it. + +import type { ColorValue, TextStyle, ViewStyle } from 'react-native'; + +export type RNShadowToken = Required< + Pick +>; + +export interface FoundationsColors { + baseBlack: ColorValue; + baseTransparent0: ColorValue; + baseTransparentBlack10: ColorValue; + baseTransparentBlack5: ColorValue; + baseTransparentBlack70: ColorValue; + baseTransparentWhite10: ColorValue; + baseTransparentWhite20: ColorValue; + baseTransparentWhite70: ColorValue; + baseWhite: ColorValue; + blue100: ColorValue; + blue150: ColorValue; + blue200: ColorValue; + blue300: ColorValue; + blue400: ColorValue; + blue50: ColorValue; + blue500: ColorValue; + blue600: ColorValue; + blue700: ColorValue; + blue800: ColorValue; + blue900: ColorValue; + cyan100: ColorValue; + cyan150: ColorValue; + cyan200: ColorValue; + cyan300: ColorValue; + cyan400: ColorValue; + cyan50: ColorValue; + cyan500: ColorValue; + cyan600: ColorValue; + cyan700: ColorValue; + cyan800: ColorValue; + cyan900: ColorValue; + green100: ColorValue; + green150: ColorValue; + green200: ColorValue; + green300: ColorValue; + green400: ColorValue; + green50: ColorValue; + green500: ColorValue; + green600: ColorValue; + green700: ColorValue; + green800: ColorValue; + green900: ColorValue; + lime100: ColorValue; + lime150: ColorValue; + lime200: ColorValue; + lime300: ColorValue; + lime400: ColorValue; + lime50: ColorValue; + lime500: ColorValue; + lime600: ColorValue; + lime700: ColorValue; + lime800: ColorValue; + lime900: ColorValue; + neutral100: ColorValue; + neutral150: ColorValue; + neutral200: ColorValue; + neutral300: ColorValue; + neutral400: ColorValue; + neutral50: ColorValue; + neutral500: ColorValue; + neutral600: ColorValue; + neutral700: ColorValue; + neutral800: ColorValue; + neutral900: ColorValue; + purple100: ColorValue; + purple150: ColorValue; + purple200: ColorValue; + purple300: ColorValue; + purple400: ColorValue; + purple50: ColorValue; + purple500: ColorValue; + purple600: ColorValue; + purple700: ColorValue; + purple800: ColorValue; + purple900: ColorValue; + red100: ColorValue; + red150: ColorValue; + red200: ColorValue; + red300: ColorValue; + red400: ColorValue; + red50: ColorValue; + red500: ColorValue; + red600: ColorValue; + red700: ColorValue; + red800: ColorValue; + red900: ColorValue; + slate100: ColorValue; + slate150: ColorValue; + slate200: ColorValue; + slate300: ColorValue; + slate400: ColorValue; + slate50: ColorValue; + slate500: ColorValue; + slate600: ColorValue; + slate700: ColorValue; + slate800: ColorValue; + slate900: ColorValue; + violet100: ColorValue; + violet150: ColorValue; + violet200: ColorValue; + violet300: ColorValue; + violet400: ColorValue; + violet50: ColorValue; + violet500: ColorValue; + violet600: ColorValue; + violet700: ColorValue; + violet800: ColorValue; + violet900: ColorValue; + yellow100: ColorValue; + yellow150: ColorValue; + yellow200: ColorValue; + yellow300: ColorValue; + yellow400: ColorValue; + yellow50: ColorValue; + yellow500: ColorValue; + yellow600: ColorValue; + yellow700: ColorValue; + yellow800: ColorValue; + yellow900: ColorValue; +} + +export interface FoundationsLayout { + size12: number; + size128: number; + size16: number; + size2: number; + size20: number; + size24: number; + size240: number; + size28: number; + size32: number; + size320: number; + size4: number; + size40: number; + size48: number; + size480: number; + size560: number; + size6: number; + size64: number; + size640: number; + size8: number; + size80: number; +} + +export interface FoundationsRadius { + radius0: number; + radius12: number; + radius16: number; + radius2: number; + radius20: number; + radius24: number; + radius32: number; + radius4: number; + radius6: number; + radius8: number; + radiusFull: number; +} + +export interface FoundationsSpacing { + space0: number; + space12: number; + space16: number; + space2: number; + space20: number; + space24: number; + space32: number; + space4: number; + space40: number; + space48: number; + space64: number; + space8: number; + space80: number; +} + +export interface FoundationsStroke { + w100: number; + w120: number; + w150: number; + w200: number; + w300: number; + w400: number; +} + +export interface FoundationsTypography { + fontFamilyGeist: TextStyle['fontFamily']; + fontFamilyGeistMono: TextStyle['fontFamily']; + fontFamilyRoboto: TextStyle['fontFamily']; + fontFamilyRobotoMono: TextStyle['fontFamily']; + fontFamilySfMono: TextStyle['fontFamily']; + fontFamilySfPro: TextStyle['fontFamily']; + fontSizeSize10: TextStyle['fontSize']; + fontSizeSize12: TextStyle['fontSize']; + fontSizeSize13: TextStyle['fontSize']; + fontSizeSize14: TextStyle['fontSize']; + fontSizeSize15: TextStyle['fontSize']; + fontSizeSize16: TextStyle['fontSize']; + fontSizeSize17: TextStyle['fontSize']; + fontSizeSize18: TextStyle['fontSize']; + fontSizeSize20: TextStyle['fontSize']; + fontSizeSize24: TextStyle['fontSize']; + fontSizeSize28: TextStyle['fontSize']; + fontSizeSize32: TextStyle['fontSize']; + fontSizeSize40: TextStyle['fontSize']; + fontSizeSize48: TextStyle['fontSize']; + fontSizeSize8: TextStyle['fontSize']; + fontWeightW400: TextStyle['fontWeight']; + fontWeightW500: TextStyle['fontWeight']; + fontWeightW600: TextStyle['fontWeight']; + fontWeightW700: TextStyle['fontWeight']; + lineHeightLineHeight10: TextStyle['lineHeight']; + lineHeightLineHeight12: TextStyle['lineHeight']; + lineHeightLineHeight14: TextStyle['lineHeight']; + lineHeightLineHeight15: TextStyle['lineHeight']; + lineHeightLineHeight16: TextStyle['lineHeight']; + lineHeightLineHeight17: TextStyle['lineHeight']; + lineHeightLineHeight18: TextStyle['lineHeight']; + lineHeightLineHeight20: TextStyle['lineHeight']; + lineHeightLineHeight24: TextStyle['lineHeight']; + lineHeightLineHeight28: TextStyle['lineHeight']; + lineHeightLineHeight32: TextStyle['lineHeight']; + lineHeightLineHeight40: TextStyle['lineHeight']; + lineHeightLineHeight48: TextStyle['lineHeight']; + lineHeightLineHeight8: TextStyle['lineHeight']; +} + +export interface ChatComponents { + buttonHitTargetMinHeight: number; + buttonHitTargetMinWidth: number; + buttonPaddingXIconOnlyLg: number; + buttonPaddingXIconOnlyMd: number; + buttonPaddingXIconOnlySm: number; + buttonPaddingXWithLabelLg: number; + buttonPaddingXWithLabelMd: number; + buttonPaddingXWithLabelSm: number; + buttonPaddingYLg: number; + buttonPaddingYMd: number; + buttonPaddingYSm: number; + buttonRadiusFull: number; + buttonRadiusLg: number; + buttonRadiusMd: number; + buttonRadiusSm: number; + buttonVisualHeightLg: number; + buttonVisualHeightMd: number; + buttonVisualHeightSm: number; + composerRadiusFixed: number; + composerRadiusFloating: number; + deviceRadius: number; + deviceSafeAreaBottom: number; + deviceSafeAreaTop: number; + iconSizeLg: number; + iconSizeMd: number; + iconSizeSm: number; + iconSizeXs: number; + iconStrokeDefault: number; + iconStrokeEmphasis: number; + iconStrokeSubtle: number; + messageBubbleRadiusAttachment: number; + messageBubbleRadiusAttachmentInline: number; + messageBubbleRadiusGroupBottom: number; + messageBubbleRadiusGroupMiddle: number; + messageBubbleRadiusGroupTop: number; + messageBubbleRadiusTail: number; +} + +export interface ChatPrimitives { + darkElevation0: RNShadowToken; + darkElevation1: RNShadowToken; + darkElevation2: RNShadowToken; + darkElevation3: RNShadowToken; + darkElevation4: RNShadowToken; + lightElevation0: RNShadowToken; + lightElevation1: RNShadowToken; + lightElevation2: RNShadowToken; + lightElevation3: RNShadowToken; + lightElevation4: RNShadowToken; + radius2xl: number; + radius3xl: number; + radius4xl: number; + radiusLg: number; + radiusMax: number; + radiusMd: number; + radiusNone: number; + radiusSm: number; + radiusXl: number; + radiusXs: number; + radiusXxs: number; + spacing2xl: number; + spacing3xl: number; + spacingLg: number; + spacingMd: number; + spacingNone: number; + spacingSm: number; + spacingXl: number; + spacingXs: number; + spacingXxs: number; + spacingXxxs: number; + typographyFontFamilyMono: TextStyle['fontFamily']; + typographyFontFamilySans: TextStyle['fontFamily']; + typographyFontSize2xl: TextStyle['fontSize']; + typographyFontSizeLg: TextStyle['fontSize']; + typographyFontSizeMd: TextStyle['fontSize']; + typographyFontSizeMicro: TextStyle['fontSize']; + typographyFontSizeSm: TextStyle['fontSize']; + typographyFontSizeXl: TextStyle['fontSize']; + typographyFontSizeXs: TextStyle['fontSize']; + typographyFontSizeXxs: TextStyle['fontSize']; + typographyFontWeightBold: TextStyle['fontWeight']; + typographyFontWeightMedium: TextStyle['fontWeight']; + typographyFontWeightRegular: TextStyle['fontWeight']; + typographyFontWeightSemiBold: TextStyle['fontWeight']; + typographyLineHeightNormal: TextStyle['lineHeight']; + typographyLineHeightRelaxed: TextStyle['lineHeight']; + typographyLineHeightTight: TextStyle['lineHeight']; +} + +export interface ChatSemantics { + accentBlack: ColorValue; + accentError: ColorValue; + accentNeutral: ColorValue; + accentPrimary: ColorValue; + accentSuccess: ColorValue; + accentWarning: ColorValue; + avatarBgDefault: ColorValue; + avatarBgPlaceholder: ColorValue; + avatarPaletteBg1: ColorValue; + avatarPaletteBg2: ColorValue; + avatarPaletteBg3: ColorValue; + avatarPaletteBg4: ColorValue; + avatarPaletteBg5: ColorValue; + avatarPaletteText1: ColorValue; + avatarPaletteText2: ColorValue; + avatarPaletteText3: ColorValue; + avatarPaletteText4: ColorValue; + avatarPaletteText5: ColorValue; + avatarTextDefault: ColorValue; + avatarTextPlaceholder: ColorValue; + backgroundCoreApp: ColorValue; + backgroundCoreDisabled: ColorValue; + backgroundCoreHover: ColorValue; + backgroundCoreOverlay: ColorValue; + backgroundCorePressed: ColorValue; + backgroundCoreScrim: ColorValue; + backgroundCoreSelected: ColorValue; + backgroundCoreSurface: ColorValue; + backgroundCoreSurfaceStrong: ColorValue; + backgroundCoreSurfaceSubtle: ColorValue; + backgroundElevationElevation0: ColorValue; + backgroundElevationElevation1: ColorValue; + backgroundElevationElevation2: ColorValue; + backgroundElevationElevation3: ColorValue; + backgroundElevationElevation4: ColorValue; + badgeBgDefault: ColorValue; + badgeBgError: ColorValue; + badgeBgInverse: ColorValue; + badgeBgNeutral: ColorValue; + badgeBgPrimary: ColorValue; + badgeBorder: ColorValue; + badgeText: ColorValue; + badgeTextInverse: ColorValue; + borderCoreDefault: ColorValue; + borderCoreOnAccent: ColorValue; + borderCoreOnDark: ColorValue; + borderCoreOpacity10: ColorValue; + borderCoreOpacity25: ColorValue; + borderCoreStrong: ColorValue; + borderCoreSubtle: ColorValue; + borderUtilityDisabled: ColorValue; + borderUtilityError: ColorValue; + borderUtilityFocus: ColorValue; + borderUtilitySelected: ColorValue; + borderUtilitySuccess: ColorValue; + borderUtilityWarning: ColorValue; + brand100: ColorValue; + brand150: ColorValue; + brand200: ColorValue; + brand300: ColorValue; + brand400: ColorValue; + brand50: ColorValue; + brand500: ColorValue; + brand600: ColorValue; + brand700: ColorValue; + brand800: ColorValue; + brand900: ColorValue; + buttonDestructiveBg: ColorValue; + buttonDestructiveBgLiquidGlass: ColorValue; + buttonDestructiveBorder: ColorValue; + buttonDestructiveText: ColorValue; + buttonDestructiveTextOnAccent: ColorValue; + buttonPrimaryBg: ColorValue; + buttonPrimaryBgLiquidGlass: ColorValue; + buttonPrimaryBorder: ColorValue; + buttonPrimaryText: ColorValue; + buttonPrimaryTextOnAccent: ColorValue; + buttonSecondaryBg: ColorValue; + buttonSecondaryBgLiquidGlass: ColorValue; + buttonSecondaryBorder: ColorValue; + buttonSecondaryText: ColorValue; + buttonSecondaryTextOnAccent: ColorValue; + chatBgAttachmentIncoming: ColorValue; + chatBgAttachmentOutgoing: ColorValue; + chatBgIncoming: ColorValue; + chatBgOutgoing: ColorValue; + chatBgTypingIndicator: ColorValue; + chatBorderIncoming: ColorValue; + chatBorderOnChatIncoming: ColorValue; + chatBorderOnChatOutgoing: ColorValue; + chatBorderOutgoing: ColorValue; + chatPollProgressFillIncoming: ColorValue; + chatPollProgressFillOutgoing: ColorValue; + chatPollProgressTrackIncoming: ColorValue; + chatPollProgressTrackOutgoing: ColorValue; + chatReplyIndicatorIncoming: ColorValue; + chatReplyIndicatorOutgoing: ColorValue; + chatTextLink: ColorValue; + chatTextMention: ColorValue; + chatTextMessage: ColorValue; + chatTextReaction: ColorValue; + chatTextSystem: ColorValue; + chatTextTimestamp: ColorValue; + chatTextUsername: ColorValue; + chatThreadConnectorIncoming: ColorValue; + chatThreadConnectorOutgoing: ColorValue; + chatWaveformBar: ColorValue; + chatWaveformBarPlaying: ColorValue; + composerBg: ColorValue; + controlPlayControlBg: ColorValue; + controlPlayControlBgInverse: ColorValue; + controlPlayControlBorder: ColorValue; + controlPlayControlIcon: ColorValue; + controlPlayControlIconInverse: ColorValue; + controlProgressBarFill: ColorValue; + controlProgressBarTrack: ColorValue; + controlRadiocheckBg: ColorValue; + controlRadiocheckBgSelected: ColorValue; + controlRadiocheckBorder: ColorValue; + controlRadiocheckIconSelected: ColorValue; + controlRemoveControlBg: ColorValue; + controlRemoveControlBorder: ColorValue; + controlRemoveControlIcon: ColorValue; + controlToggleSwitchBg: ColorValue; + controlToggleSwitchBgDisabled: ColorValue; + controlToggleSwitchBgSelected: ColorValue; + controlToggleSwitchKnob: ColorValue; + inputBorderDefault: ColorValue; + inputBorderFocus: ColorValue; + inputBorderHover: ColorValue; + inputSendIcon: ColorValue; + inputSendIconDisabled: ColorValue; + inputTextDefault: ColorValue; + inputTextDisabled: ColorValue; + inputTextIcon: ColorValue; + inputTextPlaceholder: ColorValue; + presenceBgOffline: ColorValue; + presenceBgOnline: ColorValue; + presenceBorder: ColorValue; + reactionBg: ColorValue; + reactionBorder: ColorValue; + reactionEmoji: ColorValue; + reactionText: ColorValue; + systemBgBlur: ColorValue; + systemCaret: ColorValue; + systemScrollbar: ColorValue; + systemText: ColorValue; + textDisabled: ColorValue; + textInverse: ColorValue; + textLink: ColorValue; + textOnAccent: ColorValue; + textPrimary: ColorValue; + textSecondary: ColorValue; + textTertiary: ColorValue; +} + +export interface IStreamTokens { + foundations: { + colors: FoundationsColors; + layout: FoundationsLayout; + radius: FoundationsRadius; + spacing: FoundationsSpacing; + stroke: FoundationsStroke; + typography: FoundationsTypography; + }; + components: ChatComponents; + primitives: ChatPrimitives; + semantics: ChatSemantics; +} diff --git a/package/src/theme/generated/StreamTokens.types.ts b/package/src/theme/generated/StreamTokens.types.ts new file mode 100644 index 000000000..8375e8089 --- /dev/null +++ b/package/src/theme/generated/StreamTokens.types.ts @@ -0,0 +1,494 @@ +// This file is autogenerated. Please do not edit it. + +import type { ColorValue, TextStyle, ViewStyle } from 'react-native'; + +export type RNShadowToken = Required< + Pick +>; + +export interface FoundationsColors { + baseBlack: ColorValue; + baseTransparent0: ColorValue; + baseTransparentBlack10: ColorValue; + baseTransparentBlack5: ColorValue; + baseTransparentBlack70: ColorValue; + baseTransparentWhite10: ColorValue; + baseTransparentWhite20: ColorValue; + baseTransparentWhite70: ColorValue; + baseWhite: ColorValue; + blue100: ColorValue; + blue150: ColorValue; + blue200: ColorValue; + blue300: ColorValue; + blue400: ColorValue; + blue50: ColorValue; + blue500: ColorValue; + blue600: ColorValue; + blue700: ColorValue; + blue800: ColorValue; + blue900: ColorValue; + cyan100: ColorValue; + cyan150: ColorValue; + cyan200: ColorValue; + cyan300: ColorValue; + cyan400: ColorValue; + cyan50: ColorValue; + cyan500: ColorValue; + cyan600: ColorValue; + cyan700: ColorValue; + cyan800: ColorValue; + cyan900: ColorValue; + green100: ColorValue; + green150: ColorValue; + green200: ColorValue; + green300: ColorValue; + green400: ColorValue; + green50: ColorValue; + green500: ColorValue; + green600: ColorValue; + green700: ColorValue; + green800: ColorValue; + green900: ColorValue; + lime100: ColorValue; + lime150: ColorValue; + lime200: ColorValue; + lime300: ColorValue; + lime400: ColorValue; + lime50: ColorValue; + lime500: ColorValue; + lime600: ColorValue; + lime700: ColorValue; + lime800: ColorValue; + lime900: ColorValue; + neutral100: ColorValue; + neutral150: ColorValue; + neutral200: ColorValue; + neutral300: ColorValue; + neutral400: ColorValue; + neutral50: ColorValue; + neutral500: ColorValue; + neutral600: ColorValue; + neutral700: ColorValue; + neutral800: ColorValue; + neutral900: ColorValue; + purple100: ColorValue; + purple150: ColorValue; + purple200: ColorValue; + purple300: ColorValue; + purple400: ColorValue; + purple50: ColorValue; + purple500: ColorValue; + purple600: ColorValue; + purple700: ColorValue; + purple800: ColorValue; + purple900: ColorValue; + red100: ColorValue; + red150: ColorValue; + red200: ColorValue; + red300: ColorValue; + red400: ColorValue; + red50: ColorValue; + red500: ColorValue; + red600: ColorValue; + red700: ColorValue; + red800: ColorValue; + red900: ColorValue; + slate100: ColorValue; + slate150: ColorValue; + slate200: ColorValue; + slate300: ColorValue; + slate400: ColorValue; + slate50: ColorValue; + slate500: ColorValue; + slate600: ColorValue; + slate700: ColorValue; + slate800: ColorValue; + slate900: ColorValue; + violet100: ColorValue; + violet150: ColorValue; + violet200: ColorValue; + violet300: ColorValue; + violet400: ColorValue; + violet50: ColorValue; + violet500: ColorValue; + violet600: ColorValue; + violet700: ColorValue; + violet800: ColorValue; + violet900: ColorValue; + yellow100: ColorValue; + yellow150: ColorValue; + yellow200: ColorValue; + yellow300: ColorValue; + yellow400: ColorValue; + yellow50: ColorValue; + yellow500: ColorValue; + yellow600: ColorValue; + yellow700: ColorValue; + yellow800: ColorValue; + yellow900: ColorValue; +} + +export interface FoundationsLayout { + size12: number; + size128: number; + size16: number; + size2: number; + size20: number; + size24: number; + size240: number; + size28: number; + size32: number; + size320: number; + size4: number; + size40: number; + size48: number; + size480: number; + size560: number; + size6: number; + size64: number; + size640: number; + size8: number; + size80: number; +} + +export interface FoundationsRadius { + radius0: number; + radius12: number; + radius16: number; + radius2: number; + radius20: number; + radius24: number; + radius32: number; + radius4: number; + radius6: number; + radius8: number; + radiusFull: number; +} + +export interface FoundationsSpacing { + space0: number; + space12: number; + space16: number; + space2: number; + space20: number; + space24: number; + space32: number; + space4: number; + space40: number; + space48: number; + space64: number; + space8: number; + space80: number; +} + +export interface FoundationsStroke { + w100: number; + w120: number; + w150: number; + w200: number; + w300: number; + w400: number; +} + +export interface FoundationsTypography { + fontFamilyGeist: TextStyle['fontFamily']; + fontFamilyGeistMono: TextStyle['fontFamily']; + fontFamilyRoboto: TextStyle['fontFamily']; + fontFamilyRobotoMono: TextStyle['fontFamily']; + fontFamilySfMono: TextStyle['fontFamily']; + fontFamilySfPro: TextStyle['fontFamily']; + fontSizeSize10: TextStyle['fontSize']; + fontSizeSize12: TextStyle['fontSize']; + fontSizeSize13: TextStyle['fontSize']; + fontSizeSize14: TextStyle['fontSize']; + fontSizeSize15: TextStyle['fontSize']; + fontSizeSize16: TextStyle['fontSize']; + fontSizeSize17: TextStyle['fontSize']; + fontSizeSize18: TextStyle['fontSize']; + fontSizeSize20: TextStyle['fontSize']; + fontSizeSize24: TextStyle['fontSize']; + fontSizeSize28: TextStyle['fontSize']; + fontSizeSize32: TextStyle['fontSize']; + fontSizeSize40: TextStyle['fontSize']; + fontSizeSize48: TextStyle['fontSize']; + fontSizeSize8: TextStyle['fontSize']; + fontWeightW400: TextStyle['fontWeight']; + fontWeightW500: TextStyle['fontWeight']; + fontWeightW600: TextStyle['fontWeight']; + fontWeightW700: TextStyle['fontWeight']; + lineHeightLineHeight10: TextStyle['lineHeight']; + lineHeightLineHeight12: TextStyle['lineHeight']; + lineHeightLineHeight14: TextStyle['lineHeight']; + lineHeightLineHeight15: TextStyle['lineHeight']; + lineHeightLineHeight16: TextStyle['lineHeight']; + lineHeightLineHeight17: TextStyle['lineHeight']; + lineHeightLineHeight18: TextStyle['lineHeight']; + lineHeightLineHeight20: TextStyle['lineHeight']; + lineHeightLineHeight24: TextStyle['lineHeight']; + lineHeightLineHeight28: TextStyle['lineHeight']; + lineHeightLineHeight32: TextStyle['lineHeight']; + lineHeightLineHeight40: TextStyle['lineHeight']; + lineHeightLineHeight48: TextStyle['lineHeight']; + lineHeightLineHeight8: TextStyle['lineHeight']; +} + +export interface ChatComponents { + buttonHitTargetMinHeight: number; + buttonHitTargetMinWidth: number; + buttonPaddingXIconOnlyLg: number; + buttonPaddingXIconOnlyMd: number; + buttonPaddingXIconOnlySm: number; + buttonPaddingXWithLabelLg: number; + buttonPaddingXWithLabelMd: number; + buttonPaddingXWithLabelSm: number; + buttonPaddingYLg: number; + buttonPaddingYMd: number; + buttonPaddingYSm: number; + buttonRadiusFull: number; + buttonRadiusLg: number; + buttonRadiusMd: number; + buttonRadiusSm: number; + buttonVisualHeightLg: number; + buttonVisualHeightMd: number; + buttonVisualHeightSm: number; + composerRadiusFixed: number; + composerRadiusFloating: number; + deviceRadius: number; + deviceSafeAreaBottom: number; + deviceSafeAreaTop: number; + iconSizeLg: number; + iconSizeMd: number; + iconSizeSm: number; + iconSizeXs: number; + iconStrokeDefault: number; + iconStrokeEmphasis: number; + iconStrokeSubtle: number; + messageBubbleRadiusAttachment: number; + messageBubbleRadiusAttachmentInline: number; + messageBubbleRadiusGroupBottom: number; + messageBubbleRadiusGroupMiddle: number; + messageBubbleRadiusGroupTop: number; + messageBubbleRadiusTail: number; +} + +export interface ChatPrimitives { + darkElevation0: RNShadowToken; + darkElevation1: RNShadowToken; + darkElevation2: RNShadowToken; + darkElevation3: RNShadowToken; + darkElevation4: RNShadowToken; + lightElevation0: RNShadowToken; + lightElevation1: RNShadowToken; + lightElevation2: RNShadowToken; + lightElevation3: RNShadowToken; + lightElevation4: RNShadowToken; + radius2xl: number; + radius3xl: number; + radius4xl: number; + radiusLg: number; + radiusMax: number; + radiusMd: number; + radiusNone: number; + radiusSm: number; + radiusXl: number; + radiusXs: number; + radiusXxs: number; + spacing2xl: number; + spacing3xl: number; + spacingLg: number; + spacingMd: number; + spacingNone: number; + spacingSm: number; + spacingXl: number; + spacingXs: number; + spacingXxs: number; + spacingXxxs: number; + typographyFontFamilyMono: TextStyle['fontFamily']; + typographyFontFamilySans: TextStyle['fontFamily']; + typographyFontSize2xl: TextStyle['fontSize']; + typographyFontSizeLg: TextStyle['fontSize']; + typographyFontSizeMd: TextStyle['fontSize']; + typographyFontSizeMicro: TextStyle['fontSize']; + typographyFontSizeSm: TextStyle['fontSize']; + typographyFontSizeXl: TextStyle['fontSize']; + typographyFontSizeXs: TextStyle['fontSize']; + typographyFontSizeXxs: TextStyle['fontSize']; + typographyFontWeightBold: TextStyle['fontWeight']; + typographyFontWeightMedium: TextStyle['fontWeight']; + typographyFontWeightRegular: TextStyle['fontWeight']; + typographyFontWeightSemiBold: TextStyle['fontWeight']; + typographyLineHeightNormal: TextStyle['lineHeight']; + typographyLineHeightRelaxed: TextStyle['lineHeight']; + typographyLineHeightTight: TextStyle['lineHeight']; +} + +export interface ChatSemantics { + accentBlack: ColorValue; + accentError: ColorValue; + accentNeutral: ColorValue; + accentPrimary: ColorValue; + accentSuccess: ColorValue; + accentWarning: ColorValue; + avatarBgDefault: ColorValue; + avatarBgPlaceholder: ColorValue; + avatarPaletteBg1: ColorValue; + avatarPaletteBg2: ColorValue; + avatarPaletteBg3: ColorValue; + avatarPaletteBg4: ColorValue; + avatarPaletteBg5: ColorValue; + avatarPaletteText1: ColorValue; + avatarPaletteText2: ColorValue; + avatarPaletteText3: ColorValue; + avatarPaletteText4: ColorValue; + avatarPaletteText5: ColorValue; + avatarTextDefault: ColorValue; + avatarTextPlaceholder: ColorValue; + backgroundCoreApp: ColorValue; + backgroundCoreDisabled: ColorValue; + backgroundCoreHover: ColorValue; + backgroundCoreOverlay: ColorValue; + backgroundCorePressed: ColorValue; + backgroundCoreScrim: ColorValue; + backgroundCoreSelected: ColorValue; + backgroundCoreSurface: ColorValue; + backgroundCoreSurfaceStrong: ColorValue; + backgroundCoreSurfaceSubtle: ColorValue; + backgroundElevationElevation0: ColorValue; + backgroundElevationElevation1: ColorValue; + backgroundElevationElevation2: ColorValue; + backgroundElevationElevation3: ColorValue; + backgroundElevationElevation4: ColorValue; + badgeBgDefault: ColorValue; + badgeBgError: ColorValue; + badgeBgInverse: ColorValue; + badgeBgNeutral: ColorValue; + badgeBgPrimary: ColorValue; + badgeBorder: ColorValue; + badgeText: ColorValue; + badgeTextInverse: ColorValue; + borderCoreDefault: ColorValue; + borderCoreOnAccent: ColorValue; + borderCoreOnDark: ColorValue; + borderCoreOpacity10: ColorValue; + borderCoreOpacity25: ColorValue; + borderCoreStrong: ColorValue; + borderCoreSubtle: ColorValue; + borderUtilityDisabled: ColorValue; + borderUtilityError: ColorValue; + borderUtilityFocus: ColorValue; + borderUtilitySelected: ColorValue; + borderUtilitySuccess: ColorValue; + borderUtilityWarning: ColorValue; + brand100: ColorValue; + brand150: ColorValue; + brand200: ColorValue; + brand300: ColorValue; + brand400: ColorValue; + brand50: ColorValue; + brand500: ColorValue; + brand600: ColorValue; + brand700: ColorValue; + brand800: ColorValue; + brand900: ColorValue; + buttonDestructiveBg: ColorValue; + buttonDestructiveBgLiquidGlass: ColorValue; + buttonDestructiveBorder: ColorValue; + buttonDestructiveText: ColorValue; + buttonDestructiveTextOnAccent: ColorValue; + buttonPrimaryBg: ColorValue; + buttonPrimaryBgLiquidGlass: ColorValue; + buttonPrimaryBorder: ColorValue; + buttonPrimaryText: ColorValue; + buttonPrimaryTextOnAccent: ColorValue; + buttonSecondaryBg: ColorValue; + buttonSecondaryBgLiquidGlass: ColorValue; + buttonSecondaryBorder: ColorValue; + buttonSecondaryText: ColorValue; + buttonSecondaryTextOnAccent: ColorValue; + chatBgAttachmentIncoming: ColorValue; + chatBgAttachmentOutgoing: ColorValue; + chatBgIncoming: ColorValue; + chatBgOutgoing: ColorValue; + chatBgTypingIndicator: ColorValue; + chatBorderIncoming: ColorValue; + chatBorderOnChatIncoming: ColorValue; + chatBorderOnChatOutgoing: ColorValue; + chatBorderOutgoing: ColorValue; + chatPollProgressFillIncoming: ColorValue; + chatPollProgressFillOutgoing: ColorValue; + chatPollProgressTrackIncoming: ColorValue; + chatPollProgressTrackOutgoing: ColorValue; + chatReplyIndicatorIncoming: ColorValue; + chatReplyIndicatorOutgoing: ColorValue; + chatTextLink: ColorValue; + chatTextMention: ColorValue; + chatTextMessage: ColorValue; + chatTextReaction: ColorValue; + chatTextSystem: ColorValue; + chatTextTimestamp: ColorValue; + chatTextUsername: ColorValue; + chatThreadConnectorIncoming: ColorValue; + chatThreadConnectorOutgoing: ColorValue; + chatWaveformBar: ColorValue; + chatWaveformBarPlaying: ColorValue; + composerBg: ColorValue; + controlPlayControlBg: ColorValue; + controlPlayControlBgInverse: ColorValue; + controlPlayControlBorder: ColorValue; + controlPlayControlIcon: ColorValue; + controlPlayControlIconInverse: ColorValue; + controlProgressBarFill: ColorValue; + controlProgressBarTrack: ColorValue; + controlRadiocheckBg: ColorValue; + controlRadiocheckBgSelected: ColorValue; + controlRadiocheckBorder: ColorValue; + controlRadiocheckIconSelected: ColorValue; + controlRemoveControlBg: ColorValue; + controlRemoveControlBorder: ColorValue; + controlRemoveControlIcon: ColorValue; + controlToggleSwitchBg: ColorValue; + controlToggleSwitchBgDisabled: ColorValue; + controlToggleSwitchBgSelected: ColorValue; + controlToggleSwitchKnob: ColorValue; + inputBorderDefault: ColorValue; + inputBorderFocus: ColorValue; + inputBorderHover: ColorValue; + inputSendIcon: ColorValue; + inputSendIconDisabled: ColorValue; + inputTextDefault: ColorValue; + inputTextDisabled: ColorValue; + inputTextIcon: ColorValue; + inputTextPlaceholder: ColorValue; + presenceBgOffline: ColorValue; + presenceBgOnline: ColorValue; + presenceBorder: ColorValue; + reactionBg: ColorValue; + reactionBorder: ColorValue; + reactionEmoji: ColorValue; + reactionText: ColorValue; + systemBgBlur: ColorValue; + systemCaret: ColorValue; + systemScrollbar: ColorValue; + systemText: ColorValue; + textDisabled: ColorValue; + textInverse: ColorValue; + textLink: ColorValue; + textOnAccent: ColorValue; + textPrimary: ColorValue; + textSecondary: ColorValue; + textTertiary: ColorValue; +} + +export interface IStreamTokens { + foundations: { + colors: FoundationsColors; + layout: FoundationsLayout; + radius: FoundationsRadius; + spacing: FoundationsSpacing; + stroke: FoundationsStroke; + typography: FoundationsTypography; + }; + components: ChatComponents; + primitives: ChatPrimitives; + semantics: ChatSemantics; +} diff --git a/package/src/theme/generated/dark/StreamTokens.android.ts b/package/src/theme/generated/dark/StreamTokens.android.ts new file mode 100644 index 000000000..c9cee27f1 --- /dev/null +++ b/package/src/theme/generated/dark/StreamTokens.android.ts @@ -0,0 +1,563 @@ +// This file is autogenerated. Please do not edit it. + +import type { IStreamTokens } from '../StreamTokens.types'; + +export const foundations: IStreamTokens['foundations'] = { + colors: { + baseTransparent0: 'rgba(255, 255, 255, 0)', + baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)', + baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)', + baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)', + baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)', + baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)', + 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, + }, + 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', + fontSizeSize10: 10, + fontSizeSize12: 12, + fontSizeSize14: 14, + fontSizeSize16: 16, + fontSizeSize15: 15, + fontSizeSize17: 17, + fontSizeSize18: 18, + fontSizeSize20: 20, + fontSizeSize24: 24, + fontSizeSize28: 28, + fontSizeSize32: 32, + fontSizeSize40: 40, + fontSizeSize48: 48, + fontSizeSize13: 13, + fontSizeSize8: 8, + lineHeightLineHeight8: 8, + lineHeightLineHeight10: 10, + lineHeightLineHeight12: 12, + lineHeightLineHeight14: 14, + lineHeightLineHeight15: 15, + lineHeightLineHeight16: 16, + lineHeightLineHeight17: 17, + lineHeightLineHeight18: 18, + lineHeightLineHeight20: 20, + lineHeightLineHeight24: 24, + lineHeightLineHeight28: 28, + lineHeightLineHeight32: 32, + lineHeightLineHeight40: 40, + lineHeightLineHeight48: 48, + }, +}; + +export const primitives: IStreamTokens['primitives'] = { + darkElevation0: { + elevation: 0, + shadowColor: 'rgba(0,0,0,0)', + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0, + shadowRadius: 0, + }, + darkElevation1: { + elevation: 2, + shadowColor: 'rgba(0,0,0,0.28)', + shadowOffset: { + width: 0, + height: 1.4878048780487807, + }, + shadowOpacity: 0.42400000000000004, + shadowRadius: 3.6926829268292685, + }, + darkElevation2: { + elevation: 3, + shadowColor: 'rgba(0,0,0,0.30)', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.44000000000000006, + shadowRadius: 5.630769230769231, + }, + darkElevation3: { + elevation: 6, + shadowColor: 'rgba(0,0,0,0.32)', + shadowOffset: { + width: 0, + height: 3.488372093023256, + }, + shadowOpacity: 0.4696, + shadowRadius: 11.079069767441862, + }, + darkElevation4: { + elevation: 8, + shadowColor: 'rgba(0,0,0,0.36)', + shadowOffset: { + width: 0, + height: 5.384615384615384, + }, + shadowOpacity: 0.5136000000000001, + shadowRadius: 16.892307692307693, + }, + lightElevation0: { + elevation: 0, + shadowColor: 'rgba(0,0,0,0)', + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0, + shadowRadius: 0, + }, + lightElevation1: { + elevation: 1, + shadowColor: 'rgba(0,0,0,0.2)', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.29599999999999993, + shadowRadius: 2.8285714285714287, + }, + lightElevation2: { + elevation: 3, + shadowColor: 'rgba(0,0,0,0.22)', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.3136, + shadowRadius: 5.68, + }, + lightElevation3: { + elevation: 6, + shadowColor: 'rgba(0,0,0,0.24)', + shadowOffset: { + width: 0, + height: 3.5, + }, + shadowOpacity: 0.36160000000000003, + shadowRadius: 11.100000000000001, + }, + lightElevation4: { + elevation: 8, + shadowColor: 'rgba(0,0,0,0.28)', + shadowOffset: { + width: 0, + height: 5.4, + }, + shadowOpacity: 0.40959999999999996, + shadowRadius: 16.919999999999998, + }, + radius2xl: foundations.radius.radius16, + radius3xl: foundations.radius.radius20, + radius4xl: foundations.radius.radius24, + radiusLg: foundations.radius.radius8, + radiusMax: foundations.radius.radiusFull, + radiusMd: foundations.radius.radius6, + radiusNone: foundations.radius.radius0, + radiusSm: foundations.radius.radius4, + radiusXl: foundations.radius.radius12, + radiusXs: foundations.radius.radius2, + radiusXxs: foundations.radius.radius0, + 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.fontFamilyRobotoMono, + typographyFontFamilySans: foundations.typography.fontFamilyRoboto, + typographyFontSize2xl: foundations.typography.fontSizeSize24, + typographyFontSizeLg: foundations.typography.fontSizeSize18, + typographyFontSizeMd: foundations.typography.fontSizeSize16, + typographyFontSizeMicro: foundations.typography.fontSizeSize8, + typographyFontSizeSm: foundations.typography.fontSizeSize14, + typographyFontSizeXl: foundations.typography.fontSizeSize20, + typographyFontSizeXs: foundations.typography.fontSizeSize12, + typographyFontSizeXxs: foundations.typography.fontSizeSize10, + typographyFontWeightBold: 700, + typographyFontWeightMedium: 500, + typographyFontWeightRegular: 400, + typographyFontWeightSemiBold: 600, + typographyLineHeightNormal: foundations.typography.lineHeightLineHeight20, + typographyLineHeightRelaxed: foundations.typography.lineHeightLineHeight24, + typographyLineHeightTight: foundations.typography.lineHeightLineHeight16, +} as const; + +export const components: IStreamTokens['components'] = { + buttonHitTargetMinHeight: foundations.layout.size48, + buttonHitTargetMinWidth: foundations.layout.size48, + buttonPaddingXIconOnlyLg: 14, + buttonPaddingXIconOnlyMd: 10, + buttonPaddingXIconOnlySm: 6, + buttonPaddingXWithLabelLg: 16, + buttonPaddingXWithLabelMd: 16, + buttonPaddingXWithLabelSm: 16, + buttonPaddingYLg: 14, + buttonPaddingYMd: 10, + buttonPaddingYSm: 6, + 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, + composerRadiusFixed: primitives.radius3xl, + composerRadiusFloating: primitives.radius3xl, + deviceRadius: primitives.radius4xl, + deviceSafeAreaBottom: foundations.spacing.space40, + deviceSafeAreaTop: foundations.spacing.space40, + 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, +} as const; + +export const semantics: IStreamTokens['semantics'] = { + accentBlack: foundations.colors.baseBlack, + accentError: foundations.colors.red500, + accentNeutral: foundations.colors.neutral600, + accentPrimary: '$brand500', + accentSuccess: foundations.colors.green300, + accentWarning: foundations.colors.yellow400, + avatarBgDefault: '$avatarPaletteBg1', + avatarBgPlaceholder: foundations.colors.neutral700, + avatarPaletteBg1: foundations.colors.blue800, + avatarPaletteBg2: foundations.colors.cyan800, + avatarPaletteBg3: foundations.colors.green800, + avatarPaletteBg4: foundations.colors.purple800, + avatarPaletteBg5: foundations.colors.yellow800, + avatarPaletteText1: foundations.colors.blue100, + avatarPaletteText2: foundations.colors.cyan100, + avatarPaletteText3: foundations.colors.green100, + avatarPaletteText4: foundations.colors.purple100, + avatarPaletteText5: foundations.colors.yellow100, + avatarTextDefault: '$avatarPaletteText1', + avatarTextPlaceholder: foundations.colors.neutral400, + backgroundCoreApp: '$backgroundElevationElevation0', + backgroundCoreDisabled: foundations.colors.neutral900, + backgroundCoreHover: 'rgba(255, 255, 255, 0.05)', + backgroundCoreOverlay: 'rgba(0, 0, 0, 0.75)', + backgroundCorePressed: 'rgba(255, 255, 255, 0.1)', + backgroundCoreScrim: 'rgba(0, 0, 0, 0.5)', + backgroundCoreSelected: 'rgba(255, 255, 255, 0.15)', + backgroundCoreSurface: foundations.colors.neutral800, + backgroundCoreSurfaceStrong: foundations.colors.neutral700, + backgroundCoreSurfaceSubtle: foundations.colors.neutral900, + backgroundElevationElevation0: foundations.colors.baseBlack, + backgroundElevationElevation1: foundations.colors.neutral900, + backgroundElevationElevation2: foundations.colors.neutral800, + backgroundElevationElevation3: foundations.colors.neutral700, + backgroundElevationElevation4: foundations.colors.neutral600, + badgeBgDefault: '$backgroundElevationElevation1', + badgeBgError: '$accentError', + badgeBgInverse: '$accentBlack', + badgeBgNeutral: '$accentNeutral', + badgeBgPrimary: '$accentPrimary', + badgeBorder: '$borderCoreOnDark', + badgeText: '$textOnAccent', + badgeTextInverse: '$textPrimary', + borderCoreDefault: foundations.colors.neutral700, + borderCoreOnAccent: foundations.colors.baseWhite, + borderCoreOnDark: foundations.colors.baseWhite, + borderCoreOpacity10: 'rgba(255, 255, 255, 0.2)', + borderCoreOpacity25: 'rgba(255, 255, 255, 0.25)', + borderCoreStrong: foundations.colors.neutral600, + borderCoreSubtle: foundations.colors.neutral800, + borderUtilityDisabled: foundations.colors.neutral800, + borderUtilityError: '$accentError', + borderUtilityFocus: '$brand700', + borderUtilitySelected: '$accentPrimary', + borderUtilitySuccess: '$accentSuccess', + borderUtilityWarning: '$accentWarning', + brand50: foundations.colors.blue900, + brand100: foundations.colors.blue800, + brand150: foundations.colors.blue700, + brand200: foundations.colors.blue700, + brand300: foundations.colors.blue600, + brand400: foundations.colors.blue500, + brand500: foundations.colors.blue400, + brand600: foundations.colors.blue300, + brand700: foundations.colors.blue200, + brand800: foundations.colors.blue150, + brand900: foundations.colors.blue100, + buttonDestructiveBg: '$accentError', + buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0', + buttonDestructiveBorder: '$accentError', + buttonDestructiveText: '$accentError', + buttonDestructiveTextOnAccent: '$textOnAccent', + buttonPrimaryBg: '$accentPrimary', + buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, + buttonPrimaryBorder: '$brand200', + buttonPrimaryText: '$accentPrimary', + buttonPrimaryTextOnAccent: '$textOnAccent', + buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', + buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', + buttonSecondaryBorder: '$borderCoreDefault', + buttonSecondaryText: '$textPrimary', + buttonSecondaryTextOnAccent: '$textPrimary', + chatBgAttachmentIncoming: foundations.colors.neutral700, + chatBgAttachmentOutgoing: '$brand300', + chatBgIncoming: foundations.colors.neutral800, + chatBgOutgoing: '$brand200', + chatBgTypingIndicator: '$accentNeutral', + chatBorderIncoming: foundations.colors.baseTransparent0, + chatBorderOnChatIncoming: foundations.colors.slate600, + chatBorderOnChatOutgoing: '$brand600', + chatBorderOutgoing: foundations.colors.baseTransparent0, + chatPollProgressFillIncoming: foundations.colors.neutral600, + chatPollProgressFillOutgoing: '$brand400', + chatPollProgressTrackIncoming: foundations.colors.baseWhite, + chatPollProgressTrackOutgoing: foundations.colors.baseWhite, + chatReplyIndicatorIncoming: foundations.colors.neutral500, + chatReplyIndicatorOutgoing: '$brand700', + chatTextLink: '$textLink', + chatTextMention: '$textLink', + chatTextMessage: '$textPrimary', + chatTextReaction: '$textSecondary', + chatTextSystem: '$textSecondary', + chatTextTimestamp: '$textTertiary', + chatTextUsername: '$textSecondary', + chatThreadConnectorIncoming: '$chatBgIncoming', + chatThreadConnectorOutgoing: '$chatBgOutgoing', + chatWaveformBar: '$borderCoreOpacity25', + chatWaveformBarPlaying: '$accentPrimary', + composerBg: '$backgroundElevationElevation1', + controlPlayControlBg: '$backgroundElevationElevation1', + controlPlayControlBgInverse: '$accentBlack', + controlPlayControlBorder: '$borderCoreDefault', + controlPlayControlIcon: '$textPrimary', + controlPlayControlIconInverse: '$textOnAccent', + controlProgressBarFill: foundations.colors.neutral800, + controlProgressBarTrack: foundations.colors.neutral50, + controlRadiocheckBg: foundations.colors.baseTransparent0, + controlRadiocheckBgSelected: foundations.colors.baseWhite, + controlRadiocheckBorder: '$borderCoreDefault', + controlRadiocheckIconSelected: '$textInverse', + controlRemoveControlBg: '$accentBlack', + controlRemoveControlBorder: '$borderCoreOnDark', + controlRemoveControlIcon: '$textOnAccent', + controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', + controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', + controlToggleSwitchBgSelected: '$accentPrimary', + controlToggleSwitchKnob: '$backgroundElevationElevation4', + inputBorderDefault: '$borderCoreDefault', + inputBorderFocus: '$borderUtilitySelected', + inputBorderHover: '$borderCoreStrong', + inputSendIcon: '$accentPrimary', + inputSendIconDisabled: '$textDisabled', + inputTextDefault: '$textPrimary', + inputTextDisabled: '$textDisabled', + inputTextIcon: '$textTertiary', + inputTextPlaceholder: '$textTertiary', + presenceBgOffline: '$accentNeutral', + presenceBgOnline: '$accentSuccess', + presenceBorder: '$borderCoreOnDark', + reactionBg: '$backgroundElevationElevation1', + reactionBorder: '$borderCoreDefault', + reactionEmoji: '$textPrimary', + reactionText: '$textPrimary', + systemBgBlur: 'rgba(0, 0, 0, 0.01)', + systemCaret: foundations.colors.baseWhite, + systemScrollbar: 'rgba(255, 255, 255, 0.5)', + systemText: foundations.colors.baseWhite, + textDisabled: foundations.colors.neutral600, + textInverse: foundations.colors.baseBlack, + textLink: foundations.colors.baseWhite, + textOnAccent: foundations.colors.baseWhite, + textPrimary: foundations.colors.baseWhite, + textSecondary: foundations.colors.neutral300, + textTertiary: foundations.colors.neutral400, +} as const; diff --git a/package/src/theme/generated/dark/StreamTokens.ios.ts b/package/src/theme/generated/dark/StreamTokens.ios.ts new file mode 100644 index 000000000..54f7b5df8 --- /dev/null +++ b/package/src/theme/generated/dark/StreamTokens.ios.ts @@ -0,0 +1,563 @@ +// This file is autogenerated. Please do not edit it. + +import type { IStreamTokens } from '../StreamTokens.types'; + +export const foundations: IStreamTokens['foundations'] = { + colors: { + baseTransparent0: 'rgba(255, 255, 255, 0)', + baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)', + baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)', + baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)', + baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)', + baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)', + 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, + }, + 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', + fontSizeSize10: 10, + fontSizeSize12: 12, + fontSizeSize14: 14, + fontSizeSize16: 16, + fontSizeSize15: 15, + fontSizeSize17: 17, + fontSizeSize18: 18, + fontSizeSize20: 20, + fontSizeSize24: 24, + fontSizeSize28: 28, + fontSizeSize32: 32, + fontSizeSize40: 40, + fontSizeSize48: 48, + fontSizeSize13: 13, + fontSizeSize8: 8, + lineHeightLineHeight8: 8, + lineHeightLineHeight10: 10, + lineHeightLineHeight12: 12, + lineHeightLineHeight14: 14, + lineHeightLineHeight15: 15, + lineHeightLineHeight16: 16, + lineHeightLineHeight17: 17, + lineHeightLineHeight18: 18, + lineHeightLineHeight20: 20, + lineHeightLineHeight24: 24, + lineHeightLineHeight28: 28, + lineHeightLineHeight32: 32, + lineHeightLineHeight40: 40, + lineHeightLineHeight48: 48, + }, +}; + +export const primitives: IStreamTokens['primitives'] = { + darkElevation0: { + elevation: 0, + shadowColor: 'rgba(0,0,0,0)', + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0, + shadowRadius: 0, + }, + darkElevation1: { + elevation: 2, + shadowColor: 'rgba(0,0,0,0.20)', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.19999999999999996, + shadowRadius: 3, + }, + darkElevation2: { + elevation: 3, + shadowColor: 'rgba(0,0,0,0.22)', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.21999999999999997, + shadowRadius: 6, + }, + darkElevation3: { + elevation: 6, + shadowColor: 'rgba(0,0,0,0.24)', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.24, + shadowRadius: 12.000000000000002, + }, + darkElevation4: { + elevation: 12, + shadowColor: 'rgba(0,0,0,0.28)', + shadowOffset: { + width: 0, + height: 8, + }, + shadowOpacity: 0.28, + shadowRadius: 24.000000000000004, + }, + lightElevation0: { + elevation: 0, + shadowColor: 'rgba(0,0,0,0)', + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0, + shadowRadius: 0, + }, + lightElevation1: { + elevation: 2, + shadowColor: 'rgba(0,0,0,0.12)', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.12, + shadowRadius: 3.0000000000000004, + }, + lightElevation2: { + elevation: 3, + shadowColor: 'rgba(0,0,0,0.14)', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.14, + shadowRadius: 6.000000000000001, + }, + lightElevation3: { + elevation: 6, + shadowColor: 'rgba(0,0,0,0.16)', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.16000000000000003, + shadowRadius: 12, + }, + lightElevation4: { + elevation: 12, + shadowColor: 'rgba(0,0,0,0.20)', + 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.fontSizeSize17, + typographyFontSizeMd: foundations.typography.fontSizeSize15, + typographyFontSizeMicro: foundations.typography.fontSizeSize8, + typographyFontSizeSm: foundations.typography.fontSizeSize13, + typographyFontSizeXl: foundations.typography.fontSizeSize20, + typographyFontSizeXs: foundations.typography.fontSizeSize12, + typographyFontSizeXxs: foundations.typography.fontSizeSize10, + typographyFontWeightBold: 700, + typographyFontWeightMedium: 500, + typographyFontWeightRegular: 400, + typographyFontWeightSemiBold: 600, + typographyLineHeightNormal: foundations.typography.lineHeightLineHeight20, + typographyLineHeightRelaxed: foundations.typography.lineHeightLineHeight24, + typographyLineHeightTight: foundations.typography.lineHeightLineHeight16, +} as const; + +export const components: IStreamTokens['components'] = { + buttonHitTargetMinHeight: foundations.layout.size48, + buttonHitTargetMinWidth: foundations.layout.size48, + buttonPaddingXIconOnlyLg: 14, + buttonPaddingXIconOnlyMd: 10, + buttonPaddingXIconOnlySm: 6, + buttonPaddingXWithLabelLg: 16, + buttonPaddingXWithLabelMd: 16, + buttonPaddingXWithLabelSm: 16, + buttonPaddingYLg: 14, + buttonPaddingYMd: 10, + buttonPaddingYSm: 6, + 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, + composerRadiusFixed: primitives.radius3xl, + composerRadiusFloating: primitives.radius3xl, + deviceRadius: 62, + deviceSafeAreaBottom: foundations.spacing.space32, + deviceSafeAreaTop: 62, + 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, +} as const; + +export const semantics: IStreamTokens['semantics'] = { + accentBlack: foundations.colors.baseBlack, + accentError: foundations.colors.red500, + accentNeutral: foundations.colors.neutral600, + accentPrimary: '$brand500', + accentSuccess: foundations.colors.green300, + accentWarning: foundations.colors.yellow400, + avatarBgDefault: '$avatarPaletteBg1', + avatarBgPlaceholder: foundations.colors.neutral700, + avatarPaletteBg1: foundations.colors.blue800, + avatarPaletteBg2: foundations.colors.cyan800, + avatarPaletteBg3: foundations.colors.green800, + avatarPaletteBg4: foundations.colors.purple800, + avatarPaletteBg5: foundations.colors.yellow800, + avatarPaletteText1: foundations.colors.blue100, + avatarPaletteText2: foundations.colors.cyan100, + avatarPaletteText3: foundations.colors.green100, + avatarPaletteText4: foundations.colors.purple100, + avatarPaletteText5: foundations.colors.yellow100, + avatarTextDefault: '$avatarPaletteText1', + avatarTextPlaceholder: foundations.colors.neutral400, + backgroundCoreApp: '$backgroundElevationElevation0', + backgroundCoreDisabled: foundations.colors.neutral900, + backgroundCoreHover: 'rgba(255, 255, 255, 0.05)', + backgroundCoreOverlay: 'rgba(0, 0, 0, 0.75)', + backgroundCorePressed: 'rgba(255, 255, 255, 0.1)', + backgroundCoreScrim: 'rgba(0, 0, 0, 0.5)', + backgroundCoreSelected: 'rgba(255, 255, 255, 0.15)', + backgroundCoreSurface: foundations.colors.neutral800, + backgroundCoreSurfaceStrong: foundations.colors.neutral700, + backgroundCoreSurfaceSubtle: foundations.colors.neutral900, + backgroundElevationElevation0: foundations.colors.baseBlack, + backgroundElevationElevation1: foundations.colors.neutral900, + backgroundElevationElevation2: foundations.colors.neutral800, + backgroundElevationElevation3: foundations.colors.neutral700, + backgroundElevationElevation4: foundations.colors.neutral600, + badgeBgDefault: '$backgroundElevationElevation1', + badgeBgError: '$accentError', + badgeBgInverse: '$accentBlack', + badgeBgNeutral: '$accentNeutral', + badgeBgPrimary: '$accentPrimary', + badgeBorder: '$borderCoreOnDark', + badgeText: '$textOnAccent', + badgeTextInverse: '$textPrimary', + borderCoreDefault: foundations.colors.neutral700, + borderCoreOnAccent: foundations.colors.baseWhite, + borderCoreOnDark: foundations.colors.baseWhite, + borderCoreOpacity10: 'rgba(255, 255, 255, 0.2)', + borderCoreOpacity25: 'rgba(255, 255, 255, 0.25)', + borderCoreStrong: foundations.colors.neutral600, + borderCoreSubtle: foundations.colors.neutral800, + borderUtilityDisabled: foundations.colors.neutral800, + borderUtilityError: '$accentError', + borderUtilityFocus: '$brand700', + borderUtilitySelected: '$accentPrimary', + borderUtilitySuccess: '$accentSuccess', + borderUtilityWarning: '$accentWarning', + brand50: foundations.colors.blue900, + brand100: foundations.colors.blue800, + brand150: foundations.colors.blue700, + brand200: foundations.colors.blue700, + brand300: foundations.colors.blue600, + brand400: foundations.colors.blue500, + brand500: foundations.colors.blue400, + brand600: foundations.colors.blue300, + brand700: foundations.colors.blue200, + brand800: foundations.colors.blue150, + brand900: foundations.colors.blue100, + buttonDestructiveBg: '$accentError', + buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0', + buttonDestructiveBorder: '$accentError', + buttonDestructiveText: '$accentError', + buttonDestructiveTextOnAccent: '$textOnAccent', + buttonPrimaryBg: '$accentPrimary', + buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, + buttonPrimaryBorder: '$brand200', + buttonPrimaryText: '$accentPrimary', + buttonPrimaryTextOnAccent: '$textOnAccent', + buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', + buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', + buttonSecondaryBorder: '$borderCoreDefault', + buttonSecondaryText: '$textPrimary', + buttonSecondaryTextOnAccent: '$textPrimary', + chatBgAttachmentIncoming: foundations.colors.neutral700, + chatBgAttachmentOutgoing: '$brand300', + chatBgIncoming: foundations.colors.neutral800, + chatBgOutgoing: '$brand200', + chatBgTypingIndicator: '$accentNeutral', + chatBorderIncoming: foundations.colors.baseTransparent0, + chatBorderOnChatIncoming: foundations.colors.slate600, + chatBorderOnChatOutgoing: '$brand600', + chatBorderOutgoing: foundations.colors.baseTransparent0, + chatPollProgressFillIncoming: foundations.colors.neutral600, + chatPollProgressFillOutgoing: '$brand400', + chatPollProgressTrackIncoming: foundations.colors.baseWhite, + chatPollProgressTrackOutgoing: foundations.colors.baseWhite, + chatReplyIndicatorIncoming: foundations.colors.neutral500, + chatReplyIndicatorOutgoing: '$brand700', + chatTextLink: '$textLink', + chatTextMention: '$textLink', + chatTextMessage: '$textPrimary', + chatTextReaction: '$textSecondary', + chatTextSystem: '$textSecondary', + chatTextTimestamp: '$textTertiary', + chatTextUsername: '$textSecondary', + chatThreadConnectorIncoming: '$chatBgIncoming', + chatThreadConnectorOutgoing: '$chatBgOutgoing', + chatWaveformBar: '$borderCoreOpacity25', + chatWaveformBarPlaying: '$accentPrimary', + composerBg: '$backgroundElevationElevation1', + controlPlayControlBg: '$backgroundElevationElevation1', + controlPlayControlBgInverse: '$accentBlack', + controlPlayControlBorder: '$borderCoreDefault', + controlPlayControlIcon: '$textPrimary', + controlPlayControlIconInverse: '$textOnAccent', + controlProgressBarFill: foundations.colors.neutral800, + controlProgressBarTrack: foundations.colors.neutral50, + controlRadiocheckBg: foundations.colors.baseTransparent0, + controlRadiocheckBgSelected: foundations.colors.baseWhite, + controlRadiocheckBorder: '$borderCoreDefault', + controlRadiocheckIconSelected: '$textInverse', + controlRemoveControlBg: '$accentBlack', + controlRemoveControlBorder: '$borderCoreOnDark', + controlRemoveControlIcon: '$textOnAccent', + controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', + controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', + controlToggleSwitchBgSelected: '$accentPrimary', + controlToggleSwitchKnob: '$backgroundElevationElevation4', + inputBorderDefault: '$borderCoreDefault', + inputBorderFocus: '$borderUtilitySelected', + inputBorderHover: '$borderCoreStrong', + inputSendIcon: '$accentPrimary', + inputSendIconDisabled: '$textDisabled', + inputTextDefault: '$textPrimary', + inputTextDisabled: '$textDisabled', + inputTextIcon: '$textTertiary', + inputTextPlaceholder: '$textTertiary', + presenceBgOffline: '$accentNeutral', + presenceBgOnline: '$accentSuccess', + presenceBorder: '$borderCoreOnDark', + reactionBg: '$backgroundElevationElevation1', + reactionBorder: '$borderCoreDefault', + reactionEmoji: '$textPrimary', + reactionText: '$textPrimary', + systemBgBlur: 'rgba(0, 0, 0, 0.01)', + systemCaret: foundations.colors.baseWhite, + systemScrollbar: 'rgba(255, 255, 255, 0.5)', + systemText: foundations.colors.baseWhite, + textDisabled: foundations.colors.neutral600, + textInverse: foundations.colors.baseBlack, + textLink: foundations.colors.baseWhite, + textOnAccent: foundations.colors.baseWhite, + textPrimary: foundations.colors.baseWhite, + textSecondary: foundations.colors.neutral300, + textTertiary: foundations.colors.neutral400, +} as const; diff --git a/package/src/theme/generated/dark/StreamTokens.web.ts b/package/src/theme/generated/dark/StreamTokens.web.ts new file mode 100644 index 000000000..ba0715a77 --- /dev/null +++ b/package/src/theme/generated/dark/StreamTokens.web.ts @@ -0,0 +1,563 @@ +// This file is autogenerated. Please do not edit it. + +import type { IStreamTokens } from '../StreamTokens.types'; + +export const foundations: IStreamTokens['foundations'] = { + colors: { + baseTransparent0: 'rgba(255, 255, 255, 0)', + baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)', + baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)', + baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)', + baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)', + baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)', + 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, + }, + 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', + fontSizeSize10: 10, + fontSizeSize12: 12, + fontSizeSize14: 14, + fontSizeSize16: 16, + fontSizeSize15: 15, + fontSizeSize17: 17, + fontSizeSize18: 18, + fontSizeSize20: 20, + fontSizeSize24: 24, + fontSizeSize28: 28, + fontSizeSize32: 32, + fontSizeSize40: 40, + fontSizeSize48: 48, + fontSizeSize13: 13, + fontSizeSize8: 8, + lineHeightLineHeight8: 8, + lineHeightLineHeight10: 10, + lineHeightLineHeight12: 12, + lineHeightLineHeight14: 14, + lineHeightLineHeight15: 15, + lineHeightLineHeight16: 16, + lineHeightLineHeight17: 17, + lineHeightLineHeight18: 18, + lineHeightLineHeight20: 20, + lineHeightLineHeight24: 24, + lineHeightLineHeight28: 28, + lineHeightLineHeight32: 32, + lineHeightLineHeight40: 40, + lineHeightLineHeight48: 48, + }, +}; + +export const primitives: IStreamTokens['primitives'] = { + darkElevation0: { + elevation: 0, + shadowColor: 'rgba(0,0,0,0)', + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0, + shadowRadius: 0, + }, + darkElevation1: { + elevation: 3, + shadowColor: 'rgba(0,0,0,0.1)', + shadowOffset: { + width: 0, + height: 2.6666666666666665, + }, + shadowOpacity: 0.3879999999999999, + shadowRadius: 6.4, + }, + darkElevation2: { + elevation: 7, + shadowColor: 'rgba(0,0,0,0.12)', + shadowOffset: { + width: 0, + height: 4.5016949152542365, + }, + shadowOpacity: 0.41655999999999993, + shadowRadius: 13.364067796610168, + }, + darkElevation3: { + elevation: 10, + shadowColor: 'rgba(0,0,0,0.14)', + shadowOffset: { + width: 0, + height: 8.839779005524864, + }, + shadowOpacity: 0.44443999999999995, + shadowRadius: 20.207734806629837, + }, + darkElevation4: { + elevation: 13, + shadowColor: 'rgba(0,0,0,0.16)', + shadowOffset: { + width: 0, + height: 14.201622247972189, + }, + shadowOpacity: 0.48592, + shadowRadius: 26.994206257242176, + }, + lightElevation0: { + elevation: 0, + shadowColor: 'rgba(0,0,0,0)', + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0, + shadowRadius: 0, + }, + lightElevation1: { + elevation: 3, + shadowColor: 'rgba(0,0,0,0.06)', + shadowOffset: { + width: 0, + height: 2.904109589041096, + }, + shadowOpacity: 0.19630000000000003, + shadowRadius: 6.684931506849315, + }, + lightElevation2: { + elevation: 7, + shadowColor: 'rgba(0,0,0,0.06)', + shadowOffset: { + width: 0, + height: 4.510067114093959, + }, + shadowOpacity: 0.21416000000000013, + shadowRadius: 13.358389261744968, + }, + lightElevation3: { + elevation: 10, + shadowColor: 'rgba(0,0,0,0.1)', + shadowOffset: { + width: 0, + height: 9.322128851540615, + }, + shadowOpacity: 0.26470000000000005, + shadowRadius: 20.786554621848737, + }, + lightElevation4: { + elevation: 14, + shadowColor: 'rgba(0,0,0,0.12)', + shadowOffset: { + width: 0, + height: 15.201376936316695, + }, + shadowOpacity: 0.29776, + shadowRadius: 27.86919104991394, + }, + 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.fontFamilyGeistMono, + typographyFontFamilySans: foundations.typography.fontFamilyGeist, + typographyFontSize2xl: foundations.typography.fontSizeSize24, + typographyFontSizeLg: foundations.typography.fontSizeSize18, + typographyFontSizeMd: foundations.typography.fontSizeSize16, + typographyFontSizeMicro: foundations.typography.fontSizeSize8, + typographyFontSizeSm: foundations.typography.fontSizeSize14, + typographyFontSizeXl: foundations.typography.fontSizeSize20, + typographyFontSizeXs: foundations.typography.fontSizeSize12, + typographyFontSizeXxs: foundations.typography.fontSizeSize10, + typographyFontWeightBold: 700, + typographyFontWeightMedium: 500, + typographyFontWeightRegular: 400, + typographyFontWeightSemiBold: 600, + typographyLineHeightNormal: foundations.typography.lineHeightLineHeight20, + typographyLineHeightRelaxed: foundations.typography.lineHeightLineHeight24, + typographyLineHeightTight: foundations.typography.lineHeightLineHeight16, +} as const; + +export const components: IStreamTokens['components'] = { + buttonHitTargetMinHeight: foundations.layout.size48, + buttonHitTargetMinWidth: foundations.layout.size48, + buttonPaddingXIconOnlyLg: 14, + buttonPaddingXIconOnlyMd: 10, + buttonPaddingXIconOnlySm: 6, + buttonPaddingXWithLabelLg: 16, + buttonPaddingXWithLabelMd: 16, + buttonPaddingXWithLabelSm: 16, + buttonPaddingYLg: 14, + buttonPaddingYMd: 10, + buttonPaddingYSm: 6, + 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, + composerRadiusFixed: primitives.radius3xl, + composerRadiusFloating: primitives.radius3xl, + deviceRadius: primitives.radiusMd, + deviceSafeAreaBottom: foundations.spacing.space0, + deviceSafeAreaTop: foundations.spacing.space0, + 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, +} as const; + +export const semantics: IStreamTokens['semantics'] = { + accentBlack: foundations.colors.baseBlack, + accentError: foundations.colors.red500, + accentNeutral: foundations.colors.neutral600, + accentPrimary: '$brand500', + accentSuccess: foundations.colors.green300, + accentWarning: foundations.colors.yellow400, + avatarBgDefault: '$avatarPaletteBg1', + avatarBgPlaceholder: foundations.colors.neutral700, + avatarPaletteBg1: foundations.colors.blue800, + avatarPaletteBg2: foundations.colors.cyan800, + avatarPaletteBg3: foundations.colors.green800, + avatarPaletteBg4: foundations.colors.purple800, + avatarPaletteBg5: foundations.colors.yellow800, + avatarPaletteText1: foundations.colors.blue100, + avatarPaletteText2: foundations.colors.cyan100, + avatarPaletteText3: foundations.colors.green100, + avatarPaletteText4: foundations.colors.purple100, + avatarPaletteText5: foundations.colors.yellow100, + avatarTextDefault: '$avatarPaletteText1', + avatarTextPlaceholder: foundations.colors.neutral400, + backgroundCoreApp: '$backgroundElevationElevation0', + backgroundCoreDisabled: foundations.colors.neutral900, + backgroundCoreHover: 'rgba(255, 255, 255, 0.05)', + backgroundCoreOverlay: 'rgba(0, 0, 0, 0.75)', + backgroundCorePressed: 'rgba(255, 255, 255, 0.1)', + backgroundCoreScrim: 'rgba(0, 0, 0, 0.5)', + backgroundCoreSelected: 'rgba(255, 255, 255, 0.15)', + backgroundCoreSurface: foundations.colors.neutral800, + backgroundCoreSurfaceStrong: foundations.colors.neutral700, + backgroundCoreSurfaceSubtle: foundations.colors.neutral900, + backgroundElevationElevation0: foundations.colors.baseBlack, + backgroundElevationElevation1: foundations.colors.neutral900, + backgroundElevationElevation2: foundations.colors.neutral800, + backgroundElevationElevation3: foundations.colors.neutral700, + backgroundElevationElevation4: foundations.colors.neutral600, + badgeBgDefault: '$backgroundElevationElevation1', + badgeBgError: '$accentError', + badgeBgInverse: '$accentBlack', + badgeBgNeutral: '$accentNeutral', + badgeBgPrimary: '$accentPrimary', + badgeBorder: '$borderCoreOnDark', + badgeText: '$textOnAccent', + badgeTextInverse: '$textPrimary', + borderCoreDefault: foundations.colors.neutral700, + borderCoreOnAccent: foundations.colors.baseWhite, + borderCoreOnDark: foundations.colors.baseWhite, + borderCoreOpacity10: 'rgba(255, 255, 255, 0.2)', + borderCoreOpacity25: 'rgba(255, 255, 255, 0.25)', + borderCoreStrong: foundations.colors.neutral600, + borderCoreSubtle: foundations.colors.neutral800, + borderUtilityDisabled: foundations.colors.neutral800, + borderUtilityError: '$accentError', + borderUtilityFocus: '$brand700', + borderUtilitySelected: '$accentPrimary', + borderUtilitySuccess: '$accentSuccess', + borderUtilityWarning: '$accentWarning', + brand50: foundations.colors.blue900, + brand100: foundations.colors.blue800, + brand150: foundations.colors.blue700, + brand200: foundations.colors.blue700, + brand300: foundations.colors.blue600, + brand400: foundations.colors.blue500, + brand500: foundations.colors.blue400, + brand600: foundations.colors.blue300, + brand700: foundations.colors.blue200, + brand800: foundations.colors.blue150, + brand900: foundations.colors.blue100, + buttonDestructiveBg: '$accentError', + buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0', + buttonDestructiveBorder: '$accentError', + buttonDestructiveText: '$accentError', + buttonDestructiveTextOnAccent: '$textOnAccent', + buttonPrimaryBg: '$accentPrimary', + buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, + buttonPrimaryBorder: '$brand200', + buttonPrimaryText: '$accentPrimary', + buttonPrimaryTextOnAccent: '$textOnAccent', + buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', + buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', + buttonSecondaryBorder: '$borderCoreDefault', + buttonSecondaryText: '$textPrimary', + buttonSecondaryTextOnAccent: '$textPrimary', + chatBgAttachmentIncoming: foundations.colors.neutral700, + chatBgAttachmentOutgoing: '$brand300', + chatBgIncoming: foundations.colors.neutral800, + chatBgOutgoing: '$brand200', + chatBgTypingIndicator: '$accentNeutral', + chatBorderIncoming: foundations.colors.baseTransparent0, + chatBorderOnChatIncoming: foundations.colors.slate600, + chatBorderOnChatOutgoing: '$brand600', + chatBorderOutgoing: foundations.colors.baseTransparent0, + chatPollProgressFillIncoming: foundations.colors.neutral600, + chatPollProgressFillOutgoing: '$brand400', + chatPollProgressTrackIncoming: foundations.colors.baseWhite, + chatPollProgressTrackOutgoing: foundations.colors.baseWhite, + chatReplyIndicatorIncoming: foundations.colors.neutral500, + chatReplyIndicatorOutgoing: '$brand700', + chatTextLink: '$textLink', + chatTextMention: '$textLink', + chatTextMessage: '$textPrimary', + chatTextReaction: '$textSecondary', + chatTextSystem: '$textSecondary', + chatTextTimestamp: '$textTertiary', + chatTextUsername: '$textSecondary', + chatThreadConnectorIncoming: '$chatBgIncoming', + chatThreadConnectorOutgoing: '$chatBgOutgoing', + chatWaveformBar: '$borderCoreOpacity25', + chatWaveformBarPlaying: '$accentPrimary', + composerBg: '$backgroundElevationElevation1', + controlPlayControlBg: '$backgroundElevationElevation1', + controlPlayControlBgInverse: '$accentBlack', + controlPlayControlBorder: '$borderCoreDefault', + controlPlayControlIcon: '$textPrimary', + controlPlayControlIconInverse: '$textOnAccent', + controlProgressBarFill: foundations.colors.neutral800, + controlProgressBarTrack: foundations.colors.neutral50, + controlRadiocheckBg: foundations.colors.baseTransparent0, + controlRadiocheckBgSelected: foundations.colors.baseWhite, + controlRadiocheckBorder: '$borderCoreDefault', + controlRadiocheckIconSelected: '$textInverse', + controlRemoveControlBg: '$accentBlack', + controlRemoveControlBorder: '$borderCoreOnDark', + controlRemoveControlIcon: '$textOnAccent', + controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', + controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', + controlToggleSwitchBgSelected: '$accentPrimary', + controlToggleSwitchKnob: '$backgroundElevationElevation4', + inputBorderDefault: '$borderCoreDefault', + inputBorderFocus: '$borderUtilitySelected', + inputBorderHover: '$borderCoreStrong', + inputSendIcon: '$accentPrimary', + inputSendIconDisabled: '$textDisabled', + inputTextDefault: '$textPrimary', + inputTextDisabled: '$textDisabled', + inputTextIcon: '$textTertiary', + inputTextPlaceholder: '$textTertiary', + presenceBgOffline: '$accentNeutral', + presenceBgOnline: '$accentSuccess', + presenceBorder: '$borderCoreOnDark', + reactionBg: '$backgroundElevationElevation1', + reactionBorder: '$borderCoreDefault', + reactionEmoji: '$textPrimary', + reactionText: '$textPrimary', + systemBgBlur: 'rgba(0, 0, 0, 0.01)', + systemCaret: foundations.colors.baseWhite, + systemScrollbar: 'rgba(255, 255, 255, 0.5)', + systemText: foundations.colors.baseWhite, + textDisabled: foundations.colors.neutral600, + textInverse: foundations.colors.baseBlack, + textLink: foundations.colors.baseWhite, + textOnAccent: foundations.colors.baseWhite, + textPrimary: foundations.colors.baseWhite, + textSecondary: foundations.colors.neutral300, + textTertiary: foundations.colors.neutral400, +} as const; diff --git a/package/src/theme/generated/high-contrast-light/StreamTokens.android.ts b/package/src/theme/generated/high-contrast-light/StreamTokens.android.ts new file mode 100644 index 000000000..18f1180a3 --- /dev/null +++ b/package/src/theme/generated/high-contrast-light/StreamTokens.android.ts @@ -0,0 +1,563 @@ +// This file is autogenerated. Please do not edit it. + +import type { IStreamTokens } from '../StreamTokens.types'; + +export const foundations: IStreamTokens['foundations'] = { + colors: { + baseTransparent0: 'rgba(255, 255, 255, 0)', + baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)', + baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)', + baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)', + baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)', + baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)', + 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, + }, + 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', + fontSizeSize10: 10, + fontSizeSize12: 12, + fontSizeSize14: 14, + fontSizeSize16: 16, + fontSizeSize15: 15, + fontSizeSize17: 17, + fontSizeSize18: 18, + fontSizeSize20: 20, + fontSizeSize24: 24, + fontSizeSize28: 28, + fontSizeSize32: 32, + fontSizeSize40: 40, + fontSizeSize48: 48, + fontSizeSize13: 13, + fontSizeSize8: 8, + lineHeightLineHeight8: 8, + lineHeightLineHeight10: 10, + lineHeightLineHeight12: 12, + lineHeightLineHeight14: 14, + lineHeightLineHeight15: 15, + lineHeightLineHeight16: 16, + lineHeightLineHeight17: 17, + lineHeightLineHeight18: 18, + lineHeightLineHeight20: 20, + lineHeightLineHeight24: 24, + lineHeightLineHeight28: 28, + lineHeightLineHeight32: 32, + lineHeightLineHeight40: 40, + lineHeightLineHeight48: 48, + }, +}; + +export const primitives: IStreamTokens['primitives'] = { + darkElevation0: { + elevation: 0, + shadowColor: 'rgba(0,0,0,0)', + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0, + shadowRadius: 0, + }, + darkElevation1: { + elevation: 2, + shadowColor: 'rgba(0,0,0,0.28)', + shadowOffset: { + width: 0, + height: 1.4878048780487807, + }, + shadowOpacity: 0.42400000000000004, + shadowRadius: 3.6926829268292685, + }, + darkElevation2: { + elevation: 3, + shadowColor: 'rgba(0,0,0,0.30)', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.44000000000000006, + shadowRadius: 5.630769230769231, + }, + darkElevation3: { + elevation: 6, + shadowColor: 'rgba(0,0,0,0.32)', + shadowOffset: { + width: 0, + height: 3.488372093023256, + }, + shadowOpacity: 0.4696, + shadowRadius: 11.079069767441862, + }, + darkElevation4: { + elevation: 8, + shadowColor: 'rgba(0,0,0,0.36)', + shadowOffset: { + width: 0, + height: 5.384615384615384, + }, + shadowOpacity: 0.5136000000000001, + shadowRadius: 16.892307692307693, + }, + lightElevation0: { + elevation: 0, + shadowColor: 'rgba(0,0,0,0)', + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0, + shadowRadius: 0, + }, + lightElevation1: { + elevation: 1, + shadowColor: 'rgba(0,0,0,0.2)', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.29599999999999993, + shadowRadius: 2.8285714285714287, + }, + lightElevation2: { + elevation: 3, + shadowColor: 'rgba(0,0,0,0.22)', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.3136, + shadowRadius: 5.68, + }, + lightElevation3: { + elevation: 6, + shadowColor: 'rgba(0,0,0,0.24)', + shadowOffset: { + width: 0, + height: 3.5, + }, + shadowOpacity: 0.36160000000000003, + shadowRadius: 11.100000000000001, + }, + lightElevation4: { + elevation: 8, + shadowColor: 'rgba(0,0,0,0.28)', + shadowOffset: { + width: 0, + height: 5.4, + }, + shadowOpacity: 0.40959999999999996, + shadowRadius: 16.919999999999998, + }, + radius2xl: foundations.radius.radius16, + radius3xl: foundations.radius.radius20, + radius4xl: foundations.radius.radius24, + radiusLg: foundations.radius.radius8, + radiusMax: foundations.radius.radiusFull, + radiusMd: foundations.radius.radius6, + radiusNone: foundations.radius.radius0, + radiusSm: foundations.radius.radius4, + radiusXl: foundations.radius.radius12, + radiusXs: foundations.radius.radius2, + radiusXxs: foundations.radius.radius0, + 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.fontFamilyRobotoMono, + typographyFontFamilySans: foundations.typography.fontFamilyRoboto, + typographyFontSize2xl: foundations.typography.fontSizeSize24, + typographyFontSizeLg: foundations.typography.fontSizeSize18, + typographyFontSizeMd: foundations.typography.fontSizeSize16, + typographyFontSizeMicro: foundations.typography.fontSizeSize8, + typographyFontSizeSm: foundations.typography.fontSizeSize14, + typographyFontSizeXl: foundations.typography.fontSizeSize20, + typographyFontSizeXs: foundations.typography.fontSizeSize12, + typographyFontSizeXxs: foundations.typography.fontSizeSize10, + typographyFontWeightBold: 700, + typographyFontWeightMedium: 500, + typographyFontWeightRegular: 400, + typographyFontWeightSemiBold: 600, + typographyLineHeightNormal: foundations.typography.lineHeightLineHeight20, + typographyLineHeightRelaxed: foundations.typography.lineHeightLineHeight24, + typographyLineHeightTight: foundations.typography.lineHeightLineHeight16, +} as const; + +export const components: IStreamTokens['components'] = { + buttonHitTargetMinHeight: foundations.layout.size48, + buttonHitTargetMinWidth: foundations.layout.size48, + buttonPaddingXIconOnlyLg: 14, + buttonPaddingXIconOnlyMd: 10, + buttonPaddingXIconOnlySm: 6, + buttonPaddingXWithLabelLg: 16, + buttonPaddingXWithLabelMd: 16, + buttonPaddingXWithLabelSm: 16, + buttonPaddingYLg: 14, + buttonPaddingYMd: 10, + buttonPaddingYSm: 6, + 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, + composerRadiusFixed: primitives.radius3xl, + composerRadiusFloating: primitives.radius3xl, + deviceRadius: primitives.radius4xl, + deviceSafeAreaBottom: foundations.spacing.space40, + deviceSafeAreaTop: foundations.spacing.space40, + 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, +} as const; + +export const semantics: IStreamTokens['semantics'] = { + accentBlack: foundations.colors.baseBlack, + accentError: foundations.colors.baseBlack, + accentNeutral: foundations.colors.baseBlack, + accentPrimary: foundations.colors.baseBlack, + accentSuccess: foundations.colors.baseBlack, + accentWarning: foundations.colors.baseBlack, + avatarBgDefault: '$avatarPaletteBg1', + avatarBgPlaceholder: '$accentBlack', + avatarPaletteBg1: foundations.colors.blue900, + avatarPaletteBg2: foundations.colors.cyan900, + avatarPaletteBg3: foundations.colors.green900, + avatarPaletteBg4: foundations.colors.purple900, + avatarPaletteBg5: foundations.colors.yellow900, + avatarPaletteText1: foundations.colors.blue100, + avatarPaletteText2: foundations.colors.cyan100, + avatarPaletteText3: foundations.colors.green100, + avatarPaletteText4: foundations.colors.purple100, + avatarPaletteText5: foundations.colors.yellow100, + avatarTextDefault: '$avatarPaletteText1', + avatarTextPlaceholder: '$textInverse', + backgroundCoreApp: '$backgroundElevationElevation0', + backgroundCoreDisabled: '$backgroundElevationElevation0', + backgroundCoreHover: 'rgba(0, 0, 0, 0.1)', + backgroundCoreOverlay: 'rgba(255, 255, 255, 0.75)', + backgroundCorePressed: 'rgba(0, 0, 0, 0.2)', + backgroundCoreScrim: 'rgba(0, 0, 0, 0.25)', + backgroundCoreSelected: 'rgba(0, 0, 0, 0.2)', + backgroundCoreSurface: '$backgroundElevationElevation0', + backgroundCoreSurfaceStrong: '$backgroundElevationElevation0', + backgroundCoreSurfaceSubtle: '$backgroundElevationElevation0', + backgroundElevationElevation0: foundations.colors.baseWhite, + backgroundElevationElevation1: foundations.colors.baseWhite, + backgroundElevationElevation2: foundations.colors.baseWhite, + backgroundElevationElevation3: foundations.colors.baseWhite, + backgroundElevationElevation4: foundations.colors.baseWhite, + badgeBgDefault: '$backgroundElevationElevation1', + badgeBgError: '$accentError', + badgeBgInverse: '$accentBlack', + badgeBgNeutral: '$accentNeutral', + badgeBgPrimary: '$accentPrimary', + badgeBorder: '$borderCoreOnDark', + badgeText: '$textOnAccent', + badgeTextInverse: '$textPrimary', + borderCoreDefault: '$accentBlack', + borderCoreOnAccent: '$accentBlack', + borderCoreOnDark: foundations.colors.baseWhite, + borderCoreOpacity10: '$accentBlack', + borderCoreOpacity25: '$accentBlack', + borderCoreStrong: '$accentBlack', + borderCoreSubtle: '$accentBlack', + borderUtilityDisabled: foundations.colors.slate300, + borderUtilityError: '$accentError', + borderUtilityFocus: '$accentBlack', + borderUtilitySelected: '$accentPrimary', + borderUtilitySuccess: '$accentSuccess', + borderUtilityWarning: '$accentWarning', + brand50: foundations.colors.baseBlack, + brand100: foundations.colors.baseBlack, + brand150: foundations.colors.baseBlack, + brand200: foundations.colors.baseBlack, + brand300: foundations.colors.baseBlack, + brand400: foundations.colors.baseBlack, + brand500: foundations.colors.baseBlack, + brand600: foundations.colors.baseBlack, + brand700: foundations.colors.baseBlack, + brand800: foundations.colors.baseBlack, + brand900: foundations.colors.baseBlack, + buttonDestructiveBg: '$accentError', + buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0', + buttonDestructiveBorder: '$accentError', + buttonDestructiveText: '$accentError', + buttonDestructiveTextOnAccent: '$textOnAccent', + buttonPrimaryBg: '$accentPrimary', + buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, + buttonPrimaryBorder: '$brand200', + buttonPrimaryText: '$accentPrimary', + buttonPrimaryTextOnAccent: '$textOnAccent', + buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', + buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', + buttonSecondaryBorder: '$borderCoreDefault', + buttonSecondaryText: '$textPrimary', + buttonSecondaryTextOnAccent: '$textPrimary', + chatBgAttachmentIncoming: '$backgroundElevationElevation0', + chatBgAttachmentOutgoing: '$backgroundElevationElevation0', + chatBgIncoming: '$backgroundElevationElevation0', + chatBgOutgoing: '$backgroundElevationElevation0', + chatBgTypingIndicator: '$accentNeutral', + chatBorderIncoming: '$accentBlack', + chatBorderOnChatIncoming: '$accentBlack', + chatBorderOnChatOutgoing: '$accentBlack', + chatBorderOutgoing: '$accentBlack', + chatPollProgressFillIncoming: foundations.colors.neutral300, + chatPollProgressFillOutgoing: foundations.colors.baseBlack, + chatPollProgressTrackIncoming: '$accentBlack', + chatPollProgressTrackOutgoing: '$accentBlack', + chatReplyIndicatorIncoming: foundations.colors.baseBlack, + chatReplyIndicatorOutgoing: foundations.colors.baseBlack, + chatTextLink: '$textLink', + chatTextMention: '$textLink', + chatTextMessage: '$textPrimary', + chatTextReaction: '$textSecondary', + chatTextSystem: '$textSecondary', + chatTextTimestamp: '$textTertiary', + chatTextUsername: '$textSecondary', + chatThreadConnectorIncoming: '$accentBlack', + chatThreadConnectorOutgoing: '$accentBlack', + chatWaveformBar: '$borderCoreOpacity25', + chatWaveformBarPlaying: '$accentBlack', + composerBg: '$backgroundElevationElevation1', + controlPlayControlBg: '$backgroundElevationElevation1', + controlPlayControlBgInverse: '$accentBlack', + controlPlayControlBorder: '$borderCoreDefault', + controlPlayControlIcon: '$textPrimary', + controlPlayControlIconInverse: '$textOnAccent', + controlProgressBarFill: '$backgroundCoreSurface', + controlProgressBarTrack: '$backgroundCoreSurfaceStrong', + controlRadiocheckBg: foundations.colors.baseTransparent0, + controlRadiocheckBgSelected: '$accentPrimary', + controlRadiocheckBorder: '$borderCoreDefault', + controlRadiocheckIconSelected: '$textInverse', + controlRemoveControlBg: '$accentBlack', + controlRemoveControlBorder: '$borderCoreOnDark', + controlRemoveControlIcon: '$textInverse', + controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', + controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', + controlToggleSwitchBgSelected: '$accentPrimary', + controlToggleSwitchKnob: '$backgroundElevationElevation4', + inputBorderDefault: '$borderCoreDefault', + inputBorderFocus: '$borderUtilityFocus', + inputBorderHover: '$borderCoreStrong', + inputSendIcon: '$accentPrimary', + inputSendIconDisabled: '$textDisabled', + inputTextDefault: '$textPrimary', + inputTextDisabled: '$textDisabled', + inputTextIcon: '$textTertiary', + inputTextPlaceholder: '$textTertiary', + presenceBgOffline: '$accentNeutral', + presenceBgOnline: '$accentSuccess', + presenceBorder: '$borderCoreOnDark', + reactionBg: '$backgroundElevationElevation1', + reactionBorder: '$borderCoreDefault', + reactionEmoji: '$textPrimary', + reactionText: '$textPrimary', + systemBgBlur: foundations.colors.baseWhite, + systemCaret: foundations.colors.baseBlack, + systemScrollbar: foundations.colors.baseBlack, + systemText: foundations.colors.baseBlack, + textDisabled: foundations.colors.neutral500, + textInverse: foundations.colors.baseWhite, + textLink: foundations.colors.baseBlack, + textOnAccent: foundations.colors.baseWhite, + textPrimary: foundations.colors.baseBlack, + textSecondary: foundations.colors.neutral800, + textTertiary: foundations.colors.neutral700, +} as const; diff --git a/package/src/theme/generated/high-contrast-light/StreamTokens.ios.ts b/package/src/theme/generated/high-contrast-light/StreamTokens.ios.ts new file mode 100644 index 000000000..48ba5dc92 --- /dev/null +++ b/package/src/theme/generated/high-contrast-light/StreamTokens.ios.ts @@ -0,0 +1,563 @@ +// This file is autogenerated. Please do not edit it. + +import type { IStreamTokens } from '../StreamTokens.types'; + +export const foundations: IStreamTokens['foundations'] = { + colors: { + baseTransparent0: 'rgba(255, 255, 255, 0)', + baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)', + baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)', + baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)', + baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)', + baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)', + 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, + }, + 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', + fontSizeSize10: 10, + fontSizeSize12: 12, + fontSizeSize14: 14, + fontSizeSize16: 16, + fontSizeSize15: 15, + fontSizeSize17: 17, + fontSizeSize18: 18, + fontSizeSize20: 20, + fontSizeSize24: 24, + fontSizeSize28: 28, + fontSizeSize32: 32, + fontSizeSize40: 40, + fontSizeSize48: 48, + fontSizeSize13: 13, + fontSizeSize8: 8, + lineHeightLineHeight8: 8, + lineHeightLineHeight10: 10, + lineHeightLineHeight12: 12, + lineHeightLineHeight14: 14, + lineHeightLineHeight15: 15, + lineHeightLineHeight16: 16, + lineHeightLineHeight17: 17, + lineHeightLineHeight18: 18, + lineHeightLineHeight20: 20, + lineHeightLineHeight24: 24, + lineHeightLineHeight28: 28, + lineHeightLineHeight32: 32, + lineHeightLineHeight40: 40, + lineHeightLineHeight48: 48, + }, +}; + +export const primitives: IStreamTokens['primitives'] = { + darkElevation0: { + elevation: 0, + shadowColor: 'rgba(0,0,0,0)', + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0, + shadowRadius: 0, + }, + darkElevation1: { + elevation: 2, + shadowColor: 'rgba(0,0,0,0.20)', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.19999999999999996, + shadowRadius: 3, + }, + darkElevation2: { + elevation: 3, + shadowColor: 'rgba(0,0,0,0.22)', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.21999999999999997, + shadowRadius: 6, + }, + darkElevation3: { + elevation: 6, + shadowColor: 'rgba(0,0,0,0.24)', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.24, + shadowRadius: 12.000000000000002, + }, + darkElevation4: { + elevation: 12, + shadowColor: 'rgba(0,0,0,0.28)', + shadowOffset: { + width: 0, + height: 8, + }, + shadowOpacity: 0.28, + shadowRadius: 24.000000000000004, + }, + lightElevation0: { + elevation: 0, + shadowColor: 'rgba(0,0,0,0)', + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0, + shadowRadius: 0, + }, + lightElevation1: { + elevation: 2, + shadowColor: 'rgba(0,0,0,0.12)', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.12, + shadowRadius: 3.0000000000000004, + }, + lightElevation2: { + elevation: 3, + shadowColor: 'rgba(0,0,0,0.14)', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.14, + shadowRadius: 6.000000000000001, + }, + lightElevation3: { + elevation: 6, + shadowColor: 'rgba(0,0,0,0.16)', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.16000000000000003, + shadowRadius: 12, + }, + lightElevation4: { + elevation: 12, + shadowColor: 'rgba(0,0,0,0.20)', + 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.fontSizeSize17, + typographyFontSizeMd: foundations.typography.fontSizeSize15, + typographyFontSizeMicro: foundations.typography.fontSizeSize8, + typographyFontSizeSm: foundations.typography.fontSizeSize13, + typographyFontSizeXl: foundations.typography.fontSizeSize20, + typographyFontSizeXs: foundations.typography.fontSizeSize12, + typographyFontSizeXxs: foundations.typography.fontSizeSize10, + typographyFontWeightBold: 700, + typographyFontWeightMedium: 500, + typographyFontWeightRegular: 400, + typographyFontWeightSemiBold: 600, + typographyLineHeightNormal: foundations.typography.lineHeightLineHeight20, + typographyLineHeightRelaxed: foundations.typography.lineHeightLineHeight24, + typographyLineHeightTight: foundations.typography.lineHeightLineHeight16, +} as const; + +export const components: IStreamTokens['components'] = { + buttonHitTargetMinHeight: foundations.layout.size48, + buttonHitTargetMinWidth: foundations.layout.size48, + buttonPaddingXIconOnlyLg: 14, + buttonPaddingXIconOnlyMd: 10, + buttonPaddingXIconOnlySm: 6, + buttonPaddingXWithLabelLg: 16, + buttonPaddingXWithLabelMd: 16, + buttonPaddingXWithLabelSm: 16, + buttonPaddingYLg: 14, + buttonPaddingYMd: 10, + buttonPaddingYSm: 6, + 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, + composerRadiusFixed: primitives.radius3xl, + composerRadiusFloating: primitives.radius3xl, + deviceRadius: 62, + deviceSafeAreaBottom: foundations.spacing.space32, + deviceSafeAreaTop: 62, + 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, +} as const; + +export const semantics: IStreamTokens['semantics'] = { + accentBlack: foundations.colors.baseBlack, + accentError: foundations.colors.baseBlack, + accentNeutral: foundations.colors.baseBlack, + accentPrimary: foundations.colors.baseBlack, + accentSuccess: foundations.colors.baseBlack, + accentWarning: foundations.colors.baseBlack, + avatarBgDefault: '$avatarPaletteBg1', + avatarBgPlaceholder: '$accentBlack', + avatarPaletteBg1: foundations.colors.blue900, + avatarPaletteBg2: foundations.colors.cyan900, + avatarPaletteBg3: foundations.colors.green900, + avatarPaletteBg4: foundations.colors.purple900, + avatarPaletteBg5: foundations.colors.yellow900, + avatarPaletteText1: foundations.colors.blue100, + avatarPaletteText2: foundations.colors.cyan100, + avatarPaletteText3: foundations.colors.green100, + avatarPaletteText4: foundations.colors.purple100, + avatarPaletteText5: foundations.colors.yellow100, + avatarTextDefault: '$avatarPaletteText1', + avatarTextPlaceholder: '$textInverse', + backgroundCoreApp: '$backgroundElevationElevation0', + backgroundCoreDisabled: '$backgroundElevationElevation0', + backgroundCoreHover: 'rgba(0, 0, 0, 0.1)', + backgroundCoreOverlay: 'rgba(255, 255, 255, 0.75)', + backgroundCorePressed: 'rgba(0, 0, 0, 0.2)', + backgroundCoreScrim: 'rgba(0, 0, 0, 0.25)', + backgroundCoreSelected: 'rgba(0, 0, 0, 0.2)', + backgroundCoreSurface: '$backgroundElevationElevation0', + backgroundCoreSurfaceStrong: '$backgroundElevationElevation0', + backgroundCoreSurfaceSubtle: '$backgroundElevationElevation0', + backgroundElevationElevation0: foundations.colors.baseWhite, + backgroundElevationElevation1: foundations.colors.baseWhite, + backgroundElevationElevation2: foundations.colors.baseWhite, + backgroundElevationElevation3: foundations.colors.baseWhite, + backgroundElevationElevation4: foundations.colors.baseWhite, + badgeBgDefault: '$backgroundElevationElevation1', + badgeBgError: '$accentError', + badgeBgInverse: '$accentBlack', + badgeBgNeutral: '$accentNeutral', + badgeBgPrimary: '$accentPrimary', + badgeBorder: '$borderCoreOnDark', + badgeText: '$textOnAccent', + badgeTextInverse: '$textPrimary', + borderCoreDefault: '$accentBlack', + borderCoreOnAccent: '$accentBlack', + borderCoreOnDark: foundations.colors.baseWhite, + borderCoreOpacity10: '$accentBlack', + borderCoreOpacity25: '$accentBlack', + borderCoreStrong: '$accentBlack', + borderCoreSubtle: '$accentBlack', + borderUtilityDisabled: foundations.colors.slate300, + borderUtilityError: '$accentError', + borderUtilityFocus: '$accentBlack', + borderUtilitySelected: '$accentPrimary', + borderUtilitySuccess: '$accentSuccess', + borderUtilityWarning: '$accentWarning', + brand50: foundations.colors.baseBlack, + brand100: foundations.colors.baseBlack, + brand150: foundations.colors.baseBlack, + brand200: foundations.colors.baseBlack, + brand300: foundations.colors.baseBlack, + brand400: foundations.colors.baseBlack, + brand500: foundations.colors.baseBlack, + brand600: foundations.colors.baseBlack, + brand700: foundations.colors.baseBlack, + brand800: foundations.colors.baseBlack, + brand900: foundations.colors.baseBlack, + buttonDestructiveBg: '$accentError', + buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0', + buttonDestructiveBorder: '$accentError', + buttonDestructiveText: '$accentError', + buttonDestructiveTextOnAccent: '$textOnAccent', + buttonPrimaryBg: '$accentPrimary', + buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, + buttonPrimaryBorder: '$brand200', + buttonPrimaryText: '$accentPrimary', + buttonPrimaryTextOnAccent: '$textOnAccent', + buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', + buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', + buttonSecondaryBorder: '$borderCoreDefault', + buttonSecondaryText: '$textPrimary', + buttonSecondaryTextOnAccent: '$textPrimary', + chatBgAttachmentIncoming: '$backgroundElevationElevation0', + chatBgAttachmentOutgoing: '$backgroundElevationElevation0', + chatBgIncoming: '$backgroundElevationElevation0', + chatBgOutgoing: '$backgroundElevationElevation0', + chatBgTypingIndicator: '$accentNeutral', + chatBorderIncoming: '$accentBlack', + chatBorderOnChatIncoming: '$accentBlack', + chatBorderOnChatOutgoing: '$accentBlack', + chatBorderOutgoing: '$accentBlack', + chatPollProgressFillIncoming: foundations.colors.neutral300, + chatPollProgressFillOutgoing: foundations.colors.baseBlack, + chatPollProgressTrackIncoming: '$accentBlack', + chatPollProgressTrackOutgoing: '$accentBlack', + chatReplyIndicatorIncoming: foundations.colors.baseBlack, + chatReplyIndicatorOutgoing: foundations.colors.baseBlack, + chatTextLink: '$textLink', + chatTextMention: '$textLink', + chatTextMessage: '$textPrimary', + chatTextReaction: '$textSecondary', + chatTextSystem: '$textSecondary', + chatTextTimestamp: '$textTertiary', + chatTextUsername: '$textSecondary', + chatThreadConnectorIncoming: '$accentBlack', + chatThreadConnectorOutgoing: '$accentBlack', + chatWaveformBar: '$borderCoreOpacity25', + chatWaveformBarPlaying: '$accentBlack', + composerBg: '$backgroundElevationElevation1', + controlPlayControlBg: '$backgroundElevationElevation1', + controlPlayControlBgInverse: '$accentBlack', + controlPlayControlBorder: '$borderCoreDefault', + controlPlayControlIcon: '$textPrimary', + controlPlayControlIconInverse: '$textOnAccent', + controlProgressBarFill: '$backgroundCoreSurface', + controlProgressBarTrack: '$backgroundCoreSurfaceStrong', + controlRadiocheckBg: foundations.colors.baseTransparent0, + controlRadiocheckBgSelected: '$accentPrimary', + controlRadiocheckBorder: '$borderCoreDefault', + controlRadiocheckIconSelected: '$textInverse', + controlRemoveControlBg: '$accentBlack', + controlRemoveControlBorder: '$borderCoreOnDark', + controlRemoveControlIcon: '$textInverse', + controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', + controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', + controlToggleSwitchBgSelected: '$accentPrimary', + controlToggleSwitchKnob: '$backgroundElevationElevation4', + inputBorderDefault: '$borderCoreDefault', + inputBorderFocus: '$borderUtilityFocus', + inputBorderHover: '$borderCoreStrong', + inputSendIcon: '$accentPrimary', + inputSendIconDisabled: '$textDisabled', + inputTextDefault: '$textPrimary', + inputTextDisabled: '$textDisabled', + inputTextIcon: '$textTertiary', + inputTextPlaceholder: '$textTertiary', + presenceBgOffline: '$accentNeutral', + presenceBgOnline: '$accentSuccess', + presenceBorder: '$borderCoreOnDark', + reactionBg: '$backgroundElevationElevation1', + reactionBorder: '$borderCoreDefault', + reactionEmoji: '$textPrimary', + reactionText: '$textPrimary', + systemBgBlur: foundations.colors.baseWhite, + systemCaret: foundations.colors.baseBlack, + systemScrollbar: foundations.colors.baseBlack, + systemText: foundations.colors.baseBlack, + textDisabled: foundations.colors.neutral500, + textInverse: foundations.colors.baseWhite, + textLink: foundations.colors.baseBlack, + textOnAccent: foundations.colors.baseWhite, + textPrimary: foundations.colors.baseBlack, + textSecondary: foundations.colors.neutral800, + textTertiary: foundations.colors.neutral700, +} as const; diff --git a/package/src/theme/generated/high-contrast-light/StreamTokens.web.ts b/package/src/theme/generated/high-contrast-light/StreamTokens.web.ts new file mode 100644 index 000000000..6ccc65ca0 --- /dev/null +++ b/package/src/theme/generated/high-contrast-light/StreamTokens.web.ts @@ -0,0 +1,563 @@ +// This file is autogenerated. Please do not edit it. + +import type { IStreamTokens } from '../StreamTokens.types'; + +export const foundations: IStreamTokens['foundations'] = { + colors: { + baseTransparent0: 'rgba(255, 255, 255, 0)', + baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)', + baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)', + baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)', + baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)', + baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)', + 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, + }, + 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', + fontSizeSize10: 10, + fontSizeSize12: 12, + fontSizeSize14: 14, + fontSizeSize16: 16, + fontSizeSize15: 15, + fontSizeSize17: 17, + fontSizeSize18: 18, + fontSizeSize20: 20, + fontSizeSize24: 24, + fontSizeSize28: 28, + fontSizeSize32: 32, + fontSizeSize40: 40, + fontSizeSize48: 48, + fontSizeSize13: 13, + fontSizeSize8: 8, + lineHeightLineHeight8: 8, + lineHeightLineHeight10: 10, + lineHeightLineHeight12: 12, + lineHeightLineHeight14: 14, + lineHeightLineHeight15: 15, + lineHeightLineHeight16: 16, + lineHeightLineHeight17: 17, + lineHeightLineHeight18: 18, + lineHeightLineHeight20: 20, + lineHeightLineHeight24: 24, + lineHeightLineHeight28: 28, + lineHeightLineHeight32: 32, + lineHeightLineHeight40: 40, + lineHeightLineHeight48: 48, + }, +}; + +export const primitives: IStreamTokens['primitives'] = { + darkElevation0: { + elevation: 0, + shadowColor: 'rgba(0,0,0,0)', + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0, + shadowRadius: 0, + }, + darkElevation1: { + elevation: 3, + shadowColor: 'rgba(0,0,0,0.1)', + shadowOffset: { + width: 0, + height: 2.6666666666666665, + }, + shadowOpacity: 0.3879999999999999, + shadowRadius: 6.4, + }, + darkElevation2: { + elevation: 7, + shadowColor: 'rgba(0,0,0,0.12)', + shadowOffset: { + width: 0, + height: 4.5016949152542365, + }, + shadowOpacity: 0.41655999999999993, + shadowRadius: 13.364067796610168, + }, + darkElevation3: { + elevation: 10, + shadowColor: 'rgba(0,0,0,0.14)', + shadowOffset: { + width: 0, + height: 8.839779005524864, + }, + shadowOpacity: 0.44443999999999995, + shadowRadius: 20.207734806629837, + }, + darkElevation4: { + elevation: 13, + shadowColor: 'rgba(0,0,0,0.16)', + shadowOffset: { + width: 0, + height: 14.201622247972189, + }, + shadowOpacity: 0.48592, + shadowRadius: 26.994206257242176, + }, + lightElevation0: { + elevation: 0, + shadowColor: 'rgba(0,0,0,0)', + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0, + shadowRadius: 0, + }, + lightElevation1: { + elevation: 3, + shadowColor: 'rgba(0,0,0,0.06)', + shadowOffset: { + width: 0, + height: 2.904109589041096, + }, + shadowOpacity: 0.19630000000000003, + shadowRadius: 6.684931506849315, + }, + lightElevation2: { + elevation: 7, + shadowColor: 'rgba(0,0,0,0.06)', + shadowOffset: { + width: 0, + height: 4.510067114093959, + }, + shadowOpacity: 0.21416000000000013, + shadowRadius: 13.358389261744968, + }, + lightElevation3: { + elevation: 10, + shadowColor: 'rgba(0,0,0,0.1)', + shadowOffset: { + width: 0, + height: 9.322128851540615, + }, + shadowOpacity: 0.26470000000000005, + shadowRadius: 20.786554621848737, + }, + lightElevation4: { + elevation: 14, + shadowColor: 'rgba(0,0,0,0.12)', + shadowOffset: { + width: 0, + height: 15.201376936316695, + }, + shadowOpacity: 0.29776, + shadowRadius: 27.86919104991394, + }, + 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.fontFamilyGeistMono, + typographyFontFamilySans: foundations.typography.fontFamilyGeist, + typographyFontSize2xl: foundations.typography.fontSizeSize24, + typographyFontSizeLg: foundations.typography.fontSizeSize18, + typographyFontSizeMd: foundations.typography.fontSizeSize16, + typographyFontSizeMicro: foundations.typography.fontSizeSize8, + typographyFontSizeSm: foundations.typography.fontSizeSize14, + typographyFontSizeXl: foundations.typography.fontSizeSize20, + typographyFontSizeXs: foundations.typography.fontSizeSize12, + typographyFontSizeXxs: foundations.typography.fontSizeSize10, + typographyFontWeightBold: 700, + typographyFontWeightMedium: 500, + typographyFontWeightRegular: 400, + typographyFontWeightSemiBold: 600, + typographyLineHeightNormal: foundations.typography.lineHeightLineHeight20, + typographyLineHeightRelaxed: foundations.typography.lineHeightLineHeight24, + typographyLineHeightTight: foundations.typography.lineHeightLineHeight16, +} as const; + +export const components: IStreamTokens['components'] = { + buttonHitTargetMinHeight: foundations.layout.size48, + buttonHitTargetMinWidth: foundations.layout.size48, + buttonPaddingXIconOnlyLg: 14, + buttonPaddingXIconOnlyMd: 10, + buttonPaddingXIconOnlySm: 6, + buttonPaddingXWithLabelLg: 16, + buttonPaddingXWithLabelMd: 16, + buttonPaddingXWithLabelSm: 16, + buttonPaddingYLg: 14, + buttonPaddingYMd: 10, + buttonPaddingYSm: 6, + 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, + composerRadiusFixed: primitives.radius3xl, + composerRadiusFloating: primitives.radius3xl, + deviceRadius: primitives.radiusMd, + deviceSafeAreaBottom: foundations.spacing.space0, + deviceSafeAreaTop: foundations.spacing.space0, + 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, +} as const; + +export const semantics: IStreamTokens['semantics'] = { + accentBlack: foundations.colors.baseBlack, + accentError: foundations.colors.baseBlack, + accentNeutral: foundations.colors.baseBlack, + accentPrimary: foundations.colors.baseBlack, + accentSuccess: foundations.colors.baseBlack, + accentWarning: foundations.colors.baseBlack, + avatarBgDefault: '$avatarPaletteBg1', + avatarBgPlaceholder: '$accentBlack', + avatarPaletteBg1: foundations.colors.blue900, + avatarPaletteBg2: foundations.colors.cyan900, + avatarPaletteBg3: foundations.colors.green900, + avatarPaletteBg4: foundations.colors.purple900, + avatarPaletteBg5: foundations.colors.yellow900, + avatarPaletteText1: foundations.colors.blue100, + avatarPaletteText2: foundations.colors.cyan100, + avatarPaletteText3: foundations.colors.green100, + avatarPaletteText4: foundations.colors.purple100, + avatarPaletteText5: foundations.colors.yellow100, + avatarTextDefault: '$avatarPaletteText1', + avatarTextPlaceholder: '$textInverse', + backgroundCoreApp: '$backgroundElevationElevation0', + backgroundCoreDisabled: '$backgroundElevationElevation0', + backgroundCoreHover: 'rgba(0, 0, 0, 0.1)', + backgroundCoreOverlay: 'rgba(255, 255, 255, 0.75)', + backgroundCorePressed: 'rgba(0, 0, 0, 0.2)', + backgroundCoreScrim: 'rgba(0, 0, 0, 0.25)', + backgroundCoreSelected: 'rgba(0, 0, 0, 0.2)', + backgroundCoreSurface: '$backgroundElevationElevation0', + backgroundCoreSurfaceStrong: '$backgroundElevationElevation0', + backgroundCoreSurfaceSubtle: '$backgroundElevationElevation0', + backgroundElevationElevation0: foundations.colors.baseWhite, + backgroundElevationElevation1: foundations.colors.baseWhite, + backgroundElevationElevation2: foundations.colors.baseWhite, + backgroundElevationElevation3: foundations.colors.baseWhite, + backgroundElevationElevation4: foundations.colors.baseWhite, + badgeBgDefault: '$backgroundElevationElevation1', + badgeBgError: '$accentError', + badgeBgInverse: '$accentBlack', + badgeBgNeutral: '$accentNeutral', + badgeBgPrimary: '$accentPrimary', + badgeBorder: '$borderCoreOnDark', + badgeText: '$textOnAccent', + badgeTextInverse: '$textPrimary', + borderCoreDefault: '$accentBlack', + borderCoreOnAccent: '$accentBlack', + borderCoreOnDark: foundations.colors.baseWhite, + borderCoreOpacity10: '$accentBlack', + borderCoreOpacity25: '$accentBlack', + borderCoreStrong: '$accentBlack', + borderCoreSubtle: '$accentBlack', + borderUtilityDisabled: foundations.colors.slate300, + borderUtilityError: '$accentError', + borderUtilityFocus: '$accentBlack', + borderUtilitySelected: '$accentPrimary', + borderUtilitySuccess: '$accentSuccess', + borderUtilityWarning: '$accentWarning', + brand50: foundations.colors.baseBlack, + brand100: foundations.colors.baseBlack, + brand150: foundations.colors.baseBlack, + brand200: foundations.colors.baseBlack, + brand300: foundations.colors.baseBlack, + brand400: foundations.colors.baseBlack, + brand500: foundations.colors.baseBlack, + brand600: foundations.colors.baseBlack, + brand700: foundations.colors.baseBlack, + brand800: foundations.colors.baseBlack, + brand900: foundations.colors.baseBlack, + buttonDestructiveBg: '$accentError', + buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0', + buttonDestructiveBorder: '$accentError', + buttonDestructiveText: '$accentError', + buttonDestructiveTextOnAccent: '$textOnAccent', + buttonPrimaryBg: '$accentPrimary', + buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, + buttonPrimaryBorder: '$brand200', + buttonPrimaryText: '$accentPrimary', + buttonPrimaryTextOnAccent: '$textOnAccent', + buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', + buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', + buttonSecondaryBorder: '$borderCoreDefault', + buttonSecondaryText: '$textPrimary', + buttonSecondaryTextOnAccent: '$textPrimary', + chatBgAttachmentIncoming: '$backgroundElevationElevation0', + chatBgAttachmentOutgoing: '$backgroundElevationElevation0', + chatBgIncoming: '$backgroundElevationElevation0', + chatBgOutgoing: '$backgroundElevationElevation0', + chatBgTypingIndicator: '$accentNeutral', + chatBorderIncoming: '$accentBlack', + chatBorderOnChatIncoming: '$accentBlack', + chatBorderOnChatOutgoing: '$accentBlack', + chatBorderOutgoing: '$accentBlack', + chatPollProgressFillIncoming: foundations.colors.neutral300, + chatPollProgressFillOutgoing: foundations.colors.baseBlack, + chatPollProgressTrackIncoming: '$accentBlack', + chatPollProgressTrackOutgoing: '$accentBlack', + chatReplyIndicatorIncoming: foundations.colors.baseBlack, + chatReplyIndicatorOutgoing: foundations.colors.baseBlack, + chatTextLink: '$textLink', + chatTextMention: '$textLink', + chatTextMessage: '$textPrimary', + chatTextReaction: '$textSecondary', + chatTextSystem: '$textSecondary', + chatTextTimestamp: '$textTertiary', + chatTextUsername: '$textSecondary', + chatThreadConnectorIncoming: '$accentBlack', + chatThreadConnectorOutgoing: '$accentBlack', + chatWaveformBar: '$borderCoreOpacity25', + chatWaveformBarPlaying: '$accentBlack', + composerBg: '$backgroundElevationElevation1', + controlPlayControlBg: '$backgroundElevationElevation1', + controlPlayControlBgInverse: '$accentBlack', + controlPlayControlBorder: '$borderCoreDefault', + controlPlayControlIcon: '$textPrimary', + controlPlayControlIconInverse: '$textOnAccent', + controlProgressBarFill: '$backgroundCoreSurface', + controlProgressBarTrack: '$backgroundCoreSurfaceStrong', + controlRadiocheckBg: foundations.colors.baseTransparent0, + controlRadiocheckBgSelected: '$accentPrimary', + controlRadiocheckBorder: '$borderCoreDefault', + controlRadiocheckIconSelected: '$textInverse', + controlRemoveControlBg: '$accentBlack', + controlRemoveControlBorder: '$borderCoreOnDark', + controlRemoveControlIcon: '$textInverse', + controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', + controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', + controlToggleSwitchBgSelected: '$accentPrimary', + controlToggleSwitchKnob: '$backgroundElevationElevation4', + inputBorderDefault: '$borderCoreDefault', + inputBorderFocus: '$borderUtilityFocus', + inputBorderHover: '$borderCoreStrong', + inputSendIcon: '$accentPrimary', + inputSendIconDisabled: '$textDisabled', + inputTextDefault: '$textPrimary', + inputTextDisabled: '$textDisabled', + inputTextIcon: '$textTertiary', + inputTextPlaceholder: '$textTertiary', + presenceBgOffline: '$accentNeutral', + presenceBgOnline: '$accentSuccess', + presenceBorder: '$borderCoreOnDark', + reactionBg: '$backgroundElevationElevation1', + reactionBorder: '$borderCoreDefault', + reactionEmoji: '$textPrimary', + reactionText: '$textPrimary', + systemBgBlur: foundations.colors.baseWhite, + systemCaret: foundations.colors.baseBlack, + systemScrollbar: foundations.colors.baseBlack, + systemText: foundations.colors.baseBlack, + textDisabled: foundations.colors.neutral500, + textInverse: foundations.colors.baseWhite, + textLink: foundations.colors.baseBlack, + textOnAccent: foundations.colors.baseWhite, + textPrimary: foundations.colors.baseBlack, + textSecondary: foundations.colors.neutral800, + textTertiary: foundations.colors.neutral700, +} as const; diff --git a/package/src/theme/generated/light/StreamTokens.android.ts b/package/src/theme/generated/light/StreamTokens.android.ts new file mode 100644 index 000000000..772b61409 --- /dev/null +++ b/package/src/theme/generated/light/StreamTokens.android.ts @@ -0,0 +1,563 @@ +// This file is autogenerated. Please do not edit it. + +import type { IStreamTokens } from '../StreamTokens.types'; + +export const foundations: IStreamTokens['foundations'] = { + colors: { + baseTransparent0: 'rgba(255, 255, 255, 0)', + baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)', + baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)', + baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)', + baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)', + baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)', + 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, + }, + 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', + fontSizeSize10: 10, + fontSizeSize12: 12, + fontSizeSize14: 14, + fontSizeSize16: 16, + fontSizeSize15: 15, + fontSizeSize17: 17, + fontSizeSize18: 18, + fontSizeSize20: 20, + fontSizeSize24: 24, + fontSizeSize28: 28, + fontSizeSize32: 32, + fontSizeSize40: 40, + fontSizeSize48: 48, + fontSizeSize13: 13, + fontSizeSize8: 8, + lineHeightLineHeight8: 8, + lineHeightLineHeight10: 10, + lineHeightLineHeight12: 12, + lineHeightLineHeight14: 14, + lineHeightLineHeight15: 15, + lineHeightLineHeight16: 16, + lineHeightLineHeight17: 17, + lineHeightLineHeight18: 18, + lineHeightLineHeight20: 20, + lineHeightLineHeight24: 24, + lineHeightLineHeight28: 28, + lineHeightLineHeight32: 32, + lineHeightLineHeight40: 40, + lineHeightLineHeight48: 48, + }, +}; + +export const primitives: IStreamTokens['primitives'] = { + darkElevation0: { + elevation: 0, + shadowColor: 'rgba(0,0,0,0)', + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0, + shadowRadius: 0, + }, + darkElevation1: { + elevation: 2, + shadowColor: 'rgba(0,0,0,0.28)', + shadowOffset: { + width: 0, + height: 1.4878048780487807, + }, + shadowOpacity: 0.42400000000000004, + shadowRadius: 3.6926829268292685, + }, + darkElevation2: { + elevation: 3, + shadowColor: 'rgba(0,0,0,0.30)', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.44000000000000006, + shadowRadius: 5.630769230769231, + }, + darkElevation3: { + elevation: 6, + shadowColor: 'rgba(0,0,0,0.32)', + shadowOffset: { + width: 0, + height: 3.488372093023256, + }, + shadowOpacity: 0.4696, + shadowRadius: 11.079069767441862, + }, + darkElevation4: { + elevation: 8, + shadowColor: 'rgba(0,0,0,0.36)', + shadowOffset: { + width: 0, + height: 5.384615384615384, + }, + shadowOpacity: 0.5136000000000001, + shadowRadius: 16.892307692307693, + }, + lightElevation0: { + elevation: 0, + shadowColor: 'rgba(0,0,0,0)', + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0, + shadowRadius: 0, + }, + lightElevation1: { + elevation: 1, + shadowColor: 'rgba(0,0,0,0.2)', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.29599999999999993, + shadowRadius: 2.8285714285714287, + }, + lightElevation2: { + elevation: 3, + shadowColor: 'rgba(0,0,0,0.22)', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.3136, + shadowRadius: 5.68, + }, + lightElevation3: { + elevation: 6, + shadowColor: 'rgba(0,0,0,0.24)', + shadowOffset: { + width: 0, + height: 3.5, + }, + shadowOpacity: 0.36160000000000003, + shadowRadius: 11.100000000000001, + }, + lightElevation4: { + elevation: 8, + shadowColor: 'rgba(0,0,0,0.28)', + shadowOffset: { + width: 0, + height: 5.4, + }, + shadowOpacity: 0.40959999999999996, + shadowRadius: 16.919999999999998, + }, + radius2xl: foundations.radius.radius16, + radius3xl: foundations.radius.radius20, + radius4xl: foundations.radius.radius24, + radiusLg: foundations.radius.radius8, + radiusMax: foundations.radius.radiusFull, + radiusMd: foundations.radius.radius6, + radiusNone: foundations.radius.radius0, + radiusSm: foundations.radius.radius4, + radiusXl: foundations.radius.radius12, + radiusXs: foundations.radius.radius2, + radiusXxs: foundations.radius.radius0, + 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.fontFamilyRobotoMono, + typographyFontFamilySans: foundations.typography.fontFamilyRoboto, + typographyFontSize2xl: foundations.typography.fontSizeSize24, + typographyFontSizeLg: foundations.typography.fontSizeSize18, + typographyFontSizeMd: foundations.typography.fontSizeSize16, + typographyFontSizeMicro: foundations.typography.fontSizeSize8, + typographyFontSizeSm: foundations.typography.fontSizeSize14, + typographyFontSizeXl: foundations.typography.fontSizeSize20, + typographyFontSizeXs: foundations.typography.fontSizeSize12, + typographyFontSizeXxs: foundations.typography.fontSizeSize10, + typographyFontWeightBold: 700, + typographyFontWeightMedium: 500, + typographyFontWeightRegular: 400, + typographyFontWeightSemiBold: 600, + typographyLineHeightNormal: foundations.typography.lineHeightLineHeight20, + typographyLineHeightRelaxed: foundations.typography.lineHeightLineHeight24, + typographyLineHeightTight: foundations.typography.lineHeightLineHeight16, +} as const; + +export const components: IStreamTokens['components'] = { + buttonHitTargetMinHeight: foundations.layout.size48, + buttonHitTargetMinWidth: foundations.layout.size48, + buttonPaddingXIconOnlyLg: 14, + buttonPaddingXIconOnlyMd: 10, + buttonPaddingXIconOnlySm: 6, + buttonPaddingXWithLabelLg: 16, + buttonPaddingXWithLabelMd: 16, + buttonPaddingXWithLabelSm: 16, + buttonPaddingYLg: 14, + buttonPaddingYMd: 10, + buttonPaddingYSm: 6, + 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, + composerRadiusFixed: primitives.radius3xl, + composerRadiusFloating: primitives.radius3xl, + deviceRadius: primitives.radius4xl, + deviceSafeAreaBottom: foundations.spacing.space40, + deviceSafeAreaTop: foundations.spacing.space40, + 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, +} as const; + +export const semantics: IStreamTokens['semantics'] = { + accentBlack: foundations.colors.baseBlack, + accentError: foundations.colors.red500, + accentNeutral: foundations.colors.slate500, + accentPrimary: '$brand500', + accentSuccess: foundations.colors.green300, + accentWarning: foundations.colors.yellow400, + avatarBgDefault: '$avatarPaletteBg1', + avatarBgPlaceholder: foundations.colors.slate100, + avatarPaletteBg1: foundations.colors.blue100, + avatarPaletteBg2: foundations.colors.cyan100, + avatarPaletteBg3: foundations.colors.green100, + avatarPaletteBg4: foundations.colors.purple100, + avatarPaletteBg5: foundations.colors.yellow100, + avatarPaletteText1: foundations.colors.blue800, + avatarPaletteText2: foundations.colors.cyan800, + avatarPaletteText3: foundations.colors.green800, + avatarPaletteText4: foundations.colors.purple800, + avatarPaletteText5: foundations.colors.yellow800, + avatarTextDefault: '$avatarPaletteText1', + avatarTextPlaceholder: foundations.colors.slate500, + backgroundCoreApp: '$backgroundElevationElevation0', + backgroundCoreDisabled: foundations.colors.slate100, + backgroundCoreHover: 'rgba(30, 37, 43, 0.05)', + backgroundCoreOverlay: 'rgba(255, 255, 255, 0.75)', + backgroundCorePressed: 'rgba(30, 37, 43, 0.1)', + backgroundCoreScrim: 'rgba(0, 0, 0, 0.25)', + backgroundCoreSelected: 'rgba(30, 37, 43, 0.15)', + backgroundCoreSurface: foundations.colors.slate200, + backgroundCoreSurfaceStrong: foundations.colors.slate300, + backgroundCoreSurfaceSubtle: foundations.colors.slate100, + backgroundElevationElevation0: foundations.colors.baseWhite, + backgroundElevationElevation1: foundations.colors.baseWhite, + backgroundElevationElevation2: foundations.colors.baseWhite, + backgroundElevationElevation3: foundations.colors.baseWhite, + backgroundElevationElevation4: foundations.colors.baseWhite, + badgeBgDefault: '$backgroundElevationElevation1', + badgeBgError: '$accentError', + badgeBgInverse: '$accentBlack', + badgeBgNeutral: '$accentNeutral', + badgeBgPrimary: '$accentPrimary', + badgeBorder: '$borderCoreOnDark', + badgeText: '$textOnAccent', + badgeTextInverse: '$textPrimary', + borderCoreDefault: foundations.colors.slate150, + borderCoreOnAccent: foundations.colors.baseWhite, + borderCoreOnDark: foundations.colors.baseWhite, + borderCoreOpacity10: 'rgba(0, 0, 0, 0.1)', + borderCoreOpacity25: 'rgba(0, 0, 0, 0.25)', + borderCoreStrong: foundations.colors.slate200, + borderCoreSubtle: foundations.colors.slate100, + borderUtilityDisabled: foundations.colors.slate200, + borderUtilityError: '$accentError', + borderUtilityFocus: '$brand300', + borderUtilitySelected: '$accentPrimary', + borderUtilitySuccess: '$accentSuccess', + borderUtilityWarning: '$accentWarning', + brand50: foundations.colors.blue50, + brand100: foundations.colors.blue100, + brand150: foundations.colors.blue150, + brand200: foundations.colors.blue200, + brand300: foundations.colors.blue300, + brand400: foundations.colors.blue400, + brand500: foundations.colors.blue500, + brand600: foundations.colors.blue600, + brand700: foundations.colors.blue700, + brand800: foundations.colors.blue800, + brand900: foundations.colors.blue900, + buttonDestructiveBg: '$accentError', + buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0', + buttonDestructiveBorder: '$accentError', + buttonDestructiveText: '$accentError', + buttonDestructiveTextOnAccent: '$textOnAccent', + buttonPrimaryBg: '$accentPrimary', + buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, + buttonPrimaryBorder: '$brand200', + buttonPrimaryText: '$accentPrimary', + buttonPrimaryTextOnAccent: '$textOnAccent', + buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', + buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', + buttonSecondaryBorder: '$borderCoreDefault', + buttonSecondaryText: '$textPrimary', + buttonSecondaryTextOnAccent: '$textPrimary', + chatBgAttachmentIncoming: foundations.colors.slate150, + chatBgAttachmentOutgoing: '$brand150', + chatBgIncoming: foundations.colors.slate100, + chatBgOutgoing: '$brand100', + chatBgTypingIndicator: '$accentNeutral', + chatBorderIncoming: foundations.colors.baseTransparent0, + chatBorderOnChatIncoming: foundations.colors.slate400, + chatBorderOnChatOutgoing: '$brand300', + chatBorderOutgoing: foundations.colors.baseTransparent0, + chatPollProgressFillIncoming: foundations.colors.slate300, + chatPollProgressFillOutgoing: '$brand200', + chatPollProgressTrackIncoming: foundations.colors.slate600, + chatPollProgressTrackOutgoing: '$accentPrimary', + chatReplyIndicatorIncoming: foundations.colors.slate400, + chatReplyIndicatorOutgoing: '$brand400', + chatTextLink: '$textLink', + chatTextMention: '$textLink', + chatTextMessage: '$textPrimary', + chatTextReaction: '$textSecondary', + chatTextSystem: '$textSecondary', + chatTextTimestamp: '$textTertiary', + chatTextUsername: '$textSecondary', + chatThreadConnectorIncoming: foundations.colors.slate200, + chatThreadConnectorOutgoing: '$chatBgOutgoing', + chatWaveformBar: '$borderCoreOpacity25', + chatWaveformBarPlaying: '$accentPrimary', + composerBg: '$backgroundElevationElevation1', + controlPlayControlBg: '$backgroundElevationElevation1', + controlPlayControlBgInverse: '$accentBlack', + controlPlayControlBorder: '$borderCoreDefault', + controlPlayControlIcon: '$textPrimary', + controlPlayControlIconInverse: '$textOnAccent', + controlProgressBarFill: foundations.colors.slate200, + controlProgressBarTrack: foundations.colors.slate500, + controlRadiocheckBg: foundations.colors.baseTransparent0, + controlRadiocheckBgSelected: '$accentPrimary', + controlRadiocheckBorder: '$borderCoreDefault', + controlRadiocheckIconSelected: '$textInverse', + controlRemoveControlBg: '$accentBlack', + controlRemoveControlBorder: '$borderCoreOnDark', + controlRemoveControlIcon: '$textOnAccent', + controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', + controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', + controlToggleSwitchBgSelected: '$accentPrimary', + controlToggleSwitchKnob: '$backgroundElevationElevation4', + inputBorderDefault: '$borderCoreDefault', + inputBorderFocus: '$borderUtilitySelected', + inputBorderHover: '$borderCoreStrong', + inputSendIcon: '$accentPrimary', + inputSendIconDisabled: '$textDisabled', + inputTextDefault: '$textPrimary', + inputTextDisabled: '$textDisabled', + inputTextIcon: '$textTertiary', + inputTextPlaceholder: '$textTertiary', + presenceBgOffline: '$accentNeutral', + presenceBgOnline: '$accentSuccess', + presenceBorder: '$borderCoreOnDark', + reactionBg: '$backgroundElevationElevation1', + reactionBorder: '$borderCoreDefault', + reactionEmoji: '$textPrimary', + reactionText: '$textPrimary', + systemBgBlur: 'rgba(255, 255, 255, 0.01)', + systemCaret: '$accentPrimary', + systemScrollbar: 'rgba(0, 0, 0, 0.5)', + systemText: foundations.colors.baseBlack, + textDisabled: foundations.colors.slate400, + textInverse: foundations.colors.baseWhite, + textLink: '$accentPrimary', + textOnAccent: foundations.colors.baseWhite, + textPrimary: foundations.colors.slate900, + textSecondary: foundations.colors.slate700, + textTertiary: foundations.colors.slate500, +} as const; diff --git a/package/src/theme/generated/light/StreamTokens.ios.ts b/package/src/theme/generated/light/StreamTokens.ios.ts new file mode 100644 index 000000000..c6bdb4d79 --- /dev/null +++ b/package/src/theme/generated/light/StreamTokens.ios.ts @@ -0,0 +1,563 @@ +// This file is autogenerated. Please do not edit it. + +import type { IStreamTokens } from '../StreamTokens.types'; + +export const foundations: IStreamTokens['foundations'] = { + colors: { + baseTransparent0: 'rgba(255, 255, 255, 0)', + baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)', + baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)', + baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)', + baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)', + baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)', + 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, + }, + 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', + fontSizeSize10: 10, + fontSizeSize12: 12, + fontSizeSize14: 14, + fontSizeSize16: 16, + fontSizeSize15: 15, + fontSizeSize17: 17, + fontSizeSize18: 18, + fontSizeSize20: 20, + fontSizeSize24: 24, + fontSizeSize28: 28, + fontSizeSize32: 32, + fontSizeSize40: 40, + fontSizeSize48: 48, + fontSizeSize13: 13, + fontSizeSize8: 8, + lineHeightLineHeight8: 8, + lineHeightLineHeight10: 10, + lineHeightLineHeight12: 12, + lineHeightLineHeight14: 14, + lineHeightLineHeight15: 15, + lineHeightLineHeight16: 16, + lineHeightLineHeight17: 17, + lineHeightLineHeight18: 18, + lineHeightLineHeight20: 20, + lineHeightLineHeight24: 24, + lineHeightLineHeight28: 28, + lineHeightLineHeight32: 32, + lineHeightLineHeight40: 40, + lineHeightLineHeight48: 48, + }, +}; + +export const primitives: IStreamTokens['primitives'] = { + darkElevation0: { + elevation: 0, + shadowColor: 'rgba(0,0,0,0)', + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0, + shadowRadius: 0, + }, + darkElevation1: { + elevation: 2, + shadowColor: 'rgba(0,0,0,0.20)', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.19999999999999996, + shadowRadius: 3, + }, + darkElevation2: { + elevation: 3, + shadowColor: 'rgba(0,0,0,0.22)', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.21999999999999997, + shadowRadius: 6, + }, + darkElevation3: { + elevation: 6, + shadowColor: 'rgba(0,0,0,0.24)', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.24, + shadowRadius: 12.000000000000002, + }, + darkElevation4: { + elevation: 12, + shadowColor: 'rgba(0,0,0,0.28)', + shadowOffset: { + width: 0, + height: 8, + }, + shadowOpacity: 0.28, + shadowRadius: 24.000000000000004, + }, + lightElevation0: { + elevation: 0, + shadowColor: 'rgba(0,0,0,0)', + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0, + shadowRadius: 0, + }, + lightElevation1: { + elevation: 2, + shadowColor: 'rgba(0,0,0,0.12)', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.12, + shadowRadius: 3.0000000000000004, + }, + lightElevation2: { + elevation: 3, + shadowColor: 'rgba(0,0,0,0.14)', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.14, + shadowRadius: 6.000000000000001, + }, + lightElevation3: { + elevation: 6, + shadowColor: 'rgba(0,0,0,0.16)', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.16000000000000003, + shadowRadius: 12, + }, + lightElevation4: { + elevation: 12, + shadowColor: 'rgba(0,0,0,0.20)', + 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.fontSizeSize17, + typographyFontSizeMd: foundations.typography.fontSizeSize15, + typographyFontSizeMicro: foundations.typography.fontSizeSize8, + typographyFontSizeSm: foundations.typography.fontSizeSize13, + typographyFontSizeXl: foundations.typography.fontSizeSize20, + typographyFontSizeXs: foundations.typography.fontSizeSize12, + typographyFontSizeXxs: foundations.typography.fontSizeSize10, + typographyFontWeightBold: 700, + typographyFontWeightMedium: 500, + typographyFontWeightRegular: 400, + typographyFontWeightSemiBold: 600, + typographyLineHeightNormal: foundations.typography.lineHeightLineHeight20, + typographyLineHeightRelaxed: foundations.typography.lineHeightLineHeight24, + typographyLineHeightTight: foundations.typography.lineHeightLineHeight16, +} as const; + +export const components: IStreamTokens['components'] = { + buttonHitTargetMinHeight: foundations.layout.size48, + buttonHitTargetMinWidth: foundations.layout.size48, + buttonPaddingXIconOnlyLg: 14, + buttonPaddingXIconOnlyMd: 10, + buttonPaddingXIconOnlySm: 6, + buttonPaddingXWithLabelLg: 16, + buttonPaddingXWithLabelMd: 16, + buttonPaddingXWithLabelSm: 16, + buttonPaddingYLg: 14, + buttonPaddingYMd: 10, + buttonPaddingYSm: 6, + 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, + composerRadiusFixed: primitives.radius3xl, + composerRadiusFloating: primitives.radius3xl, + deviceRadius: 62, + deviceSafeAreaBottom: foundations.spacing.space32, + deviceSafeAreaTop: 62, + 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, +} as const; + +export const semantics: IStreamTokens['semantics'] = { + accentBlack: foundations.colors.baseBlack, + accentError: foundations.colors.red500, + accentNeutral: foundations.colors.slate500, + accentPrimary: '$brand500', + accentSuccess: foundations.colors.green300, + accentWarning: foundations.colors.yellow400, + avatarBgDefault: '$avatarPaletteBg1', + avatarBgPlaceholder: foundations.colors.slate100, + avatarPaletteBg1: foundations.colors.blue100, + avatarPaletteBg2: foundations.colors.cyan100, + avatarPaletteBg3: foundations.colors.green100, + avatarPaletteBg4: foundations.colors.purple100, + avatarPaletteBg5: foundations.colors.yellow100, + avatarPaletteText1: foundations.colors.blue800, + avatarPaletteText2: foundations.colors.cyan800, + avatarPaletteText3: foundations.colors.green800, + avatarPaletteText4: foundations.colors.purple800, + avatarPaletteText5: foundations.colors.yellow800, + avatarTextDefault: '$avatarPaletteText1', + avatarTextPlaceholder: foundations.colors.slate500, + backgroundCoreApp: '$backgroundElevationElevation0', + backgroundCoreDisabled: foundations.colors.slate100, + backgroundCoreHover: 'rgba(30, 37, 43, 0.05)', + backgroundCoreOverlay: 'rgba(255, 255, 255, 0.75)', + backgroundCorePressed: 'rgba(30, 37, 43, 0.1)', + backgroundCoreScrim: 'rgba(0, 0, 0, 0.25)', + backgroundCoreSelected: 'rgba(30, 37, 43, 0.15)', + backgroundCoreSurface: foundations.colors.slate200, + backgroundCoreSurfaceStrong: foundations.colors.slate300, + backgroundCoreSurfaceSubtle: foundations.colors.slate100, + backgroundElevationElevation0: foundations.colors.baseWhite, + backgroundElevationElevation1: foundations.colors.baseWhite, + backgroundElevationElevation2: foundations.colors.baseWhite, + backgroundElevationElevation3: foundations.colors.baseWhite, + backgroundElevationElevation4: foundations.colors.baseWhite, + badgeBgDefault: '$backgroundElevationElevation1', + badgeBgError: '$accentError', + badgeBgInverse: '$accentBlack', + badgeBgNeutral: '$accentNeutral', + badgeBgPrimary: '$accentPrimary', + badgeBorder: '$borderCoreOnDark', + badgeText: '$textOnAccent', + badgeTextInverse: '$textPrimary', + borderCoreDefault: foundations.colors.slate150, + borderCoreOnAccent: foundations.colors.baseWhite, + borderCoreOnDark: foundations.colors.baseWhite, + borderCoreOpacity10: 'rgba(0, 0, 0, 0.1)', + borderCoreOpacity25: 'rgba(0, 0, 0, 0.25)', + borderCoreStrong: foundations.colors.slate200, + borderCoreSubtle: foundations.colors.slate100, + borderUtilityDisabled: foundations.colors.slate200, + borderUtilityError: '$accentError', + borderUtilityFocus: '$brand300', + borderUtilitySelected: '$accentPrimary', + borderUtilitySuccess: '$accentSuccess', + borderUtilityWarning: '$accentWarning', + brand50: foundations.colors.blue50, + brand100: foundations.colors.blue100, + brand150: foundations.colors.blue150, + brand200: foundations.colors.blue200, + brand300: foundations.colors.blue300, + brand400: foundations.colors.blue400, + brand500: foundations.colors.blue500, + brand600: foundations.colors.blue600, + brand700: foundations.colors.blue700, + brand800: foundations.colors.blue800, + brand900: foundations.colors.blue900, + buttonDestructiveBg: '$accentError', + buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0', + buttonDestructiveBorder: '$accentError', + buttonDestructiveText: '$accentError', + buttonDestructiveTextOnAccent: '$textOnAccent', + buttonPrimaryBg: '$accentPrimary', + buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, + buttonPrimaryBorder: '$brand200', + buttonPrimaryText: '$accentPrimary', + buttonPrimaryTextOnAccent: '$textOnAccent', + buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', + buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', + buttonSecondaryBorder: '$borderCoreDefault', + buttonSecondaryText: '$textPrimary', + buttonSecondaryTextOnAccent: '$textPrimary', + chatBgAttachmentIncoming: foundations.colors.slate150, + chatBgAttachmentOutgoing: '$brand150', + chatBgIncoming: foundations.colors.slate100, + chatBgOutgoing: '$brand100', + chatBgTypingIndicator: '$accentNeutral', + chatBorderIncoming: foundations.colors.baseTransparent0, + chatBorderOnChatIncoming: foundations.colors.slate400, + chatBorderOnChatOutgoing: '$brand300', + chatBorderOutgoing: foundations.colors.baseTransparent0, + chatPollProgressFillIncoming: foundations.colors.slate300, + chatPollProgressFillOutgoing: '$brand200', + chatPollProgressTrackIncoming: foundations.colors.slate600, + chatPollProgressTrackOutgoing: '$accentPrimary', + chatReplyIndicatorIncoming: foundations.colors.slate400, + chatReplyIndicatorOutgoing: '$brand400', + chatTextLink: '$textLink', + chatTextMention: '$textLink', + chatTextMessage: '$textPrimary', + chatTextReaction: '$textSecondary', + chatTextSystem: '$textSecondary', + chatTextTimestamp: '$textTertiary', + chatTextUsername: '$textSecondary', + chatThreadConnectorIncoming: foundations.colors.slate200, + chatThreadConnectorOutgoing: '$chatBgOutgoing', + chatWaveformBar: '$borderCoreOpacity25', + chatWaveformBarPlaying: '$accentPrimary', + composerBg: '$backgroundElevationElevation1', + controlPlayControlBg: '$backgroundElevationElevation1', + controlPlayControlBgInverse: '$accentBlack', + controlPlayControlBorder: '$borderCoreDefault', + controlPlayControlIcon: '$textPrimary', + controlPlayControlIconInverse: '$textOnAccent', + controlProgressBarFill: foundations.colors.slate200, + controlProgressBarTrack: foundations.colors.slate500, + controlRadiocheckBg: foundations.colors.baseTransparent0, + controlRadiocheckBgSelected: '$accentPrimary', + controlRadiocheckBorder: '$borderCoreDefault', + controlRadiocheckIconSelected: '$textInverse', + controlRemoveControlBg: '$accentBlack', + controlRemoveControlBorder: '$borderCoreOnDark', + controlRemoveControlIcon: '$textOnAccent', + controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', + controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', + controlToggleSwitchBgSelected: '$accentPrimary', + controlToggleSwitchKnob: '$backgroundElevationElevation4', + inputBorderDefault: '$borderCoreDefault', + inputBorderFocus: '$borderUtilitySelected', + inputBorderHover: '$borderCoreStrong', + inputSendIcon: '$accentPrimary', + inputSendIconDisabled: '$textDisabled', + inputTextDefault: '$textPrimary', + inputTextDisabled: '$textDisabled', + inputTextIcon: '$textTertiary', + inputTextPlaceholder: '$textTertiary', + presenceBgOffline: '$accentNeutral', + presenceBgOnline: '$accentSuccess', + presenceBorder: '$borderCoreOnDark', + reactionBg: '$backgroundElevationElevation1', + reactionBorder: '$borderCoreDefault', + reactionEmoji: '$textPrimary', + reactionText: '$textPrimary', + systemBgBlur: 'rgba(255, 255, 255, 0.01)', + systemCaret: '$accentPrimary', + systemScrollbar: 'rgba(0, 0, 0, 0.5)', + systemText: foundations.colors.baseBlack, + textDisabled: foundations.colors.slate400, + textInverse: foundations.colors.baseWhite, + textLink: '$accentPrimary', + textOnAccent: foundations.colors.baseWhite, + textPrimary: foundations.colors.slate900, + textSecondary: foundations.colors.slate700, + textTertiary: foundations.colors.slate500, +} as const; diff --git a/package/src/theme/generated/light/StreamTokens.web.ts b/package/src/theme/generated/light/StreamTokens.web.ts new file mode 100644 index 000000000..c46454929 --- /dev/null +++ b/package/src/theme/generated/light/StreamTokens.web.ts @@ -0,0 +1,563 @@ +// This file is autogenerated. Please do not edit it. + +import type { IStreamTokens } from '../StreamTokens.types'; + +export const foundations: IStreamTokens['foundations'] = { + colors: { + baseTransparent0: 'rgba(255, 255, 255, 0)', + baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)', + baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)', + baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)', + baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)', + baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)', + 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, + }, + 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', + fontSizeSize10: 10, + fontSizeSize12: 12, + fontSizeSize14: 14, + fontSizeSize16: 16, + fontSizeSize15: 15, + fontSizeSize17: 17, + fontSizeSize18: 18, + fontSizeSize20: 20, + fontSizeSize24: 24, + fontSizeSize28: 28, + fontSizeSize32: 32, + fontSizeSize40: 40, + fontSizeSize48: 48, + fontSizeSize13: 13, + fontSizeSize8: 8, + lineHeightLineHeight8: 8, + lineHeightLineHeight10: 10, + lineHeightLineHeight12: 12, + lineHeightLineHeight14: 14, + lineHeightLineHeight15: 15, + lineHeightLineHeight16: 16, + lineHeightLineHeight17: 17, + lineHeightLineHeight18: 18, + lineHeightLineHeight20: 20, + lineHeightLineHeight24: 24, + lineHeightLineHeight28: 28, + lineHeightLineHeight32: 32, + lineHeightLineHeight40: 40, + lineHeightLineHeight48: 48, + }, +}; + +export const primitives: IStreamTokens['primitives'] = { + darkElevation0: { + elevation: 0, + shadowColor: 'rgba(0,0,0,0)', + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0, + shadowRadius: 0, + }, + darkElevation1: { + elevation: 3, + shadowColor: 'rgba(0,0,0,0.1)', + shadowOffset: { + width: 0, + height: 2.6666666666666665, + }, + shadowOpacity: 0.3879999999999999, + shadowRadius: 6.4, + }, + darkElevation2: { + elevation: 7, + shadowColor: 'rgba(0,0,0,0.12)', + shadowOffset: { + width: 0, + height: 4.5016949152542365, + }, + shadowOpacity: 0.41655999999999993, + shadowRadius: 13.364067796610168, + }, + darkElevation3: { + elevation: 10, + shadowColor: 'rgba(0,0,0,0.14)', + shadowOffset: { + width: 0, + height: 8.839779005524864, + }, + shadowOpacity: 0.44443999999999995, + shadowRadius: 20.207734806629837, + }, + darkElevation4: { + elevation: 13, + shadowColor: 'rgba(0,0,0,0.16)', + shadowOffset: { + width: 0, + height: 14.201622247972189, + }, + shadowOpacity: 0.48592, + shadowRadius: 26.994206257242176, + }, + lightElevation0: { + elevation: 0, + shadowColor: 'rgba(0,0,0,0)', + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0, + shadowRadius: 0, + }, + lightElevation1: { + elevation: 3, + shadowColor: 'rgba(0,0,0,0.06)', + shadowOffset: { + width: 0, + height: 2.904109589041096, + }, + shadowOpacity: 0.19630000000000003, + shadowRadius: 6.684931506849315, + }, + lightElevation2: { + elevation: 7, + shadowColor: 'rgba(0,0,0,0.06)', + shadowOffset: { + width: 0, + height: 4.510067114093959, + }, + shadowOpacity: 0.21416000000000013, + shadowRadius: 13.358389261744968, + }, + lightElevation3: { + elevation: 10, + shadowColor: 'rgba(0,0,0,0.1)', + shadowOffset: { + width: 0, + height: 9.322128851540615, + }, + shadowOpacity: 0.26470000000000005, + shadowRadius: 20.786554621848737, + }, + lightElevation4: { + elevation: 14, + shadowColor: 'rgba(0,0,0,0.12)', + shadowOffset: { + width: 0, + height: 15.201376936316695, + }, + shadowOpacity: 0.29776, + shadowRadius: 27.86919104991394, + }, + 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.fontFamilyGeistMono, + typographyFontFamilySans: foundations.typography.fontFamilyGeist, + typographyFontSize2xl: foundations.typography.fontSizeSize24, + typographyFontSizeLg: foundations.typography.fontSizeSize18, + typographyFontSizeMd: foundations.typography.fontSizeSize16, + typographyFontSizeMicro: foundations.typography.fontSizeSize8, + typographyFontSizeSm: foundations.typography.fontSizeSize14, + typographyFontSizeXl: foundations.typography.fontSizeSize20, + typographyFontSizeXs: foundations.typography.fontSizeSize12, + typographyFontSizeXxs: foundations.typography.fontSizeSize10, + typographyFontWeightBold: 700, + typographyFontWeightMedium: 500, + typographyFontWeightRegular: 400, + typographyFontWeightSemiBold: 600, + typographyLineHeightNormal: foundations.typography.lineHeightLineHeight20, + typographyLineHeightRelaxed: foundations.typography.lineHeightLineHeight24, + typographyLineHeightTight: foundations.typography.lineHeightLineHeight16, +} as const; + +export const components: IStreamTokens['components'] = { + buttonHitTargetMinHeight: foundations.layout.size48, + buttonHitTargetMinWidth: foundations.layout.size48, + buttonPaddingXIconOnlyLg: 14, + buttonPaddingXIconOnlyMd: 10, + buttonPaddingXIconOnlySm: 6, + buttonPaddingXWithLabelLg: 16, + buttonPaddingXWithLabelMd: 16, + buttonPaddingXWithLabelSm: 16, + buttonPaddingYLg: 14, + buttonPaddingYMd: 10, + buttonPaddingYSm: 6, + 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, + composerRadiusFixed: primitives.radius3xl, + composerRadiusFloating: primitives.radius3xl, + deviceRadius: primitives.radiusMd, + deviceSafeAreaBottom: foundations.spacing.space0, + deviceSafeAreaTop: foundations.spacing.space0, + 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, +} as const; + +export const semantics: IStreamTokens['semantics'] = { + accentBlack: foundations.colors.baseBlack, + accentError: foundations.colors.red500, + accentNeutral: foundations.colors.slate500, + accentPrimary: '$brand500', + accentSuccess: foundations.colors.green300, + accentWarning: foundations.colors.yellow400, + avatarBgDefault: '$avatarPaletteBg1', + avatarBgPlaceholder: foundations.colors.slate100, + avatarPaletteBg1: foundations.colors.blue100, + avatarPaletteBg2: foundations.colors.cyan100, + avatarPaletteBg3: foundations.colors.green100, + avatarPaletteBg4: foundations.colors.purple100, + avatarPaletteBg5: foundations.colors.yellow100, + avatarPaletteText1: foundations.colors.blue800, + avatarPaletteText2: foundations.colors.cyan800, + avatarPaletteText3: foundations.colors.green800, + avatarPaletteText4: foundations.colors.purple800, + avatarPaletteText5: foundations.colors.yellow800, + avatarTextDefault: '$avatarPaletteText1', + avatarTextPlaceholder: foundations.colors.slate500, + backgroundCoreApp: '$backgroundElevationElevation0', + backgroundCoreDisabled: foundations.colors.slate100, + backgroundCoreHover: 'rgba(30, 37, 43, 0.05)', + backgroundCoreOverlay: 'rgba(255, 255, 255, 0.75)', + backgroundCorePressed: 'rgba(30, 37, 43, 0.1)', + backgroundCoreScrim: 'rgba(0, 0, 0, 0.25)', + backgroundCoreSelected: 'rgba(30, 37, 43, 0.15)', + backgroundCoreSurface: foundations.colors.slate200, + backgroundCoreSurfaceStrong: foundations.colors.slate300, + backgroundCoreSurfaceSubtle: foundations.colors.slate100, + backgroundElevationElevation0: foundations.colors.baseWhite, + backgroundElevationElevation1: foundations.colors.baseWhite, + backgroundElevationElevation2: foundations.colors.baseWhite, + backgroundElevationElevation3: foundations.colors.baseWhite, + backgroundElevationElevation4: foundations.colors.baseWhite, + badgeBgDefault: '$backgroundElevationElevation1', + badgeBgError: '$accentError', + badgeBgInverse: '$accentBlack', + badgeBgNeutral: '$accentNeutral', + badgeBgPrimary: '$accentPrimary', + badgeBorder: '$borderCoreOnDark', + badgeText: '$textOnAccent', + badgeTextInverse: '$textPrimary', + borderCoreDefault: foundations.colors.slate150, + borderCoreOnAccent: foundations.colors.baseWhite, + borderCoreOnDark: foundations.colors.baseWhite, + borderCoreOpacity10: 'rgba(0, 0, 0, 0.1)', + borderCoreOpacity25: 'rgba(0, 0, 0, 0.25)', + borderCoreStrong: foundations.colors.slate200, + borderCoreSubtle: foundations.colors.slate100, + borderUtilityDisabled: foundations.colors.slate200, + borderUtilityError: '$accentError', + borderUtilityFocus: '$brand300', + borderUtilitySelected: '$accentPrimary', + borderUtilitySuccess: '$accentSuccess', + borderUtilityWarning: '$accentWarning', + brand50: foundations.colors.blue50, + brand100: foundations.colors.blue100, + brand150: foundations.colors.blue150, + brand200: foundations.colors.blue200, + brand300: foundations.colors.blue300, + brand400: foundations.colors.blue400, + brand500: foundations.colors.blue500, + brand600: foundations.colors.blue600, + brand700: foundations.colors.blue700, + brand800: foundations.colors.blue800, + brand900: foundations.colors.blue900, + buttonDestructiveBg: '$accentError', + buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0', + buttonDestructiveBorder: '$accentError', + buttonDestructiveText: '$accentError', + buttonDestructiveTextOnAccent: '$textOnAccent', + buttonPrimaryBg: '$accentPrimary', + buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, + buttonPrimaryBorder: '$brand200', + buttonPrimaryText: '$accentPrimary', + buttonPrimaryTextOnAccent: '$textOnAccent', + buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', + buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', + buttonSecondaryBorder: '$borderCoreDefault', + buttonSecondaryText: '$textPrimary', + buttonSecondaryTextOnAccent: '$textPrimary', + chatBgAttachmentIncoming: foundations.colors.slate150, + chatBgAttachmentOutgoing: '$brand150', + chatBgIncoming: foundations.colors.slate100, + chatBgOutgoing: '$brand100', + chatBgTypingIndicator: '$accentNeutral', + chatBorderIncoming: foundations.colors.baseTransparent0, + chatBorderOnChatIncoming: foundations.colors.slate400, + chatBorderOnChatOutgoing: '$brand300', + chatBorderOutgoing: foundations.colors.baseTransparent0, + chatPollProgressFillIncoming: foundations.colors.slate300, + chatPollProgressFillOutgoing: '$brand200', + chatPollProgressTrackIncoming: foundations.colors.slate600, + chatPollProgressTrackOutgoing: '$accentPrimary', + chatReplyIndicatorIncoming: foundations.colors.slate400, + chatReplyIndicatorOutgoing: '$brand400', + chatTextLink: '$textLink', + chatTextMention: '$textLink', + chatTextMessage: '$textPrimary', + chatTextReaction: '$textSecondary', + chatTextSystem: '$textSecondary', + chatTextTimestamp: '$textTertiary', + chatTextUsername: '$textSecondary', + chatThreadConnectorIncoming: foundations.colors.slate200, + chatThreadConnectorOutgoing: '$chatBgOutgoing', + chatWaveformBar: '$borderCoreOpacity25', + chatWaveformBarPlaying: '$accentPrimary', + composerBg: '$backgroundElevationElevation1', + controlPlayControlBg: '$backgroundElevationElevation1', + controlPlayControlBgInverse: '$accentBlack', + controlPlayControlBorder: '$borderCoreDefault', + controlPlayControlIcon: '$textPrimary', + controlPlayControlIconInverse: '$textOnAccent', + controlProgressBarFill: foundations.colors.slate200, + controlProgressBarTrack: foundations.colors.slate500, + controlRadiocheckBg: foundations.colors.baseTransparent0, + controlRadiocheckBgSelected: '$accentPrimary', + controlRadiocheckBorder: '$borderCoreDefault', + controlRadiocheckIconSelected: '$textInverse', + controlRemoveControlBg: '$accentBlack', + controlRemoveControlBorder: '$borderCoreOnDark', + controlRemoveControlIcon: '$textOnAccent', + controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', + controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', + controlToggleSwitchBgSelected: '$accentPrimary', + controlToggleSwitchKnob: '$backgroundElevationElevation4', + inputBorderDefault: '$borderCoreDefault', + inputBorderFocus: '$borderUtilitySelected', + inputBorderHover: '$borderCoreStrong', + inputSendIcon: '$accentPrimary', + inputSendIconDisabled: '$textDisabled', + inputTextDefault: '$textPrimary', + inputTextDisabled: '$textDisabled', + inputTextIcon: '$textTertiary', + inputTextPlaceholder: '$textTertiary', + presenceBgOffline: '$accentNeutral', + presenceBgOnline: '$accentSuccess', + presenceBorder: '$borderCoreOnDark', + reactionBg: '$backgroundElevationElevation1', + reactionBorder: '$borderCoreDefault', + reactionEmoji: '$textPrimary', + reactionText: '$textPrimary', + systemBgBlur: 'rgba(255, 255, 255, 0.01)', + systemCaret: '$accentPrimary', + systemScrollbar: 'rgba(0, 0, 0, 0.5)', + systemText: foundations.colors.baseBlack, + textDisabled: foundations.colors.slate400, + textInverse: foundations.colors.baseWhite, + textLink: '$accentPrimary', + textOnAccent: foundations.colors.baseWhite, + textPrimary: foundations.colors.slate900, + textSecondary: foundations.colors.slate700, + textTertiary: foundations.colors.slate500, +} as const; diff --git a/package/src/theme/index.ts b/package/src/theme/index.ts new file mode 100644 index 000000000..7412b9a20 --- /dev/null +++ b/package/src/theme/index.ts @@ -0,0 +1,2 @@ +// TODO: Handle color scheme here. +export * from './generated/light/StreamTokens'; diff --git a/package/src/theme/primitives/colors.ts b/package/src/theme/primitives/colors.ts deleted file mode 100644 index f54c7a1b8..000000000 --- a/package/src/theme/primitives/colors.ts +++ /dev/null @@ -1,348 +0,0 @@ -import { palette } from './palette'; - -type Pallete = { - 50: string; - 100: string; - 200: string; - 300: string; - 400: string; - 500: string; - 600: string; - 700: string; - 800: string; - 900: string; - 950: string; -}; - -export type AvatarColorPair = { - bg: string; - text: string; -}; - -export type AvatarPalette = AvatarColorPair[]; - -type AccentColors = { - primary: string; - success: string; - warning: string; - error: string; - neutral: string; -}; - -type StateColors = { - hover: string; - pressed: string; - selected: string; - bgOverlay: string; - bgDisabled: string; - textDisabled: string; -}; - -type TextColors = { - primary: string; - secondary: string; - tertiary: string; - inverse: string; - onAccent: string; - disabled: string; - link: string; -}; - -type PresenceColors = { - border: string; - bgOnline: string; - bgOffline: string; -}; - -type BorderCore = { - surface: string; - surfaceSubtle: string; - surfaceStrong: string; - onDark: string; - onAccent: string; - subtle: string; - image: string; -}; - -export type BadgeColors = { - border: string; - bgInverse: string; - bgPrimary: string; - bgNeutral: string; - bgError: string; - text: string; - textInverse: string; -}; - -export type RemoveControlColors = { - bg: string; - border: string; - icon: string; -}; - -export type NewColors = { - brand: Pallete; - avatarPalette?: AvatarPalette; - accent: AccentColors; - state: StateColors; - text: TextColors; - presence: PresenceColors; - border: BorderCore; - badge: BadgeColors; - control: RemoveControlColors; -}; - -export function resolveTheme(input: NewColors) { - const brand = input.brand ?? palette.blue; - const avatarPalette = input.avatarPalette ?? [ - { - bg: palette.blue[100], - text: palette.blue[800], - }, - { - bg: palette.cyan[100], - text: palette.cyan[800], - }, - { - bg: palette.green[100], - text: palette.green[800], - }, - { - bg: palette.purple[100], - text: palette.purple[800], - }, - { - bg: palette.yellow[100], - text: palette.yellow[800], - }, - ]; - const accent = input.accent ?? { - primary: brand[500], - success: palette.green[500], - warning: palette.yellow[500], - error: palette.red[500], - neutral: palette.slate[500], - }; - const text = input.text ?? { - primary: brand[900], - secondary: brand[700], - tertiary: brand[500], - inverse: palette.white, - onAccent: palette.white, - disabled: brand[400], - link: accent.primary, - }; - const state = input.state ?? { - hover: palette.black5, - pressed: palette.black10, - selected: palette.black10, - bgOverlay: palette.black50, - bgDisabled: palette.slate[200], - textDisabled: palette.slate[400], - }; - const presence = input.presence ?? { - border: palette.white, - bgOnline: accent.success, - bgOffline: accent.neutral, - }; - const border = input.border ?? { - surface: palette.slate[400], - surfaceSubtle: palette.slate[200], - surfaceStrong: palette.slate[600], - onDark: palette.white, - onAccent: palette.white, - subtle: palette.slate[100], - image: palette.black10, - }; - const badge = input.badge ?? { - border: palette.white, - bgInverse: palette.white, - bgPrimary: accent.primary, - bgNeutral: accent.neutral, - bgError: accent.error, - text: palette.white, - textInverse: palette.slate[900], - }; - const control = input.control ?? { - bg: palette.slate[900], - border: border.onDark, - icon: palette.white, - }; - return { - brand, - avatarPalette, - accent, - text, - state, - presence, - border, - badge, - control, - }; -} - -export const lightColors = { - brand: palette.blue, - avatarPalette: [ - { - bg: palette.blue[100], - text: palette.blue[800], - }, - { - bg: palette.cyan[100], - text: palette.cyan[800], - }, - { - bg: palette.green[100], - text: palette.green[800], - }, - { - bg: palette.purple[100], - text: palette.purple[800], - }, - { - bg: palette.yellow[100], - text: palette.yellow[800], - }, - ], - accent: { - primary: palette.blue[500], - success: palette.green[500], - warning: palette.yellow[500], - error: palette.red[500], - neutral: palette.slate[500], - }, - state: { - hover: palette.black5, - pressed: palette.black10, - selected: palette.black10, - bgOverlay: palette.black50, - bgDisabled: palette.slate[200], - textDisabled: palette.slate[400], - }, - text: { - primary: palette.slate[900], - secondary: palette.slate[700], - tertiary: palette.slate[500], - inverse: palette.white, - onAccent: palette.white, - disabled: palette.slate[400], - link: palette.blue[500], - }, - border: { - surface: palette.slate[400], - surfaceSubtle: palette.slate[200], - surfaceStrong: palette.slate[600], - onDark: palette.white, - onAccent: palette.white, - subtle: palette.slate[100], - image: palette.black10, - }, - control: { - bg: palette.slate[900], - icon: palette.white, - border: palette.white, - }, - presence: { - border: palette.white, - bgOnline: palette.green[500], - bgOffline: palette.slate[500], - }, - badge: { - border: palette.white, - bgInverse: palette.white, - bgPrimary: palette.blue[500], - bgNeutral: palette.slate[500], - bgError: palette.red[500], - text: palette.white, - textInverse: palette.slate[900], - }, -}; - -export const darkColors = { - brand: { - 50: palette.blue[900], - 100: palette.blue[800], - 200: palette.blue[700], - 300: palette.blue[600], - 400: palette.blue[500], - 500: palette.blue[400], - 600: palette.blue[300], - 700: palette.blue[200], - 800: palette.blue[100], - 900: palette.blue[50], - 950: palette.white, - }, - avatarPalette: [ - { - bg: palette.blue[800], - text: palette.blue[100], - }, - { - bg: palette.cyan[800], - text: palette.cyan[100], - }, - { - bg: palette.green[800], - text: palette.green[100], - }, - { - bg: palette.purple[800], - text: palette.purple[100], - }, - { - bg: palette.yellow[800], - text: palette.yellow[100], - }, - ], - accent: { - primary: palette.blue[400], - success: palette.green[400], - warning: palette.yellow[400], - error: palette.red[400], - neutral: palette.neutral[500], - }, - state: { - hover: palette.black5, - pressed: palette.black10, - selected: palette.black10, - bgOverlay: palette.black50, - bgDisabled: palette.neutral[800], - textDisabled: palette.neutral[600], - }, - text: { - primary: palette.neutral[50], - secondary: palette.neutral[300], - tertiary: palette.neutral[400], - inverse: palette.black, - onAccent: palette.white, - disabled: palette.neutral[600], - link: palette.blue[500], - }, - border: { - surface: palette.neutral[500], - surfaceSubtle: palette.neutral[700], - surfaceStrong: palette.neutral[400], - onDark: palette.white, - onAccent: palette.white, - subtle: palette.neutral[800], - image: palette.white20, - }, - control: { - bg: palette.neutral[800], - icon: palette.white, - border: palette.white, - }, - presence: { - border: palette.black, - }, - badge: { - border: palette.black, - bgInverse: palette.white, - bgPrimary: palette.blue[400], - bgNeutral: palette.neutral[500], - bgError: palette.red[400], - text: palette.white, - textInverse: palette.neutral[50], - }, -}; diff --git a/package/src/theme/primitives/palette.ts b/package/src/theme/primitives/palette.ts deleted file mode 100644 index f52105f3a..000000000 --- a/package/src/theme/primitives/palette.ts +++ /dev/null @@ -1,115 +0,0 @@ -export const palette = { - transparent: 'transparent', - black: '#000000', - white: '#FFFFFF', - white10: 'hsla(0, 0%, 100%, 0.1)', - white20: 'hsla(0, 0%, 100%, 0.2)', - white70: 'hsla(0, 0%, 100%, 0.7)', - black5: 'hsla(0, 0%, 0%, 0.05)', - black10: 'hsla(0, 0%, 0%, 0.1)', - black50: 'hsla(0, 0%, 0%, 0.5)', - slate: { - 50: '#FAFBFC', - 100: '#F2F4F6', - 200: '#E2E6EA', - 300: '#D0D5DA', - 400: '#B8BEC4', - 500: '#9EA4AA', - 600: '#838990', - 700: '#6A7077', - 800: '#50565D', - 900: '#384047', - 950: '#1E252B', - }, - neutral: { - 50: '#F7F7F7', - 100: '#EDEDED', - 200: '#D9D9D9', - 300: '#C1C1C1', - 400: '#A3A3A3', - 500: '#7F7F7F', - 600: '#636363', - 700: '#4A4A4A', - 800: '#383838', - 900: '#262626', - 950: '#151515', - }, - blue: { - 50: '#EBF3FF', - 100: '#D2E3FF', - 200: '#A6C4FF', - 300: '#7AA7FF', - 400: '#4E8BFF', - 500: '#005FFF', - 600: '#0052CE', - 700: '#0042A3', - 800: '#003179', - 900: '#001F4F', - 950: '#001025', - }, - red: { - 50: '#FCEBEA', - 100: '#F8CFCD', - 200: '#F3B3B0', - 300: '#ED958F', - 400: '#E6756C', - 500: '#D92F26', - 600: '#B9261F', - 700: '#98201A', - 800: '#761915', - 900: '#54120F', - 950: '#360B09', - }, - yellow: { - 50: '#FFF9E5', - 100: '#FFF1C2', - 200: '#FFE8A0', - 300: '#FFDE7D', - 400: '#FFD65A', - 500: '#FFD233', - 600: '#E6B400', - 700: '#C59600', - 800: '#9F7700', - 900: '#7A5A00', - 950: '#4F3900', - }, - purple: { - 50: '#F5EFFE', - 100: '#EBDEFD', - 200: '#D8BFFC', - 300: '#C79FFC', - 400: '#B98AF9', - 500: '#B38AF8', - 600: '#996CE3', - 700: '#7F55C7', - 800: '#6640AB', - 900: '#4D2C8F', - 950: '#351C6B', - }, - green: { - 50: '#E8FFF5', - 100: '#C9FCE7', - 200: '#A9F8D9', - 300: '#88F2CA', - 400: '#59E9B5', - 500: '#00E2A1', - 600: '#00B681', - 700: '#008D64', - 800: '#006548', - 900: '#003D2B', - 950: '#002319', - }, - cyan: { - 50: '#F0FCFE', - 100: '#D7F7FB', - 200: '#BDF1F8', - 300: '#A3ECF4', - 400: '#89E6F1', - 500: '#69E5F6', - 600: '#3EC9D9', - 700: '#28A8B5', - 800: '#1C8791', - 900: '#125F66', - 950: '#0B3D44', - }, -}; diff --git a/package/src/theme/primitives/radius.ts b/package/src/theme/primitives/radius.ts deleted file mode 100644 index a192a008b..000000000 --- a/package/src/theme/primitives/radius.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { Platform } from 'react-native'; - -export const Radius = { - none: 0, - xxs: Platform.select({ - android: 0, - ios: 2, - web: 2, - }), - xs: Platform.select({ - android: 2, - ios: 4, - web: 4, - }), - sm: Platform.select({ - android: 4, - ios: 6, - web: 6, - }), - md: Platform.select({ - android: 6, - ios: 8, - web: 8, - }), - lg: Platform.select({ - android: 8, - ios: 12, - web: 12, - }), - xl: Platform.select({ - android: 12, - ios: 16, - web: 16, - }), - xxl: Platform.select({ - android: 16, - ios: 20, - web: 20, - }), - xxxl: Platform.select({ - android: 20, - ios: 24, - web: 24, - }), - xxxxl: Platform.select({ - android: 24, - ios: 32, - web: 32, - }), - full: 9999, -}; diff --git a/package/src/theme/primitives/spacing.tsx b/package/src/theme/primitives/spacing.tsx deleted file mode 100644 index 639222523..000000000 --- a/package/src/theme/primitives/spacing.tsx +++ /dev/null @@ -1,11 +0,0 @@ -export const Spacing = { - none: 0, - xxs: 4, - xs: 8, - sm: 12, - md: 16, - lg: 20, - xl: 24, - xxl: 32, - xxxl: 40, -}; diff --git a/package/src/theme/primitives/typography.ts b/package/src/theme/primitives/typography.ts deleted file mode 100644 index 9cb3c056d..000000000 --- a/package/src/theme/primitives/typography.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { TextStyle } from 'react-native'; - -export type FontWeightType = TextStyle['fontWeight']; - -export type TypographyType = { - fontWeight: Record; - lineHeight: Record; - fontSize: Record; -}; - -export const Typography: TypographyType = { - fontWeight: { - regular: '400', - medium: '500', - semibold: '600', - bold: '700', - }, - lineHeight: { - tight: 16, - normal: 24, - relaxed: 32, - }, - fontSize: { - micro: 8, - xxs: 10, - xs: 12, - sm: 13, - md: 15, - lg: 17, - xl: 20, - xxl: 24, - }, -}; diff --git a/package/src/theme/topologicalResolution.ts b/package/src/theme/topologicalResolution.ts new file mode 100644 index 000000000..384d7061f --- /dev/null +++ b/package/src/theme/topologicalResolution.ts @@ -0,0 +1,69 @@ +import { Theme } from '../contexts'; + +const isPlainObject = (value: unknown): value is Record => { + return typeof value === 'object' && value !== null && value.constructor === Object; +}; + +/** + * Resolves "$token" references in `dictionary` by performing a DFS. + * deps first, then node - i.e. a topological evaluation. + */ +export const resolveTokensTopologically = (dictionary: T): T => { + const resolvedMemo = new Map(); + + // Used purely for cycle detection (even though we do not expect + // cycles we want to assert early to make sure we raise an alarm). + const visiting = new Set(); + + const resolveValueDeep = (value: unknown): unknown => { + if (typeof value === 'string' && value.startsWith('$')) { + return dfs(value.slice(1), value); + } + + if (Array.isArray(value)) return value.map(resolveValueDeep); + + if (isPlainObject(value)) { + const out: Record = {}; + for (const [k, v] of Object.entries(value)) out[k] = resolveValueDeep(v); + return out; + } + + return value; + }; + + /** + * This is the topological sort part: + * - DFS into dependencies first + * - then memoize the current token + */ + const dfs = (tokenKeyOrPath: string, originalRef: string): unknown => { + const cacheKey = tokenKeyOrPath; + + if (resolvedMemo.has(cacheKey)) return resolvedMemo.get(cacheKey); + + if (visiting.has(cacheKey)) { + throw new Error(`Cycle detected while topo-evaluating "${originalRef}" (at "${cacheKey}")`); + } + + visiting.add(cacheKey); + + const raw = dictionary[tokenKeyOrPath as keyof Theme['semantics']]; + + if (raw === undefined) { + // is throwing maybe too strict here ? + throw new Error(`Unresolved reference: "${originalRef}" (missing "${tokenKeyOrPath}")`); + } + + // resolve dependencies inside `raw` BEFORE finalizing this token + // so that we can throw if there's a cycle or the dep graph is not + // connected) + const fullyResolved = resolveValueDeep(raw); + + resolvedMemo.set(cacheKey, fullyResolved); + visiting.delete(cacheKey); + + return fullyResolved; + }; + + return resolveValueDeep(dictionary) as T; +}; diff --git a/package/sync-theme.sh b/package/sync-theme.sh new file mode 100755 index 000000000..71b37b39e --- /dev/null +++ b/package/sync-theme.sh @@ -0,0 +1,30 @@ +#!/usr/bin/env bash +set -euo pipefail + +DEST="src/theme/generated" +DEFAULT_SRC="../../design-system-tokens/build/reactnative" +FALLBACK_SRC="${1:-}" + +# Pick a source, while preferring DEFAULT_SRC if it exists; otherwise use fallback arg (if provided) +if [[ -d "$DEFAULT_SRC" ]]; then + SRC="$DEFAULT_SRC" +elif [[ -n "$FALLBACK_SRC" && -d "$FALLBACK_SRC" ]]; then + SRC="$FALLBACK_SRC" +else + echo "Error: Source directory not found." + echo "Tried: $DEFAULT_SRC" + [[ -n "$FALLBACK_SRC" ]] && echo "Also tried fallback arg: $FALLBACK_SRC" + exit 1 +fi + +mkdir -p "$DEST" + +# Clear DEST contents (but keep the folder itself) +rm -rf "$DEST"/* "$DEST"/.[!.]* "$DEST"/..?* 2>/dev/null || true + +# Copy contents of SRC into DEST +cp -R "$SRC"/. "$DEST"/ + +prettier --write "$DEST" + +echo "Copied theme tokens from: $SRC -> $DEST" diff --git a/package/tsconfig.json b/package/tsconfig.json index 86ed10c83..0464e3809 100644 --- a/package/tsconfig.json +++ b/package/tsconfig.json @@ -24,7 +24,8 @@ "noEmitOnError": false, "noImplicitAny": true, "allowJs": true, - "checkJs": false + "checkJs": false, + "moduleSuffixes": [".ios", ".android", "", ".web"] }, "include": ["./src/**/*"], "exclude": [