From b38cd32d07b178b4989f38f418e72b4529e98048 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Fri, 7 Aug 2026 00:48:28 +0200 Subject: [PATCH] Add screenshots package and fix `card-gradient` minify bug (#2793) Co-authored-by: Bartek --- .build/build-css.ts | 8 + core/scss/layout/_navbar.scss | 5 + core/scss/tests/_cards.test.scss | 31 ++++ core/scss/ui/_cards.scss | 15 +- docs/pages/ui/layout/navbars.mdx | 4 +- package.json | 4 +- pnpm-lock.yaml | 25 +++ pnpm-workspace.yaml | 1 + preview/astro.config.mjs | 7 - preview/pages/onboarding.astro | 4 +- preview/pages/patterns.astro | 29 +-- preview/pages/screenshot.astro | 4 +- preview/pages/sign-in-cover.astro | 4 +- preview/pages/sign-in-illustration.astro | 4 +- preview/pages/tracking.astro | 76 ++++++++ screenshots/.build/capture.ts | 125 +++++++++++++ screenshots/.gitignore | 9 + screenshots/assets/favicon-dev.ico | Bin 0 -> 15086 bytes screenshots/assets/favicon.ico | Bin 0 -> 33310 bytes screenshots/astro.config.mjs | 66 +++++++ screenshots/env.d.ts | 1 + screenshots/layouts/ScreenshotLayout.astro | 166 ++++++++++++++++++ screenshots/package.json | 29 +++ screenshots/pages/active-subscriptions.astro | 8 + screenshots/pages/alert.astro | 13 ++ screenshots/pages/auth-lock-card.astro | 8 + .../pages/authenticate-your-account.astro | 8 + .../pages/background-pattern-colors.astro | 30 ++++ .../pages/background-pattern-utilities.astro | 30 ++++ screenshots/pages/candlestick.astro | 8 + screenshots/pages/card-gradient.astro | 52 ++++++ screenshots/pages/chart-radial.astro | 12 ++ screenshots/pages/chat.astro | 12 ++ screenshots/pages/conversion-rate.astro | 8 + screenshots/pages/donut.astro | 8 + screenshots/pages/empty-state.astro | 8 + screenshots/pages/flags-list.astro | 20 +++ screenshots/pages/happy-birthday.astro | 8 + screenshots/pages/heatmap.astro | 8 + screenshots/pages/index.astro | 26 +++ screenshots/pages/map-vector-card.astro | 38 ++++ screenshots/pages/new-clients.astro | 8 + screenshots/pages/payments-list.astro | 21 +++ screenshots/pages/revenue.astro | 8 + screenshots/pages/sales-overview.astro | 8 + screenshots/pages/sales.astro | 8 + screenshots/pages/social-icons.astro | 23 +++ screenshots/pages/social-referrals.astro | 8 + screenshots/pages/team-leaderboard.astro | 8 + screenshots/pages/total-users.astro | 8 + screenshots/pages/tracking.astro | 8 + screenshots/pages/user-card-bg.astro | 8 + screenshots/pages/vimeo-player.astro | 12 ++ screenshots/pages/welcome.astro | 8 + screenshots/tsconfig.json | 14 ++ .../cards/AuthenticateAccount.astro | 72 ++++++++ shared/components/cards/CarouselCard.astro | 1 + .../components/cards/StatusMonitoring.astro | 72 ++++++++ .../cards/charts/ConversionRate.astro | 24 +++ .../components/cards/charts/CryptoPrice.astro | 11 ++ .../cards/charts/SalesOverview.astro | 26 +++ .../cards/charts/TrafficSources.astro | 11 ++ .../cards/charts/WeeklyActivity.astro | 11 ++ .../marketing/MarketingNavbar.astro | 4 +- shared/components/marketing/hero/Side.astro | 31 ++-- .../navbar/{NavbarLogo.astro => Logo.astro} | 10 +- shared/components/navbar/Navbar.astro | 4 +- shared/components/navbar/Sidebar.astro | 4 +- shared/components/parts/Datagrid.astro | 102 ++++------- shared/data/charts.json | 142 +++++++++++++++ shared/data/menu.json | 4 + shared/layouts/PayLayout.astro | 4 +- shared/layouts/SingleLayout.astro | 4 +- shared/lib/chart-script.ts | 27 ++- shared/ui/BackgroundPattern.astro | 22 +++ shared/ui/Carousel.astro | 67 +++++++ shared/ui/Chart.astro | 31 ++++ shared/ui/Datagrid.astro | 13 ++ shared/ui/DatagridItem.astro | 17 ++ shared/ui/Legend.astro | 15 ++ shared/ui/ScaleLegend.astro | 24 +++ turbo.json | 20 +++ 82 files changed, 1698 insertions(+), 147 deletions(-) create mode 100644 core/scss/tests/_cards.test.scss create mode 100644 preview/pages/tracking.astro create mode 100644 screenshots/.build/capture.ts create mode 100644 screenshots/.gitignore create mode 100644 screenshots/assets/favicon-dev.ico create mode 100644 screenshots/assets/favicon.ico create mode 100644 screenshots/astro.config.mjs create mode 100644 screenshots/env.d.ts create mode 100644 screenshots/layouts/ScreenshotLayout.astro create mode 100644 screenshots/package.json create mode 100644 screenshots/pages/active-subscriptions.astro create mode 100644 screenshots/pages/alert.astro create mode 100644 screenshots/pages/auth-lock-card.astro create mode 100644 screenshots/pages/authenticate-your-account.astro create mode 100644 screenshots/pages/background-pattern-colors.astro create mode 100644 screenshots/pages/background-pattern-utilities.astro create mode 100644 screenshots/pages/candlestick.astro create mode 100644 screenshots/pages/card-gradient.astro create mode 100644 screenshots/pages/chart-radial.astro create mode 100644 screenshots/pages/chat.astro create mode 100644 screenshots/pages/conversion-rate.astro create mode 100644 screenshots/pages/donut.astro create mode 100644 screenshots/pages/empty-state.astro create mode 100644 screenshots/pages/flags-list.astro create mode 100644 screenshots/pages/happy-birthday.astro create mode 100644 screenshots/pages/heatmap.astro create mode 100644 screenshots/pages/index.astro create mode 100644 screenshots/pages/map-vector-card.astro create mode 100644 screenshots/pages/new-clients.astro create mode 100644 screenshots/pages/payments-list.astro create mode 100644 screenshots/pages/revenue.astro create mode 100644 screenshots/pages/sales-overview.astro create mode 100644 screenshots/pages/sales.astro create mode 100644 screenshots/pages/social-icons.astro create mode 100644 screenshots/pages/social-referrals.astro create mode 100644 screenshots/pages/team-leaderboard.astro create mode 100644 screenshots/pages/total-users.astro create mode 100644 screenshots/pages/tracking.astro create mode 100644 screenshots/pages/user-card-bg.astro create mode 100644 screenshots/pages/vimeo-player.astro create mode 100644 screenshots/pages/welcome.astro create mode 100644 screenshots/tsconfig.json create mode 100644 shared/components/cards/AuthenticateAccount.astro create mode 100644 shared/components/cards/StatusMonitoring.astro create mode 100644 shared/components/cards/charts/ConversionRate.astro create mode 100644 shared/components/cards/charts/CryptoPrice.astro create mode 100644 shared/components/cards/charts/SalesOverview.astro create mode 100644 shared/components/cards/charts/TrafficSources.astro create mode 100644 shared/components/cards/charts/WeeklyActivity.astro rename shared/components/navbar/{NavbarLogo.astro => Logo.astro} (90%) create mode 100644 shared/ui/BackgroundPattern.astro create mode 100644 shared/ui/Carousel.astro create mode 100644 shared/ui/Datagrid.astro create mode 100644 shared/ui/DatagridItem.astro create mode 100644 shared/ui/Legend.astro create mode 100644 shared/ui/ScaleLegend.astro diff --git a/.build/build-css.ts b/.build/build-css.ts index 7c462939f..c4a7f5a0d 100644 --- a/.build/build-css.ts +++ b/.build/build-css.ts @@ -124,6 +124,14 @@ function flushWrites(): void { async function minify(files: string[]): Promise { const minified = await new CleanCSS({ batch: true, + // zeroUnits (default true) strips the unit off zero values, e.g. `0%` -> `0`. + // clean-css only skips this inside calc/rgb/hsl/rgba/hsla/min/max/clamp — + // not color-mix() — so it turns `color-mix(in srgb, x 0%, y)` into + // `color-mix(in srgb, x 0, y)`. Unlike , has no + // unitless-zero exception, so that's invalid CSS and the whole color-mix() + // (and the gradient layer using it, e.g. .card-gradient) silently drops. + // Covered by .build/build-css.test.ts. + compatibility: { properties: { zeroUnits: false } }, format: 'breakWith=lf;breaks:afterComment=on', inline: 'local', level: { 1: true }, diff --git a/core/scss/layout/_navbar.scss b/core/scss/layout/_navbar.scss index e276831c7..e5757e47e 100644 --- a/core/scss/layout/_navbar.scss +++ b/core/scss/layout/_navbar.scss @@ -213,6 +213,11 @@ Navbar brand height: $navbar-brand-image-height; } +.navbar-brand-gray { + --navbar-logo-color: var(--tertiary); + opacity: 0.5; +} + /** Navbar toggler */ diff --git a/core/scss/tests/_cards.test.scss b/core/scss/tests/_cards.test.scss new file mode 100644 index 000000000..45a77579d --- /dev/null +++ b/core/scss/tests/_cards.test.scss @@ -0,0 +1,31 @@ +// Regression coverage for the multi-layer .card-gradient background: every +// zero-value gradient stop must keep its `%` unit. Unlike , +// has no unitless-zero exception, so `color-mix(in sRGB, x 0, +// y)` (missing the %) is invalid CSS and the whole color-mix() — and the +// gradient layer using it — silently drops in the browser. +// +// This only guards the SCSS source; the actual incident was a CSS minifier +// (clean-css) stripping a valid `0%` down to `0` post-compile, which is +// outside what Sass-level tests can see — see .build/build-css.ts's minify(). +@use '../ui/cards' as cards; + +@include describe('card-gradient-background') { + @include it('keeps the % unit on every zero-value gradient stop') { + @include assert() { + @include output() { + .t { + @include cards.card-gradient-background; + } + } + + @include expect() { + .t { + background: + radial-gradient(ellipse at center, var(--card-bg) 0%, color-mix(in sRGB, var(--card-bg) 0%, transparent) 80%) border-box, + linear-gradient(var(--card-gradient-direction), color-mix(in sRGB, var(--card-bg) var(--card-gradient-opacity), transparent) 0%, var(--card-bg) 40%) border-box, + linear-gradient(calc(270deg + var(--card-gradient-direction)), var(--card-gradient)) border-box; + } + } + } + } +} diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss index 3aec2efc7..1c2800fbc 100644 --- a/core/scss/ui/_cards.scss +++ b/core/scss/ui/_cards.scss @@ -688,15 +688,22 @@ Card note /** Card gradient */ +// Split out so scss/tests/_cards.test.scss can assert on it directly — a bare +// top-level ruleset like .card-gradient can't be @include-d or otherwise +// referenced in isolation by sass-true. +@mixin card-gradient-background { + background: + radial-gradient(ellipse at center, var(--card-bg) 0%, color-mix(in sRGB, var(--card-bg) 0%, transparent) 80%) border-box, + linear-gradient(var(--card-gradient-direction), color-mix(in sRGB, var(--card-bg) var(--card-gradient-opacity), transparent) 0%, var(--card-bg) 40%) border-box, + linear-gradient(calc(270deg + var(--card-gradient-direction)), var(--card-gradient)) border-box; +} + .card-gradient { --card-gradient-direction: 180deg; --card-gradient-opacity: 86%; --card-gradient: var(--primary), var(--primary); - background: - radial-gradient(ellipse at center, var(--card-bg) 0%, color-mix(in sRGB, var(--card-bg) 0%, transparent) 80%) border-box, - linear-gradient(var(--card-gradient-direction), color-mix(in sRGB, var(--card-bg) var(--card-gradient-opacity), transparent) 0%, var(--card-bg) 40%) border-box, - linear-gradient(calc(270deg + var(--card-gradient-direction)), var(--card-gradient)) border-box; + @include card-gradient-background(); } @each $name, $color in map.merge($colors, $theme-colors) { diff --git a/docs/pages/ui/layout/navbars.mdx b/docs/pages/ui/layout/navbars.mdx index ad4343093..5ca8bf489 100644 --- a/docs/pages/ui/layout/navbars.mdx +++ b/docs/pages/ui/layout/navbars.mdx @@ -6,7 +6,7 @@ layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro' -import NavbarLogo from '@shared/components/navbar/NavbarLogo.astro' +import Logo from '@shared/components/navbar/Logo.astro' import Icon from '@ui/Icon.astro' import CodeDocs from '@components/CodeDocs.astro'; @@ -31,7 +31,7 @@ The navbar can contain links, buttons, and other elements. You can customize the - +