From 62b45240cf2742c1b6656748946a3e4ac211010d Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 21 Jun 2023 09:05:17 -0400
Subject: [PATCH 1/2] chore: add playgrounds for JP docs

---
 .../theming/angular/example_component_html.md |  3 +
 .../v7/datetime/theming/angular/global_css.md | 66 ++++++++++++++++
 static/usage/v7/datetime/theming/demo.html    | 76 +++++++++++++++++++
 static/usage/v7/datetime/theming/index.md     | 35 +++++++++
 .../usage/v7/datetime/theming/javascript.md   | 54 +++++++++++++
 .../v7/datetime/theming/react/main_css.md     | 50 ++++++++++++
 .../v7/datetime/theming/react/main_tsx.md     | 11 +++
 static/usage/v7/datetime/theming/vue.md       | 65 ++++++++++++++++
 static/usage/v7/range/basic/angular.md        |  3 +
 static/usage/v7/range/basic/demo.html         | 27 +++++++
 static/usage/v7/range/basic/index.md          | 10 +++
 static/usage/v7/range/basic/javascript.md     |  3 +
 static/usage/v7/range/basic/react.md          |  8 ++
 static/usage/v7/range/basic/vue.md            | 14 ++++
 .../theming/angular/example_component_html.md |  3 +
 static/usage/v7/theming/angular/global_css.md | 66 ++++++++++++++++
 static/usage/v7/theming/demo.html             | 76 +++++++++++++++++++
 static/usage/v7/theming/index.md              | 33 ++++++++
 static/usage/v7/theming/javascript.md         | 54 +++++++++++++
 static/usage/v7/theming/react/main_css.md     | 50 ++++++++++++
 static/usage/v7/theming/react/main_tsx.md     | 11 +++
 static/usage/v7/theming/vue.md                | 65 ++++++++++++++++
 22 files changed, 783 insertions(+)
 create mode 100644 static/usage/v7/datetime/theming/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/theming/angular/global_css.md
 create mode 100644 static/usage/v7/datetime/theming/demo.html
 create mode 100644 static/usage/v7/datetime/theming/index.md
 create mode 100644 static/usage/v7/datetime/theming/javascript.md
 create mode 100644 static/usage/v7/datetime/theming/react/main_css.md
 create mode 100644 static/usage/v7/datetime/theming/react/main_tsx.md
 create mode 100644 static/usage/v7/datetime/theming/vue.md
 create mode 100644 static/usage/v7/range/basic/angular.md
 create mode 100644 static/usage/v7/range/basic/demo.html
 create mode 100644 static/usage/v7/range/basic/index.md
 create mode 100644 static/usage/v7/range/basic/javascript.md
 create mode 100644 static/usage/v7/range/basic/react.md
 create mode 100644 static/usage/v7/range/basic/vue.md
 create mode 100644 static/usage/v7/theming/angular/example_component_html.md
 create mode 100644 static/usage/v7/theming/angular/global_css.md
 create mode 100644 static/usage/v7/theming/demo.html
 create mode 100644 static/usage/v7/theming/index.md
 create mode 100644 static/usage/v7/theming/javascript.md
 create mode 100644 static/usage/v7/theming/react/main_css.md
 create mode 100644 static/usage/v7/theming/react/main_tsx.md
 create mode 100644 static/usage/v7/theming/vue.md

diff --git a/static/usage/v7/datetime/theming/angular/example_component_html.md b/static/usage/v7/datetime/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..0a38b1bc5b6
--- /dev/null
+++ b/static/usage/v7/datetime/theming/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime color="rose"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/theming/angular/global_css.md b/static/usage/v7/datetime/theming/angular/global_css.md
new file mode 100644
index 00000000000..4ec3d3ecdf9
--- /dev/null
+++ b/static/usage/v7/datetime/theming/angular/global_css.md
@@ -0,0 +1,66 @@
+```css
+/* Core CSS required for Ionic components to work properly */
+@import '~@ionic/angular/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+@import '~@ionic/angular/css/normalize.css';
+@import '~@ionic/angular/css/structure.css';
+@import '~@ionic/angular/css/typography.css';
+@import '~@ionic/angular/css/display.css';
+
+/* Optional CSS utils that can be commented out */
+@import '~@ionic/angular/css/padding.css';
+@import '~@ionic/angular/css/float-elements.css';
+@import '~@ionic/angular/css/text-alignment.css';
+@import '~@ionic/angular/css/text-transformation.css';
+@import '~@ionic/angular/css/flex-utils.css';
+
+:root {
+  --ion-color-rose: #831843;
+  --ion-color-rose-rgb: 131, 24, 67;
+  --ion-color-rose-contrast: #ffffff;
+  --ion-color-rose-contrast-rgb: 255, 255, 255;
+  --ion-color-rose-shade: #73153b;
+  --ion-color-rose-tint: #8f2f56;
+
+  --ion-text-color: #881337;
+  --ion-text-color-rgb: 136, 19, 55;
+
+  --ion-color-step-50: #f9e6e9;
+  --ion-color-step-100: #f3dbdf;
+  --ion-color-step-150: #edd0d6;
+  --ion-color-step-200: #e7c5cd;
+  --ion-color-step-250: #e1bac3;
+  --ion-color-step-300: #dbaeba;
+  --ion-color-step-350: #d5a3b1;
+  --ion-color-step-400: #cf98a7;
+  --ion-color-step-450: #c98d9e;
+  --ion-color-step-500: #c48295;
+  --ion-color-step-550: #be778b;
+  --ion-color-step-600: #b86c82;
+  --ion-color-step-650: #b26178;
+  --ion-color-step-700: #ac566f;
+  --ion-color-step-750: #a64b66;
+  --ion-color-step-800: #a03f5c;
+  --ion-color-step-850: #9a3453;
+  --ion-color-step-900: #94294a;
+  --ion-color-step-950: #8e1e40;
+}
+
+.ion-color-rose {
+  --ion-color-base: var(--ion-color-rose);
+  --ion-color-base-rgb: var(--ion-color-rose-rgb);
+  --ion-color-contrast: var(--ion-color-rose-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+  --ion-color-shade: var(--ion-color-rose-shade);
+  --ion-color-tint: var(--ion-color-rose-tint);
+}
+
+ion-datetime {
+  --background: #fff1f2;
+  --background-rgb: 255, 241, 242;
+
+  border-radius: 16px;
+  box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+}
+```
diff --git a/static/usage/v7/datetime/theming/demo.html b/static/usage/v7/datetime/theming/demo.html
new file mode 100644
index 00000000000..f2e502cfe56
--- /dev/null
+++ b/static/usage/v7/datetime/theming/demo.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Datetime</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      :root,
+      .ios body.dark,
+      .md body.dark {
+        --ion-color-rose: #831843;
+        --ion-color-rose-rgb: 131, 24, 67;
+        --ion-color-rose-contrast: #ffffff;
+        --ion-color-rose-contrast-rgb: 255, 255, 255;
+        --ion-color-rose-shade: #73153b;
+        --ion-color-rose-tint: #8f2f56;
+
+        --ion-text-color: #881337;
+        --ion-text-color-rgb: 136, 19, 55;
+
+        --ion-color-step-50: #f9e6e9;
+        --ion-color-step-100: #f3dbdf;
+        --ion-color-step-150: #edd0d6;
+        --ion-color-step-200: #e7c5cd;
+        --ion-color-step-250: #e1bac3;
+        --ion-color-step-300: #dbaeba;
+        --ion-color-step-350: #d5a3b1;
+        --ion-color-step-400: #cf98a7;
+        --ion-color-step-450: #c98d9e;
+        --ion-color-step-500: #c48295;
+        --ion-color-step-550: #be778b;
+        --ion-color-step-600: #b86c82;
+        --ion-color-step-650: #b26178;
+        --ion-color-step-700: #ac566f;
+        --ion-color-step-750: #a64b66;
+        --ion-color-step-800: #a03f5c;
+        --ion-color-step-850: #9a3453;
+        --ion-color-step-900: #94294a;
+        --ion-color-step-950: #8e1e40;
+      }
+
+      .ion-color-rose {
+        --ion-color-base: var(--ion-color-rose);
+        --ion-color-base-rgb: var(--ion-color-rose-rgb);
+        --ion-color-contrast: var(--ion-color-rose-contrast);
+        --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+        --ion-color-shade: var(--ion-color-rose-shade);
+        --ion-color-tint: var(--ion-color-rose-tint);
+      }
+
+      ion-datetime {
+        --background: #fff1f2;
+        --background-rgb: 255, 241, 242;
+
+        width: 350px;
+
+        border-radius: 16px;
+        box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-datetime color="rose"></ion-datetime>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/datetime/theming/index.md b/static/usage/v7/datetime/theming/index.md
new file mode 100644
index 00000000000..3ed5817346f
--- /dev/null
+++ b/static/usage/v7/datetime/theming/index.md
@@ -0,0 +1,35 @@
+# TODO FW-4608
+
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  version="7"
+  size="450px"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v7/datetime/theming/demo.html"
+/>
diff --git a/static/usage/v7/datetime/theming/javascript.md b/static/usage/v7/datetime/theming/javascript.md
new file mode 100644
index 00000000000..3da768ccbb4
--- /dev/null
+++ b/static/usage/v7/datetime/theming/javascript.md
@@ -0,0 +1,54 @@
+```html
+<ion-datetime color="rose"></ion-datetime>
+
+<style>
+  :root {
+    --ion-color-rose: #831843;
+    --ion-color-rose-rgb: 131, 24, 67;
+    --ion-color-rose-contrast: #ffffff;
+    --ion-color-rose-contrast-rgb: 255, 255, 255;
+    --ion-color-rose-shade: #73153b;
+    --ion-color-rose-tint: #8f2f56;
+
+    --ion-text-color: #881337;
+    --ion-text-color-rgb: 136, 19, 55;
+
+    --ion-color-step-50: #f9e6e9;
+    --ion-color-step-100: #f3dbdf;
+    --ion-color-step-150: #edd0d6;
+    --ion-color-step-200: #e7c5cd;
+    --ion-color-step-250: #e1bac3;
+    --ion-color-step-300: #dbaeba;
+    --ion-color-step-350: #d5a3b1;
+    --ion-color-step-400: #cf98a7;
+    --ion-color-step-450: #c98d9e;
+    --ion-color-step-500: #c48295;
+    --ion-color-step-550: #be778b;
+    --ion-color-step-600: #b86c82;
+    --ion-color-step-650: #b26178;
+    --ion-color-step-700: #ac566f;
+    --ion-color-step-750: #a64b66;
+    --ion-color-step-800: #a03f5c;
+    --ion-color-step-850: #9a3453;
+    --ion-color-step-900: #94294a;
+    --ion-color-step-950: #8e1e40;
+  }
+
+  .ion-color-rose {
+    --ion-color-base: var(--ion-color-rose);
+    --ion-color-base-rgb: var(--ion-color-rose-rgb);
+    --ion-color-contrast: var(--ion-color-rose-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+    --ion-color-shade: var(--ion-color-rose-shade);
+    --ion-color-tint: var(--ion-color-rose-tint);
+  }
+
+  ion-datetime {
+    --background: #fff1f2;
+    --background-rgb: 255, 241, 242;
+
+    border-radius: 16px;
+    box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+  }
+</style>
+```
diff --git a/static/usage/v7/datetime/theming/react/main_css.md b/static/usage/v7/datetime/theming/react/main_css.md
new file mode 100644
index 00000000000..dccf6c7d370
--- /dev/null
+++ b/static/usage/v7/datetime/theming/react/main_css.md
@@ -0,0 +1,50 @@
+```css
+:root {
+  --ion-color-rose: #831843;
+  --ion-color-rose-rgb: 131, 24, 67;
+  --ion-color-rose-contrast: #ffffff;
+  --ion-color-rose-contrast-rgb: 255, 255, 255;
+  --ion-color-rose-shade: #73153b;
+  --ion-color-rose-tint: #8f2f56;
+
+  --ion-text-color: #881337;
+  --ion-text-color-rgb: 136, 19, 55;
+
+  --ion-color-step-50: #f9e6e9;
+  --ion-color-step-100: #f3dbdf;
+  --ion-color-step-150: #edd0d6;
+  --ion-color-step-200: #e7c5cd;
+  --ion-color-step-250: #e1bac3;
+  --ion-color-step-300: #dbaeba;
+  --ion-color-step-350: #d5a3b1;
+  --ion-color-step-400: #cf98a7;
+  --ion-color-step-450: #c98d9e;
+  --ion-color-step-500: #c48295;
+  --ion-color-step-550: #be778b;
+  --ion-color-step-600: #b86c82;
+  --ion-color-step-650: #b26178;
+  --ion-color-step-700: #ac566f;
+  --ion-color-step-750: #a64b66;
+  --ion-color-step-800: #a03f5c;
+  --ion-color-step-850: #9a3453;
+  --ion-color-step-900: #94294a;
+  --ion-color-step-950: #8e1e40;
+}
+
+.ion-color-rose {
+  --ion-color-base: var(--ion-color-rose);
+  --ion-color-base-rgb: var(--ion-color-rose-rgb);
+  --ion-color-contrast: var(--ion-color-rose-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+  --ion-color-shade: var(--ion-color-rose-shade);
+  --ion-color-tint: var(--ion-color-rose-tint);
+}
+
+ion-datetime {
+  --background: #fff1f2;
+  --background-rgb: 255, 241, 242;
+
+  border-radius: 16px;
+  box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+}
+```
diff --git a/static/usage/v7/datetime/theming/react/main_tsx.md b/static/usage/v7/datetime/theming/react/main_tsx.md
new file mode 100644
index 00000000000..37e658cdcd1
--- /dev/null
+++ b/static/usage/v7/datetime/theming/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return <IonDatetime color="rose"></IonDatetime>;
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/theming/vue.md b/static/usage/v7/datetime/theming/vue.md
new file mode 100644
index 00000000000..32e682cfbc9
--- /dev/null
+++ b/static/usage/v7/datetime/theming/vue.md
@@ -0,0 +1,65 @@
+```html
+<template>
+  <ion-datetime color="rose"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+
+<style>
+  :root {
+    --ion-color-rose: #831843;
+    --ion-color-rose-rgb: 131, 24, 67;
+    --ion-color-rose-contrast: #ffffff;
+    --ion-color-rose-contrast-rgb: 255, 255, 255;
+    --ion-color-rose-shade: #73153b;
+    --ion-color-rose-tint: #8f2f56;
+
+    --ion-text-color: #881337;
+    --ion-text-color-rgb: 136, 19, 55;
+
+    --ion-color-step-50: #f9e6e9;
+    --ion-color-step-100: #f3dbdf;
+    --ion-color-step-150: #edd0d6;
+    --ion-color-step-200: #e7c5cd;
+    --ion-color-step-250: #e1bac3;
+    --ion-color-step-300: #dbaeba;
+    --ion-color-step-350: #d5a3b1;
+    --ion-color-step-400: #cf98a7;
+    --ion-color-step-450: #c98d9e;
+    --ion-color-step-500: #c48295;
+    --ion-color-step-550: #be778b;
+    --ion-color-step-600: #b86c82;
+    --ion-color-step-650: #b26178;
+    --ion-color-step-700: #ac566f;
+    --ion-color-step-750: #a64b66;
+    --ion-color-step-800: #a03f5c;
+    --ion-color-step-850: #9a3453;
+    --ion-color-step-900: #94294a;
+    --ion-color-step-950: #8e1e40;
+  }
+
+  .ion-color-rose {
+    --ion-color-base: var(--ion-color-rose);
+    --ion-color-base-rgb: var(--ion-color-rose-rgb);
+    --ion-color-contrast: var(--ion-color-rose-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+    --ion-color-shade: var(--ion-color-rose-shade);
+    --ion-color-tint: var(--ion-color-rose-tint);
+  }
+
+  ion-datetime {
+    --background: #fff1f2;
+    --background-rgb: 255, 241, 242;
+
+    border-radius: 16px;
+    box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+  }
+</style>
+```
diff --git a/static/usage/v7/range/basic/angular.md b/static/usage/v7/range/basic/angular.md
new file mode 100644
index 00000000000..ea96f2e2dd3
--- /dev/null
+++ b/static/usage/v7/range/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-range aria-label="Volume"></ion-range>
+```
diff --git a/static/usage/v7/range/basic/demo.html b/static/usage/v7/range/basic/demo.html
new file mode 100644
index 00000000000..55216a9dd4b
--- /dev/null
+++ b/static/usage/v7/range/basic/demo.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <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>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      ion-range {
+        max-width: 320px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-range aria-label="Volume"></ion-range>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/range/basic/index.md b/static/usage/v7/range/basic/index.md
new file mode 100644
index 00000000000..7da08dbd165
--- /dev/null
+++ b/static/usage/v7/range/basic/index.md
@@ -0,0 +1,10 @@
+# TODO FW-4608
+
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/range/basic/demo.html" />
\ No newline at end of file
diff --git a/static/usage/v7/range/basic/javascript.md b/static/usage/v7/range/basic/javascript.md
new file mode 100644
index 00000000000..ea96f2e2dd3
--- /dev/null
+++ b/static/usage/v7/range/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-range aria-label="Volume"></ion-range>
+```
diff --git a/static/usage/v7/range/basic/react.md b/static/usage/v7/range/basic/react.md
new file mode 100644
index 00000000000..ed85af943b5
--- /dev/null
+++ b/static/usage/v7/range/basic/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+function Example() {
+  return <IonRange aria-label="Volume"></IonRange>;
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/basic/vue.md b/static/usage/v7/range/basic/vue.md
new file mode 100644
index 00000000000..421bea060e4
--- /dev/null
+++ b/static/usage/v7/range/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-range aria-label="Volume"></ion-range>
+</template>
+
+<script lang="ts">
+  import { IonRange } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonRange },
+  });
+</script>
+```
diff --git a/static/usage/v7/theming/angular/example_component_html.md b/static/usage/v7/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..0a38b1bc5b6
--- /dev/null
+++ b/static/usage/v7/theming/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime color="rose"></ion-datetime>
+```
diff --git a/static/usage/v7/theming/angular/global_css.md b/static/usage/v7/theming/angular/global_css.md
new file mode 100644
index 00000000000..4ec3d3ecdf9
--- /dev/null
+++ b/static/usage/v7/theming/angular/global_css.md
@@ -0,0 +1,66 @@
+```css
+/* Core CSS required for Ionic components to work properly */
+@import '~@ionic/angular/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+@import '~@ionic/angular/css/normalize.css';
+@import '~@ionic/angular/css/structure.css';
+@import '~@ionic/angular/css/typography.css';
+@import '~@ionic/angular/css/display.css';
+
+/* Optional CSS utils that can be commented out */
+@import '~@ionic/angular/css/padding.css';
+@import '~@ionic/angular/css/float-elements.css';
+@import '~@ionic/angular/css/text-alignment.css';
+@import '~@ionic/angular/css/text-transformation.css';
+@import '~@ionic/angular/css/flex-utils.css';
+
+:root {
+  --ion-color-rose: #831843;
+  --ion-color-rose-rgb: 131, 24, 67;
+  --ion-color-rose-contrast: #ffffff;
+  --ion-color-rose-contrast-rgb: 255, 255, 255;
+  --ion-color-rose-shade: #73153b;
+  --ion-color-rose-tint: #8f2f56;
+
+  --ion-text-color: #881337;
+  --ion-text-color-rgb: 136, 19, 55;
+
+  --ion-color-step-50: #f9e6e9;
+  --ion-color-step-100: #f3dbdf;
+  --ion-color-step-150: #edd0d6;
+  --ion-color-step-200: #e7c5cd;
+  --ion-color-step-250: #e1bac3;
+  --ion-color-step-300: #dbaeba;
+  --ion-color-step-350: #d5a3b1;
+  --ion-color-step-400: #cf98a7;
+  --ion-color-step-450: #c98d9e;
+  --ion-color-step-500: #c48295;
+  --ion-color-step-550: #be778b;
+  --ion-color-step-600: #b86c82;
+  --ion-color-step-650: #b26178;
+  --ion-color-step-700: #ac566f;
+  --ion-color-step-750: #a64b66;
+  --ion-color-step-800: #a03f5c;
+  --ion-color-step-850: #9a3453;
+  --ion-color-step-900: #94294a;
+  --ion-color-step-950: #8e1e40;
+}
+
+.ion-color-rose {
+  --ion-color-base: var(--ion-color-rose);
+  --ion-color-base-rgb: var(--ion-color-rose-rgb);
+  --ion-color-contrast: var(--ion-color-rose-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+  --ion-color-shade: var(--ion-color-rose-shade);
+  --ion-color-tint: var(--ion-color-rose-tint);
+}
+
+ion-datetime {
+  --background: #fff1f2;
+  --background-rgb: 255, 241, 242;
+
+  border-radius: 16px;
+  box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+}
+```
diff --git a/static/usage/v7/theming/demo.html b/static/usage/v7/theming/demo.html
new file mode 100644
index 00000000000..f2e502cfe56
--- /dev/null
+++ b/static/usage/v7/theming/demo.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Datetime</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <style>
+      :root,
+      .ios body.dark,
+      .md body.dark {
+        --ion-color-rose: #831843;
+        --ion-color-rose-rgb: 131, 24, 67;
+        --ion-color-rose-contrast: #ffffff;
+        --ion-color-rose-contrast-rgb: 255, 255, 255;
+        --ion-color-rose-shade: #73153b;
+        --ion-color-rose-tint: #8f2f56;
+
+        --ion-text-color: #881337;
+        --ion-text-color-rgb: 136, 19, 55;
+
+        --ion-color-step-50: #f9e6e9;
+        --ion-color-step-100: #f3dbdf;
+        --ion-color-step-150: #edd0d6;
+        --ion-color-step-200: #e7c5cd;
+        --ion-color-step-250: #e1bac3;
+        --ion-color-step-300: #dbaeba;
+        --ion-color-step-350: #d5a3b1;
+        --ion-color-step-400: #cf98a7;
+        --ion-color-step-450: #c98d9e;
+        --ion-color-step-500: #c48295;
+        --ion-color-step-550: #be778b;
+        --ion-color-step-600: #b86c82;
+        --ion-color-step-650: #b26178;
+        --ion-color-step-700: #ac566f;
+        --ion-color-step-750: #a64b66;
+        --ion-color-step-800: #a03f5c;
+        --ion-color-step-850: #9a3453;
+        --ion-color-step-900: #94294a;
+        --ion-color-step-950: #8e1e40;
+      }
+
+      .ion-color-rose {
+        --ion-color-base: var(--ion-color-rose);
+        --ion-color-base-rgb: var(--ion-color-rose-rgb);
+        --ion-color-contrast: var(--ion-color-rose-contrast);
+        --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+        --ion-color-shade: var(--ion-color-rose-shade);
+        --ion-color-tint: var(--ion-color-rose-tint);
+      }
+
+      ion-datetime {
+        --background: #fff1f2;
+        --background-rgb: 255, 241, 242;
+
+        width: 350px;
+
+        border-radius: 16px;
+        box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-datetime color="rose"></ion-datetime>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/theming/index.md b/static/usage/v7/theming/index.md
new file mode 100644
index 00000000000..f45d3c0e7c6
--- /dev/null
+++ b/static/usage/v7/theming/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+<Playground
+  version="7"
+  size="450px"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/global.css': angular_global_css,
+      },
+    },
+  }}
+  src="usage/v7/datetime/theming/demo.html"
+/>
diff --git a/static/usage/v7/theming/javascript.md b/static/usage/v7/theming/javascript.md
new file mode 100644
index 00000000000..3da768ccbb4
--- /dev/null
+++ b/static/usage/v7/theming/javascript.md
@@ -0,0 +1,54 @@
+```html
+<ion-datetime color="rose"></ion-datetime>
+
+<style>
+  :root {
+    --ion-color-rose: #831843;
+    --ion-color-rose-rgb: 131, 24, 67;
+    --ion-color-rose-contrast: #ffffff;
+    --ion-color-rose-contrast-rgb: 255, 255, 255;
+    --ion-color-rose-shade: #73153b;
+    --ion-color-rose-tint: #8f2f56;
+
+    --ion-text-color: #881337;
+    --ion-text-color-rgb: 136, 19, 55;
+
+    --ion-color-step-50: #f9e6e9;
+    --ion-color-step-100: #f3dbdf;
+    --ion-color-step-150: #edd0d6;
+    --ion-color-step-200: #e7c5cd;
+    --ion-color-step-250: #e1bac3;
+    --ion-color-step-300: #dbaeba;
+    --ion-color-step-350: #d5a3b1;
+    --ion-color-step-400: #cf98a7;
+    --ion-color-step-450: #c98d9e;
+    --ion-color-step-500: #c48295;
+    --ion-color-step-550: #be778b;
+    --ion-color-step-600: #b86c82;
+    --ion-color-step-650: #b26178;
+    --ion-color-step-700: #ac566f;
+    --ion-color-step-750: #a64b66;
+    --ion-color-step-800: #a03f5c;
+    --ion-color-step-850: #9a3453;
+    --ion-color-step-900: #94294a;
+    --ion-color-step-950: #8e1e40;
+  }
+
+  .ion-color-rose {
+    --ion-color-base: var(--ion-color-rose);
+    --ion-color-base-rgb: var(--ion-color-rose-rgb);
+    --ion-color-contrast: var(--ion-color-rose-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+    --ion-color-shade: var(--ion-color-rose-shade);
+    --ion-color-tint: var(--ion-color-rose-tint);
+  }
+
+  ion-datetime {
+    --background: #fff1f2;
+    --background-rgb: 255, 241, 242;
+
+    border-radius: 16px;
+    box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+  }
+</style>
+```
diff --git a/static/usage/v7/theming/react/main_css.md b/static/usage/v7/theming/react/main_css.md
new file mode 100644
index 00000000000..dccf6c7d370
--- /dev/null
+++ b/static/usage/v7/theming/react/main_css.md
@@ -0,0 +1,50 @@
+```css
+:root {
+  --ion-color-rose: #831843;
+  --ion-color-rose-rgb: 131, 24, 67;
+  --ion-color-rose-contrast: #ffffff;
+  --ion-color-rose-contrast-rgb: 255, 255, 255;
+  --ion-color-rose-shade: #73153b;
+  --ion-color-rose-tint: #8f2f56;
+
+  --ion-text-color: #881337;
+  --ion-text-color-rgb: 136, 19, 55;
+
+  --ion-color-step-50: #f9e6e9;
+  --ion-color-step-100: #f3dbdf;
+  --ion-color-step-150: #edd0d6;
+  --ion-color-step-200: #e7c5cd;
+  --ion-color-step-250: #e1bac3;
+  --ion-color-step-300: #dbaeba;
+  --ion-color-step-350: #d5a3b1;
+  --ion-color-step-400: #cf98a7;
+  --ion-color-step-450: #c98d9e;
+  --ion-color-step-500: #c48295;
+  --ion-color-step-550: #be778b;
+  --ion-color-step-600: #b86c82;
+  --ion-color-step-650: #b26178;
+  --ion-color-step-700: #ac566f;
+  --ion-color-step-750: #a64b66;
+  --ion-color-step-800: #a03f5c;
+  --ion-color-step-850: #9a3453;
+  --ion-color-step-900: #94294a;
+  --ion-color-step-950: #8e1e40;
+}
+
+.ion-color-rose {
+  --ion-color-base: var(--ion-color-rose);
+  --ion-color-base-rgb: var(--ion-color-rose-rgb);
+  --ion-color-contrast: var(--ion-color-rose-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+  --ion-color-shade: var(--ion-color-rose-shade);
+  --ion-color-tint: var(--ion-color-rose-tint);
+}
+
+ion-datetime {
+  --background: #fff1f2;
+  --background-rgb: 255, 241, 242;
+
+  border-radius: 16px;
+  box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+}
+```
diff --git a/static/usage/v7/theming/react/main_tsx.md b/static/usage/v7/theming/react/main_tsx.md
new file mode 100644
index 00000000000..37e658cdcd1
--- /dev/null
+++ b/static/usage/v7/theming/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return <IonDatetime color="rose"></IonDatetime>;
+}
+export default Example;
+```
diff --git a/static/usage/v7/theming/vue.md b/static/usage/v7/theming/vue.md
new file mode 100644
index 00000000000..32e682cfbc9
--- /dev/null
+++ b/static/usage/v7/theming/vue.md
@@ -0,0 +1,65 @@
+```html
+<template>
+  <ion-datetime color="rose"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+
+<style>
+  :root {
+    --ion-color-rose: #831843;
+    --ion-color-rose-rgb: 131, 24, 67;
+    --ion-color-rose-contrast: #ffffff;
+    --ion-color-rose-contrast-rgb: 255, 255, 255;
+    --ion-color-rose-shade: #73153b;
+    --ion-color-rose-tint: #8f2f56;
+
+    --ion-text-color: #881337;
+    --ion-text-color-rgb: 136, 19, 55;
+
+    --ion-color-step-50: #f9e6e9;
+    --ion-color-step-100: #f3dbdf;
+    --ion-color-step-150: #edd0d6;
+    --ion-color-step-200: #e7c5cd;
+    --ion-color-step-250: #e1bac3;
+    --ion-color-step-300: #dbaeba;
+    --ion-color-step-350: #d5a3b1;
+    --ion-color-step-400: #cf98a7;
+    --ion-color-step-450: #c98d9e;
+    --ion-color-step-500: #c48295;
+    --ion-color-step-550: #be778b;
+    --ion-color-step-600: #b86c82;
+    --ion-color-step-650: #b26178;
+    --ion-color-step-700: #ac566f;
+    --ion-color-step-750: #a64b66;
+    --ion-color-step-800: #a03f5c;
+    --ion-color-step-850: #9a3453;
+    --ion-color-step-900: #94294a;
+    --ion-color-step-950: #8e1e40;
+  }
+
+  .ion-color-rose {
+    --ion-color-base: var(--ion-color-rose);
+    --ion-color-base-rgb: var(--ion-color-rose-rgb);
+    --ion-color-contrast: var(--ion-color-rose-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+    --ion-color-shade: var(--ion-color-rose-shade);
+    --ion-color-tint: var(--ion-color-rose-tint);
+  }
+
+  ion-datetime {
+    --background: #fff1f2;
+    --background-rgb: 255, 241, 242;
+
+    border-radius: 16px;
+    box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+  }
+</style>
+```

From 506184c8ca5a7ab39297a2275d369f28242e5917 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 21 Jun 2023 09:07:33 -0400
Subject: [PATCH 2/2] clean up

---
 .../theming/angular/example_component_html.md |  3 -
 static/usage/v7/theming/angular/global_css.md | 66 ----------------
 static/usage/v7/theming/demo.html             | 76 -------------------
 static/usage/v7/theming/index.md              | 33 --------
 static/usage/v7/theming/javascript.md         | 54 -------------
 static/usage/v7/theming/react/main_css.md     | 50 ------------
 static/usage/v7/theming/react/main_tsx.md     | 11 ---
 static/usage/v7/theming/vue.md                | 65 ----------------
 8 files changed, 358 deletions(-)
 delete mode 100644 static/usage/v7/theming/angular/example_component_html.md
 delete mode 100644 static/usage/v7/theming/angular/global_css.md
 delete mode 100644 static/usage/v7/theming/demo.html
 delete mode 100644 static/usage/v7/theming/index.md
 delete mode 100644 static/usage/v7/theming/javascript.md
 delete mode 100644 static/usage/v7/theming/react/main_css.md
 delete mode 100644 static/usage/v7/theming/react/main_tsx.md
 delete mode 100644 static/usage/v7/theming/vue.md

diff --git a/static/usage/v7/theming/angular/example_component_html.md b/static/usage/v7/theming/angular/example_component_html.md
deleted file mode 100644
index 0a38b1bc5b6..00000000000
--- a/static/usage/v7/theming/angular/example_component_html.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime color="rose"></ion-datetime>
-```
diff --git a/static/usage/v7/theming/angular/global_css.md b/static/usage/v7/theming/angular/global_css.md
deleted file mode 100644
index 4ec3d3ecdf9..00000000000
--- a/static/usage/v7/theming/angular/global_css.md
+++ /dev/null
@@ -1,66 +0,0 @@
-```css
-/* Core CSS required for Ionic components to work properly */
-@import '~@ionic/angular/css/core.css';
-
-/* Basic CSS for apps built with Ionic */
-@import '~@ionic/angular/css/normalize.css';
-@import '~@ionic/angular/css/structure.css';
-@import '~@ionic/angular/css/typography.css';
-@import '~@ionic/angular/css/display.css';
-
-/* Optional CSS utils that can be commented out */
-@import '~@ionic/angular/css/padding.css';
-@import '~@ionic/angular/css/float-elements.css';
-@import '~@ionic/angular/css/text-alignment.css';
-@import '~@ionic/angular/css/text-transformation.css';
-@import '~@ionic/angular/css/flex-utils.css';
-
-:root {
-  --ion-color-rose: #831843;
-  --ion-color-rose-rgb: 131, 24, 67;
-  --ion-color-rose-contrast: #ffffff;
-  --ion-color-rose-contrast-rgb: 255, 255, 255;
-  --ion-color-rose-shade: #73153b;
-  --ion-color-rose-tint: #8f2f56;
-
-  --ion-text-color: #881337;
-  --ion-text-color-rgb: 136, 19, 55;
-
-  --ion-color-step-50: #f9e6e9;
-  --ion-color-step-100: #f3dbdf;
-  --ion-color-step-150: #edd0d6;
-  --ion-color-step-200: #e7c5cd;
-  --ion-color-step-250: #e1bac3;
-  --ion-color-step-300: #dbaeba;
-  --ion-color-step-350: #d5a3b1;
-  --ion-color-step-400: #cf98a7;
-  --ion-color-step-450: #c98d9e;
-  --ion-color-step-500: #c48295;
-  --ion-color-step-550: #be778b;
-  --ion-color-step-600: #b86c82;
-  --ion-color-step-650: #b26178;
-  --ion-color-step-700: #ac566f;
-  --ion-color-step-750: #a64b66;
-  --ion-color-step-800: #a03f5c;
-  --ion-color-step-850: #9a3453;
-  --ion-color-step-900: #94294a;
-  --ion-color-step-950: #8e1e40;
-}
-
-.ion-color-rose {
-  --ion-color-base: var(--ion-color-rose);
-  --ion-color-base-rgb: var(--ion-color-rose-rgb);
-  --ion-color-contrast: var(--ion-color-rose-contrast);
-  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
-  --ion-color-shade: var(--ion-color-rose-shade);
-  --ion-color-tint: var(--ion-color-rose-tint);
-}
-
-ion-datetime {
-  --background: #fff1f2;
-  --background-rgb: 255, 241, 242;
-
-  border-radius: 16px;
-  box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
-}
-```
diff --git a/static/usage/v7/theming/demo.html b/static/usage/v7/theming/demo.html
deleted file mode 100644
index f2e502cfe56..00000000000
--- a/static/usage/v7/theming/demo.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../../common.css" />
-    <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
-    <style>
-      :root,
-      .ios body.dark,
-      .md body.dark {
-        --ion-color-rose: #831843;
-        --ion-color-rose-rgb: 131, 24, 67;
-        --ion-color-rose-contrast: #ffffff;
-        --ion-color-rose-contrast-rgb: 255, 255, 255;
-        --ion-color-rose-shade: #73153b;
-        --ion-color-rose-tint: #8f2f56;
-
-        --ion-text-color: #881337;
-        --ion-text-color-rgb: 136, 19, 55;
-
-        --ion-color-step-50: #f9e6e9;
-        --ion-color-step-100: #f3dbdf;
-        --ion-color-step-150: #edd0d6;
-        --ion-color-step-200: #e7c5cd;
-        --ion-color-step-250: #e1bac3;
-        --ion-color-step-300: #dbaeba;
-        --ion-color-step-350: #d5a3b1;
-        --ion-color-step-400: #cf98a7;
-        --ion-color-step-450: #c98d9e;
-        --ion-color-step-500: #c48295;
-        --ion-color-step-550: #be778b;
-        --ion-color-step-600: #b86c82;
-        --ion-color-step-650: #b26178;
-        --ion-color-step-700: #ac566f;
-        --ion-color-step-750: #a64b66;
-        --ion-color-step-800: #a03f5c;
-        --ion-color-step-850: #9a3453;
-        --ion-color-step-900: #94294a;
-        --ion-color-step-950: #8e1e40;
-      }
-
-      .ion-color-rose {
-        --ion-color-base: var(--ion-color-rose);
-        --ion-color-base-rgb: var(--ion-color-rose-rgb);
-        --ion-color-contrast: var(--ion-color-rose-contrast);
-        --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
-        --ion-color-shade: var(--ion-color-rose-shade);
-        --ion-color-tint: var(--ion-color-rose-tint);
-      }
-
-      ion-datetime {
-        --background: #fff1f2;
-        --background-rgb: 255, 241, 242;
-
-        width: 350px;
-
-        border-radius: 16px;
-        box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
-      }
-    </style>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime color="rose"></ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/v7/theming/index.md b/static/usage/v7/theming/index.md
deleted file mode 100644
index f45d3c0e7c6..00000000000
--- a/static/usage/v7/theming/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_global_css from './angular/global_css.md';
-
-<Playground
-  version="7"
-  size="450px"
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/global.css': angular_global_css,
-      },
-    },
-  }}
-  src="usage/v7/datetime/theming/demo.html"
-/>
diff --git a/static/usage/v7/theming/javascript.md b/static/usage/v7/theming/javascript.md
deleted file mode 100644
index 3da768ccbb4..00000000000
--- a/static/usage/v7/theming/javascript.md
+++ /dev/null
@@ -1,54 +0,0 @@
-```html
-<ion-datetime color="rose"></ion-datetime>
-
-<style>
-  :root {
-    --ion-color-rose: #831843;
-    --ion-color-rose-rgb: 131, 24, 67;
-    --ion-color-rose-contrast: #ffffff;
-    --ion-color-rose-contrast-rgb: 255, 255, 255;
-    --ion-color-rose-shade: #73153b;
-    --ion-color-rose-tint: #8f2f56;
-
-    --ion-text-color: #881337;
-    --ion-text-color-rgb: 136, 19, 55;
-
-    --ion-color-step-50: #f9e6e9;
-    --ion-color-step-100: #f3dbdf;
-    --ion-color-step-150: #edd0d6;
-    --ion-color-step-200: #e7c5cd;
-    --ion-color-step-250: #e1bac3;
-    --ion-color-step-300: #dbaeba;
-    --ion-color-step-350: #d5a3b1;
-    --ion-color-step-400: #cf98a7;
-    --ion-color-step-450: #c98d9e;
-    --ion-color-step-500: #c48295;
-    --ion-color-step-550: #be778b;
-    --ion-color-step-600: #b86c82;
-    --ion-color-step-650: #b26178;
-    --ion-color-step-700: #ac566f;
-    --ion-color-step-750: #a64b66;
-    --ion-color-step-800: #a03f5c;
-    --ion-color-step-850: #9a3453;
-    --ion-color-step-900: #94294a;
-    --ion-color-step-950: #8e1e40;
-  }
-
-  .ion-color-rose {
-    --ion-color-base: var(--ion-color-rose);
-    --ion-color-base-rgb: var(--ion-color-rose-rgb);
-    --ion-color-contrast: var(--ion-color-rose-contrast);
-    --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
-    --ion-color-shade: var(--ion-color-rose-shade);
-    --ion-color-tint: var(--ion-color-rose-tint);
-  }
-
-  ion-datetime {
-    --background: #fff1f2;
-    --background-rgb: 255, 241, 242;
-
-    border-radius: 16px;
-    box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
-  }
-</style>
-```
diff --git a/static/usage/v7/theming/react/main_css.md b/static/usage/v7/theming/react/main_css.md
deleted file mode 100644
index dccf6c7d370..00000000000
--- a/static/usage/v7/theming/react/main_css.md
+++ /dev/null
@@ -1,50 +0,0 @@
-```css
-:root {
-  --ion-color-rose: #831843;
-  --ion-color-rose-rgb: 131, 24, 67;
-  --ion-color-rose-contrast: #ffffff;
-  --ion-color-rose-contrast-rgb: 255, 255, 255;
-  --ion-color-rose-shade: #73153b;
-  --ion-color-rose-tint: #8f2f56;
-
-  --ion-text-color: #881337;
-  --ion-text-color-rgb: 136, 19, 55;
-
-  --ion-color-step-50: #f9e6e9;
-  --ion-color-step-100: #f3dbdf;
-  --ion-color-step-150: #edd0d6;
-  --ion-color-step-200: #e7c5cd;
-  --ion-color-step-250: #e1bac3;
-  --ion-color-step-300: #dbaeba;
-  --ion-color-step-350: #d5a3b1;
-  --ion-color-step-400: #cf98a7;
-  --ion-color-step-450: #c98d9e;
-  --ion-color-step-500: #c48295;
-  --ion-color-step-550: #be778b;
-  --ion-color-step-600: #b86c82;
-  --ion-color-step-650: #b26178;
-  --ion-color-step-700: #ac566f;
-  --ion-color-step-750: #a64b66;
-  --ion-color-step-800: #a03f5c;
-  --ion-color-step-850: #9a3453;
-  --ion-color-step-900: #94294a;
-  --ion-color-step-950: #8e1e40;
-}
-
-.ion-color-rose {
-  --ion-color-base: var(--ion-color-rose);
-  --ion-color-base-rgb: var(--ion-color-rose-rgb);
-  --ion-color-contrast: var(--ion-color-rose-contrast);
-  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
-  --ion-color-shade: var(--ion-color-rose-shade);
-  --ion-color-tint: var(--ion-color-rose-tint);
-}
-
-ion-datetime {
-  --background: #fff1f2;
-  --background-rgb: 255, 241, 242;
-
-  border-radius: 16px;
-  box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
-}
-```
diff --git a/static/usage/v7/theming/react/main_tsx.md b/static/usage/v7/theming/react/main_tsx.md
deleted file mode 100644
index 37e658cdcd1..00000000000
--- a/static/usage/v7/theming/react/main_tsx.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```tsx
-import React from 'react';
-import { IonDatetime } from '@ionic/react';
-
-import './main.css';
-
-function Example() {
-  return <IonDatetime color="rose"></IonDatetime>;
-}
-export default Example;
-```
diff --git a/static/usage/v7/theming/vue.md b/static/usage/v7/theming/vue.md
deleted file mode 100644
index 32e682cfbc9..00000000000
--- a/static/usage/v7/theming/vue.md
+++ /dev/null
@@ -1,65 +0,0 @@
-```html
-<template>
-  <ion-datetime color="rose"></ion-datetime>
-</template>
-
-<script lang="ts">
-  import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
-</script>
-
-<style>
-  :root {
-    --ion-color-rose: #831843;
-    --ion-color-rose-rgb: 131, 24, 67;
-    --ion-color-rose-contrast: #ffffff;
-    --ion-color-rose-contrast-rgb: 255, 255, 255;
-    --ion-color-rose-shade: #73153b;
-    --ion-color-rose-tint: #8f2f56;
-
-    --ion-text-color: #881337;
-    --ion-text-color-rgb: 136, 19, 55;
-
-    --ion-color-step-50: #f9e6e9;
-    --ion-color-step-100: #f3dbdf;
-    --ion-color-step-150: #edd0d6;
-    --ion-color-step-200: #e7c5cd;
-    --ion-color-step-250: #e1bac3;
-    --ion-color-step-300: #dbaeba;
-    --ion-color-step-350: #d5a3b1;
-    --ion-color-step-400: #cf98a7;
-    --ion-color-step-450: #c98d9e;
-    --ion-color-step-500: #c48295;
-    --ion-color-step-550: #be778b;
-    --ion-color-step-600: #b86c82;
-    --ion-color-step-650: #b26178;
-    --ion-color-step-700: #ac566f;
-    --ion-color-step-750: #a64b66;
-    --ion-color-step-800: #a03f5c;
-    --ion-color-step-850: #9a3453;
-    --ion-color-step-900: #94294a;
-    --ion-color-step-950: #8e1e40;
-  }
-
-  .ion-color-rose {
-    --ion-color-base: var(--ion-color-rose);
-    --ion-color-base-rgb: var(--ion-color-rose-rgb);
-    --ion-color-contrast: var(--ion-color-rose-contrast);
-    --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
-    --ion-color-shade: var(--ion-color-rose-shade);
-    --ion-color-tint: var(--ion-color-rose-tint);
-  }
-
-  ion-datetime {
-    --background: #fff1f2;
-    --background-rgb: 255, 241, 242;
-
-    border-radius: 16px;
-    box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
-  }
-</style>
-```