Skip to content

Commit 38ff2fe

Browse files
OhsweddOhswedd
committed
Stable Command Palette Component Release
1 parent a4d277c commit 38ff2fe

File tree

4 files changed

+352
-269
lines changed

4 files changed

+352
-269
lines changed

‎demo.html‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1285,29 +1285,25 @@ <h2 class="text-lg text-primary mb-6">File Upload Component Showcase</h2>
12851285

12861286
<section class="p-6 bg-neutral-50 shadow-md rounded my-6">
12871287
<h2 class="text-lg text-primary mb-4">Command Palette Showcase</h2>
1288+
<button class="kroma-btn" data-open-palette="palette1">Open Command Palette</button>
12881289

1289-
<!-- Trigger Button -->
1290-
<button id="open-palette" class="btn" data-variant="primary">Open Command Palette</button>
1291-
1292-
<!-- Command Palette -->
1293-
<div class="command-palette" id="command-palette" data-variant="warning">
1294-
<div class="palette-modal">
1295-
<div class="palette-header">
1290+
<div id="kroma-command-palette" class="kroma-command-palette" data-palette-id="palette1">
1291+
<div class="kroma-palette-modal">
1292+
<div class="kroma-palette-header">
12961293
<input
12971294
type="text"
1298-
placeholder="Search or type a command..."
1299-
id="command-search"
1300-
aria-label="Command Search"
1295+
placeholder="Search commands..."
1296+
aria-label="Search commands"
13011297
/>
13021298
</div>
1303-
<div class="palette-list">
1304-
<div class="palette-item" tabindex="0" data-command="action1">Action 1</div>
1305-
<div class="palette-item" tabindex="0" data-command="action2">Action 2</div>
1306-
<div class="palette-item" tabindex="0" data-command="action3">Action 3</div>
1307-
<div class="palette-item" tabindex="0" data-command="action4">Action 4</div>
1299+
<div class="kroma-palette-list">
1300+
<div class="kroma-palette-item" data-command="action1">Command 1</div>
1301+
<div class="kroma-palette-item" data-command="action2">Command 2</div>
1302+
<div class="kroma-palette-item" data-command="action3">Command 3</div>
13081303
</div>
1304+
<div class="kroma-palette-footer"><strong>Esc</strong></div>
13091305
</div>
1310-
</div>
1306+
</div>
13111307
</section>
13121308
<section class="p-6 bg-neutral-50 shadow-md rounded my-6">
13131309
<h2 class="text-lg text-primary mb-4">Codeblock Component Showcase</h2>

‎src/css/components/command-palette.css‎

Lines changed: 158 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,163 @@
11
/* Command Palette Base */
2-
.command-palette {
3-
display: none;
4-
position: fixed;
5-
top: 0;
6-
left: 0;
7-
width: 100vw;
8-
height: 100vh;
9-
background: rgba(0, 0, 0, 0.5);
10-
backdrop-filter: blur(4px);
11-
z-index: var(--z-50);
12-
align-items: center;
13-
justify-content: center;
14-
transition: opacity 0.3s ease, transform 0.3s ease;
2+
.kroma-command-palette {
3+
display: none;
4+
position: fixed;
5+
inset: 0; /* Shorthand for top: 0, right: 0, bottom: 0, left: 0 */
6+
background: rgba(0, 0, 0, 0.5); /* Semi-transparent backdrop */
7+
backdrop-filter: blur(4px); /* Blur effect for the backdrop */
8+
z-index: var(--z-50); /* Ensure it appears on top */
9+
align-items: center;
10+
justify-content: center;
11+
opacity: 0; /* Initial hidden state */
12+
transform: scale(0.95); /* Initial zoom effect */
13+
transition: opacity 0.3s ease, transform 0.3s ease;
14+
}
15+
16+
.kroma-command-palette.kroma-open {
17+
display: flex; /* Flexbox for centering */
18+
opacity: 1; /* Fade-in effect */
19+
transform: scale(1); /* Reset scale */
20+
}
21+
22+
/* Palette Modal */
23+
.kroma-command-palette .kroma-palette-modal {
24+
width: clamp(320px, 85%, 600px); /* Responsive width */
25+
background: var(--palette-bg, var(--neutral-50)); /* Background color */
26+
color: var(--palette-text, var(--neutral-900)); /* Text color */
27+
border-radius: var(--radius-lg); /* Rounded corners */
28+
box-shadow: var(--shadow-xl); /* Shadow for modal */
29+
padding: var(--space-4); /* Internal spacing */
30+
overflow: hidden;
31+
display: flex;
32+
flex-direction: column;
33+
gap: var(--space-3); /* Space between elements */
34+
animation: kroma-fadeIn 0.3s ease; /* Entry animation */
35+
}
36+
37+
/* Palette Header */
38+
.kroma-command-palette .kroma-palette-header {
39+
display: flex;
40+
align-items: center;
41+
gap: var(--space-2); /* Space between header elements */
42+
padding-bottom: var(--space-3);
43+
border-bottom: 1px solid var(--palette-header-border, var(--neutral-200));
44+
}
45+
46+
.kroma-command-palette .kroma-palette-header input {
47+
width: 100%;
48+
font-size: clamp(1rem, 1.2vw, 1.125rem); /* Responsive font size */
49+
padding: var(--space-3); /* Internal spacing */
50+
border: none;
51+
outline: none;
52+
border-radius: var(--radius-md);
53+
background: var(--palette-input-bg, var(--neutral-100));
54+
color: var(--palette-input-text, var(--neutral-900));
55+
transition: background-color 0.3s ease, color 0.3s ease;
56+
}
57+
58+
.kroma-command-palette .kroma-palette-header input::placeholder {
59+
color: var(--neutral-400); /* Placeholder text color */
60+
}
61+
62+
.kroma-command-palette .kroma-palette-header input:focus {
63+
background: var(--palette-input-focus-bg, var(--neutral-200));
64+
color: var(--palette-input-focus-text, var(--neutral-900));
65+
}
66+
67+
/* Palette List */
68+
.kroma-command-palette .kroma-palette-list {
69+
display: flex;
70+
flex-direction: column;
71+
max-height: 300px; /* Maximum height for scrolling */
72+
overflow-y: auto; /* Vertical scrolling */
73+
gap: var(--space-2); /* Space between items */
74+
scrollbar-width: thin; /* Thin scrollbar */
75+
scrollbar-color: var(--palette-scrollbar-thumb, var(--neutral-300)) var(--palette-scrollbar-track, var(--neutral-100));
76+
}
77+
78+
.kroma-command-palette .kroma-palette-list::-webkit-scrollbar {
79+
width: 6px; /* Scrollbar width */
80+
}
81+
82+
.kroma-command-palette .kroma-palette-list::-webkit-scrollbar-thumb {
83+
background-color: var(--palette-scrollbar-thumb, var(--neutral-300));
84+
border-radius: var(--radius-md); /* Rounded scrollbar */
85+
}
86+
87+
.kroma-command-palette .kroma-palette-list::-webkit-scrollbar-track {
88+
background-color: var(--palette-scrollbar-track, var(--neutral-100));
89+
}
90+
91+
/* Palette Item */
92+
.kroma-command-palette .kroma-palette-item {
93+
padding: var(--space-3);
94+
font-size: clamp(0.875rem, 1vw, 1rem); /* Responsive font size */
95+
border-radius: var(--radius-md); /* Rounded corners */
96+
color: var(--palette-item-text, var(--neutral-800)); /* Text color */
97+
background: var(--palette-item-bg, var(--neutral-100)); /* Background color */
98+
cursor: pointer;
99+
transition: background-color 0.3s ease, color 0.3s ease;
100+
}
101+
102+
.kroma-command-palette .kroma-palette-item:hover,
103+
.kroma-command-palette .kroma-palette-item:focus {
104+
background: var(--palette-item-hover-bg, var(--variant-hover-bg));
105+
color: var(--neutral-700);
106+
}
107+
108+
.kroma-command-palette .kroma-palette-item[data-active="true"] {
109+
background: var(--palette-item-active-bg, var(--variant-bg));
110+
color: var(--palette-item-active-text, var(--variant-text));
111+
}
112+
113+
/* No Results Message */
114+
.kroma-command-palette .kroma-no-results {
115+
text-align: center;
116+
color: var(--neutral-600); /* Subtle color for "No Results" */
117+
font-size: clamp(0.875rem, 1vw, 1rem); /* Responsive font size */
118+
padding: var(--space-3);
119+
}
120+
121+
/* Palette Footer */
122+
.kroma-command-palette .kroma-palette-footer {
123+
display: flex;
124+
justify-content: flex-end;
125+
padding-top: var(--space-3);
126+
border-top: 1px solid var(--palette-footer-border, var(--neutral-200));
127+
font-size: 0.875rem;
128+
color: var(--neutral-600);
129+
}
130+
131+
/* Variants */
132+
.kroma-command-palette[data-variant] {
133+
--palette-bg: var(--variant-bg);
134+
--palette-text: var(--variant-text);
135+
--palette-header-border: var(--variant-border);
136+
--palette-input-bg: var(--neutral-50);
137+
--palette-input-focus-bg: var(--variant-hover-bg);
138+
--palette-input-focus-text: var(--variant-text);
139+
--palette-item-hover-bg: var(--variant-hover-bg);
140+
--palette-item-hover-text: var(--neutral-50);
141+
--palette-item-active-bg: var(--variant-bg);
142+
--palette-item-active-text: var(--variant-text);
143+
--palette-footer-border: var(--variant-border);
144+
}
145+
146+
/* Responsive Adjustments */
147+
@media (max-width: 768px) {
148+
.kroma-command-palette .kroma-palette-modal {
149+
width: 95%; /* Full width for smaller screens */
15150
}
16-
17-
.command-palette.open {
18-
display: flex;
151+
}
152+
153+
/* Fade In Animation */
154+
@keyframes kroma-fadeIn {
155+
from {
156+
opacity: 0;
157+
transform: scale(0.95);
158+
}
159+
to {
19160
opacity: 1;
20161
transform: scale(1);
21162
}
22-
23-
.command-palette .palette-modal {
24-
width: clamp(320px, 85%, 600px);
25-
background: var(--palette-bg, var(--neutral-50));
26-
color: var(--palette-text, var(--neutral-900));
27-
border-radius: var(--radius-lg);
28-
box-shadow: var(--shadow-xl);
29-
padding: var(--space-4);
30-
overflow: hidden;
31-
display: flex;
32-
flex-direction: column;
33-
gap: var(--space-3);
34-
animation: fadeIn 0.3s ease;
35-
}
36-
37-
/* Palette Header */
38-
.command-palette .palette-header {
39-
display: flex;
40-
align-items: center;
41-
padding-bottom: var(--space-3);
42-
border-bottom: 1px solid var(--palette-header-border, var(--neutral-200));
43-
}
44-
45-
.command-palette .palette-header input {
46-
width: 100%;
47-
font-size: clamp(1rem, 1.2vw, 1.125rem);
48-
padding: var(--space-3);
49-
border: none;
50-
outline: none;
51-
border-radius: var(--radius-md);
52-
background: var(--palette-input-bg, var(--neutral-100));
53-
color: var(--palette-input-text, var(--neutral-900));
54-
transition: background-color 0.3s ease, color 0.3s ease;
55-
}
56-
57-
.command-palette .palette-header input::placeholder {
58-
color: var(--neutral-400);
59-
}
60-
61-
.command-palette .palette-header input:focus {
62-
background: var(--palette-input-focus-bg, var(--neutral-200));
63-
color: var(--palette-input-focus-text, var(--neutral-900));
64-
}
65-
66-
/* Palette List */
67-
.command-palette .palette-list {
68-
display: flex;
69-
flex-direction: column;
70-
max-height: 300px;
71-
overflow-y: auto;
72-
scrollbar-width: thin;
73-
gap: var(--space-2);
74-
}
75-
76-
/* Palette Item */
77-
.command-palette .palette-item {
78-
padding: var(--space-3);
79-
font-size: clamp(0.875rem, 1vw, 1rem);
80-
border-radius: var(--radius-md);
81-
color: var(--palette-item-text, var(--neutral-800));
82-
background: var(--palette-item-bg, var(--neutral-100));
83-
cursor: pointer;
84-
transition: background-color 0.3s ease, color 0.3s ease;
85-
}
86-
87-
.command-palette .palette-item:hover,
88-
.command-palette .palette-item:focus {
89-
background: var(--palette-item-hover-bg, var(--variant-hover-bg));
90-
color: var(--palette-item-hover-text, var(--neutral-50));
91-
}
92-
93-
.command-palette .palette-item[data-active="true"] {
94-
background: var(--palette-item-active-bg, var(--variant-bg));
95-
color: var(--palette-item-active-text, var(--variant-text));
96-
}
97-
98-
/* No Results */
99-
.command-palette .no-results {
100-
text-align: center;
101-
color: var(--neutral-600);
102-
font-size: 0.875rem;
103-
padding: var(--space-3);
104-
}
105-
106-
/* Palette Footer */
107-
.command-palette .palette-footer {
108-
display: flex;
109-
justify-content: flex-end;
110-
padding-top: var(--space-3);
111-
border-top: 1px solid var(--palette-footer-border, var(--neutral-200));
112-
font-size: 0.875rem;
113-
color: var(--neutral-600);
114-
}
115-
116-
/* Variants */
117-
.command-palette[data-variant] {
118-
--palette-bg: var(--variant-bg);
119-
--palette-text: var(--variant-text);
120-
--palette-header-border: var(--variant-border);
121-
--palette-input-bg: var(--neutral-50); /* Ensures a solid background for inputs */
122-
--palette-input-text: var(--neutral-900); /* Text remains readable */
123-
--palette-input-focus-bg: var(--variant-hover-bg);
124-
--palette-input-focus-text: var(--variant-text);
125-
--palette-item-bg: var(--neutral-100); /* Neutral background for items */
126-
--palette-item-text: var(--neutral-800); /* Ensures text is readable */
127-
--palette-item-hover-bg: var(--variant-hover-bg); /* Bold hover background */
128-
--palette-item-hover-text: var(--neutral-50); /* Contrasting text on hover */
129-
--palette-item-active-bg: var(--variant-bg);
130-
--palette-item-active-text: var(--variant-text);
131-
--palette-footer-border: var(--variant-border);
132-
}
133-
134-
/* Responsive Adjustments */
135-
@media (max-width: 768px) {
136-
.command-palette .palette-modal {
137-
width: 95%;
138-
}
139-
}
140-
163+
}

0 commit comments

Comments
 (0)