cinny/src/colors.css.ts
Ajay Bura 0b06bed1db
Refactor state & Custom editor (#1190)
* Fix eslint

* Enable ts strict mode

* install folds, jotai & immer

* Enable immer map/set

* change cross-signing alert anim to 30 iteration

* Add function to access matrix client

* Add new types

* Add disposable util

* Add room utils

* Add mDirect list atom

* Add invite list atom

* add room list atom

* add utils for jotai atoms

* Add room id to parents atom

* Add mute list atom

* Add room to unread atom

* Use hook to bind atoms with sdk

* Add settings atom

* Add settings hook

* Extract set settings hook

* Add Sidebar components

* WIP

* Add bind atoms hook

* Fix init muted room list atom

* add navigation atoms

* Add custom editor

* Fix hotkeys

* Update folds

* Add editor output function

* Add matrix client context

* Add tooltip to editor toolbar items

* WIP - Add editor to room input

* Refocus editor on toolbar item click

* Add Mentions - WIP

* update folds

* update mention focus outline

* rename emoji element type

* Add auto complete menu

* add autocomplete query functions

* add index file for editor

* fix bug in getPrevWord function

* Show room mention autocomplete

* Add async search function

* add use async search hook

* use async search in room mention autocomplete

* remove folds prefer font for now

* allow number array in async search

* reset search with empty query

* Autocomplete unknown room mention

* Autocomplete first room mention on tab

* fix roomAliasFromQueryText

* change mention color to primary

* add isAlive hook

* add getMxIdLocalPart to mx utils

* fix getRoomAvatarUrl size

* fix types

* add room members hook

* fix bug in room mention

* add user mention autocomplete

* Fix async search giving prev result after no match

* update folds

* add twemoji font

* add use state provider hook

* add prevent scroll with arrow key util

* add ts to custom-emoji and emoji files

* add types

* add hook for emoji group labels

* add hook for emoji group icons

* add emoji board with basic emoji

* add emojiboard in room input

* select multiple emoji with shift press

* display custom emoji in emojiboard

* Add emoji preview

* focus element on hover

* update folds

* position emojiboard properly

* convert recent-emoji.js to ts

* add use recent emoji hook

* add io.element.recent_emoji to account data evt

* Render recent emoji in emoji board

* show custom emoji from parent spaces

* show room emoji

* improve emoji sidebar

* update folds

* fix pack avatar and name fallback in emoji board

* add stickers to emoji board

* fix bug in emoji preview

* Add sticker icon in room input

* add debounce hook

* add search in emoji board

* Optimize emoji board

* fix emoji board sidebar divider

* sync emojiboard sidebar with scroll & update ui

* Add use throttle hook

* support custom emoji in editor

* remove duplicate emoji selection function

* fix emoji and mention spacing

* add emoticon autocomplete in editor

* fix string

* makes emoji size relative to font size in editor

* add option to render link element

* add spoiler in editor

* fix sticker in emoji board search using wrong type

* render custom placeholder

* update hotkey for block quote and block code

* add terminate search function in async search

* add getImageInfo to matrix utils

* send stickers

* add resize observer hook

* move emoji board component hooks in hooks dir

* prevent editor expand hides room timeline

* send typing notifications

* improve emoji style and performance

* fix imports

* add on paste param to editor

* add selectFile utils

* add file picker hook

* add file paste handler hook

* add file drop handler

* update folds

* Add file upload card

* add bytes to size util

* add blurHash util

* add await to js lib

* add browser-encrypt-attachment types

* add list atom

* convert mimetype file to ts

* add matrix types

* add matrix file util

* add file related dom utils

* add common utils

* add upload atom

* add room input draft atom

* add upload card renderer component

* add upload board component

* add support for file upload in editor

* send files with message / enter

* fix circular deps

* store editor toolbar state in local store

* move msg content util to separate file

* store msg draft on room switch

* fix following member not updating on msg sent

* add theme for folds component

* fix system default theme

* Add reply support in editor

* prevent initMatrix to init multiple time

* add state event hooks

* add async callback hook

* Show tombstone info for tombstone room

* fix room tombstone component border

* add power level hook

* Add room input placeholder component

* Show input placeholder for muted member
2023-06-12 16:45:23 +05:30

238 lines
5.1 KiB
TypeScript

import { createTheme } from '@vanilla-extract/css';
import { color } from 'folds';
export const silverTheme = createTheme(color, {
Background: {
Container: '#E6E6E6',
ContainerHover: '#DADADA',
ContainerActive: '#CECECE',
ContainerLine: '#C2C2C2',
OnContainer: '#000000',
},
Surface: {
Container: '#F2F2F2',
ContainerHover: '#E6E6E6',
ContainerActive: '#DADADA',
ContainerLine: '#CECECE',
OnContainer: '#000000',
},
SurfaceVariant: {
Container: '#E6E6E6',
ContainerHover: '#DADADA',
ContainerActive: '#CECECE',
ContainerLine: '#C2C2C2',
OnContainer: '#000000',
},
Primary: {
Main: '#1858D5',
MainHover: '#164FC0',
MainActive: '#144BB5',
MainLine: '#1346AA',
OnMain: '#FFFFFF',
Container: '#E8EEFB',
ContainerHover: '#DCE6F9',
ContainerActive: '#D1DEF7',
ContainerLine: '#C5D5F5',
OnContainer: '#113E95',
},
Secondary: {
Main: '#000000',
MainHover: '#0C0C0C',
MainActive: '#181818',
MainLine: '#303030',
OnMain: '#F2F2F2',
Container: '#CECECE',
ContainerHover: '#C2C2C2',
ContainerActive: '#B5B5B5',
ContainerLine: '#A9A9A9',
OnContainer: '#0C0C0C',
},
Success: {
Main: '#00844C',
MainHover: '#007744',
MainActive: '#007041',
MainLine: '#006A3D',
OnMain: '#FFFFFF',
Container: '#E5F3ED',
ContainerHover: '#D9EDE4',
ContainerActive: '#CCE6DB',
ContainerLine: '#BFE0D2',
OnContainer: '#005C35',
},
Warning: {
Main: '#A85400',
MainHover: '#974C00',
MainActive: '#8F4700',
MainLine: '#864300',
OnMain: '#FFFFFF',
Container: '#F6EEE5',
ContainerHover: '#F2E5D9',
ContainerActive: '#EEDDCC',
ContainerLine: '#E9D4BF',
OnContainer: '#763B00',
},
Critical: {
Main: '#C40E0E',
MainHover: '#AC0909',
MainActive: '#A60C0C',
MainLine: '#9C0B0B',
OnMain: '#FFFFFF',
Container: '#F9E7E7',
ContainerHover: '#F6DBDB',
ContainerActive: '#F3CFCF',
ContainerLine: '#F0C3C3',
OnContainer: '#890A0A',
},
Other: {
FocusRing: 'rgba(0 0 0 / 50%)',
Shadow: 'rgba(0 0 0 / 20%)',
Overlay: 'rgba(0 0 0 / 50%)',
},
});
const darkThemeData = {
Background: {
Container: '#15171A',
ContainerHover: '#1F2326',
ContainerActive: '#2A2E33',
ContainerLine: '#343A40',
OnContainer: '#ffffff',
},
Surface: {
Container: '#1F2326',
ContainerHover: '#2A2E33',
ContainerActive: '#343A40',
ContainerLine: '#3F464D',
OnContainer: '#ffffff',
},
SurfaceVariant: {
Container: '#2A2E33',
ContainerHover: '#343A40',
ContainerActive: '#3F464D',
ContainerLine: '#495159',
OnContainer: '#ffffff',
},
Primary: {
Main: '#BDB6EC',
MainHover: '#B2AAE9',
MainActive: '#ADA3E8',
MainLine: '#A79DE6',
OnMain: '#2C2843',
Container: '#413C65',
ContainerHover: '#494370',
ContainerActive: '#50497B',
ContainerLine: '#575086',
OnContainer: '#E3E1F7',
},
Secondary: {
Main: '#D1E8FF',
MainHover: '#BCD1E5',
MainActive: '#B2C5D9',
MainLine: '#A7BACC',
OnMain: '#15171A',
Container: '#343A40',
ContainerHover: '#3F464D',
ContainerActive: '#495159',
ContainerLine: '#545D66',
OnContainer: '#C7DCF2',
},
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.6)',
},
};
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',
},
});