Skip to content

Commit 414356b

Browse files
robertpiosikrobertpiosik
committed
Refactor UI styling and components to centralize color variables and standardize the appearance of settings sections and input fields
1 parent 4a1ba08 commit 414356b

19 files changed

Lines changed: 429 additions & 171 deletions

File tree

‎packages/ui/src/components/editor/common/Input/Input.module.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.input {
2-
background-color: var(--vscode-input-background);
3-
border: 1px solid var(--vscode-input-border);
2+
border: 1px solid var(--cwc-stroke-primary);
3+
background: var(--vscode-input-background);
44
color: var(--vscode-input-foreground);
55
padding: var(--padding-4px) var(--padding-8px);
66
border-radius: var(--border-radius-4px);

‎packages/ui/src/components/editor/panel/Configurations/Configurations.module.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,10 +95,10 @@
9595

9696
.footer {
9797
display: flex;
98-
padding: var(--padding-8px) var(--padding-12px);
98+
padding: var(--padding-8px) var(--padding-12px) var(--padding-12px)
99+
var(--padding-12px);
99100

100101
> button {
101-
width: 100%;
102102
flex: 1;
103103
}
104104
}

‎packages/ui/src/components/editor/panel/Presets/Presets.module.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,8 @@
119119

120120
.footer {
121121
display: flex;
122-
padding: var(--padding-8px) var(--padding-12px);
122+
padding: var(--padding-8px) var(--padding-12px) var(--padding-12px)
123+
var(--padding-12px);
123124

124125
> button {
125126
flex: 1;

‎packages/ui/src/components/editor/settings/ConfigurationsList/ConfigurationsList.module.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.container {
22
display: flex;
33
flex-direction: column;
4+
padding-top: var(--padding-12px);
45
}
56

67
.toolbar {
@@ -13,8 +14,6 @@
1314
.list {
1415
display: flex;
1516
flex-direction: column;
16-
border: 1px solid var(--vscode-welcomePage-tileBorder);
17-
border-radius: var(--border-radius-10px);
1817
overflow: hidden;
1918
}
2019

‎packages/ui/src/components/editor/settings/Item/Item.module.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
align-items: center;
44
justify-content: space-between;
55
gap: var(--padding-8px);
6+
padding: var(--padding-12px);
67

78
&--below {
89
flex-direction: column;
@@ -24,7 +25,7 @@
2425
}
2526

2627
.description {
27-
color: var(--vscode-descriptionForeground);
28+
color: var(--cwc-text-secondary);
2829
}
2930

3031
.slot {

‎packages/ui/src/components/editor/settings/ModelProviders/ModelProviders.module.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.container {
22
display: flex;
33
flex-direction: column;
4+
padding-top: var(--padding-12px);
45
}
56

67
.toolbar {
@@ -13,8 +14,6 @@
1314
.list {
1415
display: flex;
1516
flex-direction: column;
16-
border: 1px solid var(--vscode-welcomePage-tileBorder);
17-
border-radius: var(--border-radius-10px);
1817
overflow: hidden;
1918
}
2019

‎packages/ui/src/components/editor/settings/Section/Section.module.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,21 @@
5454
}
5555

5656
&__subtitle {
57+
color: var(--cwc-text-secondary);
5758
font-size: var(--font-size-14px);
5859
}
5960
}
61+
62+
.content {
63+
border-radius: var(--border-radius-10px);
64+
color: var(--vscode-sideBarTitle-foreground);
65+
background-color: var(--cwc-bg-tertiary);
66+
67+
> div {
68+
border-top: 1px solid var(--cwc-stroke-tertiary);
69+
}
70+
71+
> div:first-child {
72+
border-top-width: 0;
73+
}
74+
}

‎packages/ui/src/components/editor/settings/Section/Section.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export const Section = forwardRef<HTMLDivElement, Props>((props, ref) => {
9696
<div className={styles.header__title}>{props.title}</div>
9797
<div className={styles.header__subtitle}>{props.subtitle}</div>
9898
</div>
99-
{props.children}
99+
<div className={styles.content}>{props.children}</div>
100100
</div>
101101
)
102102
})

‎packages/ui/src/styles/foundation/_colors.scss‎

Lines changed: 263 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
@mixin colors {
2+
--cwc-text-toned-primary: var(--vscode-editor-foreground);
3+
--cwc-text-primary: var(--vscode-foreground);
4+
--cwc-text-secondary: color-mix(
5+
in srgb,
6+
var(--vscode-foreground) 70%,
7+
transparent
8+
);
9+
--cwc-text-tertiary: color-mix(
10+
in srgb,
11+
var(--vscode-foreground) 50%,
12+
transparent
13+
);
14+
--cwc-text-quaternary: color-mix(
15+
in srgb,
16+
var(--vscode-foreground) 30%,
17+
transparent
18+
);
19+
--cwc-text-red-primary: var(--vscode-charts-red);
20+
--cwc-text-red-secondary: color-mix(
21+
in srgb,
22+
var(--vscode-charts-red) 68%,
23+
transparent
24+
);
25+
--cwc-text-yellow-primary: var(--vscode-charts-yellow);
26+
--cwc-text-yellow-secondary: color-mix(
27+
in srgb,
28+
var(--vscode-charts-yellow) 68%,
29+
transparent
30+
);
31+
--cwc-text-green-primary: var(--vscode-charts-green);
32+
--cwc-text-green-secondary: color-mix(
33+
in srgb,
34+
var(--vscode-charts-green) 68%,
35+
transparent
36+
);
37+
--cwc-text-magenta-primary: var(--vscode-charts-purple);
38+
--cwc-text-magenta-secondary: color-mix(
39+
in srgb,
40+
var(--vscode-charts-purple) 68%,
41+
transparent
42+
);
43+
--cwc-text-cyan-primary: var(--vscode-charts-blue);
44+
--cwc-text-cyan-secondary: color-mix(
45+
in srgb,
46+
var(--vscode-charts-blue) 68%,
47+
transparent
48+
);
49+
--cwc-text-orange-primary: var(--vscode-charts-orange);
50+
--cwc-text-orange-secondary: color-mix(
51+
in srgb,
52+
var(--vscode-charts-orange) 68%,
53+
transparent
54+
);
55+
--cwc-icon-primary: color-mix(
56+
in srgb,
57+
var(--vscode-foreground) 92%,
58+
transparent
59+
);
60+
--cwc-icon-secondary: color-mix(
61+
in srgb,
62+
var(--vscode-foreground) 56%,
63+
transparent
64+
);
65+
--cwc-icon-tertiary: color-mix(
66+
in srgb,
67+
var(--vscode-foreground) 40%,
68+
transparent
69+
);
70+
--cwc-icon-quaternary: color-mix(
71+
in srgb,
72+
var(--vscode-foreground) 12%,
73+
transparent
74+
);
75+
--cwc-icon-red-primary: color-mix(
76+
in srgb,
77+
var(--vscode-charts-red) 92%,
78+
transparent
79+
);
80+
--cwc-icon-red-secondary: color-mix(
81+
in srgb,
82+
var(--vscode-charts-red) 60%,
83+
transparent
84+
);
85+
--cwc-icon-yellow-primary: color-mix(
86+
in srgb,
87+
var(--vscode-charts-yellow) 92%,
88+
transparent
89+
);
90+
--cwc-icon-yellow-secondary: color-mix(
91+
in srgb,
92+
var(--vscode-charts-yellow) 60%,
93+
transparent
94+
);
95+
--cwc-icon-green-primary: color-mix(
96+
in srgb,
97+
var(--vscode-charts-green) 92%,
98+
transparent
99+
);
100+
--cwc-icon-green-secondary: color-mix(
101+
in srgb,
102+
var(--vscode-charts-green) 60%,
103+
transparent
104+
);
105+
--cwc-icon-magenta-primary: color-mix(
106+
in srgb,
107+
var(--vscode-charts-purple) 92%,
108+
transparent
109+
);
110+
--cwc-icon-magenta-secondary: color-mix(
111+
in srgb,
112+
var(--vscode-charts-purple) 60%,
113+
transparent
114+
);
115+
--cwc-icon-cyan-primary: color-mix(
116+
in srgb,
117+
var(--vscode-charts-blue) 92%,
118+
transparent
119+
);
120+
--cwc-icon-cyan-secondary: color-mix(
121+
in srgb,
122+
var(--vscode-charts-blue) 60%,
123+
transparent
124+
);
125+
--cwc-bg-primary: color-mix(
126+
in srgb,
127+
var(--vscode-foreground) 20%,
128+
transparent
129+
);
130+
--cwc-bg-secondary: color-mix(
131+
in srgb,
132+
var(--vscode-foreground) 8%,
133+
transparent
134+
);
135+
--cwc-bg-tertiary: color-mix(
136+
in srgb,
137+
var(--vscode-foreground) 4%,
138+
transparent
139+
);
140+
--cwc-bg-elevated: var(--vscode-quickInput-background);
141+
--cwc-bg-yellow-primary: var(--vscode-charts-yellow);
142+
--cwc-bg-yellow-secondary: color-mix(
143+
in srgb,
144+
var(--vscode-charts-yellow) 12%,
145+
transparent
146+
);
147+
--cwc-bg-red-primary: var(--vscode-charts-red);
148+
--cwc-bg-red-secondary: color-mix(
149+
in srgb,
150+
var(--vscode-charts-red) 12%,
151+
transparent
152+
);
153+
--cwc-bg-green-primary: var(--vscode-charts-green);
154+
--cwc-bg-green-secondary: color-mix(
155+
in srgb,
156+
var(--vscode-charts-green) 12%,
157+
transparent
158+
);
159+
--cwc-bg-magenta-primary: var(--vscode-charts-purple);
160+
--cwc-bg-magenta-secondary: color-mix(
161+
in srgb,
162+
var(--vscode-charts-purple) 12%,
163+
transparent
164+
);
165+
--cwc-bg-cyan-primary: var(--vscode-charts-blue);
166+
--cwc-bg-cyan-secondary: color-mix(
167+
in srgb,
168+
var(--vscode-charts-blue) 12%,
169+
transparent
170+
);
171+
--cwc-stroke-primary: color-mix(
172+
in srgb,
173+
var(--vscode-foreground) 16%,
174+
transparent
175+
);
176+
--cwc-stroke-secondary: color-mix(
177+
in srgb,
178+
var(--vscode-foreground) 12%,
179+
transparent
180+
);
181+
--cwc-stroke-tertiary: color-mix(
182+
in srgb,
183+
var(--vscode-foreground) 8%,
184+
transparent
185+
);
186+
--cwc-stroke-quaternary: color-mix(
187+
in srgb,
188+
var(--vscode-foreground) 4%,
189+
transparent
190+
);
191+
--cwc-stroke-red-primary: color-mix(
192+
in srgb,
193+
var(--vscode-charts-red) 56%,
194+
transparent
195+
);
196+
--cwc-stroke-red-secondary: color-mix(
197+
in srgb,
198+
var(--vscode-charts-red) 32%,
199+
transparent
200+
);
201+
--cwc-stroke-yellow-primary: color-mix(
202+
in srgb,
203+
var(--vscode-charts-yellow) 56%,
204+
transparent
205+
);
206+
--cwc-stroke-yellow-secondary: color-mix(
207+
in srgb,
208+
var(--vscode-charts-yellow) 32%,
209+
transparent
210+
);
211+
--cwc-stroke-green-primary: color-mix(
212+
in srgb,
213+
var(--vscode-charts-green) 56%,
214+
transparent
215+
);
216+
--cwc-stroke-green-secondary: color-mix(
217+
in srgb,
218+
var(--vscode-charts-green) 32%,
219+
transparent
220+
);
221+
--cwc-stroke-magenta-primary: color-mix(
222+
in srgb,
223+
var(--vscode-charts-purple) 56%,
224+
transparent
225+
);
226+
--cwc-stroke-magenta-secondary: color-mix(
227+
in srgb,
228+
var(--vscode-charts-purple) 32%,
229+
transparent
230+
);
231+
--cwc-stroke-cyan-primary: color-mix(
232+
in srgb,
233+
var(--vscode-charts-blue) 56%,
234+
transparent
235+
);
236+
--cwc-stroke-cyan-secondary: color-mix(
237+
in srgb,
238+
var(--vscode-charts-blue) 32%,
239+
transparent
240+
);
241+
--cwc-shadow-primary: var(--vscode-widget-shadow);
242+
--cwc-shadow-secondary: color-mix(
243+
in srgb,
244+
var(--vscode-widget-shadow) 60%,
245+
transparent
246+
);
247+
--cwc-shadow-tertiary: color-mix(
248+
in srgb,
249+
var(--vscode-widget-shadow) 30%,
250+
transparent
251+
);
252+
--cwc-box-shadow-sm: 0 2px 8px 0px var(--cwc-shadow-secondary);
253+
--cwc-box-shadow-md: 0 0 8px 2px var(--cwc-shadow-primary);
254+
--cwc-box-shadow-lg: 0 0 4px 0 hsla(0, 0%, 100%, 0.05) inset,
255+
0 0 3px 0 var(--cwc-shadow-secondary),
256+
0 16px 24px 0 var(--cwc-shadow-tertiary);
257+
--cwc-box-shadow-xl: 0 0 4px 0 hsla(0, 0%, 100%, 0.05) inset,
258+
0 0 6px 8px var(--cwc-shadow-secondary),
259+
0 24px 16px 6px var(--cwc-shadow-tertiary);
260+
--cwc-shadow-workbench: 0 0 8px 2px
261+
color-mix(in srgb, var(--vscode-widget-shadow) 40%, transparent);
262+
--cwc-shadow-hover-tooltip: 0 2px 4px var(--cwc-shadow-secondary);
263+
}

‎packages/ui/src/styles/foundation/_index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
@forward 'variables';
2-
@forward 'mixins';
2+
@forward 'colors';

0 commit comments

Comments
 (0)