Skip to content

Commit a9e4269

Browse files
OhsweddOhswedd
committed
Stable Hero Component Release
1 parent 8846fc2 commit a9e4269

File tree

2 files changed

+165
-165
lines changed

2 files changed

+165
-165
lines changed

‎demo.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -470,40 +470,40 @@ <h2 class="font-lg text-primary my-4">Form Showcase</h2>
470470
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
471471
<h2 class="font-lg text-primary my-4">Hero Showcase</h2>
472472
<!-- Basic Primary Hero with Overlay -->
473-
<div class="hero" data-variant="primary" data-overlay="dark" data-size="md" data-spacing="md" data-radius="lg" data-shadow="lg" data-hover="lift">
474-
<div class="hero-content">
473+
<div class="kroma-hero" data-variant="primary" data-overlay="dark" data-size="md" data-spacing="md" data-radius="lg" data-shadow="lg" data-hover="lift">
474+
<div class="kroma-hero-content">
475475
<h2>Primary Hero</h2>
476476
<p>This hero uses a primary gradient with a dark overlay and lift on hover.</p>
477477
</div>
478478
</div>
479479

480480
<!-- Secondary Hero with Light Gradient Overlay and Narrow Content Width -->
481-
<div class="hero" data-variant="secondary" data-overlay="gradient-light" data-size="lg" data-spacing="lg" data-radius="md" data-shadow="md" data-alignment="centered">
482-
<div class="hero-content" data-content-width="narrow">
481+
<div class="kroma-hero" data-variant="secondary" data-overlay="gradient-light" data-size="lg" data-spacing="lg" data-radius="md" data-shadow="md" data-alignment="centered">
482+
<div class="kroma-hero-content" data-content-width="narrow">
483483
<h2>Secondary Hero</h2>
484484
<p>A centered hero with a light gradient overlay and narrower content for focus.</p>
485485
</div>
486486
</div>
487487

488488
<!-- Success Hero with Fade Animation -->
489-
<div class="hero" data-variant="success" data-overlay="gradient-dark" data-size="sm" data-spacing="sm" data-radius="xl" data-shadow="sm" data-animation="fade">
490-
<div class="hero-content">
489+
<div class="kroma-hero" data-variant="success" data-overlay="gradient-dark" data-size="sm" data-spacing="sm" data-radius="xl" data-shadow="sm" data-animation="fade">
490+
<div class="kroma-hero-content">
491491
<h2>Success Hero</h2>
492492
<p>This small hero fades in, with a success theme and gradient overlay.</p>
493493
</div>
494494
</div>
495495

496496
<!-- Danger Hero with Scale Hover Effect -->
497-
<div class="hero" data-variant="danger" data-overlay="dark" data-size="lg" data-spacing="md" data-radius="xl" data-shadow="xl" data-hover="scale">
498-
<div class="hero-content" data-content-width="wide">
497+
<div class="kroma-hero" data-variant="danger" data-overlay="dark" data-size="lg" data-spacing="md" data-radius="xl" data-shadow="xl" data-hover="scale">
498+
<div class="kroma-hero-content" data-content-width="wide">
499499
<h2>Danger Hero</h2>
500500
<p>This large hero scales up slightly on hover, using a dark overlay.</p>
501501
</div>
502502
</div>
503503

504504
<!-- Accent Hero with Image Background and Full Width -->
505-
<div class="hero" style="--bg-image: url('https://via.placeholder.com/1600x800');" data-variant="accent" data-overlay="gradient-dark" data-size="full" data-shadow="xl" data-radius="none">
506-
<div class="hero-content">
505+
<div class="kroma-hero" style="--bg-image: url('https://via.placeholder.com/1600x800');" data-variant="accent" data-overlay="gradient-dark" data-size="full" data-shadow="xl" data-radius="none">
506+
<div class="kroma-hero-content">
507507
<h2>Accent Hero</h2>
508508
<p>This hero has a background image with a gradient overlay and full-screen size.</p>
509509
</div>

‎src/css/components/hero.css‎

Lines changed: 155 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* Base Hero Styles */
2-
.hero {
2+
.kroma-hero {
33
position: relative;
44
display: flex;
55
justify-content: center;
@@ -14,51 +14,41 @@
1414
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color var(--transition-colors);
1515
width: calc(100% - var(--space-8));
1616
overflow: hidden;
17-
}
18-
19-
/* Variants with Gradient Backgrounds */
20-
.hero[data-variant] {
17+
}
18+
19+
/* Gradient Variants */
20+
.kroma-hero[data-variant] {
2121
background: linear-gradient(135deg, var(--variant-light-bg), var(--variant-bg));
2222
color: var(--variant-text);
23-
}
24-
25-
.hero[data-variant="primary"] {
26-
background: linear-gradient(135deg, var(--primary-light-bg), var(--primary-bg));
27-
color: var(--primary-text);
28-
}
29-
30-
.hero[data-variant="secondary"] {
31-
background: linear-gradient(135deg, var(--secondary-light-bg), var(--secondary-bg));
32-
color: var(--secondary-text);
33-
}
34-
35-
.hero[data-variant="success"] {
36-
background: linear-gradient(135deg, var(--success-light-bg), var(--success-bg));
37-
color: var(--success-text);
38-
}
39-
40-
.hero[data-variant="danger"] {
41-
background: linear-gradient(135deg, var(--danger-light-bg), var(--danger-bg));
42-
color: var(--danger-text);
43-
}
44-
45-
.hero[data-variant="warning"] {
46-
background: linear-gradient(135deg, var(--warning-light-bg), var(--warning-bg));
47-
color: var(--warning-text);
48-
}
49-
50-
.hero[data-variant="info"] {
51-
background: linear-gradient(135deg, var(--info-light-bg), var(--info-bg));
52-
color: var(--info-text);
53-
}
54-
55-
.hero[data-variant="accent"] {
56-
background: linear-gradient(135deg, var(--accent-light-bg), var(--accent-bg));
57-
color: var(--accent-text);
58-
}
59-
60-
/* Overlay Effects */
61-
.hero[data-overlay]::before {
23+
}
24+
25+
/* Specific Variants */
26+
.kroma-hero[data-variant="primary"] {
27+
--variant-light-bg: var(--primary-light-bg);
28+
--variant-bg: var(--primary-bg);
29+
--variant-text: var(--primary-text);
30+
}
31+
32+
.kroma-hero[data-variant="secondary"] {
33+
--variant-light-bg: var(--secondary-light-bg);
34+
--variant-bg: var(--secondary-bg);
35+
--variant-text: var(--secondary-text);
36+
}
37+
38+
.kroma-hero[data-variant="danger"] {
39+
--variant-light-bg: var(--danger-light-bg);
40+
--variant-bg: var(--danger-bg);
41+
--variant-text: var(--danger-text);
42+
}
43+
44+
.kroma-hero[data-variant="info"] {
45+
--variant-light-bg: var(--info-light-bg);
46+
--variant-bg: var(--info-bg);
47+
--variant-text: var(--info-text);
48+
}
49+
50+
/* Overlay Effects */
51+
.kroma-hero[data-overlay]::before {
6252
content: "";
6353
position: absolute;
6454
top: 0;
@@ -67,131 +57,141 @@
6757
height: 100%;
6858
z-index: 0;
6959
border-radius: inherit;
70-
}
71-
72-
.hero[data-overlay="dark"]::before {
73-
background: rgba(0, 0, 0, 0.4);
74-
}
75-
76-
.hero[data-overlay="light"]::before {
77-
background: rgba(255, 255, 255, 0.4);
78-
}
79-
80-
.hero[data-overlay="gradient-dark"]::before {
60+
pointer-events: none;
61+
}
62+
63+
.kroma-hero[data-overlay="dark"]::before {
64+
background: rgba(0, 0, 0, 0.5);
65+
}
66+
67+
.kroma-hero[data-overlay="light"]::before {
68+
background: rgba(255, 255, 255, 0.5);
69+
}
70+
71+
.kroma-hero[data-overlay="gradient-dark"]::before {
8172
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2));
82-
}
83-
84-
.hero[data-overlay="gradient-light"]::before {
73+
}
74+
75+
.kroma-hero[data-overlay="gradient-light"]::before {
8576
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2));
86-
}
87-
88-
/* Hero Content */
89-
.hero-content {
77+
}
78+
79+
/* Hero Content */
80+
.kroma-hero-content {
9081
position: relative;
9182
z-index: 1;
9283
width: 100%;
9384
max-width: 90%;
9485
margin: 0 auto;
9586
padding: var(--space-4);
96-
}
97-
98-
/* Size Variants */
99-
.hero[data-size="sm"] { max-height: 40vh; }
100-
.hero[data-size="md"] { max-height: 60vh; }
101-
.hero[data-size="lg"] { max-height: 80vh; }
102-
.hero[data-size="xl"] { max-height: 90vh; }
103-
.hero[data-size="full"] { max-height: 100vh; }
104-
105-
/* Structure Variants */
106-
.hero[data-alignment="left"] { text-align: left; align-items: flex-start; }
107-
.hero[data-alignment="right"] { text-align: right; align-items: flex-end; }
108-
.hero[data-alignment="centered"] { text-align: center; align-items: center; }
109-
110-
/* Content Width Variants */
111-
.hero[data-content-width="narrow"] .hero-content { max-width: 65ch; }
112-
.hero[data-content-width="wide"] .hero-content { max-width: 100ch; }
113-
.hero[data-content-width="full"] .hero-content { max-width: 100%; }
114-
115-
/* Spacing Variants */
116-
.hero[data-spacing="sm"] { padding: var(--space-4); }
117-
.hero[data-spacing="md"] { padding: var(--space-6); }
118-
.hero[data-spacing="lg"] { padding: var(--space-8); }
119-
.hero[data-spacing="xl"] { padding: var(--space-12); }
120-
121-
/* Border Radius Variants */
122-
.hero[data-radius="none"] { border-radius: 0; }
123-
.hero[data-radius="sm"] { border-radius: var(--radius-sm); }
124-
.hero[data-radius="md"] { border-radius: var(--radius-md); }
125-
.hero[data-radius="lg"] { border-radius: var(--radius-lg); }
126-
.hero[data-radius="xl"] { border-radius: var(--radius-xl); }
127-
.hero[data-radius="full"] { border-radius: var(--radius-full); }
128-
129-
/* Shadow Variants */
130-
.hero[data-shadow="none"] { box-shadow: none; }
131-
.hero[data-shadow="sm"] { box-shadow: var(--shadow-sm); }
132-
.hero[data-shadow="md"] { box-shadow: var(--shadow-md); }
133-
.hero[data-shadow="lg"] { box-shadow: var(--shadow-lg); }
134-
.hero[data-shadow="xl"] { box-shadow: var(--shadow-xl); }
135-
136-
/* Hover Effects */
137-
.hero[data-hover="lift"]:hover {
138-
transform: translateY(-3px);
87+
font-size: var(--font-lg);
88+
}
89+
90+
/* Size Variants */
91+
.kroma-hero[data-size="sm"] { max-height: 40vh; }
92+
.kroma-hero[data-size="md"] { max-height: 60vh; }
93+
.kroma-hero[data-size="lg"] { max-height: 80vh; }
94+
.kroma-hero[data-size="full"] { max-height: 100vh; }
95+
96+
/* Layout Options */
97+
.kroma-hero[data-layout="row"] {
98+
flex-direction: row;
99+
text-align: left;
100+
}
101+
102+
.kroma-hero[data-layout="row-reverse"] {
103+
flex-direction: row-reverse;
104+
text-align: left;
105+
}
106+
107+
.kroma-hero[data-layout="column"] {
108+
flex-direction: column;
109+
}
110+
111+
/* Content Alignment */
112+
.kroma-hero[data-alignment="start"] { justify-content: flex-start; }
113+
.kroma-hero[data-alignment="end"] { justify-content: flex-end; }
114+
.kroma-hero[data-alignment="center"] { justify-content: center; }
115+
116+
/* Content Width Variants */
117+
.kroma-hero[data-content-width="narrow"] .kroma-hero-content { max-width: 65ch; }
118+
.kroma-hero[data-content-width="wide"] .kroma-hero-content { max-width: 100ch; }
119+
120+
/* Spacing Variants */
121+
.kroma-hero[data-spacing="sm"] { padding: var(--space-3); }
122+
.kroma-hero[data-spacing="md"] { padding: var(--space-6); }
123+
.kroma-hero[data-spacing="lg"] { padding: var(--space-8); }
124+
125+
/* Border Radius Variants */
126+
.kroma-hero[data-radius="none"] { border-radius: 0; }
127+
.kroma-hero[data-radius="sm"] { border-radius: var(--radius-sm); }
128+
.kroma-hero[data-radius="lg"] { border-radius: var(--radius-lg); }
129+
130+
/* Shadow Variants */
131+
.kroma-hero[data-shadow="none"] { box-shadow: none; }
132+
.kroma-hero[data-shadow="sm"] { box-shadow: var(--shadow-sm); }
133+
.kroma-hero[data-shadow="xl"] { box-shadow: var(--shadow-xl); }
134+
135+
/* Hover Effects */
136+
.kroma-hero[data-hover="lift"]:hover {
137+
transform: translateY(-5px);
139138
box-shadow: var(--shadow-xl);
140-
}
141-
.hero[data-hover="scale"]:hover {
142-
transform: scale(1.02);
143-
}
144-
.hero[data-hover="brightness"]:hover {
145-
filter: brightness(1.1);
146-
}
147-
148-
/* Animation Variants */
149-
.hero[data-animation="fade"] { animation: heroFade 0.5s ease-in; }
150-
.hero[data-animation="slide"] { animation: heroSlide 0.5s ease-out; }
151-
.hero[data-animation="scale"] { animation: heroScale 0.5s ease-in-out; }
152-
153-
@keyframes heroFade {
139+
}
140+
141+
.kroma-hero[data-hover="scale"]:hover {
142+
transform: scale(1.03);
143+
}
144+
145+
.kroma-hero[data-hover="brightness"]:hover {
146+
filter: brightness(1.15);
147+
}
148+
149+
/* Animation Variants */
150+
.kroma-hero[data-animation="fade"] { animation: heroFade 0.5s ease-in; }
151+
.kroma-hero[data-animation="slide"] { animation: heroSlide 0.5s ease-out; }
152+
.kroma-hero[data-animation="scale"] { animation: heroScale 0.5s ease-in-out; }
153+
154+
@keyframes heroFade {
154155
from { opacity: 0; }
155156
to { opacity: 1; }
156-
}
157-
158-
@keyframes heroSlide {
157+
}
158+
159+
@keyframes heroSlide {
159160
from { transform: translateY(20px); opacity: 0; }
160161
to { transform: translateY(0); opacity: 1; }
161-
}
162-
163-
@keyframes heroScale {
162+
}
163+
164+
@keyframes heroScale {
164165
from { transform: scale(0.9); opacity: 0; }
165166
to { transform: scale(1); opacity: 1; }
166-
}
167-
168-
/* Responsive Adjustments */
169-
@media (max-width: 1280px) {
170-
.hero-content { max-width: 95%; }
171-
}
172-
173-
@media (max-width: 1024px) {
174-
.hero {
175-
margin: var(--space-3);
176-
padding: var(--space-3);
177-
width: calc(100% - var(--space-6));
167+
}
168+
169+
/* Hero Image */
170+
.kroma-hero[data-image] {
171+
background-size: cover;
172+
background-position: center;
173+
background-repeat: no-repeat;
174+
}
175+
176+
.kroma-hero[data-image]::before {
177+
background: none; /* Ensures overlay is only applied on image backgrounds */
178+
}
179+
180+
/* Responsive Adjustments */
181+
@media (max-width: 1280px) {
182+
.kroma-hero-content { max-width: 95%; }
183+
}
184+
185+
@media (max-width: 1024px) {
186+
.kroma-hero {
187+
margin: var(--space-3);
188+
padding: var(--space-3);
178189
}
179-
.hero[data-spacing="xl"] { padding: var(--space-8); }
180-
}
181-
182-
@media (max-width: 768px) {
183-
.hero {
184-
margin: var(--space-2);
185-
padding: var(--space-2);
186-
width: calc(100% - var(--space-4));
190+
}
191+
192+
@media (max-width: 768px) {
193+
.kroma-hero-content {
194+
font-size: clamp(0.875rem, 1.5vw, 1rem);
187195
}
188-
.hero-content {
189-
font-size: clamp(0.875rem, 1.5vw, 1rem);
190-
max-width: 100%;
191-
}
192-
.hero[data-spacing="lg"], .hero[data-spacing="xl"] { padding: var(--space-6); }
193-
}
194-
195-
@media (max-width: 640px) {
196-
.hero[data-spacing="md"], .hero[data-spacing="lg"], .hero[data-spacing="xl"] { padding: var(--space-4); }
197-
}
196+
}
197+

0 commit comments

Comments
 (0)