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
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 2 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 number Diff line number Diff 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-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);
Expand Down
2 changes: 1 addition & 1 deletion static/demos/api/slides/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ <h2>Ready to Play?</h2>
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 {
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 number Diff line number Diff 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 number Diff line number Diff 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 number Diff line number Diff 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 number Diff line number Diff 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 number Diff line number Diff 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
Loading