Skip to content

Commit d7a8587

Browse files
brandyscarneybrandyscarney
authored
docs(api): update v8 usage for stepped colors (#3770)
1 parent 71c2dbd commit d7a8587

File tree

19 files changed

+184
-612
lines changed

19 files changed

+184
-612
lines changed

‎docs/angular/slides.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ The `ion-slides` component had additional styling that helped create a native lo
101101

102102
```css
103103
swiper-container {
104-
--swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc);
104+
--swiper-pagination-bullet-inactive-color: var(--ion-text-color-step-800, #cccccc);
105105
--swiper-pagination-color: var(--ion-color-primary, #0054e9);
106106
--swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
107107
--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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
```css
2+
ion-datetime {
3+
--background: #fff1f2;
4+
--background-rgb: 255, 241, 242;
5+
6+
border-radius: 16px;
7+
box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
8+
}
9+
```

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

Lines changed: 0 additions & 66 deletions
This file was deleted.

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

Lines changed: 39 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,25 +22,45 @@
2222
--ion-text-color: #881337;
2323
--ion-text-color-rgb: 136, 19, 55;
2424

25-
--ion-color-step-50: #f9e6e9;
26-
--ion-color-step-100: #f3dbdf;
27-
--ion-color-step-150: #edd0d6;
28-
--ion-color-step-200: #e7c5cd;
29-
--ion-color-step-250: #e1bac3;
30-
--ion-color-step-300: #dbaeba;
31-
--ion-color-step-350: #d5a3b1;
32-
--ion-color-step-400: #cf98a7;
33-
--ion-color-step-450: #c98d9e;
34-
--ion-color-step-500: #c48295;
35-
--ion-color-step-550: #be778b;
36-
--ion-color-step-600: #b86c82;
37-
--ion-color-step-650: #b26178;
38-
--ion-color-step-700: #ac566f;
39-
--ion-color-step-750: #a64b66;
40-
--ion-color-step-800: #a03f5c;
41-
--ion-color-step-850: #9a3453;
42-
--ion-color-step-900: #94294a;
43-
--ion-color-step-950: #8e1e40;
25+
--ion-text-color-step-50: #8e1e40;
26+
--ion-text-color-step-100: #94294a;
27+
--ion-text-color-step-150: #9a3453;
28+
--ion-text-color-step-200: #a03f5c;
29+
--ion-text-color-step-250: #a64b66;
30+
--ion-text-color-step-300: #ac566f;
31+
--ion-text-color-step-350: #b26178;
32+
--ion-text-color-step-400: #b86c82;
33+
--ion-text-color-step-450: #be778b;
34+
--ion-text-color-step-500: #c48295;
35+
--ion-text-color-step-550: #c98d9e;
36+
--ion-text-color-step-600: #cf98a7;
37+
--ion-text-color-step-650: #d5a3b1;
38+
--ion-text-color-step-700: #dbaeba;
39+
--ion-text-color-step-750: #e1bac3;
40+
--ion-text-color-step-800: #e7c5cd;
41+
--ion-text-color-step-850: #edd0d6;
42+
--ion-text-color-step-900: #f3dbdf;
43+
--ion-text-color-step-950: #f9e6e9;
44+
45+
--ion-background-color-step-50: #f9e6e9;
46+
--ion-background-color-step-100: #f3dbdf;
47+
--ion-background-color-step-150: #edd0d6;
48+
--ion-background-color-step-200: #e7c5cd;
49+
--ion-background-color-step-250: #e1bac3;
50+
--ion-background-color-step-300: #dbaeba;
51+
--ion-background-color-step-350: #d5a3b1;
52+
--ion-background-color-step-400: #cf98a7;
53+
--ion-background-color-step-450: #c98d9e;
54+
--ion-background-color-step-500: #c48295;
55+
--ion-background-color-step-550: #be778b;
56+
--ion-background-color-step-600: #b86c82;
57+
--ion-background-color-step-650: #b26178;
58+
--ion-background-color-step-700: #ac566f;
59+
--ion-background-color-step-750: #a64b66;
60+
--ion-background-color-step-800: #a03f5c;
61+
--ion-background-color-step-850: #9a3453;
62+
--ion-background-color-step-900: #94294a;
63+
--ion-background-color-step-950: #8e1e40;
4464
}
4565

4666
.ion-color-rose {

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

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,45 @@
11
import Playground from '@site/src/components/global/Playground';
22

3-
import javascript from './javascript.md';
3+
import javascript_index_html from './javascript/index_html.md';
44

55
import react_main_tsx from './react/main_tsx.md';
66
import react_main_css from './react/main_css.md';
77

8-
import vue from './vue.md';
8+
import vue_example from './vue/example_vue.md';
99

1010
import angular_example_component_html from './angular/example_component_html.md';
11-
import angular_global_css from './angular/global_css.md';
11+
import angular_example_component_css from './angular/example_component_css.md';
12+
13+
import variables_css from './theme/variables_css.md';
1214

1315
<Playground
1416
version="8"
1517
size="450px"
1618
code={{
17-
javascript,
19+
javascript: {
20+
files: {
21+
'index.html': javascript_index_html,
22+
'theme/variables.css': variables_css,
23+
},
24+
},
1825
react: {
1926
files: {
2027
'src/main.tsx': react_main_tsx,
2128
'src/main.css': react_main_css,
29+
'src/theme/variables.css': variables_css,
30+
},
31+
},
32+
vue: {
33+
files: {
34+
'src/components/Example.vue': vue_example,
35+
'src/theme/variables.css': variables_css,
2236
},
2337
},
24-
vue,
2538
angular: {
2639
files: {
2740
'src/app/example.component.html': angular_example_component_html,
28-
'src/global.css': angular_global_css,
41+
'src/app/example.component.css': angular_example_component_css,
42+
'src/theme/variables.css': variables_css,
2943
},
3044
},
3145
}}

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

Lines changed: 0 additions & 54 deletions
This file was deleted.

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
```html
2+
<ion-datetime color="rose"></ion-datetime>
3+
4+
<style>
5+
ion-datetime {
6+
--background: #fff1f2;
7+
--background-rgb: 255, 241, 242;
8+
9+
border-radius: 16px;
10+
box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
11+
}
12+
</style>
13+
```

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

Lines changed: 0 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,4 @@
11
```css
2-
:root {
3-
--ion-color-rose: #831843;
4-
--ion-color-rose-rgb: 131, 24, 67;
5-
--ion-color-rose-contrast: #ffffff;
6-
--ion-color-rose-contrast-rgb: 255, 255, 255;
7-
--ion-color-rose-shade: #73153b;
8-
--ion-color-rose-tint: #8f2f56;
9-
10-
--ion-text-color: #881337;
11-
--ion-text-color-rgb: 136, 19, 55;
12-
13-
--ion-color-step-50: #f9e6e9;
14-
--ion-color-step-100: #f3dbdf;
15-
--ion-color-step-150: #edd0d6;
16-
--ion-color-step-200: #e7c5cd;
17-
--ion-color-step-250: #e1bac3;
18-
--ion-color-step-300: #dbaeba;
19-
--ion-color-step-350: #d5a3b1;
20-
--ion-color-step-400: #cf98a7;
21-
--ion-color-step-450: #c98d9e;
22-
--ion-color-step-500: #c48295;
23-
--ion-color-step-550: #be778b;
24-
--ion-color-step-600: #b86c82;
25-
--ion-color-step-650: #b26178;
26-
--ion-color-step-700: #ac566f;
27-
--ion-color-step-750: #a64b66;
28-
--ion-color-step-800: #a03f5c;
29-
--ion-color-step-850: #9a3453;
30-
--ion-color-step-900: #94294a;
31-
--ion-color-step-950: #8e1e40;
32-
}
33-
34-
.ion-color-rose {
35-
--ion-color-base: var(--ion-color-rose);
36-
--ion-color-base-rgb: var(--ion-color-rose-rgb);
37-
--ion-color-contrast: var(--ion-color-rose-contrast);
38-
--ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
39-
--ion-color-shade: var(--ion-color-rose-shade);
40-
--ion-color-tint: var(--ion-color-rose-tint);
41-
}
42-
432
ion-datetime {
443
--background: #fff1f2;
454
--background-rgb: 255, 241, 242;

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
```css
2+
/* Ionic Variables and Theming
3+
* ---------------------------------------------------------------
4+
* Any overrides to theme variables should be placed in this file.
5+
* For more information, please see:
6+
* http://ionicframework.com/docs/theming/
7+
*/
8+
9+
/* This sets the CSS variables for the rose color */
10+
:root {
11+
--ion-color-rose: #831843;
12+
--ion-color-rose-rgb: 131, 24, 67;
13+
--ion-color-rose-contrast: #ffffff;
14+
--ion-color-rose-contrast-rgb: 255, 255, 255;
15+
--ion-color-rose-shade: #73153b;
16+
--ion-color-rose-tint: #8f2f56;
17+
}
18+
19+
/* This overrides the global CSS variables for both modes */
20+
:root.ios,
21+
:root.md {
22+
--ion-background-color: #ffffff;
23+
--ion-background-color-rgb: 255, 255, 255;
24+
25+
--ion-text-color: #881337;
26+
--ion-text-color-rgb: 136, 19, 55;
27+
28+
--ion-text-color-step-50: #8e1e40;
29+
--ion-text-color-step-100: #94294a;
30+
--ion-text-color-step-150: #9a3453;
31+
--ion-text-color-step-200: #a03f5c;
32+
--ion-text-color-step-250: #a64b66;
33+
--ion-text-color-step-300: #ac566f;
34+
--ion-text-color-step-350: #b26178;
35+
--ion-text-color-step-400: #b86c82;
36+
--ion-text-color-step-450: #be778b;
37+
--ion-text-color-step-500: #c48295;
38+
--ion-text-color-step-550: #c98d9e;
39+
--ion-text-color-step-600: #cf98a7;
40+
--ion-text-color-step-650: #d5a3b1;
41+
--ion-text-color-step-700: #dbaeba;
42+
--ion-text-color-step-750: #e1bac3;
43+
--ion-text-color-step-800: #e7c5cd;
44+
--ion-text-color-step-850: #edd0d6;
45+
--ion-text-color-step-900: #f3dbdf;
46+
--ion-text-color-step-950: #f9e6e9;
47+
48+
--ion-background-color-step-50: #f9e6e9;
49+
--ion-background-color-step-100: #f3dbdf;
50+
--ion-background-color-step-150: #edd0d6;
51+
--ion-background-color-step-200: #e7c5cd;
52+
--ion-background-color-step-250: #e1bac3;
53+
--ion-background-color-step-300: #dbaeba;
54+
--ion-background-color-step-350: #d5a3b1;
55+
--ion-background-color-step-400: #cf98a7;
56+
--ion-background-color-step-450: #c98d9e;
57+
--ion-background-color-step-500: #c48295;
58+
--ion-background-color-step-550: #be778b;
59+
--ion-background-color-step-600: #b86c82;
60+
--ion-background-color-step-650: #b26178;
61+
--ion-background-color-step-700: #ac566f;
62+
--ion-background-color-step-750: #a64b66;
63+
--ion-background-color-step-800: #a03f5c;
64+
--ion-background-color-step-850: #9a3453;
65+
--ion-background-color-step-900: #94294a;
66+
--ion-background-color-step-950: #8e1e40;
67+
}
68+
69+
/* This adds the rose color */
70+
.ion-color-rose {
71+
--ion-color-base: var(--ion-color-rose);
72+
--ion-color-base-rgb: var(--ion-color-rose-rgb);
73+
--ion-color-contrast: var(--ion-color-rose-contrast);
74+
--ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
75+
--ion-color-shade: var(--ion-color-rose-shade);
76+
--ion-color-tint: var(--ion-color-rose-tint);
77+
}
78+
```

0 commit comments

Comments
 (0)