Skip to content

docs: introduce enriched-html coloring #718

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hejsztynx wants to merge 5 commits into
base: feat/docs
Choose a base branch
from
Open

docs: introduce enriched-html coloring #718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0228346
feat: introduce enriched html coloring
hejsztynx Jul 21, 2026
b26d2ba
fix: stale link
hejsztynx Jul 22, 2026
6828d41
fix: link border color, stale typography color
hejsztynx Jul 22, 2026
367c24e
Merge branch 'feat/docs' into @ksienkiewicz/docs-colors
hejsztynx Jul 22, 2026
400fb13
Merge branch 'feat/docs' into @ksienkiewicz/docs-colors
hejsztynx Jul 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions docs/docs/fundamentals/colors-demo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs groupId="package-managers">
Comment thread
hejsztynx marked this conversation as resolved.
<TabItem value="npm" label="NPM">
```bash
npm install react-native-enriched-html
```
</TabItem>

<TabItem value="yarn" label="YARN">
```bash
yarn add react-native-enriched-html
```
</TabItem>
</Tabs>

:::note

This is a note

:::

:::info

This is an info message

:::

:::tip

This is a tip

:::

:::caution

This is a caution

:::

<details>
<summary>details</summary>

Inner details

This is a [link](/)
</details>

### Link

This is a [link](/)
121 changes: 67 additions & 54 deletions docs/src/css/colors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,11 @@
--swm-green-dark-60: #a0dfc0;
--swm-green-dark-40: #d3f5e4;

--swm-red-light-100: #ff6259;
--swm-red-light-80: #fa7f7c;
--swm-red-light-60: #ffa3a1;
--swm-red-light-40: #ffd2d7;
--swm-red-light-20: #ffedf0;
--swm-red-light-100: #e62e2e;
--swm-red-light-80: #f26d6d;
--swm-red-light-60: #f79e9e;
--swm-red-light-40: #fcd4d4;
--swm-red-light-20: #feebeb;

--swm-red-dark-140: #5a3b46;
--swm-red-dark-120: #914f55;
Expand All @@ -70,6 +70,19 @@
--swm-red-dark-60: #ffb4b2;
--swm-red-dark-40: #ffdcdb;

--swm-orange-light-100: #ed7253;
--swm-orange-light-80: #f9a089;
--swm-orange-light-60: #ffbead;
--swm-orange-light-40: #ffd8d2;
--swm-orange-light-20: #feefee;

--swm-orange-dark-140: #5c3c33;
--swm-orange-dark-120: #8c5242;
--swm-orange-dark-100: #ff8560;
--swm-orange-dark-80: #ffa588;
--swm-orange-dark-60: #ffbda6;
--swm-orange-dark-40: #ffe3d9;

--swm-yellow-light-100: #ffd61e;
--swm-yellow-light-80: #ffe04b;
--swm-yellow-light-60: #ffe780;
Expand Down Expand Up @@ -121,11 +134,13 @@
/* Typography */
--ifm-heading-color: var(--ifm-color-primary);
--ifm-font-color-base: var(--swm-navy-light-100);
--ifm-link-color: var(--swm-blue-light-100);
--ifm-link-hover-color: var(--swm-blue-light-60);

/* Tabs */
--swm-tab: var(--swm-navy-light-20);
--swm-tab-hover: var(--swm-blue-light-80);
--swm-tab-active: var(--swm-blue-light-100);
--swm-tab-hover: var(--swm-orange-light-80);
--swm-tab-active: var(--swm-orange-light-100);

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

/* Details section */
--swm-details-foreground: var(--swm-purple-light-20);
--swm-details-background: var(--swm-purple-light-100);
--swm-details-foreground: var(--swm-orange-light-20);
--swm-details-background: var(--swm-orange-light-100);

/* Admonitions */
--swm-admonition-color-secondary: var(--swm-navy-light-10);
Expand Down Expand Up @@ -176,7 +191,7 @@
--swm-interactive-button-color: var(--swm-navy-light-60);
--swm-interactive-button-active: var(--ifm-font-color-base);

--swm-interactive-slider: var(--swm-blue-light-100);
--swm-interactive-slider: var(--swm-orange-light-100);
--swm-interactive-slider-rail: var(--swm-navy-light-20);

/* --swm-navy-light-100 in rgba */
Expand All @@ -192,8 +207,8 @@

/* Pagination */
--swm-paginator-sublabel: var(--swm-navy-light-100);
--swm-paginator-label: var(--swm-blue-light-80);
--swm-paginator-label-hover: var(--swm-blue-light-100);
--swm-paginator-label: var(--swm-orange-light-80);
--swm-paginator-label-hover: var(--swm-orange-light-100);

/* Footer */
--swm-brand-copyright-color: var(--swm-navy-light-100);
Expand All @@ -208,12 +223,12 @@
--swm-searchbar-text-color: var(--swm-navy-light-60);
--swm-searchbar-background: var(--swm-background);
--swm-searchbar-border: var(--swm-navy-light-20);
--swm-searchbar-border-hover: var(--swm-blue-light-100);
--swm-searchbar-border-hover: var(--swm-orange-light-100);

--swm-search-hit-background: var(--swm-blue-light-20);
--swm-search-hit-background-hover: var(--swm-blue-light-80);
--swm-search-hit-border: var(--swm-blue-light-40);
--swm-search-hit-border-hover: var(--swm-blue-light-100);
--swm-search-hit-background: var(--swm-orange-light-20);
--swm-search-hit-background-hover: var(--swm-orange-light-80);
--swm-search-hit-border: var(--swm-orange-light-40);
--swm-search-hit-border-hover: var(--swm-orange-light-100);
--swm-search-hit-active-color: var(--swm-off-white);

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

/* Landing */
--swm-landing-heading: var(--ifm-font-color-base);
--swm-landing-heading-selected: var(--swm-purple-light-100);
--swm-landing-heading-selected: var(--swm-orange-light-100);
--swm-landing-heading-selected-border: var(--swm-navy-light-100);

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

--swm-landing-button-purple: var(--swm-purple-light-100);

--swm-landing-feature-item: var(--swm-purple-light-40);
--swm-landing-feature-item-shadow: var(--swm-purple-light-100);
--swm-landing-feature-item: var(--swm-orange-light-40);
--swm-landing-feature-item-shadow: var(--swm-orange-light-100);

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

/* Hire Us Section */

--swm-hire-us-section-title: var(--swm-blue-light-60);
--swm-hire-us-section-title: var(--swm-orange-light-60);
--swm-hire-us-section: var(--swm-navy-light-100);
--swm-hire-us-section-color: var(--swm-off-white);

/* Cards */
--swm-card-background: var(--swm-background);
--swm-card-border: var(--swm-navy-light-20);
--swm-card-border-hover: var(--swm-blue-light-100);
--swm-card-border-hover: var(--swm-orange-light-100);

/* Sidebar label*/
--swm-sidebar-label-text-new: var(--swm-off-white);
--swm-sidebar-label-background-new: var(--swm-blue-light-100);
--swm-sidebar-label-background-new: var(--swm-orange-light-100);

--swm-sidebar-label-text-experimental: var(--swm-navy-light-100);
--swm-sidebar-label-background-experimental: var(--swm-yellow-light-40);
Expand All @@ -270,12 +283,12 @@
/* Versions dropdown */
--swm-dropdown-versions-background: var(--swm-off-white);
--swm-dropdown-versions-item: var(--swm-navy-light-100);
--swm-dropdown-versions-item-border: var(--swm-blue-light-40);
--swm-dropdown-versions-item-background: var(--swm-blue-light-20);
--swm-dropdown-versions-item-border: var(--swm-orange-light-40);
--swm-dropdown-versions-item-background: var(--swm-orange-light-20);

--swm-dropdown-versions-item-active: var(--swm-off-white);
--swm-dropdown-versions-item-border-active: var(--swm-blue-light-100);
--swm-dropdown-versions-item-background-active: var(--swm-blue-light-80);
--swm-dropdown-versions-item-border-active: var(--swm-orange-light-100);
--swm-dropdown-versions-item-background-active: var(--swm-orange-light-80);

--swm-dropdown-versions-item-hover: var(--swm-navy-light-100);
--swm-dropdown-versions-item-active-hover: var(--swm-blue-light-100);
Comment thread
hejsztynx marked this conversation as resolved.
Expand Down Expand Up @@ -327,16 +340,18 @@

/* Color Mode */
--swm-color-mode-enabled: var(--swm-off-navy);
--swm-color-mode-enabled-color-landing: var(--swm-purple-dark-120);
--swm-color-mode-enabled-color-landing: var(--swm-orange-dark-120);
--swm-color-mode-disabled-color: var(--swm-navy-light-40);

/* Typography */
--ifm-font-color-base: var(--swm-navy-light-10);
--ifm-link-color: var(--swm-blue-dark-80);
--ifm-link-hover-color: var(--swm-blue-dark-60);

/* Tabs */
--swm-tab: var(--swm-navy-light-60);
--swm-tab-hover: var(--swm-blue-dark-60);
--swm-tab-active: var(--swm-blue-light-80);
--swm-tab-hover: var(--swm-orange-dark-60);
--swm-tab-active: var(--swm-orange-light-80);

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

/* Details section */
--swm-details-foreground: var(--swm-blue-dark-120);
--swm-details-background: var(--swm-blue-dark-140);
--swm-details-foreground: var(--swm-orange-dark-120);
--swm-details-background: var(--swm-orange-dark-140);

/* Admonitions */
--swm-admonition-color-secondary: var(--swm-navy-dark-70);
Expand Down Expand Up @@ -384,7 +399,7 @@
/* Interactive Examples */
--swm-interactive-button-color: var(--swm-navy-light-40);

--swm-interactive-slider: var(--swm-blue-light-80);
--swm-interactive-slider: var(--swm-orange-light-80);
--swm-interactive-slider-rail: var(--swm-navy-light-20);

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

/* Pagination */
--swm-paginator-sublabel: var(--swm-navy-light-20);
--swm-paginator-label: var(--swm-blue-light-60);
--swm-paginator-label-hover: var(--swm-blue-light-40);
--swm-paginator-label: var(--swm-orange-light-60);
--swm-paginator-label-hover: var(--swm-orange-light-40);

/* Footer */
--swm-brand-copyright-color: var(--swm-navy-light-20);
Expand All @@ -409,12 +424,12 @@
/* Search */
--swm-searchbar-text-color: var(--swm-navy-dark-40);
--swm-searchbar-border: var(--swm-navy-dark-60);
--swm-searchbar-border-hover: var(--swm-blue-dark-80);
--swm-searchbar-border-hover: var(--swm-orange-dark-80);

--swm-search-hit-background: var(--swm-blue-dark-120);
--swm-search-hit-background-hover: var(--swm-blue-dark-40);
--swm-search-hit-border: var(--swm-blue-dark-120);
--swm-search-hit-border-hover: var(--swm-blue-dark-40);
--swm-search-hit-background: var(--swm-orange-dark-120);
--swm-search-hit-background-hover: var(--swm-orange-dark-40);
--swm-search-hit-border: var(--swm-orange-dark-120);
--swm-search-hit-border-hover: var(--swm-orange-dark-40);
--swm-search-hit-active-color: var(--swm-navy-light-100);

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

/* Landing */
--swm-landing-heading: var(--swm-off-white);
--swm-landing-heading-selected: var(--swm-purple-dark-40);
--swm-landing-heading-selected: var(--swm-orange-dark-40);
--swm-landing-heading-selected-border: var(--swm-navy-light-20);

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

--swm-landing-button-purple: var(--swm-purple-dark-100);

--swm-landing-feature-item: var(--swm-purple-dark-100);
--swm-landing-feature-item-shadow: var(--swm-purple-dark-140);
--swm-landing-feature-item: var(--swm-orange-dark-100);
--swm-landing-feature-item-shadow: var(--swm-orange-dark-140);

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

/* Hire Us Section */

--swm-hire-us-section-title: var(--swm-purple-dark-100);
--swm-hire-us-section-title: var(--swm-orange-dark-100);
--swm-hire-us-section: var(--swm-off-white);
--swm-hire-us-section-color: var(--swm-purple-light-100);

/* Cards */
--swm-card-background: var(--swm-navy);
--swm-card-border: var(--swm-navy-dark-60);
--swm-card-border-hover: var(--swm-blue-dark-80);
--swm-card-border-hover: var(--swm-orange-dark-80);

/* Sidebar label*/
--swm-sidebar-label-text-new: var(--swm-off-white);
--swm-sidebar-label-background-new: var(--swm-blue-dark-120);
--swm-sidebar-label-background-new: var(--swm-orange-dark-120);

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

--swm-dropdown-versions-background: var(--swm-off-navy);
--swm-dropdown-versions-item: var(--swm-off-white);
--swm-dropdown-versions-item-border: var(--swm-blue-dark-40);
--swm-dropdown-versions-item-background: var(--swm-blue-dark-40);
--swm-dropdown-versions-item-border: var(--swm-orange-dark-40);
--swm-dropdown-versions-item-background: var(--swm-orange-dark-40);

--swm-dropdown-versions-item-active: var(--swm-off-white);
--swm-dropdown-versions-item-border-active: var(--swm-blue-dark-120);
--swm-dropdown-versions-item-background-active: var(--swm-blue-dark-120);
--swm-dropdown-versions-item-border-active: var(--swm-orange-dark-120);
--swm-dropdown-versions-item-background-active: var(--swm-orange-dark-120);

--swm-dropdown-versions-item-hover: var(--swm-navy-dark-100);
--swm-dropdown-versions-item-active-hover: var(--swm-blue-dark-100);
Comment thread
hejsztynx marked this conversation as resolved.
Expand Down
2 changes: 1 addition & 1 deletion docs/src/css/typography.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ code {
font-weight: 500;
text-decoration: none;

border-bottom: 1px solid var(--ifm-font-color-base);
border-bottom: 1px solid currentColor;
}

/* Sidebar */
Expand Down
4 changes: 2 additions & 2 deletions docs/src/theme/CodeBlock/highlighting-dark.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,13 @@ module.exports = {
'attr-value',
],
style: {
color: 'var(--swm-red-light-80)',
color: 'var(--swm-purple-light-80)',
},
},
{
types: ['function', 'function-variable'],
style: {
color: 'var(--swm-purple-light-80)',
color: 'var(--swm-orange-light-80)',
},
},
{
Expand Down
4 changes: 2 additions & 2 deletions docs/src/theme/CodeBlock/highlighting-light.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,13 @@ module.exports = {
'attr-value',
],
style: {
color: 'var(--swm-red-light-100)',
color: 'var(--swm-purple-light-100)',
},
},
{
types: ['function', 'function-variable'],
style: {
color: 'var(--swm-purple-light-100)',
color: 'var(--swm-orange-light-100)',
},
},
{
Expand Down
4 changes: 2 additions & 2 deletions docs/src/theme/muiTheme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const extTheme = extendTheme({
main: '#001a72', //--swm-navy-light-100
},
secondary: {
main: '#782aeb', //--swm-purple-light-100
main: '#ed7253', //--swm-orange-light-100
},
background: {
default: '#fcfcff',
Expand All @@ -34,7 +34,7 @@ const extTheme = extendTheme({
main: '#eef0ff', //--swm-navy-light-10
},
secondary: {
main: '#b58df1', //--swm-purple-light-80
main: '#f9a089', //--swm-orange-light-80
},
background: {
default: '#232736',
Expand Down
Loading