Skip to content

Commit a7c4c45

Browse files
Copilotshriram
Copilot
and
shriram
committed
Add pink theme CSS file and integrate into editor
Co-authored-by: shriram <[email protected]>
1 parent 1e52d63 commit a7c4c45

File tree

2 files changed

+179
-0
lines changed

2 files changed

+179
-0
lines changed

‎src/web/css/themes/pink.css‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
/* ######################################################################
2+
#---------------------- Theme-specific styles ----------------------#
3+
# Theme: pink #
4+
###################################################################### */
5+
6+
/* Color Palette
7+
(mapping of friendly names to colors, if needed) */
8+
body.pink {
9+
--pink-light: #fef8f8; /* very light pink background */
10+
--pink-light-2: #fcf0f0; /* slightly deeper pink */
11+
--pink-light-3: #f9e8e8; /* medium pink */
12+
--pink-medium: #f5d0d0; /* border pink */
13+
--pink-darker: #e8b8b8; /* darker pink accents */
14+
--pink-accent: #d18a8a; /* pink accent color */
15+
16+
--text-dark: #2d1a1a; /* dark text on pink background */
17+
--text-medium: #4a2828; /* medium dark text */
18+
--text-light: #5c3030; /* lighter text */
19+
--comment-pink: #a85656; /* pink-tinted comment color */
20+
21+
--success-pink: #c8e6c9; /* success green with pink tint */
22+
--warning-pink: #fff3e0; /* warning orange with pink tint */
23+
--error-pink: #ffebee; /* error red with pink tint */
24+
--error-text: #c62828; /* error text */
25+
26+
/* Syntax Highlighting */
27+
--keyword: #8e24aa; /* purple keywords */
28+
--comments: var(--comment-pink); /* pink-tinted comments */
29+
--booleans: #ad1457; /* pink-red booleans */
30+
--built-ins: var(--text-medium); /* built-ins */
31+
--function-names: var(--text-dark); /* function names */
32+
--types: var(--text-dark); /* types */
33+
--variables: var(--text-light); /* variables */
34+
--numbers: #1565c0; /* blue numbers */
35+
--rough-nums: #1976d2; /* blue rough nums */
36+
--rationals: #7b1fa2; /* purple rationals */
37+
--bad-numbers: var(--error-text); /* bad numbers */
38+
--unterm-strings: var(--error-text); /* unterminated strings */
39+
--strings: #2e7d32; /* green strings */
40+
--repl-print: var(--text-dark); /* result of print() in the REPL */
41+
--repl-output: #4a148c; /* values displayed in the REPL */
42+
43+
/* Non-color font styling. */
44+
--keyword-font-weight: bold;
45+
--bad-numbers-font-weight: bold;
46+
--unterm-strings-font-weight: bold;
47+
48+
/* Basic editor appearance */
49+
--default-text: var(--text-dark); /* default text across editor */
50+
--background: var(--pink-light); /* default bg color of definitions/interactions */
51+
--cursor: var(--text-dark); /* cursor color */
52+
53+
/* Regions/Selected Text */
54+
--selected-text: var(--pink-medium); /* selected text in editor */
55+
--matching-brackets: #8e24aa; /* brackets around check:...end regions, etc. */
56+
--matching-region-bg: var(--pink-light-2); /* bg on regions like check:...end, etc. */
57+
--nonmatching-bg: #ffcdd2; /* bg on span.CodeMirror-nonmatchingbracket-region */
58+
--nonmatching-bg-2: #ffabaf; /* bg and borders on nonmatchingbracket-region */
59+
--nonmatching-brackets: var(--error-text); /* brackets that form a nonmatching region */
60+
61+
/* Check Blocks */
62+
--check-block-default-bg: var(--pink-light-2); /* default bg on check blocks (usually invisible) */
63+
--check-success-bg: var(--success-pink); /* bg on passing check blocks */
64+
--check-fail-bg: #fff8e1; /* bg on failed check block */
65+
--check-error-bg: var(--error-pink); /* bg (& box-shadow) on erroring check block */
66+
67+
/* Tests within check blocks */
68+
--failing-test-header-bg: #fff3e0; /* bg of header within a focused failing test (contains "Test n: Failed") */
69+
--failing-test-bg: #fffaf0; /* bg of failing test NOT in focus */
70+
--passing-test-bg: var(--success-pink); /* bg of passing test */
71+
--highlights-active-border: #8e24aa; /* border around errors/tests with highlights active */
72+
--highlights-active-bg: rgba(255,255,255,0.9); /* bg on check block errors/tests with highlights active */
73+
--empty-check-err-bg: rgba(255,255,255,0.4); /* bg behind "Processing Result..." in check-block-error:empty */
74+
75+
/* Errors */
76+
--err-dotted-border: var(--error-text); /* dotted border around compile/parse errors */
77+
--err-bg: var(--error-pink); /* bg on compile/parse errors */
78+
--err-link: #1976d2; /* links within compile/parse errors */
79+
--trace-err-bg: #fce4ec; /* bg on div.trace.error */
80+
--err-hover-shadow: #ce93d8; /* box-shadow on hover on errors */
81+
--err-focused-shadow: var(--text-dark); /* box-shadow on errors in focus */
82+
--active-highlight-underline: rgba(45, 26, 26, 0.5); /* border below .highlight and .hinted-highlight */
83+
--inactive-highlight-underline: rgba(45, 26, 26, 0.3); /* border below inactive highlights (darker) */
84+
--active-highlight-text: var(--text-dark); /* text color in a.highlight */
85+
--inactive-highlight-text: var(--text-medium); /* text color in a.highlight within non-highlighted blocks */
86+
87+
/* Testing Summaries */
88+
--testing-summary: white; /* text color in testing summary */
89+
--testing-summary-bg: #8e24aa; /* bg on testing summary */
90+
--summary-fail-bg: #fff8e1; /* bg of summary of failed tests */
91+
--summary-pass-bg: var(--success-pink); /* bg of summary of passed tests */
92+
--summary-error-bg: var(--error-pink); /* bg of announcement in summary that tests errored */
93+
--summary-err: var(--error-text); /* announcement text that tests errored in testing summary */
94+
--summary-err-left-border: var(--error-text); /* vertical border left of error announcement in summary */
95+
96+
/* Tables */
97+
--table-border: var(--pink-darker); /* border on tables */
98+
--table-bg: var(--pink-light-2); /* bg on tables */
99+
--table-even-rows-bg: var(--pink-light-3); /* bg on even rows in table */
100+
--th-bg: var(--pink-medium); /* bg on table headers */
101+
--th-font-weight: normal; /* font weight on table headers */
102+
--table-col-dividers: white; /* righthand borders separating generic table columns */
103+
--pyret-table-col-dividers: white; /* vertical borders between Pyret table columns */
104+
--pyret-table-row-dividers: white; /* horizontal borders between Pyret table row */
105+
106+
/* Spy Blocks */
107+
--spy-borders: var(--pink-accent); /* borders on spy block */
108+
--spy-bg: var(--pink-light-3); /* bg on spy block */
109+
--spy-odd-rows-bg: rgba(255, 255, 255, 0.3); /* bg on odd table rows of spy block */
110+
--spy-even-rows-bg: rgba(255, 255, 255, 0.2); /* bg on even table rows of spy block */
111+
112+
/* Spotlights */
113+
--spotlighted-text-bg: var(--pink-light); /* bg on spotlighted text (should match default bg) */
114+
--non-spotlight-bg: rgb(150,150,150); /* bg on non-spotlighted elements during spotlight */
115+
--surrounding-check-spotlight-bg: var(--pink-medium); /* bg on check block containing spotlighted test */
116+
117+
/* Handle that adjusts interactions window size */
118+
--repl-handle-gradient-darker: var(--pink-darker); /* darker color in REPL handle gradient */
119+
--repl-handle-gradient-lighter: var(--pink-medium); /* lighter color in REPL handle gradient */
120+
--repl-handle-border: var(--pink-accent); /* border on REPL handle */
121+
122+
/* CodeMirror snippets */
123+
--snippet-border: var(--pink-accent); /* dashed border around CodeMirror snippets */
124+
--snippet-header-bg: var(--pink-light-2); /* CodeMirror snippet header bg color */
125+
--snippet-header-border: var(--pink-darker); /* border between snippet header & code */
126+
--check-block-snippet-bg: rgba(255,255,255,0.5); /* bg of code snippets within check block tests */
127+
128+
/* Misc. */
129+
--img-thumbnail-shadow: rgba(142, 36, 170, 0.75); /* box-shadow on hover over image thumbnail in REPL */
130+
--cm-in-repl-bg: var(--pink-light-2); /* bg on .repl .CodeMirror */
131+
--failed-test-gutter-marker: rgba(255, 193, 7, 0.5); /* CodeMirror gutter marker bg for failed test */
132+
133+
/* CodeMirror gutters/line numbers/ruler */
134+
--gutter-bg: var(--background); /* background of line number gutters */
135+
--gutter-border: var(--pink-medium); /* border between gutter & definitions window */
136+
--line-numbers: var(--comment-pink); /* line numbers in left gutter */
137+
--line-ruler: #8e24aa; /* 100-char line ruler */
138+
139+
/* REPL */
140+
--repl-text-output: var(--default-text); /* text output in the REPL */
141+
--repl-prompts: var(--default-text); /* >>> prompt in the REPL */
142+
--loader-bg: rgba(254, 248, 248, 0.8); /* REPL background during page load (should be semi-transparent) */
143+
--loader-text: var(--default-text); /* text containing loading messages during page load */
144+
145+
/* Scrollbars */
146+
--scrollbar-theme: light;
147+
148+
/* More granular control of check blocks */
149+
--check-success-text: var(--default-text); /* text within successful check block */
150+
--check-fail-text: var(--default-text); /* text within failing check block */
151+
--check-fail-header-font-weight: normal; /* font weight of header text in failing check */
152+
--check-error-text: var(--default-text); /* text within erroring check block */
153+
--check-error-header-font-weight: normal; /* font weight of header text in erroring check */
154+
155+
--check-fail-border: none; /* border around failing check blocks */
156+
--check-error-border: none; /* border around erroring check blocks */
157+
158+
/* Testing summaries */
159+
--summary-pass-text: var(--default-text); /* text saying "N TESTS FAILED" */
160+
--summary-fail-text: var(--default-text); /* text saying "N TESTS PASSED" */
161+
162+
/* darker syntax highlighting colors for text within error highlights */
163+
--dark-default-text: var(--default-text);
164+
--dark-comments: var(--comments);
165+
--dark-booleans: var(--booleans);
166+
--dark-built-ins: var(--built-ins);
167+
--dark-function-names: var(--function-names);
168+
--dark-variables: var(--variables);
169+
--dark-keyword: var(--keyword);
170+
--dark-numbers: var(--numbers);
171+
--dark-rough-nums: var(--rough-nums);
172+
--dark-bad-numbers: var(--bad-numbers);
173+
--dark-strings: var(--strings);
174+
--dark-unterm-strings: var(--unterm-strings);
175+
--dark-types: var(--types);
176+
177+
}

‎src/web/editor.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
<link rel="stylesheet" href="{{ &BASE_URL }}/css/themes/panda-syntax.css" />
2323
<link rel="stylesheet" href="{{ &BASE_URL }}/css/themes/high-contrast-light.css" />
2424
<link rel="stylesheet" href="{{ &BASE_URL }}/css/themes/high-contrast-dark.css" />
25+
<link rel="stylesheet" href="{{ &BASE_URL }}/css/themes/pink.css" />
2526
<link rel="icon" type="image/png" href="{{ &BASE_URL }}/img/pyret-icon.png" />
2627
<style id="highlight-styles"></style>
2728
<script src="{{ &BASE_URL }}/js/vega.min.js"></script>
@@ -219,6 +220,7 @@ <h2 id="menutitle" class="screenreader-only">Navigation Controls</h2>
219220
<option value="panda">Panda</option>
220221
<option value="high-contrast-light">High Contrast Light</option>
221222
<option value="high-contrast-dark">High Contrast Dark</option>
223+
<option value="pink">Pink</option>
222224
</select>
223225
</li>
224226
</ul>

0 commit comments

Comments
 (0)