@stevederico/skateboard-ui 2.19.0 → 2.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/package.json +1 -1
  3. package/views/LandingView.jsx +3 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # CHANGELOG
2
2
 
3
+ 2.20.0
4
+
5
+ Fix hero gradient using Tailwind primary token
6
+
3
7
  2.19.0
4
8
 
5
9
  Add colored hero gradient to default landing
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stevederico/skateboard-ui",
3
3
  "private": false,
4
- "version": "2.19.0",
4
+ "version": "2.20.0",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  "./Sidebar": {
package/views/LandingView.jsx CHANGED
@@ -97,8 +97,9 @@ export default function LandingView() {
97
97
 
98
98
  <main>
99
99
  {/* Hero Section */}
100
- <section className="relative py-24 md:py-40 text-center overflow-hidden" style={{ background: 'linear-gradient(135deg, color-mix(in oklch, var(--color-app) 15%, var(--color-background)), color-mix(in oklch, var(--color-app) 5%, var(--color-background)))' }}>
101
- <div className="absolute inset-0 opacity-10" style={{ background: 'radial-gradient(ellipse at 20% 50%, var(--color-app) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, var(--color-app) 0%, transparent 50%)' }} />
100
+ <section className="relative py-24 md:py-40 text-center overflow-hidden bg-app/15">
101
+ <div className="absolute inset-0 bg-app/25" style={{ maskImage: 'radial-gradient(ellipse at 20% 50%, black 0%, transparent 70%)', WebkitMaskImage: 'radial-gradient(ellipse at 20% 50%, black 0%, transparent 70%)' }} />
102
+ <div className="absolute inset-0 bg-app/20" style={{ maskImage: 'radial-gradient(ellipse at 80% 30%, black 0%, transparent 60%)', WebkitMaskImage: 'radial-gradient(ellipse at 80% 30%, black 0%, transparent 60%)' }} />
102
103
  <div className="relative max-w-4xl mx-auto px-6">
103
104
  <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold mb-8 text-foreground leading-tight">
104
105
  {constants.tagline}