@workday/canvas-kit-react 16.0.0-alpha.0478-next.0 → 16.0.0-alpha.0479-next.0

package/pagination/lib/Pagination/PageButton.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import {BaseButton, buttonStencil} from '@workday/canvas-kit-react/button';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 import {PaginationContext} from './usePaginationModel';
@@ -16,13 +16,21 @@ export const paginationPageButtonStencil = createStencil({
     fontWeight: system.fontWeight.normal,
     [buttonStencil.vars.label]: system.color.fg.default,
 
-    '&:hover, &.hover': {
-      [buttonStencil.vars.background]: system.legacy.color.surface.alt.default,
+    '&:focus-visible, &.focus': {
+      [buttonStencil.vars.background]: system.legacy.color.surface.default,
       [buttonStencil.vars.label]: system.color.fg.strong,
+      [buttonStencil.vars.boxShadowInner]: system.legacy.color.focus.inverse,
+      [buttonStencil.vars.boxShadowOuter]: system.legacy.color.brand.focus.primary,
     },
 
-    '&:active, &.active, &:focus-visible, &.focus': {
-      [buttonStencil.vars.label]: system.color.fg.strong,
+    '&:hover, &.hover': {
+      [buttonStencil.vars.background]: system.legacy.color.surface.overlay.hover.default,
+      [buttonStencil.vars.label]: system.color.fg.stronger,
+    },
+
+    '&:active, &.active': {
+      [buttonStencil.vars.background]: system.legacy.color.surface.overlay.pressed.default,
+      [buttonStencil.vars.label]: system.color.fg.stronger,
     },
 
     '&:disabled, &.disabled': {
@@ -37,6 +45,13 @@ export const paginationPageButtonStencil = createStencil({
 
         [buttonStencil.vars.label]: system.color.fg.inverse,
 
+        // for Windows high contrast desktop themes
+        // (same pattern as the aria-pressed rule in buttonStencil. See BaseButton.tsx)
+        '@media (prefers-contrast: more)': {
+          outline: `${px2rem(2)} solid transparent`,
+          outlineOffset: `-${px2rem(1)}`,
+        },
+
         '&:hover, &.hover, &:active, &.active, &:focus-visible, &.focus': {
           [buttonStencil.vars.background]: system.legacy.color.brand.accent.primary,