From 03ca9575082b5387aa73ef7a9bc56ba16fb4ecc3 Mon Sep 17 00:00:00 2001 From: Leo Winiecki Date: Tue, 7 Mar 2023 12:40:01 -0800 Subject: [PATCH 01/23] present count fix --- app/src/renderer/apps/Rooms/Room/index.tsx | 2 +- app/src/renderer/apps/Rooms/components/RoomRow.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/renderer/apps/Rooms/Room/index.tsx b/app/src/renderer/apps/Rooms/Room/index.tsx index 853f9477d2..aa3171b4b5 100644 --- a/app/src/renderer/apps/Rooms/Room/index.tsx +++ b/app/src/renderer/apps/Rooms/Room/index.tsx @@ -52,7 +52,7 @@ const RoomPresenter = () => { if (!presentRoom) return
; const { rid, creator } = presentRoom; - const presentCount = (roomsManager?.protocol.peers.size ?? 0) + 1; // to include self + const presentCount = presentRoom?.present?.length ?? 0; const creatorStr = creator.length > 14 ? `${creator.substring(0, 14)}...` : creator; diff --git a/app/src/renderer/apps/Rooms/components/RoomRow.tsx b/app/src/renderer/apps/Rooms/components/RoomRow.tsx index 5b444c4299..0e6eac6cfd 100644 --- a/app/src/renderer/apps/Rooms/components/RoomRow.tsx +++ b/app/src/renderer/apps/Rooms/components/RoomRow.tsx @@ -42,7 +42,7 @@ const RoomRowPresenter = ({ const bgColor = useMemo(() => darken(0.025, windowColor), [windowColor]); const isLiveColor = useMemo(() => darken(0.02, bgColor), [bgColor]); - const presentCount = roomsManager.protocol.peers.size + 1; // to include self + let presentCount = present?.length ?? 0; let peopleText = 'people'; if (presentCount === 1) { peopleText = 'person'; From dce5a1df976ca9900688d0a207434b097c461b20 Mon Sep 17 00:00:00 2001 From: AJ LaMarc Date: Wed, 15 Mar 2023 19:50:20 -0400 Subject: [PATCH 02/23] change glob and version --- desks/realm/desk.docket-0 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/desks/realm/desk.docket-0 b/desks/realm/desk.docket-0 index d4d758bf82..67c4c3523b 100644 --- a/desks/realm/desk.docket-0 +++ b/desks/realm/desk.docket-0 @@ -2,9 +2,9 @@ title+'Realm' info+'A desktop environment for DAOs and communities. Developed by Holium.' color+0xce.bef0 - version+[0 1 2] + version+[0 1 3] website+'https://holium.com' license+'MIT' base+'realm' - glob-http+['https://holium-app-globs.nyc3.digitaloceanspaces.com/realm/glob-0v3.ijtsa.kqfsm.f71li.n99kg.etthr.glob' 0v3.ijtsa.kqfsm.f71li.n99kg.etthr] + glob-http+['https://holium-app-globs.nyc3.digitaloceanspaces.com/realm/glob-0v7.j0j2a.m8eq6.8pvfh.2gb6a.9hek2.glob' 0v7.j0j2a.m8eq6.8pvfh.2gb6a.9hek2] == From f028ba3ccac201c801ccb0f0f619996462bc6418 Mon Sep 17 00:00:00 2001 From: lomder-librun <6413077+drunkplato@users.noreply.github.com> Date: Thu, 16 Mar 2023 07:13:21 -0500 Subject: [PATCH 03/23] Update desk.docket-0 updated url to glob --- desks/realm/desk.docket-0 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/desks/realm/desk.docket-0 b/desks/realm/desk.docket-0 index 67c4c3523b..36606f4760 100644 --- a/desks/realm/desk.docket-0 +++ b/desks/realm/desk.docket-0 @@ -6,5 +6,5 @@ website+'https://holium.com' license+'MIT' base+'realm' - glob-http+['https://holium-app-globs.nyc3.digitaloceanspaces.com/realm/glob-0v7.j0j2a.m8eq6.8pvfh.2gb6a.9hek2.glob' 0v7.j0j2a.m8eq6.8pvfh.2gb6a.9hek2] + glob-http+['https://holium-app-globs.nyc3.cdn.digitaloceanspaces.com/realm%2Fglob-0v7.j0j2a.m8eq6.8pvfh.2gb6a.9hek2.glob' 0v7.j0j2a.m8eq6.8pvfh.2gb6a.9hek2] == From 7b4bf4dacdd82a0e18f7a6538942e80244907355 Mon Sep 17 00:00:00 2001 From: lomder-librun <6413077+drunkplato@users.noreply.github.com> Date: Mon, 20 Mar 2023 05:02:31 -0500 Subject: [PATCH 04/23] Update desk.docket-0 changed color and added image --- desks/realm/desk.docket-0 | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/desks/realm/desk.docket-0 b/desks/realm/desk.docket-0 index 36606f4760..cff8229b0a 100644 --- a/desks/realm/desk.docket-0 +++ b/desks/realm/desk.docket-0 @@ -1,10 +1,11 @@ :~ title+'Realm' - info+'A desktop environment for DAOs and communities. Developed by Holium.' - color+0xce.bef0 + info+'A desktop environment for DAOs and communities.' + color+0xfe.9c4f version+[0 1 3] website+'https://holium.com' license+'MIT' base+'realm' + image+'https://holium-app-globs.nyc3.cdn.digitaloceanspaces.com/realm%2Frealm.svg' glob-http+['https://holium-app-globs.nyc3.cdn.digitaloceanspaces.com/realm%2Fglob-0v7.j0j2a.m8eq6.8pvfh.2gb6a.9hek2.glob' 0v7.j0j2a.m8eq6.8pvfh.2gb6a.9hek2] == From f3c3e14acb930956b98665fe776d386818964a20 Mon Sep 17 00:00:00 2001 From: gdbroman <99gustaf@gmail.com> Date: Mon, 20 Mar 2023 11:03:07 -0500 Subject: [PATCH 05/23] Public facing README for @holium/design-system --- lib/design-system/.npmignore | 1 + lib/design-system/README.md | 36 +-------------------------- lib/design-system/README_INTERNAL.md | 37 ++++++++++++++++++++++++++++ lib/design-system/package.json | 2 +- 4 files changed, 40 insertions(+), 36 deletions(-) create mode 100644 lib/design-system/.npmignore create mode 100644 lib/design-system/README_INTERNAL.md diff --git a/lib/design-system/.npmignore b/lib/design-system/.npmignore new file mode 100644 index 0000000000..62ac91ce00 --- /dev/null +++ b/lib/design-system/.npmignore @@ -0,0 +1 @@ +README_INTERNAL.md diff --git a/lib/design-system/README.md b/lib/design-system/README.md index 157d01e950..5c2334e8c6 100644 --- a/lib/design-system/README.md +++ b/lib/design-system/README.md @@ -1,37 +1,3 @@ # @holium/design-system -## Dev setup - -``` -yarn -yarn storybook -``` - -## Directory structure - -``` -/general - multipurpose components - /index.ts - exports general components - -/input - input components - /index.ts - exports input components - -/os - core realm components - /index.ts - exports os components - -/util - internal helpers - -index.ts - exports all components -``` - -## Component structure - -``` -/Component - /Component.tsx - component - /Component.stories.tsx - storybook stories -``` - -### Publishing - -remove `postinstall: preconstruct dev` before publishing to NPM. +A component library for Realm apps with built-in space theming. diff --git a/lib/design-system/README_INTERNAL.md b/lib/design-system/README_INTERNAL.md new file mode 100644 index 0000000000..ece4e39d4e --- /dev/null +++ b/lib/design-system/README_INTERNAL.md @@ -0,0 +1,37 @@ +# @holium/design-system + +## Dev setup + +``` +yarn +yarn storybook +``` + +## Directory structure + +``` +/general - multipurpose components + /index.ts - exports general components + +/input - input components + /index.ts - exports input components + +/os - core realm components + /index.ts - exports os components + +/util - internal helpers + +index.ts - exports all components +``` + +## Component structure + +``` +/Component + /Component.tsx - component + /Component.stories.tsx - storybook stories +``` + +## Publishing + +Remove `postinstall: preconstruct dev` before publishing to npmjs.com. diff --git a/lib/design-system/package.json b/lib/design-system/package.json index 810c4807de..8ece87e5ef 100644 --- a/lib/design-system/package.json +++ b/lib/design-system/package.json @@ -1,6 +1,6 @@ { "name": "@holium/design-system", - "version": "0.1.2", + "version": "0.1.3", "description": "A component library for Realm.", "license": "MIT", "author": "trent@holium.com", From bd4319168cc2762ef62c282addc8c66b921a5643 Mon Sep 17 00:00:00 2001 From: gdbroman <99gustaf@gmail.com> Date: Mon, 20 Mar 2023 11:07:27 -0500 Subject: [PATCH 06/23] Update package version --- lib/design-system/package.json | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/lib/design-system/package.json b/lib/design-system/package.json index 8ece87e5ef..f792fc9ee6 100644 --- a/lib/design-system/package.json +++ b/lib/design-system/package.json @@ -1,14 +1,13 @@ { "name": "@holium/design-system", - "version": "0.1.3", + "version": "0.1.6", "description": "A component library for Realm.", "license": "MIT", "author": "trent@holium.com", "main": "dist/holium-design-system.cjs.js", "module": "dist/holium-design-system.esm.js", "scripts": { - "build": "preconstruct build", - "postinstall": "preconstruct dev" + "build": "preconstruct build" }, "dependencies": { "@tlon/sigil-js": "^1.4.5", @@ -39,5 +38,14 @@ "react-dom": "^18.0.0", "styled-components": "^5.3.6", "styled-system": "^5.1.5" - } + }, + "keywords": [ + "realm", + "theming", + "design-system", + "components", + "ui", + "react", + "styled-components" + ] } From 07b175359f526b194a119fa634365b8b8239add7 Mon Sep 17 00:00:00 2001 From: gdbroman <99gustaf@gmail.com> Date: Mon, 20 Mar 2023 13:40:36 -0500 Subject: [PATCH 07/23] Add back missing postinstall --- lib/design-system/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/design-system/package.json b/lib/design-system/package.json index f792fc9ee6..d1f076add0 100644 --- a/lib/design-system/package.json +++ b/lib/design-system/package.json @@ -7,7 +7,8 @@ "main": "dist/holium-design-system.cjs.js", "module": "dist/holium-design-system.esm.js", "scripts": { - "build": "preconstruct build" + "build": "preconstruct build", + "postinstall": "preconstruct dev" }, "dependencies": { "@tlon/sigil-js": "^1.4.5", From b15993797af901b0ecd5ebb6d48e75741423ce85 Mon Sep 17 00:00:00 2001 From: gdbroman <99gustaf@gmail.com> Date: Mon, 20 Mar 2023 13:45:23 -0500 Subject: [PATCH 08/23] Init `@holium/shared` --- README.md | 13 ++++++ app/src/main/helpers/mouse.ts | 2 +- app/src/main/preload.multiplayer.ts | 2 +- app/src/main/preload.ts | 3 +- app/src/os/services/shell/desktop.model.ts | 2 +- app/src/os/services/shell/desktop.service.ts | 2 +- app/src/os/services/shell/lib/dimensions.ts | 2 +- .../os/services/shell/lib/window-manager.ts | 2 +- app/src/os/types.ts | 6 --- .../apps/System/components/Account.tsx | 2 +- app/src/renderer/apps/store.ts | 2 +- app/src/renderer/components/CopyButton.tsx | 2 +- .../components/People/usePassportMenu.tsx | 5 +-- app/src/renderer/logic/actions/desktop.ts | 2 +- app/src/renderer/logic/lib/position.ts | 2 +- .../system/auth/login/ResetCodeDialog.tsx | 2 +- .../components/AppWindow/AppWindow.tsx | 2 +- .../components/AppWindow/View/DevView.tsx | 2 +- .../renderer/system/desktop/useMultiplayer.ts | 4 +- app/src/renderer/system/dialog/dialogs.tsx | 2 +- .../renderer/system/mouse/AnimatedCursor.tsx | 2 +- .../renderer/system/mouse/Mouse.styles.tsx | 2 +- app/src/renderer/system/mouse/Mouse.tsx | 2 +- .../renderer/system/mouse/MultiplayerMice.tsx | 2 +- .../renderer/system/mouse/StandAloneMouse.tsx | 2 +- .../system/onboarding/AddShip.dialog.tsx | 2 +- .../system/onboarding/InstallAgent.dialog.tsx | 13 ++++-- .../system/onboarding/ViewCode.dialog.tsx | 13 ++++-- .../src/blocks/Bubble/Reaction.tsx | 6 +-- lib/presence/src/types.ts | 3 +- package.json | 2 + shared/README.md | 5 +++ shared/package.json | 17 ++++++++ .../lib => shared/src/hooks}/useToggle.ts | 0 shared/src/index.ts | 2 + shared/src/types/types.ts | 5 +++ shared/tsconfig.json | 10 +++++ tsconfig.base.json | 1 + tsconfig.json | 1 + yarn.lock | 43 +++++++++++++++++++ 40 files changed, 149 insertions(+), 45 deletions(-) create mode 100644 shared/README.md create mode 100644 shared/package.json rename {app/src/renderer/logic/lib => shared/src/hooks}/useToggle.ts (100%) create mode 100644 shared/src/index.ts create mode 100644 shared/src/types/types.ts create mode 100644 shared/tsconfig.json diff --git a/README.md b/README.md index 0abc2e7735..b9cddb6d22 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,21 @@ A desktop environment for Urbit. +## Directory structure + We use yarn workspace to manage the multiple modules. +``` +- app/ - the Realm desktop client +- onboarding/ – holium.network +- shared/ - shared code in the monorepo +- lib/ - outwards facing packages that are published to npmjs.com + - conduit/ – SSE event handler + - design-system/ – component library for Realm apps + - presence/ – cursor streaming for Realm apps + - room/ – data streaming for Realm apps +``` + ## Getting started We use yarn workspaces to build all packages for Realm. diff --git a/app/src/main/helpers/mouse.ts b/app/src/main/helpers/mouse.ts index 2901199e60..d223c22571 100644 --- a/app/src/main/helpers/mouse.ts +++ b/app/src/main/helpers/mouse.ts @@ -1,6 +1,6 @@ import { BrowserWindow, ipcMain, screen } from 'electron'; import { MouseState, PresenceArg } from '@holium/realm-presence'; -import { Position } from '../../os/types'; +import { Position } from '@holium/shared'; import { denormalizePosition } from '../../os/services/shell/lib/window-manager'; const getWebContentsPosition = (mainWindow: BrowserWindow) => { diff --git a/app/src/main/preload.multiplayer.ts b/app/src/main/preload.multiplayer.ts index f46b4ad3e9..1826a64abb 100644 --- a/app/src/main/preload.multiplayer.ts +++ b/app/src/main/preload.multiplayer.ts @@ -1,6 +1,6 @@ import { ipcRenderer } from 'electron'; import { PresenceArg, MouseState } from '@holium/realm-presence'; -import { Position } from '../os/types'; +import { Position } from '@holium/shared'; export const multiplayerPreload = { /* Senders */ diff --git a/app/src/main/preload.ts b/app/src/main/preload.ts index 6cc4f71c91..ec429ab909 100644 --- a/app/src/main/preload.ts +++ b/app/src/main/preload.ts @@ -1,7 +1,8 @@ import { contextBridge, ipcRenderer } from 'electron'; import { MouseState } from '@holium/realm-presence'; import { osPreload } from '../os/preload'; -import { Position, MediaAccess, MediaAccessStatus } from '../os/types'; +import { MediaAccess, MediaAccessStatus } from '../os/types'; +import { Position } from '@holium/shared'; import { multiplayerPreload } from './preload.multiplayer'; import './helpers/mouseListener'; import './helpers/keyListener'; diff --git a/app/src/os/services/shell/desktop.model.ts b/app/src/os/services/shell/desktop.model.ts index 9c5e993a0d..19ed036772 100644 --- a/app/src/os/services/shell/desktop.model.ts +++ b/app/src/os/services/shell/desktop.model.ts @@ -1,5 +1,5 @@ import { types, applySnapshot, Instance, SnapshotIn } from 'mobx-state-tree'; -import { Dimensions } from 'os/types'; +import { Dimensions } from '@holium/shared'; import { AppType, Glob } from '../spaces/models/bazaar'; import { toJS } from 'mobx'; import { diff --git a/app/src/os/services/shell/desktop.service.ts b/app/src/os/services/shell/desktop.service.ts index 84f836da69..70f33a0f2b 100644 --- a/app/src/os/services/shell/desktop.service.ts +++ b/app/src/os/services/shell/desktop.service.ts @@ -12,7 +12,7 @@ import { import { AppType } from '../spaces/models/bazaar'; import { IpcRendererEvent } from 'electron/renderer'; import { toJS } from 'mobx'; -import { Bounds } from 'os/types'; +import { Bounds } from '@holium/shared'; import { getReleaseChannel, setReleaseChannel } from '../../lib/settings'; diff --git a/app/src/os/services/shell/lib/dimensions.ts b/app/src/os/services/shell/lib/dimensions.ts index 45a85ca848..366feb4704 100644 --- a/app/src/os/services/shell/lib/dimensions.ts +++ b/app/src/os/services/shell/lib/dimensions.ts @@ -1,4 +1,4 @@ -import { Dimensions } from 'os/types'; +import { Dimensions } from '@holium/shared'; import { normalizeDimensions } from './window-manager'; const DEFAULT_APP_WINDOW_DIMENSIONS: Record = { diff --git a/app/src/os/services/shell/lib/window-manager.ts b/app/src/os/services/shell/lib/window-manager.ts index b1849fb926..f27a1eb4a7 100644 --- a/app/src/os/services/shell/lib/window-manager.ts +++ b/app/src/os/services/shell/lib/window-manager.ts @@ -1,5 +1,5 @@ import { AppType, RealmConfigType } from 'os/services/spaces/models/bazaar'; -import { Dimensions, Position, Bounds } from 'os/types'; +import { Dimensions, Position, Bounds } from '@holium/shared'; import { getDefaultAppDimensions } from './dimensions'; /** diff --git a/app/src/os/types.ts b/app/src/os/types.ts index cbc3dc743a..e687193b30 100644 --- a/app/src/os/types.ts +++ b/app/src/os/types.ts @@ -76,12 +76,6 @@ export interface Membership { [path: SpacePath]: Members; } -export type Position = { x: number; y: number }; - -export type Dimensions = { width: number; height: number }; - -export type Bounds = Position & Dimensions; - export type RealmInstallationStatus = { result: 'success' | 'partial' | 'error'; desks: string[] | undefined; diff --git a/app/src/renderer/apps/System/components/Account.tsx b/app/src/renderer/apps/System/components/Account.tsx index cbe0c7a524..b83da9e3d5 100644 --- a/app/src/renderer/apps/System/components/Account.tsx +++ b/app/src/renderer/apps/System/components/Account.tsx @@ -9,6 +9,7 @@ import { Spinner, TextInput, } from '@holium/design-system'; +import { useToggle } from '@holium/shared'; import { Text, Card, @@ -25,7 +26,6 @@ import { DesktopActions } from 'renderer/logic/actions/desktop'; import { ShellActions } from 'renderer/logic/actions/shell'; import { AuthActions } from 'renderer/logic/actions/auth'; import { useTrayApps } from 'renderer/apps/store'; -import { useToggle } from 'renderer/logic/lib/useToggle'; const AccountPanelPresenter = () => { const { theme, ship, identity } = useServices(); diff --git a/app/src/renderer/apps/store.ts b/app/src/renderer/apps/store.ts index 7d70049d37..c8f0438bc7 100644 --- a/app/src/renderer/apps/store.ts +++ b/app/src/renderer/apps/store.ts @@ -20,7 +20,7 @@ import { import { OSActions } from '../logic/actions/os'; import { DmApp } from './Messages/store'; -import { Dimensions } from 'os/types'; +import { Dimensions } from '@holium/shared'; const TrayAppCoords = types.model({ left: types.number, diff --git a/app/src/renderer/components/CopyButton.tsx b/app/src/renderer/components/CopyButton.tsx index cb37e6f738..8ef3aefffe 100644 --- a/app/src/renderer/components/CopyButton.tsx +++ b/app/src/renderer/components/CopyButton.tsx @@ -1,5 +1,5 @@ import { Box, Icon } from '@holium/design-system'; -import { useToggle } from 'renderer/logic/lib/useToggle'; +import { useToggle } from '@holium/shared'; interface CopyButtonProps { content: string; diff --git a/app/src/renderer/components/People/usePassportMenu.tsx b/app/src/renderer/components/People/usePassportMenu.tsx index 78b16d7da8..0e9234026e 100644 --- a/app/src/renderer/components/People/usePassportMenu.tsx +++ b/app/src/renderer/components/People/usePassportMenu.tsx @@ -10,8 +10,7 @@ import { import { useServices } from 'renderer/logic/store'; import { Menu } from '../Menu'; import { PassportCard } from './PassportCard'; - -type AnchorPoint = { x: number; y: number }; +import { Position } from '@holium/shared'; type PassportMenuOptions = { patp: string; @@ -23,7 +22,7 @@ type PassportMenuOptions = { type PassportMenuConfig = { id: string; - anchorPoint: AnchorPoint; + anchorPoint: Position; options: PassportMenuOptions; }; diff --git a/app/src/renderer/logic/actions/desktop.ts b/app/src/renderer/logic/actions/desktop.ts index d7d7e56e21..2c8bee998d 100644 --- a/app/src/renderer/logic/actions/desktop.ts +++ b/app/src/renderer/logic/actions/desktop.ts @@ -4,7 +4,7 @@ import { AppWindowProps, AppWindowType } from 'os/services/shell/desktop.model'; import { AppType } from 'os/services/spaces/models/bazaar'; -import { Bounds } from 'os/types'; +import { Bounds } from '@holium/shared'; import { SpacesActions } from './spaces'; /** diff --git a/app/src/renderer/logic/lib/position.ts b/app/src/renderer/logic/lib/position.ts index b53b1540b8..617d6deee5 100644 --- a/app/src/renderer/logic/lib/position.ts +++ b/app/src/renderer/logic/lib/position.ts @@ -1,4 +1,4 @@ -import { Dimensions, Position } from 'os/types'; +import { Dimensions, Position } from '@holium/shared'; export const calculateAnchorPoint = ( event: any, diff --git a/app/src/renderer/system/auth/login/ResetCodeDialog.tsx b/app/src/renderer/system/auth/login/ResetCodeDialog.tsx index 219230fe05..37a7b5f413 100644 --- a/app/src/renderer/system/auth/login/ResetCodeDialog.tsx +++ b/app/src/renderer/system/auth/login/ResetCodeDialog.tsx @@ -10,7 +10,7 @@ import { TextInput, Spinner, } from '@holium/design-system'; -import { useToggle } from 'renderer/logic/lib/useToggle'; +import { useToggle } from '@holium/shared'; import { DialogConfig } from 'renderer/system/dialog/dialogs'; import { normalizeBounds } from 'os/services/shell/lib/window-manager'; import { ShellActions } from 'renderer/logic/actions/shell'; diff --git a/app/src/renderer/system/desktop/components/AppWindow/AppWindow.tsx b/app/src/renderer/system/desktop/components/AppWindow/AppWindow.tsx index 3a3817ff32..ff23c562a6 100644 --- a/app/src/renderer/system/desktop/components/AppWindow/AppWindow.tsx +++ b/app/src/renderer/system/desktop/components/AppWindow/AppWindow.tsx @@ -8,7 +8,7 @@ import { AppWindowContainer } from './AppWindow.styles'; import { AppWindowResizeHandles } from './AppWindowResizeHandles'; import { Flex } from 'renderer/components'; import { useServices } from 'renderer/logic/store'; -import { useToggle } from 'renderer/logic/lib/useToggle'; +import { useToggle } from '@holium/shared'; import { DesktopActions } from 'renderer/logic/actions/desktop'; import { getWebViewId } from 'renderer/system/desktop/components/AppWindow/View/getWebViewId'; import { diff --git a/app/src/renderer/system/desktop/components/AppWindow/View/DevView.tsx b/app/src/renderer/system/desktop/components/AppWindow/View/DevView.tsx index 33723b70b5..235e062814 100644 --- a/app/src/renderer/system/desktop/components/AppWindow/View/DevView.tsx +++ b/app/src/renderer/system/desktop/components/AppWindow/View/DevView.tsx @@ -4,7 +4,7 @@ import { lighten, darken } from 'polished'; import { WebView } from './WebView'; import { AppWindowType } from 'os/services/shell/desktop.model'; import { observer } from 'mobx-react'; -import { useToggle } from 'renderer/logic/lib/useToggle'; +import { useToggle } from '@holium/shared'; import { useRooms } from 'renderer/apps/Rooms/useRooms'; import { RoomManagerEvent, RoomsManager } from '@holium/realm-room'; diff --git a/app/src/renderer/system/desktop/useMultiplayer.ts b/app/src/renderer/system/desktop/useMultiplayer.ts index 2844b1b302..bbabc1b679 100644 --- a/app/src/renderer/system/desktop/useMultiplayer.ts +++ b/app/src/renderer/system/desktop/useMultiplayer.ts @@ -16,8 +16,8 @@ import { RoomsManager, } from '@holium/realm-room'; import { normalizePosition } from 'os/services/shell/lib/window-manager'; -import { useToggle } from 'renderer/logic/lib/useToggle'; -import { Dimensions } from 'os/types'; +import { useToggle } from '@holium/shared'; +import { Dimensions } from '@holium/shared'; type Props = { patp: string | undefined; diff --git a/app/src/renderer/system/dialog/dialogs.tsx b/app/src/renderer/system/dialog/dialogs.tsx index f21c51a599..d34f4f96aa 100644 --- a/app/src/renderer/system/dialog/dialogs.tsx +++ b/app/src/renderer/system/dialog/dialogs.tsx @@ -8,7 +8,7 @@ import { LeaveSpaceDialogConfig } from 'renderer/apps/System/Dialogs/LeaveSpaceC import { DeleteSpaceDialogConfig } from 'renderer/apps/System/Dialogs/DeleteSpaceConfirm'; import { AppDetailDialog } from 'renderer/apps/System/Dialogs/AppDetail'; import { ChangeEmailDialogConfig } from 'renderer/apps/System/Dialogs/ChangeEmail'; -import { Dimensions } from 'os/types'; +import { Dimensions } from '@holium/shared'; import { ResetCodeDialogConfig } from '../auth/login/ResetCodeDialog'; export interface BaseWorkflowProps { diff --git a/app/src/renderer/system/mouse/AnimatedCursor.tsx b/app/src/renderer/system/mouse/AnimatedCursor.tsx index 6f0ff3d96a..6103dc8781 100644 --- a/app/src/renderer/system/mouse/AnimatedCursor.tsx +++ b/app/src/renderer/system/mouse/AnimatedCursor.tsx @@ -1,7 +1,7 @@ import { useRef, useCallback, useEffect, Fragment, useMemo } from 'react'; import { MotionStyle, motion, Variant } from 'framer-motion'; import { MouseState } from '@holium/realm-presence'; -import { Position } from 'os/types'; +import { Position } from '@holium/shared'; import { IsDevice } from './isDevice'; const innerSize = 10; diff --git a/app/src/renderer/system/mouse/Mouse.styles.tsx b/app/src/renderer/system/mouse/Mouse.styles.tsx index b54f9759ba..674f3c0e0b 100644 --- a/app/src/renderer/system/mouse/Mouse.styles.tsx +++ b/app/src/renderer/system/mouse/Mouse.styles.tsx @@ -1,7 +1,7 @@ import { motion } from 'framer-motion'; import styled from 'styled-components'; import { bgIsLightOrDark } from 'os/lib/color'; -import { Position } from 'os/types'; +import { Position } from '@holium/shared'; export const CursorLabel = styled(motion.div)<{ position: Position; diff --git a/app/src/renderer/system/mouse/Mouse.tsx b/app/src/renderer/system/mouse/Mouse.tsx index e0c5820b8c..d69b3e7bc9 100644 --- a/app/src/renderer/system/mouse/Mouse.tsx +++ b/app/src/renderer/system/mouse/Mouse.tsx @@ -1,6 +1,6 @@ import { useState, useEffect } from 'react'; import { MouseState } from '@holium/realm-presence'; -import { useToggle } from 'renderer/logic/lib/useToggle'; +import { useToggle } from '@holium/shared'; import { hexToRgb, rgbToString } from 'os/lib/color'; import { AnimatedCursor } from './AnimatedCursor'; import { EphemeralChat } from './Mouse.styles'; diff --git a/app/src/renderer/system/mouse/MultiplayerMice.tsx b/app/src/renderer/system/mouse/MultiplayerMice.tsx index 7fbd3e8475..6ceba0e8ce 100644 --- a/app/src/renderer/system/mouse/MultiplayerMice.tsx +++ b/app/src/renderer/system/mouse/MultiplayerMice.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { Position } from 'os/types'; +import { Position } from '@holium/shared'; import { AnimatedCursor } from './AnimatedCursor'; import { hexToRgb, rgbToString } from 'os/lib/color'; import { MouseState } from '@holium/realm-presence'; diff --git a/app/src/renderer/system/mouse/StandAloneMouse.tsx b/app/src/renderer/system/mouse/StandAloneMouse.tsx index 4fb7d3b798..c1fe35c36c 100644 --- a/app/src/renderer/system/mouse/StandAloneMouse.tsx +++ b/app/src/renderer/system/mouse/StandAloneMouse.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import { MouseState } from '@holium/realm-presence'; import { AnimatedCursor } from './AnimatedCursor'; -import { useToggle } from 'renderer/logic/lib/useToggle'; +import { useToggle } from '@holium/shared'; import { getMouseState } from './getMouseState'; const useMouseState = (containerId: string) => { diff --git a/app/src/renderer/system/onboarding/AddShip.dialog.tsx b/app/src/renderer/system/onboarding/AddShip.dialog.tsx index d7a3f11995..40d48706f3 100644 --- a/app/src/renderer/system/onboarding/AddShip.dialog.tsx +++ b/app/src/renderer/system/onboarding/AddShip.dialog.tsx @@ -8,7 +8,7 @@ import { observer } from 'mobx-react'; import { OnboardingActions } from 'renderer/logic/actions/onboarding'; import { BaseDialogProps } from 'renderer/system/dialog/dialogs'; import { useServices } from 'renderer/logic/store'; -import { useToggle } from 'renderer/logic/lib/useToggle'; +import { useToggle } from '@holium/shared'; import { Button, Icon, TextInput } from '@holium/design-system'; const AddShipPresenter = (props: BaseDialogProps) => { diff --git a/app/src/renderer/system/onboarding/InstallAgent.dialog.tsx b/app/src/renderer/system/onboarding/InstallAgent.dialog.tsx index 239510c645..440b4a2966 100644 --- a/app/src/renderer/system/onboarding/InstallAgent.dialog.tsx +++ b/app/src/renderer/system/onboarding/InstallAgent.dialog.tsx @@ -1,11 +1,18 @@ import { observer } from 'mobx-react'; -import { Spinner } from '@holium/design-system'; import { ActionButton } from 'renderer/components'; import { useServices } from 'renderer/logic/store'; import { OnboardingActions } from 'renderer/logic/actions/onboarding'; import { trackEvent } from 'renderer/logic/lib/track'; -import { Avatar, Flex, Text, Button, Box, Icon } from '@holium/design-system'; -import { useToggle } from 'renderer/logic/lib/useToggle'; +import { + Avatar, + Flex, + Text, + Button, + Box, + Icon, + Spinner, +} from '@holium/design-system'; +import { useToggle } from '@holium/shared'; const InstallAgentPresenter = () => { const { onboarding } = useServices(); diff --git a/app/src/renderer/system/onboarding/ViewCode.dialog.tsx b/app/src/renderer/system/onboarding/ViewCode.dialog.tsx index cbae6c2a20..6830a1b05d 100644 --- a/app/src/renderer/system/onboarding/ViewCode.dialog.tsx +++ b/app/src/renderer/system/onboarding/ViewCode.dialog.tsx @@ -1,11 +1,18 @@ import { useEffect, useState } from 'react'; import { Grid, Text, CopyButton } from 'renderer/components'; -import { Box, Flex, Spinner } from '@holium/design-system'; import { observer } from 'mobx-react'; import { useServices } from 'renderer/logic/store'; import { OnboardingActions } from 'renderer/logic/actions/onboarding'; -import { Avatar, Button, Icon, TextInput } from '@holium/design-system'; -import { useToggle } from 'renderer/logic/lib/useToggle'; +import { + Avatar, + Button, + Box, + Flex, + Spinner, + Icon, + TextInput, +} from '@holium/design-system'; +import { useToggle } from '@holium/shared'; const ViewCodePresenter = () => { const { theme } = useServices(); diff --git a/lib/design-system/src/blocks/Bubble/Reaction.tsx b/lib/design-system/src/blocks/Bubble/Reaction.tsx index 56d158c89a..af80352e7a 100644 --- a/lib/design-system/src/blocks/Bubble/Reaction.tsx +++ b/lib/design-system/src/blocks/Bubble/Reaction.tsx @@ -11,6 +11,7 @@ import { FragmentReactionType } from './Bubble.types'; import { AnimatePresence } from 'framer-motion'; import { lighten } from 'polished'; import { getVar } from '../../util/colors'; +import { Position } from '@holium/shared'; const WIDTH = 350; const ship = window.ship ?? 'zod'; @@ -148,10 +149,7 @@ export const Reactions = (props: ReactionProps) => { onReaction, } = props; const [isReacting, setIsReacting] = useState(false); - const [anchorPoint, setAnchorPoint] = useState<{ - x: number; - y: number; - } | null>(null); + const [anchorPoint, setAnchorPoint] = useState(null); const reactionsAggregated = useMemo( () => diff --git a/lib/presence/src/types.ts b/lib/presence/src/types.ts index bcae966ab5..0754fd4fa2 100644 --- a/lib/presence/src/types.ts +++ b/lib/presence/src/types.ts @@ -1,7 +1,6 @@ +import { Position } from '@holium/shared'; import { PresenceArg } from './hooks/useBroadcast'; -type Position = { x: number; y: number }; - export type MouseState = 'text' | 'resize' | 'pointer'; type MultiplayerEvent = diff --git a/package.json b/package.json index 685f22e208..9355b63b48 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "name": "realm-monorepo", "workspaces": [ "app", + "shared", "lib/design-system", "lib/presence", "lib/presence/code", @@ -61,6 +62,7 @@ }, "preconstruct": { "packages": [ + "shared", "lib/design-system", "lib/presence", "lib/conduit", diff --git a/shared/README.md b/shared/README.md new file mode 100644 index 0000000000..bc542a15f6 --- /dev/null +++ b/shared/README.md @@ -0,0 +1,5 @@ +# @holium/shared + +Internally shared components, hooks, and types in monorepo. + +NOTE: Published components are in `@holium/design-system`. diff --git a/shared/package.json b/shared/package.json new file mode 100644 index 0000000000..eb442d6bdf --- /dev/null +++ b/shared/package.json @@ -0,0 +1,17 @@ +{ + "name": "@holium/shared", + "version": "1.0.0", + "main": "dist/holium-shared.cjs.js", + "module": "dist/holium-shared.esm.js", + "license": "MIT", + "private": true, + "scripts": { + "postinstall": "preconstruct dev" + }, + "dependencies": { + "react": "^18.0.0" + }, + "devDependencies": { + "@preconstruct/cli": "2.2.1" + } +} diff --git a/app/src/renderer/logic/lib/useToggle.ts b/shared/src/hooks/useToggle.ts similarity index 100% rename from app/src/renderer/logic/lib/useToggle.ts rename to shared/src/hooks/useToggle.ts diff --git a/shared/src/index.ts b/shared/src/index.ts new file mode 100644 index 0000000000..79deacc7e2 --- /dev/null +++ b/shared/src/index.ts @@ -0,0 +1,2 @@ +export { useToggle } from './hooks/useToggle'; +export type { Bounds, Dimensions, Position } from './types/types'; diff --git a/shared/src/types/types.ts b/shared/src/types/types.ts new file mode 100644 index 0000000000..2eb6db6d84 --- /dev/null +++ b/shared/src/types/types.ts @@ -0,0 +1,5 @@ +export type Position = { x: number; y: number }; + +export type Dimensions = { width: number; height: number }; + +export type Bounds = Position & Dimensions; diff --git a/shared/tsconfig.json b/shared/tsconfig.json new file mode 100644 index 0000000000..36c424d49e --- /dev/null +++ b/shared/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../tsconfig.base.json", + "compilerOptions": { + "baseUrl": "src" + }, + "include": ["src"], + "exclude": [ + "node_modules" + ] +} diff --git a/tsconfig.base.json b/tsconfig.base.json index dbe20c1376..2e01e5b440 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -28,6 +28,7 @@ "exclude": ["node_modules"], "references": [ { "path": "./app" }, + { "path": "./shared" }, { "path": "./lib/conduit" }, { "path": "./lib/design-system" }, { "path": "./lib/presence" }, diff --git a/tsconfig.json b/tsconfig.json index 08e4ceefe5..9b996af2f3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,6 +3,7 @@ "include": [ ".eslintrc.js", "app", + "shared", "lib/conduit", "lib/design-system", "lib/presence/code", diff --git a/yarn.lock b/yarn.lock index 5f86a6ea5e..1e1f089996 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2546,6 +2546,49 @@ resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1" integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g== +"@preconstruct/cli@2.2.1": + version "2.2.1" + resolved "https://registry.yarnpkg.com/@preconstruct/cli/-/cli-2.2.1.tgz#fafff5b5124f895ae933445ca8e2d674006f614f" + integrity sha512-G+sUV9o8l6Ds/82qJZYTXkCsVqPXLuD+bv+nVQeo3OL+eqzO/uAiBBFVp0DMcBJiyQYeU9nb+V8q22/PPaepDw== + dependencies: + "@babel/code-frame" "^7.5.5" + "@babel/core" "^7.7.7" + "@babel/helper-module-imports" "^7.10.4" + "@babel/runtime" "^7.7.7" + "@preconstruct/hook" "^0.4.0" + "@rollup/plugin-alias" "^3.1.1" + "@rollup/plugin-commonjs" "^15.0.0" + "@rollup/plugin-json" "^4.1.0" + "@rollup/plugin-node-resolve" "^11.2.1" + "@rollup/plugin-replace" "^2.4.1" + builtin-modules "^3.1.0" + chalk "^4.1.0" + dataloader "^2.0.0" + detect-indent "^6.0.0" + enquirer "^2.3.6" + estree-walker "^2.0.1" + fast-deep-equal "^2.0.1" + fast-glob "^3.2.4" + fs-extra "^9.0.1" + is-ci "^2.0.0" + is-reference "^1.2.1" + jest-worker "^26.3.0" + magic-string "^0.25.7" + meow "^7.1.0" + ms "^2.1.2" + normalize-path "^3.0.0" + npm-packlist "^2.1.2" + p-limit "^3.0.2" + parse-glob "^3.0.4" + parse-json "^5.1.0" + quick-lru "^5.1.1" + resolve "^1.17.0" + resolve-from "^5.0.0" + rollup "^2.32.0" + semver "^7.3.4" + terser "^5.2.1" + v8-compile-cache "^2.1.1" + "@preconstruct/cli@^2.2.1", "@preconstruct/cli@^2.2.2": version "2.3.0" resolved "https://registry.yarnpkg.com/@preconstruct/cli/-/cli-2.3.0.tgz#2ffca3c336ac17ab7d9c9b70627dc52e85601a69" From 29ce2584c4b5b31aa6940b03ff937b72ff854bfa Mon Sep 17 00:00:00 2001 From: gdbroman <99gustaf@gmail.com> Date: Mon, 20 Mar 2023 13:55:14 -0500 Subject: [PATCH 09/23] `no-duplicate-imports` --- .eslintrc.js | 1 + app/src/renderer/apps/Messages/ChatView.tsx | 12 ++++++++++-- app/src/renderer/apps/Rooms/Settings.tsx | 10 ++++++++-- .../renderer/apps/Spaces/Workflow/InviteMembers.tsx | 3 +-- .../renderer/apps/Wallet/views/common/Settings.tsx | 2 +- app/src/renderer/components/AppTile/AppTile.tsx | 3 +-- app/src/renderer/components/AppTile/index.tsx | 3 +-- app/src/renderer/system/auth/login/ShipSelector.tsx | 3 +-- app/src/renderer/system/desktop/useMultiplayer.ts | 3 +-- .../renderer/system/onboarding/AddShip.dialog.tsx | 10 ++++++++-- 10 files changed, 33 insertions(+), 17 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index c6b71db920..2836c8f63b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -10,6 +10,7 @@ module.exports = { 'react/display-name': 'off', 'react/react-in-jsx-scope': 'off', 'react/no-unescaped-entities': 'off', + 'import/no-duplicates': 'error', 'unused-imports/no-unused-imports': 'error', 'unused-imports/no-unused-vars': [ 'error', diff --git a/app/src/renderer/apps/Messages/ChatView.tsx b/app/src/renderer/apps/Messages/ChatView.tsx index e052e55cb4..97b7878164 100644 --- a/app/src/renderer/apps/Messages/ChatView.tsx +++ b/app/src/renderer/apps/Messages/ChatView.tsx @@ -12,9 +12,17 @@ import { import { lighten, darken } from 'polished'; import { observer } from 'mobx-react'; import { Content } from '@urbit/api'; -import { Spinner, Tooltip } from '@holium/design-system'; +import { + Avatar, + Button, + Icon, + Text, + Box, + Flex, + Spinner, + Tooltip, +} from '@holium/design-system'; import { Input } from 'renderer/components'; -import { Avatar, Button, Icon, Text, Box, Flex } from '@holium/design-system'; import { ThemeModelType } from 'os/services/theme.model'; import { createDmForm } from './forms/chatForm'; import { useServices } from 'renderer/logic/store'; diff --git a/app/src/renderer/apps/Rooms/Settings.tsx b/app/src/renderer/apps/Rooms/Settings.tsx index eea331a114..c5ccec4c70 100644 --- a/app/src/renderer/apps/Rooms/Settings.tsx +++ b/app/src/renderer/apps/Rooms/Settings.tsx @@ -1,8 +1,14 @@ import { observer } from 'mobx-react'; import { useEffect, useState } from 'react'; -import { RadioOption, Select } from '@holium/design-system'; +import { + RadioOption, + Select, + Flex, + Button, + Text, + Icon, +} from '@holium/design-system'; import { Label, FormControl } from 'renderer/components'; -import { Flex, Button, Text, Icon } from '@holium/design-system'; import { useServices } from 'renderer/logic/store'; import { useTrayApps } from '../store'; import { useRooms } from './useRooms'; diff --git a/app/src/renderer/apps/Spaces/Workflow/InviteMembers.tsx b/app/src/renderer/apps/Spaces/Workflow/InviteMembers.tsx index 26a6d02fa5..2335825e6f 100644 --- a/app/src/renderer/apps/Spaces/Workflow/InviteMembers.tsx +++ b/app/src/renderer/apps/Spaces/Workflow/InviteMembers.tsx @@ -1,7 +1,7 @@ import { useEffect, useMemo, useState, useRef } from 'react'; import styled from 'styled-components'; import { isValidPatp } from 'urbit-ob'; -import { Box, Flex, Select } from '@holium/design-system'; +import { Avatar, Box, Flex, Select } from '@holium/design-system'; import { Text, Label, @@ -21,7 +21,6 @@ import { ThemeType } from 'renderer/theme'; import { pluralize } from 'renderer/logic/lib/text'; import { MemberRole, MemberStatus } from 'os/types'; import { ShipActions } from 'renderer/logic/actions/ship'; -import { Avatar } from '@holium/design-system'; interface IMemberList { customBg: string; diff --git a/app/src/renderer/apps/Wallet/views/common/Settings.tsx b/app/src/renderer/apps/Wallet/views/common/Settings.tsx index cfd489f5ff..77a3415177 100644 --- a/app/src/renderer/apps/Wallet/views/common/Settings.tsx +++ b/app/src/renderer/apps/Wallet/views/common/Settings.tsx @@ -10,8 +10,8 @@ import { Button, Select, Spinner, + TextInput, } from '@holium/design-system'; -import { TextInput } from '@holium/design-system'; import { useServices } from 'renderer/logic/store'; import { getBaseTheme } from '../../lib/helpers'; import { useTrayApps } from 'renderer/apps/store'; diff --git a/app/src/renderer/components/AppTile/AppTile.tsx b/app/src/renderer/components/AppTile/AppTile.tsx index 96632c8405..ea4429dd12 100644 --- a/app/src/renderer/components/AppTile/AppTile.tsx +++ b/app/src/renderer/components/AppTile/AppTile.tsx @@ -1,11 +1,10 @@ import { useEffect, useMemo, useRef } from 'react'; import { observer } from 'mobx-react'; import styled, { css } from 'styled-components'; -import { darken, desaturate } from 'polished'; +import { darken, desaturate, lighten, rgba } from 'polished'; import { Text } from 'renderer/components'; import { Box, Flex, Spinner } from '@holium/design-system'; import { AppType, InstallStatus } from 'os/services/spaces/models/bazaar'; -import { lighten, rgba } from 'polished'; import { bgIsLightOrDark } from 'os/lib/color'; import { Icons } from '../Icons'; import { ThemeType } from 'renderer/theme'; diff --git a/app/src/renderer/components/AppTile/index.tsx b/app/src/renderer/components/AppTile/index.tsx index 3031c3f209..16bb5763ac 100644 --- a/app/src/renderer/components/AppTile/index.tsx +++ b/app/src/renderer/components/AppTile/index.tsx @@ -1,7 +1,7 @@ import { useEffect, useMemo, useRef } from 'react'; import { observer } from 'mobx-react'; import styled, { css } from 'styled-components'; -import { darken, desaturate } from 'polished'; +import { darken, desaturate, lighten, rgba } from 'polished'; import { Box, Flex, Spinner } from '@holium/design-system'; import { Text } from 'renderer/components'; import { @@ -9,7 +9,6 @@ import { InstallStatus, DevAppType, } from 'os/services/spaces/models/bazaar'; -import { lighten, rgba } from 'polished'; import { bgIsLightOrDark } from 'os/lib/color'; import { Icons } from '../Icons'; import { ThemeType } from 'renderer/theme'; diff --git a/app/src/renderer/system/auth/login/ShipSelector.tsx b/app/src/renderer/system/auth/login/ShipSelector.tsx index d979a9c4e9..726ea1b533 100644 --- a/app/src/renderer/system/auth/login/ShipSelector.tsx +++ b/app/src/renderer/system/auth/login/ShipSelector.tsx @@ -6,10 +6,9 @@ import { observer } from 'mobx-react'; import { toJS } from 'mobx'; import { delay } from 'lodash'; -import { Flex, Tooltip } from '@holium/design-system'; +import { Avatar, Flex, Tooltip } from '@holium/design-system'; import { useServices } from 'renderer/logic/store'; import { AuthActions } from 'renderer/logic/actions/auth'; -import { Avatar } from '@holium/design-system'; // ---------------------------------------- // -------- Local style components -------- diff --git a/app/src/renderer/system/desktop/useMultiplayer.ts b/app/src/renderer/system/desktop/useMultiplayer.ts index bbabc1b679..2efc9a7f10 100644 --- a/app/src/renderer/system/desktop/useMultiplayer.ts +++ b/app/src/renderer/system/desktop/useMultiplayer.ts @@ -16,8 +16,7 @@ import { RoomsManager, } from '@holium/realm-room'; import { normalizePosition } from 'os/services/shell/lib/window-manager'; -import { useToggle } from '@holium/shared'; -import { Dimensions } from '@holium/shared'; +import { Dimensions, useToggle } from '@holium/shared'; type Props = { patp: string | undefined; diff --git a/app/src/renderer/system/onboarding/AddShip.dialog.tsx b/app/src/renderer/system/onboarding/AddShip.dialog.tsx index 40d48706f3..8458ec2582 100644 --- a/app/src/renderer/system/onboarding/AddShip.dialog.tsx +++ b/app/src/renderer/system/onboarding/AddShip.dialog.tsx @@ -3,13 +3,19 @@ import { isValidPatp } from 'urbit-ob'; import { useForm, useField } from 'mobx-easy-form'; import * as yup from 'yup'; import { Grid, Label, FormControl, UrbitSVG } from 'renderer/components'; -import { Spinner, Box, Flex } from '@holium/design-system'; +import { + Button, + Icon, + TextInput, + Spinner, + Box, + Flex, +} from '@holium/design-system'; import { observer } from 'mobx-react'; import { OnboardingActions } from 'renderer/logic/actions/onboarding'; import { BaseDialogProps } from 'renderer/system/dialog/dialogs'; import { useServices } from 'renderer/logic/store'; import { useToggle } from '@holium/shared'; -import { Button, Icon, TextInput } from '@holium/design-system'; const AddShipPresenter = (props: BaseDialogProps) => { const { theme, onboarding } = useServices(); From 111ad9b8fdb78d4a55dbd34349e0f70093a03b69 Mon Sep 17 00:00:00 2001 From: gdbroman <99gustaf@gmail.com> Date: Mon, 20 Mar 2023 14:00:50 -0500 Subject: [PATCH 10/23] Init storybook --- .storybook/main.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.storybook/main.js b/.storybook/main.js index c8ea907053..f04b52b004 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -4,6 +4,7 @@ module.exports = { webpackFinal: async (config) => { const modules = [ path.resolve(__dirname, '../app/src'), + path.resolve(__dirname, '../shared/src'), path.resolve(__dirname, '../lib/conduit/src'), path.resolve(__dirname, '../lib/design-system/src'), path.resolve(__dirname, '../lib/presence/src'), @@ -17,6 +18,7 @@ module.exports = { stories: [ "../app/src/**/*.stories.@(js|jsx|ts|tsx)", + "../shared/src/**/*.stories.@(js|jsx|ts|tsx)", "../lib/conduit/src/**/*.stories.@(js|jsx|ts|tsx)", "../lib/design-system/src/**/*.stories.@(js|jsx|ts|tsx)", "../lib/presence/src/**/*.stories.@(js|jsx|ts|tsx)", From 25f417f17197390a39a49783351b84da0fcc3306 Mon Sep 17 00:00:00 2001 From: gdbroman <99gustaf@gmail.com> Date: Mon, 20 Mar 2023 15:05:55 -0500 Subject: [PATCH 11/23] Add contact info to our NPM libs --- lib/conduit/README.md | 6 +++++- lib/conduit/package.json | 1 + lib/design-system/README.md | 5 +++++ lib/design-system/package.json | 3 ++- lib/presence/README.md | 4 ++++ lib/presence/package.json | 3 ++- lib/room/README.md | 4 ++++ lib/room/package.json | 1 + 8 files changed, 24 insertions(+), 3 deletions(-) diff --git a/lib/conduit/README.md b/lib/conduit/README.md index 1ccad09d03..f9a22068b3 100644 --- a/lib/conduit/README.md +++ b/lib/conduit/README.md @@ -1,3 +1,7 @@ # @holium/conduit -A better SSE event handler for node +A better SSE event handler for node. + +## Support + +For questions, reach out on Twitter [@HoliumCorp](https://twitter.com/HoliumCorp) or our Realm Forerunners group (~lomder-librun/realm-forerunners). diff --git a/lib/conduit/package.json b/lib/conduit/package.json index f2af73165d..f697e1f42d 100644 --- a/lib/conduit/package.json +++ b/lib/conduit/package.json @@ -4,6 +4,7 @@ "author": "trent@holium.com", "license": "MIT", "description": "A node library for efficiently connecting with a ship", + "homepage": "https://holium.com", "main": "dist/holium-conduit.cjs.js", "module": "dist/holium-conduit.esm.js", "typings": "dist/holium-conduit.cjs.d.ts", diff --git a/lib/design-system/README.md b/lib/design-system/README.md index 5c2334e8c6..3abeac5b4d 100644 --- a/lib/design-system/README.md +++ b/lib/design-system/README.md @@ -1,3 +1,8 @@ # @holium/design-system A component library for Realm apps with built-in space theming. + + +## Support + +For questions, reach out on Twitter [@HoliumCorp](https://twitter.com/HoliumCorp) or our Realm Forerunners group (~lomder-librun/realm-forerunners). diff --git a/lib/design-system/package.json b/lib/design-system/package.json index d1f076add0..913cbcd4e5 100644 --- a/lib/design-system/package.json +++ b/lib/design-system/package.json @@ -1,9 +1,10 @@ { "name": "@holium/design-system", "version": "0.1.6", - "description": "A component library for Realm.", + "description": "A component library for Realm apps.", "license": "MIT", "author": "trent@holium.com", + "homepage": "https://holium.com", "main": "dist/holium-design-system.cjs.js", "module": "dist/holium-design-system.esm.js", "scripts": { diff --git a/lib/presence/README.md b/lib/presence/README.md index cb213b4cf0..279e072551 100644 --- a/lib/presence/README.md +++ b/lib/presence/README.md @@ -49,3 +49,7 @@ export const App = () => { return ; }; ``` + +## Support + +For questions, reach out on Twitter [@HoliumCorp](https://twitter.com/HoliumCorp) or our Realm Forerunners group (~lomder-librun/realm-forerunners). diff --git a/lib/presence/package.json b/lib/presence/package.json index f3f38068c0..1b33053904 100644 --- a/lib/presence/package.json +++ b/lib/presence/package.json @@ -3,7 +3,8 @@ "version": "0.1.2", "author": "trent@holium.com", "license": "MIT", - "description": "A lib for developers to leverage shared cursors in their apps.", + "description": "A lib for developers to leverage shared cursors in their Realm apps.", + "homepage": "https://holium.com", "main": "dist/holium-realm-presence.cjs.js", "module": "dist/holium-realm-presence.esm.js", "typings": "dist/holium-realm-presence.cjs.d.ts", diff --git a/lib/room/README.md b/lib/room/README.md index 6e1b772471..ec36a110cd 100644 --- a/lib/room/README.md +++ b/lib/room/README.md @@ -39,3 +39,7 @@ A "peer" can create a room via the host and perform certain actions against the - `%rooms`: the provider agent - `%room`: the peer agent + +## Support + +For questions, reach out on Twitter [@HoliumCorp](https://twitter.com/HoliumCorp) or our Realm Forerunners group (~lomder-librun/realm-forerunners). diff --git a/lib/room/package.json b/lib/room/package.json index 3f0a5a1e71..8eed2598df 100644 --- a/lib/room/package.json +++ b/lib/room/package.json @@ -4,6 +4,7 @@ "author": "trent@holium.com", "license": "MIT", "description": "A lib that manages media streams via RTCPeerConnections.", + "homepage": "https://holium.com", "main": "dist/holium-realm-room.cjs.js", "module": "dist/holium-realm-room.esm.js", "browser": { From bec5c2157c6a61dcb707f7a541f559039839643f Mon Sep 17 00:00:00 2001 From: gdbroman <99gustaf@gmail.com> Date: Mon, 20 Mar 2023 15:08:06 -0500 Subject: [PATCH 12/23] Bump version for @holium/realm-presence --- lib/presence/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/presence/package.json b/lib/presence/package.json index 1b33053904..1367e6ea50 100644 --- a/lib/presence/package.json +++ b/lib/presence/package.json @@ -1,6 +1,6 @@ { "name": "@holium/realm-presence", - "version": "0.1.2", + "version": "0.1.3", "author": "trent@holium.com", "license": "MIT", "description": "A lib for developers to leverage shared cursors in their Realm apps.", From a910d546b8a4d3d1ea74e4435e4ba88ea93a3c0c Mon Sep 17 00:00:00 2001 From: gdbroman <99gustaf@gmail.com> Date: Mon, 20 Mar 2023 15:08:17 -0500 Subject: [PATCH 13/23] Bump version for @holium/design-system --- lib/design-system/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/design-system/package.json b/lib/design-system/package.json index 913cbcd4e5..bfc29be49a 100644 --- a/lib/design-system/package.json +++ b/lib/design-system/package.json @@ -1,6 +1,6 @@ { "name": "@holium/design-system", - "version": "0.1.6", + "version": "0.1.7", "description": "A component library for Realm apps.", "license": "MIT", "author": "trent@holium.com", From 91be613db905ad6a6f5a008e4e5294f180042387 Mon Sep 17 00:00:00 2001 From: AJ LaMarc Date: Tue, 21 Mar 2023 08:22:09 -0400 Subject: [PATCH 14/23] update glob to working redirect --- desks/realm/desk.docket-0 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/desks/realm/desk.docket-0 b/desks/realm/desk.docket-0 index cff8229b0a..5dcd4bf0ed 100644 --- a/desks/realm/desk.docket-0 +++ b/desks/realm/desk.docket-0 @@ -7,5 +7,5 @@ license+'MIT' base+'realm' image+'https://holium-app-globs.nyc3.cdn.digitaloceanspaces.com/realm%2Frealm.svg' - glob-http+['https://holium-app-globs.nyc3.cdn.digitaloceanspaces.com/realm%2Fglob-0v7.j0j2a.m8eq6.8pvfh.2gb6a.9hek2.glob' 0v7.j0j2a.m8eq6.8pvfh.2gb6a.9hek2] + glob-http+['https://holium-app-globs.nyc3.cdn.digitaloceanspaces.com/realm%2Fholium-com-redirect.glob' 0v4.39m1m.t5rlt.d94cv.akdr1.389ub] == From 9511c3465e0041cf7c35eedc4a285b4280fd1c85 Mon Sep 17 00:00:00 2001 From: gdbroman <99gustaf@gmail.com> Date: Tue, 21 Mar 2023 23:14:51 -0500 Subject: [PATCH 15/23] Remove getComputedStyle from @holium/design-system --- .storybook/mock-themes/dark.css | 43 +++-- .storybook/mock-themes/light.css | 42 ++--- app/src/os/lib/color.ts | 58 ++++++- app/src/renderer/App.styles.tsx | 59 +------ app/src/renderer/apps/Messages/ChatView.tsx | 2 - app/src/renderer/apps/Messages/DMs.tsx | 1 - app/src/renderer/apps/Messages/NewChat.tsx | 1 - app/src/renderer/apps/Rooms/NewRoom.tsx | 1 - app/src/renderer/apps/Rooms/Room/Chat.tsx | 1 - app/src/renderer/apps/Rooms/Room/Invite.tsx | 1 - app/src/renderer/apps/Spaces/YouRow.tsx | 2 - .../apps/System/components/Account.tsx | 1 - .../renderer/apps/System/components/Theme.tsx | 1 - app/src/renderer/apps/System/index.tsx | 1 - .../apps/Wallet/views/common/Footer.tsx | 2 - .../views/common/Transaction/styled.tsx | 6 +- .../components/People/PassportButton.tsx | 8 +- app/src/renderer/logic/theme.ts | 104 ++++++++---- .../AppWindow/Titlebar/Titlebar.styles.ts | 4 +- .../components/AppWindow/View/DevView.tsx | 36 +--- .../components/Home/AppInstall/AppSearch.tsx | 1 - .../SystemBar/components/MiniAppWindow.tsx | 4 +- .../system/onboarding/ProfileSetup.dialog.tsx | 1 - .../system/onboarding/SelectPatp.dialog.tsx | 13 +- .../system/onboarding/SetPassword.dialog.tsx | 2 - app/src/renderer/system/updater/installer.css | 45 +++-- lib/design-system/src/blocks/Block/Block.tsx | 8 +- .../src/blocks/Bubble/Bubble.styles.tsx | 8 +- .../src/blocks/Bubble/Reaction.tsx | 12 +- .../src/blocks/Bubble/fragment-lib.tsx | 29 ++-- .../src/blocks/LinkBlock/LinkBlock.tsx | 2 +- .../src/general/Anchor/Anchor.tsx | 6 + .../src/general/Avatar/Avatar.tsx | 2 +- .../src/general/Button/Button.tsx | 68 ++++---- lib/design-system/src/general/Card/Card.tsx | 4 +- lib/design-system/src/general/Icon/Icon.tsx | 6 +- .../src/general/MenuItem/MenuItem.styles.tsx | 21 +-- .../src/general/ProgressBar/ProgressBar.tsx | 7 +- lib/design-system/src/general/Row/Row.tsx | 13 +- .../general/SectionDivider/SectionDivider.tsx | 2 +- .../src/general/Skeleton/Skeleton.tsx | 4 +- lib/design-system/src/general/Text/Text.tsx | 7 +- .../src/general/Tooltip/Tooltip.tsx | 2 +- lib/design-system/src/general/index.ts | 1 + .../src/input/AvatarInput/AvatarInput.tsx | 1 - lib/design-system/src/input/Input/Input.tsx | 8 +- .../src/input/InputBox/InputBox.tsx | 16 +- .../src/input/RadioGroup/RadioGroup.style.tsx | 14 +- .../src/input/RadioGroup/RadioGroup.tsx | 5 +- .../input/RadioImages/RadioImages.style.tsx | 24 +-- .../src/input/Select/Select.styles.tsx | 16 +- lib/design-system/src/input/Select/Select.tsx | 3 +- lib/design-system/src/os/Bar/Bar.tsx | 2 +- .../src/os/RoomsDock/RoomsDock.tsx | 6 +- .../src/os/SystemBar/BarButton.tsx | 4 +- .../src/os/SystemBar/HoliumButton.tsx | 160 +++++++++--------- lib/design-system/src/os/Tab/Tab.tsx | 4 +- lib/design-system/src/os/TrayApp/TrayApp.tsx | 4 +- lib/design-system/src/util/colors.ts | 19 ++- 59 files changed, 449 insertions(+), 479 deletions(-) create mode 100644 lib/design-system/src/general/Anchor/Anchor.tsx diff --git a/.storybook/mock-themes/dark.css b/.storybook/mock-themes/dark.css index 874ca4967b..2a3044dc83 100644 --- a/.storybook/mock-themes/dark.css +++ b/.storybook/mock-themes/dark.css @@ -3,36 +3,35 @@ --blur: blur(24px); --transition: all 0.25s ease; --transition-slow: all 0.5s ease; - --rlm-font: 'Rubik', sans-serif; - --rlm-base-color: #25343f; - --rlm-accent-color: #4e9efd; - --rlm-input-color: #1a252e; - --rlm-border-color: rgba(0, 0, 0, 0.2); - --rlm-window-color: #212d36; - --rlm-dock-color: #2a384375; - --rlm-card-color: #2a3843; - --rlm-theme-mode: dark; - --rlm-text-color: #ffffff; - --rlm-icon-color: #a2a8ac; - --rlm-intent-alert-color: #ff6240; - --rlm-intent-caution-color: #ffbc32; - --rlm-intent-success-color: #0fc383; + --rlm-font: 'Rubik',sans-serif; --rlm-border-radius-4: 4px; --rlm-border-radius-6: 6px; --rlm-border-radius-9: 9px; --rlm-border-radius-12: 12px; --rlm-border-radius-12: 16px; - --rlm-box-shadow-1: 0px 0px 4px rgba(0, 0, 0, 0.06); - --rlm-box-shadow-2: 0px 0px 9px rgba(0, 0, 0, 0.12); - --rlm-box-shadow-3: 0px 0px 9px rgba(0, 0, 0, 0.18); - --rlm-box-shadow-lifted: 0px 0px 9px rgba(0, 0, 0, 0.24); - --rlm-overlay-hover: rgba(255, 255, 255, 0.05); - --rlm-overlay-active: rgba(255, 255, 255, 0.09); + --rlm-box-shadow-1: 0px 0px 4px rgba(0,0,0,0.06); + --rlm-box-shadow-2: 0px 0px 9px rgba(0,0,0,0.12); + --rlm-box-shadow-3: 0px 0px 9px rgba(0,0,0,0.18); + --rlm-box-shadow-lifted: 0px 0px 9px rgba(0,0,0,0.24); + + --rlm-base-rgba: 37,52,63; + --rlm-accent-rgba: 78,158,253; + --rlm-input-rgba: 26,37,46; + --rlm-border-rgba: 0,0,0,0.2; + --rlm-window-rgba: 33,45,54; + --rlm-dock-rgba: 42,56,67,0.45; + --rlm-card-rgba: 42,56,67; + --rlm-text-rgba: 255,255,255; + --rlm-icon-rgba: 162,168,172; + --rlm-intent-alert-rgba: 255,98,64; + --rlm-intent-caution-rgba: 255,188,50; + --rlm-intent-success-rgba: 15,195,131; + --rlm-overlay-hover-rgba: 255,255,255,0.05; + --rlm-overlay-active-rgba: 255,255,255,0.09; } html { - background: var(--rlm-window-color); - caret-color: var(--rlm-accent-color); + background: rgba(var(--rlm-window-hex-rgba)); } * { diff --git a/.storybook/mock-themes/light.css b/.storybook/mock-themes/light.css index 57ebdf7c2d..d302e6c2f1 100644 --- a/.storybook/mock-themes/light.css +++ b/.storybook/mock-themes/light.css @@ -3,35 +3,35 @@ --blur: blur(24px); --transition: all 0.25s ease; --transition-slow: all 0.5s ease; - --rlm-font: 'Rubik', sans-serif; - --rlm-base-color: #c4c3bf; - --rlm-accent-color: #4e9efd; - --rlm-input-color: #ffffff; - --rlm-border-color: #ddddda; - --rlm-window-color: #f5f5f4; - --rlm-dock-color: #f5f5f475; - --rlm-card-color: #f5f5f4; - --rlm-theme-mode: light; - --rlm-text-color: #2a2927; - --rlm-icon-color: #333333; - --rlm-intent-alert-color: #ff6240; - --rlm-intent-caution-color: #ffbc32; - --rlm-intent-success-color: #0fc383; + --rlm-font: 'Rubik',sans-serif; --rlm-border-radius-4: 4px; --rlm-border-radius-6: 6px; --rlm-border-radius-9: 9px; --rlm-border-radius-12: 12px; --rlm-border-radius-12: 16px; - --rlm-box-shadow-1: 0px 0px 4px rgba(0, 0, 0, 0.06); - --rlm-box-shadow-2: 0px 0px 9px rgba(0, 0, 0, 0.12); - --rlm-box-shadow-3: 0px 0px 9px rgba(0, 0, 0, 0.18); - --rlm-box-shadow-lifted: 0px 0px 9px rgba(0, 0, 0, 0.24); - --rlm-overlay-hover: rgba(0, 0, 0, 0.05); - --rlm-overlay-active: rgba(0, 0, 0, 0.09); + --rlm-box-shadow-1: 0px 0px 4px rgba(0,0,0,0.06); + --rlm-box-shadow-2: 0px 0px 9px rgba(0,0,0,0.12); + --rlm-box-shadow-3: 0px 0px 9px rgba(0,0,0,0.18); + --rlm-box-shadow-lifted: 0px 0px 9px rgba(0,0,0,0.24); + + --rlm-base-rgba: 196,195,191; + --rlm-accent-rgba: 78,158,253; + --rlm-input-rgba: 255,255,255; + --rlm-border-rgba: 221,221,218; + --rlm-window-rgba: 245,245,244; + --rlm-dock-rgba: 245,245,244,0.45; + --rlm-card-rgba: 245,245,244; + --rlm-text-rgba: 42,41,39; + --rlm-icon-rgba: 51,51,51; + --rlm-intent-alert-rgba: 255,98,64; + --rlm-intent-caution-rgba: 255,188,50; + --rlm-intent-success-rgba: 15,195,131; + --rlm-overlay-hover-rgba: 0,0,0,0.05; + --rlm-overlay-active-rgba: 0,0,0,0.09; } html { - background: var(--rlm-window-color); + background: rgba(var(--rlm-window-hex-rgba)); } * { diff --git a/app/src/os/lib/color.ts b/app/src/os/lib/color.ts index 5cfd2271ce..e9a41c818c 100644 --- a/app/src/os/lib/color.ts +++ b/app/src/os/lib/color.ts @@ -62,16 +62,38 @@ export function cleanNounColor(ux: string) { } export function hexToRgb(hex: string) { - const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - return result - ? { - r: parseInt(result[1], 16), - g: parseInt(result[2], 16), - b: parseInt(result[3], 16), - } - : null; + if (hex.length === 4) { + const r = hex.substring(1, 2); + const g = hex.substring(2, 3); + const b = hex.substring(3, 4); + return { + r: parseInt(`${r}${r}`, 16), + g: parseInt(`${g}${g}`, 16), + b: parseInt(`${b}${b}`, 16), + }; + } else if (hex.length === 7) { + const r = hex.substring(1, 3); + const g = hex.substring(3, 5); + const b = hex.substring(5, 7); + return { + r: parseInt(r, 16), + g: parseInt(g, 16), + b: parseInt(b, 16), + }; + } + + return null; } +export const rgbToHex = (r: number, g: number, b: number) => { + const componentToHex = (c: number) => { + var hex = c.toString(16); + return hex.length === 1 ? '0' + hex : hex; + }; + + return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b); +}; + export function rgbToString(rgb: { r: number; g: number; b: number } | null) { return rgb ? `${rgb.r}, ${rgb.g}, ${rgb.b}` : rgb; } @@ -82,6 +104,26 @@ export function rgbToStringFull( return rgb ? `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` : 'rgb(0, 0, 0)'; } +/* Converts to 'r,g,b,a' string. */ +export const toRgbaString = (color: string): string => { + const isHex = color.startsWith('#'); + const isRgb = color.startsWith('rgb'); + const isRgba = color.startsWith('rgba'); + + if (isHex) { + const rgbaString = hexToRgb(color); + return rgbToString(rgbaString) as string; + } else if (isRgba) { + const rgbaString = color.replace('rgba(', '').replace(')', ''); + return rgbaString; + } else if (isRgb) { + const rgbaString = color.replace('rgb(', '').replace(')', ''); + return rgbaString; + } else { + return color; + } +}; + // --------- // function dropWhile(arr: T[], pred: (x: T) => boolean): T[] { diff --git a/app/src/renderer/App.styles.tsx b/app/src/renderer/App.styles.tsx index e5194b1824..34acde5c3f 100644 --- a/app/src/renderer/App.styles.tsx +++ b/app/src/renderer/App.styles.tsx @@ -1,6 +1,6 @@ -import { darken, rgba, lighten } from 'polished'; +import { darken } from 'polished'; import { createGlobalStyle, css } from 'styled-components'; -import { ThemeType } from './logic/theme'; +import { genCSSVariables, ThemeType } from './logic/theme'; import { ThemeType as OldTheme } from './theme'; interface StyleProps { @@ -10,54 +10,10 @@ interface StyleProps { } export const GlobalStyle = createGlobalStyle` - :root { - ${(props: StyleProps) => css` - --blur: ${props.blur ? 'blur(24px)' : 'none'}; - --transition-fast: 0.4s ease; - --transition: all 0.25s ease; - --transition-2x: all 0.5s ease; - --rlm-border-radius-4: 4px; - --rlm-border-radius-6: 6px; - --rlm-border-radius-9: 9px; - --rlm-border-radius-12: 12px; - --rlm-border-radius-12: 16px; - --rlm-box-shadow-1: 0px 0px 4px rgba(0, 0, 0, 0.06); - --rlm-box-shadow-2: 0px 0px 9px rgba(0, 0, 0, 0.12); - --rlm-box-shadow-3: 0px 0px 9px rgba(0, 0, 0, 0.18); - --rlm-box-shadow-lifted: 0px 0px 9px rgba(0, 0, 0, 0.24); + ${(props) => + css` + ${genCSSVariables(props.realmTheme)} `} - } - - ${(props) => css` - :root { - --rlm-font: 'Rubik', sans-serif; - --rlm-home-button-color: ${props.realmTheme.mode === 'light' - ? rgba(darken(0.2, props.realmTheme.dockColor), 0.5) - : rgba(darken(0.15, props.realmTheme.dockColor), 0.6)}; - --rlm-base-color: ${props.realmTheme.backgroundColor}; - --rlm-accent-color: ${props.realmTheme.accentColor}; - --rlm-input-color: ${props.realmTheme.inputColor}; - --rlm-border-color: ${props.realmTheme.mode === 'dark' - ? lighten(0.07, props.realmTheme.windowColor) - : darken(0.1, props.realmTheme.windowColor)}; - --rlm-window-color: ${props.realmTheme.windowColor}; - --rlm-window-bg: ${rgba(props.realmTheme.windowColor, 0.9)}; - --rlm-dock-color: ${rgba(props.realmTheme.windowColor, 0.65)}; - --rlm-card-color: ${props.realmTheme.windowColor}; - --rlm-theme-mode: ${props.realmTheme.mode}; - --rlm-text-color: ${props.realmTheme.textColor}; - --rlm-icon-color: ${rgba(props.realmTheme.textColor, 0.7)}; - --rlm-intent-alert-color: #ff6240; - --rlm-intent-caution-color: #ffbc32; - --rlm-intent-success-color: #0fc383; - --rlm-overlay-hover: ${props.realmTheme.mode === 'light' - ? 'rgba(0, 0, 0, 0.04)' - : 'rgba(255, 255, 255, 0.06)'}; - --rlm-overlay-active: ${props.realmTheme.mode === 'light' - ? 'rgba(0, 0, 0, 0.06)' - : 'rgba(255, 255, 255, 0.09)'}; - } - `} * { margin: 0; @@ -101,9 +57,9 @@ export const GlobalStyle = createGlobalStyle` } body { - background-color: var(--rlm-window-color); + background-color: rgba(var(--rlm-window-rgba)); transition: background-color 1s ease; - color:var(--rlm-text-color); + color: rgba(var(--rlm-text-rgba)); height: 100vh; width: 100vw; margin: 0; @@ -132,5 +88,4 @@ export const GlobalStyle = createGlobalStyle` fieldset { border: 0; } - `; diff --git a/app/src/renderer/apps/Messages/ChatView.tsx b/app/src/renderer/apps/Messages/ChatView.tsx index 97b7878164..9f48c7183f 100644 --- a/app/src/renderer/apps/Messages/ChatView.tsx +++ b/app/src/renderer/apps/Messages/ChatView.tsx @@ -43,7 +43,6 @@ import { IuseStorage } from 'renderer/logic/lib/useStorage'; import styled from 'styled-components'; const ChatInputWrapper = styled(Box)` - /* background: var(--rlm-window-bg); */ backdrop-filter: blur(24px); padding: 0 24px; `; @@ -422,7 +421,6 @@ export const ChatView = observer(({ selectedChat, theme, storage }: Props) => { autoFocus name="dm-message" shouldHighlightOnFocus - className="realm-cursor-text-cursor" width="100%" placeholder="Write a message" rightInteractive diff --git a/app/src/renderer/apps/Messages/DMs.tsx b/app/src/renderer/apps/Messages/DMs.tsx index 5b8b810311..19f828e774 100644 --- a/app/src/renderer/apps/Messages/DMs.tsx +++ b/app/src/renderer/apps/Messages/DMs.tsx @@ -152,7 +152,6 @@ const DMsPresenter = (props: IProps) => { { tabIndex={1} mx={2} width="100%" - className="realm-cursor-text-cursor" placeholder="Who would you like to add?" value={patp} onChange={(e: any) => setPatp(e.target.value)} diff --git a/app/src/renderer/apps/Rooms/NewRoom.tsx b/app/src/renderer/apps/Rooms/NewRoom.tsx index f8492e0240..212ee2d985 100644 --- a/app/src/renderer/apps/Rooms/NewRoom.tsx +++ b/app/src/renderer/apps/Rooms/NewRoom.tsx @@ -103,7 +103,6 @@ const NewRoomPresenter = () => { id="room-name-new" name="room-name-new" tabIndex={2} - className="realm-cursor-text-cursor" width="100%" type="text" autoFocus diff --git a/app/src/renderer/apps/Rooms/Room/Chat.tsx b/app/src/renderer/apps/Rooms/Room/Chat.tsx index 7c69af46e6..110e640238 100644 --- a/app/src/renderer/apps/Rooms/Room/Chat.tsx +++ b/app/src/renderer/apps/Rooms/Room/Chat.tsx @@ -113,7 +113,6 @@ const RoomChatPresenter = () => { > { { { {/* (props.hidden ? 'none' : 'block')}; `; diff --git a/app/src/renderer/apps/Wallet/views/common/Transaction/styled.tsx b/app/src/renderer/apps/Wallet/views/common/Transaction/styled.tsx index 558defcb34..435833603f 100644 --- a/app/src/renderer/apps/Wallet/views/common/Transaction/styled.tsx +++ b/app/src/renderer/apps/Wallet/views/common/Transaction/styled.tsx @@ -1,11 +1,9 @@ import styled from 'styled-components'; import { Flex } from 'renderer/components'; -/* @ts-expect-error */ -export const ContainerFlex = styled(Flex)` - background-color: var(--rlm-input-color); +export const ContainerFlex = styled(Flex)<{ focusBorder: string }>` + background-color: rgba(var(--rlm-input-rgba)); :focus-within { - /* @ts-ignore */ border: 1px solid ${(props) => props.focusBorder}; } `; diff --git a/app/src/renderer/components/People/PassportButton.tsx b/app/src/renderer/components/People/PassportButton.tsx index 79c3952192..9c823a3ffe 100644 --- a/app/src/renderer/components/People/PassportButton.tsx +++ b/app/src/renderer/components/People/PassportButton.tsx @@ -6,8 +6,8 @@ export const PassportButton = styled(motion.button)` flex-direction: row; align-items: center; justify-content: center; - border: 1px solid var(--border-color); - background-color: var(--background-color); + border: 1px solid rgba(var(--rlm-border-rgba)); + background-color: rgba(var(--rlm-window-rgba)); height: 26px; width: 40px; transition: var(--transition); @@ -15,8 +15,4 @@ export const PassportButton = styled(motion.button)` /* svg { fill: rgba(var(--text-color), 0.7); } */ - :hover { - background-color: darken(0.1, var(--background-color)); - transition: var(--transition); - } `; diff --git a/app/src/renderer/logic/theme.ts b/app/src/renderer/logic/theme.ts index e735aa3a0c..a8c293d4c1 100644 --- a/app/src/renderer/logic/theme.ts +++ b/app/src/renderer/logic/theme.ts @@ -8,38 +8,80 @@ import { getSnapshot, } from 'mobx-state-tree'; import { darken, lighten, rgba } from 'polished'; -import { bgIsLightOrDark } from '../../os/lib/color'; +import { bgIsLightOrDark, toRgbaString } from '../../os/lib/color'; import { LoaderModel } from '../../os/services/common.model'; import { toJS } from 'mobx'; export const genCSSVariables = (theme: ThemeType) => { + /** + * All --rlm-*-rgba variables should be in rgba format. + * This is to allow for opacity to be applied to the color. + */ + const themeMode = toRgbaString(theme.mode); + const isLight = themeMode === 'light'; + const homeButtonColor = isLight + ? toRgbaString(rgba(darken(0.2, theme.dockColor), 0.5)) + : toRgbaString(rgba(darken(0.15, theme.dockColor), 0.6)); + const baseColor = toRgbaString(theme.backgroundColor); + const accentColor = toRgbaString(theme.accentColor); + const inputColor = toRgbaString(theme.inputColor); + const borderColor = isLight + ? toRgbaString(darken(0.1, theme.windowColor)) + : toRgbaString(darken(0.075, theme.windowColor)); + const windowColor = toRgbaString(theme.windowColor); + const windowBgColor = toRgbaString(rgba(theme.windowColor, 0.9)); + const dockColor = toRgbaString(rgba(theme.windowColor, 0.65)); + const cardColor = isLight + ? toRgbaString(lighten(0.05, theme.windowColor)) + : toRgbaString(darken(0.025, theme.windowColor)); + const textColor = toRgbaString(theme.textColor); + const iconColor = toRgbaString(theme.iconColor); + const mouseColor = toRgbaString(theme.mouseColor); + const intentAlertColor = toRgbaString('#ff6240'); + const intentCautionColor = toRgbaString('#ffbc32'); + const intentSuccessColor = toRgbaString('#0fc383'); + const overlayHoverColor = toRgbaString(rgba(isLight ? '#fff' : '#000', 0.05)); + const overlayActiveColor = toRgbaString( + rgba(isLight ? '#000' : '#fff', 0.09) + ); + return ` - :root { - --rlm-font: 'Rubik', sans-serif; - --rlm-base-color: ${theme.backgroundColor}; - --rlm-accent-color: ${theme.accentColor}; - --rlm-input-color: ${theme.inputColor}; - --rlm-border-color: ${ - theme.mode === 'light' - ? darken(0.1, theme.windowColor) - : darken(0.075, theme.windowColor) - }; - --rlm-window-color: ${theme.windowColor}; - --rlm-card-color: ${ - theme.mode === 'light' - ? lighten(0.05, theme.windowColor) - : darken(0.025, theme.windowColor) - }; - --rlm-theme-mode: ${theme.mode}; - --rlm-text-color: ${theme.textColor}; - --rlm-icon-color: ${theme.iconColor}; - --rlm-mouse-color: ${theme.mouseColor}; - } - - div[data-radix-portal] { - z-index: 2000 !important; - } - `; + :root { + --theme-mode: ${themeMode}; + --rlm-font: 'Rubik',sans-serif; + --blur: blur(24px); + --transition-fast: 0.4s ease; + --transition: all 0.25s ease; + --transition-2x: all 0.5s ease; + --rlm-border-radius-4: 4px; + --rlm-border-radius-6: 6px; + --rlm-border-radius-9: 9px; + --rlm-border-radius-12: 12px; + --rlm-border-radius-16: 16px; + --rlm-box-shadow-1: 0px 0px 4px rgba(0,0,0,0.06); + --rlm-box-shadow-2: 0px 0px 9px rgba(0,0,0,0.12); + --rlm-box-shadow-3: 0px 0px 9px rgba(0,0,0,0.18); + --rlm-box-shadow-lifted: 0px 0px 9px rgba(0,0,0,0.24); + + --rlm-home-button-rgba: ${homeButtonColor}; + --rlm-dock-rgba: ${dockColor}; + --rlm-base-rgba: ${baseColor}; + --rlm-accent-rgba: ${accentColor}; + --rlm-input-rgba: ${inputColor}; + --rlm-border-rgba: ${borderColor}; + --rlm-window-rgba: ${windowColor}; + --rlm-window-bg-rgba: ${windowBgColor}; + --rlm-card-rgba: ${cardColor}; + --rlm-text-rgba: ${textColor}; + --rlm-icon-rgba: ${iconColor}; + --rlm-mouse-rgba: ${mouseColor}; + --rlm-intent-alert-rgba: ${intentAlertColor}; + --rlm-intent-caution-rgba: ${intentCautionColor}; + --rlm-intent-success-rgba: ${intentSuccessColor}; + --rlm-overlay-hover-rgba: ${overlayHoverColor}; + --rlm-overlay-active-rgba: ${overlayActiveColor}; + } + `; }; export const DEFAULT_WALLPAPER = @@ -127,9 +169,9 @@ export const ThemeStore = types self.currentTheme = Theme.create(theme); return self.currentTheme; }, - // setCurrentSpaceTheme(spaceId: string, theme?: ThemeType) { + // setCurrentSpaceTheme(spaceId: string,theme?: ThemeType) { // if (theme) { - // self.spaces.set(spaceId, theme); + // self.spaces.set(spaceId,theme); // } // self.currentTheme = self.spaces.get(spaceId); // return self.currentTheme; @@ -149,11 +191,11 @@ export const ThemeStore = types yield DesktopActions.changeWallpaper(id, toJS(theme)); return self.currentTheme; // // if (config.patp) { - // // self.ships.set(themeId, theme); + // // self.ships.set(themeId,theme); // // self.currentTheme = self.ships.get(themeId); // // } // // if (config.spaceId) { - // // self.spaces.set(themeId, theme); + // // self.spaces.set(themeId,theme); // // self.currentTheme = self.ships.get(themeId); // // } }), diff --git a/app/src/renderer/system/desktop/components/AppWindow/Titlebar/Titlebar.styles.ts b/app/src/renderer/system/desktop/components/AppWindow/Titlebar/Titlebar.styles.ts index 47c8d03460..2cb3db0a31 100644 --- a/app/src/renderer/system/desktop/components/AppWindow/Titlebar/Titlebar.styles.ts +++ b/app/src/renderer/system/desktop/components/AppWindow/Titlebar/Titlebar.styles.ts @@ -27,7 +27,9 @@ export const TitlebarContainer = styled(motion.div)` backface-visibility: hidden; ${({ zIndex, hasBorder }) => css` z-index: ${zIndex}; - border-bottom: ${hasBorder ? ' 1px solid var(--rlm-border-color)' : 'none'}; + border-bottom: ${hasBorder + ? '1px solid rgba(var(--rlm-border-rgba))' + : 'none'}; `} `; diff --git a/app/src/renderer/system/desktop/components/AppWindow/View/DevView.tsx b/app/src/renderer/system/desktop/components/AppWindow/View/DevView.tsx index 235e062814..a028e70c71 100644 --- a/app/src/renderer/system/desktop/components/AppWindow/View/DevView.tsx +++ b/app/src/renderer/system/desktop/components/AppWindow/View/DevView.tsx @@ -1,12 +1,12 @@ import { useEffect, useMemo, useState } from 'react'; import { useServices } from 'renderer/logic/store'; -import { lighten, darken } from 'polished'; import { WebView } from './WebView'; import { AppWindowType } from 'os/services/shell/desktop.model'; import { observer } from 'mobx-react'; import { useToggle } from '@holium/shared'; import { useRooms } from 'renderer/apps/Rooms/useRooms'; import { RoomManagerEvent, RoomsManager } from '@holium/realm-room'; +import { genCSSVariables } from 'renderer/logic/theme'; const connectWebviewToMultiplayer = async ( ship: string, @@ -54,39 +54,7 @@ const DevViewPresenter = ({ appWindow, isResizing }: Props) => { () => `${appWindow.appId}-web-webview`, [appWindow.appId] ); - const themeCss = useMemo( - () => ` - :root { - --rlm-font: 'Rubik', sans-serif; - --rlm-base-color: ${currentTheme.backgroundColor}; - --rlm-accent-color: ${currentTheme.accentColor}; - --rlm-input-color: ${currentTheme.inputColor}; - --rlm-border-color: ${ - currentTheme.mode === 'light' - ? darken(0.1, currentTheme.windowColor) - : darken(0.075, currentTheme.windowColor) - }; - --rlm-window-color: ${currentTheme.windowColor}; - --rlm-card-color: ${ - currentTheme.mode === 'light' - ? lighten(0.05, currentTheme.windowColor) - : darken(0.025, currentTheme.windowColor) - }; - --rlm-theme-mode: ${currentTheme.mode}; - --rlm-text-color: ${currentTheme.textColor}; - --rlm-icon-color: ${currentTheme.iconColor}; - } - div[data-radix-portal] { - z-index: 2000 !important; - } - - #rlm-cursor { - position: absolute; - z-index: 2147483646 !important; - } - `, - [currentTheme] - ); + const themeCss = useMemo(() => genCSSVariables(currentTheme), [currentTheme]); useEffect(() => { const webview = document.getElementById( diff --git a/app/src/renderer/system/desktop/components/Home/AppInstall/AppSearch.tsx b/app/src/renderer/system/desktop/components/Home/AppInstall/AppSearch.tsx index d104a15768..cde17c55a1 100644 --- a/app/src/renderer/system/desktop/components/Home/AppInstall/AppSearch.tsx +++ b/app/src/renderer/system/desktop/components/Home/AppInstall/AppSearch.tsx @@ -92,7 +92,6 @@ const AppSearchAppPresenter = (props: AppSearchProps) => { innerRef={inputRef} flex={8} id={`${popoverId}-trigger`} - className="realm-cursor-text-cursor" type="text" placeholder={searchPlaceholder} bgOpacity={0.3} diff --git a/app/src/renderer/system/desktop/components/SystemBar/components/MiniAppWindow.tsx b/app/src/renderer/system/desktop/components/SystemBar/components/MiniAppWindow.tsx index 02ba50b54e..9745536a3c 100644 --- a/app/src/renderer/system/desktop/components/SystemBar/components/MiniAppWindow.tsx +++ b/app/src/renderer/system/desktop/components/SystemBar/components/MiniAppWindow.tsx @@ -21,8 +21,8 @@ export const MiniAppWindow = styled(motion.div)` /* backdrop-filter: blur(24px); */ transform: translate3d(0, 0, 0); backface-visibility: hidden; - background: var(--rlm-window-color); - border: 1px solid var(--rlm-border-color); + background: rgba(var(--rlm-window-rgba)); + border: 1px solid rgba(var(--rlm-border-rgba)); z-index: 12; box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.12); `; diff --git a/app/src/renderer/system/onboarding/ProfileSetup.dialog.tsx b/app/src/renderer/system/onboarding/ProfileSetup.dialog.tsx index 8b018b30f9..3c26c65e04 100644 --- a/app/src/renderer/system/onboarding/ProfileSetup.dialog.tsx +++ b/app/src/renderer/system/onboarding/ProfileSetup.dialog.tsx @@ -294,7 +294,6 @@ const ProfileSetupPresenter = (props: BaseDialogProps) => { ` justify-content: flex-start; align-items: center; gap: 6px; - color: var(--rlm-text-color); + color: rgba(var(--rlm-text-rgba)); transition: var(--transition); border: 1px solid - ${(props: PatpOptionProps) => - props.customBorder || 'var(--rlm-border-color)'}; + ${(props) => props.customBorder || 'rgba(var(--rlm-border-rgba))'}; - ${(props: PatpOptionProps) => + ${(props) => props.customBg && css` background-color: ${props.customBg}; @@ -62,9 +61,7 @@ const PatpOption = styled(Button.Base)` } `; -const AvailablePlanet: FC = ( - props: AvailablePlanetProps -) => { +const AvailablePlanet = (props: AvailablePlanetProps) => { const { theme } = useServices(); const baseTheme = getBaseTheme(theme.currentTheme); diff --git a/app/src/renderer/system/onboarding/SetPassword.dialog.tsx b/app/src/renderer/system/onboarding/SetPassword.dialog.tsx index 570e703737..4304f46841 100644 --- a/app/src/renderer/system/onboarding/SetPassword.dialog.tsx +++ b/app/src/renderer/system/onboarding/SetPassword.dialog.tsx @@ -144,7 +144,6 @@ const SetPasswordPresenterView = ({ name="password" type="password" placeholder="Must have at least 8 characters" - className="realm-cursor-text-cursor" width="100%" error={ password.computed.ifWasEverBlurredThenError && @@ -167,7 +166,6 @@ const SetPasswordPresenterView = ({ name="confirm-password" type="password" placeholder="Must match" - className="realm-cursor-text-cursor" width="100%" error={ confirmPassword.computed.ifWasEverBlurredThenError && diff --git a/app/src/renderer/system/updater/installer.css b/app/src/renderer/system/updater/installer.css index 770d06fe4a..107e1aa54b 100644 --- a/app/src/renderer/system/updater/installer.css +++ b/app/src/renderer/system/updater/installer.css @@ -1,40 +1,39 @@ :root { - font-family: 'Rubik', system-ui, sans-serif; - color: var(--rlm-text-color); --theme-mode: 'light'; --blur: blur(24px); --transition: all 0.25s ease; --transition-slow: all 0.5s ease; - --rlm-font: 'Rubik', system-ui, sans-serif; - --rlm-base-color: #c4c3bf; - --rlm-accent-color: #4e9efd; - --rlm-input-color: #f5f5f4; - --rlm-border-color: #ddddda; - --rlm-window-color: #ffffff; - --rlm-dock-color: #f5f5f475; - --rlm-card-color: #f5f5f4; - --rlm-theme-mode: light; - --rlm-text-color: #2a2927; - --rlm-icon-color: #333333; - --rlm-intent-alert-color: #e82a00; - --rlm-intent-caution-color: #ffbc32; - --rlm-intent-success-color: #0fc383; + --rlm-font: 'Rubik',system-ui,sans-serif; --rlm-border-radius-4: 4px; --rlm-border-radius-6: 6px; --rlm-border-radius-9: 9px; --rlm-border-radius-12: 12px; --rlm-border-radius-12: 16px; - --rlm-box-shadow-1: 0px 0px 4px rgba(0, 0, 0, 0.06); - --rlm-box-shadow-2: 0px 0px 9px rgba(0, 0, 0, 0.12); - --rlm-box-shadow-3: 0px 0px 9px rgba(0, 0, 0, 0.18); - --rlm-box-shadow-lifted: 0px 0px 9px rgba(0, 0, 0, 0.24); - --rlm-overlay-hover: rgba(0, 0, 0, 0.05); - --rlm-overlay-active: rgba(0, 0, 0, 0.09); + --rlm-box-shadow-1: 0px 0px 4px rgba(0,0,0,0.06); + --rlm-box-shadow-2: 0px 0px 9px rgba(0,0,0,0.12); + --rlm-box-shadow-3: 0px 0px 9px rgba(0,0,0,0.18); + --rlm-box-shadow-lifted: 0px 0px 9px rgba(0,0,0,0.24); + + --rlm-base-rgba: 196,195,191; + --rlm-accent-rgba: 78,158,253; + --rlm-input-rgba: 245,245,244; + --rlm-border-rgba: 221,221,218; + --rlm-window-rgba: 255,255,255; + --rlm-dock-rgba: 245,245,244,0.45; + --rlm-card-rgba: 245,245,244; + --rlm-text-rgba: 42,41,39; + --rlm-icon-rgba: 51,51,51; + --rlm-intent-alert-rgba: 232,42,0; + --rlm-intent-caution-rgba: 255,188,50; + --rlm-intent-success-rgba: 15,195,131; + --rlm-overlay-hover-rgba: 0,0,0,0.05; + --rlm-overlay-active-rgba: 0,0,0,0.09; } body { margin: 0; padding: 0; - background: var(--rlm-window-color); + color: rgba(var(--rlm-text-rgba)); + background: rgba(var(--rlm-window-rgba)); font-family: var(--rlm-font); } * { diff --git a/lib/design-system/src/blocks/Block/Block.tsx b/lib/design-system/src/blocks/Block/Block.tsx index ec802e380a..648d5b9a32 100644 --- a/lib/design-system/src/blocks/Block/Block.tsx +++ b/lib/design-system/src/blocks/Block/Block.tsx @@ -54,10 +54,10 @@ export const BlockStyle = styled(motion.span)` align-items: flex-start; padding: 6px; gap: 6px; - background: var(--rlm-card-color); - color: var(--rlm-text-color) !important; + background: rgba(var(--rlm-card-rgba)); + color: rgba(var(--rlm-text-rgba)) !important; ${Text.Custom} { - color: var(--rlm-text-color) !important; + color: rgba(var(--rlm-text-rgba)) !important; } backdrop-filter: blur(6px); border-radius: var(--rlm-border-radius-9); @@ -106,7 +106,7 @@ export const BlockStyle = styled(motion.span)` .block-footer { transition: var(--transition); opacity: 1; - background: var(--rlm-window-color); + background: rgba(var(--rlm-window-rgba)); } .block-author { opacity: 1; diff --git a/lib/design-system/src/blocks/Bubble/Bubble.styles.tsx b/lib/design-system/src/blocks/Bubble/Bubble.styles.tsx index c9c56f4ad5..e152f76823 100644 --- a/lib/design-system/src/blocks/Bubble/Bubble.styles.tsx +++ b/lib/design-system/src/blocks/Bubble/Bubble.styles.tsx @@ -10,11 +10,11 @@ export const BubbleStyle = styled(Box)` padding: 6px 8px 6px 8px; font-size: 14px; align-self: flex-start; - color: var(--rlm-text-color); - background: var(--rlm-input-color); + color: rgba(var(--rlm-text-rgba)); + background: rgba(var(--rlm-input-rgba)); border-radius: 9px 9px 9px 0px; &.bubble-our { - background: var(--rlm-accent-color); + background: rgba(var(--rlm-accent-rgba)); border-radius: 9px 9px 0px 9px; ${Text.Custom} { color: #ffffff; @@ -49,7 +49,7 @@ export const BubbleAuthor = styled(Text.Custom)<{ authorColor?: string }>` display: inline-flex; font-size: 12px; font-weight: 500; - color: ${(props) => props.authorColor ?? 'var(--rlm-text-color)'}; + color: ${(props) => props.authorColor ?? 'rgba(var(--rlm-text-rgba))'}; `; export const BubbleFooter = styled(Box)` diff --git a/lib/design-system/src/blocks/Bubble/Reaction.tsx b/lib/design-system/src/blocks/Bubble/Reaction.tsx index af80352e7a..9e62dc82ea 100644 --- a/lib/design-system/src/blocks/Bubble/Reaction.tsx +++ b/lib/design-system/src/blocks/Bubble/Reaction.tsx @@ -9,8 +9,6 @@ import EmojiPicker, { } from 'emoji-picker-react'; import { FragmentReactionType } from './Bubble.types'; import { AnimatePresence } from 'framer-motion'; -import { lighten } from 'polished'; -import { getVar } from '../../util/colors'; import { Position } from '@holium/shared'; const WIDTH = 350; @@ -77,11 +75,13 @@ const ReactionButton = styled(Box)` align-items: center; justify-content: center; background: ${({ selected }) => - selected ? () => lighten(0.3, getVar('accent')) : 'var(--rlm-input-color)'}; + selected ? 'rgba(var(--rlm-accent-rgba))' : 'rgba(var(--rlm-input-rgba))'}; + backdrop-filter: ${({ selected }) => + selected ? 'brightness(1.3)' : 'brightness(1)'}; border: ${({ selected }) => selected - ? '1px solid var(--rlm-accent-color)' - : '1px solid var(--rlm-window-color)'}; + ? '1px solid rgba(var(--rlm-accent-rgba))' + : '1px solid rgba(var(--rlm-window-rgba))'}; border-radius: 16px; transition: var(--transition); @@ -92,7 +92,7 @@ const ReactionButton = styled(Box)` height: ${ReactionSizes[size]}px; ${Text.Hint} { font-size: ${FontSizes[size]}px; - ${selected && 'color: var(--rlm-accent-color);'} + ${selected && 'color: rgba(var(--rlm-accent-rgba));'} } ` : css` diff --git a/lib/design-system/src/blocks/Bubble/fragment-lib.tsx b/lib/design-system/src/blocks/Bubble/fragment-lib.tsx index 27dadc2036..99a039b188 100644 --- a/lib/design-system/src/blocks/Bubble/fragment-lib.tsx +++ b/lib/design-system/src/blocks/Bubble/fragment-lib.tsx @@ -19,10 +19,7 @@ import { FragmentTabType, TEXT_TYPES, } from './Bubble.types'; - import styled from 'styled-components'; -import { rgba } from 'polished'; -import { getVar } from '../../util/colors'; import { capitalizeFirstLetter } from '../../util/strings'; import { Text, TextProps, Flex, FlexProps, skeletonStyle } from '../..'; import { motion } from 'framer-motion'; @@ -81,13 +78,13 @@ export const FragmentReplyTo = styled(motion.blockquote)` margin: 0px; flex-direction: column; padding: 4px; - background: var(--rlm-card-color); + background: rgba(var(--rlm-card-rgba)); ${FragmentBase} { font-size: 0.86em; - color: var(--rlm-text-color); + color: rgba(var(--rlm-text-rgba)); } ${Text.Custom} { - color: var(--rlm-text-color); + color: rgba(var(--rlm-text-rgba)); } `; @@ -98,25 +95,25 @@ export const FragmentInlineCode = styled(FragmentBase)` `; export const FragmentShip = styled(FragmentBase)` - color: var(--rlm-accent-color); - background: ${() => rgba(getVar('accent'), 0.12)}; + color: rgba(var(--rlm-accent-rgba)); + background: rgba(var(--rlm-accent-rgba), 0.12); border-radius: 4px; padding: 2px 4px; transition: var(--transition); &:hover { transition: var(--transition); - background: ${() => rgba(getVar('accent'), 0.18)}; + background: rgba(var(--rlm-accent-rgba), 0.18); cursor: pointer; } `; const CodeWrapper = styled(Flex)` border-radius: 4px; - background: var(--rlm-card-color); + background: rgba(var(--rlm-card-rgba)); padding: 4px 8px; width: 100%; ${Text.Custom} { - color: var(--rlm-text-color) !important; + color: rgba(var(--rlm-text-rgba)) !important; } `; @@ -140,15 +137,15 @@ export const FragmentImage = styled(motion.img)` const TabWrapper = styled(Flex)` border-radius: 6px; - background: var(--rlm-card-color); + background: rgba(var(--rlm-card-rgba)); ${Text.Custom} { - color: var(--rlm-text-color); + color: rgba(var(--rlm-text-rgba)); } `; export const FragmentBlockquote = styled(motion.blockquote)` font-style: italic; - border-left: 2px solid var(--rlm-accent-color); + border-left: 2px solid rgba(var(--rlm-accent-rgba)); padding-left: 8px; padding-right: 8px; border-radius: 0px 3px 3px 0px; @@ -167,11 +164,11 @@ export const FragmentBlockquote = styled(motion.blockquote)` } &:active:not([disabled]) { transition: var(--transition); - background-color: var(--rlm-overlay-active); + background-color: rgba(var(--rlm-overlay-active-rgba)); } &:hover:not([disabled]) { transition: var(--transition); - background-color: var(--rlm-overlay-hover); + background-color: rgba(var(--rlm-overlay-hover-rgba)); cursor: pointer; } `; diff --git a/lib/design-system/src/blocks/LinkBlock/LinkBlock.tsx b/lib/design-system/src/blocks/LinkBlock/LinkBlock.tsx index 4ed2369519..3aa24604dd 100644 --- a/lib/design-system/src/blocks/LinkBlock/LinkBlock.tsx +++ b/lib/design-system/src/blocks/LinkBlock/LinkBlock.tsx @@ -13,7 +13,7 @@ const LinkImage = styled(motion.img)<{ isSkeleton?: boolean }>` height: 170px; object-fit: cover; border-radius: 4px; - background: var(--rlm-window-color); + background: rgba(var(--rlm-window-rgba)); ${({ isSkeleton }) => isSkeleton && skeletonStyle} `; diff --git a/lib/design-system/src/general/Anchor/Anchor.tsx b/lib/design-system/src/general/Anchor/Anchor.tsx new file mode 100644 index 0000000000..5e57bf9d94 --- /dev/null +++ b/lib/design-system/src/general/Anchor/Anchor.tsx @@ -0,0 +1,6 @@ +import styled from 'styled-components'; +import { motion } from 'framer-motion'; + +export const Anchor = styled(motion.a)` + color: rgba(var(--rlm-accent-rgba)); +`; diff --git a/lib/design-system/src/general/Avatar/Avatar.tsx b/lib/design-system/src/general/Avatar/Avatar.tsx index bb0437dbf1..eb4179fe79 100644 --- a/lib/design-system/src/general/Avatar/Avatar.tsx +++ b/lib/design-system/src/general/Avatar/Avatar.tsx @@ -26,7 +26,7 @@ export const AvatarWrapper = styled(Box)` img { user-select: none; pointer-events: none; - background: var(--rlm-base-color); + background: rgba(var(--rlm-base-rgba)); border-radius: var(--rlm-border-radius-4); } transition: var(--transition); diff --git a/lib/design-system/src/general/Button/Button.tsx b/lib/design-system/src/general/Button/Button.tsx index 258bbd48f9..761be75a4b 100644 --- a/lib/design-system/src/general/Button/Button.tsx +++ b/lib/design-system/src/general/Button/Button.tsx @@ -1,7 +1,6 @@ import { HTMLAttributes } from 'react'; import { motion } from 'framer-motion'; import styled from 'styled-components'; -import { darken, rgba } from 'polished'; import { background, BackgroundProps, @@ -27,7 +26,7 @@ import { typography, TypographyProps, } from 'styled-system'; -import { ColorProps, colorStyle, getVar } from '../../util/colors'; +import { ColorProps, colorStyle } from '../../util/colors'; type TextDecorationOption = 'overline' | 'line-through' | 'underline'; type TextTransformOption = 'uppercase' | 'lowercase' | 'capitalize'; @@ -122,13 +121,15 @@ const Base = styled(motion.button)` `; const Primary = styled(Base)` - background-color: var(--rlm-accent-color); + background-color: rgba(var(--rlm-accent-rgba)); color: #ffffff; &:hover:not([disabled]) { - background-color: ${() => darken(0.05, getVar('accent'))}; + background-color: rgba(var(--rlm-accent-rgba)); + backdrop-filter: brightness(1.1); } &:active:not([disabled]) { - background-color: ${() => darken(0.075, getVar('accent'))}; + background-color: rgba(var(--rlm-accent-rgba)); + backdrop-filter: brightness(1.2); } svg { fill: #ffffff; @@ -136,41 +137,46 @@ const Primary = styled(Base)` `; const Secondary = styled(Base)` - color: var(--rlm-text-color); - background-color: ${() => darken(0.025, getVar('window'))}; + color: rgba(var(--rlm-text-rgba)); + background-color: rgba(var(--rlm-window-rgba)); + backdrop-filter: brightness(0.975); &:hover:not([disabled]) { - background-color: ${() => darken(0.05, getVar('window'))}; + background-color: rgba(var(--rlm-window-rgba)); + backdrop-filter: brightness(0.975); } &:active:not([disabled]) { - background-color: ${() => darken(0.075, getVar('window'))}; + background-color: rgba(var(--rlm-window-rgba)); + backdrop-filter: brightness(0.925); } `; const Minimal = styled(Base)` - color: var(--rlm-accent-color); - background-color: ${() => rgba(getVar('accent'), 0.1)}; + color: rgba(var(--rlm-accent-rgba)); + background-color: rgba(var(--rlm-accent-rgba), 0.1); &:hover:not([disabled]) { - background-color: ${() => rgba(getVar('accent'), 0.15)}; + background-color: rgba(var(--rlm-accent-rgba), 0.15); } &:active:not([disabled]) { - background-color: ${() => rgba(getVar('accent'), 0.18)}; + background-color: rgba(var(--rlm-accent-rgba), 0.3); } svg { - fill: var(--rlm-accent-color); + fill: rgba(var(--rlm-accent-rgba)); } `; const Transparent = styled(Base)` - color: var(--rlm-text-color); + color: rgba(var(--rlm-text-rgba)); background-color: transparent; &:hover:not([disabled]) { - background-color: ${() => darken(0.025, getVar('window'))}; + background-color: rgba(var(--rlm-window-rgba)); + backdrop-filter: brightness(0.975); } &:active:not([disabled]) { - background-color: ${() => darken(0.05, getVar('window'))}; + background-color: rgba(var(--rlm-window-rgba)); + backdrop-filter: brightness(0.95); } svg { - fill: var(--rlm-text-color); + fill: rgba(var(--rlm-text-rgba)); } `; @@ -181,29 +187,29 @@ const TextButton = styled(Base)` padding: 4px 8px; color: ${(props) => props.color - ? `var(--rlm-${props.color}-color)` - : 'var(--rlm-accent-color)'}; + ? `rgba(var(--rlm-${props.color}-rgba))` + : 'rgba(var(--rlm-accent-rgba))'}; background-color: ${(props) => props.showOnHover ? 'transparent' : props.color - ? rgba(getVar(props.color), 0.1) - : rgba(getVar('accent'), 0.1)}; + ? `rgba(var(--rlm-${props.color}-rgba), 0.1)` + : 'rgba(var(--rlm-accent-rgba), 0.1)'}; &:hover:not([disabled]) { background-color: ${(props) => props.color - ? rgba(getVar(props.color), 0.15) - : rgba(getVar('accent'), 0.15)}; + ? `rgba(var(--rlm-${props.color}-rgba), 0.15)` + : 'rgba(var(--rlm-accent-rgba), 0.15)'}; } &:active:not([disabled]) { background-color: ${(props) => props.color - ? rgba(getVar(props.color), 0.2) - : rgba(getVar('accent'), 0.2)}; + ? `rgba(var(--rlm-${props.color}-rgba), 0.2)` + : 'rgba(var(--rlm-accent-rgba), 0.2)'}; } svg { - fill: var(--rlm-accent-color); + fill: rgba(var(--rlm-accent-rgba)); } `; @@ -221,19 +227,19 @@ const IconButton = styled(Base)` background-color: transparent; &:hover:not([disabled]) { transition: var(--transition); - background-color: var(--rlm-overlay-hover); + background-color: rgba(var(--rlm-overlay-hover-rgba)); } /* &:active:not([disabled]) { transition: var(--transition); - background-color: var(--rlm-overlay-active); + background-color: rgba(var(--rlm-overlay-active-rgba)); } */ &:focus:not([disabled]) { outline: none; - background-color: var(--rlm-overlay-active); + background-color: rgba(var(--rlm-overlay-active-rgba)); } svg { fill: ${(props) => - props.customColor ? props.customColor : 'var(--rlm-icon-color)'}; + props.customColor ? props.customColor : 'rgba(var(--rlm-icon-rgba))'}; } `; diff --git a/lib/design-system/src/general/Card/Card.tsx b/lib/design-system/src/general/Card/Card.tsx index cc31510a46..48e4d217c8 100644 --- a/lib/design-system/src/general/Card/Card.tsx +++ b/lib/design-system/src/general/Card/Card.tsx @@ -10,8 +10,8 @@ export type CardProps = { ShadowProps; export const Card = styled(Flex)` - background: ${(props) => props.customBg || 'var(--rlm-card-color)'}; - border: 1px solid var(--rlm-border-color); + background: ${(props) => props.customBg || 'rgba(var(--rlm-card-rgba))'}; + border: 1px solid rgba(var(--rlm-border-rgba)); transition: var(--transition); box-sizing: border-box; border-radius: 12px; diff --git a/lib/design-system/src/general/Icon/Icon.tsx b/lib/design-system/src/general/Icon/Icon.tsx index ba478f5a97..e38750eb75 100644 --- a/lib/design-system/src/general/Icon/Icon.tsx +++ b/lib/design-system/src/general/Icon/Icon.tsx @@ -36,7 +36,6 @@ const SvgComponent = forwardRef< name: IconPathsType; title?: string; color?: ColorVariants; - /* SVGs as CSS background-images don't support the #hex format. */ isBackgroundImage?: boolean; } >( @@ -48,8 +47,9 @@ const SvgComponent = forwardRef< const svgSafeColor = color ? isBackgroundImage - ? hexToSvgSafeColor(getVar(color)) - : getVar(color) + ? /* SVGs as CSS background-images don't support the #hex format. */ + hexToSvgSafeColor(`rgba(${getVar(color)})`) + : `rgba(${getVar(color)})` : 'currentcolor'; return ( diff --git a/lib/design-system/src/general/MenuItem/MenuItem.styles.tsx b/lib/design-system/src/general/MenuItem/MenuItem.styles.tsx index 54d73a79c4..4f2182dc86 100644 --- a/lib/design-system/src/general/MenuItem/MenuItem.styles.tsx +++ b/lib/design-system/src/general/MenuItem/MenuItem.styles.tsx @@ -1,7 +1,6 @@ import { HTMLAttributes, ReactNode } from 'react'; -import { darken, rgba } from 'polished'; +import { rgba } from 'polished'; import styled, { css } from 'styled-components'; -import { getVar } from '../../util/colors'; type MenuItemStyleProps = { children: ReactNode; @@ -24,12 +23,12 @@ export const MenuItemStyle = styled.li` transition: var(--transition); pointer-events: auto; user-select: none; - color: var(--rlm-text-color); + color: rgba(var(--rlm-text-rgba)); ${({ disabled }) => disabled && css` - color: ${rgba(getVar('text'), 0.7)}; + color: rgba(var(--rlm-text-rgba), 0.7); background: transparent; opacity: 0.5; cursor: default; @@ -45,12 +44,10 @@ export const MenuItemStyle = styled.li` color: ${disabled ? rgba(color, 0.7) : color}; `} - ${({ customBg }) => - customBg && - css` - background-color: transparent; - &:hover:not([disabled]) { - background-color: ${darken(0.035, customBg)}; - } - `} + background-color: transparent; + &:hover:not([disabled]) { + background-color: ${({ customBg }) => + customBg ? customBg : 'rgba(var(--rlm-input-rgba))'}; + backdrop-filter: brightness(96.5%); + } `; diff --git a/lib/design-system/src/general/ProgressBar/ProgressBar.tsx b/lib/design-system/src/general/ProgressBar/ProgressBar.tsx index 18da5ddfad..7319d12f60 100644 --- a/lib/design-system/src/general/ProgressBar/ProgressBar.tsx +++ b/lib/design-system/src/general/ProgressBar/ProgressBar.tsx @@ -3,8 +3,8 @@ import styled from 'styled-components'; import { Box, BoxProps } from '../Box/Box'; const Bar = styled(Box)` - background-color: var(--rlm-input-color); - border: 1px solid var(--rlm-border-color); + background-color: rgba(var(--rlm-input-rgba)); + border: 1px solid rgba(var(--rlm-border-rgba)); height: 12px; padding: 2px 1px; width: 100%; @@ -16,7 +16,8 @@ const Bar = styled(Box)` const Progress = styled(Box)` height: 8px; border-radius: 4px; - background-color: ${(props) => props.background || 'var(--rlm-accent-color)'}; + background-color: ${(props) => + props.background || 'rgba(var(--rlm-accent-rgba))'}; `; type ProgressBarProps = { diff --git a/lib/design-system/src/general/Row/Row.tsx b/lib/design-system/src/general/Row/Row.tsx index 5715d8ff67..7eb3dd5124 100644 --- a/lib/design-system/src/general/Row/Row.tsx +++ b/lib/design-system/src/general/Row/Row.tsx @@ -20,24 +20,23 @@ export const Row = styled(Button.Base)` align-items: center; background-color: transparent; gap: ${(props: RowProps) => props.gap || '6px'}; - color: var(--rlm-text-color); + color: rgba(var(--rlm-text-rgba)); transition: var(--transition); &:active:not([disabled]) { transition: var(--transition); - background-color: var(--rlm-overlay-active); + background-color: rgba(var(--rlm-overlay-active-rgba)); } &:hover:not([disabled]) { transition: var(--transition); - background-color: var(--rlm-overlay-hover); + background-color: rgba(var(--rlm-overlay-hover-rgba)); cursor: pointer; } &:focus:not([disabled]) { outline: none; - background-color: var(--rlm-overlay-active); - /* border: 1px solid var(--rlm-accent-color); */ + background-color: rgba(var(--rlm-overlay-active-rgba)); } &:disabled { opacity: 0.2; @@ -52,9 +51,9 @@ export const Row = styled(Button.Base)` `} ${props.selected && css` - background-color: var(--rlm-overlay-active); + background-color: rgba(var(--rlm-overlay-active-rgba)); &:hover:not([disabled]) { - background-color: var(--rlm-overlay-active); + background-color: rgba(var(--rlm-overlay-active-rgba)); } `} `} diff --git a/lib/design-system/src/general/SectionDivider/SectionDivider.tsx b/lib/design-system/src/general/SectionDivider/SectionDivider.tsx index 555c38546c..498870e95b 100644 --- a/lib/design-system/src/general/SectionDivider/SectionDivider.tsx +++ b/lib/design-system/src/general/SectionDivider/SectionDivider.tsx @@ -17,7 +17,7 @@ const AligmnentMap = { const HorizontalLine = styled.div` flex: 1; height: 1px; - background-color: var(--rlm-border-color); + background-color: rgba(var(--rlm-border-rgba)); `; export const SectionDivider: FC = ( diff --git a/lib/design-system/src/general/Skeleton/Skeleton.tsx b/lib/design-system/src/general/Skeleton/Skeleton.tsx index 8c5ba90c72..456f764edf 100644 --- a/lib/design-system/src/general/Skeleton/Skeleton.tsx +++ b/lib/design-system/src/general/Skeleton/Skeleton.tsx @@ -14,11 +14,11 @@ export const skeletonStyle = css` border-radius: var(--rlm-border-radius-4); @keyframes skeleton-loading { 0% { - background-color: var(--rlm-base-color); + background-color: rgba(var(--rlm-base-rgba)); opacity: 0.2; } 100% { - background-color: var(--rlm-base-color); + background-color: rgba(var(--rlm-base-rgba)); opacity: 0.4; } } diff --git a/lib/design-system/src/general/Text/Text.tsx b/lib/design-system/src/general/Text/Text.tsx index 7fe8bca7d1..e6b1c71dfc 100644 --- a/lib/design-system/src/general/Text/Text.tsx +++ b/lib/design-system/src/general/Text/Text.tsx @@ -48,14 +48,11 @@ const customStyling = css` `} ${(props) => props.fontWeight && `font-weight: ${props.fontWeight};`} ${(props) => props.noSelection && 'user-select: none;'} - &:disabled { - color: var(--rlm-text-disabled); - } } `; const Default = styled(Box)` - color: var(--rlm-text-color); + color: rgba(var(--rlm-text-rgba)); font-family: var(--rlm-font); font-weight: 400; font-size: 0.889rem; @@ -134,7 +131,7 @@ const Patp = styled(motion.p)` line-height: normal; font-size: 0.9rem; font-family: 'Source Code Pro', monospace; - color: var(--rlm-text-color); + color: rgba(var(--rlm-text-rgba)); margin-top: 0px; margin-bottom: 0px; ${({ isSkeleton }) => isSkeleton && skeletonStyle} diff --git a/lib/design-system/src/general/Tooltip/Tooltip.tsx b/lib/design-system/src/general/Tooltip/Tooltip.tsx index 380a913d80..dc4caf5913 100644 --- a/lib/design-system/src/general/Tooltip/Tooltip.tsx +++ b/lib/design-system/src/general/Tooltip/Tooltip.tsx @@ -86,7 +86,7 @@ const TooltipStyle = styled( width: max-content; height: max-content; overflow: hidden; - color: var(--rlm-text-color); + color: rgba(var(--rlm-text-rgba)); box-shadow: var(--rlm-box-shadow-1); ${(props) => placementMaps[props.placement]}; ` diff --git a/lib/design-system/src/general/index.ts b/lib/design-system/src/general/index.ts index 74dfe9c7c0..bb05f8bfa3 100644 --- a/lib/design-system/src/general/index.ts +++ b/lib/design-system/src/general/index.ts @@ -1,3 +1,4 @@ +export * from './Anchor/Anchor'; export * from './Avatar/Avatar'; export * from './Box/Box'; export * from './Button/Button'; diff --git a/lib/design-system/src/input/AvatarInput/AvatarInput.tsx b/lib/design-system/src/input/AvatarInput/AvatarInput.tsx index f2abe635ee..f3dd6eafda 100644 --- a/lib/design-system/src/input/AvatarInput/AvatarInput.tsx +++ b/lib/design-system/src/input/AvatarInput/AvatarInput.tsx @@ -61,7 +61,6 @@ export const AvatarInput: FC = (props: AvatarInputProps) => { autoComplete="off" autoCorrect="off" autoCapitalize="off" - className="realm-cursor-text-cursor" placeholder="Paste image link here" value={value} onChange={(evt: React.ChangeEvent) => { diff --git a/lib/design-system/src/input/Input/Input.tsx b/lib/design-system/src/input/Input/Input.tsx index 2cb2e16458..703449721d 100644 --- a/lib/design-system/src/input/Input/Input.tsx +++ b/lib/design-system/src/input/Input/Input.tsx @@ -3,8 +3,8 @@ import { motion } from 'framer-motion'; export const Input = styled(motion.input)` border-radius: var(--rlm-border-radius-4); - background-color: var(--rlm-input-color); - color: var(--rlm-text-color); + background-color: rgba(var(--rlm-input-rgba)); + color: rgba(var(--rlm-text-rgba)); pointer-events: all; flex: 1; height: inherit; @@ -18,8 +18,8 @@ export const Input = styled(motion.input)` export const TextArea = styled(motion.textarea)` border-radius: var(--rlm-border-radius-4); - background-color: var(--rlm-input-color); - color: var(--rlm-text-color); + background-color: rgba(var(--rlm-input-rgba)); + color: rgba(var(--rlm-text-rgba)); width: 100%; pointer-events: all; appearance: none; diff --git a/lib/design-system/src/input/InputBox/InputBox.tsx b/lib/design-system/src/input/InputBox/InputBox.tsx index fb5b829169..9596149eab 100644 --- a/lib/design-system/src/input/InputBox/InputBox.tsx +++ b/lib/design-system/src/input/InputBox/InputBox.tsx @@ -17,8 +17,8 @@ type StyledBoxProps = { const StyledBox = styled(Box)` position: relative; border-radius: var(--rlm-border-radius-6); - border: 1px solid var(--rlm-border-color); - background-color: var(--rlm-input-color); + border: 1px solid rgba(var(--rlm-border-rgba)); + background-color: rgba(var(--rlm-input-rgba)); min-height: 32px; ${(props) => props.shouldHighlightOnFocus && @@ -28,7 +28,7 @@ const StyledBox = styled(Box)` &:active { transition: var(--transition); outline: none; - border-color: var(--rlm-accent-color); + border-color: rgba(var(--rlm-accent-rgba)); &::placeholder { color: transparent; } @@ -40,8 +40,8 @@ const StyledBox = styled(Box)` `${props.fontSize ? props.fontSize.toString().replace('px', '') : 14}px`}; text-align: ${(props) => (props.textAlign ? props.textAlign : 'left')}; border-radius: var(--rlm-border-radius-4); - background-color: var(--rlm-input-color); - color: var(--rlm-text-color); + background-color: rgba(var(--rlm-input-rgba)); + color: rgba(var(--rlm-text-rgba)); pointer-events: all; flex: 1; height: inherit; @@ -69,7 +69,7 @@ const StyledBox = styled(Box)` } opacity: 0.6; /* correct opacity on iOS */ &::placeholder { - color: rgba(var(--rlm-text-color, #333333), 0.3); + color: rgba(var(--rlm-text-rgba, #333333), 0.3); opacity: 1; } &:hover { @@ -80,13 +80,13 @@ const StyledBox = styled(Box)` ${(props) => props.error && css` - border-color: var(--rlm-intent-alert-color); + border-color: rgba(var(--rlm-intent-alert-rgba)); &:focus, &:focus-within, &:active { transition: ${(props) => props.theme.transition}; outline: none; - border-color: var(--rlm-intent-alert-color); + border-color: rgba(var(--rlm-intent-alert-rgba)); &::placeholder { color: transparent; } diff --git a/lib/design-system/src/input/RadioGroup/RadioGroup.style.tsx b/lib/design-system/src/input/RadioGroup/RadioGroup.style.tsx index f5053198b6..9f075fd41d 100644 --- a/lib/design-system/src/input/RadioGroup/RadioGroup.style.tsx +++ b/lib/design-system/src/input/RadioGroup/RadioGroup.style.tsx @@ -1,7 +1,5 @@ import styled, { css } from 'styled-components'; import { motion } from 'framer-motion'; -import { rgba, darken } from 'polished'; -import { getVar } from '../../util/colors'; export const RadioLabelContainer = styled(motion.div)<{ hasIcon: boolean }>` position: relative; @@ -22,11 +20,12 @@ export const RadioLabel = styled(motion.label)<{ isSelected?: boolean }>` ${({ isSelected }) => isSelected ? css` - color: var(--rlm-accent-color); + color: rgba(var(--rlm-accent-rgba)); ` : css` - color: var(--rlm-text-color); - background-color: ${darken(0.015, getVar('window'))}; + color: rgba(var(--rlm-text-rgba)); + background-color: rgba(var(--rlm-window-rgba)); + backdrop-filter: brightness(0.98); `} `; @@ -41,9 +40,10 @@ export const RadioHighlight = styled(motion.label)<{ isSelected?: boolean }>` ${({ isSelected }) => isSelected ? css` - background-color: ${rgba(getVar('accent'), 0.12)}; + background-color: rgba(var(--rlm-accent-rgba), 0.12); ` : css` - background-color: ${darken(0.015, getVar('window'))}; + background-color: rgba(var(--rlm-window-rgba)); + backdrop-filter: brightness(0.98); `} `; diff --git a/lib/design-system/src/input/RadioGroup/RadioGroup.tsx b/lib/design-system/src/input/RadioGroup/RadioGroup.tsx index afce06db83..0ea1a8c0e6 100644 --- a/lib/design-system/src/input/RadioGroup/RadioGroup.tsx +++ b/lib/design-system/src/input/RadioGroup/RadioGroup.tsx @@ -1,4 +1,3 @@ -import { darken } from 'polished'; import { Icon } from '../../general/Icon/Icon'; import { IconPathsType } from '../../general/Icon/icons'; import { Flex } from '../../general/Flex/Flex'; @@ -7,7 +6,6 @@ import { RadioLabel, RadioLabelContainer, } from './RadioGroup.style'; -import { getVar } from '../../util/colors'; export type RadioOption = { label: string; @@ -33,7 +31,8 @@ export const RadioGroup = ({ options, selected, onClick }: Props) => ( justifyContent="flex-start" gap={4} borderRadius={6} - background={darken(0.025, getVar('window'))} + bg="window" + style={{ backdropFilter: 'brightness(0.975)' }} > {options.map((option) => { const isSelected = option.value === selected; diff --git a/lib/design-system/src/input/RadioImages/RadioImages.style.tsx b/lib/design-system/src/input/RadioImages/RadioImages.style.tsx index 434bd9d4ed..83c28a3aaf 100644 --- a/lib/design-system/src/input/RadioImages/RadioImages.style.tsx +++ b/lib/design-system/src/input/RadioImages/RadioImages.style.tsx @@ -1,7 +1,5 @@ import styled, { css } from 'styled-components'; import { motion } from 'framer-motion'; -import { rgba, darken } from 'polished'; -import { getVar } from '../../util/colors'; type RadioImageProps = { selected?: boolean }; @@ -14,13 +12,10 @@ export const RadioImage = styled(motion.img)` margin-top: 2px; font-weight: 500; ${({ selected }) => - selected - ? css` - color: var(--rlm-base-color); - ` - : css` - background-color: ${darken(0.015, getVar('base'))}; - `} + selected && + css` + color: rgba(var(--rlm-base-rgba)); + `} `; export const RadioHighlight = styled(motion.label)` @@ -32,11 +27,8 @@ export const RadioHighlight = styled(motion.label)` border-radius: 4px; position: absolute; ${({ selected }) => - selected - ? css` - background-color: ${rgba(getVar('accent'), 0.5)}; - ` - : css` - background-color: ${darken(0.015, getVar('base'))}; - `} + selected && + css` + background-color: rgba(var(--rlm-accent-rgba), 0.5); + `} `; diff --git a/lib/design-system/src/input/Select/Select.styles.tsx b/lib/design-system/src/input/Select/Select.styles.tsx index cd84691d8c..9b124ed852 100644 --- a/lib/design-system/src/input/Select/Select.styles.tsx +++ b/lib/design-system/src/input/Select/Select.styles.tsx @@ -17,15 +17,15 @@ export const SelectWrapper = styled(motion.div)` min-height: 32px; padding: 4px 8px; border-radius: var(--rlm-border-radius-6); - border: 1px solid var(--rlm-border-color); - background-color: var(--rlm-input-color); + border: 1px solid rgba(var(--rlm-border-rgba)); + background-color: rgba(var(--rlm-input-rgba)); user-select: none; cursor: pointer; select { border-radius: var(--rlm-border-radius-4); - background-color: var(--rlm-input-color); - color: var(--rlm-text-color); + background-color: rgba(var(--rlm-input-rgba)); + color: rgba(var(--rlm-text-rgba)); pointer-events: all; flex: 1; height: inherit; @@ -43,9 +43,9 @@ export const SelectWrapper = styled(motion.div)` input { pointer-events: none; } - opacity: 0.6; /* correct opacity on iOS */ + opacity: 0.6; &::placeholder { - color: rgba(var(--rlm-text-color, #333333), 0.3); + color: rgba(var(--rlm-text-rgba, #333333), 0.3); opacity: 1; } &:hover { @@ -63,8 +63,8 @@ export const SelectDropdown = styled(motion.ul)<{ backgroundColor?: string }>` width: 100%; border-radius: 6px; gap: 2px; - border: 1px solid var(--rlm-border-color); + border: 1px solid rgba(var(--rlm-border-rgba)); background-color: ${({ backgroundColor }) => - backgroundColor ? backgroundColor : 'var(--rlm-input-color)'}; + backgroundColor ? backgroundColor : 'rgba(var(--rlm-input-rgba))'}; box-shadow: var(--rlm-box-shadow-1); `; diff --git a/lib/design-system/src/input/Select/Select.tsx b/lib/design-system/src/input/Select/Select.tsx index e166586a49..e73abee063 100644 --- a/lib/design-system/src/input/Select/Select.tsx +++ b/lib/design-system/src/input/Select/Select.tsx @@ -5,7 +5,6 @@ import { Text } from '../../general/Text/Text'; import { MenuItemStyle } from '../../general/MenuItem/MenuItem.styles'; import { SelectDropdown, SelectWrapper } from './Select.styles'; import { RadioOption } from '../RadioGroup/RadioGroup'; -import { getVar } from '../../util/colors'; const animationVariants: Variants = { enter: { @@ -113,7 +112,7 @@ export const Select = ({ {visibleOptions.map((option, index) => ( !disabled && !option.disabled && onClick(option.value) diff --git a/lib/design-system/src/os/Bar/Bar.tsx b/lib/design-system/src/os/Bar/Bar.tsx index 7a06219747..8b241288e3 100644 --- a/lib/design-system/src/os/Bar/Bar.tsx +++ b/lib/design-system/src/os/Bar/Bar.tsx @@ -38,7 +38,7 @@ export const BarStyle = styled(motion.div)` backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: var(--transition-slow); - background: var(--rlm-dock-color); + background: rgba(var(--rlm-dock-rgba)); ${compose(space, layout, flexbox, border, position, color)} `; diff --git a/lib/design-system/src/os/RoomsDock/RoomsDock.tsx b/lib/design-system/src/os/RoomsDock/RoomsDock.tsx index a87d1d5fc1..b5e1d369b4 100644 --- a/lib/design-system/src/os/RoomsDock/RoomsDock.tsx +++ b/lib/design-system/src/os/RoomsDock/RoomsDock.tsx @@ -15,16 +15,16 @@ export const RoomsDockStyle = styled(Flex)` gap: 8px; cursor: pointer; border-radius: var(--rlm-border-radius-4); - background-color: var(--rlm-overlay-hover); + background-color: rgba(var(--rlm-overlay-hover-rgba)); box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.25); &:hover:not([disabled]) { transition: var(--transition); - background-color: var(--rlm-overlay-hover); + background-color: rgba(var(--rlm-overlay-hover-rgba)); } &:active:not([disabled]):not(:focus-within) { transition: var(--transition); - background-color: var(--rlm-overlay-active); + background-color: rgba(var(--rlm-overlay-active-rgba)); } `; diff --git a/lib/design-system/src/os/SystemBar/BarButton.tsx b/lib/design-system/src/os/SystemBar/BarButton.tsx index ad66f63a5c..a16b79995a 100644 --- a/lib/design-system/src/os/SystemBar/BarButton.tsx +++ b/lib/design-system/src/os/SystemBar/BarButton.tsx @@ -3,9 +3,9 @@ import { Button, IconButtonProps } from '../..'; export const BarButton = styled(Button.IconButton)` &:hover:not([disabled]) { - background-color: var(--rlm-overlay-hover); + background-color: rgba(var(--rlm-overlay-hover-rgba)); } &:active:not([disabled]) { - background-color: var(--rlm-overlay-active); + background-color: rgba(var(--rlm-overlay-active-rgba)); } `; diff --git a/lib/design-system/src/os/SystemBar/HoliumButton.tsx b/lib/design-system/src/os/SystemBar/HoliumButton.tsx index b6784cba11..8604b7659d 100644 --- a/lib/design-system/src/os/SystemBar/HoliumButton.tsx +++ b/lib/design-system/src/os/SystemBar/HoliumButton.tsx @@ -3,16 +3,13 @@ import styled from 'styled-components'; const CrossPath = styled(motion.path)` transition: var(--transition); - fill: var(--rlm-text-color); + fill: rgba(var(--rlm-text-rgba)); fill-opacity: 0.7; - &:hover { - cursor: pointer; - } `; const CirclePath = styled(motion.circle)` transition: var(--transition); - fill: var(--rlm-home-button-color); + fill: rgba(var(--rlm-home-button-rgba)); `; const HoliSvg = styled(motion.svg)` @@ -20,7 +17,6 @@ const HoliSvg = styled(motion.svg)` &:hover { ${CirclePath} { transition: var(--transition); - cursor: pointer; filter: brightness(95%); } } @@ -28,84 +24,84 @@ const HoliSvg = styled(motion.svg)` transition: var(--transition); ${CirclePath} { transition: var(--transition); - cursor: pointer; filter: brightness(90%); } } `; -export const HoliumButton = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; +export const HoliumButton = ({ size = 28, pointer = true }) => ( + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/lib/design-system/src/os/Tab/Tab.tsx b/lib/design-system/src/os/Tab/Tab.tsx index 272c74dabd..865420026e 100644 --- a/lib/design-system/src/os/Tab/Tab.tsx +++ b/lib/design-system/src/os/Tab/Tab.tsx @@ -13,9 +13,9 @@ const TabRow = styled(Row)<{ collapsed?: boolean }>` padding: 4px 4px 4px 6px; align-items: space-between; text-align: left; - background-color: var(--rlm-overlay-hover); + background-color: rgba(var(--rlm-overlay-hover-rgba)); &:hover { - background-color: var(--rlm-overlay-active); + background-color: rgba(var(--rlm-overlay-active-rgba)); } ${(props) => props.collapsed && diff --git a/lib/design-system/src/os/TrayApp/TrayApp.tsx b/lib/design-system/src/os/TrayApp/TrayApp.tsx index d7c7641e7c..1986e513de 100644 --- a/lib/design-system/src/os/TrayApp/TrayApp.tsx +++ b/lib/design-system/src/os/TrayApp/TrayApp.tsx @@ -12,8 +12,8 @@ const Wrapper = styled(motion.div)` transform: translate3d(0, 0, 0); backdrop-filter: blur(24px); backface-visibility: hidden; - background: var(--rlm-window-bg); - border: 1px solid var(--rlm-border-color); + background: rgba(var(--rlm-window-bg-rgba)); + border: 1px solid rgba(var(--rlm-border-rgba)); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.12); ::-webkit-scrollbar { display: none; diff --git a/lib/design-system/src/util/colors.ts b/lib/design-system/src/util/colors.ts index 5e62cdcda4..64ccc9fdc7 100644 --- a/lib/design-system/src/util/colors.ts +++ b/lib/design-system/src/util/colors.ts @@ -7,6 +7,7 @@ export type ColorVariants = | 'input' | 'border' | 'window' + | 'window-bg' | 'card' | 'text' | 'icon' @@ -16,14 +17,14 @@ export type ColorVariants = | 'intent-warning' | 'intent-info'; -export type ThemeVar = 'theme-mode'; -export type StyleVars = ColorVariants | ThemeVar; +type ThemeVar = 'theme-mode'; +type StyleVars = ColorVariants | ThemeVar; -export const variantToColorVar = (colorVariant: ColorVariants) => { - return `--rlm-${colorVariant}-color`; +const variantToRgbCssVar = (colorVariant: ColorVariants) => { + return `--rlm-${colorVariant}-rgba`; }; -export const variantToCssVar = (variable: ThemeVar) => { +const variantToCssVar = (variable: ThemeVar) => { return `--rlm-${variable}`; }; @@ -32,7 +33,7 @@ export const getVar = (variable: StyleVars) => { if (variable === 'theme-mode') { cssVar = variantToCssVar(variable); } else { - cssVar = variantToColorVar(variable); + cssVar = variantToRgbCssVar(variable); } const value = getComputedStyle(document.documentElement) @@ -52,16 +53,16 @@ export const colorStyle = css` ${(props) => props.bg && css` - background-color: var(${variantToColorVar(props.bg)}); + background-color: rgba(var(${variantToRgbCssVar(props.bg)})); `} ${(props) => props.color && css` - color: var(${variantToColorVar(props.color)}); + color: rgba(var(${variantToRgbCssVar(props.color)})); `} ${(props) => props.borderColor && css` - border-color: var(${variantToColorVar(props.borderColor)}); + border-color: rgba(var(${variantToRgbCssVar(props.borderColor)})); `} `; From c9c25d2598462c7bedecd852b3948287079e3f79 Mon Sep 17 00:00:00 2001 From: gdbroman <99gustaf@gmail.com> Date: Tue, 21 Mar 2023 23:23:21 -0500 Subject: [PATCH 16/23] Rm polished from design-system --- lib/design-system/package.json | 1 - .../src/general/CommButton/CommButton.styles.tsx | 6 +++--- .../src/general/MenuItem/MenuItem.styles.tsx | 8 -------- lib/design-system/src/general/Spinner/Spinner.styles.tsx | 3 +-- 4 files changed, 4 insertions(+), 14 deletions(-) diff --git a/lib/design-system/package.json b/lib/design-system/package.json index bfc29be49a..0ee81e7d66 100644 --- a/lib/design-system/package.json +++ b/lib/design-system/package.json @@ -17,7 +17,6 @@ "dom-helpers": "^5.2.1", "emoji-picker-react": "^4.4.7", "framer-motion": "^7.6.7", - "polished": "^4.2.2", "react-lifecycles-compat": "^3.0.4", "react-player": "^2.11.0", "react-spotify-embed": "^1.0.4", diff --git a/lib/design-system/src/general/CommButton/CommButton.styles.tsx b/lib/design-system/src/general/CommButton/CommButton.styles.tsx index 65bd676e5e..2c1c4dd4fe 100644 --- a/lib/design-system/src/general/CommButton/CommButton.styles.tsx +++ b/lib/design-system/src/general/CommButton/CommButton.styles.tsx @@ -1,5 +1,4 @@ import styled from 'styled-components'; -import { darken } from 'polished'; import { Flex } from '../../general/Flex/Flex'; export const CommCircle = styled(Flex)<{ customBg: string }>` @@ -9,10 +8,11 @@ export const CommCircle = styled(Flex)<{ customBg: string }>` align-items: center; justify-content: center; border-radius: 50%; - background: ${(props) => props.customBg}; + background: ${({ customBg }) => customBg}; transition: var(--transition); &:hover { - background: ${(props) => darken(0.025, props.customBg)}; + background: ${({ customBg }) => customBg}; + backdrop-filter: brightness(0.975); } `; diff --git a/lib/design-system/src/general/MenuItem/MenuItem.styles.tsx b/lib/design-system/src/general/MenuItem/MenuItem.styles.tsx index 4f2182dc86..12a20e2ce4 100644 --- a/lib/design-system/src/general/MenuItem/MenuItem.styles.tsx +++ b/lib/design-system/src/general/MenuItem/MenuItem.styles.tsx @@ -1,10 +1,8 @@ import { HTMLAttributes, ReactNode } from 'react'; -import { rgba } from 'polished'; import styled, { css } from 'styled-components'; type MenuItemStyleProps = { children: ReactNode; - color?: string; customBg?: string; selected?: boolean; disabled?: boolean; @@ -38,12 +36,6 @@ export const MenuItemStyle = styled.li` } `} - ${({ color, disabled }) => - color && - css` - color: ${disabled ? rgba(color, 0.7) : color}; - `} - background-color: transparent; &:hover:not([disabled]) { background-color: ${({ customBg }) => diff --git a/lib/design-system/src/general/Spinner/Spinner.styles.tsx b/lib/design-system/src/general/Spinner/Spinner.styles.tsx index ba6bc1ea13..c4092fa35f 100644 --- a/lib/design-system/src/general/Spinner/Spinner.styles.tsx +++ b/lib/design-system/src/general/Spinner/Spinner.styles.tsx @@ -1,4 +1,3 @@ -import { rgba } from 'polished'; import styled from 'styled-components'; type Props = { @@ -12,7 +11,7 @@ export const StyledSpinner = styled.div` border-width: ${({ size }) => (size < 2 ? 0.75 : 5)}px; border-style: solid; // TODO: get brand color from a CSS variable. - border-color: ${rgba('#757575', 0.2)}; + border-color: rgba(117, 117, 117, 0.2); border-bottom-color: ${({ color }) => color ?? '#ef9134'}; border-radius: 50%; display: inline-block; From dbfab313c90756fc376c7ea99c2aedd3c7880992 Mon Sep 17 00:00:00 2001 From: gdbroman <99gustaf@gmail.com> Date: Wed, 22 Mar 2023 10:56:59 -0500 Subject: [PATCH 17/23] Simplify filing --- .../apps/System/components/System.tsx | 2 +- app/src/renderer/components/CopyButton.tsx | 4 +- .../system/auth/login/ResetCodeDialog.tsx | 4 +- .../onboarding/CheckInstallation.dialog.tsx | 4 +- .../system/onboarding/Disclaimer.dialog.tsx | 2 +- lib/design-system/src/general/Icon/Icon.tsx | 63 ++++++++----------- .../src/input/CheckBox/CheckBox.styles.tsx | 31 --------- .../src/input/CheckBox/CheckBox.tsx | 45 ++++++------- .../src/input/RadioList/RadioList.tsx | 2 +- lib/design-system/src/input/Select/Select.tsx | 2 +- .../src/os/RoomsDock/RoomsDockControls.tsx | 4 +- lib/design-system/src/util/colors.ts | 6 ++ 12 files changed, 67 insertions(+), 102 deletions(-) delete mode 100644 lib/design-system/src/input/CheckBox/CheckBox.styles.tsx diff --git a/app/src/renderer/apps/System/components/System.tsx b/app/src/renderer/apps/System/components/System.tsx index 2be3e249a4..bbb063443c 100644 --- a/app/src/renderer/apps/System/components/System.tsx +++ b/app/src/renderer/apps/System/components/System.tsx @@ -96,7 +96,7 @@ const SystemPanelPresenter = () => { title="Isolation Mode" label="Prevents the native OS from causing edge events and notifications." isChecked={desktop.isIsolationMode} - onChange={desktop.toggleIsolationMode} + onClick={desktop.toggleIsolationMode} /> diff --git a/app/src/renderer/components/CopyButton.tsx b/app/src/renderer/components/CopyButton.tsx index 8ef3aefffe..b1eaddfa97 100644 --- a/app/src/renderer/components/CopyButton.tsx +++ b/app/src/renderer/components/CopyButton.tsx @@ -19,10 +19,10 @@ export const CopyButton = ({ content, size = 2 }: CopyButtonProps) => { {!copied.isOn ? ( - + ) : ( - + )} ); diff --git a/app/src/renderer/system/auth/login/ResetCodeDialog.tsx b/app/src/renderer/system/auth/login/ResetCodeDialog.tsx index 37a7b5f413..5587a1b2fc 100644 --- a/app/src/renderer/system/auth/login/ResetCodeDialog.tsx +++ b/app/src/renderer/system/auth/login/ResetCodeDialog.tsx @@ -161,10 +161,10 @@ const ResetCodeDialogPresenter = ({ ship, password }: ResetCodeProps) => { {saveShipCodeResult === 'success' && ( )} diff --git a/app/src/renderer/system/onboarding/CheckInstallation.dialog.tsx b/app/src/renderer/system/onboarding/CheckInstallation.dialog.tsx index 9139ae5563..6966981eba 100644 --- a/app/src/renderer/system/onboarding/CheckInstallation.dialog.tsx +++ b/app/src/renderer/system/onboarding/CheckInstallation.dialog.tsx @@ -40,10 +40,10 @@ const CheckInstallationDialogPresenter = (props: BaseDialogProps) => { {isChecking ? ( ) : onboarding.versionLoader.state === 'loaded' ? ( - + ) : ( onboarding.versionLoader.state === 'error' && ( - + ) )} {isChecking ? ( diff --git a/app/src/renderer/system/onboarding/Disclaimer.dialog.tsx b/app/src/renderer/system/onboarding/Disclaimer.dialog.tsx index 3784f86f6f..fa6e18a799 100644 --- a/app/src/renderer/system/onboarding/Disclaimer.dialog.tsx +++ b/app/src/renderer/system/onboarding/Disclaimer.dialog.tsx @@ -43,7 +43,7 @@ const DisclaimerDialogPresenter = (props: BaseDialogProps) => { diff --git a/lib/design-system/src/general/Icon/Icon.tsx b/lib/design-system/src/general/Icon/Icon.tsx index e38750eb75..9bb148f9c7 100644 --- a/lib/design-system/src/general/Icon/Icon.tsx +++ b/lib/design-system/src/general/Icon/Icon.tsx @@ -12,19 +12,16 @@ import { WidthProps, HeightProps, SpaceProps, - ColorProps, LayoutProps, TypographyProps, } from 'styled-system'; import { IconPathsType, paths } from './icons'; import { BoxProps } from '../Box/Box'; -import { ColorVariants, getVar } from '../../util/colors'; - -const hexToSvgSafeColor = (hex: string) => hex.replace('#', '%23'); +import { ColorProps, colorStyle } from '../../util/colors'; export type IconProps = BoxProps & SpaceProps & - Omit & + Pick & LayoutProps & TypographyProps & WidthProps & @@ -35,47 +32,37 @@ const SvgComponent = forwardRef< SVGMotionProps & { name: IconPathsType; title?: string; - color?: ColorVariants; - isBackgroundImage?: boolean; + customFill?: string; + onClick?: () => void; } ->( - ( - { title, name, width, height, color, isBackgroundImage, ...rest }, - svgRef - ) => { - const [titleId] = useState(() => (title ? uuid() : undefined)); - - const svgSafeColor = color - ? isBackgroundImage - ? /* SVGs as CSS background-images don't support the #hex format. */ - hexToSvgSafeColor(`rgba(${getVar(color)})`) - : `rgba(${getVar(color)})` - : 'currentcolor'; +>(({ title, name, width, height, onClick, ...rest }, svgRef) => { + const [titleId] = useState(() => (title ? uuid() : undefined)); - return ( - - {title ? {title} : null} - {paths[name]} - - ); - } -); + return ( + + {title ? {title} : null} + {paths[name]} + + ); +}); SvgComponent.displayName = 'SvgComponent'; export const Icon = styled(SvgComponent)` flex: none; vertical-align: middle; + ${colorStyle} + ${({ customFill }) => customFill && `fill: ${customFill};`} ${compose(space, color, width, height, layout, typography)} `; diff --git a/lib/design-system/src/input/CheckBox/CheckBox.styles.tsx b/lib/design-system/src/input/CheckBox/CheckBox.styles.tsx deleted file mode 100644 index 216f665333..0000000000 --- a/lib/design-system/src/input/CheckBox/CheckBox.styles.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { motion } from 'framer-motion'; -import styled, { css } from 'styled-components'; - -export const CheckBoxInput = styled(motion.input)<{ - blankSvgString: string; - checkedSvgString: string; -}>` - width: 24px; - height: 24px; - background-color: transparent; - outline: none; - opacity: 0.7; - appearance: none; - background-repeat: no-repeat; - background-position: center; - background-size: 18px 18px; - ${({ blankSvgString }) => css` - background-image: url('data:image/svg+xml;utf8,${blankSvgString}'); - `} - - &:checked { - opacity: 1; - ${({ checkedSvgString }) => css` - background-image: url('data:image/svg+xml;utf8,${checkedSvgString}'); - `} - } - &:disabled { - opacity: 0.42; - cursor: not-allowed; - } -`; diff --git a/lib/design-system/src/input/CheckBox/CheckBox.tsx b/lib/design-system/src/input/CheckBox/CheckBox.tsx index 4cf43edb2d..3022cf6a92 100644 --- a/lib/design-system/src/input/CheckBox/CheckBox.tsx +++ b/lib/design-system/src/input/CheckBox/CheckBox.tsx @@ -1,5 +1,4 @@ -import { renderToString } from 'react-dom/server'; -import { CheckBoxInput } from './CheckBox.styles'; +import { useToggle } from '@holium/shared'; import { Flex } from '../../general/Flex/Flex'; import { Text } from '../../general/Text/Text'; import { Icon } from '../../general/Icon/Icon'; @@ -10,7 +9,7 @@ type Props = { isChecked?: boolean; disabled?: boolean; defaultChecked?: boolean; - onChange?: () => void; + onClick?: () => void; }; export const CheckBox = ({ @@ -19,28 +18,32 @@ export const CheckBox = ({ isChecked, disabled, defaultChecked, - onChange, + onClick, }: Props) => { - const blankSvgJsxElement = ( - - ); - const checkedSvgJsxElement = ( - - ); - const blankSvgString = renderToString(blankSvgJsxElement); - const checkedSvgString = renderToString(checkedSvgJsxElement); + const toggled = useToggle(isChecked ?? defaultChecked ?? false); + + const onToggle = () => { + if (disabled) return; + toggled.toggle(); + onClick?.(); + }; return ( - + + {toggled.isOn ? ( + + ) : ( + + )} + + {title && ( ( opacity={isSelected ? 1 : 0.6} size={24} name={option.icon} - color={isSelected ? 'accent' : 'text'} + fill={isSelected ? 'accent' : 'text'} /> )} diff --git a/lib/design-system/src/input/Select/Select.tsx b/lib/design-system/src/input/Select/Select.tsx index e73abee063..9ae46f2127 100644 --- a/lib/design-system/src/input/Select/Select.tsx +++ b/lib/design-system/src/input/Select/Select.tsx @@ -100,7 +100,7 @@ export const Select = ({ {placeholder} )} - + - + ); @@ -52,7 +52,7 @@ export const RoomsDockControls = ({ }} > diff --git a/lib/design-system/src/util/colors.ts b/lib/design-system/src/util/colors.ts index 64ccc9fdc7..c2c2b0ff72 100644 --- a/lib/design-system/src/util/colors.ts +++ b/lib/design-system/src/util/colors.ts @@ -45,6 +45,7 @@ export const getVar = (variable: StyleVars) => { export interface ColorProps { bg?: ColorVariants; + fill?: ColorVariants; color?: ColorVariants; borderColor?: ColorVariants; } @@ -65,4 +66,9 @@ export const colorStyle = css` css` border-color: rgba(var(${variantToRgbCssVar(props.borderColor)})); `} + ${(props) => + props.fill && + css` + fill: rgba(var(${variantToRgbCssVar(props.fill)})); + `} `; From 2186fc1d793e6c81aad494c4f1f55dc857ff7921 Mon Sep 17 00:00:00 2001 From: gdbroman <99gustaf@gmail.com> Date: Fri, 24 Mar 2023 09:52:18 -0500 Subject: [PATCH 18/23] rm `@holium/shared` as design-system dependency --- app/src/main/helpers/mouse.ts | 2 +- app/src/main/preload.multiplayer.ts | 2 +- app/src/main/preload.ts | 2 +- app/src/os/services/shell/desktop.model.ts | 2 +- app/src/os/services/shell/desktop.service.ts | 2 +- app/src/os/services/shell/lib/dimensions.ts | 2 +- app/src/os/services/shell/lib/window-manager.ts | 2 +- app/src/renderer/apps/System/components/Account.tsx | 2 +- app/src/renderer/apps/store.ts | 2 +- app/src/renderer/components/CopyButton.tsx | 3 +-- app/src/renderer/components/People/usePassportMenu.tsx | 3 +-- app/src/renderer/logic/actions/desktop.ts | 2 +- app/src/renderer/logic/lib/position.ts | 2 +- app/src/renderer/system/auth/login/ResetCodeDialog.tsx | 2 +- .../system/desktop/components/AppWindow/AppWindow.tsx | 2 +- .../system/desktop/components/AppWindow/View/DevView.tsx | 2 +- app/src/renderer/system/desktop/useMultiplayer.ts | 2 +- app/src/renderer/system/dialog/dialogs.tsx | 2 +- app/src/renderer/system/mouse/AnimatedCursor.tsx | 2 +- app/src/renderer/system/mouse/Mouse.styles.tsx | 2 +- app/src/renderer/system/mouse/Mouse.tsx | 2 +- app/src/renderer/system/mouse/MultiplayerMice.tsx | 2 +- app/src/renderer/system/mouse/StandAloneMouse.tsx | 2 +- app/src/renderer/system/onboarding/AddShip.dialog.tsx | 2 +- app/src/renderer/system/onboarding/InstallAgent.dialog.tsx | 2 +- app/src/renderer/system/onboarding/ViewCode.dialog.tsx | 2 +- lib/design-system/package.json | 2 +- lib/design-system/src/blocks/Bubble/Reaction.tsx | 6 +++--- lib/design-system/src/input/CheckBox/CheckBox.tsx | 2 +- .../useToggle.ts => lib/design-system/src/util/hooks.ts | 0 lib/design-system/src/util/index.ts | 4 +++- {shared/src/types => lib/design-system/src/util}/types.ts | 0 lib/presence/src/types.ts | 2 +- shared/src/index.ts | 3 +-- 34 files changed, 36 insertions(+), 37 deletions(-) rename shared/src/hooks/useToggle.ts => lib/design-system/src/util/hooks.ts (100%) rename {shared/src/types => lib/design-system/src/util}/types.ts (100%) diff --git a/app/src/main/helpers/mouse.ts b/app/src/main/helpers/mouse.ts index d223c22571..06a73bc42d 100644 --- a/app/src/main/helpers/mouse.ts +++ b/app/src/main/helpers/mouse.ts @@ -1,6 +1,6 @@ import { BrowserWindow, ipcMain, screen } from 'electron'; import { MouseState, PresenceArg } from '@holium/realm-presence'; -import { Position } from '@holium/shared'; +import { Position } from '@holium/design-system'; import { denormalizePosition } from '../../os/services/shell/lib/window-manager'; const getWebContentsPosition = (mainWindow: BrowserWindow) => { diff --git a/app/src/main/preload.multiplayer.ts b/app/src/main/preload.multiplayer.ts index 1826a64abb..b1fabffb93 100644 --- a/app/src/main/preload.multiplayer.ts +++ b/app/src/main/preload.multiplayer.ts @@ -1,6 +1,6 @@ import { ipcRenderer } from 'electron'; import { PresenceArg, MouseState } from '@holium/realm-presence'; -import { Position } from '@holium/shared'; +import { Position } from '@holium/design-system'; export const multiplayerPreload = { /* Senders */ diff --git a/app/src/main/preload.ts b/app/src/main/preload.ts index ec429ab909..e453bf4b78 100644 --- a/app/src/main/preload.ts +++ b/app/src/main/preload.ts @@ -2,7 +2,7 @@ import { contextBridge, ipcRenderer } from 'electron'; import { MouseState } from '@holium/realm-presence'; import { osPreload } from '../os/preload'; import { MediaAccess, MediaAccessStatus } from '../os/types'; -import { Position } from '@holium/shared'; +import { Position } from '@holium/design-system'; import { multiplayerPreload } from './preload.multiplayer'; import './helpers/mouseListener'; import './helpers/keyListener'; diff --git a/app/src/os/services/shell/desktop.model.ts b/app/src/os/services/shell/desktop.model.ts index 19ed036772..a80e897ead 100644 --- a/app/src/os/services/shell/desktop.model.ts +++ b/app/src/os/services/shell/desktop.model.ts @@ -1,5 +1,5 @@ import { types, applySnapshot, Instance, SnapshotIn } from 'mobx-state-tree'; -import { Dimensions } from '@holium/shared'; +import { Dimensions } from '@holium/design-system'; import { AppType, Glob } from '../spaces/models/bazaar'; import { toJS } from 'mobx'; import { diff --git a/app/src/os/services/shell/desktop.service.ts b/app/src/os/services/shell/desktop.service.ts index 70f33a0f2b..0ae38b02e2 100644 --- a/app/src/os/services/shell/desktop.service.ts +++ b/app/src/os/services/shell/desktop.service.ts @@ -12,7 +12,7 @@ import { import { AppType } from '../spaces/models/bazaar'; import { IpcRendererEvent } from 'electron/renderer'; import { toJS } from 'mobx'; -import { Bounds } from '@holium/shared'; +import { Bounds } from '@holium/design-system'; import { getReleaseChannel, setReleaseChannel } from '../../lib/settings'; diff --git a/app/src/os/services/shell/lib/dimensions.ts b/app/src/os/services/shell/lib/dimensions.ts index 366feb4704..244c7523e1 100644 --- a/app/src/os/services/shell/lib/dimensions.ts +++ b/app/src/os/services/shell/lib/dimensions.ts @@ -1,4 +1,4 @@ -import { Dimensions } from '@holium/shared'; +import { Dimensions } from '@holium/design-system'; import { normalizeDimensions } from './window-manager'; const DEFAULT_APP_WINDOW_DIMENSIONS: Record = { diff --git a/app/src/os/services/shell/lib/window-manager.ts b/app/src/os/services/shell/lib/window-manager.ts index f27a1eb4a7..3776ff16be 100644 --- a/app/src/os/services/shell/lib/window-manager.ts +++ b/app/src/os/services/shell/lib/window-manager.ts @@ -1,5 +1,5 @@ import { AppType, RealmConfigType } from 'os/services/spaces/models/bazaar'; -import { Dimensions, Position, Bounds } from '@holium/shared'; +import { Dimensions, Position, Bounds } from '@holium/design-system'; import { getDefaultAppDimensions } from './dimensions'; /** diff --git a/app/src/renderer/apps/System/components/Account.tsx b/app/src/renderer/apps/System/components/Account.tsx index 49c55df308..12c32ced54 100644 --- a/app/src/renderer/apps/System/components/Account.tsx +++ b/app/src/renderer/apps/System/components/Account.tsx @@ -8,8 +8,8 @@ import { RadioGroup, Spinner, TextInput, + useToggle, } from '@holium/design-system'; -import { useToggle } from '@holium/shared'; import { Text, Card, diff --git a/app/src/renderer/apps/store.ts b/app/src/renderer/apps/store.ts index c8f0438bc7..ccbdbcf9e3 100644 --- a/app/src/renderer/apps/store.ts +++ b/app/src/renderer/apps/store.ts @@ -20,7 +20,7 @@ import { import { OSActions } from '../logic/actions/os'; import { DmApp } from './Messages/store'; -import { Dimensions } from '@holium/shared'; +import { Dimensions } from '@holium/design-system'; const TrayAppCoords = types.model({ left: types.number, diff --git a/app/src/renderer/components/CopyButton.tsx b/app/src/renderer/components/CopyButton.tsx index b1eaddfa97..bec911139c 100644 --- a/app/src/renderer/components/CopyButton.tsx +++ b/app/src/renderer/components/CopyButton.tsx @@ -1,5 +1,4 @@ -import { Box, Icon } from '@holium/design-system'; -import { useToggle } from '@holium/shared'; +import { Box, Icon, useToggle } from '@holium/design-system'; interface CopyButtonProps { content: string; diff --git a/app/src/renderer/components/People/usePassportMenu.tsx b/app/src/renderer/components/People/usePassportMenu.tsx index 0e9234026e..02b169dbca 100644 --- a/app/src/renderer/components/People/usePassportMenu.tsx +++ b/app/src/renderer/components/People/usePassportMenu.tsx @@ -1,4 +1,4 @@ -import { Box } from '@holium/design-system'; +import { Box, Position } from '@holium/design-system'; import { AnimatePresence } from 'framer-motion'; import { createContext, @@ -10,7 +10,6 @@ import { import { useServices } from 'renderer/logic/store'; import { Menu } from '../Menu'; import { PassportCard } from './PassportCard'; -import { Position } from '@holium/shared'; type PassportMenuOptions = { patp: string; diff --git a/app/src/renderer/logic/actions/desktop.ts b/app/src/renderer/logic/actions/desktop.ts index 2c8bee998d..a3e9e288ff 100644 --- a/app/src/renderer/logic/actions/desktop.ts +++ b/app/src/renderer/logic/actions/desktop.ts @@ -4,7 +4,7 @@ import { AppWindowProps, AppWindowType } from 'os/services/shell/desktop.model'; import { AppType } from 'os/services/spaces/models/bazaar'; -import { Bounds } from '@holium/shared'; +import { Bounds } from '@holium/design-system'; import { SpacesActions } from './spaces'; /** diff --git a/app/src/renderer/logic/lib/position.ts b/app/src/renderer/logic/lib/position.ts index 617d6deee5..d4b3db6c4d 100644 --- a/app/src/renderer/logic/lib/position.ts +++ b/app/src/renderer/logic/lib/position.ts @@ -1,4 +1,4 @@ -import { Dimensions, Position } from '@holium/shared'; +import { Dimensions, Position } from '@holium/design-system'; export const calculateAnchorPoint = ( event: any, diff --git a/app/src/renderer/system/auth/login/ResetCodeDialog.tsx b/app/src/renderer/system/auth/login/ResetCodeDialog.tsx index 5587a1b2fc..70d51edf8c 100644 --- a/app/src/renderer/system/auth/login/ResetCodeDialog.tsx +++ b/app/src/renderer/system/auth/login/ResetCodeDialog.tsx @@ -9,8 +9,8 @@ import { Icon, TextInput, Spinner, + useToggle, } from '@holium/design-system'; -import { useToggle } from '@holium/shared'; import { DialogConfig } from 'renderer/system/dialog/dialogs'; import { normalizeBounds } from 'os/services/shell/lib/window-manager'; import { ShellActions } from 'renderer/logic/actions/shell'; diff --git a/app/src/renderer/system/desktop/components/AppWindow/AppWindow.tsx b/app/src/renderer/system/desktop/components/AppWindow/AppWindow.tsx index ff23c562a6..fc5e305685 100644 --- a/app/src/renderer/system/desktop/components/AppWindow/AppWindow.tsx +++ b/app/src/renderer/system/desktop/components/AppWindow/AppWindow.tsx @@ -8,7 +8,7 @@ import { AppWindowContainer } from './AppWindow.styles'; import { AppWindowResizeHandles } from './AppWindowResizeHandles'; import { Flex } from 'renderer/components'; import { useServices } from 'renderer/logic/store'; -import { useToggle } from '@holium/shared'; +import { useToggle } from '@holium/design-system'; import { DesktopActions } from 'renderer/logic/actions/desktop'; import { getWebViewId } from 'renderer/system/desktop/components/AppWindow/View/getWebViewId'; import { diff --git a/app/src/renderer/system/desktop/components/AppWindow/View/DevView.tsx b/app/src/renderer/system/desktop/components/AppWindow/View/DevView.tsx index a028e70c71..9d4b439cca 100644 --- a/app/src/renderer/system/desktop/components/AppWindow/View/DevView.tsx +++ b/app/src/renderer/system/desktop/components/AppWindow/View/DevView.tsx @@ -3,7 +3,7 @@ import { useServices } from 'renderer/logic/store'; import { WebView } from './WebView'; import { AppWindowType } from 'os/services/shell/desktop.model'; import { observer } from 'mobx-react'; -import { useToggle } from '@holium/shared'; +import { useToggle } from '@holium/design-system'; import { useRooms } from 'renderer/apps/Rooms/useRooms'; import { RoomManagerEvent, RoomsManager } from '@holium/realm-room'; import { genCSSVariables } from 'renderer/logic/theme'; diff --git a/app/src/renderer/system/desktop/useMultiplayer.ts b/app/src/renderer/system/desktop/useMultiplayer.ts index 2efc9a7f10..1f26aa04b5 100644 --- a/app/src/renderer/system/desktop/useMultiplayer.ts +++ b/app/src/renderer/system/desktop/useMultiplayer.ts @@ -16,7 +16,7 @@ import { RoomsManager, } from '@holium/realm-room'; import { normalizePosition } from 'os/services/shell/lib/window-manager'; -import { Dimensions, useToggle } from '@holium/shared'; +import { Dimensions, useToggle } from '@holium/design-system'; type Props = { patp: string | undefined; diff --git a/app/src/renderer/system/dialog/dialogs.tsx b/app/src/renderer/system/dialog/dialogs.tsx index d34f4f96aa..abb5bb67ef 100644 --- a/app/src/renderer/system/dialog/dialogs.tsx +++ b/app/src/renderer/system/dialog/dialogs.tsx @@ -8,7 +8,7 @@ import { LeaveSpaceDialogConfig } from 'renderer/apps/System/Dialogs/LeaveSpaceC import { DeleteSpaceDialogConfig } from 'renderer/apps/System/Dialogs/DeleteSpaceConfirm'; import { AppDetailDialog } from 'renderer/apps/System/Dialogs/AppDetail'; import { ChangeEmailDialogConfig } from 'renderer/apps/System/Dialogs/ChangeEmail'; -import { Dimensions } from '@holium/shared'; +import { Dimensions } from '@holium/design-system'; import { ResetCodeDialogConfig } from '../auth/login/ResetCodeDialog'; export interface BaseWorkflowProps { diff --git a/app/src/renderer/system/mouse/AnimatedCursor.tsx b/app/src/renderer/system/mouse/AnimatedCursor.tsx index 6103dc8781..989863314d 100644 --- a/app/src/renderer/system/mouse/AnimatedCursor.tsx +++ b/app/src/renderer/system/mouse/AnimatedCursor.tsx @@ -1,7 +1,7 @@ import { useRef, useCallback, useEffect, Fragment, useMemo } from 'react'; import { MotionStyle, motion, Variant } from 'framer-motion'; import { MouseState } from '@holium/realm-presence'; -import { Position } from '@holium/shared'; +import { Position } from '@holium/design-system'; import { IsDevice } from './isDevice'; const innerSize = 10; diff --git a/app/src/renderer/system/mouse/Mouse.styles.tsx b/app/src/renderer/system/mouse/Mouse.styles.tsx index 674f3c0e0b..78597b81aa 100644 --- a/app/src/renderer/system/mouse/Mouse.styles.tsx +++ b/app/src/renderer/system/mouse/Mouse.styles.tsx @@ -1,7 +1,7 @@ import { motion } from 'framer-motion'; import styled from 'styled-components'; import { bgIsLightOrDark } from 'os/lib/color'; -import { Position } from '@holium/shared'; +import { Position } from '@holium/design-system'; export const CursorLabel = styled(motion.div)<{ position: Position; diff --git a/app/src/renderer/system/mouse/Mouse.tsx b/app/src/renderer/system/mouse/Mouse.tsx index d69b3e7bc9..d3aa73ac44 100644 --- a/app/src/renderer/system/mouse/Mouse.tsx +++ b/app/src/renderer/system/mouse/Mouse.tsx @@ -1,6 +1,6 @@ import { useState, useEffect } from 'react'; import { MouseState } from '@holium/realm-presence'; -import { useToggle } from '@holium/shared'; +import { useToggle } from '@holium/design-system'; import { hexToRgb, rgbToString } from 'os/lib/color'; import { AnimatedCursor } from './AnimatedCursor'; import { EphemeralChat } from './Mouse.styles'; diff --git a/app/src/renderer/system/mouse/MultiplayerMice.tsx b/app/src/renderer/system/mouse/MultiplayerMice.tsx index 6ceba0e8ce..f8b4315397 100644 --- a/app/src/renderer/system/mouse/MultiplayerMice.tsx +++ b/app/src/renderer/system/mouse/MultiplayerMice.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { Position } from '@holium/shared'; +import { Position } from '@holium/design-system'; import { AnimatedCursor } from './AnimatedCursor'; import { hexToRgb, rgbToString } from 'os/lib/color'; import { MouseState } from '@holium/realm-presence'; diff --git a/app/src/renderer/system/mouse/StandAloneMouse.tsx b/app/src/renderer/system/mouse/StandAloneMouse.tsx index c1fe35c36c..33a2a9669d 100644 --- a/app/src/renderer/system/mouse/StandAloneMouse.tsx +++ b/app/src/renderer/system/mouse/StandAloneMouse.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import { MouseState } from '@holium/realm-presence'; import { AnimatedCursor } from './AnimatedCursor'; -import { useToggle } from '@holium/shared'; +import { useToggle } from '@holium/design-system'; import { getMouseState } from './getMouseState'; const useMouseState = (containerId: string) => { diff --git a/app/src/renderer/system/onboarding/AddShip.dialog.tsx b/app/src/renderer/system/onboarding/AddShip.dialog.tsx index 8458ec2582..e1ce6523bc 100644 --- a/app/src/renderer/system/onboarding/AddShip.dialog.tsx +++ b/app/src/renderer/system/onboarding/AddShip.dialog.tsx @@ -10,12 +10,12 @@ import { Spinner, Box, Flex, + useToggle, } from '@holium/design-system'; import { observer } from 'mobx-react'; import { OnboardingActions } from 'renderer/logic/actions/onboarding'; import { BaseDialogProps } from 'renderer/system/dialog/dialogs'; import { useServices } from 'renderer/logic/store'; -import { useToggle } from '@holium/shared'; const AddShipPresenter = (props: BaseDialogProps) => { const { theme, onboarding } = useServices(); diff --git a/app/src/renderer/system/onboarding/InstallAgent.dialog.tsx b/app/src/renderer/system/onboarding/InstallAgent.dialog.tsx index 440b4a2966..0df0b0853d 100644 --- a/app/src/renderer/system/onboarding/InstallAgent.dialog.tsx +++ b/app/src/renderer/system/onboarding/InstallAgent.dialog.tsx @@ -11,8 +11,8 @@ import { Box, Icon, Spinner, + useToggle, } from '@holium/design-system'; -import { useToggle } from '@holium/shared'; const InstallAgentPresenter = () => { const { onboarding } = useServices(); diff --git a/app/src/renderer/system/onboarding/ViewCode.dialog.tsx b/app/src/renderer/system/onboarding/ViewCode.dialog.tsx index 6830a1b05d..1030747234 100644 --- a/app/src/renderer/system/onboarding/ViewCode.dialog.tsx +++ b/app/src/renderer/system/onboarding/ViewCode.dialog.tsx @@ -11,8 +11,8 @@ import { Spinner, Icon, TextInput, + useToggle, } from '@holium/design-system'; -import { useToggle } from '@holium/shared'; const ViewCodePresenter = () => { const { theme } = useServices(); diff --git a/lib/design-system/package.json b/lib/design-system/package.json index 0ee81e7d66..490f8eda71 100644 --- a/lib/design-system/package.json +++ b/lib/design-system/package.json @@ -1,6 +1,6 @@ { "name": "@holium/design-system", - "version": "0.1.7", + "version": "0.2.0", "description": "A component library for Realm apps.", "license": "MIT", "author": "trent@holium.com", diff --git a/lib/design-system/src/blocks/Bubble/Reaction.tsx b/lib/design-system/src/blocks/Bubble/Reaction.tsx index 9e62dc82ea..d164e6cfd7 100644 --- a/lib/design-system/src/blocks/Bubble/Reaction.tsx +++ b/lib/design-system/src/blocks/Bubble/Reaction.tsx @@ -1,15 +1,15 @@ import { useState, useMemo, useEffect } from 'react'; +import { AnimatePresence } from 'framer-motion'; import styled, { css } from 'styled-components'; -import { Flex, Box, Icon, Text } from '../..'; import EmojiPicker, { EmojiClickData, EmojiStyle, Emoji, SkinTones, } from 'emoji-picker-react'; +import { Flex, Box, Icon, Text } from '../../general'; import { FragmentReactionType } from './Bubble.types'; -import { AnimatePresence } from 'framer-motion'; -import { Position } from '@holium/shared'; +import { Position } from '../../util/types'; const WIDTH = 350; const ship = window.ship ?? 'zod'; diff --git a/lib/design-system/src/input/CheckBox/CheckBox.tsx b/lib/design-system/src/input/CheckBox/CheckBox.tsx index 3022cf6a92..6064659926 100644 --- a/lib/design-system/src/input/CheckBox/CheckBox.tsx +++ b/lib/design-system/src/input/CheckBox/CheckBox.tsx @@ -1,7 +1,7 @@ -import { useToggle } from '@holium/shared'; import { Flex } from '../../general/Flex/Flex'; import { Text } from '../../general/Text/Text'; import { Icon } from '../../general/Icon/Icon'; +import { useToggle } from '../../util/hooks'; type Props = { label?: string; diff --git a/shared/src/hooks/useToggle.ts b/lib/design-system/src/util/hooks.ts similarity index 100% rename from shared/src/hooks/useToggle.ts rename to lib/design-system/src/util/hooks.ts diff --git a/lib/design-system/src/util/index.ts b/lib/design-system/src/util/index.ts index 5467c05701..2db863fcb6 100644 --- a/lib/design-system/src/util/index.ts +++ b/lib/design-system/src/util/index.ts @@ -1,5 +1,7 @@ export * from './colors'; export * from './date'; export * from './image'; -export * from './strings'; export * from './links'; +export * from './strings'; +export * from './types'; +export * from './hooks'; diff --git a/shared/src/types/types.ts b/lib/design-system/src/util/types.ts similarity index 100% rename from shared/src/types/types.ts rename to lib/design-system/src/util/types.ts diff --git a/lib/presence/src/types.ts b/lib/presence/src/types.ts index 0754fd4fa2..159e5855ea 100644 --- a/lib/presence/src/types.ts +++ b/lib/presence/src/types.ts @@ -1,4 +1,4 @@ -import { Position } from '@holium/shared'; +import { Position } from '@holium/design-system'; import { PresenceArg } from './hooks/useBroadcast'; export type MouseState = 'text' | 'resize' | 'pointer'; diff --git a/shared/src/index.ts b/shared/src/index.ts index 79deacc7e2..cb0ff5c3b5 100644 --- a/shared/src/index.ts +++ b/shared/src/index.ts @@ -1,2 +1 @@ -export { useToggle } from './hooks/useToggle'; -export type { Bounds, Dimensions, Position } from './types/types'; +export {}; From 73119c3f24418ec74d71b738c71b859d006ff72c Mon Sep 17 00:00:00 2001 From: gdbroman <99gustaf@gmail.com> Date: Fri, 24 Mar 2023 10:28:05 -0500 Subject: [PATCH 19/23] Default color to "icon" --- .../renderer/apps/System/components/System.tsx | 2 +- app/src/renderer/logic/theme.ts | 2 +- .../system/onboarding/Disclaimer.dialog.tsx | 2 +- lib/design-system/src/general/Icon/Icon.tsx | 15 +++++++-------- lib/design-system/src/input/CheckBox/CheckBox.tsx | 6 +++--- lib/design-system/src/input/Select/Select.tsx | 2 +- lib/design-system/src/util/colors.ts | 6 ------ 7 files changed, 14 insertions(+), 21 deletions(-) diff --git a/app/src/renderer/apps/System/components/System.tsx b/app/src/renderer/apps/System/components/System.tsx index bbb063443c..2be3e249a4 100644 --- a/app/src/renderer/apps/System/components/System.tsx +++ b/app/src/renderer/apps/System/components/System.tsx @@ -96,7 +96,7 @@ const SystemPanelPresenter = () => { title="Isolation Mode" label="Prevents the native OS from causing edge events and notifications." isChecked={desktop.isIsolationMode} - onClick={desktop.toggleIsolationMode} + onChange={desktop.toggleIsolationMode} /> diff --git a/app/src/renderer/logic/theme.ts b/app/src/renderer/logic/theme.ts index a8c293d4c1..0c4b0e3a98 100644 --- a/app/src/renderer/logic/theme.ts +++ b/app/src/renderer/logic/theme.ts @@ -35,7 +35,7 @@ export const genCSSVariables = (theme: ThemeType) => { ? toRgbaString(lighten(0.05, theme.windowColor)) : toRgbaString(darken(0.025, theme.windowColor)); const textColor = toRgbaString(theme.textColor); - const iconColor = toRgbaString(theme.iconColor); + const iconColor = toRgbaString(rgba(theme.textColor, 0.7)); const mouseColor = toRgbaString(theme.mouseColor); const intentAlertColor = toRgbaString('#ff6240'); const intentCautionColor = toRgbaString('#ffbc32'); diff --git a/app/src/renderer/system/onboarding/Disclaimer.dialog.tsx b/app/src/renderer/system/onboarding/Disclaimer.dialog.tsx index fa6e18a799..3784f86f6f 100644 --- a/app/src/renderer/system/onboarding/Disclaimer.dialog.tsx +++ b/app/src/renderer/system/onboarding/Disclaimer.dialog.tsx @@ -43,7 +43,7 @@ const DisclaimerDialogPresenter = (props: BaseDialogProps) => { diff --git a/lib/design-system/src/general/Icon/Icon.tsx b/lib/design-system/src/general/Icon/Icon.tsx index 9bb148f9c7..fe819f1469 100644 --- a/lib/design-system/src/general/Icon/Icon.tsx +++ b/lib/design-system/src/general/Icon/Icon.tsx @@ -17,22 +17,22 @@ import { } from 'styled-system'; import { IconPathsType, paths } from './icons'; import { BoxProps } from '../Box/Box'; -import { ColorProps, colorStyle } from '../../util/colors'; +import { ColorVariants } from '../../util/colors'; export type IconProps = BoxProps & SpaceProps & - Pick & LayoutProps & TypographyProps & WidthProps & - HeightProps; + HeightProps & { + fill?: ColorVariants; + }; const SvgComponent = forwardRef< SVGSVGElement, SVGMotionProps & { name: IconPathsType; title?: string; - customFill?: string; onClick?: () => void; } >(({ title, name, width, height, onClick, ...rest }, svgRef) => { @@ -41,7 +41,7 @@ const SvgComponent = forwardRef< return ( ` flex: none; vertical-align: middle; - ${colorStyle} - ${({ customFill }) => customFill && `fill: ${customFill};`} - ${compose(space, color, width, height, layout, typography)} + fill: ${({ fill = 'icon' }) => `rgba(var(--rlm-${fill}-rgba))`}; + ${compose(space, color, width, height, layout, typography)}; `; let lastId = 0; diff --git a/lib/design-system/src/input/CheckBox/CheckBox.tsx b/lib/design-system/src/input/CheckBox/CheckBox.tsx index 6064659926..f5cd0d4012 100644 --- a/lib/design-system/src/input/CheckBox/CheckBox.tsx +++ b/lib/design-system/src/input/CheckBox/CheckBox.tsx @@ -9,7 +9,7 @@ type Props = { isChecked?: boolean; disabled?: boolean; defaultChecked?: boolean; - onClick?: () => void; + onChange?: () => void; }; export const CheckBox = ({ @@ -18,14 +18,14 @@ export const CheckBox = ({ isChecked, disabled, defaultChecked, - onClick, + onChange, }: Props) => { const toggled = useToggle(isChecked ?? defaultChecked ?? false); const onToggle = () => { if (disabled) return; toggled.toggle(); - onClick?.(); + onChange?.(); }; return ( diff --git a/lib/design-system/src/input/Select/Select.tsx b/lib/design-system/src/input/Select/Select.tsx index 9ae46f2127..3b60f233b6 100644 --- a/lib/design-system/src/input/Select/Select.tsx +++ b/lib/design-system/src/input/Select/Select.tsx @@ -100,7 +100,7 @@ export const Select = ({ {placeholder} )} - + { export interface ColorProps { bg?: ColorVariants; - fill?: ColorVariants; color?: ColorVariants; borderColor?: ColorVariants; } @@ -66,9 +65,4 @@ export const colorStyle = css` css` border-color: rgba(var(${variantToRgbCssVar(props.borderColor)})); `} - ${(props) => - props.fill && - css` - fill: rgba(var(${variantToRgbCssVar(props.fill)})); - `} `; From e8d30aad3a4094e41fc985d1782cfe590e023027 Mon Sep 17 00:00:00 2001 From: gdbroman <99gustaf@gmail.com> Date: Fri, 24 Mar 2023 10:28:19 -0500 Subject: [PATCH 20/23] Fix default theme's icon-color to be higher-contrast --- desks/realm/lib/spaces.hoon | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/desks/realm/lib/spaces.hoon b/desks/realm/lib/spaces.hoon index e35c1dae16..784b6bae1c 100644 --- a/desks/realm/lib/spaces.hoon +++ b/desks/realm/lib/spaces.hoon @@ -14,7 +14,7 @@ accent-color='#4E9EFD' input-color='#fff' dock-color='#fff' - icon-color='rgba(95,94,88,0.3)' + icon-color='rgba(51,51,51,0.7)' text-color='#333333' window-color='#fff' wallpaper='https://images.unsplash.com/photo-1622547748225-3fc4abd2cca0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=100' From 40d02fdc56cd12b81ff155ff284d3ff298e35b95 Mon Sep 17 00:00:00 2001 From: gdbroman <99gustaf@gmail.com> Date: Fri, 24 Mar 2023 10:49:34 -0500 Subject: [PATCH 21/23] Fix select hover style --- lib/design-system/src/general/MenuItem/MenuItem.styles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/design-system/src/general/MenuItem/MenuItem.styles.tsx b/lib/design-system/src/general/MenuItem/MenuItem.styles.tsx index 12a20e2ce4..bde0d91442 100644 --- a/lib/design-system/src/general/MenuItem/MenuItem.styles.tsx +++ b/lib/design-system/src/general/MenuItem/MenuItem.styles.tsx @@ -40,6 +40,6 @@ export const MenuItemStyle = styled.li` &:hover:not([disabled]) { background-color: ${({ customBg }) => customBg ? customBg : 'rgba(var(--rlm-input-rgba))'}; - backdrop-filter: brightness(96.5%); + filter: brightness(96.5%); } `; From d386490765212ea5465358de937128b50a72d899 Mon Sep 17 00:00:00 2001 From: gdbroman <99gustaf@gmail.com> Date: Fri, 24 Mar 2023 13:37:57 -0500 Subject: [PATCH 22/23] Fix active/hover colors --- app/src/renderer/logic/theme.ts | 6 ++---- .../components/ShipBar/MessagesTray/index.tsx | 1 - lib/design-system/src/blocks/Bubble/Reaction.tsx | 3 +-- lib/design-system/src/general/Button/Button.tsx | 14 +++++++------- .../src/general/CommButton/CommButton.styles.tsx | 2 +- .../src/input/RadioGroup/RadioGroup.style.tsx | 4 ++-- 6 files changed, 13 insertions(+), 17 deletions(-) diff --git a/app/src/renderer/logic/theme.ts b/app/src/renderer/logic/theme.ts index 0c4b0e3a98..28ed9ee186 100644 --- a/app/src/renderer/logic/theme.ts +++ b/app/src/renderer/logic/theme.ts @@ -40,10 +40,8 @@ export const genCSSVariables = (theme: ThemeType) => { const intentAlertColor = toRgbaString('#ff6240'); const intentCautionColor = toRgbaString('#ffbc32'); const intentSuccessColor = toRgbaString('#0fc383'); - const overlayHoverColor = toRgbaString(rgba(isLight ? '#fff' : '#000', 0.05)); - const overlayActiveColor = toRgbaString( - rgba(isLight ? '#000' : '#fff', 0.09) - ); + const overlayHoverColor = isLight ? '0,0,0,0.04' : '255,255,255,0.06'; + const overlayActiveColor = isLight ? '0,0,0,0.06' : '255,255,255,0.09'; return ` :root { diff --git a/app/src/renderer/system/desktop/components/SystemBar/components/ShipBar/MessagesTray/index.tsx b/app/src/renderer/system/desktop/components/SystemBar/components/ShipBar/MessagesTray/index.tsx index c9a4d5c5ff..28b934069e 100644 --- a/app/src/renderer/system/desktop/components/SystemBar/components/ShipBar/MessagesTray/index.tsx +++ b/app/src/renderer/system/desktop/components/SystemBar/components/ShipBar/MessagesTray/index.tsx @@ -39,7 +39,6 @@ const MessagesTrayPresenter = () => { return ( ` justify-content: center; background: ${({ selected }) => selected ? 'rgba(var(--rlm-accent-rgba))' : 'rgba(var(--rlm-input-rgba))'}; - backdrop-filter: ${({ selected }) => - selected ? 'brightness(1.3)' : 'brightness(1)'}; + filter: ${({ selected }) => (selected ? 'brightness(1.3)' : 'brightness(1)')}; border: ${({ selected }) => selected ? '1px solid rgba(var(--rlm-accent-rgba))' diff --git a/lib/design-system/src/general/Button/Button.tsx b/lib/design-system/src/general/Button/Button.tsx index 761be75a4b..d9b8f99833 100644 --- a/lib/design-system/src/general/Button/Button.tsx +++ b/lib/design-system/src/general/Button/Button.tsx @@ -125,11 +125,11 @@ const Primary = styled(Base)` color: #ffffff; &:hover:not([disabled]) { background-color: rgba(var(--rlm-accent-rgba)); - backdrop-filter: brightness(1.1); + filter: brightness(1.1); } &:active:not([disabled]) { background-color: rgba(var(--rlm-accent-rgba)); - backdrop-filter: brightness(1.2); + filter: brightness(1.2); } svg { fill: #ffffff; @@ -139,14 +139,14 @@ const Primary = styled(Base)` const Secondary = styled(Base)` color: rgba(var(--rlm-text-rgba)); background-color: rgba(var(--rlm-window-rgba)); - backdrop-filter: brightness(0.975); + filter: brightness(0.975); &:hover:not([disabled]) { background-color: rgba(var(--rlm-window-rgba)); - backdrop-filter: brightness(0.975); + filter: brightness(0.975); } &:active:not([disabled]) { background-color: rgba(var(--rlm-window-rgba)); - backdrop-filter: brightness(0.925); + filter: brightness(0.925); } `; @@ -169,11 +169,11 @@ const Transparent = styled(Base)` background-color: transparent; &:hover:not([disabled]) { background-color: rgba(var(--rlm-window-rgba)); - backdrop-filter: brightness(0.975); + filter: brightness(0.975); } &:active:not([disabled]) { background-color: rgba(var(--rlm-window-rgba)); - backdrop-filter: brightness(0.95); + filter: brightness(0.95); } svg { fill: rgba(var(--rlm-text-rgba)); diff --git a/lib/design-system/src/general/CommButton/CommButton.styles.tsx b/lib/design-system/src/general/CommButton/CommButton.styles.tsx index 2c1c4dd4fe..6c8e0f9e9f 100644 --- a/lib/design-system/src/general/CommButton/CommButton.styles.tsx +++ b/lib/design-system/src/general/CommButton/CommButton.styles.tsx @@ -13,6 +13,6 @@ export const CommCircle = styled(Flex)<{ customBg: string }>` &:hover { background: ${({ customBg }) => customBg}; - backdrop-filter: brightness(0.975); + filter: brightness(0.975); } `; diff --git a/lib/design-system/src/input/RadioGroup/RadioGroup.style.tsx b/lib/design-system/src/input/RadioGroup/RadioGroup.style.tsx index 9f075fd41d..84f1de5020 100644 --- a/lib/design-system/src/input/RadioGroup/RadioGroup.style.tsx +++ b/lib/design-system/src/input/RadioGroup/RadioGroup.style.tsx @@ -25,7 +25,7 @@ export const RadioLabel = styled(motion.label)<{ isSelected?: boolean }>` : css` color: rgba(var(--rlm-text-rgba)); background-color: rgba(var(--rlm-window-rgba)); - backdrop-filter: brightness(0.98); + filter: brightness(0.98); `} `; @@ -44,6 +44,6 @@ export const RadioHighlight = styled(motion.label)<{ isSelected?: boolean }>` ` : css` background-color: rgba(var(--rlm-window-rgba)); - backdrop-filter: brightness(0.98); + filter: brightness(0.98); `} `; From ca07dd9e2a8f3b150335b6b9dbfba7fcf73bcf2e Mon Sep 17 00:00:00 2001 From: AJ LaMarc Date: Sun, 26 Mar 2023 10:36:21 -0400 Subject: [PATCH 23/23] don't remove blur when home pane is open --- app/src/os/services/shell/desktop.service.ts | 4 ++++ app/src/os/services/shell/shell.service.ts | 8 ++++++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/app/src/os/services/shell/desktop.service.ts b/app/src/os/services/shell/desktop.service.ts index 70f33a0f2b..6a134b1f29 100644 --- a/app/src/os/services/shell/desktop.service.ts +++ b/app/src/os/services/shell/desktop.service.ts @@ -33,6 +33,10 @@ import { getReleaseChannel, setReleaseChannel } from '../../lib/settings'; * - google-font: "philosopher" */ export class DesktopService extends BaseService { + public isHomePaneOpen = () => { + return this.state.homePaneOpen; + }; + private readonly state: DesktopStoreType; // for state management handlers: Record void> = { 'realm.desktop.change-wallpaper': this.changeWallpaper, diff --git a/app/src/os/services/shell/shell.service.ts b/app/src/os/services/shell/shell.service.ts index c28fd94423..d20f164fd9 100644 --- a/app/src/os/services/shell/shell.service.ts +++ b/app/src/os/services/shell/shell.service.ts @@ -1,6 +1,5 @@ import { ipcMain, ipcRenderer } from 'electron'; import { onPatch, getSnapshot } from 'mobx-state-tree'; - import { Realm } from '../../index'; import { BaseService } from '../base.service'; import { ShellStoreType, ShellStore } from './shell.model'; @@ -59,7 +58,6 @@ export class ShellService extends BaseService { constructor(core: Realm, options: any = {}) { super(core, options); this.state = ShellStore.create({}); - // this.db = new Store({ // name: `realm.shell`, // TODO add windowId here // accessPropertiesByDotNotation: true, @@ -128,6 +126,12 @@ export class ShellService extends BaseService { } setBlur(_event: any, blurred: boolean) { + // setting blur to false when Home pane is open should be ignored. + if (!blurred) { + if (this.core.services.desktop.isHomePaneOpen()) { + return; + } + } this.state?.setIsBlurred(blurred); }