Skip to content

Commit e6936e0

Browse files
ToolboxAidToolboxAid
committed
Match template form controls to Palette Manager V2 styling patterns - PR_26126_075-template-form-style-match-palette-manager
1 parent 04ce0e3 commit e6936e0

2 files changed

Lines changed: 104 additions & 28 deletions

File tree

‎tests/playwright/PreviewGeneratorV2Baseline.spec.mjs‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -623,6 +623,43 @@ test.describe("Preview Generator V2 baseline", () => {
623623
expect(clearStyle.paddingLeft).toBe("6px");
624624
expect(clearStyle.paddingRight).toBe("6px");
625625
expect(clearStyle.cursor).toBe("pointer");
626+
const formStyle = await page.locator(".tool-starter__field").first().evaluate((field) => {
627+
const sourceInput = document.getElementById("sourceInput");
628+
const statusLog = document.getElementById("statusLog");
629+
const toolButton = document.getElementById("toolExportButton");
630+
const panel = document.querySelector(".tool-starter__panel--left");
631+
const fieldStyle = getComputedStyle(field);
632+
const sourceInputStyle = getComputedStyle(sourceInput);
633+
const statusLogStyle = getComputedStyle(statusLog);
634+
const toolButtonStyle = getComputedStyle(toolButton);
635+
const panelStyle = getComputedStyle(panel);
636+
return {
637+
fieldGap: fieldStyle.gap,
638+
fieldColumns: fieldStyle.gridTemplateColumns,
639+
inputBorderRadius: sourceInputStyle.borderRadius,
640+
inputBackground: sourceInputStyle.backgroundColor,
641+
inputColor: sourceInputStyle.color,
642+
buttonBorderRadius: toolButtonStyle.borderRadius,
643+
buttonPaddingLeft: toolButtonStyle.paddingLeft,
644+
buttonPaddingRight: toolButtonStyle.paddingRight,
645+
textareaBorderRadius: statusLogStyle.borderRadius,
646+
textareaBackground: statusLogStyle.backgroundColor,
647+
panelBorderRadius: panelStyle.borderRadius,
648+
panelPadding: panelStyle.paddingTop
649+
};
650+
});
651+
expect(formStyle.fieldGap).toBe("8px");
652+
expect(formStyle.fieldColumns).toContain("74px");
653+
expect(formStyle.inputBorderRadius).toBe("10px");
654+
expect(formStyle.inputBackground).toBe("rgba(43, 16, 91, 0.9)");
655+
expect(formStyle.inputColor).toBe("rgb(247, 244, 255)");
656+
expect(formStyle.buttonBorderRadius).toBe("10px");
657+
expect(formStyle.buttonPaddingLeft).toBe("6px");
658+
expect(formStyle.buttonPaddingRight).toBe("6px");
659+
expect(formStyle.textareaBorderRadius).toBe("8px");
660+
expect(formStyle.textareaBackground).toBe("rgba(0, 0, 0, 0.24)");
661+
expect(formStyle.panelBorderRadius).toBe("8px");
662+
expect(formStyle.panelPadding).toBe("14px");
626663

627664
const duplicateIds = await page.evaluate(() => {
628665
const ids = [...document.querySelectorAll("[id]")].map((element) => element.id);

‎tools/templates-v2/styles/toolStarter.css‎

Lines changed: 67 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
:root {
22
--tool-starter-bg: var(--bg-gradient, linear-gradient(180deg, #c4b5fd 0%, #a78bfa 18%, #8b5cf6 36%, #7c3aed 54%, #6d28d9 74%, #5b21b6 88%, #4c1d95 100%));
3-
--tool-starter-panel: var(--pm-surface, rgba(40, 25, 84, 0.72));
4-
--tool-starter-panel-strong: var(--pm-surface-strong, rgba(0, 0, 0, 0.24));
5-
--tool-starter-line: var(--pm-line, rgba(221, 214, 254, 0.26));
3+
--tool-starter-panel: var(--panel, rgba(30, 24, 48, 0.92));
4+
--tool-starter-surface: var(--surface-inline, rgba(18, 16, 28, 0.78));
5+
--tool-starter-panel-strong: rgba(0, 0, 0, 0.24);
6+
--tool-starter-input-surface: var(--surface-inline, rgba(43, 16, 91, 0.9));
7+
--tool-starter-line: var(--line, rgba(221, 214, 254, 0.26));
8+
--tool-starter-surface-border: var(--surface-border, rgba(221, 214, 254, 0.22));
69
--tool-starter-text: var(--text, #f7f4ff);
7-
--tool-starter-muted: var(--pm-text-muted, #c4b5fd);
10+
--tool-starter-muted: var(--muted, #c4b5fd);
811
--tool-starter-header-muted: var(--muted, #e9ddff);
912
--tool-starter-accent: var(--accent, #ddd6fe);
1013
--tool-starter-danger: #ffb4b4;
1114
--tool-starter-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
15+
--tool-starter-shadow-strong: 0 20px 44px rgba(0, 0, 0, 0.26);
1216
color-scheme: dark;
1317
font-family: Inter, Segoe UI, system-ui, sans-serif;
1418
}
@@ -28,31 +32,50 @@ body {
2832

2933
button,
3034
input,
35+
select,
3136
textarea {
3237
font: inherit;
3338
}
3439

3540
button {
36-
border: 1px solid var(--tool-starter-line);
37-
border-radius: 6px;
38-
background: var(--tool-starter-panel-strong);
39-
color: var(--tool-starter-text);
41+
border: 1px solid var(--tool-starter-line) !important;
42+
border-radius: 10px !important;
43+
background: ButtonFace;
44+
color: ButtonText;
4045
cursor: pointer;
41-
padding: 8px 12px;
46+
padding: 2px 6px;
4247
}
4348

4449
button:disabled {
4550
cursor: not-allowed;
46-
opacity: 0.55;
51+
opacity: 0.62;
52+
filter: saturate(0.72);
53+
box-shadow: none;
4754
}
4855

4956
button:focus-visible,
5057
input:focus-visible,
58+
select:focus-visible,
5159
textarea:focus-visible {
5260
outline: 2px solid var(--tool-starter-accent);
5361
outline-offset: 2px;
5462
}
5563

64+
input,
65+
select,
66+
textarea {
67+
border: 1px solid var(--tool-starter-surface-border);
68+
border-radius: 10px !important;
69+
background: var(--tool-starter-input-surface);
70+
color: var(--tool-starter-text);
71+
}
72+
73+
input:hover,
74+
select:hover,
75+
textarea:hover {
76+
border-color: var(--card-hover-border, #c4b5fd);
77+
}
78+
5679
.is-collapsible {
5780
border-bottom: 1px solid var(--tool-starter-line);
5881
background: transparent;
@@ -121,12 +144,18 @@ textarea:focus-visible {
121144
}
122145

123146
.tool-starter__menu {
147+
box-sizing: border-box;
148+
width: calc(100% - 32px);
124149
display: flex;
150+
align-items: center;
125151
justify-content: center;
126-
gap: 10px;
127-
border-bottom: 1px solid var(--tool-starter-line);
152+
flex-wrap: wrap;
153+
gap: 12px;
154+
margin: 16px 16px 0;
155+
border: 1px solid var(--tool-starter-line);
156+
border-radius: 8px;
128157
background: var(--tool-starter-panel);
129-
padding: 10px;
158+
padding: 10px 14px;
130159
}
131160

132161
.tool-starter__menu[hidden] {
@@ -136,34 +165,46 @@ textarea:focus-visible {
136165
.tool-starter.app-shell {
137166
height: calc(100vh - 137px);
138167
min-height: 0;
168+
width: min(1600px, calc(100% - 32px));
169+
margin: 0 auto 16px;
139170
display: grid;
140-
grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(240px, 300px);
141-
gap: 12px;
171+
grid-template-columns: 340px minmax(0, 1fr) 360px;
172+
gap: 14px;
173+
border: 1px solid var(--tool-starter-line);
174+
border-radius: 20px;
175+
box-shadow: var(--tool-starter-shadow-strong);
142176
overflow: hidden;
143-
padding: 12px;
177+
padding: 16px;
144178
}
145179

146180
.tool-starter__panel {
147181
min-width: 0;
148182
min-height: 0;
149183
display: flex;
150184
flex-direction: column;
151-
gap: 12px;
152-
overflow: hidden;
185+
gap: 14px;
186+
border: 1px solid var(--tool-starter-line);
187+
border-radius: 8px;
188+
background: var(--tool-starter-panel);
189+
overflow: auto;
190+
padding: 14px;
153191
}
154192

155193
.tool-starter__panel--center {
156194
min-height: 0;
157195
}
158196

159197
.accordion-v2 {
198+
--accordion-v2-accent: var(--tool-starter-accent);
199+
--accordion-v2-line: var(--tool-starter-line);
200+
--accordion-v2-surface: var(--tool-starter-surface);
160201
min-width: 0;
161202
min-height: 0;
162203
display: flex;
163204
flex-direction: column;
164205
border: 1px solid var(--tool-starter-line);
165206
border-radius: 8px;
166-
background: var(--tool-starter-panel);
207+
background: var(--tool-starter-surface);
167208
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
168209
overflow: hidden;
169210
}
@@ -255,20 +296,18 @@ textarea:focus-visible {
255296
}
256297

257298
.tool-starter__field {
299+
min-width: 0;
258300
display: grid;
259-
grid-template-columns: 110px minmax(0, 1fr);
301+
grid-template-columns: 74px minmax(0, 1fr);
260302
align-items: center;
261-
gap: 10px;
303+
gap: 8px;
304+
font-weight: 700;
262305
}
263306

264307
.tool-starter__field input {
265308
width: 100%;
266309
min-width: 0;
267-
border: 1px solid var(--tool-starter-line);
268-
border-radius: 6px;
269-
background: var(--tool-starter-panel-strong);
270-
color: var(--tool-starter-text);
271-
padding: 8px 10px;
310+
padding: 7px 9px;
272311
}
273312

274313
.tool-starter__hint {
@@ -320,11 +359,11 @@ textarea:focus-visible {
320359
min-height: 160px;
321360
margin: 0;
322361
border: 1px solid var(--tool-starter-line);
323-
border-radius: 6px;
362+
border-radius: 8px !important;
324363
background: var(--tool-starter-panel-strong);
325364
color: var(--tool-starter-text);
326365
overflow: auto;
327-
padding: 10px;
366+
padding: 12px;
328367
white-space: pre-wrap;
329368
}
330369

0 commit comments

Comments
 (0)