Skip to content

feat(color-contrast): update light theme to use new colors #3374

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Jan 10, 2024
Merged

feat(color-contrast): update light theme to use new colors #3374

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
760f52a
feat(light-mode): update styles to use new colors
thetaPC Jan 8, 2024
e2f55cb
feat(light-mode): update color generator
thetaPC Jan 8, 2024
7ce3414
feat(light-mode): update primary hex color
thetaPC Jan 8, 2024
56a6e29
feat(light-mode): rest of the hex colors
thetaPC Jan 9, 2024
97efb71
feat(light-mode): remove extra spaces
thetaPC Jan 9, 2024
a77aa10
feat(color-contrast): remove extra spaces
thetaPC Jan 9, 2024
774bbb4
feat(color-contrast): add reference to variables file
thetaPC Jan 9, 2024
31b69a6
feat(color-contrast): requested changes
thetaPC Jan 9, 2024
455fe95
feat(color-contrast): revert stackblitz
thetaPC Jan 9, 2024
c303b69
feat(color-constrast): revert last of stackblitz
thetaPC Jan 9, 2024
d03c407
feat(color-constrast): update text
thetaPC Jan 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/angular/slides.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
69 changes: 1 addition & 68 deletions docs/react/adding-ionic-react-to-an-existing-react-project.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand Down
10 changes: 5 additions & 5 deletions docs/theming/advanced.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#3880ff" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#0054e9" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#eb445a" />
```

Expand Down Expand Up @@ -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%);

Expand All @@ -168,9 +168,9 @@ After running through the Sass compiler, the colors will have the following valu

| Variable | Value |
| ------------------- | ---------------------------------------------- |
| `$background` | <CodeColor color="#3880ff">#3880ff</CodeColor> |
| `$background-shade` | <CodeColor color="#3171e0">#3171e0</CodeColor> |
| `$background-tint` | <CodeColor color="#4c8dff">#4c8dff</CodeColor> |
| `$background` | <CodeColor color="#0054e9">#0054e9</CodeColor> |
| `$background-shade` | <CodeColor color="#004acd">#004acd</CodeColor> |
| `$background-tint` | <CodeColor color="#1a65eb">#1a65eb</CodeColor> |
| `$text` | <CodeColor color="#444444">#444444</CodeColor> |
| `$text-darker` | <CodeColor color="#1e1e1e">#1e1e1e</CodeColor> |
| `$text-lighter` | <CodeColor color="#6a6a6a">#6a6a6a</CodeColor> |
Expand Down
4 changes: 2 additions & 2 deletions src/components/page/reference/ReleaseNotes/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
72 changes: 36 additions & 36 deletions src/components/page/theming/ColorAccordion/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,36 +9,36 @@
list-style-type: none;

/** primary **/
--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;

/** secondary **/
--ion-color-secondary: #3dc2ff;
--ion-color-secondary-rgb: 61, 194, 255;
--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: #36abe0;
--ion-color-secondary-tint: #50c8ff;
--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: #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: #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;
Expand All @@ -49,36 +49,36 @@
--ion-color-warning-tint: #ffca22;

/** danger **/
--ion-color-danger: #eb445a;
--ion-color-danger-rgb: 235, 68, 90;
--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: #cf3c4f;
--ion-color-danger-tint: #ed576b;
--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: #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;

/** medium **/
--ion-color-medium: #92949c;
--ion-color-medium-rgb: 146, 148, 156;
--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: #808289;
--ion-color-medium-tint: #9d9fa6;
--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: #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;
}

.colorSubmenu {
Expand Down
16 changes: 8 additions & 8 deletions src/components/page/theming/ColorGenerator/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
68 changes: 34 additions & 34 deletions src/components/page/theming/LayeredColorsSelect/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
.layeredColorsSelect {
/** primary **/
--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;

/** secondary **/
--ion-color-secondary: #3dc2ff;
--ion-color-secondary-rgb: 61, 194, 255;
--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: #36abe0;
--ion-color-secondary-tint: #50c8ff;
--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: #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-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;
Expand All @@ -40,36 +40,36 @@
--ion-color-warning-tint: #ffca22;

/** danger **/
--ion-color-danger: #eb445a;
--ion-color-danger-rgb: 235, 68, 90;
--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: #cf3c4f;
--ion-color-danger-tint: #ed576b;
--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: #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;

/** medium **/
--ion-color-medium: #92949c;
--ion-color-medium-rgb: 146, 148, 156;
--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: #808289;
--ion-color-medium-tint: #9d9fa6;
--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: #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;
}

.selectRow {
Expand Down
Loading