Skip to content

add a pink theme #603

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: horizon
Choose a base branch
from
Open

add a pink theme #603

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1e52d63
Initial plan
Copilot Sep 19, 2025
a7c4c45
Add pink theme CSS file and integrate into editor
Copilot Sep 19, 2025
b312efb
CoPilot forgot to add to this file
shriram Sep 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/web/blocks.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,7 @@ <h2 id="menutitle" class="screenreader-only">Navigation Controls</h2>
<option value="panda">Panda</option>
<option value="high-contrast-light">High Contrast Light</option>
<option value="high-contrast-dark">High Contrast Dark</option>
<option value="pink">Pink</option>
</select>
</li>
</ul>
Expand Down
177 changes: 177 additions & 0 deletions src/web/css/themes/pink.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
/* ######################################################################
#---------------------- Theme-specific styles ----------------------#
# Theme: pink #
###################################################################### */

/* Color Palette
(mapping of friendly names to colors, if needed) */
body.pink {
--pink-light: #fef8f8; /* very light pink background */
--pink-light-2: #fcf0f0; /* slightly deeper pink */
--pink-light-3: #f9e8e8; /* medium pink */
--pink-medium: #f5d0d0; /* border pink */
--pink-darker: #e8b8b8; /* darker pink accents */
--pink-accent: #d18a8a; /* pink accent color */

--text-dark: #2d1a1a; /* dark text on pink background */
--text-medium: #4a2828; /* medium dark text */
--text-light: #5c3030; /* lighter text */
--comment-pink: #a85656; /* pink-tinted comment color */

--success-pink: #c8e6c9; /* success green with pink tint */
--warning-pink: #fff3e0; /* warning orange with pink tint */
--error-pink: #ffebee; /* error red with pink tint */
--error-text: #c62828; /* error text */

/* Syntax Highlighting */
--keyword: #8e24aa; /* purple keywords */
--comments: var(--comment-pink); /* pink-tinted comments */
--booleans: #ad1457; /* pink-red booleans */
--built-ins: var(--text-medium); /* built-ins */
--function-names: var(--text-dark); /* function names */
--types: var(--text-dark); /* types */
--variables: var(--text-light); /* variables */
--numbers: #1565c0; /* blue numbers */
--rough-nums: #1976d2; /* blue rough nums */
--rationals: #7b1fa2; /* purple rationals */
--bad-numbers: var(--error-text); /* bad numbers */
--unterm-strings: var(--error-text); /* unterminated strings */
--strings: #2e7d32; /* green strings */
--repl-print: var(--text-dark); /* result of print() in the REPL */
--repl-output: #4a148c; /* values displayed in the REPL */

/* Non-color font styling. */
--keyword-font-weight: bold;
--bad-numbers-font-weight: bold;
--unterm-strings-font-weight: bold;

/* Basic editor appearance */
--default-text: var(--text-dark); /* default text across editor */
--background: var(--pink-light); /* default bg color of definitions/interactions */
--cursor: var(--text-dark); /* cursor color */

/* Regions/Selected Text */
--selected-text: var(--pink-medium); /* selected text in editor */
--matching-brackets: #8e24aa; /* brackets around check:...end regions, etc. */
--matching-region-bg: var(--pink-light-2); /* bg on regions like check:...end, etc. */
--nonmatching-bg: #ffcdd2; /* bg on span.CodeMirror-nonmatchingbracket-region */
--nonmatching-bg-2: #ffabaf; /* bg and borders on nonmatchingbracket-region */
--nonmatching-brackets: var(--error-text); /* brackets that form a nonmatching region */

/* Check Blocks */
--check-block-default-bg: var(--pink-light-2); /* default bg on check blocks (usually invisible) */
--check-success-bg: var(--success-pink); /* bg on passing check blocks */
--check-fail-bg: #fff8e1; /* bg on failed check block */
--check-error-bg: var(--error-pink); /* bg (& box-shadow) on erroring check block */

/* Tests within check blocks */
--failing-test-header-bg: #fff3e0; /* bg of header within a focused failing test (contains "Test n: Failed") */
--failing-test-bg: #fffaf0; /* bg of failing test NOT in focus */
--passing-test-bg: var(--success-pink); /* bg of passing test */
--highlights-active-border: #8e24aa; /* border around errors/tests with highlights active */
--highlights-active-bg: rgba(255,255,255,0.9); /* bg on check block errors/tests with highlights active */
--empty-check-err-bg: rgba(255,255,255,0.4); /* bg behind "Processing Result..." in check-block-error:empty */

/* Errors */
--err-dotted-border: var(--error-text); /* dotted border around compile/parse errors */
--err-bg: var(--error-pink); /* bg on compile/parse errors */
--err-link: #1976d2; /* links within compile/parse errors */
--trace-err-bg: #fce4ec; /* bg on div.trace.error */
--err-hover-shadow: #ce93d8; /* box-shadow on hover on errors */
--err-focused-shadow: var(--text-dark); /* box-shadow on errors in focus */
--active-highlight-underline: rgba(45, 26, 26, 0.5); /* border below .highlight and .hinted-highlight */
--inactive-highlight-underline: rgba(45, 26, 26, 0.3); /* border below inactive highlights (darker) */
--active-highlight-text: var(--text-dark); /* text color in a.highlight */
--inactive-highlight-text: var(--text-medium); /* text color in a.highlight within non-highlighted blocks */

/* Testing Summaries */
--testing-summary: white; /* text color in testing summary */
--testing-summary-bg: #8e24aa; /* bg on testing summary */
--summary-fail-bg: #fff8e1; /* bg of summary of failed tests */
--summary-pass-bg: var(--success-pink); /* bg of summary of passed tests */
--summary-error-bg: var(--error-pink); /* bg of announcement in summary that tests errored */
--summary-err: var(--error-text); /* announcement text that tests errored in testing summary */
--summary-err-left-border: var(--error-text); /* vertical border left of error announcement in summary */

/* Tables */
--table-border: var(--pink-darker); /* border on tables */
--table-bg: var(--pink-light-2); /* bg on tables */
--table-even-rows-bg: var(--pink-light-3); /* bg on even rows in table */
--th-bg: var(--pink-medium); /* bg on table headers */
--th-font-weight: normal; /* font weight on table headers */
--table-col-dividers: white; /* righthand borders separating generic table columns */
--pyret-table-col-dividers: white; /* vertical borders between Pyret table columns */
--pyret-table-row-dividers: white; /* horizontal borders between Pyret table row */

/* Spy Blocks */
--spy-borders: var(--pink-accent); /* borders on spy block */
--spy-bg: var(--pink-light-3); /* bg on spy block */
--spy-odd-rows-bg: rgba(255, 255, 255, 0.3); /* bg on odd table rows of spy block */
--spy-even-rows-bg: rgba(255, 255, 255, 0.2); /* bg on even table rows of spy block */

/* Spotlights */
--spotlighted-text-bg: var(--pink-light); /* bg on spotlighted text (should match default bg) */
--non-spotlight-bg: rgb(150,150,150); /* bg on non-spotlighted elements during spotlight */
--surrounding-check-spotlight-bg: var(--pink-medium); /* bg on check block containing spotlighted test */

/* Handle that adjusts interactions window size */
--repl-handle-gradient-darker: var(--pink-darker); /* darker color in REPL handle gradient */
--repl-handle-gradient-lighter: var(--pink-medium); /* lighter color in REPL handle gradient */
--repl-handle-border: var(--pink-accent); /* border on REPL handle */

/* CodeMirror snippets */
--snippet-border: var(--pink-accent); /* dashed border around CodeMirror snippets */
--snippet-header-bg: var(--pink-light-2); /* CodeMirror snippet header bg color */
--snippet-header-border: var(--pink-darker); /* border between snippet header & code */
--check-block-snippet-bg: rgba(255,255,255,0.5); /* bg of code snippets within check block tests */

/* Misc. */
--img-thumbnail-shadow: rgba(142, 36, 170, 0.75); /* box-shadow on hover over image thumbnail in REPL */
--cm-in-repl-bg: var(--pink-light-2); /* bg on .repl .CodeMirror */
--failed-test-gutter-marker: rgba(255, 193, 7, 0.5); /* CodeMirror gutter marker bg for failed test */

/* CodeMirror gutters/line numbers/ruler */
--gutter-bg: var(--background); /* background of line number gutters */
--gutter-border: var(--pink-medium); /* border between gutter & definitions window */
--line-numbers: var(--comment-pink); /* line numbers in left gutter */
--line-ruler: #8e24aa; /* 100-char line ruler */

/* REPL */
--repl-text-output: var(--default-text); /* text output in the REPL */
--repl-prompts: var(--default-text); /* >>> prompt in the REPL */
--loader-bg: rgba(254, 248, 248, 0.8); /* REPL background during page load (should be semi-transparent) */
--loader-text: var(--default-text); /* text containing loading messages during page load */

/* Scrollbars */
--scrollbar-theme: light;

/* More granular control of check blocks */
--check-success-text: var(--default-text); /* text within successful check block */
--check-fail-text: var(--default-text); /* text within failing check block */
--check-fail-header-font-weight: normal; /* font weight of header text in failing check */
--check-error-text: var(--default-text); /* text within erroring check block */
--check-error-header-font-weight: normal; /* font weight of header text in erroring check */

--check-fail-border: none; /* border around failing check blocks */
--check-error-border: none; /* border around erroring check blocks */

/* Testing summaries */
--summary-pass-text: var(--default-text); /* text saying "N TESTS FAILED" */
--summary-fail-text: var(--default-text); /* text saying "N TESTS PASSED" */

/* darker syntax highlighting colors for text within error highlights */
--dark-default-text: var(--default-text);
--dark-comments: var(--comments);
--dark-booleans: var(--booleans);
--dark-built-ins: var(--built-ins);
--dark-function-names: var(--function-names);
--dark-variables: var(--variables);
--dark-keyword: var(--keyword);
--dark-numbers: var(--numbers);
--dark-rough-nums: var(--rough-nums);
--dark-bad-numbers: var(--bad-numbers);
--dark-strings: var(--strings);
--dark-unterm-strings: var(--unterm-strings);
--dark-types: var(--types);

}
2 changes: 2 additions & 0 deletions src/web/editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
<link rel="stylesheet" href="{{ &BASE_URL }}/css/themes/panda-syntax.css" />
<link rel="stylesheet" href="{{ &BASE_URL }}/css/themes/high-contrast-light.css" />
<link rel="stylesheet" href="{{ &BASE_URL }}/css/themes/high-contrast-dark.css" />
<link rel="stylesheet" href="{{ &BASE_URL }}/css/themes/pink.css" />
<link rel="icon" type="image/png" href="{{ &BASE_URL }}/img/pyret-icon.png" />
<style id="highlight-styles"></style>
<script src="{{ &BASE_URL }}/js/vega.min.js"></script>
Expand Down Expand Up @@ -219,6 +220,7 @@ <h2 id="menutitle" class="screenreader-only">Navigation Controls</h2>
<option value="panda">Panda</option>
<option value="high-contrast-light">High Contrast Light</option>
<option value="high-contrast-dark">High Contrast Dark</option>
<option value="pink">Pink</option>
</select>
</li>
</ul>
Expand Down