Make the marketing hero, browser and shapes read tokens that exist (#2928)

.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.
+# 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.
-# 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

.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.

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};
 

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);
+  border: 1px solid var(--border-active-color);
-  @include border-radius(var(--border-radius-circle));
+  @include border-radius(var(--border-radius-pill));
 }
 
 .browser-input {

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;