## Description This PR contains some UI changes for code in Appsmith. - Sets font-family as ui-monospace for text in code editors and JSON viewer (used in evaluated value popup and debugger). - Sets font-size of text in code editors to 13px. - Set font-size for text in autocomplete to 11px. - Added line highlight to indicate the active line. This will be the focus state of JS Editor going forward. - Removed border-bottom for Tabs in JS Editor to keep it consistent with rest of the pages. - Introduces new colors as mentioned in this [doc](https://www.notion.so/appsmith/Visual-changes-to-code-in-Appsmith-8bb530c60ee844e5b44adec039bf9280#d99e8450f022439f845b5a0d7deb1d3f). > Add a TL;DR when description is extra long (helps content team) Fixes #22992 Media ## Type of change - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual - Jest ### Test Plan 1. Verified JSeditor - variable functions keywords numbers operators arguments function properties font and colour 2. Verified Property pane font and colour 3. Verified above in mac and windows machine ### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) ## Checklist: ### Dev activity - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [ ] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [ ] Cypress test cases have been added and approved by either SDET or manual QA - [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA - [ ] Added Test Plan Approved label after reveiwing all Cypress test --------- Co-authored-by: Ravi Kumar Prasad <ravi@appsmith.com>
5 lines
454 B
TypeScript
5 lines
454 B
TypeScript
export const TextFonts =
|
|
"-apple-system, BlinkMacSystemFont, “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, sans-serif";
|
|
export const CodeFonts =
|
|
'ui-monospace, Menlo, Monaco, "Cascadia Code", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", Consolas, "Courier New", monospace';
|