refs #4887 Adjust dark mode design
This commit is contained in:
parent
d058a81be4
commit
82393aee73
|
@ -97,6 +97,19 @@
|
|||
background-color: rgb(241 245 249);
|
||||
}
|
||||
|
||||
.dark {
|
||||
.timeline-scrollable::-webkit-scrollbar-thumb {
|
||||
background-color: #616161;
|
||||
border-radius: 4px !important;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.timeline-scrollable::-webkit-scrollbar-track {
|
||||
border-radius: 4px !important;
|
||||
background-color: #424242;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-scrollable:hover::-webkit-scrollbar-thumb {
|
||||
opacity: 1;
|
||||
}
|
||||
|
@ -329,3 +342,9 @@ a {
|
|||
@apply text-blue-gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
a {
|
||||
@apply text-blue-400;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -80,6 +80,7 @@ export default function Jump(props: Props) {
|
|||
value={keyword}
|
||||
onChange={e => setKeyword(e.target.value)}
|
||||
size="lg"
|
||||
color="blue-gray"
|
||||
label={formatMessage({ id: 'search.placeholder' })}
|
||||
ref={inputRef}
|
||||
/>
|
||||
|
|
|
@ -56,8 +56,8 @@ export default function Media(props: Props) {
|
|||
<Dialog open={props.open} handler={props.close} size="lg">
|
||||
<DialogBody className="max-h-full max-w-full">
|
||||
<div className="flex">
|
||||
<Button variant="text" onClick={previous} disabled={index < 1}>
|
||||
<FaChevronLeft />
|
||||
<Button variant="text" color="teal" onClick={previous} disabled={index < 1}>
|
||||
<FaChevronLeft className="text-lg" />
|
||||
</Button>
|
||||
{props.media[index] && (
|
||||
<img
|
||||
|
@ -68,8 +68,8 @@ export default function Media(props: Props) {
|
|||
style={{ maxWidth: '85%' }}
|
||||
/>
|
||||
)}
|
||||
<Button variant="text" onClick={next} disabled={index >= props.media.length - 1}>
|
||||
<FaChevronRight />
|
||||
<Button variant="text" color="teal" onClick={next} disabled={index >= props.media.length - 1}>
|
||||
<FaChevronRight className="text-lg" />
|
||||
</Button>
|
||||
</div>
|
||||
</DialogBody>
|
||||
|
|
|
@ -124,7 +124,7 @@ export default function Settings(props: Props) {
|
|||
</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Input type="number" value={fontSize} onChange={fontSizeChanged} />
|
||||
<Input type="number" color="blue-gray" value={fontSize} onChange={fontSizeChanged} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
@ -134,7 +134,7 @@ export default function Settings(props: Props) {
|
|||
</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Select id="language" onChange={languageChanged} value={language}>
|
||||
<Select id="language" color="blue-gray" onChange={languageChanged} value={language}>
|
||||
{languages.map(lang => (
|
||||
<Option key={lang.value} value={lang.value}>
|
||||
{lang.label}
|
||||
|
@ -152,12 +152,14 @@ export default function Settings(props: Props) {
|
|||
<div>
|
||||
<Radio
|
||||
name="mode"
|
||||
color="blue"
|
||||
label={<FormattedMessage id="settings.dark_mode" />}
|
||||
onClick={() => modeChanged(true)}
|
||||
defaultChecked={isDark}
|
||||
/>
|
||||
<Radio
|
||||
name="mode"
|
||||
color="blue"
|
||||
label={<FormattedMessage id="settings.light_mode" />}
|
||||
onClick={() => modeChanged(false)}
|
||||
defaultChecked={!isDark}
|
||||
|
@ -171,7 +173,7 @@ export default function Settings(props: Props) {
|
|||
</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Select id="theme" onChange={themeChanged} value={theme}>
|
||||
<Select id="theme" color="blue-gray" onChange={themeChanged} value={theme}>
|
||||
{themes.map(t => (
|
||||
<Option key={t.value} value={t.value}>
|
||||
{t.label}
|
||||
|
|
|
@ -160,7 +160,7 @@ export default function New(props: NewProps) {
|
|||
<FormattedMessage id="accounts.new.domain" />
|
||||
</Typography>
|
||||
</div>
|
||||
<Input type="text" id="domain" placeholder="mastodon.social" />
|
||||
<Input type="text" color="blue-gray" id="domain" placeholder="mastodon.social" />
|
||||
<Button onClick={checkDomain} loading={loading} color="blue">
|
||||
<FormattedMessage id="accounts.new.sign_in" />
|
||||
</Button>
|
||||
|
@ -185,7 +185,7 @@ export default function New(props: NewProps) {
|
|||
<FormattedMessage id="accounts.new.authorization_helper" />
|
||||
</Typography>
|
||||
</div>
|
||||
<Input id="authorization" type="text" />
|
||||
<Input id="authorization" color="blue-gray" type="text" />
|
||||
</>
|
||||
)}
|
||||
|
||||
|
|
|
@ -236,7 +236,7 @@ export default function Compose(props: Props) {
|
|||
<Input
|
||||
id="spoiler"
|
||||
type="text"
|
||||
color="blue"
|
||||
color="blue-gray"
|
||||
containerProps={{ className: 'mb-2' }}
|
||||
value={spoiler}
|
||||
onChange={ev => setSpoiler(ev.target.value)}
|
||||
|
@ -246,7 +246,7 @@ export default function Compose(props: Props) {
|
|||
<div className="relative">
|
||||
<Textarea
|
||||
id="body"
|
||||
color="blue"
|
||||
color="blue-gray"
|
||||
className="resize-none focus:ring-0"
|
||||
placeholder={formatMessage({ id: 'compose.placeholder' })}
|
||||
rows={3}
|
||||
|
@ -481,7 +481,7 @@ const PollForm = (props: PollProps) => {
|
|||
)}
|
||||
<Input
|
||||
type="text"
|
||||
color="blue"
|
||||
color="blue-gray"
|
||||
value={option}
|
||||
onChange={ev => updateOption(index, ev.target.value)}
|
||||
containerProps={{ className: 'h-8' }}
|
||||
|
@ -495,7 +495,7 @@ const PollForm = (props: PollProps) => {
|
|||
</Button>
|
||||
<Select
|
||||
id="expires"
|
||||
color="blue"
|
||||
color="blue-gray"
|
||||
value={`${props.poll.expires_in}`}
|
||||
onChange={e => changeExpire(parseInt(e))}
|
||||
containerProps={{ className: 'h-8' }}
|
||||
|
|
|
@ -45,7 +45,7 @@ export default function Detail(props: Props) {
|
|||
return (
|
||||
<>
|
||||
{target && (
|
||||
<div className={`bg-white ${props.className}`} style={props.style}>
|
||||
<div className={`${props.className}`} style={props.style}>
|
||||
<div className="theme-bg-secondary text-gray-200 flex justify-between p-2 items-center" style={{ height: '44px' }}>
|
||||
<div className="flex gap-4 items-center">
|
||||
<button className="text-lg" title={formatMessage({ id: 'detail.back' })}>
|
||||
|
|
|
@ -153,7 +153,7 @@ export default function Profile(props: Props) {
|
|||
)}
|
||||
<Popover open={popoverDetail} handler={setPopoverDetail}>
|
||||
<PopoverHandler>
|
||||
<IconButton variant="outlined" title={formatMessage({ id: 'profile.detail' })}>
|
||||
<IconButton variant="outlined" color="teal" title={formatMessage({ id: 'profile.detail' })}>
|
||||
<FaEllipsisVertical />
|
||||
</IconButton>
|
||||
</PopoverHandler>
|
||||
|
@ -230,19 +230,25 @@ export default function Profile(props: Props) {
|
|||
</div>
|
||||
</div>
|
||||
<div className="pt-4">
|
||||
<div className="font-bold" dangerouslySetInnerHTML={{ __html: emojify(user.display_name, user.emojis) }} />
|
||||
<div className="text-gray-500">@{user.acct}</div>
|
||||
<div
|
||||
className="font-bold text-gray-950 dark:text-gray-300"
|
||||
dangerouslySetInnerHTML={{ __html: emojify(user.display_name, user.emojis) }}
|
||||
/>
|
||||
<div className="text-gray-600 dark:text-gray-500">@{user.acct}</div>
|
||||
<div className="mt-4 raw-html profile" onClick={profileClicked}>
|
||||
<span
|
||||
dangerouslySetInnerHTML={{ __html: emojify(user.note, user.emojis) }}
|
||||
className="overflow-hidden break-all text-gray-800"
|
||||
className="overflow-hidden break-all text-gray-800 dark:text-gray-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-gray-100 overflow-hidden break-all raw-html mt-2 profile" onClick={profileClicked}>
|
||||
<div className="bg-gray-100 dark:bg-gray-800 overflow-hidden break-all raw-html mt-2 profile" onClick={profileClicked}>
|
||||
{user.fields.map((data, index) => (
|
||||
<dl key={index} className="px-4 py-2 border-gray-200 border-b">
|
||||
<dt className="text-gray-500">{data.name}</dt>
|
||||
<dd className="text-gray-700" dangerouslySetInnerHTML={{ __html: emojify(data.value, user.emojis) }} />
|
||||
<dl key={index} className="px-4 py-2 border-gray-200 dark:border-gray-600 border-b">
|
||||
<dt className="text-gray-500 dark:text-gray-500">{data.name}</dt>
|
||||
<dd
|
||||
className="text-gray-700 dark:text-gray-400"
|
||||
dangerouslySetInnerHTML={{ __html: emojify(data.value, user.emojis) }}
|
||||
/>
|
||||
</dl>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
@ -15,13 +15,16 @@ export default function User(props: Props) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="border-b mr-2 py-1">
|
||||
<div className="border-b border-gray-200 dark:border-gray-700 mr-2 py-1">
|
||||
<div className="flex" onClick={() => openUser(props.user.id)}>
|
||||
<div className="p2 cursor-pointer" style={{ width: '56px' }}>
|
||||
<Avatar src={props.user.avatar} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-800" dangerouslySetInnerHTML={{ __html: emojify(props.user.display_name, props.user.emojis) }} />
|
||||
<p
|
||||
className="text-gray-800 dark:text-gray-200"
|
||||
dangerouslySetInnerHTML={{ __html: emojify(props.user.display_name, props.user.emojis) }}
|
||||
/>
|
||||
<p className="text-gray-500">@{props.user.acct}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -31,7 +31,7 @@ export default function Report(props: Props) {
|
|||
<Typography>
|
||||
<FormattedMessage id="report.detail" />
|
||||
</Typography>
|
||||
<Textarea id="comment" rows={4} />
|
||||
<Textarea id="comment" color="blue-gray" rows={4} />
|
||||
</div>
|
||||
<Button className="mt-2" onClick={submit}>
|
||||
<FormattedMessage id="report.submit" />
|
||||
|
|
|
@ -18,12 +18,16 @@ export default function Follow(props: Props) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="border-b mr-2 py-1">
|
||||
<div className="border-b border-gray-200 dark:border-gray-800 mr-2 py-1">
|
||||
<div className="flex items-center">
|
||||
<div style={{ width: '56px' }}>
|
||||
<FaUserPlus className="text-blue-600 w-4 mr-2 ml-auto" />
|
||||
</div>
|
||||
<div className="cursor-pointer" style={{ width: 'calc(100% - 56px)' }} onClick={() => openUser(props.notification.account.id)}>
|
||||
<div
|
||||
className="cursor-pointer text-gray-950 dark:text-gray-300"
|
||||
style={{ width: 'calc(100% - 56px)' }}
|
||||
onClick={() => openUser(props.notification.account.id)}
|
||||
>
|
||||
<span
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: emojify(
|
||||
|
@ -52,12 +56,14 @@ export default function Follow(props: Props) {
|
|||
<div style={{ width: 'calc(100% - 56px)' }}>
|
||||
<div className="flex cursor-pointer" onClick={() => openUser(props.notification.account.id)}>
|
||||
<span
|
||||
className="text-gray-950 text-ellipsis break-all overflow-hidden"
|
||||
className="text-gray-950 dark:text-gray-300 text-ellipsis break-all overflow-hidden"
|
||||
dangerouslySetInnerHTML={{ __html: emojify(props.notification.account.display_name, props.notification.account.emojis) }}
|
||||
></span>
|
||||
<span className="text-gray-600 text-ellipsis break-all overflow-hidden">@{props.notification.account.acct}</span>
|
||||
<span className="text-gray-600 dark:text-gray-500 text-ellipsis break-all overflow-hidden">
|
||||
@{props.notification.account.acct}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-gray-600">
|
||||
<div className="text-gray-600 dark:text-gray-500">
|
||||
<FormattedMessage id="notification.follow.followers" values={{ num: props.notification.account.followers_count }} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -38,10 +38,14 @@ export default function Reaction(props: Props) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="border-b mr-2 py-1">
|
||||
<div className="border-b border-gray-200 dark:border-gray-800 mr-2 py-1">
|
||||
<div className="flex items-center">
|
||||
<div style={{ width: '56px' }}>{actionIcon(props.notification)}</div>
|
||||
<div className="cursor-pointer" style={{ width: 'calc(100% - 56px)' }} onClick={() => openUser(props.notification.account.id)}>
|
||||
<div
|
||||
className="cursor-pointer text-gray-950 dark:text-gray-300"
|
||||
style={{ width: 'calc(100% - 56px)' }}
|
||||
onClick={() => openUser(props.notification.account.id)}
|
||||
>
|
||||
<span
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: emojify(
|
||||
|
@ -67,20 +71,20 @@ export default function Reaction(props: Props) {
|
|||
alt={formatMessage({ id: 'timeline.status.avatar' }, { user: status.account.username })}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-gray-600 break-all overflow-hidden" style={{ width: 'calc(100% - 56px)' }}>
|
||||
<div className="text-gray-600 dark:text-gray-500 break-all overflow-hidden" style={{ width: 'calc(100% - 56px)' }}>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex cursor-pointer" onClick={() => openUser(status.account.id)}>
|
||||
<span
|
||||
className="text-gray-600 text-ellipsis break-all overflow-hidden"
|
||||
className="text-ellipsis break-all overflow-hidden"
|
||||
dangerouslySetInnerHTML={{ __html: emojify(status.account.display_name, status.account.emojis) }}
|
||||
></span>
|
||||
<span className="text-gray-600 text-ellipsis break-all overflow-hidden">@{status.account.acct}</span>
|
||||
<span className="text-ellipsis break-all overflow-hidden">@{status.account.acct}</span>
|
||||
</div>
|
||||
<div className="text-gray-600 text-right cursor-pointer" onClick={openStatus}>
|
||||
<div className="text-right cursor-pointer" onClick={openStatus}>
|
||||
<time dateTime={status.created_at}>{dayjs(status.created_at).format('YYYY-MM-DD HH:mm:ss')}</time>
|
||||
</div>
|
||||
</div>
|
||||
<Body status={status} className="text-gray-600" spoilered={spoilered} setSpoilered={setSpoilered} />
|
||||
<Body status={status} className="text-gray-600 dark:text-gray-500" spoilered={spoilered} setSpoilered={setSpoilered} />
|
||||
{!spoilered && (
|
||||
<>
|
||||
{status.poll && <Poll poll={status.poll} onRefresh={refresh} client={props.client} className="text-gray-600" />}
|
||||
|
|
|
@ -42,7 +42,7 @@ function SimplePoll(props: Props) {
|
|||
</div>
|
||||
))}
|
||||
<div className="flex gap-2 items-center mt-2">
|
||||
<Button size="sm" onClick={vote} variant="outlined">
|
||||
<Button size="sm" color="teal" onClick={vote} variant="outlined">
|
||||
<FormattedMessage id="timeline.status.poll.vote" />
|
||||
</Button>
|
||||
<div>
|
||||
|
@ -79,7 +79,7 @@ function MultiplePoll(props: Props) {
|
|||
</div>
|
||||
))}
|
||||
<div className="flex gap-2 items-center mt-2">
|
||||
<Button size="sm" onClick={vote} variant="outlined">
|
||||
<Button size="sm" color="teal" onClick={vote} variant="outlined">
|
||||
<FormattedMessage id="timeline.status.poll.vote" />
|
||||
</Button>
|
||||
<div>
|
||||
|
@ -104,7 +104,7 @@ function PollResult(props: Props) {
|
|||
</div>
|
||||
))}
|
||||
<div className="flex gap-2 items-center mt-2">
|
||||
<Button size="sm" onClick={props.onRefresh} variant="outlined">
|
||||
<Button size="sm" color="teal" onClick={props.onRefresh} variant="outlined">
|
||||
<FormattedMessage id="timeline.status.poll.refresh" />
|
||||
</Button>
|
||||
<div>
|
||||
|
|
|
@ -79,7 +79,7 @@ export default function Status(props: Props) {
|
|||
props.filters.map(f => f.phrase).filter(keyword => props.status.content.toLowerCase().includes(keyword.toLowerCase())).length > 0
|
||||
) {
|
||||
return (
|
||||
<div className="border-b border-gray-200 dark:border-gray-800 mr-2 py-2 text-center">
|
||||
<div className="border-b border-gray-200 dark:border-gray-800 text-gray-950 dark:text-gray-300 mr-2 py-2 text-center">
|
||||
<FormattedMessage id="timeline.status.filtered" />
|
||||
<span className="theme-text-subtle cursor-pointer pl-4" onClick={() => setIgnoreFilter(true)}>
|
||||
<FormattedMessage id="timeline.status.show_anyway" />
|
||||
|
|
|
@ -13,7 +13,10 @@ export default function MyApp({ Component, pageProps }: AppProps) {
|
|||
popover: {
|
||||
styles: {
|
||||
base: {
|
||||
p: 'p-0'
|
||||
bg: 'bg-white dark:bg-gray-900',
|
||||
p: 'p-0',
|
||||
border: 'border border-blue-gray-50 dark:border-blue-gray-800',
|
||||
boxShadow: 'shadow-lg shadow-blue-gray-500/10 dark:shadow-blue-gray-200/10'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -23,8 +26,12 @@ export default function MyApp({ Component, pageProps }: AppProps) {
|
|||
outlined: {
|
||||
base: {
|
||||
input: {
|
||||
borderWidth: 'placeholder-shown:border dark:placeholder-shown:border',
|
||||
borderColor:
|
||||
'placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 dark:placeholder-shown:border-blue-gray-700 dark:placeholder-shown:border-t-blue-gray-700',
|
||||
floated: {
|
||||
borderWidth: 'border focus:border'
|
||||
borderWidth: 'border focus:border dark:focus:border',
|
||||
borderColor: 'border-t-transparent focus:border-t-transparent dark:border-t-transparent dark:focus:border-t-transparent'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
|
@ -41,6 +48,15 @@ export default function MyApp({ Component, pageProps }: AppProps) {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: {
|
||||
input: {
|
||||
'blue-gray': {
|
||||
color: 'text-blue-gray-900 dark:text-white',
|
||||
borderColor: 'border-blue-gray-200',
|
||||
borderColorFocused: 'focus:border-blue-gray-500 dark:focus:border-blue-gray-500'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -52,8 +68,12 @@ export default function MyApp({ Component, pageProps }: AppProps) {
|
|||
outlined: {
|
||||
base: {
|
||||
textarea: {
|
||||
borderWidth: 'placeholder-shown:border dark:placeholder-shown:border',
|
||||
borderColor:
|
||||
'placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 dark:placeholder-shown:border-blue-gray-700 dark:placeholder-shown:border-t-blue-gray-700',
|
||||
floated: {
|
||||
borderWidth: 'border focus:border'
|
||||
borderWidth: 'border focus:border dark:focus:border',
|
||||
borderColor: 'border-t-transparent focus:border-t-transparent dark:border-t-transparent dark:focus:border-t-transparent'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
|
@ -70,6 +90,15 @@ export default function MyApp({ Component, pageProps }: AppProps) {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: {
|
||||
textarea: {
|
||||
'blue-gray': {
|
||||
color: 'text-blue-gray-900 dark:text-white',
|
||||
borderColor: 'border-blue-gray-200',
|
||||
borderColorFocused: 'focus:border-blue-gray-500 dark:focus:border-blue-gray-500'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -77,6 +106,15 @@ export default function MyApp({ Component, pageProps }: AppProps) {
|
|||
},
|
||||
select: {
|
||||
styles: {
|
||||
base: {
|
||||
select: {
|
||||
color: 'text-blue-gray-700 dark:text-blue-gray-200'
|
||||
},
|
||||
menu: {
|
||||
bg: 'bg-white dark:bg-gray-900',
|
||||
border: 'border border-blue-gray-50 dark:border-blue-gray-800'
|
||||
}
|
||||
},
|
||||
variants: {
|
||||
outlined: {
|
||||
states: {
|
||||
|
@ -99,6 +137,235 @@ export default function MyApp({ Component, pageProps }: AppProps) {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
radio: {
|
||||
styles: {
|
||||
base: {
|
||||
label: {
|
||||
color: 'text-gray-700 dark:text-gray-400'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
dialog: {
|
||||
styles: {
|
||||
base: {
|
||||
container: {
|
||||
bg: 'bg-white dark:bg-gray-900',
|
||||
color: 'text-blue-gray-500 dark:text-blue-gray-400'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
dialogHeader: {
|
||||
styles: {
|
||||
base: {
|
||||
color: 'text-blue-gray-900 dark:text-blue-gray-100'
|
||||
}
|
||||
}
|
||||
},
|
||||
dialogBody: {
|
||||
defaultProps: {
|
||||
className: '',
|
||||
divider: false
|
||||
},
|
||||
styles: {
|
||||
base: {
|
||||
initial: {
|
||||
color: 'text-blue-gray-500 dark:text-blue-gray-300'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
list: {
|
||||
styles: {
|
||||
base: {
|
||||
list: {
|
||||
color: 'text-blue-gray-700 dark:text-blue-gray-300'
|
||||
},
|
||||
item: {
|
||||
selected: {
|
||||
color: 'text-blue-gray-700 dark:text-blue-gray-900'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
button: {
|
||||
styles: {
|
||||
variants: {
|
||||
outlined: {
|
||||
white: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
'blue-gray': {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
gray: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
brown: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
'deep-orange': {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
orange: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
amber: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
yellow: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
lime: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
'light-green': {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
green: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
teal: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
cyan: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
'light-blue': {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
blue: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
indigo: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
'deep-purple': {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
purple: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
pink: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
red: {
|
||||
focus: 'focus:ring-0'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
iconButton: {
|
||||
styles: {
|
||||
variants: {
|
||||
outlined: {
|
||||
white: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
'blue-gray': {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
gray: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
brown: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
'deep-orange': {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
orange: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
amber: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
yellow: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
lime: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
'light-green': {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
green: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
teal: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
cyan: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
'light-blue': {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
blue: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
indigo: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
'deep-purple': {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
purple: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
pink: {
|
||||
focus: 'focus:ring-0'
|
||||
},
|
||||
red: {
|
||||
focus: 'focus:ring-0'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
progress: {
|
||||
styles: {
|
||||
base: {
|
||||
container: {
|
||||
initial: {
|
||||
bg: 'bg-blue-gray-50 dark:bg-blue-gray-800'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
tabsHeader: {
|
||||
defaultProps: {
|
||||
className: ''
|
||||
},
|
||||
styles: {
|
||||
base: {
|
||||
bg: 'bg-blue-gray-50 dark:bg-blue-gray-800'
|
||||
}
|
||||
}
|
||||
},
|
||||
tab: {
|
||||
defaultProps: {
|
||||
className: '',
|
||||
activeClassName: '',
|
||||
disabled: false
|
||||
},
|
||||
styles: {
|
||||
base: {
|
||||
tab: {
|
||||
initial: {
|
||||
color: 'text-blue-gray-900 dark:text-blue-gray-200'
|
||||
}
|
||||
},
|
||||
indicator: {
|
||||
bg: 'bg-white dark:bg-gray-700'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue