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/.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)", diff --git a/.storybook/mock-themes/dark.css b/.storybook/mock-themes/dark.css index 79b3a0e90c..d73b93b0d6 100644 --- a/.storybook/mock-themes/dark.css +++ b/.storybook/mock-themes/dark.css @@ -4,35 +4,34 @@ --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-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-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-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 55643ba5b7..d615420953 100644 --- a/.storybook/mock-themes/light.css +++ b/.storybook/mock-themes/light.css @@ -4,19 +4,6 @@ --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: #ffffff; - --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-border-radius-4: 4px; --rlm-border-radius-6: 6px; --rlm-border-radius-9: 9px; @@ -26,12 +13,25 @@ --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-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/README.md b/README.md index 77c0ecc8cf..c903da2070 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..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 '../../os/types'; +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 f46b4ad3e9..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 '../os/types'; +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 6cc4f71c91..e453bf4b78 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/design-system'; import { multiplayerPreload } from './preload.multiplayer'; import './helpers/mouseListener'; import './helpers/keyListener'; 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/os/services/shell/desktop.model.ts b/app/src/os/services/shell/desktop.model.ts index 9c5e993a0d..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 'os/types'; +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 84f836da69..55b3275ebc 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/design-system'; import { getReleaseChannel, setReleaseChannel } from '../../lib/settings'; @@ -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/lib/dimensions.ts b/app/src/os/services/shell/lib/dimensions.ts index 45a85ca848..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 'os/types'; +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 b1849fb926..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 'os/types'; +import { Dimensions, Position, Bounds } from '@holium/design-system'; import { getDefaultAppDimensions } from './dimensions'; /** 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); } 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/App.styles.tsx b/app/src/renderer/App.styles.tsx index f3df214913..677a0e04c7 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; @@ -133,5 +89,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 27d7a6005e..9f48c7183f 100644 --- a/app/src/renderer/apps/Messages/ChatView.tsx +++ b/app/src/renderer/apps/Messages/ChatView.tsx @@ -12,7 +12,6 @@ import { import { lighten, darken } from 'polished'; import { observer } from 'mobx-react'; import { Content } from '@urbit/api'; -import { Input } from 'renderer/components'; import { Avatar, Button, @@ -23,6 +22,7 @@ import { Spinner, Tooltip, } from '@holium/design-system'; +import { Input } from 'renderer/components'; import { ThemeModelType } from 'os/services/theme.model'; import { createDmForm } from './forms/chatForm'; import { useServices } from 'renderer/logic/store'; @@ -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) => { { mx={2} width="100%" className="realm-cursor-text-cursor" - placeholder="Add someone?" + placeholder="Who would you like to add?" value={patp} onChange={(e: any) => setPatp(e.target.value)} // onFocus={() => urbitId.actions.onFocus()} 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 = () => { > { { 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/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/Rooms/components/RoomRow.tsx b/app/src/renderer/apps/Rooms/components/RoomRow.tsx index 9edb519a81..bbe9b02f31 100644 --- a/app/src/renderer/apps/Rooms/components/RoomRow.tsx +++ b/app/src/renderer/apps/Rooms/components/RoomRow.tsx @@ -41,7 +41,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'; 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/Spaces/YouRow.tsx b/app/src/renderer/apps/Spaces/YouRow.tsx index 4911c285ea..5080272639 100644 --- a/app/src/renderer/apps/Spaces/YouRow.tsx +++ b/app/src/renderer/apps/Spaces/YouRow.tsx @@ -13,8 +13,6 @@ const Wrapper = styled(Box)` padding: 12px; height: 70px; width: calc(100% + 24px); - /* background-color: var(--rlm-window-bg); */ - /* backdrop-filter: blur(24px); */ `; interface SpaceRowProps { colorTheme: string; diff --git a/app/src/renderer/apps/System/components/Account.tsx b/app/src/renderer/apps/System/components/Account.tsx index cbe0c7a524..12c32ced54 100644 --- a/app/src/renderer/apps/System/components/Account.tsx +++ b/app/src/renderer/apps/System/components/Account.tsx @@ -8,6 +8,7 @@ import { RadioGroup, Spinner, TextInput, + useToggle, } from '@holium/design-system'; import { Text, @@ -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(); @@ -141,7 +141,6 @@ const AccountPanelPresenter = () => { { {/* (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/apps/store.ts b/app/src/renderer/apps/store.ts index 7d70049d37..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 'os/types'; +import { Dimensions } from '@holium/design-system'; const TrayAppCoords = types.model({ left: types.number, 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/components/CopyButton.tsx b/app/src/renderer/components/CopyButton.tsx index cb37e6f738..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 'renderer/logic/lib/useToggle'; +import { Box, Icon, useToggle } from '@holium/design-system'; interface CopyButtonProps { content: string; @@ -19,10 +18,10 @@ export const CopyButton = ({ content, size = 2 }: CopyButtonProps) => { {!copied.isOn ? ( - + ) : ( - + )} ); 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/components/People/usePassportMenu.tsx b/app/src/renderer/components/People/usePassportMenu.tsx index 78b16d7da8..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, @@ -11,8 +11,6 @@ import { useServices } from 'renderer/logic/store'; import { Menu } from '../Menu'; import { PassportCard } from './PassportCard'; -type AnchorPoint = { x: number; y: number }; - type PassportMenuOptions = { patp: string; sigilColor?: string | null; @@ -23,7 +21,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..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 'os/types'; +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 b53b1540b8..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 'os/types'; +import { Dimensions, Position } from '@holium/design-system'; export const calculateAnchorPoint = ( event: any, diff --git a/app/src/renderer/logic/theme.ts b/app/src/renderer/logic/theme.ts index 9fe5185b31..28ed9ee186 100644 --- a/app/src/renderer/logic/theme.ts +++ b/app/src/renderer/logic/theme.ts @@ -8,50 +8,78 @@ 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) => { - // console.log(toJS(theme)); + /** + * 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(rgba(theme.textColor, 0.7)); + const mouseColor = toRgbaString(theme.mouseColor); + const intentAlertColor = toRgbaString('#ff6240'); + const intentCautionColor = toRgbaString('#ffbc32'); + const intentSuccessColor = toRgbaString('#0fc383'); + 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 { - --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-dock-color: ${rgba(theme.windowColor, 0.75)}; - --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}; - --rlm-intent-alert-color: #ff6240; - --rlm-intent-caution-color: #ffbc32; - --rlm-intent-success-color: #0fc383; - --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-overlay-hover: rgba(0, 0, 0, 0.05); - --rlm-overlay-active: rgba(0, 0, 0, 0.09); - } - - 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 = @@ -139,9 +167,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; @@ -161,11 +189,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/auth/login/ResetCodeDialog.tsx b/app/src/renderer/system/auth/login/ResetCodeDialog.tsx index 219230fe05..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 'renderer/logic/lib/useToggle'; import { DialogConfig } from 'renderer/system/dialog/dialogs'; import { normalizeBounds } from 'os/services/shell/lib/window-manager'; import { ShellActions } from 'renderer/logic/actions/shell'; @@ -161,10 +161,10 @@ const ResetCodeDialogPresenter = ({ ship, password }: ResetCodeProps) => { {saveShipCodeResult === 'success' && ( )} 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/components/AppWindow/AppWindow.tsx b/app/src/renderer/system/desktop/components/AppWindow/AppWindow.tsx index 3a3817ff32..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 'renderer/logic/lib/useToggle'; +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/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 33723b70b5..9d4b439cca 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 'renderer/logic/lib/useToggle'; +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'; 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/desktop/components/SystemBar/components/ShipBar/MessagesTray/index.tsx b/app/src/renderer/system/desktop/components/SystemBar/components/ShipBar/MessagesTray/index.tsx index 6028757f30..bc77d36612 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 @@ -38,7 +38,6 @@ const MessagesTrayPresenter = () => { return ( { diff --git a/app/src/renderer/system/onboarding/AddShip.dialog.tsx b/app/src/renderer/system/onboarding/AddShip.dialog.tsx index d7a3f11995..e1ce6523bc 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, + 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 'renderer/logic/lib/useToggle'; -import { Button, Icon, TextInput } from '@holium/design-system'; const AddShipPresenter = (props: BaseDialogProps) => { const { theme, onboarding } = useServices(); 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/InstallAgent.dialog.tsx b/app/src/renderer/system/onboarding/InstallAgent.dialog.tsx index 239510c645..0df0b0853d 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, + useToggle, +} from '@holium/design-system'; const InstallAgentPresenter = () => { const { onboarding } = useServices(); 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/onboarding/ViewCode.dialog.tsx b/app/src/renderer/system/onboarding/ViewCode.dialog.tsx index cbae6c2a20..1030747234 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, + useToggle, +} from '@holium/design-system'; const ViewCodePresenter = () => { const { theme } = useServices(); 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/desks/realm/desk.docket-0 b/desks/realm/desk.docket-0 index d4d758bf82..5dcd4bf0ed 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 - version+[0 1 2] + info+'A desktop environment for DAOs and communities.' + color+0xfe.9c4f + 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] + image+'https://holium-app-globs.nyc3.cdn.digitaloceanspaces.com/realm%2Frealm.svg' + glob-http+['https://holium-app-globs.nyc3.cdn.digitaloceanspaces.com/realm%2Fholium-com-redirect.glob' 0v4.39m1m.t5rlt.d94cv.akdr1.389ub] == 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' 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/.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..3abeac5b4d 100644 --- a/lib/design-system/README.md +++ b/lib/design-system/README.md @@ -1,37 +1,8 @@ # @holium/design-system -## Dev setup +A component library for Realm apps with built-in space theming. -``` -yarn -yarn storybook -``` -## Directory structure +## Support -``` -/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. +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/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 407fd42b60..d17aad83b4 100644 --- a/lib/design-system/package.json +++ b/lib/design-system/package.json @@ -1,9 +1,10 @@ { "name": "@holium/design-system", - "version": "0.1.2", - "description": "A component library for Realm.", + "version": "0.2.0", + "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": { @@ -16,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", @@ -40,5 +40,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" + ] } diff --git a/lib/design-system/src/blocks/Block/Block.tsx b/lib/design-system/src/blocks/Block/Block.tsx index e967989396..68f52d7e6e 100644 --- a/lib/design-system/src/blocks/Block/Block.tsx +++ b/lib/design-system/src/blocks/Block/Block.tsx @@ -54,9 +54,10 @@ export const BlockStyle = styled(motion.span)` align-items: flex-start; padding: 6px; backdrop-filter: brightness(95%) blur(6px); - color: var(--rlm-text-color) !important; + gap: 6px; + color: rgba(var(--rlm-text-rgba)) !important; ${Text.Custom} { - color: var(--rlm-text-color) !important; + color: rgba(var(--rlm-text-rgba)) !important; } border-radius: var(--rlm-border-radius-9); width: ${(props) => (props.width ? `${props.width}px` : 'initial')}; @@ -102,7 +103,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 d3c3822c2d..0f691184b0 100644 --- a/lib/design-system/src/blocks/Bubble/Bubble.styles.tsx +++ b/lib/design-system/src/blocks/Bubble/Bubble.styles.tsx @@ -24,8 +24,8 @@ export const BubbleStyle = styled(Box)` padding: 8px; min-width: 150px; max-width: 100%; - color: var(--rlm-text-color); - background: var(--rlm-input-color); + color: rgba(var(--rlm-text-rgba)); + background: rgba(var(--rlm-input-rgba)); border-radius: ${(props) => { if (props.isPrevGrouped && props.isNextGrouped) { return '0px 12px 12px 0px'; @@ -117,7 +117,7 @@ export const BubbleAuthor = styled(Text.Custom)<{ authorColor?: string }>` font-size: 12px; font-weight: 500; user-select: text; - 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 a82d99e243..a3f448fdbd 100644 --- a/lib/design-system/src/blocks/Bubble/Reaction.tsx +++ b/lib/design-system/src/blocks/Bubble/Reaction.tsx @@ -1,4 +1,5 @@ import { useState, useMemo, useEffect } from 'react'; +import { AnimatePresence } from 'framer-motion'; import styled, { css } from 'styled-components'; import { Flex, Box, Icon, Text, Menu } from '../..'; import EmojiPicker, { @@ -83,7 +84,17 @@ export const ReactionButton = styled(Box)` box-shadow: ${({ selected }) => selected ? 'inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1)' - : 'inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15)'}; + : 'inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15)'}; + + /* TODO merged from master */ + /* background: ${({ selected }) => + selected ? 'rgba(var(--rlm-accent-rgba))' : 'rgba(var(--rlm-input-rgba))'}; + filter: ${({ selected }) => (selected ? 'brightness(1.3)' : 'brightness(1)')}; + border: ${({ selected }) => + selected + ? '1px solid rgba(var(--rlm-accent-rgba))' + : '1px solid rgba(var(--rlm-window-rgba))'}; */ + border-radius: 16px; transition: var(--transition); ${({ size, selected, isOur }) => @@ -95,6 +106,7 @@ export const ReactionButton = styled(Box)` font-size: ${FontSizes[size]}px; ${selected && !isOur && 'color: var(--rlm-text-color);'} ${selected && isOur && 'color: #FFF;'} + /* ${selected && 'color: rgba(var(--rlm-accent-rgba));'} */ } ` : css` @@ -177,8 +189,13 @@ export const Reactions = (props: ReactionProps) => { reactions = [], onReaction, } = props; +<<<<<<< HEAD const [isReacting, setIsReacting] = useState(defaultIsOpen); const reactIds = reactions.map((r) => r.msgId); +======= + const [isReacting, setIsReacting] = useState(false); + const [anchorPoint, setAnchorPoint] = useState(null); +>>>>>>> master const reactionsAggregated = useMemo(() => { if (reactions.length === 0) { diff --git a/lib/design-system/src/blocks/Bubble/fragment-lib.tsx b/lib/design-system/src/blocks/Bubble/fragment-lib.tsx index 51aa5ad886..3808506f4d 100644 --- a/lib/design-system/src/blocks/Bubble/fragment-lib.tsx +++ b/lib/design-system/src/blocks/Bubble/fragment-lib.tsx @@ -20,10 +20,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'; @@ -96,13 +93,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)); } `; @@ -113,14 +110,14 @@ 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; } `; @@ -138,7 +135,7 @@ export const CodeWrapper = styled(Flex)` padding: 6px 8px; width: 100%; ${Text.Custom} { - color: var(--rlm-text-color) !important; + color: rgba(var(--rlm-text-rgba)) !important; } `; @@ -162,15 +159,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: 6px; padding-right: 8px; border-radius: 3px; @@ -214,7 +211,7 @@ export const FragmentBlockquote = styled(motion.blockquote)` justify-content: flex-start; align-items: center; margin: 0; - background: var(--rlm-overlay-hover); + background: rgba(var(--rlm-overlay-hover-rgba)); ${FragmentImage} { border-radius: 2px; height: 36px !important; @@ -222,6 +219,7 @@ export const FragmentBlockquote = styled(motion.blockquote)` } &:hover:not([disabled]) { transition: var(--transition); + background-color: rgba(var(--rlm-overlay-active-rgba)); cursor: pointer; } `; diff --git a/lib/design-system/src/blocks/LinkBlock/LinkBlock.tsx b/lib/design-system/src/blocks/LinkBlock/LinkBlock.tsx index db8ffba112..29eeb2667f 100644 --- a/lib/design-system/src/blocks/LinkBlock/LinkBlock.tsx +++ b/lib/design-system/src/blocks/LinkBlock/LinkBlock.tsx @@ -31,7 +31,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 eb3cb59feb..811281737e 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 1dae79e374..9400f98207 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, { css } from 'styled-components'; -import { darken, rgba } from 'polished'; +import styled from 'styled-components'; 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'; @@ -124,13 +123,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: var(--rlm-accent-color); + background-color: rgba(var(--rlm-accent-rgba)); + filter: brightness(1.1); } &:active:not([disabled]) { - background-color: var(--rlm-accent-color); + background-color: rgba(var(--rlm-accent-rgba)); + filter: brightness(1.2); } svg { fill: #ffffff; @@ -138,44 +139,46 @@ const Primary = styled(Base)` `; const Secondary = styled(Base)` - color: var(--rlm-text-color); - background-color: var(--rlm-window-color); + color: rgba(var(--rlm-text-rgba)); + background-color: rgba(var(--rlm-window-rgba)); filter: brightness(0.975); &:hover:not([disabled]) { - background-color: var(--rlm-window-color); - filter: brightness(0.965); + background-color: rgba(var(--rlm-window-rgba)); + filter: brightness(0.975); } &:active:not([disabled]) { - background-color: var(--rlm-window-color); - filter: brightness(0.95); + background-color: rgba(var(--rlm-window-rgba)); + 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)); + filter: brightness(0.975); } &:active:not([disabled]) { - background-color: ${() => darken(0.05, getVar('window'))}; + background-color: rgba(var(--rlm-window-rgba)); + filter: brightness(0.95); } svg { - fill: var(--rlm-text-color); + fill: rgba(var(--rlm-text-rgba)); } `; @@ -186,29 +189,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)); } `; @@ -228,19 +231,19 @@ const IconButton = styled(Base)` props.isSelected ? 'var(--rlm-overlay-active)' : '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 ad45545237..f24ca96746 100644 --- a/lib/design-system/src/general/Card/Card.tsx +++ b/lib/design-system/src/general/Card/Card.tsx @@ -19,8 +19,11 @@ export const Card = styled(Box)` margin-top: 1px; flex-direction: column; backdrop-filter: var(--blur); - background-color: ${(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; ${(props: CardProps) => css` display: ${props.fill ? 'flex' : 'inline-flex'}; box-shadow: ${elevation[props.elevation || 0]}; diff --git a/lib/design-system/src/general/CommButton/CommButton.styles.tsx b/lib/design-system/src/general/CommButton/CommButton.styles.tsx index 65bd676e5e..6c8e0f9e9f 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}; + filter: brightness(0.975); } `; diff --git a/lib/design-system/src/general/Icon/Icon.tsx b/lib/design-system/src/general/Icon/Icon.tsx index 3a2dffe090..1f42fc059c 100644 --- a/lib/design-system/src/general/Icon/Icon.tsx +++ b/lib/design-system/src/general/Icon/Icon.tsx @@ -12,84 +12,58 @@ 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 { ColorVariants } from '../../util/colors'; export type IconProps = BoxProps & SpaceProps & - Omit & LayoutProps & TypographyProps & WidthProps & - HeightProps; + HeightProps & { + fill?: ColorVariants; + }; const SvgComponent = forwardRef< SVGSVGElement, SVGMotionProps & { name: IconPathsType; title?: string; - color?: ColorVariants; - iconColor?: string; - /* SVGs as CSS background-images don't support the #hex format. */ - isBackgroundImage?: boolean; + onClick?: () => void; } ->( - ( - { - title, - name, - width, - height, - color, - iconColor, - isBackgroundImage, - ...rest - }, - svgRef - ) => { - const [titleId] = useState(() => (title ? uuid() : undefined)); - - const svgSafeColor = - iconColor || - (color - ? isBackgroundImage - ? hexToSvgSafeColor(getVar(color)) - : getVar(color) - : 'currentcolor'); +>(({ title, name, width, height, onClick, ...rest }, svgRef) => { + const [titleId] = useState(() => (title ? uuid() : undefined)); - return ( - - {title ? {title} : null} - {/* @ts-expect-error */} - {paths[name]} - - ); - } -); + return ( + + {title ? {title} : null} + {/* @ts-ignore */} + {paths[name]} + + ); +}); SvgComponent.displayName = 'SvgComponent'; export const Icon = styled(SvgComponent)` flex: none; vertical-align: middle; - ${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/general/MenuItem/MenuItem.styles.tsx b/lib/design-system/src/general/MenuItem/MenuItem.styles.tsx index 54d73a79c4..bde0d91442 100644 --- a/lib/design-system/src/general/MenuItem/MenuItem.styles.tsx +++ b/lib/design-system/src/general/MenuItem/MenuItem.styles.tsx @@ -1,11 +1,8 @@ import { HTMLAttributes, ReactNode } from 'react'; -import { darken, rgba } from 'polished'; import styled, { css } from 'styled-components'; -import { getVar } from '../../util/colors'; type MenuItemStyleProps = { children: ReactNode; - color?: string; customBg?: string; selected?: boolean; disabled?: boolean; @@ -24,12 +21,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; @@ -39,18 +36,10 @@ export const MenuItemStyle = styled.li` } `} - ${({ color, disabled }) => - color && - css` - 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))'}; + 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 13b74dc5af..67723b1851 100644 --- a/lib/design-system/src/general/Row/Row.tsx +++ b/lib/design-system/src/general/Row/Row.tsx @@ -26,24 +26,23 @@ export const Row = styled(Box)` appearance: none; flex-basis: initial; 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 { @@ -65,9 +64,9 @@ export const Row = styled(Box)` `} ${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/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; diff --git a/lib/design-system/src/general/Text/Text.tsx b/lib/design-system/src/general/Text/Text.tsx index 127330bf4b..6e00a04320 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; @@ -136,7 +133,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; user-select: text; 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 b7dde7ae6b..ebc5cf8d5b 100644 --- a/lib/design-system/src/general/index.ts +++ b/lib/design-system/src/general/index.ts @@ -1,4 +1,6 @@ +<<<<<<< HEAD export { CellMeasurer } from './WindowedList/source/CellMeasurer/CellMeasurer'; +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/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..f5cd0d4012 100644 --- a/lib/design-system/src/input/CheckBox/CheckBox.tsx +++ b/lib/design-system/src/input/CheckBox/CheckBox.tsx @@ -1,8 +1,7 @@ -import { renderToString } from 'react-dom/server'; -import { CheckBoxInput } from './CheckBox.styles'; 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; @@ -21,26 +20,30 @@ export const CheckBox = ({ defaultChecked, onChange, }: 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(); + onChange?.(); + }; return ( - + + {toggled.isOn ? ( + + ) : ( + + )} + + {title && ( ` position: relative; - border: 1px solid var(--rlm-border-color); - background-color: var(--rlm-input-color); - overflow: hidden; + border-radius: var(--rlm-border-radius-6); + border: 1px solid rgba(var(--rlm-border-rgba)); + background-color: rgba(var(--rlm-input-rgba)); min-height: 32px; box-sizing: content-box; @@ -30,7 +30,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; } @@ -42,8 +42,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; @@ -71,7 +71,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 { @@ -82,13 +82,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..84f1de5020 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)); + 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)); + 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/RadioList/RadioList.tsx b/lib/design-system/src/input/RadioList/RadioList.tsx index 11642d09bc..1dfb48e37e 100644 --- a/lib/design-system/src/input/RadioList/RadioList.tsx +++ b/lib/design-system/src/input/RadioList/RadioList.tsx @@ -28,7 +28,7 @@ export const RadioList = ({ options, selected, onClick }: Props) => ( 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.styles.tsx b/lib/design-system/src/input/Select/Select.styles.tsx index a77f7d2648..942d5daf10 100644 --- a/lib/design-system/src/input/Select/Select.styles.tsx +++ b/lib/design-system/src/input/Select/Select.styles.tsx @@ -19,15 +19,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; @@ -45,9 +45,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 { @@ -65,8 +65,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 4d542bc6a5..100e156e3c 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: { @@ -104,7 +103,7 @@ export const Select = ({ {placeholder} )} - + ( !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/RoomsDock/RoomsDockControls.tsx b/lib/design-system/src/os/RoomsDock/RoomsDockControls.tsx index 02b777c736..f3572ff6e9 100644 --- a/lib/design-system/src/os/RoomsDock/RoomsDockControls.tsx +++ b/lib/design-system/src/os/RoomsDock/RoomsDockControls.tsx @@ -29,7 +29,7 @@ export const RoomsDockControls = ({ alignItems="center" justifyContent="center" > - + ); @@ -52,7 +52,7 @@ export const RoomsDockControls = ({ }} > 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 70f152ff41..1625f2604c 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 01b397d605..bd884ca752 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,17 +53,17 @@ 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)})); `} `; diff --git a/app/src/renderer/logic/lib/useToggle.ts b/lib/design-system/src/util/hooks.ts similarity index 100% rename from app/src/renderer/logic/lib/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/lib/design-system/src/util/types.ts b/lib/design-system/src/util/types.ts new file mode 100644 index 0000000000..2eb6db6d84 --- /dev/null +++ b/lib/design-system/src/util/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/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..1367e6ea50 100644 --- a/lib/presence/package.json +++ b/lib/presence/package.json @@ -1,9 +1,10 @@ { "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 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/presence/src/types.ts b/lib/presence/src/types.ts index bcae966ab5..159e5855ea 100644 --- a/lib/presence/src/types.ts +++ b/lib/presence/src/types.ts @@ -1,7 +1,6 @@ +import { Position } from '@holium/design-system'; import { PresenceArg } from './hooks/useBroadcast'; -type Position = { x: number; y: number }; - export type MouseState = 'text' | 'resize' | 'pointer'; type MultiplayerEvent = 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": { diff --git a/package.json b/package.json index ef9c6711bd..aca4cbd851 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", @@ -62,6 +63,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/shared/src/index.ts b/shared/src/index.ts new file mode 100644 index 0000000000..cb0ff5c3b5 --- /dev/null +++ b/shared/src/index.ts @@ -0,0 +1 @@ +export {}; 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 0015139adb..a850c6713e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2524,6 +2524,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"