From 760f52a75ead3938d542a0c125f994915b84150e Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 8 Jan 2024 12:39:21 -0800 Subject: [PATCH 01/11] feat(light-mode): update styles to use new colors --- .../LayeredColorsSelect/styles.module.scss | 106 +++++++++--------- 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/src/components/page/theming/LayeredColorsSelect/styles.module.scss b/src/components/page/theming/LayeredColorsSelect/styles.module.scss index 3447e28ea21..7f7d82d8944 100755 --- a/src/components/page/theming/LayeredColorsSelect/styles.module.scss +++ b/src/components/page/theming/LayeredColorsSelect/styles.module.scss @@ -1,75 +1,75 @@ .layeredColorsSelect { /** primary **/ - --ion-color-primary: #3880ff; - --ion-color-primary-rgb: 56, 128, 255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3171e0; - --ion-color-primary-tint: #4c8dff; + --ion-color-primary: #0054e9; + --ion-color-primary-rgb: 0, 84 ,233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ - --ion-color-secondary: #3dc2ff; - --ion-color-secondary-rgb: 61, 194, 255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #36abe0; - --ion-color-secondary-tint: #50c8ff; + --ion-color-secondary: #0163aa; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ - --ion-color-tertiary: #5260ff; - --ion-color-tertiary-rgb: 82, 96, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #4854e0; - --ion-color-tertiary-tint: #6370ff; + --ion-color-tertiary: #6030ff; + --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ - --ion-color-success: #2dd36f; - --ion-color-success-rgb: 45, 211, 111; - --ion-color-success-contrast: #ffffff; - --ion-color-success-contrast-rgb: 255, 255, 255; - --ion-color-success-shade: #28ba62; - --ion-color-success-tint: #42d77d; + --ion-color-success: #2dd55b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; - --ion-color-warning-rgb: 255, 196, 9; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0, 0, 0; - --ion-color-warning-shade: #e0ac08; - --ion-color-warning-tint: #ffca22; + --ion-color-warning-rgb: 255, 196, 9; + --ion-color-warning-contrast: #000000; + --ion-color-warning-contrast-rgb: 0, 0, 0; + --ion-color-warning-shade: #e0ac08; + --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-danger: #eb445a; - --ion-color-danger-rgb: 235, 68, 90; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #cf3c4f; - --ion-color-danger-tint: #ed576b; + --ion-color-danger: #c5000f; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ - --ion-color-dark: #222428; - --ion-color-dark-rgb: 34, 36, 40; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #1e2023; - --ion-color-dark-tint: #383a3e; + --ion-color-dark: #2f2f2f; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ - --ion-color-medium: #92949c; - --ion-color-medium-rgb: 146, 148, 156; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255, 255, 255; - --ion-color-medium-shade: #808289; - --ion-color-medium-tint: #9d9fa6; + --ion-color-medium: #5f5f5f; + --ion-color-medium-rgb: 95, 95, 95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255, 255, 255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ - --ion-color-light: #f4f5f8; - --ion-color-light-rgb: 244, 245, 248; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d7d8da; - --ion-color-light-tint: #f5f6f9; + --ion-color-light: #f6f8fc; + --ion-color-light-rgb: 246, 248, 252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } .selectRow { From e2f55cb8c809711bdc51a0515012946fd4fde4aa Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 8 Jan 2024 13:02:27 -0800 Subject: [PATCH 02/11] feat(light-mode): update color generator --- .../page/theming/ColorGenerator/index.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/page/theming/ColorGenerator/index.tsx b/src/components/page/theming/ColorGenerator/index.tsx index 701069bc49c..9ff77c3f891 100644 --- a/src/components/page/theming/ColorGenerator/index.tsx +++ b/src/components/page/theming/ColorGenerator/index.tsx @@ -11,15 +11,15 @@ import ColorInput from '../ColorInput'; const ColorGenerator = (props) => { const [colors, setColors] = useState({ - primary: generateColor('#3880ff'), - secondary: generateColor('#3dc2ff'), - tertiary: generateColor('#5260ff'), - success: generateColor('#2dd36f'), + primary: generateColor('#0054e9'), + secondary: generateColor('#0163aa'), + tertiary: generateColor('#6030ff'), + success: generateColor('#2dd55b'), warning: generateColor('#ffc409'), - danger: generateColor('#eb445a'), - light: generateColor('#f4f5f8'), - medium: generateColor('#92949c'), - dark: generateColor('#222428'), + danger: generateColor('#c5000f'), + light: generateColor('#f6f8fc'), + medium: generateColor('#5f5f5f'), + dark: generateColor('#2f2f2f'), }); const [activeColor, setActiveColor] = useState(null); From 7ce341492adf76258f9559bf83183c33ca3ecd26 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 8 Jan 2024 14:10:45 -0800 Subject: [PATCH 03/11] feat(light-mode): update primary hex color --- docs/angular/slides.md | 2 +- ...dding-ionic-react-to-an-existing-react-project.md | 8 ++++---- docs/theming/advanced.md | 6 +++--- .../page/reference/ReleaseNotes/styles.module.css | 4 ++-- .../page/theming/ColorAccordion/styles.module.css | 12 ++++++------ static/code/stackblitz/v7/angular/variables.css | 12 ++++++------ static/code/stackblitz/v7/html/variables.css | 12 ++++++------ static/code/stackblitz/v7/react/variables.css | 12 ++++++------ static/code/stackblitz/v7/vue/variables.css | 12 ++++++------ static/code/stackblitz/v8/angular/variables.css | 12 ++++++------ static/code/stackblitz/v8/html/variables.css | 12 ++++++------ static/code/stackblitz/v8/react/variables.css | 12 ++++++------ static/code/stackblitz/v8/vue/variables.css | 12 ++++++------ static/usage/common.css | 12 ++++++------ versioned_docs/version-v7/angular/slides.md | 2 +- ...dding-ionic-react-to-an-existing-react-project.md | 8 ++++---- versioned_docs/version-v7/theming/advanced.md | 6 +++--- 17 files changed, 78 insertions(+), 78 deletions(-) diff --git a/docs/angular/slides.md b/docs/angular/slides.md index 4ceb1d3f6df..d6d365f6ebf 100644 --- a/docs/angular/slides.md +++ b/docs/angular/slides.md @@ -102,7 +102,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-color: var(--ion-color-primary, #3880ff); + --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); --swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5); diff --git a/docs/react/adding-ionic-react-to-an-existing-react-project.md b/docs/react/adding-ionic-react-to-an-existing-react-project.md index 94c253f3bed..0d7d5509450 100644 --- a/docs/react/adding-ionic-react-to-an-existing-react-project.md +++ b/docs/react/adding-ionic-react-to-an-existing-react-project.md @@ -139,12 +139,12 @@ To customize the look and feel of the components, Ionic has CSS variables you ca ```css title="main.css" :root { - --ion-color-primary: #3880ff; - --ion-color-primary-rgb: 56, 128, 255; + --ion-color-primary: #0054e9; + --ion-color-primary-rgb: 0, 84, 233; --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3171e0; - --ion-color-primary-tint: #4c8dff; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; --ion-color-secondary: #0cd1e8; --ion-color-secondary-rgb: 12, 209, 232; diff --git a/docs/theming/advanced.md b/docs/theming/advanced.md index 24c6a22b221..c001c58cb1c 100644 --- a/docs/theming/advanced.md +++ b/docs/theming/advanced.md @@ -30,7 +30,7 @@ The `theme-color` meta controls the interface theme when running in a web browse The example below demonstrates how to use `theme-color` to style the browser interface on iOS 15. ```html - + ``` @@ -154,7 +154,7 @@ What exactly does this mean? Basically, using a CSS preprocessor, such as Sass, ```scss // Background color, shade, and tint -$background: #3880ff; +$background: #0054e9; $background-shade: mix(#000, $background, 12%); $background-tint: mix(#fff, $background, 10%); @@ -168,7 +168,7 @@ After running through the Sass compiler, the colors will have the following valu | Variable | Value | | ------------------- | ---------------------------------------------- | -| `$background` | #3880ff | +| `$background` | #0054e9 | | `$background-shade` | #3171e0 | | `$background-tint` | #4c8dff | | `$text` | #444444 | diff --git a/src/components/page/reference/ReleaseNotes/styles.module.css b/src/components/page/reference/ReleaseNotes/styles.module.css index 8da51d36c74..07d91cc313d 100644 --- a/src/components/page/reference/ReleaseNotes/styles.module.css +++ b/src/components/page/reference/ReleaseNotes/styles.module.css @@ -1,8 +1,8 @@ .release-notes { margin-block-start: 4rem; - --accent-color: #3880ff; - --accent-color-rgb: 56, 128, 255; + --accent-color: #0054e9; + --accent-color-rgb: 0, 84, 233; --accent-color-100: #4d8dff; --accent-color-200: #639cff; --accent-color-300: #4d8dff; diff --git a/src/components/page/theming/ColorAccordion/styles.module.css b/src/components/page/theming/ColorAccordion/styles.module.css index abe00a5ddc8..9914b978ea5 100755 --- a/src/components/page/theming/ColorAccordion/styles.module.css +++ b/src/components/page/theming/ColorAccordion/styles.module.css @@ -9,12 +9,12 @@ list-style-type: none; /** primary **/ - --ion-color-primary: #3880ff; - --ion-color-primary-rgb: 56, 128, 255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3171e0; - --ion-color-primary-tint: #4c8dff; + --ion-color-primary: #0054e9; + --ion-color-primary-rgb: 0,84,233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #3dc2ff; diff --git a/static/code/stackblitz/v7/angular/variables.css b/static/code/stackblitz/v7/angular/variables.css index a44fcdd01d7..e753fda7a71 100644 --- a/static/code/stackblitz/v7/angular/variables.css +++ b/static/code/stackblitz/v7/angular/variables.css @@ -4,12 +4,12 @@ http://ionicframework.com/docs/theming/ */ /** Ionic CSS Variables **/ :root { /** primary **/ - --ion-color-primary: #3880ff; - --ion-color-primary-rgb: 56, 128, 255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3171e0; - --ion-color-primary-tint: #4c8dff; + --ion-color-primary: #0054e9; + --ion-color-primary-rgb: 0,84,233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #3dc2ff; diff --git a/static/code/stackblitz/v7/html/variables.css b/static/code/stackblitz/v7/html/variables.css index a44fcdd01d7..e753fda7a71 100644 --- a/static/code/stackblitz/v7/html/variables.css +++ b/static/code/stackblitz/v7/html/variables.css @@ -4,12 +4,12 @@ http://ionicframework.com/docs/theming/ */ /** Ionic CSS Variables **/ :root { /** primary **/ - --ion-color-primary: #3880ff; - --ion-color-primary-rgb: 56, 128, 255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3171e0; - --ion-color-primary-tint: #4c8dff; + --ion-color-primary: #0054e9; + --ion-color-primary-rgb: 0,84,233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #3dc2ff; diff --git a/static/code/stackblitz/v7/react/variables.css b/static/code/stackblitz/v7/react/variables.css index a44fcdd01d7..debb149814e 100644 --- a/static/code/stackblitz/v7/react/variables.css +++ b/static/code/stackblitz/v7/react/variables.css @@ -4,12 +4,12 @@ http://ionicframework.com/docs/theming/ */ /** Ionic CSS Variables **/ :root { /** primary **/ - --ion-color-primary: #3880ff; - --ion-color-primary-rgb: 56, 128, 255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3171e0; - --ion-color-primary-tint: #4c8dff; + --ion-color-primary: #0054e9; + --ion-color-primary-rgb: 0,84,233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #3dc2ff; diff --git a/static/code/stackblitz/v7/vue/variables.css b/static/code/stackblitz/v7/vue/variables.css index a44fcdd01d7..e753fda7a71 100644 --- a/static/code/stackblitz/v7/vue/variables.css +++ b/static/code/stackblitz/v7/vue/variables.css @@ -4,12 +4,12 @@ http://ionicframework.com/docs/theming/ */ /** Ionic CSS Variables **/ :root { /** primary **/ - --ion-color-primary: #3880ff; - --ion-color-primary-rgb: 56, 128, 255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3171e0; - --ion-color-primary-tint: #4c8dff; + --ion-color-primary: #0054e9; + --ion-color-primary-rgb: 0,84,233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #3dc2ff; diff --git a/static/code/stackblitz/v8/angular/variables.css b/static/code/stackblitz/v8/angular/variables.css index a44fcdd01d7..e753fda7a71 100644 --- a/static/code/stackblitz/v8/angular/variables.css +++ b/static/code/stackblitz/v8/angular/variables.css @@ -4,12 +4,12 @@ http://ionicframework.com/docs/theming/ */ /** Ionic CSS Variables **/ :root { /** primary **/ - --ion-color-primary: #3880ff; - --ion-color-primary-rgb: 56, 128, 255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3171e0; - --ion-color-primary-tint: #4c8dff; + --ion-color-primary: #0054e9; + --ion-color-primary-rgb: 0,84,233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #3dc2ff; diff --git a/static/code/stackblitz/v8/html/variables.css b/static/code/stackblitz/v8/html/variables.css index a44fcdd01d7..e753fda7a71 100644 --- a/static/code/stackblitz/v8/html/variables.css +++ b/static/code/stackblitz/v8/html/variables.css @@ -4,12 +4,12 @@ http://ionicframework.com/docs/theming/ */ /** Ionic CSS Variables **/ :root { /** primary **/ - --ion-color-primary: #3880ff; - --ion-color-primary-rgb: 56, 128, 255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3171e0; - --ion-color-primary-tint: #4c8dff; + --ion-color-primary: #0054e9; + --ion-color-primary-rgb: 0,84,233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #3dc2ff; diff --git a/static/code/stackblitz/v8/react/variables.css b/static/code/stackblitz/v8/react/variables.css index a44fcdd01d7..e753fda7a71 100644 --- a/static/code/stackblitz/v8/react/variables.css +++ b/static/code/stackblitz/v8/react/variables.css @@ -4,12 +4,12 @@ http://ionicframework.com/docs/theming/ */ /** Ionic CSS Variables **/ :root { /** primary **/ - --ion-color-primary: #3880ff; - --ion-color-primary-rgb: 56, 128, 255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3171e0; - --ion-color-primary-tint: #4c8dff; + --ion-color-primary: #0054e9; + --ion-color-primary-rgb: 0,84,233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #3dc2ff; diff --git a/static/code/stackblitz/v8/vue/variables.css b/static/code/stackblitz/v8/vue/variables.css index a44fcdd01d7..e753fda7a71 100644 --- a/static/code/stackblitz/v8/vue/variables.css +++ b/static/code/stackblitz/v8/vue/variables.css @@ -4,12 +4,12 @@ http://ionicframework.com/docs/theming/ */ /** Ionic CSS Variables **/ :root { /** primary **/ - --ion-color-primary: #3880ff; - --ion-color-primary-rgb: 56, 128, 255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3171e0; - --ion-color-primary-tint: #4c8dff; + --ion-color-primary: #0054e9; + --ion-color-primary-rgb: 0,84,233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #3dc2ff; diff --git a/static/usage/common.css b/static/usage/common.css index 1dedc5b24c7..25a329decbb 100644 --- a/static/usage/common.css +++ b/static/usage/common.css @@ -11,12 +11,12 @@ :root { /** primary **/ - --ion-color-primary: #3880ff; - --ion-color-primary-rgb: 56, 128, 255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3171e0; - --ion-color-primary-tint: #4c8dff; + --ion-color-primary: #0054e9; + --ion-color-primary-rgb: 0,84,233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #3dc2ff; diff --git a/versioned_docs/version-v7/angular/slides.md b/versioned_docs/version-v7/angular/slides.md index 4ceb1d3f6df..d6d365f6ebf 100644 --- a/versioned_docs/version-v7/angular/slides.md +++ b/versioned_docs/version-v7/angular/slides.md @@ -102,7 +102,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-color: var(--ion-color-primary, #3880ff); + --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); --swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5); diff --git a/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md b/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md index 94c253f3bed..0d7d5509450 100644 --- a/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md +++ b/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md @@ -139,12 +139,12 @@ To customize the look and feel of the components, Ionic has CSS variables you ca ```css title="main.css" :root { - --ion-color-primary: #3880ff; - --ion-color-primary-rgb: 56, 128, 255; + --ion-color-primary: #0054e9; + --ion-color-primary-rgb: 0, 84, 233; --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3171e0; - --ion-color-primary-tint: #4c8dff; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; --ion-color-secondary: #0cd1e8; --ion-color-secondary-rgb: 12, 209, 232; diff --git a/versioned_docs/version-v7/theming/advanced.md b/versioned_docs/version-v7/theming/advanced.md index 24c6a22b221..c001c58cb1c 100644 --- a/versioned_docs/version-v7/theming/advanced.md +++ b/versioned_docs/version-v7/theming/advanced.md @@ -30,7 +30,7 @@ The `theme-color` meta controls the interface theme when running in a web browse The example below demonstrates how to use `theme-color` to style the browser interface on iOS 15. ```html - + ``` @@ -154,7 +154,7 @@ What exactly does this mean? Basically, using a CSS preprocessor, such as Sass, ```scss // Background color, shade, and tint -$background: #3880ff; +$background: #0054e9; $background-shade: mix(#000, $background, 12%); $background-tint: mix(#fff, $background, 10%); @@ -168,7 +168,7 @@ After running through the Sass compiler, the colors will have the following valu | Variable | Value | | ------------------- | ---------------------------------------------- | -| `$background` | #3880ff | +| `$background` | #0054e9 | | `$background-shade` | #3171e0 | | `$background-tint` | #4c8dff | | `$text` | #444444 | From 56a6e29596b1aae0d8c02f11d62095e2f660d522 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 8 Jan 2024 16:08:38 -0800 Subject: [PATCH 04/11] feat(light-mode): rest of the hex colors --- ...onic-react-to-an-existing-react-project.md | 16 ++-- .../theming/ColorAccordion/styles.module.css | 76 ++++++++-------- .../code/stackblitz/v7/angular/variables.css | 88 +++++++++---------- static/code/stackblitz/v7/html/variables.css | 86 +++++++++--------- static/code/stackblitz/v7/react/variables.css | 88 +++++++++---------- static/code/stackblitz/v7/vue/variables.css | 88 +++++++++---------- .../code/stackblitz/v8/angular/variables.css | 88 +++++++++---------- static/code/stackblitz/v8/html/variables.css | 88 +++++++++---------- static/code/stackblitz/v8/react/variables.css | 88 +++++++++---------- static/code/stackblitz/v8/vue/variables.css | 88 +++++++++---------- static/usage/common.css | 88 +++++++++---------- ...onic-react-to-an-existing-react-project.md | 16 ++-- 12 files changed, 449 insertions(+), 449 deletions(-) diff --git a/docs/react/adding-ionic-react-to-an-existing-react-project.md b/docs/react/adding-ionic-react-to-an-existing-react-project.md index 0d7d5509450..ace07d9ac52 100644 --- a/docs/react/adding-ionic-react-to-an-existing-react-project.md +++ b/docs/react/adding-ionic-react-to-an-existing-react-project.md @@ -181,12 +181,12 @@ To customize the look and feel of the components, Ionic has CSS variables you ca --ion-color-danger-shade: #d33939; --ion-color-danger-tint: #f25454; - --ion-color-dark: #222428; - --ion-color-dark-rgb: 34, 34, 34; + --ion-color-dark: #2f2f2f; + --ion-color-dark-rgb: 47, 47, 47; --ion-color-dark-contrast: #ffffff; --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #1e2023; - --ion-color-dark-tint: #383a3e; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; --ion-color-medium: #989aa2; --ion-color-medium-rgb: 152, 154, 162; @@ -195,12 +195,12 @@ To customize the look and feel of the components, Ionic has CSS variables you ca --ion-color-medium-shade: #86888f; --ion-color-medium-tint: #a2a4ab; - --ion-color-light: #f4f5f8; - --ion-color-light-rgb: 244, 244, 244; + --ion-color-light: #f6f8fc; + --ion-color-light-rgb: 246, 248, 252; --ion-color-light-contrast: #000000; --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d7d8da; - --ion-color-light-tint: #f5f6f9; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } ``` diff --git a/src/components/page/theming/ColorAccordion/styles.module.css b/src/components/page/theming/ColorAccordion/styles.module.css index 9914b978ea5..2c7b04fa27d 100755 --- a/src/components/page/theming/ColorAccordion/styles.module.css +++ b/src/components/page/theming/ColorAccordion/styles.module.css @@ -10,19 +10,19 @@ /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0,84,233; + --ion-color-primary-rgb: 0, 84, 233; --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-contrast-rgb: 255, 255, 255; --ion-color-primary-shade: #004acd; --ion-color-primary-tint: #1a65eb; /** secondary **/ - --ion-color-secondary: #3dc2ff; - --ion-color-secondary-rgb: 61, 194, 255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #36abe0; - --ion-color-secondary-tint: #50c8ff; + --ion-color-secondary: #0163aa; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ --ion-color-tertiary: #5260ff; @@ -33,12 +33,12 @@ --ion-color-tertiary-tint: #6370ff; /** success **/ - --ion-color-success: #2dd36f; - --ion-color-success-rgb: 45, 211, 111; - --ion-color-success-contrast: #ffffff; - --ion-color-success-contrast-rgb: 255, 255, 255; - --ion-color-success-shade: #28ba62; - --ion-color-success-tint: #42d77d; + --ion-color-success: #2dd55b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; @@ -49,36 +49,36 @@ --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-danger: #eb445a; - --ion-color-danger-rgb: 235, 68, 90; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #cf3c4f; - --ion-color-danger-tint: #ed576b; + --ion-color-danger: #c5000f; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ - --ion-color-dark: #222428; - --ion-color-dark-rgb: 34, 36, 40; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #1e2023; - --ion-color-dark-tint: #383a3e; + -ion-color-dark: #2f2f2f; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ - --ion-color-medium: #92949c; - --ion-color-medium-rgb: 146, 148, 156; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255, 255, 255; - --ion-color-medium-shade: #808289; - --ion-color-medium-tint: #9d9fa6; + --ion-color-medium: #5f5f5f; + --ion-color-medium-rgb: 95,95,95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ - --ion-color-light: #f4f5f8; - --ion-color-light-rgb: 244, 245, 248; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d7d8da; - --ion-color-light-tint: #f5f6f9; + --ion-color-light: #f6f8fc; + --ion-color-light-rgb: 246, 248, 252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } .colorSubmenu { diff --git a/static/code/stackblitz/v7/angular/variables.css b/static/code/stackblitz/v7/angular/variables.css index e753fda7a71..8041fe7384f 100644 --- a/static/code/stackblitz/v7/angular/variables.css +++ b/static/code/stackblitz/v7/angular/variables.css @@ -5,35 +5,35 @@ http://ionicframework.com/docs/theming/ */ :root { /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0,84,233; + --ion-color-primary-rgb: 0, 84, 233; --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-contrast-rgb: 255, 255, 255; --ion-color-primary-shade: #004acd; --ion-color-primary-tint: #1a65eb; /** secondary **/ - --ion-color-secondary: #3dc2ff; - --ion-color-secondary-rgb: 61, 194, 255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #36abe0; - --ion-color-secondary-tint: #50c8ff; + --ion-color-secondary: #0163aa; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ - --ion-color-tertiary: #5260ff; - --ion-color-tertiary-rgb: 82, 96, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #4854e0; - --ion-color-tertiary-tint: #6370ff; + --ion-color-tertiary: #6030ff; + --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ - --ion-color-success: #2dd36f; - --ion-color-success-rgb: 45, 211, 111; - --ion-color-success-contrast: #ffffff; - --ion-color-success-contrast-rgb: 255, 255, 255; - --ion-color-success-shade: #28ba62; - --ion-color-success-tint: #42d77d; + --ion-color-success: #2dd55b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; @@ -44,36 +44,36 @@ http://ionicframework.com/docs/theming/ */ --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-danger: #eb445a; - --ion-color-danger-rgb: 235, 68, 90; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #cf3c4f; - --ion-color-danger-tint: #ed576b; + --ion-color-danger: #c5000f; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ - --ion-color-dark: #222428; - --ion-color-dark-rgb: 34, 36, 40; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #1e2023; - --ion-color-dark-tint: #383a3e; + -ion-color-dark: #2f2f2f; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ - --ion-color-medium: #92949c; - --ion-color-medium-rgb: 146, 148, 156; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255, 255, 255; - --ion-color-medium-shade: #808289; - --ion-color-medium-tint: #9d9fa6; + --ion-color-medium: #5f5f5f; + --ion-color-medium-rgb: 95,95,95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ - --ion-color-light: #f4f5f8; - --ion-color-light-rgb: 244, 245, 248; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d7d8da; - --ion-color-light-tint: #f5f6f9; + --ion-color-light: #f6f8fc; + --ion-color-light-rgb: 246, 248, 252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } @media (prefers-color-scheme: dark) { diff --git a/static/code/stackblitz/v7/html/variables.css b/static/code/stackblitz/v7/html/variables.css index e753fda7a71..fa3b4a68e93 100644 --- a/static/code/stackblitz/v7/html/variables.css +++ b/static/code/stackblitz/v7/html/variables.css @@ -7,33 +7,33 @@ http://ionicframework.com/docs/theming/ */ --ion-color-primary: #0054e9; --ion-color-primary-rgb: 0,84,233; --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-contrast-rgb: 255, 255, 255; --ion-color-primary-shade: #004acd; --ion-color-primary-tint: #1a65eb; /** secondary **/ - --ion-color-secondary: #3dc2ff; - --ion-color-secondary-rgb: 61, 194, 255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #36abe0; - --ion-color-secondary-tint: #50c8ff; + --ion-color-secondary: #0163aa; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ - --ion-color-tertiary: #5260ff; - --ion-color-tertiary-rgb: 82, 96, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #4854e0; - --ion-color-tertiary-tint: #6370ff; + --ion-color-tertiary: #6030ff; + --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ - --ion-color-success: #2dd36f; - --ion-color-success-rgb: 45, 211, 111; - --ion-color-success-contrast: #ffffff; - --ion-color-success-contrast-rgb: 255, 255, 255; - --ion-color-success-shade: #28ba62; - --ion-color-success-tint: #42d77d; + --ion-color-success: #2dd55b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; @@ -44,36 +44,36 @@ http://ionicframework.com/docs/theming/ */ --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-danger: #eb445a; - --ion-color-danger-rgb: 235, 68, 90; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #cf3c4f; - --ion-color-danger-tint: #ed576b; + --ion-color-danger: #c5000f; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ - --ion-color-dark: #222428; - --ion-color-dark-rgb: 34, 36, 40; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #1e2023; - --ion-color-dark-tint: #383a3e; + -ion-color-dark: #2f2f2f; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ - --ion-color-medium: #92949c; - --ion-color-medium-rgb: 146, 148, 156; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255, 255, 255; - --ion-color-medium-shade: #808289; - --ion-color-medium-tint: #9d9fa6; + --ion-color-medium: #5f5f5f; + --ion-color-medium-rgb: 95,95,95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ - --ion-color-light: #f4f5f8; - --ion-color-light-rgb: 244, 245, 248; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d7d8da; - --ion-color-light-tint: #f5f6f9; + --ion-color-light: #f6f8fc; + --ion-color-light-rgb: 246, 248, 252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } @media (prefers-color-scheme: dark) { diff --git a/static/code/stackblitz/v7/react/variables.css b/static/code/stackblitz/v7/react/variables.css index debb149814e..6eb9ff542d8 100644 --- a/static/code/stackblitz/v7/react/variables.css +++ b/static/code/stackblitz/v7/react/variables.css @@ -5,35 +5,35 @@ http://ionicframework.com/docs/theming/ */ :root { /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0,84,233; + --ion-color-primary-rgb: 0, 84, 233; --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-contrast-rgb: 255, 255, 255; --ion-color-primary-shade: #004acd; --ion-color-primary-tint: #1a65eb; /** secondary **/ - --ion-color-secondary: #3dc2ff; - --ion-color-secondary-rgb: 61, 194, 255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #36abe0; - --ion-color-secondary-tint: #50c8ff; + --ion-color-secondary: #0163aa; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ - --ion-color-tertiary: #5260ff; - --ion-color-tertiary-rgb: 82, 96, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #4854e0; - --ion-color-tertiary-tint: #6370ff; + --ion-color-tertiary: #6030ff; + --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ - --ion-color-success: #2dd36f; - --ion-color-success-rgb: 45, 211, 111; - --ion-color-success-contrast: #ffffff; - --ion-color-success-contrast-rgb: 255, 255, 255; - --ion-color-success-shade: #28ba62; - --ion-color-success-tint: #42d77d; + --ion-color-success: #2dd55b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; @@ -44,36 +44,36 @@ http://ionicframework.com/docs/theming/ */ --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-danger: #eb445a; - --ion-color-danger-rgb: 235, 68, 90; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #cf3c4f; - --ion-color-danger-tint: #ed576b; + --ion-color-danger: #c5000f; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ - --ion-color-dark: #222428; - --ion-color-dark-rgb: 34, 36, 40; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #1e2023; - --ion-color-dark-tint: #383a3e; + --ion-color-dark: #2f2f2f; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ - --ion-color-medium: #92949c; - --ion-color-medium-rgb: 146, 148, 156; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255, 255, 255; - --ion-color-medium-shade: #808289; - --ion-color-medium-tint: #9d9fa6; + --ion-color-medium: #5f5f5f; + --ion-color-medium-rgb: 95,95,95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ - --ion-color-light: #f4f5f8; - --ion-color-light-rgb: 244, 245, 248; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d7d8da; - --ion-color-light-tint: #f5f6f9; + --ion-color-light: #f6f8fc; + --ion-color-light-rgb: 246, 248, 252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } @media (prefers-color-scheme: dark) { diff --git a/static/code/stackblitz/v7/vue/variables.css b/static/code/stackblitz/v7/vue/variables.css index e753fda7a71..124fefd86d3 100644 --- a/static/code/stackblitz/v7/vue/variables.css +++ b/static/code/stackblitz/v7/vue/variables.css @@ -5,35 +5,35 @@ http://ionicframework.com/docs/theming/ */ :root { /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0,84,233; + --ion-color-primary-rgb: 0, 84, 233; --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-contrast-rgb: 255, 255, 255; --ion-color-primary-shade: #004acd; --ion-color-primary-tint: #1a65eb; /** secondary **/ - --ion-color-secondary: #3dc2ff; - --ion-color-secondary-rgb: 61, 194, 255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #36abe0; - --ion-color-secondary-tint: #50c8ff; + --ion-color-secondary: #0163aa; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ - --ion-color-tertiary: #5260ff; - --ion-color-tertiary-rgb: 82, 96, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #4854e0; - --ion-color-tertiary-tint: #6370ff; + --ion-color-tertiary: #6030ff; + --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ - --ion-color-success: #2dd36f; - --ion-color-success-rgb: 45, 211, 111; - --ion-color-success-contrast: #ffffff; - --ion-color-success-contrast-rgb: 255, 255, 255; - --ion-color-success-shade: #28ba62; - --ion-color-success-tint: #42d77d; + --ion-color-success: #2dd55b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; @@ -44,36 +44,36 @@ http://ionicframework.com/docs/theming/ */ --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-danger: #eb445a; - --ion-color-danger-rgb: 235, 68, 90; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #cf3c4f; - --ion-color-danger-tint: #ed576b; + --ion-color-danger: #c5000f; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ - --ion-color-dark: #222428; - --ion-color-dark-rgb: 34, 36, 40; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #1e2023; - --ion-color-dark-tint: #383a3e; + --ion-color-dark: #2f2f2f; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ - --ion-color-medium: #92949c; - --ion-color-medium-rgb: 146, 148, 156; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255, 255, 255; - --ion-color-medium-shade: #808289; - --ion-color-medium-tint: #9d9fa6; + --ion-color-medium: #5f5f5f; + --ion-color-medium-rgb: 95,95,95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ - --ion-color-light: #f4f5f8; - --ion-color-light-rgb: 244, 245, 248; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d7d8da; - --ion-color-light-tint: #f5f6f9; + --ion-color-light: #f6f8fc; + --ion-color-light-rgb: 246,248,252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0,0,0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } @media (prefers-color-scheme: dark) { diff --git a/static/code/stackblitz/v8/angular/variables.css b/static/code/stackblitz/v8/angular/variables.css index e753fda7a71..124fefd86d3 100644 --- a/static/code/stackblitz/v8/angular/variables.css +++ b/static/code/stackblitz/v8/angular/variables.css @@ -5,35 +5,35 @@ http://ionicframework.com/docs/theming/ */ :root { /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0,84,233; + --ion-color-primary-rgb: 0, 84, 233; --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-contrast-rgb: 255, 255, 255; --ion-color-primary-shade: #004acd; --ion-color-primary-tint: #1a65eb; /** secondary **/ - --ion-color-secondary: #3dc2ff; - --ion-color-secondary-rgb: 61, 194, 255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #36abe0; - --ion-color-secondary-tint: #50c8ff; + --ion-color-secondary: #0163aa; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ - --ion-color-tertiary: #5260ff; - --ion-color-tertiary-rgb: 82, 96, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #4854e0; - --ion-color-tertiary-tint: #6370ff; + --ion-color-tertiary: #6030ff; + --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ - --ion-color-success: #2dd36f; - --ion-color-success-rgb: 45, 211, 111; - --ion-color-success-contrast: #ffffff; - --ion-color-success-contrast-rgb: 255, 255, 255; - --ion-color-success-shade: #28ba62; - --ion-color-success-tint: #42d77d; + --ion-color-success: #2dd55b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; @@ -44,36 +44,36 @@ http://ionicframework.com/docs/theming/ */ --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-danger: #eb445a; - --ion-color-danger-rgb: 235, 68, 90; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #cf3c4f; - --ion-color-danger-tint: #ed576b; + --ion-color-danger: #c5000f; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ - --ion-color-dark: #222428; - --ion-color-dark-rgb: 34, 36, 40; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #1e2023; - --ion-color-dark-tint: #383a3e; + --ion-color-dark: #2f2f2f; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ - --ion-color-medium: #92949c; - --ion-color-medium-rgb: 146, 148, 156; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255, 255, 255; - --ion-color-medium-shade: #808289; - --ion-color-medium-tint: #9d9fa6; + --ion-color-medium: #5f5f5f; + --ion-color-medium-rgb: 95,95,95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ - --ion-color-light: #f4f5f8; - --ion-color-light-rgb: 244, 245, 248; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d7d8da; - --ion-color-light-tint: #f5f6f9; + --ion-color-light: #f6f8fc; + --ion-color-light-rgb: 246,248,252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0,0,0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } @media (prefers-color-scheme: dark) { diff --git a/static/code/stackblitz/v8/html/variables.css b/static/code/stackblitz/v8/html/variables.css index e753fda7a71..124fefd86d3 100644 --- a/static/code/stackblitz/v8/html/variables.css +++ b/static/code/stackblitz/v8/html/variables.css @@ -5,35 +5,35 @@ http://ionicframework.com/docs/theming/ */ :root { /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0,84,233; + --ion-color-primary-rgb: 0, 84, 233; --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-contrast-rgb: 255, 255, 255; --ion-color-primary-shade: #004acd; --ion-color-primary-tint: #1a65eb; /** secondary **/ - --ion-color-secondary: #3dc2ff; - --ion-color-secondary-rgb: 61, 194, 255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #36abe0; - --ion-color-secondary-tint: #50c8ff; + --ion-color-secondary: #0163aa; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ - --ion-color-tertiary: #5260ff; - --ion-color-tertiary-rgb: 82, 96, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #4854e0; - --ion-color-tertiary-tint: #6370ff; + --ion-color-tertiary: #6030ff; + --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ - --ion-color-success: #2dd36f; - --ion-color-success-rgb: 45, 211, 111; - --ion-color-success-contrast: #ffffff; - --ion-color-success-contrast-rgb: 255, 255, 255; - --ion-color-success-shade: #28ba62; - --ion-color-success-tint: #42d77d; + --ion-color-success: #2dd55b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; @@ -44,36 +44,36 @@ http://ionicframework.com/docs/theming/ */ --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-danger: #eb445a; - --ion-color-danger-rgb: 235, 68, 90; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #cf3c4f; - --ion-color-danger-tint: #ed576b; + --ion-color-danger: #c5000f; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ - --ion-color-dark: #222428; - --ion-color-dark-rgb: 34, 36, 40; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #1e2023; - --ion-color-dark-tint: #383a3e; + --ion-color-dark: #2f2f2f; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ - --ion-color-medium: #92949c; - --ion-color-medium-rgb: 146, 148, 156; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255, 255, 255; - --ion-color-medium-shade: #808289; - --ion-color-medium-tint: #9d9fa6; + --ion-color-medium: #5f5f5f; + --ion-color-medium-rgb: 95,95,95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ - --ion-color-light: #f4f5f8; - --ion-color-light-rgb: 244, 245, 248; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d7d8da; - --ion-color-light-tint: #f5f6f9; + --ion-color-light: #f6f8fc; + --ion-color-light-rgb: 246,248,252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0,0,0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } @media (prefers-color-scheme: dark) { diff --git a/static/code/stackblitz/v8/react/variables.css b/static/code/stackblitz/v8/react/variables.css index e753fda7a71..124fefd86d3 100644 --- a/static/code/stackblitz/v8/react/variables.css +++ b/static/code/stackblitz/v8/react/variables.css @@ -5,35 +5,35 @@ http://ionicframework.com/docs/theming/ */ :root { /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0,84,233; + --ion-color-primary-rgb: 0, 84, 233; --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-contrast-rgb: 255, 255, 255; --ion-color-primary-shade: #004acd; --ion-color-primary-tint: #1a65eb; /** secondary **/ - --ion-color-secondary: #3dc2ff; - --ion-color-secondary-rgb: 61, 194, 255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #36abe0; - --ion-color-secondary-tint: #50c8ff; + --ion-color-secondary: #0163aa; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ - --ion-color-tertiary: #5260ff; - --ion-color-tertiary-rgb: 82, 96, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #4854e0; - --ion-color-tertiary-tint: #6370ff; + --ion-color-tertiary: #6030ff; + --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ - --ion-color-success: #2dd36f; - --ion-color-success-rgb: 45, 211, 111; - --ion-color-success-contrast: #ffffff; - --ion-color-success-contrast-rgb: 255, 255, 255; - --ion-color-success-shade: #28ba62; - --ion-color-success-tint: #42d77d; + --ion-color-success: #2dd55b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; @@ -44,36 +44,36 @@ http://ionicframework.com/docs/theming/ */ --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-danger: #eb445a; - --ion-color-danger-rgb: 235, 68, 90; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #cf3c4f; - --ion-color-danger-tint: #ed576b; + --ion-color-danger: #c5000f; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ - --ion-color-dark: #222428; - --ion-color-dark-rgb: 34, 36, 40; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #1e2023; - --ion-color-dark-tint: #383a3e; + --ion-color-dark: #2f2f2f; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ - --ion-color-medium: #92949c; - --ion-color-medium-rgb: 146, 148, 156; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255, 255, 255; - --ion-color-medium-shade: #808289; - --ion-color-medium-tint: #9d9fa6; + --ion-color-medium: #5f5f5f; + --ion-color-medium-rgb: 95,95,95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ - --ion-color-light: #f4f5f8; - --ion-color-light-rgb: 244, 245, 248; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d7d8da; - --ion-color-light-tint: #f5f6f9; + --ion-color-light: #f6f8fc; + --ion-color-light-rgb: 246,248,252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0,0,0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } @media (prefers-color-scheme: dark) { diff --git a/static/code/stackblitz/v8/vue/variables.css b/static/code/stackblitz/v8/vue/variables.css index e753fda7a71..124fefd86d3 100644 --- a/static/code/stackblitz/v8/vue/variables.css +++ b/static/code/stackblitz/v8/vue/variables.css @@ -5,35 +5,35 @@ http://ionicframework.com/docs/theming/ */ :root { /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0,84,233; + --ion-color-primary-rgb: 0, 84, 233; --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-contrast-rgb: 255, 255, 255; --ion-color-primary-shade: #004acd; --ion-color-primary-tint: #1a65eb; /** secondary **/ - --ion-color-secondary: #3dc2ff; - --ion-color-secondary-rgb: 61, 194, 255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #36abe0; - --ion-color-secondary-tint: #50c8ff; + --ion-color-secondary: #0163aa; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ - --ion-color-tertiary: #5260ff; - --ion-color-tertiary-rgb: 82, 96, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #4854e0; - --ion-color-tertiary-tint: #6370ff; + --ion-color-tertiary: #6030ff; + --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ - --ion-color-success: #2dd36f; - --ion-color-success-rgb: 45, 211, 111; - --ion-color-success-contrast: #ffffff; - --ion-color-success-contrast-rgb: 255, 255, 255; - --ion-color-success-shade: #28ba62; - --ion-color-success-tint: #42d77d; + --ion-color-success: #2dd55b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; @@ -44,36 +44,36 @@ http://ionicframework.com/docs/theming/ */ --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-danger: #eb445a; - --ion-color-danger-rgb: 235, 68, 90; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #cf3c4f; - --ion-color-danger-tint: #ed576b; + --ion-color-danger: #c5000f; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ - --ion-color-dark: #222428; - --ion-color-dark-rgb: 34, 36, 40; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #1e2023; - --ion-color-dark-tint: #383a3e; + --ion-color-dark: #2f2f2f; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ - --ion-color-medium: #92949c; - --ion-color-medium-rgb: 146, 148, 156; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255, 255, 255; - --ion-color-medium-shade: #808289; - --ion-color-medium-tint: #9d9fa6; + --ion-color-medium: #5f5f5f; + --ion-color-medium-rgb: 95,95,95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ - --ion-color-light: #f4f5f8; - --ion-color-light-rgb: 244, 245, 248; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d7d8da; - --ion-color-light-tint: #f5f6f9; + --ion-color-light: #f6f8fc; + --ion-color-light-rgb: 246,248,252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0,0,0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } @media (prefers-color-scheme: dark) { diff --git a/static/usage/common.css b/static/usage/common.css index 25a329decbb..50287711d06 100644 --- a/static/usage/common.css +++ b/static/usage/common.css @@ -12,35 +12,35 @@ :root { /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0,84,233; + --ion-color-primary-rgb: 0, 84, 233; --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-contrast-rgb: 255, 255, 255; --ion-color-primary-shade: #004acd; --ion-color-primary-tint: #1a65eb; /** secondary **/ - --ion-color-secondary: #3dc2ff; - --ion-color-secondary-rgb: 61, 194, 255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #36abe0; - --ion-color-secondary-tint: #50c8ff; + --ion-color-secondary: #0163aa; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ - --ion-color-tertiary: #5260ff; - --ion-color-tertiary-rgb: 82, 96, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #4854e0; - --ion-color-tertiary-tint: #6370ff; + --ion-color-tertiary: #6030ff; + --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ - --ion-color-success: #2dd36f; - --ion-color-success-rgb: 45, 211, 111; - --ion-color-success-contrast: #ffffff; - --ion-color-success-contrast-rgb: 255, 255, 255; - --ion-color-success-shade: #28ba62; - --ion-color-success-tint: #42d77d; + --ion-color-success: #2dd55b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; @@ -51,36 +51,36 @@ --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-danger: #eb445a; - --ion-color-danger-rgb: 235, 68, 90; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #cf3c4f; - --ion-color-danger-tint: #ed576b; + --ion-color-danger: #c5000f; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ - --ion-color-dark: #222428; - --ion-color-dark-rgb: 34, 36, 40; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #1e2023; - --ion-color-dark-tint: #383a3e; + --ion-color-dark: #2f2f2f; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ - --ion-color-medium: #92949c; - --ion-color-medium-rgb: 146, 148, 156; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255, 255, 255; - --ion-color-medium-shade: #808289; - --ion-color-medium-tint: #9d9fa6; + --ion-color-medium: #5f5f5f; + --ion-color-medium-rgb: 95,95,95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ - --ion-color-light: #f4f5f8; - --ion-color-light-rgb: 244, 245, 248; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d7d8da; - --ion-color-light-tint: #f5f6f9; + --ion-color-light: #f6f8fc; + --ion-color-light-rgb: 246,248,252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0,0,0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } /* diff --git a/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md b/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md index 0d7d5509450..ace07d9ac52 100644 --- a/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md +++ b/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md @@ -181,12 +181,12 @@ To customize the look and feel of the components, Ionic has CSS variables you ca --ion-color-danger-shade: #d33939; --ion-color-danger-tint: #f25454; - --ion-color-dark: #222428; - --ion-color-dark-rgb: 34, 34, 34; + --ion-color-dark: #2f2f2f; + --ion-color-dark-rgb: 47, 47, 47; --ion-color-dark-contrast: #ffffff; --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #1e2023; - --ion-color-dark-tint: #383a3e; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; --ion-color-medium: #989aa2; --ion-color-medium-rgb: 152, 154, 162; @@ -195,12 +195,12 @@ To customize the look and feel of the components, Ionic has CSS variables you ca --ion-color-medium-shade: #86888f; --ion-color-medium-tint: #a2a4ab; - --ion-color-light: #f4f5f8; - --ion-color-light-rgb: 244, 244, 244; + --ion-color-light: #f6f8fc; + --ion-color-light-rgb: 246, 248, 252; --ion-color-light-contrast: #000000; --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d7d8da; - --ion-color-light-tint: #f5f6f9; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } ``` From 97efb71e97d631411f46b7fe6b25d629a5622800 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 8 Jan 2024 16:26:00 -0800 Subject: [PATCH 05/11] feat(light-mode): remove extra spaces --- .../theming/ColorAccordion/styles.module.css | 72 +++++++-------- .../LayeredColorsSelect/styles.module.scss | 90 +++++++++---------- .../code/stackblitz/v7/angular/variables.css | 80 ++++++++--------- static/code/stackblitz/v7/react/variables.css | 82 ++++++++--------- static/code/stackblitz/v7/vue/variables.css | 80 ++++++++--------- .../code/stackblitz/v8/angular/variables.css | 80 ++++++++--------- static/code/stackblitz/v8/html/variables.css | 80 ++++++++--------- static/code/stackblitz/v8/react/variables.css | 80 ++++++++--------- static/code/stackblitz/v8/vue/variables.css | 80 ++++++++--------- static/usage/common.css | 80 ++++++++--------- 10 files changed, 402 insertions(+), 402 deletions(-) diff --git a/src/components/page/theming/ColorAccordion/styles.module.css b/src/components/page/theming/ColorAccordion/styles.module.css index 2c7b04fa27d..db480f2e002 100755 --- a/src/components/page/theming/ColorAccordion/styles.module.css +++ b/src/components/page/theming/ColorAccordion/styles.module.css @@ -10,19 +10,19 @@ /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-rgb: 0, 84, 233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ --ion-color-tertiary: #5260ff; @@ -34,11 +34,11 @@ /** success **/ --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; @@ -50,35 +50,35 @@ /** danger **/ --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ - -ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; + --ion-color-dark: #2f2f2f; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95,95,95; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255,255,255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; + --ion-color-medium-rgb: 95,95,95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246, 248, 252; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; + --ion-color-light-rgb: 246, 248, 252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } .colorSubmenu { diff --git a/src/components/page/theming/LayeredColorsSelect/styles.module.scss b/src/components/page/theming/LayeredColorsSelect/styles.module.scss index 7f7d82d8944..81da5d141a6 100755 --- a/src/components/page/theming/LayeredColorsSelect/styles.module.scss +++ b/src/components/page/theming/LayeredColorsSelect/styles.module.scss @@ -1,75 +1,75 @@ .layeredColorsSelect { /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84 ,233; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-rgb: 0, 84 , 233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ --ion-color-tertiary: #6030ff; - --ion-color-tertiary-rgb: 96, 48, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #542ae0; - --ion-color-tertiary-tint: #7045ff; + --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; - --ion-color-warning-rgb: 255, 196, 9; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0, 0, 0; - --ion-color-warning-shade: #e0ac08; - --ion-color-warning-tint: #ffca22; + --ion-color-warning-rgb: 255, 196, 9; + --ion-color-warning-contrast: #000000; + --ion-color-warning-contrast-rgb: 0, 0, 0; + --ion-color-warning-shade: #e0ac08; + --ion-color-warning-tint: #ffca22; /** danger **/ --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ --ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95, 95, 95; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255, 255, 255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; + --ion-color-medium-rgb: 95, 95, 95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255, 255, 255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246, 248, 252; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; + --ion-color-light-rgb: 246, 248, 252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } .selectRow { diff --git a/static/code/stackblitz/v7/angular/variables.css b/static/code/stackblitz/v7/angular/variables.css index 8041fe7384f..820711d7a5f 100644 --- a/static/code/stackblitz/v7/angular/variables.css +++ b/static/code/stackblitz/v7/angular/variables.css @@ -5,35 +5,35 @@ http://ionicframework.com/docs/theming/ */ :root { /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-rgb: 0, 84, 233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ --ion-color-tertiary: #6030ff; - --ion-color-tertiary-rgb: 96, 48, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #542ae0; - --ion-color-tertiary-tint: #7045ff; + --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; @@ -45,35 +45,35 @@ http://ionicframework.com/docs/theming/ */ /** danger **/ --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ -ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95,95,95; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255,255,255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; + --ion-color-medium-rgb: 95,95,95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246, 248, 252; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; + --ion-color-light-rgb: 246, 248, 252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } @media (prefers-color-scheme: dark) { diff --git a/static/code/stackblitz/v7/react/variables.css b/static/code/stackblitz/v7/react/variables.css index 6eb9ff542d8..f765fc0c140 100644 --- a/static/code/stackblitz/v7/react/variables.css +++ b/static/code/stackblitz/v7/react/variables.css @@ -5,35 +5,35 @@ http://ionicframework.com/docs/theming/ */ :root { /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-rgb: 0, 84, 233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ --ion-color-tertiary: #6030ff; - --ion-color-tertiary-rgb: 96, 48, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #542ae0; - --ion-color-tertiary-tint: #7045ff; + --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; @@ -45,36 +45,36 @@ http://ionicframework.com/docs/theming/ */ /** danger **/ --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ --ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95,95,95; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255,255,255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; + --ion-color-medium-rgb: 95,95,95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246, 248, 252; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; -} + --ion-color-light-rgb: 246, 248, 252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; + } @media (prefers-color-scheme: dark) { /* diff --git a/static/code/stackblitz/v7/vue/variables.css b/static/code/stackblitz/v7/vue/variables.css index 124fefd86d3..50d4371920b 100644 --- a/static/code/stackblitz/v7/vue/variables.css +++ b/static/code/stackblitz/v7/vue/variables.css @@ -5,35 +5,35 @@ http://ionicframework.com/docs/theming/ */ :root { /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-rgb: 0, 84, 233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ --ion-color-tertiary: #6030ff; - --ion-color-tertiary-rgb: 96, 48, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #542ae0; - --ion-color-tertiary-tint: #7045ff; + --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; @@ -45,35 +45,35 @@ http://ionicframework.com/docs/theming/ */ /** danger **/ --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ --ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95,95,95; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255,255,255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; + --ion-color-medium-rgb: 95,95,95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246,248,252; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0,0,0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; + --ion-color-light-rgb: 246,248,252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0,0,0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } @media (prefers-color-scheme: dark) { diff --git a/static/code/stackblitz/v8/angular/variables.css b/static/code/stackblitz/v8/angular/variables.css index 124fefd86d3..50d4371920b 100644 --- a/static/code/stackblitz/v8/angular/variables.css +++ b/static/code/stackblitz/v8/angular/variables.css @@ -5,35 +5,35 @@ http://ionicframework.com/docs/theming/ */ :root { /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-rgb: 0, 84, 233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ --ion-color-tertiary: #6030ff; - --ion-color-tertiary-rgb: 96, 48, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #542ae0; - --ion-color-tertiary-tint: #7045ff; + --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; @@ -45,35 +45,35 @@ http://ionicframework.com/docs/theming/ */ /** danger **/ --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ --ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95,95,95; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255,255,255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; + --ion-color-medium-rgb: 95,95,95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246,248,252; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0,0,0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; + --ion-color-light-rgb: 246,248,252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0,0,0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } @media (prefers-color-scheme: dark) { diff --git a/static/code/stackblitz/v8/html/variables.css b/static/code/stackblitz/v8/html/variables.css index 124fefd86d3..50d4371920b 100644 --- a/static/code/stackblitz/v8/html/variables.css +++ b/static/code/stackblitz/v8/html/variables.css @@ -5,35 +5,35 @@ http://ionicframework.com/docs/theming/ */ :root { /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-rgb: 0, 84, 233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ --ion-color-tertiary: #6030ff; - --ion-color-tertiary-rgb: 96, 48, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #542ae0; - --ion-color-tertiary-tint: #7045ff; + --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; @@ -45,35 +45,35 @@ http://ionicframework.com/docs/theming/ */ /** danger **/ --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ --ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95,95,95; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255,255,255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; + --ion-color-medium-rgb: 95,95,95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246,248,252; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0,0,0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; + --ion-color-light-rgb: 246,248,252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0,0,0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } @media (prefers-color-scheme: dark) { diff --git a/static/code/stackblitz/v8/react/variables.css b/static/code/stackblitz/v8/react/variables.css index 124fefd86d3..50d4371920b 100644 --- a/static/code/stackblitz/v8/react/variables.css +++ b/static/code/stackblitz/v8/react/variables.css @@ -5,35 +5,35 @@ http://ionicframework.com/docs/theming/ */ :root { /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-rgb: 0, 84, 233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ --ion-color-tertiary: #6030ff; - --ion-color-tertiary-rgb: 96, 48, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #542ae0; - --ion-color-tertiary-tint: #7045ff; + --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; @@ -45,35 +45,35 @@ http://ionicframework.com/docs/theming/ */ /** danger **/ --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ --ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95,95,95; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255,255,255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; + --ion-color-medium-rgb: 95,95,95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246,248,252; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0,0,0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; + --ion-color-light-rgb: 246,248,252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0,0,0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } @media (prefers-color-scheme: dark) { diff --git a/static/code/stackblitz/v8/vue/variables.css b/static/code/stackblitz/v8/vue/variables.css index 124fefd86d3..50d4371920b 100644 --- a/static/code/stackblitz/v8/vue/variables.css +++ b/static/code/stackblitz/v8/vue/variables.css @@ -5,35 +5,35 @@ http://ionicframework.com/docs/theming/ */ :root { /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-rgb: 0, 84, 233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ --ion-color-tertiary: #6030ff; - --ion-color-tertiary-rgb: 96, 48, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #542ae0; - --ion-color-tertiary-tint: #7045ff; + --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; @@ -45,35 +45,35 @@ http://ionicframework.com/docs/theming/ */ /** danger **/ --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ --ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95,95,95; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255,255,255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; + --ion-color-medium-rgb: 95,95,95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246,248,252; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0,0,0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; + --ion-color-light-rgb: 246,248,252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0,0,0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } @media (prefers-color-scheme: dark) { diff --git a/static/usage/common.css b/static/usage/common.css index 50287711d06..f52da4a6cec 100644 --- a/static/usage/common.css +++ b/static/usage/common.css @@ -12,35 +12,35 @@ :root { /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-rgb: 0, 84, 233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; + --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #015796; + --ion-color-secondary-tint: #1a73b3; /** tertiary **/ --ion-color-tertiary: #6030ff; - --ion-color-tertiary-rgb: 96, 48, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #542ae0; - --ion-color-tertiary-tint: #7045ff; + --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; /** warning **/ --ion-color-warning: #ffc409; @@ -52,35 +52,35 @@ /** danger **/ --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; + --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #ad000d; + --ion-color-danger-tint: #cb1a27; /** dark **/ --ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; + --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #292929; + --ion-color-dark-tint: #444444; /** medium **/ --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95,95,95; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255,255,255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; + --ion-color-medium-rgb: 95,95,95; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255,255,255; + --ion-color-medium-shade: #545454; + --ion-color-medium-tint: #6f6f6f; /** light **/ --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246,248,252; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0,0,0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; + --ion-color-light-rgb: 246,248,252; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0,0,0; + --ion-color-light-shade: #d8dade; + --ion-color-light-tint: #f7f9fc; } /* From a77aa10d1e810302c16c5bf6923d7f66c3373429 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 9 Jan 2024 10:45:31 -0800 Subject: [PATCH 06/11] feat(color-contrast): remove extra spaces --- static/code/stackblitz/v7/html/variables.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/static/code/stackblitz/v7/html/variables.css b/static/code/stackblitz/v7/html/variables.css index fa3b4a68e93..848dbf377c2 100644 --- a/static/code/stackblitz/v7/html/variables.css +++ b/static/code/stackblitz/v7/html/variables.css @@ -5,11 +5,11 @@ http://ionicframework.com/docs/theming/ */ :root { /** primary **/ --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0,84,233; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-rgb: 0, 84, 233; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #004acd; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #0163aa; From 774bbb482ec53caae06897b77e7a7bd9e9109637 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 9 Jan 2024 12:24:21 -0800 Subject: [PATCH 07/11] feat(color-contrast): add reference to variables file --- ...onic-react-to-an-existing-react-project.md | 69 +------------------ ...onic-react-to-an-existing-react-project.md | 69 +------------------ 2 files changed, 2 insertions(+), 136 deletions(-) diff --git a/docs/react/adding-ionic-react-to-an-existing-react-project.md b/docs/react/adding-ionic-react-to-an-existing-react-project.md index ace07d9ac52..976912d749b 100644 --- a/docs/react/adding-ionic-react-to-an-existing-react-project.md +++ b/docs/react/adding-ionic-react-to-an-existing-react-project.md @@ -135,74 +135,7 @@ For more information on routing and navigation in Ionic React, see [here](/docs/ ### Customize the Theme -To customize the look and feel of the components, Ionic has CSS variables you can override to provide a theme for your components. Set these in your main CSS file: - -```css title="main.css" -:root { - --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; - - --ion-color-secondary: #0cd1e8; - --ion-color-secondary-rgb: 12, 209, 232; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #0bb8cc; - --ion-color-secondary-tint: #24d6ea; - - --ion-color-tertiary: #7044ff; - --ion-color-tertiary-rgb: 112, 68, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #633ce0; - --ion-color-tertiary-tint: #7e57ff; - - --ion-color-success: #10dc60; - --ion-color-success-rgb: 16, 220, 96; - --ion-color-success-contrast: #ffffff; - --ion-color-success-contrast-rgb: 255, 255, 255; - --ion-color-success-shade: #0ec254; - --ion-color-success-tint: #28e070; - - --ion-color-warning: #ffce00; - --ion-color-warning-rgb: 255, 206, 0; - --ion-color-warning-contrast: #ffffff; - --ion-color-warning-contrast-rgb: 255, 255, 255; - --ion-color-warning-shade: #e0b500; - --ion-color-warning-tint: #ffd31a; - - --ion-color-danger: #f04141; - --ion-color-danger-rgb: 245, 61, 61; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #d33939; - --ion-color-danger-tint: #f25454; - - --ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; - - --ion-color-medium: #989aa2; - --ion-color-medium-rgb: 152, 154, 162; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255, 255, 255; - --ion-color-medium-shade: #86888f; - --ion-color-medium-tint: #a2a4ab; - - --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246, 248, 252; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; -} -``` +To customize the look and feel of the components, Ionic has CSS variables you can override to provide a theme for your components. Set these in your main CSS file. You can find the colors defined in `src/theme/variables.scss`. For more info on theming your Ionic app, see the guide [here](/docs/theming/themes). diff --git a/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md b/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md index ace07d9ac52..976912d749b 100644 --- a/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md +++ b/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md @@ -135,74 +135,7 @@ For more information on routing and navigation in Ionic React, see [here](/docs/ ### Customize the Theme -To customize the look and feel of the components, Ionic has CSS variables you can override to provide a theme for your components. Set these in your main CSS file: - -```css title="main.css" -:root { - --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; - - --ion-color-secondary: #0cd1e8; - --ion-color-secondary-rgb: 12, 209, 232; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #0bb8cc; - --ion-color-secondary-tint: #24d6ea; - - --ion-color-tertiary: #7044ff; - --ion-color-tertiary-rgb: 112, 68, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #633ce0; - --ion-color-tertiary-tint: #7e57ff; - - --ion-color-success: #10dc60; - --ion-color-success-rgb: 16, 220, 96; - --ion-color-success-contrast: #ffffff; - --ion-color-success-contrast-rgb: 255, 255, 255; - --ion-color-success-shade: #0ec254; - --ion-color-success-tint: #28e070; - - --ion-color-warning: #ffce00; - --ion-color-warning-rgb: 255, 206, 0; - --ion-color-warning-contrast: #ffffff; - --ion-color-warning-contrast-rgb: 255, 255, 255; - --ion-color-warning-shade: #e0b500; - --ion-color-warning-tint: #ffd31a; - - --ion-color-danger: #f04141; - --ion-color-danger-rgb: 245, 61, 61; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #d33939; - --ion-color-danger-tint: #f25454; - - --ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; - - --ion-color-medium: #989aa2; - --ion-color-medium-rgb: 152, 154, 162; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255, 255, 255; - --ion-color-medium-shade: #86888f; - --ion-color-medium-tint: #a2a4ab; - - --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246, 248, 252; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; -} -``` +To customize the look and feel of the components, Ionic has CSS variables you can override to provide a theme for your components. Set these in your main CSS file. You can find the colors defined in `src/theme/variables.scss`. For more info on theming your Ionic app, see the guide [here](/docs/theming/themes). From 31b69a6bd6656efede2937d9867630ba4800029f Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 9 Jan 2024 13:06:30 -0800 Subject: [PATCH 08/11] feat(color-contrast): requested changes --- docs/theming/advanced.md | 4 ++-- .../page/theming/ColorAccordion/styles.module.css | 10 +++++----- static/code/stackblitz/v7/react/variables.css | 2 +- versioned_docs/version-v7/theming/advanced.md | 4 ++-- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/theming/advanced.md b/docs/theming/advanced.md index c001c58cb1c..a0aad500796 100644 --- a/docs/theming/advanced.md +++ b/docs/theming/advanced.md @@ -169,8 +169,8 @@ After running through the Sass compiler, the colors will have the following valu | Variable | Value | | ------------------- | ---------------------------------------------- | | `$background` | #0054e9 | -| `$background-shade` | #3171e0 | -| `$background-tint` | #4c8dff | +| `$background-shade` | #004acd | +| `$background-tint` | #1a65eb | | `$text` | #444444 | | `$text-darker` | #1e1e1e | | `$text-lighter` | #6a6a6a | diff --git a/src/components/page/theming/ColorAccordion/styles.module.css b/src/components/page/theming/ColorAccordion/styles.module.css index db480f2e002..81fcc35fe42 100755 --- a/src/components/page/theming/ColorAccordion/styles.module.css +++ b/src/components/page/theming/ColorAccordion/styles.module.css @@ -25,12 +25,12 @@ --ion-color-secondary-tint: #1a73b3; /** tertiary **/ - --ion-color-tertiary: #5260ff; - --ion-color-tertiary-rgb: 82, 96, 255; + --ion-color-tertiary: #6030ff; + --ion-color-tertiary-rgb: 96,48,255; --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #4854e0; - --ion-color-tertiary-tint: #6370ff; + --ion-color-tertiary-contrast-rgb: 255,255,255; + --ion-color-tertiary-shade: #542ae0; + --ion-color-tertiary-tint: #7045ff; /** success **/ --ion-color-success: #2dd55b; diff --git a/static/code/stackblitz/v7/react/variables.css b/static/code/stackblitz/v7/react/variables.css index f765fc0c140..5704dd615e5 100644 --- a/static/code/stackblitz/v7/react/variables.css +++ b/static/code/stackblitz/v7/react/variables.css @@ -9,7 +9,7 @@ http://ionicframework.com/docs/theming/ */ --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255, 255, 255; --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-tint: #1a65eb; /** secondary **/ --ion-color-secondary: #0163aa; diff --git a/versioned_docs/version-v7/theming/advanced.md b/versioned_docs/version-v7/theming/advanced.md index c001c58cb1c..a0aad500796 100644 --- a/versioned_docs/version-v7/theming/advanced.md +++ b/versioned_docs/version-v7/theming/advanced.md @@ -169,8 +169,8 @@ After running through the Sass compiler, the colors will have the following valu | Variable | Value | | ------------------- | ---------------------------------------------- | | `$background` | #0054e9 | -| `$background-shade` | #3171e0 | -| `$background-tint` | #4c8dff | +| `$background-shade` | #004acd | +| `$background-tint` | #1a65eb | | `$text` | #444444 | | `$text-darker` | #1e1e1e | | `$text-lighter` | #6a6a6a | From 455fe952ce79e1956a908dba8b30b2be3a7dd80a Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 9 Jan 2024 13:18:50 -0800 Subject: [PATCH 09/11] feat(color-contrast): revert stackblitz --- static/code/stackblitz/v7/html/variables.css | 92 +++++++++---------- static/code/stackblitz/v7/react/variables.css | 72 +++++++-------- static/code/stackblitz/v7/vue/variables.css | 72 +++++++-------- .../code/stackblitz/v8/angular/variables.css | 72 +++++++-------- static/code/stackblitz/v8/html/variables.css | 72 +++++++-------- static/code/stackblitz/v8/react/variables.css | 72 +++++++-------- static/code/stackblitz/v8/vue/variables.css | 72 +++++++-------- ...onic-react-to-an-existing-react-project.md | 69 +++++++++++++- 8 files changed, 330 insertions(+), 263 deletions(-) diff --git a/static/code/stackblitz/v7/html/variables.css b/static/code/stackblitz/v7/html/variables.css index 848dbf377c2..a44fcdd01d7 100644 --- a/static/code/stackblitz/v7/html/variables.css +++ b/static/code/stackblitz/v7/html/variables.css @@ -4,36 +4,36 @@ http://ionicframework.com/docs/theming/ */ /** Ionic CSS Variables **/ :root { /** primary **/ - --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; + --ion-color-primary: #3880ff; + --ion-color-primary-rgb: 56, 128, 255; --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-shade: #3171e0; + --ion-color-primary-tint: #4c8dff; /** secondary **/ - --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; + --ion-color-secondary: #3dc2ff; + --ion-color-secondary-rgb: 61, 194, 255; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #36abe0; + --ion-color-secondary-tint: #50c8ff; /** tertiary **/ - --ion-color-tertiary: #6030ff; - --ion-color-tertiary-rgb: 96, 48, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #542ae0; - --ion-color-tertiary-tint: #7045ff; + --ion-color-tertiary: #5260ff; + --ion-color-tertiary-rgb: 82, 96, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #4854e0; + --ion-color-tertiary-tint: #6370ff; /** success **/ - --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; + --ion-color-success: #2dd36f; + --ion-color-success-rgb: 45, 211, 111; + --ion-color-success-contrast: #ffffff; + --ion-color-success-contrast-rgb: 255, 255, 255; + --ion-color-success-shade: #28ba62; + --ion-color-success-tint: #42d77d; /** warning **/ --ion-color-warning: #ffc409; @@ -44,36 +44,36 @@ http://ionicframework.com/docs/theming/ */ --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; + --ion-color-danger: #eb445a; + --ion-color-danger-rgb: 235, 68, 90; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #cf3c4f; + --ion-color-danger-tint: #ed576b; /** dark **/ - -ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; + --ion-color-dark: #222428; + --ion-color-dark-rgb: 34, 36, 40; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #1e2023; + --ion-color-dark-tint: #383a3e; /** medium **/ - --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95,95,95; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255,255,255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; + --ion-color-medium: #92949c; + --ion-color-medium-rgb: 146, 148, 156; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255, 255, 255; + --ion-color-medium-shade: #808289; + --ion-color-medium-tint: #9d9fa6; /** light **/ - --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246, 248, 252; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; + --ion-color-light: #f4f5f8; + --ion-color-light-rgb: 244, 245, 248; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d7d8da; + --ion-color-light-tint: #f5f6f9; } @media (prefers-color-scheme: dark) { diff --git a/static/code/stackblitz/v7/react/variables.css b/static/code/stackblitz/v7/react/variables.css index 5704dd615e5..a44fcdd01d7 100644 --- a/static/code/stackblitz/v7/react/variables.css +++ b/static/code/stackblitz/v7/react/variables.css @@ -4,36 +4,36 @@ http://ionicframework.com/docs/theming/ */ /** Ionic CSS Variables **/ :root { /** primary **/ - --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; + --ion-color-primary: #3880ff; + --ion-color-primary-rgb: 56, 128, 255; --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-shade: #3171e0; + --ion-color-primary-tint: #4c8dff; /** secondary **/ - --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary: #3dc2ff; + --ion-color-secondary-rgb: 61, 194, 255; --ion-color-secondary-contrast: #ffffff; --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; + --ion-color-secondary-shade: #36abe0; + --ion-color-secondary-tint: #50c8ff; /** tertiary **/ - --ion-color-tertiary: #6030ff; - --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary: #5260ff; + --ion-color-tertiary-rgb: 82, 96, 255; --ion-color-tertiary-contrast: #ffffff; --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #542ae0; - --ion-color-tertiary-tint: #7045ff; + --ion-color-tertiary-shade: #4854e0; + --ion-color-tertiary-tint: #6370ff; /** success **/ - --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; + --ion-color-success: #2dd36f; + --ion-color-success-rgb: 45, 211, 111; + --ion-color-success-contrast: #ffffff; + --ion-color-success-contrast-rgb: 255, 255, 255; + --ion-color-success-shade: #28ba62; + --ion-color-success-tint: #42d77d; /** warning **/ --ion-color-warning: #ffc409; @@ -44,37 +44,37 @@ http://ionicframework.com/docs/theming/ */ --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger: #eb445a; + --ion-color-danger-rgb: 235, 68, 90; --ion-color-danger-contrast: #ffffff; --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; + --ion-color-danger-shade: #cf3c4f; + --ion-color-danger-tint: #ed576b; /** dark **/ - --ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark: #222428; + --ion-color-dark-rgb: 34, 36, 40; --ion-color-dark-contrast: #ffffff; --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; + --ion-color-dark-shade: #1e2023; + --ion-color-dark-tint: #383a3e; /** medium **/ - --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95,95,95; + --ion-color-medium: #92949c; + --ion-color-medium-rgb: 146, 148, 156; --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255,255,255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; + --ion-color-medium-contrast-rgb: 255, 255, 255; + --ion-color-medium-shade: #808289; + --ion-color-medium-tint: #9d9fa6; /** light **/ - --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246, 248, 252; + --ion-color-light: #f4f5f8; + --ion-color-light-rgb: 244, 245, 248; --ion-color-light-contrast: #000000; --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; - } + --ion-color-light-shade: #d7d8da; + --ion-color-light-tint: #f5f6f9; +} @media (prefers-color-scheme: dark) { /* diff --git a/static/code/stackblitz/v7/vue/variables.css b/static/code/stackblitz/v7/vue/variables.css index 50d4371920b..a44fcdd01d7 100644 --- a/static/code/stackblitz/v7/vue/variables.css +++ b/static/code/stackblitz/v7/vue/variables.css @@ -4,36 +4,36 @@ http://ionicframework.com/docs/theming/ */ /** Ionic CSS Variables **/ :root { /** primary **/ - --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; + --ion-color-primary: #3880ff; + --ion-color-primary-rgb: 56, 128, 255; --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-shade: #3171e0; + --ion-color-primary-tint: #4c8dff; /** secondary **/ - --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary: #3dc2ff; + --ion-color-secondary-rgb: 61, 194, 255; --ion-color-secondary-contrast: #ffffff; --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; + --ion-color-secondary-shade: #36abe0; + --ion-color-secondary-tint: #50c8ff; /** tertiary **/ - --ion-color-tertiary: #6030ff; - --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary: #5260ff; + --ion-color-tertiary-rgb: 82, 96, 255; --ion-color-tertiary-contrast: #ffffff; --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #542ae0; - --ion-color-tertiary-tint: #7045ff; + --ion-color-tertiary-shade: #4854e0; + --ion-color-tertiary-tint: #6370ff; /** success **/ - --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; + --ion-color-success: #2dd36f; + --ion-color-success-rgb: 45, 211, 111; + --ion-color-success-contrast: #ffffff; + --ion-color-success-contrast-rgb: 255, 255, 255; + --ion-color-success-shade: #28ba62; + --ion-color-success-tint: #42d77d; /** warning **/ --ion-color-warning: #ffc409; @@ -44,36 +44,36 @@ http://ionicframework.com/docs/theming/ */ --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger: #eb445a; + --ion-color-danger-rgb: 235, 68, 90; --ion-color-danger-contrast: #ffffff; --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; + --ion-color-danger-shade: #cf3c4f; + --ion-color-danger-tint: #ed576b; /** dark **/ - --ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark: #222428; + --ion-color-dark-rgb: 34, 36, 40; --ion-color-dark-contrast: #ffffff; --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; + --ion-color-dark-shade: #1e2023; + --ion-color-dark-tint: #383a3e; /** medium **/ - --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95,95,95; + --ion-color-medium: #92949c; + --ion-color-medium-rgb: 146, 148, 156; --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255,255,255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; + --ion-color-medium-contrast-rgb: 255, 255, 255; + --ion-color-medium-shade: #808289; + --ion-color-medium-tint: #9d9fa6; /** light **/ - --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246,248,252; + --ion-color-light: #f4f5f8; + --ion-color-light-rgb: 244, 245, 248; --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0,0,0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d7d8da; + --ion-color-light-tint: #f5f6f9; } @media (prefers-color-scheme: dark) { diff --git a/static/code/stackblitz/v8/angular/variables.css b/static/code/stackblitz/v8/angular/variables.css index 50d4371920b..a44fcdd01d7 100644 --- a/static/code/stackblitz/v8/angular/variables.css +++ b/static/code/stackblitz/v8/angular/variables.css @@ -4,36 +4,36 @@ http://ionicframework.com/docs/theming/ */ /** Ionic CSS Variables **/ :root { /** primary **/ - --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; + --ion-color-primary: #3880ff; + --ion-color-primary-rgb: 56, 128, 255; --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-shade: #3171e0; + --ion-color-primary-tint: #4c8dff; /** secondary **/ - --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary: #3dc2ff; + --ion-color-secondary-rgb: 61, 194, 255; --ion-color-secondary-contrast: #ffffff; --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; + --ion-color-secondary-shade: #36abe0; + --ion-color-secondary-tint: #50c8ff; /** tertiary **/ - --ion-color-tertiary: #6030ff; - --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary: #5260ff; + --ion-color-tertiary-rgb: 82, 96, 255; --ion-color-tertiary-contrast: #ffffff; --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #542ae0; - --ion-color-tertiary-tint: #7045ff; + --ion-color-tertiary-shade: #4854e0; + --ion-color-tertiary-tint: #6370ff; /** success **/ - --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; + --ion-color-success: #2dd36f; + --ion-color-success-rgb: 45, 211, 111; + --ion-color-success-contrast: #ffffff; + --ion-color-success-contrast-rgb: 255, 255, 255; + --ion-color-success-shade: #28ba62; + --ion-color-success-tint: #42d77d; /** warning **/ --ion-color-warning: #ffc409; @@ -44,36 +44,36 @@ http://ionicframework.com/docs/theming/ */ --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger: #eb445a; + --ion-color-danger-rgb: 235, 68, 90; --ion-color-danger-contrast: #ffffff; --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; + --ion-color-danger-shade: #cf3c4f; + --ion-color-danger-tint: #ed576b; /** dark **/ - --ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark: #222428; + --ion-color-dark-rgb: 34, 36, 40; --ion-color-dark-contrast: #ffffff; --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; + --ion-color-dark-shade: #1e2023; + --ion-color-dark-tint: #383a3e; /** medium **/ - --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95,95,95; + --ion-color-medium: #92949c; + --ion-color-medium-rgb: 146, 148, 156; --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255,255,255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; + --ion-color-medium-contrast-rgb: 255, 255, 255; + --ion-color-medium-shade: #808289; + --ion-color-medium-tint: #9d9fa6; /** light **/ - --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246,248,252; + --ion-color-light: #f4f5f8; + --ion-color-light-rgb: 244, 245, 248; --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0,0,0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d7d8da; + --ion-color-light-tint: #f5f6f9; } @media (prefers-color-scheme: dark) { diff --git a/static/code/stackblitz/v8/html/variables.css b/static/code/stackblitz/v8/html/variables.css index 50d4371920b..a44fcdd01d7 100644 --- a/static/code/stackblitz/v8/html/variables.css +++ b/static/code/stackblitz/v8/html/variables.css @@ -4,36 +4,36 @@ http://ionicframework.com/docs/theming/ */ /** Ionic CSS Variables **/ :root { /** primary **/ - --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; + --ion-color-primary: #3880ff; + --ion-color-primary-rgb: 56, 128, 255; --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-shade: #3171e0; + --ion-color-primary-tint: #4c8dff; /** secondary **/ - --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary: #3dc2ff; + --ion-color-secondary-rgb: 61, 194, 255; --ion-color-secondary-contrast: #ffffff; --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; + --ion-color-secondary-shade: #36abe0; + --ion-color-secondary-tint: #50c8ff; /** tertiary **/ - --ion-color-tertiary: #6030ff; - --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary: #5260ff; + --ion-color-tertiary-rgb: 82, 96, 255; --ion-color-tertiary-contrast: #ffffff; --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #542ae0; - --ion-color-tertiary-tint: #7045ff; + --ion-color-tertiary-shade: #4854e0; + --ion-color-tertiary-tint: #6370ff; /** success **/ - --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; + --ion-color-success: #2dd36f; + --ion-color-success-rgb: 45, 211, 111; + --ion-color-success-contrast: #ffffff; + --ion-color-success-contrast-rgb: 255, 255, 255; + --ion-color-success-shade: #28ba62; + --ion-color-success-tint: #42d77d; /** warning **/ --ion-color-warning: #ffc409; @@ -44,36 +44,36 @@ http://ionicframework.com/docs/theming/ */ --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger: #eb445a; + --ion-color-danger-rgb: 235, 68, 90; --ion-color-danger-contrast: #ffffff; --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; + --ion-color-danger-shade: #cf3c4f; + --ion-color-danger-tint: #ed576b; /** dark **/ - --ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark: #222428; + --ion-color-dark-rgb: 34, 36, 40; --ion-color-dark-contrast: #ffffff; --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; + --ion-color-dark-shade: #1e2023; + --ion-color-dark-tint: #383a3e; /** medium **/ - --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95,95,95; + --ion-color-medium: #92949c; + --ion-color-medium-rgb: 146, 148, 156; --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255,255,255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; + --ion-color-medium-contrast-rgb: 255, 255, 255; + --ion-color-medium-shade: #808289; + --ion-color-medium-tint: #9d9fa6; /** light **/ - --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246,248,252; + --ion-color-light: #f4f5f8; + --ion-color-light-rgb: 244, 245, 248; --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0,0,0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d7d8da; + --ion-color-light-tint: #f5f6f9; } @media (prefers-color-scheme: dark) { diff --git a/static/code/stackblitz/v8/react/variables.css b/static/code/stackblitz/v8/react/variables.css index 50d4371920b..a44fcdd01d7 100644 --- a/static/code/stackblitz/v8/react/variables.css +++ b/static/code/stackblitz/v8/react/variables.css @@ -4,36 +4,36 @@ http://ionicframework.com/docs/theming/ */ /** Ionic CSS Variables **/ :root { /** primary **/ - --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; + --ion-color-primary: #3880ff; + --ion-color-primary-rgb: 56, 128, 255; --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-shade: #3171e0; + --ion-color-primary-tint: #4c8dff; /** secondary **/ - --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary: #3dc2ff; + --ion-color-secondary-rgb: 61, 194, 255; --ion-color-secondary-contrast: #ffffff; --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; + --ion-color-secondary-shade: #36abe0; + --ion-color-secondary-tint: #50c8ff; /** tertiary **/ - --ion-color-tertiary: #6030ff; - --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary: #5260ff; + --ion-color-tertiary-rgb: 82, 96, 255; --ion-color-tertiary-contrast: #ffffff; --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #542ae0; - --ion-color-tertiary-tint: #7045ff; + --ion-color-tertiary-shade: #4854e0; + --ion-color-tertiary-tint: #6370ff; /** success **/ - --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; + --ion-color-success: #2dd36f; + --ion-color-success-rgb: 45, 211, 111; + --ion-color-success-contrast: #ffffff; + --ion-color-success-contrast-rgb: 255, 255, 255; + --ion-color-success-shade: #28ba62; + --ion-color-success-tint: #42d77d; /** warning **/ --ion-color-warning: #ffc409; @@ -44,36 +44,36 @@ http://ionicframework.com/docs/theming/ */ --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger: #eb445a; + --ion-color-danger-rgb: 235, 68, 90; --ion-color-danger-contrast: #ffffff; --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; + --ion-color-danger-shade: #cf3c4f; + --ion-color-danger-tint: #ed576b; /** dark **/ - --ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark: #222428; + --ion-color-dark-rgb: 34, 36, 40; --ion-color-dark-contrast: #ffffff; --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; + --ion-color-dark-shade: #1e2023; + --ion-color-dark-tint: #383a3e; /** medium **/ - --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95,95,95; + --ion-color-medium: #92949c; + --ion-color-medium-rgb: 146, 148, 156; --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255,255,255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; + --ion-color-medium-contrast-rgb: 255, 255, 255; + --ion-color-medium-shade: #808289; + --ion-color-medium-tint: #9d9fa6; /** light **/ - --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246,248,252; + --ion-color-light: #f4f5f8; + --ion-color-light-rgb: 244, 245, 248; --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0,0,0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d7d8da; + --ion-color-light-tint: #f5f6f9; } @media (prefers-color-scheme: dark) { diff --git a/static/code/stackblitz/v8/vue/variables.css b/static/code/stackblitz/v8/vue/variables.css index 50d4371920b..a44fcdd01d7 100644 --- a/static/code/stackblitz/v8/vue/variables.css +++ b/static/code/stackblitz/v8/vue/variables.css @@ -4,36 +4,36 @@ http://ionicframework.com/docs/theming/ */ /** Ionic CSS Variables **/ :root { /** primary **/ - --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; + --ion-color-primary: #3880ff; + --ion-color-primary-rgb: 56, 128, 255; --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-shade: #3171e0; + --ion-color-primary-tint: #4c8dff; /** secondary **/ - --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary: #3dc2ff; + --ion-color-secondary-rgb: 61, 194, 255; --ion-color-secondary-contrast: #ffffff; --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; + --ion-color-secondary-shade: #36abe0; + --ion-color-secondary-tint: #50c8ff; /** tertiary **/ - --ion-color-tertiary: #6030ff; - --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary: #5260ff; + --ion-color-tertiary-rgb: 82, 96, 255; --ion-color-tertiary-contrast: #ffffff; --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #542ae0; - --ion-color-tertiary-tint: #7045ff; + --ion-color-tertiary-shade: #4854e0; + --ion-color-tertiary-tint: #6370ff; /** success **/ - --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; + --ion-color-success: #2dd36f; + --ion-color-success-rgb: 45, 211, 111; + --ion-color-success-contrast: #ffffff; + --ion-color-success-contrast-rgb: 255, 255, 255; + --ion-color-success-shade: #28ba62; + --ion-color-success-tint: #42d77d; /** warning **/ --ion-color-warning: #ffc409; @@ -44,36 +44,36 @@ http://ionicframework.com/docs/theming/ */ --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger: #eb445a; + --ion-color-danger-rgb: 235, 68, 90; --ion-color-danger-contrast: #ffffff; --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; + --ion-color-danger-shade: #cf3c4f; + --ion-color-danger-tint: #ed576b; /** dark **/ - --ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark: #222428; + --ion-color-dark-rgb: 34, 36, 40; --ion-color-dark-contrast: #ffffff; --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; + --ion-color-dark-shade: #1e2023; + --ion-color-dark-tint: #383a3e; /** medium **/ - --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95,95,95; + --ion-color-medium: #92949c; + --ion-color-medium-rgb: 146, 148, 156; --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255,255,255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; + --ion-color-medium-contrast-rgb: 255, 255, 255; + --ion-color-medium-shade: #808289; + --ion-color-medium-tint: #9d9fa6; /** light **/ - --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246,248,252; + --ion-color-light: #f4f5f8; + --ion-color-light-rgb: 244, 245, 248; --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0,0,0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d7d8da; + --ion-color-light-tint: #f5f6f9; } @media (prefers-color-scheme: dark) { diff --git a/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md b/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md index 976912d749b..94c253f3bed 100644 --- a/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md +++ b/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md @@ -135,7 +135,74 @@ For more information on routing and navigation in Ionic React, see [here](/docs/ ### Customize the Theme -To customize the look and feel of the components, Ionic has CSS variables you can override to provide a theme for your components. Set these in your main CSS file. You can find the colors defined in `src/theme/variables.scss`. +To customize the look and feel of the components, Ionic has CSS variables you can override to provide a theme for your components. Set these in your main CSS file: + +```css title="main.css" +:root { + --ion-color-primary: #3880ff; + --ion-color-primary-rgb: 56, 128, 255; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #3171e0; + --ion-color-primary-tint: #4c8dff; + + --ion-color-secondary: #0cd1e8; + --ion-color-secondary-rgb: 12, 209, 232; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #0bb8cc; + --ion-color-secondary-tint: #24d6ea; + + --ion-color-tertiary: #7044ff; + --ion-color-tertiary-rgb: 112, 68, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #633ce0; + --ion-color-tertiary-tint: #7e57ff; + + --ion-color-success: #10dc60; + --ion-color-success-rgb: 16, 220, 96; + --ion-color-success-contrast: #ffffff; + --ion-color-success-contrast-rgb: 255, 255, 255; + --ion-color-success-shade: #0ec254; + --ion-color-success-tint: #28e070; + + --ion-color-warning: #ffce00; + --ion-color-warning-rgb: 255, 206, 0; + --ion-color-warning-contrast: #ffffff; + --ion-color-warning-contrast-rgb: 255, 255, 255; + --ion-color-warning-shade: #e0b500; + --ion-color-warning-tint: #ffd31a; + + --ion-color-danger: #f04141; + --ion-color-danger-rgb: 245, 61, 61; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #d33939; + --ion-color-danger-tint: #f25454; + + --ion-color-dark: #222428; + --ion-color-dark-rgb: 34, 34, 34; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #1e2023; + --ion-color-dark-tint: #383a3e; + + --ion-color-medium: #989aa2; + --ion-color-medium-rgb: 152, 154, 162; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255, 255, 255; + --ion-color-medium-shade: #86888f; + --ion-color-medium-tint: #a2a4ab; + + --ion-color-light: #f4f5f8; + --ion-color-light-rgb: 244, 244, 244; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d7d8da; + --ion-color-light-tint: #f5f6f9; +} +``` For more info on theming your Ionic app, see the guide [here](/docs/theming/themes). From c303b69d66aa81045daf1657627209467e87dc97 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 9 Jan 2024 13:20:32 -0800 Subject: [PATCH 10/11] feat(color-constrast): revert last of stackblitz --- .../code/stackblitz/v7/angular/variables.css | 70 +++++++++---------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/static/code/stackblitz/v7/angular/variables.css b/static/code/stackblitz/v7/angular/variables.css index 820711d7a5f..a44fcdd01d7 100644 --- a/static/code/stackblitz/v7/angular/variables.css +++ b/static/code/stackblitz/v7/angular/variables.css @@ -4,36 +4,36 @@ http://ionicframework.com/docs/theming/ */ /** Ionic CSS Variables **/ :root { /** primary **/ - --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; + --ion-color-primary: #3880ff; + --ion-color-primary-rgb: 56, 128, 255; --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; + --ion-color-primary-shade: #3171e0; + --ion-color-primary-tint: #4c8dff; /** secondary **/ - --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; + --ion-color-secondary: #3dc2ff; + --ion-color-secondary-rgb: 61, 194, 255; --ion-color-secondary-contrast: #ffffff; --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; + --ion-color-secondary-shade: #36abe0; + --ion-color-secondary-tint: #50c8ff; /** tertiary **/ - --ion-color-tertiary: #6030ff; - --ion-color-tertiary-rgb: 96, 48, 255; + --ion-color-tertiary: #5260ff; + --ion-color-tertiary-rgb: 82, 96, 255; --ion-color-tertiary-contrast: #ffffff; --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #542ae0; - --ion-color-tertiary-tint: #7045ff; + --ion-color-tertiary-shade: #4854e0; + --ion-color-tertiary-tint: #6370ff; /** success **/ - --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; + --ion-color-success: #2dd36f; + --ion-color-success-rgb: 45, 211, 111; + --ion-color-success-contrast: #ffffff; + --ion-color-success-contrast-rgb: 255, 255, 255; + --ion-color-success-shade: #28ba62; + --ion-color-success-tint: #42d77d; /** warning **/ --ion-color-warning: #ffc409; @@ -44,36 +44,36 @@ http://ionicframework.com/docs/theming/ */ --ion-color-warning-tint: #ffca22; /** danger **/ - --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; + --ion-color-danger: #eb445a; + --ion-color-danger-rgb: 235, 68, 90; --ion-color-danger-contrast: #ffffff; --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; + --ion-color-danger-shade: #cf3c4f; + --ion-color-danger-tint: #ed576b; /** dark **/ - -ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; + --ion-color-dark: #222428; + --ion-color-dark-rgb: 34, 36, 40; --ion-color-dark-contrast: #ffffff; --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; + --ion-color-dark-shade: #1e2023; + --ion-color-dark-tint: #383a3e; /** medium **/ - --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95,95,95; + --ion-color-medium: #92949c; + --ion-color-medium-rgb: 146, 148, 156; --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255,255,255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; + --ion-color-medium-contrast-rgb: 255, 255, 255; + --ion-color-medium-shade: #808289; + --ion-color-medium-tint: #9d9fa6; /** light **/ - --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246, 248, 252; + --ion-color-light: #f4f5f8; + --ion-color-light-rgb: 244, 245, 248; --ion-color-light-contrast: #000000; --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; + --ion-color-light-shade: #d7d8da; + --ion-color-light-tint: #f5f6f9; } @media (prefers-color-scheme: dark) { From d03c4071ace91f7ea0fdd759f1aee20a34a3e0b4 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 9 Jan 2024 15:00:40 -0800 Subject: [PATCH 11/11] feat(color-constrast): update text --- ...onic-react-to-an-existing-react-project.md | 2 +- ...onic-react-to-an-existing-react-project.md | 69 +------------------ 2 files changed, 2 insertions(+), 69 deletions(-) diff --git a/docs/react/adding-ionic-react-to-an-existing-react-project.md b/docs/react/adding-ionic-react-to-an-existing-react-project.md index 976912d749b..20bf7b3fcb7 100644 --- a/docs/react/adding-ionic-react-to-an-existing-react-project.md +++ b/docs/react/adding-ionic-react-to-an-existing-react-project.md @@ -135,7 +135,7 @@ For more information on routing and navigation in Ionic React, see [here](/docs/ ### Customize the Theme -To customize the look and feel of the components, Ionic has CSS variables you can override to provide a theme for your components. Set these in your main CSS file. You can find the colors defined in `src/theme/variables.scss`. +To customize the look and feel of the components, Ionic has CSS variables you can [override](https://ionicframework.com/docs/theming/colors#modifying-colors) to provide a theme for your components. Set these in your main CSS file. For more info on theming your Ionic app, see the guide [here](/docs/theming/themes). diff --git a/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md b/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md index 94c253f3bed..20bf7b3fcb7 100644 --- a/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md +++ b/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md @@ -135,74 +135,7 @@ For more information on routing and navigation in Ionic React, see [here](/docs/ ### Customize the Theme -To customize the look and feel of the components, Ionic has CSS variables you can override to provide a theme for your components. Set these in your main CSS file: - -```css title="main.css" -:root { - --ion-color-primary: #3880ff; - --ion-color-primary-rgb: 56, 128, 255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3171e0; - --ion-color-primary-tint: #4c8dff; - - --ion-color-secondary: #0cd1e8; - --ion-color-secondary-rgb: 12, 209, 232; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #0bb8cc; - --ion-color-secondary-tint: #24d6ea; - - --ion-color-tertiary: #7044ff; - --ion-color-tertiary-rgb: 112, 68, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #633ce0; - --ion-color-tertiary-tint: #7e57ff; - - --ion-color-success: #10dc60; - --ion-color-success-rgb: 16, 220, 96; - --ion-color-success-contrast: #ffffff; - --ion-color-success-contrast-rgb: 255, 255, 255; - --ion-color-success-shade: #0ec254; - --ion-color-success-tint: #28e070; - - --ion-color-warning: #ffce00; - --ion-color-warning-rgb: 255, 206, 0; - --ion-color-warning-contrast: #ffffff; - --ion-color-warning-contrast-rgb: 255, 255, 255; - --ion-color-warning-shade: #e0b500; - --ion-color-warning-tint: #ffd31a; - - --ion-color-danger: #f04141; - --ion-color-danger-rgb: 245, 61, 61; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #d33939; - --ion-color-danger-tint: #f25454; - - --ion-color-dark: #222428; - --ion-color-dark-rgb: 34, 34, 34; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #1e2023; - --ion-color-dark-tint: #383a3e; - - --ion-color-medium: #989aa2; - --ion-color-medium-rgb: 152, 154, 162; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255, 255, 255; - --ion-color-medium-shade: #86888f; - --ion-color-medium-tint: #a2a4ab; - - --ion-color-light: #f4f5f8; - --ion-color-light-rgb: 244, 244, 244; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d7d8da; - --ion-color-light-tint: #f5f6f9; -} -``` +To customize the look and feel of the components, Ionic has CSS variables you can [override](https://ionicframework.com/docs/theming/colors#modifying-colors) to provide a theme for your components. Set these in your main CSS file. For more info on theming your Ionic app, see the guide [here](/docs/theming/themes).