mirror of
https://github.com/AppFlowy-IO/AppFlowy-Web.git
synced 2025-08-06 19:20:25 +08:00
15ec240887
* chore: import new ui system * chore: modified padding and rounded * chore: remove vertical padding * chore: add shadow * chore: add shadcn popover (#76) * chore: add circle progress (#77) * chore: add input (#78) * feat: add shadcn toast (#80) * chore: initial import * chore: style * chore: important * chore: add dropdown menu (#81) * feat: add shadcn tooltip (#79) * chore: initial import * chore: style * chore: fix text size * chore: add tooltip shortcut * chore: code cleanup and add flex col * chore: add avatar (#82) * chore: add dialog (#83) --------- Co-authored-by: Richard Shiue <71320345+richardshiue@users.noreply.github.com>
116 lines
3.3 KiB
JavaScript
116 lines
3.3 KiB
JavaScript
const newColors = require('./new-colors.cjs');
|
|
|
|
module.exports = {
|
|
'bg': {
|
|
'selection': 'var(--bg-selection)',
|
|
'body': 'var(--bg-body)',
|
|
'base': 'var(--bg-base)',
|
|
'mask': 'var(--bg-mask)',
|
|
'tips': 'var(--bg-tips)',
|
|
'brand': 'var(--bg-brand)',
|
|
'header': 'var(--bg-header)',
|
|
'footer': 'var(--bg-footer)',
|
|
},
|
|
|
|
'line': {
|
|
'border': 'var(--line-border)',
|
|
'divider': 'var(--line-divider)',
|
|
'default': 'var(--line-default)',
|
|
'on-toolbar': 'var(--line-on-toolbar)',
|
|
'card': 'var(--line-card)',
|
|
},
|
|
'content': {
|
|
'blue-400': 'var(--content-blue-400)',
|
|
'blue-300': 'var(--content-blue-300)',
|
|
'blue-600': 'var(--content-blue-600)',
|
|
'blue-700': 'var(--content-blue-700)',
|
|
'blue-800': 'var(--content-blue-800)',
|
|
'blue-900': 'var(--content-blue-900)',
|
|
'blue-100': 'var(--content-blue-100)',
|
|
'blue-200': 'var(--content-blue-200)',
|
|
'blue-50': 'var(--content-blue-50)',
|
|
'on-fill-hover': 'var(--content-on-fill-hover)',
|
|
'on-fill': 'var(--content-on-fill)',
|
|
'on-tag': 'var(--content-on-tag)',
|
|
},
|
|
'function': {
|
|
'error': 'var(--function-error)',
|
|
'error-hover': 'var(--function-error-hover)',
|
|
'warning': 'var(--function-warning)',
|
|
'warning-hover': 'var(--function-warning-hover)',
|
|
'success': 'var(--function-success)',
|
|
'success-hover': 'var(--function-success-hover)',
|
|
'info': 'var(--function-info)',
|
|
},
|
|
'tint': {
|
|
'purple': 'var(--tint-purple)',
|
|
'pink': 'var(--tint-pink)',
|
|
'red': 'var(--tint-red)',
|
|
'lime': 'var(--tint-lime)',
|
|
'green': 'var(--tint-green)',
|
|
'aqua': 'var(--tint-aqua)',
|
|
'blue': 'var(--tint-blue)',
|
|
'orange': 'var(--tint-orange)',
|
|
'yellow': 'var(--tint-yellow)',
|
|
},
|
|
|
|
'scrollbar': {
|
|
'thumb': 'var(--scrollbar-thumb)',
|
|
'track': 'var(--scrollbar-track)',
|
|
},
|
|
'note': {
|
|
'header': 'var(--note-header)',
|
|
},
|
|
'billing': {
|
|
'primary': 'var(--billing-primary)',
|
|
'primary-hover': 'var(--billing-primary-hover)',
|
|
},
|
|
'ai': {
|
|
'primary': 'var(--ai-primary)',
|
|
},
|
|
'writer': {
|
|
'placeholder': 'var(--writer-placeholder)',
|
|
},
|
|
...newColors,
|
|
'fill': {
|
|
'toolbar': 'var(--fill-toolbar)',
|
|
'default': 'var(--fill-default)',
|
|
'hover': 'var(--fill-hover)',
|
|
'pressed': 'var(--fill-pressed)',
|
|
'active': 'var(--fill-active)',
|
|
'list-hover': 'var(--fill-list-hover)',
|
|
'list-active': 'var(--fill-list-active)',
|
|
...newColors['fill'],
|
|
},
|
|
'text': {
|
|
'title': 'var(--text-title)',
|
|
'caption': 'var(--text-caption)',
|
|
'placeholder': 'var(--text-placeholder)',
|
|
'disabled': 'var(--text-disabled)',
|
|
'link-default': 'var(--text-link-default)',
|
|
'link-hover': 'var(--text-link-hover)',
|
|
'link-pressed': 'var(--text-link-pressed)',
|
|
'link-disabled': 'var(--text-link-disabled)',
|
|
...newColors['text'],
|
|
},
|
|
'icon': {
|
|
'primary': 'var(--icon-primary)',
|
|
'secondary': 'var(--icon-secondary)',
|
|
'disabled': 'var(--icon-disabled)',
|
|
'on-toolbar': 'var(--icon-on-toolbar)',
|
|
...newColors['icon'],
|
|
},
|
|
'badge': {
|
|
'purple': 'var(--badge-purple)',
|
|
'pink': 'var(--badge-pink)',
|
|
'red': 'var(--badge-red)',
|
|
'lime': 'var(--badge-lime)',
|
|
'green': 'var(--badge-green)',
|
|
'aqua': 'var(--badge-aqua)',
|
|
'blue': 'var(--badge-blue)',
|
|
'orange': 'var(--badge-orange)',
|
|
'yellow': 'var(--badge-yellow)',
|
|
...newColors['badge'],
|
|
},
|
|
};
|