docs(api): update v8 usage for stepped colors

docs/angular/slides.md

@@ -101,7 +101,7 @@ The `ion-slides` component had additional styling that helped create a native lo
 
 ```css
 swiper-container {
-  --swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc);
+  --swiper-pagination-bullet-inactive-color: var(--ion-text-color-step-800, #cccccc);
   --swiper-pagination-color: var(--ion-color-primary, #0054e9);
   --swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
   --swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);

static/usage/v8/datetime/styling/global-theming/angular/example_component_css.md

@@ -0,0 +1,9 @@
+```css
+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;
+}
+```

static/usage/v8/datetime/styling/global-theming/demo.html

@@ -22,25 +22,45 @@
         --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-text-color-step-50: #8e1e40;
+        --ion-text-color-step-100: #94294a;
+        --ion-text-color-step-150: #9a3453;
+        --ion-text-color-step-200: #a03f5c;
+        --ion-text-color-step-250: #a64b66;
+        --ion-text-color-step-300: #ac566f;
+        --ion-text-color-step-350: #b26178;
+        --ion-text-color-step-400: #b86c82;
+        --ion-text-color-step-450: #be778b;
+        --ion-text-color-step-500: #c48295;
+        --ion-text-color-step-550: #c98d9e;
+        --ion-text-color-step-600: #cf98a7;
+        --ion-text-color-step-650: #d5a3b1;
+        --ion-text-color-step-700: #dbaeba;
+        --ion-text-color-step-750: #e1bac3;
+        --ion-text-color-step-800: #e7c5cd;
+        --ion-text-color-step-850: #edd0d6;
+        --ion-text-color-step-900: #f3dbdf;
+        --ion-text-color-step-950: #f9e6e9;
+
+        --ion-background-color-step-50: #f9e6e9;
+        --ion-background-color-step-100: #f3dbdf;
+        --ion-background-color-step-150: #edd0d6;
+        --ion-background-color-step-200: #e7c5cd;
+        --ion-background-color-step-250: #e1bac3;
+        --ion-background-color-step-300: #dbaeba;
+        --ion-background-color-step-350: #d5a3b1;
+        --ion-background-color-step-400: #cf98a7;
+        --ion-background-color-step-450: #c98d9e;
+        --ion-background-color-step-500: #c48295;
+        --ion-background-color-step-550: #be778b;
+        --ion-background-color-step-600: #b86c82;
+        --ion-background-color-step-650: #b26178;
+        --ion-background-color-step-700: #ac566f;
+        --ion-background-color-step-750: #a64b66;
+        --ion-background-color-step-800: #a03f5c;
+        --ion-background-color-step-850: #9a3453;
+        --ion-background-color-step-900: #94294a;
+        --ion-background-color-step-950: #8e1e40;
       }
 
       .ion-color-rose {

static/usage/v8/datetime/styling/global-theming/index.md

@@ -1,31 +1,45 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.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 vue_example from './vue/example_vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
-import angular_global_css from './angular/global_css.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+import variables_css from './theme/variables_css.md';
 
 <Playground
   version="8"
   size="450px"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'theme/variables.css': variables_css,
+      },
+    },
     react: {
       files: {
         'src/main.tsx': react_main_tsx,
         'src/main.css': react_main_css,
+        'src/theme/variables.css': variables_css,
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/theme/variables.css': variables_css,
       },
     },
-    vue,
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
-        'src/global.css': angular_global_css,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/theme/variables.css': variables_css,
       },
     },
   }}

static/usage/v8/datetime/styling/global-theming/javascript/index_html.md

@@ -0,0 +1,13 @@
+```html
+<ion-datetime color="rose"></ion-datetime>
+
+<style>
+  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>
+```

static/usage/v8/datetime/styling/global-theming/react/main_css.md

@@ -1,45 +1,4 @@
 ```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;

static/usage/v8/datetime/styling/global-theming/theme/variables_css.md

@@ -0,0 +1,78 @@
+```css
+/* Ionic Variables and Theming
+ * ---------------------------------------------------------------
+ * Any overrides to theme variables should be placed in this file.
+ * For more information, please see:
+ * http://ionicframework.com/docs/theming/
+ */
+
+/* This sets the CSS variables for the rose color */
+: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;
+}
+
+/* This overrides the global CSS variables for both modes */
+:root.ios,
+:root.md {
+  --ion-background-color: #ffffff;
+  --ion-background-color-rgb: 255, 255, 255;
+
+  --ion-text-color: #881337;
+  --ion-text-color-rgb: 136, 19, 55;
+
+  --ion-text-color-step-50: #8e1e40;
+  --ion-text-color-step-100: #94294a;
+  --ion-text-color-step-150: #9a3453;
+  --ion-text-color-step-200: #a03f5c;
+  --ion-text-color-step-250: #a64b66;
+  --ion-text-color-step-300: #ac566f;
+  --ion-text-color-step-350: #b26178;
+  --ion-text-color-step-400: #b86c82;
+  --ion-text-color-step-450: #be778b;
+  --ion-text-color-step-500: #c48295;
+  --ion-text-color-step-550: #c98d9e;
+  --ion-text-color-step-600: #cf98a7;
+  --ion-text-color-step-650: #d5a3b1;
+  --ion-text-color-step-700: #dbaeba;
+  --ion-text-color-step-750: #e1bac3;
+  --ion-text-color-step-800: #e7c5cd;
+  --ion-text-color-step-850: #edd0d6;
+  --ion-text-color-step-900: #f3dbdf;
+  --ion-text-color-step-950: #f9e6e9;
+
+  --ion-background-color-step-50: #f9e6e9;
+  --ion-background-color-step-100: #f3dbdf;
+  --ion-background-color-step-150: #edd0d6;
+  --ion-background-color-step-200: #e7c5cd;
+  --ion-background-color-step-250: #e1bac3;
+  --ion-background-color-step-300: #dbaeba;
+  --ion-background-color-step-350: #d5a3b1;
+  --ion-background-color-step-400: #cf98a7;
+  --ion-background-color-step-450: #c98d9e;
+  --ion-background-color-step-500: #c48295;
+  --ion-background-color-step-550: #be778b;
+  --ion-background-color-step-600: #b86c82;
+  --ion-background-color-step-650: #b26178;
+  --ion-background-color-step-700: #ac566f;
+  --ion-background-color-step-750: #a64b66;
+  --ion-background-color-step-800: #a03f5c;
+  --ion-background-color-step-850: #9a3453;
+  --ion-background-color-step-900: #94294a;
+  --ion-background-color-step-950: #8e1e40;
+}
+
+/* This adds the rose color */
+.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);
+}
+```