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

Color system (#47288)

Browse Source 
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES/NO

## What kind of change does this PR introduce?

Bug fix, feature, docs update, ...

## What is the current behavior?

Please link any relevant issues here.

## What is the new behavior?

Feel free to include screenshots if it includes visual changes.

## Additional context

Add any other context or screenshots.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Refreshed theming across the UI to use modern color expressions and
shared theme variables (including OKLCH-based gradients), improving
consistency for charts, code blocks, overlays, icons, and decorative
backgrounds.
* **Bug Fixes**
* Improved light/dark color and gradient consistency across axis/grid
styling, reference lines, buttons/badges, sidebar accents, loaders, and
other visual components.
* **Documentation**
* Updated styling/theming guidance to align with the revised semantic
token system and the updated theme variable usage patterns.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Saxon FletcherandClaude Opus 4.8 authored and GitHub committed 2026-07-03 15:00:43 +10:00
1 parent be01b38118
commit fb02182e86
133 files changed
+1281 -1056
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/design-system/components/code-fragment.tsx
+2 -2
View File
@@ -94,10 +94,10 @@ export function CodeFragment({
)}
>
{showGrid && (
<div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,hsla(var(--foreground-default)/0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-size-[24px_24px]"></div>
<div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,oklch(from_var(--foreground-default)_l_c_h_/_0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-size-[24px_24px]"></div>
)}
{showDottedGrid && (
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(hsla(var(--foreground-default)/0.02)_1px,transparent_1px)] bg-size-[16px_16px] mask-[radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(oklch(from_var(--foreground-default)_l_c_h_/_0.02)_1px,transparent_1px)] bg-size-[16px_16px] mask-[radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
)}
<div className="z-10 relative">{ComponentPreview}</div>
</div>
apps/design-system/components/component-preview.tsx
+4 -4
View File
@@ -101,10 +101,10 @@ export function ComponentPreview({
)}
>
{showGrid && (
<div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,hsla(var(--foreground-default)/0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-size-[24px_24px]"></div>
<div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,oklch(from_var(--foreground-default)_l_c_h_/_0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-size-[24px_24px]"></div>
)}
{showDottedGrid && (
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(hsla(var(--foreground-default)/0.02)_1px,transparent_1px)] bg-size-[16px_16px] mask-[radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(oklch(from_var(--foreground-default)_l_c_h_/_0.02)_1px,transparent_1px)] bg-size-[16px_16px] mask-[radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
)}
<div className="z-10 relative">{ComponentPreview}</div>
{/* <div className="preview-grid-background"></div> */}
@@ -146,10 +146,10 @@ export function ComponentPreview({
})}
>
{showGrid && (
<div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,hsla(var(--foreground-default)/0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-size-[24px_24px]"></div>
<div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,oklch(from_var(--foreground-default)_l_c_h_/_0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-size-[24px_24px]"></div>
)}
{showDottedGrid && (
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(hsla(var(--foreground-default)/0.02)_1px,transparent_1px)] bg-size-[16px_16px] mask-[radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(oklch(from_var(--foreground-default)_l_c_h_/_0.02)_1px,transparent_1px)] bg-size-[16px_16px] mask-[radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
)}
<div className="z-10 relative">{ComponentPreview}</div>
</div>
apps/design-system/registry/default/example/drawer-demo.tsx
+1 -1
View File
@@ -111,7 +111,7 @@ export default function DrawerDemo() {
dataKey="goal"
style={
{
fill: 'hsl(var(--foreground-default))',
fill: 'var(--foreground-default)',
opacity: 0.9,
} as React.CSSProperties
}
apps/design-system/registry/default/example/page-layout-edge-function.tsx
+4 -4
View File
@@ -150,7 +150,7 @@ const buildMockChartData = (intervalKey: string) => {
const EXECUTION_TIME_CHART_CONFIG = {
avg_execution_time: {
label: 'Average Execution Time',
color: 'hsl(var(--foreground-default))',
color: 'var(--foreground-default)',
},
max_execution_time: {
label: 'Max Execution Time',
@@ -485,7 +485,7 @@ function OverviewPage() {
{
y: averageExecutionTime,
label: 'average',
stroke: 'hsl(var(--foreground-default))',
stroke: 'var(--foreground-default)',
strokeWidth: 1.5,
},
]}
@@ -538,7 +538,7 @@ function OverviewPage() {
{
y: averageCpuTime,
label: 'average',
stroke: 'hsl(var(--foreground-default))',
stroke: 'var(--foreground-default)',
strokeWidth: 1.5,
},
]}
@@ -589,7 +589,7 @@ function OverviewPage() {
{
y: averageMemoryUsage,
label: 'average',
stroke: 'hsl(var(--foreground-default))',
stroke: 'var(--foreground-default)',
strokeWidth: 1.5,
},
]}
apps/design-system/styles/code-block-variables.css
+5 -5
View File
@@ -18,16 +18,16 @@
[data-theme='light'],
.light {
--code-token-keyword: #6b35dc;
--code-foreground: hsl(var(--foreground-light) / 1);
--code-foreground: oklch(from var(--foreground-light) l c h / 1);
--code-token-constant: #15593b;
--code-token-string: #f1a10d;
--code-token-comment: #7e7e7e;
--code-token-parameter: hsl(var(--foreground-light) / 1);
--code-token-parameter: oklch(from var(--foreground-light) l c h / 1);
--code-token-function: #15593b;
--code-token-string-expression: #f1a10d;
--code-token-punctuation: hsl(var(--foreground-light) / 1);
--code-token-link: hsl(var(--foreground-light) / 1);
--code-token-number: hsl(var(--foreground-light) / 1);
--code-token-punctuation: oklch(from var(--foreground-light) l c h / 1);
--code-token-link: oklch(from var(--foreground-light) l c h / 1);
--code-token-number: oklch(from var(--foreground-light) l c h / 1);
--code-token-property: #15593b;
--code-highlight-color: #1c1c1c;
}
apps/docs/components/DocsCoverLogo.tsx
+42 -42
View File
@@ -1,7 +1,7 @@
'use client'
import { domAnimation, LazyMotion, m } from 'framer-motion'
import React, { type PropsWithChildren } from 'react'
import { LazyMotion, domAnimation, m } from 'framer-motion'
const DocsCoverLogo = (props: PropsWithChildren) => {
const pathMotionConfig = {
@@ -47,7 +47,7 @@ const DocsCoverLogo = (props: PropsWithChildren) => {
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="hsl(var(--foreground-light))"
stroke="var(--foreground-light)"
strokeOpacity="0.1"
strokeWidth="0.7"
strokeMiterlimit="10"
@@ -215,7 +215,7 @@ const DocsCoverLogo = (props: PropsWithChildren) => {
animate={pathMotionConfig.animate}
transition={pathMotionConfig.transition as any}
d="M218.024 169.846H32.498"
stroke="hsl(var(--foreground-light))"
stroke="var(--foreground-light)"
strokeOpacity="0.1"
strokeWidth="0.7"
strokeMiterlimit="10"
@@ -291,8 +291,8 @@ const DocsCoverLogo = (props: PropsWithChildren) => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(125.451 114.82) rotate(90) scale(109.781 0.5)"
>
<stop stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-light)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</radialGradient>
<linearGradient
id="paint1_linear_0_1"
@@ -302,8 +302,8 @@ const DocsCoverLogo = (props: PropsWithChildren) => {
y2="11.9994"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-light)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint2_linear_0_1"
@@ -313,8 +313,8 @@ const DocsCoverLogo = (props: PropsWithChildren) => {
y2="204.984"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-light)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint3_linear_0_1"
@@ -324,8 +324,8 @@ const DocsCoverLogo = (props: PropsWithChildren) => {
y2="13.9993"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-light)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint4_linear_0_1"
@@ -335,8 +335,8 @@ const DocsCoverLogo = (props: PropsWithChildren) => {
y2="204.984"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-light)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint5_linear_0_1"
@@ -346,9 +346,9 @@ const DocsCoverLogo = (props: PropsWithChildren) => {
y2="-7.94661"
gradientUnits="userSpaceOnUse"
>
<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" />
<stop stopColor="var(--foreground-lighter)" stopOpacity="0" />
<stop offset="0.489583" stopColor="var(--foreground-light)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint6_linear_0_1"
@@ -358,9 +358,9 @@ const DocsCoverLogo = (props: PropsWithChildren) => {
y2="-3.99932"
gradientUnits="userSpaceOnUse"
>
<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" />
<stop stopColor="var(--foreground-lighter)" stopOpacity="0" />
<stop offset="0.489583" stopColor="var(--foreground-light)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint7_linear_0_1"
@@ -370,9 +370,9 @@ const DocsCoverLogo = (props: PropsWithChildren) => {
y2="199.061"
gradientUnits="userSpaceOnUse"
>
<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" />
<stop stopColor="var(--foreground-lighter)" stopOpacity="0.1" />
<stop offset="0.505208" stopColor="var(--foreground-light)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--foreground-lighter)" stopOpacity="0.1" />
</linearGradient>
<radialGradient
id="paint8_radial_0_1"
@@ -382,8 +382,8 @@ const DocsCoverLogo = (props: PropsWithChildren) => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(125.752 114.291) rotate(90) scale(109.271 0.5)"
>
<stop stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-light)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</radialGradient>
<linearGradient
id="paint9_linear_0_1"
@@ -393,8 +393,8 @@ const DocsCoverLogo = (props: PropsWithChildren) => {
y2="6.31757"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--foreground-light))" stopOpacity="0.3" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-light)" stopOpacity="0.3" />
<stop offset="1" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint10_linear_0_1"
@@ -404,8 +404,8 @@ const DocsCoverLogo = (props: PropsWithChildren) => {
y2="200"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--foreground-light))" stopOpacity="0.3" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-light)" stopOpacity="0.3" />
<stop offset="1" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint11_linear_0_1"
@@ -415,9 +415,9 @@ const DocsCoverLogo = (props: PropsWithChildren) => {
y2="199.061"
gradientUnits="userSpaceOnUse"
>
<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" />
<stop stopColor="var(--foreground-lighter)" stopOpacity="0.1" />
<stop offset="0.505208" stopColor="var(--foreground-light)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--foreground-lighter)" stopOpacity="0.1" />
</linearGradient>
<radialGradient
id="paint12_radial_0_1"
@@ -427,8 +427,8 @@ const DocsCoverLogo = (props: PropsWithChildren) => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(125.261 59.2344) rotate(90) scale(0.5 263.749)"
>
<stop stopColor="hsl(var(--foreground-light))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-light)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</radialGradient>
<linearGradient
id="paint13_linear_0_1"
@@ -438,9 +438,9 @@ const DocsCoverLogo = (props: PropsWithChildren) => {
y2="94.9749"
gradientUnits="userSpaceOnUse"
>
<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" />
<stop stopColor="var(--foreground-lighter)" stopOpacity="0.5" />
<stop offset="0.505208" stopColor="var(--foreground-light)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--foreground-lighter)" stopOpacity="0.5" />
</linearGradient>
<linearGradient
id="paint14_linear_0_1"
@@ -450,9 +450,9 @@ const DocsCoverLogo = (props: PropsWithChildren) => {
y2="131.43"
gradientUnits="userSpaceOnUse"
>
<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" />
<stop stopColor="var(--foreground-lighter)" stopOpacity="0.5" />
<stop offset="0.505208" stopColor="var(--foreground-light)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--foreground-lighter)" stopOpacity="0.5" />
</linearGradient>
<linearGradient
id="paint15_linear_0_1"
@@ -462,9 +462,9 @@ const DocsCoverLogo = (props: PropsWithChildren) => {
y2="1.99785"
gradientUnits="userSpaceOnUse"
>
<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" />
<stop stopColor="var(--foreground-lighter)" stopOpacity="0.1" />
<stop offset="0.505208" stopColor="var(--foreground-light)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--foreground-lighter)" stopOpacity="0.1" />
</linearGradient>
<linearGradient
id="paint16_linear_0_1"
apps/docs/components/Mermaid.tsx
+6 -6
View File
@@ -6,13 +6,13 @@ interface MermaidProps {
export function Mermaid({ chart }: MermaidProps) {
const svg = renderMermaidSVG(chart, {
bg: 'hsl(var(--background-default))',
fg: 'hsl(var(--foreground-default))',
bg: 'var(--background-default)',
fg: 'var(--foreground-default)',
accent: 'hsl(var(--brand-default))',
muted: 'hsl(var(--foreground-light))',
line: 'hsl(var(--border-strong))',
border: 'hsl(var(--border-strong))',
surface: 'hsl(var(--background-surface-200))',
muted: 'var(--foreground-light)',
line: 'var(--border-strong)',
border: 'var(--border-strong)',
surface: 'var(--background-surface-200)',
transparent: true,
})
apps/docs/components/Navigation/NavigationMenu/GlobalNavigationMenu.tsx
+1 -1
View File
@@ -59,7 +59,7 @@ export const useActiveMenuLabel = (menu: typeof GLOBAL_MENU_ITEMS) => {
const GlobalNavigationMenu: FC = () => {
const activeLabel = useActiveMenuLabel(GLOBAL_MENU_ITEMS)
const triggerClassName =
'h-(--header-height) p-2 bg-transparent border-0 border-b-2 border-transparent font-normal rounded-none text-foreground-light hover:text-foreground data-open:text-foreground! data-radix-collection-item:focus-visible:ring-2 data-radix-collection-item:focus-visible:ring-foreground-lighter data-radix-collection-item:focus-visible:text-foreground h-full focus-visible:rounded-sm shadow-none! outline-hidden transition-all outline-0 focus-visible:outline-4 focus-visible:outline-offset-1 focus-visible:outline-brand-600'
'h-(--header-height) p-2 bg-transparent border-0 border-b-2 border-transparent font-normal rounded-none text-foreground-light hover:bg-transparent hover:text-foreground data-open:bg-transparent! data-open:text-foreground! data-radix-collection-item:focus-visible:ring-2 data-radix-collection-item:focus-visible:ring-foreground-lighter data-radix-collection-item:focus-visible:text-foreground h-full focus-visible:rounded-sm shadow-none! outline-hidden transition-all outline-0 focus-visible:outline-4 focus-visible:outline-offset-1 focus-visible:outline-brand-600'
return (
<div className="flex relative gap-2 justify-start items-end w-full h-full">
apps/docs/content/guides/auth/passwords.mdx
+3 -2
View File
@@ -28,9 +28,10 @@ The instructions in this section assume that email confirmations are enabled.
stickyTabList={{
style: {
top: 'var(--header-height)',
backgroundColor: 'hsl(var(--background-default) / var(--tw-bg-opacity))',
backgroundColor:
'oklch(from var(--background-default) l c h / var(--tw-bg-opacity))',
maskImage: 'none',
borderBottom: '1px solid hsl(var(--border-default) / 1)',
borderBottom: '1px solid oklch(from var(--border-default) l c h / 1)',
}
}}
size="large"
apps/docs/styles/globals.css
+7 -7
View File
@@ -46,7 +46,7 @@
::before,
::backdrop,
::file-selector-button {
border-color: hsl(var(--border-default, currentColor));
border-color: var(--border-default, currentColor);
}
code,
@@ -399,7 +399,7 @@ th code {
transition-timing-function: cubic-bezier(0.24, 0.25, 0.05, 1) !important;
}
[data-rmiz-modal-overlay='visible'] {
background-color: hsl(var(--background-default)) !important;
background-color: var(--background-default) !important;
opacity: 0.8;
}
[data-rmiz-modal-img] {
@@ -431,16 +431,16 @@ th code {
[data-theme='light'],
.light {
--code-token-keyword: #6b35dc;
--code-foreground: hsl(var(--foreground-light) / 1);
--code-foreground: oklch(from var(--foreground-light) l c h / 1);
--code-token-constant: #15593b;
--code-token-string: #f1a10d;
--code-token-comment: #7e7e7e;
--code-token-parameter: hsl(var(--foreground-light) / 1);
--code-token-parameter: oklch(from var(--foreground-light) l c h / 1);
--code-token-function: #15593b;
--code-token-string-expression: #f1a10d;
--code-token-punctuation: hsl(var(--foreground-light) / 1);
--code-token-link: hsl(var(--foreground-light) / 1);
--code-token-number: hsl(var(--foreground-light) / 1);
--code-token-punctuation: oklch(from var(--foreground-light) l c h / 1);
--code-token-link: oklch(from var(--foreground-light) l c h / 1);
--code-token-number: oklch(from var(--foreground-light) l c h / 1);
--code-token-property: #15593b;
--code-highlight-color: #1c1c1c;
}
apps/learn/styles/code-block-variables.css
+5 -5
View File
@@ -18,16 +18,16 @@
[data-theme='light'],
.light {
--code-token-keyword: #6b35dc;
--code-foreground: hsl(var(--foreground-light) / 1);
--code-foreground: oklch(from var(--foreground-light) l c h / 1);
--code-token-constant: #15593b;
--code-token-string: #f1a10d;
--code-token-comment: #7e7e7e;
--code-token-parameter: hsl(var(--foreground-light) / 1);
--code-token-parameter: oklch(from var(--foreground-light) l c h / 1);
--code-token-function: #15593b;
--code-token-string-expression: #f1a10d;
--code-token-punctuation: hsl(var(--foreground-light) / 1);
--code-token-link: hsl(var(--foreground-light) / 1);
--code-token-number: hsl(var(--foreground-light) / 1);
--code-token-punctuation: oklch(from var(--foreground-light) l c h / 1);
--code-token-link: oklch(from var(--foreground-light) l c h / 1);
--code-token-number: oklch(from var(--foreground-light) l c h / 1);
--code-token-property: #15593b;
--code-highlight-color: #1c1c1c;
}
apps/learn/styles/globals.css
+127 -127
View File
@@ -11,25 +11,25 @@
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
--color-background: hsl(var(--background));
--color-foreground: hsl(var(--foreground));
--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));
--color-popover: hsl(var(--popover));
--color-popover-foreground: hsl(var(--popover-foreground));
--color-primary: hsl(var(--primary));
--color-primary-foreground: hsl(var(--primary-foreground));
--color-secondary: hsl(var(--secondary));
--color-secondary-foreground: hsl(var(--secondary-foreground));
--color-muted: hsl(var(--muted));
--color-muted-foreground: hsl(var(--muted-foreground));
--color-accent: hsl(var(--accent));
--color-accent-foreground: hsl(var(--accent-foreground));
--color-destructive: hsl(var(--destructive));
--color-destructive-foreground: hsl(var(--destructive-foreground));
--color-border: hsl(var(--border));
--color-input: hsl(var(--input));
--color-ring: hsl(var(--ring));
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: hsl(var(--chart-1));
--color-chart-2: hsl(var(--chart-2));
--color-chart-3: hsl(var(--chart-3));
@@ -39,74 +39,74 @@
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 224 71.4% 4.1%;
--card: 0 0% 100%;
--card-foreground: 224 71.4% 4.1%;
--popover: 0 0% 100%;
--popover-foreground: 224 71.4% 4.1%;
--primary: 220.9 39.3% 11%;
--primary-foreground: 210 20% 98%;
--secondary: 220 14.3% 95.9%;
--secondary-foreground: 220.9 39.3% 11%;
--muted: 220 14.3% 95.9%;
--muted-foreground: 220 8.9% 46.1%;
--accent: 220 14.3% 95.9%;
--accent-foreground: 220.9 39.3% 11%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 84.2% 60.2%;
--border: 220 13% 91%;
--input: 220 13% 91%;
--ring: 220 13% 70.8%;
--background: hsl(0 0% 100%);
--foreground: hsl(224 71.4% 4.1%);
--card: hsl(0 0% 100%);
--card-foreground: hsl(224 71.4% 4.1%);
--popover: hsl(0 0% 100%);
--popover-foreground: hsl(224 71.4% 4.1%);
--primary: hsl(220.9 39.3% 11%);
--primary-foreground: hsl(210 20% 98%);
--secondary: hsl(220 14.3% 95.9%);
--secondary-foreground: hsl(220.9 39.3% 11%);
--muted: hsl(220 14.3% 95.9%);
--muted-foreground: hsl(220 8.9% 46.1%);
--accent: hsl(220 14.3% 95.9%);
--accent-foreground: hsl(220.9 39.3% 11%);
--destructive: hsl(0 84.2% 60.2%);
--destructive-foreground: hsl(0 84.2% 60.2%);
--border: hsl(220 13% 91%);
--input: hsl(220 13% 91%);
--ring: hsl(220 13% 70.8%);
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.625rem;
--sidebar: 210 20% 98.5%;
--sidebar-foreground: 224 71.4% 4.1%;
--sidebar-primary: 220.9 39.3% 11%;
--sidebar-primary-foreground: 210 20% 98%;
--sidebar-accent: 220 14.3% 95.9%;
--sidebar-accent-foreground: 220.9 39.3% 11%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 220 13% 70.8%;
--sidebar: hsl(210 20% 98.5%);
--sidebar-foreground: hsl(224 71.4% 4.1%);
--sidebar-primary: hsl(220.9 39.3% 11%);
--sidebar-primary-foreground: hsl(210 20% 98%);
--sidebar-accent: hsl(220 14.3% 95.9%);
--sidebar-accent-foreground: hsl(220.9 39.3% 11%);
--sidebar-border: hsl(220 13% 91%);
--sidebar-ring: hsl(220 13% 70.8%);
}
.dark {
--background: 224 71.4% 4.1%;
--foreground: 210 20% 98%;
--card: 224 71.4% 4.1%;
--card-foreground: 210 20% 98%;
--popover: 224 71.4% 4.1%;
--popover-foreground: 210 20% 98%;
--primary: 210 20% 98%;
--primary-foreground: 220.9 39.3% 11%;
--secondary: 215 27.9% 16.9%;
--secondary-foreground: 210 20% 98%;
--muted: 215 27.9% 16.9%;
--muted-foreground: 217.9 10.6% 64.9%;
--accent: 215 27.9% 16.9%;
--accent-foreground: 210 20% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 84.2% 60.2%;
--border: 215 27.9% 16.9%;
--input: 215 27.9% 16.9%;
--ring: 217.9 10.6% 55.6%;
--background: hsl(224 71.4% 4.1%);
--foreground: hsl(210 20% 98%);
--card: hsl(224 71.4% 4.1%);
--card-foreground: hsl(210 20% 98%);
--popover: hsl(224 71.4% 4.1%);
--popover-foreground: hsl(210 20% 98%);
--primary: hsl(210 20% 98%);
--primary-foreground: hsl(220.9 39.3% 11%);
--secondary: hsl(215 27.9% 16.9%);
--secondary-foreground: hsl(210 20% 98%);
--muted: hsl(215 27.9% 16.9%);
--muted-foreground: hsl(217.9 10.6% 64.9%);
--accent: hsl(215 27.9% 16.9%);
--accent-foreground: hsl(210 20% 98%);
--destructive: hsl(0 62.8% 30.6%);
--destructive-foreground: hsl(0 84.2% 60.2%);
--border: hsl(215 27.9% 16.9%);
--input: hsl(215 27.9% 16.9%);
--ring: hsl(217.9 10.6% 55.6%);
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
--sidebar: 220.9 39.3% 11%;
--sidebar-foreground: 210 20% 98%;
--sidebar-primary: 220 70% 50%;
--sidebar-primary-foreground: 210 20% 98%;
--sidebar-accent: 215 27.9% 16.9%;
--sidebar-accent-foreground: 210 20% 98%;
--sidebar-border: 215 27.9% 16.9%;
--sidebar-ring: 220 13% 43.9%;
--sidebar: hsl(220.9 39.3% 11%);
--sidebar-foreground: hsl(210 20% 98%);
--sidebar-primary: hsl(220 70% 50%);
--sidebar-primary-foreground: hsl(210 20% 98%);
--sidebar-accent: hsl(215 27.9% 16.9%);
--sidebar-accent-foreground: hsl(210 20% 98%);
--sidebar-border: hsl(215 27.9% 16.9%);
--sidebar-ring: hsl(220 13% 43.9%);
}
}
@@ -153,75 +153,75 @@
}
.preview {
--background: 0 0% 100%;
--foreground: 0 0% 14.5%;
--card: 0 0% 100%;
--card-foreground: 0 0% 14.5%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 14.5%;
--primary: 0 0% 20.5%;
--primary-foreground: 0 0% 98.5%;
--secondary: 0 0% 97%;
--secondary-foreground: 0 0% 20.5%;
--muted: 0 0% 97%;
--muted-foreground: 0 0% 55.6%;
--accent: 0 0% 97%;
--accent-foreground: 0 0% 20.5%;
--destructive: 27.3 24.5% 57.7%;
--destructive-foreground: 27.3 24.5% 57.7%;
--border: 0 0% 92.2%;
--input: 0 0% 92.2%;
--ring: 0 0% 70.8%;
--background: hsl(0 0% 100%);
--foreground: hsl(0 0% 14.5%);
--card: hsl(0 0% 100%);
--card-foreground: hsl(0 0% 14.5%);
--popover: hsl(0 0% 100%);
--popover-foreground: hsl(0 0% 14.5%);
--primary: hsl(0 0% 20.5%);
--primary-foreground: hsl(0 0% 98.5%);
--secondary: hsl(0 0% 97%);
--secondary-foreground: hsl(0 0% 20.5%);
--muted: hsl(0 0% 97%);
--muted-foreground: hsl(0 0% 55.6%);
--accent: hsl(0 0% 97%);
--accent-foreground: hsl(0 0% 20.5%);
--destructive: hsl(27.3 24.5% 57.7%);
--destructive-foreground: hsl(27.3 24.5% 57.7%);
--border: hsl(0 0% 92.2%);
--input: hsl(0 0% 92.2%);
--ring: hsl(0 0% 70.8%);
--chart-1: 41.1 22.2% 64.6%;
--chart-2: 184.7 11.8% 60%;
--chart-3: 227.4 7% 39.8%;
--chart-4: 84.4 18.9% 82.8%;
--chart-5: 70.1 18.8% 76.9%;
--radius: 0.625rem;
--sidebar: 0 0% 98.5%;
--sidebar-foreground: 0 0% 14.5%;
--sidebar-primary: 0 0% 20.5%;
--sidebar-primary-foreground: 0 0% 98.5%;
--sidebar-accent: 0 0% 97%;
--sidebar-accent-foreground: 0 0% 20.5%;
--sidebar-border: 0 0% 92.2%;
--sidebar-ring: 0 0% 70.8%;
--sidebar: hsl(0 0% 98.5%);
--sidebar-foreground: hsl(0 0% 14.5%);
--sidebar-primary: hsl(0 0% 20.5%);
--sidebar-primary-foreground: hsl(0 0% 98.5%);
--sidebar-accent: hsl(0 0% 97%);
--sidebar-accent-foreground: hsl(0 0% 20.5%);
--sidebar-border: hsl(0 0% 92.2%);
--sidebar-ring: hsl(0 0% 70.8%);
}
[data-theme='dark'] .preview,
[data-theme='classic-dark'] .preview {
--background: 0 0% 14.5%;
--foreground: 0 0% 98.5%;
--card: 0 0% 0%;
--card-foreground: 0 0% 98.5%;
--popover: 0 0% 14.5%;
--popover-foreground: 0 0% 98.5%;
--primary: 0 0% 98.5%;
--primary-foreground: 0 0% 20.5%;
--secondary: 0 0% 26.9%;
--secondary-foreground: 0 0% 98.5%;
--muted: 0 0% 26.9%;
--muted-foreground: 0 0% 70.8%;
--accent: 0 0% 26.9%;
--accent-foreground: 0 0% 98.5%;
--destructive: 25.7 14.1% 39.6%;
--destructive-foreground: 25.3 23.7% 63.7%;
--border: 0 0% 26.9%;
--input: 0 0% 26.9%;
--ring: 0 0% 55.6%;
--background: hsl(0 0% 14.5%);
--foreground: hsl(0 0% 98.5%);
--card: hsl(0 0% 0%);
--card-foreground: hsl(0 0% 98.5%);
--popover: hsl(0 0% 14.5%);
--popover-foreground: hsl(0 0% 98.5%);
--primary: hsl(0 0% 98.5%);
--primary-foreground: hsl(0 0% 20.5%);
--secondary: hsl(0 0% 26.9%);
--secondary-foreground: hsl(0 0% 98.5%);
--muted: hsl(0 0% 26.9%);
--muted-foreground: hsl(0 0% 70.8%);
--accent: hsl(0 0% 26.9%);
--accent-foreground: hsl(0 0% 98.5%);
--destructive: hsl(25.7 14.1% 39.6%);
--destructive-foreground: hsl(25.3 23.7% 63.7%);
--border: hsl(0 0% 26.9%);
--input: hsl(0 0% 26.9%);
--ring: hsl(0 0% 55.6%);
--chart-1: 264.4 24.3% 48.8%;
--chart-2: 162.5 17% 69.6%;
--chart-3: 70.1 18.8% 76.9%;
--chart-4: 303.9 26.5% 62.7%;
--chart-5: 16.4 24.6% 64.5%;
--sidebar: 0 0% 20.5%;
--sidebar-foreground: 0 0% 98.5%;
--sidebar-primary: 264.4 24.3% 48.8%;
--sidebar-primary-foreground: 0 0% 98.5%;
--sidebar-accent: 0 0% 26.9%;
--sidebar-accent-foreground: 0 0% 98.5%;
--sidebar-border: 0 0% 26.9%;
--sidebar-ring: 0 0% 43.9%;
--sidebar: hsl(0 0% 20.5%);
--sidebar-foreground: hsl(0 0% 98.5%);
--sidebar-primary: hsl(264.4 24.3% 48.8%);
--sidebar-primary-foreground: hsl(0 0% 98.5%);
--sidebar-accent: hsl(0 0% 26.9%);
--sidebar-accent-foreground: hsl(0 0% 98.5%);
--sidebar-border: hsl(0 0% 26.9%);
--sidebar-ring: hsl(0 0% 43.9%);
}
.preview * {
apps/lite-studio/styles/globals.css
+1 -1
View File
@@ -38,6 +38,6 @@ body {
::before,
::backdrop,
::file-selector-button {
border-color: hsl(var(--border-default, currentColor));
border-color: var(--border-default, currentColor);
}
}
apps/studio/components/grid/components/grid/ColumnHeader.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export function ColumnHeader<R>({
} as const
return (
<div ref={setNodeRef} style={style} className="w-full bg-surface-200">
<div ref={setNodeRef} style={style} className="w-full">
<div className={`sb-grid-column-header ${cursor}`}>
<div className="sb-grid-column-header__inner grow" {...attributes} {...listeners}>
<ColumnIcon type={columnType} name={column.name as string} foreignKey={foreignKey} />
apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/Edges.tsx
+2 -2
View File
@@ -56,7 +56,7 @@ const getEdgeVisual = ({ isComingUp, isReplicating, isFailed }: ReplicationState
if (isComingUp) {
return {
Icon: Loader2,
color: 'hsl(var(--foreground-light))',
color: 'var(--foreground-light)',
opacity: 1,
dashArray: '5',
shouldAnimate: true,
@@ -74,7 +74,7 @@ const getEdgeVisual = ({ isComingUp, isReplicating, isFailed }: ReplicationState
}
return {
Icon: Square,
color: 'hsl(var(--foreground-lighter))',
color: 'var(--foreground-lighter)',
opacity: 0.5,
dashArray: '5 5',
shouldAnimate: false,
apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.tsx
+2 -2
View File
@@ -126,7 +126,7 @@ export const DiskManagementReviewAndSubmitDialog = ({
{(hasComputeChanges || anyBillableDiskChange) && (
<>
<div className="relative flex border-b">
<div className="flex-1 flex flex-col items-center gap-2 py-6 px-4 border-r bg-linear-to-t from-[hsl(var(--background-surface-100))] to-transparent">
<div className="flex-1 flex flex-col items-center gap-2 py-6 px-4 border-r bg-linear-to-t from-[var(--background-surface-100)] to-transparent">
<span className="text-xs uppercase tracking-widest font-mono text-foreground-lighter">
Before
</span>
@@ -144,7 +144,7 @@ export const DiskManagementReviewAndSubmitDialog = ({
<ArrowRight size={16} className="text-brand-600 relative z-10" strokeWidth={2.5} />
</div>
<div className="flex-1 flex flex-col items-center gap-2 py-6 px-4 bg-linear-to-t from-[hsl(var(--background-surface-100))] to-transparent">
<div className="flex-1 flex flex-col items-center gap-2 py-6 px-4 bg-linear-to-t from-[var(--background-surface-100)] to-transparent">
<span className="text-xs uppercase tracking-widest font-mono text-foreground-lighter">
After
</span>
apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionInvocationsChart.tsx
+1 -1
View File
@@ -86,7 +86,7 @@ export const EdgeFunctionInvocationsChart = ({
{updateAnnotation && (
<ReferenceLine
x={updateAnnotation.timestamp}
stroke="hsl(var(--foreground-default))"
stroke="var(--foreground-default)"
strokeDasharray="4 4"
strokeWidth={1.5}
/>
apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionOverview.utils.ts
+1 -1
View File
@@ -105,7 +105,7 @@ export const CPU_TIME_CHART_CONFIG = {
export const EXECUTION_TIME_CHART_CONFIG = {
avg_execution_time: {
label: 'Average Execution Time',
color: 'hsl(var(--foreground-default))',
color: 'var(--foreground-default)',
},
max_execution_time: {
label: 'Max Execution Time',
apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionPerformanceSection.tsx
+1 -1
View File
@@ -86,7 +86,7 @@ export const EdgeFunctionPerformanceSection = ({
{
y: averageExecutionTime,
label: 'average',
stroke: 'hsl(var(--foreground-default))',
stroke: 'var(--foreground-default)',
strokeWidth: 1.5,
},
]}
apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionUsageSection.tsx
+2 -2
View File
@@ -115,7 +115,7 @@ export const EdgeFunctionUsageSection = ({
{
y: averageCpuTime,
label: 'average',
stroke: 'hsl(var(--foreground-default))',
stroke: 'var(--foreground-default)',
strokeWidth: 1.5,
},
]}
@@ -140,7 +140,7 @@ export const EdgeFunctionUsageSection = ({
{
y: averageMemoryUsage,
label: 'average',
stroke: 'hsl(var(--foreground-default))',
stroke: 'var(--foreground-default)',
strokeWidth: 1.5,
},
]}
apps/studio/components/interfaces/Integrations/GraphQL/graphiql.module.css
+1 -1
View File
@@ -103,7 +103,7 @@
* (--background-surface-300) already resolves per theme — so only --color-base below
* needs to branch on light/dark. */
--color-primary: 153, 50%, 50%;
--graphiql-response-bg: hsl(var(--background-surface-300));
--graphiql-response-bg: var(--background-surface-300);
}
:global(body.graphiql-dark) .root {
apps/studio/components/interfaces/Project/APIKeys.tsx
+3 -3
View File
@@ -188,9 +188,9 @@ export const APIKeys = () => {
className="absolute inset-0 rounded-md -mt-px"
style={{
backgroundImage: `
linear-gradient(to top, hsl(var(--background-surface-100)/1) 0%, hsl(var(--background-surface-100)/1) 30%, hsl(var(--background-surface-75)/0) 100%),
linear-gradient(to right, hsl(var(--border-default)/0.33) 1px, transparent 1px),
linear-gradient(to bottom, hsl(var(--border-default)/0.33) 1px, transparent 1px)
linear-gradient(to top, oklch(from var(--background-surface-100) l c h / 1) 0%, oklch(from var(--background-surface-100) l c h / 1) 30%, oklch(from var(--background-surface-75) l c h / 0) 100%),
linear-gradient(to right, oklch(from var(--border-default) l c h / 0.33) 1px, transparent 1px),
linear-gradient(to bottom, oklch(from var(--border-default) l c h / 0.33) 1px, transparent 1px)
`,
backgroundSize: '100% 100%, 15px 15px, 15px 15px',
backgroundPosition: '0 0, 0 0, 0 0',
apps/studio/components/interfaces/QueryInsights/QueryInsightsChart/QueryInsightsChart.tsx
+3 -3
View File
@@ -181,13 +181,13 @@ export const QueryInsightsChart = ({
dataKey="time"
tick={false}
tickLine={false}
axisLine={{ stroke: 'hsl(var(--border-default))' }}
axisLine={{ stroke: 'var(--border-default)' }}
height={1}
/>
<YAxis
axisLine={false}
tickLine={false}
tick={{ fontSize: 10, fill: 'hsl(var(--foreground-muted))' }}
tick={{ fontSize: 10, fill: 'var(--foreground-muted)' }}
tickCount={3}
width={40}
orientation="left"
@@ -208,7 +208,7 @@ export const QueryInsightsChart = ({
<CartesianGrid
horizontal={true}
vertical={false}
stroke="hsl(var(--border-default))"
stroke="var(--border-default)"
strokeOpacity={0.5}
/>
{legendItems.map((item) => (
apps/studio/components/interfaces/QueryInsights/QueryInsightsHealth/QueryInsightsHealthScore.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ export const QueryInsightsHealthScore = ({
<div
className="h-12 w-12 rounded-full flex items-center justify-center"
style={{
background: `conic-gradient(${color} ${score * 3.6}deg, hsl(var(--border-default)) ${score * 3.6}deg)`,
background: `conic-gradient(${color} ${score * 3.6}deg, var(--border-default) ${score * 3.6}deg)`,
}}
>
<div
apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx
+8 -8
View File
@@ -153,19 +153,19 @@ export const ChartBlock = ({
const getCellColor = (attribute: string, value: number) => {
const threshold = METRIC_THRESHOLDS[attribute as keyof typeof METRIC_THRESHOLDS]
if (!threshold) return 'hsl(var(--chart-1))'
if (!threshold) return 'var(--chart-1)'
if (threshold.check === 'gt') {
return value >= threshold.danger
? 'hsl(var(--chart-destructive))'
? 'var(--chart-destructive)'
: value >= threshold.warning
? 'hsl(var(--chart-warning))'
: 'hsl(var(--chart-1))'
? 'var(--chart-warning)'
: 'var(--chart-1)'
} else {
return value <= threshold.danger
? 'hsl(var(--chart-destructive))'
? 'var(--chart-destructive)'
: value <= threshold.warning
? 'hsl(var(--chart-warning))'
: 'hsl(var(--chart-1))'
? 'var(--chart-warning)'
: 'var(--chart-1)'
}
}
@@ -362,7 +362,7 @@ export const ChartBlock = ({
/>
}
/>
<Line dataKey={metricLabel} stroke="hsl(var(--chart-1))" radius={4} />
<Line dataKey={metricLabel} stroke="var(--chart-1)" radius={4} />
</LineChart>
)}
</ChartContainer>
apps/studio/components/interfaces/Reports/utils/geo.ts
+4 -4
View File
@@ -15,19 +15,19 @@ export interface MapChartTheme {
export const MAP_CHART_THEME: { light: MapChartTheme; dark: MapChartTheme } = {
light: {
zeroFill: 'hsl(var(--background-surface-400))',
zeroFill: 'var(--background-surface-400)',
brandFill: 'hsl(var(--brand-default))',
opacityScale: [0.18, 0.32, 0.5, 0.68, 0.86],
boundaryStroke: 'hsla(var(--brand-300), 0.6)',
boundaryStroke: 'hsl(var(--brand-300) / 0.6)',
boundaryStrokeHover: 'hsl(var(--brand-500))',
markerFill: 'hsl(var(--brand-default))',
oceanFill: 'transparent',
},
dark: {
zeroFill: 'hsl(var(--background-selection))',
zeroFill: 'var(--background-selection)',
brandFill: 'hsl(var(--brand-default))',
opacityScale: [0.18, 0.32, 0.5, 0.68, 0.86],
boundaryStroke: 'hsla(var(--brand-300), 0.6)',
boundaryStroke: 'hsl(var(--brand-300) / 0.6)',
boundaryStrokeHover: 'hsl(var(--brand-500))',
markerFill: 'hsl(var(--brand-default))',
oceanFill: 'transparent',
apps/studio/components/interfaces/Support/Success.tsx
+1 -1
View File
@@ -65,7 +65,7 @@ export const Success = ({
<Button
asChild
variant="default"
icon={<IconDiscord size={16} fill="hsl(var(--background-default))" />}
icon={<IconDiscord size={16} fill="var(--background-default)" />}
>
<Link href="https://discord.supabase.com/" target="_blank">
Join Discord
apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx
+2 -2
View File
@@ -69,7 +69,7 @@ import { useShortcut } from '@/state/shortcuts/useShortcut'
export const CHART_CONFIG = {
success: {
label: <TooltipLabel level="success" />,
color: 'hsl(var(--foreground-muted))',
color: 'var(--foreground-muted)',
},
warning: {
label: <TooltipLabel level="warning" />,
@@ -459,7 +459,7 @@ export const UnifiedLogs = () => {
className={cn(
'h-full [&>div]:h-full',
'[&_thead_th]:[border-top:none]! [&_thead_th]:[border-bottom:none]!',
'[&_thead_th]:[box-shadow:inset_0_-1px_0_hsl(var(--border-default))]!',
'[&_thead_th]:[box-shadow:inset_0_-1px_0_var(--border-default)]!',
'[&_thead_th]:text-foreground-lighter! [&_thead_tr:hover]:bg-surface-75',
'[&_thead_tr]:border-b-0! [&_tbody_tr]:border-b-0!'
)}
apps/studio/components/layouts/Navigation/NavigationBar/ProjectBranchSelectorSheetTabTrigger.tsx
+2 -2
View File
@@ -45,9 +45,9 @@ export function ProjectBranchSelectorSheetTabTrigger({
>
<path
d="M5.49365 31L0.493652 0V62L5.49365 31Z"
className="fill-[hsl(var(--background-dash-sidebar))] group-data-[state=active]:fill-[hsl(var(--background-surface-200))]"
className="fill-[var(--background-dash-sidebar)] group-data-[state=active]:fill-[var(--background-surface-200)]"
/>
<path d="M0.493652 0L5.49365 31L0.493652 62" stroke="hsl(var(--border-default))" />
<path d="M0.493652 0L5.49365 31L0.493652 62" stroke="var(--border-default)" />
</svg>
)}
</TabsTrigger_Shadcn_>
apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
+1 -1
View File
@@ -414,7 +414,7 @@ export const AIAssistant = ({ className }: AIAssistantProps) => {
},
]}
>
<div className={cn('flex flex-col h-full w-full md:h-full max-h-dvh', className)}>
<div className={cn('flex bg-card flex-col h-full w-full md:h-full max-h-dvh', className)}>
<AIAssistantHeader
isChatLoading={isChatLoading}
onNewChat={snap.newChat}
apps/studio/components/ui/AIAssistantPanel/AIAssistantHeader.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ export const AIAssistantHeader = ({
const [isOptInModalOpen, setIsOptInModalOpen] = useState(false)
return (
<div className="z-30 sticky top-0">
<div className="border-b border-b-muted flex items-center bg gap-x-4 pl-4 pr-3 min-h-(--header-height)">
<div className="border-b border-b-muted flex items-center bg-card gap-x-4 pl-4 pr-3 min-h-(--header-height)">
<div className="text-sm flex-1 flex items-center">
<AiIconAnimation size={20} allowHoverEffect={false} />
<span className="text-border-stronger dark:text-border-strong ml-3">
apps/studio/components/ui/Charts/Charts.constants.ts
+5 -5
View File
@@ -3,14 +3,14 @@
// For ChartHandler
export const CHART_COLORS = {
TICK: 'hsl(var(--background-overlay-hover))',
AXIS: 'hsl(var(--background-overlay-hover))',
GREEN_1: 'hsl(var(--brand-default))', // #3ECF8E
TICK: 'var(--background-overlay-hover)',
AXIS: 'var(--background-overlay-hover)',
GREEN_1: 'hsl(var(--brand-default))',
GREEN_2: 'hsl(var(--brand-500))',
RED_1: 'hsl(var(--destructive-default))',
RED_2: 'hsl(var(--destructive-500))',
REFERENCE_LINE: 'hsl(var(--foreground-muted))',
REFERENCE_LINE_TEXT: 'hsl(var(--foreground-muted))',
REFERENCE_LINE: 'var(--foreground-muted)',
REFERENCE_LINE_TEXT: 'var(--foreground-muted)',
}
const LIGHT_STACKED_CHART_COLORS = [
apps/studio/components/ui/EditorPanel/EditorPanel.tsx
+2 -2
View File
@@ -274,7 +274,7 @@ export const EditorPanel = () => {
}
return (
<div className="flex h-full flex-col bg-background">
<div className="flex h-full flex-col bg-card">
<div className="border-b border-b-muted flex items-center justify-between gap-x-4 pl-4 pr-3 h-(--header-height)">
{isEditingTitle ? (
<input
@@ -482,7 +482,7 @@ export const EditorPanel = () => {
</div>
<div className="flex-1 overflow-hidden flex flex-col h-full">
<div className="flex-1 min-h-0 relative [&_.monaco-editor]:!bg [&_.monaco-editor_.margin]:!bg [&_.monaco-editor_.monaco-editor-background]:!bg">
<div className="flex-1 min-h-0 relative [&_.monaco-editor]:!bg-card [&_.monaco-editor_.margin]:!bg-card [&_.monaco-editor_.monaco-editor-background]:!bg-card">
<AIEditor
autoFocus
language="pgsql"
apps/studio/components/ui/Panel.tsx
+3 -3
View File
@@ -103,9 +103,9 @@ const PanelNotice = forwardRef<
className="absolute inset-0 mt-[-5px]"
style={{
backgroundImage: `
linear-gradient(to right, hsl(var(--background-200)/1) 0%, hsl(var(--background-200)/1) 30%, hsl(var(--background-200)/0) 100%),
linear-gradient(to right, hsl(var(--border-default)/0.33) 1px, transparent 1px),
linear-gradient(to bottom, hsl(var(--border-default)/0.33) 1px, transparent 1px)
linear-gradient(to right, oklch(from var(--background-200) l c h / 1) 0%, oklch(from var(--background-200) l c h / 1) 30%, oklch(from var(--background-200) l c h / 0) 100%),
linear-gradient(to right, oklch(from var(--border-default) l c h / 0.33) 1px, transparent 1px),
linear-gradient(to bottom, oklch(from var(--border-default) l c h / 0.33) 1px, transparent 1px)
`,
backgroundSize: '100% 100%, 15px 15px, 15px 15px',
backgroundPosition: '0 0, 0 0, 0 0',
apps/studio/components/ui/PartnerIcon.tsx
+5 -2
View File
@@ -53,7 +53,10 @@ function getPartnerIcon(
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M37.5274 0L75.0548 65H0L37.5274 0Z" fill="hsl(var(--foreground-default) / 1)" />
<path
d="M37.5274 0L75.0548 65H0L37.5274 0Z"
fill="oklch(from var(--foreground-default) l c h / 1)"
/>
</svg>
)
case MANAGED_BY.AWS_MARKETPLACE:
@@ -68,7 +71,7 @@ function getPartnerIcon(
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="hsl(var(--foreground-default) / 1)" transform="scale(1.25)">
<g fill="oklch(from var(--foreground-default) l c h / 1)" transform="scale(1.25)">
<path d="M4.51 7.687c0 .197.02.357.058.475.042.117.096.245.17.384a.233.233 0 01.037.123c0 .053-.032.107-.1.16l-.336.224a.255.255 0 01-.138.048c-.054 0-.107-.026-.16-.074a1.652 1.652 0 01-.192-.251 4.137 4.137 0 01-.164-.315c-.416.491-.937.737-1.565.737-.447 0-.804-.129-1.064-.385-.261-.256-.394-.598-.394-1.025 0-.454.16-.822.484-1.1.325-.278.756-.416 1.304-.416.18 0 .367.016.564.042.197.027.4.07.612.118v-.39c0-.406-.085-.689-.25-.854-.17-.166-.458-.246-.868-.246-.186 0-.377.022-.574.07a4.23 4.23 0 00-.575.181 1.525 1.525 0 01-.186.07.326.326 0 01-.085.016c-.075 0-.112-.054-.112-.166v-.262c0-.085.01-.15.037-.186a.399.399 0 01.15-.113c.185-.096.409-.176.67-.24.26-.07.537-.101.83-.101.633 0 1.096.144 1.394.432.293.288.442.726.442 1.314v1.73h.01zm-2.161.811c.175 0 .356-.032.548-.096.192-.064.362-.182.505-.342a.848.848 0 00.181-.341c.032-.129.054-.283.054-.465V7.03a4.43 4.43 0 00-.49-.09 3.996 3.996 0 00-.5-.033c-.357 0-.617.07-.793.214-.176.144-.26.347-.26.614 0 .25.063.437.196.566.128.133.314.197.559.197zm4.273.577c-.096 0-.16-.016-.202-.054-.043-.032-.08-.106-.112-.208l-1.25-4.127a.938.938 0 01-.048-.214c0-.085.042-.133.127-.133h.522c.1 0 .17.016.207.053.043.032.075.107.107.208l.894 3.535.83-3.535c.026-.106.058-.176.101-.208a.365.365 0 01.213-.053h.426c.1 0 .17.016.212.053.043.032.08.107.102.208l.84 3.578.92-3.578a.459.459 0 01.107-.208.347.347 0 01.208-.053h.495c.085 0 .133.043.133.133 0 .027-.006.054-.01.086a.768.768 0 01-.038.133l-1.283 4.127c-.031.107-.069.177-.111.209a.34.34 0 01-.203.053h-.457c-.101 0-.17-.016-.213-.053-.043-.038-.08-.107-.101-.214L8.213 5.37l-.82 3.439c-.026.107-.058.176-.1.213-.043.038-.118.054-.213.054h-.458zm6.838.144a3.51 3.51 0 01-.82-.096c-.266-.064-.473-.134-.612-.214-.085-.048-.143-.101-.165-.15a.38.38 0 01-.031-.149v-.272c0-.112.042-.166.122-.166a.3.3 0 01.096.016c.032.011.08.032.133.054.18.08.378.144.585.187.213.042.42.064.633.064.336 0 .596-.059.777-.176a.575.575 0 00.277-.508.52.52 0 00-.144-.373c-.095-.102-.276-.193-.537-.278l-.772-.24c-.388-.123-.676-.305-.851-.545a1.275 1.275 0 01-.266-.774c0-.224.048-.422.143-.593.096-.17.224-.32.384-.438.16-.122.34-.213.553-.277.213-.064.436-.091.67-.091.118 0 .24.005.357.021.122.016.234.038.346.06.106.026.208.052.303.085.096.032.17.064.224.096a.461.461 0 01.16.133.289.289 0 01.047.176v.251c0 .112-.042.171-.122.171a.552.552 0 01-.202-.064 2.428 2.428 0 00-1.022-.208c-.303 0-.543.048-.708.15-.165.1-.25.256-.25.475 0 .149.053.277.16.379.106.101.303.202.585.293l.756.24c.383.123.66.294.825.513.165.219.244.47.244.748 0 .23-.047.437-.138.619a1.435 1.435 0 01-.388.47c-.165.133-.362.23-.591.299-.24.075-.49.112-.761.112z" />
<path
apps/studio/components/ui/QueryBlock/QueryBlock.tsx
+2 -2
View File
@@ -348,12 +348,12 @@ export const QueryBlock = ({
)
}
/>
<Bar radius={1} dataKey={yKey} fill="hsl(var(--chart-1))">
<Bar radius={1} dataKey={yKey} fill="var(--chart-1)">
{chartData?.map((_: any, index: number) => (
<Cell
key={`cell-${index}`}
className="transition-all duration-100"
fill="hsl(var(--chart-1))"
fill="var(--chart-1)"
opacity={focusDataIndex === undefined || focusDataIndex === index ? 1 : 0.4}
enableBackground={12}
/>
apps/studio/styles/globals.css
+33 -33
View File
@@ -14,36 +14,36 @@
@theme {
--text-grid: 13px;
--color-typography-body-light: hsl(var(--foreground-light));
--color-typography-body-dark: hsl(var(--foreground-light));
--color-typography-body-secondary-light: hsl(var(--foreground-lighter));
--color-typography-body-secondary-dark: hsl(var(--foreground-lighter));
--color-typography-body-strong-light: hsl(var(--foreground-default));
--color-typography-body-strong-dark: hsl(var(--foreground-default));
--color-typography-body-faded-light: hsl(var(--foreground-muted));
--color-typography-body-faded-dark: hsl(var(--foreground-muted));
--color-typography-body-light: var(--foreground-light);
--color-typography-body-dark: var(--foreground-light);
--color-typography-body-secondary-light: var(--foreground-lighter);
--color-typography-body-secondary-dark: var(--foreground-lighter);
--color-typography-body-strong-light: var(--foreground-default);
--color-typography-body-strong-dark: var(--foreground-default);
--color-typography-body-faded-light: var(--foreground-muted);
--color-typography-body-faded-dark: var(--foreground-muted);
--color-table-body-light: hsl(var(--background-default));
--color-table-body-dark: hsl(var(--background-default));
--color-table-header-light: hsl(var(--background-surface-100));
--color-table-header-dark: hsl(var(--background-surface-100));
--color-table-footer-light: hsl(var(--background-surface-100));
--color-table-footer-dark: hsl(var(--background-surface-100));
--color-table-border-light: hsl(var(--border-default));
--color-table-border-dark: hsl(var(--border-default));
--color-table-body-light: var(--background-default);
--color-table-body-dark: var(--background-default);
--color-table-header-light: var(--background-surface-100);
--color-table-header-dark: var(--background-surface-100);
--color-table-footer-light: var(--background-surface-100);
--color-table-footer-dark: var(--background-surface-100);
--color-table-border-light: var(--border-default);
--color-table-border-dark: var(--border-default);
--color-panel-body-light: hsl(var(--background-surface-100));
--color-panel-body-dark: hsl(var(--background-surface-100));
--color-panel-header-light: hsl(var(--background-surface-100));
--color-panel-header-dark: hsl(var(--background-surface-100));
--color-panel-footer-light: hsl(var(--background-surface-100));
--color-panel-footer-dark: hsl(var(--background-surface-100));
--color-panel-border-light: hsl(var(--border-default));
--color-panel-border-dark: hsl(var(--border-default));
--color-panel-border-interior-light: hsl(var(--border-muted));
--color-panel-border-interior-dark: hsl(var(--border-muted));
--color-panel-border-hover-light: hsl(var(--border-muted));
--color-panel-border-hover-dark: hsl(var(--border-muted));
--color-panel-body-light: var(--background-surface-100);
--color-panel-body-dark: var(--background-surface-100);
--color-panel-header-light: var(--background-surface-100);
--color-panel-header-dark: var(--background-surface-100);
--color-panel-footer-light: var(--background-surface-100);
--color-panel-footer-dark: var(--background-surface-100);
--color-panel-border-light: var(--border-default);
--color-panel-border-dark: var(--border-default);
--color-panel-border-interior-light: var(--border-muted);
--color-panel-border-interior-dark: var(--border-muted);
--color-panel-border-hover-light: var(--border-muted);
--color-panel-border-hover-dark: var(--border-muted);
--animate-shimmer: shimmer 2s infinite linear;
--animate-badge-shimmer: badge-shimmer 3s ease-in-out infinite;
@@ -149,11 +149,11 @@
--sidebar-background: var(--background-dash-sidebar);
--sidebar-foreground: var(--foreground-default);
--sidebar-primary: var(--foreground-default);
--sidebar-primary-foreground: var(--warning-default);
--sidebar-primary-foreground: hsl(var(--warning-default));
--sidebar-accent: var(--background-selection);
--sidebar-accent-foreground: var(--foreground-default);
--sidebar-border: var(--border-default);
--sidebar-ring: 217.2 91.2% 59.8%;
--sidebar-ring: var(--ring);
--header-height: 3rem;
}
@@ -170,11 +170,11 @@
--sidebar-background: var(--background-dash-sidebar);
--sidebar-foreground: var(--foreground-default);
--sidebar-primary: var(--foreground-default);
--sidebar-primary-foreground: var(--warning-default);
--sidebar-primary-foreground: hsl(var(--warning-default));
--sidebar-accent: var(--background-selection);
--sidebar-accent-foreground: var(--foreground-default);
--sidebar-border: var(--border-default);
--sidebar-ring: 217.2 91.2% 59.8%;
--sidebar-ring: var(--ring);
}
@layer base {
@@ -183,7 +183,7 @@
::before,
::backdrop,
::file-selector-button {
border-color: hsl(var(--border-default, currentColor));
border-color: var(--border-default, currentColor);
}
}
apps/studio/styles/monaco.css
+6 -6
View File
@@ -7,8 +7,8 @@
.monaco-editor-alt.monaco-editor-alt,
.monaco-editor-alt > .monaco-editor {
--vscode-editor-background: hsl(var(--background-surface-300)) !important;
--vscode-editorGutter-background: hsl(var(--background-surface-300)) !important;
--vscode-editor-background: var(--background-surface-300) !important;
--vscode-editorGutter-background: var(--background-surface-300) !important;
}
.monaco-editor-alt .current-line {
@@ -17,14 +17,14 @@
[data-theme='dark'] .monaco-editor,
[data-theme='dark'] .monaco-diff-editor {
--vscode-editor-background: hsl(var(--background-surface-100)) !important;
--vscode-editorGutter-background: hsl(var(--background-surface-100)) !important;
--vscode-editor-background: var(--background-surface-100) !important;
--vscode-editorGutter-background: var(--background-surface-100) !important;
color-scheme: dark;
}
.monaco-editor,
.monaco-diff-editor {
--vscode-editor-background: hsl(var(--background-dash-sidebar)) !important;
--vscode-editorGutter-background: hsl(var(--background-dash-sidebar)) !important;
--vscode-editor-background: var(--background-dash-sidebar) !important;
--vscode-editorGutter-background: var(--background-dash-sidebar) !important;
outline: none !important;
}
apps/studio/styles/react-data-grid-logs.css
+5 -5
View File
@@ -85,7 +85,7 @@
.syntax-highlight {
counter-reset: line-numbering;
font-family: Menlo, Monaco, monospace;
color: hsl(var(--foreground-lighter));
color: var(--foreground-lighter);
word-break: break-word;
}
@@ -94,7 +94,7 @@
counter-increment: line-numbering;
padding-right: 0px;
display: inline-block;
color: hsl(var(--border-stronger));
color: var(--border-stronger);
/* space after numbers */
width: 2rem;
text-align: left;
@@ -104,11 +104,11 @@
animation: shimmer 1.5s infinite linear;
background: linear-gradient(
to right,
hsl(var(--background-default)) 0%,
var(--background-default) 0%,
hsl(var(--brand-default)) 25%,
hsl(var(--brand-300)) 35%,
hsl(var(--background-default)) 45%,
hsl(var(--background-surface-100)) 75%
var(--background-default) 45%,
var(--background-surface-100) 75%
);
background-size: 3000px 100%;
}
apps/studio/styles/ui.css
+11 -11
View File
@@ -190,8 +190,8 @@
&--inner-wrapper {
background: linear-gradient(
90deg,
hsl(var(--background-alternative-default)) 50%,
hsl(var(--background-surface-100)) 50%
var(--background-alternative-default) 50%,
var(--background-surface-100) 50%
);
width: 100%;
}
@@ -199,8 +199,8 @@
.dark &--inner-wrapper {
background: linear-gradient(
90deg,
hsl(var(--background-surface-100)) 50%,
hsl(var(--background-default)) 50%
var(--background-surface-100) 50%,
var(--background-default) 50%
);
}
@@ -364,37 +364,37 @@
.thin-scrollbars {
scrollbar-width: thin;
scrollbar-color: hsl(var(--foreground-muted)) hsl(var(--background-alternative-default));
scrollbar-color: var(--foreground-muted) var(--background-alternative-default);
.dark & {
scrollbar-color: hsl(var(--foreground-lighter)) hsl(var(--background-surface-100));
scrollbar-color: var(--foreground-lighter) var(--background-surface-100);
}
::-webkit-scrollbar {
background: hsl(var(--background-default));
background: var(--background-default);
height: 3px;
width: 0px;
border-radius: 0;
.dark & {
background: hsl(var(--border-control));
background: var(--border-control);
}
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px hsl(var(--border-control));
-webkit-box-shadow: inset 0 0 6px var(--border-control);
-webkit-border-radius: 5px;
border-radius: 5px;
.dark & {
-webkit-box-shadow: inset 0 0 6px hsl(var(--border-stronger));
-webkit-box-shadow: inset 0 0 6px var(--border-stronger);
}
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
border-radius: 5px;
background: hsl(var(--foreground-muted));
background: var(--foreground-muted);
.dark & {
-webkit-box-shadow: inset 0 0 6px var(--color-slate-1200);
apps/ui-library/app/example/password-based-auth/layout.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
className="flex w-full h-full items-center justify-center p-6 md:p-10 preview bg-surface-100"
style={{ minHeight: '100%' }}
>
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(hsla(var(--foreground-default)/0.05)_1px,transparent_1px)] bg-size-[16px_16px] mask-[radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(oklch(from_var(--foreground-default)_l_c_h_/_0.05)_1px,transparent_1px)] bg-size-[16px_16px] mask-[radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
<div className="w-full max-w-sm">{children}</div>
</div>
</Providers>
apps/ui-library/app/example/social-auth/layout.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
className="flex w-full h-full items-center justify-center p-6 md:p-10 preview bg-surface-100"
style={{ minHeight: '100%' }}
>
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(hsla(var(--foreground-default)/0.05)_1px,transparent_1px)] bg-size-[16px_16px] mask-[radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(oklch(from_var(--foreground-default)_l_c_h_/_0.05)_1px,transparent_1px)] bg-size-[16px_16px] mask-[radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
<div className="w-full max-w-sm">{children}</div>
</div>
</Providers>
apps/ui-library/components/component-preview.tsx
+2 -2
View File
@@ -89,10 +89,10 @@ export function ComponentPreview({
)}
>
{showGrid && (
<div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,hsla(var(--foreground-default)/0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-size-[24px_24px]"></div>
<div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,oklch(from_var(--foreground-default)_l_c_h_/_0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-size-[24px_24px]"></div>
)}
{showDottedGrid && (
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(hsla(var(--foreground-default)/0.02)_1px,transparent_1px)] bg-size-[16px_16px] mask-[radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(oklch(from_var(--foreground-default)_l_c_h_/_0.02)_1px,transparent_1px)] bg-size-[16px_16px] mask-[radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
)}
<div className="z-10 relative">{ComponentPreview}</div>
</div>
apps/ui-library/registry/default/examples/realtime-flow-demo.tsx
+5 -3
View File
@@ -11,7 +11,9 @@ import {
type Node,
type NodeProps,
} from '@xyflow/react'
import '@xyflow/react/dist/style.css'
import { memo, useMemo, useRef } from 'react'
import { RealtimeFlowOverlay } from '../blocks/realtime-flow/components/realtime-flow-overlay'
@@ -21,9 +23,9 @@ import { Button } from '../components/ui/button'
const NODE_Y_BASE = 80
const NODE_X_BASE = 80
const FLOW_NODE_STYLE = {
backgroundColor: 'hsl(var(--card))',
borderColor: 'hsl(var(--border))',
color: 'hsl(var(--card-foreground))',
backgroundColor: 'var(--card)',
borderColor: 'var(--border)',
color: 'var(--card-foreground)',
}
type EditableNodeData = {
apps/ui-library/styles/code-block-variables.css
+5 -5
View File
@@ -18,16 +18,16 @@
[data-theme='light'],
.light {
--code-token-keyword: #6b35dc;
--code-foreground: hsl(var(--foreground-light) / 1);
--code-foreground: oklch(from var(--foreground-light) l c h / 1);
--code-token-constant: #15593b;
--code-token-string: #f1a10d;
--code-token-comment: #7e7e7e;
--code-token-parameter: hsl(var(--foreground-light) / 1);
--code-token-parameter: oklch(from var(--foreground-light) l c h / 1);
--code-token-function: #15593b;
--code-token-string-expression: #f1a10d;
--code-token-punctuation: hsl(var(--foreground-light) / 1);
--code-token-link: hsl(var(--foreground-light) / 1);
--code-token-number: hsl(var(--foreground-light) / 1);
--code-token-punctuation: oklch(from var(--foreground-light) l c h / 1);
--code-token-link: oklch(from var(--foreground-light) l c h / 1);
--code-token-number: oklch(from var(--foreground-light) l c h / 1);
--code-token-property: #15593b;
--code-highlight-color: #1c1c1c;
}
apps/ui-library/styles/globals.css
+73 -73
View File
@@ -18,25 +18,25 @@
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
/* --color-background: hsl(var(--background)); */
--color-foreground: hsl(var(--foreground));
--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));
--color-popover: hsl(var(--popover));
--color-popover-foreground: hsl(var(--popover-foreground));
--color-primary: hsl(var(--primary));
--color-primary-foreground: hsl(var(--primary-foreground));
--color-secondary: hsl(var(--secondary));
--color-secondary-foreground: hsl(var(--secondary-foreground));
--color-muted: hsl(var(--muted));
--color-muted-foreground: hsl(var(--muted-foreground));
--color-accent: hsl(var(--accent));
--color-accent-foreground: hsl(var(--accent-foreground));
--color-destructive: hsl(var(--destructive));
--color-destructive-foreground: hsl(var(--destructive-foreground));
/* --color-border: hsl(var(--border)); */
--color-input: hsl(var(--input));
--color-ring: hsl(var(--ring));
/* --color-background: var(--background); */
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
/* --color-border: var(--border); */
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: hsl(var(--chart-1));
--color-chart-2: hsl(var(--chart-2));
--color-chart-3: hsl(var(--chart-3));
@@ -46,75 +46,75 @@
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 14.5%;
--card: 0 0% 100%;
--card-foreground: 0 0% 14.5%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 14.5%;
--primary: 0 0% 20.5%;
--primary-foreground: 0 0% 98.5%;
--secondary: 0 0% 97%;
--secondary-foreground: 0 0% 20.5%;
--muted: 0 0% 97%;
--muted-foreground: 0 0% 55.6%;
--accent: 0 0% 97%;
--accent-foreground: 0 0% 20.5%;
--destructive: 27.3 24.5% 57.7%;
--destructive-foreground: 27.3 24.5% 57.7%;
--border: 0 0% 92.2%;
--input: 0 0% 92.2%;
--ring: 0 0% 70.8%;
--background: hsl(0 0% 100%);
--foreground: hsl(0 0% 14.5%);
--card: hsl(0 0% 100%);
--card-foreground: hsl(0 0% 14.5%);
--popover: hsl(0 0% 100%);
--popover-foreground: hsl(0 0% 14.5%);
--primary: hsl(0 0% 20.5%);
--primary-foreground: hsl(0 0% 98.5%);
--secondary: hsl(0 0% 97%);
--secondary-foreground: hsl(0 0% 20.5%);
--muted: hsl(0 0% 97%);
--muted-foreground: hsl(0 0% 55.6%);
--accent: hsl(0 0% 97%);
--accent-foreground: hsl(0 0% 20.5%);
--destructive: hsl(27.3 24.5% 57.7%);
--destructive-foreground: hsl(27.3 24.5% 57.7%);
--border: hsl(0 0% 92.2%);
--input: hsl(0 0% 92.2%);
--ring: hsl(0 0% 70.8%);
--chart-1: 41.1 22.2% 64.6%;
--chart-2: 184.7 11.8% 60%;
--chart-3: 227.4 7% 39.8%;
--chart-4: 84.4 18.9% 82.8%;
--chart-5: 70.1 18.8% 76.9%;
--radius: 0.625rem;
--sidebar: 0 0% 98.5%;
--sidebar-foreground: 0 0% 14.5%;
--sidebar-primary: 0 0% 20.5%;
--sidebar-primary-foreground: 0 0% 98.5%;
--sidebar-accent: 0 0% 97%;
--sidebar-accent-foreground: 0 0% 20.5%;
--sidebar-border: 0 0% 92.2%;
--sidebar-ring: 0 0% 70.8%;
--sidebar: hsl(0 0% 98.5%);
--sidebar-foreground: hsl(0 0% 14.5%);
--sidebar-primary: hsl(0 0% 20.5%);
--sidebar-primary-foreground: hsl(0 0% 98.5%);
--sidebar-accent: hsl(0 0% 97%);
--sidebar-accent-foreground: hsl(0 0% 20.5%);
--sidebar-border: hsl(0 0% 92.2%);
--sidebar-ring: hsl(0 0% 70.8%);
}
[data-theme='dark'],
[data-theme='classic-dark'] {
--background: 0 0% 14.5%;
--foreground: 0 0% 98.5%;
--card: 0 0% 0%;
--card-foreground: 0 0% 98.5%;
--popover: 0 0% 14.5%;
--popover-foreground: 0 0% 98.5%;
--primary: 0 0% 98.5%;
--primary-foreground: 0 0% 20.5%;
--secondary: 0 0% 26.9%;
--secondary-foreground: 0 0% 98.5%;
--muted: 0 0% 26.9%;
--muted-foreground: 0 0% 70.8%;
--accent: 0 0% 26.9%;
--accent-foreground: 0 0% 98.5%;
--destructive: 25.7 14.1% 39.6%;
--destructive-foreground: 25.3 23.7% 63.7%;
--border: 0 0% 26.9%;
--input: 0 0% 26.9%;
--ring: 0 0% 55.6%;
--background: hsl(0 0% 14.5%);
--foreground: hsl(0 0% 98.5%);
--card: hsl(0 0% 0%);
--card-foreground: hsl(0 0% 98.5%);
--popover: hsl(0 0% 14.5%);
--popover-foreground: hsl(0 0% 98.5%);
--primary: hsl(0 0% 98.5%);
--primary-foreground: hsl(0 0% 20.5%);
--secondary: hsl(0 0% 26.9%);
--secondary-foreground: hsl(0 0% 98.5%);
--muted: hsl(0 0% 26.9%);
--muted-foreground: hsl(0 0% 70.8%);
--accent: hsl(0 0% 26.9%);
--accent-foreground: hsl(0 0% 98.5%);
--destructive: hsl(25.7 14.1% 39.6%);
--destructive-foreground: hsl(25.3 23.7% 63.7%);
--border: hsl(0 0% 26.9%);
--input: hsl(0 0% 26.9%);
--ring: hsl(0 0% 55.6%);
--chart-1: 264.4 24.3% 48.8%;
--chart-2: 162.5 17% 69.6%;
--chart-3: 70.1 18.8% 76.9%;
--chart-4: 303.9 26.5% 62.7%;
--chart-5: 16.4 24.6% 64.5%;
--sidebar: 0 0% 20.5%;
--sidebar-foreground: 0 0% 98.5%;
--sidebar-primary: 264.4 24.3% 48.8%;
--sidebar-primary-foreground: 0 0% 98.5%;
--sidebar-accent: 0 0% 26.9%;
--sidebar-accent-foreground: 0 0% 98.5%;
--sidebar-border: 0 0% 26.9%;
--sidebar-ring: 0 0% 43.9%;
--sidebar: hsl(0 0% 20.5%);
--sidebar-foreground: hsl(0 0% 98.5%);
--sidebar-primary: hsl(264.4 24.3% 48.8%);
--sidebar-primary-foreground: hsl(0 0% 98.5%);
--sidebar-accent: hsl(0 0% 26.9%);
--sidebar-accent-foreground: hsl(0 0% 98.5%);
--sidebar-border: hsl(0 0% 26.9%);
--sidebar-ring: hsl(0 0% 43.9%);
}
}
apps/www/_blog/2025-12-17-building-chatgpt-apps-with-supabase.mdx
+2 -2
View File
@@ -105,7 +105,7 @@ Open `index.ts` and set up your MCP server:
```tsx
//index.ts
import { MCPServer, object, text, widget, error } from 'mcp-use/server'
import { error, MCPServer, object, text, widget } from 'mcp-use/server'
const server = new MCPServer({
name: 'supabase-explorer',
@@ -197,7 +197,7 @@ const SupabaseStatusWidget: React.FC = () => {
<h2 className="text-3xl font-bold text-[hsl(var(--foreground))] mb-1">
Supabase Status
</h2>
<p className="text-sm text-[hsl(var(--foreground-muted))]">
<p className="text-sm text-foreground-muted">
Last {props.daysBack} days
</p>
</div>
apps/www/app/(home)/_components/OpenSourceSection.tsx
+1 -1
View File
@@ -63,7 +63,7 @@ const TEXT_OFFSET_X = Math.floor((COLS - TEXT_W) / 2)
const TEXT_OFFSET_Y = Math.floor((ROWS - TEXT_H) / 2)
const LEVELS_BG = [
'hsl(var(--background-surface-300) / 0.2)',
'color-mix(in oklch, var(--foreground) 5%, var(--background))',
'hsl(var(--brand-400) / 0.08)',
'hsl(var(--brand-500) / 0.1)',
'hsl(var(--brand-600) / 0.12)',
apps/www/app/state-of-startups/components/StateOfStartupsAuroraHeader.tsx
+3 -3
View File
@@ -12,7 +12,7 @@ export function StateOfStartupsAuroraHeader() {
return (
<header
className="relative w-full overflow-hidden min-h-[26rem] md:min-h-[50vh]"
style={{ background: 'hsl(var(--background-alternative-default))' }}
style={{ background: 'var(--background-alternative-default)' }}
>
{/* Aurora shader scene — hidden when user prefers reduced motion */}
{!prefersReducedMotion && (
@@ -35,7 +35,7 @@ export function StateOfStartupsAuroraHeader() {
className="absolute inset-0 pointer-events-none transition-opacity [transition-duration:1200ms]"
style={{
opacity: shaderLoaded ? 0 : 1,
background: 'hsl(var(--background-alternative-default))',
background: 'var(--background-alternative-default)',
}}
/>
@@ -44,7 +44,7 @@ export function StateOfStartupsAuroraHeader() {
className="absolute inset-0 pointer-events-none"
style={{
background:
'linear-gradient(to top, hsl(var(--background-alternative-default)) 0%, hsl(var(--background-alternative-default) / 0.9) 15%, transparent 90%)',
'linear-gradient(to top, var(--background-alternative-default) 0%, oklch(from var(--background-alternative-default) l c h / 0.9) 15%, transparent 90%)',
}}
/>
apps/www/app/state-of-startups/components/StateOfStartupsHeader.tsx
+2 -2
View File
@@ -12,8 +12,8 @@ const DiagonalStripes = () => (
style={{
backgroundImage: `repeating-linear-gradient(
45deg,
hsl(var(--border-muted)) 0px,
hsl(var(--border-muted)) 1px,
var(--border-muted) 0px,
var(--border-muted) 1px,
transparent 1px,
transparent 8px
)`,
apps/www/app/state-of-startups/components/SurveyChartShell.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import type { ReactNode } from 'react'
const CHART_GRADIENT =
'radial-gradient(circle at center -150%, hsl(var(--brand-300)), transparent 80%), radial-gradient(ellipse at center 230%, hsl(var(--background-surface-200)), transparent 75%)'
'radial-gradient(circle at center -150%, hsl(var(--brand-300)), transparent 80%), radial-gradient(ellipse at center 230%, var(--background-surface-200), transparent 75%)'
/** Shared frame for every survey chart: gradient container + Q&A/eyebrow header.
* When `isEmpty` is set (no data for the active year), renders the
apps/www/app/state-of-startups/register/RegisterContent.tsx
+4 -4
View File
@@ -25,12 +25,12 @@ export function RegisterContent() {
return (
<main
className="relative w-full overflow-hidden flex flex-col"
style={{ background: 'hsl(var(--background-alternative-default))' }}
style={{ background: 'var(--background-alternative-default)' }}
>
<div>
<header
className="relative w-full overflow-hidden"
style={{ minHeight: '60vh', background: 'hsl(var(--background-alternative-default))' }}
style={{ minHeight: '60vh', background: 'var(--background-alternative-default)' }}
>
{/* Aurora shader scene — hidden when user prefers reduced motion */}
{!prefersReducedMotion && (
@@ -53,7 +53,7 @@ export function RegisterContent() {
className="absolute inset-0 pointer-events-none transition-opacity [transition-duration:1200ms]"
style={{
opacity: shaderLoaded ? 0 : 1,
background: 'hsl(var(--background-alternative-default))',
background: 'var(--background-alternative-default)',
}}
/>
@@ -62,7 +62,7 @@ export function RegisterContent() {
className="absolute inset-0 pointer-events-none"
style={{
background:
'linear-gradient(to top, hsl(var(--background-alternative-default)) 0%, hsl(var(--background-alternative-default) / 0.9) 15%, transparent 90%)',
'linear-gradient(to top, var(--background-alternative-default) 0%, oklch(from var(--background-alternative-default) l c h / 0.9) 15%, transparent 90%)',
}}
/>
apps/www/components/Charts/DeveloperGrowthChart.tsx
+3 -3
View File
@@ -102,14 +102,14 @@ const DeveloperGrowthChart = () => {
</defs>
<XAxis
dataKey="month"
tick={{ fontSize: 12, fill: 'hsl(var(--foreground-lighter))' }}
tick={{ fontSize: 12, fill: 'var(--foreground-lighter)' }}
tickLine={false}
axisLine={{ stroke: 'hsl(var(--border-default))' }}
axisLine={{ stroke: 'var(--border-default)' }}
tickFormatter={(value) => value.substring(0, 4)}
ticks={data.filter((d, i) => isYearBoundary(d.month, i)).map((d) => d.month)}
/>
<YAxis
tick={{ fontSize: 12, fill: 'hsl(var(--foreground-lighter))' }}
tick={{ fontSize: 12, fill: 'var(--foreground-lighter)' }}
tickLine={false}
axisLine={false}
tickFormatter={formatYAxis}
apps/www/components/Charts/PGCharts.tsx
+8 -8
View File
@@ -43,7 +43,7 @@ const CustomizedAxisTick = (props: any) => {
y={-12}
dy={16}
textAnchor="end"
fill="hsl(var(--foreground-lighter))"
fill="var(--foreground-lighter)"
transform="rotate(-35)"
className="text-xs"
>
@@ -72,14 +72,14 @@ const Chart = () => {
@ts-ignore */}
<BarChart data={data[selection]} layout="vertical">
<XAxis
axisLine={{ stroke: 'hsl(var(--border-default))' }}
tickLine={{ stroke: 'hsl(var(--border-default))' }}
axisLine={{ stroke: 'var(--border-default)' }}
tickLine={{ stroke: 'var(--border-default)' }}
type="number"
tickMargin={8}
style={{
fontSize: '14px',
marginBottom: '32px',
color: 'hsl(var(--foreground-default))',
color: 'var(--foreground-default)',
}}
tick={<CustomizedAxisTick />}
label={{
@@ -91,7 +91,7 @@ const Chart = () => {
: 'Number of results',
position: 'insideBottom',
offset: -32,
fill: 'hsl(var(--foreground-default))',
fill: 'var(--foreground-default)',
}}
/>
<YAxis
@@ -100,12 +100,12 @@ const Chart = () => {
style={{
fontSize: '14px',
marginBottom: '32px',
color: 'hsl(var(--foreground-lighter))',
color: 'var(--foreground-lighter)',
}}
minTickGap={16}
tickMargin={8}
axisLine={{ stroke: 'hsl(var(--border-default))' }}
tickLine={{ stroke: 'hsl(var(--border-default))' }}
axisLine={{ stroke: 'var(--border-default)' }}
tickLine={{ stroke: 'var(--border-default)' }}
tick={<CustomizedAxisTick />}
/>
{dimensions.map((dimension: string, index: number) => {
apps/www/components/ExampleCard.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ function ExampleCard(props: any) {
fillRule="evenodd"
clipRule="evenodd"
d={framework.icon}
fill="hsl(var(--foreground-lighter))"
fill="var(--foreground-lighter)"
/>
</svg>
</div>
apps/www/components/Go/TweetsSection.tsx
+1 -1
View File
@@ -68,7 +68,7 @@ function DesktopMarquee() {
</div>
))}
</div>
<div className="absolute pointer-events-none w-full h-full inset-0 top-auto lg:bg-[radial-gradient(50%_100%_at_50%_0,transparent_0%,transparent_50%,hsl(var(--background-default))_100%)]" />
<div className="absolute pointer-events-none w-full h-full inset-0 top-auto lg:bg-[radial-gradient(50%_100%_at_50%_0,transparent_0%,transparent_50%,var(--background-default)_100%)]" />
</div>
)
}
apps/www/components/LaunchWeek/11/LaunchWeekPrizeCard.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import Panel from '~/components/Panel'
import { useTheme } from 'next-themes'
import React from 'react'
import { cn } from 'ui'
import Panel from '~/components/Panel'
export default function LaunchWeekPrizeCard({
content,
@@ -23,9 +23,9 @@ export default function LaunchWeekPrizeCard({
contentClassName
)}
shimmerToColor={
resolvedTheme?.includes('dark') ? 'hsl(var(--background-alternative-default))' : undefined
resolvedTheme?.includes('dark') ? 'var(--background-alternative-default)' : undefined
}
shimmerFromColor={resolvedTheme?.includes('dark') ? 'hsl(var(--border-default))' : undefined}
shimmerFromColor={resolvedTheme?.includes('dark') ? 'var(--border-default)' : undefined}
>
{content}
</Panel>
apps/www/components/LaunchWeek/11/Releases/BuildStage.tsx
+4 -4
View File
@@ -1,11 +1,11 @@
import React, { FC } from 'react'
import { buildDays as days } from '~/components/LaunchWeek/11/Releases/data'
import SectionContainer from '~/components/Layouts/SectionContainer'
import AdventCard from './components/AdventCard'
import { motion, useInView } from 'framer-motion'
import React, { FC } from 'react'
import { cn } from 'ui'
import AdventCard from './components/AdventCard'
const BuildStage: FC = () => {
const ref = React.useRef(null)
const isInView = useInView(ref, { margin: '-25%', once: true })
@@ -58,7 +58,7 @@ const BuildStage: FC = () => {
fillRule="evenodd"
clipRule="evenodd"
d="M3.9999 7.55557V5.95557C3.9999 3.74643 5.79076 1.95557 7.9999 1.95557C10.209 1.95557 11.9999 3.74643 11.9999 5.95557V7.55557C12.8836 7.55557 13.5999 8.27191 13.5999 9.15557V13.1556C13.5999 14.0392 12.8836 14.7556 11.9999 14.7556H3.9999C3.11625 14.7556 2.3999 14.0392 2.3999 13.1556V9.15557C2.3999 8.27191 3.11625 7.55557 3.9999 7.55557ZM10.3999 5.95557V7.55557H5.5999V5.95557C5.5999 4.63008 6.67442 3.55557 7.9999 3.55557C9.32539 3.55557 10.3999 4.63008 10.3999 5.95557Z"
fill="hsl(var(--foreground-lighter))"
fill="var(--foreground-lighter)"
/>
</g>
</svg>
apps/www/components/LaunchWeek/11/Releases/data/lw11_build_stage.tsx
+6 -6
View File
@@ -46,11 +46,11 @@ export const days: AdventDay[] = [
fillRule="evenodd"
clipRule="evenodd"
d="M3.43881 3.75378C4.10721 1.93324 5.84055 0.723145 7.77992 0.723145H15.6033V0.734736H17.0394C23.8756 0.734736 29.4173 6.27652 29.4173 13.1127V20.1749C29.4173 20.7272 28.9696 21.1749 28.4173 21.1749C27.8651 21.1749 27.4173 20.7272 27.4173 20.1749V13.1127C27.4173 7.38109 22.771 2.73474 17.0394 2.73474H15.4396C15.3877 2.73474 15.3366 2.73078 15.2868 2.72314H7.77992C6.6793 2.72314 5.6956 3.40989 5.31627 4.44308L2.7812 11.3479C2.37375 12.4577 2.69516 13.7038 3.58855 14.4781L5.32807 15.9856C6.12772 16.6786 6.58711 17.6847 6.58709 18.7428L6.58706 21.5134C6.58702 23.8192 8.45627 25.6885 10.7621 25.6885C11.4007 25.6885 11.9184 25.1708 11.9184 24.5322L11.9185 12.1874C11.9185 9.59233 12.955 7.10481 14.7977 5.27761C15.1899 4.88873 15.823 4.8914 16.2119 5.28357C16.6008 5.67574 16.5981 6.3089 16.2059 6.69777C14.742 8.14943 13.9185 10.1257 13.9185 12.1874L13.9184 24.5323C13.9184 26.2754 12.5053 27.6885 10.7621 27.6885C7.35169 27.6885 4.58701 24.9238 4.58706 21.5134L4.58709 18.7428C4.5871 18.2647 4.37953 17.8101 4.01822 17.497L2.27871 15.9894C0.757203 14.6708 0.209829 12.5486 0.90374 10.6586L3.43881 3.75378ZM16.539 18.5225C17.0348 18.2791 17.634 18.4838 17.8773 18.9796C19.1969 21.6686 21.9313 23.3727 24.9267 23.3726L32.8043 23.3726C33.3566 23.3725 33.8043 23.8203 33.8043 24.3725C33.8044 24.9248 33.3566 25.3725 32.8044 25.3726L29.4081 25.3726C29.4142 25.4172 29.4173 25.4628 29.4173 25.5091C29.4173 29.0627 26.1868 31.4165 22.6091 31.4165C19.2966 31.4165 16.5385 29.0518 15.9271 25.9188C15.8213 25.3767 16.175 24.8516 16.717 24.7458C17.2591 24.64 17.7843 24.9936 17.89 25.5357C18.3217 27.7475 20.2716 29.4165 22.6091 29.4165C25.447 29.4165 27.4173 27.6256 27.4173 25.5091C27.4173 25.4628 27.4205 25.4172 27.4266 25.3726L24.9267 25.3726C21.1684 25.3727 17.7375 23.2346 16.0818 19.8607C15.8385 19.3649 16.0432 18.7658 16.539 18.5225Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
d="M21.7224 13.0006C21.7224 13.6338 22.2358 14.1472 22.869 14.1472C23.5022 14.1472 24.0156 13.6338 24.0156 13.0006C24.0156 12.3674 23.5022 11.854 22.869 11.854C22.2358 11.854 21.7224 12.3674 21.7224 13.0006Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
</svg>
),
@@ -105,19 +105,19 @@ export const days: AdventDay[] = [
>
<path
d="M32.3419 16.1687C26.9198 19.0762 22.2245 19.1919 20.5547 18.8863C24.0908 22.894 28.1618 23.1755 29.7552 22.8152C37.4684 22.442 40.855 13.0158 48.2546 13.2545C46.6043 11.4734 44.4237 11.05 43.5397 11.0609C39.6868 10.8581 35.3857 14.269 32.3419 16.1687Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
d="M12.6959 13.353C17.8299 18.0154 25.4872 16.6927 28.6741 15.4485C25.7928 15.1342 22.0602 11.6504 20.554 9.94776C15.0031 4.03282 7.47323 1.59481 0.253906 6.21518C4.37942 6.80454 6.27846 7.52486 12.6959 13.353Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
d="M24.5485 2.22059C21.6148 -0.555946 15.8172 0.496169 13.2852 1.36929C17.4762 1.36929 22.8022 7.61206 24.9414 10.7334C27.6059 14.037 30.8974 13.9871 32.2101 13.5493C31.1624 12.8158 29.7217 10.1441 29.1324 8.89988C27.194 5.18037 25.2688 2.89722 24.5485 2.22059Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
d="M31.1956 7.73838C30.7536 5.49555 28.9582 3.13734 27.8886 1.82766C30.4359 1.82766 35.7101 3.85375 34.6335 7.26286C34.162 9.88223 34.0878 12.196 34.1096 13.0255C32.3809 11.7158 31.4532 9.04546 31.1956 7.73838Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
</svg>
),
apps/www/components/LaunchWeek/12/LaunchWeekPrizeCard.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import Panel from '~/components/Panel'
import { useTheme } from 'next-themes'
import React from 'react'
import { cn } from 'ui'
import Panel from '~/components/Panel'
export default function LaunchWeekPrizeCard({
content,
@@ -23,9 +23,9 @@ export default function LaunchWeekPrizeCard({
contentClassName
)}
shimmerToColor={
resolvedTheme?.includes('dark') ? 'hsl(var(--background-alternative-default))' : undefined
resolvedTheme?.includes('dark') ? 'var(--background-alternative-default)' : undefined
}
shimmerFromColor={resolvedTheme?.includes('dark') ? 'hsl(var(--border-default))' : undefined}
shimmerFromColor={resolvedTheme?.includes('dark') ? 'var(--border-default)' : undefined}
>
{content}
</Panel>
apps/www/components/LaunchWeek/12/Releases/BuildStage.tsx
+4 -4
View File
@@ -1,11 +1,11 @@
import React, { FC } from 'react'
import { buildDays as days } from '~/components/LaunchWeek/12/Releases/data'
import SectionContainer from '~/components/Layouts/SectionContainer'
import BuildCard from './components/BuildCard'
import { motion, useInView } from 'framer-motion'
import React, { FC } from 'react'
import { cn } from 'ui'
import BuildCard from './components/BuildCard'
const BuildStage: FC = () => {
const ref = React.useRef(null)
const isInView = useInView(ref, { margin: '-25%', once: true })
@@ -58,7 +58,7 @@ const BuildStage: FC = () => {
fillRule="evenodd"
clipRule="evenodd"
d="M3.9999 7.55557V5.95557C3.9999 3.74643 5.79076 1.95557 7.9999 1.95557C10.209 1.95557 11.9999 3.74643 11.9999 5.95557V7.55557C12.8836 7.55557 13.5999 8.27191 13.5999 9.15557V13.1556C13.5999 14.0392 12.8836 14.7556 11.9999 14.7556H3.9999C3.11625 14.7556 2.3999 14.0392 2.3999 13.1556V9.15557C2.3999 8.27191 3.11625 7.55557 3.9999 7.55557ZM10.3999 5.95557V7.55557H5.5999V5.95557C5.5999 4.63008 6.67442 3.55557 7.9999 3.55557C9.32539 3.55557 10.3999 4.63008 10.3999 5.95557Z"
fill="hsl(var(--foreground-lighter))"
fill="var(--foreground-lighter)"
/>
</g>
</svg>
apps/www/components/LaunchWeek/12/Releases/data/lw12_build_stage.tsx
+23 -23
View File
@@ -1,7 +1,7 @@
// see apps/www/components/LaunchWeek/X/Releases/data/lwx_advent_days.tsx for reference
import { ReactNode } from 'react'
import { type ClassValue } from 'clsx'
import { ReactNode } from 'react'
export interface AdventDay {
icon?: ReactNode // use svg jsx with 34x34px viewport
@@ -45,11 +45,11 @@ export const days: AdventDay[] = [
>
<path
d="M24.7479 40.9242C14.6856 40.9242 7.38264 34.4969 7.10693 32.6552V28.3586C7.29442 26.9734 8.60017 24.6398 10.6095 23.8039C10.6382 23.6495 10.6625 23.4885 10.6889 23.323C10.7529 22.9194 10.8213 22.4761 10.9668 21.9732C10.5235 20.8527 10.4066 19.5822 10.4066 18.3206C10.4066 16.4017 10.6889 14.4188 11.9351 12.8417C13.2122 11.225 15.2304 10.3625 17.9434 10.0604C20.6034 9.7648 22.9326 10.1354 24.4369 11.7477C24.5471 11.8646 24.6486 11.9859 24.7434 12.1116C24.8405 11.9859 24.9508 11.8646 25.0589 11.7477C26.5631 10.1354 28.8923 9.7648 31.5523 10.0604C34.2653 10.3625 36.2835 11.225 37.5606 12.8417C38.809 14.4188 39.0891 16.4017 39.0891 18.3206C39.0891 19.5822 38.9722 20.8527 38.5289 21.9732C38.6744 22.4761 38.745 22.9194 38.8068 23.323C38.8332 23.4907 38.8597 23.6495 38.8884 23.8039C40.9264 24.653 42.2454 27.0484 42.3976 28.4247V32.5537C42.3976 34.2433 35.0064 40.9242 24.7479 40.9242ZM24.7479 37.6488C29.7768 37.6488 34.8586 35.2005 35.7806 34.4881V25.103L35.7299 24.8471C34.6491 25.3103 33.3588 25.489 31.9207 25.489C29.393 25.489 27.3792 24.7677 25.9433 23.3032C25.4701 22.8166 25.069 22.2647 24.7523 21.6644C24.4324 22.265 24.0283 22.8168 23.5524 23.3032C22.1187 24.7677 20.1049 25.489 17.575 25.489C16.1369 25.489 14.8488 25.3103 13.7658 24.8471L13.7151 25.103V34.4881C14.6393 35.2005 19.7189 37.6488 24.7479 37.6488ZM22.0216 14.0041C21.596 13.5497 20.6166 13.0932 18.3117 13.349C16.0641 13.5983 15.0495 14.2401 14.5334 14.893C13.9886 15.5811 13.7195 16.6332 13.7195 18.3206C13.7195 20.0697 14.0041 20.9034 14.3989 21.3446C14.7562 21.7438 15.5436 22.1805 17.5794 22.1805C19.4609 22.1805 20.5328 21.6622 21.1923 20.9894C21.8871 20.2792 22.3547 19.1654 22.5532 17.564C22.8113 15.5017 22.4716 14.4871 22.0216 14.0041ZM31.1862 13.349C28.8835 13.0932 27.9042 13.5497 27.4785 14.0041C27.0285 14.4871 26.6866 15.5017 26.9447 17.564C27.1454 19.1654 27.613 20.2792 28.3078 20.9894C28.9673 21.6622 30.037 22.1805 31.9207 22.1805C33.9543 22.1805 34.7439 21.7438 35.1013 21.3446C35.4961 20.9034 35.7806 20.0697 35.7806 18.3206C35.7806 16.6332 35.5093 15.5811 34.9645 14.893C34.4506 14.2401 33.436 13.5983 31.1862 13.349Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
d="M20.8923 27.6947C21.3311 27.6947 21.7518 27.869 22.0621 28.1792C22.3723 28.4894 22.5466 28.9102 22.5466 29.3489V32.6596C22.5466 33.0984 22.3723 33.5191 22.0621 33.8293C21.7518 34.1396 21.3311 34.3139 20.8923 34.3139C20.4536 34.3139 20.0328 34.1396 19.7226 33.8293C19.4124 33.5191 19.2381 33.0984 19.2381 32.6596V29.3489C19.2381 28.9102 19.4124 28.4894 19.7226 28.1792C20.0328 27.869 20.4536 27.6947 20.8923 27.6947ZM30.2664 29.3489V32.6596C30.2664 33.0984 30.0921 33.5191 29.7819 33.8293C29.4717 34.1396 29.0509 34.3139 28.6122 34.3139C28.1734 34.3139 27.7527 34.1396 27.4425 33.8293C27.1322 33.5191 26.9579 33.0984 26.9579 32.6596V29.3489C26.9579 28.9102 27.1322 28.4894 27.4425 28.1792C27.7527 27.869 28.1734 27.6947 28.6122 27.6947C29.0509 27.6947 29.4717 27.869 29.7819 28.1792C30.0921 28.4894 30.2664 28.9102 30.2664 29.3489Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
</svg>
),
@@ -76,19 +76,19 @@ export const days: AdventDay[] = [
>
<path
d="M24.7774 8.26382C15.182 8.26382 7.3724 16.0771 7.3724 25.6688C7.3724 35.2605 15.1857 43.0738 24.7774 43.0738C34.3691 43.0738 42.1824 35.2605 42.1824 25.6688C42.1824 16.0771 34.3691 8.26382 24.7774 8.26382ZM24.7516 9.81028C25.0492 9.81799 25.332 9.94203 25.5398 10.1559C25.7475 10.3699 25.8637 10.6567 25.8636 10.9554C25.8636 11.2591 25.743 11.5504 25.5282 11.7651C25.3135 11.9799 25.0222 12.1005 24.7185 12.1005C24.4148 12.1005 24.1235 11.9799 23.9088 11.7651C23.694 11.5504 23.5734 11.2591 23.5734 10.9554C23.5733 10.8022 23.604 10.6505 23.6636 10.5094C23.7232 10.3682 23.8105 10.2405 23.9204 10.1337C24.0303 10.027 24.1605 9.94331 24.3032 9.88775C24.446 9.83219 24.5985 9.80585 24.7516 9.81028ZM27.3732 11.6955C29.3835 12.072 31.2877 12.8816 32.9536 14.0681C34.6195 15.2546 36.0072 16.7895 37.0202 18.5662L35.6689 21.6149C35.4369 22.1414 35.6762 22.76 36.1991 22.9957L38.7986 24.1481C38.8792 24.9607 38.8891 25.7787 38.8281 26.593H37.381C37.2374 26.593 37.1785 26.6887 37.1785 26.8287V27.4914C37.1785 29.0526 36.2985 29.395 35.5253 29.4797C34.7889 29.5644 33.9751 29.1704 33.872 28.7212C33.4376 26.28 32.7159 25.7609 31.5745 24.8588C32.992 23.9604 34.4649 22.6311 34.4649 20.8564C34.4649 18.9381 33.1504 17.7303 32.2556 17.1375C30.9964 16.3091 29.6046 16.1434 29.229 16.1434H14.2799C16.347 13.8342 19.1178 12.2708 22.1632 11.6955L23.9269 13.5439C24.3245 13.9599 24.9836 13.9783 25.3997 13.577L27.3732 11.6955ZM11.0986 20.1715C11.3966 20.1802 11.6794 20.3046 11.887 20.5184C12.0946 20.7323 12.2107 21.0186 12.2106 21.3167C12.2106 21.6204 12.09 21.9116 11.8752 22.1264C11.6605 22.3411 11.3692 22.4618 11.0655 22.4618C10.7618 22.4618 10.4705 22.3411 10.2558 22.1264C10.041 21.9116 9.92037 21.6204 9.92037 21.3167C9.92031 21.1634 9.95099 21.0118 10.0106 20.8706C10.0702 20.7295 10.1575 20.6018 10.2674 20.495C10.3773 20.3882 10.5074 20.3046 10.6502 20.249C10.793 20.1934 10.9455 20.1671 11.0986 20.1715ZM38.401 20.2231C38.6989 20.2317 38.9817 20.3562 39.1893 20.57C39.397 20.7838 39.5131 21.0702 39.5129 21.3682C39.5129 21.6719 39.3923 21.9632 39.1775 22.1779C38.9628 22.3927 38.6715 22.5133 38.3678 22.5133C38.0641 22.5133 37.7728 22.3927 37.5581 22.1779C37.3433 21.9632 37.2227 21.6719 37.2227 21.3682C37.2226 21.215 37.2533 21.0633 37.3129 20.9222C37.3725 20.7811 37.4599 20.6533 37.5697 20.5465C37.6796 20.4398 37.8098 20.3561 37.9526 20.3006C38.0953 20.245 38.2478 20.2187 38.401 20.2231ZM13.2563 20.4072H15.252V29.4061H11.2238C10.7263 27.6591 10.5713 25.8325 10.7672 24.0266L13.2342 22.9294C13.7607 22.6937 14.0001 22.0788 13.7644 21.5523L13.2563 20.4072ZM21.5851 20.5029H26.3386C26.5853 20.5029 28.0728 20.7864 28.0728 21.9021C28.0728 22.8263 26.9314 23.1577 25.9925 23.1577H21.5814L21.5851 20.5029ZM21.5851 26.9686H25.2266C25.558 26.9686 27.005 27.0643 27.4653 28.9127C27.6089 29.4797 27.9292 31.3281 28.1465 31.9209C28.3637 32.5837 29.2437 33.9092 30.1826 33.9092H36.1255C35.7272 34.4426 35.2916 34.9471 34.822 35.4189L32.4029 34.8997C31.8396 34.7782 31.2836 35.139 31.1621 35.7024L30.5877 38.3829C28.7406 39.2196 26.7347 39.6478 24.7069 39.6383C22.6792 39.6288 20.6774 39.1817 18.8383 38.3277L18.2639 35.6472C18.1424 35.0838 17.5901 34.723 17.0267 34.8445L14.6592 35.3526C14.2198 34.8994 13.8114 34.4172 13.4367 33.9092H24.9505C25.0793 33.9092 25.1677 33.8871 25.1677 33.7656V29.6933C25.1677 29.5755 25.0793 29.5497 24.9505 29.5497H21.5814L21.5851 26.9686ZM16.2719 36.2952C16.5698 36.3038 16.8526 36.4283 17.0603 36.6421C17.2679 36.8559 17.384 37.1423 17.3839 37.4403C17.3839 37.744 17.2632 38.0353 17.0485 38.25C16.8337 38.4648 16.5425 38.5854 16.2388 38.5854C15.9351 38.5854 15.6438 38.4648 15.429 38.25C15.2143 38.0353 15.0936 37.744 15.0936 37.4403C15.0936 37.2871 15.1243 37.1354 15.1839 36.9943C15.2435 36.8532 15.3308 36.7254 15.4407 36.6186C15.5505 36.5119 15.6807 36.4282 15.8235 36.3727C15.9663 36.3171 16.1187 36.2908 16.2719 36.2952ZM33.2277 36.3467C33.5256 36.3554 33.8084 36.4798 34.0161 36.6936C34.2237 36.9075 34.3398 37.1938 34.3397 37.4918C34.3397 37.7956 34.219 38.0868 34.0043 38.3016C33.7895 38.5163 33.4983 38.637 33.1946 38.637C32.8908 38.637 32.5996 38.5163 32.3848 38.3016C32.1701 38.0868 32.0494 37.7956 32.0494 37.4918C32.0494 37.3386 32.0801 37.187 32.1397 37.0458C32.1993 36.9047 32.2866 36.777 32.3965 36.6702C32.5063 36.5634 32.6365 36.4798 32.7793 36.4242C32.9221 36.3686 33.0745 36.3423 33.2277 36.3467Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M41.2102 25.6688C41.2102 30.0271 39.4789 34.2069 36.3971 37.2887C33.3153 40.3705 29.1355 42.1018 24.7772 42.1018C20.4189 42.1018 16.2392 40.3705 13.1574 37.2887C10.0756 34.2069 8.34429 30.0271 8.34429 25.6688C8.34429 21.3105 10.0756 17.1308 13.1574 14.049C16.2392 10.9672 20.4189 9.23589 24.7772 9.23589C29.1355 9.23589 33.3153 10.9672 36.3971 14.049C39.4789 17.1308 41.2102 21.3105 41.2102 25.6688ZM40.9009 24.0819L43.4636 25.6688L40.9009 27.2558L43.1027 29.314L40.2823 30.3708L42.0423 32.8194L39.0635 33.3054L40.3154 36.0522L37.2998 35.9454L37.9921 38.8837L35.0538 38.1914L35.1606 41.207L32.4138 39.9551L31.9278 42.9339L29.4792 41.1739L28.4225 43.9943L26.3642 41.7925L24.7772 44.3552L23.1903 41.7925L21.132 43.9943L20.0753 41.1739L17.6267 42.9339L17.1407 39.9551L14.3939 41.207L14.5007 38.1914L11.5624 38.8837L12.2546 35.9454L9.23902 36.0522L10.4909 33.3054L7.51215 32.8194L9.27216 30.3708L6.45172 29.314L8.65358 27.2558L6.09088 25.6688L8.65358 24.0819L6.45172 22.0236L9.27216 20.9669L7.51215 18.5183L10.4909 18.0323L9.23902 15.2855L12.2546 15.3923L11.5624 12.454L14.5007 13.1462L14.3939 10.1306L17.1407 11.3825L17.6267 8.40375L20.0753 10.1638L21.132 7.34332L23.1903 9.54518L24.7772 6.98248L26.3642 9.54518L28.4225 7.34332L29.4792 10.1638L31.9278 8.40375L32.4138 11.3825L35.1606 10.1306L35.0538 13.1462L37.9921 12.454L37.2998 15.3923L40.3154 15.2855L39.0635 18.0323L42.0423 18.5183L40.2823 20.9669L43.1027 22.0236L40.9009 24.0819Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M24.7772 6.43018C24.9685 6.43018 25.1461 6.52911 25.2468 6.6917L26.4537 8.64065L28.019 6.96616C28.1495 6.82654 28.3429 6.76432 28.5303 6.80166C28.7178 6.83899 28.8726 6.97057 28.9396 7.14954L29.7431 9.2939L31.6054 7.95528C31.7607 7.84368 31.9626 7.82032 32.1392 7.89353C32.3159 7.96674 32.4421 8.1261 32.4729 8.31481L32.8425 10.5802L34.9315 9.62806C35.1057 9.5487 35.3084 9.56512 35.4675 9.67147C35.6266 9.77782 35.7193 9.95893 35.7125 10.1502L35.6314 12.4427L37.8654 11.9164C38.0517 11.8725 38.2473 11.9282 38.3826 12.0635C38.5179 12.1987 38.5735 12.3944 38.5297 12.5806L38.0033 14.8147L40.2959 14.7335C40.4871 14.7267 40.6682 14.8194 40.7746 14.9785C40.8809 15.1376 40.8974 15.3404 40.818 15.5145L39.8659 17.6036L42.1313 17.9732C42.32 18.004 42.4793 18.1302 42.5525 18.3068C42.6257 18.4835 42.6024 18.6854 42.4908 18.8407L41.1522 20.703L43.2965 21.5064C43.4755 21.5735 43.6071 21.7283 43.6444 21.9157C43.6817 22.1032 43.6195 22.2966 43.4799 22.4271L41.8054 23.9924L43.7544 25.1993C43.917 25.3 44.0159 25.4776 44.0159 25.6688C44.0159 25.8601 43.917 26.0377 43.7544 26.1384L41.8054 27.3453L43.4799 28.9106C43.6195 29.0411 43.6817 29.2345 43.6444 29.4219C43.6071 29.6094 43.4755 29.7642 43.2965 29.8312L41.1522 30.6347L42.4908 32.497C42.6024 32.6522 42.6257 32.8542 42.5525 33.0308C42.4793 33.2075 42.32 33.3337 42.1313 33.3644L39.8659 33.7341L40.818 35.8231C40.8974 35.9973 40.8809 36.2 40.7746 36.3591C40.6682 36.5182 40.4871 36.6109 40.2959 36.6041L38.0033 36.523L38.5297 38.757C38.5735 38.9432 38.5179 39.1389 38.3826 39.2742C38.2473 39.4095 38.0517 39.4651 37.8654 39.4213L35.6314 38.8949L35.7125 41.1875C35.7193 41.3787 35.6266 41.5598 35.4675 41.6662C35.3085 41.7725 35.1057 41.789 34.9315 41.7096L32.8425 40.7575L32.4729 43.0229C32.4421 43.2116 32.3159 43.3709 32.1392 43.4441C31.9626 43.5173 31.7607 43.494 31.6054 43.3824L29.7431 42.0438L28.9396 44.1881C28.8726 44.3671 28.7178 44.4987 28.5303 44.536C28.3429 44.5733 28.1495 44.5111 28.019 44.3715L26.4537 42.697L25.2468 44.646C25.1461 44.8086 24.9685 44.9075 24.7772 44.9075C24.586 44.9075 24.4084 44.8086 24.3077 44.646L23.1008 42.697L21.5355 44.3715C21.405 44.5111 21.2116 44.5733 21.0241 44.536C20.8367 44.4987 20.6819 44.3671 20.6148 44.1881L19.8114 42.0438L17.9491 43.3824C17.7938 43.494 17.5919 43.5173 17.4152 43.4441C17.2386 43.3709 17.1124 43.2116 17.0816 43.0229L16.712 40.7575L14.6229 41.7096C14.4488 41.789 14.246 41.7725 14.0869 41.6662C13.9278 41.5598 13.8351 41.3787 13.8419 41.1875L13.9231 38.8949L11.689 39.4213C11.5028 39.4651 11.3071 39.4095 11.1719 39.2742C11.0366 39.1389 10.9809 38.9432 11.0248 38.757L11.5511 36.523L9.25857 36.6041C9.06733 36.6109 8.88622 36.5182 8.77987 36.3591C8.67352 36.2 8.6571 35.9973 8.73645 35.8231L9.68857 33.7341L7.42321 33.3644C7.2345 33.3337 7.07514 33.2075 7.00193 33.0308C6.92872 32.8542 6.95208 32.6522 7.06368 32.497L8.4023 30.6347L6.25794 29.8312C6.07897 29.7642 5.94739 29.6094 5.91006 29.4219C5.87272 29.2345 5.93494 29.0411 6.07456 28.9106L7.74905 27.3453L5.8001 26.1384C5.63751 26.0377 5.53857 25.8601 5.53857 25.6688C5.53857 25.4776 5.63751 25.3 5.8001 25.1993L7.74905 23.9924L6.07456 22.4271C5.93494 22.2966 5.87272 22.1032 5.91006 21.9157C5.94739 21.7283 6.07897 21.5735 6.25794 21.5064L8.4023 20.703L7.06368 18.8407C6.95208 18.6854 6.92872 18.4835 7.00193 18.3068C7.07514 18.1302 7.2345 18.004 7.42321 17.9732L9.68857 17.6036L8.73645 15.5145C8.6571 15.3404 8.67352 15.1376 8.77987 14.9785C8.88622 14.8194 9.06733 14.7267 9.25857 14.7335L11.5511 14.8147L11.0248 12.5806C10.9809 12.3944 11.0366 12.1987 11.1719 12.0635C11.3071 11.9282 11.5028 11.8725 11.689 11.9164L13.9231 12.4427L13.8419 10.1502C13.8351 9.95893 13.9278 9.77782 14.0869 9.67147C14.246 9.56512 14.4488 9.5487 14.6229 9.62806L16.712 10.5802L17.0816 8.31481C17.1124 8.1261 17.2386 7.96674 17.4152 7.89353C17.5919 7.82032 17.7938 7.84368 17.9491 7.95528L19.8114 9.2939L20.6148 7.14954C20.6819 6.97057 20.8367 6.83899 21.0241 6.80166C21.2116 6.76432 21.405 6.82654 21.5355 6.96616L23.1008 8.64065L24.3077 6.6917C24.4084 6.52911 24.586 6.43018 24.7772 6.43018ZM21.864 8.9352L21.3367 8.3711L21.0659 9.09395C21.3303 9.03473 21.5965 8.98179 21.864 8.9352ZM19.745 10.6066L19.7529 10.6122C19.8926 10.7126 20.071 10.7422 20.2356 10.6923C20.4002 10.6424 20.5321 10.5186 20.5925 10.3575L20.5958 10.3485C21.3102 10.1535 22.0397 10.0081 22.7793 9.91432L22.7868 9.92234C22.9042 10.048 23.0735 10.1117 23.2447 10.0948C23.4158 10.0779 23.5693 9.98218 23.6598 9.83596L23.6653 9.82714C24.0342 9.80126 24.405 9.7882 24.7772 9.7882C25.1494 9.7882 25.5203 9.80126 25.8892 9.82714L25.8946 9.83596C25.9852 9.98218 26.1387 10.0779 26.3098 10.0948C26.481 10.1117 26.6502 10.048 26.7677 9.92234L26.7752 9.91431C27.5147 10.0081 28.2443 10.1535 28.9586 10.3485L28.962 10.3575C29.0223 10.5186 29.1543 10.6424 29.3189 10.6923C29.4834 10.7422 29.6619 10.7126 29.8016 10.6122L29.8094 10.6066C30.5142 10.842 31.2016 11.1267 31.8666 11.4584L31.8687 11.4715C31.8964 11.6413 32.0017 11.7885 32.1535 11.8697C32.3053 11.9508 32.4862 11.Line truncated
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
</svg>
),
@@ -115,25 +115,25 @@ export const days: AdventDay[] = [
>
<path
d="M7.48275 41.9973C7.37468 41.9977 7.26748 41.9782 7.16662 41.9398C7.05927 41.8991 6.96111 41.8378 6.87783 41.7593C6.79455 41.6808 6.72779 41.5869 6.6814 41.4827C6.63502 41.3785 6.60994 41.2662 6.6076 41.1524C6.60527 41.0386 6.62572 40.9255 6.66779 40.8195C6.68809 40.7621 7.51174 38.4239 7.89167 30.5016C8.09758 26.1929 8.10339 24.3 7.75246 20.0689C7.41314 16.0187 7.96708 13.6375 9.38527 12.9854C11.3748 12.0806 13.1787 13.5398 14.9246 14.953C16.8503 16.5128 18.8399 18.1128 21.508 17.7278C23.3264 17.4578 23.9935 15.7717 24.8027 13.2296L24.8056 13.2206C25.4369 11.2442 26.0875 9.20768 27.9929 8.92086C28.8919 8.7916 29.8809 9.1363 30.9308 9.94921C35.9713 13.8529 41.8964 27.6867 42.894 37.881C42.9053 37.9938 42.8939 38.1077 42.8606 38.2162C42.8273 38.3246 42.7726 38.4255 42.6999 38.5131C42.6271 38.6005 42.5377 38.673 42.4366 38.7262C42.3356 38.7794 42.2249 38.8124 42.111 38.8232C41.8814 38.8448 41.6526 38.7752 41.4747 38.6298C41.2969 38.4844 41.1846 38.275 41.1626 38.0476C40.1388 27.566 34.0919 14.5825 29.8519 11.305C29.2109 10.811 28.6396 10.5668 28.2365 10.6271C27.4019 10.7501 26.9412 12.1917 26.4505 13.7268L26.4442 13.7466L26.4432 13.7495C25.701 16.0815 24.7782 18.9804 21.7517 19.4312C18.3208 19.9425 15.815 17.9146 13.8052 16.2715C12.1259 14.9128 11.0471 14.1028 10.0929 14.548C9.68979 14.7319 9.16195 16.3519 9.46067 19.9224C9.8203 24.2512 9.81159 26.1815 9.60278 30.5763C9.19965 38.961 8.3035 41.3337 8.2658 41.4314C8.20667 41.592 8.10064 41.7316 7.9612 41.8323C7.82177 41.9331 7.65522 41.9905 7.48275 41.9973Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
d="M11.5353 35.2812C11.4502 35.2805 11.3672 35.2555 11.2962 35.2091C11.2252 35.1627 11.1692 35.097 11.1351 35.0198C11.1112 34.9673 11.0982 34.9106 11.0969 34.853C11.0955 34.7955 11.1058 34.7382 11.1272 34.6847C11.1485 34.6311 11.1805 34.5823 11.2212 34.5412C11.2619 34.5001 11.3105 34.4675 11.3642 34.4453L14.7835 32.9918L11.1931 32.268C11.1372 32.257 11.0841 32.2352 11.0367 32.2038C10.9894 32.1724 10.9488 32.1321 10.9173 32.0851C10.8857 32.0381 10.8639 31.9854 10.853 31.9301C10.8421 31.8746 10.8423 31.8177 10.8538 31.7624C10.8645 31.7068 10.8863 31.6538 10.9178 31.6066C10.9494 31.5594 10.9901 31.5189 11.0375 31.4874C11.085 31.4559 11.1383 31.434 11.1944 31.4231C11.2505 31.412 11.3082 31.4122 11.3642 31.4234L16.3206 32.4231C16.4115 32.4409 16.4943 32.487 16.5569 32.5547C16.6195 32.6224 16.6586 32.7081 16.6686 32.7994C16.6778 32.8909 16.6574 32.983 16.6106 33.0625C16.5637 33.1419 16.4926 33.2047 16.4076 33.2417L11.7064 35.2439C11.6529 35.2687 11.5944 35.2815 11.5353 35.2812Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
d="M37.8279 31.0817H37.8511C37.9587 31.0817 38.0625 31.0424 38.1427 30.9714C38.223 30.9005 38.274 30.8027 38.2861 30.6968C38.2917 30.5827 38.2515 30.471 38.1744 30.386C38.0973 30.301 37.9895 30.2496 37.8743 30.243L34.1591 30.0447L37.2798 28.1432C37.3773 28.0822 37.4467 27.9858 37.4734 27.8746C37.4999 27.7635 37.4814 27.6464 37.4219 27.5486C37.3608 27.4522 37.264 27.3835 37.1522 27.3571C37.0405 27.3307 36.9228 27.349 36.8245 27.4079L32.5177 30.0361C32.4386 30.0837 32.3771 30.1552 32.3421 30.2399C32.3072 30.3248 32.3006 30.4185 32.3234 30.5072C32.3497 30.5921 32.4022 30.6667 32.4734 30.7209C32.5446 30.7749 32.631 30.8056 32.7207 30.8089L37.8279 31.0817Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
d="M24.2491 34.0434C23.538 34.0736 22.837 33.8691 22.2559 33.462C21.6749 33.055 21.2467 32.4684 21.0386 31.7943C20.9945 31.6515 21.0081 31.4971 21.0769 31.3641C21.1457 31.2311 21.2641 31.1299 21.4069 31.082C21.5519 31.0314 21.7113 31.0398 21.85 31.1056C21.9886 31.1713 22.0952 31.2888 22.1465 31.4324C22.5264 32.5814 23.527 33.0812 24.893 32.837C26.2589 32.5929 26.9898 31.7627 26.9637 30.5563C26.9637 30.4039 27.0248 30.2578 27.1336 30.1501C27.2424 30.0423 27.3899 29.9818 27.5437 29.9818C27.6975 29.9818 27.8451 30.0423 27.9538 30.1501C28.0627 30.2578 28.1238 30.4039 28.1238 30.5563C28.1615 32.3315 27.0014 33.647 25.0989 33.9889C24.8178 34.032 24.5334 34.0503 24.2491 34.0434Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M25.7358 27.736C26.5975 28.5895 27.7659 29.0696 28.9846 29.0712C30.2032 29.0696 31.3715 28.5895 32.2333 27.736C33.095 26.8825 33.5798 25.7253 33.5813 24.5183C33.5808 24.0901 33.5194 23.668 33.4019 23.2636L34.1502 23.1279C34.3389 23.0931 34.5059 22.9855 34.6147 22.8288C34.7234 22.6721 34.765 22.4791 34.7302 22.2921C34.695 22.1058 34.5867 21.9408 34.4292 21.8331C34.2716 21.7256 34.0775 21.684 33.8892 21.7176L32.7958 21.9158C32.7886 21.9171 32.7815 21.9186 32.7743 21.9201C32.7692 21.9212 32.7641 21.9224 32.759 21.9236C32.6038 21.7023 32.4282 21.4937 32.2333 21.3006C31.3715 20.4472 30.2032 19.967 28.9846 19.9655C27.7659 19.967 26.5975 20.4472 25.7358 21.3006C25.2144 21.817 24.831 22.4446 24.6091 23.1272C24.3641 23.0873 24.1157 23.0674 23.8666 23.0677C23.0492 23.068 22.2517 23.2841 21.5535 23.6872C21.4288 23.5248 21.2924 23.3701 21.145 23.2242C20.2834 22.3713 19.1155 21.8915 17.8973 21.89C16.6792 21.8915 15.5113 22.3713 14.6496 23.2242C14.039 23.8285 13.6175 24.5853 13.4229 25.4043L12.155 25.6357C12.0616 25.6526 11.9726 25.6876 11.8929 25.7386C11.8133 25.7897 11.7445 25.8558 11.6907 25.9332C11.6368 26.0105 11.5988 26.0977 11.579 26.1896C11.5591 26.2815 11.5577 26.3763 11.5749 26.4687C11.6048 26.6341 11.6922 26.7838 11.822 26.892C11.9519 27.0001 12.1159 27.0597 12.2855 27.0604C12.3295 27.058 12.3733 27.0513 12.416 27.0404L13.3222 26.8768C13.4253 27.9234 13.8914 28.9077 14.6486 29.6577C15.5103 30.5112 16.6786 30.9914 17.8973 30.9928C19.116 30.9914 20.2843 30.5112 21.1461 29.6577C22.0078 28.8042 22.4926 27.6471 22.4941 26.44C22.4931 25.9299 22.4059 25.4286 22.2402 24.9555C22.7284 24.6638 23.2903 24.507 23.8666 24.5069C24.0415 24.5074 24.2158 24.522 24.3879 24.5505C24.398 25.7459 24.8817 26.8901 25.7358 27.736ZM15.2449 28.1129C15.3672 28.3028 15.5107 28.4804 15.674 28.6421C16.2638 29.2262 17.0632 29.5551 17.8973 29.5567C18.7314 29.5551 19.5309 29.2262 20.1207 28.6421C20.5158 28.2507 20.7953 27.7661 20.9372 27.2403C20.6078 26.6592 19.3023 25.7228 17.9992 25.9287C16.7778 26.1217 15.6639 27.2351 15.2449 28.1129ZM20.9323 25.6247C20.7889 25.1054 20.5109 24.6269 20.1197 24.2397C19.53 23.6562 18.7309 23.3278 17.8973 23.3262V23.3234C17.0632 23.3249 16.2638 23.6538 15.674 24.2379C15.0842 24.822 14.7521 25.6139 14.7506 26.44C14.7508 26.5389 14.7557 26.6373 14.7652 26.7349C15.4725 25.8302 16.5683 24.9876 17.8165 24.794C18.9521 24.618 20.1012 25.0299 20.9323 25.6247ZM26.4604 26.3756C26.5515 26.4969 26.6519 26.6122 26.7612 26.7205C27.351 27.3046 28.1505 27.6334 28.9846 27.6349C29.8186 27.6334 30.6181 27.3046 31.2079 26.7205C31.5665 26.3653 31.8298 25.9333 31.9814 25.4636C31.4316 24.7613 30.0418 23.9971 28.8253 24.1907C27.503 24.3977 26.7425 25.6103 26.4604 26.3756ZM32.0872 24.0014C31.1515 23.3283 29.8463 22.885 28.6571 23.0705C27.3357 23.2786 26.4282 24.1391 25.8767 25.0016C25.8513 24.8427 25.8381 24.6812 25.8378 24.5183C25.8386 23.692 26.1704 22.8997 26.7603 22.3154C27.3502 21.7311 28.1502 21.4025 28.9846 21.4017C29.8188 21.4025 30.6188 21.7311 31.2088 22.3154C31.6742 22.7764 31.9789 23.3668 32.0872 24.0014Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
</svg>
),
@@ -162,17 +162,17 @@ export const days: AdventDay[] = [
fillRule="evenodd"
clipRule="evenodd"
d="M16.0892 12.5746C15.4328 12.5746 14.8032 12.8353 14.339 13.2995C13.8748 13.7637 13.614 14.3933 13.614 15.0498V35.8419C13.614 36.4984 13.8748 37.128 14.339 37.5922C14.8032 38.0563 15.4328 38.3171 16.0892 38.3171H29.9506C30.4974 38.3171 30.9407 38.7604 30.9407 39.3072C30.9407 39.854 30.4974 40.2973 29.9506 40.2973H16.0892C14.9076 40.2973 13.7743 39.8279 12.9388 38.9924C12.1032 38.1568 11.6338 37.0235 11.6338 35.8419V15.0498C11.6338 13.8681 12.1032 12.7349 12.9388 11.8993C13.7743 11.0638 14.9076 10.5944 16.0892 10.5944H36.8813C37.4281 10.5944 37.8714 11.0376 37.8714 11.5845V20.2478C37.8714 20.7946 37.4281 21.2379 36.8813 21.2379C36.3345 21.2379 35.8912 20.7946 35.8912 20.2478V12.5746H16.0892Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12.9388 32.6914C13.7743 31.8559 14.9076 31.3864 16.0892 31.3864H22.3377C22.8846 31.3864 23.3278 31.8297 23.3278 32.3765C23.3278 32.9234 22.8846 33.3666 22.3377 33.3666H16.0892C15.4328 33.3666 14.8032 33.6274 14.339 34.0916C13.8748 34.5558 13.614 35.1854 13.614 35.8419C13.614 36.3887 13.1707 36.832 12.6239 36.832C12.0771 36.832 11.6338 36.3887 11.6338 35.8419C11.6338 34.6602 12.1032 33.527 12.9388 32.6914Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
d="M34.5183 22.7357C34.5082 22.0719 33.6618 21.7871 33.2444 22.3069L26.9448 30.1517C26.2012 31.0777 26.8681 32.4432 28.0639 32.4432H34.5785L34.6551 37.4985C34.6651 38.1622 35.5115 38.447 35.929 37.9272L42.2285 30.0824C42.9721 29.1565 42.3052 27.791 41.1095 27.791H34.5519L34.5183 22.7357Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
</svg>
),
@@ -199,13 +199,13 @@ export const days: AdventDay[] = [
>
<path
d="M25.6578 41.5941L24.9433 42.4385C22.4311 40.244 17.7964 35.2184 19.3557 32.6717C20.9149 30.1249 24.0478 30.5277 25.4193 31.0475L18.5113 23.8577L22.5258 18.8145C24.0037 16.958 24.0574 14.3424 22.6571 12.4266L19.8918 8.64363C19.7382 8.43342 19.7807 8.13893 19.9876 7.98078C20.1912 7.8251 20.4813 7.85744 20.6457 8.05413L29.3823 18.5088C28.2129 19.5193 25.7571 22.4065 25.2893 25.8714C24.8215 29.3364 28.7615 33.2346 30.7899 34.7506L30.0536 35.6817C27.0001 34.1224 23.6002 34.8805 22.669 36.8512C21.924 38.4278 24.3511 40.6701 25.6578 41.5941Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M18.9578 6.63368C19.8828 5.92653 21.2007 6.0734 21.9473 6.96684L29.9167 16.5034L36.4334 16.5034L36.4334 17.3642L30.636 17.3642L31.7536 18.7016L30.4914 19.7922C30.0143 20.2045 29.177 21.2225 28.4297 22.4401C28.1973 22.8188 27.978 23.2096 27.7833 23.6006H36.4329V24.4614H27.3968C27.1699 25.0339 27.0159 25.5869 26.9723 26.0806C26.8723 27.211 27.3691 28.5473 28.4678 30.0343C28.6351 30.2608 28.8099 30.4823 28.9893 30.6974H36.433V31.5583H29.7593C30.4964 32.329 31.2396 32.9695 31.8055 33.3924L33.2015 34.4358L30.7321 37.5584H36.4333V38.4192H24.7274L24.7346 38.4284C25.2785 39.13 26.0732 39.8108 26.6373 40.2097L28.1475 41.2777L25.0415 44.7051L24.6326 44.4189L23.8279 43.716C22.5055 42.5608 20.6106 40.6525 19.2278 38.6515C19.1747 38.5747 19.122 38.4973 19.0698 38.4192H11.1113V37.5584H18.5324C18.1366 36.8737 17.8022 36.1591 17.5912 35.4431C17.2671 34.3434 17.1691 32.9959 17.9096 31.7863C17.9573 31.7083 18.0062 31.6323 18.056 31.5583H11.1113V30.6974H18.7603C19.522 29.9305 20.4176 29.4691 21.31 29.2182L16.7396 24.4614H11.1113V23.6006H16.5488L21.1992 17.7585C21.3 17.6319 21.391 17.5002 21.4722 17.3642H11.1113V16.5034H21.8426C22.1332 15.4711 21.9507 14.3339 21.2883 13.4276L18.523 9.64463C17.825 8.68973 18.0182 7.35206 18.9578 6.63368ZM29.2826 37.1923L29.9996 37.5584H24.2385C24.228 37.5161 24.2229 37.4804 24.221 37.4537L24.2203 37.4416C24.3831 37.1437 24.8558 36.7926 25.8641 36.6124C26.836 36.4387 28.0746 36.5754 29.2826 37.1923ZM21.3467 7.46876C20.8688 6.89689 20.0253 6.80289 19.4332 7.25551C18.8318 7.71532 18.7081 8.57153 19.1549 9.18273L21.9202 12.9657C23.0777 14.5493 23.0332 16.7114 21.8116 18.246L17.2995 23.9143L22.8703 29.7124L22.1383 29.8345C20.842 30.0506 19.4861 30.7104 18.5771 32.195C17.9989 33.1394 18.0497 34.2299 18.342 35.2219C18.6353 36.2172 19.2065 37.2439 19.8717 38.2065C21.206 40.1374 23.0511 41.9981 24.3429 43.1265L25.0415 43.7368L26.9985 41.4238L26.1853 40.8487C25.5801 40.4207 24.7213 39.6888 24.116 38.908C23.8131 38.5173 23.6063 38.1559 23.5078 37.8487C23.4681 37.7249 23.4475 37.6093 23.4403 37.5105C23.4342 37.4256 23.4348 37.3142 23.4671 37.2158L23.4677 37.214L23.4851 37.1626L23.4947 37.1423C23.8034 36.489 24.5957 36.044 25.7264 35.8419C26.8719 35.6371 28.2835 35.8032 29.6386 36.4952L30.3056 36.8358L32.0886 34.5812L31.3369 34.0194C30.3796 33.3039 28.9555 32.0116 27.8383 30.4994C26.6897 28.9448 26.0683 27.4173 26.1926 26.0117C26.3037 24.7545 26.9973 23.2775 27.7626 22.0307C28.5303 20.7798 29.4167 19.6864 29.9796 19.2L30.6593 18.6127L21.3467 7.46876Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
</svg>
),
@@ -234,7 +234,7 @@ export const days: AdventDay[] = [
fillRule="evenodd"
clipRule="evenodd"
d="M19.992 9.74642C20.3232 10.3166 20.1294 11.0473 19.5593 11.3785L12.6092 15.4154L24.7517 22.4685L36.8948 15.4151L29.9453 11.3785C29.3752 11.0473 29.1814 10.3166 29.5126 9.74642C29.8438 9.17625 30.5745 8.98251 31.1447 9.3137L39.7981 14.3401C40.1659 14.5537 40.3923 14.947 40.3923 15.3724V25.5873C40.3923 26.2467 39.8578 26.7812 39.1984 26.7812C38.539 26.7812 38.0045 26.2467 38.0045 25.5873V17.5319L25.9456 24.5364V38.4719L33.2678 34.2187C33.838 33.8875 34.5687 34.0813 34.8998 34.6514C35.231 35.2216 35.0373 35.9523 34.4671 36.2835L25.352 41.5781C24.9812 41.7934 24.5234 41.7934 24.1526 41.5781L15.0375 36.2835C14.4673 35.9523 14.2736 35.2216 14.6048 34.6514C14.9359 34.0813 15.6666 33.8875 16.2368 34.2187L23.5577 38.4711V24.5364L11.5001 17.5326V25.4995C11.5001 26.1589 10.9656 26.6934 10.3062 26.6934C9.64684 26.6934 9.1123 26.1589 9.1123 25.4995V15.3724C9.1123 14.947 9.33868 14.5537 9.70655 14.3401L18.3599 9.3137C18.9301 8.98251 19.6608 9.17625 19.992 9.74642Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
</svg>
),
@@ -263,7 +263,7 @@ export const days: AdventDay[] = [
fillRule="evenodd"
clipRule="evenodd"
d="M27.6986 10.2897C27.6986 10.6736 27.6252 11.0403 27.4917 11.3766L35.5553 16.0321C36.0953 15.3575 36.9257 14.9255 37.857 14.9255C39.4844 14.9255 40.8037 16.2448 40.8037 17.8722C40.8037 19.2891 39.8037 20.4724 38.4709 20.7549V30.0843C39.8037 30.3667 40.8037 31.5501 40.8037 32.967C40.8037 34.5944 39.4844 35.9137 37.857 35.9137C37.0639 35.9137 36.3441 35.6004 35.8144 35.0909L27.5977 39.8347C27.6635 40.0794 27.6986 40.3366 27.6986 40.602C27.6986 42.2294 26.3793 43.5487 24.7519 43.5487C23.1244 43.5487 21.8052 42.2294 21.8052 40.602C21.8052 40.3366 21.8402 40.0795 21.906 39.8349L13.6894 35.091C13.1597 35.6005 12.4399 35.9137 11.6469 35.9137C10.0195 35.9137 8.7002 34.5944 8.7002 32.967C8.7002 31.5502 9.69999 30.367 11.0325 30.0844V20.7548C9.69999 20.4721 8.7002 19.2889 8.7002 17.8722C8.7002 16.2448 10.0195 14.9255 11.6469 14.9255C12.5782 14.9255 13.4085 15.3574 13.9485 16.0319L22.012 11.3765C21.8785 11.0402 21.8052 10.6735 21.8052 10.2897C21.8052 8.66231 23.1244 7.34302 24.7519 7.34302C26.3793 7.34302 27.6986 8.66231 27.6986 10.2897ZM34.9484 17.3967C34.9233 17.5515 34.9103 17.7103 34.9103 17.8722C34.9103 19.1963 35.7837 20.3165 36.9858 20.688V30.1511C36.8504 30.193 36.7192 30.2443 36.593 30.3044L26.4344 12.7092C26.4932 12.6682 26.5504 12.6252 26.606 12.5802L34.9484 17.3967ZM25.0171 13.2247L35.441 31.2794C35.2728 31.5198 35.1396 31.7864 35.0487 32.0719H14.4553C14.3643 31.7863 14.231 31.5195 14.0626 31.279L24.4863 13.2247C24.5738 13.2325 24.6624 13.2365 24.7519 13.2365C24.8413 13.2365 24.9298 13.2325 25.0171 13.2247ZM14.5346 33.5571H34.9694C34.9878 33.6479 35.0105 33.7372 35.0371 33.8247L26.8617 38.5448C26.3265 37.996 25.579 37.6553 24.7519 37.6553C23.9247 37.6553 23.1772 37.9961 22.642 38.5449L14.4668 33.825C14.4934 33.7373 14.5161 33.648 14.5346 33.5571ZM12.5177 20.6882C13.72 20.3168 14.5937 19.1965 14.5937 17.8722C14.5937 17.7102 14.5806 17.5513 14.5554 17.3964L22.8976 12.5801C22.9532 12.6251 23.0104 12.6681 23.0691 12.7091L12.9106 30.3042C12.7843 30.2441 12.6531 30.1928 12.5177 30.151V20.6882Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
</svg>
),
@@ -293,7 +293,7 @@ export const days: AdventDay[] = [
fillRule="evenodd"
clipRule="evenodd"
d="M15.8035 11.9848C16.182 11.6063 16.6954 11.3937 17.2307 11.3937H28.2746V19.4289C28.2746 19.9758 28.7179 20.419 29.2647 20.419H37.2998V37.4797C37.2998 38.015 37.0872 38.5284 36.7087 38.9069C36.3302 39.2855 35.8168 39.4981 35.2815 39.4981H14.2222C13.6754 39.4981 13.2321 39.9414 13.2321 40.4882C13.2321 41.035 13.6754 41.4783 14.2222 41.4783H35.2815C36.342 41.4783 37.359 41.057 38.1089 40.3071C38.8588 39.5573 39.28 38.5402 39.28 37.4797V19.4447L39.2802 19.4289L39.28 19.4132V18.6768C39.28 18.4142 39.1757 18.1624 38.99 17.9767L30.7168 9.70345C30.5311 9.51777 30.2793 9.41345 30.0167 9.41345H29.2647H17.2307C16.1702 9.41345 15.1532 9.83473 14.4033 10.5846C13.6534 11.3345 13.2321 12.3515 13.2321 13.412V14.9162C13.2321 15.4631 13.6754 15.9063 14.2222 15.9063C14.769 15.9063 15.2123 15.4631 15.2123 14.9162V13.412C15.2123 12.8767 15.425 12.3633 15.8035 11.9848ZM30.2548 12.0419V18.4388H36.6517L30.2548 12.0419ZM12.718 27.9402C12.434 27.9402 12.2038 28.1704 12.2038 28.4544V32.9671C12.2038 33.251 12.434 33.4812 12.718 33.4812H21.7434C22.0273 33.4812 22.2575 33.251 22.2575 32.9671V28.4544C22.2575 28.1704 22.0273 27.9402 21.7434 27.9402H12.718ZM10.2236 28.4544C10.2236 27.0768 11.3404 25.96 12.718 25.96H13.2321V23.9416C13.2321 22.8812 13.6534 21.8641 14.4033 21.1142C15.1531 20.3644 16.1702 19.9431 17.2307 19.9431C18.2912 19.9431 19.3082 20.3644 20.0581 21.1142C20.808 21.8641 21.2293 22.8812 21.2293 23.9416V25.96H21.7434C23.1209 25.96 24.2377 27.0768 24.2377 28.4544V32.9671C24.2377 34.3446 23.1209 35.4614 21.7434 35.4614H12.718C11.3404 35.4614 10.2236 34.3446 10.2236 32.9671V28.4544ZM19.2491 25.96V23.9416C19.2491 23.4063 19.0364 22.893 18.6579 22.5144C18.2794 22.1359 17.766 21.9233 17.2307 21.9233C16.6954 21.9233 16.182 22.1359 15.8035 22.5144C15.425 22.893 15.2123 23.4063 15.2123 23.9416V25.96H19.2491Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
</svg>
),
@@ -322,13 +322,13 @@ export const days: AdventDay[] = [
fillRule="evenodd"
clipRule="evenodd"
d="M20.8602 9.84845C21.9728 9.65552 23.2372 9.54486 24.5612 9.53883C25.8851 9.53281 27.2656 9.63141 28.5961 9.84845C30.6978 10.1917 32.4685 11.7369 32.4685 13.7938V21.021C32.4685 23.1403 30.7494 24.8779 28.5961 24.8779H20.8602C18.2337 24.8779 16.022 27.0876 16.022 29.5928V33.0604H13.3591C11.1082 33.0604 9.7935 31.4594 9.24297 29.2124C8.50033 26.1937 8.53187 24.3897 9.24297 21.4987C9.85945 18.9765 11.8304 17.6506 14.0812 17.6506H24.7327V16.6864H16.9878V13.7938C16.9878 11.6035 17.5829 10.4159 20.8602 9.84845ZM21.8261 13.3161C21.8261 12.516 21.1728 11.8653 20.3728 11.8653C19.5699 11.8653 18.9195 12.516 18.9195 13.3161C18.9195 14.1133 19.5699 14.758 20.3728 14.758C21.1728 14.758 21.8261 14.1133 21.8261 13.3161Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M33.4347 21.0213V17.651H36.3412C38.595 17.651 39.6574 19.3031 40.2136 21.499C40.9878 24.5489 41.0222 26.8352 40.2136 29.2127C39.4309 31.5221 38.5921 33.0607 36.3412 33.0607H24.733V34.025H32.4688V36.9176C32.4688 39.1079 30.5462 40.2213 28.5964 40.7745C25.6631 41.6086 23.3122 41.4809 20.8606 40.7745C18.8133 40.1844 16.9881 38.9745 16.9881 36.9176V29.6904C16.9881 27.6108 18.7416 25.8335 20.8606 25.8335H28.5964C31.1741 25.8335 33.4347 23.6343 33.4347 21.0213ZM30.5371 37.3953C30.5371 36.5981 29.8867 35.9534 29.0838 35.9534C28.2838 35.9534 27.6305 36.5981 27.6305 37.3953C27.6305 38.1954 28.2838 38.8461 29.0838 38.8461C29.8867 38.8461 30.5371 38.1954 30.5371 37.3953Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
</svg>
),
@@ -355,13 +355,13 @@ export const days: AdventDay[] = [
>
<path
d="M23.6058 18.6694C23.964 18.2184 24.6901 18.4655 24.6988 19.0414L24.7276 23.4269H30.3422C31.368 23.4269 31.9401 24.6117 31.3022 25.4151L25.8979 32.2216C25.5397 32.6726 24.8136 32.4255 24.805 31.8496L24.7393 27.4641H19.1615C18.1357 27.4641 17.5636 26.2793 18.2015 25.4759L23.6058 18.6694Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M27.3637 9.3848C25.9128 7.9637 23.5919 7.96369 22.1409 9.38479L19.8669 11.6122C19.4813 11.9898 18.9647 12.2038 18.425 12.2094L15.242 12.2424C13.2112 12.2635 11.57 13.9047 11.549 15.9355L11.5159 19.1185C11.5103 19.6582 11.2963 20.1748 10.9187 20.5603L8.69132 22.8344C7.27022 24.2853 7.27021 26.6063 8.69131 28.0572L10.9187 30.3313C11.2963 30.7168 11.5103 31.2334 11.5159 31.7731L11.549 34.9561C11.57 36.9869 13.2112 38.6281 15.242 38.6492L18.425 38.6822C18.9647 38.6878 19.4813 38.9018 19.8669 39.2794L22.1409 41.5068C23.5919 42.9279 25.9128 42.9279 27.3637 41.5068L29.6378 39.2794C30.0234 38.9018 30.54 38.6878 31.0796 38.6822L34.2626 38.6492C36.2935 38.6281 37.9346 36.9869 37.9557 34.9561L37.9887 31.7731C37.9943 31.2334 38.2083 30.7168 38.586 30.3313L40.8133 28.0572C42.2344 26.6063 42.2344 24.2853 40.8133 22.8344L38.586 20.5603C38.2083 20.1748 37.9943 19.6582 37.9887 19.1185L37.9557 15.9355C37.9346 13.9047 36.2935 12.2635 34.2627 12.2424L31.0796 12.2094C30.54 12.2038 30.0234 11.9898 29.6378 11.6122L27.3637 9.3848ZM23.2888 10.5567C24.1019 9.76025 25.4027 9.76025 26.2159 10.5567L28.49 12.7841C29.1779 13.4579 30.0997 13.8397 31.0626 13.8497L34.2456 13.8827C35.3838 13.8946 36.3036 14.8143 36.3154 15.9525L36.3484 19.1355C36.3584 20.0984 36.7402 21.0202 37.414 21.7082L39.6414 23.9823C40.4379 24.7954 40.4379 26.0962 39.6414 26.9093L37.414 29.1834C36.7402 29.8714 36.3584 30.7932 36.3484 31.7561L36.3154 34.9391C36.3036 36.0773 35.3838 36.9971 34.2456 37.0089L31.0626 37.0419C30.0997 37.0519 29.1779 37.4337 28.49 38.1075L26.2159 40.3349C25.4027 41.1314 24.1019 41.1314 23.2888 40.3349L21.0147 38.1075C20.3267 37.4337 19.405 37.0519 18.442 37.0419L15.259 37.0089C14.1208 36.9971 13.2011 36.0773 13.1893 34.9391L13.1562 31.7561C13.1462 30.7932 12.7644 29.8714 12.0906 29.1834L9.86322 26.9093C9.06677 26.0962 9.06677 24.7954 9.86322 23.9823L12.0906 21.7082C12.7644 21.0202 13.1462 20.0984 13.1562 19.1355L13.1893 15.9525C13.2011 14.8143 14.1208 13.8946 15.259 13.8827L18.442 13.8497C19.405 13.8397 20.3267 13.4579 21.0147 12.7841L23.2888 10.5567Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
</svg>
),
apps/www/components/LaunchWeek/13/Releases/BuildStage.tsx
+4 -4
View File
@@ -1,11 +1,11 @@
import React, { FC } from 'react'
import { buildDays as days } from '~/components/LaunchWeek/13/Releases/data'
import SectionContainer from '~/components/Layouts/SectionContainer'
import BuildCard from './components/BuildCard'
import { motion, useInView } from 'framer-motion'
import React, { FC } from 'react'
import { cn } from 'ui'
import BuildCard from './components/BuildCard'
const BuildStage: FC = () => {
const ref = React.useRef(null)
const isInView = useInView(ref, { margin: '-25%', once: true })
@@ -59,7 +59,7 @@ const BuildStage: FC = () => {
fillRule="evenodd"
clipRule="evenodd"
d="M3.9999 7.55557V5.95557C3.9999 3.74643 5.79076 1.95557 7.9999 1.95557C10.209 1.95557 11.9999 3.74643 11.9999 5.95557V7.55557C12.8836 7.55557 13.5999 8.27191 13.5999 9.15557V13.1556C13.5999 14.0392 12.8836 14.7556 11.9999 14.7556H3.9999C3.11625 14.7556 2.3999 14.0392 2.3999 13.1556V9.15557C2.3999 8.27191 3.11625 7.55557 3.9999 7.55557ZM10.3999 5.95557V7.55557H5.5999V5.95557C5.5999 4.63008 6.67442 3.55557 7.9999 3.55557C9.32539 3.55557 10.3999 4.63008 10.3999 5.95557Z"
fill="hsl(var(--foreground-lighter))"
fill="var(--foreground-lighter)"
/>
</g>
</svg>
apps/www/components/LaunchWeek/13/Releases/data/lw13_build_stage.tsx
+6 -6
View File
@@ -1,8 +1,8 @@
// see apps/www/components/LaunchWeek/X/Releases/data/lwx_advent_days.tsx for reference
import { ReactNode } from 'react'
import { type ClassValue } from 'clsx'
import { GitBranch, HardDrive, BookCopy, Flag } from 'lucide-react'
import { BookCopy, Flag, GitBranch, HardDrive } from 'lucide-react'
import { ReactNode } from 'react'
export interface AdventDay {
icon?: ReactNode // use svg jsx with 34x34px viewport
@@ -47,19 +47,19 @@ export const days: AdventDay[] = [
>
<path
d="M32.3419 16.1687C26.9198 19.0762 22.2245 19.1919 20.5547 18.8863C24.0908 22.894 28.1618 23.1755 29.7552 22.8152C37.4684 22.442 40.855 13.0158 48.2546 13.2545C46.6043 11.4734 44.4237 11.05 43.5397 11.0609C39.6868 10.8581 35.3857 14.269 32.3419 16.1687Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
d="M12.6959 13.353C17.8299 18.0154 25.4872 16.6927 28.6741 15.4485C25.7928 15.1342 22.0602 11.6504 20.554 9.94776C15.0031 4.03282 7.47323 1.59481 0.253906 6.21518C4.37942 6.80454 6.27846 7.52486 12.6959 13.353Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
d="M24.5485 2.22059C21.6148 -0.555946 15.8172 0.496169 13.2852 1.36929C17.4762 1.36929 22.8022 7.61206 24.9414 10.7334C27.6059 14.037 30.8974 13.9871 32.2101 13.5493C31.1624 12.8158 29.7217 10.1441 29.1324 8.89988C27.194 5.18037 25.2688 2.89722 24.5485 2.22059Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
d="M31.1956 7.73838C30.7536 5.49555 28.9582 3.13734 27.8886 1.82766C30.4359 1.82766 35.7101 3.85375 34.6335 7.26286C34.162 9.88223 34.0878 12.196 34.1096 13.0255C32.3809 11.7158 31.4532 9.04546 31.1956 7.73838Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
</svg>
),
apps/www/components/LaunchWeek/14/Releases/BuildStage.tsx
+4 -4
View File
@@ -1,11 +1,11 @@
import React, { FC } from 'react'
import { buildDays as days } from '~/components/LaunchWeek/14/Releases/data'
import SectionContainer from '~/components/Layouts/SectionContainer'
import BuildCard from './components/BuildCard'
import { motion, useInView } from 'framer-motion'
import React, { FC } from 'react'
import { cn } from 'ui'
import BuildCard from './components/BuildCard'
const BuildStage: FC = () => {
const ref = React.useRef(null)
const isInView = useInView(ref, { margin: '-25%', once: true })
@@ -59,7 +59,7 @@ const BuildStage: FC = () => {
fillRule="evenodd"
clipRule="evenodd"
d="M3.9999 7.55557V5.95557C3.9999 3.74643 5.79076 1.95557 7.9999 1.95557C10.209 1.95557 11.9999 3.74643 11.9999 5.95557V7.55557C12.8836 7.55557 13.5999 8.27191 13.5999 9.15557V13.1556C13.5999 14.0392 12.8836 14.7556 11.9999 14.7556H3.9999C3.11625 14.7556 2.3999 14.0392 2.3999 13.1556V9.15557C2.3999 8.27191 3.11625 7.55557 3.9999 7.55557ZM10.3999 5.95557V7.55557H5.5999V5.95557C5.5999 4.63008 6.67442 3.55557 7.9999 3.55557C9.32539 3.55557 10.3999 4.63008 10.3999 5.95557Z"
fill="hsl(var(--foreground-lighter))"
fill="var(--foreground-lighter)"
/>
</g>
</svg>
apps/www/components/LaunchWeek/14/Releases/data/lw14_build_stage.tsx
+7 -7
View File
@@ -1,9 +1,9 @@
// see apps/www/components/LaunchWeek/13/Releases/data/lw13_build_stage.tsx for reference
import { ReactNode } from 'react'
import { type ClassValue } from 'clsx'
import { PRODUCT_MODULES } from 'shared-data/products'
import { AppWindow, Database, Globe } from 'lucide-react'
import { ReactNode } from 'react'
import { PRODUCT_MODULES } from 'shared-data/products'
export interface AdventDay {
icon?: ReactNode // use svg jsx with 34x34px viewport
@@ -50,11 +50,11 @@ export const days: AdventDay[] = [
fillRule="evenodd"
clipRule="evenodd"
d="M3.43881 3.75378C4.10721 1.93324 5.84055 0.723145 7.77992 0.723145H15.6033V0.734736H17.0394C23.8756 0.734736 29.4173 6.27652 29.4173 13.1127V20.1749C29.4173 20.7272 28.9696 21.1749 28.4173 21.1749C27.8651 21.1749 27.4173 20.7272 27.4173 20.1749V13.1127C27.4173 7.38109 22.771 2.73474 17.0394 2.73474H15.4396C15.3877 2.73474 15.3366 2.73078 15.2868 2.72314H7.77992C6.6793 2.72314 5.6956 3.40989 5.31627 4.44308L2.7812 11.3479C2.37375 12.4577 2.69516 13.7038 3.58855 14.4781L5.32807 15.9856C6.12772 16.6786 6.58711 17.6847 6.58709 18.7428L6.58706 21.5134C6.58702 23.8192 8.45627 25.6885 10.7621 25.6885C11.4007 25.6885 11.9184 25.1708 11.9184 24.5322L11.9185 12.1874C11.9185 9.59233 12.955 7.10481 14.7977 5.27761C15.1899 4.88873 15.823 4.8914 16.2119 5.28357C16.6008 5.67574 16.5981 6.3089 16.2059 6.69777C14.742 8.14943 13.9185 10.1257 13.9185 12.1874L13.9184 24.5323C13.9184 26.2754 12.5053 27.6885 10.7621 27.6885C7.35169 27.6885 4.58701 24.9238 4.58706 21.5134L4.58709 18.7428C4.5871 18.2647 4.37953 17.8101 4.01822 17.497L2.27871 15.9894C0.757203 14.6708 0.209829 12.5486 0.90374 10.6586L3.43881 3.75378ZM16.539 18.5225C17.0348 18.2791 17.634 18.4838 17.8773 18.9796C19.1969 21.6686 21.9313 23.3727 24.9267 23.3726L32.8043 23.3726C33.3566 23.3725 33.8043 23.8203 33.8043 24.3725C33.8044 24.9248 33.3566 25.3725 32.8044 25.3726L29.4081 25.3726C29.4142 25.4172 29.4173 25.4628 29.4173 25.5091C29.4173 29.0627 26.1868 31.4165 22.6091 31.4165C19.2966 31.4165 16.5385 29.0518 15.9271 25.9188C15.8213 25.3767 16.175 24.8516 16.717 24.7458C17.2591 24.64 17.7843 24.9936 17.89 25.5357C18.3217 27.7475 20.2716 29.4165 22.6091 29.4165C25.447 29.4165 27.4173 27.6256 27.4173 25.5091C27.4173 25.4628 27.4205 25.4172 27.4266 25.3726L24.9267 25.3726C21.1684 25.3727 17.7375 23.2346 16.0818 19.8607C15.8385 19.3649 16.0432 18.7658 16.539 18.5225Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
d="M21.7224 13.0006C21.7224 13.6338 22.2358 14.1472 22.869 14.1472C23.5022 14.1472 24.0156 13.6338 24.0156 13.0006C24.0156 12.3674 23.5022 11.854 22.869 11.854C22.2358 11.854 21.7224 12.3674 21.7224 13.0006Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
</svg>
),
@@ -81,15 +81,15 @@ export const days: AdventDay[] = [
>
<path
d="M19.3498 21C22.1112 21 24.3498 18.7614 24.3498 16C24.3498 13.2386 22.1112 11 19.3498 11C16.5884 11 14.3499 13.2386 14.3499 16C14.3499 18.7614 16.5884 21 19.3498 21Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
d="M28.3587 27.8382C28.7841 28.2636 28.7414 28.9679 28.2415 29.3027C25.6984 31.0062 22.6395 31.9997 19.3487 31.9997C16.0578 31.9997 12.9989 31.0062 10.4557 29.3027C9.9559 28.9679 9.91318 28.2636 10.3386 27.8382L13.9925 24.1843C14.3228 23.854 14.8351 23.8019 15.2508 24.0148C16.4799 24.6445 17.8728 24.9997 19.3487 24.9997C20.8245 24.9997 22.2174 24.6445 23.4465 24.0148C23.8622 23.8019 24.3745 23.854 24.7048 24.1843L28.3587 27.8382Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
d="M28.2424 2.697C28.7422 3.0318 28.7849 3.73609 28.3595 4.16149L24.7056 7.81544C24.3754 8.14569 23.863 8.19785 23.4474 7.98491C22.2183 7.35525 20.8254 7 19.3495 7C14.379 7 10.3496 11.0294 10.3496 16C10.3496 17.4759 10.7048 18.8688 11.3345 20.0979C11.5474 20.5136 11.4953 21.0259 11.165 21.3561L7.51108 25.0101C7.08568 25.4355 6.38139 25.3927 6.04659 24.8929C4.34313 22.3497 3.34961 19.2909 3.34961 16C3.34961 7.16344 10.513 0 19.3495 0C22.6404 0 25.6992 0.993529 28.2424 2.697Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
</svg>
),
apps/www/components/LaunchWeek/X/Album/Player.tsx
+2 -2
View File
@@ -37,7 +37,7 @@ const Player = () => {
onClick={isPlaying ? controls.pause : controls.play}
className="relative outline-border-muted w-7 h-7 opacity-70 hover:opacity-100 rounded-full flex items-center justify-center text-foreground-muted hover:text-foreground-lighter transition-opacity"
style={{
background: `radial-gradient(closest-side, #060809 79%, transparent 95% 100%),conic-gradient(hsl(var(--foreground-lighter)) ${progress.toFixed()}%, hsl(var(--border-muted)) 0)`,
background: `radial-gradient(closest-side, #060809 79%, transparent 95% 100%),conic-gradient(var(--foreground-lighter) ${progress.toFixed()}%, var(--border-muted) 0)`,
}}
>
<svg
@@ -48,7 +48,7 @@ const Player = () => {
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle opacity="0.1" cx="8" cy="8" r="7.5" stroke="hsl(var(--foreground-default))" />
<circle opacity="0.1" cx="8" cy="8" r="7.5" stroke="var(--foreground-default)" />
<circle
cx="8"
cy="8"
apps/www/components/LaunchWeek/X/LaunchWeekPrizeCard.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import Panel from '~/components/Panel'
import React from 'react'
import { cn } from 'ui'
import Panel from '~/components/Panel'
export default function LaunchWeekPrizeCard({
content,
@@ -19,8 +19,8 @@ export default function LaunchWeekPrizeCard({
'relative h-full flex flex-col bg-[#121516] rounded-lg overflow-hidden text-[#EDEDED]',
contentClassName
)}
shimmerToColor="hsl(var(--background-alternative-default))"
shimmerFromColor="hsl(var(--border-default))"
shimmerToColor="var(--background-alternative-default)"
shimmerFromColor="var(--border-default)"
>
{content}
</Panel>
apps/www/components/Panel/Panel.tsx
+4 -4
View File
@@ -53,18 +53,18 @@ const Panel = ({
const activeGlow =
hasActiveOnHover && isActive
? `radial-gradient(65rem circle at ${x}px ${y}px, ${
activeColor === 'brand' ? 'var(--color-brand-900)' : 'hsl(var(--border-stronger))'
activeColor === 'brand' ? 'var(--color-brand-900)' : 'var(--border-stronger)'
}, transparent), `
: ''
outerElement.style.backgroundImage = `
${activeGlow}radial-gradient(30rem circle at ${x}px ${y}px, ${
shimmerFromColor ?? 'hsl(var(--border-strong))'
}, ${shimmerToColor ?? 'hsl(var(--background-surface-300))'})`
shimmerFromColor ?? 'var(--border-strong)'
}, ${shimmerToColor ?? 'var(--background-surface-300)'})`
}
if (hasInnerShimmer) {
innerElement.style.backgroundImage = isActive
? `radial-gradient(7rem circle at ${x}px ${y}px, hsl(var(--background-surface-300)), transparent), radial-gradient(20rem circle at ${x}px ${y}px, hsl(var(--background-surface-200)), transparent)`
? `radial-gradient(7rem circle at ${x}px ${y}px, var(--background-surface-300), transparent), radial-gradient(20rem circle at ${x}px ${y}px, var(--background-surface-200), transparent)`
: ''
}
}
apps/www/components/Products/DatabaseVisual.tsx
+6 -6
View File
@@ -1,6 +1,6 @@
import React, { useEffect, useRef, useState } from 'react'
import Image from 'next/image'
import { detectBrowser, isBrowser } from 'common'
import Image from 'next/image'
import React, { useEffect, useRef, useState } from 'react'
import { cn } from 'ui'
interface Props {
@@ -88,7 +88,7 @@ const DatabaseVisual: React.FC<Props> = ({ className, hasGlow = true }) => {
viewBox="0 0 390 430"
className="absolute w-full h-full z-10 m-auto will-change-transform opacity-0 transition-opacity group-hover:opacity-100"
>
<g stroke="hsl(var(--foreground-lighter))" filter="url(#filter5_bd_467_4905)">
<g stroke="var(--foreground-lighter)" filter="url(#filter5_bd_467_4905)">
<path d="M192.144 125.816h-53.465c-8.506 0-16.159 5.17-19.334 13.061L99.0045 189.43c-3.0613 7.608-1.3448 16.306 4.3775 22.181l10.232 10.506c4.792 4.919 7.474 11.516 7.474 18.384l-.001 14.473c0 20.197 16.373 36.569 36.569 36.569 6.16 0 11.154-4.993 11.154-11.153l.001-86.241c0-18.629 7.441-36.486 20.668-49.602 2.746-2.723 7.178-2.704 9.9.041 2.722 2.745 2.703 7.178-.042 9.9-10.577 10.488-16.526 24.766-16.526 39.661l-.001 86.241c0 13.892-11.262 25.153-25.154 25.153-27.928 0-50.569-22.64-50.569-50.569l.001-14.474c0-3.218-1.257-6.309-3.503-8.615L93.353 221.38c-9.5904-9.847-12.4673-24.424-7.3366-37.176l20.3406-50.553c5.308-13.192 18.101-21.835 32.322-21.835h55.729v.084h10.339c49.104 0 88.91 39.806 88.91 88.91v50.842c0 3.866-3.134 7-7 7s-7-3.134-7-7V200.81c0-41.372-33.538-74.91-74.91-74.91H193.23c-.37 0-.732-.029-1.086-.084Z" />
<path d="M210.03 283.94c0-3.866-3.134-7-7-7s-7 3.134-7 7v3.113c0 26.959 21.854 48.814 48.813 48.814 26.351 0 47.825-20.879 48.781-46.996h24.614c3.866 0 7-3.134 7-7s-3.134-7-7-7h-26.841c-30.744 0-60.256-12.083-82.173-33.643-2.756-2.711-7.188-2.675-9.899.081-2.711 2.756-2.675 7.188.081 9.9 21.725 21.371 50.116 34.423 80.228 37.134-.679 18.629-15.995 33.524-34.791 33.524-19.227 0-34.813-15.587-34.813-34.814v-3.113ZM238.03 202.145c0 4.792 3.885 8.677 8.677 8.677s8.676-3.885 8.676-8.677-3.884-8.676-8.676-8.676-8.677 3.884-8.677 8.676Z" />
</g>
@@ -114,7 +114,7 @@ const DatabaseVisual: React.FC<Props> = ({ className, hasGlow = true }) => {
gradientTransform={gradientTransform}
>
<stop stopColor="hsl(var(--brand-default))" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" />
<stop offset="1" stopColor="var(--foreground-lighter)" />
</radialGradient>
<radialGradient
id="b"
@@ -125,7 +125,7 @@ const DatabaseVisual: React.FC<Props> = ({ className, hasGlow = true }) => {
gradientTransform={gradientTransform}
>
<stop stopColor="hsl(var(--brand-default))" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" />
<stop offset="1" stopColor="var(--foreground-lighter)" />
</radialGradient>
<radialGradient
id="c"
@@ -136,7 +136,7 @@ const DatabaseVisual: React.FC<Props> = ({ className, hasGlow = true }) => {
gradientTransform={gradientTransform}
>
<stop stopColor="hsl(var(--brand-default))" />
<stop offset="1" stopColor="hsl(var(--foreground-lighter))" />
<stop offset="1" stopColor="var(--foreground-lighter)" />
</radialGradient>
</defs>
</svg>
apps/www/components/Products/Functions/FunctionsHero.tsx
+3 -3
View File
@@ -241,9 +241,9 @@ const FunctionsHero = () => {
y2={s?.y2}
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="hsl(var(--foreground-default))" stopOpacity="0" />
<stop offset="0.5" stopColor="hsl(var(--foreground-default))" stopOpacity="0.6" />
<stop offset="1" stopColor="hsl(var(--foreground-default))" stopOpacity="0" />
<stop offset="0" stopColor="var(--foreground-default)" stopOpacity="0" />
<stop offset="0.5" stopColor="var(--foreground-default)" stopOpacity="0.6" />
<stop offset="1" stopColor="var(--foreground-default)" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
apps/www/components/Products/Functions/Metrics.tsx
+2 -2
View File
@@ -4,8 +4,8 @@ import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis } from 'recharts'
import { cn } from 'ui'
const CHART_COLORS = {
TICK: 'hsl(var(--background-overlay-hover))',
AXIS: 'hsl(var(--background-overlay-hover))',
TICK: 'var(--background-overlay-hover)',
AXIS: 'var(--background-overlay-hover)',
GREEN_1: 'hsl(var(--brand-default))', // #3ECF8E
GREEN_2: 'hsl(var(--brand-500))',
}
apps/www/components/Products/Functions/NpmEcosystem.tsx
+1 -1
View File
@@ -199,7 +199,7 @@ const NpmEcosystem = ({ isHovered = false }: { isHovered?: boolean }) => {
<div
className="absolute inset-0 z-10"
style={{
background: `radial-gradient(70% 50% at 50% 50%, transparent, hsl(var(--background-surface-75)))`,
background: `radial-gradient(70% 50% at 50% 50%, transparent, var(--background-surface-75))`,
}}
/>
apps/www/components/Products/Functions/QueryLogs.tsx
+1 -2
View File
@@ -129,8 +129,7 @@ const QueryLogs = ({ isActive, isInView }: { isActive?: boolean; isInView?: bool
isPlaying ? 'opacity-100' : 'opacity-0'
)}
style={{
background:
'linear-gradient(to top, hsl(var(--background-surface-75)) 0%, transparent 100%)',
background: 'linear-gradient(to top, var(--background-surface-75) 0%, transparent 100%)',
}}
/>
<motion.ul
apps/www/components/Products/Functions/RealtimeLogs.tsx
+2 -2
View File
@@ -75,13 +75,13 @@ const RealtimeLogs: FC<Props> = ({ isActive, isInView, className }) => {
<div className={cn('absolute inset-0 overflow-hidden', className)}>
<div
className={cn(
'visual-overlay absolute z-20 pointer-events-none inset-0 bottom-auto h-32 bg-[linear-gradient(to_bottom,hsl(var(--background-surface-75))_0%,transparent_100%)] transition-opacity duration-300',
'visual-overlay absolute z-20 pointer-events-none inset-0 bottom-auto h-32 bg-[linear-gradient(to_bottom,var(--background-surface-75)_0%,transparent_100%)] transition-opacity duration-300',
isPlaying ? 'opacity-100' : 'opacity-0'
)}
/>
<div
className={cn(
'visual-overlay absolute z-20 pointer-events-none inset-0 top-auto h-32 bg-[linear-gradient(to_top,hsl(var(--background-surface-75))_0%,transparent_100%)] transition-opacity duration-300',
'visual-overlay absolute z-20 pointer-events-none inset-0 top-auto h-32 bg-[linear-gradient(to_top,var(--background-surface-75)_0%,transparent_100%)] transition-opacity duration-300',
isPlaying ? 'opacity-100' : 'opacity-0'
)}
/>
apps/www/components/Products/RealtimeVisual.tsx
+8 -7
View File
@@ -1,7 +1,8 @@
import React, { useRef, useState } from 'react'
import Image from 'next/image'
import { isBrowser, useReducedMotion } from 'common'
import Image from 'next/image'
import React, { useRef, useState } from 'react'
import { cn } from 'ui'
interface Props {
className?: string
}
@@ -88,8 +89,8 @@ const RealtimeVisual: React.FC<Props> = ({ className }) => {
>
<path
d="M3.58385 1.69742C2.57836 0.865603 1.05859 1.58076 1.05859 2.88572V35.6296C1.05859 37.1049 2.93111 37.7381 3.8265 36.5656L12.5863 25.0943C12.6889 24.96 12.8483 24.8812 13.0173 24.8812H27.3245C28.7697 24.8812 29.4211 23.0719 28.3076 22.1507L3.58385 1.69742Z"
fill="hsl(var(--background-surface-200))"
stroke="hsl(var(--foreground-lighter))"
fill="var(--background-surface-200)"
stroke="var(--foreground-lighter)"
strokeLinejoin="round"
/>
</svg>
@@ -120,8 +121,8 @@ const RealtimeVisual: React.FC<Props> = ({ className }) => {
>
<path
d="M3.58385 1.69742C2.57836 0.865603 1.05859 1.58076 1.05859 2.88572V35.6296C1.05859 37.1049 2.93111 37.7381 3.8265 36.5656L12.5863 25.0943C12.6889 24.96 12.8483 24.8812 13.0173 24.8812H27.3245C28.7697 24.8812 29.4211 23.0719 28.3076 22.1507L3.58385 1.69742Z"
fill="hsl(var(--background-surface-200))"
stroke="hsl(var(--foreground-lighter))"
fill="var(--background-surface-200)"
stroke="var(--foreground-lighter)"
strokeLinejoin="round"
/>
</svg>
@@ -156,7 +157,7 @@ const RealtimeVisual: React.FC<Props> = ({ className }) => {
absolute pointer-events-none
w-full h-full max-h-[400px] lg:max-h-none
inset-0 top-auto
bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-surface-75))_85%)]
bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-surface-75)_85%)]
"
/>
</figure>
apps/www/components/Products/VectorAI/CustomersVisual.tsx
+59 -63
View File
@@ -1,6 +1,6 @@
import React from 'react'
import { m } from 'framer-motion'
import { DEFAULT_EASE } from '~/lib/animations'
import { m } from 'framer-motion'
import React from 'react'
const CustomersVisual = () => {
const RenderedVisual = () => (
@@ -8,7 +8,7 @@ const CustomersVisual = () => {
<div
className="absolute inset-0 mx-auto aspect-[5.13/1] h-full z-10"
style={{
background: `radial-gradient(50% 50% at 50% 50%, transparent, hsl(var(--background-alternative-default))`,
background: `radial-gradient(50% 50% at 50% 50%, transparent, var(--background-alternative-default)`,
}}
/>
<m.svg
@@ -50,7 +50,7 @@ const CustomersVisual = () => {
cy="151.574"
rx="271.124"
ry="82.5656"
fill="hsl(var(--background-alternative-default))"
fill="var(--background-alternative-default)"
/>
</g>
<path
@@ -95,7 +95,7 @@ const CustomersVisual = () => {
<g filter="url(#filter3_f_4353_100693)">
<path
d="M944.969 69.0081C925.715 47.439 896.616 35.1338 865.854 35.1338H864.811C834.915 35.1338 806.542 46.99 787.268 67.5362C808.016 51.4797 835.714 39.2051 864.673 39.2051H865.826C895.651 39.2051 924.064 52.1031 944.969 69.0081Z"
fill="hsl(var(--background-default))"
fill="var(--background-default)"
/>
</g>
{/* logo bg rays */}
@@ -231,7 +231,7 @@ const CustomersVisual = () => {
rx="303.093"
ry="68.9323"
transform="matrix(1 -0.000779452 -0.000779452 -1 562 296.168)"
fill="hsl(var(--background-alternative-default))"
fill="var(--background-alternative-default)"
/>
</g>
{/* coordinates */}
@@ -443,9 +443,9 @@ const CustomersVisual = () => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(859.159 138.208) rotate(92.2122) scale(263.179 749.441)"
>
<stop stopColor="hsl(var(--foreground-default))" stopOpacity="0" />
<stop offset="0.489999" stopColor="hsl(var(--foreground-muted))" stopOpacity="0.84" />
<stop offset="1" stopColor="hsl(var(--background-default))" stopOpacity="0" />
<stop stopColor="var(--foreground-default)" stopOpacity="0" />
<stop offset="0.489999" stopColor="var(--foreground-muted)" stopOpacity="0.84" />
<stop offset="1" stopColor="var(--background-default)" stopOpacity="0" />
</radialGradient>
<radialGradient
id="paint1_radial_4353_100693"
@@ -455,9 +455,9 @@ const CustomersVisual = () => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(859.159 136.974) rotate(-103.238) scale(44.3621 730.071)"
>
<stop stopColor="hsl(var(--foreground-default))" stopOpacity="0" />
<stop offset="0.489999" stopColor="hsl(var(--foreground-muted))" stopOpacity="0.84" />
<stop offset="1" stopColor="hsl(var(--background-default))" stopOpacity="0" />
<stop stopColor="var(--foreground-default)" stopOpacity="0" />
<stop offset="0.489999" stopColor="var(--foreground-muted)" stopOpacity="0.84" />
<stop offset="1" stopColor="var(--background-default)" stopOpacity="0" />
</radialGradient>
<radialGradient
id="paint2_radial_4353_100693"
@@ -467,9 +467,9 @@ const CustomersVisual = () => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(863.122 127.579) rotate(-92.6074) scale(137.882 462.616)"
>
<stop stopColor="hsl(var(--foreground-default))" stopOpacity="0" />
<stop offset="0.489999" stopColor="hsl(var(--foreground-muted))" stopOpacity="0.84" />
<stop offset="1" stopColor="hsl(var(--background-default))" stopOpacity="0" />
<stop stopColor="var(--foreground-default)" stopOpacity="0" />
<stop offset="0.489999" stopColor="var(--foreground-muted)" stopOpacity="0.84" />
<stop offset="1" stopColor="var(--background-default)" stopOpacity="0" />
</radialGradient>
<radialGradient
id="paint3_radial_4353_100693"
@@ -479,9 +479,9 @@ const CustomersVisual = () => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(861.752 133.22) rotate(-90) scale(115.815 675.283)"
>
<stop stopColor="hsl(var(--foreground-default))" stopOpacity="0" />
<stop offset="0.592292" stopColor="hsl(var(--foreground-muted))" stopOpacity="0.84" />
<stop offset="1" stopColor="hsl(var(--background-default))" stopOpacity="0" />
<stop stopColor="var(--foreground-default)" stopOpacity="0" />
<stop offset="0.592292" stopColor="var(--foreground-muted)" stopOpacity="0.84" />
<stop offset="1" stopColor="var(--background-default)" stopOpacity="0" />
</radialGradient>
<radialGradient
id="paint4_radial_4353_100693"
@@ -491,9 +491,9 @@ const CustomersVisual = () => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(862.511 138.502) rotate(105.433) scale(25.8224 489.043)"
>
<stop stopColor="hsl(var(--foreground-default))" stopOpacity="0" />
<stop offset="0.489999" stopColor="hsl(var(--foreground-light))" stopOpacity="0.84" />
<stop offset="1" stopColor="hsl(var(--background-default))" stopOpacity="0" />
<stop stopColor="var(--foreground-default)" stopOpacity="0" />
<stop offset="0.489999" stopColor="var(--foreground-light)" stopOpacity="0.84" />
<stop offset="1" stopColor="var(--background-default)" stopOpacity="0" />
</radialGradient>
<radialGradient
id="paint5_radial_4353_100693"
@@ -503,8 +503,8 @@ const CustomersVisual = () => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(862.32 54.7715) rotate(90) scale(193.44 193.44)"
>
<stop stopColor="hsl(var(--background-default))" />
<stop offset="1" stopColor="hsl(var(--background-alternative-default))" />
<stop stopColor="var(--background-default)" />
<stop offset="1" stopColor="var(--background-alternative-default)" />
</radialGradient>
<m.linearGradient
animate={{
@@ -535,7 +535,7 @@ const CustomersVisual = () => {
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--brand-default))" />
<stop offset="1" stopColor="hsl(var(--background-alternative-default))" />
<stop offset="1" stopColor="var(--background-alternative-default)" />
</linearGradient>
<linearGradient
id="paint7_linear_4353_100693"
@@ -547,11 +547,11 @@ const CustomersVisual = () => {
>
<stop
offset="0.331593"
stopColor="hsl(var(--background-alternative-default))"
stopColor="var(--background-alternative-default)"
stopOpacity="0"
/>
<stop offset="0.594681" stopColor="hsl(var(--foreground-lighter))" />
<stop offset="1" stopColor="hsl(var(--background-default))" />
<stop offset="0.594681" stopColor="var(--foreground-lighter)" />
<stop offset="1" stopColor="var(--background-default)" />
</linearGradient>
<linearGradient
id="paint8_linear_4353_100693"
@@ -561,9 +561,9 @@ const CustomersVisual = () => {
y2="236.32"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.0114691" stopColor="hsl(var(--background-alternative-default))" />
<stop offset="0.0114691" stopColor="var(--background-alternative-default)" />
<stop offset="0.540433" stopColor="hsl(var(--brand-default))" />
<stop offset="1" stopColor="hsl(var(--background-alternative-default))" />
<stop offset="1" stopColor="var(--background-alternative-default)" />
</linearGradient>
<linearGradient
id="paint9_linear_4353_100693"
@@ -584,9 +584,9 @@ const CustomersVisual = () => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(864.407 138.314) rotate(90) scale(55.0818)"
>
<stop stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop offset="0.522658" stopColor="hsl(var(--border-default))" />
<stop offset="1" stopColor="hsl(var(--background-overlay-default))" stopOpacity="0" />
<stop stopColor="var(--foreground-lighter)" stopOpacity="0" />
<stop offset="0.522658" stopColor="var(--border-default)" />
<stop offset="1" stopColor="var(--background-overlay-default)" stopOpacity="0" />
</radialGradient>
<linearGradient
id="paint11_linear_4353_100693"
@@ -596,12 +596,8 @@ const CustomersVisual = () => {
y2="163.315"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--foreground-light))" />
<stop
offset="1"
stopColor="hsl(var(--background-overlay-default))"
stopOpacity="0.29"
/>
<stop stopColor="var(--foreground-light)" />
<stop offset="1" stopColor="var(--background-overlay-default)" stopOpacity="0.29" />
</linearGradient>
<linearGradient
id="paint12_linear_4353_100693"
@@ -611,8 +607,8 @@ const CustomersVisual = () => {
y2="163.788"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--background-default))" />
<stop offset="1" stopColor="hsl(var(--foreground-light))" stopOpacity="0" />
<stop stopColor="var(--background-default)" />
<stop offset="1" stopColor="var(--foreground-light)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint13_linear_4353_100693"
@@ -622,8 +618,8 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--foreground-light))" />
<stop offset="0.3125" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-light)" />
<stop offset="0.3125" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint14_linear_4353_100693"
@@ -633,8 +629,8 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--foreground-light))" />
<stop offset="0.3125" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-light)" />
<stop offset="0.3125" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint15_linear_4353_100693"
@@ -644,8 +640,8 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--foreground-light))" />
<stop offset="0.3125" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-light)" />
<stop offset="0.3125" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint16_linear_4353_100693"
@@ -655,8 +651,8 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--foreground-light))" />
<stop offset="0.3125" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-light)" />
<stop offset="0.3125" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint17_linear_4353_100693"
@@ -666,8 +662,8 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--foreground-lighter))" />
<stop offset="0.3125" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-lighter)" />
<stop offset="0.3125" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint18_linear_4353_100693"
@@ -677,8 +673,8 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--foreground-lighter))" />
<stop offset="0.3125" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-lighter)" />
<stop offset="0.3125" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint19_linear_4353_100693"
@@ -688,8 +684,8 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--foreground-lighter))" />
<stop offset="0.3125" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-lighter)" />
<stop offset="0.3125" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint20_linear_4353_100693"
@@ -699,8 +695,8 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--foreground-lighter))" />
<stop offset="0.3125" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-lighter)" />
<stop offset="0.3125" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint21_linear_4353_100693"
@@ -711,7 +707,7 @@ const CustomersVisual = () => {
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--brand-default))" />
<stop offset="0.15625" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop offset="0.15625" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint22_linear_4353_100693"
@@ -721,8 +717,8 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--foreground-lighter))" />
<stop offset="0.15625" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-lighter)" />
<stop offset="0.15625" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint23_linear_4353_100693"
@@ -732,8 +728,8 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--foreground-lighter))" />
<stop offset="0.15625" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-lighter)" />
<stop offset="0.15625" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint24_linear_4353_100693"
@@ -743,8 +739,8 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--foreground-lighter))" />
<stop offset="0.15625" stopColor="hsl(var(--foreground-lighter))" stopOpacity="0" />
<stop stopColor="var(--foreground-lighter)" />
<stop offset="0.15625" stopColor="var(--foreground-lighter)" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint25_linear_4353_100693"
apps/www/components/Sections/FeaturesSection.tsx
+1 -1
View File
@@ -102,7 +102,7 @@ const Feature = ({
>
<path
d={feature.icon}
stroke="hsl(var(--foreground-default))"
stroke="var(--foreground-default)"
strokeMiterlimit="10"
strokeLinejoin="round"
strokeLinecap="round"
apps/www/components/Sections/HighlightCards.tsx
+5 -6
View File
@@ -1,9 +1,8 @@
import React, { useRef, useState } from 'react'
import { LazyMotion, domAnimation, m, useInView } from 'framer-motion'
import { INITIAL_BOTTOM, getAnimation } from '~/lib/animations'
import Panel from '~/components/Panel'
import SectionContainer from '~/components/Layouts/SectionContainer'
import Panel from '~/components/Panel'
import { getAnimation, INITIAL_BOTTOM } from '~/lib/animations'
import { domAnimation, LazyMotion, m, useInView } from 'framer-motion'
import React, { useRef, useState } from 'react'
interface Highlight {
image?: React.ReactNode
@@ -58,7 +57,7 @@ const HighlightCard = ({ highlight, index }: { highlight: Highlight; index: numb
<div
className="absolute inset-0 w-full h-full z-10"
style={{
background: `radial-gradient(100% 50% at 50% 50%, transparent, hsl(var(--background-alternative-default)))`,
background: `radial-gradient(100% 50% at 50% 50%, transparent, var(--background-alternative-default))`,
}}
/>
{highlight.image && <Img isHovered={isHovered} />}
apps/www/components/Sections/TwitterSocialProof.tsx
+4 -5
View File
@@ -1,12 +1,11 @@
import { useBreakpoint } from 'common'
import { range } from 'lib/helpers'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { cn } from 'ui'
import { TweetCard } from 'ui-patterns/TweetCard'
import { useBreakpoint } from 'common'
import React from 'react'
import { topTweets } from 'shared-data/tweets'
import { cn } from 'ui'
import { TweetCard } from 'ui-patterns/TweetCard'
interface Props {
className?: string
@@ -66,7 +65,7 @@ const TwitterSocialProof: React.FC<Props> = ({ className }) => {
absolute pointer-events-none
w-full h-full max-h-[400px] lg:max-h-none
inset-0 top-auto
lg:bg-[radial-gradient(50%_100%_at_50%_0,transparent_0%,transparent_50%,hsl(var(--background-default))_100%)]
lg:bg-[radial-gradient(50%_100%_at_50%_0,transparent_0%,transparent_50%,var(--background-default)_100%)]
"
/>
</>
apps/www/components/Sections/UseCasesSection.tsx
+6 -7
View File
@@ -1,12 +1,11 @@
import { LazyMotion, domAnimation, m, useInView } from 'framer-motion'
import SectionContainer from '~/components/Layouts/SectionContainer'
import Panel from '~/components/Panel'
import { getAnimation, INITIAL_BOTTOM } from '~/lib/animations'
import { domAnimation, LazyMotion, m, useInView } from 'framer-motion'
import { ArrowUpRight } from 'lucide-react'
import Link from 'next/link'
import { ReactNode, useRef } from 'react'
import { Button } from 'ui'
import { INITIAL_BOTTOM, getAnimation } from '~/lib/animations'
import SectionContainer from '~/components/Layouts/SectionContainer'
import Panel from '~/components/Panel'
import { ArrowUpRight } from 'lucide-react'
interface UseCase {
img?: string
@@ -75,7 +74,7 @@ const UseCase = ({
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d={useCase.icon} fillRule="evenodd" fill="hsl(var(--foreground-light))" />
<path d={useCase.icon} fillRule="evenodd" fill="var(--foreground-light)" />
</svg>
<h4 className="text-base sm:text-lg m-0">{useCase.title}</h4>
</div>
apps/www/components/SurveyResults/StateOfStartupsHeader.tsx
+2 -2
View File
@@ -12,8 +12,8 @@ const DiagonalStripes = () => (
style={{
backgroundImage: `repeating-linear-gradient(
45deg,
hsl(var(--border-muted)) 0px,
hsl(var(--border-muted)) 1px,
var(--border-muted) 0px,
var(--border-muted) 1px,
transparent 1px,
transparent 8px
)`,
apps/www/components/SurveyResults/SurveyChapter.tsx
+2
View File
@@ -1,5 +1,7 @@
import { SurveyPullQuote } from './SurveyPullQuote'
import './surveyResults.css'
import { DecorativeProgressBar } from './DecorativeProgressBar'
interface SurveyChapterProps {
apps/www/components/SurveyResults/SurveyChart.tsx
+1 -1
View File
@@ -314,7 +314,7 @@ export function SurveyChart({
ref={chartRef}
className="w-full bg-200 border-t border-muted"
style={{
background: `radial-gradient(circle at center -150%, hsl(var(--brand-300)), transparent 80%), radial-gradient(ellipse at center 230%, hsl(var(--background-surface-200)), transparent 75%)`,
background: `radial-gradient(circle at center -150%, hsl(var(--brand-300)), transparent 80%), radial-gradient(ellipse at center 230%, var(--background-surface-200), transparent 75%)`,
}}
>
<header className="px-8 py-8">
apps/www/components/UsersGrowthChart.tsx
+5 -6
View File
@@ -1,10 +1,9 @@
import { companyStats } from '~/data/company-stats'
import { motion } from 'framer-motion'
import { FC, useEffect, useMemo, useState } from 'react'
import { useMedia } from 'react-use'
import { AnimatedCounter, Badge, cn } from 'ui'
import { companyStats } from '~/data/company-stats'
const UsersGrowthChart: FC = () => {
return (
<div className="relative xl:absolute z-0 inset-0 mt-4 -mb-8 sm:mt-0 sm:-mb-20 md:-mt-20 md:-mb-36 xl:mt-0 xl:top-10 w-full aspect-[2.15/1]">
@@ -25,7 +24,7 @@ const UsersGrowthChart: FC = () => {
/>
<path
d="M11.4209 492.744C295.041 492.744 900.636 410.744 1402.27 0.744141"
stroke="hsl(var(--foreground-lighter))"
stroke="var(--foreground-lighter)"
/>
<defs>
<linearGradient
@@ -36,12 +35,12 @@ const UsersGrowthChart: FC = () => {
y2="561.839"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--border-overlay))" />
<stop offset="1" stopColor="hsl(var(--border-overlay))" stopOpacity="0" />
<stop stopColor="var(--border-overlay)" />
<stop offset="1" stopColor="var(--border-overlay)" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
<div className="absolute inset-0 w-full h-full bg-[radial-gradient(50%_50%_at_50%_50%,transparent_0%,hsl(var(--background-default))_100%)]" />
<div className="absolute inset-0 w-full h-full bg-[radial-gradient(50%_50%_at_50%_50%,transparent_0%,var(--background-default)_100%)]" />
</div>
)
}
apps/www/components/Wrapped/Visuals.tsx
+2 -2
View File
@@ -6,8 +6,8 @@ export const Stripes = () => (
style={{
backgroundImage: `repeating-linear-gradient(
45deg,
hsl(var(--border-muted)) 0px,
hsl(var(--border-muted)) 1px,
var(--border-muted) 0px,
var(--border-muted) 1px,
transparent 1px,
transparent 8px
)`,
apps/www/components/logos.tsx
+3 -3
View File
@@ -1,11 +1,11 @@
import { cn } from 'ui'
import { range } from 'lib/helpers'
import { cn } from 'ui'
interface Props {
showHeading?: boolean
className?: string
align?: 'left' | 'center'
maskBackgroundColor?: 'hsl(var(--background-default)' | 'hsl(var(--background-alternative)'
maskBackgroundColor?: 'var(--background-default)' | 'var(--background-alternative)'
}
const Logos: React.FC<Props> = ({ className, showHeading = true, align = 'center' }) => {
@@ -18,7 +18,7 @@ const Logos: React.FC<Props> = ({ className, showHeading = true, align = 'center
className={cn(
'relative w-full mx-auto max-w-4xl opacity-90 dark:opacity-70',
'overflow-hidden',
"before:content[''] before:absolute before:inset-0 before:w-full before:bg-[linear-gradient(to_right,hsl(var(--background-default))_0%,transparent_10%,transparent_90%,hsl(var(--background-default))_100%)] before:z-10",
"before:content[''] before:absolute before:inset-0 before:w-full before:bg-[linear-gradient(to_right,var(--background-default)_0%,transparent_10%,transparent_90%,var(--background-default)_100%)] before:z-10",
'flex flex-nowrap justify-center',
'px-5 lg:px-12',
align === 'left' ? 'justify-start ml-0' : 'justify-center',
apps/www/data/aws-reinvent-2025.tsx
+2 -2
View File
@@ -250,7 +250,7 @@ const data = {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
bg-[linear-gradient(to_bottom,transparent_0%,hsl(var(--background-default))_100%)]
bg-[linear-gradient(to_bottom,transparent_0%,var(--background-default)_100%)]
"
/>
</div>
@@ -316,7 +316,7 @@ const data = {
),
className: 'border-l-0! sm:border-l!',
image: (
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-default))_75%)]" />
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-default)_75%)]" />
),
},
{
apps/www/data/ga.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { KeyIcon, RewindIcon, ShieldCheckIcon, UserGroupIcon } from '@heroicons/react/outline'
import { companyStats } from 'data/company-stats'
import { Activity } from 'lucide-react'
import { IconDiscord, IconGitHubSolid, IconTwitterX, IconYoutubeSolid } from 'ui'
import { companyStats } from 'data/company-stats'
export const data = (isDark: boolean) => ({
hero: {
@@ -152,7 +152,7 @@ We're committed to our Free Plan - we know the importance of this for testing ho
strokeLinecap: 'butt',
strokeLinejoin: 'miter',
strokeMiterlimit: 10,
fill: 'hsl(var(--background-default) / 1)',
fill: 'oklch(from var(--background-default) l c h / 1)',
fillRule: 'nonzero',
opacity: 1,
}}
apps/www/data/open-source/contributing/supasquad.utils.tsx
+2 -2
View File
@@ -216,8 +216,8 @@ export const getEditors: (isXs: boolean) => FrameworkLinkProps[] = (isXs) => [
y2="-11.8172"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--foreground-default))" stopOpacity="0.5" />
<stop offset="1" stopColor="hsl(var(--foreground-default))" />
<stop stopColor="var(--foreground-default)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--foreground-default)" />
</linearGradient>
<image
id="image0_2981_701"
apps/www/data/solutions/agencies.tsx
+4 -4
View File
@@ -270,7 +270,7 @@ const data: {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
bg-[linear-gradient(to_bottom,transparent_0%,hsl(var(--background-default))_100%)]
bg-[linear-gradient(to_bottom,transparent_0%,var(--background-default)_100%)]
"
/>
</div>
@@ -335,7 +335,7 @@ const data: {
),
className: 'border-l-0! sm:border-l!',
image: (
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-default))_75%)]" />
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-default)_75%)]" />
),
},
{
@@ -592,7 +592,7 @@ const data: {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-default))_75%)]
bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-default)_75%)]
"
/>
<Image
@@ -623,7 +623,7 @@ const data: {
<RealtimeLogs
isActive={false}
isInView={true}
className="h-3/5 bottom-0 top-auto [&_.visual-overlay]:bg-[linear-gradient(to_top,hsl(var(--background-default))_0%,transparent_100%)]!"
className="h-3/5 bottom-0 top-auto [&_.visual-overlay]:bg-[linear-gradient(to_top,var(--background-default)_0%,transparent_100%)]!"
/>
),
},
apps/www/data/solutions/ai-builders.tsx
+28 -42
View File
@@ -166,11 +166,11 @@ const data: {
fillRule="evenodd"
clipRule="evenodd"
d="M3.43881 3.75378C4.10721 1.93324 5.84055 0.723145 7.77992 0.723145H15.6033V0.734736H17.0394C23.8756 0.734736 29.4173 6.27652 29.4173 13.1127V20.1749C29.4173 20.7272 28.9696 21.1749 28.4173 21.1749C27.8651 21.1749 27.4173 20.7272 27.4173 20.1749V13.1127C27.4173 7.38109 22.771 2.73474 17.0394 2.73474H15.4396C15.3877 2.73474 15.3366 2.73078 15.2868 2.72314H7.77992C6.6793 2.72314 5.6956 3.40989 5.31627 4.44308L2.7812 11.3479C2.37375 12.4577 2.69516 13.7038 3.58855 14.4781L5.32807 15.9856C6.12772 16.6786 6.58711 17.6847 6.58709 18.7428L6.58706 21.5134C6.58702 23.8192 8.45627 25.6885 10.7621 25.6885C11.4007 25.6885 11.9184 25.1708 11.9184 24.5322L11.9185 12.1874C11.9185 9.59233 12.955 7.10481 14.7977 5.27761C15.1899 4.88873 15.823 4.8914 16.2119 5.28357C16.6008 5.67574 16.5981 6.3089 16.2059 6.69777C14.742 8.14943 13.9185 10.1257 13.9185 12.1874L13.9184 24.5323C13.9184 26.2754 12.5053 27.6885 10.7621 27.6885C7.35169 27.6885 4.58701 24.9238 4.58706 21.5134L4.58709 18.7428C4.5871 18.2647 4.37953 17.8101 4.01822 17.497L2.27871 15.9894C0.757203 14.6708 0.209829 12.5486 0.90374 10.6586L3.43881 3.75378ZM16.539 18.5225C17.0348 18.2791 17.634 18.4838 17.8773 18.9796C19.1969 21.6686 21.9313 23.3727 24.9267 23.3726L32.8043 23.3726C33.3566 23.3725 33.8043 23.8203 33.8043 24.3725C33.8044 24.9248 33.3566 25.3725 32.8044 25.3726L29.4081 25.3726C29.4142 25.4172 29.4173 25.4628 29.4173 25.5091C29.4173 29.0627 26.1868 31.4165 22.6091 31.4165C19.2966 31.4165 16.5385 29.0518 15.9271 25.9188C15.8213 25.3767 16.175 24.8516 16.717 24.7458C17.2591 24.64 17.7843 24.9936 17.89 25.5357C18.3217 27.7475 20.2716 29.4165 22.6091 29.4165C25.447 29.4165 27.4173 27.6256 27.4173 25.5091C27.4173 25.4628 27.4205 25.4172 27.4266 25.3726L24.9267 25.3726C21.1684 25.3727 17.7375 23.2346 16.0818 19.8607C15.8385 19.3649 16.0432 18.7658 16.539 18.5225Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<path
d="M21.7224 13.0006C21.7224 13.6338 22.2358 14.1472 22.869 14.1472C23.5022 14.1472 24.0156 13.6338 24.0156 13.0006C24.0156 12.3674 23.5022 11.854 22.869 11.854C22.2358 11.854 21.7224 12.3674 21.7224 13.0006Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
</svg>
),
@@ -239,40 +239,33 @@ const data: {
width="39"
height="39"
rx="7.5"
fill="hsl(var(--background-alternative))"
/>
<rect
x="0.5"
y="0.5"
width="39"
height="39"
rx="7.5"
stroke="hsl(var(--border-default))"
fill="var(--background-alternative)"
/>
<rect x="0.5" y="0.5" width="39" height="39" rx="7.5" stroke="var(--border-default)" />
<path
d="M15.0719 18.1621H24.9448V22.7588H15.0719V18.1621Z"
stroke="hsl(var(--foreground-lighter))"
stroke="var(--foreground-lighter)"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14.2539 23.9102C14.2539 23.2755 14.7684 22.761 15.4031 22.761H24.5964C25.2311 22.761 25.7456 23.2755 25.7456 23.9102V26.2085C25.7456 26.8432 25.2311 27.3577 24.5964 27.3577H15.4031C14.7684 27.3577 14.2539 26.8432 14.2539 26.2085V23.9102Z"
stroke="hsl(var(--foreground-lighter))"
stroke="var(--foreground-lighter)"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14.2539 14.7148C14.2539 14.0802 14.7684 13.5657 15.4031 13.5657H24.5964C25.2311 13.5657 25.7456 14.0802 25.7456 14.7148V17.0132C25.7456 17.6479 25.2311 18.1624 24.5964 18.1624H15.4031C14.7684 18.1624 14.2539 17.6479 14.2539 17.0132V14.7148Z"
stroke="hsl(var(--foreground-lighter))"
stroke="var(--foreground-lighter)"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M53.008 24.608H55.328C57.424 24.608 59.184 23.2 59.184 20.352C59.184 17.488 57.456 16.048 55.36 16.048H53.008V24.608ZM55.376 26H51.44V14.656H55.408C58.288 14.656 60.8 16.624 60.8 20.352C60.8 24.064 58.256 26 55.376 26ZM62.3156 23.936C62.3156 22.56 63.3236 21.792 64.6516 21.6L66.7316 21.296C67.1956 21.232 67.3236 20.992 67.3236 20.72C67.3236 19.968 66.8276 19.344 65.6596 19.344C64.6036 19.344 64.0116 20 63.9156 20.896L62.4756 20.56C62.6356 19.088 63.9636 18.064 65.6276 18.064C67.9316 18.064 68.8276 19.376 68.8276 20.88V24.736C68.8276 25.408 68.8916 25.808 68.9236 26H67.4516C67.4196 25.808 67.3716 25.52 67.3716 24.96C67.0356 25.504 66.2676 26.24 64.8916 26.24C63.3236 26.24 62.3156 25.152 62.3156 23.936ZM65.0996 24.976C66.3316 24.976 67.3236 24.384 67.3236 22.704V22.352L64.9716 22.704C64.3316 22.8 63.8516 23.168 63.8516 23.856C63.8516 24.432 64.3316 24.976 65.0996 24.976ZM73.1866 15.872V18.304H74.8506V19.664H73.1866V23.664C73.1866 24.368 73.4746 24.72 74.2586 24.72C74.4506 24.72 74.7226 24.688 74.8506 24.656V25.936C74.7226 25.984 74.3386 26.08 73.8266 26.08C72.5146 26.08 71.6826 25.28 71.6826 23.888V19.664H70.2106V18.304H70.6266C71.4586 18.304 71.8106 17.792 71.8106 17.12V15.872H73.1866ZM76.3781 23.936C76.3781 22.56 77.3861 21.792 78.7141 21.6L80.7941 21.296C81.2581 21.232 81.3861 20.992 81.3861 20.72C81.3861 19.968 80.8901 19.344 79.7221 19.344C78.6661 19.344 78.0741 20 77.9781 20.896L76.5381 20.56C76.6981 19.088 78.0261 18.064 79.6901 18.064C81.9941 18.064 82.8901 19.376 82.8901 20.88V24.736C82.8901 25.408 82.9541 25.808 82.9861 26H81.5141C81.4821 25.808 81.4341 25.52 81.4341 24.96C81.0981 25.504 80.3301 26.24 78.9541 26.24C77.3861 26.24 76.3781 25.152 76.3781 23.936ZM79.1621 24.976C80.3941 24.976 81.3861 24.384 81.3861 22.704V22.352L79.0341 22.704C78.3941 22.8 77.9141 23.168 77.9141 23.856C77.9141 24.432 78.3941 24.976 79.1621 24.976ZM86.7211 26H85.2331V14.416H86.7211V19.392C87.0891 18.704 87.9851 18.08 89.2651 18.08C91.6011 18.08 92.8011 19.872 92.8011 22.112C92.8011 24.4 91.5051 26.208 89.2171 26.208C88.0811 26.208 87.2011 25.712 86.7211 24.88V26ZM91.2651 22.112C91.2651 20.448 90.3851 19.408 88.9931 19.408C87.6651 19.408 86.7051 20.448 86.7051 22.112C86.7051 23.776 87.6651 24.864 88.9931 24.864C90.3691 24.864 91.2651 23.776 91.2651 22.112ZM94.2375 23.936C94.2375 22.56 95.2455 21.792 96.5735 21.6L98.6535 21.296C99.1175 21.232 99.2455 20.992 99.2455 20.72C99.2455 19.968 98.7495 19.344 97.5815 19.344C96.5255 19.344 95.9335 20 95.8375 20.896L94.3975 20.56C94.5575 19.088 95.8855 18.064 97.5495 18.064C99.8535 18.064 100.75 19.376 100.75 20.88V24.736C100.75 25.408 100.814 25.808 100.846 26H99.3735C99.3415 25.808 99.2935 25.52 99.2935 24.96C98.9575 25.504 98.1895 26.24 96.8135 26.24C95.2455 26.24 94.2375 25.152 94.2375 23.936ZM97.0215 24.976C98.2535 24.976 99.2455 24.384 99.2455 22.704V22.352L96.8935 22.704C96.2535 22.8 95.7735 23.168 95.7735 23.856C95.7735 24.432 96.2535 24.976 97.0215 24.976ZM102.373 24L103.733 23.52C103.829 24.32 104.437 24.96 105.525 24.96C106.373 24.96 106.837 24.48 106.837 23.936C106.837 23.456 106.485 23.088 105.845 22.944L104.533 22.656C103.333 22.4 102.613 21.584 102.613 20.496C102.613 19.184 103.845 18.064 105.349 18.064C107.461 18.064 108.117 19.44 108.277 20.128L106.949 20.624C106.885 20.224 106.565 19.344 105.349 19.344C104.581 19.344 104.069 19.84 104.069 20.368C104.069 20.832 104.357 21.168 104.949 21.296L106.197 21.568C107.589 21.872 108.325 22.72 108.325 23.856C108.325 24.944 107.413 26.24 105.509 26.24C103.397 26.24 102.501 24.88 102.373 24ZM111.225 21.36H115.433C115.401 20.256 114.681 19.392 113.321 19.392C112.057 19.392 111.289 20.368 111.225 21.36ZM115.657 23.36L116.953 23.808C116.521 25.168 115.289 26.24 113.497 26.24C111.433 26.24 109.625 24.736 109.625 22.128C109.625 19.712 111.369 18.064 113.305 18.064C115.673 18.064 117.001 19.696 117.001 22.096C117.001 22.288 116.985 22.48 116.969 22.576H111.177C111.209 23.952 112.201 24.912 113.497 24.912C114.745 24.912 115.369 24.224 115.657 23.36Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<rect
x="0.5"
@@ -280,19 +273,12 @@ const data: {
width="39"
height="39"
rx="7.5"
fill="hsl(var(--background-alternative))"
/>
<rect
x="0.5"
y="60.5"
width="39"
height="39"
rx="7.5"
stroke="hsl(var(--border-default))"
fill="var(--background-alternative)"
/>
<rect x="0.5" y="60.5" width="39" height="39" rx="7.5" stroke="var(--border-default)" />
<path
d="M14.9304 82.2214H20.5554M14.9304 82.2214V84.4714H20.5554V82.2214M14.9304 82.2214V79.9714H20.5554V82.2214M22.2495 76.625V74.375C22.2495 73.1324 21.2422 72.125 19.9995 72.125C18.7569 72.125 17.7495 73.1324 17.7495 74.375V76.625M14.9063 78.9233L14.9063 84.4517C14.9063 85.721 15.9353 86.75 17.2046 86.75H22.7329C24.0022 86.75 25.0313 85.721 25.0313 84.4517V78.9233C25.0313 77.654 24.0022 76.625 22.7329 76.625L17.2046 76.625C15.9353 76.625 14.9063 77.654 14.9063 78.9233Z"
stroke="hsl(var(--foreground-lighter))"
stroke="var(--foreground-lighter)"
strokeWidth="1.14917"
strokeMiterlimit="10"
strokeLinecap="round"
@@ -300,7 +286,7 @@ const data: {
/>
<path
d="M59.296 86L58.064 82.832H53.04L51.84 86H50.16L54.672 74.656H56.48L60.992 86H59.296ZM55.536 76.288L53.6 81.376H57.504L55.536 76.288ZM67.102 85.072C66.686 85.872 65.726 86.24 64.83 86.24C63.038 86.24 61.95 84.896 61.95 83.152V78.304H63.454V82.928C63.454 83.984 63.934 84.912 65.198 84.912C66.414 84.912 67.022 84.112 67.022 82.944V78.304H68.526V84.576C68.526 85.184 68.574 85.728 68.606 86H67.166C67.134 85.824 67.102 85.392 67.102 85.072ZM73.1085 75.872V78.304H74.7725V79.664H73.1085V83.664C73.1085 84.368 73.3965 84.72 74.1805 84.72C74.3725 84.72 74.6445 84.688 74.7725 84.656V85.936C74.6445 85.984 74.2605 86.08 73.7485 86.08C72.4365 86.08 71.6045 85.28 71.6045 83.888V79.664H70.1325V78.304H70.5485C71.3805 78.304 71.7325 77.792 71.7325 77.12V75.872H73.1085ZM78.284 81.472V86H76.78V74.416H78.284V79.2C78.844 78.384 79.74 78.08 80.62 78.08C82.46 78.08 83.372 79.408 83.372 81.12V86H81.868V81.376C81.868 80.304 81.42 79.44 80.076 79.44C78.924 79.44 78.316 80.336 78.284 81.472Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<rect
x="0.5"
@@ -308,7 +294,7 @@ const data: {
width="39"
height="39"
rx="7.5"
fill="hsl(var(--background-alternative))"
fill="var(--background-alternative)"
/>
<rect
x="0.5"
@@ -316,11 +302,11 @@ const data: {
width="39"
height="39"
rx="7.5"
stroke="hsl(var(--border-default))"
stroke="var(--border-default)"
/>
<path
d="M16.8056 146.151C17.7616 146.649 18.8482 146.93 20.0005 146.93C23.8279 146.93 26.9307 143.827 26.9307 140C26.9307 138.845 26.6479 137.755 26.1478 136.797M23.2356 133.87C22.2699 133.359 21.169 133.07 20.0005 133.07C16.1731 133.07 13.0703 136.173 13.0703 140C13.0703 141.179 13.365 142.29 13.8847 143.262M13.8847 143.262C13.6053 143.604 13.4377 144.04 13.4377 144.516C13.4377 145.609 14.3242 146.496 15.4178 146.496C16.5113 146.496 17.3978 145.609 17.3978 144.516C17.3978 143.422 16.5113 142.535 15.4178 142.535C14.7997 142.535 14.2478 142.819 13.8847 143.262ZM26.6007 135.477C26.6007 136.571 25.7142 137.458 24.6206 137.458C23.5271 137.458 22.6406 136.571 22.6406 135.477C22.6406 134.384 23.5271 133.497 24.6206 133.497C25.7142 133.497 26.6007 134.384 26.6007 135.477ZM24.4556 140C24.4556 142.46 22.461 144.455 20.0005 144.455C17.54 144.455 15.5454 142.46 15.5454 140C15.5454 137.54 17.54 135.545 20.0005 135.545C22.461 135.545 24.4556 137.54 24.4556 140Z"
stroke="hsl(var(--foreground-lighter))"
stroke="var(--foreground-lighter)"
strokeWidth="1.14917"
strokeMiterlimit="10"
strokeLinecap="round"
@@ -328,7 +314,7 @@ const data: {
/>
<path
d="M58.336 146H51.44V134.656H58.336V136.112H53.008V139.6H57.84V141.072H53.008V144.544H58.336V146ZM61.1604 142.128C61.1604 143.712 61.9764 144.88 63.4164 144.88C64.7924 144.88 65.6404 143.68 65.6404 142.096C65.6404 140.512 64.8084 139.424 63.4324 139.424C62.0564 139.424 61.1604 140.544 61.1604 142.128ZM65.6564 144.96V144.832C65.2884 145.568 64.4724 146.208 63.2724 146.208C61.0164 146.208 59.6244 144.416 59.6244 142.128C59.6244 139.952 61.0964 138.096 63.2724 138.096C64.6324 138.096 65.3684 138.768 65.6244 139.392V134.416H67.1124V144.576C67.1124 145.312 67.1764 145.872 67.1924 146H65.7364C65.7044 145.824 65.6564 145.424 65.6564 144.96ZM69.1106 146.416L70.5666 146.08C70.6786 147.152 71.4946 147.968 72.6626 147.968C74.2786 147.968 75.0146 147.136 75.0146 145.472V144.368C74.6466 145.072 73.8146 145.632 72.6626 145.632C70.6146 145.632 69.1266 144.08 69.1266 141.904C69.1266 139.824 70.5506 138.16 72.6626 138.16C73.8466 138.16 74.6466 138.608 75.0306 139.376V138.304H76.5186V145.424C76.5186 147.376 75.5586 149.28 72.6626 149.28C70.7426 149.28 69.3026 148.064 69.1106 146.416ZM72.8866 144.368C74.1826 144.368 75.0786 143.392 75.0786 141.904C75.0786 140.416 74.1826 139.44 72.8866 139.44C71.5586 139.44 70.6626 140.416 70.6626 141.904C70.6626 143.408 71.5266 144.368 72.8866 144.368ZM79.8966 141.36H84.1046C84.0726 140.256 83.3526 139.392 81.9926 139.392C80.7286 139.392 79.9606 140.368 79.8966 141.36ZM84.3286 143.36L85.6246 143.808C85.1926 145.168 83.9606 146.24 82.1686 146.24C80.1046 146.24 78.2966 144.736 78.2966 142.128C78.2966 139.712 80.0406 138.064 81.9766 138.064C84.3446 138.064 85.6726 139.696 85.6726 142.096C85.6726 142.288 85.6566 142.48 85.6406 142.576H79.8486C79.8806 143.952 80.8726 144.912 82.1686 144.912C83.4166 144.912 84.0406 144.224 84.3286 143.36ZM93.3205 146H91.7525V134.656H98.6485V136.112H93.3205V139.76H98.1525V141.232H93.3205V146ZM104.758 145.072C104.342 145.872 103.382 146.24 102.486 146.24C100.694 146.24 99.6063 144.896 99.6063 143.152V138.304H101.11V142.928C101.11 143.984 101.59 144.912 102.854 144.912C104.07 144.912 104.678 144.112 104.678 142.944V138.304H106.182V144.576C106.182 145.184 106.23 145.728 106.262 146H104.822C104.79 145.824 104.758 145.392 104.758 145.072ZM110.253 141.552V146H108.749V138.304H110.221V139.408C110.781 138.448 111.693 138.08 112.589 138.08C114.429 138.08 115.341 139.408 115.341 141.12V146H113.837V141.376C113.837 140.304 113.389 139.44 112.045 139.44C110.861 139.44 110.253 140.384 110.253 141.552ZM120.965 139.456C119.749 139.456 118.629 140.352 118.629 142.144C118.629 143.904 119.733 144.848 120.981 144.848C122.421 144.848 122.949 143.872 123.125 143.264L124.453 143.84C124.085 144.944 122.981 146.24 120.981 146.24C118.741 146.24 117.093 144.48 117.093 142.144C117.093 139.744 118.773 138.064 120.965 138.064C123.013 138.064 124.069 139.344 124.389 140.512L123.029 141.088C122.837 140.336 122.277 139.456 120.965 139.456ZM128.234 135.872V138.304H129.898V139.664H128.234V143.664C128.234 144.368 128.522 144.72 129.306 144.72C129.498 144.72 129.77 144.688 129.898 144.656V145.936C129.77 145.984 129.386 146.08 128.874 146.08C127.562 146.08 126.73 145.28 126.73 143.888V139.664H125.258V138.304H125.674C126.506 138.304 126.858 137.792 126.858 137.12V135.872H128.234ZM133.393 146H131.905V138.304H133.393V146ZM131.569 135.392C131.569 134.784 132.049 134.304 132.641 134.304C133.249 134.304 133.729 134.784 133.729 135.392C133.729 135.984 133.249 136.464 132.641 136.464C132.049 136.464 131.569 135.984 131.569 135.392ZM139.248 144.896C140.528 144.896 141.648 143.936 141.648 142.144C141.648 140.368 140.528 139.408 139.248 139.408C137.968 139.408 136.848 140.368 136.848 142.144C136.848 143.936 137.968 144.896 139.248 144.896ZM139.248 138.064C141.552 138.064 143.184 139.808 143.184 142.144C143.184 144.496 141.552 146.24 139.248 146.24C136.944 146.24 135.312 144.496 135.312 142.144C135.312 139.808 136.944 138.064 139.248 138.064ZM146.612 141.552V146H145.108V138.304H146.58V139.408C147.14 138.448 148.052 138.08 148.948 138.08C150.788 138.08 151.7 139.408 151.7 141.12V146H150.196V141.376C150.196 140.304 149.748 139.44 148.404 139.44C147.22 139.44 146.612 140.384 146.612 141.552ZM153.373 144L154.733 143.52C154.829 144.32 155.437 144.96 156.525 144.96C157.373 144.96 157.837 144.48 157.837 143.936C157.837 143.456 157.485 143.088 156.845 142.944L155.533 142.656C154.333 142.4 153.613 141.584 153.613 140.496C153.613 139.184 154.845 138.064 156.349 138.064C158.461 138.064 159.117 139.44 159.277 140.128L157.949 140.624C157.885 140.224 157.565 139.344 156.349 139.344C155.581 139.344 155.069 139.84 155.069 140.368C155.069 140.832 155.357 141.168 155.949 141.296L157.197 141.568C158.589 141.872 159.325 142.72 159.325 143.856C159.325 144.944 158.413 146.24 156.509 146.24C154.397 146.24 153.501 144.88 153.373 144Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<rect
x="214.5"
@@ -336,7 +322,7 @@ const data: {
width="39"
height="39"
rx="7.5"
fill="hsl(var(--background-alternative))"
fill="var(--background-alternative)"
/>
<rect
x="214.5"
@@ -344,11 +330,11 @@ const data: {
width="39"
height="39"
rx="7.5"
stroke="hsl(var(--border-default))"
stroke="var(--border-default)"
/>
<path
d="M239.627 19.4473V17.3013L235.557 13.2503H229.526C228.891 13.2503 228.377 13.7648 228.377 14.3994V17.7497M239.587 17.2825L235.555 13.25L235.555 16.1334C235.555 16.768 236.069 17.2825 236.704 17.2825L239.587 17.2825ZM229.989 17.7497H228.372C227.737 17.7497 227.223 18.2642 227.223 18.8989V24.4514C227.223 25.7207 228.252 26.7497 229.521 26.7497H238.424C239.694 26.7497 240.723 25.7207 240.723 24.4514V20.5964C240.723 19.9618 240.208 19.4473 239.573 19.4473H232.655C232.354 19.4473 232.064 19.3288 231.849 19.1173L230.795 18.0797C230.58 17.8682 230.29 17.7497 229.989 17.7497Z"
stroke="hsl(var(--foreground-lighter))"
stroke="var(--foreground-lighter)"
strokeWidth="1.14917"
strokeMiterlimit="10"
strokeLinecap="round"
@@ -356,7 +342,7 @@ const data: {
/>
<path
d="M272.672 17.232L271.264 17.728C271.136 16.912 270.448 15.792 268.864 15.792C267.584 15.792 266.672 16.624 266.672 17.68C266.672 18.496 267.168 19.12 268.128 19.328L269.824 19.696C271.712 20.112 272.768 21.296 272.768 22.88C272.768 24.64 271.264 26.24 268.848 26.24C266.112 26.24 264.816 24.48 264.608 22.864L266.112 22.384C266.224 23.648 267.12 24.816 268.832 24.816C270.4 24.816 271.168 24 271.168 23.008C271.168 22.192 270.608 21.488 269.472 21.248L267.856 20.896C266.24 20.544 265.088 19.488 265.088 17.792C265.088 16.016 266.736 14.416 268.832 14.416C271.392 14.416 272.416 16 272.672 17.232ZM276.624 15.872V18.304H278.288V19.664H276.624V23.664C276.624 24.368 276.912 24.72 277.696 24.72C277.888 24.72 278.16 24.688 278.288 24.656V25.936C278.16 25.984 277.776 26.08 277.264 26.08C275.952 26.08 275.12 25.28 275.12 23.888V19.664H273.648V18.304H274.064C274.896 18.304 275.248 17.792 275.248 17.12V15.872H276.624ZM283.514 24.896C284.794 24.896 285.914 23.936 285.914 22.144C285.914 20.368 284.794 19.408 283.514 19.408C282.234 19.408 281.114 20.368 281.114 22.144C281.114 23.936 282.234 24.896 283.514 24.896ZM283.514 18.064C285.818 18.064 287.45 19.808 287.45 22.144C287.45 24.496 285.818 26.24 283.514 26.24C281.21 26.24 279.578 24.496 279.578 22.144C279.578 19.808 281.21 18.064 283.514 18.064ZM293.646 18.224V19.824C293.422 19.792 293.198 19.776 292.99 19.776C291.726 19.776 290.878 20.448 290.878 22.144V26H289.374V18.304H290.846V19.648C291.406 18.464 292.366 18.176 293.15 18.176C293.358 18.176 293.566 18.208 293.646 18.224ZM294.769 23.936C294.769 22.56 295.777 21.792 297.105 21.6L299.185 21.296C299.649 21.232 299.777 20.992 299.777 20.72C299.777 19.968 299.281 19.344 298.113 19.344C297.057 19.344 296.465 20 296.369 20.896L294.929 20.56C295.089 19.088 296.417 18.064 298.081 18.064C300.385 18.064 301.281 19.376 301.281 20.88V24.736C301.281 25.408 301.345 25.808 301.377 26H299.905C299.873 25.808 299.825 25.52 299.825 24.96C299.489 25.504 298.721 26.24 297.345 26.24C295.777 26.24 294.769 25.152 294.769 23.936ZM297.553 24.976C298.785 24.976 299.777 24.384 299.777 22.704V22.352L297.425 22.704C296.785 22.8 296.305 23.168 296.305 23.856C296.305 24.432 296.785 24.976 297.553 24.976ZM303.064 26.416L304.52 26.08C304.632 27.152 305.448 27.968 306.616 27.968C308.232 27.968 308.968 27.136 308.968 25.472V24.368C308.6 25.072 307.768 25.632 306.616 25.632C304.568 25.632 303.08 24.08 303.08 21.904C303.08 19.824 304.504 18.16 306.616 18.16C307.8 18.16 308.6 18.608 308.984 19.376V18.304H310.472V25.424C310.472 27.376 309.512 29.28 306.616 29.28C304.696 29.28 303.256 28.064 303.064 26.416ZM306.84 24.368C308.136 24.368 309.032 23.392 309.032 21.904C309.032 20.416 308.136 19.44 306.84 19.44C305.512 19.44 304.616 20.416 304.616 21.904C304.616 23.408 305.48 24.368 306.84 24.368ZM313.85 21.36H318.058C318.026 20.256 317.306 19.392 315.946 19.392C314.682 19.392 313.914 20.368 313.85 21.36ZM318.282 23.36L319.578 23.808C319.146 25.168 317.914 26.24 316.122 26.24C314.058 26.24 312.25 24.736 312.25 22.128C312.25 19.712 313.994 18.064 315.93 18.064C318.298 18.064 319.626 19.696 319.626 22.096C319.626 22.288 319.61 22.48 319.594 22.576H313.802C313.834 23.952 314.826 24.912 316.122 24.912C317.37 24.912 317.994 24.224 318.282 23.36Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<rect
x="214.5"
@@ -364,7 +350,7 @@ const data: {
width="39"
height="39"
rx="7.5"
fill="hsl(var(--background-alternative))"
fill="var(--background-alternative)"
/>
<rect
x="214.5"
@@ -372,11 +358,11 @@ const data: {
width="39"
height="39"
rx="7.5"
stroke="hsl(var(--border-default))"
stroke="var(--border-default)"
/>
<path
d="M231.032 72.1074V74.9124M228.933 74.9124L226.536 72.4418M228.933 76.8532H226.184M236.534 82.5839L240.243 81.6607C240.774 81.5284 240.837 80.7977 240.335 80.5772L231.475 76.6811C230.996 76.4704 230.507 76.9578 230.717 77.4373L234.543 86.1868C234.762 86.687 235.489 86.6289 235.626 86.1002L236.534 82.5839Z"
stroke="hsl(var(--foreground-lighter))"
stroke="var(--foreground-lighter)"
strokeWidth="1.14917"
strokeMiterlimit="10"
strokeLinecap="round"
@@ -384,7 +370,7 @@ const data: {
/>
<path
d="M271.312 86L268.72 81.36H267.024V86H265.44V74.656H269.712C271.856 74.656 273.184 76.16 273.184 78.032C273.184 79.664 272.144 80.928 270.432 81.248L273.136 86H271.312ZM267.024 79.952H269.424C270.704 79.952 271.568 79.2 271.568 78.032C271.568 76.832 270.704 76.064 269.424 76.064H267.024V79.952ZM275.85 81.36H280.058C280.026 80.256 279.306 79.392 277.946 79.392C276.682 79.392 275.914 80.368 275.85 81.36ZM280.282 83.36L281.578 83.808C281.146 85.168 279.914 86.24 278.122 86.24C276.058 86.24 274.25 84.736 274.25 82.128C274.25 79.712 275.994 78.064 277.93 78.064C280.298 78.064 281.626 79.696 281.626 82.096C281.626 82.288 281.61 82.48 281.594 82.576H275.802C275.834 83.952 276.826 84.912 278.122 84.912C279.37 84.912 279.994 84.224 280.282 83.36ZM283.066 83.936C283.066 82.56 284.074 81.792 285.402 81.6L287.482 81.296C287.946 81.232 288.074 80.992 288.074 80.72C288.074 79.968 287.578 79.344 286.41 79.344C285.354 79.344 284.762 80 284.666 80.896L283.226 80.56C283.386 79.088 284.714 78.064 286.378 78.064C288.682 78.064 289.578 79.376 289.578 80.88V84.736C289.578 85.408 289.642 85.808 289.674 86H288.202C288.17 85.808 288.122 85.52 288.122 84.96C287.786 85.504 287.018 86.24 285.642 86.24C284.074 86.24 283.066 85.152 283.066 83.936ZM285.85 84.976C287.082 84.976 288.074 84.384 288.074 82.704V82.352L285.722 82.704C285.082 82.8 284.602 83.168 284.602 83.856C284.602 84.432 285.082 84.976 285.85 84.976ZM293.425 86H291.921V74.416H293.425V86ZM297.999 75.872V78.304H299.663V79.664H297.999V83.664C297.999 84.368 298.287 84.72 299.071 84.72C299.263 84.72 299.535 84.688 299.663 84.656V85.936C299.535 85.984 299.151 86.08 298.639 86.08C297.327 86.08 296.495 85.28 296.495 83.888V79.664H295.023V78.304H295.439C296.271 78.304 296.623 77.792 296.623 77.12V75.872H297.999ZM303.159 86H301.671V78.304H303.159V86ZM301.335 75.392C301.335 74.784 301.815 74.304 302.407 74.304C303.015 74.304 303.495 74.784 303.495 75.392C303.495 75.984 303.015 76.464 302.407 76.464C301.815 76.464 301.335 75.984 301.335 75.392ZM307.206 86H305.718V78.304H307.158V79.328C307.638 78.48 308.598 78.08 309.494 78.08C310.454 78.08 311.382 78.544 311.798 79.536C312.406 78.432 313.398 78.08 314.374 78.08C315.718 78.08 317.03 78.992 317.03 81.008V86H315.542V81.168C315.542 80.16 315.046 79.408 313.91 79.408C312.854 79.408 312.134 80.24 312.134 81.344V86H310.63V81.168C310.63 80.176 310.15 79.408 308.998 79.408C307.926 79.408 307.206 80.208 307.206 81.36V86ZM320.412 81.36H324.62C324.588 80.256 323.868 79.392 322.508 79.392C321.244 79.392 320.476 80.368 320.412 81.36ZM324.844 83.36L326.14 83.808C325.708 85.168 324.476 86.24 322.684 86.24C320.62 86.24 318.812 84.736 318.812 82.128C318.812 79.712 320.556 78.064 322.492 78.064C324.86 78.064 326.188 79.696 326.188 82.096C326.188 82.288 326.172 82.48 326.156 82.576H320.364C320.396 83.952 321.388 84.912 322.684 84.912C323.932 84.912 324.556 84.224 324.844 83.36Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
<rect
x="214.5"
@@ -392,7 +378,7 @@ const data: {
width="39"
height="39"
rx="7.5"
fill="hsl(var(--background-alternative))"
fill="var(--background-alternative)"
/>
<rect
x="214.5"
@@ -400,11 +386,11 @@ const data: {
width="39"
height="39"
rx="7.5"
stroke="hsl(var(--border-default))"
stroke="var(--border-default)"
/>
<path
d="M234.001 139.586V147.3M234.001 139.586L240.807 135.633M234.001 139.586L227.195 135.633M227.195 135.633V140.364M227.195 135.633V135.592L231.272 133.224M240.808 140.405V135.592L236.731 133.224M238.296 144.958L234.001 147.452L229.707 144.958"
stroke="hsl(var(--foreground-lighter))"
stroke="var(--foreground-lighter)"
strokeWidth="1.14917"
strokeMiterlimit="10"
strokeLinecap="round"
@@ -412,7 +398,7 @@ const data: {
/>
<path
d="M269.248 143.984L272.704 134.656H274.352L269.984 146H268.432L264.16 134.656H265.824L269.248 143.984ZM275.897 141.36H280.105C280.073 140.256 279.353 139.392 277.993 139.392C276.729 139.392 275.961 140.368 275.897 141.36ZM280.329 143.36L281.625 143.808C281.193 145.168 279.961 146.24 278.169 146.24C276.105 146.24 274.297 144.736 274.297 142.128C274.297 139.712 276.041 138.064 277.977 138.064C280.345 138.064 281.673 139.696 281.673 142.096C281.673 142.288 281.657 142.48 281.641 142.576H275.849C275.881 143.952 276.873 144.912 278.169 144.912C279.417 144.912 280.041 144.224 280.329 143.36ZM286.825 139.456C285.609 139.456 284.489 140.352 284.489 142.144C284.489 143.904 285.593 144.848 286.841 144.848C288.281 144.848 288.809 143.872 288.985 143.264L290.312 143.84C289.945 144.944 288.841 146.24 286.841 146.24C284.601 146.24 282.953 144.48 282.953 142.144C282.953 139.744 284.633 138.064 286.825 138.064C288.873 138.064 289.929 139.344 290.249 140.512L288.889 141.088C288.697 140.336 288.137 139.456 286.825 139.456ZM294.093 135.872V138.304H295.757V139.664H294.093V143.664C294.093 144.368 294.381 144.72 295.165 144.72C295.357 144.72 295.629 144.688 295.757 144.656V145.936C295.629 145.984 295.245 146.08 294.733 146.08C293.421 146.08 292.589 145.28 292.589 143.888V139.664H291.117V138.304H291.533C292.365 138.304 292.717 137.792 292.717 137.12V135.872H294.093ZM300.982 144.896C302.262 144.896 303.382 143.936 303.382 142.144C303.382 140.368 302.262 139.408 300.982 139.408C299.702 139.408 298.582 140.368 298.582 142.144C298.582 143.936 299.702 144.896 300.982 144.896ZM300.982 138.064C303.286 138.064 304.918 139.808 304.918 142.144C304.918 144.496 303.286 146.24 300.982 146.24C298.678 146.24 297.046 144.496 297.046 142.144C297.046 139.808 298.678 138.064 300.982 138.064ZM311.115 138.224V139.824C310.891 139.792 310.667 139.776 310.459 139.776C309.195 139.776 308.347 140.448 308.347 142.144V146H306.843V138.304H308.315V139.648C308.875 138.464 309.835 138.176 310.619 138.176C310.827 138.176 311.035 138.208 311.115 138.224ZM311.998 144L313.358 143.52C313.454 144.32 314.062 144.96 315.15 144.96C315.998 144.96 316.462 144.48 316.462 143.936C316.462 143.456 316.11 143.088 315.47 142.944L314.158 142.656C312.958 142.4 312.238 141.584 312.238 140.496C312.238 139.184 313.47 138.064 314.974 138.064C317.086 138.064 317.742 139.44 317.902 140.128L316.574 140.624C316.51 140.224 316.19 139.344 314.974 139.344C314.206 139.344 313.694 139.84 313.694 140.368C313.694 140.832 313.982 141.168 314.574 141.296L315.822 141.568C317.214 141.872 317.95 142.72 317.95 143.856C317.95 144.944 317.038 146.24 315.134 146.24C313.022 146.24 312.126 144.88 311.998 144Z"
fill="hsl(var(--foreground-light))"
fill="var(--foreground-light)"
/>
</svg>
),
apps/www/data/solutions/beginners.tsx
+3 -3
View File
@@ -203,7 +203,7 @@ const data: () => {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
bg-[linear-gradient(to_bottom,transparent_0%,hsl(var(--background-default))_100%)]
bg-[linear-gradient(to_bottom,transparent_0%,var(--background-default)_100%)]
"
/>
</div>
@@ -319,7 +319,7 @@ const data: () => {
</>
),
image: (
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-default))_75%)]" />
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-default)_75%)]" />
),
},
{
@@ -409,7 +409,7 @@ const data: () => {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-default))_75%)]
bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-default)_75%)]
"
/>
<Image
apps/www/data/solutions/developers.tsx
+4 -4
View File
@@ -220,7 +220,7 @@ const data: () => {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
bg-[linear-gradient(to_bottom,transparent_0%,hsl(var(--background-default))_100%)]
bg-[linear-gradient(to_bottom,transparent_0%,var(--background-default)_100%)]
"
/>
</div>
@@ -286,7 +286,7 @@ const data: () => {
),
className: 'border-l-0! sm:border-l!',
image: (
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-default))_75%)]" />
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-default)_75%)]" />
),
},
{
@@ -544,7 +544,7 @@ const data: () => {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-default))_75%)]
bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-default)_75%)]
"
/>
<Image
@@ -575,7 +575,7 @@ const data: () => {
<RealtimeLogs
isActive={false}
isInView={true}
className="h-3/5 bottom-0 top-auto [&_.visual-overlay]:bg-[linear-gradient(to_top,hsl(var(--background-default))_0%,transparent_100%)]!"
className="h-3/5 bottom-0 top-auto [&_.visual-overlay]:bg-[linear-gradient(to_top,var(--background-default)_0%,transparent_100%)]!"
/>
),
},
apps/www/data/solutions/firebase.tsx
+4 -4
View File
@@ -204,7 +204,7 @@ const data = {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
bg-[linear-gradient(to_bottom,transparent_0%,hsl(var(--background-default))_100%)]
bg-[linear-gradient(to_bottom,transparent_0%,var(--background-default)_100%)]
"
/>
</div>
@@ -270,7 +270,7 @@ const data = {
),
className: 'border-l-0! sm:border-l!',
image: (
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-default))_75%)]" />
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-default)_75%)]" />
),
},
{
@@ -503,7 +503,7 @@ const data = {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-default))_75%)]
bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-default)_75%)]
"
/>
<Image
@@ -530,7 +530,7 @@ const data = {
<RealtimeLogs
isActive={false}
isInView={true}
className="h-3/5 bottom-0 top-auto [&_.visual-overlay]:bg-[linear-gradient(to_top,hsl(var(--background-default))_0%,transparent_100%)]!"
className="h-3/5 bottom-0 top-auto [&_.visual-overlay]:bg-[linear-gradient(to_top,var(--background-default)_0%,transparent_100%)]!"
/>
),
},
apps/www/data/solutions/hackathon.tsx
+4 -4
View File
@@ -188,7 +188,7 @@ const data: () => {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
bg-[linear-gradient(to_bottom,transparent_0%,hsl(var(--background-default))_100%)]
bg-[linear-gradient(to_bottom,transparent_0%,var(--background-default)_100%)]
"
/>
</div>
@@ -254,7 +254,7 @@ const data: () => {
),
className: 'border-l-0! sm:border-l!',
image: (
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-default))_75%)]" />
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-default)_75%)]" />
),
},
{
@@ -512,7 +512,7 @@ const data: () => {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-default))_75%)]
bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-default)_75%)]
"
/>
<Image
@@ -543,7 +543,7 @@ const data: () => {
<RealtimeLogs
isActive={false}
isInView={true}
className="h-3/5 bottom-0 top-auto [&_.visual-overlay]:bg-[linear-gradient(to_top,hsl(var(--background-default))_0%,transparent_100%)]!"
className="h-3/5 bottom-0 top-auto [&_.visual-overlay]:bg-[linear-gradient(to_top,var(--background-default)_0%,transparent_100%)]!"
/>
),
},
apps/www/data/solutions/innovation-teams.tsx
+3 -3
View File
@@ -360,7 +360,7 @@ const data: () => {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
bg-[linear-gradient(to_bottom,transparent_0%,hsl(var(--background-default))_100%)]
bg-[linear-gradient(to_bottom,transparent_0%,var(--background-default)_100%)]
"
/>
</div>
@@ -426,7 +426,7 @@ const data: () => {
),
className: 'border-l-0! sm:border-l!',
image: (
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-default))_75%)]" />
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-default)_75%)]" />
),
},
{
@@ -621,7 +621,7 @@ const data: () => {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-default))_75%)]
bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-default)_75%)]
"
/>
<Image
apps/www/data/solutions/neon.tsx
+4 -4
View File
@@ -196,7 +196,7 @@ const data = {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
bg-[linear-gradient(to_bottom,transparent_0%,hsl(var(--background-default))_100%)]
bg-[linear-gradient(to_bottom,transparent_0%,var(--background-default)_100%)]
"
/>
</div>
@@ -262,7 +262,7 @@ const data = {
),
className: 'border-l-0! sm:border-l!',
image: (
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-default))_75%)]" />
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-default)_75%)]" />
),
},
{
@@ -495,7 +495,7 @@ const data = {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-default))_75%)]
bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-default)_75%)]
"
/>
<Image
@@ -522,7 +522,7 @@ const data = {
<RealtimeLogs
isActive={false}
isInView={true}
className="h-3/5 bottom-0 top-auto [&_.visual-overlay]:bg-[linear-gradient(to_top,hsl(var(--background-default))_0%,transparent_100%)]!"
className="h-3/5 bottom-0 top-auto [&_.visual-overlay]:bg-[linear-gradient(to_top,var(--background-default)_0%,transparent_100%)]!"
/>
),
},
apps/www/data/solutions/no-code.tsx
+2 -2
View File
@@ -222,7 +222,7 @@ const data: () => {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
bg-[linear-gradient(to_bottom,transparent_0%,hsl(var(--background-default))_100%)]
bg-[linear-gradient(to_bottom,transparent_0%,var(--background-default)_100%)]
"
/>
</div>
@@ -269,7 +269,7 @@ const data: () => {
),
className: 'border-l-0! sm:border-l!',
image: (
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-default))_75%)]" />
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-default)_75%)]" />
),
},
{
apps/www/data/solutions/postgres-developers.tsx
+4 -4
View File
@@ -228,7 +228,7 @@ const data: () => {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
bg-[linear-gradient(to_bottom,transparent_0%,hsl(var(--background-default))_100%)]
bg-[linear-gradient(to_bottom,transparent_0%,var(--background-default)_100%)]
"
/>
</div>
@@ -294,7 +294,7 @@ const data: () => {
),
className: 'border-l-0! sm:border-l!',
image: (
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-default))_75%)]" />
<RealtimeVisual className="[&_.visual-overlay]:bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-default)_75%)]" />
),
},
{
@@ -644,7 +644,7 @@ const data: () => {
absolute pointer-events-none
w-full h-full
inset-0 top-auto
bg-[linear-gradient(to_top,transparent_0%,transparent_50%,hsl(var(--background-default))_75%)]
bg-[linear-gradient(to_top,transparent_0%,transparent_50%,var(--background-default)_75%)]
"
/>
<Image
@@ -675,7 +675,7 @@ const data: () => {
<RealtimeLogs
isActive={false}
isInView={true}
className="h-3/5 bottom-0 top-auto [&_.visual-overlay]:bg-[linear-gradient(to_top,hsl(var(--background-default))_0%,transparent_100%)]!"
className="h-3/5 bottom-0 top-auto [&_.visual-overlay]:bg-[linear-gradient(to_top,var(--background-default)_0%,transparent_100%)]!"
/>
),
},
Loaded 100 of 133 files, more files were not shown because too many files have changed in this diff. Show more