mirror of https://github.com/JetBrains/intellij-sdk-code-samples.git synced 2025-07-30 18:27:49 +08:00

Karol Lewandowski d8e83b57ea

* Add UI Guidelines to  SDK docs

* Add UI Guidelines to  SDK docs

* Fixing build errors

* optimize PNGs

* add UI guidelines landing page placeholder

* IJ SDK Docs <-> UI guidelines crosslinks updated

* split_button.md: remove reference to removed setting

* use <ui-path>

* use MD instead of <note>

* use %gh-ic% links

* drop_down.md: fix <control>

* code samples: fix most obvious issues

* remove obsolete `_defaults.md`

* ijs.tree: UI cleanup

* Delete "under construction" pages

* Fix headers

* Add link-summary

* Remove invalid links

* Delete unused files

* Remove ''@2x' from image file names

* Use Markdown syntax for some images and tables

* Rename non-unique files to unique

* Remove alpha in images where content is unreadable

* align quotation marks

* Controls: cleanup/fixes, add code links, edit

* tooltip.md: fix HTML

* misc fixes

* typography.md: fix table contents

* typography.md: fix table header

* UI guidelines landing page + TOC fixes

* remove unused icons_list.md

* Normalize image paths

* validation_errors.md: Fix broken tab

* "correct"/"incorrect" labels styling

* Resize images to 50%

* button.topic: fixes

* grammar, spelling, minor edits

* remove '&nbsp;'

* fix 99px

* cleanup

* UI_kit.md: minor

* Fix "MRK058: Large image in paragraph rendered as a block element by default."

* button.topic: Add img[alt]

* mnemonics.md: Update "Contact Us" link to the IJSDK YouTrack

* split_button.md: Use ui-path

* UI landing: add feedback snippet

* Improve code snippets formatting and naming

* Fix code samples

* Fix code samples

* Add Kotlin variants for code samples

* Add icons_list.md

* crosslinks

* Change external link to https://intellij-icons.jetbrains.design/

* icons list -> https://intellij-icons.jetbrains.design

* Hide info about reducing split button to simple action button (now it is available through the registry only)

* reformat

* icons_style.md: Images in new line

---------

Co-authored-by: marianna.kononenko <marianna.kononenko@jetbrains.com>
Co-authored-by: Yann Cébron <yann.cebron@jetbrains.com>

2024-05-16 13:51:56 +02:00

7.5 KiB

Raw Blame History

Typography

UI guidelines on using proper fonts in different contexts.

Implementation: JBFont

IDE font

The system fonts are used for the IDE user interface by default. The default font sizes are below:

macOS	SF Pro Text	13
Window	Segoe UI	12
Linux	Ubuntu	15

Users can change the default font size in Settings. If the default font size is changed, other font sizes used in the UI are scaled respectively.

Use the built-in text styles from the table below whenever possible.

Implementation example for font styles: LabelSizeDemoAction

{style="note"}

Name	Font size	Usage Examples
H0 bold `JBFont.h0().asBold()`	Default + 12	Rich text headers. See the "What’s New" page example below.
H1 bold `JBFont.h1().asBold()`	Default + 9
H2 `JBFont.h2()`	Default + 5
H2 bold `JBFont.h2().asBold()`		Small page header. Examples: Plugin name, GitHub timeline header
H3 `JBFont.h3()`	Default + 3	Accent body text
H3 bold `JBFont.h3().asBold()`		Headers in dialogs with a small number of elements (Customize page on Welcome screen, Login page in Get from VCS dialog)
H4 bold (Default bold) `JBFont.h4().asBold()` `JBFont.regular().asBold()`	Default	Header in dialogs with a large number of elements (Run configurations dialog), notification header, breadcrumbs in settings, header in navigation popup, accent elements in lists and trees. Use Group header to divide the page on groups, but not to draw too much attention to the headings.
Default `JBFont.regular()`	Default	Labels, inputs, links, trees, tables and other controls; text outputs, notifications, shortcuts
Paragraph	Default Line height default + 3	Multiline description text
Medium `JBFont.medium()`	macOS: Default - 1 Win: Default Linux: Default - 1	Tool window header, navigation bar, editor breadcrumbs, editor tabs (small on macOS)
Medium bold `JBFont.medium().asBold()`		Module in the navigation bar
Small `JBFont.small()`	macOS: Default - 2 Win: Default Linux: Default - 2	Status bar, tool window buttons, inline help, help text in tooltips, separators in lists

If none of the built-in sizes work and a custom one is needed, define it as the default size +/- constant value. Do not hardcode font sizes.

Use the underlined text style for hovered links.

Editor font

JetBrains Mono font is used by default for the Editor.

Name	Font size	Usage
Default	Default	Editor
Small	Default - 1	Line number

Colors

The IDE text colors are in the table below. The editor text colors are managed by the editor color theme.

Name	Light	Dark	Usage	Color key
Default	000	BBB	Labels, inputs, trees, etc.	`.foreground` keys for various UI controls. Examples: `Label.foreground` `Button.foreground` `ComboBox.foreground` `MenuItem.foreground`
Info panel	808080	8C8C8C	Inline help, shortcuts	`Label.infoForeground`
Info input	999999	787878	Additional info in lists (paths, counters), placeholder	`Component.infoForeground`
Disabled	8C8C8C	777777	Disabled labels, disabled links	`.disabledForeground` and `.disabledText` keys for various UI controls. Examples: `Label.disabledForeground` `ComboBox.disabledForeground` `MenuItem.disabledForeground` `CheckBox.disabledText` `Button.disabledText`
Selected	FFF on BACKGROUND	FFF on BACKGROUND	Selected text	`.selectionForeground` keys for various UI controls. Examples: `MenuItem.selectionForeground` `Table.selectionForeground`
Link	2470B3	589DF6	Links	Use the component `LinkLabel` Color keys: `Link.activeForeground` `Link.hoverForeground` `Link.pressedForeground` `Link.visitedForeground`
Error	C7222D	FF5261	Inline errors text	`Label.errorForeground`

Examples

What’s New page that appears in the Editor tab:

{width=802}

Plugin page in the Settings dialog:

{width=439}

{width=587}

7.5 KiB Raw Blame History Unescape Escape