Skip to content

Commit 26e2af1

Browse files
OhsweddOhswedd
committed
First bulk of components palette improvement
1 parent ab2bd24 commit 26e2af1

File tree

7 files changed

+377
-181
lines changed

7 files changed

+377
-181
lines changed

‎css/components/accordion.css‎

Lines changed: 61 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
background-color: var(--neutral-50);
3131
border: none;
3232
border-radius: var(--radius-md);
33-
transition: background-color var(--transition-all), box-shadow var(--transition-all);
33+
transition: background-color var(--transition-colors), box-shadow var(--transition-all);
3434
}
3535
.accordion-header:hover,
3636
.accordion-header:focus {
@@ -65,32 +65,81 @@
6565
text-align: left;
6666
width: 100%;
6767
border-radius: var(--radius-md);
68-
transition: background-color var(--transition-all);
68+
transition: background-color var(--transition-colors);
6969
}
7070
.accordion-sub-header:hover {
7171
background-color: var(--neutral-100);
7272
}
7373

7474
/* Color Variants */
7575
.accordion-container[data-variant="primary"] .accordion-header {
76-
background-color: var(--primary);
77-
color: white;
76+
background-color: var(--primary-bg);
77+
color: var(--primary-text);
78+
box-shadow: var(--primary-shadow);
79+
border: 1px solid var(--primary-border);
7880
}
81+
.accordion-container[data-variant="primary"] .accordion-header:hover {
82+
background-color: var(--primary-hover-bg);
83+
}
84+
7985
.accordion-container[data-variant="secondary"] .accordion-header {
80-
background-color: var(--secondary);
81-
color: white;
86+
background-color: var(--secondary-bg);
87+
color: var(--secondary-text);
88+
box-shadow: var(--secondary-shadow);
89+
border: 1px solid var(--secondary-border);
8290
}
91+
.accordion-container[data-variant="secondary"] .accordion-header:hover {
92+
background-color: var(--secondary-hover-bg);
93+
}
94+
8395
.accordion-container[data-variant="success"] .accordion-header {
84-
background-color: var(--success);
85-
color: white;
96+
background-color: var(--success-bg);
97+
color: var(--success-text);
98+
box-shadow: var(--success-shadow);
99+
border: 1px solid var(--success-border);
86100
}
101+
.accordion-container[data-variant="success"] .accordion-header:hover {
102+
background-color: var(--success-hover-bg);
103+
}
104+
87105
.accordion-container[data-variant="danger"] .accordion-header {
88-
background-color: var(--danger);
89-
color: white;
106+
background-color: var(--danger-bg);
107+
color: var(--danger-text);
108+
box-shadow: var(--danger-shadow);
109+
border: 1px solid var(--danger-border);
90110
}
111+
.accordion-container[data-variant="danger"] .accordion-header:hover {
112+
background-color: var(--danger-hover-bg);
113+
}
114+
91115
.accordion-container[data-variant="warning"] .accordion-header {
92-
background-color: var(--warning);
93-
color: white;
116+
background-color: var(--warning-bg);
117+
color: var(--warning-text);
118+
box-shadow: var(--warning-shadow);
119+
border: 1px solid var(--warning-border);
120+
}
121+
.accordion-container[data-variant="warning"] .accordion-header:hover {
122+
background-color: var(--warning-hover-bg);
123+
}
124+
125+
.accordion-container[data-variant="info"] .accordion-header {
126+
background-color: var(--info-bg);
127+
color: var(--info-text);
128+
box-shadow: var(--info-shadow);
129+
border: 1px solid var(--info-border);
130+
}
131+
.accordion-container[data-variant="info"] .accordion-header:hover {
132+
background-color: var(--info-hover-bg);
133+
}
134+
135+
.accordion-container[data-variant="accent"] .accordion-header {
136+
background-color: var(--accent-bg);
137+
color: var(--accent-text);
138+
box-shadow: var(--accent-shadow);
139+
border: 1px solid var(--accent-border);
140+
}
141+
.accordion-container[data-variant="accent"] .accordion-header:hover {
142+
background-color: var(--accent-hover-bg);
94143
}
95144

96145
/* Responsive Design */

‎css/components/alert.css‎

Lines changed: 66 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
flex-direction: column;
55
align-items: flex-start;
66
padding: clamp(var(--space-4), 1vw + var(--space-3), var(--space-6));
7-
margin: var(--space-4) auto;
7+
margin: var(--space-4) auto;
88
border-radius: var(--radius-md);
99
box-shadow: var(--shadow-md);
1010
font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);
@@ -16,26 +16,78 @@
1616
overflow: hidden;
1717
}
1818

19-
.alert[data-variant="success"] {
20-
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
21-
color: var(--success);
19+
/* Variant Styles */
20+
.alert[data-variant="primary"] {
21+
background-color: var(--primary-bg);
22+
color: var(--primary-text);
23+
box-shadow: var(--primary-shadow);
24+
border: 1px solid var(--primary-border);
25+
}
26+
.alert[data-variant="primary"]:hover {
27+
background-color: var(--primary-hover-bg);
2228
}
2329

24-
.alert[data-variant="warning"] {
25-
background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
26-
color: var(--warning);
30+
.alert[data-variant="secondary"] {
31+
background-color: var(--secondary-bg);
32+
color: var(--secondary-text);
33+
box-shadow: var(--secondary-shadow);
34+
border: 1px solid var(--secondary-border);
35+
}
36+
.alert[data-variant="secondary"]:hover {
37+
background-color: var(--secondary-hover-bg);
38+
}
39+
40+
.alert[data-variant="success"] {
41+
background-color: var(--success-bg);
42+
color: var(--success-text);
43+
box-shadow: var(--success-shadow);
44+
border: 1px solid var(--success-border);
45+
}
46+
.alert[data-variant="success"]:hover {
47+
background-color: var(--success-hover-bg);
2748
}
2849

2950
.alert[data-variant="danger"] {
30-
background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
31-
color: var(--danger);
51+
background-color: var(--danger-bg);
52+
color: var(--danger-text);
53+
box-shadow: var(--danger-shadow);
54+
border: 1px solid var(--danger-border);
55+
}
56+
.alert[data-variant="danger"]:hover {
57+
background-color: var(--danger-hover-bg);
58+
}
59+
60+
.alert[data-variant="warning"] {
61+
background-color: var(--warning-bg);
62+
color: var(--warning-text);
63+
box-shadow: var(--warning-shadow);
64+
border: 1px solid var(--warning-border);
65+
}
66+
.alert[data-variant="warning"]:hover {
67+
background-color: var(--warning-hover-bg);
3268
}
3369

3470
.alert[data-variant="info"] {
35-
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
36-
color: var(--info);
71+
background-color: var(--info-bg);
72+
color: var(--info-text);
73+
box-shadow: var(--info-shadow);
74+
border: 1px solid var(--info-border);
75+
}
76+
.alert[data-variant="info"]:hover {
77+
background-color: var(--info-hover-bg);
3778
}
3879

80+
.alert[data-variant="accent"] {
81+
background-color: var(--accent-bg);
82+
color: var(--accent-text);
83+
box-shadow: var(--accent-shadow);
84+
border: 1px solid var(--accent-border);
85+
}
86+
.alert[data-variant="accent"]:hover {
87+
background-color: var(--accent-hover-bg);
88+
}
89+
90+
/* Size Modifiers */
3991
.alert[data-size="large"] {
4092
padding: clamp(var(--space-6), 1vw + var(--space-4), var(--space-8));
4193
font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem);
@@ -48,6 +100,7 @@
48100
align-items: center;
49101
}
50102

103+
/* Shape Modifiers */
51104
.alert[data-shape="rounded"] {
52105
border-radius: var(--radius-xl);
53106
}
@@ -106,7 +159,7 @@
106159
}
107160

108161
.alert[data-shape="circle"] .alert-close {
109-
top: var(--space-4);
162+
top: var(--space-4);
110163
right: var(--space-4);
111164
}
112165

@@ -124,6 +177,7 @@
124177
transition: opacity 0.4s, transform 0.4s, max-height 0.4s ease-out, padding 0.4s, margin 0.4s;
125178
}
126179

180+
/* Responsive Design */
127181
@media (min-width: 600px) {
128182
.alert {
129183
flex-direction: row;

‎css/components/avatar.css‎

Lines changed: 76 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,38 @@
3939
}
4040

4141
/* Avatar Shapes */
42-
.avatar[data-shape="rounded"] { border-radius: var(--radius-lg); }
43-
.avatar[data-shape="square"] { border-radius: 0; }
42+
.avatar[data-shape="rounded"] {
43+
border-radius: var(--radius-lg);
44+
}
45+
.avatar[data-shape="square"] {
46+
border-radius: 0;
47+
}
4448

4549
/* Avatar Variants */
46-
.avatar[data-variant="primary"] { background-color: var(--primary); color: #fff; }
47-
.avatar[data-variant="secondary"] { background-color: var(--secondary); color: #fff; }
48-
.avatar[data-variant="success"] { background-color: var(--success); color: #fff; }
49-
.avatar[data-variant="danger"] { background-color: var(--danger); color: #fff; }
50-
.avatar[data-variant="warning"] { background-color: var(--warning); color: #fff; }
51-
.avatar[data-variant="info"] { background-color: var(--info); color: #fff; }
50+
.avatar[data-variant="primary"] {
51+
background-color: var(--primary-bg);
52+
color: var(--primary-text);
53+
}
54+
.avatar[data-variant="secondary"] {
55+
background-color: var(--secondary-bg);
56+
color: var(--secondary-text);
57+
}
58+
.avatar[data-variant="success"] {
59+
background-color: var(--success-bg);
60+
color: var(--success-text);
61+
}
62+
.avatar[data-variant="danger"] {
63+
background-color: var(--danger-bg);
64+
color: var(--danger-text);
65+
}
66+
.avatar[data-variant="warning"] {
67+
background-color: var(--warning-bg);
68+
color: var(--warning-text);
69+
}
70+
.avatar[data-variant="info"] {
71+
background-color: var(--info-bg);
72+
color: var(--info-text);
73+
}
5274

5375
/* Avatar with Image */
5476
.avatar img {
@@ -58,10 +80,14 @@
5880
display: block;
5981
transition: transform 0.3s ease;
6082
}
61-
.avatar img:hover { transform: scale(1.1); } /* Zoom effect on hover */
83+
.avatar img:hover {
84+
transform: scale(1.1);
85+
} /* Zoom effect on hover */
6286

6387
/* Initials Avatar */
64-
.avatar-initials { font-size: inherit; }
88+
.avatar-initials {
89+
font-size: inherit;
90+
}
6591

6692
/* Status Indicators */
6793
.avatar-status {
@@ -72,15 +98,23 @@
7298
height: 0.75rem;
7399
border-radius: 50%;
74100
border: 2px solid #fff;
75-
background-color: var(--status-color, var(--success));
101+
background-color: var(--status-color, var(--success-bg));
76102
box-shadow: var(--shadow-sm);
77103
}
78104

79105
/* Status Colors */
80-
.avatar[data-status="online"] .avatar-status { --status-color: var(--success); }
81-
.avatar[data-status="offline"] .avatar-status { --status-color: var(--neutral-400); }
82-
.avatar[data-status="busy"] .avatar-status { --status-color: var(--danger); }
83-
.avatar[data-status="away"] .avatar-status { --status-color: var(--warning); }
106+
.avatar[data-status="online"] .avatar-status {
107+
--status-color: var(--success-bg);
108+
}
109+
.avatar[data-status="offline"] .avatar-status {
110+
--status-color: var(--neutral-400);
111+
}
112+
.avatar[data-status="busy"] .avatar-status {
113+
--status-color: var(--danger-bg);
114+
}
115+
.avatar[data-status="away"] .avatar-status {
116+
--status-color: var(--warning-bg);
117+
}
84118

85119
/* Avatar Group */
86120
.avatar-group {
@@ -90,7 +124,7 @@
90124
.avatar-group .avatar:not(:first-child) {
91125
margin-left: -0.5rem;
92126
border: 2px solid #fff;
93-
box-shadow: var(--shadow-xs); /* Slight shadow for overlap */
127+
box-shadow: var(--shadow-sm); /* Slight shadow for overlap */
94128
}
95129

96130
/* Pulsing Avatar */
@@ -111,8 +145,14 @@
111145
z-index: -1;
112146
}
113147
@keyframes avatarPulse {
114-
0% { transform: scale(1); opacity: 1; }
115-
100% { transform: scale(1.6); opacity: 0; }
148+
0% {
149+
transform: scale(1);
150+
opacity: 1;
151+
}
152+
100% {
153+
transform: scale(1.6);
154+
opacity: 0;
155+
}
116156
}
117157

118158
/* Ghost Avatar */
@@ -144,9 +184,21 @@
144184
overflow: hidden;
145185
box-shadow: var(--shadow-xs);
146186
}
147-
.avatar[data-variant="primary"].avatar-bordered { border-color: var(--primary); }
148-
.avatar[data-variant="secondary"].avatar-bordered { border-color: var(--secondary); }
149-
.avatar[data-variant="success"].avatar-bordered { border-color: var(--success); }
150-
.avatar[data-variant="danger"].avatar-bordered { border-color: var(--danger); }
151-
.avatar[data-variant="warning"].avatar-bordered { border-color: var(--warning); }
152-
.avatar[data-variant="info"].avatar-bordered { border-color: var(--info); }
187+
.avatar[data-variant="primary"].avatar-bordered {
188+
border-color: var(--primary-border);
189+
}
190+
.avatar[data-variant="secondary"].avatar-bordered {
191+
border-color: var(--secondary-border);
192+
}
193+
.avatar[data-variant="success"].avatar-bordered {
194+
border-color: var(--success-border);
195+
}
196+
.avatar[data-variant="danger"].avatar-bordered {
197+
border-color: var(--danger-border);
198+
}
199+
.avatar[data-variant="warning"].avatar-bordered {
200+
border-color: var(--warning-border);
201+
}
202+
.avatar[data-variant="info"].avatar-bordered {
203+
border-color: var(--info-border);
204+
}

0 commit comments

Comments
 (0)