@salutejs/plasma-new-hope 0.82.1-canary.1209.9162541836.0 → 0.82.1-canary.1210.9186102644.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/TextArea/TextArea.js +5 -7
- package/cjs/components/TextArea/TextArea.js.map +1 -1
- package/cjs/components/TextArea/TextArea.tokens.js +0 -4
- package/cjs/components/TextArea/TextArea.tokens.js.map +1 -1
- package/cjs/components/TextArea/TextArea_qicm5y.css +1 -0
- package/cjs/index.css +1 -1
- package/es/components/TextArea/TextArea.js +5 -7
- package/es/components/TextArea/TextArea.js.map +1 -1
- package/es/components/TextArea/TextArea.tokens.js +0 -4
- package/es/components/TextArea/TextArea.tokens.js.map +1 -1
- package/es/components/TextArea/TextArea_qicm5y.css +1 -0
- package/es/index.css +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +3 -1
- package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +9 -9
- package/styled-components/cjs/components/Button/Button.template-doc.mdx +8 -9
- package/styled-components/cjs/components/Cell/Cell.template-doc.mdx +68 -0
- package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +1 -1
- package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +14 -14
- package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +5 -5
- package/styled-components/cjs/components/Divider/Divider.template-docs.mdx +57 -0
- package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx +3 -3
- package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +262 -261
- package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +156 -0
- package/styled-components/cjs/components/Image/Image.template-doc.mdx +1 -1
- package/styled-components/cjs/components/Link/Link.template-doc.mdx +4 -4
- package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +85 -33
- package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +1 -2
- package/styled-components/cjs/components/Pagination/Pagination.template-doc.mdx +130 -0
- package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +3 -3
- package/styled-components/cjs/components/Popup/Popup.template-doc.mdx +70 -74
- package/styled-components/cjs/components/Progress/Progress.template-doc.mdx +33 -0
- package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +2 -1
- package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Skeleton/Skeleton.template-doc.mdx +4 -4
- package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +1 -1
- package/styled-components/cjs/components/TextArea/TextArea.js +4 -6
- package/styled-components/cjs/components/TextArea/TextArea.tokens.js +0 -4
- package/styled-components/cjs/components/TextArea/mixins/applyDynamicLabel.js +1 -1
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Toolbar/Toolbar.template-doc.mdx +120 -0
- package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.config.js +4 -4
- package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.config.js +4 -4
- package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +3 -1
- package/styled-components/es/components/Badge/Badge.template-doc.mdx +9 -9
- package/styled-components/es/components/Button/Button.template-doc.mdx +8 -9
- package/styled-components/es/components/Cell/Cell.template-doc.mdx +68 -0
- package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +2 -2
- package/styled-components/es/components/Chip/Chip.template-doc.mdx +1 -1
- package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +14 -14
- package/styled-components/es/components/Counter/Counter.template-doc.mdx +5 -5
- package/styled-components/es/components/Divider/Divider.template-docs.mdx +57 -0
- package/styled-components/es/components/Drawer/Drawer.template-doc.mdx +3 -3
- package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +262 -261
- package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +156 -0
- package/styled-components/es/components/Image/Image.template-doc.mdx +1 -1
- package/styled-components/es/components/Link/Link.template-doc.mdx +4 -4
- package/styled-components/es/components/Modal/Modal.template-doc.mdx +85 -33
- package/styled-components/es/components/Notification/Notification.template-doc.mdx +1 -2
- package/styled-components/es/components/Pagination/Pagination.template-doc.mdx +130 -0
- package/styled-components/es/components/Popover/Popover.template-doc.mdx +3 -3
- package/styled-components/es/components/Popup/Popup.template-doc.mdx +70 -74
- package/styled-components/es/components/Progress/Progress.template-doc.mdx +33 -0
- package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +2 -1
- package/styled-components/es/components/Segment/Segment.template-doc.mdx +2 -2
- package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx +4 -4
- package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +1 -1
- package/styled-components/es/components/TextArea/TextArea.js +4 -6
- package/styled-components/es/components/TextArea/TextArea.tokens.js +0 -4
- package/styled-components/es/components/TextArea/mixins/applyDynamicLabel.js +1 -1
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
- package/styled-components/es/components/Toolbar/Toolbar.template-doc.mdx +120 -0
- package/styled-components/es/examples/plasma_b2c/components/TextArea/TextArea.config.js +4 -4
- package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.config.js +4 -4
- package/types/components/TextArea/TextArea.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.tokens.d.ts +0 -4
- package/types/components/TextArea/TextArea.tokens.d.ts.map +1 -1
- package/types/components/TextArea/mixins/applyDynamicLabel.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextArea/TextArea.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextArea/TextArea.config.d.ts.map +1 -1
- package/cjs/components/TextArea/TextArea_ob9y3r.css +0 -1
- package/es/components/TextArea/TextArea_ob9y3r.css +0 -1
@@ -1,45 +1,79 @@
|
|
1
1
|
---
|
2
|
-
id:
|
3
|
-
title:
|
2
|
+
id: popup
|
3
|
+
title: Popup
|
4
4
|
---
|
5
5
|
|
6
6
|
import { PropsTable, Description } from '@site/src/components';
|
7
7
|
|
8
|
-
#
|
9
|
-
<Description name="
|
10
|
-
<PropsTable name="
|
8
|
+
# Popup
|
9
|
+
<Description name="Popup" />
|
10
|
+
<PropsTable name="Popup" />
|
11
11
|
|
12
12
|
### Провайдер контекста
|
13
13
|
|
14
|
-
Поместите `
|
14
|
+
Поместите `PopupProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять Popup:
|
15
15
|
|
16
16
|
```tsx title="index.ts"
|
17
17
|
import ReactDOM from 'react-dom';
|
18
|
-
import {
|
18
|
+
import { PopupProvider } from '@salutejs/sdds-serv';
|
19
19
|
|
20
20
|
import { App } from './App';
|
21
21
|
|
22
22
|
ReactDOM.render(
|
23
|
-
<
|
23
|
+
<PopupProvider>
|
24
24
|
<App />
|
25
|
-
</
|
25
|
+
</PopupProvider>,
|
26
26
|
document.getElementById('root')
|
27
27
|
);
|
28
28
|
```
|
29
29
|
|
30
30
|
### Использование
|
31
31
|
|
32
|
-
|
32
|
+
Popup можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`.
|
33
|
+
|
33
34
|
Также это свойство поддерживает передачу id элемента, в котором будет использоваться компонент.
|
35
|
+
|
34
36
|
Само позиционирование можно указать с помощью свойства `placement`(center - по умолчанию; left, right, top, bottom и их комбинации),
|
35
|
-
|
37
|
+
а также определить отступы от точки с помощью `offset`.
|
36
38
|
|
37
39
|
```tsx live
|
38
40
|
import React, { useRef } from 'react';
|
39
|
-
import
|
40
|
-
import {
|
41
|
+
import styled from 'styled-components';
|
42
|
+
import { surfaceSolidTertiary, surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
|
43
|
+
|
44
|
+
import { SSRProvider, Button, Popup, PopupProvider } from '@salutejs/{{ package }}';
|
41
45
|
|
42
46
|
export function App() {
|
47
|
+
const StyledButton = styled(Button)`
|
48
|
+
margin-top: 1rem;
|
49
|
+
width: 15rem;
|
50
|
+
`;
|
51
|
+
|
52
|
+
const StyledWrapper = styled.div`
|
53
|
+
height: 500px;
|
54
|
+
`;
|
55
|
+
|
56
|
+
const OtherContent = styled.div`
|
57
|
+
margin-top: 1rem;
|
58
|
+
width: 400px;
|
59
|
+
height: 500px;
|
60
|
+
background: ${surfaceSolidTertiary};
|
61
|
+
position: absolute;
|
62
|
+
|
63
|
+
display: flex;
|
64
|
+
align-items: flex-start;
|
65
|
+
justify-content: center;
|
66
|
+
padding: 1rem;
|
67
|
+
|
68
|
+
bottom: 0;
|
69
|
+
right: 0;
|
70
|
+
`;
|
71
|
+
|
72
|
+
const Content = styled.div`
|
73
|
+
background: ${surfaceSolidSecondary};
|
74
|
+
padding: 1rem;
|
75
|
+
`;
|
76
|
+
|
43
77
|
const [isOpenA, setIsOpenA] = React.useState(false);
|
44
78
|
const [isOpenB, setIsOpenB] = React.useState(false);
|
45
79
|
|
@@ -47,59 +81,28 @@ export function App() {
|
|
47
81
|
|
48
82
|
return (
|
49
83
|
<SSRProvider>
|
50
|
-
<
|
51
|
-
<
|
84
|
+
<PopupProvider>
|
85
|
+
<StyledWrapper>
|
52
86
|
<div style=\{{ display: 'flex', flexDirection: 'column' }}>
|
53
|
-
<
|
54
|
-
|
55
|
-
marginTop: "1rem",
|
56
|
-
width: "15rem"
|
57
|
-
}}
|
58
|
-
text="Открыть в document"
|
59
|
-
onClick={() => setIsOpenB(true)}
|
60
|
-
/>
|
61
|
-
<Button
|
62
|
-
style=\{{
|
63
|
-
marginTop: "1rem",
|
64
|
-
width: "15rem"
|
65
|
-
}}
|
66
|
-
text="Открыть во Frame"
|
67
|
-
onClick={() => setIsOpenA(true)}
|
68
|
-
/>
|
87
|
+
<StyledButton text="Открыть в document" onClick={() => setIsOpenB(true)} />
|
88
|
+
<StyledButton text="Открыть во Frame" onClick={() => setIsOpenA(true)} />
|
69
89
|
</div>
|
70
|
-
<
|
90
|
+
<Popup
|
71
91
|
id="popupA"
|
72
92
|
frame={ref}
|
73
93
|
isOpen={isOpenA}
|
74
94
|
placement="center"
|
75
95
|
offset={[0, 0]}
|
76
96
|
>
|
77
|
-
<
|
97
|
+
<Content>
|
78
98
|
<Button onClick={() => setIsOpenA(false)}>Close</Button>
|
79
99
|
<>Content</>
|
80
|
-
</
|
81
|
-
</
|
82
|
-
<
|
83
|
-
ref={ref}
|
84
|
-
style=\{{
|
85
|
-
marginTop: "1rem",
|
86
|
-
width: "400px",
|
87
|
-
height: "500px",
|
88
|
-
background: surfaceSolid03,
|
89
|
-
position: "absolute",
|
90
|
-
|
91
|
-
display: "flex",
|
92
|
-
alignItems: "flex-start",
|
93
|
-
justifyContent: "center",
|
94
|
-
padding: "1rem",
|
95
|
-
|
96
|
-
bottom: 0,
|
97
|
-
right: 0
|
98
|
-
}}
|
99
|
-
>
|
100
|
+
</Content>
|
101
|
+
</Popup>
|
102
|
+
<OtherContent ref={ref}>
|
100
103
|
<>Frame</>
|
101
|
-
</
|
102
|
-
<
|
104
|
+
</OtherContent>
|
105
|
+
<Popup
|
103
106
|
id="popupB"
|
104
107
|
frame="document"
|
105
108
|
isOpen={isOpenB}
|
@@ -110,9 +113,9 @@ export function App() {
|
|
110
113
|
<Button onClick={() => setIsOpenB(false)}>Close</Button>
|
111
114
|
<>Content</>
|
112
115
|
</Content>
|
113
|
-
</
|
114
|
-
</
|
115
|
-
</
|
116
|
+
</Popup>
|
117
|
+
</StyledWrapper>
|
118
|
+
</PopupProvider>
|
116
119
|
</SSRProvider>
|
117
120
|
);
|
118
121
|
}
|
@@ -121,19 +124,19 @@ export function App() {
|
|
121
124
|
## Подключение анимации
|
122
125
|
|
123
126
|
Для подключения анимации нужно добавить параметр `withAnimation`.
|
124
|
-
Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `
|
125
|
-
Для добавления анимации необходимо использовать класс `.popup-
|
127
|
+
Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `PopupClasses` для `Popup`.
|
128
|
+
Для добавления анимации необходимо использовать класс `.popup-root` через переменную `PopupClasses.root` из пакета.
|
126
129
|
|
127
130
|
Пример:
|
128
131
|
|
129
132
|
```tsx
|
130
|
-
const StyledPopupTransition = styled(
|
131
|
-
&& > .${
|
133
|
+
const StyledPopupTransition = styled(Popup)`
|
134
|
+
&& > .${PopupClasses.root} {
|
132
135
|
opacity: 1;
|
133
136
|
transition: opacity 0.5s 0.1s;
|
134
137
|
}
|
135
138
|
|
136
|
-
&&.${
|
139
|
+
&&.${PopupClasses.endTransition} > .${PopupClasses.root} {
|
137
140
|
opacity: 0;
|
138
141
|
transition: opacity 0.5s 0.1s;
|
139
142
|
}
|
@@ -143,12 +146,12 @@ const StyledPopupTransition = styled(PopupBase)`
|
|
143
146
|
или
|
144
147
|
|
145
148
|
```tsx
|
146
|
-
const StyledPopupAnimation = styled(
|
147
|
-
&& > .${
|
149
|
+
const StyledPopupAnimation = styled(Popup)`
|
150
|
+
&& > .${PopupClasses.root} {
|
148
151
|
animation: fadeIn 1s forwards;
|
149
152
|
}
|
150
153
|
|
151
|
-
&&.${
|
154
|
+
&&.${PopupClasses.endAnimation} > .${PopupClasses.root} {
|
152
155
|
animation: fadeOut 1s forwards;
|
153
156
|
}
|
154
157
|
|
@@ -182,14 +185,7 @@ const StyledPopupAnimation = styled(PopupBase)`
|
|
182
185
|
return (
|
183
186
|
<>
|
184
187
|
<div>
|
185
|
-
<
|
186
|
-
style=\{{
|
187
|
-
marginTop: "1rem",
|
188
|
-
width: "15rem"
|
189
|
-
}}
|
190
|
-
text="Открыть"
|
191
|
-
onClick={() => setIsOpen(true)}
|
192
|
-
/>
|
188
|
+
<StyledButton text="Открыть" onClick={() => setIsOpen(true)} />
|
193
189
|
</div>
|
194
190
|
<StyledPopupAnimation
|
195
191
|
id="popup-id"
|
@@ -0,0 +1,33 @@
|
|
1
|
+
---
|
2
|
+
id: progress
|
3
|
+
title: Progress
|
4
|
+
---
|
5
|
+
|
6
|
+
import { PropsTable, Description } from '@site/src/components';
|
7
|
+
|
8
|
+
# Progress
|
9
|
+
<Description name="Progress" />
|
10
|
+
<PropsTable name="Progress" exclude={['css']} />
|
11
|
+
|
12
|
+
##Примеры
|
13
|
+
|
14
|
+
### Вид прогресса
|
15
|
+
Вид прогресса задается с помощью свойства `view`. Возможные значения свойства `view`:
|
16
|
+
+ `"default"` – по умолчанию;
|
17
|
+
+ `"primary"` – основная;
|
18
|
+
+ `"secondary"` – вторичная;
|
19
|
+
+ `"accent"` – акцентная;
|
20
|
+
+ `"success"` – успешное завершение;
|
21
|
+
+ `"warning"` – предупреждение;
|
22
|
+
+ `"error"` – ошибка;
|
23
|
+
|
24
|
+
```tsx live
|
25
|
+
import React from 'react';
|
26
|
+
import { Progress } from '@salutejs/{{ package }}';
|
27
|
+
|
28
|
+
export function App() {
|
29
|
+
return (
|
30
|
+
<Progress value={25} view="success" displayValue />
|
31
|
+
);
|
32
|
+
}
|
33
|
+
```
|
@@ -27,8 +27,9 @@ export function App() {
|
|
27
27
|
}
|
28
28
|
```
|
29
29
|
|
30
|
-
##
|
30
|
+
## RadioGroup
|
31
31
|
Компоненты `Radiobox` следует объединять в `RadioGroup`
|
32
|
+
|
32
33
|
```tsx live
|
33
34
|
<RadioGroup aria-labelledby="radiogroup-title-id">
|
34
35
|
<H3 id="radiogroup-title-id">Заголовок</H3>
|
@@ -25,8 +25,8 @@ import { PropsTable, Description } from '@site/src/components';
|
|
25
25
|
Внутри данного провайдера есть доступ к хуку `useSegment`.
|
26
26
|
|
27
27
|
```tsx live
|
28
|
-
import React
|
29
|
-
import { SegmentGroup, SegmentItem, SegmentProvider } from '@salutejs/{{ package }}';
|
28
|
+
import React from 'react';
|
29
|
+
import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
|
30
30
|
|
31
31
|
export function App() {
|
32
32
|
const items = Array(8).fill(0);
|
@@ -6,7 +6,7 @@ title: Skeleton
|
|
6
6
|
import { PropsTable, Description } from '@site/src/components';
|
7
7
|
|
8
8
|
# Skeleton
|
9
|
-
Набор компонентов для создания скелетов загрузки (
|
9
|
+
Набор компонентов для создания скелетов загрузки (placeholders).
|
10
10
|
|
11
11
|
## LineSkeleton
|
12
12
|
<Description name="LineSkeleton" />
|
@@ -77,13 +77,13 @@ export function App() {
|
|
77
77
|
```
|
78
78
|
|
79
79
|
## Доступность
|
80
|
-
При
|
80
|
+
При использовании hook `withSkeleton` необходимо воспользоваться атрибутами WAI ARIA. Пример с кнопкой:
|
81
81
|
|
82
82
|
```tsx
|
83
83
|
import React, { useState } from 'react';
|
84
84
|
import { Button } from '@salutejs/{{ package }}';
|
85
85
|
|
86
|
-
const ButtonSkeleton = withSkeleton<ButtonProps & WithSkeletonProps>(
|
86
|
+
const ButtonSkeleton = withSkeleton<ButtonProps & WithSkeletonProps>(Button);
|
87
87
|
|
88
88
|
export default function App () {
|
89
89
|
const [skeleton, setSkeleton] = useState(false);
|
@@ -100,4 +100,4 @@ export default function App () {
|
|
100
100
|
}
|
101
101
|
```
|
102
102
|
|
103
|
-
Таким образом, при `skeleton=true` и `aria-busy=true`
|
103
|
+
Таким образом, при `skeleton=true` и `aria-busy=true` screen-reader будет оповещать о соответствующем статусе компонента.
|
@@ -27,7 +27,7 @@ import { PropsTable, Description } from '@site/src/components';
|
|
27
27
|
|
28
28
|
## Использование
|
29
29
|
|
30
|
-
###
|
30
|
+
### Стандартное подключение, без клавиатурной навигации
|
31
31
|
|
32
32
|
```tsx live
|
33
33
|
import React, { useState } from 'react';
|
@@ -48,17 +48,16 @@ export var getDynamicLabelClasses = function getDynamicLabelClasses(props, focus
|
|
48
48
|
labelPlacement = props.labelPlacement,
|
49
49
|
autoResize = props.autoResize,
|
50
50
|
rows = props.rows,
|
51
|
-
value = props.value
|
52
|
-
size = props.size;
|
51
|
+
value = props.value;
|
53
52
|
|
54
53
|
// Добавить класс отвечающий за изменение цвета плейсхолдера при фокусе
|
55
54
|
var withFocusedOuterUpPlaceholder = !readOnly && focused && (!label || labelPlacement === 'outer') ? focusedOuterPlaceholderColor : undefined;
|
56
55
|
|
57
56
|
// Добавить класс отвечающий за поднятие и уменьшение плейсхолдера
|
58
|
-
var withInnerPlaceholderUp = labelPlacement === 'inner' && label && !autoResize && !rows &&
|
57
|
+
var withInnerPlaceholderUp = labelPlacement === 'inner' && label && !autoResize && !rows && (!readOnly && (value || focused) || readOnly && value) ? innerPlaceholderUp : undefined;
|
59
58
|
|
60
59
|
// Добавить класс отвечающий за скрытие плейсхолдера
|
61
|
-
var withHidePlaceholder = value && !label || labelPlacement === 'inner' && (focused && !readOnly || value) && label && (rows || autoResize) || labelPlacement === 'outer' && value
|
60
|
+
var withHidePlaceholder = value && !label || labelPlacement === 'inner' && (focused && !readOnly || value) && label && (rows || autoResize) || labelPlacement === 'outer' && value ? hidePlaceHolder : undefined;
|
62
61
|
return [withFocusedOuterUpPlaceholder, withInnerPlaceholderUp, withHidePlaceholder];
|
63
62
|
};
|
64
63
|
export var textAreaRoot = function textAreaRoot(Root) {
|
@@ -110,7 +109,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
110
109
|
var overriddenView = status !== undefined ? fallbackStatusMap[status] : view;
|
111
110
|
var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
|
112
111
|
var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
|
113
|
-
var placeLabel = labelPlacement === 'inner' && label
|
112
|
+
var placeLabel = labelPlacement === 'inner' && label ? label : placeholder;
|
114
113
|
useResizeObserver(outerRef, function (currentElement) {
|
115
114
|
var _currentElement$style = currentElement.style,
|
116
115
|
inlineWidth = _currentElement$style.width,
|
@@ -136,7 +135,6 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
136
135
|
onChange === null || onChange === void 0 || onChange(event);
|
137
136
|
}, [value, onChange]);
|
138
137
|
var dynamicLabelClasses = getDynamicLabelClasses({
|
139
|
-
size: size,
|
140
138
|
readOnly: readOnly,
|
141
139
|
label: label,
|
142
140
|
labelPlacement: labelPlacement,
|
@@ -115,10 +115,6 @@ export var tokens = {
|
|
115
115
|
labelInnerLetterSpacing: '--plasma-textarea-label-inner-letter-spacing',
|
116
116
|
/** Высота строки для элемента label, когда он внутри и уменьшен */
|
117
117
|
labelInnerLineHeight: '--plasma-textarea-label-inner-line-height',
|
118
|
-
/** Отступ сверху для элемента textarea при фокусе */
|
119
|
-
labelInnerTop: '--plasma-textarea-label-inner-top',
|
120
|
-
/** Отступ между Label и TextArea */
|
121
|
-
labelInnerMarginBottom: '--plasma-textarea-label-inner-margin-bottom',
|
122
118
|
/** Шрифт для элемента textarea */
|
123
119
|
inputFontFamily: '--plasma-textarea-input-font-family',
|
124
120
|
/** Размер шрифта для элемента textarea */
|
@@ -5,4 +5,4 @@ var innerPlaceholderUp = classes.innerPlaceholderUp,
|
|
5
5
|
styledTextArea = classes.styledTextArea,
|
6
6
|
styledTextAreaWrapper = classes.styledTextAreaWrapper,
|
7
7
|
styledPlaceholder = classes.styledPlaceholder;
|
8
|
-
export var applyDynamicLabel = /*#__PURE__*/"\n .".concat(String(innerPlaceholderUp), " {\n .").concat(String(styledTextArea), " {\n height: calc(var(--plasma_private-textarea-input-actual-height) -
|
8
|
+
export var applyDynamicLabel = /*#__PURE__*/"\n .".concat(String(innerPlaceholderUp), " {\n .").concat(String(styledTextArea), " {\n height: calc(var(--plasma_private-textarea-input-actual-height) - 1rem);\n }\n\n .").concat(String(styledTextAreaWrapper), " {\n padding-top: calc(var(").concat(tokens.inputPaddingTop, ") + 1rem);\n }\n\n .").concat(String(styledPlaceholder), " {\n font-family: var(").concat(tokens.labelInnerFontFamily, ");\n font-size: var(").concat(tokens.labelInnerFontSize, ");\n font-style: var(").concat(tokens.labelInnerFontStyle, ");\n font-weight: var(").concat(tokens.labelInnerFontWeight, ");\n letter-spacing: var(").concat(tokens.labelInnerLetterSpacing, ");\n line-height: var(").concat(tokens.labelInnerLineHeight, ");\n }\n }\n\n .").concat(String(hidePlaceHolder), " {\n .").concat(String(styledPlaceholder), " {\n display: none;\n }\n }\n\n .").concat(String(focusedOuterPlaceholderColor), " {\n .").concat(String(styledPlaceholder), " {\n color: var(").concat(tokens.placeholderColorFocus, ");\n }\n }\n");
|
@@ -117,7 +117,7 @@ export function App() {
|
|
117
117
|
|
118
118
|
```tsx live
|
119
119
|
import React from 'react';
|
120
|
-
import { TextField } from '@salutejs/{{ package }};
|
120
|
+
import { TextField } from '@salutejs/{{ package }}';
|
121
121
|
|
122
122
|
export function App() {
|
123
123
|
return (
|
@@ -133,4 +133,4 @@ export function App() {
|
|
133
133
|
</div>
|
134
134
|
);
|
135
135
|
}
|
136
|
-
```
|
136
|
+
```
|
@@ -0,0 +1,120 @@
|
|
1
|
+
---
|
2
|
+
id: toolbar
|
3
|
+
title: Toolbar
|
4
|
+
---
|
5
|
+
|
6
|
+
import { PropsTable, Description } from '@site/src/components';
|
7
|
+
|
8
|
+
# Toolbar
|
9
|
+
Toolbar может отображаться в горизонтальном и вертикальном положении с разными размерами.
|
10
|
+
|
11
|
+
## Toolbar
|
12
|
+
<Description name="Toolbar" />
|
13
|
+
<PropsTable name="Toolbar" exclude={['css', 'focused']} />
|
14
|
+
|
15
|
+
## Использование
|
16
|
+
Компонент `Toolbar` должен содержать контент передаваемый в `children`.
|
17
|
+
Для разделения элементов можно использовать ToolbarDivider.
|
18
|
+
|
19
|
+
```tsx live
|
20
|
+
import React from 'react';
|
21
|
+
import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
|
22
|
+
import { IconEdit } from '@salutejs/plasma-icons';
|
23
|
+
|
24
|
+
export function App() {
|
25
|
+
return (
|
26
|
+
<Toolbar>
|
27
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
28
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
29
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
30
|
+
<ToolbarDivider />
|
31
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
32
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
33
|
+
</Toolbar>
|
34
|
+
);
|
35
|
+
}
|
36
|
+
```
|
37
|
+
|
38
|
+
## Примеры
|
39
|
+
|
40
|
+
### Размер Toolbar
|
41
|
+
Размер Toolbar задается с помощью свойства `size`.
|
42
|
+
|
43
|
+
Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`:
|
44
|
+
|
45
|
+
```tsx live
|
46
|
+
import React from 'react';
|
47
|
+
import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
|
48
|
+
import { IconEdit } from '@salutejs/plasma-icons';
|
49
|
+
|
50
|
+
export function App() {
|
51
|
+
return (
|
52
|
+
<div>
|
53
|
+
<Toolbar size="l">
|
54
|
+
<Button square size="l" view="clear" contentLeft={<IconEdit />} />
|
55
|
+
<Button square size="l" view="clear" contentLeft={<IconEdit />} />
|
56
|
+
<ToolbarDivider />
|
57
|
+
<Button square size="l" view="clear" contentLeft={<IconEdit />} />
|
58
|
+
<Button square size="l" view="clear" contentLeft={<IconEdit />} />
|
59
|
+
</Toolbar>
|
60
|
+
|
61
|
+
<Toolbar size="m">
|
62
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
63
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
64
|
+
<ToolbarDivider />
|
65
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
66
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
67
|
+
</Toolbar>
|
68
|
+
|
69
|
+
<Toolbar size="m">
|
70
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
71
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
72
|
+
<ToolbarDivider />
|
73
|
+
<Button square size="s" view="clear" contentLeft={<IconEdit />} />
|
74
|
+
<Button square size="s" view="clear" contentLeft={<IconEdit />} />
|
75
|
+
</Toolbar>
|
76
|
+
|
77
|
+
<Toolbar size="xs">
|
78
|
+
<Button square size="xs" view="clear" contentLeft={<IconEdit />} />
|
79
|
+
<Button square size="xs" view="clear" contentLeft={<IconEdit />} />
|
80
|
+
<ToolbarDivider />
|
81
|
+
<Button square size="xs" view="clear" contentLeft={<IconEdit />} />
|
82
|
+
<Button square size="xs" view="clear" contentLeft={<IconEdit />} />
|
83
|
+
</Toolbar>
|
84
|
+
</div>
|
85
|
+
);
|
86
|
+
}
|
87
|
+
```
|
88
|
+
|
89
|
+
### Положение Toolbar
|
90
|
+
Положение Toolbar задается с помощью свойства `orientation`. Возможные значения свойства `orientation`:
|
91
|
+
+ `"vertical"` – вертикальное положение;
|
92
|
+
+ `"horizontal"` – горизонтальное положение;
|
93
|
+
|
94
|
+
```tsx live
|
95
|
+
import React from 'react';
|
96
|
+
import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
|
97
|
+
import { IconEdit } from '@salutejs/plasma-icons';
|
98
|
+
|
99
|
+
export function App() {
|
100
|
+
return (
|
101
|
+
<div>
|
102
|
+
<Toolbar orientation="vertical">
|
103
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
104
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
105
|
+
<ToolbarDivider />
|
106
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
107
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
108
|
+
</Toolbar>
|
109
|
+
|
110
|
+
<Toolbar orientation="horizontal">
|
111
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
112
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
113
|
+
<ToolbarDivider />
|
114
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
115
|
+
<Button square size="m" view="clear" contentLeft={<IconEdit />} />
|
116
|
+
</Toolbar>
|
117
|
+
</div>
|
118
|
+
);
|
119
|
+
}
|
120
|
+
```
|
@@ -7,10 +7,10 @@ export var config = {
|
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
size: {
|
10
|
-
xs: /*#__PURE__*/css(["", ":100%;", ":7.312rem;", ":0.625rem;", ":0.5rem;", ":0.5rem 0.5rem 0 0;", ":0.563rem;", ":0.625rem;", ":2.125rem;", ":0.563rem;", ":0.625rem;", ":0.5rem;", ":0.625rem;", ":0.563rem;", ":0.625rem;", ":0rem;", ":0.563rem;", ":0.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":
|
11
|
-
s: /*#__PURE__*/css(["", ":100%;", ":7.187rem;", ":0.625rem;", ":0.625rem;", ":0.625rem 0.625rem 0 0;", ":0.688rem;", ":0.875rem;", ":3.125rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0rem;", ":0.688rem;", ":0.75rem;", ":1.25rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":
|
12
|
-
m: /*#__PURE__*/css(["", ":100%;", ":7rem;", ":1.125rem;", ":0.75rem;", ":0.75rem 0.75rem 0 0;", ":0.875rem;", ":1rem;", ":3.375rem;", ":0.75rem;", ":1rem;", ":0.75rem;", ":1rem;", ":0.75rem;", ":1rem;", ":0rem;", ":0.875rem;", ":0.875rem;", ":1.25rem;", ":0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":
|
13
|
-
l: /*#__PURE__*/css(["", ":100%;", ":6.812rem;", ":1.625rem;", ":0.875rem;", ":0.875rem 0.875rem 0 0;", ":1.063rem;", ":1.125rem;", ":3.625rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0rem;", ":1.063rem;", ":1rem;", ":1.25rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":
|
10
|
+
xs: /*#__PURE__*/css(["", ":100%;", ":7.312rem;", ":0.625rem;", ":0.5rem;", ":0.5rem 0.5rem 0 0;", ":0.563rem;", ":0.625rem;", ":2.125rem;", ":0.563rem;", ":0.625rem;", ":0.5rem;", ":0.625rem;", ":0.563rem;", ":0.625rem;", ":0rem;", ":0.563rem;", ":0.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight),
|
11
|
+
s: /*#__PURE__*/css(["", ":100%;", ":7.187rem;", ":0.625rem;", ":0.625rem;", ":0.625rem 0.625rem 0 0;", ":0.688rem;", ":0.875rem;", ":3.125rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0rem;", ":0.688rem;", ":0.75rem;", ":1.25rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight),
|
12
|
+
m: /*#__PURE__*/css(["", ":100%;", ":7rem;", ":1.125rem;", ":0.75rem;", ":0.75rem 0.75rem 0 0;", ":0.875rem;", ":1rem;", ":3.375rem;", ":0.75rem;", ":1rem;", ":0.75rem;", ":1rem;", ":0.75rem;", ":1rem;", ":0rem;", ":0.875rem;", ":0.875rem;", ":1.25rem;", ":0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight),
|
13
|
+
l: /*#__PURE__*/css(["", ":100%;", ":6.812rem;", ":1.625rem;", ":0.875rem;", ":0.875rem 0.875rem 0 0;", ":1.063rem;", ":1.125rem;", ":3.625rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0rem;", ":1.063rem;", ":1rem;", ":1.25rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight)
|
14
14
|
},
|
15
15
|
view: {
|
16
16
|
"default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor),
|