Skip to content

docs(api): update v8 usage for stepped colors#3770

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brandyscarney merged 4 commits into from
Jul 25, 2024
Merged

docs(api): update v8 usage for stepped colors #3770

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9747452
docs(api): update v8 usage for stepped colors
brandyscarney Jul 23, 2024
8bb7219
docs(datetime): use the same variables css file for all frameworks
brandyscarney Jul 23, 2024
d3b3b27
revert v5 change
brandyscarney Jul 25, 2024
f57f351
docs(slides): use proper stepped color
brandyscarney Jul 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/angular/slides.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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);
Comment thread
thetaPC marked this conversation as resolved.
Expand Down
9 changes: 9 additions & 0 deletions static/usage/v8/datetime/styling/global-theming/angular/example_component_css.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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;
}
```
66 changes: 0 additions & 66 deletions static/usage/v8/datetime/styling/global-theming/angular/global_css.md
View file
Open in desktop

This file was deleted.

58 changes: 39 additions & 19 deletions static/usage/v8/datetime/styling/global-theming/demo.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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 {
Expand Down
26 changes: 20 additions & 6 deletions static/usage/v8/datetime/styling/global-theming/index.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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,
},
},
}}
Expand Down
54 changes: 0 additions & 54 deletions static/usage/v8/datetime/styling/global-theming/javascript.md
View file
Open in desktop

This file was deleted.

13 changes: 13 additions & 0 deletions static/usage/v8/datetime/styling/global-theming/javascript/index_html.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>
```
41 changes: 0 additions & 41 deletions static/usage/v8/datetime/styling/global-theming/react/main_css.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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;
Expand Down
78 changes: 78 additions & 0 deletions static/usage/v8/datetime/styling/global-theming/theme/variables_css.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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);
}
```
Loading