From 9747452029cd9096822247838c5b64eda427d5ad Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 23 Jul 2024 10:49:01 -0400 Subject: [PATCH 1/4] docs(api): update v8 usage for stepped colors --- docs/angular/slides.md | 2 +- static/demos/api/slides/index.html | 2 +- .../global-theming/angular/global_css.md | 62 ++++++++++----- .../datetime/styling/global-theming/demo.html | 58 +++++++++----- .../styling/global-theming/javascript.md | 62 ++++++++++----- .../styling/global-theming/react/main_css.md | 62 ++++++++++----- .../v8/datetime/styling/global-theming/vue.md | 62 ++++++++++----- .../theming/angular/example_component_html.md | 3 - .../v8/datetime/theming/angular/global_css.md | 66 ---------------- static/usage/v8/datetime/theming/demo.html | 76 ------------------- static/usage/v8/datetime/theming/index.md | 35 --------- .../usage/v8/datetime/theming/javascript.md | 54 ------------- .../v8/datetime/theming/react/main_css.md | 50 ------------ .../v8/datetime/theming/react/main_tsx.md | 11 --- static/usage/v8/datetime/theming/vue.md | 65 ---------------- 15 files changed, 209 insertions(+), 461 deletions(-) delete mode 100644 static/usage/v8/datetime/theming/angular/example_component_html.md delete mode 100644 static/usage/v8/datetime/theming/angular/global_css.md delete mode 100644 static/usage/v8/datetime/theming/demo.html delete mode 100644 static/usage/v8/datetime/theming/index.md delete mode 100644 static/usage/v8/datetime/theming/javascript.md delete mode 100644 static/usage/v8/datetime/theming/react/main_css.md delete mode 100644 static/usage/v8/datetime/theming/react/main_tsx.md delete mode 100644 static/usage/v8/datetime/theming/vue.md diff --git a/docs/angular/slides.md b/docs/angular/slides.md index 9e8e633579f..71b7d329821 100644 --- a/docs/angular/slides.md +++ b/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-background-color-step-200, #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); diff --git a/static/demos/api/slides/index.html b/static/demos/api/slides/index.html index 519ecb950b6..d21d2a015a7 100644 --- a/static/demos/api/slides/index.html +++ b/static/demos/api/slides/index.html @@ -84,7 +84,7 @@

Ready to Play?

padding: 0 40px; font-size: 14px; line-height: 1.5; - color: var(--ion-color-step-600, #60646b); + color: var(--ion-background-color-step-600, #60646b); } p b { diff --git a/static/usage/v8/datetime/styling/global-theming/angular/global_css.md b/static/usage/v8/datetime/styling/global-theming/angular/global_css.md index 4ec3d3ecdf9..05a3905e268 100644 --- a/static/usage/v8/datetime/styling/global-theming/angular/global_css.md +++ b/static/usage/v8/datetime/styling/global-theming/angular/global_css.md @@ -15,7 +15,9 @@ @import '~@ionic/angular/css/text-transformation.css'; @import '~@ionic/angular/css/flex-utils.css'; -:root { +:root, +:root.ios, +:root.md { --ion-color-rose: #831843; --ion-color-rose-rgb: 131, 24, 67; --ion-color-rose-contrast: #ffffff; @@ -26,25 +28,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 { diff --git a/static/usage/v8/datetime/styling/global-theming/demo.html b/static/usage/v8/datetime/styling/global-theming/demo.html index 3a8a11078c6..9b04a4681f7 100644 --- a/static/usage/v8/datetime/styling/global-theming/demo.html +++ b/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 { diff --git a/static/usage/v8/datetime/styling/global-theming/javascript.md b/static/usage/v8/datetime/styling/global-theming/javascript.md index 3da768ccbb4..03e186fa34f 100644 --- a/static/usage/v8/datetime/styling/global-theming/javascript.md +++ b/static/usage/v8/datetime/styling/global-theming/javascript.md @@ -2,7 +2,9 @@ - - - - - -
- -
- - - - diff --git a/static/usage/v8/datetime/theming/index.md b/static/usage/v8/datetime/theming/index.md deleted file mode 100644 index 931c2368a60..00000000000 --- a/static/usage/v8/datetime/theming/index.md +++ /dev/null @@ -1,35 +0,0 @@ -# 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'; - - diff --git a/static/usage/v8/datetime/theming/javascript.md b/static/usage/v8/datetime/theming/javascript.md deleted file mode 100644 index 3da768ccbb4..00000000000 --- a/static/usage/v8/datetime/theming/javascript.md +++ /dev/null @@ -1,54 +0,0 @@ -```html - - - -``` diff --git a/static/usage/v8/datetime/theming/react/main_css.md b/static/usage/v8/datetime/theming/react/main_css.md deleted file mode 100644 index dccf6c7d370..00000000000 --- a/static/usage/v8/datetime/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/v8/datetime/theming/react/main_tsx.md b/static/usage/v8/datetime/theming/react/main_tsx.md deleted file mode 100644 index 37e658cdcd1..00000000000 --- a/static/usage/v8/datetime/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 ; -} -export default Example; -``` diff --git a/static/usage/v8/datetime/theming/vue.md b/static/usage/v8/datetime/theming/vue.md deleted file mode 100644 index 32e682cfbc9..00000000000 --- a/static/usage/v8/datetime/theming/vue.md +++ /dev/null @@ -1,65 +0,0 @@ -```html - - - - - -``` From 8bb7219af635e83da7081e8564523b0db0d7612d Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 23 Jul 2024 13:49:06 -0400 Subject: [PATCH 2/4] docs(datetime): use the same variables css file for all frameworks --- .../angular/example_component_css.md | 9 ++ .../datetime/styling/global-theming/index.md | 26 ++++-- .../styling/global-theming/javascript.md | 76 ---------------- .../global-theming/javascript/index_html.md | 13 +++ .../styling/global-theming/react/main_css.md | 63 -------------- .../global_css.md => theme/variables_css.md} | 42 ++++----- .../v8/datetime/styling/global-theming/vue.md | 87 ------------------- .../styling/global-theming/vue/example_vue.md | 24 +++++ 8 files changed, 82 insertions(+), 258 deletions(-) create mode 100644 static/usage/v8/datetime/styling/global-theming/angular/example_component_css.md delete mode 100644 static/usage/v8/datetime/styling/global-theming/javascript.md create mode 100644 static/usage/v8/datetime/styling/global-theming/javascript/index_html.md rename static/usage/v8/datetime/styling/global-theming/{angular/global_css.md => theme/variables_css.md} (73%) delete mode 100644 static/usage/v8/datetime/styling/global-theming/vue.md create mode 100644 static/usage/v8/datetime/styling/global-theming/vue/example_vue.md diff --git a/static/usage/v8/datetime/styling/global-theming/angular/example_component_css.md b/static/usage/v8/datetime/styling/global-theming/angular/example_component_css.md new file mode 100644 index 00000000000..c7b7850960b --- /dev/null +++ b/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; +} +``` diff --git a/static/usage/v8/datetime/styling/global-theming/index.md b/static/usage/v8/datetime/styling/global-theming/index.md index 0fe3944d263..f87d6e8fad5 100644 --- a/static/usage/v8/datetime/styling/global-theming/index.md +++ b/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'; - - -``` diff --git a/static/usage/v8/datetime/styling/global-theming/javascript/index_html.md b/static/usage/v8/datetime/styling/global-theming/javascript/index_html.md new file mode 100644 index 00000000000..04ef57b2e7d --- /dev/null +++ b/static/usage/v8/datetime/styling/global-theming/javascript/index_html.md @@ -0,0 +1,13 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/styling/global-theming/react/main_css.md b/static/usage/v8/datetime/styling/global-theming/react/main_css.md index d847731a517..c7b7850960b 100644 --- a/static/usage/v8/datetime/styling/global-theming/react/main_css.md +++ b/static/usage/v8/datetime/styling/global-theming/react/main_css.md @@ -1,67 +1,4 @@ ```css -:root, -:root.ios, -:root.md { - --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-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 { - --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; diff --git a/static/usage/v8/datetime/styling/global-theming/angular/global_css.md b/static/usage/v8/datetime/styling/global-theming/theme/variables_css.md similarity index 73% rename from static/usage/v8/datetime/styling/global-theming/angular/global_css.md rename to static/usage/v8/datetime/styling/global-theming/theme/variables_css.md index 05a3905e268..04a0ceb9f99 100644 --- a/static/usage/v8/datetime/styling/global-theming/angular/global_css.md +++ b/static/usage/v8/datetime/styling/global-theming/theme/variables_css.md @@ -1,29 +1,26 @@ ```css -/* Core CSS required for Ionic components to work properly */ -@import '~@ionic/angular/css/core.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/ + */ -/* 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, -:root.ios, -:root.md { +/* 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; @@ -69,6 +66,7 @@ --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); @@ -77,12 +75,4 @@ --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/v8/datetime/styling/global-theming/vue.md b/static/usage/v8/datetime/styling/global-theming/vue.md deleted file mode 100644 index ba0ad4c3c5a..00000000000 --- a/static/usage/v8/datetime/styling/global-theming/vue.md +++ /dev/null @@ -1,87 +0,0 @@ -```html - - - - - -``` diff --git a/static/usage/v8/datetime/styling/global-theming/vue/example_vue.md b/static/usage/v8/datetime/styling/global-theming/vue/example_vue.md new file mode 100644 index 00000000000..2fa56a7e745 --- /dev/null +++ b/static/usage/v8/datetime/styling/global-theming/vue/example_vue.md @@ -0,0 +1,24 @@ +```html + + + + + +``` From d3b3b27e808ffa8bbecc76c272833f72210c8da1 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 25 Jul 2024 16:08:05 -0400 Subject: [PATCH 3/4] revert v5 change --- static/demos/api/slides/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/demos/api/slides/index.html b/static/demos/api/slides/index.html index d21d2a015a7..519ecb950b6 100644 --- a/static/demos/api/slides/index.html +++ b/static/demos/api/slides/index.html @@ -84,7 +84,7 @@

Ready to Play?

padding: 0 40px; font-size: 14px; line-height: 1.5; - color: var(--ion-background-color-step-600, #60646b); + color: var(--ion-color-step-600, #60646b); } p b { From f57f351b4410f346ec240b9e1235621d53bc8960 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 25 Jul 2024 16:53:44 -0400 Subject: [PATCH 4/4] docs(slides): use proper stepped color --- docs/angular/slides.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/angular/slides.md b/docs/angular/slides.md index 71b7d329821..836b717114a 100644 --- a/docs/angular/slides.md +++ b/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-background-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);