@semcore/tag 3.6.2 → 3.6.5
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/CHANGELOG.md +18 -0
- package/lib/cjs/Tag.js +26 -30
- package/lib/cjs/Tag.js.map +1 -1
- package/lib/cjs/style/tag.shadow.css +15 -8
- package/lib/es6/Tag.js +26 -30
- package/lib/es6/Tag.js.map +1 -1
- package/lib/es6/style/tag.shadow.css +15 -8
- package/lib/types/index.d.ts +0 -4
- package/package.json +6 -1
- package/src/{Tag.js → Tag.jsx} +6 -16
- package/src/index.d.ts +0 -4
- package/src/style/tag.shadow.css +15 -8
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.6.5] - 2022-03-14
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.31.2 ~> 3.31.2], `@semcore/icon` [2.19.3 ~> 2.19.4], `@semcore/flex-box` [4.5.0 ~> 4.5.1]).
|
|
10
|
+
|
|
11
|
+
## [3.6.4] - 2022-02-24
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
|
|
15
|
+
- Added repository field to package.json file.
|
|
16
|
+
|
|
17
|
+
## [3.6.3] - 2022-02-22
|
|
18
|
+
|
|
19
|
+
### Fixed
|
|
20
|
+
|
|
21
|
+
- Fixed colors for `primary-warning`.
|
|
22
|
+
|
|
5
23
|
## [3.6.2] - 2022-01-18
|
|
6
24
|
|
|
7
25
|
### Fixed
|
package/lib/cjs/Tag.js
CHANGED
|
@@ -50,31 +50,31 @@ var style = (
|
|
|
50
50
|
/*__reshadow_css_start__*/
|
|
51
51
|
_core.sstyled.insert(
|
|
52
52
|
/*__inner_css_start__*/
|
|
53
|
-
".
|
|
53
|
+
".___STag_3jyff_gg_{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;border-width:1px;border-style:solid;border-color:transparent;border-radius:21px;padding-left:4px;padding-right:4px}.___SText_3jyff_gg_{display:inline-flex;align-items:center;height:100%;padding-left:4px;padding-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}.___SText_3jyff_gg_:not(:only-child):first-child{padding-right:0}.___SText_3jyff_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_3jyff_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_3jyff_gg_{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding-left:4px;padding-right:4px}.___SCircle_3jyff_gg_{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;margin-right:4px}.___STag_3jyff_gg_.__disabled_3jyff_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STag_3jyff_gg_.__interactive_3jyff_gg_{cursor:pointer}.___STag_3jyff_gg_._size_xl_3jyff_gg_{height:42px;min-width:42px;font-size:16px}.___STag_3jyff_gg_._size_xl_3jyff_gg_ .___SCircle_3jyff_gg_{width:28px;height:28px}.___STag_3jyff_gg_._size_l_3jyff_gg_{height:32px;min-width:32px;font-size:14px}.___STag_3jyff_gg_._size_l_3jyff_gg_ .___SCircle_3jyff_gg_{width:24px;height:24px}.___STag_3jyff_gg_._size_m_3jyff_gg_{height:26px;min-width:26px;font-size:12px}.___STag_3jyff_gg_._size_m_3jyff_gg_ .___SCircle_3jyff_gg_{width:20px;height:20px}.___STag_3jyff_gg_._size_s_3jyff_gg_{height:18px;min-width:18px;font-size:10px}.___STag_3jyff_gg_._size_s_3jyff_gg_ .___SCircle_3jyff_gg_{width:12px;height:12px}.___STag_3jyff_gg_._theme_primary-muted_3jyff_gg_{background-color:rgba(224,225,233,.5);color:#6c6e79}.___STag_3jyff_gg_._theme_primary-muted_3jyff_gg_.__active_3jyff_gg_,.___STag_3jyff_gg_._theme_primary-muted_3jyff_gg_.__interactive_3jyff_gg_:active,.___STag_3jyff_gg_._theme_primary-muted_3jyff_gg_.__interactive_3jyff_gg_:hover{background-color:#e0e1e9}.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_{background-color:rgba(255,127,0,.15);color:#ff7f00}.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_.__active_3jyff_gg_,.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_.__interactive_3jyff_gg_:active,.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_.__interactive_3jyff_gg_:hover{background-color:#ff7f00;color:#fff}.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_.__active_3jyff_gg_ .___SClose_3jyff_gg_,.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_.__interactive_3jyff_gg_:active .___SClose_3jyff_gg_,.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_.__interactive_3jyff_gg_:hover .___SClose_3jyff_gg_{color:hsla(0,0%,100%,.15)}.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_.__active_3jyff_gg_ .___SClose_3jyff_gg_:hover,.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_.__interactive_3jyff_gg_:active .___SClose_3jyff_gg_:hover,.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_.__interactive_3jyff_gg_:hover .___SClose_3jyff_gg_:hover{color:#fff}.___STag_3jyff_gg_._theme_primary-invert_3jyff_gg_{background-color:hsla(0,0%,100%,.2);color:#fff}.___STag_3jyff_gg_._theme_primary-invert_3jyff_gg_.__active_3jyff_gg_,.___STag_3jyff_gg_._theme_primary-invert_3jyff_gg_.__interactive_3jyff_gg_:active{background-color:#fff;color:#333333}.___STag_3jyff_gg_._theme_primary-invert_3jyff_gg_.__interactive_3jyff_gg_:hover{background-color:#fff;color:#333333}.___STag_3jyff_gg_._theme_primary-invert_3jyff_gg_.__interactive_3jyff_gg_ .___SClose_3jyff_gg_:hover{color:#333333}.___STag_3jyff_gg_._theme_secondary-muted_3jyff_gg_{background-color:#fff;color:#666666;border-color:#a6b0b3}.___STag_3jyff_gg_._theme_secondary-muted_3jyff_gg_.__interactive_3jyff_gg_:hover{color:#333333}.___STag_3jyff_gg_._theme_secondary-muted_3jyff_gg_.__active_3jyff_gg_,.___STag_3jyff_gg_._theme_secondary-muted_3jyff_gg_.__interactive_3jyff_gg_:active{background-color:#eeeeee;color:#333333}.___STag_3jyff_gg_._theme_secondary-invert_3jyff_gg_{border-color:hsla(0,0%,100%,.2);color:#fff}.___STag_3jyff_gg_._theme_secondary-invert_3jyff_gg_.__interactive_3jyff_gg_:hover{border-color:hsla(0,0%,100%,.5)}.___STag_3jyff_gg_._theme_secondary-invert_3jyff_gg_.__active_3jyff_gg_,.___STag_3jyff_gg_._theme_secondary-invert_3jyff_gg_.__interactive_3jyff_gg_:active{background-color:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.5)}.___STag_3jyff_gg_._theme_custom_3jyff_gg_{color:var(--colorText_s28337);background-color:var(--colorTag_s28337)}.___STag_3jyff_gg_._theme_custom_3jyff_gg_.__active_3jyff_gg_{color:#fff;background-color:var(--colorText_s28337)}.___STag_3jyff_gg_._theme_custom_3jyff_gg_.__interactive_3jyff_gg_:hover{color:#fff;background-color:var(--colorText_s28337)}.___STag_3jyff_gg_._theme_custom_3jyff_gg_.__interactive_3jyff_gg_:active{color:#fff;background-color:var(--colorText_s28337)}.___SClose_3jyff_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:4px}.___SClose_3jyff_gg_._theme_primary-warning_3jyff_gg_{color:rgba(255,127,0,.5)}.___SClose_3jyff_gg_._theme_primary-invert_3jyff_gg_{color:#999}.___SClose_3jyff_gg_._theme_primary-invert_3jyff_gg_:hover{color:#fff}.___SClose_3jyff_gg_._theme_secondary-muted_3jyff_gg_{color:hsla(0,0%,40%,.5)}.___SClose_3jyff_gg_._theme_secondary-muted_3jyff_gg_:hover{color:#333333}.___SClose_3jyff_gg_._theme_secondary-invert_3jyff_gg_{color:hsla(0,0%,100%,.5)}.___SClose_3jyff_gg_._theme_secondary-invert_3jyff_gg_:hover{color:#fff}.___SClose_3jyff_gg_._theme_custom_3jyff_gg_{opacity:.5}.___SClose_3jyff_gg_._theme_custom_3jyff_gg_:hover{opacity:1}"
|
|
54
54
|
/*__inner_css_end__*/
|
|
55
|
-
, "
|
|
55
|
+
, "s28337_gg_")
|
|
56
56
|
/*__reshadow_css_end__*/
|
|
57
57
|
, {
|
|
58
|
-
"__STag": "
|
|
59
|
-
"__SText": "
|
|
60
|
-
"__SAddon": "
|
|
61
|
-
"__SCircle": "
|
|
62
|
-
"_disabled": "
|
|
63
|
-
"_interactive": "
|
|
64
|
-
"_size_xl": "
|
|
65
|
-
"_size_l": "
|
|
66
|
-
"_size_m": "
|
|
67
|
-
"_size_s": "
|
|
68
|
-
"_theme_primary-muted": "_theme_primary-
|
|
69
|
-
"_active": "
|
|
70
|
-
"_theme_primary-warning": "_theme_primary-
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"_theme_secondary-muted": "_theme_secondary-
|
|
74
|
-
"_theme_secondary-invert": "_theme_secondary-
|
|
75
|
-
"_theme_custom": "
|
|
76
|
-
"--colorText": "--
|
|
77
|
-
"--colorTag": "--
|
|
58
|
+
"__STag": "___STag_3jyff_gg_",
|
|
59
|
+
"__SText": "___SText_3jyff_gg_",
|
|
60
|
+
"__SAddon": "___SAddon_3jyff_gg_",
|
|
61
|
+
"__SCircle": "___SCircle_3jyff_gg_",
|
|
62
|
+
"_disabled": "__disabled_3jyff_gg_",
|
|
63
|
+
"_interactive": "__interactive_3jyff_gg_",
|
|
64
|
+
"_size_xl": "_size_xl_3jyff_gg_",
|
|
65
|
+
"_size_l": "_size_l_3jyff_gg_",
|
|
66
|
+
"_size_m": "_size_m_3jyff_gg_",
|
|
67
|
+
"_size_s": "_size_s_3jyff_gg_",
|
|
68
|
+
"_theme_primary-muted": "_theme_primary-muted_3jyff_gg_",
|
|
69
|
+
"_active": "__active_3jyff_gg_",
|
|
70
|
+
"_theme_primary-warning": "_theme_primary-warning_3jyff_gg_",
|
|
71
|
+
"__SClose": "___SClose_3jyff_gg_",
|
|
72
|
+
"_theme_primary-invert": "_theme_primary-invert_3jyff_gg_",
|
|
73
|
+
"_theme_secondary-muted": "_theme_secondary-muted_3jyff_gg_",
|
|
74
|
+
"_theme_secondary-invert": "_theme_secondary-invert_3jyff_gg_",
|
|
75
|
+
"_theme_custom": "_theme_custom_3jyff_gg_",
|
|
76
|
+
"--colorText": "--colorText_s28337",
|
|
77
|
+
"--colorTag": "--colorTag_s28337"
|
|
78
78
|
});
|
|
79
79
|
|
|
80
80
|
function isCustomTheme(use, theme) {
|
|
@@ -104,12 +104,10 @@ var RootTag = /*#__PURE__*/function (_Component) {
|
|
|
104
104
|
value: function getCloseProps() {
|
|
105
105
|
var _this$asProps = this.asProps,
|
|
106
106
|
use = _this$asProps.use,
|
|
107
|
-
theme = _this$asProps.theme
|
|
108
|
-
size = _this$asProps.size;
|
|
107
|
+
theme = _this$asProps.theme;
|
|
109
108
|
return {
|
|
110
109
|
use: use,
|
|
111
|
-
theme: theme
|
|
112
|
-
size: size
|
|
110
|
+
theme: theme
|
|
113
111
|
};
|
|
114
112
|
}
|
|
115
113
|
}, {
|
|
@@ -134,11 +132,10 @@ var RootTag = /*#__PURE__*/function (_Component) {
|
|
|
134
132
|
interactive = false;
|
|
135
133
|
}
|
|
136
134
|
|
|
137
|
-
var useTheme = getThemeName(use, theme);
|
|
138
135
|
var colorTag = theme ? (0, _color.opacity)((0, _color["default"])(theme), 0.5) : '';
|
|
139
136
|
var colorText = color ? (0, _color["default"])(color) : (0, _color["default"])(theme);
|
|
140
137
|
return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STag, _ref6.cn("STag", _objectSpread({}, (0, _core.assignProps)({
|
|
141
|
-
"use:theme":
|
|
138
|
+
"use:theme": getThemeName(use, theme),
|
|
142
139
|
"use:interactive": interactive,
|
|
143
140
|
"colorText": colorText,
|
|
144
141
|
"colorTag": colorTag
|
|
@@ -178,8 +175,7 @@ function Close(props) {
|
|
|
178
175
|
var SClose = _flexBox.Box;
|
|
179
176
|
var styles = props.styles,
|
|
180
177
|
use = props.use,
|
|
181
|
-
theme = props.theme
|
|
182
|
-
size = props.size;
|
|
178
|
+
theme = props.theme;
|
|
183
179
|
return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SClose, _ref8.cn("SClose", _objectSpread({}, (0, _core.assignProps)({
|
|
184
180
|
"use:theme": getThemeName(use, theme),
|
|
185
181
|
"tag": _m["default"]
|
package/lib/cjs/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tag.
|
|
1
|
+
{"version":3,"sources":["../../src/Tag.jsx"],"names":["isCustomTheme","use","theme","type","primary","secondary","includes","getThemeName","RootTag","asProps","STag","Box","Children","styles","color","interactive","disabled","addonLeft","addonRight","colorTag","colorText","Tag","Text","Addon","Component","style","size","props","SText","Close","SClose","CloseM","SAddon","Circle","SCircle"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor, { opacity } from '@semcore/utils/lib/color';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport CloseM from '@semcore/icon/Close/m';\n\nimport style from './style/tag.shadow.css';\n\nfunction isCustomTheme(use, theme) {\n const type = {\n primary: ['muted', 'invert', 'warning'],\n secondary: ['muted', 'invert'],\n };\n return type[use] ? !type[use].includes(theme) : true;\n}\n\nfunction getThemeName(use, theme) {\n return isCustomTheme(use, theme) ? 'custom' : `${use}-${theme}`;\n}\n\nclass RootTag extends Component {\n static displayName = 'Tag';\n static style = style;\n static defaultProps = {\n use: 'secondary',\n theme: 'muted',\n size: 'm',\n };\n\n getCloseProps() {\n const { use, theme } = this.asProps;\n return { use, theme };\n }\n\n render() {\n const STag = Root;\n let { Children, styles, theme, use, color, interactive, disabled, addonLeft, addonRight } =\n this.asProps;\n\n if (disabled) {\n interactive = false;\n }\n\n const colorTag = theme ? opacity(resolveColor(theme), 0.5) : '';\n const colorText = color ? resolveColor(color) : resolveColor(theme);\n\n return sstyled(styles)(\n <STag\n render={Box}\n use:theme={getThemeName(use, theme)}\n use:interactive={interactive}\n colorText={colorText}\n colorTag={colorTag}\n >\n {addonLeft ? <Tag.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Tag.Text, Tag.Addon)}\n {addonRight ? <Tag.Addon tag={addonRight} /> : null}\n </STag>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Root;\n const { styles } = props;\n return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Close(props) {\n const SClose = Root;\n const { styles, use, theme } = props;\n\n return sstyled(styles)(<SClose render={Box} use:theme={getThemeName(use, theme)} tag={CloseM} />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nfunction Circle(props) {\n const SCircle = Root;\n const { styles } = props;\n return sstyled(styles)(<SCircle render={Box} tag=\"span\" />);\n}\n\nconst Tag = createComponent(RootTag, {\n Text,\n Addon,\n Close,\n Circle,\n});\n\nexport default Tag;\n"],"file":"Tag.js"}
|
|
@@ -122,9 +122,20 @@ STag[theme='primary-muted'] {
|
|
|
122
122
|
}
|
|
123
123
|
|
|
124
124
|
STag[theme='primary-warning'] {
|
|
125
|
-
background-color: var(--orange);
|
|
126
|
-
color:
|
|
127
|
-
|
|
125
|
+
background-color: color-mod(var(--orange) a(15%));
|
|
126
|
+
color: var(--orange);
|
|
127
|
+
&[interactive]:hover,
|
|
128
|
+
&[interactive]:active,
|
|
129
|
+
&[active] {
|
|
130
|
+
background-color: var(--orange);
|
|
131
|
+
color: #fff;
|
|
132
|
+
& SClose {
|
|
133
|
+
color: color-mod(#fff a(15%));
|
|
134
|
+
&:hover {
|
|
135
|
+
color: #fff;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
128
139
|
}
|
|
129
140
|
|
|
130
141
|
STag[theme='primary-invert'] {
|
|
@@ -209,11 +220,7 @@ SClose {
|
|
|
209
220
|
}
|
|
210
221
|
|
|
211
222
|
SClose[theme='primary-warning'] {
|
|
212
|
-
color:
|
|
213
|
-
|
|
214
|
-
&:hover {
|
|
215
|
-
color: #fff;
|
|
216
|
-
}
|
|
223
|
+
color: color-mod(var(--orange) a(50%));
|
|
217
224
|
}
|
|
218
225
|
|
|
219
226
|
SClose[theme='primary-invert'] {
|
package/lib/es6/Tag.js
CHANGED
|
@@ -31,31 +31,31 @@ var style = (
|
|
|
31
31
|
/*__reshadow_css_start__*/
|
|
32
32
|
_sstyled.insert(
|
|
33
33
|
/*__inner_css_start__*/
|
|
34
|
-
".
|
|
34
|
+
".___STag_3jyff_gg_{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;border-width:1px;border-style:solid;border-color:transparent;border-radius:21px;padding-left:4px;padding-right:4px}.___SText_3jyff_gg_{display:inline-flex;align-items:center;height:100%;padding-left:4px;padding-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}.___SText_3jyff_gg_:not(:only-child):first-child{padding-right:0}.___SText_3jyff_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_3jyff_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_3jyff_gg_{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding-left:4px;padding-right:4px}.___SCircle_3jyff_gg_{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;margin-right:4px}.___STag_3jyff_gg_.__disabled_3jyff_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STag_3jyff_gg_.__interactive_3jyff_gg_{cursor:pointer}.___STag_3jyff_gg_._size_xl_3jyff_gg_{height:42px;min-width:42px;font-size:16px}.___STag_3jyff_gg_._size_xl_3jyff_gg_ .___SCircle_3jyff_gg_{width:28px;height:28px}.___STag_3jyff_gg_._size_l_3jyff_gg_{height:32px;min-width:32px;font-size:14px}.___STag_3jyff_gg_._size_l_3jyff_gg_ .___SCircle_3jyff_gg_{width:24px;height:24px}.___STag_3jyff_gg_._size_m_3jyff_gg_{height:26px;min-width:26px;font-size:12px}.___STag_3jyff_gg_._size_m_3jyff_gg_ .___SCircle_3jyff_gg_{width:20px;height:20px}.___STag_3jyff_gg_._size_s_3jyff_gg_{height:18px;min-width:18px;font-size:10px}.___STag_3jyff_gg_._size_s_3jyff_gg_ .___SCircle_3jyff_gg_{width:12px;height:12px}.___STag_3jyff_gg_._theme_primary-muted_3jyff_gg_{background-color:rgba(224,225,233,.5);color:#6c6e79}.___STag_3jyff_gg_._theme_primary-muted_3jyff_gg_.__active_3jyff_gg_,.___STag_3jyff_gg_._theme_primary-muted_3jyff_gg_.__interactive_3jyff_gg_:active,.___STag_3jyff_gg_._theme_primary-muted_3jyff_gg_.__interactive_3jyff_gg_:hover{background-color:#e0e1e9}.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_{background-color:rgba(255,127,0,.15);color:#ff7f00}.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_.__active_3jyff_gg_,.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_.__interactive_3jyff_gg_:active,.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_.__interactive_3jyff_gg_:hover{background-color:#ff7f00;color:#fff}.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_.__active_3jyff_gg_ .___SClose_3jyff_gg_,.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_.__interactive_3jyff_gg_:active .___SClose_3jyff_gg_,.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_.__interactive_3jyff_gg_:hover .___SClose_3jyff_gg_{color:hsla(0,0%,100%,.15)}.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_.__active_3jyff_gg_ .___SClose_3jyff_gg_:hover,.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_.__interactive_3jyff_gg_:active .___SClose_3jyff_gg_:hover,.___STag_3jyff_gg_._theme_primary-warning_3jyff_gg_.__interactive_3jyff_gg_:hover .___SClose_3jyff_gg_:hover{color:#fff}.___STag_3jyff_gg_._theme_primary-invert_3jyff_gg_{background-color:hsla(0,0%,100%,.2);color:#fff}.___STag_3jyff_gg_._theme_primary-invert_3jyff_gg_.__active_3jyff_gg_,.___STag_3jyff_gg_._theme_primary-invert_3jyff_gg_.__interactive_3jyff_gg_:active{background-color:#fff;color:#333333}.___STag_3jyff_gg_._theme_primary-invert_3jyff_gg_.__interactive_3jyff_gg_:hover{background-color:#fff;color:#333333}.___STag_3jyff_gg_._theme_primary-invert_3jyff_gg_.__interactive_3jyff_gg_ .___SClose_3jyff_gg_:hover{color:#333333}.___STag_3jyff_gg_._theme_secondary-muted_3jyff_gg_{background-color:#fff;color:#666666;border-color:#a6b0b3}.___STag_3jyff_gg_._theme_secondary-muted_3jyff_gg_.__interactive_3jyff_gg_:hover{color:#333333}.___STag_3jyff_gg_._theme_secondary-muted_3jyff_gg_.__active_3jyff_gg_,.___STag_3jyff_gg_._theme_secondary-muted_3jyff_gg_.__interactive_3jyff_gg_:active{background-color:#eeeeee;color:#333333}.___STag_3jyff_gg_._theme_secondary-invert_3jyff_gg_{border-color:hsla(0,0%,100%,.2);color:#fff}.___STag_3jyff_gg_._theme_secondary-invert_3jyff_gg_.__interactive_3jyff_gg_:hover{border-color:hsla(0,0%,100%,.5)}.___STag_3jyff_gg_._theme_secondary-invert_3jyff_gg_.__active_3jyff_gg_,.___STag_3jyff_gg_._theme_secondary-invert_3jyff_gg_.__interactive_3jyff_gg_:active{background-color:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.5)}.___STag_3jyff_gg_._theme_custom_3jyff_gg_{color:var(--colorText_s28337);background-color:var(--colorTag_s28337)}.___STag_3jyff_gg_._theme_custom_3jyff_gg_.__active_3jyff_gg_{color:#fff;background-color:var(--colorText_s28337)}.___STag_3jyff_gg_._theme_custom_3jyff_gg_.__interactive_3jyff_gg_:hover{color:#fff;background-color:var(--colorText_s28337)}.___STag_3jyff_gg_._theme_custom_3jyff_gg_.__interactive_3jyff_gg_:active{color:#fff;background-color:var(--colorText_s28337)}.___SClose_3jyff_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:4px}.___SClose_3jyff_gg_._theme_primary-warning_3jyff_gg_{color:rgba(255,127,0,.5)}.___SClose_3jyff_gg_._theme_primary-invert_3jyff_gg_{color:#999}.___SClose_3jyff_gg_._theme_primary-invert_3jyff_gg_:hover{color:#fff}.___SClose_3jyff_gg_._theme_secondary-muted_3jyff_gg_{color:hsla(0,0%,40%,.5)}.___SClose_3jyff_gg_._theme_secondary-muted_3jyff_gg_:hover{color:#333333}.___SClose_3jyff_gg_._theme_secondary-invert_3jyff_gg_{color:hsla(0,0%,100%,.5)}.___SClose_3jyff_gg_._theme_secondary-invert_3jyff_gg_:hover{color:#fff}.___SClose_3jyff_gg_._theme_custom_3jyff_gg_{opacity:.5}.___SClose_3jyff_gg_._theme_custom_3jyff_gg_:hover{opacity:1}"
|
|
35
35
|
/*__inner_css_end__*/
|
|
36
|
-
, "
|
|
36
|
+
, "s28337_gg_")
|
|
37
37
|
/*__reshadow_css_end__*/
|
|
38
38
|
, {
|
|
39
|
-
"__STag": "
|
|
40
|
-
"__SText": "
|
|
41
|
-
"__SAddon": "
|
|
42
|
-
"__SCircle": "
|
|
43
|
-
"_disabled": "
|
|
44
|
-
"_interactive": "
|
|
45
|
-
"_size_xl": "
|
|
46
|
-
"_size_l": "
|
|
47
|
-
"_size_m": "
|
|
48
|
-
"_size_s": "
|
|
49
|
-
"_theme_primary-muted": "_theme_primary-
|
|
50
|
-
"_active": "
|
|
51
|
-
"_theme_primary-warning": "_theme_primary-
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"_theme_secondary-muted": "_theme_secondary-
|
|
55
|
-
"_theme_secondary-invert": "_theme_secondary-
|
|
56
|
-
"_theme_custom": "
|
|
57
|
-
"--colorText": "--
|
|
58
|
-
"--colorTag": "--
|
|
39
|
+
"__STag": "___STag_3jyff_gg_",
|
|
40
|
+
"__SText": "___SText_3jyff_gg_",
|
|
41
|
+
"__SAddon": "___SAddon_3jyff_gg_",
|
|
42
|
+
"__SCircle": "___SCircle_3jyff_gg_",
|
|
43
|
+
"_disabled": "__disabled_3jyff_gg_",
|
|
44
|
+
"_interactive": "__interactive_3jyff_gg_",
|
|
45
|
+
"_size_xl": "_size_xl_3jyff_gg_",
|
|
46
|
+
"_size_l": "_size_l_3jyff_gg_",
|
|
47
|
+
"_size_m": "_size_m_3jyff_gg_",
|
|
48
|
+
"_size_s": "_size_s_3jyff_gg_",
|
|
49
|
+
"_theme_primary-muted": "_theme_primary-muted_3jyff_gg_",
|
|
50
|
+
"_active": "__active_3jyff_gg_",
|
|
51
|
+
"_theme_primary-warning": "_theme_primary-warning_3jyff_gg_",
|
|
52
|
+
"__SClose": "___SClose_3jyff_gg_",
|
|
53
|
+
"_theme_primary-invert": "_theme_primary-invert_3jyff_gg_",
|
|
54
|
+
"_theme_secondary-muted": "_theme_secondary-muted_3jyff_gg_",
|
|
55
|
+
"_theme_secondary-invert": "_theme_secondary-invert_3jyff_gg_",
|
|
56
|
+
"_theme_custom": "_theme_custom_3jyff_gg_",
|
|
57
|
+
"--colorText": "--colorText_s28337",
|
|
58
|
+
"--colorTag": "--colorTag_s28337"
|
|
59
59
|
});
|
|
60
60
|
|
|
61
61
|
function isCustomTheme(use, theme) {
|
|
@@ -86,12 +86,10 @@ var RootTag = /*#__PURE__*/function (_Component) {
|
|
|
86
86
|
value: function getCloseProps() {
|
|
87
87
|
var _this$asProps = this.asProps,
|
|
88
88
|
use = _this$asProps.use,
|
|
89
|
-
theme = _this$asProps.theme
|
|
90
|
-
size = _this$asProps.size;
|
|
89
|
+
theme = _this$asProps.theme;
|
|
91
90
|
return {
|
|
92
91
|
use: use,
|
|
93
|
-
theme: theme
|
|
94
|
-
size: size
|
|
92
|
+
theme: theme
|
|
95
93
|
};
|
|
96
94
|
}
|
|
97
95
|
}, {
|
|
@@ -116,11 +114,10 @@ var RootTag = /*#__PURE__*/function (_Component) {
|
|
|
116
114
|
interactive = false;
|
|
117
115
|
}
|
|
118
116
|
|
|
119
|
-
var useTheme = getThemeName(use, theme);
|
|
120
117
|
var colorTag = theme ? opacity(resolveColor(theme), 0.5) : '';
|
|
121
118
|
var colorText = color ? resolveColor(color) : resolveColor(theme);
|
|
122
119
|
return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(STag, _ref6.cn("STag", _objectSpread({}, _assignProps({
|
|
123
|
-
"use:theme":
|
|
120
|
+
"use:theme": getThemeName(use, theme),
|
|
124
121
|
"use:interactive": interactive,
|
|
125
122
|
"colorText": colorText,
|
|
126
123
|
"colorTag": colorTag
|
|
@@ -163,8 +160,7 @@ function Close(props) {
|
|
|
163
160
|
var SClose = Box;
|
|
164
161
|
var styles = props.styles,
|
|
165
162
|
use = props.use,
|
|
166
|
-
theme = props.theme
|
|
167
|
-
size = props.size;
|
|
163
|
+
theme = props.theme;
|
|
168
164
|
return _ref8 = sstyled(styles), /*#__PURE__*/React.createElement(SClose, _ref8.cn("SClose", _objectSpread({}, _assignProps3({
|
|
169
165
|
"use:theme": getThemeName(use, theme),
|
|
170
166
|
"tag": CloseM
|
package/lib/es6/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tag.
|
|
1
|
+
{"version":3,"sources":["../../src/Tag.jsx"],"names":["React","createComponent","Component","sstyled","Root","Box","resolveColor","opacity","addonTextChildren","CloseM","isCustomTheme","use","theme","type","primary","secondary","includes","getThemeName","RootTag","asProps","STag","Children","styles","color","interactive","disabled","addonLeft","addonRight","colorTag","colorText","Tag","Text","Addon","style","size","props","SText","Close","SClose","SAddon","Circle","SCircle"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,YAAP,IAAuBC,OAAvB,QAAsC,0BAAtC;AACA,OAAOC,iBAAP,MAA8B,sCAA9B;AACA,OAAOC,MAAP,MAAmB,uBAAnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAASC,aAAT,CAAuBC,GAAvB,EAA4BC,KAA5B,EAAmC;AACjC,MAAMC,IAAI,GAAG;AACXC,IAAAA,OAAO,EAAE,CAAC,OAAD,EAAU,QAAV,EAAoB,SAApB,CADE;AAEXC,IAAAA,SAAS,EAAE,CAAC,OAAD,EAAU,QAAV;AAFA,GAAb;AAIA,SAAOF,IAAI,CAACF,GAAD,CAAJ,GAAY,CAACE,IAAI,CAACF,GAAD,CAAJ,CAAUK,QAAV,CAAmBJ,KAAnB,CAAb,GAAyC,IAAhD;AACD;;AAED,SAASK,YAAT,CAAsBN,GAAtB,EAA2BC,KAA3B,EAAkC;AAChC,SAAOF,aAAa,CAACC,GAAD,EAAMC,KAAN,CAAb,GAA4B,QAA5B,aAA0CD,GAA1C,cAAiDC,KAAjD,CAAP;AACD;;IAEKM,O;;;;;;;;;;;;;WASJ,yBAAgB;AACd,0BAAuB,KAAKC,OAA5B;AAAA,UAAQR,GAAR,iBAAQA,GAAR;AAAA,UAAaC,KAAb,iBAAaA,KAAb;AACA,aAAO;AAAED,QAAAA,GAAG,EAAHA,GAAF;AAAOC,QAAAA,KAAK,EAALA;AAAP,OAAP;AACD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMQ,IAAI,GAaEf,GAbZ;AACA,2BACE,KAAKc,OADP;AAAA,UAAME,QAAN,kBAAMA,QAAN;AAAA,UAAgBC,MAAhB,kBAAgBA,MAAhB;AAAA,UAAwBV,KAAxB,kBAAwBA,KAAxB;AAAA,UAA+BD,GAA/B,kBAA+BA,GAA/B;AAAA,UAAoCY,KAApC,kBAAoCA,KAApC;AAAA,UAA2CC,WAA3C,kBAA2CA,WAA3C;AAAA,UAAwDC,QAAxD,kBAAwDA,QAAxD;AAAA,UAAkEC,SAAlE,kBAAkEA,SAAlE;AAAA,UAA6EC,UAA7E,kBAA6EA,UAA7E;;AAGA,UAAIF,QAAJ,EAAc;AACZD,QAAAA,WAAW,GAAG,KAAd;AACD;;AAED,UAAMI,QAAQ,GAAGhB,KAAK,GAAGL,OAAO,CAACD,YAAY,CAACM,KAAD,CAAb,EAAsB,GAAtB,CAAV,GAAuC,EAA7D;AACA,UAAMiB,SAAS,GAAGN,KAAK,GAAGjB,YAAY,CAACiB,KAAD,CAAf,GAAyBjB,YAAY,CAACM,KAAD,CAA5D;AAEA,qBAAOT,OAAO,CAACmB,MAAD,CAAd,eACE,oBAAC,IAAD;AAAA,qBAEaL,YAAY,CAACN,GAAD,EAAMC,KAAN,CAFzB;AAAA,2BAGmBY,WAHnB;AAAA,qBAIaK,SAJb;AAAA,oBAKYD;AALZ,kBAOGF,SAAS,gBAAG,oBAAC,GAAD,CAAK,KAAL;AAAW,QAAA,GAAG,EAAEA;AAAhB,QAAH,GAAmC,IAP/C,EAQGlB,iBAAiB,CAACa,QAAD,EAAWS,GAAG,CAACC,IAAf,EAAqBD,GAAG,CAACE,KAAzB,CARpB,EASGL,UAAU,gBAAG,oBAAC,GAAD,CAAK,KAAL;AAAW,QAAA,GAAG,EAAEA;AAAhB,QAAH,GAAoC,IATjD,CADF;AAaD;;;;EAvCmBzB,S;;gBAAhBgB,O,iBACiB,K;;gBADjBA,O,WAEWe,K;;gBAFXf,O,kBAGkB;AACpBP,EAAAA,GAAG,EAAE,WADe;AAEpBC,EAAAA,KAAK,EAAE,OAFa;AAGpBsB,EAAAA,IAAI,EAAE;AAHc,C;;AAuCxB,SAASH,IAAT,CAAcI,KAAd,EAAqB;AAAA;AAAA;;AACnB,MAAMC,KAAK,GAE2B/B,GAFtC;AACA,MAAQiB,MAAR,GAAmBa,KAAnB,CAAQb,MAAR;AACA,iBAAOnB,OAAO,CAACmB,MAAD,CAAd,eAAuB,oBAAC,KAAD;AAAA,WAAwB;AAAxB,cAAvB;AACD;;AAED,SAASe,KAAT,CAAeF,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMG,MAAM,GAG2BjC,GAHvC;AACA,MAAQiB,MAAR,GAA+Ba,KAA/B,CAAQb,MAAR;AAAA,MAAgBX,GAAhB,GAA+BwB,KAA/B,CAAgBxB,GAAhB;AAAA,MAAqBC,KAArB,GAA+BuB,KAA/B,CAAqBvB,KAArB;AAEA,iBAAOT,OAAO,CAACmB,MAAD,CAAd,eAAuB,oBAAC,MAAD;AAAA,iBAAgCL,YAAY,CAACN,GAAD,EAAMC,KAAN,CAA5C;AAAA,WAA+DH;AAA/D,cAAvB;AACD;;AAED,SAASuB,KAAT,CAAeG,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMI,MAAM,GAE2BlC,GAFvC;AACA,MAAQiB,MAAR,GAAmBa,KAAnB,CAAQb,MAAR;AACA,iBAAOnB,OAAO,CAACmB,MAAD,CAAd,eAAuB,oBAAC,MAAD;AAAA,WAAyB;AAAzB,cAAvB;AACD;;AAED,SAASkB,MAAT,CAAgBL,KAAhB,EAAuB;AAAA;AAAA;;AACrB,MAAMM,OAAO,GAE2BpC,GAFxC;AACA,MAAQiB,MAAR,GAAmBa,KAAnB,CAAQb,MAAR;AACA,kBAAOnB,OAAO,CAACmB,MAAD,CAAd,eAAuB,oBAAC,OAAD;AAAA,WAA0B;AAA1B,cAAvB;AACD;;AAED,IAAMQ,GAAG,GAAG7B,eAAe,CAACiB,OAAD,EAAU;AACnCa,EAAAA,IAAI,EAAJA,IADmC;AAEnCC,EAAAA,KAAK,EAALA,KAFmC;AAGnCK,EAAAA,KAAK,EAALA,KAHmC;AAInCG,EAAAA,MAAM,EAANA;AAJmC,CAAV,CAA3B;AAOA,eAAeV,GAAf","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor, { opacity } from '@semcore/utils/lib/color';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport CloseM from '@semcore/icon/Close/m';\n\nimport style from './style/tag.shadow.css';\n\nfunction isCustomTheme(use, theme) {\n const type = {\n primary: ['muted', 'invert', 'warning'],\n secondary: ['muted', 'invert'],\n };\n return type[use] ? !type[use].includes(theme) : true;\n}\n\nfunction getThemeName(use, theme) {\n return isCustomTheme(use, theme) ? 'custom' : `${use}-${theme}`;\n}\n\nclass RootTag extends Component {\n static displayName = 'Tag';\n static style = style;\n static defaultProps = {\n use: 'secondary',\n theme: 'muted',\n size: 'm',\n };\n\n getCloseProps() {\n const { use, theme } = this.asProps;\n return { use, theme };\n }\n\n render() {\n const STag = Root;\n let { Children, styles, theme, use, color, interactive, disabled, addonLeft, addonRight } =\n this.asProps;\n\n if (disabled) {\n interactive = false;\n }\n\n const colorTag = theme ? opacity(resolveColor(theme), 0.5) : '';\n const colorText = color ? resolveColor(color) : resolveColor(theme);\n\n return sstyled(styles)(\n <STag\n render={Box}\n use:theme={getThemeName(use, theme)}\n use:interactive={interactive}\n colorText={colorText}\n colorTag={colorTag}\n >\n {addonLeft ? <Tag.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Tag.Text, Tag.Addon)}\n {addonRight ? <Tag.Addon tag={addonRight} /> : null}\n </STag>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Root;\n const { styles } = props;\n return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Close(props) {\n const SClose = Root;\n const { styles, use, theme } = props;\n\n return sstyled(styles)(<SClose render={Box} use:theme={getThemeName(use, theme)} tag={CloseM} />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nfunction Circle(props) {\n const SCircle = Root;\n const { styles } = props;\n return sstyled(styles)(<SCircle render={Box} tag=\"span\" />);\n}\n\nconst Tag = createComponent(RootTag, {\n Text,\n Addon,\n Close,\n Circle,\n});\n\nexport default Tag;\n"],"file":"Tag.js"}
|
|
@@ -122,9 +122,20 @@ STag[theme='primary-muted'] {
|
|
|
122
122
|
}
|
|
123
123
|
|
|
124
124
|
STag[theme='primary-warning'] {
|
|
125
|
-
background-color: var(--orange);
|
|
126
|
-
color:
|
|
127
|
-
|
|
125
|
+
background-color: color-mod(var(--orange) a(15%));
|
|
126
|
+
color: var(--orange);
|
|
127
|
+
&[interactive]:hover,
|
|
128
|
+
&[interactive]:active,
|
|
129
|
+
&[active] {
|
|
130
|
+
background-color: var(--orange);
|
|
131
|
+
color: #fff;
|
|
132
|
+
& SClose {
|
|
133
|
+
color: color-mod(#fff a(15%));
|
|
134
|
+
&:hover {
|
|
135
|
+
color: #fff;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
128
139
|
}
|
|
129
140
|
|
|
130
141
|
STag[theme='primary-invert'] {
|
|
@@ -209,11 +220,7 @@ SClose {
|
|
|
209
220
|
}
|
|
210
221
|
|
|
211
222
|
SClose[theme='primary-warning'] {
|
|
212
|
-
color:
|
|
213
|
-
|
|
214
|
-
&:hover {
|
|
215
|
-
color: #fff;
|
|
216
|
-
}
|
|
223
|
+
color: color-mod(var(--orange) a(50%));
|
|
217
224
|
}
|
|
218
225
|
|
|
219
226
|
SClose[theme='primary-invert'] {
|
package/lib/types/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/tag",
|
|
3
3
|
"description": "SEMRush Tag Component",
|
|
4
|
-
"version": "3.6.
|
|
4
|
+
"version": "3.6.5",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -23,5 +23,10 @@
|
|
|
23
23
|
},
|
|
24
24
|
"jest": {
|
|
25
25
|
"preset": "@semcore/jest-preset-ui"
|
|
26
|
+
},
|
|
27
|
+
"repository": {
|
|
28
|
+
"type": "git",
|
|
29
|
+
"url": "https://github.com/semrush/intergalactic.git",
|
|
30
|
+
"directory": "semcore/tag"
|
|
26
31
|
}
|
|
27
32
|
}
|
package/src/{Tag.js → Tag.jsx}
RENAMED
|
@@ -29,36 +29,26 @@ class RootTag extends Component {
|
|
|
29
29
|
};
|
|
30
30
|
|
|
31
31
|
getCloseProps() {
|
|
32
|
-
const { use, theme
|
|
33
|
-
return { use, theme
|
|
32
|
+
const { use, theme } = this.asProps;
|
|
33
|
+
return { use, theme };
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
render() {
|
|
37
37
|
const STag = Root;
|
|
38
|
-
let {
|
|
39
|
-
|
|
40
|
-
styles,
|
|
41
|
-
theme,
|
|
42
|
-
use,
|
|
43
|
-
color,
|
|
44
|
-
interactive,
|
|
45
|
-
disabled,
|
|
46
|
-
addonLeft,
|
|
47
|
-
addonRight,
|
|
48
|
-
} = this.asProps;
|
|
38
|
+
let { Children, styles, theme, use, color, interactive, disabled, addonLeft, addonRight } =
|
|
39
|
+
this.asProps;
|
|
49
40
|
|
|
50
41
|
if (disabled) {
|
|
51
42
|
interactive = false;
|
|
52
43
|
}
|
|
53
44
|
|
|
54
|
-
const useTheme = getThemeName(use, theme);
|
|
55
45
|
const colorTag = theme ? opacity(resolveColor(theme), 0.5) : '';
|
|
56
46
|
const colorText = color ? resolveColor(color) : resolveColor(theme);
|
|
57
47
|
|
|
58
48
|
return sstyled(styles)(
|
|
59
49
|
<STag
|
|
60
50
|
render={Box}
|
|
61
|
-
use:theme={
|
|
51
|
+
use:theme={getThemeName(use, theme)}
|
|
62
52
|
use:interactive={interactive}
|
|
63
53
|
colorText={colorText}
|
|
64
54
|
colorTag={colorTag}
|
|
@@ -79,7 +69,7 @@ function Text(props) {
|
|
|
79
69
|
|
|
80
70
|
function Close(props) {
|
|
81
71
|
const SClose = Root;
|
|
82
|
-
const { styles, use, theme
|
|
72
|
+
const { styles, use, theme } = props;
|
|
83
73
|
|
|
84
74
|
return sstyled(styles)(<SClose render={Box} use:theme={getThemeName(use, theme)} tag={CloseM} />);
|
|
85
75
|
}
|
package/src/index.d.ts
CHANGED
package/src/style/tag.shadow.css
CHANGED
|
@@ -122,9 +122,20 @@ STag[theme='primary-muted'] {
|
|
|
122
122
|
}
|
|
123
123
|
|
|
124
124
|
STag[theme='primary-warning'] {
|
|
125
|
-
background-color: var(--orange);
|
|
126
|
-
color:
|
|
127
|
-
|
|
125
|
+
background-color: color-mod(var(--orange) a(15%));
|
|
126
|
+
color: var(--orange);
|
|
127
|
+
&[interactive]:hover,
|
|
128
|
+
&[interactive]:active,
|
|
129
|
+
&[active] {
|
|
130
|
+
background-color: var(--orange);
|
|
131
|
+
color: #fff;
|
|
132
|
+
& SClose {
|
|
133
|
+
color: color-mod(#fff a(15%));
|
|
134
|
+
&:hover {
|
|
135
|
+
color: #fff;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
128
139
|
}
|
|
129
140
|
|
|
130
141
|
STag[theme='primary-invert'] {
|
|
@@ -209,11 +220,7 @@ SClose {
|
|
|
209
220
|
}
|
|
210
221
|
|
|
211
222
|
SClose[theme='primary-warning'] {
|
|
212
|
-
color:
|
|
213
|
-
|
|
214
|
-
&:hover {
|
|
215
|
-
color: #fff;
|
|
216
|
-
}
|
|
223
|
+
color: color-mod(var(--orange) a(50%));
|
|
217
224
|
}
|
|
218
225
|
|
|
219
226
|
SClose[theme='primary-invert'] {
|