diff --git a/packages/react-ui-kit/src/Icon/Files/FolderIcon.tsx b/packages/react-ui-kit/src/Icon/Files/FolderIcon.tsx new file mode 100644 index 0000000000..7b58ee192d --- /dev/null +++ b/packages/react-ui-kit/src/Icon/Files/FolderIcon.tsx @@ -0,0 +1,35 @@ +/* + * Wire + * Copyright (C) 2025 Wire Swiss GmbH + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see http://www.gnu.org/licenses/. + * + */ + +import {SVGIcon, SVGIconProps} from '../SVGIcon'; + +export const FolderIcon = ({...props}: SVGIconProps) => { + return ( + + + + + ); +}; diff --git a/packages/react-ui-kit/src/Icon/Files/MultipleFilesIcon.tsx b/packages/react-ui-kit/src/Icon/Files/MultipleFilesIcon.tsx new file mode 100644 index 0000000000..4a3e58071a --- /dev/null +++ b/packages/react-ui-kit/src/Icon/Files/MultipleFilesIcon.tsx @@ -0,0 +1,37 @@ +/* + * Wire + * Copyright (C) 2025 Wire Swiss GmbH + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see http://www.gnu.org/licenses/. + * + */ + +import {SVGIcon, SVGIconProps} from '../SVGIcon'; + +export const MultipleFilesIcon = ({...props}: SVGIconProps) => { + return ( + + + + + + ); +}; diff --git a/packages/react-ui-kit/src/Icon/Files/TextFileIcon.tsx b/packages/react-ui-kit/src/Icon/Files/TextFileIcon.tsx new file mode 100644 index 0000000000..cfefee6929 --- /dev/null +++ b/packages/react-ui-kit/src/Icon/Files/TextFileIcon.tsx @@ -0,0 +1,41 @@ +/* + * Wire + * Copyright (C) 2025 Wire Swiss GmbH + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see http://www.gnu.org/licenses/. + * + */ + +import {SVGIcon, SVGIconProps} from '../SVGIcon'; + +export const TextFileIcon = ({...props}: SVGIconProps) => { + return ( + + + + + + + + + + + + + ); +}; diff --git a/packages/react-ui-kit/src/Icon/SVGIcon.md b/packages/react-ui-kit/src/Icon/SVGIcon.md index 8696f9000f..bde3f4fd15 100644 --- a/packages/react-ui-kit/src/Icon/SVGIcon.md +++ b/packages/react-ui-kit/src/Icon/SVGIcon.md @@ -108,6 +108,9 @@ import { CodeInlineIcon, CodeBlockIcon, BlockquoteIcon, + TextFileIcon, + FolderIcon, + MultipleFilesIcon, } from '@wireapp/react-ui-kit'; const icons = [ @@ -218,6 +221,9 @@ const fileIcons = [ OtherFileIcon, PdfFileIcon, VideoFileIcon, + TextFileIcon, + FolderIcon, + MultipleFilesIcon, ]; @@ -254,6 +260,7 @@ const fileIcons = [ ))} +

Brand Icons

))}
+

File Icons

diff --git a/packages/react-ui-kit/src/Icon/index.ts b/packages/react-ui-kit/src/Icon/index.ts index 44dea321c9..fc22b297cb 100644 --- a/packages/react-ui-kit/src/Icon/index.ts +++ b/packages/react-ui-kit/src/Icon/index.ts @@ -130,3 +130,6 @@ export * from './Files/PdfFileIcon'; export * from './Files/PresentationFileIcon'; export * from './Files/SpreadsheetFileIcon'; export * from './Files/VideoFileIcon'; +export * from './Files/TextFileIcon'; +export * from './Files/FolderIcon'; +export * from './Files/MultipleFilesIcon'; diff --git a/packages/react-ui-kit/src/Theme/GlobalCssVariables.tsx b/packages/react-ui-kit/src/Theme/GlobalCssVariables.tsx index a5cdebde0d..df7a352aa7 100644 --- a/packages/react-ui-kit/src/Theme/GlobalCssVariables.tsx +++ b/packages/react-ui-kit/src/Theme/GlobalCssVariables.tsx @@ -106,9 +106,21 @@ const light: () => CSSObject = () => ({ '--video-file-icon-bg': COLOR_V2.RED_LIGHT_50, '--video-file-icon-stroke': COLOR_V2.RED_LIGHT_700, + // Text File Icon + '--text-file-icon-bg': COLOR_V2.AMBER_LIGHT_50, + '--text-file-icon-stroke': COLOR_V2.AMBER_LIGHT_700, + // Other File Icon '--other-file-icon-bg': COLOR_V2.WHITE, '--other-file-icon-stroke': COLOR_V2.GRAY_70, + + // Folder Icon + '--folder-icon-bg': COLOR_V2.BLUE_LIGHT_50, + '--folder-icon-stroke': COLOR_V2.BLUE_LIGHT_700, + + // Multiple File Icon + '--multiple-file-icon-bg': COLOR_V2.WHITE, + '--multiple-file-icon-stroke': COLOR_V2.GRAY_70, }); const dark: () => CSSObject = () => ({ @@ -196,9 +208,21 @@ const dark: () => CSSObject = () => ({ '--video-file-icon-bg': COLOR_V2.RED_DARK_50, '--video-file-icon-stroke': COLOR_V2.RED_DARK_700, + // Text File Icon + '--text-file-icon-bg': COLOR_V2.AMBER_DARK_50, + '--text-file-icon-stroke': COLOR_V2.AMBER_DARK_700, + // Other File Icon - '--other-file-icon-bg': COLOR_V2.GRAY_10, + '--other-file-icon-bg': COLOR_V2.GRAY_95, '--other-file-icon-stroke': COLOR_V2.GRAY_60, + + // Folder Icon + '--folder-icon-bg': COLOR_V2.BLUE_DARK_50, + '--folder-icon-stroke': COLOR_V2.BLUE_DARK_700, + + // Multiple File Icon + '--multiple-file-icon-bg': COLOR_V2.GRAY_95, + '--multiple-file-icon-stroke': COLOR_V2.GRAY_60, }); const accentColors: () => CSSObject = () => ({