Skip to content

Commit 8d1f514

Browse files
jamiebensteadraspberrypitranslationsbotcocomarinerammodhvadiaabcampo-iry
authored
Update the default code editor styles (#1378)
closes #1174 Light mode default - <img width="1272" height="697" alt="image" src="https://github.com/user-attachments/assets/1d189b14-3203-462b-9ba7-391c94b28474" /> Dark mode default - <img width="1272" height="697" alt="image" src="https://github.com/user-attachments/assets/f2a81f96-6adf-4e99-80e8-467b1b578fcc" /> Light mode editor styles - <img width="1272" height="697" alt="image" src="https://github.com/user-attachments/assets/e2586c20-46de-44f8-919c-214184391a79" /> Dark mode editor styles - <img width="1272" height="697" alt="image" src="https://github.com/user-attachments/assets/61e0aea2-eec9-4f70-b9ed-6246fc72b911" /> --------- Co-authored-by: Raspberry Pi Translations Bot <[email protected]> Co-authored-by: HJ <[email protected]> Co-authored-by: Ram Modhvadia <[email protected]> Co-authored-by: A.Campo <[email protected]> Co-authored-by: Dan Halson <[email protected]> Co-authored-by: Nathan Richards <[email protected]>
1 parent c2fdbac commit 8d1f514

File tree

5 files changed

+210
-192
lines changed

5 files changed

+210
-192
lines changed

‎src/assets/stylesheets/DesignSystemButton.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -113,11 +113,7 @@
113113

114114
.--light * {
115115
.rpf-button--secondary {
116-
span {
117-
color: $rpf-text-primary;
118-
}
119-
120-
&::before {
116+
&::before {
121117
background-color: rgba($rpf-white, 1);
122118
}
123119

‎src/assets/stylesheets/InternalStyles.scss‎

Lines changed: 121 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@
4444

4545
@use "./settings/fonts" as fonts;
4646

47+
// Default styles
48+
4749
:host {
4850
font-size: 1.6rem;
4951
}
@@ -107,10 +109,10 @@ svg {
107109
}
108110

109111
button:focus-visible {
110-
outline: 2px solid $rpf-black;
112+
outline: 2px solid var(--rpf-black);
111113
}
112114

113-
//override for a pesky teal icon
115+
//override for a pesky navy icon
114116
.select-buttons__tick--selected {
115117
svg {
116118
path {
@@ -120,33 +122,125 @@ button:focus-visible {
120122
}
121123

122124
.--light {
123-
--editor-color-layer-1: #{$rpf-teal-100};
124-
--editor-color-layer-2: #{$rpf-white};
125-
--editor-color-layer-3: #{$rpf-white};
126-
--editor-color-outline: #{$rpf-grey-150};
127-
//theme change to match WC navy colors
128-
--editor-color-theme: #{$rpf-navy-800};
129-
--editor-color-theme-secondary: #{$rpf-teal-900};
130-
--editor-color-theme-tertiary: #{$rpf-teal-100};
131-
--editor-color-text: #{$rpf-text-primary};
132-
--editor-color-text-secondary: #{$rpf-text-secondary};
133-
--editor-color-tab-background: #{$rpf-off-white};
125+
// Theme colours
126+
--editor-color-layer-1: var(--rpf-teal-100);
127+
--editor-color-layer-2: var(--rpf-white);
128+
--editor-color-layer-3: var(--rpf-white);
129+
--editor-color-outline: var(--rpf-grey-150);
130+
--editor-color-theme: var(--rpf-navy-800);
131+
--editor-color-theme-secondary: var(--rpf-navy-900);
132+
--editor-color-theme-tertiary: var(--rpf-navy-100);
133+
--editor-color-text: var(--rpf-text-primary);
134+
--editor-color-text-secondary: var(--rpf-text-secondary);
135+
--editor-color-tab-background: var(--rpf-off-white);
136+
137+
--rpf-files-list-item-active: var(--rpf-navy-secondary-tertiary-active);
138+
--rpf-files-list-item-hover: var(--rpf-navy-secondary-tertiary-hover);
139+
--rpf-tab-button-hover: var(--rpf-grey-100);
140+
--rpf-tab-button-background: inherit;
141+
--rpf-tab-border-bottom-selected: var(--editor-color-theme-secondary);
142+
143+
// Sidebar
144+
--sidebar-border: var(--editor-color-outline);
145+
--sidebar-background: var(--rpf-white);
146+
--sidebar-background-selected: var(--rpf-off-white);
147+
--sidebar-panel-background: var(--rpf-white);
148+
--sidebar-option-hover: var(--rpf-grey-100);
149+
--sidebar-option-selected-icon: var(--rpf-black);
150+
--sidebar-option-selected-border: var(--editor-color-theme-secondary);
151+
--sidebar-option-selected-background: var(--editor-color-theme-tertiary);
152+
--sidebar-option-selected-background-hover: var(--rpf-navy-200);
153+
154+
.btn,
155+
.rpf-button {
156+
// Primary button
157+
--rpf-button-primary-background-color: var(--editor-color-theme);
158+
--rpf-button-primary-background-color-focus: var(--editor-color-theme);
159+
--rpf-button-primary-background-color-hover: var(--editor-color-theme-secondary);
160+
--rpf-button-primary-background-color-active: var(--rpf-navy-600);
161+
--rpf-button-primary-background-color-disabled: var(--rpf-navy-200);
162+
--rpf-button-primary-color-disabled: var(--rpf-grey-600);
163+
--rpf-button-primary-text-color: var(--rpf-white);
164+
165+
// Secondary button
166+
--rpf-button-secondary-background-color: var(--editor-color-theme);
167+
--rpf-button-secondary-background-color-focus: var(--rpf-brand-raspberry);
168+
--rpf-button-secondary-background-color-hover: var(--editor-color-theme-tertiary);
169+
--rpf-button-secondary-border-color: var(--editor-color-theme);
170+
--rpf-button-secondary-border-color-hover: var(--editor-color-theme-secondary);
171+
--rpf-button-secondary-background-color-active: var(--editor-color-theme-secondary);
172+
--rpf-button-secondary-background-color-disabled: var(--rpf-grey-50);
173+
--rpf-button-secondary-text-color: var(--editor-color-theme);
174+
175+
// Tertiary button
176+
--rpf-button-tertiary-text-color-hover: var(--rpf-grey-600);
177+
--rpf-button-tertiary-danger-text-color: var(--rpf-alert-error);
178+
--rpf-button-tertiary-danger-background-color-hover: rgba(0, 0, 0, 0.03);
179+
--rpf-button-tertiary-danger-background-color-active: rgba(0, 0, 0, 0.05);
180+
}
134181
}
135182

136183
.--dark {
137-
--editor-color-layer-1: #{$rpf-grey-850};
138-
--editor-color-layer-2: #{$rpf-white};
139-
--editor-color-layer-3: #{$rpf-grey-700};
140-
--editor-color-outline: #{$rpf-grey-600};
141-
--editor-color-theme: #{$rpf-navy-800};
142-
--editor-color-theme-secondary: #{$rpf-teal-400};
143-
--editor-color-theme-tertiary: #{$rpf-teal-900};
144-
--editor-color-text: #{$rpf-white};
145-
--editor-color-text-secondary: #{$rpf-text-secondary-darkmode};
146-
--rpf-button-secondary-text-color: #{$rpf-white};
147-
--editor-color-tab-background: #{$rpf-grey-700};
148-
149-
.rpf-button--secondary {
150-
border-color: $rpf-navy-800;
184+
// Theme colours
185+
--editor-color-layer-1: var(--rpf-grey-850);
186+
--editor-color-layer-2: var(--rpf-grey-800);
187+
--editor-color-layer-3: var(--rpf-grey-700);
188+
--editor-color-outline: var(--rpf-grey-600);
189+
--editor-color-theme: var(--rpf-navy-400);
190+
--editor-color-theme-secondary: var(--rpf-navy-400);
191+
--editor-color-theme-tertiary: var(--rpf-navy-900);
192+
--editor-color-text: var(--rpf-white);
193+
--editor-color-text-secondary: var(--rpf-text-secondary-darkmode);
194+
195+
--rpf-files-list-item-active: var(--rpf-grey-secondary-tertiary-active);
196+
--rpf-files-list-item-hover: var(--rpf-grey-secondary-tertiary-hover);
197+
--rpf-tab-button-hover: var(--rpf-grey-900);
198+
--rpf-tab-button-background: var(--editor-color-layer-2);
199+
--rpf-tab-border-bottom-selected: var(--editor-color-theme);
200+
201+
// Sidebar
202+
--sidebar-border: var(--editor-color-outline);
203+
--sidebar-background: var(--editor-color-layer-2);
204+
--sidebar-background-selected: var(--editor-color-layer-2);
205+
--sidebar-panel-background: var(--editor-color-layer-3);
206+
--sidebar-option-hover: var(--editor-color-outline);
207+
--sidebar-option-selected-icon: var(--rpf-white);
208+
--sidebar-option-selected-border: var(--editor-color-theme);
209+
--sidebar-option-selected-background: var(--editor-color-theme-tertiary);
210+
--sidebar-option-selected-background-hover: var(--rpf-navy-800);
211+
212+
--editor-color-tab-background: var(--editor-color-layer-3);
213+
214+
// Buttons
215+
.btn,
216+
.rpf-button {
217+
// Primary button
218+
--rpf-button-primary-text-color: var(--rpf-black);
219+
--rpf-button-primary-background-color: var(--editor-color-theme);
220+
--rpf-button-primary-background-color-focus: var(--editor-color-theme);
221+
--rpf-button-primary-background-color-active: var(--rpf-navy-200);
222+
--rpf-button-primary-background-color-disabled: var(--rpf-grey-200);
223+
--rpf-button-primary-color-disabled: var(--editor-color-layer-3);
224+
--rpf-button-primary-color-disabled-focus: var(--editor-color-theme);
225+
--rpf-button-primary-background-color-hover: var(--rpf-navy-600);
226+
227+
// Secondary button
228+
--rpf-button-secondary-text-color: var(--rpf-white);
229+
--rpf-button-secondary-background-color: var(--editor-color-layer-2);
230+
--rpf-button-secondary-background-color-active: var(--rpf-navy-200);
231+
--rpf-button-secondary-color-disabled-background: var(--editor-color-layer-3);
232+
--rpf-button-secondary-background-color-hover: var(--editor-color-outline);
233+
--rpf-button-secondary-border-color: var(--editor-color-theme);
234+
--rpf-button-secondary-border-color-hover: var(--editor-color-theme);
235+
--rpf-button-secondary-color-disabled: var(--rpf-grey-100);
236+
--rpf-button-secondary-color: var(--rpf-white);
237+
238+
// Tertiary button
239+
--rpf-button-tertiary-text-color-hover: var(--rpf-grey-200);
240+
--rpf-button-tertiary-danger-text-color: var(--rpf-red-600);
241+
--rpf-button-tertiary-danger-background-color-hover: rgba(255, 255, 255, 0.1);
242+
--rpf-button-tertiary-danger-background-color-active: rgba(255, 255, 255, 0.15);
151243
}
152244
}
245+
246+

‎src/assets/stylesheets/index.scss‎

Lines changed: 36 additions & 159 deletions
Original file line numberDiff line numberDiff line change
@@ -1,173 +1,50 @@
1-
@use "./rpf_design_system/colours" as *;
2-
@use "./rpf_design_system/spacing" as *;
3-
@use "./settings/fonts" as fonts;
4-
5-
html,
6-
body {
7-
margin: 0;
8-
}
9-
10-
:root {
11-
--editor-font-family-sans-serif: #{fonts.$font-family-sans-serif};
12-
--editor-font-family-monospace: #{fonts.$font-family-monospace};
13-
}
14-
15-
body {
16-
font-family: var(--editor-font-family-sans-serif);
17-
-webkit-font-smoothing: antialiased;
18-
-moz-osx-font-smoothing: grayscale;
19-
}
20-
21-
code {
22-
font-family: var(--editor-font-family-monospace);
23-
}
1+
#wc.--use-editor-styles.--light {
2+
--editor-color-theme: var(--rpf-teal-800);
3+
--editor-color-theme-secondary: var(--rpf-teal-900);
4+
--editor-color-theme-tertiary: var(--rpf-teal-100);
5+
6+
--rpf-files-list-item-active: var(--rpf-teal-secondary-tertiary-active);
7+
--rpf-files-list-item-hover: var(--rpf-teal-secondary-tertiary-hover);
8+
--rpf-tab-border-bottom-selected: var(--editor-color-theme-secondary);
9+
--sidebar-option-selected-background-hover: var(--rpf-teal-200);
2410

25-
#app {
26-
min-block-size: 100dvh;
11+
.btn,
12+
.rpf-button {
13+
--rpf-button-primary-background-color: var(--editor-color-theme);
14+
--rpf-button-primary-background-color-focus: var(--editor-color-theme);
15+
--rpf-button-primary-background-color-hover: var(--editor-color-theme-secondary);
16+
--rpf-button-primary-background-color-active: var(--rpf-teal-600);
17+
--rpf-button-primary-background-color-disabled: var(--rpf-teal-200);
18+
--rpf-button-primary-text-color: var(--rpf-black);
19+
20+
--rpf-button-secondary-background-color: var(--editor-color-theme);
21+
--rpf-button-secondary-background-color-hover: var(--editor-color-theme-tertiary);
22+
--rpf-button-secondary-border-color: var(--editor-color-theme);
23+
--rpf-button-secondary-border-color-hover: var(--editor-color-theme-secondary);
24+
--rpf-button-secondary-background-color-active: var(--editor-color-theme-secondary);
25+
--rpf-button-secondary-text-color: var(--rpf-black);
26+
}
2727
}
2828

29-
.--light, #wc.--light {
30-
--editor-color-layer-1: #{$rpf-teal-100};
31-
--editor-color-layer-2: #{$rpf-black};
32-
--editor-color-layer-3: #{$rpf-white};
33-
--editor-color-outline: #{$rpf-grey-150};
34-
--editor-color-theme: #{$rpf-teal-800};
35-
--editor-color-theme-secondary: #{$rpf-teal-900};
36-
--editor-color-theme-tertiary: #{$rpf-teal-100};
37-
--editor-color-text: #{$rpf-text-primary};
38-
--editor-color-text-secondary: #{$rpf-text-secondary};
39-
--rpf-files-list-item-active: #{$rpf-teal-secondary-tertiary-active};
40-
--rpf-files-list-item-hover: #{$rpf-teal-secondary-tertiary-hover};
41-
--rpf-tab-button-hover: var(--rpf-grey-100);
42-
--rpf-tab-button-background: inherit;
43-
--rpf-tab-border-bottom-selected: var(--rpf-teal-900);
44-
--sidebar-border: var(--rpf-grey-150);
45-
--sidebar-background: var(--rpf-white);
46-
--sidebar-background-selected: var(--rpf-off-white);
47-
--sidebar-panel-background: var(--rpf-white);
48-
--sidebar-option-hover: var(--rpf-grey-100);
49-
--sidebar-option-selected-icon: var(--rpf-black);
50-
--sidebar-option-selected-border: var(--editor-color-theme);
51-
--sidebar-option-selected-background: var(--editor-color-theme-tertiary);
52-
--sidebar-option-selected-background-hover: var(--rpf-teal-200);
53-
}
29+
#wc.--use-editor-styles.--dark {
30+
--editor-color-theme: var(--rpf-teal-800);
31+
--editor-color-theme-secondary: var(--rpf-teal-400);
32+
--editor-color-theme-tertiary: var(--rpf-teal-900);
5433

55-
.--dark, #wc.--dark {
56-
--editor-color-layer-1: #{$rpf-grey-850};
57-
--editor-color-layer-2: #{$rpf-grey-800};
58-
--editor-color-layer-3: #{$rpf-grey-700};
59-
--editor-color-outline: #{$rpf-grey-600};
60-
--editor-color-theme: #{$rpf-teal-400};
61-
--editor-color-theme-secondary: #{$rpf-teal-400};
62-
--editor-color-theme-tertiary: #{$rpf-teal-900};
63-
--editor-color-text: #{$rpf-white};
64-
--editor-color-text-secondary: #{$rpf-text-secondary-darkmode};
65-
--rpf-files-list-item-active: #{$rpf-grey-secondary-tertiary-active};
66-
--rpf-files-list-item-hover: #{$rpf-grey-secondary-tertiary-hover};
67-
--rpf-tab-button-hover: var(--rpf-grey-900);
68-
--rpf-tab-button-background: var(--rpf-grey-800);
69-
--rpf-tab-border-bottom-selected: var(--rpf-teal-800);
70-
--sidebar-border: var(--rpf-grey-600);
71-
--sidebar-background: var(--rpf-grey-800);
72-
--sidebar-background-selected: var(--rpf-grey-800);
73-
--sidebar-panel-background: var(--rpf-grey-700);
74-
--sidebar-option-hover: var(--rpf-grey-600);
75-
--sidebar-option-selected-icon: var(--rpf-white);
76-
--sidebar-option-selected-border: var(--editor-color-theme);
77-
--sidebar-option-selected-background: var(--editor-color-theme-tertiary);
78-
--sidebar-option-selected-background-hover: var(--rpf-teal-800);
34+
--rpf-tab-border-bottom-selected: var(--editor-color-theme);
35+
--sidebar-option-selected-background-hover: var(--rpf-teal-950);
7936

8037
.btn,
8138
.rpf-button {
82-
--rpf-button-primary-background-color: var(--rpf-teal-400);
83-
--rpf-button-primary-background-color-focus: var(--rpf-teal-400);
39+
--rpf-button-primary-background-color: var(--editor-color-theme-secondary);
40+
--rpf-button-primary-background-color-focus: var(--editor-color-theme-secondary);
8441
--rpf-button-primary-background-color-active: var(--rpf-teal-200);
85-
--rpf-button-primary-background-color-disabled: var(--rpf-grey-200);
86-
--rpf-button-primary-color-disabled: var(--rpf-grey-700);
87-
--rpf-button-primary-color-disabled-focus: var(--rpf-teal-400);
42+
--rpf-button-primary-color-disabled-focus: var(--editor-color-theme-secondary);
8843
--rpf-button-primary-background-color-hover: var(--rpf-teal-600);
44+
--rpf-button-primary-text-color: var(--rpf-black);
8945

90-
--rpf-button-secondary-background-color: var(--rpf-grey-800);
9146
--rpf-button-secondary-background-color-active: var(--rpf-teal-200);
92-
--rpf-button-secondary-color-disabled-background: var(--rpf-grey-700);
93-
--rpf-button-secondary-background-color-hover: var(--rpf-grey-600);
94-
--rpf-button-secondary-border-color-hover: var(--rpf-teal-400);
95-
--rpf-button-secondary-color-disabled: var(--rpf-grey-100);
96-
--rpf-button-secondary-color: var(--rpf-white);
97-
--rpf-button-secondary-text-color: var(--rpf-white);
98-
99-
--rpf-button-tertiary-text-color-hover: var(--rpf-grey-200);
100-
101-
--rpf-button-tertiary-danger-text-color: var(--rpf-red-600);
102-
--rpf-button-tertiary-danger-background-color-hover: rgba(255, 255, 255, 0.1);
103-
--rpf-button-tertiary-danger-background-color-active: rgba(255, 255, 255, 0.15);
104-
}
105-
106-
.rpf-button--secondary {
107-
border-color: var(--rpf-teal-400);
108-
}
109-
}
110-
111-
.btn,
112-
.rpf-button {
113-
--rpf-button-primary-background-color: var(--rpf-teal-800);
114-
--rpf-button-primary-background-color-focus: var(--rpf-teal-800);
115-
--rpf-button-primary-background-color-hover: var(--rpf-teal-900);
116-
--rpf-button-primary-background-color-active: var(--rpf-teal-600);
117-
--rpf-button-primary-background-color-disabled: var(--rpf-teal-200);
118-
--rpf-button-primary-color-disabled: var(--rpf-grey-600);
119-
--rpf-button-primary-text-color: var(--rpf-black);
120-
121-
--rpf-button-secondary-background-color: var(--rpf-teal-800);
122-
--rpf-button-secondary-background-color-focus: #{$rpf-brand-raspberry}; // scss var?
123-
--rpf-button-secondary-background-color-hover: var(--rpf-teal-100);
124-
--rpf-button-secondary-border-color-hover: var(--rpf-teal-900);
125-
--rpf-button-secondary-background-color-active: var(--rpf-teal-900);
126-
--rpf-button-secondary-background-color-disabled: var(--rpf-grey-50); // might not exist
127-
--rpf-button-secondary-text-color: var(--rpf-black);
128-
129-
--rpf-button-tertiary-text-color-hover: var(--rpf-grey-600);
130-
131-
--rpf-button-tertiary-danger-text-color: var(--rpf-alert-error);
132-
--rpf-button-tertiary-danger-background-color-hover: rgba(0, 0, 0, 0.03);
133-
--rpf-button-tertiary-danger-background-color-active: rgba(0, 0, 0, 0.05);
134-
135-
.rpf-button--secondary {
136-
border-color: var(--rpf-teal-800);
137-
}
138-
}
139-
140-
.select-buttons__tick--selected {
141-
--rpf-select-buttons-tick-color: var(--rpf-black);
142-
}
143-
144-
.modal-overlay {
145-
--rpf-input-active-border: var(--editor-color-theme);
146-
}
147-
148-
.project-wrapper {
149-
--project-wrapper-grid-gap: #{$space-0-5};
150-
}
151-
152-
.proj-editor-wrapper {
153-
--project-editor-wrapper-grid-gap: #{$space-1};
154-
}
155-
156-
.project-instructions {
157-
pre {
158-
--code-block-scrollbar-color: auto;
159-
--code-background-color: #{$rpf-grey-700};
160-
--code-text-color: #{$rpf-white};
161-
}
162-
163-
.line-highlight {
164-
--code-block-line-highlight-color: #{$rpf-white};
47+
--rpf-button-secondary-border-color-hover: var(--editor-color-theme-secondary);
16548
}
16649
}
16750

168-
.btn--tertiary {
169-
&:hover,
170-
.btn-outer:hover & {
171-
--tertiary-btn-hover-color: inherit;
172-
}
173-
}

0 commit comments

Comments
 (0)