diff --git a/README.md b/README.md
index fc5c24999..59555147b 100644
--- a/README.md
+++ b/README.md
@@ -53,16 +53,7 @@ To install React UI in your app:
npm install --save @react-ui-org/react-ui
```
-2. Load the Titillium Web font:
-
- ```html
-
- ```
-
-3. Load React UI CSS in your app:
+2. Load React UI CSS in your app:
@@ -73,7 +64,7 @@ To install React UI in your app:
-4. Import and use any of React UI components in your app:
+3. Import and use any of React UI components in your app:
```jsx
import { Button } from '@react-ui-org/react-ui';
diff --git a/RELEASING.md b/RELEASING.md
index baf2eb577..3d4bb3496 100644
--- a/RELEASING.md
+++ b/RELEASING.md
@@ -12,9 +12,9 @@ In order for the automation to work properly, contributors must follow the
1. Pull requests are automatically labelled by branch name. Labels are then used
for:
- 1. resolving next [semantic version number][semver]
- (BREAKING.FEATURE.PATCH),
- 2. grouping changes in changelog.
+ 1. resolving next [semantic version number][semver]
+ (BREAKING.FEATURE.PATCH),
+ 2. grouping changes in changelog.
2. Release draft with changelog is generated as pull requests are merged into
the `master` branch. Invididual PR names are listed and grouped by type based
@@ -30,35 +30,36 @@ See the source of `.github/workflows` for details.
[GitHub releases page][gh-releases] to see what the changelog looks like and
what will be the next version number.
- **Don't edit manually until you are ready to publish the release.** Release
- draft is automatically overwritten everytime a change is merged to `master`.
+ **Don't edit manually until you are ready to publish the release.** Release
+ draft is automatically overwritten everytime a change is merged to `master`.
2. **Manual:** once you are ready to publish a release:
- 1. **Bump the version number** in `package.json` and `package-lock.json`.
- Make sure it matches the intended version number in the release draft.
- **Don't combine this step with any other changes,** they wouldn't be
- reflected in the changelog.
+ 1. **Bump the version number** in `package.json` and `package-lock.json`.
+ Make sure it matches the intended version number in the release draft.
+ **Don't combine this step with any other changes,** they wouldn't be
+ reflected in the changelog.
- 2. Now is also your **chance to review and adjust (if necessary) the intended
- version and actual changelog before the release is published.**
- Automatic release drafting is skipped when a version change in
- `package.json` is detected so this time your changes will not be
- overwritten. Save your changes in release draft with the _Save draft_
- button, **do not publish** yet!
+ 2. Now is also your **chance to review and adjust (if necessary) the
+ intended
+ version and actual changelog before the release is published.**
+ Automatic release drafting is skipped when a version change in
+ `package.json` is detected so this time your changes will not be
+ overwritten. Save your changes in release draft with the _Save draft_
+ button, **do not publish** yet!
- 3. Get back to the repository, commit both files as
- `Bump version to ` in `release/` branch,
- create a pull request, hold your breath, and—merge it.
+ 3. Get back to the repository, commit both files as
+ `Bump version to ` in `release/` branch,
+ create a pull request, hold your breath, and—merge it.
3. **Automatic:** once the release pull request from step 2.3 is merged, the
following actions are triggered automatically:
- 1. GitHub release draft with name corresponding to the version number from
- step 2 is published.
- 2. Git tag with the version number from step 2 is added to `master` branch.
- 3. Package is built and published to npm package registry.
- 4. Documentation is built and deployed to production.
+ 1. GitHub release draft with name corresponding to the version number from
+ step 2 is published.
+ 2. Git tag with the version number from step 2 is added to `master` branch.
+ 3. Package is built and published to npm package registry.
+ 4. Documentation is built and deployed to production.
**Note:** prefix version number with `v` everywhere except in `package.json` and
`package-lock.json`.
diff --git a/mkdocs.yml b/mkdocs.yml
index 978398c03..6c87a7896 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -29,8 +29,6 @@ theme:
language: 'en'
favicon: 'favicon.ico'
custom_dir: 'src/docs/_overrides'
- font:
- text: 'Titillium Web'
palette:
- media: "(prefers-color-scheme: light)"
scheme: default
@@ -135,6 +133,7 @@ nav:
- TransferProps: 'helpers/transferProps/README.md'
- Guides:
- Customize:
+ - Font: 'docs/customize/font.md'
- Theming:
- Overview: 'docs/customize/theming/overview.md'
- Forms: 'docs/customize/theming/forms.md'
diff --git a/package.json b/package.json
index f3ab97c55..1de0e6078 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
"precopy": "rm -rf dist && mkdir dist",
"prepublishOnly": "npm run build",
"start": "webpack --watch --mode=development",
- "stylelint": "stylelint \"src/**/*.scss\" --config stylelint.config.js",
+ "stylelint": "stylelint \"src/**/*.{css,scss}\" \"!src/docs/_assets/generated/**\" --config stylelint.config.js",
"test": "npm run jest"
},
"dependencies": {
diff --git a/src/docs/_assets/stylesheets/extra.css b/src/docs/_assets/stylesheets/extra.css
index 8bd87351b..6a4f07d60 100644
--- a/src/docs/_assets/stylesheets/extra.css
+++ b/src/docs/_assets/stylesheets/extra.css
@@ -1,69 +1,96 @@
+/* stylelint-disable
+ custom-property-pattern,
+ declaration-no-important,
+ no-descending-specificity,
+ selector-class-pattern,
+ selector-max-compound-selectors,
+ selector-max-specificity,
+ selector-no-qualifying-type
+ -- We are overriding third-party styles.
+*/
+
:root {
- /* Visual configuration of the `` and `` code */
- /* The Prism theme CSS file, for options see: https://unpkg.com/browse/prismjs/themes/ */
- /* NOTE: Patch version is omitted due to parsing bug in Safari: https://bugs.webkit.org/show_bug.cgi?id=229816 */
- --docoff-code-prism-css: https://unpkg.com/prismjs@1.29/themes/prism-twilight.min.css;
- --docoff-code-font-size: 1rem;
- --docoff-code-line-height: 1.5;
- --docoff-code-font-family: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
-
- /* Visual configuration of the `` live preview */
- --docoff-preview-border-color: #ced4de;
- --docoff-preview-border-radius: 0.35em;
- /* To simplify multiple component presentation we add margin to all top level elements */
- --docoff-preview-children-margin: 0.25em;
- /* To improve component presentation we add padding inside the shadow DOM */
- --docoff-preview-padding: 1em;
- /* Custom preview CSS file, typically this would be the CSS of your component */
- --docoff-preview-css: /docs/_assets/generated/react-ui.development.css;
-
- /* Visual configuration of the `` element */
- --docoff-placeholder-background-dark: #4d4d4d;
- --docoff-placeholder-background-light: #fff;
- --docoff-placeholder-border-color: #ccc;
- --docoff-placeholder-border-width: 2px;
+ /* Visual configuration of the `` and `` code */
+
+ /* The Prism theme CSS file, for options see: https://unpkg.com/browse/prismjs/themes/
+ NOTE: Patch version is omitted due to parsing bug in Safari: https://bugs.webkit.org/show_bug.cgi?id=229816 */
+ /* stylelint-disable -- Allow URL without quotes. */
+ --docoff-code-prism-css: https://unpkg.com/prismjs@1.29/themes/prism-twilight.min.css;
+ --docoff-code-font-size: 1rem;
+ /* stylelint-enable */
+
+ --docoff-code-line-height: 1.5;
+ --docoff-code-font-family:
+ "SFMono-Regular",
+ "Menlo",
+ "Monaco",
+ "Consolas",
+ "Liberation Mono",
+ "Courier New",
+ monospace;
+
+ /* Visual configuration of the `` live preview */
+ --docoff-preview-border-color: #ced4de;
+ --docoff-preview-border-radius: 0.35em;
+
+ /* To simplify multiple component presentation we add margin to all top level elements */
+ --docoff-preview-children-margin: 0.25em;
+
+ /* To improve component presentation we add padding inside the shadow DOM */
+ --docoff-preview-padding: 1em;
+
+ /* Custom preview CSS file, typically this would be the CSS of your component */
+ --docoff-preview-css: /docs/_assets/generated/react-ui.development.css;
+
+ /* Visual configuration of the `` element */
+ --docoff-placeholder-background-dark: #4d4d4d;
+ --docoff-placeholder-background-light: #fff;
+ --docoff-placeholder-border-color: #ccc;
+ --docoff-placeholder-border-width: 2px;
}
/* Color schemes */
[data-md-color-scheme="default"] {
- --md-primary-fg-color: #00778b;
- --md-primary-fg-color--light: #fff;
- --md-primary-fg-color--dark: #006b7d;
- --md-accent-fg-color: #007bff;
- --md-typeset-a-color: #007bff;
- --md-typeset-a-hover-color: #006fe6;
- --md-default-bg-color: #fff;
- --md-typeset-color: #2d3747;
- --md-code-bg-color: rgb(242, 242, 242);
+ --md-primary-fg-color: #00778b;
+ --md-primary-fg-color--light: #fff;
+ --md-primary-fg-color--dark: #006b7d;
+ --md-accent-fg-color: #007bff;
+ --md-typeset-a-color: #007bff;
+ --md-typeset-a-hover-color: #006fe6;
+ --md-default-bg-color: #fff;
+ --md-typeset-color: #2d3747;
+ --md-code-bg-color: rgb(242 242 242);
}
[data-md-color-scheme="slate"] {
- --md-primary-fg-color: #1a1a1a;
- --md-primary-fg-color--light: #fff;
- --md-primary-fg-color--dark: #005f6f;
- --md-accent-fg-color: #007bff;
- --md-typeset-a-color: #007bff;
- --md-typeset-a-hover-color: #ffede8;
- --md-default-bg-color: #1a1a1a;
- --md-typeset-color: #f2f2f2;
- --md-code-bg-color: #000;
+ --md-primary-fg-color: #1a1a1a;
+ --md-primary-fg-color--light: #fff;
+ --md-primary-fg-color--dark: #005f6f;
+ --md-accent-fg-color: #007bff;
+ --md-typeset-a-color: #007bff;
+ --md-typeset-a-hover-color: #ffede8;
+ --md-default-bg-color: #1a1a1a;
+ --md-typeset-color: #f2f2f2;
+ --md-code-bg-color: #000;
}
/* Document */
html {
- font-size: 100%;
- scroll-margin-top: 4rem;
- scroll-padding-top: 3.2rem;
+ font-size: 100%;
+ scroll-padding-top: 3.2rem;
+ scroll-margin-top: 4rem;
}
body {
- font-size: 1rem;
- background-color: var(--md-default-bg-color);
+ font-size: 1rem;
+ background-color: var(--md-default-bg-color);
}
/* Typography */
-code, kbd, pre {
- font-family: var(--docoff-code-font-family);
+code,
+kbd,
+pre {
+ font-family: var(--docoff-code-font-family);
}
.md-nav--primary .md-nav__item,
@@ -81,7 +108,7 @@ code, kbd, pre {
.md-search-result__terms,
.md-source,
.md-top {
- font-size: 1rem;
+ font-size: 0.875rem;
}
.md-nav,
@@ -92,318 +119,332 @@ code, kbd, pre {
.md-typeset .footnote,
.md-typeset .footnote-ref,
.md-typeset .tabbed-labels > label {
- font-size: 0.85rem;
+ font-size: 0.875rem;
}
.md-typeset {
- font-size: 1.125rem;
+ font-size: 1rem;
}
.md-typeset a {
- color: var(--md-typeset-a-color);
- text-decoration: none;
- text-underline-offset: 0.1875em;
+ text-decoration: none;
+ text-underline-offset: 0.1875em;
+ color: var(--md-typeset-a-color);
}
.md-typeset a:hover {
- color: var(--md-typeset-a-hover-color);
- text-decoration: underline;
+ text-decoration: underline;
+ color: var(--md-typeset-a-hover-color);
}
.md-typeset :is(h1, h2, h3, h4, h5, h6) {
- font-weight: 700;
+ font-weight: 700;
}
.md-typeset h1 {
- margin-top: 0.8rem;
- margin-bottom: 2rem;
- font-size: 3rem;
- color: inherit;
+ margin-top: 0.8rem;
+ margin-bottom: 0.4rem;
+ font-weight: 800;
+ font-size: 2.4rem;
+ color: inherit;
}
.md-content .md-typeset h1 + p {
- font-size: 1.5rem;
+ font-size: 1.3rem;
}
.md-typeset h2 {
- margin-top: 3.2rem;
- margin-bottom: 0.8rem;
- font-size: 2rem;
+ margin-top: 3.2rem;
+ margin-bottom: 0.25rem;
+ font-size: 1.65rem;
}
.md-typeset h3 {
- margin-top: 2.4rem;
- margin-bottom: 0.8rem;
- font-size: 1.75rem;
+ margin-top: 2.4rem;
+ margin-bottom: 0.15rem;
+ font-size: 1.45rem;
}
.md-typeset h4 {
- margin-top: 1.6rem;
- margin-bottom: 0.4rem;
- font-size: 1.5rem;
+ margin-top: 1.6rem;
+ margin-bottom: 0.25rem;
+ font-size: 1.25rem;
}
+
.md-typeset h5,
.md-typeset h6 {
- margin-top: 1.6rem;
- margin-bottom: 0.4rem;
- font-size: 1.25rem;
+ margin-top: 1.6rem;
+ margin-bottom: 0.25rem;
+ font-size: 1.125rem;
}
.md-typeset blockquote {
- margin-block: 2.4rem;
- padding: 1.6rem 2rem;
- background-color: var(--md-default-fg-color--lightest);
+ padding: 1.6rem 2rem;
+ margin-block: 2.4rem;
+ background-color: var(--md-default-fg-color--lightest);
}
[dir="ltr"] .md-typeset blockquote {
- padding-left: 2rem;
+ padding-left: 2rem;
}
.md-typeset blockquote p {
- font-size: 1.25rem;
+ font-size: 1.25rem;
}
.md-typeset blockquote p:last-child {
- margin-bottom: 0;
+ margin-bottom: 0;
}
.md-typeset ul {
- list-style-type: square;
+ list-style-type: square;
}
.md-typeset :is(ol, ul) li {
- margin-bottom: 0.25rem;
+ margin-bottom: 0.55rem;
}
.md-typeset ol li blockquote,
.md-typeset ol li p,
.md-typeset ul li blockquote,
.md-typeset ul li p {
- margin-top: 0;
- margin-bottom: 0.8rem;
+ margin-block: 0;
}
.md-typeset hr {
- margin-block: 3.2rem;
+ margin-block: 3.2rem;
}
/* Tables */
table {
- width: 100%;
- table-layout: auto;
- display: table !important;
+ display: table !important;
+ table-layout: auto;
+ width: 100%;
}
.md-typeset__table {
- min-width: 100%;
+ min-width: 100%;
}
.md-typeset table:not([class]) {
- font-size: 1rem;
- border: none;
+ font-size: 0.875rem;
+ border: none;
}
.md-typeset table:not([class]) :is(th, td) {
- padding: 0.75rem 0.5rem;
- vertical-align: middle;
- border-style: none none solid;
- border-width: 1px;
- border-color: var(--md-typeset-table-color);
+ padding: 1rem 0.5rem;
+ vertical-align: middle;
+ border-width: 1px;
+ border-style: none none solid;
+ border-color: var(--md-typeset-table-color);
}
/* Layout */
.md-header {
- height: 4rem;
+ height: 4rem;
}
.md-header__inner {
- height: 100%;
- padding: 0 0.5rem;
+ height: 100%;
+ padding: 0 0.5rem;
}
.md-header__title {
- font-size: 1.5rem;
+ font-size: 1.5rem;
}
.md-header__button {
- margin-inline: 0.75rem;
+ margin-inline: 0.75rem;
}
.md-main__inner {
- margin-top: 0;
+ margin-top: 0;
}
.md-tabs__link,
.md-source {
- color: var(--md-primary-fg-color--light);
+ color: var(--md-primary-fg-color--light);
}
.md-tabs__link {
- font-size: 1.25rem;
- text-transform: uppercase;
+ font-size: 1.25rem;
+ text-transform: uppercase;
}
.md-header,
.md-tabs {
- background-color: var(--md-primary-fg-color--dark);
+ background-color: var(--md-primary-fg-color--dark);
}
.md-nav {
- line-height: 1.5;
+ line-height: 1.5;
}
.md-nav__link--active {
- font-weight: 700;
+ font-weight: 700;
}
.md-content__inner {
- max-width: 50rem;
- min-width: 0;
- margin: 3.2rem 3rem 6.4rem;
- padding-top: 0;
+ min-width: 0;
+ max-width: 50rem;
+ padding-top: 0;
+ margin: 3.2rem 3rem 6.4rem;
}
.md-sidebar {
- padding-block: 1.6rem;
+ padding-block: 1.6rem;
}
-@media screen and (min-width: 76.25em) {
- .md-grid {
- max-width: 96%;
- }
+@media screen and (width >= 76.25em) {
+ .md-grid {
+ max-width: 96%;
+ }
- .md-content {
- display: grid;
- justify-content: center;
- }
+ .md-content {
+ display: grid;
+ justify-content: center;
+ }
}
-@media screen and (max-width: 59.9375em) {
- .md-content__inner {
- margin-inline: 8vw;
- }
+@media screen and (width <= 59.9375em) {
+ .md-content__inner {
+ margin-inline: 8vw;
+ }
}
-@media screen and (max-width: 76.1875em) {
- .md-nav--primary .md-nav__title .md-nav__icon {
- top: 1rem;
- }
+@media screen and (width <= 76.1875em) {
+ .md-nav--primary .md-nav__title .md-nav__icon {
+ top: 1rem;
+ }
}
-@media screen and (min-width: 76.25em) {
-
- [dir="ltr"] .md-sidebar--secondary:not([hidden]) ~ .md-content > .md-content__inner,
- [dir="rtl"] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner {
- margin-right: 3rem;
- }
+@media screen and (width >= 76.25em) {
+ [dir="ltr"] .md-sidebar--secondary:not([hidden]) ~ .md-content > .md-content__inner,
+ [dir="rtl"] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner {
+ margin-right: 3rem;
+ }
- [dir="ltr"] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner {
- margin-left: 3rem;
- }
+ [dir="ltr"] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner {
+ margin-left: 3rem;
+ }
}
-@media screen and (max-width: 59.9375em) {
- .md-nav__source {
- padding-block: 0.8rem;
- }
+@media screen and (width <= 59.9375em) {
+ .md-nav__source {
+ padding-block: 0.8rem;
+ }
}
/* Search */
.md-search-result__meta {
- padding-block: 0.8rem;
+ padding-block: 0.8rem;
}
.md-search-result__more > summary > div {
- font-size: 0.85rem;
+ font-size: 0.85rem;
}
-@media screen and (min-width: 60em) {
- .md-search {
- padding: 0;
- }
+@media screen and (width >= 60em) {
+ .md-search {
+ padding: 0;
+ }
- .md-search__form {
- height: 2.4rem;
- }
+ .md-search__form {
+ height: 2.4rem;
+ }
- .md-search__icon[for="__search"],
- .md-search__options {
- top: 0.6rem;
- }
+ .md-search__icon[for="__search"],
+ .md-search__options {
+ top: 0.6rem;
+ }
- .md-search__output {
- top: calc(100% - 2px);
- }
+ .md-search__output {
+ top: calc(100% - 2px);
+ }
- .md-search-result__meta {
- padding-block: 0.8rem;
- }
+ .md-search-result__meta {
+ padding-block: 0.8rem;
+ }
}
/* Clipboard */
.md-clipboard,
.md-clipboard:is(:focus, :hover) {
- color: white;
+ color: white;
}
.md-clipboard::after {
- color: var(--md-typeset-a-color);
+ color: var(--md-typeset-a-color);
}
:hover > .md-clipboard {
- color: white;
+ color: white;
}
/* Code */
.md-typeset code {
- padding: 0.15rem 0.25rem;
- border-radius: 0.1875rem;
+ padding: 0.15rem 0.25rem;
+ border-radius: 0.1875rem;
}
.md-typeset table pre > code {
- display: inline;
- padding: 0.15rem 0.25rem;
- white-space: pre-wrap;
+ display: inline;
+ padding: 0.15rem 0.25rem;
+ white-space: pre-wrap;
}
.md-typeset pre > code {
- padding: 0;
+ padding: 0;
}
pre[class*="language-"] {
- background: rgb(40, 40, 40);
- border-radius: 0.35em;
- border: none;
- overflow: hidden;
+ overflow: hidden;
+ border: none;
+ border-radius: 0.35em;
+ background: rgb(40 40 40);
}
code[class*="language-"],
pre[class*="language-"] {
- font-family: var(--docoff-code-font-family) !important;
- font-weight: 400;
- font-size: 1rem;
- text-shadow: none;
+ font-weight: 400;
+ font-size: 1rem;
+ font-family: var(--docoff-code-font-family) !important;
+ text-shadow: none;
}
pre[class*="language-"],
-.docoff-Root,
+.docoff-Root {
+ margin-top: 0;
+ margin-bottom: 2.4rem;
+}
+
.md-typeset :is(p, ul, ol, dl) {
- margin-top: 0;
- margin-bottom: 1.6rem;
+ max-width: 40rem;
+ margin-top: 0;
+ margin-bottom: 1.6rem;
}
/* API */
docoff-react-props {
- display: block;
- overflow-x: auto;
+ display: block;
+ overflow-x: auto;
}
-@media screen and (max-width: 44.9375em) {
- docoff-react-props,
- .docoff-Root,
- .md-content__inner > .highlight {
- margin-top: 0;
- margin-bottom: 1.6rem;
- margin-inline: -1rem;
- }
+docoff-react-props > table tr {
+ transition: background-color 125ms;
+}
+
+docoff-react-props > table tr:hover {
+ background-color: var(--md-typeset-table-color--light);
+ box-shadow: 0 0.05rem 0 var(--md-default-bg-color) inset;
+}
+
+@media screen and (width <= 44.9375em) {
+ docoff-react-props,
+ .docoff-Root,
+ .md-content__inner > .highlight {
+ margin-inline: -1rem;
+ margin-top: 0;
+ margin-bottom: 1.6rem;
+ }
}
diff --git a/src/docs/contribute/composition.md b/src/docs/contribute/composition.md
index 2c116ef71..a48a0d683 100644
--- a/src/docs/contribute/composition.md
+++ b/src/docs/contribute/composition.md
@@ -8,16 +8,16 @@ There are several types of composition approaches.
2. **Components with subcomponents:** subcomponents cannot exist on their own
outside their parent components.
- - **Mandatory subcomponents:** subcomponent must be used at least once in
- order for the composition to work. E.g. `Tabs` + `TabsItem`.
+ - **Mandatory subcomponents:** subcomponent must be used at least once in
+ order for the composition to work. E.g. `Tabs` + `TabsItem`.
- - **Optional subcomponents:** optional subcomponents may be used to achieve
- special results. E.g. `FormLayout` + `FormLayoutCustomField` or `Grid` +
- `GridSpan`.
+ - **Optional subcomponents:** optional subcomponents may be used to achieve
+ special results. E.g. `FormLayout` + `FormLayoutCustomField` or `Grid` +
+ `GridSpan`.
- - **Both mandatory and optional subcomponents:** e.g. `Card` + `CardBody`
- (mandatory) + `CardFooter` (optional), `Toolbar` + `ToolbarItem`
- (mandatory) + `ToolbarGroup` (optional), etc.
+ - **Both mandatory and optional subcomponents:** e.g. `Card` + `CardBody`
+ (mandatory) + `CardFooter` (optional), `Toolbar` + `ToolbarItem`
+ (mandatory) + `ToolbarGroup` (optional), etc.
3. **Wrappers for other components:** component is designed to wrap other
self-contained components. E.g. `FormLayout` + form fields (`CheckboxField`,
diff --git a/src/docs/contribute/css.md b/src/docs/contribute/css.md
index c5b16eb87..96955214d 100644
--- a/src/docs/contribute/css.md
+++ b/src/docs/contribute/css.md
@@ -183,14 +183,14 @@ class.
3. **Component's top-level HTML element must have `root` class name.**
However, this rule has a few exceptions:
- 1. When the component is a subcomponent, it's usually better to use
- subcomponent's name, e.g. `item` or `group`. This enables us to keep
- related CSS of both the main component and its subcomponents in a single
- file and see the big picture during development.
-
- 2. When no CSS on the root element is necessary and styling only takes place
- once a visual modification is invoked by component props, `root` class
- name can be omitted entirely.
+ 1. When the component is a subcomponent, it's usually better to use
+ subcomponent's name, e.g. `item` or `group`. This enables us to keep
+ related CSS of both the main component and its subcomponents in a single
+ file and see the big picture during development.
+
+ 2. When no CSS on the root element is necessary and styling only takes place
+ once a visual modification is invoked by component props, `root` class
+ name can be omitted entirely.
4. **Modifier class names related to the current HTML element must start with
`is`** and contain the name of the target element, e.g. `isRootLoading`
diff --git a/src/docs/customize/font.md b/src/docs/customize/font.md
new file mode 100644
index 000000000..f8943b922
--- /dev/null
+++ b/src/docs/customize/font.md
@@ -0,0 +1,28 @@
+# Font
+
+React UI uses [native font stack][sm-native-font-stack] for optimum text
+rendering on every device and OS.
+
+This is a good practice because it reduces the size of the data transferred, and
+it also ensures that the text is displayed in the font that the user is most
+comfortable with.
+
+You can change it to a custom font by loading the font in your project:
+
+```html
+
+```
+
+… and [overriding](/docs/customize/theming/overview) the
+`--rui-font-family-base` CSS custom property:
+
+```css
+:root {
+ --rui-font-family-base: 'Titillium Web', helvetica, roboto, arial, sans-serif;
+}
+```
+
+[sm-native-font-stack]: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
diff --git a/src/docs/foundation/typography.md b/src/docs/foundation/typography.md
index a1294713d..50c213664 100644
--- a/src/docs/foundation/typography.md
+++ b/src/docs/foundation/typography.md
@@ -59,16 +59,11 @@ Styling of basic HTML elements:
## Font
-React UI is designed with [Titillium Web] font, a geometric sans with a wide
-variety of weights and styles. You can change it to a custom font by
-[overriding](/docs/customize/theming/overview) the `--rui-font-family-base` CSS
-custom property:
+React UI uses [native font stack][sm-native-font-stack] for optimum text
+rendering on every device and OS.
-```css
-:root {
- --rui-font-family-base: 'Titillium Web', helvetica, roboto, arial, sans-serif;
-}
-```
+👉 You can replace the native font stack with a
+[custom font](/docs/customize/font).
## Customization
@@ -101,4 +96,4 @@ Font size, font weight, and line height values can be
}
```
-[Titillium Web]: https://fonts.google.com/specimen/Titillium+Web
+[sm-native-font-stack]: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
diff --git a/src/docs/getting-started/usage.md b/src/docs/getting-started/usage.md
index c9b1a238a..2f74989ef 100644
--- a/src/docs/getting-started/usage.md
+++ b/src/docs/getting-started/usage.md
@@ -11,21 +11,6 @@ add the responsive viewport meta tag to your `` element:
```
-## Fonts
-
-React UI is designed with the Titillium Web font. Add it to your project e.g. via
-Google Fonts in your `` element:
-
-```html
-
-```
-
-Remember to include all necessary font weights (and only them — for better
-performance).
-
## CSS
React UI styles are written in Sass and compiled to CSS. You can import them
@@ -80,10 +65,6 @@ Example HTML:
React UI Example
-
diff --git a/src/theme.scss b/src/theme.scss
index 07fb04b87..d9291a104 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -49,7 +49,31 @@
// Font Families
// =============
- --rui-font-family-base: "Titillium Web", helvetica, roboto, arial, sans-serif;
+ // Native font stack inspired by Bootstrap.
+ // @see https://getbootstrap.com/docs/5.0/content/reboot/#native-font-stack
+ // @see https://css-tricks.com/snippets/css/system-font-stack/
+ --rui-font-family-base:
+ /* Cross-platform generic font family (default user interface font) */
+ system-ui,
+ /* Safari for macOS and iOS (San Francisco)*/
+ -apple-system,
+ /* Windows*/
+ "Segoe UI",
+ /* Android*/
+ roboto,
+ /* Basic web fallback*/
+ "Helvetica Neue",
+ arial,
+ /* Linux*/
+ "Noto Sans",
+ "Liberation Sans",
+ /* Sans serif fallback*/
+ sans-serif,
+ /* Emoji fonts*/
+ "Apple Color Emoji",
+ "Segoe UI Emoji",
+ "Segoe UI Symbol",
+ "Noto Color Emoji";
--rui-font-family-monospace:
"SFMono-Regular",
"Menlo",