Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Replaced colors with config colors #64

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Replaced colors with config colors #64

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8ffe341
Replaced colors with config colors
danhab99 Aug 17, 2021
af42a49
Added namespace to colors
danhab99 Aug 17, 2021
0ac9f57
changed to danger
danhab99 Aug 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
175 changes: 67 additions & 108 deletions src/themes/default.ts
View file
Open in desktop
@@ -1,169 +1,127 @@
export default {
// Alert
alert: {
base: 'p-4 pl-12 relative rounded-lg leading-5',
withClose: 'pr-12',
success: 'bg-green-50 text-green-900 dark:bg-green-600 dark:text-white',
danger: 'bg-red-50 text-red-900 dark:bg-red-600 dark:text-white',
warning: 'bg-yellow-50 text-yellow-900 dark:bg-yellow-600 dark:text-white',
neutral: 'bg-gray-50 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
info: 'bg-blue-50 text-blue-900 dark:bg-blue-600 dark:text-white',
success: 'bg-wm-success-50 text-wm-success-900 dark:bg-wm-success-600 dark:text-wm-darkText',
danger: 'bg-wm-danger-50 text-wm-danger-900 dark:bg-wm-danger-600 dark:text-wm-darkText',
warning: 'bg-wm-warning-50 text-wm-warning-900 dark:bg-wm-warning-600 dark:text-wm-darkText',
neutral: 'bg-wm-neutral-50 text-wm-neutral-800 dark:bg-wm-neutral-700 dark:text-wm-neutral-300',
info: 'bg-wm-info-50 text-wm-info-900 dark:bg-wm-info-600 dark:text-wm-darkText',
icon: {
base: 'h-5 w-5',
success: 'text-green-400 dark:text-green-300',
danger: 'text-red-400 dark:text-red-300',
warning: 'text-yellow-400 dark:text-yellow-100',
neutral: 'text-gray-400 dark:text-gray-500',
info: 'text-blue-400 dark:text-blue-300',
success: 'text-wm-success-400 dark:text-wm-success-300',
danger: 'text-wm-danger-400 dark:text-wm-danger-300',
warning: 'text-wm-warning-400 dark:text-wm-warning-100',
neutral: 'text-wm-neutral-400 dark:text-wm-neutral-500',
info: 'text-wm-info-400 dark:text-wm-info-300',
},
},
// Pagination
pagination: {
base: 'flex flex-col justify-between text-xs sm:flex-row text-gray-600 dark:text-gray-400',
base:
'flex flex-col justify-between text-xs sm:flex-row text-wm-neutral-600 dark:text-wm-neutral-400',
},
// TableFooter
tableFooter: {
base:
'px-4 py-3 border-t dark:border-gray-700 bg-gray-50 text-gray-500 dark:text-gray-400 dark:bg-gray-800',
},
// TableRow
tableRow: {
base: '',
'px-4 py-3 border-t dark:border-wm-neutral-700 bg-wm-neutral-50 text-wm-neutral-500 dark:text-wm-neutral-400 dark:bg-wm-neutral-800',
},
// TableHeader
tableRow: { base: '' },
tableHeader: {
base:
'text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800',
},
// TableContainer
tableContainer: {
base: 'w-full overflow-hidden rounded-lg ring-1 ring-black ring-opacity-5',
},
// TableCell
tableCell: {
base: 'px-4 py-3',
'text-xs font-semibold tracking-wide text-left text-wm-neutral-500 uppercase border-b dark:border-wm-neutral-700 bg-wm-neutral-50 dark:text-wm-neutral-400 dark:bg-wm-neutral-800',
},
// TableBody
tableContainer: { base: 'w-full overflow-hidden rounded-lg ring-1 ring-black ring-opacity-5' },
tableCell: { base: 'px-4 py-3' },
tableBody: {
base:
'bg-white divide-y dark:divide-gray-700 dark:bg-gray-800 text-gray-700 dark:text-gray-400',
'bg-wm-darkText divide-y dark:divide-wm-neutral-700 dark:bg-wm-neutral-800 text-wm-neutral-700 dark:text-wm-neutral-400',
},
// DropdownItem
// this is the <li> that lives inside the Dropdown <ul>
// you're probably looking for the dropdownItem style inside button
dropdownItem: {
base: 'mb-2 last:mb-0',
},
// Dropdown
dropdownItem: { base: 'mb-2 last:mb-0' },
dropdown: {
base:
'absolute w-56 p-2 mt-2 text-gray-600 bg-white border border-gray-100 rounded-lg shadow-md min-w-max-content dark:text-gray-300 dark:border-gray-700 dark:bg-gray-700',
align: {
left: 'left-0',
right: 'right-0',
},
'absolute w-56 p-2 mt-2 text-wm-neutral-600 bg-wm-darkText border border-wm-neutral-100 rounded-lg shadow-md min-w-max-content dark:text-wm-neutral-300 dark:border-wm-neutral-700 dark:bg-wm-neutral-700',
align: { left: 'left-0', right: 'right-0' },
},
// Avatar
avatar: {
base: 'relative rounded-full inline-block',
size: {
large: 'w-10 h-10',
regular: 'w-8 h-8',
small: 'w-6 h-6',
},
size: { large: 'w-10 h-10', regular: 'w-8 h-8', small: 'w-6 h-6' },
},
// Modal
modal: {
base:
'w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-xl',
},
// ModalBody
modalBody: {
base: 'mb-6 text-sm text-gray-700 dark:text-gray-400',
'w-full px-6 py-4 overflow-hidden bg-wm-darkText rounded-t-lg dark:bg-wm-neutral-800 sm:rounded-lg sm:m-4 sm:max-w-xl',
},
// ModalFooter
modalBody: { base: 'mb-6 text-sm text-wm-neutral-700 dark:text-wm-neutral-400' },
modalFooter: {
base:
'flex flex-col items-center justify-end px-6 py-3 -mx-6 -mb-4 space-y-4 sm:space-y-0 sm:space-x-6 sm:flex-row bg-gray-50 dark:bg-gray-800',
'flex flex-col items-center justify-end px-6 py-3 -mx-6 -mb-4 space-y-4 sm:space-y-0 sm:space-x-6 sm:flex-row bg-wm-neutral-50 dark:bg-wm-neutral-800',
},
// ModalHeader
modalHeader: {
base: 'mt-4 mb-2 text-lg font-semibold text-gray-700 dark:text-gray-300',
base: 'mt-4 mb-2 text-lg font-semibold text-wm-neutral-700 dark:text-wm-neutral-300',
},
// Badge
badge: {
base: 'inline-flex px-2 text-xs font-medium leading-5 rounded-full',
success: 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100',
danger: 'text-red-700 bg-red-100 dark:text-red-100 dark:bg-red-700',
warning: 'text-orange-700 bg-orange-100 dark:text-white dark:bg-orange-600',
neutral: 'text-gray-700 bg-gray-100 dark:text-gray-100 dark:bg-gray-700',
primary: 'text-purple-700 bg-purple-100 dark:text-white dark:bg-purple-600',
success:
'text-wm-success-700 bg-wm-success-100 dark:bg-wm-success-700 dark:text-wm-success-100',
danger: 'text-wm-danger-700 bg-wm-danger-100 dark:text-wm-danger-100 dark:bg-wm-danger-700',
warning:
'text-wm-darkWarning-700 bg-wm-darkWarning-100 dark:text-wm-darkText dark:bg-wm-darkWarning-600',
neutral:
'text-wm-neutral-700 bg-wm-neutral-100 dark:text-wm-neutral-100 dark:bg-wm-neutral-700',
primary: 'text-wm-primary-700 bg-wm-primary-100 dark:text-wm-darkText dark:bg-wm-primary-600',
},
// Backdrop
backdrop: {
base:
'fixed inset-0 z-40 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center',
},
// Textarea
textarea: {
base: 'block w-full text-sm dark:text-gray-300 rounded-md focus:outline-none',
base: 'block w-full text-sm dark:text-wm-neutral-300 rounded-md focus:outline-none',
active:
'focus:border-purple-400 border-gray-300 dark:border-gray-600 dark:focus:border-gray-600 dark:bg-gray-700 dark:focus:ring-gray-300 focus:ring focus:ring-purple-300',
disabled: 'cursor-not-allowed opacity-50 bg-gray-300 dark:bg-gray-800',
'focus:border-wm-primary-400 border-wm-neutral-300 dark:border-wm-neutral-600 dark:focus:border-wm-neutral-600 dark:bg-wm-neutral-700 dark:focus:ring-wm-neutral-300 focus:ring focus:ring-wm-primary-300',
disabled: 'cursor-not-allowed opacity-50 bg-wm-neutral-300 dark:bg-wm-neutral-800',
valid:
'border-green-600 dark:bg-gray-700 focus:border-green-400 dark:focus:border-green-400 focus:ring focus:ring-green-200 dark:focus:ring-green-200',
'border-wm-success-600 dark:bg-wm-neutral-700 focus:border-wm-success-400 dark:focus:border-wm-success-400 focus:ring focus:ring-wm-success-200 dark:focus:ring-wm-success-200',
invalid:
'border-red-600 dark:bg-gray-700 focus:border-red-400 dark:focus:border-red-400 focus:ring focus:ring-red-200 dark:focus:ring-red-200',
'border-wm-danger-600 dark:bg-wm-neutral-700 focus:border-wm-danger-400 dark:focus:border-wm-danger-400 focus:ring focus:ring-wm-danger-200 dark:focus:ring-wm-danger-200',
},
// Select
select: {
base: 'block w-full text-sm dark:text-gray-300 focus:outline-none rounded-md',
base: 'block w-full text-sm dark:text-wm-neutral-300 focus:outline-none rounded-md',
active:
'focus:border-purple-400 border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:ring focus:ring-purple-300 dark:focus:ring-gray-300 dark:focus:border-gray-600',
'focus:border-wm-primary-400 border-wm-neutral-300 dark:border-wm-neutral-600 dark:bg-wm-neutral-700 focus:ring focus:ring-wm-primary-300 dark:focus:ring-wm-neutral-300 dark:focus:border-wm-neutral-600',
select: 'leading-5',
disabled: 'cursor-not-allowed opacity-50 bg-gray-300 dark:bg-gray-800',
disabled: 'cursor-not-allowed opacity-50 bg-wm-neutral-300 dark:bg-wm-neutral-800',
valid:
'border-green-600 dark:bg-gray-700 focus:border-green-400 dark:focus:border-green-400 focus:ring focus:ring-green-200 dark:focus:ring-green-200',
'border-wm-success-600 dark:bg-wm-neutral-700 focus:border-wm-success-400 dark:focus:border-wm-success-400 focus:ring focus:ring-wm-success-200 dark:focus:ring-wm-success-200',
invalid:
'border-red-600 dark:bg-gray-700 focus:border-red-400 dark:focus:border-red-400 focus:ring focus:ring-red-200 dark:focus:ring-red-200',
'border-wm-danger-600 dark:bg-wm-neutral-700 focus:border-wm-danger-400 dark:focus:border-wm-danger-400 focus:ring focus:ring-wm-danger-200 dark:focus:ring-wm-danger-200',
},
// Label
label: {
base: 'block text-sm text-gray-700 dark:text-gray-400',
// check and radio get this same style
base: 'block text-sm text-wm-neutral-700 dark:text-wm-neutral-400',
check: 'inline-flex items-center',
disabled: 'opacity-50 cursor-not-allowed',
},
// Input
input: {
base: 'block w-full text-sm focus:outline-none dark:text-gray-300 leading-5 rounded-md',
base: 'block w-full text-sm focus:outline-none dark:text-wm-neutral-300 leading-5 rounded-md',
active:
'focus:border-purple-400 border-gray-300 dark:border-gray-600 focus:ring focus:ring-purple-300 dark:focus:border-gray-600 dark:focus:ring-gray-300 dark:bg-gray-700',
disabled: 'cursor-not-allowed opacity-50 bg-gray-300 dark:bg-gray-800',
'focus:border-wm-primary-400 border-wm-neutral-300 dark:border-wm-neutral-600 focus:ring focus:ring-wm-primary-300 dark:focus:border-wm-neutral-600 dark:focus:ring-wm-neutral-300 dark:bg-wm-neutral-700',
disabled: 'cursor-not-allowed opacity-50 bg-wm-neutral-300 dark:bg-wm-neutral-800',
valid:
'border-green-600 dark:bg-gray-700 focus:border-green-400 dark:focus:border-green-400 focus:ring focus:ring-green-200 dark:focus:ring-green-200',
'border-wm-success-600 dark:bg-wm-neutral-700 focus:border-wm-success-400 dark:focus:border-wm-success-400 focus:ring focus:ring-wm-success-200 dark:focus:ring-wm-success-200',
invalid:
'border-red-600 dark:bg-gray-700 focus:border-red-400 dark:focus:border-red-400 focus:ring focus:ring-red-200 dark:focus:ring-red-200',
'border-wm-danger-600 dark:bg-wm-neutral-700 focus:border-wm-danger-400 dark:focus:border-wm-danger-400 focus:ring focus:ring-wm-danger-200 dark:focus:ring-wm-danger-200',
radio:
'text-purple-600 form-radio focus:border-purple-400 focus:outline-none focus:ring focus:ring-purple-300 focus:ring-offset-0 dark:focus:ring-gray-300',
'text-wm-primary-600 form-radio focus:border-wm-primary-400 focus:outline-none focus:ring focus:ring-wm-primary-300 focus:ring-offset-0 dark:focus:ring-wm-neutral-300',
checkbox:
'text-purple-600 form-checkbox focus:border-purple-400 focus:outline-none focus:ring focus:ring-purple-300 focus:ring-offset-0 rounded dark:focus:ring-gray-300',
'text-wm-primary-600 form-checkbox focus:border-wm-primary-400 focus:outline-none focus:ring focus:ring-wm-primary-300 focus:ring-offset-0 rounded dark:focus:ring-wm-neutral-300',
},
// HelperText
helperText: {
base: 'text-xs',
valid: 'text-green-600 dark:text-green-400',
invalid: 'text-red-600 dark:text-red-400',
valid: 'text-wm-success-600 dark:text-wm-success-400',
invalid: 'text-wm-danger-600 dark:text-wm-danger-400',
},
// Card
card: {
base: 'min-w-0 rounded-lg ring-1 ring-black ring-opacity-5 overflow-hidden',
default: 'bg-white dark:bg-gray-800',
},
cardBody: {
base: 'p-4',
default: 'bg-wm-darkText dark:bg-wm-neutral-800',
},
// Button
cardBody: { base: 'p-4' },
button: {
base:
'align-bottom inline-flex items-center justify-center cursor-pointer leading-5 transition-colors duration-150 font-medium focus:outline-none',
Expand All @@ -181,7 +139,6 @@ export default {
},
pagination: 'px-3 py-1 rounded-md text-xs',
},
// styles applied to the SVG icon
icon: {
larger: 'h-5 w-5',
large: 'h-5 w-5',
Expand All @@ -191,26 +148,28 @@ export default {
right: 'ml-2 -mr-1',
},
primary: {
base: 'text-white bg-purple-600 border border-transparent',
active: 'active:bg-purple-600 hover:bg-purple-700 focus:ring focus:ring-purple-300',
base: 'text-wm-darkText bg-wm-primary-600 border border-transparent',
active:
'active:bg-wm-primary-600 hover:bg-wm-primary-700 focus:ring focus:ring-wm-primary-300',
disabled: 'opacity-50 cursor-not-allowed',
},
outline: {
base: 'text-gray-600 border-gray-300 border dark:text-gray-400 focus:outline-none',
base:
'text-wm-neutral-600 border-wm-neutral-300 border dark:text-wm-neutral-400 focus:outline-none',
active:
'active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:ring focus:ring-gray-300',
disabled: 'opacity-50 cursor-not-allowed bg-gray-300',
'active:bg-transparent hover:border-wm-neutral-500 focus:border-wm-neutral-500 active:text-wm-neutral-500 focus:ring focus:ring-wm-neutral-300',
disabled: 'opacity-50 cursor-not-allowed bg-wm-neutral-300',
},
link: {
base: 'text-gray-600 dark:text-gray-400 focus:outline-none border border-transparent',
base:
'text-wm-neutral-600 dark:text-wm-neutral-400 focus:outline-none border border-transparent',
active:
'active:bg-transparent hover:bg-gray-100 focus:ring focus:ring-gray-300 dark:hover:bg-gray-500 dark:hover:text-gray-300 dark:hover:bg-opacity-10',
'active:bg-transparent hover:bg-wm-neutral-100 focus:ring focus:ring-wm-neutral-300 dark:hover:bg-wm-neutral-500 dark:hover:text-wm-neutral-300 dark:hover:bg-opacity-10',
disabled: 'opacity-50 cursor-not-allowed',
},
// this is the button that lives inside the DropdownItem
dropdownItem: {
base:
'inline-flex items-center cursor-pointer w-full px-2 py-1 text-sm font-medium transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200',
'inline-flex items-center cursor-pointer w-full px-2 py-1 text-sm font-medium transition-colors duration-150 rounded-md hover:bg-wm-neutral-100 hover:text-wm-neutral-800 dark:hover:bg-wm-neutral-800 dark:hover:text-wm-neutral-200',
},
},
}