@rescui/typography 0.27.1-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.18 → 0.27.1-RUI-293-Update-menu-component-7a032357e.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index-moduled.css +120 -120
- package/lib/index-moduled.p.module.css.js +128 -128
- package/llm/index.md +11 -0
- package/llm/typography/advanced-css-api.md +753 -0
- package/llm/typography/code.md +97 -0
- package/llm/typography/color-cn.md +68 -0
- package/llm/typography/digits.md +92 -0
- package/llm/typography/headings.md +105 -0
- package/llm/typography/links.md +150 -0
- package/llm/typography/lists.md +145 -0
- package/llm/typography/subtitles.md +85 -0
- package/llm/typography/text-cn.md +308 -0
- package/llm/typography/texts.md +92 -0
- package/llm/typography.md +150 -0
- package/package.json +4 -3
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# Subtitles
|
|
2
|
+
|
|
3
|
+
A subtitle is a line of large regular text that complements a key message in a headline or is itself a message that you want to attract the attention of users. Subtitles are often longer than headlines and can consist of several sentences.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
### Specification
|
|
8
|
+
|
|
9
|
+
| | Weight | Font size, px | Line height, px | Letter spacing, % |
|
|
10
|
+
| --- | --- | --- | --- | --- |
|
|
11
|
+
| Subtitle 1 | Light | 39 | 49 | 0 |
|
|
12
|
+
| Subtitle 2 | Light | 29 | 39 | 0 |
|
|
13
|
+
|
|
14
|
+
### Usage and Examples
|
|
15
|
+
|
|
16
|
+
Subtitles are usually used to supplement the message of a Hero, H1, or H2 header by providing additional detail or context. It may also be useful for calling attention to some part of a longer piece of running text or for indicating a change in context, such as when interspersing a blog post with quotes pulled out from the text.
|
|
17
|
+
|
|
18
|
+
### Adaptivity
|
|
19
|
+
|
|
20
|
+
The font-size and line-height values for the different screen breakpoints
|
|
21
|
+
|
|
22
|
+
| | Desktop | Tablet (≤ 1000px) | Mobile (≤ 640px) |
|
|
23
|
+
| --- | --- | --- | --- |
|
|
24
|
+
| Subtitle 1 | 39/49 | ← | 23/30 |
|
|
25
|
+
| Subtitle 2 | 29/39 | ← | 23/30 |
|
|
26
|
+
|
|
27
|
+
### Recommendations
|
|
28
|
+
|
|
29
|
+
Don’t apply the subtitle style to big chunks of text. Doing so makes the text less readable and can give an impression of being aggressive. You should also keep in mind, like with headlines, that material sometimes gets longer when translated to another language, so long subtitles may become overly distracting after being localized.
|
|
30
|
+
|
|
31
|
+
Don’t apply additional formatting to subtitle text. For example, do not use bold or italics for certain words or whole text in the Subtitle style.
|
|
32
|
+
|
|
33
|
+
Don’t use the Subtitle style too often. When there are too many accented elements on a page, the style begins to lose its ability to draw the reader’s attention. Try not to have more than one subtitle on one screen.
|
|
34
|
+
|
|
35
|
+
Do not use right or center alignment for headlines. The center alignment of Hero title is still present on some jetbrains.com pages, but the new version of the design system aligns headlines to the left edge.
|
|
36
|
+
|
|
37
|
+
## API
|
|
38
|
+
|
|
39
|
+
### textCn helper examples
|
|
40
|
+
|
|
41
|
+
For raw `textCn` to work correctly in the dark theme, you have to specify `--rs-theme-dark: 1` CSS variable for the target element or above. If you don't use the `--rs-theme-dark` CSS variable, please refer to the [useTextStyles method](#usetextstyles-hook-examples).
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import { textCn } from '@rescui/typography';
|
|
45
|
+
|
|
46
|
+
render(<span className={textCn('rs-subtitle-1')}>This is Subtitle 1</span>);
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### useTextStyles hook examples
|
|
50
|
+
|
|
51
|
+
If you use [`ThemeContext`](/utils/ui-contexts/#themecontext) to manage the theme of your application, you should use `useTextStyles` hook.
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
import { useTextStyles } from '@rescui/typography';
|
|
55
|
+
|
|
56
|
+
const MyReactComponent = () => {
|
|
57
|
+
const textCn = useTextStyles();
|
|
58
|
+
return <span className={textCn('rs-subtitle-1')}>This is Subtitle 1</span>;
|
|
59
|
+
};
|
|
60
|
+
render(<MyReactComponent />);
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### Dark theme example
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
import { textCn } from '@rescui/typography';
|
|
67
|
+
|
|
68
|
+
render(
|
|
69
|
+
<div
|
|
70
|
+
style={{
|
|
71
|
+
background: 'var(--rs-color-black)',
|
|
72
|
+
padding: 16,
|
|
73
|
+
'--rs-theme-dark': 1
|
|
74
|
+
}}
|
|
75
|
+
>
|
|
76
|
+
<span className={textCn('rs-subtitle-2')}>This is Subtitle 2</span>
|
|
77
|
+
</div>
|
|
78
|
+
);
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### Parameters
|
|
82
|
+
|
|
83
|
+
| Name | Type | Default | Description |
|
|
84
|
+
| --- | --- | --- | --- |
|
|
85
|
+
| `hardness` | "average" \| "hard" \| "pale" | `"hard"` | |
|
|
@@ -0,0 +1,308 @@
|
|
|
1
|
+
# textCn
|
|
2
|
+
|
|
3
|
+
Typography JavaScript className helper `textCn` provides a minimalistic and type-safe way to work with typography.
|
|
4
|
+
|
|
5
|
+
## textCn
|
|
6
|
+
|
|
7
|
+
### Text bases
|
|
8
|
+
|
|
9
|
+
Text bases include typography main types:
|
|
10
|
+
|
|
11
|
+
- [headings](/typography/headings/api/)
|
|
12
|
+
- [subtitles](/typography/subtitles/api/)
|
|
13
|
+
- [digits](/typography/digits/api/)
|
|
14
|
+
- [texts](/typography/texts/api/)
|
|
15
|
+
- [pre](/typography/code/api/)
|
|
16
|
+
|
|
17
|
+
Any other typography [element, such as links, lists, etc.](#subsidiary-types) should be wrapped or composed using a text bases.
|
|
18
|
+
|
|
19
|
+
#### Text bases example
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import { textCn } from '@rescui/typography';
|
|
23
|
+
|
|
24
|
+
const Demo = () => {
|
|
25
|
+
return (
|
|
26
|
+
<div style={{ maxWidth: 800 }}>
|
|
27
|
+
<h3 className={textCn('rs-h2')}>The drive to develop</h3>
|
|
28
|
+
<div
|
|
29
|
+
className={textCn('rs-text-2', { paragraphOffsetAuto: true })}
|
|
30
|
+
style={{ marginTop: 24 }}
|
|
31
|
+
>
|
|
32
|
+
<p>
|
|
33
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam
|
|
34
|
+
in sem at mollis. Aenean eget tincidunt arcu. Donec luctus placerat
|
|
35
|
+
magna. Morbi tristique mollis lacus eu congue.
|
|
36
|
+
</p>
|
|
37
|
+
<p>
|
|
38
|
+
Praesent nulla risus, rutrum ornare augue ut, congue dignissim libero.
|
|
39
|
+
Fusce suscipit dolor vitae orci condimentum, at dignissim risus
|
|
40
|
+
interdum.
|
|
41
|
+
</p>
|
|
42
|
+
<p>
|
|
43
|
+
Maecenas metus sapien, rutrum viverra pulvinar eu, tincidunt a nunc.
|
|
44
|
+
In hac habitasse platea dictumst. Fusce at eros bibendum, ultrices
|
|
45
|
+
augue sit amet, luctus nisi.
|
|
46
|
+
</p>
|
|
47
|
+
</div>
|
|
48
|
+
<pre
|
|
49
|
+
className={textCn('rs-pre')}
|
|
50
|
+
style={{ marginTop: 24 }}
|
|
51
|
+
>{`fun main() {
|
|
52
|
+
embeddedServer(Netty, port = 8000) {
|
|
53
|
+
routing {
|
|
54
|
+
get ("/") {
|
|
55
|
+
call.respondText("Hello, world!")
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}.start(wait = true)
|
|
59
|
+
}`}</pre>
|
|
60
|
+
</div>
|
|
61
|
+
);
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
render(<Demo />);
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Subsidiary types
|
|
68
|
+
|
|
69
|
+
These typography types must be wrapped or composed using [text bases](#text-bases).
|
|
70
|
+
|
|
71
|
+
- [links](/typography/links/api/)
|
|
72
|
+
- [lists](/typography/lists/api/)
|
|
73
|
+
- [inline code](/typography/code/api/)
|
|
74
|
+
|
|
75
|
+
#### Subsidiary types example
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
import { textCn } from '@rescui/typography';
|
|
79
|
+
import cn from 'classnames';
|
|
80
|
+
|
|
81
|
+
const Demo = () => {
|
|
82
|
+
return (
|
|
83
|
+
<div style={{ maxWidth: 800 }}>
|
|
84
|
+
<p className={textCn('rs-text-1')}>
|
|
85
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam in
|
|
86
|
+
sem at mollis.{' '}
|
|
87
|
+
<span className={textCn('rs-link', { external: true })}>
|
|
88
|
+
Aenean eget tincidunt arcu
|
|
89
|
+
</span>
|
|
90
|
+
. Donec luctus placerat magna. <code className={textCn('rs-code')}>
|
|
91
|
+
Morbi
|
|
92
|
+
</code> tristique mollis lacus eu congue.
|
|
93
|
+
</p>
|
|
94
|
+
<ul
|
|
95
|
+
className={cn(textCn('rs-text-2'), textCn('rs-ul', { offsetItems: 8 }))}
|
|
96
|
+
style={{ marginTop: 24 }}
|
|
97
|
+
>
|
|
98
|
+
<li>First item</li>
|
|
99
|
+
<li>Second item</li>
|
|
100
|
+
<li>Third item</li>
|
|
101
|
+
<li>Fourth item</li>
|
|
102
|
+
</ul>
|
|
103
|
+
</div>
|
|
104
|
+
);
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
render(<Demo />);
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## textCn
|
|
111
|
+
|
|
112
|
+
#### `textCn` mixins
|
|
113
|
+
|
|
114
|
+
These mixins should only be used in elements with [textCn](/typography/text-cn/) classNames.
|
|
115
|
+
|
|
116
|
+
| Mixin name | Details |
|
|
117
|
+
| --- | --- |
|
|
118
|
+
| `rs-text-cn-digits-1` | value: `"rs-digits-1"` |
|
|
119
|
+
| `rs-text-cn-digits-2` | value: `"rs-digits-2"` |
|
|
120
|
+
| `rs-text-cn-super-hero` | value: `"rs-super-hero"` |
|
|
121
|
+
| `rs-text-cn-middle-hero` | value: `"rs-middle-hero"` |
|
|
122
|
+
| `rs-text-cn-hero` | value: `"rs-hero"` |
|
|
123
|
+
| `rs-text-cn-subtitle-1` | value: `"rs-subtitle-1"` |
|
|
124
|
+
| `rs-text-cn-subtitle-2` | value: `"rs-subtitle-2"` |
|
|
125
|
+
| `rs-text-cn-h1` | value: `"rs-h1"` |
|
|
126
|
+
| `rs-text-cn-h2` | value: `"rs-h2"` |
|
|
127
|
+
| `rs-text-cn-h3-plus` | value: `"rs-h3-plus"` |
|
|
128
|
+
| `rs-text-cn-h3` | value: `"rs-h3"` |
|
|
129
|
+
| `rs-text-cn-h4` | value: `"rs-h4"` |
|
|
130
|
+
| `rs-text-cn-h5` | value: `"rs-h5"` |
|
|
131
|
+
| `rs-text-cn-overline` | value: `"rs-overline"` |
|
|
132
|
+
| `rs-text-cn-text-1` | value: `"rs-text-1"` |
|
|
133
|
+
| `rs-text-cn-text-2` | value: `"rs-text-2"` |
|
|
134
|
+
| `rs-text-cn-text-3` | value: `"rs-text-3"` |
|
|
135
|
+
|
|
136
|
+
#### `textCn` Headings params mixins
|
|
137
|
+
|
|
138
|
+
These mixins should only be used in elements with [headings](/typography/headings/) classNames.
|
|
139
|
+
|
|
140
|
+
| Mixin name | Details |
|
|
141
|
+
| --- | --- |
|
|
142
|
+
| `rs-text-cn-heading-hardness-hard` | prop: `hardness`<br><br>value: `"hard"` |
|
|
143
|
+
| `rs-text-cn-heading-hardness-average` | prop: `hardness`<br><br>value: `"average"` |
|
|
144
|
+
| `rs-text-cn-heading-hardness-pale` | prop: `hardness`<br><br>value: `"pale"` |
|
|
145
|
+
| `rs-text-cn-heading-hardness-auto` | prop: `hardness`<br><br>value: `null` |
|
|
146
|
+
|
|
147
|
+
#### `textCn` Subtitles params mixins
|
|
148
|
+
|
|
149
|
+
These mixins should only be used in elements with `textCn('rs-subtitle-<1|2>')` classNames.
|
|
150
|
+
|
|
151
|
+
| Mixin name | Details |
|
|
152
|
+
| --- | --- |
|
|
153
|
+
| `rs-text-cn-hardness-hard` | prop: `hardness`<br><br>value: `"hard"` |
|
|
154
|
+
| `rs-text-cn-hardness-average` | prop: `hardness`<br><br>value: `"average"` |
|
|
155
|
+
| `rs-text-cn-hardness-pale` | prop: `hardness`<br><br>value: `"pale"` |
|
|
156
|
+
| `rs-text-cn-hardness-auto` | prop: `hardness`<br><br>value: `null` |
|
|
157
|
+
|
|
158
|
+
#### `textCn` Digits params mixins
|
|
159
|
+
|
|
160
|
+
These mixins should only be used in elements with `textCn('rs-digits-<1|2>')` classNames.
|
|
161
|
+
|
|
162
|
+
| Mixin name | Details |
|
|
163
|
+
| --- | --- |
|
|
164
|
+
| `rs-text-cn-hardness-hard` | prop: `hardness`<br><br>value: `"hard"` |
|
|
165
|
+
| `rs-text-cn-hardness-average` | prop: `hardness`<br><br>value: `"average"` |
|
|
166
|
+
| `rs-text-cn-hardness-pale` | prop: `hardness`<br><br>value: `"pale"` |
|
|
167
|
+
| `rs-text-cn-hardness-auto` | prop: `hardness`<br><br>value: `null` |
|
|
168
|
+
|
|
169
|
+
#### `textCn` Text params mixins
|
|
170
|
+
|
|
171
|
+
These mixins should only be used in elements with `textCn('rs-text-<1|2|3>')` classNames.
|
|
172
|
+
|
|
173
|
+
| Mixin name | Details |
|
|
174
|
+
| --- | --- |
|
|
175
|
+
| `rs-typography-paragraph-auto-offset-styles` | prop: `paragraphOffsetAuto`<br><br>value: `true`<br><br>Apply auto offset CSS properties for children paragraphs and "pre" elements |
|
|
176
|
+
| `rs-text-cn-hardness-hard` | prop: `hardness`<br><br>value: `"hard"` |
|
|
177
|
+
| `rs-text-cn-hardness-average` | prop: `hardness`<br><br>value: `"average"` |
|
|
178
|
+
| `rs-text-cn-hardness-pale` | prop: `hardness`<br><br>value: `"pale"` |
|
|
179
|
+
| `rs-text-cn-hardness-auto` | prop: `hardness`<br><br>value: `null` |
|
|
180
|
+
|
|
181
|
+
#### `textCn` Ul-List params mixins
|
|
182
|
+
|
|
183
|
+
These mixins should only be used in elements with `textCn('rs-ul')` classNames.
|
|
184
|
+
|
|
185
|
+
| Mixin name | Details |
|
|
186
|
+
| --- | --- |
|
|
187
|
+
| `rs-text-cn-list-compact-true` | prop: `compact`<br><br>value: `true` |
|
|
188
|
+
| `rs-text-cn-list-compact-false` | prop: `compact`<br><br>value: `false` |
|
|
189
|
+
| `rs-text-cn-list-offset-items-4` | prop: `offsetItems`<br><br>value: `4` |
|
|
190
|
+
| `rs-text-cn-list-offset-items-8` | prop: `offsetItems`<br><br>value: `8` |
|
|
191
|
+
| `rs-text-cn-list-offset-items-12` | prop: `offsetItems`<br><br>value: `12` |
|
|
192
|
+
| `rs-text-cn-list-offset-items-16` | prop: `offsetItems`<br><br>value: `16` |
|
|
193
|
+
| `rs-text-cn-list-offset-items-24` | prop: `offsetItems`<br><br>value: `24` |
|
|
194
|
+
| `rs-text-cn-list-offset-items-auto` | prop: `offsetItems`<br><br>value: `null` |
|
|
195
|
+
|
|
196
|
+
#### `textCn` Ol-List params mixins
|
|
197
|
+
|
|
198
|
+
These mixins should only be used in elements with `textCn('rs-ol')` classNames.
|
|
199
|
+
|
|
200
|
+
| Mixin name | Details |
|
|
201
|
+
| --- | --- |
|
|
202
|
+
| `rs-text-cn-ol-alpha-lower` | prop: `offsetItems`<br><br>value: `"lower"` |
|
|
203
|
+
| `rs-text-cn-ol-alpha-upper` | prop: `offsetItems`<br><br>value: `"upper"` |
|
|
204
|
+
| `rs-text-cn-ol-alpha-auto` | prop: `offsetItems`<br><br>value: `null` |
|
|
205
|
+
| `rs-text-cn-list-compact-true` | prop: `compact`<br><br>value: `true` |
|
|
206
|
+
| `rs-text-cn-list-compact-false` | prop: `compact`<br><br>value: `false` |
|
|
207
|
+
| `rs-text-cn-list-offset-items-4` | prop: `offsetItems`<br><br>value: `4` |
|
|
208
|
+
| `rs-text-cn-list-offset-items-8` | prop: `offsetItems`<br><br>value: `8` |
|
|
209
|
+
| `rs-text-cn-list-offset-items-12` | prop: `offsetItems`<br><br>value: `12` |
|
|
210
|
+
| `rs-text-cn-list-offset-items-16` | prop: `offsetItems`<br><br>value: `16` |
|
|
211
|
+
| `rs-text-cn-list-offset-items-24` | prop: `offsetItems`<br><br>value: `24` |
|
|
212
|
+
| `rs-text-cn-list-offset-items-auto` | prop: `offsetItems`<br><br>value: `null` |
|
|
213
|
+
|
|
214
|
+
#### `textCn` Link params mixins
|
|
215
|
+
|
|
216
|
+
These mixins should only be used in elements with `textCn('rs-link')` classNames.
|
|
217
|
+
|
|
218
|
+
| Mixin name | Details |
|
|
219
|
+
| --- | --- |
|
|
220
|
+
| `rs-text-cn-link-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
|
|
221
|
+
| `rs-text-cn-link-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
|
|
222
|
+
| `rs-text-cn-link-mode-standalone` | prop: `mode`<br><br>value: `"standalone"` |
|
|
223
|
+
| `rs-text-cn-link-mode-clear` | prop: `mode`<br><br>value: `"clear"` |
|
|
224
|
+
| `rs-text-cn-link-hardness-hard` | prop: `hardness`<br><br>value: `"hard"` |
|
|
225
|
+
| `rs-text-cn-link-hardness-average` | prop: `hardness`<br><br>value: `"average"` |
|
|
226
|
+
| `rs-text-cn-link-hardness-pale` | prop: `hardness`<br><br>value: `"pale"` |
|
|
227
|
+
| `rs-text-cn-link-hardness-auto` | prop: `hardness`<br><br>value: `null` |
|
|
228
|
+
| `rs-text-cn-link-external-true` | prop: `external`<br><br>value: `true` |
|
|
229
|
+
| `rs-text-cn-link-external-false` | prop: `external`<br><br>value: `false` |
|
|
230
|
+
|
|
231
|
+
#### Demo
|
|
232
|
+
|
|
233
|
+
Instead of separate classes, you can use a single class containing `@media` queries:
|
|
234
|
+
|
|
235
|
+
```tsx
|
|
236
|
+
import { textCn } from '@rescui/typography';
|
|
237
|
+
import cn from 'classnames';
|
|
238
|
+
|
|
239
|
+
const MyTypography = ({ className }) => {
|
|
240
|
+
return (
|
|
241
|
+
<div
|
|
242
|
+
style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}
|
|
243
|
+
className={className}
|
|
244
|
+
>
|
|
245
|
+
<div className={cn(textCn('rs-subtitle-2'), 'slogan')}>
|
|
246
|
+
Lorem ipsum dolor sit amet, consectetur{' '}
|
|
247
|
+
<span className={cn(textCn('rs-link'), 'link')}>adipisicing elit</span>.
|
|
248
|
+
</div>
|
|
249
|
+
<ol className={cn(textCn('rs-text-1'), textCn('rs-ol'), 'ol-list')}>
|
|
250
|
+
<li>Item 1</li>
|
|
251
|
+
<li>Item 2</li>
|
|
252
|
+
<li>Item 3</li>
|
|
253
|
+
</ol>
|
|
254
|
+
</div>
|
|
255
|
+
);
|
|
256
|
+
};
|
|
257
|
+
|
|
258
|
+
render(
|
|
259
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
|
|
260
|
+
<div>
|
|
261
|
+
<p>Default:</p>
|
|
262
|
+
<MyTypography />
|
|
263
|
+
</div>
|
|
264
|
+
<div>
|
|
265
|
+
<p>Var1:</p>
|
|
266
|
+
<MyTypography className={`my-typography-var-1`} />
|
|
267
|
+
</div>
|
|
268
|
+
<div>
|
|
269
|
+
<p>Var1 & Var2 combined:</p>
|
|
270
|
+
<MyTypography className={`my-typography-var-1 my-typography-var-2`} />
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
);
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
```postcss
|
|
277
|
+
@import '@rescui/typography/lib/public-api.p.css';
|
|
278
|
+
|
|
279
|
+
.my-typography-var-1 {
|
|
280
|
+
.slogan {
|
|
281
|
+
@mixin rs-text-cn-text-1;
|
|
282
|
+
@mixin rs-text-cn-hardness-pale;
|
|
283
|
+
}
|
|
284
|
+
.link {
|
|
285
|
+
@mixin rs-text-cn-link-mode-rock;
|
|
286
|
+
@mixin rs-text-cn-link-external-true;
|
|
287
|
+
}
|
|
288
|
+
.ol-list {
|
|
289
|
+
@mixin rs-text-cn-list-offset-items-8;
|
|
290
|
+
@mixin rs-text-cn-ol-alpha-upper;
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
.my-typography-var-2 {
|
|
294
|
+
.slogan {
|
|
295
|
+
@mixin rs-text-cn-h2;
|
|
296
|
+
@mixin rs-text-cn-heading-hardness-average;
|
|
297
|
+
}
|
|
298
|
+
.link {
|
|
299
|
+
@mixin rs-text-cn-link-mode-standalone;
|
|
300
|
+
@mixin rs-text-cn-link-hardness-average;
|
|
301
|
+
@mixin rs-text-cn-link-external-false;
|
|
302
|
+
}
|
|
303
|
+
.ol-list {
|
|
304
|
+
@mixin rs-text-cn-list-offset-items-12;
|
|
305
|
+
@mixin rs-text-cn-ol-alpha-auto;
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
```
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
# Texts
|
|
2
|
+
|
|
3
|
+
This is the style used in RescUI for plain text. There are 3 types of text base style, allowing you to call attention to the relative priority of different pieces of text.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
### Specification
|
|
8
|
+
|
|
9
|
+
| | Weight | Font size, px | Line height, px | Letter spacing, % | Paragraph offset, px |
|
|
10
|
+
| --- | --- | --- | --- | --- | --- |
|
|
11
|
+
| Text 1 | Regular | 20 | 28 | 0 | 32 |
|
|
12
|
+
| Text 2 | Regular | 16 | 24 | 0.15 | 16 |
|
|
13
|
+
| Text 3 | Regular | 13 | 20 | 0.45 | 8 |
|
|
14
|
+
|
|
15
|
+
### Usage and Examples
|
|
16
|
+
|
|
17
|
+
Text-1 is the primary style for large text arrays and for pages that take a long time to read, such as blog posts. It can also be used as a subtle alternative to the Subtitle style, as in this example.
|
|
18
|
+
|
|
19
|
+
Text-2 is used for supplementary text, such as descriptions under headings in components, or for saving space on pages with a high density of information – web pages, documentation, etc.
|
|
20
|
+
|
|
21
|
+
Text-3 is typically used for service text, such as legal information, tips, notes, captions, or tags.
|
|
22
|
+
|
|
23
|
+
### Paragraph offsets
|
|
24
|
+
|
|
25
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A asperiores, doloremque ipsum maiores nihil obcaecati officia porro possimus quae sunt ullam velit. Atque consequuntur cumque deleniti dolor doloremque dolorum ducimus ea ex fuga iste mollitia neque nihil nulla officia officiis optio perspiciatis porro recusandae repellat saepe sunt tempore totam unde velit voluptate voluptates, voluptatum?
|
|
26
|
+
|
|
27
|
+
Accusamus ad aliquam assumenda commodi consectetur cumque dolorum error est eveniet ex explicabo facilis in inventore ipsam magni maxime minus modi molestiae, molestias natus odio officiis, possimus quasi qui recusandae repellat unde. Animi autem, delectus dolorum est id in inventore, magni molestias officia perspiciatis provident recusandae sapiente, ullam!
|
|
28
|
+
|
|
29
|
+
A ad aliquid et explicabo placeat vitae! Accusantium ad animi commodi consectetur cum dolorum enim esse fugiat illo inventore maxime praesentium qui sint, ut voluptatum! Alias aliquam blanditiis deleniti, distinctio eum fuga fugiat fugit incidunt ipsa, iste labore quam quos rerum unde veritatis. Animi architecto, earum eveniet inventore nihil numquam. Aspernatur et praesentium totam?
|
|
30
|
+
|
|
31
|
+
### Recommendations
|
|
32
|
+
|
|
33
|
+
Do not use right and center text alignment, as doing so makes the text harder to read. Left alignment is more familiar to the eye and is basic to RescUI typography.
|
|
34
|
+
|
|
35
|
+
Always separate large amounts of text into paragraphs to make them easier to read. Generally, each paragraph should present a distinct thought.
|
|
36
|
+
|
|
37
|
+
You can indicate the priority of a piece of text by adjusting its color between hard, average, and pale. Don’t use a pale color for primary text.
|
|
38
|
+
|
|
39
|
+
Try to make all your paragraphs approximately the same length. The contrast between paragraphs of several lines and single-line paragraphs is always striking and can distract readers from the point you are trying to make.
|
|
40
|
+
|
|
41
|
+
## API
|
|
42
|
+
|
|
43
|
+
### textCn helper examples
|
|
44
|
+
|
|
45
|
+
For raw `textCn` to work correctly in the dark theme, you have to specify `--rs-theme-dark: 1` CSS variable for the target element or above. If you don't use the `--rs-theme-dark` CSS variable, please refer to the [useTextStyles method](#usetextstyles-hook-examples).
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
import { textCn } from '@rescui/typography';
|
|
49
|
+
|
|
50
|
+
render(<span className={textCn('rs-text-1')}>This is text 1</span>);
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### useTextStyles hook examples
|
|
54
|
+
|
|
55
|
+
If you use [`ThemeContext`](/utils/ui-contexts/#themecontext) to manage the theme of your application, you should use `useTextStyles` hook.
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
import { useTextStyles } from '@rescui/typography';
|
|
59
|
+
|
|
60
|
+
const MyReactComponent = () => {
|
|
61
|
+
const textCn = useTextStyles();
|
|
62
|
+
return <span className={textCn('rs-text-1')}>This is text 1</span>;
|
|
63
|
+
};
|
|
64
|
+
render(<MyReactComponent />);
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Dark theme example
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
import { textCn } from '@rescui/typography';
|
|
71
|
+
|
|
72
|
+
render(
|
|
73
|
+
<div
|
|
74
|
+
style={{
|
|
75
|
+
background: 'var(--rs-color-black)',
|
|
76
|
+
padding: 16,
|
|
77
|
+
'--rs-theme-dark': 1
|
|
78
|
+
}}
|
|
79
|
+
>
|
|
80
|
+
<span className={textCn('rs-text-2', { hardness: 'hard' })}>
|
|
81
|
+
This is text 2 with hardness: hard
|
|
82
|
+
</span>
|
|
83
|
+
</div>
|
|
84
|
+
);
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Parameters
|
|
88
|
+
|
|
89
|
+
| Name | Type | Default | Description |
|
|
90
|
+
| --- | --- | --- | --- |
|
|
91
|
+
| `paragraphOffsetAuto` | boolean | `false` | |
|
|
92
|
+
| `hardness` | "average" \| "hard" \| "pale" | `"average"` | |
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
# Typography overview
|
|
2
|
+
|
|
3
|
+
The Typography module provides a set of classes (CSS API) and JS utils.
|
|
4
|
+
|
|
5
|
+
## Typography Overview
|
|
6
|
+
|
|
7
|
+
## Example
|
|
8
|
+
|
|
9
|
+
```tsx
|
|
10
|
+
import cn from 'classnames';
|
|
11
|
+
import { textCn } from '@rescui/typography';
|
|
12
|
+
|
|
13
|
+
const App = () => {
|
|
14
|
+
return (
|
|
15
|
+
<div>
|
|
16
|
+
<section style={{ maxWidth: 800 }}>
|
|
17
|
+
<h1 className={textCn('rs-hero')}>The drive to develop</h1>
|
|
18
|
+
<p className={textCn('rs-subtitle-1')} style={{ marginTop: 32 }}>
|
|
19
|
+
We make professional
|
|
20
|
+
<a href="#example" className={textCn('rs-link', { mode: 'rock' })}>
|
|
21
|
+
software development
|
|
22
|
+
</a> a more productive and enjoyable experience.
|
|
23
|
+
</p>
|
|
24
|
+
<h3 className={textCn('rs-h3')} style={{ marginTop: 32 }}>
|
|
25
|
+
The drive to develop
|
|
26
|
+
</h3>
|
|
27
|
+
<p className={textCn('rs-text-1')} style={{ marginTop: 16 }}>
|
|
28
|
+
We help developers{' '}
|
|
29
|
+
<a href="#example" className={textCn('rs-link', { external: true })}>
|
|
30
|
+
work faster by automating
|
|
31
|
+
</a>{' '}
|
|
32
|
+
common, repetitive tasks to enable them to stay focused on code design
|
|
33
|
+
and the big picture. We provide tools to explore and familiarize with
|
|
34
|
+
<code className={textCn('rs-code')}>code</code> bases faster.
|
|
35
|
+
</p>
|
|
36
|
+
<ul
|
|
37
|
+
className={cn(textCn('rs-text-2'), textCn('rs-ul'))}
|
|
38
|
+
style={{ marginTop: 16 }}
|
|
39
|
+
>
|
|
40
|
+
<li>We help developers work faster by automating common tasks.</li>
|
|
41
|
+
<li>
|
|
42
|
+
We provide tools for exploring and becoming familiar with code bases
|
|
43
|
+
faster.
|
|
44
|
+
</li>
|
|
45
|
+
<li>
|
|
46
|
+
Regardless of your team’s size, our products will ensure that you
|
|
47
|
+
always have a smooth and enjoyable experience when building and
|
|
48
|
+
shipping your code.
|
|
49
|
+
</li>
|
|
50
|
+
</ul>
|
|
51
|
+
<pre
|
|
52
|
+
className={textCn('rs-pre')}
|
|
53
|
+
style={{ marginTop: 16 }}
|
|
54
|
+
>{`fun main() {
|
|
55
|
+
embeddedServer(Netty, port = 8000) {
|
|
56
|
+
routing {
|
|
57
|
+
get ("/") {
|
|
58
|
+
call.respondText("Hello, world!")
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}.start(wait = true)
|
|
62
|
+
}`}</pre>
|
|
63
|
+
</section>
|
|
64
|
+
</div>
|
|
65
|
+
);
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
render(<App />);
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Font
|
|
72
|
+
|
|
73
|
+
RescUI uses JetBrains Sans for text and JetBrains Mono for code. If you don’t have JetBrains Sans, RescUI uses Inter instead.
|
|
74
|
+
|
|
75
|
+
##### Download:
|
|
76
|
+
|
|
77
|
+
JetBrains Sans (Coming soon)[JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono?selection.family=Sriracha)[Inter](https://fonts.google.com/specimen/Inter?selection.family=Arbutus)
|
|
78
|
+
|
|
79
|
+
### Hardness
|
|
80
|
+
|
|
81
|
+
Depending on the use or state of a component, the text it contains has different levels of hardness. This is only applicable to font styles T1, T2, and T3.
|
|
82
|
+
|
|
83
|
+
#### Hard
|
|
84
|
+
|
|
85
|
+
Hard text styles are used for headings, subtitles, leads, and noteworthy elements and pieces of text, such as quotes or embedded numbers. In navigation elements like tabs and menus, hovered text, selected items, and icons are hard. By default, the text in buttons is hard, as well.
|
|
86
|
+
|
|
87
|
+
Light: #19191c / 100%
|
|
88
|
+
|
|
89
|
+
Dark: #FFFFFF / 100%
|
|
90
|
+
|
|
91
|
+
#### Average
|
|
92
|
+
|
|
93
|
+
This is the style for plain text, and it is also the default state of components (except for buttons, which are always hard). In some cases, it may be appropriate to use a different hardness for a piece of text. For example, for a short description near a header, you may want to use hard.
|
|
94
|
+
|
|
95
|
+
Light: #19191c / 70%
|
|
96
|
+
|
|
97
|
+
Dark: #FFFFFF / 70%
|
|
98
|
+
|
|
99
|
+
#### Pale
|
|
100
|
+
|
|
101
|
+
This style is used for signatures, secondary information, and components in the disabled state.
|
|
102
|
+
|
|
103
|
+
Light: #19191c / 50%
|
|
104
|
+
|
|
105
|
+
Dark: #FFFFFF / 50%
|
|
106
|
+
|
|
107
|
+
### Line length
|
|
108
|
+
|
|
109
|
+
The recommended maximum line length is 12 columns grid for popular desktop resolutions. The recommended length for code lines depends on the content.
|
|
110
|
+
|
|
111
|
+
### Vertical spacing
|
|
112
|
+
|
|
113
|
+
We recommend sticking to these rules, but you can use any multiple of 4px for the vertical spacing if you need to.
|
|
114
|
+
|
|
115
|
+
Though this is not done automatically, we recommend adjusting the vertical spacing before text.
|
|
116
|
+
|
|
117
|
+
| | Desktop | Tablet (≤ 1000px) | Mobile (≤ 640px) |
|
|
118
|
+
| --- | --- | --- | --- |
|
|
119
|
+
| Superhero | 96 | ← | 64 |
|
|
120
|
+
| Middlehero | 96 | ← | 64 |
|
|
121
|
+
| Hero | 96 | ← | 32 |
|
|
122
|
+
| Subtitle 1 | 24-32 | ← | 24 |
|
|
123
|
+
| Subtitle 2 | 24 | ← | ← |
|
|
124
|
+
| H1 | 64 | ← | 32 |
|
|
125
|
+
| H2 | 48 | ← | 16 |
|
|
126
|
+
| H3-plus | 32 | ← | 16 |
|
|
127
|
+
| H3 | 32 | ← | 16 |
|
|
128
|
+
| H4 | 16 | ← | ← |
|
|
129
|
+
| H5 | 8 | ← | ← |
|
|
130
|
+
| Text 1 | 16-32 | ← | ← |
|
|
131
|
+
| Text 2 | 8-16 | ← | ← |
|
|
132
|
+
| Text 3 | 8 | ← | ← |
|
|
133
|
+
| Pre | 16 | ← | ← |
|
|
134
|
+
| Overline | 8 | ← | ← |
|
|
135
|
+
|
|
136
|
+
### Accents
|
|
137
|
+
|
|
138
|
+
You can use several accents to emphasize a part of the text.
|
|
139
|
+
|
|
140
|
+
#### Bold
|
|
141
|
+
|
|
142
|
+
If you need to emphasize a piece of text, the bold text variation is a safe option. It changes the face of the text from regular to bold and leaves the color unchanged.
|
|
143
|
+
|
|
144
|
+
#### Caps
|
|
145
|
+
|
|
146
|
+
Use this option with caution. Long capitalized sentences are hard to read and can give the impression that you are shouting at the reader.
|
|
147
|
+
|
|
148
|
+
#### Italic
|
|
149
|
+
|
|
150
|
+
Use this format only if it is absolutely necessary. JetBrains Sans currently doesn’t support italics, and we strongly recommend that you avoid using it.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rescui/typography",
|
|
3
|
-
"version": "0.27.1-RUI-
|
|
3
|
+
"version": "0.27.1-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "JetBrains",
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
"src:main": "src/index.js",
|
|
10
10
|
"files": [
|
|
11
11
|
"lib",
|
|
12
|
+
"llm",
|
|
12
13
|
"LICENSE.txt"
|
|
13
14
|
],
|
|
14
15
|
"sideEffects": [
|
|
@@ -20,7 +21,7 @@
|
|
|
20
21
|
},
|
|
21
22
|
"dependencies": {
|
|
22
23
|
"@babel/runtime-corejs3": "^7.26.0",
|
|
23
|
-
"@rescui/colors": "0.3.1-RUI-
|
|
24
|
+
"@rescui/colors": "0.3.1-RUI-293-Update-menu-component-7a032357e.55+7a032357e",
|
|
24
25
|
"classnames": "^2.2.6",
|
|
25
26
|
"inter-ui": "^3.15.1"
|
|
26
27
|
},
|
|
@@ -44,5 +45,5 @@
|
|
|
44
45
|
"build-mixins": "rescui-scripts build-pcss-api --file mixins.p.css"
|
|
45
46
|
},
|
|
46
47
|
"nx": {},
|
|
47
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "7a032357e8f31abbf69e18aa6b7ef2d75e40f42e"
|
|
48
49
|
}
|