@salutejs/sdds-serv 0.223.1-canary.1688.12706274765.0 → 0.224.0-canary.1696.12706339837.0
Sign up to get free protection for your applications and to get access to all the features.
- package/api/sdds-serv.api.md +128 -59
- package/components/Accordion/Accordion.config.js +1 -1
- package/components/Attach/Attach.config.js +1 -1
- package/components/Autocomplete/Autocomplete.config.js +1 -1
- package/components/Avatar/Avatar.config.d.ts +18 -0
- package/components/Avatar/Avatar.config.js +19 -1
- package/components/Avatar/Avatar.config.js.map +1 -1
- package/components/Avatar/Avatar.config_1buqzeq.css +21 -0
- package/components/Avatar/Avatar.css +21 -7
- package/components/Avatar/Avatar.d.ts +250 -6
- package/components/Badge/Badge.config.js +1 -1
- package/components/Badge/Badge.d.ts +8 -48
- package/components/Breadcrumbs/Breadcrumbs.config.js +1 -1
- package/components/Button/Button.config.js +1 -1
- package/components/ButtonGroup/ButtonGroup.config.js +1 -1
- package/components/Calendar/CalendarBase.config.js +1 -1
- package/components/Calendar/CalendarDouble.config.js +1 -1
- package/components/Cell/Cell.config.js +1 -1
- package/components/Checkbox/Checkbox.config.js +1 -1
- package/components/Chip/Chip.config.js +1 -1
- package/components/ChipGroup/ChipGroup.config.js +1 -1
- package/components/Combobox/Combobox.config.js +1 -1
- package/components/Combobox/Combobox.js +1 -5
- package/components/Combobox/Combobox.js.map +1 -1
- package/components/Counter/Counter.config.js +1 -1
- package/components/Counter/Counter.d.ts +1 -6
- package/components/DatePicker/DatePicker.config.js +1 -1
- package/components/Divider/Divider.config.js +1 -1
- package/components/Drawer/Drawer.config.js +1 -1
- package/components/Dropdown/Dropdown.config.js +1 -1
- package/components/Dropdown/Dropdown.js +1 -5
- package/components/Dropdown/Dropdown.js.map +1 -1
- package/components/Dropzone/Dropzone.config.js +1 -1
- package/components/EmptyState/EmptyState.config.js +1 -1
- package/components/Grid/Grid.config.js +1 -1
- package/components/IconButton/IconButton.config.js +1 -1
- package/components/Indicator/Indicator.config.js +1 -1
- package/components/Link/Link.config.js +1 -1
- package/components/Modal/Modal.config.js +1 -1
- package/components/Note/Note.config.js +1 -1
- package/components/Notification/Notification.config.js +1 -1
- package/components/Notification/Notification.js +1 -5
- package/components/Notification/Notification.js.map +1 -1
- package/components/NumberInput/NumberInput.config.js +1 -1
- package/components/NumberInput/NumberInput.d.ts +2 -2
- package/components/Pagination/Pagination.config.js +1 -1
- package/components/Popover/Popover.config.js +1 -1
- package/components/Progress/Progress.config.js +1 -1
- package/components/Radiobox/Radiobox.config.js +1 -1
- package/components/Range/Range.config.js +1 -1
- package/components/Rating/Rating.config.js +1 -1
- package/components/Segment/SegmentGroup.config.js +1 -1
- package/components/Segment/SegmentItem.config.js +1 -1
- package/components/Select/Select.config.js +1 -1
- package/components/Select/Select.js +1 -5
- package/components/Select/Select.js.map +1 -1
- package/components/Sheet/Sheet.config.js +1 -1
- package/components/Skeleton/LineSkeleton.config.js +1 -1
- package/components/Slider/Slider.config.js +1 -1
- package/components/Spinner/Spinner.config.js +1 -1
- package/components/Steps/Steps.config.js +1 -1
- package/components/Switch/Switch.config.js +1 -1
- package/components/Tabs/TabItem.js +2 -6
- package/components/Tabs/TabItem.js.map +1 -1
- package/components/Tabs/Tabs.js +2 -6
- package/components/Tabs/Tabs.js.map +1 -1
- package/components/Tabs/horizontal/HorizontalTabItem.config.js +1 -1
- package/components/Tabs/horizontal/HorizontalTabs.config.js +1 -1
- package/components/Tabs/vertical/VerticalTabItem.config.js +1 -1
- package/components/Tabs/vertical/VerticalTabs.config.js +1 -1
- package/components/TextArea/TextArea.config.js +1 -1
- package/components/TextField/TextField.config.js +1 -1
- package/components/TextFieldGroup/TextFieldGroup.config.js +1 -1
- package/components/Toast/Toast.config.js +1 -1
- package/components/Toolbar/Toolbar.config.js +1 -1
- package/components/Tooltip/Tooltip.config.js +1 -1
- package/components/Tree/Tree.config.js +1 -1
- package/components/Typography/Body.config.js +1 -1
- package/components/Typography/Dspl.config.js +1 -1
- package/components/Typography/Heading.config.js +1 -1
- package/components/Typography/Text.config.js +1 -1
- package/components/ViewContainer/ViewContainer.config.js +1 -1
- package/emotion/cjs/components/Avatar/Avatar.config.js +23 -5
- package/emotion/cjs/components/Avatar/Avatar.stories.tsx +130 -3
- package/emotion/es/components/Avatar/Avatar.config.js +23 -5
- package/emotion/es/components/Avatar/Avatar.stories.tsx +130 -3
- package/es/components/Avatar/Avatar.config.js +19 -1
- package/es/components/Avatar/Avatar.config.js.map +1 -1
- package/es/components/Avatar/Avatar.config_1buqzeq.css +21 -0
- package/es/components/Avatar/Avatar.css +21 -7
- package/es/index.css +21 -7
- package/package.json +22 -5
- package/styled-components/cjs/components/Avatar/Avatar.config.js +23 -5
- package/styled-components/es/components/Avatar/Avatar.config.js +23 -5
- package/_virtual/_rollupPluginBabelHelpers.js +0 -21
- package/_virtual/_rollupPluginBabelHelpers.js.map +0 -1
- package/components/Avatar/Avatar.config_weecw4.css +0 -7
- package/es/components/Avatar/Avatar.config_weecw4.css +0 -7
|
@@ -1,9 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import type { ComponentProps } from 'react';
|
|
2
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
|
3
4
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
|
4
5
|
|
|
5
6
|
import { Avatar } from './Avatar';
|
|
6
7
|
|
|
8
|
+
const extraPlacements = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
|
|
9
|
+
const extraType = ['', 'badge', 'counter'];
|
|
10
|
+
const counterViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
|
|
11
|
+
const badgeViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
|
|
12
|
+
|
|
7
13
|
const meta: Meta<typeof Avatar> = {
|
|
8
14
|
title: 'Data Display/Avatar',
|
|
9
15
|
component: Avatar,
|
|
@@ -11,12 +17,77 @@ const meta: Meta<typeof Avatar> = {
|
|
|
11
17
|
view: { control: 'inline-radio', options: ['default'] },
|
|
12
18
|
size: { control: 'select', options: ['xxl', 'l', 'm', 's', 'fit'] },
|
|
13
19
|
status: { control: 'select', options: ['active', 'inactive'] },
|
|
20
|
+
type: {
|
|
21
|
+
control: 'select',
|
|
22
|
+
options: extraType,
|
|
23
|
+
if: { arg: 'hasExtra', truthy: true },
|
|
24
|
+
},
|
|
25
|
+
extraPlacement: {
|
|
26
|
+
control: 'select',
|
|
27
|
+
options: extraPlacements,
|
|
28
|
+
if: { arg: 'hasExtra', truthy: true },
|
|
29
|
+
},
|
|
30
|
+
counterView: {
|
|
31
|
+
control: 'select',
|
|
32
|
+
options: counterViews,
|
|
33
|
+
if: { arg: 'type', eq: 'counter' },
|
|
34
|
+
},
|
|
35
|
+
count: {
|
|
36
|
+
control: 'number',
|
|
37
|
+
if: { arg: 'type', eq: 'counter' },
|
|
38
|
+
},
|
|
39
|
+
maxCount: {
|
|
40
|
+
control: 'number',
|
|
41
|
+
if: { arg: 'type', eq: 'counter' },
|
|
42
|
+
},
|
|
43
|
+
badgeView: {
|
|
44
|
+
control: 'select',
|
|
45
|
+
options: badgeViews,
|
|
46
|
+
if: { arg: 'type', eq: 'badge' },
|
|
47
|
+
},
|
|
48
|
+
text: {
|
|
49
|
+
control: 'text',
|
|
50
|
+
if: { arg: 'type', eq: 'badge' },
|
|
51
|
+
},
|
|
52
|
+
customColor: {
|
|
53
|
+
control: 'color',
|
|
54
|
+
if: { arg: 'type', eq: 'badge' },
|
|
55
|
+
},
|
|
56
|
+
customBackgroundColor: {
|
|
57
|
+
control: 'color',
|
|
58
|
+
if: { arg: 'type', eq: 'badge' },
|
|
59
|
+
},
|
|
60
|
+
pilled: {
|
|
61
|
+
control: 'boolean',
|
|
62
|
+
if: { arg: 'type', eq: 'badge' },
|
|
63
|
+
},
|
|
64
|
+
transparent: {
|
|
65
|
+
control: 'boolean',
|
|
66
|
+
if: { arg: 'type', eq: 'badge' },
|
|
67
|
+
},
|
|
68
|
+
clear: {
|
|
69
|
+
control: 'boolean',
|
|
70
|
+
if: { arg: 'type', eq: 'badge' },
|
|
71
|
+
},
|
|
14
72
|
},
|
|
15
73
|
};
|
|
16
74
|
|
|
17
75
|
export default meta;
|
|
18
76
|
|
|
19
|
-
type
|
|
77
|
+
type StoryProps = ComponentProps<typeof Avatar> & {
|
|
78
|
+
enableContentLeft: boolean;
|
|
79
|
+
enableContentRight: boolean;
|
|
80
|
+
};
|
|
81
|
+
type Story = StoryObj<StoryProps>;
|
|
82
|
+
|
|
83
|
+
const BellIcon = (props) => (
|
|
84
|
+
<svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
|
|
85
|
+
<path
|
|
86
|
+
d="M11.501 21.28c1.088 0 1.978-.889 1.978-1.977H9.524c0 1.088.88 1.978 1.977 1.978zm5.933-5.932v-4.944c0-3.035-1.622-5.576-4.45-6.248v-.673c0-.82-.662-1.483-1.483-1.483-.82 0-1.483.662-1.483 1.483v.672c-2.838.673-4.45 3.204-4.45 6.25v4.943l-1.275 1.276c-.623.623-.188 1.69.692 1.69h13.022c.88 0 1.325-1.067.702-1.69l-1.275-1.276z"
|
|
87
|
+
fill="currentColor"
|
|
88
|
+
/>
|
|
89
|
+
</svg>
|
|
90
|
+
);
|
|
20
91
|
|
|
21
92
|
export const Default: Story = {
|
|
22
93
|
args: {
|
|
@@ -24,21 +95,77 @@ export const Default: Story = {
|
|
|
24
95
|
size: 'xxl',
|
|
25
96
|
name: 'Иван Фадеев',
|
|
26
97
|
url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
|
|
27
|
-
status: 'active',
|
|
28
98
|
isScalable: false,
|
|
99
|
+
hasExtra: false,
|
|
100
|
+
extraPlacement: 'top-right',
|
|
101
|
+
type: undefined,
|
|
102
|
+
counterView: 'accent',
|
|
103
|
+
count: 3,
|
|
104
|
+
maxCount: 10,
|
|
105
|
+
badgeView: 'accent',
|
|
106
|
+
text: '31',
|
|
107
|
+
pilled: true,
|
|
108
|
+
clear: false,
|
|
109
|
+
transparent: false,
|
|
110
|
+
enableContentLeft: false,
|
|
111
|
+
enableContentRight: false,
|
|
29
112
|
},
|
|
30
113
|
argTypes: {
|
|
114
|
+
enableContentLeft: {
|
|
115
|
+
control: { type: 'boolean' },
|
|
116
|
+
if: { arg: 'type', eq: 'badge' },
|
|
117
|
+
},
|
|
118
|
+
enableContentRight: {
|
|
119
|
+
control: { type: 'boolean' },
|
|
120
|
+
if: { arg: 'type', eq: 'badge' },
|
|
121
|
+
},
|
|
31
122
|
...disableProps(['focused']),
|
|
32
123
|
},
|
|
124
|
+
render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
|
|
125
|
+
const iconSize = () => {
|
|
126
|
+
switch (size) {
|
|
127
|
+
case 'xxl':
|
|
128
|
+
return '1rem';
|
|
129
|
+
case 'm':
|
|
130
|
+
return '0.625rem';
|
|
131
|
+
default:
|
|
132
|
+
return '0.75rem';
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
return (
|
|
137
|
+
<>
|
|
138
|
+
<Avatar
|
|
139
|
+
contentLeft={enableContentLeft ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined}
|
|
140
|
+
contentRight={
|
|
141
|
+
!enableContentLeft && enableContentRight ? (
|
|
142
|
+
<BellIcon width={iconSize()} height={iconSize()} />
|
|
143
|
+
) : undefined
|
|
144
|
+
}
|
|
145
|
+
size={size}
|
|
146
|
+
{...rest}
|
|
147
|
+
/>
|
|
148
|
+
</>
|
|
149
|
+
);
|
|
150
|
+
},
|
|
33
151
|
};
|
|
34
152
|
|
|
35
153
|
export const Accessibility: Story = {
|
|
36
154
|
args: {
|
|
37
155
|
role: 'button',
|
|
156
|
+
name: 'Иван Фадеев',
|
|
38
157
|
tabIndex: 0,
|
|
39
158
|
view: 'default',
|
|
40
159
|
size: 'xxl',
|
|
41
|
-
name: 'Иван Фадеев',
|
|
42
160
|
status: 'active',
|
|
161
|
+
focused: true,
|
|
162
|
+
hasExtra: false,
|
|
163
|
+
extraPlacement: 'top-right',
|
|
164
|
+
type: undefined,
|
|
165
|
+
counterView: 'accent',
|
|
166
|
+
count: 3,
|
|
167
|
+
maxCount: 10,
|
|
168
|
+
badgeView: 'accent',
|
|
169
|
+
text: '31',
|
|
43
170
|
},
|
|
44
171
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
|
|
2
2
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
3
|
import { css, avatarTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
|
|
4
4
|
export var config = {
|
|
@@ -12,14 +12,32 @@ export var config = {
|
|
|
12
12
|
},
|
|
13
13
|
size: {
|
|
14
14
|
// TODO: #1044 токены типографики в Avatar
|
|
15
|
-
xxl: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 6.25rem;\n ", ": 2rem;\n ", ": 600;\n ", ": 2rem;\n ", ": 0.75rem;\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
|
|
16
|
-
l: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 3rem;\n ", ": 1.25rem;\n ", ": 600;\n ", ": 1.25rem;\n ", ": 0.5rem;\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
|
|
17
|
-
m: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.25rem;\n ", ": 0.875rem;\n ", ": 600;\n ", ": 0.875rem;\n ", ": 0.5rem;\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
|
|
18
|
-
s: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n ", ": 0.5rem;\n ", ": 600;\n ", ": 0.5rem;\n ", ": 0.375rem;\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
|
|
15
|
+
xxl: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 6.25rem;\n ", ": 2rem;\n ", ": 600;\n ", ": 2rem;\n ", ": 0.75rem;\n\n ", ": 0.5rem;\n ", ": 1.75rem;\n ", ": 0 0.688rem;\n ", ": 0 0.375rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": -0.063rem;\n ", ": 0.25rem;\n\n ", ": 0.25rem;\n ", ": -0.063rem;\n ", ": 1.25rem;\n\n ", ": 1rem;\n ", ": 1.75rem;\n ", ": 0 0.625rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.badgeBorderRadius, tokens.badgeHeight, tokens.badgePadding, tokens.badgePaddingIconOnly, tokens.badgeFontFamily, tokens.badgeFontSize, tokens.badgeFontStyle, tokens.badgeFontWeight, tokens.badgeLetterSpacing, tokens.badgeLineHeight, tokens.badgeLeftContentMarginLeft, tokens.badgeLeftContentMarginRight, tokens.badgeRightContentMarginLeft, tokens.badgeRightContentMarginRight, tokens.badgePilledBorderRadius, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
|
|
16
|
+
l: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 3rem;\n ", ": 1.25rem;\n ", ": 600;\n ", ": 1.25rem;\n ", ": 0.5rem;\n\n ", ": 2;\n\n ", ": 0.375rem;\n ", ": 1.25rem;\n ", ": 0 0.438rem;\n ", ": 0 0.25rem;\n\n ", ": var(--plasma-typo-body-xxs-font-family);\n ", ": var(--plasma-typo-body-xxs-font-size);\n ", ": var(--plasma-typo-body-xxs-font-style);\n ", ": var(--plasma-typo-body-xxs-font-weight);\n ", ": var(--plasma-typo-body-xxs-letter-spacing);\n ", ": var(--plasma-typo-body-xxs-line-height);\n\n ", ": -0.063rem;\n ", ": 0.125rem;\n\n ", ": 0.125rem;\n ", ": -0.063rem;\n ", ": 1.25rem;\n\n ", ": 1rem;\n ", ": 1.25rem;\n ", ": 0 0.375rem;\n ", ": var(--plasma-typo-body-xxs-font-family);\n ", ": var(--plasma-typo-body-xxs-font-size);\n ", ": var(--plasma-typo-body-xxs-font-style);\n ", ": var(--plasma-typo-body-xxs-font-weight);\n ", ": var(--plasma-typo-body-xxs-letter-spacing);\n ", ": var(--plasma-typo-body-xxs-line-height);\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.extraPlacementFactor, tokens.badgeBorderRadius, tokens.badgeHeight, tokens.badgePadding, tokens.badgePaddingIconOnly, tokens.badgeFontFamily, tokens.badgeFontSize, tokens.badgeFontStyle, tokens.badgeFontWeight, tokens.badgeLetterSpacing, tokens.badgeLineHeight, tokens.badgeLeftContentMarginLeft, tokens.badgeLeftContentMarginRight, tokens.badgeRightContentMarginLeft, tokens.badgeRightContentMarginRight, tokens.badgePilledBorderRadius, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
|
|
17
|
+
m: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.25rem;\n ", ": 0.875rem;\n ", ": 600;\n ", ": 0.875rem;\n ", ": 0.5rem;\n\n ", ": 2;\n\n ", ": 0.25rem;\n ", ": 1rem;\n ", ": 0 0.25rem;\n ", ": 0 0.188rem;\n\n ", ": var(--plasma-typo-body-xxs-font-family);\n ", ": var(--plasma-typo-body-xxs-font-size);\n ", ": var(--plasma-typo-body-xxs-font-style);\n ", ": var(--plasma-typo-body-xxs-font-weight);\n ", ": var(--plasma-typo-body-xxs-letter-spacing);\n ", ": var(--plasma-typo-body-xxs-line-height);\n\n ", ": -0.063rem;\n ", ": 0.125rem;\n\n ", ": 0.125rem;\n ", ": -0.063rem;\n ", ": 1.25rem;\n\n ", ": 1rem;\n ", ": 1rem;\n ", ": 0 0.25rem;\n ", ": var(--plasma-typo-body-xxs-font-family);\n ", ": var(--plasma-typo-body-xxs-font-size);\n ", ": var(--plasma-typo-body-xxs-font-style);\n ", ": var(--plasma-typo-body-xxs-font-weight);\n ", ": var(--plasma-typo-body-xxs-letter-spacing);\n ", ": var(--plasma-typo-body-xxs-line-height);\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.extraPlacementFactor, tokens.badgeBorderRadius, tokens.badgeHeight, tokens.badgePadding, tokens.badgePaddingIconOnly, tokens.badgeFontFamily, tokens.badgeFontSize, tokens.badgeFontStyle, tokens.badgeFontWeight, tokens.badgeLetterSpacing, tokens.badgeLineHeight, tokens.badgeLeftContentMarginLeft, tokens.badgeLeftContentMarginRight, tokens.badgeRightContentMarginLeft, tokens.badgeRightContentMarginRight, tokens.badgePilledBorderRadius, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
|
|
18
|
+
s: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n ", ": 0.5rem;\n ", ": 600;\n ", ": 0.5rem;\n ", ": 0.375rem;\n\n ", ": 1;\n\n ", ": 1rem;\n ", ": 0.75rem;\n ", ": 0 0.125rem;\n ", ": var(--plasma-typo-body-xxs-font-family);\n ", ": var(--plasma-typo-body-xxs-font-size);\n ", ": var(--plasma-typo-body-xxs-font-style);\n ", ": var(--plasma-typo-body-xxs-font-weight);\n ", ": var(--plasma-typo-body-xxs-letter-spacing);\n ", ": var(--plasma-typo-body-xxs-line-height);\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.extraPlacementFactor, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
|
|
19
19
|
fit: /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 100%;\n ", ": 0;\n ", ": 0;\n ", ": 0;\n ", ": 0;\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize)
|
|
20
20
|
},
|
|
21
21
|
focused: {
|
|
22
22
|
"true": /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.1rem;\n ", ": -0.2rem;\n ", ": var(--surface-accent);\n "])), tokens.outlineSize, tokens.outlineOffset, tokens.outlineColor)
|
|
23
|
+
},
|
|
24
|
+
badgeView: {
|
|
25
|
+
"default": /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-solid-default);\n\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n\n ", ": var(--text-primary);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
|
|
26
|
+
accent: /*#__PURE__*/css(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n\n ", ": var(--text-accent);\n ", ": var(--surface-transparent-accent);\n\n ", ": var(--text-accent);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
|
|
27
|
+
positive: /*#__PURE__*/css(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-positive);\n\n ", ": var(--text-positive);\n ", ": var(--surface-transparent-positive);\n\n ", ": var(--text-positive);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
|
|
28
|
+
warning: /*#__PURE__*/css(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-warning);\n\n ", ": var(--text-warning);\n ", ": var(--surface-transparent-warning);\n\n ", ": var(--text-warning);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
|
|
29
|
+
negative: /*#__PURE__*/css(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-negative);\n\n ", ": var(--text-negative);\n ", ": var(--surface-transparent-negative);\n\n ", ": var(--text-negative);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
|
|
30
|
+
dark: /*#__PURE__*/css(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-light-surface-solid-default);\n\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-light-surface-transparent-deep);\n\n ", ": var(--on-light-text-primary);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
|
|
31
|
+
light: /*#__PURE__*/css(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-light-text-primary);\n ", ": var(--on-dark-surface-solid-default);\n\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-dark-surface-transparent-card);\n\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear)
|
|
32
|
+
},
|
|
33
|
+
counterView: {
|
|
34
|
+
"default": /*#__PURE__*/css(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-solid-default);\n "])), tokens.counterColor, tokens.counterBackground),
|
|
35
|
+
accent: /*#__PURE__*/css(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n "])), tokens.counterColor, tokens.counterBackground),
|
|
36
|
+
positive: /*#__PURE__*/css(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-positive);\n "])), tokens.counterColor, tokens.counterBackground),
|
|
37
|
+
warning: /*#__PURE__*/css(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-warning);\n "])), tokens.counterColor, tokens.counterBackground),
|
|
38
|
+
negative: /*#__PURE__*/css(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-negative);\n "])), tokens.counterColor, tokens.counterBackground),
|
|
39
|
+
dark: /*#__PURE__*/css(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-light-surface-solid-default);\n "])), tokens.counterColor, tokens.counterBackground),
|
|
40
|
+
light: /*#__PURE__*/css(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-light-text-primary);\n ", ": var(--on-dark-surface-solid-default);\n "])), tokens.counterColor, tokens.counterBackground)
|
|
23
41
|
}
|
|
24
42
|
}
|
|
25
43
|
};
|
|
@@ -1,9 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import type { ComponentProps } from 'react';
|
|
2
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
|
3
4
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
|
4
5
|
|
|
5
6
|
import { Avatar } from './Avatar';
|
|
6
7
|
|
|
8
|
+
const extraPlacements = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
|
|
9
|
+
const extraType = ['', 'badge', 'counter'];
|
|
10
|
+
const counterViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
|
|
11
|
+
const badgeViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
|
|
12
|
+
|
|
7
13
|
const meta: Meta<typeof Avatar> = {
|
|
8
14
|
title: 'Data Display/Avatar',
|
|
9
15
|
component: Avatar,
|
|
@@ -11,12 +17,77 @@ const meta: Meta<typeof Avatar> = {
|
|
|
11
17
|
view: { control: 'inline-radio', options: ['default'] },
|
|
12
18
|
size: { control: 'select', options: ['xxl', 'l', 'm', 's', 'fit'] },
|
|
13
19
|
status: { control: 'select', options: ['active', 'inactive'] },
|
|
20
|
+
type: {
|
|
21
|
+
control: 'select',
|
|
22
|
+
options: extraType,
|
|
23
|
+
if: { arg: 'hasExtra', truthy: true },
|
|
24
|
+
},
|
|
25
|
+
extraPlacement: {
|
|
26
|
+
control: 'select',
|
|
27
|
+
options: extraPlacements,
|
|
28
|
+
if: { arg: 'hasExtra', truthy: true },
|
|
29
|
+
},
|
|
30
|
+
counterView: {
|
|
31
|
+
control: 'select',
|
|
32
|
+
options: counterViews,
|
|
33
|
+
if: { arg: 'type', eq: 'counter' },
|
|
34
|
+
},
|
|
35
|
+
count: {
|
|
36
|
+
control: 'number',
|
|
37
|
+
if: { arg: 'type', eq: 'counter' },
|
|
38
|
+
},
|
|
39
|
+
maxCount: {
|
|
40
|
+
control: 'number',
|
|
41
|
+
if: { arg: 'type', eq: 'counter' },
|
|
42
|
+
},
|
|
43
|
+
badgeView: {
|
|
44
|
+
control: 'select',
|
|
45
|
+
options: badgeViews,
|
|
46
|
+
if: { arg: 'type', eq: 'badge' },
|
|
47
|
+
},
|
|
48
|
+
text: {
|
|
49
|
+
control: 'text',
|
|
50
|
+
if: { arg: 'type', eq: 'badge' },
|
|
51
|
+
},
|
|
52
|
+
customColor: {
|
|
53
|
+
control: 'color',
|
|
54
|
+
if: { arg: 'type', eq: 'badge' },
|
|
55
|
+
},
|
|
56
|
+
customBackgroundColor: {
|
|
57
|
+
control: 'color',
|
|
58
|
+
if: { arg: 'type', eq: 'badge' },
|
|
59
|
+
},
|
|
60
|
+
pilled: {
|
|
61
|
+
control: 'boolean',
|
|
62
|
+
if: { arg: 'type', eq: 'badge' },
|
|
63
|
+
},
|
|
64
|
+
transparent: {
|
|
65
|
+
control: 'boolean',
|
|
66
|
+
if: { arg: 'type', eq: 'badge' },
|
|
67
|
+
},
|
|
68
|
+
clear: {
|
|
69
|
+
control: 'boolean',
|
|
70
|
+
if: { arg: 'type', eq: 'badge' },
|
|
71
|
+
},
|
|
14
72
|
},
|
|
15
73
|
};
|
|
16
74
|
|
|
17
75
|
export default meta;
|
|
18
76
|
|
|
19
|
-
type
|
|
77
|
+
type StoryProps = ComponentProps<typeof Avatar> & {
|
|
78
|
+
enableContentLeft: boolean;
|
|
79
|
+
enableContentRight: boolean;
|
|
80
|
+
};
|
|
81
|
+
type Story = StoryObj<StoryProps>;
|
|
82
|
+
|
|
83
|
+
const BellIcon = (props) => (
|
|
84
|
+
<svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
|
|
85
|
+
<path
|
|
86
|
+
d="M11.501 21.28c1.088 0 1.978-.889 1.978-1.977H9.524c0 1.088.88 1.978 1.977 1.978zm5.933-5.932v-4.944c0-3.035-1.622-5.576-4.45-6.248v-.673c0-.82-.662-1.483-1.483-1.483-.82 0-1.483.662-1.483 1.483v.672c-2.838.673-4.45 3.204-4.45 6.25v4.943l-1.275 1.276c-.623.623-.188 1.69.692 1.69h13.022c.88 0 1.325-1.067.702-1.69l-1.275-1.276z"
|
|
87
|
+
fill="currentColor"
|
|
88
|
+
/>
|
|
89
|
+
</svg>
|
|
90
|
+
);
|
|
20
91
|
|
|
21
92
|
export const Default: Story = {
|
|
22
93
|
args: {
|
|
@@ -24,21 +95,77 @@ export const Default: Story = {
|
|
|
24
95
|
size: 'xxl',
|
|
25
96
|
name: 'Иван Фадеев',
|
|
26
97
|
url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
|
|
27
|
-
status: 'active',
|
|
28
98
|
isScalable: false,
|
|
99
|
+
hasExtra: false,
|
|
100
|
+
extraPlacement: 'top-right',
|
|
101
|
+
type: undefined,
|
|
102
|
+
counterView: 'accent',
|
|
103
|
+
count: 3,
|
|
104
|
+
maxCount: 10,
|
|
105
|
+
badgeView: 'accent',
|
|
106
|
+
text: '31',
|
|
107
|
+
pilled: true,
|
|
108
|
+
clear: false,
|
|
109
|
+
transparent: false,
|
|
110
|
+
enableContentLeft: false,
|
|
111
|
+
enableContentRight: false,
|
|
29
112
|
},
|
|
30
113
|
argTypes: {
|
|
114
|
+
enableContentLeft: {
|
|
115
|
+
control: { type: 'boolean' },
|
|
116
|
+
if: { arg: 'type', eq: 'badge' },
|
|
117
|
+
},
|
|
118
|
+
enableContentRight: {
|
|
119
|
+
control: { type: 'boolean' },
|
|
120
|
+
if: { arg: 'type', eq: 'badge' },
|
|
121
|
+
},
|
|
31
122
|
...disableProps(['focused']),
|
|
32
123
|
},
|
|
124
|
+
render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
|
|
125
|
+
const iconSize = () => {
|
|
126
|
+
switch (size) {
|
|
127
|
+
case 'xxl':
|
|
128
|
+
return '1rem';
|
|
129
|
+
case 'm':
|
|
130
|
+
return '0.625rem';
|
|
131
|
+
default:
|
|
132
|
+
return '0.75rem';
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
return (
|
|
137
|
+
<>
|
|
138
|
+
<Avatar
|
|
139
|
+
contentLeft={enableContentLeft ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined}
|
|
140
|
+
contentRight={
|
|
141
|
+
!enableContentLeft && enableContentRight ? (
|
|
142
|
+
<BellIcon width={iconSize()} height={iconSize()} />
|
|
143
|
+
) : undefined
|
|
144
|
+
}
|
|
145
|
+
size={size}
|
|
146
|
+
{...rest}
|
|
147
|
+
/>
|
|
148
|
+
</>
|
|
149
|
+
);
|
|
150
|
+
},
|
|
33
151
|
};
|
|
34
152
|
|
|
35
153
|
export const Accessibility: Story = {
|
|
36
154
|
args: {
|
|
37
155
|
role: 'button',
|
|
156
|
+
name: 'Иван Фадеев',
|
|
38
157
|
tabIndex: 0,
|
|
39
158
|
view: 'default',
|
|
40
159
|
size: 'xxl',
|
|
41
|
-
name: 'Иван Фадеев',
|
|
42
160
|
status: 'active',
|
|
161
|
+
focused: true,
|
|
162
|
+
hasExtra: false,
|
|
163
|
+
extraPlacement: 'top-right',
|
|
164
|
+
type: undefined,
|
|
165
|
+
counterView: 'accent',
|
|
166
|
+
count: 3,
|
|
167
|
+
maxCount: 10,
|
|
168
|
+
badgeView: 'accent',
|
|
169
|
+
text: '31',
|
|
43
170
|
},
|
|
44
171
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './Avatar.
|
|
1
|
+
import './Avatar.config_1buqzeq.css';
|
|
2
2
|
var config = {
|
|
3
3
|
defaults: {
|
|
4
4
|
view: 'default',
|
|
@@ -18,6 +18,24 @@ var config = {
|
|
|
18
18
|
},
|
|
19
19
|
focused: {
|
|
20
20
|
"true": "t12fbiph"
|
|
21
|
+
},
|
|
22
|
+
badgeView: {
|
|
23
|
+
"default": "d1v24dm1",
|
|
24
|
+
accent: "aklmhlm",
|
|
25
|
+
positive: "pts1qri",
|
|
26
|
+
warning: "wu8qekr",
|
|
27
|
+
negative: "nc00x8o",
|
|
28
|
+
dark: "d4vpurz",
|
|
29
|
+
light: "lh713v8"
|
|
30
|
+
},
|
|
31
|
+
counterView: {
|
|
32
|
+
"default": "d18xlm4d",
|
|
33
|
+
accent: "a19kwqy5",
|
|
34
|
+
positive: "p1jpkhmc",
|
|
35
|
+
warning: "w1rt05zb",
|
|
36
|
+
negative: "n18uzb5o",
|
|
37
|
+
dark: "dwmydiz",
|
|
38
|
+
light: "l84jq18"
|
|
21
39
|
}
|
|
22
40
|
}
|
|
23
41
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.config.js","sources":["../../../src-css/components/Avatar/Avatar.config.tsx"],"sourcesContent":["import { css, avatarTokens as tokens } from '@salutejs/plasma-new-hope';\n\nexport const config = {\n defaults: {\n view: 'default',\n size: 'xxl',\n },\n variations: {\n view: {\n default: css`\n ${tokens.color}: var(--text-accent-gradient);\n ${tokens.backgroundColor}: linear-gradient(94deg, rgba(62, 121, 240, 0.2) 6.49%, rgba(39, 198, 229, 0.2) 93.51%);\n ${tokens.statusOnlineColor}: var(--surface-positive);\n ${tokens.statusOfflineColor}: var(--surface-solid-tertiary);\n ${tokens.scaleHover}: 1.02;\n ${tokens.fontFamily}: var(--plasma-typo-text-font-family);\n `,\n },\n size: {\n // TODO: #1044 токены типографики в Avatar\n xxl: css`\n ${tokens.avatarSize}: 6.25rem;\n ${tokens.fontSize}: 2rem;\n ${tokens.fontWeight}: 600;\n ${tokens.lineHeight}: 2rem;\n ${tokens.statusIconSize}: 0.75rem;\n `,\n l: css`\n ${tokens.avatarSize}: 3rem;\n ${tokens.fontSize}: 1.25rem;\n ${tokens.fontWeight}: 600;\n ${tokens.lineHeight}: 1.25rem;\n ${tokens.statusIconSize}: 0.5rem;\n `,\n m: css`\n ${tokens.avatarSize}: 2.25rem;\n ${tokens.fontSize}: 0.875rem;\n ${tokens.fontWeight}: 600;\n ${tokens.lineHeight}: 0.875rem;\n ${tokens.statusIconSize}: 0.5rem;\n `,\n s: css`\n ${tokens.avatarSize}: 1.5rem;\n ${tokens.fontSize}: 0.5rem;\n ${tokens.fontWeight}: 600;\n ${tokens.lineHeight}: 0.5rem;\n ${tokens.statusIconSize}: 0.375rem;\n `,\n fit: css`\n ${tokens.avatarSize}: 100%;\n ${tokens.fontSize}: 0;\n ${tokens.fontWeight}: 0;\n ${tokens.lineHeight}: 0;\n ${tokens.statusIconSize}: 0;\n `,\n },\n focused: {\n true: css`\n ${tokens.outlineSize}: 0.1rem;\n ${tokens.outlineOffset}: -0.2rem;\n ${tokens.outlineColor}: var(--surface-accent);\n `,\n },\n },\n};\n"],"names":["config","defaults","view","size","variations","default","xxl","l","m","s","fit","focused","true"],"mappings":"AAEO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,IAAI,EAAE,KAAA;GACT;AACDC,EAAAA,UAAU,EAAE;AACRF,IAAAA,IAAI,EAAE;MACFG,SAAO,EAAA,UAAA;KAQV;AACDF,IAAAA,IAAI,EAAE;AACF;AACAG,MAAAA,GAAG,EAMF,UAAA;AACDC,MAAAA,CAAC,EAMA,SAAA;AACDC,MAAAA,CAAC,EAMA,UAAA;AACDC,MAAAA,CAAC,EAMA,UAAA;AACDC,MAAAA,GAAG,EAAA,SAAA;KAON;AACDC,IAAAA,OAAO,EAAE;MACLC,MAAI,EAAA,UAAA;AAKR,KAAA;AACJ,GAAA;AACJ;;;;"}
|
|
1
|
+
{"version":3,"file":"Avatar.config.js","sources":["../../../src-css/components/Avatar/Avatar.config.tsx"],"sourcesContent":["import { css, avatarTokens as tokens } from '@salutejs/plasma-new-hope';\n\nexport const config = {\n defaults: {\n view: 'default',\n size: 'xxl',\n },\n variations: {\n view: {\n default: css`\n ${tokens.color}: var(--text-accent-gradient);\n ${tokens.backgroundColor}: linear-gradient(94deg, rgba(62, 121, 240, 0.2) 6.49%, rgba(39, 198, 229, 0.2) 93.51%);\n ${tokens.statusOnlineColor}: var(--surface-positive);\n ${tokens.statusOfflineColor}: var(--surface-solid-tertiary);\n ${tokens.scaleHover}: 1.02;\n ${tokens.fontFamily}: var(--plasma-typo-text-font-family);\n `,\n },\n size: {\n // TODO: #1044 токены типографики в Avatar\n xxl: css`\n ${tokens.avatarSize}: 6.25rem;\n ${tokens.fontSize}: 2rem;\n ${tokens.fontWeight}: 600;\n ${tokens.lineHeight}: 2rem;\n ${tokens.statusIconSize}: 0.75rem;\n\n ${tokens.badgeBorderRadius}: 0.5rem;\n ${tokens.badgeHeight}: 1.75rem;\n ${tokens.badgePadding}: 0 0.688rem;\n ${tokens.badgePaddingIconOnly}: 0 0.375rem;\n\n ${tokens.badgeFontFamily}: var(--plasma-typo-body-s-font-family);\n ${tokens.badgeFontSize}: var(--plasma-typo-body-s-font-size);\n ${tokens.badgeFontStyle}: var(--plasma-typo-body-s-font-style);\n ${tokens.badgeFontWeight}: var(--plasma-typo-body-s-font-weight);\n ${tokens.badgeLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);\n ${tokens.badgeLineHeight}: var(--plasma-typo-body-s-line-height);\n\n ${tokens.badgeLeftContentMarginLeft}: -0.063rem;\n ${tokens.badgeLeftContentMarginRight}: 0.25rem;\n\n ${tokens.badgeRightContentMarginLeft}: 0.25rem;\n ${tokens.badgeRightContentMarginRight}: -0.063rem;\n ${tokens.badgePilledBorderRadius}: 1.25rem;\n\n ${tokens.counterBorderRadius}: 1rem;\n ${tokens.counterHeight}: 1.75rem;\n ${tokens.counterPadding}: 0 0.625rem;\n ${tokens.counterFontFamily}: var(--plasma-typo-body-s-font-family);\n ${tokens.counterFontSize}: var(--plasma-typo-body-s-font-size);\n ${tokens.counterFontStyle}: var(--plasma-typo-body-s-font-style);\n ${tokens.counterFontWeight}: var(--plasma-typo-body-s-font-weight);\n ${tokens.counterLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);\n ${tokens.counterLineHeight}: var(--plasma-typo-body-s-line-height);\n `,\n l: css`\n ${tokens.avatarSize}: 3rem;\n ${tokens.fontSize}: 1.25rem;\n ${tokens.fontWeight}: 600;\n ${tokens.lineHeight}: 1.25rem;\n ${tokens.statusIconSize}: 0.5rem;\n\n ${tokens.extraPlacementFactor}: 2;\n\n ${tokens.badgeBorderRadius}: 0.375rem;\n ${tokens.badgeHeight}: 1.25rem;\n ${tokens.badgePadding}: 0 0.438rem;\n ${tokens.badgePaddingIconOnly}: 0 0.25rem;\n\n ${tokens.badgeFontFamily}: var(--plasma-typo-body-xxs-font-family);\n ${tokens.badgeFontSize}: var(--plasma-typo-body-xxs-font-size);\n ${tokens.badgeFontStyle}: var(--plasma-typo-body-xxs-font-style);\n ${tokens.badgeFontWeight}: var(--plasma-typo-body-xxs-font-weight);\n ${tokens.badgeLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);\n ${tokens.badgeLineHeight}: var(--plasma-typo-body-xxs-line-height);\n\n ${tokens.badgeLeftContentMarginLeft}: -0.063rem;\n ${tokens.badgeLeftContentMarginRight}: 0.125rem;\n\n ${tokens.badgeRightContentMarginLeft}: 0.125rem;\n ${tokens.badgeRightContentMarginRight}: -0.063rem;\n ${tokens.badgePilledBorderRadius}: 1.25rem;\n\n ${tokens.counterBorderRadius}: 1rem;\n ${tokens.counterHeight}: 1.25rem;\n ${tokens.counterPadding}: 0 0.375rem;\n ${tokens.counterFontFamily}: var(--plasma-typo-body-xxs-font-family);\n ${tokens.counterFontSize}: var(--plasma-typo-body-xxs-font-size);\n ${tokens.counterFontStyle}: var(--plasma-typo-body-xxs-font-style);\n ${tokens.counterFontWeight}: var(--plasma-typo-body-xxs-font-weight);\n ${tokens.counterLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);\n ${tokens.counterLineHeight}: var(--plasma-typo-body-xxs-line-height);\n `,\n m: css`\n ${tokens.avatarSize}: 2.25rem;\n ${tokens.fontSize}: 0.875rem;\n ${tokens.fontWeight}: 600;\n ${tokens.lineHeight}: 0.875rem;\n ${tokens.statusIconSize}: 0.5rem;\n\n ${tokens.extraPlacementFactor}: 2;\n\n ${tokens.badgeBorderRadius}: 0.25rem;\n ${tokens.badgeHeight}: 1rem;\n ${tokens.badgePadding}: 0 0.25rem;\n ${tokens.badgePaddingIconOnly}: 0 0.188rem;\n\n ${tokens.badgeFontFamily}: var(--plasma-typo-body-xxs-font-family);\n ${tokens.badgeFontSize}: var(--plasma-typo-body-xxs-font-size);\n ${tokens.badgeFontStyle}: var(--plasma-typo-body-xxs-font-style);\n ${tokens.badgeFontWeight}: var(--plasma-typo-body-xxs-font-weight);\n ${tokens.badgeLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);\n ${tokens.badgeLineHeight}: var(--plasma-typo-body-xxs-line-height);\n\n ${tokens.badgeLeftContentMarginLeft}: -0.063rem;\n ${tokens.badgeLeftContentMarginRight}: 0.125rem;\n\n ${tokens.badgeRightContentMarginLeft}: 0.125rem;\n ${tokens.badgeRightContentMarginRight}: -0.063rem;\n ${tokens.badgePilledBorderRadius}: 1.25rem;\n\n ${tokens.counterBorderRadius}: 1rem;\n ${tokens.counterHeight}: 1rem;\n ${tokens.counterPadding}: 0 0.25rem;\n ${tokens.counterFontFamily}: var(--plasma-typo-body-xxs-font-family);\n ${tokens.counterFontSize}: var(--plasma-typo-body-xxs-font-size);\n ${tokens.counterFontStyle}: var(--plasma-typo-body-xxs-font-style);\n ${tokens.counterFontWeight}: var(--plasma-typo-body-xxs-font-weight);\n ${tokens.counterLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);\n ${tokens.counterLineHeight}: var(--plasma-typo-body-xxs-line-height);\n `,\n s: css`\n ${tokens.avatarSize}: 1.5rem;\n ${tokens.fontSize}: 0.5rem;\n ${tokens.fontWeight}: 600;\n ${tokens.lineHeight}: 0.5rem;\n ${tokens.statusIconSize}: 0.375rem;\n\n ${tokens.extraPlacementFactor}: 1;\n\n ${tokens.counterBorderRadius}: 1rem;\n ${tokens.counterHeight}: 0.75rem;\n ${tokens.counterPadding}: 0 0.125rem;\n ${tokens.counterFontFamily}: var(--plasma-typo-body-xxs-font-family);\n ${tokens.counterFontSize}: var(--plasma-typo-body-xxs-font-size);\n ${tokens.counterFontStyle}: var(--plasma-typo-body-xxs-font-style);\n ${tokens.counterFontWeight}: var(--plasma-typo-body-xxs-font-weight);\n ${tokens.counterLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);\n ${tokens.counterLineHeight}: var(--plasma-typo-body-xxs-line-height);\n `,\n fit: css`\n ${tokens.avatarSize}: 100%;\n ${tokens.fontSize}: 0;\n ${tokens.fontWeight}: 0;\n ${tokens.lineHeight}: 0;\n ${tokens.statusIconSize}: 0;\n `,\n },\n focused: {\n true: css`\n ${tokens.outlineSize}: 0.1rem;\n ${tokens.outlineOffset}: -0.2rem;\n ${tokens.outlineColor}: var(--surface-accent);\n `,\n },\n badgeView: {\n default: css`\n ${tokens.badgeColor}: var(--inverse-text-primary);\n ${tokens.badgeBackground}: var(--surface-solid-default);\n\n ${tokens.badgeColorTransparent}: var(--text-primary);\n ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-secondary);\n\n ${tokens.badgeColorClear}: var(--text-primary);\n ${tokens.badgeBackgroundClear}: var(--surface-clear);\n `,\n accent: css`\n ${tokens.badgeColor}: var(--on-dark-text-primary);\n ${tokens.badgeBackground}: var(--surface-accent);\n\n ${tokens.badgeColorTransparent}: var(--text-accent);\n ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-accent);\n\n ${tokens.badgeColorClear}: var(--text-accent);\n ${tokens.badgeBackgroundClear}: var(--surface-clear);\n `,\n positive: css`\n ${tokens.badgeColor}: var(--on-dark-text-primary);\n ${tokens.badgeBackground}: var(--surface-positive);\n\n ${tokens.badgeColorTransparent}: var(--text-positive);\n ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-positive);\n\n ${tokens.badgeColorClear}: var(--text-positive);\n ${tokens.badgeBackgroundClear}: var(--surface-clear);\n `,\n warning: css`\n ${tokens.badgeColor}: var(--on-dark-text-primary);\n ${tokens.badgeBackground}: var(--surface-warning);\n\n ${tokens.badgeColorTransparent}: var(--text-warning);\n ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-warning);\n\n ${tokens.badgeColorClear}: var(--text-warning);\n ${tokens.badgeBackgroundClear}: var(--surface-clear);\n `,\n negative: css`\n ${tokens.badgeColor}: var(--on-dark-text-primary);\n ${tokens.badgeBackground}: var(--surface-negative);\n\n ${tokens.badgeColorTransparent}: var(--text-negative);\n ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-negative);\n\n ${tokens.badgeColorClear}: var(--text-negative);\n ${tokens.badgeBackgroundClear}: var(--surface-clear);\n `,\n dark: css`\n ${tokens.badgeColor}: var(--on-dark-text-primary);\n ${tokens.badgeBackground}: var(--on-light-surface-solid-default);\n\n ${tokens.badgeColorTransparent}: var(--on-dark-text-primary);\n ${tokens.badgeBackgroundTransparent}: var(--on-light-surface-transparent-deep);\n\n ${tokens.badgeColorClear}: var(--on-light-text-primary);\n ${tokens.badgeBackgroundClear}: var(--surface-clear);\n `,\n light: css`\n ${tokens.badgeColor}: var(--on-light-text-primary);\n ${tokens.badgeBackground}: var(--on-dark-surface-solid-default);\n\n ${tokens.badgeColorTransparent}: var(--on-dark-text-primary);\n ${tokens.badgeBackgroundTransparent}: var(--on-dark-surface-transparent-card);\n\n ${tokens.badgeColorClear}: var(--on-dark-text-primary);\n ${tokens.badgeBackgroundClear}: var(--surface-clear);\n `,\n },\n counterView: {\n default: css`\n ${tokens.counterColor}: var(--inverse-text-primary);\n ${tokens.counterBackground}: var(--surface-solid-default);\n `,\n accent: css`\n ${tokens.counterColor}: var(--on-dark-text-primary);\n ${tokens.counterBackground}: var(--surface-accent);\n `,\n positive: css`\n ${tokens.counterColor}: var(--on-dark-text-primary);\n ${tokens.counterBackground}: var(--surface-positive);\n `,\n warning: css`\n ${tokens.counterColor}: var(--on-dark-text-primary);\n ${tokens.counterBackground}: var(--surface-warning);\n `,\n negative: css`\n ${tokens.counterColor}: var(--on-dark-text-primary);\n ${tokens.counterBackground}: var(--surface-negative);\n `,\n dark: css`\n ${tokens.counterColor}: var(--on-dark-text-primary);\n ${tokens.counterBackground}: var(--on-light-surface-solid-default);\n `,\n light: css`\n ${tokens.counterColor}: var(--on-light-text-primary);\n ${tokens.counterBackground}: var(--on-dark-surface-solid-default);\n `,\n },\n },\n};\n"],"names":["config","defaults","view","size","variations","default","xxl","l","m","s","fit","focused","true","badgeView","accent","positive","warning","negative","dark","light","counterView"],"mappings":"AAEO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,IAAI,EAAE,KAAA;GACT;AACDC,EAAAA,UAAU,EAAE;AACRF,IAAAA,IAAI,EAAE;MACFG,SAAO,EAAA,UAAA;KAQV;AACDF,IAAAA,IAAI,EAAE;AACF;AACAG,MAAAA,GAAG,EAmCF,UAAA;AACDC,MAAAA,CAAC,EAqCA,SAAA;AACDC,MAAAA,CAAC,EAqCA,UAAA;AACDC,MAAAA,CAAC,EAkBA,UAAA;AACDC,MAAAA,GAAG,EAAA,SAAA;KAON;AACDC,IAAAA,OAAO,EAAE;MACLC,MAAI,EAAA,UAAA;KAKP;AACDC,IAAAA,SAAS,EAAE;AACPR,MAAAA,SAAAA,EASC,UAAA;AACDS,MAAAA,MAAM,EASL,SAAA;AACDC,MAAAA,QAAQ,EASP,SAAA;AACDC,MAAAA,OAAO,EASN,SAAA;AACDC,MAAAA,QAAQ,EASP,SAAA;AACDC,MAAAA,IAAI,EASH,SAAA;AACDC,MAAAA,KAAK,EAAA,SAAA;KAUR;AACDC,IAAAA,WAAW,EAAE;AACTf,MAAAA,SAAAA,EAGC,UAAA;AACDS,MAAAA,MAAM,EAGL,UAAA;AACDC,MAAAA,QAAQ,EAGP,UAAA;AACDC,MAAAA,OAAO,EAGN,UAAA;AACDC,MAAAA,QAAQ,EAGP,UAAA;AACDC,MAAAA,IAAI,EAGH,SAAA;AACDC,MAAAA,KAAK,EAAA,SAAA;AAIT,KAAA;AACJ,GAAA;AACJ;;;;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
.d1wlf450{--plasma-avatar-color:var(--text-accent-gradient);--plasma-avatar-background:linear-gradient(94deg,rgba(62,121,240,0.2) 6.49%,rgba(39,198,229,0.2) 93.51%);--plasma-avatar-status-online-background:var(--surface-positive);--plasma-avatar-status-offline-background:var(--surface-solid-tertiary);--plasma-avatar-scale-hover:1.02;--plasma-avatar-font-family:var(--plasma-typo-text-font-family);}
|
|
2
|
+
.x1ntw407{--plasma-avatar-size:6.25rem;--plasma-avatar-font-size:2rem;--plasma-avatar-font-weight:600;--plasma-avatar-line-height:2rem;--plasma-status-icon-size:0.75rem;--plasma-avatar-extra-badge-border-radius:0.5rem;--plasma-avatar-extra-badge-height:1.75rem;--plasma-avatar-extra-badge-padding:0 0.688rem;--plasma-avatar-extra-badge-padding-icon-only:0 0.375rem;--plasma-avatar-extra-badge-font-family:var(--plasma-typo-body-s-font-family);--plasma-avatar-extra-badge-font-size:var(--plasma-typo-body-s-font-size);--plasma-avatar-extra-badge-font-style:var(--plasma-typo-body-s-font-style);--plasma-avatar-extra-badge-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-avatar-extra-badge-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-avatar-extra-badge-lineheight:var(--plasma-typo-body-s-line-height);--plasma-avatar-extra-badge-left-content-margin-left:-0.063rem;--plasma-avatar-extra-badge-left-content-margin-right:0.25rem;--plasma-avatar-extra-badge-right-content-margin-left:0.25rem;--plasma-avatar-extra-badge-right-content-margin-right:-0.063rem;--plasma-avatar-extra-badge-pilled-border-radius:1.25rem;--plasma-avatar-extra-counter-border-radius:1rem;--plasma-avatar-extra-counter-height:1.75rem;--plasma-avatar-extra-counter-padding:0 0.625rem;--plasma-avatar-extra-counter-font-family:var(--plasma-typo-body-s-font-family);--plasma-avatar-extra-counter-font-size:var(--plasma-typo-body-s-font-size);--plasma-avatar-extra-counter-font-style:var(--plasma-typo-body-s-font-style);--plasma-avatar-extra-counter-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-avatar-extra-counter-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-avatar-extra-counter-lineheight:var(--plasma-typo-body-s-line-height);}
|
|
3
|
+
.l3mxzec{--plasma-avatar-size:3rem;--plasma-avatar-font-size:1.25rem;--plasma-avatar-font-weight:600;--plasma-avatar-line-height:1.25rem;--plasma-status-icon-size:0.5rem;--plasma-avatar-extra-placement-factor:2;--plasma-avatar-extra-badge-border-radius:0.375rem;--plasma-avatar-extra-badge-height:1.25rem;--plasma-avatar-extra-badge-padding:0 0.438rem;--plasma-avatar-extra-badge-padding-icon-only:0 0.25rem;--plasma-avatar-extra-badge-font-family:var(--plasma-typo-body-xxs-font-family);--plasma-avatar-extra-badge-font-size:var(--plasma-typo-body-xxs-font-size);--plasma-avatar-extra-badge-font-style:var(--plasma-typo-body-xxs-font-style);--plasma-avatar-extra-badge-font-weight:var(--plasma-typo-body-xxs-font-weight);--plasma-avatar-extra-badge-letter-spacing:var(--plasma-typo-body-xxs-letter-spacing);--plasma-avatar-extra-badge-lineheight:var(--plasma-typo-body-xxs-line-height);--plasma-avatar-extra-badge-left-content-margin-left:-0.063rem;--plasma-avatar-extra-badge-left-content-margin-right:0.125rem;--plasma-avatar-extra-badge-right-content-margin-left:0.125rem;--plasma-avatar-extra-badge-right-content-margin-right:-0.063rem;--plasma-avatar-extra-badge-pilled-border-radius:1.25rem;--plasma-avatar-extra-counter-border-radius:1rem;--plasma-avatar-extra-counter-height:1.25rem;--plasma-avatar-extra-counter-padding:0 0.375rem;--plasma-avatar-extra-counter-font-family:var(--plasma-typo-body-xxs-font-family);--plasma-avatar-extra-counter-font-size:var(--plasma-typo-body-xxs-font-size);--plasma-avatar-extra-counter-font-style:var(--plasma-typo-body-xxs-font-style);--plasma-avatar-extra-counter-font-weight:var(--plasma-typo-body-xxs-font-weight);--plasma-avatar-extra-counter-letter-spacing:var(--plasma-typo-body-xxs-letter-spacing);--plasma-avatar-extra-counter-lineheight:var(--plasma-typo-body-xxs-line-height);}
|
|
4
|
+
.m1tqy9r4{--plasma-avatar-size:2.25rem;--plasma-avatar-font-size:0.875rem;--plasma-avatar-font-weight:600;--plasma-avatar-line-height:0.875rem;--plasma-status-icon-size:0.5rem;--plasma-avatar-extra-placement-factor:2;--plasma-avatar-extra-badge-border-radius:0.25rem;--plasma-avatar-extra-badge-height:1rem;--plasma-avatar-extra-badge-padding:0 0.25rem;--plasma-avatar-extra-badge-padding-icon-only:0 0.188rem;--plasma-avatar-extra-badge-font-family:var(--plasma-typo-body-xxs-font-family);--plasma-avatar-extra-badge-font-size:var(--plasma-typo-body-xxs-font-size);--plasma-avatar-extra-badge-font-style:var(--plasma-typo-body-xxs-font-style);--plasma-avatar-extra-badge-font-weight:var(--plasma-typo-body-xxs-font-weight);--plasma-avatar-extra-badge-letter-spacing:var(--plasma-typo-body-xxs-letter-spacing);--plasma-avatar-extra-badge-lineheight:var(--plasma-typo-body-xxs-line-height);--plasma-avatar-extra-badge-left-content-margin-left:-0.063rem;--plasma-avatar-extra-badge-left-content-margin-right:0.125rem;--plasma-avatar-extra-badge-right-content-margin-left:0.125rem;--plasma-avatar-extra-badge-right-content-margin-right:-0.063rem;--plasma-avatar-extra-badge-pilled-border-radius:1.25rem;--plasma-avatar-extra-counter-border-radius:1rem;--plasma-avatar-extra-counter-height:1rem;--plasma-avatar-extra-counter-padding:0 0.25rem;--plasma-avatar-extra-counter-font-family:var(--plasma-typo-body-xxs-font-family);--plasma-avatar-extra-counter-font-size:var(--plasma-typo-body-xxs-font-size);--plasma-avatar-extra-counter-font-style:var(--plasma-typo-body-xxs-font-style);--plasma-avatar-extra-counter-font-weight:var(--plasma-typo-body-xxs-font-weight);--plasma-avatar-extra-counter-letter-spacing:var(--plasma-typo-body-xxs-letter-spacing);--plasma-avatar-extra-counter-lineheight:var(--plasma-typo-body-xxs-line-height);}
|
|
5
|
+
.s110gq94{--plasma-avatar-size:1.5rem;--plasma-avatar-font-size:0.5rem;--plasma-avatar-font-weight:600;--plasma-avatar-line-height:0.5rem;--plasma-status-icon-size:0.375rem;--plasma-avatar-extra-placement-factor:1;--plasma-avatar-extra-counter-border-radius:1rem;--plasma-avatar-extra-counter-height:0.75rem;--plasma-avatar-extra-counter-padding:0 0.125rem;--plasma-avatar-extra-counter-font-family:var(--plasma-typo-body-xxs-font-family);--plasma-avatar-extra-counter-font-size:var(--plasma-typo-body-xxs-font-size);--plasma-avatar-extra-counter-font-style:var(--plasma-typo-body-xxs-font-style);--plasma-avatar-extra-counter-font-weight:var(--plasma-typo-body-xxs-font-weight);--plasma-avatar-extra-counter-letter-spacing:var(--plasma-typo-body-xxs-letter-spacing);--plasma-avatar-extra-counter-lineheight:var(--plasma-typo-body-xxs-line-height);}
|
|
6
|
+
.f3cx8li{--plasma-avatar-size:100%;--plasma-avatar-font-size:0;--plasma-avatar-font-weight:0;--plasma-avatar-line-height:0;--plasma-status-icon-size:0;}
|
|
7
|
+
.t12fbiph{--plasma-avatar-outline-size:0.1rem;--plasma-avatar-outline-offset:-0.2rem;--plasma-avatar-outline-color:var(--surface-accent);}
|
|
8
|
+
.d1v24dm1{--plasma-avatar-extra-badge-color:var(--inverse-text-primary);--plasma-avatar-extra-badge-background:var(--surface-solid-default);--plasma-avatar-extra-badge-color-transparent:var(--text-primary);--plasma-avatar-extra-badge-background-transparent:var(--surface-transparent-secondary);--plasma-avatar-extra-badge-color-clear:var(--text-primary);--plasma-avatar-extra-badge-background-clear:var(--surface-clear);}
|
|
9
|
+
.aklmhlm{--plasma-avatar-extra-badge-color:var(--on-dark-text-primary);--plasma-avatar-extra-badge-background:var(--surface-accent);--plasma-avatar-extra-badge-color-transparent:var(--text-accent);--plasma-avatar-extra-badge-background-transparent:var(--surface-transparent-accent);--plasma-avatar-extra-badge-color-clear:var(--text-accent);--plasma-avatar-extra-badge-background-clear:var(--surface-clear);}
|
|
10
|
+
.pts1qri{--plasma-avatar-extra-badge-color:var(--on-dark-text-primary);--plasma-avatar-extra-badge-background:var(--surface-positive);--plasma-avatar-extra-badge-color-transparent:var(--text-positive);--plasma-avatar-extra-badge-background-transparent:var(--surface-transparent-positive);--plasma-avatar-extra-badge-color-clear:var(--text-positive);--plasma-avatar-extra-badge-background-clear:var(--surface-clear);}
|
|
11
|
+
.wu8qekr{--plasma-avatar-extra-badge-color:var(--on-dark-text-primary);--plasma-avatar-extra-badge-background:var(--surface-warning);--plasma-avatar-extra-badge-color-transparent:var(--text-warning);--plasma-avatar-extra-badge-background-transparent:var(--surface-transparent-warning);--plasma-avatar-extra-badge-color-clear:var(--text-warning);--plasma-avatar-extra-badge-background-clear:var(--surface-clear);}
|
|
12
|
+
.nc00x8o{--plasma-avatar-extra-badge-color:var(--on-dark-text-primary);--plasma-avatar-extra-badge-background:var(--surface-negative);--plasma-avatar-extra-badge-color-transparent:var(--text-negative);--plasma-avatar-extra-badge-background-transparent:var(--surface-transparent-negative);--plasma-avatar-extra-badge-color-clear:var(--text-negative);--plasma-avatar-extra-badge-background-clear:var(--surface-clear);}
|
|
13
|
+
.d4vpurz{--plasma-avatar-extra-badge-color:var(--on-dark-text-primary);--plasma-avatar-extra-badge-background:var(--on-light-surface-solid-default);--plasma-avatar-extra-badge-color-transparent:var(--on-dark-text-primary);--plasma-avatar-extra-badge-background-transparent:var(--on-light-surface-transparent-deep);--plasma-avatar-extra-badge-color-clear:var(--on-light-text-primary);--plasma-avatar-extra-badge-background-clear:var(--surface-clear);}
|
|
14
|
+
.lh713v8{--plasma-avatar-extra-badge-color:var(--on-light-text-primary);--plasma-avatar-extra-badge-background:var(--on-dark-surface-solid-default);--plasma-avatar-extra-badge-color-transparent:var(--on-dark-text-primary);--plasma-avatar-extra-badge-background-transparent:var(--on-dark-surface-transparent-card);--plasma-avatar-extra-badge-color-clear:var(--on-dark-text-primary);--plasma-avatar-extra-badge-background-clear:var(--surface-clear);}
|
|
15
|
+
.d18xlm4d{--plasma-avatar-extra-counter-color:var(--inverse-text-primary);--plasma-avatar-extra-counter-background:var(--surface-solid-default);}
|
|
16
|
+
.a19kwqy5{--plasma-avatar-extra-counter-color:var(--on-dark-text-primary);--plasma-avatar-extra-counter-background:var(--surface-accent);}
|
|
17
|
+
.p1jpkhmc{--plasma-avatar-extra-counter-color:var(--on-dark-text-primary);--plasma-avatar-extra-counter-background:var(--surface-positive);}
|
|
18
|
+
.w1rt05zb{--plasma-avatar-extra-counter-color:var(--on-dark-text-primary);--plasma-avatar-extra-counter-background:var(--surface-warning);}
|
|
19
|
+
.n18uzb5o{--plasma-avatar-extra-counter-color:var(--on-dark-text-primary);--plasma-avatar-extra-counter-background:var(--surface-negative);}
|
|
20
|
+
.dwmydiz{--plasma-avatar-extra-counter-color:var(--on-dark-text-primary);--plasma-avatar-extra-counter-background:var(--on-light-surface-solid-default);}
|
|
21
|
+
.l84jq18{--plasma-avatar-extra-counter-color:var(--on-light-text-primary);--plasma-avatar-extra-counter-background:var(--on-dark-surface-solid-default);}
|
|
@@ -1,7 +1,21 @@
|
|
|
1
|
-
.
|
|
2
|
-
.
|
|
3
|
-
.
|
|
4
|
-
.
|
|
5
|
-
.
|
|
6
|
-
.
|
|
7
|
-
.
|
|
1
|
+
.Avatar_config_1buqzeq_d1wlf450__1b050186{--plasma-avatar-color:var(--text-accent-gradient);--plasma-avatar-background:linear-gradient(94deg,rgba(62,121,240,0.2) 6.49%,rgba(39,198,229,0.2) 93.51%);--plasma-avatar-status-online-background:var(--surface-positive);--plasma-avatar-status-offline-background:var(--surface-solid-tertiary);--plasma-avatar-scale-hover:1.02;--plasma-avatar-font-family:var(--plasma-typo-text-font-family);}
|
|
2
|
+
.Avatar_config_1buqzeq_x1ntw407__1b050186{--plasma-avatar-size:6.25rem;--plasma-avatar-font-size:2rem;--plasma-avatar-font-weight:600;--plasma-avatar-line-height:2rem;--plasma-status-icon-size:0.75rem;--plasma-avatar-extra-badge-border-radius:0.5rem;--plasma-avatar-extra-badge-height:1.75rem;--plasma-avatar-extra-badge-padding:0 0.688rem;--plasma-avatar-extra-badge-padding-icon-only:0 0.375rem;--plasma-avatar-extra-badge-font-family:var(--plasma-typo-body-s-font-family);--plasma-avatar-extra-badge-font-size:var(--plasma-typo-body-s-font-size);--plasma-avatar-extra-badge-font-style:var(--plasma-typo-body-s-font-style);--plasma-avatar-extra-badge-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-avatar-extra-badge-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-avatar-extra-badge-lineheight:var(--plasma-typo-body-s-line-height);--plasma-avatar-extra-badge-left-content-margin-left:-0.063rem;--plasma-avatar-extra-badge-left-content-margin-right:0.25rem;--plasma-avatar-extra-badge-right-content-margin-left:0.25rem;--plasma-avatar-extra-badge-right-content-margin-right:-0.063rem;--plasma-avatar-extra-badge-pilled-border-radius:1.25rem;--plasma-avatar-extra-counter-border-radius:1rem;--plasma-avatar-extra-counter-height:1.75rem;--plasma-avatar-extra-counter-padding:0 0.625rem;--plasma-avatar-extra-counter-font-family:var(--plasma-typo-body-s-font-family);--plasma-avatar-extra-counter-font-size:var(--plasma-typo-body-s-font-size);--plasma-avatar-extra-counter-font-style:var(--plasma-typo-body-s-font-style);--plasma-avatar-extra-counter-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-avatar-extra-counter-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-avatar-extra-counter-lineheight:var(--plasma-typo-body-s-line-height);}
|
|
3
|
+
.Avatar_config_1buqzeq_l3mxzec__1b050186{--plasma-avatar-size:3rem;--plasma-avatar-font-size:1.25rem;--plasma-avatar-font-weight:600;--plasma-avatar-line-height:1.25rem;--plasma-status-icon-size:0.5rem;--plasma-avatar-extra-placement-factor:2;--plasma-avatar-extra-badge-border-radius:0.375rem;--plasma-avatar-extra-badge-height:1.25rem;--plasma-avatar-extra-badge-padding:0 0.438rem;--plasma-avatar-extra-badge-padding-icon-only:0 0.25rem;--plasma-avatar-extra-badge-font-family:var(--plasma-typo-body-xxs-font-family);--plasma-avatar-extra-badge-font-size:var(--plasma-typo-body-xxs-font-size);--plasma-avatar-extra-badge-font-style:var(--plasma-typo-body-xxs-font-style);--plasma-avatar-extra-badge-font-weight:var(--plasma-typo-body-xxs-font-weight);--plasma-avatar-extra-badge-letter-spacing:var(--plasma-typo-body-xxs-letter-spacing);--plasma-avatar-extra-badge-lineheight:var(--plasma-typo-body-xxs-line-height);--plasma-avatar-extra-badge-left-content-margin-left:-0.063rem;--plasma-avatar-extra-badge-left-content-margin-right:0.125rem;--plasma-avatar-extra-badge-right-content-margin-left:0.125rem;--plasma-avatar-extra-badge-right-content-margin-right:-0.063rem;--plasma-avatar-extra-badge-pilled-border-radius:1.25rem;--plasma-avatar-extra-counter-border-radius:1rem;--plasma-avatar-extra-counter-height:1.25rem;--plasma-avatar-extra-counter-padding:0 0.375rem;--plasma-avatar-extra-counter-font-family:var(--plasma-typo-body-xxs-font-family);--plasma-avatar-extra-counter-font-size:var(--plasma-typo-body-xxs-font-size);--plasma-avatar-extra-counter-font-style:var(--plasma-typo-body-xxs-font-style);--plasma-avatar-extra-counter-font-weight:var(--plasma-typo-body-xxs-font-weight);--plasma-avatar-extra-counter-letter-spacing:var(--plasma-typo-body-xxs-letter-spacing);--plasma-avatar-extra-counter-lineheight:var(--plasma-typo-body-xxs-line-height);}
|
|
4
|
+
.Avatar_config_1buqzeq_m1tqy9r4__1b050186{--plasma-avatar-size:2.25rem;--plasma-avatar-font-size:0.875rem;--plasma-avatar-font-weight:600;--plasma-avatar-line-height:0.875rem;--plasma-status-icon-size:0.5rem;--plasma-avatar-extra-placement-factor:2;--plasma-avatar-extra-badge-border-radius:0.25rem;--plasma-avatar-extra-badge-height:1rem;--plasma-avatar-extra-badge-padding:0 0.25rem;--plasma-avatar-extra-badge-padding-icon-only:0 0.188rem;--plasma-avatar-extra-badge-font-family:var(--plasma-typo-body-xxs-font-family);--plasma-avatar-extra-badge-font-size:var(--plasma-typo-body-xxs-font-size);--plasma-avatar-extra-badge-font-style:var(--plasma-typo-body-xxs-font-style);--plasma-avatar-extra-badge-font-weight:var(--plasma-typo-body-xxs-font-weight);--plasma-avatar-extra-badge-letter-spacing:var(--plasma-typo-body-xxs-letter-spacing);--plasma-avatar-extra-badge-lineheight:var(--plasma-typo-body-xxs-line-height);--plasma-avatar-extra-badge-left-content-margin-left:-0.063rem;--plasma-avatar-extra-badge-left-content-margin-right:0.125rem;--plasma-avatar-extra-badge-right-content-margin-left:0.125rem;--plasma-avatar-extra-badge-right-content-margin-right:-0.063rem;--plasma-avatar-extra-badge-pilled-border-radius:1.25rem;--plasma-avatar-extra-counter-border-radius:1rem;--plasma-avatar-extra-counter-height:1rem;--plasma-avatar-extra-counter-padding:0 0.25rem;--plasma-avatar-extra-counter-font-family:var(--plasma-typo-body-xxs-font-family);--plasma-avatar-extra-counter-font-size:var(--plasma-typo-body-xxs-font-size);--plasma-avatar-extra-counter-font-style:var(--plasma-typo-body-xxs-font-style);--plasma-avatar-extra-counter-font-weight:var(--plasma-typo-body-xxs-font-weight);--plasma-avatar-extra-counter-letter-spacing:var(--plasma-typo-body-xxs-letter-spacing);--plasma-avatar-extra-counter-lineheight:var(--plasma-typo-body-xxs-line-height);}
|
|
5
|
+
.Avatar_config_1buqzeq_s110gq94__1b050186{--plasma-avatar-size:1.5rem;--plasma-avatar-font-size:0.5rem;--plasma-avatar-font-weight:600;--plasma-avatar-line-height:0.5rem;--plasma-status-icon-size:0.375rem;--plasma-avatar-extra-placement-factor:1;--plasma-avatar-extra-counter-border-radius:1rem;--plasma-avatar-extra-counter-height:0.75rem;--plasma-avatar-extra-counter-padding:0 0.125rem;--plasma-avatar-extra-counter-font-family:var(--plasma-typo-body-xxs-font-family);--plasma-avatar-extra-counter-font-size:var(--plasma-typo-body-xxs-font-size);--plasma-avatar-extra-counter-font-style:var(--plasma-typo-body-xxs-font-style);--plasma-avatar-extra-counter-font-weight:var(--plasma-typo-body-xxs-font-weight);--plasma-avatar-extra-counter-letter-spacing:var(--plasma-typo-body-xxs-letter-spacing);--plasma-avatar-extra-counter-lineheight:var(--plasma-typo-body-xxs-line-height);}
|
|
6
|
+
.Avatar_config_1buqzeq_f3cx8li__1b050186{--plasma-avatar-size:100%;--plasma-avatar-font-size:0;--plasma-avatar-font-weight:0;--plasma-avatar-line-height:0;--plasma-status-icon-size:0;}
|
|
7
|
+
.Avatar_config_1buqzeq_t12fbiph__1b050186{--plasma-avatar-outline-size:0.1rem;--plasma-avatar-outline-offset:-0.2rem;--plasma-avatar-outline-color:var(--surface-accent);}
|
|
8
|
+
.Avatar_config_1buqzeq_d1v24dm1__1b050186{--plasma-avatar-extra-badge-color:var(--inverse-text-primary);--plasma-avatar-extra-badge-background:var(--surface-solid-default);--plasma-avatar-extra-badge-color-transparent:var(--text-primary);--plasma-avatar-extra-badge-background-transparent:var(--surface-transparent-secondary);--plasma-avatar-extra-badge-color-clear:var(--text-primary);--plasma-avatar-extra-badge-background-clear:var(--surface-clear);}
|
|
9
|
+
.Avatar_config_1buqzeq_aklmhlm__1b050186{--plasma-avatar-extra-badge-color:var(--on-dark-text-primary);--plasma-avatar-extra-badge-background:var(--surface-accent);--plasma-avatar-extra-badge-color-transparent:var(--text-accent);--plasma-avatar-extra-badge-background-transparent:var(--surface-transparent-accent);--plasma-avatar-extra-badge-color-clear:var(--text-accent);--plasma-avatar-extra-badge-background-clear:var(--surface-clear);}
|
|
10
|
+
.Avatar_config_1buqzeq_pts1qri__1b050186{--plasma-avatar-extra-badge-color:var(--on-dark-text-primary);--plasma-avatar-extra-badge-background:var(--surface-positive);--plasma-avatar-extra-badge-color-transparent:var(--text-positive);--plasma-avatar-extra-badge-background-transparent:var(--surface-transparent-positive);--plasma-avatar-extra-badge-color-clear:var(--text-positive);--plasma-avatar-extra-badge-background-clear:var(--surface-clear);}
|
|
11
|
+
.Avatar_config_1buqzeq_wu8qekr__1b050186{--plasma-avatar-extra-badge-color:var(--on-dark-text-primary);--plasma-avatar-extra-badge-background:var(--surface-warning);--plasma-avatar-extra-badge-color-transparent:var(--text-warning);--plasma-avatar-extra-badge-background-transparent:var(--surface-transparent-warning);--plasma-avatar-extra-badge-color-clear:var(--text-warning);--plasma-avatar-extra-badge-background-clear:var(--surface-clear);}
|
|
12
|
+
.Avatar_config_1buqzeq_nc00x8o__1b050186{--plasma-avatar-extra-badge-color:var(--on-dark-text-primary);--plasma-avatar-extra-badge-background:var(--surface-negative);--plasma-avatar-extra-badge-color-transparent:var(--text-negative);--plasma-avatar-extra-badge-background-transparent:var(--surface-transparent-negative);--plasma-avatar-extra-badge-color-clear:var(--text-negative);--plasma-avatar-extra-badge-background-clear:var(--surface-clear);}
|
|
13
|
+
.Avatar_config_1buqzeq_d4vpurz__1b050186{--plasma-avatar-extra-badge-color:var(--on-dark-text-primary);--plasma-avatar-extra-badge-background:var(--on-light-surface-solid-default);--plasma-avatar-extra-badge-color-transparent:var(--on-dark-text-primary);--plasma-avatar-extra-badge-background-transparent:var(--on-light-surface-transparent-deep);--plasma-avatar-extra-badge-color-clear:var(--on-light-text-primary);--plasma-avatar-extra-badge-background-clear:var(--surface-clear);}
|
|
14
|
+
.Avatar_config_1buqzeq_lh713v8__1b050186{--plasma-avatar-extra-badge-color:var(--on-light-text-primary);--plasma-avatar-extra-badge-background:var(--on-dark-surface-solid-default);--plasma-avatar-extra-badge-color-transparent:var(--on-dark-text-primary);--plasma-avatar-extra-badge-background-transparent:var(--on-dark-surface-transparent-card);--plasma-avatar-extra-badge-color-clear:var(--on-dark-text-primary);--plasma-avatar-extra-badge-background-clear:var(--surface-clear);}
|
|
15
|
+
.Avatar_config_1buqzeq_d18xlm4d__1b050186{--plasma-avatar-extra-counter-color:var(--inverse-text-primary);--plasma-avatar-extra-counter-background:var(--surface-solid-default);}
|
|
16
|
+
.Avatar_config_1buqzeq_a19kwqy5__1b050186{--plasma-avatar-extra-counter-color:var(--on-dark-text-primary);--plasma-avatar-extra-counter-background:var(--surface-accent);}
|
|
17
|
+
.Avatar_config_1buqzeq_p1jpkhmc__1b050186{--plasma-avatar-extra-counter-color:var(--on-dark-text-primary);--plasma-avatar-extra-counter-background:var(--surface-positive);}
|
|
18
|
+
.Avatar_config_1buqzeq_w1rt05zb__1b050186{--plasma-avatar-extra-counter-color:var(--on-dark-text-primary);--plasma-avatar-extra-counter-background:var(--surface-warning);}
|
|
19
|
+
.Avatar_config_1buqzeq_n18uzb5o__1b050186{--plasma-avatar-extra-counter-color:var(--on-dark-text-primary);--plasma-avatar-extra-counter-background:var(--surface-negative);}
|
|
20
|
+
.Avatar_config_1buqzeq_dwmydiz__1b050186{--plasma-avatar-extra-counter-color:var(--on-dark-text-primary);--plasma-avatar-extra-counter-background:var(--on-light-surface-solid-default);}
|
|
21
|
+
.Avatar_config_1buqzeq_l84jq18__1b050186{--plasma-avatar-extra-counter-color:var(--on-light-text-primary);--plasma-avatar-extra-counter-background:var(--on-dark-surface-solid-default);}
|