cinny/src/colors.css.ts
Ajay Bura 56b754153a
redesigned app settings and switch to rust crypto (#1988)
* rework general settings

* account settings - WIP

* add missing key prop

* add object url hook

* extract wide modal styles

* profile settings and image editor - WIP

* add outline style to upload card

* remove file param from bind upload atom hook

* add compact variant to upload card

* add  compact upload card renderer

* add option to update profile avatar

* add option to change profile displayname

* allow displayname change based on capabilities check

* rearrange settings components into folders

* add system notification settings

* add initial page param in settings

* convert account data hook to typescript

* add push rule hook

* add notification mode hook

* add notification mode switcher component

* add all messages notification settings options

* add special messages notification settings

* add keyword notifications

* add ignored users section

* improve ignore user list strings

* add about settings

* add access token option in about settings

* add developer tools settings

* add expand button to account data dev tool option

* update folds

* fix editable active element textarea check

* do not close dialog when editable element in focus

* add text area plugins

* add text area intent handler hook

* add newline intent mod in text area

* add next line hotkey in text area intent hook

* add syntax error position dom utility function

* add account data editor

* add button to send new account data in dev tools

* improve custom emoji plugin

* add more custom emojis hooks

* add text util css

* add word break in setting tile title and description

* emojis and sticker user settings - WIP

* view image packs from settings

* emoji pack editing - WIP

* add option to edit pack meta

* change saved changes message

* add image edit and delete controls

* add option to upload pack images and apply changes

* fix state event type when updating image pack

* lazy load pack image tile img

* hide upload image button when user can not edit pack

* add option to add or remove global image packs

* upgrade to rust crypto (#2168)

* update matrix js sdk

* remove dead code

* use rust crypto

* update setPowerLevel usage

* fix types

* fix deprecated isRoomEncrypted method uses

* fix deprecated room.currentState uses

* fix deprecated import/export room keys func

* fix merge issues in image pack file

* fix remaining issues in image pack file

* start indexedDBStore

* update package lock and vite-plugin-top-level-await

* user session settings - WIP

* add useAsync hook

* add password stage uia

* add uia flow matrix error hook

* add UIA action component

* add options to delete sessions

* add sso uia stage

* fix SSO stage complete error

* encryption - WIP

* update user settings encryption terminology

* add default variant to password input

* use password input in uia password stage

* add options for local backup in user settings

* remove typo in import local backup password input label

* online backup - WIP

* fix uia sso action

* move access token settings from about to developer tools

* merge encryption tab into sessions and rename it to devices

* add device placeholder tile

* add logout dialog

* add logout button for current device

* move other devices in component

* render unverified device verification tile

* add learn more section for current device verification

* add device verification status badge

* add info card component

* add index file for password input component

* add types for secret storage

* add component to access secret storage key

* manual verification - WIP

* update matrix-js-sdk to v35

* add manual verification

* use react query for device list

* show unverified tab on sidebar

* fix device list updates

* add session key details to current device

* render restore encryption backup

* fix loading state of restore backup

* fix unverified tab settings closes after verification

* key backup tile - WIP

* fix unverified tab badge

* rename session key to device key in device tile

* improve backup restore functionality

* fix restore button enabled after layout reload during restoring backup

* update backup info on status change

* add backup disconnection failures

* add device verification using sas

* restore backup after verification

* show option to logout on startup error screen

* fix key backup hook update on decryption key cached

* add option to enable device verification

* add device verification reset dialog

* add logout button in settings drawer

* add encrypted message lost on logout

* fix backup restore never finish with 0 keys

* fix setup dialog hides when enabling device verification

* show backup details in menu

* update setup device verification body copy

* replace deprecated method

* fix displayname appear as mxid in settings

* remove old refactored codes

* fix types
2025-02-10 16:49:47 +11:00

238 lines
5.1 KiB
TypeScript

import { createTheme } from '@vanilla-extract/css';
import { color } from 'folds';
export const silverTheme = createTheme(color, {
Background: {
Container: '#DEDEDE',
ContainerHover: '#D3D3D3',
ContainerActive: '#C7C7C7',
ContainerLine: '#BBBBBB',
OnContainer: '#000000',
},
Surface: {
Container: '#EAEAEA',
ContainerHover: '#DEDEDE',
ContainerActive: '#D3D3D3',
ContainerLine: '#C7C7C7',
OnContainer: '#000000',
},
SurfaceVariant: {
Container: '#DEDEDE',
ContainerHover: '#D3D3D3',
ContainerActive: '#C7C7C7',
ContainerLine: '#BBBBBB',
OnContainer: '#000000',
},
Primary: {
Main: '#1245A8',
MainHover: '#103E97',
MainActive: '#0F3B8F',
MainLine: '#0E3786',
OnMain: '#FFFFFF',
Container: '#C4D0E9',
ContainerHover: '#B8C7E5',
ContainerActive: '#ACBEE1',
ContainerLine: '#A0B5DC',
OnContainer: '#0D3076',
},
Secondary: {
Main: '#000000',
MainHover: '#171717',
MainActive: '#232323',
MainLine: '#2F2F2F',
OnMain: '#EAEAEA',
Container: '#C7C7C7',
ContainerHover: '#BBBBBB',
ContainerActive: '#AFAFAF',
ContainerLine: '#A4A4A4',
OnContainer: '#0C0C0C',
},
Success: {
Main: '#017343',
MainHover: '#01683C',
MainActive: '#016239',
MainLine: '#015C36',
OnMain: '#FFFFFF',
Container: '#BFDCD0',
ContainerHover: '#B3D5C7',
ContainerActive: '#A6CEBD',
ContainerLine: '#99C7B4',
OnContainer: '#01512F',
},
Warning: {
Main: '#864300',
MainHover: '#793C00',
MainActive: '#723900',
MainLine: '#6B3600',
OnMain: '#FFFFFF',
Container: '#E1D0BF',
ContainerHover: '#DBC7B2',
ContainerActive: '#D5BDA6',
ContainerLine: '#CFB499',
OnContainer: '#5E2F00',
},
Critical: {
Main: '#9D0F0F',
MainHover: '#8D0E0E',
MainActive: '#850D0D',
MainLine: '#7E0C0C',
OnMain: '#FFFFFF',
Container: '#E7C3C3',
ContainerHover: '#E2B7B7',
ContainerActive: '#DDABAB',
ContainerLine: '#D89F9F',
OnContainer: '#6E0B0B',
},
Other: {
FocusRing: 'rgba(0 0 0 / 50%)',
Shadow: 'rgba(0 0 0 / 20%)',
Overlay: 'rgba(0 0 0 / 50%)',
},
});
const darkThemeData = {
Background: {
Container: '#1A1A1A',
ContainerHover: '#262626',
ContainerActive: '#333333',
ContainerLine: '#404040',
OnContainer: '#F2F2F2',
},
Surface: {
Container: '#262626',
ContainerHover: '#333333',
ContainerActive: '#404040',
ContainerLine: '#4D4D4D',
OnContainer: '#F2F2F2',
},
SurfaceVariant: {
Container: '#333333',
ContainerHover: '#404040',
ContainerActive: '#4D4D4D',
ContainerLine: '#595959',
OnContainer: '#F2F2F2',
},
Primary: {
Main: '#BDB6EC',
MainHover: '#B2AAE9',
MainActive: '#ADA3E8',
MainLine: '#A79DE6',
OnMain: '#2C2843',
Container: '#413C65',
ContainerHover: '#494370',
ContainerActive: '#50497B',
ContainerLine: '#575086',
OnContainer: '#E3E1F7',
},
Secondary: {
Main: '#FFFFFF',
MainHover: '#E5E5E5',
MainActive: '#D9D9D9',
MainLine: '#CCCCCC',
OnMain: '#1A1A1A',
Container: '#404040',
ContainerHover: '#4D4D4D',
ContainerActive: '#595959',
ContainerLine: '#666666',
OnContainer: '#F2F2F2',
},
Success: {
Main: '#85E0BA',
MainHover: '#70DBAF',
MainActive: '#66D9A9',
MainLine: '#5CD6A3',
OnMain: '#0F3D2A',
Container: '#175C3F',
ContainerHover: '#1A6646',
ContainerActive: '#1C704D',
ContainerLine: '#1F7A54',
OnContainer: '#CCF2E2',
},
Warning: {
Main: '#E3BA91',
MainHover: '#DFAF7E',
MainActive: '#DDA975',
MainLine: '#DAA36C',
OnMain: '#3F2A15',
Container: '#5E3F20',
ContainerHover: '#694624',
ContainerActive: '#734D27',
ContainerLine: '#7D542B',
OnContainer: '#F3E2D1',
},
Critical: {
Main: '#E69D9D',
MainHover: '#E28D8D',
MainActive: '#E08585',
MainLine: '#DE7D7D',
OnMain: '#401C1C',
Container: '#602929',
ContainerHover: '#6B2E2E',
ContainerActive: '#763333',
ContainerLine: '#803737',
OnContainer: '#F5D6D6',
},
Other: {
FocusRing: 'rgba(255, 255, 255, 0.5)',
Shadow: 'rgba(0, 0, 0, 1)',
Overlay: 'rgba(0, 0, 0, 0.8)',
},
};
export const darkTheme = createTheme(color, darkThemeData);
export const butterTheme = createTheme(color, {
...darkThemeData,
Background: {
Container: '#1A1916',
ContainerHover: '#262621',
ContainerActive: '#33322C',
ContainerLine: '#403F38',
OnContainer: '#FFFBDE',
},
Surface: {
Container: '#262621',
ContainerHover: '#33322C',
ContainerActive: '#403F38',
ContainerLine: '#4D4B43',
OnContainer: '#FFFBDE',
},
SurfaceVariant: {
Container: '#33322C',
ContainerHover: '#403F38',
ContainerActive: '#4D4B43',
ContainerLine: '#59584E',
OnContainer: '#FFFBDE',
},
Secondary: {
Main: '#FFFBDE',
MainHover: '#E5E2C8',
MainActive: '#D9D5BD',
MainLine: '#CCC9B2',
OnMain: '#1A1916',
Container: '#403F38',
ContainerHover: '#4D4B43',
ContainerActive: '#59584E',
ContainerLine: '#666459',
OnContainer: '#F2EED3',
},
});