From 78dcb0a4b3860b443066213d0857a9c5f92b5549 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Fri, 25 Apr 2025 21:52:14 +0200
Subject: [PATCH 1/3] Tweak fonts in docs

- Remove `:host` from `src/theme.scss` since all custom properties in component
  previews are inherited from root.
- Remove redundant font requests and resource hints.
- Minor component's README fixes.
---
 mkdocs.yml                             |  3 ++-
 src/components/Alert/README.md         |  2 +-
 src/components/FormLayout/README.md    | 13 +++++++------
 src/components/InputGroup/README.md    |  2 +-
 src/docs/_assets/stylesheets/extra.css | 17 +++++++----------
 src/docs/_overrides/main.html          |  2 --
 src/theme.scss                         |  3 +--
 7 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/mkdocs.yml b/mkdocs.yml
index 6c87a7896..130ef7dee 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -28,6 +28,7 @@ theme:
   name: material
   language: 'en'
   favicon: 'favicon.ico'
+  font: false
   custom_dir: 'src/docs/_overrides'
   palette:
     - media: "(prefers-color-scheme: light)"
@@ -48,7 +49,7 @@ theme:
 extra_css:
   - https://unpkg.com/prismjs@1.29.0/themes/prism-twilight.min.css # Prism JS syntax highlighting
   - docs/_assets/stylesheets/extra.css # mkDocs theme tweaks
-  - docs/_assets/generated/docs-custom-properties.development.css # Load React UI CSS custom properties to make them accessible in the document root (outside shadowDOM) so we can preview colors etc.
+  - docs/_assets/generated/docs-custom-properties.development.css # Load React UI CSS custom properties to make them accessible in the document root (outside Shadow DOM), so we can set the root font size and preview colors and helpers/utilities.
 
 # Additional JS. Mind the order!
 extra_javascript:
diff --git a/src/components/Alert/README.md b/src/components/Alert/README.md
index d431f3fd5..5c3419b06 100644
--- a/src/components/Alert/README.md
+++ b/src/components/Alert/README.md
@@ -32,7 +32,7 @@ See [API](#api) for all available options.
 ## Color Variants
 
 To cover all possible needs of your project, Alert is available in colors from
-[Feedback and Neutral color collections](/docs/foundation/collections#colors).
+[Feedback color collection](/docs/foundation/collections#colors).
 
 ### Success
 
diff --git a/src/components/FormLayout/README.md b/src/components/FormLayout/README.md
index 7bacef204..53a081b99 100644
--- a/src/components/FormLayout/README.md
+++ b/src/components/FormLayout/README.md
@@ -300,7 +300,7 @@ This is a demo of all components supported by FormLayout.
 
 ```docoff-react-preview
 React.createElement(() => {
-  const [fieldLayout, setFieldLayout] = React.useState('vertical');
+  const [fieldLayout, setFieldLayout] = React.useState('horizontal');
   const [fruit, setFruit] = React.useState('apple');
   const [isDeliveryAddress, setIsDeliveryAddress] = React.useState(true);
   const [receiveNewsletter, setReceiveNewsletter] = React.useState(true);
@@ -323,16 +323,16 @@ React.createElement(() => {
       <Toolbar>
         <ToolbarItem>
           <ButtonGroup>
-            <Button
-              color={fieldLayout === 'vertical' ? 'selected' : 'secondary'}
-              label="Vertical layout"
-              onClick={() => setFieldLayout('vertical')}
-            />
             <Button
               color={fieldLayout === 'horizontal' ? 'selected' : 'secondary'}
               label="Horizontal layout"
               onClick={() => setFieldLayout('horizontal')}
             />
+            <Button
+              color={fieldLayout === 'vertical' ? 'selected' : 'secondary'}
+              label="Vertical layout"
+              onClick={() => setFieldLayout('vertical')}
+            />
           </ButtonGroup>
         </ToolbarItem>
       </Toolbar>
@@ -388,6 +388,7 @@ React.createElement(() => {
           rows={3}
         />
         <FileInputField
+          id="my-file"
           label="Attachment"
           onFilesChanged={() => {}}
         />
diff --git a/src/components/InputGroup/README.md b/src/components/InputGroup/README.md
index 2bbd8e1f3..911034599 100644
--- a/src/components/InputGroup/README.md
+++ b/src/components/InputGroup/README.md
@@ -145,7 +145,7 @@ supports this kind of layout as well.
   label="Horizontal layout"
   layout="horizontal"
 >
-  <FileInputField label="Attachment" onFilesChanged={() => {}} />
+  <FileInputField id="my-file" label="Attachment" onFilesChanged={() => {}} />
   <Button label="Submit" />
 </InputGroup>
 ```
diff --git a/src/docs/_assets/stylesheets/extra.css b/src/docs/_assets/stylesheets/extra.css
index 6a4f07d60..c2d0460cc 100644
--- a/src/docs/_assets/stylesheets/extra.css
+++ b/src/docs/_assets/stylesheets/extra.css
@@ -20,14 +20,7 @@
     /* stylelint-enable */
 
     --docoff-code-line-height: 1.5;
-    --docoff-code-font-family:
-        "SFMono-Regular",
-        "Menlo",
-        "Monaco",
-        "Consolas",
-        "Liberation Mono",
-        "Courier New",
-        monospace;
+    --docoff-code-font-family: var(--rui-font-family-monospace);
 
     /* Visual configuration of the `<docoff-react-preview>` live preview */
     --docoff-preview-border-color: #ced4de;
@@ -76,13 +69,17 @@
 
 /* Document */
 html {
-    font-size: 100%;
+    /* DO NOT CHANGE THE FONT SIZE. `rem` in docoff previews is calculated from the root font size which is this. */
+    font-size: var(--rui-font-size-base);
     scroll-padding-top: 3.2rem;
     scroll-margin-top: 4rem;
 }
 
 body {
-    font-size: 1rem;
+    --md-text-font-family: var(--rui-font-family-base);
+    --md-code-font-family: var(--rui-font-family-monospace);
+
+    font-size: 1em;
     background-color: var(--md-default-bg-color);
 }
 
diff --git a/src/docs/_overrides/main.html b/src/docs/_overrides/main.html
index 2f787ad3f..a0e217706 100644
--- a/src/docs/_overrides/main.html
+++ b/src/docs/_overrides/main.html
@@ -2,7 +2,5 @@
 
 {% block site_meta %}
   {{ super() }}
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" />
   <link rel="preconnect" href="https://unpkg.com" />
 {% endblock %}
diff --git a/src/theme.scss b/src/theme.scss
index d9291a104..cb18b538c 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -5,8 +5,7 @@
 @use "styles/theme-constants/svg";
 
 @layer theme {
-    :root,
-    :host {
+    :root {
         // ============================================================================================ //
         // GLOBAL TOKENS                                                                                //
         // ============================================================================================ //

From 205cdd4870e06964fb958d6eb1025af5a7b43a9f Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Sat, 26 Apr 2025 12:07:28 +0200
Subject: [PATCH 2/3] Introduce border color theming option for default `Card`

New `--rui-Card__border-color` custom property has been introduced to define Card's default border color.

The default value is border primary, so `Card`s are now bordered by default to be distinguishable on default `Paper`.
---
 src/components/Card/Card.module.scss |  2 +-
 src/components/Card/README.md        | 21 +++++++++++----------
 src/components/Card/_theme.scss      |  1 +
 src/theme.scss                       |  1 +
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
index cdfcf559f..2e2d4a79e 100644
--- a/src/components/Card/Card.module.scss
+++ b/src/components/Card/Card.module.scss
@@ -12,7 +12,7 @@
         flex-direction: column;
         min-width: 0; // 1.
         color: var(--rui-local-color);
-        border: theme.$border-width solid var(--rui-local-border-color, transparent);
+        border: theme.$border-width solid var(--rui-local-border-color, theme.$border-color);
         border-radius: theme.$border-radius;
         background-color: var(--rui-local-background-color, theme.$background-color);
     }
diff --git a/src/components/Card/README.md b/src/components/Card/README.md
index b59653a09..80f94b25d 100644
--- a/src/components/Card/README.md
+++ b/src/components/Card/README.md
@@ -289,16 +289,17 @@ Separate your card actions with CardFooter. See
 
 ### Common Theming Options
 
-| Custom Property                                      | Description                                                  |
-|------------------------------------------------------|--------------------------------------------------------------|
-| `--rui-Card__padding`                                | Padding shared by card header, body and footer               |
-| `--rui-Card__border-width`                           | Border width                                                 |
-| `--rui-Card__border-radius`                          | Corner radius                                                |
-| `--rui-Card__background-color`                       | Card background color                                        |
-| `--rui-Card--dense__padding`                         | Padding of dense card                                        |
-| `--rui-Card--raised__box-shadow`                     | Box shadow of raised card                                    |
-| `--rui-Card--disabled__background-color`             | Card background color in disabled state                      |
-| `--rui-Card--disabled__opacity`                      | Card opacity in disabled state                               |
+| Custom Property                          | Description                                    |
+|------------------------------------------|------------------------------------------------|
+| `--rui-Card__padding`                    | Padding shared by card header, body and footer |
+| `--rui-Card__border-width`               | Border width                                   |
+| `--rui-Card__border-color`               | Border color                                   |
+| `--rui-Card__border-radius`              | Corner radius                                  |
+| `--rui-Card__background-color`           | Card background color                          |
+| `--rui-Card--dense__padding`             | Padding of dense card                          |
+| `--rui-Card--raised__box-shadow`         | Box shadow of raised card                      |
+| `--rui-Card--disabled__background-color` | Card background color in disabled state        |
+| `--rui-Card--disabled__opacity`          | Card opacity in disabled state                 |
 
 ### Theming Variants
 
diff --git a/src/components/Card/_theme.scss b/src/components/Card/_theme.scss
index 191365c4f..16f0b70c0 100644
--- a/src/components/Card/_theme.scss
+++ b/src/components/Card/_theme.scss
@@ -1,5 +1,6 @@
 $padding: var(--rui-Card__padding);
 $border-width: var(--rui-Card__border-width);
+$border-color: var(--rui-Card__border-color);
 $border-radius: var(--rui-Card__border-radius);
 $background-color: var(--rui-Card__background-color);
 
diff --git a/src/theme.scss b/src/theme.scss
index cb18b538c..30c5ba9d4 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -825,6 +825,7 @@
 
         --rui-Card__padding: var(--rui-dimension-space-4);
         --rui-Card__border-width: var(--rui-dimension-border-width-1);
+        --rui-Card__border-color: var(--rui-color-border-primary);
         --rui-Card__border-radius: var(--rui-dimension-radius-2);
         --rui-Card__background-color: var(--rui-color-background-layer-1);
         --rui-Card--dense__padding: var(--rui-dimension-space-2);

From f3d65f42a2e2e04ab1eb4a17c368fb3ce8e85ccd Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Sat, 26 Apr 2025 12:22:29 +0200
Subject: [PATCH 3/3] Bump version to v0.59.1

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d9e78e4fa..542e38751 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@react-ui-org/react-ui",
-  "version": "0.59.0",
+  "version": "0.59.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@react-ui-org/react-ui",
-      "version": "0.59.0",
+      "version": "0.59.1",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index d1c1faccf..c84dc7730 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@react-ui-org/react-ui",
   "description": "React UI is a themeable UI library for React apps.",
-  "version": "0.59.0",
+  "version": "0.59.1",
   "keywords": [
     "react",
     "ui",