fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup!…

… fixup! fixup! fixup! fixup! Change documentation platform from Docz to Docoff
react-ui-org · Feb 24, 2023 · 04e6db2 · 04e6db2
1 parent 3f5807e
commit 04e6db2
Show file tree

Hide file tree

Showing 20 changed files with 308 additions and 400 deletions.
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -49,10 +49,6 @@ extra_css:
   # CSS Tweaks
   - docs/_assets/stylesheets/extra.css
 
-extra_javascript:
-  - docs/_assets/js/ruiIcon.js
-  - docs/_assets/js/ruiSwatch.js
-
 # Must be open to external connections since MkDocs run in a docker container
 dev_addr: '0.0.0.0:8000'
 
@@ -65,12 +61,15 @@ nav:
           - Usage: 'docs/getting-started/usage.md'
           - 'Browsers & Devices': 'docs/getting-started/browsers-and-devices.md'
       - Foundation:
-          - Accessibility: 'docs/foundation/accessibility.md'
-          - Breakpoints: 'docs/foundation/breakpoints.md'
-          - Colors: 'docs/foundation/colors.md'
-          - Icons: 'docs/foundation/icons.md'
-          - Spacing: 'docs/foundation/spacing.md'
-          - Typography: 'docs/foundation/typography.md'
+          - 'Design Tokens': 'docs/foundation/design-tokens.md'
+          - 'Colors': 'docs/foundation/colors.md'
+          - 'Typography': 'docs/foundation/typography.md'
+          - 'Spacing': 'docs/foundation/spacing.md'
+          - 'Borders': 'docs/foundation/borders.md'
+          - 'Shadows': 'docs/foundation/shadows.md'
+          - 'Breakpoints': 'docs/foundation/breakpoints.md'
+          - 'Accessibility': 'docs/foundation/accessibility.md'
+          - 'Icons': 'docs/foundation/icons.md'
   - Components:
       - Actions:
           - Button: 'lib/components/Button/README.md'

diff --git a/src/docs/_assets/js/ruiSwatch.js b/src/docs/_assets/js/ruiSwatch.js
@@ -7,7 +7,7 @@ class RuiSwatch extends HTMLElement {
     rootEl.style.display = 'inline-flex';
     rootEl.style['flex-direction'] = 'column';
     rootEl.style.width = '18%';
-    rootEl.style['min-width'] ='120px';
+    rootEl.style['min-width'] = '120px';
     rootEl.style['margin-right'] = '1rem';
     rootEl.style['margin-bottom'] = '1.5rem';
 

diff --git a/src/docs/_overrides/main.html b/src/docs/_overrides/main.html
@@ -17,6 +17,8 @@
   <script crossorigin src="https://unpkg.com/@floating-ui/[email protected]/dist/floating-ui.dom.umd.min.js"></script>
   <script crossorigin src="https://unpkg.com/@floating-ui/[email protected]/dist/floating-ui.react-dom.umd.min.js"></script>
   <script src="/docs/_assets/generated/reactui.js" type="application/javascript"></script>
+  <script src="/docs/_assets/js/ruiIcon.js" type="application/javascript"></script>
+  <script src="/docs/_assets/js/ruiSwatch.js" type="application/javascript"></script>
 
   <!-- Then we load and init Docoff -->
   <script crossorigin src="https://unpkg.com/@react-ui-org/[email protected]/public/generated/bundle.js"></script>

diff --git a/src/docs/css-helpers/colors.md b/src/docs/css-helpers/colors.md
@@ -1,41 +1,110 @@
 # Colors
 
-The color helpers allow coloring any text with built-in
-[component colors](/docs/foundation/colors#component-colors). On top of that, there
-is a muted variant for low-priority text.
+import { Playground } from 'docz'
+import { Placeholder } from '../_components/Placeholder/Placeholder'
+
+Helpers for text and background.
+
+## Text Colors
+
+The text color helpers allow coloring any text with predefined
+[text colors](/docs/foundation/colors#text-colors),
+[feedback colors](/docs/foundation/colors#feedback-colors), and
+[neutral colors](/docs/foundation/colors#neutral-colors).
+
+```docoff-react-preview
+  <docoff-placeholder bordered>
+    <code className="text-primary">.text-primary</code>
+  </docoff-placeholder>
+  <docoff-placeholder bordered>
+    <code className="text-primary-disabled">.text-primary-disabled</code>
+  </docoff-placeholder>
+  <docoff-placeholder bordered>
+    <code className="text-secondary">.text-secondary</code>
+  </docoff-placeholder>
+  <docoff-placeholder bordered>
+    <code className="text-secondary-disabled">.text-secondary-disabled</code>
+  </docoff-placeholder>
+  <docoff-placeholder bordered>
+    <code className="text-success">.text-success</code>
+  </docoff-placeholder>
+  <docoff-placeholder bordered>
+    <code className="text-warning">.text-warning</code>
+  </docoff-placeholder>
+  <docoff-placeholder bordered>
+    <code className="text-danger">.text-danger</code>
+  </docoff-placeholder>
+  <docoff-placeholder bordered>
+    <code className="text-help">.text-help</code>
+  </docoff-placeholder>
+  <docoff-placeholder bordered>
+    <code className="text-info">.text-info</code>
+  </docoff-placeholder>
+  <docoff-placeholder bordered>
+    <code className="text-note">.text-note</code>
+  </docoff-placeholder>
+  <docoff-placeholder bordered dark>
+    <code className="text-light">.text-light</code>
+  </docoff-placeholder>
+  <docoff-placeholder bordered>
+    <code className="text-dark">.text-dark</code>
+  </docoff-placeholder>
+```
+
+## Background Colors
+
+The background color helpers allow coloring any element with predefined
+[background colors](/docs/foundation/colors#background-colors) (with an exception to
+background colors for interactive areas that are intended to be used only in
+CSS).
 
 ```docoff-react-preview
-<docoff-placeholder bordered>
-  <code className="text-primary">.text-primary</code>
-</docoff-placeholder>
-<docoff-placeholder bordered>
-  <code className="text-secondary">.text-secondary</code>
-</docoff-placeholder>
-<docoff-placeholder bordered>
-  <code className="text-success">.text-success</code>
-</docoff-placeholder>
-<docoff-placeholder bordered>
-  <code className="text-warning">.text-warning</code>
-</docoff-placeholder>
-<docoff-placeholder bordered>
-  <code className="text-danger">.text-danger</code>
-</docoff-placeholder>
-<docoff-placeholder bordered>
-  <code className="text-help">.text-help</code>
-</docoff-placeholder>
-<docoff-placeholder bordered>
-  <code className="text-info">.text-info</code>
-</docoff-placeholder>
-<docoff-placeholder bordered>
-  <code className="text-note">.text-note</code>
-</docoff-placeholder>
-<docoff-placeholder bordered dark>
-  <code className="text-light">.text-light</code>
-</docoff-placeholder>
-<docoff-placeholder bordered>
-  <code className="text-dark">.text-dark</code>
-</docoff-placeholder>
-<docoff-placeholder bordered>
-  <code className="text-muted">.text-muted</code>
-</docoff-placeholder>
+  <Placeholder bordered>
+    <code className="bg-base">.bg-base</code>
+  </Placeholder>
+  <Placeholder bordered>
+    <code className="bg-layer-1">.bg-layer-1</code>
+  </Placeholder>
+  <Placeholder bordered>
+    <code className="bg-layer-2">.bg-layer-2</code>
+  </Placeholder>
+  <Placeholder bordered>
+    <code className="bg-basic">.bg-basic</code>
+  </Placeholder>
+  <Placeholder bordered>
+    <code className="bg-disabled">.bg-disabled</code>
+  </Placeholder>
+  <Placeholder bordered>
+    <code className="bg-primary">.bg-primary</code>
+  </Placeholder>
+  <Placeholder bordered>
+    <code className="bg-secondary">.bg-secondary</code>
+  </Placeholder>
+  <Placeholder bordered>
+    <code className="bg-selected">.bg-selected</code>
+  </Placeholder>
+  <Placeholder bordered>
+    <code className="bg-success">.bg-success</code>
+  </Placeholder>
+  <Placeholder bordered>
+    <code className="bg-warning">.bg-warning</code>
+  </Placeholder>
+  <Placeholder bordered>
+    <code className="bg-danger">.bg-danger</code>
+  </Placeholder>
+  <Placeholder bordered>
+    <code className="bg-help">.bg-help</code>
+  </Placeholder>
+  <Placeholder bordered>
+    <code className="bg-info">.bg-info</code>
+  </Placeholder>
+  <Placeholder bordered>
+    <code className="bg-note">.bg-note</code>
+  </Placeholder>
+  <Placeholder bordered>
+    <code className="bg-light">.bg-light</code>
+  </Placeholder>
+  <Placeholder bordered>
+    <code className="bg-dark text-light">.bg-dark</code>
+  </Placeholder>
 ```
diff --git a/src/docs/css-helpers/colors.mdx b/src/docs/css-helpers/colors.mdx
diff --git a/src/docs/css-helpers/typography.md b/src/docs/css-helpers/typography.md
@@ -13,7 +13,7 @@ The full scale of font sizes is available through the following helper classes:
 <h4 className="font-size-3">Font size 3</h4>
 <h4 className="font-size-4">Font size 4</h4>
 <h4 className="font-size-5">Font size 5</h4>
-  <h4 className="font-size-6">Font size 6</h4>
+<h4 className="font-size-6">Font size 6</h4>
 ```
 
 ## Text Alignment

diff --git a/src/docs/customize/theming/overview.md b/src/docs/customize/theming/overview.md
@@ -13,7 +13,7 @@ for two main reasons:
 
 ## Theming Options
 
-[Design tokens](/foundation/design-tokens) are used to define common visual
+[Design tokens](/docs/foundation/design-tokens) are used to define common visual
 properties like colors, fonts, borders, shadows, or spacing. CSS custom
 properties are the technical representation of the design tokens in React UI.
 

diff --git a/src/docs/foundation/borders.mdx → src/docs/foundation/borders.md b/src/docs/foundation/borders.mdx → src/docs/foundation/borders.md
@@ -1,16 +1,10 @@
----
-name: Borders
-menu: Foundation
-route: /foundation/borders
----
-
 # Borders
 
 Borders separate the content from the outer context.
 
 👉 All values on this page can be changed by
-[overriding](/customize/theming/overview) values in your
-[design tokens](/foundation/design-tokens).
+[overriding](/docs/customize/theming/overview) values in your
+[design tokens](/docs/foundation/design-tokens).
 
 Available border widths (the list may grow in the future):
 
@@ -24,7 +18,7 @@ Available border styles:
 |--------------|---------------------------|-----------------------------------|
 | focus ring   | `--rui-border-focus-ring` | Focus ring style                  |
 
-👉 Check [Colors](/foundation/colors#border-colors) for available border colors.
+👉 Check [Colors](/docs/foundation/colors#border-colors) for available border colors.
 
-👉 Check [Accessibility](/foundation/accessibility#keyboard-friendliness) for
+👉 Check [Accessibility](/docs/foundation/accessibility#keyboard-friendliness) for
 all focus ring options.