diff --git a/docs/api/avatar.md b/docs/api/avatar.md
index e7a005fa719..dd1d64e3b32 100644
--- a/docs/api/avatar.md
+++ b/docs/api/avatar.md
@@ -22,7 +22,7 @@ Avatars are circular components that usually wrap an image or icon. They can be
 
 Avatars can be used by themselves or inside of any element. If placed inside of an `ion-chip` or `ion-item`, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to `start` or `end`, respectively.
 
-## Basic
+## Basic Usage
 
 import Basic from '@site/static/usage/avatar/basic/index.md';
 
@@ -42,9 +42,11 @@ import Item from '@site/static/usage/avatar/item/index.md';
 
 ## Theming
 
-import Theming from '@site/static/usage/avatar/theming/index.md';
+### CSS Custom Properties
 
-<Theming />
+import CSSProps from '@site/static/usage/avatar/theming/css-properties/index.md';
+
+<CSSProps />
 
 ## Properties
 <Props />
diff --git a/docs/api/badge.md b/docs/api/badge.md
index 32004eab66f..32da34d7aae 100644
--- a/docs/api/badge.md
+++ b/docs/api/badge.md
@@ -22,23 +22,25 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are.
 
-import BasicExample from '@site/static/usage/badge/basic/index.md';
+## Basic Usage
 
-<BasicExample />
+import Basic from '@site/static/usage/badge/basic/index.md';
 
-## Customization Examples
+<Basic />
 
-### Color
+## Theming
 
-import ColorExample from '@site/static/usage/badge/customization/color/index.md';
+### Colors
 
-<ColorExample />
+import Colors from '@site/static/usage/badge/theming/colors/index.md';
+
+<Colors />
 
 ### CSS Properties
 
-import CSSPropsExample from '@site/static/usage/badge/customization/css-properties/index.md';
+import CSSProps from '@site/static/usage/badge/theming/css-properties/index.md';
 
-<CSSPropsExample />
+<CSSProps />
 
 ## Properties
 <Props />
@@ -56,4 +58,4 @@ import CSSPropsExample from '@site/static/usage/badge/customization/css-properti
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index 490a0606d49..6b15c69765b 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -22,7 +22,7 @@ import APITOCInline from '@components/page/api/APITOCInline';
 
 Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property.
 
-## Basic
+## Basic Usage
 
 import Basic from '@site/static/usage/checkbox/basic/index.md';
 
@@ -36,9 +36,11 @@ import Indeterminate from '@site/static/usage/checkbox/indeterminate/index.md';
 
 ## Theming
 
-import Theming from '@site/static/usage/checkbox/theming/index.md';
+### CSS Custom Properties
 
-<Theming />
+import CSSProps from '@site/static/usage/checkbox/theming/css-properties/index.md';
+
+<CSSProps />
 
 ## Interfaces
 
diff --git a/docs/api/chip.md b/docs/api/chip.md
index 2e011567f40..668611af3ad 100644
--- a/docs/api/chip.md
+++ b/docs/api/chip.md
@@ -19,30 +19,31 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons.
 
-## Basic
+## Basic Usage
 
-import BasicExample from '@site/static/usage/chip/basic/index.md';
+import Basic from '@site/static/usage/chip/basic/index.md';
 
-<BasicExample />
+<Basic />
 
-## Colors
+## Slotting Components and Icons
 
-import ColorExample from '@site/static/usage/chip/color/index.md';
+import SlotExample from '@site/static/usage/chip/slots/index.md';
 
-<ColorExample />
+<SlotExample />
 
+## Theming
 
-## Slotting Components and Icons
+### Colors
 
-import SlotExample from '@site/static/usage/chip/slots/index.md';
+import Colors from '@site/static/usage/chip/theming/colors/index.md';
 
-<SlotExample />
+<Colors />
 
-## Styling
+### CSS Custom Properties
 
-import StylingExample from '@site/static/usage/chip/styling/index.md';
+import CSSProps from '@site/static/usage/chip/theming/css-properties/index.md';
 
-<StylingExample />
+<CSSProps />
 
 ## Properties
 <Props />
@@ -60,4 +61,4 @@ import StylingExample from '@site/static/usage/chip/styling/index.md';
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/range.md b/docs/api/range.md
index 2e6b6c74b19..0add6ba227a 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -25,6 +25,8 @@ The Range slider lets users select from a range of values by moving the slider k
 
 By default the Range slider has a minimum value of `0` and a maximum value of `100`. This can be configured with the `min` and `max` properties.
 
+## Basic Usage
+
 import Basic from '@site/static/usage/range/basic/index.md';
 
 <Basic />
@@ -57,9 +59,9 @@ import Pins from '@site/static/usage/range/pins/index.md';
 
 ## Snapping & Ticks
 
-Ticks show indications for each available value on the Range. In order to use ticks, developers must set both `snaps` and the `ticks` property to `true`. 
+Ticks show indications for each available value on the Range. In order to use ticks, developers must set both `snaps` and the `ticks` property to `true`.
 
-With snapping enabled, the Range knob will snap to the nearest available value as the knob is dragged and released. 
+With snapping enabled, the Range knob will snap to the nearest available value as the knob is dragged and released.
 
 import SnappingTicks from '@site/static/usage/range/snapping-ticks/index.md';
 
@@ -69,7 +71,7 @@ import SnappingTicks from '@site/static/usage/range/snapping-ticks/index.md';
 
 ### Using `ionChange`
 
-The `ionChange` event emits as the Range knob value changes. 
+The `ionChange` event emits as the Range knob value changes.
 
 import IonChangeEvent from '@site/static/usage/range/ion-change-event/index.md';
 
@@ -83,23 +85,23 @@ import IonKnobMoveEvent from '@site/static/usage/range/ion-knob-move-event/index
 
 <IonKnobMoveEvent />
 
-## Styling
+## Theming
 
-### Styling with CSS Variables
+### CSS Custom Properties
 
 Range includes [CSS Variables](#css-custom-properties) to quickly theme and customize the appearance of the Range component to match your application's design.
 
-import CssVariablesPlayground from '@site/static/usage/range/css-variables/index.md';
+import CSSProps from '@site/static/usage/range/theming/css-properties/index.md';
 
-<CssVariablesPlayground />
+<CSSProps />
 
-### Styling with CSS Shadow Parts
+### CSS Shadow Parts
 
 Range includes [CSS Shadow Parts](#css-shadow-parts) to allow complete customization of specific element nodes within the Range component. CSS Shadow Parts offer the most customization capabilities and are the recommended approach when requiring advance styling with the Range component.
 
-import CssShadowPartsPlayground from '@site/static/usage/range/css-shadow-parts/index.md';
+import CSSParts from '@site/static/usage/range/theming/css-shadow-parts/index.md';
 
-<CssShadowPartsPlayground />
+<CSSParts />
 
 ## Interfaces
 
@@ -163,4 +165,4 @@ type RangeValue = number | { lower: number, upper: number };
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/skeleton-text.md b/docs/api/skeleton-text.md
index ead54000e93..d09c6cf16eb 100644
--- a/docs/api/skeleton-text.md
+++ b/docs/api/skeleton-text.md
@@ -30,13 +30,13 @@ import Basic from '@site/static/usage/skeleton-text/basic/index.md';
 
 <Basic />
 
-## Customization
+## Theming
 
-### Theming
+### CSS Custom Properties
 
-import Theming from '@site/static/usage/skeleton-text/theming/index.md';
+import CSSProps from '@site/static/usage/skeleton-text/theming/css-properties/index.md';
 
-<Theming />
+<CSSProps />
 
 ## Properties
 <Props />
@@ -54,4 +54,4 @@ import Theming from '@site/static/usage/skeleton-text/theming/index.md';
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/docs/api/thumbnail.md b/docs/api/thumbnail.md
index 21b640a3b54..464712c8e6f 100644
--- a/docs/api/thumbnail.md
+++ b/docs/api/thumbnail.md
@@ -22,7 +22,7 @@ Thumbnails are square components that usually wrap an image or icon. They can be
 
 Thumbnails can be used by themselves or inside of any element. If placed inside of an `ion-item`, the thumbnail will resize to fit the parent component. To position a thumbnail on the left or right side of an item, set the slot to `start` or `end`, respectively.
 
-## Basic
+## Basic Usage
 
 import Basic from '@site/static/usage/thumbnail/basic/index.md';
 
@@ -36,9 +36,11 @@ import Item from '@site/static/usage/thumbnail/item/index.md';
 
 ## Theming
 
-import Theming from '@site/static/usage/thumbnail/theming/index.md';
+### CSS Custom Properties
 
-<Theming />
+import CSSProps from '@site/static/usage/thumbnail/theming/css-properties/index.md';
+
+<CSSProps />
 
 ## Properties
 <Props />
diff --git a/static/usage/avatar/theming/angular/example_component_css.md b/static/usage/avatar/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/avatar/theming/angular/example_component_css.md
rename to static/usage/avatar/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/avatar/theming/angular/example_component_html.md b/static/usage/avatar/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/avatar/theming/angular/example_component_html.md
rename to static/usage/avatar/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/avatar/theming/demo.html b/static/usage/avatar/theming/css-properties/demo.html
similarity index 88%
rename from static/usage/avatar/theming/demo.html
rename to static/usage/avatar/theming/css-properties/demo.html
index 0d3c4b67ac2..a7f56a37548 100644
--- a/static/usage/avatar/theming/demo.html
+++ b/static/usage/avatar/theming/css-properties/demo.html
@@ -5,8 +5,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Avatar</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
 
diff --git a/static/usage/thumbnail/theming/index.md b/static/usage/avatar/theming/css-properties/index.md
similarity index 92%
rename from static/usage/thumbnail/theming/index.md
rename to static/usage/avatar/theming/css-properties/index.md
index 8be9b0ddccc..b6b1ee34106 100644
--- a/static/usage/thumbnail/theming/index.md
+++ b/static/usage/avatar/theming/css-properties/index.md
@@ -27,6 +27,6 @@ import angularCSS from './angular/example_component_css.md';
       }
     },
   }}
-  src="usage/thumbnail/theming/demo.html"
+  src="usage/avatar/theming/css-properties/demo.html"
   size="250px"
 />
diff --git a/static/usage/avatar/theming/javascript.md b/static/usage/avatar/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/avatar/theming/javascript.md
rename to static/usage/avatar/theming/css-properties/javascript.md
diff --git a/static/usage/avatar/theming/react/main_css.md b/static/usage/avatar/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/avatar/theming/react/main_css.md
rename to static/usage/avatar/theming/css-properties/react/main_css.md
diff --git a/static/usage/avatar/theming/react/main_tsx.md b/static/usage/avatar/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/avatar/theming/react/main_tsx.md
rename to static/usage/avatar/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/avatar/theming/vue.md b/static/usage/avatar/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/avatar/theming/vue.md
rename to static/usage/avatar/theming/css-properties/vue.md
diff --git a/static/usage/avatar/theming/react.md b/static/usage/avatar/theming/react.md
deleted file mode 100644
index 7d0e98290b8..00000000000
--- a/static/usage/avatar/theming/react.md
+++ /dev/null
@@ -1,20 +0,0 @@
-```tsx
-import React from 'react';
-import { IonAvatar, IonItem, IonLabel } from '@ionic/react';
-
-import './main.css';
-
-function Example() {
-  return (
-    <>
-      <IonItem>
-        <IonAvatar slot="start">
-          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
-        </IonAvatar>
-        <IonLabel>Item Avatar</IonLabel>
-      </IonItem>
-    </>
-  );
-}
-export default Example;
-```
diff --git a/static/usage/badge/customization/color/angular.md b/static/usage/badge/theming/colors/angular.md
similarity index 100%
rename from static/usage/badge/customization/color/angular.md
rename to static/usage/badge/theming/colors/angular.md
diff --git a/static/usage/badge/customization/color/demo.html b/static/usage/badge/theming/colors/demo.html
similarity index 100%
rename from static/usage/badge/customization/color/demo.html
rename to static/usage/badge/theming/colors/demo.html
diff --git a/static/usage/badge/customization/color/index.md b/static/usage/badge/theming/colors/index.md
similarity index 84%
rename from static/usage/badge/customization/color/index.md
rename to static/usage/badge/theming/colors/index.md
index 047e0871bcf..6db34769b24 100644
--- a/static/usage/badge/customization/color/index.md
+++ b/static/usage/badge/theming/colors/index.md
@@ -8,5 +8,5 @@ import angular from './angular.md';
 <Playground
   size="medium"
   code={{ javascript, react, vue, angular }}
-  src="usage/badge/customization/color/demo.html"
-/>
\ No newline at end of file
+  src="usage/badge/theming/colors/demo.html"
+/>
diff --git a/static/usage/badge/customization/color/javascript.md b/static/usage/badge/theming/colors/javascript.md
similarity index 100%
rename from static/usage/badge/customization/color/javascript.md
rename to static/usage/badge/theming/colors/javascript.md
diff --git a/static/usage/badge/customization/color/react.md b/static/usage/badge/theming/colors/react.md
similarity index 100%
rename from static/usage/badge/customization/color/react.md
rename to static/usage/badge/theming/colors/react.md
diff --git a/static/usage/badge/customization/color/vue.md b/static/usage/badge/theming/colors/vue.md
similarity index 100%
rename from static/usage/badge/customization/color/vue.md
rename to static/usage/badge/theming/colors/vue.md
diff --git a/static/usage/badge/customization/css-properties/angular/angular-css.md b/static/usage/badge/theming/css-properties/angular/angular-css.md
similarity index 100%
rename from static/usage/badge/customization/css-properties/angular/angular-css.md
rename to static/usage/badge/theming/css-properties/angular/angular-css.md
diff --git a/static/usage/badge/customization/css-properties/angular/angular-html.md b/static/usage/badge/theming/css-properties/angular/angular-html.md
similarity index 100%
rename from static/usage/badge/customization/css-properties/angular/angular-html.md
rename to static/usage/badge/theming/css-properties/angular/angular-html.md
diff --git a/static/usage/badge/customization/css-properties/demo.html b/static/usage/badge/theming/css-properties/demo.html
similarity index 100%
rename from static/usage/badge/customization/css-properties/demo.html
rename to static/usage/badge/theming/css-properties/demo.html
diff --git a/static/usage/badge/customization/css-properties/index.md b/static/usage/badge/theming/css-properties/index.md
similarity index 91%
rename from static/usage/badge/customization/css-properties/index.md
rename to static/usage/badge/theming/css-properties/index.md
index de39bd6203f..85abdef8270 100644
--- a/static/usage/badge/customization/css-properties/index.md
+++ b/static/usage/badge/theming/css-properties/index.md
@@ -27,5 +27,5 @@ import angularCSS from './angular/angular-css.md';
       },
     },
   }}
-  src="usage/badge/customization/css-properties/demo.html"
+  src="usage/badge/theming/css-properties/demo.html"
 />
diff --git a/static/usage/badge/customization/css-properties/javascript.md b/static/usage/badge/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/badge/customization/css-properties/javascript.md
rename to static/usage/badge/theming/css-properties/javascript.md
diff --git a/static/usage/badge/customization/css-properties/react/react-css.md b/static/usage/badge/theming/css-properties/react/react-css.md
similarity index 100%
rename from static/usage/badge/customization/css-properties/react/react-css.md
rename to static/usage/badge/theming/css-properties/react/react-css.md
diff --git a/static/usage/badge/customization/css-properties/react/react-ts.md b/static/usage/badge/theming/css-properties/react/react-ts.md
similarity index 100%
rename from static/usage/badge/customization/css-properties/react/react-ts.md
rename to static/usage/badge/theming/css-properties/react/react-ts.md
diff --git a/static/usage/badge/customization/css-properties/vue.md b/static/usage/badge/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/badge/customization/css-properties/vue.md
rename to static/usage/badge/theming/css-properties/vue.md
diff --git a/static/usage/checkbox/theming/angular/example_component_css.md b/static/usage/checkbox/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/checkbox/theming/angular/example_component_css.md
rename to static/usage/checkbox/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/checkbox/theming/angular/example_component_html.md b/static/usage/checkbox/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/checkbox/theming/angular/example_component_html.md
rename to static/usage/checkbox/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/checkbox/theming/demo.html b/static/usage/checkbox/theming/css-properties/demo.html
similarity index 89%
rename from static/usage/checkbox/theming/demo.html
rename to static/usage/checkbox/theming/css-properties/demo.html
index 224dedb9800..4666cbf6298 100644
--- a/static/usage/checkbox/theming/demo.html
+++ b/static/usage/checkbox/theming/css-properties/demo.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Checkbox</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
     <style>
diff --git a/static/usage/checkbox/theming/index.md b/static/usage/checkbox/theming/css-properties/index.md
similarity index 93%
rename from static/usage/checkbox/theming/index.md
rename to static/usage/checkbox/theming/css-properties/index.md
index 1fea21694a3..ac8f8a90076 100644
--- a/static/usage/checkbox/theming/index.md
+++ b/static/usage/checkbox/theming/css-properties/index.md
@@ -27,5 +27,5 @@ import angular_example_component_css from './angular/example_component_css.md';
       }
     }
   }}
-  src="usage/checkbox/theming/demo.html"
+  src="usage/checkbox/theming/css-properties/demo.html"
 />
diff --git a/static/usage/checkbox/theming/javascript.md b/static/usage/checkbox/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/checkbox/theming/javascript.md
rename to static/usage/checkbox/theming/css-properties/javascript.md
diff --git a/static/usage/checkbox/theming/react/main_css.md b/static/usage/checkbox/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/checkbox/theming/react/main_css.md
rename to static/usage/checkbox/theming/css-properties/react/main_css.md
diff --git a/static/usage/checkbox/theming/react/main_tsx.md b/static/usage/checkbox/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/checkbox/theming/react/main_tsx.md
rename to static/usage/checkbox/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/checkbox/theming/vue.md b/static/usage/checkbox/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/checkbox/theming/vue.md
rename to static/usage/checkbox/theming/css-properties/vue.md
diff --git a/static/usage/chip/color/angular.md b/static/usage/chip/theming/colors/angular.md
similarity index 100%
rename from static/usage/chip/color/angular.md
rename to static/usage/chip/theming/colors/angular.md
diff --git a/static/usage/chip/color/demo.html b/static/usage/chip/theming/colors/demo.html
similarity index 92%
rename from static/usage/chip/color/demo.html
rename to static/usage/chip/theming/colors/demo.html
index 9f05dea22d0..135036f28d2 100644
--- a/static/usage/chip/color/demo.html
+++ b/static/usage/chip/theming/colors/demo.html
@@ -5,8 +5,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Chip</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
 
diff --git a/static/usage/chip/color/index.md b/static/usage/chip/theming/colors/index.md
similarity index 88%
rename from static/usage/chip/color/index.md
rename to static/usage/chip/theming/colors/index.md
index 6c8ed67e81c..6795c343ed3 100644
--- a/static/usage/chip/color/index.md
+++ b/static/usage/chip/theming/colors/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/chip/color/demo.html" />
+<Playground code={{ javascript, react, vue, angular }} src="usage/chip/theming/colors/demo.html" />
diff --git a/static/usage/chip/color/javascript.md b/static/usage/chip/theming/colors/javascript.md
similarity index 100%
rename from static/usage/chip/color/javascript.md
rename to static/usage/chip/theming/colors/javascript.md
diff --git a/static/usage/chip/color/react.md b/static/usage/chip/theming/colors/react.md
similarity index 100%
rename from static/usage/chip/color/react.md
rename to static/usage/chip/theming/colors/react.md
diff --git a/static/usage/chip/color/vue.md b/static/usage/chip/theming/colors/vue.md
similarity index 100%
rename from static/usage/chip/color/vue.md
rename to static/usage/chip/theming/colors/vue.md
diff --git a/static/usage/chip/styling/angular/example_component_css.md b/static/usage/chip/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/chip/styling/angular/example_component_css.md
rename to static/usage/chip/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/chip/styling/angular/example_component_html.md b/static/usage/chip/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/chip/styling/angular/example_component_html.md
rename to static/usage/chip/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/chip/styling/demo.html b/static/usage/chip/theming/css-properties/demo.html
similarity index 86%
rename from static/usage/chip/styling/demo.html
rename to static/usage/chip/theming/css-properties/demo.html
index 26048748135..2092faeb245 100644
--- a/static/usage/chip/styling/demo.html
+++ b/static/usage/chip/theming/css-properties/demo.html
@@ -5,8 +5,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Chip</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
 
diff --git a/static/usage/chip/styling/index.md b/static/usage/chip/theming/css-properties/index.md
similarity index 93%
rename from static/usage/chip/styling/index.md
rename to static/usage/chip/theming/css-properties/index.md
index 4f07411cf99..d44a374a371 100644
--- a/static/usage/chip/styling/index.md
+++ b/static/usage/chip/theming/css-properties/index.md
@@ -27,5 +27,5 @@ import angular_example_component_html from './angular/example_component_html.md'
       },
     },
   }}
-  src="usage/chip/styling/demo.html"
+  src="usage/chip/theming/css-properties/demo.html"
 />
diff --git a/static/usage/chip/styling/javascript.md b/static/usage/chip/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/chip/styling/javascript.md
rename to static/usage/chip/theming/css-properties/javascript.md
diff --git a/static/usage/chip/styling/react/main_css.md b/static/usage/chip/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/chip/styling/react/main_css.md
rename to static/usage/chip/theming/css-properties/react/main_css.md
diff --git a/static/usage/chip/styling/react/main_tsx.md b/static/usage/chip/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/chip/styling/react/main_tsx.md
rename to static/usage/chip/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/chip/styling/vue.md b/static/usage/chip/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/chip/styling/vue.md
rename to static/usage/chip/theming/css-properties/vue.md
diff --git a/static/usage/range/css-variables/angular/example_component_css.md b/static/usage/range/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/range/css-variables/angular/example_component_css.md
rename to static/usage/range/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/range/css-variables/angular/example_component_html.md b/static/usage/range/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/range/css-variables/angular/example_component_html.md
rename to static/usage/range/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/range/css-variables/demo.html b/static/usage/range/theming/css-properties/demo.html
similarity index 89%
rename from static/usage/range/css-variables/demo.html
rename to static/usage/range/theming/css-properties/demo.html
index 8022474cde5..09d7bcbcb7b 100644
--- a/static/usage/range/css-variables/demo.html
+++ b/static/usage/range/theming/css-properties/demo.html
@@ -5,8 +5,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Range</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
   <style>
diff --git a/static/usage/range/css-shadow-parts/index.md b/static/usage/range/theming/css-properties/index.md
similarity index 93%
rename from static/usage/range/css-shadow-parts/index.md
rename to static/usage/range/theming/css-properties/index.md
index af1df80390f..18bbf19bc90 100644
--- a/static/usage/range/css-shadow-parts/index.md
+++ b/static/usage/range/theming/css-properties/index.md
@@ -27,5 +27,5 @@ import angular_example_component_css from './angular/example_component_css.md';
       },
     },
   }}
-  src="usage/range/css-shadow-parts/demo.html"
+  src="usage/range/theming/css-properties/demo.html"
 />
diff --git a/static/usage/range/css-variables/javascript.md b/static/usage/range/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/range/css-variables/javascript.md
rename to static/usage/range/theming/css-properties/javascript.md
diff --git a/static/usage/range/css-variables/react/main_css.md b/static/usage/range/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/range/css-variables/react/main_css.md
rename to static/usage/range/theming/css-properties/react/main_css.md
diff --git a/static/usage/range/css-variables/react/main_tsx.md b/static/usage/range/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/range/css-variables/react/main_tsx.md
rename to static/usage/range/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/range/css-variables/vue.md b/static/usage/range/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/range/css-variables/vue.md
rename to static/usage/range/theming/css-properties/vue.md
diff --git a/static/usage/range/css-shadow-parts/angular/example_component_css.md b/static/usage/range/theming/css-shadow-parts/angular/example_component_css.md
similarity index 100%
rename from static/usage/range/css-shadow-parts/angular/example_component_css.md
rename to static/usage/range/theming/css-shadow-parts/angular/example_component_css.md
diff --git a/static/usage/range/css-shadow-parts/angular/example_component_html.md b/static/usage/range/theming/css-shadow-parts/angular/example_component_html.md
similarity index 100%
rename from static/usage/range/css-shadow-parts/angular/example_component_html.md
rename to static/usage/range/theming/css-shadow-parts/angular/example_component_html.md
diff --git a/static/usage/range/css-shadow-parts/demo.html b/static/usage/range/theming/css-shadow-parts/demo.html
similarity index 93%
rename from static/usage/range/css-shadow-parts/demo.html
rename to static/usage/range/theming/css-shadow-parts/demo.html
index 5cfc3b906d8..fb27194b4a5 100644
--- a/static/usage/range/css-shadow-parts/demo.html
+++ b/static/usage/range/theming/css-shadow-parts/demo.html
@@ -5,8 +5,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Range</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
   <style>
diff --git a/static/usage/range/css-variables/index.md b/static/usage/range/theming/css-shadow-parts/index.md
similarity index 93%
rename from static/usage/range/css-variables/index.md
rename to static/usage/range/theming/css-shadow-parts/index.md
index c613c23ce3f..cd1fa1c5a25 100644
--- a/static/usage/range/css-variables/index.md
+++ b/static/usage/range/theming/css-shadow-parts/index.md
@@ -27,5 +27,5 @@ import angular_example_component_css from './angular/example_component_css.md';
       },
     },
   }}
-  src="usage/range/css-variables/demo.html"
+  src="usage/range/theming/css-shadow-parts/demo.html"
 />
diff --git a/static/usage/range/css-shadow-parts/javascript.md b/static/usage/range/theming/css-shadow-parts/javascript.md
similarity index 100%
rename from static/usage/range/css-shadow-parts/javascript.md
rename to static/usage/range/theming/css-shadow-parts/javascript.md
diff --git a/static/usage/range/css-shadow-parts/react/main_css.md b/static/usage/range/theming/css-shadow-parts/react/main_css.md
similarity index 100%
rename from static/usage/range/css-shadow-parts/react/main_css.md
rename to static/usage/range/theming/css-shadow-parts/react/main_css.md
diff --git a/static/usage/range/css-shadow-parts/react/main_tsx.md b/static/usage/range/theming/css-shadow-parts/react/main_tsx.md
similarity index 100%
rename from static/usage/range/css-shadow-parts/react/main_tsx.md
rename to static/usage/range/theming/css-shadow-parts/react/main_tsx.md
diff --git a/static/usage/range/css-shadow-parts/vue.md b/static/usage/range/theming/css-shadow-parts/vue.md
similarity index 100%
rename from static/usage/range/css-shadow-parts/vue.md
rename to static/usage/range/theming/css-shadow-parts/vue.md
diff --git a/static/usage/skeleton-text/theming/angular/example_component_css.md b/static/usage/skeleton-text/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/skeleton-text/theming/angular/example_component_css.md
rename to static/usage/skeleton-text/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/skeleton-text/theming/angular/example_component_html.md b/static/usage/skeleton-text/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/skeleton-text/theming/angular/example_component_html.md
rename to static/usage/skeleton-text/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/skeleton-text/theming/demo.html b/static/usage/skeleton-text/theming/css-properties/demo.html
similarity index 94%
rename from static/usage/skeleton-text/theming/demo.html
rename to static/usage/skeleton-text/theming/css-properties/demo.html
index 98c691431e9..8b94ae1d3cc 100644
--- a/static/usage/skeleton-text/theming/demo.html
+++ b/static/usage/skeleton-text/theming/css-properties/demo.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Accordion</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
 
diff --git a/static/usage/skeleton-text/theming/index.md b/static/usage/skeleton-text/theming/css-properties/index.md
similarity index 91%
rename from static/usage/skeleton-text/theming/index.md
rename to static/usage/skeleton-text/theming/css-properties/index.md
index a79907b63b6..255377b76cd 100644
--- a/static/usage/skeleton-text/theming/index.md
+++ b/static/usage/skeleton-text/theming/css-properties/index.md
@@ -27,6 +27,6 @@ import angularCSS from './angular/example_component_css.md';
       }
     },
   }}
-  src="usage/skeleton-text/theming/demo.html"
+  src="usage/skeleton-text/theming/css-properties/demo.html"
   size="250px"
 />
diff --git a/static/usage/skeleton-text/theming/javascript.md b/static/usage/skeleton-text/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/skeleton-text/theming/javascript.md
rename to static/usage/skeleton-text/theming/css-properties/javascript.md
diff --git a/static/usage/skeleton-text/theming/react/main_css.md b/static/usage/skeleton-text/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/skeleton-text/theming/react/main_css.md
rename to static/usage/skeleton-text/theming/css-properties/react/main_css.md
diff --git a/static/usage/skeleton-text/theming/react/main_tsx.md b/static/usage/skeleton-text/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/skeleton-text/theming/react/main_tsx.md
rename to static/usage/skeleton-text/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/skeleton-text/theming/vue.md b/static/usage/skeleton-text/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/skeleton-text/theming/vue.md
rename to static/usage/skeleton-text/theming/css-properties/vue.md
diff --git a/static/usage/thumbnail/theming/angular.md b/static/usage/thumbnail/theming/css-properties/angular.md
similarity index 100%
rename from static/usage/thumbnail/theming/angular.md
rename to static/usage/thumbnail/theming/css-properties/angular.md
diff --git a/static/usage/thumbnail/theming/angular/example_component_css.md b/static/usage/thumbnail/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/thumbnail/theming/angular/example_component_css.md
rename to static/usage/thumbnail/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/thumbnail/theming/angular/example_component_html.md b/static/usage/thumbnail/theming/css-properties/angular/example_component_html.md
similarity index 100%
rename from static/usage/thumbnail/theming/angular/example_component_html.md
rename to static/usage/thumbnail/theming/css-properties/angular/example_component_html.md
diff --git a/static/usage/thumbnail/theming/demo.html b/static/usage/thumbnail/theming/css-properties/demo.html
similarity index 88%
rename from static/usage/thumbnail/theming/demo.html
rename to static/usage/thumbnail/theming/css-properties/demo.html
index 37b245dda91..fb424cd4e70 100644
--- a/static/usage/thumbnail/theming/demo.html
+++ b/static/usage/thumbnail/theming/css-properties/demo.html
@@ -5,8 +5,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Thumbnail</title>
-  <link rel="stylesheet" href="../../common.css" />
-  <script src="../../common.js"></script>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
 
diff --git a/static/usage/avatar/theming/index.md b/static/usage/thumbnail/theming/css-properties/index.md
similarity index 92%
rename from static/usage/avatar/theming/index.md
rename to static/usage/thumbnail/theming/css-properties/index.md
index e586aae743b..71b197097d1 100644
--- a/static/usage/avatar/theming/index.md
+++ b/static/usage/thumbnail/theming/css-properties/index.md
@@ -27,6 +27,6 @@ import angularCSS from './angular/example_component_css.md';
       }
     },
   }}
-  src="usage/avatar/theming/demo.html"
+  src="usage/thumbnail/theming/css-properties/demo.html"
   size="250px"
 />
diff --git a/static/usage/thumbnail/theming/javascript.md b/static/usage/thumbnail/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/thumbnail/theming/javascript.md
rename to static/usage/thumbnail/theming/css-properties/javascript.md
diff --git a/static/usage/thumbnail/theming/react/main_css.md b/static/usage/thumbnail/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/thumbnail/theming/react/main_css.md
rename to static/usage/thumbnail/theming/css-properties/react/main_css.md
diff --git a/static/usage/thumbnail/theming/react/main_tsx.md b/static/usage/thumbnail/theming/css-properties/react/main_tsx.md
similarity index 100%
rename from static/usage/thumbnail/theming/react/main_tsx.md
rename to static/usage/thumbnail/theming/css-properties/react/main_tsx.md
diff --git a/static/usage/thumbnail/theming/vue.md b/static/usage/thumbnail/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/thumbnail/theming/vue.md
rename to static/usage/thumbnail/theming/css-properties/vue.md