feat: add CSS theming variables for focused & hover elements

[brandyscarney]

Feature Request

Ionic version: master

Branch created with the beginning of the non-breaking changes: https://github.com/ionic-team/ionic/tree/non-breaking-button-states

Describe the Feature Request Add hover, focused, activated state to missing button components.

The following pull request made some major changes to the way we set hover, activated & focused: https://github.com/ionic-team/ionic/pull/19440

This allows users to customize the button by changing the color once and not having to know the opacity of each state. That change only applied to components with existing hover states due to it being breaking, the following need to be added:

Name	Existing Hover (master)	Updated Hover?	Updated Activated?	Updated Focused?
Alert (Buttons)	:white_large_square:	:white_large_square:	:white_large_square:	:white_large_square:
Card	:white_large_square:	:white_large_square:	:white_large_square:	:white_large_square:
Checkbox	:white_large_square:	:white_large_square:	:white_large_square:	:white_large_square:
Chip	:white_large_square:	:white_large_square:	:white_large_square:	:white_large_square:
Item Option	:white_large_square:	:white_check_mark:	:white_large_square:	:white_large_square:
Picker (Buttons)	:white_large_square:	:white_check_mark:	:white_large_square:	:white_large_square:
Radio	:white_large_square:	:white_large_square:	:white_large_square:	:white_large_square:
Tab Button	:white_large_square:	:white_large_square:	:white_large_square:	:white_check_mark:
Toast (Buttons)	:white_large_square:	:white_large_square:	:white_large_square:	:white_large_square:
Toggle	:white_large_square:	:white_large_square:	:white_large_square:	:white_large_square:

• Alert needs hovers on the buttons and tappable items
• Router link is just an anchor, should it have an underline or follow MD design for clear buttons?
• Buttons (in overlays) should be named --button-background-hover

Activated Components

Components that have --background-activated & --color-activated or --button-background-activated & --button-color-activated for overlays.

• action-sheet (MISSING --button-color-activated)
• button
• fab-button
• item

Hover Components

Components that have --background-hover & --color-hover or --button-background-hover & --button-color-hover for overlays.

• action-sheet
• back-button
• button
• fab-button
• item-option (MISSING --color-hover)
• item
• menu-button
• picker (MISSING --button-color-hover)
• segment-button

Focused Components

Components that have --background-focused & --color-focused or --button-background-focused & --button-color-focused for overlays.

• back-button
• button
• fab-button
• item
• menu-button
• tab-button (MISSING --color-focused)

[fkromer]

Potential workaround until available: https://www.npmjs.com/package/ionic-tooltips

[torgnywalin]

Is this issue still being addressed? Im using card with attribute button="true" and tabbing between cards work as expected. But was not able to give it a focus color in the same way as with ion-item. Default for ion-card seems to be no indication for what card is in focus. (Not even the default outline that I get on plain tags in browser.)

[sjdrew]

Also would like to know when ion-toggle will have focus and work with keyboard? Is seems to be the only control that is missing this as of version 6.3 and so fails any accessibility tests on desktop.

[CL-Ionic-Reshift]

Is this addressed ? there is no hover colour variable

: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: #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-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-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-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-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-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-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-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;

}