Skip to content

Whcm fixes #2620

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
devongovett merged 13 commits into from
Dec 23, 2021
Merged

Whcm fixes #2620

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
a560b5f
fix: add focus outline to accordion in WHCM
jnurthen Nov 12, 2021
10ff0f6
fix: add border around actionbar in WHCM
jnurthen Nov 12, 2021
c95de95
fix: Add GrayText border - disabled avatar in WHCM
jnurthen Nov 12, 2021
e822a07
fix: WHCM fixes for breadcrumbs
jnurthen Nov 12, 2021
4d91aa7
fix: WHCM tooltips
jnurthen Nov 25, 2021
f4a43ac
fix: Add variants for WHCM tooltip
jnurthen Nov 25, 2021
429d7c6
fix: WHCM toast
jnurthen Nov 25, 2021
24f5c37
fix: WHCM tags
jnurthen Nov 25, 2021
5f54deb
fix: WHCM StatusLight
jnurthen Nov 30, 2021
bf5d099
fix: WHCM sidenav
jnurthen Nov 30, 2021
f4aa837
fix: WHCM progressCircle progressBar
jnurthen Nov 30, 2021
a9aa66f
fix: WHCM add dialog border
jnurthen Nov 30, 2021
b6fdc2a
fix: WHCM tabs
jnurthen Dec 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions packages/@adobe/spectrum-css-temp/components/accordion/skin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,3 +62,10 @@ governing permissions and limitations under the License.
}
}
}
@media (forced-colors: active) {
.spectrum-Accordion-itemHeader {
&:focus-ring {
outline: 3px solid CanvasText;
Copy link
Copy Markdown
Collaborator

@majornista majornista Dec 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How is the focus style drawn for .spectrum-Accordion-itemHeader without WHCM? Should this be?:

@media (forced-colors: active) {
  .spectrum-Accordion-itemHeader {
    &:focus-ring {
      &:after  {
        background-color: CanvasText;
      }
    }
  }
}

Copy link
Copy Markdown
Contributor Author

@jnurthen jnurthen Dec 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

without WHCM it is a border at the left hand side. Really too subtle for WHCM. IMO it is not enough which is why I added the outline.

Copy link
Copy Markdown
Member

@LFDanLu LFDanLu Dec 16, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stylistically looks fine to me, perhaps should be a box shadow? cc @snowystinger

Copy link
Copy Markdown
Member

@snowystinger snowystinger Dec 16, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that is typically our preference, i do not remember why at this time though
but if you mix outline and box shadow you can get some odd results

}
}
}
8 changes: 8 additions & 0 deletions packages/@adobe/spectrum-css-temp/components/avatar/skin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,11 @@ governing permissions and limitations under the License.
opacity: var(--spectrum-avatar-small-opacity-disabled);
}
}
@media (forced-colors: active) {
.spectrum-Avatar {
&.is-disabled {
opacity: 1;
border: 2px solid GrayText;
}
}
}
8 changes: 8 additions & 0 deletions packages/@adobe/spectrum-css-temp/components/barloader/skin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,3 +61,11 @@ governing permissions and limitations under the License.
.spectrum-BarLoader-percentage {
color: var(--spectrum-fieldlabel-text-color);
}
@media (forced-colors: active) {
.spectrum-BarLoader-track {
forced-color-adjust: none;
--spectrum-barloader-large-track-fill-color: ButtonText;
--spectrum-barloader-large-track-color: ButtonFace;
border: 1px solid ButtonText;
}
}
34 changes: 34 additions & 0 deletions packages/@adobe/spectrum-css-temp/components/breadcrumb/skin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,3 +72,37 @@ governing permissions and limitations under the License.
}
}
}
@media (forced-colors: active) {
.spectrum-Breadcrumbs-item {
--spectrum-breadcrumb-item-border-color-drop: LinkText;
--spectrum-breadcrumb-item-border-color-key-focus: CanvasText;
--spectrum-breadcrumb-item-text-color-drop: LinkText;
--spectrum-breadcrumb-text-color: LinkText;
--spectrum-breadcrumb-text-color-down: CanvasText;
--spectrum-breadcrumb-text-color-hover: LinkText;
--spectrum-breadcrumb-text-color-key-focus: LinkText;
--spectrum-breadcrumb-ui-icon-color: CanvasText;
--spectrum-label-text-color-disabled: GrayText;
/* Override the selected to be the Standard Text color */
&.is-selected,
&:last-of-type {
color: var(--spectrum-breadcrumb-text-color-down);
.spectrum-Breadcrumbs-itemLink {
&:hover {
color: var(--spectrum-breadcrumb-text-color-down);
}
}
}
/* Make links stay link color when clicked and disabled links remain disabled color */
.spectrum-Breadcrumbs-itemLink {
&:active {
color: var(--spectrum-breadcrumb-text-color);
}
&.is-disabled {
&:active {
color: var(--spectrum-label-text-color-disabled);
}
}
}
}
}
6 changes: 6 additions & 0 deletions packages/@adobe/spectrum-css-temp/components/circleloader/skin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,9 @@ governing permissions and limitations under the License.
border-color: var(--spectrum-loader-circle-medium-over-background-track-fill-color);
}
}

@media (forced-colors: active) {
.spectrum-CircleLoader-fill {
--spectrum-loader-circle-medium-track-fill-color: Highlight;
}
}
5 changes: 5 additions & 0 deletions packages/@adobe/spectrum-css-temp/components/dialog/skin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,8 @@ governing permissions and limitations under the License.
color: var(--spectrum-dialog-warning-icon-color);
}
}
@media (forced-colors: active) {
.spectrum-Dialog {
border: 1px solid transparent;
}
}
20 changes: 20 additions & 0 deletions packages/@adobe/spectrum-css-temp/components/sidenav/skin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,3 +62,23 @@ governing permissions and limitations under the License.
.spectrum-SideNav-heading {
color: var(--spectrum-sidenav-header-text-color);
}

@media (forced-colors: active) {
.spectrum-SideNav-item {
forced-color-adjust: none;
--spectrum-sidenav-item-text-color-selected: HighlightText;
--spectrum-sidenav-item-background-color-selected: Highlight;
--spectrum-sidenav-item-background-color-down: Highlight;
--spectrum-sidenav-item-background-color-disabled: ButtonFace;
--spectrum-sidenav-item-text-color-disabled: GrayText;
--spectrum-sidenav-item-background-color: ButtonFace;
--spectrum-sidenav-item-text-color: ButtonText;
--spectrum-sidenav-item-background-color-hover: ButtonFace;
--spectrum-sidenav-item-text-color-hover: ButtonText;
--spectrum-sidenav-item-background-color-down: ButtonFace;
--spectrum-sidenav-item-background-color-key-focus: ButtonFace;
--spectrum-sidenav-item-text-color-key-focus: ButtonText;
--spectrum-sidenav-item-border-color-key-focus: ButtonText;
--spectrum-sidenav-header-text-color: ButtonText;
}
}
11 changes: 11 additions & 0 deletions packages/@adobe/spectrum-css-temp/components/statuslight/skin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,3 +79,14 @@ governing permissions and limitations under the License.
.spectrum-StatusLight--purple::before {
background-color: var(--spectrum-statuslight-dot-color-label-purple);
}

@media (forced-colors: active) {
.spectrum-StatusLight {
forced-color-adjust: none;
--spectrum-statuslight-text-color-disabled: GrayText;
--spectrum-statuslight-dot-color-disabled: GrayText;
&:before {
border: 1px solid ButtonText;
}
}
}
49 changes: 49 additions & 0 deletions packages/@adobe/spectrum-css-temp/components/tabs/skin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,3 +105,52 @@ governing permissions and limitations under the License.
border-color: var(--spectrum-tabs-focus-ring-color);
}
}

@media (forced-colors: active) {
.spectrum-Tabs {
forced-color-adjust: none;
--spectrum-tabs-focus-ring-color: ButtonText;
--spectrum-tabs-icon-color: ButtonText;
--spectrum-tabs-icon-color-disabled: GrayText;
--spectrum-tabs-icon-color-hover: ButtonText;
--spectrum-tabs-icon-color-key-focus: ButtonText;
--spectrum-tabs-icon-color-selected: HighlightText;
--spectrum-tabs-quiet-rule-color: transparent;
--spectrum-tabs-quiet-selection-indicator-color: transparent;
--spectrum-tabs-quiet-vertical-rule-color: transparent;
--spectrum-tabs-rule-color: transparent;
--spectrum-tabs-selection-indicator-color: transparent;
--spectrum-tabs-text-color: ButtonText;
--spectrum-tabs-text-color-disabled: GrayText;
--spectrum-tabs-text-color-hover: ButtonText;
--spectrum-tabs-text-color-key-focus: ButtonText;
--spectrum-tabs-text-color-selected: HighlightText;
--spectrum-tabs-vertical-rule-color: transparent;
.spectrum-Tabs-item {
&:before {
background-color: ButtonFace;
}
.spectrum-Icon {
z-index: 1;
position: relative;
}
.spectrum-Tabs-itemLabel {
position: relative;
z-index: 1;
}
}
.is-selected {
color: HighlightText;
.spectrum-Icon {
fill: HighlightText;
}
&:before {
background-color: Highlight;
color: HighlightText;
}
.spectrum-Tabs-itemLabel {
color: HighlightText;
}
}
}
}
47 changes: 47 additions & 0 deletions packages/@adobe/spectrum-css-temp/components/tags/skin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,3 +155,50 @@ governing permissions and limitations under the License.
}
}
}

@media (forced-colors: active) {
.spectrum-Tags-item {
Copy link
Copy Markdown
Member

@LFDanLu LFDanLu Dec 16, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like the Tags are missing a distinguishable active style in WHCM. Clicking on the Tag in the "icon, removable" story in non-WHCM displays a style change but not in WHCM

forced-color-adjust: none;
--spectrum-tag-background-color: ButtonFace;
--spectrum-tag-background-color-disabled: ButtonFace;
--spectrum-tag-background-color-hover: ButtonFace;
--spectrum-tag-background-color-key-focus: ButtonFace;
--spectrum-tag-background-color-selected: Highlight;
--spectrum-tag-background-color-selected-hover: Highlight;
--spectrum-tag-border-color: ButtonText;
--spectrum-tag-border-color-disabled: GrayText;
--spectrum-tag-border-color-error: ButtonText;
--spectrum-tag-border-color-error-hover: ButtonText;
--spectrum-tag-border-color-error-selected: HighlightText;
--spectrum-tag-border-color-hover: Highlight;
--spectrum-tag-border-color-key-focus: Highlight;
--spectrum-tag-border-color-selected: HighlightText;
--spectrum-tag-border-color-selected-key-focus: ButtonText;
--spectrum-tag-icon-color-error: ButtonText;
--spectrum-tag-icon-color-error-hover: ButtonText;
--spectrum-tag-removable-border-color-error-down: Highlight;
--spectrum-tag-removable-border-color-error-hover: Highlight;
--spectrum-tag-removable-border-color-key-focus: Highlight;
--spectrum-tag-removable-button-background-color-hover: ButtonFace;
--spectrum-tag-removable-button-background-color-key-focus: ButtonFace;
--spectrum-tag-removable-button-background-color-selected-hover: Highlight;
--spectrum-tag-removable-button-icon-color-hover: Highlight;
--spectrum-tag-removable-button-icon-color-key-focus: Highlight;
--spectrum-tag-removable-button-icon-color-selected: HighlightText;
--spectrum-tag-removable-button-icon-color-selected-hover: HighlightText;
--spectrum-tag-removable-text-color-down: ButtonText;
--spectrum-tag-removable-text-color-error-down: Highlight;
--spectrum-tag-removable-text-color-error-key-focus: Highlight;
--spectrum-tag-removable-text-color-hover: ButtonText;
--spectrum-tag-removable-text-color-key-focus: ButtonText;
--spectrum-tag-removable-text-color-selected: HighlightText;
--spectrum-tag-removable-text-color-selected-key-focus: HighlightText;
--spectrum-tag-text-color: ButtonText;
--spectrum-tag-text-color-disabled: GrayText;
--spectrum-tag-text-color-error-selected: HighlightText;
--spectrum-tag-text-color-hover: ButtonText;
--spectrum-tag-text-color-key-focus: ButtonText;
--spectrum-tag-text-color-selected: HighlightText;
--spectrum-tag-text-color-selected-key-focus: HighlightText;
}
}
6 changes: 6 additions & 0 deletions packages/@adobe/spectrum-css-temp/components/toast/skin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,3 +72,9 @@ governing permissions and limitations under the License.
}
}
}

@media (forced-colors: active) {
.spectrum-Toast {
border: 1px solid transparent;
}
}
13 changes: 13 additions & 0 deletions packages/@adobe/spectrum-css-temp/components/tooltip/skin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,3 +46,16 @@ governing permissions and limitations under the License.
border-top-color: var(--spectrum-tooltip-positive-background-color);
}
}

@media (forced-colors: active) {
.spectrum-Tooltip {
border: 1px solid transparent;
}
.spectrum-Tooltip-tip {
forced-color-adjust: none;
--spectrum-tooltip-background-color: CanvasText;
--spectrum-tooltip-negative-background-color: Highlight;
--spectrum-tooltip-info-background-color: Highlight;
--spectrum-tooltip-positive-background-color: Highlight;
}
}
8 changes: 8 additions & 0 deletions packages/@react-spectrum/actionbar/src/actionbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,3 +81,11 @@
min-width: 0;
}
}
@media (forced-colors: active) {
.react-spectrum-ActionBar {
&.react-spectrum-ActionBar--emphasized .react-spectrum-ActionBar-bar {

border: 1px solid transparent;
}
}
}