From 3d4764364e37f00c76d438b96c86902c83616a60 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Tue, 27 Jan 2026 22:04:55 +0100 Subject: [PATCH 1/9] feat: begin using generated semantic design tokens --- examples/SampleApp/ios/Podfile.lock | 158 ++--- .../SampleApp/src/components/ScreenHeader.tsx | 5 +- package/eslint.config.mjs | 13 +- .../Attachment/AttachmentActions.tsx | 5 +- .../src/components/ChannelList/Skeleton.tsx | 5 +- .../ChannelPreviewMessenger.tsx | 5 +- .../components/MessageInput/MessageInput.tsx | 5 +- .../SendMessageDisallowedIndicator.tsx | 5 +- .../AttachmentRemoveControl.tsx | 26 +- .../AttachmentUploadPreviewList.tsx | 33 +- .../FileAttachmentUploadPreview.tsx | 35 +- .../ImageAttachmentUploadPreview.tsx | 14 +- package/src/components/ui/Avatar/Avatar.tsx | 10 +- package/src/components/ui/Avatar/constants.ts | 5 +- package/src/components/ui/BadgeCount.tsx | 20 +- .../src/components/ui/BadgeNotification.tsx | 33 +- package/src/components/ui/OnlineIndicator.tsx | 19 +- .../src/components/ui/VideoPlayIndicator.tsx | 24 +- .../contexts/themeContext/ThemeContext.tsx | 9 +- .../src/contexts/themeContext/utils/theme.ts | 34 +- .../src/theme/dark/StreamTokens.android.ts | 538 ++++++++++++++++++ package/src/theme/dark/StreamTokens.ios.ts | 538 ++++++++++++++++++ package/src/theme/dark/StreamTokens.web.ts | 538 ++++++++++++++++++ .../StreamTokens.android.ts | 538 ++++++++++++++++++ .../high-contrast-light/StreamTokens.ios.ts | 538 ++++++++++++++++++ .../high-contrast-light/StreamTokens.web.ts | 538 ++++++++++++++++++ package/src/theme/index.ts | 2 + .../src/theme/light/StreamTokens.android.ts | 538 ++++++++++++++++++ package/src/theme/light/StreamTokens.ios.ts | 538 ++++++++++++++++++ package/src/theme/light/StreamTokens.web.ts | 538 ++++++++++++++++++ package/src/theme/primitives/colors.ts | 273 --------- package/src/theme/primitives/palette.ts | 115 ---- package/src/theme/primitives/radius.ts | 51 -- package/src/theme/primitives/spacing.tsx | 11 - package/src/theme/primitives/typography.ts | 33 -- package/src/theme/topologicalResolution.ts | 110 ++++ package/sync-theme.sh | 30 + package/tsconfig.json | 3 +- 38 files changed, 5239 insertions(+), 694 deletions(-) create mode 100644 package/src/theme/dark/StreamTokens.android.ts create mode 100644 package/src/theme/dark/StreamTokens.ios.ts create mode 100644 package/src/theme/dark/StreamTokens.web.ts create mode 100644 package/src/theme/high-contrast-light/StreamTokens.android.ts create mode 100644 package/src/theme/high-contrast-light/StreamTokens.ios.ts create mode 100644 package/src/theme/high-contrast-light/StreamTokens.web.ts create mode 100644 package/src/theme/index.ts create mode 100644 package/src/theme/light/StreamTokens.android.ts create mode 100644 package/src/theme/light/StreamTokens.ios.ts create mode 100644 package/src/theme/light/StreamTokens.web.ts delete mode 100644 package/src/theme/primitives/colors.ts delete mode 100644 package/src/theme/primitives/palette.ts delete mode 100644 package/src/theme/primitives/radius.ts delete mode 100644 package/src/theme/primitives/spacing.tsx delete mode 100644 package/src/theme/primitives/typography.ts create mode 100644 package/src/theme/topologicalResolution.ts create mode 100755 package/sync-theme.sh diff --git a/examples/SampleApp/ios/Podfile.lock b/examples/SampleApp/ios/Podfile.lock index 5e9421f522..2238629946 100644 --- a/examples/SampleApp/ios/Podfile.lock +++ b/examples/SampleApp/ios/Podfile.lock @@ -3579,104 +3579,104 @@ SPEC CHECKSUMS: hermes-engine: bbc1152da7d2d40f9e59c28acc6576fcf5d28e2a libwebp: 02b23773aedb6ff1fd38cec7a77b81414c6842a8 nanopb: fad817b59e0457d11a5dfbde799381cd727c1275 - NitroModules: 01ae20fc1e8fc9a3b088ab8ed06ab92527a04f0d - NitroSound: 347b6a21f2e7d5601c92ef81cec7836f8f8be44c - op-sqlite: a7e46cfdaebeef219fd0e939332967af9fe6d406 + NitroModules: 8849240f6ee6d3b295514112437e3b09e855cb67 + NitroSound: fe46960c89410e62e05e9a709d8bf28a8202d1b3 + op-sqlite: b9a4028bef60145d7b98fbbc4341c83420cdcfd5 PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47 PromisesSwift: 9d77319bbe72ebf6d872900551f7eeba9bce2851 - RCT-Folly: 846fda9475e61ec7bcbf8a3fe81edfcaeb090669 + RCT-Folly: 59ec0ac1f2f39672a0c6e6cecdd39383b764646f RCTDeprecation: 300c5eb91114d4339b0bb39505d0f4824d7299b7 RCTRequired: e0446b01093475b7082fbeee5d1ef4ad1fe20ac4 RCTTypeSafety: cb974efcdc6695deedf7bf1eb942f2a0603a063f React: e7a4655b09d0e17e54be188cc34c2f3e2087318a React-callinvoker: 62192daaa2f30c3321fc531e4f776f7b09cf892b React-Codegen: 4b8b4817cea7a54b83851d4c1f91f79aa73de30a - React-Core: b23cdaaa9d76389d958c06af3c57aa6ad611c542 - React-CoreModules: 8e0f562e5695991e455abbebe1e968af71d52553 - React-cxxreact: 6ccbe0cc2c652b29409b14b23cfb3cd74e084691 + React-Core: c400b068fdb6172177f3b3fae00c10d1077244d7 + React-CoreModules: 8e911a5a504b45824374eec240a78de7a6db8ca2 + React-cxxreact: 06a91f55ac5f842219d6ca47e0f77187a5b5f4ac React-debug: ab52e07f7148480ea61c5e9b68408d749c6e2b8f - React-defaultsnativemodule: 291d2b0a93c399056121f4f0acc7f46d155a38ec - React-domnativemodule: c4968302e857bd422df8eec50a3cd4d078bd4ac0 - React-Fabric: 7e3ba48433b87a416052c4077d5965aff64cb8c9 - React-FabricComponents: 21de255cf52232644d12d3288cced1f0c519b25d - React-FabricImage: 15a0961a0ab34178f1c803aa0a7d28f21322ffc3 - React-featureflags: 4e5dad365d57e3c3656447dfdad790f75878d9f4 - React-featureflagsnativemodule: 5eac59389131c2b87d165dac4094b5e86067fabb - React-graphics: 2f9b3db89f156afd793da99f23782f400f58c1ee - React-hermes: cc8c77acee1406c258622cd8abbee9049f6b5761 - React-idlecallbacksnativemodule: 1d7e1f73b624926d16db956e87c4885ef485664a - React-ImageManager: 8b6066f6638fba7d4a94fbd0b39b477ea8aced58 - React-jserrorhandler: e5a4626d65b0eda9a11c43a9f14d0423d8a7080d - React-jsi: ea5c640ea63c127080f158dac7f4f393d13d415c - React-jsiexecutor: cf7920f82e46fe9a484c15c9f31e67d7179aa826 - React-jsinspector: 094e3cb99952a0024fa977fa04706e68747cba18 - React-jsinspectorcdp: dca545979146e3ecbdc999c0789dab55beecc140 - React-jsinspectornetwork: 0a105fe74b0b1a93f70409d955c8a0556dc17c59 - React-jsinspectortracing: 76088dd78a2de3ea637a860cdf39a6d9c2637d6b - React-jsitooling: a2e1e87382aae2294bc94a6e9682b9bc83da1d36 - React-jsitracing: 45827be59e673f4c54175c150891301138846906 - React-logger: 7cfc7b1ae1f8e5fe5097f9c746137cc3a8fad4ce - React-Mapbuffer: 8f620d1794c6b59a8c3862c3ae820a2e9e6c9bb0 - React-microtasksnativemodule: dcf5321c9a41659a6718df8a5f202af1577c6825 - react-native-blob-util: a511afccff6511544ebf56928e6afdf837b037a7 - react-native-cameraroll: 8c3ba9b6f511cf645778de19d5039b61d922fdfb - react-native-document-picker: b37cf6660ad9087b782faa78a1e67687fac15bfd - react-native-geolocation: b7f68b8c04e36ee669c630dbc48dd42cf93a0a41 - react-native-image-picker: 9bceb747cd6cde22a3416ffdc819d11b5b11f156 - react-native-maps: 9febd31278b35cd21e4fad2cf6fa708993be5dab - react-native-netinfo: cec9c4e86083cb5b6aba0e0711f563e2fbbff187 - react-native-safe-area-context: 32293dc61d1b92ccf892499ab6f8acfd609f9aef - react-native-video: 4da16bfca01a02aa2095e40683d74f2d6563207c - React-NativeModulesApple: 342e280bb9fc2aa5f61f6c257b309a86b995e12d + React-defaultsnativemodule: fab7bf1b5ce1f3ed252aa4e949ec48a8df67d624 + React-domnativemodule: 735fa5238cceebceeecc18f9f4321016461178cf + React-Fabric: c75719fc8818049c3cf9071f0619af988b020c9f + React-FabricComponents: 74a381cc0dfaf2ec3ee29f39ef8533a7fd864b83 + React-FabricImage: 9a3ff143b1ac42e077c0b33ec790f3674ace5783 + React-featureflags: e1eca0727563a61c919131d57bbd0019c3bdb0f0 + React-featureflagsnativemodule: 692211fd48283b2ddee3817767021010e2f1788e + React-graphics: 759b02bde621f12426c1dc1ae2498aaa6b441cd7 + React-hermes: b6e33fcd21aa7523dc76e62acd7a547e68c28a5b + React-idlecallbacksnativemodule: 731552efc0815fc9d65a6931da55e722b1b3a397 + React-ImageManager: 2c510a480f2c358f56a82df823c66d5700949c96 + React-jserrorhandler: 411e18cbdcbdf546f8f8707091faeb00703527c1 + React-jsi: 3fde19aaf675c0607a0824c4d6002a4943820fd9 + React-jsiexecutor: 4f898228240cf261a02568e985dfa7e1d7ad1dfb + React-jsinspector: 2f0751e6a4fb840f4ed325384d0795a9e9afaf39 + React-jsinspectorcdp: 71c48944d97f5f20e8e144e419ddf04ffa931e93 + React-jsinspectornetwork: 102f347669b278644cc9bb4ebf2f90422bd5ccef + React-jsinspectortracing: 0f6f2ec7f3faa9dc73d591b24b460141612515eb + React-jsitooling: b557f8e12efdaf16997e43b0d07dbd8a3fce3a5b + React-jsitracing: f9a77561d99c0cd053a8230bab4829b100903949 + React-logger: ea80169d826e0cd112fa4d68f58b2b3b968f1ecb + React-Mapbuffer: 230c34b1cabd1c4815726c711b9df221c3d3fbfb + React-microtasksnativemodule: 29d62f132e4aba34ebb7f2b936dde754eb08971b + react-native-blob-util: cbd6b292d0f558f09dce85e6afe68074cd031f3e + react-native-cameraroll: 00057cc0ec595fdbdf282ecfb931d484b240565f + react-native-document-picker: c5fa18e9fc47b34cfbab3b0a4447d0df918a5621 + react-native-geolocation: eb39c815c9b58ddc3efb552cafdd4b035e4cf682 + react-native-image-picker: e479ec8884df9d99a62c1f53f2307055ad43ea85 + react-native-maps: ee1e65647460c3d41e778071be5eda10e3da6225 + react-native-netinfo: f0a9899081c185db1de5bb2fdc1c88c202a059ac + react-native-safe-area-context: 7fd4c2c8023da8e18eaa3424cb49d52f626debee + react-native-video: 71973843c2c9ac154c54f95a5a408fd8b041790e + React-NativeModulesApple: d061f458c3febdf0ac99b1b0faf23b7305974b25 React-oscompat: 56d6de59f9ae95cd006a1c40be2cde83bc06a4e1 - React-perflogger: 4008bd05a8b6c157b06608c0ea0b8bd5d9c5e6c9 - React-performancetimeline: 3ac316a346fe3d48801a746b754dd8f5b5146838 + React-perflogger: 0633844e495d8b34798c9bf0cb32ce315f1d5c9f + React-performancetimeline: 53bdf62ff49a9b0c4bd4d66329fdcf28d77c1c9d React-RCTActionSheet: 49138012280ec3bbb35193d8d09adb8bc61c982e - React-RCTAnimation: ebfe7c62016d4c17b56b2cab3a221908ae46288d - React-RCTAppDelegate: 0108657ba9a19f6a1cd62dcd19c2c0485b3fc251 - React-RCTBlob: 6cc309d1623f3c2679125a04a7425685b7219e6b - React-RCTFabric: 04d1cf11ee3747a699260492e319e92649d7ac88 - React-RCTFBReactNativeSpec: ff3e37e2456afc04211334e86d07bf20488df0ae - React-RCTImage: bb98a59aeed953a48be3f917b9b745b213b340ab - React-RCTLinking: d6e9795d4d75d154c1dd821fd0746cc3e05d6670 - React-RCTNetwork: 5c8a7a2dd26728323189362f149e788548ac72bc - React-RCTRuntime: 52b28e281aba881e1f94ee8b16611823b730d1c5 - React-RCTSettings: b6a02d545ce10dd936b39914b32674db6e865307 - React-RCTText: c7d9232da0e9b5082a99a617483d9164a9cd46e9 - React-RCTVibration: fe636c985c1bf25e4a5b5b4d9315a3b882468a72 + React-RCTAnimation: c7ed4a9d5a4e43c9b10f68bb43cd238c4a2e7e89 + React-RCTAppDelegate: ea2ab6f4aef1489f72025b7128d8ab645b40eafb + React-RCTBlob: c052799460b245e1fffe3d1dddea36fa88e998a0 + React-RCTFabric: fad6230640c42fb8cda29b1d0759f7a1fb8cc677 + React-RCTFBReactNativeSpec: ffb22c3ee3d359ae9245ca94af203845da9371ec + React-RCTImage: 59fc2571f4f109a77139924f5babee8f9cd639c9 + React-RCTLinking: a045cb58c08188dce6c6f4621de105114b1b16ce + React-RCTNetwork: fc7115a2f5e15ae0aa05e9a9be726817feefb482 + React-RCTRuntime: c69b86dc60dcc7297318097fc60bd8e40b050f74 + React-RCTSettings: 30d7dd7eae66290467a1e72bf42d927fa78c3884 + React-RCTText: 755d59284e66c7d33bb4f0ccc428fe69110c3e74 + React-RCTVibration: ffe019e588815df226f6f8ccdc65979f8b2bc440 React-rendererconsistency: aba18fa58a4d037004f6bed6bb201eb368016c56 - React-renderercss: b490bd53486a6bae1e9809619735d1f2b2cabd7f - React-rendererdebug: 8db25b276b64d5a1dbf05677de0c4ff1039d5184 + React-renderercss: c7c140782f5f21103b638abfde7b3f11d6a5fd7e + React-rendererdebug: 111519052db9610f1b93baf7350c800621df3d0c React-rncore: 22f344c7f9109b68c3872194b0b5081ca1aee655 - React-RuntimeApple: 19bdabedda0eeb70acb71e68bfc42d61bbcbacd9 - React-RuntimeCore: 11bf03bdbd6e72857481c46d0f4eb9c19b14c754 + React-RuntimeApple: 30d20d804a216eb297ccc9ce1dc9e931738c03b1 + React-RuntimeCore: 6e1facd50e0b7aed1bc36b090015f33133958bb6 React-runtimeexecutor: b35de9cb7f5d19c66ea9b067235f95b947697ba5 - React-RuntimeHermes: d8f736d0a2d38233c7ec7bd36040eb9b0a3ccd8c - React-runtimescheduler: 0c95966d030c8ebbebddaab49630cda2889ca073 + React-RuntimeHermes: 222268a5931a23f095565c4d60e2673c04e2178a + React-runtimescheduler: aea93219348ba3069fe6c7685a84fe17d3a4b4ee React-timing: 42e8212c479d1e956d3024be0a07f205a2e34d9d - React-utils: a185f723baa0c525c361e6c281a846d919623dbe - ReactAppDependencyProvider: 8df342c127fd0c1e30e8b9f71ff814c22414a7c0 - ReactCodegen: 4928682e20747464165effacc170019a18da953c - ReactCommon: ec1cdf708729338070f8c4ad746768a782fd9eb1 - RNCAsyncStorage: f30b3a83064e28b0fc46f1fbd3834589ed64c7b9 - RNFastImage: 462a183c4b0b6b26fdfd639e1ed6ba37536c3b87 - RNFBApp: db9c2e6d36fe579ab19b82c0a4a417ff7569db7e - RNFBMessaging: de62448d205095171915d622ed5fb45c2be5e075 - RNGestureHandler: 0c0d36c0f3c17fc755543fad1c182e1cd541f898 - RNNotifee: 5e3b271e8ea7456a36eec994085543c9adca9168 - RNReactNativeHapticFeedback: d39b9a5b334ce26f49ca6abe9eea8b3938532aee - RNReanimated: e3dd9527a9614e1c9e127018cca9486f2c13b2a9 - RNScreens: 6a2d1ff4d263d29d3d3db9f3c19aad2f99fdd162 - RNShare: 9d801eafd9ae835f51bcae6b5c8de9bf3389075b - RNSVG: bc7ccfe884848ac924d2279d9025d41b5f05cb0c - RNWorklets: 4bd2a43ae826633e5e0a92953fce2eb8265759d4 + React-utils: 0ebf25dd4eb1b5497933f4d8923b862d0fe9566f + ReactAppDependencyProvider: 6c9197c1f6643633012ab646d2bfedd1b0d25989 + ReactCodegen: f8ae44cfcb65af88f409f4b094b879591232f12c + ReactCommon: a237545f08f598b8b37dc3a9163c1c4b85817b0b + RNCAsyncStorage: afe7c3711dc256e492aa3a50dcac43eecebd0ae5 + RNFastImage: 5c9c9fed9c076e521b3f509fe79e790418a544e8 + RNFBApp: df5caad9f64b6bc87f8a0b110e6bc411fb00a12b + RNFBMessaging: 6586f18ab3411aeb3349088c19fe54283d39e529 + RNGestureHandler: 6f2448500f339bc93dc589a5fd4da00e6d0033b2 + RNNotifee: 4a6ee5c7deaf00e005050052d73ee6315dff7ec9 + RNReactNativeHapticFeedback: 8bd4a2ba7c3daeb5d2acfceb8b61743f203076d0 + RNReanimated: 0d996442e746ee9d947f13914fcc17b43b17c445 + RNScreens: 5ca475eb30f4362c5808f3ff4a1c7b786bcd878e + RNShare: 083f05646b9534305999cf20452bd87ca0e8b0b0 + RNSVG: fd433fe5da0f7fee8c78f5865f29ab37321dbd7f + RNWorklets: a382db09224b0f6fda1c72c4c9bf1abfac9b3db8 SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748 - stream-chat-react-native: f42e234640869e0eafcdd354441414ad1818b9fe - Teleport: c089481dd2bb020e3dced39b7f8849b93d1499f6 + stream-chat-react-native: 7a042480d22a8a87aaee6186bf2f1013af017d3a + Teleport: 9ae328b3384204b23236e47bd0d8e994ce6bdb48 Yoga: ce248fb32065c9b00451491b06607f1c25b2f1ed PODFILE CHECKSUM: 4f662370295f8f9cee909f1a4c59a614999a209d -COCOAPODS: 1.16.2 +COCOAPODS: 1.14.3 diff --git a/examples/SampleApp/src/components/ScreenHeader.tsx b/examples/SampleApp/src/components/ScreenHeader.tsx index fda612e389..b8cf024d68 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 0508bad26a..a154ab2d98 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 3418a38e35..158bdd441c 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 ec086a14b5..f709931e68 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 f4c6f452ee..c1f433485a 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/MessageInput/MessageInput.tsx b/package/src/components/MessageInput/MessageInput.tsx index 1f8d91e66c..b091d2b87a 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 d8dcf3c047..1c373b0fb5 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 79fdbf3ca9..3ede593285 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 60b2fa8ecc..9e0273548e 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 06e6156161..91c2c6a0b4 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 f28c6a4896..552bfe9255 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/ui/Avatar/Avatar.tsx b/package/src/components/ui/Avatar/Avatar.tsx index 21bfc2c76c..dc4d42bcb7 100644 --- a/package/src/components/ui/Avatar/Avatar.tsx +++ b/package/src/components/ui/Avatar/Avatar.tsx @@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useState } from 'react'; import { Image, StyleSheet, View } from 'react-native'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; +import { foundations } from '../../../theme'; export type AvatarProps = { size: 'xs' | 'sm' | 'md' | 'lg'; @@ -63,23 +64,24 @@ export const Avatar = (props: AvatarProps) => { 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: foundations.radius.radiusFull, justifyContent: 'center', overflow: 'hidden', }, image: {}, }), - [colors, radius], + [borderCoreOpacity10], ); }; diff --git a/package/src/components/ui/Avatar/constants.ts b/package/src/components/ui/Avatar/constants.ts index d89a7cc4ca..566a738c8c 100644 --- a/package/src/components/ui/Avatar/constants.ts +++ b/package/src/components/ui/Avatar/constants.ts @@ -1,6 +1,7 @@ +import { TextStyle } from 'react-native'; + import { UserAvatarProps } from './UserAvatar'; -import { FontWeightType } from '../../../theme/primitives/typography'; import { OnlineIndicatorProps } from '../OnlineIndicator'; const indicatorSizes: Record = { @@ -19,7 +20,7 @@ const iconSizes: Record = { 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 87fb661361..f96653ab4f 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 36b81811f9..1500f6b610 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 { foundations, 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: foundations.radius.radiusFull, }, }), - [radius, badge, typography, spacing], + [badgeText, badgeBorder], ); }; diff --git a/package/src/components/ui/OnlineIndicator.tsx b/package/src/components/ui/OnlineIndicator.tsx index 2dda8b0c3f..157d4c4c87 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 { foundations } 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: foundations.radius.radiusFull, }, 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 3bffc0dbaf..6edc50cd17 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 { foundations } 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: foundations.radius.radiusFull, justifyContent: 'center', }, }); - }, [radius]); + }, [controlPlayControlBgInverse]); }; diff --git a/package/src/contexts/themeContext/ThemeContext.tsx b/package/src/contexts/themeContext/ThemeContext.tsx index 7df5f43283..0b1110b3cb 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 { resolveTokenRefsWithTopoEvaluation } from '../../theme/topologicalResolution'; import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue'; import { isTestEnvironment } from '../utils/isTestEnvironment'; @@ -37,7 +38,13 @@ export const mergeThemes = (params: MergedThemesParams) => { merge(finalTheme, style); } - return finalTheme; + const { resolved: semantics } = resolveTokenRefsWithTopoEvaluation(finalTheme.semantics, { + collectTopoOrder: true, + }); + + console.log('TESTTESTTEST: ', { ...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 59e875c112..60b6173bd3 100644 --- a/package/src/contexts/themeContext/utils/theme.ts +++ b/package/src/contexts/themeContext/utils/theme.ts @@ -1,11 +1,14 @@ import { type ColorValue, type ImageStyle, type TextStyle, type ViewStyle } from 'react-native'; import type { CircleProps, StopProps } from 'react-native-svg'; +import { + primitives, + foundations, + components, + semantics, +} from '../../../../src/theme/light/StreamTokens'; + import type { IconProps } from '../../../icons/utils/base'; -import { 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'; export const DEFAULT_STATUS_ICON_SIZE = 16; export const BASE_AVATAR_SIZE = 32; @@ -169,6 +172,7 @@ export type Theme = { height: number; maskFillColor?: ColorValue; }; + colors: typeof Colors; channelPreview: { avatar: { size: number; @@ -191,7 +195,6 @@ export type Theme = { unreadContainer: ViewStyle; unreadText: TextStyle; }; - colors: typeof Colors & NewColors & { [key: string]: string | { [key: string]: string } }; dateHeader: { container: ViewStyle; text: TextStyle; @@ -889,15 +892,23 @@ export type Theme = { thumb: ViewStyle; waveform: ViewStyle; }; - spacing: typeof Spacing; - radius: typeof Radius; - typography: typeof Typography; + // spacing: typeof Spacing; + // radius: typeof Radius; + // typography: typeof Typography; + primitives: typeof primitives; + foundations: typeof foundations; + components: typeof components; + semantics: typeof semantics; }; export const defaultTheme: Theme = { - spacing: Spacing, - radius: Radius, - typography: Typography, + primitives, + foundations, + components, + semantics, + // spacing: Spacing, + // radius: Radius, + // typography: Typography, aiTypingIndicatorView: { container: {}, text: {}, @@ -1014,7 +1025,6 @@ export const defaultTheme: Theme = { }, colors: { ...Colors, - ...lightColors, }, dateHeader: { container: {}, diff --git a/package/src/theme/dark/StreamTokens.android.ts b/package/src/theme/dark/StreamTokens.android.ts new file mode 100644 index 0000000000..4b11f556b8 --- /dev/null +++ b/package/src/theme/dark/StreamTokens.android.ts @@ -0,0 +1,538 @@ +// StreamTokens.android.ts +// (generated) platform=android theme=dark + +export const foundations = { + colors: { + baseBlack: '#000000', + baseWhite: '#ffffff', + 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)', + slate50: '#fafbfc', + slate100: '#f2f4f6', + slate200: '#e2e6ea', + slate300: '#d0d5da', + slate400: '#b8bec4', + slate500: '#9ea4aa', + slate600: '#838990', + slate700: '#6a7077', + slate800: '#50565d', + slate900: '#384047', + slate950: '#1e252b', + neutral50: '#f7f7f7', + neutral100: '#ededed', + neutral200: '#d9d9d9', + neutral300: '#c1c1c1', + neutral400: '#a3a3a3', + neutral500: '#7f7f7f', + neutral600: '#636363', + neutral700: '#4a4a4a', + neutral800: '#383838', + neutral900: '#262626', + neutral950: '#151515', + blue50: '#ebf3ff', + blue100: '#d2e3ff', + blue200: '#a6c4ff', + blue300: '#7aa7ff', + blue400: '#4e8bff', + blue500: '#005fff', + blue600: '#0052ce', + blue700: '#0042a3', + blue800: '#003179', + blue900: '#001f4f', + blue950: '#001025', + cyan50: '#f0fcfe', + cyan100: '#d7f7fb', + cyan200: '#bdf1f8', + cyan300: '#a3ecf4', + cyan400: '#89e6f1', + cyan500: '#69e5f6', + cyan600: '#3ec9d9', + cyan700: '#28a8b5', + cyan800: '#1c8791', + cyan900: '#125f66', + cyan950: '#0b3d44', + green50: '#e8fff5', + green100: '#c9fce7', + green200: '#a9f8d9', + green300: '#88f2ca', + green400: '#59e9b5', + green500: '#00e2a1', + green600: '#00b681', + green700: '#008d64', + green800: '#006548', + green900: '#003d2b', + green950: '#002319', + purple50: '#f5effe', + purple100: '#ebdefd', + purple200: '#d8bffc', + purple300: '#c79ffc', + purple400: '#b98af9', + purple500: '#b38af8', + purple600: '#996ce3', + purple700: '#7f55c7', + purple800: '#6640ab', + purple900: '#4d2c8f', + purple950: '#351c6b', + yellow50: '#fff9e5', + yellow100: '#fff1c2', + yellow200: '#ffe8a0', + yellow300: '#ffde7d', + yellow400: '#ffd65a', + yellow500: '#ffd233', + yellow600: '#e6b400', + yellow700: '#c59600', + yellow800: '#9f7700', + yellow900: '#7a5a00', + yellow950: '#4f3900', + red50: '#fcebea', + red100: '#f8cfcd', + red200: '#f3b3b0', + red300: '#ed958f', + red400: '#e6756c', + red500: '#d92f26', + red600: '#b9261f', + red700: '#98201a', + red800: '#761915', + red900: '#54120f', + red950: '#360b09', + }, + 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 = { + 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 = { + 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 = { + avatarBgDefault: '$avatarPaletteBg1', + 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', + 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: '$colorAccentError', + badgeBgInverse: '$colorAccentBlack', + badgeBgNeutral: '$colorAccentNeutral', + badgeBgPrimary: '$colorAccentPrimary', + 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: '$colorAccentError', + borderUtilityFocus: '$colorBrand700', + borderUtilitySelected: '$colorAccentPrimary', + borderUtilitySuccess: '$colorAccentSuccess', + borderUtilityWarning: '$colorAccentWarning', + buttonDestructiveBg: '$colorAccentError', + buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0', + buttonDestructiveBorder: '$colorAccentError', + buttonDestructiveText: '$colorAccentError', + buttonDestructiveTextOnAccent: '$textOnAccent', + buttonPrimaryBg: '$colorAccentPrimary', + buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, + buttonPrimaryBorder: '$colorBrand200', + buttonPrimaryText: '$colorAccentPrimary', + buttonPrimaryTextOnAccent: '$textOnAccent', + buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', + buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', + buttonSecondaryBorder: '$borderCoreDefault', + buttonSecondaryText: '$textPrimary', + buttonSecondaryTextOnAccent: '$textPrimary', + chatBgAttachmentIncoming: foundations.colors.neutral700, + chatBgAttachmentOutgoing: '$colorBrand300', + chatBgIncoming: foundations.colors.neutral800, + chatBgOutgoing: '$colorBrand200', + chatBgTypingIndicator: '$colorAccentNeutral', + chatBorderIncoming: foundations.colors.baseTransparent0, + chatBorderOnChatIncoming: foundations.colors.slate600, + chatBorderOnChatOutgoing: '$colorBrand600', + chatBorderOutgoing: foundations.colors.baseTransparent0, + chatPollProgressFillIncoming: foundations.colors.neutral600, + chatPollProgressFillOutgoing: '$colorBrand400', + chatPollProgressTrackIncoming: foundations.colors.baseWhite, + chatPollProgressTrackOutgoing: foundations.colors.baseWhite, + chatReplyIndicatorIncoming: foundations.colors.neutral500, + chatReplyIndicatorOutgoing: '$colorBrand700', + chatTextLink: '$textLink', + chatTextMention: '$textLink', + chatTextMessage: '$textPrimary', + chatTextReaction: '$textSecondary', + chatTextSystem: '$textSecondary', + chatTextTimestamp: '$textTertiary', + chatTextUsername: '$textSecondary', + chatThreadConnectorIncoming: '$chatBgIncoming', + chatThreadConnectorOutgoing: '$chatBgOutgoing', + chatWaveformBar: '$borderCoreOpacity25', + chatWaveformBarPlaying: '$colorAccentPrimary', + colorAccentBlack: foundations.colors.baseBlack, + colorAccentError: foundations.colors.red400, + colorAccentNeutral: foundations.colors.neutral600, + colorAccentPrimary: '$colorBrand600', + colorAccentSuccess: foundations.colors.green400, + colorAccentWarning: foundations.colors.yellow400, + colorBrand50: foundations.colors.blue950, + colorBrand100: foundations.colors.blue900, + colorBrand200: foundations.colors.blue800, + colorBrand300: foundations.colors.blue700, + colorBrand400: foundations.colors.blue600, + colorBrand500: foundations.colors.blue500, + colorBrand600: foundations.colors.blue400, + colorBrand700: foundations.colors.blue300, + colorBrand800: foundations.colors.blue200, + colorBrand900: foundations.colors.blue100, + colorBrand950: foundations.colors.blue50, + composerBg: '$backgroundElevationElevation1', + controlPlayControlBg: '$backgroundElevationElevation1', + controlPlayControlBgInverse: '$colorAccentBlack', + 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: '$colorAccentBlack', + controlRemoveControlBorder: '$borderCoreOnDark', + controlRemoveControlIcon: '$textOnAccent', + controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', + controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', + controlToggleSwitchBgSelected: '$colorAccentPrimary', + controlToggleSwitchKnob: '$backgroundElevationElevation4', + inputBorderDefault: '$borderCoreDefault', + inputBorderFocus: '$borderUtilityFocus', + inputBorderHover: '$borderCoreStrong', + inputSendIcon: '$colorAccentPrimary', + inputSendIconDisabled: '$textDisabled', + inputTextDefault: '$textPrimary', + inputTextDisabled: '$textDisabled', + inputTextIcon: '$textTertiary', + inputTextPlaceholder: '$textTertiary', + presenceBgOffline: '$colorAccentNeutral', + presenceBgOnline: '$colorAccentSuccess', + 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/dark/StreamTokens.ios.ts b/package/src/theme/dark/StreamTokens.ios.ts new file mode 100644 index 0000000000..5cac3346a1 --- /dev/null +++ b/package/src/theme/dark/StreamTokens.ios.ts @@ -0,0 +1,538 @@ +// StreamTokens.ios.ts +// (generated) platform=ios theme=dark + +export const foundations = { + colors: { + baseBlack: '#000000', + baseWhite: '#ffffff', + 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)', + slate50: '#fafbfc', + slate100: '#f2f4f6', + slate200: '#e2e6ea', + slate300: '#d0d5da', + slate400: '#b8bec4', + slate500: '#9ea4aa', + slate600: '#838990', + slate700: '#6a7077', + slate800: '#50565d', + slate900: '#384047', + slate950: '#1e252b', + neutral50: '#f7f7f7', + neutral100: '#ededed', + neutral200: '#d9d9d9', + neutral300: '#c1c1c1', + neutral400: '#a3a3a3', + neutral500: '#7f7f7f', + neutral600: '#636363', + neutral700: '#4a4a4a', + neutral800: '#383838', + neutral900: '#262626', + neutral950: '#151515', + blue50: '#ebf3ff', + blue100: '#d2e3ff', + blue200: '#a6c4ff', + blue300: '#7aa7ff', + blue400: '#4e8bff', + blue500: '#005fff', + blue600: '#0052ce', + blue700: '#0042a3', + blue800: '#003179', + blue900: '#001f4f', + blue950: '#001025', + cyan50: '#f0fcfe', + cyan100: '#d7f7fb', + cyan200: '#bdf1f8', + cyan300: '#a3ecf4', + cyan400: '#89e6f1', + cyan500: '#69e5f6', + cyan600: '#3ec9d9', + cyan700: '#28a8b5', + cyan800: '#1c8791', + cyan900: '#125f66', + cyan950: '#0b3d44', + green50: '#e8fff5', + green100: '#c9fce7', + green200: '#a9f8d9', + green300: '#88f2ca', + green400: '#59e9b5', + green500: '#00e2a1', + green600: '#00b681', + green700: '#008d64', + green800: '#006548', + green900: '#003d2b', + green950: '#002319', + purple50: '#f5effe', + purple100: '#ebdefd', + purple200: '#d8bffc', + purple300: '#c79ffc', + purple400: '#b98af9', + purple500: '#b38af8', + purple600: '#996ce3', + purple700: '#7f55c7', + purple800: '#6640ab', + purple900: '#4d2c8f', + purple950: '#351c6b', + yellow50: '#fff9e5', + yellow100: '#fff1c2', + yellow200: '#ffe8a0', + yellow300: '#ffde7d', + yellow400: '#ffd65a', + yellow500: '#ffd233', + yellow600: '#e6b400', + yellow700: '#c59600', + yellow800: '#9f7700', + yellow900: '#7a5a00', + yellow950: '#4f3900', + red50: '#fcebea', + red100: '#f8cfcd', + red200: '#f3b3b0', + red300: '#ed958f', + red400: '#e6756c', + red500: '#d92f26', + red600: '#b9261f', + red700: '#98201a', + red800: '#761915', + red900: '#54120f', + red950: '#360b09', + }, + 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 = { + 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 = { + 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 = { + avatarBgDefault: '$avatarPaletteBg1', + 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', + 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: '$colorAccentError', + badgeBgInverse: '$colorAccentBlack', + badgeBgNeutral: '$colorAccentNeutral', + badgeBgPrimary: '$colorAccentPrimary', + 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: '$colorAccentError', + borderUtilityFocus: '$colorBrand700', + borderUtilitySelected: '$colorAccentPrimary', + borderUtilitySuccess: '$colorAccentSuccess', + borderUtilityWarning: '$colorAccentWarning', + buttonDestructiveBg: '$colorAccentError', + buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0', + buttonDestructiveBorder: '$colorAccentError', + buttonDestructiveText: '$colorAccentError', + buttonDestructiveTextOnAccent: '$textOnAccent', + buttonPrimaryBg: '$colorAccentPrimary', + buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, + buttonPrimaryBorder: '$colorBrand200', + buttonPrimaryText: '$colorAccentPrimary', + buttonPrimaryTextOnAccent: '$textOnAccent', + buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', + buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', + buttonSecondaryBorder: '$borderCoreDefault', + buttonSecondaryText: '$textPrimary', + buttonSecondaryTextOnAccent: '$textPrimary', + chatBgAttachmentIncoming: foundations.colors.neutral700, + chatBgAttachmentOutgoing: '$colorBrand300', + chatBgIncoming: foundations.colors.neutral800, + chatBgOutgoing: '$colorBrand200', + chatBgTypingIndicator: '$colorAccentNeutral', + chatBorderIncoming: foundations.colors.baseTransparent0, + chatBorderOnChatIncoming: foundations.colors.slate600, + chatBorderOnChatOutgoing: '$colorBrand600', + chatBorderOutgoing: foundations.colors.baseTransparent0, + chatPollProgressFillIncoming: foundations.colors.neutral600, + chatPollProgressFillOutgoing: '$colorBrand400', + chatPollProgressTrackIncoming: foundations.colors.baseWhite, + chatPollProgressTrackOutgoing: foundations.colors.baseWhite, + chatReplyIndicatorIncoming: foundations.colors.neutral500, + chatReplyIndicatorOutgoing: '$colorBrand700', + chatTextLink: '$textLink', + chatTextMention: '$textLink', + chatTextMessage: '$textPrimary', + chatTextReaction: '$textSecondary', + chatTextSystem: '$textSecondary', + chatTextTimestamp: '$textTertiary', + chatTextUsername: '$textSecondary', + chatThreadConnectorIncoming: '$chatBgIncoming', + chatThreadConnectorOutgoing: '$chatBgOutgoing', + chatWaveformBar: '$borderCoreOpacity25', + chatWaveformBarPlaying: '$colorAccentPrimary', + colorAccentBlack: foundations.colors.baseBlack, + colorAccentError: foundations.colors.red400, + colorAccentNeutral: foundations.colors.neutral600, + colorAccentPrimary: '$colorBrand600', + colorAccentSuccess: foundations.colors.green400, + colorAccentWarning: foundations.colors.yellow400, + colorBrand50: foundations.colors.blue950, + colorBrand100: foundations.colors.blue900, + colorBrand200: foundations.colors.blue800, + colorBrand300: foundations.colors.blue700, + colorBrand400: foundations.colors.blue600, + colorBrand500: foundations.colors.blue500, + colorBrand600: foundations.colors.blue400, + colorBrand700: foundations.colors.blue300, + colorBrand800: foundations.colors.blue200, + colorBrand900: foundations.colors.blue100, + colorBrand950: foundations.colors.blue50, + composerBg: '$backgroundElevationElevation1', + controlPlayControlBg: '$backgroundElevationElevation1', + controlPlayControlBgInverse: '$colorAccentBlack', + 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: '$colorAccentBlack', + controlRemoveControlBorder: '$borderCoreOnDark', + controlRemoveControlIcon: '$textOnAccent', + controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', + controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', + controlToggleSwitchBgSelected: '$colorAccentPrimary', + controlToggleSwitchKnob: '$backgroundElevationElevation4', + inputBorderDefault: '$borderCoreDefault', + inputBorderFocus: '$borderUtilityFocus', + inputBorderHover: '$borderCoreStrong', + inputSendIcon: '$colorAccentPrimary', + inputSendIconDisabled: '$textDisabled', + inputTextDefault: '$textPrimary', + inputTextDisabled: '$textDisabled', + inputTextIcon: '$textTertiary', + inputTextPlaceholder: '$textTertiary', + presenceBgOffline: '$colorAccentNeutral', + presenceBgOnline: '$colorAccentSuccess', + 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/dark/StreamTokens.web.ts b/package/src/theme/dark/StreamTokens.web.ts new file mode 100644 index 0000000000..18537b5345 --- /dev/null +++ b/package/src/theme/dark/StreamTokens.web.ts @@ -0,0 +1,538 @@ +// StreamTokens.web.ts +// (generated) platform=web theme=dark + +export const foundations = { + colors: { + baseBlack: '#000000', + baseWhite: '#ffffff', + 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)', + slate50: '#fafbfc', + slate100: '#f2f4f6', + slate200: '#e2e6ea', + slate300: '#d0d5da', + slate400: '#b8bec4', + slate500: '#9ea4aa', + slate600: '#838990', + slate700: '#6a7077', + slate800: '#50565d', + slate900: '#384047', + slate950: '#1e252b', + neutral50: '#f7f7f7', + neutral100: '#ededed', + neutral200: '#d9d9d9', + neutral300: '#c1c1c1', + neutral400: '#a3a3a3', + neutral500: '#7f7f7f', + neutral600: '#636363', + neutral700: '#4a4a4a', + neutral800: '#383838', + neutral900: '#262626', + neutral950: '#151515', + blue50: '#ebf3ff', + blue100: '#d2e3ff', + blue200: '#a6c4ff', + blue300: '#7aa7ff', + blue400: '#4e8bff', + blue500: '#005fff', + blue600: '#0052ce', + blue700: '#0042a3', + blue800: '#003179', + blue900: '#001f4f', + blue950: '#001025', + cyan50: '#f0fcfe', + cyan100: '#d7f7fb', + cyan200: '#bdf1f8', + cyan300: '#a3ecf4', + cyan400: '#89e6f1', + cyan500: '#69e5f6', + cyan600: '#3ec9d9', + cyan700: '#28a8b5', + cyan800: '#1c8791', + cyan900: '#125f66', + cyan950: '#0b3d44', + green50: '#e8fff5', + green100: '#c9fce7', + green200: '#a9f8d9', + green300: '#88f2ca', + green400: '#59e9b5', + green500: '#00e2a1', + green600: '#00b681', + green700: '#008d64', + green800: '#006548', + green900: '#003d2b', + green950: '#002319', + purple50: '#f5effe', + purple100: '#ebdefd', + purple200: '#d8bffc', + purple300: '#c79ffc', + purple400: '#b98af9', + purple500: '#b38af8', + purple600: '#996ce3', + purple700: '#7f55c7', + purple800: '#6640ab', + purple900: '#4d2c8f', + purple950: '#351c6b', + yellow50: '#fff9e5', + yellow100: '#fff1c2', + yellow200: '#ffe8a0', + yellow300: '#ffde7d', + yellow400: '#ffd65a', + yellow500: '#ffd233', + yellow600: '#e6b400', + yellow700: '#c59600', + yellow800: '#9f7700', + yellow900: '#7a5a00', + yellow950: '#4f3900', + red50: '#fcebea', + red100: '#f8cfcd', + red200: '#f3b3b0', + red300: '#ed958f', + red400: '#e6756c', + red500: '#d92f26', + red600: '#b9261f', + red700: '#98201a', + red800: '#761915', + red900: '#54120f', + red950: '#360b09', + }, + 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 = { + 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 = { + 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 = { + avatarBgDefault: '$avatarPaletteBg1', + 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', + 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: '$colorAccentError', + badgeBgInverse: '$colorAccentBlack', + badgeBgNeutral: '$colorAccentNeutral', + badgeBgPrimary: '$colorAccentPrimary', + 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: '$colorAccentError', + borderUtilityFocus: '$colorBrand700', + borderUtilitySelected: '$colorAccentPrimary', + borderUtilitySuccess: '$colorAccentSuccess', + borderUtilityWarning: '$colorAccentWarning', + buttonDestructiveBg: '$colorAccentError', + buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0', + buttonDestructiveBorder: '$colorAccentError', + buttonDestructiveText: '$colorAccentError', + buttonDestructiveTextOnAccent: '$textOnAccent', + buttonPrimaryBg: '$colorAccentPrimary', + buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, + buttonPrimaryBorder: '$colorBrand200', + buttonPrimaryText: '$colorAccentPrimary', + buttonPrimaryTextOnAccent: '$textOnAccent', + buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', + buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', + buttonSecondaryBorder: '$borderCoreDefault', + buttonSecondaryText: '$textPrimary', + buttonSecondaryTextOnAccent: '$textPrimary', + chatBgAttachmentIncoming: foundations.colors.neutral700, + chatBgAttachmentOutgoing: '$colorBrand300', + chatBgIncoming: foundations.colors.neutral800, + chatBgOutgoing: '$colorBrand200', + chatBgTypingIndicator: '$colorAccentNeutral', + chatBorderIncoming: foundations.colors.baseTransparent0, + chatBorderOnChatIncoming: foundations.colors.slate600, + chatBorderOnChatOutgoing: '$colorBrand600', + chatBorderOutgoing: foundations.colors.baseTransparent0, + chatPollProgressFillIncoming: foundations.colors.neutral600, + chatPollProgressFillOutgoing: '$colorBrand400', + chatPollProgressTrackIncoming: foundations.colors.baseWhite, + chatPollProgressTrackOutgoing: foundations.colors.baseWhite, + chatReplyIndicatorIncoming: foundations.colors.neutral500, + chatReplyIndicatorOutgoing: '$colorBrand700', + chatTextLink: '$textLink', + chatTextMention: '$textLink', + chatTextMessage: '$textPrimary', + chatTextReaction: '$textSecondary', + chatTextSystem: '$textSecondary', + chatTextTimestamp: '$textTertiary', + chatTextUsername: '$textSecondary', + chatThreadConnectorIncoming: '$chatBgIncoming', + chatThreadConnectorOutgoing: '$chatBgOutgoing', + chatWaveformBar: '$borderCoreOpacity25', + chatWaveformBarPlaying: '$colorAccentPrimary', + colorAccentBlack: foundations.colors.baseBlack, + colorAccentError: foundations.colors.red400, + colorAccentNeutral: foundations.colors.neutral600, + colorAccentPrimary: '$colorBrand600', + colorAccentSuccess: foundations.colors.green400, + colorAccentWarning: foundations.colors.yellow400, + colorBrand50: foundations.colors.blue950, + colorBrand100: foundations.colors.blue900, + colorBrand200: foundations.colors.blue800, + colorBrand300: foundations.colors.blue700, + colorBrand400: foundations.colors.blue600, + colorBrand500: foundations.colors.blue500, + colorBrand600: foundations.colors.blue400, + colorBrand700: foundations.colors.blue300, + colorBrand800: foundations.colors.blue200, + colorBrand900: foundations.colors.blue100, + colorBrand950: foundations.colors.blue50, + composerBg: '$backgroundElevationElevation1', + controlPlayControlBg: '$backgroundElevationElevation1', + controlPlayControlBgInverse: '$colorAccentBlack', + 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: '$colorAccentBlack', + controlRemoveControlBorder: '$borderCoreOnDark', + controlRemoveControlIcon: '$textOnAccent', + controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', + controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', + controlToggleSwitchBgSelected: '$colorAccentPrimary', + controlToggleSwitchKnob: '$backgroundElevationElevation4', + inputBorderDefault: '$borderCoreDefault', + inputBorderFocus: '$borderUtilityFocus', + inputBorderHover: '$borderCoreStrong', + inputSendIcon: '$colorAccentPrimary', + inputSendIconDisabled: '$textDisabled', + inputTextDefault: '$textPrimary', + inputTextDisabled: '$textDisabled', + inputTextIcon: '$textTertiary', + inputTextPlaceholder: '$textTertiary', + presenceBgOffline: '$colorAccentNeutral', + presenceBgOnline: '$colorAccentSuccess', + 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/high-contrast-light/StreamTokens.android.ts b/package/src/theme/high-contrast-light/StreamTokens.android.ts new file mode 100644 index 0000000000..fc9aa28169 --- /dev/null +++ b/package/src/theme/high-contrast-light/StreamTokens.android.ts @@ -0,0 +1,538 @@ +// StreamTokens.android.ts +// (generated) platform=android theme=high-contrast-light + +export const foundations = { + colors: { + baseBlack: '#000000', + baseWhite: '#ffffff', + 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)', + slate50: '#fafbfc', + slate100: '#f2f4f6', + slate200: '#e2e6ea', + slate300: '#d0d5da', + slate400: '#b8bec4', + slate500: '#9ea4aa', + slate600: '#838990', + slate700: '#6a7077', + slate800: '#50565d', + slate900: '#384047', + slate950: '#1e252b', + neutral50: '#f7f7f7', + neutral100: '#ededed', + neutral200: '#d9d9d9', + neutral300: '#c1c1c1', + neutral400: '#a3a3a3', + neutral500: '#7f7f7f', + neutral600: '#636363', + neutral700: '#4a4a4a', + neutral800: '#383838', + neutral900: '#262626', + neutral950: '#151515', + blue50: '#ebf3ff', + blue100: '#d2e3ff', + blue200: '#a6c4ff', + blue300: '#7aa7ff', + blue400: '#4e8bff', + blue500: '#005fff', + blue600: '#0052ce', + blue700: '#0042a3', + blue800: '#003179', + blue900: '#001f4f', + blue950: '#001025', + cyan50: '#f0fcfe', + cyan100: '#d7f7fb', + cyan200: '#bdf1f8', + cyan300: '#a3ecf4', + cyan400: '#89e6f1', + cyan500: '#69e5f6', + cyan600: '#3ec9d9', + cyan700: '#28a8b5', + cyan800: '#1c8791', + cyan900: '#125f66', + cyan950: '#0b3d44', + green50: '#e8fff5', + green100: '#c9fce7', + green200: '#a9f8d9', + green300: '#88f2ca', + green400: '#59e9b5', + green500: '#00e2a1', + green600: '#00b681', + green700: '#008d64', + green800: '#006548', + green900: '#003d2b', + green950: '#002319', + purple50: '#f5effe', + purple100: '#ebdefd', + purple200: '#d8bffc', + purple300: '#c79ffc', + purple400: '#b98af9', + purple500: '#b38af8', + purple600: '#996ce3', + purple700: '#7f55c7', + purple800: '#6640ab', + purple900: '#4d2c8f', + purple950: '#351c6b', + yellow50: '#fff9e5', + yellow100: '#fff1c2', + yellow200: '#ffe8a0', + yellow300: '#ffde7d', + yellow400: '#ffd65a', + yellow500: '#ffd233', + yellow600: '#e6b400', + yellow700: '#c59600', + yellow800: '#9f7700', + yellow900: '#7a5a00', + yellow950: '#4f3900', + red50: '#fcebea', + red100: '#f8cfcd', + red200: '#f3b3b0', + red300: '#ed958f', + red400: '#e6756c', + red500: '#d92f26', + red600: '#b9261f', + red700: '#98201a', + red800: '#761915', + red900: '#54120f', + red950: '#360b09', + }, + 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 = { + 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 = { + 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 = { + avatarBgDefault: '$avatarPaletteBg1', + avatarPaletteBg1: foundations.colors.blue900, + avatarPaletteBg2: foundations.colors.cyan900, + avatarPaletteBg3: foundations.colors.green900, + avatarPaletteBg4: foundations.colors.purple900, + avatarPaletteBg5: foundations.colors.yellow900, + avatarPaletteText1: foundations.colors.blue50, + avatarPaletteText2: foundations.colors.cyan50, + avatarPaletteText3: foundations.colors.green50, + avatarPaletteText4: foundations.colors.purple50, + avatarPaletteText5: foundations.colors.yellow50, + avatarTextDefault: '$avatarPaletteText1', + 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.5)', + 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: '$colorAccentError', + badgeBgInverse: '$colorAccentBlack', + badgeBgNeutral: '$colorAccentNeutral', + badgeBgPrimary: '$colorAccentPrimary', + badgeBorder: '$borderCoreOnDark', + badgeText: '$textOnAccent', + badgeTextInverse: '$textPrimary', + borderCoreDefault: '$colorAccentBlack', + borderCoreOnAccent: '$colorAccentBlack', + borderCoreOnDark: foundations.colors.baseWhite, + borderCoreOpacity10: '$colorAccentBlack', + borderCoreOpacity25: '$colorAccentBlack', + borderCoreStrong: '$colorAccentBlack', + borderCoreSubtle: '$colorAccentBlack', + borderUtilityDisabled: foundations.colors.slate300, + borderUtilityError: '$colorAccentError', + borderUtilityFocus: '$colorAccentBlack', + borderUtilitySelected: '$colorAccentPrimary', + borderUtilitySuccess: '$colorAccentSuccess', + borderUtilityWarning: '$colorAccentWarning', + buttonDestructiveBg: '$colorAccentError', + buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0', + buttonDestructiveBorder: '$colorAccentError', + buttonDestructiveText: '$colorAccentError', + buttonDestructiveTextOnAccent: '$textOnAccent', + buttonPrimaryBg: '$colorAccentPrimary', + buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, + buttonPrimaryBorder: '$colorBrand200', + buttonPrimaryText: '$colorAccentPrimary', + buttonPrimaryTextOnAccent: '$textOnAccent', + buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', + buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', + buttonSecondaryBorder: '$borderCoreDefault', + buttonSecondaryText: '$textPrimary', + buttonSecondaryTextOnAccent: '$textPrimary', + chatBgAttachmentIncoming: '$backgroundElevationElevation0', + chatBgAttachmentOutgoing: '$backgroundElevationElevation0', + chatBgIncoming: '$backgroundElevationElevation0', + chatBgOutgoing: '$backgroundElevationElevation0', + chatBgTypingIndicator: '$colorAccentNeutral', + chatBorderIncoming: '$colorAccentBlack', + chatBorderOnChatIncoming: '$colorAccentBlack', + chatBorderOnChatOutgoing: '$colorAccentBlack', + chatBorderOutgoing: '$colorAccentBlack', + chatPollProgressFillIncoming: foundations.colors.neutral300, + chatPollProgressFillOutgoing: foundations.colors.baseBlack, + chatPollProgressTrackIncoming: '$colorAccentBlack', + chatPollProgressTrackOutgoing: '$colorAccentBlack', + chatReplyIndicatorIncoming: foundations.colors.baseBlack, + chatReplyIndicatorOutgoing: foundations.colors.baseBlack, + chatTextLink: '$textLink', + chatTextMention: '$textLink', + chatTextMessage: '$textPrimary', + chatTextReaction: '$textSecondary', + chatTextSystem: '$textSecondary', + chatTextTimestamp: '$textTertiary', + chatTextUsername: '$textSecondary', + chatThreadConnectorIncoming: '$colorAccentBlack', + chatThreadConnectorOutgoing: '$colorAccentBlack', + chatWaveformBar: '$borderCoreOpacity25', + chatWaveformBarPlaying: '$colorAccentBlack', + colorAccentBlack: foundations.colors.baseBlack, + colorAccentError: foundations.colors.baseBlack, + colorAccentNeutral: foundations.colors.baseBlack, + colorAccentPrimary: foundations.colors.baseBlack, + colorAccentSuccess: foundations.colors.baseBlack, + colorAccentWarning: foundations.colors.baseBlack, + colorBrand50: foundations.colors.baseBlack, + colorBrand100: foundations.colors.baseBlack, + colorBrand200: foundations.colors.baseBlack, + colorBrand300: foundations.colors.baseBlack, + colorBrand400: foundations.colors.baseBlack, + colorBrand500: foundations.colors.baseBlack, + colorBrand600: foundations.colors.baseBlack, + colorBrand700: foundations.colors.baseBlack, + colorBrand800: foundations.colors.baseBlack, + colorBrand900: foundations.colors.baseBlack, + colorBrand950: foundations.colors.baseBlack, + composerBg: '$backgroundElevationElevation1', + controlPlayControlBg: '$backgroundElevationElevation1', + controlPlayControlBgInverse: '$colorAccentBlack', + controlPlayControlBorder: '$borderCoreDefault', + controlPlayControlIcon: '$textPrimary', + controlPlayControlIconInverse: '$textOnAccent', + controlProgressBarFill: '$backgroundCoreSurface', + controlProgressBarTrack: '$backgroundCoreSurfaceStrong', + controlRadiocheckBg: foundations.colors.baseTransparent0, + controlRadiocheckBgSelected: '$colorAccentPrimary', + controlRadiocheckBorder: '$borderCoreDefault', + controlRadiocheckIconSelected: '$textInverse', + controlRemoveControlBg: '$colorAccentBlack', + controlRemoveControlBorder: '$borderCoreOnDark', + controlRemoveControlIcon: '$textInverse', + controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', + controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', + controlToggleSwitchBgSelected: '$colorAccentPrimary', + controlToggleSwitchKnob: '$backgroundElevationElevation4', + inputBorderDefault: '$borderCoreDefault', + inputBorderFocus: '$borderUtilityFocus', + inputBorderHover: '$borderCoreStrong', + inputSendIcon: '$colorAccentPrimary', + inputSendIconDisabled: '$textDisabled', + inputTextDefault: '$textPrimary', + inputTextDisabled: '$textDisabled', + inputTextIcon: '$textTertiary', + inputTextPlaceholder: '$textTertiary', + presenceBgOffline: '$colorAccentNeutral', + presenceBgOnline: '$colorAccentSuccess', + 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/high-contrast-light/StreamTokens.ios.ts b/package/src/theme/high-contrast-light/StreamTokens.ios.ts new file mode 100644 index 0000000000..1351d6313f --- /dev/null +++ b/package/src/theme/high-contrast-light/StreamTokens.ios.ts @@ -0,0 +1,538 @@ +// StreamTokens.ios.ts +// (generated) platform=ios theme=high-contrast-light + +export const foundations = { + colors: { + baseBlack: '#000000', + baseWhite: '#ffffff', + 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)', + slate50: '#fafbfc', + slate100: '#f2f4f6', + slate200: '#e2e6ea', + slate300: '#d0d5da', + slate400: '#b8bec4', + slate500: '#9ea4aa', + slate600: '#838990', + slate700: '#6a7077', + slate800: '#50565d', + slate900: '#384047', + slate950: '#1e252b', + neutral50: '#f7f7f7', + neutral100: '#ededed', + neutral200: '#d9d9d9', + neutral300: '#c1c1c1', + neutral400: '#a3a3a3', + neutral500: '#7f7f7f', + neutral600: '#636363', + neutral700: '#4a4a4a', + neutral800: '#383838', + neutral900: '#262626', + neutral950: '#151515', + blue50: '#ebf3ff', + blue100: '#d2e3ff', + blue200: '#a6c4ff', + blue300: '#7aa7ff', + blue400: '#4e8bff', + blue500: '#005fff', + blue600: '#0052ce', + blue700: '#0042a3', + blue800: '#003179', + blue900: '#001f4f', + blue950: '#001025', + cyan50: '#f0fcfe', + cyan100: '#d7f7fb', + cyan200: '#bdf1f8', + cyan300: '#a3ecf4', + cyan400: '#89e6f1', + cyan500: '#69e5f6', + cyan600: '#3ec9d9', + cyan700: '#28a8b5', + cyan800: '#1c8791', + cyan900: '#125f66', + cyan950: '#0b3d44', + green50: '#e8fff5', + green100: '#c9fce7', + green200: '#a9f8d9', + green300: '#88f2ca', + green400: '#59e9b5', + green500: '#00e2a1', + green600: '#00b681', + green700: '#008d64', + green800: '#006548', + green900: '#003d2b', + green950: '#002319', + purple50: '#f5effe', + purple100: '#ebdefd', + purple200: '#d8bffc', + purple300: '#c79ffc', + purple400: '#b98af9', + purple500: '#b38af8', + purple600: '#996ce3', + purple700: '#7f55c7', + purple800: '#6640ab', + purple900: '#4d2c8f', + purple950: '#351c6b', + yellow50: '#fff9e5', + yellow100: '#fff1c2', + yellow200: '#ffe8a0', + yellow300: '#ffde7d', + yellow400: '#ffd65a', + yellow500: '#ffd233', + yellow600: '#e6b400', + yellow700: '#c59600', + yellow800: '#9f7700', + yellow900: '#7a5a00', + yellow950: '#4f3900', + red50: '#fcebea', + red100: '#f8cfcd', + red200: '#f3b3b0', + red300: '#ed958f', + red400: '#e6756c', + red500: '#d92f26', + red600: '#b9261f', + red700: '#98201a', + red800: '#761915', + red900: '#54120f', + red950: '#360b09', + }, + 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 = { + 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 = { + 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 = { + avatarBgDefault: '$avatarPaletteBg1', + avatarPaletteBg1: foundations.colors.blue900, + avatarPaletteBg2: foundations.colors.cyan900, + avatarPaletteBg3: foundations.colors.green900, + avatarPaletteBg4: foundations.colors.purple900, + avatarPaletteBg5: foundations.colors.yellow900, + avatarPaletteText1: foundations.colors.blue50, + avatarPaletteText2: foundations.colors.cyan50, + avatarPaletteText3: foundations.colors.green50, + avatarPaletteText4: foundations.colors.purple50, + avatarPaletteText5: foundations.colors.yellow50, + avatarTextDefault: '$avatarPaletteText1', + 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.5)', + 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: '$colorAccentError', + badgeBgInverse: '$colorAccentBlack', + badgeBgNeutral: '$colorAccentNeutral', + badgeBgPrimary: '$colorAccentPrimary', + badgeBorder: '$borderCoreOnDark', + badgeText: '$textOnAccent', + badgeTextInverse: '$textPrimary', + borderCoreDefault: '$colorAccentBlack', + borderCoreOnAccent: '$colorAccentBlack', + borderCoreOnDark: foundations.colors.baseWhite, + borderCoreOpacity10: '$colorAccentBlack', + borderCoreOpacity25: '$colorAccentBlack', + borderCoreStrong: '$colorAccentBlack', + borderCoreSubtle: '$colorAccentBlack', + borderUtilityDisabled: foundations.colors.slate300, + borderUtilityError: '$colorAccentError', + borderUtilityFocus: '$colorAccentBlack', + borderUtilitySelected: '$colorAccentPrimary', + borderUtilitySuccess: '$colorAccentSuccess', + borderUtilityWarning: '$colorAccentWarning', + buttonDestructiveBg: '$colorAccentError', + buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0', + buttonDestructiveBorder: '$colorAccentError', + buttonDestructiveText: '$colorAccentError', + buttonDestructiveTextOnAccent: '$textOnAccent', + buttonPrimaryBg: '$colorAccentPrimary', + buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, + buttonPrimaryBorder: '$colorBrand200', + buttonPrimaryText: '$colorAccentPrimary', + buttonPrimaryTextOnAccent: '$textOnAccent', + buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', + buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', + buttonSecondaryBorder: '$borderCoreDefault', + buttonSecondaryText: '$textPrimary', + buttonSecondaryTextOnAccent: '$textPrimary', + chatBgAttachmentIncoming: '$backgroundElevationElevation0', + chatBgAttachmentOutgoing: '$backgroundElevationElevation0', + chatBgIncoming: '$backgroundElevationElevation0', + chatBgOutgoing: '$backgroundElevationElevation0', + chatBgTypingIndicator: '$colorAccentNeutral', + chatBorderIncoming: '$colorAccentBlack', + chatBorderOnChatIncoming: '$colorAccentBlack', + chatBorderOnChatOutgoing: '$colorAccentBlack', + chatBorderOutgoing: '$colorAccentBlack', + chatPollProgressFillIncoming: foundations.colors.neutral300, + chatPollProgressFillOutgoing: foundations.colors.baseBlack, + chatPollProgressTrackIncoming: '$colorAccentBlack', + chatPollProgressTrackOutgoing: '$colorAccentBlack', + chatReplyIndicatorIncoming: foundations.colors.baseBlack, + chatReplyIndicatorOutgoing: foundations.colors.baseBlack, + chatTextLink: '$textLink', + chatTextMention: '$textLink', + chatTextMessage: '$textPrimary', + chatTextReaction: '$textSecondary', + chatTextSystem: '$textSecondary', + chatTextTimestamp: '$textTertiary', + chatTextUsername: '$textSecondary', + chatThreadConnectorIncoming: '$colorAccentBlack', + chatThreadConnectorOutgoing: '$colorAccentBlack', + chatWaveformBar: '$borderCoreOpacity25', + chatWaveformBarPlaying: '$colorAccentBlack', + colorAccentBlack: foundations.colors.baseBlack, + colorAccentError: foundations.colors.baseBlack, + colorAccentNeutral: foundations.colors.baseBlack, + colorAccentPrimary: foundations.colors.baseBlack, + colorAccentSuccess: foundations.colors.baseBlack, + colorAccentWarning: foundations.colors.baseBlack, + colorBrand50: foundations.colors.baseBlack, + colorBrand100: foundations.colors.baseBlack, + colorBrand200: foundations.colors.baseBlack, + colorBrand300: foundations.colors.baseBlack, + colorBrand400: foundations.colors.baseBlack, + colorBrand500: foundations.colors.baseBlack, + colorBrand600: foundations.colors.baseBlack, + colorBrand700: foundations.colors.baseBlack, + colorBrand800: foundations.colors.baseBlack, + colorBrand900: foundations.colors.baseBlack, + colorBrand950: foundations.colors.baseBlack, + composerBg: '$backgroundElevationElevation1', + controlPlayControlBg: '$backgroundElevationElevation1', + controlPlayControlBgInverse: '$colorAccentBlack', + controlPlayControlBorder: '$borderCoreDefault', + controlPlayControlIcon: '$textPrimary', + controlPlayControlIconInverse: '$textOnAccent', + controlProgressBarFill: '$backgroundCoreSurface', + controlProgressBarTrack: '$backgroundCoreSurfaceStrong', + controlRadiocheckBg: foundations.colors.baseTransparent0, + controlRadiocheckBgSelected: '$colorAccentPrimary', + controlRadiocheckBorder: '$borderCoreDefault', + controlRadiocheckIconSelected: '$textInverse', + controlRemoveControlBg: '$colorAccentBlack', + controlRemoveControlBorder: '$borderCoreOnDark', + controlRemoveControlIcon: '$textInverse', + controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', + controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', + controlToggleSwitchBgSelected: '$colorAccentPrimary', + controlToggleSwitchKnob: '$backgroundElevationElevation4', + inputBorderDefault: '$borderCoreDefault', + inputBorderFocus: '$borderUtilityFocus', + inputBorderHover: '$borderCoreStrong', + inputSendIcon: '$colorAccentPrimary', + inputSendIconDisabled: '$textDisabled', + inputTextDefault: '$textPrimary', + inputTextDisabled: '$textDisabled', + inputTextIcon: '$textTertiary', + inputTextPlaceholder: '$textTertiary', + presenceBgOffline: '$colorAccentNeutral', + presenceBgOnline: '$colorAccentSuccess', + 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/high-contrast-light/StreamTokens.web.ts b/package/src/theme/high-contrast-light/StreamTokens.web.ts new file mode 100644 index 0000000000..62c21e4b08 --- /dev/null +++ b/package/src/theme/high-contrast-light/StreamTokens.web.ts @@ -0,0 +1,538 @@ +// StreamTokens.web.ts +// (generated) platform=web theme=high-contrast-light + +export const foundations = { + colors: { + baseBlack: '#000000', + baseWhite: '#ffffff', + 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)', + slate50: '#fafbfc', + slate100: '#f2f4f6', + slate200: '#e2e6ea', + slate300: '#d0d5da', + slate400: '#b8bec4', + slate500: '#9ea4aa', + slate600: '#838990', + slate700: '#6a7077', + slate800: '#50565d', + slate900: '#384047', + slate950: '#1e252b', + neutral50: '#f7f7f7', + neutral100: '#ededed', + neutral200: '#d9d9d9', + neutral300: '#c1c1c1', + neutral400: '#a3a3a3', + neutral500: '#7f7f7f', + neutral600: '#636363', + neutral700: '#4a4a4a', + neutral800: '#383838', + neutral900: '#262626', + neutral950: '#151515', + blue50: '#ebf3ff', + blue100: '#d2e3ff', + blue200: '#a6c4ff', + blue300: '#7aa7ff', + blue400: '#4e8bff', + blue500: '#005fff', + blue600: '#0052ce', + blue700: '#0042a3', + blue800: '#003179', + blue900: '#001f4f', + blue950: '#001025', + cyan50: '#f0fcfe', + cyan100: '#d7f7fb', + cyan200: '#bdf1f8', + cyan300: '#a3ecf4', + cyan400: '#89e6f1', + cyan500: '#69e5f6', + cyan600: '#3ec9d9', + cyan700: '#28a8b5', + cyan800: '#1c8791', + cyan900: '#125f66', + cyan950: '#0b3d44', + green50: '#e8fff5', + green100: '#c9fce7', + green200: '#a9f8d9', + green300: '#88f2ca', + green400: '#59e9b5', + green500: '#00e2a1', + green600: '#00b681', + green700: '#008d64', + green800: '#006548', + green900: '#003d2b', + green950: '#002319', + purple50: '#f5effe', + purple100: '#ebdefd', + purple200: '#d8bffc', + purple300: '#c79ffc', + purple400: '#b98af9', + purple500: '#b38af8', + purple600: '#996ce3', + purple700: '#7f55c7', + purple800: '#6640ab', + purple900: '#4d2c8f', + purple950: '#351c6b', + yellow50: '#fff9e5', + yellow100: '#fff1c2', + yellow200: '#ffe8a0', + yellow300: '#ffde7d', + yellow400: '#ffd65a', + yellow500: '#ffd233', + yellow600: '#e6b400', + yellow700: '#c59600', + yellow800: '#9f7700', + yellow900: '#7a5a00', + yellow950: '#4f3900', + red50: '#fcebea', + red100: '#f8cfcd', + red200: '#f3b3b0', + red300: '#ed958f', + red400: '#e6756c', + red500: '#d92f26', + red600: '#b9261f', + red700: '#98201a', + red800: '#761915', + red900: '#54120f', + red950: '#360b09', + }, + 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 = { + 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 = { + 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 = { + avatarBgDefault: '$avatarPaletteBg1', + avatarPaletteBg1: foundations.colors.blue900, + avatarPaletteBg2: foundations.colors.cyan900, + avatarPaletteBg3: foundations.colors.green900, + avatarPaletteBg4: foundations.colors.purple900, + avatarPaletteBg5: foundations.colors.yellow900, + avatarPaletteText1: foundations.colors.blue50, + avatarPaletteText2: foundations.colors.cyan50, + avatarPaletteText3: foundations.colors.green50, + avatarPaletteText4: foundations.colors.purple50, + avatarPaletteText5: foundations.colors.yellow50, + avatarTextDefault: '$avatarPaletteText1', + 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.5)', + 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: '$colorAccentError', + badgeBgInverse: '$colorAccentBlack', + badgeBgNeutral: '$colorAccentNeutral', + badgeBgPrimary: '$colorAccentPrimary', + badgeBorder: '$borderCoreOnDark', + badgeText: '$textOnAccent', + badgeTextInverse: '$textPrimary', + borderCoreDefault: '$colorAccentBlack', + borderCoreOnAccent: '$colorAccentBlack', + borderCoreOnDark: foundations.colors.baseWhite, + borderCoreOpacity10: '$colorAccentBlack', + borderCoreOpacity25: '$colorAccentBlack', + borderCoreStrong: '$colorAccentBlack', + borderCoreSubtle: '$colorAccentBlack', + borderUtilityDisabled: foundations.colors.slate300, + borderUtilityError: '$colorAccentError', + borderUtilityFocus: '$colorAccentBlack', + borderUtilitySelected: '$colorAccentPrimary', + borderUtilitySuccess: '$colorAccentSuccess', + borderUtilityWarning: '$colorAccentWarning', + buttonDestructiveBg: '$colorAccentError', + buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0', + buttonDestructiveBorder: '$colorAccentError', + buttonDestructiveText: '$colorAccentError', + buttonDestructiveTextOnAccent: '$textOnAccent', + buttonPrimaryBg: '$colorAccentPrimary', + buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, + buttonPrimaryBorder: '$colorBrand200', + buttonPrimaryText: '$colorAccentPrimary', + buttonPrimaryTextOnAccent: '$textOnAccent', + buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', + buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', + buttonSecondaryBorder: '$borderCoreDefault', + buttonSecondaryText: '$textPrimary', + buttonSecondaryTextOnAccent: '$textPrimary', + chatBgAttachmentIncoming: '$backgroundElevationElevation0', + chatBgAttachmentOutgoing: '$backgroundElevationElevation0', + chatBgIncoming: '$backgroundElevationElevation0', + chatBgOutgoing: '$backgroundElevationElevation0', + chatBgTypingIndicator: '$colorAccentNeutral', + chatBorderIncoming: '$colorAccentBlack', + chatBorderOnChatIncoming: '$colorAccentBlack', + chatBorderOnChatOutgoing: '$colorAccentBlack', + chatBorderOutgoing: '$colorAccentBlack', + chatPollProgressFillIncoming: foundations.colors.neutral300, + chatPollProgressFillOutgoing: foundations.colors.baseBlack, + chatPollProgressTrackIncoming: '$colorAccentBlack', + chatPollProgressTrackOutgoing: '$colorAccentBlack', + chatReplyIndicatorIncoming: foundations.colors.baseBlack, + chatReplyIndicatorOutgoing: foundations.colors.baseBlack, + chatTextLink: '$textLink', + chatTextMention: '$textLink', + chatTextMessage: '$textPrimary', + chatTextReaction: '$textSecondary', + chatTextSystem: '$textSecondary', + chatTextTimestamp: '$textTertiary', + chatTextUsername: '$textSecondary', + chatThreadConnectorIncoming: '$colorAccentBlack', + chatThreadConnectorOutgoing: '$colorAccentBlack', + chatWaveformBar: '$borderCoreOpacity25', + chatWaveformBarPlaying: '$colorAccentBlack', + colorAccentBlack: foundations.colors.baseBlack, + colorAccentError: foundations.colors.baseBlack, + colorAccentNeutral: foundations.colors.baseBlack, + colorAccentPrimary: foundations.colors.baseBlack, + colorAccentSuccess: foundations.colors.baseBlack, + colorAccentWarning: foundations.colors.baseBlack, + colorBrand50: foundations.colors.baseBlack, + colorBrand100: foundations.colors.baseBlack, + colorBrand200: foundations.colors.baseBlack, + colorBrand300: foundations.colors.baseBlack, + colorBrand400: foundations.colors.baseBlack, + colorBrand500: foundations.colors.baseBlack, + colorBrand600: foundations.colors.baseBlack, + colorBrand700: foundations.colors.baseBlack, + colorBrand800: foundations.colors.baseBlack, + colorBrand900: foundations.colors.baseBlack, + colorBrand950: foundations.colors.baseBlack, + composerBg: '$backgroundElevationElevation1', + controlPlayControlBg: '$backgroundElevationElevation1', + controlPlayControlBgInverse: '$colorAccentBlack', + controlPlayControlBorder: '$borderCoreDefault', + controlPlayControlIcon: '$textPrimary', + controlPlayControlIconInverse: '$textOnAccent', + controlProgressBarFill: '$backgroundCoreSurface', + controlProgressBarTrack: '$backgroundCoreSurfaceStrong', + controlRadiocheckBg: foundations.colors.baseTransparent0, + controlRadiocheckBgSelected: '$colorAccentPrimary', + controlRadiocheckBorder: '$borderCoreDefault', + controlRadiocheckIconSelected: '$textInverse', + controlRemoveControlBg: '$colorAccentBlack', + controlRemoveControlBorder: '$borderCoreOnDark', + controlRemoveControlIcon: '$textInverse', + controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', + controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', + controlToggleSwitchBgSelected: '$colorAccentPrimary', + controlToggleSwitchKnob: '$backgroundElevationElevation4', + inputBorderDefault: '$borderCoreDefault', + inputBorderFocus: '$borderUtilityFocus', + inputBorderHover: '$borderCoreStrong', + inputSendIcon: '$colorAccentPrimary', + inputSendIconDisabled: '$textDisabled', + inputTextDefault: '$textPrimary', + inputTextDisabled: '$textDisabled', + inputTextIcon: '$textTertiary', + inputTextPlaceholder: '$textTertiary', + presenceBgOffline: '$colorAccentNeutral', + presenceBgOnline: '$colorAccentSuccess', + 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/index.ts b/package/src/theme/index.ts new file mode 100644 index 0000000000..c3054896b2 --- /dev/null +++ b/package/src/theme/index.ts @@ -0,0 +1,2 @@ +// TODO: Handle color scheme here. +export * from './light/StreamTokens'; diff --git a/package/src/theme/light/StreamTokens.android.ts b/package/src/theme/light/StreamTokens.android.ts new file mode 100644 index 0000000000..6c3328a9e1 --- /dev/null +++ b/package/src/theme/light/StreamTokens.android.ts @@ -0,0 +1,538 @@ +// StreamTokens.android.ts +// (generated) platform=android theme=light + +export const foundations = { + colors: { + baseBlack: '#000000', + baseWhite: '#ffffff', + 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)', + slate50: '#fafbfc', + slate100: '#f2f4f6', + slate200: '#e2e6ea', + slate300: '#d0d5da', + slate400: '#b8bec4', + slate500: '#9ea4aa', + slate600: '#838990', + slate700: '#6a7077', + slate800: '#50565d', + slate900: '#384047', + slate950: '#1e252b', + neutral50: '#f7f7f7', + neutral100: '#ededed', + neutral200: '#d9d9d9', + neutral300: '#c1c1c1', + neutral400: '#a3a3a3', + neutral500: '#7f7f7f', + neutral600: '#636363', + neutral700: '#4a4a4a', + neutral800: '#383838', + neutral900: '#262626', + neutral950: '#151515', + blue50: '#ebf3ff', + blue100: '#d2e3ff', + blue200: '#a6c4ff', + blue300: '#7aa7ff', + blue400: '#4e8bff', + blue500: '#005fff', + blue600: '#0052ce', + blue700: '#0042a3', + blue800: '#003179', + blue900: '#001f4f', + blue950: '#001025', + cyan50: '#f0fcfe', + cyan100: '#d7f7fb', + cyan200: '#bdf1f8', + cyan300: '#a3ecf4', + cyan400: '#89e6f1', + cyan500: '#69e5f6', + cyan600: '#3ec9d9', + cyan700: '#28a8b5', + cyan800: '#1c8791', + cyan900: '#125f66', + cyan950: '#0b3d44', + green50: '#e8fff5', + green100: '#c9fce7', + green200: '#a9f8d9', + green300: '#88f2ca', + green400: '#59e9b5', + green500: '#00e2a1', + green600: '#00b681', + green700: '#008d64', + green800: '#006548', + green900: '#003d2b', + green950: '#002319', + purple50: '#f5effe', + purple100: '#ebdefd', + purple200: '#d8bffc', + purple300: '#c79ffc', + purple400: '#b98af9', + purple500: '#b38af8', + purple600: '#996ce3', + purple700: '#7f55c7', + purple800: '#6640ab', + purple900: '#4d2c8f', + purple950: '#351c6b', + yellow50: '#fff9e5', + yellow100: '#fff1c2', + yellow200: '#ffe8a0', + yellow300: '#ffde7d', + yellow400: '#ffd65a', + yellow500: '#ffd233', + yellow600: '#e6b400', + yellow700: '#c59600', + yellow800: '#9f7700', + yellow900: '#7a5a00', + yellow950: '#4f3900', + red50: '#fcebea', + red100: '#f8cfcd', + red200: '#f3b3b0', + red300: '#ed958f', + red400: '#e6756c', + red500: '#d92f26', + red600: '#b9261f', + red700: '#98201a', + red800: '#761915', + red900: '#54120f', + red950: '#360b09', + }, + 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 = { + 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 = { + 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 = { + avatarBgDefault: '$avatarPaletteBg1', + avatarPaletteBg1: foundations.colors.blue100, + avatarPaletteBg2: foundations.colors.cyan100, + avatarPaletteBg3: foundations.colors.green100, + avatarPaletteBg4: foundations.colors.purple200, + avatarPaletteBg5: foundations.colors.yellow200, + avatarPaletteText1: foundations.colors.blue800, + avatarPaletteText2: foundations.colors.cyan800, + avatarPaletteText3: foundations.colors.green800, + avatarPaletteText4: foundations.colors.purple800, + avatarPaletteText5: foundations.colors.yellow800, + avatarTextDefault: '$avatarPaletteText1', + 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.5)', + 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: '$colorAccentError', + badgeBgInverse: '$colorAccentBlack', + badgeBgNeutral: '$colorAccentNeutral', + badgeBgPrimary: '$colorAccentPrimary', + badgeBorder: '$borderCoreOnDark', + badgeText: '$textOnAccent', + badgeTextInverse: '$textPrimary', + borderCoreDefault: foundations.colors.slate200, + 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.slate300, + borderCoreSubtle: foundations.colors.slate100, + borderUtilityDisabled: foundations.colors.slate200, + borderUtilityError: '$colorAccentError', + borderUtilityFocus: '$colorBrand300', + borderUtilitySelected: '$colorAccentPrimary', + borderUtilitySuccess: '$colorAccentSuccess', + borderUtilityWarning: '$colorAccentWarning', + buttonDestructiveBg: '$colorAccentError', + buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0', + buttonDestructiveBorder: '$colorAccentError', + buttonDestructiveText: '$colorAccentError', + buttonDestructiveTextOnAccent: '$textOnAccent', + buttonPrimaryBg: '$colorAccentPrimary', + buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, + buttonPrimaryBorder: '$colorBrand200', + buttonPrimaryText: '$colorAccentPrimary', + buttonPrimaryTextOnAccent: '$textOnAccent', + buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', + buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', + buttonSecondaryBorder: '$borderCoreDefault', + buttonSecondaryText: '$textPrimary', + buttonSecondaryTextOnAccent: '$textPrimary', + chatBgAttachmentIncoming: foundations.colors.slate200, + chatBgAttachmentOutgoing: '$colorBrand200', + chatBgIncoming: foundations.colors.slate100, + chatBgOutgoing: '$colorBrand100', + chatBgTypingIndicator: '$colorAccentNeutral', + chatBorderIncoming: foundations.colors.baseTransparent0, + chatBorderOnChatIncoming: foundations.colors.slate400, + chatBorderOnChatOutgoing: '$colorBrand300', + chatBorderOutgoing: foundations.colors.baseTransparent0, + chatPollProgressFillIncoming: foundations.colors.slate300, + chatPollProgressFillOutgoing: '$colorBrand200', + chatPollProgressTrackIncoming: foundations.colors.slate600, + chatPollProgressTrackOutgoing: '$colorAccentPrimary', + chatReplyIndicatorIncoming: foundations.colors.slate400, + chatReplyIndicatorOutgoing: '$colorBrand400', + chatTextLink: '$textLink', + chatTextMention: '$textLink', + chatTextMessage: '$textPrimary', + chatTextReaction: '$textSecondary', + chatTextSystem: '$textSecondary', + chatTextTimestamp: '$textTertiary', + chatTextUsername: '$textSecondary', + chatThreadConnectorIncoming: foundations.colors.slate200, + chatThreadConnectorOutgoing: '$chatBgOutgoing', + chatWaveformBar: '$borderCoreOpacity25', + chatWaveformBarPlaying: '$colorAccentPrimary', + colorAccentBlack: foundations.colors.baseBlack, + colorAccentError: foundations.colors.red500, + colorAccentNeutral: foundations.colors.slate500, + colorAccentPrimary: '$colorBrand500', + colorAccentSuccess: foundations.colors.green500, + colorAccentWarning: foundations.colors.yellow600, + colorBrand50: foundations.colors.blue50, + colorBrand100: foundations.colors.blue100, + colorBrand200: foundations.colors.blue200, + colorBrand300: foundations.colors.blue300, + colorBrand400: foundations.colors.blue400, + colorBrand500: foundations.colors.blue500, + colorBrand600: foundations.colors.blue600, + colorBrand700: foundations.colors.blue700, + colorBrand800: foundations.colors.blue800, + colorBrand900: foundations.colors.blue900, + colorBrand950: foundations.colors.blue950, + composerBg: '$backgroundElevationElevation1', + controlPlayControlBg: '$backgroundElevationElevation1', + controlPlayControlBgInverse: '$colorAccentBlack', + controlPlayControlBorder: '$borderCoreDefault', + controlPlayControlIcon: '$textPrimary', + controlPlayControlIconInverse: '$textOnAccent', + controlProgressBarFill: foundations.colors.slate200, + controlProgressBarTrack: foundations.colors.slate500, + controlRadiocheckBg: foundations.colors.baseTransparent0, + controlRadiocheckBgSelected: '$colorAccentPrimary', + controlRadiocheckBorder: '$borderCoreDefault', + controlRadiocheckIconSelected: '$textInverse', + controlRemoveControlBg: '$colorAccentBlack', + controlRemoveControlBorder: '$borderCoreOnDark', + controlRemoveControlIcon: '$textOnAccent', + controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', + controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', + controlToggleSwitchBgSelected: '$colorAccentPrimary', + controlToggleSwitchKnob: '$backgroundElevationElevation4', + inputBorderDefault: '$borderCoreDefault', + inputBorderFocus: '$borderUtilityFocus', + inputBorderHover: '$borderCoreStrong', + inputSendIcon: '$colorAccentPrimary', + inputSendIconDisabled: '$textDisabled', + inputTextDefault: '$textPrimary', + inputTextDisabled: '$textDisabled', + inputTextIcon: '$textTertiary', + inputTextPlaceholder: '$textTertiary', + presenceBgOffline: '$colorAccentNeutral', + presenceBgOnline: '$colorAccentSuccess', + presenceBorder: '$borderCoreOnDark', + reactionBg: '$backgroundElevationElevation1', + reactionBorder: '$borderCoreDefault', + reactionEmoji: '$textPrimary', + reactionText: '$textPrimary', + systemBgBlur: 'rgba(255, 255, 255, 0.01)', + systemCaret: '$colorAccentPrimary', + systemScrollbar: 'rgba(0, 0, 0, 0.5)', + systemText: foundations.colors.baseBlack, + textDisabled: foundations.colors.slate400, + textInverse: foundations.colors.baseWhite, + textLink: '$colorAccentPrimary', + textOnAccent: foundations.colors.baseWhite, + textPrimary: foundations.colors.slate900, + textSecondary: foundations.colors.slate700, + textTertiary: foundations.colors.slate600, +} as const; diff --git a/package/src/theme/light/StreamTokens.ios.ts b/package/src/theme/light/StreamTokens.ios.ts new file mode 100644 index 0000000000..cabc8802cc --- /dev/null +++ b/package/src/theme/light/StreamTokens.ios.ts @@ -0,0 +1,538 @@ +// StreamTokens.ios.ts +// (generated) platform=ios theme=light + +export const foundations = { + colors: { + baseBlack: '#000000', + baseWhite: '#ffffff', + 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)', + slate50: '#fafbfc', + slate100: '#f2f4f6', + slate200: '#e2e6ea', + slate300: '#d0d5da', + slate400: '#b8bec4', + slate500: '#9ea4aa', + slate600: '#838990', + slate700: '#6a7077', + slate800: '#50565d', + slate900: '#384047', + slate950: '#1e252b', + neutral50: '#f7f7f7', + neutral100: '#ededed', + neutral200: '#d9d9d9', + neutral300: '#c1c1c1', + neutral400: '#a3a3a3', + neutral500: '#7f7f7f', + neutral600: '#636363', + neutral700: '#4a4a4a', + neutral800: '#383838', + neutral900: '#262626', + neutral950: '#151515', + blue50: '#ebf3ff', + blue100: '#d2e3ff', + blue200: '#a6c4ff', + blue300: '#7aa7ff', + blue400: '#4e8bff', + blue500: '#005fff', + blue600: '#0052ce', + blue700: '#0042a3', + blue800: '#003179', + blue900: '#001f4f', + blue950: '#001025', + cyan50: '#f0fcfe', + cyan100: '#d7f7fb', + cyan200: '#bdf1f8', + cyan300: '#a3ecf4', + cyan400: '#89e6f1', + cyan500: '#69e5f6', + cyan600: '#3ec9d9', + cyan700: '#28a8b5', + cyan800: '#1c8791', + cyan900: '#125f66', + cyan950: '#0b3d44', + green50: '#e8fff5', + green100: '#c9fce7', + green200: '#a9f8d9', + green300: '#88f2ca', + green400: '#59e9b5', + green500: '#00e2a1', + green600: '#00b681', + green700: '#008d64', + green800: '#006548', + green900: '#003d2b', + green950: '#002319', + purple50: '#f5effe', + purple100: '#ebdefd', + purple200: '#d8bffc', + purple300: '#c79ffc', + purple400: '#b98af9', + purple500: '#b38af8', + purple600: '#996ce3', + purple700: '#7f55c7', + purple800: '#6640ab', + purple900: '#4d2c8f', + purple950: '#351c6b', + yellow50: '#fff9e5', + yellow100: '#fff1c2', + yellow200: '#ffe8a0', + yellow300: '#ffde7d', + yellow400: '#ffd65a', + yellow500: '#ffd233', + yellow600: '#e6b400', + yellow700: '#c59600', + yellow800: '#9f7700', + yellow900: '#7a5a00', + yellow950: '#4f3900', + red50: '#fcebea', + red100: '#f8cfcd', + red200: '#f3b3b0', + red300: '#ed958f', + red400: '#e6756c', + red500: '#d92f26', + red600: '#b9261f', + red700: '#98201a', + red800: '#761915', + red900: '#54120f', + red950: '#360b09', + }, + 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 = { + 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 = { + 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 = { + avatarBgDefault: '$avatarPaletteBg1', + avatarPaletteBg1: foundations.colors.blue100, + avatarPaletteBg2: foundations.colors.cyan100, + avatarPaletteBg3: foundations.colors.green100, + avatarPaletteBg4: foundations.colors.purple200, + avatarPaletteBg5: foundations.colors.yellow200, + avatarPaletteText1: foundations.colors.blue800, + avatarPaletteText2: foundations.colors.cyan800, + avatarPaletteText3: foundations.colors.green800, + avatarPaletteText4: foundations.colors.purple800, + avatarPaletteText5: foundations.colors.yellow800, + avatarTextDefault: '$avatarPaletteText1', + 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.5)', + 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: '$colorAccentError', + badgeBgInverse: '$colorAccentBlack', + badgeBgNeutral: '$colorAccentNeutral', + badgeBgPrimary: '$colorAccentPrimary', + badgeBorder: '$borderCoreOnDark', + badgeText: '$textOnAccent', + badgeTextInverse: '$textPrimary', + borderCoreDefault: foundations.colors.slate200, + 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.slate300, + borderCoreSubtle: foundations.colors.slate100, + borderUtilityDisabled: foundations.colors.slate200, + borderUtilityError: '$colorAccentError', + borderUtilityFocus: '$colorBrand300', + borderUtilitySelected: '$colorAccentPrimary', + borderUtilitySuccess: '$colorAccentSuccess', + borderUtilityWarning: '$colorAccentWarning', + buttonDestructiveBg: '$colorAccentError', + buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0', + buttonDestructiveBorder: '$colorAccentError', + buttonDestructiveText: '$colorAccentError', + buttonDestructiveTextOnAccent: '$textOnAccent', + buttonPrimaryBg: '$colorAccentPrimary', + buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, + buttonPrimaryBorder: '$colorBrand200', + buttonPrimaryText: '$colorAccentPrimary', + buttonPrimaryTextOnAccent: '$textOnAccent', + buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', + buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', + buttonSecondaryBorder: '$borderCoreDefault', + buttonSecondaryText: '$textPrimary', + buttonSecondaryTextOnAccent: '$textPrimary', + chatBgAttachmentIncoming: foundations.colors.slate200, + chatBgAttachmentOutgoing: '$colorBrand200', + chatBgIncoming: foundations.colors.slate100, + chatBgOutgoing: '$colorBrand100', + chatBgTypingIndicator: '$colorAccentNeutral', + chatBorderIncoming: foundations.colors.baseTransparent0, + chatBorderOnChatIncoming: foundations.colors.slate400, + chatBorderOnChatOutgoing: '$colorBrand300', + chatBorderOutgoing: foundations.colors.baseTransparent0, + chatPollProgressFillIncoming: foundations.colors.slate300, + chatPollProgressFillOutgoing: '$colorBrand200', + chatPollProgressTrackIncoming: foundations.colors.slate600, + chatPollProgressTrackOutgoing: '$colorAccentPrimary', + chatReplyIndicatorIncoming: foundations.colors.slate400, + chatReplyIndicatorOutgoing: '$colorBrand400', + chatTextLink: '$textLink', + chatTextMention: '$textLink', + chatTextMessage: '$textPrimary', + chatTextReaction: '$textSecondary', + chatTextSystem: '$textSecondary', + chatTextTimestamp: '$textTertiary', + chatTextUsername: '$textSecondary', + chatThreadConnectorIncoming: foundations.colors.slate200, + chatThreadConnectorOutgoing: '$chatBgOutgoing', + chatWaveformBar: '$borderCoreOpacity25', + chatWaveformBarPlaying: '$colorAccentPrimary', + colorAccentBlack: foundations.colors.baseBlack, + colorAccentError: foundations.colors.red500, + colorAccentNeutral: foundations.colors.slate500, + colorAccentPrimary: '$colorBrand500', + colorAccentSuccess: foundations.colors.green500, + colorAccentWarning: foundations.colors.yellow600, + colorBrand50: foundations.colors.blue50, + colorBrand100: foundations.colors.blue100, + colorBrand200: foundations.colors.blue200, + colorBrand300: foundations.colors.blue300, + colorBrand400: foundations.colors.blue400, + colorBrand500: foundations.colors.blue500, + colorBrand600: foundations.colors.blue600, + colorBrand700: foundations.colors.blue700, + colorBrand800: foundations.colors.blue800, + colorBrand900: foundations.colors.blue900, + colorBrand950: foundations.colors.blue950, + composerBg: '$backgroundElevationElevation1', + controlPlayControlBg: '$backgroundElevationElevation1', + controlPlayControlBgInverse: '$colorAccentBlack', + controlPlayControlBorder: '$borderCoreDefault', + controlPlayControlIcon: '$textPrimary', + controlPlayControlIconInverse: '$textOnAccent', + controlProgressBarFill: foundations.colors.slate200, + controlProgressBarTrack: foundations.colors.slate500, + controlRadiocheckBg: foundations.colors.baseTransparent0, + controlRadiocheckBgSelected: '$colorAccentPrimary', + controlRadiocheckBorder: '$borderCoreDefault', + controlRadiocheckIconSelected: '$textInverse', + controlRemoveControlBg: '$colorAccentBlack', + controlRemoveControlBorder: '$borderCoreOnDark', + controlRemoveControlIcon: '$textOnAccent', + controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', + controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', + controlToggleSwitchBgSelected: '$colorAccentPrimary', + controlToggleSwitchKnob: '$backgroundElevationElevation4', + inputBorderDefault: '$borderCoreDefault', + inputBorderFocus: '$borderUtilityFocus', + inputBorderHover: '$borderCoreStrong', + inputSendIcon: '$colorAccentPrimary', + inputSendIconDisabled: '$textDisabled', + inputTextDefault: '$textPrimary', + inputTextDisabled: '$textDisabled', + inputTextIcon: '$textTertiary', + inputTextPlaceholder: '$textTertiary', + presenceBgOffline: '$colorAccentNeutral', + presenceBgOnline: '$colorAccentSuccess', + presenceBorder: '$borderCoreOnDark', + reactionBg: '$backgroundElevationElevation1', + reactionBorder: '$borderCoreDefault', + reactionEmoji: '$textPrimary', + reactionText: '$textPrimary', + systemBgBlur: 'rgba(255, 255, 255, 0.01)', + systemCaret: '$colorAccentPrimary', + systemScrollbar: 'rgba(0, 0, 0, 0.5)', + systemText: foundations.colors.baseBlack, + textDisabled: foundations.colors.slate400, + textInverse: foundations.colors.baseWhite, + textLink: '$colorAccentPrimary', + textOnAccent: foundations.colors.baseWhite, + textPrimary: foundations.colors.slate900, + textSecondary: foundations.colors.slate700, + textTertiary: foundations.colors.slate600, +} as const; diff --git a/package/src/theme/light/StreamTokens.web.ts b/package/src/theme/light/StreamTokens.web.ts new file mode 100644 index 0000000000..71552bc485 --- /dev/null +++ b/package/src/theme/light/StreamTokens.web.ts @@ -0,0 +1,538 @@ +// StreamTokens.web.ts +// (generated) platform=web theme=light + +export const foundations = { + colors: { + baseBlack: '#000000', + baseWhite: '#ffffff', + 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)', + slate50: '#fafbfc', + slate100: '#f2f4f6', + slate200: '#e2e6ea', + slate300: '#d0d5da', + slate400: '#b8bec4', + slate500: '#9ea4aa', + slate600: '#838990', + slate700: '#6a7077', + slate800: '#50565d', + slate900: '#384047', + slate950: '#1e252b', + neutral50: '#f7f7f7', + neutral100: '#ededed', + neutral200: '#d9d9d9', + neutral300: '#c1c1c1', + neutral400: '#a3a3a3', + neutral500: '#7f7f7f', + neutral600: '#636363', + neutral700: '#4a4a4a', + neutral800: '#383838', + neutral900: '#262626', + neutral950: '#151515', + blue50: '#ebf3ff', + blue100: '#d2e3ff', + blue200: '#a6c4ff', + blue300: '#7aa7ff', + blue400: '#4e8bff', + blue500: '#005fff', + blue600: '#0052ce', + blue700: '#0042a3', + blue800: '#003179', + blue900: '#001f4f', + blue950: '#001025', + cyan50: '#f0fcfe', + cyan100: '#d7f7fb', + cyan200: '#bdf1f8', + cyan300: '#a3ecf4', + cyan400: '#89e6f1', + cyan500: '#69e5f6', + cyan600: '#3ec9d9', + cyan700: '#28a8b5', + cyan800: '#1c8791', + cyan900: '#125f66', + cyan950: '#0b3d44', + green50: '#e8fff5', + green100: '#c9fce7', + green200: '#a9f8d9', + green300: '#88f2ca', + green400: '#59e9b5', + green500: '#00e2a1', + green600: '#00b681', + green700: '#008d64', + green800: '#006548', + green900: '#003d2b', + green950: '#002319', + purple50: '#f5effe', + purple100: '#ebdefd', + purple200: '#d8bffc', + purple300: '#c79ffc', + purple400: '#b98af9', + purple500: '#b38af8', + purple600: '#996ce3', + purple700: '#7f55c7', + purple800: '#6640ab', + purple900: '#4d2c8f', + purple950: '#351c6b', + yellow50: '#fff9e5', + yellow100: '#fff1c2', + yellow200: '#ffe8a0', + yellow300: '#ffde7d', + yellow400: '#ffd65a', + yellow500: '#ffd233', + yellow600: '#e6b400', + yellow700: '#c59600', + yellow800: '#9f7700', + yellow900: '#7a5a00', + yellow950: '#4f3900', + red50: '#fcebea', + red100: '#f8cfcd', + red200: '#f3b3b0', + red300: '#ed958f', + red400: '#e6756c', + red500: '#d92f26', + red600: '#b9261f', + red700: '#98201a', + red800: '#761915', + red900: '#54120f', + red950: '#360b09', + }, + 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 = { + 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 = { + 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 = { + avatarBgDefault: '$avatarPaletteBg1', + avatarPaletteBg1: foundations.colors.blue100, + avatarPaletteBg2: foundations.colors.cyan100, + avatarPaletteBg3: foundations.colors.green100, + avatarPaletteBg4: foundations.colors.purple200, + avatarPaletteBg5: foundations.colors.yellow200, + avatarPaletteText1: foundations.colors.blue800, + avatarPaletteText2: foundations.colors.cyan800, + avatarPaletteText3: foundations.colors.green800, + avatarPaletteText4: foundations.colors.purple800, + avatarPaletteText5: foundations.colors.yellow800, + avatarTextDefault: '$avatarPaletteText1', + 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.5)', + 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: '$colorAccentError', + badgeBgInverse: '$colorAccentBlack', + badgeBgNeutral: '$colorAccentNeutral', + badgeBgPrimary: '$colorAccentPrimary', + badgeBorder: '$borderCoreOnDark', + badgeText: '$textOnAccent', + badgeTextInverse: '$textPrimary', + borderCoreDefault: foundations.colors.slate200, + 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.slate300, + borderCoreSubtle: foundations.colors.slate100, + borderUtilityDisabled: foundations.colors.slate200, + borderUtilityError: '$colorAccentError', + borderUtilityFocus: '$colorBrand300', + borderUtilitySelected: '$colorAccentPrimary', + borderUtilitySuccess: '$colorAccentSuccess', + borderUtilityWarning: '$colorAccentWarning', + buttonDestructiveBg: '$colorAccentError', + buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0', + buttonDestructiveBorder: '$colorAccentError', + buttonDestructiveText: '$colorAccentError', + buttonDestructiveTextOnAccent: '$textOnAccent', + buttonPrimaryBg: '$colorAccentPrimary', + buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, + buttonPrimaryBorder: '$colorBrand200', + buttonPrimaryText: '$colorAccentPrimary', + buttonPrimaryTextOnAccent: '$textOnAccent', + buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', + buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', + buttonSecondaryBorder: '$borderCoreDefault', + buttonSecondaryText: '$textPrimary', + buttonSecondaryTextOnAccent: '$textPrimary', + chatBgAttachmentIncoming: foundations.colors.slate200, + chatBgAttachmentOutgoing: '$colorBrand200', + chatBgIncoming: foundations.colors.slate100, + chatBgOutgoing: '$colorBrand100', + chatBgTypingIndicator: '$colorAccentNeutral', + chatBorderIncoming: foundations.colors.baseTransparent0, + chatBorderOnChatIncoming: foundations.colors.slate400, + chatBorderOnChatOutgoing: '$colorBrand300', + chatBorderOutgoing: foundations.colors.baseTransparent0, + chatPollProgressFillIncoming: foundations.colors.slate300, + chatPollProgressFillOutgoing: '$colorBrand200', + chatPollProgressTrackIncoming: foundations.colors.slate600, + chatPollProgressTrackOutgoing: '$colorAccentPrimary', + chatReplyIndicatorIncoming: foundations.colors.slate400, + chatReplyIndicatorOutgoing: '$colorBrand400', + chatTextLink: '$textLink', + chatTextMention: '$textLink', + chatTextMessage: '$textPrimary', + chatTextReaction: '$textSecondary', + chatTextSystem: '$textSecondary', + chatTextTimestamp: '$textTertiary', + chatTextUsername: '$textSecondary', + chatThreadConnectorIncoming: foundations.colors.slate200, + chatThreadConnectorOutgoing: '$chatBgOutgoing', + chatWaveformBar: '$borderCoreOpacity25', + chatWaveformBarPlaying: '$colorAccentPrimary', + colorAccentBlack: foundations.colors.baseBlack, + colorAccentError: foundations.colors.red500, + colorAccentNeutral: foundations.colors.slate500, + colorAccentPrimary: '$colorBrand500', + colorAccentSuccess: foundations.colors.green500, + colorAccentWarning: foundations.colors.yellow600, + colorBrand50: foundations.colors.blue50, + colorBrand100: foundations.colors.blue100, + colorBrand200: foundations.colors.blue200, + colorBrand300: foundations.colors.blue300, + colorBrand400: foundations.colors.blue400, + colorBrand500: foundations.colors.blue500, + colorBrand600: foundations.colors.blue600, + colorBrand700: foundations.colors.blue700, + colorBrand800: foundations.colors.blue800, + colorBrand900: foundations.colors.blue900, + colorBrand950: foundations.colors.blue950, + composerBg: '$backgroundElevationElevation1', + controlPlayControlBg: '$backgroundElevationElevation1', + controlPlayControlBgInverse: '$colorAccentBlack', + controlPlayControlBorder: '$borderCoreDefault', + controlPlayControlIcon: '$textPrimary', + controlPlayControlIconInverse: '$textOnAccent', + controlProgressBarFill: foundations.colors.slate200, + controlProgressBarTrack: foundations.colors.slate500, + controlRadiocheckBg: foundations.colors.baseTransparent0, + controlRadiocheckBgSelected: '$colorAccentPrimary', + controlRadiocheckBorder: '$borderCoreDefault', + controlRadiocheckIconSelected: '$textInverse', + controlRemoveControlBg: '$colorAccentBlack', + controlRemoveControlBorder: '$borderCoreOnDark', + controlRemoveControlIcon: '$textOnAccent', + controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', + controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', + controlToggleSwitchBgSelected: '$colorAccentPrimary', + controlToggleSwitchKnob: '$backgroundElevationElevation4', + inputBorderDefault: '$borderCoreDefault', + inputBorderFocus: '$borderUtilityFocus', + inputBorderHover: '$borderCoreStrong', + inputSendIcon: '$colorAccentPrimary', + inputSendIconDisabled: '$textDisabled', + inputTextDefault: '$textPrimary', + inputTextDisabled: '$textDisabled', + inputTextIcon: '$textTertiary', + inputTextPlaceholder: '$textTertiary', + presenceBgOffline: '$colorAccentNeutral', + presenceBgOnline: '$colorAccentSuccess', + presenceBorder: '$borderCoreOnDark', + reactionBg: '$backgroundElevationElevation1', + reactionBorder: '$borderCoreDefault', + reactionEmoji: '$textPrimary', + reactionText: '$textPrimary', + systemBgBlur: 'rgba(255, 255, 255, 0.01)', + systemCaret: '$colorAccentPrimary', + systemScrollbar: 'rgba(0, 0, 0, 0.5)', + systemText: foundations.colors.baseBlack, + textDisabled: foundations.colors.slate400, + textInverse: foundations.colors.baseWhite, + textLink: '$colorAccentPrimary', + textOnAccent: foundations.colors.baseWhite, + textPrimary: foundations.colors.slate900, + textSecondary: foundations.colors.slate700, + textTertiary: foundations.colors.slate600, +} as const; diff --git a/package/src/theme/primitives/colors.ts b/package/src/theme/primitives/colors.ts deleted file mode 100644 index 48919f2917..0000000000 --- a/package/src/theme/primitives/colors.ts +++ /dev/null @@ -1,273 +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; -}; - -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; - 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 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, - accent, - text, - state, - presence, - border, - badge, - control, - }; -} - -export const lightColors = { - brand: palette.blue, - 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, - }, - 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 f52105f3a9..0000000000 --- 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 a192a008bf..0000000000 --- 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 6392225230..0000000000 --- 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 9cb3c056db..0000000000 --- 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 0000000000..0e3d5ad7f7 --- /dev/null +++ b/package/src/theme/topologicalResolution.ts @@ -0,0 +1,110 @@ +type ResolveOptions = { + strict?: boolean; + allowDotPath?: boolean; + + /** + * If true, we collect a "dependency-first" evaluation order (a topo order). + * Useful for debugging / precomputing. + */ + collectTopoOrder?: boolean; +}; + +function isPlainObject(value: unknown): value is Record { + return typeof value === 'object' && value !== null && (value as any).constructor === Object; +} + +function getByPath(root: any, path: string): unknown { + const parts = path.split('.').filter(Boolean); + let cur: any = root; + for (const p of parts) { + if (cur == null || (typeof cur !== 'object' && typeof cur !== 'function')) return undefined; + cur = cur[p]; + } + return cur; +} + +/** + * Resolves "$token" references in `dictionary` by performing a DFS: + * deps first, then node — i.e. a topological evaluation. + * + * If collectTopoOrder is enabled, returns the explicit topo evaluation order + * (each token appears after its dependencies). + */ +export function resolveTokenRefsWithTopoEvaluation>( + dictionary: T, + options: ResolveOptions = {}, +): { resolved: T; topoOrder?: string[] } { + const { strict = true, allowDotPath = false, collectTopoOrder = false } = options; + + const resolvedMemo = new Map(); + + // "active DFS stack" for cycle detection + const visiting = new Set(); + + // Optional: explicit "topological evaluation" order + const topoOrder: string[] | undefined = collectTopoOrder ? [] : undefined; + const topoPushed = new Set(); // avoid duplicates in topoOrder + + const resolveValueDeep = (value: unknown): unknown => { + if (typeof value === 'string' && value.startsWith('$')) { + return evaluateTokenByTopoDFS(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 "toposort" part: + * - DFS into dependencies first + * - then memoize the current token + * - optionally push token into topoOrder AFTER its deps are resolved + */ + const evaluateTokenByTopoDFS = (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 = allowDotPath + ? getByPath(dictionary, tokenKeyOrPath) + : (dictionary as any)[tokenKeyOrPath]; + + if (raw === undefined) { + visiting.delete(cacheKey); + if (strict) { + throw new Error(`Unresolved reference: "${originalRef}" (missing "${tokenKeyOrPath}")`); + } + return originalRef; + } + + // DFS: resolve dependencies inside `raw` BEFORE finalizing this token. + const fullyResolved = resolveValueDeep(raw); + + resolvedMemo.set(cacheKey, fullyResolved); + visiting.delete(cacheKey); + + if (topoOrder && !topoPushed.has(cacheKey)) { + topoOrder.push(cacheKey); // deps-first ⇒ topo order + topoPushed.add(cacheKey); + } + + return fullyResolved; + }; + + const resolved = resolveValueDeep(dictionary) as T; + + return { resolved, topoOrder }; +} diff --git a/package/sync-theme.sh b/package/sync-theme.sh new file mode 100755 index 0000000000..3e227d43a9 --- /dev/null +++ b/package/sync-theme.sh @@ -0,0 +1,30 @@ +#!/usr/bin/env bash +set -euo pipefail + +DEST="src/theme" +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 86ed10c83d..0464e38092 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": [ From c0d3ba03a3e511b9fb6777b43cbfc3274e4d1bbf Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Wed, 28 Jan 2026 09:51:21 +0100 Subject: [PATCH 2/9] refactor: clean up topological resolution --- package/src/components/ui/Avatar/Avatar.tsx | 4 +- .../src/components/ui/BadgeNotification.tsx | 4 +- package/src/components/ui/OnlineIndicator.tsx | 4 +- .../src/components/ui/VideoPlayIndicator.tsx | 4 +- .../contexts/themeContext/ThemeContext.tsx | 6 +- package/src/theme/topologicalResolution.ts | 79 +++++-------------- 6 files changed, 28 insertions(+), 73 deletions(-) diff --git a/package/src/components/ui/Avatar/Avatar.tsx b/package/src/components/ui/Avatar/Avatar.tsx index dc4d42bcb7..6a5a9243eb 100644 --- a/package/src/components/ui/Avatar/Avatar.tsx +++ b/package/src/components/ui/Avatar/Avatar.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useState } from 'react'; import { Image, StyleSheet, View } from 'react-native'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; -import { foundations } from '../../../theme'; +import { primitives } from '../../../theme'; export type AvatarProps = { size: 'xs' | 'sm' | 'md' | 'lg'; @@ -76,7 +76,7 @@ const useStyles = () => { }, container: { alignItems: 'center', - borderRadius: foundations.radius.radiusFull, + borderRadius: primitives.radiusMax, justifyContent: 'center', overflow: 'hidden', }, diff --git a/package/src/components/ui/BadgeNotification.tsx b/package/src/components/ui/BadgeNotification.tsx index 1500f6b610..28227262ed 100644 --- a/package/src/components/ui/BadgeNotification.tsx +++ b/package/src/components/ui/BadgeNotification.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import { StyleSheet, Text } from 'react-native'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; -import { foundations, primitives } from '../../theme'; +import { primitives } from '../../theme'; export type BadgeNotificationProps = { type: 'primary' | 'error' | 'neutral'; @@ -63,7 +63,7 @@ const useStyles = () => { textAlign: 'center', paddingHorizontal: primitives.spacingXxs, borderColor: badgeBorder, - borderRadius: foundations.radius.radiusFull, + borderRadius: primitives.radiusMax, }, }), [badgeText, badgeBorder], diff --git a/package/src/components/ui/OnlineIndicator.tsx b/package/src/components/ui/OnlineIndicator.tsx index 157d4c4c87..129aee3dcd 100644 --- a/package/src/components/ui/OnlineIndicator.tsx +++ b/package/src/components/ui/OnlineIndicator.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import { StyleSheet, View } from 'react-native'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; -import { foundations } from '../../theme'; +import { primitives } from '../../theme'; export type OnlineIndicatorProps = { online: boolean; @@ -44,7 +44,7 @@ const useStyles = () => { StyleSheet.create({ indicator: { borderColor: presenceBorder, - borderRadius: foundations.radius.radiusFull, + borderRadius: primitives.radiusMax, }, online: { backgroundColor: presenceBgOnline, diff --git a/package/src/components/ui/VideoPlayIndicator.tsx b/package/src/components/ui/VideoPlayIndicator.tsx index 6edc50cd17..eea69aadce 100644 --- a/package/src/components/ui/VideoPlayIndicator.tsx +++ b/package/src/components/ui/VideoPlayIndicator.tsx @@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native'; import { useTheme } from '../../contexts'; import { NewPlayIcon } from '../../icons/NewPlayIcon'; -import { foundations } from '../../theme'; +import { primitives } from '../../theme'; const sizes = { lg: { @@ -60,7 +60,7 @@ const useStyles = () => { container: { alignItems: 'center', backgroundColor: controlPlayControlBgInverse, - borderRadius: foundations.radius.radiusFull, + borderRadius: primitives.radiusMax, justifyContent: 'center', }, }); diff --git a/package/src/contexts/themeContext/ThemeContext.tsx b/package/src/contexts/themeContext/ThemeContext.tsx index 0b1110b3cb..adb593dfba 100644 --- a/package/src/contexts/themeContext/ThemeContext.tsx +++ b/package/src/contexts/themeContext/ThemeContext.tsx @@ -4,7 +4,7 @@ import merge from 'lodash/merge'; import { defaultTheme, Theme } from './utils/theme'; -import { resolveTokenRefsWithTopoEvaluation } from '../../theme/topologicalResolution'; +import { resolveTokensTopologically } from '../../theme/topologicalResolution'; import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue'; import { isTestEnvironment } from '../utils/isTestEnvironment'; @@ -38,9 +38,7 @@ export const mergeThemes = (params: MergedThemesParams) => { merge(finalTheme, style); } - const { resolved: semantics } = resolveTokenRefsWithTopoEvaluation(finalTheme.semantics, { - collectTopoOrder: true, - }); + const semantics = resolveTokensTopologically(finalTheme.semantics); console.log('TESTTESTTEST: ', { ...finalTheme, semantics }); diff --git a/package/src/theme/topologicalResolution.ts b/package/src/theme/topologicalResolution.ts index 0e3d5ad7f7..e7d3d0f625 100644 --- a/package/src/theme/topologicalResolution.ts +++ b/package/src/theme/topologicalResolution.ts @@ -1,53 +1,21 @@ -type ResolveOptions = { - strict?: boolean; - allowDotPath?: boolean; - - /** - * If true, we collect a "dependency-first" evaluation order (a topo order). - * Useful for debugging / precomputing. - */ - collectTopoOrder?: boolean; +const isPlainObject = (value: unknown): value is Record => { + return typeof value === 'object' && value !== null && value.constructor === Object; }; -function isPlainObject(value: unknown): value is Record { - return typeof value === 'object' && value !== null && (value as any).constructor === Object; -} - -function getByPath(root: any, path: string): unknown { - const parts = path.split('.').filter(Boolean); - let cur: any = root; - for (const p of parts) { - if (cur == null || (typeof cur !== 'object' && typeof cur !== 'function')) return undefined; - cur = cur[p]; - } - return cur; -} - /** - * Resolves "$token" references in `dictionary` by performing a DFS: - * deps first, then node — i.e. a topological evaluation. - * - * If collectTopoOrder is enabled, returns the explicit topo evaluation order - * (each token appears after its dependencies). + * Resolves "$token" references in `dictionary` by performing a DFS. + * deps first, then node - i.e. a topological evaluation. */ -export function resolveTokenRefsWithTopoEvaluation>( - dictionary: T, - options: ResolveOptions = {}, -): { resolved: T; topoOrder?: string[] } { - const { strict = true, allowDotPath = false, collectTopoOrder = false } = options; - +export const resolveTokensTopologically = >(dictionary: T): T => { const resolvedMemo = new Map(); - // "active DFS stack" for cycle detection + // 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(); - // Optional: explicit "topological evaluation" order - const topoOrder: string[] | undefined = collectTopoOrder ? [] : undefined; - const topoPushed = new Set(); // avoid duplicates in topoOrder - const resolveValueDeep = (value: unknown): unknown => { if (typeof value === 'string' && value.startsWith('$')) { - return evaluateTokenByTopoDFS(value.slice(1), value); + return dfs(value.slice(1), value); } if (Array.isArray(value)) return value.map(resolveValueDeep); @@ -62,12 +30,11 @@ export function resolveTokenRefsWithTopoEvaluation }; /** - * This is the "toposort" part: + * This is the topological sort part: * - DFS into dependencies first * - then memoize the current token - * - optionally push token into topoOrder AFTER its deps are resolved */ - const evaluateTokenByTopoDFS = (tokenKeyOrPath: string, originalRef: string): unknown => { + const dfs = (tokenKeyOrPath: string, originalRef: string): unknown => { const cacheKey = tokenKeyOrPath; if (resolvedMemo.has(cacheKey)) return resolvedMemo.get(cacheKey); @@ -78,33 +45,23 @@ export function resolveTokenRefsWithTopoEvaluation visiting.add(cacheKey); - const raw = allowDotPath - ? getByPath(dictionary, tokenKeyOrPath) - : (dictionary as any)[tokenKeyOrPath]; + const raw = dictionary[tokenKeyOrPath]; if (raw === undefined) { - visiting.delete(cacheKey); - if (strict) { - throw new Error(`Unresolved reference: "${originalRef}" (missing "${tokenKeyOrPath}")`); - } - return originalRef; + // is throwing maybe too strict here ? + throw new Error(`Unresolved reference: "${originalRef}" (missing "${tokenKeyOrPath}")`); } - // DFS: resolve dependencies inside `raw` BEFORE finalizing this token. + // 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); - if (topoOrder && !topoPushed.has(cacheKey)) { - topoOrder.push(cacheKey); // deps-first ⇒ topo order - topoPushed.add(cacheKey); - } - return fullyResolved; }; - const resolved = resolveValueDeep(dictionary) as T; - - return { resolved, topoOrder }; -} + return resolveValueDeep(dictionary) as T; +}; From 0dda1118a3a6baa5fb63e665f3cf54174c097ba0 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Wed, 28 Jan 2026 13:54:07 +0100 Subject: [PATCH 3/9] feat: generate types as well --- package/src/theme/StreamTokens.types.ts | 470 ++++++++++++++++++ .../src/theme/dark/StreamTokens.android.ts | 13 +- package/src/theme/dark/StreamTokens.ios.ts | 13 +- package/src/theme/dark/StreamTokens.web.ts | 13 +- .../StreamTokens.android.ts | 13 +- .../high-contrast-light/StreamTokens.ios.ts | 13 +- .../high-contrast-light/StreamTokens.web.ts | 13 +- .../src/theme/light/StreamTokens.android.ts | 13 +- package/src/theme/light/StreamTokens.ios.ts | 13 +- package/src/theme/light/StreamTokens.web.ts | 13 +- package/src/theme/topologicalResolution.ts | 6 +- 11 files changed, 537 insertions(+), 56 deletions(-) create mode 100644 package/src/theme/StreamTokens.types.ts diff --git a/package/src/theme/StreamTokens.types.ts b/package/src/theme/StreamTokens.types.ts new file mode 100644 index 0000000000..a57bd82099 --- /dev/null +++ b/package/src/theme/StreamTokens.types.ts @@ -0,0 +1,470 @@ +// 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; + blue200: ColorValue; + blue300: ColorValue; + blue400: ColorValue; + blue50: ColorValue; + blue500: ColorValue; + blue600: ColorValue; + blue700: ColorValue; + blue800: ColorValue; + blue900: ColorValue; + blue950: ColorValue; + cyan100: ColorValue; + cyan200: ColorValue; + cyan300: ColorValue; + cyan400: ColorValue; + cyan50: ColorValue; + cyan500: ColorValue; + cyan600: ColorValue; + cyan700: ColorValue; + cyan800: ColorValue; + cyan900: ColorValue; + cyan950: ColorValue; + green100: ColorValue; + green200: ColorValue; + green300: ColorValue; + green400: ColorValue; + green50: ColorValue; + green500: ColorValue; + green600: ColorValue; + green700: ColorValue; + green800: ColorValue; + green900: ColorValue; + green950: ColorValue; + neutral100: ColorValue; + neutral200: ColorValue; + neutral300: ColorValue; + neutral400: ColorValue; + neutral50: ColorValue; + neutral500: ColorValue; + neutral600: ColorValue; + neutral700: ColorValue; + neutral800: ColorValue; + neutral900: ColorValue; + neutral950: ColorValue; + purple100: ColorValue; + purple200: ColorValue; + purple300: ColorValue; + purple400: ColorValue; + purple50: ColorValue; + purple500: ColorValue; + purple600: ColorValue; + purple700: ColorValue; + purple800: ColorValue; + purple900: ColorValue; + purple950: ColorValue; + red100: ColorValue; + red200: ColorValue; + red300: ColorValue; + red400: ColorValue; + red50: ColorValue; + red500: ColorValue; + red600: ColorValue; + red700: ColorValue; + red800: ColorValue; + red900: ColorValue; + red950: ColorValue; + slate100: ColorValue; + slate200: ColorValue; + slate300: ColorValue; + slate400: ColorValue; + slate50: ColorValue; + slate500: ColorValue; + slate600: ColorValue; + slate700: ColorValue; + slate800: ColorValue; + slate900: ColorValue; + slate950: ColorValue; + yellow100: ColorValue; + yellow200: ColorValue; + yellow300: ColorValue; + yellow400: ColorValue; + yellow50: ColorValue; + yellow500: ColorValue; + yellow600: ColorValue; + yellow700: ColorValue; + yellow800: ColorValue; + yellow900: ColorValue; + yellow950: 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 { + avatarBgDefault: ColorValue; + avatarPaletteBg1: ColorValue; + avatarPaletteBg2: ColorValue; + avatarPaletteBg3: ColorValue; + avatarPaletteBg4: ColorValue; + avatarPaletteBg5: ColorValue; + avatarPaletteText1: ColorValue; + avatarPaletteText2: ColorValue; + avatarPaletteText3: ColorValue; + avatarPaletteText4: ColorValue; + avatarPaletteText5: ColorValue; + avatarTextDefault: 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; + 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; + colorAccentBlack: ColorValue; + colorAccentError: ColorValue; + colorAccentNeutral: ColorValue; + colorAccentPrimary: ColorValue; + colorAccentSuccess: ColorValue; + colorAccentWarning: ColorValue; + colorBrand100: ColorValue; + colorBrand200: ColorValue; + colorBrand300: ColorValue; + colorBrand400: ColorValue; + colorBrand50: ColorValue; + colorBrand500: ColorValue; + colorBrand600: ColorValue; + colorBrand700: ColorValue; + colorBrand800: ColorValue; + colorBrand900: ColorValue; + colorBrand950: 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/dark/StreamTokens.android.ts b/package/src/theme/dark/StreamTokens.android.ts index 4b11f556b8..0d0f7ea2fd 100644 --- a/package/src/theme/dark/StreamTokens.android.ts +++ b/package/src/theme/dark/StreamTokens.android.ts @@ -1,7 +1,8 @@ -// StreamTokens.android.ts -// (generated) platform=android theme=dark +// This file is autogenerated. Please do not edit it. -export const foundations = { +import type { IStreamTokens } from '../StreamTokens.types'; + +export const foundations: IStreamTokens['foundations'] = { colors: { baseBlack: '#000000', baseWhite: '#ffffff', @@ -202,7 +203,7 @@ export const foundations = { }, }; -export const primitives = { +export const primitives: IStreamTokens['primitives'] = { darkElevation0: { elevation: 0, shadowColor: 'rgba(0,0,0,0)', @@ -343,7 +344,7 @@ export const primitives = { typographyLineHeightTight: foundations.typography.lineHeightLineHeight16, } as const; -export const components = { +export const components: IStreamTokens['components'] = { buttonHitTargetMinHeight: foundations.layout.size48, buttonHitTargetMinWidth: foundations.layout.size48, buttonPaddingXIconOnlyLg: 14, @@ -382,7 +383,7 @@ export const components = { messageBubbleRadiusTail: primitives.radiusNone, } as const; -export const semantics = { +export const semantics: IStreamTokens['semantics'] = { avatarBgDefault: '$avatarPaletteBg1', avatarPaletteBg1: foundations.colors.blue800, avatarPaletteBg2: foundations.colors.cyan800, diff --git a/package/src/theme/dark/StreamTokens.ios.ts b/package/src/theme/dark/StreamTokens.ios.ts index 5cac3346a1..f16ba52fe7 100644 --- a/package/src/theme/dark/StreamTokens.ios.ts +++ b/package/src/theme/dark/StreamTokens.ios.ts @@ -1,7 +1,8 @@ -// StreamTokens.ios.ts -// (generated) platform=ios theme=dark +// This file is autogenerated. Please do not edit it. -export const foundations = { +import type { IStreamTokens } from '../StreamTokens.types'; + +export const foundations: IStreamTokens['foundations'] = { colors: { baseBlack: '#000000', baseWhite: '#ffffff', @@ -202,7 +203,7 @@ export const foundations = { }, }; -export const primitives = { +export const primitives: IStreamTokens['primitives'] = { darkElevation0: { elevation: 0, shadowColor: 'rgba(0,0,0,0)', @@ -343,7 +344,7 @@ export const primitives = { typographyLineHeightTight: foundations.typography.lineHeightLineHeight16, } as const; -export const components = { +export const components: IStreamTokens['components'] = { buttonHitTargetMinHeight: foundations.layout.size48, buttonHitTargetMinWidth: foundations.layout.size48, buttonPaddingXIconOnlyLg: 14, @@ -382,7 +383,7 @@ export const components = { messageBubbleRadiusTail: primitives.radiusNone, } as const; -export const semantics = { +export const semantics: IStreamTokens['semantics'] = { avatarBgDefault: '$avatarPaletteBg1', avatarPaletteBg1: foundations.colors.blue800, avatarPaletteBg2: foundations.colors.cyan800, diff --git a/package/src/theme/dark/StreamTokens.web.ts b/package/src/theme/dark/StreamTokens.web.ts index 18537b5345..4def945358 100644 --- a/package/src/theme/dark/StreamTokens.web.ts +++ b/package/src/theme/dark/StreamTokens.web.ts @@ -1,7 +1,8 @@ -// StreamTokens.web.ts -// (generated) platform=web theme=dark +// This file is autogenerated. Please do not edit it. -export const foundations = { +import type { IStreamTokens } from '../StreamTokens.types'; + +export const foundations: IStreamTokens['foundations'] = { colors: { baseBlack: '#000000', baseWhite: '#ffffff', @@ -202,7 +203,7 @@ export const foundations = { }, }; -export const primitives = { +export const primitives: IStreamTokens['primitives'] = { darkElevation0: { elevation: 0, shadowColor: 'rgba(0,0,0,0)', @@ -343,7 +344,7 @@ export const primitives = { typographyLineHeightTight: foundations.typography.lineHeightLineHeight16, } as const; -export const components = { +export const components: IStreamTokens['components'] = { buttonHitTargetMinHeight: foundations.layout.size48, buttonHitTargetMinWidth: foundations.layout.size48, buttonPaddingXIconOnlyLg: 14, @@ -382,7 +383,7 @@ export const components = { messageBubbleRadiusTail: primitives.radiusNone, } as const; -export const semantics = { +export const semantics: IStreamTokens['semantics'] = { avatarBgDefault: '$avatarPaletteBg1', avatarPaletteBg1: foundations.colors.blue800, avatarPaletteBg2: foundations.colors.cyan800, diff --git a/package/src/theme/high-contrast-light/StreamTokens.android.ts b/package/src/theme/high-contrast-light/StreamTokens.android.ts index fc9aa28169..e950b9eab3 100644 --- a/package/src/theme/high-contrast-light/StreamTokens.android.ts +++ b/package/src/theme/high-contrast-light/StreamTokens.android.ts @@ -1,7 +1,8 @@ -// StreamTokens.android.ts -// (generated) platform=android theme=high-contrast-light +// This file is autogenerated. Please do not edit it. -export const foundations = { +import type { IStreamTokens } from '../StreamTokens.types'; + +export const foundations: IStreamTokens['foundations'] = { colors: { baseBlack: '#000000', baseWhite: '#ffffff', @@ -202,7 +203,7 @@ export const foundations = { }, }; -export const primitives = { +export const primitives: IStreamTokens['primitives'] = { darkElevation0: { elevation: 0, shadowColor: 'rgba(0,0,0,0)', @@ -343,7 +344,7 @@ export const primitives = { typographyLineHeightTight: foundations.typography.lineHeightLineHeight16, } as const; -export const components = { +export const components: IStreamTokens['components'] = { buttonHitTargetMinHeight: foundations.layout.size48, buttonHitTargetMinWidth: foundations.layout.size48, buttonPaddingXIconOnlyLg: 14, @@ -382,7 +383,7 @@ export const components = { messageBubbleRadiusTail: primitives.radiusNone, } as const; -export const semantics = { +export const semantics: IStreamTokens['semantics'] = { avatarBgDefault: '$avatarPaletteBg1', avatarPaletteBg1: foundations.colors.blue900, avatarPaletteBg2: foundations.colors.cyan900, diff --git a/package/src/theme/high-contrast-light/StreamTokens.ios.ts b/package/src/theme/high-contrast-light/StreamTokens.ios.ts index 1351d6313f..dbca12a742 100644 --- a/package/src/theme/high-contrast-light/StreamTokens.ios.ts +++ b/package/src/theme/high-contrast-light/StreamTokens.ios.ts @@ -1,7 +1,8 @@ -// StreamTokens.ios.ts -// (generated) platform=ios theme=high-contrast-light +// This file is autogenerated. Please do not edit it. -export const foundations = { +import type { IStreamTokens } from '../StreamTokens.types'; + +export const foundations: IStreamTokens['foundations'] = { colors: { baseBlack: '#000000', baseWhite: '#ffffff', @@ -202,7 +203,7 @@ export const foundations = { }, }; -export const primitives = { +export const primitives: IStreamTokens['primitives'] = { darkElevation0: { elevation: 0, shadowColor: 'rgba(0,0,0,0)', @@ -343,7 +344,7 @@ export const primitives = { typographyLineHeightTight: foundations.typography.lineHeightLineHeight16, } as const; -export const components = { +export const components: IStreamTokens['components'] = { buttonHitTargetMinHeight: foundations.layout.size48, buttonHitTargetMinWidth: foundations.layout.size48, buttonPaddingXIconOnlyLg: 14, @@ -382,7 +383,7 @@ export const components = { messageBubbleRadiusTail: primitives.radiusNone, } as const; -export const semantics = { +export const semantics: IStreamTokens['semantics'] = { avatarBgDefault: '$avatarPaletteBg1', avatarPaletteBg1: foundations.colors.blue900, avatarPaletteBg2: foundations.colors.cyan900, diff --git a/package/src/theme/high-contrast-light/StreamTokens.web.ts b/package/src/theme/high-contrast-light/StreamTokens.web.ts index 62c21e4b08..bf37c0f4de 100644 --- a/package/src/theme/high-contrast-light/StreamTokens.web.ts +++ b/package/src/theme/high-contrast-light/StreamTokens.web.ts @@ -1,7 +1,8 @@ -// StreamTokens.web.ts -// (generated) platform=web theme=high-contrast-light +// This file is autogenerated. Please do not edit it. -export const foundations = { +import type { IStreamTokens } from '../StreamTokens.types'; + +export const foundations: IStreamTokens['foundations'] = { colors: { baseBlack: '#000000', baseWhite: '#ffffff', @@ -202,7 +203,7 @@ export const foundations = { }, }; -export const primitives = { +export const primitives: IStreamTokens['primitives'] = { darkElevation0: { elevation: 0, shadowColor: 'rgba(0,0,0,0)', @@ -343,7 +344,7 @@ export const primitives = { typographyLineHeightTight: foundations.typography.lineHeightLineHeight16, } as const; -export const components = { +export const components: IStreamTokens['components'] = { buttonHitTargetMinHeight: foundations.layout.size48, buttonHitTargetMinWidth: foundations.layout.size48, buttonPaddingXIconOnlyLg: 14, @@ -382,7 +383,7 @@ export const components = { messageBubbleRadiusTail: primitives.radiusNone, } as const; -export const semantics = { +export const semantics: IStreamTokens['semantics'] = { avatarBgDefault: '$avatarPaletteBg1', avatarPaletteBg1: foundations.colors.blue900, avatarPaletteBg2: foundations.colors.cyan900, diff --git a/package/src/theme/light/StreamTokens.android.ts b/package/src/theme/light/StreamTokens.android.ts index 6c3328a9e1..8f1bcc3e71 100644 --- a/package/src/theme/light/StreamTokens.android.ts +++ b/package/src/theme/light/StreamTokens.android.ts @@ -1,7 +1,8 @@ -// StreamTokens.android.ts -// (generated) platform=android theme=light +// This file is autogenerated. Please do not edit it. -export const foundations = { +import type { IStreamTokens } from '../StreamTokens.types'; + +export const foundations: IStreamTokens['foundations'] = { colors: { baseBlack: '#000000', baseWhite: '#ffffff', @@ -202,7 +203,7 @@ export const foundations = { }, }; -export const primitives = { +export const primitives: IStreamTokens['primitives'] = { darkElevation0: { elevation: 0, shadowColor: 'rgba(0,0,0,0)', @@ -343,7 +344,7 @@ export const primitives = { typographyLineHeightTight: foundations.typography.lineHeightLineHeight16, } as const; -export const components = { +export const components: IStreamTokens['components'] = { buttonHitTargetMinHeight: foundations.layout.size48, buttonHitTargetMinWidth: foundations.layout.size48, buttonPaddingXIconOnlyLg: 14, @@ -382,7 +383,7 @@ export const components = { messageBubbleRadiusTail: primitives.radiusNone, } as const; -export const semantics = { +export const semantics: IStreamTokens['semantics'] = { avatarBgDefault: '$avatarPaletteBg1', avatarPaletteBg1: foundations.colors.blue100, avatarPaletteBg2: foundations.colors.cyan100, diff --git a/package/src/theme/light/StreamTokens.ios.ts b/package/src/theme/light/StreamTokens.ios.ts index cabc8802cc..d0fdbea0bb 100644 --- a/package/src/theme/light/StreamTokens.ios.ts +++ b/package/src/theme/light/StreamTokens.ios.ts @@ -1,7 +1,8 @@ -// StreamTokens.ios.ts -// (generated) platform=ios theme=light +// This file is autogenerated. Please do not edit it. -export const foundations = { +import type { IStreamTokens } from '../StreamTokens.types'; + +export const foundations: IStreamTokens['foundations'] = { colors: { baseBlack: '#000000', baseWhite: '#ffffff', @@ -202,7 +203,7 @@ export const foundations = { }, }; -export const primitives = { +export const primitives: IStreamTokens['primitives'] = { darkElevation0: { elevation: 0, shadowColor: 'rgba(0,0,0,0)', @@ -343,7 +344,7 @@ export const primitives = { typographyLineHeightTight: foundations.typography.lineHeightLineHeight16, } as const; -export const components = { +export const components: IStreamTokens['components'] = { buttonHitTargetMinHeight: foundations.layout.size48, buttonHitTargetMinWidth: foundations.layout.size48, buttonPaddingXIconOnlyLg: 14, @@ -382,7 +383,7 @@ export const components = { messageBubbleRadiusTail: primitives.radiusNone, } as const; -export const semantics = { +export const semantics: IStreamTokens['semantics'] = { avatarBgDefault: '$avatarPaletteBg1', avatarPaletteBg1: foundations.colors.blue100, avatarPaletteBg2: foundations.colors.cyan100, diff --git a/package/src/theme/light/StreamTokens.web.ts b/package/src/theme/light/StreamTokens.web.ts index 71552bc485..e829a80f01 100644 --- a/package/src/theme/light/StreamTokens.web.ts +++ b/package/src/theme/light/StreamTokens.web.ts @@ -1,7 +1,8 @@ -// StreamTokens.web.ts -// (generated) platform=web theme=light +// This file is autogenerated. Please do not edit it. -export const foundations = { +import type { IStreamTokens } from '../StreamTokens.types'; + +export const foundations: IStreamTokens['foundations'] = { colors: { baseBlack: '#000000', baseWhite: '#ffffff', @@ -202,7 +203,7 @@ export const foundations = { }, }; -export const primitives = { +export const primitives: IStreamTokens['primitives'] = { darkElevation0: { elevation: 0, shadowColor: 'rgba(0,0,0,0)', @@ -343,7 +344,7 @@ export const primitives = { typographyLineHeightTight: foundations.typography.lineHeightLineHeight16, } as const; -export const components = { +export const components: IStreamTokens['components'] = { buttonHitTargetMinHeight: foundations.layout.size48, buttonHitTargetMinWidth: foundations.layout.size48, buttonPaddingXIconOnlyLg: 14, @@ -382,7 +383,7 @@ export const components = { messageBubbleRadiusTail: primitives.radiusNone, } as const; -export const semantics = { +export const semantics: IStreamTokens['semantics'] = { avatarBgDefault: '$avatarPaletteBg1', avatarPaletteBg1: foundations.colors.blue100, avatarPaletteBg2: foundations.colors.cyan100, diff --git a/package/src/theme/topologicalResolution.ts b/package/src/theme/topologicalResolution.ts index e7d3d0f625..384d7061f0 100644 --- a/package/src/theme/topologicalResolution.ts +++ b/package/src/theme/topologicalResolution.ts @@ -1,3 +1,5 @@ +import { Theme } from '../contexts'; + const isPlainObject = (value: unknown): value is Record => { return typeof value === 'object' && value !== null && value.constructor === Object; }; @@ -6,7 +8,7 @@ const isPlainObject = (value: unknown): value is Record => { * Resolves "$token" references in `dictionary` by performing a DFS. * deps first, then node - i.e. a topological evaluation. */ -export const resolveTokensTopologically = >(dictionary: T): T => { +export const resolveTokensTopologically = (dictionary: T): T => { const resolvedMemo = new Map(); // Used purely for cycle detection (even though we do not expect @@ -45,7 +47,7 @@ export const resolveTokensTopologically = >(di visiting.add(cacheKey); - const raw = dictionary[tokenKeyOrPath]; + const raw = dictionary[tokenKeyOrPath as keyof Theme['semantics']]; if (raw === undefined) { // is throwing maybe too strict here ? From 3a9057abc670e64fc11f3da8340ce48853750aa6 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Wed, 28 Jan 2026 13:59:22 +0100 Subject: [PATCH 4/9] chore: update with new design tokens --- package/src/theme/StreamTokens.types.ts | 74 ++-- .../src/theme/dark/StreamTokens.android.ts | 294 ++++++++-------- package/src/theme/dark/StreamTokens.ios.ts | 294 ++++++++-------- package/src/theme/dark/StreamTokens.web.ts | 294 ++++++++-------- .../StreamTokens.android.ts | 324 ++++++++++-------- .../high-contrast-light/StreamTokens.ios.ts | 324 ++++++++++-------- .../high-contrast-light/StreamTokens.web.ts | 324 ++++++++++-------- .../src/theme/light/StreamTokens.android.ts | 316 +++++++++-------- package/src/theme/light/StreamTokens.ios.ts | 316 +++++++++-------- package/src/theme/light/StreamTokens.web.ts | 316 +++++++++-------- 10 files changed, 1558 insertions(+), 1318 deletions(-) diff --git a/package/src/theme/StreamTokens.types.ts b/package/src/theme/StreamTokens.types.ts index a57bd82099..8375e80891 100644 --- a/package/src/theme/StreamTokens.types.ts +++ b/package/src/theme/StreamTokens.types.ts @@ -17,6 +17,7 @@ export interface FoundationsColors { baseTransparentWhite70: ColorValue; baseWhite: ColorValue; blue100: ColorValue; + blue150: ColorValue; blue200: ColorValue; blue300: ColorValue; blue400: ColorValue; @@ -26,8 +27,8 @@ export interface FoundationsColors { blue700: ColorValue; blue800: ColorValue; blue900: ColorValue; - blue950: ColorValue; cyan100: ColorValue; + cyan150: ColorValue; cyan200: ColorValue; cyan300: ColorValue; cyan400: ColorValue; @@ -37,8 +38,8 @@ export interface FoundationsColors { cyan700: ColorValue; cyan800: ColorValue; cyan900: ColorValue; - cyan950: ColorValue; green100: ColorValue; + green150: ColorValue; green200: ColorValue; green300: ColorValue; green400: ColorValue; @@ -48,8 +49,19 @@ export interface FoundationsColors { green700: ColorValue; green800: ColorValue; green900: ColorValue; - green950: 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; @@ -59,8 +71,8 @@ export interface FoundationsColors { neutral700: ColorValue; neutral800: ColorValue; neutral900: ColorValue; - neutral950: ColorValue; purple100: ColorValue; + purple150: ColorValue; purple200: ColorValue; purple300: ColorValue; purple400: ColorValue; @@ -70,8 +82,8 @@ export interface FoundationsColors { purple700: ColorValue; purple800: ColorValue; purple900: ColorValue; - purple950: ColorValue; red100: ColorValue; + red150: ColorValue; red200: ColorValue; red300: ColorValue; red400: ColorValue; @@ -81,8 +93,8 @@ export interface FoundationsColors { red700: ColorValue; red800: ColorValue; red900: ColorValue; - red950: ColorValue; slate100: ColorValue; + slate150: ColorValue; slate200: ColorValue; slate300: ColorValue; slate400: ColorValue; @@ -92,8 +104,19 @@ export interface FoundationsColors { slate700: ColorValue; slate800: ColorValue; slate900: ColorValue; - slate950: 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; @@ -103,7 +126,6 @@ export interface FoundationsColors { yellow700: ColorValue; yellow800: ColorValue; yellow900: ColorValue; - yellow950: ColorValue; } export interface FoundationsLayout { @@ -301,7 +323,14 @@ export interface ChatPrimitives { } 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; @@ -313,6 +342,7 @@ export interface ChatSemantics { avatarPaletteText4: ColorValue; avatarPaletteText5: ColorValue; avatarTextDefault: ColorValue; + avatarTextPlaceholder: ColorValue; backgroundCoreApp: ColorValue; backgroundCoreDisabled: ColorValue; backgroundCoreHover: ColorValue; @@ -349,6 +379,17 @@ export interface ChatSemantics { 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; @@ -390,23 +431,6 @@ export interface ChatSemantics { chatThreadConnectorOutgoing: ColorValue; chatWaveformBar: ColorValue; chatWaveformBarPlaying: ColorValue; - colorAccentBlack: ColorValue; - colorAccentError: ColorValue; - colorAccentNeutral: ColorValue; - colorAccentPrimary: ColorValue; - colorAccentSuccess: ColorValue; - colorAccentWarning: ColorValue; - colorBrand100: ColorValue; - colorBrand200: ColorValue; - colorBrand300: ColorValue; - colorBrand400: ColorValue; - colorBrand50: ColorValue; - colorBrand500: ColorValue; - colorBrand600: ColorValue; - colorBrand700: ColorValue; - colorBrand800: ColorValue; - colorBrand900: ColorValue; - colorBrand950: ColorValue; composerBg: ColorValue; controlPlayControlBg: ColorValue; controlPlayControlBgInverse: ColorValue; diff --git a/package/src/theme/dark/StreamTokens.android.ts b/package/src/theme/dark/StreamTokens.android.ts index 0d0f7ea2fd..c9cee27f17 100644 --- a/package/src/theme/dark/StreamTokens.android.ts +++ b/package/src/theme/dark/StreamTokens.android.ts @@ -4,8 +4,6 @@ import type { IStreamTokens } from '../StreamTokens.types'; export const foundations: IStreamTokens['foundations'] = { colors: { - baseBlack: '#000000', - baseWhite: '#ffffff', baseTransparent0: 'rgba(255, 255, 255, 0)', baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)', baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)', @@ -13,94 +11,118 @@ export const foundations: IStreamTokens['foundations'] = { baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)', baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)', baseTransparentBlack70: 'rgba(0, 0, 0, 0.7)', - slate50: '#fafbfc', - slate100: '#f2f4f6', - slate200: '#e2e6ea', - slate300: '#d0d5da', - slate400: '#b8bec4', - slate500: '#9ea4aa', - slate600: '#838990', - slate700: '#6a7077', - slate800: '#50565d', - slate900: '#384047', - slate950: '#1e252b', - neutral50: '#f7f7f7', - neutral100: '#ededed', - neutral200: '#d9d9d9', - neutral300: '#c1c1c1', - neutral400: '#a3a3a3', - neutral500: '#7f7f7f', - neutral600: '#636363', - neutral700: '#4a4a4a', - neutral800: '#383838', - neutral900: '#262626', - neutral950: '#151515', - blue50: '#ebf3ff', - blue100: '#d2e3ff', - blue200: '#a6c4ff', - blue300: '#7aa7ff', - blue400: '#4e8bff', + 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: '#0052ce', - blue700: '#0042a3', - blue800: '#003179', - blue900: '#001f4f', - blue950: '#001025', - cyan50: '#f0fcfe', - cyan100: '#d7f7fb', - cyan200: '#bdf1f8', - cyan300: '#a3ecf4', - cyan400: '#89e6f1', - cyan500: '#69e5f6', - cyan600: '#3ec9d9', - cyan700: '#28a8b5', - cyan800: '#1c8791', - cyan900: '#125f66', - cyan950: '#0b3d44', - green50: '#e8fff5', - green100: '#c9fce7', - green200: '#a9f8d9', - green300: '#88f2ca', - green400: '#59e9b5', - green500: '#00e2a1', - green600: '#00b681', - green700: '#008d64', - green800: '#006548', - green900: '#003d2b', - green950: '#002319', - purple50: '#f5effe', - purple100: '#ebdefd', - purple200: '#d8bffc', - purple300: '#c79ffc', - purple400: '#b98af9', - purple500: '#b38af8', - purple600: '#996ce3', - purple700: '#7f55c7', - purple800: '#6640ab', - purple900: '#4d2c8f', - purple950: '#351c6b', - yellow50: '#fff9e5', - yellow100: '#fff1c2', - yellow200: '#ffe8a0', - yellow300: '#ffde7d', - yellow400: '#ffd65a', - yellow500: '#ffd233', - yellow600: '#e6b400', - yellow700: '#c59600', - yellow800: '#9f7700', - yellow900: '#7a5a00', - yellow950: '#4f3900', - red50: '#fcebea', - red100: '#f8cfcd', - red200: '#f3b3b0', - red300: '#ed958f', - red400: '#e6756c', - red500: '#d92f26', - red600: '#b9261f', - red700: '#98201a', - red800: '#761915', - red900: '#54120f', - red950: '#360b09', + 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, @@ -384,7 +406,14 @@ export const components: IStreamTokens['components'] = { } 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, @@ -396,6 +425,7 @@ export const semantics: IStreamTokens['semantics'] = { 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)', @@ -412,10 +442,10 @@ export const semantics: IStreamTokens['semantics'] = { backgroundElevationElevation3: foundations.colors.neutral700, backgroundElevationElevation4: foundations.colors.neutral600, badgeBgDefault: '$backgroundElevationElevation1', - badgeBgError: '$colorAccentError', - badgeBgInverse: '$colorAccentBlack', - badgeBgNeutral: '$colorAccentNeutral', - badgeBgPrimary: '$colorAccentPrimary', + badgeBgError: '$accentError', + badgeBgInverse: '$accentBlack', + badgeBgNeutral: '$accentNeutral', + badgeBgPrimary: '$accentPrimary', badgeBorder: '$borderCoreOnDark', badgeText: '$textOnAccent', badgeTextInverse: '$textPrimary', @@ -427,20 +457,31 @@ export const semantics: IStreamTokens['semantics'] = { borderCoreStrong: foundations.colors.neutral600, borderCoreSubtle: foundations.colors.neutral800, borderUtilityDisabled: foundations.colors.neutral800, - borderUtilityError: '$colorAccentError', - borderUtilityFocus: '$colorBrand700', - borderUtilitySelected: '$colorAccentPrimary', - borderUtilitySuccess: '$colorAccentSuccess', - borderUtilityWarning: '$colorAccentWarning', - buttonDestructiveBg: '$colorAccentError', + 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: '$colorAccentError', - buttonDestructiveText: '$colorAccentError', + buttonDestructiveBorder: '$accentError', + buttonDestructiveText: '$accentError', buttonDestructiveTextOnAccent: '$textOnAccent', - buttonPrimaryBg: '$colorAccentPrimary', + buttonPrimaryBg: '$accentPrimary', buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, - buttonPrimaryBorder: '$colorBrand200', - buttonPrimaryText: '$colorAccentPrimary', + buttonPrimaryBorder: '$brand200', + buttonPrimaryText: '$accentPrimary', buttonPrimaryTextOnAccent: '$textOnAccent', buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', @@ -448,20 +489,20 @@ export const semantics: IStreamTokens['semantics'] = { buttonSecondaryText: '$textPrimary', buttonSecondaryTextOnAccent: '$textPrimary', chatBgAttachmentIncoming: foundations.colors.neutral700, - chatBgAttachmentOutgoing: '$colorBrand300', + chatBgAttachmentOutgoing: '$brand300', chatBgIncoming: foundations.colors.neutral800, - chatBgOutgoing: '$colorBrand200', - chatBgTypingIndicator: '$colorAccentNeutral', + chatBgOutgoing: '$brand200', + chatBgTypingIndicator: '$accentNeutral', chatBorderIncoming: foundations.colors.baseTransparent0, chatBorderOnChatIncoming: foundations.colors.slate600, - chatBorderOnChatOutgoing: '$colorBrand600', + chatBorderOnChatOutgoing: '$brand600', chatBorderOutgoing: foundations.colors.baseTransparent0, chatPollProgressFillIncoming: foundations.colors.neutral600, - chatPollProgressFillOutgoing: '$colorBrand400', + chatPollProgressFillOutgoing: '$brand400', chatPollProgressTrackIncoming: foundations.colors.baseWhite, chatPollProgressTrackOutgoing: foundations.colors.baseWhite, chatReplyIndicatorIncoming: foundations.colors.neutral500, - chatReplyIndicatorOutgoing: '$colorBrand700', + chatReplyIndicatorOutgoing: '$brand700', chatTextLink: '$textLink', chatTextMention: '$textLink', chatTextMessage: '$textPrimary', @@ -472,27 +513,10 @@ export const semantics: IStreamTokens['semantics'] = { chatThreadConnectorIncoming: '$chatBgIncoming', chatThreadConnectorOutgoing: '$chatBgOutgoing', chatWaveformBar: '$borderCoreOpacity25', - chatWaveformBarPlaying: '$colorAccentPrimary', - colorAccentBlack: foundations.colors.baseBlack, - colorAccentError: foundations.colors.red400, - colorAccentNeutral: foundations.colors.neutral600, - colorAccentPrimary: '$colorBrand600', - colorAccentSuccess: foundations.colors.green400, - colorAccentWarning: foundations.colors.yellow400, - colorBrand50: foundations.colors.blue950, - colorBrand100: foundations.colors.blue900, - colorBrand200: foundations.colors.blue800, - colorBrand300: foundations.colors.blue700, - colorBrand400: foundations.colors.blue600, - colorBrand500: foundations.colors.blue500, - colorBrand600: foundations.colors.blue400, - colorBrand700: foundations.colors.blue300, - colorBrand800: foundations.colors.blue200, - colorBrand900: foundations.colors.blue100, - colorBrand950: foundations.colors.blue50, + chatWaveformBarPlaying: '$accentPrimary', composerBg: '$backgroundElevationElevation1', controlPlayControlBg: '$backgroundElevationElevation1', - controlPlayControlBgInverse: '$colorAccentBlack', + controlPlayControlBgInverse: '$accentBlack', controlPlayControlBorder: '$borderCoreDefault', controlPlayControlIcon: '$textPrimary', controlPlayControlIconInverse: '$textOnAccent', @@ -502,24 +526,24 @@ export const semantics: IStreamTokens['semantics'] = { controlRadiocheckBgSelected: foundations.colors.baseWhite, controlRadiocheckBorder: '$borderCoreDefault', controlRadiocheckIconSelected: '$textInverse', - controlRemoveControlBg: '$colorAccentBlack', + controlRemoveControlBg: '$accentBlack', controlRemoveControlBorder: '$borderCoreOnDark', controlRemoveControlIcon: '$textOnAccent', controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', - controlToggleSwitchBgSelected: '$colorAccentPrimary', + controlToggleSwitchBgSelected: '$accentPrimary', controlToggleSwitchKnob: '$backgroundElevationElevation4', inputBorderDefault: '$borderCoreDefault', - inputBorderFocus: '$borderUtilityFocus', + inputBorderFocus: '$borderUtilitySelected', inputBorderHover: '$borderCoreStrong', - inputSendIcon: '$colorAccentPrimary', + inputSendIcon: '$accentPrimary', inputSendIconDisabled: '$textDisabled', inputTextDefault: '$textPrimary', inputTextDisabled: '$textDisabled', inputTextIcon: '$textTertiary', inputTextPlaceholder: '$textTertiary', - presenceBgOffline: '$colorAccentNeutral', - presenceBgOnline: '$colorAccentSuccess', + presenceBgOffline: '$accentNeutral', + presenceBgOnline: '$accentSuccess', presenceBorder: '$borderCoreOnDark', reactionBg: '$backgroundElevationElevation1', reactionBorder: '$borderCoreDefault', diff --git a/package/src/theme/dark/StreamTokens.ios.ts b/package/src/theme/dark/StreamTokens.ios.ts index f16ba52fe7..54f7b5df8b 100644 --- a/package/src/theme/dark/StreamTokens.ios.ts +++ b/package/src/theme/dark/StreamTokens.ios.ts @@ -4,8 +4,6 @@ import type { IStreamTokens } from '../StreamTokens.types'; export const foundations: IStreamTokens['foundations'] = { colors: { - baseBlack: '#000000', - baseWhite: '#ffffff', baseTransparent0: 'rgba(255, 255, 255, 0)', baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)', baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)', @@ -13,94 +11,118 @@ export const foundations: IStreamTokens['foundations'] = { baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)', baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)', baseTransparentBlack70: 'rgba(0, 0, 0, 0.7)', - slate50: '#fafbfc', - slate100: '#f2f4f6', - slate200: '#e2e6ea', - slate300: '#d0d5da', - slate400: '#b8bec4', - slate500: '#9ea4aa', - slate600: '#838990', - slate700: '#6a7077', - slate800: '#50565d', - slate900: '#384047', - slate950: '#1e252b', - neutral50: '#f7f7f7', - neutral100: '#ededed', - neutral200: '#d9d9d9', - neutral300: '#c1c1c1', - neutral400: '#a3a3a3', - neutral500: '#7f7f7f', - neutral600: '#636363', - neutral700: '#4a4a4a', - neutral800: '#383838', - neutral900: '#262626', - neutral950: '#151515', - blue50: '#ebf3ff', - blue100: '#d2e3ff', - blue200: '#a6c4ff', - blue300: '#7aa7ff', - blue400: '#4e8bff', + 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: '#0052ce', - blue700: '#0042a3', - blue800: '#003179', - blue900: '#001f4f', - blue950: '#001025', - cyan50: '#f0fcfe', - cyan100: '#d7f7fb', - cyan200: '#bdf1f8', - cyan300: '#a3ecf4', - cyan400: '#89e6f1', - cyan500: '#69e5f6', - cyan600: '#3ec9d9', - cyan700: '#28a8b5', - cyan800: '#1c8791', - cyan900: '#125f66', - cyan950: '#0b3d44', - green50: '#e8fff5', - green100: '#c9fce7', - green200: '#a9f8d9', - green300: '#88f2ca', - green400: '#59e9b5', - green500: '#00e2a1', - green600: '#00b681', - green700: '#008d64', - green800: '#006548', - green900: '#003d2b', - green950: '#002319', - purple50: '#f5effe', - purple100: '#ebdefd', - purple200: '#d8bffc', - purple300: '#c79ffc', - purple400: '#b98af9', - purple500: '#b38af8', - purple600: '#996ce3', - purple700: '#7f55c7', - purple800: '#6640ab', - purple900: '#4d2c8f', - purple950: '#351c6b', - yellow50: '#fff9e5', - yellow100: '#fff1c2', - yellow200: '#ffe8a0', - yellow300: '#ffde7d', - yellow400: '#ffd65a', - yellow500: '#ffd233', - yellow600: '#e6b400', - yellow700: '#c59600', - yellow800: '#9f7700', - yellow900: '#7a5a00', - yellow950: '#4f3900', - red50: '#fcebea', - red100: '#f8cfcd', - red200: '#f3b3b0', - red300: '#ed958f', - red400: '#e6756c', - red500: '#d92f26', - red600: '#b9261f', - red700: '#98201a', - red800: '#761915', - red900: '#54120f', - red950: '#360b09', + 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, @@ -384,7 +406,14 @@ export const components: IStreamTokens['components'] = { } 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, @@ -396,6 +425,7 @@ export const semantics: IStreamTokens['semantics'] = { 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)', @@ -412,10 +442,10 @@ export const semantics: IStreamTokens['semantics'] = { backgroundElevationElevation3: foundations.colors.neutral700, backgroundElevationElevation4: foundations.colors.neutral600, badgeBgDefault: '$backgroundElevationElevation1', - badgeBgError: '$colorAccentError', - badgeBgInverse: '$colorAccentBlack', - badgeBgNeutral: '$colorAccentNeutral', - badgeBgPrimary: '$colorAccentPrimary', + badgeBgError: '$accentError', + badgeBgInverse: '$accentBlack', + badgeBgNeutral: '$accentNeutral', + badgeBgPrimary: '$accentPrimary', badgeBorder: '$borderCoreOnDark', badgeText: '$textOnAccent', badgeTextInverse: '$textPrimary', @@ -427,20 +457,31 @@ export const semantics: IStreamTokens['semantics'] = { borderCoreStrong: foundations.colors.neutral600, borderCoreSubtle: foundations.colors.neutral800, borderUtilityDisabled: foundations.colors.neutral800, - borderUtilityError: '$colorAccentError', - borderUtilityFocus: '$colorBrand700', - borderUtilitySelected: '$colorAccentPrimary', - borderUtilitySuccess: '$colorAccentSuccess', - borderUtilityWarning: '$colorAccentWarning', - buttonDestructiveBg: '$colorAccentError', + 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: '$colorAccentError', - buttonDestructiveText: '$colorAccentError', + buttonDestructiveBorder: '$accentError', + buttonDestructiveText: '$accentError', buttonDestructiveTextOnAccent: '$textOnAccent', - buttonPrimaryBg: '$colorAccentPrimary', + buttonPrimaryBg: '$accentPrimary', buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, - buttonPrimaryBorder: '$colorBrand200', - buttonPrimaryText: '$colorAccentPrimary', + buttonPrimaryBorder: '$brand200', + buttonPrimaryText: '$accentPrimary', buttonPrimaryTextOnAccent: '$textOnAccent', buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', @@ -448,20 +489,20 @@ export const semantics: IStreamTokens['semantics'] = { buttonSecondaryText: '$textPrimary', buttonSecondaryTextOnAccent: '$textPrimary', chatBgAttachmentIncoming: foundations.colors.neutral700, - chatBgAttachmentOutgoing: '$colorBrand300', + chatBgAttachmentOutgoing: '$brand300', chatBgIncoming: foundations.colors.neutral800, - chatBgOutgoing: '$colorBrand200', - chatBgTypingIndicator: '$colorAccentNeutral', + chatBgOutgoing: '$brand200', + chatBgTypingIndicator: '$accentNeutral', chatBorderIncoming: foundations.colors.baseTransparent0, chatBorderOnChatIncoming: foundations.colors.slate600, - chatBorderOnChatOutgoing: '$colorBrand600', + chatBorderOnChatOutgoing: '$brand600', chatBorderOutgoing: foundations.colors.baseTransparent0, chatPollProgressFillIncoming: foundations.colors.neutral600, - chatPollProgressFillOutgoing: '$colorBrand400', + chatPollProgressFillOutgoing: '$brand400', chatPollProgressTrackIncoming: foundations.colors.baseWhite, chatPollProgressTrackOutgoing: foundations.colors.baseWhite, chatReplyIndicatorIncoming: foundations.colors.neutral500, - chatReplyIndicatorOutgoing: '$colorBrand700', + chatReplyIndicatorOutgoing: '$brand700', chatTextLink: '$textLink', chatTextMention: '$textLink', chatTextMessage: '$textPrimary', @@ -472,27 +513,10 @@ export const semantics: IStreamTokens['semantics'] = { chatThreadConnectorIncoming: '$chatBgIncoming', chatThreadConnectorOutgoing: '$chatBgOutgoing', chatWaveformBar: '$borderCoreOpacity25', - chatWaveformBarPlaying: '$colorAccentPrimary', - colorAccentBlack: foundations.colors.baseBlack, - colorAccentError: foundations.colors.red400, - colorAccentNeutral: foundations.colors.neutral600, - colorAccentPrimary: '$colorBrand600', - colorAccentSuccess: foundations.colors.green400, - colorAccentWarning: foundations.colors.yellow400, - colorBrand50: foundations.colors.blue950, - colorBrand100: foundations.colors.blue900, - colorBrand200: foundations.colors.blue800, - colorBrand300: foundations.colors.blue700, - colorBrand400: foundations.colors.blue600, - colorBrand500: foundations.colors.blue500, - colorBrand600: foundations.colors.blue400, - colorBrand700: foundations.colors.blue300, - colorBrand800: foundations.colors.blue200, - colorBrand900: foundations.colors.blue100, - colorBrand950: foundations.colors.blue50, + chatWaveformBarPlaying: '$accentPrimary', composerBg: '$backgroundElevationElevation1', controlPlayControlBg: '$backgroundElevationElevation1', - controlPlayControlBgInverse: '$colorAccentBlack', + controlPlayControlBgInverse: '$accentBlack', controlPlayControlBorder: '$borderCoreDefault', controlPlayControlIcon: '$textPrimary', controlPlayControlIconInverse: '$textOnAccent', @@ -502,24 +526,24 @@ export const semantics: IStreamTokens['semantics'] = { controlRadiocheckBgSelected: foundations.colors.baseWhite, controlRadiocheckBorder: '$borderCoreDefault', controlRadiocheckIconSelected: '$textInverse', - controlRemoveControlBg: '$colorAccentBlack', + controlRemoveControlBg: '$accentBlack', controlRemoveControlBorder: '$borderCoreOnDark', controlRemoveControlIcon: '$textOnAccent', controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', - controlToggleSwitchBgSelected: '$colorAccentPrimary', + controlToggleSwitchBgSelected: '$accentPrimary', controlToggleSwitchKnob: '$backgroundElevationElevation4', inputBorderDefault: '$borderCoreDefault', - inputBorderFocus: '$borderUtilityFocus', + inputBorderFocus: '$borderUtilitySelected', inputBorderHover: '$borderCoreStrong', - inputSendIcon: '$colorAccentPrimary', + inputSendIcon: '$accentPrimary', inputSendIconDisabled: '$textDisabled', inputTextDefault: '$textPrimary', inputTextDisabled: '$textDisabled', inputTextIcon: '$textTertiary', inputTextPlaceholder: '$textTertiary', - presenceBgOffline: '$colorAccentNeutral', - presenceBgOnline: '$colorAccentSuccess', + presenceBgOffline: '$accentNeutral', + presenceBgOnline: '$accentSuccess', presenceBorder: '$borderCoreOnDark', reactionBg: '$backgroundElevationElevation1', reactionBorder: '$borderCoreDefault', diff --git a/package/src/theme/dark/StreamTokens.web.ts b/package/src/theme/dark/StreamTokens.web.ts index 4def945358..ba0715a779 100644 --- a/package/src/theme/dark/StreamTokens.web.ts +++ b/package/src/theme/dark/StreamTokens.web.ts @@ -4,8 +4,6 @@ import type { IStreamTokens } from '../StreamTokens.types'; export const foundations: IStreamTokens['foundations'] = { colors: { - baseBlack: '#000000', - baseWhite: '#ffffff', baseTransparent0: 'rgba(255, 255, 255, 0)', baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)', baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)', @@ -13,94 +11,118 @@ export const foundations: IStreamTokens['foundations'] = { baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)', baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)', baseTransparentBlack70: 'rgba(0, 0, 0, 0.7)', - slate50: '#fafbfc', - slate100: '#f2f4f6', - slate200: '#e2e6ea', - slate300: '#d0d5da', - slate400: '#b8bec4', - slate500: '#9ea4aa', - slate600: '#838990', - slate700: '#6a7077', - slate800: '#50565d', - slate900: '#384047', - slate950: '#1e252b', - neutral50: '#f7f7f7', - neutral100: '#ededed', - neutral200: '#d9d9d9', - neutral300: '#c1c1c1', - neutral400: '#a3a3a3', - neutral500: '#7f7f7f', - neutral600: '#636363', - neutral700: '#4a4a4a', - neutral800: '#383838', - neutral900: '#262626', - neutral950: '#151515', - blue50: '#ebf3ff', - blue100: '#d2e3ff', - blue200: '#a6c4ff', - blue300: '#7aa7ff', - blue400: '#4e8bff', + 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: '#0052ce', - blue700: '#0042a3', - blue800: '#003179', - blue900: '#001f4f', - blue950: '#001025', - cyan50: '#f0fcfe', - cyan100: '#d7f7fb', - cyan200: '#bdf1f8', - cyan300: '#a3ecf4', - cyan400: '#89e6f1', - cyan500: '#69e5f6', - cyan600: '#3ec9d9', - cyan700: '#28a8b5', - cyan800: '#1c8791', - cyan900: '#125f66', - cyan950: '#0b3d44', - green50: '#e8fff5', - green100: '#c9fce7', - green200: '#a9f8d9', - green300: '#88f2ca', - green400: '#59e9b5', - green500: '#00e2a1', - green600: '#00b681', - green700: '#008d64', - green800: '#006548', - green900: '#003d2b', - green950: '#002319', - purple50: '#f5effe', - purple100: '#ebdefd', - purple200: '#d8bffc', - purple300: '#c79ffc', - purple400: '#b98af9', - purple500: '#b38af8', - purple600: '#996ce3', - purple700: '#7f55c7', - purple800: '#6640ab', - purple900: '#4d2c8f', - purple950: '#351c6b', - yellow50: '#fff9e5', - yellow100: '#fff1c2', - yellow200: '#ffe8a0', - yellow300: '#ffde7d', - yellow400: '#ffd65a', - yellow500: '#ffd233', - yellow600: '#e6b400', - yellow700: '#c59600', - yellow800: '#9f7700', - yellow900: '#7a5a00', - yellow950: '#4f3900', - red50: '#fcebea', - red100: '#f8cfcd', - red200: '#f3b3b0', - red300: '#ed958f', - red400: '#e6756c', - red500: '#d92f26', - red600: '#b9261f', - red700: '#98201a', - red800: '#761915', - red900: '#54120f', - red950: '#360b09', + 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, @@ -384,7 +406,14 @@ export const components: IStreamTokens['components'] = { } 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, @@ -396,6 +425,7 @@ export const semantics: IStreamTokens['semantics'] = { 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)', @@ -412,10 +442,10 @@ export const semantics: IStreamTokens['semantics'] = { backgroundElevationElevation3: foundations.colors.neutral700, backgroundElevationElevation4: foundations.colors.neutral600, badgeBgDefault: '$backgroundElevationElevation1', - badgeBgError: '$colorAccentError', - badgeBgInverse: '$colorAccentBlack', - badgeBgNeutral: '$colorAccentNeutral', - badgeBgPrimary: '$colorAccentPrimary', + badgeBgError: '$accentError', + badgeBgInverse: '$accentBlack', + badgeBgNeutral: '$accentNeutral', + badgeBgPrimary: '$accentPrimary', badgeBorder: '$borderCoreOnDark', badgeText: '$textOnAccent', badgeTextInverse: '$textPrimary', @@ -427,20 +457,31 @@ export const semantics: IStreamTokens['semantics'] = { borderCoreStrong: foundations.colors.neutral600, borderCoreSubtle: foundations.colors.neutral800, borderUtilityDisabled: foundations.colors.neutral800, - borderUtilityError: '$colorAccentError', - borderUtilityFocus: '$colorBrand700', - borderUtilitySelected: '$colorAccentPrimary', - borderUtilitySuccess: '$colorAccentSuccess', - borderUtilityWarning: '$colorAccentWarning', - buttonDestructiveBg: '$colorAccentError', + 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: '$colorAccentError', - buttonDestructiveText: '$colorAccentError', + buttonDestructiveBorder: '$accentError', + buttonDestructiveText: '$accentError', buttonDestructiveTextOnAccent: '$textOnAccent', - buttonPrimaryBg: '$colorAccentPrimary', + buttonPrimaryBg: '$accentPrimary', buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, - buttonPrimaryBorder: '$colorBrand200', - buttonPrimaryText: '$colorAccentPrimary', + buttonPrimaryBorder: '$brand200', + buttonPrimaryText: '$accentPrimary', buttonPrimaryTextOnAccent: '$textOnAccent', buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', @@ -448,20 +489,20 @@ export const semantics: IStreamTokens['semantics'] = { buttonSecondaryText: '$textPrimary', buttonSecondaryTextOnAccent: '$textPrimary', chatBgAttachmentIncoming: foundations.colors.neutral700, - chatBgAttachmentOutgoing: '$colorBrand300', + chatBgAttachmentOutgoing: '$brand300', chatBgIncoming: foundations.colors.neutral800, - chatBgOutgoing: '$colorBrand200', - chatBgTypingIndicator: '$colorAccentNeutral', + chatBgOutgoing: '$brand200', + chatBgTypingIndicator: '$accentNeutral', chatBorderIncoming: foundations.colors.baseTransparent0, chatBorderOnChatIncoming: foundations.colors.slate600, - chatBorderOnChatOutgoing: '$colorBrand600', + chatBorderOnChatOutgoing: '$brand600', chatBorderOutgoing: foundations.colors.baseTransparent0, chatPollProgressFillIncoming: foundations.colors.neutral600, - chatPollProgressFillOutgoing: '$colorBrand400', + chatPollProgressFillOutgoing: '$brand400', chatPollProgressTrackIncoming: foundations.colors.baseWhite, chatPollProgressTrackOutgoing: foundations.colors.baseWhite, chatReplyIndicatorIncoming: foundations.colors.neutral500, - chatReplyIndicatorOutgoing: '$colorBrand700', + chatReplyIndicatorOutgoing: '$brand700', chatTextLink: '$textLink', chatTextMention: '$textLink', chatTextMessage: '$textPrimary', @@ -472,27 +513,10 @@ export const semantics: IStreamTokens['semantics'] = { chatThreadConnectorIncoming: '$chatBgIncoming', chatThreadConnectorOutgoing: '$chatBgOutgoing', chatWaveformBar: '$borderCoreOpacity25', - chatWaveformBarPlaying: '$colorAccentPrimary', - colorAccentBlack: foundations.colors.baseBlack, - colorAccentError: foundations.colors.red400, - colorAccentNeutral: foundations.colors.neutral600, - colorAccentPrimary: '$colorBrand600', - colorAccentSuccess: foundations.colors.green400, - colorAccentWarning: foundations.colors.yellow400, - colorBrand50: foundations.colors.blue950, - colorBrand100: foundations.colors.blue900, - colorBrand200: foundations.colors.blue800, - colorBrand300: foundations.colors.blue700, - colorBrand400: foundations.colors.blue600, - colorBrand500: foundations.colors.blue500, - colorBrand600: foundations.colors.blue400, - colorBrand700: foundations.colors.blue300, - colorBrand800: foundations.colors.blue200, - colorBrand900: foundations.colors.blue100, - colorBrand950: foundations.colors.blue50, + chatWaveformBarPlaying: '$accentPrimary', composerBg: '$backgroundElevationElevation1', controlPlayControlBg: '$backgroundElevationElevation1', - controlPlayControlBgInverse: '$colorAccentBlack', + controlPlayControlBgInverse: '$accentBlack', controlPlayControlBorder: '$borderCoreDefault', controlPlayControlIcon: '$textPrimary', controlPlayControlIconInverse: '$textOnAccent', @@ -502,24 +526,24 @@ export const semantics: IStreamTokens['semantics'] = { controlRadiocheckBgSelected: foundations.colors.baseWhite, controlRadiocheckBorder: '$borderCoreDefault', controlRadiocheckIconSelected: '$textInverse', - controlRemoveControlBg: '$colorAccentBlack', + controlRemoveControlBg: '$accentBlack', controlRemoveControlBorder: '$borderCoreOnDark', controlRemoveControlIcon: '$textOnAccent', controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', - controlToggleSwitchBgSelected: '$colorAccentPrimary', + controlToggleSwitchBgSelected: '$accentPrimary', controlToggleSwitchKnob: '$backgroundElevationElevation4', inputBorderDefault: '$borderCoreDefault', - inputBorderFocus: '$borderUtilityFocus', + inputBorderFocus: '$borderUtilitySelected', inputBorderHover: '$borderCoreStrong', - inputSendIcon: '$colorAccentPrimary', + inputSendIcon: '$accentPrimary', inputSendIconDisabled: '$textDisabled', inputTextDefault: '$textPrimary', inputTextDisabled: '$textDisabled', inputTextIcon: '$textTertiary', inputTextPlaceholder: '$textTertiary', - presenceBgOffline: '$colorAccentNeutral', - presenceBgOnline: '$colorAccentSuccess', + presenceBgOffline: '$accentNeutral', + presenceBgOnline: '$accentSuccess', presenceBorder: '$borderCoreOnDark', reactionBg: '$backgroundElevationElevation1', reactionBorder: '$borderCoreDefault', diff --git a/package/src/theme/high-contrast-light/StreamTokens.android.ts b/package/src/theme/high-contrast-light/StreamTokens.android.ts index e950b9eab3..18f1180a3b 100644 --- a/package/src/theme/high-contrast-light/StreamTokens.android.ts +++ b/package/src/theme/high-contrast-light/StreamTokens.android.ts @@ -4,8 +4,6 @@ import type { IStreamTokens } from '../StreamTokens.types'; export const foundations: IStreamTokens['foundations'] = { colors: { - baseBlack: '#000000', - baseWhite: '#ffffff', baseTransparent0: 'rgba(255, 255, 255, 0)', baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)', baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)', @@ -13,94 +11,118 @@ export const foundations: IStreamTokens['foundations'] = { baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)', baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)', baseTransparentBlack70: 'rgba(0, 0, 0, 0.7)', - slate50: '#fafbfc', - slate100: '#f2f4f6', - slate200: '#e2e6ea', - slate300: '#d0d5da', - slate400: '#b8bec4', - slate500: '#9ea4aa', - slate600: '#838990', - slate700: '#6a7077', - slate800: '#50565d', - slate900: '#384047', - slate950: '#1e252b', - neutral50: '#f7f7f7', - neutral100: '#ededed', - neutral200: '#d9d9d9', - neutral300: '#c1c1c1', - neutral400: '#a3a3a3', - neutral500: '#7f7f7f', - neutral600: '#636363', - neutral700: '#4a4a4a', - neutral800: '#383838', - neutral900: '#262626', - neutral950: '#151515', - blue50: '#ebf3ff', - blue100: '#d2e3ff', - blue200: '#a6c4ff', - blue300: '#7aa7ff', - blue400: '#4e8bff', + 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: '#0052ce', - blue700: '#0042a3', - blue800: '#003179', - blue900: '#001f4f', - blue950: '#001025', - cyan50: '#f0fcfe', - cyan100: '#d7f7fb', - cyan200: '#bdf1f8', - cyan300: '#a3ecf4', - cyan400: '#89e6f1', - cyan500: '#69e5f6', - cyan600: '#3ec9d9', - cyan700: '#28a8b5', - cyan800: '#1c8791', - cyan900: '#125f66', - cyan950: '#0b3d44', - green50: '#e8fff5', - green100: '#c9fce7', - green200: '#a9f8d9', - green300: '#88f2ca', - green400: '#59e9b5', - green500: '#00e2a1', - green600: '#00b681', - green700: '#008d64', - green800: '#006548', - green900: '#003d2b', - green950: '#002319', - purple50: '#f5effe', - purple100: '#ebdefd', - purple200: '#d8bffc', - purple300: '#c79ffc', - purple400: '#b98af9', - purple500: '#b38af8', - purple600: '#996ce3', - purple700: '#7f55c7', - purple800: '#6640ab', - purple900: '#4d2c8f', - purple950: '#351c6b', - yellow50: '#fff9e5', - yellow100: '#fff1c2', - yellow200: '#ffe8a0', - yellow300: '#ffde7d', - yellow400: '#ffd65a', - yellow500: '#ffd233', - yellow600: '#e6b400', - yellow700: '#c59600', - yellow800: '#9f7700', - yellow900: '#7a5a00', - yellow950: '#4f3900', - red50: '#fcebea', - red100: '#f8cfcd', - red200: '#f3b3b0', - red300: '#ed958f', - red400: '#e6756c', - red500: '#d92f26', - red600: '#b9261f', - red700: '#98201a', - red800: '#761915', - red900: '#54120f', - red950: '#360b09', + 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, @@ -384,24 +406,32 @@ export const components: IStreamTokens['components'] = { } 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.blue50, - avatarPaletteText2: foundations.colors.cyan50, - avatarPaletteText3: foundations.colors.green50, - avatarPaletteText4: foundations.colors.purple50, - avatarPaletteText5: foundations.colors.yellow50, + 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.5)', + backgroundCoreScrim: 'rgba(0, 0, 0, 0.25)', backgroundCoreSelected: 'rgba(0, 0, 0, 0.2)', backgroundCoreSurface: '$backgroundElevationElevation0', backgroundCoreSurfaceStrong: '$backgroundElevationElevation0', @@ -412,35 +442,46 @@ export const semantics: IStreamTokens['semantics'] = { backgroundElevationElevation3: foundations.colors.baseWhite, backgroundElevationElevation4: foundations.colors.baseWhite, badgeBgDefault: '$backgroundElevationElevation1', - badgeBgError: '$colorAccentError', - badgeBgInverse: '$colorAccentBlack', - badgeBgNeutral: '$colorAccentNeutral', - badgeBgPrimary: '$colorAccentPrimary', + badgeBgError: '$accentError', + badgeBgInverse: '$accentBlack', + badgeBgNeutral: '$accentNeutral', + badgeBgPrimary: '$accentPrimary', badgeBorder: '$borderCoreOnDark', badgeText: '$textOnAccent', badgeTextInverse: '$textPrimary', - borderCoreDefault: '$colorAccentBlack', - borderCoreOnAccent: '$colorAccentBlack', + borderCoreDefault: '$accentBlack', + borderCoreOnAccent: '$accentBlack', borderCoreOnDark: foundations.colors.baseWhite, - borderCoreOpacity10: '$colorAccentBlack', - borderCoreOpacity25: '$colorAccentBlack', - borderCoreStrong: '$colorAccentBlack', - borderCoreSubtle: '$colorAccentBlack', + borderCoreOpacity10: '$accentBlack', + borderCoreOpacity25: '$accentBlack', + borderCoreStrong: '$accentBlack', + borderCoreSubtle: '$accentBlack', borderUtilityDisabled: foundations.colors.slate300, - borderUtilityError: '$colorAccentError', - borderUtilityFocus: '$colorAccentBlack', - borderUtilitySelected: '$colorAccentPrimary', - borderUtilitySuccess: '$colorAccentSuccess', - borderUtilityWarning: '$colorAccentWarning', - buttonDestructiveBg: '$colorAccentError', + 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: '$colorAccentError', - buttonDestructiveText: '$colorAccentError', + buttonDestructiveBorder: '$accentError', + buttonDestructiveText: '$accentError', buttonDestructiveTextOnAccent: '$textOnAccent', - buttonPrimaryBg: '$colorAccentPrimary', + buttonPrimaryBg: '$accentPrimary', buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, - buttonPrimaryBorder: '$colorBrand200', - buttonPrimaryText: '$colorAccentPrimary', + buttonPrimaryBorder: '$brand200', + buttonPrimaryText: '$accentPrimary', buttonPrimaryTextOnAccent: '$textOnAccent', buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', @@ -451,15 +492,15 @@ export const semantics: IStreamTokens['semantics'] = { chatBgAttachmentOutgoing: '$backgroundElevationElevation0', chatBgIncoming: '$backgroundElevationElevation0', chatBgOutgoing: '$backgroundElevationElevation0', - chatBgTypingIndicator: '$colorAccentNeutral', - chatBorderIncoming: '$colorAccentBlack', - chatBorderOnChatIncoming: '$colorAccentBlack', - chatBorderOnChatOutgoing: '$colorAccentBlack', - chatBorderOutgoing: '$colorAccentBlack', + chatBgTypingIndicator: '$accentNeutral', + chatBorderIncoming: '$accentBlack', + chatBorderOnChatIncoming: '$accentBlack', + chatBorderOnChatOutgoing: '$accentBlack', + chatBorderOutgoing: '$accentBlack', chatPollProgressFillIncoming: foundations.colors.neutral300, chatPollProgressFillOutgoing: foundations.colors.baseBlack, - chatPollProgressTrackIncoming: '$colorAccentBlack', - chatPollProgressTrackOutgoing: '$colorAccentBlack', + chatPollProgressTrackIncoming: '$accentBlack', + chatPollProgressTrackOutgoing: '$accentBlack', chatReplyIndicatorIncoming: foundations.colors.baseBlack, chatReplyIndicatorOutgoing: foundations.colors.baseBlack, chatTextLink: '$textLink', @@ -469,57 +510,40 @@ export const semantics: IStreamTokens['semantics'] = { chatTextSystem: '$textSecondary', chatTextTimestamp: '$textTertiary', chatTextUsername: '$textSecondary', - chatThreadConnectorIncoming: '$colorAccentBlack', - chatThreadConnectorOutgoing: '$colorAccentBlack', + chatThreadConnectorIncoming: '$accentBlack', + chatThreadConnectorOutgoing: '$accentBlack', chatWaveformBar: '$borderCoreOpacity25', - chatWaveformBarPlaying: '$colorAccentBlack', - colorAccentBlack: foundations.colors.baseBlack, - colorAccentError: foundations.colors.baseBlack, - colorAccentNeutral: foundations.colors.baseBlack, - colorAccentPrimary: foundations.colors.baseBlack, - colorAccentSuccess: foundations.colors.baseBlack, - colorAccentWarning: foundations.colors.baseBlack, - colorBrand50: foundations.colors.baseBlack, - colorBrand100: foundations.colors.baseBlack, - colorBrand200: foundations.colors.baseBlack, - colorBrand300: foundations.colors.baseBlack, - colorBrand400: foundations.colors.baseBlack, - colorBrand500: foundations.colors.baseBlack, - colorBrand600: foundations.colors.baseBlack, - colorBrand700: foundations.colors.baseBlack, - colorBrand800: foundations.colors.baseBlack, - colorBrand900: foundations.colors.baseBlack, - colorBrand950: foundations.colors.baseBlack, + chatWaveformBarPlaying: '$accentBlack', composerBg: '$backgroundElevationElevation1', controlPlayControlBg: '$backgroundElevationElevation1', - controlPlayControlBgInverse: '$colorAccentBlack', + controlPlayControlBgInverse: '$accentBlack', controlPlayControlBorder: '$borderCoreDefault', controlPlayControlIcon: '$textPrimary', controlPlayControlIconInverse: '$textOnAccent', controlProgressBarFill: '$backgroundCoreSurface', controlProgressBarTrack: '$backgroundCoreSurfaceStrong', controlRadiocheckBg: foundations.colors.baseTransparent0, - controlRadiocheckBgSelected: '$colorAccentPrimary', + controlRadiocheckBgSelected: '$accentPrimary', controlRadiocheckBorder: '$borderCoreDefault', controlRadiocheckIconSelected: '$textInverse', - controlRemoveControlBg: '$colorAccentBlack', + controlRemoveControlBg: '$accentBlack', controlRemoveControlBorder: '$borderCoreOnDark', controlRemoveControlIcon: '$textInverse', controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', - controlToggleSwitchBgSelected: '$colorAccentPrimary', + controlToggleSwitchBgSelected: '$accentPrimary', controlToggleSwitchKnob: '$backgroundElevationElevation4', inputBorderDefault: '$borderCoreDefault', inputBorderFocus: '$borderUtilityFocus', inputBorderHover: '$borderCoreStrong', - inputSendIcon: '$colorAccentPrimary', + inputSendIcon: '$accentPrimary', inputSendIconDisabled: '$textDisabled', inputTextDefault: '$textPrimary', inputTextDisabled: '$textDisabled', inputTextIcon: '$textTertiary', inputTextPlaceholder: '$textTertiary', - presenceBgOffline: '$colorAccentNeutral', - presenceBgOnline: '$colorAccentSuccess', + presenceBgOffline: '$accentNeutral', + presenceBgOnline: '$accentSuccess', presenceBorder: '$borderCoreOnDark', reactionBg: '$backgroundElevationElevation1', reactionBorder: '$borderCoreDefault', diff --git a/package/src/theme/high-contrast-light/StreamTokens.ios.ts b/package/src/theme/high-contrast-light/StreamTokens.ios.ts index dbca12a742..48ba5dc924 100644 --- a/package/src/theme/high-contrast-light/StreamTokens.ios.ts +++ b/package/src/theme/high-contrast-light/StreamTokens.ios.ts @@ -4,8 +4,6 @@ import type { IStreamTokens } from '../StreamTokens.types'; export const foundations: IStreamTokens['foundations'] = { colors: { - baseBlack: '#000000', - baseWhite: '#ffffff', baseTransparent0: 'rgba(255, 255, 255, 0)', baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)', baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)', @@ -13,94 +11,118 @@ export const foundations: IStreamTokens['foundations'] = { baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)', baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)', baseTransparentBlack70: 'rgba(0, 0, 0, 0.7)', - slate50: '#fafbfc', - slate100: '#f2f4f6', - slate200: '#e2e6ea', - slate300: '#d0d5da', - slate400: '#b8bec4', - slate500: '#9ea4aa', - slate600: '#838990', - slate700: '#6a7077', - slate800: '#50565d', - slate900: '#384047', - slate950: '#1e252b', - neutral50: '#f7f7f7', - neutral100: '#ededed', - neutral200: '#d9d9d9', - neutral300: '#c1c1c1', - neutral400: '#a3a3a3', - neutral500: '#7f7f7f', - neutral600: '#636363', - neutral700: '#4a4a4a', - neutral800: '#383838', - neutral900: '#262626', - neutral950: '#151515', - blue50: '#ebf3ff', - blue100: '#d2e3ff', - blue200: '#a6c4ff', - blue300: '#7aa7ff', - blue400: '#4e8bff', + 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: '#0052ce', - blue700: '#0042a3', - blue800: '#003179', - blue900: '#001f4f', - blue950: '#001025', - cyan50: '#f0fcfe', - cyan100: '#d7f7fb', - cyan200: '#bdf1f8', - cyan300: '#a3ecf4', - cyan400: '#89e6f1', - cyan500: '#69e5f6', - cyan600: '#3ec9d9', - cyan700: '#28a8b5', - cyan800: '#1c8791', - cyan900: '#125f66', - cyan950: '#0b3d44', - green50: '#e8fff5', - green100: '#c9fce7', - green200: '#a9f8d9', - green300: '#88f2ca', - green400: '#59e9b5', - green500: '#00e2a1', - green600: '#00b681', - green700: '#008d64', - green800: '#006548', - green900: '#003d2b', - green950: '#002319', - purple50: '#f5effe', - purple100: '#ebdefd', - purple200: '#d8bffc', - purple300: '#c79ffc', - purple400: '#b98af9', - purple500: '#b38af8', - purple600: '#996ce3', - purple700: '#7f55c7', - purple800: '#6640ab', - purple900: '#4d2c8f', - purple950: '#351c6b', - yellow50: '#fff9e5', - yellow100: '#fff1c2', - yellow200: '#ffe8a0', - yellow300: '#ffde7d', - yellow400: '#ffd65a', - yellow500: '#ffd233', - yellow600: '#e6b400', - yellow700: '#c59600', - yellow800: '#9f7700', - yellow900: '#7a5a00', - yellow950: '#4f3900', - red50: '#fcebea', - red100: '#f8cfcd', - red200: '#f3b3b0', - red300: '#ed958f', - red400: '#e6756c', - red500: '#d92f26', - red600: '#b9261f', - red700: '#98201a', - red800: '#761915', - red900: '#54120f', - red950: '#360b09', + 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, @@ -384,24 +406,32 @@ export const components: IStreamTokens['components'] = { } 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.blue50, - avatarPaletteText2: foundations.colors.cyan50, - avatarPaletteText3: foundations.colors.green50, - avatarPaletteText4: foundations.colors.purple50, - avatarPaletteText5: foundations.colors.yellow50, + 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.5)', + backgroundCoreScrim: 'rgba(0, 0, 0, 0.25)', backgroundCoreSelected: 'rgba(0, 0, 0, 0.2)', backgroundCoreSurface: '$backgroundElevationElevation0', backgroundCoreSurfaceStrong: '$backgroundElevationElevation0', @@ -412,35 +442,46 @@ export const semantics: IStreamTokens['semantics'] = { backgroundElevationElevation3: foundations.colors.baseWhite, backgroundElevationElevation4: foundations.colors.baseWhite, badgeBgDefault: '$backgroundElevationElevation1', - badgeBgError: '$colorAccentError', - badgeBgInverse: '$colorAccentBlack', - badgeBgNeutral: '$colorAccentNeutral', - badgeBgPrimary: '$colorAccentPrimary', + badgeBgError: '$accentError', + badgeBgInverse: '$accentBlack', + badgeBgNeutral: '$accentNeutral', + badgeBgPrimary: '$accentPrimary', badgeBorder: '$borderCoreOnDark', badgeText: '$textOnAccent', badgeTextInverse: '$textPrimary', - borderCoreDefault: '$colorAccentBlack', - borderCoreOnAccent: '$colorAccentBlack', + borderCoreDefault: '$accentBlack', + borderCoreOnAccent: '$accentBlack', borderCoreOnDark: foundations.colors.baseWhite, - borderCoreOpacity10: '$colorAccentBlack', - borderCoreOpacity25: '$colorAccentBlack', - borderCoreStrong: '$colorAccentBlack', - borderCoreSubtle: '$colorAccentBlack', + borderCoreOpacity10: '$accentBlack', + borderCoreOpacity25: '$accentBlack', + borderCoreStrong: '$accentBlack', + borderCoreSubtle: '$accentBlack', borderUtilityDisabled: foundations.colors.slate300, - borderUtilityError: '$colorAccentError', - borderUtilityFocus: '$colorAccentBlack', - borderUtilitySelected: '$colorAccentPrimary', - borderUtilitySuccess: '$colorAccentSuccess', - borderUtilityWarning: '$colorAccentWarning', - buttonDestructiveBg: '$colorAccentError', + 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: '$colorAccentError', - buttonDestructiveText: '$colorAccentError', + buttonDestructiveBorder: '$accentError', + buttonDestructiveText: '$accentError', buttonDestructiveTextOnAccent: '$textOnAccent', - buttonPrimaryBg: '$colorAccentPrimary', + buttonPrimaryBg: '$accentPrimary', buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, - buttonPrimaryBorder: '$colorBrand200', - buttonPrimaryText: '$colorAccentPrimary', + buttonPrimaryBorder: '$brand200', + buttonPrimaryText: '$accentPrimary', buttonPrimaryTextOnAccent: '$textOnAccent', buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', @@ -451,15 +492,15 @@ export const semantics: IStreamTokens['semantics'] = { chatBgAttachmentOutgoing: '$backgroundElevationElevation0', chatBgIncoming: '$backgroundElevationElevation0', chatBgOutgoing: '$backgroundElevationElevation0', - chatBgTypingIndicator: '$colorAccentNeutral', - chatBorderIncoming: '$colorAccentBlack', - chatBorderOnChatIncoming: '$colorAccentBlack', - chatBorderOnChatOutgoing: '$colorAccentBlack', - chatBorderOutgoing: '$colorAccentBlack', + chatBgTypingIndicator: '$accentNeutral', + chatBorderIncoming: '$accentBlack', + chatBorderOnChatIncoming: '$accentBlack', + chatBorderOnChatOutgoing: '$accentBlack', + chatBorderOutgoing: '$accentBlack', chatPollProgressFillIncoming: foundations.colors.neutral300, chatPollProgressFillOutgoing: foundations.colors.baseBlack, - chatPollProgressTrackIncoming: '$colorAccentBlack', - chatPollProgressTrackOutgoing: '$colorAccentBlack', + chatPollProgressTrackIncoming: '$accentBlack', + chatPollProgressTrackOutgoing: '$accentBlack', chatReplyIndicatorIncoming: foundations.colors.baseBlack, chatReplyIndicatorOutgoing: foundations.colors.baseBlack, chatTextLink: '$textLink', @@ -469,57 +510,40 @@ export const semantics: IStreamTokens['semantics'] = { chatTextSystem: '$textSecondary', chatTextTimestamp: '$textTertiary', chatTextUsername: '$textSecondary', - chatThreadConnectorIncoming: '$colorAccentBlack', - chatThreadConnectorOutgoing: '$colorAccentBlack', + chatThreadConnectorIncoming: '$accentBlack', + chatThreadConnectorOutgoing: '$accentBlack', chatWaveformBar: '$borderCoreOpacity25', - chatWaveformBarPlaying: '$colorAccentBlack', - colorAccentBlack: foundations.colors.baseBlack, - colorAccentError: foundations.colors.baseBlack, - colorAccentNeutral: foundations.colors.baseBlack, - colorAccentPrimary: foundations.colors.baseBlack, - colorAccentSuccess: foundations.colors.baseBlack, - colorAccentWarning: foundations.colors.baseBlack, - colorBrand50: foundations.colors.baseBlack, - colorBrand100: foundations.colors.baseBlack, - colorBrand200: foundations.colors.baseBlack, - colorBrand300: foundations.colors.baseBlack, - colorBrand400: foundations.colors.baseBlack, - colorBrand500: foundations.colors.baseBlack, - colorBrand600: foundations.colors.baseBlack, - colorBrand700: foundations.colors.baseBlack, - colorBrand800: foundations.colors.baseBlack, - colorBrand900: foundations.colors.baseBlack, - colorBrand950: foundations.colors.baseBlack, + chatWaveformBarPlaying: '$accentBlack', composerBg: '$backgroundElevationElevation1', controlPlayControlBg: '$backgroundElevationElevation1', - controlPlayControlBgInverse: '$colorAccentBlack', + controlPlayControlBgInverse: '$accentBlack', controlPlayControlBorder: '$borderCoreDefault', controlPlayControlIcon: '$textPrimary', controlPlayControlIconInverse: '$textOnAccent', controlProgressBarFill: '$backgroundCoreSurface', controlProgressBarTrack: '$backgroundCoreSurfaceStrong', controlRadiocheckBg: foundations.colors.baseTransparent0, - controlRadiocheckBgSelected: '$colorAccentPrimary', + controlRadiocheckBgSelected: '$accentPrimary', controlRadiocheckBorder: '$borderCoreDefault', controlRadiocheckIconSelected: '$textInverse', - controlRemoveControlBg: '$colorAccentBlack', + controlRemoveControlBg: '$accentBlack', controlRemoveControlBorder: '$borderCoreOnDark', controlRemoveControlIcon: '$textInverse', controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', - controlToggleSwitchBgSelected: '$colorAccentPrimary', + controlToggleSwitchBgSelected: '$accentPrimary', controlToggleSwitchKnob: '$backgroundElevationElevation4', inputBorderDefault: '$borderCoreDefault', inputBorderFocus: '$borderUtilityFocus', inputBorderHover: '$borderCoreStrong', - inputSendIcon: '$colorAccentPrimary', + inputSendIcon: '$accentPrimary', inputSendIconDisabled: '$textDisabled', inputTextDefault: '$textPrimary', inputTextDisabled: '$textDisabled', inputTextIcon: '$textTertiary', inputTextPlaceholder: '$textTertiary', - presenceBgOffline: '$colorAccentNeutral', - presenceBgOnline: '$colorAccentSuccess', + presenceBgOffline: '$accentNeutral', + presenceBgOnline: '$accentSuccess', presenceBorder: '$borderCoreOnDark', reactionBg: '$backgroundElevationElevation1', reactionBorder: '$borderCoreDefault', diff --git a/package/src/theme/high-contrast-light/StreamTokens.web.ts b/package/src/theme/high-contrast-light/StreamTokens.web.ts index bf37c0f4de..6ccc65ca0d 100644 --- a/package/src/theme/high-contrast-light/StreamTokens.web.ts +++ b/package/src/theme/high-contrast-light/StreamTokens.web.ts @@ -4,8 +4,6 @@ import type { IStreamTokens } from '../StreamTokens.types'; export const foundations: IStreamTokens['foundations'] = { colors: { - baseBlack: '#000000', - baseWhite: '#ffffff', baseTransparent0: 'rgba(255, 255, 255, 0)', baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)', baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)', @@ -13,94 +11,118 @@ export const foundations: IStreamTokens['foundations'] = { baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)', baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)', baseTransparentBlack70: 'rgba(0, 0, 0, 0.7)', - slate50: '#fafbfc', - slate100: '#f2f4f6', - slate200: '#e2e6ea', - slate300: '#d0d5da', - slate400: '#b8bec4', - slate500: '#9ea4aa', - slate600: '#838990', - slate700: '#6a7077', - slate800: '#50565d', - slate900: '#384047', - slate950: '#1e252b', - neutral50: '#f7f7f7', - neutral100: '#ededed', - neutral200: '#d9d9d9', - neutral300: '#c1c1c1', - neutral400: '#a3a3a3', - neutral500: '#7f7f7f', - neutral600: '#636363', - neutral700: '#4a4a4a', - neutral800: '#383838', - neutral900: '#262626', - neutral950: '#151515', - blue50: '#ebf3ff', - blue100: '#d2e3ff', - blue200: '#a6c4ff', - blue300: '#7aa7ff', - blue400: '#4e8bff', + 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: '#0052ce', - blue700: '#0042a3', - blue800: '#003179', - blue900: '#001f4f', - blue950: '#001025', - cyan50: '#f0fcfe', - cyan100: '#d7f7fb', - cyan200: '#bdf1f8', - cyan300: '#a3ecf4', - cyan400: '#89e6f1', - cyan500: '#69e5f6', - cyan600: '#3ec9d9', - cyan700: '#28a8b5', - cyan800: '#1c8791', - cyan900: '#125f66', - cyan950: '#0b3d44', - green50: '#e8fff5', - green100: '#c9fce7', - green200: '#a9f8d9', - green300: '#88f2ca', - green400: '#59e9b5', - green500: '#00e2a1', - green600: '#00b681', - green700: '#008d64', - green800: '#006548', - green900: '#003d2b', - green950: '#002319', - purple50: '#f5effe', - purple100: '#ebdefd', - purple200: '#d8bffc', - purple300: '#c79ffc', - purple400: '#b98af9', - purple500: '#b38af8', - purple600: '#996ce3', - purple700: '#7f55c7', - purple800: '#6640ab', - purple900: '#4d2c8f', - purple950: '#351c6b', - yellow50: '#fff9e5', - yellow100: '#fff1c2', - yellow200: '#ffe8a0', - yellow300: '#ffde7d', - yellow400: '#ffd65a', - yellow500: '#ffd233', - yellow600: '#e6b400', - yellow700: '#c59600', - yellow800: '#9f7700', - yellow900: '#7a5a00', - yellow950: '#4f3900', - red50: '#fcebea', - red100: '#f8cfcd', - red200: '#f3b3b0', - red300: '#ed958f', - red400: '#e6756c', - red500: '#d92f26', - red600: '#b9261f', - red700: '#98201a', - red800: '#761915', - red900: '#54120f', - red950: '#360b09', + 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, @@ -384,24 +406,32 @@ export const components: IStreamTokens['components'] = { } 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.blue50, - avatarPaletteText2: foundations.colors.cyan50, - avatarPaletteText3: foundations.colors.green50, - avatarPaletteText4: foundations.colors.purple50, - avatarPaletteText5: foundations.colors.yellow50, + 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.5)', + backgroundCoreScrim: 'rgba(0, 0, 0, 0.25)', backgroundCoreSelected: 'rgba(0, 0, 0, 0.2)', backgroundCoreSurface: '$backgroundElevationElevation0', backgroundCoreSurfaceStrong: '$backgroundElevationElevation0', @@ -412,35 +442,46 @@ export const semantics: IStreamTokens['semantics'] = { backgroundElevationElevation3: foundations.colors.baseWhite, backgroundElevationElevation4: foundations.colors.baseWhite, badgeBgDefault: '$backgroundElevationElevation1', - badgeBgError: '$colorAccentError', - badgeBgInverse: '$colorAccentBlack', - badgeBgNeutral: '$colorAccentNeutral', - badgeBgPrimary: '$colorAccentPrimary', + badgeBgError: '$accentError', + badgeBgInverse: '$accentBlack', + badgeBgNeutral: '$accentNeutral', + badgeBgPrimary: '$accentPrimary', badgeBorder: '$borderCoreOnDark', badgeText: '$textOnAccent', badgeTextInverse: '$textPrimary', - borderCoreDefault: '$colorAccentBlack', - borderCoreOnAccent: '$colorAccentBlack', + borderCoreDefault: '$accentBlack', + borderCoreOnAccent: '$accentBlack', borderCoreOnDark: foundations.colors.baseWhite, - borderCoreOpacity10: '$colorAccentBlack', - borderCoreOpacity25: '$colorAccentBlack', - borderCoreStrong: '$colorAccentBlack', - borderCoreSubtle: '$colorAccentBlack', + borderCoreOpacity10: '$accentBlack', + borderCoreOpacity25: '$accentBlack', + borderCoreStrong: '$accentBlack', + borderCoreSubtle: '$accentBlack', borderUtilityDisabled: foundations.colors.slate300, - borderUtilityError: '$colorAccentError', - borderUtilityFocus: '$colorAccentBlack', - borderUtilitySelected: '$colorAccentPrimary', - borderUtilitySuccess: '$colorAccentSuccess', - borderUtilityWarning: '$colorAccentWarning', - buttonDestructiveBg: '$colorAccentError', + 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: '$colorAccentError', - buttonDestructiveText: '$colorAccentError', + buttonDestructiveBorder: '$accentError', + buttonDestructiveText: '$accentError', buttonDestructiveTextOnAccent: '$textOnAccent', - buttonPrimaryBg: '$colorAccentPrimary', + buttonPrimaryBg: '$accentPrimary', buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, - buttonPrimaryBorder: '$colorBrand200', - buttonPrimaryText: '$colorAccentPrimary', + buttonPrimaryBorder: '$brand200', + buttonPrimaryText: '$accentPrimary', buttonPrimaryTextOnAccent: '$textOnAccent', buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', @@ -451,15 +492,15 @@ export const semantics: IStreamTokens['semantics'] = { chatBgAttachmentOutgoing: '$backgroundElevationElevation0', chatBgIncoming: '$backgroundElevationElevation0', chatBgOutgoing: '$backgroundElevationElevation0', - chatBgTypingIndicator: '$colorAccentNeutral', - chatBorderIncoming: '$colorAccentBlack', - chatBorderOnChatIncoming: '$colorAccentBlack', - chatBorderOnChatOutgoing: '$colorAccentBlack', - chatBorderOutgoing: '$colorAccentBlack', + chatBgTypingIndicator: '$accentNeutral', + chatBorderIncoming: '$accentBlack', + chatBorderOnChatIncoming: '$accentBlack', + chatBorderOnChatOutgoing: '$accentBlack', + chatBorderOutgoing: '$accentBlack', chatPollProgressFillIncoming: foundations.colors.neutral300, chatPollProgressFillOutgoing: foundations.colors.baseBlack, - chatPollProgressTrackIncoming: '$colorAccentBlack', - chatPollProgressTrackOutgoing: '$colorAccentBlack', + chatPollProgressTrackIncoming: '$accentBlack', + chatPollProgressTrackOutgoing: '$accentBlack', chatReplyIndicatorIncoming: foundations.colors.baseBlack, chatReplyIndicatorOutgoing: foundations.colors.baseBlack, chatTextLink: '$textLink', @@ -469,57 +510,40 @@ export const semantics: IStreamTokens['semantics'] = { chatTextSystem: '$textSecondary', chatTextTimestamp: '$textTertiary', chatTextUsername: '$textSecondary', - chatThreadConnectorIncoming: '$colorAccentBlack', - chatThreadConnectorOutgoing: '$colorAccentBlack', + chatThreadConnectorIncoming: '$accentBlack', + chatThreadConnectorOutgoing: '$accentBlack', chatWaveformBar: '$borderCoreOpacity25', - chatWaveformBarPlaying: '$colorAccentBlack', - colorAccentBlack: foundations.colors.baseBlack, - colorAccentError: foundations.colors.baseBlack, - colorAccentNeutral: foundations.colors.baseBlack, - colorAccentPrimary: foundations.colors.baseBlack, - colorAccentSuccess: foundations.colors.baseBlack, - colorAccentWarning: foundations.colors.baseBlack, - colorBrand50: foundations.colors.baseBlack, - colorBrand100: foundations.colors.baseBlack, - colorBrand200: foundations.colors.baseBlack, - colorBrand300: foundations.colors.baseBlack, - colorBrand400: foundations.colors.baseBlack, - colorBrand500: foundations.colors.baseBlack, - colorBrand600: foundations.colors.baseBlack, - colorBrand700: foundations.colors.baseBlack, - colorBrand800: foundations.colors.baseBlack, - colorBrand900: foundations.colors.baseBlack, - colorBrand950: foundations.colors.baseBlack, + chatWaveformBarPlaying: '$accentBlack', composerBg: '$backgroundElevationElevation1', controlPlayControlBg: '$backgroundElevationElevation1', - controlPlayControlBgInverse: '$colorAccentBlack', + controlPlayControlBgInverse: '$accentBlack', controlPlayControlBorder: '$borderCoreDefault', controlPlayControlIcon: '$textPrimary', controlPlayControlIconInverse: '$textOnAccent', controlProgressBarFill: '$backgroundCoreSurface', controlProgressBarTrack: '$backgroundCoreSurfaceStrong', controlRadiocheckBg: foundations.colors.baseTransparent0, - controlRadiocheckBgSelected: '$colorAccentPrimary', + controlRadiocheckBgSelected: '$accentPrimary', controlRadiocheckBorder: '$borderCoreDefault', controlRadiocheckIconSelected: '$textInverse', - controlRemoveControlBg: '$colorAccentBlack', + controlRemoveControlBg: '$accentBlack', controlRemoveControlBorder: '$borderCoreOnDark', controlRemoveControlIcon: '$textInverse', controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', - controlToggleSwitchBgSelected: '$colorAccentPrimary', + controlToggleSwitchBgSelected: '$accentPrimary', controlToggleSwitchKnob: '$backgroundElevationElevation4', inputBorderDefault: '$borderCoreDefault', inputBorderFocus: '$borderUtilityFocus', inputBorderHover: '$borderCoreStrong', - inputSendIcon: '$colorAccentPrimary', + inputSendIcon: '$accentPrimary', inputSendIconDisabled: '$textDisabled', inputTextDefault: '$textPrimary', inputTextDisabled: '$textDisabled', inputTextIcon: '$textTertiary', inputTextPlaceholder: '$textTertiary', - presenceBgOffline: '$colorAccentNeutral', - presenceBgOnline: '$colorAccentSuccess', + presenceBgOffline: '$accentNeutral', + presenceBgOnline: '$accentSuccess', presenceBorder: '$borderCoreOnDark', reactionBg: '$backgroundElevationElevation1', reactionBorder: '$borderCoreDefault', diff --git a/package/src/theme/light/StreamTokens.android.ts b/package/src/theme/light/StreamTokens.android.ts index 8f1bcc3e71..772b61409e 100644 --- a/package/src/theme/light/StreamTokens.android.ts +++ b/package/src/theme/light/StreamTokens.android.ts @@ -4,8 +4,6 @@ import type { IStreamTokens } from '../StreamTokens.types'; export const foundations: IStreamTokens['foundations'] = { colors: { - baseBlack: '#000000', - baseWhite: '#ffffff', baseTransparent0: 'rgba(255, 255, 255, 0)', baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)', baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)', @@ -13,94 +11,118 @@ export const foundations: IStreamTokens['foundations'] = { baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)', baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)', baseTransparentBlack70: 'rgba(0, 0, 0, 0.7)', - slate50: '#fafbfc', - slate100: '#f2f4f6', - slate200: '#e2e6ea', - slate300: '#d0d5da', - slate400: '#b8bec4', - slate500: '#9ea4aa', - slate600: '#838990', - slate700: '#6a7077', - slate800: '#50565d', - slate900: '#384047', - slate950: '#1e252b', - neutral50: '#f7f7f7', - neutral100: '#ededed', - neutral200: '#d9d9d9', - neutral300: '#c1c1c1', - neutral400: '#a3a3a3', - neutral500: '#7f7f7f', - neutral600: '#636363', - neutral700: '#4a4a4a', - neutral800: '#383838', - neutral900: '#262626', - neutral950: '#151515', - blue50: '#ebf3ff', - blue100: '#d2e3ff', - blue200: '#a6c4ff', - blue300: '#7aa7ff', - blue400: '#4e8bff', + 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: '#0052ce', - blue700: '#0042a3', - blue800: '#003179', - blue900: '#001f4f', - blue950: '#001025', - cyan50: '#f0fcfe', - cyan100: '#d7f7fb', - cyan200: '#bdf1f8', - cyan300: '#a3ecf4', - cyan400: '#89e6f1', - cyan500: '#69e5f6', - cyan600: '#3ec9d9', - cyan700: '#28a8b5', - cyan800: '#1c8791', - cyan900: '#125f66', - cyan950: '#0b3d44', - green50: '#e8fff5', - green100: '#c9fce7', - green200: '#a9f8d9', - green300: '#88f2ca', - green400: '#59e9b5', - green500: '#00e2a1', - green600: '#00b681', - green700: '#008d64', - green800: '#006548', - green900: '#003d2b', - green950: '#002319', - purple50: '#f5effe', - purple100: '#ebdefd', - purple200: '#d8bffc', - purple300: '#c79ffc', - purple400: '#b98af9', - purple500: '#b38af8', - purple600: '#996ce3', - purple700: '#7f55c7', - purple800: '#6640ab', - purple900: '#4d2c8f', - purple950: '#351c6b', - yellow50: '#fff9e5', - yellow100: '#fff1c2', - yellow200: '#ffe8a0', - yellow300: '#ffde7d', - yellow400: '#ffd65a', - yellow500: '#ffd233', - yellow600: '#e6b400', - yellow700: '#c59600', - yellow800: '#9f7700', - yellow900: '#7a5a00', - yellow950: '#4f3900', - red50: '#fcebea', - red100: '#f8cfcd', - red200: '#f3b3b0', - red300: '#ed958f', - red400: '#e6756c', - red500: '#d92f26', - red600: '#b9261f', - red700: '#98201a', - red800: '#761915', - red900: '#54120f', - red950: '#360b09', + 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, @@ -384,24 +406,32 @@ export const components: IStreamTokens['components'] = { } 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.purple200, - avatarPaletteBg5: foundations.colors.yellow200, + 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.5)', + backgroundCoreScrim: 'rgba(0, 0, 0, 0.25)', backgroundCoreSelected: 'rgba(30, 37, 43, 0.15)', backgroundCoreSurface: foundations.colors.slate200, backgroundCoreSurfaceStrong: foundations.colors.slate300, @@ -412,56 +442,67 @@ export const semantics: IStreamTokens['semantics'] = { backgroundElevationElevation3: foundations.colors.baseWhite, backgroundElevationElevation4: foundations.colors.baseWhite, badgeBgDefault: '$backgroundElevationElevation1', - badgeBgError: '$colorAccentError', - badgeBgInverse: '$colorAccentBlack', - badgeBgNeutral: '$colorAccentNeutral', - badgeBgPrimary: '$colorAccentPrimary', + badgeBgError: '$accentError', + badgeBgInverse: '$accentBlack', + badgeBgNeutral: '$accentNeutral', + badgeBgPrimary: '$accentPrimary', badgeBorder: '$borderCoreOnDark', badgeText: '$textOnAccent', badgeTextInverse: '$textPrimary', - borderCoreDefault: foundations.colors.slate200, + 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.slate300, + borderCoreStrong: foundations.colors.slate200, borderCoreSubtle: foundations.colors.slate100, borderUtilityDisabled: foundations.colors.slate200, - borderUtilityError: '$colorAccentError', - borderUtilityFocus: '$colorBrand300', - borderUtilitySelected: '$colorAccentPrimary', - borderUtilitySuccess: '$colorAccentSuccess', - borderUtilityWarning: '$colorAccentWarning', - buttonDestructiveBg: '$colorAccentError', + 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: '$colorAccentError', - buttonDestructiveText: '$colorAccentError', + buttonDestructiveBorder: '$accentError', + buttonDestructiveText: '$accentError', buttonDestructiveTextOnAccent: '$textOnAccent', - buttonPrimaryBg: '$colorAccentPrimary', + buttonPrimaryBg: '$accentPrimary', buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, - buttonPrimaryBorder: '$colorBrand200', - buttonPrimaryText: '$colorAccentPrimary', + buttonPrimaryBorder: '$brand200', + buttonPrimaryText: '$accentPrimary', buttonPrimaryTextOnAccent: '$textOnAccent', buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', buttonSecondaryBorder: '$borderCoreDefault', buttonSecondaryText: '$textPrimary', buttonSecondaryTextOnAccent: '$textPrimary', - chatBgAttachmentIncoming: foundations.colors.slate200, - chatBgAttachmentOutgoing: '$colorBrand200', + chatBgAttachmentIncoming: foundations.colors.slate150, + chatBgAttachmentOutgoing: '$brand150', chatBgIncoming: foundations.colors.slate100, - chatBgOutgoing: '$colorBrand100', - chatBgTypingIndicator: '$colorAccentNeutral', + chatBgOutgoing: '$brand100', + chatBgTypingIndicator: '$accentNeutral', chatBorderIncoming: foundations.colors.baseTransparent0, chatBorderOnChatIncoming: foundations.colors.slate400, - chatBorderOnChatOutgoing: '$colorBrand300', + chatBorderOnChatOutgoing: '$brand300', chatBorderOutgoing: foundations.colors.baseTransparent0, chatPollProgressFillIncoming: foundations.colors.slate300, - chatPollProgressFillOutgoing: '$colorBrand200', + chatPollProgressFillOutgoing: '$brand200', chatPollProgressTrackIncoming: foundations.colors.slate600, - chatPollProgressTrackOutgoing: '$colorAccentPrimary', + chatPollProgressTrackOutgoing: '$accentPrimary', chatReplyIndicatorIncoming: foundations.colors.slate400, - chatReplyIndicatorOutgoing: '$colorBrand400', + chatReplyIndicatorOutgoing: '$brand400', chatTextLink: '$textLink', chatTextMention: '$textLink', chatTextMessage: '$textPrimary', @@ -472,68 +513,51 @@ export const semantics: IStreamTokens['semantics'] = { chatThreadConnectorIncoming: foundations.colors.slate200, chatThreadConnectorOutgoing: '$chatBgOutgoing', chatWaveformBar: '$borderCoreOpacity25', - chatWaveformBarPlaying: '$colorAccentPrimary', - colorAccentBlack: foundations.colors.baseBlack, - colorAccentError: foundations.colors.red500, - colorAccentNeutral: foundations.colors.slate500, - colorAccentPrimary: '$colorBrand500', - colorAccentSuccess: foundations.colors.green500, - colorAccentWarning: foundations.colors.yellow600, - colorBrand50: foundations.colors.blue50, - colorBrand100: foundations.colors.blue100, - colorBrand200: foundations.colors.blue200, - colorBrand300: foundations.colors.blue300, - colorBrand400: foundations.colors.blue400, - colorBrand500: foundations.colors.blue500, - colorBrand600: foundations.colors.blue600, - colorBrand700: foundations.colors.blue700, - colorBrand800: foundations.colors.blue800, - colorBrand900: foundations.colors.blue900, - colorBrand950: foundations.colors.blue950, + chatWaveformBarPlaying: '$accentPrimary', composerBg: '$backgroundElevationElevation1', controlPlayControlBg: '$backgroundElevationElevation1', - controlPlayControlBgInverse: '$colorAccentBlack', + controlPlayControlBgInverse: '$accentBlack', controlPlayControlBorder: '$borderCoreDefault', controlPlayControlIcon: '$textPrimary', controlPlayControlIconInverse: '$textOnAccent', controlProgressBarFill: foundations.colors.slate200, controlProgressBarTrack: foundations.colors.slate500, controlRadiocheckBg: foundations.colors.baseTransparent0, - controlRadiocheckBgSelected: '$colorAccentPrimary', + controlRadiocheckBgSelected: '$accentPrimary', controlRadiocheckBorder: '$borderCoreDefault', controlRadiocheckIconSelected: '$textInverse', - controlRemoveControlBg: '$colorAccentBlack', + controlRemoveControlBg: '$accentBlack', controlRemoveControlBorder: '$borderCoreOnDark', controlRemoveControlIcon: '$textOnAccent', controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', - controlToggleSwitchBgSelected: '$colorAccentPrimary', + controlToggleSwitchBgSelected: '$accentPrimary', controlToggleSwitchKnob: '$backgroundElevationElevation4', inputBorderDefault: '$borderCoreDefault', - inputBorderFocus: '$borderUtilityFocus', + inputBorderFocus: '$borderUtilitySelected', inputBorderHover: '$borderCoreStrong', - inputSendIcon: '$colorAccentPrimary', + inputSendIcon: '$accentPrimary', inputSendIconDisabled: '$textDisabled', inputTextDefault: '$textPrimary', inputTextDisabled: '$textDisabled', inputTextIcon: '$textTertiary', inputTextPlaceholder: '$textTertiary', - presenceBgOffline: '$colorAccentNeutral', - presenceBgOnline: '$colorAccentSuccess', + presenceBgOffline: '$accentNeutral', + presenceBgOnline: '$accentSuccess', presenceBorder: '$borderCoreOnDark', reactionBg: '$backgroundElevationElevation1', reactionBorder: '$borderCoreDefault', reactionEmoji: '$textPrimary', reactionText: '$textPrimary', systemBgBlur: 'rgba(255, 255, 255, 0.01)', - systemCaret: '$colorAccentPrimary', + systemCaret: '$accentPrimary', systemScrollbar: 'rgba(0, 0, 0, 0.5)', systemText: foundations.colors.baseBlack, textDisabled: foundations.colors.slate400, textInverse: foundations.colors.baseWhite, - textLink: '$colorAccentPrimary', + textLink: '$accentPrimary', textOnAccent: foundations.colors.baseWhite, textPrimary: foundations.colors.slate900, textSecondary: foundations.colors.slate700, - textTertiary: foundations.colors.slate600, + textTertiary: foundations.colors.slate500, } as const; diff --git a/package/src/theme/light/StreamTokens.ios.ts b/package/src/theme/light/StreamTokens.ios.ts index d0fdbea0bb..c6bdb4d799 100644 --- a/package/src/theme/light/StreamTokens.ios.ts +++ b/package/src/theme/light/StreamTokens.ios.ts @@ -4,8 +4,6 @@ import type { IStreamTokens } from '../StreamTokens.types'; export const foundations: IStreamTokens['foundations'] = { colors: { - baseBlack: '#000000', - baseWhite: '#ffffff', baseTransparent0: 'rgba(255, 255, 255, 0)', baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)', baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)', @@ -13,94 +11,118 @@ export const foundations: IStreamTokens['foundations'] = { baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)', baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)', baseTransparentBlack70: 'rgba(0, 0, 0, 0.7)', - slate50: '#fafbfc', - slate100: '#f2f4f6', - slate200: '#e2e6ea', - slate300: '#d0d5da', - slate400: '#b8bec4', - slate500: '#9ea4aa', - slate600: '#838990', - slate700: '#6a7077', - slate800: '#50565d', - slate900: '#384047', - slate950: '#1e252b', - neutral50: '#f7f7f7', - neutral100: '#ededed', - neutral200: '#d9d9d9', - neutral300: '#c1c1c1', - neutral400: '#a3a3a3', - neutral500: '#7f7f7f', - neutral600: '#636363', - neutral700: '#4a4a4a', - neutral800: '#383838', - neutral900: '#262626', - neutral950: '#151515', - blue50: '#ebf3ff', - blue100: '#d2e3ff', - blue200: '#a6c4ff', - blue300: '#7aa7ff', - blue400: '#4e8bff', + 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: '#0052ce', - blue700: '#0042a3', - blue800: '#003179', - blue900: '#001f4f', - blue950: '#001025', - cyan50: '#f0fcfe', - cyan100: '#d7f7fb', - cyan200: '#bdf1f8', - cyan300: '#a3ecf4', - cyan400: '#89e6f1', - cyan500: '#69e5f6', - cyan600: '#3ec9d9', - cyan700: '#28a8b5', - cyan800: '#1c8791', - cyan900: '#125f66', - cyan950: '#0b3d44', - green50: '#e8fff5', - green100: '#c9fce7', - green200: '#a9f8d9', - green300: '#88f2ca', - green400: '#59e9b5', - green500: '#00e2a1', - green600: '#00b681', - green700: '#008d64', - green800: '#006548', - green900: '#003d2b', - green950: '#002319', - purple50: '#f5effe', - purple100: '#ebdefd', - purple200: '#d8bffc', - purple300: '#c79ffc', - purple400: '#b98af9', - purple500: '#b38af8', - purple600: '#996ce3', - purple700: '#7f55c7', - purple800: '#6640ab', - purple900: '#4d2c8f', - purple950: '#351c6b', - yellow50: '#fff9e5', - yellow100: '#fff1c2', - yellow200: '#ffe8a0', - yellow300: '#ffde7d', - yellow400: '#ffd65a', - yellow500: '#ffd233', - yellow600: '#e6b400', - yellow700: '#c59600', - yellow800: '#9f7700', - yellow900: '#7a5a00', - yellow950: '#4f3900', - red50: '#fcebea', - red100: '#f8cfcd', - red200: '#f3b3b0', - red300: '#ed958f', - red400: '#e6756c', - red500: '#d92f26', - red600: '#b9261f', - red700: '#98201a', - red800: '#761915', - red900: '#54120f', - red950: '#360b09', + 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, @@ -384,24 +406,32 @@ export const components: IStreamTokens['components'] = { } 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.purple200, - avatarPaletteBg5: foundations.colors.yellow200, + 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.5)', + backgroundCoreScrim: 'rgba(0, 0, 0, 0.25)', backgroundCoreSelected: 'rgba(30, 37, 43, 0.15)', backgroundCoreSurface: foundations.colors.slate200, backgroundCoreSurfaceStrong: foundations.colors.slate300, @@ -412,56 +442,67 @@ export const semantics: IStreamTokens['semantics'] = { backgroundElevationElevation3: foundations.colors.baseWhite, backgroundElevationElevation4: foundations.colors.baseWhite, badgeBgDefault: '$backgroundElevationElevation1', - badgeBgError: '$colorAccentError', - badgeBgInverse: '$colorAccentBlack', - badgeBgNeutral: '$colorAccentNeutral', - badgeBgPrimary: '$colorAccentPrimary', + badgeBgError: '$accentError', + badgeBgInverse: '$accentBlack', + badgeBgNeutral: '$accentNeutral', + badgeBgPrimary: '$accentPrimary', badgeBorder: '$borderCoreOnDark', badgeText: '$textOnAccent', badgeTextInverse: '$textPrimary', - borderCoreDefault: foundations.colors.slate200, + 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.slate300, + borderCoreStrong: foundations.colors.slate200, borderCoreSubtle: foundations.colors.slate100, borderUtilityDisabled: foundations.colors.slate200, - borderUtilityError: '$colorAccentError', - borderUtilityFocus: '$colorBrand300', - borderUtilitySelected: '$colorAccentPrimary', - borderUtilitySuccess: '$colorAccentSuccess', - borderUtilityWarning: '$colorAccentWarning', - buttonDestructiveBg: '$colorAccentError', + 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: '$colorAccentError', - buttonDestructiveText: '$colorAccentError', + buttonDestructiveBorder: '$accentError', + buttonDestructiveText: '$accentError', buttonDestructiveTextOnAccent: '$textOnAccent', - buttonPrimaryBg: '$colorAccentPrimary', + buttonPrimaryBg: '$accentPrimary', buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, - buttonPrimaryBorder: '$colorBrand200', - buttonPrimaryText: '$colorAccentPrimary', + buttonPrimaryBorder: '$brand200', + buttonPrimaryText: '$accentPrimary', buttonPrimaryTextOnAccent: '$textOnAccent', buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', buttonSecondaryBorder: '$borderCoreDefault', buttonSecondaryText: '$textPrimary', buttonSecondaryTextOnAccent: '$textPrimary', - chatBgAttachmentIncoming: foundations.colors.slate200, - chatBgAttachmentOutgoing: '$colorBrand200', + chatBgAttachmentIncoming: foundations.colors.slate150, + chatBgAttachmentOutgoing: '$brand150', chatBgIncoming: foundations.colors.slate100, - chatBgOutgoing: '$colorBrand100', - chatBgTypingIndicator: '$colorAccentNeutral', + chatBgOutgoing: '$brand100', + chatBgTypingIndicator: '$accentNeutral', chatBorderIncoming: foundations.colors.baseTransparent0, chatBorderOnChatIncoming: foundations.colors.slate400, - chatBorderOnChatOutgoing: '$colorBrand300', + chatBorderOnChatOutgoing: '$brand300', chatBorderOutgoing: foundations.colors.baseTransparent0, chatPollProgressFillIncoming: foundations.colors.slate300, - chatPollProgressFillOutgoing: '$colorBrand200', + chatPollProgressFillOutgoing: '$brand200', chatPollProgressTrackIncoming: foundations.colors.slate600, - chatPollProgressTrackOutgoing: '$colorAccentPrimary', + chatPollProgressTrackOutgoing: '$accentPrimary', chatReplyIndicatorIncoming: foundations.colors.slate400, - chatReplyIndicatorOutgoing: '$colorBrand400', + chatReplyIndicatorOutgoing: '$brand400', chatTextLink: '$textLink', chatTextMention: '$textLink', chatTextMessage: '$textPrimary', @@ -472,68 +513,51 @@ export const semantics: IStreamTokens['semantics'] = { chatThreadConnectorIncoming: foundations.colors.slate200, chatThreadConnectorOutgoing: '$chatBgOutgoing', chatWaveformBar: '$borderCoreOpacity25', - chatWaveformBarPlaying: '$colorAccentPrimary', - colorAccentBlack: foundations.colors.baseBlack, - colorAccentError: foundations.colors.red500, - colorAccentNeutral: foundations.colors.slate500, - colorAccentPrimary: '$colorBrand500', - colorAccentSuccess: foundations.colors.green500, - colorAccentWarning: foundations.colors.yellow600, - colorBrand50: foundations.colors.blue50, - colorBrand100: foundations.colors.blue100, - colorBrand200: foundations.colors.blue200, - colorBrand300: foundations.colors.blue300, - colorBrand400: foundations.colors.blue400, - colorBrand500: foundations.colors.blue500, - colorBrand600: foundations.colors.blue600, - colorBrand700: foundations.colors.blue700, - colorBrand800: foundations.colors.blue800, - colorBrand900: foundations.colors.blue900, - colorBrand950: foundations.colors.blue950, + chatWaveformBarPlaying: '$accentPrimary', composerBg: '$backgroundElevationElevation1', controlPlayControlBg: '$backgroundElevationElevation1', - controlPlayControlBgInverse: '$colorAccentBlack', + controlPlayControlBgInverse: '$accentBlack', controlPlayControlBorder: '$borderCoreDefault', controlPlayControlIcon: '$textPrimary', controlPlayControlIconInverse: '$textOnAccent', controlProgressBarFill: foundations.colors.slate200, controlProgressBarTrack: foundations.colors.slate500, controlRadiocheckBg: foundations.colors.baseTransparent0, - controlRadiocheckBgSelected: '$colorAccentPrimary', + controlRadiocheckBgSelected: '$accentPrimary', controlRadiocheckBorder: '$borderCoreDefault', controlRadiocheckIconSelected: '$textInverse', - controlRemoveControlBg: '$colorAccentBlack', + controlRemoveControlBg: '$accentBlack', controlRemoveControlBorder: '$borderCoreOnDark', controlRemoveControlIcon: '$textOnAccent', controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', - controlToggleSwitchBgSelected: '$colorAccentPrimary', + controlToggleSwitchBgSelected: '$accentPrimary', controlToggleSwitchKnob: '$backgroundElevationElevation4', inputBorderDefault: '$borderCoreDefault', - inputBorderFocus: '$borderUtilityFocus', + inputBorderFocus: '$borderUtilitySelected', inputBorderHover: '$borderCoreStrong', - inputSendIcon: '$colorAccentPrimary', + inputSendIcon: '$accentPrimary', inputSendIconDisabled: '$textDisabled', inputTextDefault: '$textPrimary', inputTextDisabled: '$textDisabled', inputTextIcon: '$textTertiary', inputTextPlaceholder: '$textTertiary', - presenceBgOffline: '$colorAccentNeutral', - presenceBgOnline: '$colorAccentSuccess', + presenceBgOffline: '$accentNeutral', + presenceBgOnline: '$accentSuccess', presenceBorder: '$borderCoreOnDark', reactionBg: '$backgroundElevationElevation1', reactionBorder: '$borderCoreDefault', reactionEmoji: '$textPrimary', reactionText: '$textPrimary', systemBgBlur: 'rgba(255, 255, 255, 0.01)', - systemCaret: '$colorAccentPrimary', + systemCaret: '$accentPrimary', systemScrollbar: 'rgba(0, 0, 0, 0.5)', systemText: foundations.colors.baseBlack, textDisabled: foundations.colors.slate400, textInverse: foundations.colors.baseWhite, - textLink: '$colorAccentPrimary', + textLink: '$accentPrimary', textOnAccent: foundations.colors.baseWhite, textPrimary: foundations.colors.slate900, textSecondary: foundations.colors.slate700, - textTertiary: foundations.colors.slate600, + textTertiary: foundations.colors.slate500, } as const; diff --git a/package/src/theme/light/StreamTokens.web.ts b/package/src/theme/light/StreamTokens.web.ts index e829a80f01..c46454929d 100644 --- a/package/src/theme/light/StreamTokens.web.ts +++ b/package/src/theme/light/StreamTokens.web.ts @@ -4,8 +4,6 @@ import type { IStreamTokens } from '../StreamTokens.types'; export const foundations: IStreamTokens['foundations'] = { colors: { - baseBlack: '#000000', - baseWhite: '#ffffff', baseTransparent0: 'rgba(255, 255, 255, 0)', baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)', baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)', @@ -13,94 +11,118 @@ export const foundations: IStreamTokens['foundations'] = { baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)', baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)', baseTransparentBlack70: 'rgba(0, 0, 0, 0.7)', - slate50: '#fafbfc', - slate100: '#f2f4f6', - slate200: '#e2e6ea', - slate300: '#d0d5da', - slate400: '#b8bec4', - slate500: '#9ea4aa', - slate600: '#838990', - slate700: '#6a7077', - slate800: '#50565d', - slate900: '#384047', - slate950: '#1e252b', - neutral50: '#f7f7f7', - neutral100: '#ededed', - neutral200: '#d9d9d9', - neutral300: '#c1c1c1', - neutral400: '#a3a3a3', - neutral500: '#7f7f7f', - neutral600: '#636363', - neutral700: '#4a4a4a', - neutral800: '#383838', - neutral900: '#262626', - neutral950: '#151515', - blue50: '#ebf3ff', - blue100: '#d2e3ff', - blue200: '#a6c4ff', - blue300: '#7aa7ff', - blue400: '#4e8bff', + 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: '#0052ce', - blue700: '#0042a3', - blue800: '#003179', - blue900: '#001f4f', - blue950: '#001025', - cyan50: '#f0fcfe', - cyan100: '#d7f7fb', - cyan200: '#bdf1f8', - cyan300: '#a3ecf4', - cyan400: '#89e6f1', - cyan500: '#69e5f6', - cyan600: '#3ec9d9', - cyan700: '#28a8b5', - cyan800: '#1c8791', - cyan900: '#125f66', - cyan950: '#0b3d44', - green50: '#e8fff5', - green100: '#c9fce7', - green200: '#a9f8d9', - green300: '#88f2ca', - green400: '#59e9b5', - green500: '#00e2a1', - green600: '#00b681', - green700: '#008d64', - green800: '#006548', - green900: '#003d2b', - green950: '#002319', - purple50: '#f5effe', - purple100: '#ebdefd', - purple200: '#d8bffc', - purple300: '#c79ffc', - purple400: '#b98af9', - purple500: '#b38af8', - purple600: '#996ce3', - purple700: '#7f55c7', - purple800: '#6640ab', - purple900: '#4d2c8f', - purple950: '#351c6b', - yellow50: '#fff9e5', - yellow100: '#fff1c2', - yellow200: '#ffe8a0', - yellow300: '#ffde7d', - yellow400: '#ffd65a', - yellow500: '#ffd233', - yellow600: '#e6b400', - yellow700: '#c59600', - yellow800: '#9f7700', - yellow900: '#7a5a00', - yellow950: '#4f3900', - red50: '#fcebea', - red100: '#f8cfcd', - red200: '#f3b3b0', - red300: '#ed958f', - red400: '#e6756c', - red500: '#d92f26', - red600: '#b9261f', - red700: '#98201a', - red800: '#761915', - red900: '#54120f', - red950: '#360b09', + 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, @@ -384,24 +406,32 @@ export const components: IStreamTokens['components'] = { } 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.purple200, - avatarPaletteBg5: foundations.colors.yellow200, + 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.5)', + backgroundCoreScrim: 'rgba(0, 0, 0, 0.25)', backgroundCoreSelected: 'rgba(30, 37, 43, 0.15)', backgroundCoreSurface: foundations.colors.slate200, backgroundCoreSurfaceStrong: foundations.colors.slate300, @@ -412,56 +442,67 @@ export const semantics: IStreamTokens['semantics'] = { backgroundElevationElevation3: foundations.colors.baseWhite, backgroundElevationElevation4: foundations.colors.baseWhite, badgeBgDefault: '$backgroundElevationElevation1', - badgeBgError: '$colorAccentError', - badgeBgInverse: '$colorAccentBlack', - badgeBgNeutral: '$colorAccentNeutral', - badgeBgPrimary: '$colorAccentPrimary', + badgeBgError: '$accentError', + badgeBgInverse: '$accentBlack', + badgeBgNeutral: '$accentNeutral', + badgeBgPrimary: '$accentPrimary', badgeBorder: '$borderCoreOnDark', badgeText: '$textOnAccent', badgeTextInverse: '$textPrimary', - borderCoreDefault: foundations.colors.slate200, + 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.slate300, + borderCoreStrong: foundations.colors.slate200, borderCoreSubtle: foundations.colors.slate100, borderUtilityDisabled: foundations.colors.slate200, - borderUtilityError: '$colorAccentError', - borderUtilityFocus: '$colorBrand300', - borderUtilitySelected: '$colorAccentPrimary', - borderUtilitySuccess: '$colorAccentSuccess', - borderUtilityWarning: '$colorAccentWarning', - buttonDestructiveBg: '$colorAccentError', + 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: '$colorAccentError', - buttonDestructiveText: '$colorAccentError', + buttonDestructiveBorder: '$accentError', + buttonDestructiveText: '$accentError', buttonDestructiveTextOnAccent: '$textOnAccent', - buttonPrimaryBg: '$colorAccentPrimary', + buttonPrimaryBg: '$accentPrimary', buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0, - buttonPrimaryBorder: '$colorBrand200', - buttonPrimaryText: '$colorAccentPrimary', + buttonPrimaryBorder: '$brand200', + buttonPrimaryText: '$accentPrimary', buttonPrimaryTextOnAccent: '$textOnAccent', buttonSecondaryBg: '$backgroundCoreSurfaceSubtle', buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0', buttonSecondaryBorder: '$borderCoreDefault', buttonSecondaryText: '$textPrimary', buttonSecondaryTextOnAccent: '$textPrimary', - chatBgAttachmentIncoming: foundations.colors.slate200, - chatBgAttachmentOutgoing: '$colorBrand200', + chatBgAttachmentIncoming: foundations.colors.slate150, + chatBgAttachmentOutgoing: '$brand150', chatBgIncoming: foundations.colors.slate100, - chatBgOutgoing: '$colorBrand100', - chatBgTypingIndicator: '$colorAccentNeutral', + chatBgOutgoing: '$brand100', + chatBgTypingIndicator: '$accentNeutral', chatBorderIncoming: foundations.colors.baseTransparent0, chatBorderOnChatIncoming: foundations.colors.slate400, - chatBorderOnChatOutgoing: '$colorBrand300', + chatBorderOnChatOutgoing: '$brand300', chatBorderOutgoing: foundations.colors.baseTransparent0, chatPollProgressFillIncoming: foundations.colors.slate300, - chatPollProgressFillOutgoing: '$colorBrand200', + chatPollProgressFillOutgoing: '$brand200', chatPollProgressTrackIncoming: foundations.colors.slate600, - chatPollProgressTrackOutgoing: '$colorAccentPrimary', + chatPollProgressTrackOutgoing: '$accentPrimary', chatReplyIndicatorIncoming: foundations.colors.slate400, - chatReplyIndicatorOutgoing: '$colorBrand400', + chatReplyIndicatorOutgoing: '$brand400', chatTextLink: '$textLink', chatTextMention: '$textLink', chatTextMessage: '$textPrimary', @@ -472,68 +513,51 @@ export const semantics: IStreamTokens['semantics'] = { chatThreadConnectorIncoming: foundations.colors.slate200, chatThreadConnectorOutgoing: '$chatBgOutgoing', chatWaveformBar: '$borderCoreOpacity25', - chatWaveformBarPlaying: '$colorAccentPrimary', - colorAccentBlack: foundations.colors.baseBlack, - colorAccentError: foundations.colors.red500, - colorAccentNeutral: foundations.colors.slate500, - colorAccentPrimary: '$colorBrand500', - colorAccentSuccess: foundations.colors.green500, - colorAccentWarning: foundations.colors.yellow600, - colorBrand50: foundations.colors.blue50, - colorBrand100: foundations.colors.blue100, - colorBrand200: foundations.colors.blue200, - colorBrand300: foundations.colors.blue300, - colorBrand400: foundations.colors.blue400, - colorBrand500: foundations.colors.blue500, - colorBrand600: foundations.colors.blue600, - colorBrand700: foundations.colors.blue700, - colorBrand800: foundations.colors.blue800, - colorBrand900: foundations.colors.blue900, - colorBrand950: foundations.colors.blue950, + chatWaveformBarPlaying: '$accentPrimary', composerBg: '$backgroundElevationElevation1', controlPlayControlBg: '$backgroundElevationElevation1', - controlPlayControlBgInverse: '$colorAccentBlack', + controlPlayControlBgInverse: '$accentBlack', controlPlayControlBorder: '$borderCoreDefault', controlPlayControlIcon: '$textPrimary', controlPlayControlIconInverse: '$textOnAccent', controlProgressBarFill: foundations.colors.slate200, controlProgressBarTrack: foundations.colors.slate500, controlRadiocheckBg: foundations.colors.baseTransparent0, - controlRadiocheckBgSelected: '$colorAccentPrimary', + controlRadiocheckBgSelected: '$accentPrimary', controlRadiocheckBorder: '$borderCoreDefault', controlRadiocheckIconSelected: '$textInverse', - controlRemoveControlBg: '$colorAccentBlack', + controlRemoveControlBg: '$accentBlack', controlRemoveControlBorder: '$borderCoreOnDark', controlRemoveControlIcon: '$textOnAccent', controlToggleSwitchBg: '$backgroundCoreSurfaceStrong', controlToggleSwitchBgDisabled: '$backgroundCoreDisabled', - controlToggleSwitchBgSelected: '$colorAccentPrimary', + controlToggleSwitchBgSelected: '$accentPrimary', controlToggleSwitchKnob: '$backgroundElevationElevation4', inputBorderDefault: '$borderCoreDefault', - inputBorderFocus: '$borderUtilityFocus', + inputBorderFocus: '$borderUtilitySelected', inputBorderHover: '$borderCoreStrong', - inputSendIcon: '$colorAccentPrimary', + inputSendIcon: '$accentPrimary', inputSendIconDisabled: '$textDisabled', inputTextDefault: '$textPrimary', inputTextDisabled: '$textDisabled', inputTextIcon: '$textTertiary', inputTextPlaceholder: '$textTertiary', - presenceBgOffline: '$colorAccentNeutral', - presenceBgOnline: '$colorAccentSuccess', + presenceBgOffline: '$accentNeutral', + presenceBgOnline: '$accentSuccess', presenceBorder: '$borderCoreOnDark', reactionBg: '$backgroundElevationElevation1', reactionBorder: '$borderCoreDefault', reactionEmoji: '$textPrimary', reactionText: '$textPrimary', systemBgBlur: 'rgba(255, 255, 255, 0.01)', - systemCaret: '$colorAccentPrimary', + systemCaret: '$accentPrimary', systemScrollbar: 'rgba(0, 0, 0, 0.5)', systemText: foundations.colors.baseBlack, textDisabled: foundations.colors.slate400, textInverse: foundations.colors.baseWhite, - textLink: '$colorAccentPrimary', + textLink: '$accentPrimary', textOnAccent: foundations.colors.baseWhite, textPrimary: foundations.colors.slate900, textSecondary: foundations.colors.slate700, - textTertiary: foundations.colors.slate600, + textTertiary: foundations.colors.slate500, } as const; From ce32015b1783747d5d0c08aecf5f1d3647e9dbab Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Wed, 28 Jan 2026 14:34:35 +0100 Subject: [PATCH 5/9] chore: remove log --- package/src/contexts/themeContext/ThemeContext.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/package/src/contexts/themeContext/ThemeContext.tsx b/package/src/contexts/themeContext/ThemeContext.tsx index adb593dfba..3d7db92b7b 100644 --- a/package/src/contexts/themeContext/ThemeContext.tsx +++ b/package/src/contexts/themeContext/ThemeContext.tsx @@ -40,8 +40,6 @@ export const mergeThemes = (params: MergedThemesParams) => { const semantics = resolveTokensTopologically(finalTheme.semantics); - console.log('TESTTESTTEST: ', { ...finalTheme, semantics }); - return { ...finalTheme, semantics }; }; From 5af31111e0161dad4b00f330a8afb754aee7c40f Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Wed, 28 Jan 2026 21:31:00 +0100 Subject: [PATCH 6/9] refactor: avatar usage --- package/src/components/ui/Avatar/Avatar.tsx | 10 ++++------ .../src/components/ui/Avatar/ChannelAvatar.tsx | 17 +++++++---------- package/src/components/ui/Avatar/UserAvatar.tsx | 17 ++++++++--------- 3 files changed, 19 insertions(+), 25 deletions(-) diff --git a/package/src/components/ui/Avatar/Avatar.tsx b/package/src/components/ui/Avatar/Avatar.tsx index 508f0a7a51..387bfba984 100644 --- a/package/src/components/ui/Avatar/Avatar.tsx +++ b/package/src/components/ui/Avatar/Avatar.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useMemo, useState } from 'react'; -import { Image, StyleSheet, View } from 'react-native'; +import { ColorValue, Image, StyleSheet, View } from 'react-native'; import { avatarSizes } from './constants'; @@ -11,17 +11,15 @@ export type AvatarProps = { 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 defaultAvatarBg = semantics.avatarPaletteBg1; const { backgroundColor = defaultAvatarBg, size, imageUrl, placeholder, showBorder } = props; const styles = useStyles(); diff --git a/package/src/components/ui/Avatar/ChannelAvatar.tsx b/package/src/components/ui/Avatar/ChannelAvatar.tsx index bc1c6dd2d0..9755528ba6 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 ( Date: Wed, 28 Jan 2026 22:03:38 +0100 Subject: [PATCH 7/9] fix: use ImageComponent for caching --- package/src/components/ui/Avatar/Avatar.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/package/src/components/ui/Avatar/Avatar.tsx b/package/src/components/ui/Avatar/Avatar.tsx index 387bfba984..a869d095c3 100644 --- a/package/src/components/ui/Avatar/Avatar.tsx +++ b/package/src/components/ui/Avatar/Avatar.tsx @@ -1,8 +1,9 @@ import React, { useCallback, useMemo, useState } from 'react'; -import { ColorValue, 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'; @@ -19,6 +20,7 @@ export const Avatar = (props: AvatarProps) => { const { theme: { semantics }, } = useTheme(); + const { ImageComponent } = useChatContext(); const defaultAvatarBg = semantics.avatarPaletteBg1; const { backgroundColor = defaultAvatarBg, size, imageUrl, placeholder, showBorder } = props; const styles = useStyles(); @@ -38,7 +40,7 @@ export const Avatar = (props: AvatarProps) => { testID='avatar-image' > {imageUrl && !error ? ( - Date: Wed, 28 Jan 2026 22:08:29 +0100 Subject: [PATCH 8/9] fix: keep design tokens in generated directory --- .../src/contexts/themeContext/utils/theme.ts | 20 +- .../src/theme/generated/StreamTokens.types.ts | 494 ++++++++++++++++++ .../dark/StreamTokens.android.ts | 0 .../{ => generated}/dark/StreamTokens.ios.ts | 0 .../{ => generated}/dark/StreamTokens.web.ts | 0 .../StreamTokens.android.ts | 0 .../high-contrast-light/StreamTokens.ios.ts | 0 .../high-contrast-light/StreamTokens.web.ts | 0 .../light/StreamTokens.android.ts | 0 .../{ => generated}/light/StreamTokens.ios.ts | 0 .../{ => generated}/light/StreamTokens.web.ts | 0 package/src/theme/index.ts | 2 +- package/sync-theme.sh | 2 +- 13 files changed, 497 insertions(+), 21 deletions(-) create mode 100644 package/src/theme/generated/StreamTokens.types.ts rename package/src/theme/{ => generated}/dark/StreamTokens.android.ts (100%) rename package/src/theme/{ => generated}/dark/StreamTokens.ios.ts (100%) rename package/src/theme/{ => generated}/dark/StreamTokens.web.ts (100%) rename package/src/theme/{ => generated}/high-contrast-light/StreamTokens.android.ts (100%) rename package/src/theme/{ => generated}/high-contrast-light/StreamTokens.ios.ts (100%) rename package/src/theme/{ => generated}/high-contrast-light/StreamTokens.web.ts (100%) rename package/src/theme/{ => generated}/light/StreamTokens.android.ts (100%) rename package/src/theme/{ => generated}/light/StreamTokens.ios.ts (100%) rename package/src/theme/{ => generated}/light/StreamTokens.web.ts (100%) diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts index 2f0a71440b..6bf086b5b7 100644 --- a/package/src/contexts/themeContext/utils/theme.ts +++ b/package/src/contexts/themeContext/utils/theme.ts @@ -1,14 +1,8 @@ import { type ColorValue, type ImageStyle, type TextStyle, type ViewStyle } from 'react-native'; import type { CircleProps, StopProps } from 'react-native-svg'; -import { - primitives, - foundations, - components, - semantics, -} from '../../../../src/theme/light/StreamTokens'; - import type { IconProps } from '../../../icons/utils/base'; +import { semantics } from '../../../theme'; export const DEFAULT_STATUS_ICON_SIZE = 16; export const BASE_AVATAR_SIZE = 32; @@ -892,23 +886,11 @@ export type Theme = { thumb: ViewStyle; waveform: ViewStyle; }; - // spacing: typeof Spacing; - // radius: typeof Radius; - // typography: typeof Typography; - primitives: typeof primitives; - foundations: typeof foundations; - components: typeof components; semantics: typeof semantics; }; export const defaultTheme: Theme = { - primitives, - foundations, - components, semantics, - // spacing: Spacing, - // radius: Radius, - // typography: Typography, aiTypingIndicatorView: { container: {}, text: {}, diff --git a/package/src/theme/generated/StreamTokens.types.ts b/package/src/theme/generated/StreamTokens.types.ts new file mode 100644 index 0000000000..8375e80891 --- /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/dark/StreamTokens.android.ts b/package/src/theme/generated/dark/StreamTokens.android.ts similarity index 100% rename from package/src/theme/dark/StreamTokens.android.ts rename to package/src/theme/generated/dark/StreamTokens.android.ts diff --git a/package/src/theme/dark/StreamTokens.ios.ts b/package/src/theme/generated/dark/StreamTokens.ios.ts similarity index 100% rename from package/src/theme/dark/StreamTokens.ios.ts rename to package/src/theme/generated/dark/StreamTokens.ios.ts diff --git a/package/src/theme/dark/StreamTokens.web.ts b/package/src/theme/generated/dark/StreamTokens.web.ts similarity index 100% rename from package/src/theme/dark/StreamTokens.web.ts rename to package/src/theme/generated/dark/StreamTokens.web.ts diff --git a/package/src/theme/high-contrast-light/StreamTokens.android.ts b/package/src/theme/generated/high-contrast-light/StreamTokens.android.ts similarity index 100% rename from package/src/theme/high-contrast-light/StreamTokens.android.ts rename to package/src/theme/generated/high-contrast-light/StreamTokens.android.ts diff --git a/package/src/theme/high-contrast-light/StreamTokens.ios.ts b/package/src/theme/generated/high-contrast-light/StreamTokens.ios.ts similarity index 100% rename from package/src/theme/high-contrast-light/StreamTokens.ios.ts rename to package/src/theme/generated/high-contrast-light/StreamTokens.ios.ts diff --git a/package/src/theme/high-contrast-light/StreamTokens.web.ts b/package/src/theme/generated/high-contrast-light/StreamTokens.web.ts similarity index 100% rename from package/src/theme/high-contrast-light/StreamTokens.web.ts rename to package/src/theme/generated/high-contrast-light/StreamTokens.web.ts diff --git a/package/src/theme/light/StreamTokens.android.ts b/package/src/theme/generated/light/StreamTokens.android.ts similarity index 100% rename from package/src/theme/light/StreamTokens.android.ts rename to package/src/theme/generated/light/StreamTokens.android.ts diff --git a/package/src/theme/light/StreamTokens.ios.ts b/package/src/theme/generated/light/StreamTokens.ios.ts similarity index 100% rename from package/src/theme/light/StreamTokens.ios.ts rename to package/src/theme/generated/light/StreamTokens.ios.ts diff --git a/package/src/theme/light/StreamTokens.web.ts b/package/src/theme/generated/light/StreamTokens.web.ts similarity index 100% rename from package/src/theme/light/StreamTokens.web.ts rename to package/src/theme/generated/light/StreamTokens.web.ts diff --git a/package/src/theme/index.ts b/package/src/theme/index.ts index c3054896b2..7412b9a202 100644 --- a/package/src/theme/index.ts +++ b/package/src/theme/index.ts @@ -1,2 +1,2 @@ // TODO: Handle color scheme here. -export * from './light/StreamTokens'; +export * from './generated/light/StreamTokens'; diff --git a/package/sync-theme.sh b/package/sync-theme.sh index 3e227d43a9..71b37b39ea 100755 --- a/package/sync-theme.sh +++ b/package/sync-theme.sh @@ -1,7 +1,7 @@ #!/usr/bin/env bash set -euo pipefail -DEST="src/theme" +DEST="src/theme/generated" DEFAULT_SRC="../../design-system-tokens/build/reactnative" FALLBACK_SRC="${1:-}" From f14dd4da8c83f3d37f2876d45f02e5e58fbe4666 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Thu, 29 Jan 2026 11:53:36 +0100 Subject: [PATCH 9/9] fix: failing tests --- .../Message/MessageSimple/MessageAvatar.tsx | 2 ++ .../__tests__/MessageAvatar.test.js | 21 ++++++++++++------- .../__snapshots__/MessageAvatar.test.js.snap | 4 ++-- .../MessageUserReactionsAvatar.test.tsx | 20 +++++++++++------- .../__snapshots__/Thread.test.js.snap | 18 ++++++++-------- 5 files changed, 39 insertions(+), 26 deletions(-) diff --git a/package/src/components/Message/MessageSimple/MessageAvatar.tsx b/package/src/components/Message/MessageSimple/MessageAvatar.tsx index eb02ed9ead..ec5e58c0b6 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 1fd9086fbc..c94f93477e 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/MessageMenu/__tests__/MessageUserReactionsAvatar.test.tsx b/package/src/components/MessageMenu/__tests__/MessageUserReactionsAvatar.test.tsx index b34f4d1577..dd8d675c0d 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 2975d9b1d3..dd198003b1 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, }, {},