@itcase/ui 1.2.28 → 1.2.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{Badge-CrhdvxY6.js → Badge-BZYBmgBK.js} +4 -7
- package/dist/{Badge-2JkquAEb.js → Badge-TyPbVqR_.js} +4 -7
- package/dist/{Button-COsywjkv.js → Button-BcOsYgoT.js} +5 -4
- package/dist/{Button-C0M-Ap20.js → Button-avhviao1.js} +6 -5
- package/dist/{DropdownItem-D0dOP4NL.js → DropdownItem-CFkRx8LX.js} +2 -2
- package/dist/{DropdownItem-D52wxY6I.js → DropdownItem-toApJyeB.js} +1 -1
- package/dist/{Group-B2oTJg0t.js → Group-BiN0haVp.js} +2 -1
- package/dist/{Group-CVUfaHaS.js → Group-Dc70Z4_7.js} +2 -1
- package/dist/{Icon-CkynFJm4.js → Icon-B2BwTQnP.js} +3 -2
- package/dist/{Icon-CliIEdbp.js → Icon-ClsRaxDk.js} +4 -3
- package/dist/{Input-BSpFMsrf.js → Input-BaicBuyd.js} +4 -4
- package/dist/{Input-UkM-ag48.js → Input-DbzsXvEf.js} +4 -4
- package/dist/{Label-ukXod6pv.js → Label-BfotYOmD.js} +7 -6
- package/dist/{Label-BPP0om7_.js → Label-fp2Bus_T.js} +7 -6
- package/dist/{Link-CeQuavin.js → Link-CzC1kU5C.js} +1 -1
- package/dist/{Loader-CJ8ZCdwy.js → Loader-CU_5Ydmy.js} +4 -3
- package/dist/{Loader-fA11tUEJ.js → Loader-Ck59IXGG.js} +4 -3
- package/dist/{MenuItem-BL6WBNjL.js → MenuItem-BEYVY0Vf.js} +8 -7
- package/dist/{MenuItem-B5ypY7Uo.js → MenuItem-BJ3uGKCH.js} +7 -6
- package/dist/{Text-_YhyTsQ1.js → Text-CC0xnhmx.js} +4 -3
- package/dist/{Text-CG3xPG27.js → Text-kxGZButz.js} +4 -3
- package/dist/{Title-CqwqEtm7.js → Title-CQ_Fr1hO.js} +4 -3
- package/dist/{Title-B-N0qkn3.js → Title-Ze_OL1Co.js} +4 -3
- package/dist/{Tooltip-DsTCGS6h.js → Tooltip-PrwacZFC.js} +5 -4
- package/dist/{Tooltip-B2vv4OAX.js → Tooltip-ccRCMYQM.js} +5 -4
- package/dist/appearance/Badge.js +44 -0
- package/dist/appearance/Button.js +53 -0
- package/dist/appearance/Checkbox.js +21 -0
- package/dist/appearance/Chips.js +40 -0
- package/dist/appearance/Choice.js +15 -0
- package/dist/appearance/DatePicker.js +5 -0
- package/dist/appearance/Group.js +11 -0
- package/dist/appearance/Icon.js +12 -0
- package/dist/appearance/Input.js +56 -0
- package/dist/appearance/InputPassword.js +55 -0
- package/dist/appearance/Label.js +54 -0
- package/dist/appearance/Loader.js +28 -0
- package/dist/appearance/MenuItem.js +10 -0
- package/dist/appearance/Notification.js +34 -0
- package/dist/appearance/Radio.js +20 -0
- package/dist/appearance/Response.js +92 -0
- package/dist/appearance/Search.js +11 -0
- package/dist/appearance/Segmented.js +14 -0
- package/dist/appearance/Select.js +24 -0
- package/dist/appearance/Tab.js +118 -0
- package/dist/appearance/Text.js +8 -0
- package/dist/appearance/Textarea.js +56 -0
- package/dist/appearance/Title.js +7 -0
- package/dist/appearance/Tooltip.js +19 -0
- package/dist/cjs/appearance/Badge.js +46 -0
- package/dist/cjs/appearance/Button.js +55 -0
- package/dist/cjs/appearance/Checkbox.js +24 -0
- package/dist/cjs/appearance/Chips.js +42 -0
- package/dist/cjs/appearance/Choice.js +17 -0
- package/dist/cjs/appearance/DatePicker.js +7 -0
- package/dist/cjs/appearance/Group.js +13 -0
- package/dist/cjs/appearance/Icon.js +14 -0
- package/dist/cjs/appearance/Input.js +59 -0
- package/dist/cjs/appearance/InputPassword.js +58 -0
- package/dist/cjs/appearance/Label.js +56 -0
- package/dist/cjs/appearance/Loader.js +30 -0
- package/dist/cjs/appearance/MenuItem.js +12 -0
- package/dist/cjs/appearance/Notification.js +36 -0
- package/dist/cjs/appearance/Radio.js +23 -0
- package/dist/cjs/appearance/Response.js +94 -0
- package/dist/cjs/appearance/Search.js +13 -0
- package/dist/cjs/appearance/Segmented.js +16 -0
- package/dist/cjs/appearance/Select.js +26 -0
- package/dist/cjs/appearance/Tab.js +120 -0
- package/dist/cjs/appearance/Text.js +10 -0
- package/dist/cjs/appearance/Textarea.js +59 -0
- package/dist/cjs/appearance/Title.js +9 -0
- package/dist/cjs/appearance/Tooltip.js +21 -0
- package/dist/cjs/components/Accordion.js +8 -4
- package/dist/cjs/components/Avatar.js +8 -4
- package/dist/cjs/components/Badge.js +4 -2
- package/dist/cjs/components/Breadcrumbs.js +8 -4
- package/dist/cjs/components/Button.js +12 -6
- package/dist/cjs/components/Card.js +2 -1
- package/dist/cjs/components/Cell.js +10 -5
- package/dist/cjs/components/Checkbox.js +8 -7
- package/dist/cjs/components/Chips.js +5 -4
- package/dist/cjs/components/Choice.js +13 -8
- package/dist/cjs/components/Code.js +1 -1
- package/dist/cjs/components/ContextMenu.js +8 -4
- package/dist/cjs/components/CookiesWarning.js +14 -7
- package/dist/cjs/components/DadataHintField.js +2 -1
- package/dist/cjs/components/DatePicker.js +38 -16
- package/dist/cjs/components/Dropdown.js +3 -2
- package/dist/cjs/components/Group.js +2 -1
- package/dist/cjs/components/Icon.js +8 -4
- package/dist/cjs/components/Input.js +2 -1
- package/dist/cjs/components/InputPassword.js +12 -6
- package/dist/cjs/components/Label.js +8 -4
- package/dist/cjs/components/LanguageSelector.js +8 -4
- package/dist/cjs/components/Loader.js +4 -2
- package/dist/cjs/components/Menu.js +4 -2
- package/dist/cjs/components/MenuItem.js +4 -2
- package/dist/cjs/components/Modal.js +4 -2
- package/dist/cjs/components/Notification.js +12 -9
- package/dist/cjs/components/Pagination.js +9 -5
- package/dist/cjs/components/Panel.js +4 -2
- package/dist/cjs/components/Radio.js +11 -8
- package/dist/cjs/components/Response.js +18 -11
- package/dist/cjs/components/Search.js +12 -7
- package/dist/cjs/components/Segmented.js +16 -10
- package/dist/cjs/components/Select.js +14 -7
- package/dist/cjs/components/SiteMenu.js +8 -4
- package/dist/cjs/components/Swiper.js +2 -1
- package/dist/cjs/components/Tab.js +11 -8
- package/dist/cjs/components/Text.js +2 -1
- package/dist/cjs/components/Textarea.js +9 -7
- package/dist/cjs/components/Tile.js +6 -3
- package/dist/cjs/components/Title.js +2 -1
- package/dist/cjs/components/Tooltip.js +6 -3
- package/dist/cjs/components/Video.js +4 -4
- package/dist/cjs/hooks.js +1 -0
- package/dist/components/Accordion.js +10 -6
- package/dist/components/Avatar.js +10 -6
- package/dist/components/Badge.js +4 -2
- package/dist/components/Breadcrumbs.js +10 -6
- package/dist/components/Button.js +14 -8
- package/dist/components/Card.js +2 -1
- package/dist/components/Cell.js +12 -7
- package/dist/components/Checkbox.js +8 -7
- package/dist/components/Chips.js +5 -4
- package/dist/components/Choice.js +15 -10
- package/dist/components/Code.js +2 -2
- package/dist/components/ContextMenu.js +10 -6
- package/dist/components/CookiesWarning.js +16 -9
- package/dist/components/DadataHintField.js +3 -2
- package/dist/components/DatePicker.js +40 -19
- package/dist/components/Dropdown.js +5 -4
- package/dist/components/Group.js +2 -1
- package/dist/components/Icon.js +10 -6
- package/dist/components/Input.js +2 -1
- package/dist/components/InputPassword.js +14 -8
- package/dist/components/Label.js +8 -4
- package/dist/components/LanguageSelector.js +10 -6
- package/dist/components/Link.js +2 -2
- package/dist/components/List.js +2 -2
- package/dist/components/Loader.js +4 -2
- package/dist/components/Logo.js +2 -2
- package/dist/components/Menu.js +6 -4
- package/dist/components/MenuItem.js +6 -4
- package/dist/components/Modal.js +4 -2
- package/dist/components/Notification.js +13 -10
- package/dist/components/Pagination.js +11 -7
- package/dist/components/Panel.js +4 -2
- package/dist/components/Radio.js +11 -8
- package/dist/components/Response.js +20 -13
- package/dist/components/ScrollOnDrag.js +1 -1
- package/dist/components/Search.js +14 -9
- package/dist/components/Segmented.js +16 -10
- package/dist/components/Select.js +16 -9
- package/dist/components/SiteMenu.js +10 -6
- package/dist/components/Swiper.js +2 -1
- package/dist/components/Tab.js +13 -10
- package/dist/components/Text.js +2 -1
- package/dist/components/Textarea.js +9 -7
- package/dist/components/Tile.js +6 -3
- package/dist/components/Title.js +2 -1
- package/dist/components/Tooltip.js +6 -3
- package/dist/components/Video.js +4 -4
- package/dist/context/Notifications.js +1 -1
- package/dist/css/components/Badge/Badge.css +0 -16
- package/dist/css/components/Badge/Badge.tokens.css +20 -0
- package/dist/css/components/Pagination/Pagination.css +1 -1
- package/dist/css/components/Segmented/Segmented.css +1 -1
- package/dist/hooks.js +1 -1
- package/dist/stories/Appearance.stories.js +2 -2
- package/dist/stories/Badge.stories.js +1 -1
- package/dist/stories/Button.stories.js +2 -2
- package/dist/stories/Checkbox.stories.js +1 -1
- package/dist/stories/Chips.stories.js +1 -1
- package/dist/stories/Group.stories.js +2 -3
- package/dist/stories/Icon.stories.js +2 -2
- package/dist/stories/Input.stories.js +1 -1
- package/dist/stories/InputPassword.stories.js +2 -2
- package/dist/stories/Label.stories.js +1 -1
- package/dist/stories/Loader.stories.js +1 -1
- package/dist/stories/MenuItem.stories.js +1 -1
- package/dist/stories/ModalConfirm.stories.js +1 -3
- package/dist/stories/ModalDefault.stories.js +1 -3
- package/dist/stories/Notification.stories.js +3 -3
- package/dist/stories/Radio.stories.js +1 -1
- package/dist/stories/SearchInput.stories.js +2 -2
- package/dist/stories/Size.stories.js +2 -3
- package/dist/stories/State.stories.js +2 -4
- package/dist/stories/Textarea.stories.js +1 -1
- package/dist/stories/Tile.stories.js +2 -3
- package/dist/stories/Tooltip.stories.js +1 -1
- package/dist/stories/appearance.mdx +63 -1
- package/dist/stories/settings.mdx +3 -0
- package/dist/{tslib.es6-5FtW-kfi.js → tslib.es6-w7hdJ3oZ.js} +1 -1
- package/dist/types/appearance/Badge/index.d.ts +2 -0
- package/dist/types/appearance/Button/index.d.ts +2 -0
- package/dist/types/appearance/Checkbox/index.d.ts +3 -0
- package/dist/types/appearance/Chips/index.d.ts +2 -0
- package/dist/types/appearance/Choice/index.d.ts +2 -0
- package/dist/types/appearance/DatePicker/index.d.ts +2 -0
- package/dist/types/appearance/Group/index.d.ts +2 -0
- package/dist/types/appearance/Icon/index.d.ts +2 -0
- package/dist/types/appearance/Input/index.d.ts +3 -0
- package/dist/types/appearance/InputPassword/index.d.ts +3 -0
- package/dist/types/appearance/Label/index.d.ts +2 -0
- package/dist/types/appearance/Loader/index.d.ts +2 -0
- package/dist/types/appearance/MenuItem/index.d.ts +2 -0
- package/dist/types/appearance/Notification/index.d.ts +2 -0
- package/dist/types/appearance/Radio/index.d.ts +3 -0
- package/dist/types/appearance/Response/index.d.ts +2 -0
- package/dist/types/appearance/Search/index.d.ts +2 -0
- package/dist/types/appearance/Segmented/index.d.ts +2 -0
- package/dist/types/appearance/Select/index.d.ts +2 -0
- package/dist/types/appearance/Tab/index.d.ts +2 -0
- package/dist/types/appearance/Text/index.d.ts +2 -0
- package/dist/types/appearance/Textarea/index.d.ts +3 -0
- package/dist/types/appearance/Title/index.d.ts +2 -0
- package/dist/types/appearance/Tooltip/index.d.ts +2 -0
- package/dist/types/components/Badge/Badge.appearance.d.ts +2 -0
- package/dist/types/components/Badge/Badge.d.ts +0 -6
- package/dist/types/components/DatePicker/DatePicker.d.ts +2 -1
- package/dist/types/components/DatePicker/DatePicker.interface.d.ts +10 -1
- package/dist/types/components/DatePicker/index.d.ts +1 -1
- package/dist/types/components/Group/Group.interface.d.ts +1 -1
- package/dist/types/components/MenuItem/MenuItem.d.ts +2 -2
- package/dist/types/components/Text/Text.interface.d.ts +2 -2
- package/dist/types/components/Title/Title.interface.d.ts +2 -2
- package/dist/types/types/componentProps/appearanceKeys.d.ts +1 -1
- package/package.json +5 -1
- package/dist/cjs/components.js +0 -3
- package/dist/components.js +0 -1
- /package/dist/stories/{mixins_animation.mdx → mixin_animation.mdx} +0 -0
- /package/dist/stories/{mixins_dark-light.mdx → mixin_dark-light.mdx} +0 -0
- /package/dist/stories/{mixins_elevation.mdx → mixin_elevation.mdx} +0 -0
- /package/dist/stories/{mixins_fill-gradient.mdx → mixin_fill-gradient.mdx} +0 -0
- /package/dist/stories/{mixins_typography.mdx → mixin_typography.mdx} +0 -0
- /package/dist/stories/{mixins_utils.mdx → mixin_utils.mdx} +0 -0
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
import { jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { useMemo } from 'react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
|
+
import { titleAppearance } from './appearance/Title.js';
|
|
4
5
|
import { useUserDeviceContext } from './context/UIContext.js';
|
|
5
6
|
import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
|
|
6
7
|
import { useStyles } from './hooks/useStyles.js';
|
|
7
8
|
|
|
8
9
|
var titleConfig = {
|
|
9
|
-
appearance:
|
|
10
|
+
appearance: titleAppearance,
|
|
10
11
|
setAppearance: function (newComponent) {
|
|
11
12
|
titleConfig.appearance = newComponent;
|
|
12
13
|
},
|
|
13
14
|
};
|
|
14
15
|
function Title(props) {
|
|
15
|
-
var
|
|
16
|
+
var children = props.children, after = props.after, afterWrapper = props.afterWrapper, appearance = props.appearance, before = props.before, beforeWrapper = props.beforeWrapper, className = props.className, dataTour = props.dataTour, mode = props.mode, size = props.size, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _a = props.tag, tag = _a === void 0 ? 'span' : _a, text = props.text, textWrap = props.textWrap, onClick = props.onClick;
|
|
16
17
|
var _b = useUserDeviceContext(), isMobile = _b.isMobile, isTablet = _b.isTablet, isDesktop = _b.isDesktop;
|
|
17
18
|
var directionClass = useDeviceTargetClass(props, {
|
|
18
19
|
prefix: 'title_direction_',
|
|
@@ -99,7 +100,7 @@ function Title(props) {
|
|
|
99
100
|
}, [isMobile, isTablet, isDesktop]);
|
|
100
101
|
return (jsxs(Tag, { className: clsx(className, 'title', fillColorClass, svgFillClass, svgFillHoverClass, widthClass, heightClass, size && "title_size_".concat(size), mode && "title_mode_".concat(mode), directionClass, 'text', textColorClass ||
|
|
101
102
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
|
|
102
|
-
"text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && "word-wrap_".concat(textWrap)), "data-tour": dataTour,
|
|
103
|
+
"text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && "word-wrap_".concat(textWrap)), "data-tour": dataTour, style: titleStyles, onClick: onClick, children: [before, jsxs("span", { className: clsx(textAlignClass, directionWrapperClass, 'title__wrapper', textTruncateClass), style: titleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
|
|
103
104
|
}
|
|
104
105
|
Title.defaultProps = {
|
|
105
106
|
size: 'h3',
|
|
@@ -3,18 +3,19 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var clsx = require('clsx');
|
|
6
|
+
var index = require('./cjs/appearance/Title.js');
|
|
6
7
|
var UIContext = require('./cjs/context/UIContext.js');
|
|
7
8
|
var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
|
|
8
9
|
var useStyles = require('./cjs/hooks/useStyles.js');
|
|
9
10
|
|
|
10
11
|
var titleConfig = {
|
|
11
|
-
appearance:
|
|
12
|
+
appearance: index.titleAppearance,
|
|
12
13
|
setAppearance: function (newComponent) {
|
|
13
14
|
titleConfig.appearance = newComponent;
|
|
14
15
|
},
|
|
15
16
|
};
|
|
16
17
|
function Title(props) {
|
|
17
|
-
var
|
|
18
|
+
var children = props.children, after = props.after, afterWrapper = props.afterWrapper, appearance = props.appearance, before = props.before, beforeWrapper = props.beforeWrapper, className = props.className, dataTour = props.dataTour, mode = props.mode, size = props.size, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _a = props.tag, tag = _a === void 0 ? 'span' : _a, text = props.text, textWrap = props.textWrap, onClick = props.onClick;
|
|
18
19
|
var _b = UIContext.useUserDeviceContext(), isMobile = _b.isMobile, isTablet = _b.isTablet, isDesktop = _b.isDesktop;
|
|
19
20
|
var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
20
21
|
prefix: 'title_direction_',
|
|
@@ -101,7 +102,7 @@ function Title(props) {
|
|
|
101
102
|
}, [isMobile, isTablet, isDesktop]);
|
|
102
103
|
return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'title', fillColorClass, svgFillClass, svgFillHoverClass, widthClass, heightClass, size && "title_size_".concat(size), mode && "title_mode_".concat(mode), directionClass, 'text', textColorClass ||
|
|
103
104
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
|
|
104
|
-
"text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && "word-wrap_".concat(textWrap)), "data-tour": dataTour,
|
|
105
|
+
"text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && "word-wrap_".concat(textWrap)), "data-tour": dataTour, style: titleStyles, onClick: onClick, children: [before, jsxRuntime.jsxs("span", { className: clsx(textAlignClass, directionWrapperClass, 'title__wrapper', textTruncateClass), style: titleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
|
|
105
106
|
}
|
|
106
107
|
Title.defaultProps = {
|
|
107
108
|
size: 'h3',
|
|
@@ -3,13 +3,14 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var clsx = require('clsx');
|
|
6
|
+
var index = require('./cjs/appearance/Tooltip.js');
|
|
6
7
|
var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
|
|
7
8
|
var useStyles = require('./cjs/hooks/useStyles.js');
|
|
8
|
-
var Text = require('./Text-
|
|
9
|
-
var Title = require('./Title-
|
|
9
|
+
var Text = require('./Text-CC0xnhmx.js');
|
|
10
|
+
var Title = require('./Title-Ze_OL1Co.js');
|
|
10
11
|
|
|
11
12
|
var tooltipConfig = {
|
|
12
|
-
appearance:
|
|
13
|
+
appearance: index.tooltipAppearance,
|
|
13
14
|
setAppearance: function (newComponent) {
|
|
14
15
|
tooltipConfig.appearance = newComponent;
|
|
15
16
|
},
|
|
@@ -112,7 +113,7 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
|
|
|
112
113
|
var appearanceConfig = (appearance && tooltipConfig.appearance && tooltipConfig.appearance[appearance]);
|
|
113
114
|
return (jsxRuntime.jsxs("div", { className: clsx(className, 'tooltip', isTooltipVisible === true && 'tooltip_state_open', isTooltipVisible === false && 'tooltip_state_close', fillClass ||
|
|
114
115
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
|
|
115
|
-
"fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, alignPosition && "tooltip_align-position_".concat(alignPosition), alignDirectionClass, alignClass, alignmentClass, borderWidthClass, borderColorClass, borderTypeClass, elevationClass, sizeClass, arrowPosition && "tooltip_type_arrow tooltip_arrow_position_".concat(arrowPosition), type && "tooltip_type_".concat(type), set && "tooltip_set_".concat(set), widthClass),
|
|
116
|
+
"fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, alignPosition && "tooltip_align-position_".concat(alignPosition), alignDirectionClass, alignClass, alignmentClass, borderWidthClass, borderColorClass, borderTypeClass, elevationClass, sizeClass, arrowPosition && "tooltip_type_arrow tooltip_arrow_position_".concat(arrowPosition), type && "tooltip_type_".concat(type), set && "tooltip_set_".concat(set), widthClass), ref: tooltipElementRef, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [before, jsxRuntime.jsxs("div", { className: "tooltip__inner", children: [title && (jsxRuntime.jsx(Title.Title, { className: "tooltip__title", size: titleSize, textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), textWeight: titleTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextWeight), children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "tooltip__text", size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), children] }), after] }));
|
|
116
117
|
});
|
|
117
118
|
|
|
118
119
|
exports.Tooltip = Tooltip;
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import React, { useRef, useState, useCallback, useImperativeHandle } from 'react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
|
+
import { tooltipAppearance } from './appearance/Tooltip.js';
|
|
4
5
|
import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
|
|
5
6
|
import { useStyles } from './hooks/useStyles.js';
|
|
6
|
-
import { T as Text } from './Text-
|
|
7
|
-
import { T as Title } from './Title-
|
|
7
|
+
import { T as Text } from './Text-kxGZButz.js';
|
|
8
|
+
import { T as Title } from './Title-CQ_Fr1hO.js';
|
|
8
9
|
|
|
9
10
|
var tooltipConfig = {
|
|
10
|
-
appearance:
|
|
11
|
+
appearance: tooltipAppearance,
|
|
11
12
|
setAppearance: function (newComponent) {
|
|
12
13
|
tooltipConfig.appearance = newComponent;
|
|
13
14
|
},
|
|
@@ -110,7 +111,7 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
|
|
|
110
111
|
var appearanceConfig = (appearance && tooltipConfig.appearance && tooltipConfig.appearance[appearance]);
|
|
111
112
|
return (jsxs("div", { className: clsx(className, 'tooltip', isTooltipVisible === true && 'tooltip_state_open', isTooltipVisible === false && 'tooltip_state_close', fillClass ||
|
|
112
113
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
|
|
113
|
-
"fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, alignPosition && "tooltip_align-position_".concat(alignPosition), alignDirectionClass, alignClass, alignmentClass, borderWidthClass, borderColorClass, borderTypeClass, elevationClass, sizeClass, arrowPosition && "tooltip_type_arrow tooltip_arrow_position_".concat(arrowPosition), type && "tooltip_type_".concat(type), set && "tooltip_set_".concat(set), widthClass),
|
|
114
|
+
"fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, alignPosition && "tooltip_align-position_".concat(alignPosition), alignDirectionClass, alignClass, alignmentClass, borderWidthClass, borderColorClass, borderTypeClass, elevationClass, sizeClass, arrowPosition && "tooltip_type_arrow tooltip_arrow_position_".concat(arrowPosition), type && "tooltip_type_".concat(type), set && "tooltip_set_".concat(set), widthClass), ref: tooltipElementRef, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [before, jsxs("div", { className: "tooltip__inner", children: [title && (jsx(Title, { className: "tooltip__title", size: titleSize, textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), textWeight: titleTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextWeight), children: title })), text && (jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), children] }), after] }));
|
|
114
115
|
});
|
|
115
116
|
|
|
116
117
|
export { Tooltip as T, tooltipConfig as t };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
var badgeAppearance = {
|
|
2
|
+
surfacePrimary: {
|
|
3
|
+
fill: 'surfacePrimary',
|
|
4
|
+
fillHover: 'surfacePrimaryHover',
|
|
5
|
+
textColor: 'surfaceTextPrimary',
|
|
6
|
+
},
|
|
7
|
+
surfaceSecondary: {
|
|
8
|
+
fill: 'surfaceSecondary',
|
|
9
|
+
fillHover: 'surfaceSecondaryHover',
|
|
10
|
+
textColor: 'surfaceTextPrimary',
|
|
11
|
+
},
|
|
12
|
+
surfaceTertiary: {
|
|
13
|
+
fill: 'surfaceTertiary',
|
|
14
|
+
fillHover: 'surfaceTertiaryHover',
|
|
15
|
+
textColor: 'surfaceTextPrimary',
|
|
16
|
+
},
|
|
17
|
+
surfaceQuaternary: {
|
|
18
|
+
fill: 'surfaceQuaternary',
|
|
19
|
+
fillHover: 'surfaceTertiaryHover',
|
|
20
|
+
textColor: 'surfaceTextInverse',
|
|
21
|
+
},
|
|
22
|
+
accent: {
|
|
23
|
+
fill: 'accentPrimary',
|
|
24
|
+
fillHover: 'accentPrimaryHover',
|
|
25
|
+
textColor: 'accentTextPrimary',
|
|
26
|
+
},
|
|
27
|
+
primary: {
|
|
28
|
+
fill: 'primaryPrimary',
|
|
29
|
+
fillHover: 'primaryPrimaryHover',
|
|
30
|
+
textColor: 'primaryTextPrimary',
|
|
31
|
+
},
|
|
32
|
+
secondary: {
|
|
33
|
+
fill: 'secondaryPrimary',
|
|
34
|
+
fillHover: 'secondaryPrimaryHover',
|
|
35
|
+
textColor: 'secondaryTextPrimary',
|
|
36
|
+
},
|
|
37
|
+
disabled: {
|
|
38
|
+
fill: 'accentDisabled',
|
|
39
|
+
fillHover: 'none',
|
|
40
|
+
textColor: 'accentTextDisabled',
|
|
41
|
+
},
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export { badgeAppearance };
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
var buttonAppearance = {
|
|
2
|
+
dev: {
|
|
3
|
+
fill: 'surfaceSecondary',
|
|
4
|
+
fillHover: 'surfaceSecondaryHover',
|
|
5
|
+
label: 'Button',
|
|
6
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
7
|
+
labelTextSize: 'l',
|
|
8
|
+
shape: 'rounded',
|
|
9
|
+
size: 'xxl',
|
|
10
|
+
},
|
|
11
|
+
accent: {
|
|
12
|
+
fill: 'accentPrimary',
|
|
13
|
+
fillHover: 'accentPrimaryHover',
|
|
14
|
+
labelTextColor: 'accentTextPrimary',
|
|
15
|
+
labelTextColorHover: 'accentTextPrimary',
|
|
16
|
+
loaderFill: 'accentPrimary',
|
|
17
|
+
loaderItemFill: 'accentItemPrimary',
|
|
18
|
+
},
|
|
19
|
+
primary: {
|
|
20
|
+
fill: 'primaryPrimary',
|
|
21
|
+
fillHover: 'primaryPrimaryHover',
|
|
22
|
+
labelTextColor: 'primaryTextPrimary',
|
|
23
|
+
},
|
|
24
|
+
secondary: {
|
|
25
|
+
fill: 'secondaryPrimary',
|
|
26
|
+
fillHover: 'secondaryPrimaryHover',
|
|
27
|
+
labelTextColor: 'secondaryTextPrimary',
|
|
28
|
+
},
|
|
29
|
+
surfacePrimary: {
|
|
30
|
+
fill: 'surfacePrimary',
|
|
31
|
+
fillHover: 'surfacePrimaryHover',
|
|
32
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
33
|
+
},
|
|
34
|
+
surfaceSecondary: {
|
|
35
|
+
fill: 'surfaceSecondary',
|
|
36
|
+
fillHover: 'surfaceSecondaryHover',
|
|
37
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
38
|
+
loaderFill: 'surfaceSecondary',
|
|
39
|
+
loaderItemFill: 'surfaceItemPrimary',
|
|
40
|
+
},
|
|
41
|
+
surfaceTertiary: {
|
|
42
|
+
fill: 'surfaceTertiary',
|
|
43
|
+
fillHover: 'surfaceTertiaryHover',
|
|
44
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
45
|
+
},
|
|
46
|
+
surfaceDisabled: {
|
|
47
|
+
fill: 'surfaceDisabled',
|
|
48
|
+
fillHover: 'surfaceDisabled',
|
|
49
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
50
|
+
},
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
export { buttonAppearance };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
var checkboxAppearance = {
|
|
2
|
+
dev: {
|
|
3
|
+
descTextColor: 'surfaceTextPrimary',
|
|
4
|
+
descTextSize: 'm',
|
|
5
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
6
|
+
labelTextSize: 'm',
|
|
7
|
+
stateBorderColor: 'surfaceBorderQuaternary',
|
|
8
|
+
stateBorderWidth: '1',
|
|
9
|
+
stateCheckmarkFill: 'accentItemPrimary',
|
|
10
|
+
stateFillChecked: 'accentPrimary',
|
|
11
|
+
stateShape: 'rounded',
|
|
12
|
+
},
|
|
13
|
+
};
|
|
14
|
+
var checkboxState = {
|
|
15
|
+
normal: {
|
|
16
|
+
borderColor: 'surfaceBorderQuaternary',
|
|
17
|
+
placeholderTextColor: 'secondaryTextSecondary',
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export { checkboxAppearance, checkboxState };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
var chipsAppearance = {
|
|
2
|
+
accent: {
|
|
3
|
+
borderColor: 'accentBorderSecondary',
|
|
4
|
+
fill: 'accentPrimary',
|
|
5
|
+
fillHover: 'accentPrimaryHover',
|
|
6
|
+
labelTextColor: 'accentTextPrimary',
|
|
7
|
+
},
|
|
8
|
+
primary: {
|
|
9
|
+
borderColor: 'primaryBorderSecondary',
|
|
10
|
+
fill: 'primaryPrimary',
|
|
11
|
+
fillHover: 'primaryPrimaryHover',
|
|
12
|
+
labelTextColor: 'primaryTextPrimary',
|
|
13
|
+
},
|
|
14
|
+
secondary: {
|
|
15
|
+
borderColor: 'secondaryBorderSecondary',
|
|
16
|
+
fill: 'secondaryPrimary',
|
|
17
|
+
fillHover: 'secondaryPrimaryHover',
|
|
18
|
+
labelTextColor: 'secondaryTextPrimary',
|
|
19
|
+
},
|
|
20
|
+
surfacePrimary: {
|
|
21
|
+
borderColor: 'surfaceBorderTertiary',
|
|
22
|
+
fill: 'surfacePrimary',
|
|
23
|
+
fillHover: 'surfacePrimaryHover',
|
|
24
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
25
|
+
},
|
|
26
|
+
surfaceSecondary: {
|
|
27
|
+
borderColor: 'surfaceBorderSecondary',
|
|
28
|
+
fill: 'surfaceSecondary',
|
|
29
|
+
fillHover: 'surfaceSecondaryHover',
|
|
30
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
31
|
+
},
|
|
32
|
+
surfaceTertiary: {
|
|
33
|
+
borderColor: 'surfaceBorderTertiary',
|
|
34
|
+
fill: 'surfaceTertiary',
|
|
35
|
+
fillHover: 'surfaceTertiaryHover',
|
|
36
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
37
|
+
},
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
export { chipsAppearance };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
var choiceAppearance = {
|
|
2
|
+
dev: {
|
|
3
|
+
borderColor: 'surfaceBorderTertiary',
|
|
4
|
+
fill: 'surfacePrimary',
|
|
5
|
+
fillActive: 'surfaceTertiary',
|
|
6
|
+
fillHover: 'surfacePrimaryHover',
|
|
7
|
+
labelTextActiveColor: 'surfaceTextPrimary',
|
|
8
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
9
|
+
labelTextSize: 'm',
|
|
10
|
+
shape: 'rounded',
|
|
11
|
+
size: 'normal',
|
|
12
|
+
},
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export { choiceAppearance };
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
var inputAppearance = {
|
|
2
|
+
dev: {
|
|
3
|
+
borderColor: 'surfaceBorderTertiary',
|
|
4
|
+
placeholderTextColor: 'surfaceTextSecondary',
|
|
5
|
+
shape: 'rounded',
|
|
6
|
+
size: 'm',
|
|
7
|
+
textColor: 'surfaceTextPrimary',
|
|
8
|
+
textSize: 'm',
|
|
9
|
+
},
|
|
10
|
+
};
|
|
11
|
+
var inputState = {
|
|
12
|
+
active: {
|
|
13
|
+
borderColor: 'surfaceBorderActive',
|
|
14
|
+
placeholderTextColor: 'secondaryTextSecondary',
|
|
15
|
+
},
|
|
16
|
+
activeFilled: {
|
|
17
|
+
borderColor: 'surfaceBorderActive',
|
|
18
|
+
textColor: 'surfaceTextPrimary',
|
|
19
|
+
},
|
|
20
|
+
disabled: {
|
|
21
|
+
borderColor: 'surfaceBorderDisabled',
|
|
22
|
+
borderColorHover: 'surfaceBorderDisabled',
|
|
23
|
+
placeholderTextColor: 'surfaceTextDisabled',
|
|
24
|
+
textColor: 'surfaceTextPrimary',
|
|
25
|
+
},
|
|
26
|
+
error: {
|
|
27
|
+
borderColor: 'errorBorderPrimary',
|
|
28
|
+
placeholderTextColor: 'secondaryTextSecondary',
|
|
29
|
+
},
|
|
30
|
+
errorFilled: {
|
|
31
|
+
borderColor: 'errorBorderPrimary',
|
|
32
|
+
textColor: 'surfaceTextPrimary',
|
|
33
|
+
},
|
|
34
|
+
filled: {
|
|
35
|
+
borderColor: 'surfaceBorderQuaternary',
|
|
36
|
+
textColor: 'surfaceTextPrimary',
|
|
37
|
+
},
|
|
38
|
+
normal: {
|
|
39
|
+
borderColor: 'surfaceBorderQuaternary',
|
|
40
|
+
placeholderTextColor: 'secondaryTextSecondary',
|
|
41
|
+
},
|
|
42
|
+
readonly: {
|
|
43
|
+
borderColor: 'surfaceBorderDisabled',
|
|
44
|
+
textColor: 'surfaceTextPrimary',
|
|
45
|
+
},
|
|
46
|
+
require: {
|
|
47
|
+
borderColor: 'surfaceBorderActive',
|
|
48
|
+
textColor: 'surfaceTextPrimary',
|
|
49
|
+
},
|
|
50
|
+
success: {
|
|
51
|
+
borderColor: 'successBorderPrimary',
|
|
52
|
+
textColor: 'surfaceTextPrimary',
|
|
53
|
+
},
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
export { inputAppearance, inputState };
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
var InputPasswordAppearance = {
|
|
2
|
+
dev: {
|
|
3
|
+
borderColor: 'surfaceBorderTertiary',
|
|
4
|
+
placeholderTextColor: 'surfaceTextSecondary',
|
|
5
|
+
shape: 'rounded',
|
|
6
|
+
size: 'm',
|
|
7
|
+
textColor: 'surfaceTextPrimary',
|
|
8
|
+
textSize: 'm',
|
|
9
|
+
},
|
|
10
|
+
};
|
|
11
|
+
var InputPasswordState = {
|
|
12
|
+
active: {
|
|
13
|
+
borderColor: 'surfaceBorderActive',
|
|
14
|
+
placeholderTextColor: 'secondaryTextSecondary',
|
|
15
|
+
},
|
|
16
|
+
activeFilled: {
|
|
17
|
+
borderColor: 'surfaceBorderActive',
|
|
18
|
+
textColor: 'surfaceTextPrimary',
|
|
19
|
+
},
|
|
20
|
+
disabled: {
|
|
21
|
+
borderColor: 'surfaceBorderDisabled',
|
|
22
|
+
placeholderTextColor: 'surfaceTextDisabled',
|
|
23
|
+
textColor: 'surfaceTextPrimary',
|
|
24
|
+
},
|
|
25
|
+
error: {
|
|
26
|
+
borderColor: 'errorBorderPrimary',
|
|
27
|
+
placeholderTextColor: 'secondaryTextSecondary',
|
|
28
|
+
},
|
|
29
|
+
errorFilled: {
|
|
30
|
+
borderColor: 'errorBorderPrimary',
|
|
31
|
+
textColor: 'surfaceTextPrimary',
|
|
32
|
+
},
|
|
33
|
+
filled: {
|
|
34
|
+
borderColor: 'surfaceBorderQuaternary',
|
|
35
|
+
textColor: 'surfaceTextPrimary',
|
|
36
|
+
},
|
|
37
|
+
normal: {
|
|
38
|
+
borderColor: 'surfaceBorderQuaternary',
|
|
39
|
+
placeholderTextColor: 'secondaryTextSecondary',
|
|
40
|
+
},
|
|
41
|
+
readonly: {
|
|
42
|
+
borderColor: 'surfaceBorderDisabled',
|
|
43
|
+
textColor: 'surfaceTextPrimary',
|
|
44
|
+
},
|
|
45
|
+
require: {
|
|
46
|
+
borderColor: 'surfaceBorderActive',
|
|
47
|
+
textColor: 'surfaceTextPrimary',
|
|
48
|
+
},
|
|
49
|
+
success: {
|
|
50
|
+
borderColor: 'successBorderPrimary',
|
|
51
|
+
textColor: 'surfaceTextPrimary',
|
|
52
|
+
},
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
export { InputPasswordAppearance, InputPasswordState };
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
var labelAppearance = {
|
|
2
|
+
dev: {
|
|
3
|
+
fill: 'surfaceSecondary',
|
|
4
|
+
label: 'Label',
|
|
5
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
6
|
+
labelTextSize: 'm',
|
|
7
|
+
shape: 'rounded',
|
|
8
|
+
size: 'l',
|
|
9
|
+
},
|
|
10
|
+
accent: {
|
|
11
|
+
fill: 'accentPrimary',
|
|
12
|
+
labelTextColor: 'accentTextPrimary',
|
|
13
|
+
labelTextColorHover: 'accentTextPrimary',
|
|
14
|
+
},
|
|
15
|
+
primary: {
|
|
16
|
+
fill: 'primaryPrimary',
|
|
17
|
+
labelTextColor: 'primaryTextPrimary',
|
|
18
|
+
labelTextColorHover: 'primaryTextPrimary',
|
|
19
|
+
},
|
|
20
|
+
secondary: {
|
|
21
|
+
fill: 'secondaryPrimary',
|
|
22
|
+
labelTextColor: 'secondaryTextPrimary',
|
|
23
|
+
labelTextColorHover: 'secondaryTextPrimary',
|
|
24
|
+
},
|
|
25
|
+
surfacePrimary: {
|
|
26
|
+
fill: 'surfacePrimary',
|
|
27
|
+
fillHover: 'surfacePrimaryHover',
|
|
28
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
29
|
+
labelTextColorHover: 'surfaceTextPrimary',
|
|
30
|
+
},
|
|
31
|
+
surfaceSecondary: {
|
|
32
|
+
fill: 'surfaceSecondary',
|
|
33
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
34
|
+
labelTextColorHover: 'surfaceTextPrimary',
|
|
35
|
+
},
|
|
36
|
+
surfaceTertiary: {
|
|
37
|
+
fill: 'surfaceTertiary',
|
|
38
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
39
|
+
labelTextColorHover: 'surfaceTextPrimary',
|
|
40
|
+
},
|
|
41
|
+
surfaceQuaternary: {
|
|
42
|
+
fill: 'surfaceQuaternary',
|
|
43
|
+
labelTextColor: 'surfaceTextInverse',
|
|
44
|
+
labelTextColorHover: 'surfaceTextInverse',
|
|
45
|
+
},
|
|
46
|
+
gradientPrimary: {
|
|
47
|
+
fill: 'gradientPrimary',
|
|
48
|
+
labelTextColor: 'surfaceTextInverse',
|
|
49
|
+
labelTextColorHover: 'surfaceTextInverse',
|
|
50
|
+
labelTextWeight: 600,
|
|
51
|
+
},
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
export { labelAppearance };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
var loaderAppearance = {
|
|
2
|
+
accent: {
|
|
3
|
+
fill: 'accentPrimary',
|
|
4
|
+
itemFill: 'accentItemPrimary',
|
|
5
|
+
},
|
|
6
|
+
primary: {
|
|
7
|
+
fill: 'primaryPrimary',
|
|
8
|
+
itemFill: 'primaryItemPrimary',
|
|
9
|
+
},
|
|
10
|
+
secondary: {
|
|
11
|
+
fill: 'secondaryPrimary',
|
|
12
|
+
itemFill: 'secondaryItemPrimary',
|
|
13
|
+
},
|
|
14
|
+
surfacePrimary: {
|
|
15
|
+
fill: 'surfacePrimary',
|
|
16
|
+
itemFill: 'surfaceItemPrimary',
|
|
17
|
+
},
|
|
18
|
+
surfaceSecondary: {
|
|
19
|
+
fill: 'surfaceSecondary',
|
|
20
|
+
itemFill: 'surfaceItemPrimary',
|
|
21
|
+
},
|
|
22
|
+
surfaceTertiary: {
|
|
23
|
+
fill: 'surfaceTertiary',
|
|
24
|
+
itemFill: 'surfaceItemPrimary',
|
|
25
|
+
},
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export { loaderAppearance };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
var notificationItemAppearance = {
|
|
2
|
+
accent: {
|
|
3
|
+
fill: 'accentPrimary',
|
|
4
|
+
textColor: 'accentTextPrimary',
|
|
5
|
+
titleTextColor: 'accentTextPrimary',
|
|
6
|
+
},
|
|
7
|
+
primary: {
|
|
8
|
+
fill: 'primaryPrimary',
|
|
9
|
+
textColor: 'primaryTextPrimary',
|
|
10
|
+
titleTextColor: 'primaryTextPrimary',
|
|
11
|
+
},
|
|
12
|
+
secondary: {
|
|
13
|
+
fill: 'secondaryPrimary',
|
|
14
|
+
textColor: 'secondaryTextPrimary',
|
|
15
|
+
titleTextColor: 'secondaryTextPrimary',
|
|
16
|
+
},
|
|
17
|
+
surfacePrimary: {
|
|
18
|
+
fill: 'surfacePrimary',
|
|
19
|
+
textColor: 'surfaceTextPrimary',
|
|
20
|
+
titleTextColor: 'surfaceTextPrimary',
|
|
21
|
+
},
|
|
22
|
+
surfaceSecondary: {
|
|
23
|
+
fill: 'surfaceSecondary',
|
|
24
|
+
textColor: 'surfaceTextPrimary',
|
|
25
|
+
titleTextColor: 'surfaceTextPrimary',
|
|
26
|
+
},
|
|
27
|
+
surfaceTertiary: {
|
|
28
|
+
fill: 'surfaceTertiary',
|
|
29
|
+
textColor: 'surfaceTextPrimary',
|
|
30
|
+
titleTextColor: 'surfaceTextPrimary',
|
|
31
|
+
},
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export { notificationItemAppearance };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
var radioAppearance = {
|
|
2
|
+
dev: {
|
|
3
|
+
descTextColor: 'surfaceTextPrimary',
|
|
4
|
+
descTextSize: 's',
|
|
5
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
6
|
+
labelTextSize: 'm',
|
|
7
|
+
stateBorderColor: 'surfaceBorderTertiary',
|
|
8
|
+
stateBorderWidth: 1,
|
|
9
|
+
stateCheckmarkFill: 'surfaceItemAccent',
|
|
10
|
+
stateShape: 'circular',
|
|
11
|
+
},
|
|
12
|
+
};
|
|
13
|
+
var radioState = {
|
|
14
|
+
normal: {
|
|
15
|
+
borderColor: 'surfaceBorderQuaternary',
|
|
16
|
+
placeholderTextColor: 'secondaryTextSecondary',
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export { radioAppearance, radioState };
|