vasceannie/supabase
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Feat/deep dark (#27026)

Browse Source 
* chore: move to deeper dark

* tidy up boxes on www

* update deep-dark colors

* fix homepage product cards

* toned down pricing page a little

* update

* lots of color changes

* Update grid.scss

* Update EntityListItem.tsx

* Update EntityListItem.tsx

* fix partners page icon

* fix partners page colors

* update theme

* Update global.css

* combined dark theme so classic-dark does not break on other sites

* Update package-lock.json

* updated color tokens pipeline to support combined dark theme

* smol updates

* Update FeaturedThumb.tsx

* Update BlogFilters.tsx

* Update BlogListItem.tsx

* Update BlogListItem.tsx

* Update UserSettingsDropdown.tsx

* Update NavigationBar.tsx

---------

Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
This commit is contained in:
Jonathan Summers-Muir
2024-07-30 21:34:28 +08:00
committed by GitHub
parent 6cc83d9857
commit 6d760a1a99
71 changed files with 788 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/design-system/styles/globals.css
View File

@@ -4,7 +4,7 @@
@import './../../../packages/ui/build/css/source/global.css';
@import './../../../packages/ui/build/css/themes/dark.css';
@import './../../../packages/ui/build/css/themes/deep-dark.css';
@import './../../../packages/ui/build/css/themes/classic-dark.css';
@import './../../../packages/ui/build/css/themes/light.css';
/* @layer base {

3
apps/docs/styles/main.scss
View File

@@ -3,8 +3,7 @@
@tailwind utilities;
@import './../../../packages/ui/build/css/source/global.css';
@import './../../../packages/ui/build/css/themes/dark.css';
@import './../../../packages/ui/build/css/themes/deep-dark.css';
@import './../../../packages/ui/build/css/themes/dark-combined.css';
@import './../../../packages/ui/build/css/themes/light.css';
@font-face {

2
apps/studio/components/grid/components/header/Header.tsx
View File

@@ -61,7 +61,7 @@ const Header = ({
return (
<div>
<div className="flex h-10 items-center justify-between bg-surface-100 px-5 py-1.5">
<div className="flex h-10 items-center justify-between bg-dash-sidebar px-5 py-1.5">
{customHeader ? (
<>{customHeader}</>
) : (

5
apps/studio/components/grid/components/header/filter/FilterPopover.tsx
View File

@@ -51,10 +51,7 @@ const FilterPopover = ({ table, filters, setParams }: FilterPopoverProps) => {
return (
<Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
<PopoverTrigger_Shadcn_ asChild>
<Button
type={(filters || []).length > 0 ? 'link' : 'text'}
icon={<FilterIcon strokeWidth={1.5} className="text-foreground-light" />}
>
<Button type={(filters || []).length > 0 ? 'link' : 'text'} icon={<FilterIcon />}>
{btnText}
</Button>
</PopoverTrigger_Shadcn_>

5
apps/studio/components/grid/components/header/sort/SortPopover.tsx
View File

@@ -42,10 +42,7 @@ const SortPopover = ({ table, sorts, setParams }: SortPopoverProps) => {
return (
<Popover_Shadcn_ modal={false} open={open} onOpenChange={setOpen}>
<PopoverTrigger_Shadcn_ asChild>
<Button
type={(sorts || []).length > 0 ? 'link' : 'text'}
icon={<List strokeWidth={1.5} className="text-foreground-light" />}
>
<Button type={(sorts || []).length > 0 ? 'link' : 'text'} icon={<List />}>
{btnText}
</Button>
</PopoverTrigger_Shadcn_>

2
apps/studio/components/interfaces/Account/Preferences/ThemeSettings.tsx
View File

@@ -41,7 +41,7 @@ const ThemeSettings = () => {
>
{singleThemes.map((theme: Theme) => (
<RadioGroupLargeItem_Shadcn_ key={theme.value} value={theme.value} label={theme.name}>
<SVG src={`${BASE_PATH}/img/themes/${theme.value}.svg`} />
<SVG src={`${BASE_PATH}/img/themes/${theme.value}.svg?v=2`} />
</RadioGroupLargeItem_Shadcn_>
))}
</RadioGroup_Shadcn_>

4
apps/studio/components/interfaces/Realtime/Inspector/MessageSelection.tsx
View File

@@ -24,12 +24,12 @@ const MessageSelection = ({ log, onClose }: MessageSelectionProps) => {
return (
<div
className={cn(
'relative flex h-full flex-grow flex-col border-l border-t-2 overflow-y-scroll bg-gray-200'
'relative flex h-full flex-grow flex-col border-l border-t-2 overflow-y-scroll bg-200'
)}
>
<div
className={cn(
'absolute flex h-full w-full flex-col items-center justify-center gap-2 bg-scale-200 text-center opacity-0 transition-all',
'absolute flex h-full w-full flex-col items-center justify-center gap-2 bg-200 text-center opacity-0 transition-all',
log ? 'z-0 opacity-0' : 'z-10 opacity-100'
)}
>

2
apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx
View File

@@ -187,7 +187,7 @@ const MessagesTable = ({
'font-mono tracking-tight',
isEqual(row, focusedLog)
? 'bg-scale-800 rdg-row--focused'
: ' bg-scale-200 hover:bg-scale-300 cursor-pointer',
: ' bg-200 hover:bg-scale-300 cursor-pointer',
isErrorLog(row) && '!bg-warning-300',
])
}}

6
apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationPopover.tsx
View File

@@ -47,11 +47,7 @@ const RoleImpersonationPopover = ({
</div>
</Button>
</PopoverTrigger_Shadcn_>
<PopoverContent_Shadcn_
className="p-0 w-full overflow-hidden bg-overlay"
side="bottom"
align={align}
>
<PopoverContent_Shadcn_ className="p-0 w-full overflow-hidden" side="bottom" align={align}>
<RoleImpersonationSelector serviceRoleLabel={serviceRoleLabel} />
</PopoverContent_Shadcn_>
</Popover_Shadcn_>

9
apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationRadio.tsx
View File

@@ -1,4 +1,5 @@
import { IconCheck, IconMinus, cn } from 'ui'
import { Check, Minus } from 'lucide-react'
import { cn } from 'ui'
export interface RoleImpersonationRadioProps<T extends string> {
label?: string
@@ -19,7 +20,7 @@ function RoleImpersonationRadio<T extends string>({
<label
className={cn(
'border border-default rounded-md bg-surface-200 hover:bg-overlay-hover hover:border-control px-4 py-3 w-44 cursor-pointer transition-colors',
isSelected && 'border-stronger bg-surface-300'
isSelected && 'border-foreground-muted hover:border-foreground-muted bg-surface-300'
)}
tabIndex={0}
onKeyDown={(e) => {
@@ -35,10 +36,10 @@ function RoleImpersonationRadio<T extends string>({
{isSelected && (
<div className="flex items-center justify-center p-0.5 bg-foreground text-background rounded-full">
{typeof isSelected === 'boolean' && (
<IconCheck size={12} strokeWidth="4" className="text-background" />
<Check size={12} strokeWidth="4" className="text-background" />
)}
{isSelected === 'partially' && (
<IconMinus size={12} strokeWidth="4" className="text-background" />
<Minus size={12} strokeWidth="4" className="text-background" />
)}
</div>
)}

2
apps/studio/components/layouts/AccountLayout/WithSidebar.tsx
View File

@@ -39,7 +39,7 @@ const WithSidebar = ({
<div
id="with-sidebar"
className={[
'h-full bg-studio',
'h-full bg-dash-sidebar',
'hide-scrollbar w-64 overflow-auto border-r border-default',
].join(' ')}
>

11
apps/studio/components/layouts/AppLayout/BranchDropdown.tsx
View File

@@ -1,4 +1,4 @@
import { ListTree, MessageCircle } from 'lucide-react'
import { ChevronsUpDown, ListTree, MessageCircle } from 'lucide-react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useState } from 'react'
@@ -19,7 +19,6 @@ import {
Command_Shadcn_,
IconAlertCircle,
IconCheck,
IconCode,
PopoverContent_Shadcn_,
PopoverTrigger_Shadcn_,
Popover_Shadcn_,
@@ -97,13 +96,7 @@ const BranchDropdown = ({ isNewNav = false }: BranchDropdownProps) => {
<div className="flex items-center px-2">
<Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
<PopoverTrigger_Shadcn_ asChild>
<Button
type="text"
className="pr-2"
iconRight={
<IconCode className="text-foreground-light rotate-90" strokeWidth={2} size={12} />
}
>
<Button type="text" className="pr-2" iconRight={<ChevronsUpDown />}>
<div className="flex items-center space-x-2">
<p className={isNewNav ? 'text-sm' : 'text-xs'}>{selectedBranch?.name}</p>
{selectedBranch?.is_default ? (

10
apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx
View File

@@ -18,13 +18,13 @@ import {
CommandSeparator_Shadcn_,
Command_Shadcn_,
IconCheck,
IconCode,
IconPlus,
PopoverContent_Shadcn_,
PopoverTrigger_Shadcn_,
Popover_Shadcn_,
ScrollArea,
} from 'ui'
import { ChevronsUpDown } from 'lucide-react'
interface OrganizationDropdownProps {
isNewNav?: boolean
@@ -52,13 +52,7 @@ const OrganizationDropdown = ({ isNewNav = false }: OrganizationDropdownProps) =
<Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
<PopoverTrigger_Shadcn_ asChild>
<div className="flex items-center space-x-2 cursor-pointer">
<Button
type="text"
className="pr-2"
iconRight={
<IconCode className="text-foreground-light rotate-90" strokeWidth={2} size={12} />
}
>
<Button type="text" className="pr-2" iconRight={<ChevronsUpDown />}>
<div className="flex items-center space-x-2">
<p className={isNewNav ? 'text-sm' : 'text-xs'}>{orgName}</p>
{isSuccess && <Badge variant="default">{subscription?.plan.name}</Badge>}

9
apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
View File

@@ -28,6 +28,7 @@ import {
Popover_Shadcn_,
ScrollArea,
} from 'ui'
import { ChevronsUpDown } from 'lucide-react'
// [Fran] the idea is to let users change projects without losing the current page,
// but at the same time we need to redirect correctly between urls that might be
@@ -122,13 +123,7 @@ const ProjectDropdown = ({ isNewNav = false }: ProjectDropdownProps) => {
<div className="flex items-center px-2">
<Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
<PopoverTrigger_Shadcn_ asChild>
<Button
type="text"
className="pr-2"
iconRight={
<Code className="text-foreground-light rotate-90" strokeWidth={2} size={12} />
}
>
<Button type="text" className="pr-2" iconRight={<ChevronsUpDown />}>
<div className="flex items-center space-x-2">
<p className={isNewNav ? 'text-sm' : 'text-xs'}>{selectedProject?.name}</p>
</div>

14
apps/studio/components/layouts/AppLayout/UserSettingsDropdown.tsx
View File

@@ -16,9 +16,11 @@ import {
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger,
IconUser,
singleThemes,
Theme,
} from 'ui'
import { useCommandMenu } from 'ui-patterns/Cmdk'
import { User } from 'lucide-react'
const UserSettingsDropdown = () => {
const signOut = useSignOut()
@@ -40,7 +42,7 @@ const UserSettingsDropdown = () => {
id="user-settings-dropdown"
className="flex items-center justify-center border font-bold rounded-full h-7 w-7 text-foreground-light bg-surface-100"
>
{profile?.first_name ? profile?.first_name?.[0] : <IconUser size={14} strokeWidth={2} />}
{profile?.first_name ? profile?.first_name?.[0] : <User size={14} strokeWidth={2} />}
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-60">
@@ -83,9 +85,11 @@ const UserSettingsDropdown = () => {
setTheme(x)
}}
>
<DropdownMenuRadioItem value={'system'}>System</DropdownMenuRadioItem>
<DropdownMenuRadioItem value={'dark'}>Dark</DropdownMenuRadioItem>
<DropdownMenuRadioItem value={'light'}>Light</DropdownMenuRadioItem>
{singleThemes.map((theme: Theme) => (
<DropdownMenuRadioItem key={theme.value} value={theme.value}>
{theme.name}
</DropdownMenuRadioItem>
))}
</DropdownMenuRadioGroup>
<DropdownMenuSeparator />

2
apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
View File

@@ -47,7 +47,7 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
return (
<div
className={`flex h-12 max-h-12 items-center justify-between py-2 px-5 ${
className={`flex h-12 max-h-12 items-center justify-between py-2 px-5 bg-dash-sidebar ${
headerBorder ? 'border-b border-default' : ''
}`}
>

20
apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
View File

@@ -29,7 +29,7 @@ import {
Separator,
Theme,
cn,
themes,
singleThemes,
} from 'ui'
import { useCommandMenu } from 'ui-patterns/Cmdk'
import { useProjectContext } from '../ProjectContext'
@@ -99,7 +99,7 @@ const NavigationBar = () => {
data-state={snap.navigationPanelOpen ? 'expanded' : 'collapsed'}
className={cn(
'group py-2 z-10 h-full w-14 data-[state=expanded]:w-[13rem]',
'border-r bg-studio border-default data-[state=expanded]:shadow-xl',
'border-r bg-dash-sidebar border-default data-[state=expanded]:shadow-xl',
'transition-width duration-200',
'hide-scrollbar flex flex-col justify-between overflow-y-auto'
)}
@@ -208,7 +208,7 @@ const NavigationBar = () => {
snap.setNavigationPanelOpen(false)
}}
type="text"
icon={<Search size={ICON_SIZE} strokeWidth={2} />}
icon={<Search size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />}
rightText={
<div
className={cn(
@@ -337,15 +337,11 @@ const NavigationBar = () => {
setTheme(value)
}}
>
{themes
.filter(
(x) => x.value === 'light' || x.value === 'dark' || x.value === 'system'
)
.map((theme: Theme) => (
<DropdownMenuRadioItem key={theme.value} value={theme.value}>
{theme.name}
</DropdownMenuRadioItem>
))}
{singleThemes.map((theme: Theme) => (
<DropdownMenuRadioItem key={theme.value} value={theme.value}>
{theme.name}
</DropdownMenuRadioItem>
))}
</DropdownMenuRadioGroup>
</DropdownMenuGroup>
{IS_PLATFORM && (

2
apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationIconButton.tsx
View File

@@ -23,7 +23,7 @@ export const NavigationIconButton = forwardRef<
props.className
)}
>
<div className="absolute left-2 text-foreground-lighter">{icon}</div>
<div className="absolute left-2 text-foreground-muted">{icon}</div>
<span
className={cn(
'absolute left-7 group-data-[state=expanded]:left-10',

9
apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationIconLink.tsx
View File

@@ -16,7 +16,10 @@ const NavigationIconLink = forwardRef<HTMLAnchorElement, NavigationIconButtonPro
const snap = useAppStateSnapshot()
const iconClasses = [
'absolute left-0 top-0 flex rounded items-center h-10 w-10 items-center justify-center', // Layout
'absolute left-0 top-0 flex rounded items-center h-10 w-10 items-center justify-center text-foreground-muted', // Layout
'group-hover/item:text-foreground-light',
isActive && '!text-foreground',
'transition-colors',
]
const classes = [
@@ -26,10 +29,9 @@ const NavigationIconLink = forwardRef<HTMLAnchorElement, NavigationIconButtonPro
'flex items-center rounded',
'group-data-[state=collapsed]:justify-center',
'group-data-[state=expanded]:-space-x-2',
'text-foreground-lighter hover:text-foreground ',
'hover:bg-surface-200',
`${isActive ? '!bg-selection !text-foreground shadow-sm' : ''}`,
'group/item',
`${isActive && '!bg-selection shadow-sm'}`,
]
return route.link !== undefined ? (
@@ -53,6 +55,7 @@ const NavigationIconLink = forwardRef<HTMLAnchorElement, NavigationIconButtonPro
'group-aria-current/item:text-foreground',
'absolute left-7 group-data-[state=expanded]:left-12',
'opacity-0 group-data-[state=expanded]:opacity-100',
`${isActive && 'text-foreground hover:text-foreground'}`,
'transition-all'
)}
>

2
apps/studio/components/layouts/ProjectLayout/ProductMenuBar.tsx
View File

@@ -9,7 +9,7 @@ const ProductMenuBar = ({ title, children }: PropsWithChildren<ProductMenuBarPro
<div
className={[
'hide-scrollbar flex flex-col w-full h-full', // Layout
'bg-studio',
'bg-dash-sidebar',
'border-default ',
].join(' ')}
>

20
apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
View File

@@ -218,9 +218,25 @@ const EntityListItem: ItemRenderer<Entity, EntityListItemProps> = ({
<Tooltip.Root delayDuration={0} disableHoverableContent={true}>
<Tooltip.Trigger className="min-w-4" asChild>
{entity.type === ENTITY_TYPE.TABLE ? (
<Table2 size={15} strokeWidth={1.5} className="text-foreground-lighter" />
<Table2
size={15}
strokeWidth={1.5}
className={cn(
'text-foreground-muted group-hover:text-foreground-lighter',
isActive && 'text-foreground-lighter',
'transition-colors'
)}
/>
) : entity.type === ENTITY_TYPE.VIEW ? (
<Eye size={15} strokeWidth={1.5} className="text-foreground-lighter" />
<Eye
size={15}
strokeWidth={1.5}
className={cn(
'text-foreground-muted group-hover:text-foreground-lighter',
isActive && 'text-foreground-lighter',
'transition-colors'
)}
/>
) : (
<div
className={cn(

4
apps/studio/components/ui/Panel.tsx
View File

@@ -26,7 +26,7 @@ function Panel(props: PropsWithChildren<PanelProps>) {
{props.title && (
<div
className={cn(
'bg-surface-100 border-b border-muted flex items-center px-6 py-4',
'bg-surface-100 border-b border-default flex items-center px-6 py-4',
props.titleClasses
)}
>
@@ -35,7 +35,7 @@ function Panel(props: PropsWithChildren<PanelProps>) {
)}
{props.children}
{props.footer && (
<div className="bg-surface-100 border-t border-muted">
<div className="bg-surface-100 border-t border-default">
<div className="flex h-12 items-center px-6">{props.footer}</div>
</div>
)}

39
apps/studio/public/img/themes/classic-dark.svg Normal file
View File

@@ -0,0 +1,39 @@
<svg viewBox="0 0 162 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_701_65535)">
<rect x="0.242188" width="161.5" height="88" rx="6" fill="#1C1C1C"/>
<mask id="path-3-inside-1_701_65535" fill="white">
<path d="M0.242188 6C0.242188 2.68629 2.92848 0 6.24219 0H13.2422V88H6.24219C2.92848 88 0.242188 85.3137 0.242188 82V6Z"/>
</mask>
<path d="M0.242188 6C0.242188 2.68629 2.92848 0 6.24219 0H13.2422V88H6.24219C2.92848 88 0.242188 85.3137 0.242188 82V6Z" fill="#1C1C1C"/>
<path d="M0.242188 0H13.2422H0.242188ZM13.2422 88H0.242188H13.2422ZM0.242188 88V0V88ZM14.2422 0V88H12.2422V0H14.2422Z" fill="#2E2E2E" mask="url(#path-3-inside-1_701_65535)"/>
<mask id="path-5-inside-2_701_65535" fill="white">
<path d="M155.742 -2.62268e-07C159.056 -1.17421e-07 161.742 2.68629 161.742 6L161.742 13L13.2422 13L13.2422 -6.49114e-06L155.742 -2.62268e-07Z"/>
</mask>
<path d="M155.742 -2.62268e-07C159.056 -1.17421e-07 161.742 2.68629 161.742 6L161.742 13L13.2422 13L13.2422 -6.49114e-06L155.742 -2.62268e-07Z" fill="#1C1C1C"/>
<path d="M161.742 0L161.742 13L161.742 0ZM13.2422 13L13.2422 -6.49114e-06L13.2422 13ZM13.2422 -6.49114e-06L161.742 0L13.2422 -6.49114e-06ZM161.742 14L13.2422 14L13.2422 12L161.742 12L161.742 14Z" fill="#2E2E2E" mask="url(#path-5-inside-2_701_65535)"/>
<rect x="44.2552" y="21.5" width="86.4738" height="23.5" rx="2.5" fill="#232323" stroke="#2E2E2E"/>
<rect x="44.2552" y="51.5" width="86.4738" height="23.5" rx="2.5" fill="#232323" stroke="#2E2E2E"/>
<rect x="52.4406" y="28" width="19.2318" height="1.5" rx="0.75" fill="#A0A0A0"/>
<rect x="52.4406" y="56.5" width="19.2318" height="1.5" rx="0.75" fill="#A0A0A0"/>
<rect x="77.8762" y="28" width="19.2318" height="1.5" rx="0.75" fill="#EDEDED"/>
<rect x="77.8762" y="56.5" width="19.2318" height="1.5" rx="0.75" fill="#EDEDED"/>
<rect x="77.8762" y="33.25" width="44.0471" height="1.5" rx="0.75" fill="#EDEDED"/>
<rect x="77.8762" y="61.75" width="44.0471" height="1.5" rx="0.75" fill="#EDEDED"/>
<rect x="17.9922" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#3ECF8E"/>
<rect x="43.7552" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#707070"/>
<rect x="69.0052" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#707070"/>
<rect x="101.423" y="28" width="20.5" height="1.5" rx="0.75" fill="#FFB224"/>
<rect x="4.86719" y="4.625" width="3.75" height="3.75" rx="1" fill="#707070"/>
<rect x="4.86719" y="13.375" width="3.75" height="3.75" rx="1" fill="#707070"/>
<rect x="4.86719" y="20.875" width="3.75" height="3.75" rx="1" fill="#707070"/>
<rect x="4.86719" y="28.375" width="3.75" height="3.75" rx="1" fill="#707070"/>
<rect x="4.86719" y="35.875" width="3.75" height="3.75" rx="1" fill="#707070"/>
<rect x="4.86719" y="78.875" width="3.75" height="3.75" rx="1" fill="#707070"/>
</g>
<rect x="0.742188" y="0.5" width="160.5" height="87" rx="5.5" stroke="#2E2E2E"/>
<defs>
<clipPath id="clip0_701_65535">
<rect x="0.242188" width="161.5" height="88" rx="6" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

64
apps/studio/public/img/themes/dark.svg
View File

@@ -1,39 +1,39 @@
<svg viewBox="0 0 162 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_701_65535)">
<rect x="0.242188" width="161.5" height="88" rx="6" fill="#1C1C1C"/>
<mask id="path-3-inside-1_701_65535" fill="white">
<path d="M0.242188 6C0.242188 2.68629 2.92848 0 6.24219 0H13.2422V88H6.24219C2.92848 88 0.242188 85.3137 0.242188 82V6Z"/>
<svg viewBox="0 0 163 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_701_65549)">
<rect x="0.742188" width="161.5" height="88" rx="6" fill="#121212"/>
<mask id="path-3-inside-1_701_65549" fill="white">
<path d="M0.742188 6C0.742188 2.68629 3.42848 0 6.74219 0H13.7422V88H6.74219C3.42848 88 0.742188 85.3137 0.742188 82V6Z"/>
</mask>
<path d="M0.242188 6C0.242188 2.68629 2.92848 0 6.24219 0H13.2422V88H6.24219C2.92848 88 0.242188 85.3137 0.242188 82V6Z" fill="#1C1C1C"/>
<path d="M0.242188 0H13.2422H0.242188ZM13.2422 88H0.242188H13.2422ZM0.242188 88V0V88ZM14.2422 0V88H12.2422V0H14.2422Z" fill="#2E2E2E" mask="url(#path-3-inside-1_701_65535)"/>
<mask id="path-5-inside-2_701_65535" fill="white">
<path d="M155.742 -2.62268e-07C159.056 -1.17421e-07 161.742 2.68629 161.742 6L161.742 13L13.2422 13L13.2422 -6.49114e-06L155.742 -2.62268e-07Z"/>
<path d="M0.742188 6C0.742188 2.68629 3.42848 0 6.74219 0H13.7422V88H6.74219C3.42848 88 0.742188 85.3137 0.742188 82V6Z" fill="#121212"/>
<path d="M0.742188 0H13.7422H0.742188ZM13.7422 88H0.742188H13.7422ZM0.742188 88V0V88ZM14.7422 0V88H12.7422V0H14.7422Z" fill="#292929" mask="url(#path-3-inside-1_701_65549)"/>
<mask id="path-5-inside-2_701_65549" fill="white">
<path d="M156.242 -2.62268e-07C159.556 -1.17421e-07 162.242 2.68629 162.242 6L162.242 13L13.7422 13L13.7422 -6.49114e-06L156.242 -2.62268e-07Z"/>
</mask>
<path d="M155.742 -2.62268e-07C159.056 -1.17421e-07 161.742 2.68629 161.742 6L161.742 13L13.2422 13L13.2422 -6.49114e-06L155.742 -2.62268e-07Z" fill="#1C1C1C"/>
<path d="M161.742 0L161.742 13L161.742 0ZM13.2422 13L13.2422 -6.49114e-06L13.2422 13ZM13.2422 -6.49114e-06L161.742 0L13.2422 -6.49114e-06ZM161.742 14L13.2422 14L13.2422 12L161.742 12L161.742 14Z" fill="#2E2E2E" mask="url(#path-5-inside-2_701_65535)"/>
<rect x="44.2552" y="21.5" width="86.4738" height="23.5" rx="2.5" fill="#232323" stroke="#2E2E2E"/>
<rect x="44.2552" y="51.5" width="86.4738" height="23.5" rx="2.5" fill="#232323" stroke="#2E2E2E"/>
<rect x="52.4406" y="28" width="19.2318" height="1.5" rx="0.75" fill="#A0A0A0"/>
<rect x="52.4406" y="56.5" width="19.2318" height="1.5" rx="0.75" fill="#A0A0A0"/>
<rect x="77.8762" y="28" width="19.2318" height="1.5" rx="0.75" fill="#EDEDED"/>
<rect x="77.8762" y="56.5" width="19.2318" height="1.5" rx="0.75" fill="#EDEDED"/>
<rect x="77.8762" y="33.25" width="44.0471" height="1.5" rx="0.75" fill="#EDEDED"/>
<rect x="77.8762" y="61.75" width="44.0471" height="1.5" rx="0.75" fill="#EDEDED"/>
<rect x="17.9922" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#3ECF8E"/>
<rect x="43.7552" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#707070"/>
<rect x="69.0052" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#707070"/>
<rect x="101.423" y="28" width="20.5" height="1.5" rx="0.75" fill="#FFB224"/>
<rect x="4.86719" y="4.625" width="3.75" height="3.75" rx="1" fill="#707070"/>
<rect x="4.86719" y="13.375" width="3.75" height="3.75" rx="1" fill="#707070"/>
<rect x="4.86719" y="20.875" width="3.75" height="3.75" rx="1" fill="#707070"/>
<rect x="4.86719" y="28.375" width="3.75" height="3.75" rx="1" fill="#707070"/>
<rect x="4.86719" y="35.875" width="3.75" height="3.75" rx="1" fill="#707070"/>
<rect x="4.86719" y="78.875" width="3.75" height="3.75" rx="1" fill="#707070"/>
<path d="M156.242 -2.62268e-07C159.556 -1.17421e-07 162.242 2.68629 162.242 6L162.242 13L13.7422 13L13.7422 -6.49114e-06L156.242 -2.62268e-07Z" fill="#121212"/>
<path d="M162.242 0L162.242 13L162.242 0ZM13.7422 13L13.7422 -6.49114e-06L13.7422 13ZM13.7422 -6.49114e-06L162.242 0L13.7422 -6.49114e-06ZM162.242 14L13.7422 14L13.7422 12L162.242 12L162.242 14Z" fill="#292929" mask="url(#path-5-inside-2_701_65549)"/>
<rect x="44.7552" y="21.5" width="86.4738" height="23.5" rx="2.5" fill="#1F1F1F" stroke="#292929"/>
<rect x="44.7552" y="51.5" width="86.4738" height="23.5" rx="2.5" fill="#1F1F1F" stroke="#292929"/>
<rect x="52.9406" y="28" width="19.2318" height="1.5" rx="0.75" fill="#B4B4B4"/>
<rect x="52.9406" y="56.5" width="19.2318" height="1.5" rx="0.75" fill="#B4B4B4"/>
<rect x="78.3762" y="28" width="19.2318" height="1.5" rx="0.75" fill="#FAFAFA"/>
<rect x="78.3762" y="56.5" width="19.2318" height="1.5" rx="0.75" fill="#FAFAFA"/>
<rect x="78.3762" y="33.25" width="44.0471" height="1.5" rx="0.75" fill="#FAFAFA"/>
<rect x="78.3762" y="61.75" width="44.0471" height="1.5" rx="0.75" fill="#FAFAFA"/>
<rect x="18.4922" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#3ECF8E"/>
<rect x="44.2552" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#4D4D4D"/>
<rect x="69.5052" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#4D4D4D"/>
<rect x="101.923" y="28" width="20.5" height="1.5" rx="0.75" fill="#DB8E00"/>
<rect x="5.36719" y="4.625" width="3.75" height="3.75" rx="1" fill="#4D4D4D"/>
<rect x="5.36719" y="13.375" width="3.75" height="3.75" rx="1" fill="#4D4D4D"/>
<rect x="5.36719" y="20.875" width="3.75" height="3.75" rx="1" fill="#4D4D4D"/>
<rect x="5.36719" y="28.375" width="3.75" height="3.75" rx="1" fill="#4D4D4D"/>
<rect x="5.36719" y="35.875" width="3.75" height="3.75" rx="1" fill="#4D4D4D"/>
<rect x="5.36719" y="78.875" width="3.75" height="3.75" rx="1" fill="#4D4D4D"/>
</g>
<rect x="0.742188" y="0.5" width="160.5" height="87" rx="5.5" stroke="#2E2E2E"/>
<rect x="1.24219" y="0.5" width="160.5" height="87" rx="5.5" stroke="#292929"/>
<defs>
<clipPath id="clip0_701_65535">
<rect x="0.242188" width="161.5" height="88" rx="6" fill="white"/>
<clipPath id="clip0_701_65549">
<rect x="0.742188" width="161.5" height="88" rx="6" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

39
apps/studio/public/img/themes/deep-dark.svg
View File

@@ -1,39 +0,0 @@
<svg viewBox="0 0 163 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_701_65549)">
<rect x="0.742188" width="161.5" height="88" rx="6" fill="#121212"/>
<mask id="path-3-inside-1_701_65549" fill="white">
<path d="M0.742188 6C0.742188 2.68629 3.42848 0 6.74219 0H13.7422V88H6.74219C3.42848 88 0.742188 85.3137 0.742188 82V6Z"/>
</mask>
<path d="M0.742188 6C0.742188 2.68629 3.42848 0 6.74219 0H13.7422V88H6.74219C3.42848 88 0.742188 85.3137 0.742188 82V6Z" fill="#121212"/>
<path d="M0.742188 0H13.7422H0.742188ZM13.7422 88H0.742188H13.7422ZM0.742188 88V0V88ZM14.7422 0V88H12.7422V0H14.7422Z" fill="#292929" mask="url(#path-3-inside-1_701_65549)"/>
<mask id="path-5-inside-2_701_65549" fill="white">
<path d="M156.242 -2.62268e-07C159.556 -1.17421e-07 162.242 2.68629 162.242 6L162.242 13L13.7422 13L13.7422 -6.49114e-06L156.242 -2.62268e-07Z"/>
</mask>
<path d="M156.242 -2.62268e-07C159.556 -1.17421e-07 162.242 2.68629 162.242 6L162.242 13L13.7422 13L13.7422 -6.49114e-06L156.242 -2.62268e-07Z" fill="#121212"/>
<path d="M162.242 0L162.242 13L162.242 0ZM13.7422 13L13.7422 -6.49114e-06L13.7422 13ZM13.7422 -6.49114e-06L162.242 0L13.7422 -6.49114e-06ZM162.242 14L13.7422 14L13.7422 12L162.242 12L162.242 14Z" fill="#292929" mask="url(#path-5-inside-2_701_65549)"/>
<rect x="44.7552" y="21.5" width="86.4738" height="23.5" rx="2.5" fill="#1F1F1F" stroke="#292929"/>
<rect x="44.7552" y="51.5" width="86.4738" height="23.5" rx="2.5" fill="#1F1F1F" stroke="#292929"/>
<rect x="52.9406" y="28" width="19.2318" height="1.5" rx="0.75" fill="#B4B4B4"/>
<rect x="52.9406" y="56.5" width="19.2318" height="1.5" rx="0.75" fill="#B4B4B4"/>
<rect x="78.3762" y="28" width="19.2318" height="1.5" rx="0.75" fill="#FAFAFA"/>
<rect x="78.3762" y="56.5" width="19.2318" height="1.5" rx="0.75" fill="#FAFAFA"/>
<rect x="78.3762" y="33.25" width="44.0471" height="1.5" rx="0.75" fill="#FAFAFA"/>
<rect x="78.3762" y="61.75" width="44.0471" height="1.5" rx="0.75" fill="#FAFAFA"/>
<rect x="18.4922" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#3ECF8E"/>
<rect x="44.2552" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#4D4D4D"/>
<rect x="69.5052" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#4D4D4D"/>
<rect x="101.923" y="28" width="20.5" height="1.5" rx="0.75" fill="#DB8E00"/>
<rect x="5.36719" y="4.625" width="3.75" height="3.75" rx="1" fill="#4D4D4D"/>
<rect x="5.36719" y="13.375" width="3.75" height="3.75" rx="1" fill="#4D4D4D"/>
<rect x="5.36719" y="20.875" width="3.75" height="3.75" rx="1" fill="#4D4D4D"/>
<rect x="5.36719" y="28.375" width="3.75" height="3.75" rx="1" fill="#4D4D4D"/>
<rect x="5.36719" y="35.875" width="3.75" height="3.75" rx="1" fill="#4D4D4D"/>
<rect x="5.36719" y="78.875" width="3.75" height="3.75" rx="1" fill="#4D4D4D"/>
</g>
<rect x="1.24219" y="0.5" width="160.5" height="87" rx="5.5" stroke="#292929"/>
<defs>
<clipPath id="clip0_701_65549">
<rect x="0.742188" width="161.5" height="88" rx="6" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

34
apps/studio/styles/grid.scss
View File

@@ -11,7 +11,7 @@
.rdg-cell {
@apply flex;
@apply text-grid;
@apply border-default border-r border-b;
@apply border-secondary border-r border-b;
@apply text-foreground;
white-space: nowrap;
overflow: hidden;
@@ -29,7 +29,7 @@
}
.rdg-cell-frozen-last {
@apply border-default border-r-4 shadow-none;
@apply border-secondary border-r-2 shadow-none;
}
.rdg-cell[aria-selected='true'] {
@@ -37,8 +37,8 @@
}
.rdg {
@apply box-border select-none overflow-x-auto overflow-y-scroll bg-transparent;
@apply border-default border-t border-r-0 border-l-0;
@apply box-border select-none overflow-x-auto overflow-y-scroll bg-dash-canvas;
@apply border-t border-r-0 border-l-0;
contain: strict;
-webkit-user-select: none;
font-size: 14px;
@@ -114,7 +114,7 @@
*/
.rdg-row {
@apply bg-studio transition-colors;
@apply bg-dash-sidebar transition-colors;
@apply hover:bg-surface-200;
}
@@ -132,8 +132,8 @@
/* select row */
.rdg-row[aria-selected='true'] {
@apply bg-surface-100;
@apply hover:bg-surface-100;
@apply bg-surface-200/50 dark:bg-surface-200/75;
@apply hover:bg-surface-200;
}
.tab-cursor {
@@ -170,29 +170,27 @@
}
[type='checkbox']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
[type='checkbox']:checked {
@apply bg-background dark:bg-foreground;
border-color: transparent;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
@apply bg-foreground;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl(0, 0%, 100%)'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E") !important;
}
[type='checkbox'] {
@apply cursor-pointer rounded border border-solid;
@apply text-background dark:text-foreground border-default transition-all;
@apply text-foreground border-strong transition-all;
@apply hover:border-foreground focus:ring-0 focus:outline-none;
@apply bg-transparent;
@apply bg-control;
margin-top: 2px;
}
}
/* Dark mode */
[data-theme='dark'] .sb-grid [type='checkbox']:checked {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl(0, 0%, 0%)'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E") !important;
}
/*
React Contexify
*/

2
apps/studio/styles/main.scss
View File

@@ -4,8 +4,8 @@
@import '~ui/build/css/source/global.css';
@import '~ui/build/css/themes/dark.css';
@import '~ui/build/css/themes/deep-dark.css';
@import '~ui/build/css/themes/light.css';
@import '~ui/build/css/themes/classic-dark.css';
@layer utilities {
.btn-primary {

5
apps/www/components/Blog/BlogFilters.tsx
View File

@@ -204,13 +204,14 @@ function BlogFilters({ allPosts, setPosts, view, setView }: Props) {
key={category}
type={
category === 'all' && !searchTerm && !activeCategory
? 'alternative'
? 'default'
: category === activeCategory
? 'alternative'
? 'default'
: 'outline'
}
onClick={() => handleSetCategory(category)}
size={is2XL ? 'tiny' : 'small'}
className="rounded-full"
>
{category === 'all' ? 'All' : startCase(category.replaceAll('-', ' '))}
</Button>

2
apps/www/components/Blog/BlogGridItem.tsx
View File

@@ -27,7 +27,7 @@ const BlogGridItem = ({ post }: Props) => {
return (
<Link
href={post.path}
className="group inline-block min-w-full p-2 sm:p-4 h-full border border-transparent hover:border-overlay transition-all hover:bg-overlay rounded-xl"
className="group inline-block min-w-full p-2 sm:p-4 h-full border border-transparent transition-all hover:bg-surface-200 dark:hover:bg-surface-75 rounded-xl"
>
<div className="flex flex-col space-y-2">
<div className="flex flex-col space-y-1">

6
apps/www/components/Blog/BlogListItem.tsx
View File

@@ -54,12 +54,12 @@ const BlogListItem = ({ post }: Props) => {
{post.categories.map(
(category, i) =>
i === 0 && (
<p
<span
key={category}
className="border border-muted py-1 px-2 rounded text-center w-auto capitalize"
className="text-sm border border-muted py-1 px-3 rounded-full text-center w-auto capitalize"
>
{category}
</p>
</span>
)
)}
</div>

2
apps/www/components/Blog/FeaturedThumb.tsx
View File

@@ -22,7 +22,7 @@ function FeaturedThumb(blog: PostTypes) {
<div key={blog.slug} className="w-full">
<Link
href={`${blog.path}`}
className="grid gap-4 lg:grid-cols-7 lg:gap-8 xl:gap-12 hover:bg-overlay border border-transparent hover:border-overlay p-2 sm:p-4 rounded-xl"
className="grid gap-4 lg:grid-cols-7 lg:gap-8 xl:gap-12 hover:bg-surface-200 dark:hover:bg-surface-75 p-2 sm:p-4 rounded-xl"
>
<div className="relative w-full aspect-[2/1] lg:col-span-3 lg:aspect-[3/2] overflow-auto rounded-lg border">
<Image

6
apps/www/components/CTABanner/index.tsx
View File

@@ -16,15 +16,13 @@ const CTABanner = ({ darkerBg, className }: Props) => {
>
<div className="col-span-12">
<h2 className="h2">
<span className="text-muted">Build in a weekend,</span>
<span className="text-foreground-lighter">Build in a weekend,</span>
<span className="text-foreground block sm:inline"> scale to millions</span>
</h2>
</div>
<div className="col-span-12 mt-4">
<a href="https://supabase.com/dashboard">
<Button size="medium" className="text-white">
Start your project
</Button>
<Button size="medium">Start your project</Button>
</a>
</div>
</div>

4
apps/www/components/ExampleCard.tsx
View File

@@ -17,10 +17,10 @@ function ExampleCard(props: any) {
return (
<Link href={props.repo_url} className="w-full h-full" target="_blank">
<Panel innerClassName="bg-surface-100 group/panel" hasActiveOnHover>
<Panel innerClassName="bg-surface-75 group/panel" hasActiveOnHover>
<div className="flex flex-col justify-between">
{props.tags && (
<div className="relative w-full aspect-[3/1] bg-alternative flex items-center justify-center gap-4 overflow-hidden">
<div className="relative w-full aspect-[3/1] bg flex items-center justify-center gap-4 overflow-hidden">
{props.tags.map((tag: string) => {
const framework = frameworks.find((f) => f.name === tag)
if (!framework) return null

2
apps/www/components/Nav/DevelopersDropdown.tsx
View File

@@ -54,7 +54,7 @@ const DevelopersDropdown = () => {
</div>
))}
</div>
<div className="bg-overlay flex flex-col w-[550px] xl:w-[480px] border-t xl:border-t-0 xl:border-l">
<div className="bg-surface-75 flex flex-col w-[550px] xl:w-[480px] border-t xl:border-t-0 xl:border-l">
<div className="flex-col gap-2 py-8 px-10">
<Link
href="/blog"

2
apps/www/components/Nav/ProductDropdown.tsx
View File

@@ -32,7 +32,7 @@ const ProductDropdown = () => {
</NavigationMenuLink>
))}
</ul>
<div className="bg-overlay border-t xl:border-t-0 xl:border-l py-8 px-10 gap-8 grid grid-cols-5 xl:flex xl:flex-col w-full xl:w-[500px]">
<div className="bg-surface-75 border-t xl:border-t-0 xl:border-l py-8 px-10 gap-8 grid grid-cols-5 xl:flex xl:flex-col w-full xl:w-[500px]">
<div className="col-span-3 xl:w-auto">
<Link
href="/customers"

4
apps/www/components/Panel/Panel.tsx
View File

@@ -78,7 +78,7 @@ const Panel = ({
<Component
ref={outerRef}
className={cn(
'relative rounded-xl p-px bg-surface-100 bg-gradient-to-b from-border to-border/50 dark:to-surface-100 transition-all shadow-md flex items-center justify-center',
'relative rounded-xl p-px bg-surface-75 bg-gradient-to-b from-border to-border/50 dark:to-surface-100 transition-all shadow-md flex items-center justify-center',
!trackCursor && hasActiveOnHover
? activeColor === 'brand'
? 'hover:bg-none hover:!bg-brand'
@@ -91,7 +91,7 @@ const Panel = ({
>
<div
className={cn(
'relative z-10 w-full h-full rounded-xl bg-surface-100 overflow-hidden text-foreground-light',
'relative z-10 w-full h-full rounded-xl bg-surface-75 overflow-hidden text-foreground-light',
innerClassName
)}
>

10
apps/www/components/Pricing/PricingPlans.tsx
View File

@@ -30,8 +30,8 @@ const PricingPlans: FC = () => {
<div
key={`row-${plan.name}`}
className={cn(
'flex flex-col border xl:border-r-0 last:border-r bg-surface-100 rounded-xl xl:rounded-none first:rounded-l-xl last:rounded-r-xl',
isPromoPlan && 'border-brand !border-2 !rounded-xl xl:-my-8',
'flex flex-col border xl:border-r-0 last:border-r bg-surface-75 rounded-xl xl:rounded-none first:rounded-l-xl last:rounded-r-xl',
isPromoPlan && 'border-foreground-muted !border-2 !rounded-xl xl:-my-8',
isTeamPlan && 'xl:border-l-0'
)}
>
@@ -43,11 +43,11 @@ const PricingPlans: FC = () => {
>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 pb-2">
<h3 className="text-2xl font-normal uppercase flex items-center gap-4 font-mono">
<h3 className="text-foreground text-2xl font-normal uppercase flex items-center gap-4 font-mono">
{plan.name}
</h3>
{plan.nameBadge && (
<span className="bg-brand-500 text-brand-600 rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4 inline-flex gap-1 items-center">
<span className="bg-foreground-light text-background rounded-md py-0.5 px-2 text-[13px] leading-4 inline-flex gap-1 items-center">
{plan.nameBadge}
</span>
)}
@@ -63,7 +63,7 @@ const PricingPlans: FC = () => {
</p>
<Button
block
size="small"
size="large"
type={plan.name === 'Enterprise' ? 'default' : 'primary'}
asChild
>

2
apps/www/components/Products/Functions/NpmEcosystem.tsx
View File

@@ -109,7 +109,7 @@ const NpmEcosystem = () => {
<div
className="absolute inset-0"
style={{
background: `radial-gradient(70% 50% at 50% 50%, transparent, hsl(var(--background-surface-100))`,
background: `radial-gradient(70% 50% at 50% 50%, transparent, hsl(var(--background-surface-75))`,
}}
/>
<div className="absolute z-10 inset-0 flex flex-col items-center justify-center font-bold text-7xl uppercase text-foreground-light group-hover:text-foreground transition-colors">

2
apps/www/components/Products/Functions/QueryLogs.tsx
View File

@@ -109,7 +109,7 @@ const QueryLogs = ({ isActive, isInView }: { isActive?: boolean; isInView?: bool
className="absolute z-20 pointer-events-none inset-0 top-auto h-32"
style={{
background:
'linear-gradient(to top, hsl(var(--background-surface-100)) 0%, transparent 100%)',
'linear-gradient(to top, hsl(var(--background-surface-75)) 0%, transparent 100%)',
}}
/>
<motion.ul

2
apps/www/components/Products/Functions/RealtimeLogs.tsx
View File

@@ -60,7 +60,7 @@ const RealtimeLogs = ({ isActive, isInView }: { isActive?: boolean; isInView?: b
className="absolute z-20 pointer-events-none inset-0 top-auto h-32"
style={{
background:
'linear-gradient(to top, hsl(var(--background-surface-100)) 0%, transparent 100%)',
'linear-gradient(to top, hsl(var(--background-surface-75)) 0%, transparent 100%)',
}}
/>
<motion.ul

6
apps/www/components/Products/ProductCard.tsx
View File

@@ -40,7 +40,7 @@ const ProductCard = ({
outerClassName="relative w-full h-full shadow-lg"
innerClassName={cn(
`relative overflow-hidden flex-1 flex flex-col items-center gap-5 lg:items-start justify-between
bg-surface-100 w-full rounded-xl h-full`
bg-surface-75 w-full rounded-xl h-full`
)}
>
<div
@@ -49,7 +49,7 @@ const ProductCard = ({
alignLeft && 'lg:mx-0 lg:pl-8 lg:items-start lg:text-left lg:max-w-[260px]'
)}
>
<div className="flex items-center justify-center h-12 w-12 bg-alternative rounded-lg mb-3">
<div className="flex items-center justify-center h-10 w-10 bg-surface-200 border rounded-lg mb-3">
{icon && (
<svg
width="25"
@@ -60,7 +60,7 @@ const ProductCard = ({
>
<path
d={icon}
stroke="var(--colors-brand9)"
stroke="hsl(var(--foreground-lighter))"
strokeMiterlimit="10"
strokeLinejoin="round"
strokeLinecap="round"

3
apps/www/components/Products/RealtimeVisual.tsx
View File

@@ -5,9 +5,6 @@ const RealtimeVisual = () => {
return (
<figure
className="absolute inset-0 xl:-bottom-2 2xl:bottom-0 z-0 overflow-hidden"
style={{
background: 'radial-gradient(320px 320px at 30% 100%, #85E0B740, transparent)',
}}
role="img"
aria-label="Supabase Realtime multiplayer app demo"
>

4
apps/www/data/partners/index.tsx
View File

@@ -15,9 +15,9 @@ export default {
image: (
<div className="relative z-10 flex items-center justify-center mb-4">
<div
className="w-12 h-12 rounded-xl bg-gradient-to-br from-[#3ECF8E] via-[#576a61] to-[#3ecfb2] border border-brand-900 flex items-center justify-center"
className="w-12 h-12 rounded-xl bg-brand border border-brand-900 flex items-center justify-center"
style={{
boxShadow: '0 0 20px #25e7761f, 0 0 30px rgba(238, 240, 190, 0.1)',
boxShadow: '0 0 20px hsl(var(--brand-300)), 0 0 30px hsl(var(--brand-200))',
}}
>
<svg

2
apps/www/pages/index.tsx
View File

@@ -9,9 +9,9 @@ const Logos = dynamic(() => import('~/components/logos'))
const BuiltExamples = dynamic(() => import('components/BuiltWithSupabase/index'))
const MadeForDevelopers = dynamic(() => import('components/MadeForDevelopers/index'))
const AdminAccess = dynamic(() => import('components/AdminAccess/index'))
const CTABanner = dynamic(() => import('components/CTABanner/index'))
const CustomerStories = dynamic(() => import('components/CustomerStories'))
const TwitterSocialSection = dynamic(() => import('~/components/TwitterSocialSection'))
const CTABanner = dynamic(() => import('components/CTABanner/index'))
const ReactTooltip = dynamic(() => import('react-tooltip'), { ssr: false })
const Index = () => {

22
apps/www/pages/partners/index.tsx
View File

@@ -40,7 +40,7 @@ const Partners = () => {
<ProductHeaderCentered {...pageData.heroSection} />
</SectionContainer>
<div className="relative z-20 w-full flex py-16 mb-16 -mt-10 md:mb-24 md:-mt-20 justify-center gap-2 overflow-hidden mx-auto max-w-4xl before:content[''] before:absolute before:inset-0 before:w-full before:bg-[linear-gradient(to_right,hsl(var(--background-alternative-default))_0%,transparent_10%,transparent_90%,hsl(var(--background-alternative-default))_100%)] before:z-10">
<div className="absolute w-32 h-32 md:w-40 md:h-40 rounded-full bg-alternative/90 backdrop-blur-2xl backdrop-filter from-background to-background-alternative border-4 border-background-alternative shadow-xl top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 flex items-center justify-center z-30">
<div className="absolute w-32 h-32 md:w-40 md:h-40 rounded-full bg-alternative/90 backdrop-blur-2xl backdrop-filter bg-gradient-to-t from-background to-background-alternative border-4 border-background-alternative shadow-xl top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 flex items-center justify-center z-30">
<div className="absolute inset-0 w-full h-full transform">
<svg
className="absolute inset-[-2px] transform animate-[transformSpin_3s_both_cubic-bezier(.5,.2,.5,.8)_infinite] opacity-90"
@@ -63,9 +63,9 @@ const Partners = () => {
y2="21.5"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#1CF7C3" stopOpacity="0" />
<stop offset="0.510417" stopColor="#1CF7C3" />
<stop offset="1" stopColor="#1CF7C3" stopOpacity="0" />
<stop stopColor="hsl(var(--brand-600))" stopOpacity="0" />
<stop offset="0.510417" stopColor="hsl(var(--brand-600))" />
<stop offset="1" stopColor="hsl(var(--brand-600))" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
@@ -81,7 +81,7 @@ const Partners = () => {
{range(0, 3).map((_) => (
<div className="flex gap-2 animate-marquee will-change-transform">
{pageData.featuredApps.map((app) => (
<div className="w-20 h-20 md:w-28 md:h-28 rounded-2xl bg-gradient-to-t from-background to-background-alternative border border-background flex items-center justify-center shadow-xl">
<div className="w-20 h-20 md:w-28 md:h-28 rounded-2xl bg-gradient-to-t from-background to-background-alternative border border-muted flex items-center justify-center shadow-xl">
<Image
src={app.logo}
alt={app.name}
@@ -135,7 +135,9 @@ const Partners = () => {
<div>
<h3 className="text-foreground text-lg">Experts</h3>
<p className="text-muted text-sm">Find an expert to help build your next idea.</p>
<p className="text-foreground-lighter text-sm">
Find an expert to help build your next idea.
</p>
</div>
<Link href="/partners/experts" className="absolute inset-0" />
@@ -164,7 +166,9 @@ const Partners = () => {
<div>
<h3 className="text-foreground text-lg">Integrations</h3>
<p className="text-muted text-sm">Use your favorite tools with Supabase.</p>
<p className="text-foreground-lighter text-sm">
Use your favorite tools with Supabase.
</p>
</div>
<Link href="/partners/integrations" className="absolute inset-0" />
</Panel>
@@ -191,7 +195,7 @@ const Partners = () => {
<div>
<h3 className="text-foreground text-lg">{item.title}</h3>
<p className="text-muted text-sm">{item.description}</p>
<p className="text-foreground-lighter text-sm">{item.description}</p>
</div>
</div>
)
@@ -206,7 +210,7 @@ const Partners = () => {
<h2 className="text-3xl xl:text-4xl mt-2 max-w-[280px] sm:max-w-xs xl:max-w-[360px] tracking-[-1px]">
Publish an OAuth App
</h2>
<p className="text-muted mb-4 max-w-sm">
<p className="text-foreground-lighter mb-4 max-w-sm">
Supabase lets you build a third-party app that can control organizations or
projects programmatically.
</p>

77
apps/www/public/images/index/products/auth.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 104 KiB

88
apps/www/public/images/index/products/realtime-bg.svg
View File

@@ -1,45 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" width="298" height="431" fill="none">
<g clip-path="url(#a)">
<g filter="url(#b)">
<rect width="307.934" height="248.203" x="13.289" y="205.863" fill="#1C1C1C" rx="12"/>
<rect width="307.434" height="247.703" x="13.539" y="206.113" stroke="#2E2E2E" stroke-width=".5" rx="11.75"/>
</g>
<path fill="#707070" d="M20.495 219.772a6.539 6.539 0 0 1 6.538-6.538h258.462a6.538 6.538 0 0 1 6.538 6.538v109.726a6.538 6.538 0 0 1-6.538 6.538H27.033a6.538 6.538 0 0 1-6.538-6.538V219.772Zm0 132.002a6.539 6.539 0 0 1 6.538-6.538h58.438a6.538 6.538 0 0 1 6.538 6.538v54.751a6.538 6.538 0 0 1-6.538 6.538H27.033a6.539 6.539 0 0 1-6.538-6.538v-54.751Zm80.022 41.993a3.54 3.54 0 0 1 3.54-3.539h181.571a3.54 3.54 0 1 1 0 7.079H104.057a3.54 3.54 0 0 1-3.54-3.54Zm0-44.991a3.54 3.54 0 0 1 3.54-3.54h38.39a3.54 3.54 0 0 1 0 7.08h-38.39a3.54 3.54 0 0 1-3.54-3.54Zm50.363 0a3.54 3.54 0 0 1 3.539-3.54h14.557a3.54 3.54 0 0 1 0 7.08h-14.557a3.54 3.54 0 0 1-3.539-3.54Zm117.734 0a3.54 3.54 0 0 1 3.54-3.54h14.556a3.54 3.54 0 0 1 0 7.08h-14.556a3.54 3.54 0 0 1-3.54-3.54Zm-168.097 60.749a3.54 3.54 0 0 1 3.54-3.54h181.571a3.54 3.54 0 0 1 0 7.079H104.057a3.54 3.54 0 0 1-3.54-3.539Z" opacity=".1"/>
<g filter="url(#c)">
<circle cx="188.373" cy="188.373" r="188.373" fill="#161616" transform="scale(-1 1) rotate(-11.946 1721.757 2458.493)"/>
</g>
<path fill="#707070" d="M47.481 247.871c0-13.138 10.652-23.789 23.79-23.789s23.788 10.65 23.788 23.787c0 13.137-10.65 23.787-23.787 23.787h-23.79v-23.785Z"/>
<mask id="d" width="44" height="44" x="49" y="226" maskUnits="userSpaceOnUse" style="mask-type:alpha">
<rect width="42.33" height="42.33" x="50.104" y="226.705" fill="#D9D9D9" stroke="#232323" stroke-width=".672" rx="21.165"/>
</mask>
<g mask="url(#d)">
<rect width="43.002" height="43.001" x="49.768" y="226.369" fill="#3FCF8E" rx="21.501"/>
<path fill="#1C1C1C" d="M60.897 250.359v-.604l1.711-.309v.836c.013.94.54 1.364 1.261 1.364.746 0 1.21-.527 1.21-1.325v-6.305h1.775v6.305c0 1.647-1.197 3.011-2.972 3.011-1.801 0-2.985-1.184-2.985-2.973Zm16.503-.038 1.647-6.305h1.815l-2.522 9.123h-1.828l-2.084-6.498-2.084 6.498H70.49l-2.535-9.123h1.879l1.672 6.279 2.02-6.279h1.84l2.033 6.305Z"/>
</g>
<rect width="12.499" height="12.499" x="81.144" y="257.745" fill="#3FCF8E" stroke="#161616" stroke-width="1.749" rx="6.25"/>
<path fill="#707070" d="M148 329.969c0-13.139 10.652-23.789 23.79-23.789 13.137 0 23.788 10.65 23.788 23.787 0 13.137-10.65 23.787-23.787 23.787H148v-23.785Z"/>
<mask id="e" width="44" height="44" x="150" y="308" maskUnits="userSpaceOnUse" style="mask-type:alpha">
<rect width="42.33" height="42.33" x="150.622" y="308.802" fill="#D9D9D9" stroke="#232323" stroke-width=".672" rx="21.165"/>
</mask>
<g mask="url(#e)">
<rect width="43.002" height="43.001" x="150.286" y="308.466" fill="#3FCF8E" rx="21.501"/>
<path fill="#1C1C1C" d="M168.917 327.799h-2.882v7.437h-1.789v-7.437h-2.882v-1.685h7.553v1.685Zm11.427 7.437h-1.75v-6.394l-2.624 6.394h-1.48l-2.625-6.343v6.343h-1.698v-9.122h2.341l2.741 6.588 2.676-6.588h2.419v9.122Z"/>
</g>
</g>
<defs>
<filter id="b" width="325.38" height="265.65" x="4.566" y="197.14" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImageFix" stdDeviation="4.362"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_410_1821"/>
<feBlend in="SourceGraphic" in2="effect1_backgroundBlur_410_1821" result="shape"/>
</filter>
<filter id="c" width="528.338" height="528.338" x="-15.866" y="290.755" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur result="effect1_foregroundBlur_410_1821" stdDeviation="37.879"/>
</filter>
<clipPath id="a">
<path fill="#fff" d="M0 .047h298v430H0z"/>
</clipPath>
</defs>
<svg width="298" height="431" viewBox="0 0 298 431" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_410_1821)">
<g filter="url(#filter0_b_410_1821)">
<rect x="13.2891" y="205.863" width="307.934" height="248.203" rx="12" fill="#121212"/>
<rect x="13.5391" y="206.113" width="307.434" height="247.703" rx="11.75" stroke="#2E2E2E" stroke-width="0.5"/>
</g>
<g opacity="0.1">
<path d="M20.4951 219.772C20.4951 216.162 23.4223 213.234 27.0331 213.234H285.495C289.106 213.234 292.033 216.162 292.033 219.772V329.498C292.033 333.109 289.106 336.036 285.495 336.036H27.0331C23.4223 336.036 20.4951 333.109 20.4951 329.498V219.772Z" fill="#707070"/>
<path d="M20.4951 351.774C20.4951 348.164 23.4223 345.236 27.0331 345.236H85.4712C89.082 345.236 92.0091 348.164 92.0091 351.774V406.525C92.0091 410.135 89.082 413.063 85.4712 413.063H27.0331C23.4223 413.063 20.4951 410.135 20.4951 406.525V351.774Z" fill="#707070"/>
<path d="M100.517 393.767C100.517 391.812 102.102 390.228 104.057 390.228H285.628C287.583 390.228 289.168 391.812 289.168 393.767C289.168 395.722 287.583 397.307 285.628 397.307H104.057C102.102 397.307 100.517 395.722 100.517 393.767Z" fill="#707070"/>
<path d="M100.517 348.776C100.517 346.821 102.102 345.236 104.057 345.236H142.447C144.401 345.236 145.986 346.821 145.986 348.776C145.986 350.731 144.401 352.316 142.447 352.316H104.057C102.102 352.316 100.517 350.731 100.517 348.776Z" fill="#707070"/>
<path d="M150.88 348.776C150.88 346.821 152.465 345.236 154.419 345.236H168.976C170.93 345.236 172.515 346.821 172.515 348.776C172.515 350.731 170.931 352.316 168.976 352.316H154.419C152.465 352.316 150.88 350.731 150.88 348.776Z" fill="#707070"/>
<path d="M268.614 348.776C268.614 346.821 270.199 345.236 272.154 345.236H286.71C288.665 345.236 290.25 346.821 290.25 348.776C290.25 350.731 288.665 352.316 286.71 352.316H272.154C270.199 352.316 268.614 350.731 268.614 348.776Z" fill="#707070"/>
<path d="M100.517 409.525C100.517 407.57 102.102 405.985 104.057 405.985H285.628C287.583 405.985 289.168 407.57 289.168 409.525C289.168 411.479 287.583 413.064 285.628 413.064H104.057C102.102 413.064 100.517 411.479 100.517 409.525Z" fill="#707070"/>
</g>
<path d="M47.4814 247.871C47.4814 234.733 58.133 224.082 71.2713 224.082C84.4085 224.082 95.0593 234.732 95.0593 247.869C95.0593 261.006 84.4094 271.656 71.2721 271.656H47.4814V247.871Z" fill="#707070"/>
<mask id="mask0_410_1821" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="49" y="226" width="44" height="44">
<rect x="50.1038" y="226.705" width="42.3296" height="42.3296" rx="21.1648" fill="#D9D9D9" stroke="#232323" stroke-width="0.671898"/>
</mask>
<g mask="url(#mask0_410_1821)">
<rect x="49.7679" y="226.369" width="43.0015" height="43.0012" rx="21.5006" fill="#3FCF8E"/>
<path d="M60.8968 250.359V249.755L62.6081 249.446V250.282C62.6209 251.222 63.1485 251.646 63.869 251.646C64.6153 251.646 65.0785 251.119 65.0785 250.321V244.016H66.8541V250.321C66.8541 251.968 65.6575 253.332 63.8819 253.332C62.0805 253.332 60.8968 252.148 60.8968 250.359ZM77.4003 250.321L79.0473 244.016H80.8615L78.3396 253.139H76.5125L74.4281 246.641L72.3436 253.139H70.4908L67.956 244.016H69.8346L71.5073 250.295L73.5274 244.016H75.3673L77.4003 250.321Z" fill="#1C1C1C"/>
</g>
<rect x="81.1443" y="257.745" width="12.4995" height="12.4995" rx="6.24973" fill="#3FCF8E" stroke="#161616" stroke-width="1.74909"/>
<path d="M148 329.969C148 316.83 158.652 306.18 171.79 306.18C184.927 306.18 195.578 316.83 195.578 329.967C195.578 343.104 184.928 353.754 171.791 353.754H148V329.969Z" fill="#707070"/>
<mask id="mask1_410_1821" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="150" y="308" width="44" height="44">
<rect x="150.622" y="308.802" width="42.3296" height="42.3296" rx="21.1648" fill="#D9D9D9" stroke="#232323" stroke-width="0.671898"/>
</mask>
<g mask="url(#mask1_410_1821)">
<rect x="150.286" y="308.466" width="43.0015" height="43.0012" rx="21.5006" fill="#3FCF8E"/>
<path d="M168.917 327.799H166.035V335.236H164.246V327.799H161.364V326.114H168.917V327.799ZM180.344 335.236H178.594V328.842L175.97 335.236H174.49L171.865 328.893V335.236H170.167V326.114H172.508L175.249 332.702L177.925 326.114H180.344V335.236Z" fill="#1C1C1C"/>
</g>
</g>
<defs>
<filter id="filter0_b_410_1821" x="4.56562" y="197.14" width="325.38" height="265.65" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImageFix" stdDeviation="4.36172"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_410_1821"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_410_1821" result="shape"/>
</filter>
<clipPath id="clip0_410_1821">
<rect width="298" height="430" fill="white" transform="translate(0 0.046875)"/>
</clipPath>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

5
apps/www/styles/index.css
View File

@@ -5,8 +5,7 @@
@import url(../pages/launch-week/launchWeek.css);
@import './../../../packages/ui/build/css/source/global.css';
@import './../../../packages/ui/build/css/themes/dark.css';
@import './../../../packages/ui/build/css/themes/deep-dark.css';
@import './../../../packages/ui/build/css/themes/dark-combined.css';
@import './../../../packages/ui/build/css/themes/light.css';
@layer utilities {
@@ -43,7 +42,7 @@ html {
}
body {
@apply bg-background text-foreground;
@apply bg text-foreground;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

2
examples/caching/with-react-query-nextjs-14/app/page.tsx
View File

@@ -4,7 +4,7 @@ export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-200 lg:p-4 lg:dark:bg-zinc-800/30">
Get started by editing&nbsp;
<code className="font-mono font-bold">app/page.tsx</code>
</p>

2
examples/todo-list/nextjs-todo-list/components/TodoList.tsx
View File

@@ -110,7 +110,7 @@ const Todo = ({ todo, onDelete }: { todo: Todos; onDelete: () => void }) => {
}
return (
<li className="w-full block cursor-pointer hover:bg-gray-200 focus:outline-none focus:bg-gray-200 transition duration-150 ease-in-out">
<li className="w-full block cursor-pointer hover:bg-200 focus:outline-none focus:bg-200 transition duration-150 ease-in-out">
<div className="flex items-center px-4 py-4 sm:px-6">
<div className="min-w-0 flex-1 flex items-center">
<div className="text-sm leading-5 font-medium truncate">{todo.task}</div>

2
examples/todo-list/nextjs-todo-list/pages/index.tsx
View File

@@ -15,7 +15,7 @@ export default function Home() {
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="w-full h-full bg-gray-200">
<div className="w-full h-full bg-200">
{!session ? (
<div className="min-w-full min-h-screen flex items-center justify-center">
<div className="w-full h-full flex justify-center items-center p-4">

150
examples/todo-list/nextjs-todo-list/styles/app.css
View File

@@ -41,9 +41,23 @@ html {
-moz-tab-size: 4;
/* 3 */
-o-tab-size: 4;
tab-size: 4;
tab-size: 4;
/* 3 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family:
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
'Noto Sans',
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji';
/* 4 */
font-feature-settings: normal;
/* 5 */
@@ -82,7 +96,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
@@ -126,7 +140,8 @@ code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
/* 1 */
font-size: 1em;
/* 2 */
@@ -351,7 +366,8 @@ textarea {
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
input::-moz-placeholder,
textarea::-moz-placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
@@ -371,7 +387,7 @@ Set the default cursor for buttons.
*/
button,
[role="button"] {
[role='button'] {
cursor: pointer;
}
@@ -419,7 +435,9 @@ video {
display: none;
}
*, ::before, ::after {
*,
::before,
::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
@@ -634,7 +652,7 @@ video {
border-bottom-width: 1px;
}
.bg-gray-200 {
.bg-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
@@ -680,7 +698,21 @@ video {
}
.font-sans {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family:
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
'Noto Sans',
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji';
}
.text-4xl {
@@ -714,17 +746,43 @@ video {
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-property:
color,
background-color,
border-color,
text-decoration-color,
fill,
stroke,
opacity,
box-shadow,
transform,
filter,
-webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
opacity, box-shadow, transform, filter, backdrop-filter;
transition-property:
color,
background-color,
border-color,
text-decoration-color,
fill,
stroke,
opacity,
box-shadow,
transform,
filter,
backdrop-filter,
-webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
@@ -761,9 +819,33 @@ video {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-property:
color,
background-color,
border-color,
text-decoration-color,
fill,
stroke,
opacity,
box-shadow,
transform,
filter,
-webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
opacity, box-shadow, transform, filter, backdrop-filter;
transition-property:
color,
background-color,
border-color,
text-decoration-color,
fill,
stroke,
opacity,
box-shadow,
transform,
filter,
backdrop-filter,
-webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
@@ -788,9 +870,33 @@ video {
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-property:
color,
background-color,
border-color,
text-decoration-color,
fill,
stroke,
opacity,
box-shadow,
transform,
filter,
-webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
opacity, box-shadow, transform, filter, backdrop-filter;
transition-property:
color,
background-color,
border-color,
text-decoration-color,
fill,
stroke,
opacity,
box-shadow,
transform,
filter,
backdrop-filter,
-webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
@@ -813,12 +919,12 @@ h1 {
border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.hover\:bg-gray-200:hover {
.hover\:bg-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.focus\:bg-gray-200:focus {
.focus\:bg-200:focus {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

2
examples/todo-list/sveltejs-todo-list/src/App.svelte
View File

@@ -25,7 +25,7 @@
});
</script>
<div class="w-full h-full bg-gray-200">
<div class="w-full h-full bg-200">
{#if user}
<Home bind:user />
{:else}

156
examples/todo-list/sveltejs-todo-list/src/assets/app.css
View File

@@ -40,9 +40,23 @@ html {
-moz-tab-size: 4;
/* 3 */
-o-tab-size: 4;
tab-size: 4;
tab-size: 4;
/* 3 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family:
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
'Noto Sans',
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji';
/* 4 */
}
@@ -79,7 +93,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
@@ -123,7 +137,8 @@ code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
/* 1 */
font-size: 1em;
/* 2 */
@@ -348,7 +363,8 @@ textarea {
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
input::-moz-placeholder,
textarea::-moz-placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
@@ -368,7 +384,7 @@ Set the default cursor for buttons.
*/
button,
[role="button"] {
[role='button'] {
cursor: pointer;
}
@@ -410,7 +426,9 @@ video {
height: auto;
}
*, ::before, ::after {
*,
::before,
::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
@@ -707,7 +725,7 @@ video {
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.bg-gray-200 {
.bg-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
@@ -793,11 +811,26 @@ video {
}
.font-sans {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family:
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
'Noto Sans',
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji';
}
.font-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
}
.text-sm {
@@ -861,23 +894,50 @@ video {
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-property:
color,
background-color,
border-color,
text-decoration-color,
fill,
stroke,
opacity,
box-shadow,
transform,
filter,
-webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
opacity, box-shadow, transform, filter, backdrop-filter;
transition-property:
color,
background-color,
border-color,
text-decoration-color,
fill,
stroke,
opacity,
box-shadow,
transform,
filter,
backdrop-filter,
-webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
@@ -914,9 +974,33 @@ video {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-property:
color,
background-color,
border-color,
text-decoration-color,
fill,
stroke,
opacity,
box-shadow,
transform,
filter,
-webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
opacity, box-shadow, transform, filter, backdrop-filter;
transition-property:
color,
background-color,
border-color,
text-decoration-color,
fill,
stroke,
opacity,
box-shadow,
transform,
filter,
backdrop-filter,
-webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
@@ -941,9 +1025,33 @@ video {
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-property:
color,
background-color,
border-color,
text-decoration-color,
fill,
stroke,
opacity,
box-shadow,
transform,
filter,
-webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
opacity, box-shadow, transform, filter, backdrop-filter;
transition-property:
color,
background-color,
border-color,
text-decoration-color,
fill,
stroke,
opacity,
box-shadow,
transform,
filter,
backdrop-filter,
-webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
@@ -978,7 +1086,7 @@ h1 {
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
.hover\:bg-gray-200:hover {
.hover\:bg-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
@@ -988,7 +1096,7 @@ h1 {
border-color: rgb(29 78 216 / var(--tw-border-opacity));
}
.focus\:bg-gray-200:focus {
.focus\:bg-200:focus {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

2
examples/todo-list/sveltejs-todo-list/src/lib/Todo.svelte
View File

@@ -25,7 +25,7 @@
</script>
<li
class="w-full block cursor-pointer hover:bg-gray-200 focus:outline-none focus:bg-gray-200 transition duration-150 ease-in-out"
class="w-full block cursor-pointer hover:bg-200 focus:outline-none focus:bg-200 transition duration-150 ease-in-out"
>
<div class="flex items-center px-4 py-4 sm:px-6">
<div class="min-w-0 flex-1 flex items-center">

10
packages/ui-patterns/GlassPanel/index.tsx
View File

@@ -42,9 +42,7 @@ export const GlassPanel = ({
<div
className={cn(
'shrink-0',
showIconBg
? 'bg-brand-200 dark:bg-brand-400 border border-brand-300 dark:border-brand-400 w-8 h-8 flex items-center justify-center rounded'
: ''
showIconBg ? 'bg-surface-75 border w-8 h-8 flex items-center justify-center rounded' : ''
)}
>
{props.children}
@@ -76,7 +74,7 @@ export const GlassPanel = ({
'border rounded-lg',
'text-left',
background
? 'hover:border-strong bg-surface-100'
? 'hover:border-strong bg-surface-75'
: 'border-muted hover:border-default bg-transparent',
'transition',
className
@@ -93,10 +91,10 @@ export const GlassPanel = ({
"
/>
)}
<div
{/* <div
className="absolute left-0 top-0 w-[250px] h-[150px] transform scale-100 opacity-50 group-hover:scale-150 group-hover:opacity-100 transition-all duration-700 ease-out"
style={{ background: `radial-gradient(100% 100% at 0% 0%, #3EACCF18, transparent)` }}
/>
/> */}
<div
className={cn(
'px-8 pb-8 relative',

2
packages/ui-patterns/TweetCard/index.tsx
View File

@@ -10,7 +10,7 @@ export function TweetCard(props: TweetCard) {
return (
<div
className="
bg-surface-100 border-overlay
bg-surface-75 border
rounded-2xl border p-6
drop-shadow-sm
"

65
packages/ui/build/css/themes/classic-dark.css Normal file
View File

@@ -0,0 +1,65 @@
[data-theme='classic-dark'],
.classic-dark {
--helpers-os-appearance: Dark;
--code-block-5: 13.8deg 89.7% 69.6%;
--code-block-4: 276.1deg 67.7% 74.5%;
--code-block-3: 83.8deg 61.7% 63.1%;
--code-block-2: 33.2deg 90.3% 75.7%;
--code-block-1: 170.8deg 43.1% 61.4%;
--secondary-default: 0deg 0% 100%;
--secondary-400: 0deg 0% 100%;
--secondary-200: 0deg 0% 100%;
--brand-link: 153.1deg 60.2% 52.7%;
--brand-button: 151.8deg 47.1% 40.8%;
--brand-default: 153.1deg 60.2% 52.7%;
--brand-600: 153deg 59.5% 70%;
--brand-500: 153.5deg 61.8% 21.6%;
--brand-400: 153.3deg 65.2% 13.5%;
--brand-300: 153.8deg 69.6% 9%;
--brand-200: 152.5deg 75% 6.3%;
--warning-default: 38.9deg 100% 57.1%;
--warning-600: 38.9deg 89.8% 49.8%;
--warning-500: 34.8deg 90.9% 21.6%;
--warning-400: 33.2deg 100% 14.5%;
--warning-300: 32.3deg 100% 10.2%;
--warning-200: 36.8deg 100% 6.1%;
--destructive-default: 10.2deg 77.9% 53.9%;
--destructive-600: 9.7deg 85.2% 62.9%;
--destructive-500: 7.9deg 71.6% 29%;
--destructive-400: 6.7deg 60% 20.6%;
--destructive-300: 7.5deg 51.3% 15.3%;
--destructive-200: 10.9deg 23.4% 9.2%;
--background-dash-sidebar: 0deg 0% 11%;
--background-dialog-default: 0deg 0% 11%;
--background-surface-75: 0deg 0% 12.5%;
--background-200: 0deg 0% 11%;
--foreground-contrast: 0deg 0% 11%;
--border-button-hover: var(--colors-gray-dark-800);
--border-button-default: var(--colors-gray-dark-700);
--border-stronger: var(--colors-gray-dark-800);
--border-strong: var(--colors-gray-dark-700);
--border-alternative: var(--colors-gray-dark-500);
--border-control: var(--colors-gray-dark-600);
--border-overlay: var(--colors-gray-dark-500);
--border-secondary: var(--colors-gray-dark-500);
--border-muted: var(--colors-gray-dark-500);
--border-default: var(--colors-gray-dark-600);
--background-dash-canvas: var(--colors-gray-dark-200);
--background-button-default: var(--colors-gray-dark-500);
--background-muted: var(--colors-gray-dark-400);
--background-overlay-hover: var(--colors-gray-dark-500);
--background-overlay-default: var(--colors-gray-dark-300);
--background-surface-400: var(--colors-gray-dark-700);
--background-surface-300: var(--colors-gray-dark-500);
--background-surface-200: var(--colors-gray-dark-400);
--background-surface-100: var(--colors-gray-dark-300);
--background-control: var(--colors-gray-dark-300);
--background-selection: var(--colors-gray-dark-600);
--background-alternative-default: var(--colors-gray-dark-100);
--background-alternative-200: var(--colors-gray-dark-200);
--background-default: var(--colors-gray-dark-200);
--foreground-muted: var(--colors-gray-dark-900);
--foreground-lighter: var(--colors-gray-dark-1000);
--foreground-light: var(--colors-gray-dark-1100);
--foreground-default: var(--colors-gray-dark-1200);
}

65
packages/ui/build/css/themes/concept-two.css Normal file
View File

@@ -0,0 +1,65 @@
[data-theme='concept-two'],
.concept-two {
--helpers-os-appearance: Dark;
--code-block-5: 0deg 0% 100%;
--code-block-4: 0deg 0% 100%;
--code-block-3: 0deg 0% 100%;
--code-block-2: 0deg 0% 100%;
--code-block-1: 0deg 0% 100%;
--secondary-default: 21deg 90.4% 59%;
--secondary-400: 20deg 93.2% 40.4%;
--secondary-200: 17.7deg 78.9% 27.8%;
--brand-link: 163.9deg 53.2% 15.1%;
--brand-button: 175.6deg 61.8% 21.6%;
--brand-default: 163.9deg 53.2% 15.1%;
--brand-600: 156.3deg 59.5% 70%;
--brand-500: 175.6deg 61.8% 21.6%;
--brand-400: 176deg 65.2% 13.5%;
--brand-300: 176.3deg 69.6% 9%;
--brand-200: 175deg 75% 6.3%;
--warning-default: 41.2deg 67.5% 48.2%;
--warning-600: 41deg 80.6% 42.4%;
--warning-500: 39.7deg 70.3% 19.8%;
--warning-400: 38.8deg 69.9% 14.3%;
--warning-300: 41.8deg 60% 10.8%;
--warning-200: 60deg 42.1% 7.5%;
--destructive-default: 10.2deg 77.9% 53.9%;
--destructive-600: 9.7deg 85.2% 62.9%;
--destructive-500: 7.9deg 71.6% 29%;
--destructive-400: 6.7deg 60% 20.6%;
--destructive-300: 7.5deg 51.3% 15.3%;
--destructive-200: 10.9deg 23.4% 9.2%;
--border-button-hover: 180deg 4.9% 23.9%;
--border-button-default: 180deg 7.3% 16.1%;
--border-stronger: 180deg 4.9% 23.9%;
--border-strong: 180deg 7.3% 16.1%;
--border-alternative: 165deg 40% 2%;
--border-control: 180deg 7.3% 16.1%;
--border-overlay: 160deg 7.3% 8%;
--border-secondary: 180deg 17.1% 8%;
--border-muted: 170deg 20% 5.9%;
--border-default: 150deg 13% 9%;
--background-dash-canvas: 180deg 20% 2%;
--background-dash-sidebar: 180deg 20% 2%;
--background-dialog-default: 180deg 20% 2%;
--background-button-default: 154.3deg 14.3% 9.6%;
--background-muted: 160deg 12% 4.9%;
--background-overlay-hover: 168deg 5.2% 19%;
--background-overlay-default: 168deg 9.8% 10%;
--background-surface-400: 154.3deg 14.3% 9.6%;
--background-surface-300: 154.3deg 14.3% 9.6%;
--background-surface-200: 160deg 12% 4.9%;
--background-surface-100: 160deg 23.1% 2.5%;
--background-surface-75: 0deg 0% 100%;
--background-control: 180deg 9.9% 13.9%;
--background-selection: 165deg 8.7% 9%;
--background-alternative-default: 165deg 40% 2%;
--background-alternative-200: 0deg 0% 5.5%;
--background-default: 180deg 20% 2%;
--background-200: 180deg 20% 2%;
--foreground-contrast: 156deg 33.3% 2.9%;
--foreground-muted: 162deg 8.5% 23.1%;
--foreground-lighter: 180deg 6.7% 47.1%;
--foreground-light: 180deg 7.5% 63.5%;
--foreground-default: 0deg 0% 100%;
}

14
packages/ui/build/css/themes/deep-dark.css → packages/ui/build/css/themes/dark-combined.css
View File

@@ -1,5 +1,7 @@
[data-theme='deep-dark'],
.deep-dark {
[data-theme='classic-dark'],
.classic-dark,
[data-theme='dark'],
.dark {
--helpers-os-appearance: Dark;
--code-block-5: 13.8deg 89.7% 69.6%;
--code-block-4: 276.1deg 67.7% 74.5%;
@@ -29,14 +31,16 @@
--destructive-400: 6.7deg 60% 20.6%;
--destructive-300: 7.5deg 51.3% 15.3%;
--destructive-200: 10.9deg 23.4% 9.2%;
--border-stronger: 0deg 0% 22%;
--border-strong: 0deg 0% 20%;
--border-stronger: 0deg 0% 27.1%;
--border-strong: 0deg 0% 21.2%;
--border-alternative: 0deg 0% 26.7%;
--border-control: 0deg 0% 22.4%;
--border-overlay: 0deg 0% 20%;
--border-secondary: 0deg 0% 14.1%;
--border-muted: 0deg 0% 14.1%;
--border-default: 0deg 0% 16.1%;
--border-default: 0deg 0% 18%;
--background-dash-canvas: 0deg 0% 7.1%;
--background-dash-sidebar: 0deg 0% 9%;
--background-dialog-default: 0deg 0% 7.1%;
--background-muted: 0deg 0% 14.1%;
--background-overlay-hover: 0deg 0% 18%;

82
packages/ui/build/css/themes/dark.css
View File

@@ -6,58 +6,60 @@
--code-block-3: 83.8deg 61.7% 63.1%;
--code-block-2: 33.2deg 90.3% 75.7%;
--code-block-1: 170.8deg 43.1% 61.4%;
--secondary-default: 0deg 0% 100%;
--secondary-400: 0deg 0% 100%;
--secondary-200: 0deg 0% 100%;
--brand-link: 153.1deg 60.2% 52.7%;
--brand-button: 151.8deg 47.1% 40.8%;
--secondary-default: 247.8deg 100% 70%;
--secondary-400: 248.3deg 54.5% 25.9%;
--secondary-200: 248deg 53.6% 11%;
--brand-link: 155deg 100% 38.6%;
--brand-button: 154.9deg 100% 19.2%;
--brand-default: 153.1deg 60.2% 52.7%;
--brand-600: 153deg 59.5% 70%;
--brand-500: 153.5deg 61.8% 21.6%;
--brand-400: 153.3deg 65.2% 13.5%;
--brand-300: 153.8deg 69.6% 9%;
--brand-200: 152.5deg 75% 6.3%;
--warning-default: 38.9deg 100% 57.1%;
--warning-600: 38.9deg 89.8% 49.8%;
--brand-600: 154.9deg 59.5% 70%;
--brand-500: 154.9deg 100% 19.2%;
--brand-400: 155.5deg 100% 9.6%;
--brand-300: 155.1deg 100% 8%;
--brand-200: 162deg 100% 2%;
--warning-default: 38.9deg 100% 42.9%;
--warning-600: 38.9deg 100% 42.9%;
--warning-500: 34.8deg 90.9% 21.6%;
--warning-400: 33.2deg 100% 14.5%;
--warning-300: 32.3deg 100% 10.2%;
--warning-200: 36.8deg 100% 6.1%;
--warning-200: 36.6deg 100% 8%;
--destructive-default: 10.2deg 77.9% 53.9%;
--destructive-600: 9.7deg 85.2% 62.9%;
--destructive-500: 7.9deg 71.6% 29%;
--destructive-400: 6.7deg 60% 20.6%;
--destructive-300: 7.5deg 51.3% 15.3%;
--destructive-200: 10.9deg 23.4% 9.2%;
--background-dialog-default: 0deg 0% 11%;
--background-surface-75: 0deg 0% 12.5%;
--background-200: 0deg 0% 11%;
--foreground-contrast: 0deg 0% 11%;
--border-stronger: 0deg 0% 27.1%;
--border-strong: 0deg 0% 21.2%;
--border-alternative: 0deg 0% 26.7%;
--border-control: 0deg 0% 22.4%;
--border-overlay: 0deg 0% 20%;
--border-secondary: 0deg 0% 14.1%;
--border-muted: 0deg 0% 14.1%;
--border-default: 0deg 0% 18%;
--background-dash-canvas: 0deg 0% 7.1%;
--background-dash-sidebar: 0deg 0% 9%;
--background-dialog-default: 0deg 0% 7.1%;
--background-muted: 0deg 0% 14.1%;
--background-overlay-hover: 0deg 0% 18%;
--background-overlay-default: 0deg 0% 14.1%;
--background-surface-400: 0deg 0% 16.1%;
--background-surface-300: 0deg 0% 16.1%;
--background-surface-200: 0deg 0% 12.9%;
--background-surface-100: 0deg 0% 12.2%;
--background-surface-75: 0deg 0% 9%;
--background-control: 0deg 0% 14.1%;
--background-selection: 0deg 0% 19.2%;
--background-alternative-default: 0deg 0% 5.9%;
--background-default: 0deg 0% 7.1%;
--background-200: 0deg 0% 9%;
--foreground-contrast: 0deg 0% 8.6%;
--foreground-muted: 0deg 0% 30.2%;
--foreground-lighter: 0deg 0% 53.7%;
--foreground-light: 0deg 0% 70.6%;
--foreground-default: 0deg 0% 98%;
--border-button-hover: var(--colors-gray-dark-800);
--border-button-default: var(--colors-gray-dark-700);
--border-stronger: var(--colors-gray-dark-800);
--border-strong: var(--colors-gray-dark-700);
--border-alternative: var(--colors-gray-dark-500);
--border-control: var(--colors-gray-dark-600);
--border-overlay: var(--colors-gray-dark-500);
--border-secondary: var(--colors-gray-dark-500);
--border-muted: var(--colors-gray-dark-500);
--border-default: var(--colors-gray-dark-600);
--background-button-default: var(--colors-gray-dark-500);
--background-muted: var(--colors-gray-dark-400);
--background-overlay-hover: var(--colors-gray-dark-500);
--background-overlay-default: var(--colors-gray-dark-300);
--background-surface-400: var(--colors-gray-dark-700);
--background-surface-300: var(--colors-gray-dark-500);
--background-surface-200: var(--colors-gray-dark-400);
--background-surface-100: var(--colors-gray-dark-300);
--background-control: var(--colors-gray-dark-300);
--background-selection: var(--colors-gray-dark-600);
--background-alternative-default: var(--colors-gray-dark-100);
--background-alternative-200: var(--colors-gray-dark-200);
--background-default: var(--colors-gray-dark-200);
--foreground-muted: var(--colors-gray-dark-900);
--foreground-lighter: var(--colors-gray-dark-1000);
--foreground-light: var(--colors-gray-dark-1100);
--foreground-default: var(--colors-gray-dark-1200);
}

2
packages/ui/build/css/themes/light.css
View File

@@ -52,6 +52,8 @@
--border-overlay: var(--colors-gray-light-500);
--border-secondary: var(--colors-gray-light-400);
--border-muted: var(--colors-gray-light-400);
--background-dash-canvas: var(--colors-gray-light-200);
--background-dash-sidebar: var(--colors-gray-light-100);
--background-button-default: var(--colors-gray-light-100);
--background-overlay-hover: var(--colors-gray-light-300);
--background-overlay-default: var(--colors-gray-light-100);

14
packages/ui/build/css/tw-extend/color.js
View File

@@ -483,9 +483,17 @@ module.exports = {
cssVariable: "var(--background-dialog-default)",
value: "hsl(0, 0%, 7.1%)"
},
"background-dash-sidebar": {
cssVariable: "var(--background-dash-sidebar)",
value: "hsl(0, 0%, 9%)"
},
"background-dash-canvas": {
cssVariable: "var(--background-dash-canvas)",
value: "hsl(0, 0%, 7.1%)"
},
"border-DEFAULT": {
cssVariable: "var(--border-default)",
value: "hsl(0, 0%, 16.1%)"
value: "hsl(0, 0%, 18%)"
},
"border-muted": {
cssVariable: "var(--border-muted)",
@@ -509,11 +517,11 @@ module.exports = {
},
"border-strong": {
cssVariable: "var(--border-strong)",
value: "hsl(0, 0%, 20%)"
value: "hsl(0, 0%, 21.2%)"
},
"border-stronger": {
cssVariable: "var(--border-stronger)",
value: "hsl(0, 0%, 22%)"
value: "hsl(0, 0%, 27.1%)"
},
"border-button-DEFAULT": {
cssVariable: "var(--border-button-default)",

7
packages/ui/internals/tokens/extract-design-tokens.js
View File

@@ -41,6 +41,13 @@ try {
console.log(`Theme file "${themeName}.json" written successfully.`)
})
// duplicate the /themes/concept-one.json file to /themes/dark-combined.json
const darkThemePath = path.join(themesDirectory, 'concept-one.json')
const darkCombinedThemePath = path.join(themesDirectory, 'dark-combined.json')
const darkThemeData = fs.readFileSync(darkThemePath)
fs.writeFileSync(darkCombinedThemePath, darkThemeData)
console.log('Dark combined theme file written successfully.')
console.log('Extraction completed!')
} catch (error) {
console.error('Error:', error.message)

2
packages/ui/src/components/ThemeProvider/singleThemes.ts
View File

@@ -5,7 +5,7 @@ export interface SingleTheme {
export const singleThemes = [
{ name: 'Dark', value: 'dark' }, // Classic Supabase dark
{ name: 'Deep Dark', value: 'deep-dark' }, // Deep Dark Supabase dark
{ name: 'Light', value: 'light' }, // Classic Supabase light
{ name: 'Classic Dark', value: 'classic-dark' }, // Deep Dark Supabase dark
{ name: 'System', value: 'system' }, // Classic Supabase light
]

2
packages/ui/src/components/Toggle/Toggle.module.css
View File

@@ -1,7 +1,7 @@
/* .sbui-toggle {
@apply p-0 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer;
@apply transition-colors ease-in-out duration-200;
@apply focus:outline-none bg-gray-200 dark:bg-gray-400;
@apply focus:outline-none bg-200 dark:bg-gray-400;
}
.sbui-toggle--active {

2
packages/ui/src/components/shadcn/ui/alert.tsx
View File

@@ -13,7 +13,7 @@ export const alertVariants = cva(
variants: {
variant: {
default:
'text-foreground bg-alternative border-alternative [&>svg]:text-background [&>svg]:bg-foreground',
'text-foreground bg-alternative border [&>svg]:text-background [&>svg]:bg-foreground',
destructive:
'text border-destructive-400 bg-destructive-200 [&>svg]:text-destructive-200 [&>svg]:bg-destructive-600',
warning:

2
packages/ui/src/components/shadcn/ui/dialog.tsx
View File

@@ -59,7 +59,7 @@ const DialogContentVariants = cva(
'data-[state=closed]:slide-out-to-left-[0%] data-[state=closed]:slide-out-to-top-[0%]',
'data-[state=open]:slide-in-from-left-[0%] data-[state=open]:slide-in-from-top-[0%]',
'sm:rounded-lg md:w-full',
'bg-200'
'bg-dash-sidebar'
),
{
variants: {

4
packages/ui/src/lib/tailwind-demo-classes.ts
View File

@@ -15,7 +15,9 @@ export default {
"bg-overlay-hover",
"bg-muted",
"bg-button",
"bg-dialog"
"bg-dialog",
"bg-dash-sidebar",
"bg-dash-canvas"
],
"border": [
"border",

18
packages/ui/src/lib/theme/defaultTheme.ts
View File

@@ -233,7 +233,7 @@ export default {
yellow: `bg-yellow-200 text-yellow-1100 border border-yellow-700`,
amber: `bg-amber-200 text-amber-1100 border border-amber-700`,
gold: `bg-gold-200 text-gold-1100 border border-gold-700`,
gray: `bg-gray-200 text-gray-1100 border border-gray-700`,
gray: `bg-200 text-gray-1100 border border-gray-700`,
slate: `bg-slate-200 text-slate-1100 border border-slate-700`,
},
},
@@ -252,7 +252,7 @@ export default {
description: `text-xs`,
variant: {
danger: {
base: `bg-red-200 btext-red-1200 border-red-700`,
base: `bg-red-200 text-red-1200 border-red-700`,
icon: `text-red-900`,
header: `text-red-1200`,
description: `text-red-1100`,
@@ -264,7 +264,7 @@ export default {
description: `text-amber-1100`,
},
info: {
base: `bg-alternative border-alternative`,
base: `bg-alternative border`,
icon: `text-foreground-lighter`,
header: `text-foreground`,
description: `text-foreground-light`,
@@ -850,17 +850,17 @@ export default {
sidepanel: {
base: `
z-50
bg-overlay
bg-dash-sidebar
flex flex-col
fixed
inset-y-0
h-full lg:h-screen
border-l border-overlay
border-l
shadow-xl
`,
header: `
space-y-1 py-4 px-4 bg-overlay sm:px-6
border-b border-overlay
space-y-1 py-4 px-4 bg-dash-sidebar sm:px-6
border-b
`,
contents: `
relative
@@ -873,7 +873,7 @@ export default {
footer: `
flex justify-end gap-2
p-4 bg-overlay
border-t border-overlay
border-t
`,
size: {
medium: `w-screen max-w-md h-full`,
@@ -1222,7 +1222,7 @@ export default {
modal: {
base: `
relative
bg-overlay
bg-dash-sidebar
my-4
border border-overlay
rounded-md

20
packages/ui/transformTokens.js
View File

@@ -83,7 +83,7 @@ StyleDictionary.registerTransform({
matcher: (prop) => prop.type === 'color',
transformer: (prop) => {
if (!prop.original.value) {
console.error(`No colorvalue detected for ${prop.name}.`)
console.error(`No color value detected for ${prop.name}.`)
}
if (prop.original.value === '#') {
@@ -224,11 +224,24 @@ console.log(`Building Theme Styles...`)
console.log(`\n`)
console.log(themeFiles)
themeFiles.map(function (filePath, i) {
let fileName = fileNameCleaner(filePath)
const isCombinedDark = fileName === 'dark-combined' ? true : false
// rename concept-one to dark-new
fileName = fileName === 'concept-one' ? 'deep-dark' : fileName
fileName = fileName === 'dark' ? 'classic-dark' : fileName
fileName = fileName === 'concept-one' ? 'dark' : fileName
const selector = isCombinedDark
? `[data-theme='classic-dark'],
.classic-dark,
[data-theme='dark'],
.dark`
: `[data-theme='${fileName}'],
.${fileName}`
let configTailwindFilesByType = []
@@ -254,8 +267,7 @@ themeFiles.map(function (filePath, i) {
options: {
showFileHeader: false,
outputReferences: true,
selector: `[data-theme='${fileName}'],
.${fileName}`,
selector: selector,
},
filter: (token) => token.filePath === filePath,
},