From 9d04e14ab1822154f6a398505d1263a78204a19d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Tue, 1 Sep 2026 23:51:25 +0200
Subject: [PATCH] Make the marketing hero, browser and shapes read tokens that
 exist (#2928)

---
 .build/css-vars-baseline.txt                | 13 ++-----------
 .changeset/fix-marketing-dangling-tokens.md |  5 +++++
 core/scss/_props.scss                       |  5 +++++
 core/scss/marketing/_browser.scss           |  6 +++---
 core/scss/marketing/_hero.scss              |  2 +-
 5 files changed, 16 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/fix-marketing-dangling-tokens.md

diff --git a/.build/css-vars-baseline.txt b/.build/css-vars-baseline.txt
index ceb91e4ac..5bbf50a14 100644
--- a/.build/css-vars-baseline.txt
+++ b/.build/css-vars-baseline.txt
@@ -4,14 +4,5 @@
 # also on a listed name that no longer dangles, so fixing one means deleting
 # its line.
 #
-# Everything below is a real bug waiting to be fixed, not an accepted exception.
-
-# tabler-marketing.css: `.shape-*` backgrounds, borders and headings reach for
-# tokens that only ever existed in the marketing prototype.
---tblr-black-lt
---tblr-border-color-dark
---tblr-border-color-light
---tblr-border-radius-circle
---tblr-font-weight-black
---tblr-gray-dark-lt
---tblr-gray-lt
+# The list is empty: every var() in the css resolves. An entry added here is a
+# bug waiting to be fixed, not an accepted exception.
diff --git a/.changeset/fix-marketing-dangling-tokens.md b/.changeset/fix-marketing-dangling-tokens.md
new file mode 100644
index 000000000..469930989
--- /dev/null
+++ b/.changeset/fix-marketing-dangling-tokens.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed the marketing hero, browser and shape components reading custom properties nothing defined.
diff --git a/core/scss/_props.scss b/core/scss/_props.scss
index 2b9b75e5b..ff1436fc2 100644
--- a/core/scss/_props.scss
+++ b/core/scss/_props.scss
@@ -28,6 +28,11 @@
   --white: #{$white};
   --white-lt: color-mix(in oklab, var(--white) 10%, transparent);
   --black: #{$black};
+  // `.shape-*` runs over `$colors`, which carries these three on top of the
+  // theme colors; the `-lt` tint below is generated for the theme colors only.
+  --black-lt: color-mix(in oklab, var(--black) 10%, transparent);
+  --gray-lt: color-mix(in oklab, var(--gray) 10%, transparent);
+  --gray-dark-lt: color-mix(in oklab, var(--gray-dark) 10%, transparent);
   --dark: #{$dark};
   --light: #{$light};
 
diff --git a/core/scss/marketing/_browser.scss b/core/scss/marketing/_browser.scss
index 124d71e45..a63aceee9 100644
--- a/core/scss/marketing/_browser.scss
+++ b/core/scss/marketing/_browser.scss
@@ -12,7 +12,7 @@
 
 .browser-header {
   padding: 0.25rem 1rem;
-  background: var(--border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
+  background: var(--bg-surface-tertiary) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
   border-bottom: 1px solid var(--border-color);
   @include border-radius(calc(var(--border-radius-lg) - 1px) calc(var(--border-radius-lg) - 1px) 0 0);
 }
@@ -44,8 +44,8 @@
   height: 0.75rem;
   margin-inline-end: 0.5rem;
   background: var(--border-color);
-  border: 1px solid var(--border-color-dark);
-  @include border-radius(var(--border-radius-circle));
+  border: 1px solid var(--border-active-color);
+  @include border-radius(var(--border-radius-pill));
 }
 
 .browser-input {
diff --git a/core/scss/marketing/_hero.scss b/core/scss/marketing/_hero.scss
index b32b3c2b0..99895c81b 100644
--- a/core/scss/marketing/_hero.scss
+++ b/core/scss/marketing/_hero.scss
@@ -10,7 +10,7 @@
 
 .hero-title {
   font-size: 3rem;
-  font-weight: var(--font-weight-black);
+  font-weight: var(--font-weight-bold);
   line-height: $headings-line-height;
   letter-spacing: $spacing-tight;