diff --git a/src/core/plugins/icons/components/arrow-down.jsx b/src/core/plugins/icons/components/arrow-down.jsx index 46011d2bfd7..71f85c5462a 100644 --- a/src/core/plugins/icons/components/arrow-down.jsx +++ b/src/core/plugins/icons/components/arrow-down.jsx @@ -15,7 +15,10 @@ const ArrowDown = ({ className = null, width = 20, height = 20, ...rest }) => ( focusable="false" {...rest} > - + ) diff --git a/src/core/plugins/icons/components/arrow-up.jsx b/src/core/plugins/icons/components/arrow-up.jsx index 410064acd50..40a15da16f3 100644 --- a/src/core/plugins/icons/components/arrow-up.jsx +++ b/src/core/plugins/icons/components/arrow-up.jsx @@ -15,7 +15,10 @@ const ArrowUp = ({ className = null, width = 20, height = 20, ...rest }) => ( focusable="false" {...rest} > - + ) diff --git a/src/core/plugins/icons/components/arrow.jsx b/src/core/plugins/icons/components/arrow.jsx index 07a6b7525fd..f0f5034c9f5 100644 --- a/src/core/plugins/icons/components/arrow.jsx +++ b/src/core/plugins/icons/components/arrow.jsx @@ -15,7 +15,10 @@ const Arrow = ({ className = null, width = 20, height = 20, ...rest }) => ( focusable="false" {...rest} > - + ) diff --git a/src/core/plugins/icons/components/close.jsx b/src/core/plugins/icons/components/close.jsx index 682d9f0133b..1e94d76accc 100644 --- a/src/core/plugins/icons/components/close.jsx +++ b/src/core/plugins/icons/components/close.jsx @@ -15,7 +15,10 @@ const Close = ({ className = null, width = 20, height = 20, ...rest }) => ( focusable="false" {...rest} > - + ) diff --git a/src/core/plugins/icons/components/lock.jsx b/src/core/plugins/icons/components/lock.jsx index e15b648410d..7a7c7568019 100644 --- a/src/core/plugins/icons/components/lock.jsx +++ b/src/core/plugins/icons/components/lock.jsx @@ -15,7 +15,10 @@ const Lock = ({ className = null, width = 20, height = 20, ...rest }) => ( focusable="false" {...rest} > - + ) diff --git a/src/core/plugins/icons/components/unlock.jsx b/src/core/plugins/icons/components/unlock.jsx index e320c86af8d..1dc60da9c13 100644 --- a/src/core/plugins/icons/components/unlock.jsx +++ b/src/core/plugins/icons/components/unlock.jsx @@ -15,7 +15,10 @@ const Unlock = ({ className = null, width = 20, height = 20, ...rest }) => ( focusable="false" {...rest} > - + ) diff --git a/src/core/plugins/json-schema-2020-12/components/icons/ChevronRight.jsx b/src/core/plugins/json-schema-2020-12/components/icons/ChevronRight.jsx index e91c90faab9..8906ac9a1a6 100644 --- a/src/core/plugins/json-schema-2020-12/components/icons/ChevronRight.jsx +++ b/src/core/plugins/json-schema-2020-12/components/icons/ChevronRight.jsx @@ -10,7 +10,10 @@ const ChevronRight = () => ( height="24" viewBox="0 0 24 24" > - + ) diff --git a/src/style/_buttons.scss b/src/style/_buttons.scss index 7806d17ee1d..23f35eddbc3 100644 --- a/src/style/_buttons.scss +++ b/src/style/_buttons.scss @@ -54,7 +54,7 @@ } svg { - fill: $btn-authorize-svg-fill-color; + color: $btn-authorize-svg-fill-color; } } @@ -88,6 +88,7 @@ border: none; background: none; + color: $black; .locked { opacity: 1; @@ -116,6 +117,7 @@ .expand-operation { border: none; background: none; + color: $black; svg { width: 20px; @@ -128,14 +130,14 @@ &:hover { svg { - fill: $expand-methods-svg-fill-color-hover; + color: $expand-methods-svg-fill-color-hover; } } svg { transition: all 0.3s; - fill: $expand-methods-svg-fill-color; + color: $expand-methods-svg-fill-color; } } @@ -167,6 +169,15 @@ button { height: 25px; background: url("data:image/svg+xml, ") center center no-repeat; + + @media (forced-colors: active) { + forced-color-adjust: none; + background-color: ButtonText; + background-image: none; + mask-image: url("data:image/svg+xml, "); + mask-position: center center; + mask-repeat: no-repeat; + } } } @@ -178,6 +189,7 @@ button { border: none; text-align: center; background: none; + color: $black; } // overrides for smaller copy button for curl command @@ -197,3 +209,22 @@ button { height: 26px; position: unset; } + +// Render icon buttons in HCM system colors regardless of author fill cascade. +@media (forced-colors: active) { + .authorization__btn svg path, + .expand-operation svg path, + .opblock-control-arrow svg path, + .models-control svg path, + .close-modal svg path, + .btn.authorize svg path, + .json-schema-2020-12-accordion svg path { + forced-color-adjust: none; + fill: ButtonText; + } + + // Reset opacity dimming so HCM system-color contrast isn't composited away. + .authorization__btn .unlocked { + opacity: 1; + } +} diff --git a/src/style/_dark-mode.scss b/src/style/_dark-mode.scss index 17dd7000974..ea79fbc61a2 100644 --- a/src/style/_dark-mode.scss +++ b/src/style/_dark-mode.scss @@ -94,7 +94,7 @@ html.dark-mode { .authorization__btn svg, .expand-operation svg, .opblock-control-arrow svg { - fill: $neutral-40; + color: $neutral-40; opacity: 1; } @@ -217,7 +217,7 @@ html.dark-mode { border-color: $neutral-80; .close-modal svg { - fill: $neutral-20; + color: $neutral-20; } } @@ -260,6 +260,15 @@ html.dark-mode { background: $neutral-80 url('data:image/svg+xml, ') center center no-repeat; + + @media (forced-colors: active) { + forced-color-adjust: none; + background-color: ButtonText; + background-image: none; + mask-image: url('data:image/svg+xml, '); + mask-position: center center; + mask-repeat: no-repeat; + } } } } @@ -294,7 +303,7 @@ html.dark-mode { color: $authorize-button; svg { - fill: $authorize-button; + color: $authorize-button; } } } @@ -356,6 +365,15 @@ html.dark-mode { button { background: url("data:image/svg+xml, ") center center no-repeat; + + @media (forced-colors: active) { + forced-color-adjust: none; + background-color: ButtonText; + background-image: none; + mask-image: url("data:image/svg+xml, "); + mask-position: center center; + mask-repeat: no-repeat; + } } } @@ -569,6 +587,16 @@ html.dark-mode { background: url('data:image/svg+xml, ') center no-repeat; background-size: 100%; + + @media (forced-colors: active) { + forced-color-adjust: none; + background-color: CanvasText; + background-image: none; + mask-image: url('data:image/svg+xml, '); + mask-position: center; + mask-repeat: no-repeat; + mask-size: 100%; + } } } @@ -618,7 +646,7 @@ html.dark-mode { background: $neutral-95; svg { - fill: $neutral-20; + color: $neutral-20; } } @@ -735,7 +763,7 @@ html.dark-mode { } svg { - fill: $neutral-40; + color: $neutral-40; } } } diff --git a/src/style/_form.scss b/src/style/_form.scss index 047ac5e83e8..db03832e981 100644 --- a/src/style/_form.scss +++ b/src/style/_form.scss @@ -209,6 +209,15 @@ textarea { background: $form-checkbox-background-color url('data:image/svg+xml, ') center center no-repeat; + + @media (forced-colors: active) { + forced-color-adjust: none; + background-color: ButtonText; + background-image: none; + mask-image: url('data:image/svg+xml, '); + mask-position: center center; + mask-repeat: no-repeat; + } } } } diff --git a/src/style/_models.scss b/src/style/_models.scss index 7a3b3a12324..a1547164a24 100644 --- a/src/style/_models.scss +++ b/src/style/_models.scss @@ -47,6 +47,17 @@ background: url('data:image/svg+xml, ') center no-repeat; background-size: 100%; + + // HCM: substitute data-URL chevron with a mask + system color. + @media (forced-colors: active) { + forced-color-adjust: none; + background-color: CanvasText; + background-image: none; + mask-image: url('data:image/svg+xml, '); + mask-position: center; + mask-repeat: no-repeat; + mask-size: 100%; + } } }