mirror of
https://github.com/enso-org/enso.git
synced 2024-12-11 14:35:56 +03:00
06b2280ee6
- Closes https://github.com/enso-org/cloud-v2/issues/610 - New user menu - Remove "go to profile" action that does not currently have an action, and does not exist in new design - Add placeholder icons for existing actions - Re-style "change password" modal to fit in with the design # Important Notes There are many differences from the design - none are visual differences though: - The list of actions is completely different - there are no menu entries in common between the design and the current - This also means that *all* current icons are placeholders. There are no appropriate icons in the "icons" Figma tab either. - The user icon is still a placeholder, as there is no backend support for user icons yet. - The user menu entries are highlighted on hover (not specified in the design), but to make this look nice, some of the padding has been moved from the outer container to the individual menu entries. - The menu entries use the same component as the context menu, so they *do* support shortcuts, and adding shortcuts to them will be very easy, *however* no shortcuts have been set for the new actions, because they are different from the actions in the Figma design (and so they don't have an official default shortcut)
153 lines
5.5 KiB
TypeScript
153 lines
5.5 KiB
TypeScript
/** @file Configuration for Tailwind. */
|
|
import * as path from 'node:path'
|
|
import * as url from 'node:url'
|
|
|
|
// =================
|
|
// === Constants ===
|
|
// =================
|
|
|
|
const THIS_PATH = path.resolve(path.dirname(url.fileURLToPath(import.meta.url)))
|
|
|
|
// =====================
|
|
// === Configuration ===
|
|
// =====================
|
|
|
|
// The names come from a third-party API and cannot be changed.
|
|
/* eslint-disable no-restricted-syntax, @typescript-eslint/naming-convention */
|
|
export const content = [THIS_PATH + '/src/**/*.tsx']
|
|
export const theme = {
|
|
extend: {
|
|
colors: {
|
|
/** The default color of all text. */
|
|
// This should be named "regular".
|
|
primary: 'rgba(0, 0, 0, 0.60)',
|
|
'not-selected': 'rgba(0, 0, 0, 0.40)',
|
|
'icon-selected': 'rgba(0, 0, 0, 0.50)',
|
|
'icon-not-selected': 'rgba(0, 0, 0, 0.30)',
|
|
chat: '#484848',
|
|
'ide-bg': '#ebeef1',
|
|
'ide-bg-dark': '#d0d3d6',
|
|
selected: 'rgba(255, 255, 255, 0.40)',
|
|
// Should be `#3e515f14`, but `bg-opacity` does not work with RGBA.
|
|
label: '#f0f1f3',
|
|
help: '#3f68ce',
|
|
invite: '#0e81d4',
|
|
cloud: '#0666be',
|
|
delete: 'rgba(243, 24, 10, 0.87)',
|
|
dim: 'rgba(0, 0, 0, 0.25)',
|
|
frame: 'rgba(255, 255, 255, 0.40)',
|
|
'frame-selected': 'rgba(255, 255, 255, 0.70)',
|
|
'tag-text': 'rgba(255, 255, 255, 0.90)',
|
|
'tag-text-2': 'rgba(0, 0, 0, 0.60)',
|
|
'permission-owner': 'rgba(236, 2, 2, 0.70)',
|
|
'permission-admin': 'rgba(252, 60, 0, 0.70)',
|
|
'permission-edit': 'rgba(255, 138, 0, 0.90)',
|
|
'permission-read': 'rgba(152, 174, 18, 0.80)',
|
|
'permission-docs': 'rgba(91, 8, 226, 0.64)',
|
|
'permission-exec': 'rgba(236, 2, 2, 0.70)',
|
|
'permission-view': 'rgba(0, 0, 0, 0.10)',
|
|
'call-to-action': '#fa6c08',
|
|
'black-a5': 'rgba(0, 0, 0, 0.05)',
|
|
'black-a10': 'rgba(0, 0, 0, 0.10)',
|
|
'black-a16': 'rgba(0, 0, 0, 0.16)',
|
|
'black-a30': 'rgba(0, 0, 0, 0.30)',
|
|
'black-a50': 'rgba(0, 0, 0, 0.50)',
|
|
'gray-350': '#b7bcc5',
|
|
},
|
|
fontSize: {
|
|
xs: '0.71875rem',
|
|
sm: '0.8125rem',
|
|
},
|
|
lineHeight: {
|
|
'170': '170%',
|
|
},
|
|
spacing: {
|
|
'0.75': '0.1875rem',
|
|
'1.75': '0.4375rem',
|
|
'2.25': '0.5625rem',
|
|
'3.25': '0.8125rem',
|
|
'4.75': '1.1875rem',
|
|
'5.5': '1.375rem',
|
|
'6.5': '1.625rem',
|
|
'9.5': '2.375rem',
|
|
'13': '3.25rem',
|
|
'18': '4.5rem',
|
|
'29': '7.25rem',
|
|
'30': '7.5rem',
|
|
'30.25': '7.5625rem',
|
|
'42': '10.5rem',
|
|
'51.5': '12.875rem',
|
|
'54': '13.5rem',
|
|
'57.5': '14.375rem',
|
|
'62': '15.5rem',
|
|
'70': '17.5rem',
|
|
'83.5': '20.875rem',
|
|
'98.25': '24.5625rem',
|
|
'112.5': '28.125rem',
|
|
'115.25': '28.8125rem',
|
|
'140': '35rem',
|
|
'10lh': '10lh',
|
|
},
|
|
minWidth: {
|
|
'20': '5rem',
|
|
'36': '9rem',
|
|
'40': '10rem',
|
|
'60': '15rem',
|
|
'80': '20rem',
|
|
'96': '24rem',
|
|
},
|
|
opacity: {
|
|
'1/3': '.33333333',
|
|
},
|
|
zIndex: {
|
|
'1': '1',
|
|
},
|
|
backdropBlur: {
|
|
xs: '2px',
|
|
},
|
|
borderWidth: { '0.5': '0.5px' },
|
|
boxShadow: {
|
|
soft: `0 0.5px 2.2px 0px #00000008, 0 1.2px 5.3px 0px #0000000b, \
|
|
0 2.3px 10px 0 #0000000e, 0 4px 18px 0 #00000011, 0 7.5px 33.4px 0 #00000014, \
|
|
0 18px 80px 0 #0000001c`,
|
|
'soft-dark': `0 0.5px 2.2px 0px #00000010, 0 1.2px 5.3px 0px #00000014, \
|
|
0 2.3px 10px 0 #0000001c, 0 4px 18px 0 #00000022, 0 7.5px 33.4px 0 #00000028, \
|
|
0 18px 80px 0 #00000038`,
|
|
'inset-t-lg': `inset 0 1px 1.4px -1.4px #00000002, \
|
|
inset 0 2.4px 3.4px -3.4px #00000003, inset 0 4.5px 6.4px -6.4px #00000004, \
|
|
inset 0 8px 11.4px -11.4px #00000005, inset 0 15px 21.3px -21.3px #00000006, \
|
|
inset 0 36px 51px -51px #00000014`,
|
|
'inset-b-lg': `inset 0 -1px 1.4px -1.4px #00000002, \
|
|
inset 0 -2.4px 3.4px -3.4px #00000003, inset 0 -4.5px 6.4px -6.4px #00000004, \
|
|
inset 0 -8px 11.4px -11.4px #00000005, inset 0 -15px 21.3px -21.3px #00000006, \
|
|
inset 0 -36px 51px -51px #00000014`,
|
|
'inset-v-lg': `inset 0 1px 1.4px -1.4px #00000002, \
|
|
inset 0 2.4px 3.4px -3.4px #00000003, inset 0 4.5px 6.4px -6.4px #00000004, \
|
|
inset 0 8px 11.4px -11.4px #00000005, inset 0 15px 21.3px -21.3px #00000006, \
|
|
inset 0 36px 51px -51px #00000014, inset 0 -1px 1.4px -1.4px #00000002, \
|
|
inset 0 -2.4px 3.4px -3.4px #00000003, inset 0 -4.5px 6.4px -6.4px #00000004, \
|
|
inset 0 -8px 11.4px -11.4px #00000005, inset 0 -15px 21.3px -21.3px #00000006, \
|
|
inset 0 -36px 51px -51px #00000014`,
|
|
},
|
|
animation: {
|
|
'spin-ease': 'spin cubic-bezier(0.67, 0.33, 0.33, 0.67) 1.5s infinite',
|
|
},
|
|
transitionProperty: {
|
|
width: 'width',
|
|
'stroke-dasharray': 'stroke-dasharray',
|
|
'grid-template-rows': 'grid-template-rows',
|
|
},
|
|
transitionDuration: {
|
|
'5000': '5000ms',
|
|
'90000': '90000ms',
|
|
},
|
|
gridTemplateRows: {
|
|
'0fr': '0fr',
|
|
'1fr': '1fr',
|
|
},
|
|
gridTemplateColumns: {
|
|
'fill-60': 'repeat(auto-fill, minmax(15rem, 1fr))',
|
|
},
|
|
},
|
|
}
|