dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 01:15:03 +03:00
Code Issues Packages Projects Releases Wiki Activity

Migrate to styling tokens (#18314)

Browse Source 
* migrate some www components to tokens

* consolidate InteractiveShimmerCard to Panel component

* update tokens in blog

* update tokens in careers page

* update tokens in customers section

* update tokens in open-source section

* update tokens in Realtime page

* update tokens in Storage and Vector

* update tokens in SplitCodeBlockCarousel

* update tokens in PGCharts

* remove unused css files

* update tokens in Card

* update tokens in Pricing page

* clean up priving page imports

* remove hardcoded theme vars

* migrate first half of defaultTheme.ts to tokens

* migrate second half of defaultTheme.ts to tokens

* improve inputs

* add foreground to text-light and text-lighter

* add foreground to text-light and text-lighter

* migrate docs components with styling tokens

* migrate docs components with styling tokens

* fix broken Repos component

* fix broken classes in blog

* update tokens on Button and other components

* update tokens on IconPanel

* update studio main layout base styling tokens

* update tokens across studio, docs and www

* update tokens across studio, docs and www

* update ui/Panel to styling tokens

* update ExampleProject and TableEditorMenu tokens

* www vector page tokens

* update studio UI tokens

* update other studio UI tokens

* update more studio UI tokens

* change tokens here, change tokens there

* finish updating colors with tokens variables

* add gui sandbox for theme experimentation

* use common package for www, docs and studio and fix Command K tokens

* provide light mode default tokens options

* fix conflict leftover

* update loading line

* fix className typo

* fix prettier

* update themeSandbox preset default values

* fix text-background0

* prettier

* update warningBanner with warning color

* switch all border-border with border-default

* improve border-secondary and foreground-muted in light mode

* force ring color on toggle

* fix button bg color and border-muted light token

* fix input bg color

* fix dark button hover

* fix homepage product card

* fix code-hike table header colors

* button dark border

* remove tabIndex leftover from homepage main ctas

---------

Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
This commit is contained in:
Francesco SansalvadoreKevin GrünebergJonathan Summers-Muir
 authored and GitHub committed 2023-11-07 03:40:53 +00:00
1 parent 9894a87bbb
commit b91532f6c7
540 files changed
+2704 -3001
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/docs/components/ButtonCard.tsx
+4 -4
View File
@@ -1,6 +1,6 @@
import React, { FC } from 'react'
import Image from 'next/legacy/image'
import Link from 'next/link'
import { FC } from 'react'
interface Props {
title: string
@@ -23,8 +23,8 @@ const ButtonCard: FC<Props> = ({
<Link
href={to}
className={[
'h-full block shadow-none bg-scale-300 rounded transition',
'border border-transparent hover:border-scale-600',
'h-full block shadow-none bg-surface-100 rounded transition',
'border border-transparent hover:border-overlay',
].join(' ')}
>
{children ? (
@@ -43,7 +43,7 @@ const ButtonCard: FC<Props> = ({
) : (
icon
)}
<h3 className="my-0 text-base text-scale-1200">{title}</h3>
<h3 className="my-0 text-base text-foreground">{title}</h3>
<p className="my-0 text-sm">{description}</p>
</div>
)}
apps/docs/components/DocsCoverLogo.tsx
+41 -41
View File
@@ -45,7 +45,7 @@ const DocsCoverLogo = () => {
animate={pathMotionConfig.animate}
transition={pathMotionConfig.transition as any}
d="M125.25 191.383C167.828 191.383 202.344 156.867 202.344 114.289C202.344 71.7115 167.828 37.1953 125.25 37.1953C82.6724 37.1953 48.1562 71.7115 48.1562 114.289C48.1562 156.867 82.6724 191.383 125.25 191.383Z"
stroke="var(--colors-scale11)"
stroke="hsl(var(--foreground-light))"
strokeOpacity="0.1"
strokeWidth="0.7"
strokeMiterlimit="10"
@@ -213,7 +213,7 @@ const DocsCoverLogo = () => {
animate={pathMotionConfig.animate}
transition={pathMotionConfig.transition as any}
d="M218.024 169.846H32.498"
stroke="var(--colors-scale11)"
stroke="hsl(var(--foreground-light))"
strokeOpacity="0.1"
strokeWidth="0.7"
strokeMiterlimit="10"
@@ -289,8 +289,8 @@ const DocsCoverLogo = () => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(125.451 114.82) rotate(90) scale(109.781 0.5)"
>
<stop stopColor="var(--colors-scale11)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
<stop stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
</radialGradient>
<linearGradient
id="paint1_linear_0_1"
@@ -300,8 +300,8 @@ const DocsCoverLogo = () => {
y2="11.9994"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--colors-scale11)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
<stop stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint2_linear_0_1"
@@ -311,8 +311,8 @@ const DocsCoverLogo = () => {
y2="204.984"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--colors-scale11)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
<stop stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint3_linear_0_1"
@@ -322,8 +322,8 @@ const DocsCoverLogo = () => {
y2="13.9993"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--colors-scale11)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
<stop stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint4_linear_0_1"
@@ -333,8 +333,8 @@ const DocsCoverLogo = () => {
y2="204.984"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--colors-scale11)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
<stop stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint5_linear_0_1"
@@ -344,9 +344,9 @@ const DocsCoverLogo = () => {
y2="-7.94661"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--colors-scale10)" stopOpacity="0" />
<stop offset="0.489583" stopColor="var(--colors-scale11)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
<stop stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop offset="0.489583" stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint6_linear_0_1"
@@ -356,9 +356,9 @@ const DocsCoverLogo = () => {
y2="-3.99932"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--colors-scale10)" stopOpacity="0" />
<stop offset="0.489583" stopColor="var(--colors-scale11)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
<stop stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop offset="0.489583" stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint7_linear_0_1"
@@ -368,9 +368,9 @@ const DocsCoverLogo = () => {
y2="199.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--colors-scale10)" stopOpacity="0.1" />
<stop offset="0.505208" stopColor="var(--colors-scale11)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0.1" />
<stop stopColor="hsl(var(--foreground-lighter))" stopOpacity="0.1" />
<stop offset="0.505208" stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0.1" />
</linearGradient>
<radialGradient
id="paint8_radial_0_1"
@@ -380,8 +380,8 @@ const DocsCoverLogo = () => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(125.752 114.291) rotate(90) scale(109.271 0.5)"
>
<stop stopColor="var(--colors-scale11)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
<stop stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
</radialGradient>
<linearGradient
id="paint9_linear_0_1"
@@ -391,8 +391,8 @@ const DocsCoverLogo = () => {
y2="6.31757"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--colors-scale11)" stopOpacity="0.3" />
<stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
<stop stopColor="hsl(var(--foreground-light))" stopOpacity="0.3" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint10_linear_0_1"
@@ -402,8 +402,8 @@ const DocsCoverLogo = () => {
y2="200"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--colors-scale11)" stopOpacity="0.3" />
<stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
<stop stopColor="hsl(var(--foreground-light))" stopOpacity="0.3" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint11_linear_0_1"
@@ -413,9 +413,9 @@ const DocsCoverLogo = () => {
y2="199.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--colors-scale10)" stopOpacity="0.1" />
<stop offset="0.505208" stopColor="var(--colors-scale11)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0.1" />
<stop stopColor="hsl(var(--foreground-lighter))" stopOpacity="0.1" />
<stop offset="0.505208" stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0.1" />
</linearGradient>
<radialGradient
id="paint12_radial_0_1"
@@ -425,8 +425,8 @@ const DocsCoverLogo = () => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(125.261 59.2344) rotate(90) scale(0.5 263.749)"
>
<stop stopColor="var(--colors-scale11)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
<stop stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
</radialGradient>
<linearGradient
id="paint13_linear_0_1"
@@ -436,9 +436,9 @@ const DocsCoverLogo = () => {
y2="94.9749"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--colors-scale10)" stopOpacity="0.5" />
<stop offset="0.505208" stopColor="var(--colors-scale11)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0.5" />
<stop stopColor="hsl(var(--foreground-lighter))" stopOpacity="0.5" />
<stop offset="0.505208" stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0.5" />
</linearGradient>
<linearGradient
id="paint14_linear_0_1"
@@ -448,9 +448,9 @@ const DocsCoverLogo = () => {
y2="131.43"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--colors-scale10)" stopOpacity="0.5" />
<stop offset="0.505208" stopColor="var(--colors-scale11)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0.5" />
<stop stopColor="hsl(var(--foreground-lighter))" stopOpacity="0.5" />
<stop offset="0.505208" stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0.5" />
</linearGradient>
<linearGradient
id="paint15_linear_0_1"
@@ -460,9 +460,9 @@ const DocsCoverLogo = () => {
y2="1.99785"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--colors-scale10)" stopOpacity="0.1" />
<stop offset="0.505208" stopColor="var(--colors-scale11)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0.1" />
<stop stopColor="hsl(var(--foreground-lighter))" stopOpacity="0.1" />
<stop offset="0.505208" stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0.1" />
</linearGradient>
<linearGradient
id="paint16_linear_0_1"
apps/docs/components/Extensions.tsx
+4 -4
View File
@@ -48,7 +48,7 @@ export default function Extensions() {
return (
<>
<div className="mb-8 grid">
<label className="mb-2 text-xs text-scale-1100">Search extensions</label>
<label className="mb-2 text-xs text-foreground-light">Search extensions</label>
<Input
type="text"
placeholder="Extension name"
@@ -58,14 +58,14 @@ export default function Extensions() {
<div className="lg:grid lg:grid-cols-12">
<div className="col-span-3 not-prose">
<div className="lg:sticky top-24">
<h3 className="text-sm text-scale-1100">Filter</h3>
<h3 className="text-sm text-foreground-light">Filter</h3>
<ul className="mt-3 flex flex-wrap lg:grid gap-2 grow">
{tags.sort().map((tag) => (
<li key={tag}>
<label
htmlFor={tag}
className={`text-sm text-scale-1000 py-0.5 px-2 capitalize inline-block rounded-lg hover:bg-slate-400 hover:border-slate-400 cursor-pointer border ${
filters.includes(tag) ? 'bg-slate-400 ' : ''
className={`text-sm text-foreground-lighter py-0.5 px-2 capitalize inline-block rounded-lg hover:bg-surface-100 cursor-pointer border ${
filters.includes(tag) ? 'bg-surface-100 ' : ''
}`}
>
<span className="flex items-center gap-1">
apps/docs/components/FooterHelpCallout.tsx
+3 -3
View File
@@ -26,12 +26,12 @@ const FooterHelpCallout = ({
className="
min-w-full
px-8 py-6
bg-scale-300 dark:bg-whiteA-200
bg-background
rounded
text-sm text-scale-900
text-sm text-foreground-muted
"
>
<h5 className="text-sm text-scale-1100 m-0">{content[footerHelpType].title}</h5>
<h5 className="text-sm text-foreground-light m-0">{content[footerHelpType].title}</h5>
<ReactMarkdown>{content[footerHelpType].description}</ReactMarkdown>
</div>
</div>
apps/docs/components/GuidesTableOfContents.tsx
+2 -2
View File
@@ -16,7 +16,7 @@ const formatTOCHeader = (content: string) => {
if (x === '`') {
if (!begin) {
begin = true
res.push(`<code class="text-xs border rounded bg-scale-400 border-scale-500">`)
res.push(`<code class="text-xs border rounded bg-muted">`)
} else {
begin = false
res.push(`</code>`)
@@ -46,7 +46,7 @@ const GuidesTableOfContents: FC<Props> = ({ list }) => {
<li key={`${item.level}-${i}`} className={item.level === 3 ? 'ml-4' : ''}>
<a
href={`#${formatSlug(item.link)}`}
className="text-scale-1000 hover:text-brand transition-colors"
className="text-foreground-lighter hover:text-brand transition-colors"
dangerouslySetInnerHTML={{ __html: formatTOCHeader(removeAnchor(item.text)) }}
/>
</li>
apps/docs/components/HomePageCover.tsx
+5 -5
View File
@@ -63,7 +63,7 @@ const HomePageCover = (props) => {
const GettingStarted = () => (
<div
className="
border bg-scale-200
border bg-background
relative overflow-hidden
grid grid-cols-12
rounded-lg
@@ -74,11 +74,11 @@ const HomePageCover = (props) => {
<div className="md:max-w-xs shrink w-fit xl:max-w-none">
<div className="flex items-center gap-3 mb-3">
<IconBackground>
<IconPlay className="text-brand-600 dark:text-brand w-4" strokeWidth={2} />
<IconPlay className="text-brand w-4" strokeWidth={2} />
</IconBackground>
<h3 className="text-2xl m-0">Getting Started</h3>
</div>
<p className="text-scale-1100 text-sm">
<p className="text-foreground-light text-sm">
Discover how to set up a database to an app making queries in just a few minutes.
</p>
</div>
@@ -99,13 +99,13 @@ const HomePageCover = (props) => {
)
return (
<div className="w-full bg-scale-100 border-b prose dark:prose-dar max-w-none mb-16 md:mb-12 xl:mb-0">
<div className="w-full bg-alternative border-b prose dark:prose-dar max-w-none mb-16 md:mb-12 xl:mb-0">
<div className="max-w-7xl px-5 mx-auto py-8 sm:pb-16 sm:pt-12 xl:pt-16 flex flex-col xl:flex-row justify-between gap-12 xl:gap-12">
<div className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-start sm:items-center w-full max-w-xl xl:max-w-[33rem]">
<DocsCoverLogo />
<div className="flex flex-col">
<h1 className="m-0 mb-3 text-2xl sm:text-3xl">{props.meta?.title}</h1>
<p className="m-0 text-scale-1100">
<p className="m-0 text-foreground-light">
Learn how to get up and running with Supabase through tutorials, APIs and platform
resources.
</p>
apps/docs/components/LinkCard.tsx
+3 -3
View File
@@ -14,17 +14,17 @@ export default function LinkCard({
return (
<Link
href={link || '#'}
className="border-scale-200 hover:border-brand dark:bg-scale-400 m-4 w-full cursor-pointer rounded-md border p-4 shadow-sm hover:shadow-2xl lg:w-2/5"
className="border-background hover:border-brand bg-surface-200 m-4 w-full cursor-pointer rounded-md border p-4 shadow-sm hover:shadow-2xl lg:w-2/5"
>
{description ? (
<>
<h4 className="m-0 mb-4 p-0 text-base font-semibold">{title}</h4>
<p className="text-scale-1100 m-0 p-0">{description}</p>
<p className="text-foreground-light m-0 p-0">{description}</p>
</>
) : (
<div className="flex">
{icon}
<p className="text-scale-1200 m-0 p-0">{title}</p>
<p className="text-foreground m-0 p-0">{title}</p>
</div>
)}
</Link>
apps/docs/components/Navigation/Footer.tsx
+17 -11
View File
@@ -8,7 +8,7 @@ const Footer = () => (
<div className="mt-16">
<ul className="flex flex-col gap-2">
{primaryLinks.map(({ url, featherIcon: Icon, icon, text, ctaLabel }) => (
<li key={url} className="flex items-center gap-1 text-xs text-lighter">
<li key={url} className="flex items-center gap-1 text-xs text-foreground-lighter">
{icon && (
<svg
width="16"
@@ -19,7 +19,7 @@ const Footer = () => (
>
<path
d={icon}
stroke="var(--colors-scale9)"
stroke="hsl(var(--foreground-muted))"
strokeWidth={0.7}
strokeLinecap="round"
strokeLinejoin="round"
@@ -40,21 +40,27 @@ const Footer = () => (
))}
</ul>
</div>
<hr className="border-border my-6"></hr>
<hr className="border-default my-6"></hr>
<div className="flex gap-4 items-center justify-between">
<div className="flex flex-col lg:flex-row gap-3 ">
<Link href="https://supabase.com/" className="text-xs text-lighter">
<Link href="https://supabase.com/" className="text-xs text-foreground-lighter">
&copy; Supabase Inc
</Link>
<span className="text-xs text-lighter">—</span>
<span className="text-xs text-foreground-lighter">—</span>
{secondaryLinks.map(({ component: Component, ...item }) =>
item.url ? (
<Link href={item.url} key={item.url} className="text-xs text-lighter hover:underline">
<Link
href={item.url}
key={item.url}
className="text-xs text-foreground-lighter hover:underline"
>
{item.title}
</Link>
) : (
Component && (
<Component className="text-xs text-lighter hover:underline">{item.title}</Component>
<Component className="text-xs text-foreground-lighter hover:underline">
{item.title}
</Component>
)
)
)}
@@ -73,7 +79,7 @@ const Footer = () => (
fillRule="evenodd"
clipRule="evenodd"
d="M8.66832 1.55469C4.98649 1.55469 2.00195 4.54402 2.00195 8.23269C2.00195 11.1827 3.91187 13.686 6.56108 14.5687C6.8944 14.63 7.01573 14.424 7.01573 14.2467C7.01573 14.0887 7.0104 13.668 7.00706 13.1114C5.15248 13.5147 4.76116 12.216 4.76116 12.216C4.45851 11.444 4.0212 11.2387 4.0212 11.2387C3.41589 10.8254 4.06719 10.8334 4.06719 10.8334C4.73583 10.88 5.08782 11.5214 5.08782 11.5214C5.68246 12.5414 6.64841 12.2467 7.02773 12.076C7.08906 11.6447 7.26105 11.3507 7.45171 11.184C5.97178 11.0154 4.41518 10.442 4.41518 7.88335C4.41518 7.15469 4.67517 6.55802 5.10115 6.09135C5.03248 5.92269 4.80383 5.24335 5.16648 4.32469C5.16648 4.32469 5.72645 4.14469 6.99973 5.00869C7.54355 4.86036 8.10464 4.78482 8.66832 4.78402C9.23496 4.78669 9.80494 4.86069 10.3376 5.00869C11.6102 4.14469 12.1688 4.32402 12.1688 4.32402C12.5328 5.24335 12.3035 5.92269 12.2355 6.09135C12.6621 6.55802 12.9208 7.15469 12.9208 7.88335C12.9208 10.4487 11.3615 11.0134 9.87694 11.1787C10.1163 11.3847 10.3289 11.792 10.3289 12.4154C10.3289 13.3074 10.3209 14.028 10.3209 14.2467C10.3209 14.4254 10.4409 14.6334 10.7796 14.568C12.107 14.1228 13.261 13.2716 14.0784 12.1347C14.8958 10.9979 15.3353 9.6329 15.3347 8.23269C15.3347 4.54402 12.3495 1.55469 8.66832 1.55469Z"
fill="var(--colors-scale9)"
fill="hsl(var(--foreground-muted))"
/>
</svg>
</a>
@@ -89,7 +95,7 @@ const Footer = () => (
>
<path
d="M15.665 4.35595C15.481 3.66308 14.9388 3.11739 14.2505 2.93221C13.0028 2.5957 7.99964 2.5957 7.99964 2.5957C7.99964 2.5957 2.99655 2.5957 1.74883 2.93221C1.06047 3.11742 0.518326 3.66308 0.334321 4.35595C0 5.61181 0 8.23207 0 8.23207C0 8.23207 0 10.8523 0.334321 12.1082C0.518326 12.8011 1.06047 13.324 1.74883 13.5092C2.99655 13.8457 7.99964 13.8457 7.99964 13.8457C7.99964 13.8457 13.0027 13.8457 14.2505 13.5092C14.9388 13.324 15.481 12.8011 15.665 12.1082C15.9993 10.8523 15.9993 8.23207 15.9993 8.23207C15.9993 8.23207 15.9993 5.61181 15.665 4.35595ZM6.36334 10.6111V5.85307L10.545 8.23212L6.36334 10.6111Z"
fill="var(--colors-scale9)"
fill="hsl(var(--foreground-muted))"
/>
</svg>
</a>
@@ -105,7 +111,7 @@ const Footer = () => (
>
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
fill="var(--colors-scale9)"
fill="hsl(var(--foreground-muted))"
/>
</svg>
</a>
@@ -124,7 +130,7 @@ const Footer = () => (
fillRule="evenodd"
clipRule="evenodd"
d="M13.8781 3.13594C12.8583 2.66802 11.7648 2.32328 10.6215 2.12583C10.6006 2.12202 10.5798 2.13154 10.5691 2.15059C10.4285 2.40073 10.2727 2.72706 10.1636 2.98356C8.93387 2.79945 7.71044 2.79945 6.50592 2.98356C6.39681 2.72136 6.23538 2.40073 6.09411 2.15059C6.08339 2.13218 6.06259 2.12265 6.04176 2.12583C4.89905 2.32265 3.80554 2.66739 2.78517 3.13594C2.77633 3.13975 2.76876 3.14611 2.76374 3.15435C0.689563 6.25326 0.12136 9.276 0.400102 12.2613C0.401363 12.2759 0.409561 12.2898 0.420913 12.2987C1.78939 13.3037 3.115 13.9139 4.41599 14.3183C4.43681 14.3247 4.45887 14.317 4.47212 14.2999C4.77987 13.8796 5.0542 13.4364 5.28941 12.9704C5.3033 12.9431 5.29005 12.9107 5.26167 12.9C4.82654 12.7349 4.4122 12.5336 4.01364 12.3051C3.98212 12.2867 3.97959 12.2416 4.00859 12.22C4.09247 12.1571 4.17636 12.0917 4.25645 12.0257C4.27094 12.0136 4.29113 12.0111 4.30816 12.0187C6.92655 13.2142 9.76126 13.2142 12.3488 12.0187C12.3658 12.0105 12.386 12.013 12.4011 12.0251C12.4812 12.0911 12.5651 12.1571 12.6496 12.22C12.6786 12.2416 12.6767 12.2867 12.6452 12.3051C12.2466 12.5381 11.8323 12.7349 11.3965 12.8993C11.3681 12.9101 11.3555 12.9431 11.3694 12.9704C11.6097 13.4358 11.884 13.879 12.1861 14.2993C12.1987 14.317 12.2214 14.3247 12.2422 14.3183C13.5495 13.9139 14.8751 13.3037 16.2436 12.2987C16.2556 12.2898 16.2631 12.2765 16.2644 12.2619C16.598 8.8106 15.7056 5.81265 13.8989 3.15498C13.8944 3.14611 13.8869 3.13975 13.8781 3.13594ZM5.68043 10.4435C4.89211 10.4435 4.24257 9.71978 4.24257 8.83093C4.24257 7.94207 4.87952 7.21831 5.68043 7.21831C6.48763 7.21831 7.13089 7.94843 7.11827 8.83093C7.11827 9.71978 6.48132 10.4435 5.68043 10.4435ZM10.9967 10.4435C10.2084 10.4435 9.55884 9.71978 9.55884 8.83093C9.55884 7.94207 10.1958 7.21831 10.9967 7.21831C11.8039 7.21831 12.4471 7.94843 12.4345 8.83093C12.4345 9.71978 11.8039 10.4435 10.9967 10.4435Z"
fill="var(--colors-scale9)"
fill="hsl(var(--foreground-muted))"
/>
</g>
<defs>
apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
+3 -6
View File
@@ -12,10 +12,7 @@ const NavigationMenuHome = () => {
return (
<Fragment key={`section-container-${sectionIndex}-border`}>
{sectionIndex !== 0 && (
<div
className="h-px w-full bg-blackA-300 dark:bg-whiteA-300"
key={`section-${sectionIndex}-border`}
></div>
<div className="h-px w-full border-b" key={`section-${sectionIndex}-border`}></div>
)}
<div key={`section-${sectionIndex}`}>
<div className="flex flex-col gap-4">
@@ -25,7 +22,7 @@ const NavigationMenuHome = () => {
<div
key={link.label}
className={cn(
'font-mono uppercase text-xs text-scale-900 ',
'font-mono uppercase text-xs text-foreground-lighter',
i !== 0 && 'mt-4'
)}
>
@@ -38,7 +35,7 @@ const NavigationMenuHome = () => {
<li
className={[
'group flex items-center gap-2',
'text-sm transition-all duration-150 text-scale-1100 hover:text-scale-1200 hover:cursor-pointer ',
'text-sm transition-all duration-150 text-foreground-light hover:text-foreground hover:cursor-pointer ',
].join(' ')}
>
{link?.icon && <HomeMenuIconPicker icon={link.icon} />}
apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
+5 -5
View File
@@ -21,10 +21,10 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
icon?: string
}) => {
return (
<li key={id} className="function-link-item text-scale-1000 leading-3">
<li key={id} className="function-link-item text-foreground-lighter leading-3">
<Link
href={`#${id}`}
className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand flex gap-3"
className="cursor-pointer transition text-foreground-lighter text-sm hover:text-brand flex gap-3"
>
{icon && <img className="w-3" src={`${router.basePath}${icon}`} />}
{title}
@@ -38,7 +38,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
<span
className="
font-mono text-xs uppercase
text-scale-1200 font-medium
text-foreground font-medium
tracking-wider
mb-3
"
@@ -49,7 +49,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
}
const Divider = () => {
return <div className="h-px w-full bg-scale-500 my-3"></div>
return <div className="h-px w-full bg-border my-3"></div>
}
const MenuSections = [
@@ -117,7 +117,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
className="w-5 rounded"
/>
<h2 className={['text-scale-1200 ', !menu.title && 'capitalize'].join(' ')}>
<h2 className={['text-foreground ', !menu.title && 'capitalize'].join(' ')}>
{menu.title ?? currentLevel}
</h2>
</div>
apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
+6 -6
View File
@@ -19,7 +19,7 @@ const HeaderLink = React.memo(function HeaderLink(props: {
className={[
' ',
!props.title && 'capitalize',
props.url === router.asPath ? 'text-brand' : 'hover:text-brand text-scale-1200',
props.url === router.asPath ? 'text-brand' : 'hover:text-brand text-foreground',
].join(' ')}
>
{props.title ?? props.id}
@@ -54,8 +54,8 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
<>
{props.subItemIndex === 0 && (
<>
<div className="h-px w-full bg-scale-500 my-3"></div>
<span className="font-mono text-xs uppercase text-scale-1200 font-medium tracking-wider">
<div className="h-px w-full bg-border my-3"></div>
<span className="font-mono text-xs uppercase text-foreground font-medium tracking-wider">
{props.parent.name}
</span>
</>
@@ -69,7 +69,7 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
'cursor-pointer transition text-sm',
activeItem
? 'text-brand font-medium'
: 'hover:text-scale-1200 dark:hover:text-scale-1100 text-scale-1000',
: 'hover:text-foreground dark:hover:text-foreground-light text-foreground-lighter',
].join(' ')}
parent={props.subItem.parent}
>
@@ -99,7 +99,7 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
'cursor-pointer transition text-sm',
subSubItem.url === router.asPath
? 'text-brand'
: 'hover:text-brand text-scale-1000',
: 'hover:text-brand text-foreground-lighter',
].join(' ')}
>
{subSubItem.name}
@@ -125,7 +125,7 @@ const ContentLink = React.memo(function ContentLink(props: any) {
'cursor-pointer transition text-sm',
props.url === router.asPath
? 'text-brand'
: 'hover:text-scale-1200 dark:hover:text-scale-1100 text-scale-1000',
: 'hover:text-foreground dark:hover:text-foreground-light text-foreground-lighter',
].join(' ')}
>
{props.icon && (
apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
+5 -5
View File
@@ -62,9 +62,9 @@ const FunctionLink = React.memo(function FunctionLink({
document.getElementById(slug)?.scrollIntoView()
}}
className={cn(
'cursor-pointer transition text-sm hover:text-scale-1200 gap-3 relative',
'cursor-pointer transition text-sm hover:text-foreground gap-3 relative',
isParent ? 'flex justify-between' : 'leading-3',
active ? 'text-brand' : 'text-scale-1000'
active ? 'text-brand' : 'text-foreground-lighter'
)}
>
{icon && <Image width={16} height={16} alt={icon} src={`${router.basePath}${icon}`} />}
@@ -122,7 +122,7 @@ const RenderLink = React.memo(function RenderLink({ section, basePath }: RenderL
isParent
isSubItem
/>
<Accordion.Content className="transition data-open:animate-slide-down data-closed:animate-slide-up border-l border-scale-600 pl-3 ml-1 data-open:mt-2 grid gap-2.5">
<Accordion.Content className="transition data-open:animate-slide-down data-closed:animate-slide-up border-l border-control pl-3 ml-1 data-open:mt-2 grid gap-2.5">
{section.items.map((item) => {
return (
<FunctionLink
@@ -144,7 +144,7 @@ const RenderLink = React.memo(function RenderLink({ section, basePath }: RenderL
const SideMenuTitle = ({ title }: { title: string }) => {
return (
<span className="font-mono text-xs uppercase text-scale-1200 font-medium tracking-wider">
<span className="font-mono text-xs uppercase text-foreground font-medium tracking-wider">
{title}
</span>
)
@@ -180,7 +180,7 @@ const NavigationMenuRefListItems = ({
href="/"
className={[
'flex items-center gap-1 text-xs group mb-3',
'text-base transition-all duration-200 text-scale-1100 hover:text-brand-600 hover:cursor-pointer ',
'text-base transition-all duration-200 text-foreground-light hover:text-brand-600 hover:cursor-pointer',
].join(' ')}
>
<div className="relative w-2">
apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx
+6 -3
View File
@@ -83,8 +83,8 @@ const TopNavBar: FC = () => {
hover:bg-opacity-100
border
transition
border-scale-500 pl-1.5 md:pl-3 pr-1.5 w-full h-[32px] rounded
text-lighter
pl-1.5 md:pl-3 pr-1.5 w-full h-[32px] rounded
text-foreground-lighter
"
>
<div className="flex items-center space-x-2">
@@ -117,7 +117,10 @@ const TopNavBar: FC = () => {
rel="noreferrer noopener"
className="px-2.5 py-1"
>
<IconGitHub size={16} className="text-scale-1100 hover:text-scale-1200 transition" />
<IconGitHub
size={16}
className="text-foreground-light hover:text-foreground transition"
/>
</Link>
<ThemeToggle />
</div>
apps/docs/components/Navigation/SideBar.tsx
+15 -15
View File
@@ -43,20 +43,20 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
return (
<div
className="dark:bg-scale-200 dark:border-scale-400 sidebar-width sticky top-16
className="bg-background border-muted sidebar-width sticky top-16
h-screen overflow-y-scroll border-r py-8 px-6 sidebar-menu-container hidden lg:block"
>
{isInReferencePages && (
<>
<Link href="/reference">
<div className="flex items-center space-x-4 opacity-75 hover:opacity-100 transition">
<IconArrowLeft size={16} strokeWidth={2} className="text-scale-1200" />
<span className="text-sm text-scale-1200">All Reference Docs</span>
<IconArrowLeft size={16} strokeWidth={2} className="text-foreground" />
<span className="text-sm text-foreground">All Reference Docs</span>
</div>
</Link>
{referenceMeta !== undefined && (
<div className="my-5 flex items-center space-x-4">
<div className="h-10 w-10 rounded bg-scale-500 flex items-center justify-center">
<div className="h-10 w-10 rounded bg-surface-100 flex items-center justify-center">
<Image
className="rounded"
width={24}
@@ -65,7 +65,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
src={referenceMeta.icon}
/>
</div>
<p className="text-scale-1200 font-bold">{referenceMeta.name}</p>
<p className="text-foreground font-bold">{referenceMeta.name}</p>
</div>
)}
</>
@@ -80,8 +80,8 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
'py-1.5 px-5 rounded text-sm transition',
`${
item.url === asPath
? 'bg-scale-200 text-brand'
: 'text-scale-1100 hover:text-scale-1200'
? 'bg-background text-brand'
: 'text-foreground-light hover:text-foreground'
}`,
].join(' ')}
>
@@ -101,11 +101,11 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
<Accordion.Item key={group.label} value={group.label}>
<Accordion.Trigger className="w-full flex items-center space-x-2 py-1.5">
<IconChevronRight
className="transition text-scale-1000 data-open-parent:rotate-90"
className="transition text-foreground-lighter data-open-parent:rotate-90"
size={14}
strokeWidth={2}
/>
<span className="text-scale-1200 text-sm group-hover:text-brand transition">
<span className="text-foreground text-sm group-hover:text-brand transition">
{group.label}
</span>
</Accordion.Trigger>
@@ -119,8 +119,8 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
'py-1.5 px-5 rounded text-sm transition',
`${
section.url === asPath
? 'bg-scale-200 text-brand'
: 'text-scale-1100 hover:text-scale-1200'
? 'bg-background text-brand'
: 'text-foreground-light hover:text-foreground'
}`,
].join(' ')}
>
@@ -140,11 +140,11 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
<Accordion.Item value={section.name}>
<Accordion.Trigger className="flex items-center space-x-2 px-4 py-1.5">
<IconChevronRight
className="transition text-scale-1000 data-open-parent:rotate-90"
className="transition text-foreground-lighter data-open-parent:rotate-90"
size={14}
strokeWidth={2}
/>
<span className="text-scale-1200 text-sm group-hover:text-brand transition">
<span className="text-foreground text-sm group-hover:text-brand transition">
{section.name}
</span>
</Accordion.Trigger>
@@ -157,8 +157,8 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
'py-1.5 ml-4 px-5 rounded text-sm transition',
`${
item.url === asPath
? 'bg-scale-200 text-brand'
: 'text-scale-1100 hover:text-scale-1200'
? 'bg-background text-brand'
: 'text-foreground-light hover:text-foreground'
}`,
].join(' ')}
>
apps/docs/components/Options.tsx
+12 -8
View File
@@ -18,9 +18,9 @@ const Options: FC<PropsWithChildren<IOptions>> & OptionsSubComponents = (props)
<button
className={[
'px-5',
'border-t border-l border-r border-scale-500',
'text-left text-sm text-scale-1100',
'hover:bg-scale-300 transition-all',
'border-t border-l border-r border-default',
'text-left text-sm text-foreground-light',
'hover:bg-surface-100 transition-all',
'flex items-center gap-2',
open ? 'w-full py-1.5 rounded-tl-lg rounded-tr-lg' : 'py-1 border-b rounded-full',
@@ -50,28 +50,32 @@ const Option: FC<IOption> = (props) => {
<div
className="
px-5 py-3 first:border-t border-b border-l border-r
border-scale-500
border-default
last:rounded-bl-lg last:rounded-br-lg
flex flex-col gap-3
"
>
<div className="flex gap-3 items-center">
<span className="text-sm text-scale-1200 font-mono font-medium">
<span className="text-sm text-foreground font-mono font-medium">
{props.name ?? 'no-name'}
</span>
<span>
{props.isOptional ? (
<div className="text-[10px] px-3 tracking-wide font-mono text-scale-900">Optional</div>
<div className="text-[10px] px-3 tracking-wide font-mono text-foreground-lighter">
Optional
</div>
) : (
<div className="text-[10px] border border-amber-700 bg-amber-300 text-amber-900 px-2 tracking-wide font-mono py-0.25 rounded-full">
REQUIRED
</div>
)}
</span>
<span className="text-scale-900 text-xs">{props.type ?? 'no type'}</span>
<span className="text-foreground-muted text-xs">{props.type ?? 'no type'}</span>
</div>
{props.description && <p className="text-sm text-scale-1000 m-0">{props.description}</p>}
{props.description && (
<p className="text-sm text-foreground-lighter m-0">{props.description}</p>
)}
{props.children}
</div>
apps/docs/components/Pagination.tsx
+3 -3
View File
@@ -13,7 +13,7 @@ const Pagination = ({ currentPage, totalCount }: { currentPage: number; totalCou
<li>
<Link
href={`/discussions?page=${currentPage - 1}`}
className="border-scale-600 bg-scale-300 inline-flex h-8 w-8 items-center justify-center rounded border"
className="border border-control bg-surface-100 inline-flex h-8 w-8 items-center justify-center rounded"
>
<IconArrowLeft className="stroke-2 transition group-hover:-translate-x-1" height={12.5} />
</Link>
@@ -25,7 +25,7 @@ const Pagination = ({ currentPage, totalCount }: { currentPage: number; totalCou
<Link
href={`/discussions?page=${page}`}
className={`border-scale-600 inline-flex h-8 w-8 items-center justify-center rounded border ${
currentPage === page ? 'bg-brand' : 'bg-scale-300'
currentPage === page ? 'bg-brand' : 'bg-surface-100'
}`}
>
{page}
@@ -36,7 +36,7 @@ const Pagination = ({ currentPage, totalCount }: { currentPage: number; totalCou
<li>
<Link
href={`/discussions?page=${currentPage + 1}`}
className="border-scale-600 bg-scale-300 inline-flex h-8 w-8 items-center justify-center rounded border"
className="border-control bg-surface-100 inline-flex h-8 w-8 items-center justify-center rounded border"
>
<IconArrowRight
className="stroke-2 transition group-hover:-translate-x-1"
apps/docs/components/Params.tsx
+6 -4
View File
@@ -4,19 +4,21 @@ const Param = ({ name, isOptional, type, description, children }: IParamProps) =
return (
<div className="border-t border-b py-5 flex flex-col gap-3 debugger">
<div className="flex gap-3 items-center">
<span className="text-sm text-scale-1200 font-mono font-medium">{name ?? 'no-name'}</span>
<span className="text-sm text-foreground font-mono font-medium">{name ?? 'no-name'}</span>
<span>
{isOptional ? (
<div className="text-[10px] px-3 tracking-wide font-mono text-scale-900">Optional</div>
<div className="text-[10px] px-3 tracking-wide font-mono text-foreground-lighter">
Optional
</div>
) : (
<div className="text-[10px] border border-amber-700 bg-amber-300 text-amber-900 px-2 tracking-wide font-mono py-0.25 rounded-full">
REQUIRED
</div>
)}
</span>
<span className="text-scale-900 text-xs">{type ?? 'no type'}</span>
<span className="text-foreground-muted text-xs">{type ?? 'no type'}</span>
</div>
{description && <p className="text-sm text-scale-1000 m-0">{description} </p>}
{description && <p className="text-sm text-foreground-lighter m-0">{description} </p>}
{children}
</div>
)
apps/docs/components/RefVersionDropdown.tsx
+6 -6
View File
@@ -42,17 +42,17 @@ const RevVersionDropdown = () => {
className="
group
justify-between
bg-scaleA-200
bg-control
border
hover:border-scale-600
hover:bg-scaleA-300
border-scale-500 px-2 h-[32px] rounded
hover:border-control
hover:bg-overlay-hover
border-control px-2 h-[32px] rounded
font-mono
flex items-center gap-1 text-scale-900 text-xs group-hover:text-scale-1200 transition
flex items-center gap-1 text-foreground-muted text-xs group-hover:text-foreground transition
"
>
{/* <span>version</span> */}
<span className="text-scale-1200 text-sm group-hover:text-scale-1200 transition">
<span className="text-foreground text-sm group-hover:text-foreground transition">
{currentVersion}.0
</span>
<IconChevronDown size={14} strokeWidth={2} />
apps/docs/components/StepHike/index.tsx
+4 -94
View File
@@ -23,73 +23,8 @@ const StepHike = ({ children, title }) => {
if (steps.length === 0 || !steps)
throw 'StepHike component needs at least 1 <StepHike.Step> child'
// console.log('length of the steps filter', steps.length)
return (
<div className="">
{/* <div
className="
sticky w-full top-[96px] z-50 p-5 rounded-lg
flex gap-3 items-center
bg-white-1200 dark:bg-scale-200
border-t border-l border-r border-scale-600
h-[60px]
not-prose
rounded-bl-none
rounded-br-none
shadow-md
-mb-1.5
"
>
<h3 className="text-scale-1200 text-xl">{title}</h3>
<div className="justify-end grow flex gap-3">
<Button type="default" onClick={() => handlePrev()} disabled={activeStep?.step === 0}>
Prev
</Button>
<Button
type="default"
onClick={() => handleNext()}
disabled={steps.length - 1 === activeStep?.step}
>
Next
</Button>
</div>
</div> */}
{/* <div
className="sticky w-full top-[128px] bottom-[64px] z-10 p-5 rounded-lg
flex gap-3 items-center
backdrop-blur-lg backdrop-filter bg-white-1200 dark:bg-whiteA-300
h-[60px]
not-prose
"
>
<div className="flex items-center gap-6">
<div className="border bg-scale-600 border-scale-700 flex w-7 h-7 items-center justify-center rounded text-base text-scale-1200 font-semibold font-mono">
{activeStep?.step + 1}
</div>
<h3 className="text-scale-1200 text-xl">
{steps[activeStep?.step] && steps[activeStep?.step].props.title}
</h3>
<span className="font-mono uppercase text-xs">
Step {activeStep?.step + 1} of {steps?.length}
</span>
</div>
<div className="justify-end grow flex gap-3">
<Button type="default" onClick={() => handlePrev()} disabled={activeStep?.step === 0}>
Prev
</Button>
<Button
type="default"
onClick={() => handleNext()}
disabled={steps.length - 1 === activeStep?.step}
>
Next
</Button>
</div>
</div> */}
<StepHikeContext.Provider value={{ activeStep, steps }}>{children}</StepHikeContext.Provider>
</div>
)
@@ -104,27 +39,6 @@ const Step = ({ children, title, step }) => {
const ChildrenRender = ({ active }) => <div className="pl-[74px]">{children}</div>
// const ref = useRef<HTMLDivElement | null>(null)
// useEffect(() => {
// const cachedRef = ref.current
// const observer = new IntersectionObserver(
// ([e]) =>
// // setStuck(e.intersectionRatio < 1)
// console.log('scroll', title),
// {
// threshold: [0],
// rootMargin: '0px 0px 0px 0px',
// }
// )
// // const cachedRef: HTMLDivElement | null
// // Argument of type 'HTMLDivElement | null' is not assignable to parameter of type 'Element'.
// // Type 'null' is not assignable to type 'Element'.ts(2345)
// observer.observe(cachedRef)
// return () => observer.unobserve(cachedRef)
// }, [ref])
const { ref } = useInView({
rootMargin: '10px 20px 30px 40px',
threshold: 1,
@@ -138,24 +52,20 @@ const Step = ({ children, title, step }) => {
<>
<StepHikeContext.Consumer>
{({ activeStep, steps }) => {
// console.log('activeStep', activeStep)
const cleanTitleId = title.replaceAll(' ', '-').toLowerCase()
const active = cleanTitleId === activeStep?.titleId
// useEffect(() => {}, [])
return (
<div>
{/* <div className="h-[2px] w-full bg-scale-500"></div> */}
<div
ref={ref}
className="sticky w-full top-[64px] z-10 p-5 rounded-lg
flex gap-3 items-center
backdrop-blur-lg backdrop-filter bg-white-1200 dark:bg-whiteA-300
backdrop-blur-lg backdrop-filter bg-background
border-b border-l border-r border-scale-600 border-t
border-b border-l border-r border-control border-t
h-[60px]
not-prose
@@ -163,10 +73,10 @@ const Step = ({ children, title, step }) => {
"
>
<div className="flex items-center gap-6">
<div className="border bg-scale-600 border-scale-700 flex w-7 h-7 items-center justify-center rounded text-base text-scale-1200 font-semibold font-mono">
<div className="border bg-selection border-strong flex w-7 h-7 items-center justify-center rounded text-base text-foreground font-semibold font-mono">
{step}
</div>
<h3 className="text-scale-1200 text-xl" id={cleanTitleId}>
<h3 className="text-foreground text-xl" id={cleanTitleId}>
{title}
</h3>
<span className="font-mono uppercase text-xs">
apps/docs/components/StepHikeCompact/index.tsx
+5 -5
View File
@@ -48,7 +48,7 @@ const Step: FC<PropsWithChildren<IStep>> = ({ children, title, step }) => {
w-full
h-full
py-1
bg-scale-400
bg-overlay
"
></div>
</div>
@@ -62,9 +62,9 @@ const Step: FC<PropsWithChildren<IStep>> = ({ children, title, step }) => {
>
<div className="flex items-center gap-6">
<div
className="border bg-white dark:bg-scale-400
border-scale-600 flex items-center justify-center rounded-full
w-6 h-6 text-xs text-scale-1200 font-normal font-mono
className="border bg-surface-100
border-control flex items-center justify-center rounded-full
w-6 h-6 text-xs text-foreground font-normal font-mono
dropshadow-sm
"
>
@@ -80,7 +80,7 @@ const Step: FC<PropsWithChildren<IStep>> = ({ children, title, step }) => {
const Details: FC<PropsWithChildren<IDetails>> = ({ children, title, fullWidth = false }) => {
return (
<div className={cn(fullWidth ? 'col-span-12' : 'col-span-5', 'ml-12', 'lg:ml-0')}>
<h3 className="mt-0 text-scale-1200 text-base">{title}</h3>
<h3 className="mt-0 text-foreground text-base">{title}</h3>
{children}
</div>
)
apps/docs/components/TableOfContents.tsx
+2 -2
View File
@@ -33,7 +33,7 @@ const formatTOCHeader = (content: string) => {
if (x === '`') {
if (!begin) {
begin = true
res.push(`<code class="text-xs border rounded bg-scale-400 border-scale-500">`)
res.push(`<code class="text-xs border rounded bg-surface-200 border-overlay">`)
} else {
begin = false
res.push(`</code>`)
@@ -69,7 +69,7 @@ const TableOfContents: FC<Props> = ({ toc, video }) => {
<li key={i} id={item.lvl} style={{ marginLeft: `${(item.lvl - 2) * 1}rem` }}>
<a
href={`#${formatSlug(item.slug)}`}
className="text-scale-1000 hover:text-brand transition-colors"
className="text-foreground-lighter hover:text-brand transition-colors"
dangerouslySetInnerHTML={{ __html: formatTOCHeader(removeAnchor(item.content)) }}
/>
</li>
apps/docs/components/reference/ApiOperationSection.tsx
+7 -7
View File
@@ -19,12 +19,12 @@ const ApiOperationSection = (props) => {
>
<RefSubLayout.Details>
<div className="mt-4">
<code className="text-md flex gap-4 text-md text-scale-900 break-all">
<code className="text-md flex gap-4 text-md text-foreground-lighter break-all">
<span
className="
uppercase
whitespace-nowrap
bg-scale-1200 text-scale-100
bg-foreground text-background
flex items-center justify-center
rounded-full font-mono font-medium text-xs px-2 py-0.5"
>
@@ -40,7 +40,7 @@ const ApiOperationSection = (props) => {
{operation.parameters &&
operation.parameters.filter((parameter) => parameter.in === 'path').length > 0 && (
<div className="not-prose mt-12">
<h5 className="mb-3 text-base text-scale-1200">Path Parameters</h5>
<h5 className="mb-3 text-base text-foreground">Path Parameters</h5>
<ul className="mt-4">
{operation.parameters &&
operation.parameters
@@ -56,7 +56,7 @@ const ApiOperationSection = (props) => {
{operation.parameters &&
operation.parameters.filter((parameter) => parameter.in === 'query').length > 0 && (
<div className="not-prose mt-12">
<h5 className="mb-3 text-base text-scale-1200">Query Parameters</h5>
<h5 className="mb-3 text-base text-foreground">Query Parameters</h5>
<ul className="mt-4">
{operation.parameters &&
operation.parameters
@@ -72,7 +72,7 @@ const ApiOperationSection = (props) => {
{operation.parameters &&
operation.parameters.filter((parameter) => parameter.in === 'header').length > 0 && (
<div className="not-prose mt-12">
<h5 className="mb-3 text-base text-scale-1200">Query Parameters</h5>
<h5 className="mb-3 text-base text-foreground">Query Parameters</h5>
<ul className="mt-4">
{operation.parameters &&
operation.parameters
@@ -86,7 +86,7 @@ const ApiOperationSection = (props) => {
</RefSubLayout.Details>
{operation.responseList && operation.responseList.length > 0 && (
<RefSubLayout.Examples>
<h5 className="mb-3 text-base text-scale-1200">Responses</h5>
<h5 className="mb-3 text-base text-foreground">Responses</h5>
<Tabs
scrollable
size="small"
@@ -96,7 +96,7 @@ const ApiOperationSection = (props) => {
>
{operation.responseList.map((response: any) => (
<Tabs.Panel id={response.responseCode} label={response.responseCode}>
<p className="text-scale-1000">{response.description}</p>
<p className="text-background">{response.description}</p>
{response?.content && response?.content['application/json'] && (
<div className="mt-8">
<CodeBlock language="bash" className="relative">
apps/docs/components/reference/CLICommandSection.tsx
+7 -7
View File
@@ -79,7 +79,7 @@ const CliCommandSection = (props) => {
<ReactMarkdown>{command.description}</ReactMarkdown>
</div>
) : (
<p className="capitalize mb-4 scroll-mt-16 mt-0 text-scale-1100 text-base">
<p className="capitalize mb-4 scroll-mt-16 mt-0 text-foreground-light text-base">
{command.summary}
</p>
)}
@@ -87,16 +87,16 @@ const CliCommandSection = (props) => {
{command.subcommands?.length > 0 && (
<div className="mb-3">
<h3 className="text-lg text-scale-1200 mb-3">Available Commands</h3>
<h3 className="text-lg text-foreground mb-3">Available Commands</h3>
<ul>
{command.subcommands.map((subcommand) => (
<li key={subcommand} className="flex items-center gap-3">
<div className="text-scale-900">
<div className="text-foreground-muted">
<IconChevronRight size={14} strokeWidth={2} />
</div>
<a
href={`#${subcommand}`}
className="transition text-scale-1100 hover:text-brand"
className="transition text-foreground-light hover:text-brand"
>
$ {subcommand.replace(/-/g, ' ')}
</a>
@@ -107,7 +107,7 @@ const CliCommandSection = (props) => {
)}
{commandFlags.length > 0 && (
<>
<h3 className="text-lg text-scale-1200 mb-3">Flags</h3>
<h3 className="text-lg text-foreground mb-3">Flags</h3>
<ul className="">
{commandFlags.map((flag: Flag) => (
<>
@@ -164,7 +164,7 @@ const CliCommandSection = (props) => {
defaultOpen={false}
>
<CodeBlock
className="useless-code-block-class rounded !rounded-tl-none !rounded-tr-none border border-scale-500"
className="useless-code-block-class rounded !rounded-tl-none !rounded-tr-none border border-DEFAULT"
language="bash"
hideLineNumbers={true}
>
@@ -178,7 +178,7 @@ const CliCommandSection = (props) => {
label="Notes"
defaultOpen={false}
>
<div className="bg-scale-300 border border-scale-500 rounded !rounded-tl-none !rounded-tr-none prose max-w-none px-5 py-2">
<div className="bg-overlay border border-overlay rounded !rounded-tl-none !rounded-tr-none prose max-w-none px-5 py-2">
<ReactMarkdown className="text-sm">{example.description}</ReactMarkdown>
</div>
</RefDetailCollapse>
apps/docs/components/reference/RefDetailCollapse.tsx
+4 -5
View File
@@ -18,15 +18,14 @@ const RefDetailCollapse: React.FC<
className={[
'transition-all ease-out',
'h-8',
'bg-scale-200 data-open:bg-scale-300',
'dark:bg-scale-300 dark:data-open:bg-scale-500',
'border border-scale-500 w-full flex items-center gap-3 px-5',
'bg-surface-100 data-open:bg-surface-200',
'border w-full flex items-center gap-3 px-5',
'rounded-tl rounded-tr',
'data-closed:rounded-bl data-closed:rounded-br',
'text-scale-1100 text-xs',
'text-foreground-light text-xs',
].join(' ')}
>
<div className="data-open-parent:rotate-90 text-scale-900">
<div className="data-open-parent:rotate-90 text-foreground-lighter">
<IconChevronRight size={12} strokeWidth={2} />
</div>
{props.label}
apps/docs/components/reference/RefFunctionSection.tsx
+7 -7
View File
@@ -54,7 +54,7 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
{/* // parameters */}
{parameters && (
<div className="not-prose mt-12">
<h5 className="mb-3 text-base text-scale-1200">Parameters</h5>
<h5 className="mb-3 text-base text-foreground">Parameters</h5>
<ul className="">
{parameters.map((param) => {
// grab override params from yaml file
@@ -172,13 +172,13 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
tables.length > 0 &&
tables.map((table) => {
return (
<div className="bg-scale-300 border rounded prose max-w-none">
<div className="bg-scale-200 px-5 py-2">
<div className="bg-surface-100 border rounded prose max-w-none">
<div className="bg-background px-5 py-2">
<div className="flex gap-2 items-center">
<div className="text-brand">
<IconDatabase size={16} />
</div>
<h5 className="text-xs text-scale-1200">
<h5 className="text-xs text-foreground">
{table.name}
</h5>
</div>
@@ -188,7 +188,7 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
})}
{sql && (
<CodeBlock
className="useless-code-block-class my-0 border border-t-0 border-scale-500 !rounded-tl-none !rounded-tr-none"
className="useless-code-block-class my-0 border border-t-0 border-default !rounded-tl-none !rounded-tr-none"
language="sql"
hideLineNumbers={true}
>
@@ -206,7 +206,7 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
defaultOpen={false}
>
<CodeBlock
className="useless-code-block-class rounded !rounded-tl-none !rounded-tr-none border border-scale-500"
className="useless-code-block-class rounded !rounded-tl-none !rounded-tr-none border border-default"
language={codeBlockLang}
hideLineNumbers={true}
>
@@ -221,7 +221,7 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
label="Notes"
defaultOpen={false}
>
<div className="bg-scale-300 border border-scale-500 rounded !rounded-tl-none !rounded-tr-none prose max-w-none px-5 py-2">
<div className="bg-surface-100 border border-default rounded !rounded-tl-none !rounded-tr-none prose max-w-none px-5 py-2">
<ReactMarkdown className="text-sm">
{example.description}
</ReactMarkdown>
apps/docs/components/reference/enrichments/cli/CliGlobalFlagsHandler.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ const CliGlobalFlagsHandler = () => {
return (
<RefSubLayout.EducationRow className="not-prose">
<RefSubLayout.Details>
<h3 className="text-lg text-scale-1200 mb-3">Flags</h3>
<h3 className="text-lg text-foreground mb-3">Flags</h3>
<ul className="">
{spec.flags.map((flag) => {
return (
apps/docs/docs/ref/api/introduction.mdx
+1 -1
View File
@@ -7,7 +7,7 @@ hideTitle: true
<div className="flex items-start gap-6 not-prose" id="introduction">
<img src="/docs/img/icons/menu/reference-api.svg" className="w-8 h-8 rounded" />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">Management API</h1>
<h1 className="text-3xl text-foreground m-0">Management API</h1>
</div>
</div>
apps/docs/docs/ref/cli/introduction.mdx
+1 -1
View File
@@ -7,7 +7,7 @@ hideTitle: true
<div className="flex items-start gap-6 not-prose" id="introduction">
<img src="/docs/img/icons/menu/reference-cli.svg" className="w-8 h-8 rounded" />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">Supabase CLI</h1>
<h1 className="text-3xl text-foreground m-0">Supabase CLI</h1>
</div>
</div>
apps/docs/docs/ref/csharp/introduction.mdx
+4 -2
View File
@@ -7,8 +7,10 @@ hideTitle: true
<div className="flex items-start gap-6 not-prose" id="introduction">
<IconMenuCsharp width={35} height={35} />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">C# Client Library</h1>
<h2 className="text-base font-mono text-scale-1100">@supabase-community/supabase-csharp</h2>
<h1 className="text-3xl text-foreground m-0">C# Client Library</h1>
<h2 className="text-base font-mono text-foreground-light">
@supabase-community/supabase-csharp
</h2>
</div>
</div>
apps/docs/docs/ref/dart/introduction.mdx
+2 -2
View File
@@ -7,8 +7,8 @@ hideTitle: true
<div className="flex items-start gap-6 not-prose" id="introduction">
<IconMenuFlutter width={35} height={35} />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">Flutter Client Library</h1>
<h2 className="text-base font-mono text-scale-1100">supabase-flutter</h2>
<h1 className="text-3xl text-foreground m-0">Flutter Client Library</h1>
<h2 className="text-base font-mono text-foreground-light">supabase-flutter</h2>
</div>
</div>
apps/docs/docs/ref/dart/v0/introduction.mdx
+2 -2
View File
@@ -7,8 +7,8 @@ hideTitle: true
<div className="flex items-start gap-6 not-prose" id="introduction">
<IconMenuFlutter width={35} height={35} />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">Flutter Client Library</h1>
<h2 className="text-base font-mono text-scale-1100">supabase-flutter</h2>
<h1 className="text-3xl text-foreground m-0">Flutter Client Library</h1>
<h2 className="text-base font-mono text-foreground-light">supabase-flutter</h2>
</div>
</div>
apps/docs/docs/ref/javascript/introduction.mdx
+2 -2
View File
@@ -7,8 +7,8 @@ hideTitle: true
<div className="flex items-start gap-6 not-prose" id="introduction">
<IconMenuJavascript width={35} height={35} />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">JavaScript Client Library</h1>
<h2 className="text-base font-mono text-scale-1100">@supabase/supabase-js</h2>
<h1 className="text-3xl text-foreground m-0">JavaScript Client Library</h1>
<h2 className="text-base font-mono text-foreground-light">@supabase/supabase-js</h2>
</div>
</div>
apps/docs/docs/ref/javascript/v1/introduction.mdx
+2 -2
View File
@@ -7,8 +7,8 @@ hideTitle: true
<div className="flex items-start gap-6 not-prose" id="introduction">
<IconMenuJavascript width={35} height={35} />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">JavaScript Client Library</h1>
<h2 className="text-base font-mono text-scale-1100">@supabase/supabase-js</h2>
<h1 className="text-3xl text-foreground m-0">JavaScript Client Library</h1>
<h2 className="text-base font-mono text-foreground-light">@supabase/supabase-js</h2>
</div>
</div>
apps/docs/docs/ref/kotlin/introduction.mdx
+2 -2
View File
@@ -7,8 +7,8 @@ hideTitle: true
<div className="flex items-start gap-6 not-prose" id="introduction">
<IconMenuKotlin width={35} height={35} />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">Kotlin Client Library</h1>
<h2 className="text-base font-mono text-scale-1100">@supabase-community/supabase-kt</h2>
<h1 className="text-3xl text-foreground m-0">Kotlin Client Library</h1>
<h2 className="text-base font-mono text-foreground-light">@supabase-community/supabase-kt</h2>
</div>
</div>
apps/docs/docs/ref/python/introduction.mdx
+2 -2
View File
@@ -7,8 +7,8 @@ hideTitle: true
<div className="flex items-start gap-6 not-prose" id="introduction">
<IconMenuPython width={35} height={35} />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">Python Client Library</h1>
<h2 className="text-base font-mono text-scale-1100">@supabase-community/supabase-py</h2>
<h1 className="text-3xl text-foreground m-0">Python Client Library</h1>
<h2 className="text-base font-mono text-foreground-light">@supabase-community/supabase-py</h2>
</div>
</div>
apps/docs/docs/ref/self-hosting-analytics/introduction.mdx
+1 -1
View File
@@ -7,7 +7,7 @@ hideTitle: true
<div className="flex items-start gap-6 not-prose" id="introduction">
<img src="/docs/img/icons/menu/reference-analytics.svg" className="w-8 h-8 rounded" />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">Self-Hosting Analytics</h1>
<h1 className="text-3xl text-foreground m-0">Self-Hosting Analytics</h1>
</div>
</div>
apps/docs/docs/ref/self-hosting-auth/introduction.mdx
+1 -1
View File
@@ -7,7 +7,7 @@ hideTitle: true
<div className="flex items-start gap-6 not-prose" id="introduction">
<img src="/docs/img/icons/menu/reference-auth.svg" className="w-8 h-8 rounded" />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">Self-Hosting Auth</h1>
<h1 className="text-3xl text-foreground m-0">Self-Hosting Auth</h1>
</div>
</div>
apps/docs/docs/ref/self-hosting-functions/introduction.mdx
+1 -1
View File
@@ -7,7 +7,7 @@ hideTitle: true
<div className="flex items-start gap-6 not-prose" id="introduction">
<img src="/docs/img/icons/menu/reference-analytics.svg" className="w-8 h-8 rounded" />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">Self-Hosting Functions</h1>
<h1 className="text-3xl text-foreground m-0">Self-Hosting Functions</h1>
</div>
</div>
apps/docs/docs/ref/self-hosting-realtime/introduction.mdx
+1 -1
View File
@@ -7,7 +7,7 @@ hideTitle: true
<div className="flex items-start gap-6 not-prose" id="introduction">
<img src="/docs/img/icons/menu/reference-realtime.svg" className="w-8 h-8 rounded" />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">Self-Hosting Realtime</h1>
<h1 className="text-3xl text-foreground m-0">Self-Hosting Realtime</h1>
</div>
</div>
apps/docs/docs/ref/self-hosting-storage/introduction.mdx
+1 -1
View File
@@ -7,7 +7,7 @@ hideTitle: true
<div className="flex items-start gap-6 not-prose" id="introduction">
<img src="/docs/img/icons/menu/reference-storage.svg" className="w-8 h-8 rounded" />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">Self-Hosting Storage</h1>
<h1 className="text-3xl text-foreground m-0">Self-Hosting Storage</h1>
</div>
</div>
apps/docs/docs/ref/swift/introduction.mdx
+4 -2
View File
@@ -7,8 +7,10 @@ hideTitle: true
<div className="flex items-start gap-6 not-prose" id="introduction">
<IconMenuSwift width={35} height={35} />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">Swift Client Library</h1>
<h2 className="text-base font-mono text-scale-1100">@supabase-community/supabase-swift</h2>
<h1 className="text-3xl text-foreground m-0">Swift Client Library</h1>
<h2 className="text-base font-mono text-foreground-light">
@supabase-community/supabase-swift
</h2>
</div>
</div>
apps/docs/docs/reference/csharp/introduction.mdx
+2 -2
View File
@@ -7,8 +7,8 @@ hideTitle: true
<div className="flex items-start gap-6 not-prose" id="introduction">
<IconMenuCsharp width={35} height={35} />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">C# Client Library</h1>
<h2 className="text-base font-mono text-scale-1100">supabase-csharp</h2>
<h1 className="text-3xl text-foreground m-0">C# Client Library</h1>
<h2 className="text-base font-mono text-foreground-light">supabase-csharp</h2>
</div>
</div>
apps/docs/layouts/DefaultLayout.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ const Layout: FC<Props> = (props: Props) => {
{hasTableOfContents && !props.meta?.hide_table_of_contents && (
<div
className={[
'border-scale-400 dark:bg-scale-200 table-of-contents-height border-l',
'border-default bg-background table-of-contents-height border-l',
'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
].join(' ')}
>
apps/docs/layouts/HomeLayout.tsx
+1 -1
View File
@@ -71,7 +71,7 @@ const HomeLayout: FC<Props> = (props: Props) => {
{hasTableOfContents && !props.meta?.hide_table_of_contents && (
<div
className={[
'border-scale-400 dark:bg-scale-200 table-of-contents-height border-l',
'border-default bg-background table-of-contents-height border-l',
'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
].join(' ')}
>
apps/docs/layouts/SiteLayout.tsx
+10 -10
View File
@@ -162,13 +162,13 @@ const MobileHeader = memo(function MobileHeader() {
>
<span
className={[
'transition-all ease-out block w-4 h-px bg-scale-900 group-hover:bg-scale-1200',
'transition-all ease-out block w-4 h-px bg-foreground-muted group-hover:bg-foreground',
!mobileMenuOpen ? 'w-4' : 'absolute rotate-45 top-[6px]',
].join(' ')}
></span>
<span
className={[
'transition-all ease-out block h-px bg-scale-900 group-hover:bg-scale-1200',
'transition-all ease-out block h-px bg-foreground-muted group-hover:bg-foreground',
!mobileMenuOpen ? 'w-3 group-hover:w-4' : 'absolute w-4 -rotate-45 top-[2px]',
].join(' ')}
></span>
@@ -186,7 +186,7 @@ const MobileHeader = memo(function MobileHeader() {
<span
className={[
'transition-all duration-200',
'text-scale-1200',
'text-foreground',
mobileMenuOpen ? 'text-xs' : 'text-sm',
].join(' ')}
>
@@ -222,7 +222,7 @@ const MobileMenuBackdrop = memo(function MobileMenuBackdrop() {
'left-0',
'right-0',
'z-10',
'backdrop-blur-sm backdrop-filter bg-white-1200 dark:bg-scale-200/90',
'backdrop-blur-sm backdrop-filter bg-alternative/90',
mobileMenuOpen ? 'absolute h-full w-full top-0 left-0' : 'hidden h-0',
// always hide on desktop
'lg:hidden',
@@ -295,7 +295,7 @@ const NavContainer = memo(function NavContainer() {
'relative',
'w-auto',
'border-r overflow-auto h-screen',
'backdrop-blur backdrop-filter bg-white-1200 dark:bg-scale-200',
'backdrop-blur backdrop-filter bg-background',
'flex flex-col',
].join(' ')}
>
@@ -305,13 +305,13 @@ const NavContainer = memo(function NavContainer() {
<div
className={[
'hidden lg:flex lg:height-auto',
'pt-8 bg-scale-200 flex-col gap-8',
'pt-8 bg-background flex-col gap-8',
].join(' ')}
>
<HeaderLogo />
</div>
<div className="h-4 bg-scale-200 w-full"></div>
<div className="bg-gradient-to-b from-scale-200 to-transparent h-4 w-full"></div>
<div className="h-4 bg-background w-full"></div>
<div className="bg-gradient-to-b from-background to-transparent h-4 w-full"></div>
</div>
</div>
</div>
@@ -321,7 +321,7 @@ const NavContainer = memo(function NavContainer() {
'absolute left-0 right-0 h-screen',
'px-5 pl-5 py-16',
'top-[0px]',
'bg-scale-200',
'bg-background',
// desktop styles
'lg:relative lg:top-0 lg:left-0 lg:pb-10 lg:px-10 lg:pt-0 lg:flex',
'lg:opacity-100 lg:visible',
@@ -351,7 +351,7 @@ const SiteLayout = ({ children }: PropsWithChildren<{}>) => {
className={[
'sticky transition-all top-0',
'z-10',
'backdrop-blur backdrop-filter bg-white-1200 dark:bg-scale-200',
'backdrop-blur backdrop-filter bg-background',
].join(' ')}
>
<div className={['lg:hidden', 'px-5 ', 'border-b z-10'].join(' ')}>
apps/docs/layouts/guides/index.tsx
+5 -5
View File
@@ -125,9 +125,9 @@ const Layout: FC<Props> = (props) => {
>
<h1 className="mb-0">{props.meta.title}</h1>
{props.meta.subtitle && (
<h2 className="mt-3 text-xl text-scale-1100">{props.meta.subtitle}</h2>
<h2 className="mt-3 text-xl text-foreground-light">{props.meta.subtitle}</h2>
)}
<div className="w-full h-[1px] bg-scale-500 my-8"></div>
<div className="w-full border-b my-8"></div>
<MDXProvider components={components}>{props.children}</MDXProvider>
{EDIT_BUTTON_EXCLUDE_LIST.includes(router.route) ? (
@@ -137,7 +137,7 @@ const Layout: FC<Props> = (props) => {
<div>
<a
href={`https://github.com/supabase/supabase/edit/master/apps/docs/pages${router.asPath}.mdx`}
className="text-sm transition flex items-center gap-1 text-scale-1000 hover:text-scale-1200 w-fit"
className="text-sm transition flex items-center gap-1 text-foreground-lighter hover:text-foreground w-fit"
>
Edit this page on GitHub <IconExternalLink size={14} strokeWidth={1.5} />
</a>
@@ -150,7 +150,7 @@ const Layout: FC<Props> = (props) => {
<div
className={[
'col-span-3',
'border-scale-400 dark:bg-scale-200 table-of-contents-height',
'border-overlay bg-background table-of-contents-height',
'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
'transition-all ease-out',
'duration-100',
@@ -162,7 +162,7 @@ const Layout: FC<Props> = (props) => {
<ExpandableVideo imgUrl={tocVideoPreview} videoId={props.meta.tocVideo} />
</div>
)}
<span className="block font-mono text-xs uppercase text-scale-1200 px-5 mb-6">
<span className="block font-mono text-xs uppercase text-foreground px-5 mb-6">
On this page
</span>
<GuidesTableOfContents list={tocList} />
apps/docs/layouts/ref/RefSubLayout.tsx
+1 -1
View File
@@ -121,7 +121,7 @@ const StickyHeader: FC<StickyHeader> = ({ icon, ...props }) => {
id={props.slug}
data-ref-id={props.id}
className={[
'text-2xl font-medium text-scale-1200 scroll-mt-24',
'text-2xl font-medium text-foreground scroll-mt-24',
!icon && 'mb-8',
props.monoFont && 'font-mono',
].join(' ')}
apps/docs/layouts/ref/RefSubLayoutNonFunc.tsx
+1 -1
View File
@@ -81,7 +81,7 @@ const StickyHeader: FC<StickyHeader> = (props) => {
id={props.slug}
data-ref-id={props.id}
className={[
'text-xl font-medium text-scale-1200 mb-8 scroll-mt-24',
'text-xl font-medium text-foreground mb-8 scroll-mt-24',
props.monoFont && 'font-mono',
].join(' ')}
>
apps/docs/layouts/tutorials/TutorialLayout.tsx
+1 -1
View File
@@ -72,7 +72,7 @@ const Layout: FC<Props> = (props: Props) => {
{hasTableOfContents && !props.meta?.hide_table_of_contents && (
<div
className={[
'border-scale-400 dark:bg-scale-200 table-of-contents-height border-l',
'border-overlay bg-background table-of-contents-height border-l',
'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
].join(' ')}
>
apps/docs/lib/mdx/getComponents.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ function getComponents(type: any) {
<div
className={[
'next-image--dynamic-fill',
type === 'blog' && 'to-scale-400 from-scale-500 rounded-lg border bg-gradient-to-r',
type === 'blog' && 'to-border-overlay from-border rounded-lg border bg-gradient-to-r',
].join(' ')}
>
<Image
apps/docs/package.json
+1
View File
@@ -57,6 +57,7 @@
"@supabase/supabase-js": "^2.38.2",
"common": "*",
"config": "*",
"dat.gui": "^0.7.9",
"framer-motion": "^6.5.1",
"github-slugger": "^2.0.0",
"gray-matter": "^4.0.3",
apps/docs/pages/_app.tsx
+3 -1
View File
@@ -9,7 +9,7 @@ import '../styles/prism-okaidia.scss'
import { SessionContextProvider } from '@supabase/auth-helpers-react'
import { createClient } from '@supabase/supabase-js'
import { AuthProvider, ThemeProvider, useTelemetryProps } from 'common'
import { AuthProvider, ThemeProvider, useTelemetryProps, useThemeSandbox } from 'common'
import { useRouter } from 'next/router'
import { useCallback, useEffect, useState } from 'react'
import { AppPropsWithLayout } from 'types'
@@ -26,6 +26,8 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
const telemetryProps = useTelemetryProps()
const { consentValue, hasAcceptedConsent } = useConsent()
useThemeSandbox()
const [supabase] = useState(() =>
IS_PLATFORM
? createClient(
apps/docs/pages/guides/auth/server-side-rendering.mdx
+3 -3
View File
@@ -48,11 +48,11 @@ Supabase Auth supports two authentication flows: **Implicit** and **PKCE**. The
chevronAlign="right"
justified
size="medium"
className="text-scale-900 dark:text-white"
className="text-foreground-light"
>
<div className="border-b pb-3">
<Accordion.Item
header={<span className="text-scale-1200 font-bold">Implicit</span>}
header={<span className="text-foreground font-bold">Implicit</span>}
id={`ssr-implicit-flow`}
>
@@ -77,7 +77,7 @@ Supabase Auth supports two authentication flows: **Implicit** and **PKCE**. The
</div>
<div className="border-b pb-3">
<Accordion.Item
header={<span className="text-scale-1200 font-bold">PKCE</span>}
header={<span className="text-foreground font-bold">PKCE</span>}
id={`ssr-pkce-flow`}
>
apps/docs/pages/guides/cli/config.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export default function Config() {
</div>
<div className="md:col-span-3">
<div className="sticky top-20 border-l">
<span className="block font-mono text-xs uppercase text-scale-1200 pl-5 mb-4">
<span className="block font-mono text-xs uppercase text-foreground pl-5 mb-4">
On this page
</span>
<GuidesTableOfContents list={tocList} />
apps/docs/pages/guides/self-hosting/analytics/config.mdx
+3 -3
View File
@@ -16,10 +16,10 @@ export const meta = {
{props.spec.info.tags.map(tag => {
return (
<>
<h2 className="text-scale-1200">{tag.title}</h2>
<p className="text-scale-1000">{tag.description}</p>
<h2 className="text-foreground">{tag.title}</h2>
<p className="text-foreground-lighter">{tag.description}</p>
<div className="not-prose">
<h5 className="text-base text-scale-1200 mb-3">Parameters</h5>
<h5 className="text-base text-foreground mb-3">Parameters</h5>
<ul>
{props.spec.parameters.filter(param => param.tags.includes(tag.id)).map((param) => {
return <Param name={param.title} type={param.type} description={param.description} required={param.required} />
apps/docs/pages/guides/self-hosting/auth/config.mdx
+3 -3
View File
@@ -16,10 +16,10 @@ export const meta = {
{props.spec.info.tags.map(tag => {
return (
<>
<h2 className="text-scale-1200">{tag.title}</h2>
<p className="text-scale-1000">{tag.description}</p>
<h2 className="text-foreground">{tag.title}</h2>
<p className="text-foreground-lighter">{tag.description}</p>
<div className="not-prose">
<h5 className="text-base text-scale-1200 mb-3">Parameters</h5>
<h5 className="text-base text-foreground mb-3">Parameters</h5>
<ul>
{props.spec.parameters.filter(param => param.tags.includes(tag.id)).map((param) => {
return <Param name={param.title} type={param.type} description={param.description} required={param.required} />
apps/docs/pages/guides/self-hosting/realtime/config.mdx
+3 -3
View File
@@ -18,10 +18,10 @@ See [this guide](/docs/guides/realtime/bring-your-own-database) if you want to c
{props.spec.info.tags.map(tag => {
return (
<>
<h2 className="text-scale-1200">{tag.title}</h2>
<p className="text-scale-1000">{tag.description}</p>
<h2 className="text-foreground">{tag.title}</h2>
<p className="text-foreground-lighter">{tag.description}</p>
<div className="not-prose">
<h5 className="text-base text-scale-1200 mb-3">Parameters</h5>
<h5 className="text-base text-foreground mb-3">Parameters</h5>
<ul>
{props.spec.parameters.filter(param => param.tags.includes(tag.id)).map((param) => {
return <Param name={param.title} type={param.type} description={param.description} required={param.required} />
apps/docs/pages/guides/self-hosting/storage/config.mdx
+3 -3
View File
@@ -16,10 +16,10 @@ export const meta = {
{props.spec.info.tags.map(tag => {
return (
<>
<h2 className="text-scale-1200">{tag.title}</h2>
<p className="text-scale-1000">{tag.description}</p>
<h2 className="text-foreground">{tag.title}</h2>
<p className="text-foreground-lighter">{tag.description}</p>
<div className="not-prose">
<h5 className="text-base text-scale-1200 mb-3">Parameters</h5>
<h5 className="text-base text-foreground mb-3">Parameters</h5>
<ul>
{props.spec.parameters.filter(param => param.tags.includes(tag.id)).map((param) => {
return <Param name={param.title} type={param.type} description={param.description} required={param.required} />
apps/docs/pages/index.mdx
+2 -2
View File
@@ -78,7 +78,7 @@ export const meta = {
## Migrate to Supabase
<p className="text-scale-1100 text-sm p-0 m-0">Bring your existing data, auth and storage to Supabase following our migration guides.</p>
<p className="text-foreground-light text-sm p-0 m-0">Bring your existing data, auth and storage to Supabase following our migration guides.</p>
<TextLink
label="Explore more resources"
@@ -147,7 +147,7 @@ export const meta = {
</IconBackground>
### Self-Hosting
</div>
<p className="text-scale-1100 text-sm">Get started with self-hosting Supabase.</p>
<p className="text-foreground-light text-sm">Get started with self-hosting Supabase.</p>
<TextLink
label="More on Self-Hosting"
url="/guides/self-hosting"
apps/docs/pages/reference/analytics/[...slug].tsx
+1 -1
View File
@@ -53,7 +53,7 @@ export default function Config() {
>
<RefSubLayout.Details>
<div className="mt-4">
<code className="text-md flex gap-4 text-md text-scale-900 break-all">
<code className="text-md flex gap-4 text-md text-foreground-lighter break-all">
<span className="uppercase whitespace-nowrap ">{operation.operation}</span>
{operation.fullPath}
</code>
apps/docs/pages/reference/analytics/config.tsx
+2 -2
View File
@@ -35,14 +35,14 @@ export default function Config(props) {
{index === 0 && <h2 className="text-xl capitalize">{tag} Settings</h2>}
<div className="mt-8">
<div>
<h2 className="text-xl font-medium text-scale-1200 font-mono">
<h2 className="text-xl font-medium text-foreground font-mono">
<span className="mr-2">$</span>
{parameter.title}
</h2>
<div className="grid" id={parameter.id}>
<div className="border-b pb-8" key={parameter.id}>
<div className=" mb-16">
<p className="mb-4 scroll-mt-16 mt-0 text-scale-1100 text-base">
<p className="mb-4 scroll-mt-16 mt-0 text-foreground-light text-base">
<ReactMarkdown>{parameter.description}</ReactMarkdown>
</p>
<div className="grid gap-2">
apps/docs/pages/reference/auth/[...slug].tsx
+1 -1
View File
@@ -53,7 +53,7 @@ export default function Config() {
>
<RefSubLayout.Details>
<div className="mt-4">
<code className="text-md flex gap-4 text-md text-scale-900 break-all">
<code className="text-md flex gap-4 text-md text-foreground-lighter break-all">
<span className="uppercase whitespace-nowrap ">{operation.operation}</span>
{operation.fullPath}
</code>
apps/docs/pages/reference/auth/config.tsx
+2 -2
View File
@@ -26,14 +26,14 @@ export default function Config() {
{index === 0 && <h2 className="text-xl capitalize">{tag}</h2>}
<div className="mt-8">
<div>
<h2 className="text-xl font-medium text-scale-1200 font-mono">
<h2 className="text-xl font-medium text-foreground font-mono">
<span className="mr-2">$</span>
{parameter.title}
</h2>
<div className="grid" id={parameter.id}>
<div className="border-b pb-8" key={parameter.id}>
<div className=" mb-16">
<p className="mb-4 scroll-mt-16 mt-0 text-scale-1100 text-base">
<p className="mb-4 scroll-mt-16 mt-0 text-foreground-light text-base">
<ReactMarkdown>{parameter.description}</ReactMarkdown>
</p>
<div className="grid gap-2">
apps/docs/pages/reference/realtime/config.tsx
+2 -2
View File
@@ -35,14 +35,14 @@ export default function Config(props) {
{index === 0 && <h2 className="text-xl capitalize">{tag} Settings</h2>}
<div className="mt-8">
<div>
<h2 className="text-xl font-medium text-scale-1200 font-mono">
<h2 className="text-xl font-medium text-foreground font-mono">
<span className="mr-2">$</span>
{parameter.title}
</h2>
<div className="grid" id={parameter.id}>
<div className="border-b pb-8" key={parameter.id}>
<div className=" mb-16">
<p className="mb-4 scroll-mt-16 mt-0 text-scale-1100 text-base">
<p className="mb-4 scroll-mt-16 mt-0 text-foreground-light text-base">
<ReactMarkdown>{parameter.description}</ReactMarkdown>
</p>
<div className="grid gap-2">
apps/docs/pages/reference/storage/[...slug].tsx
+1 -1
View File
@@ -57,7 +57,7 @@ export default function Config() {
>
<RefSubLayout.Details>
<div className="mt-4">
<code className="text-md flex gap-4 text-md text-scale-900 break-all">
<code className="text-md flex gap-4 text-md text-foreground-lighter break-all">
<span className="uppercase">{operation.operation}</span>
{operation.fullPath}
</code>
apps/docs/pages/reference/storage/config.tsx
+2 -2
View File
@@ -22,14 +22,14 @@ export default function Config() {
{index === 0 && <h2 className="text-xl capitalize">{tag} Settings</h2>}
<div className="mt-8">
<div>
<h2 className="text-xl font-medium text-scale-1200 font-mono">
<h2 className="text-xl font-medium text-foreground font-mono">
<span className="mr-2">$</span>
{parameter.title}
</h2>
<div className="grid" id={parameter.id}>
<div className="border-b pb-8" key={parameter.id}>
<div className=" mb-16">
<p className="mb-4 scroll-mt-16 mt-0 text-scale-1100 text-base">
<p className="mb-4 scroll-mt-16 mt-0 text-foreground-light text-base">
<ReactMarkdown>{parameter.description}</ReactMarkdown>
</p>
<div className="grid gap-2">
apps/docs/styles/main.scss
+12 -6
View File
@@ -29,7 +29,7 @@
}
body {
@apply bg-scale-200;
@apply bg-background;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -76,12 +76,12 @@ article h1 {
}
.p:not(.prose *):not(.overwrite) {
@apply text-scale-1100;
@apply text-foreground-light;
margin-bottom: 16px;
}
.small:not(.prose *):not(.overwrite) {
@apply text-scale-900 text-xs;
@apply text-foreground-muted text-xs;
}
.prose :where(p):not(:where([class~='not-prose'] *)) {
@@ -125,7 +125,7 @@ pre[class*='language-'] {
.method-list-item-validation {
code {
@apply text-xs bg-scale-300 rounded;
@apply text-xs bg-control rounded;
padding: 1px 6px;
}
}
@@ -135,7 +135,7 @@ pre[class*='language-'] {
}
.method-list-group .method-list-group {
@apply border border-scale-400 rounded-md;
@apply border border-overlay rounded-md;
margin-bottom: 20px;
max-width: 600px;
}
@@ -209,7 +209,7 @@ h4 code {
// code inside admonitions
.admonition-content p code {
@apply bg-scale-300;
@apply bg-control;
word-break: keep-all !important;
white-space: nowrap !important;
}
@@ -282,3 +282,9 @@ div[role='tablist'] {
position: relative !important;
height: unset !important;
}
/* dat.GUI */
.dg.ac {
z-index: 9999 !important;
}
apps/www/components/AdminAccess/index.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import React from 'react'
import SectionContainer from '../Layouts/SectionContainer'
import ImageCarousel from '../Carousels/ImageCarousel'
import ImageCarousel from '~/components/Carousels/ImageCarousel'
import SectionContainer from '~/components/Layouts/SectionContainer'
import AdminAccessData from 'data/home/admin-access.json'
apps/www/components/AuthWidget/AuthWidgetSection.tsx
+7 -5
View File
@@ -75,7 +75,9 @@ function AuthWidgetSection() {
</div>
<h1 className="text-foreground text-2xl">Acme Industries</h1>
</div>
<p className="text-light text-auth-widget-test">Sign in today for Supa stuff</p>
<p className="text-foreground-light text-auth-widget-test">
Sign in today for Supa stuff
</p>
</div>
<Auth.UserContextProvider supabaseClient={supabase}>
<AuthContainer supabaseClient={supabase}>
@@ -111,7 +113,7 @@ function AuthWidgetSection() {
<div className="prose !max-w-md">
<h3 className="text-2xl">Auth UI</h3>
<p className="!mb-0">Pre-built auth widgets to get started in minutes.</p>
<p className="text-lighter mt-0">
<p className="text-foreground-lighter mt-0">
Customizable authentication UI component with custom themes and extensible styles to
match your brand and aesthetic
</p>
@@ -201,7 +203,7 @@ function AuthWidgetSection() {
<button
onClick={() => setRadius('4px')}
className={[
'bg-surface-100 ring-foreground-muted border-border flex h-10 w-10 items-center justify-center rounded-full border hover:scale-105',
'bg-surface-100 ring-foreground-muted border-default flex h-10 w-10 items-center justify-center rounded-full border hover:scale-105',
radius === '4px'
? 'ring-foreground-muted border-foreground-lighter border-2 ring-2'
: '',
@@ -227,7 +229,7 @@ function AuthWidgetSection() {
<button
onClick={() => setRadius('10px')}
className={[
'bg-surface-100 border-border flex h-10 w-10 items-center justify-center rounded-full border transition hover:scale-105',
'bg-surface-100 border-default flex h-10 w-10 items-center justify-center rounded-full border transition hover:scale-105',
radius === '10px'
? 'ring-foreground-muted border-foreground-lighter border-2 ring-2'
: '',
@@ -253,7 +255,7 @@ function AuthWidgetSection() {
<button
onClick={() => setRadius('32px')}
className={[
'bg-surface-100 border-border flex h-10 w-10 items-center justify-center rounded-full border transition hover:scale-105',
'bg-surface-100 border-default flex h-10 w-10 items-center justify-center rounded-full border transition hover:scale-105',
radius === '32px'
? 'ring-foreground-muted border-foreground-lighter border-2 ring-2'
: '',
apps/www/components/Avatar.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export default function Avatar(props: Props) {
style={{ margin: 0 }}
alt={`${caption} avatar`}
/>
<figcaption style={{ marginTop: 0 }} className="text-lighter">
<figcaption style={{ marginTop: 0 }} className="text-foreground-lighter">
<p>{caption}</p>
</figcaption>
</div>
apps/www/components/Blog/BlogFilters.tsx
+1 -1
View File
@@ -167,7 +167,7 @@ const BlogFilters = ({ posts, setPosts, setCategory, allCategories, handlePosts
setSearchKey('')
setShowSearchInput(false)
}}
className="text-light hover:text-foreground"
className="text-foreground-light hover:text-foreground"
>
<IconX size="tiny" />
</Button>
apps/www/components/Blog/BlogListItem.tsx
+9 -6
View File
@@ -28,9 +28,11 @@ const BlogListItem = ({ post }: Props) => {
<Link href={post.path} className="group inline-block min-w-full">
<div className="flex flex-col space-y-6">
<div className="flex flex-col space-y-3">
<div className="border-scale-300 relative mb-4 h-60 w-full overflow-hidden rounded-lg border shadow-sm">
<div
className={`border-default relative mb-4 h-60 w-full overflow-auto rounded-lg border shadow-sm`}
>
<Image
fill
layout="fill"
src={
!post.thumb
? `/images/blog/blog-placeholder.png`
@@ -38,15 +40,16 @@ const BlogListItem = ({ post }: Props) => {
? post.thumb
: `/images/blog/${post.thumb}`
}
className="object-cover scale-100 transform duration-100 ease-in group-hover:scale-105"
alt={post.title}
objectFit="cover"
className="scale-100 transform duration-100 ease-in group-hover:scale-105"
alt="case study thumbnail"
/>
</div>
<h3 className="text-foreground max-w-sm text-xl">{post.title}</h3>
<p className="text-light max-w-sm text-base">{post.description}</p>
<p className="text-foreground-light max-w-sm text-base">{post.description}</p>
{post.date && (
<div className="text-muted flex items-center space-x-1.5 text-sm">
<div className="text-foreground-light flex items-center space-x-1.5 text-sm">
<p>{post.date}</p>
{post.readingTime && (
<>
apps/www/components/Blog/ShareArticleActions.tsx
+3 -3
View File
@@ -6,7 +6,7 @@ const ShareArticleActions = ({ title, slug }: { title: string; slug: string }) =
<Link
href={`https://twitter.com/share?text=${title}&url=https://supabase.com/blog/${slug}`}
target="_blank"
className="text-lighter hover:text-foreground"
className="text-foreground-lighter hover:text-foreground"
>
<IconTwitterX size={24} />
</Link>
@@ -14,14 +14,14 @@ const ShareArticleActions = ({ title, slug }: { title: string; slug: string }) =
<Link
href={`https://www.linkedin.com/shareArticle?url=https://supabase.com/blog/${slug}&title=${title}`}
target="_blank"
className="text-lighter hover:text-foreground"
className="text-foreground-lighter hover:text-foreground"
>
<IconLinkedinSolid size={24} />
</Link>
<Link
href={`https://news.ycombinator.com/submitlink?u=https://supabase.com/blog/${slug}&t=${title}`}
target="_blank"
className="text-lighter hover:text-foreground"
className="text-foreground-lighter hover:text-foreground"
>
<IconYCombinator size={24} />
</Link>
apps/www/components/Card.tsx
+8 -8
View File
@@ -56,21 +56,21 @@ const Card = (props: Props) => {
target="_blank"
className="relative flex transform flex-col overflow-hidden rounded-md shadow-lg transition hover:-translate-y-1 hover:shadow-2xl"
>
<div className="dark:bg-dark-800 flex-shrink-0">
<img className="h-64 w-full object-cover" src={imgUrl} alt={title} />
<div className="flex-shrink-0">
<img className="h-64 w-full text-foreground-light object-cover" src={imgUrl} alt={title} />
</div>
<div className="dark:bg-scale-300 flex flex-1 flex-col justify-between bg-white p-8">
<div className="bg-surface-100 flex flex-1 flex-col justify-between p-8">
<div className="flex-1">
{/* {icons && (
<div className="-mt-12 mb-6 flex -space-x-3">
{iconMarkup}
</div>
)} */}
<p className="font-base dark:text-dark-300 text-sm capitalize text-gray-600">{type}</p>
<p className="font-base text-foreground-lighter text-sm capitalize">{type}</p>
<div className="mt-2 flex h-32 flex-col justify-between">
{/* {logoUrl && <img src={logoUrl} className="h-9 my-4" />} */}
{title && <p className="text-xl text-gray-900 dark:text-white">{title}</p>}
<p className="dark:text-dark-400 mt-3 text-base text-gray-500">
{title && <p className="text-xl text-foreground">{title}</p>}
<p className="text-foreground-lighter mt-3 text-base">
{type !== 'Project Example' ? postMeta.publishDate : description}
</p>
</div>
@@ -82,8 +82,8 @@ const Card = (props: Props) => {
<img className="h-10 w-10 rounded-full" src={postMeta.avatarUrl} alt="" />
</div>
<div className="ml-3">
<p className="text-sm font-medium text-gray-900 dark:text-white">{postMeta.name}</p>
<div className="dark:text-dark-100 flex space-x-1 text-sm text-gray-500">
<p className="text-sm font-medium text-foreground">{postMeta.name}</p>
<div className="text-foreground-lighter flex space-x-1 text-sm">
<time dateTime="2020-03-16">{postMeta.publishDate}</time>
<span aria-hidden="true">&middot;</span>
<span>{postMeta.readLength} min read</span>
apps/www/components/Carousels/SplitCodeBlockCarousel.tsx
+1 -1
View File
@@ -100,7 +100,7 @@ function SplitCodeBlockCarousel(props: SplitCodeBlockCarousel) {
})}
</Swiper>
<div className="bg-scale-100 dark:bg-scale-300 border-scale-500 overflow-hidden rounded-md border p-8">
<div className="bg-surface-100 border-default overflow-hidden rounded-md border p-8">
<Swiper
// @ts-ignore
onSwiper={setSwiperDetails}
apps/www/components/Charts/PGCharts.tsx
+16 -8
View File
@@ -37,7 +37,7 @@ const CustomizedAxisTick = (props: any) => {
y={-12}
dy={16}
textAnchor="end"
fill="var(--colors-scale10)"
fill="hsl(var(--foreground-lighter))"
transform="rotate(-35)"
className="text-xs"
>
@@ -70,11 +70,15 @@ const Chart = () => {
@ts-ignore */}
<BarChart data={data[selection]} layout="vertical">
<XAxis
axisLine={{ stroke: 'var(--colors-scale7)' }}
tickLine={{ stroke: 'var(--colors-scale7)' }}
axisLine={{ stroke: 'hsl(var(--border-default))' }}
tickLine={{ stroke: 'hsl(var(--border-default))' }}
type="number"
tickMargin={8}
style={{ fontSize: '14px', marginBottom: '32px', color: 'var(--colors-scale12)' }}
style={{
fontSize: '14px',
marginBottom: '32px',
color: 'hsl(var(--foreground-default))',
}}
tick={<CustomizedAxisTick />}
label={{
value:
@@ -85,17 +89,21 @@ const Chart = () => {
: 'Number of results',
position: 'insideBottom',
offset: -32,
fill: 'var(--colors-scale12)',
fill: 'hsl(var(--foreground-default))',
}}
/>
<YAxis
dataKey={'query'}
type="category"
style={{ fontSize: '14px', marginBottom: '32px', color: 'var(--colors-scale10)' }}
style={{
fontSize: '14px',
marginBottom: '32px',
color: 'hsl(var(--foreground-lighter))',
}}
minTickGap={16}
tickMargin={8}
axisLine={{ stroke: 'var(--colors-scale7)' }}
tickLine={{ stroke: 'var(--colors-scale7)' }}
axisLine={{ stroke: 'hsl(var(--border-default))' }}
tickLine={{ stroke: 'hsl(var(--border-default))' }}
tick={<CustomizedAxisTick />}
/>
{dimensions.map((dimension: string, index: number) => {
apps/www/components/ExampleCard.tsx
+4 -4
View File
@@ -7,7 +7,7 @@ function ExampleCard(props: any) {
<>
<div
className="bg-surface-100
border-border
border-default
flex
h-40
flex-col
@@ -20,7 +20,7 @@ function ExampleCard(props: any) {
<h4 className="h6">{props.title}</h4>
<p className="p text-sm">{props.description}</p>
<div className="flex items-center">
<div className="relative border border-border inline !w-6 !h-6 rounded-full overflow-hidden">
<div className="relative border border-default inline !w-6 !h-6 rounded-full overflow-hidden">
<Image
src={props.author_img}
alt={props.author + ' GitHub profile picture'}
@@ -37,7 +37,7 @@ function ExampleCard(props: any) {
<div
className="
bg-surface-200
border-border flex
border-default flex
flex-col justify-between rounded rounded-t-none
border
border-b border-r border-l
@@ -46,7 +46,7 @@ function ExampleCard(props: any) {
<Link
href={props.repo_url}
as={props.repo_url}
className="text-light hover:text-foreground flex flex-row items-center text-sm"
className="text-foreground-light hover:text-foreground flex flex-row items-center text-sm"
target="_blank"
>
<span>{props.repo_name}</span>
apps/www/components/Footer/index.tsx
+9 -9
View File
@@ -37,11 +37,11 @@ const Footer = (props: Props) => {
<ul className="flex flex-col md:flex-row gap-2 md:gap-8 justify-center md:items-center">
<li className="flex items-center gap-2 whitespace-nowrap flex-nowrap">
<CheckIcon className="w-4 h-4" /> SOC2 Type 2{' '}
<span className="text-lighter hidden sm:inline">Certified</span>
<span className="text-foreground-lighter hidden sm:inline">Certified</span>
</li>
<li className="flex items-center gap-2 whitespace-nowrap flex-nowrap">
<CheckIcon className="w-4 h-4" /> HIPAA{' '}
<span className="text-lighter hidden sm:inline">Compliant</span>
<span className="text-foreground-lighter hidden sm:inline">Compliant</span>
</li>
</ul>
</SectionContainer>
@@ -67,7 +67,7 @@ const Footer = (props: Props) => {
<div className="flex space-x-5">
<a
href="https://twitter.com/supabase"
className="text-lighter hover:text-foreground transition"
className="text-foreground-lighter hover:text-foreground transition"
>
<span className="sr-only">Twitter</span>
<IconTwitterX size={22} />
@@ -75,7 +75,7 @@ const Footer = (props: Props) => {
<a
href="https://github.com/supabase"
className="text-lighter hover:text-foreground transition"
className="text-foreground-lighter hover:text-foreground transition"
>
<span className="sr-only">GitHub</span>
<IconGitHubSolid size={22} />
@@ -83,7 +83,7 @@ const Footer = (props: Props) => {
<a
href="https://discord.supabase.com/"
className="text-lighter hover:text-foreground transition"
className="text-foreground-lighter hover:text-foreground transition"
>
<span className="sr-only">Discord</span>
<IconDiscord size={22} />
@@ -91,7 +91,7 @@ const Footer = (props: Props) => {
<a
href="https://youtube.com/c/supabase"
className="text-lighter hover:text-foreground transition"
className="text-foreground-lighter hover:text-foreground transition"
>
<span className="sr-only">Youtube</span>
<IconYoutubeSolid size={22} />
@@ -110,8 +110,8 @@ const Footer = (props: Props) => {
<div
className={`text-sm transition-colors ${
link.url || Component
? 'text-lighter hover:text-foreground'
: 'text-muted hover:text-lighter'
? 'text-foreground-lighter hover:text-foreground'
: 'text-muted hover:text-foreground-lighter'
} `}
>
{link.text}
@@ -148,7 +148,7 @@ const Footer = (props: Props) => {
</div>
</div>
</div>
<div className="border-border mt-32 flex justify-between border-t pt-8">
<div className="border-default mt-32 flex justify-between border-t pt-8">
<small className="small">&copy; Supabase Inc</small>
<ThemeToggle forceDark={isLaunchWeekPage} />
</div>
apps/www/components/Hero/Hero.tsx
+1 -3
View File
@@ -34,7 +34,7 @@ const Hero = () => {
<AnnouncementBadge />
</div> */}
<h1 className="text-foreground text-4xl sm:text-5xl sm:leading-none lg:text-7xl">
<span className="block text-[#F4FFFA00] bg-clip-text bg-gradient-to-b from-scale-1200 to-scale-1200 dark:to-scale-1100">
<span className="block text-[#F4FFFA00] bg-clip-text bg-gradient-to-b from-foreground to-foreground-light">
Build in a weekend
</span>
<span className="text-transparent bg-clip-text bg-gradient-to-br from-[#3ECF8E] via-[#3ECF8E] to-[#3ecfb2] block md:ml-0">
@@ -54,7 +54,6 @@ const Hero = () => {
href="https://supabase.com/dashboard"
as="https://supabase.com/dashboard"
onClick={() => sendTelemetryEvent(gaEvents['www_hp_hero_startProject'])}
tabIndex={-1}
>
Start your project
</Link>
@@ -64,7 +63,6 @@ const Hero = () => {
href="/docs"
as="/docs"
onClick={() => sendTelemetryEvent(gaEvents['www_hp_hero_documentation'])}
tabIndex={-1}
>
Documentation
</Link>
apps/www/components/Hero/HeroFrameworks.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ const HeroFrameworks = ({ className }: { className?: string }) => {
return (
<div className={['flex text-center flex-col items-center', className].join(' ')}>
<small className="small !text-light">Works seamlessly with 20+ frameworks</small>
<small className="small !text-foreground-light">Works seamlessly with 20+ frameworks</small>
<div className="w-full sm:max-w-lg mt-4 md:mt-3 lg:ml-0 flex flex-wrap items-center justify-center gap-1 xs:gap-2 sm:flex-nowrap">
{frameworks.map((framework) => (
<Link
apps/www/components/ImageFadeStack.tsx
+3 -3
View File
@@ -60,15 +60,15 @@ const ImageFadeStack = ({
<button className="text-white" onClick={() => handleNavClick(index)}>
<div
className={cn(
'w-2 h-2 rounded-full bg-scale-900 hover:bg-gray-300 transition-colors',
currentImageIndex === index && 'bg-scale-700'
'w-2 h-2 rounded-full bg-foreground-muted hover:bg-surface-100 transition-colors',
currentImageIndex === index && 'bg-border-strong'
)}
/>
</button>
))}
<button
onClick={() => setIsPlaying(!isPlaying)}
className="text-white bg-scale-1100 hover:bg-gray-1100 dark:hover:bg-gray-500 rounded-full p-0.5 transition-colors"
className="text-white bg-foreground-light hover:bg-overlay rounded-full p-0.5 transition-colors"
>
{isPlaying ? <IconPauseCircle w={12} /> : <IconPlayCircle w={12} />}
</button>
apps/www/components/ImageGrid.tsx
+2 -4
View File
@@ -100,10 +100,8 @@ const ImageGrid = ({
<MaybeAnimatedDiv
key={`${x.name}-${i}`}
className={`
dark:bg-scale-400 col-span-1 flex items-center
justify-center
bg-gray-50
${x.link && 'dark:hover:bg-scale-600 hover:bg-gray-100'}
bg-surface-200 col-span-1 flex items-center justify-center
${x.link && 'hover:bg-overlay-hover'}
p-8 ${className}`}
>
<div className={`relative h-8 w-full overflow-auto ${imgPadding[padding]}`}>
apps/www/components/LaunchWeek/5/ScheduleInfo.tsx
+3 -3
View File
@@ -9,14 +9,14 @@ export function ScheduleInfo() {
<p className="md:max-w-lg">
Each day of the week we will announce a new item, every day, from Monday to Friday.
</p>
<p className="text-light text-base md:max-w-lg">
<p className="text-foreground-light text-base md:max-w-lg">
The first launch will be on Monday 08:00 PT | 11:00 ET.
</p>
</div>
<div className="dark:bg-scale-300 flex flex-col gap-4 overflow-hidden rounded-md border bg-white shadow-sm md:max-w-lg">
<div className="flex flex-col gap-4 overflow-hidden rounded-md border bg-white shadow-sm md:max-w-lg">
<div className="flex flex-col gap-3 p-10 pb-0">
<h3 className="text-foreground text-lg">You can still win a lucky gold ticket</h3>
<p className="text-light text-sm">
<p className="text-foreground-light text-sm">
A few of the lucky attendees for Launch Week will get a limited edition Supabase goodie
bag.
</p>
apps/www/components/LaunchWeek/6/HackathonSection.tsx
+6 -4
View File
@@ -13,7 +13,9 @@ export default function LaunchHero() {
<div>
<Badge color="red">Closed</Badge>
</div>
<h4 className="text-light text-xl">Submissions close Sunday 21st Aug 23:59 (PT).</h4>
<h4 className="text-foreground-light text-xl">
Submissions close Sunday 21st Aug 23:59 (PT).
</h4>
</div>
<div className="flex gap-3">
@@ -31,21 +33,21 @@ export default function LaunchHero() {
<div className="grid grid-cols-2 gap-16">
<div className="flex flex-col gap-3">
<h3 className="text-foreground text-lg">Prizes</h3>
<p className="text-light text-sm">
<p className="text-foreground-light text-sm">
There are 5 categories to win. There will be a prize for the winner and a runner-up
prize in each category.
</p>
</div>
<div className="flex flex-col gap-3">
<h3 className="text-foreground text-lg">Submission</h3>
<p className="text-light text-sm">
<p className="text-foreground-light text-sm">
Submit your project through{' '}
<a className="text-brand" href="https://madewithsupabase.com">
madewithsupabase.com
</a>
.
</p>
<p className="text-light text-sm">
<p className="text-foreground-light text-sm">
All submissions must be open source and publically available.
</p>
</div>
apps/www/components/LaunchWeek/6/LaunchHero.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ export default function LaunchHero() {
<h1 className="text-foreground text-4xl font-semibold tracking-tight md:text-5xl lg:text-7xl">
{Controller.hero_header}
</h1>
<h2 className="text-light text-sm lg:text-xl">
<h2 className="text-foreground-light text-sm lg:text-xl">
Stay tuned all week for daily announcements
</h2>
</div>
apps/www/components/LaunchWeek/6/PreLaunchTeaser.tsx
+3 -3
View File
@@ -70,7 +70,7 @@ export function PreLaunchTeaser() {
</div>
<div className="flex flex-col">
<h4 className="text-foreground text-base">Founders Fireside Chat</h4>
<p className="text-light text-sm">
<p className="text-foreground-light text-sm">
Our two co-founders, Copple and Ant, discuss open source development and the future
of Supabase.
</p>
@@ -78,12 +78,12 @@ export function PreLaunchTeaser() {
</div>
<div className="flex flex-col gap-3">
<div className="text-light w-8">
<div className="text-foreground-light w-8">
<NewspaperIcon strokeWidth={1} />
</div>
<div>
<h3 className="text-foreground text-base">Supabase Series B</h3>
<p className="text-light text-sm">
<p className="text-foreground-light text-sm">
Supabase raised $80M in May, bringing our total funding to $116M.
</p>
</div>
apps/www/components/LaunchWeek/7/BlogLinks.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ const BlogLinks = () => {
if (!activeDays.length) return null
return (
<div className="flex flex-col gap-3 lg:gap-4 border-t border-scale-400 py-4 lg:py-8 mt-4 lg:mt-8">
<div className="flex flex-col gap-3 lg:gap-4 border-t border-muted py-4 lg:py-8 mt-4 lg:mt-8">
<h3 className="text-black dark:text-white text-xl mb-4">More Launch Week 7</h3>
{activeDays.map((day) =>
day.steps?.map((step, i) => {
apps/www/components/LaunchWeek/7/LaunchSection/ArticleButton.tsx
+2 -2
View File
@@ -8,7 +8,7 @@ const ArticleButton = (props: Article) => {
className="
bg-background text-foreground
hover:bg-background-overlay
dark:hover:bg-border-default border-border
dark:hover:bg-border-default border-default
flex items-start gap-3 rounded-md
border p-3
px-6 drop-shadow-sm transition"
@@ -18,7 +18,7 @@ const ArticleButton = (props: Article) => {
</div>
<div className="flex flex-col items-start gap-0">
<span className="text-base">{props.title}</span>
<span className="text-light text-sm">{props.description}</span>
<span className="text-foreground-light text-sm">{props.description}</span>
</div>
</button>
</div>
apps/www/components/LaunchWeek/7/LaunchSection/ArticleButtonListItem.tsx
+1 -2
View File
@@ -1,4 +1,3 @@
import { NewspaperIcon } from '@heroicons/react/outline'
import Link from 'next/link'
import { Article } from '../../types'
@@ -9,7 +8,7 @@ const ArticleButtonListItem = (props: Article) => {
<span className="text-foreground group-hover:text-brand text-left text-base transition">
{props.title}
</span>
<p className="text-light text-left text-sm transition">{props.description}</p>
<p className="text-foreground-light text-left text-sm transition">{props.description}</p>
</div>
</Link>
)
apps/www/components/LaunchWeek/7/LaunchSection/LaunchWeekLogoHeader.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ export function LaunchWeekLogoHeader() {
/>
</span>
</h1>
<p className="text-white radial-gradient-text-scale-600 text-md sm:text-lg text-center">
<p className="text-white radial-gradient-text-600 text-md sm:text-lg text-center">
April 10th – 14th at 7AM PT | 10AM ET
</p>
</motion.div>
apps/www/components/LaunchWeek/7/LaunchSection/ProductButton.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ const ProductButton = (props: Article) => {
<button
className="
text-brand-600
hover:bg-scale-300 border-scale-500 flex items-start gap-3 rounded-md border bg-transparent p-3
hover:bg-surface-100 flex items-start gap-3 rounded-md border bg-transparent p-3
px-6 transition
dark:drop-shadow-sm"
>
apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export const ProductButtonListItem = (props: Article) => {
</div>
<div className="flex flex-col items-start gap-0">
<span className="group-hover:text-brand text-sm">{props.title}</span>
<p className="text-light text-left text-sm">{props.description}</p>
<p className="text-foreground-light text-left text-sm">{props.description}</p>
</div>
</button>
</div>
apps/www/components/LaunchWeek/7/LaunchSection/TicketBrick.tsx
+2 -4
View File
@@ -49,10 +49,8 @@ export function TicketBrick({ user }: Props) {
className="w-20 h-20 rounded-full mx-auto"
/>
<div className="text-center">
<h3 className="gradient-text-scale-100 text-xl">
{user.name ? user.name : user.username}
</h3>
{user.name && <p className="gradient-text-scale-100 text-sm">@{user.username}</p>}
<h3 className="gradient-text-100 text-xl">{user.name ? user.name : user.username}</h3>
{user.name && <p className="gradient-text-100 text-sm">@{user.username}</p>}
</div>
</div>
<TicketNumber number={user.ticketNumber} size="small" />
apps/www/components/LaunchWeek/7/LaunchSection/TicketBrickWall.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export default function TicketBrickWall({ users }: Props) {
<div className="relative pb-20 pt-28 md:pt-40">
<div className="mx-auto bg-[#1C1C1C]">
<div className="max-w-[38rem] mb-8 mx-auto">
<h2 className="text-center radial-gradient-text-scale-500">
<h2 className="text-center radial-gradient-text-500">
Explore the unique tickets generated by our community
</h2>
</div>
apps/www/components/LaunchWeek/7/LaunchSection/index.tsx
+5 -10
View File
@@ -30,7 +30,7 @@ export const LaunchSection = (props: WeekDayProps) => {
></div>
{/* END timeline dot */}
<div className="flex items-center gap-3">
<span className="text-light text-sm">{props.date}</span>
<span className="text-foreground-light text-sm">{props.date}</span>
{props.shipped ? (
<Badge>
<div className="flex items-center gap-2">
@@ -48,7 +48,7 @@ export const LaunchSection = (props: WeekDayProps) => {
{props.shipped ? props.title : props.dd + ' 08:00 PT | 11:00 ET'}
</h4>
{props.shipped && <p className="text-light text-base">{props.description}</p>}
{props.shipped && <p className="text-foreground-light text-base">{props.description}</p>}
</div>
)
@@ -163,12 +163,7 @@ export const LaunchSection = (props: WeekDayProps) => {
<div className="flex flex-col gap-12">
{props.articles &&
props.articles.map((article: Article, index) => (
<div
key={article.url + index}
className="
dark:bg-scale-300 rounded border bg-white
"
>
<div key={article.url + index} className="bg-surface-100 rounded border">
<div className="p-6 px-10">
<ArticleButtonListItem {...article} />
</div>
@@ -176,10 +171,10 @@ export const LaunchSection = (props: WeekDayProps) => {
{article.products && (
<>
{/* border */}
<div className="bg-scale-300 dark:bg-scale-400 h-px w-full"></div>
<div className="bg-surface-200 h-px w-full"></div>
<div className="flex flex-col gap-6 p-6 px-10 pb-10">
<h3 className="text-light text-sm">New releases</h3>
<h3 className="text-foreground-light text-sm">New releases</h3>
{article.products &&
article.products.map((product: Product, index) => (
<ProductButtonListItem key={product.url + index} {...product} />
apps/www/components/LaunchWeek/7/Ticket/TicketActions.tsx
+11 -7
View File
@@ -57,7 +57,7 @@ export default function TicketActions({
<div className="grid gap-1 grid-cols-1 sm:grid-cols-3 lg:grid-cols-1">
{!sharePage ? (
<>
<div className="rounded-full bg-[#E6E8EB] text-scale-500 py-1 px-3 border border-[#dfe1e3] text-xs mb-1">
<div className="rounded-full bg-[#E6E8EB] text-background-surface-300 py-1 px-3 border border-[#dfe1e3] text-xs mb-1">
<div className="flex items-center justify-center gap-2">
<div className="text-muted">
<IconCheckCircle size={10} strokeWidth={1} />
@@ -67,15 +67,17 @@ export default function TicketActions({
</div>
<div
className={`rounded-full ${
userData.sharedOnTwitter ? 'bg-[#E6E8EB] text-scale-500' : 'text-white'
} text-scale-500 py-1 px-3 border border-[#dfe1e3] text-xs mb-1 transition-all ease-out hover:bg-[#dfe1e3]`}
userData.sharedOnTwitter ? 'bg-[#E6E8EB] text-background-surface-300' : 'text-white'
} text-background-surface-300 py-1 px-3 border border-[#dfe1e3] text-xs mb-1 transition-all ease-out hover:bg-[#dfe1e3]`}
>
<a
href={tweetUrl}
rel="noopener noreferrer prefetch"
target="_blank"
className={`flex items-center justify-center gap-2 ${
userData.sharedOnTwitter ? 'text-scale-500' : 'text-white hover:text-scale-500'
userData.sharedOnTwitter
? 'text-background-surface-300'
: 'text-white hover:text-background-surface-300'
}`}
>
{userData.sharedOnTwitter && (
@@ -88,15 +90,17 @@ export default function TicketActions({
</div>
<div
className={`rounded-full ${
userData.sharedOnLinkedIn ? 'bg-[#E6E8EB] text-scale-500' : 'text-white'
} text-scale-500 py-1 px-3 border border-[#dfe1e3] text-xs mb-1 transition-all ease-out hover:bg-[#dfe1e3]`}
userData.sharedOnLinkedIn ? 'bg-[#E6E8EB] text-background-surface-300' : 'text-white'
} text-background-surface-300 py-1 px-3 border border-[#dfe1e3] text-xs mb-1 transition-all ease-out hover:bg-[#dfe1e3]`}
>
<a
href={linkedInUrl}
rel="noopener noreferrer prefetch"
target="_blank"
className={`flex items-center justify-center gap-2 ${
userData.sharedOnLinkedIn ? 'text-scale-500' : 'text-white hover:text-scale-500'
userData.sharedOnLinkedIn
? 'text-background-surface-300'
: 'text-white hover:text-background-surface-300'
}`}
>
{userData.sharedOnLinkedIn && (
apps/www/components/LaunchWeek/7/Ticket/TicketProfile.tsx
+1 -1
View File
@@ -71,7 +71,7 @@ export default function TicketProfile({
})} text-3xl sm:text-4xl bg-gradient-to-r from-[#F8F9FA] via-[#F8F9FA] to-[#F8F9FA60] bg-clip-text text-transparent text-center`}
>
{name || username || 'Your Name'}
<p>{name && <p className="gradient-text-scale-100 text-sm">@{username}</p>}</p>
<p>{name && <p className="gradient-text-100 text-sm">@{username}</p>}</p>
</div>
</p>
) : (
apps/www/components/LaunchWeek/7/Ticket/form.tsx
+5 -5
View File
@@ -129,7 +129,7 @@ export default function Form({ sharePage, align = 'Center' }: Props) {
align === 'Left' ? 'text-center xl:text-left' : 'text-center'
)}
>
<p className="text-lighter text-base max-w-[420px]">
<p className="text-foreground-lighter text-base max-w-[420px]">
Register to get your ticket and stay tuned all week for daily announcements
</p>
</div>
@@ -160,8 +160,8 @@ export default function Form({ sharePage, align = 'Center' }: Props) {
<input
className={`
transition-all
border border-scale-300 bg-scaleA-200 h-10
focus:border-scale-500 focus:ring-scaleA-300
border border-background-surface-100 bg-background h-10
focus:border-default focus:ring-background-surface-100
text-foreground text-base rounded-full w-full px-5
`}
type="email"
@@ -179,9 +179,9 @@ export default function Form({ sharePage, align = 'Center' }: Props) {
type="submit"
className={[
'transition-all',
'absolute bg-scale-300 text-foreground border border-scale-600 text-sm hover:bg-scale-400',
'absolute bg-surface-100 text-foreground border border-control text-sm hover:bg-overlay-hover',
'rounded-full px-4',
'focus:invalid:border-scale-500 focus:invalid:ring-scaleA-300',
'focus:invalid:border-default focus:invalid:ring-background-surface-100',
'absolute right-1 my-auto h-8 top-0 bottom-0',
].join(' ')}
disabled={formState === 'loading'}
apps/www/components/LaunchWeek/7/Ticket/ticket-copy.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ export default function TicketCopy({ username, isGolden }: Props) {
className={cn(
styleUtils.appear,
styleUtils['appear-third'],
'bg-scaleA-200 h-8 rounded-full border border-[#E3E3E370] w-full overflow-hidden'
'bg-background h-8 rounded-full border border-[#E3E3E370] w-full overflow-hidden'
)}
id="wayfinding--ticket-copy"
>
apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx
+2 -2
View File
@@ -8,7 +8,7 @@ const LW8CalloutsSection = () => {
return (
<SectionContainer className="!py-0 w-full !px-0 !max-w-none">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 scroll-mt-[105px]" id="hackathon">
<SmallCard className="hover:from-scale-900 hover:to-scale-900">
<SmallCard className="hover:from-foreground-muted hover:to-foreground-muted">
<Link
href="https://twitter.com/supabase/status/1688544202643111936"
target="_blank"
@@ -30,7 +30,7 @@ const LW8CalloutsSection = () => {
</div>
</Link>
</SmallCard>
<SmallCard className="hover:from-scale-900 hover:to-scale-900">
<SmallCard className="hover:from-foreground-muted hover:to-foreground-muted">
<Link
href="/blog/supabase-lw8-hackathon"
className="flex flex-row justify-between items-center w-full h-full gap-2"
Loaded 100 of 540 files, more files were not shown because too many files have changed in this diff. Show more