@semcore/typography 16.1.5-prerelease.4 → 16.2.0-prerelease.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.
Files changed (19) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/lib/cjs/Blockquote.js +4 -4
  3. package/lib/cjs/List.js +5 -5
  4. package/lib/cjs/Text.js +35 -34
  5. package/lib/cjs/Text.js.map +1 -1
  6. package/lib/cjs/index.d.js.map +1 -1
  7. package/lib/cjs/style/text.shadow.css +250 -241
  8. package/lib/es6/Blockquote.js +4 -4
  9. package/lib/es6/List.js +5 -5
  10. package/lib/es6/Text.js +35 -34
  11. package/lib/es6/Text.js.map +1 -1
  12. package/lib/es6/index.d.js.map +1 -1
  13. package/lib/es6/style/text.shadow.css +250 -241
  14. package/lib/esm/Blockquote.mjs +5 -5
  15. package/lib/esm/List.mjs +6 -6
  16. package/lib/esm/Text.mjs +36 -35
  17. package/lib/esm/style/text.shadow.css +250 -241
  18. package/lib/types/index.d.ts +2 -0
  19. package/package.json +6 -6
package/lib/esm/style/text.shadow.css CHANGED
@@ -2,222 +2,225 @@ SText {
2
2
  padding: 0;
3
3
  margin: 0;
4
4
 
5
- & abbr {
6
- color: var(--intergalactic-text-secondary, #6c6e79);
7
- text-decoration: underline dashed var(--intergalactic-text-secondary, #6c6e79);
5
+ &[formatTags] {
8
6
 
9
- &:active,
10
- &:hover,
11
- &:focus {
12
- outline: none;
13
- color: var(--intergalactic-text-hint-hover-active, #484a54);
14
- text-decoration: underline dashed var(--intergalactic-text-hint-hover-active, #484a54);
7
+ & abbr {
8
+ color: var(--intergalactic-text-secondary, #6c6e79);
9
+ text-decoration: underline dashed var(--intergalactic-text-secondary, #6c6e79);
10
+
11
+ &:active,
12
+ &:hover,
13
+ &:focus {
14
+ outline: none;
15
+ color: var(--intergalactic-text-hint-hover-active, #484a54);
16
+ text-decoration: underline dashed var(--intergalactic-text-hint-hover-active, #484a54);
17
+ }
15
18
  }
16
- }
17
19
 
18
- & a {
19
- display: inline;
20
- background: none;
21
- outline: none;
22
- text-decoration: none;
23
- color: var(--intergalactic-text-link, #006dca);
24
- border-bottom-width: 1px;
25
- border-bottom-style: solid;
26
- border-color: transparent;
27
-
28
- &:active,
29
- &:hover {
20
+ & a {
21
+ display: inline;
22
+ background: none;
30
23
  outline: none;
31
24
  text-decoration: none;
32
- color: var(--intergalactic-text-link-hover-active, #044792);
33
- border-color: var(--intergalactic-text-link-hover-active, #044792);
34
- }
25
+ color: var(--intergalactic-text-link, #006dca);
26
+ border-bottom-width: 1px;
27
+ border-bottom-style: solid;
28
+ border-color: transparent;
29
+
30
+ &:active,
31
+ &:hover {
32
+ outline: none;
33
+ text-decoration: none;
34
+ color: var(--intergalactic-text-link-hover-active, #044792);
35
+ border-color: var(--intergalactic-text-link-hover-active, #044792);
36
+ }
35
37
 
36
- &:focus {
37
- outline-color: var(--intergalactic-keyboard-focus-outline, rgba(0, 143, 248, 0.5));
38
- outline-style: solid;
39
- outline-width: 3px;
38
+ &:focus {
39
+ outline-color: var(--intergalactic-keyboard-focus-outline, rgba(0, 143, 248, 0.5));
40
+ outline-style: solid;
41
+ outline-width: 3px;
42
+ }
40
43
  }
41
- }
42
44
 
43
- & code,
44
- & pre {
45
- font-family: Consolas, 'Roboto Mono', Menlo, Courier, monospace;
46
- }
47
-
48
- & blockquote {
49
- position: relative;
50
- /* disable-tokens-validator */
51
- padding-left: 51px;
52
- font-size: var(--intergalactic-fs-400, 20px);
53
- line-height: var(--intergalactic-lh-400, 120%);
54
- font-style: italic;
55
-
56
- &:before {
57
- content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNyIgaGVpZ2h0PSIxOSIgdmlld0JveD0iMCAwIDI3IDE5IiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTguODI0MjIgMC45NDcyNjZWMi4zMDg1OUM2Ljg3NjMgMy4zMjY4MiA1LjQ4MTc3IDQuMzg5MzIgNC42NDA2MiA1LjQ5NjA5QzMuNzk5NDggNi42MDI4NiAzLjM3ODkxIDcuODA5MjQgMy4zNzg5MSA5LjExNTIzQzMuMzc4OTEgOS44ODk5NyAzLjQ4OTU4IDEwLjQyMTIgMy43MTA5NCAxMC43MDlDMy45MTAxNiAxMS4wMTg5IDQuMTUzNjUgMTEuMTczOCA0LjQ0MTQxIDExLjE3MzhDNC43MjkxNyAxMS4xNzM4IDUuMTE2NTQgMTEuMDk2NCA1LjYwMzUyIDEwLjk0MTRDNi4wOTA0OSAxMC43NjQzIDYuNTMzMiAxMC42NzU4IDYuOTMxNjQgMTAuNjc1OEM3LjgzOTE5IDEwLjY3NTggOC42MjUgMTEuMDE4OSA5LjI4OTA2IDExLjcwNTFDOS45NzUyNiAxMi4zNjkxIDEwLjMxODQgMTMuMTg4MiAxMC4zMTg0IDE0LjE2MjFDMTAuMzE4NCAxNS4yMjQ2IDkuOTA4ODUgMTYuMTQzMiA5LjA4OTg0IDE2LjkxOEM4LjI3MDgzIDE3LjY3MDYgNy4yNTI2IDE4LjA0NjkgNi4wMzUxNiAxOC4wNDY5QzQuNTUyMDggMTguMDQ2OSAzLjIxMjg5IDE3LjQwNDkgMi4wMTc1OCAxNi4xMjExQzAuODIyMjY2IDE0LjgzNzIgMC4yMjQ2MDkgMTMuMjU0NiAwLjIyNDYwOSAxMS4zNzNDMC4yMjQ2MDkgOS4xNTk1MSAwLjk1NTA3OCA3LjEwMDkxIDIuNDE2MDIgNS4xOTcyN0MzLjg5OTA5IDMuMjcxNDggNi4wMzUxNiAxLjg1NDgyIDguODI0MjIgMC45NDcyNjZaTTI0LjY2MjEgMS4wNDY4OFYyLjMwODU5QzIyLjQyNjQgMy41OTI0NSAyMC45NTQ0IDQuNzQzNDkgMjAuMjQ2MSA1Ljc2MTcyQzE5LjUzNzggNi43Nzk5NSAxOS4xODM2IDcuOTc1MjYgMTkuMTgzNiA5LjM0NzY2QzE5LjE4MzYgOS45Njc0NSAxOS4zMDUzIDEwLjQzMjMgMTkuNTQ4OCAxMC43NDIyQzE5Ljc5MjMgMTEuMDUyMSAyMC4wNDY5IDExLjIwNyAyMC4zMTI1IDExLjIwN0MyMC41NTYgMTEuMjA3IDIwLjkyMTIgMTEuMTE4NSAyMS40MDgyIDEwLjk0MTRDMjEuODk1MiAxMC43NjQzIDIyLjM4MjIgMTAuNjc1OCAyMi44NjkxIDEwLjY3NThDMjMuNzc2NyAxMC42NzU4IDI0LjU2MjUgMTEuMDA3OCAyNS4yMjY2IDExLjY3MTlDMjUuOTEyOCAxMi4zMTM4IDI2LjI1NTkgMTMuMTEwNyAyNi4yNTU5IDE0LjA2MjVDMjYuMjU1OSAxNS4xNDcxIDI1LjgyNDIgMTYuMDg3OSAyNC45NjA5IDE2Ljg4NDhDMjQuMTE5OCAxNy42ODE2IDIzLjA3OTQgMTguMDgwMSAyMS44Mzk4IDE4LjA4MDFDMjAuMzc4OSAxOC4wODAxIDE5LjA2MTggMTcuNDQ5MiAxNy44ODg3IDE2LjE4NzVDMTYuNzE1NSAxNC45MjU4IDE2LjEyODkgMTMuMzU0MiAxNi4xMjg5IDExLjQ3MjdDMTYuMTI4OSA5LjE0ODQ0IDE2Ljg3MDQgNy4wMzQ1MSAxOC4zNTM1IDUuMTMwODZDMTkuODM2NiAzLjIwNTA4IDIxLjkzOTUgMS44NDM3NSAyNC42NjIxIDEuMDQ2ODhaIiBmaWxsPSIjQTlBQkI2Ii8+Cjwvc3ZnPg==);
58
- display: inline-block;
59
- position: absolute;
60
- left: 0;
61
- color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
62
- font-family: Georgia, Times, 'Times New Roman', serif;
63
- }
64
-
65
- & cite {
66
- display: block;
67
- font-style: normal;
68
- margin-top: var(--intergalactic-spacing-4x, 16px);
69
- color: var(--intergalactic-text-secondary, #6c6e79);
70
- font-size: var(--intergalactic-fs-300, 16px);
71
- line-height: var(--intergalactic-lh-300, 150%);
45
+ & code,
46
+ & pre {
47
+ font-family: Consolas, 'Roboto Mono', Menlo, Courier, monospace;
72
48
  }
73
- }
74
49
 
75
- & ol:not(ol[start], ol[reversed], ol[type]),
76
- & ul:not(ul[start], ul[reversed], ul[type]) {
77
- margin: var(--intergalactic-spacing-2x, 8px) 0;
78
- padding: 0;
79
- list-style: none;
80
- position: relative;
50
+ & blockquote {
51
+ position: relative;
52
+ /* disable-tokens-validator */
53
+ padding-left: 51px;
54
+ font-size: var(--intergalactic-fs-400, 20px);
55
+ line-height: var(--intergalactic-lh-400, 120%);
56
+ font-style: italic;
81
57
 
82
- & li:not(SText) {
83
58
  &:before {
59
+ content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNyIgaGVpZ2h0PSIxOSIgdmlld0JveD0iMCAwIDI3IDE5IiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTguODI0MjIgMC45NDcyNjZWMi4zMDg1OUM2Ljg3NjMgMy4zMjY4MiA1LjQ4MTc3IDQuMzg5MzIgNC42NDA2MiA1LjQ5NjA5QzMuNzk5NDggNi42MDI4NiAzLjM3ODkxIDcuODA5MjQgMy4zNzg5MSA5LjExNTIzQzMuMzc4OTEgOS44ODk5NyAzLjQ4OTU4IDEwLjQyMTIgMy43MTA5NCAxMC43MDlDMy45MTAxNiAxMS4wMTg5IDQuMTUzNjUgMTEuMTczOCA0LjQ0MTQxIDExLjE3MzhDNC43MjkxNyAxMS4xNzM4IDUuMTE2NTQgMTEuMDk2NCA1LjYwMzUyIDEwLjk0MTRDNi4wOTA0OSAxMC43NjQzIDYuNTMzMiAxMC42NzU4IDYuOTMxNjQgMTAuNjc1OEM3LjgzOTE5IDEwLjY3NTggOC42MjUgMTEuMDE4OSA5LjI4OTA2IDExLjcwNTFDOS45NzUyNiAxMi4zNjkxIDEwLjMxODQgMTMuMTg4MiAxMC4zMTg0IDE0LjE2MjFDMTAuMzE4NCAxNS4yMjQ2IDkuOTA4ODUgMTYuMTQzMiA5LjA4OTg0IDE2LjkxOEM4LjI3MDgzIDE3LjY3MDYgNy4yNTI2IDE4LjA0NjkgNi4wMzUxNiAxOC4wNDY5QzQuNTUyMDggMTguMDQ2OSAzLjIxMjg5IDE3LjQwNDkgMi4wMTc1OCAxNi4xMjExQzAuODIyMjY2IDE0LjgzNzIgMC4yMjQ2MDkgMTMuMjU0NiAwLjIyNDYwOSAxMS4zNzNDMC4yMjQ2MDkgOS4xNTk1MSAwLjk1NTA3OCA3LjEwMDkxIDIuNDE2MDIgNS4xOTcyN0MzLjg5OTA5IDMuMjcxNDggNi4wMzUxNiAxLjg1NDgyIDguODI0MjIgMC45NDcyNjZaTTI0LjY2MjEgMS4wNDY4OFYyLjMwODU5QzIyLjQyNjQgMy41OTI0NSAyMC45NTQ0IDQuNzQzNDkgMjAuMjQ2MSA1Ljc2MTcyQzE5LjUzNzggNi43Nzk5NSAxOS4xODM2IDcuOTc1MjYgMTkuMTgzNiA5LjM0NzY2QzE5LjE4MzYgOS45Njc0NSAxOS4zMDUzIDEwLjQzMjMgMTkuNTQ4OCAxMC43NDIyQzE5Ljc5MjMgMTEuMDUyMSAyMC4wNDY5IDExLjIwNyAyMC4zMTI1IDExLjIwN0MyMC41NTYgMTEuMjA3IDIwLjkyMTIgMTEuMTE4NSAyMS40MDgyIDEwLjk0MTRDMjEuODk1MiAxMC43NjQzIDIyLjM4MjIgMTAuNjc1OCAyMi44NjkxIDEwLjY3NThDMjMuNzc2NyAxMC42NzU4IDI0LjU2MjUgMTEuMDA3OCAyNS4yMjY2IDExLjY3MTlDMjUuOTEyOCAxMi4zMTM4IDI2LjI1NTkgMTMuMTEwNyAyNi4yNTU5IDE0LjA2MjVDMjYuMjU1OSAxNS4xNDcxIDI1LjgyNDIgMTYuMDg3OSAyNC45NjA5IDE2Ljg4NDhDMjQuMTE5OCAxNy42ODE2IDIzLjA3OTQgMTguMDgwMSAyMS44Mzk4IDE4LjA4MDFDMjAuMzc4OSAxOC4wODAxIDE5LjA2MTggMTcuNDQ5MiAxNy44ODg3IDE2LjE4NzVDMTYuNzE1NSAxNC45MjU4IDE2LjEyODkgMTMuMzU0MiAxNi4xMjg5IDExLjQ3MjdDMTYuMTI4OSA5LjE0ODQ0IDE2Ljg3MDQgNy4wMzQ1MSAxOC4zNTM1IDUuMTMwODZDMTkuODM2NiAzLjIwNTA4IDIxLjkzOTUgMS44NDM3NSAyNC42NjIxIDEuMDQ2ODhaIiBmaWxsPSIjQTlBQkI2Ii8+Cjwvc3ZnPg==);
60
+ display: inline-block;
84
61
  position: absolute;
85
62
  left: 0;
63
+ color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
64
+ font-family: Georgia, Times, 'Times New Roman', serif;
65
+ }
66
+
67
+ & cite {
68
+ display: block;
69
+ font-style: normal;
70
+ margin-top: var(--intergalactic-spacing-4x, 16px);
86
71
  color: var(--intergalactic-text-secondary, #6c6e79);
72
+ font-size: var(--intergalactic-fs-300, 16px);
73
+ line-height: var(--intergalactic-lh-300, 150%);
87
74
  }
88
75
  }
89
76
 
90
- & li:not(SText)+li:not(SText) {
91
- margin: var(--intergalactic-spacing-2x, 8px) 0 0 0;
77
+ & ol:not(ol[start], ol[reversed], ol[type]),
78
+ & ul:not(ul[start], ul[reversed], ul[type]) {
79
+ margin: var(--intergalactic-spacing-2x, 8px) 0;
80
+ padding: 0;
81
+ list-style: none;
82
+ position: relative;
83
+
84
+ & li:not(SText) {
85
+ &:before {
86
+ position: absolute;
87
+ left: 0;
88
+ color: var(--intergalactic-text-secondary, #6c6e79);
89
+ }
90
+ }
91
+
92
+ & li:not(SText) + li:not(SText) {
93
+ margin: var(--intergalactic-spacing-2x, 8px) 0 0 0;
94
+ }
92
95
  }
93
- }
94
96
 
95
- & ol:not(ol[start], ol[reversed], ol[type]) {
96
- counter-reset: item 0;
97
+ & ol:not(ol[start], ol[reversed], ol[type]) {
98
+ counter-reset: item 0;
97
99
 
98
- & li:not(SText):before {
99
- counter-increment: item;
100
- content: counters(item, '.');
100
+ & li:not(SText):before {
101
+ counter-increment: item;
102
+ content: counters(item, '.');
103
+ }
101
104
  }
102
- }
103
105
 
104
- & ul:not(ul[start], ul[reversed], ul[type]) li:not(SText):before {
105
- content: '';
106
- background-color: var(--intergalactic-icon-primary-neutral, #6c6e79);
107
- }
106
+ & ul:not(ul[start], ul[reversed], ul[type]) li:not(SText):before {
107
+ content: '';
108
+ background-color: var(--intergalactic-icon-primary-neutral, #6c6e79);
109
+ }
108
110
 
109
- & h1 {
110
- font-size: var(--intergalactic-fs-800, 48px);
111
- line-height: var(--intergalactic-lh-800, 117%);
112
- font-weight: var(--intergalactic-semi-bold, 600);
113
- margin: 0 0 var(--intergalactic-spacing-6x, 24px) 0;
111
+ & h1 {
112
+ font-size: var(--intergalactic-fs-800, 48px);
113
+ line-height: var(--intergalactic-lh-800, 117%);
114
+ font-weight: var(--intergalactic-semi-bold, 600);
115
+ margin: 0 0 var(--intergalactic-spacing-6x, 24px) 0;
114
116
 
115
- &:only-child {
116
- margin-bottom: 0;
117
+ &:only-child {
118
+ margin-bottom: 0;
119
+ }
117
120
  }
118
- }
119
121
 
120
- & h2 {
121
- font-size: var(--intergalactic-fs-700, 36px);
122
- line-height: var(--intergalactic-lh-700, 110%);
123
- font-weight: var(--intergalactic-semi-bold, 600);
124
- margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0;
122
+ & h2 {
123
+ font-size: var(--intergalactic-fs-700, 36px);
124
+ line-height: var(--intergalactic-lh-700, 110%);
125
+ font-weight: var(--intergalactic-semi-bold, 600);
126
+ margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0;
125
127
 
126
- &:only-child {
127
- margin-bottom: 0;
128
+ &:only-child {
129
+ margin-bottom: 0;
130
+ }
128
131
  }
129
- }
130
132
 
131
- & h3 {
132
- font-size: var(--intergalactic-fs-600, 32px);
133
- line-height: var(--intergalactic-lh-600, 125%);
134
- font-weight: var(--intergalactic-semi-bold, 600);
135
- margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0;
133
+ & h3 {
134
+ font-size: var(--intergalactic-fs-600, 32px);
135
+ line-height: var(--intergalactic-lh-600, 125%);
136
+ font-weight: var(--intergalactic-semi-bold, 600);
137
+ margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0;
136
138
 
137
- &:only-child {
138
- margin-bottom: 0;
139
+ &:only-child {
140
+ margin-bottom: 0;
141
+ }
139
142
  }
140
- }
141
143
 
142
- & h4 {
143
- font-size: var(--intergalactic-fs-500, 24px);
144
- line-height: var(--intergalactic-lh-500, 117%);
145
- font-weight: var(--intergalactic-semi-bold, 600);
146
- margin: 0 0 var(--intergalactic-spacing-3x, 12px) 0;
144
+ & h4 {
145
+ font-size: var(--intergalactic-fs-500, 24px);
146
+ line-height: var(--intergalactic-lh-500, 117%);
147
+ font-weight: var(--intergalactic-semi-bold, 600);
148
+ margin: 0 0 var(--intergalactic-spacing-3x, 12px) 0;
147
149
 
148
- &:only-child {
149
- margin-bottom: 0;
150
+ &:only-child {
151
+ margin-bottom: 0;
152
+ }
150
153
  }
151
- }
152
154
 
153
- & h5 {
154
- font-size: var(--intergalactic-fs-400, 20px);
155
- line-height: var(--intergalactic-lh-400, 120%);
156
- font-weight: var(--intergalactic-semi-bold, 600);
157
- margin: 0 0 var(--intergalactic-spacing-2x, 8px) 0;
155
+ & h5 {
156
+ font-size: var(--intergalactic-fs-400, 20px);
157
+ line-height: var(--intergalactic-lh-400, 120%);
158
+ font-weight: var(--intergalactic-semi-bold, 600);
159
+ margin: 0 0 var(--intergalactic-spacing-2x, 8px) 0;
158
160
 
159
- &:only-child {
160
- margin-bottom: 0;
161
+ &:only-child {
162
+ margin-bottom: 0;
163
+ }
161
164
  }
162
- }
163
165
 
164
- & h6 {
165
- font-size: var(--intergalactic-fs-300, 16px);
166
- line-height: var(--intergalactic-lh-300, 150%);
167
- font-weight: var(--intergalactic-bold, 700);
168
- margin: 0 0 var(--intergalactic-spacing-1x, 4px) 0;
166
+ & h6 {
167
+ font-size: var(--intergalactic-fs-300, 16px);
168
+ line-height: var(--intergalactic-lh-300, 150%);
169
+ font-weight: var(--intergalactic-bold, 700);
170
+ margin: 0 0 var(--intergalactic-spacing-1x, 4px) 0;
169
171
 
170
- &:only-child {
171
- margin-bottom: 0;
172
+ &:only-child {
173
+ margin-bottom: 0;
174
+ }
172
175
  }
173
- }
174
176
 
175
- & h1,
176
- & h2,
177
- & h3,
178
- & h4,
179
- & h5,
180
- & h6 {
181
- & small {
182
- color: var(--intergalactic-text-secondary, #6c6e79);
183
- font-weight: 300;
184
- font-size: 100%;
177
+ & h1,
178
+ & h2,
179
+ & h3,
180
+ & h4,
181
+ & h5,
182
+ & h6 {
183
+ & small {
184
+ color: var(--intergalactic-text-secondary, #6c6e79);
185
+ font-weight: 300;
186
+ font-size: 100%;
187
+ }
185
188
  }
186
- }
187
189
 
188
- & p,
189
- & li {
190
- font-size: var(--intergalactic-fs-200, 14px);
191
- line-height: var(--intergalactic-lh-200, 142%);
192
- }
190
+ & p,
191
+ & li {
192
+ font-size: var(--intergalactic-fs-200, 14px);
193
+ line-height: var(--intergalactic-lh-200, 142%);
194
+ }
193
195
 
194
- & p {
195
- margin: 0 0 var(--intergalactic-spacing-5x, 20px) 0;
196
+ & p {
197
+ margin: 0 0 var(--intergalactic-spacing-5x, 20px) 0;
196
198
 
197
- &:last-child {
198
- margin-bottom: 0;
199
+ &:last-child {
200
+ margin-bottom: 0;
201
+ }
199
202
  }
200
- }
201
203
 
202
- & li {
203
- padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
204
- }
204
+ & li {
205
+ padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
206
+ }
205
207
 
206
- & ol ol li {
207
- padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
208
- }
208
+ & ol ol li {
209
+ padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
210
+ }
209
211
 
210
- & ol ol ol li {
211
- padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
212
- }
212
+ & ol ol ol li {
213
+ padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
214
+ }
213
215
 
214
- & ul li:before {
215
- width: 4px;
216
- height: 4px;
217
- border-radius: 50%;
218
- /* disable-tokens-validator */
219
- margin-top: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
220
- margin-left: var(--intergalactic-spacing-05x, 2px);
216
+ & ul li:before {
217
+ width: 4px;
218
+ height: 4px;
219
+ border-radius: 50%;
220
+ /* disable-tokens-validator */
221
+ margin-top: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
222
+ margin-left: var(--intergalactic-spacing-05x, 2px);
223
+ }
221
224
  }
222
225
  }
223
226
 
@@ -225,38 +228,40 @@ SText[size='100'] {
225
228
  font-size: var(--intergalactic-fs-100, 12px);
226
229
  line-height: var(--intergalactic-lh-100, 133%);
227
230
 
228
- & p,
229
- & li {
230
- font-size: var(--intergalactic-fs-100, 12px);
231
- line-height: var(--intergalactic-lh-100, 133%);
232
- }
231
+ &[formatTags] {
232
+ & p,
233
+ & li {
234
+ font-size: var(--intergalactic-fs-100, 12px);
235
+ line-height: var(--intergalactic-lh-100, 133%);
236
+ }
233
237
 
234
- & p {
235
- margin: 0 0 calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px)) 0;
238
+ & p {
239
+ margin: 0 0 calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px)) 0;
236
240
 
237
- &:last-child {
238
- margin-bottom: 0;
241
+ &:last-child {
242
+ margin-bottom: 0;
243
+ }
239
244
  }
240
- }
241
245
 
242
- & li {
243
- padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
244
- }
246
+ & li {
247
+ padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
248
+ }
245
249
 
246
- & ol ol li {
247
- padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
248
- }
250
+ & ol ol li {
251
+ padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
252
+ }
249
253
 
250
- & ol ol ol li {
251
- padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
252
- }
254
+ & ol ol ol li {
255
+ padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
256
+ }
253
257
 
254
- & ul li:before {
255
- width: 3px;
256
- height: 3px;
257
- border-radius: 50%;
258
- margin-top: var(--intergalactic-spacing-2x, 8px);
259
- margin-left: var(--intergalactic-spacing-05x, 2px);
258
+ & ul li:before {
259
+ width: 3px;
260
+ height: 3px;
261
+ border-radius: 50%;
262
+ margin-top: var(--intergalactic-spacing-2x, 8px);
263
+ margin-left: var(--intergalactic-spacing-05x, 2px);
264
+ }
260
265
  }
261
266
  }
262
267
 
@@ -264,39 +269,41 @@ SText[size='200'] {
264
269
  font-size: var(--intergalactic-fs-200, 14px);
265
270
  line-height: var(--intergalactic-lh-200, 142%);
266
271
 
267
- & p,
268
- & li {
269
- font-size: var(--intergalactic-fs-200, 14px);
270
- line-height: var(--intergalactic-lh-200, 142%);
271
- }
272
+ &[formatTags] {
273
+ & p,
274
+ & li {
275
+ font-size: var(--intergalactic-fs-200, 14px);
276
+ line-height: var(--intergalactic-lh-200, 142%);
277
+ }
272
278
 
273
- & p {
274
- margin: 0 0 var(--intergalactic-spacing-5x, 20px) 0;
279
+ & p {
280
+ margin: 0 0 var(--intergalactic-spacing-5x, 20px) 0;
275
281
 
276
- &:last-child {
277
- margin-bottom: 0;
282
+ &:last-child {
283
+ margin-bottom: 0;
284
+ }
278
285
  }
279
- }
280
286
 
281
- & li {
282
- padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
283
- }
287
+ & li {
288
+ padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
289
+ }
284
290
 
285
- & ol ol li {
286
- padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
287
- }
291
+ & ol ol li {
292
+ padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
293
+ }
288
294
 
289
- & ol ol ol li {
290
- padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
291
- }
295
+ & ol ol ol li {
296
+ padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
297
+ }
292
298
 
293
- & ul li:before {
294
- width: 4px;
295
- height: 4px;
296
- border-radius: 50%;
297
- /* disable-tokens-validator */
298
- margin-top: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
299
- margin-left: var(--intergalactic-spacing-05x, 2px);
299
+ & ul li:before {
300
+ width: 4px;
301
+ height: 4px;
302
+ border-radius: 50%;
303
+ /* disable-tokens-validator */
304
+ margin-top: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
305
+ margin-left: var(--intergalactic-spacing-05x, 2px);
306
+ }
300
307
  }
301
308
  }
302
309
 
@@ -304,38 +311,40 @@ SText[size='300'] {
304
311
  font-size: var(--intergalactic-fs-300, 16px);
305
312
  line-height: var(--intergalactic-lh-300, 150%);
306
313
 
307
- & p,
308
- & li {
309
- font-size: var(--intergalactic-fs-300, 16px);
310
- line-height: var(--intergalactic-lh-300, 150%);
311
- }
314
+ &[formatTags] {
315
+ & p,
316
+ & li {
317
+ font-size: var(--intergalactic-fs-300, 16px);
318
+ line-height: var(--intergalactic-lh-300, 150%);
319
+ }
312
320
 
313
- & p {
314
- margin: 0 0 var(--intergalactic-spacing-6x, 24px) 0;
321
+ & p {
322
+ margin: 0 0 var(--intergalactic-spacing-6x, 24px) 0;
315
323
 
316
- &:last-child {
317
- margin-bottom: 0;
324
+ &:last-child {
325
+ margin-bottom: 0;
326
+ }
318
327
  }
319
- }
320
328
 
321
- & li {
322
- padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
323
- }
329
+ & li {
330
+ padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
331
+ }
324
332
 
325
- & ol ol li {
326
- padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
327
- }
333
+ & ol ol li {
334
+ padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
335
+ }
328
336
 
329
- & ol ol ol li {
330
- padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
331
- }
337
+ & ol ol ol li {
338
+ padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
339
+ }
332
340
 
333
- & ul li:before {
334
- width: 5px;
335
- height: 5px;
336
- border-radius: 50%;
337
- margin-top: calc(var(--intergalactic-spacing-2x, 8px) + var(--intergalactic-spacing-05x, 2px));
338
- margin-left: var(--intergalactic-spacing-05x, 2px);
341
+ & ul li:before {
342
+ width: 5px;
343
+ height: 5px;
344
+ border-radius: 50%;
345
+ margin-top: calc(var(--intergalactic-spacing-2x, 8px) + var(--intergalactic-spacing-05x, 2px));
346
+ margin-left: var(--intergalactic-spacing-05x, 2px);
347
+ }
339
348
  }
340
349
  }
341
350
 
package/lib/types/index.d.ts CHANGED
@@ -44,6 +44,8 @@ export type TextProps = BoxProps & {
44
44
  use?: 'primary' | 'secondary';
45
45
  /** Makes text semi-transparent to indicate disabled state */
46
46
  disabled?: boolean;
47
+ /** Enable formatting/styling for all nested HTML tags with our default styles for them */
48
+ formatTags?: boolean;
47
49
  };
48
50
 
49
51
  /** @deprecated */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/typography",
3
3
  "description": "Semrush Typography Component",
4
- "version": "16.1.5-prerelease.4",
4
+ "version": "16.2.0-prerelease.1",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -14,11 +14,11 @@
14
14
  "types": "./lib/types/index.d.ts"
15
15
  },
16
16
  "dependencies": {
17
- "@semcore/flex-box": "16.0.5-prerelease.4",
18
- "@semcore/icon": "16.4.0-prerelease.4"
17
+ "@semcore/flex-box": "16.0.6-prerelease.1",
18
+ "@semcore/icon": "16.5.0-prerelease.1"
19
19
  },
20
20
  "peerDependencies": {
21
- "@semcore/base-components": "^16.1.2-prerelease.4"
21
+ "@semcore/base-components": "^16.2.0-prerelease.1"
22
22
  },
23
23
  "repository": {
24
24
  "type": "git",
@@ -27,8 +27,8 @@
27
27
  },
28
28
  "devDependencies": {
29
29
  "csstype": "3.1.3",
30
- "@semcore/testing-utils": "1.0.0",
31
- "@semcore/core": "16.0.4-prerelease.4"
30
+ "@semcore/core": "16.0.4",
31
+ "@semcore/testing-utils": "1.0.0"
32
32
  },
33
33
  "scripts": {
34
34
  "build": "pnpm semcore-builder --source=js && pnpm vite build"