Skip to content

Commit

Permalink
fix: increase color contrast to 4.5:1 for accessibility
Browse files Browse the repository at this point in the history
PiperOrigin-RevId: 576993525
  • Loading branch information
mcreinhard authored and copybara-github committed Oct 26, 2023
1 parent feaf58f commit ec6265d
Show file tree
Hide file tree
Showing 9 changed files with 9 additions and 9 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ Global theming options let you consistently customize the color and typography f
| `--gmpx-color-surface` | `#fff` | Surface theme color, used as a background. |
| `--gmpx-color-on-surface` | `#212121` | Color used for text and other elements placed on top of the surface color. |
| `--gmpx-color-on-surface-variant` | `#757575` | Color used for supporting metadata and other elements placed on top of the surface color. |
| `--gmpx-color-primary` | `#1e88e5` | Primary theme color used for interactive text and elements, like buttons and icons. Also used to highlight an active or selected state like in a focused text field’s border. |
| `--gmpx-color-primary` | `#1976d2` | Primary theme color used for interactive text and elements, like buttons and icons. Also used to highlight an active or selected state like in a focused text field’s border. |
| `--gmpx-color-on-primary` | `#fff` | Color used for text or icons on top of a `--gmpx-color-primary` background. |
| `--gmpx-font-family-base` | `'Google Sans Text', sans-serif` | Typeface for body text, captions, and labels. |
| `--gmpx-font-family-headings` | `'Google Sans Text', sans-serif` | Typeface for headings. |
Expand Down
2 changes: 1 addition & 1 deletion build/make_docs.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const CSS_CUSTOM_PROPERTY_DEFAULTS = {
'--gmpx-color-surface': '#fff',
'--gmpx-color-on-surface': '#212121',
'--gmpx-color-on-surface-variant': '#757575',
'--gmpx-color-primary': '#1e88e5',
'--gmpx-color-primary': '#1976d2',
'--gmpx-color-on-primary': '#fff',
'--gmpx-font-family-base': '\'Google Sans Text\', sans-serif',
'--gmpx-font-family-headings': '--gmpx-font-family-base',
Expand Down
2 changes: 1 addition & 1 deletion doc_src/README.footer.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Global theming options let you consistently customize the color and typography f
| `--gmpx-color-surface` | `#fff` | Surface theme color, used as a background. |
| `--gmpx-color-on-surface` | `#212121` | Color used for text and other elements placed on top of the surface color. |
| `--gmpx-color-on-surface-variant` | `#757575` | Color used for supporting metadata and other elements placed on top of the surface color. |
| `--gmpx-color-primary` | `#1e88e5` | Primary theme color used for interactive text and elements, like buttons and icons. Also used to highlight an active or selected state like in a focused text field’s border. |
| `--gmpx-color-primary` | `#1976d2` | Primary theme color used for interactive text and elements, like buttons and icons. Also used to highlight an active or selected state like in a focused text field’s border. |
| `--gmpx-color-on-primary` | `#fff` | Color used for text or icons on top of a `--gmpx-color-primary` background. |
| `--gmpx-font-family-base` | `'Google Sans Text', sans-serif` | Typeface for body text, captions, and labels. |
| `--gmpx-font-family-headings` | `'Google Sans Text', sans-serif` | Typeface for headings. |
Expand Down
2 changes: 1 addition & 1 deletion src/base/common_styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {css, CSSResult} from 'lit';
* Primary theme color (e.g. buttons, hyperlinks). Can be modified via
* `--gmpx-color-primary`.
*/
export const GMPX_COLOR_PRIMARY = css`var(--gmpx-color-primary, #1e88e5)`;
export const GMPX_COLOR_PRIMARY = css`var(--gmpx-color-primary, #1976d2)`;

/**
* Surface theme color (e.g. card background). Can be modified via
Expand Down
2 changes: 1 addition & 1 deletion src/icon_button/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ You can use most built-in CSS properties to control the positioning or display o

| Name | Default | Description |
| ----------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------- |
| `--gmpx-color-primary` | `#1e88e5` | Button text and outline color in the `outlined` variant, or background color in `filled` variant. 🌎 |
| `--gmpx-color-primary` | `#1976d2` | Button text and outline color in the `outlined` variant, or background color in `filled` variant. 🌎 |
| `--gmpx-color-on-primary` | `#fff` | Button text color in `filled` variant. 🌎 |
| `--gmpx-font-size-base` | `0.875rem` | Font size for the button. 🌎 |
| `--gmpx-font-family-headings` | `--gmpx-font-family-base` | Font face for the button, except for condensed mode. 🌎 |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ You can use most built-in CSS properties to control the positioning or display o

| Name | Default | Description |
| ----------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------- |
| `--gmpx-color-primary` | `#1e88e5` | Button text and outline color in the `outlined` variant, or background color in `filled` variant. 🌎 |
| `--gmpx-color-primary` | `#1976d2` | Button text and outline color in the `outlined` variant, or background color in `filled` variant. 🌎 |
| `--gmpx-color-on-primary` | `#fff` | Button text color in `filled` variant. 🌎 |
| `--gmpx-font-size-base` | `0.875rem` | Font size for the button. 🌎 |
| `--gmpx-font-family-headings` | `--gmpx-font-family-base` | Font face for the button, except for condensed mode. 🌎 |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export class PlaceOpeningHours extends PlaceDataConsumer {
}
.open {
color: #388e3c;
color: #188038;
}
.icon {
Expand Down
2 changes: 1 addition & 1 deletion src/place_overview/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ You can use most built-in CSS properties to control the positioning or display o
| `--gmpx-color-surface` | `#fff` | Background color. 🌎 |
| `--gmpx-color-on-surface` | `#212121` | Main text color. 🌎 |
| `--gmpx-color-on-surface-variant` | `#757575` | Color of less important text such as captions. 🌎 |
| `--gmpx-color-primary` | `#1e88e5` | Color of buttons and icons. 🌎 |
| `--gmpx-color-primary` | `#1976d2` | Color of buttons and icons. 🌎 |
| `--gmpx-font-family-base` | `'Google Sans Text', sans-serif` | Font family for regular text. 🌎 |
| `--gmpx-font-family-headings` | `--gmpx-font-family-base` | Font family for headings. 🌎 |
| `--gmpx-font-size-base` | `0.875rem` | Text size, sets scale for the component. 🌎 |
Expand Down
2 changes: 1 addition & 1 deletion src/place_picker/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ You can use most built-in CSS properties to control the positioning or display o
| ------------------------- | -------------------------------- | ------------------------------------------ |
| `--gmpx-color-surface` | `#fff` | Background color of the input. 🌎 |
| `--gmpx-color-on-surface` | `#212121` | Main text color. 🌎 |
| `--gmpx-color-primary` | `#1e88e5` | Color of the input focus ring. 🌎 |
| `--gmpx-color-primary` | `#1976d2` | Color of the input focus ring. 🌎 |
| `--gmpx-font-family-base` | `'Google Sans Text', sans-serif` | Font family. 🌎 |
| `--gmpx-font-size-base` | `0.875rem` | Font size, used to scale the component. 🌎 |

Expand Down

0 comments on commit ec6265d

Please sign in to comment.