studio/meet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄(front) enhance ui first shot

Browse Source 
Based on recent sketches, we decided to implement the new ui. This is
a first shot, more will be coming next.
This commit is contained in:
Nathan Vasse
2024-11-22 17:08:09 +01:00
parent c4206b4b24
commit 0958206057
35 changed files with 6460 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/frontend/panda.config.ts
View File

@@ -93,6 +93,66 @@ const config: Config = {
* This way we'll only add the things we need step by step and prevent using lots of differents things.
*/
...pandaPreset.theme.tokens,
colors: defineTokens.colors({
...pandaPreset.theme.tokens.colors,
primaryDark: {
50: { value: '#1B1B35' },
100: { value: '#2B2B5B' },
200: { value: '#3B3B81' },
300: { value: '#4A4AA8' },
400: { value: '#5A5ACE' },
500: { value: '#6A6AF4' },
600: { value: '#8585F6' },
700: { value: '#CACAFB' },
800: { value: '#E3E3FB' },
900: { value: '#ECECFE' },
950: { value: '#F5F5FE' },
action: { value: '#C1C1FB' },
},
primary: {
50: { value: '#F5F5FE' },
100: { value: '#ECECFE' },
200: { value: '#E3E3FB' },
300: { value: '#CACAFB' },
400: { value: '#8585F6' },
500: { value: '#6A6AF4' },
600: { value: '#313178' },
700: { value: '#272747' },
800: { value: '#000091' },
900: { value: '#21213F' },
950: { value: '#1B1B35' },
action: { value: '#1212FF' },
},
greyscale: {
'000': { value: '#FFFFFF' },
50: { value: '#F6F6F6' },
100: { value: '#EEEEEE' },
200: { value: '#E5E5E5' },
250: { value: '#DDDDDD' },
300: { value: '#CECECE' },
400: { value: '#929292' },
500: { value: '#7C7C7C' },
600: { value: '#666666' },
700: { value: '#3A3A3A' },
750: { value: '#353535' },
800: { value: '#2A2A2A' },
900: { value: '#242424' },
950: { value: '#1E1E1E' },
1000: { value: '#161616' },
},
error: {
100: {value: '#391C1C'},
200: {value: '#412121'},
300: {value: '#642626'},
400: {value: '#CE0500'},
500: {value: '#F60700'},
600: {value: '#FF5655'},
700: {value: '#FFBDBD'},
800: {value: '#FFDDDD'},
900: {value: '#FFE9E9'},
950: {value: '#FFF4F4'},
}
}),
animations: {},
blurs: {},
/* just directly use values as tokens. This allows us to follow a specific design scale,
@@ -194,7 +254,7 @@ const config: Config = {
semanticTokens: defineSemanticTokens({
colors: {
default: {
text: { value: '{colors.gray.900}' },
text: { value: '{colors.greyscale.1000}' },
bg: { value: 'white' },
subtle: { value: '{colors.gray.100}' },
'subtle-text': { value: '{colors.gray.600}' },