From ba372a1a4c638cca439f0bb2d95b3e2d67a03e69 Mon Sep 17 00:00:00 2001 From: Davis SHYAKA <87414827+davis-shyaka@users.noreply.github.com> Date: Thu, 3 Oct 2024 16:41:59 +0200 Subject: [PATCH] colors page --- src/app.css | 1 + src/lib/assets/icons/chart-pie.svg | 3 + src/lib/assets/icons/dollar.svg | 3 + src/lib/assets/icons/index.ts | 8 +++ src/lib/assets/icons/logo-svelte.svg | 11 ++++ src/lib/assets/icons/star.svg | 3 + src/lib/components/ui/button/index.ts | 5 +- src/lib/components/ui/link/index.ts | 3 +- src/lib/config/sitemap.ts | 6 +- src/lib/utils.ts | 30 ++++++++- src/routes/colors/+page.svelte | 53 +++++++++------- src/routes/colors/backgrounds.svelte | 45 +++++++++++++ src/routes/colors/borders.svelte | 17 +++++ .../colors/component-backgrounds.svelte | 63 +++++++++++++++++++ src/routes/colors/contrasts.svelte | 25 ++++++++ src/routes/colors/demo.svelte | 21 +++++++ src/routes/colors/description-list.svelte | 17 +++++ .../{color-menu.svelte => scale.svelte} | 1 - src/routes/colors/scales.svelte | 23 +++++++ src/routes/colors/text-and-icons.svelte | 39 ++++++++++++ 20 files changed, 347 insertions(+), 30 deletions(-) create mode 100644 src/lib/assets/icons/chart-pie.svg create mode 100644 src/lib/assets/icons/dollar.svg create mode 100644 src/lib/assets/icons/logo-svelte.svg create mode 100644 src/lib/assets/icons/star.svg create mode 100644 src/routes/colors/backgrounds.svelte create mode 100644 src/routes/colors/borders.svelte create mode 100644 src/routes/colors/component-backgrounds.svelte create mode 100644 src/routes/colors/contrasts.svelte create mode 100644 src/routes/colors/demo.svelte create mode 100644 src/routes/colors/description-list.svelte rename src/routes/colors/{color-menu.svelte => scale.svelte} (96%) create mode 100644 src/routes/colors/scales.svelte create mode 100644 src/routes/colors/text-and-icons.svelte diff --git a/src/app.css b/src/app.css index 8a2b7e8..a3dede1 100644 --- a/src/app.css +++ b/src/app.css @@ -130,6 +130,7 @@ --shadow-menu: var(--shadow-border), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px -4px rgba(0, 0, 0, 0.04), 0px 16px 24px -8px rgba(0, 0, 0, 0.06); --shadow-input: 0 0 0 1px var(--gray-alpha-600), 0 0 0 4px rgba(0, 0, 0, 0.16); + --shadow-border-inset: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .dark { diff --git a/src/lib/assets/icons/chart-pie.svg b/src/lib/assets/icons/chart-pie.svg new file mode 100644 index 0000000..e34c1ae --- /dev/null +++ b/src/lib/assets/icons/chart-pie.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/lib/assets/icons/dollar.svg b/src/lib/assets/icons/dollar.svg new file mode 100644 index 0000000..0d84415 --- /dev/null +++ b/src/lib/assets/icons/dollar.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/lib/assets/icons/index.ts b/src/lib/assets/icons/index.ts index 53cc8cf..3d3ee0e 100644 --- a/src/lib/assets/icons/index.ts +++ b/src/lib/assets/icons/index.ts @@ -8,6 +8,7 @@ import Box from './box.svg?component'; import BrandAssets from './brand-assets.svg?component'; import ChartBarMiddle from './chart-bar-middle.svg?component'; import ChartBarPeak from './chart-bar-peak.svg?component'; +import ChartPie from './chart-pie.svg?component'; import ChartTrendingDown from './chart-trending-down.svg?component'; import CheckCircle from './check-circle.svg?component'; import Check from './check.svg?component'; @@ -25,6 +26,7 @@ import Copy from './copy.svg?component'; import Cross from './cross.svg?component'; import CursorClick from './cursor-click.svg?component'; import Database from './database.svg?component'; +import Dollar from './dollar.svg?component'; import ErrorStates from './error-states.svg?component'; import ExternalSmall from './external-small.svg?component'; import External from './external.svg?component'; @@ -50,6 +52,7 @@ import LogoGeist from './logo-geist.svg?component'; import LogoGithub from './logo-github.svg?component'; import LogoGitlab from './logo-gitlab.svg?component'; import LogoNext from './logo-next.svg?component'; +import LogoSvelte from './logo-svelte.svg?component'; import LogoTurborepo from './logo-turborepo.svg?component'; import LogoV0 from './logo-v0.svg?component'; import LogoVercelCircle from './logo-vercel-circle.svg?component'; @@ -64,6 +67,7 @@ import PencilEdit from './pencil-edit.svg?component'; import Router from './router.svg?component'; import SettingsSliders from './settings-sliders.svg?component'; import Shield from './shield.svg?component'; +import Star from './star.svg?component'; import Status from './status.svg?component'; import Stop from './stop.svg?component'; import Tabs from './tabs.svg?component'; @@ -83,6 +87,7 @@ export const Icons = { BrandAssets, ChartBarMiddle, ChartBarPeak, + ChartPie, ChartTrendingDown, CheckCircle, Check, @@ -100,6 +105,7 @@ export const Icons = { Cross, CursorClick, Database, + Dollar, ErrorStates, ExternalSmall, External, @@ -125,6 +131,7 @@ export const Icons = { LogoGithub, LogoGitlab, LogoNext, + LogoSvelte, LogoTurborepo, LogoV0, LogoVercelCircle, @@ -139,6 +146,7 @@ export const Icons = { Router, SettingsSliders, Shield, + Star, Status, Stop, Tabs, diff --git a/src/lib/assets/icons/logo-svelte.svg b/src/lib/assets/icons/logo-svelte.svg new file mode 100644 index 0000000..349fd01 --- /dev/null +++ b/src/lib/assets/icons/logo-svelte.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/lib/assets/icons/star.svg b/src/lib/assets/icons/star.svg new file mode 100644 index 0000000..8ae301c --- /dev/null +++ b/src/lib/assets/icons/star.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts index 1b9748c..2baf706 100644 --- a/src/lib/components/ui/button/index.ts +++ b/src/lib/components/ui/button/index.ts @@ -9,8 +9,9 @@ const button_variants = tv({ default: 'bg-gray-1000 text-background-100', secondary: 'bg-background-100 text-gray-1000 shadow-shadow-border hover:bg-gray-alpha-100', tertiary: 'bg-transparent hover:bg-gray-alpha-200', - error: 'bg-red-800 text-contrast-fg hover:bg-red-900', - warning: 'active:bg-[#a35200; bg-amber-800 text-[#0a0a0a] hover:bg-[#d27504]' + error: 'bg-red-700 text-contrast-fg hover:bg-red-800', + warning: 'active:bg-[#a35200; bg-amber-800 text-[#0a0a0a] hover:bg-[#d27504]', + success: 'bg-blue-700 text-contrast-fg hover:bg-blue-800' }, size: { sm: 'h-8 px-3', diff --git a/src/lib/components/ui/link/index.ts b/src/lib/components/ui/link/index.ts index 262ae56..36adba3 100644 --- a/src/lib/components/ui/link/index.ts +++ b/src/lib/components/ui/link/index.ts @@ -9,7 +9,8 @@ const link_variants = tv({ secondary: 'text-accents-5 hover:text-gray-1000', tertiary: '', error: '', - warning: '' + warning: '', + success: 'text-blue-900' } }, defaultVariants: { diff --git a/src/lib/config/sitemap.ts b/src/lib/config/sitemap.ts index d6bbdf2..0852ce8 100644 --- a/src/lib/config/sitemap.ts +++ b/src/lib/config/sitemap.ts @@ -31,9 +31,9 @@ export const aside_items: Aside = { status: 'soon' }, { - title: 'Next.js', - href: 'brands#next.js', - icon: Icons.LogoNext, + title: 'Svelte', + href: 'brands#svelte', + icon: Icons.LogoSvelte, status: 'soon' }, { diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 25026dd..29cc072 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -70,9 +70,35 @@ export const flyAndScale = ( }; }; -// e.g. "with-icons" -> "With Icons" +/** + * Formats a string to be more human-readable. + * @param str The string to format. + * @example + * format_string('with-icons') // 'With Icons' + * format_string('colors-1\\-3:-component-backgrounds') // 'Colors 1-3: Component Backgrounds' + */ export function format_string(str: string) { - return str.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase()); + // Replace escaped hyphens with a temporary placeholder + let processedString = str.replace(/\\-/g, '{{HYPHEN}}'); + + // Split the string by unescaped hyphens + const parts = processedString.split('-'); + + // Process each part + const formattedParts = parts.map((part) => { + // Capitalize the first letter of each word + return ( + part + .replace(/\b\w/g, (c) => c.toUpperCase()) + // Replace the placeholder back with a hyphen + .replace(/{{HYPHEN}}/g, '-') + ); + }); + + // Join the parts and fix spacing around colons + let result = formattedParts.join(' ').replace(/ : /g, ': '); + + return result; } // Wrappers around svelte's `HTMLAttributes` types to add a `ref` prop can be bound to diff --git a/src/routes/colors/+page.svelte b/src/routes/colors/+page.svelte index 3eb154f..b3de602 100644 --- a/src/routes/colors/+page.svelte +++ b/src/routes/colors/+page.svelte @@ -1,8 +1,12 @@ @@ -12,29 +16,36 @@ id="scales" subtitle="There are 10 color scales in the system. P3 colors are used on supported browsers and displays." > - + - + + + + + + + + + + + + + - -{#snippet color_scale({ scale, colors }: { scale: string; colors: string[] })} -

{scale}

- -{/snippet} diff --git a/src/routes/colors/backgrounds.svelte b/src/routes/colors/backgrounds.svelte new file mode 100644 index 0000000..a9c11fe --- /dev/null +++ b/src/routes/colors/backgrounds.svelte @@ -0,0 +1,45 @@ + + + + +
+ {@render bg_infographic({ bg: 'bg-background-100', border: 'md:border-r' })} + {@render bg_infographic({ bg: 'bg-background-200', border: 'border-t md:border-t-0' })} +
+ +{#snippet bg_infographic({ bg, border }: { bg: string; border?: string })} +
+
+

+ 1 +

+

+ 2 +

+
+
+{/snippet} diff --git a/src/routes/colors/borders.svelte b/src/routes/colors/borders.svelte new file mode 100644 index 0000000..5a9c46f --- /dev/null +++ b/src/routes/colors/borders.svelte @@ -0,0 +1,17 @@ + + + + + + + diff --git a/src/routes/colors/component-backgrounds.svelte b/src/routes/colors/component-backgrounds.svelte new file mode 100644 index 0000000..793d9ee --- /dev/null +++ b/src/routes/colors/component-backgrounds.svelte @@ -0,0 +1,63 @@ + + + + +

+ If your UI component's default background is Background 1, you can used Color 1 as your hover + background and Color 2 as your active background. On smaller UI elements like badges, you can use + Color 2 or Color 3 as the background. +

+ + +
+
    + {@render info_status()} + {@render warning_status()} + {@render info_status()} + {@render info_status()} +
+
+ +
+ Hobby + Pro + Enterprise +
+ + +{#snippet info_status()} +
  • + +

    APR 26 15:54:21.12

    +
    +

    + /overview +

    +
    • +{/snippet} + +{#snippet warning_status()} +
  • + +

    APR 26 15:54:21.12

    +
    +

    + /overview +

    +
    • +{/snippet} diff --git a/src/routes/colors/contrasts.svelte b/src/routes/colors/contrasts.svelte new file mode 100644 index 0000000..5722abc --- /dev/null +++ b/src/routes/colors/contrasts.svelte @@ -0,0 +1,25 @@ + + + + + +
    + + + +
    + +
    + +
    +     diff --git a/src/routes/colors/demo.svelte b/src/routes/colors/demo.svelte new file mode 100644 index 0000000..968a26b --- /dev/null +++ b/src/routes/colors/demo.svelte @@ -0,0 +1,21 @@ + + +
    + {@render children()} +
    diff --git a/src/routes/colors/description-list.svelte b/src/routes/colors/description-list.svelte new file mode 100644 index 0000000..0052a61 --- /dev/null +++ b/src/routes/colors/description-list.svelte @@ -0,0 +1,17 @@ + + +
    + {#each items as { title, description, color }} +
    + +
    {title}
    +
    {description}
    +
    + {/each} +
    diff --git a/src/routes/colors/color-menu.svelte b/src/routes/colors/scale.svelte similarity index 96% rename from src/routes/colors/color-menu.svelte rename to src/routes/colors/scale.svelte index 02795bf..0ce7888 100644 --- a/src/routes/colors/color-menu.svelte +++ b/src/routes/colors/scale.svelte @@ -26,7 +26,6 @@ - copy(token)} class="pointer-events-none flex aspect-square w-full grow cursor-pointer items-center justify-center rounded bg-[var(--bg-color)] shadow-border-inset md:pointer-events-auto md:h-10" diff --git a/src/routes/colors/scales.svelte b/src/routes/colors/scales.svelte new file mode 100644 index 0000000..0cf442e --- /dev/null +++ b/src/routes/colors/scales.svelte @@ -0,0 +1,23 @@ + + +
      + {#each Object.entries(scales) as [scale, colors]} +
    • + {@render color_scale({ scale, colors })} +
      • + {/each} +
    + +{#snippet color_scale({ scale, colors }: { scale: string; colors: string[] })} +

    {scale}

    +
      + {#each colors as color} +
    • + +
      • + {/each} +
    +{/snippet} diff --git a/src/routes/colors/text-and-icons.svelte b/src/routes/colors/text-and-icons.svelte new file mode 100644 index 0000000..299b28f --- /dev/null +++ b/src/routes/colors/text-and-icons.svelte @@ -0,0 +1,39 @@ + + + + + +
    +
    +

    The Frontend Cloud

    +

    + Build, scale, and secure a faster, personalized web with Vercel. +

    + + Learn More + +
    +
    +
    + + + + + + +
    +