From 753956668ac9434056cd20d6277910c96a681a09 Mon Sep 17 00:00:00 2001 From: Michael Reinhard Date: Wed, 25 Oct 2023 16:18:16 -0700 Subject: [PATCH] fix: increase color contrast to 4.5:1 for accessibility PiperOrigin-RevId: 576677395 --- README.md | 2 +- build/make_docs.js | 2 +- doc_src/README.footer.md | 2 +- src/base/common_styles.ts | 2 +- src/icon_button/README.md | 2 +- src/place_building_blocks/place_directions_button/README.md | 2 +- .../place_opening_hours/place_opening_hours.ts | 2 +- src/place_overview/README.md | 2 +- src/place_picker/README.md | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 11dea7e..c0fe2d9 100644 --- a/README.md +++ b/README.md @@ -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. | diff --git a/build/make_docs.js b/build/make_docs.js index 29bd4f0..e4614d4 100644 --- a/build/make_docs.js +++ b/build/make_docs.js @@ -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', diff --git a/doc_src/README.footer.md b/doc_src/README.footer.md index ed6a39c..1301e4c 100644 --- a/doc_src/README.footer.md +++ b/doc_src/README.footer.md @@ -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. | diff --git a/src/base/common_styles.ts b/src/base/common_styles.ts index d640396..f54a4e4 100644 --- a/src/base/common_styles.ts +++ b/src/base/common_styles.ts @@ -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 diff --git a/src/icon_button/README.md b/src/icon_button/README.md index ee9f223..14fa61b 100644 --- a/src/icon_button/README.md +++ b/src/icon_button/README.md @@ -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. ๐ŸŒŽ | diff --git a/src/place_building_blocks/place_directions_button/README.md b/src/place_building_blocks/place_directions_button/README.md index 8482a87..594ca62 100644 --- a/src/place_building_blocks/place_directions_button/README.md +++ b/src/place_building_blocks/place_directions_button/README.md @@ -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. ๐ŸŒŽ | diff --git a/src/place_building_blocks/place_opening_hours/place_opening_hours.ts b/src/place_building_blocks/place_opening_hours/place_opening_hours.ts index 2250622..a8f6e3c 100644 --- a/src/place_building_blocks/place_opening_hours/place_opening_hours.ts +++ b/src/place_building_blocks/place_opening_hours/place_opening_hours.ts @@ -64,7 +64,7 @@ export class PlaceOpeningHours extends PlaceDataConsumer { } .open { - color: #388e3c; + color: #188038; } .icon { diff --git a/src/place_overview/README.md b/src/place_overview/README.md index ecb5428..626ade6 100644 --- a/src/place_overview/README.md +++ b/src/place_overview/README.md @@ -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. ๐ŸŒŽ | diff --git a/src/place_picker/README.md b/src/place_picker/README.md index f2b3551..81fdcfd 100644 --- a/src/place_picker/README.md +++ b/src/place_picker/README.md @@ -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. ๐ŸŒŽ |