Skip to content

Commit

Permalink
tweak colors and replace tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronleopold
aaronleopold committed Aug 18, 2024
1 parent 57b1967 commit 5978a95
Show file tree
Hide file tree
Showing 121 changed files with 420 additions and 519 deletions.
10 changes: 2 additions & 8 deletions docs/pages/guides/configuration/theming.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,10 @@ For example, the default dark theme for Stump can be found [here](https://github

```ts
// themes/midnight.ts
export const midnight: ThemeDefinition = {
export const midnight: StumpTheme = {
background: {
100: '#000000',
200: '#111111',
300: '#222222',
400: '#333333',
500: '#444444',
DEFAULT: '#000000',
danger: '#491B1C',
warning: '#412E19',
// ... other background colors
},
// ... other theme definitions
}
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
"lodash.isequal": "^4.5.0",
"lodash.sortby": "^4.7.0",
"lodash.uniqby": "^4.7.0",
"lucide-react": "^0.368.0",
"lucide-react": "=0.428.0",
"nprogress": "^0.2.0",
"overlayscrollbars": "^2.10.0",
"overlayscrollbars-react": "^0.5.6",
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/BackgroundFetchIndicator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function BackgroundFetchIndicator() {

return (
<div className="fixed bottom-4 right-6 z-50">
<svg className="h-6 w-6 animate-spin stroke-contrast" viewBox="0 0 256 256">
<svg className="stroke-contrast h-6 w-6 animate-spin" viewBox="0 0 256 256">
<line
x1="128"
y1="32"
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/DirectoryPickerModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export default function DirectoryPickerModal({
{directoryList.map((directory, i) => (
<button
key={directory.path}
className={cx('hover:bg-background-surface justify-start px-2 py-1.5 text-left', {
className={cx('justify-start px-2 py-1.5 text-left hover:bg-background-surface', {
'bg-background-surface/40': i % 2 === 0,
})}
onClick={() => setPath(directory.path)}
Expand Down
4 changes: 2 additions & 2 deletions packages/browser/src/components/ErrorFallback.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
/>
<div className="max-w-sm sm:max-w-md md:max-w-xl">
<div className="text-left">
<h1 className="text-foreground text-4xl font-semibold">A critical error occurred</h1>
<p className="text-foreground-subtle mt-1.5 text-lg">
<h1 className="text-4xl font-semibold text-foreground">A critical error occurred</h1>
<p className="mt-1.5 text-lg text-foreground-subtle">
{error.message || 'The error message was empty.'}
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/GenericEmptyState.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default function GenericEmptyState({
containerClassName,
)}
>
<CircleSlash2 className="text-foreground-muted h-10 w-10 pb-2 pt-1" />
<CircleSlash2 className="h-10 w-10 pb-2 pt-1 text-foreground-muted" />
<div className={cn('text-center', { 'md:text-left': leftAlign }, contentClassName)}>
<Heading size="sm">{title}</Heading>
{subtitle && (
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/ListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function ListItem({ id, title, subtitle, href }: Props) {
title={title}
key={id}
to={href}
className="hover:bg-background-surface flex h-[40px] w-full rounded-lg p-2"
className="flex h-[40px] w-full rounded-lg p-2 hover:bg-background-surface"
>
<Heading
size="sm"
Expand Down
14 changes: 7 additions & 7 deletions packages/browser/src/components/Pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ function PaginationArrow({ kind, isDisabled, onClick, onMouseEnter }: Pagination
>
<div
className={cx(
'hover:border-edge-subtle inline-flex items-center border-t-2 border-transparent pt-4 text-xs font-medium md:text-sm',
'inline-flex items-center border-t-2 border-transparent pt-4 text-xs font-medium hover:border-edge-subtle md:text-sm',
!isDisabled && 'text-foreground-subtle',
isDisabled && 'text-foreground-muted pointer-events-none cursor-not-allowed',
isDisabled && 'pointer-events-none cursor-not-allowed text-foreground-muted',
{ 'pl-0 pr-1': kind === 'previous' },
{ 'pl-1 pr-0': kind === 'next' },
)}
Expand All @@ -47,7 +47,7 @@ function PaginationArrow({ kind, isDisabled, onClick, onMouseEnter }: Pagination
'h-4 w-4 md:h-5 md:w-5',
kind === 'previous' ? 'mr-3' : 'ml-3',
// TODO: dark different color?? idk, doesn't look THAT bad
isDisabled ? 'text-foreground-muted-200' : 'text-foreground-subtle',
isDisabled ? 'text-foreground-muted' : 'text-foreground-subtle',
)}
aria-hidden="true"
/>
Expand All @@ -71,12 +71,12 @@ function PaginationLink({ value, onClick, isActive, onMouseEnter }: PaginationLi
onClick={onClick}
onMouseEnter={onMouseEnter}
className={cn(
'text-foreground-muted inline-flex cursor-pointer items-center border-t-2 px-4 pt-4 text-xs font-medium md:text-sm',
'inline-flex cursor-pointer items-center border-t-2 px-4 pt-4 text-xs font-medium text-foreground-muted md:text-sm',
{
'border-brand text-brand hover:border-brand-600': isActive,
},
{
'text-foreground-muted hover:border-edge-subtle border-transparent': !isActive,
'border-transparent text-foreground-muted hover:border-edge-subtle': !isActive,
},
)}
>
Expand Down Expand Up @@ -131,7 +131,7 @@ export default function Pagination({
return (
<nav className="w-full">
<div
className={cx('border-edge-subtle w-full border-t', {
className={cx('w-full border-t border-edge-subtle', {
'mt-7': position === 'bottom',
})}
>
Expand Down Expand Up @@ -166,7 +166,7 @@ export default function Pagination({
onPageChange={handleEllipsisNavigate}
trigger={
<div className="-mt-1">
<button className="text-foreground-muted hover:border-edge-subtle flex items-center border-t-2 border-transparent px-4 pt-4 text-xs font-medium focus:outline-none md:text-sm">
<button className="flex items-center border-t-2 border-transparent px-4 pt-4 text-xs font-medium text-foreground-muted hover:border-edge-subtle focus:outline-none md:text-sm">
<MoreHorizontal className="h-4 w-4" />
</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/ReadMore.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function ReadMore({ text }: Props) {
<MarkdownContainer {...markdownContainerProps}>
<Markdown>{showingAll ? resolvedText : resolvedText.slice(0, 250) + '...'}</Markdown>
</MarkdownContainer>
<button onClick={toggle} className="text-foreground cursor-pointer font-semibold">
<button onClick={toggle} className="cursor-pointer font-semibold text-foreground">
{showingAll ? ' Read less' : 'Read more'}
</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/ServerStatusOverlay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function ServerStatusOverlay() {
<AnimatePresence>
{show && (
<motion.div
className="bg-background-surface fixed bottom-[1rem] right-[1rem] flex w-64 flex-col items-center justify-center rounded-md p-3 shadow"
className="fixed bottom-[1rem] right-[1rem] flex w-64 flex-col items-center justify-center rounded-md bg-background-surface p-3 shadow"
initial={{ opacity: 0, scale: 0.9, y: 100 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.9, y: 100 }}
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/Spinner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react'

export default function Spinner() {
return (
<svg className="h-6 w-6 animate-spin stroke-contrast" viewBox="0 0 256 256">
<svg className="stroke-contrast h-6 w-6 animate-spin" viewBox="0 0 256 256">
<line
x1="128"
y1="32"
Expand Down
4 changes: 2 additions & 2 deletions packages/browser/src/components/TableOrGridLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function TableOrGridLayout({ layout, setLayout }: Props) {
<IconButton
variant="ghost"
size="xs"
className="hover:bg-background-300"
className="hover:bg-background-surface-hover"
pressEffect={false}
onClick={() => setLayout('GRID')}
disabled={layout === 'GRID'}
Expand All @@ -27,7 +27,7 @@ export default function TableOrGridLayout({ layout, setLayout }: Props) {
<IconButton
variant="ghost"
size="xs"
className="hover:bg-background-300"
className="hover:bg-background-surface-hover"
pressEffect={false}
onClick={() => setLayout('TABLE')}
disabled={layout === 'TABLE'}
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/UserMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function UserMenu({ variant = 'sidebar' }: Props) {
'flex h-[2.35rem] w-full cursor-pointer items-center border-transparent border-opacity-80 px-1 transition-all duration-150 hover:border-opacity-100',
{ 'border-edge-subtle border-opacity-100': isOpen },
{ 'border-edge-subtle': isSidebar },
{ 'hover:border-edge-subtle justify-center rounded-full': !isSidebar },
{ 'justify-center rounded-full hover:border-edge-subtle': !isSidebar },
)}
>
<Avatar
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/book/table/CoverImageCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default function CoverImageCell({ id, title }: Props) {
className="flex aspect-[2/3] h-14 w-auto items-center justify-center rounded-sm border-[0.5px] border-edge bg-sidebar shadow-sm"
onClick={attemptReload}
>
<Book className="text-foreground-muted h-8 w-8" />
<Book className="h-8 w-8 text-foreground-muted" />
</div>
)
}
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/explorer/FileExplorerFooter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function FileExplorerFooter() {
return (
<footer className="fixed bottom-0 z-10 h-10 w-full border-t border-edge bg-background px-4">
<div className="flex h-full w-full items-center gap-4">
<span className="border-edge-subtle rounded-md border border-dotted px-2 py-0.5">
<span className="rounded-md border border-dotted border-edge-subtle px-2 py-0.5">
<Text variant="muted" size="sm">
{relativePath}
</Text>
Expand Down
4 changes: 2 additions & 2 deletions packages/browser/src/components/explorer/LayoutButtons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function LayoutButtons() {
<IconButton
variant="ghost"
size="xs"
className="hover:bg-background-300"
className="hover:bg-background-surface-hover"
pressEffect={false}
onClick={() => setLayout('grid')}
disabled={layout === 'grid'}
Expand All @@ -26,7 +26,7 @@ export default function LayoutButtons() {
<IconButton
variant="ghost"
size="xs"
className="hover:bg-background-300"
className="hover:bg-background-surface-hover"
pressEffect={false}
onClick={() => setLayout('table')}
disabled={layout === 'table'}
Expand Down
4 changes: 2 additions & 2 deletions packages/browser/src/components/explorer/grid/FileGridItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,12 +45,12 @@ export default function FileGridItem({ file }: Props) {
<FileThumbnail
path={path}
isDirectory={is_directory}
containerClassName="group-hover:bg-background-300/80 group-focus:bg-background-300"
containerClassName="group-hover:bg-background-surface-hover/80 group-focus:bg-background-surface"
size="md"
/>

<Text
className="line-clamp-2 max-w-full rounded-md p-1 group-hover:bg-background-300/80 group-focus:bg-background-300"
className="line-clamp-2 max-w-full rounded-md p-1 group-hover:bg-background-surface-hover/80 group-focus:bg-background-surface"
size="xs"
>
{name}
Expand Down
4 changes: 2 additions & 2 deletions packages/browser/src/components/filters/OrderBy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,10 @@ export default function OrderBy({ entity }: Props) {
<Button
variant="ghost"
className={cx('shrink-0', {
'!bg-background-300': isOpen,
'!bg-background-surface': isOpen,
})}
>
<SortAsc className="text-foreground-subtle mr-1.5 h-4 w-4" />
<SortAsc className="mr-1.5 h-4 w-4 text-foreground-subtle" />
Order By
</Button>
</Popover.Trigger>
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/filters/Search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export default function Search({
fullWidth
size="sm"
variant="activeGhost"
leftDecoration={<SearchIcon className="text-foreground-muted h-4 w-4" />}
leftDecoration={<SearchIcon className="h-4 w-4 text-foreground-muted" />}
rightDecoration={showLoader ? <ProgressSpinner size="sm" /> : null}
className={cn(
'flex-grow transition-[width] duration-200 ease-in-out',
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/filters/URLFilterDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export default function URLFilterDrawer({ entity }: Props) {
<IconButton
variant="ghost"
size="xs"
className="hover:bg-background-300"
className="hover:bg-background-surface-hover"
pressEffect={false}
onClick={() => setIsOpen(true)}
>
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/filters/URLOrdering.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default function URLOrdering({ entity }: Props) {
<IconButton
variant="ghost"
size="xs"
className="hover:bg-background-300"
className="hover:bg-background-surface-hover"
pressEffect={false}
>
<ArrowUpDown className="h-4 w-4" />
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/filters/form/OrderByDirection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default function OrderByDirection({ value, onChange }: Props) {
onClick={() => onChange(value === 'desc' ? 'asc' : 'desc')}
>
<SortAsc
className={cx('text-foreground-muted mr-1.5 h-4 w-4 transition-all', {
className={cx('mr-1.5 h-4 w-4 text-foreground-muted transition-all', {
'rotate-180': value === 'desc',
})}
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/jobs/JobOverlay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export default function JobOverlay() {
<AnimatePresence>
{firstRunningJob && (
<motion.div
className="bg-background-surface border-edge-subtle fixed bottom-[1rem] right-[1rem] flex h-28 w-64 flex-col items-start justify-between rounded-md border p-4 shadow"
className="fixed bottom-[1rem] right-[1rem] flex h-28 w-64 flex-col items-start justify-between rounded-md border border-edge-subtle bg-background-surface p-4 shadow"
initial={{ opacity: 0, scale: 0.9, y: 100 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.9, y: 100 }}
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/markdown/MarkdownEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default function MarkdownEditor({ initialState = 'writing', initialConten
return (
<textarea
ref={editorRef}
className="text-foreground-subtle w-full bg-transparent px-1 py-2 focus:outline-none"
className="w-full bg-transparent px-1 py-2 text-foreground-subtle focus:outline-none"
value={content}
onChange={(e) => setContent(e.target.value)}
rows={4}
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/navigation/mobile/MobileTopBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const TOPBAR_HEIGHT_PX = 53
*/
export default function TopBar() {
return (
<header className="border-edge-subtle sticky top-0 z-10 flex h-14 w-full shrink-0 border-b bg-sidebar px-4 md:hidden">
<header className="sticky top-0 z-10 flex h-14 w-full shrink-0 border-b border-edge-subtle bg-sidebar px-4 md:hidden">
<div className="grid w-full grid-cols-8 items-center gap-2">
<div className="col-span-1">
<MobileSheet />
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/navigation/sidebar/Settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function SettingsButton() {
<IconButton
variant="ghost"
className={cn(
'text-foreground border border-transparent p-1.5',
'border border-transparent p-1.5 text-foreground',
isActive
? 'border-edge-subtle/50 bg-sidebar-surface hover:bg-sidebar-surface'
: 'hover:border-edge-subtle/50 hover:bg-sidebar-surface/70',
Expand Down
10 changes: 7 additions & 3 deletions packages/browser/src/components/navigation/sidebar/SideBarButtonLink.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ type Props = {
leftContent?: React.ReactNode
rightContent?: React.ReactNode
} & Omit<ComponentProps<'div'>, 'ref'>

export default function SideBarButtonLink({
to,
variant = 'default',
Expand All @@ -23,14 +24,17 @@ export default function SideBarButtonLink({
return (
<div
className={cn(
'hover:bg-sidebar-surface-hover group inline-flex h-[2.35rem] w-full shrink-0 items-center justify-start rounded-md px-2 text-sm transition-all duration-150',
'group inline-flex h-[2.35rem] w-full shrink-0 items-center justify-start rounded-md px-2 text-sm transition-all duration-150 hover:bg-sidebar-surface-hover',
{
'text-foreground border-edge-subtle hover:bg-sidebar-surface justify-center border border-dashed bg-opacity-50 text-opacity-90 hover:text-opacity-100':
'justify-center border border-dashed border-edge-subtle bg-opacity-50 text-foreground text-opacity-90 hover:bg-sidebar-surface hover:text-opacity-100':
variant === 'action',
},
{ 'text-foreground': variant !== 'action' },
{
'hover:bg-sidebar-surface-hover/80 bg-sidebar-surface': isActive,
'bg-sidebar-surface hover:bg-sidebar-surface-hover': isActive,
},
{
'bg-sidebar-surface-hover': isActive && variant === 'action',
},
className,
)}
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/navigation/sidebar/SignOut.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default function SignOut() {
onConfirm={handleLogout}
trigger={
<button
className="text-foreground-subtle hover:bg-background-surface flex h-[2.35rem] w-full items-center gap-1.5 px-2 outline-none transition-colors duration-150"
className="flex h-[2.35rem] w-full items-center gap-1.5 bg-sidebar-overlay bg-opacity-50 px-2 text-foreground-subtle outline-none transition-colors duration-150 hover:bg-sidebar-overlay-hover"
onClick={on}
>
<LogOut className="h-4 w-4" />
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/navigation/sidebar/sections/library/LibraryOptionsMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export default function LibraryOptionsMenu({ library }: Props) {
/>
<DropdownMenu
trigger={
<button className="text-foreground-muted p-1 text-opacity-50 outline-none hover:text-opacity-100 focus:ring-0 focus:ring-offset-0 data-[state=open]:text-opacity-100">
<button className="p-1 text-foreground-muted text-opacity-50 outline-none hover:text-opacity-100 focus:ring-0 focus:ring-offset-0 data-[state=open]:text-opacity-100">
<MoreHorizontal className="h-4 w-4 shrink-0" />
</button>
}
Expand Down
4 changes: 2 additions & 2 deletions packages/browser/src/components/navigation/topbar/TopBarButtonItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ const TopBarButtonItem = forwardRef<HTMLDivElement, Props>(
ref={ref}
{...props}
className={cn(
'text-foreground-subtle hover:bg-sidebar-surface-hover focus:bg-sidebar-surface flex w-full cursor-pointer select-none items-center rounded-md px-3 py-2 leading-none no-underline outline-none transition-colors',
{ 'text-foreground-muted pointer-events-none': isDisabled },
'flex w-full cursor-pointer select-none items-center rounded-md px-3 py-2 leading-none text-foreground-subtle no-underline outline-none transition-colors hover:bg-sidebar-surface-hover focus:bg-sidebar-surface',
{ 'pointer-events-none text-foreground-muted': isDisabled },
className,
)}
/>
Expand Down
4 changes: 2 additions & 2 deletions packages/browser/src/components/navigation/topbar/TopBarLinkListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ export default function TopBarLinkListItem({
<Link
to={to}
className={cn(
'text-foreground-subtle hover:bg-sidebar-surface-hover focus:bg-sidebar-surface flex w-full select-none items-center rounded-md px-3 py-2 leading-none no-underline outline-none transition-colors',
{ 'text-foreground-muted pointer-events-none': isDisabled },
'flex w-full select-none items-center rounded-md px-3 py-2 leading-none text-foreground-subtle no-underline outline-none transition-colors hover:bg-sidebar-surface-hover focus:bg-sidebar-surface',
{ 'pointer-events-none text-foreground-muted': isDisabled },
{ 'bg-sidebar-surface': isActive },
className,
)}
Expand Down
2 changes: 1 addition & 1 deletion packages/browser/src/components/navigation/topbar/TopBarNavLink.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function TopBarNavLink({
<NavigationMenu.Link
className={cn(
navigationMenuTriggerStyle({
className: cn('text-foreground-subtle hover:bg-sidebar-surface-hover bg-sidebar', {
className: cn('bg-sidebar text-foreground-subtle hover:bg-sidebar-surface-hover', {
'bg-sidebar-surface': isActive,
}),
}),
Expand Down
Loading

0 comments on commit 5978a95

Please sign in to comment.