@semcore/typography 5.53.0 → 5.53.1
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 +6 -0
- package/lib/cjs/Blockquote.js +7 -5
- package/lib/cjs/Blockquote.js.map +1 -1
- package/lib/cjs/Hint.js +10 -8
- package/lib/cjs/Hint.js.map +1 -1
- package/lib/cjs/List.js +8 -6
- package/lib/cjs/List.js.map +1 -1
- package/lib/cjs/Text.js +37 -35
- package/lib/cjs/Text.js.map +1 -1
- package/lib/es6/Blockquote.js +7 -5
- package/lib/es6/Blockquote.js.map +1 -1
- package/lib/es6/Hint.js +10 -8
- package/lib/es6/Hint.js.map +1 -1
- package/lib/es6/List.js +8 -6
- package/lib/es6/List.js.map +1 -1
- package/lib/es6/Text.js +37 -35
- package/lib/es6/Text.js.map +1 -1
- package/lib/esm/Blockquote.mjs +30 -23
- package/lib/esm/Hint.mjs +69 -57
- package/lib/esm/List.mjs +86 -68
- package/lib/esm/Text.mjs +67 -58
- package/lib/esm/index.mjs +8 -8
- package/lib/esm/style/blockquote.shadow.css +28 -0
- package/lib/esm/style/hint.shadow.css +51 -0
- package/lib/esm/style/list.shadow.css +28 -0
- package/lib/esm/style/text.shadow.css +118 -0
- package/package.json +4 -4
package/lib/esm/Blockquote.mjs
CHANGED
|
@@ -1,30 +1,37 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { sstyled
|
|
3
|
-
import { createBaseComponent
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import { Box
|
|
7
|
-
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
3
|
+
import { createBaseComponent, sstyled as sstyled$1, assignProps } from "@semcore/core";
|
|
4
|
+
import React from "react";
|
|
5
|
+
import isNode from "@semcore/utils/lib/isNode";
|
|
6
|
+
import { Box } from "@semcore/flex-box";
|
|
7
|
+
/*!__reshadow-styles__:"./style/blockquote.shadow.css"*/
|
|
8
|
+
var styles = (
|
|
8
9
|
/*__reshadow_css_start__*/
|
|
9
|
-
(
|
|
10
|
+
(sstyled.insert(
|
|
10
11
|
/*__inner_css_start__*/
|
|
11
|
-
'.
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
'.___SBlockquote_1t4p4_gg_{position:relative;display:flex;font-style:italic;font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%);color:var(--intergalactic-text-primary, #191b23)}.___SDoubleQuotation_1t4p4_gg_{position:relative;margin-right:var(--intergalactic-spacing-5x, 20px);font-family:"Times New Roman",serif;font-style:normal;font-size:68px;line-height:52px;color:var(--intergalactic-text-large-secondary, #a9abb6)}.___SAuthor_1t4p4_gg_{display:block;margin-top:var(--intergalactic-spacing-4x, 16px);color:var(--intergalactic-text-secondary, #6c6e79);font-style:normal;font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}',
|
|
13
|
+
/*__inner_css_end__*/
|
|
14
|
+
"1t4p4_gg_"
|
|
15
|
+
), /*__reshadow_css_end__*/
|
|
16
|
+
{
|
|
17
|
+
"__SBlockquote": "___SBlockquote_1t4p4_gg_",
|
|
18
|
+
"__SDoubleQuotation": "___SDoubleQuotation_1t4p4_gg_",
|
|
19
|
+
"__SAuthor": "___SAuthor_1t4p4_gg_"
|
|
17
20
|
})
|
|
18
21
|
);
|
|
19
|
-
function
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
function Blockquote(props, ref) {
|
|
23
|
+
var _ref = arguments[0], _ref2;
|
|
24
|
+
var SBlockquote = Box;
|
|
25
|
+
var SDoubleQuotation = "span";
|
|
26
|
+
var SAuthor = "cite";
|
|
27
|
+
var children = props.children, author = props.author;
|
|
28
|
+
return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SBlockquote, _ref2.cn("SBlockquote", _objectSpread({}, assignProps({
|
|
29
|
+
"tag": "blockquote",
|
|
30
|
+
"ref": ref
|
|
31
|
+
}, _ref))), /* @__PURE__ */ React.createElement(SDoubleQuotation, _ref2.cn("SDoubleQuotation", {}), "“"), /* @__PURE__ */ React.createElement("span", _ref2.cn("span", {}), children, isNode(author) && /* @__PURE__ */ React.createElement(SAuthor, _ref2.cn("SAuthor", {}), author)));
|
|
25
32
|
}
|
|
26
|
-
|
|
27
|
-
const
|
|
33
|
+
Blockquote.displayName = "Blockquote";
|
|
34
|
+
const Blockquote$1 = createBaseComponent(Blockquote);
|
|
28
35
|
export {
|
|
29
|
-
|
|
36
|
+
Blockquote$1 as default
|
|
30
37
|
};
|
package/lib/esm/Hint.mjs
CHANGED
|
@@ -1,69 +1,81 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import { sstyled
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import { Box
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
5
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
6
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
7
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
8
|
+
import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
|
|
9
|
+
import React from "react";
|
|
10
|
+
import { Box } from "@semcore/flex-box";
|
|
11
|
+
import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
|
|
12
|
+
import addonTextChildren from "@semcore/utils/lib/addonTextChildren";
|
|
13
|
+
import Text from "./Text.mjs";
|
|
14
|
+
/*!__reshadow-styles__:"./style/hint.shadow.css"*/
|
|
15
|
+
var style = (
|
|
15
16
|
/*__reshadow_css_start__*/
|
|
16
|
-
(
|
|
17
|
+
(sstyled.insert(
|
|
17
18
|
/*__inner_css_start__*/
|
|
18
|
-
".
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
19
|
+
".___SHint_1p9rr_gg_{display:inline-block;transition:all .15s ease-in-out;-webkit-text-decoration:none;text-decoration:none;outline:0;cursor:pointer;color:var(--intergalactic-text-secondary, #6c6e79)}.___SHint_1p9rr_gg_.__active_1p9rr_gg_,.___SHint_1p9rr_gg_:active{color:var(--intergalactic-text-hint-hover-active, #484a54)}@media (hover:hover){.___SHint_1p9rr_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SHint_1p9rr_gg_.__keyboardFocused_1p9rr_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SHint_1p9rr_gg_.__disabled_1p9rr_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SAddon_1p9rr_gg_{vertical-align:middle;display:inline-flex}.___SHint_1p9rr_gg_ .___SAddon_1p9rr_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SHint_1p9rr_gg_ .___SAddon_1p9rr_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SText_1p9rr_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}@media (prefers-reduced-motion){.___SHint_1p9rr_gg_{transition:none}}",
|
|
20
|
+
/*__inner_css_end__*/
|
|
21
|
+
"1p9rr_gg_"
|
|
22
|
+
), /*__reshadow_css_end__*/
|
|
23
|
+
{
|
|
24
|
+
"__SHint": "___SHint_1p9rr_gg_",
|
|
25
|
+
"_keyboardFocused": "__keyboardFocused_1p9rr_gg_",
|
|
26
|
+
"_disabled": "__disabled_1p9rr_gg_",
|
|
27
|
+
"__SAddon": "___SAddon_1p9rr_gg_",
|
|
28
|
+
"__SText": "___SText_1p9rr_gg_",
|
|
29
|
+
"_active": "__active_1p9rr_gg_"
|
|
27
30
|
})
|
|
28
|
-
)
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
);
|
|
32
|
+
var RootHint = /* @__PURE__ */ function(_Component) {
|
|
33
|
+
_inherits(RootHint2, _Component);
|
|
34
|
+
var _super = _createSuper(RootHint2);
|
|
35
|
+
function RootHint2() {
|
|
36
|
+
_classCallCheck(this, RootHint2);
|
|
37
|
+
return _super.apply(this, arguments);
|
|
33
38
|
}
|
|
34
|
-
|
|
39
|
+
_createClass(RootHint2, [{
|
|
35
40
|
key: "render",
|
|
36
|
-
value: function() {
|
|
37
|
-
var
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
tag:
|
|
42
|
-
}
|
|
43
|
-
tag:
|
|
41
|
+
value: function render() {
|
|
42
|
+
var _ref = this.asProps, _ref4;
|
|
43
|
+
var SHint = Text;
|
|
44
|
+
var _this$asProps = this.asProps, styles = _this$asProps.styles, Children = _this$asProps.Children, addonLeft = _this$asProps.addonLeft, addonRight = _this$asProps.addonRight;
|
|
45
|
+
return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SHint, _ref4.cn("SHint", _objectSpread({}, assignProps({
|
|
46
|
+
"tag": "abbr"
|
|
47
|
+
}, _ref))), addonLeft ? /* @__PURE__ */ React.createElement(Hint.Addon, {
|
|
48
|
+
tag: addonLeft
|
|
49
|
+
}) : null, addonTextChildren(Children, Hint.Text, Hint.Addon), addonRight ? /* @__PURE__ */ React.createElement(Hint.Addon, {
|
|
50
|
+
tag: addonRight
|
|
44
51
|
}) : null);
|
|
45
52
|
}
|
|
46
|
-
}])
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
}]);
|
|
54
|
+
return RootHint2;
|
|
55
|
+
}(Component);
|
|
56
|
+
_defineProperty(RootHint, "displayName", "Hint");
|
|
57
|
+
_defineProperty(RootHint, "style", style);
|
|
58
|
+
_defineProperty(RootHint, "enhance", [keyboardFocusEnhance()]);
|
|
59
|
+
function Addon(props) {
|
|
60
|
+
var _ref2 = arguments[0], _ref5;
|
|
61
|
+
var SAddon = Box;
|
|
62
|
+
var styles = props.styles;
|
|
63
|
+
return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SAddon, _ref5.cn("SAddon", _objectSpread({}, assignProps({
|
|
64
|
+
"tag": "span"
|
|
65
|
+
}, _ref2))));
|
|
56
66
|
}
|
|
57
|
-
function
|
|
58
|
-
var
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
},
|
|
67
|
+
function HintText(props) {
|
|
68
|
+
var _ref3 = arguments[0], _ref6;
|
|
69
|
+
var SText = Box;
|
|
70
|
+
var styles = props.styles;
|
|
71
|
+
return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SText, _ref6.cn("SText", _objectSpread({}, assignProps({
|
|
72
|
+
"tag": "span"
|
|
73
|
+
}, _ref3))));
|
|
62
74
|
}
|
|
63
|
-
var
|
|
64
|
-
Text:
|
|
65
|
-
Addon
|
|
75
|
+
var Hint = createComponent(RootHint, {
|
|
76
|
+
Text: HintText,
|
|
77
|
+
Addon
|
|
66
78
|
});
|
|
67
79
|
export {
|
|
68
|
-
|
|
80
|
+
Hint as default
|
|
69
81
|
};
|
package/lib/esm/List.mjs
CHANGED
|
@@ -1,89 +1,107 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import { sstyled
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import { Flex
|
|
11
|
-
import
|
|
12
|
-
import { isAdvanceMode
|
|
13
|
-
import
|
|
14
|
-
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
5
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
6
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
7
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
8
|
+
import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
|
|
9
|
+
import React from "react";
|
|
10
|
+
import { Flex } from "@semcore/flex-box";
|
|
11
|
+
import isNode from "@semcore/utils/lib/isNode";
|
|
12
|
+
import { isAdvanceMode } from "@semcore/utils/lib/findComponent";
|
|
13
|
+
import Text from "./Text.mjs";
|
|
14
|
+
/*!__reshadow-styles__:"./style/list.shadow.css"*/
|
|
15
|
+
var style = (
|
|
15
16
|
/*__reshadow_css_start__*/
|
|
16
|
-
(
|
|
17
|
+
(sstyled.insert(
|
|
17
18
|
/*__inner_css_start__*/
|
|
18
|
-
".
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
".___SList_1iaz2_gg_{padding:0;margin:0;list-style-type:none}.___SContent_1iaz2_gg_{overflow:inherit;text-overflow:inherit}.___SItem_1iaz2_gg_+.___SItem_1iaz2_gg_,.___SList_1iaz2_gg_ .___SList_1iaz2_gg_{margin-top:var(--intergalactic-spacing-2x, 8px)}.___SItem_1iaz2_gg_{display:flex}.___SMarker_1iaz2_gg_{margin-right:var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-text-secondary, #6c6e79);line-height:normal}",
|
|
20
|
+
/*__inner_css_end__*/
|
|
21
|
+
"1iaz2_gg_"
|
|
22
|
+
), /*__reshadow_css_end__*/
|
|
23
|
+
{
|
|
24
|
+
"__SList": "___SList_1iaz2_gg_",
|
|
25
|
+
"__SContent": "___SContent_1iaz2_gg_",
|
|
26
|
+
"__SItem": "___SItem_1iaz2_gg_",
|
|
27
|
+
"__SMarker": "___SMarker_1iaz2_gg_"
|
|
25
28
|
})
|
|
26
|
-
)
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
);
|
|
30
|
+
var ListRoot = /* @__PURE__ */ function(_Component) {
|
|
31
|
+
_inherits(ListRoot2, _Component);
|
|
32
|
+
var _super = _createSuper(ListRoot2);
|
|
33
|
+
function ListRoot2() {
|
|
34
|
+
_classCallCheck(this, ListRoot2);
|
|
35
|
+
return _super.apply(this, arguments);
|
|
31
36
|
}
|
|
32
|
-
|
|
37
|
+
_createClass(ListRoot2, [{
|
|
33
38
|
key: "getItemProps",
|
|
34
|
-
value: function() {
|
|
35
|
-
var
|
|
39
|
+
value: function getItemProps() {
|
|
40
|
+
var marker = this.asProps.marker;
|
|
36
41
|
return {
|
|
37
|
-
marker
|
|
42
|
+
marker
|
|
38
43
|
};
|
|
39
44
|
}
|
|
40
45
|
}, {
|
|
41
46
|
key: "render",
|
|
42
|
-
value: function() {
|
|
43
|
-
var
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
47
|
+
value: function render() {
|
|
48
|
+
var _ref = this.asProps, _ref4;
|
|
49
|
+
var SList = Text;
|
|
50
|
+
var styles = this.asProps.styles;
|
|
51
|
+
return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SList, _ref4.cn("SList", _objectSpread({}, assignProps({
|
|
52
|
+
"tag": "ul",
|
|
53
|
+
"role": "list"
|
|
54
|
+
}, _ref))));
|
|
48
55
|
}
|
|
49
|
-
}])
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
56
|
+
}]);
|
|
57
|
+
return ListRoot2;
|
|
58
|
+
}(Component);
|
|
59
|
+
_defineProperty(ListRoot, "displayName", "List");
|
|
60
|
+
_defineProperty(ListRoot, "style", style);
|
|
61
|
+
_defineProperty(ListRoot, "defaultProps", {
|
|
54
62
|
marker: "•"
|
|
55
63
|
});
|
|
56
|
-
var
|
|
57
|
-
|
|
58
|
-
var
|
|
59
|
-
function
|
|
60
|
-
|
|
64
|
+
var ItemRoot = /* @__PURE__ */ function(_Component2) {
|
|
65
|
+
_inherits(ItemRoot2, _Component2);
|
|
66
|
+
var _super2 = _createSuper(ItemRoot2);
|
|
67
|
+
function ItemRoot2() {
|
|
68
|
+
_classCallCheck(this, ItemRoot2);
|
|
69
|
+
return _super2.apply(this, arguments);
|
|
61
70
|
}
|
|
62
|
-
|
|
71
|
+
_createClass(ItemRoot2, [{
|
|
63
72
|
key: "render",
|
|
64
|
-
value: function() {
|
|
65
|
-
var
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
73
|
+
value: function render() {
|
|
74
|
+
var _ref2 = this.asProps, _ref5;
|
|
75
|
+
var SItem = Text;
|
|
76
|
+
var _this$asProps = this.asProps, styles = _this$asProps.styles, children = _this$asProps.children, markerNode = _this$asProps.marker, Children = _this$asProps.Children;
|
|
77
|
+
var SMarker = "span";
|
|
78
|
+
var SContent = "div";
|
|
79
|
+
var isAdvancedMode = isAdvanceMode(Children, [List.Item.Content.displayName]);
|
|
80
|
+
return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SItem, _ref5.cn("SItem", _objectSpread({}, assignProps({
|
|
81
|
+
"tag": "li",
|
|
82
|
+
"role": "listitem"
|
|
83
|
+
}, _ref2))), isNode(markerNode) && /* @__PURE__ */ React.createElement(SMarker, _ref5.cn("SMarker", {
|
|
70
84
|
"aria-hidden": "true"
|
|
71
|
-
}),
|
|
85
|
+
}), markerNode), isAdvancedMode ? /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {})) : /* @__PURE__ */ React.createElement(SContent, _ref5.cn("SContent", {}), children));
|
|
72
86
|
}
|
|
73
|
-
}])
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
87
|
+
}]);
|
|
88
|
+
return ItemRoot2;
|
|
89
|
+
}(Component);
|
|
90
|
+
_defineProperty(ItemRoot, "style", style);
|
|
91
|
+
_defineProperty(ItemRoot, "displayName", "Item");
|
|
92
|
+
function Content(props) {
|
|
93
|
+
var _ref3 = arguments[0], _ref6;
|
|
94
|
+
var styles = props.styles, children = props.children;
|
|
95
|
+
var SContent = Flex;
|
|
96
|
+
return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SContent, _ref6.cn("SContent", _objectSpread({}, assignProps({}, _ref3))), children);
|
|
80
97
|
}
|
|
81
|
-
|
|
82
|
-
var
|
|
83
|
-
Content
|
|
84
|
-
})
|
|
85
|
-
|
|
98
|
+
Content.displayName = "Content";
|
|
99
|
+
var Item = createComponent(ItemRoot, {
|
|
100
|
+
Content
|
|
101
|
+
});
|
|
102
|
+
var List = createComponent(ListRoot, {
|
|
103
|
+
Item
|
|
86
104
|
});
|
|
87
105
|
export {
|
|
88
|
-
|
|
106
|
+
List as default
|
|
89
107
|
};
|
package/lib/esm/Text.mjs
CHANGED
|
@@ -1,69 +1,78 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { sstyled
|
|
3
|
-
import { createBaseComponent
|
|
4
|
-
import
|
|
5
|
-
import { Box
|
|
6
|
-
import { useColorResolver
|
|
7
|
-
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
3
|
+
import { createBaseComponent, sstyled as sstyled$1, assignProps } from "@semcore/core";
|
|
4
|
+
import React from "react";
|
|
5
|
+
import { Box } from "@semcore/flex-box";
|
|
6
|
+
import { useColorResolver } from "@semcore/utils/lib/use/useColorResolver";
|
|
7
|
+
/*!__reshadow-styles__:"./style/text.shadow.css"*/
|
|
8
|
+
var styles = (
|
|
8
9
|
/*__reshadow_css_start__*/
|
|
9
|
-
(
|
|
10
|
+
(sstyled.insert(
|
|
10
11
|
/*__inner_css_start__*/
|
|
11
|
-
'.
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
"
|
|
34
|
-
|
|
35
|
-
"--
|
|
36
|
-
|
|
37
|
-
"--
|
|
38
|
-
|
|
39
|
-
"--
|
|
40
|
-
|
|
41
|
-
"--
|
|
42
|
-
|
|
43
|
-
"--
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
12
|
+
'.___SText_1ce3c_gg_{padding:0;margin:0}.___SText_1ce3c_gg_._size_100_1ce3c_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SText_1ce3c_gg_._size_200_1ce3c_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SText_1ce3c_gg_._size_300_1ce3c_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SText_1ce3c_gg_._size_400_1ce3c_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SText_1ce3c_gg_._size_500_1ce3c_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SText_1ce3c_gg_._size_600_1ce3c_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SText_1ce3c_gg_._size_700_1ce3c_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SText_1ce3c_gg_._size_800_1ce3c_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}.___SText_1ce3c_gg_.__noWrap_1ce3c_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SText_1ce3c_gg_.__medium_1ce3c_gg_{font-weight:var(--intergalactic-medium, 500)}.___SText_1ce3c_gg_.__semibold_1ce3c_gg_{font-weight:var(--intergalactic-semi-bold, 600)}.___SText_1ce3c_gg_.__bold_1ce3c_gg_{font-weight:var(--intergalactic-bold, 700)}.___SText_1ce3c_gg_.__italic_1ce3c_gg_{font-style:italic}.___SText_1ce3c_gg_.__monospace_1ce3c_gg_{font-family:Consolas,"Roboto Mono",Menlo,Courier,monospace}.___SText_1ce3c_gg_.__uppercase_1ce3c_gg_{text-transform:uppercase}.___SText_1ce3c_gg_.__lowercase_1ce3c_gg_{text-transform:lowercase}.___SText_1ce3c_gg_.__capitalize_1ce3c_gg_{text-transform:capitalize}.___SText_1ce3c_gg_.__decoration_1ce3c_gg_{-webkit-text-decoration:var(--decoration_1ce3c);text-decoration:var(--decoration_1ce3c)}.___SText_1ce3c_gg_.__color_1ce3c_gg_{color:var(--color_1ce3c)}.___SText_1ce3c_gg_.__fontSize_1ce3c_gg_{font-size:var(--fontSize_1ce3c)}.___SText_1ce3c_gg_.__lineHeight_1ce3c_gg_{line-height:var(--lineHeight_1ce3c)}.___SText_1ce3c_gg_.__fontWeight_1ce3c_gg_{font-weight:var(--fontWeight_1ce3c)}.___SText_1ce3c_gg_.__textAlign_1ce3c_gg_{text-align:var(--textAlign_1ce3c)}.___SText_1ce3c_gg_._use_primary_1ce3c_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SText_1ce3c_gg_._use_secondary_1ce3c_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SText_1ce3c_gg_.__disabled_1ce3c_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}',
|
|
13
|
+
/*__inner_css_end__*/
|
|
14
|
+
"1ce3c_gg_"
|
|
15
|
+
), /*__reshadow_css_end__*/
|
|
16
|
+
{
|
|
17
|
+
"__SText": "___SText_1ce3c_gg_",
|
|
18
|
+
"_size_100": "_size_100_1ce3c_gg_",
|
|
19
|
+
"_size_200": "_size_200_1ce3c_gg_",
|
|
20
|
+
"_size_300": "_size_300_1ce3c_gg_",
|
|
21
|
+
"_size_400": "_size_400_1ce3c_gg_",
|
|
22
|
+
"_size_500": "_size_500_1ce3c_gg_",
|
|
23
|
+
"_size_600": "_size_600_1ce3c_gg_",
|
|
24
|
+
"_size_700": "_size_700_1ce3c_gg_",
|
|
25
|
+
"_size_800": "_size_800_1ce3c_gg_",
|
|
26
|
+
"_noWrap": "__noWrap_1ce3c_gg_",
|
|
27
|
+
"_medium": "__medium_1ce3c_gg_",
|
|
28
|
+
"_semibold": "__semibold_1ce3c_gg_",
|
|
29
|
+
"_bold": "__bold_1ce3c_gg_",
|
|
30
|
+
"_italic": "__italic_1ce3c_gg_",
|
|
31
|
+
"_monospace": "__monospace_1ce3c_gg_",
|
|
32
|
+
"_uppercase": "__uppercase_1ce3c_gg_",
|
|
33
|
+
"_lowercase": "__lowercase_1ce3c_gg_",
|
|
34
|
+
"_capitalize": "__capitalize_1ce3c_gg_",
|
|
35
|
+
"_decoration": "__decoration_1ce3c_gg_",
|
|
36
|
+
"--decoration": "--decoration_1ce3c",
|
|
37
|
+
"_color": "__color_1ce3c_gg_",
|
|
38
|
+
"--color": "--color_1ce3c",
|
|
39
|
+
"_fontSize": "__fontSize_1ce3c_gg_",
|
|
40
|
+
"--fontSize": "--fontSize_1ce3c",
|
|
41
|
+
"_lineHeight": "__lineHeight_1ce3c_gg_",
|
|
42
|
+
"--lineHeight": "--lineHeight_1ce3c",
|
|
43
|
+
"_fontWeight": "__fontWeight_1ce3c_gg_",
|
|
44
|
+
"--fontWeight": "--fontWeight_1ce3c",
|
|
45
|
+
"_textAlign": "__textAlign_1ce3c_gg_",
|
|
46
|
+
"--textAlign": "--textAlign_1ce3c",
|
|
47
|
+
"_use_primary": "_use_primary_1ce3c_gg_",
|
|
48
|
+
"_use_secondary": "_use_secondary_1ce3c_gg_",
|
|
49
|
+
"_disabled": "__disabled_1ce3c_gg_"
|
|
47
50
|
})
|
|
48
51
|
);
|
|
49
|
-
function
|
|
50
|
-
if (
|
|
52
|
+
function getTextDecoration(underline, lineThrough) {
|
|
53
|
+
if (underline) {
|
|
51
54
|
return "underline";
|
|
52
|
-
|
|
55
|
+
}
|
|
56
|
+
if (lineThrough) {
|
|
53
57
|
return "line-through";
|
|
58
|
+
}
|
|
54
59
|
}
|
|
55
|
-
function
|
|
56
|
-
var
|
|
57
|
-
|
|
58
|
-
|
|
60
|
+
function Text(props, ref) {
|
|
61
|
+
var _ref = arguments[0], _ref2;
|
|
62
|
+
var SText = Box;
|
|
63
|
+
var color = props.color, underline = props.underline, lineThrough = props.lineThrough;
|
|
64
|
+
var textDecoration = getTextDecoration(underline, lineThrough);
|
|
65
|
+
var resolveColor = useColorResolver();
|
|
66
|
+
return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SText, _ref2.cn("SText", _objectSpread({}, assignProps({
|
|
67
|
+
"tag": "span",
|
|
59
68
|
"data-ui-name": "Text",
|
|
60
|
-
ref:
|
|
61
|
-
"use:decoration":
|
|
62
|
-
"use:color":
|
|
63
|
-
},
|
|
69
|
+
"ref": ref,
|
|
70
|
+
"use:decoration": textDecoration,
|
|
71
|
+
"use:color": resolveColor(color)
|
|
72
|
+
}, _ref))));
|
|
64
73
|
}
|
|
65
|
-
|
|
66
|
-
const
|
|
74
|
+
Text.displayName = "Text";
|
|
75
|
+
const Text$1 = createBaseComponent(Text);
|
|
67
76
|
export {
|
|
68
|
-
|
|
77
|
+
Text$1 as default
|
|
69
78
|
};
|
package/lib/esm/index.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { default as
|
|
2
|
-
import { default as
|
|
3
|
-
import { default as
|
|
4
|
-
import { default as
|
|
1
|
+
import { default as default2 } from "./Text.mjs";
|
|
2
|
+
import { default as default3 } from "./Blockquote.mjs";
|
|
3
|
+
import { default as default4 } from "./List.mjs";
|
|
4
|
+
import { default as default5 } from "./Hint.mjs";
|
|
5
5
|
export {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
default3 as Blockquote,
|
|
7
|
+
default5 as Hint,
|
|
8
|
+
default4 as List,
|
|
9
|
+
default2 as Text
|
|
10
10
|
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
SBlockquote {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: flex;
|
|
4
|
+
font-style: italic;
|
|
5
|
+
font-size: var(--intergalactic-fs-400, 20px);
|
|
6
|
+
line-height: var(--intergalactic-lh-400, 120%);
|
|
7
|
+
color: var(--intergalactic-text-primary, #191b23);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
SDoubleQuotation {
|
|
11
|
+
position: relative;
|
|
12
|
+
margin-right: var(--intergalactic-spacing-5x, 20px);
|
|
13
|
+
font-family: 'Times New Roman', serif;
|
|
14
|
+
font-style: normal;
|
|
15
|
+
/* disable-tokens-validator */
|
|
16
|
+
font-size: 68px;
|
|
17
|
+
line-height: 52px;
|
|
18
|
+
color: var(--intergalactic-text-large-secondary, #a9abb6);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
SAuthor {
|
|
22
|
+
display: block;
|
|
23
|
+
margin-top: var(--intergalactic-spacing-4x, 16px);
|
|
24
|
+
color: var(--intergalactic-text-secondary, #6c6e79);
|
|
25
|
+
font-style: normal;
|
|
26
|
+
font-size: var(--intergalactic-fs-300, 16px);
|
|
27
|
+
line-height: var(--intergalactic-lh-300, 150%);
|
|
28
|
+
}
|