Skip to content

Commit de2b5ba

Browse files
hejsztynxhejsztynx
committed
feat: introduce enriched html coloring
1 parent a11e375 commit de2b5ba

6 files changed

Lines changed: 126 additions & 61 deletions

File tree

‎docs/docs/fundamentals/colors-demo.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import Tabs from '@theme/Tabs';
2+
import TabItem from '@theme/TabItem';
3+
4+
<Tabs groupId="package-managers">
5+
<TabItem value="npm" label="NPM">
6+
```bash
7+
npm install react-native-enriched-html
8+
```
9+
</TabItem>
10+
11+
<TabItem value="yarn" label="YARN">
12+
```bash
13+
yarn add react-native-enriched-html
14+
```
15+
</TabItem>
16+
</Tabs>
17+
18+
:::note
19+
20+
This is a note
21+
22+
:::
23+
24+
:::info
25+
26+
This is a info
27+
28+
:::
29+
30+
:::tip
31+
32+
This is a tip
33+
34+
:::
35+
36+
:::caution
37+
38+
This is a caution
39+
40+
:::
41+
42+
<details>
43+
<summary>details</summary>
44+
45+
Inner details
46+
47+
This is a [link](/fundamentals/getting-started)
48+
</details>
49+
50+
### Link
51+
52+
This is a [link](/fundamentals/getting-started)

‎docs/src/css/colors.css‎

Lines changed: 67 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,11 @@
5757
--swm-green-dark-60: #a0dfc0;
5858
--swm-green-dark-40: #d3f5e4;
5959

60-
--swm-red-light-100: #ff6259;
61-
--swm-red-light-80: #fa7f7c;
62-
--swm-red-light-60: #ffa3a1;
63-
--swm-red-light-40: #ffd2d7;
64-
--swm-red-light-20: #ffedf0;
60+
--swm-red-light-100: #e62e2e;
61+
--swm-red-light-80: #f26d6d;
62+
--swm-red-light-60: #f79e9e;
63+
--swm-red-light-40: #fcd4d4;
64+
--swm-red-light-20: #feebeb;
6565

6666
--swm-red-dark-140: #5a3b46;
6767
--swm-red-dark-120: #914f55;
@@ -70,6 +70,19 @@
7070
--swm-red-dark-60: #ffb4b2;
7171
--swm-red-dark-40: #ffdcdb;
7272

73+
--swm-orange-light-100: #ed7253;
74+
--swm-orange-light-80: #f9a089;
75+
--swm-orange-light-60: #ffbead;
76+
--swm-orange-light-40: #ffd8d2;
77+
--swm-orange-light-20: #feefee;
78+
79+
--swm-orange-dark-140: #5c3c33;
80+
--swm-orange-dark-120: #8c5242;
81+
--swm-orange-dark-100: #ff8560;
82+
--swm-orange-dark-80: #ffa588;
83+
--swm-orange-dark-60: #ffbda6;
84+
--swm-orange-dark-40: #ffe3d9;
85+
7386
--swm-yellow-light-100: #ffd61e;
7487
--swm-yellow-light-80: #ffe04b;
7588
--swm-yellow-light-60: #ffe780;
@@ -121,11 +134,13 @@
121134
/* Typography */
122135
--ifm-heading-color: var(--ifm-color-primary);
123136
--ifm-font-color-base: var(--swm-navy-light-100);
137+
--ifm-link-color: var(--swm-blue-light-100);
138+
--ifm-link-hover-color: var(--swm-blue-light-60);
124139

125140
/* Tabs */
126141
--swm-tab: var(--swm-navy-light-20);
127-
--swm-tab-hover: var(--swm-blue-light-80);
128-
--swm-tab-active: var(--swm-blue-light-100);
142+
--swm-tab-hover: var(--swm-orange-light-80);
143+
--swm-tab-active: var(--swm-orange-light-100);
129144

130145
/* Table of Contents */
131146
--ifm-toc-border-color: transparent;
@@ -138,8 +153,8 @@
138153
--swm-hire-us-toc-border-hover: var(--swm-navy-light-100);
139154

140155
/* Details section */
141-
--swm-details-foreground: var(--swm-purple-light-20);
142-
--swm-details-background: var(--swm-purple-light-100);
156+
--swm-details-foreground: var(--swm-orange-light-20);
157+
--swm-details-background: var(--swm-orange-light-100);
143158

144159
/* Admonitions */
145160
--swm-admonition-color-secondary: var(--swm-navy-light-10);
@@ -176,7 +191,7 @@
176191
--swm-interactive-button-color: var(--swm-navy-light-60);
177192
--swm-interactive-button-active: var(--ifm-font-color-base);
178193

179-
--swm-interactive-slider: var(--swm-blue-light-100);
194+
--swm-interactive-slider: var(--swm-orange-light-100);
180195
--swm-interactive-slider-rail: var(--swm-navy-light-20);
181196

182197
/* --swm-navy-light-100 in rgba */
@@ -192,8 +207,8 @@
192207

193208
/* Pagination */
194209
--swm-paginator-sublabel: var(--swm-navy-light-100);
195-
--swm-paginator-label: var(--swm-blue-light-80);
196-
--swm-paginator-label-hover: var(--swm-blue-light-100);
210+
--swm-paginator-label: var(--swm-orange-light-80);
211+
--swm-paginator-label-hover: var(--swm-orange-light-100);
197212

198213
/* Footer */
199214
--swm-brand-copyright-color: var(--swm-navy-light-100);
@@ -208,12 +223,12 @@
208223
--swm-searchbar-text-color: var(--swm-navy-light-60);
209224
--swm-searchbar-background: var(--swm-background);
210225
--swm-searchbar-border: var(--swm-navy-light-20);
211-
--swm-searchbar-border-hover: var(--swm-blue-light-100);
226+
--swm-searchbar-border-hover: var(--swm-orange-light-100);
212227

213-
--swm-search-hit-background: var(--swm-blue-light-20);
214-
--swm-search-hit-background-hover: var(--swm-blue-light-80);
215-
--swm-search-hit-border: var(--swm-blue-light-40);
216-
--swm-search-hit-border-hover: var(--swm-blue-light-100);
228+
--swm-search-hit-background: var(--swm-orange-light-20);
229+
--swm-search-hit-background-hover: var(--swm-orange-light-80);
230+
--swm-search-hit-border: var(--swm-orange-light-40);
231+
--swm-search-hit-border-hover: var(--swm-orange-light-100);
217232
--swm-search-hit-active-color: var(--swm-off-white);
218233

219234
--swm-docsearch-hit-source-color: var(--swm-navy-light-100);
@@ -232,32 +247,30 @@
232247

233248
/* Landing */
234249
--swm-landing-heading: var(--ifm-font-color-base);
235-
--swm-landing-heading-selected: var(--swm-purple-light-100);
250+
--swm-landing-heading-selected: var(--swm-orange-light-100);
236251
--swm-landing-heading-selected-border: var(--swm-navy-light-100);
237252

238253
--swm-landing-horse: var(--swm-navy-light-100);
239254

240-
--swm-landing-button-purple: var(--swm-purple-light-100);
241-
242-
--swm-landing-feature-item: var(--swm-purple-light-40);
243-
--swm-landing-feature-item-shadow: var(--swm-purple-light-100);
255+
--swm-landing-feature-item: var(--swm-orange-light-40);
256+
--swm-landing-feature-item-shadow: var(--swm-orange-light-100);
244257

245258
--swm-landing-sponsors-color: var(--ifm-font-color-base);
246259

247260
/* Hire Us Section */
248261

249-
--swm-hire-us-section-title: var(--swm-blue-light-60);
262+
--swm-hire-us-section-title: var(--swm-orange-light-60);
250263
--swm-hire-us-section: var(--swm-navy-light-100);
251264
--swm-hire-us-section-color: var(--swm-off-white);
252265

253266
/* Cards */
254267
--swm-card-background: var(--swm-background);
255268
--swm-card-border: var(--swm-navy-light-20);
256-
--swm-card-border-hover: var(--swm-blue-light-100);
269+
--swm-card-border-hover: var(--swm-orange-light-100);
257270

258271
/* Sidebar label*/
259272
--swm-sidebar-label-text-new: var(--swm-off-white);
260-
--swm-sidebar-label-background-new: var(--swm-blue-light-100);
273+
--swm-sidebar-label-background-new: var(--swm-orange-light-100);
261274

262275
--swm-sidebar-label-text-experimental: var(--swm-navy-light-100);
263276
--swm-sidebar-label-background-experimental: var(--swm-yellow-light-40);
@@ -270,12 +283,12 @@
270283
/* Versions dropdown */
271284
--swm-dropdown-versions-background: var(--swm-off-white);
272285
--swm-dropdown-versions-item: var(--swm-navy-light-100);
273-
--swm-dropdown-versions-item-border: var(--swm-blue-light-40);
274-
--swm-dropdown-versions-item-background: var(--swm-blue-light-20);
286+
--swm-dropdown-versions-item-border: var(--swm-orange-light-40);
287+
--swm-dropdown-versions-item-background: var(--swm-orange-light-20);
275288

276289
--swm-dropdown-versions-item-active: var(--swm-off-white);
277-
--swm-dropdown-versions-item-border-active: var(--swm-blue-light-100);
278-
--swm-dropdown-versions-item-background-active: var(--swm-blue-light-80);
290+
--swm-dropdown-versions-item-border-active: var(--swm-orange-light-100);
291+
--swm-dropdown-versions-item-background-active: var(--swm-orange-light-80);
279292

280293
--swm-dropdown-versions-item-hover: var(--swm-navy-light-100);
281294
--swm-dropdown-versions-item-active-hover: var(--swm-blue-light-100);
@@ -327,16 +340,18 @@
327340

328341
/* Color Mode */
329342
--swm-color-mode-enabled: var(--swm-off-navy);
330-
--swm-color-mode-enabled-color-landing: var(--swm-purple-dark-120);
343+
--swm-color-mode-enabled-color-landing: var(--swm-orange-dark-120);
331344
--swm-color-mode-disabled-color: var(--swm-navy-light-40);
332345

333346
/* Typography */
334347
--ifm-font-color-base: var(--swm-navy-light-10);
348+
--ifm-link-color: var(--swm-blue-dark-80);
349+
--ifm-link-hover-color: var(--swm-blue-dark-60);
335350

336351
/* Tabs */
337352
--swm-tab: var(--swm-navy-light-60);
338-
--swm-tab-hover: var(--swm-blue-dark-60);
339-
--swm-tab-active: var(--swm-blue-light-80);
353+
--swm-tab-hover: var(--swm-orange-dark-60);
354+
--swm-tab-active: var(--swm-orange-light-80);
340355

341356
/* Table of Contents */
342357
--ifm-toc-border-color: transparent;
@@ -349,8 +364,8 @@
349364
--swm-hire-us-toc-border-hover: var(--swm-navy-light-40);
350365

351366
/* Details section */
352-
--swm-details-foreground: var(--swm-blue-dark-120);
353-
--swm-details-background: var(--swm-blue-dark-140);
367+
--swm-details-foreground: var(--swm-orange-dark-120);
368+
--swm-details-background: var(--swm-orange-dark-140);
354369

355370
/* Admonitions */
356371
--swm-admonition-color-secondary: var(--swm-navy-dark-70);
@@ -384,7 +399,7 @@
384399
/* Interactive Examples */
385400
--swm-interactive-button-color: var(--swm-navy-light-40);
386401

387-
--swm-interactive-slider: var(--swm-blue-light-80);
402+
--swm-interactive-slider: var(--swm-orange-light-80);
388403
--swm-interactive-slider-rail: var(--swm-navy-light-20);
389404

390405
/* --swm-navy-light-20 in rgba schema */
@@ -396,8 +411,8 @@
396411

397412
/* Pagination */
398413
--swm-paginator-sublabel: var(--swm-navy-light-20);
399-
--swm-paginator-label: var(--swm-blue-light-60);
400-
--swm-paginator-label-hover: var(--swm-blue-light-40);
414+
--swm-paginator-label: var(--swm-orange-light-60);
415+
--swm-paginator-label-hover: var(--swm-orange-light-40);
401416

402417
/* Footer */
403418
--swm-brand-copyright-color: var(--swm-navy-light-20);
@@ -409,12 +424,12 @@
409424
/* Search */
410425
--swm-searchbar-text-color: var(--swm-navy-dark-40);
411426
--swm-searchbar-border: var(--swm-navy-dark-60);
412-
--swm-searchbar-border-hover: var(--swm-blue-dark-80);
427+
--swm-searchbar-border-hover: var(--swm-orange-dark-80);
413428

414-
--swm-search-hit-background: var(--swm-blue-dark-120);
415-
--swm-search-hit-background-hover: var(--swm-blue-dark-40);
416-
--swm-search-hit-border: var(--swm-blue-dark-120);
417-
--swm-search-hit-border-hover: var(--swm-blue-dark-40);
429+
--swm-search-hit-background: var(--swm-orange-dark-120);
430+
--swm-search-hit-background-hover: var(--swm-orange-dark-40);
431+
--swm-search-hit-border: var(--swm-orange-dark-120);
432+
--swm-search-hit-border-hover: var(--swm-orange-dark-40);
418433
--swm-search-hit-active-color: var(--swm-navy-light-100);
419434

420435
--swm-docsearch-hit-source-color: var(--swm-navy-light-10);
@@ -434,32 +449,30 @@
434449

435450
/* Landing */
436451
--swm-landing-heading: var(--swm-off-white);
437-
--swm-landing-heading-selected: var(--swm-purple-dark-40);
452+
--swm-landing-heading-selected: var(--swm-orange-dark-40);
438453
--swm-landing-heading-selected-border: var(--swm-navy-light-20);
439454

440455
--swm-landing-horse: var(--swm-off-white);
441456

442-
--swm-landing-button-purple: var(--swm-purple-dark-100);
443-
444-
--swm-landing-feature-item: var(--swm-purple-dark-100);
445-
--swm-landing-feature-item-shadow: var(--swm-purple-dark-140);
457+
--swm-landing-feature-item: var(--swm-orange-dark-100);
458+
--swm-landing-feature-item-shadow: var(--swm-orange-dark-140);
446459

447460
--swm-landing-sponsors-color: var(--swm-off-white);
448461

449462
/* Hire Us Section */
450463

451-
--swm-hire-us-section-title: var(--swm-purple-dark-100);
464+
--swm-hire-us-section-title: var(--swm-orange-dark-100);
452465
--swm-hire-us-section: var(--swm-off-white);
453466
--swm-hire-us-section-color: var(--swm-purple-light-100);
454467

455468
/* Cards */
456469
--swm-card-background: var(--swm-navy);
457470
--swm-card-border: var(--swm-navy-dark-60);
458-
--swm-card-border-hover: var(--swm-blue-dark-80);
471+
--swm-card-border-hover: var(--swm-orange-dark-80);
459472

460473
/* Sidebar label*/
461474
--swm-sidebar-label-text-new: var(--swm-off-white);
462-
--swm-sidebar-label-background-new: var(--swm-blue-dark-120);
475+
--swm-sidebar-label-background-new: var(--swm-orange-dark-120);
463476

464477
--swm-sidebar-label-text-experimental: var(--swm-off-white);
465478
--swm-sidebar-label-background-experimental: var(--swm-yellow-dark-120);
@@ -473,12 +486,12 @@
473486

474487
--swm-dropdown-versions-background: var(--swm-off-navy);
475488
--swm-dropdown-versions-item: var(--swm-off-white);
476-
--swm-dropdown-versions-item-border: var(--swm-blue-dark-40);
477-
--swm-dropdown-versions-item-background: var(--swm-blue-dark-40);
489+
--swm-dropdown-versions-item-border: var(--swm-orange-dark-40);
490+
--swm-dropdown-versions-item-background: var(--swm-orange-dark-40);
478491

479492
--swm-dropdown-versions-item-active: var(--swm-off-white);
480-
--swm-dropdown-versions-item-border-active: var(--swm-blue-dark-120);
481-
--swm-dropdown-versions-item-background-active: var(--swm-blue-dark-120);
493+
--swm-dropdown-versions-item-border-active: var(--swm-orange-dark-120);
494+
--swm-dropdown-versions-item-background-active: var(--swm-orange-dark-120);
482495

483496
--swm-dropdown-versions-item-hover: var(--swm-navy-dark-100);
484497
--swm-dropdown-versions-item-active-hover: var(--swm-blue-dark-100);

‎docs/src/css/typography.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ code {
168168
font-weight: 500;
169169
text-decoration: none;
170170

171-
border-bottom: 1px solid var(--ifm-font-color-base);
171+
border-bottom: 1px solid var(--ifm-link-color);
172172
}
173173

174174
/* Sidebar */

‎docs/src/theme/CodeBlock/highlighting-dark.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,13 @@ module.exports = {
6060
'attr-value',
6161
],
6262
style: {
63-
color: 'var(--swm-red-light-80)',
63+
color: 'var(--swm-purple-light-80)',
6464
},
6565
},
6666
{
6767
types: ['function', 'function-variable'],
6868
style: {
69-
color: 'var(--swm-purple-light-80)',
69+
color: 'var(--swm-orange-light-80)',
7070
},
7171
},
7272
{

‎docs/src/theme/CodeBlock/highlighting-light.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,13 @@ module.exports = {
6060
'attr-value',
6161
],
6262
style: {
63-
color: 'var(--swm-red-light-100)',
63+
color: 'var(--swm-purple-light-100)',
6464
},
6565
},
6666
{
6767
types: ['function', 'function-variable'],
6868
style: {
69-
color: 'var(--swm-purple-light-100)',
69+
color: 'var(--swm-orange-light-100)',
7070
},
7171
},
7272
{

‎docs/src/theme/muiTheme.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const extTheme = extendTheme({
1717
main: '#001a72', //--swm-navy-light-100
1818
},
1919
secondary: {
20-
main: '#782aeb', //--swm-purple-light-100
20+
main: '#ef623e', //--swm-orange-light-100
2121
},
2222
background: {
2323
default: '#fcfcff',
@@ -34,7 +34,7 @@ const extTheme = extendTheme({
3434
main: '#eef0ff', //--swm-navy-light-10
3535
},
3636
secondary: {
37-
main: '#b58df1', //--swm-purple-light-80
37+
main: '#f9a089', //--swm-orange-light-80
3838
},
3939
background: {
4040
default: '#232736',

0 commit comments

Comments
 (0)